/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/country/country-section-nav.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.country-section-nav {
  position: sticky;
  top: var(--pres-top-header-height, 0px);
  z-index: 30;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.4rem 1rem;
  overflow-x: auto;
  background: rgb(27 58 92 / 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(201 168 78 / 0.35);
  box-shadow: 0 4px 16px rgb(27 58 92 / 0.22);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.country-section-nav::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .country-section-nav {
    position: static;
    top: auto;
    flex: 0 0 auto;
    padding-inline: 1.5rem;
  }
}

.country-section-nav__row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-inline: auto;
  padding: 0.2rem 0.3rem;
}

.country-section-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(244 239 226 / 0.85);
  border: 1px solid transparent;
  background: transparent;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.country-section-nav__link:hover,
.country-section-nav__link:focus-visible {
  color: #ffffff;
  background: rgb(201 168 78 / 0.18);
  border-color: rgb(201 168 78 / 0.45);
}

.country-section-nav__link:focus-visible {
  outline: 2px solid #c9a84e;
  outline-offset: 2px;
}

.country-section-nav__link[data-active="true"] {
  color: #1b3a5c;
  background: #c9a84e;
  border-color: #d7bc76;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(201 168 78 / 0.35);
}



/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/font/local/target.css?{"path":"src/components/presentation/presentation-fonts.ts","import":"","arguments":[{"src":"../../../../../../../../packages/presentation_journey_flutter/assets/fonts/Fraunces-Variable.latin.woff2","weight":"100 900","variable":"--font-pres-serif","display":"swap"}],"variableName":"presentationSerif"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'presentationSerif';
src: url(/_next/static/media/3a7349b35f3c8b20-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 100 900;
}@font-face {font-family: 'presentationSerif Fallback';src: local("Arial");ascent-override: 84.05%;descent-override: 21.91%;line-gap-override: 0.00%;size-adjust: 116.36%
}.__className_63c5c3 {font-family: 'presentationSerif', 'presentationSerif Fallback'
}.__variable_63c5c3 {--font-pres-serif: 'presentationSerif', 'presentationSerif Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/font/local/target.css?{"path":"src/components/presentation/presentation-fonts.ts","import":"","arguments":[{"src":"../../../../../../../../packages/presentation_journey_flutter/assets/fonts/HankenGrotesk-Variable.latin.woff2","weight":"100 900","variable":"--font-pres-sans","display":"swap","preload":false}],"variableName":"presentationSans"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: 'presentationSans';
src: url(/_next/static/media/77efc4acc5958315-s.woff2) format('woff2');
font-display: swap;
font-weight: 100 900;
}@font-face {font-family: 'presentationSans Fallback';src: local("Arial");ascent-override: 98.46%;descent-override: 29.83%;line-gap-override: 0.00%;size-adjust: 101.56%
}.__className_74568c {font-family: 'presentationSans', 'presentationSans Fallback'
}.__variable_74568c {--font-pres-sans: 'presentationSans', 'presentationSans Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/presentation/presentation-theme.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Gabarit "présentation par steps" — sa composition et ses animations viennent
 * d'Academy, mais sa palette suit désormais la charte corporate historique du
 * Site. La référence normative est `docs/theme-design-pattern/theme.png` :
 * crème/papier majoritaires, navy #1B3A5C pour le chrome et les affiches mises
 * en avant, or #C9A84E en accent. La profondeur vient des alpha et des ombres,
 * jamais d'ancres quasi noires.
 *
 * `.pres-tokens` : uniquement les variables (portable sur n'importe quel
 * élément, y compris hors de `.pres` — ex. le header partagé et son squelette
 * de chargement, qui ne sont pas des descendants de `.pres`).
 * `.pres` : `.pres-tokens` + le fond/la grille/le scroll de la scène
 * principale (rail + stage).
 */

.pres-tokens {
  /* Registre corporate canonique partagé avec `packages/shared/src/tokens/colors.ts`.
     Les deux rôles `*-text` sont les seules dérivations fonctionnelles : ils
     assombrissent navy/gold pour garantir AA sur tous les stops crème. */
  --pres-navy: #1b3a5c;
  --pres-navy-2: #1b3a5c;
  --pres-navy-rgb: 27 58 92;
  --pres-lit: #26486e;
  --pres-gold: #c9a84e;
  --pres-gold-rgb: 201 168 78;
  --pres-gold-soft: #d7bc76;
  --pres-gold-text: #80600f;
  --pres-cream: #f0ebe3;
  --pres-cream-warm: #ede7db;
  --pres-cream-warmer: #e8e1d4;
  --pres-cream-deep: #e3dbcd;
  --pres-paper: #ffffff;
  --pres-card-border: rgb(var(--pres-navy-rgb) / 0.12);
  --pres-card-shadow: 0 18px 44px rgb(var(--pres-navy-rgb) / 0.1);
  --pres-ink: #f8f6f0;
  --pres-muted: #b7c5d3;
  --pres-grey: #37486a;
  /* --pres-body — CORRIGÉ (2026-07-09, "tu as tout codé en dur ????") : le texte de corps
     (paragraphes) était en `#cdd9f0` codé en dur dans chacun des 10 écrans qui en ont besoin,
     jamais passé en variable comme --pres-ink/--pres-gold le sont déjà. Ce token comble le trou —
     c'est lui qui permet à .pres-reading (plus bas) de retourner le texte de corps sans devoir
     toucher chacun des 10 écrans un par un. */
  --pres-body: #dbe4ed;
  --pres-serif: var(--font-pres-serif), Georgia, "Times New Roman", serif;
  --pres-sans: var(--font-pres-sans), ui-sans-serif, system-ui, sans-serif;
}

.pres {
  position: relative;
  font-family: var(--pres-sans);
  --pres-ink: #1b3a5c;
  --pres-body: #33425c;
  --pres-muted: #526078;
  --pres-gold: var(--pres-gold-text);
  --pres-gold-soft: #76550a;
  color: var(--pres-ink);
  background:
    radial-gradient(900px 620px at 8% -12%, rgb(var(--pres-gold-rgb) / 0.16), transparent 58%),
    radial-gradient(820px 680px at 100% 100%, rgb(var(--pres-navy-rgb) / 0.08), transparent 62%),
    linear-gradient(145deg, var(--pres-paper) 0%, var(--pres-cream) 52%, var(--pres-cream-warm) 100%);
}

.pres-top-header {
  color: var(--pres-ink);
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0.055), transparent 44%),
    linear-gradient(180deg, rgb(var(--pres-navy-rgb) / 0.97), rgb(var(--pres-navy-rgb) / 0.92));
  box-shadow: 0 10px 30px rgb(var(--pres-navy-rgb) / 0.16);
}

/* ═══ Le bandeau à deux étages — porteur 23/09/2026 4 h 15 : « c'est excellent, je valide », puis
   « tu vas adopter le même principe ici ». Le dessin vit dans le composant partagé
   `SmatflowMasthead` (@smatflow/academy-nav-pill), le même que CivicWall. Ici, seulement les jetons
   du Site et la version compacte de ses contrôles : le pays, la langue, le compte, le don. Plus de
   capsule, plus de grille à trois colonnes : l'étage du haut porte ce qui ne bouge jamais, l'étage
   du bas ce qu'on parcourt. Spécification : apps/smatflow-vote/docs/polish/09. ═══ */
.smf-mh.pres-top-header {
  --smf-mh-sans: var(--pres-sans);
  --smf-mh-serif: var(--pres-serif);
  --smf-mh-navy-rgb: var(--pres-navy-rgb);
  --smf-mh-gold: #c9a84e;
  --smf-mh-gold-soft: #d7bc76;
  color: rgb(240 235 227);
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0.055), transparent 44%),
    linear-gradient(180deg, rgb(var(--pres-navy-rgb) / 0.97), rgb(var(--pres-navy-rgb) / 0.92));
}
.smf-mh .pres-country-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 3px;
  color: rgb(240 235 227);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.smf-mh .pres-country-switch:hover { color: #fff; }
.smf-mh .pres-country-switch:focus-visible { outline: 2px solid #c9a84e; outline-offset: 3px; }
.smf-mh .pres-country-switch__chevron { font-size: 9px; opacity: 0.7; }
.smf-mh .pres-locale-toggle {
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  color: rgb(240 235 227 / 0.78);
  font-size: 12.5px;
  font-weight: 500;
}
.smf-mh .pres-locale-toggle:hover { background: none; color: rgb(240 235 227); }
.smf-mh .pres-locale-toggle > span:first-child { font-size: 12.5px; letter-spacing: 0.02em; }
.smf-mh .pres-locale-toggle > span[aria-hidden="true"] { font-size: 9px; color: #d7bc76; }
.smf-mh .pres-account { width: 24px; height: 24px; }
.smf-mh .pres-account svg { width: 13px; height: 13px; }
.smf-mh .pres-account img,
.smf-mh .pres-account > span { width: 22px; height: 22px; font-size: 11px; border-width: 1px; }
/* Le don garde son anatomie Kiosk (Polish 15) — cœur rouge, texte, filet, pays en italique — dans
   le liseré d'or du bandeau : le seul élément entouré. */
.smf-mh .pres-nav-donation-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.smf-mh .pres-nav-donation-heart { width: auto; height: auto; background: none; box-shadow: none; font-size: 11px; }
.smf-mh .pres-nav-donation-text { font-weight: 500; }
.smf-mh .pres-nav-donation-sep { height: 11px; background: rgb(215 188 118 / 0.45); }
.smf-mh .pres-nav-donation-country { font-size: 12.5px; font-weight: 400; color: #e8d4a0; }
.smf-mh [data-tone="donation"]:hover .pres-nav-donation-heart { animation: pres-nav-donation-heartbeat 600ms ease; }
@media (prefers-reduced-motion: reduce) {
  .smf-mh [data-tone="donation"]:hover .pres-nav-donation-heart { animation: none; }
}
/* Le pays se reconnaît à son drapeau, sur la même ligne que son nom. */
.smf-mh .pres-nav-country { display: inline-flex; align-items: center; gap: 7px; }
/* Sur téléphone, le pays du don passe dans le titre du lien : le don et le contact tiennent avant
   le pli, sans glisser, jusqu'à 360 px. */
@container smf-mh (max-width: 760px) {
  .smf-mh .pres-nav-donation-sep,
  .smf-mh .pres-nav-donation-country { display: none; }
}

/* Rail — porté de .pres-rail (styles.js l.28-55) */
.pres-rail {
  position: relative;
  --pres-ink: #f8f6f0;
  --pres-body: #dbe4ed;
  --pres-muted: #b7c5d3;
  --pres-gold: #c9a84e;
  --pres-gold-soft: #d7bc76;
  border-right: 1px solid rgb(var(--pres-gold-rgb) / 0.24);
  background: linear-gradient(180deg, rgb(var(--pres-navy-rgb) / 0.96), rgb(var(--pres-navy-rgb) / 0.88));
  backdrop-filter: blur(6px);
}
/* CORRIGÉ (2026-07-10, capture porteur annotée : figer le titre du rail, ne faire défiler que la
   liste des étapes) — jusqu'ici `.pres-rail` défilait EN BLOC (titre + liste ensemble), le titre
   "Comprendre le projet · {Pays}" disparaissait donc en scrollant la liste. Même mécanisme que
   `.pres-app-shell`/`.pres-app-body` (header/contenu de page) appliqué ICI, à l'échelle du rail :
   `.pres-rail-head` (titre) devient un bloc de hauteur fixe, `.pres-rail-body` (liste des étapes)
   devient la SEULE zone qui défile. Uniquement à partir de `md` — sur mobile le rail fait déjà
   partie du flux normal de page, pas de rail séparé à figer. */
@media (min-width: 768px) {
  .pres-rail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pres-rail-head {
    flex: 0 0 auto;
  }
  .pres-rail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.pres-brand-mark {
  font-family: var(--pres-serif);
  font-weight: 600;
  background: linear-gradient(180deg, #fff, #f0d68a 52%, var(--pres-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pres-brand-sub {
  color: var(--pres-muted);
}

.pres-steps-line::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgb(var(--pres-gold-rgb) / 0.05),
    rgb(var(--pres-gold-rgb) / 0.5) 12%,
    rgb(var(--pres-gold-rgb) / 0.5) 88%,
    rgb(var(--pres-gold-rgb) / 0.05)
  );
}

.pres-step-dot {
  font-family: var(--pres-serif);
  font-weight: 600;
  color: var(--pres-gold-soft);
  background: radial-gradient(circle at 38% 32%, rgb(255 255 255 / 0.12), rgb(var(--pres-navy-rgb) / 0.74));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  box-shadow: 0 8px 20px rgb(var(--pres-navy-rgb) / 0.24);
  transition: 0.2s;
}

.pres-step[aria-current="true"] {
  background: rgb(var(--pres-gold-rgb) / 0.1);
}

.pres-step[aria-current="true"] .pres-step-dot {
  color: var(--pres-navy);
  background: linear-gradient(160deg, #fff2b4, var(--pres-gold) 58%, #9a7724);
  border-color: var(--pres-gold);
  box-shadow: 0 0 22px rgb(var(--pres-gold-rgb) / 0.5), inset 0 1px rgba(255, 255, 255, 0.6);
  transform: scale(1.06);
}

.pres-step[aria-current="true"] .pres-step-title {
  color: var(--pres-gold-soft);
}

/* Sous-libellé d'étape — RECADRÉ (2026-07-25, capture porteur « les écritures ici sont trop
   petits ») : 11.5px en `--pres-muted` (#b7c5d3) sur le navy du rail, c'était le texte le moins
   lisible de la page. Monte en taille et en luminosité, tracking resserré pour regagner la place
   perdue. Reste nettement secondaire par rapport au titre (17 vs 12.5px, poids normal vs 600). */
/* `balance` évite l'orpheline sur les titres qui passent à 2 lignes — sans lui,
   « Qui doit porter la technologie ? » renvoyait le seul « ? » à la ligne. */
.pres-step-title {
  text-wrap: balance;
}
.pres-step-kicker {
  color: #c9d6e4;
}
.pres-step[aria-current="true"] .pres-step-kicker {
  color: #e2d3a6;
}

.pres-step:hover {
  background: rgb(var(--pres-gold-rgb) / 0.06);
}

/* Sur mobile le rail devient un carrousel de cartes compact : le contenu actif
   reste immédiatement accessible, sans imposer le défilement des 11 étapes.
   Les vrais boutons et le focus clavier sont conservés. */
@media (max-width: 767px) {
  .pres-rail {
    overflow: hidden;
    padding: 18px 16px 12px !important;
    border-right: 0;
    border-bottom: 1px solid rgb(var(--pres-gold-rgb) / 0.28);
  }
  .pres-rail-heading {
    margin-bottom: 8px !important;
  }
  .pres-rail-heading .pres-brand-mark {
    font-size: 22px !important;
  }
  .pres-steps-line {
    margin-top: 10px !important;
    flex-direction: row !important;
    gap: 8px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 10px;
    scroll-snap-type: inline proximity;
    scrollbar-color: rgb(var(--pres-gold-rgb) / 0.5) transparent;
    scrollbar-width: thin;
  }
  .pres-steps-line::before {
    display: none;
  }
  .pres-steps-line > li {
    flex: 0 0 min(80vw, 300px);
    scroll-snap-align: start;
  }
  .pres-step {
    /* Suit le passage du titre à 2 lignes (2026-07-25) : une carte de 68px coupait la
       deuxième ligne des libellés longs. */
    min-height: 80px;
    border: 1px solid rgb(255 255 255 / 0.09);
    background: rgb(255 255 255 / 0.045);
    padding-right: 12px !important;
  }
}

/* Focus visible — CORRIGÉ (absent d'Academy, cf. SPEC design system §6a, ne pas reproduire ce manque) */
.pres-step:focus-visible {
  outline: 2px solid var(--pres-gold);
  outline-offset: 2px;
}

/* Scène — porté de .scr-head/.scr-body/.scr-transition (styles.js l.56-70) */
.pres-screen {
  animation: pres-fade 0.5s ease both;
}

@keyframes pres-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pres-eyebrow {
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pres-gold);
}

.pres-step-heading {
  font-family: var(--pres-serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--pres-ink);
}

/* Reduced motion — CORRIGÉ (Academy ne gardait le fondu que d'un seul écran sur onze, cf. SPEC
   design system §6b) : jamais de translation/fondu rejoué pour un utilisateur qui le demande. */
@media (prefers-reduced-motion: reduce) {
  .pres-screen {
    animation: none;
  }
}

/* Coquille d'app du gabarit "présentation par steps" — CORRIGÉ (2026-07-09, captures porteur
   annotées, docs/accueil-global-country/ajustements/01_SPEC_CORRECTION_LAYOUT_CHROME_FIXE_
   CONTENU_SCROLLABLE.md) : `.pres-app-shell` (posé dans `[locale]/layout.tsx`, autour de
   header + trait-drapeau + `{children}`) borne toute la coquille à `100dvh` — header et
   trait-drapeau (tous deux enfants directs, hors `.pres-app-body`) deviennent des blocs de
   hauteur fixe qui ne défilent plus jamais ; `.pres-app-body` (le wrapper de `{children}`)
   devient la SEULE zone qui peut défiler, avec exactement la hauteur restante. Posé UNE SEULE
   FOIS au niveau du cadre partagé (layout), donc valable pour toutes les pages du gabarit
   (accueil global, accueil pays, choix du pays, don, contact) sans reprise par page.
   Uniquement à partir de `md` (768px, même palier que `.pres-rail`/`.pres-stage` ci-dessous) :
   sur mobile, le gabarit garde son comportement de page normale (tout le document défile,
   header sticky) — un rail figé + un panneau de contenu séparément scrollable n'a pas de sens
   sur un petit écran, hors périmètre de cette correction. */
/* Le shell reste une colonne de la hauteur de la fenêtre sur TOUTES les
   largeurs. Ainsi, une page courte (état Kiosk indisponible, 404 légère,
   catalogue vide) pousse son footer au bas de la fenêtre au lieu de le
   laisser flotter au milieu. Sur mobile, le document continue de défiler
   normalement dès que son contenu dépasse cette hauteur minimale. */
.pres-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.pres-app-body {
  display: flex;
  flex: 1 0 auto;
  min-height: 0;
  flex-direction: column;
}

.pres-app-body > footer[data-variant="immersive"] {
  flex: 0 0 auto;
  margin-top: auto;
}

/* Un enfant de page ne se comprime JAMAIS sous son contenu. Sans ce plancher,
   toute page portant `min-height: 100%` (interactive-domain-page, états
   pleine hauteur) voit ce pourcentage remplacer son plancher `min-content`
   d'item flex : la boîte se comprime à la hauteur du scroller, le contenu
   déborde en peinture et le footer légal se pose AU MILIEU de la page —
   constaté le 2026-08-12 sur /civicwall. */
.pres-app-body > :not(footer[data-variant="immersive"]) {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .pres-app-shell {
    height: 100dvh;
    overflow: hidden;
  }
  .pres-app-shell > *:not(.pres-app-body) {
    flex: 0 0 auto;
  }
  .pres-app-body {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}

/* Zone de lecture claire — CORRIGÉ (2026-07-09, demande porteur : « rendons la zone de lecture
   doré/clair, on garde le menu en haut et le sidebar sombre »). `.pres-reading` retourne
   uniquement les tokens de TEXTE (--pres-ink/--pres-body/--pres-muted/--pres-gold/--pres-gold-
   soft) + pose un fond crème — jamais les couleurs directement : c'est exactement ce que permet
   la tokenisation ci-dessus, chaque écran (les 11 bespoke globaux, les 32 steps pays, la page
   Démarrage, le rendu générique) en hérite automatiquement sans qu'aucun ne soit retouché
   individuellement. Posée sur la colonne de CONTENU uniquement (`.pres-stage`, le `<main>`
   générique, `PresentationLaunchStory`) — jamais sur `.pres-rail` (reste sombre) ni sur le header
   (composant séparé, non concerné).
   La plupart des encarts secondaires deviennent papier. Un seul encart focal par composition
   (but, verdict, résultat, affirmation...) ainsi que les footers de transition gardent le navy;
   cette liste rétablit donc localement les rôles texte du chrome pour préserver le contraste. */
.pres-reading {
  --pres-ink: #1b2a44;
  --pres-body: #33425c;
  --pres-muted: #526078;
  --pres-gold: var(--pres-gold-text);
  --pres-gold-soft: #76550a;
  background:
    radial-gradient(760px 540px at 100% 0%, rgb(var(--pres-gold-rgb) / 0.1), transparent 64%),
    linear-gradient(145deg, var(--pres-paper) 0%, var(--pres-cream) 58%, var(--pres-cream-warm) 100%);
  color: var(--pres-ink);
}
.pres-reading .scr-transition,
.pres-reading .sov-affirm,
.pres-reading .country-step-goal,
.pres-reading .cx-amplify,
.pres-reading .qui-verdict,
.pres-reading .power-result,
.pres-reading .chall-result,
.pres-reading .eco-panel,
.pres-reading .giants-stream .gs-plate {
  --pres-ink: #f8f6f0;
  --pres-body: #dbe4ed;
  --pres-muted: #b7c5d3;
  --pres-gold: #c9a84e;
  --pres-gold-soft: #d7bc76;
}

/* ═══════════════════════════════════════════════════════════════════════
 * CI-DESSOUS : composition BESPOKE par step (migration accueil global,
 * docs/accueil-global-country/global/, 2026-07-08) — les compositions des 11
 * écrans viennent de @smatflow/project-presentation/src/styles.js, tandis que
 * leurs surfaces suivent désormais le registre corporate défini ci-dessus.
 * Les noms de classes restent stables. Scope : SEULEMENT les steps `global`
 * ayant un composant bespoke enregistré (registry key→composant) — le rendu
 * générique existant (`.pres-eyebrow`/`.pres-step-heading` ci-dessus) reste
 * inchangé pour le scope pays (non conçu bespoke, hors périmètre) et pour
 * toute clé absente du registre.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Scène bespoke — .pres-stage/.pres-screen ABSOLUS uniquement en contexte bespoke : un
   sélecteur descendant évite de casser le .pres-screen du rendu générique (en-flow,
   PresentationStepStage), qui reste scrollable normalement. */
.pres-stage {
  position: relative;
  overflow: hidden;
  /* Approximation mobile UNIQUEMENT (< 768px, hors périmètre de la correction 2026-07-09, cf.
     `.pres-app-shell` ci-dessus) — jamais mesurée, conservée telle quelle pour ne rien changer
     au rendu mobile actuel. */
  height: calc(100dvh - var(--pres-chrome-height, 220px));
  min-height: 720px;
}
/* CORRIGÉ (2026-07-09, captures porteur annotées) — à partir de md, `.pres-stage` n'a plus besoin
   d'approximer la hauteur du chrome : son parent (`.pres-app-body` > `.pres` > la grille rail/
   contenu, toutes `md:h-full`) lui donne déjà exactement la hauteur restante. Remplace le calcul
   magique par un simple `height:100%`, plus jamais de chiffre à deviner. */
@media (min-width: 768px) {
  .pres-stage {
    height: 100%;
    min-height: 0;
  }
}

.pres-stage .pres-screen {
  position: absolute;
  inset: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* RECADRÉ (2026-07-11, verbatim porteur 12 « typographie premium », capture annotée) : le
   bandeau était « grossier, envahissant » (titre 46px sur boîte lourde) et l'eyebrow doré
   « pas lisible » (12.5px, tracking 0.34em, or terne sur dégradé CLAIR). Devient CONTENU :
   boîte allégée (padding/ombre/bord réduits), dégradé plus profond pour que l'or ressorte,
   titre ramené à une échelle éditoriale, eyebrow monté en taille/poids/luminosité. */
.scr-head {
  --pres-ink: #f8f6f0;
  --pres-body: #dbe4ed;
  --pres-muted: #b7c5d3;
  --pres-gold: #c9a84e;
  --pres-gold-soft: #d7bc76;
  margin: 24px 32px 0;
  padding: 22px 30px 24px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.3);
  border-left: 3px solid var(--pres-gold);
  border-radius: 18px;
  background:
    radial-gradient(360px 170px at 94% -30%, rgb(255 255 255 / 0.08), transparent 66%),
    linear-gradient(150deg, rgb(38 72 110 / 0.96), var(--pres-navy) 74%);
  box-shadow:
    0 10px 26px rgb(var(--pres-navy-rgb) / 0.14),
    0 1px 0 rgb(255 255 255 / 0.06) inset;
}
.scr-head .eyebrow {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pres-gold-soft);
  margin-bottom: 10px;
}
.scr-head h1 {
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--pres-ink);
  /* CORRIGÉ (2026-07-10, recadrage porteur, capture /launch annotée) : max-width 18ch cassait le
     titre à la ligne alors que le bandeau occupe toute la largeur — le padding du bandeau suffit
     à borner la ligne, aucune limite artificielle. */
  margin: 0;
}
.scr-head h1 em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.scr-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  /* CORRIGÉ (2026-07-08, capture d'écran porteur : « tout s'écrase systématiquement ») —
     Academy suppose que sa hauteur de scène plein-cadre suffit TOUJOURS au contenu (aucun
     `overflow` sur `.scr-body` dans la source). Ici, la hauteur de `.pres-stage` est une
     approximation (cf. commentaire ci-dessus) : dès que le texte réel dépasse cette estimation,
     il débordait visuellement PAR-DESSUS `.scr-transition` (positionné par flex juste après une
     boîte de hauteur fixe, pendant que le contenu débordant continuait de s'afficher derrière).
     Un scroll interne ici, plutôt qu'un débordement qui recouvre le footer, quel que soit
     l'écart entre l'estimation et la vraie hauteur de chrome. */
  overflow-y: auto;
}

/* Phrases de transition de bas de page — STICK en bas de page (recadrage porteur 2026-07-08,
   capture d'écran : le footer devait chevaucher la dernière carte de `.scr-body` au lieu de
   rester ancré en bas). Note de la source Academy elle-même (commentaire styles.js) : « sticky
   en bas » — jamais implémenté littéralement là-bas car leur scène plein-cadre garantit que le
   contenu tient toujours (flex:0 0 auto suffisait, en dernière position d'une colonne flex de
   hauteur fixe). Ici, la hauteur de scène est une approximation (cf. `.pres-stage` ci-dessus) :
   `.scr-body` peut avoir besoin de défiler, donc CE footer est désormais rendu comme DERNIER
   enfant DE `.scr-body` (pas un frère après) et `position:sticky;bottom:0` l'ancre au bas de la
   zone de défilement — toujours visible, jamais chevauché par le contenu qui défile derrière
   (fond opaque, pas le dégradé transparent d'origine, pour masquer proprement ce contenu). */
.scr-transition {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 14px 56px 20px;
  text-align: left;
  border-top: 1px solid rgb(var(--pres-gold-rgb) / 0.18);
  background: linear-gradient(180deg, rgba(27, 58, 92, 0.72), rgba(27, 58, 92, 0.86));
  backdrop-filter: blur(6px);
}
.st-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.st-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1.3;
  color: var(--pres-ink);
}
.st-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pres-gold);
}
.st-list li b,
.st-list li strong {
  color: var(--pres-gold-soft);
  font-weight: 600;
}

.anim-host {
  position: absolute;
  inset: 0;
}

/* ═══ FLUX DE COIN (widget CSS 3D, aucun JS) — les marques/problèmes/bienfaits nous traversent ═══ */
.giants-stream {
  position: absolute;
  top: 16px;
  right: 40px;
  width: min(52%, 880px);
  height: 46%;
  perspective: 1000px;
  overflow: hidden;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(130% 140% at 58% 42%, rgb(var(--pres-navy-rgb) / 0.1), transparent 72%);
}
.giants-stream .gs-cap {
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 3;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pres-muted);
  opacity: 0.8;
}
.giants-stream .gs-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--pres-gold-soft);
  opacity: 0.5;
}
/* CORRIGÉ (2026-07-10, capture porteur cerclée : « met ceci en NAVY ») — fond blanc/crème
   quasi-opaque flottant SUR un canvas déjà crème (`.pres-reading`) : contraste carte/page
   proche de zéro, les plaques devenaient fantomatiques dans le flux animé. Carve-out
   `.pres-reading .giants-stream .gs-plate` ajouté plus haut pour son texte. */
.giants-stream .gs-plate {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178px;
  margin: -29px 0 0 -89px;
  padding: 15px 0;
  text-align: center;
  border-radius: 13px;
  background: linear-gradient(155deg, rgb(var(--pres-navy-rgb) / 0.92), rgb(var(--pres-navy-rgb) / 0.98));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.52);
  color: var(--pres-ink);
  font-family: var(--pres-sans);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  box-shadow: 0 18px 36px rgb(var(--pres-navy-rgb) / 0.28), 0 0 0 1px rgb(255 255 255 / 0.08) inset;
  opacity: 0;
  transform-style: preserve-3d;
  animation: gs-fly 5.2s linear infinite;
}
@keyframes gs-fly {
  0% {
    transform: translate3d(var(--x, 0px), var(--y, 0px), -2100px);
    opacity: 0;
  }
  12% {
    opacity: 0.95;
  }
  76% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--x, 0px), var(--y, 0px), 820px);
    opacity: 0;
  }
}
@media (max-width: 1080px) {
  .giants-stream {
    display: none;
  }
}
/* variante PROBLÈMES (préambule) — sobre/muet : des maux, pas des vedettes */
.giants-stream.problems {
  background: radial-gradient(130% 140% at 58% 42%, rgb(var(--pres-navy-rgb) / 0.08), transparent 72%);
}
.giants-stream.problems .gs-plate {
  border-color: rgb(var(--pres-gold-rgb) / 0.3);
  color: var(--pres-body);
  font-weight: 500;
  background: linear-gradient(155deg, rgb(var(--pres-navy-rgb) / 0.8), rgb(var(--pres-navy-rgb) / 0.9));
  box-shadow: 0 16px 34px rgb(var(--pres-navy-rgb) / 0.24);
}
.giants-stream.problems .gs-cap {
  color: var(--pres-muted);
}
.giants-stream.problems .gs-star {
  background: var(--pres-muted);
  opacity: 0.4;
}
/* variante BIENFAITS (②③) — plaques riches : le bienfait + son auteur */
.giants-stream.bienfaits {
  background: radial-gradient(130% 140% at 58% 42%, rgb(var(--pres-gold-rgb) / 0.12), transparent 72%);
}
.gs-plate.gs-rich {
  width: 208px;
  margin: -30px 0 0 -104px;
  padding: 13px 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gs-plate.gs-rich .gs-good {
  font-family: var(--pres-serif);
  font-size: 18px;
  line-height: 1.14;
  color: var(--pres-ink);
}
.gs-plate.gs-rich .gs-who {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pres-gold-soft);
}
@media (prefers-reduced-motion: reduce) {
  /* CORRIGÉ (SPEC design system §6b) : Academy ne gardait AUCUNE garde sur cette boucle
     infinie visible sur 3 écrans — la plus visible du composant. */
  .gs-plate {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ═══ gabarit PARTAGÉ des steps pays (SPEC 11) — réutilisé tel quel par l'écran PRÉAMBULE de
   l'accueil (PreambleScreen.tsx) depuis le 2026-07-12 : un seul gabarit éditorial texte pour
   /launch ET /fr, plus de copie `.preamble-*` séparée qui divergeait (verbatim porteur 12). ═══ */
/* RECADRÉ (2026-07-11, verbatim porteur 12) : le corps était « trop petit, trop quelconque,
   aucun style » (sans-serif 17.5px). Passe en CALLIGRAPHIE éditoriale : serif Fraunces en
   grands caractères, premier paragraphe en lead, filet doré de tête — la page redevient
   premium sans rien changer au contenu. */
.country-step {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding: 26px 64px 44px;
}
.country-step--single {
  grid-template-columns: 1fr;
  max-width: 56rem;
}
.country-step-cols {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.country-step-cols::before {
  content: "";
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pres-gold), rgb(var(--pres-gold-rgb) / 0.25));
}
.country-step-cols p {
  font-family: var(--pres-serif);
  font-size: clamp(18.5px, 1.35vw, 21px);
  line-height: 1.78;
  color: var(--pres-ink);
  margin: 0;
  /* CORRIGÉ (2026-07-10, même recadrage porteur que .scr-head h1) : max-width 42ch laissait un
     grand vide à droite — la colonne de grille (1.05fr) borne déjà la largeur de lecture. */
}
.country-step-cols p:first-of-type {
  font-size: clamp(20px, 1.5vw, 23.5px);
  line-height: 1.66;
}
.country-step-cols p strong {
  color: var(--pres-ink);
  font-weight: 600;
}
.country-step-cols p em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
/* L'objectif reste l'unique affiche navy de cette composition : il fixe le
   message à retenir sans assombrir l'ensemble de la zone de lecture. */
.country-step-goal {
  position: relative;
  padding: 32px 34px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(27, 58, 92, 0.85), rgba(27, 58, 92, 0.93));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.42;
  color: var(--pres-ink);
}
.country-step-goal em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.country-step-goal strong {
  color: var(--pres-gold);
  font-weight: 600;
  font-style: normal;
}
.country-step-goal .g-label {
  display: block;
  font-family: var(--pres-sans);
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pres-gold-soft);
  margin-bottom: 14px;
  font-weight: 600;
}
.country-step-goal .g-sub {
  display: block;
  margin-top: 18px;
  font-family: var(--pres-sans);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--pres-muted);
}
@media (max-width: 1080px) {
  .country-step {
    grid-template-columns: 1fr;
    gap: 24px;
    overflow-y: auto;
  }
}
@media (max-width: 640px) {
  .country-step {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ═══ écran VITRINE MÉDIA (bibliothèque du projet — MediaShowcaseStepScreen.tsx) ═══
   Read UNE FOIS comme le préambule : mêmes tokens que .country-step/.country-step-goal
   ci-dessus, jamais un style à part. 2026-07-16, reconstruit après retour porteur (le premier
   jet empilait un bloc permanent hors du système rail/scène). */
.showcase-step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 26px 64px 44px;
  max-width: 68rem;
  width: 100%;
  margin: 0 auto;
}
.showcase-step-lead {
  font-family: var(--pres-serif);
  font-size: clamp(20px, 1.5vw, 23.5px);
  line-height: 1.66;
  color: var(--pres-ink);
  margin: 0;
}
.showcase-step-intro {
  font-family: var(--pres-serif);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.72;
  color: var(--pres-ink);
  opacity: 0.86;
  margin: 0;
}
.showcase-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
}
.showcase-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: rgb(var(--pres-gold-rgb) / 0.05);
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.28);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.showcase-card:hover {
  border-color: var(--pres-gold);
  transform: translateY(-3px);
}
.showcase-card-cover-wrap {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
}
.showcase-card-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: filter 0.2s ease;
}
.showcase-card-cover-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(11, 26, 45, 0);
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.showcase-card-cover-wrap:hover .showcase-card-cover-zoom-hint,
.showcase-card-cover-wrap:focus-visible .showcase-card-cover-zoom-hint {
  opacity: 1;
  background: rgba(11, 26, 45, 0.32);
}
.showcase-card-cover-zoom-hint svg {
  width: 34px;
  height: 34px;
  color: var(--pres-gold);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
@keyframes showcase-lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.showcase-card-title {
  font-family: var(--pres-serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--pres-ink);
}
.showcase-card-promise {
  font-family: var(--pres-sans);
  font-size: 13px;
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.showcase-card-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--pres-sans);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--pres-gold);
  color: #1b3a5c;
}
.showcase-card-cta--outline {
  background: transparent;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.5);
  color: var(--pres-gold-soft);
}
.showcase-step-goal {
  margin-top: 4px;
}
@media (max-width: 1080px) {
  .showcase-step {
    padding: 20px 28px 36px;
    overflow-y: auto;
  }
}
@media (max-width: 640px) {
  .showcase-step {
    padding-left: 20px;
    padding-right: 20px;
  }
  .showcase-step-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══ écran LA COMPLEXITÉ DE LA SOLUTION (flux citoyen → torrent → technologie) ═══ */
.cx-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 14px 56px 26px;
}
.cx-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--pres-body);
  max-width: 64ch;
}
.cx-lead b {
  color: var(--pres-ink);
  font-weight: 600;
}
.cx-flows {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 24px;
  border-radius: 16px;
  border: 1px solid var(--pres-card-border);
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.035));
  box-shadow: var(--pres-card-shadow);
}
.cx-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 8px;
}
.cx-src {
  padding: 12px 21px;
  border-radius: 999px;
  color: var(--pres-navy);
  font-weight: 700;
  font-size: 17.5px;
  background: linear-gradient(160deg, #d7bc76, var(--pres-gold) 60%, #9a7724);
  box-shadow: 0 0 14px rgb(var(--pres-gold-rgb) / 0.36);
}
.cx-node {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgb(var(--pres-navy-rgb) / 0.055);
  border: 1px solid rgb(var(--pres-navy-rgb) / 0.13);
  color: var(--pres-ink);
  font-size: 17px;
}
.cx-arrow {
  color: var(--pres-gold-soft);
  opacity: 0.75;
  font-size: 22px;
}
.cx-from {
  margin-top: 6px;
  font-family: var(--pres-serif);
  font-style: italic;
  font-size: 19px;
  color: var(--pres-gold-soft);
}
.cx-from b {
  font-style: normal;
  color: var(--pres-gold);
  font-weight: 600;
}
.cx-from em {
  font-style: italic;
}
.cx-loop {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cx-loop-tag {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.55);
  background: rgb(var(--pres-gold-rgb) / 0.08);
  color: var(--pres-gold);
  font-weight: 600;
  font-size: 15px;
}
.cx-loop-note {
  font-size: 17.5px;
  line-height: 1.45;
  color: var(--pres-body);
}
.cx-loop-note b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.cx-loop-note em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.cx-amplify {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 26px;
  border-radius: 16px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.48);
  background: linear-gradient(145deg, rgb(var(--pres-navy-rgb) / 0.9), var(--pres-navy));
  box-shadow: 0 20px 42px rgb(var(--pres-navy-rgb) / 0.2);
}
.cx-mult {
  flex: 0 0 auto;
  font-family: var(--pres-serif);
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--pres-gold);
}
.cx-amplify p {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--pres-ink);
}
.cx-amplify b {
  color: var(--pres-gold-soft);
  font-weight: 700;
}
.cx-amplify em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.cx-cases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cx-cases-label {
  font-size: 14.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pres-muted);
  margin-right: 6px;
}
.cx-case {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px dashed rgb(var(--pres-gold-rgb) / 0.45);
  color: var(--pres-gold-soft);
  font-size: 16.5px;
}
.cx-case-note {
  font-style: italic;
  color: var(--pres-muted);
  font-size: 17.5px;
}
@media (max-width: 1080px) {
  .cx-screen {
    padding: 12px 26px 22px;
    overflow-y: auto;
  }
  .cx-amplify {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ═══ écran QUI DOIT PORTER LA TECHNOLOGIE ? (plaidoyer géants → verdict provisoire) ═══ */
.qui-screen {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.25fr 0.82fr;
  align-items: center;
  gap: 0 36px;
  padding: 24px 56px 48px;
}
.qui-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qui-lead {
  margin: 0;
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.34;
  color: var(--pres-ink);
  max-width: 36ch;
}
.qui-lead b {
  color: var(--pres-gold);
  font-weight: 600;
}
.qui-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qui-methods-label {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pres-muted);
}
.qui-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.qui-method {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.68);
  border: 1px solid var(--pres-card-border);
  color: var(--pres-body);
  font-size: 14.5px;
}
.qui-point {
  margin: 0;
  font-family: var(--pres-serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.3;
  color: var(--pres-gold-soft);
}
.qui-point b {
  font-style: normal;
  color: var(--pres-gold);
  font-weight: 600;
}
.giant-grid,
.qui-giants {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.giant {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 13px;
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.035));
  border: 1px solid var(--pres-card-border);
  box-shadow: 0 10px 24px rgb(var(--pres-navy-rgb) / 0.08);
}
.giant .mono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--pres-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--pres-navy);
  background: linear-gradient(160deg, #d7bc76, var(--pres-gold) 60%, #9a7724);
  box-shadow: 0 0 14px rgb(var(--pres-gold-rgb) / 0.4);
}
.giant .nm {
  font-weight: 600;
  font-size: 17.5px;
  color: var(--pres-ink);
  letter-spacing: 0.01em;
}
.qui-powers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.qui-powers-label {
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-right: 4px;
}
.qui-power {
  padding: 8px 15px;
  border-radius: 999px;
  background: rgb(var(--pres-gold-rgb) / 0.1);
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.45);
  color: var(--pres-gold-soft);
  font-size: 17.5px;
}
.qui-verdict {
  position: relative;
  align-self: center;
  padding: 28px 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(27, 58, 92, 0.85), rgba(27, 58, 92, 0.93));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.4;
  color: var(--pres-ink);
}
.qui-verdict .g-label {
  display: block;
  font-family: var(--pres-sans);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 12px;
  font-weight: 600;
}
.qui-verdict strong {
  color: var(--pres-gold);
  font-weight: 600;
  font-style: normal;
}
.qui-verdict em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
@media (max-width: 1080px) {
  .qui-screen {
    grid-template-columns: 1fr;
    gap: 22px;
    overflow-y: auto;
  }
}

/* ═══ écran LA PUISSANCE DES GÉANTS (3 blocs sources → conjugaison → richesse/puissance/notoriété) ═══ */
.power-screen {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.32fr 0.07fr 0.8fr;
  align-items: center;
  gap: 0 26px;
  padding: 16px 56px 40px;
}
.power-sources {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.power-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.power-denom {
  font-size: 15px;
  color: var(--pres-muted);
  line-height: 1.5;
}
.power-denom b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.power-citizens {
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.44);
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-gold-rgb) / 0.07));
  box-shadow: var(--pres-card-shadow);
  display: flex;
  align-items: baseline;
  gap: 15px;
  flex-wrap: wrap;
}
.power-citizens .src-label {
  color: var(--pres-gold);
  margin-bottom: 0;
  font-size: 14.5px;
}
.power-citizens .pc-note {
  font-family: var(--pres-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--pres-gold-soft);
}
.src {
  padding: 16px 19px;
  border-radius: 14px;
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.035));
  border: 1px solid var(--pres-card-border);
  box-shadow: 0 10px 24px rgb(var(--pres-navy-rgb) / 0.07);
}
.src.src-wide {
  grid-column: 1 / -1;
}
.src .src-label {
  font-size: 14.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 10px;
  font-weight: 600;
}
.src ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
}
.src li {
  font-size: 16.5px;
  color: var(--pres-body);
  position: relative;
  padding-left: 16px;
}
.src li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pres-gold);
  opacity: 0.75;
}
.power-arrow {
  display: grid;
  place-items: center;
  font-size: 38px;
  color: var(--pres-gold-soft);
  opacity: 0.85;
}
.power-result {
  position: relative;
  padding: 30px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(27, 58, 92, 0.85), rgba(27, 58, 92, 0.93));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.15vw, 29px);
  line-height: 1.36;
  color: var(--pres-ink);
}
.power-result .g-label {
  display: block;
  font-family: var(--pres-sans);
  font-size: 14.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.power-result em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.power-result strong {
  color: var(--pres-gold);
  font-weight: 600;
  font-style: normal;
}
@media (max-width: 1080px) {
  .power-screen {
    grid-template-columns: 1fr;
    gap: 16px;
    overflow-y: auto;
  }
  .power-arrow {
    transform: rotate(90deg);
  }
}

/* ═══ écran L'IMPACT DES GÉANTS (boucle vertueuse + conclusion qui clôt le débat) ═══ */
.challenges-screen {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.9fr;
  align-items: center;
  gap: 0 34px;
  padding: 26px 56px 64px;
}
.loop-label {
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pres-muted);
  margin-bottom: 14px;
}
.loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
}
.loop-node {
  padding: 10px 15px;
  border-radius: 11px;
  background: var(--pres-paper);
  border: 1px solid var(--pres-card-border);
  box-shadow: 0 8px 20px rgb(var(--pres-navy-rgb) / 0.07);
  color: var(--pres-ink);
  font-size: 15.5px;
  font-weight: 500;
}
.loop-arrow {
  color: var(--pres-gold-soft);
  opacity: 0.7;
  font-size: 17.5px;
}
.loop-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px dashed rgb(var(--pres-gold-rgb) / 0.5);
  color: var(--pres-gold-soft);
  font-size: 14.5px;
  font-style: italic;
}
.chall-lead {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--pres-body);
  max-width: 58ch;
  margin: 0 0 22px;
}
.chall-lead b {
  color: var(--pres-ink);
  font-weight: 600;
}
.chall-lead em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.chall-note {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--pres-body);
  max-width: 54ch;
}
.chall-note strong,
.chall-note b {
  color: var(--pres-ink);
  font-weight: 600;
}
.chall-note em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.chall-result {
  position: relative;
  align-self: end;
  padding: 32px 30px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(27, 58, 92, 0.85), rgba(27, 58, 92, 0.93));
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.05);
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--pres-ink);
}
.chall-result .g-label {
  display: block;
  font-family: var(--pres-sans);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 14px;
  font-weight: 600;
}
.chall-result em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.chall-result strong {
  color: var(--pres-gold);
  font-weight: 600;
  font-style: normal;
}
@media (max-width: 1080px) {
  .challenges-screen {
    grid-template-columns: 1fr;
    gap: 22px;
    overflow-y: auto;
  }
}

/* ═══ écran L'INTELLIGENCE POPULAIRE (moulin réemployé, intrants enrichis) ═══ */
.ip-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.ip-lead {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 56px 6px;
  max-width: 110ch;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--pres-body);
}
.ip-lead b {
  color: var(--pres-ink);
  font-weight: 600;
}
.ip-lead em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.ip-moulin {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.ip-statement {
  flex: 0 0 auto;
  padding: 14px 56px 20px;
  text-align: left;
  border-top: 1px solid rgb(var(--pres-gold-rgb) / 0.18);
  background: linear-gradient(0deg, rgb(227 219 205 / 0.96), rgb(240 235 227 / 0.72));
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 23px);
  line-height: 1.34;
  color: var(--pres-ink);
}
.ip-statement b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.ip-statement em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
@media (max-width: 1080px) {
  .ip-lead,
  .ip-statement {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ═══ écran LA MATRICE (matrice-vivante réemployée — la nation au travail + maillage humain) ═══ */
.mx-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.mx-lead {
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 0 56px;
  max-width: 104ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pres-body);
}
.mx-lead b {
  color: var(--pres-ink);
  font-weight: 600;
}
.mx-lead em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.mx-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.mx-amb {
  flex: 0 0 auto;
  padding: 8px 56px 16px;
}
.mx-amb-lbl {
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 9px;
}
.mx-amb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mx-amb-card {
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid var(--pres-card-border);
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.035));
  box-shadow: 0 10px 24px rgb(var(--pres-navy-rgb) / 0.07);
}
.mx-amb-nm {
  display: block;
  font-family: var(--pres-serif);
  font-size: 15px;
  line-height: 1.15;
  color: var(--pres-ink);
  margin-bottom: 3px;
}
.mx-amb-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--pres-body);
}
.mx-amb-desc b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
@media (max-width: 1080px) {
  .mx-amb {
    padding: 6px 24px 12px;
  }
  .mx-amb-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ═══ écrans ⑧⑨⑪ — triangle/globe/assemblée + panel de légende (carte verre) ═══
   UNIFORMISÉ (2026-07-25, verbatim porteur « ceci doit être une présentation avec les pages
   uniformes ») : ces 3 écrans étaient les seuls à n'avoir AUCUN bandeau `.scr-head` — ils
   ouvraient sur l'animation pleine page, eyebrow + titre logés dans le panel flottant. Deux
   identités de page cohabitaient donc dans une même présentation. L'eyebrow et le titre remontent
   dans le `.scr-head` canonique (comme les 8 autres écrans) ; l'animation et le panel vivent
   désormais dans `.scr-body`, contre lequel leurs `position:absolute` se résolvent. Le panel n'est
   plus un bloc-titre concurrent : il ne porte que la légende (lead, rôles, tag, foot), d'où la
   suppression de `.eco-panel .eyebrow` et `.eco-panel-h1`, sans usage restant. */
.eco-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.eco-panel {
  position: absolute;
  top: 26px;
  left: 40px;
  z-index: 2;
  width: min(420px, 40%);
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.42);
  background: linear-gradient(160deg, rgba(27, 58, 92, 0.86), rgba(27, 58, 92, 0.92));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(7px);
}
.eco-panel-lead {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pres-body);
}
.eco-panel-lead b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.eco-panel-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eco-panel-roles li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--pres-body);
}
.eco-panel-roles li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pres-gold);
}
.eco-panel-roles .eco-role-nm {
  color: var(--pres-ink);
  font-weight: 600;
}
.eco-panel-roles li b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
/* Genève : le vocable « l'ONU des peuples » + la chute (pourquoi Genève) */
.eco-panel-tag {
  margin: -4px 0 14px;
  font-family: var(--pres-serif);
  font-style: italic;
  font-size: 17.5px;
  color: var(--pres-gold-soft);
}
.eco-panel-foot {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgb(var(--pres-gold-rgb) / 0.2);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pres-body);
}
.eco-panel-foot b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.eco-panel-foot em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
@media (max-width: 1080px) {
  .eco-panel {
    position: static;
    width: auto;
    margin: 14px 24px;
  }
}

/* ═══ écran INDUSTRIE & SOUVERAINETÉ NUMÉRIQUE (la pile souveraine cernée d'or) ═══ */
.sov-screen {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 0.82fr 1.05fr;
  gap: 40px;
  align-items: center;
  padding: 12px 56px 22px;
}
.sov-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sov-intro-lbl {
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pres-gold);
}
.sov-intro-p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--pres-body);
}
.sov-intro-p b {
  color: var(--pres-ink);
  font-weight: 600;
}
.sov-intro-p em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
.sov-indus {
  padding: 13px 16px;
  border-radius: 13px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.32);
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-gold-rgb) / 0.07));
  box-shadow: 0 10px 24px rgb(var(--pres-navy-rgb) / 0.07);
}
.sov-indus-h {
  font-family: var(--pres-serif);
  font-size: 15.5px;
  color: var(--pres-gold-soft);
  margin-bottom: 5px;
}
.sov-indus p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--pres-body);
}
.sov-indus b {
  color: var(--pres-ink);
  font-weight: 600;
}
.sov-pile {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px 6px;
}
.sov-frame {
  position: absolute;
  inset: 16px 34px;
  z-index: 0;
  pointer-events: none;
}
.sov-frame-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sov-ground {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 10px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pres-gold), transparent);
  animation: sov-breathe 5.5s ease-in-out infinite;
}
.sov-ground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 26px;
  background: radial-gradient(60% 100% at 50% 0%, rgb(var(--pres-gold-rgb) / 0.26), rgb(var(--pres-gold-rgb) / 0) 72%);
}
.sov-stack {
  position: relative;
  z-index: 1;
  width: min(620px, 94%);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.sov-stack::before {
  content: "";
  position: absolute;
  left: 43px;
  top: -6px;
  bottom: -6px;
  width: 2px;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--pres-gold-rgb) / 0.04),
    rgb(var(--pres-gold-rgb) / 0.5) 12%,
    rgb(var(--pres-gold-rgb) / 0.5) 88%,
    rgb(var(--pres-gold-rgb) / 0.04)
  );
}
.sov-rise {
  position: absolute;
  left: 39px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 0;
  background: var(--pres-gold-soft);
  box-shadow: 0 0 12px 3px rgb(215 188 118 / 0.7);
  animation: sov-rise 5.5s ease-in-out infinite;
}
@keyframes sov-rise {
  0% {
    top: 92%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    top: 1%;
    opacity: 0;
  }
}
@keyframes sov-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.92;
  }
}
.sov-tier {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgb(var(--pres-gold-rgb) / 0.34);
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.04));
  box-shadow: 0 14px 36px rgb(var(--pres-navy-rgb) / 0.1), inset 0 1px rgb(255 255 255 / 0.72);
}
.sov-tier.is-socle {
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-gold-rgb) / 0.1));
  box-shadow: 0 16px 38px rgb(var(--pres-navy-rgb) / 0.11), inset 0 1px rgb(255 255 255 / 0.72);
}
.sov-tier.is-crown::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 26px rgb(var(--pres-gold-rgb) / 0.26);
  animation: sov-breathe 5.5s ease-in-out infinite;
}
.sov-badge {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #d7bc76, var(--pres-gold) 60%, #9a7724);
  box-shadow: 0 0 14px rgb(var(--pres-gold-rgb) / 0.4);
}
.sov-seal {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pres-navy);
  border: 1px solid var(--pres-gold);
  display: grid;
  place-items: center;
}
.sov-mid {
  min-width: 0;
}
.sov-tag {
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pres-gold);
  margin-bottom: 2px;
}
.sov-name {
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.14;
  color: var(--pres-ink);
}
.sov-items {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}
.sov-items li {
  position: relative;
  padding-left: 14px;
  font-size: 14.5px;
  color: var(--pres-body);
}
.sov-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pres-gold);
  opacity: 0.75;
}
.sov-detail {
  display: grid;
  place-items: center;
  opacity: 0.9;
}
.sov-detail .sov-waves path {
  animation: sov-pulse 2.6s ease-in-out infinite;
}
.sov-detail .sov-waves path:last-child {
  animation-delay: 0.55s;
}
@keyframes sov-pulse {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.9;
  }
}
.sov-axis {
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 28px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pres-muted);
  pointer-events: none;
}
.sov-arrow {
  color: var(--pres-gold-soft);
  font-size: 17.5px;
}
.sov-axis-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.sov-affirm {
  /* STICK en bas — même correctif et même raison que `.scr-transition` ci-dessus : dernier
     enfant de `.scr-body`, pas un frère après (SovereigntyScreen.tsx). */
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 14px 56px 20px;
  text-align: left;
  border-top: 1px solid rgb(var(--pres-gold-rgb) / 0.18);
  background: linear-gradient(180deg, rgba(27, 58, 92, 0.72), rgba(27, 58, 92, 0.86));
  backdrop-filter: blur(6px);
  font-family: var(--pres-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1.34;
  color: var(--pres-ink);
}
.sov-affirm b {
  color: var(--pres-gold-soft);
  font-weight: 600;
}
.sov-affirm em {
  font-style: italic;
  color: var(--pres-gold-soft);
}
@media (max-width: 1080px) {
  .sov-screen {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 24px 18px;
  }
  .sov-pile {
    padding: 16px 4px;
  }
  .sov-tier {
    grid-template-columns: 50px 1fr;
  }
  .sov-detail {
    display: none;
  }
  .sov-axis {
    display: none;
  }
  .sov-stack {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sov-rise,
  .sov-ground,
  .sov-tier.is-crown::after,
  .sov-detail .sov-waves path {
    animation: none;
  }
}

/* ═══ Réglage mobile (<640px) — CORRIGÉ (SPEC design system §6c) : Academy n'avait qu'un seul
   palier (1080px) et laissait les paddings horizontaux fixes (56px) manger ~30% d'un écran de
   téléphone. Resserre les paddings des zones transversales sans toucher au palier 1080px. */
@media (max-width: 640px) {
  .scr-head {
    margin: 14px 14px 0;
    padding-top: 22px;
    padding-bottom: 24px;
    border-radius: 20px;
  }
  .scr-head,
  .scr-transition,
  .ip-lead,
  .ip-statement,
  .mx-lead,
  .sov-affirm {
    padding-left: 22px;
    padding-right: 22px;
  }
  .cx-screen,
  .qui-screen,
  .power-screen,
  .challenges-screen,
  .sov-screen {
    padding-left: 22px;
    padding-right: 22px;
  }
  .eco-panel {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* ═══ Atlas — grille "Choisir un pays" (PresentationCountryPicker.tsx) — SPEC 31
 * (docs/activation-pays/31_SPEC_CARTES_PAYS_STYLEES_ET_CARTE_ACTIVATION_ATLAS.md),
 * 2026-07-10 : affiches papier premium, liseré navy/or et profondeur douce.
 * Zone stats réservée mais vide (aucune donnée branchée dans cette spec, doctrine
 * zéro chiffre inventé). Carte "activation" de nature visuelle distincte (bordure
 * en pointillés), toujours visible, jamais mêlée aux cartes pays actives (doctrine
 * spec 24 : ne pas polluer les cartes pays actives). ═══ */
.cpick-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--pres-paper), rgb(var(--pres-navy-rgb) / 0.035));
  border: 1px solid var(--pres-card-border);
  box-shadow: 0 12px 28px rgb(var(--pres-navy-rgb) / 0.09);
  transition: 0.2s;
  position: relative;
  top: 0;
}
.cpick-card:hover {
  background: linear-gradient(155deg, #ffffff, var(--pres-cream-warm));
  border-color: rgb(var(--pres-gold-rgb) / 0.62);
  box-shadow: 0 18px 40px rgb(var(--pres-navy-rgb) / 0.14);
  top: -2px;
}
.cpick-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cpick-flag {
  font-size: 28px;
  line-height: 1;
}
.cpick-name {
  display: block;
  font-family: var(--pres-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--pres-ink);
}
.cpick-region {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pres-muted);
}
.cpick-card-stats {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--pres-gold-rgb) / 0.22);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--pres-muted);
}
.cpick-card--activation {
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-style: dashed;
  border-color: rgb(var(--pres-gold-rgb) / 0.56);
  background: linear-gradient(155deg, rgb(var(--pres-gold-rgb) / 0.11), rgb(255 255 255 / 0.64));
}
.cpick-card--activation:hover {
  border-color: #c9a84e;
  background: linear-gradient(155deg, rgb(var(--pres-gold-rgb) / 0.17), var(--pres-paper));
  top: -2px;
}
.cpick-activation-icon {
  color: var(--pres-gold);
}
.cpick-activation-title {
  font-family: var(--pres-serif);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--pres-ink);
}
.cpick-activation-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pres-muted);
  max-width: 30ch;
}
.cpick-activation-cta {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pres-gold);
}

/* Mobile : une seule surface de défilement, celle du document. Placé en fin
   de feuille pour gagner sur les règles historiques de scène/footers. Les
   écrans purement animés gardent un canevas minimal de 720px. */
@media (max-width: 767px) {
  .pres-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .pres-stage .pres-screen {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 720px;
  }
  .scr-body {
    overflow-y: visible;
  }
  .scr-transition,
  .sov-affirm {
    position: static;
  }
}

/* ═══ MENU À TROIS TONS (verbatim porteur 13, 2026-07-10 — SPEC 14, smatflow-tv/civic-tv), porté
   par le bandeau à deux étages (23/09/2026) : la zone TRANSVERSE (don, contact) vit dans l'étage du
   haut ; la zone GLOBALE et la zone LOCALE du pays se partagent l'étage de navigation, et le pays y
   garde son ton propre — un or clair, avec son drapeau. `data-tone` est posé par le bandeau. ═══ */
.smf-mh .smf-mh-nav [data-tone="local"] { color: #e8d4a0; }
.smf-mh .smf-mh-nav [data-tone="local"]:hover,
.smf-mh .smf-mh-nav [data-tone="local"][aria-checked="true"] { color: #f3e2b3; }

.pres-nav-country-flag-wrap {
  transition: transform 160ms ease, filter 160ms ease;
}

.pres-nav-donation-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  font-weight: 800;
}
.pres-nav-donation-heart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgb(250 247 240 / 0.96);
  color: #e32636;
  font-size: 0.92em;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgb(15 36 56 / 0.1),
    0 1px 2px rgb(15 36 56 / 0.2);
}
.pres-nav-donation-text {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pres-nav-donation-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 15px;
  background: rgb(15 36 56 / 0.28);
}
.pres-nav-donation-country {
  min-width: 0;
  font-family: var(--pres-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.12em;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes pres-nav-donation-heartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.18); }
  60% { transform: scale(0.96); }
}

/* ═══ pages plein-cadre (SMATFLOW TV SPECS 11/12, Matrice SPEC 18) — recadrage porteur
   2026-07-10 : « le composant doit être FILL et remplir sa zone conteneur ». `.pres-app-body`
   (layout) fournit déjà la hauteur restante sous le header (coquille 100dvh, md+) : la page la
   remplit intégralement et laisse le composant scroller EN INTERNE (overflow hidden — en-têtes
   sticky préservés). Sur mobile, flux de page normal (même palier 768px que .pres-app-shell). */
.fill-page-main {
  min-height: 70vh;
}
@media (min-width: 768px) {
  .fill-page-main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}


/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../../../../node_modules/.pnpm/next@15.5.23_@opentelemetry+api@1.9.1_@playwright+test@1.62.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/project/project-deck.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   SMATFLOW PROJET — STICKY SUB-NAVIGATION NAVY & GOLD CHARTE OFFICIELLE
   ========================================================================== */

.project-deck {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  width: 100%;
}

.project-section-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .project-deck {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .project-deck > .deck-root {
    flex: 1 1 auto;
    min-height: 0;
  }
  .project-deck > .deck-root--premium {
    min-width: 0;
    overflow: hidden;
  }
  .project-section-page {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .project-section-page > .pres {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* -------------------------------------------------------------------------
   STICKY BAR: Immobilité absolue au scroll, fond Navy #1B3A5C officiel, filet or
   ------------------------------------------------------------------------- */
.project-sticky-bar {
  position: sticky;
  top: var(--pres-top-header-height, 0px);
  z-index: 40;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.4rem 1rem;
  overflow-x: auto;
  background: rgb(27 58 92 / 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(201 168 78 / 0.35);
  box-shadow: 0 4px 16px rgb(27 58 92 / 0.22);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.project-sticky-bar::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .project-sticky-bar {
    top: 0;
    padding-inline: 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   RANGÉE DE NAVIGATION: Centrée, espacement équilibré, navy & or
   ------------------------------------------------------------------------- */
.project-sticky-capsule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.project-sticky-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-inline: auto;
  padding: 0.2rem 0.3rem;
}

/* -------------------------------------------------------------------------
   PILULES DE NAVIGATION: Finition soignée, typographie dorée/ivoire sur Navy
   ------------------------------------------------------------------------- */
.project-sticky-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(244 239 226 / 0.85);
  border: 1px solid transparent;
  background: transparent;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.project-sticky-link:hover,
.project-sticky-link:focus-visible {
  color: #ffffff;
  background: rgb(201 168 78 / 0.18);
  border-color: rgb(201 168 78 / 0.45);
}

.project-sticky-link:focus-visible {
  outline: 2px solid #c9a84e;
  outline-offset: 2px;
}

/* État actif: Pastille or élégante sur Navy avec texte navy lisible */
.project-sticky-link[data-active="true"] {
  color: #1b3a5c;
  background: #c9a84e;
  border-color: #d7bc76;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(201 168 78 / 0.35);
}