/* Charte d'audition.comparer-changer.fr — 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.

   Reprise à l'identique de la série 5 de mon-audition.comparer-changer.fr —
   même page, même formulaire, déjà migrée en v4 et relue à l'écran contre sa
   production —, chemins d'images ramenés à /img/1/. Ce qui est propre à ce
   site est en fin de fichier.

   Valeurs reprises du :root de sa feuille de production. */
:root {
    --heading-color: #00abbd;
    --accent-color: #ffbb18;
    --default-color: #444444;
    --nav-hover-color: #ffbb18;
    --nav-dropdown-hover-color: #ffbb18;

    /* 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 ───────── */

.light-background {
    --background-color: #f4f5fe;
    --surface-color: #ffffff;
}
.dark-background {
    --background-color: #00abbd;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #0c0091;
    --contrast-color: #ffffff;
}
.form-group {
    margin-bottom:10px;
}
.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;
}
#lead_form {
    top:100px;
    z-index:1001;
    padding:0px;
    border-radius: 15px;
    background-color: #ffffff;
}
#lead_form {
    position: relative !important;
    max-width: 100%;
    width: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
#lead_form section,#lead_form .section {
    padding:5px 0px;
}
.header {
    --background-color: rgba(255, 255, 255, 100);
    --default-color: #ffffff;
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 20px 0;
    transition: all 0.5s;
    z-index: 997;
}
.header .logo img {
    max-height: 50px;
    margin-right: 8px;
}
.header h2 {
    font-size: 25px;
    margin: 0;
    font-weight: 700;
    color: #00abbd;
}
.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}
section,
.section {
    background-color: var(--background-color);
    padding: 15px;
    scroll-margin-top: 100px;
    overflow: visible;
}
.section-title {
    padding-bottom: 60px;
    position: relative;
}
.section-title h2 {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    line-height: 1px;
    margin: 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    position: relative;
}
.section-title h2::after {
    content: "";
    width: 120px;
    height: 1px;
    display: inline-block;
    background: var(--accent-color);
    margin: 4px 10px;
}
.section-title div {
    text-align: center;
    color: var(--heading-color);
    margin: 0;
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--heading-font);
}
.hero {
    width: 100%;
    min-height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
}
.hero h1 {
    margin: 10px 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: color-mix(in srgb, var(--heading-color), transparent 30%);
}
.hero h1 span {
    color: var(--heading-color);
    border-bottom: 4px solid var(--accent-color);
}
.hero p {
}
.hero .btn-get-started {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 12px 28px;
    border-radius: 50px;
    transition: 0.5s;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.hero .btn-get-started:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.droite H3 {
    color: #40bbc0;
    text-align: center;
    padding-bottom: 30px;
}
.read-more {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.read-more:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
    padding-right: 19px;
}
.read-more:hover i {
    margin-left: 10px;
    color:#FFF;
}
.details .features-item+.features-item {
    margin-top: 100px;
}
.details .features-item ul {
    list-style: none;
    padding: 0;
}
.details .features-item ul li {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.details .features-item ul li:last-child {
    padding-bottom: 0;
}
.details .features-item ul i {
    font-size: 20px;
    padding-right: 4px;
    color: var(--accent-color);
}
.details .features-item p:last-child {
    margin-bottom: 0;
}
#btn_submit {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 50px;
}
#cgu_form {
    text-align: left;
    text-align: justify;
    font-size: 0.8em;
    line-height: 1;
}
.clients .swiper-slide img {
    opacity: 0.9;
    transition: 0.3s;
    filter: grayscale(100);
}
.clients {
    background: color-mix(in srgb, var(--background-color), transparent 30%);
}
.clients .swiper-slide img:hover {
    filter: none;
    opacity: 1;
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.bloc_desktop {
    display:block;
}
.bloc_mobile {
    display:none;
}

@media (max-width: 1199px) {
    .header h2 {
        font-size: 15px;
    }
    section,
    .section {
    }
}

@media screen and (max-width: 768px) {
    .bloc_form {
        border-bottom: 3px solid #40bbc0;
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 28px;
        line-height: 36px;
        text-align: center;
    }
    .hero p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }
    .hero .btn-get-started,
    .hero .btn-watch-video {
        font-size: 13px;
    }
    .details .features-item+.features-item {
        margin-top: 40px;
    }
}

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

@media (width <= 768px ) {
    .hero {
        background: url(/img/1/bg_mobile.jpg) center top no-repeat;
    }
}

@media (width <= 992px ) {
    .bloc_desktop {
        display:none;
    }
    .bloc_mobile {
        display:block;
    }
    #lead_form {
        position:relative;
        width:100%;
        max-width: 100%;
        top:0px;
        margin-top:10px;
    }
    #lead_form  > row {
        margin:0px;
    }
    .form_title {
        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: #00abbd;
}

/* Bandeau haut : en production il était borné (`container-fluid container-xl`),
   logo et accroche cadrés sur la largeur du contenu. Le bloc rend un
   `container-fluid` pleine largeur, qui collait le logo au bord de l'écran. */
#header > .container-fluid {
    max-width: 1140px;
    margin-inline: auto;
}

/* « 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: #444444;
    --heading-color: #00abbd;
    --surface-color: #fff;
}

#un-doute h2 {
    color: #00abbd;
}

/* Les listes de la section « Un doute ? » sont à coches, comme en production :
   puce Bootstrap teintée de l'accent, texte en gras, pas de puce de liste. */
#un-doute .list-inline {
    list-style: none;
    padding-left: 0;
    max-width: 900px;
}

#un-doute .list-inline li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

#un-doute .list-inline li i {
    color: var(--accent-color);
    font-size: 1.4rem;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Sur téléphone, la production servait un autre cadrage du visuel de hero
   (`bg_mobile.jpg`), posé en fond de section. Le bloc, lui, rend le visuel en
   `<img class="hero-bg">` qui recouvre ce fond : la règle mobile ci-dessus
   n'aurait servi à rien. On efface l'image pour laisser voir le fond. */
@media (width <= 768px) {
    .hero .hero-bg {
        display: none;
    }
}


/* 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: #444444;
    --heading-color: #00abbd;
    --surface-color: #fff;
}

#nos-atouts h3 {
    color: #00abbd;
}

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

/* 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;
}

/* Bande partenaires : en production elle était turquoise, titre « Partenaires »
   en blanc. Le thème la rend en `light-background` avec un titre teinté. */
#partenaires.light-background {
    --background-color: #00abbd;
    --surface-color: #00abbd;
    background-color: color-mix(in srgb, #00abbd, transparent 30%);
}

#partenaires h2,
#partenaires .section-title span {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

/* Les trois arguments : titre en capitales, taille courante, pas un titre de
   section. Le bloc propose un h3, laissé vide. */
#nos-atouts h3:empty {
    display: none;
}

#nos-atouts p.title {
    font-size: 18px;
    font-weight: 600;
    color: #444;
    line-height: 1.35;
}

#nos-atouts p.title span {
    color: var(--heading-color);
}

/* 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: 18px;
    font-weight: 600;
    color: #444;
    line-height: 1.35;
    text-align: center;
}

#nos-atouts p b,
#nos-atouts p span {
    color: #00abbd;
    font-weight: 600;
}

/* La carte du formulaire ne porte aucun retrait interne : le bandeau de titre
   doit toucher son bord haut, et les champs tiennent leur marge de
   `.bloc_form`. La règle `.droite { padding: 2% }` reprise de la feuille de
   production est neutralisée en production même — elle y calcule 0 — mais pas
   ici, et elle laissait une bande blanche au-dessus du turquoise. */
#lead_form .droite {
    padding: 0;
}

/* 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;
}


/* ── Propre à audition.comparer-changer.fr ──────────────────────────────── */

/* Le bloc HTML personnalisé ne porte que le pixel Facebook du site : sa
   section ne doit pas ouvrir une bande vide en bas de page. */
#pixel-facebook {
    padding: 0;
}