/* ==========================================================================
   Clinique du Sommeil Lessard · feuille commune des maquettes codées
   Source des valeurs : ../../projet/jetons.js (Concept 2, accueil approuvé 2026-11-08)
   Mobile : tout ce qui est sous 768 px (gouttières 16). Liste des classes : ../COMPOSANTS.md
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Couleurs */
  /* COULEURS : quatre seulement. Blanc, noir et les deux bleus de Steven (bleu clair #54B5E1, marine #09163F). Aucune teinte, aucun gris. */
  --blanc: #FFFFFF;
  --noir: #000000;
  --bleu-clair: #54B5E1;      /* fonds de section (avec le blanc), carte, filets, mots d'accent des gros titres */
  --marine: #09163F;          /* titres, boutons, icônes, contours ; jamais en fond de section */
  --fond: var(--blanc);
  --surface: var(--blanc);
  --ciel: var(--blanc);       /* ancien bleu pâle : retiré, remplacé par le blanc */
  --filet: var(--bleu-clair); /* filets et bordures décoratives */
  --filet-pied: var(--bleu-clair);
  --contour: var(--marine);   /* contour des champs */
  --encre1: var(--marine);    /* titres */
  --encre2: var(--noir);      /* texte courant */
  --encre3: var(--marine);    /* étiquettes et texte secondaire (distingués par la taille et la graisse, jamais par un gris) */
  --accent: var(--bleu-clair);  /* FOND dominant des boutons, onglets, puces actives, pastilles et icônes ; le texte dessus est blanc */
  --sur-accent: var(--blanc); /* le texte est blanc sur tout fond bleu */
  --accent-survol: var(--marine);   /* survol d'un fond bleu clair : il passe au marine, texte blanc */
  --accent-fonce: var(--marine);  /* texte, liens et icônes au trait sur fond blanc */
  --accent-grand: var(--bleu-clair);  /* mots d'accent des gros titres */
  --accent-pale: var(--bleu-clair);
  --succes: var(--marine);  --succes-pale: var(--blanc);
  --erreur: var(--noir);    --erreur-pale: var(--blanc);
  --attenue: var(--marine);
  --lien-inverse: var(--blanc);
  --ombre-c: 0, 0, 0;         /* ombres : noir transparent */

  /* Typo */
  --police-titre: "Poppins", system-ui, sans-serif;
  --police-texte: "Inter", system-ui, sans-serif;

  /* Rayons */
  --r-pilule: 999px;
  --r-panneau: 28px;
  --r-carte: 20px;
  --r-interne: 16px;
  --r-segment: 8px;

  /* Ombres (noir transparent) */
  --o-douce: 0 1px 3px rgba(var(--ombre-c), .09), 0 6px 18px rgba(var(--ombre-c), .07);   /* e1 */
  --o-carte: 0 2px 6px rgba(var(--ombre-c), .06), 0 12px 32px rgba(var(--ombre-c), .09);   /* carte sans bordure */
  --o-flottante: 0 2px 6px rgba(var(--ombre-c), .06), 0 12px 32px rgba(var(--ombre-c), .09); /* e2 */
  --o-forte: 0 24px 60px rgba(var(--ombre-c), .14);                                          /* e3 */
  --o-bleue: 0 12px 28px rgba(84, 181, 225, .38);                                            /* bouton, photos */

  /* Dégradé de section : blanc sur 30 %, puis fondu étalé sur les 70 % restants vers le bleu clair à 11 % d'opacité au plus (bleu clair transparent sur blanc) */
  --voile-bleu: rgba(84, 181, 225, .11);
  --diag-arrets: #FFFFFF 0%, #FFFFFF 30%, var(--voile-bleu) 100%;

  /* Mise en page */
  --contenu: 1200px;
  --gouttiere: 24px;          /* marge minimale de chaque côté (16 en mobile) */
  --section-haut: 72px;
  --section-bas: 80px;
  --nav-h: 72px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
hr { color: var(--bleu-clair); }
:where(input, textarea, select, option) { color: var(--noir); outline-color: var(--marine); }
:where(button) { background-color: transparent; color: inherit; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative;
  background: var(--fond); color: var(--encre2);
  font: 400 16px/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
sup, sub { font-size: max(12px, .8em); line-height: 0; }
h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }   /* :where : spécificité nulle, les composants gardent leur padding */
h1, h2, h3, h4, h5 { color: var(--encre1); text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--encre1); }
a[href^="mailto:"] { overflow-wrap: anywhere; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent-fonce); outline-offset: 3px; border-radius: 6px; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* Icônes Lucide (sprite inséré par build.py : <svg class="ico"><use href="#i-arrow-up-right"/></svg>) */
.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ico--14 { width: 14px; height: 14px; stroke-width: 1.75; }
.ico--16 { width: 16px; height: 16px; stroke-width: 1.75; }
.ico--18 { width: 18px; height: 18px; }
.ico--22 { width: 22px; height: 22px; }
.ico--24 { width: 24px; height: 24px; }

/* 3. Typographie ----------------------------------------------------------- */
.titre-affiche { font: 700 72px/1.02 var(--police-titre); letter-spacing: -1.5px; }
.titre-1       { font: 700 60px/1.04 var(--police-titre); letter-spacing: -1px; }
.titre-2       { font: 700 40px/1.08 var(--police-titre); letter-spacing: -.8px; }
.titre-2-bandeau { font: 700 46px/1.06 var(--police-titre); letter-spacing: -.6px; }
.titre-2-petit { font: 700 40px/1.2 var(--police-titre); letter-spacing: -.6px; }
.titre-3       { font: 700 28px/1.2 var(--police-titre); }
.titre-4       { font: 600 20px/1.3 var(--police-titre); }
.titre-5       { font: 600 16px/1.35 var(--police-titre); }
.chapo   { font: 400 19px/1.6 var(--police-texte); color: var(--encre2); }
.corps   { font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.second  { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.ui      { font: 500 14px/1.45 var(--police-texte); }
.surtitre {
  display: block; font: 600 12px/1.2 var(--police-texte); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent-fonce);
}
.surtitre--gris { color: var(--encre3); }
.accent { color: var(--accent-fonce); }        /* mot d'accent dans un titre */
.titre-1 .accent, .titre-2 .accent { color: var(--accent-grand); }
.ligne { display: block; }                      /* force une ligne de titre (héros) */
.lien-fleche {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 500 14px/20px var(--police-texte); color: var(--accent-fonce); text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; color: var(--accent-fonce); }

/* 4. Mise en page ---------------------------------------------------------- */
.conteneur { width: min(var(--contenu), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
:is([class*="grille"], .duo, .histoire, .mission, .lecture) > * { min-width: 0; }
.section { padding: var(--section-haut) 0 var(--section-bas); position: relative; }
.section--serree { padding: 80px 0; }
.section--premiere { padding-top: 128px; }      /* première section d'une page intérieure (sous la nav) : le fil d'Ariane est à 128 px, comme dans les en-têtes photo */
.pile    { display: flex; flex-direction: column; gap: 20px; }
.pile-16 { display: flex; flex-direction: column; gap: 16px; }
.pile-8  { display: flex; flex-direction: column; gap: 8px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.grille-cote { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 68px; align-items: start; } /* titre à gauche, FAQ ou formulaire à droite */

/* En-tête de section : titre à gauche, élément (lien, onglets, chapô) en bas à droite */
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; }
.entete-section--serree { margin-bottom: 24px; }
.entete-section__titre { max-width: 690px; }
.entete-section__titre .surtitre { margin-bottom: 16px; }
.entete-section__chapo { max-width: 420px; }

/* Fonds de section : blanc sur 30 %, fondu étalé vers le bleu clair à 11 % d'opacité au plus (jamais plus). Raccords sans couture
   (bord bas de A = bord haut de B) :
   fond-diag → fond-diag-hd → fond-diag …   |  fond-diag-bg → fond-diag-hg → …
   fond-blanc → fond-descend → fond-ciel → fond-monte → fond-blanc
   Au-dessus du pied : la dernière section finit en blanc (fond-blanc ou fond-monte). Le texte reste sombre : il tombe sur la partie blanche. */
.fond-blanc    { background: #fff; }
.fond-ciel     { background: var(--voile-bleu); }
.fond-diag     { background: linear-gradient(to bottom right, var(--diag-arrets)); } /* ↘ blanc en haut à gauche, bleu clair en bas à droite */
.fond-diag-hd  { background: linear-gradient(to top right, var(--diag-arrets)); }    /* ↗ bleu clair en haut à droite */
.fond-diag-hg  { background: linear-gradient(to top left, var(--diag-arrets)); }     /* ↖ bleu clair en haut à gauche */
.fond-diag-bg  { background: linear-gradient(to bottom left, var(--diag-arrets)); }  /* ↙ bleu clair en bas à gauche */
.fond-descend  { background: linear-gradient(to bottom, #fff 0%, #fff 30%, var(--voile-bleu) 100%); }
.fond-monte    { background: linear-gradient(to top, #fff 0%, #fff 30%, var(--voile-bleu) 100%); }

/* 5. Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; max-width: 100%; padding: 6px 6px 6px 24px; border: 0; border-radius: var(--r-pilule);
  font: 500 14px/20px var(--police-texte); text-align: left; text-decoration: none;
  transition: background-color .15s, box-shadow .15s, transform .15s var(--ease-sortie);
}
.btn__pastille {
  width: 40px; height: 40px; border-radius: var(--r-pilule); flex: none;
  display: grid; place-items: center;
}
.btn__pastille .ico { width: 18px; height: 18px; }
.btn--principal { background: var(--accent); color: var(--sur-accent); box-shadow: var(--o-bleue); }
.btn--principal .btn__pastille { background: #fff; color: var(--accent-fonce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn--principal:hover { background: var(--accent-survol); color: var(--sur-accent); }
.btn--secondaire { background: #fff; color: var(--encre1); box-shadow: inset 0 0 0 1px var(--contour); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn--secondaire .btn__pastille { background: var(--accent); color: var(--sur-accent); }
.btn--secondaire:hover { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); color: var(--encre1); }
.btn--contour-bleu { background: #fff; color: var(--accent-fonce); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent-fonce); padding-left: 18px; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn--contour-bleu .btn__pastille { background: var(--accent); color: #fff; margin-left: auto; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn--blanc { background: #fff; color: var(--encre1); min-height: 48px; padding: 4px 18px; box-shadow: inset 0 0 0 1px var(--filet), var(--o-douce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn--sans-pastille { padding: 6px 24px; text-align: center; justify-content: center; gap: 10px; }
.btn--sans-pastille > .ico { width: 18px; height: 18px; color: var(--accent-fonce); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--filet); }
.btn--chargement, .btn--chargement:hover { cursor: progress; background: var(--accent-survol); }   /* envoi en cours */
.btn__rouet { width: 40px; height: 40px; border-radius: var(--r-pilule); background: #fff; display: grid; place-items: center; flex: none; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn__rouet::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--accent-pale); border-top-color: var(--accent-fonce);
  animation: rouet .8s linear infinite;
}
@keyframes rouet { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn__rouet::before { animation-duration: 2.4s; } }
.point-statut { width: 8px; height: 8px; border-radius: 50%; background: var(--succes); flex: none; }

/* Bouton rond (48) */
.btn-rond {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: var(--r-pilule);
  display: inline-grid; place-items: center; text-decoration: none;
  background: #fff; color: var(--accent-fonce); box-shadow: inset 0 0 0 1px var(--filet); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.btn-rond .ico { width: 18px; height: 18px; }
.btn-rond:hover { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); color: var(--accent-fonce); }
.btn-rond--plein { background: var(--accent); color: #fff; box-shadow: none; }
.btn-rond--plein:hover { background: var(--accent); color: var(--sur-accent); box-shadow: var(--o-bleue); }
.btn-rond--ciel { background: var(--ciel); box-shadow: none; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.btn-rond--flottant { box-shadow: inset 0 0 0 1px var(--filet), var(--o-douce); }
.btn-rond--44 { width: 44px; height: 44px; }
.btn-rond--encre { color: var(--encre1); }

/* 6. Navigation ------------------------------------------------------------ */
.site-entete { position: absolute; top: 24px; left: 0; right: 0; z-index: 30; }
.nav {
  width: min(var(--contenu), 100% - 2 * var(--gouttiere)); margin-inline: auto; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 8px 0 28px; background: #fff; border-radius: var(--r-pilule);
  box-shadow: inset 0 0 0 1px var(--filet), var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.nav__logo { display: block; width: 64px; height: 56px; flex: none; }
.nav__logo img { width: 64px; height: 56px; object-fit: contain; }
.nav__menu { display: flex; gap: 4px; }
.nav__lien {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px;
  border-radius: var(--r-pilule); font: 500 14px/20px var(--police-texte);
  color: var(--encre2); text-decoration: none; background: none; border: 0;
}
.nav__lien .ico { width: 14px; height: 14px; stroke-width: 2.25; }
.nav__lien:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.nav__lien.est-actif { background: var(--accent); color: #fff; }
.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__actions .btn { flex: none; white-space: nowrap; }
.nav__panier {
  position: relative; width: 48px; height: 48px; border-radius: var(--r-pilule);
  display: grid; place-items: center; color: var(--encre1); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--filet);
}
.nav__panier .ico { width: 18px; height: 18px; }
.nav__panier:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.nav__panier-nombre {
  position: absolute; top: 0; right: 0; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pilule); background: var(--accent); color: var(--marine);
  font: 600 12px/20px var(--police-texte); text-align: center; box-shadow: 0 0 0 2px #fff;
}
.nav__burger { display: none; }
.nav__tiroir { display: none; }

/* 7. Héros de l'accueil ---------------------------------------------------- */
.heros { position: relative; min-height: 1080px; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.heros__media { position: absolute; inset: 0; }
.heros__image { width: 100%; height: 100%; object-fit: cover; object-position: 92% center; max-width: none; }
.heros__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.95) 40%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 58%);
}
.heros__contenu { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 96px; }   /* centré verticalement entre le bas de l'en-tête (96 px) et la bande de raccourcis : même distance en haut et en bas */
.heros__contenu .surtitre { margin-bottom: 24px; }
.heros__titre { max-width: 760px; text-shadow: 0 2px 6px rgba(9, 22, 63, .25); }   /* ombre marine à 25 %, serrée contre les lettres : relief sans halo */
.heros__chapo { max-width: 460px; margin-top: 28px; }
.heros__contenu .actions { margin-top: 36px; }
.heros__raccourcis { position: relative; margin-top: auto; margin-bottom: 32px; }

/* Raccourcis (bande de 3 accès sous le héros) */
.raccourcis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.raccourci {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  min-height: 84px; padding: 16px 30px 16px 20px; border-radius: var(--r-carte);
  text-decoration: none; color: inherit;
}
.raccourci:hover, .raccourci.est-survol { box-shadow: inset 0 0 0 1.5px var(--marine); color: inherit; }
.raccourci__orbe { width: 52px; height: 52px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; }
.raccourci__titre { display: block; font: 600 16px/22px var(--police-titre); color: var(--encre1); }
.raccourci__sous { display: block; font: 400 14px/21px var(--police-texte); color: var(--encre3); margin-top: 2px; }
.raccourci > .ico { color: var(--accent-fonce); }

/* 8. Onglets --------------------------------------------------------------- */
.onglets {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pilule);
  background: #fff; box-shadow: inset 0 0 0 1px var(--filet); flex: none; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.onglet {
  height: 44px; padding: 0 24px; border: 0; border-radius: var(--r-pilule); background: none;
  font: 500 14px/20px var(--police-texte); color: var(--encre2); white-space: nowrap;
}
.onglet:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--encre1); }
.onglet[aria-selected="true"] { background: var(--accent); color: var(--sur-accent); }
[role="tabpanel"][hidden] { display: none; }

/* 9. Panneau service (image + liste de services) --------------------------- */
.panneau-service {
  display: grid; grid-template-columns: 486px minmax(0, 1fr); min-height: 460px;
  background: #fff; border-radius: var(--r-panneau); overflow: hidden; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.panneau-service__image { width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.panneau-service__contenu { padding: 48px 56px; }
.panneau-service__contenu .btn { margin-top: 32px; }
.service-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.service-ligne + .service-ligne { margin-top: 24px; padding-top: 24px; }
.service-ligne__titre { font: 700 28px/1.2 var(--police-titre); color: var(--encre1); }
.service-ligne__texte { margin-top: 8px; font: 400 16px/1.65 var(--police-texte); color: var(--encre2); max-width: 530px; }

/* Carte service (grilles de services, e01) */
.carte-service {
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
  background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-service__orbe { width: 52px; height: 52px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; }
.carte-service__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.carte-service__texte { font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.carte-service__bas { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* 10. Section carte des cliniques ----------------------------------------- */
.section-carte { position: relative; min-height: 800px; padding: 100px 0; background: var(--bleu-clair); overflow: hidden; }
.section-carte__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; }
.section-carte .conteneur { position: relative; }
.section-carte__zoom { position: absolute; z-index: 1; right: max(var(--gouttiere), (100% - var(--contenu)) / 2); bottom: 48px; display: flex; gap: 6px; }

/* Panneau de recherche (« Une clinique près de chez vous ») */
.panneau-recherche {
  width: 400px; padding: 28px; background: #fff; border-radius: 24px;
  box-shadow: 0 0 0 2px var(--ciel), 0 0 0 3px var(--filet), var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.panneau-recherche .titre-3 { margin: 16px 0; }
.panneau-recherche .champ + .champ { margin-top: 16px; }
.panneau-recherche .liste-cliniques { margin-top: 16px; }
.panneau-recherche .lien-fleche { margin: -8px 0 -12px 12px; }

/* Liste de cliniques (lignes) */
.liste-cliniques { display: flex; flex-direction: column; }
.clinique-ligne {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 67px; padding: 12px; border-radius: var(--r-segment);
}
.clinique-ligne:hover { box-shadow: inset 0 0 0 1.5px var(--marine); }
.clinique-ligne__nom { display: block; font: 500 14px/20px var(--police-texte); color: var(--encre1); text-decoration: none; }
.clinique-ligne__nom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* toute la ligne est cliquable */
.clinique-ligne__nom:hover, .clinique-ligne.est-selectionnee .clinique-ligne__nom { color: var(--accent-fonce); text-decoration: underline; }
.clinique-ligne__region { display: block; font: 400 14px/21px var(--police-texte); color: var(--encre3); margin-top: 2px; }

/* Carte clinique (listes, fiches) */
.carte-clinique {
  display: flex; flex-direction: column; gap: 20px; padding: 32px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-clinique__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.carte-clinique__nom { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); margin-top: 6px; }
.info-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; }
.info-ligne + .info-ligne { padding-top: 20px; }
.info-ligne__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.info-ligne__valeur { font: 400 14px/1.45 var(--police-texte); color: var(--encre1); margin-top: 4px; }
.info-ligne .surtitre { color: var(--encre3); margin-top: 4px; }

/* 11. Pastilles, puces ----------------------------------------------------- */
.pastille {                       /* étiquette neutre en texte simple : « 13 CLINIQUES AU QUÉBEC » (aucune pastille décorative autour d'une donnée fixe) */
  display: inline-block; max-width: 100%; color: var(--accent-fonce);
  font: 600 12px/1.4 var(--police-texte); letter-spacing: 1.5px; text-transform: uppercase;
}
.pastille-statut {                /* statut, une seule taille : --ouvert, --ferme, --rdv, --ferie, --neutre */
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; flex: none;
  border-radius: var(--r-pilule); font: 600 12px/1 var(--police-texte); letter-spacing: .5px; white-space: nowrap;
  background: var(--ciel); color: var(--accent-fonce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.pastille-statut::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; background: currentColor; }
.pastille-statut--ouvert { background: var(--accent); color: var(--marine); }   /* petits textes (12 px) sur bleu clair : marine ; les grands textes et boutons restent blancs */
.pastille-statut--ferme  { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--marine); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }   /* contour marine, sans gris */
.pastille-statut--rdv    { background: var(--marine); color: #fff; }
.pastille-statut--ferie  { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--bleu-clair); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.pastille-statut--ferie::before { background: var(--bleu-clair); }
.pastille-statut--neutre { background: #fff; color: var(--encre2); box-shadow: inset 0 0 0 1px var(--filet); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.pastille-statut--neutre::before { display: none; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces > li { min-width: 0; max-width: 100%; }
.puce {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 4px 18px;
  border: 0; border-radius: var(--r-pilule); background: #fff; box-shadow: inset 0 0 0 1px var(--filet);
  font: 400 16px/26px var(--police-texte); color: var(--encre1); text-decoration: none; text-align: left; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.puce__nombre { font-size: 14px; color: var(--encre3); }
.puce:hover { box-shadow: inset 0 0 0 1px var(--contour); color: var(--encre1); }
.puce.est-active, .puce[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); box-shadow: none; font-weight: 500; }
.puce.est-active .puce__nombre, .puce[aria-pressed="true"] .puce__nombre { color: var(--sur-accent); }

/* 12. Champs --------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ__etiquette { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.champ--compact .champ__etiquette { font: 600 12px/16px var(--police-texte); letter-spacing: .5px; }
.champ__boite { position: relative; }
.champ__boite > .ico { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--encre2); pointer-events: none; }
.champ__saisie {
  width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-interne);
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour);
  font: 400 16px/26px var(--police-texte); color: var(--encre1); appearance: none; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.champ--compact .champ__saisie { height: 48px; }
textarea.champ__saisie { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; }
.champ__saisie::placeholder { color: var(--encre3); opacity: 1; }
.champ__saisie:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.champ__boite > .ico ~ .champ__saisie { padding-left: 46px; }
.champ__saisie--pilule { border-radius: var(--r-pilule); padding-left: 18px; }
.champ__liste {   /* <select> en pilule avec chevron */
  border-radius: var(--r-pilule); padding: 0 52px 0 18px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23121D38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.champ__saisie.est-vide { color: var(--encre3); }          /* <select> qui montre encore son invite */
.champ__boite:has(.champ__effacer, .champ__bouton) .champ__saisie { padding-right: 56px; }
.champ__effacer, .champ__bouton {   /* bouton rond de 44 dans un champ : effacer, afficher le mot de passe */
  position: absolute; right: 4px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pilule);
  display: grid; place-items: center; background: none; color: var(--encre1);
}
.champ__effacer:hover, .champ__bouton:hover { box-shadow: inset 0 0 0 1.5px var(--marine); }
.champ__effacer .ico, .champ__bouton .ico { width: 18px; height: 18px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.champ__aide { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.champ--erreur .champ__saisie, .champ--erreur .case input, .champ--erreur .choix { box-shadow: inset 0 0 0 2px var(--erreur); }
.champ__erreur {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 12px;
  background: #fff; color: var(--noir); box-shadow: inset 0 0 0 1.5px var(--noir); font: 500 14px/1.5 var(--police-texte); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.champ__erreur .ico { width: 16px; height: 16px; margin-top: 2px; }
.champ__succes {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--marine); font: 500 14px/1.5 var(--police-texte); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.champ__succes .ico { width: 16px; height: 16px; margin-top: 2px; }
.obligatoire { color: var(--encre1); }

.case { display: flex; align-items: center; gap: 14px; min-height: 44px; font: 400 16px/1.5 var(--police-texte); color: var(--encre1); cursor: pointer; }
.case input {
  appearance: none; margin: 0; width: 24px; height: 24px; flex: none; border-radius: 6px; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.case input:checked {
  background: var(--accent-fonce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: none;
}
.case input[type="radio"] { border-radius: 50%; }
.case input[type="radio"]:checked { background: #fff; box-shadow: inset 0 0 0 7px var(--accent-fonce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.case--long { align-items: flex-start; }
.case--long input { margin-top: 1px; }
.case--long span { font-size: 15px; line-height: 1.55; }

/* Résumé d'erreurs (haut de formulaire) */
.resume-erreurs { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 20px 24px; border-radius: var(--r-carte); background: #fff; color: var(--noir); box-shadow: inset 0 0 0 2px var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.resume-erreurs > .ico { margin-top: 2px; }
.resume-erreurs__titre { font: 600 18px/1.35 var(--police-titre); color: var(--erreur); }
.resume-erreurs__liens { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 6px; font: 400 14px/1.5 var(--police-texte); }
.resume-erreurs__liens li + li::before { content: "·"; padding: 0 6px; }
.resume-erreurs a { color: var(--erreur); }

/* Bannière de confirmation (et variante info) */
.banniere { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 24px; border-radius: var(--r-carte); background: #fff; box-shadow: inset 0 0 0 2px var(--marine); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.banniere__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: #fff; color: var(--succes); display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.banniere__titre { font: 600 18px/1.35 var(--police-titre); color: var(--encre1); margin-top: 2px; }
.banniere__texte { font: 400 14px/1.5 var(--police-texte); color: var(--encre2); margin-top: 4px; }
.banniere--info { background: var(--accent); box-shadow: none; color: #fff; --encre1: #fff; --encre2: #fff; --encre3: #fff; --accent-fonce: #fff; --accent-grand: #fff; }   /* bloc bleu clair, texte blanc : plus de rectangle contouré dans la carte du formulaire */
.banniere--info .banniere__orbe { background: #fff; color: var(--marine); }
.banniere--info a { color: #fff; }

/* 13. Fil d'Ariane --------------------------------------------------------- */
.fil-ariane ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.fil-ariane li { display: inline-flex; align-items: center; font: 400 14px/20px var(--police-texte); color: var(--encre1); }
.fil-ariane li + li::before {
  content: ""; width: 14px; height: 14px; margin: 0 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356657F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre3); text-decoration: none; }
.fil-ariane a:hover { color: var(--accent-fonce); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--encre1); }


/* 14. FAQ (accordéon <details>) ------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 16px; }
.faq__item { background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.faq__item[open] { box-shadow: var(--o-flottante); }
.faq__question {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 96px; padding: 24px 32px; list-style: none; cursor: pointer;
  font: 600 20px/1.3 var(--police-titre); color: var(--encre1);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__chevron { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; transition: rotate .2s; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.faq__chevron .ico { width: 18px; height: 18px; }
.faq__item[open] .faq__chevron { background: var(--accent); color: var(--sur-accent); rotate: 180deg; }
.faq__reponse > p { max-width: 68ch; }
.faq__reponse { padding: 0 32px 28px; font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }

/* 15. À propos : média, valeurs, confiance -------------------------------- */
.apropos { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 96px; }
.apropos__media { position: relative; border-radius: var(--r-panneau); overflow: hidden; min-height: 600px; }
.apropos__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; max-width: none; }
.apropos__logo { position: absolute; left: 24px; bottom: 24px; width: 292px; padding: 28px 32px; background: #fff; border-radius: var(--r-carte); box-shadow: 0 18px 40px rgba(var(--ombre-c), .14); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.apropos__logo img { width: 228px; height: auto; }
.apropos__valeurs { margin-top: 48px; }
.apropos__valeurs > .titre-4 { margin-bottom: 14px; }

.grille-valeurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tuile-valeur { padding: 18px; min-height: 176px; background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.tuile-valeur__pastille { width: 40px; height: 40px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; margin-bottom: 10px; }
.tuile-valeur__pastille .ico { width: 18px; height: 18px; }
.tuile-valeur__titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.tuile-valeur__texte { font: 400 14px/1.5 var(--police-texte); color: var(--encre2); margin-top: 4px; }
.tuile-valeur--large { grid-column: 1 / -1; min-height: 0; display: flex; align-items: center; gap: 10px; }
.tuile-valeur--large .tuile-valeur__pastille { margin: 0; flex: none; }

.confiance { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-carte); margin-top: 20px; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.confiance__sep { background: transparent; }
.confiance__item { display: flex; align-items: center; gap: 14px; padding: 20px; }
.confiance__item img { width: 56px; height: 56px; flex: none; }
.confiance__orbe { width: 56px; height: 56px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.confiance__texte { font: 500 14px/20px var(--police-texte); color: var(--encre1); }

/* 16. Produits ------------------------------------------------------------- */
.vitrine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.vitrine__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.carte-produit {
  position: relative; display: flex; flex-direction: column; min-height: 300px; padding-bottom: 24px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-produit:hover { box-shadow: inset 0 0 0 1px var(--contour); }
.carte-produit__puits { height: 196px; display: grid; justify-items: center; align-items: start; padding-top: 23px; }
.carte-produit__puits img { width: 150px; height: 150px; object-fit: contain; }
.carte-produit__texte { padding: 0 20px; }
.carte-produit__nom { display: inline-block; padding-block: 2px; font: 600 16px/22px var(--police-titre); color: var(--encre1); text-decoration: none; }
.carte-produit__nom::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte-produit__prix { display: block; margin-top: 4px; font: 500 14px/21px var(--police-texte); color: var(--accent-fonce); text-decoration: none; }
a.carte-produit__prix { display: inline-block; padding: 11px 0; margin-block: -7px -11px; position: relative; z-index: 1; }
a.carte-produit__prix:hover { text-decoration: underline; color: var(--accent-fonce); }
.carte-produit__marque { display: block; margin-bottom: 6px; }
.carte-produit--vedette .carte-produit__puits { height: 440px; padding-top: 50px; }
.carte-produit--vedette .carte-produit__puits img { width: 340px; height: 340px; }
.carte-produit--vedette .carte-produit__texte { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 36px 54px; }
.carte-produit--vedette .carte-produit__nom { font: 700 54px/1.06 var(--police-titre); letter-spacing: -.6px; }
.carte-produit--vedette .carte-produit__nom::after { display: none; }
.carte-produit--vedette .carte-produit__prix { font: 600 18px/1.3 var(--police-titre); margin-top: 6px; }
.carte-produit--vedette .btn { position: relative; z-index: 1; }
/* Carte de boutique (e06 à e10, e28) : rayon 20 avec ombre. La vitrine de l'accueil garde le rendu de base. */
.carte-produit--grille { min-height: 0; padding: 20px; border-radius: var(--r-carte); box-shadow: var(--o-douce); }
.carte-produit--grille:hover { box-shadow: inset 0 0 0 1px var(--contour), var(--o-douce); }
.carte-produit--grille .carte-produit__puits { height: 200px; padding: 0; align-items: center; }
.carte-produit--grille .carte-produit__puits img { width: 180px; height: 180px; }
.carte-produit--grille .carte-produit__puits > .cadre-photo { width: 100%; height: 100%; }
.carte-produit--grille .carte-produit__texte { flex: 1; display: flex; flex-direction: column; padding: 20px 0 0; }
.carte-produit--grille .carte-produit__marque { margin-bottom: 8px; }
.carte-produit--grille a.carte-produit__prix { padding: 6px 0 20px; margin-block: -2px -20px; }   /* zone de 47 px qui ne recouvre pas le lien du nom au-dessus */
.carte-produit__nom--2-lignes { min-height: 44px; }   /* aligne les prix des produits associés */
.carte-produit__montant { display: block; margin-top: 6px; font: 600 18px/1.3 var(--police-titre); color: var(--encre1); }
.carte-produit__bas { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.carte-produit__variante { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.carte-produit__bas .btn-rond { margin-left: auto; position: relative; z-index: 1; }

/* 17. Carte membre (équipe) ------------------------------------------------ */
.carte-membre {
  display: flex; flex-direction: column; padding: 28px 24px;
  background: linear-gradient(to bottom, var(--diag-arrets)); border-radius: var(--r-panneau); box-shadow: 0 16px 40px rgba(var(--ombre-c), .06);
}
.carte-membre__entete { display: block; min-height: 96px; padding: 0; }
.carte-membre__nom { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.carte-membre__role { margin-top: 6px; }
.carte-membre__photo { margin-top: 12px; }
.carte-membre__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-interne); }
.carte-membre__bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.carte-membre__lieu { display: flex; align-items: center; gap: 8px; font: 400 14px/21px var(--police-texte); color: var(--encre1); }
.carte-membre__lieu .ico { color: var(--accent-fonce); }

/* 18. Bandeau rendez-vous -------------------------------------------------- */
.bandeau-rdv { position: relative; background: #fff; overflow: hidden; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.bandeau-rdv__texte { min-height: 520px; display: flex; flex-direction: column; justify-content: center; padding: 64px 0; }
.bandeau-rdv__texte > * { max-width: 560px; }
.bandeau-rdv__texte .chapo { max-width: 520px; margin-top: 24px; }
.bandeau-rdv__texte .actions { margin-top: 24px; gap: 24px; }
.bandeau-rdv__media { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 44.45%); }
.bandeau-rdv__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; max-width: none; }   /* l'image est un carré dont le logo touche le haut : on aligne le haut, on rogne le bas */
.bandeau-rdv__slogan { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 300 17px/20px var(--police-titre); color: #fff; text-align: center; }
.bandeau-rdv__slogan::after { content: ""; width: 44px; height: 1px; background: #99D5F2; }
.lien-tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 14px/20px var(--police-texte); color: var(--encre1); text-decoration: none; }
.lien-tel .ico { color: var(--accent-fonce); width: 16px; height: 16px; }
.lien-tel:hover { color: var(--accent-fonce); text-decoration: underline; }

/* 19. Pied de page --------------------------------------------------------- */
.pied { background: linear-gradient(to bottom, #fff, var(--ciel)); padding: 72px 0 36px; }
.pied__haut { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.pied__logo img { width: 260px; height: auto; }
.pied__colonnes { display: flex; justify-content: space-between; gap: 24px; }
.pied__colonne { min-width: 0; }
.pied__titre { position: relative; font: 600 18px/24px var(--police-titre); color: var(--encre1); padding-bottom: 11px; }
.pied__titre::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; background: var(--accent); }
.pied__liens { margin-top: 9px; }
.pied__liens a { display: flex; align-items: center; min-height: 44px; padding-block: 7px; font: 400 16px/26px var(--police-texte); color: var(--encre2); text-decoration: none; }
.pied__liens a:hover { color: var(--accent-fonce); text-decoration: underline; }
.pied__filet { height: 1px; background: transparent; border: 0; margin: 0; }
.pied__haut + .pied__filet { margin-top: 47px; }
.pied__contact { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 108px; }
.pied__coordonnees { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 40px; }
.pied__coordonnees a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--encre1); text-decoration: none; }
.pied__coordonnees a:hover { color: var(--accent-fonce); text-decoration: underline; }
.pied__coordonnees .ico { color: var(--accent-fonce); width: 16px; height: 16px; }
.pied__joindre { font: 600 16px/22px var(--police-titre); color: var(--encre1); }
.pied__tel { font: 600 16px/22px var(--police-titre); }
.pied__courriel { font: 600 16px/26px var(--police-texte); }
.pied__secteurs { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 28px 0; }   /* 28 px au-dessus (filet) et 28 px au-dessous (bande légale) */
.pied__secteurs-titre { font: 600 16px/22px var(--police-titre); color: var(--encre1); }
.pied__secteurs-texte { font: 600 16px/26px var(--police-texte); color: var(--encre2); }
.pied__chevrons { display: inline-flex; color: var(--accent); }
.pied__chevrons .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.pied__chevrons .ico:nth-child(1) { opacity: .25; } .pied__chevrons .ico:nth-child(2) { opacity: .4; }
.pied__chevrons .ico:nth-child(3) { opacity: .6; } .pied__chevrons .ico:nth-child(4) { opacity: .8; }
.pied__secteurs .btn-rond { background: none; box-shadow: none; color: var(--encre1); }
.pied__legal { padding-top: 16px; }
.pied__liens-legaux { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 32px; }
.pied__liens-legaux a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/21px var(--police-texte); color: var(--encre2); }
.pied__credits { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 0; font: 500 14px/21px var(--police-texte); color: var(--encre3); }

/* 20. Intermédiaire (tablette) -------------------------------------------- */
@media (max-width: 1199px) {
  .nav__lien { padding: 0 12px; }
  .apropos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .panneau-service { grid-template-columns: 40% minmax(0, 1fr); }
  .pied__haut { grid-template-columns: 1fr; gap: 40px; }
  .pied__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
  .pied__contact { flex-wrap: wrap; padding: 24px 0; gap: 20px 32px; }
  .pied__contact .actions { flex-wrap: nowrap; }
  .carte-service-lien { padding: 24px; }
  .carte-service-lien__tete { gap: 12px; }
  .carte-service-lien__titre { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
  .carte-service-lien__titre .nowrap { white-space: normal; }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .nav__menu, .nav__actions .btn { display: none; }
  .nav__burger { display: grid; }
  .vitrine { grid-template-columns: 1fr; }
  .apropos { grid-template-columns: 1fr; }
  .apropos__media { aspect-ratio: 4 / 5; min-height: 0; max-width: 560px; }
  .entete-section { flex-direction: column; align-items: flex-start; gap: 24px; }
  .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raccourcis { grid-template-columns: 1fr; padding: 8px; }
  .panneau-service { grid-template-columns: 1fr; }
  .panneau-service__image { height: 300px; }
}

/* 21. Mobile (< 768) ------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --gouttiere: 16px; --section-haut: 52px; --section-bas: 60px; --nav-h: 64px; }
  body { font-size: 16px; }
  .titre-affiche { font-size: clamp(32px, 10.25vw, 40px); line-height: 1.08; letter-spacing: -.8px; }
  .titre-1 { font-size: clamp(30px, 10.25vw, 40px); line-height: 1.1; letter-spacing: -.5px; }
  .titre-2, .titre-2-bandeau { font-size: clamp(28px, 9.23vw, 36px); line-height: 1.1; letter-spacing: -.6px; }
  .titre-2-petit { font-size: clamp(28px, 9.23vw, 36px); line-height: 1.12; letter-spacing: -.6px; }
  .titre-3 { font-size: 24px; }
  .chapo { font-size: 17px; }
  .section--serree { padding: 72px 0; }
  .section--premiere { padding-top: 100px; }
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .grille-cote { grid-template-columns: 1fr; gap: 32px; }
  .grille-2--petites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .entete-section { margin-bottom: 32px; }

  /* boutons pleine largeur dans un groupe d'actions */
  .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .actions > .btn { width: 100%; }
  .actions > .lien-tel { align-self: flex-start; }

  /* nav */
  .site-entete { top: 12px; }
  .nav { padding: 0 6px 0 16px; }
  .nav__logo, .nav__logo img { width: 52px; height: 45px; }
  .nav__actions { gap: 6px; }
  .nav__panier { width: 44px; height: 44px; }
  .nav__burger {
    width: 44px; height: 44px; border: 0; border-radius: var(--r-pilule);
    display: grid; place-items: center; background: var(--ciel); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
  .nav__tiroir {
    display: block; width: min(var(--contenu), 100% - 2 * var(--gouttiere)); margin: 8px auto 0;
    padding: 12px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
  .nav__tiroir[hidden] { display: none; }
  .nav__tiroir .nav__lien { display: flex; justify-content: space-between; width: 100%; height: 48px; font-size: 16px; }
  .nav__tiroir .btn { width: 100%; margin-top: 8px; }

  /* héros */
  .heros { min-height: 0; }
  .heros__contenu { order: 1; padding-top: 120px; }
  .heros__contenu .surtitre { margin-bottom: 16px; }
  .heros__chapo { margin-top: 20px; }
  .heros__contenu .actions { margin-top: 28px; }
  .heros__media { order: 2; position: relative; inset: auto; height: 340px; margin-top: 8px; }
  .heros__image { object-position: 72% 30%; }
  .heros__voile { background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 35%); }
  .heros__raccourcis { order: 3; margin: -64px auto 24px; }
  .raccourcis { grid-template-columns: 1fr; padding: 8px; }
  .raccourci { min-height: 72px; padding: 10px 14px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr) 20px; }
  .raccourci__orbe { width: 44px; height: 44px; }

  /* onglets et panneau service */
  .onglets { display: flex; width: 100%; }
  .onglet { flex: 1; padding: 0 8px; }
  .panneau-service__image { height: 240px; }
  .panneau-service__contenu { padding: 28px 20px 32px; }
  .service-ligne__titre { font-size: 22px; }
  .service-ligne + .service-ligne { margin-top: 20px; padding-top: 20px; }
  .panneau-service__contenu .btn { width: 100%; }

  /* carte des cliniques : panneau puis carte */
  .section-carte { min-height: 0; padding: 0; display: flex; flex-direction: column; background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
  .section-carte .conteneur { padding: 56px 0 24px; }
  .panneau-recherche { width: 100%; padding: 24px 20px; }
  .clinique-ligne .pastille-statut { letter-spacing: .3px; padding: 0 10px; }
  .section-carte__image { position: relative; inset: auto; height: 360px; object-position: 62% center; order: 2; }
  .section-carte__carte { position: relative; order: 2; }
  .section-carte__zoom { right: 16px; bottom: 16px; }

  /* à propos */
  .apropos { gap: 40px; }
  .apropos__media { aspect-ratio: 4 / 5; }
  .apropos__logo { left: 16px; bottom: 16px; width: 200px; padding: 18px 20px; }
  .apropos__logo img { width: 160px; }
  .grille-valeurs { grid-template-columns: 1fr; }
  .tuile-valeur { min-height: 0; }
  .confiance { grid-template-columns: 1fr; }
  .confiance__sep { height: 1px; }

  /* produits */
  .vitrine { margin-top: 28px; gap: 12px; }
  .vitrine__grille { gap: 12px; }
  .carte-produit { min-height: 0; border-radius: var(--r-carte); padding-bottom: 18px; }
  .carte-produit__puits { height: 140px; padding-top: 16px; }
  .carte-produit__puits img { width: 108px; height: 108px; }
  .carte-produit__texte { padding: 0 14px; }
  .carte-produit__nom { font-size: 15px; line-height: 20px; }
  .carte-produit__prix { font-size: 13px; line-height: 19px; }
  .carte-produit--vedette { border-radius: var(--r-panneau); }
  .carte-produit--vedette .carte-produit__puits { height: 280px; padding-top: 24px; }
  .carte-produit--vedette .carte-produit__puits img { width: 240px; height: 240px; }
  .carte-produit--vedette .carte-produit__texte { flex-direction: column; align-items: stretch; padding: 0 20px 24px; }
  .carte-produit--vedette .carte-produit__nom { font-size: 40px; }
  .carte-produit--vedette .btn { width: 100%; }

  /* équipe */
  .carte-membre { padding: 20px; }
  .carte-membre__entete { min-height: 0; }

  /* bandeau rendez-vous */
  .bandeau-rdv__texte { min-height: 0; padding: 72px 0 40px; }
  .bandeau-rdv__media { position: relative; width: 100%; aspect-ratio: 1; }

  /* pied */
  .pied { padding: 56px 0 32px; }
  .pied__logo img { width: 200px; }
  .pied__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .pied__colonne { min-width: 0; }
  .pied__haut + .pied__filet { margin-top: 40px; }
  .pied__contact { flex-direction: column; align-items: stretch; padding: 24px 0; gap: 16px; }
  .pied__coordonnees { flex-direction: column; align-items: flex-start; gap: 0; }
  .pied__contact .actions > .btn { width: 100%; }
  .pied__secteurs { padding: 20px 0; text-align: center; }
  .pied__chevrons { display: none; }
  .pied__liens-legaux { justify-content: flex-start; gap: 0 20px; }
  .pied__liens-legaux a { min-height: 44px; }
  .pied__credits { flex-direction: column; margin-top: 12px; }

  /* formulaires, FAQ */
  .faq__question { min-height: 80px; padding: 18px 20px; font-size: 18px; }
  .faq__reponse { padding: 0 20px 22px; }
  .resume-erreurs, .banniere { padding: 16px 18px; }
  .carte-clinique { padding: 24px 20px; }

  /* fil d'Ariane : seulement le parent, « ‹ Forfaits CPAP » */
  .fil-ariane li { display: none; }
  .fil-ariane li:nth-last-child(2) { display: inline-flex; }
  .fil-ariane li:nth-last-child(2)::before {
    content: ""; width: 16px; height: 16px; margin: 0 4px 0 -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A55E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  .fil-ariane a { color: var(--accent-fonce); }

  /* cartes de boutique : deux colonnes */
  .carte-produit--grille { padding: 10px; }
  .carte-produit--grille .carte-produit__nom { font-size: 14px; line-height: 20px; }
  .carte-produit__nom--2-lignes { min-height: 40px; }
  .carte-produit--grille .carte-produit__puits { height: 128px; }
  .carte-produit--grille .carte-produit__puits img { width: 112px; height: 112px; }
  .carte-produit--grille .carte-produit__texte { padding-top: 14px; }
  .carte-produit--grille .surtitre { letter-spacing: .8px; font-size: 12px; }
  .carte-produit__bas { padding-top: 10px; }
  .carte-produit__bas .btn-rond { display: none; }
  .carte-produit__variante { font-size: 13px; }
  .carte-produit__montant { font-size: 16px; }
}

/* ==========================================================================
   COMPOSANTS DES PAGES INTÉRIEURES (fusion des anciens ajouts-a à ajouts-f)
   Une seule définition par classe. Chaque composant porte ses règles
   intermédiaires (1199, 1023) et mobiles (767) juste après lui.
   ========================================================================== */

/* 22. Fonds : fin en blanc ---------------------------------------------------
   Toute section qui précède le bandeau rendez-vous ou le pied finit en blanc.
   Le voile blanc est un ::after sous le contenu ; le fond propre à la section reste intact. */
.fond--fin-blanc,
main > section:not(.bandeau-rdv, .fond-blanc, .fond-monte):has(+ .bandeau-rdv),
main > section:not(.bandeau-rdv, .fond-blanc, .fond-monte):last-child { position: relative; isolation: isolate; }
.fond--fin-blanc::after,
main > section:not(.bandeau-rdv, .fond-blanc, .fond-monte):has(+ .bandeau-rdv)::after,
main > section:not(.bandeau-rdv, .fond-blanc, .fond-monte):last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: min(480px, 70%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none;
}

/* 23. Utilitaires de page --------------------------------------------------- */
.section--sans-haut, .section--formulaire { padding-top: 0; }
.entete-section__titre--large { max-width: 900px; }
.entete-section__texte { margin-top: 16px; }
.entete-section__note, .note-section { width: min(480px, 100%); font: 400 16px/1.65 var(--police-texte); color: var(--encre3); }
.titre-colonne { margin-top: 14px; }
.grille-cote--large { grid-template-columns: minmax(0, 340px) minmax(0, 792px); justify-content: space-between; }
.pile-grilles { display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 767px) {
  .nowrap-mobile { white-space: nowrap; }
  .titre-1--compact { font-size: clamp(28px, 8.7vw, 34px); }
}

/* Orbe (rond ciel à chiffre ou à icône) */
.orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; font: 500 14px/1 var(--police-texte); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.orbe .ico { width: 18px; height: 18px; }
.orbe--56 { width: 56px; height: 56px; }
.orbe--56 .ico { width: 22px; height: 22px; }
.orbe--64 { width: 64px; height: 64px; }
.orbe--blanc { background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.orbe--succes { background: var(--succes-pale); color: var(--succes); }
.orbe--erreur { background: var(--erreur-pale); color: var(--erreur); }

/* Liens autonomes */
.lien-action {             /* lien texte autonome, souligné, cible de 44 (bouton ou lien) */
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  font: 500 14px/20px var(--police-texte); color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px;
}
.lien-action .ico { width: 18px; height: 18px; }
.lien-action:hover { color: var(--encre1); }
.lien-fleche--souligne { text-decoration: underline; }
.lien-simple, .lien-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/20px var(--police-texte); color: var(--accent-fonce); }
.ligne-tel { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; font: 400 14px/1.5 var(--police-texte); color: var(--encre1); }
.ligne-tel .ico { color: var(--accent-fonce); }
.ligne-appel { display: none; margin-top: 12px; font: 500 15px/1.5 var(--police-texte); color: var(--encre1); }   /* « Vous préférez appeler? » sous un chapô, en mobile seulement */
.ligne-appel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) { .ligne-appel { display: block; } }

/* Cadre photo (« [photo à fournir] ») : jamais d'image inventée */
.cadre-photo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  border-radius: var(--r-interne); background: var(--voile-bleu); box-shadow: none;
  font: 500 14px/1.4 var(--police-texte); color: var(--encre3); text-align: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.cadre-photo .ico { width: 20px; height: 20px; stroke-width: 1.75; color: var(--encre3); }
.cadre-photo--petit { gap: 6px; padding: 8px; font-size: 12px; }
.cadre-photo--large { aspect-ratio: 12 / 5; border-radius: var(--r-panneau); }
.cadre-photo--grand { min-height: 520px; border-radius: var(--r-panneau); }
.cadre-photo--illustration { max-width: 280px; aspect-ratio: 3 / 2; }
@media (max-width: 1023px) { .cadre-photo--grand { min-height: 380px; } }
@media (max-width: 767px) {
  .cadre-photo--large { aspect-ratio: 4 / 3; }
  .cadre-photo--grand { min-height: 280px; border-radius: var(--r-carte); }
  .cadre-photo--petit { font-size: 12px; }
}

/* Étiquette (catégorie, type de poste, cause) */
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquette {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border-radius: var(--r-pilule);
  background: var(--ciel); font: 500 14px/20px var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.etiquette .ico { width: 16px; height: 16px; color: var(--accent-fonce); }

/* Liste à coches */
.liste-coches { display: flex; flex-direction: column; gap: 12px; }
.liste-coches > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.coche { width: 28px; height: 28px; margin-top: -1px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.coche .ico { width: 14px; height: 14px; stroke-width: 2.5; }
.liste-coches--compacte { gap: 10px; margin-top: 16px; }
.liste-coches--compacte > li { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; }
.liste-coches--compacte .coche { width: 20px; height: 20px; margin-top: 1px; }
.liste-coches--compacte .coche .ico { width: 12px; height: 12px; stroke-width: 3; }
.liste-coches__titre { font: 600 16px/22px var(--police-titre); color: var(--encre1); }

/* 24. Superpositions : panneau latéral, dialogue, bandeau des témoins ------
   Un seul mécanisme : <html class="page-verrouillee">, la page en fond dans .fond-verrouille (inert),
   puis .voile et le dialogue en position fixe. Les captures se font à la taille de la fenêtre. */
html.page-verrouillee, html.page-verrouillee body { height: 100%; overflow: hidden; }
.fond-verrouille { position: relative; height: 100vh; overflow: hidden; }
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(var(--ombre-c), .45); }

.panneau-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: 440px; max-width: 100%;
  display: flex; flex-direction: column; background: #fff; box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.panneau-lateral__tete { flex: none; display: flex; align-items: center; gap: 12px; padding: 32px 32px 24px; }
.panneau-lateral__orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.panneau-lateral__orbe--succes { background: var(--succes-pale); color: var(--succes); }
.panneau-lateral__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.panneau-lateral__fermer { margin-left: auto; }
.panneau-lateral__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 24px 32px; }
.panneau-lateral__pied { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 24px 32px 32px; }
.panneau-lateral__pied .btn { width: 100%; }
.panneau-lateral__pied .actions { flex-direction: column; align-items: stretch; gap: 12px; }
.panneau-lateral__pied .lien-tel { align-self: center; }
.panneau-lateral__moment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.panneau-lateral__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--ciel); font: 400 14px/1.5 var(--police-texte); color: var(--encre2); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.panneau-lateral__note .ico { color: var(--accent-fonce); width: 18px; height: 18px; margin-top: 1px; }
.panneau-lateral__sous-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 400 15px/1.5 var(--police-texte); color: var(--encre1); }
.panneau-lateral__sous-total strong { font: 600 20px/1.3 var(--police-titre); }
.article-ajoute { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 24px; }
.article-ajoute .ligne-panier__vignette { width: 96px; height: 96px; }
.article-ajoute .ligne-panier__vignette img { width: 76px; height: 76px; }
.article-ajoute__prix { margin-top: 4px; font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
@media (max-width: 767px) {
  .panneau-lateral__tete { padding: 20px 20px 16px; }
  .panneau-lateral__corps { padding: 20px; }
  .panneau-lateral__pied { padding: 16px 20px 20px; }
  .article-ajoute { grid-template-columns: 80px minmax(0, 1fr); }
  .article-ajoute .ligne-panier__vignette { grid-area: auto; width: 80px; height: 80px; }
}

/* Dialogue centré (préférences des témoins, lecteur vidéo) */
.dialogue {
  position: fixed; inset: 0; z-index: 41; margin: auto; height: fit-content;
  width: min(720px, 100% - 2 * var(--gouttiere)); max-height: calc(100% - 48px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 24px; padding: 40px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.dialogue--lecteur { width: min(940px, 100% - 2 * var(--gouttiere)); padding: 12px; gap: 0; }
.dialogue__tete { display: flex; align-items: flex-start; gap: 16px; }
.dialogue__tete > div { min-width: 0; }
.dialogue__tete .btn-rond { margin-left: auto; }
.dialogue__titre { font: 700 28px/1.2 var(--police-titre); color: var(--encre1); }
.dialogue__intro { font: 400 16px/1.6 var(--police-texte); color: var(--encre2); }
.dialogue__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dialogue__egaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 1 1 320px; }
.dialogue__egaux .btn { width: 100%; }
.dialogue__mention { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.categories { display: flex; flex-direction: column; border-radius: var(--r-carte); box-shadow: var(--o-carte); }
.categorie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 20px 24px; }
.categorie + .categorie { }
.categorie__titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.categorie__texte { grid-column: 1; font: 400 14px/1.55 var(--police-texte); color: var(--encre2); }
.categorie__controle { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 12px; }
@media (max-width: 767px) {
  .dialogue { max-height: calc(100% - 24px); padding: 24px 20px; border-radius: var(--r-carte); }
  .dialogue--lecteur { padding: 8px; }
  .dialogue__titre { font-size: 24px; }
  .categorie { grid-template-columns: 1fr; padding: 18px 16px; }
  .categorie__controle { grid-row: auto; grid-column: 1; }
  .dialogue__pied { flex-direction: column; align-items: stretch; }
  .dialogue__egaux { flex: none; }
  .dialogue__pied > .btn { width: 100%; }
}

/* Interrupteur (role="switch") */
.interrupteur { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font: 500 14px/1.4 var(--police-texte); color: var(--encre1); }
.interrupteur input {
  appearance: none; margin: 0; flex: none; position: relative; width: 52px; height: 32px; border-radius: var(--r-pilule);
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour); cursor: pointer; transition: background-color .15s; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.interrupteur input::before {
  content: ""; position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--contour); transition: translate .15s;
}
.interrupteur input:checked { background: var(--accent); box-shadow: none; }
.interrupteur input:checked::before { background: #fff; translate: 20px 0; }
.interrupteur input:disabled { cursor: not-allowed; background: var(--attenue); }
.interrupteur--verrou { cursor: not-allowed; color: var(--encre3); }

/* Bandeau des témoins (Loi 25) : petite carte fixe en bas à gauche, jamais plus d'un cinquième de l'écran.
   Deux choix de même poids (bleu plein), puis « Personnaliser ». Trois zones : titre, texte, boutons. */
.temoins-bandeau {
  position: fixed; z-index: 40; left: 24px; bottom: 24px; width: min(480px, 100% - 32px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete tete" "texte texte" "choix perso";
  gap: 10px 8px; align-items: center; padding: 20px; background: #fff; border-radius: var(--r-carte);
  box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.temoins-bandeau__tete { grid-area: tete; display: flex; align-items: center; gap: 10px; }
.temoins-bandeau__icone { flex: none; display: grid; place-items: center; color: var(--accent-fonce); }
.temoins-bandeau__icone .ico { width: 22px; height: 22px; }
.temoins-bandeau__titre { min-width: 0; font: 600 16px/1.3 var(--police-titre); color: var(--encre1); }
.temoins-bandeau__orbe { width: 52px; height: 52px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; align-self: start; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }   /* en-tête du panneau des préférences */
.temoins-bandeau__texte { grid-area: texte; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.temoins-bandeau__lien { white-space: nowrap; }
.temoins-bandeau__choix { grid-area: choix; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.temoins-bandeau .btn { min-height: 44px; padding: 4px 12px; }
.temoins-bandeau__choix .btn { width: 100%; }
.temoins-bandeau__perso { grid-area: perso; }
@media (max-width: 767px) {
  .temoins-bandeau { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; grid-template-areas: "tete perso" "texte texte" "choix choix"; gap: 6px 8px; }
  .temoins-bandeau__titre { font-size: 15px; }
  .temoins-bandeau__plus { display: none; }
  .temoins-bandeau .temoins-bandeau__perso { background: none; box-shadow: none; color: var(--accent-fonce); padding: 0 8px; margin-right: -8px; text-decoration: underline; text-underline-offset: 3px; }
}

/* 25. Carte « En bref » ------------------------------------------------------
   Les en-têtes de page sont tous du modèle photo (section 32). */
.carte-bref { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-bref > .surtitre { color: var(--encre3); margin-bottom: 26px; }
.carte-bref__ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0; }
.carte-bref__ligne:first-child { padding-top: 0; border-top: 0; }
.carte-bref__ligne:last-child { padding-bottom: 0; }
.carte-bref__ligne .surtitre { color: var(--encre3); margin-bottom: 0; }
.carte-bref__valeur { margin-top: 6px; font: 400 14px/20px var(--police-texte); color: var(--encre1); }
.carte-bref__valeur a { color: var(--accent-fonce); }
.carte-bref__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); margin-top: 2px; }
.carte-bref__texte { margin-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.info-ligne .titre-4 { margin-top: 0; }
.info-ligne .second { margin-top: 4px; }

@media (max-width: 767px) {
  .carte-bref { padding: 24px 20px; }
  .carte-bref__ligne { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .carte-bref__ligne .orbe { width: 40px; height: 40px; }
}

/* 26. Cartes de contenu ----------------------------------------------------- */
/* Pile de panneaux service (e01) */
.pile-panneaux { display: flex; flex-direction: column; gap: 28px; }
.pile-panneaux .panneau-service { box-shadow: var(--o-douce); }

/* Atout (« Pourquoi nous faire confiance ») */
.atout {
  display: flex; align-items: center; gap: 20px; min-height: 130px; padding: 24px 32px;
  background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.atout__orbe { width: 48px; height: 48px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.atout__texte { font: 600 16px/1.4 var(--police-titre); color: var(--encre1); }

/* FAQ à droite d'un titre */
.faq-cote__titre .titre-2 { margin-top: 16px; }
.faq-cote__titre .second { margin-top: 24px; font-size: 16px; line-height: 1.65; }

/* Carte d'étape numérotée (e02 « Comment ça se passe », e08 « Comment choisir? », e16) */
.carte-etape {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 28px 36px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-carte); color: var(--noir);
  --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
  transition: transform .25s var(--ease-sortie), box-shadow .25s;
}
.carte-etape > .orbe { width: 60px; height: 60px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; place-items: center; font: 700 22px/1 var(--police-titre); letter-spacing: 0; box-shadow: var(--o-bleue); }
.carte-etape > .orbe .ico { width: 26px; height: 26px; }
.carte-etape:hover { transform: translateY(-4px); box-shadow: var(--o-forte); }
.escalier { align-items: start; padding-bottom: 56px; }
.escalier > li:nth-child(2) { margin-top: 18px; }
.escalier > li:nth-child(3) { margin-top: 36px; }
.escalier > li:nth-child(4) { margin-top: 54px; }
.carte-etape__titre { margin-top: 22px; font: 700 21px/1.25 var(--police-titre); color: var(--encre1); }
.carte-etape__texte { margin-top: 12px; font: 400 15px/1.65 var(--police-texte); color: var(--encre2); max-width: 36ch; }
.carte-etape > .surtitre { margin-top: 14px; color: var(--encre3); }
.carte-etape > .surtitre + .carte-etape__titre { margin-top: 8px; }
.carte-etape .lien-fleche { margin-top: 6px; }
.carte-etape__corps { margin-top: 14px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.carte-etape__corps a { display: inline-block; margin-top: 10px; }

/* Deux colonnes inégales : texte et encart à gauche, carte à droite */
.duo { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 612px); justify-content: space-between; gap: 48px; align-items: start; }
.duo__texte .titre-2 { margin-top: 16px; }
.duo__texte .chapo { margin-top: 32px; }

/* Encart (ordonnance requise) */
.encart {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; margin-top: 44px; padding: 28px;
  background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.encart__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.encart__titre { font: 600 16px/1.4 var(--police-titre); color: var(--encre1); margin-top: 6px; }
.encart__texte { margin-top: 6px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.encart .lien-fleche { margin-top: 8px; margin-bottom: -8px; }

/* Liste de symptômes (coches sur deux colonnes) */
.symptomes { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.symptomes__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.symptomes__item { display: flex; align-items: center; gap: 12px; font: 500 14px/1.4 var(--police-texte); color: var(--encre1); }
.symptomes__coche { width: 32px; height: 32px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.symptomes__coche .ico { width: 18px; height: 18px; }

/* Carte service avec lien */
.carte-service-lien {
  display: flex; flex-direction: column; gap: 14px; min-height: 212px; padding: 32px;
  background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-service-lien__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.carte-service-lien__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); padding-top: 10px; }
.carte-service-lien__texte { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }

/* Heures d'ouverture d'une clinique (e04) */
.horaire { padding: 24px 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.horaire__liste { margin: 0; }
.horaire__ligne { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 57px; padding: 8px 0; }
.horaire__ligne + .horaire__ligne { }
.horaire__jour { font: 500 14px/1.4 var(--police-texte); color: var(--encre1); }
.horaire__heures { margin: 0; font: 400 14px/1.4 var(--police-texte); color: var(--encre2); text-align: right; }
.horaire__heures--ferme { color: var(--encre3); }
.horaire__ligne--jour { margin-inline: -24px; padding-inline: 24px; background: var(--ciel); border-radius: var(--r-interne); border-top-color: transparent; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.horaire__ligne--jour + .horaire__ligne { border-top-color: transparent; }
.horaire__ligne--jour .horaire__jour { color: var(--accent-fonce); }

/* Accès (bloc ciel avec épingle, adresse et itinéraire) */
.acces {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 40px 24px;
  background: var(--ciel); border-radius: var(--r-panneau); box-shadow: var(--o-carte); text-align: center; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.acces__epingle { width: 64px; height: 64px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; box-shadow: var(--o-bleue); margin-bottom: 4px; }
.acces__adresse { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; background: #fff; border-radius: var(--r-pilule); box-shadow: var(--o-flottante); font: 400 14px/1.4 var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }

/* Histoire (photo et texte, e13) */
.histoire { display: grid; grid-template-columns: 486px minmax(0, 1fr); gap: 96px; align-items: start; }
.histoire__media { position: relative; border-radius: var(--r-panneau); overflow: hidden; box-shadow: var(--o-flottante); }
.histoire__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.histoire__legende {
  position: absolute; left: 24px; right: 24px; bottom: 24px; width: fit-content; max-width: calc(100% - 48px);
  padding: 13px 20px; background: #fff; border-radius: var(--r-pilule); box-shadow: var(--o-flottante);
  font: 500 14px/1.4 var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.histoire__texte .titre-2 { margin-top: 16px; }
.histoire__texte .corps + .corps { margin-top: 16px; }
.histoire__texte .titre-2 + .corps { margin-top: 32px; }
.histoire__a-confirmer { color: var(--encre3); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 32px; }
.chiffres__nombre { font: 700 56px/1.02 var(--police-titre); letter-spacing: -1px; color: var(--accent-grand); }
.chiffres__texte { margin-top: 12px; font: 500 15px/1.5 var(--police-texte); color: var(--encre1); max-width: 24ch; }

/* Mission, devise, droits (e13) */
.mission { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 556px); justify-content: space-between; gap: 48px; align-items: start; }
.mission__texte .titre-2 { margin-top: 16px; }
.mission__texte .chapo { margin-top: 32px; }
.mission__valeurs > .surtitre { margin-bottom: 16px; }
.mission__valeurs .grille-valeurs { gap: 24px; }
.mission__valeur-large { grid-column: 1 / -1; min-height: 0; }
.devise { margin-top: 48px; }
.devise .surtitre { padding: 10px 0 10px 20px; border-left: 4px solid var(--bleu-clair); }
.devise blockquote { margin-top: 20px; }
.devise .titre-2 { color: var(--encre1); }
.droits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.droits__carte { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.droits__tete { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; }
.droits__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.droits__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.droits__liste { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.droits__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 16px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.droits__coche { width: 20px; height: 20px; margin-top: 1px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.droits__coche .ico { width: 12px; height: 12px; stroke-width: 3; }

/* Bandeau équipe (lien vers e14) */
.bandeau-equipe {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 24px; align-items: center;
  margin-top: 24px; padding: 40px 48px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.bandeau-equipe__orbe { width: 56px; height: 56px; align-self: start; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.bandeau-equipe .titre-3 { margin-top: 10px; }
.bandeau-equipe .second { margin-top: 10px; font-size: 16px; }

/* Carte d'appel (orbe, texte, action) : « Envie de vous joindre… », « Envoyez-nous votre CV » */
.carte-appel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; padding: 48px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-appel--ligne { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; }
.carte-appel--ligne > .orbe { align-self: start; }
.carte-appel .surtitre { color: var(--encre3); margin-bottom: 8px; }
.carte-appel__texte { margin-top: 8px; font: 400 16px/1.65 var(--police-texte); color: var(--encre3); max-width: 680px; }
.carte-appel__texte--fonce { color: var(--encre2); }
.carte-appel .actions { margin-top: 28px; }

/* Carte d'aide : ciel (« Besoin d'aide pour choisir? »), ou --encre (e22, e23) */
.carte-aide { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border-radius: var(--r-panneau); background: var(--ciel); color: var(--encre2); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.carte-aide__orbe { width: 52px; height: 52px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; }
.carte-aide__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.carte-aide__texte { font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.carte-aide__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 700 26px/1.2 var(--police-titre); color: var(--encre1); text-decoration: none; }
.carte-aide__tel .ico { color: var(--accent-fonce); }
.carte-aide__tel:hover { text-decoration: underline; }
.carte-aide__note { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.carte-aide__filet { align-self: stretch; height: 1px; background: transparent; border: 0; margin: 4px 0; }
.carte-aide .btn { margin-top: 8px; }
.carte-aide--vedette { align-items: stretch; background: #fff; box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-aide--vedette .carte-aide__titre { font: 700 26px/1.2 var(--police-titre); }
.carte-aide--vedette .btn { margin-top: 0; }
.etapes-aide { counter-reset: etape; display: flex; flex-direction: column; gap: 14px; }
.etapes-aide li { counter-increment: etape; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font: 400 15px/1.55 var(--police-texte); color: var(--encre2); }
.etapes-aide li::before { content: counter(etape); width: 28px; height: 28px; border-radius: var(--r-pilule); background: var(--ciel); color: var(--accent-fonce); display: grid; place-items: center; font: 600 13px/1 var(--police-titre); }
.etapes-aide + .carte-aide__filet { margin-top: 8px; }

/* Tuile avantage et postes (e17) */
.tuile-avantage { display: flex; flex-direction: column; gap: 16px; min-height: 160px; padding: 28px 24px 24px; background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.tuile-avantage__titre { font: 600 16px/1.4 var(--police-titre); color: var(--encre1); }
.postes { display: flex; flex-direction: column; gap: 24px; }
.carte-poste { display: grid; grid-template-columns: 340px 1px minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-poste__sep { background: transparent; }
.carte-poste .titre-3 { margin-top: 10px; }
.carte-poste .etiquettes { flex-direction: column; align-items: flex-start; margin-top: 16px; }
.carte-poste__texte { margin-top: 20px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.carte-poste .btn { margin-top: 24px; }

@media (max-width: 1199px) {
  .histoire { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; }
  .carte-poste { grid-template-columns: 300px 1px minmax(0, 1fr); row-gap: 24px; }
  .carte-poste > :first-child { grid-row: 1 / span 2; }
  .carte-poste__sep { grid-column: 2; grid-row: 1 / span 2; }
  .carte-poste > :nth-child(3), .carte-poste > :last-child { grid-column: 3; }
}
@media (max-width: 1023px) {
  .duo, .mission { grid-template-columns: 1fr; gap: 48px; }
  .histoire { grid-template-columns: 1fr; gap: 48px; }
  .histoire__media { max-width: 486px; }
  .grille-cote, .grille-cote--large { grid-template-columns: 1fr; gap: 32px; }
  .droits { grid-template-columns: 1fr; }
  .bandeau-equipe { grid-template-columns: 56px minmax(0, 1fr); }
  .bandeau-equipe .btn { grid-column: 2; justify-self: start; }
  .carte-poste { grid-template-columns: minmax(0, 1fr); }
  .carte-poste > :first-child, .carte-poste > :nth-child(3), .carte-poste > :last-child { grid-column: auto; grid-row: auto; }
  .carte-poste__sep { grid-column: auto; grid-row: auto; height: 1px; }
}
@media (max-width: 767px) {
  .pile-panneaux { gap: 24px; }
  .atout { min-height: 0; padding: 20px; }
  .carte-etape { padding: 24px 20px 28px; }
  .escalier { padding-bottom: 0; }
  .escalier > li:nth-child(n) { margin-top: 0; }
  .encart { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; margin-top: 32px; }
  .symptomes { padding: 24px 20px; }
  .symptomes__liste { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .carte-service-lien { min-height: 0; padding: 24px 20px; }
  .horaire { padding: 12px 20px; }
  .horaire__ligne { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; }
  .horaire__heures { text-align: left; }
  .horaire__ligne--jour { margin-inline: -12px; padding-inline: 12px; }
  .acces { padding: 32px 16px; }
  .acces__adresse { min-height: 48px; padding: 10px 18px; }
  .histoire__legende { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 16px; font-size: 13px; }
  .chiffres { grid-template-columns: 1fr; gap: 20px; }
  .chiffres__nombre { font-size: 40px; }
  .chiffres__texte { margin-top: 4px; }
  .mission__valeurs .grille-valeurs { gap: 12px; }
  .devise { margin-top: 36px; }
  .devise .surtitre { padding-left: 16px; }
  .droits__carte { padding: 24px 20px; }
  .bandeau-equipe { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
  .bandeau-equipe .btn { grid-column: auto; width: 100%; }
  .bandeau-equipe .titre-3 { margin-top: 6px; }
  .carte-appel, .carte-appel--ligne { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 20px; }
  .carte-appel .btn { width: 100%; }
  .carte-aide { padding: 24px 20px; }
  .carte-aide .btn { width: 100%; }
  .tuile-avantage { min-height: 0; padding: 20px 16px; }
  .carte-poste { padding: 28px 20px; }
  .carte-poste .btn { width: 100%; }
}

/* 27. Cliniques (e03), équipe (e14), heures (e26) --------------------------- */
.cliniques-grille { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 24px; align-items: stretch; }   /* la colonne de gauche prend la hauteur de la carte et sa liste défile dedans */
.panneau-cliniques { background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.panneau-cliniques__filtres { padding: 24px; }
.panneau-cliniques__filtres > .surtitre { color: var(--encre3); margin: 20px 0 12px; }
.panneau-cliniques__filtres .champ__erreur { margin-top: 8px; }
.panneau-cliniques__filtres .lien-action { margin-top: 8px; }
.panneau-cliniques__resultats { padding: 24px 24px 8px; }
.panneau-cliniques__resultats > .surtitre { color: var(--encre3); }
.puces--colonne { flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) {
  .panneau-cliniques { contain: size; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bleu-clair) transparent; }   /* contain: size : la colonne ne rallonge pas la page, elle défile */
}

.liste-cliniques--page { margin-top: 12px; }
.liste-cliniques--page .clinique-ligne { min-height: 72px; padding: 12px 4px; border-radius: 0; }
.liste-cliniques--page .clinique-ligne:last-child { border-bottom: 0; }
.liste-cliniques--page .clinique-ligne:hover { background: none; }
.liste-cliniques--page .clinique-ligne.est-selectionnee { margin-top: -1px; padding-top: 13px; border-radius: var(--r-interne); border-bottom-color: transparent; box-shadow: -12px 0 0 var(--ciel), 12px 0 0 var(--ciel); }
.liste-cliniques--page .clinique-ligne__nom { font: 600 16px/22px var(--police-titre); }
.liste-cliniques--page .clinique-ligne.est-selectionnee .clinique-ligne__nom { text-decoration: none; }

.resultat-vide { margin-top: 20px; }
.resultat-vide__titre { margin-top: 16px; font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.resultat-vide__texte { margin-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.resultat-vide__effacer { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font: 400 14px/20px var(--police-texte); }
.carte-proche { margin-top: 20px; padding: 20px; border-radius: var(--r-carte); background: #fff; box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-proche .surtitre { color: var(--encre3); }
.carte-proche__nom { margin: 8px 0 16px; font: 600 16px/1.4 var(--police-titre); color: var(--encre1); }

.carte-zone { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.carte-vue { position: relative; aspect-ratio: 792 / 640; border-radius: var(--r-panneau); overflow: hidden; background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-vue::after { content: ""; position: absolute; inset: 0; border-radius: inherit;  pointer-events: none; }
.carte-vue__fond { position: absolute; inset: 0; overflow: hidden; }
.carte-vue__image { position: absolute; left: -56.44%; top: 0; margin-top: -7.58%; width: 162.37%; height: auto; max-width: none; }
.carte-vue__zoom { position: absolute; right: 24px; bottom: 24px; z-index: 1; display: flex; gap: 8px; }
.carte-zone__bas { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; }
.apercu-clinique { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.apercu-clinique .titre-3 { margin-top: 8px; }
.apercu-clinique__adresse { margin-top: 12px; font: 400 14px/1.5 var(--police-texte); color: var(--encre1); }
.apercu-clinique__texte { margin-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.apercu-clinique .pastille-statut { margin-top: 20px; }
.apercu-clinique .actions { margin-top: 24px; }
.carte-equipe { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-panneau); background: var(--ciel); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.carte-equipe__nombre { margin-top: 12px; font: 700 64px/1 var(--police-titre); color: var(--accent-fonce); }
.carte-equipe__texte { margin-top: 14px; font: 500 14px/1.45 var(--police-texte); color: var(--encre1); }
.avatars { display: flex; margin-top: auto; padding-top: 24px; padding-left: 11px; }
.avatars img { width: 47px; height: 47px; margin-left: -11px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ciel); }

.filtres-equipe { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.filtres-equipe .puces { max-width: 840px; }
.filtres-equipe__liste { flex: none; width: 300px; }
.groupe-equipe { margin-top: 72px; }
.groupe-equipe__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 24px; }
.groupe-equipe__titre { color: var(--encre1); }
.groupe-equipe__nombre { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.groupe-equipe .carte-membre__entete { flex: 1 0 auto; }
.groupe-equipe__lien { margin-top: 48px; }
.carte-membre__nom--long { font-size: 17px; letter-spacing: -0.3px; }

/* Coordonnées des cliniques (télécopieurs et courriels, e16) */
.carte-coordonnees { padding: 32px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.coordonnees__entete { display: grid; grid-template-columns: minmax(0, 1fr) 196px; }
.coordonnees__entete .surtitre { color: var(--encre3); }
.coordonnees__region { margin-top: 28px; padding-bottom: 12px; font: 600 16px/1.4 var(--police-titre); color: var(--accent-fonce); }
.coordonnees__ligne { display: grid; grid-template-columns: minmax(0, 1fr) 196px; padding: 14px 0; font: 400 14px/1.6 var(--police-texte); color: var(--encre1); }
.coordonnees__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.coordonnees__ligne a { display: inline-block; }
.coordonnees__fax { display: flex; align-items: flex-start; gap: 8px; color: var(--encre1); }
.coordonnees__fax .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-fonce); }
.coordonnees__fax--inconnu { color: var(--encre3); }

/* Heures d'ouverture des cliniques (panneau e26) */
.heures-region + .heures-region { margin-top: 20px; }
.heures-region > .surtitre { color: var(--encre3); padding: 0 12px 6px; }
.heures-clinique { border-radius: var(--r-interne); }
.heures-clinique + .heures-clinique > .heures-clinique__resume { border-radius: 0; }
.heures-clinique[open] { background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.heures-clinique[open] > .heures-clinique__resume,
.heures-clinique[open] + .heures-clinique > .heures-clinique__resume { box-shadow: none; }
.heures-clinique__resume {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 8px 10px 12px; list-style: none; cursor: pointer; border-radius: var(--r-interne);
}
.heures-clinique__resume::-webkit-details-marker { display: none; }
.heures-clinique__resume:hover { box-shadow: inset 0 0 0 1.5px var(--marine); }
.heures-clinique__nom { display: block; font: 500 15px/1.35 var(--police-texte); color: var(--encre1); }
.heures-clinique__jour { display: block; font: 400 14px/1.45 var(--police-texte); color: var(--encre3); margin-top: 2px; }
.heures-clinique__chevron { width: 32px; height: 32px; border-radius: var(--r-pilule); display: grid; place-items: center; color: var(--accent-fonce); transition: rotate .2s; }
.heures-clinique[open] .heures-clinique__chevron { rotate: 180deg; }
.heures-clinique__detail { padding: 0 12px 16px; }
.heures-clinique__detail .lien-fleche { margin-top: 4px; }
.heures-clinique__note { margin-top: 10px; }
.semaine { display: flex; flex-direction: column; padding: 4px 14px; background: #fff; border-radius: 12px; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.semaine li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font: 400 14px/1.45 var(--police-texte); color: var(--encre2); }
.semaine li + li { }
.semaine span:first-child { color: var(--encre1); flex: none; }
.semaine span:last-child { text-align: right; text-wrap: balance; }
.semaine .est-aujourdhui span { color: var(--accent-fonce); font-weight: 600; }

@media (max-width: 1023px) {
  .cliniques-grille { grid-template-columns: minmax(0, 1fr); }
  .filtres-equipe { flex-direction: column; }
}
@media (max-width: 767px) {
  .panneau-cliniques__filtres, .panneau-cliniques__resultats { padding-left: 16px; padding-right: 16px; }
  .puces--colonne { flex-direction: row; flex-wrap: wrap; }
  .liste-cliniques--page .clinique-ligne.est-selectionnee { box-shadow: -8px 0 0 var(--ciel), 8px 0 0 var(--ciel); }
  .carte-vue { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
  .carte-vue__fond { position: relative; inset: auto; aspect-ratio: 792 / 640; }
  .carte-vue__zoom { right: 12px; bottom: 12px; gap: 6px; }
  .carte-vue__zoom .btn-rond { width: 44px; height: 44px; }
  .carte-vue__zoom .btn--blanc { min-height: 44px; padding: 4px 14px; }
  .carte-zone__bas { grid-template-columns: minmax(0, 1fr); }
  .apercu-clinique { padding: 28px 20px; }
  .apercu-clinique .actions > .btn { width: 100%; }
  .carte-equipe { padding: 24px 20px; }
  .filtres-equipe__liste { width: 100%; }
  .groupe-equipe { margin-top: 48px; }
  .carte-coordonnees { padding: 24px 20px; }
  .coordonnees__entete { grid-template-columns: minmax(0, 1fr); }
  .coordonnees__entete > :last-child { display: none; }
  .coordonnees__ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .heures-clinique__resume { grid-template-columns: minmax(0, 1fr) auto 32px; gap: 8px; padding-right: 4px; }
  .semaine li { flex-direction: column; gap: 0; }
  .semaine span:last-child { text-align: left; }
}

/* 28. Formulaires ------------------------------------------------------------
   Gabarit : .mise-formulaire (formulaire à gauche, colonne d'appui de 380 à droite) pour e05, e11 et e15.
   e16 et e17 gardent leur grille-cote, avec les mêmes classes de formulaire. */
.mise-formulaire { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.mise-formulaire__appui { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }

.carte-formulaire { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-formulaire > .resume-erreurs { margin-bottom: 24px; }
.formulaire { display: flex; flex-direction: column; gap: 28px; }
.formulaire > .resume-erreurs { margin-bottom: 0; }
.formulaire__note { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.formulaire__intro { margin-top: 24px; color: var(--encre3); }
.formulaire__intro--haut { margin-top: 0; }
.formulaire__groupe { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire__legende { float: left; width: 100%; padding: 0; margin: 0; font: 600 18px/1.35 var(--police-titre); color: var(--encre1); }
.formulaire__filet { height: 1px; margin: 0; border: 0; background: transparent; }
.formulaire__rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.formulaire__rangee > .champ--large { grid-column: 1 / -1; }
.formulaire__cases { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire__cases .champ__etiquette { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.formulaire__cases .case { clear: both; }
.formulaire__bas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 4px; }
.formulaire__mention { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); max-width: 620px; }
.formulaire .champ__liste { border-radius: var(--r-interne); padding-left: 16px; }   /* tous les champs en rayon 16 */
.formulaire fieldset.champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire fieldset.champ > legend { padding: 0; margin-bottom: 8px; }
.formulaire--envoi .champ, .formulaire--envoi .formulaire__legende { opacity: .55; }

/* Tuiles de choix (radio ou case) */
.choix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choix-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border-radius: var(--r-interne); background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour);
  font: 400 16px/1.4 var(--police-texte); color: var(--encre1); cursor: pointer; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.choix:hover { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); }
.choix input {
  appearance: none; margin: 0; width: 22px; height: 22px; flex: none; border-radius: 50%; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.choix input:checked { box-shadow: inset 0 0 0 7px var(--accent-fonce); }
.choix:has(input:checked) { background: var(--ciel); box-shadow: inset 0 0 0 2px var(--accent-fonce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.choix__sous { display: block; font: 400 14px/1.4 var(--police-texte); color: var(--encre3); }

/* Zone de téléversement (toute la zone est cliquable) */
.depot {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 104px; padding: 20px 24px;
  border-radius: var(--r-interne); background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.depot:focus-within { box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot__orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.depot__texte { font: 400 15px/1.5 var(--police-texte); color: var(--encre1); }
.depot__lien { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; }
.depot__aide { display: block; margin-top: 2px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.depot__fichier { margin-right: 14px; }
.depot div { min-width: 0; overflow-wrap: anywhere; }
.depot--erreur { box-shadow: inset 0 0 0 2px var(--erreur); }
.depot--fichier .depot__orbe { background: var(--succes-pale); color: var(--succes); }

/* Colonne d'appui */
.carte-appui { padding: 32px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-appui--ciel { background: var(--ciel); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-appui .titre-4 { margin-bottom: 20px; }
.carte-appui .surtitre + .titre-4 { margin: 12px 0 8px; }
.carte-appui__bloc + .carte-appui__bloc { margin-top: 24px; padding-top: 24px; }
.carte-appui__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 700 24px/1.2 var(--police-titre); color: var(--encre1); text-decoration: none; }
.carte-appui__tel .ico { color: var(--accent-fonce); }
.carte-appui__tel:hover { color: var(--accent-fonce); text-decoration: underline; }
.carte-appui .btn { margin-top: 16px; }
.carte-appui > .corps + .lien-fleche { margin-top: 16px; }
.appui-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.contacts-mini { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.contacts-mini__ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: center; }
.contacts-mini__ligne .surtitre { color: var(--encre3); margin-bottom: 0; }
.contacts-mini--haut { margin-top: 0; }

/* Étapes numérotées (« Comment ça se passe », « Ce qui se passe ensuite ») */
.etapes { display: flex; flex-direction: column; gap: 20px; }
.etape { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.etape__num { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; font: 600 16px/1 var(--police-titre); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-appui--ciel .etape__num { background: #fff; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.etape__titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); padding-top: 2px; }
.etape__texte { font: 400 14px/1.5 var(--police-texte); color: var(--encre2); margin-top: 4px; }

/* Confirmation d'envoi : titre, dl.recap, « Ce qui se passe ensuite » en 3 étapes, un bouton secondaire →,
   puis une ligne de contact (téléphone, courriel). Placée dans .carte-formulaire, ou portant elle-même cette classe. */
.confirmation { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.confirmation__orbe { width: 56px; height: 56px; flex: none; border-radius: var(--r-pilule); background: var(--succes-pale); color: var(--succes); display: grid; place-items: center; }
.confirmation__filet { align-self: stretch; height: 1px; border: 0; margin: 0; background: transparent; }
.confirmation > .recap, .confirmation > .etapes { align-self: stretch; }
.confirmation .etape__texte { margin-top: 0; padding-top: 9px; font-size: 16px; line-height: 1.6; }
.confirmation > .titre-5 { margin-bottom: -8px; }
.recap { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; padding: 16px 20px; border-radius: var(--r-interne); background: var(--ciel); font: 400 15px/1.5 var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.recap dt { color: var(--encre3); }
.recap dd { margin: 0; font-weight: 500; }

/* Liens des coordonnées : accent foncé, soulignés */
.contacts .info-ligne__valeur a { color: var(--accent-fonce); text-decoration: underline; }
.contacts .info-ligne__valeur a:hover { color: var(--encre1); }
.info-ligne__valeur--grand { font: 600 18px/1.35 var(--police-titre); overflow-wrap: anywhere; }
.contacts { display: flex; flex-direction: column; gap: 20px; }
.contacts .info-ligne + .info-ligne { padding-top: 0; border-top: 0; }

/* Connexion (e12) : carte centrée de 480 */
.connexion { padding: 168px 0 120px; }
.connexion__pile { width: min(480px, 100%); margin-inline: auto; display: flex; flex-direction: column; gap: 24px; }
.carte-connexion { padding: 40px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-connexion__titre { margin-top: 20px; font: 700 28px/1.2 var(--police-titre); color: var(--encre1); }
.carte-connexion__titre--seul { margin-top: 0; }
.carte-connexion__texte { margin-top: 12px; font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.carte-connexion__suite { margin-top: 16px; }
.carte-connexion form { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.carte-connexion .formulaire__note { margin-bottom: -8px; }
.carte-connexion form > .btn { align-self: flex-start; margin-top: 4px; }
.carte-connexion .formulaire__mention { margin-top: -8px; }
.carte-connexion .banniere { margin-top: 24px; }
.carte-connexion > .lien-retour { margin-top: -10px; }
.carte-connexion > .lien-retour + .carte-connexion__titre { margin-top: 12px; }
.connexion__options { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.connexion__nouveau { margin-top: 16px; text-align: center; font: 400 14px/1.5 var(--police-texte); color: var(--encre1); }
.separateur { display: flex; align-items: center; gap: 16px; margin-top: 28px; font: 400 14px/1 var(--police-texte); color: var(--encre3); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: transparent; }
.encart-pourquoi { padding: 24px 28px; border-radius: var(--r-carte); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.encart-pourquoi__titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.encart-pourquoi__texte { margin-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.alerte { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 20px; border-radius: var(--r-interne); background: #fff; color: var(--noir); box-shadow: inset 0 0 0 2px var(--noir); font: 500 14px/1.5 var(--police-texte); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }

@media (max-width: 1023px) {
  .mise-formulaire { grid-template-columns: 1fr; }
  .mise-formulaire__appui { position: static; }
}
@media (max-width: 767px) {
  .carte-formulaire { padding: 24px 20px; border-radius: var(--r-carte); }
  .formulaire__rangee, .choix-grille, .choix-grille--3 { grid-template-columns: 1fr; }
  .choix-grille--2-mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formulaire__bas { align-items: stretch; }
  .formulaire__bas .btn { width: 100%; }
  .depot { align-items: flex-start; padding: 16px; }
  .carte-appui { padding: 24px 20px; border-radius: var(--r-carte); }
  .carte-appui .btn { width: 100%; }
  .confirmation > .actions { align-self: stretch; }
  .recap { grid-template-columns: 1fr; gap: 0; }
  .recap dd + dt { margin-top: 8px; }
  .connexion { padding: 112px 0 72px; }
  .carte-connexion { padding: 28px 20px; border-radius: var(--r-carte); }
  .carte-connexion__titre { font-size: 24px; }
  .carte-connexion form > .btn { width: 100%; }
}

/* 29. Boutique (e06 à e12, e28) ---------------------------------------------- */
/* En-tête compact de catégorie */
.entete-boutique { padding: 40px 0 144px; }
.bandeau-forfaits {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 20px 24px; background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.bandeau-forfaits__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; align-self: start; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.bandeau-forfaits__titre { font: 600 18px/1.3 var(--police-titre); color: var(--encre1); }
.bandeau-forfaits__texte { margin-top: 4px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }

/* Barre d'outils, filtres, grille */
.outils-boutique { margin-top: 28px; }
.outils-boutique__haut { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.outils-boutique__recherche { width: 440px; max-width: 100%; }
.outils-boutique__droite { display: flex; align-items: center; gap: 18px; }
.compteur-produits { font: 500 14px/20px var(--police-texte); color: var(--encre1); white-space: nowrap; }
.tri { width: 280px; }
.tri:disabled { color: var(--encre3); cursor: not-allowed; box-shadow: inset 0 0 0 1.5px var(--filet); }
.filtres-groupe { margin-top: 20px; }
.filtres-groupe > .surtitre { margin-bottom: 10px; }
.filtres-groupe + .filtres-groupe { margin-top: 16px; }
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
.filtres-actifs__etiquette { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.filtre-actif {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 18px;
  border: 0; border-radius: var(--r-pilule); background: var(--ciel);
  box-shadow: inset 0 0 0 1.5px var(--accent-fonce); color: var(--accent-fonce);
  font: 500 14px/20px var(--police-texte); text-decoration: none; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.filtre-actif .ico { width: 16px; height: 16px; }
.grille-produits { margin-top: 40px; }
.progression { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; }
.progression__texte { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.progression__barre { width: 240px; height: 4px; border-radius: var(--r-pilule); background: var(--filet); overflow: hidden; }
.progression__barre span { display: block; height: 100%; border-radius: inherit; background: var(--bleu-clair); }
.progression .btn { margin-top: 4px; }
.encart-demande {
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  margin-top: 112px; padding: 56px; border-radius: var(--r-panneau);
  background: linear-gradient(to bottom right, var(--diag-arrets)); box-shadow: var(--o-carte);
}
.encart-demande .surtitre { margin-bottom: 12px; }
.encart-demande__texte { margin-top: 12px; }

/* Fiche (produit e07, forfait e09) : galerie à gauche, achat à droite */
.fiche-produit { padding: 128px 0 112px; }
.fiche-produit .fil-ariane, .fiche-zone > .fil-ariane { margin-bottom: 20px; }
.fiche { display: grid; grid-template-columns: minmax(0, 584px) minmax(0, 1fr); gap: 72px; align-items: start; }
.galerie__principale {
  position: relative; aspect-ratio: 584 / 520; display: grid; place-items: center; overflow: hidden;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.galerie__principale img { position: absolute; inset: 7% 10%; width: 80%; height: 86%; max-width: none; object-fit: contain; }
.galerie__vignettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.vignette {
  height: 140px; padding: 0; border: 0; border-radius: var(--r-carte); overflow: hidden;
  display: grid; place-items: center; background: #fff; box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.vignette[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.vignette img { width: 104px; height: 104px; object-fit: contain; }
.vignette > .cadre-photo { width: 100%; height: 100%; border-radius: var(--r-carte); }
.galerie__vignette { padding: 0; border: 0; background: none; border-radius: var(--r-interne); }
.galerie__vignette > .cadre-photo { aspect-ratio: 184 / 140; }
.galerie__vignette[aria-pressed="true"] > .cadre-photo { box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.fiche__infos { padding-top: 4px; }
.fiche__infos .surtitre { margin-bottom: 14px; }
.fiche__colonne { display: flex; flex-direction: column; }
.fiche__colonne > .surtitre { margin-top: 4px; }
.fiche__colonne > .btn { align-self: flex-start; margin-top: 24px; }
.fiche__colonne .carte-membres { margin-top: 28px; }
.fiche__titre { margin-top: 16px; }
.fiche__prix { margin-top: 20px; font: 700 44px/1.1 var(--police-titre); letter-spacing: -.6px; color: var(--encre1); }
.fiche__note, .fiche__prix-note { margin-top: 8px; }
.fiche__bloc { margin-top: 24px; padding-top: 28px; }
.fiche__filet { height: 1px; border: 0; margin: 28px 0; background: transparent; }
.fiche__sous-titre { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); margin-bottom: 16px; }
.fiche__etiquette { font: 500 14px/20px var(--police-texte); color: var(--encre1); }
.fiche__etiquette .second { margin-left: 10px; }
.fiche__masque { margin-top: 28px; }
.fiche__masque .lien-simple { align-self: flex-start; }
.grandeurs { display: flex; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.grandeurs legend { padding: 0; }
.grandeur {
  width: 46px; height: 46px; border: 0; border-radius: var(--r-pilule);
  background: #fff; box-shadow: inset 0 0 0 1px var(--contour);
  font: 500 14px/20px var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.grandeur:hover { box-shadow: inset 0 0 0 1.5px var(--accent-fonce); }
.grandeur[aria-pressed="true"] { color: var(--accent-fonce); box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.grandeur--epuisee, .grandeur--epuisee:hover { color: var(--encre3); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--filet); }
.grandeur--epuisee[aria-pressed="true"] { color: var(--encre3); box-shadow: inset 0 0 0 2px var(--contour); }
.fiche__achat { margin-top: 24px; }
.fiche__achat-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.quantite {
  display: inline-flex; align-items: center; gap: 2px; height: 52px; padding: 4px;
  border-radius: var(--r-pilule); background: #fff; box-shadow: inset 0 0 0 1.5px var(--contour); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.quantite__bouton { width: 44px; height: 44px; border: 0; border-radius: var(--r-pilule); display: grid; place-items: center; background: var(--ciel); color: var(--accent-fonce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.quantite__bouton:hover { box-shadow: inset 0 0 0 1.5px var(--marine); }
.quantite__bouton:disabled { background: #fff; color: var(--attenue); box-shadow: inset 0 0 0 1px var(--filet); cursor: not-allowed; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.quantite__valeur { width: 44px; height: 44px; border: 0; padding: 0; text-align: center; background: none; font: 500 16px/1 var(--police-texte); color: var(--encre1); }
.fiche__question { display: flex; align-items: center; gap: 12px; margin-top: 28px; font: 400 15px/1.5 var(--police-texte); color: var(--encre1); }
.fiche__question .ico { color: var(--accent-fonce); }
.avantages { display: flex; flex-direction: column; gap: 12px; }
.avantage { display: flex; align-items: center; gap: 16px; font: 400 15px/1.45 var(--police-texte); color: var(--encre1); }
.avantage__orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.encart-inclus { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; border-radius: var(--r-interne); background: var(--ciel); font: 400 14px/1.5 var(--police-texte); color: var(--encre2); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.encart-inclus .ico { color: var(--accent-fonce); }
.reperes { display: flex; flex-direction: column; gap: 12px; }
.repere { display: flex; align-items: center; gap: 16px; font: 400 14px/1.5 var(--police-texte); color: var(--encre1); }

/* Prix réservé aux membres : encart (e07) et carte (e08, e09) */
.encart-membre { margin-top: 24px; padding: 24px; border-radius: var(--r-carte); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.encart-membre__tete { display: flex; align-items: center; gap: 12px; }
.encart-membre__orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: #fff; color: var(--accent-fonce); display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.encart-membre__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.encart-membre__texte { margin-top: 14px; }
.encart-membre .actions { margin-top: 16px; gap: 24px; }
.carte-membres { padding: 24px; border-radius: var(--r-carte); background: var(--ciel); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-membres__tete { display: flex; align-items: center; gap: 12px; }
.carte-membres__titre { font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.carte-membres__texte { margin-top: 16px; font: 400 16px/1.6 var(--police-texte); color: var(--encre2); }
.carte-membres .actions { margin-top: 16px; gap: 8px 24px; }

/* Rupture de stock et avis de retour */
.statut-stock {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; margin-top: 18px; padding: 4px 16px;
  border-radius: var(--r-pilule); background: var(--ciel); font: 500 14px/20px var(--police-texte); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.statut-stock::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--encre3); }
.alerte-stock { margin-top: 24px; }
.alerte-stock__intro { font: 400 15px/1.5 var(--police-texte); color: var(--encre1); }
.alerte-stock .champ { margin-top: 12px; }
.alerte-stock__rangee { display: flex; gap: 12px; }
.alerte-stock__rangee .champ__boite { flex: 1; min-width: 0; }
.alerte-stock__note { margin-top: 12px; }

/* Onglets soulignés et « En bref » */
.details-produit { padding: 96px 0 0; }
.onglets-ligne { display: flex; }
.onglet-ligne { height: 56px; padding: 0 40px; border: 0; background: none; white-space: nowrap; font: 600 16px/1.3 var(--police-titre); color: var(--encre1); }
.onglet-ligne:hover { color: var(--accent-fonce); }
.onglet-ligne[aria-selected="true"] { color: var(--accent-fonce); box-shadow: inset 0 -3px 0 var(--accent-fonce); }
.details-produit__panneau { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 48px; align-items: start; margin-top: 40px; }
.en-bref { padding: 28px; border-radius: var(--r-carte); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.en-bref__liste { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px 0; margin-top: 14px; font: 400 14px/1.45 var(--police-texte); }
.en-bref__liste dt { color: var(--encre3); }
.en-bref__liste dd { color: var(--encre1); }
.en-bref__compat { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; font: 500 14px/1.45 var(--police-texte); color: var(--encre1); }
.en-bref__compat .ico { color: var(--succes); width: 18px; height: 18px; }
.produits-associes { padding: 104px 0 144px; }

/* Forfaits (e08, e09) */
.carte-forfait { display: flex; flex-direction: column; padding: 24px; background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-forfait > .cadre-photo { min-height: 200px; }
.carte-forfait__type { margin-top: 24px; }
.carte-forfait__nom { margin-top: 8px; font: 600 20px/1.3 var(--police-titre); color: var(--encre1); }
.carte-forfait__texte { margin-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre2); }
.carte-forfait__prix { margin-top: 6px; font: 400 14px/1.5 var(--police-texte); color: var(--accent-fonce); }
.carte-forfait__prix a { color: var(--accent-fonce); }
.carte-forfait__inclus { margin: 4px 0 24px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.carte-forfait .btn { align-self: flex-start; margin-top: auto; }
.lien-suite { margin-top: 24px; }

/* Panier (e10) */
.entete-panier { padding: 128px 0 0; }
.entete-panier .fil-ariane { margin-bottom: 28px; }
.entete-panier .surtitre { margin-bottom: 16px; }
.entete-panier .chapo { margin-top: 24px; }
.panier { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; margin-top: 72px; padding-bottom: 144px; }
.panier__liste { padding: 8px 32px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.ligne-panier { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 128px; gap: 24px; align-items: center; padding: 24px 0; }
.ligne-panier + .ligne-panier { }
.ligne-panier__vignette { width: 112px; height: 112px; border-radius: var(--r-interne); background: #fff; box-shadow: var(--o-carte); display: grid; place-items: center; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.ligne-panier__vignette img { width: 88px; height: 88px; object-fit: contain; }
.ligne-panier__nom { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.ligne-panier__variante { margin-top: 4px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.ligne-panier .lien-action { margin-top: 2px; margin-bottom: -10px; }
.ligne-panier .lien-action .ico { width: 16px; height: 16px; }
.ligne-panier__prix { text-align: right; font: 600 20px/1.3 var(--police-titre); color: var(--encre1); white-space: nowrap; }
.recap-panier { padding: 32px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.recap-panier__lignes { margin-top: 16px; }
.recap-panier__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; font: 400 14px/1.5 var(--police-texte); color: var(--encre1); }
.recap-panier__ligne dd { text-align: right; }
.recap-panier__ligne--total { margin-top: 14px; padding-top: 20px; font: 600 20px/1.3 var(--police-titre); }
.recap-panier__avant { margin-top: 6px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.recap-panier .btn { width: 100%; margin-top: 24px; }
.recap-panier__note { margin-top: 16px; }
.recap-panier .lien-fleche { margin-top: 8px; }

@media (max-width: 1199px) {
  .fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .details-produit__panneau { grid-template-columns: minmax(0, 1fr) 380px; }
  .panier { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .fiche { grid-template-columns: 1fr; }
  .details-produit__panneau { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .entete-boutique { padding: 24px 0 80px; }
  .bandeau-forfaits { grid-template-columns: 44px minmax(0, 1fr); padding: 20px; }
  .bandeau-forfaits .btn { grid-column: 1 / -1; width: 100%; }
  .outils-boutique__haut { flex-direction: column; align-items: stretch; gap: 12px; }
  .outils-boutique__recherche { width: 100%; }
  .outils-boutique__droite { justify-content: space-between; gap: 12px; }
  .tri { width: auto; flex: 1; min-width: 0; }
  .grille-produits { margin-top: 28px; }
  .progression { margin-top: 40px; }
  .encart-demande { flex-direction: column; align-items: stretch; margin-top: 72px; padding: 32px 20px; }
  .encart-demande .btn { width: 100%; }
  .aucun-resultat { padding: 32px 20px; }
  .aucun-resultat__bas { flex-direction: column; align-items: stretch; }
  .aucun-resultat__bas .btn { width: 100%; }
  .fiche-produit { padding: 100px 0 72px; }
  .fiche { gap: 32px; }
  .galerie__vignettes { gap: 10px; margin-top: 12px; }
  .vignette { height: 96px; }
  .vignette img { width: 72px; height: 72px; }
  .fiche__prix { font-size: 36px; }
  .fiche__achat-rangee { flex-direction: column; align-items: stretch; }
  .fiche__achat-rangee .quantite { align-self: flex-start; }
  .fiche__achat-rangee .btn, .fiche__colonne > .btn { width: 100%; }
  .fiche__question { align-items: flex-start; }
  .alerte-stock__rangee { flex-direction: column; }
  .alerte-stock__rangee .btn { width: 100%; }
  .encart-membre, .carte-membres { padding: 20px; }
  .carte-membres .actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .carte-membres .actions > .btn { width: auto; }
  .details-produit { padding-top: 64px; }
  .onglets-ligne { justify-content: space-between; }
  .onglet-ligne { padding: 0 8px; font-size: 15px; flex: 1; }
  .en-bref { padding: 24px 20px; }
  .en-bref__liste { grid-template-columns: 112px minmax(0, 1fr); }
  .produits-associes { padding: 72px 0 80px; }
  .carte-forfait { padding: 20px; }
  .carte-forfait .btn { width: 100%; }
  .entete-panier { padding-top: 100px; }
  .panier { margin-top: 40px; padding-bottom: 80px; }
  .panier__liste { padding: 4px 16px; border-radius: var(--r-carte); }
  .ligne-panier {
    grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 14px; padding: 20px 0;
    grid-template-areas: "image infos infos" "quantite quantite prix";
  }
  .ligne-panier__vignette { grid-area: image; width: 80px; height: 80px; align-self: start; }
  .ligne-panier__vignette img { width: 64px; height: 64px; }
  .ligne-panier__infos { grid-area: infos; }
  .ligne-panier .quantite { grid-area: quantite; justify-self: start; }
  .ligne-panier__prix { grid-area: prix; font-size: 18px; }
  .recap-panier { padding: 24px 20px; border-radius: var(--r-carte); }
  .panier-vide { margin: 40px 0 80px; padding: 40px 20px; }
  .panier-vide .btn { width: 100%; }
}

/* 30. Pages de lecture (e18 à e25) -------------------------------------------
   Colonne de texte de 700, sommaire collant, cartes d'articles, vidéos, glossaire, aide, rappels, 404. */
.entete-lecture__bas { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }
.entete-lecture__recherche { max-width: 520px; margin-top: 32px; }
.meta-lecture { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font: 500 14px/20px var(--police-texte); color: var(--encre3); }
.meta-lecture li, .meta-lecture span { display: inline-flex; align-items: center; gap: 8px; }
.meta-lecture .ico { width: 16px; height: 16px; stroke-width: 1.75; color: var(--accent-fonce); }
.signature { display: flex; align-items: center; gap: 14px; }
.signature__photo { width: 52px; height: 52px; border-radius: var(--r-pilule); object-fit: cover; box-shadow: 0 0 0 3px #fff, var(--o-douce); flex: none; }
.signature__nom { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.signature__role { font: 400 14px/1.45 var(--police-texte); color: var(--encre3); }
.lecture--sous-photo { margin-top: 72px; }
.bandeau-filtre { margin-bottom: 32px; }

.lecture { display: grid; grid-template-columns: 240px minmax(0, 700px); gap: 96px; align-items: start; }
.lecture--aide { grid-template-columns: minmax(0, 720px) minmax(0, 360px); gap: 120px; }
.lecture__colonne { min-width: 0; }
.lecture__colonne > .banniere { margin-top: 0; }
.lecture__aside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 24px; }
.sommaire__titre { display: block; margin-bottom: 12px; }
.sommaire ol { }
.sommaire a { display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 18px; font: 500 14px/1.4 var(--police-texte); color: var(--encre3); text-decoration: none; }
.sommaire a:hover { color: var(--accent-fonce); text-decoration: underline; }
.sommaire a[aria-current="true"] { color: var(--encre1); font-weight: 600; box-shadow: inset 2px 0 0 var(--bleu-clair); }
.sommaire__autres { padding-top: 24px; }
.sommaire__autres a { display: block; padding: 12px 0; font: 500 14px/1.4 var(--police-texte); color: var(--encre2); text-decoration: none; }
.sommaire__autres a:hover { color: var(--accent-fonce); text-decoration: underline; }
.sommaire__autres .ico { color: var(--accent-fonce); vertical-align: -2px; margin-left: 4px; }

/* Texte long */
.prose { font: 400 18px/1.75 var(--police-texte); color: var(--encre2); }
.prose > * + * { margin-top: 24px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font: 700 30px/1.22 var(--police-titre); letter-spacing: -.3px; color: var(--encre1); margin-top: 64px; scroll-margin-top: 32px; }
.prose h3 { font: 600 21px/1.35 var(--police-titre); color: var(--encre1); margin-top: 40px; scroll-margin-top: 32px; }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose ul, .prose ol { list-style: none; padding: 0; }
.prose ul:not([class]) > li { position: relative; padding-left: 28px; }
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu-clair); }
.prose li + li { margin-top: 10px; }
.prose strong { font-weight: 600; color: var(--encre1); }
.prose .chapo-article { font: 400 21px/1.6 var(--police-texte); color: var(--encre1); }
.prose .liste-coches > li + li { margin-top: 0; }
.prose__fin { margin-top: 56px; padding-top: 32px; }
.a-reprendre { padding: 20px 24px; border-radius: var(--r-interne); background: var(--ciel); box-shadow: var(--o-carte); font: 500 15px/1.6 var(--police-texte); color: var(--encre3); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.citation { position: relative; margin-block: 48px; padding: 36px 40px; border-radius: var(--r-panneau); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.citation__orbe { width: 44px; height: 44px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; }
.citation__orbe .ico { width: 18px; height: 18px; }
.citation blockquote { margin: 18px 0 0; }
.citation blockquote p { font: 600 24px/1.42 var(--police-titre); color: var(--encre1); text-wrap: pretty; }
.citation figcaption { margin-top: 16px; font: 500 14px/1.5 var(--police-texte); color: var(--encre3); }
.a-retenir { padding: 32px; border-radius: var(--r-panneau); background: #fff; box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.prose > .a-retenir { margin-block: 48px; }
.a-retenir__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.a-retenir__orbe { width: 44px; height: 44px; flex: none; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; }
.a-retenir__orbe .ico { width: 18px; height: 18px; }
.a-retenir__titre { margin: 0; font: 600 20px/1.3 var(--police-titre); color: var(--encre1); letter-spacing: 0; }
.fichier { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 18px 18px 18px 22px; border-radius: var(--r-carte); background: #fff; box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.fichier__orbe { width: 48px; height: 48px; flex: none; border-radius: var(--r-interne); background: var(--accent); color: #fff; display: grid; place-items: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.fichier__texte { flex: 1 1 200px; min-width: 0; }
.fichier__nom { font: 600 16px/1.35 var(--police-titre); color: var(--encre1); }
.fichier__poids { font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.fiche-responsable .fichier__nom { font-size: 18px; }
.mots-cles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mots-cles__titre { font: 600 14px/20px var(--police-texte); color: var(--encre1); margin-right: 4px; }
.carte-auteur { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; margin-top: 32px; padding: 28px; border-radius: var(--r-carte); background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.carte-auteur img { width: 72px; height: 72px; border-radius: var(--r-pilule); object-fit: cover; box-shadow: 0 0 0 3px #fff; }
.carte-auteur__nom { margin-top: 6px; }
.carte-auteur__texte { margin-top: 8px; font: 400 15px/1.6 var(--police-texte); color: var(--encre2); }

/* Cartes d'articles */
.grille-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grille-articles > li { display: flex; }
.grille-articles--apres-vedette { margin-top: 24px; }
.carte-article {
  display: flex; flex-direction: column; width: 100%; padding: 10px;
  background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-carte);
  color: inherit; text-decoration: none; transition: box-shadow .15s; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-article:hover { color: inherit; box-shadow: inset 0 0 0 1px var(--contour), var(--o-flottante); }
.carte-article__media { aspect-ratio: 16 / 10; border-radius: var(--r-carte); overflow: hidden; background: var(--ciel); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-article__media > .cadre-photo { height: 100%; border-radius: 0; box-shadow: none; }
.carte-article__media--produit { background: #fff; box-shadow: var(--o-carte); display: grid; place-items: center; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.carte-article__media--produit img { width: 62%; height: 80%; object-fit: contain; }
.carte-article__corps { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 14px 12px; }
.carte-article__titre { font: 600 20px/1.32 var(--police-titre); color: var(--encre1); }
.carte-article:hover .carte-article__titre { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; }
.carte-article__extrait { font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.carte-article__meta { margin-top: auto; padding-top: 8px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.carte-article--vedette { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 12px; }
.carte-article--vedette .carte-article__media { aspect-ratio: auto; min-height: 400px; }
.carte-article--vedette .carte-article__corps { justify-content: center; gap: 18px; padding: 40px 44px; }
.carte-article--vedette .carte-article__titre { font: 700 36px/1.12 var(--police-titre); letter-spacing: -.4px; }
.carte-article--vedette .carte-article__extrait { font-size: 17px; }
.carte-article--vedette .signature { margin-top: 8px; }
.barre-filtres { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.barre-resultats { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.barre-resultats__texte { font: 500 14px/20px var(--police-texte); color: var(--encre3); }
.barre-resultats__texte strong { color: var(--encre1); font-weight: 600; }
.btn-effacer {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0;
  border-radius: var(--r-pilule); background: var(--ciel); color: var(--encre1); font: 500 14px/20px var(--police-texte); text-decoration: none; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.btn-effacer .ico { width: 16px; height: 16px; color: var(--accent-fonce); }
.btn-effacer:hover { color: var(--accent-fonce); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 56px; }
.pagination ol { display: flex; gap: 8px; }
.pagination a, .pagination [aria-current="page"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: var(--r-pilule); background: #fff; box-shadow: inset 0 0 0 1px var(--filet);
  font: 500 14px/20px var(--police-texte); color: var(--encre1); text-decoration: none; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.pagination a:hover { box-shadow: inset 0 0 0 1px var(--contour); color: var(--accent-fonce); }
.pagination span[aria-current="page"] { background: var(--accent); color: var(--sur-accent); box-shadow: none; }
.pagination a.pagination__suivant { padding: 0 14px 0 20px; }

/* Vidéos et lecteur */
.grille-videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.raccourcis--ressources { box-shadow: var(--o-flottante); }
.carte-video { display: flex; flex-direction: column; gap: 16px; }
.video-vignette { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-carte); overflow: hidden; background: var(--ciel); box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.video-vignette__note { position: absolute; left: 12px; right: 12px; top: 12px; font: 500 13px/1.4 var(--police-texte); color: var(--encre3); text-align: center; }
.video-lecture { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; display: grid; place-items: center; border-radius: inherit; }
.video-lecture__rond { width: 60px; height: 60px; border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; box-shadow: var(--o-bleue); transition: transform .15s; }
.video-lecture:hover .video-lecture__rond { transform: scale(1.06); background: var(--accent-survol); }
.video-lecture__rond .ico { margin-left: 3px; }
.ico--plein { fill: currentColor; }
.video-duree {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--r-pilule); background: #fff; color: var(--encre1); box-shadow: var(--o-douce); font: 600 12px/1 var(--police-texte); letter-spacing: .4px; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.carte-video__titre { font: 600 18px/1.35 var(--police-titre); color: var(--encre1); }
.carte-video__texte { margin-top: 6px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.carte-video.est-en-lecture .video-vignette { box-shadow: inset 0 0 0 2px var(--accent-fonce); }
.lecteur__barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 0 12px 12px; }
.lecteur__position { font: 500 14px/20px var(--police-texte); color: var(--encre3); }
.lecteur__ecran {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-carte); overflow: hidden;
  background: var(--ciel); display: grid; place-items: center; padding: 16px;
  font: 500 14px/1.5 var(--police-texte); color: var(--encre3); text-align: center; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.lecteur__progres { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(var(--ombre-c), .1); }
.lecteur__progres span { display: block; width: 24%; height: 100%; background: var(--bleu-clair); }
.lecteur__infos { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 20px 12px 8px; }
.lecteur__titre { font: 700 24px/1.25 var(--police-titre); color: var(--encre1); }
.lecteur__infos .meta-lecture { margin-top: 8px; }
.lecteur__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.lecteur__nav .btn--blanc { gap: 6px; }

/* Glossaire */
.index-az {
  position: sticky; top: 16px; z-index: 5; display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 2px;
  margin-bottom: 64px; padding: 6px; background: #fff; border-radius: var(--r-pilule); box-shadow: inset 0 0 0 1px var(--filet), var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.index-az__lettre { display: grid; place-items: center; height: 44px; border-radius: var(--r-pilule); font: 600 15px/1 var(--police-titre); color: var(--encre1); text-decoration: none; }
a.index-az__lettre:hover { box-shadow: inset 0 0 0 1.5px var(--marine); color: var(--accent-fonce); }
a.index-az__lettre[aria-current="true"] { background: var(--accent); color: var(--sur-accent); }
span.index-az__lettre { color: var(--attenue); font-weight: 500; }
.groupe-lettre { display: grid; grid-template-columns: 240px minmax(0, 700px); gap: 96px; align-items: start; scroll-margin-top: 96px; }
.groupe-lettre + .groupe-lettre { margin-top: 56px; padding-top: 56px; }
.groupe-lettre__lettre { font: 700 72px/1 var(--police-titre); color: var(--accent-fonce); letter-spacing: -1px; }
.groupe-lettre__nombre { display: block; margin-top: 10px; font: 500 14px/20px var(--police-texte); color: var(--encre3); letter-spacing: 0; }
.termes { display: flex; flex-direction: column; margin: 0; }
.termes dd { margin: 0; }
.terme { padding: 28px 0; scroll-margin-top: 96px; }
.terme:first-child { padding-top: 4px; }
.terme + .terme { }
.terme dt { display: block; }
.terme__nom { font: 600 22px/1.3 var(--police-titre); color: var(--encre1); }
.terme__long { display: block; margin-top: 4px; font: 400 15px/1.5 var(--police-texte); color: var(--encre3); }
.terme__def { margin-top: 10px; font: 400 18px/1.7 var(--police-texte); color: var(--encre2); }
.terme__voir { margin-top: 10px; font: 400 15px/1.6 var(--police-texte); color: var(--encre3); }
.terme .cadre-photo { margin-top: 18px; }
mark, .surligne { background: var(--accent-pale); color: #fff; border-radius: 3px; padding: 0; box-shadow: 0 0 0 2px var(--accent-pale); }
.recherche-ligne { display: flex; gap: 12px; align-items: flex-end; }
.recherche-ligne .champ { flex: 1; }
.resultats-recherche { margin-bottom: 40px; }
.glossaire__aide { margin-top: 48px; padding-top: 24px; }

/* Inconforts (e22) : accordéon causes + solutions */
.intro-symptomes { margin: 8px 0 28px; }
.faq--inconforts .faq__question { min-height: 88px; }
.faq--inconforts .faq__reponse { padding-top: 4px; }
.faq__question-texte { display: flex; flex-direction: column; gap: 4px; }
.faq__question-sous { font: 400 14px/1.45 var(--police-texte); color: var(--encre3); }
.reponse-bloc + .reponse-bloc { margin-top: 24px; }
.reponse-bloc > .surtitre { margin-bottom: 12px; }
.faq--inconforts .reponse-bloc:first-child { padding-top: 20px; }

/* Rappels d'équipements (e23) */
.liste-avis { display: flex; flex-direction: column; gap: 16px; }
.barre-avis { margin-top: 4px; }
.avis { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px; padding: 28px; background: #fff; border-radius: var(--r-carte); box-shadow: var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.avis__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: var(--r-interne); background: var(--ciel); text-align: center; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.avis__jour { font: 700 32px/1 var(--police-titre); color: var(--encre1); }
.avis__mois { margin-top: 6px; font: 600 12px/1.2 var(--police-texte); letter-spacing: 1px; text-transform: uppercase; color: var(--encre3); }
.avis__tete { display: flex; flex-wrap: wrap; gap: 8px; }
.avis__titre { margin-top: 12px; font: 600 20px/1.32 var(--police-titre); color: var(--encre1); }
.avis__details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin-top: 14px; font: 400 14px/1.5 var(--police-texte); }
.avis__details dt { color: var(--encre3); }
.avis__details dd { color: var(--encre1); }
.avis__bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 14px; }
.pastille-avis {      /* type et statut d'un avis : distincts des statuts de clinique */
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border-radius: 14px;
  font: 600 12px/1.3 var(--police-texte); letter-spacing: .5px; background: var(--ciel); color: var(--encre1); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.pastille-avis--rappel { background: var(--accent); color: var(--marine); }
.pastille-avis--securite { background: var(--marine); color: #fff; }
.pastille-avis--remplacement { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--marine); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.pastille-avis--aucune-action { background: #fff; color: var(--noir); box-shadow: inset 0 0 0 1.5px var(--bleu-clair); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
/* État vide : un seul composant (panier vide, aucun résultat, aucun rappel) : orbe, titre, texte, action, suggestions. */
.etat-vide { display: flex; flex-direction: column; align-items: center; margin-block: 40px; padding: 56px 40px; text-align: center; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.etat-vide--page { margin-block: 72px 112px; }
.etat-vide__orbe { width: 64px; height: 64px; border-radius: var(--r-pilule); display: grid; place-items: center; background: var(--accent); color: #fff; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.etat-vide__orbe .ico { width: 26px; height: 26px; }
.etat-vide__orbe--succes { background: var(--succes-pale); color: var(--succes); }
.etat-vide__titre { margin-top: 24px; }
.etat-vide__texte { max-width: 54ch; margin-top: 12px; font: 400 16px/1.65 var(--police-texte); color: var(--encre2); }
.etat-vide__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 28px; }
.etat-vide__suggestions { align-self: stretch; margin-top: 36px; padding-top: 32px; }
.etat-vide__suggestions .surtitre { margin-bottom: 14px; }
.etat-vide__suggestions .puces { justify-content: center; }
.etat-vide__bas { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; margin-top: 36px; padding: 20px 24px; border-radius: var(--r-carte); background: var(--ciel); text-align: left; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); box-shadow: var(--o-carte); }
.etat-vide__bas .second { margin-top: 4px; color: var(--encre2); }
@media (max-width: 767px) {
  .etat-vide { padding: 40px 20px; }
  .etat-vide--page { margin-block: 40px 72px; }
  .etat-vide__bas { flex-direction: column; align-items: stretch; text-align: center; }
  .etat-vide__bas .btn { align-self: center; }
}

/* Page introuvable (404) */
.introuvable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 80px; align-items: center; padding-bottom: 24px; }
.introuvable__texte { max-width: 620px; }
.introuvable__texte .surtitre { margin-bottom: 20px; }
.introuvable__texte .chapo { margin-top: 24px; }
.introuvable__recherche { margin-top: 36px; }
.introuvable__aide { margin-top: 20px; font: 400 15px/1.6 var(--police-texte); color: var(--encre3); }
.introuvable__media { position: relative; padding: 48px; background: #fff; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; box-shadow: 0 0 0 16px var(--ciel), 0 0 0 17px var(--filet), var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.introuvable__media img { width: 86%; height: auto; }
.introuvable__zzz { position: absolute; right: 12%; top: 10%; font: 700 34px/1 var(--police-titre); color: var(--accent-fonce); letter-spacing: 2px; }
.introuvable__zzz small { font-size: .7em; }

@media (max-width: 1199px) {
  .lecture { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
  .lecture--aide { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .groupe-lettre { grid-template-columns: 160px minmax(0, 1fr); gap: 48px; }
  .introuvable { gap: 48px; }
}
@media (max-width: 1023px) {
  .lecture, .lecture--aide { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lecture__aside { position: static; }
  .sommaire { padding: 20px 24px; border-radius: var(--r-carte); background: #fff; box-shadow: var(--o-carte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
  .grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-article--vedette { grid-template-columns: 1fr; }
  .carte-article--vedette .carte-article__media { min-height: 0; aspect-ratio: 16 / 10; }
  .introuvable { grid-template-columns: 1fr; }
  .introuvable__media { max-width: 360px; }
}
@media (max-width: 767px) {
  .prose { font-size: 17px; line-height: 1.7; }
  .prose .chapo-article { font-size: 19px; }
  .prose h2 { font-size: 26px; margin-top: 48px; }
  .prose h3 { font-size: 19px; }
  .citation { padding: 28px 22px; }
  .citation blockquote p { font-size: 20px; }
  .a-retenir { padding: 24px 20px; }
  .fichier .btn { width: 100%; }
  .carte-auteur { grid-template-columns: 1fr; padding: 22px; }
  .lecture--sous-photo { margin-top: 40px; }
  .grille-articles { grid-template-columns: 1fr; gap: 16px; }
  .grille-videos { grid-template-columns: 1fr; gap: 32px; }
  .carte-article--vedette .carte-article__corps { padding: 20px 14px 12px; }
  .carte-article--vedette .carte-article__titre { font-size: 28px; }
  .barre-filtres { margin-bottom: 28px; }
  .pagination { margin-top: 40px; }
  .pagination__texte-long { display: none; }
  .lecteur__ecran { border-radius: var(--r-interne); }
  .lecteur__infos { flex-direction: column; align-items: stretch; padding: 16px 8px 4px; gap: 16px; }
  .lecteur__titre { font-size: 20px; }
  .lecteur__nav .btn--blanc { flex: 1; justify-content: center; }
  .index-az { display: flex; justify-content: space-between; margin-bottom: 40px; padding: 4px; }
  span.index-az__lettre { display: none; }
  .index-az__lettre { width: 44px; }
  .groupe-lettre { grid-template-columns: 1fr; gap: 8px; }
  .groupe-lettre + .groupe-lettre { margin-top: 40px; padding-top: 40px; }
  .groupe-lettre__lettre { font-size: 54px; display: flex; align-items: baseline; gap: 14px; }
  .groupe-lettre__nombre { margin-top: 0; }
  .terme__def { font-size: 17px; }
  .recherche-ligne { flex-direction: column; align-items: stretch; }
  .recherche-ligne .btn { width: 100%; }
  .faq--inconforts .faq__question { min-height: 80px; }
  .avis { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .avis__date { flex-direction: row; gap: 8px; width: auto; height: 36px; padding: 0 14px; justify-self: start; border-radius: var(--r-pilule); }
  .avis__jour { font-size: 16px; }
  .avis__mois { margin-top: 0; }
  .avis__details { grid-template-columns: 1fr; gap: 0; }
  .avis__details dd + dt { margin-top: 8px; }
  .introuvable__media { max-width: 280px; margin-inline: auto; padding: 32px; }
  .introuvable__zzz { font-size: 26px; }
}

/* Bandeau sur mesure (e16) : lien du chapô dans la couleur du texte */
.bandeau-rdv__texte .chapo a { color: inherit; }

/* 31. Preuves (agrément et expertise) -------------------------------------
   « Pourquoi nous faire confiance » : à gauche la promesse et le sceau, à droite une carte blanche de trois preuves.
   Aucun aplat foncé : la section porte un fond diagonal du système (fond-diag) et la carte blanche s'y détache. */
/* Section marine : une grande surface sombre, texte blanc (le texte est blanc sur tout fond bleu) */
.preuves { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: center; }
.preuves__marque { display: flex; flex-direction: column; gap: 40px; }
.preuves__marque .titre-2 { margin-top: 14px; font-size: 44px; text-wrap: balance; }
.preuves__chapo { margin-top: 20px; font: 400 17px/1.65 var(--police-texte); color: var(--encre2); max-width: 34ch; }
.preuves__sceau { display: flex; align-items: center; gap: 18px; padding-top: 28px; }
.preuves__sceau img { width: 76px; height: 76px; flex: none; border-radius: 50%; background: #fff; padding: 5px; box-shadow: inset 0 0 0 1px var(--filet), var(--o-douce); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.preuves__sceau p { font: 400 14px/1.45 var(--police-texte); color: var(--encre3); }
.preuves__sceau strong { display: block; font: 600 16px/1.35 var(--police-titre); color: var(--encre1); margin-bottom: 2px; }
.preuves__liste { display: flex; flex-direction: column; padding: 8px 36px; border-radius: var(--r-panneau); background: #fff; box-shadow: var(--o-flottante); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.preuves__point { display: grid; grid-template-columns: 52px minmax(0, 1fr) 140px; align-items: center; gap: 24px; padding: 28px 0; }
.preuves__point + .preuves__point { }
.preuves__orbe { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--accent); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.preuves__point h3 { font: 600 19px/1.35 var(--police-titre); text-wrap: balance; }
.preuves__point p { margin-top: 6px; font: 400 15px/1.55 var(--police-texte); color: var(--encre3); max-width: 54ch; }
.preuves__chiffre { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; font: 700 40px/1 var(--police-titre); letter-spacing: -1px; color: var(--accent-fonce); white-space: nowrap; }
.preuves__chiffre small { font: 500 12px/1.35 var(--police-texte); letter-spacing: 0; color: var(--encre3); white-space: normal; max-width: 15ch; }
.preuves + .bandeau-equipe { margin-top: 48px; }
@media (max-width: 1023px) {
  .preuves { grid-template-columns: 1fr; gap: 40px; }
  .preuves__point { grid-template-columns: 52px minmax(0, 1fr) 120px; }
}
@media (max-width: 767px) {
  .preuves { gap: 32px; }
  .preuves__marque .titre-2 { font-size: clamp(28px, 8.7vw, 34px); }
  .preuves__marque { gap: 28px; }
  .preuves__liste { padding: 4px 20px; }
  .preuves__point { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .preuves__orbe { width: 44px; height: 44px; border-radius: 14px; }
  .preuves__chiffre { grid-column: 2; flex-direction: row; align-items: baseline; gap: 10px; text-align: left; font-size: 30px; flex-wrap: wrap; }
  .preuves__chiffre small { max-width: none; }
}

/* 32. En-têtes illustrés (pages intérieures) -------------------------------------
   .entete-photo : photo en plein cadre à droite, voile blanc à gauche, accès rapides en bas. C'est le modèle retenu
   (appliqué par appliquer_entetes.py) ; les variantes à panneau et à bandeau foncé de la page d'options sont retirées. */
.entete-photo { position: relative; overflow: hidden; background: #fff; display: flex; flex-direction: column; min-height: 640px; color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.entete-photo__media { position: absolute; inset: 0; }
.entete-photo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 92% 22%; max-width: none; }
.entete-photo__voile { position: absolute; inset: 0; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 66%); }
.entete-photo__contenu { position: relative; padding-top: 128px; }
.entete-photo__contenu .fil-ariane { margin-bottom: 24px; }
.entete-photo__contenu .surtitre { margin-bottom: 16px; }
.entete-photo__contenu .titre-1 { max-width: 620px; }
.entete-photo__contenu .chapo { max-width: 500px; margin-top: 22px; }
.entete-photo__contenu .actions { margin-top: 32px; }
.entete-photo__rac { position: relative; margin-top: auto; padding: 40px 0 28px; }
.entete-photo .raccourcis { box-shadow: var(--o-forte); }
.entete-photo .raccourci__orbe { font: 600 16px/1 var(--police-titre); }

@media (max-width: 767px) {
  .entete-photo { min-height: 0; }
  .entete-photo__media { position: relative; height: 240px; inset: auto; order: 2; }
  .entete-photo__voile { background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 40%); }
  .entete-photo__contenu { padding-top: 100px; }
  .entete-photo__rac { order: 3; padding: 20px 0 8px; }
}

/* Modèle d'en-tête photo : variantes (appliqué par appliquer_entetes.py) */
.raccourcis--info { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; padding: 0; background: none; box-shadow: none; }   /* trois ou quatre cartes séparées au lieu d'une barre unique */
.raccourcis--info .raccourci { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; align-items: start; padding: 24px 24px 26px; background: #fff; box-shadow: var(--o-forte); transition: transform .25s var(--ease-sortie); }
.raccourcis--info .raccourci:hover { transform: translateY(-3px); }
.raccourcis--info .raccourci__orbe { width: 56px; height: 56px; font: 600 15px/1 var(--police-titre); box-shadow: var(--o-bleue); }
.raccourcis--info .raccourci__titre { font: 700 18px/1.3 var(--police-titre); }
.raccourcis--info .raccourci__sous { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
.raccourcis--info .raccourci__sous a { color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 2px; }
.raccourcis--dense { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.raccourcis--dense .raccourci { min-height: 0; padding: 22px 22px 24px; }
.entete-photo--sans-rac { min-height: 520px; }
.entete-photo--sans-rac .entete-photo__contenu { padding-bottom: 72px; }
.entete-photo__statut { margin-top: 20px; }
/* Version basse : formulaires, lecture, pages légales et boutique. Même composition, moins de hauteur. */
.entete-photo--basse, .entete-photo--basse.entete-photo--sans-rac { min-height: 440px; }
.entete-photo--basse .entete-photo__media img { object-position: 92% 4%; }   /* hero bas : on garde la tête entière sous la nav */
.entete-photo--basse.entete-photo--sans-rac .entete-photo__contenu { padding-bottom: 56px; }
/* Bandes du bas autres que les accès rapides : carte « prix réservé aux membres », forfaits CPAP */
.entete-photo .carte-membres { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 36px; padding: 20px 28px; background: #fff; border-radius: var(--r-panneau); box-shadow: var(--o-forte); color: var(--noir); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.entete-photo .carte-membres__texte { margin-top: 0; }
.entete-photo .carte-membres .actions { margin-top: 0; }
.entete-photo .carte-membres .orbe { background: var(--accent); color: #fff; --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.entete-photo + :is(.section--sans-haut, .section--formulaire) { padding-top: 48px; }
.entete-photo .bandeau-forfaits { padding: 20px 28px; border-radius: var(--r-panneau); box-shadow: var(--o-forte); }
.raccourcis--info .raccourci__titre a { display: inline-block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .raccourcis--info, .raccourcis--dense { grid-template-columns: 1fr; gap: 12px; }
  .raccourcis--info .raccourci, .raccourcis--dense .raccourci { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 20px; }
  .raccourcis--info .raccourci__orbe { width: 52px; height: 52px; }
  .entete-photo .carte-membres { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .raccourcis--info .raccourci, .raccourcis--dense .raccourci { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .raccourcis--info .raccourci__orbe { width: 44px; height: 44px; }
  .entete-photo .titre-1 { font-size: clamp(30px, 9.23vw, 36px); }
  .entete-photo .titre-1--compact { font-size: clamp(28px, 8.7vw, 34px); }
  .entete-photo--sans-rac, .entete-photo--basse, .entete-photo--basse.entete-photo--sans-rac { min-height: 0; }
  .entete-photo--sans-rac .entete-photo__contenu, .entete-photo--basse.entete-photo--sans-rac .entete-photo__contenu { padding-bottom: 28px; }
  .entete-photo .carte-membres { padding: 20px; }
  .entete-photo + :is(.section--sans-haut, .section--formulaire) { padding-top: 24px; }
  .entete-photo .bandeau-forfaits { padding: 20px; }
}


/* 33. États, mouvement et finitions ----------------------------------------------
   Mouvement : seulement si la personne ne demande pas de réduction (html.mouvement, posée par le script de tete.html,
   et jamais sous Playwright). Durées : .15 s pour un retour d'appui, .25 à .35 s pour un état, .7 s pour une entrée.
   Courbe unique : sortie douce (ease-out quint). On anime transform et opacity seulement. */
:root { --ease-sortie: cubic-bezier(.22, 1, .36, 1); }
html { scroll-padding-top: 112px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
}

/* Lien d'évitement (premier élément tabulable de chaque page) */
.lien-evitement {
  position: fixed; z-index: 1100; top: 12px; left: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pilule); background: var(--accent); color: var(--sur-accent); font: 600 14px/1 var(--police-texte); text-decoration: none;
  box-shadow: var(--o-bleue); transform: translateY(-160%);
}
.lien-evitement:focus-visible { transform: none; outline: 3px solid var(--accent-fonce); outline-offset: 2px; color: var(--sur-accent); }
main:focus { outline: none; }

/* Chiffres alignés : prix, comptes, dates, numéros */
:is([class*="prix"], [class*="nombre"], [class*="chiffre"], [class*="total"], [class*="montant"], .avis__jour, .rdv-jour, time) { font-variant-numeric: tabular-nums; }

/* Retour d'appui et survol (pointeur fin seulement pour les survols) */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active, .btn-rond:active, .puce:active, .onglet:active, .rdv-jour:active { transform: translateY(1px) scale(.985); transition-duration: .06s; }
  .btn-rond, .puce, .onglet, .rdv-jour { transition: transform .15s var(--ease-sortie), background-color .15s, box-shadow .15s, color .15s; }
  .btn__pastille .ico, .lien-fleche .ico, .lien-action .ico { transition: transform .25s var(--ease-sortie); }
  .carte-produit--grille, .carte-article { transition: transform .3s var(--ease-sortie), box-shadow .3s var(--ease-sortie); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__pastille .ico { transform: translate(2px, -2px); }
  .lien-fleche:hover .ico, .lien-action:hover .ico { transform: translateX(3px); }
  .carte-produit--grille:hover, .carte-article:hover { transform: translateY(-3px); }
}

/* Entrées : en-tête de page et bandeau des témoins à l'arrivée, panneaux à l'ouverture */
@keyframes monter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes glisser { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes poser { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
html.mouvement :is(.heros__contenu, .entete-photo__contenu) > * { animation: monter .8s var(--ease-sortie) both; }
html.mouvement :is(.heros__contenu, .entete-photo__contenu) > :nth-child(2) { animation-delay: .07s; }
html.mouvement :is(.heros__contenu, .entete-photo__contenu) > :nth-child(3) { animation-delay: .14s; }
html.mouvement :is(.heros__contenu, .entete-photo__contenu) > :nth-child(4) { animation-delay: .21s; }
html.mouvement :is(.heros__contenu, .entete-photo__contenu) > :nth-child(n + 5) { animation-delay: .28s; }
html.mouvement :is(.heros__raccourcis, .entete-photo__rac) { animation: monter .9s var(--ease-sortie) .3s both; }
html.mouvement .temoins-bandeau:not([hidden]) { animation: poser .5s var(--ease-sortie) .5s both; }
html.mouvement .panneau-lateral { animation: glisser .4s var(--ease-sortie) both; }
html.mouvement .voile { animation: apparaitre .3s ease both; }
html.mouvement .dialogue:not([hidden]) { animation: poser .35s var(--ease-sortie) both; }

/* Révélation au défilement (js/motion.js pose data-rev ; .est-vu quand l'élément entre dans l'écran) */
html.mouvement [data-rev] { opacity: 0; transform: translateY(14px); }
html.mouvement [data-rev].est-vu { opacity: 1; transform: none; transition: opacity .7s var(--ease-sortie), transform .7s var(--ease-sortie); transition-delay: calc(var(--rev-i, 0) * 70ms); }

/* FAQ : la réponse se déploie (navigateurs qui savent animer details) */
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-sortie), content-visibility .35s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}

/* Navigation entre pages : fondu court, et l'en-tête reste en place */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-entete { view-transition-name: entete; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

/* Filet de sécurité : mouvement réduit = plus aucune animation (le rouet d'envoi tourne lentement, c'est un état) */
@media (prefers-reduced-motion: reduce) {
  *:not(.btn__rouet), *:not(.btn__rouet)::before, *:not(.btn__rouet)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 359px) {
  .carte-produit--grille .surtitre { letter-spacing: -.1px; }
  .prose h2 { font-size: clamp(20px, 6.6vw, 26px); }
  .depot { padding: 16px; }
  .nowrap { white-space: normal; }
  .onglets-ligne { overflow-x: auto; scrollbar-width: none; }
  .carte-produit__nom { overflow-wrap: break-word; }
  .preuves__liste { padding: 4px 14px; }
  .preuves__point { gap: 12px; }
  .preuves__point h3 { font-size: 15px; overflow-wrap: anywhere; }
  .grille-2--petites { grid-template-columns: 1fr; }
  strong, .banniere__titre { overflow-wrap: anywhere; }
  .conteneur { width: calc(100% - 2 * 14px); }
}