/* ==================================================================
   UMCC — Site vitrine
   ------------------------------------------------------------------
   La palette n'est pas inventée : elle est reprise de l'emblème de
   l'unité — bleu marine du navire, or de la couronne de laurier, et
   le vert du drapeau sénégalais qui y figure déjà.

   Aucune dépendance externe : pas de CDN, pas de police distante.
   Le site fonctionne hors ligne et se dépose tel quel.
   ================================================================== */

:root {
    /* Identité */
    --marine:        #0b2545;
    --marine-fonce:  #061a33;
    --marine-clair:  #15406f;
    --or:            #d4a017;
    --or-clair:      #e8b923;
    --emeraude:      #0e7c5a;
    --rouge:         #c8102e;   /* drapeau, usage ponctuel */

    /* Surfaces */
    --fond:          #f7f6f2;
    --fond-2:        #ffffff;
    --anthracite:    #121a26;
    --ligne:         #e3e1d9;

    /* Encres */
    --encre:         #0b1622;
    --encre-2:       #46525f;
    --encre-3:       #8b95a1;
    --encre-inv:     #eef2f6;

    --rayon:         18px;
    --rayon-sm:      10px;
    --transition:    .35s cubic-bezier(.22,.8,.3,1);
    --conteneur:     1220px;
}

/* Mode sombre : suit le réglage du visiteur, sans bascule imposée. */
@media (prefers-color-scheme: dark) {
    :root {
        --fond:      #0d141d;
        --fond-2:    #121a26;
        --ligne:     #24303f;
        --encre:     #eef2f6;
        --encre-2:   #a8b4c0;
        --encre-3:   #6b7a8a;
    }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
    background: var(--fond);
    color: var(--encre);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: 0 24px; }

/* ── Typographie ────────────────────────────────────────────────── */
.sur-titre {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: 11px; font-weight: 800; letter-spacing: .22em;
    text-transform: uppercase; color: var(--or);
    margin-bottom: 1rem;
}
.sur-titre::before {
    content: ''; width: 26px; height: 2px; background: var(--or); display: block;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.12rem; }

.chapo {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    color: var(--encre-2); max-width: 62ch;
}

/* ══════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION
   ══════════════════════════════════════════════════════════════════ */
.barre {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    padding: 14px 0;
    transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.barre.posee {
    background: color-mix(in srgb, var(--fond) 86%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--ligne);
    padding: 9px 0;
}
.barre-inner { display: flex; align-items: center; gap: 18px; }

.marque { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.marque img { width: 42px; height: 42px; object-fit: contain; }
.marque-txt strong {
    display: block; font-size: 15px; font-weight: 900; letter-spacing: -.01em;
    color: var(--encre);
}
.marque-txt span {
    display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--encre-3);
}
/* Sur le hero, la barre est posée sur une image sombre. */
.barre:not(.posee) .marque-txt strong,
.barre:not(.posee) .lien-nav { color: #fff; }
.barre:not(.posee) .marque-txt span { color: rgba(255,255,255,.62); }

.nav { display: flex; align-items: center; gap: 4px; }
.lien-nav {
    padding: .5rem .85rem; border-radius: 99px;
    font-size: 12.5px; font-weight: 700; color: var(--encre-2);
    transition: background var(--transition), color var(--transition);
}
.lien-nav:hover { background: color-mix(in srgb, var(--or) 18%, transparent); color: var(--or); }

.bouton {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .78rem 1.5rem; border-radius: 99px; border: 0; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
/* ── Choix de la langue ─────────────────────────────────────────────
   Trois codes courts plutôt qu'un menu déroulant : à trois langues,
   un menu coûte un clic de plus pour rien. */
.choix-langue { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
    background: rgba(255,255,255,.1); }
.barre.posee .choix-langue { background: color-mix(in srgb, var(--encre) 7%, transparent); }
.choix-langue button {
    border: 0; cursor: pointer; font: inherit;
    padding: .34rem .62rem; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    color: rgba(255,255,255,.66); background: transparent;
    transition: color var(--transition), background var(--transition);
}
.barre.posee .choix-langue button { color: var(--encre-2); }
.choix-langue button:hover { color: #fff; }
.barre.posee .choix-langue button:hover { color: var(--encre); }
.choix-langue button.actif { background: var(--or); color: var(--marine-fonce); }
.barre.posee .choix-langue button.actif { color: var(--marine-fonce); }
.choix-langue button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.bouton-or { background: var(--or); color: var(--marine-fonce); box-shadow: 0 6px 22px rgba(212,160,23,.32); }
.bouton-or:hover { background: var(--or-clair); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,160,23,.42); }
.bouton-ligne { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.bouton-ligne:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.burger {
    display: none; width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
}
.barre.posee .burger { background: var(--ligne); color: var(--encre); }

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero {
    position: relative; min-height: 100svh;
    display: flex; align-items: center;
    overflow: hidden;
    /* Le fond profond appartient au hero lui-même : le dessin, lui,
       est une couche qui s'efface là où le texte se pose. */
    background:
        radial-gradient(ellipse 60% 50% at 10% 92%, rgba(14,124,90,.26) 0%, transparent 62%),
        radial-gradient(ellipse 70% 55% at 76% 26%, rgba(21,64,111,.60) 0%, transparent 66%),
        linear-gradient(155deg, #061a33 0%, #0b2545 48%, #061a33 100%);
    background-color: var(--marine-fonce);
}

/* Le port en fond. Illustration vectorielle plutot que photographie :
   6 Ko, libre de droits, nette a toutes les tailles - et surtout,
   elle nous appartient. Une vraie photo deposee en
   assets/img/port-dakar.jpg prend sa place (voir vitrine.js).

   Le degrade de masque fait toute la lisibilite : au lieu de poser un
   voile sombre PAR-DESSUS le dessin - ce qui salit le dessin et le
   texte a la fois - on efface le dessin LUI-MEME sous la colonne de
   texte. A gauche il n'y a rien, a droite le port est net. Le titre
   n'a plus rien a traverser. */
.hero-fond {
    position: absolute; inset: 0;
    /* Longhands et non raccourci : le script remplace la seule
       background-image quand une photo existe, et il doit heriter de
       ce cadrage-la, pas d'un « auto » laisse par un raccourci. */
    background-image: url('../img/port-dakar.svg');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: .95;
    -webkit-mask-image: linear-gradient(104deg, transparent 0%, transparent 48%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.85) 90%, #000 100%);
            mask-image: linear-gradient(104deg, transparent 0%, transparent 48%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.5) 76%, rgba(0,0,0,.85) 90%, #000 100%);
}
/* Une photographie porte beaucoup plus de detail qu'un dessin : elle
   s'efface un peu plus tot, et passe sous un voile leger. */
.hero-fond.avec-photo {
    opacity: 1;
    -webkit-mask-image: linear-gradient(104deg, transparent 0%, transparent 44%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 74%, rgba(0,0,0,.8) 88%, #000 100%);
            mask-image: linear-gradient(104deg, transparent 0%, transparent 44%, rgba(0,0,0,.14) 58%, rgba(0,0,0,.46) 74%, rgba(0,0,0,.8) 88%, #000 100%);
}
.hero-fond.avec-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(6,26,51,.5) 0%, rgba(6,26,51,.28) 60%, transparent 100%);
}

/* Trame géométrique : la silhouette empilée des conteneurs. */
.hero-trame {
    position: absolute; inset: 0; opacity: .1; pointer-events: none;
    background-image:
        linear-gradient(rgba(212,160,23,.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,160,23,.9) 1px, transparent 1px);
    background-size: 132px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 78% 40%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 78% 40%, #000 0%, transparent 72%);
}

/* Radar discret, comme une veille qui ne s'arrête pas. */
.radar {
    position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
    width: min(38vw, 440px); aspect-ratio: 1; pointer-events: none; opacity: .5;
}
.radar-cercle {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(212,160,23,.28);
}
.radar-cercle:nth-child(2) { inset: 14%; }
.radar-cercle:nth-child(3) { inset: 28%; }
.radar-cercle:nth-child(4) { inset: 42%; }
.radar-balayage {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(212,160,23,.30) 28deg, transparent 56deg);
    animation: tourner 6s linear infinite;
}
.radar-echo {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--or); box-shadow: 0 0 14px var(--or);
    animation: clignoter 3.4s ease-in-out infinite;
}
@keyframes tourner   { to { transform: rotate(360deg); } }
@keyframes clignoter { 0%,100% { opacity: .15; } 50% { opacity: 1; } }

.hero-contenu { position: relative; z-index: 2; padding: 128px 0 72px; max-width: 760px; }
.hero h1 {
    font-size: clamp(2.3rem, 6vw, 4.2rem); color: #fff; margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--or); }
.hero p {
    font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(238,242,246,.82);
    max-width: 58ch; margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-bandeau {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(6,26,51,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-bandeau .conteneur {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.hero-fait { padding: 18px 12px; }
.hero-fait dt {
    font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-bottom: .25rem;
}
.hero-fait dd { font-size: 13.5px; font-weight: 700; color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════ */
.section { padding: clamp(72px, 9vw, 130px) 0; }
.section-sombre { background: var(--marine); color: var(--encre-inv); }
.section-sombre h2 { color: #fff; }
.section-sombre .chapo { color: rgba(238,242,246,.72); }

.entete-section { max-width: 760px; margin-bottom: 3.2rem; }

/* ── Piliers ── */
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pilier {
    position: relative; overflow: hidden;
    background: var(--fond-2); border: 1px solid var(--ligne);
    border-radius: var(--rayon); padding: 34px 28px 30px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pilier::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--or), var(--emeraude));
    transform: scaleX(0); transform-origin: left; transition: transform var(--transition);
}
.pilier:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--or) 45%, var(--ligne));
    box-shadow: 0 22px 48px rgba(11,37,69,.13);
}
.pilier:hover::before { transform: scaleX(1); }

.pilier-numero {
    position: absolute; right: 22px; top: 18px;
    font-size: 58px; font-weight: 900; line-height: 1;
    color: color-mix(in srgb, var(--or) 14%, transparent);
}
.pilier-icone {
    width: 54px; height: 54px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--marine) 8%, transparent);
    color: var(--marine); margin-bottom: 1.35rem;
    transition: background var(--transition), color var(--transition);
}
.pilier:hover .pilier-icone { background: var(--marine); color: var(--or); }
.pilier h3 { margin-bottom: .6rem; }
.pilier p  { font-size: 14.5px; color: var(--encre-2); }

.pilier-liste { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 6px; }
.jeton {
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: .28rem .6rem; border-radius: 99px;
    background: color-mix(in srgb, var(--emeraude) 12%, transparent);
    color: var(--emeraude);
}

/* ── Chiffres ── */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.chiffre {
    text-align: center; padding: 30px 16px;
    border-right: 1px solid rgba(255,255,255,.12);
}
.chiffre:last-child { border-right: 0; }
.chiffre-valeur {
    font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; line-height: 1;
    color: var(--or); letter-spacing: -.03em;
}
.chiffre-valeur .unite { font-size: .46em; margin-left: .12em; }
.chiffre-libelle {
    margin-top: .65rem; font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: rgba(238,242,246,.66);
}

/* ── Le principe : six signaux absorbés par un seul bloc ────────────
   Une boucle de 22 s, entièrement en CSS : ni script, ni image.

   Le décalage entre les cartes ne vient pas de six animations
   différentes mais d'un simple animation-delay par carte. Sur une
   animation infinie, un délai positif ne retarde pas : il décale la
   phase, une fois pour toutes. Une seule règle @keyframes suffit
   donc là où l'on en écrirait six.

   La scène est dessinée dans un repère fixe de 560 × 510, réduit
   d'un coup par transform sur les petits écrans : les positions
   restent des nombres ronds, et rien ne se décale en chemin. */
.socle-section { padding-top: clamp(56px, 6vw, 90px); }
.socle-scene {
    position: relative; width: 100%; height: 530px; overflow: hidden;
    margin-top: 2.6rem;
}
.socle-stage {
    position: absolute; top: 0; left: 50%;
    width: 560px; height: 510px;
    transform: translateX(-50%) scale(var(--echelle, 1));
    transform-origin: center top;
}

.socle-etiquette {
    position: absolute; left: 4px; top: 0; margin: 0;
    font-size: 10px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-3);
}

/* Un emplacement et sa carte occupent la même case : le fantôme est
   dessous, la carte par-dessus. Quand la carte s'en va, le fantôme
   se découvre de lui-même — il n'y a aucune animation à écrire. */
.socle-place, .socle-signal {
    position: absolute; left: 6px;
    top: calc(64px + var(--rang) * 58px);
    width: 208px; height: 46px;
    display: flex; align-items: center; gap: 10px;
    padding: 0 13px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.25;
}
.socle-fantome {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 100%;
}
.socle-place {
    background: color-mix(in srgb, var(--encre) 4%, transparent);
    border: 1px dashed var(--ligne);
    color: var(--encre-3);
}
.socle-place i { font-style: normal; text-decoration: line-through; opacity: .8; }
.socle-tampon {
    margin-left: auto; flex: none;
    font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--emeraude);
    opacity: 0; animation: socle-tampon 22s ease-in-out infinite both;
}

.socle-signal {
    background: var(--fond-2);
    border: 1px solid var(--ligne);
    box-shadow: 0 8px 20px rgba(11,22,34,.10);
    color: var(--encre); font-weight: 600;
    animation: socle-absorber 22s cubic-bezier(.65,.02,.35,1) infinite both;
    animation-delay: calc(var(--rang) * .55s);
}
.socle-pastille {
    width: 9px; height: 9px; border-radius: 2px; flex: none;
    background: var(--or);
}
.socle-signal:nth-child(even) .socle-pastille { background: var(--emeraude); }

/* Le point de convergence. */
.socle-bloc {
    position: absolute; left: 252px; top: 8px; width: 302px;
    padding: 26px 26px 22px; border-radius: 20px;
    background: linear-gradient(155deg, var(--marine-clair) 0%, var(--marine) 55%, var(--marine-fonce) 100%);
    color: #fff;
    box-shadow: 0 22px 54px rgba(11,37,69,.32);
    animation: socle-halo 22s ease-in-out infinite;
}
.socle-sigle {
    margin: 0 0 .35rem; font-size: 11px; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase; color: var(--or);
}
.socle-titre {
    margin: 0 0 1.25rem; font-size: 25px; font-weight: 800;
    line-height: 1.12; letter-spacing: -.015em;
}
.socle-rangs { display: flex; flex-direction: column; gap: 9px; }
.socle-rang {
    display: flex; align-items: center; gap: 11px; margin: 0;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,.10);
    font-size: 13.5px; font-weight: 600;
    animation: socle-rang 22s ease-in-out infinite both;
    animation-delay: calc(var(--rang) * .55s);
}
.socle-coche {
    width: 22px; height: 22px; border-radius: 999px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--or); color: var(--marine-fonce);
    font-size: 12px; font-weight: 900;
}
.socle-corps {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.22);
    display: flex; flex-wrap: wrap; gap: 6px;
}
.socle-corps-jeton {
    display: inline-flex; align-items: center;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(255,255,255,.15);
    font-size: 11px; font-weight: 700;
}

/* La carte apparaît, se tient un instant, puis file vers le bloc en
   rapetissant — absorbée, pas effacée. --dy porte ce qu'il lui reste
   à parcourir verticalement. */
@keyframes socle-absorber {
    0%, 6%    { opacity: 0; transform: translate(-14px, 0) scale(.96); }
    12%       { opacity: 1; transform: translate(0, 0) scale(1); }
    38%       { opacity: 1; transform: translate(0, 0) scale(1); }
    50%       { opacity: 0; transform: translate(300px, var(--dy)) scale(.45); }
    100%      { opacity: 0; transform: translate(300px, var(--dy)) scale(.45); }
}
@keyframes socle-rang {
    0%, 42%   { opacity: .28; transform: translateX(-6px); }
    52%, 92%  { opacity: 1;   transform: translateX(0); }
    100%      { opacity: .28; transform: translateX(-6px); }
}
@keyframes socle-tampon {
    0%, 48%   { opacity: 0; }
    56%, 92%  { opacity: 1; }
    100%      { opacity: 0; }
}
@keyframes socle-halo {
    0%, 100%  { box-shadow: 0 22px 54px rgba(11,37,69,.30); }
    55%       { box-shadow: 0 26px 66px rgba(212,160,23,.30); }
}

/* Le slogan, en conclusion de la démonstration. */
.socle-slogan {
    margin: 2.4rem auto 0; max-width: 620px; text-align: center;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 800;
    letter-spacing: -.01em; color: var(--encre);
}
.socle-slogan span { color: var(--or); }

/* ── L'unité : le propos à gauche, la fiche signalétique à droite ──
   Deux registres de lecture différents : on lit le texte, on consulte
   la fiche. Les mettre côte à côte laisse le visiteur choisir. */
.identite {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 42px; align-items: start;
}
.identite-propos p { font-size: 15.5px; color: var(--encre-2); margin-bottom: 1.1rem; }
.identite-propos strong { color: var(--encre); font-weight: 700; }

/* Les trois corps de l'État, à égalité — aucun n'est l'invité de
   l'autre : c'est tout le sens du mot « mixte ». */
.corps-etat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.corps-jeton {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .62rem 1.05rem; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    color: var(--marine);
    background: color-mix(in srgb, var(--marine) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--marine) 16%, transparent);
}
.corps-jeton::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--or); flex: none;
}
@media (prefers-color-scheme: dark) {
    .corps-jeton {
        color: var(--encre);
        background: color-mix(in srgb, #ffffff 6%, transparent);
        border-color: color-mix(in srgb, #ffffff 14%, transparent);
    }
}

/* La fiche : un encart de référence, pas un paragraphe de plus. */
.fiche {
    margin: 0; padding: 8px 26px;
    background: var(--fond-2); border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    border-top: 3px solid var(--or);
}
.fiche-ligne { padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.fiche-ligne:last-child { border-bottom: 0; }
.fiche dt {
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-3); margin-bottom: .38rem;
}
.fiche dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--encre); }
.fiche-note { display: block; margin-top: .25rem; font-size: 12.5px; font-weight: 500; color: var(--encre-2); }

/* ── La chaîne de contrôle ──────────────────────────────────────────
   Six maillons numérotés. Le trait qui les relie est tracé en fond
   de grille : il dit « suite » sans qu'on ait à l'écrire. */
.chaine {
    list-style: none; position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
/* Le fil conducteur, derrière les cartes, sur chaque rangée. */
.chaine::before {
    content: ''; position: absolute; z-index: 0;
    left: 12%; right: 12%; top: 58px; height: 2px;
    background: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--or) 55%, transparent) 0 8px,
        transparent 8px 16px);
}
.maillon {
    position: relative; z-index: 1;
    background: var(--fond-2); border: 1px solid var(--ligne);
    border-radius: var(--rayon); padding: 30px 26px 28px;
    transition: transform .4s cubic-bezier(.22,.8,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.maillon:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--or) 45%, var(--ligne));
    box-shadow: 0 18px 44px rgba(11,22,34,.11);
}
/* Le rang, en gros et en clair : il se lit avant le texte. */
.maillon-rang {
    position: absolute; top: 16px; right: 22px;
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    letter-spacing: -.04em;
    color: color-mix(in srgb, var(--or) 20%, transparent);
    transition: color .4s ease;
}
.maillon:hover .maillon-rang { color: color-mix(in srgb, var(--or) 46%, transparent); }
.maillon-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: color-mix(in srgb, var(--marine) 8%, transparent);
    color: var(--marine); margin-bottom: 1.3rem;
    transition: background .4s ease, color .4s ease;
}
.maillon-icone svg { width: 26px; height: 26px; }
.maillon:hover .maillon-icone { background: var(--marine); color: var(--or); }
.maillon h3 {
    font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em;
    margin-bottom: .55rem;
}
.maillon p { font-size: 14.5px; color: var(--encre-2); margin: 0; }
.maillon strong { color: var(--encre); font-weight: 700; }

/* Les deux issues possibles, en clôture de chaîne. */
.chaine-issue {
    margin-top: 22px; padding: 26px 30px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 26px; flex-wrap: wrap;
    border-radius: var(--rayon);
    background: color-mix(in srgb, var(--marine) 5%, var(--fond-2));
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--or);
}
.chaine-issue-texte {
    margin: 0; flex: 1 1 420px; font-size: 14.5px; color: var(--encre-2);
}
.chaine-issue-texte strong { display: block; color: var(--encre); font-weight: 800; margin-bottom: .3rem; }
.chaine-issues { display: flex; gap: 10px; flex-wrap: wrap; }
.issue {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.05rem; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid transparent; white-space: nowrap;
}
.issue svg { width: 15px; height: 15px; }
.issue-ok {
    color: var(--emeraude);
    background: color-mix(in srgb, var(--emeraude) 12%, transparent);
    border-color: color-mix(in srgb, var(--emeraude) 32%, transparent);
}
.issue-stop {
    color: #a32a33;
    background: color-mix(in srgb, #a32a33 10%, transparent);
    border-color: color-mix(in srgb, #a32a33 30%, transparent);
}

/* ── Un cas concret ─────────────────────────────────────────────────
   Le récit à gauche, le bilan chiffré à droite. Un lecteur pressé
   lit la colonne de droite et sait l'essentiel ; un lecteur curieux
   lit la gauche et comprend comment on y est arrivé. */
.cas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 46px; align-items: start; }
.cas-recit p {
    font-size: 15.5px; color: rgba(238,242,246,.78); margin-bottom: 1.15rem;
}
.cas-recit strong { color: #fff; font-weight: 700; }
/* Terme de metier, pas un lien : l'italique le dit mieux que la
   seule couleur, qui se confond avec un lien dore. */
.cas-recit em { color: var(--or); font-style: italic; font-weight: 500; }
/* La suite judiciaire est d'un autre ordre que le récit : elle se
   détache au lieu de s'y fondre. */
.cas-suite {
    margin-top: 1.7rem; padding: 18px 22px;
    border-left: 3px solid var(--or);
    background: rgba(255,255,255,.05);
    border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
}

.cas-bilan {
    padding: 26px 28px 22px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--rayon);
}
.cas-bilan-titre {
    font-size: 10.5px; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; color: var(--or); margin-bottom: .4rem;
}
.cas-bilan dl { margin: 0; }
.cas-ligne {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.cas-ligne:last-of-type { border-bottom: 0; }
.cas-ligne dt {
    font-size: 12.5px; color: rgba(238,242,246,.6); line-height: 1.35;
}
.cas-ligne dd {
    margin: 0; font-size: 1.15rem; font-weight: 800; color: #fff;
    white-space: nowrap; letter-spacing: -.01em;
}
/* La valeur totale est la ligne qu'on retient : elle prend l'or. */
.cas-ligne-forte { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); }
.cas-ligne-forte dt { color: rgba(238,242,246,.8); font-weight: 700; }
.cas-ligne-forte dd { color: var(--or); font-size: 1.32rem; }
.cas-unite { font-size: .58em; font-weight: 700; margin-left: .2em; }
/* D'où viennent ces chiffres : une affirmation sans source n'a pas
   sa place sur un site d'administration. */
.cas-source {
    margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1);
    font-size: 11.5px; line-height: 1.5; color: rgba(238,242,246,.42);
}

/* ── Lecteurs vidéo ─────────────────────────────────────────────────
   L'iframe est écrite directement dans le HTML, avec loading="lazy" :
   elle fonctionne sans JavaScript, et YouTube n'est contacté que
   lorsque le lecteur approche de l'écran — le haut de page reste
   rapide. Le cadre garde un fond aux couleurs du site, visible le
   temps que le lecteur s'affiche. */
.video { margin: 0 auto; max-width: 940px; }
.video-cadre {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--rayon);
    background: linear-gradient(155deg, #061a33 0%, #0b2545 52%, #061a33 100%);
    box-shadow: 0 24px 60px rgba(11,22,34,.22);
}
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Repli hors serveur : le lecteur devient une vignette cliquable.
   Elle doit ressembler à une vidéo, pas à une panne. */
.video-lien {
    position: absolute; inset: 0; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    background-size: cover; background-position: center;
    transition: filter var(--transition);
}
.video-lien::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(6,26,51,.42); transition: background var(--transition);
}
.video-lien.avec-vignette::before { background: rgba(6,26,51,.3); }
.video-lien:hover::before { background: rgba(6,26,51,.18); }
.video-lien > * { position: relative; z-index: 1; }
.video-lecture {
    width: 74px; height: 74px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--or); color: var(--marine-fonce);
    box-shadow: 0 10px 34px rgba(212,160,23,.42);
    transition: transform var(--transition), box-shadow var(--transition);
}
.video-lecture svg { width: 34px; height: 34px; margin-left: 3px; }
.video-lien:hover .video-lecture { transform: scale(1.07); box-shadow: 0 14px 42px rgba(212,160,23,.55); }
.video-lien-mention {
    font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #fff; text-shadow: 0 1px 12px rgba(6,26,51,.8);
}

.video-pied {
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
    margin-top: 16px; font-size: 12.5px; color: var(--encre-2);
}
.video-pied strong { color: var(--encre); font-weight: 700; }
.video-pied a { color: var(--marine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .video-pied a { color: var(--or); } }
.video-avis { color: var(--encre-3); }

/* Le meme lecteur, pose dans la section sombre du cas concret : il
   y est une piece a conviction, pas le sujet — d'ou la largeur
   reduite et le pied en couleurs claires. */
.video-dans-cas { margin-top: 46px; max-width: 760px; }
.video-pied-sombre { color: rgba(238,242,246,.6); }
.video-pied-sombre strong { color: #fff; }
.video-pied-sombre a { color: var(--or); }
.video-pied-sombre .video-avis { color: rgba(238,242,246,.38); }

/* ── Partenaires ── */
.bandeau-partenaires {
    overflow: hidden; position: relative;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.defile { display: flex; gap: 60px; width: max-content; animation: defiler 34s linear infinite; }
.bandeau-partenaires:hover .defile { animation-play-state: paused; }
@keyframes defiler { to { transform: translateX(-50%); } }
.partenaire {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--encre-3); white-space: nowrap;
    filter: grayscale(1); opacity: .62; transition: opacity var(--transition), filter var(--transition);
}
.partenaire:hover { filter: grayscale(0); opacity: 1; color: var(--marine); }
/* Monogramme tenant lieu de logo. Il doit avoir l'air voulu, pas
   l'air d'une image cassée : d'où la forme pleine et l'anneau fin,
   qui évoquent un cachet plutôt qu'un cadre vide. */
.partenaire-sigle {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; letter-spacing: 0; font-style: normal;
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 42%, transparent);
}
/* Un logo déposé remplace le monogramme : même gabarit, sans
   déformation quelle que soit la forme du fichier. */
.partenaire img { height: 38px; width: auto; max-width: 92px; object-fit: contain; }

/* ── Citation ── */
/* ── La devise ──────────────────────────────────────────────────────
   Trois mots occupent la page. Le trait doré au-dessus et au-dessous
   les isole du reste : une devise encadrée se lit comme une devise,
   la même phrase au fil du texte n'est qu'une phrase. */
.devise-section {
    background: var(--marine-fonce); color: var(--encre-inv);
    position: relative; overflow: hidden;
}
/* Rappel discret de la trame du hero, pour relier les deux bouts. */
.devise-section::before {
    content: ''; position: absolute; inset: 0; opacity: .07; pointer-events: none;
    background-image:
        linear-gradient(rgba(212,160,23,.9) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,160,23,.9) 1px, transparent 1px);
    background-size: 132px 56px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 0%, transparent 72%);
}
.devise {
    position: relative; z-index: 1;
    max-width: 760px; margin: 0 auto; text-align: center;
}
/* ── Le blason mis en scène ─────────────────────────────────────────
   Une seule image — le blason détouré — et sept couches de CSS
   autour. Rien n'est décoratif au hasard :

     · les trois ondes    = la veille, qui ne s'interrompt jamais
     · le balayage        = le ciblage, qui passe et repasse
     · les deux anneaux   = l'analyse, en sens contraires
     · les trois points   = Douanes, Police, Gendarmerie en orbite
     · le halo            = ce que l'unité protège

   Tout tient dans un carré de 260 px, réduit sur mobile par une
   seule variable. */
.blason {
    position: relative; width: 300px; height: 300px;
    margin: .6rem auto 3.9rem;
    display: grid; place-items: center;
    zoom: var(--blason-taille, 1);
}

/* Les ondes : trois cercles qui naissent du blason et s'effacent en
   s'élargissant. Le décalage entre eux tient à un animation-delay,
   pas à trois règles différentes. */
.blason-onde {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(212,160,23,.75);
    opacity: 0;
    animation: blason-onde 4.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.blason-onde:nth-child(2) { animation-delay: 1.6s; }
.blason-onde:nth-child(3) { animation-delay: 3.2s; }

/* Le balayage : un secteur qui tourne, comme sur un radar. */
.blason-balayage {
    position: absolute; inset: -6%; border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(212,160,23,.30) 26deg,
        rgba(212,160,23,.05) 52deg,
        transparent 62deg);
    animation: blason-tourner 7s linear infinite;
    -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 44%);
            mask-image: radial-gradient(circle, transparent 42%, #000 44%);
}

/* Deux anneaux en pointillé, tournant en sens contraires : deux
   lectures d'un même dossier, jamais tout à fait alignées. */
.blason-anneau { position: absolute; border-radius: 50%; }
.blason-anneau-ext {
    inset: -11%;
    border: 1px dashed rgba(212,160,23,.42);
    animation: blason-tourner 26s linear infinite;
}
.blason-anneau-int {
    inset: 4%;
    border: 1px dotted rgba(238,242,246,.28);
    animation: blason-tourner 18s linear infinite reverse;
}

/* Les trois corps de l'État, en orbite sur l'anneau extérieur. */
.blason-orbite {
    position: absolute; inset: -11%; border-radius: 50%;
    animation: blason-tourner 26s linear infinite;
}
.blason-satellite {
    position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px; border-radius: 50%;
    background: var(--or);
    box-shadow: 0 0 0 3px rgba(212,160,23,.18), 0 0 14px rgba(212,160,23,.9);
    transform: rotate(var(--angle)) translateY(-150px);
}

/* Le halo, qui respire sous le blason. */
.blason-halo {
    position: absolute; width: 72%; height: 72%; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,.46) 0%, rgba(212,160,23,.12) 45%, transparent 72%);
    filter: blur(14px);
    animation: blason-respirer 6s ease-in-out infinite;
}

.blason-image {
    position: relative; z-index: 2;
    width: 78%; height: auto;
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.5))
            drop-shadow(0 0 22px rgba(212,160,23,.28));
    animation: blason-respirer 6s ease-in-out infinite;
}

/* L'entrée : le blason se pose quand la section arrive à l'écran.
   On ne le masque PAS au repos — le bloc « .apparait » qui l'entoure
   s'en charge déjà. Le masquer ici le rendrait invisible pour qui
   navigue sans JavaScript, puisque plus personne ne viendrait poser
   la classe « .visible » qui le révèle. */
.devise.apparait.visible .blason-image {
    animation: blason-poser 1.1s cubic-bezier(.22,1.2,.36,1) both,
               blason-respirer 6s ease-in-out 1.1s infinite;
}

/* La couronne graduée : de petits traits tout autour, comme le
   pourtour d'un instrument de mesure. Un seul dégradé conique
   répété les dessine tous — pas trente-six éléments. */
.blason-graduations {
    position: absolute; inset: -18%; border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(212,160,23,.55) 0deg 0.5deg,
        transparent 0.5deg 6deg);
    -webkit-mask-image: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
            mask-image: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
    animation: blason-tourner 60s linear infinite;
}

/* L'éclat : une bande de lumière qui traverse le blason, comme sur
   un sceau que l'on incline. Découpée au disque pour ne pas déborder. */
.blason-eclat {
    position: absolute; z-index: 3; inset: 11%; border-radius: 50%;
    overflow: hidden; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 70%);
            mask-image: radial-gradient(circle, #000 68%, transparent 70%);
}
.blason-eclat::before {
    content: ''; position: absolute; top: -60%; left: -120%;
    width: 55%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: rotate(18deg);
    animation: blason-eclat 6.5s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes blason-eclat {
    0%, 62%  { left: -120%; }
    88%, 100% { left: 190%; }
}

@keyframes blason-onde {
    0%   { opacity: 0;   transform: scale(.72); }
    12%  { opacity: .85; }
    100% { opacity: 0;   transform: scale(1.85); }
}
@keyframes blason-tourner { to { transform: rotate(360deg); } }
@keyframes blason-respirer {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}
@keyframes blason-poser {
    0%   { opacity: 0; transform: scale(.7) rotate(-9deg); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}


.devise-sur {
    margin: 0 0 1.5rem; font-size: 10.5px; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase; color: var(--or);
}
.devise-texte {
    margin: 0; padding: 1.7rem 0;
    border-top: 1px solid rgba(212,160,23,.32);
    border-bottom: 1px solid rgba(212,160,23,.32);
    font-size: clamp(2rem, 6.4vw, 3.9rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -.035em; color: #fff;
}
.devise-texte span { color: var(--or); }
.devise-glose {
    margin: 1.7rem auto 0; max-width: 54ch;
    font-size: 15px; line-height: 1.65; color: rgba(238,242,246,.66);
}

/* La même devise, en signature, sous le nom du pied de page. */
.pied-devise {
    display: block; margin-top: .3rem;
    font-style: normal; font-size: 11px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: var(--or);
}

/* ── Pied de page ── */
.pied { background: var(--marine-fonce); color: rgba(238,242,246,.72); padding: 72px 0 0; }
.pied-haut {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 42px;
    padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.pied h4 {
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--or); margin-bottom: 1.1rem;
}
.pied a { font-size: 13.5px; display: block; padding: .3rem 0; transition: color var(--transition); }
.pied a:hover { color: var(--or); }
.pied-marque { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2rem; }
.pied-marque img { width: 56px; height: 56px; object-fit: contain; }
.pied-marque strong { display: block; color: #fff; font-size: 16px; font-weight: 900; }
.pied-marque span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.avertissement {
    margin-top: 1.4rem; padding: 14px 16px; border-radius: var(--rayon-sm);
    border-left: 3px solid var(--or); background: rgba(212,160,23,.08);
    font-size: 12.5px; line-height: 1.65; color: rgba(238,242,246,.78);
}
.pied-bas {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    padding: 22px 0 30px; font-size: 11.5px; color: rgba(238,242,246,.45);
}
/* Le drapeau etait fait de trois <i> colores : ni etoile, ni les bonnes
   proportions (3.5:1 au lieu de 3:2). Un SVG les tient toutes les deux,
   pour le meme poids. */
/* Signature du concepteur. Discrete par defaut — ce pied appartient
   a l'unite, pas a nous — mais elle se revele au survol. */
/* nowrap : coincee entre deux voisins, la signature se coupait en
   deux lignes (« by » au-dessus de « GRAFTIC »). */
.signature { letter-spacing: .04em; white-space: nowrap; }
.signature a {
    /* display:inline contre la regle « .pied a { display:block } »,
       faite pour les colonnes de liens du pied : sans elle, GRAFTIC
       passait a la ligne sous « by ». */
    display: inline;
    color: rgba(238,242,246,.62); font-weight: 800; letter-spacing: .1em;
    text-decoration: none; transition: color var(--transition);
}
.signature a:hover { color: var(--or); }
.signature a:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 3px; }

.drapeau {
    display: inline-block; vertical-align: -3px;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}

/* ══════════════════════════════════════════════════════════════════
   APPARITIONS AU DÉFILEMENT
   ══════════════════════════════════════════════════════════════════ */
.apparait { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.apparait.visible { opacity: 1; transform: none; }
.apparait[data-retard="1"] { transition-delay: .09s; }
.apparait[data-retard="2"] { transition-delay: .18s; }
.apparait[data-retard="3"] { transition-delay: .27s; }

/* Un visiteur qui réduit les animations ne subit rien. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .apparait { opacity: 1; transform: none; transition: none; }
    /* Animations réduites : la scène s'arrête sur son état
       d'arrivée — les signaux absorbés, le bloc complet. */
    .socle-signal { animation: none; opacity: 0; }
    .socle-rang   { animation: none; opacity: 1; transform: none; }
    .socle-tampon { animation: none; opacity: 1; }
    .socle-bloc   { animation: none; }
    /* Le blason reste posé, net, sans rien qui tourne. */
    .blason-onde, .blason-balayage, .blason-anneau,
    .blason-orbite, .blason-halo, .blason-graduations { animation: none; }
    .blason-eclat { display: none; }
    .blason-onde { opacity: .25; }
    .blason-image, .devise.apparait.visible .blason-image {
        animation: none; opacity: 1; transform: none;
    }
    .blason-onde, .blason-balayage { opacity: .22; }
    .radar-balayage, .radar-echo, .defile { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   ADAPTATION AUX ÉCRANS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
    .piliers  { grid-template-columns: 1fr; }
    .identite { grid-template-columns: 1fr; gap: 30px; }
    .socle-stage { --echelle: .82; }
    .blason { --blason-taille: .88; }
    .socle-scene { height: 440px; }
    .cas      { grid-template-columns: 1fr; gap: 30px; }
    .chiffres { grid-template-columns: repeat(2, 1fr); }
    .chiffre:nth-child(2n) { border-right: 0; }
    .chaine   { grid-template-columns: repeat(2, 1fr); }
    .chaine::before { display: none; }
    .pied-haut { grid-template-columns: 1fr; gap: 30px; }
    .radar { opacity: .25; right: -14%; }
}

@media (max-width: 720px) {
    .nav {
        position: fixed; inset: 64px 14px auto 14px;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--fond-2); border: 1px solid var(--ligne);
        border-radius: var(--rayon); padding: 10px;
        box-shadow: 0 20px 50px rgba(11,22,34,.2);
        display: none;
    }
    .nav.ouvert { display: flex; }
    .lien-nav { color: var(--encre); padding: .7rem .9rem; }
    .barre:not(.posee) .lien-nav { color: var(--encre); }
    .burger { display: flex; align-items: center; justify-content: center; }
    .nav .bouton { justify-content: center; margin-top: 6px; }
    .choix-langue { justify-content: center; margin: 6px 0 2px; }
    .choix-langue button { flex: 1; }

    .hero-bandeau .conteneur { grid-template-columns: repeat(2, 1fr); }
    /* Le bandeau de faits était posé en absolu au bas du hero : sur un
       téléphone il recouvrait les boutons. Il reprend le fil normal,
       et le hero cesse de forcer la hauteur d'écran. */
    /* display:block et non flex : sorti de l'absolu, le bandeau
       deviendrait sinon un second élément de la rangée, posé à côté
       du titre au lieu de passer dessous. */
    .hero { min-height: auto; display: block; }
    .hero-contenu { padding: 116px 0 34px; }
    .hero-bandeau { position: static; }

    /* Sur mobile le texte prend toute la largeur : le dessin ne peut
       plus s'effacer vers la gauche, il s'efface donc vers le haut et
       ne reste qu'en pied de hero, sous les boutons. */
    .hero-fond, .hero-fond.avec-photo {
        opacity: .55;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(0,0,0,.3) 72%, rgba(0,0,0,.72) 86%, #000 100%);
                mask-image: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(0,0,0,.3) 72%, rgba(0,0,0,.72) 86%, #000 100%);
    }

    .socle-stage { --echelle: .58; }
    .blason { --blason-taille: .7; }
    .socle-scene { height: 320px; }

    .chaine { grid-template-columns: 1fr; }
    .chaine-issue { flex-direction: column; align-items: flex-start; padding: 22px; }
    .chiffres { grid-template-columns: 1fr; }
    .chiffre { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .chiffre:last-child { border-bottom: 0; }
}

/* ── Impression ── */
@media print {
    .barre, .radar, .hero-trame, .bouton { display: none !important; }
    body { background: #fff; color: #000; }
    .hero { min-height: auto; }
}