/* ============================================================================
   Cornebarrieu Conduite , les composants du site public.

   Base : W3.CSS 4.15 (chargee avant, auto-hebergee) pour le socle et les
   utilitaires responsives. Fonts systeme, zero CDN, zero asset externe.

   LES COULEURS NE SONT PAS ICI : elles vivent dans charte.css, chargee juste
   avant, et partagee avec l'espace d'administration. Cette feuille ne pose que
   des composants : la grille de cartes, les bandes, les formulaires.
   ========================================================================= */

/* Les couleurs, l'espacement et la typo viennent de charte.css, chargee juste
   avant celle-ci. Cette feuille ne definit que des composants. */


/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body {
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font: 16px/1.6 var(--font-sys);
    color: var(--c-text); background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    /* Un mot plus large que sa colonne va a la ligne au lieu de pousser la
       page (constate a 820 px : l'adresse electronique du pied de page
       debordait de 31 px et creait une barre de defilement horizontale).
       break-word ne coupe que ce qui ne rentre vraiment pas. */
    overflow-wrap: break-word;
}
img { max-width: 100%; display: block; filter: brightness(var(--img-dim)); }
h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.08; font-weight: 800;
             text-transform: uppercase; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1rem, .93rem + .35vw, 1.2rem); letter-spacing: 0; }
p  { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: var(--c-link); text-decoration-line: underline;
     text-decoration-color: var(--c-accent-strong); text-decoration-thickness: .12em;
     text-underline-offset: .18em; transition: color .15s, text-decoration-color .15s; }
a:is(:hover, :focus-visible) { text-decoration-color: var(--c-accent); }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

.skip-link { position: absolute; left: var(--sp-2); top: -4rem; z-index: 200;
    background: var(--c-accent); color: var(--c-on-accent); font-weight: 700;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
    text-decoration: none; transition: top .15s; }
.skip-link:focus { top: var(--sp-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Mise en page -------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-4); }
/* RESPIRATION ENTRE SECTIONS. Attention au cumul : le bas de l'une et le haut
   de la suivante s'AJOUTENT. A 4 rem de chaque cote on obtenait 120 px de vide
   entre deux blocs, ce qui coupait la page en morceaux sans rapport. A 2,5 rem
   on est a 80 px, assez pour separer, pas assez pour perdre le lecteur. */
.section { padding-block: var(--sp-5); }
.section--tight { padding-block: var(--sp-4); }
.section--raised { background: var(--c-surface-raised); }
.section-head { max-width: 46rem; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-muted); margin-bottom: var(--sp-2); }
.eyebrow::before { content: ""; width: 1.8rem; height: var(--rule);
    background: var(--c-accent); border-radius: 2px; }
.lead { font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); color: var(--c-muted); }

/* Trait de marquage : le jaune ne sert qu'en fond ou en trait. */
.rule { height: var(--rule); background: var(--c-accent); border: 0; margin: 0; }

/* --- Boutons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: .78rem 1.4rem; border: 2px solid transparent; border-radius: 999px;
    font: 700 .95rem/1 var(--font-sys); letter-spacing: .04em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%;
    transition: transform .15s, background-color .15s, border-color .15s, color .15s; }

/* Sur telephone, un bouton au libelle long doit passer a la ligne. Sans ca il
   garde sa largeur, pousse sa colonne de grille, et c'est toute la page qui
   part en largeur : mesure a 360 px, « En savoir plus sur la conduite
   supervisee » faisait deborder la page de 118 px. */
@media (max-width: 620px) {
    .btn { white-space: normal; text-align: center; line-height: 1.25; }
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--accent { background: var(--c-accent); color: var(--c-on-accent); }
.btn--accent:hover { background: var(--c-accent-strong); }
.btn--ghost { border-color: currentColor; color: var(--c-text); background: transparent; }
.btn--ghost:hover { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* --- Barre d'infos (tout en haut) ---------------------------------------- */
.topbar { font-size: .82rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
    padding-block: .45rem; }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); }
.topbar__item svg { width: 1em; height: 1em; fill: var(--c-accent); flex: none; }
.topbar__notes { margin-left: auto; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.note { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-text); }
.note b { color: var(--c-accent); }

/* --- En-tete ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--c-border); transition: box-shadow .2s; }
.site-header.is-stuck { box-shadow: 0 6px 20px -10px rgba(0,0,0,.6); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-4); padding-block: .6rem; }
.brand { flex: none; line-height: 0; }
.brand img { width: 190px; height: auto; filter: none; mix-blend-mode: lighten; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: var(--sp-1); }
.nav a { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
    font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--c-text); text-decoration: none;
    border-bottom: var(--rule) solid transparent; }
.nav a:is(:hover, :focus-visible) { border-bottom-color: var(--c-accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--c-accent); }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* Sous-menus : le site a dix-huit pages, elles ne tiennent pas sur une ligne.
   Chaque rubrique ouvre son panneau au survol ET au clic, pour que le clavier
   et le tactile, qui ne survolent pas, aient le meme acces que la souris. */
.nav__sub { position: relative; }
.nav__sub-btn { display: flex; align-items: center; gap: .3rem;
    padding: .55rem .7rem; border: 0; border-bottom: var(--rule) solid transparent;
    border-radius: var(--radius-sm); background: transparent; cursor: pointer;
    font: inherit; font-weight: 700; font-size: .88rem; text-transform: uppercase;
    letter-spacing: .03em; color: var(--c-text); }
.nav__sub-btn svg { fill: currentColor; transition: rotate .15s; }
.nav__sub-btn:is(:hover, :focus-visible) { border-bottom-color: var(--c-accent); }
.nav__sub-btn[aria-expanded="true"] svg { rotate: 180deg; }

.nav .nav__menu { position: absolute; left: 0; top: 100%; min-width: 15rem; z-index: 10;
    display: none; flex-direction: column; gap: 0; padding: .4rem;
    background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border-strong); border-radius: var(--radius);
    box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); }
.nav .nav__sub:hover .nav__menu,
.nav .nav__sub:focus-within .nav__menu,
.nav .nav__sub-btn[aria-expanded="true"] + .nav__menu { display: flex; }
.nav__menu a { padding: .5rem .7rem; text-transform: none; letter-spacing: 0;
    font-size: .92rem; border-bottom: 0; border-left: var(--rule) solid transparent; }
.nav__menu a:is(:hover, :focus-visible) { border-bottom-color: transparent;
    border-left-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.nav__menu a[aria-current="page"] { border-left-color: var(--c-accent); }

/* Titres de rubrique dans le menu du telephone. */
.nav-mobile__titre { padding: var(--sp-3) var(--sp-4) .3rem; font-size: .72rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--c-muted); }

/* Bouton icone (theme, menu) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--c-text);
    border: 1px solid var(--c-border-strong); transition: border-color .15s, background-color .15s; }
.icon-btn:hover { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 14%, transparent); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
/* On montre la destination, pas l'etat courant : lune = aller vers le sombre. */
.icon-btn__moon { display: block; }
.icon-btn__sun { display: none; }
:root[data-theme="dark"] .icon-btn__moon { display: none; }
:root[data-theme="dark"] .icon-btn__sun { display: block; }
:root[data-theme="light"] .icon-btn__moon { display: block; }
:root[data-theme="light"] .icon-btn__sun { display: none; }

/* Menu mobile */
.nav-toggle { display: none; }
.nav-mobile { display: none; border-top: 1px solid var(--c-border); }
.nav-mobile[data-open="true"] { display: block; }
.nav-mobile ul { padding: var(--sp-2) 0 var(--sp-3); }
.nav-mobile a { display: block; padding: .7rem var(--sp-4); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--c-text);
    text-decoration: none; border-left: var(--rule) solid transparent; }
.nav-mobile a:is(:hover, :focus-visible) { border-left-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 10%, transparent); }

@media (max-width: 1100px) {
    .nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .header-actions { margin-left: auto; }
    .brand img { width: 150px; }
    .topbar__notes { width: 100%; margin-left: 0; }
}

/* --- Banniere ------------------------------------------------------------ */
.hero { position: relative; isolation: isolate; color: var(--c-paper);
    display: grid; align-items: end; min-height: clamp(380px, 56vh, 560px); }
.hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    object-fit: cover; filter: brightness(calc(var(--img-dim) * .95)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(78deg, rgba(20,20,13,.94) 0%, rgba(20,20,13,.82) 42%, rgba(20,20,13,.35) 100%); }
.hero .wrap { padding-block: var(--sp-6) var(--sp-7); }
.hero__inner { max-width: 40rem; }
.hero .eyebrow { color: var(--c-paper); }
.hero h1 { margin-bottom: var(--sp-3); }
.hero h1 em { font-style: normal; background: var(--c-accent); color: var(--c-on-accent);
    padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero__lead { color: var(--c-paper); opacity: .92; font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
    max-width: 34rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.hero .btn--ghost { color: var(--c-paper); }

/* Chiffres : rangee posee a cheval sur la banniere */
.stats { margin-top: calc(var(--sp-5) * -1); position: relative; z-index: 2; }
/* Le nombre de chiffres vient du service, il peut changer : la grille
   s'adapte plutot que d'imposer trois colonnes et de laisser un trou. */
.stats ul { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    background: var(--c-border); border: 1px solid var(--c-border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stats li { background: var(--c-surface); padding: var(--sp-4); text-align: center; }
.stats b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800;
    line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: var(--sp-2); font-size: .85rem; color: var(--c-muted); }
@media (max-width: 700px) { .stats ul { grid-template-columns: 1fr; } }

/* --- LA CARTE : un seul modele, reutilise partout ------------------------
   Anatomie identique dans toutes les grilles :
   [pictogramme] + bandeau jaune (titre) + corps + pied.
   C'est ce qui donne au site son rythme regulier. */
/* Le min() evite qu'une largeur de colonne plus grande que l'ecran ne pousse
   la page : sous 320 px, une carte de 300 px minimum debordait de 3 px et
   creait une barre de defilement horizontale. La colonne ne depasse jamais
   100 % de la place disponible. */
.grid { display: grid; gap: var(--sp-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 250px)), 1fr)); }
.grid--wide { --col: 300px; }

/* Le filet de la carte porte la limite (WCAG 1.4.11, 3:1) : la carte entiere
   est cliquable, sa bordure doit se voir au repos. Mesure : 3,3:1 en clair,
   4,5:1 en sombre, 5,4:1 sur la bande noire. */
.card { display: flex; flex-direction: column; overflow: hidden;
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    border-radius: var(--radius); position: relative;
    transition: transform .18s, border-color .18s, box-shadow .18s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__mark { display: flex; align-items: center; justify-content: center;
    width: 3.4rem; height: 3.4rem; margin: var(--sp-4) var(--sp-4) 0;
    border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 22%, transparent);
    border: 1px solid var(--c-border); }
.card__mark svg { width: 1.6rem; height: 1.6rem; fill: var(--c-text); }
.card__head { margin-top: var(--sp-4); padding: .7rem var(--sp-4);
    background: var(--c-accent); color: var(--c-on-accent); }
.card__head h3 { margin: 0; font-size: 1rem; letter-spacing: .02em; }
.card__body { padding: var(--sp-4); flex: 1; }
.card__body p:last-child { margin-bottom: 0; }
.card__foot { padding: 0 var(--sp-4) var(--sp-4); }
/* Affichage en ligne (et non en boite flex) : sur une colonne etroite le
   libelle passe a la ligne et la fleche suit le dernier mot, au lieu de
   rester collee a droite de la premiere ligne. */
.card__link { font-weight: 700; font-size: .88rem; text-transform: uppercase;
    letter-spacing: .04em; text-decoration: none;
    border-bottom: 2px solid var(--c-accent); padding-bottom: 2px; }
.card__link svg { width: .85em; height: .85em; fill: currentColor; margin-left: .35em;
    display: inline-block; vertical-align: -.05em; transition: transform .15s; }
.card:hover .card__link svg { transform: translateX(3px); }
/* Zone cliquable de toute la carte : posee plus bas, uniquement quand le pied
   ne contient qu'un seul lien (voir .card__foot > .card__link:only-child). */

.tag { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 999px;
    background: var(--c-primary); color: var(--c-on-primary); }

/* Variante tarif : meme anatomie, le corps porte un prix. */
.price { display: flex; align-items: baseline; gap: .4rem; margin-top: var(--sp-3);
    font-variant-numeric: tabular-nums; }
.price b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.price span { font-size: .85rem; color: var(--c-muted); }
.price-note { font-size: .8rem; color: var(--c-muted); text-transform: uppercase;
    letter-spacing: .08em; font-weight: 700; }

/* --- Puces (secteur, formations annexes) --------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li { border: 1px solid var(--c-border); border-radius: 999px;
    padding: .42rem .95rem; font-size: .9rem; font-weight: 600;
    background: var(--c-surface); transition: border-color .15s, background-color .15s; }
.chips li:hover { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface)); }
.chips--flat li { background: transparent; }

/* --- Bande label / partenaires ------------------------------------------ */
.label-band { display: grid; gap: var(--sp-5); align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
/* Les deux logos sont fournis sur fond blanc : au lieu de laisser deux
   rectangles blancs flotter sur le papier, on les pose sur une meme plaque.
   Le blanc devient un choix, pas un defaut de decoupe. */
.label-band__visual { display: flex; align-items: center; justify-content: center;
    gap: var(--sp-5); background: var(--c-plate); padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-border-strong); border-radius: var(--radius); }
.label-band__visual img.label { width: clamp(120px, 16vw, 170px); height: auto; }
.label-band__visual img.mcf { width: 92px; height: auto; }
@media (max-width: 800px) { .label-band { grid-template-columns: 1fr; } }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; gap: var(--sp-5); align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.info-list li { display: flex; gap: var(--sp-3); padding-block: var(--sp-3);
    border-bottom: 1px solid var(--c-border); }
.info-list li:last-child { border-bottom: 0; }
.info-list svg { width: 1.35rem; height: 1.35rem; fill: var(--c-text); flex: none; margin-top: .2rem; }
.info-list li > span { min-width: 0; }
.info-list b { display: block; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .1em; color: var(--c-muted); }
.info-list a { text-decoration: none; font-weight: 600; }
.info-list a:hover { text-decoration: underline; }
.cta-box { border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); padding: var(--sp-5); }
.cta-box .rule { width: 3rem; border-radius: 2px; margin-bottom: var(--sp-3); }

/* --- Pied de page --------------------------------------------------------- */
.site-footer { margin-top: auto; }
.site-footer .wrap { display: grid; gap: var(--sp-5); padding-block: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer img { width: 170px; height: auto; filter: none; mix-blend-mode: lighten; }
.site-footer h3 { font-size: .82rem; letter-spacing: .12em; color: var(--c-muted); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--c-border); font-size: .82rem; color: var(--c-muted); }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    justify-content: space-between; padding-block: var(--sp-3); }

/* --- Apparition au defilement, CSS pur ------------------------------------
   Pas de JS : si le navigateur ne connait pas les animations liees au
   defilement (Firefox a ce jour), rien ne se passe et tout reste visible. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal { animation: reveal-in linear both; animation-timeline: view();
                  animation-range: entry 5% cover 22%; }
        @keyframes reveal-in { from { opacity: 0; transform: translateY(16px); }
                               to   { opacity: 1; transform: none; } }
    }
}

/* Complements (styles sortis du HTML : aucune valeur en ligne). */
.note svg { fill: var(--c-accent); flex: none; }
.price-note--spaced { margin-top: var(--sp-5); }
.footer-baseline { margin-top: var(--sp-3); color: var(--c-muted); }

/* Sur telephone la barre d'infos mangeait trois lignes avant meme le logo :
   l'adresse part (elle reste dans le contact et le pied de page), le
   telephone et les avis restent. */
@media (max-width: 600px) {
    .topbar__item:first-child { display: none; }
    .topbar__notes { gap: var(--sp-2) var(--sp-3); }
}

/* ==========================================================================
   PAGES INTERIEURES (permis B, contact)
   Rien de nouveau cote composants : on reprend la carte de l'accueil et on
   lui ajoute une liste et un pied a deux liens.
   ========================================================================== */

/* Bandeau de titre de page : la banniere photo est reservee a l'accueil. */
.page-head { padding-block: var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head .lead { color: var(--c-muted); max-width: 46rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
    font-weight: 700; color: var(--c-muted); margin-bottom: var(--sp-3); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--c-muted); }
.breadcrumb ol, .breadcrumb ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb [aria-current] { color: var(--c-text); }

/* Ce que contient la formule. Puce carree jaune : le meme trait que partout. */
.card__list { margin-top: var(--sp-3); }

/* LE TEXTE COULE, il n'est pas decoupe en colonnes. En boite flexible, un
   libelle en gras et sa description devenaient deux blocs cote a cote : sur la
   fiche de Michael, « Qualites professionnelles » fabriquait sa propre colonne
   et sa description partait a droite, alors que la fiche de Carole, aux
   libelles plus courts, restait sur une ligne. Les deux cartes ne s'alignaient
   plus. La puce est donc posee HORS DU FLUX, et tout le reste se comporte
   comme une phrase : le passage a la ligne se fait ou il doit se faire. */
.card__list li { position: relative; padding-left: 1.05em; padding-block: .18rem;
    font-size: .93rem; }
.card__list li::before { content: ""; position: absolute; left: 0; top: .62em;
    width: .5em; height: .5em;
    background: var(--c-accent-strong); border-radius: 1px; }
/* Le libelle en tete de ligne respire avant sa description. */
.card__list li > b { margin-right: .35em; }
/* Les supplements ne sont pas dans le prix : filet pointille pour le dire. */
.card__extra { margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px dashed var(--c-border-strong); font-size: .85rem; color: var(--c-muted); }
.card__extra li { padding-block: .12rem; }
.card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
/* La carte entiere n'est cliquable que si elle n'a qu'un seul lien. Avec deux
   liens dans le pied, une zone cliquable globale volerait les clics. */
.card__foot > .card__link:only-child::after { content: ""; position: absolute; inset: 0; }
.card__link--soft { border-bottom-color: var(--c-border-strong); font-weight: 600; }

/* Carte mise en avant (la passerelle, seule de sa categorie) */
.card--feature { border-color: var(--c-accent-strong); }
.card--feature .card__head { background: var(--c-accent); }

/* Bande d'appel a l'action en fin de page */
.cta-band { text-align: center; }
.cta-band .btn-row { justify-content: center; }

/* --- Formulaire ----------------------------------------------------------
   Doctrine : l'explication d'un champ va dans une bulle d'aide au survol,
   jamais en petit gris a cote du champ. Le libelle, lui, dit l'action. */
.form { display: grid; gap: var(--sp-4); }
.field > label, .field > .label { display: flex; align-items: center; gap: .4rem;
    margin-bottom: .45rem; font-weight: 800; font-size: .8rem;
    letter-spacing: .08em; text-transform: uppercase; }
/* Tous les champs de saisie, quel que soit leur type : ecrire la liste des
   types un par un fait oublier le suivant (c'est arrive avec le telephone). */
.field input:not([type="checkbox"]):not([type="hidden"]), .field textarea {
    width: 100%; padding: .75rem .9rem; font: inherit; color: var(--c-text);
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm); transition: border-color .15s; }
.field input:not([type="checkbox"]):hover, .field textarea:hover { border-color: var(--c-accent-strong); }
.field textarea { min-height: 9rem; resize: vertical; }
.req { color: var(--c-muted); font-weight: 700; }
.check { display: flex; align-items: flex-start; gap: .6rem; }
/* 1,5 rem = 24 px : la taille minimale confortable pour un doigt. En dessous,
   on rate la case et on coche la voisine, ce qui est particulierement mauvais
   sur un accord de demarchage. */
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0;
    accent-color: var(--c-accent-strong); }
.check span { font-size: .95rem; }

/* La bulle se cale sur le CHAMP, pas sur le point d'interrogation : ancree a
   l'icone, elle sortait de l'ecran a droite quand l'icone est en bout de
   libelle long, et a gauche quand le libelle est court (mesure a 390 px).
   Calee sur le champ, elle tient toujours dans la colonne, quel que soit le
   libelle et quelle que soit la largeur. */
.field { position: relative; }
.hint-wrap { display: inline-flex; }
.hint { width: 1.2rem; height: 1.2rem; flex: none; cursor: help;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--c-border-strong);
    background: transparent; color: var(--c-text); font: 800 .72rem/1 var(--font-sys); }
.hint-wrap:is(:hover, :focus-within) .hint { background: var(--c-accent); color: var(--c-on-accent);
    border-color: var(--c-accent); }
/* Bulle calee sur la DROITE du point d'interrogation et non centree dessus :
   centree, elle depassait de l'ecran sur telephone quand l'icone est en bout
   de libelle (constate a 390 px : 25 px de debordement horizontal). */
.hint__bubble { position: absolute; bottom: calc(100% + .4rem); left: 0; right: auto;
    width: min(300px, 100%); z-index: 60; opacity: 0; visibility: hidden;
    padding: .65rem .8rem; border-radius: var(--radius-sm);
    background: var(--c-ink); color: var(--c-paper); box-shadow: var(--shadow);
    font: 400 .82rem/1.45 var(--font-sys); text-transform: none; letter-spacing: 0;
    transition: opacity .15s, visibility .15s; }
.hint__bubble::after { content: ""; position: absolute; top: 100%; left: 1.1rem;
    border: 6px solid transparent; border-top-color: var(--c-ink); }
.hint-wrap:is(:hover, :focus-within) .hint__bubble { opacity: 1; visibility: visible; }

.form-status { border-left: var(--rule) solid var(--c-accent);
    background: var(--c-surface-raised); padding: var(--sp-3) var(--sp-4); }
.form-status[hidden] { display: none; }

/* Le reglement de donnees : deplie a la demande, il n'ecrase pas le formulaire. */
.disclosure { border: 1px solid var(--c-border-strong); border-radius: var(--radius);
    background: var(--c-surface); padding: var(--sp-3) var(--sp-4); }
.disclosure summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.disclosure summary::marker { color: var(--c-accent-strong); }
.disclosure p { margin-top: var(--sp-3); font-size: .88rem; color: var(--c-muted); }

/* La mention sous le bouton d'envoi : presente, mais discrete. */
.form-mention { margin-top: var(--sp-2); font-size: .78rem; color: var(--c-muted); }

/* --- Plan d'acces --------------------------------------------------------
   Pas de carte Google embarquee : elle chargerait des scripts tiers et
   deposerait des traceurs. On montre l'adresse, et on ouvre l'itineraire
   dans l'application de la personne si elle le demande. */
.map-card { border: 1px solid var(--c-border-strong); border-radius: var(--radius); overflow: hidden; }

/* LE PLAN D'ACCES. Il garde sa luminosite propre dans les deux themes : une
   carte assombrie devient illisible, et ses couleurs ne sont pas les notres. */
.map-card__plan { display: block; width: 100%; height: 320px; border: 0;
    background: var(--c-surface); }
@media (max-width: 620px) { .map-card__plan { height: 240px; } }

.map-card__foot { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-4); background: var(--c-surface);
    border-top: 1px solid var(--c-border); }
.map-card__adresse { display: flex; align-items: center; gap: .5rem;
    font-size: .92rem; color: var(--c-muted); }
.map-card__adresse svg { flex: none; width: 1.1rem; height: 1.1rem; fill: currentColor; }
.stack-top { margin-top: var(--sp-4); }
/* Formules detaillees : DEUX par rangee, pas plus. A quatre de front les
   cartes tombaient a 230 px et la liste de ce que comprend la formule se
   cassait sur trop de lignes. Deux colonnes laissent respirer le texte, et la
   comparaison se fait en descendant. Une seule colonne sous 760 px. */
.grid--compare { grid-template-columns: 1fr; }
@media (min-width: 760px) {
    .grid--compare { grid-template-columns: repeat(2, 1fr); }
}

/* --- Consentement telephonique -------------------------------------------
   Texte legal : il reste VISIBLE a cote de la case, jamais dans une bulle
   d'aide. La bulle est faite pour l'aide a la saisie, pas pour ce qu'on
   demande a la personne d'accepter. */
.consent { border: 1px solid var(--c-border-strong); border-radius: var(--radius);
    background: var(--c-surface); padding: var(--sp-3); }
.consent span { font-size: .9rem; }

/* --- Anti-robot Altcha (widget reel) -------------------------------------
   Le widget est un element autonome fourni par la bibliotheque Altcha. On ne
   restyle pas son interieur : on lui passe les couleurs du site par ses
   variables, il fait le reste. */
altcha-widget { display: block; width: 100%; max-width: 26rem;
    --altcha-color-base: var(--c-surface);
    --altcha-color-border: var(--c-border-strong);
    --altcha-color-text: var(--c-text);
    --altcha-color-border-focus: var(--c-accent-strong);
    --altcha-border-radius: var(--radius);
}

/* Les libelles de cases sont des PHRASES, pas des etiquettes de champ : on
   annule les capitales heritees. Une phrase entiere en majuscules se lit mal,
   et le texte du consentement doit s'afficher tel qu'il est ecrit. */
.check > label { text-transform: none; letter-spacing: 0; font-weight: 600;
    font-size: .95rem; margin-bottom: 0; }
.consent > label { font-weight: 500; line-height: 1.5; }

/* --- Textes longs --------------------------------------------------------
   Les pages de contenu (reglement, mentions, methode) sont d'abord du texte.
   Une largeur de lecture bornee et une hierarchie franche suffisent : on ne
   met pas une carte autour de chaque paragraphe. */
.prose { max-width: 68ch; }

/* PIEGE : quand la meme balise porte « wrap » et « prose », les deux largeurs
   maximales se rencontrent et c'est la plus petite qui gagne. Le bloc tombait
   alors a 68 caracteres ET restait centre par le wrap : le texte se retrouvait
   au milieu de la page, decale de 300 px vers la droite par rapport au titre
   qui, lui, suivait la marge normale.
   On rend donc la largeur de page au bloc, et on borne la ligne de texte sur
   les enfants : la lecture reste confortable, l'alignement reste a gauche. */
.wrap.prose { max-width: var(--maxw); }
.wrap.prose > * { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-6); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-5); font-size: 1.05rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--c-muted); }
.prose p { margin: var(--sp-3) 0; }
.prose ul { margin: var(--sp-3) 0; padding-left: 1.2rem; list-style: disc; }
.prose li { margin: .4rem 0; }
.prose .btn-row { margin-top: var(--sp-4); }

/* Un reglement interieur se parcourt en diagonale : ses articles portent un
   filet de gauche pour qu'on retrouve son article d'un coup d'oeil. */
.prose--legal h3 { border-left: var(--rule) solid var(--c-accent); padding-left: var(--sp-3);
    color: var(--c-text); }

/* Liste a cocher : les documents a apporter se pointent du doigt. */
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .45em;
    width: .85rem; height: .85rem; border: var(--rule) solid var(--c-accent-strong);
    border-radius: 3px; }

/* Horaires : le jour porte, l'heure suit. */
.horaires { list-style: none; padding-left: 0; display: grid; gap: var(--sp-2); }
.horaires li { display: flex; gap: var(--sp-3); align-items: flex-start;
    border-left: var(--rule) solid var(--c-accent); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); }
.horaires svg { flex: none; width: 1.2rem; height: 1.2rem; fill: var(--c-muted); margin-top: .15rem; }
.horaires b { display: block; }

/* Texte et image cote a cote, une seule colonne sous 760 px. */
.illustre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
.illustre img { width: 100%; height: auto; border-radius: var(--radius);
    border: 1px solid var(--c-border-strong); }
@media (max-width: 760px) { .illustre { grid-template-columns: minmax(0, 1fr); } }

/* --- Portraits de l'equipe ----------------------------------------------- */
.card--portrait { padding-top: 0; overflow: hidden; }
/* LES DEUX PHOTOS SONT CARREES et montrent la personne en pied devant
   l'enseigne, visage vers le milieu de l'image. Cadrees en bande large et
   calees sur le haut, on ne voyait que l'enseigne et le sommet du crane.
   Un format 4/3 laisse place au buste, et le point d'interet remonte a 35 %
   de la hauteur : c'est la que sont les deux visages. */
/* HAUTEUR EN PIXELS, PAS EN RATIO : la carte est une boite flexible, et dans
   une boite flexible en colonne un rapport de forme est ignore au profit de la
   hauteur naturelle de l'image. Mesure : 600 px au lieu des 225 attendus. */
.card__photo { width: 100%; height: 300px; object-fit: cover;
    object-position: center 35%;
    border-bottom: var(--rule) solid var(--c-accent); }

/* Le role est ecrit SUR le bandeau jaune : la couleur attenuee du theme y
   devient illisible, et en sombre elle virait au bleu. Sur ce jaune, le texte
   est toujours noir, c'est la regle. */
.card__head .card__role { margin: .2rem 0 0; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-on-accent); opacity: .75; }

/* --- Retours du formulaire ----------------------------------------------
   Deux etats, deux couleurs de filet, jamais du rouge ou du vert seuls : le
   texte dit deja ce qui se passe, la couleur ne fait que le souligner. */
.form-status { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
    border-left: var(--rule) solid var(--c-border-strong);
    background: var(--c-surface); border-radius: var(--radius-sm); }
/* Envoi reussi : meme traitement que l'alerte, en vert. Les deux retours se
   distinguent alors d'un coup d'oeil, sans lire, ce que le seul filet jaune
   du debut ne permettait pas. */
.form-status--ok { font-weight: 600;
    display: flex; gap: var(--sp-3); align-items: flex-start;
    background: color-mix(in srgb, var(--c-success) 16%, var(--c-surface-raised));
    border: 1px solid color-mix(in srgb, var(--c-success) 60%, transparent);
    border-left: calc(var(--rule) * 1.5) solid var(--c-success); }
.form-status--ok .form-status__picto { fill: var(--c-success); }
.form-status--erreur { border-left-color: #c0392b; }
:root[data-theme="dark"] .form-status--erreur { border-left-color: #ff7c6b; }
.form-status__picto { flex: none; width: 24px; height: 24px; margin-top: .1rem; }
.form-status ul { margin: var(--sp-2) 0 0; padding-left: 1.2rem; list-style: disc; }
.form-status li { margin: .25rem 0; }

/* Les pastilles de secteur sont parfois des liens vers une page. */
.chips a { color: inherit; text-decoration: none; }
.chips a:is(:hover, :focus-visible) { text-decoration: underline; }

/* Un formulaire seul sur sa page (connexion) : borne en largeur, sinon les
   champs s'etirent sur tout l'ecran et deviennent illisibles. Cale a gauche,
   sous le titre de la page, pas centre au milieu du vide. */
.form-etroit { max-width: 30rem; }
/* Le lien sous le formulaire (mot de passe oublie, retour a la connexion) :
   il respire, sinon il colle au bouton. */
.form-etroit > .form + p { margin-top: 25px; }