/* ==========================================================================
   Seqo · feuille de style unique
   Charte graphique V1.0 : noir canonique, accent jaune unique, Archivo /
   Instrument Sans / IBM Plex Mono. Poppins est réservé au logotype.
   ========================================================================== */

:root {
  /* Couleurs de la charte */
  --noir: #000000;
  --surface: #111113;
  --surface-2: #1a1a1c;
  --jaune: #ffeb99;
  --jaune-hover: #ffe070;
  --blanc: #fafaf7;
  --gris: #9a9a94;
  --ligne: rgba(255, 255, 255, .08);
  --ligne-fort: rgba(255, 255, 255, .16);

  /* Typographies */
  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  --texte: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --logotype: 'Poppins', system-ui, sans-serif;

  /* Rythme */
  --wrap: 1140px;
  --gouttiere: 28px;
  --nav-h: 68px;
}

/* ---------------------------------------------------- variantes de langue -- */

/* Sur les pages chinoises, Noto Sans SC prend la suite des polices latines :
   les chiffres et les mots latins gardent Archivo / Instrument Sans, les
   idéogrammes sont rendus par une police qui les dessine réellement. */
html[lang^="zh"] {
  --display: 'Archivo', 'Noto Sans SC', system-ui, sans-serif;
  --texte: 'Instrument Sans', 'Noto Sans SC', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;
}
html[lang^="zh"] body { line-height: 1.85; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] h4 {
  line-height: 1.42;
  letter-spacing: 0;
  text-wrap: normal;
}
html[lang^="zh"] .eyebrow, html[lang^="zh"] .label,
html[lang^="zh"] .footer h3, html[lang^="zh"] .sim-cat { letter-spacing: .04em; }
html[lang^="zh"] .langues { letter-spacing: .04em; }

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

a { color: var(--jaune); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--jaune-hover); }

:focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--jaune); color: var(--noir); }

/* ------------------------------------------------------------ structure -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.wrap-etroit { max-width: 780px; }

section { position: relative; }

.section {
  padding-block: clamp(72px, 10vw, 132px);
  border-top: 1px solid var(--ligne);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.section--nu { border-top: 0; }
.section--surface { background: var(--surface); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--jaune);
  color: var(--noir);
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------- typographie -- */

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-weight: 700; font-size: clamp(40px, 6.6vw, 86px); }
h2 { font-weight: 700; font-size: clamp(29px, 4.2vw, 52px); letter-spacing: -.022em; }
h3 { font-weight: 600; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -.015em; line-height: 1.2; }
h4 { font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.dot { color: var(--jaune); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 16px;
}

.lede {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--gris);
  max-width: 60ch;
  margin: 0 0 32px;
}

.texte-gris { color: var(--gris); }

.mesure { max-width: 68ch; }
.mesure p { margin-bottom: 1.1rem; }

.caption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--gris);
  line-height: 1.55;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

strong, b { font-weight: 600; color: var(--blanc); }

hr { border: 0; border-top: 1px solid var(--ligne); margin: 40px 0; }

ul, ol { margin: 0 0 1.1rem; padding-left: 1.25em; }
li { margin-bottom: .45em; }
li::marker { color: var(--jaune); }

.liste-nue { list-style: none; padding: 0; margin: 0; }
.liste-nue li { margin: 0; }

/* En-tête de section (eyebrow + titre + lede) */
.entete { max-width: 44ch; margin-bottom: clamp(36px, 5vw, 64px); }
.entete .lede { margin-bottom: 0; }
.entete--large { max-width: 60ch; }

/* ------------------------------------------------------------- boutons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--texte);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
  will-change: transform;
}

.btn--jaune { background: var(--jaune); color: #0a0a0a; }
.btn--jaune:hover { background: var(--jaune-hover); color: #0a0a0a; }

.btn--ghost { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .22); }
.btn--ghost:hover { color: var(--blanc); border-color: var(--blanc); }

.btn--petit { padding: 10px 20px; font-size: 14px; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: 15.5px;
}
.lien-fleche::after { content: "→"; transition: transform .2s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ligne);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  font-size: 11px;
  color: var(--blanc);
  flex: 0 0 auto;
}
.logo:hover { color: var(--blanc); }
.logo svg { height: 2.6em; width: auto; }
.logo span {
  font-family: var(--logotype);
  font-weight: 500;
  font-size: 2.2em;
  line-height: 1;
  letter-spacing: .005em;
}

.nav-liens {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav-liens a {
  color: var(--gris);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-liens a:hover { color: var(--blanc); }
.nav-liens a[aria-current="page"] { color: var(--blanc); }

.nav-cta { margin-left: 18px; white-space: nowrap; }

/* ------------------------------------------------------------- langues -- */

.langues {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  flex: 0 0 auto;
}
.langues a {
  color: var(--gris);
  padding: 5px 7px;
  border-radius: 4px;
  line-height: 1;
}
.langues a:hover { color: var(--blanc); }
.langues a[aria-current="true"] { color: #0a0a0a; background: var(--jaune); }
.menu-mobile .langues { margin: 34px 0 0; justify-content: flex-start; font-size: 14px; }
.menu-mobile .langues a { padding: 9px 13px; }
@media (max-width: 1140px) { .nav-liens { gap: 20px; } .langues { margin-left: 14px; } }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--blanc);
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .nav-liens, .nav-cta, .nav .langues { display: none; }
  .burger { display: block; margin-left: auto; }
}

/* Menu plein écran mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--noir);
  display: none;
  flex-direction: column;
  padding: 20px var(--gouttiere) 48px;
}
.menu-mobile[data-ouvert="true"] { display: flex; }
.menu-mobile-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) - 20px);
}
.menu-mobile nav {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: 1px solid var(--ligne);
}
.menu-mobile nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--blanc);
  padding: 20px 0;
  border-bottom: 1px solid var(--ligne);
}
.menu-mobile .btn { margin-top: 32px; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: clamp(560px, 88svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--ligne);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,.96) 6%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.55) 100%),
    linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 62%, rgba(0,0,0,.15) 100%);
}

.hero .wrap { position: relative; z-index: 2; padding-block: clamp(48px, 7vw, 88px); }

.hero h1 { max-width: 17.5ch; margin-bottom: 24px; }
.hero .lede { max-width: 52ch; color: #cfcbc2; }

.hero-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--ligne-fort);
}
.hero-chiffres div { display: flex; flex-direction: column; gap: 3px; }
.hero-chiffres b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--jaune);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* En-tête de page interne (sans vidéo plein écran) */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}
.page-hero h1 { max-width: 18ch; margin-bottom: 20px; font-size: clamp(34px, 5.4vw, 66px); }
.page-hero .lede { margin-bottom: 0; }
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .5;
}
.page-hero-voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,.95) 24%, rgba(0,0,0,.6) 100%),
              linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.45));
}
.page-hero .wrap { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- cartes -- */

.grille {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grille--serree { gap: 14px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 28px;
  transition: background-color .25s ease, border-color .25s ease;
}
.carte:hover { background: var(--surface-2); border-color: var(--ligne-fort); }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--gris); font-size: 15.5px; }
.carte .label { display: block; margin-bottom: 14px; }

a.carte { color: var(--blanc); display: block; }
a.carte:hover { color: var(--blanc); }

/* Étape du programme */
.etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 26px;
  padding: 30px 0;
  border-top: 1px solid var(--ligne);
  align-items: start;
}
.etape:last-child { border-bottom: 1px solid var(--ligne); }
.etape-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--jaune);
  padding-top: .5em;
}
.etape h3 { margin-bottom: 8px; }
.etape .duree {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 12px;
}
.etape p { color: var(--gris); max-width: 62ch; }
.etape-prix {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--jaune);
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .etape { grid-template-columns: 1fr; gap: 8px; }
  .etape-num { padding-top: 0; }
}

.carte-lien {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.carte-lien a { color: var(--jaune); }
.carte-lien a:hover { color: var(--jaune-hover); }
.section--clair .carte-lien a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------- timeline -- */

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ligne-fort);
}
.timeline-progress {
  position: absolute;
  left: 5px;
  top: 8px;
  width: 1px;
  height: 0;
  background: var(--jaune);
  transform-origin: top;
}
.timeline-item { position: relative; padding-bottom: 42px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--noir);
  border: 1px solid var(--ligne-fort);
  transition: background-color .3s ease, border-color .3s ease;
}
.timeline-item[data-atteint="true"]::before { background: var(--jaune); border-color: var(--jaune); }
.timeline-item .date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--jaune);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  display: block;
}
.timeline-item h3 { margin-bottom: 6px; }
.timeline-item p { color: var(--gris); max-width: 58ch; font-size: 15.5px; }

/* ------------------------------------------------------- média / schémas -- */

.media {
  border: 1px solid var(--ligne);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.media video, .media img { width: 100%; }
.media figcaption { padding: 14px 18px; border-top: 1px solid var(--ligne); }
.media--bande { margin: 0; }
.media--bande video { aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .media--bande video { aspect-ratio: 16 / 10; } }

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.duo--texte-droite > *:first-child { order: 0; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

.schema {
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--surface);
  padding: clamp(20px, 3vw, 36px);
  overflow-x: auto;
}
.schema svg { width: 100%; height: auto; min-width: 460px; }
.schema figcaption { margin-top: 18px; }

/* ------------------------------------------------------------ constellation -- */

.constellation-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}
.constellation-fond + .wrap { position: relative; z-index: 1; }

/* ----------------------------------------------------------------- FAQ -- */

.faq { border-top: 1px solid var(--ligne); }
.faq details {
  border-bottom: 1px solid var(--ligne);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: -.01em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jaune);
  font-family: var(--mono);
  font-size: 20px;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--gris); max-width: 68ch; padding-bottom: 22px; font-size: 16px; }

/* -------------------------------------------------------------- secteurs -- */

.secteur {
  padding-block: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--ligne);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.secteur-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
}
@media (max-width: 900px) { .secteur-grille { grid-template-columns: 1fr; } }
.secteur h2 { margin-bottom: 14px; }
.secteur .bloc + .bloc { margin-top: 28px; }
.secteur .bloc h3 { color: var(--jaune); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; margin-bottom: 8px; }
.secteur .bloc p, .secteur .bloc li { color: var(--gris); font-size: 16px; }

.ancres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.ancres a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gris);
  border: 1px solid var(--ligne-fort);
  border-radius: 999px;
  padding: 8px 16px;
}
.ancres a:hover { color: var(--noir); background: var(--jaune); border-color: var(--jaune); }

/* ------------------------------------------------------------------ blog -- */

.article-liste { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.article-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--ligne);
  align-items: baseline;
  color: var(--blanc);
}
.article-item:hover { color: var(--blanc); }
.article-item:hover h2 { color: var(--jaune); }
.article-item h2 { font-size: clamp(19px, 2.1vw, 25px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; transition: color .2s ease; margin-bottom: 8px; max-width: 34ch; }
.article-item p { color: var(--gris); font-size: 15.5px; max-width: 62ch; }
.article-item time { font-family: var(--mono); font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .article-item { grid-template-columns: 1fr; gap: 8px; }
}

.article-corps { max-width: 68ch; }
.article-corps h2 { font-size: clamp(24px, 3vw, 34px); margin: 52px 0 16px; }
.article-corps h3 { margin: 34px 0 12px; }
.article-corps p, .article-corps li { font-size: 17px; }
.article-corps ul, .article-corps ol { margin-bottom: 1.4rem; }
.article-corps table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 24px 0; }
.article-corps th {
  text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris); font-weight: 400;
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ligne-fort);
}
.article-corps td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--mono); font-size: 12px; color: var(--gris);
  letter-spacing: .06em; margin-top: 20px;
}
.encadre {
  background: var(--surface);
  border-left: 2px solid var(--jaune);
  border-radius: 0 6px 6px 0;
  padding: 20px 24px;
  margin: 32px 0;
}
.encadre p { color: var(--gris); font-size: 16px; }
.encadre strong { color: var(--blanc); }
.sources { font-size: 14.5px; color: var(--gris); }
.sources li { margin-bottom: .3em; }

/* --------------------------------------------------------------- contact -- */

.form { display: grid; gap: 18px; max-width: 620px; }
.form[hidden] { display: none; }
.contact-wechat { display: flex; align-items: flex-start; gap: 16px; margin-top: 8px; }
.contact-wechat img {
  width: 104px; height: 104px; flex-shrink: 0;
  background: #fff; border-radius: 5px; padding: 5px;
}
.contact-wechat p { max-width: 40ch; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  font-family: var(--texte);
  font-size: 16px;
  color: var(--blanc);
  background: var(--surface);
  border: 1px solid var(--ligne-fort);
  border-radius: 5px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s ease;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--jaune); outline: none; }
.champ input::placeholder, .champ textarea::placeholder { color: #6b6b66; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--jaune) 50%), linear-gradient(135deg, var(--jaune) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.champ select option { background: var(--surface); color: var(--blanc); }
.form-note { font-size: 13.5px; color: var(--gris); max-width: 60ch; }
.form-erreur { font-size: 13.5px; color: #ff8a80; max-width: 60ch; }
.champ-cache { position: absolute; left: -9999px; }

/* ------------------------------------------------------- prise de rendez-vous -- */

.rdv-cadre {
  border: 1px solid var(--ligne-fort);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.rdv-cal { width: 100%; min-height: clamp(560px, 74vh, 780px); overflow: auto; }
.rdv-repli {
  margin: 0;
  padding: 18px 22px;
  border-top: 1px solid rgba(0, 0, 0, .12);
  background: #f1efe9;
  color: #3d3a35;
  font-size: 15px;
}
.rdv-repli a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; }

.rdv-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}
.rdv-points li { border-top: 1px solid var(--ligne); padding-top: 16px; }
.rdv-points p { color: var(--gris); font-size: 15px; margin-top: 6px; }

/* --------------------------------------------------- réponse au formulaire -- */

.form-recu {
  border: 1px solid var(--jaune);
  border-radius: 10px;
  padding: clamp(24px, 4vw, 40px);
  background: rgba(255, 235, 153, .06);
}
.form-recu h3 { margin-bottom: 12px; }
.form-recu p { color: var(--gris); max-width: 62ch; }
.form-recu .btns { margin-top: 26px; }

/* ---------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--ligne-fort);
  padding-block: clamp(48px, 6vw, 76px) 40px;
  background: var(--noir);
}
.footer-haut {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.05fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--ligne);
}
@media (max-width: 1000px) { .footer-haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-haut { grid-template-columns: 1fr; } }
.footer-wechat { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.footer-wechat img {
  width: 62px; height: 62px; flex-shrink: 0;
  background: #fff; border-radius: 4px; padding: 3px;
}
.footer-wechat-txt { font-size: 14px; color: var(--blanc); line-height: 1.4; }
.footer-wechat-txt b { display: block; font-weight: 400; font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.footer-vision { color: var(--gris); font-size: 15px; max-width: 40ch; margin-top: 20px; }
.footer h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gris); font-weight: 400; margin-bottom: 16px;
}
.footer nav { display: flex; flex-direction: column; gap: 11px; }
.footer nav a { color: var(--blanc); font-size: 15px; }
.footer nav a:hover { color: var(--jaune); }
.footer-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--gris);
}
.footer-bas a { color: var(--gris); }
.footer-bas a:hover { color: var(--jaune); }

/* -------------------------------------------------------------- bandeau -- */

.bandeau-cta {
  border-top: 1px solid var(--ligne-fort);
  padding-block: clamp(64px, 8vw, 104px);
  text-align: left;
}
.bandeau-cta h2 { max-width: 20ch; margin-bottom: 18px; }
.bandeau-cta .lede { margin-bottom: 30px; }

/* ------------------------------------------------------------ animations -- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].est-visible { opacity: 1; transform: none; }

.ligne-titre { display: block; overflow: hidden; }
.ligne-titre > span {
  display: block;
  transform: translateY(105%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.titre-anime.est-revele .ligne-titre > span { transform: none; }
.titre-anime.est-revele .ligne-titre:nth-child(2) > span { transition-delay: .09s; }
.titre-anime.est-revele .ligne-titre:nth-child(3) > span { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ligne-titre > span { transform: none; }
  .hero-video, .page-hero-video { display: none; }
}

/* ------------------------------------------------------------- utilitaires -- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: 56px; }
.mb-l { margin-bottom: 56px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   VARIANTE CLAIRE · « support clair » de la charte
   Fond blanc cassé, texte noir, accents en noir : la charte interdit le jaune
   en avant-plan sur fond clair. Le jaune ne subsiste qu'en aplat plein
   (bouton, pastille) avec du texte noir dessus, où le contraste est bon.
   ========================================================================== */

.section--clair {
  --fond: #fafaf7;
  --encre: #0a0a0a;
  --encre-2: #5f5c56;
  --trait: rgba(0, 0, 0, .12);
  --trait-fort: rgba(0, 0, 0, .22);
  --carte-fond: #ffffff;
  background: var(--fond);
  color: var(--encre);
  border-top: 1px solid var(--trait);
}

.section--clair h1,
.section--clair h2,
.section--clair h3,
.section--clair h4,
.section--clair strong,
.section--clair b { color: var(--encre); }
.section--clair .eyebrow { color: var(--encre); }
.section--clair .dot { color: var(--encre); }
.section--clair .lede,
.section--clair .caption,
.section--clair .label,
.section--clair .texte-gris { color: var(--encre-2); }
.section--clair p { color: var(--encre); }
.section--clair li::marker { color: var(--encre); }
.section--clair hr { border-top-color: var(--trait); }
.section--clair a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.section--clair a:hover { color: #000; }
.section--clair :focus-visible { outline-color: var(--encre); }

.section--clair .carte {
  background: var(--carte-fond);
  border-color: var(--trait);
}
.section--clair .carte:hover { background: #fff; border-color: var(--trait-fort); }
.section--clair .carte p { color: var(--encre-2); }

.section--clair .btn--ghost { color: var(--encre); border-color: var(--trait-fort); }
.section--clair .btn--ghost:hover { border-color: var(--encre); color: var(--encre); }
.section--clair .btn--jaune { color: #0a0a0a; }

.section--clair .etape { border-top-color: var(--trait); }
.section--clair .etape:last-child { border-bottom-color: var(--trait); }
.section--clair .etape-num { color: var(--encre); }
.section--clair .etape .duree { color: var(--encre-2); }
.section--clair .etape p { color: var(--encre-2); }

.section--clair .faq,
.section--clair .faq details { border-color: var(--trait); }
.section--clair .faq summary::after { color: var(--encre); }
.section--clair .faq details p { color: var(--encre-2); }

/* ------------------------------------------------- aperçu du passeport -- */

.passeport {
  display: grid;
  grid-template-columns: minmax(0, 306px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 820px) { .passeport { grid-template-columns: 1fr; } }

.telephone-zone { position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 820px) { .telephone-zone { position: static; } }

.telephone {
  position: relative;
  width: 100%;
  max-width: 306px;
  margin-inline: auto;
  background: #0a0a0a;
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 40px;
  padding: 9px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .26), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.telephone-encoche {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
}
.telephone-fondu {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 56px;
  border-radius: 0 0 32px 32px;
  background: linear-gradient(to top, #fafaf7 8%, rgba(250, 250, 247, 0));
  pointer-events: none;
  z-index: 2;
}
.telephone-ecran {
  position: relative;
  background: #fafaf7;
  border-radius: 32px;
  aspect-ratio: 9 / 19.5;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.telephone-ecran::-webkit-scrollbar { width: 0; height: 0; }
.telephone-ecran:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }

.telephone-indice {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
  transition: opacity .4s ease;
}
.telephone-indice[data-fini="1"] { opacity: 0; }
.telephone-indice .fleche {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0), rgba(10, 10, 10, .55));
  animation: indiceGlisse 2.4s ease-in-out infinite;
}
@keyframes indiceGlisse {
  0%, 100% { transform: translateY(-4px); opacity: .3; }
  50% { transform: translateY(4px); opacity: 1; }
}

.pp-barre {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 20px 7px;
  background: #0a0a0a;
  color: #6f6f68;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .04em;
}
.pp-barre .pp-heure { color: #fafaf7; font-variant-numeric: tabular-nums; }
.pp-barre .pp-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62%;
}
.pp-entete { background: #0a0a0a; color: #fafaf7; padding: 14px 18px 20px; }
.pp-entete .pp-sur {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffeb99;
  margin-bottom: 10px;
}
.pp-entete h3 { font-size: 17px; color: #fafaf7; margin-bottom: 4px; letter-spacing: -.01em; }
.pp-entete .pp-id { font-family: var(--mono); font-size: 10.5px; color: #9a9a94; word-break: break-all; }
.pp-entete .pp-cat { font-size: 12px; color: #cfcbc2; margin-top: 6px; }

.pp-bloc { padding: 15px 18px; border-bottom: 1px solid rgba(0, 0, 0, .09); }
.pp-bloc:last-of-type { border-bottom: 0; }
.pp-bloc-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6b6b66;
  margin-bottom: 11px;
}
.pp-cadenas { width: 11px; height: 11px; flex-shrink: 0; }
.pp-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pp-champ {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 5px;
  padding: 8px 10px;
}
.pp-champ b {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pp-champ span { display: block; font-size: 10.5px; color: #6b6b66; margin-top: 2px; line-height: 1.3; }
.pp-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 5px 0;
  color: #3d3a35;
}
.pp-ligne b { font-family: var(--mono); font-size: 12px; color: #0a0a0a; font-variant-numeric: tabular-nums; }
.pp-note { font-size: 11px; line-height: 1.5; color: #6b6b66; margin: 8px 0 0; }
.pp-bloc-titre + .pp-note { margin-top: 0; margin-bottom: 8px; }
.pp-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #3d3a35;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 5px;
}
.pp-doc:last-child { margin-bottom: 0; }
.pp-doc b {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: #6b6b66;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.pp-bloc--verrou { background: #f1efe9; }
.pp-ligne--floue { filter: blur(3px); user-select: none; }
.pp-pied {
  padding: 13px 18px 26px;
  background: #f1efe9;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  color: #6b6b66;
  line-height: 1.5;
}

.passeport-legende .bloc-acces { border-top: 1px solid var(--trait); padding: 18px 0; }
.passeport-legende .bloc-acces:last-child { border-bottom: 1px solid var(--trait); }
.passeport-legende .bloc-acces h3 { font-size: 18px; margin-bottom: 5px; }
.passeport-legende .bloc-acces p { color: var(--encre-2); font-size: 15.5px; max-width: 56ch; }
.passeport-legende .bloc-acces .qui {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 8px;
  display: block;
}
.pastille {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  background: #ffeb99;
  color: #0a0a0a;
  border-radius: 999px;
  padding: 3px 11px;
  margin-left: 8px;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- matrice 94 -- */

.matrice { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrice th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--encre-2);
  padding: 0 14px 12px 0;
  border-bottom: 1px solid var(--trait-fort);
}
.matrice td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.matrice td:last-child, .matrice th:last-child { padding-right: 0; }
.matrice .nb { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrice .barre { display: block; height: 5px; background: #0a0a0a; border-radius: 3px; min-width: 3px; }
.matrice .cat { font-weight: 600; }
.matrice .exemple { color: var(--encre-2); font-size: 14px; }

.repartition { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.repartition .bloc-r { border-top: 2px solid var(--encre); padding-top: 16px; }
.repartition .bloc-r h3 { font-size: 17px; margin-bottom: 12px; }
.repartition .bloc-r dl { margin: 0; display: grid; gap: 7px; }
.repartition .bloc-r .r-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--encre-2); }
.repartition .bloc-r .r-ligne b { font-family: var(--mono); color: var(--encre); font-variant-numeric: tabular-nums; }

/* ------------------------------------------ assistant en 8 blocs / contrôles -- */

.wizard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.wizard-etape {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 18px 20px;
}
.wizard-etape .n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--jaune);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.wizard-etape h3 { font-size: 16px; margin-bottom: 5px; }
.wizard-etape p { font-size: 14px; color: var(--gris); line-height: 1.55; }

.controles { display: grid; gap: 0; }
.controle {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--gris);
}
.controle:first-child { border-top: 1px solid var(--ligne); }
.controle .coche { color: var(--jaune); }
.section--clair .controle { border-color: var(--trait); color: var(--encre-2); }
.section--clair .controle:first-child { border-top-color: var(--trait); }
.section--clair .controle .coche { color: var(--encre); }

/* ------------------------------------------------------------ livrables -- */

.livrables { display: grid; gap: 0; }
.livrable {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--trait);
  align-items: start;
}
.livrable:first-child { border-top: 1px solid var(--trait); }
.livrable .num-l {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--encre-2);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.livrable h3 { font-size: 17px; margin-bottom: 5px; }
.livrable p { font-size: 15px; color: var(--encre-2); max-width: 62ch; }

/* Compléments variante claire : blocs de secteurs et listes d'articles */
.section--clair .bloc h3 { color: var(--encre); }
.section--clair .bloc p,
.section--clair .bloc li { color: var(--encre-2); }
.section--clair .ancres a { color: var(--encre-2); border-color: var(--trait-fort); }
.section--clair .ancres a:hover { background: var(--encre); border-color: var(--encre); color: #fafaf7; }
.section--clair .article-liste,
.section--clair .article-item { border-color: var(--trait); }
.section--clair .article-item, .section--clair .article-item h2 { color: var(--encre); }
.section--clair .article-item:hover h2 { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.section--clair .article-item p, .section--clair .article-item time { color: var(--encre-2); }
.section--clair .media, .section--clair .schema { background: #fff; border-color: var(--trait); }
.section--clair .wizard-etape { background: #fff; border-color: var(--trait); }
.section--clair .wizard-etape .n { color: var(--encre); }
.section--clair .wizard-etape p { color: var(--encre-2); }
.section--clair .timeline::before { background: var(--trait-fort); }
.section--clair .timeline-progress { background: var(--encre); }
.section--clair .timeline-item::before { background: var(--fond); border-color: var(--trait-fort); }
.section--clair .timeline-item[data-atteint="true"]::before { background: var(--encre); border-color: var(--encre); }
.section--clair .timeline-item .date { color: var(--encre); }
.section--clair .timeline-item p { color: var(--encre-2); }

/* Corps d'article en variante claire : confort de lecture longue */
.section--clair .article-corps th { color: var(--encre-2); border-bottom-color: var(--trait-fort); }
.section--clair .article-corps td { border-bottom-color: var(--trait); }
.section--clair .encadre { background: #fff; border-left-color: var(--encre); }
.section--clair .encadre p { color: var(--encre-2); }
.section--clair .encadre strong { color: var(--encre); }
.section--clair .sources { color: var(--encre-2); }
.section--clair .article-meta { color: var(--encre-2); }

/* Colonne de poids de la matrice : largeur fixe pour que les barres se lisent */
.matrice th:nth-child(2), .matrice td:nth-child(2) { width: 70px; }
.matrice th:nth-child(3), .matrice td:nth-child(3) { width: 150px; padding-right: 26px; }
.repartition .bloc-r p { font-size: 14.5px; color: var(--encre-2); line-height: 1.6; }

/* Tableaux larges : défilement dans leur propre conteneur, jamais la page */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .matrice { min-width: 680px; }

/* ==========================================================================
   SIMULATEUR · auto-évaluation d'exposition et de préparation
   Repris de la V1, ramené au français seul et à la charte : pas de vert /
   ambre / rouge, la gravité s'exprime par le poids typographique et par le
   remplissage des barres, jamais par une teinte hors charte.
   ========================================================================== */

.sim { background: var(--surface); }
.sim-cadre {
  border: 1px solid var(--ligne-fort);
  border-radius: 10px;
  background: var(--noir);
  overflow: hidden;
}

.sim-barre {
  height: 2px;
  background: rgba(255, 255, 255, .1);
}
.sim-barre i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--jaune);
  transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

.sim-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5f5c56;
  min-height: 46px;
}
.sim-fil span[data-etat="fait"] { color: var(--gris); }
.sim-fil span[data-etat="courant"] { color: var(--jaune); }
.sim-fil i { font-style: normal; color: #3a3833; }

.sim-scene {
  padding: clamp(28px, 4vw, 52px);
  min-height: 430px;
  display: flex;
  align-items: center;
}
.sim-ecran { width: 100%; max-width: 640px; }
.sim-ecran .sim-cat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jaune);
  margin: 0 0 14px;
}
.sim-ecran h3 {
  font-size: clamp(21px, 2.6vw, 30px);
  margin-bottom: 14px;
  max-width: 24ch;
}
.sim-ecran .sim-lead { color: var(--gris); margin-bottom: 26px; max-width: 56ch; }

.sim-options { display: grid; gap: 9px; margin-bottom: 22px; }
.sim-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-family: var(--texte);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--blanc);
  background: var(--surface);
  border: 1px solid var(--ligne-fort);
  border-radius: 6px;
  padding: 15px 18px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.sim-option em { font-style: normal; color: var(--jaune); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.sim-option:hover { background: var(--surface-2); border-color: var(--jaune); transform: translateX(3px); }
.sim-option:hover em { opacity: 1; transform: translateX(3px); }

.sim-retour {
  background: none;
  border: 0;
  color: var(--gris);
  font-family: var(--texte);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
}
.sim-retour:hover { color: var(--blanc); }

/* --- résultat --- */
.sim-bandeau {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
}
.sim-bandeau[data-niveau="risk"] { background: var(--jaune); color: #0a0a0a; font-weight: 600; }
.sim-bandeau[data-niveau="mid"] { border: 1px solid var(--jaune); color: var(--jaune); }
.sim-bandeau[data-niveau="good"] { border: 1px solid var(--ligne-fort); color: var(--gris); }
.sim-bandeau .sim-score { font-variant-numeric: tabular-nums; }

.sim-barres { display: grid; gap: 12px; margin: 26px 0; }
.sim-cat-ligne { display: grid; grid-template-columns: 116px 1fr 52px; gap: 14px; align-items: center; }
.sim-cat-nom { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.sim-cat-piste { height: 6px; background: rgba(255, 255, 255, .09); border-radius: 3px; overflow: hidden; }
.sim-cat-piste span { display: block; height: 100%; background: var(--jaune); border-radius: 3px; transition: width .7s cubic-bezier(.2,.7,.3,1); }
.sim-cat-val { font-family: var(--mono); font-size: 13px; color: var(--blanc); font-variant-numeric: tabular-nums; text-align: right; }

.sim-note {
  border-left: 2px solid var(--jaune);
  background: var(--surface);
  border-radius: 0 6px 6px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.sim-note h4 { font-size: 15px; margin-bottom: 6px; }
.sim-note p { color: var(--gris); font-size: 15px; }

.sim-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sim-pied {
  padding: 14px 22px;
  border-top: 1px solid var(--ligne);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: #5f5c56;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .sim-scene { min-height: 480px; padding: 24px 18px; }
  .sim-cat-ligne { grid-template-columns: 92px 1fr 46px; gap: 10px; }
  .sim-fil { padding: 12px 18px; font-size: 10px; }
}


/* === AJOUTS CONVERSION 2026-09 === */
/* Composants du chantier « site qui convertit ». Tous tiennent sur fond
   sombre et dans .section--clair (variables --encre, --encre-2, --trait,
   --trait-fort définies par .section--clair). */

/* --- hero : ligne « pour qui » sous le h1 --- */
.hero-pour {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jaune);
  line-height: 1.6;
  margin: 18px 0 14px;
  max-width: 60ch;
}

/* --- rappel de CTA entre deux sections : une phrase, un bouton --- */
.rappel {
  border-top: 1px solid var(--ligne);
  padding-block: clamp(28px, 4vw, 44px);
}
.rappel .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.rappel p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px);
  letter-spacing: -.015em;
  line-height: 1.25;
  max-width: 34ch;
  margin: 0;
}
.section--clair.rappel { border-top-color: var(--trait); }

/* --- capture : bloc bordé avec formulaire court (relevé de fiche) --- */
.capture {
  border: 1px solid var(--ligne-fort);
  border-radius: 10px;
  padding: clamp(22px, 3.5vw, 36px);
  background: var(--surface);
}
.grille + .capture, .lede + .capture, .entete + .capture { margin-top: 40px; }
.capture .eyebrow { margin-bottom: 0; }
.capture h3 { margin: 8px 0 10px; }
.capture p { color: var(--gris); max-width: 62ch; }
.capture .form { margin-top: 22px; }
.capture .form-note { margin: 16px 0 0; }
.capture .form-recu { margin: 0; }
.capture .form-recu h3 { margin: 0 0 12px; }
.section--clair .capture { background: #fff; border-color: var(--trait-fort); }
.section--clair .capture p { color: var(--encre-2); }
.section--clair .capture h3 { color: var(--encre); }

/* --- formulaire en ligne : deux champs et le bouton sur une rangée --- */
.form--ligne { max-width: none; align-items: end; }
.form--ligne .form-erreur, .form--ligne .form-note { grid-column: 1 / -1; }
.form--ligne button { white-space: nowrap; }
@media (min-width: 720px) {
  .form--ligne { grid-template-columns: 1fr 1fr auto; }
}

/* --- champs et accusé sur support clair --- */
.section--clair .champ label { color: var(--encre-2); }
.section--clair .champ input,
.section--clair .champ select,
.section--clair .champ textarea {
  background: #fff;
  color: var(--encre);
  border-color: var(--trait-fort);
}
.section--clair .champ input:focus,
.section--clair .champ select:focus,
.section--clair .champ textarea:focus { border-color: var(--encre); }
.section--clair .champ input::placeholder,
.section--clair .champ textarea::placeholder { color: #8a8780; }
.section--clair .champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%);
}
.section--clair .champ select option { background: #fff; color: var(--encre); }
.section--clair .form-note { color: var(--encre-2); }
.section--clair .form-erreur { color: #b3261e; }
.section--clair .form-recu { border-color: var(--encre); background: #fff; }
.section--clair .form-recu p { color: var(--encre-2); }

/* --- engagement : ce que vous engagez / comment c'est facturé --- */
.engagement {
  display: grid;
  gap: 40px;
  margin: 48px 0;
}
@media (min-width: 860px) {
  .engagement { grid-template-columns: 1fr 1fr; }
}
.engagement h3 { margin-bottom: 18px; }
.engagement ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.engagement li {
  border-top: 1px solid var(--ligne);
  padding: 14px 0 0;
  margin: 0 0 14px;
  color: var(--gris);
  font-size: 16px;
}
.engagement li strong { color: var(--blanc); }
.engagement p { color: var(--gris); font-size: 16px; max-width: 62ch; }
.section--clair .engagement li { border-top-color: var(--trait); color: var(--encre-2); }
.section--clair .engagement li strong { color: var(--encre); }
.section--clair .engagement p { color: var(--encre-2); }

/* --- frise : quatre temps du diagnostic --- */
.frise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px;
  margin: 40px 0;
}
.frise-temps {
  border-top: 1px solid var(--ligne-fort);
  padding-top: 16px;
}
.frise-temps .label { display: block; margin-bottom: 12px; }
.frise-temps h3 { font-size: 18px; margin: 0 0 8px; }
.frise-temps p { color: var(--gris); font-size: 15px; }
.section--clair .frise-temps { border-top-color: var(--trait-fort); }
.section--clair .frise-temps p { color: var(--encre-2); }

/* --- simulateur : trois points à traiter en premier ---
   Balisage attendu :
   <div class="sim-priorites"><h4>…</h4>
     <div class="sim-priorite"><i>01</i><div><b>titre</b><p>action</p></div></div>
     <div class="sim-priorite" data-acquis><i>03</i><div><b>titre</b><span class="sim-acquis">Point acquis</span><p>…</p></div></div>
   </div> */
.sim-priorites { margin: 26px 0; }
.sim-priorites h4 { font-size: 15px; margin: 0 0 6px; }
.sim-priorite {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ligne);
}
.sim-priorite:last-child { border-bottom: 1px solid var(--ligne); }
.sim-priorite > i, .sim-priorite .sim-num {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--jaune);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.sim-priorite b, .sim-priorite strong, .sim-priorite h5 {
  display: block;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--blanc);
}
.sim-priorite p { color: var(--gris); font-size: 14.5px; margin: 0; max-width: 58ch; }
.sim-priorite .sim-acquis {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 4px;
}
.sim-priorite[data-acquis] > i, .sim-priorite[data-acquis] .sim-num { color: var(--gris); }

/* --- simulateur : capture email du résultat --- */
.sim-capture {
  border: 1px solid var(--ligne-fort);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px 22px;
  margin: 24px 0;
}
.sim-capture h4 { font-size: 15px; margin: 0 0 6px; }
.sim-capture p { color: var(--gris); font-size: 15px; }
.sim-capture form { display: grid; gap: 12px; margin-top: 14px; }
.sim-capture form[hidden] { display: none; }
.sim-capture .champ label { font-size: 10.5px; }
.sim-capture .form-erreur, .sim-capture .form-recu, .sim-capture .form-note { grid-column: 1 / -1; margin: 0; }
.sim-capture .form-recu { padding: 14px 18px; }
.sim-capture .form-recu p { font-size: 14.5px; }
.sim-capture button { white-space: nowrap; }
@media (min-width: 560px) {
  .sim-capture form { grid-template-columns: 1fr auto; align-items: end; }
}


/* ------------------------------------------------------------- fluidité --
   Apparitions décalées, survols qui répondent, barre d'appel sur mobile. */

[data-reveal] { transition-duration: .8s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.grille > *, .tarifs > *, .listes-2 > *, .wizard > * { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal] .carte:nth-child(2), [data-reveal] .tarif:nth-child(2) { transition-delay: .07s; }
[data-reveal] .carte:nth-child(3), [data-reveal] .tarif:nth-child(3) { transition-delay: .14s; }
[data-reveal] .carte:nth-child(4) { transition-delay: .21s; }
.carte { transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.carte:hover { transform: translateY(-3px); }
a.carte:hover { border-color: var(--encre); }
.etape { transition: border-color .3s ease; }
.faq details { transition: background-color .25s ease; }
.nav { transition: box-shadow .3s ease, background-color .3s ease; }
.nav[data-defile="oui"] { box-shadow: 0 1px 22px -12px rgba(0, 0, 0, .5); }

.cta-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--ligne);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.cta-mobile[data-visible="oui"] { transform: none; }
.cta-mobile .btn { flex: 1 1 auto; }
.cta-mobile-lien { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
@media (max-width: 720px) { .cta-mobile { display: flex; } body { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-mobile { transition: none; } }


/* ------------------------------------------- page tarifs, patron Minespider --
   Cartes pauvres (prix et « pour qui »), puis un grand tableau comparatif
   découpé en rubriques numérotées. */

.compa .rubrique th {
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre);
  padding: 14px 18px;
}
.compa .rubrique th span {
  display: inline-block;
  min-width: 2.2em;
  color: var(--gris);
}
.compa thead th {
  position: sticky;
  top: var(--nav-h);
  background: var(--surface);
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--ligne);
}

.normes {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  padding-top: 26px; margin-top: 34px; border-top: 1px solid var(--ligne);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris);
}
.normes b { color: var(--encre); font-weight: 500; }

.hero-preuve {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 20px; font-size: 14px; color: var(--gris);
}
.hero-preuve span { display: inline-flex; align-items: center; gap: 8px; }
.hero-preuve span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--encre); flex: 0 0 auto;
}
.btns--simple { align-items: center; gap: 26px; }


.btn--fleche::after {
  content: "→";
  display: inline-grid;
  place-items: center;
  width: 1.65em; height: 1.65em;
  margin-left: .5em; margin-right: -.55em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .92em; line-height: 1;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.btn--fleche:hover::after { transform: translateX(3px); }
.btn--clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--clair:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }

.hero-pastille {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 7px 16px; margin: 0 0 26px;
}
.hero-pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jaune); }

/* Les cinq fonctions, en liste numérotée sobre. */
.fonctions { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.fonctions li {
  counter-increment: f;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px;
  padding: 22px 0; border-top: 1px solid var(--ligne);
}
.fonctions li::before {
  content: "0" counter(f);
  grid-row: 1 / span 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--gris); padding-top: .45em;
}
.fonctions li:last-child { border-bottom: 1px solid var(--ligne); }
.fonctions b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); letter-spacing: -.015em; }
.fonctions span { color: var(--gris); font-size: 15.5px; }

.pp-entete { display: flex; align-items: flex-start; gap: 14px; }
.pp-entete-texte { min-width: 0; flex: 1 1 auto; }
.pp-qr {
  flex: 0 0 auto;
  width: 74px; height: 74px; padding: 6px;
  background: #fff; border-radius: 7px;
}
@media (max-width: 400px) { .pp-qr { width: 62px; height: 62px; } }

/* ------------------------------------------- le passeport réel sur l'accueil --
   Le document est affiché vivant dans une fenêtre de navigateur, plutôt qu'en
   capture d'écran : c'est la même page que celle publiée, à jour par
   construction, et le visiteur peut la faire défiler. */

.demo-passeport {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 52px);
  align-items: start;
}
@media (max-width: 940px) { .demo-passeport { grid-template-columns: 1fr; } }

.fenetre {
  margin: 0;
  border: 1px solid var(--ligne-fort);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 60px -40px rgba(26, 26, 24, .6);
}
.fenetre-barre {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ligne);
}
.fenetre-points { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.fenetre-points i { width: 9px; height: 9px; border-radius: 50%; background: rgba(26, 26, 24, .18); }
.fenetre-url {
  font-family: var(--mono); font-size: 11.5px; color: var(--gris);
  background: #fff; border: 1px solid var(--ligne);
  border-radius: 999px; padding: 5px 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fenetre iframe {
  display: block; width: 100%; height: clamp(460px, 62vh, 640px);
  border: 0; background: #fff;
}

.demo-intro { font-size: clamp(17px, 1.7vw, 19px); color: var(--encre); margin-bottom: 26px; }
.demo-points { list-style: none; margin: 0 0 30px; padding: 0; }
.demo-points li { padding: 14px 0; border-top: 1px solid var(--ligne); }
.demo-points li:last-child { border-bottom: 1px solid var(--ligne); }
.demo-points b { display: block; font-family: var(--display); font-weight: 600; font-size: 16.5px; margin-bottom: 3px; }
.demo-points span { color: var(--gris); font-size: 15px; }

.demo-qr { display: flex; align-items: center; gap: 18px; margin: 0 0 8px; }
.demo-qr img {
  flex: 0 0 auto; width: 104px; height: 104px; padding: 8px;
  background: #fff; border: 1px solid var(--ligne); border-radius: 10px;
}
.demo-qr figcaption { font-size: 14px; color: var(--gris); line-height: 1.5; }

/* Décompte des informations exigées par le guide de la Commission. */
.compte { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin-top: clamp(24px, 3vw, 36px); }
.compte-item { background: #fff; border: 1px solid var(--ligne); border-radius: 10px; padding: 24px 22px; }
.compte-item b { display: block; font-family: var(--mono); font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1; margin-bottom: 12px; }
.compte-item p { color: var(--gris); font-size: 15px; margin: 0; }
.compte-item strong { color: var(--encre); }

/* ==========================================================================
   RETOUR À LA CHARTE V1 · 15 septembre 2026
   Décision de Claire après la réunion avec Stéphane : « je préfère cette
   version design », celle en ligne sur seqo-pass.com, c'est-à-dire la charte
   V1 telle quelle : noir canonique, texte blanc, accent jaune unique, sections
   papier en alternance. Les quatre thèmes clairs essayés entre le 8 et le 14
   septembre (papier, encre et ivoire, tout en clair, blanc dominant) ont été
   retirés de cette feuille ; ils restent dans l'historique.
   Ce bloc ne fait qu'une chose : donner leur version sombre aux composants
   créés depuis le 2 septembre, qui avaient été dessinés sur fond clair.
   ========================================================================== */

:root {
  /* Alias posés par les thèmes clairs et repris partout dans les composants
     récents : sur fond noir, l'encre est le blanc de la charte. Les sections
     papier (.section--clair) redéfinissent ces mêmes noms en noir. */
  --encre: var(--blanc);
  --encre-2: var(--gris);
  --trait: var(--ligne);
  --trait-fort: var(--ligne-fort);
  --fond: var(--noir);
  --carte-fond: var(--surface);
  --sombre: #000000;
  --sable: var(--surface);
  --jaune-plein: var(--jaune);
}

/* ---------------------------------------------------------------- hero -- */

/* Hero d'accueil plein écran, vidéo en fond (retour de Claire du 15/09 : « il
   faut que la vidéo soit en grand comme dans les premières versions »). Le
   voile sombre est celui de la V1, tel quel : Claire l'a redemandé après un
   essai plus léger (« la vidéo est trop claire »). Seul le titre change, tenu
   sur trois lignes pour ne pas couvrir toute l'image. */
.hero h1 { max-width: 26ch; font-size: clamp(36px, 5vw, 66px); line-height: 1.06; }
.hero .lede { max-width: 56ch; }
.hero .hero-pastille { margin-bottom: 22px; }

/* Hero d'accueil en deux colonnes : texte à gauche, vidéo encadrée à droite.
   Même structure que la version claire, sur le noir de la charte. */
.hero-clair { background: var(--noir); border-bottom: 1px solid var(--ligne); }
.hero-clair .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 96px) clamp(44px, 5.5vw, 76px);
}
@media (max-width: 900px) { .hero-clair .wrap { grid-template-columns: 1fr; } }
.hero-clair h1 {
  max-width: 15ch; margin-bottom: 22px;
  font-size: clamp(36px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -.028em;
}
.hero-clair .lede { max-width: 54ch; color: var(--gris); margin-bottom: 32px; }
.hero-clair .lede strong { color: var(--blanc); }
.hero-media {
  margin: 0; border: 1px solid var(--ligne-fort); border-radius: 14px; overflow: hidden;
  background: var(--surface); aspect-ratio: 4 / 3.2;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .hero-media { aspect-ratio: 16 / 9; } }

.apres-grille { margin-top: 34px; }

/* Carte mise en avant dans une grille : la nôtre, cernée de jaune. */
.carte--accent { border-color: var(--jaune); }
.carte--accent .label { color: var(--jaune); }
.section--clair .carte--accent { border-color: var(--encre); }
.section--clair .carte--accent .label { color: var(--encre); }

/* Le bandeau d'appel garde le noir de la charte : pas d'aplat jaune. */
.section--jaune { background: var(--noir); }

/* Barre d'appel fixe sur mobile, en sombre. */
.cta-mobile { background: rgba(0, 0, 0, .92); border-top-color: var(--ligne-fort); }

/* Décompte des informations exigées : cartes sombres, blanches sur papier. */
.compte-item { background: var(--surface); border-color: var(--ligne-fort); }
.section--clair .compte-item { background: #fff; border-color: var(--trait); }

/* Formulaire de capture hors section papier. */
.capture { background: var(--surface); }
.section--clair .capture { background: #fff; }

/* Le passeport réel dans sa fenêtre : la fenêtre reste blanche, c'est un
   document ; seul son cadre suit le fond sombre. */
.fenetre { border-color: var(--ligne-fort); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95); }
.fenetre-barre { background: #f4f2ec; border-bottom-color: rgba(0, 0, 0, .1); }
.fenetre-url { color: #5f5c55; border-color: rgba(0, 0, 0, .1); }

/* Tableau de l'offre : libellés et statuts en blanc sur le noir. */
.compa th[scope="row"] { color: var(--blanc); }
.compa td b { color: var(--blanc); }
.compa td .offert { color: var(--blanc); border-color: var(--ligne-fort); }


/* ==========================================================================
   17/09/2026 · Composants sortis des pages (plateforme, convaincre) pour être
   partagés par les trois langues : tableau de bord et note interne.
   ========================================================================== */
/* ---- Le tableau de bord de la plateforme, en HTML, dans la charte ----
   Comme sur la maquette : barre latérale sombre, contenu clair, cartes
   blanches. Le jaune de la charte porte l'élément actif, les jauges et
   l'action principale ; le reste est encre et gris. */
.tb-encre { --tb-encre:#0a0a0a; --tb-gris:#5f5c55; --tb-fond:#f5f4ef; --tb-carte:#ffffff; --tb-trait:rgba(10,10,10,.1); --tb-trait-fort:rgba(10,10,10,.2); --tb-piste:#e9e7e0; --tb-jaune:#ffe070; --tb-jaune-pale:#fff4c2; }
.ecran-cadre { border:1px solid var(--ligne-fort); border-radius:12px; overflow:hidden; background:var(--tb-fond); box-shadow:0 34px 80px -44px rgba(0,0,0,.95); }
.ecran-barre { display:flex; align-items:center; gap:14px; padding:10px 14px; background:#ebe9e2; border-bottom:1px solid var(--tb-trait); }
.ecran-points { display:inline-flex; gap:6px; flex:0 0 auto; }
.ecran-points i { width:9px; height:9px; border-radius:50%; background:rgba(10,10,10,.16); }
.ecran-url { font-family:var(--mono); font-size:11.5px; color:var(--tb-gris); background:#fff; border:1px solid var(--tb-trait); border-radius:999px; padding:5px 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tb { display:grid; grid-template-columns:186px minmax(0,1fr); background:var(--tb-fond); color:var(--tb-encre); font-family:var(--texte); font-size:13px; line-height:1.4; }
.tb svg { width:16px; height:16px; flex:0 0 auto; }
.tb-side { background:#0a0a0a; color:#fafaf7; padding:18px 12px 16px; display:flex; flex-direction:column; }
.tb-logo { display:flex; align-items:center; gap:8px; margin:2px 8px 20px; font-family:var(--logotype); font-weight:500; font-size:19px; letter-spacing:-.01em; color:#fafaf7; }
.tb-logo svg { width:22px; height:20px; }
.tb-nav { display:flex; flex-direction:column; gap:2px; }
.tb-nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; color:#a9a79f; font-size:13px; }
.tb-nav a[aria-current="page"] { background:var(--tb-jaune); color:#0a0a0a; font-weight:600; }
.tb-nav hr { border:0; border-top:1px solid rgba(255,255,255,.1); margin:10px 6px; }
.tb-side-pied { margin-top:auto; padding:18px 8px 0; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#7d7b74; line-height:1.6; }
.tb-main { padding:0 20px 20px; min-width:0; }
.tb-top { display:flex; justify-content:flex-end; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--tb-trait); margin-bottom:18px; }
.tb-cloche { position:relative; color:var(--tb-gris); display:inline-flex; }
.tb-cloche::after { content:""; position:absolute; top:-1px; right:-1px; width:6px; height:6px; border-radius:50%; background:var(--tb-jaune); border:1px solid var(--tb-encre); box-sizing:border-box; }
.tb-user { display:flex; align-items:center; gap:9px; font-size:12px; line-height:1.25; color:var(--tb-encre); }
.tb-user em { display:block; font-style:normal; color:var(--tb-gris); font-size:11px; }
.tb-avatar { width:28px; height:28px; border-radius:50%; background:#0a0a0a; color:#fafaf7; font-family:var(--mono); font-weight:500; font-size:10.5px; display:grid; place-items:center; }
.tb-h1 { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0 0 4px; color:var(--tb-encre); }
.tb-sous { color:var(--tb-gris); margin:0 0 16px; font-size:13px; }

.tb-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.tb-kpi { background:var(--tb-carte); border:1px solid var(--tb-trait); border-radius:8px; padding:14px 16px; }
.tb-kpi .k { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tb-gris); margin:0; }
.tb-kpi .k svg { width:28px; height:28px; padding:6px; border-radius:50%; background:var(--tb-jaune-pale); color:var(--tb-encre); box-sizing:border-box; }
.tb-kpi b { display:block; font-family:var(--mono); font-size:26px; font-weight:500; letter-spacing:-.02em; margin:8px 0 3px; color:var(--tb-encre); }
.tb-kpi span { font-size:12px; color:var(--tb-gris); }

.tb-grille { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,1fr); gap:12px; margin-bottom:12px; }
.tb-bas { display:grid; grid-template-columns:minmax(0,2.6fr) minmax(0,.95fr); gap:12px; }
.tb-bloc { background:var(--tb-carte); border:1px solid var(--tb-trait); border-radius:8px; padding:14px 16px; min-width:0; }
.tb-bloc-t { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.tb-bloc-t h4 { display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:14px; font-weight:600; margin:0; color:var(--tb-encre); }
.tb-bloc-t h4 svg { color:var(--tb-encre); }
.tb-bloc-t a { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tb-encre); white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }

.tb-action { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--tb-trait); }
.tb-action:first-of-type { border-top:0; }
.tb-puce { width:9px; height:9px; border-radius:50%; box-sizing:border-box; display:inline-block; }
.tb-puce[data-n="haute"] { background:var(--tb-jaune); border:1px solid var(--tb-encre); }
.tb-puce[data-n="moyenne"] { border:2px solid var(--tb-encre); }
.tb-puce[data-n="basse"] { border:1px solid var(--tb-gris); }
.tb-action b { display:block; font-weight:600; font-size:13px; color:var(--tb-encre); }
.tb-action span { font-size:11.5px; color:var(--tb-gris); }
.tb-badge { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--tb-trait-fort); color:var(--tb-gris); white-space:nowrap; }
.tb-badge[data-n="haute"] { background:var(--tb-jaune); color:#0a0a0a; border-color:var(--tb-jaune); }
.tb-badge[data-n="moyenne"] { color:var(--tb-encre); border-color:var(--tb-encre); }

.tb-donut { width:128px; height:128px; border-radius:50%; margin:8px auto 4px; display:grid; place-items:center; background:conic-gradient(var(--tb-jaune) 0 82%, var(--tb-piste) 82% 100%); }
.tb-donut i { width:98px; height:98px; border-radius:50%; background:var(--tb-carte); display:grid; place-items:center; font-family:var(--mono); font-size:24px; font-style:normal; letter-spacing:-.02em; color:var(--tb-encre); }
.tb-donut-l { text-align:center; font-size:11.5px; color:var(--tb-gris); margin:0 0 10px; }
.tb-legende { list-style:none; margin:0; padding:0; }
.tb-legende li { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; padding:6px 0; border-top:1px solid var(--tb-trait); }
.tb-legende li span { display:flex; gap:8px; align-items:center; color:var(--tb-gris); }
.tb-legende li b { font-family:var(--mono); font-weight:500; color:var(--tb-encre); }
.tb-lien { display:inline-block; margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tb-encre); text-decoration:underline; text-underline-offset:3px; }

.tb-etapes { list-style:none; margin:0; padding:0; counter-reset:e; }
.tb-etapes li { counter-increment:e; display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:8px 0; }
.tb-etapes li::before { content:counter(e); grid-row:1 / span 2; width:22px; height:22px; border-radius:50%; background:var(--tb-jaune-pale); border:1px solid var(--tb-trait-fort); display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--tb-encre); }
.tb-etapes b { display:block; font-size:13px; font-weight:600; color:var(--tb-encre); }
.tb-etapes span { font-size:11.5px; color:var(--tb-gris); }
.tb-btn { display:block; margin-top:12px; text-align:center; background:#0a0a0a; color:#fafaf7; font-weight:600; font-size:12.5px; padding:10px 14px; border-radius:999px; }

.tb-table-cadre { overflow-x:auto; }
.tb-table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--tb-encre); }
.tb-table th { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tb-gris); font-weight:400; text-align:left; padding:8px 10px; border-bottom:1px solid var(--tb-trait); white-space:nowrap; }
.tb-table td { padding:10px; border-bottom:1px solid var(--tb-trait); vertical-align:middle; }
.tb-table tr:last-child td { border-bottom:0; }
.tb-table td:first-child { font-family:var(--mono); font-weight:500; white-space:nowrap; }
.tb-type { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--tb-trait-fort); border-radius:999px; color:var(--tb-gris); white-space:nowrap; }
.tb-etat { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tb-jauge { display:block; width:min(120px,100%); height:5px; border-radius:3px; background:var(--tb-piste); margin-top:5px; overflow:hidden; }
.tb-jauge i { display:block; height:100%; width:var(--v); background:var(--tb-jaune); }
.tb-jauge[data-bas] i { background:#b8b6ae; }
.tb-pct { font-family:var(--mono); font-size:12px; }

.tb-note { display:flex; flex-direction:column; background:var(--tb-jaune-pale); border-color:transparent; }
.tb-note h4 { font-family:var(--display); font-size:14px; font-weight:600; margin:8px 0 6px; color:var(--tb-encre); }
.tb-note p { font-size:12.5px; color:var(--tb-gris); margin:0 0 12px; }
.tb-note .tb-lien { margin-top:auto; }

@media (max-width:900px) {
  .tb { grid-template-columns:1fr; }
  .tb-side { padding:14px 12px; }
  .tb-logo { margin-bottom:12px; }
  .tb-nav { flex-direction:row; flex-wrap:wrap; }
  .tb-nav hr { display:none; }
  .tb-side-pied { display:none; }
  .tb-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tb-grille, .tb-bas { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .tb-main { padding:0 12px 12px; }
  .tb-nav a span { display:none; }
  .tb-h1 { font-size:19px; }
  .tb-table th:nth-child(2), .tb-table td:nth-child(2) { display:none; }
}

/* ---- La note d'une page : un document papier posé sur la page ---- */
.note-cadre { display:grid; gap:clamp(24px,3.5vw,48px); grid-template-columns:minmax(0,1fr) minmax(0,300px); align-items:start; }
@media (max-width:900px) { .note-cadre { grid-template-columns:1fr; } }
.note { background:#fff; color:#0a0a0a; border:1px solid rgba(0,0,0,.14); border-radius:6px; padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px); box-shadow:0 30px 70px -40px rgba(0,0,0,.9); }
.note-tete { border-bottom:1px solid rgba(0,0,0,.14); padding-bottom:18px; margin-bottom:26px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#5f5c55; }
.note h2 { font-family:var(--display); font-size:clamp(22px,2.6vw,30px); line-height:1.15; letter-spacing:-.02em; color:#0a0a0a; margin:0 0 22px; }
.note h3 { font-family:var(--display); font-size:15px; letter-spacing:-.01em; color:#0a0a0a; margin:22px 0 6px; display:flex; gap:12px; align-items:baseline; }
.note h3 span { font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:#5f5c55; font-weight:400; }
.note p, .note li { font-size:15px; line-height:1.55; color:#2a2a28; margin:0 0 8px; }
.note ul { margin:0 0 8px; padding-left:18px; }
.note strong { color:#0a0a0a; }
.note li::marker { color:#0a0a0a; }
.note .decision { border:1px solid #0a0a0a; border-radius:6px; padding:16px 18px; margin-top:22px; }
.note .decision h3 { margin-top:0; }
.note .decision li { margin-bottom:6px; }
.note-pied { border-top:1px solid rgba(0,0,0,.14); margin-top:26px; padding-top:14px; font-size:12.5px; color:#5f5c55; display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between; }
.note a { color:#0a0a0a; text-decoration:underline; text-underline-offset:3px; }

.kit-cote { position:sticky; top:calc(var(--nav-h) + 24px); display:grid; gap:14px; }
.kit-cote .carte p { font-size:14.5px; }
.kit-cote .btn { width:100%; }
.kit-imprimer { background:transparent; color:var(--blanc); border:1px solid var(--ligne-fort); cursor:pointer; font-family:var(--texte); }
.kit-imprimer:hover { border-color:var(--blanc); }

@media print {
  @page { margin:14mm; }
  .nav, .menu-mobile, .footer, .bandeau-cta, .cta-mobile, .page-hero, .kit-cote, .kit-hors-note, .skip-link { display:none !important; }
  body, .section, .section--clair, .wrap { background:#fff !important; color:#000 !important; padding:0 !important; margin:0 !important; border:0 !important; }
  .note-cadre { display:block; }
  .note { box-shadow:none; border:0; padding:0; border-radius:0; }
  .note p, .note li { font-size:11.5pt; }
  .note h2 { font-size:18pt; }
  .note h3 { font-size:12pt; page-break-after:avoid; }
  .note .decision { page-break-inside:avoid; }
  a { text-decoration:none; }
}

/* ==========================================================================
   17/09/2026, soir · Relief pour le site anglais : émojis discrets, cartes
   cliquables, compte à rebours, jauge de référence, anneau des 71
   informations, tableau de bord animé, carte des données des pages secteurs.
   Tout est déclenché par la révélation existante (data-reveal → .est-visible)
   ou par la classe .est-pret posée par js/seqo.js.
   ========================================================================== */

/* Émoji devant un eyebrow ou un libellé : neutre, jamais dans le fil du texte. */
.emo { display: inline-block; letter-spacing: 0; margin-right: .5em; font-size: 1.1em; line-height: 1; vertical-align: -.08em; filter: saturate(.8); }
.carte .label .emo { font-size: 1.25em; margin-right: .45em; }

/* Cartes cliquables (page secteurs). */
a.carte { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.carte p { flex: 1 0 auto; }
a.carte .carte-lien { margin-top: 18px; margin-bottom: 0; }
a.carte .carte-lien span:last-child { display: inline-block; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
a.carte:hover .carte-lien span:last-child { transform: translateX(4px); }
a.carte:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

/* Compte à rebours jusqu'au 18 février 2027 : anneau = part du délai déjà écoulée
   depuis l'entrée en vigueur du règlement (17 août 2023). */
.rebours { display: flex; align-items: center; gap: 14px; }
.hero-chiffres .rebours { flex-direction: row; }
.rebours > div { display: flex; flex-direction: column; gap: 3px; }
.rebours-anneau { width: 62px; height: 62px; flex: 0 0 auto; transform: rotate(-90deg); }
.rebours-anneau .piste { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 9; }
.rebours-anneau .trait { fill: none; stroke: var(--jaune); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.8s cubic-bezier(.16, 1, .3, 1) .3s; }
.rebours.est-pret .trait { stroke-dashoffset: calc(326.7px * (1 - var(--p, 0))); }
.section--clair .rebours-anneau .piste { stroke: rgba(10, 10, 10, .12); }
.section--clair .rebours-anneau .trait { stroke: var(--encre); }
.rebours--grand { gap: 22px; }
.rebours--grand .rebours-anneau { width: 96px; height: 96px; }
.rebours--grand b { font-family: var(--mono); font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; line-height: 1; }
.rebours--grand span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* Jauge de référence : 7,2 informations publiées sur 58. */
.jauge-base { margin-top: 16px; }
.jauge-base .piste { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.jauge-base .piste i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--jaune); transition: width 1.4s cubic-bezier(.16, 1, .3, 1) .35s; }
.est-visible .jauge-base .piste i { width: var(--v); }
.jauge-base .legende { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.jauge-base .legende b { color: var(--blanc); font-weight: 500; }
.section--clair .jauge-base .piste { background: rgba(10, 10, 10, .1); }
.section--clair .jauge-base .piste i { background: var(--encre); }
.section--clair .jauge-base .legende b { color: var(--encre); }

/* Anneau des 71 informations (page règlement, fond papier). */
.anneau { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 640px) { .anneau { grid-template-columns: 1fr; } }
.anneau-figure { position: relative; width: min(220px, 100%); aspect-ratio: 1; margin: 0; }
.anneau-figure svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau-figure .fond { fill: none; stroke: rgba(10, 10, 10, .08); stroke-width: 14; }
.anneau-figure .part { fill: none; stroke-width: 14; stroke-dasharray: 0 301.6; transition: stroke-dasharray 1.5s cubic-bezier(.16, 1, .3, 1); }
.anneau-figure .part--1 { stroke: #ffe070; }
.anneau-figure .part--2 { stroke: #0a0a0a; transition-delay: .25s; }
.anneau-figure .part--3 { stroke: #8a877e; transition-delay: .5s; }
.anneau-figure .part--4 { stroke: #c9c6bc; transition-delay: .6s; }
.anneau-figure .part--5 { stroke: #e2dfd5; transition-delay: .65s; }
.est-visible .anneau-figure .part { stroke-dasharray: var(--arc) 301.6; }
.anneau-centre { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anneau-centre b { display: block; font-family: var(--mono); font-size: 40px; letter-spacing: -.03em; line-height: 1; color: var(--encre); }
.anneau-centre span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); margin-top: 6px; }
.anneau-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.anneau-legende li { display: grid; grid-template-columns: 14px 44px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--encre-2); }
.anneau-legende i { width: 14px; height: 14px; border-radius: 4px; align-self: center; }
.anneau-legende b { font-family: var(--mono); font-size: 20px; color: var(--encre); }
.anneau-legende .p1 { background: #ffe070; } .anneau-legende .p2 { background: #0a0a0a; }
.anneau-legende .p3 { background: #8a877e; } .anneau-legende .p4 { background: #c9c6bc; } .anneau-legende .p5 { background: #e2dfd5; border: 1px solid #c9c6bc; }

/* Tableau de bord : les jauges se remplissent, l'anneau se dessine, les lignes arrivent. */
@property --tb-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.tb-encre .tb-jauge i { width: 0; transition: width 1.2s cubic-bezier(.16, 1, .3, 1) .5s; }
.tb-encre.est-visible .tb-jauge i { width: var(--v); }
.tb-encre .tb-donut { --tb-p: 0%; background: conic-gradient(var(--tb-jaune) 0 var(--tb-p), var(--tb-piste) var(--tb-p) 100%); transition: --tb-p 1.5s cubic-bezier(.16, 1, .3, 1) .5s; }
.tb-encre.est-visible .tb-donut { --tb-p: 82%; }
.tb-encre .tb-action, .tb-encre .tb-etapes li, .tb-encre .tb-table tbody tr { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.tb-encre.est-visible .tb-action, .tb-encre.est-visible .tb-etapes li, .tb-encre.est-visible .tb-table tbody tr { opacity: 1; transform: none; }
.tb-encre .tb-action:nth-child(3), .tb-encre .tb-etapes li:nth-child(2), .tb-encre .tb-table tbody tr:nth-child(2) { transition-delay: .55s; }
.tb-encre .tb-action:nth-child(4), .tb-encre .tb-etapes li:nth-child(3), .tb-encre .tb-table tbody tr:nth-child(3) { transition-delay: .7s; }
.tb-encre .tb-action:nth-child(5), .tb-encre .tb-table tbody tr:nth-child(4) { transition-delay: .85s; }
.tb-encre .tb-action:nth-child(2) { transition-delay: .4s; }

/* Carte des données (pages secteurs) : trois colonnes, qui détient quoi. */
.carte-donnees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; }
@media (max-width: 760px) { .carte-donnees { grid-template-columns: 1fr; } }
.carte-donnees > div { padding: 22px 22px 24px; border-right: 1px solid var(--ligne); }
.carte-donnees > div:last-child { border-right: 0; }
@media (max-width: 760px) { .carte-donnees > div { border-right: 0; border-bottom: 1px solid var(--ligne); } .carte-donnees > div:last-child { border-bottom: 0; } }
.carte-donnees .qui { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.carte-donnees h3 { font-size: 18px; margin-bottom: 14px; }
.carte-donnees ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.carte-donnees li { font-size: 13.5px; padding: 6px 11px; border: 1px solid var(--ligne-fort); border-radius: 999px; color: var(--blanc); opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.carte-donnees li.point-dur { border-color: var(--jaune); color: var(--jaune); }
.carte-donnees.est-visible li { opacity: 1; transform: none; }
.carte-donnees.est-visible > div:nth-child(1) li:nth-child(2) { transition-delay: .08s; } .carte-donnees.est-visible > div:nth-child(1) li:nth-child(3) { transition-delay: .16s; } .carte-donnees.est-visible > div:nth-child(1) li:nth-child(4) { transition-delay: .24s; }
.carte-donnees.est-visible > div:nth-child(2) li { transition-delay: .3s; } .carte-donnees.est-visible > div:nth-child(2) li:nth-child(2) { transition-delay: .38s; } .carte-donnees.est-visible > div:nth-child(2) li:nth-child(3) { transition-delay: .46s; } .carte-donnees.est-visible > div:nth-child(2) li:nth-child(4) { transition-delay: .54s; }
.carte-donnees.est-visible > div:nth-child(3) li { transition-delay: .6s; } .carte-donnees.est-visible > div:nth-child(3) li:nth-child(2) { transition-delay: .68s; } .carte-donnees.est-visible > div:nth-child(3) li:nth-child(3) { transition-delay: .76s; }
.carte-donnees .fleche { display: block; margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

/* Liste « qui bouge déjà » (pages secteurs) : date en mono, une ligne par acteur. */
.qui-bouge { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.qui-bouge li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--ligne); }
@media (max-width: 560px) { .qui-bouge li { grid-template-columns: 1fr; gap: 4px; } }
.qui-bouge .quand { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); padding-top: 3px; }
.qui-bouge b { display: block; margin-bottom: 3px; }
.qui-bouge p { color: var(--gris); font-size: 15px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .rebours-anneau .trait, .jauge-base .piste i, .anneau-figure .part, .tb-encre .tb-jauge i, .tb-encre .tb-donut,
  .tb-encre .tb-action, .tb-encre .tb-etapes li, .tb-encre .tb-table tbody tr, .carte-donnees li { transition: none; }
  .tb-encre .tb-jauge i { width: var(--v); }
  .tb-encre .tb-donut { --tb-p: 82%; }
  .tb-encre .tb-action, .tb-encre .tb-etapes li, .tb-encre .tb-table tbody tr, .carte-donnees li { opacity: 1; transform: none; }
  .jauge-base .piste i { width: var(--v); }
  .anneau-figure .part { stroke-dasharray: var(--arc) 301.6; }
}
a.carte .carte-lien { color: var(--jaune); }
.section--clair a.carte .carte-lien { color: var(--encre); }
.section--clair .qui-bouge .quand { color: var(--encre-2); }
.section--clair .qui-bouge li { border-color: rgba(10, 10, 10, .12); }
.section--clair .qui-bouge { border-top-color: rgba(10, 10, 10, .12); }

/* ==========================================================================
   17/09/2026 · Lead magnet (js/aimant.js) : carte en bas à droite, jamais
   de voile plein écran. Étiquette BONUS en mono jaune, seul élément coloré.
   ========================================================================== */
.aimant { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: min(380px, calc(100vw - 32px)); padding: 24px 24px 20px; background: #000; color: var(--blanc); border: 1px solid var(--ligne-fort); border-radius: 14px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1); }
.aimant.est-ouvert { opacity: 1; transform: none; }
@media (max-width: 720px) { .aimant { right: 16px; left: 16px; bottom: 90px; width: auto; padding: 20px 18px 16px; } }
.aimant-fermer { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--gris); cursor: pointer; }
.aimant-fermer:hover { color: var(--blanc); background: var(--surface-2); }
.aimant-fermer svg { width: 16px; height: 16px; }
.aimant-etiquette { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--jaune); margin: 0 0 10px; }
.aimant h3 { font-size: 21px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 8px; padding-right: 30px; }
.aimant-texte { color: var(--gris); font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.aimant-form { display: grid; gap: 8px; }
.aimant [hidden] { display: none !important; }
.aimant-form input { width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px; color: var(--blanc); background: var(--surface); border: 1px solid var(--ligne-fort); border-radius: 8px; }
.aimant-form input:focus { outline: 2px solid var(--jaune); outline-offset: 1px; border-color: transparent; }
.aimant-form .btn { width: 100%; margin-top: 4px; }
.aimant-note { font-size: 12px; color: var(--gris); margin: 6px 0 0; line-height: 1.45; }
.aimant-note a { color: var(--gris); text-decoration: underline; text-underline-offset: 2px; }
.aimant-erreur { font-size: 13px; color: var(--blanc); margin: 0; }
.aimant-erreur a { color: var(--jaune); }
.aimant-merci .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .aimant { transition: none; } }
@media print { .aimant { display: none !important; } }

/* Équipe avec photos (page À propos anglaise, 17/09/2026). */
.equipe .carte { padding-top: 22px; }
.equipe-photo { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: 50%; margin-bottom: 18px; background: var(--surface-2); border: 1px solid var(--ligne-fort); }

/* Page diagnostic : hero court, le calendrier arrive tout de suite. */
.page-hero--court { padding-block: clamp(36px, 5vw, 60px) clamp(24px, 3vw, 36px); border-bottom: 0; }
.page-hero--court h1 { margin-bottom: 12px; font-size: clamp(30px, 4.4vw, 52px); }
.page-hero--court .lede { max-width: 62ch; }
#booking.section--nu { padding-top: 0; }

/* Bande vidéo pleine largeur (page secteurs anglaise). */
.bande-video { padding: clamp(28px, 4vw, 48px) var(--gouttiere, 20px) 0; background: #000; }
.bande-video video { display: block; width: min(100%, 1040px); margin: 0 auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--ligne-fort); }
@media (max-width: 720px) { .bande-video video { aspect-ratio: 16 / 9; border-radius: 10px; } }

/* Parcours de l'équipe : les logos des anciens employeurs, en tuiles blanches comme dans le deck. */
.equipe-parcours { margin-top: 18px; }
.equipe .logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.equipe .logo-tuile { background: #fff; border-radius: 10px; height: 88px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; }
.equipe .logo-tuile img { max-width: 100%; max-height: 100%; display: block; }
.equipe .carte .carte-lien { margin-top: 16px; }

/* Titre dans une colonne .mesure (pages règlement et secteurs) : de l'air sous le titre. */
.mesure > h2 { margin-bottom: 26px; }
.mesure > .eyebrow { margin-bottom: 14px; }

/* ==========================================================================
   18/09/2026 · Quatre reliefs de plus sur le site anglais, demandés par
   Claire : le scan du QR sur le téléphone, le tableau de bord qui vit (curseur,
   rapport d'erreurs, une ligne publiée), et les portraits (les deux fiches
   7,2 sur 58 ont été retirées le 18/09 avec le chiffre du baromètre).
   Tout part de la révélation (data-reveal → .est-visible) ; le tableau de
   bord est piloté par js/seqo.js et ne tourne que sur écran large.
   ========================================================================== */

/* ---- Le scan du QR sur le téléphone (accueil, « The deliverable ») ----
   Un calque sombre couvre l'écran, le trait balaie le QR deux fois, puis
   le calque s'efface et laisse le passeport. Une seule fois par visite. */
.telephone-scan { position: absolute; inset: 9px; z-index: 4; border-radius: 32px; background: #0a0a0a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; opacity: 1; }
.telephone-scan-viseur { position: relative; width: 150px; height: 150px; padding: 12px; background: #fff; border-radius: 10px; box-sizing: content-box; }
.telephone-scan-viseur img { display: block; width: 150px; height: 150px; }
.telephone-scan-viseur::before, .telephone-scan-viseur::after { content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid var(--jaune-hover); pointer-events: none; }
.telephone-scan-viseur::before { top: -12px; left: -12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.telephone-scan-viseur::after { bottom: -12px; right: -12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.telephone-scan-ligne { position: absolute; left: 6px; right: 6px; top: 8px; height: 2px; background: var(--jaune-hover); box-shadow: 0 0 10px 2px rgba(255, 224, 112, .55); border-radius: 2px; }
.telephone-scan-mot { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #9a9a94; }
.telephone-scan-mot::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--jaune-hover); margin-left: 8px; vertical-align: middle; }
.passeport.est-visible .telephone-scan-ligne { animation: scanLigne 1.3s cubic-bezier(.45, .05, .55, .95) .5s 1 both; }
.passeport.est-visible .telephone-scan-mot::after { animation: scanPoint .6s ease-in-out .5s 3; }
.passeport.est-visible .telephone-scan { animation: scanFondu .55s ease 2s 1 forwards; }
@keyframes scanLigne { 0% { top: 8px; } 50% { top: calc(100% - 10px); } 100% { top: 8px; } }
@keyframes scanPoint { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes scanFondu { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .telephone-scan { display: none; } }

/* ---- Le tableau de bord qui vit (accueil, bloc 2) ----
   Un curseur discret ouvre le rapport d'erreurs de la première action, publie
   la donnée reçue, referme, et la boucle reprend. Le rapport et le curseur
   n'existent que pour l'œil : tout est aria-hidden avec le reste du mock-up. */
.tb-main { position: relative; }
.tb-rapport { position: absolute; z-index: 5; left: 20px; top: 300px; width: min(440px, calc(100% - 40px)); background: #fff; border: 1px solid var(--tb-trait-fort); border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .35s; }
.tb-encre.rapport-ouvert .tb-rapport { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tb-rapport-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--tb-encre); margin-bottom: 3px; }
.tb-rapport-t > span:first-child { display: flex; align-items: center; gap: 8px; }
.tb-rapport-fermer { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--tb-gris); font-size: 19px; line-height: 1; font-weight: 400; border: 1px solid var(--tb-trait); }
.tb-rapport-sous { font-size: 11.5px; color: var(--tb-gris); margin: 0 0 8px; }
.tb-rapport-lignes { list-style: none; margin: 0; padding: 0; }
.tb-rapport-lignes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--tb-trait); font-size: 12.5px; color: var(--tb-encre); }
.tb-rapport-lignes li > span:first-child { flex: 1 1 auto; min-width: 0; }
.tb-rapport-lignes em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--tb-trait-fort); color: var(--tb-gris); white-space: nowrap; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.tb-rapport-lignes em[data-etat="recu"] { color: var(--tb-encre); border-color: var(--tb-encre); }
.tb-rapport-lignes em[data-etat="publie"] { background: var(--tb-jaune); border-color: var(--tb-jaune); color: #0a0a0a; }
.tb-rapport-btn { flex: 0 0 auto; font-weight: 600; font-size: 11.5px; background: #0a0a0a; color: #fafaf7; padding: 6px 12px; border-radius: 999px; transition: opacity .25s ease, transform .15s ease; }
.tb-rapport-lignes li[data-publie] .tb-rapport-btn { display: none; }
.tb-action.est-survol { background: var(--tb-jaune-pale); box-shadow: 0 0 0 8px var(--tb-jaune-pale); border-radius: 4px; border-top-color: transparent; }
.tb-encre .tb-action { transition: opacity .5s ease, transform .5s ease, background-color .3s ease, box-shadow .3s ease; }
.tb-curseur { position: absolute; z-index: 6; top: 0; left: 0; width: 20px; height: 20px; opacity: 0; transform: translate(-60px, -60px); transition: transform .95s cubic-bezier(.5, .05, .25, 1), opacity .35s ease; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.tb-curseur svg { display: block; width: 20px; height: 20px; transform-origin: 20% 12%; transition: transform .12s ease; }
.tb-curseur.est-visible { opacity: 1; }
.tb-curseur.saut { transition: none; }
.tb-curseur.clic svg { transform: scale(.8); }
.tb-curseur::after { content: ""; position: absolute; left: -7px; top: -8px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0a0a0a; opacity: 0; }
.tb-curseur.clic::after { animation: tbOnde .5s ease-out; }
@keyframes tbOnde { 0% { transform: scale(.3); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .tb-rapport, .tb-curseur { display: none; } }

/* ---- Portraits (page À propos) ----
   En couleur (Claire préfère, 18/09) : médaillon rond sur fond blanc comme
   les détourages, la photo en situation de David recadrée plus serré. */
.equipe-medaillon { display: block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; margin-bottom: 18px; background: #fff; border: 1px solid var(--ligne-fort); }
.equipe-medaillon .equipe-photo { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }
.equipe-medaillon--serre .equipe-photo { transform: scale(1.3); transform-origin: 41% 54%; }

/* ==========================================================================
   18/09/2026, suite · Pistes 5 à 8 retenues par Claire : rétroplanning animé
   et flèches de la carte des données (pages secteurs), anneau « qui détient
   les 32 » (page règlement), vidéos allégées (poster + chargement différé).
   ========================================================================== */

/* ---- Deux anneaux côte à côte (page règlement) ---- */
.anneaux { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .anneaux { grid-template-columns: 1fr; } }
.anneaux .anneau { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); align-content: start; }
@media (max-width: 640px) { .anneaux .anneau { grid-template-columns: 1fr; } }
.anneaux .anneau-figure { width: min(200px, 100%); }
.anneaux .anneau-centre b { font-size: 34px; }
.anneaux .anneau-centre span { font-size: 10px; margin-top: 4px; }
.anneau-centre { align-content: center; }
.anneau-titre { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); margin: 0; }
.anneau-figure .part--vous { stroke: #0a0a0a; }
.anneau-figure .part--four { stroke: #ffe070; transition-delay: .3s; }
.anneau-figure .part--deux { stroke: #c9c6bc; transition-delay: .5s; }
.anneau-legende .pv { background: #0a0a0a; } .anneau-legende .pf { background: #ffe070; } .anneau-legende .pd { background: #c9c6bc; }
.anneau-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; }
.anneau-note a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Flèches de la carte des données : fournisseur → vous → lecteurs ---- */
.carte-donnees > div { position: relative; }
.carte-donnees-fleche { position: absolute; top: 50%; right: -22px; width: 44px; height: 44px; margin-top: -22px; z-index: 2; }
.carte-donnees-fleche circle { fill: #000; stroke: var(--ligne-fort); stroke-width: 1; }
.carte-donnees-fleche path { fill: none; stroke: var(--jaune); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .7s cubic-bezier(.16, 1, .3, 1) .9s; }
.carte-donnees > div:nth-child(2) .carte-donnees-fleche path { transition-delay: 1.25s; }
.carte-donnees.est-visible .carte-donnees-fleche path { stroke-dashoffset: 0; }
@media (max-width: 760px) {
  .carte-donnees-fleche { top: auto; right: auto; bottom: -22px; left: 50%; margin: 0 0 0 -22px; transform: rotate(90deg); }
}

/* ---- Rétroplanning (pages secteurs) : l'axe se trace, le fait accompli se
   remplit jusqu'à aujourd'hui, les jalons arrivent l'un après l'autre. La
   position d'aujourd'hui (--x, --fait) est calculée par js/seqo.js. ---- */
.retro { position: relative; padding-top: 48px; }
.retro-axe { position: absolute; left: 0; right: 0; top: 0; height: 48px; }
.retro-trace { position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: rgba(10, 10, 10, .14); transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.retro-fait { position: absolute; left: 0; top: 22px; height: 4px; width: 0; background: var(--encre); border-radius: 2px; transition: width 1.2s cubic-bezier(.16, 1, .3, 1) .6s; }
.retro-aujourdhui { position: absolute; top: -8px; left: calc(var(--x, 0px) - 10px); white-space: nowrap; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fond); background: var(--encre); padding: 5px 10px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .5s ease 1.7s, transform .5s ease 1.7s; }
.retro-aujourdhui b { font-weight: 500; color: inherit; }
.retro-aujourdhui::after { content: ""; position: absolute; left: 10px; bottom: -7px; width: 2px; height: 8px; background: var(--encre); }
.retro-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: .45fr repeat(4, 1fr); gap: 22px; }
.retro-etapes li { position: relative; padding-top: 20px; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.retro-etapes li:first-child { grid-column: 2; }
.retro-etapes li::before { content: ""; position: absolute; left: 0; top: -32px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--fond); border: 2px solid var(--encre); transform: scale(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.retro-etapes li:last-child::before { background: var(--jaune-hover); }
.retro-etapes li[data-passe]::before { background: var(--encre); }
.retro-etapes li[data-passe] .retro-date, .retro-etapes li[data-passe] b { color: var(--encre-2); }
.retro-date { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 8px; }
.retro-etapes li:last-child .retro-date { color: var(--encre); }
.retro-etapes b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 6px; color: var(--encre); }
.retro-etapes p { color: var(--encre-2); font-size: 14.5px; line-height: 1.5; margin: 0; }
.retro.est-visible .retro-trace { transform: none; }
.retro.est-visible .retro-fait { width: var(--fait, 0px); }
.retro.est-visible .retro-aujourdhui { opacity: 1; transform: none; }
.retro.est-visible li, .retro.est-visible li::before { opacity: 1; transform: none; }
.retro.est-visible li:nth-child(1), .retro.est-visible li:nth-child(1)::before { transition-delay: .5s; }
.retro.est-visible li:nth-child(2), .retro.est-visible li:nth-child(2)::before { transition-delay: .7s; }
.retro.est-visible li:nth-child(3), .retro.est-visible li:nth-child(3)::before { transition-delay: .9s; }
.retro.est-visible li:nth-child(4), .retro.est-visible li:nth-child(4)::before { transition-delay: 1.1s; }
@media (max-width: 720px) {
  .retro { padding: 0 0 0 32px; }
  .retro-axe { right: auto; bottom: 0; width: 32px; height: auto; }
  .retro-trace { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; transform: scaleY(0); transform-origin: center top; }
  .retro-fait { top: 0; left: 5px; width: 4px; height: 0; transition: height 1.2s cubic-bezier(.16, 1, .3, 1) .6s; }
  .retro.est-visible .retro-fait { width: 4px; height: var(--fait, 0px); }
  .retro-aujourdhui { top: var(--x, 0px); left: 20px; transform: translate(0, -50%); }
  .retro.est-visible .retro-aujourdhui { transform: translate(0, -50%); }
  .retro-aujourdhui::after { left: -10px; bottom: auto; top: 50%; width: 10px; height: 2px; margin-top: -1px; }
  .retro-etapes { display: block; padding-top: 44px; }
  .retro-etapes li { padding: 0 0 26px; }
  .retro-etapes li::before { left: -32px; top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .retro-trace, .retro-fait, .retro-aujourdhui, .retro-etapes li, .retro-etapes li::before, .carte-donnees-fleche path { transition: none; }
  .retro-trace { transform: none; }
  .retro-fait { width: var(--fait, 0px); }
  .retro-aujourdhui, .retro-etapes li { opacity: 1; transform: none; }
  .retro-etapes li::before { transform: none; }
  .carte-donnees-fleche path { stroke-dashoffset: 0; }
}

/* Table à deux colonnes de la page règlement (famille, exemples) : la largeur
   fixe de la deuxième colonne, prévue pour la matrice à trois colonnes,
   écrasait les exemples. */
.matrice--familles th:nth-child(2), .matrice--familles td:nth-child(2) { width: auto; padding-right: 0; }
.matrice--familles .cat { width: 32%; padding-right: 28px; }