/* Loterie Américaine — feuille de style unique (design-system/loterie-americaine/MASTER.md).
   Mobile-first. Aucune autre feuille ni <style> sur les pages. Aucune police CDN
   (voir fonts.css), aucun script tiers. Intention : la « salle de contrôle » du
   programme — on sait en 3 secondes si c'est ouvert, quand, et quoi faire. */

:root {
  --color-bg: #F5F4EF;
  --color-surface: #FFFFFF;
  --color-ink: #15161A;
  --color-muted: #4B5563;
  --color-border: #E5E2D8;
  --color-primary: #4F46E5;        /* indigo signal */
  --color-primary-hover: #3F37C9;
  --color-primary-soft: #EEEDFB;
  --color-accent: #F5B700;         /* ambre « alerte » : une seule audace par écran */
  --color-ok: #12805C;
  --color-ok-soft: #E3F5EC;
  --color-warn: #B26B00;
  --color-warn-soft: #FFF3D6;
  --color-danger: #B42318;
  --color-danger-soft: #FEE9E7;
  --color-ink-deep: #14142B;       /* hero sombre indigo-noir, jamais bleu marine officiel */
  --color-focus: #4F46E5;
  --font-title: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-text: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', 'Menlo', monospace;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px;
  --r-card: 12px; --r-field: 8px;
  --shadow: 0 1px 2px rgba(21, 22, 26, .06);
  --shell: 1120px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-text); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte sur tout display (compteur, « vous êtes ici », résultats) */
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin: 0 0 var(--s-2); }
h1 { font-size: 34px; }
h2 { font-size: 27px; margin-top: var(--s-6); }
h3 { font-size: 21px; margin-top: var(--s-4); }
h2:first-child, h3:first-child { margin-top: 0; }
p, ul, ol { margin: 0 0 var(--s-2); }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 4px; }
small, .small { font-size: 14px; }
strong { font-weight: 600; }
.num, table { font-variant-numeric: tabular-nums; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { font-family: var(--font-title); font-weight: 700; font-size: 15px; background: var(--color-primary-soft); }
td.num, th.num { text-align: right; }
.table-wrap { overflow-x: auto; margin: var(--s-3) 0; border: 1px solid var(--color-border); border-radius: var(--r-card); background: var(--color-surface); }
.table-wrap table { margin: 0; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--s-5) 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--color-ink); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-family: var(--font-title); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--s-1); }
.lead { font-size: 20px; color: var(--color-muted); max-width: 68ch; }
.prose { max-width: 68ch; min-width: 0; }
.prose, .card, .tool, .keyfacts, .answer, .statut-inline, .warn-card, .danger-card, .source-card { overflow-wrap: break-word; }
.prose > h2 { scroll-margin-top: 90px; }
.muted { color: var(--color-muted); }
.mt-0 { margin-top: 0; }

/* ---------- Layout ---------- */
.shell { width: min(100% - 2 * var(--s-2), var(--shell)); margin-inline: auto; }
.page-pad { padding-block: var(--s-4) var(--s-8); }
.grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.two-col { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.two-col > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.sticky-aside { position: sticky; top: 80px; }
.sticky-aside > * + * { margin-top: var(--s-2); }

/* ---------- Bandeau d'indépendance ---------- */
.legal-banner { background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-size: 14px; color: var(--color-muted); padding: 8px 0; text-align: center; margin: 0; }
.legal-banner a { color: inherit; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 244, 239, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 18px -12px rgba(21, 22, 26, .35); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-ink); font-family: var(--font-title); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand svg { flex: none; }
.brand-text em { font-style: normal; color: var(--color-primary); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--r-field); cursor: pointer; color: var(--color-ink); }
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav li + li { margin-top: 0; }
.site-nav a { display: block; padding: 10px 12px; border-radius: var(--r-field); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 64px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--s-2); box-shadow: 0 8px 24px rgba(21, 22, 26, .08); max-height: calc(100vh - 64px); overflow-y: auto; }
.site-nav .nav-cta { margin-top: var(--s-1); }
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex !important; position: static; align-items: center; gap: var(--s-1); background: none; border: 0; padding: 0; box-shadow: none; }
  .site-nav ul { flex-direction: row; gap: 0; }
  .site-nav a { padding: 8px 10px; font-size: 15px; }
  .site-nav .nav-cta { margin: 0 0 0 var(--s-1); }
}

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-field); font-family: var(--font-title); font-weight: 700; font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px -12px rgba(79, 70, 229, .8); }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-1px); }
.btn--accent { background: var(--color-accent); color: var(--color-ink); }
.btn--accent:hover { background: #E0A800; color: var(--color-ink); transform: translateY(-1px); }
.btn--ghost { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.btn--sm { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-3); }

/* ---------- Pastilles de statut (sémantique) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-weight: 700; font-size: 13px; letter-spacing: .02em; border-radius: 999px; padding: 4px 10px; background: var(--color-primary-soft); color: var(--color-primary-hover); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: none; }
.pill--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.pill--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.pill--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.pill--muted { background: #ECEBE4; color: var(--color-muted); }
.pill--official { background: var(--color-ok-soft); color: var(--color-ok); }
.pill--estimate { background: var(--color-warn-soft); color: var(--color-warn); }
.pill--estimate::before { background: transparent; border: 2px dashed currentColor; width: 6px; height: 6px; }

/* ---------- Hero sombre + tableau d'affichage ---------- */
.hero-dark { background: var(--color-ink-deep); color: #fff; padding: var(--s-6) 0 var(--s-6); position: relative; overflow: hidden; }
.hero-dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 10%, rgba(79, 70, 229, .35), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(245, 183, 0, .12), transparent 70%); pointer-events: none; }
.hero-dark .shell { position: relative; }
.hero-dark .eyebrow { color: var(--color-accent); }
.hero-dark h1 { color: #fff; font-size: clamp(32px, 5.5vw, 54px); letter-spacing: -0.025em; max-width: 18ch; }
.hero-dark .lead { color: #C7C9DE; }
.hero-dark .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero-dark .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; color: #fff; }
.hero-dark .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 1.1s ease 1.6s 1; }
.hero-dark .btn--primary { position: relative; overflow: hidden; }
@keyframes sheen { to { transform: translateX(120%); } }
.hero-note { margin-top: var(--s-2); font-size: 14px; color: #9EA1BD; }
.hero-note a { color: #fff; }
.mark { background: linear-gradient(transparent 62%, rgba(245, 183, 0, .55) 62%); padding: 0 .08em; }
.hero-dark .mark { background-size: 0 100%; background-repeat: no-repeat; animation: mark-draw .7s cubic-bezier(.2, .7, .2, 1) .9s forwards; }
@keyframes mark-draw { to { background-size: 100% 100%; } }
@media (min-width: 900px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-6); align-items: center; }
}

/* Tableau d'affichage façon panneau d'aéroport (statut lu depuis statut.json) */
.board { margin-top: var(--s-4); background: #0C0C1D; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: var(--s-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
@media (min-width: 900px) { .board { margin-top: 0; } }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-title); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9EA1BD; padding: 4px 6px 12px; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.board__head .pill { font-size: 11px; padding: 3px 8px; }
.board__row { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px 6px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.board__row:last-child { border-bottom: 0; }
.board__label { font-family: var(--font-title); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9EA1BD; }
.board__value { font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em; color: #fff; display: flex; flex-wrap: wrap; gap: 3px; min-height: 26px; }
.board__value--accent { color: var(--color-accent); }
.board__value--ok { color: #6EE7B7; }
.board__value--warn { color: #FCD34D; }
.board__value--danger { color: #FCA5A5; }
.cell { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 24px; padding: 0 2px; background: linear-gradient(#1D1D38, #131327); border-radius: 3px; border-top: 1px solid rgba(255, 255, 255, .08); position: relative; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .5); }
.cell--space { background: transparent; border: 0; min-width: 8px; }
.cell--space::after { display: none; }
.cell.is-flipping { animation: flip .09s linear infinite; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-60deg); } 100% { transform: rotateX(0); } }
.board__foot { padding: 12px 6px 2px; font-size: 13px; color: #9EA1BD; }
.board__foot a { color: #fff; }
.board__loading { color: #9EA1BD; font-family: var(--font-mono); font-size: 14px; }

/* Compteur (jours avant la prochaine date officielle) */
.countdown { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 12px 16px; margin-top: var(--s-3); }
.countdown__num { font-family: var(--font-title); font-weight: 700; font-size: 44px; line-height: 1; color: var(--color-accent); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.countdown__txt { font-size: 15px; color: #C7C9DE; }
.countdown__txt strong { color: #fff; display: block; font-family: var(--font-title); }

/* ---------- Rail de cycle DV ---------- */
.rail-section { padding: var(--s-4) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.rail { list-style: none; margin: var(--s-3) 0 0; padding: 12px 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; overflow-x: auto; position: relative; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; background: var(--color-border); }
.rail__step { position: relative; padding: 32px 14px 0 0; scroll-snap-align: start; }
.rail__step::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 999px; background: var(--color-surface); border: 3px solid var(--color-border); z-index: 1; transition: border-color .3s ease, background-color .3s ease; }
.rail__step.is-done::before { border-color: var(--color-primary); background: var(--color-primary); }
.rail__step.is-done::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--color-primary); }
.rail__step.is-current::before { border-color: var(--color-accent); background: var(--color-accent); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 183, 0, .55); } 100% { box-shadow: 0 0 0 14px rgba(245, 183, 0, 0); } }
.rail__name { display: block; font-family: var(--font-title); font-weight: 700; font-size: 15px; line-height: 1.2; }
.rail__date { display: inline-block; margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--color-ok); color: var(--color-ok); background: var(--color-ok-soft); }
.rail__date--estimate { border-style: dashed; border-color: var(--color-warn); color: var(--color-warn); background: var(--color-warn-soft); }
.rail__date--unknown { border-style: dashed; border-color: var(--color-border); color: var(--color-muted); background: transparent; }
.rail__now { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--color-warn); font-family: var(--font-title); text-transform: uppercase; letter-spacing: .06em; }
.rail-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--s-2); font-size: 14px; color: var(--color-muted); }

/* ---------- Grille pays (tuiles typographiques) ---------- */
.country-grid { display: grid; gap: var(--s-2); margin: var(--s-3) 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .country-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.country-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-2); text-decoration: none; color: var(--color-ink); position: relative; overflow: hidden; transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease, border-color .18s ease; }
.country-tile:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 14px 28px -16px rgba(21, 22, 26, .3); color: var(--color-ink); }
.country-tile__region { position: relative; z-index: 1; font-family: var(--font-title); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); background: var(--color-bg); border-radius: 6px; padding: 3px 7px; align-self: flex-start; }
.country-tile__name { font-family: var(--font-title); font-weight: 700; font-size: clamp(19px, 2vw, 23px); line-height: 1.08; letter-spacing: -0.02em; margin: 10px 0; overflow-wrap: normal; word-break: keep-all; hyphens: manual; position: relative; z-index: 1; }
.country-tile .pill { align-self: flex-start; font-size: 11px; white-space: normal; max-width: 100%; position: relative; z-index: 1; }
.country-tile__code { position: absolute; right: 10px; bottom: 10px; top: auto; font-family: var(--font-mono); font-size: 34px; font-weight: 700; color: var(--color-primary-soft); opacity: .7; line-height: 1; pointer-events: none; z-index: 0; }

/* ---------- Cartes / bento ---------- */
.cards { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-3); color: var(--color-ink); text-decoration: none; box-shadow: var(--shadow); position: relative; transition: border-color .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s ease; }
a.card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(21, 22, 26, .28); color: var(--color-ink); }
a.card::after { content: "→"; position: absolute; right: var(--s-3); bottom: var(--s-2); font-family: var(--font-title); font-weight: 700; color: var(--color-primary); opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .22s ease; }
a.card:hover::after { opacity: 1; transform: none; }
.card h3 { margin-top: 0; font-size: 19px; }
.card p { margin-bottom: 0; color: var(--color-muted); font-size: 16px; }
.card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-2); transition: background-color .18s ease, color .18s ease, transform .22s cubic-bezier(.2, 1.3, .3, 1); }
a.card:hover .card-icon { background: var(--color-primary); color: #fff; transform: rotate(-6deg) scale(1.06); }
.card-meta { margin-top: var(--s-2); font-size: 14px; color: var(--color-muted); }
.bento { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento .card--wide { grid-column: span 2; } }
.card--wide { border: 1px solid transparent; background: linear-gradient(var(--color-primary-soft), var(--color-primary-soft)) padding-box, linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary) 55%, var(--color-accent) 100%) border-box; }
.card--wide h3 { font-size: 22px; }
a.card--wide:hover { border-color: transparent; }

/* ---------- Trust band ---------- */
.trust-band { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-bottom: 1px solid var(--color-border); }
.trust-band > div { display: flex; gap: 12px; align-items: flex-start; }
.trust-band svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); }
.trust-band p { margin: 0; font-size: 15px; color: var(--color-muted); }
.trust-band strong { display: block; color: var(--color-ink); font-family: var(--font-title); }
@media (min-width: 640px) { .trust-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Answer-first : réponse, fraîcheur, source, officiel/estimé ---------- */
.answer { background: var(--color-primary-soft); border-left: 4px solid var(--color-primary); border-radius: 0 var(--r-card) var(--r-card) 0; padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.answer .eyebrow { margin-bottom: 4px; }
.answer p { margin: 0; font-size: 18px; }
.answer p + p { margin-top: var(--s-1); }
.keyfacts { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.keyfacts h2, .keyfacts h3 { margin-top: 0; font-size: 17px; }
.keyfacts ul { margin: 0; padding-left: 1.2em; }
.source-card { display: flex; gap: 12px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-2); margin: var(--s-2) 0; font-size: 15px; }
.source-card svg { flex: none; color: var(--color-primary); margin-top: 2px; width: 20px; height: 20px; }
.source-card strong { font-family: var(--font-title); display: block; }
.source-card a { word-break: break-word; }
.source-card .fresh { margin-top: 6px; }
.warn-card { background: var(--color-warn-soft); border: 1px solid #F3D9A4; border-radius: var(--r-card); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; color: #5C3A00; }
.warn-card strong { color: var(--color-warn); font-family: var(--font-title); }
.warn-card p:last-child, .warn-card ul:last-child { margin-bottom: 0; }
.danger-card { background: var(--color-danger-soft); border: 1px solid #F4B3AE; border-radius: var(--r-card); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; color: #6B1611; }
.danger-card strong { color: var(--color-danger); font-family: var(--font-title); }
.danger-card p:last-child { margin-bottom: 0; }
.fresh { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; font-family: var(--font-title); color: var(--color-ok); background: var(--color-ok-soft); border-radius: 999px; padding: 4px 10px; }
.fresh svg { flex: none; }
.fresh--warn { color: var(--color-warn); background: var(--color-warn-soft); }
.unverified { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; font-family: var(--font-title); color: var(--color-warn); background: var(--color-warn-soft); border: 1px dashed var(--color-warn); border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.page-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 14px; color: var(--color-muted); margin: var(--s-1) 0 var(--s-3); }
.facts-split { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
@media (min-width: 640px) { .facts-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts-split > div { border-radius: var(--r-card); padding: var(--s-2) var(--s-3); border: 1px solid var(--color-border); background: var(--color-surface); }
.facts-split__official { border-top: 4px solid var(--color-ok); }
.facts-split__estimate { border-top: 4px dashed var(--color-warn); }
.facts-split h3 { margin-top: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.facts-split ul { margin: 0; padding-left: 1.2em; font-size: 16px; }

/* Bloc statut inline (pages guide) */
.statut-inline { display: grid; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 0 var(--r-card) var(--r-card) 0; padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.statut-inline__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-title); font-weight: 700; }
.statut-inline p { margin: 0; }
.statut-inline .small { color: var(--color-muted); }

/* ---------- Affiliation ---------- */
.affiliate { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--r-card); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.affiliate .tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-family: var(--font-title); }
.affiliate h3 { margin-top: 4px; font-size: 18px; }
.affiliate p:last-child { margin-bottom: 0; }
.affiliate__soon { display: inline-block; font-size: 13px; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: 6px; padding: 2px 8px; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--color-border); padding: 14px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--color-border); }
.faq summary { cursor: pointer; font-family: var(--font-title); font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-primary); font-weight: 700; display: inline-block; transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { margin: 10px 0 0; color: var(--color-muted); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 14px; color: var(--color-muted); margin: var(--s-2) 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs a { color: inherit; }

/* ---------- Formulaires & outils ---------- */
.tool { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-3); margin: var(--s-3) 0; box-shadow: var(--shadow); }
.field { margin-bottom: var(--s-2); }
.field label, .field legend { display: block; font-family: var(--font-title); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.field .help { display: block; font-size: 14px; color: var(--color-muted); margin-top: 4px; }
.field input[type="text"], .field input[type="email"], .field input[type="date"], .field input[type="number"], .field select { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--color-ink); background: var(--color-surface); border: 1px solid #C9C7BC; border-radius: var(--r-field); }
.field input:focus, .field select:focus { border-color: var(--color-primary); outline: 2px solid var(--color-focus); outline-offset: 1px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--r-field); background: var(--color-surface); cursor: pointer; min-height: 44px; }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.choice input { margin-top: 4px; accent-color: var(--color-primary); width: 18px; height: 18px; flex: none; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s-2); min-width: 0; }
.result { border-radius: var(--r-card); padding: var(--s-2) var(--s-3); margin-top: var(--s-3); border: 1px solid var(--color-border); background: var(--color-surface); }
.result[hidden] { display: none; }
.result:not([hidden]) { animation: result-in .38s cubic-bezier(.2, .9, .3, 1); }
@keyframes result-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.result h3 { margin-top: 0; }
.result--ok { border-color: #A6E3C0; background: var(--color-ok-soft); }
.result--check { border-color: #F3D9A4; background: var(--color-warn-soft); }
.result--no { border-color: #F4B3AE; background: var(--color-danger-soft); }
.result--unknown { background: var(--color-primary-soft); }
.result p:last-child { margin-bottom: 0; }
.progress { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin: var(--s-2) 0; }
.progress > span { display: block; height: 100%; background: var(--color-primary); width: 0; transition: width .25s ease; }
.error { color: var(--color-danger); font-size: 14px; margin-top: 6px; }

/* Vérificateur photo */
.dropzone { border: 2px dashed var(--color-border); border-radius: var(--r-card); padding: var(--s-4) var(--s-3); text-align: center; background: var(--color-bg); transition: border-color .18s ease, background-color .18s ease; }
.dropzone.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone input[type="file"] { display: block; margin: var(--s-2) auto 0; max-width: 100%; }
.photo-preview { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
@media (min-width: 640px) { .photo-preview { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.photo-preview__img { width: 220px; max-width: 100%; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--r-card); background: repeating-conic-gradient(#ECEBE4 0 25%, #fff 0 50%) 0 0 / 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-preview__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--color-border); }
.checks li:last-child { border-bottom: 1px solid var(--color-border); }
.checks .ico { flex: none; width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 13px; }
.checks .ico--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.checks .ico--no { background: var(--color-danger-soft); color: var(--color-danger); }
.checks .ico--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.checks .ico--info { background: var(--color-primary-soft); color: var(--color-primary); }

/* Explorateur de chances */
.stat-tiles { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s-2) 0; }
@media (min-width: 640px) { .stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-2); }
.stat-tile .lbl { display: block; font-family: var(--font-title); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.stat-tile .big { display: block; font-family: var(--font-title); font-weight: 700; font-size: clamp(16px, 2.1vw, 26px); white-space: nowrap; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bar-list { list-style: none; margin: var(--s-2) 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; margin: 0; }
.bar-list .bar { height: 12px; background: var(--color-primary-soft); border-radius: 999px; overflow: hidden; }
.bar-list .bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; width: 0; transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.bar-list .val { font-variant-numeric: tabular-nums; font-family: var(--font-title); font-weight: 700; font-size: 14px; }

/* Calendrier */
.timeline { list-style: none; margin: var(--s-3) 0; padding: 0; border-left: 3px solid var(--color-border); }
.timeline li { position: relative; padding: 0 0 var(--s-3) var(--s-3); margin: 0; }
.timeline li::before { content: ""; position: absolute; left: -10px; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--color-surface); border: 3px solid var(--color-border); }
.timeline li.is-official::before { border-color: var(--color-ok); background: var(--color-ok); }
.timeline li.is-estimate::before { border: 3px dashed var(--color-warn); }
.timeline li.is-current::before { border-color: var(--color-accent); background: var(--color-accent); animation: pulse 1.8s ease-out infinite; }
.timeline .when { font-family: var(--font-title); font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline .what { display: block; }
.timeline .note { display: block; font-size: 14px; color: var(--color-muted); }

/* ---------- Newsletter / alerte ---------- */
.newsletter { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-card); padding: var(--s-4); margin: var(--s-6) 0; position: relative; overflow: hidden; }
.newsletter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--color-accent); }
.newsletter h2 { margin-top: 0; }
.newsletter__form { display: grid; gap: 10px; margin-top: var(--s-2); }
@media (min-width: 640px) { .newsletter__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.newsletter__consent { grid-column: 1 / -1; font-size: 14px; color: var(--color-muted); display: flex; gap: 8px; align-items: flex-start; }
.newsletter__consent input { margin-top: 4px; }
.newsletter__msg { grid-column: 1 / -1; margin: 0; color: var(--color-primary-hover); }

/* ---------- Actualités ---------- */
.news-list { list-style: none; margin: var(--s-3) 0; padding: 0; }
.news-list li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--color-border); margin: 0; }
.news-list li:last-child { border-bottom: 1px solid var(--color-border); }
.news-list time { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.news-list h3 { margin: 0; font-size: 18px; }
.news-list p { margin: 0; color: var(--color-muted); font-size: 15px; }
.empty-state { border: 1px dashed var(--color-border); border-radius: var(--r-card); padding: var(--s-3); color: var(--color-muted); text-align: center; }

/* ---------- Auteur ---------- */
.author { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--color-muted); margin: var(--s-4) 0; padding-top: var(--s-2); border-top: 1px solid var(--color-border); }
.author strong { color: var(--color-ink); font-family: var(--font-title); }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s-8); background: var(--color-ink-deep); color: #C7C9DE; padding: var(--s-5) 0 var(--s-4); font-size: 15px; }
.site-footer .container { width: min(100% - 2 * var(--s-2), var(--shell)); margin-inline: auto; }
.site-footer__notice { max-width: 80ch; margin: 0 0 var(--s-3); }
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__legal li { margin: 0; }
.site-footer__legal a { color: #fff; }
.site-footer__brand { font-family: var(--font-title); font-weight: 700; color: #fff; margin-bottom: var(--s-2); }
.site-footer__cols { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__cols h3 { color: #fff; font-size: 15px; margin: 0 0 8px; }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.site-footer__cols li { margin: 0 0 4px; }
.site-footer__cols a { color: #C7C9DE; text-decoration: none; }
.site-footer__cols a:hover { color: #fff; text-decoration: underline; }

/* ---------- Reveal au scroll ---------- */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease var(--reveal-delay, 0s), transform .5s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0s); }
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
/* Tuiles pays : cascade « départs » en animation (pas de transition-delay, qui retarderait aussi le survol). */
.reveal-ready .country-grid > .country-tile { opacity: 0; }
.reveal-ready .country-grid.is-in > .country-tile { opacity: 1; animation: tile-in .5s cubic-bezier(.2, .9, .3, 1) calc(var(--i, 0) * .06s) backwards; }
.country-grid > .country-tile:nth-child(2) { --i: 1; }
.country-grid > .country-tile:nth-child(3) { --i: 2; }
.country-grid > .country-tile:nth-child(4) { --i: 3; }
.country-grid > .country-tile:nth-child(5) { --i: 4; }
.country-grid > .country-tile:nth-child(6) { --i: 5; }
.country-grid > .country-tile:nth-child(7) { --i: 6; }
.country-grid > .country-tile:nth-child(8) { --i: 7; }
.country-grid > .country-tile:nth-child(9) { --i: 8; }
.country-grid > .country-tile:nth-child(10) { --i: 9; }
@keyframes tile-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.reveal-ready .trust-band > div { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.reveal-ready .trust-band.is-in > div { opacity: 1; transform: none; }
.reveal-ready .trust-band.is-in > div:nth-child(2) { transition-delay: .08s; }
.reveal-ready .trust-band.is-in > div:nth-child(3) { transition-delay: .16s; }

/* ---------- Consentement (CNIL) ---------- */
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--s-2) var(--s-3); box-shadow: 0 12px 32px rgba(21, 22, 26, .14); display: grid; gap: 12px; max-width: 640px; margin-inline: auto; }
.consent-banner[hidden] { display: none; }
.consent-texte { margin: 0; font-size: 15px; }
.consent-actions { display: flex; gap: 10px; }
.consent-btn { flex: 1; min-height: 44px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); font: inherit; font-weight: 700; cursor: pointer; color: var(--color-ink); }
.consent-btn[data-consent-accept] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Wow 2 (CEO 09/09, ui-ux-pro-max) ----------
   Règles appliquées : une audace par écran (l'ambre), motion signifiante, hover
   150-300 ms, cascades ≤ 60 ms/élément, animations infinies réservées aux
   indicateurs d'état (LED, position courante), état final sous
   prefers-reduced-motion, cibles ≥ 44 px, aucun emoji-icône. Tout est
   progressif : sans JS, aucun de ces effets ne cache quoi que ce soit. */

/* 1. Tableau d'affichage : afficheur à palettes (split-flap), LED d'état, saisie du « vérifié le ». */
.board { perspective: 700px; }
.board[aria-busy="true"] .board__row { opacity: .55; transition: opacity .3s ease; }
.cell { transform-style: preserve-3d; transform-origin: 50% 50%; backface-visibility: hidden; }
.cell.is-set { animation: flap-set .3s cubic-bezier(.2, 1.2, .3, 1) 1; }
@keyframes flap-set { 0% { transform: rotateX(-75deg); filter: brightness(1.7); } 60% { transform: rotateX(9deg); } 100% { transform: none; filter: none; } }
.board__value--type .cell { opacity: 0; animation: type-in .02s steps(1) forwards; animation-delay: calc(var(--i, 0) * 55ms + 700ms); }
@keyframes type-in { to { opacity: 1; } }
.board__value--type::after { content: ""; width: 8px; height: 20px; margin-left: 2px; background: #C7C9DE; align-self: center; animation: caret 1s steps(2, start) infinite; }
.board__value--type.is-typed::after { display: none; }
@keyframes caret { to { visibility: hidden; } }
.board__led { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 8px; vertical-align: -1px; background: #6B6E8C; --led-rgb: 107, 110, 140; }
.board__led--ok { background: #34D399; --led-rgb: 52, 211, 153; }
.board__led--warn { background: var(--color-accent); --led-rgb: 245, 183, 0; }
.board__led--danger { background: #F87171; --led-rgb: 248, 113, 113; }
.board__led--ok, .board__led--warn, .board__led--danger { animation: led 2.2s ease-out infinite; }
@keyframes led { 0% { box-shadow: 0 0 0 0 rgba(var(--led-rgb), .6); } 100% { box-shadow: 0 0 0 9px rgba(var(--led-rgb), 0); } }
.board.is-stale .board__led { background: #6B6E8C; animation: none; }
.board__stale { display: block; margin-top: 6px; color: #FCD34D; }

/* 2. Compteur : anneau de progression (plein = la date est là ; échelle d'un an). Le chiffre et le libellé restent le contenu accessible. */
.countdown__dial { position: relative; width: 92px; height: 92px; display: grid; place-items: center; flex: none; }
.countdown__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.ring__fill { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1) .5s; }
.countdown__dial .countdown__num { position: relative; font-size: 32px; min-width: 0; }

/* 3. Rail de cycle : le trait se dessine, chaque jalon s'allume, la position courante pulse ensuite ; les estimations ont un pointillé qui marche 6 s. */
.rail__step::before { transition: border-color .3s ease calc(var(--i, 0) * .16s + .3s), background-color .3s ease calc(var(--i, 0) * .16s + .3s); }
.rail__step.is-done::after { transform-origin: left; transition: transform .45s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 0) * .16s); }
.rail:not(.is-drawn) .rail__step.is-done::before, .rail:not(.is-drawn) .rail__step.is-current::before { border-color: var(--color-border); background: var(--color-surface); }
.rail:not(.is-drawn) .rail__step.is-done::after { transform: scaleX(0); }
.rail:not(.is-drawn) .rail__step.is-current::before { animation: none; }
.rail__step.is-current::before { animation-delay: calc(var(--i, 0) * .16s + .6s); }
.rail__now { transition: opacity .3s ease calc(var(--i, 0) * .16s + .7s), transform .3s cubic-bezier(.2, 1.3, .3, 1) calc(var(--i, 0) * .16s + .7s); }
.rail:not(.is-drawn) .rail__now { opacity: 0; transform: translateY(4px); }
.rail__date--estimate { border-color: transparent; background-color: var(--color-warn-soft); background-image: repeating-linear-gradient(90deg, var(--color-warn) 0 5px, transparent 5px 9px), repeating-linear-gradient(90deg, var(--color-warn) 0 5px, transparent 5px 9px), repeating-linear-gradient(180deg, var(--color-warn) 0 5px, transparent 5px 9px), repeating-linear-gradient(180deg, var(--color-warn) 0 5px, transparent 5px 9px); background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: no-repeat; animation: ants 1.2s linear 5; }
@keyframes ants { to { background-position: 9px 0, -9px 100%, 0 -9px, 100% 9px; } }

/* 4. Tuiles pays : reveal « départs » (glissement + scale), soulèvement + reflet au pointeur, cartouche qui change de teinte, code qui s'avance. */
.country-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); transform: translateX(-130%); transition: transform .6s ease; pointer-events: none; }
.country-tile:hover::after, .country-tile:focus-visible::after { transform: translateX(130%); }
.country-tile:focus-visible { transform: translateY(-3px); border-color: var(--color-primary); }
.country-tile__region { transition: background-color .18s ease, color .18s ease; }
.country-tile:hover .country-tile__region, .country-tile:focus-visible .country-tile__region { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.country-tile__code { transition: color .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.country-tile:hover .country-tile__code, .country-tile:focus-visible .country-tile__code { color: #DCD9FF; transform: translate(-2px, 2px) scale(1.06); }
.reveal-ready [data-reveal] .bento > .card, .reveal-ready [data-reveal] .cards > .card { opacity: 0; }
.reveal-ready [data-reveal].is-in .bento > .card, .reveal-ready [data-reveal].is-in .cards > .card { opacity: 1; animation: tile-in .45s cubic-bezier(.2, .9, .3, 1) calc(var(--i, 0) * .06s + .1s) backwards; }
.bento > .card:nth-child(2), .cards > .card:nth-child(2) { --i: 1; }
.bento > .card:nth-child(3), .cards > .card:nth-child(3) { --i: 2; }
.bento > .card:nth-child(4), .cards > .card:nth-child(4) { --i: 3; }

/* 5. Explorateur de chances : barres qui se remplissent en cascade (le chiffre compte), ligne survolée surlignée, tuiles qui rentrent, changement d'année en fondu. */
.bar-list li { border-radius: 8px; padding: 6px 8px; margin: 0 -8px; transition: background-color .18s ease; }
.bar-list li:hover { background: var(--color-primary-soft); }
.bar-list li:hover .bar > span { background: var(--color-primary-hover); }
.bar-list .bar > span { transition: width .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .05s), background-color .18s ease; }
.bar-list { transition: opacity .18s ease; }
.bar-list.is-swapping, .stat-tiles.is-swapping { opacity: .35; }
.stat-tiles { transition: opacity .18s ease; }
.stat-tile { animation: stat-in .4s cubic-bezier(.2, .9, .3, 1) both; }
.stat-tile:nth-child(2) { animation-delay: .06s; }
.stat-tile:nth-child(3) { animation-delay: .12s; }
.stat-tile:nth-child(4) { animation-delay: .18s; }
@keyframes stat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 6. Vérificateur photo : la zone de dépôt respire tant qu'elle est vide, les contrôles se cochent en cascade, le verdict surgit avec son filet. */
.dropzone { animation: breathe 3.2s ease-in-out infinite; }
.dropzone.is-loaded, .dropzone.is-over, .dropzone:hover, .dropzone:focus-within { animation: none; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); border-color: var(--color-border); } 50% { box-shadow: 0 0 0 8px rgba(79, 70, 229, .08); border-color: #B9B5F2; } }
.checks li { animation: check-in .38s cubic-bezier(.2, .9, .3, 1) both; }
.checks .ico { animation: ico-pop .45s cubic-bezier(.2, 1.4, .3, 1) both; animation-delay: inherit; }
.checks li:nth-child(2), .checks li:nth-child(2) .ico { animation-delay: .09s; }
.checks li:nth-child(3), .checks li:nth-child(3) .ico { animation-delay: .18s; }
.checks li:nth-child(4), .checks li:nth-child(4) .ico { animation-delay: .27s; }
.checks li:nth-child(5), .checks li:nth-child(5) .ico { animation-delay: .36s; }
.checks li:nth-child(6), .checks li:nth-child(6) .ico { animation-delay: .45s; }
.checks li:nth-child(7), .checks li:nth-child(7) .ico { animation-delay: .54s; }
.checks li:nth-child(n+8), .checks li:nth-child(n+8) .ico { animation-delay: .6s; }
@keyframes check-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes ico-pop { from { transform: scale(.4); } to { transform: none; } }
.result { position: relative; overflow: hidden; }
.result::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; }
.result:not([hidden])::before { animation: bar-draw .6s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
.result--ok::before { background: var(--color-ok); }
.result--check::before { background: var(--color-warn); }
.result--no::before { background: var(--color-danger); }
@keyframes bar-draw { to { transform: none; } }

/* 7. Calendrier : la timeline se trace de haut en bas, les jalons entrent l'un après l'autre ; le bouton d'export confirme par un état « prêt ». */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--color-primary); transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.timeline.is-drawn::before { transform: none; }
.timeline.is-drawing li { opacity: 0; transform: translateX(-8px); transition: opacity .4s ease calc(var(--i, 0) * .12s), transform .4s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * .12s); }
.timeline.is-drawing.is-drawn li { opacity: 1; transform: none; }
.btn.is-done, .btn.is-done:hover { background: var(--color-ok); border-color: var(--color-ok); color: #fff; transform: none; }
.btn.is-done svg { animation: ico-pop .45s cubic-bezier(.2, 1.4, .3, 1); }

/* 8. CTA « Recevoir l'alerte » : reflet unique au chargement (nav), cloche qui oscille au survol. */
.nav-cta { position: relative; overflow: hidden; }
.nav-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 1s ease 2.4s 1; pointer-events: none; }
.btn--accent svg { transform-origin: 50% 12%; }
.btn--accent:hover svg, .btn--accent:focus-visible svg { transform: none; animation: bell .7s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } }

/* 9. Header : ombre et filet qui s'effacent au scroll (site.js pose .is-scrolled). */
.site-header { transition: box-shadow .2s ease, border-color .2s ease; }
.site-header.is-scrolled { border-bottom-color: transparent; }

/* 10. FAQ : le « + » pivote (déjà), la réponse glisse. */
.faq summary { transition: color .18s ease; }
.faq summary:hover { color: var(--color-primary-hover); }
.faq details[open] > p { animation: faq-in .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal], .reveal-ready .country-grid > .country-tile, .reveal-ready .trust-band > div, .reveal-ready [data-reveal] .bento > .card, .reveal-ready [data-reveal] .cards > .card, .timeline.is-drawing li, .checks li, .checks .ico, .stat-tile, .board__value--type .cell, .rail__now { opacity: 1 !important; transform: none !important; }
  .hero-dark .mark { background-size: 100% 100% !important; }
  .cell.is-flipping { animation: none !important; }
  .board__value--type::after { display: none !important; }
  .rail .rail__step.is-done::before { border-color: var(--color-primary) !important; background: var(--color-primary) !important; }
  .rail .rail__step.is-current::before { border-color: var(--color-accent) !important; background: var(--color-accent) !important; }
  .rail .rail__step.is-done::after, .timeline::before, .result::before { transform: none !important; }
  .board__led--ok, .board__led--warn, .board__led--danger { box-shadow: 0 0 0 3px rgba(var(--led-rgb), .35); }
}
@media print {
  .site-header, .legal-banner, .newsletter, .btn, .nav-toggle, .consent-banner { display: none !important; }
  body { background: #fff; }
}

/* ---------- Page contact (CEO 11/09) : formulaire relié au point d'entrée commun anti-spam ---------- */
.contact-form { display: grid; gap: 16px; margin: 24px 0 32px; }
.cf-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cf-field { display: grid; gap: 6px; }
.cf-field label { font-weight: 600; font-size: 15px; }
.cf-opt { font-weight: 400; color: var(--color-muted); }
.cf-field input, .cf-field textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-ink); width: 100%; box-sizing: border-box; }
.cf-field input:focus-visible, .cf-field textarea:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.cf-field.is-invalid input, .cf-field.is-invalid textarea { border-color: var(--color-danger); }
.cf-error { color: var(--color-danger); font-size: 13px; margin: 0; }
.cf-help { margin: 0; font-size: 12px; color: var(--color-muted); text-align: right; }
.cf-hp { display: none; }
.cf-legal { font-size: 13px; color: var(--color-muted); margin: 0; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.cf-feedback { margin: 0; font-size: 15px; }
.cf-feedback.is-ok { color: var(--color-ok); font-weight: 600; }
.cf-feedback.is-err { color: var(--color-danger); font-weight: 600; }
.contact-form.is-sending [data-contact-submit] { opacity: .6; pointer-events: none; }