/* ═══════════════════════════════════════════════════════════════════
   khembo75.ch — monde « Salle de contrôle », composition « Plein écran ».
   Redesign du 15 septembre 2026. Couleurs PRÉLEVÉES au pixel sur la
   maquette approuvée (surfaces/contrat-v2.md). Aucune devinée.

   La thèse : une salle d'opérations la nuit. Tout ce qui brille est utile.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --nuit-1: #07111B;              /* ciel, tout en haut */
  --nuit-2: #0A161F;              /* la base de la page */
  --nuit-3: #0B1821;              /* la carte, tout en bas */
  --verre: rgba(12, 24, 35, .74);
  --verre-bord: rgba(255, 255, 255, .09);
  --verre-reflet: rgba(255, 255, 255, .16);
  --champ: rgba(255, 255, 255, .06);
  --champ-bord: rgba(255, 255, 255, .18);

  /* Le bleu du LOGO éclaire, il n'écrit pas : 4,4:1 avec du blanc, c'est
     insuffisant pour du texte courant. Le bleu d'action en est dérivé,
     même teinte 208°, assez sombre pour porter du blanc à 5,3:1. */
  --bleu-logo: #497FAE;
  --bleu-action: #3B6B94;
  --lueur: rgba(73, 127, 174, .45);
  --lueur-forte: rgba(73, 127, 174, .75);
  --ambre: #BE8A41;

  --blanc: #FFFFFF;
  --gris: #B0B9C2;                /* libellés, texte courant sur nuit */
  --gris-doux: #8A96A3;           /* mentions, 6,1:1 sur nuit */
  --filet: rgba(255, 255, 255, .1);
  --filet-fort: rgba(255, 255, 255, .22);

  --large: 1180px;
  --lisible: 62ch;
  --rayon: 12px;

  /* Un ressort, exprimé en linear() : c'est la courbe de tout ce qui se pose. */
  --ressort: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.5%, .721 24.3%, .799 27.2%,
                    .87 30.6%, .917 33.6%, .96 37.9%, .985 42.5%, 1.001 47.8%, 1.005 53%, 1);
  --sortie: cubic-bezier(.4, 0, 1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: 84px;
  color-scheme: dark;
}
@media (max-width: 760px) { html { scroll-padding-top: 124px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--blanc);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, var(--nuit-1) 0, var(--nuit-2) 40%, var(--nuit-3) 100%) fixed;
  background-color: var(--nuit-2);
}

h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.02em; font-weight: 800; font-variation-settings: 'wdth' 112; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
.conteneur { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }

/* Ce qui se mesure est monospace. Ce qui se promet est en gras. */
.chiffre, input, output, .tableau td, .tableau th[scope="col"] {
  font-family: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wdth' 90;
}

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr:focus {
  position: fixed; top: .75rem; left: .75rem; z-index: 100; width: auto; height: auto;
  margin: 0; clip: auto; padding: .75rem 1.1rem; background: var(--bleu-action);
  color: #fff; font-weight: 700; text-decoration: none; border-radius: 6px;
}

/* Les surfaces que le navigateur dessine à notre place appartiennent au
   design, pas au système. */
::selection { background: var(--bleu-logo); color: #fff; }
input, textarea, select { caret-color: var(--bleu-logo); }
html { scrollbar-color: #2A3A48 var(--nuit-1); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--nuit-1); }
::-webkit-scrollbar-thumb { background: #2A3A48; border: 3px solid var(--nuit-1); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--bleu-action); }
::marker { color: var(--bleu-logo); }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .07em; }
:focus-visible { outline: 3px solid var(--bleu-logo); outline-offset: 3px; }

/* Les flèches sont dessinées, pas prises dans la police. */
.fleche { display: inline-block; width: 1.15em; height: .55em; vertical-align: baseline; overflow: visible; }

/* ── L'en-tête : une lame de verre, collée en haut ── */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 17, 27, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--filet);
}
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; }
.entete-logo { display: flex; align-items: center; min-height: 44px; }
.entete-logo img { height: 38px; width: auto; }
.entete-nav { display: flex; align-items: center; gap: .15rem; }
.entete-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .8rem;
  text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--gris);
  border-radius: 8px; transition: color .18s, background-color .18s;
}
.entete-nav a:hover { color: var(--blanc); background: rgba(255, 255, 255, .06); }
.cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  background: var(--bleu-action); color: #fff; font-weight: 700; font-size: 14.5px;
  text-decoration: none; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 22px rgba(73, 127, 174, .25);
  transition: background-color .18s, box-shadow .18s, transform .12s;
}
.cta:hover { background: var(--bleu-logo); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 28px rgba(73, 127, 174, .4); }
.cta:active { transform: scale(.98); }
@media (max-width: 760px) {
  .entete-barre { flex-wrap: wrap; gap: .3rem .8rem; padding-block: .45rem; }
  .entete-logo { order: 1; }
  .entete-barre > .cta { order: 2; }
  .entete-nav { order: 3; width: 100%; justify-content: space-between; gap: .1rem; }
  .entete-nav a { font-size: 13.5px; padding: .5rem .4rem; white-space: nowrap; }
}

/* ── Le sélecteur de langue ── */
.langues { display: flex; align-items: center; gap: .1rem; }
.langues a, .langues .langue-active {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .55rem;
  font-family: 'Martian Mono', monospace; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  border-radius: 6px; transition: color .18s, background-color .18s;
}
/* Le nom entier sur grand écran, le code ISO sur petit. */
.langue-court { display: none; }
.langues a { color: var(--gris-doux); }
.langues a:hover { color: var(--blanc); background: rgba(255, 255, 255, .06); }
.langues .langue-active { color: var(--blanc); background: rgba(73, 127, 174, .18); box-shadow: inset 0 0 0 1px rgba(73, 127, 174, .45); }
@media (max-width: 1080px) {
  .langue-long { display: none; }
  .langue-court { display: inline; }
  .langues a, .langues .langue-active { padding-inline: .5rem; }
}
@media (max-width: 760px) { .langues { order: 4; } }

/* ═══ LA PREMIÈRE VUE — le bateau, de nuit, plein écran ═══ */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 1040px);
  display: flex; flex-direction: column;
  padding: clamp(2rem, 6vh, 4.5rem) 0 clamp(1.6rem, 4vh, 3rem);
}
.hero-fond {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(7, 17, 27, .72) 0, rgba(7, 17, 27, .28) 38%, rgba(10, 22, 31, .55) 72%, var(--nuit-2) 100%),
    linear-gradient(90deg, rgba(7, 17, 27, .55), rgba(7, 17, 27, 0) 55%),
    url('medias/bateau-mobile.webp');
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  /* La photo est gradée nuit : moins de saturation, une pointe de bleu. */
  filter: saturate(.78);
}
@media (min-width: 700px) {
  .hero-fond {
    background-image:
      linear-gradient(180deg, rgba(7, 17, 27, .72) 0, rgba(7, 17, 27, .22) 38%, rgba(10, 22, 31, .5) 72%, var(--nuit-2) 100%),
      linear-gradient(90deg, rgba(7, 17, 27, .55), rgba(7, 17, 27, 0) 55%),
      url('medias/bateau-1920.webp');
    background-position: center 40%;
  }
}
.hero-corps { display: flex; flex-direction: column; flex: 1; gap: clamp(1.6rem, 5vh, 3.6rem); }
.hero-haut { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.hero-titre {
  font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.035em;
  max-width: 22ch; text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero-ligne { display: block; }
.hero-route {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: clamp(.95rem, 1.6vw, 1.15rem); font-weight: 500; letter-spacing: .06em;
  color: var(--gris);
}
.hero-route .fleche { color: var(--bleu-logo); width: 1.6em; height: .75em; }

/* Les deux instruments, en verre, posés au bas de l'écran. */
.hero-outils { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2rem; }
@media (max-width: 860px) { .hero-outils { grid-template-columns: 1fr; } }

.outil {
  position: relative;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
  background: var(--verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--verre-bord); border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 20px 50px rgba(0, 0, 0, .35);
  transition: border-color .25s, box-shadow .25s, transform .3s var(--ressort);
}
.outil:hover { border-color: rgba(73, 127, 174, .5); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 20px 50px rgba(0, 0, 0, .35), 0 0 0 1px var(--lueur), 0 0 40px rgba(73, 127, 174, .18); }
.outil-titre { font-size: clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing: -.015em; }
.outil-aide { margin-top: .3rem; font-size: 13.5px; color: var(--gris); }

.dims { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; flex-wrap: wrap; }
.dim { display: flex; align-items: center; gap: .4rem; }
.dim > span { font-family: 'Martian Mono', monospace; font-size: 12.5px; font-weight: 600; color: var(--gris); width: 1.1em; text-align: center; }
.dim input { width: 5.2rem; }
.dim-x { color: var(--gris-doux); font-size: 15px; }
.dim-unite { font-family: 'Martian Mono', monospace; font-size: 12.5px; color: var(--gris); }
@media (max-width: 620px) {
  .dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .dim { display: grid; gap: .3rem; }
  .dim > span { width: auto; text-align: left; }
  .dim input { width: 100%; }
  .dim-x, .dim-unite { display: none; }
}

input[type="number"], input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  min-height: 46px; padding: .5rem .75rem; font-size: 16px; color: var(--blanc);
  background: var(--champ); border: 1px solid var(--champ-bord); border-radius: 8px;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
input::placeholder, textarea::placeholder { color: var(--gris-doux); }
input:focus, select:focus, textarea:focus {
  border-color: var(--bleu-logo); outline: none;
  box-shadow: 0 0 0 3px rgba(73, 127, 174, .28), 0 0 24px rgba(73, 127, 174, .18);
  background: rgba(255, 255, 255, .08);
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
select option { background: #0F1F2C; color: var(--blanc); }

.quantite { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; flex-wrap: wrap; }
.quantite label { font-size: 13.5px; color: var(--gris); }
.quantite input { width: 4.6rem; }

.resultat {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--filet-fort);
}
.resultat-volume, .resultat-prix { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; letter-spacing: -.02em; }
.resultat-prix { color: #9CC4E8; text-shadow: 0 0 22px rgba(73, 127, 174, .55); }
.resultat-sep { color: var(--gris-doux); }
.resultat-note { margin-top: .4rem; font-size: 12.5px; color: var(--gris); max-width: 44ch; }

/* L'avis affiché quand le script ne s'exécute pas. */
.avis { margin-top: .9rem; padding: .7rem .9rem; font-size: 13.5px; background: rgba(190, 138, 65, .12); border-left: 3px solid var(--ambre); border-radius: 0 8px 8px 0; }
.avis a { color: #9CC4E8; font-weight: 600; }

/* Le suivi : le numéro de consignement reste un tiret tant que rien n'est
   saisi. Il n'y a pas d'état d'envoi à donner à lire sans numéro. */
.suivi-ref { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--filet); }
.suivi-etiq { font-family: 'Martian Mono', monospace; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--gris-doux); }
.suivi-valeur { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 600; color: var(--gris-doux); transition: color .3s; }
.suivi-valeur.est-rempli { color: var(--blanc); text-shadow: 0 0 18px rgba(73, 127, 174, .5); }
.champ-suivi { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.champ-suivi input { flex: 1 1 12rem; }
.champ-suivi button, .bouton, .carte-rejouer {
  min-height: 46px; padding: .5rem 1.15rem; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--bleu-action); color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 22px rgba(73, 127, 174, .25);
  transition: background-color .18s, box-shadow .18s, transform .12s;
}
.champ-suivi button:hover, .bouton:hover, .carte-rejouer:hover { background: var(--bleu-logo); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 28px rgba(73, 127, 174, .42); }
.champ-suivi button:active, .bouton:active, .carte-rejouer:active { transform: scale(.98); }
.suivi-reponse { margin-top: .8rem; font-size: 14.5px; min-height: 1.4em; color: var(--gris); }
.suivi-reponse a, .demande-reponse a { color: #9CC4E8; font-weight: 600; }
.suivi-reponse.est-erreur { color: #E8B27A; font-weight: 600; }

/* Le résultat d'un suivi trouvé. */
.sr-etape { display: flex; align-items: center; gap: .6rem; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; color: var(--blanc); font-variation-settings: 'wdth' 108; line-height: 1.1; }
.sr-pastille { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu-logo); box-shadow: 0 0 0 4px rgba(73, 127, 174, .22), 0 0 18px rgba(73, 127, 174, .7); }
.sr-arrive .sr-pastille { background: var(--ambre); box-shadow: 0 0 0 4px rgba(190, 138, 65, .22), 0 0 18px rgba(190, 138, 65, .7); }
.sr-detail { margin-top: .45rem; font-size: 14px; color: var(--gris); }
.sr-note { margin-top: .6rem; padding: .45rem .7rem; font-size: 13px; background: rgba(190, 138, 65, .12); border-left: 3px solid var(--ambre); border-radius: 0 6px 6px 0; }
.sr-lien { margin-top: .65rem; font-size: 14.5px; }
.sr-lien a { color: #9CC4E8; font-weight: 600; padding-block: .4rem; }
.sr-absent { font-size: 14.5px; }

/* Le rail des quatre étapes : vide tant que rien n'est suivi. */
.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem;
}
.etape { display: flex; align-items: center; gap: .6rem; min-width: 0; padding-top: .8rem; border-top: 2px solid var(--filet); transition: border-color .4s; }
.etape-nom { font-family: 'Martian Mono', monospace; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-doux); transition: color .3s; }
.case { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--filet-fort); background: transparent; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.etape.est-faite { border-top-color: var(--bleu-logo); }
.etape.est-faite .case { background: var(--bleu-logo); border-color: var(--bleu-logo); box-shadow: 0 0 14px rgba(73, 127, 174, .7); }
.etape.est-faite .etape-nom { color: var(--blanc); }
.etape.est-encours { border-top-color: var(--bleu-logo); }
.etape.est-encours .case { border-color: var(--bleu-logo); background: linear-gradient(90deg, var(--bleu-logo) 50%, transparent 50%); box-shadow: 0 0 14px rgba(73, 127, 174, .7); }
.etape.est-encours .etape-nom { color: var(--blanc); font-weight: 700; }
@media (max-width: 620px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ LES SECTIONS ═══ */
.section { padding: clamp(3.4rem, 7vw, 5.6rem) 0; }
.section-verre { background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)); border-block: 1px solid var(--filet); }
.section-profond { position: relative; isolation: isolate; border-block: 1px solid var(--filet); }
.section-profond::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(7, 17, 27, .82), rgba(7, 17, 27, .92)), url('medias/quai-conteneur-800.webp');
  background-size: cover; background-position: center;
}
@media (min-width: 700px) { .section-profond::before { background-image: linear-gradient(rgba(7, 17, 27, .82), rgba(7, 17, 27, .92)), url('medias/quai-conteneur-1600.webp'); } }

.titre-section { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 22ch; }
.intro { margin-top: 1.1rem; font-size: clamp(1rem, 1.5vw, 1.1rem); color: var(--gris); max-width: var(--lisible); }
.intro strong { color: var(--blanc); }
.intro a, .doc-aide a, .aide a, .carte-note a { color: #9CC4E8; font-weight: 600; padding-block: .4rem; }

/* Les quatre marches du parcours : des panneaux de verre. */
.marches { display: grid; gap: 1rem; margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.marche {
  position: relative; padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--rayon);
  background: var(--verre); border: 1px solid var(--verre-bord);
  box-shadow: inset 0 1px 0 var(--verre-reflet);
  transition: border-color .25s, transform .3s var(--ressort), box-shadow .25s;
}
.marche:hover { transform: translateY(-3px); border-color: rgba(73, 127, 174, .5); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 0 30px rgba(73, 127, 174, .16); }
.marche h3 { display: flex; align-items: baseline; gap: .6rem; font-size: 1.15rem; }
.marche-rang { font-size: 1.2rem; font-weight: 600; color: var(--bleu-logo); text-shadow: 0 0 14px rgba(73, 127, 174, .6); }
.marche p { margin-top: .6rem; font-size: 15px; color: var(--gris); }
.marche strong { color: var(--blanc); }

/* La photo, dans un cadre de verre. */
.photo-cadre {
  margin: clamp(2rem, 4vw, 3rem) auto 0; width: min(100%, 900px);
  padding: 8px; border-radius: calc(var(--rayon) + 4px);
  background: var(--verre); border: 1px solid var(--verre-bord);
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 24px 60px rgba(0, 0, 0, .45);
}
.photo-cadre img { width: 100%; height: auto; border-radius: var(--rayon); filter: saturate(.85) brightness(.92); }

/* ═══ LA CARTE — le grand écran de la salle ═══════════════════════════
   La carte n'est plus une vignette à côté d'une liste : elle EST la
   section, d'un bord à l'autre. Côtes en fil lumineux sur la nuit, route
   qui s'allume, trois cartes de verre posées sur leur lieu réel. Sous
   900 px, les cartes redescendent en liste et la carte se recadre sur
   l'Europe et l'Afrique de l'Ouest — ce qu'on doit voir, pas les
   Amériques.
   ════════════════════════════════════════════════════════════════════ */
.section-carte { border-block: 1px solid var(--filet); padding-bottom: clamp(2rem, 4vw, 3rem); }
.carte-scene { position: relative; }
/* Le plateau garde exactement les proportions de la carte (16:10) : c'est
   ce qui permet de poser des éléments HTML en pourcentages par-dessus le
   SVG sans jamais dériver. Sur un écran très large et bas, il se
   resserre et se centre plutôt que de déformer la carte. */
.carte-plateau { position: relative; width: min(100%, 170vh); margin-inline: auto; }
.carte-cadre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--nuit-1); }
.carte-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Le fond vit sur son propre calque : il se peint une fois, puis le
   convoi passe devant sans jamais le faire redessiner. */
.carte-fond { will-change: transform; }
/* Le voile : les bords de l'écran s'éteignent, les Amériques restent un
   fond, la lumière est sur le trajet. */
.carte-cadre::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 75% at 62% 48%, transparent 45%, var(--nuit-1) 100%),
    linear-gradient(180deg, var(--nuit-1), transparent 9%, transparent 91%, var(--nuit-1));
}

/* Les côtes : un fil clair sur la nuit, doublé d'un trait large et pâle
   qui fait la lueur sans filtre — un flou sur 28 Ko de tracé coûterait
   une image par seconde. */
.carte-cotes-lueur { fill: none; stroke: rgba(73, 127, 174, .22); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.carte-cotes { fill: none; stroke: rgba(168, 204, 236, .62); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.carte-frontieres { fill: none; stroke: rgba(168, 204, 236, .2); stroke-width: .8; stroke-linejoin: round; }

/* La route : le chemin habituel en pointillé, la part parcourue en trait
   de lumière. */
.carte-route { fill: none; stroke: var(--bleu-logo); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 12; opacity: .45; }
.carte-route-faite, .carte-route-lueur {
  fill: none; stroke-linecap: round;
  stroke-dasharray: var(--kh-long, 957); stroke-dashoffset: var(--kh-long, 957);
}
.carte-route-faite { stroke: #9CC8F0; stroke-width: 4; }
/* La lueur est un second trait, large et pâle, qui avance avec le premier :
   un filtre d'ombre sur une ligne animée coûterait toute la fluidité. */
.carte-route-lueur { stroke: rgba(120, 180, 235, .3); stroke-width: 16; }

/* Les repères, et leurs fils vers les cartes de verre. */
.carte-fil { stroke: rgba(168, 204, 236, .38); stroke-width: 1.2; stroke-dasharray: 3 5; }
.pt-halo { fill: rgba(73, 127, 174, .16); transition: r .35s var(--ressort), fill .35s; }
.pt-disque { fill: var(--nuit-1); stroke: var(--bleu-logo); stroke-width: 3.5; }
.pt-coeur { fill: #9CC4E8; }
.carte-point[data-point="luanda"] .pt-disque { stroke: var(--ambre); }
.carte-point[data-point="luanda"] .pt-coeur { fill: #E8C382; }
.carte-point[data-point="luanda"] .pt-halo { fill: rgba(190, 138, 65, .18); }
.carte-point.est-active .pt-halo { r: 60px; fill: rgba(73, 127, 174, .26); }
.carte-point[data-point="luanda"].est-active .pt-halo { fill: rgba(190, 138, 65, .26); }
.carte-nom { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 22px; fill: #DCE6EF; text-anchor: middle; paint-order: stroke; stroke: var(--nuit-1); stroke-width: 6; stroke-linejoin: round; }
.carte-nom-luanda { fill: #E8C382; text-anchor: end; }

/* Le convoi : une pastille de verre qui porte le pictogramme du camion ou
   du navire. Elle n'existe que si le navigateur sait la faire avancer. */
.veh { display: none; }
.veh-halo { fill: rgba(73, 127, 174, .22); }
.veh-verre { fill: rgba(12, 24, 35, .88); stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; }
.veh-picto { color: #fff; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Le titre, posé sur l'Atlantique nord. */
.carte-entete { position: absolute; z-index: 2; left: clamp(1.25rem, 4vw, 4.5rem); top: clamp(1.5rem, 5vw, 4.5rem); max-width: 30rem; }
.carte-entete .intro { max-width: 38ch; }

/* Les trois étapes : des cartes de verre sur leur lieu. */
.carte-etapes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.carte-carte { position: absolute; left: var(--x); top: var(--y); width: clamp(220px, 21vw, 300px); max-width: calc(100% - var(--x) - 1rem); pointer-events: auto; }
.carte-carte.est-a-gauche { left: auto; right: calc(100% - var(--x)); max-width: calc(var(--x) - 1rem); }
/* Où se pose chaque carte, et la longueur du tracé : posés ici par
   bin/carte-khembo.py, en règles CSS et non en attributs style — la
   politique de sécurité du site (style-src 'self') refuse tout style
   en ligne, et c'est très bien ainsi. */
/* carte:positions:debut — généré par bin/carte-khembo.py, ne pas éditer */
.carte-cadre { --kh-long: 956.7; }
.carte-carte[data-point="suisse"] { --x: 76%; --y: 9%; }
.carte-carte[data-point="mer"] { --x: 54%; --y: 44%; }
.carte-carte[data-point="luanda"] { --x: 72%; --y: 68%; }
/* carte:positions:fin */
.carte-etape {
  display: flex; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
  padding: .9rem .95rem; color: inherit; font: inherit;
  /* Du verre sans flou d'arrière-plan : posé sur une carte qui bouge, un
     backdrop-filter se recalcule à chaque image. Le fond est donc un
     peu plus couvrant que le verre des instruments. */
  background: rgba(10, 22, 33, .9); border: 1px solid var(--verre-bord); border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 14px 40px rgba(0, 0, 0, .5);
  transition: border-color .2s, box-shadow .25s, transform .3s var(--ressort);
}
.carte-etape:hover { border-color: rgba(73, 127, 174, .6); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 18px 44px rgba(0, 0, 0, .55), 0 0 28px rgba(73, 127, 174, .22); }
.carte-etape[aria-pressed="true"] { border-color: var(--bleu-logo); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 14px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(73, 127, 174, .32); }
.carte-carte[data-point="luanda"] .carte-etape[aria-pressed="true"] { border-color: var(--ambre); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 14px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(190, 138, 65, .3); }
.et-rang { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--bleu-action); color: #fff; font-size: 13px; font-weight: 600; }
.carte-etape[aria-pressed="true"] .et-rang { background: var(--bleu-logo); box-shadow: 0 0 14px rgba(73, 127, 174, .6); }
.carte-carte[data-point="luanda"] .carte-etape[aria-pressed="true"] .et-rang { background: var(--ambre); box-shadow: 0 0 14px rgba(190, 138, 65, .6); }
.et-corps { display: grid; gap: .25rem; min-width: 0; }
.et-nom { font-weight: 700; font-size: 1.02rem; font-variation-settings: 'wdth' 106; }
.et-texte { font-size: 14px; line-height: 1.45; color: var(--gris); }
.et-texte strong { color: var(--blanc); }
.carte-pied { margin-top: clamp(1.2rem, 3vw, 2rem); display: grid; gap: .7rem; }
.carte-rejouer[hidden] { display: none; }
.carte-rejouer { justify-self: start; display: inline-flex; align-items: center; font-size: 14px; }
.carte-note { font-size: 13px; color: var(--gris-doux); }

/* Sous 1100 px, les cartes de verre n'ont plus la place de se poser sur
   leur lieu sans se chevaucher : le titre passe au-dessus, les étapes en
   rang sous la carte, les fils disparaissent. La carte garde son étendue. */
@media (max-width: 1100px) {
  .carte-plateau { width: 100%; }
  .carte-entete { position: static; max-width: none; width: min(100% - 2.5rem, var(--large)); margin: 0 auto clamp(1.4rem, 4vw, 2.2rem); }
  .carte-entete .intro { max-width: var(--lisible); }
  .carte-fils { display: none; }
  .carte-etapes { position: static; pointer-events: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; width: min(100% - 2.5rem, var(--large)); margin: clamp(1.2rem, 4vw, 2rem) auto 0; }
  .carte-carte, .carte-carte.est-a-gauche { position: static; width: auto; max-width: none; }
  .carte-etape { height: 100%; }
  .carte-etape:hover { transform: none; }
}
/* Téléphone : la carte se recadre sur le trajet — un simple zoom de la
   même image, rien n'est redessiné — et les étapes s'empilent. */
@media (max-width: 700px) {
  .carte-etapes { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  /* Le cadre est carré ; la carte, agrandie 2,2 fois, y est décalée pour
     que le point (67 %, 42 %) — le milieu du trajet — tombe au centre :
     gauche = 50 % − 67 % × 2,2, haut = 50 % − 42 % × 2,2 × 0,625. */
  .carte-cadre { aspect-ratio: 1 / 1; }
  .carte-svg { width: 220%; height: auto; inset: auto; left: -97.4%; top: -7.8%; }
}
@media (max-width: 480px) {
  /* Plus haut que large (4:5), agrandie 2,6 fois, même centre :
     gauche = 62,5 % − 67 % × 2,6 × 0,625 … haut = 62,5 % − 42 % × 2,6 × 0,625. */
  .carte-cadre { aspect-ratio: 4 / 5; }
  .carte-svg { width: 260%; left: -124.2%; top: -5.8%; }
}

/* Les services : quatre panneaux. */
.services { display: grid; gap: 1rem; margin-top: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.service {
  padding: 1.4rem 1.3rem; border-radius: var(--rayon);
  background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet);
  transition: border-color .25s, transform .3s var(--ressort), box-shadow .25s;
}
.service:hover { transform: translateY(-3px); border-color: rgba(73, 127, 174, .5); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 0 30px rgba(73, 127, 174, .16); }
.service h3 { font-size: 1.1rem; }
.service p { margin-top: .6rem; font-size: 15px; color: var(--gris); }

/* Le document des conditions : un panneau, des filets, des chiffres. */
.document { margin-top: 2rem; padding: clamp(1.3rem, 3vw, 2.4rem); border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: inset 0 1px 0 var(--verre-reflet); }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th[scope="row"] { text-align: left; font-weight: 600; padding: .75rem 0; border-bottom: 1px solid var(--filet); }
.tableau td { text-align: right; padding: .75rem 0; border-bottom: 1px solid var(--filet); white-space: nowrap; color: #9CC4E8; }
.tableau thead th { text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--filet-fort); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris-doux); }
.tableau thead th:not(:first-child) { text-align: right; }
.tableau-formats { margin-top: .8rem; }
.tableau-formats td { font-size: 13.5px; }
.doc-titre { margin-top: 2rem; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gris-doux); font-variation-settings: 'wdth' 100; }
.doc-titre:first-child { margin-top: 0; }
.doc-aide { margin-top: .5rem; font-size: 13.5px; color: var(--gris); }
.doc-notes { margin-top: 1.6rem; }
.liste { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.liste li { position: relative; padding-left: 1.45rem; font-size: 15px; color: var(--gris); }
.liste li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu-logo); box-shadow: 0 0 10px rgba(73, 127, 174, .7); }
.liste strong { color: var(--blanc); }
.doc-cgv { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: 14.5px; font-weight: 600; }
.doc-cgv a { display: inline-block; padding-block: .68rem; color: #9CC4E8; }
@media (max-width: 620px) {
  .tableau, .tableau-formats { font-size: 13.5px; }
  .tableau-tarifs, .tableau-tarifs tbody, .tableau-tarifs tr { display: block; }
  .tableau-tarifs th[scope="row"] { display: block; padding: .75rem 0 0; border-bottom: 0; }
  .tableau-tarifs td { display: block; padding: .1rem 0 .75rem; text-align: left; white-space: normal; }
  .tableau-formats, .tableau-formats tbody, .tableau-formats tr { display: block; }
  .tableau-formats thead { display: none; }
  .tableau-formats tr { padding: .8rem 0; border-bottom: 1px solid var(--filet); }
  .tableau-formats tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .tableau-formats th[scope="row"] { display: block; padding: 0 0 .4rem; border-bottom: 0; }
  .tableau-formats td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .18rem 0; border-bottom: 0; text-align: right; }
  .tableau-formats td::before { content: attr(data-etiq); flex: none; font-family: 'Archivo', system-ui, sans-serif; font-variant-numeric: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; color: var(--gris-doux); }
}

/* Les villes des tournées. */
.villes-titre { margin-top: 2rem; font-family: 'Martian Mono', monospace; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--gris-doux); }
.villes { margin: .8rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.villes li { padding: .5rem .85rem; border: 1px solid var(--filet-fort); border-radius: 999px; font-family: 'Martian Mono', monospace; font-size: 13px; font-weight: 500; color: var(--blanc); background: rgba(255, 255, 255, .03); transition: border-color .2s, background-color .2s; }
.villes li:hover { border-color: var(--bleu-logo); background: rgba(73, 127, 174, .12); }
.villes-note { margin-top: 1.4rem; font-size: 14.5px; color: var(--gris); }

/* L'équipe : de vrais visages, éclairés. */
.equipe { margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.membre { transition: transform .3s var(--ressort); }
.membre:hover { transform: translateY(-3px); }
.membre img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--verre-bord); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.membre-nom { margin-top: .8rem; font-weight: 700; }
.membre-role { margin-top: .15rem; font-family: 'Martian Mono', monospace; font-size: 12px; color: var(--gris); }

/* Le contact : le formulaire et les adresses. */
.contact { display: grid; gap: 2rem; margin-top: 2.2rem; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.formulaire { margin-top: 0; }
.champ { display: grid; gap: .35rem; margin-top: 1rem; }
.champ:first-child { margin-top: 0; }
.champ label { font-size: 14px; font-weight: 600; color: var(--gris); }
.champ label span { color: var(--ambre); }
.demande-reponse { margin-top: .8rem; font-size: 14.5px; min-height: 1.4em; color: var(--gris); }
.demande-reponse.est-erreur { color: #E8B27A; font-weight: 600; }
.bouton { margin-top: 1.2rem; }
.aide { margin-top: .9rem; font-size: 13px; color: var(--gris-doux); }
.coordonnees { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adresse { padding: 1.2rem 1.1rem; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--verre-bord); border-left: 3px solid var(--bleu-logo); box-shadow: inset 0 1px 0 var(--verre-reflet); }
.adresse p { margin-top: .5rem; font-size: 14.5px; line-height: 1.55; color: var(--gris); }
.adresse a { display: inline-flex; align-items: center; min-height: 44px; color: #9CC4E8; font-weight: 600; }

/* Le pied : la salle s'éteint doucement. */
.pied { background: var(--nuit-1); color: var(--gris); border-top: 1px solid var(--filet); padding: 2.6rem 0 1.6rem; }
.pied-haut { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.pied-logo { height: 42px; width: auto; }
.pied-route { display: inline-flex; align-items: center; gap: .5em; font-family: 'Martian Mono', monospace; font-size: clamp(1rem, 2.4vw, 1.4rem); font-weight: 600; letter-spacing: .04em; color: var(--blanc); }
.pied-fleche { display: inline-block; color: var(--bleu-logo); }
.pied-fleche .fleche { width: 1.4em; height: .65em; }
.pied-bas { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; font-size: 13.5px; color: var(--gris); }
.pied-bas a { display: inline-flex; align-items: center; min-height: 44px; color: #9CC4E8; font-weight: 600; }

/* ── Le bouton WhatsApp ─────────────────────────────────────────────
   Un lien, rien d'autre : aucune requête ne part vers WhatsApp tant que
   personne ne clique. Le glyphe est l'officiel, sur son vert officiel ;
   le mot est blanc sur le verre, parce que du blanc sur #25D366 ne
   mesure que 2,1:1 et ne porterait pas de texte.
   ═════════════════════════════════════════════════════════════════ */
.wa {
  position: fixed; z-index: 60;
  right: clamp(1rem, 3vw, 2rem);
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px;
  background: var(--verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--verre-bord);
  box-shadow: inset 0 1px 0 var(--verre-reflet), 0 14px 40px rgba(0, 0, 0, .5);
  color: var(--blanc); font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ressort);
}
.wa:hover { border-color: rgba(37, 211, 102, .6); box-shadow: inset 0 1px 0 var(--verre-reflet), 0 14px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(37, 211, 102, .25); }
.wa:active { transform: scale(.97); }
.wa-pastille {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;   /* le vert officiel de la marque */
}
.wa-pastille svg { display: block; }
/* Sur téléphone, la pastille seule : le mot prendrait la largeur d'un
   pouce sans rien apprendre à personne. */
@media (max-width: 620px) {
  .wa { padding: .4rem; gap: 0; }
  .wa-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .wa { display: none; } }

/* ═══ MOUVEMENT — les instruments s'allument ═════════════════════════
   Un seul moment d'entrée en première vue ; ensuite chaque section arrive
   une fois, par un seul geste, ses enfants décalés de 40 ms. Tout est
   conditionné : la classe « anim » n'existe que si le script tourne ET si
   le visiteur n'a pas demandé moins de mouvement. Sinon l'état dessiné
   est déjà l'état final.
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* carte:convoi:debut — généré par bin/carte-khembo.py, ne pas éditer */
  .carte-anim .veh { offset-path: path('M1162.6 169.3C1159.4 168.1 1152.5 168.1 1143.2 162.0C1134.0 156.0 1114.7 137.8 1107.2 132.8C1099.7 127.9 1102.8 133.1 1098.2 132.1C1093.7 131.2 1088.2 124.3 1079.8 127.1C1071.4 129.8 1057.5 139.1 1047.8 148.7C1038.0 158.3 1027.8 173.7 1021.3 184.9C1014.7 196.0 1010.9 200.8 1008.5 215.6C1006.0 230.4 1006.2 260.5 1006.6 273.6C1007.1 286.7 1012.6 280.6 1011.2 294.3C1009.8 308.1 1005.7 337.1 998.4 356.0C991.1 375.0 977.4 389.4 967.3 408.0C957.3 426.7 944.0 448.6 938.1 467.7C932.1 486.7 931.4 507.2 931.7 522.2C932.0 537.3 933.5 547.4 939.9 557.8C946.3 568.2 955.6 574.7 970.1 584.7C984.5 594.7 1011.7 613.3 1026.7 617.8C1041.8 622.2 1048.5 612.9 1060.6 611.3C1072.6 609.8 1087.4 610.0 1099.0 608.6C1110.6 607.2 1119.1 600.0 1130.1 603.1C1141.0 606.1 1157.6 616.6 1164.8 626.9C1172.0 637.3 1167.1 652.7 1173.0 665.3C1179.0 678.0 1193.9 691.9 1200.5 702.9C1207.0 713.9 1209.4 726.0 1212.3 731.4C1215.3 736.9 1217.1 734.8 1218.1 735.4'); }
  .carte-anim .veh { display: block; offset-rotate: 0deg; }
  .carte-anim .veh-camion-a { animation: kh-camion-a 20s linear infinite; }
  .carte-anim .veh-navire   { animation: kh-navire 20s linear infinite; }
  .carte-anim .veh-camion-b { animation: kh-camion-b 20s linear infinite; }
  .carte-anim .carte-route-faite, .carte-anim .carte-route-lueur { animation: kh-trace 20s linear infinite; }
  @keyframes kh-trace { 0% { stroke-dashoffset: var(--kh-long); } 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
  @keyframes kh-camion-a {
    0%    { offset-distance: 0%; opacity: 1; }
    6.9%  { offset-distance: 8.1%; opacity: 1; }
    7.5%  { offset-distance: 8.1%; opacity: 0; }
    100%  { offset-distance: 8.1%; opacity: 0; }
  }
  @keyframes kh-navire {
    0%, 6.9% { offset-distance: 8.1%; opacity: 0; }
    7.5%     { offset-distance: 8.1%; opacity: 1; }
    83.7%     { offset-distance: 98.5%; opacity: 1; }
    84.3%     { offset-distance: 98.5%; opacity: 0; }
    100%    { offset-distance: 98.5%; opacity: 0; }
  }
  @keyframes kh-camion-b {
    0%, 83.7% { offset-distance: 98.5%; opacity: 0; }
    84.3%     { offset-distance: 98.5%; opacity: 1; }
    85%     { offset-distance: 100%; opacity: 1; }
    100%    { offset-distance: 100%; opacity: 1; }
  }
  .carte-anim.est-figee .veh { animation: none; opacity: 0; }
  .carte-anim.est-figee .carte-route-faite, .carte-anim.est-figee .carte-route-lueur { animation: none; stroke-dashoffset: var(--reste, 0); transition: stroke-dashoffset .8s var(--ressort); }
  .carte-anim.est-figee[data-vehicule="camion"] .veh-camion-a,
  .carte-anim.est-figee[data-vehicule="navire"] .veh-navire { opacity: 1; offset-distance: var(--avance, 0%); }
  /* carte:convoi:fin */

  /* La lueur qui respire sur les repères de la carte. */
  .carte-anim .pt-coeur { animation: kh-pouls 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes kh-pouls { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

  /* ── L'entrée : les instruments s'allument, une seule fois ──────────
     Des TRANSITIONS, pas des animations à image-clé. La différence est
     capitale : si une animation ne démarre pas — onglet en arrière-plan,
     rendu différé, navigateur qui bride — un « forwards » laisse l'élément
     à son état de départ, donc du texte invisible. Une transition, elle,
     arrive toujours à son état final : au pire elle ne s'anime pas.
     Une animation ne doit JAMAIS pouvoir laisser du texte invisible. */

  .anim [data-anime] .hero-ligne,
  .anim .hero-route[data-anime],
  .anim .hero-outils .outil[data-anime],
  .anim .etapes[data-anime] .etape,
  .anim .photo-cadre[data-anime],
  .anim .equipe[data-anime] .membre,
  .anim [data-anime].reveal-groupe > *,
  .anim [data-anime].reveal-seul {
    opacity: 0; transform: translateY(18px);
  }
  .anim .hero-outils .outil[data-anime] { transform: translateY(36px) scale(.985); }
  .anim [data-anime] .hero-ligne { transform: translateY(28px); }

  .anim [data-anime].est-visible .hero-ligne,
  .anim .hero-route[data-anime].est-visible,
  .anim .hero-outils .outil[data-anime].est-visible,
  .anim .etapes[data-anime].est-visible .etape,
  .anim .photo-cadre[data-anime].est-visible,
  .anim .equipe[data-anime].est-visible .membre,
  .anim [data-anime].reveal-groupe.est-visible > *,
  .anim [data-anime].reveal-seul.est-visible {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ressort), transform .8s var(--ressort);
  }
  .anim .hero-titre[data-anime].est-visible .hero-ligne:nth-child(2) { transition-delay: .1s; }
  .anim .hero-route[data-anime].est-visible { transition-delay: .3s; }
  .anim .hero-outils .outil[data-anime].est-visible:nth-child(2) { transition-delay: .12s; }
  .anim .etapes[data-anime].est-visible .etape:nth-child(2) { transition-delay: .06s; }
  .anim .etapes[data-anime].est-visible .etape:nth-child(3) { transition-delay: .12s; }
  .anim .etapes[data-anime].est-visible .etape:nth-child(4) { transition-delay: .18s; }
  .anim .equipe[data-anime].est-visible .membre:nth-child(2),
  .anim [data-anime].reveal-groupe.est-visible > *:nth-child(2) { transition-delay: .04s; }
  .anim .equipe[data-anime].est-visible .membre:nth-child(3),
  .anim [data-anime].reveal-groupe.est-visible > *:nth-child(3) { transition-delay: .08s; }
  .anim .equipe[data-anime].est-visible .membre:nth-child(4),
  .anim [data-anime].reveal-groupe.est-visible > *:nth-child(4) { transition-delay: .12s; }
  .anim .equipe[data-anime].est-visible .membre:nth-child(5),
  .anim [data-anime].reveal-groupe.est-visible > *:nth-child(5) { transition-delay: .16s; }
  .anim .equipe[data-anime].est-visible .membre:nth-child(6),
  .anim [data-anime].reveal-groupe.est-visible > *:nth-child(6) { transition-delay: .2s; }

  /* L'en-tête s'assombrit dès qu'on quitte le haut. */
  .entete { transition: background-color .3s, border-color .3s; }
  .entete.est-decollee { background: rgba(7, 17, 27, .86); border-bottom-color: var(--filet-fort); }

  .resultat-volume, .resultat-prix { transition: color .2s, text-shadow .3s; }
  .pied-fleche { animation: kh-trajet 3.4s ease-in-out infinite; }
  @keyframes kh-trajet { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(5px); } }
}

@media print {
  .entete, .entete-nav, .hero-fond { display: none; }
  body { background: #fff; color: #000; }
  .outil, .document, .marche, .service, .adresse { box-shadow: none; border: 1px solid #999; background: #fff; }
}