/* style.css (À remplacer intégralement) */

/* Variables pour un thème Tesla-like */
:root {
    --couleur-fond: #181818; /* Noir très sombre */
    --couleur-texte: #f4f4f4; /* Blanc cassé pour la lisibilité */
    --couleur-accent: #e31824; /* Rouge Tesla (pour le header et les focus) */
    --couleur-bordure: #333333; /* Gris foncé pour les bordures discrètes */
    --couleur-favori-icone: #3f6ae0; /* Couleur Bleue pour l'encadré des favoris */
    --ombre-bleue: rgba(63, 106, 224, 0.5); /* Ombre pour l'effet bouton/néon */

    /* Nouvelles variables pour le texte néon */
    --couleur-neon-bleu-clair: #80e6ff; /* Bleu très clair */
    --ombre-neon-bleu-clair: 0 0 10px #80e6ff, 0 0 20px #80e6ff, 0 0 40px #80e6ff;
}

/* --- CORPS DE LA PAGE ET FILIGRANE --- */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Pseudo-élément pour le filigrane (afin de ne pas affecter l'opacité du contenu) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://batoucode.ovh/media/images/tesla-seeklogo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
}

/* --- HEADER ET TITRES --- */
header {
    width: 100%;
    text-align: center;
    padding: 40px 0 20px 0;
    position: relative;
    z-index: 1;
}

/* Titre principal "BATOU CODE" */
.header-titre-main {
    font-size: 2.5em; /* Taille plus grande pour le titre principal */
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 5px; /* Augmenté pour le néon */
    font-weight: 700; /* Plus gras pour le néon */
}

/* Style spécifique pour "BATOU CODE" en néon bleu */
.batou-code-neon {
    color: var(--couleur-neon-bleu-clair);
    text-shadow: var(--ombre-neon-bleu-clair);
    transition: text-shadow 0.3s ease-in-out; /* Optionnel : effet de transition pour le néon */
}
/* Vous pouvez ajouter un :hover si vous voulez que le néon "pulse" */
/*
.batou-code-neon:hover {
    text-shadow: 0 0 15px var(--couleur-neon-bleu-clair), 0 0 30px var(--couleur-neon-bleu-clair), 0 0 60px var(--couleur-neon-bleu-clair);
}
*/

/* Sous-titre "K3000" */
.header-subtitre {
    color: var(--couleur-accent);
    font-weight: 600;
    font-size: 1.2em;
    margin: 5px 0 0 0;
    letter-spacing: 2px;
}


/* --- SECTION FAVORIS ET TITRES DE SECTION (RÉFÉRENCE) --- */
.section-favoris {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    padding: 20px 0;
    margin-bottom: 30px;
    border-top: 1px solid var(--couleur-bordure); /* Ligne de séparation sous le header */
}

/* STYLE APPLIQUÉ À TOUS LES TITRES DE SECTION (.section-favoris et .section-meteo) */
.section-titre {
    font-weight: 400;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    padding-left: 10px;
    color: var(--couleur-texte); /* Couleur par défaut pour les titres de section */
}

.conteneur-favoris {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 30px 0;
}
/* ... (Le reste des styles .favori-item, .icone-favori, etc. reste inchangé) ... */


.favori-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 15%;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}

.favori-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--ombre-bleue);
}

.icone-favori {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border: 2px solid var(--couleur-favori-icone);
    border-radius: 10px;
    margin-bottom: 10px;
    background-color: var(--couleur-favori-icone);
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.3s;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 0 10px var(--ombre-bleue);
}

.icone-favori:hover {
    background-color: #3158b9;
    border-color: #3158b9;
}

.placeholder-icone {
    font-size: 2.5em;
    line-height: 1;
    color: var(--couleur-texte);
    font-weight: 600;
}

.placeholder-image {
    max-width: 80%;
    max-height: 80%;
}

.favori-item input[type="text"] {
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    border: none;
    border-bottom: 1px solid var(--couleur-bordure);
    text-align: center;
    width: 100%;
    padding: 5px 0;
    font-size: 0.85em;
    font-weight: 300;
    outline: none;
    transition: border-color 0.2s;
}

.favori-item input[type="text"]:not(:focus) {
    border-bottom: 1px solid transparent;
}

.favori-item input[type="text"]:focus {
    border-bottom: 1px solid var(--couleur-accent);
}

/* --- SECTION RECHERCHE GOOGLE --- */
.section-recherche {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    padding: 20px 0 50px 0;
}

.recherche-form {
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.recherche-input {
    flex-grow: 1;
    padding: 15px 20px;
    font-size: 1.1em;
    font-family: 'Montserrat', sans-serif;
    color: var(--couleur-texte);
    background-color: #2a2a2a;
    border: 1px solid var(--couleur-bordure);
    border-right: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    transition: border-color 0.2s;
}

.recherche-input:focus {
    border-color: var(--couleur-accent);
    border-right-color: var(--couleur-accent);
}

.recherche-bouton {
    padding: 15px 20px;
    font-size: 1.1em;
    background-color: #2a2a2a;
    color: var(--couleur-texte);
    border: 1px solid var(--couleur-bordure);
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.recherche-bouton:hover {
    background-color: #3e3e3e;
    border-color: var(--couleur-accent);
}

.recherche-input:focus + .recherche-bouton {
    border-color: var(--couleur-accent);
}


/* --- SECTION MÉTÉO (MÉTÉO FRANCE) --- */
.section-meteo {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    padding: 0 0 50px 0;
    margin-top: 20px;
    border-top: 1px solid var(--couleur-bordure); /* Ligne de séparation */
}

/* Style du conteneur du widget Météo France */
.meteo-france-widget-container {
    width: 600px;
    height: 150px;
    border: 2px solid var(--couleur-bordure);
    border-radius: 10px;
    margin: 0 auto; /* Centrer le widget */
    overflow: hidden; /* Assure que le contenu (iframe) ne déborde pas du cadre */
    position: relative;
    background-color: #333; /* Couleur de fond pour un aspect plus sombre */
}

/* S'assurer que l'iframe remplit exactement le conteneur */
.meteo-france-widget-container iframe {
    width: 100%;
    height: 100%;
    display: block;
}