/* ==========================================================================
   Tech Boost Pro — système de design
   Personnalité : moderne et dynamique. Grille de 8 px. WCAG AA.
   Aucune dépendance externe, aucune requête tierce.
   ========================================================================== */

/* ---------- 1. Polices auto-hébergées ------------------------------------- */

@font-face { font-family:"Archivo"; src:url("../fonts/archivo-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo"; src:url("../fonts/archivo-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("../fonts/publicsans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("../fonts/publicsans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Public Sans"; src:url("../fonts/publicsans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- 2. Jetons ------------------------------------------------------ */

:root {
  --encre: #050A30;
  --encre-900: #02061F;
  --encre-700: #0B1445;
  --encre-500: #142457;
  --bleu: #1256C4;
  --bleu-700: #0E44A1;
  --bleu-500: #2B72E0;
  --bleu-200: #C3D6F5;
  --bleu-100: #E4EDFB;
  --signal: #FDC84C;
  --signal-700: #C99A2E;
  --signal-100: #FEF3D6;

  --acier: #5A6781;
  --acier-400: #8A95AC;
  --acier-200: #D5DAE5;
  --acier-100: #EEF1F7;
  --papier: #FBFCFE;
  --blanc: #FFFFFF;

  --succes: #0E8A5F;
  --attention: #B7791F;
  --erreur: #C0392B;

  --fond: var(--papier);
  --fond-doux: var(--acier-100);
  --surface: var(--blanc);
  --bordure: var(--acier-200);
  --texte: var(--encre);
  --texte-doux: var(--acier);
  --action: var(--bleu);
  --action-forte: var(--bleu-700);

  --f-titre: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-texte: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --t9: clamp(3rem, 6.5vw, 5rem);
  --t8: clamp(2.4rem, 4.6vw, 3.5rem);
  --t7: clamp(1.9rem, 3.2vw, 2.6rem);
  --t6: clamp(1.4rem, 2.2vw, 1.75rem);
  --t5: 1.25rem;
  --t4: 1.125rem;
  --t3: 1rem;
  --t2: 0.9375rem;
  --t1: 0.8125rem;

  --e1: 4px;  --e2: 8px;  --e3: 16px; --e4: 24px; --e5: 32px;
  --e6: 48px; --e7: 64px; --e8: 96px; --e9: 128px;

  --r1: 4px; --r2: 8px; --r3: 12px; --r4: 20px; --rond: 999px;
  --o1: 0 1px 2px rgba(5,10,48,.06);
  --o2: 0 4px 12px rgba(5,10,48,.08);
  --o3: 0 12px 32px rgba(5,10,48,.12);
  --o4: 0 24px 64px rgba(5,10,48,.18);

  --d-rapide: 160ms; --d-normal: 260ms; --d-lent: 420ms;
  --c-sortie: cubic-bezier(.16,1,.3,1);
  --c-douce: cubic-bezier(.4,0,.2,1);
  --c-ressort: cubic-bezier(.34,1.56,.64,1);

  --large: 1240px;
  --etroit: 760px;
  --mesure: 68ch;
}

:root[data-theme="sombre"] {
  --fond: #050A30;
  --fond-doux: #0B1445;
  --surface: #0B1445;
  --bordure: #1E2F63;
  --texte: #EEF1F7;
  --texte-doux: #A9B4CC;
  --action: #5B92EE;
  --action-forte: #8AB2F4;
  --acier-200: #1E2F63;
  --acier-100: #0B1445;
  --blanc: #0B1445;
  --papier: #050A30;
}

/* ---------- 3. Base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveler { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-titre); margin: 0 0 var(--e3); text-wrap: balance; color: var(--texte); }
h1 { font-size: var(--t8); line-height: 1.06; letter-spacing: -.025em; font-weight: 700; }
h2 { font-size: var(--t7); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
h3 { font-size: var(--t6); line-height: 1.2;  letter-spacing: -.015em; font-weight: 600; }
h4 { font-size: var(--t5); line-height: 1.35; font-weight: 600; }

p { margin: 0 0 var(--e3); max-width: var(--mesure); }
strong { font-weight: 600; }

a { color: var(--action-forte); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--d-rapide) var(--c-douce); }
a:hover { color: var(--action); }

:focus-visible { outline: 3px solid var(--signal-700); outline-offset: 3px; border-radius: var(--r1); }
:root[data-theme="sombre"] :focus-visible { outline-color: var(--signal); }

img, svg { max-width: 100%; height: auto; }
figure { margin: 0; }
::selection { background: var(--signal); color: var(--encre); }

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--encre); color: #fff; padding: var(--e3) var(--e4); }
.lien-evitement:focus { left: 0; }

.visuellement-cachee { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 4. Structure --------------------------------------------------- */

.enveloppe { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--e4); }

.section { padding: var(--e8) 0; }
.section--serree { padding: var(--e7) 0; }
.section--doux { background: var(--fond-doux); }

.section--encre { background: var(--encre); color: #EEF1F7; position: relative; overflow: hidden; }
.section--encre h2, .section--encre h3, .section--encre h4 { color: #fff; }
.section--encre a { color: var(--bleu-200); }
.section--encre a:hover { color: #fff; }
.section--encre::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(18,86,196,.35) 0%, rgba(18,86,196,0) 68%);
  pointer-events: none;
}
.section--encre > * { position: relative; }

.mesure { max-width: var(--etroit); }

.surtitre {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--action-forte); margin-bottom: var(--e3);
}
.surtitre::before { content: ""; width: 24px; height: 2px; background: var(--signal); }
.section--encre .surtitre, .appel .surtitre, .heros .surtitre { color: var(--signal); }

.chapeau { font-size: var(--t4); color: var(--texte-doux); }
.section--encre .chapeau { color: #A9B4CC; }

.cadre { position: relative; padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + 4px); }
.cadre::before, .cadre::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 18px;
  border-top: 3px solid var(--bordure); border-bottom: 3px solid var(--bordure);
}
.cadre::before { left: 0; border-left: 3px solid var(--bordure); }
.cadre::after  { right: 0; border-right: 3px solid var(--bordure); }
.section--encre .cadre::before, .section--encre .cadre::after { border-color: var(--encre-500); }

/* ---------- 5. En-tête ----------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow var(--d-normal) var(--c-douce);
}
.entete.est-collee { box-shadow: var(--o2); }
.entete__interieur { display: flex; align-items: center; gap: var(--e4); min-height: 88px; }

.marque { display: inline-flex; align-items: center; flex-shrink: 0; }
.marque img { display: block; height: 44px; width: auto; transition: opacity var(--d-rapide) var(--c-douce); }
.marque:hover img { opacity: .82; }
.marque .logo-sombre { display: none; }
:root[data-theme="sombre"] .marque .logo-clair { display: none; }
:root[data-theme="sombre"] .marque .logo-sombre { display: block; }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: var(--e4); list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: inline-block; padding: var(--e2) 0; color: var(--texte); text-decoration: none; font-size: var(--t2); font-weight: 500; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--signal); transition: right var(--d-normal) var(--c-sortie); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--action-forte); }

.outils { display: flex; align-items: center; gap: var(--e2); }

.bascule-theme, .nav__bascule {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 var(--e3);
  background: none; border: 1px solid var(--bordure); border-radius: var(--r2);
  color: var(--texte); font: inherit; font-size: var(--t2); font-weight: 500; cursor: pointer;
  transition: background-color var(--d-rapide) var(--c-douce), border-color var(--d-rapide) var(--c-douce);
}
.bascule-theme:hover, .nav__bascule:hover { background: var(--fond-doux); border-color: var(--acier-400); }
.nav__bascule { display: none; }

.langues__liste { display: flex; gap: var(--e1); list-style: none; margin: 0; padding: 0; }
.langues a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 var(--e2);
  font-size: var(--t1); font-weight: 600; letter-spacing: .04em;
  text-decoration: none; color: var(--texte-doux); border-radius: var(--r2);
}
.langues a:hover { background: var(--fond-doux); color: var(--texte); }
.langues a[aria-current="true"] { background: var(--encre); color: #fff; }
:root[data-theme="sombre"] .langues a[aria-current="true"] { background: var(--bleu); }

/* ---------- 6. Boutons ----------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px; padding: 0 var(--e5);
  font-family: var(--f-texte); font-size: var(--t3); font-weight: 600;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--r2);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--d-rapide) var(--c-ressort), background-color var(--d-rapide) var(--c-douce), box-shadow var(--d-rapide) var(--c-douce);
}
.bouton:active { transform: translateY(1px); }
.bouton--principal { background: var(--bleu); color: #fff; border-color: var(--bleu); box-shadow: var(--o2); }
.bouton--principal:hover { background: var(--bleu-700); border-color: var(--bleu-700); color: #fff; box-shadow: var(--o3); }
.bouton--signal { background: var(--signal); color: var(--encre); border-color: var(--signal); box-shadow: var(--o2); }
.bouton--signal:hover { background: var(--signal-700); border-color: var(--signal-700); color: var(--encre); box-shadow: var(--o3); }
.bouton--secondaire { background: transparent; color: var(--texte); border-color: var(--bordure); }
.bouton--secondaire:hover { background: var(--fond-doux); border-color: var(--acier-400); color: var(--texte); }
.section--encre .bouton--secondaire, .appel .bouton--secondaire, .heros .bouton--secondaire { color: #EEF1F7; border-color: var(--encre-500); }
.section--encre .bouton--secondaire:hover, .appel .bouton--secondaire:hover, .heros .bouton--secondaire:hover { background: var(--encre-500); color: #fff; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }

.lien-fleche { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; font-size: var(--t2); text-decoration: none; color: var(--action-forte); }
.lien-fleche::after { content: "\2192"; transition: transform var(--d-normal) var(--c-sortie); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- 7. Héros ------------------------------------------------------- */

.heros { background: var(--encre); color: #EEF1F7; padding: clamp(64px, 10vw, 128px) 0 clamp(64px, 8vw, 96px); position: relative; overflow: hidden; }
.heros::before {
  content: ""; position: absolute; top: -20%; right: -5%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(18,86,196,.42) 0%, rgba(18,86,196,0) 65%);
  pointer-events: none;
}
.heros__grille { position: relative; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: var(--e7); align-items: center; }
.heros h1 { font-size: var(--t9); line-height: 1.02; letter-spacing: -.03em; color: #fff; max-width: 16ch; }
.heros h1 .accent { color: var(--signal); }
.heros__accroche { font-size: var(--t4); color: #A9B4CC; max-width: 58ch; }
.motif { width: 100%; max-width: 340px; margin-left: auto; }

/* ---------- 8. Bandeau de preuve ------------------------------------------- */

.preuve { background: var(--fond-doux); border-top: 3px solid var(--signal); padding: var(--e5) 0; }
.pastilles { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.pastille {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: var(--e2) var(--e3);
  background: var(--surface); border: 1px solid var(--bordure); border-left: 3px solid var(--bleu);
  border-radius: var(--r2); font-size: var(--t2); font-weight: 500; color: var(--texte); text-decoration: none;
  transition: transform var(--d-rapide) var(--c-sortie), border-color var(--d-rapide) var(--c-douce), box-shadow var(--d-rapide) var(--c-douce);
}
.pastille:hover, .pastille:focus-visible { transform: translateY(-2px); border-left-color: var(--signal); box-shadow: var(--o2); color: var(--texte); }

/* ---------- 9. Grilles et cartes ------------------------------------------- */

.grille { display: grid; gap: var(--e4); margin-top: var(--e5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e7); align-items: center; }
.duo--large { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }

.carte {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r3);
  padding: var(--e5);
  transition: transform var(--d-normal) var(--c-sortie), box-shadow var(--d-normal) var(--c-douce), border-color var(--d-normal) var(--c-douce);
}
.carte--lien:hover, .carte--lien:focus-within { transform: translateY(-4px); box-shadow: var(--o3); border-color: var(--bleu-200); }
.carte h3 { margin-bottom: var(--e2); }
.carte p { font-size: var(--t2); color: var(--texte-doux); margin-bottom: var(--e3); }
.carte .lien-fleche { margin-top: auto; align-self: flex-start; }
.carte__numero { font-family: var(--f-titre); font-size: var(--t1); font-weight: 700; letter-spacing: .08em; color: var(--acier-400); margin-bottom: var(--e2); }
.carte--accent { border-top: 3px solid var(--signal); }
.section--encre .carte { background: var(--encre-700); border-color: var(--encre-500); color: #EEF1F7; }
.section--encre .carte p { color: #A9B4CC; }
.section--encre .carte__numero { color: var(--bleu-200); }

.pastille__lieu {
  font-size: var(--t1); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-doux); white-space: nowrap;
}
.pastille:hover .pastille__lieu, .pastille:focus-visible .pastille__lieu { color: var(--action-forte); }

/* ---------- 10. Listes ----------------------------------------------------- */

.liste-nette { list-style: none; margin: 0 0 var(--e4); padding: 0; max-width: var(--mesure); }
.liste-nette li { position: relative; padding-left: var(--e5); margin-bottom: var(--e2); }
.liste-nette li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 3px; background: var(--bleu); border-radius: var(--r1); }
.section--encre .liste-nette li::before { background: var(--signal); }

.definition { margin: 0 0 var(--e5); max-width: var(--mesure); }
.definition dt { font-family: var(--f-titre); font-weight: 600; font-size: var(--t5); margin-top: var(--e4); }
.definition dd { margin: var(--e1) 0 0; color: var(--texte-doux); }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--e4); margin-top: var(--e5); }
.chiffre__valeur { display: block; font-family: var(--f-titre); font-weight: 700; font-size: var(--t7); line-height: 1; color: var(--action-forte); }
.section--encre .chiffre__valeur { color: var(--signal); }
.chiffre__libelle { display: block; margin-top: var(--e2); font-size: var(--t2); color: var(--texte-doux); }
.section--encre .chiffre__libelle { color: #A9B4CC; }

/* ---------- 11. Tableaux --------------------------------------------------- */

.tableau-enveloppe { overflow-x: auto; margin: var(--e5) 0; border: 1px solid var(--bordure); border-radius: var(--r3); }
table { border-collapse: collapse; width: 100%; font-size: var(--t2); }
th, td { text-align: left; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--bordure); vertical-align: top; }
thead th { font-family: var(--f-titre); font-weight: 600; background: var(--fond-doux); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }

/* ---------- 12. Schéma ----------------------------------------------------- */

.schema { margin: var(--e5) 0; overflow-x: auto; }
.schema svg { width: 100%; min-width: 660px; height: auto; display: block; }

/* ---------- 13. FAQ -------------------------------------------------------- */

.faq { max-width: var(--etroit); margin-top: var(--e5); }
.faq details { border-bottom: 1px solid var(--bordure); }
.faq summary {
  position: relative; display: block; cursor: pointer; list-style: none;
  padding: var(--e4) var(--e6) var(--e4) 0;
  font-family: var(--f-titre); font-weight: 600; font-size: var(--t5);
  transition: color var(--d-rapide) var(--c-douce);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--action-forte); }
.faq summary::after {
  content: ""; position: absolute; right: var(--e3); top: 50%;
  width: 12px; height: 12px; margin-top: -10px;
  border-right: 2px solid var(--action); border-bottom: 2px solid var(--action);
  transform: rotate(45deg); transition: transform var(--d-normal) var(--c-sortie);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.faq details p { margin: 0 0 var(--e4); color: var(--texte-doux); }

/* ---------- 14. Fil d'Ariane ----------------------------------------------- */

.ariane { font-size: var(--t2); color: var(--texte-doux); padding: var(--e4) 0 0; }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: var(--e2); color: var(--acier-400); }
.ariane a { color: var(--texte-doux); }

/* ---------- 15. Frise ------------------------------------------------------ */

.frise { margin-top: var(--e5); }
.frise__rail { display: flex; overflow-x: auto; padding-bottom: var(--e4); border-bottom: 3px solid var(--bordure); scrollbar-width: thin; }
.frise__jalon {
  position: relative; flex: 1 0 auto; min-width: 168px;
  padding: var(--e3) var(--e4) var(--e4) 0;
  background: none; border: none; font: inherit; text-align: left;
  color: var(--texte-doux); cursor: pointer;
  transition: color var(--d-rapide) var(--c-douce);
}
.frise__jalon::after {
  content: ""; position: absolute; left: 0; bottom: -9px;
  width: 15px; height: 15px; border-radius: var(--rond);
  background: var(--fond); border: 3px solid var(--acier-400);
  transition: background-color var(--d-normal) var(--c-douce), border-color var(--d-normal) var(--c-douce), transform var(--d-normal) var(--c-ressort);
}
.frise__jalon:hover { color: var(--texte); }
.frise__jalon:hover::after { border-color: var(--bleu); }
.frise__jalon[aria-selected="true"] { color: var(--texte); }
.frise__jalon[aria-selected="true"]::after { background: var(--signal); border-color: var(--signal-700); transform: scale(1.15); }
.frise__jalon__logo { display: block; height: 28px; margin-bottom: var(--e2); }
.frise__jalon__logo img { height: 28px; width: auto; filter: grayscale(100%); opacity: .5; transition: filter var(--d-normal) var(--c-douce), opacity var(--d-normal) var(--c-douce); }
.frise__jalon:hover .frise__jalon__logo img,
.frise__jalon[aria-selected="true"] .frise__jalon__logo img { filter: grayscale(0%); opacity: 1; }
.frise__annee { display: block; font-family: var(--f-titre); font-weight: 700; font-size: var(--t4); }
.frise__nom { display: block; font-size: var(--t2); margin-top: var(--e1); }

.frise__panneau {
  background: var(--surface); border: 1px solid var(--bordure);
  border-left: 4px solid var(--signal); border-radius: var(--r3);
  padding: var(--e6); margin-top: var(--e5);
  animation: apparait var(--d-lent) var(--c-sortie);
}
.frise__panneau[hidden] { display: none; }
.frise__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.frise__meta { font-size: var(--t2); color: var(--texte-doux); margin: var(--e1) 0 0; }
.frise__panneau h3 { margin-bottom: var(--e1); }
.frise__resultat { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--bordure); font-weight: 600; }

.logo-image { display: flex; align-items: center; justify-content: center; min-width: 200px; height: 76px; padding: var(--e2) var(--e4); background: #fff; border: 1px solid var(--bordure); border-radius: var(--r2); }
.logo-image img { max-height: 48px; width: auto; }

/* ---------- 16. Formulaires ------------------------------------------------ */

.formulaire { max-width: 680px; margin-top: var(--e5); }
.champ { margin-bottom: var(--e4); }
.champ label { display: block; font-weight: 600; font-size: var(--t2); margin-bottom: var(--e2); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: var(--e3);
  font: inherit; font-size: var(--t3); color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r2);
  transition: border-color var(--d-rapide) var(--c-douce), box-shadow var(--d-rapide) var(--c-douce);
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--acier-400); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-100); outline: none; }
.champ textarea { min-height: 160px; resize: vertical; }
.champ__aide { font-size: var(--t2); color: var(--texte-doux); margin: var(--e2) 0 0; }
.pot-de-miel { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consentement { display: flex; gap: var(--e3); align-items: flex-start; font-size: var(--t2); }
.consentement input { width: auto; min-height: auto; margin-top: .3em; flex-shrink: 0; }
.erreur { color: var(--erreur); font-size: var(--t2); font-weight: 600; margin: var(--e2) 0 0; }

/* ---------- 17. Divers ----------------------------------------------------- */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r3);
  background: var(--fond-doux);
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--d-lent) var(--c-sortie);
}
.photo--zoom:hover img { transform: scale(1.03); }

/* Photo en tête de page, format bandeau */
.photo--portrait { max-width: 360px; }
.photo--portrait img { border-radius: var(--r3); }

.bloc-fondateur {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--e6);
  align-items: start;
}
@media (max-width: 860px) {
  .bloc-fondateur { grid-template-columns: 1fr; gap: var(--e4); }
  .photo--portrait { max-width: 260px; }
}

.photo--bandeau { border-radius: 0; margin-bottom: 0; }
.photo--bandeau img { max-height: 420px; object-fit: cover; }

/* Photo encadrée par le dispositif de marque */
.photo--cadre::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 56px; height: 56px;
  border-left: 4px solid var(--signal);
  border-bottom: 4px solid var(--signal);
  pointer-events: none;
}

/* Trois villes côte à côte */
.villes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e4);
  margin-top: var(--e5);
}
.villes figure { margin: 0; }
.villes figcaption {
  margin-top: var(--e2);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.section--encre .villes figcaption { color: #A9B4CC; }

.photo-vide {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; padding: var(--e4);
  background: var(--fond-doux); border: 2px dashed var(--acier-400); border-radius: var(--r3);
  color: var(--texte-doux); font-size: var(--t2);
}
.visuel { display: block; width: 100%; height: auto; border-radius: var(--r3); }
.figure-legende { font-size: var(--t2); color: var(--texte-doux); margin-top: var(--e2); }

.pays { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e3); margin: 0 var(--e2) var(--e2) 0; background: var(--fond-doux); border: 1px solid var(--bordure); border-radius: var(--rond); font-size: var(--t2); white-space: nowrap; }
.section--encre .pays { background: var(--encre-700); border-color: var(--encre-500); color: #EEF1F7; }
.pays-liste {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  list-style: none; margin: var(--e4) 0; padding: 0;
}
.pays-liste li {
  padding: var(--e1) var(--e3);
  background: var(--fond-doux); border: 1px solid var(--bordure); border-radius: var(--rond);
  font-size: var(--t2); white-space: nowrap;
}
.section--encre .pays-liste li { background: var(--encre-700); border-color: var(--encre-500); }

.bandeau-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--e3); margin-top: var(--e4); }

/* ---------- 18. Appel à l'action ------------------------------------------- */

.appel { background: var(--encre); color: #fff; padding: var(--e8) 0; position: relative; overflow: hidden; }
.appel::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 120vw; height: 120vw; max-width: 1100px; max-height: 1100px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(253,200,76,.16) 0%, rgba(253,200,76,0) 62%);
  pointer-events: none;
}
.appel > * { position: relative; }
.appel h2 { color: #fff; }
.appel p { color: #C9D2E4; }

/* ---------- 19. Pied de page ----------------------------------------------- */

.pied { background: var(--encre-900); color: #A9B4CC; padding: var(--e8) 0 var(--e5); font-size: var(--t2); }
.pied a { color: #A9B4CC; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied h3 { color: #fff; font-size: var(--t2); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--e3); }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--e6); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e2); }
.pied p { color: #A9B4CC; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid rgba(169,180,204,.2); font-size: var(--t1); }

/* ---------- 20. Révélation ------------------------------------------------- */

.reveler { opacity: 0; transform: translateY(16px); transition: opacity var(--d-lent) var(--c-sortie), transform var(--d-lent) var(--c-sortie); }
.reveler.est-visible { opacity: 1; transform: none; }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 21. Utilitaires ------------------------------------------------ */

.m-0 { margin: 0; }
.m-b-0 { margin-bottom: 0; }
.m-b-xs { margin-bottom: var(--e2); }
.bloc-suite { margin-top: var(--e5); max-width: var(--etroit); }

/* ---------- 22. Points de rupture ------------------------------------------ */

@media (max-width: 1024px) {
  .heros__grille { grid-template-columns: 1fr; gap: var(--e5); }
  .motif { max-width: 260px; margin: 0; }
  .duo, .duo--large { grid-template-columns: 1fr; gap: var(--e5); }
}

@media (max-width: 860px) {
  .nav__bascule { display: inline-flex; }
  .nav { margin-left: 0; }
  .entete__interieur { min-height: 76px; justify-content: space-between; }
  .marque img { height: 36px; }
  .nav__liste {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); border-bottom: 1px solid var(--bordure);
    padding: var(--e3) var(--e4) var(--e5); box-shadow: var(--o3);
  }
  .nav__liste.est-ouverte { display: flex; animation: apparait var(--d-normal) var(--c-sortie); }
  .nav__liste li { border-bottom: 1px solid var(--bordure); }
  .nav__liste li:last-child { border-bottom: none; }
  .nav a { display: block; padding: var(--e4) 0; font-size: var(--t4); }
  .nav a::after { display: none; }
  .outils { margin-left: auto; }
}

@media (max-width: 560px) {
  .section { padding: var(--e7) 0; }
  .enveloppe { padding: 0 var(--e3); }
  .carte { padding: var(--e4); }
  .frise__panneau { padding: var(--e4); }
  .cadre { padding: var(--e4) var(--e4) var(--e4) calc(var(--e4) + 4px); }
  .groupe-boutons .bouton { width: 100%; }
  .langues a { min-width: 36px; }
}

@media print {
  .entete, .appel, .nav, .outils, .pied__bas, .lien-evitement { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section--encre, .heros, .appel { background: #fff; color: #000; }
  .frise__panneau[hidden] { display: block !important; }
}