/* ==========================================================
   CertiForma — site vitrine (lot 11), d'après la maquette validée a2-fiduciaire.html.
   Système de design : docs/site-vitrine/04-systeme-design.md. Aucun style dans les pages (CSP).
   ========================================================== */
@font-face { font-family: "Brygada 1918"; src: url("../polices/brygada-1918-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url("../polices/brygada-1918-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url("../polices/brygada-1918-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url("../polices/brygada-1918-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../polices/hanken-grotesk-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../polices/hanken-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../polices/hanken-grotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Couleurs (identité A) */
  --encre: #12284B;
  --encre-2: #1B2F4F;
  --papier: #EAECF0;
  --bloc: #DFE2E7;            /* blocs arrondis, plus soutenus que le fond */
  --bloc-survol: #D4D8DF;
  --feuille: #FFFFFF;
  --trame: #A8B2C3;
  --trame-sombre: #2A3D5C;
  --gris: #4E5560;
  --filet: #C8CDD6;
  --surligne: #BEC9DA;        /* marqueur sous un mot des titres */
  --cobalt: #2742C9;
  --cobalt-fonce: #1B2F96;
  --cobalt-clair: #AFC0FF;
  --succes: #17673F;
  --erreur: #A2231D;
  /* Typographie */
  --f-titre: "Brygada 1918", Georgia, serif;
  --f-texte: "Hanken Grotesk", system-ui, sans-serif;
  --t-hero: clamp(2.6rem, 1.5rem + 4.2vw, 5.25rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-corps: 1.0625rem;
  --t-petit: .9375rem;
  /* Espacements */
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4.5rem; --e-7: 7rem;
  /* Rayons */
  --r-champ: 12px; --r-bloc: 22px; --r-pilule: 999px;
  --largeur: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 var(--t-corps)/1.6 var(--f-texte); }
img, svg { display: block; max-width: 100%; }
a { color: var(--cobalt); text-underline-offset: .18em; }
a:hover { color: var(--cobalt-fonce); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 500; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; }
mark { background: linear-gradient(transparent 58%, var(--surligne) 58%, var(--surligne) 92%, transparent 92%); color: inherit; padding: 0 .08em; }
.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.insecable { white-space: nowrap; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--feuille); padding: .75rem 1rem; z-index: 50; }
.evitement:focus { top: 1rem; }

/* ---------- Boutons pilule ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.5rem; border-radius: var(--r-pilule); font: 600 1rem/1.2 var(--f-texte); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.bouton--principal { background: var(--cobalt); color: #fff; }
.bouton--principal:hover { background: var(--cobalt-fonce); color: #fff; }
.bouton--secondaire { border-color: var(--encre); color: var(--encre); background: transparent; }
.bouton--secondaire:hover { background: var(--encre); color: var(--papier); }
.bouton--verre { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(18,40,75,.35); }
.bouton--verre:hover { background: #fff; color: var(--encre); }

/* ---------- En-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.entete--plein { background: var(--papier); border-color: var(--filet); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 72px; }
.marque { display: inline-flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; transition: color .3s; }
.marque svg { width: 34px; height: 34px; }
.marque__nom { font: 600 1.375rem/1 var(--f-titre); letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: var(--e-4); }
.nav__liens { display: flex; gap: var(--e-4); list-style: none; margin: 0; padding: 0; }
.nav__liens a { color: #fff; text-decoration: none; font: 400 1.0625rem/1.2 var(--f-titre); padding: .5rem 0; border-bottom: 1px solid transparent; text-shadow: 0 1px 10px rgba(10,18,28,.45); transition: color .3s; } /* police du logo (21/10/2026) */
.nav__liens a:hover { border-color: currentColor; }
.nav__menu { display: none; }
.entete--plein .marque, .entete--plein .nav__liens a { color: var(--encre); text-shadow: none; }
.entete .nav__menu { color: #fff; border-color: rgba(255,255,255,.7); }
.entete--plein .nav__menu { color: var(--encre); border-color: var(--encre); }

/* ---------- Intro (à la manière de Mercury) ---------- */
.intro { position: relative; min-height: max(100vh, 760px); overflow: hidden; color: #fff; display: grid; grid-template-rows: auto 1fr; }
.intro__scene { position: absolute; inset: 0; transform-origin: 50% 82%; }
.emplacement { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 100%, #2B3F60 0%, #182C4C 45%, #12284B 100%); display: grid; place-items: end center; padding: var(--e-4); }
.emplacement::after { content: none; }
.intro__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,28,.62) 0%, rgba(10,18,28,.42) 40%, rgba(10,18,28,.12) 62%, rgba(10,18,28,0) 75%); pointer-events: none; }
/* Scène d'ouverture : visible seulement quand les animations sont actives (classe posée par le script) */
.scene { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 30; overflow: hidden; background: #1B2430; }
.avec-scene .scene { display: block; }
.scene__monde { position: absolute; }
.scene__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__ecran { position: absolute; overflow: hidden; background: var(--encre); }
.scene__page { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; overflow: hidden; pointer-events: none; }
.scene__page .intro { min-height: 0; height: 100%; }
.scene__page .entete { position: absolute; }
.scene::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; z-index: 1; background: linear-gradient(180deg, rgba(10,18,28,.55) 0%, rgba(10,18,28,.25) 55%, rgba(10,18,28,0) 100%); pointer-events: none; }
.scene__slogan { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(72px, 13vh, 140px); padding-inline: 1rem; text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(10,18,28,.4); }
.scene__nom { display: inline-flex; align-items: center; gap: .3em; font: 500 var(--t-hero)/1 var(--f-titre); letter-spacing: -.015em; }
.scene__nom svg { width: .82em; height: .82em; flex: none; }
.scene__signature { margin-top: var(--e-2); font: italic 400 clamp(1.15rem, .9rem + 1vw, 1.75rem)/1.3 var(--f-titre); color: #F1F4F6; }
.scene__indice { z-index: 2; position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: grid; justify-items: center; gap: .5rem; color: #fff; font-weight: 500; font-size: var(--t-petit); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.scene__indice span { width: 2px; height: 34px; background: linear-gradient(#fff, rgba(255,255,255,0)); }
/* Photos (voir docs/site-vitrine/credits.md) */
.emplacement__photo { position: absolute; top: 0; left: 0; width: 100%; height: 122%; object-fit: cover; object-position: 50% 0; } /* plus haute que l'intro : le bureau reste sous le texte */
.panneau__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panneau__visuel--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,40,75,0) 35%, rgba(18,40,75,.45) 100%); }
.panneau__visuel--photo > :not(img) { position: relative; z-index: 2; }
.verifier__photo { margin: var(--e-2) 0 0; border-radius: var(--r-bloc); overflow: hidden; aspect-ratio: 3 / 2; }
.verifier__photo img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-photo { position: relative; height: clamp(280px, 52vw, 560px); overflow: hidden; background: var(--encre); }
.bandeau-photo img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
.intro__contenu { position: relative; z-index: 2; text-align: center; padding-top: calc(72px + var(--e-6)); }
.intro__sur { font: italic 400 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.3 var(--f-titre); color: #F1F4F6; text-shadow: 0 1px 14px rgba(10,18,28,.5); margin-bottom: var(--e-3); } /* même style que la signature de la scène (21/10/2026) */
.intro h1 { font-size: var(--t-hero); font-weight: 400; line-height: 1.04; text-shadow: 0 2px 24px rgba(10,18,28,.35); }
.intro h1 em { font-style: italic; }
.intro h1 .ligne { display: block; overflow: hidden; padding-bottom: .08em; }
.intro h1 .ligne > span { display: inline-block; }
.intro__accroche { margin: var(--e-3) auto 0; max-width: 40rem; font-size: 1.1875rem; color: #F1F4F6; text-shadow: 0 1px 12px rgba(10,18,28,.45); }
.recherche { margin: var(--e-4) auto 0; max-width: 40rem; }
.recherche__ligne { display: flex; align-items: center; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.recherche__champ { display: flex; align-items: center; flex: 1 1 22rem; max-width: 28rem; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--r-pilule); padding: .3rem .3rem .3rem 1.2rem; transition: background-color .2s, border-color .2s; }
.recherche__champ:focus-within { background: rgba(255,255,255,.95); border-color: #fff; }
.recherche__champ input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font: 600 1.0625rem/1.2 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; min-height: 44px; }
.recherche__champ input::placeholder { color: rgba(255,255,255,.75); letter-spacing: .06em; }
.recherche__champ:focus-within input { color: var(--encre); }
.recherche__champ:focus-within input::placeholder { color: #7B828D; }
.recherche__champ input:focus { outline: none; }
.recherche__champ:focus-within { outline: 3px solid var(--cobalt-clair); outline-offset: 2px; }
.recherche__aide { margin-top: var(--e-2); font-size: var(--t-petit); color: #D2D9E3; }
.recherche .message { text-align: left; max-width: 34rem; margin-inline: auto; }

/* ---------- Attestation stylisée ---------- */
.attestation { position: relative; aspect-ratio: 297 / 210; background: var(--feuille); color: #1D222B; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); padding: 5.2%; container-type: inline-size; border-radius: 4px; }
.attestation::before { content: ""; position: absolute; inset: 3%; border: 1px solid #9CA6B6; outline: 3px double #C8CFD9; outline-offset: -8px; pointer-events: none; }
.attestation__fond { position: absolute; inset: 0; color: #E3E6EC; overflow: hidden; }
.attestation__fond svg { position: absolute; width: 90%; left: 5%; top: -20%; }
.attestation__contenu { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; }
.attestation__societe { font: 600 3.1cqi/1.2 var(--f-texte); letter-spacing: .08em; color: #4B5462; }
.attestation__titre { font: 500 6.4cqi/1.1 var(--f-titre); margin-top: 3cqi; letter-spacing: .02em; }
.attestation__corps { font: 400 3.3cqi/1.5 var(--f-texte); margin-top: 2.6cqi; color: #333A45; }
.attestation__nom { display: block; font: italic 400 6cqi/1.15 var(--f-titre); color: #0E1C32; margin: .6cqi 0; }
.attestation__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi; }
.attestation__numero { font: 600 3cqi/1.3 var(--f-texte); letter-spacing: .04em; }
.attestation__numero small { display: block; font-weight: 400; color: #5A616C; letter-spacing: 0; }
.attestation__qr { width: 15cqi; aspect-ratio: 1; background: #0E1C32; -webkit-mask: url("../images/qr-fictif.svg") center / contain no-repeat; mask: url("../images/qr-fictif.svg") center / contain no-repeat; }
.attestation__cachet { width: 17cqi; aspect-ratio: 1; color: #2F4FA8; opacity: .8; rotate: -12deg; }
.attestation__mention { position: absolute; top: 4%; right: 4%; font: 600 2.4cqi/1 var(--f-texte); background: var(--encre); color: var(--papier); padding: 1cqi 1.6cqi; letter-spacing: .02em; border-radius: 3px; }
.pastille { display: inline-block; vertical-align: middle; width: 4.6cqi; height: 4.6cqi; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--cobalt); color: #fff; font: 600 2.5cqi/4.6cqi var(--f-texte); text-align: center; box-shadow: 0 0 0 .8cqi rgba(39,66,201,.18); margin-left: 1.2cqi; letter-spacing: 0; font-style: normal; }
.attestation__qr-zone { position: relative; }
.pastille--qr { position: absolute; right: -2cqi; top: -2cqi; margin: 0; }

/* ---------- Accès directs ---------- */
.portes { background: var(--encre); color: var(--papier); position: relative; z-index: 3; }
.portes ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.portes li + li { border-left: 1px solid var(--trame-sombre); }
.portes a { display: grid; gap: .25rem; padding: var(--e-3) var(--e-3) var(--e-3) 0; color: var(--papier); text-decoration: none; min-height: 44px; }
.portes li + li a { padding-left: var(--e-3); }
.portes a span:first-child { font: 400 1.125rem/1.3 var(--f-titre); color: #CED5E1; }
.portes a span:last-child { font-weight: 600; color: #fff; }
.portes a:hover span:last-child { color: var(--cobalt-clair); }

/* ---------- Sections ---------- */
.section { padding: var(--e-7) 0; }
.section--blanche { background: var(--feuille); }
.tete { text-align: center; max-width: 46rem; margin: 0 auto var(--e-6); display: grid; gap: var(--e-3); }
.tete h2 { font-size: var(--t-h2); }
.tete p { color: var(--encre-2); font-size: 1.125rem; }

/* Avant / après : deux blocs arrondis */
.comparaison { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-3); }
.carte { border-radius: var(--r-bloc); padding: var(--e-5); }
.carte--avant { background: var(--bloc); }
.carte--apres { background: var(--feuille); box-shadow: 0 1px 0 rgba(18,40,75,.06); }
.carte h3 { font-size: var(--t-h3); margin-bottom: var(--e-3); }
.carte--avant h3 { color: var(--gris); }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.liste li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; }
.liste svg { width: 22px; height: 22px; margin-top: .15rem; }
.carte--avant li { color: var(--gris); }
.carte--avant svg { color: #89909B; }
.carte--apres svg { color: var(--cobalt); }

/* Parcours en onglets (à la manière d'Edusign) */
.onglets__liste { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: var(--e-5); border-bottom: 1px solid var(--filet); }
.onglet { appearance: none; background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; padding: .9rem 1.1rem; font: 500 1rem/1.2 var(--f-texte); color: var(--gris); cursor: pointer; min-height: 48px; display: inline-flex; gap: .55rem; align-items: center; transition: color .2s, border-color .2s; }
.onglet span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font: italic 400 .9375rem/1 var(--f-titre); }
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] { color: var(--encre); border-color: var(--cobalt); font-weight: 600; }
.onglet[aria-selected="true"] span { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.panneau { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); align-items: center; }
.panneau + .panneau { margin-top: var(--e-6); }
.js .panneau + .panneau { margin-top: 0; }
.panneau__num { font: italic 400 1.0625rem/1 var(--f-titre); color: var(--gris); margin-bottom: var(--e-2); }
.panneau h3 { font-size: var(--t-h2); margin-bottom: var(--e-3); }
.panneau p { color: var(--encre-2); }
.panneau .liste { margin-top: var(--e-3); }
.panneau .liste svg { color: var(--cobalt); }
.panneau__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.panneau__visuel { background: var(--bloc); border-radius: var(--r-bloc); aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; position: relative; }
.js .onglets__titre-panneau { display: none; }
/* Visuels dessinés des étapes */
.tel { width: 40%; aspect-ratio: 9 / 18.5; background: var(--feuille); border: 8px solid var(--encre); border-radius: 26px; padding: 10% 8%; display: grid; align-content: start; gap: 6%; container-type: inline-size; box-shadow: 0 24px 40px -24px rgba(18,40,75,.6); }
.tel__titre { font: italic 400 10cqi/1.1 var(--f-titre); }
.tel__libelle { font: 500 7.5cqi/1.2 var(--f-texte); color: var(--gris); margin-bottom: -3%; }
.tel__champ { height: 13cqi; border: 1.5px solid #A8AFBA; border-radius: 6px; }
.tel__case { display: flex; gap: 4cqi; align-items: center; font: 500 7.5cqi/1.2 var(--f-texte); }
.tel__case::before { content: ""; width: 8cqi; height: 8cqi; border-radius: 2px; background: var(--cobalt); }
.tel__bouton { height: 15cqi; border-radius: 99px; background: var(--cobalt); margin-top: 4%; }
.tel__bandeau { background: #E2F1E8; color: var(--succes); border: 1.5px solid var(--succes); border-radius: 6px; font: 600 7.5cqi/1.25 var(--f-texte); padding: 5cqi; text-align: center; }
.tel__ligne { height: 5cqi; background: #DCE0E7; border-radius: 3px; }
.tel__ligne--court { width: 60%; }
.pile { position: relative; width: 66%; aspect-ratio: 297 / 210; }
.pile .attestation { position: absolute; inset: 0; box-shadow: 0 12px 30px -14px rgba(18,40,75,.55); }
.pile .attestation:nth-child(1) { rotate: -8deg; translate: -7% 5%; }
.pile .attestation:nth-child(2) { rotate: -3deg; translate: -3% 2%; }
.pile .attestation:nth-child(3) { rotate: 3deg; }
.courriel { width: 72%; background: var(--feuille); border-radius: 14px; padding: 6%; display: grid; gap: 5%; box-shadow: 0 24px 40px -24px rgba(18,40,75,.6); container-type: inline-size; }
.courriel__objet { font: 600 4.6cqi/1.25 var(--f-texte); }
.courriel__pj { display: flex; gap: 3cqi; flex-wrap: wrap; }
.courriel__pj span { display: inline-flex; align-items: center; gap: 2cqi; border: 1.5px solid var(--filet); border-radius: 8px; padding: 2.2cqi 3cqi; font: 500 3.6cqi/1 var(--f-texte); }
.courriel__pj span::before { content: "PDF"; font: 700 2.6cqi/1 var(--f-texte); color: #fff; background: #A2231D; border-radius: 3px; padding: 1.2cqi 1.4cqi; }
.courriel__pj span.zip::before { content: "ZIP"; background: var(--encre); }

/* Anatomie */
.anatomie { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-6); align-items: start; }
.anatomie__visuel { position: sticky; top: 110px; background: var(--bloc); border-radius: var(--r-bloc); padding: 7%; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); counter-reset: note; }
.notes li { counter-increment: note; display: grid; grid-template-columns: 30px 1fr; gap: .9rem; }
.notes li::before { content: counter(note); width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--cobalt); color: var(--cobalt); font: 600 .875rem/27px var(--f-texte); text-align: center; }
.notes strong { display: block; font: 500 1.1875rem/1.3 var(--f-titre); margin-bottom: .25rem; }
.notes span { color: var(--encre-2); }
.anatomie__fin { margin-top: var(--e-4); font: italic 400 1.3rem/1.4 var(--f-titre); padding-top: var(--e-3); border-top: 1px solid var(--encre); }

/* Vérification */
.verifier { background: var(--encre); color: var(--papier); position: relative; overflow: hidden; }
.verifier__rosace { position: absolute; width: 900px; left: -380px; bottom: -420px; color: var(--trame-sombre); pointer-events: none; }
.verifier__grille { display: grid; grid-template-columns: 5fr 6fr; gap: var(--e-6); position: relative; align-items: start; }
.verifier__texte { display: grid; gap: var(--e-3); }
.verifier__texte h2 { font-size: var(--t-h2); }
.verifier__texte p { color: #D2D7DF; max-width: 32rem; }
.verifier__qr { display: flex; gap: var(--e-3); align-items: center; }
.verifier__qr-icone { width: 64px; height: 64px; flex: none; background: var(--papier); -webkit-mask: url("../images/qr-fictif.svg") center / contain no-repeat; mask: url("../images/qr-fictif.svg") center / contain no-repeat; }
.guichet { background: var(--papier); color: var(--encre); padding: var(--e-5); border-radius: var(--r-bloc); }
.champ { display: grid; gap: .45rem; align-content: start; }
.champ label { font-weight: 600; }
.champ__aide { font-size: var(--t-petit); color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; font: 400 1.0625rem/1.4 var(--f-texte); color: var(--encre); background: var(--feuille); border: 1.5px solid #8E96A4; border-radius: var(--r-champ); padding: .8rem 1rem; min-height: 50px; transition: border-color .2s, box-shadow .2s; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(39,66,201,.22); }
.champ--numero input { font: 600 clamp(1.4rem, 1rem + 1.6vw, 2rem)/1.2 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; padding: .9rem 1.2rem; border-radius: var(--r-pilule); }
.guichet__ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2); align-items: center; margin-top: var(--e-1); }
.guichet__ligne .bouton { min-height: 60px; padding-inline: 1.8rem; }
.guichet__foi { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--filet); display: grid; grid-template-columns: 26px 1fr; gap: .8rem; font-size: var(--t-petit); color: var(--encre-2); }
.guichet__foi svg { width: 26px; height: 26px; color: var(--succes); }
.message { margin-top: var(--e-2); padding: .8rem 1rem; border-left: 4px solid; border-radius: 8px; font-size: var(--t-petit); }
.message--erreur { border-color: var(--erreur); background: #FBEDEC; color: #6E1712; }
.message--info { border-color: var(--cobalt); background: #EEF1FE; color: #1B2F96; }

/* Pour chacun : blocs arrondis 2 + 2 */
.publics { display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-3); }
.publics .bloc:nth-child(3) { grid-column: 1 / 2; }
.publics .bloc:nth-child(2), .publics .bloc:nth-child(3) { }
.publics { grid-template-areas: "a b" "c d" "e f"; }
.publics .bloc:nth-child(1) { grid-area: a; } .publics .bloc:nth-child(2) { grid-area: b; }
.publics .bloc:nth-child(3) { grid-area: c; grid-column: auto; } .publics .bloc:nth-child(4) { grid-area: d; }
.publics .bloc:nth-child(5) { grid-area: e; } .publics .bloc:nth-child(6) { grid-area: f; }
.publics.inverse { grid-template-columns: 5fr 7fr; }

/* Blocs arrondis (Edusign) */
.bloc { background: var(--bloc); border-radius: var(--r-bloc); padding: var(--e-4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-4); min-height: 15rem; transition: background-color .2s; }
.bloc:hover { background: var(--bloc-survol); }
.bloc h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); font-weight: 500; }
.bloc p { color: var(--encre-2); max-width: 30rem; }
.bloc__bas { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-3); }
.bloc__icone { width: 52px; height: 52px; flex: none; color: var(--encre); }
.garanties { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e-3); }
.garanties .bloc { grid-column: span 2; }
.garanties .bloc:nth-child(1), .garanties .bloc:nth-child(2) { grid-column: span 3; min-height: 17rem; }
.garanties .bloc:nth-child(1) { background: var(--encre); color: var(--papier); }
.garanties .bloc:nth-child(1) p { color: #D2D7DF; }
.garanties .bloc:nth-child(1) .bloc__icone { color: var(--papier); }
.garanties .bloc:nth-child(1):hover { background: var(--encre-2); }
.garanties .bloc--large { grid-column: 1 / -1 !important; /* toute la largeur, sans créer de colonnes en plus sur téléphone (21/10/2026) */ min-height: 0; flex-direction: row; align-items: center; }

/* Et aussi */
.aussi { background: var(--feuille); border-radius: var(--r-bloc); padding: var(--e-5); display: grid; grid-template-columns: 4fr 8fr; gap: var(--e-5); }
.aussi h2 { font-size: var(--t-h2); }
.aussi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-5); }
.aussi li { padding: var(--e-2) 0; border-top: 1px solid var(--filet); display: grid; grid-template-columns: 22px 1fr; gap: .7rem; }
.aussi li svg { width: 22px; height: 22px; color: var(--cobalt); margin-top: .15rem; }
.aussi strong { font-weight: 600; }

/* Devis */
.devis__grille { display: grid; grid-template-columns: 4fr 7fr; gap: var(--e-6); align-items: start; }
.devis__texte { display: grid; gap: var(--e-3); position: sticky; top: 110px; }
.devis__texte h2 { font-size: var(--t-h2); }
.devis__texte p { color: var(--encre-2); }
.devis__contact { background: var(--bloc); border-radius: 16px; padding: var(--e-3); }
.formulaire { background: var(--feuille); border-radius: var(--r-bloc); padding: var(--e-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.formulaire .plein { grid-column: 1 / -1; }
.obligatoire { color: var(--erreur); }
.facultatif { font-weight: 400; color: var(--gris); }
.case { display: grid; grid-template-columns: 24px 1fr; gap: .8rem; align-items: start; font-size: var(--t-petit); }
.case input { width: 22px; height: 22px; accent-color: var(--cobalt); margin: .1rem 0 0; }
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.formulaire__pied p { font-size: var(--t-petit); color: var(--gris); max-width: 26rem; }
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-color: var(--erreur); }
.champ__erreur { color: var(--erreur); font-size: var(--t-petit); font-weight: 500; }
.confirmation { padding: var(--e-5); border-radius: var(--r-bloc); background: #E3F1E9; border: 1.5px solid var(--succes); }
.confirmation h3 { font-size: var(--t-h2); margin-bottom: var(--e-2); color: var(--succes); }
.piege { position: absolute; left: -9999px; }

/* FAQ */
.faq { max-width: 52rem; margin: 0 auto; }
.faq__groupe + .faq__groupe { margin-top: var(--e-5); }
.faq__groupe h3 { font: 600 1rem/1.3 var(--f-texte); color: var(--gris); margin-bottom: var(--e-2); }
.question { background: var(--bloc); border-radius: 16px; margin-bottom: .6rem; transition: background-color .2s; }
.question[open] { background: var(--feuille); }
.question summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-3); font: 500 1.1875rem/1.3 var(--f-titre); min-height: 44px; }
.question summary::-webkit-details-marker { display: none; }
.question summary svg { width: 22px; height: 22px; flex: none; transition: rotate .25s; margin-top: .15rem; color: var(--cobalt); }
.question[open] summary svg { rotate: 45deg; }
.question p { padding: 0 var(--e-3) var(--e-3); max-width: 44rem; color: var(--encre-2); }

/* Pied */
.pied { background: var(--encre); color: #D2D7DF; padding: var(--e-6) 0 var(--e-4); }
.pied__grille { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: var(--e-4); }
.pied__marque { display: grid; gap: var(--e-2); align-content: start; }
.pied .marque { color: var(--papier); }
.pied__signature { font: italic 400 1.25rem/1.35 var(--f-titre); color: var(--papier); max-width: 22rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pied a { color: var(--papier); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__contact { display: grid; gap: .6rem; align-content: start; }
.pied__bas { margin-top: var(--e-6); padding-top: var(--e-3); border-top: 1px solid var(--trame-sombre); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-petit); }

/* ---------- En-tête compact ---------- */
@media (max-width: 960px) {
  .nav__liens, .nav > .bouton--principal { display: none; }
  .nav__menu { display: inline-flex; min-height: 44px; padding: .5rem 1.2rem; }
  .entete.ouvert { background: var(--papier); border-color: var(--filet); }
  .entete.ouvert .marque, .entete.ouvert .nav__menu { color: var(--encre); border-color: var(--encre); }
  .entete.ouvert .nav { position: absolute; top: 72px; left: 0; right: 0; background: var(--papier); flex-direction: column; align-items: stretch; padding: var(--e-3) 1.25rem var(--e-4); border-bottom: 1px solid var(--filet); }
  .entete.ouvert .nav__liens { display: grid; gap: 0; }
  .entete.ouvert .nav__liens a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--filet); color: var(--encre); text-shadow: none; }
  .entete.ouvert .nav > .bouton--principal { display: inline-flex; margin-top: var(--e-3); }
  .entete.ouvert .nav__menu { position: absolute; top: 12px; right: 1.25rem; }
  /* Survol (qui reste actif après un toucher sur téléphone) : fond léger, texte toujours lisible (21/10/2026). */
  .entete .nav__menu:hover { background: rgba(255,255,255,.16); color: #fff; }
  .entete--plein .nav__menu:hover, .entete.ouvert .nav__menu:hover { background: var(--bloc); color: var(--encre); }
}
/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .comparaison { grid-template-columns: 1fr 1fr; }
  .panneau { grid-template-columns: 1fr; gap: var(--e-4); }
  .panneau__visuel { order: -1; aspect-ratio: 16 / 10; }
  .anatomie { grid-template-columns: 1fr; }
  .anatomie__visuel { position: relative; top: 0; }
  .notes { grid-template-columns: 1fr 1fr; }
  .verifier__grille { grid-template-columns: 1fr; gap: var(--e-5); }
  .devis__grille { grid-template-columns: 1fr; gap: var(--e-5); }
  .devis__texte { position: static; }
  .garanties { grid-template-columns: repeat(2, 1fr); }
  .garanties .bloc, .garanties .bloc:nth-child(1), .garanties .bloc:nth-child(2) { grid-column: span 1; }
  .aussi { grid-template-columns: 1fr; gap: var(--e-3); }
}
/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  :root { --e-6: 3rem; --e-7: 4.5rem; }
  .conteneur { width: min(100% - 2rem, var(--largeur)); }
  .entete.ouvert .nav { padding-inline: 1rem; }
  .entete.ouvert .nav__menu { right: 1rem; }
  .intro { min-height: 100svh; }
  .intro__contenu { padding-top: calc(72px + var(--e-4)); }
  .intro__accroche { font-size: 1.0625rem; }
  .recherche__champ { flex-basis: 100%; max-width: none; }
  .recherche__ligne > .bouton { flex: 1 1 100%; }
  .portes ul { grid-template-columns: 1fr; }
  .portes li + li { border-left: 0; border-top: 1px solid var(--trame-sombre); }
  .portes a, .portes li + li a { padding: var(--e-3) 0; }
  .comparaison { grid-template-columns: 1fr; }
  .carte { padding: var(--e-4) var(--e-3); }
  .js .onglets__liste { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .onglet { flex: none; }
  .tel { width: 46%; }
  .notes { grid-template-columns: 1fr; }
  .guichet { padding: var(--e-3); }
  .guichet__ligne { grid-template-columns: 1fr; }
  .publics, .publics.inverse { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
  .garanties { grid-template-columns: 1fr; }
  .garanties .bloc--large { flex-direction: column; align-items: stretch; }
  .bloc { min-height: 0; padding: var(--e-3); }
  .aussi { padding: var(--e-4) var(--e-3); }
  .aussi ul { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; padding: var(--e-4) var(--e-3); }
  .pied__grille { grid-template-columns: 1fr; }
}

/* ---------- Ajouts du site réel ---------- */
/* Pictogrammes et définitions SVG communs (masqués) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Formulaire de devis posé sur la section blanche */
.formulaire--papier { background: var(--papier); }
/* En-tête des pages légales : toujours plein */
.page-simple .entete { position: sticky; }
.legal { padding: var(--e-6) 0 var(--e-7); }
.legal__contenu { max-width: 46rem; }
.legal h1 { font-size: var(--t-h2); margin-bottom: var(--e-4); }
.legal h2 { font-size: var(--t-h3); margin: var(--e-5) 0 var(--e-2); }
.legal p, .legal li { color: var(--encre-2); }
.legal p + p, .legal ul { margin-top: var(--e-2); }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--cobalt); }
.legal__retour { display: inline-block; margin-bottom: var(--e-4); color: var(--cobalt); font-weight: 500; }