/* ==========================================================================
   sobre.css - charte sobre, 11 novembre 2026
   Charge en dernier sur toutes les pages. Objectif : une image plus
   institutionnelle. Deux couleurs de fond (bleu marine et beige),
   des cartes blanches identiques, l'orange reserve aux boutons,
   aux icones et aux petits reperes. Le jaune mangue disparait.
   ========================================================================== */

:root{
  --mango:#C7BEA9;            /* le jaune devient un taupe discret */
  --sb-card-shadow:0 0 0 1px rgba(30,61,89,.08),0 12px 32px rgba(30,61,89,.06);
}

/* 1. Plus de bande tricolore sous le haut des pages */
html body section.hp-hero:after,
html body section.hp-page:after,
html body.hp-skin .page-hero:after,
html body .hp-skin .page-hero:after{display:none!important;content:none!important}

/* 2. Petits reperes de titre : toujours orange */
html body .hp-panel-navy h2:before,
html body .hp-cta h2:before{background:var(--ice-200)!important}

/* 3. Sur-titres sur fond bleu : texte clair, filet orange */
html body .hp-kicker,
html body .hp-skin .page-hero .eyebrow,
html body .page-hero .eyebrow,
html body .split-navy .eyebrow,
html body .section-navy .eyebrow{color:#E6DFCC!important;border-left-color:var(--ice-200)!important}

/* 4. Cartes : toutes blanches, sans liseré de couleur */
html body .hp-tiles .hp-tile,
html body .hp-three .hp-tile,
html body .hp-steps-color .hp-step,
html body .hp-skin .quiz-card,
html body .hp-vs-a,
html body .hp-pt,
html body .hp-pt:nth-child(odd),
html body .hp-pt:nth-child(even),
html body .hp-brief div,
html body .hp-brief div:nth-child(1),
html body .hp-brief div:nth-child(2),
html body .hp-brief div:nth-child(3),
html body .hp-offer-grid .c2,
html body .hp-offer-grid .c3,
html body .hp-offer-grid .c4{background:var(--white)!important;color:var(--navy-950)!important;box-shadow:var(--sb-card-shadow)!important}

html body .hp-pt h3,html body .hp-pt:nth-child(even) h3,
html body .hp-offer-grid .c2 h3,html body .hp-offer-grid .c3 h3,html body .hp-offer-grid .c4 h3,
html body .hp-brief dd,html body .hp-brief div:nth-child(1) dd{color:var(--navy-950)!important}
html body .hp-pt p,html body .hp-pt:nth-child(even) p,
html body .hp-offer-grid .c2 p,html body .hp-offer-grid .c3 p,html body .hp-offer-grid .c4 p,
html body .hp-brief dt,html body .hp-brief div:nth-child(1) dt,
html body .hp-brief div:nth-child(2) dt,html body .hp-brief div:nth-child(3) dt{color:var(--slate-500)!important}
html body .hp-offer-grid .c2 .hp-more,html body .hp-offer-grid .c3 .hp-more,html body .hp-offer-grid .c4 .hp-more{color:var(--navy-950)!important;text-decoration-color:var(--ice-200)!important}
html body .hp-offer-grid .c2 .hp-pill,html body .hp-offer-grid .c3 .hp-pill,html body .hp-offer-grid .c4 .hp-pill{background:var(--paper)!important;color:var(--navy-950)!important}
html body .hp-offer-grid .c1 .hp-pill{background:rgba(255,255,255,.14)!important;color:var(--white)!important}

/* Icones : orange sur fond blanc, partout */
html body .hp-pt .hp-ico,
html body .hp-pt:nth-child(odd) .hp-ico,
html body .hp-pt:nth-child(even) .hp-ico,
html body .hp-offer-grid .c2 .hp-ico,
html body .hp-offer-grid .c3 .hp-ico,
html body .hp-offer-grid .c4 .hp-ico{background:var(--ice-200)!important;color:var(--navy-900)!important}

/* 5. Avis clients : cartes blanches identiques, etoiles orange */
html body .hp-quote,
html body .hp-panel-paper .hp-quote,
html body .hp-panel-paper .hp-quote[data-c],
html body .hp-panel-paper .hp-quote[data-c="a"],
html body .hp-panel-paper .hp-quote[data-c="b"],
html body .hp-panel-paper .hp-quote[data-c="c"],
html body .hp-panel-paper .hp-quote[data-c="d"]{background:var(--white)!important;box-shadow:var(--sb-card-shadow)!important}
html body .hp .hp-panel-paper .hp-quote[data-c] blockquote,
html body .hp-panel-paper .hp-quote[data-c] figcaption,
html body .hp .hp-quote blockquote,
html body .hp-quote figcaption{color:var(--navy-950)!important}
html body .hp-quote .hp-stars,
html body .hp-panel-paper .hp-quote[data-c] .hp-stars{color:var(--ice-200)!important}

/* 6. Encadres pleins : beige, texte bleu */
html body .hp-limit,
html body .hp-skin .ap-base,
html body.hp-skin .ap-base{background:var(--paper)!important;border-left:4px solid var(--ice-200)!important}
html body .hp-limit h2,html body .hp-limit p,
html body .hp-skin .ap-base p,html body .hp-skin .ap-base h2,
html body.hp-skin .ap-base p,html body.hp-skin .ap-base h2{color:var(--navy-950)!important}
html body .hp-skin .af-consent-notice,html body.hp-skin .af-consent-notice{background:var(--paper)!important}

/* 7. Survol des boutons orange : bleu plutot que jaune */
html body .hp-btn-orange:hover,
html body .hp-skin .btn-primary:hover,
html body.hp-skin .btn-primary:hover,
html body .btn-quiz-yes:hover{background:var(--navy-950)!important;color:var(--white)!important}

/* 8. Formes decoratives jaunes : retirees */
html body .hp-sun,
html body .hp-deco .d1,
html body .hp-cta:after{display:none!important}

/* 9. Temoignages de l'ancienne charte : un seul liseré, orange */
html body .testimonial-card,
html body .testimonial-card:nth-child(3n+2){border-top-color:var(--ice-200)!important}

/* 10. Sections sans photo : le texte occupe toute la largeur */
html body .hp-where-grid{grid-template-columns:1fr!important}
html body .hp-where .hp-lede{max-width:72ch}
@media(min-width:900px){html body .hp-where .hp-facts-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}}
html body .hp-split:not(:has(.hp-split-photo)){grid-template-columns:1fr!important}
html body .hp-split:not(:has(.hp-split-photo)) .hp-lede{max-width:72ch}

/* 11. Listes et questions : un seul filet, orange, a gauche */
html body .hp-checks li,html body .hp-checks li:nth-child(n),
html body .hp-skin .check-list li,html body .hp-skin .check-list li:nth-child(n),
html body.hp-skin .check-list li:nth-child(n),
html body .hp-skin .faq-item,html body .hp-skin .faq-item:nth-of-type(n),
html body.hp-skin .faq-item:nth-of-type(n),
html body .hp-skin .ap-card:nth-of-type(n),html body.hp-skin .ap-card:nth-of-type(n),
html body .hp-skin .contact-method:nth-child(n),html body.hp-skin .contact-method:nth-child(n){box-shadow:inset 4px 0 0 var(--ice-200),0 0 0 1px rgba(30,61,89,.06)!important}

/* ==========================================================================
   Signature (v3) - sections numerotees, citation,
   une illustration par page
   ========================================================================== */


/* 13. Sections numerotees 01, 02, 03 */
html body{counter-reset:sbsec}
html body .hp-block h2:before,html body .hp-offers h2:before,html body .hp-path h2:before,
html body .hp-where h2:before,html body .hp-panel h2:before,html body .hp-panel-navy h2:before{
  counter-increment:sbsec;content:counter(sbsec,decimal-leading-zero)!important;display:block!important;
  width:auto!important;height:auto!important;border-radius:0!important;
  background:linear-gradient(var(--ice-200),var(--ice-200)) no-repeat left center/28px 2px!important;
  padding-left:40px;margin-bottom:18px!important;
  font-family:var(--font-body);font-size:.85rem;font-weight:600;letter-spacing:.14em;color:var(--ice-200);line-height:1.4}

/* 14. Extrait de seance en citation editoriale */
html body .hp-extract{max-width:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:48px 0 8px!important;border-top:1px solid rgba(30,61,89,.15)}
html body .hp-extract-label{font-size:.85rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-200)!important}
html body .hp .hp-extract blockquote,html body .hp-extract blockquote{font-family:var(--font-body)!important;font-style:normal;font-weight:500;font-size:clamp(1.15rem,1.8vw,1.4rem)!important;line-height:1.6!important;color:var(--navy-950)!important;max-width:46ch!important;border-left:0!important;padding:0 0 0 0!important;position:relative}
html body .hp-extract blockquote:before{content:"\201C"!important;display:block;margin-top:28px;font-family:var(--font-display);font-style:normal;font-size:5rem;line-height:.6;color:var(--ice-200);margin-bottom:12px;position:static!important;background:none!important;width:auto!important;height:auto!important;border:0!important}

/* 15. Une illustration differente dans le haut de chaque page */
@media(min-width:1100px){
  html body section.sb-ill{background-repeat:no-repeat!important;background-size:300px auto!important;
    background-position:right max(40px,calc(50vw - 560px)) center!important}
  html body section.page-hero.sb-ill h1{max-width:min(20ch,calc(100% - 400px))!important}
  html body section.page-hero.sb-ill .lede{max-width:min(62ch,calc(100% - 400px))!important}
  html body section.sb-ill-chaises{background-image:url("../images/ill-chaises.svg")!important}
  html body section.sb-ill-table{background-image:url("../images/ill-table.svg")!important}
  html body section.sb-ill-escalier{background-image:url("../images/ill-escalier.svg")!important}
  html body section.sb-ill-boussole{background-image:url("../images/ill-boussole.svg")!important}
  html body section.sb-ill-panneau{background-image:url("../images/ill-panneau.svg")!important}
  html body section.sb-ill-bulles{background-image:url("../images/ill-bulles.svg")!important}
  html body section.sb-ill-liste{background-image:url("../images/ill-liste.svg")!important}
  html body section.sb-ill-carnet{background-image:url("../images/ill-carnet.svg")!important}
  html body section.sb-ill-parcours{background-image:url("../images/ill-parcours.svg")!important}
}

/* 16. Bulle de parole au-dessus de l'appel final */
html body .hp-cta h2:before{content:""!important;display:block!important;width:52px!important;height:52px!important;border-radius:0!important;
  background:url("../images/ill-bulle-cta.svg") left bottom/contain no-repeat!important;margin-bottom:20px!important}

/* 17. Cartes de questions : blanches, filet orange, sans couleur de fond */
html body .hp-faq-card,html body .hp-faq-card:nth-child(n){background:var(--white)!important;border-radius:12px!important;box-shadow:inset 4px 0 0 var(--ice-200),0 0 0 1px rgba(30,61,89,.06)!important}
html body .hp-faq-card p{color:var(--slate-500)!important}

/* 18. Espace plus serre entre le haut de page et la premiere section */
html body section.hp-page+section.hp-block{padding-top:clamp(48px,6vw,80px)!important}

/* 19. Interligne des titres : les accents ne touchent plus la ligne du dessus */
html body .hp h2,html body h2{line-height:1.16!important}
html body .hp h1,html body h1{line-height:1.12!important}

/* 20. Espacement vertical entre les sections : plus resserre */
html body .hp,html body.hp-skin,html body .hp-skin{--hp-pad:clamp(40px,4.5vw,64px)!important}

/* 21. Sections de l'ancienne mise en page et hauts de page : espacements alignes */
html body section.section-paper,html body section.section-navy,html body section.reveal,html body section.rf,
html body.hp-skin main > section:not(.page-hero),html body.hp-skin > section:not(.page-hero):not(.cta-band){padding-top:clamp(40px,4.5vw,64px)!important;padding-bottom:clamp(40px,4.5vw,64px)!important}
html body section.cta-band{padding-top:clamp(40px,4.5vw,64px)!important;padding-bottom:clamp(40px,4.5vw,64px)!important}
html body section.hp-hero,html body section.hp-page,html body section.page-hero{padding-top:clamp(48px,5vw,80px)!important}
html body section.hp-page{padding-bottom:clamp(40px,4.5vw,64px)!important}
html body section.hp-page+section.hp-block,html body section.hp-hero+section.hp-block,html body section.hp-hero+section.hp-offers{padding-top:clamp(40px,4.5vw,64px)!important}
html body section.rf{padding-top:clamp(32px,3vw,48px)!important}

/* 22. Blocs en deux colonnes dont la photo a ete retiree : une seule colonne */
html body .split:not(:has(.split-image)):not(:has(> :nth-child(2))){grid-template-columns:1fr!important}
html body .split:not(:has(> :nth-child(2))) .lede{max-width:72ch!important}
html body .split:not(:has(> :nth-child(2))) .hero-actions{display:flex;flex-wrap:wrap;gap:16px}

/* 23. CGV et mentions legales : texte continu, sans grands trous entre paragraphes */
html body .about-columns[style*="grid-template-columns:1fr"]{display:block!important}
html body .about-columns[style*="grid-template-columns:1fr"] h2{margin:44px 0 16px!important}
html body .about-columns[style*="grid-template-columns:1fr"] h2:first-child{margin-top:0!important}
html body .about-columns[style*="grid-template-columns:1fr"] p{margin:0 0 14px!important;max-width:75ch!important}

/* 24. Page Reflexions : fond beige comme le reste du site, liseré orange uni */
html body section.rf{background:var(--paper)!important}
html body .rf-card::before{background:var(--ice-200)!important}

/* 25. Appel final de la page A propos : bleu comme sur les autres pages */
html body.hp-skin .cta-band,html body .hp-skin .cta-band{background:var(--navy-950)!important;color:var(--white)!important;border-radius:12px!important;box-shadow:inset 0 6px 0 var(--ice-200)!important}
html body.hp-skin .cta-band h2,html body .hp-skin .cta-band h2{color:var(--white)!important}
html body.hp-skin .cta-band .btn-primary,html body .hp-skin .cta-band .btn-primary{background:var(--ice-200)!important;color:var(--navy-900)!important}
html body.hp-skin .cta-band .btn-primary:hover{background:var(--white)!important}

/* 26. Photo de Montpellier : coins arrondis propres, sans liseré sombre */
html body .section-banner{border-radius:16px!important;border:0!important;background:transparent!important}
html body .section-banner img{border-radius:16px!important;border:0!important;display:block}