/* Charte de la version 1 — surcharge du thème v4 (style.css).

   style.css est livré par le template et réécrit à chaque mise à jour ; ce
   fichier ne l'est jamais, et le cadre le charge après lui (CssExist dans
   cadre/header.twig). Tout ce qui appartient au site vit donc ici.

   Deux parties : les variables de charte, puis les règles que servait la
   feuille de cette version et qui s'appliquent encore au balisage des blocs.
   Celles qui visaient un balisage disparu ont été écartées ; celles que le
   thème énonce déjà à l'identique aussi.

   La version 1 ne déclarait aucune variable : ces valeurs sont les couleurs
   qu'elle servait — le turquoise des titres, le vert des boutons. */
:root {
    --heading-color: #40bbc0;
    --accent-color: #7a9d41;
    --default-color: #555555;
    --nav-hover-color: #7a9d41;
    --nav-dropdown-hover-color: #7a9d41;

    /* Le site n'a jamais servi Roboto, Raleway ni Poppins : ses anciennes
       feuilles les déclaraient sans les charger, et le rendu tombait sur les
       polices système. On garde ce comportement plutôt que d'introduire un
       chargement que personne n'a demandé. */
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif;
    --heading-font: "Raleway", sans-serif;
    --nav-font: "Poppins", sans-serif;
}


/* ── Règles reprises de la feuille de production de cette version ───────── */

.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #40bbc0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}
.back-to-top i {
    font-size: 28px;
    color: #fff;
    line-height: 0;
}
.back-to-top:hover {
    background: #7a9d41;
    color: #fff;
}
#header {
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    padding: 20px 0;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo {
    font-size: 28px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
#header .logo a {
    color: #555555;
}
#header .logo img {
    max-height: 60px;
}
#header H1 {
    font-size:25px;
    margin-right:10px;
    color:#000;
}
.form_title {
    background-color: #40bbc0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
h2.form_title {
    text-align: center;
    font-variant: small-caps;
    font-weight: bolder;
    font-size: 1.5rem;
    padding:15px;
}
.bloc_form {
    padding:15px;
}
#cgu_form {
    text-align: left;
    text-align: justify;
    font-size: 0.8em;
    line-height: 1;
}

@media (max-width: 992px) {
    #header {
        padding: 15px 0;
    }
}

@media (width <= 991px ) {
    h2.form_title {
        font-size: 1.1rem;
    }
}

@media (width <= 768px ) {
    h2.form_title {
        font-size: 1.5rem;
    }
}

@media (width <= 576px ) {
    .form_title,.contact .droite {
        border-radius: 0px;
        box-shadow: none;
    }
}


/* ── Écarts avec le thème, à corriger explicitement ───────────────────────── */

/* Le thème peint les cartes d'arguments en `--contrast-color` avec du texte
   blanc. La feuille du site leur donnait un fond clair et n'a jamais touché à
   la couleur du texte : reprise telle quelle, elle laissait du blanc sur
   blanc. On rend la couleur au texte plutôt que de recolorer le fond. */
.about .icon-box {
    color: var(--default-color);
}

.about .icon-box h3 {
    color: var(--heading-color);
}

/* Même cause : le thème titre la bande partenaires en `--contrast-color`,
   qui vaut un bleu marine dont ce site n'a jamais rien fait. */
.clients h2 {
    color: #40bbc0;
}

/* ── Hero : le rendu propre aux versions 1 et 3 ───────────────────────────── */

/* Ces deux versions écrivaient leur accroche en capitales, très grande et en
   blanc plein — pas la teinte adoucie du thème. Valeurs reprises de
   `.contact .gauche h1`, qui portait ce hero en production. */
.hero h1 {
    font-size: 45px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}

.hero .hero-subtitle {
    /* « Nous vous proposons » est un h2 en production (32 px), et
       « un test auditif gratuit » un h3 (28 px) : ce n'est pas du texte
       courant, c'est la suite de l'accroche. */
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: #000 1px 0 10px;
    color: #fff;
}

.hero .hero-subtitle .accroche-surlignee {
    font-size: 28px;
}

.hero sup {
    font-size: 11px;
    top: -15px;
}

/* « un test auditif gratuit » était surligné de turquoise : c'est la promesse
   de la page, et elle se lisait ainsi. */
.accroche-surlignee {
    background-color: #40bbc0;
    color: #fff;
    padding: 0 0.3rem;
    box-decoration-break: clone;
}

/* « Un doute sur votre audition ? » : le thème rend ce bloc en bande sombre,
   qui vaut turquoise ici. En production la section était sur fond blanc, titre
   turquoise — la bande turquoise, elle, était celle des partenaires. */
#un-doute.dark-background {
    --background-color: #fff;
    --default-color: #555555;
    --heading-color: #40bbc0;
    --surface-color: #fff;
}

#un-doute h2 {
    color: #40bbc0;
}


/* Pastilles de confiance du bas de formulaire : la production ne les affichait
   pas sur cette version — ses gabarits `formation*.twig` ignoraient le réglage
   `form.footer`. `dynamique.twig` le lit, mais teste `is defined` et non sa
   valeur : le mettre à « off » en configuration ne l'éteint pas. On masque
   donc ici, en attendant que le gabarit teste la valeur.
   (La version 5 tournait déjà sur `dynamique` et les affichait : elle les garde.) */
#form-footer {
    display: none !important;
}

/* Les trois arguments de bas de page — RDV, appareil, bilan — étaient sur fond
   blanc en production, icône et titre en turquoise. Le thème rend ce bloc en
   bande sombre, qui vaut turquoise ici : titres et textes y passaient en blanc,
   et les icônes se perdaient dans le fond. */
#nos-atouts.dark-background {
    --background-color: #fff;
    --default-color: #555555;
    --heading-color: #40bbc0;
    --surface-color: #fff;
}

#nos-atouts h3 {
    color: #40bbc0;
}

#nos-atouts p {
    color: #555555;
}

/* Pied de page : la production servait un gris clair sur le gris foncé du
   fond, liens soulignés. Le thème prend sa couleur de texte dans
   `--default-color`, qui vaut autre chose selon le contexte — on la fixe. */
#site-footer {
    color: #b6b6b6;
}

#site-footer a {
    color: #b6b6b6;
    text-decoration: underline;
}

#site-footer h4 {
    color: #fff;
}

/* Le bandeau de titre doit toucher les bords de la carte : ses coins arrondis
   n'ont de sens que là. La colonne qui le porte applique une gouttière de
   15 px, qui laissait un liseré blanc de chaque côté. Les champs, eux, gardent
   leur retrait — il vient de `.bloc_form`, pas de cette colonne. */
#lead_form .droite {
    padding-left: 0;
    padding-right: 0;
}

/* Les trois arguments : la production les écrivait en un simple paragraphe
   sous la vignette, en capitales, taille courante — pas en titre de section.
   Le bloc propose un h3 que l'on laisse vide ; on le neutralise pour qu'il
   ne creuse pas d'espace. */
#nos-atouts h3:empty {
    display: none;
}

#nos-atouts p {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 1.4;
}

/* Le bouton d'envoi tenait dans sa largeur en production (`img-fluid`), il ne
   barrait pas toute la carte. */
#lead_form [name="submit-form"] {
    /* Le bouton porte `w-100` de Bootstrap, qui déclare `width: 100% !important`
       — sans `!important` en face, la règle est perdue. */
    width: auto !important;
    display: block;
    float: none;
    margin-inline: auto;
}

/* Icônes des champs : le thème les teinte de l'accent. En production elles
   gardaient le gris Bootstrap du groupe d'input, quelle que soit la version. */
.input-group-text i {
    color: #495057;
}

/* Les trois arguments : en production la vignette est centrée au-dessus du
   texte, à environ 104 px, et le texte est centré. Le thème en fait une
   rangée — vignette à gauche, texte à droite — et la réduit. */
#nos-atouts .icon-box {
    display: block;
    text-align: center;
}

#nos-atouts .icone {
    /* Le thème plafonne la vignette à 50 px et la décale à droite du texte
       (`.alt-features .icon-box .icone`). En production elle fait 104 px et
       elle est centrée au-dessus. */
    max-width: 104px;
    margin: 0 auto 0.75rem;
}

#nos-atouts .icone img {
    max-height: 104px;
    width: auto;
}

#nos-atouts p {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    line-height: 1.35;
    text-align: center;
}

#nos-atouts p b,
#nos-atouts p span {
    color: #3fbbc0;
    font-weight: 700;
}

/* La feuille de production dimensionne les paragraphes du hero (`.hero p`).
   Dans le montage en blocs, la carte du formulaire est **à l'intérieur** du
   hero : cette règle atteignait les textes de consentement, qui passaient de
   14 px à 22 px. Les paragraphes de la carte reprennent la taille de leur
   conteneur — le `<small>` des optins, notamment. */
#lead_form p,
#lead_form .optin-text p {
    font-size: inherit;
    line-height: inherit;
}


/* Le fond blanc de la carte est porté par `#lead_form`, qui applique une
   gouttière de 15 px ; la `.row` qu'il contient la reprend en marge négative,
   si bien que le bandeau de titre débordait de 15 px de chaque côté du blanc.
   On annule la marge négative : le bandeau et le fond ont la même largeur. */
#lead_form > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Et le bandeau colle au contenu : plus de filet blanc entre les deux. */
#lead_form .form_title {
    margin-bottom: 0;
}

/* Suite de la règle ci-dessus : la marge négative de la `.row` étant annulée,
   c'est la gouttière de `#lead_form` qui rentrait le bandeau de 15 px et
   laissait dépasser le blanc de chaque côté. On la retire aussi — le bandeau
   et le fond font alors la même largeur. Les champs gardent leur retrait, qui
   vient de `.bloc_form`. */
#lead_form {
    padding-left: 0;
    padding-right: 0;
}