/* ==========================================================================
   MG-L Auto-École: feuille de style du site public
   Charte validée: bleu nuit, bleu électrique, bleu ciel, blanc; Sora (titres) et Inter (texte), polices locales.
   Refonte du 12.10.2026 (relecture de David): boutons, cartes, pastilles d'icônes et sur-titres plus soignés,
   animations discrètes (transform et opacity, 150 à 250 ms, rien si l'utilisateur réduit les animations),
   fenêtre du formulaire, version mobile repensée. Aucun texte affiché n'est écrit ici (traductions futures).
   ========================================================================== */

/* 1. Polices ------------------------------------------------------------- */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/sora-variable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-variable.woff2') format('woff2'); }

/* 2. Jetons de design ------------------------------------------------------ */
:root {
  --nuit: #081a3a;
  --nuit-2: #0d2a5e;
  --marine: #10335d;
  --bleu: #1e5eff;
  --bleu-fonce: #1649c9;
  --ciel: #5eb8ff;
  --ciel-pale: #e4f1ff;
  --ciel-voile: #f0f6ff;
  /* Blanc froid à peine teinté (13.10.2026, « fond blanc et élégant »): seulement pour séparer deux zones blanches. */
  --blanc-froid: #f7f9fc;
  --blanc: #ffffff;
  --texte: #10213f;
  --texte-doux: #55637d;
  --bordure: #dfe6f1;
  --bordure-douce: #e3eaf5;
  /* Liseré bleu très pâle des cartes posées sur fond blanc, plus marqué au survol. */
  --lisere: #d9e4f3;
  --lisere-survol: #bdd1ef;
  --soleil: #ffb703;
  --vert: #0f766e;
  --vert-fonce: #115e59;
  /* WhatsApp: vert de la marque assombri d'un cran (remarque 1 du 12.10.2026, « ils pètent les yeux »), texte très foncé:
     contraste AA partout, 5 sur la teinte la plus sombre du dégradé. */
  --wa: #22b85e;
  --wa-clair: #2cc56a;
  --wa-fonce: #1ca552;
  --wa-texte: #052614;
  --rouge: #b91c1c;
  /* Textes sur bleu nuit (remarque 10 du 12.10.2026, tout le site): blanc crème au lieu des gris bleutés, peu lisibles. */
  --sur-nuit: #f6f1e8;
  --sur-nuit-doux: #e8e0d0;
  --rayon: 20px;
  --rayon-petit: 12px;
  --rayon-bouton: 12px;
  --ombre: 0 2px 4px rgba(8, 26, 58, .04), 0 28px 56px -28px rgba(8, 26, 58, .4);
  /* Ombres en trois couches (13.10.2026): contact net, halo proche, ombre portée longue; les cartes blanches ressortent sur le blanc. */
  --ombre-douce: 0 1px 2px rgba(8, 26, 58, .06), 0 6px 16px -6px rgba(8, 26, 58, .1), 0 24px 48px -24px rgba(8, 26, 58, .3);
  --ombre-carte: 0 1px 2px rgba(8, 26, 58, .07), 0 4px 12px -4px rgba(8, 26, 58, .09), 0 18px 36px -20px rgba(8, 26, 58, .3);
  --ombre-carte-survol: 0 2px 4px rgba(8, 26, 58, .07), 0 10px 22px -8px rgba(8, 26, 58, .14), 0 32px 60px -28px rgba(8, 26, 58, .42);
  --ombre-bleue: 0 1px 2px rgba(8, 26, 58, .18), 0 12px 24px -12px rgba(30, 94, 255, .6);
  --fond-carte: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  --degrade-bleu: linear-gradient(180deg, #2a66ff 0%, #1e5eff 50%, #1546c4 100%);
  --degrade-pastille: linear-gradient(145deg, #3d7dff 0%, #1e5eff 48%, #10335d 100%);
  /* Boutons bleus: le dégradé des pastilles (remarque 2 du 12.10.2026), même angle et mêmes teintes; seul le coin clair est un cran
     plus soutenu (#2a69ff au lieu de #3d7dff) pour que le texte blanc passe le contraste AA partout (mesuré pixel par pixel). */
  --degrade-bouton: linear-gradient(145deg, #2a69ff 0%, #1e5eff 48%, #10335d 100%);
  --ombre-bouton: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 6px rgba(8, 26, 58, .18), 0 1px 2px rgba(8, 26, 58, .18), 0 12px 24px -12px rgba(22, 73, 201, .7);
  --ombre-bouton-survol: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 6px rgba(8, 26, 58, .18), 0 2px 4px rgba(8, 26, 58, .18), 0 18px 32px -14px rgba(22, 73, 201, .8);
  --titres: 'Sora', system-ui, sans-serif;
  --texte-police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --largeur: 1200px;
  --entete-h: 76px;
  --transition: .2s cubic-bezier(.2, .7, .2, 1);
  --transition-longue: .6s cubic-bezier(.2, .7, .2, 1);
}

/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html, body { overflow-x: clip; }
html.fenetre-ouverte, html.menu-ouvert { overflow: hidden; }
body { margin: 0; font-family: var(--texte-police); font-size: 1.0625rem; line-height: 1.65; color: var(--texte); background: var(--blanc); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bleu-fonce); }
h1, h2, h3, h4 { font-family: var(--titres); color: var(--nuit); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.55rem); }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
/* Remarque 1 de /cours-de-sensibilisation (12.10.2026): plus de mot seul sur la dernière ligne d'un paragraphe ou d'une liste. */
p, li, dd, figcaption { text-wrap: pretty; }
::selection { background: var(--ciel); color: var(--nuit); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 6px; }
/* Contour du focus clavier (audit du 14.10.2026, WCAG 1.4.11): bleu sur les fonds clairs (5,1:1 sur blanc; le bleu ciel
   n'y faisait que 2,1:1), bleu ciel gardé sur les fonds nuit (8:1). Visible seulement à la navigation au clavier. */
:is(.section--nuit, .barre-haut, .hero, .avis, .pied, .cta__panneau, .faq-aide, .bandeau-admin) :focus-visible { outline-color: var(--ciel); }
[id] { scroll-margin-top: calc(var(--entete-h) + 16px); }
.icone { width: 1.25em; height: 1.25em; flex: none; }
.saut { position: absolute; left: -999px; top: 8px; background: var(--nuit); color: #fff; padding: 8px 12px; z-index: 100; border-radius: 8px; }
.saut:focus { left: 8px; }
[hidden] { display: none !important; }
/* Partie d'un texte masquée sur téléphone (ou sur tablette et téléphone): le texte complet reste dans le HTML pour le
   référencement et sur ordinateur, sans doublon pour les lecteurs d'écran (titres sur deux lignes au plus, 12.10.2026). */
@media (max-width: 599px) { .masque-mobile { display: none; } }
@media (max-width: 899px) { .masque-tablette { display: none; } }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4. Mise en page ----------------------------------------------------------- */
.conteneur { width: min(100% - 40px, var(--largeur)); margin-inline: auto; }
.conteneur--etroit { max-width: 780px; }
.conteneur--moyen { max-width: 960px; }
.section { padding: clamp(56px, 7vw, 100px) 0; }
.section--serree { padding: clamp(36px, 5vw, 64px) 0; }
.section:not(.section--douce):not(.section--nuit):not(.avis) + .section:not(.section--douce):not(.section--nuit):not(.avis) { padding-top: clamp(16px, 3vw, 40px); }
/* Sections claires: blanc (13.10.2026, plus de crème); blanc froid seulement contre une autre section blanche (§ 25). */
.section--douce { position: relative; isolation: isolate; background: var(--blanc); border-block: 1px solid var(--bordure-douce); }
.section--nuit { position: relative; isolation: isolate; background: radial-gradient(900px 420px at 88% -10%, rgba(30, 94, 255, .28), transparent 65%), radial-gradient(700px 360px at 0% 110%, rgba(94, 184, 255, .12), transparent 60%), var(--nuit); color: var(--sur-nuit); }
.section--nuit h2, .section--nuit h3 { color: #fff; }
.section--nuit :is(.note, .petit) { color: var(--sur-nuit-doux); }
/* En-tête de section: centré sur tout le site (remarques 11 et 24). */
.section__tete { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section__intro { font-size: 1.14rem; line-height: 1.6; color: var(--texte-doux); max-width: 64ch; margin-inline: auto; }
.section--nuit .section__intro { color: var(--sur-nuit); }
.section__pied { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }

/* Sur-titre: petites capitales et tiret. Le tiret est posé sur le centre des capitales de la première ligne
   (Sora: centre des capitales 0,03 em au-dessus du milieu de la ligne), y compris quand le texte passe sur deux lignes. */
.surtitre { display: inline-flex; align-items: flex-start; gap: 12px; color: var(--bleu); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; line-height: 1.5; margin: 0 0 16px; font-family: var(--titres); }
.surtitre::before, .section__tete .surtitre::after { content: ''; width: 24px; height: 2px; border-radius: 2px; background: currentColor; flex: none; margin-top: calc(.72em - 1px); }
.section__tete .surtitre::after { opacity: 1; }
.surtitre--clair, .section--nuit .surtitre { color: var(--ciel); }

.grille-2 { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
@media (min-width: 900px) { .grille-2--texte-large { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.grille-3 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-3--colonne { grid-template-columns: 1fr; }
.grille-4 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.note { color: var(--texte-doux); font-size: .95rem; }
.petit { font-size: .9rem; color: var(--texte-doux); }
.centre { text-align: center; }
.espace-haut { margin-top: 28px; }
.espace-haut--petit { margin-top: 14px; }
.legende { padding: 10px 0 0; }
.titre-moyen { font-size: 1.35rem; }
.texte-limite { max-width: 70ch; }

/* 5. Boutons ----------------------------------------------------------------- */
.bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border-radius: var(--rayon-bouton); font-weight: 650; font-family: var(--titres); font-size: .98rem; letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2; white-space: nowrap; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), background-position var(--transition), color var(--transition), border-color var(--transition); }
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton .icone { width: 1.15em; height: 1.15em; transition: transform var(--transition); }
.bouton:hover .icone--fleche, .carte-cours:hover .icone--fleche { transform: translateX(3px); }
/* Bouton bleu: même dégradé que les pastilles; au survol, il fonce légèrement (le contraste ne fait que monter). */
.bouton--plein { color: #fff; background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); box-shadow: var(--ombre-bouton); text-shadow: 0 1px 1px rgba(8, 26, 58, .25); }
.bouton--plein:hover { color: #fff; filter: brightness(.94) saturate(1.08); box-shadow: var(--ombre-bouton-survol); }
.bouton--plein .icone { filter: drop-shadow(0 1px 1px rgba(8, 26, 58, .3)); }
/* Bouton à contour: n'est plus utilisé sur fond blanc (remarque 3: les boutons blancs deviennent bleus); gardé pour les cas particuliers. */
.bouton--contour { color: var(--nuit); background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%); border-color: #cbd9ef; box-shadow: 0 1px 2px rgba(8, 26, 58, .06), 0 8px 18px -12px rgba(8, 26, 58, .3); }
.bouton--contour .icone { color: var(--bleu); }
.bouton--contour:hover { color: var(--nuit); border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(30, 94, 255, .1), 0 12px 24px -14px rgba(8, 26, 58, .38); }
/* Flèche des boutons à contour: dans une petite pastille, plus soignée qu'une flèche seule (remarque 22). */
.bouton--contour .icone--fleche { box-sizing: content-box; width: 14px; height: 14px; padding: 5px; margin-right: -8px; border-radius: 50%; background: var(--ciel-pale); }
.bouton--clair { color: var(--nuit); background: linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%); box-shadow: inset 0 -1px 0 rgba(8, 26, 58, .06), 0 10px 24px -12px rgba(0, 0, 0, .45); }
.bouton--clair:hover { color: var(--nuit); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18), 0 16px 30px -12px rgba(0, 0, 0, .5); }
.bouton--clair .icone { color: var(--bleu); }
.bouton--contour-clair { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06); }
.bouton--contour-clair:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: #fff; }
.bouton--whatsapp { color: var(--wa-texte); background-color: var(--wa); background-image: linear-gradient(180deg, var(--wa-clair) 0%, var(--wa) 50%, var(--wa-fonce) 100%); background-size: 100% 200%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(6, 43, 23, .2), 0 12px 24px -12px rgba(18, 120, 62, .55); }
.bouton--whatsapp:hover { color: var(--wa-texte); background-position: 0 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(6, 43, 23, .2), 0 18px 30px -12px rgba(18, 120, 62, .6); }
.bouton--danger { background: var(--rouge); color: #fff; }
.bouton--danger:hover { background: #7f1d1d; color: #fff; }
.bouton--grand { padding: 16px 28px; font-size: 1.03rem; }
.bouton--petit { padding: 9px 16px; font-size: .88rem; border-radius: 10px; gap: 8px; }
.bouton--bloc { width: 100%; }
.bouton:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 599px) { .bouton { white-space: normal; text-align: center; max-width: 100%; } }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu); text-decoration: none; font-family: var(--titres); }
.lien-fleche .icone { transition: transform var(--transition); }
.lien-fleche:hover .icone { transform: translateX(3px); }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--bleu); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* 6. Pastilles d'icônes (remarques 2, 32, 35): dégradé de la charte, relief et ombre douces, animation au survol. */
.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 8px rgba(8, 26, 58, .22), 0 10px 20px -10px rgba(22, 73, 201, .7); transition: transform var(--transition), box-shadow var(--transition); }
:is(.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone) .icone { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(8, 26, 58, .3)); transition: transform var(--transition); }
:is(.carte-info, .menu-deroulant__lien, .carte-cours, .hero__carte, .fenetre__entete):hover :is(.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone) { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 8px rgba(8, 26, 58, .22), 0 14px 24px -10px rgba(22, 73, 201, .75); }
:is(.carte-info, .menu-deroulant__lien, .carte-cours, .hero__carte):hover :is(.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone) .icone { transform: scale(1.08); }
.pastille--petite { width: 40px; height: 40px; border-radius: 12px; }
.pastille--petite .icone { width: 20px; height: 20px; }
/* Titre de carte précédé de sa pastille (Bon à savoir, En pratique, grilles de tarifs). */
.carte__titre { display: flex; align-items: center; gap: 14px; }

/* 7. En-tête ------------------------------------------------------------------ */
.barre-haut { background: var(--nuit); color: var(--sur-nuit-doux); font-size: .84rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.barre-haut__contenu { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; min-height: 40px; }
.barre-haut__contenu > a, .barre-haut__contenu > span, .barre-haut__zone { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; }
.barre-haut a { color: #fff; text-decoration: none; transition: color var(--transition); }
.barre-haut a:hover { color: var(--ciel); }
.barre-haut .icone { width: 15px; height: 15px; color: var(--ciel); }
.barre-haut__fin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.barre-haut__zone { margin-right: 10px; }
@media (max-width: 1199px) { .barre-haut__zone { display: none; } } /* place pour « Espace élève » sur une ligne (20.10.2026) */
.barre-haut a[aria-label] { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); transition: transform var(--transition), background-color var(--transition), border-color var(--transition); }
.barre-haut a[aria-label] .icone { width: 14px; height: 14px; color: #fff; }
.barre-haut a[aria-label]:hover { background: var(--bleu); border-color: var(--bleu); transform: translateY(-1px); }
@media (max-width: 1023px) { .barre-haut { display: none; } }
.entete { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: box-shadow var(--transition), border-color var(--transition), background-color var(--transition); }
.entete.est-reduit { box-shadow: 0 10px 30px -18px rgba(8, 26, 58, .35); border-bottom-color: var(--bordure); background: rgba(255, 255, 255, .97); }
.entete__barre { display: flex; align-items: center; gap: 18px; min-height: var(--entete-h); }
.entete__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nuit); flex: none; }
.logo-image { height: 44px; width: auto; display: block; }
.logo-image--pied { height: 40px; margin-bottom: 18px; }
.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__lien { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 10px; text-decoration: none; color: var(--texte); font-weight: 600; font-size: .95rem; white-space: nowrap; background: none; border: 0; font-family: inherit; cursor: pointer; transition: background-color var(--transition), color var(--transition); }
.nav__lien:hover, .nav__lien.est-actif, .nav__lien[aria-expanded="true"] { background: var(--ciel-voile); color: var(--bleu-fonce); }
.nav__lien.est-actif::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--bleu); }
.nav__lien .icone { width: 1em; height: 1em; transition: transform var(--transition); }
.nav__lien[aria-expanded="true"] .icone { transform: rotate(180deg); }
.nav__groupe { position: relative; }
.menu-deroulant { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); width: min(720px, 92vw); background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility 0s linear .2s; }
.nav__groupe.est-ouvert .menu-deroulant, .nav__groupe:focus-within .menu-deroulant { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) { .nav__groupe:hover .menu-deroulant { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } }
.menu-deroulant__lien { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--texte); transition: background-color var(--transition); }
.menu-deroulant__lien:hover, .menu-deroulant__lien[aria-current="page"] { background: var(--ciel-voile); color: var(--texte); }
.menu-deroulant__icone { width: 44px; height: 44px; border-radius: 12px; }
.menu-deroulant__icone .icone { width: 22px; height: 22px; }
.menu-deroulant__lien strong { display: block; font-family: var(--titres); font-size: .95rem; color: var(--nuit); }
.menu-deroulant__lien > span:last-child span { display: block; font-size: .83rem; color: var(--texte-doux); }
.menu-deroulant__pied { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 12px 2px; border-top: 1px solid var(--bordure); margin-top: 6px; font-size: .9rem; color: var(--texte-doux); }
.entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Lien « Espace élève » dans la barre du haut, PC (demande de Mikael du 20.10.2026). */
.barre-haut__compte { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .38); font-weight: 650; white-space: nowrap; transition: background-color .2s; }
.barre-haut__compte:hover { background: rgba(255, 255, 255, .12); }
.burger { display: none; width: 46px; height: 46px; border: 0; background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); border-radius: 12px; color: #fff; place-items: center; cursor: pointer; box-shadow: var(--ombre-bouton); transition: filter var(--transition), box-shadow var(--transition); }
.burger:hover { filter: brightness(.94) saturate(1.08); box-shadow: var(--ombre-bouton-survol); }
.burger .icone { width: 24px; height: 24px; }
.burger .icone--fermer { display: none; }
.burger[aria-expanded="true"] .icone--menu { display: none; }
.burger[aria-expanded="true"] .icone--fermer { display: block; }
/* En-tête complet dès 1220 px (13.10.2026): logo, menu, FR | PT et « Réserver une leçon » (ou « Mon espace ») ne tiennent
   pas dans le conteneur plus étroit; entre 1100 et 1219 px le bouton sortait de l'écran. En dessous: menu burger. */
@media (max-width: 1219px) {
  /* Remarque 5 de l'accueil (12.10.2026): le menu ouvert couvre toute la page sous l'en-tête (--nav-haut: bas de l'en-tête, posé par site.js). */
  .nav { position: fixed; top: var(--nav-haut, var(--entete-h)); left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #fff 0%, var(--blanc-froid) 100%); padding: 16px 20px 40px; overflow: auto; overscroll-behavior: contain; margin: 0; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility 0s linear .2s; z-index: 60; }
  .nav.est-ouvert { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li { border-bottom: 1px solid var(--bordure-douce); }
  .nav__lien { font-family: var(--titres); font-size: 1.12rem; padding: 16px 6px; justify-content: space-between; width: 100%; border-radius: 0; }
  .nav__lien:hover, .nav__lien.est-actif, .nav__lien[aria-expanded="true"] { background: none; color: var(--bleu); }
  .nav__lien.est-actif::after { display: none; }
  .menu-deroulant { position: static; transform: none; width: auto; box-shadow: none; border: 0; background: none; padding: 0 0 12px; grid-template-columns: 1fr; gap: 2px; opacity: 1; visibility: visible; display: none; }
  .nav__groupe.est-ouvert .menu-deroulant, .nav__groupe:focus-within .menu-deroulant { display: grid; transform: none; left: auto; }
  .menu-deroulant__lien { padding: 8px 6px; }
  .menu-deroulant__pied { display: none; }
  .nav__mobile-actions { display: grid; gap: 10px; margin-top: 24px; }
  .nav__mobile-actions .bouton { width: 100%; }
  .entete__cta { display: none; }
  .burger { display: grid; }
  /* Remarque 7: le bouton du menu à droite (la navigation, sortie du flux, ne le pousse plus). */
  .entete__actions { margin-left: auto; }
}
@media (min-width: 1220px) { .nav__mobile-actions { display: none; } }

/* 8. Héros ------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--nuit); }
.hero__fond { position: absolute; inset: 0; z-index: -2; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.04); animation: hero-zoom 12s ease-out forwards; }
/* Photo « stress »: le visage est en haut à gauche; sans ce cadrage, l'en-tête le coupe au front sur grand écran et le perd sur mobile. */
.hero__fond img[src*="/stress/"] { object-position: 25% 20%; }
/* Photo « remorque »: l'attelage occupe 38 à 68 % de la largeur; sur mobile (cadre portrait) ce cadrage le garde entier. */
.hero__fond img[src*="/remorque/"] { object-position: 55% 50%; }
.hero__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 26, 58, .95) 0%, rgba(8, 26, 58, .8) 44%, rgba(8, 26, 58, .3) 100%); }
/* Un seul héros pour tout le site (12.10.2026): même conteneur, même grille, mêmes marges que l'accueil. Sur les autres pages, la
   colonne de droite (la carte de réservation de l'accueil) reste vide, et le fil d'Ariane est posé dans la marge du haut pour ne
   pas décaler le sur-titre ni le titre. */
.hero__contenu { position: relative; display: grid; gap: 28px 56px; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr); align-items: center; padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 5vw, 56px); }
/* Texte calé en haut de la grille: le sur-titre et le titre tombent au même pixel que sur l'accueil, même quand la carte de
   droite (formulaire de l'espace élève) est plus haute que le texte. */
@media (min-width: 900px) { .hero--simple .hero__contenu, .hero--formulaire .hero__contenu { align-items: start; } }
.hero .fil { position: absolute; top: clamp(18px, 3vw, 38px); left: 0; right: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .fil ol { flex-wrap: nowrap; }
.hero .fil li { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero .fil li:not(:last-child) { flex: none; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .42em; text-shadow: 0 2px 24px rgba(8, 26, 58, .35); }
/* Pages sans carte à droite: le titre peut déborder sur la colonne vide (même position, même taille), deux lignes au plus. */
.hero--simple h1 { max-width: 17ch; }
@media (min-width: 900px) { .hero--simple .hero__contenu > div:first-child { grid-column: 1 / -1; } }
.hero .surtitre { color: var(--ciel); }
/* Remarque 1 de l'accueil (12.10.2026): pas de tiret devant le sur-titre du héros, sur toutes les pages (les sur-titres de section le gardent). */
.hero .surtitre::before { display: none; }
.hero__texte { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 56ch; color: var(--sur-nuit); margin-bottom: 1.7em; }
.hero__texte a { color: #fff; text-decoration: underline; }
.hero__texte a:hover { color: var(--ciel); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Avantages: une seule ligne sur ordinateur (remarque 4), sur toute la largeur sous le texte et la carte. */
.hero__preuves { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; color: var(--sur-nuit); }
.hero__preuves > span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.hero__preuves .icone { width: 18px; height: 18px; color: var(--ciel); }
.etoiles { color: var(--soleil); letter-spacing: 1px; }
/* Carte « Réserver en 30 secondes » (remarque 34): fond blanc vers bleu très pâle, relief et ombre portée. */
.hero__carte { position: relative; background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 55%, #eef4fc 100%); color: var(--texte); border-radius: 22px; padding: 28px; border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(8, 26, 58, .12), 0 44px 80px -34px rgba(0, 0, 0, .7); }
.hero__carte__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 20px; }
.hero__carte h2 { font-size: 1.28rem; margin-bottom: 4px; }
.hero__carte__tete p { color: var(--texte-doux); font-size: .93rem; line-height: 1.45; margin: 0; }
.hero__carte .champ { margin-bottom: 14px; }
.hero__carte .bouton { width: 100%; }
.hero__carte__ou { display: flex; align-items: center; gap: 12px; font-size: .82rem; color: var(--texte-doux); margin: 14px 0; text-transform: uppercase; letter-spacing: .1em; }
.hero__carte__ou::before, .hero__carte__ou::after { content: ''; flex: 1; height: 1px; background: var(--bordure); }
.hero__carte__liens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero--simple .hero__carte { display: none; }
@media (max-width: 899px) { .hero__contenu { grid-template-columns: 1fr; } .hero__voile { background: linear-gradient(180deg, rgba(8, 26, 58, .9) 0%, rgba(8, 26, 58, .84) 100%); } }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero .entree { animation: monter .8s var(--transition-longue) both; }
.hero .entree:nth-child(2) { animation-delay: .1s; }
.hero .entree:nth-child(3) { animation-delay: .2s; }
.hero .entree:nth-child(4) { animation-delay: .3s; }
.hero .entree:nth-child(5) { animation-delay: .4s; }
@keyframes monter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 9. Chiffres clés --------------------------------------------------------------- */
.chiffres { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chiffre { position: relative; overflow: hidden; background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 24px 26px 22px; display: grid; gap: 6px; align-content: start; box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition); }
.chiffre::before { content: ''; position: absolute; left: 26px; top: 0; width: 36px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.chiffre:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte-survol); }
.chiffre__valeur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.chiffre strong { font-family: var(--titres); font-size: 2.25rem; color: var(--nuit); letter-spacing: -.035em; line-height: 1.05; }
.chiffre > span:last-child { color: var(--texte-doux); font-size: .93rem; }
.chiffre .etoiles { font-size: .95rem; }
@media (min-width: 1000px) { .chiffre > span:last-child { white-space: nowrap; } }

/* 10. Cartes (cours, informations): même famille sur tout le site (remarque 17) ------------------------- */
.cartes-cours { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.carte-cours { position: relative; display: flex; flex-direction: column; background: var(--fond-carte); border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); text-decoration: none; color: var(--texte); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.carte-cours:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); border-color: #cddbf1; color: var(--texte); }
.carte-cours__image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit-2); }
.carte-cours__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .5s var(--transition-longue); }
.carte-cours:hover .carte-cours__image img { transform: scale(1.04); }
.carte-cours__corps { padding: 0 26px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-cours__icone { position: relative; margin-top: -26px; width: 52px; height: 52px; border: 3px solid #fff; }
.carte-cours__corps h3 { margin: 4px 0 0; font-size: 1.3rem; }
.carte-cours__corps p { color: var(--texte-doux); font-size: .97rem; flex: 1; margin: 0; }
.carte-cours__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--bordure-douce); }
.carte-cours__prix { font-family: var(--titres); font-weight: 700; font-size: .86rem; color: var(--nuit); background: var(--ciel-voile); border: 1px solid #d9e7fb; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.carte-cours:hover .carte-cours__bouton { filter: brightness(.94) saturate(1.08); box-shadow: var(--ombre-bouton-survol); }
.carte-info { background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 28px; display: grid; gap: 12px; align-content: start; box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition); }
.carte-info:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte-survol); }
a.carte-info { text-decoration: none; color: var(--texte); }
.carte-info h3 { margin: 6px 0 0; font-size: 1.15rem; }
.carte-info p { color: var(--texte-doux); font-size: .97rem; }
.section--nuit .carte-info { background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 100%); border-color: rgba(255, 255, 255, .14); color: var(--sur-nuit); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -30px rgba(0, 0, 0, .7); }
.section--nuit .carte-info p { color: var(--sur-nuit-doux); }

/* 11. Choix de parcours (« par où commencer? »): carte blanche en relief pour la distinguer des cours (remarque 18) ------- */
.parcours { background: #fff; border: 1px solid var(--bordure-douce); border-radius: 24px; padding: clamp(22px, 4vw, 40px); box-shadow: var(--ombre-douce); }
/* Remarque 2 du 12.10.2026: la rangée de boutons prend toute la largeur du bloc, comme le résultat dessous. */
.parcours__choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; }
/* Choix « par où commencer ? » (remarques 1 et 3): trois en haut, trois en bas; plus de bouton blanc, bleu clair au repos,
   dégradé des pastilles pour la situation choisie. */
.parcours__bouton { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid #cfe0fb; background: linear-gradient(180deg, #f3f8ff 0%, var(--ciel-pale) 100%); border-radius: 14px; padding: 12px 18px; font: inherit; font-family: var(--titres); font-size: .95rem; font-weight: 650; letter-spacing: -.005em; line-height: 1.25; text-align: center; cursor: pointer; color: var(--bleu-fonce); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(8, 26, 58, .05); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition), filter var(--transition); }
.parcours__bouton:hover { border-color: var(--bleu); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 10px 18px -12px rgba(22, 73, 201, .55); }
.parcours__bouton[aria-pressed="true"] { border-color: transparent; color: #fff; background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); text-shadow: 0 1px 1px rgba(8, 26, 58, .25); box-shadow: var(--ombre-bouton); }
.parcours__resultat { display: none; animation: monter .4s var(--transition-longue) both; }
.parcours__resultat.est-visible { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 799px) { .parcours__resultat.est-visible { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .js .parcours__choix { display: none; } .js .parcours__selecteur { display: grid; } }
.parcours__resultat h3 { font-size: 1.15rem; }
/* Liste déroulante du téléphone (remarque 8): la question en titre, un grand champ au contour bleu et sa flèche dans une pastille. */
.parcours__selecteur { display: none; gap: 12px; margin: 2px 0 26px; text-align: center; }
.parcours__question { font-family: var(--titres); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; color: var(--nuit); }
.parcours__selecteur select { appearance: none; width: 100%; min-height: 60px; padding: 14px 62px 14px 18px; font: 650 1.02rem/1.25 var(--titres); letter-spacing: -.005em; color: var(--nuit); text-align: left; cursor: pointer; border: 2px solid var(--bleu); border-radius: 16px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a69ff'/%3E%3Cstop offset='.48' stop-color='%231e5eff'/%3E%3Cstop offset='1' stop-color='%2310335d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='11' fill='url(%23g)'/%3E%3Cpath d='m14 17 6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 40px 40px; box-shadow: 0 1px 2px rgba(8, 26, 58, .06), 0 12px 24px -14px rgba(22, 73, 201, .55); transition: box-shadow var(--transition); }
.parcours__selecteur select:focus { outline: 0; box-shadow: 0 0 0 4px rgba(30, 94, 255, .18), 0 12px 24px -14px rgba(22, 73, 201, .55); }
.parcours__situation { display: none; }
/* Sans JavaScript: ni boutons ni liste, toutes les situations l'une sous l'autre, chacune avec son nom. */
html:not(.js) .parcours__choix, html:not(.js) .parcours__selecteur { display: none; }
html:not(.js) .parcours__situation { display: inline-flex; }
html:not(.js) .parcours__resultat { display: grid; gap: 24px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: start; animation: none; }
html:not(.js) .parcours__resultat + .parcours__resultat { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--bordure-douce); }
@media (max-width: 799px) { html:not(.js) .parcours__resultat { grid-template-columns: minmax(0, 1fr); } }
.parcours__etapes { margin: 0; padding: 0; list-style: none; counter-reset: pe; display: grid; gap: 12px; }
.parcours__etapes li { counter-increment: pe; position: relative; padding-left: 40px; }
.parcours__etapes li::before { content: counter(pe); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 .8rem/1 var(--titres); color: #fff; background: var(--degrade-pastille); box-shadow: 0 6px 12px -6px rgba(22, 73, 201, .7); }
.parcours__cta { background: linear-gradient(160deg, #f1f7ff 0%, #e3eeff 100%); border: 1px solid #d5e5fb; border-radius: 16px; padding: 22px; display: grid; gap: 12px; min-width: 0; }
.parcours__cta p { margin: 0 0 4px; font-size: .97rem; color: var(--nuit); }
.parcours__cta .bouton { white-space: normal; text-align: center; }

/* 12. Bandeau vidéos ------------------------------------------------------------- */
.bandeau-videos { display: grid; gap: 56px; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; }
.bandeau-videos__image { border-radius: var(--rayon); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 70px -30px rgba(0, 0, 0, .7); }
.bandeau-videos__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bandeau-videos__points { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 12px; }
.bandeau-videos__points li { display: flex; gap: 12px; align-items: flex-start; }
.bandeau-videos__points .icone { box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; color: var(--ciel); background: rgba(94, 184, 255, .14); border: 1px solid rgba(94, 184, 255, .3); margin-top: 1px; }
.bandeau-videos .section__intro { margin-inline: 0; }
@media (max-width: 899px) { .bandeau-videos { grid-template-columns: 1fr; gap: 36px; } }

/* 13. Étapes ---------------------------------------------------------------------- */
.etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.etapes li { counter-increment: etape; background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 26px 24px 24px; position: relative; box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition); }
.etapes li:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte-survol); }
.etapes li::before { content: counter(etape, decimal-leading-zero); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; font-family: var(--titres); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px rgba(22, 73, 201, .7); }
.etapes li strong { display: block; font-family: var(--titres); font-size: 1.1rem; color: var(--nuit); margin-bottom: 6px; letter-spacing: -.015em; }
.etapes li p { margin: 0; color: var(--texte-doux); font-size: .97rem; }
/* Marche à suivre de l'accueil: bleu nuit et cartes blanches (remarque 23). */
.section--nuit .etapes li { border-color: transparent; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
/* Étapes verticales (Marche à suivre). Remarque de David du 12.10.2026, « fades et pas premiums »: chaque étape devient une
   carte en relief reliée à sa pastille numérotée par la ligne du parcours; les remarques (.note) passent en encadré bleu ciel. */
.etapes--verticales { grid-template-columns: 1fr; gap: 18px; position: relative; }
.etapes--verticales::before { content: ''; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bleu) 0%, var(--ciel) 55%, var(--ciel-pale) 100%); }
.etapes--verticales li { margin-left: 84px; padding: 26px 30px 28px; border: 1px solid var(--bordure-douce); border-radius: var(--rayon); background: var(--fond-carte); box-shadow: var(--ombre-carte); transition: box-shadow var(--transition), border-color var(--transition); }
.etapes--verticales li:hover { transform: none; box-shadow: var(--ombre-carte-survol); border-color: #cddbf1; }
.etapes--verticales li::before { position: absolute; left: -84px; top: 22px; width: 56px; height: 56px; border-radius: 16px; font-size: 1.1rem; margin: 0; box-shadow: 0 0 0 6px var(--blanc), inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 22px -10px rgba(22, 73, 201, .75); }
.etapes--verticales li::after { content: ''; position: absolute; left: -8px; top: 42px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--bordure-douce); border-bottom: 1px solid var(--bordure-douce); transform: rotate(45deg); }
.etapes--verticales h2 { font-size: 1.35rem; margin-bottom: .45em; }
.etapes--verticales p { color: var(--texte); font-size: 1rem; }
.etapes--verticales p:last-child { margin-bottom: 0; }
.etapes--verticales .note { position: relative; margin: 16px 0 0; padding: 12px 16px 12px 20px; border-radius: var(--rayon-petit); background: var(--ciel-voile); border: 1px solid #d9e7fb; color: var(--texte); font-size: .95rem; line-height: 1.6; }
.etapes--verticales .note::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--bleu), var(--ciel)); }
@media (max-width: 599px) {
  .etapes--verticales { gap: 16px; }
  .etapes--verticales::before, .etapes--verticales li::after { display: none; }
  .etapes--verticales li { margin-left: 0; padding: 22px 20px 24px; }
  .etapes--verticales li::before { position: static; width: 44px; height: 44px; border-radius: 13px; font-size: .95rem; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px rgba(22, 73, 201, .7); }
  .etapes--verticales h2 { font-size: 1.22rem; }
}

/* 14. Avis (remarque 4 du 12.10.2026): bandeau bleu nuit à halos, note en grand, cartes blanches en relief ------------- */
.avis { position: relative; isolation: isolate; overflow: hidden; color: var(--sur-nuit); background: radial-gradient(820px 420px at 8% -8%, rgba(30, 94, 255, .34), transparent 64%), radial-gradient(760px 440px at 100% 108%, rgba(94, 184, 255, .2), transparent 62%), linear-gradient(180deg, var(--nuit) 0%, #0b2552 100%); }
.avis::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 72%); }
.avis h2 { color: #fff; }
.avis .surtitre { color: var(--ciel); }
.avis__note { margin: 0 0 18px; }
.avis__resume { margin: 4px 0 0; font-size: 1.05rem; color: var(--sur-nuit); }
.avis__resume strong { color: #fff; }
.avis__badge { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 9px 20px 9px 16px; font-weight: 700; font-family: var(--titres); font-size: 1.15rem; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 32px -18px rgba(0, 0, 0, .7); }
.avis__badge .etoiles { font-size: 1.05rem; letter-spacing: 2px; }
.avis__grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.avis__carte { margin: 0; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 26px; border-radius: 22px; color: var(--texte); background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .12), 0 36px 64px -32px rgba(0, 0, 0, .75); transition: transform var(--transition), box-shadow var(--transition); }
.avis__carte::after { content: ''; position: absolute; left: 28px; top: 0; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.avis__carte:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(0, 0, 0, .14), 0 44px 72px -30px rgba(0, 0, 0, .8); }
/* Guillemet dans une pastille du dégradé de la charte, en haut à droite. */
.avis__carte::before { content: '\201C'; position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 44px; height: 44px; padding-top: 16px; border-radius: 14px; font: 800 2.4rem/1 var(--titres); color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 8px rgba(8, 26, 58, .22), 0 10px 20px -10px rgba(22, 73, 201, .7); }
.avis__etoiles { color: var(--soleil); letter-spacing: 3px; margin: 0; font-size: 1.15rem; padding-right: 56px; }
.avis__texte { flex: 1; margin: 0; position: relative; font-size: 1rem; line-height: 1.65; }
.avis__auteur { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bordure-douce); line-height: 1.3; }
.avis__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: 700 1rem/1 var(--titres); color: #fff; background: var(--degrade-pastille); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d5e3f8; }
.avis__auteur strong { display: block; font-family: var(--titres); font-size: .97rem; color: var(--nuit); }
.avis__meta { display: block; font-size: .85rem; color: var(--texte-doux); }
.avis__lien { margin: 36px 0 0; text-align: center; }

/* 15. Tarifs et offres ---------------------------------------------------------------- */
/* Grille d'une catégorie sur sa page (voiture, moto, remorque…): dans une carte, comme sur la page Tarifs. */
.deux-colonnes > div > .tarifs { background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 8px 24px; margin: 8px 0 16px; box-shadow: var(--ombre-carte); }
.tarifs__titre { margin-top: 0; margin-bottom: 12px; font-size: 1.2rem; }
.tarifs__table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.tarifs__table th, .tarifs__table td { padding: 13px 0; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top; }
.tarifs__table tr:last-child th, .tarifs__table tr:last-child td { border-bottom: 0; }
.tarifs__table th { font-weight: 600; }
.tarifs__table th small { display: block; color: var(--texte-doux); font-weight: 400; font-size: .85rem; }
.tarifs__table th { text-wrap: balance; }
.tarifs__table td { text-align: right; white-space: nowrap; font-weight: 800; color: var(--nuit); padding-left: 16px; font-family: var(--titres); letter-spacing: -.01em; }
.tarifs__table tr:hover th, .tarifs__table tr:hover td { color: var(--bleu-fonce); }
.grille-tarifs { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.carte { background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre-carte); }
.carte--douce { background: linear-gradient(180deg, var(--blanc-froid), #edf3fc); border: 1px solid var(--bordure-douce); }
.carte--accent, .grille-tarifs .carte { position: relative; }
.carte--accent::before, .grille-tarifs .carte::before { content: ''; position: absolute; left: 28px; top: 0; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.grille-tarifs .carte { transition: transform var(--transition), box-shadow var(--transition); }
.grille-tarifs .carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte-survol); }
.offres-grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.offre { position: relative; background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition); }
.offre:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte-survol); }
.offre--pack { border: 2px solid var(--bleu); background: linear-gradient(180deg, #fff, var(--ciel-pale)); box-shadow: 0 2px 6px rgba(8, 26, 58, .06), 0 30px 60px -30px rgba(22, 73, 201, .55); }
.offre__badge { position: absolute; top: -14px; left: 24px; margin: 0; background: linear-gradient(145deg, var(--bleu) 0%, var(--bleu-fonce) 45%, var(--marine) 100%); color: #fff; font-size: .75rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--titres); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 18px -8px rgba(22, 73, 201, .7); }
.offre__titre { margin: 0; font-size: 1.3rem; }
.offre__sous, .offre__texte { margin: 0; color: var(--texte-doux); font-size: .97rem; }
.offre__contenu { display: flex; align-items: flex-start; gap: 10px; flex: 1; margin: 6px 0 0; font-size: .95rem; font-weight: 600; color: var(--nuit); }
.offre__contenu .icone { box-sizing: content-box; width: 16px; height: 16px; padding: 7px; border-radius: 10px; color: var(--bleu); background: var(--ciel-pale); flex: none; }
.offre__prix { margin: 12px 0 0; font-size: 1rem; color: var(--texte-doux); }
.offre__prix--pousse { flex: 1; }
.offre__prix__duree { white-space: nowrap; }
.offre__prix strong { white-space: nowrap; font-size: 2.1rem; color: var(--nuit); font-family: var(--titres); letter-spacing: -.03em; margin-right: 6px; }
.offre__prix small { display: block; color: var(--texte-doux); }
.offre form { margin-top: 8px; }
.offre .bouton { width: 100%; }

/* 16. FAQ -----------------------------------------------------------------------------
   Refonte du 12.10.2026 (remarque de David sur /marche-a-suivre, « fades et pas premiums »), toutes les pages: section à
   halos bleus et trame de points, questions en cartes en relief, numéro en pastille (pleine quand la question est ouverte),
   signe +/- en pastille ronde, liseré bleu sur la carte ouverte, réponse qui s'ouvre en glissant (hauteur animée là où le
   navigateur le permet, sinon fondu), carte bleu nuit « Une autre question? ». Rien ne bouge si l'utilisateur réduit les animations. */
.section--faq { position: relative; isolation: isolate; overflow: hidden; background: var(--blanc); border-block: 1px solid var(--bordure-douce); }
.faq-liste { display: grid; gap: 14px; }
.faq { position: relative; border: 1px solid var(--bordure-douce); border-radius: 18px; background: var(--fond-carte); box-shadow: var(--ombre-carte); transition: box-shadow var(--transition), border-color var(--transition); }
.faq::before { content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--bleu), var(--ciel)); opacity: 0; transition: opacity var(--transition); }
.faq:hover { border-color: #cddbf1; box-shadow: var(--ombre-carte-survol); }
.faq[open] { border-color: #c9daf5; box-shadow: var(--ombre-carte-survol); }
.faq[open]::before { opacity: 1; }
.faq summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: 18px; font-family: var(--titres); font-weight: 700; font-size: 1.07rem; line-height: 1.35; letter-spacing: -.012em; color: var(--nuit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 18px; }
.faq__numero { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-size: .9rem; letter-spacing: -.02em; color: var(--bleu-fonce); background: linear-gradient(180deg, #f3f8ff, var(--ciel-pale)); border: 1px solid #cfe0fb; transition: color var(--transition), box-shadow var(--transition), transform var(--transition); }
.faq[open] .faq__numero { color: #fff; border-color: transparent; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 8px rgba(8, 26, 58, .22), 0 10px 20px -10px rgba(22, 73, 201, .7); }
.faq:hover .faq__numero { transform: translateY(-2px); }
.faq__signe { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #cfe0fb; box-shadow: 0 1px 2px rgba(8, 26, 58, .06); transition: background-color var(--transition), border-color var(--transition), transform var(--transition); }
.faq__signe::before, .faq__signe::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--bleu); transition: transform var(--transition), background-color var(--transition); }
.faq__signe::after { transform: rotate(90deg); }
.faq:hover .faq__signe { border-color: var(--bleu); }
.faq[open] .faq__signe { background: var(--nuit); border-color: var(--nuit); transform: rotate(180deg); }
.faq[open] .faq__signe::before, .faq[open] .faq__signe::after { background: #fff; }
.faq[open] .faq__signe::after { transform: rotate(180deg); }
.faq__reponse { padding: 0 28px 24px 82px; }
.faq__reponse p { margin: 0; padding-top: 16px; border-top: 1px solid var(--bordure-douce); color: var(--texte-doux); font-size: 1rem; line-height: 1.7; }
.faq__reponse a { color: var(--bleu); font-weight: 600; }
@keyframes faq-ouvrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq[open] .faq__reponse { animation: faq-ouvrir .32s cubic-bezier(.2, .7, .2, 1) both; }
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq::details-content { block-size: 0; overflow: hidden; transition: block-size .32s cubic-bezier(.2, .7, .2, 1), content-visibility .32s allow-discrete; }
  .faq[open]::details-content { block-size: auto; }
}
.faq-aide { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 28px; padding: 22px 24px; border-radius: 20px; color: var(--sur-nuit); background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 60%, var(--bleu-fonce) 100%); box-shadow: 0 2px 6px rgba(8, 26, 58, .15), 0 30px 60px -34px rgba(8, 26, 58, .7); }
.faq-aide::after { content: ''; position: absolute; z-index: -1; width: 360px; height: 360px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(94, 184, 255, .32), transparent); pointer-events: none; }
.faq-aide p { margin: 0; color: var(--sur-nuit-doux); font-size: .97rem; line-height: 1.5; }
.faq-aide .faq-aide__titre { color: #fff; font-family: var(--titres); font-weight: 700; font-size: 1.15rem; letter-spacing: -.015em; margin-bottom: 2px; }
@media (max-width: 599px) {
  /* Téléphone: le numéro laisse sa place à la question (deux lignes au plus); le liseré et le signe restent. */
  .faq summary { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 15px 14px 15px 16px; font-size: .95rem; letter-spacing: -.016em; }
  .faq__numero { display: none; }
  .faq__signe { width: 30px; height: 30px; }
  .faq__signe::before, .faq__signe::after { width: 12px; margin-left: -6px; }
  .faq__reponse { padding: 0 16px 20px; }
  .faq-aide { grid-template-columns: auto minmax(0, 1fr); padding: 20px; gap: 14px 16px; }
  .faq-aide .bouton { grid-column: 1 / -1; justify-content: center; }
}
/* Très petits écrans (360 px): les questions les plus longues tiennent encore sur deux lignes. */
@media (max-width: 379px) { .faq summary { font-size: .9rem; padding-left: 14px; } }

/* 17. Appel à l'action (remarque 27): un panneau centré, contrasté, avec la preuve sociale et trois façons d'agir ------- */
.cta { padding: clamp(48px, 6vw, 88px) 0; background: var(--blanc); }
/* Un bandeau entre deux sections blanches ne double pas les marges (Bons cadeaux, accueil). */
.cta + .section:not(.section--douce):not(.section--nuit):not(.avis) { padding-top: 0; }
.section:not(.section--douce):not(.section--nuit):not(.avis) + .cta { padding-top: 0; }
.cta__panneau { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 28px; padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px); color: #fff; background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 55%, var(--bleu-fonce) 100%); box-shadow: 0 2px 6px rgba(8, 26, 58, .15), 0 44px 80px -40px rgba(8, 26, 58, .7); }
.cta__panneau::before, .cta__panneau::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.cta__panneau::before { width: 560px; height: 560px; right: -180px; top: -260px; background: radial-gradient(closest-side, rgba(94, 184, 255, .35), transparent); }
.cta__panneau::after { width: 480px; height: 480px; left: -200px; bottom: -280px; background: radial-gradient(closest-side, rgba(30, 94, 255, .45), transparent); }
.cta__avis { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .88rem; font-weight: 600; color: var(--sur-nuit); }
.cta__titre { color: #fff; margin: 0 auto .3em; font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 22ch; }
.cta__sous { color: var(--sur-nuit); max-width: 60ch; margin: 0 auto 30px; font-size: 1.12rem; text-wrap: balance; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* 18. Formulaires ------------------------------------------------------------------------ */
.formulaire-bloc { background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: 24px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--ombre-douce); }
.formulaire-bloc h2 { font-size: 1.6rem; }
.formulaire-bloc__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--bordure-douce); }
.formulaire-bloc__tete h2 { margin: 2px 0 6px; }
.formulaire-bloc__tete p { margin: 0; color: var(--texte-doux); }
.formulaire-bloc > p { color: var(--texte-doux); }
.formulaire { display: grid; gap: 18px; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: .95rem; color: var(--nuit); }
.champ small { color: var(--texte-doux); font-weight: 400; }
.champ input, .champ select, .champ textarea { font: inherit; padding: 13px 15px; border: 1px solid #d3deef; border-radius: var(--rayon-petit); background: #fff; width: 100%; color: var(--texte); box-shadow: inset 0 1px 2px rgba(8, 26, 58, .04); transition: border-color var(--transition), box-shadow var(--transition); }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: #b9cbe6; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(30, 94, 255, .14); }
.champ input:disabled { background: var(--blanc-froid); color: var(--texte-doux); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; cursor: pointer; }
.champ--piege { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.champ--groupe { border: 0; padding: 0; margin: 0; }
.champ--groupe legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 10px; color: var(--nuit); }
.note--pousse { flex: 1; }
.deux-champs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.deux-champs--npa { grid-template-columns: 110px 1fr; }
.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--bleu); flex: none; }
.erreur { color: var(--rouge); font-weight: 600; font-size: .9rem; }
.groupe { border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 20px 22px 24px; margin: 0; display: grid; gap: 16px; background: #fff; box-shadow: 0 1px 2px rgba(8, 26, 58, .04), 0 10px 24px -20px rgba(8, 26, 58, .3); }
.groupe legend { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nuit); padding: 0 10px; font-family: var(--titres); }
.groupe legend::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--degrade-pastille); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces label { position: relative; cursor: pointer; }
.puces input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puces span { display: inline-block; padding: 9px 15px; border: 1px solid #cfe0fb; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--bleu-fonce); background: linear-gradient(180deg, #f3f8ff, var(--ciel-pale)); transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition); }
.puces label:hover span { border-color: var(--bleu); }
.puces input:checked + span { background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); border-color: transparent; color: #fff; text-shadow: 0 1px 1px rgba(8, 26, 58, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 16px -10px rgba(22, 73, 201, .7); }
.puces input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.flash { padding: 14px 18px; border-radius: var(--rayon-petit); margin: 16px 0; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.flash .icone { margin-top: 2px; }
.flash--succes { background: #e6f7ec; color: #14532d; border: 1px solid #a7e3bd; }
.flash--succes a { color: #14532d; }
.flash--erreur { background: #fdecec; color: #7f1d1d; border: 1px solid #f5b5b5; }
.encart { background: linear-gradient(160deg, #f1f7ff, var(--ciel-pale)); border: 1px solid #d5e5fb; border-radius: var(--rayon); padding: 26px; margin-top: 28px; display: grid; gap: 12px; justify-items: start; }
/* Deux colonnes (texte + carte « Bon à savoir », formulaire + coordonnées): une seule colonne sous 900 px, le même seuil que le
   héros et le bandeau vidéos; à 768 px, deux colonnes de 350 px serraient le tableau des tarifs et les champs du formulaire. */
.deux-colonnes { display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.deux-colonnes--contact { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
@media (max-width: 899px) { .deux-colonnes, .deux-colonnes--contact { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .deux-colonnes > aside, .grille-2 > aside { position: sticky; top: calc(var(--entete-h) + 24px); } }
.coordonnees p { margin-bottom: .7em; }
.coordonnees h2 { margin-top: 0; }
.coordonnees h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); margin: 18px 0 6px; }
.coordonnees__ligne { display: flex; gap: 12px; align-items: flex-start; }
.coordonnees__ligne .icone { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 12px; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -8px rgba(22, 73, 201, .7); margin-top: -4px; }

/* 19. Fenêtre du formulaire (remarques 7 et 28): plein écran sur mobile, centrée sur ordinateur --------------------- */
/* Remarque 7 du 12.10.2026: la boîte a la hauteur de l'écran au plus; l'en-tête (pastille, titre, texte, bouton Fermer) reste
   en place, opaque, et seul le corps défile dessous. */
.fenetre { padding: 24px; border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--texte); overflow: hidden; }
.fenetre[open] { display: grid; place-items: center; }
.fenetre::backdrop { background: rgba(8, 26, 58, .66); backdrop-filter: blur(5px); }
.fenetre[open]::backdrop { animation: fondu .2s ease-out both; }
.fenetre__boite { display: flex; flex-direction: column; width: min(780px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); border-radius: 24px; box-shadow: 0 2px 6px rgba(8, 26, 58, .2), 0 60px 120px -40px rgba(0, 0, 0, .6); overflow: clip; animation: fenetre-entree .22s cubic-bezier(.2, .7, .2, 1) both; }
.fenetre__entete { position: relative; z-index: 1; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 24px 24px 20px 28px; background: linear-gradient(180deg, #f2f7ff 0%, #fbfdff 100%); background-color: #f6faff; border-bottom: 1px solid var(--bordure-douce); box-shadow: 0 10px 20px -18px rgba(8, 26, 58, .45); }
.fenetre__entete h2 { font-size: 1.4rem; margin: 2px 0 6px; }
.fenetre__entete h2:focus { outline: none; }
.fenetre__entete p { margin: 0; color: var(--texte-doux); font-size: .95rem; line-height: 1.5; }
.fenetre__fermer { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; color: #fff; background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); cursor: pointer; box-shadow: var(--ombre-bouton); transition: transform var(--transition), filter var(--transition), box-shadow var(--transition); }
.fenetre__fermer:hover { filter: brightness(.94) saturate(1.08); box-shadow: var(--ombre-bouton-survol); transform: rotate(90deg); }
.fenetre__fermer .icone { width: 22px; height: 22px; }
.fenetre__corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 28px 30px; }
.formulaire-bloc--fenetre { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.formulaire-bloc--fenetre .flash--succes { margin: 4px 0; padding: 22px; font-size: 1.05rem; }
.formulaire-bloc--fenetre .flash--succes:focus { outline: none; }
@keyframes fenetre-entree { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599px) {
  .fenetre { padding: 0; }
  .fenetre__boite { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .fenetre__entete { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 16px 14px; }
  .fenetre__entete .pastille { display: none; }
  .fenetre__entete h2 { font-size: 1.2rem; }
  .fenetre__entete p { font-size: .9rem; }
  /* Remarque 10 du 12.10.2026: le formulaire prend la même largeur que le contenu des pages (16 px de marge); la règle
     .formulaire-bloc du téléphone ajoutait 18 px de chaque côté dans la fenêtre. */
  .fenetre__corps { padding: 20px 16px 32px; }
  .formulaire-bloc.formulaire-bloc--fenetre { padding: 0; border-radius: 0; }
  .fenetre .formulaire__actions .bouton { width: 100%; }
}

/* 20. Listes et éléments divers ---------------------------------------------------------- */
.liste-coches { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.liste-coches li { padding-left: 34px; position: relative; }
.liste-coches li::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, #eaf3ff, var(--ciel-pale)); border: 1px solid #cfe2fb; }
.liste-coches li::after { content: ''; position: absolute; left: 7px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }
.section--nuit .liste-coches li::before { background: rgba(94, 184, 255, .16); border-color: rgba(94, 184, 255, .3); }
.section--nuit .liste-coches li::after { border-color: var(--ciel); }
.etiquette { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; line-height: 1.3; margin: 0; }
.etiquette .icone { width: 15px; height: 15px; }
.etiquette--ok { background: #e6f7ec; color: #14532d; }
.etiquette--expire { background: #fdecec; color: #7f1d1d; }
.etiquette--neutre { background: var(--ciel-pale); color: var(--nuit); }
.tableau-defilant { overflow-x: auto; background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: var(--rayon); padding: 8px 20px; box-shadow: var(--ombre-carte); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
@media (max-width: 599px) {
  .tableau--empile thead { display: none; }
  .tableau--empile, .tableau--empile tbody { display: block; }
  .tableau--empile tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
  .tableau--empile tr:last-child { border-bottom: 0; }
  .tableau--empile td { display: block; border: 0; padding: 4px 0; }
  .tableau--empile td::before { content: attr(data-label); display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
}
.image-cadre { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--ombre); }
.image-cadre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--transition-longue); }
.image-cadre:hover img { transform: scale(1.02); }
.image-cadre--carre img { aspect-ratio: 1; }
.image-cadre--portrait img { aspect-ratio: 4 / 5; }
.fil { font-size: .88rem; color: var(--sur-nuit-doux); margin-bottom: 12px; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil li + li::before { content: '›'; margin-right: 6px; opacity: .6; }
.fil a { color: var(--sur-nuit-doux); text-decoration: none; }
.fil a:hover { color: #fff; }
/* Zone desservie (remarque 26): localités en liste (lisible par les moteurs), centrées, sur un fond de points façon carte. */
.section--zone { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(36px, 4.5vw, 56px); }
/* Remarque 5: moins d'espace entre la zone et le panneau d'appel à l'action qui suit. */
.section--zone + .cta { padding-top: 0; }
.section--zone::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(30, 94, 255, .16) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 55%, #000 0%, transparent 75%); }
.zone { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 920px; }
.zone li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 12px; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: 999px; font-family: var(--titres); font-weight: 600; font-size: .95rem; color: var(--nuit); box-shadow: var(--ombre-carte); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.zone li:hover { transform: translateY(-2px); border-color: #b9cfef; box-shadow: var(--ombre-carte-survol); }
.zone .icone { width: 18px; height: 18px; color: var(--bleu); }
/* Bandeau « vue comme l'élève »: bleu nuit (13.10.2026, plus de jaune en fond nulle part). */
.bandeau-admin { position: sticky; top: 0; z-index: 70; background: var(--nuit); color: #fff; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; font-weight: 700; }
.bandeau-admin button { background: #fff; color: var(--nuit); border: 0; border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer; }

/* 21. Pied de page ------------------------------------------------------------------------ */
.pied { background: radial-gradient(900px 400px at 100% 0%, rgba(30, 94, 255, .16), transparent 60%), var(--nuit); color: var(--sur-nuit); padding: clamp(56px, 7vw, 84px) 0 28px; }
.pied a { color: #fff; text-decoration: none; transition: color var(--transition); }
.pied a:hover { color: var(--ciel); }
.pied__grille { display: grid; gap: 36px; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; }
@media (max-width: 899px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
.pied__marque p { color: var(--sur-nuit-doux); font-size: .95rem; max-width: 36ch; }
.pied__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: 8px 14px; font-size: .88rem; margin-top: 8px; }
/* Titres des colonnes: petit trait bleu ciel dessous (remarque 33). */
.pied__titre { position: relative; color: #fff; font-family: var(--titres); font-weight: 700; margin: 0 0 18px; padding-bottom: 12px; font-size: 1rem; }
.pied__titre::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--ciel); }
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
.pied__liste a { display: inline-block; transition: color var(--transition), transform var(--transition); }
.pied__liste a:hover { transform: translateX(3px); }
.pied__contact { display: grid; gap: 12px; font-size: .95rem; }
.pied__contact > div { display: flex; gap: 12px; align-items: center; }
.pied__contact .icone { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 10px; color: var(--ciel); background: rgba(94, 184, 255, .12); border: 1px solid rgba(94, 184, 255, .22); }
/* Adresse (remarque 31): rue et localité sur une ligne (bouton Itinéraire retiré, remarque 6 du 12.10.2026). */
.pied__rue { display: block; color: #fff; font-weight: 600; }
.pied__social { display: flex; gap: 10px; margin-top: 18px; }
.pied__social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; transition: transform var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); }
.pied__social .icone { width: 19px; height: 19px; }
.pied__social a:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; transform: translateY(-2px); }
.pied__social a[aria-label="WhatsApp"]:hover { background: var(--wa); border-color: var(--wa); color: var(--wa-texte); }
.pied__legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 48px; padding-top: 22px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; color: var(--sur-nuit-doux); }
.pied__legal a { color: var(--sur-nuit); }
/* La bulle WhatsApp flottante ne cache plus « Site par DLE WebDesign » (remarque 30). */
@media (min-width: 900px) { .pied { padding-bottom: 100px; } }

/* 22. Barre d'action mobile et bulle WhatsApp -------------------------------------------------- */
.barre-mobile { display: none; }
.whatsapp-flottant { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; color: var(--wa-texte); background-color: var(--wa); background-image: linear-gradient(180deg, var(--wa-clair), var(--wa-fonce)); padding: 13px 20px 13px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 16px 32px -12px rgba(6, 43, 23, .55); font-family: var(--titres); transition: transform var(--transition), box-shadow var(--transition); }
.whatsapp-flottant .icone { width: 22px; height: 22px; }
.whatsapp-flottant:hover { color: var(--wa-texte); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 36px -12px rgba(6, 43, 23, .6); }
@media (max-width: 899px) {
  .whatsapp-flottant { display: none; }
  body { padding-bottom: 96px; }
  .barre-mobile { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; padding: 6px; border-radius: 20px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(8, 26, 58, .08); box-shadow: 0 2px 6px rgba(8, 26, 58, .08), 0 20px 40px -16px rgba(8, 26, 58, .45); }
  .barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 8px 10px; border-radius: 14px; font-weight: 650; font-size: .92rem; line-height: 1.1; text-decoration: none; font-family: var(--titres); transition: transform var(--transition); }
  .barre-mobile a:active { transform: scale(.97); }
  .barre-mobile .icone { width: 20px; height: 20px; }
  .barre-mobile__tel { background: var(--ciel-voile); color: var(--nuit); border: 1px solid #d9e7fb; }
  .barre-mobile__tel .icone { color: var(--bleu); }
  .barre-mobile__wa { background: var(--wa); color: var(--wa-texte); }
  .barre-mobile__cta { background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); color: #fff; text-shadow: 0 1px 1px rgba(8, 26, 58, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 8px 16px -8px rgba(22, 73, 201, .75); }
  .barre-mobile a:hover { color: inherit; }
  .barre-mobile__cta:hover { color: #fff; }
  .page-compte .barre-mobile, .page-compte .whatsapp-flottant { display: none; }
  .page-compte { padding-bottom: 0; }
}
/* Téléphone: icône au-dessus du libellé, comme une barre d'onglets. */
@media (max-width: 599px) {
  .barre-mobile a { flex-direction: column; gap: 4px; min-height: 54px; padding: 7px 4px; font-size: .78rem; }
}

/* 23. Espace élève, bibliothèque vidéo et lecteur (12.10.2026) ------------------------------------------------------------ */
/* Les pages de l'espace élève ont le héros de l'accueil; les formulaires (connexion, mot de passe) prennent la place de la
   carte de réservation, en haut à droite sur ordinateur, sous le texte sur téléphone. */
.hero__carte--formulaire .hero__carte__tete { margin-bottom: 18px; }
.hero__carte--formulaire .formulaire { gap: 16px; }
.hero__carte--formulaire .flash { margin: 0 0 16px; }
.hero__carte--formulaire .bouton--bloc { margin-top: 4px; }
.hero__carte__lien { margin: 0; text-align: center; font-size: .93rem; }
.section--compte { padding-top: clamp(40px, 5vw, 64px); }
/* Menu de l'espace élève: onglets en pastilles, bleu clair au repos, dégradé des boutons pour l'onglet actif. */
.compte-menu ul { list-style: none; margin: 0 0 clamp(32px, 4vw, 48px); padding: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: 18px; box-shadow: var(--ombre-carte); }
.compte-menu a, .compte-menu .lien-bouton { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border-radius: 12px; text-decoration: none; color: var(--bleu-fonce); font-family: var(--titres); font-size: .93rem; font-weight: 650; line-height: 1.2; transition: background-color var(--transition), color var(--transition), box-shadow var(--transition); }
.compte-menu a:hover, .compte-menu .lien-bouton:hover { background: var(--ciel-pale); color: var(--bleu-fonce); }
.compte-menu a.est-actif { color: #fff; background-color: var(--bleu-fonce); background-image: var(--degrade-bouton); text-shadow: 0 1px 1px rgba(8, 26, 58, .25); box-shadow: var(--ombre-bouton); }
.compte-menu .lien-bouton { text-decoration: none; color: var(--texte-doux); }
.compte-menu__fin { margin-left: auto; }
.lecteur-mise + .compte-menu ul, .tableau-defilant + .compte-menu ul { margin: 40px 0 0; }
.conteneur--formulaire-large { max-width: 820px; }
.h3 { font-size: 1.25rem; margin-top: .5em; }
.h4 { font-size: 1rem; }

/* Bibliothèque « Mes vidéos »: un bloc par module (en-tête: titre, accès, location), puis une grille de vignettes
   (4 colonnes sur ordinateur, 3 puis 2 sur tablette, 1 sur téléphone). */
.bibliotheque { margin: 0 0 clamp(36px, 5vw, 56px); }
.bibliotheque:last-child { margin-bottom: 0; }
.bibliotheque__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--bordure); }
.bibliotheque__titres { min-width: 0; }
.bibliotheque__titres .surtitre { margin-bottom: 8px; }
.bibliotheque__entete :is(h2, .h2) { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
/* Page publique des modules: les miniatures restent nettes (vitrine), le cadenas dit qu'il faut louer. */
.bibliotheque--vitrine .vignette--verrou .vignette__image img { filter: none; }
.bibliotheque--vitrine .vignette--verrou .vignette__titre { color: var(--nuit); }
.bibliotheque__sous { margin: 6px 0 0; color: var(--texte-doux); }
.bibliotheque__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bibliotheque__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .bibliotheque__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .bibliotheque__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.vignette { min-width: 0; }
.vignette__lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--texte); background: var(--fond-carte); border: 1px solid var(--bordure-douce); border-radius: 18px; overflow: hidden; box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
a.vignette__lien:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte-survol); border-color: #cddbf1; color: var(--texte); }
.vignette__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(120% 120% at 100% 0%, var(--nuit-2), var(--nuit)); }
.vignette__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--transition-longue); }
a.vignette__lien:hover .vignette__image img { transform: scale(1.05); }
.vignette__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 58, 0) 45%, rgba(8, 26, 58, .55) 100%); pointer-events: none; }
.vignette__numero { position: absolute; z-index: 1; left: 10px; top: 10px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; font: 700 .82rem/1 var(--titres); color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.vignette__duree { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 8px; font: 600 .78rem/1.3 var(--texte-police); color: #fff; background: rgba(8, 26, 58, .82); }
.vignette__bouton { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 6px rgba(255, 255, 255, .2), 0 14px 26px -10px rgba(0, 0, 0, .6); transition: transform var(--transition); }
.vignette__bouton .icone { width: 22px; height: 22px; margin-left: 2px; fill: currentColor; stroke: none; }
a.vignette__lien:hover .vignette__bouton { transform: scale(1.08); }
.vignette__corps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.vignette__titre { font: 700 1rem/1.3 var(--titres); letter-spacing: -.01em; color: var(--nuit); }
.vignette__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; font-size: .82rem; }
.vignette__meta:empty { display: none; }
.vignette__badge { padding: 3px 10px; border-radius: 999px; font-weight: 700; color: var(--nuit); background: var(--ciel-pale); }
.vignette__badge--gratuite { color: #14532d; background: #e6f7ec; }
.vignette__etat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--texte-doux); }
.vignette__etat .icone { width: 14px; height: 14px; }
.vignette__etat--vue { color: var(--vert-fonce); }
.vignette__etat--en-cours { color: var(--bleu-fonce); }
.vignette--vue .vignette__image::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
/* Module non loué ou expiré: miniature voilée, cadenas à la place du bouton lecture; la vignette mène à la location. */
.vignette--verrou .vignette__image img { filter: grayscale(.65) brightness(.62); }
.vignette--verrou .vignette__bouton { background: rgba(8, 26, 58, .82); box-shadow: 0 0 0 6px rgba(255, 255, 255, .14); }
.vignette--verrou .vignette__bouton .icone { margin: 0; fill: none; stroke: currentColor; }
.vignette--verrou .vignette__titre { color: var(--texte-doux); }
.vignette--en-cours .vignette__lien { border: 2px solid var(--bleu); box-shadow: 0 0 0 4px rgba(30, 94, 255, .12), var(--ombre-carte); }

/* Lecteur: la vidéo et, à côté (ordinateur) ou dessous (tablette, téléphone), les vignettes du module. */
.lecteur-mise { display: grid; gap: 28px 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .lecteur-mise { grid-template-columns: minmax(0, 1fr) 340px; } .lecteur-mise__liste { position: sticky; top: calc(var(--entete-h) + 24px); max-height: calc(100vh - var(--entete-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 6px 4px; margin: -4px -6px -6px -4px; } }
.lecteur-mise__titre { font-size: 1.25rem; margin: 0 0 16px; }
.lecteur__note { margin: 16px 0 0; }
@media (min-width: 1100px) {
  .bibliotheque__grille--liste { grid-template-columns: 1fr; gap: 12px; }
  .bibliotheque__grille--liste .vignette__lien { display: grid; grid-template-columns: 128px minmax(0, 1fr); border-radius: 14px; }
  .bibliotheque__grille--liste .vignette__image { aspect-ratio: auto; min-height: 76px; }
  .bibliotheque__grille--liste .vignette__bouton { width: 34px; height: 34px; margin: -17px 0 0 -17px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
  .bibliotheque__grille--liste .vignette__bouton .icone { width: 15px; height: 15px; }
  .bibliotheque__grille--liste .vignette__numero { left: 6px; top: 6px; min-width: 24px; height: 24px; font-size: .74rem; border-radius: 7px; }
  .bibliotheque__grille--liste .vignette__duree { right: 6px; bottom: 6px; font-size: .72rem; padding: 2px 6px; }
  .bibliotheque__grille--liste .vignette__corps { padding: 10px 12px; gap: 4px; }
  .bibliotheque__grille--liste .vignette__titre { font-size: .92rem; }
}
/* Vignettes dessinées (App\Videos\Vignette, 12.10.2026): numéro, titre et durée sont dans l'image. Le bouton devient une
   petite pastille en haut à droite, où l'image reste vide (lecture, ou cadenas si le module n'est pas loué); la durée
   passe aussi sous le titre, en texte. */
.vignette__image picture { display: block; width: 100%; height: 100%; }
.vignette__image--dessinee::after { content: none; }
.vignette__image--dessinee .vignette__bouton { left: auto; top: 10px; right: 10px; width: 32px; height: 32px; margin: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 16px -8px rgba(0, 0, 0, .6); }
.vignette__image--dessinee .vignette__bouton .icone { width: 14px; height: 14px; margin-left: 1px; }
.vignette--verrou .vignette__image--dessinee .vignette__bouton .icone { margin: 0; }
.vignette__temps { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--texte-doux); }
.vignette__temps .icone { width: 14px; height: 14px; color: var(--bleu-fonce); }
@media (max-width: 599px) {
  .vignette__image--dessinee .vignette__bouton { top: 6px; right: 6px; width: 24px; height: 24px; }
  .vignette__image--dessinee .vignette__bouton .icone { width: 11px; height: 11px; }
}
/* Liste à côté du lecteur (image de 128 px): pas de pastille, l'état est écrit sous le titre. */
@media (min-width: 1100px) { .bibliotheque__grille--liste .vignette__image--dessinee .vignette__bouton { display: none; } }
.lecteur-cadre { position: relative; background: #000; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 9; max-height: 80vh; box-shadow: var(--ombre); }
/* Vidéo verticale (filmée au téléphone): le cadre prend le ratio de la vidéo (style en ligne posé par le gabarit) et reste centré, au lieu d'un 16/9 à bandes noires. */
.lecteur-cadre--portrait { max-width: min(100%, calc(80vh * 9 / 16)); margin-inline: auto; }
.lecteur { width: 100%; height: 100%; display: block; background: #000; }
.filigrane { position: absolute; top: 10%; left: 10%; margin: 0; color: rgba(255, 255, 255, .35); font-size: .85rem; pointer-events: none; user-select: none; transition: top 2s, left 2s; text-shadow: 0 0 4px rgba(0, 0, 0, .5); }
.lecteur__message { position: absolute; inset: auto 0 0; margin: 0; padding: 14px 18px; background: rgba(8, 26, 58, .92); color: #fff; }
.lecteur__message a { color: #fff; }

/* 24. Version mobile (390 et 360 px): rythme vertical, titres, cartes et boutons repensés --------------------------- */
@media (max-width: 599px) {
  :root { --entete-h: 66px; }
  body { font-size: 1rem; line-height: 1.6; }
  .conteneur { width: min(100% - 32px, var(--largeur)); }
  .section { padding: 56px 0; }
  .section--serree { padding: 28px 0; }
  h1 { font-size: clamp(2rem, 8.6vw, 2.35rem); }
  /* Remarque 11: titres de section plus grands sur téléphone. */
  h2 { font-size: clamp(1.75rem, 7.8vw, 2.05rem); letter-spacing: -.03em; }
  /* Remarque 2 de /conduite-moto (12.10.2026): titre court plus grand (deux lignes au plus, contrôlé à 360 et 390 px). */
  .titre-fort { font-size: clamp(2rem, 9vw, 2.35rem); }
  h3 { font-size: 1.15rem; }
  .section__tete { margin-bottom: 28px; }
  .section__intro { font-size: 1rem; }
  .surtitre { font-size: .7rem; letter-spacing: .12em; gap: 10px; margin-bottom: 12px; }
  .surtitre::before, .section__tete .surtitre::after { width: 18px; }
  .logo-image { height: 36px; }
  .burger { width: 44px; height: 44px; }

  /* Héros (remarques 1 à 3 du 12.10.2026): plus d'air en haut et en bas, sur-titre sur une ligne, deux boutons pleine largeur,
     avantages en tuiles égales (la note Google sur toute la largeur, puis trois tuiles). */
  .hero__contenu { padding: 64px 0 52px; gap: 30px; }
  .hero .surtitre { font-size: min(.7rem, 2.86vw); letter-spacing: .075em; gap: 8px; white-space: nowrap; }
  /* Sur-titre de plus de 43 signes (accueil et « sobre nós » en portugais): même ligne unique, un peu plus petit, sinon il débordait. */
  .hero .surtitre--long { font-size: min(.7rem, 2.5vw); }
  .hero h1 { margin-bottom: .38em; }
  .hero__texte { font-size: 1rem; margin-bottom: 1.5em; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero__actions .bouton { width: 100%; }
  .hero__preuves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; padding-top: 0; border-top: 0; font-size: .78rem; line-height: 1.3; }
  .hero__preuves > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 6px 12px; text-align: center; white-space: normal; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hero__preuves .icone { width: 20px; height: 20px; }
  /* Remarque 4 de l'accueil (12.10.2026): la note Google du héros disparaît sur téléphone, restent les trois tuiles. */
  .hero__preuves .hero__preuves__note { display: none; }
  .hero .fil { top: 20px; }
  /* La carte de réservation du héros fait double emploi avec la barre d'action fixe en bas de l'écran. */
  .hero__carte { display: none; }
  /* Espace élève: le formulaire, lui, reste affiché (il remplace la carte). */
  .hero--formulaire .hero__carte { display: block; padding: 22px 18px; border-radius: 20px; }
  .fil { font-size: .82rem; }

  /* Chiffres (remarque 4): une colonne de quatre cartes, contenu centré. */
  /* Remarque 5 du 12.10.2026: cartes plus aérées. */
  .chiffres { grid-template-columns: 1fr; gap: 14px; }
  .chiffre { padding: 32px 24px 30px; gap: 8px; justify-items: center; text-align: center; }
  .chiffre::before { left: 50%; width: 36px; margin-left: -18px; }
  .chiffre__valeur { justify-content: center; }
  .chiffre strong { font-size: 1.9rem; }
  .chiffre .etoiles { font-size: .9rem; }
  .chiffre > span:last-child { font-size: .9rem; line-height: 1.4; }

  .cartes-cours { gap: 18px; }
  .carte-cours__image { aspect-ratio: 16 / 9; }
  .carte-cours__corps { padding: 0 20px 20px; }
  .carte-cours__icone { width: 46px; height: 46px; margin-top: -23px; }
  .carte-cours__icone .icone { width: 21px; height: 21px; }
  .carte-cours__corps h3 { font-size: 1.2rem; }
  .carte-cours__corps p { font-size: .95rem; }
  /* Prix et bouton (remarques 5 et 6): pastille plus aérée, puis le bouton sur toute la largeur; la même disposition sur
     chaque carte, quelle que soit la longueur du prix. */
  /* Remarque 6 du 12.10.2026: le prix centré, sans pastille autour. */
  .carte-cours__pied { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding-top: 16px; }
  .carte-cours__prix { font-size: .95rem; line-height: 1.3; padding: 0; background: none; border: 0; border-radius: 0; text-align: center; }
  .carte-cours__bouton { width: 100%; padding-block: 12px; font-size: .93rem; }

  /* Cartes d'information: icône à gauche, texte à droite, plus compact. */
  .grille-3 { gap: 14px; }
  .carte-info { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; }
  .carte-info__icone { width: 44px; height: 44px; border-radius: 12px; grid-row: span 2; }
  .carte-info__icone .icone { width: 21px; height: 21px; }
  .carte-info h3 { margin: 0; font-size: 1.05rem; align-self: center; }
  .carte-info p { font-size: .93rem; }

  .parcours { padding: 16px; border-radius: 20px; }
  .parcours__cta { padding: 18px 16px; text-align: center; }
  .parcours__cta .bouton { padding: 13px 12px; font-size: .92rem; }
  .parcours__resultat > div:first-child { padding: 4px 4px 0; }
  .bouton--grand { padding: 15px 18px; font-size: .98rem; }
  .encart { padding: 18px; }
  .encart .bouton { width: 100%; padding-inline: 12px; font-size: .9rem; }

  /* Remarque 7 du 12.10.2026: chaque point sur deux lignes au plus, dès 360 px. */
  .bandeau-videos__points { margin: 18px 0 24px; font-size: .95rem; }
  .bandeau-videos .bouton { width: 100%; }

  .grille-2 { gap: 28px; }
  .image-cadre--portrait img { aspect-ratio: 4 / 4.2; }
  .grille-2 .bouton, .avis__lien .bouton, .section__pied .bouton { width: 100%; }

  .etapes { gap: 12px; }
  .etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 18px; }
  .etapes li::before { width: 44px; height: 44px; margin: 0; grid-row: span 2; font-size: .95rem; }
  .etapes li strong { margin: 0 0 2px; align-self: center; }
  .etapes li p { font-size: .93rem; }
  .etapes--verticales li { display: block; padding: 22px 20px 24px; }

  .avis__grille { gap: 16px; }
  .avis__carte { padding: 26px 20px 20px; border-radius: 20px; }
  .avis__carte::before { top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; font-size: 2.1rem; }
  .avis__carte::after { left: 20px; }
  .avis__texte { font-size: .96rem; }
  .avis__resume { font-size: .95rem; }
  .avis__badge { font-size: 1.05rem; }

  /* Localités (remarque 12): grille régulière de deux colonnes, tuiles de même hauteur, icône alignée à gauche. */
  .zone { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
  .zone li { justify-content: flex-start; gap: 10px; padding: 12px 12px; border-radius: 14px; font-size: .86rem; line-height: 1.25; }
  .zone .icone { box-sizing: content-box; width: 14px; height: 14px; padding: 6px; border-radius: 9px; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 12px -6px rgba(22, 73, 201, .7); }

  .cta { padding: 40px 0; }
  .cta__panneau { border-radius: 22px; padding: 36px 20px; }
  /* Remarque 13: titre du panneau plus grand, souligné d'un trait au dégradé de la charte. */
  .cta__titre { font-size: clamp(2.05rem, 9.4vw, 2.4rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: .55em; }
  .cta__titre::after { content: ''; display: block; width: 56px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
  .cta__sous { font-size: 1rem; margin-bottom: 24px; }
  .cta__actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cta__actions .bouton { width: 100%; }

  .formulaire-bloc { padding: 22px 18px; border-radius: 20px; }
  .formulaire-bloc h2 { font-size: 1.35rem; }
  .formulaire-bloc__tete { gap: 14px; margin-bottom: 20px; padding-bottom: 18px; }
  .formulaire-bloc__tete .pastille { width: 42px; height: 42px; border-radius: 12px; }
  .formulaire-bloc__tete .pastille .icone { width: 21px; height: 21px; }
  .formulaire-bloc__tete p { font-size: .93rem; }
  .deux-colonnes > div > .tarifs { padding: 4px 16px; }
  .tableau-defilant { padding: 4px 14px; }
  .bibliotheque__entete { align-items: flex-start; }
  .bibliotheque__etat { width: 100%; }
  .bibliotheque__etat .bouton { width: 100%; }
  /* Téléphone: une seule colonne de vidéos (remarque de David du 13.10.2026). */
  .bibliotheque__grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vignette__lien { border-radius: 14px; }
  .vignette__corps { padding: 10px 11px 12px; gap: 6px; }
  .vignette__titre { font-size: .86rem; }
  .vignette__meta { font-size: .76rem; }
  .vignette__bouton { width: 40px; height: 40px; margin: -20px 0 0 -20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px rgba(255, 255, 255, .2), 0 10px 20px -10px rgba(0, 0, 0, .6); }
  .vignette__bouton .icone { width: 17px; height: 17px; }
  .vignette__numero { left: 7px; top: 7px; min-width: 24px; height: 24px; font-size: .74rem; border-radius: 7px; }
  .vignette__duree { right: 7px; bottom: 7px; font-size: .72rem; padding: 2px 7px; }
  .compte-menu ul { padding: 5px; gap: 4px; }
  .compte-menu a, .compte-menu .lien-bouton { padding: 8px 12px; font-size: .86rem; min-height: 40px; }
  .formulaire__actions .bouton { width: 100%; }
  .formulaire__actions .note { width: 100%; text-align: center; }
  .puces span { padding: 8px 12px; font-size: .86rem; }

  /* Pied (remarque 14): une seule colonne, tout centré, un trait fin entre les blocs. */
  .pied { padding-top: 48px; }
  .pied__grille { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .pied__grille > * { padding: 26px 0; }
  .pied__grille > * + * { border-top: 1px solid rgba(255, 255, 255, .1); }
  .pied__marque { padding-top: 0; }
  .pied__marque .logo-image { margin-inline: auto; }
  .pied__marque p { margin-inline: auto; }
  .pied__titre::after { left: 50%; margin-left: -14px; }
  .pied__social { justify-content: center; }
  .pied__liste { font-size: .95rem; gap: 12px; }
  .pied__contact > div { justify-content: center; text-align: left; }
  /* Remarque 9 du 12.10.2026: l'adresse, la ligne la plus large, passe en bas du bloc: des lignes courtes vers les longues. */
  .pied__contact .pied__adresse { order: 1; }
  .pied__legal { margin-top: 36px; flex-direction: column; align-items: center; text-align: center; gap: 8px; line-height: 1.7; }
}

/* 26. Passe du 12.10.2026 (58 remarques de David, toutes les pages) ------------------------------------------------------
   Cartes « En pratique » et « Bon à savoir » vivantes (en-tête bleu nuit, icône et titre proportionnés), cartes pleine largeur
   sur téléphone, FAQ aérées, listes sans mot seul, tableaux de prix lisibles sur téléphone, boutons empilés espacés,
   modules vidéos et tarifs repensés, coordonnées, valeurs, idées cadeaux, pages de texte long (pages légales). */

/* Liens sur fond bleu nuit (conditions des tarifs, modules vidéos). */
.section--nuit :where(a:not(.bouton)), .carte--vedette .lien-fleche { color: var(--ciel); }
.section--nuit :where(a:not(.bouton)):hover, .carte--vedette .lien-fleche:hover { color: #fff; }
/* Listes à coches et intros: une ligne, ou des lignes de même longueur (jamais un ou deux mots seuls en bas); sur téléphone,
   « pretty » (lignes pleines, pas de mot seul), pour garder toute la largeur des cartes. */
.section__intro { text-wrap: balance; }
.faq-aide p, .offre__contenu { text-wrap: balance; }
@media (min-width: 600px) { .liste-coches li, .point p, .fiche li, .deroule p, .carte-info p, .bandeau-videos__points li, .etapes li p, .page-legale ul > li { text-wrap: balance; } }

/* Chapeau d'une section à deux colonnes, et proportions texte / carte (le texte plus large que la carte). */
.chapeau { font-size: 1.1rem; line-height: 1.7; margin-bottom: 26px; }
@media (min-width: 900px) { .deux-colonnes--texte { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(32px, 4vw, 56px); } }

/* Points clés en cartes (cours de sensibilisation, premiers secours). */
.points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 20px 20px 18px; border-radius: 18px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.point:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte-survol); border-color: #cddbf1; }
.point__icone, .fiche__icone, .coordonnees__icone, .valeur__icone, .idee__icone { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 8px rgba(8, 26, 58, .22), 0 10px 20px -10px rgba(22, 73, 201, .7); }
:is(.point__icone, .fiche__icone, .coordonnees__icone, .valeur__icone, .idee__icone) .icone { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(8, 26, 58, .3)); }
.point h3 { font-size: 1.06rem; margin: 2px 0 5px; }
.point p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--texte-doux); }
.points__pied { color: var(--texte-doux); }

/* Carte d'accompagnement (« En pratique », « Bon à savoir », « Équipement », coordonnées): remarques 3, 4 et 6 de
   /cours-de-sensibilisation. En-tête bleu nuit à halo, pastille de verre et titre à sa mesure, lignes séparées et aérées. */
.carte--accent { padding: 0 28px 26px; overflow: hidden; }
.carte--accent::before { display: none; }
.carte--accent > .carte__titre:first-child { margin: 0 -28px 22px; padding: 22px 28px; gap: 16px; font-size: 1.38rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; background: radial-gradient(360px 150px at 100% 0%, rgba(94, 184, 255, .32), transparent 70%), linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 65%, #14408f 100%); }
.carte--accent > .carte__titre .pastille { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.carte--accent > .carte__titre .pastille .icone { width: 22px; height: 22px; color: var(--ciel); filter: none; }
.carte--accent .liste-coches { gap: 0; margin: 0; }
.carte--accent .liste-coches li { padding: 12px 0 12px 36px; border-bottom: 1px solid var(--bordure-douce); }
.carte--accent .liste-coches li:first-child { padding-top: 2px; }
.carte--accent .liste-coches li:last-child { border-bottom: 0; padding-bottom: 4px; }
.carte--accent .liste-coches li::before { top: 15px; background: var(--degrade-pastille); border-color: transparent; box-shadow: 0 6px 12px -6px rgba(22, 73, 201, .7); }
.carte--accent .liste-coches li::after { top: 21px; border-color: #fff; }
.carte--accent .liste-coches li:first-child::before { top: 5px; }
.carte--accent .liste-coches li:first-child::after { top: 11px; }
.carte--accent > .lien-fleche { margin-top: 16px; }
/* Prix dans la carte: un encadré bleu ciel, le prix en grand. */
.carte--accent .tarifs { margin: 18px 0 0; padding: 4px 18px; border-radius: 16px; background: linear-gradient(160deg, #f1f7ff 0%, var(--ciel-pale) 100%); border: 1px solid #d5e5fb; }
.carte--accent > .carte__titre + .tarifs { margin: 0 0 12px; }
.carte--accent .tarifs__table { margin: 0; }
.carte--accent .tarifs__table th, .carte--accent .tarifs__table td { border-color: #d5e5fb; }
.carte--accent .tarifs__table td { color: var(--bleu-fonce); font-size: 1.15rem; }
/* Inscription en ligne aux cours à dates fixes (Mikael, 15.10.2026): un bouton par lieu sous la fiche « En pratique ». */
.inscriptions { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bordure-douce); }
.inscriptions__titre { margin: 0; font-size: 1.15rem; }
.inscriptions__note { margin: 0 0 4px; font-size: .92rem; line-height: 1.55; color: var(--texte-doux); }
.inscriptions__bientot { cursor: default; box-shadow: none; opacity: .8; }
.inscriptions__bientot:hover { border-color: #cbd9ef; box-shadow: none; }
/* Fiche pratique: une icône par ligne, l'intitulé en petites capitales au-dessus du texte. */
.fiche { list-style: none; margin: 0; padding: 0; display: grid; }
.fiche li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--bordure-douce); line-height: 1.55; }
.fiche li:first-child { padding-top: 2px; }
.fiche li:last-child { border-bottom: 0; padding-bottom: 4px; }
.fiche__icone { width: 40px; height: 40px; border-radius: 12px; }
.fiche__icone .icone { width: 19px; height: 19px; }
.fiche__etiquette { display: block; margin: 1px 0 3px; font-family: var(--titres); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-fonce); }

/* Déroulé d'une séance (gestion du stress): trois cartes numérotées reliées. */
.deroule { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: deroule; display: grid; gap: 14px; position: relative; }
.deroule::before { content: ''; position: absolute; left: 37px; top: 30px; bottom: 30px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--bleu), var(--ciel)); }
.deroule li { counter-increment: deroule; position: relative; padding: 18px 22px 20px 76px; border-radius: 18px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); }
.deroule li::before { content: counter(deroule); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font: 700 1rem/1 var(--titres); color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px rgba(22, 73, 201, .7); }
.deroule h3 { font-size: 1.08rem; margin: 0 0 4px; }
.deroule p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--texte-doux); }
.encart--mot { display: block; position: relative; margin: 0; padding: 18px 20px 18px 26px; font-size: .97rem; line-height: 1.65; color: var(--texte); }
.encart--mot::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--bleu), var(--ciel)); }

/* Grille des tarifs (remarque 3 de /tarifs): la carte voiture en vedette bleu nuit sur toute la largeur, puis des cartes de
   même hauteur, trois par ligne (deux sur tablette, une sur téléphone). */
.grille-tarifs { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1099px) { .grille-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grille-tarifs { grid-template-columns: minmax(0, 1fr); } }
.grille-tarifs .carte { display: flex; flex-direction: column; }
.grille-tarifs .carte .tarifs { flex: 1; }
.grille-tarifs .lien-fleche { margin-top: auto; padding-top: 6px; }
.tarifs__titre { font-size: 1.28rem; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--bordure-douce); }
.grille-tarifs .carte--vedette { grid-column: 1 / -1; padding: 32px 36px 30px; color: var(--sur-nuit); border-color: transparent; background: radial-gradient(760px 320px at 100% 0%, rgba(30, 94, 255, .38), transparent 65%), radial-gradient(520px 260px at 0% 110%, rgba(94, 184, 255, .16), transparent 60%), linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 100%); box-shadow: 0 2px 6px rgba(8, 26, 58, .15), 0 44px 80px -40px rgba(8, 26, 58, .75); }
.carte--vedette .tarifs__titre { color: #fff; font-size: 1.5rem; border-color: rgba(255, 255, 255, .14); }
.carte--vedette .tarifs__table th { color: #fff; }
.carte--vedette .tarifs__table th small { color: var(--sur-nuit-doux); }
.carte--vedette .tarifs__table td { color: #fff; }
.carte--vedette .tarifs__table th, .carte--vedette .tarifs__table td { border-color: rgba(255, 255, 255, .12); }
.carte--vedette .tarifs__table tr:hover th, .carte--vedette .tarifs__table tr:hover td { color: var(--ciel); }
.carte--vedette .tarifs__table tr:hover th small { color: var(--sur-nuit-doux); }
@media (min-width: 900px) {
  .carte--vedette .tarifs__table, .carte--vedette .tarifs__table tbody { display: block; }
  .carte--vedette .tarifs__table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .carte--vedette .tarifs__table tr { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .carte--vedette .tarifs__table tr:nth-last-child(-n+2):nth-child(odd), .carte--vedette .tarifs__table tr:last-child { border-bottom: 0; }
  .carte--vedette .tarifs__table th, .carte--vedette .tarifs__table td { border-bottom: 0; }
}

/* Grille centrée (cinq cartes: trois puis deux, centrées). */
.grille-centree { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.grille-centree > * { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; }
@media (max-width: 899px) { .grille-centree > * { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 599px) { .grille-centree { gap: 14px; } .grille-centree > * { flex-basis: 100%; } }

/* Offres sur fond bleu nuit (modules vidéos, remarque 1): cartes blanches en relief, le pack cerclé de bleu ciel. */
.offres-grille--modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .offres-grille--modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .offres-grille--modules { grid-template-columns: minmax(0, 1fr); } }
.section--nuit .offre { color: var(--texte); background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .12), 0 36px 64px -32px rgba(0, 0, 0, .75); }
.section--nuit .offre__titre { color: var(--nuit); }
.section--nuit .offre a:not(.bouton) { color: var(--bleu-fonce); }
.section--nuit .offre--pack { border: 2px solid var(--ciel); background: linear-gradient(180deg, #ffffff 0%, var(--ciel-pale) 100%); box-shadow: 0 0 0 6px rgba(94, 184, 255, .16), 0 2px 6px rgba(0, 0, 0, .12), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.offre__sous { text-wrap: balance; }
.offre__lien { display: block; width: fit-content; margin-top: 2px; font-weight: 600; }
.offre__prix__duree { display: block; }
.offres-grille--modules .offre__prix { margin-top: 14px; }
.offres-grille--modules .offre__prix strong { margin-right: 2px; line-height: 1.15; }
.offre__prix__ancien { font-family: var(--titres); font-size: .95rem; font-weight: 600; color: var(--texte-doux); text-decoration-thickness: 2px; white-space: nowrap; }
.offres__note { max-width: 72ch; margin: 22px auto 0; text-align: center; font-size: .95rem; color: var(--sur-nuit-doux); text-wrap: balance; }

/* Contenu des modules (remarques 5 et 6): chaque module dans un panneau, numéro bleu nuit, infos en pastilles, vignettes
   sobres; la dernière rangée de vignettes est centrée sous les rangées pleines (aussi dans l'espace élève). */
.bibliotheque__grille:not(.bibliotheque__grille--liste) { --g: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.bibliotheque__grille:not(.bibliotheque__grille--liste) > .vignette { flex: 0 0 calc((100% - 3 * var(--g)) / 4); }
@media (max-width: 1099px) { .bibliotheque__grille:not(.bibliotheque__grille--liste) > .vignette { flex-basis: calc((100% - 2 * var(--g)) / 3); } }
@media (max-width: 899px) { .bibliotheque__grille:not(.bibliotheque__grille--liste) { --g: 16px; } .bibliotheque__grille:not(.bibliotheque__grille--liste) > .vignette { flex-basis: calc((100% - var(--g)) / 2); } }
@media (max-width: 599px) { .bibliotheque__grille:not(.bibliotheque__grille--liste) { --g: 14px; } }
/* Téléphone (remarque de David du 13.10.2026 sur /compte): une seule colonne de vidéos, jamais deux vignettes côte à côte. */
@media (max-width: 767px) {
  .bibliotheque__grille { grid-template-columns: minmax(0, 1fr); }
  .bibliotheque__grille:not(.bibliotheque__grille--liste) > .vignette { flex-basis: 100%; max-width: 560px; }
}
.bibliotheque--vitrine { padding: clamp(20px, 3vw, 34px); border-radius: 26px; background: #fff; border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-douce); }
.bibliotheque--vitrine:not(:last-child) { margin-bottom: clamp(20px, 3vw, 32px); }
.bibliotheque--vitrine .bibliotheque__entete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 22px; margin-bottom: 24px; padding-bottom: 22px; border-bottom-color: var(--bordure-douce); }
.bibliotheque__numero { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font: 800 1.35rem/1 var(--titres); letter-spacing: -.03em; color: #fff; background: radial-gradient(60px 60px at 100% 0%, rgba(94, 184, 255, .45), transparent 70%), linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 60%, var(--bleu-fonce) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 26px -14px rgba(8, 26, 58, .8); }
.bibliotheque__infos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.bibliotheque__infos > span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--nuit); background: var(--ciel-voile); border: 1px solid #d9e7fb; }
.bibliotheque__infos .icone { width: 15px; height: 15px; color: var(--bleu-fonce); }
/* Vitrine: sous le titre, seulement la durée (vignettes dessinées), sans état ni « À louer ». */
.bibliotheque--vitrine .vignette__meta > :not(.vignette__temps) { display: none; }
.bibliotheque--vitrine .vignette__corps { padding: 13px 15px 15px; }
.bibliotheque--vitrine .vignette__lien { box-shadow: 0 1px 2px rgba(8, 26, 58, .05), 0 14px 28px -22px rgba(8, 26, 58, .5); }
/* Cadenas discret en haut à droite, au lieu du grand rond sombre au centre de l'image. */
.bibliotheque--vitrine .vignette--verrou .vignette__bouton { left: auto; top: 10px; right: 10px; width: 30px; height: 30px; margin: 0; background: rgba(8, 26, 58, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.bibliotheque--vitrine .vignette--verrou .vignette__bouton .icone { width: 14px; height: 14px; }
.bibliotheque--vitrine a.vignette__lien:hover .vignette__bouton { transform: none; }

/* Valeurs (À propos, remarque 3): trois grandes cartes de verre sur bleu nuit, numéro en filigrane, un mot fort chacune. */
.valeurs { list-style: none; margin: 0; padding: 0; counter-reset: valeur; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .valeurs { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.valeur { counter-increment: valeur; position: relative; overflow: hidden; isolation: isolate; padding: 34px 30px 32px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 100%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -34px rgba(0, 0, 0, .8); transition: transform var(--transition), border-color var(--transition); }
.valeur::before { content: counter(valeur, decimal-leading-zero); position: absolute; z-index: -1; right: 20px; top: 10px; font: 800 5.5rem/1 var(--titres); letter-spacing: -.05em; color: rgba(94, 184, 255, .13); }
.valeur::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--bleu), var(--ciel) 60%, transparent); }
.valeur:hover { transform: translateY(-4px); border-color: rgba(94, 184, 255, .4); }
.valeur__icone { width: 56px; height: 56px; border-radius: 16px; }
.valeur__icone .icone { width: 26px; height: 26px; }
.section--nuit .valeur h3 { font-size: 1.6rem; margin: 22px 0 12px; }
.valeur p { margin: 0; color: var(--sur-nuit); line-height: 1.65; }

/* Coordonnées (Contact, remarques 3, 4 et 6): lignes aérées, icônes à la taille du texte, intitulés détachés. */
.coordonnees__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.coordonnees__liste > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--bordure-douce); }
.coordonnees__liste > li:first-child { padding-top: 2px; }
.coordonnees__icone { width: 36px; height: 36px; border-radius: 11px; }
.coordonnees__icone .icone { width: 17px; height: 17px; }
.coordonnees .coordonnees__liste h3, .coordonnees .coordonnees__reseaux h3 { margin: 0 0 7px; font-family: var(--titres); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-fonce); line-height: 1.3; }
.coordonnees__liste p { margin: 0 0 4px; line-height: 1.55; }
.coordonnees__liste p:last-child { margin-bottom: 0; }
.coordonnees__reseaux { padding-top: 18px; }
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; }
.reseaux a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px rgba(22, 73, 201, .7); transition: transform var(--transition), box-shadow var(--transition); }
.reseaux a:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 24px -10px rgba(22, 73, 201, .8); }
.reseaux .icone { width: 20px; height: 20px; }

/* Choix du cours en liste déroulante (Contact, remarque 1): grand champ, flèche dans une pastille, comme « Par où commencer ? ». */
.champ--choix select { min-height: 56px; padding: 14px 60px 14px 16px; font: 650 1rem/1.25 var(--titres); letter-spacing: -.005em; color: var(--nuit); border: 2px solid #cfe0fb; border-radius: 14px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a69ff'/%3E%3Cstop offset='.48' stop-color='%231e5eff'/%3E%3Cstop offset='1' stop-color='%2310335d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='11' fill='url(%23g)'/%3E%3Cpath d='m14 17 6 6 6-6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 38px 38px; box-shadow: 0 1px 2px rgba(8, 26, 58, .06), 0 12px 24px -16px rgba(22, 73, 201, .5); }
.champ--choix select:hover { border-color: var(--bleu); }
.champ--choix select:focus { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(30, 94, 255, .16), 0 12px 24px -16px rgba(22, 73, 201, .5); }

/* Idées cadeaux (Bons cadeaux, remarque 2): cartes blanches sur bleu nuit, prix en grand, bouton qui ouvre la commande. */
.idees { display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .idees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .idees { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.idee { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px 24px; border-radius: 22px; color: var(--texte); background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%); border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .12), 0 36px 64px -32px rgba(0, 0, 0, .75); transition: transform var(--transition), box-shadow var(--transition); }
.idee::after { content: ''; position: absolute; left: 24px; top: 0; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.idee:hover { transform: translateY(-4px); }
.section--nuit .idee h3 { margin: 8px 0 0; font-size: 1.12rem; color: var(--nuit); }
.idee__prix { margin: 0; font: 800 2rem/1.1 var(--titres); letter-spacing: -.03em; color: var(--nuit); }
.idee__texte { flex: 1; margin: 0; font-size: .95rem; line-height: 1.55; color: var(--texte-doux); }
.idee .bouton { width: 100%; margin-top: 8px; }

/* Pages de texte long (pages légales: .page-legale, contenu réécrit le 12.10.2026). Structure des gabarits: p.note (mise à
   jour), nav.sommaire (p.sommaire__titre + ol de liens), puis section[id] > h2, h3, p, ul, ol, div.tableau-defilant >
   table.tableau.tableau--empile (td[data-label]). Le sommaire et les titres de section portent le même numéro (01, 02…).
   Composants en plus, à disposition: .legal-intro (chapeau), .legal-encadre (+ --important, bleu nuit), .legal-fiche (dl),
   .legal-tableau (tableau simple sans data-label). */
.page-legale { counter-reset: legal; font-size: 1.02rem; }
.page-legale section[id] { scroll-margin-top: calc(var(--entete-h) + 28px); }
.page-legale > section { margin-top: clamp(40px, 5vw, 56px); }
.page-legale h2 { margin: 0 0 .7em; font-size: 1.5rem; }
.page-legale > section > h2 { counter-increment: legal; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--bordure-douce); }
.page-legale > section > h2::before { content: counter(legal, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font: 700 .92rem/1 var(--titres); letter-spacing: -.02em; color: #fff; background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px rgba(22, 73, 201, .7); }
/* Conditions générales: les titres portent déjà leur numéro dans le texte (« 1. À qui… »): un trait de la charte à la place de
   la pastille numérotée, pour ne pas numéroter deux fois. */
.page-legale:has(> section#champ) > section > h2 { display: block; }
.page-legale:has(> section#champ) > section > h2::before { content: ''; display: block; width: 36px; height: 3px; margin-bottom: 14px; border-radius: 3px; box-shadow: none; }
.page-legale h3 { margin: 1.6em 0 .5em; font-size: 1.14rem; }
.page-legale p, .page-legale li, .page-legale dd { line-height: 1.75; }
.page-legale a { font-weight: 600; overflow-wrap: anywhere; }
.page-legale code { padding: 2px 7px; border-radius: 7px; font-size: .88em; color: var(--nuit); background: var(--ciel-voile); border: 1px solid #d9e7fb; }
.page-legale ul { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: .45em; }
.page-legale ul > li { position: relative; padding-left: 26px; margin: 0; }
.page-legale ul > li::before { content: ''; position: absolute; left: 6px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--degrade-pastille); }
.page-legale section ol { padding-left: 24px; margin: 0 0 1.2em; display: grid; gap: .45em; }
.page-legale section ol > li::marker { font-family: var(--titres); font-weight: 700; color: var(--bleu-fonce); }
/* Date de mise à jour: une pastille discrète en tête. */
.page-legale > p.note:first-child { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; background: var(--ciel-voile); border: 1px solid #d9e7fb; }
/* Sommaire: carte à numéros, deux colonnes sur ordinateur. */
.sommaire { margin: 0; padding: 24px 26px 18px; border-radius: 20px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); }
.sommaire__titre { margin: 0 0 12px; font-family: var(--titres); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bleu-fonce); }
.sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: sommaire; columns: 2 250px; column-gap: 32px; }
.sommaire li { counter-increment: sommaire; break-inside: avoid; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 0; line-height: 1.45; border-bottom: 1px solid var(--bordure-douce); }
.sommaire li::before { content: counter(sommaire, decimal-leading-zero); font: 700 .8rem/1 var(--titres); color: var(--bleu-fonce); }
.sommaire a { color: var(--nuit); text-decoration: none; font-weight: 600; }
.sommaire a:hover { color: var(--bleu-fonce); text-decoration: underline; }
/* Tableaux (durées, prestataires, offres, cookies): carte, en-tête bleu ciel; sur téléphone, une carte par ligne. */
.page-legale .tableau-defilant { margin: 1em 0 1.6em; padding: 0; overflow: hidden; }
.page-legale .tableau { font-size: .95rem; }
.page-legale .tableau thead th { padding: 13px 16px; font-family: var(--titres); font-size: .76rem; letter-spacing: .08em; color: var(--nuit); background: var(--ciel-voile); border-bottom: 1px solid #d9e7fb; }
.page-legale .tableau td { padding: 13px 16px; line-height: 1.55; border-bottom-color: var(--bordure-douce); }
.page-legale .tableau td:first-child { font-weight: 600; color: var(--nuit); }
.page-legale .tableau tbody tr:nth-child(even) td { background: #f8fbff; }
.legal-intro { margin: 0 0 32px; padding: 22px 24px; border-radius: 18px; font-size: 1.08rem; line-height: 1.7; background: linear-gradient(160deg, #f1f7ff 0%, var(--ciel-pale) 100%); border: 1px solid #d5e5fb; }
.legal-encadre, .encadre-info { position: relative; margin: 1.4em 0; padding: 18px 22px 18px 26px; border-radius: 16px; background: var(--ciel-voile); border: 1px solid #d9e7fb; }
.legal-encadre::before, .encadre-info::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--bleu), var(--ciel)); }
.legal-encadre > :last-child, .encadre-info > :last-child { margin-bottom: 0; }
.legal-encadre--important { color: var(--sur-nuit); background: linear-gradient(135deg, var(--nuit) 0%, var(--nuit-2) 70%, #14408f 100%); border-color: transparent; box-shadow: 0 30px 60px -34px rgba(8, 26, 58, .7); }
.legal-encadre--important :is(h2, h3, strong) { color: #fff; }
.legal-encadre--important a { color: var(--ciel); }
.legal-fiche { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr); margin: 1em 0 1.6em; padding: 6px 22px; border-radius: 18px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); }
.legal-fiche dt, .legal-fiche dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--bordure-douce); }
.legal-fiche dt { padding-right: 18px; font-family: var(--titres); font-size: .9rem; font-weight: 700; color: var(--nuit); }
.legal-fiche dt:last-of-type, .legal-fiche dd:last-of-type { border-bottom: 0; }
.legal-tableau { width: 100%; margin: 1em 0 1.6em; border-collapse: separate; border-spacing: 0; font-size: .95rem; border: 1px solid var(--bordure-douce); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--ombre-carte); }
.legal-tableau :is(th, td) { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bordure-douce); }
.legal-tableau tr:last-child :is(th, td) { border-bottom: 0; }
.legal-tableau thead th { font-family: var(--titres); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nuit); background: var(--ciel-voile); }
@media (max-width: 599px) {
  .page-legale h2 { font-size: 1.28rem; }
  .page-legale > section > h2 { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .page-legale > section > h2::before { width: 40px; height: 40px; border-radius: 12px; font-size: .85rem; }
  .sommaire { padding: 20px 18px 14px; }
  .page-legale .tableau-defilant { padding: 0 16px; }
  .page-legale .tableau--empile tr { padding: 14px 0; }
  .page-legale .tableau--empile tbody tr:nth-child(even) td { background: none; }
  .page-legale .tableau--empile td { padding: 3px 0; }
  .page-legale .tableau--empile td::before { margin-bottom: 1px; font-family: var(--titres); font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--bleu-fonce); }
  .legal-fiche { grid-template-columns: minmax(0, 1fr); padding-inline: 18px; }
  .legal-fiche dt { padding: 12px 0 2px; border-bottom: 0; }
  .legal-fiche dd { padding-top: 0; }
}

/* Téléphone (remarques 6 et 7 de /cours-de-sensibilisation, 3 de /bons-cadeaux, 5 de /contact, 2 et 3 de /conduite-moto,
   2 de /gestion-du-stress, 5 de /tarifs, 8 de /modules-videos): cartes pleine largeur, FAQ aérées, boutons empilés espacés,
   tableaux de prix en lignes centrées, en-tête du formulaire sans icône, note Google du pied entre le logo et le texte. */
@media (max-width: 599px) {
  .carte { padding: 22px 18px; }
  .carte--accent { padding: 0 18px 20px; }
  .carte--accent > .carte__titre:first-child { margin: 0 -18px 18px; padding: 18px; gap: 14px; font-size: 1.28rem; }
  .carte--accent > .carte__titre .pastille { width: 44px; height: 44px; }
  .carte--accent .tarifs { padding: 2px 14px; }
  .grille-tarifs .carte--vedette { padding: 24px 18px 22px; }
  .grille-tarifs .tarifs__titre { justify-content: center; }
  .grille-tarifs .lien-fleche { align-self: center; }
  .liste-coches li { padding-left: 32px; }
  .carte--accent .liste-coches li { padding-left: 34px; }
  .offre { padding: 26px 20px 22px; }
  .point { padding: 16px; gap: 14px; }
  .chapeau { font-size: 1.02rem; }
  /* Fiche: l'icône passe à côté de l'intitulé, le texte prend toute la largeur de la carte. */
  .fiche li { display: block; position: relative; }
  .fiche__icone { position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 9px; }
  .fiche li:first-child .fiche__icone { top: 0; }
  .fiche__icone .icone { width: 15px; height: 15px; }
  .fiche__etiquette { display: flex; align-items: center; min-height: 30px; margin: 0 0 4px; padding-left: 42px; }
  .deroule::before { left: 33px; }
  .deroule li { padding: 16px 16px 18px 66px; }
  .deroule li::before { left: 14px; top: 16px; }
  .valeur { padding: 28px 22px 26px; }
  .section--nuit .valeur h3 { font-size: 1.45rem; margin-top: 18px; }
  .idee { padding: 26px 20px 22px; }
  .bibliotheque--vitrine { padding: 18px 14px; border-radius: 22px; }
  .bibliotheque--vitrine .bibliotheque__entete { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding-bottom: 18px; margin-bottom: 18px; }
  .bibliotheque--vitrine .bibliotheque__etat { grid-column: 1 / -1; }
  .bibliotheque__numero { width: 48px; height: 48px; border-radius: 14px; font-size: 1.05rem; align-self: start; }
  .bibliotheque--vitrine .vignette__corps { padding: 10px 11px 12px; }
  .bibliotheque--vitrine .vignette--verrou .vignette__bouton { top: 6px; right: 6px; width: 24px; height: 24px; }
  .bibliotheque--vitrine .vignette--verrou .vignette__bouton .icone { width: 11px; height: 11px; }
  .coordonnees__liste > li { gap: 14px; }

  /* FAQ: plus d'air en haut et en bas des questions et des réponses. */
  .faq summary { padding: 21px 16px 21px 18px; min-height: 70px; }
  .faq__reponse { padding: 0 18px 24px; }
  .faq__reponse p { padding-top: 18px; }

  /* Boutons empilés: un vrai écart entre eux, partout. */
  .hero__actions { gap: 14px; }
  .cta__actions { gap: 16px; }
  .nav__mobile-actions { gap: 12px; }
  .hero__carte__liens, .parcours__cta { gap: 14px; }
  .formulaire__actions { gap: 14px; }

  /* Tableaux de prix: chaque ligne centrée, le nom en entier, le détail dessous, le prix en pastille. */
  .tarifs__table, .tarifs__table tbody { display: block; }
  .tarifs__table tr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--bordure); text-align: center; }
  .tarifs__table tr:last-child { border-bottom: 0; }
  .tarifs__table th, .tarifs__table td { display: block; padding: 0; border: 0; text-align: center; }
  .tarifs__table th { font-size: 1rem; line-height: 1.4; text-wrap: balance; }
  .tarifs__table th small { margin-top: 3px; font-size: .86rem; line-height: 1.45; }
  .tarifs__table td { padding: 5px 16px; border-radius: 999px; font-size: 1.02rem; color: var(--bleu-fonce); background: var(--ciel-voile); border: 1px solid #d9e7fb; }
  .carte--accent .tarifs__table tr { border-color: #d5e5fb; }
  .carte--accent .tarifs__table td { background: #fff; font-size: 1.08rem; }
  .carte--vedette .tarifs__table tr { border-color: rgba(255, 255, 255, .12); }
  .carte--vedette .tarifs__table td { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }

  /* Formulaire (Contact): en-tête sans icône, titre et texte centrés. */
  .formulaire-bloc__tete { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .formulaire-bloc__tete .pastille { display: none; }

  /* Pied: la note Google passe entre le logo et la description. */
  .pied__marque { display: flex; flex-direction: column; align-items: center; }
  .pied__marque .logo-image { order: -2; }
  .pied__marque .pied__badge { order: -1; margin: 0 0 18px; }

}

/* 25. Apparition au défilement --------------------------------------------------------------------- */
.js .reveler { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--transition-longue), transform .6s var(--transition-longue); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveler.est-visible { opacity: 1; transform: none; }
/* Une fois apparu, l'élément perd la classe .reveler (site.js): ses transitions de survol, courtes, reprennent la main. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .js .reveler { opacity: 1; transform: none; }
  .hero__fond img { transform: none; }
  .bouton:hover, .carte-cours:hover, .carte-info:hover, .chiffre:hover, .avis__carte:hover, .offre:hover, .etapes li:hover, .zone li:hover, .parcours__bouton:hover, .pied__liste a:hover, .pied__social a:hover, .whatsapp-flottant:hover, .fenetre__fermer:hover,
  :is(.carte-info, .menu-deroulant__lien, .carte-cours, .hero__carte, .fenetre__entete):hover :is(.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone),
  :is(.carte-info, .menu-deroulant__lien, .carte-cours, .hero__carte):hover :is(.pastille, .carte-info__icone, .menu-deroulant__icone, .carte-cours__icone) .icone,
  .carte-cours:hover .carte-cours__image img, .image-cadre:hover img { transform: none; }
  .faq:hover .faq__numero { transform: none; }
  .point:hover, .valeur:hover, .idee:hover, .reseaux a:hover { transform: none; }
  .faq::details-content { transition: none !important; }
}

/* 27. Sélecteur de langue FR | PT (version portugaise, 12.10.2026) ----------------------------------------------------
   Pastille à deux segments, la langue active pleine (dégradé des pastilles). En-tête sur ordinateur (le menu mobile
   a le sien), menu mobile, pied de page (fond nuit). */
.langues { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bordure); border-radius: 999px; background: #fff; flex: none; vertical-align: middle; }
.langues__lien { display: inline-grid; place-items: center; min-width: 38px; height: 32px; padding: 0 10px; border-radius: 999px; font-family: var(--titres); font-size: .78rem; font-weight: 700; letter-spacing: .08em; line-height: 1; color: var(--texte-doux); text-decoration: none; transition: color var(--transition), background-color var(--transition); }
.langues__lien:hover { color: var(--bleu-fonce); background: var(--ciel-voile); }
.langues__lien[aria-current] { color: #fff; background-color: var(--bleu-fonce); background-image: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px -8px rgba(22, 73, 201, .8); }
.langues__lien[aria-current]:hover { color: #fff; }
.langues__lien:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.langues--menu { justify-self: center; }
.langues--menu .langues__lien { min-width: 58px; height: 40px; font-size: .86rem; }
.langues--pied { margin-top: 20px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.langues--pied .langues__lien { color: var(--sur-nuit-doux); }
.langues--pied .langues__lien:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.langues--pied .langues__lien[aria-current] { color: var(--nuit); background: #fff; box-shadow: none; }
@media (max-width: 1219px) { .langues--entete { display: none; } }

/* 25. Remarques finales de David (13.10.2026) ------------------------------------------------------------------- */

/* Règle 2 (révisée le 13.10.2026, « remplace la couleur jaunâtre par un fond blanc et élégant »): les sections claires
   (« Bon à savoir », grilles, contenu des modules, espace élève) sont blanches, sans crème, halo ni trame. Contre une
   autre section blanche, elles prennent un blanc froid à peine teinté pour s'en séparer. Les éléments blancs posés
   dessus ressortent: ombres en trois couches, liseré bleu très pâle, léger soulèvement au survol. */
.section:not(.section--nuit) + :is(.section--douce, .section--faq), :is(.section--douce, .section--faq):has(+ .section:not(.section--nuit, .section--douce, .section--faq)) { background: var(--blanc-froid); }
:where(.carte, .carte-info, .offre, .point, .etapes li, .deroule li, .chiffre, .legal-fiche, .compte-menu ul, .formulaire-bloc, .tableau-defilant, .deux-colonnes > div > .tarifs, .zone li, .vignette__lien):not(.carte--vedette, .offre--pack, .section--nuit *) { border-color: var(--lisere); }
:where(.carte, .tableau-defilant, .legal-fiche, .deux-colonnes > div > .tarifs) { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.formulaire-bloc { transition: box-shadow var(--transition), border-color var(--transition); }
@media (hover: hover) {
  :where(.carte, .tableau-defilant, .legal-fiche, .deux-colonnes > div > .tarifs):not(.carte--vedette, .section--nuit *):hover { transform: translateY(-2px); box-shadow: var(--ombre-carte-survol); border-color: var(--lisere-survol); }
  :where(.carte-info, .offre, .point, .etapes li, .chiffre, a.vignette__lien):not(.offre--pack, .section--nuit *):hover { border-color: var(--lisere-survol); }
  /* Un formulaire ne bouge pas sous le curseur pendant la saisie: seule l'ombre s'approfondit. */
  .formulaire-bloc:hover { box-shadow: var(--ombre-carte-survol); border-color: var(--lisere-survol); }
}
/* Accordéons de FAQ (remarque de /cours-de-sensibilisation): bien détachés du fond blanc. */
.faq { background: var(--blanc); border-color: var(--lisere); box-shadow: var(--ombre-carte); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.faq:hover { transform: translateY(-2px); border-color: var(--lisere-survol); box-shadow: var(--ombre-carte-survol); }
.faq[open] { border-color: var(--lisere-survol); box-shadow: 0 0 0 4px rgba(94, 184, 255, .12), var(--ombre-carte-survol); }
@media (prefers-reduced-motion: reduce) { .carte:hover, .tableau-defilant:hover, .legal-fiche:hover, .deux-colonnes > div > .tarifs:hover, .faq:hover { transform: none; } }

/* Règle 1: après le héros, les sections alternent bleu nuit et clair, en partant du bas de la page: l'appel final (clair),
   les avis (bleu nuit), la FAQ (clair), puis le contenu en remontant (marche à suivre et pages de cours). Les sections de
   contenu passées en bleu nuit gardent leurs cartes blanches, comme les avis: textes clairs autour, foncés dans les cartes. */
.section--nuit .chapeau, .section--nuit .points__pied, .section--nuit .deux-colonnes > div > p:not([class]) { color: var(--sur-nuit); }
.section--nuit :is(.carte, .point, .etapes li, .deroule li, .tarifs, .encart) { color: var(--texte); }
.section--nuit :is(.point, .etapes li, .deroule li, .tarifs, .encart) :is(h2, h3), .section--nuit .carte :is(h2, h3):not(.carte__titre) { color: var(--nuit); }
.section--nuit :is(.carte, .point, .etapes li, .deroule li, .tarifs, .encart) a:not(.bouton) { color: var(--bleu-fonce); }
.section--nuit :is(.carte, .point, .etapes li, .deroule li, .tarifs, .encart) a:not(.bouton):hover { color: var(--bleu); }
.section--nuit :is(.carte, .point, .deroule li, .etapes--verticales li, .deux-colonnes > div > .tarifs) { border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0, 0, 0, .12), 0 30px 56px -30px rgba(0, 0, 0, .75); }
.section--nuit .carte--accent > .carte__titre:first-child { background: radial-gradient(360px 150px at 100% 0%, rgba(94, 184, 255, .42), transparent 70%), linear-gradient(135deg, #2a66ff 0%, var(--bleu-fonce) 55%, var(--marine) 100%); }
.section--nuit .etapes--verticales::before { background: linear-gradient(180deg, var(--ciel) 0%, rgba(94, 184, 255, .45) 60%, rgba(94, 184, 255, .1) 100%); }
@media (min-width: 600px) { .section--nuit .etapes--verticales li::before { box-shadow: 0 0 0 6px var(--nuit), inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 22px -10px rgba(0, 0, 0, .6); } }
.section--nuit .etapes--verticales li::after { border-color: transparent; }

/* Règle 3: sur téléphone, la pastille numérotée des cartes d'étapes ne colle plus au titre. */
@media (max-width: 599px) { .etapes--verticales li::before { margin: 0 0 16px; } }

/* Tarifs: plus d'air au-dessus du titre des cartes de packs, sous la pastille « Le plus complet ». */
.offres-grille:has(.offre__badge) > .offre { padding-top: 40px; }
@media (max-width: 599px) { .offres-grille:has(.offre__badge) > .offre { padding-top: 36px; } }

/* Connexion et mot de passe oublié (ordinateur): le texte du héros centré verticalement face à la carte de droite. */
@media (min-width: 900px) { .hero--formulaire .hero__contenu { align-items: center; } }

/* Modules vidéos: section de la vidéo de présentation (emplacement 16:9, vignette d'attente tant que la vidéo n'existe pas). */
.section--presentation { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(720px 420px at 82% 50%, rgba(30, 94, 255, .12), transparent 68%), radial-gradient(520px 320px at 0% 0%, rgba(94, 184, 255, .12), transparent 70%), var(--blanc); }
.presentation { display: grid; gap: 40px 64px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.presentation__texte h2 { margin-bottom: .4em; }
.presentation__texte .section__intro { margin: 0 0 22px; }
.presentation__points { margin-bottom: 28px; }
.presentation__media { position: relative; }
/* Ordinateur: le texte occupe les deux rangées et se centre face au bloc vidéo + note (demande de David du 18.10.2026). */
@media (min-width: 900px) {
  .presentation { row-gap: 28px; }
  .presentation__texte { grid-row: 1 / 3; align-self: center; }
  .presentation__media { grid-column: 2; grid-row: 1; align-self: end; }
  .presentation__note { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
}
.presentation__media::before { content: ''; position: absolute; inset: 9% -3% -7% 7%; z-index: -1; border-radius: 28px; background: var(--degrade-pastille); transform: rotate(2.5deg); box-shadow: 0 40px 80px -40px rgba(22, 73, 201, .8); }
.presentation__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--nuit); box-shadow: 0 0 0 1px rgba(8, 26, 58, .1), 0 2px 6px rgba(8, 26, 58, .1), 0 40px 80px -36px rgba(8, 26, 58, .7); }
.presentation__cadre.lecteur-cadre { max-height: none; }
.presentation__cadre picture, .presentation__cadre > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .presentation { grid-template-columns: minmax(0, 1fr); } .presentation__texte, .presentation__media, .presentation__note { grid-column: 1; grid-row: auto; } .presentation__note { order: 3; margin-top: 0; } .presentation__media { order: 2; } .presentation__media::before { inset: 7% -2% -5% 5%; } }

/* Modules vidéos, « Toutes les vidéos » (règle 4): plus de bleu, chaque module coiffé d'un bandeau bleu nuit. */
.bibliotheque--vitrine { --pad: clamp(20px, 3vw, 34px); padding: 0 var(--pad) var(--pad); overflow: hidden; }
.bibliotheque--vitrine .bibliotheque__entete { margin: 0 calc(-1 * var(--pad)) 24px; padding: 24px var(--pad); border-bottom: 0; color: var(--sur-nuit); background: radial-gradient(560px 220px at 100% 0%, rgba(30, 94, 255, .45), transparent 70%), radial-gradient(420px 200px at 0% 120%, rgba(94, 184, 255, .16), transparent 70%), linear-gradient(135deg, var(--nuit) 0%, #0b2552 100%); }
.bibliotheque--vitrine .bibliotheque__entete .h2 { color: #fff; }
.bibliotheque--vitrine .bibliotheque__sous { color: var(--sur-nuit-doux); }
.bibliotheque--vitrine .bibliotheque__infos > span { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.bibliotheque--vitrine .bibliotheque__infos .icone { color: var(--ciel); }
.bibliotheque--vitrine .bibliotheque__numero { background: var(--degrade-pastille); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 26px -12px rgba(0, 0, 0, .6); }
@media (max-width: 599px) { .bibliotheque--vitrine { --pad: 14px; } .bibliotheque--vitrine .bibliotheque__entete { margin-bottom: 18px; padding-block: 18px; } }

/* Mes vidéos: progression par vidéo (barre sous l'image, « Commencée · 42 % », « Vue » dès 90 %) et par module. */
.progression { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; max-width: 440px; }
.progression__barre { flex: 1 1 160px; height: 8px; border-radius: 999px; overflow: hidden; background: #dde5f1; box-shadow: inset 0 1px 2px rgba(8, 26, 58, .12); }
.progression__barre > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.progression__texte { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--texte-doux); white-space: nowrap; }
.progression__texte .icone { width: 15px; height: 15px; }
.progression--termine .progression__barre > span { background: linear-gradient(90deg, var(--vert), #2dd4bf); }
.progression--termine .progression__texte { color: var(--vert-fonce); }
.vignette__progression { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(8, 26, 58, .55); }
.vignette__progression > span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.vignette--vue .vignette__progression > span { background: linear-gradient(90deg, var(--vert), #2dd4bf); }
.vignette--vue .vignette__image::before { content: none; }
.vignette__etat--commencee { color: var(--bleu-fonce); }
.vignette--attente .vignette__lien { cursor: default; }

/* Mes vidéos sur téléphone: modules en accordéon (site.js), un seul ouvert à la fois. */
.bibliotheque__bascule { display: none; }
@media (max-width: 599px) {
  .section--compte [data-accordeon] { margin: 0 0 12px; padding: 16px; border-radius: 18px; background: var(--fond-carte); border: 1px solid var(--bordure-douce); box-shadow: var(--ombre-carte); }
  .section--compte [data-accordeon] .bibliotheque__entete { position: relative; padding: 0 48px 0 0; margin-bottom: 16px; border-bottom: 0; cursor: pointer; }
  .bibliotheque__bascule { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid #cfe0fb; background: #fff; cursor: pointer; }
  .bibliotheque__bascule::before { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: translateY(-2px) rotate(45deg); transition: transform var(--transition); }
  [data-accordeon]:not(.est-ferme) .bibliotheque__bascule { background: var(--nuit); border-color: var(--nuit); }
  [data-accordeon]:not(.est-ferme) .bibliotheque__bascule::before { border-color: #fff; transform: translateY(2px) rotate(-135deg); }
  [data-accordeon].est-ferme .bibliotheque__entete { margin-bottom: 0; }
  [data-accordeon].est-ferme :is(.bibliotheque__grille, .bibliotheque__etat, .bibliotheque__sous), [data-accordeon].est-ferme > .note { display: none; }
}

/* Lecteur: titre de la vidéo au-dessus de l'image; sur téléphone (jusqu'à 767 px), la liste du module sur une seule colonne. */
.lecteur-mise__entete { margin: 0 0 16px; }
.lecteur-mise__entete .surtitre { margin-bottom: 8px; }
.lecteur-mise__video-titre { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
@media (max-width: 767px) {
  .bibliotheque__grille--liste { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bibliotheque__grille--liste .vignette__lien { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-radius: 14px; }
  .bibliotheque__grille--liste .vignette__corps { padding: 10px 12px; gap: 4px; justify-content: center; }
  .bibliotheque__grille--liste .vignette__titre { font-size: .95rem; }
  .bibliotheque__grille--liste .vignette__image--dessinee .vignette__bouton { display: none; }
}

/* 28. Relecture du 13.10.2026 (8e série: 13 remarques de David) --------------------------------------------------------- */
/* Pied: le sélecteur de langue sur la même ligne que les trois icônes des réseaux sociaux (toutes les pages). */
.pied__reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.pied__reseaux .pied__social, .pied__reseaux .langues--pied { margin-top: 0; }
/* Espace élève: le bouton du sélecteur n'existe que sur téléphone, avec le script. */
.compte-menu__bascule { display: none; }

@media (max-width: 599px) {
  .pied__reseaux { justify-content: center; }

  /* Paragraphes en pleine largeur: « text-wrap: pretty » raccourcissait les premières lignes (sauts de ligne indésirables).
     Les intros centrées gardent leur équilibrage (règles de classe plus fortes). */
  p, li, dd, figcaption, .chapeau { text-wrap: wrap; }

  /* Tableaux de prix: la pastille du prix passe au-dessus du nom de la prestation. */
  .tarifs__table td { order: -1; }

  /* Pages de cours, section des tarifs: sur-titre et titre centrés. */
  #tarifs .deux-colonnes > div > .surtitre { display: flex; justify-content: center; text-align: center; }
  #tarifs .deux-colonnes > div > .surtitre::after { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; flex: none; margin-top: calc(.72em - 1px); }
  #tarifs .deux-colonnes > div > h2 { text-align: center; }

  /* Modules vidéos: « Choisir un module » centré, pleine largeur. */
  .presentation__texte > .bouton { display: flex; width: 100%; }

  /* Espace élève: menu en sélecteur compact (bouton qui ouvre la liste). */
  .js .compte-menu { position: relative; z-index: 30; margin-bottom: 28px; }
  .js .lecteur-mise + .compte-menu, .js .tableau-defilant + .compte-menu { margin: 32px 0 0; }
  .js .compte-menu__bascule { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 9px 12px 9px 18px; border-radius: 16px; border: 1px solid var(--lisere, var(--bordure-douce)); background: var(--fond-carte); box-shadow: var(--ombre-carte); color: var(--bleu-fonce); text-align: left; cursor: pointer; font: inherit; }
  .js .compte-menu__bascule:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
  .compte-menu__courant { display: grid; gap: 2px; min-width: 0; font-family: var(--titres); font-weight: 700; font-size: 1rem; line-height: 1.25; }
  .compte-menu__courant small { font-family: var(--texte-police); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
  .compte-menu__chevron { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ciel-voile); border: 1px solid #d9e7fb; transition: background-color var(--transition), border-color var(--transition); }
  .compte-menu__chevron::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: translateY(-2px) rotate(45deg); transition: transform var(--transition); }
  .compte-menu.est-ouvert .compte-menu__chevron { background: var(--nuit); border-color: var(--nuit); }
  .compte-menu.est-ouvert .compte-menu__chevron::before { border-color: #fff; transform: translateY(2px) rotate(-135deg); }
  .js .compte-menu ul { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 2px; margin: 0; padding: 6px; background: #fff; box-shadow: 0 24px 48px -18px rgba(8, 26, 58, .35), var(--ombre-carte); }
  .js .compte-menu:not(.est-ouvert) ul { display: none; }
  .js .compte-menu a, .js .compte-menu .lien-bouton { display: flex; width: 100%; min-height: 48px; padding: 10px 14px; font-size: .96rem; }
  .js .compte-menu__fin { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--bordure-douce); }
  .js .compte-menu__fin form { display: block; }
  /* Liste ouverte sur mobile: de simples liens texte, pas des boutons (remarque de David du 13.10.2026). */
  .js .compte-menu ul { padding: 4px 16px; gap: 0; grid-template-columns: 1fr; justify-content: stretch; }
  .js .compte-menu li { width: 100%; }
  .js .compte-menu li + li { border-top: 1px solid var(--bordure-douce); }
  .js .compte-menu li a, .js .compte-menu li .lien-bouton { justify-content: center; }
  .js .compte-menu a, .js .compte-menu .lien-bouton { min-height: 46px; padding: 12px 2px; border-radius: 0; background: none; box-shadow: none; text-shadow: none; color: var(--bleu-fonce); font-family: var(--texte-police); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
  .js .compte-menu a:hover, .js .compte-menu .lien-bouton:hover { background: none; color: var(--bleu); text-decoration-color: currentColor; }
  .js .compte-menu a.est-actif { background: none; box-shadow: none; text-shadow: none; color: var(--bleu); font-weight: 700; text-decoration-color: currentColor; }
  .js .compte-menu .lien-bouton { color: var(--texte-doux); }
  .js .compte-menu__fin { margin: 0; padding-top: 0; }
}

/* Lecteur chargé au clic (15.10.2026): bouton lecture posé sur la vignette, même pastille que les vignettes des vidéos. */
.lecteur__lancer { width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0; border: 0; cursor: pointer; font: inherit; }
.lecteur__lancer .icone { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; stroke: none; }
.lecteur__lancer:hover { transform: scale(1.08); }
.lecteur__lancer:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.lecteur__lancer[hidden] { display: none; }
.lecteur:not([controls]) { cursor: pointer; }