/* =========================================================================
   GARDE-CÔTES DJIBOUTIENNE — Feuille de style institutionnelle
   Charte dérivée du racing stripe officiel (bleu / blanc / vert, 64°)
   ========================================================================= */

:root{
  --emblem:url('/assets/img/emblem.png');
  /* --- Racing stripe : couleurs primaires --- */
  --stripe-blue:#6CACE4;
  --stripe-blue-mid:#3E8CC8;
  --stripe-blue-deep:#1B5B8A;
  --stripe-green:#43B02A;
  --stripe-green-deep:#256E18;
  --stripe-white:#FFFFFF;

  /* --- Coque & fonds --- */
  --hull:#F2F6F9;
  --hull-2:#E4EDF3;
  --navy-deep:#062A45;
  --navy-mid:#0B3F66;
  --navy-soft:#125585;

  /* --- Accents de l'emblème --- */
  --red-star:#C8102E;
  --gold-rope:#B8935A;
  --gold-bright:#E8B354;
  --gold-bright-deep:#9C6B1F;

  --ink:#0E2233;
  --ink-soft:#3B5468;
  --line:rgba(14,34,51,.13);

  /* Angle réglementaire du racing stripe : 64° depuis l'horizontale */
  --skew:-26deg;
  --ease:cubic-bezier(.16,.8,.24,1);
  --header-h:96px;
}
html[dir="rtl"]{ --skew:26deg; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
/* overflow-x:hidden existait deja sur body, mais pas sur html -- or c'est
   html que le navigateur utilise pour la barre de defilement horizontale
   reelle. Des elements caches hors-ecran via un decalage negatif (comme
   le tiroir mobile ferme en RTL) continuaient donc a elargir la page
   malgre le overflow-x deja pose sur body (bug reel corrige) */
body{
  background:var(--hull); color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* Le J capital de Fraunces descend sous la ligne de base : réserve explicite */
h1,h2,h3,h4{ padding-bottom:.06em; overflow-wrap:break-word; }

html[lang="ar"] body{ font-family:'Cairo', system-ui, sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .display{ font-family:'Cairo', serif; font-weight:700; }
html[lang="ar"] .mono, html[lang="ar"] .bearing-label, html[lang="ar"] .topbar .wrap,
html[lang="ar"] .ticker, html[lang="ar"] .code, html[lang="ar"] .label,
html[lang="ar"] .tag, html[lang="ar"] .class, html[lang="ar"] .news-date,
html[lang="ar"] .fleet-specs div, html[lang="ar"] .footer-col h2,
html[lang="ar"] .brand-text .motto, html[lang="ar"] .metric-label,
html[lang="ar"] .crumb{ font-family:'Cairo', monospace; letter-spacing:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--stripe-blue); outline-offset:3px; border-radius:2px;
}

.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  /* position fixe et décalage en pixels : le décalage relatif précédent
     (-140%) ne suffisait plus à sortir le lien de l'écran une fois le
     bandeau d'alerte inséré au-dessus (bug réel corrigé) */
  position:fixed; top:0; left:50%; transform:translate(-50%,-120px);
  background:var(--navy-deep); color:#fff; padding:12px 22px; z-index:200;
  font-weight:700; font-size:14px; transition:transform .2s var(--ease);
  border-end-start-radius:var(--r-sm); border-end-end-radius:var(--r-sm);
}
.skip-link:focus, .skip-link:focus-visible{ transform:translate(-50%,0) !important; }

.reveal{ opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================================
   EMBLÈME
   ========================================================================= */
.emblem{ background-image:var(--emblem); background-size:contain;
  background-repeat:no-repeat; background-position:center; flex-shrink:0; }
.emblem-header{ width:66px; height:66px; }
.emblem-footer{ width:64px; height:64px; }

/* =========================================================================
   DRAPEAU DE DJIBOUTI ANIMÉ
   ========================================================================= */
.dj-flag{
  width:34px; height:23px; flex-shrink:0; display:inline-block;
  filter:drop-shadow(0 1px 2px rgba(6,42,69,.28));
}
.dj-flag .fly{ animation:flag-wave 4.5s ease-in-out infinite; transform-origin:0% 50%; }
@keyframes flag-wave{
  0%,100%{ transform:skewY(0deg)   scaleY(1); }
  25%    { transform:skewY(-1.6deg) scaleY(.985); }
  50%    { transform:skewY(0deg)   scaleY(1.01); }
  75%    { transform:skewY(1.6deg)  scaleY(.985); }
}
.dj-flag .shine{ animation:flag-shine 4.5s ease-in-out infinite; }
@keyframes flag-shine{
  0%,100%{ opacity:.05; transform:translateX(-6px); }
  50%    { opacity:.22; transform:translateX(6px); }
}
.motto-row{ display:flex; align-items:center; gap:9px; margin-top:6px; }

/* =========================================================================
   RACING STRIPE
   ========================================================================= */
.stripe-set{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.stripe-set i{ position:absolute; top:-25%; height:150%;
  transform:skewX(var(--skew)); display:block; }

/* trois motifs identiques au fil de la charte (bleu fin, bleu large, vert large),
   répartis à rythme régulier plutôt que groupés dans un angle */


.tri-rule{
  height:5px; width:100%;
  background:linear-gradient(to right,
    var(--stripe-blue) 0 14%, var(--stripe-white) 14% 16%,
    var(--stripe-blue) 16% 46%, var(--stripe-white) 46% 48%,
    var(--stripe-green) 48% 100%);
}
html[dir="rtl"] .tri-rule{ transform:scaleX(-1); }

.bearing-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  color:var(--stripe-green-deep); font-weight:600;
}
.bearing-label::before{
  content:""; flex-shrink:0; width:34px; height:14px;
  background:linear-gradient(90deg,
    var(--stripe-blue) 0 8%, transparent 8% 16%,
    var(--stripe-blue) 16% 46%, transparent 46% 54%,
    var(--stripe-green) 54% 96%, transparent 96%);
  transform:skewX(var(--skew));
}
.bearing-label.on-dark{ color:var(--stripe-blue); }

/* =========================================================================
   TOP BAR
   ========================================================================= */
.topbar{ background:var(--navy-deep); color:#cfe2ee; font-size:12.5px; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between;
  min-height:38px; gap:16px; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; }
.topbar .left, .topbar .right{ display:flex; gap:18px; align-items:center; }
.topbar .emergency{ color:#ffc9cd; font-weight:600; }
.topbar .emergency b{ color:#ff9aa2; }
.topbar .emergency a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.topbar .emergency a:hover{ color:#fff; }
.lang{ display:flex; gap:4px; }
.lang button{ background:none; border:none; cursor:pointer; font-size:12.5px;
  color:#cfe2ee; opacity:.62; padding:4px 9px; border-radius:2px;
  transition:opacity .2s, background .2s; }
.lang button[aria-pressed="true"]{ opacity:1; color:#fff; background:var(--stripe-blue-deep); }
.lang button:hover{ opacity:1; }
@media (max-width:980px){ .topbar .left span.mid{ display:none; } }
@media (max-width:640px){
  .topbar .wrap{ justify-content:space-between; gap:10px; font-size:11.5px; flex-wrap:nowrap; }
  .topbar .left{ display:none; }
  .topbar .right{ gap:10px; width:100%; justify-content:space-between; }
  .topbar .emergency{ white-space:nowrap; }
  .lang button{ padding:4px 7px; font-size:11.5px; }
}
@media (max-width:400px){ .topbar .emergency .vhf{ display:none; } }

/* =========================================================================
   HEADER
   ========================================================================= */
header.site{ background:var(--hull); position:sticky; top:0; z-index:80; }
.header-row{ display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); gap:24px; }
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

/* ---------- emblème : halo tournant, souffle lent, reflet balayant ---------- */
.crest-mark{
  position:relative; width:66px; height:66px; flex-shrink:0;
  transition:transform .45s var(--ease);
  animation:crest-enter .9s var(--ease) both;
}
@keyframes crest-enter{
  from{ opacity:0; transform:scale(.86) rotate(-8deg); }
  to  { opacity:1; transform:scale(1) rotate(0); }
}
.crest-mark .emblem-header{
  position:absolute; inset:0; width:100%; height:100%;
  animation:crest-breathe 7s ease-in-out infinite;
  filter:drop-shadow(0 2px 5px rgba(6,42,69,.22));
}
@keyframes crest-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.028); }
}
.crest-halo{ position:absolute; inset:-7px; width:calc(100% + 14px); height:calc(100% + 14px); }
.crest-halo circle{ transform-origin:50% 50%; opacity:.85; }
.crest-halo .halo-blue { animation:halo-cw  14s linear infinite; }
.crest-halo .halo-green{ animation:halo-ccw 18s linear infinite; }
@keyframes halo-cw { to{ transform:rotate(360deg); } }
@keyframes halo-ccw{ to{ transform:rotate(-360deg); } }

/* reflet spéculaire qui traverse le disque */
.crest-sheen{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none;
}
.crest-sheen::before{
  content:""; position:absolute; top:-30%; left:-70%; width:42%; height:160%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(var(--skew));
  animation:crest-sheen 7s ease-in-out infinite;
}
@keyframes crest-sheen{
  0%, 62%{ left:-70%; }
  84%    { left:135%; }
  100%   { left:135%; }
}

/* survol : l'ensemble de la marque réagit */
.brand:hover .crest-mark{ transform:scale(1.06); }
.brand:hover .crest-halo .halo-blue { animation-duration:5s; }
.brand:hover .crest-halo .halo-green{ animation-duration:7s; }
.brand:hover .dj-flag{ transform:scale(1.05) rotate(-1deg); }

/* ---------- logotype + drapeau sur la même ligne ---------- */
.name-row{ display:flex; align-items:center; gap:15px; }
.flag-mount{
  display:inline-flex; position:relative; flex-shrink:0;
  padding-inline-start:9px;
  border-inline-start:2px solid var(--line);
}
.dj-flag{
  width:54px; height:36px; display:block;
  filter:drop-shadow(0 3px 6px rgba(6,42,69,.28));
  transition:transform .45s var(--ease);
  animation:flag-sway 6s ease-in-out infinite, flag-enter .9s .15s var(--ease) both;
  transform-origin:0% 50%;
}
@keyframes flag-enter{
  from{ opacity:0; transform:translateX(-10px) scaleX(.7); }
  to  { opacity:1; transform:none; }
}
@keyframes flag-sway{
  0%,100%{ transform:rotate(0deg)    translateY(0); }
  30%    { transform:rotate(-1.1deg) translateY(-1px); }
  65%    { transform:rotate(1.1deg)  translateY(1px); }
}
.brand-text .name{
  font-family:'Public Sans', sans-serif; font-weight:800; font-size:18px;
  line-height:1.22; color:var(--navy-deep); letter-spacing:.015em; text-transform:uppercase;
  display:block;
}
html[lang="ar"] .brand-text .name{ font-family:'Cairo',sans-serif; font-weight:700;
  font-size:19px; letter-spacing:0; }
.brand-text .motto{
  display:block; margin-top:8px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stripe-green-deep); white-space:nowrap;
}
.brand-text{ min-width:0; }
/* l'espacement entre rubriques peut être réduit : la pastille glissante
   assure désormais la séparation visuelle, le rembourrage interne des liens
   remplace l'écart externe (sinon la navigation déborde à 1280-1440 px) */
nav.primary ul{ display:flex; align-items:center; gap:1px; list-style:none; }
/* --------- navigation principale : trait de lumière glissant ---------
   Pas de pastille ni de cadre — un fin trait lumineux court sous la rubrique
   survolée, comme un curseur de veille. Sobre, précis, sans encombrement
   visuel : la typographie reste seule maîtresse de la barre. */
nav.primary ul{ position:relative; }
nav.primary a{
  display:inline-block; font-size:14px; font-weight:600; color:var(--ink-soft);
  position:relative; z-index:2; padding:10px 12px 12px;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
nav.primary a:hover, nav.primary a[aria-current="page"]{ color:var(--navy-deep); }

/* le trait lui-même, positionné en JavaScript */
.nav-pill{
  position:absolute; z-index:1; bottom:4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--stripe-blue) 18%,
    var(--stripe-green) 82%,
    transparent 100%);
  opacity:0; pointer-events:none;
  transition:left .5s cubic-bezier(.45,.05,.35,1), width .5s cubic-bezier(.45,.05,.35,1),
             opacity .35s var(--ease);
}
.nav-pill.is-on{ opacity:1; }

/* halo diffus au-dessus du trait : la lumière semble émaner du texte */
.nav-pill::after{
  content:""; position:absolute; inset-inline:12%; bottom:-1px; height:16px;
  background:radial-gradient(58% 100% at 50% 100%, rgba(108,172,228,.30), transparent 72%);
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){ .nav-pill{ transition:opacity .2s; } }

.burger{ display:none; align-items:center; gap:9px; background:none; cursor:pointer;
  border:1px solid var(--line); padding:10px 14px; color:var(--navy-deep);
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; }
.burger:hover{ border-color:var(--stripe-blue); }
/* Seuil mesuré : la navigation complète (8 rubriques + enseigne + bouton
   d'alerte) réclame 1383 px et ne tient au large qu'à partir d'une fenêtre
   de 1500 px. En dessous, le menu latéral prend le relais — plutôt que de
   compresser les libellés jusqu'à les rendre illisibles. */
/* Seuil recalculé après un resserrement supplémentaire légitime de l'espacement
   (espacement entre liens, remplissage du bouton d'alerte, enseigne) : le menu
   déplié tient désormais sans débordement à partir de 1260 px, contre 1360 px
   précédemment — il redevient visible sur davantage de tailles d'écran
   courantes, sans jamais recourir à des polices réduites ou des éléments
   masqués. */
/* Seuil relevé à 1360 px : la pastille glissante ajoute un rembourrage
   interne à chaque rubrique (nécessaire à sa lisibilité), ce qui élargit la
   navigation. Plutôt que de comprimer les liens jusqu'à l'illisible, on
   bascule un peu plus tôt sur le menu latéral.
   Mesure : 1250 px de contenu, or la colonne reste plafonnée à 1240 px
   tant que la fenêtre n'atteint pas 1500 px — d'où ce seuil. */
@media (max-width:1260px){ nav.primary{ display:none; } .burger{ display:inline-flex; } }
@media (max-width:680px){
  :root{ --header-h:78px; }
  .crest-mark{ width:50px; height:50px; }
  .crest-halo{ inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); }
  .brand-text .name{ font-size:14.5px; }
  .brand{ gap:12px; }
  .name-row{ gap:10px; }
  .flag-mount{ padding-inline-start:7px; }
  .dj-flag{ width:36px; height:24px; }
  .brand-text .motto{ display:none; }
  .header-row{ gap:12px; }
  .burger{ padding:9px 11px; font-size:11px; }
  /* le bouton d'alerte se réduit à son pictogramme pour ne pas déborder */
  .header-cta{ padding:11px 13px; }
  .header-cta > span[data-i18n="header.cta"]{ display:none; }
  .header-cta::before{ content:"⚑"; font-size:16px; line-height:1; }
}
@media (max-width:400px){
  .brand-text .name{ font-size:13px; }
  .dj-flag{ width:30px; height:20px; }
  .burger span:first-child{ display:none; }
  .burger{ padding:9px 12px; }
}

/* =========================================================================
   BOUTON « SIGNALER UN INCIDENT » + POPOVER
   ========================================================================= */
.alert-menu{ position:relative; }
.header-cta{
  background:var(--red-star); color:#fff; font-weight:700; font-size:13px;
  padding:12px 16px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  border:none; cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.header-cta:hover{ background:#a30d25; transform:translateY(-1px); }
.header-cta .chev{ transition:transform .25s var(--ease); }
.header-cta[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* =========================================================================
   ═══ « SIGNALER UN INCIDENT » — RAIL VERTICAL ═══
   Le panneau ne déborde plus : il conserve exactement la largeur du bouton
   et se déplie vers le bas comme une ligne de vie graduée. Un rail lumineux
   se remplit de haut en bas, chaque option s'accroche à son nœud.
   ========================================================================= */
.alert-menu{ position:relative; }

.header-cta{ position:relative; z-index:96; }
.header-cta .cta-chev{
  display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.18); transition:transform .32s var(--ease), background .25s var(--ease);
}
.header-cta[aria-expanded="true"] .cta-chev{ transform:rotate(180deg); background:rgba(255,255,255,.3); }

.alert-pop{
  position:absolute; inset-inline-start:0; width:100%;      /* largeur du bouton, à l'identique */
  top:calc(100% + 10px); z-index:95; padding:14px 0 10px;
  border-radius:var(--r-md); overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(108,172,228,.16), transparent 60%),
    linear-gradient(180deg, rgba(9,42,68,.94) 0%, rgba(4,22,36,.96) 100%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 26px 56px -14px rgba(2,12,22,.6), 0 0 0 1px rgba(108,172,228,.18) inset;
  opacity:0; visibility:hidden;
  transform-origin:top center; transform:scaleY(.6) translateY(-6px);
  transition:opacity .22s var(--ease), transform .34s cubic-bezier(.22,1.25,.36,1), visibility .22s;
}
.alert-pop[data-open="true"]{ opacity:1; visibility:visible; transform:scaleY(1) translateY(0); }

/* rail : la ligne de vie qui se remplit une fois le panneau ouvert */
.rail{
  position:absolute; inset-block:34px 18px; inset-inline-start:26px; width:2px;
  background:rgba(108,172,228,.18); border-radius:2px; overflow:hidden;
}
.rail-fill{
  position:absolute; inset-inline:0; top:0; height:0;
  background:linear-gradient(180deg, var(--stripe-blue), var(--stripe-green));
  transition:height .7s .12s var(--ease);
}
.alert-pop[data-open="true"] .rail-fill{ height:100%; }

.rail-head{
  display:flex; align-items:center; gap:7px; padding:0 16px 12px 16px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue);
}
html[lang="ar"] .rail-head{ font-family:'Cairo',monospace; letter-spacing:0; }
.rail-live-dot{
  width:5px; height:5px; border-radius:50%; background:var(--stripe-green);
  box-shadow:0 0 8px var(--stripe-green); animation:tag-dot 2.2s ease-in-out infinite; flex-shrink:0;
}

/* --- une option = un nœud sur le rail --- */
.ri{
  --acc:var(--stripe-blue);
  position:relative; display:flex; align-items:center; gap:11px;
  /* rembourrage logique : suit le côté où vivent réellement le rail, le
     nœud et l'icône (inline-start), qui basculent eux aussi en arabe —
     avec un rembourrage physique figé à gauche, l'icône se retrouvait
     sans respiration du bon côté en RTL (bug réel corrigé) */
  padding-block:9px; padding-inline-start:16px; padding-inline-end:14px;
  text-decoration:none; color:#eaf3f9;
  opacity:0; transform:translateY(-8px);
  transition:background .2s var(--ease);
}
.alert-pop[data-open="true"] .ri{ animation:ri-drop .42s var(--ease) forwards; }
.alert-pop[data-open="true"] .ri:nth-of-type(1){ animation-delay:.10s; }
.alert-pop[data-open="true"] .ri:nth-of-type(2){ animation-delay:.19s; }
.alert-pop[data-open="true"] .ri:nth-of-type(3){ animation-delay:.28s; }
.alert-pop[data-open="true"] .ri:nth-of-type(4){ animation-delay:.37s; }
@keyframes ri-drop{ to{ opacity:1; transform:translateY(0); } }
.ri:hover, .ri:focus-visible{ background:rgba(255,255,255,.06); }

.ri-call{ --acc:#ff7d8c; }
.ri-whatsapp{ --acc:#25D366; }
.ri-radio{ --acc:var(--stripe-blue); cursor:default; }
.ri-form{ --acc:#9fb3c2; }

/* le nœud qui pique le rail */
.ri-node{
  position:absolute; inset-inline-start:6px; width:9px; height:9px; border-radius:50%;
  background:var(--navy-deep); border:2px solid var(--acc); flex-shrink:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ri:hover .ri-node{ transform:scale(1.35); box-shadow:0 0 10px var(--acc); }
.ri-pulse{
  position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--acc);
  animation:pin-ping 2.6s ease-out infinite;
}

.ri-ico{
  width:28px; height:28px; flex-shrink:0; display:grid; place-items:center;
  border-radius:9px; margin-inline-start:14px;
  background:color-mix(in srgb, var(--acc) 18%, transparent);
  background:rgba(108,172,228,.16);
  background:color-mix(in srgb, var(--acc) 18%, transparent);
  color:var(--acc); transition:transform .25s var(--ease);
}
.ri:hover .ri-ico{ transform:scale(1.08); }

.ri-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.ri-t{ font-size:12px; font-weight:700; color:#eaf3f9; white-space:nowrap; }
.ri-v{
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:#9fbdd4;
  margin-top:1px; white-space:nowrap; direction:ltr;
}
html[lang="ar"] .ri-v{ font-family:'Cairo',monospace; }
html[dir="rtl"] .ri-v{ direction:rtl; }

/* en arabe, le rail bascule à droite */
/* rail et nœuds utilisent déjà inset-inline-start, qui bascule tout seul
   à droite en arabe : la précédente surcharge RTL les forçait au contraire
   vers la gauche, les déconnectant des icônes (bug réel corrigé) */

@media (prefers-reduced-motion: reduce){
  .alert-pop{ transform:none; }
  .ri{ opacity:1; transform:none; animation:none !important; }
  .rail-fill{ transition:none; height:100%; }
  .ri-pulse, .rail-live-dot{ animation:none !important; }
}




/* =========================================================================
   TIROIR MOBILE
   ========================================================================= */
.drawer{ position:fixed; inset:0; z-index:120; visibility:hidden; pointer-events:none; }
.drawer[data-open="true"]{ visibility:visible; pointer-events:auto; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(6,42,69,.6);
  opacity:0; transition:opacity .3s var(--ease); }
.drawer[data-open="true"] .drawer-scrim{ opacity:1; }
.drawer-panel{
  position:absolute; inset-block:0; inset-inline-end:0; width:min(340px,86vw);
  background:var(--hull); padding:26px 26px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; gap:6px;
}
html[dir="rtl"] .drawer-panel{ transform:translateX(-100%); }
.drawer[data-open="true"] .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.drawer-close{ background:none; border:1px solid var(--line); cursor:pointer; padding:9px 13px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--navy-deep); }
.drawer-panel a.dlink{ padding:15px 0; border-bottom:1px solid var(--line);
  font-size:16px; font-weight:600; color:var(--navy-deep); }
.drawer-panel a.dlink:hover{ color:var(--stripe-blue-deep); }
.drawer-foot{ margin-top:26px; display:grid; gap:12px; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; font-size:14px; font-weight:700; border:1px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.btn-alert{ background:var(--red-star); color:#fff; }
.btn-alert:hover{ background:#a30d25; transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(108,172,228,.55); color:#eaf3f9; }
.btn-ghost:hover{ border-color:var(--stripe-blue); background:rgba(108,172,228,.12); transform:translateY(-2px); }
.btn-light{ background:#fff; color:var(--stripe-green-deep); }
.btn-light:hover{ transform:translateY(-2px); }
.btn-dark{ background:var(--navy-deep); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); }
.btn-outline{ border-color:var(--line); color:var(--navy-deep); background:#fff; }
.btn-outline:hover{ border-color:var(--stripe-blue); transform:translateY(-2px); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* =========================================================================
   BOUTON D'ÉCOUTE (synthèse vocale)
   ========================================================================= */
.listen{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--stripe-blue-deep);
  font-size:12px; font-weight:600; letter-spacing:.04em; padding:8px 13px;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.listen:hover{ border-color:var(--stripe-blue); background:#fff; }
.listen[data-state="playing"]{ background:var(--stripe-blue-deep); color:#fff; border-color:var(--stripe-blue-deep); }
.listen .bars{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.listen .bars span{ width:2px; background:currentColor; height:4px; }
.listen[data-state="playing"] .bars span{ animation:eq .9s ease-in-out infinite; }
.listen[data-state="playing"] .bars span:nth-child(2){ animation-delay:.15s; }
.listen[data-state="playing"] .bars span:nth-child(3){ animation-delay:.3s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:12px; } }
.listen.on-dark{ border-color:rgba(108,172,228,.5); color:var(--stripe-blue); }
.listen.on-dark:hover{ background:rgba(108,172,228,.12); }

/* =========================================================================
   HERO — carrousel
   ========================================================================= */
.hero{
  position:relative; overflow:hidden; color:#eaf3f9;
  background:radial-gradient(130% 150% at 12% -10%, var(--navy-soft) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%);
  padding:88px 0 0;
}
html[dir="rtl"] .hero{ background:radial-gradient(130% 150% at 88% -10%, var(--navy-soft) 0%, var(--navy-mid) 45%, var(--navy-deep) 100%); }
.hero .stripe-set i:nth-child(1){ left:-4%; width:26px;  background:var(--stripe-blue);  opacity:.16; }
.hero .stripe-set i:nth-child(2){ left:1%;  width:92px;  background:var(--stripe-blue);  opacity:.16; }
.hero .stripe-set i:nth-child(3){ left:12%; width:118px; background:var(--stripe-green); opacity:.16; }

.hero-grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; padding-bottom:118px; }

.slides{ position:relative; min-height:330px; }
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.slide[data-active="true"]{ opacity:1; visibility:visible; transform:none; position:relative; }
.hero h1, .hero .h-title{
  font-family:'Source Serif 4',serif; font-weight:600;
  font-size:clamp(31px,4.3vw,54px); line-height:1.14; letter-spacing:-.01em; margin:20px 0 22px;
}
.hero h1 em, .hero .h-title em{ font-style:italic; color:var(--stripe-blue); }
html[lang="ar"] .hero h1 em, html[lang="ar"] .hero .h-title em{ font-style:normal; }
.hero p.lede{ font-size:17.5px; line-height:1.66; color:#c3d9e8; max-width:530px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.slide-nav{ display:flex; align-items:center; gap:18px; margin-top:34px; }
.dots{ display:flex; gap:9px; }
.dots button{
  width:36px; height:4px; border:none; cursor:pointer; padding:0;
  background:rgba(234,243,249,.28); transition:background .25s var(--ease);
}
.dots button[aria-selected="true"]{ background:var(--stripe-blue); }
.slide-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#9fbdd4; }
.slide-pause{
  background:none; border:1px solid rgba(234,243,249,.28); color:#c3d9e8;
  cursor:pointer; padding:6px 10px; font-size:11px; font-family:'IBM Plex Mono',monospace;
}
.slide-pause:hover{ border-color:var(--stripe-blue); color:#fff; }

.crest-stage{ position:relative; width:min(470px,86vw); aspect-ratio:1/1; margin:0 auto; }
.crest-ring{ position:absolute; inset:0; }
.crest-emblem{ position:absolute; inset:13%;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)); animation:crest-in 1.1s var(--ease) both; }
@keyframes crest-in{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
.ring-rotate{ transform-origin:50% 50%; animation:spin 150s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.radar{ transform-origin:230px 230px; animation:radar 5s linear infinite; }
@keyframes radar{ to{ transform:rotate(360deg); } }

.hero-ticker-bar{ position:absolute; bottom:0; inset-inline:0; z-index:3;
  background:rgba(6,42,69,.82); backdrop-filter:blur(8px);
  border-top:1px solid rgba(108,172,228,.3); }
.ticker{ display:flex; gap:56px; white-space:nowrap; width:max-content;
  padding:13px 0; animation:ticker 34s linear infinite;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; color:#a9c6db; }
.ticker span{ display:inline-flex; gap:9px; align-items:center; }
.ticker b{ color:var(--stripe-green); font-weight:700; }
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
html[dir="rtl"] .ticker{ direction:rtl; animation-name:ticker-rtl; }
@keyframes ticker-rtl{ from{transform:translateX(0);} to{transform:translateX(50%);} }

@media (max-width:960px){
  .hero{ padding-top:56px; }
  .hero-grid{ grid-template-columns:1fr; padding-bottom:96px; gap:30px; }
  .hero-instrument{ order:-1; }
  .crest-stage{ width:min(300px,68vw); }
  .slides{ min-height:390px; }
  .hero-actions .btn{ flex:1 1 210px; }
}
@media (max-width:560px){ .slides{ min-height:430px; } }

/* =========================================================================
   BANNIÈRE DE PAGE INTÉRIEURE
   ========================================================================= */
.page-hero{
  position:relative; overflow:hidden; color:#eaf3f9; padding:66px 0 62px;
  background:radial-gradient(130% 160% at 15% -20%, var(--navy-soft) 0%, var(--navy-mid) 48%, var(--navy-deep) 100%);
}
.page-hero .stripe-set i:nth-child(1){ left:78%; width:20px; background:var(--stripe-blue); opacity:.18; }
.page-hero .stripe-set i:nth-child(2){ left:82%; width:66px; background:var(--stripe-blue); opacity:.18; }
.page-hero .stripe-set i:nth-child(3){ left:92%; width:80px; background:var(--stripe-green); opacity:.18; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:clamp(30px,4vw,50px);
  line-height:1.14; margin:16px 0 16px; max-width:800px;
}
.page-hero p{ color:#c3d9e8; max-width:620px; font-size:17px; }
.crumb{
  display:flex; align-items:center; gap:10px; list-style:none;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#9fbdd4;
}
.crumb a:hover{ color:#fff; }
.crumb li+li::before{ content:"/"; margin-inline-end:10px; opacity:.5; }
.crumb li{ display:flex; align-items:center; }
.crumb [aria-current="page"]{ color:var(--stripe-blue); }

/* =========================================================================
   SECTIONS
   ========================================================================= */
section{ padding:100px 0; }
section[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }
.section-flush{ padding:0; }
.section-tight{ padding:76px 0; }
.section-head{ max-width:700px; margin-bottom:56px; }
.section-head h2{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:clamp(27px,3vw,39px);
  line-height:1.2; margin-top:16px; color:var(--navy-deep);
}
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:16px; max-width:580px; }
.on-dark .section-head h2{ color:#eaf3f9; }
.on-dark .section-head p{ color:#bad2e2; }
.head-row{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:52px; }
.head-row .section-head{ margin-bottom:0; }

/* --------- MISSIONS --------- */
.missions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.mission-card{ background:var(--hull); padding:38px 32px; position:relative;
  overflow:hidden; transition:background .25s var(--ease);
  display:flex; flex-direction:column; }
.mission-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:-40px; width:26px;
  background:linear-gradient(to right, var(--stripe-blue) 0 34%, transparent 34% 46%, var(--stripe-green) 46% 100%);
  transform:skewX(var(--skew)); transition:inset-inline-start .3s var(--ease);
}
.mission-card:hover{ background:#fff; }
.mission-card:hover::before{ inset-inline-start:-8px; }
.mission-card .code{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--stripe-blue-deep); font-weight:600; margin-bottom:18px; display:block; }
.mission-card h3{ font-family:'Source Serif 4',serif; font-weight:600; font-size:19px;
  color:var(--navy-deep); margin-bottom:10px; }
.mission-card p{ font-size:14.5px; color:var(--ink-soft); }
.mission-card .listen{ margin-top:20px; align-self:flex-start; }
.mission-card > svg{ position:absolute; top:34px; inset-inline-end:30px; opacity:.85; }
@media (max-width:960px){ .missions-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .missions-grid{ grid-template-columns:1fr; } }

/* --------- ZONE --------- */
.zone-section{ background:var(--navy-deep); color:#eaf3f9; position:relative; overflow:hidden; }
.zone-section .stripe-set i:nth-child(1){ left:88%; width:18px; background:var(--stripe-blue); opacity:.13; }
.zone-section .stripe-set i:nth-child(2){ left:92%; width:60px; background:var(--stripe-blue); opacity:.13; }
.zone-section .stripe-set i:nth-child(3){ left:100%; width:74px; background:var(--stripe-green); opacity:.13; }
.zone-grid{ position:relative; z-index:2; display:grid;
  grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.zone-map-box{ border:1px solid rgba(108,172,228,.28);
  background:radial-gradient(120% 120% at 30% 20%, #0f4a75 0%, #062a45 72%); padding:24px; }
.zone-copy h2{ font-family:'Source Serif 4',serif; font-weight:600; font-size:clamp(25px,3vw,35px);
  line-height:1.2; margin:16px 0; color:#eaf3f9; }
.zone-copy > p{ color:#bad2e2; max-width:490px; }
.zone-list{ margin-top:30px; }
.zone-item{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid rgba(242,246,249,.16); font-size:14.5px; }
.zone-item:first-child{ border-top:1px solid rgba(242,246,249,.16); }
.zone-item .name{ font-weight:600; color:#eaf3f9; }
.zone-item .coord{ font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--stripe-blue); white-space:nowrap; direction:ltr; }
@media (max-width:960px){ .zone-grid{ grid-template-columns:1fr; gap:40px; } }

/* --------- STATS --------- */
.stats-band{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:48px 30px; border-inline-start:1px solid var(--line); position:relative; }
.stat::before{
  content:""; position:absolute; top:0; inset-inline-start:30px; width:38px; height:4px;
  background:linear-gradient(to right, var(--stripe-blue) 0 42%, transparent 42% 52%, var(--stripe-green) 52% 100%);
  transform:skewX(var(--skew));
}
.stat:first-child{ border-inline-start:none; }
.stat .figure{ font-family:'Source Serif 4',serif; font-weight:600; font-size:44px;
  color:var(--stripe-green-deep); line-height:1.05; margin-bottom:10px; }
.stat .label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:960px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3){ border-inline-start:none; } }
@media (max-width:600px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-inline-start:none; border-top:1px solid var(--line); padding:34px 24px; }
  .stat:first-child{ border-top:none; }
}

/* --------- FLOTTE --------- */
.fleet-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.fleet-card{ border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.fleet-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(6,42,69,.12); }
.fleet-visual{ height:180px; position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
  display:flex; align-items:center; justify-content:center; }
.fleet-visual .stripe-set i:nth-child(1){ left:6%;  width:9px;  background:var(--stripe-blue);  opacity:.5; }
.fleet-visual .stripe-set i:nth-child(2){ left:10%; width:30px; background:var(--stripe-blue);  opacity:.5; }
.fleet-visual .stripe-set i:nth-child(3){ left:20%; width:38px; background:var(--stripe-green); opacity:.5; }
.fleet-visual svg{ position:relative; z-index:2; }
.fleet-body{ padding:24px 26px 28px; flex:1; display:flex; flex-direction:column; }
.fleet-body .class{ font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--stripe-blue-deep); letter-spacing:.12em; margin-bottom:9px; }
.fleet-body h3{ font-family:'Source Serif 4',serif; font-size:19px; font-weight:600;
  color:var(--navy-deep); margin-bottom:10px; line-height:1.28; }
.fleet-body p{ font-size:14px; color:var(--ink-soft); flex:1; }
.fleet-specs{ display:flex; gap:20px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
.fleet-specs div{ font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.06em; color:var(--ink-soft); }
.fleet-specs b{ display:block; color:var(--navy-deep); font-size:14px; margin-top:3px; }
@media (max-width:960px){ .fleet-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .fleet-grid{ grid-template-columns:1fr; } }

/* --------- ACTUALITÉS --------- */
.news-section{ background:var(--hull-2); }
.news-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:26px; }
.news-grid.even{ grid-template-columns:repeat(3,1fr); }
.news-card{ border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.news-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(6,42,69,.12); }
.news-thumb{ height:196px; position:relative; overflow:hidden;
  background:linear-gradient(140deg, var(--navy-mid), var(--navy-deep)); }
.news-thumb .stripe-set i:nth-child(1){ left:14%; width:12px; background:var(--stripe-blue);  opacity:.55; }
.news-thumb .stripe-set i:nth-child(2){ left:19%; width:40px; background:var(--stripe-blue);  opacity:.55; }
.news-thumb .stripe-set i:nth-child(3){ left:31%; width:50px; background:var(--stripe-green); opacity:.55; }
.news-thumb.g{ background:linear-gradient(140deg, var(--stripe-green-deep), #0b4a2f); }
.news-thumb.b{ background:linear-gradient(140deg, var(--stripe-blue-deep), var(--navy-deep)); }
.news-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.news-date{ font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--stripe-green-deep); letter-spacing:.08em; margin-bottom:11px; }
.news-body h3{ font-family:'Source Serif 4',serif; font-weight:600; font-size:18px;
  color:var(--navy-deep); margin-bottom:9px; line-height:1.34; }
.news-body p{ font-size:13.5px; color:var(--ink-soft); flex:1; }
.news-body .listen{ margin-top:18px; align-self:flex-start; }
@media (max-width:960px){ .news-grid, .news-grid.even{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .news-grid, .news-grid.even{ grid-template-columns:1fr; } }

/* --------- BULLETIN DE MER (météo + marée) --------- */
.sea-section{ background:var(--navy-deep); color:#eaf3f9; position:relative; overflow:hidden; }
.sea-section .stripe-set i:nth-child(1){ left:-3%; width:18px; background:var(--stripe-blue); opacity:.12; }
.sea-section .stripe-set i:nth-child(2){ left:1%;  width:60px; background:var(--stripe-blue); opacity:.12; }
.sea-section .stripe-set i:nth-child(3){ left:9%;  width:74px; background:var(--stripe-green); opacity:.12; }
.sea-section .wrap{ position:relative; z-index:2; }
.sea-live{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.12em; color:var(--stripe-green); text-transform:uppercase; }
.sea-live .pulse{ width:8px; height:8px; border-radius:50%; background:var(--stripe-green);
  animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.82);} }

.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(242,246,249,.18); border:1px solid rgba(242,246,249,.18); margin-top:34px; }
.metric{ background:var(--navy-deep); padding:26px 24px; }
.metric-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue); margin-bottom:10px; }
.metric-value{ font-family:'Source Serif 4',serif; font-size:33px; font-weight:600; line-height:1.1; }
.metric-value small{ font-size:15px; font-weight:500; color:#bad2e2; margin-inline-start:4px; }
.metric-sub{ font-size:12.5px; color:#a9c6db; margin-top:6px; }
@media (max-width:900px){ .metrics{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .metrics{ grid-template-columns:1fr; } }

.tide-box{ margin-top:26px; border:1px solid rgba(242,246,249,.18); padding:26px 24px; }
.tide-head{ display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.tide-head h3{ font-family:'Source Serif 4',serif; font-size:19px; font-weight:600; }
.tide-next{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--stripe-blue); }
.tide-chart{ width:100%; height:132px; display:block; }
.sea-note{ margin-top:16px; font-size:12px; color:#8fa9bd; }
.sea-note a{ text-decoration:underline; text-underline-offset:3px; }

/* --------- RECRUTEMENT --------- */
.recruit-band{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(115deg, #1d5f12 0%, var(--stripe-green) 68%, #56be3a 100%); }
.recruit-band .stripe-set i:nth-child(1){ left:70%; width:16px; background:#fff; opacity:.22; }
.recruit-band .stripe-set i:nth-child(2){ left:74%; width:54px; background:#fff; opacity:.22; }
.recruit-band .stripe-set i:nth-child(3){ left:83%; width:68px; background:var(--stripe-blue); opacity:.5; }
.recruit-inner{ position:relative; z-index:2; display:flex; justify-content:space-between;
  align-items:center; gap:44px; flex-wrap:wrap; padding:72px 0; }
.recruit-inner .bearing-label{ color:#e7f7e1; }
.recruit-inner .bearing-label::before{
  background:linear-gradient(90deg,#fff 0 46%, transparent 46% 54%, #fff 54% 96%, transparent 96%); }
.recruit-inner h2{ font-family:'Source Serif 4',serif; font-weight:600; font-size:clamp(25px,3vw,35px);
  line-height:1.2; max-width:520px; margin-top:14px; }
.recruit-inner p{ margin-top:14px; color:#eafbe4; max-width:470px; font-size:15px; }

/* --------- CONTACT --------- */
.contact-section{ background:var(--navy-deep); color:#eaf3f9; }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(242,246,249,.18); border:1px solid rgba(242,246,249,.18); }
.contact-card{ background:var(--navy-deep); padding:36px 32px; position:relative; }
.contact-card::before{
  content:""; position:absolute; top:0; inset-inline-start:32px; width:34px; height:4px;
  background:linear-gradient(to right, var(--stripe-blue) 0 42%, transparent 42% 52%, var(--stripe-green) 52% 100%);
  transform:skewX(var(--skew));
}
.contact-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  color:var(--stripe-blue); margin-bottom:14px; text-transform:uppercase; }
.contact-card h3{ font-family:'Source Serif 4',serif; font-size:20px; font-weight:600;
  margin-bottom:10px; line-height:1.25; }
.contact-card p{ font-size:14px; color:#bad2e2; }
.contact-card .big{ font-family:'IBM Plex Mono',monospace; font-size:25px; font-weight:600;
  color:#fff; margin-top:8px; direction:ltr; display:inline-block; }
.contact-card a.big:hover{ color:var(--stripe-blue); }
@media (max-width:960px){ .contact-grid{ grid-template-columns:1fr; } }

/* --------- FORMULAIRE --------- */
.form-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
@media (max-width:960px){ .form-layout{ grid-template-columns:1fr; gap:44px; } }
.form-card{ background:#fff; border:1px solid var(--line); padding:38px 36px; }
@media (max-width:560px){ .form-card{ padding:28px 22px; } }
.field{ margin-bottom:22px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy-deep); margin-bottom:8px; }
.field .req{ color:var(--red-star); }
.field .hint{ font-size:12.5px; color:var(--ink-soft); font-weight:400; margin-top:3px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); background:var(--hull);
  font-family:inherit; font-size:15px; color:var(--ink); transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ background:#fff; border-color:var(--stripe-blue); }
.field textarea{ min-height:150px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0; } }
.field .err{ display:none; font-size:12.5px; color:var(--red-star); margin-top:6px; font-weight:600; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-color:var(--red-star); background:#fff5f6; }
.field[data-invalid="true"] .err{ display:block; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.consent input{ width:auto; margin-top:3px; flex-shrink:0; }
.form-status{ margin-top:20px; padding:16px 18px; font-size:14px; display:none; }
.form-status[data-type="ok"]{ display:block; background:#eaf7e6; border-inline-start:4px solid var(--stripe-green); color:#1d5f12; }
.form-status[data-type="err"]{ display:block; background:#fdeced; border-inline-start:4px solid var(--red-star); color:#8f0c20; }
.form-aside{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.aside-card{ background:#fff; padding:28px 26px; }
.aside-card .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  color:var(--stripe-blue-deep); text-transform:uppercase; margin-bottom:12px; }
.aside-card h3{ font-family:'Source Serif 4',serif; font-size:18px; font-weight:600;
  color:var(--navy-deep); margin-bottom:8px; }
.aside-card p{ font-size:14px; color:var(--ink-soft); }
.aside-card .big{ font-family:'IBM Plex Mono',monospace; font-size:23px; font-weight:600;
  color:var(--navy-deep); display:inline-block; margin-top:6px; direction:ltr; }
.urgent-note{ background:#fdeced; border-inline-start:4px solid var(--red-star);
  padding:18px 20px; margin-bottom:28px; font-size:14px; color:#8f0c20; }
.urgent-note b{ display:block; margin-bottom:4px; }

/* --------- CONTENU ÉDITORIAL --------- */
.prose{ max-width:760px; }
.prose h2{ font-family:'Source Serif 4',serif; font-weight:600; font-size:clamp(24px,2.6vw,32px);
  color:var(--navy-deep); margin:44px 0 16px; line-height:1.24; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:'Source Serif 4',serif; font-weight:600; font-size:20px;
  color:var(--navy-deep); margin:32px 0 12px; }
.prose p{ margin-bottom:18px; color:var(--ink-soft); font-size:16px; }
.prose ul{ margin:0 0 22px; padding-inline-start:22px; color:var(--ink-soft); }
.prose li{ margin-bottom:9px; }
.prose strong{ color:var(--navy-deep); }
.callout{ border-inline-start:4px solid var(--stripe-blue); background:#fff;
  padding:22px 26px; margin:28px 0; }
.callout p{ margin:0; }

/* --------- ÉTAPES --------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{ background:#fff; border:1px solid var(--line); padding:32px 28px; position:relative; }
.step .n{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--stripe-blue-deep);
  letter-spacing:.14em; margin-bottom:16px; display:block; font-weight:600; }
.step h3{ font-family:'Source Serif 4',serif; font-size:18px; font-weight:600;
  color:var(--navy-deep); margin-bottom:9px; }
.step p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(50% 70% at 90% 0%, rgba(108,172,228,.08), transparent 60%),
    radial-gradient(40% 60% at 6% 100%, rgba(67,176,42,.06), transparent 65%),
    #04202f;
  color:#9db6c6; padding:0 0 30px;
}
.footer-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .95fr .95fr .95fr; column-gap:40px; row-gap:36px;
  padding:48px 0 28px; align-items:start;
}
.footer-brand{ display:flex; gap:15px; align-items:center; padding-inline-end:12px; }
.footer-brand .name{ font-family:'Public Sans',sans-serif; font-weight:800; text-transform:uppercase;
  color:#e9f2f8; font-size:15px; line-height:1.3; letter-spacing:.015em; }
.footer-brand p{ margin-top:11px; font-size:13px; line-height:1.6; color:#8aa5b7; max-width:280px; }

/* --------- en-têtes de colonne : un repère de couleur propre à chacune,
   alignés sur la même ligne de base que l'enseigne --------- */
.footer-col{ padding-top:2px; }
.footer-col h2{
  position:relative; display:flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#eaf3f9; margin-bottom:18px; font-weight:600;
}
.footer-col h2::before{
  content:""; width:14px; height:3px; border-radius:2px; flex-shrink:0;
  background:var(--stripe-blue);
}
.footer-col:nth-of-type(2) h2::before{ background:var(--stripe-green); }
.footer-col:nth-of-type(3) h2::before{ background:var(--gold-bright); }
html[lang="ar"] .footer-col h2{ font-family:'Cairo',monospace; letter-spacing:0; }

.footer-col a{
  position:relative; display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:#bdd0dd; padding:8px 0 8px 13px;
  margin-inline-start:-13px; transition:color .22s var(--ease), padding-inline-start .22s var(--ease);
}
.footer-col a::before{
  content:""; position:absolute; inset-inline-start:0; top:50%; width:5px; height:5px;
  border-radius:50%; background:rgba(108,172,228,.5); transform:translateY(-50%) scale(0);
  transition:transform .22s var(--ease);
}
.footer-col a:hover{ color:#fff; padding-inline-start:19px; }
.footer-col a:hover::before{ transform:translateY(-50%) scale(1); }

/* --------- pied de bas de page : signature institutionnelle claire,
   alignée précisément avec le copyright --------- */
.footer-bottom{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:22px; border-top:1px solid rgba(157,182,198,.16); font-size:12px;
  color:#8aa5b7; flex-wrap:wrap; gap:14px;
}
.footer-bottom span{ line-height:1; }
.footer-seal{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; line-height:1; }
.footer-seal .bars{ display:inline-flex; height:13px; width:26px; border-radius:2px; overflow:hidden; flex-shrink:0; }
.footer-seal .bars i{ flex:1; display:block; }
.footer-seal .bars i:nth-child(1){ background:var(--stripe-blue); }
.footer-seal .bars i:nth-child(2){ background:#fff; }
.footer-seal .bars i:nth-child(3){ background:var(--stripe-green); }
.footer-seal span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#7d9cb2; white-space:nowrap;
}
html[lang="ar"] .footer-seal span{ font-family:'Cairo',monospace; letter-spacing:0; }

@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; row-gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* --------- barre SOS mobile + retour haut --------- */
.sos-bar{ display:none; position:fixed; inset-inline:0; bottom:0; z-index:90;
  background:var(--red-star); color:#fff; text-align:center; padding:14px 16px;
  font-weight:700; font-size:14.5px; box-shadow:0 -6px 20px rgba(6,42,69,.25); }
/* la compensation ne portait que sur le pied de page : l'enquete de
   satisfaction, ajoutee plus tard juste apres lui, se retrouvait sous la
   barre rouge fixe sans le savoir -- le bas de l'enquete (les visages)
   restait recouvert (bug reel corrige) */
@media (max-width:680px){
  .sos-bar{ display:block; }
  footer{ padding-bottom:78px; }
  /* #csat (id) plutot que .csat (classe) : la regle de base ".csat{
     padding:30px 0; }" arrive plus loin dans la feuille de style et
     l'emportait malgre la media query -- meme regle CSS, ordre de
     source different (bug reel corrige avec une specificite superieure) */
  #csat{ padding-bottom:78px; }
}

.to-top{ position:fixed; inset-inline-end:24px; bottom:24px; z-index:70;
  width:46px; height:46px; background:var(--navy-deep); color:#fff; border:none; cursor:pointer;
  display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease); }
.to-top.is-visible{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px); }
@media (max-width:680px){ .to-top{ display:none; } }

/* =========================================================================
   IMPRESSION
   ========================================================================= */
@media print{
  .topbar, .drawer, .burger, .alert-menu, .hero-ticker-bar, .to-top, .sos-bar,
  .stripe-set, .crest-ring, .listen, .slide-nav{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero, .page-hero, .zone-section, .contact-section, .sea-section,
  footer, .recruit-band{ background:#fff !important; color:#000 !important; }
  .hero h1, .page-hero h1, .section-head h2, .zone-copy h2, .recruit-inner h2,
  .contact-card h3, .contact-card p, .zone-item .name, .footer-brand .name,
  .page-hero p, .metric-value{ color:#000 !important; }
  header.site{ position:static; }
  section{ padding:24px 0; break-inside:avoid; }
  .slide{ position:relative !important; opacity:1 !important; visibility:visible !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; }
}

/* =========================================================================
   ADAPTATION AUX GRANDS ÉCRANS ET À LA PROJECTION
   Le site suit désormais la largeur réelle de l'écran au lieu de rester
   bloqué à 1240 px, tout en gardant des longueurs de ligne lisibles.
   ========================================================================= */
:root{
  --wrap-max:1240px;
  --pad-x:clamp(20px, 3.2vw, 56px);
  --section-y:clamp(64px, 6.2vw, 116px);
}
.wrap{ max-width:var(--wrap-max); padding-inline:var(--pad-x); }
section{ padding-block:var(--section-y); }
.section-tight{ padding-block:calc(var(--section-y) * .72); }
.section-head{ margin-bottom:clamp(34px, 3.6vw, 58px); }
.head-row{ margin-bottom:clamp(32px, 3.4vw, 54px); }

@media (min-width:1500px){
  :root{ --wrap-max:1400px; }
  html{ font-size:17px; }
}
@media (min-width:1800px){
  :root{ --wrap-max:1560px; }
  html{ font-size:18px; }
  .crest-stage{ width:min(540px, 40vw); }
}
@media (min-width:2400px){
  :root{ --wrap-max:1760px; }
  html{ font-size:20px; }
}
/* écrans de projection larges et peu hauts */
@media (min-width:1200px) and (max-height:820px){
  .hero{ padding-top:clamp(34px, 4vh, 68px); }
  .hero-grid{ padding-bottom:clamp(70px, 9vh, 112px); }
  .crest-stage{ width:min(360px, 30vw); }
  .slides{ min-height:300px; }
}

/* =========================================================================
   BANDEAU SUPÉRIEUR — pastilles d'État et pastilles d'urgence
   ========================================================================= */
.topbar{ background:linear-gradient(90deg, #05233a 0%, var(--navy-deep) 45%, #05233a 100%); }
.topbar .wrap{ min-height:44px; }

.state-dots{ display:inline-flex; gap:5px; align-items:center; }
.state-dots i{
  width:8px; height:8px; border-radius:50%; display:block;
  animation:dot-pulse 3.6s ease-in-out infinite;
}
.state-dots i:nth-child(1){ background:var(--stripe-blue);  animation-delay:0s; }
.state-dots i:nth-child(2){ background:#ffffff;             animation-delay:.28s; }
.state-dots i:nth-child(3){ background:var(--stripe-green); animation-delay:.56s; }
@keyframes dot-pulse{
  0%,70%,100%{ transform:scale(1);   opacity:.85; box-shadow:0 0 0 0 rgba(108,172,228,0); }
  18%        { transform:scale(1.5); opacity:1;   box-shadow:0 0 0 4px rgba(108,172,228,.18); }
  34%        { transform:scale(1);   opacity:.9; }
}

.urgent-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 13px 5px 6px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(108,172,228,.28);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
a.urgent-chip:hover{ background:rgba(108,172,228,.16); border-color:var(--stripe-blue); transform:translateY(-1px); }
.urgent-chip .chip-ico{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--stripe-green); color:#fff;
}
.urgent-chip .chip-ico svg{ width:14px; height:14px; }
.vhf-chip .chip-ico{ background:var(--stripe-blue-deep); }
.urgent-chip .chip-txt{ display:inline-flex; align-items:baseline; gap:7px; line-height:1; }
.urgent-chip .chip-lbl{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#a9c6db;
}
.urgent-chip b{ font-size:14px; color:#fff; letter-spacing:.02em; }
/* pulsation discrète du pictogramme d'urgence */
a.urgent-chip .chip-ico{ animation:chip-ring 4s ease-in-out infinite; }
@keyframes chip-ring{
  0%,82%,100%{ box-shadow:0 0 0 0 rgba(67,176,42,.55); }
  88%        { box-shadow:0 0 0 7px rgba(67,176,42,0); }
}
@media (max-width:640px){
  .urgent-chip{ padding:4px 10px 4px 5px; gap:7px; }
  .urgent-chip .chip-ico{ width:22px; height:22px; }
  .urgent-chip .chip-lbl{ display:none; }
  .urgent-chip b{ font-size:13px; }
}

/* =========================================================================
   ICÔNES DES CHIFFRES CLÉS
   ========================================================================= */
.stat{ display:flex; flex-direction:column; align-items:flex-start; }
.stat-ico{
  width:46px; height:46px; margin-bottom:18px; display:grid; place-items:center;
  border-radius:12px; color:var(--stripe-blue-deep);
  background:linear-gradient(140deg, rgba(108,172,228,.16), rgba(67,176,42,.14));
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.stat-ico svg{ width:25px; height:25px; }
.stat:hover .stat-ico{ transform:translateY(-3px) scale(1.05); color:var(--stripe-green-deep); }
.stat .figure{ font-variant-numeric:tabular-nums; }

/* =========================================================================
   BULLETIN DE MER — icônes et marée dynamique
   ========================================================================= */
.metric{ display:flex; flex-direction:column; }
.metric-ico{
  width:42px; height:42px; margin-bottom:16px; display:grid; place-items:center;
  border-radius:11px; color:var(--stripe-blue);
  background:rgba(108,172,228,.14); border:1px solid rgba(108,172,228,.22);
}
.metric-ico svg{ width:23px; height:23px; }
.metric-value{ font-variant-numeric:tabular-nums; }
.metric-sub{ display:flex; align-items:center; gap:7px; }
.wind-arrow{
  width:19px; height:19px; display:inline-grid; place-items:center; flex-shrink:0;
  color:var(--stripe-green); transition:transform .8s var(--ease);
}
.wind-arrow svg{ width:15px; height:15px; }

.tide-live{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid rgba(242,246,249,.14);
}
.tide-live-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue);
}
.tide-live-value{
  font-family:'Source Serif 4',serif; font-size:30px; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1;
}
.tide-trend{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--stripe-green);
}
.tide-trend svg{ width:14px; height:14px; }
.tide-chart{ width:100%; height:150px; display:block; overflow:visible; }
#tide-cursor-dot{ transition:none; }
.tide-axis{
  display:flex; justify-content:space-between; margin-top:10px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8fa9bd;
}
html[lang="ar"] .tide-live-label, html[lang="ar"] .tide-trend,
html[lang="ar"] .tide-axis{ font-family:'Cairo',monospace; letter-spacing:0; }

/* =========================================================================
   ═══ IMPLANTATIONS — VITRINE SOMBRE ═══
   Trois bases, trois couleurs, trois animations qui illustrent leur rôle
   plutôt que de simplement bouger — même langage que les chiffres clés.
   ========================================================================= */
.bases-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,3vw,48px); align-items:start; }
@media (max-width:960px){ .bases-layout{ grid-template-columns:1fr; } }
.bases-map{ border:1px solid var(--line); overflow:hidden; background:var(--navy-deep); }
.bases-map svg{ width:100%; height:auto; display:block; }
.bases-map text{ font-family:'IBM Plex Mono', monospace; font-size:11px; fill:#cfe2ee; letter-spacing:.06em; }

.base-pin .pin-dot{ fill:var(--stripe-green); }
.base-pin .pin-halo{ fill:none; stroke:var(--stripe-green); stroke-width:1.5; opacity:.6; transform-origin:center; }
.base-pin[data-base="doraleh"] .pin-dot{ fill:var(--gold-bright); }
.base-pin[data-base="doraleh"] .pin-halo{ stroke:var(--gold-bright); }
.base-pin .pin-halo{ animation:pin-ping 3s ease-out infinite; }
.base-pin[data-base="escale"] .pin-halo{ animation-delay:1s; }
.base-pin[data-base="peche"] .pin-halo{ animation-delay:2s; }
@keyframes pin-ping{
  0%      { transform:scale(.55); opacity:.85; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}
.base-pin.is-hot .pin-dot{ r:9; }
.base-pin{ transition:opacity .25s var(--ease); }

.bases-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.base-card{
  background:#fff; padding:24px 26px; position:relative;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.base-card:hover, .base-card.is-hot{ background:var(--hull); }
.base-rank{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--stripe-blue-deep); font-weight:600;
}
.base-card h3{ font-family:'Source Serif 4',serif; font-size:19px; font-weight:600; color:var(--navy-deep); margin:8px 0 4px; }
.base-role{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stripe-green-deep); margin-bottom:10px;
}
.base-card p:not(.base-role):not(.base-coord){ font-size:14px; color:var(--ink-soft); }
.base-coord{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line); direction:ltr;
}
html[lang="ar"] .base-rank, html[lang="ar"] .base-role,
html[lang="ar"] .base-coord{ font-family:'Cairo',monospace; letter-spacing:0; }

/* --------- habillage sombre de la section --------- */
.bases-dark{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(55% 85% at 90% -8%, rgba(108,172,228,.15), transparent 60%),
    radial-gradient(50% 70% at 5% 105%, rgba(232,179,84,.10), transparent 65%),
    linear-gradient(180deg, #082c48 0%, var(--navy-deep) 100%);
}
.bases-dark .stripe-set i:nth-child(1){ left:-3%; width:16px; background:var(--stripe-blue); opacity:.1; }
.bases-dark .stripe-set i:nth-child(2){ left:1%;  width:54px; background:var(--stripe-blue); opacity:.1; }
.bases-dark .stripe-set i:nth-child(3){ left:9%;  width:66px; background:var(--gold-bright); opacity:.1; }
.bases-dark .wrap{ position:relative; z-index:2; }

.bases-dark .bases-map{ border-color:rgba(108,172,228,.22); box-shadow:0 20px 44px -14px rgba(2,12,22,.5); }

.bases-dark .bases-list{ background:rgba(108,172,228,.14); border-color:rgba(108,172,228,.14); }
.bases-dark .base-card{
  --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep);
  background:linear-gradient(165deg, rgba(13,53,82,.5), rgba(6,32,56,.68));
  color:#eaf3f9;
}
.bases-dark .base-card:hover, .bases-dark .base-card.is-hot{
  background:linear-gradient(165deg, rgba(13,53,82,.72), rgba(6,32,56,.85));
}
.bases-dark .bc-hq{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }
.bases-dark .bc-op{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.bases-dark .bc-coast{ --acc-a:var(--stripe-green); --acc-b:var(--stripe-green-deep); }

.bases-dark .base-card h3{ color:#fff; }
.bases-dark .base-card p:not(.base-role):not(.base-coord){ color:#b0c9da; }
.bases-dark .base-coord{ color:#8fa9bd; border-top-color:rgba(108,172,228,.18); }
.bases-dark .base-rank{ color:var(--acc-a); }

.base-ico-wrap{ position:relative; width:44px; height:44px; margin-bottom:14px; display:grid; place-items:center; }
.base-ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  color:#fff; transition:transform .35s var(--ease);
}
.base-ico svg{ width:23px; height:23px; }
.base-card:hover .base-ico{ transform:translateY(-2px) scale(1.06); }

.base-ring{
  position:absolute; inset:-7px; border-radius:17px;
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.base-card:hover .base-ring{ animation-duration:1.8s; }

/* dégradés directs : l'or et le vert perdent leur éclat mélangés au bleu nuit */
.bc-hq .base-ico{ background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep)); box-shadow:0 6px 16px rgba(156,107,31,.4); }
.bc-hq .base-ring{ border:1.5px solid rgba(232,179,84,.55); }
.bc-op .base-ico{ background:linear-gradient(145deg, #5FA8E0, var(--stripe-blue-deep)); box-shadow:0 6px 16px rgba(27,91,138,.4); }
.bc-op .base-ring{ border:1.5px solid rgba(108,172,228,.5); }
.bc-coast .base-ico{ background:linear-gradient(145deg, #5FD97F, var(--stripe-green-deep)); box-shadow:0 6px 16px rgba(37,110,24,.4); }
.bc-coast .base-ring{ border:1.5px solid rgba(67,176,42,.5); }

/* --- Doraleh, siège : le feu du bâtiment clignote, repère qu'on distingue depuis la mer --- */
.bc-hq .base-ico .beacon{ animation:beacon-blink 2.6s ease-in-out infinite; transform-origin:16px 7px; }

/* --- Escale, base opérationnelle : le signal émet en boucle, deux arcs en cascade --- */
.bc-op .op-wave{ animation:radio-pulse 2.2s ease-in-out infinite; transform-origin:16px 8px; }
.bc-op .op-wave-1{ animation-delay:0s; }
.bc-op .op-wave-2{ animation-delay:.28s; }

/* --- Port de pêche : le bateau se balance doucement au clapot --- */
.boat-bob{ animation:boat-bob 3.4s ease-in-out infinite; transform-origin:16px 24px; }
@keyframes boat-bob{
  0%,100%{ transform:rotate(0deg) translateY(0); }
  25%{ transform:rotate(-2.5deg) translateY(-.6px); }
  75%{ transform:rotate(2.5deg) translateY(.6px); }
}

@media (prefers-reduced-motion: reduce){
  .base-ring, .bc-hq .base-ico .beacon, .bc-op .op-wave, .boat-bob{ animation:none !important; }
}



/* =========================================================================
   ═══ PANNEAU D'URGENCE ═══
   Un grand panneau d'appel domine (seul rouge du site, réservé à l'urgence
   réelle), deux cartes secondaires en colonne : radio en écoute vivante,
   siège avec repère doré identique à celui de la carte des bases.
   ========================================================================= */

.contact-panel{
  display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch;
}
.contact-stack{ display:grid; gap:20px; grid-template-rows:1fr 1fr; }
@media (max-width:900px){
  .contact-panel{ grid-template-columns:1fr; }
  .contact-stack{ grid-template-rows:none; }
}

/* --------- le panneau d'appel : seule pièce rouge du site --------- */
.sos-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:36px 34px 32px; border-radius:var(--r-lg); color:#fff; text-decoration:none;
  background:
    radial-gradient(130% 130% at 88% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(155deg, #E5334A 0%, var(--red-star) 55%, #7A0C1D 100%);
  box-shadow:0 18px 46px rgba(200,16,46,.32), 0 2px 0 rgba(255,255,255,.08) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  min-height:340px;
}
.sos-card:hover{ transform:translateY(-4px); box-shadow:0 24px 58px rgba(200,16,46,.42), 0 2px 0 rgba(255,255,255,.1) inset; }
.sos-card:focus-visible{ outline:3px solid #fff; outline-offset:4px; }

.sos-top{ position:relative; z-index:2; }
.sos-card .tag{ color:rgba(255,255,255,.82); }
.sos-card h3{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:22px; color:#fff;
  margin-top:8px; line-height:1.32; max-width:22ch;
}

/* anneaux de détresse : se propagent en continu derrière le cadran, comme un signal émis */
.sos-rings{ position:absolute; inset-inline-end:-40px; top:38px; width:220px; height:220px; z-index:1; pointer-events:none; }
.sos-rings i{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  animation:sos-ring 2.8s ease-out infinite; opacity:0;
}
.sos-rings i:nth-child(2){ animation-delay:.7s; }
.sos-rings i:nth-child(3){ animation-delay:1.4s; }
@keyframes sos-ring{
  0%{ transform:scale(.34); opacity:.75; }
  100%{ transform:scale(1); opacity:0; }
}

/* cadran d'appel : le point focal, glow marqué, icône légèrement animée */
.sos-dial{
  position:relative; z-index:2; width:76px; height:76px; margin:22px 0 4px;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(155deg, rgba(255,255,255,.24), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.5);
  box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 0 8px rgba(255,255,255,.08);
}
.sos-dial svg{ width:32px; height:32px; color:#fff; animation:phone-ring 2.4s ease-in-out infinite; transform-origin:50% 15%; }
.sos-dial-ring{
  position:absolute; inset:-9px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.4);
  animation:dial-spin 14s linear infinite;
}
@keyframes dial-spin{ to{ transform:rotate(360deg); } }

.sos-number{
  position:relative; z-index:2; font-family:'Source Serif 4',serif; font-weight:600;
  font-size:clamp(46px,5vw,60px); line-height:1; color:#fff; margin-top:4px;
  font-variant-numeric:tabular-nums; direction:ltr;
}
.sos-desc{ position:relative; z-index:2; color:rgba(255,255,255,.86); font-size:14px; margin-top:8px; max-width:32ch; }

.sos-cta{
  position:relative; z-index:2; margin-top:auto; padding-top:22px;
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:#fff;
  width:fit-content;
}
.sos-cta svg{ transition:transform .3s var(--ease); }
.sos-card:hover .sos-cta svg{ transform:translateX(4px); }
html[dir="rtl"] .sos-card:hover .sos-cta svg{ transform:translateX(-4px) scaleX(-1); }
html[dir="rtl"] .sos-cta svg{ transform:scaleX(-1); }

/* --------- cartes secondaires : icône, puce, contenu --------- */
.contact-card{
  --acc-a: var(--stripe-blue);
  --acc-b: var(--stripe-blue-deep);
  display:flex; flex-direction:column;
}
.contact-card.c-radio{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.contact-card.c-hq{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }

.contact-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

.contact-ico-wrap{ position:relative; width:50px; height:50px; display:grid; place-items:center; }
.contact-ico-wrap .contact-ico{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg, #1c4d73, #0b3f66);
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 30%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid rgba(108,172,228,.4);
  border-color:color-mix(in srgb, var(--acc-a) 45%, transparent);
  color:#fff; box-shadow:0 6px 16px rgba(6,42,69,.35);
  box-shadow:0 6px 16px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.contact-ico-wrap .contact-ico svg{ width:24px; height:24px; }
.contact-card:hover .contact-ico-wrap .contact-ico{ transform:translateY(-2px) scale(1.05); }

/* l'or a besoin de plus de saturation que le bleu pour rester lisible sur fond marine :
   dégradé direct plutôt que mélangé au bleu nuit, qui l'assourdissait */
.c-hq .contact-ico-wrap .contact-ico{
  background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep));
  border-color:rgba(232,179,84,.6);
  box-shadow:0 6px 18px rgba(156,107,31,.4);
}

.contact-ring{
  position:absolute; inset:-7px; border-radius:18px;
  border:1.5px solid rgba(108,172,228,.5);
  border-color:color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.contact-card:hover .contact-ring{ animation-duration:1.8s; }

.contact-card .big-alt{
  font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600;
  color:#fff; margin-top:10px; direction:ltr;
}
.contact-card h3{ margin-top:2px; }
.contact-card > p:last-child{ margin-top:6px; }

.contact-card::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--acc-a), var(--acc-b));
  opacity:.5; transform:scaleX(.4); transform-origin:0 0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.contact-card:hover::after{ transform:scaleX(1); opacity:.9; }

/* --- puce « en écoute » : discrète, pulsée, jamais rouge (réservé à l'urgence) --- */
.live-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px;
  border-radius:var(--r-pill); background:rgba(108,172,228,.14); border:1px solid rgba(108,172,228,.3);
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--stripe-blue);
}
html[lang="ar"] .live-chip{ font-family:'Cairo',monospace; letter-spacing:0; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--stripe-blue); animation:tag-dot 1.6s ease-in-out infinite; }

/* --- égaliseur : sept barres qui vivent comme une écoute radio active --- */
.waveform{ display:flex; align-items:flex-end; gap:4px; height:30px; margin:14px 0 2px; }
.waveform i{
  display:block; width:4px; border-radius:2px;
  background:linear-gradient(180deg, var(--stripe-blue), var(--stripe-blue-deep));
  animation:wave-bar 1.2s ease-in-out infinite;
}
.waveform i:nth-child(1){ height:35%; animation-duration:1.1s; animation-delay:-.9s; }
.waveform i:nth-child(2){ height:70%; animation-duration:.9s;  animation-delay:-.3s; }
.waveform i:nth-child(3){ height:45%; animation-duration:1.3s; animation-delay:-1.1s; }
.waveform i:nth-child(4){ height:95%; animation-duration:1s;   animation-delay:-.5s; }
.waveform i:nth-child(5){ height:55%; animation-duration:1.2s; animation-delay:-.8s; }
.waveform i:nth-child(6){ height:80%; animation-duration:.95s; animation-delay:-.15s; }
.waveform i:nth-child(7){ height:40%; animation-duration:1.15s; animation-delay:-1s; }
@keyframes wave-bar{
  0%,100%{ transform:scaleY(.4); opacity:.65; }
  50%{ transform:scaleY(1); opacity:1; }
}

/* --- siège : feu doré, identique au repère de la carte des bases --- */
.c-hq .beacon{ animation:beacon-blink 2.6s ease-in-out infinite; transform-origin:16px 7px; }
@keyframes beacon-blink{
  0%, 60%, 100%{ opacity:1; transform:scale(1); }
  78%{ opacity:.35; transform:scale(.6); }
}

@media (prefers-reduced-motion: reduce){
  .sos-rings i, .sos-dial svg, .sos-dial-ring, .contact-ring,
  .live-dot, .waveform i, .c-hq .beacon{ animation:none !important; }
}

@media (max-width:600px){
  .sos-card{ padding:30px 26px 28px; min-height:auto; }
  .sos-number{ font-size:44px; }
  .sos-rings{ width:170px; height:170px; top:20px; }
}

/* =========================================================================
   LIENS DE LECTURE ET PAGES ÉDITORIALES
   ========================================================================= */
.read-more{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px; align-self:flex-start;
  font-size:13px; font-weight:700; color:var(--stripe-blue-deep);
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:border-color .25s var(--ease), gap .25s var(--ease), color .25s var(--ease);
}
.read-more svg{ transition:transform .25s var(--ease); }
.read-more:hover{ border-bottom-color:var(--stripe-green); color:var(--stripe-green-deep); gap:13px; }
html[dir="rtl"] .read-more svg{ transform:scaleX(-1); }
html[dir="rtl"] .read-more:hover svg{ transform:scaleX(-1) translateX(2px); }
.mission-card, .news-body{ display:flex; flex-direction:column; }

.article-hero{ padding-block:clamp(48px,5vw,84px); }
.article-date{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue); margin-top:20px;
}
.article-hero h1{ margin:14px 0 18px; max-width:22ch; }
.article-chapo{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:#c3d9e8; max-width:62ch; }
.article-body .prose{ max-width:68ch; }
.article-body .prose p{ font-size:clamp(15.5px,1.15vw,17px); line-height:1.75; }
.article-foot{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:48px;
  padding-top:30px; border-top:1px solid var(--line); max-width:68ch;
}

.notice-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:8px 0 28px; }
.notice-item{ background:#fff; padding:22px 24px; display:flex; gap:18px; align-items:flex-start; }
.notice-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  padding:5px 10px; background:var(--hull-2); color:var(--ink-soft); flex-shrink:0; white-space:nowrap;
}
.notice-tag.notice-urgent{ background:var(--red-star); color:#fff; }
.notice-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--stripe-green-deep); margin-bottom:6px; }
.notice-item h3{ font-family:'Source Serif 4',serif; font-size:17px; font-weight:600; color:var(--navy-deep); margin-bottom:6px; }
.notice-item p:last-child{ font-size:14px; color:var(--ink-soft); margin:0; }
@media (max-width:560px){ .notice-item{ flex-direction:column; gap:12px; } }

/* =========================================================================
   ═══ PASSE DE MODERNISATION ═══
   Profondeur, arrondis maîtrisés, micro-interactions.
   Le racing stripe reste angulaire : c'est l'élément réglementaire.
   ========================================================================= */
:root{
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(6,42,69,.05), 0 2px 8px rgba(6,42,69,.05);
  --sh-2:0 2px 6px rgba(6,42,69,.06), 0 14px 30px rgba(6,42,69,.09);
  --sh-3:0 4px 14px rgba(6,42,69,.08), 0 28px 56px rgba(6,42,69,.14);
  --sh-dark:0 18px 44px rgba(0,0,0,.34);
  --hair:1px solid rgba(14,34,51,.10);
  --hair-invert:1px solid rgba(242,246,249,.15);
}

/* --------- typographie : rendu plus soigné --------- */
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
.hero h1, .hero .h-title, .page-hero h1{ letter-spacing:-.022em; }
.section-head h2, .zone-copy h2, .recruit-inner h2{ letter-spacing:-.018em; }
.prose p{ line-height:1.78; }

/* =========================================================================
   EN-TÊTE : verre dépoli, compression au défilement, jauge de lecture
   ========================================================================= */
header.site{
  background:rgba(242,246,249,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
header.site.is-stuck{ box-shadow:0 1px 0 rgba(14,34,51,.08), 0 10px 30px rgba(6,42,69,.09); }
.header-row{ transition:min-height .35s var(--ease); }
header.site.is-stuck .header-row{ min-height:calc(var(--header-h) - 18px); }
header.site.is-stuck .crest-mark{ transform:scale(.88); }
header.site.is-stuck .brand-text .motto{ opacity:0; height:0; margin:0; overflow:hidden; }
.crest-mark, .brand-text .motto{ transition:transform .35s var(--ease), opacity .3s var(--ease); }

.read-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  z-index:5; transition:width .12s linear;
}
html[dir="rtl"] .read-progress{ left:auto; right:0; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn{ border-radius:var(--r-pill); padding-inline:28px; letter-spacing:.005em; }
.btn-alert{
  background:linear-gradient(135deg, #D8203A, var(--red-star));
  box-shadow:0 6px 18px rgba(200,16,46,.28);
}
.btn-alert:hover{ box-shadow:0 10px 26px rgba(200,16,46,.36); }
.btn-dark{ background:linear-gradient(135deg, #0B3F66, var(--navy-deep)); box-shadow:var(--sh-1); }
.btn-dark:hover{ box-shadow:var(--sh-2); }
.btn-light{ box-shadow:0 6px 18px rgba(0,0,0,.14); }
.btn-outline{ border-radius:var(--r-pill); }
.header-cta{ border-radius:var(--r-pill); background:linear-gradient(135deg,#D8203A,var(--red-star)); box-shadow:0 4px 14px rgba(200,16,46,.26); }
.burger{ border-radius:var(--r-pill); border:var(--hair); }
.drawer-close, .slide-pause{ border-radius:var(--r-pill); }
.listen, .read-more{ border-radius:var(--r-pill); }

/* =========================================================================
   CARTES : on abandonne les séparateurs d'un pixel au profit d'objets posés
   ========================================================================= */
.missions-grid{ background:transparent; border:none; gap:18px; }
.mission-card{
  background:#fff; border:var(--hair); border-radius:var(--r-md);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mission-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(108,172,228,.5); background:#fff; }
.mission-card .code{
  display:inline-block; align-self:flex-start;      /* évite l'étirement en conteneur flex */
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(108,172,228,.12); color:var(--stripe-blue-deep); margin-bottom:16px;
}
.fleet-body .class, .news-date, .contact-card .tag, .aside-card .tag, .base-role{ align-self:flex-start; }
.mission-card > svg{ opacity:.5; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.mission-card:hover > svg{ opacity:1; transform:scale(1.1) rotate(-4deg); }

.fleet-card, .news-card{ border-radius:var(--r-md); overflow:hidden; border:var(--hair); box-shadow:var(--sh-1); }
.fleet-card:hover, .news-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }

.stats-band{ background:linear-gradient(180deg,#fff, #FAFCFD); }
.stats-grid{ gap:18px; padding-block:8px; }
.stat{
  border:var(--hair) !important; border-radius:var(--r-md); background:#fff;
  box-shadow:var(--sh-1); padding:34px 28px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat::before{ inset-inline-start:28px; top:0; }
.stat:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.stat .figure{
  background:linear-gradient(135deg, var(--stripe-green-deep), #3E9A22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.contact-grid, .metrics, .bases-list, .form-aside, .notice-list{
  background:transparent; border:none; gap:16px;
}
.contact-card, .metric{
  border:var(--hair-invert); border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover, .metric:hover{
  transform:translateY(-4px); background:rgba(255,255,255,.085); border-color:rgba(108,172,228,.42);
}
.contact-card::before{ inset-inline-start:28px; }
.aside-card, .base-card, .notice-item{
  border:var(--hair); border-radius:var(--r-md); background:#fff; box-shadow:var(--sh-1);
}
.base-card:hover, .base-card.is-hot{
  background:#fff; transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(108,172,228,.5);
}
.form-card{ border-radius:var(--r-lg); box-shadow:var(--sh-2); border:var(--hair); }
.field input, .field select, .field textarea{ border-radius:var(--r-sm); }
.urgent-note, .form-status, .callout{ border-radius:var(--r-sm); }
.tide-box, .zone-map-box, .bases-map{ border-radius:var(--r-md); }
.alert-pop{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-3); }
.notice-tag{ border-radius:var(--r-pill); }
.stat-ico{ border-radius:14px; }

/* =========================================================================
   SECTIONS SOMBRES : halos lumineux au lieu d'aplats
   ========================================================================= */
.zone-section, .contact-section, .sea-section{ position:relative; isolation:isolate; }
.zone-section::after, .contact-section::after, .sea-section::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 82% 8%,  rgba(108,172,228,.20), transparent 68%),
    radial-gradient(48% 40% at 10% 96%, rgba(67,176,42,.14),  transparent 70%);
}
.zone-section > .wrap, .contact-section > .wrap, .sea-section > .wrap{ position:relative; z-index:2; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(46% 42% at 76% 34%, rgba(108,172,228,.22), transparent 70%);
}

/* =========================================================================
   VIGNETTES D'ACTUALITÉ ILLUSTRÉES
   ========================================================================= */
.news-thumb{ background:linear-gradient(150deg,#12578A,#062A45); }
.news-thumb.g{ background:linear-gradient(150deg,#1E7A3C,#0A3F28); }
.news-thumb.b{ background:linear-gradient(150deg,#1B5B8A,#062A45); }
.news-art{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.news-art *{ vector-effect:non-scaling-stroke; }
.news-card:hover .news-art{ transform:scale(1.06); }
.news-art{ transition:transform .6s var(--ease); }
.news-thumb .stripe-set{ z-index:2; }

/* =========================================================================
   RÉVÉLATION EN CASCADE
   ========================================================================= */
.reveal{ transform:translateY(22px); }
.stagger > *{ opacity:0; transform:translateY(20px); }
.stagger.is-visible > *{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.is-visible > *:nth-child(1){ transition-delay:.02s; }
.stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.stagger.is-visible > *:nth-child(3){ transition-delay:.16s; }
.stagger.is-visible > *:nth-child(4){ transition-delay:.23s; }
.stagger.is-visible > *:nth-child(5){ transition-delay:.30s; }
.stagger.is-visible > *:nth-child(6){ transition-delay:.37s; }
@media (prefers-reduced-motion: reduce){ .stagger > *{ opacity:1 !important; transform:none !important; } }

/* =========================================================================
   RETOUR EN HAUT : anneau de progression
   ========================================================================= */
.to-top{ border-radius:50%; box-shadow:var(--sh-2); background:linear-gradient(135deg,#0B3F66,var(--navy-deep)); }
.to-top svg.ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.to-top .ring circle{ fill:none; stroke-width:2.5; }
.to-top .ring .bg{ stroke:rgba(255,255,255,.16); }
.to-top .ring .fg{ stroke:var(--stripe-green); stroke-linecap:round; transition:stroke-dashoffset .12s linear; }

/* =========================================================================
   DIVERS
   ========================================================================= */
.zone-item{ border-radius:var(--r-xs); padding-inline:14px; transition:background .25s var(--ease); }
.zone-item:hover{ background:rgba(108,172,228,.10); }
.dots button{ border-radius:var(--r-pill); }
.lang button{ border-radius:var(--r-pill); }
.emblem-header, .crest-emblem{ will-change:transform; }
::selection{ background:var(--stripe-blue); color:#04202f; }

/* barre de défilement discrète (navigateurs compatibles) */
* { scrollbar-width:thin; scrollbar-color:rgba(108,172,228,.55) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(108,172,228,.45); border-radius:var(--r-pill); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(108,172,228,.75); background-clip:content-box; }

/* =========================================================================
   CORRECTION TYPOGRAPHIQUE — jambages et accents
   Fraunces possède des descendantes longues (j, g, q, y) et des accents
   hauts (Ô, É, Â). Les hauteurs de ligne serrées les rognaient.
   On garantit ici une réserve verticale suffisante partout.
   ========================================================================= */
h1, h2, h3, h4, h5, h6{
  padding-bottom:.09em;          /* réserve pour les descendantes */
  padding-top:.02em;             /* réserve pour les accents hauts */
}

/* --- titres de héros et de bannière --- */
.hero h1, .hero .h-title{ line-height:1.22; }
.page-hero h1{ line-height:1.2; }
.article-hero h1{ line-height:1.2; }
.section-head h2, .zone-copy h2, .recruit-inner h2, .news-head h2{ line-height:1.26; }
.prose h2{ line-height:1.3; }
.prose h3{ line-height:1.32; }
.mission-card h3, .contact-card h3, .aside-card h3, .base-card h3,
.notice-item h3, .fleet-body h3, .news-body h3{ line-height:1.36; }

/* --- nombres : le fond dégradé découpé au texte rognait les glyphes --- */
.stat .figure{
  line-height:1.24;
  padding-bottom:.1em;
  display:inline-block;          /* la boîte épouse le texte, gradient compris */
}
.metric-value{ line-height:1.26; padding-bottom:.06em; }
.tide-live-value{ line-height:1.26; padding-bottom:.06em; }
.contact-card .big, .contact-card .big-alt, .aside-card .big{
  line-height:1.3; padding-bottom:.06em;
}

/* --- logotype : capitales accentuées (Ô de CÔTES) --- */
.brand-text .name{ line-height:1.3; padding-bottom:.04em; }
.footer-brand .name{ line-height:1.38; padding-bottom:.04em; }

/* --- arabe : les diacritiques descendent également --- */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{
  line-height:1.5; padding-bottom:.12em;
}
html[lang="ar"] .hero h1, html[lang="ar"] .hero .h-title{ line-height:1.45; }
html[lang="ar"] .brand-text .name{ line-height:1.45; }
html[lang="ar"] .stat .figure, html[lang="ar"] .metric-value{ line-height:1.4; }

.news-card, .fleet-card{ overflow:visible; border-radius:var(--r-md); }
.mission-card{ overflow:hidden; border-radius:var(--r-md); position:relative; }
.mission-card::before{ border-start-start-radius:var(--r-md); }
.news-thumb{ border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); overflow:hidden; }
.fleet-visual{ border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); overflow:hidden; }

/* =========================================================================
   ═══ UNIFICATION DU RACING STRIPE ═══
   Un seul module de proportions (fin / large / large = 0,24 : 0,80 : 1),
   un seul sens de lecture (toujours depuis le bord d'attaque), un seul
   angle (64°, via --skew, qui se reflète automatiquement en arabe).
   ========================================================================= */

.hero .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:2%; width:21px; background:var(--stripe-blue); opacity:0.14; }
.hero .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(2% + 47px); width:69px; background:var(--stripe-blue); opacity:0.14; }
.hero .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(2% + 149px); width:86px; background:var(--stripe-green); opacity:0.14; }

.page-hero .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.15; }
.page-hero .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.15; }
.page-hero .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.15; }

.zone-section .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.13; }
.zone-section .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.13; }
.zone-section .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.13; }

.sea-section .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.13; }
.sea-section .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.13; }
.sea-section .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.13; }

.recruit-band .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:rgba(255,255,255,.20); }
.recruit-band .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:rgba(255,255,255,.20); }
.recruit-band .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:rgba(108,172,228,.45); }

.fleet-visual .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:8%; width:11px; background:var(--stripe-blue); opacity:0.5; }
.fleet-visual .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(8% + 24px); width:35px; background:var(--stripe-blue); opacity:0.5; }
.fleet-visual .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(8% + 76px); width:44px; background:var(--stripe-green); opacity:0.5; }

.news-thumb .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:10%; width:12px; background:var(--stripe-blue); opacity:0.5; }
.news-thumb .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(10% + 29px); width:42px; background:var(--stripe-blue); opacity:0.5; }
.news-thumb .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(10% + 90px); width:52px; background:var(--stripe-green); opacity:0.5; }


/* mêmes proportions pour les micro-glyphes dérivés */
.bearing-label::before,
.stat::before,
.contact-card::before{
  background:linear-gradient(90deg,
    var(--stripe-blue) 0 9%, transparent 9% 20%,
    var(--stripe-blue) 20% 48%, transparent 48% 61%,
    var(--stripe-green) 61% 96%, transparent 96%);
}
.recruit-inner .bearing-label::before{
  background:linear-gradient(90deg,
    #fff 0 9%, transparent 9% 20%,
    #fff 20% 48%, transparent 48% 61%,
    #fff 61% 96%, transparent 96%);
}
.mission-card::before{
  width:22px;
  background:linear-gradient(90deg,
    var(--stripe-blue) 0 20%, transparent 20% 34%,
    var(--stripe-green) 34% 100%);
}

/* le bandeau plein format n'héritait pas des règles de base : ses barres
   n'avaient ni position ni hauteur, donc il restait blanc et vide */

/* =========================================================================
   ═══ BULLETIN DE MER — REFONTE ═══
   Cartes météo modernisées + courbe de marée interactive suivant la souris.
   ========================================================================= */

/* --------- cartes météo : identité de couleur propre à chaque indicateur --------- */
.metrics{ gap:18px; }
.metric{
  --acc-a: var(--stripe-blue);
  --acc-b: var(--stripe-blue-deep);
  position:relative; overflow:hidden;
  display:grid; grid-template-rows:auto auto 1fr auto auto;
  gap:6px; padding:26px 24px 24px; min-height:214px;
}
.metric.m-temp{ --acc-a:#F2B24B; --acc-b:#C8102E; }
.metric.m-wind{ --acc-a:#8FD0F2; --acc-b:var(--stripe-blue-deep); }
.metric.m-wave{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-green); }
.metric.m-seatemp{ --acc-a:#5FE0C9; --acc-b:var(--stripe-green-deep); }

.metric::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background:radial-gradient(120% 90% at 14% -10%, rgba(108,172,228,.16), transparent 68%);
  background:radial-gradient(120% 90% at 14% -10%, color-mix(in srgb, var(--acc-a) 22%, transparent), transparent 68%);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.metric:hover::after{ opacity:.9; }
.metric > *{ position:relative; z-index:1; }

/* liseré bas qui reprend la couleur d'accent : signature discrète et continue */
.metric::before{
  content:""; position:absolute; inset-inline:0; bottom:0; height:3px; z-index:1;
  background:linear-gradient(90deg, var(--acc-a), var(--acc-b));
  opacity:.5; transform:scaleX(.4); transform-origin:0 0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.metric:hover::before{ transform:scaleX(1); opacity:.9; }

/* --- pastille d'icône --- */
.metric-ico-wrap{
  position:relative; width:54px; height:54px; margin-bottom:2px;
  display:grid; place-items:center;
}
.metric-ico-wrap .metric-ico{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg, #1c4d73, #0b3f66);
  border:1px solid rgba(108,172,228,.4);
  color:#fff; box-shadow:0 6px 18px rgba(6,42,69,.35);
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 32%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid color-mix(in srgb, var(--acc-a) 45%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.metric-ico-wrap .metric-ico svg{ width:27px; height:27px; }
.metric:hover .metric-ico-wrap .metric-ico{ transform:translateY(-2px) scale(1.05); }

/* halo pulsé en continu autour de l'icône — signal discret « données vivantes » */
.metric-ring{
  position:absolute; inset:-8px; border-radius:20px;
  border:1.5px solid rgba(108,172,228,.5);
  border-color:color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
@keyframes ring-breathe{
  0%,100%{ opacity:0; transform:scale(.9); }
  50%{ opacity:.55; transform:scale(1.08); }
}
.metric:hover .metric-ring{ animation-duration:1.8s; }

.metric-label{ margin-top:2px; }
.metric-value{
  font-size:34px; margin-top:0;
  background:linear-gradient(120deg, var(--acc-a), var(--acc-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metric-value small{ -webkit-text-fill-color:#bad2e2; color:#bad2e2; }

/* ligne méta (direction du vent) : hauteur réservée même vide, pour un alignement parfait des 4 cartes */
.metric-sub{ min-height:18px; display:flex; align-items:center; gap:7px; }
.wind-arrow{ color:var(--acc-a); }

/* --- pastille de niveau : corrige l'étirement (bug d'alignement flex) --- */
.metric-tag{
  justify-self:start; align-self:end;
  display:inline-flex; align-items:center; gap:7px; width:auto; max-width:100%;
  padding:6px 13px 6px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.metric-tag::before{
  content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:currentColor;
}
.metric-tag:empty{ display:none; }
.metric-tag[data-level="calm"]{
  background:rgba(67,176,42,.15); color:#8fe07f; border:1px solid rgba(67,176,42,.34);
}
.metric-tag[data-level="calm"]::before{ animation:tag-dot 2.6s ease-in-out infinite; }
.metric-tag[data-level="moderate"]{
  background:rgba(108,172,228,.15); color:#a9d4f5; border:1px solid rgba(108,172,228,.36);
}
.metric-tag[data-level="strong"]{
  background:rgba(200,16,46,.16); color:#ff9aa5; border:1px solid rgba(200,16,46,.38);
}
.metric-tag[data-level="strong"]::before{ animation:tag-dot 1.1s ease-in-out infinite; }
@keyframes tag-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

/* ============ animations propres à chaque grandeur, continues et sobres ============ */

/* Température de l'air : mercure qui respire + micro-bulles ascendantes */
.metric.m-temp .metric-ico svg circle{
  animation:temp-pulse 2.8s ease-in-out infinite; transform-origin:16px 22px;
}
@keyframes temp-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
.metric.m-temp .metric-ico svg path:last-of-type{
  animation:heat-rise 2.4s ease-in-out infinite;
}
@keyframes heat-rise{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-1.5px); }
}

/* Vent : les trois lignes défilent comme portées par une brise (tirets animés) */
.metric.m-wind .metric-ico svg path{
  stroke-dasharray:5 4; animation:wind-flow 1.6s linear infinite;
}
.metric.m-wind .metric-ico svg path:nth-child(2){ animation-duration:1.3s; }
.metric.m-wind .metric-ico svg path:nth-child(3){ animation-duration:1.9s; }
@keyframes wind-flow{ to{ stroke-dashoffset:-18; } }
.wind-arrow svg{ transition:transform 1s var(--ease); }

/* Vagues : deux crêtes qui roulent en léger différé, effet de houle */
.metric.m-wave .metric-ico svg path:first-child{ animation:wave-roll-a 3s ease-in-out infinite; }
.metric.m-wave .metric-ico svg path:nth-child(2){ animation:wave-roll-b 3s ease-in-out infinite .35s; }
@keyframes wave-roll-a{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes wave-roll-b{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(1.4px); } }

/* Température de la mer : anneaux d'onde qui se propagent depuis la goutte */
.metric.m-seatemp .metric-ico{ position:relative; overflow:visible; }
.metric.m-seatemp .metric-ico::before, .metric.m-seatemp .metric-ico::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  border:1.5px solid rgba(108,172,228,.55);
  border-color:color-mix(in srgb, var(--acc-a) 60%, transparent);
  opacity:0; animation:ripple 2.8s ease-out infinite;
}
.metric.m-seatemp .metric-ico::after{ animation-delay:1.4s; }
@keyframes ripple{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.55); }
}

@media (prefers-reduced-motion: reduce){
  .metric-ring, .metric.m-temp .metric-ico svg *, .metric.m-wind .metric-ico svg path,
  .metric.m-wave .metric-ico svg path, .metric.m-seatemp .metric-ico::before,
  .metric.m-seatemp .metric-ico::after, .metric-tag::before{ animation:none !important; }
}

@media (max-width:600px){
  .metric{ min-height:auto; padding:22px 20px 20px; }
  .metric-value{ font-size:29px; }
}

/* --------- indicateur « en direct » sous l'en-tête --------- */
.tide-live{ position:relative; flex-wrap:wrap; }
.tide-hint{
  flex-basis:100%; font-size:11.5px; color:#7d9cb2; margin-top:2px;
  display:flex; align-items:center; gap:7px;
}
.tide-hint::before{
  content:""; width:14px; height:14px; flex-shrink:0; border-radius:4px;
  background:rgba(108,172,228,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v13M7 12l5 5 5-5' stroke='%236CACE4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
}
.tide-canvas.is-active ~ .tide-hint, .tide-live.is-exploring .tide-hint{ color:var(--stripe-blue); }

/* --------- zone interactive de la courbe --------- */
.tide-canvas{
  position:relative; width:100%; cursor:crosshair; border-radius:var(--r-sm);
  outline-offset:4px;
}
.tide-canvas:hover .tide-chart, .tide-canvas:focus-visible .tide-chart{ filter:brightness(1.04); }
.tide-chart{ transition:filter .2s var(--ease); }

.tide-tooltip{
  position:absolute; top:0; left:0; z-index:6; pointer-events:none;
  transform:translate(-50%,-115%); opacity:0; visibility:hidden;
  background:var(--navy-deep); border:1px solid rgba(108,172,228,.4);
  border-radius:var(--r-xs); padding:8px 12px; white-space:nowrap;
  box-shadow:var(--sh-dark);
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.tide-tooltip.is-visible{ opacity:1; visibility:visible; }
.tide-tooltip-time{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; color:var(--stripe-blue); margin-bottom:2px;
}
.tide-tooltip-val{
  display:block; font-family:'Source Serif 4',serif; font-size:17px; font-weight:600; color:#fff;
}
html[lang="ar"] .tide-tooltip-time{ font-family:'Cairo',monospace; letter-spacing:0; }

/* jauge/curseur exploré (au survol) : distinct du curseur « maintenant » */
#tide-hover-group{ opacity:0; transition:opacity .16s var(--ease); }
#tide-hover-group.is-visible{ opacity:1; }
#tide-cursor-halo, #tide-cursor-dot, #tide-cursor-line{ transition:opacity .25s var(--ease); }
.tide-canvas.is-exploring #tide-cursor-halo,
.tide-canvas.is-exploring #tide-cursor-dot{ opacity:.35; }

@media (max-width:640px){
  .tide-tooltip{ transform:translate(-50%,-108%); padding:7px 10px; }
  .tide-tooltip-val{ font-size:15px; }
}

/* --------- correctif d'espacement : la navigation complète (sans tiroir)
   entre 1121 et 1420px est trop juste pour ses 8 items, dont le nouveau
   menu déroulant « La Garde-Côtes » — resserré plus profondément. --------- */
/* Aucun rapetissement de police ni masquage d'élément : si la navigation
   complète ne tient pas confortablement, on bascule sur le menu latéral
   (voir le seuil défini plus haut). C'est plus lisible qu'un menu compressé. */

/* =========================================================================
   ═══ CHIFFRES CLÉS — VITRINE SOMBRE ═══
   Quatre indicateurs, quatre couleurs, quatre animations qui illustrent
   ce qu'elles racontent plutôt que de simplement bouger.
   ========================================================================= */
.stats-dark{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(108,172,228,.16), transparent 60%),
    radial-gradient(50% 70% at 8% 110%, rgba(67,176,42,.12), transparent 65%),
    linear-gradient(180deg, var(--navy-deep) 0%, #082c48 100%);
  border-top:1px solid rgba(108,172,228,.14); border-bottom:none;
}
.stats-dark .stripe-set i:nth-child(1){ left:90%; width:16px; background:var(--stripe-blue); opacity:.1; }
.stats-dark .stripe-set i:nth-child(2){ left:94%; width:54px; background:var(--stripe-blue); opacity:.1; }
.stats-dark .stripe-set i:nth-child(3){ left:103%; width:66px; background:var(--stripe-green); opacity:.1; }
.stats-dark .wrap{ position:relative; z-index:2; }

.stats-dark .stats-grid{ gap:1px; background:rgba(108,172,228,.14); padding:1px; border-radius:var(--r-md); overflow:hidden; }
.stats-dark .stat{
  --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep);
  background:linear-gradient(165deg, rgba(13,53,82,.55), rgba(6,32,56,.7));
  border:none; border-radius:0; padding:34px 26px 30px;
  text-decoration:none; color:inherit; overflow:visible;
}
.stats-dark .stat::before{ display:none; } 
.stats-dark .st-coast{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.stats-dark .st-watch{ --acc-a:var(--stripe-green); --acc-b:var(--stripe-green-deep); }
.stats-dark .st-bases{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }
.stats-dark .st-call{ --acc-a:#ff8a97; --acc-b:var(--red-star); cursor:pointer; }

.stats-dark .stat-ico-wrap{ position:relative; width:48px; height:48px; margin-bottom:16px; display:grid; place-items:center; }
.stats-dark .stat-ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 30%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid color-mix(in srgb, var(--acc-a) 42%, transparent);
  color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.stats-dark .stat-ico svg{ width:25px; height:25px; }
.stats-dark .stat:hover .stat-ico{ transform:translateY(-2px) scale(1.06); }

/* l'or a besoin de plus de saturation que le bleu/vert pour rester lisible :
   dégradé direct plutôt que mélangé au bleu nuit, qui l'assourdissait */
.stats-dark .st-bases .stat-ico{
  background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep));
  border-color:rgba(232,179,84,.6);
  box-shadow:0 6px 16px rgba(156,107,31,.4);
}

.stats-dark .stat-ring{
  position:absolute; inset:-7px; border-radius:18px;
  border:1.5px solid color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.stats-dark .stat:hover .stat-ring{ animation-duration:1.8s; }

.stats-dark .stat .figure{
  font-size:38px; margin-top:0;
  background:linear-gradient(120deg, var(--acc-a), var(--acc-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats-dark .stat .label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#a9c6db; margin-top:4px;
}
html[lang="ar"] .stats-dark .stat .label{ font-family:'Cairo',monospace; letter-spacing:0; }

/* --- 314 km : un tracé côtier se dessine sans fin, comme une ligne balayée --- */
.stat-trace{ width:100%; height:14px; margin-top:12px; overflow:visible; }
.stat-trace path{
  fill:none; stroke:var(--acc-a); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:6 5; opacity:.55;
  animation:trace-flow 3.2s linear infinite;
}
@keyframes trace-flow{ to{ stroke-dashoffset:-44; } }

/* --- 24/7 : l'aiguille tourne réellement, la veille ne s'arrête jamais --- */
.clock-hand{ transform-origin:16px 16px; animation:clock-sweep 6s linear infinite; }
@keyframes clock-sweep{ to{ transform:rotate(360deg); } }

/* --- 3 bases actives : trois repères qui s'allument en séquence, comme sur la carte --- */
.base-dots{ display:inline-flex; gap:6px; margin-top:13px; }
.base-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--gold-bright);
  opacity:.25; animation:base-dot-seq 2.4s ease-in-out infinite;
}
.base-dots i:nth-child(1){ animation-delay:0s; }
.base-dots i:nth-child(2){ animation-delay:.3s; }
.base-dots i:nth-child(3){ animation-delay:.6s; }
@keyframes base-dot-seq{
  0%, 100%{ opacity:.25; transform:scale(1); }
  30%{ opacity:1; transform:scale(1.35); box-shadow:0 0 8px var(--gold-bright); }
  60%{ opacity:.4; transform:scale(1); }
}

/* --- 1500 : vraie tuile d'appel, combiné qui vibre, flèche qui invite au geste --- */
.st-call .stat-ico svg{ animation:phone-ring 2.8s ease-in-out infinite; transform-origin:50% 18%; }
.st-call{ display:flex; flex-direction:column; align-items:flex-start; position:relative; transition:background .25s var(--ease); }
.st-call:hover{ background:linear-gradient(165deg, rgba(200,16,46,.14), rgba(6,32,56,.7)); }
.stat-call-arrow{
  position:absolute; top:34px; inset-inline-end:26px; color:var(--acc-a);
  opacity:0; transform:translateX(-4px); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.st-call:hover .stat-call-arrow{ opacity:1; transform:translateX(0); }
html[dir="rtl"] .stat-call-arrow{ transform:translateX(4px) scaleX(-1); }
html[dir="rtl"] .st-call:hover .stat-call-arrow{ transform:translateX(0) scaleX(-1); }

@media (prefers-reduced-motion: reduce){
  .stat-trace path, .clock-hand, .base-dots i, .st-call .stat-ico svg, .stats-dark .stat-ring{
    animation:none !important;
  }
  .stat-trace path{ opacity:.35; }
  .base-dots i{ opacity:.6; }
}

@media (max-width:960px){ .stats-dark .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .stats-dark .stats-grid{ grid-template-columns:1fr; }
  .stats-dark .stat{ padding:28px 24px; }
}

/* =========================================================================
   CORRECTION DE CONTRASTE — petits textes sur bannières sombres
   Mesuré au pixel : fil d'Ariane 4,42 et 3,67, date d'article 3,47.
   Le seuil WCAG AA pour du texte de moins de 18,66 px est de 4,5.
   ========================================================================= */
.crumb{ color:#BBD4E6; }                                   /* était #9fbdd4 → 4,42 */
.crumb [aria-current="page"]{ color:#A6D2F5; }             /* était #6CACE4 → 3,67 */
/* .page-hero p (0,1,1) l'emportait sur .article-date (0,1,0) : la date
   n'avait jamais sa couleur prévue. Spécificité rehaussée. */
.page-hero .article-date, .article-hero .article-date{ color:#A6D2F5; }

/* =========================================================================
   ═══ TYPOGRAPHIE DES DONNÉES CHIFFRÉES ═══
   Les chiffres d'un serif éditorial sont peu lisibles en grand format.
   Tous les nombres passent en sans-serif tabulaire : chasse constante,
   alignement parfait en colonne, lecture immédiate.
   ========================================================================= */
.stat .figure,
.metric-value,
.tide-live-value,
.contact-card .big,
.contact-card .big-alt,
.aside-card .big,
.bc-number,
.sos-number{
  font-family:'Public Sans', system-ui, sans-serif !important;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
  letter-spacing:-.022em;
}
html[lang="ar"] .stat .figure,
html[lang="ar"] .metric-value,
html[lang="ar"] .tide-live-value{ font-family:'Cairo', sans-serif !important; letter-spacing:0; }

/* les unités restent discrètes et non tabulaires */
.metric-value small, .stat .figure small{
  font-weight:600; letter-spacing:0; font-variant-numeric:normal;
}

/* =========================================================================
   ═══ BANDEAU SUPÉRIEUR — MODULE UNIFIÉ ═══
   Urgence, radio et langue ne sont plus trois pastilles éparses mais un
   seul instrument de bord en verre, séparé par des filets, balayé par un
   unique reflet lent — la lecture d'un tableau de bord, pas un empilage
   de boutons.
   ========================================================================= */
.topbar{
  background:linear-gradient(90deg, #041a2c 0%, #062a45 42%, #073352 68%, #041a2c 100%);
  border-bottom:1px solid rgba(108,172,228,.16);
}
.topbar .wrap{ min-height:48px; }

.status-cluster{
  position:relative; display:inline-flex; align-items:stretch; overflow:hidden;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid rgba(108,172,228,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px -10px rgba(0,0,0,.6);
}
/* liseré de lumière au sommet, comme un verre biseauté */
.status-cluster::before{
  content:""; position:absolute; inset-inline:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
/* reflet unique qui balaie tout le module, très lentement — signature discrète */
.sc-sheen{
  position:absolute; inset-block:0; width:26%; top:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-22deg); left:-40%;
  animation:sheen-sweep 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen-sweep{ 0%,70%{ left:-40%; } 100%{ left:130%; } }

.sc-item{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:6px 16px; text-decoration:none; color:inherit;
  transition:background .25s var(--ease);
}
a.sc-item:hover{ background:rgba(255,255,255,.05); }

.sc-ico{
  position:relative; width:24px; height:24px; flex-shrink:0; display:grid; place-items:center;
  color:#fff;
}
.sc-emergency .sc-ico{ color:#7CE293; }
.sc-radio .sc-ico{ color:#8FC7EF; }
.sc-ico svg{ width:16px; height:16px; }
.sc-dot{
  position:absolute; top:-2px; inset-inline-end:-2px; width:6px; height:6px; border-radius:50%;
  background:var(--stripe-green); box-shadow:0 0 6px var(--stripe-green);
  animation:tag-dot 2s ease-in-out infinite;
}

.sc-text{ display:inline-flex; align-items:baseline; gap:7px; line-height:1; }
.sc-label{ font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8fa9bd; white-space:nowrap; }
.sc-value{
  font-family:'Public Sans', sans-serif; font-size:14px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
html[lang="ar"] .sc-label{ font-family:'Cairo',monospace; letter-spacing:0; }

/* barres de signal radio : s'animent en continu, très discrètement */
.sc-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:11px; margin-inline-start:2px; }
.sc-bars i{ width:2.4px; border-radius:1px; background:#8FC7EF; opacity:.85; animation:sc-bar 1.6s ease-in-out infinite; }
.sc-bars i:nth-child(1){ height:40%; animation-delay:0s; }
.sc-bars i:nth-child(2){ height:75%; animation-delay:.2s; }
.sc-bars i:nth-child(3){ height:55%; animation-delay:.4s; }
@keyframes sc-bar{ 0%,100%{ transform:scaleY(.55); opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }

.sc-div{
  align-self:center; width:1px; height:20px;
  background:linear-gradient(180deg, transparent, rgba(108,172,228,.35), transparent);
}

/* --- langue : intégrée au module, fond statique sur le lien actif --- */
.status-cluster .lang{
  position:relative; display:inline-flex; gap:0; padding:6px 6px; margin:0;
  background:none; border:none; border-radius:0;
}
.status-cluster .lang a{
  position:relative; z-index:1; display:inline-block; background:none; border:none; cursor:pointer;
  font-size:11.5px; font-weight:600; color:#9fbdd4; padding:4px 11px;
  border-radius:var(--r-pill); transition:color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap; text-align:center;
}
.status-cluster .lang a.is-active{
  color:#fff;
  background:linear-gradient(180deg, var(--stripe-blue-deep), #16496f);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
}
.status-cluster .lang a:hover{ color:#dce9f2; }
.status-cluster .lang a.is-active:hover{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  .sc-sheen{ animation:none; opacity:0; }
  .sc-dot, .sc-bars i{ animation:none !important; }
}

@media (max-width:760px){
  .sc-label{ display:none; }
  .sc-item{ padding:6px 11px; gap:7px; }
}
/* --------- barre d'état sur mobile : refonte complète ---------
   La barre reste visible : elle porte le seul sélecteur de langue du site
   (aucun repli n'existe ailleurs). Plutôt que de comprimer la version
   desktop, le module s'étire sur toute la largeur et répartit ses trois
   temps (urgence, VHF, langue) avec un rythme régulier, comme un vrai
   composant pensé pour le mobile plutôt qu'un résidu comprimé.

   Le libellé « République de Djibouti — Site officiel » réapparaît en
   première ligne : une règle plus ancienne (issue d'une version révolue
   de la barre) le masquait entièrement sur mobile ; il revient ici sur
   sa propre ligne, plus discret, plutôt que comprimé dans la même rangée
   déjà chargée que l'urgence, la VHF et la langue. */
@media (max-width:640px){
  .topbar .wrap{
    flex-direction:column; align-items:stretch; gap:7px;
    min-height:auto; padding-block:9px;
  }
  .topbar .left{
    display:flex; justify-content:center; gap:9px; order:-1;
  }
  .topbar .left span.mid{
    display:inline; font-size:9.5px; letter-spacing:.1em;
    color:#8fa9bd; white-space:normal; text-align:center;
  }
  .right{ width:100%; }
  .status-cluster{
    display:flex; width:100%; align-items:stretch;
  }
  .sc-item{ padding:6px 0; gap:6px; flex:0 0 auto; }
  .sc-emergency, .sc-radio{ flex:1; justify-content:center; }
  .sc-ico{ width:18px; height:18px; }
  .sc-ico svg{ width:12px; height:12px; }
  .sc-label{ display:none; }
  .sc-value{ font-size:13px; font-weight:700; }
  .sc-bars{ display:none; }

  /* séparateurs nettement plus visibles qu'en desktop, où le contexte
     donne déjà assez de repères visuels */
  .sc-div{
    height:22px; width:1px; align-self:center;
    background:linear-gradient(180deg, transparent, rgba(108,172,228,.55), transparent);
  }

  /* le sélecteur de langue devient son propre segment, nettement délimité,
     avec le fond statique pose directement sur le lien actif */
  .status-cluster .lang{
    flex:0 0 auto; padding:4px; margin-inline-start:2px;
    background:rgba(0,0,0,.22) !important; border-radius:var(--r-pill);
  }
  .status-cluster .lang a{
    padding:5px 9px; font-size:11px; min-width:30px; text-align:center;
  }
  .status-cluster .lang a[lang="ar"]{ min-width:38px; }
}
@media (max-width:360px){
  .sc-value{ font-size:12px; }
  .status-cluster .lang a{ padding:5px 7px; font-size:10.5px; }
  .status-cluster .lang a[lang="ar"]{ min-width:34px; }
  .topbar .left span.mid{ font-size:8.5px; }
}

/* =========================================================================
   ICÔNES DES CHIFFRES CLÉS
   ========================================================================= */
.stat{ display:flex; flex-direction:column; align-items:flex-start; }
.stat-ico{
  width:46px; height:46px; margin-bottom:18px; display:grid; place-items:center;
  border-radius:12px; color:var(--stripe-blue-deep);
  background:linear-gradient(140deg, rgba(108,172,228,.16), rgba(67,176,42,.14));
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.stat-ico svg{ width:25px; height:25px; }
.stat:hover .stat-ico{ transform:translateY(-3px) scale(1.05); color:var(--stripe-green-deep); }
.stat .figure{ font-variant-numeric:tabular-nums; }

/* =========================================================================
   BULLETIN DE MER — icônes et marée dynamique
   ========================================================================= */
.metric{ display:flex; flex-direction:column; }
.metric-ico{
  width:42px; height:42px; margin-bottom:16px; display:grid; place-items:center;
  border-radius:11px; color:var(--stripe-blue);
  background:rgba(108,172,228,.14); border:1px solid rgba(108,172,228,.22);
}
.metric-ico svg{ width:23px; height:23px; }
.metric-value{ font-variant-numeric:tabular-nums; }
.metric-sub{ display:flex; align-items:center; gap:7px; }
.wind-arrow{
  width:19px; height:19px; display:inline-grid; place-items:center; flex-shrink:0;
  color:var(--stripe-green); transition:transform .8s var(--ease);
}
.wind-arrow svg{ width:15px; height:15px; }

.tide-live{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid rgba(242,246,249,.14);
}
.tide-live-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue);
}
.tide-live-value{
  font-family:'Source Serif 4',serif; font-size:30px; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1;
}
.tide-trend{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--stripe-green);
}
.tide-trend svg{ width:14px; height:14px; }
.tide-chart{ width:100%; height:150px; display:block; overflow:visible; }
#tide-cursor-dot{ transition:none; }
.tide-axis{
  display:flex; justify-content:space-between; margin-top:10px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8fa9bd;
}
html[lang="ar"] .tide-live-label, html[lang="ar"] .tide-trend,
html[lang="ar"] .tide-axis{ font-family:'Cairo',monospace; letter-spacing:0; }

/* =========================================================================
   ═══ IMPLANTATIONS — VITRINE SOMBRE ═══
   Trois bases, trois couleurs, trois animations qui illustrent leur rôle
   plutôt que de simplement bouger — même langage que les chiffres clés.
   ========================================================================= */
.bases-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(26px,3vw,48px); align-items:start; }
@media (max-width:960px){ .bases-layout{ grid-template-columns:1fr; } }
.bases-map{ border:1px solid var(--line); overflow:hidden; background:var(--navy-deep); }
.bases-map svg{ width:100%; height:auto; display:block; }
.bases-map text{ font-family:'IBM Plex Mono', monospace; font-size:11px; fill:#cfe2ee; letter-spacing:.06em; }

.base-pin .pin-dot{ fill:var(--stripe-green); }
.base-pin .pin-halo{ fill:none; stroke:var(--stripe-green); stroke-width:1.5; opacity:.6; transform-origin:center; }
.base-pin[data-base="doraleh"] .pin-dot{ fill:var(--gold-bright); }
.base-pin[data-base="doraleh"] .pin-halo{ stroke:var(--gold-bright); }
.base-pin .pin-halo{ animation:pin-ping 3s ease-out infinite; }
.base-pin[data-base="escale"] .pin-halo{ animation-delay:1s; }
.base-pin[data-base="peche"] .pin-halo{ animation-delay:2s; }
@keyframes pin-ping{
  0%      { transform:scale(.55); opacity:.85; }
  70%,100%{ transform:scale(1.5); opacity:0; }
}
.base-pin.is-hot .pin-dot{ r:9; }
.base-pin{ transition:opacity .25s var(--ease); }

.bases-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.base-card{
  background:#fff; padding:24px 26px; position:relative;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.base-card:hover, .base-card.is-hot{ background:var(--hull); }
.base-rank{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--stripe-blue-deep); font-weight:600;
}
.base-card h3{ font-family:'Source Serif 4',serif; font-size:19px; font-weight:600; color:var(--navy-deep); margin:8px 0 4px; }
.base-role{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stripe-green-deep); margin-bottom:10px;
}
.base-card p:not(.base-role):not(.base-coord){ font-size:14px; color:var(--ink-soft); }
.base-coord{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line); direction:ltr;
}
html[lang="ar"] .base-rank, html[lang="ar"] .base-role,
html[lang="ar"] .base-coord{ font-family:'Cairo',monospace; letter-spacing:0; }

/* --------- habillage sombre de la section --------- */
.bases-dark{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(55% 85% at 90% -8%, rgba(108,172,228,.15), transparent 60%),
    radial-gradient(50% 70% at 5% 105%, rgba(232,179,84,.10), transparent 65%),
    linear-gradient(180deg, #082c48 0%, var(--navy-deep) 100%);
}
.bases-dark .stripe-set i:nth-child(1){ left:-3%; width:16px; background:var(--stripe-blue); opacity:.1; }
.bases-dark .stripe-set i:nth-child(2){ left:1%;  width:54px; background:var(--stripe-blue); opacity:.1; }
.bases-dark .stripe-set i:nth-child(3){ left:9%;  width:66px; background:var(--gold-bright); opacity:.1; }
.bases-dark .wrap{ position:relative; z-index:2; }

.bases-dark .bases-map{ border-color:rgba(108,172,228,.22); box-shadow:0 20px 44px -14px rgba(2,12,22,.5); }

.bases-dark .bases-list{ background:rgba(108,172,228,.14); border-color:rgba(108,172,228,.14); }
.bases-dark .base-card{
  --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep);
  background:linear-gradient(165deg, rgba(13,53,82,.5), rgba(6,32,56,.68));
  color:#eaf3f9;
}
.bases-dark .base-card:hover, .bases-dark .base-card.is-hot{
  background:linear-gradient(165deg, rgba(13,53,82,.72), rgba(6,32,56,.85));
}
.bases-dark .bc-hq{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }
.bases-dark .bc-op{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.bases-dark .bc-coast{ --acc-a:var(--stripe-green); --acc-b:var(--stripe-green-deep); }

.bases-dark .base-card h3{ color:#fff; }
.bases-dark .base-card p:not(.base-role):not(.base-coord){ color:#b0c9da; }
.bases-dark .base-coord{ color:#8fa9bd; border-top-color:rgba(108,172,228,.18); }
.bases-dark .base-rank{ color:var(--acc-a); }

.base-ico-wrap{ position:relative; width:44px; height:44px; margin-bottom:14px; display:grid; place-items:center; }
.base-ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  color:#fff; transition:transform .35s var(--ease);
}
.base-ico svg{ width:23px; height:23px; }
.base-card:hover .base-ico{ transform:translateY(-2px) scale(1.06); }

.base-ring{
  position:absolute; inset:-7px; border-radius:17px;
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.base-card:hover .base-ring{ animation-duration:1.8s; }

/* dégradés directs : l'or et le vert perdent leur éclat mélangés au bleu nuit */
.bc-hq .base-ico{ background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep)); box-shadow:0 6px 16px rgba(156,107,31,.4); }
.bc-hq .base-ring{ border:1.5px solid rgba(232,179,84,.55); }
.bc-op .base-ico{ background:linear-gradient(145deg, #5FA8E0, var(--stripe-blue-deep)); box-shadow:0 6px 16px rgba(27,91,138,.4); }
.bc-op .base-ring{ border:1.5px solid rgba(108,172,228,.5); }
.bc-coast .base-ico{ background:linear-gradient(145deg, #5FD97F, var(--stripe-green-deep)); box-shadow:0 6px 16px rgba(37,110,24,.4); }
.bc-coast .base-ring{ border:1.5px solid rgba(67,176,42,.5); }

/* --- Doraleh, siège : le feu du bâtiment clignote, repère qu'on distingue depuis la mer --- */
.bc-hq .base-ico .beacon{ animation:beacon-blink 2.6s ease-in-out infinite; transform-origin:16px 7px; }

/* --- Escale, base opérationnelle : le signal émet en boucle, deux arcs en cascade --- */
.bc-op .op-wave{ animation:radio-pulse 2.2s ease-in-out infinite; transform-origin:16px 8px; }
.bc-op .op-wave-1{ animation-delay:0s; }
.bc-op .op-wave-2{ animation-delay:.28s; }

/* --- Port de pêche : le bateau se balance doucement au clapot --- */
.boat-bob{ animation:boat-bob 3.4s ease-in-out infinite; transform-origin:16px 24px; }
@keyframes boat-bob{
  0%,100%{ transform:rotate(0deg) translateY(0); }
  25%{ transform:rotate(-2.5deg) translateY(-.6px); }
  75%{ transform:rotate(2.5deg) translateY(.6px); }
}

@media (prefers-reduced-motion: reduce){
  .base-ring, .bc-hq .base-ico .beacon, .bc-op .op-wave, .boat-bob{ animation:none !important; }
}



/* =========================================================================
   ═══ PANNEAU D'URGENCE ═══
   Un grand panneau d'appel domine (seul rouge du site, réservé à l'urgence
   réelle), deux cartes secondaires en colonne : radio en écoute vivante,
   siège avec repère doré identique à celui de la carte des bases.
   ========================================================================= */

.contact-panel{
  display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:stretch;
}
.contact-stack{ display:grid; gap:20px; grid-template-rows:1fr 1fr; }
@media (max-width:900px){
  .contact-panel{ grid-template-columns:1fr; }
  .contact-stack{ grid-template-rows:none; }
}

/* --------- le panneau d'appel : seule pièce rouge du site --------- */
.sos-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:36px 34px 32px; border-radius:var(--r-lg); color:#fff; text-decoration:none;
  background:
    radial-gradient(130% 130% at 88% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(155deg, #E5334A 0%, var(--red-star) 55%, #7A0C1D 100%);
  box-shadow:0 18px 46px rgba(200,16,46,.32), 0 2px 0 rgba(255,255,255,.08) inset;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  min-height:340px;
}
.sos-card:hover{ transform:translateY(-4px); box-shadow:0 24px 58px rgba(200,16,46,.42), 0 2px 0 rgba(255,255,255,.1) inset; }
.sos-card:focus-visible{ outline:3px solid #fff; outline-offset:4px; }

.sos-top{ position:relative; z-index:2; }
.sos-card .tag{ color:rgba(255,255,255,.82); }
.sos-card h3{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:22px; color:#fff;
  margin-top:8px; line-height:1.32; max-width:22ch;
}

/* anneaux de détresse : se propagent en continu derrière le cadran, comme un signal émis */
.sos-rings{ position:absolute; inset-inline-end:-40px; top:38px; width:220px; height:220px; z-index:1; pointer-events:none; }
.sos-rings i{
  position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  animation:sos-ring 2.8s ease-out infinite; opacity:0;
}
.sos-rings i:nth-child(2){ animation-delay:.7s; }
.sos-rings i:nth-child(3){ animation-delay:1.4s; }
@keyframes sos-ring{
  0%{ transform:scale(.34); opacity:.75; }
  100%{ transform:scale(1); opacity:0; }
}

/* cadran d'appel : le point focal, glow marqué, icône légèrement animée */
.sos-dial{
  position:relative; z-index:2; width:76px; height:76px; margin:22px 0 4px;
  display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(155deg, rgba(255,255,255,.24), rgba(255,255,255,.05));
  border:1.5px solid rgba(255,255,255,.5);
  box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 0 8px rgba(255,255,255,.08);
}
.sos-dial svg{ width:32px; height:32px; color:#fff; animation:phone-ring 2.4s ease-in-out infinite; transform-origin:50% 15%; }
.sos-dial-ring{
  position:absolute; inset:-9px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.4);
  animation:dial-spin 14s linear infinite;
}
@keyframes dial-spin{ to{ transform:rotate(360deg); } }

.sos-number{
  position:relative; z-index:2; font-family:'Source Serif 4',serif; font-weight:600;
  font-size:clamp(46px,5vw,60px); line-height:1; color:#fff; margin-top:4px;
  font-variant-numeric:tabular-nums; direction:ltr;
}
.sos-desc{ position:relative; z-index:2; color:rgba(255,255,255,.86); font-size:14px; margin-top:8px; max-width:32ch; }

.sos-cta{
  position:relative; z-index:2; margin-top:auto; padding-top:22px;
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:#fff;
  width:fit-content;
}
.sos-cta svg{ transition:transform .3s var(--ease); }
.sos-card:hover .sos-cta svg{ transform:translateX(4px); }
html[dir="rtl"] .sos-card:hover .sos-cta svg{ transform:translateX(-4px) scaleX(-1); }
html[dir="rtl"] .sos-cta svg{ transform:scaleX(-1); }

/* --------- cartes secondaires : icône, puce, contenu --------- */
.contact-card{
  --acc-a: var(--stripe-blue);
  --acc-b: var(--stripe-blue-deep);
  display:flex; flex-direction:column;
}
.contact-card.c-radio{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.contact-card.c-hq{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }

.contact-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }

.contact-ico-wrap{ position:relative; width:50px; height:50px; display:grid; place-items:center; }
.contact-ico-wrap .contact-ico{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg, #1c4d73, #0b3f66);
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 30%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid rgba(108,172,228,.4);
  border-color:color-mix(in srgb, var(--acc-a) 45%, transparent);
  color:#fff; box-shadow:0 6px 16px rgba(6,42,69,.35);
  box-shadow:0 6px 16px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.contact-ico-wrap .contact-ico svg{ width:24px; height:24px; }
.contact-card:hover .contact-ico-wrap .contact-ico{ transform:translateY(-2px) scale(1.05); }

/* l'or a besoin de plus de saturation que le bleu pour rester lisible sur fond marine :
   dégradé direct plutôt que mélangé au bleu nuit, qui l'assourdissait */
.c-hq .contact-ico-wrap .contact-ico{
  background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep));
  border-color:rgba(232,179,84,.6);
  box-shadow:0 6px 18px rgba(156,107,31,.4);
}

.contact-ring{
  position:absolute; inset:-7px; border-radius:18px;
  border:1.5px solid rgba(108,172,228,.5);
  border-color:color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.contact-card:hover .contact-ring{ animation-duration:1.8s; }

.contact-card .big-alt{
  font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600;
  color:#fff; margin-top:10px; direction:ltr;
}
.contact-card h3{ margin-top:2px; }
.contact-card > p:last-child{ margin-top:6px; }

.contact-card::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--acc-a), var(--acc-b));
  opacity:.5; transform:scaleX(.4); transform-origin:0 0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.contact-card:hover::after{ transform:scaleX(1); opacity:.9; }

/* --- puce « en écoute » : discrète, pulsée, jamais rouge (réservé à l'urgence) --- */
.live-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px;
  border-radius:var(--r-pill); background:rgba(108,172,228,.14); border:1px solid rgba(108,172,228,.3);
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em; color:var(--stripe-blue);
}
html[lang="ar"] .live-chip{ font-family:'Cairo',monospace; letter-spacing:0; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--stripe-blue); animation:tag-dot 1.6s ease-in-out infinite; }

/* --- égaliseur : sept barres qui vivent comme une écoute radio active --- */
.waveform{ display:flex; align-items:flex-end; gap:4px; height:30px; margin:14px 0 2px; }
.waveform i{
  display:block; width:4px; border-radius:2px;
  background:linear-gradient(180deg, var(--stripe-blue), var(--stripe-blue-deep));
  animation:wave-bar 1.2s ease-in-out infinite;
}
.waveform i:nth-child(1){ height:35%; animation-duration:1.1s; animation-delay:-.9s; }
.waveform i:nth-child(2){ height:70%; animation-duration:.9s;  animation-delay:-.3s; }
.waveform i:nth-child(3){ height:45%; animation-duration:1.3s; animation-delay:-1.1s; }
.waveform i:nth-child(4){ height:95%; animation-duration:1s;   animation-delay:-.5s; }
.waveform i:nth-child(5){ height:55%; animation-duration:1.2s; animation-delay:-.8s; }
.waveform i:nth-child(6){ height:80%; animation-duration:.95s; animation-delay:-.15s; }
.waveform i:nth-child(7){ height:40%; animation-duration:1.15s; animation-delay:-1s; }
@keyframes wave-bar{
  0%,100%{ transform:scaleY(.4); opacity:.65; }
  50%{ transform:scaleY(1); opacity:1; }
}

/* --- siège : feu doré, identique au repère de la carte des bases --- */
.c-hq .beacon{ animation:beacon-blink 2.6s ease-in-out infinite; transform-origin:16px 7px; }
@keyframes beacon-blink{
  0%, 60%, 100%{ opacity:1; transform:scale(1); }
  78%{ opacity:.35; transform:scale(.6); }
}

@media (prefers-reduced-motion: reduce){
  .sos-rings i, .sos-dial svg, .sos-dial-ring, .contact-ring,
  .live-dot, .waveform i, .c-hq .beacon{ animation:none !important; }
}

@media (max-width:600px){
  .sos-card{ padding:30px 26px 28px; min-height:auto; }
  .sos-number{ font-size:44px; }
  .sos-rings{ width:170px; height:170px; top:20px; }
}

/* =========================================================================
   LIENS DE LECTURE ET PAGES ÉDITORIALES
   ========================================================================= */
.read-more{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px; align-self:flex-start;
  font-size:13px; font-weight:700; color:var(--stripe-blue-deep);
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:border-color .25s var(--ease), gap .25s var(--ease), color .25s var(--ease);
}
.read-more svg{ transition:transform .25s var(--ease); }
.read-more:hover{ border-bottom-color:var(--stripe-green); color:var(--stripe-green-deep); gap:13px; }
html[dir="rtl"] .read-more svg{ transform:scaleX(-1); }
html[dir="rtl"] .read-more:hover svg{ transform:scaleX(-1) translateX(2px); }
.mission-card, .news-body{ display:flex; flex-direction:column; }

.article-hero{ padding-block:clamp(48px,5vw,84px); }
.article-date{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue); margin-top:20px;
}
.article-hero h1{ margin:14px 0 18px; max-width:22ch; }
.article-chapo{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:#c3d9e8; max-width:62ch; }
.article-body .prose{ max-width:68ch; }
.article-body .prose p{ font-size:clamp(15.5px,1.15vw,17px); line-height:1.75; }
.article-foot{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:48px;
  padding-top:30px; border-top:1px solid var(--line); max-width:68ch;
}

.notice-list{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:8px 0 28px; }
.notice-item{ background:#fff; padding:22px 24px; display:flex; gap:18px; align-items:flex-start; }
.notice-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  padding:5px 10px; background:var(--hull-2); color:var(--ink-soft); flex-shrink:0; white-space:nowrap;
}
.notice-tag.notice-urgent{ background:var(--red-star); color:#fff; }
.notice-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--stripe-green-deep); margin-bottom:6px; }
.notice-item h3{ font-family:'Source Serif 4',serif; font-size:17px; font-weight:600; color:var(--navy-deep); margin-bottom:6px; }
.notice-item p:last-child{ font-size:14px; color:var(--ink-soft); margin:0; }
@media (max-width:560px){ .notice-item{ flex-direction:column; gap:12px; } }

/* =========================================================================
   ═══ PASSE DE MODERNISATION ═══
   Profondeur, arrondis maîtrisés, micro-interactions.
   Le racing stripe reste angulaire : c'est l'élément réglementaire.
   ========================================================================= */
:root{
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(6,42,69,.05), 0 2px 8px rgba(6,42,69,.05);
  --sh-2:0 2px 6px rgba(6,42,69,.06), 0 14px 30px rgba(6,42,69,.09);
  --sh-3:0 4px 14px rgba(6,42,69,.08), 0 28px 56px rgba(6,42,69,.14);
  --sh-dark:0 18px 44px rgba(0,0,0,.34);
  --hair:1px solid rgba(14,34,51,.10);
  --hair-invert:1px solid rgba(242,246,249,.15);
}

/* --------- typographie : rendu plus soigné --------- */
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }
.hero h1, .hero .h-title, .page-hero h1{ letter-spacing:-.022em; }
.section-head h2, .zone-copy h2, .recruit-inner h2{ letter-spacing:-.018em; }
.prose p{ line-height:1.78; }

/* =========================================================================
   EN-TÊTE : verre dépoli, compression au défilement, jauge de lecture
   ========================================================================= */
header.site{
  background:rgba(242,246,249,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
header.site.is-stuck{ box-shadow:0 1px 0 rgba(14,34,51,.08), 0 10px 30px rgba(6,42,69,.09); }
.header-row{ transition:min-height .35s var(--ease); }
header.site.is-stuck .header-row{ min-height:calc(var(--header-h) - 18px); }
header.site.is-stuck .crest-mark{ transform:scale(.88); }
header.site.is-stuck .brand-text .motto{ opacity:0; height:0; margin:0; overflow:hidden; }
.crest-mark, .brand-text .motto{ transition:transform .35s var(--ease), opacity .3s var(--ease); }

.read-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  z-index:5; transition:width .12s linear;
}
html[dir="rtl"] .read-progress{ left:auto; right:0; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn{ border-radius:var(--r-pill); padding-inline:28px; letter-spacing:.005em; }
.btn-alert{
  background:linear-gradient(135deg, #D8203A, var(--red-star));
  box-shadow:0 6px 18px rgba(200,16,46,.28);
}
.btn-alert:hover{ box-shadow:0 10px 26px rgba(200,16,46,.36); }
.btn-dark{ background:linear-gradient(135deg, #0B3F66, var(--navy-deep)); box-shadow:var(--sh-1); }
.btn-dark:hover{ box-shadow:var(--sh-2); }
.btn-light{ box-shadow:0 6px 18px rgba(0,0,0,.14); }
.btn-outline{ border-radius:var(--r-pill); }
.header-cta{ border-radius:var(--r-pill); background:linear-gradient(135deg,#D8203A,var(--red-star)); box-shadow:0 4px 14px rgba(200,16,46,.26); }
.burger{ border-radius:var(--r-pill); border:var(--hair); }
.drawer-close, .slide-pause{ border-radius:var(--r-pill); }
.listen, .read-more{ border-radius:var(--r-pill); }

/* =========================================================================
   CARTES : on abandonne les séparateurs d'un pixel au profit d'objets posés
   ========================================================================= */
.missions-grid{ background:transparent; border:none; gap:18px; }
.mission-card{
  background:#fff; border:var(--hair); border-radius:var(--r-md);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mission-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(108,172,228,.5); background:#fff; }
.mission-card .code{
  display:inline-block; align-self:flex-start;      /* évite l'étirement en conteneur flex */
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(108,172,228,.12); color:var(--stripe-blue-deep); margin-bottom:16px;
}
.fleet-body .class, .news-date, .contact-card .tag, .aside-card .tag, .base-role{ align-self:flex-start; }
.mission-card > svg{ opacity:.5; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.mission-card:hover > svg{ opacity:1; transform:scale(1.1) rotate(-4deg); }

.fleet-card, .news-card{ border-radius:var(--r-md); overflow:hidden; border:var(--hair); box-shadow:var(--sh-1); }
.fleet-card:hover, .news-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); }

.stats-band{ background:linear-gradient(180deg,#fff, #FAFCFD); }
.stats-grid{ gap:18px; padding-block:8px; }
.stat{
  border:var(--hair) !important; border-radius:var(--r-md); background:#fff;
  box-shadow:var(--sh-1); padding:34px 28px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat::before{ inset-inline-start:28px; top:0; }
.stat:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.stat .figure{
  background:linear-gradient(135deg, var(--stripe-green-deep), #3E9A22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.contact-grid, .metrics, .bases-list, .form-aside, .notice-list{
  background:transparent; border:none; gap:16px;
}
.contact-card, .metric{
  border:var(--hair-invert); border-radius:var(--r-md);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover, .metric:hover{
  transform:translateY(-4px); background:rgba(255,255,255,.085); border-color:rgba(108,172,228,.42);
}
.contact-card::before{ inset-inline-start:28px; }
.aside-card, .base-card, .notice-item{
  border:var(--hair); border-radius:var(--r-md); background:#fff; box-shadow:var(--sh-1);
}
.base-card:hover, .base-card.is-hot{
  background:#fff; transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(108,172,228,.5);
}
.form-card{ border-radius:var(--r-lg); box-shadow:var(--sh-2); border:var(--hair); }
.field input, .field select, .field textarea{ border-radius:var(--r-sm); }
.urgent-note, .form-status, .callout{ border-radius:var(--r-sm); }
.tide-box, .zone-map-box, .bases-map{ border-radius:var(--r-md); }
.alert-pop{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-3); }
.notice-tag{ border-radius:var(--r-pill); }
.stat-ico{ border-radius:14px; }

/* =========================================================================
   SECTIONS SOMBRES : halos lumineux au lieu d'aplats
   ========================================================================= */
.zone-section, .contact-section, .sea-section{ position:relative; isolation:isolate; }
.zone-section::after, .contact-section::after, .sea-section::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 82% 8%,  rgba(108,172,228,.20), transparent 68%),
    radial-gradient(48% 40% at 10% 96%, rgba(67,176,42,.14),  transparent 70%);
}
.zone-section > .wrap, .contact-section > .wrap, .sea-section > .wrap{ position:relative; z-index:2; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(46% 42% at 76% 34%, rgba(108,172,228,.22), transparent 70%);
}

/* =========================================================================
   VIGNETTES D'ACTUALITÉ ILLUSTRÉES
   ========================================================================= */
.news-thumb{ background:linear-gradient(150deg,#12578A,#062A45); }
.news-thumb.g{ background:linear-gradient(150deg,#1E7A3C,#0A3F28); }
.news-thumb.b{ background:linear-gradient(150deg,#1B5B8A,#062A45); }
.news-art{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.news-art *{ vector-effect:non-scaling-stroke; }
.news-card:hover .news-art{ transform:scale(1.06); }
.news-art{ transition:transform .6s var(--ease); }
.news-thumb .stripe-set{ z-index:2; }

/* =========================================================================
   RÉVÉLATION EN CASCADE
   ========================================================================= */
.reveal{ transform:translateY(22px); }
.stagger > *{ opacity:0; transform:translateY(20px); }
.stagger.is-visible > *{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.is-visible > *:nth-child(1){ transition-delay:.02s; }
.stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.stagger.is-visible > *:nth-child(3){ transition-delay:.16s; }
.stagger.is-visible > *:nth-child(4){ transition-delay:.23s; }
.stagger.is-visible > *:nth-child(5){ transition-delay:.30s; }
.stagger.is-visible > *:nth-child(6){ transition-delay:.37s; }
@media (prefers-reduced-motion: reduce){ .stagger > *{ opacity:1 !important; transform:none !important; } }

/* =========================================================================
   RETOUR EN HAUT : anneau de progression
   ========================================================================= */
.to-top{ border-radius:50%; box-shadow:var(--sh-2); background:linear-gradient(135deg,#0B3F66,var(--navy-deep)); }
.to-top svg.ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.to-top .ring circle{ fill:none; stroke-width:2.5; }
.to-top .ring .bg{ stroke:rgba(255,255,255,.16); }
.to-top .ring .fg{ stroke:var(--stripe-green); stroke-linecap:round; transition:stroke-dashoffset .12s linear; }

/* =========================================================================
   DIVERS
   ========================================================================= */
.zone-item{ border-radius:var(--r-xs); padding-inline:14px; transition:background .25s var(--ease); }
.zone-item:hover{ background:rgba(108,172,228,.10); }
.dots button{ border-radius:var(--r-pill); }
.lang button{ border-radius:var(--r-pill); }
.emblem-header, .crest-emblem{ will-change:transform; }
::selection{ background:var(--stripe-blue); color:#04202f; }

/* barre de défilement discrète (navigateurs compatibles) */
* { scrollbar-width:thin; scrollbar-color:rgba(108,172,228,.55) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(108,172,228,.45); border-radius:var(--r-pill); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(108,172,228,.75); background-clip:content-box; }

/* =========================================================================
   CORRECTION TYPOGRAPHIQUE — jambages et accents
   Fraunces possède des descendantes longues (j, g, q, y) et des accents
   hauts (Ô, É, Â). Les hauteurs de ligne serrées les rognaient.
   On garantit ici une réserve verticale suffisante partout.
   ========================================================================= */
h1, h2, h3, h4, h5, h6{
  padding-bottom:.09em;          /* réserve pour les descendantes */
  padding-top:.02em;             /* réserve pour les accents hauts */
}

/* --- titres de héros et de bannière --- */
.hero h1, .hero .h-title{ line-height:1.22; }
.page-hero h1{ line-height:1.2; }
.article-hero h1{ line-height:1.2; }
.section-head h2, .zone-copy h2, .recruit-inner h2, .news-head h2{ line-height:1.26; }
.prose h2{ line-height:1.3; }
.prose h3{ line-height:1.32; }
.mission-card h3, .contact-card h3, .aside-card h3, .base-card h3,
.notice-item h3, .fleet-body h3, .news-body h3{ line-height:1.36; }

/* --- nombres : le fond dégradé découpé au texte rognait les glyphes --- */
.stat .figure{
  line-height:1.24;
  padding-bottom:.1em;
  display:inline-block;          /* la boîte épouse le texte, gradient compris */
}
.metric-value{ line-height:1.26; padding-bottom:.06em; }
.tide-live-value{ line-height:1.26; padding-bottom:.06em; }
.contact-card .big, .contact-card .big-alt, .aside-card .big{
  line-height:1.3; padding-bottom:.06em;
}

/* --- logotype : capitales accentuées (Ô de CÔTES) --- */
.brand-text .name{ line-height:1.3; padding-bottom:.04em; }
.footer-brand .name{ line-height:1.38; padding-bottom:.04em; }

/* --- arabe : les diacritiques descendent également --- */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{
  line-height:1.5; padding-bottom:.12em;
}
html[lang="ar"] .hero h1, html[lang="ar"] .hero .h-title{ line-height:1.45; }
html[lang="ar"] .brand-text .name{ line-height:1.45; }
html[lang="ar"] .stat .figure, html[lang="ar"] .metric-value{ line-height:1.4; }

.news-card, .fleet-card{ overflow:visible; border-radius:var(--r-md); }
.mission-card{ overflow:hidden; border-radius:var(--r-md); position:relative; }
.mission-card::before{ border-start-start-radius:var(--r-md); }
.news-thumb{ border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); overflow:hidden; }
.fleet-visual{ border-start-start-radius:var(--r-md); border-start-end-radius:var(--r-md); overflow:hidden; }

/* =========================================================================
   ═══ UNIFICATION DU RACING STRIPE ═══
   Un seul module de proportions (fin / large / large = 0,24 : 0,80 : 1),
   un seul sens de lecture (toujours depuis le bord d'attaque), un seul
   angle (64°, via --skew, qui se reflète automatiquement en arabe).
   ========================================================================= */

.hero .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:2%; width:21px; background:var(--stripe-blue); opacity:0.14; }
.hero .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(2% + 47px); width:69px; background:var(--stripe-blue); opacity:0.14; }
.hero .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(2% + 149px); width:86px; background:var(--stripe-green); opacity:0.14; }

.page-hero .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.15; }
.page-hero .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.15; }
.page-hero .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.15; }

.zone-section .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.13; }
.zone-section .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.13; }
.zone-section .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.13; }

.sea-section .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:var(--stripe-blue); opacity:0.13; }
.sea-section .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:var(--stripe-blue); opacity:0.13; }
.sea-section .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:var(--stripe-green); opacity:0.13; }

.recruit-band .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:3%; width:18px; background:rgba(255,255,255,.20); }
.recruit-band .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(3% + 41px); width:59px; background:rgba(255,255,255,.20); }
.recruit-band .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(3% + 128px); width:74px; background:rgba(108,172,228,.45); }

.fleet-visual .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:8%; width:11px; background:var(--stripe-blue); opacity:0.5; }
.fleet-visual .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(8% + 24px); width:35px; background:var(--stripe-blue); opacity:0.5; }
.fleet-visual .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(8% + 76px); width:44px; background:var(--stripe-green); opacity:0.5; }

.news-thumb .stripe-set i:nth-child(1){ left:auto; right:auto; inset-inline-start:10%; width:12px; background:var(--stripe-blue); opacity:0.5; }
.news-thumb .stripe-set i:nth-child(2){ left:auto; right:auto; inset-inline-start:calc(10% + 29px); width:42px; background:var(--stripe-blue); opacity:0.5; }
.news-thumb .stripe-set i:nth-child(3){ left:auto; right:auto; inset-inline-start:calc(10% + 90px); width:52px; background:var(--stripe-green); opacity:0.5; }


/* mêmes proportions pour les micro-glyphes dérivés */
.bearing-label::before,
.stat::before,
.contact-card::before{
  background:linear-gradient(90deg,
    var(--stripe-blue) 0 9%, transparent 9% 20%,
    var(--stripe-blue) 20% 48%, transparent 48% 61%,
    var(--stripe-green) 61% 96%, transparent 96%);
}
.recruit-inner .bearing-label::before{
  background:linear-gradient(90deg,
    #fff 0 9%, transparent 9% 20%,
    #fff 20% 48%, transparent 48% 61%,
    #fff 61% 96%, transparent 96%);
}
.mission-card::before{
  width:22px;
  background:linear-gradient(90deg,
    var(--stripe-blue) 0 20%, transparent 20% 34%,
    var(--stripe-green) 34% 100%);
}

/* le bandeau plein format n'héritait pas des règles de base : ses barres
   n'avaient ni position ni hauteur, donc il restait blanc et vide */

/* =========================================================================
   ═══ BULLETIN DE MER — REFONTE ═══
   Cartes météo modernisées + courbe de marée interactive suivant la souris.
   ========================================================================= */

/* --------- cartes météo : identité de couleur propre à chaque indicateur --------- */
.metrics{ gap:18px; }
.metric{
  --acc-a: var(--stripe-blue);
  --acc-b: var(--stripe-blue-deep);
  position:relative; overflow:hidden;
  display:grid; grid-template-rows:auto auto 1fr auto auto;
  gap:6px; padding:26px 24px 24px; min-height:214px;
}
.metric.m-temp{ --acc-a:#F2B24B; --acc-b:#C8102E; }
.metric.m-wind{ --acc-a:#8FD0F2; --acc-b:var(--stripe-blue-deep); }
.metric.m-wave{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-green); }
.metric.m-seatemp{ --acc-a:#5FE0C9; --acc-b:var(--stripe-green-deep); }

.metric::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background:radial-gradient(120% 90% at 14% -10%, rgba(108,172,228,.16), transparent 68%);
  background:radial-gradient(120% 90% at 14% -10%, color-mix(in srgb, var(--acc-a) 22%, transparent), transparent 68%);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.metric:hover::after{ opacity:.9; }
.metric > *{ position:relative; z-index:1; }

/* liseré bas qui reprend la couleur d'accent : signature discrète et continue */
.metric::before{
  content:""; position:absolute; inset-inline:0; bottom:0; height:3px; z-index:1;
  background:linear-gradient(90deg, var(--acc-a), var(--acc-b));
  opacity:.5; transform:scaleX(.4); transform-origin:0 0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}
.metric:hover::before{ transform:scaleX(1); opacity:.9; }

/* --- pastille d'icône --- */
.metric-ico-wrap{
  position:relative; width:54px; height:54px; margin-bottom:2px;
  display:grid; place-items:center;
}
.metric-ico-wrap .metric-ico{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg, #1c4d73, #0b3f66);
  border:1px solid rgba(108,172,228,.4);
  color:#fff; box-shadow:0 6px 18px rgba(6,42,69,.35);
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 32%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid color-mix(in srgb, var(--acc-a) 45%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.metric-ico-wrap .metric-ico svg{ width:27px; height:27px; }
.metric:hover .metric-ico-wrap .metric-ico{ transform:translateY(-2px) scale(1.05); }

/* halo pulsé en continu autour de l'icône — signal discret « données vivantes » */
.metric-ring{
  position:absolute; inset:-8px; border-radius:20px;
  border:1.5px solid rgba(108,172,228,.5);
  border-color:color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
@keyframes ring-breathe{
  0%,100%{ opacity:0; transform:scale(.9); }
  50%{ opacity:.55; transform:scale(1.08); }
}
.metric:hover .metric-ring{ animation-duration:1.8s; }

.metric-label{ margin-top:2px; }
.metric-value{
  font-size:34px; margin-top:0;
  background:linear-gradient(120deg, var(--acc-a), var(--acc-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metric-value small{ -webkit-text-fill-color:#bad2e2; color:#bad2e2; }

/* ligne méta (direction du vent) : hauteur réservée même vide, pour un alignement parfait des 4 cartes */
.metric-sub{ min-height:18px; display:flex; align-items:center; gap:7px; }
.wind-arrow{ color:var(--acc-a); }

/* --- pastille de niveau : corrige l'étirement (bug d'alignement flex) --- */
.metric-tag{
  justify-self:start; align-self:end;
  display:inline-flex; align-items:center; gap:7px; width:auto; max-width:100%;
  padding:6px 13px 6px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.metric-tag::before{
  content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:currentColor;
}
.metric-tag:empty{ display:none; }
.metric-tag[data-level="calm"]{
  background:rgba(67,176,42,.15); color:#8fe07f; border:1px solid rgba(67,176,42,.34);
}
.metric-tag[data-level="calm"]::before{ animation:tag-dot 2.6s ease-in-out infinite; }
.metric-tag[data-level="moderate"]{
  background:rgba(108,172,228,.15); color:#a9d4f5; border:1px solid rgba(108,172,228,.36);
}
.metric-tag[data-level="strong"]{
  background:rgba(200,16,46,.16); color:#ff9aa5; border:1px solid rgba(200,16,46,.38);
}
.metric-tag[data-level="strong"]::before{ animation:tag-dot 1.1s ease-in-out infinite; }
@keyframes tag-dot{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

/* ============ animations propres à chaque grandeur, continues et sobres ============ */

/* Température de l'air : mercure qui respire + micro-bulles ascendantes */
.metric.m-temp .metric-ico svg circle{
  animation:temp-pulse 2.8s ease-in-out infinite; transform-origin:16px 22px;
}
@keyframes temp-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
.metric.m-temp .metric-ico svg path:last-of-type{
  animation:heat-rise 2.4s ease-in-out infinite;
}
@keyframes heat-rise{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-1.5px); }
}

/* Vent : les trois lignes défilent comme portées par une brise (tirets animés) */
.metric.m-wind .metric-ico svg path{
  stroke-dasharray:5 4; animation:wind-flow 1.6s linear infinite;
}
.metric.m-wind .metric-ico svg path:nth-child(2){ animation-duration:1.3s; }
.metric.m-wind .metric-ico svg path:nth-child(3){ animation-duration:1.9s; }
@keyframes wind-flow{ to{ stroke-dashoffset:-18; } }
.wind-arrow svg{ transition:transform 1s var(--ease); }

/* Vagues : deux crêtes qui roulent en léger différé, effet de houle */
.metric.m-wave .metric-ico svg path:first-child{ animation:wave-roll-a 3s ease-in-out infinite; }
.metric.m-wave .metric-ico svg path:nth-child(2){ animation:wave-roll-b 3s ease-in-out infinite .35s; }
@keyframes wave-roll-a{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes wave-roll-b{ 0%,100%{ transform:translateY(-1px); } 50%{ transform:translateY(1.4px); } }

/* Température de la mer : anneaux d'onde qui se propagent depuis la goutte */
.metric.m-seatemp .metric-ico{ position:relative; overflow:visible; }
.metric.m-seatemp .metric-ico::before, .metric.m-seatemp .metric-ico::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  border:1.5px solid rgba(108,172,228,.55);
  border-color:color-mix(in srgb, var(--acc-a) 60%, transparent);
  opacity:0; animation:ripple 2.8s ease-out infinite;
}
.metric.m-seatemp .metric-ico::after{ animation-delay:1.4s; }
@keyframes ripple{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.55); }
}

@media (prefers-reduced-motion: reduce){
  .metric-ring, .metric.m-temp .metric-ico svg *, .metric.m-wind .metric-ico svg path,
  .metric.m-wave .metric-ico svg path, .metric.m-seatemp .metric-ico::before,
  .metric.m-seatemp .metric-ico::after, .metric-tag::before{ animation:none !important; }
}

@media (max-width:600px){
  .metric{ min-height:auto; padding:22px 20px 20px; }
  .metric-value{ font-size:29px; }
}

/* --------- indicateur « en direct » sous l'en-tête --------- */
.tide-live{ position:relative; flex-wrap:wrap; }
.tide-hint{
  flex-basis:100%; font-size:11.5px; color:#7d9cb2; margin-top:2px;
  display:flex; align-items:center; gap:7px;
}
.tide-hint::before{
  content:""; width:14px; height:14px; flex-shrink:0; border-radius:4px;
  background:rgba(108,172,228,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v13M7 12l5 5 5-5' stroke='%236CACE4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
}
.tide-canvas.is-active ~ .tide-hint, .tide-live.is-exploring .tide-hint{ color:var(--stripe-blue); }

/* --------- zone interactive de la courbe --------- */
.tide-canvas{
  position:relative; width:100%; cursor:crosshair; border-radius:var(--r-sm);
  outline-offset:4px;
}
.tide-canvas:hover .tide-chart, .tide-canvas:focus-visible .tide-chart{ filter:brightness(1.04); }
.tide-chart{ transition:filter .2s var(--ease); }

.tide-tooltip{
  position:absolute; top:0; left:0; z-index:6; pointer-events:none;
  transform:translate(-50%,-115%); opacity:0; visibility:hidden;
  background:var(--navy-deep); border:1px solid rgba(108,172,228,.4);
  border-radius:var(--r-xs); padding:8px 12px; white-space:nowrap;
  box-shadow:var(--sh-dark);
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.tide-tooltip.is-visible{ opacity:1; visibility:visible; }
.tide-tooltip-time{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.08em; color:var(--stripe-blue); margin-bottom:2px;
}
.tide-tooltip-val{
  display:block; font-family:'Source Serif 4',serif; font-size:17px; font-weight:600; color:#fff;
}
html[lang="ar"] .tide-tooltip-time{ font-family:'Cairo',monospace; letter-spacing:0; }

/* jauge/curseur exploré (au survol) : distinct du curseur « maintenant » */
#tide-hover-group{ opacity:0; transition:opacity .16s var(--ease); }
#tide-hover-group.is-visible{ opacity:1; }
#tide-cursor-halo, #tide-cursor-dot, #tide-cursor-line{ transition:opacity .25s var(--ease); }
.tide-canvas.is-exploring #tide-cursor-halo,
.tide-canvas.is-exploring #tide-cursor-dot{ opacity:.35; }

@media (max-width:640px){
  .tide-tooltip{ transform:translate(-50%,-108%); padding:7px 10px; }
  .tide-tooltip-val{ font-size:15px; }
}

/* --------- correctif d'espacement : la navigation complète (sans tiroir)
   entre 1121 et 1420px est trop juste pour ses 8 items, dont le nouveau
   menu déroulant « La Garde-Côtes » — resserré plus profondément. --------- */
/* Aucun rapetissement de police ni masquage d'élément : si la navigation
   complète ne tient pas confortablement, on bascule sur le menu latéral
   (voir le seuil défini plus haut). C'est plus lisible qu'un menu compressé. */

/* =========================================================================
   ═══ CHIFFRES CLÉS — VITRINE SOMBRE ═══
   Quatre indicateurs, quatre couleurs, quatre animations qui illustrent
   ce qu'elles racontent plutôt que de simplement bouger.
   ========================================================================= */
.stats-dark{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 90% at 88% -10%, rgba(108,172,228,.16), transparent 60%),
    radial-gradient(50% 70% at 8% 110%, rgba(67,176,42,.12), transparent 65%),
    linear-gradient(180deg, var(--navy-deep) 0%, #082c48 100%);
  border-top:1px solid rgba(108,172,228,.14); border-bottom:none;
}
.stats-dark .stripe-set i:nth-child(1){ left:90%; width:16px; background:var(--stripe-blue); opacity:.1; }
.stats-dark .stripe-set i:nth-child(2){ left:94%; width:54px; background:var(--stripe-blue); opacity:.1; }
.stats-dark .stripe-set i:nth-child(3){ left:103%; width:66px; background:var(--stripe-green); opacity:.1; }
.stats-dark .wrap{ position:relative; z-index:2; }

.stats-dark .stats-grid{ gap:1px; background:rgba(108,172,228,.14); padding:1px; border-radius:var(--r-md); overflow:hidden; }
.stats-dark .stat{
  --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep);
  background:linear-gradient(165deg, rgba(13,53,82,.55), rgba(6,32,56,.7));
  border:none; border-radius:0; padding:34px 26px 30px;
  text-decoration:none; color:inherit; overflow:visible;
}
.stats-dark .stat::before{ display:none; } 
.stats-dark .st-coast{ --acc-a:var(--stripe-blue); --acc-b:var(--stripe-blue-deep); }
.stats-dark .st-watch{ --acc-a:var(--stripe-green); --acc-b:var(--stripe-green-deep); }
.stats-dark .st-bases{ --acc-a:var(--gold-bright); --acc-b:var(--gold-bright-deep); }
.stats-dark .st-call{ --acc-a:#ff8a97; --acc-b:var(--red-star); cursor:pointer; }

.stats-dark .stat-ico-wrap{ position:relative; width:48px; height:48px; margin-bottom:16px; display:grid; place-items:center; }
.stats-dark .stat-ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg, color-mix(in srgb, var(--acc-a) 30%, var(--navy-deep)), color-mix(in srgb, var(--acc-b) 55%, var(--navy-deep)));
  border:1px solid color-mix(in srgb, var(--acc-a) 42%, transparent);
  color:#fff; box-shadow:0 6px 16px color-mix(in srgb, var(--acc-b) 30%, transparent);
  transition:transform .35s var(--ease);
}
.stats-dark .stat-ico svg{ width:25px; height:25px; }
.stats-dark .stat:hover .stat-ico{ transform:translateY(-2px) scale(1.06); }

/* l'or a besoin de plus de saturation que le bleu/vert pour rester lisible :
   dégradé direct plutôt que mélangé au bleu nuit, qui l'assourdissait */
.stats-dark .st-bases .stat-ico{
  background:linear-gradient(145deg, #F0C57A, var(--gold-bright-deep));
  border-color:rgba(232,179,84,.6);
  box-shadow:0 6px 16px rgba(156,107,31,.4);
}

.stats-dark .stat-ring{
  position:absolute; inset:-7px; border-radius:18px;
  border:1.5px solid color-mix(in srgb, var(--acc-a) 55%, transparent);
  opacity:0; animation:ring-breathe 3.6s ease-in-out infinite;
}
.stats-dark .stat:hover .stat-ring{ animation-duration:1.8s; }

.stats-dark .stat .figure{
  font-size:38px; margin-top:0;
  background:linear-gradient(120deg, var(--acc-a), var(--acc-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats-dark .stat .label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:#a9c6db; margin-top:4px;
}
html[lang="ar"] .stats-dark .stat .label{ font-family:'Cairo',monospace; letter-spacing:0; }

/* --- 314 km : un tracé côtier se dessine sans fin, comme une ligne balayée --- */
.stat-trace{ width:100%; height:14px; margin-top:12px; overflow:visible; }
.stat-trace path{
  fill:none; stroke:var(--acc-a); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:6 5; opacity:.55;
  animation:trace-flow 3.2s linear infinite;
}
@keyframes trace-flow{ to{ stroke-dashoffset:-44; } }

/* --- 24/7 : l'aiguille tourne réellement, la veille ne s'arrête jamais --- */
.clock-hand{ transform-origin:16px 16px; animation:clock-sweep 6s linear infinite; }
@keyframes clock-sweep{ to{ transform:rotate(360deg); } }

/* --- 3 bases actives : trois repères qui s'allument en séquence, comme sur la carte --- */
.base-dots{ display:inline-flex; gap:6px; margin-top:13px; }
.base-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--gold-bright);
  opacity:.25; animation:base-dot-seq 2.4s ease-in-out infinite;
}
.base-dots i:nth-child(1){ animation-delay:0s; }
.base-dots i:nth-child(2){ animation-delay:.3s; }
.base-dots i:nth-child(3){ animation-delay:.6s; }
@keyframes base-dot-seq{
  0%, 100%{ opacity:.25; transform:scale(1); }
  30%{ opacity:1; transform:scale(1.35); box-shadow:0 0 8px var(--gold-bright); }
  60%{ opacity:.4; transform:scale(1); }
}

/* --- 1500 : vraie tuile d'appel, combiné qui vibre, flèche qui invite au geste --- */
.st-call .stat-ico svg{ animation:phone-ring 2.8s ease-in-out infinite; transform-origin:50% 18%; }
.st-call{ display:flex; flex-direction:column; align-items:flex-start; position:relative; transition:background .25s var(--ease); }
.st-call:hover{ background:linear-gradient(165deg, rgba(200,16,46,.14), rgba(6,32,56,.7)); }
.stat-call-arrow{
  position:absolute; top:34px; inset-inline-end:26px; color:var(--acc-a);
  opacity:0; transform:translateX(-4px); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.st-call:hover .stat-call-arrow{ opacity:1; transform:translateX(0); }
html[dir="rtl"] .stat-call-arrow{ transform:translateX(4px) scaleX(-1); }
html[dir="rtl"] .st-call:hover .stat-call-arrow{ transform:translateX(0) scaleX(-1); }

@media (prefers-reduced-motion: reduce){
  .stat-trace path, .clock-hand, .base-dots i, .st-call .stat-ico svg, .stats-dark .stat-ring{
    animation:none !important;
  }
  .stat-trace path{ opacity:.35; }
  .base-dots i{ opacity:.6; }
}

@media (max-width:960px){ .stats-dark .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .stats-dark .stats-grid{ grid-template-columns:1fr; }
  .stats-dark .stat{ padding:28px 24px; }
}

/* =========================================================================
   CORRECTION DE CONTRASTE — petits textes sur bannières sombres
   Mesuré au pixel : fil d'Ariane 4,42 et 3,67, date d'article 3,47.
   Le seuil WCAG AA pour du texte de moins de 18,66 px est de 4,5.
   ========================================================================= */
.crumb{ color:#BBD4E6; }                                   /* était #9fbdd4 → 4,42 */
.crumb [aria-current="page"]{ color:#A6D2F5; }             /* était #6CACE4 → 3,67 */
/* .page-hero p (0,1,1) l'emportait sur .article-date (0,1,0) : la date
   n'avait jamais sa couleur prévue. Spécificité rehaussée. */
.page-hero .article-date, .article-hero .article-date{ color:#A6D2F5; }

/* =========================================================================
   ═══ TYPOGRAPHIE DES DONNÉES CHIFFRÉES ═══
   Les chiffres d'un serif éditorial sont peu lisibles en grand format.
   Tous les nombres passent en sans-serif tabulaire : chasse constante,
   alignement parfait en colonne, lecture immédiate.
   ========================================================================= */
.stat .figure,
.metric-value,
.tide-live-value,
.contact-card .big,
.contact-card .big-alt,
.aside-card .big,
.bc-number,
.sos-number{
  font-family:'Public Sans', system-ui, sans-serif !important;
  font-weight:800;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
  letter-spacing:-.022em;
}
html[lang="ar"] .stat .figure,
html[lang="ar"] .metric-value,
html[lang="ar"] .tide-live-value{ font-family:'Cairo', sans-serif !important; letter-spacing:0; }

/* les unités restent discrètes et non tabulaires */
.metric-value small, .stat .figure small{
  font-weight:600; letter-spacing:0; font-variant-numeric:normal;
}

/* =========================================================================
   ═══ BANDEAU SUPÉRIEUR — CONTRÔLES PREMIUM ═══
   Pastilles en verre à liseré lumineux, sélecteur de langue en contrôle
   segmenté avec curseur coulissant.
   ========================================================================= */
.topbar{
  background:linear-gradient(90deg, #041a2c 0%, #062a45 42%, #073352 68%, #041a2c 100%);
  border-bottom:1px solid rgba(108,172,228,.16);
}
.topbar .wrap{ min-height:46px; }

/* --- pastilles urgence / VHF --- */
.urgent-chip{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:5px 15px 5px 5px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border:1px solid rgba(108,172,228,.26);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px -8px rgba(0,0,0,.6);
  overflow:hidden;
  transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* reflet qui balaie la pastille d'appel, très lentement */
a.urgent-chip::after{
  content:""; position:absolute; top:0; bottom:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(var(--skew)); left:-45%;
  animation:chip-sheen 7s ease-in-out infinite;
}
@keyframes chip-sheen{ 0%,72%{ left:-45%; } 92%,100%{ left:130%; } }
a.urgent-chip:hover{
  border-color:rgba(67,176,42,.65); transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -8px rgba(67,176,42,.5);
}
.urgent-chip .chip-ico{
  position:relative; z-index:1; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0; color:#fff;
  background:linear-gradient(145deg, #55c93c, var(--stripe-green-deep));
  box-shadow:0 3px 9px rgba(37,110,24,.5);
}
.vhf-chip .chip-ico{ background:linear-gradient(145deg, #5FA8E0, var(--stripe-blue-deep)); box-shadow:0 3px 9px rgba(27,91,138,.5); }
.urgent-chip .chip-ico svg{ width:14px; height:14px; }
.urgent-chip .chip-txt{ position:relative; z-index:1; display:inline-flex; align-items:baseline; gap:8px; line-height:1; }
.urgent-chip .chip-lbl{ font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:#9fbdd4; }
.urgent-chip b{
  font-family:'Public Sans',sans-serif; font-size:14px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* --- sélecteur de langue : contrôle segmenté à curseur coulissant --- */
.lang{
  position:relative; display:inline-flex; gap:2px; padding:3px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.06);
  border:1px solid rgba(108,172,228,.2);
}
/* le curseur glissant animé dépendait d'une fonction JS (placeLangIndicator)
   qui mesurait la position du bouton actif à chaque bascule de langue --
   devenue inutile depuis que chaque page est figée dans une langue fixe
   (changer de langue recharge une vraie page), mais sa suppression a
   laissé le fond par défaut sans jamais être positionné correctement
   (bug réel corrigé : fond statique posé directement sur le lien actif,
   sans JS ni mesure dynamique nécessaire) */
.lang a{
  position:relative; z-index:1; display:inline-block; background:none; border:none; cursor:pointer;
  font-size:11.5px; font-weight:600; color:#9fbdd4; padding:4px 11px;
  border-radius:var(--r-pill); opacity:1; transition:color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap; text-align:center;
}
.lang a.is-active{
  color:#fff;
  background:linear-gradient(180deg, var(--stripe-blue-deep), #16496f);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
}
.lang a:hover{ color:#dce9f2; }
.lang a.is-active:hover{ color:#fff; }


@media (max-width:640px){
  .urgent-chip{ padding:4px 11px 4px 4px; gap:7px; }
  .urgent-chip .chip-ico{ width:23px; height:23px; }
  .urgent-chip .chip-lbl{ display:none; }
  .lang button{ padding:4px 8px; font-size:11px; }
}

/* =========================================================================
   ═══ BANDEAU DE VEILLE — LECTURE HIÉRARCHISÉE ═══
   ========================================================================= */
.hero-ticker-bar{
  background:linear-gradient(180deg, rgba(4,20,34,.55), rgba(4,20,34,.92));
  border-top:1px solid rgba(108,172,228,.22);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.ticker{ gap:0; padding:11px 0; }
.tk-item{
  display:inline-flex; align-items:center; gap:9px;
  padding:0 26px; border-inline-end:1px solid rgba(108,172,228,.14);
}
.tk-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--stripe-blue); box-shadow:0 0 7px currentColor;
}
.tk-ok    .tk-dot{ background:var(--stripe-green); }
.tk-watch .tk-dot{ background:var(--stripe-green); animation:tag-dot 2s ease-in-out infinite; }
.tk-pos   .tk-dot{ background:var(--stripe-blue); }
.tk-sea   .tk-dot{ background:#5FE0C9; }
.tk-unit  .tk-dot{ background:var(--gold-bright); }
.tk-tag{
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stripe-blue); flex-shrink:0;
}
.tk-ok .tk-tag, .tk-watch .tk-tag{ color:var(--stripe-green); }
.tk-sea .tk-tag{ color:#5FE0C9; }
.tk-unit .tk-tag{ color:var(--gold-bright); }
.tk-val{ font-size:12px; color:#c3d9e8; letter-spacing:.02em; }
html[lang="ar"] .tk-tag{ letter-spacing:0; }

/* =========================================================================
   ═══ ASSISTANT EN LIGNE ═══
   Agent conversationnel autonome : répond hors connexion à partir d'une base
   de connaissances embarquée, dans les trois langues du site.
   ========================================================================= */
.bot-fab{
  position:fixed; inset-inline-end:24px; bottom:84px; z-index:110;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, #1c6ea8, var(--navy-deep));
  box-shadow:0 12px 30px -8px rgba(6,42,69,.7), 0 0 0 1px rgba(108,172,228,.3) inset;
  transition:transform .3s cubic-bezier(.22,1.3,.36,1), box-shadow .3s var(--ease);
}
.bot-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 38px -8px rgba(6,42,69,.8); }
.bot-fab svg{ width:26px; height:26px; }
.bot-fab .fab-close{ display:none; }
.bot-fab[aria-expanded="true"] .fab-open{ display:none; }
.bot-fab[aria-expanded="true"] .fab-close{ display:block; }
.bot-fab .fab-halo{
  position:absolute; inset:-5px; border-radius:50%; border:1.5px solid rgba(108,172,228,.5);
  animation:ring-breathe 3.4s ease-in-out infinite; pointer-events:none;
}
@media (max-width:680px){ .bot-fab{ bottom:82px; inset-inline-end:16px; width:52px; height:52px; } }

.bot-panel{
  position:fixed; inset-inline-end:24px; bottom:150px; z-index:111;
  width:352px; max-width:calc(100vw - 32px); height:min(520px, calc(100vh - 200px));
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-lg);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(108,172,228,.14), transparent 60%),
    linear-gradient(180deg, rgba(9,42,68,.97), rgba(4,20,34,.98));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 32px 72px -16px rgba(2,12,22,.7), 0 0 0 1px rgba(108,172,228,.2) inset;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .24s var(--ease), transform .34s cubic-bezier(.22,1.25,.36,1), visibility .24s;
}
html[dir="rtl"] .bot-panel{ transform-origin:bottom left; }
.bot-panel[data-open="true"]{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
@media (max-width:680px){
  .bot-panel{ inset-inline:12px; width:auto; max-width:none; bottom:142px; height:min(460px, calc(100vh - 220px)); }
}

.bot-head{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  border-bottom:1px solid rgba(108,172,228,.16); flex-shrink:0;
}
.bot-avatar{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:linear-gradient(145deg, #5FA8E0, var(--stripe-blue-deep)); color:#fff;
}
.bot-avatar svg{ width:19px; height:19px; }
.bot-id{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.bot-name{ font-size:13px; font-weight:700; color:#eaf3f9; }
.bot-status{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stripe-green);
}
html[lang="ar"] .bot-status{ font-family:'Cairo',monospace; letter-spacing:0; }
.bot-status i{ width:5px; height:5px; border-radius:50%; background:var(--stripe-green);
  box-shadow:0 0 7px var(--stripe-green); animation:tag-dot 2.2s ease-in-out infinite; }

.bot-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.bot-msg{ max-width:86%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; }
.bot-msg.from-bot{
  align-self:flex-start; background:rgba(255,255,255,.07);
  border:1px solid rgba(108,172,228,.18); color:#dce9f2; border-start-start-radius:5px;
}
.bot-msg.from-user{
  align-self:flex-end; background:linear-gradient(145deg, var(--stripe-blue-deep), #16496f);
  color:#fff; border-end-end-radius:5px;
}
.bot-msg a{ color:var(--stripe-blue); text-decoration:underline; text-underline-offset:3px; }
.bot-msg strong{ color:#fff; }

.bot-typing{ display:inline-flex; gap:4px; align-items:center; padding:12px 14px; }
.bot-typing i{ width:6px; height:6px; border-radius:50%; background:var(--stripe-blue);
  animation:bot-bounce 1.2s ease-in-out infinite; }
.bot-typing i:nth-child(2){ animation-delay:.15s; }
.bot-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bot-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

.bot-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; flex-shrink:0; }
.bot-chip{
  background:rgba(108,172,228,.12); border:1px solid rgba(108,172,228,.3);
  color:#bcdcf5; font-size:11.5px; padding:6px 12px; border-radius:var(--r-pill);
  cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.bot-chip:hover{ background:rgba(108,172,228,.24); border-color:var(--stripe-blue); transform:translateY(-1px); }

.bot-form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(108,172,228,.16); flex-shrink:0; }
.bot-input{
  flex:1; min-width:0; background:rgba(255,255,255,.06); border:1px solid rgba(108,172,228,.22);
  border-radius:var(--r-pill); padding:10px 14px; color:#eaf3f9; font-family:inherit; font-size:13px;
}
.bot-input::placeholder{ color:#7d9cb2; }
.bot-input:focus{ outline:none; border-color:var(--stripe-blue); background:rgba(255,255,255,.09); }
.bot-send{
  width:38px; height:38px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, #5FA8E0, var(--stripe-blue-deep));
  transition:transform .2s var(--ease);
}
.bot-send:hover{ transform:scale(1.07); }
.bot-send svg{ width:17px; height:17px; }
html[dir="rtl"] .bot-send svg{ transform:scaleX(-1); }

.bot-note{ padding:0 16px 12px; font-size:10.5px; color:#7d9cb2; text-align:center; flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  .bot-fab .fab-halo, .bot-status i, .bot-typing i{ animation:none !important; }
  .bot-panel{ transition:opacity .2s; transform:none; }
}
@media print{ .bot-fab, .bot-panel{ display:none !important; } }

/* =========================================================================
   ═══ PANNEAU D'URGENCE — VERSION SOBRE ═══
   L'aplat rouge plein écrasait la page. Le rouge devient un accent :
   halo de fond, anneau du cadran, filet lumineux. Le chiffre domine seul.
   ========================================================================= */
.sos-card{
  background:
    radial-gradient(90% 100% at 88% -10%, rgba(200,16,46,.30), transparent 62%),
    radial-gradient(70% 80% at 4% 110%, rgba(108,172,228,.12), transparent 65%),
    linear-gradient(165deg, rgba(14,44,68,.92), rgba(5,22,36,.96));
  border:1px solid rgba(200,16,46,.36);
  box-shadow:0 24px 56px -18px rgba(2,12,22,.7), 0 0 0 1px rgba(255,255,255,.04) inset;
  color:#eaf3f9;
}
.sos-card:hover{
  border-color:rgba(200,16,46,.6);
  box-shadow:0 30px 66px -18px rgba(200,16,46,.4), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform:translateY(-3px);
}
/* filet vertical rouge le long du bord d'attaque : signature discrète */
.sos-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px; z-index:3;
  background:linear-gradient(180deg, transparent, var(--red-star) 22%, #ff8a97 50%, var(--red-star) 78%, transparent);
  opacity:.9;
}
.sos-card .tag{ color:#ff9aa5; }
.sos-card h3{ color:#fff; }
.sos-desc{ color:#b0c9da; }

.sos-rings i{ border-color:rgba(255,138,151,.4); }

.sos-dial{
  background:linear-gradient(155deg, rgba(200,16,46,.9), rgba(122,12,29,.9));
  border:1px solid rgba(255,138,151,.45);
  box-shadow:0 10px 26px -8px rgba(200,16,46,.65), 0 0 0 8px rgba(200,16,46,.08);
}
.sos-dial-ring{ border-color:rgba(255,138,151,.45); }

.sos-number{
  color:#fff;
  text-shadow:0 0 34px rgba(255,138,151,.35);
}
.sos-cta{
  color:#fff; padding:11px 20px; border-radius:var(--r-pill); margin-top:auto;
  background:linear-gradient(135deg, #E5334A, var(--red-star));
  box-shadow:0 8px 20px -6px rgba(200,16,46,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sos-card:hover .sos-cta{ transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(200,16,46,.7); }

/* =========================================================================
   ═══ BANNIÈRE — TRAITEMENT PREMIUM ═══
   Voile lumineux animé très lent, grille de navigation en filigrane,
   vignettage doux : de la profondeur sans surcharge.
   ========================================================================= */
.hero{ isolation:isolate; }

/* deux voiles de lumière qui dérivent lentement, comme une aurore marine */
.hero .aurora{
  position:absolute; inset:-25%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.55;
}
.hero .aurora i{ position:absolute; display:block; border-radius:50%; }
.hero .aurora .a1{
  width:46%; height:60%; left:4%; top:6%;
  background:radial-gradient(circle, rgba(108,172,228,.55), transparent 66%);
  animation:aurora-a 26s ease-in-out infinite alternate;
}
.hero .aurora .a2{
  width:40%; height:52%; right:8%; bottom:2%;
  background:radial-gradient(circle, rgba(67,176,42,.4), transparent 66%);
  animation:aurora-b 32s ease-in-out infinite alternate;
}
@keyframes aurora-a{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(9%,7%,0) scale(1.16); }
}
@keyframes aurora-b{
  0%{ transform:translate3d(0,0,0) scale(1.08); }
  100%{ transform:translate3d(-8%,-6%,0) scale(.94); }
}
@media (prefers-reduced-motion: reduce){ .hero .aurora i{ animation:none !important; } }

/* vignettage : concentre le regard sur le contenu */
.hero::after{
  background:
    radial-gradient(46% 42% at 76% 34%, rgba(108,172,228,.20), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(2,12,22,.45) 100%);
}

.hero-grid{ z-index:2; }

/* --- pagination du carrousel : barres de progression --- */
.dots button{
  position:relative; width:44px; height:3px; border-radius:2px;
  background:rgba(234,243,249,.2); overflow:hidden;
}
.dots button::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:0;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  border-radius:2px;
}
.dots button[aria-selected="true"]{ background:rgba(234,243,249,.2); }
.dots button[aria-selected="true"]::after{ animation:dot-progress 7s linear forwards; }
@keyframes dot-progress{ from{ width:0; } to{ width:100%; } }
.slides:hover ~ .slide-nav .dots button[aria-selected="true"]::after,
.slide-nav[data-paused="true"] .dots button[aria-selected="true"]::after{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .dots button[aria-selected="true"]::after{ animation:none; width:100%; }
}

.slide-count{ font-variant-numeric:tabular-nums; }
.slide-pause{
  border-radius:var(--r-pill); background:rgba(255,255,255,.06);
  border:1px solid rgba(234,243,249,.22); transition:background .2s var(--ease), border-color .2s var(--ease);
}
.slide-pause:hover{ background:rgba(255,255,255,.12); border-color:var(--stripe-blue); }

/* --- socle de l'emblème : halo lumineux derrière la boussole --- */
.crest-stage::before{
  content:""; position:absolute; inset:6%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(108,172,228,.28), transparent 68%);
  filter:blur(28px);
  animation:crest-glow 7s ease-in-out infinite;
}
@keyframes crest-glow{ 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce){ .crest-stage::before{ animation:none; } }


/* =========================================================================
   ═══ HORLOGE DU BANDEAU ═══
   Intégrée au module de droite, collée au sélecteur de langue, à
   l'extrémité de la barre — plus un segment de l'instrument qu'un élément
   flottant au centre.
   ========================================================================= */
.topbar-clock{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:0 16px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.04em; color:#9fbdd4; white-space:nowrap;
}
.tc-dot{
  width:6px; height:6px; border-radius:50%; background:var(--stripe-green); flex-shrink:0;
  box-shadow:0 0 7px var(--stripe-green); animation:tag-dot 2.2s ease-in-out infinite;
}
.tc-time{
  font-weight:700; color:#eaf3f9; font-variant-numeric:tabular-nums; letter-spacing:.02em;
  min-width:6.5ch; text-align:center;
}
.tc-sep{ color:rgba(157,182,198,.45); }
.tc-label{ letter-spacing:.14em; color:#8fa9bd; }
.tc-utc{ color:#8fa9bd; }
html[lang="ar"] .topbar-clock{ font-family:'Cairo',monospace; letter-spacing:0; }
html[lang="ar"] .tc-label{ letter-spacing:0; }

@media (prefers-reduced-motion: reduce){ .tc-dot{ animation:none !important; } }

/* la ville et le fuseau s'effacent en premier ; l'heure elle-même tient
   jusqu'à ce que le module bascule entièrement en version compacte */
@media (max-width:900px){ .tc-label, .tc-utc, .tc-sep{ display:none; } }
@media (max-width:760px){ .topbar-clock{ display:none; } }

/* =========================================================================
   BANDEAU SUPÉRIEUR — largeur pleine
   Le fond du bandeau s'étend sur toute la largeur de l'écran ; son contenu
   ne doit pas rester enfermé dans la colonne de 1240px du reste du site,
   sans quoi de larges bandes mortes apparaissent aux deux extrémités sur
   grand écran.
   ========================================================================= */
.topbar-wrap{ max-width:none; padding-inline:28px; }
@media (max-width:640px){ .topbar-wrap{ padding-inline:20px; } }

/* =========================================================================
   ═══ LECTEUR VIDÉO EN FAÇADE ═══
   Vignette premium avec bouton de lecture ; se transforme en lecteur réel
   au clic. Sans identifiant configuré, affiche un état « à venir » sobre
   plutôt qu'un bouton mort.
   ========================================================================= */
.video-card{
  position:relative; aspect-ratio:16/9; width:100%; border-radius:var(--r-md);
  overflow:hidden; cursor:pointer; isolation:isolate;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(108,172,228,.22), transparent 60%),
    radial-gradient(70% 90% at 8% 110%, rgba(67,176,42,.14), transparent 65%),
    linear-gradient(155deg, var(--navy-soft) 0%, var(--navy-deep) 70%);
  border:1px solid rgba(108,172,228,.22);
  box-shadow:0 20px 46px -16px rgba(2,12,22,.55);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.video-card:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -16px rgba(2,12,22,.65); }
.video-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* filigrane de la boussole en fond, discret, pour ne pas laisser une
   vignette totalement nue tant qu'aucune image d'aperçu n'est fournie */
.video-card::before{
  content:""; position:absolute; inset:0; opacity:.08; z-index:0;
  background-image:var(--emblem); background-size:52% auto; background-position:center;
  background-repeat:no-repeat; filter:grayscale(1) brightness(2);
}

.vc-play{
  position:relative; z-index:1; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1.5px solid rgba(255,255,255,.4);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.22,1.4,.36,1);
}
.vc-play svg{ width:22px; height:22px; margin-inline-start:3px; }
.video-card:hover .vc-play{ transform:scale(1.08); }
.vc-ring{
  position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  animation:ring-breathe 3.2s ease-in-out infinite; z-index:1;
}
.video-card:hover .vc-ring{ animation-duration:1.7s; }

.vc-label{
  position:absolute; z-index:1; inset-inline:0; bottom:0;
  padding:22px 22px 18px;
  background:linear-gradient(180deg, transparent, rgba(2,12,22,.78));
  display:flex; flex-direction:column; gap:4px;
}
.vc-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--stripe-blue);
}
.vc-title{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:#fff; line-height:1.3; }
html[lang="ar"] .vc-tag{ font-family:'Cairo',monospace; letter-spacing:0; }

/* --- disposition interne : bouton centré au repos --- */
.video-card{ display:flex; align-items:center; justify-content:center; }
.video-card.is-playing{ cursor:default; }
.video-card.is-playing .vc-play, .video-card.is-playing .vc-ring,
.video-card.is-playing .vc-label{ display:none; }

/* --- état « à venir » : sobre, honnête, non cliquable --- */
.video-card.is-empty{ cursor:default; }
.video-card.is-empty:hover{ transform:none; box-shadow:0 20px 46px -16px rgba(2,12,22,.55); }
.video-card.is-empty .vc-play{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.4);
}
.video-card.is-empty .vc-ring{ display:none; }
.vc-soon{
  display:none; margin-top:5px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#7d9cb2;
}
.video-card.is-empty .vc-soon{ display:block; }
html[lang="ar"] .vc-soon{ font-family:'Cairo',monospace; letter-spacing:0; }

@media (prefers-reduced-motion: reduce){ .vc-ring{ animation:none !important; } }

/* =========================================================================
   ═══ MENU DÉROULANT « LA GARDE-CÔTES » ═══
   S'ouvre vers le bas au survol ou au clic. Verre sombre, cohérent avec le
   reste du site, pour ne pas jurer avec un fond blanc générique typique
   des menus de navigation classiques.
   ========================================================================= */
.has-drop{ position:relative; }
.drop-trigger{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink-soft);
  padding:9px 0; white-space:nowrap; transition:color .2s var(--ease);
}
.drop-trigger::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:3px; width:0;
  background:linear-gradient(to right, var(--stripe-blue) 0 45%, var(--stripe-green) 55% 100%);
  transition:width .25s var(--ease);
}
.drop-trigger .chev{
  width:9px; height:9px; flex-shrink:0; transition:transform .25s var(--ease);
}
.drop-trigger .chev svg{ width:100%; height:100%; }
.has-drop:hover .drop-trigger, .drop-trigger[aria-expanded="true"]{ color:var(--navy-deep); }
.has-drop:hover .drop-trigger::after, .drop-trigger[aria-expanded="true"]::after{ width:100%; }
.has-drop:hover .drop-trigger .chev, .drop-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* Méga-menu horizontal : les trois entrées se lisent côte à côte plutôt
   qu'empilées, comme une rangée de destinations plutôt qu'une liste. */
.drop-panel{
  position:absolute; top:calc(100% + 12px); inset-inline-start:-16px; z-index:80;
  display:flex; align-items:stretch; width:max-content;
  border-radius:var(--r-sm); overflow:hidden; padding:4px;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(108,172,228,.16), transparent 60%),
    linear-gradient(165deg, rgba(9,42,68,.97), rgba(4,20,34,.98));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 26px 56px -14px rgba(2,12,22,.5), 0 0 0 1px rgba(108,172,228,.18) inset;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97); transform-origin:top left;
  transition:opacity .2s var(--ease), transform .28s cubic-bezier(.22,1.25,.36,1), visibility .2s;
}
html[dir="rtl"] .drop-panel{ transform-origin:top right; }
.has-drop:hover .drop-panel, .has-drop:focus-within .drop-panel,
.has-drop .drop-trigger[aria-expanded="true"] ~ .drop-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}

/* =========================================================================
   ═══ MENU DÉROULANT « LA GARDE-CÔTES » — HUD DE NAVIGATION ═══
   Le vocabulaire du poste de veille plutôt que celui d'un site vitrine :
   relèvement (N/E/S), réticule d'accroche façon radar, balayage lent en
   fond, ping qui se propage au verrouillage. Trois cibles, pas trois liens.
   ========================================================================= */
/* pas de position:relative ici : à spécificité égale avec la règle de base
   .drop-panel (position:absolute), la déclaration la plus tardive gagnerait
   et sortirait le panneau du flux absolu, poussant toute la navigation
   (bug réel détecté et corrigé) */
.drop-panel-v3{
  isolation:isolate; overflow:hidden;
  padding:0; gap:0;
}

/* balayage radar : un voile de lumière tourne lentement en fond, à peine
   perceptible, comme l'écho d'un écran de veille */
.dpv3-sweep{
  position:absolute; inset:-40%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(108,172,228,.16) 18deg, transparent 46deg, transparent 360deg);
  animation:dpv3-rotate 7s linear infinite;
}
@keyframes dpv3-rotate{ to{ transform:rotate(360deg); } }

/* trame de coordonnées très discrète, comme un fond de carte marine */
.dpv3-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(108,172,228,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,172,228,.07) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 40%, transparent 100%);
  mask-image:radial-gradient(120% 120% at 50% 50%, #000 40%, transparent 100%);
}

/* deux classes = spécificité (0,2,0), qui dépasse volontairement celle de
   « nav.primary a » (0,1,2) et garantit que display:flex s'applique */
.drop-panel-v3 .dpv3-item{
  --dp-accent:var(--stripe-blue);
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  flex:0 0 158px; min-width:0; padding:22px 20px 20px;
  text-decoration:none;
  transition:background .3s var(--ease);
}
.dpv3-item:hover, .dpv3-item:focus-visible{ background:rgba(108,172,228,.05); }
.dpv3-item + .dpv3-item{ border-inline-start:1px solid rgba(108,172,228,.14); }

.dpv3-1{ --dp-accent:var(--gold-bright); }
.dpv3-2{ --dp-accent:var(--stripe-blue); }
.dpv3-3{ --dp-accent:var(--stripe-green); }

/* --- réticule d'accroche : deux coins qui se referment sur la cible au
   survol, comme un verrouillage radar --- */
.dpv3-bracket{
  position:absolute; width:14px; height:14px; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease), transform .35s cubic-bezier(.22,1.4,.36,1);
}
.dpv3-tl{ top:8px; inset-inline-start:8px; border-top:1.5px solid var(--dp-accent); border-inline-start:1.5px solid var(--dp-accent); transform:translate(4px,4px); }
.dpv3-br{ bottom:8px; inset-inline-end:8px; border-bottom:1.5px solid var(--dp-accent); border-inline-end:1.5px solid var(--dp-accent); transform:translate(-4px,-4px); }
.dpv3-item:hover .dpv3-bracket, .dpv3-item:focus-visible .dpv3-bracket{ opacity:1; transform:translate(0,0); }

/* --- ping de verrouillage --- */
.dpv3-ping{
  position:absolute; top:24px; inset-inline-start:20px; width:5px; height:5px;
  border-radius:50%; background:var(--dp-accent); z-index:2; pointer-events:none;
  opacity:0;
}
.dpv3-item:hover .dpv3-ping, .dpv3-item:focus-visible .dpv3-ping{
  opacity:1; animation:dpv3-ping-out .9s var(--ease);
}
@keyframes dpv3-ping-out{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--dp-accent) 55%, transparent); }
  100%{ box-shadow:0 0 0 16px transparent; }
}

.dpv3-bearing{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
  letter-spacing:.1em; color:var(--dp-accent); opacity:.8; direction:ltr;
}
html[lang="ar"] .dpv3-bearing{ font-family:'Cairo',monospace; letter-spacing:0; }

.dpv3-t{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:16px;
  color:#eaf3f9; line-height:1.25;
}
html[lang="ar"] .dpv3-t{ font-family:'Cairo',sans-serif; }

.dpv3-d{
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:#7d9cb2;
  line-height:1.4; max-width:120px;
}
html[lang="ar"] .dpv3-d{ font-family:'Cairo',monospace; max-width:none; }

@media (prefers-reduced-motion: reduce){
  .dpv3-sweep{ animation:none; opacity:.3; }
  .dpv3-ping{ animation:none !important; }
}

/* --------- tiroir mobile : regroupement visuel simple --------- */
.dlabel{
  display:block; padding:18px 24px 6px; font-family:'IBM Plex Mono',monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--stripe-blue);
}
html[lang="ar"] .dlabel{ font-family:'Cairo',monospace; letter-spacing:0; }
.dlink.dsub{ padding-inline-start:38px; font-size:15px; position:relative; }
.dlink.dsub::before{
  content:""; position:absolute; inset-inline-start:24px; top:50%; width:5px; height:5px;
  border-radius:50%; background:var(--stripe-blue); transform:translateY(-50%);
}

/* =========================================================================
   ═══ MOT DU COLONEL ═══
   Portrait institutionnel à gauche, message à droite — la disposition
   classique d'un mot du commandement, sans être austère pour autant.
   ========================================================================= */
.colonel-layout{ display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; }
@media (max-width:760px){ .colonel-layout{ grid-template-columns:1fr; } }

.colonel-portrait{ position:sticky; top:110px; }
@media (max-width:760px){ .colonel-portrait{ position:static; max-width:280px; margin-inline:auto; } }
/* le ratio d'aspect est porté par un conteneur dédié plutôt que par
   l'image elle-même : la combinaison directe aspect-ratio + object-fit sur
   un élément remplacé (<img>) produisait une hauteur figée à la valeur
   brute du ratio (683px) au lieu de la calculer — un vrai bug de rendu
   plutôt qu'un simple conflit de règles, contourné en isolant le ratio */
.colonel-portrait .cp-frame{
  /* un <span> est display:inline par defaut, qui ignore width/aspect-ratio :
     sans ce display:block explicite, le conteneur s'effondrait a la taille
     de son contenu (bug reel corrige) */
  /* ratio 385/490 : celui du recadrage resserre sur le visage et les
     epaules (photo remplacee pour reduire le fond visible) */
  display:block; position:relative; width:100%; aspect-ratio:385/490; overflow:hidden;
  border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--sh-2);
}
.colonel-portrait img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.colonel-portrait figcaption{ margin-top:16px; text-align:center; }
.cp-name{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--navy-deep); }
.cp-role{
  display:block; margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--stripe-blue-deep); line-height:1.5;
}
html[lang="ar"] .cp-role{ font-family:'Cairo',monospace; letter-spacing:0; }

.colonel-msg .callout-notice{
  background:rgba(232,179,84,.1); border:1px solid rgba(232,179,84,.32);
  color:#7a5a1e; font-size:13.5px; margin-bottom:28px;
}
.colonel-msg .callout-notice strong{ color:#5c4315; }
.colonel-sign{ margin-top:28px; font-family:'Fraunces',serif; font-style:italic; font-size:16px; color:var(--navy-deep); }

/* =========================================================================
   ═══ ORGANISATION — ORGANIGRAMME ═══
   ========================================================================= */
.org-chart{ margin:32px 0 40px; }
.org-node{
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 20px; text-align:center;
}
.org-top{
  max-width:340px; margin:0 auto 28px; background:var(--navy-deep); border-color:var(--navy-deep);
}
.org-top .org-rank{ color:var(--stripe-blue); }
.org-top .org-name{ color:#fff; }
.org-rank{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stripe-blue-deep); margin-bottom:5px;
}
html[lang="ar"] .org-rank{ font-family:'Cairo',monospace; letter-spacing:0; }
.org-name{ font-weight:700; font-size:14px; color:var(--navy-deep); }

.org-branch{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding-top:28px;
}
.org-branch::before{
  content:""; position:absolute; top:0; inset-inline:16.5%; height:1px; background:var(--line);
}
.org-branch .org-node::before{
  content:""; position:absolute; top:-28px; left:50%; width:1px; height:28px;
  background:var(--line); transform:translateX(-50%);
}
.org-branch .org-node{ position:relative; }
@media (max-width:700px){
  .org-branch{ grid-template-columns:1fr; gap:14px; padding-top:14px; }
  .org-branch::before{ display:none; }
  .org-branch .org-node::before{ display:none; }
}

/* =========================================================================
   ═══ ACCORDÉON HORIZONTAL — MISSIONS ═══
   Le panneau actif s'élargit et déploie son contenu à l'horizontale ; les
   panneaux au repos restent étroits, titre à la verticale. Sur écran
   étroit, on retombe sur des cartes empilées : l'accordéon horizontal
   suppose de la largeur et un survol, absents sur mobile.
   ========================================================================= */
@media (min-width:961px){
  .missions-accordion{
    display:flex; gap:14px; background:none; border:none;
    height:400px; overflow:hidden;
    transition:gap .75s var(--ease);
  }
  /* dès qu'un panneau s'ouvre, l'espacement se referme : les panneaux au
     repos se soudent en une seule bande continue */
  .missions-accordion:hover,
  .missions-accordion:focus-within,
  .missions-accordion.has-open{ gap:0; }

  /* les six panneaux se partagent la largeur ; l'actif pèse 5 fois plus,
     la rangée reste donc toujours pleine */
  .missions-accordion .mission-card{
    position:relative; flex:1 1 0; min-width:0; padding:0; overflow:hidden;
    will-change:flex-grow;
    /* la règle générale .mission-card impose fond, cadre et ombre :
       on les neutralise explicitement dans l'accordéon */
    background:none !important; display:block;
    border:none !important; border-radius:0 !important;
    box-shadow:none !important; transform:none !important;
    /* flex-grow reste la seule façon d'obtenir un accordéon fluide en largeur ;
       une courbe sans rebond et un rendu isolé limitent le coût de recalcul */
    contain:paint;
    transition:flex-grow .65s cubic-bezier(.45,.05,.35,1);
  }
  .missions-accordion .mission-card:hover,
  .missions-accordion .mission-card:focus-within,
  .missions-accordion .mission-card.is-open{
    flex-grow:5; z-index:2;
  }

  /* Chaque panneau au repos se resserre légèrement quand un autre s'ouvre :
     le mouvement se propage ainsi à toute la rangée, des deux côtés, au lieu
     de ne décaler que ceux placés après l'actif. */
  .missions-accordion:hover .mission-card,
  .missions-accordion:focus-within .mission-card,
  .missions-accordion.has-open .mission-card{ flex-grow:.82; }
  .missions-accordion:hover .mission-card:hover,
  .missions-accordion:focus-within .mission-card:focus-within,
  .missions-accordion.has-open .mission-card.is-open{ flex-grow:5; }

  /* --------- ruban : signature colorée sous le titre ---------
     Reprend le motif du racing stripe (fin / large / large) en filet
     horizontal, avec une couleur propre à chaque mission. Il se déploie
     depuis la gauche quand le panneau s'ouvre. */
  .missions-accordion .mission-card{ --m-accent:var(--stripe-blue); }
  .missions-accordion .mission-card:nth-child(1){ --m-accent:#C8102E; }  /* sauvetage  */
  .missions-accordion .mission-card:nth-child(2){ --m-accent:#0E7C7B; }  /* sécurité   */
  .missions-accordion .mission-card:nth-child(3){ --m-accent:#1B5B8A; }  /* piraterie  */
  .missions-accordion .mission-card:nth-child(4){ --m-accent:#6B4E9E; }  /* frontières */
  .missions-accordion .mission-card:nth-child(5){ --m-accent:#2E8B45; }  /* environnement */
  .missions-accordion .mission-card:nth-child(6){ --m-accent:#B8860B; }  /* douane     */

  .ma-ribbon{
    position:absolute; top:160px; inset-inline-start:34px; z-index:3;
    height:4px; width:0; overflow:hidden; pointer-events:none;
    transition:width .6s cubic-bezier(.45,.05,.35,1) .12s, opacity .4s var(--ease);
    opacity:0;
  }
  .ma-ribbon i{ position:absolute; inset-block:0; display:block; }
  .ma-ribbon i:nth-child(1){ inset-inline-start:0;    width:14px; background:var(--m-accent); }
  .ma-ribbon i:nth-child(2){ inset-inline-start:20px; width:46px; background:var(--m-accent); opacity:.62; }
  .ma-ribbon i:nth-child(3){ inset-inline-start:72px; width:58px; background:var(--m-accent); opacity:.28; }

  .missions-accordion .mission-card:hover .ma-ribbon,
  .missions-accordion .mission-card:focus-within .ma-ribbon,
  .missions-accordion .mission-card.is-open .ma-ribbon{ width:140px; opacity:1; }

  /* le numéro et le titre prennent la couleur de la mission à l'ouverture */
  .missions-accordion .mission-card:hover .ma-code,
  .missions-accordion .mission-card:focus-within .ma-code,
  .missions-accordion .mission-card.is-open .ma-code{ color:var(--m-accent); }

  /* plus de cadres ni de filets : seules les écritures subsistent */

  /* --------- dos du panneau : numéro en haut, titre vertical au centre --------- */
  .ma-spine{
    position:absolute; inset:0; z-index:2; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center;
    padding:26px 0; background:none; border:none; cursor:pointer;
    font-family:inherit; text-align:center;
  }
  .ma-code{
    align-self:flex-start; margin-inline-start:26px;
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700;
    letter-spacing:.06em; color:var(--ink-soft);
    transition:color .5s var(--ease);
  }
  .missions-accordion .mission-card:hover .ma-code,
  .missions-accordion .mission-card:focus-within .ma-code,
  .missions-accordion .mission-card.is-open .ma-code{ color:var(--stripe-blue-deep); }

  /* titre vertical : pivote à l'horizontale quand le panneau s'ouvre */
  /* Au repos : titre à l'horizontale, sur plusieurs lignes si besoin (les
     panneaux ne font que ~200 px de large). Il bascule à la verticale dès
     qu'un panneau de la série s'ouvre — sauf celui qui est actif, qui reste
     horizontal et grandit. */
  .ma-vtitle{
    position:absolute; top:82px; inset-inline-start:26px; inset-inline-end:26px;
    display:block; white-space:normal; text-align:start;
    font-family:'Public Sans',sans-serif; font-weight:700; font-size:13.5px;
    letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
    line-height:1.45;
    transform-origin:left top; transform:rotate(0deg);
    /* seules transform et color sont animées : les propriétés de mise en page
       (top, font-size, inset-*) provoquaient un recalcul complet à chaque
       image et donc des à-coups visibles */
    will-change:transform;
    transition:transform .65s cubic-bezier(.45,.05,.35,1), color .45s var(--ease);
  }
  html[dir="rtl"] .ma-vtitle{ transform-origin:right top; }

  /* série active : les panneaux au repos passent leur titre à la verticale */
  .missions-accordion:hover .mission-card .ma-vtitle,
  .missions-accordion:focus-within .mission-card .ma-vtitle,
  .missions-accordion.has-open .mission-card .ma-vtitle{
    /* la largeur mesurée avant rotation devient la hauteur une fois pivoté :
       on l'aligne sur la hauteur utile du panneau, pas sur sa largeur */
    white-space:nowrap; width:228px; max-width:none;
    overflow:hidden; text-overflow:ellipsis;
    transform-origin:left top;
    transform:translate(6px, 62px) rotate(90deg);
  }
  html[dir="rtl"] .missions-accordion:hover .mission-card .ma-vtitle,
  html[dir="rtl"] .missions-accordion:focus-within .mission-card .ma-vtitle,
  html[dir="rtl"] .missions-accordion.has-open .mission-card .ma-vtitle{
    transform-origin:right top;
    transform:translate(-6px, 62px) rotate(-90deg);
  }

  /* le panneau actif garde son titre à l'horizontale et l'agrandit */
  .missions-accordion .mission-card:hover .ma-vtitle,
  .missions-accordion .mission-card:focus-within .ma-vtitle,
  .missions-accordion .mission-card.is-open .ma-vtitle{
    color:var(--navy-deep);
    white-space:normal; max-width:none; overflow:visible;
    transform-origin:left top; transform:translate(0,14px) scale(1.32);
  }
  html[dir="rtl"] .missions-accordion .mission-card:hover .ma-vtitle,
  html[dir="rtl"] .missions-accordion .mission-card:focus-within .ma-vtitle,
  html[dir="rtl"] .missions-accordion .mission-card.is-open .ma-vtitle{
    transform-origin:right top; transform:translate(0,14px) scale(1.32);
  }

  /* chevron en pied de panneau replié */
  .ma-spine::after{
    content:""; position:absolute; bottom:26px; left:50%; width:9px; height:9px;
    border-right:1.8px solid var(--ink-soft); border-bottom:1.8px solid var(--ink-soft);
    transform:translateX(-50%) rotate(-45deg);
    transition:opacity .5s var(--ease);
  }
  html[dir="rtl"] .ma-spine::after{ transform:translateX(-50%) rotate(135deg); }
  .missions-accordion .mission-card:hover .ma-spine::after,
  .missions-accordion .mission-card:focus-within .ma-spine::after,
  .missions-accordion .mission-card.is-open .ma-spine::after{ opacity:0; }

  .missions-accordion .mission-card:hover .ma-spine,
  .missions-accordion .mission-card:focus-within .ma-spine,
  .missions-accordion .mission-card.is-open .ma-spine{ pointer-events:none; }

  /* --------- contenu déployé --------- */
  .ma-body{
    position:absolute; inset:0; z-index:1;
    padding:190px 34px 30px; min-width:420px;
    display:flex; flex-direction:column; justify-content:flex-start;
    opacity:0; will-change:opacity;
    transition:opacity .45s var(--ease);
    pointer-events:none;
  }
  /* le retard est désormais porté par chaque enfant (entrée en cascade) :
     le conserver ici aussi cumulait les deux et retardait tout de 0,3 s */
  .missions-accordion .mission-card:hover .ma-body,
  .missions-accordion .mission-card:focus-within .ma-body,
  .missions-accordion .mission-card.is-open .ma-body{
    opacity:1; transition-delay:.12s; pointer-events:auto;
  }
  /* le titre est porté par le dos qui pivote : on masque le doublon tout
     en le gardant lisible par les lecteurs d'écran */
  .ma-body h3{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; }
  .ma-body .code{ display:none; }
  .ma-body > svg{ position:absolute; top:26px; inset-inline-end:28px; opacity:.85; }
  .ma-body p{ font-size:15px; line-height:1.65; }
  .ma-body .read-more{ margin-top:auto; }

  /* le liseré d'angle chevauchait le numéro : la bordure bleue du panneau
     actif suffit à le signaler */
  .missions-accordion .mission-card::before{ display:none; }
}

/* --------- accordéon mobile : reprend le modèle numéroté a
   déroulement vertical, un seul panneau ouvert à la fois --------- */
@media (max-width:960px){
  /* couleurs propres a chaque mission, redefinies ici puisque la version
     desktop les declare dans son propre bloc de media query */
  .missions-accordion .mission-card{ --m-accent:var(--stripe-blue); }
  .missions-accordion .mission-card:nth-child(1){ --m-accent:#C8102E; }
  .missions-accordion .mission-card:nth-child(2){ --m-accent:#0E7C7B; }
  .missions-accordion .mission-card:nth-child(3){ --m-accent:#1B5B8A; }
  .missions-accordion .mission-card:nth-child(4){ --m-accent:#6B4E9E; }
  .missions-accordion .mission-card:nth-child(5){ --m-accent:#2E8B45; }
  .missions-accordion .mission-card:nth-child(6){ --m-accent:#B8860B; }

  .missions-accordion{ display:flex; flex-direction:column; gap:12px; height:auto; }
  .missions-accordion .mission-card{
    flex:none; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
    overflow:hidden; box-shadow:0 1px 2px rgba(6,42,69,.04);
  }
  .missions-accordion .mission-card::before{ display:none; }
  .ma-depth, .ma-ghost{ display:none; }

  /* --------- en-tête : numéro, titre, chevron --------- */
  .ma-spine{
    display:flex; align-items:center; gap:14px; width:100%;
    padding:18px 18px; text-align:start; cursor:pointer;
    background:#fff; border:none; border-inline-start:4px solid transparent;
    transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  .missions-accordion .mission-card.is-open .ma-spine{
    background:var(--navy-deep); border-inline-start-color:var(--m-accent);
  }
  .ma-code{
    font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700;
    letter-spacing:.06em; color:var(--m-accent); flex-shrink:0;
  }
  .missions-accordion .mission-card.is-open .ma-code{ color:var(--m-accent); }
  .ma-vtitle{
    flex:1; font-family:'Source Serif 4',serif; font-weight:600; font-size:16.5px;
    color:var(--navy-deep); transform:none; position:static; width:auto; writing-mode:horizontal-tb;
  }
  html[lang="ar"] .ma-vtitle{ font-family:'Cairo',sans-serif; }
  .missions-accordion .mission-card.is-open .ma-vtitle{ color:#fff; }

  /* chevron : ajouté en JS-free via un pseudo-élément SVG-like en bordure */
  /* chevron : coin physique (droite+bas), jamais logique -- un indicateur
     d'ouverture/fermeture doit garder la meme forme quel que soit le sens
     de lecture ; construit avec inline-end/block-end, il se serait
     transforme en fleches gauche/droite en arabe au lieu d'un simple
     bas/haut (bug reel corrige) */
  .ma-spine::after{
    content:""; flex-shrink:0; width:11px; height:11px;
    border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
    transform:rotate(45deg); margin-top:-4px;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
  }
  .missions-accordion .mission-card.is-open .ma-spine::after{
    transform:rotate(-135deg); margin-top:4px; border-color:#fff;
  }

  /* --------- ruban : repris en bordure supérieure du corps, discret --------- */
  .ma-ribbon{ display:none; }

  /* --------- corps : masqué/révélé via une hauteur animée --------- */
  .ma-body{
    display:block; position:static; height:0; overflow:hidden; padding:0 20px;
    opacity:0; transition:height .38s var(--ease), opacity .3s var(--ease), padding .38s var(--ease);
  }
  .missions-accordion .mission-card.is-open .ma-body{
    height:auto; opacity:1; padding:4px 20px 22px;
  }
  .ma-body svg{ display:none; }
  .ma-body .code{ display:none; }
  .ma-body h3{ display:none; }
  .ma-body p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 14px; }
  .ma-body .read-more{ color:var(--m-accent); }

  @media (prefers-reduced-motion: reduce){
    .ma-body{ transition:none; }
    .ma-spine::after{ transition:none; }
  }
}

@media (prefers-reduced-motion: reduce){
  .missions-accordion .mission-card,
  .ma-spine, .ma-body, .ma-vtitle{ transition:none !important; }
}

/* =========================================================================
   ═══ ÉCRAN DE CHARGEMENT ═══
   Couvre la page le temps que les polices et l'emblème soient prêts, puis
   s'efface. L'emblème apparaît, son halo tourne, l'enseigne se révèle en
   cascade — sobre, comme un générique institutionnel.
   ========================================================================= */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(108,172,228,.14), transparent 65%),
    radial-gradient(45% 55% at 12% 105%, rgba(67,176,42,.10), transparent 70%),
    linear-gradient(170deg, #0a3252 0%, var(--navy-deep) 55%, #04202f 100%);
  opacity:1; visibility:visible;
  transition:opacity .7s var(--ease), visibility .7s;
}
/* une fois la page prête, l'écran s'efface et laisse passer les clics */
.splash.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.splash-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; }

/* --- emblème et halo --- */
.splash-crest{
  position:relative; width:120px; height:120px; display:grid; place-items:center;
  animation:splash-crest-in 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes splash-crest-in{
  from{ opacity:0; transform:scale(.82); }
  to  { opacity:1; transform:scale(1); }
}
.splash-halo{ position:absolute; inset:0; width:100%; height:100%; }
.splash-halo .halo-blue{  animation:splash-spin 2.6s linear infinite; transform-origin:center; }
.splash-halo .halo-green{ animation:splash-spin 2.6s linear infinite reverse; transform-origin:center; }
@keyframes splash-spin{ to{ transform:rotate(360deg); } }

.splash-emblem{
  width:82px; height:82px; display:block;
  background-image:var(--emblem); background-size:contain;
  background-position:center; background-repeat:no-repeat;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}

/* --- enseigne, révélée ligne par ligne --- */
.splash-name{ margin-top:26px; display:flex; flex-direction:column; gap:2px; }
.splash-line{
  display:block; overflow:hidden;
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:19px;
  letter-spacing:.09em; color:#eaf3f9; line-height:1.35;
  animation:splash-rise .8s cubic-bezier(.22,1,.36,1) both;
}
.splash-line:nth-child(1){ animation-delay:.22s; }
.splash-line:nth-child(2){ animation-delay:.34s; }
@keyframes splash-rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

.splash-motto{
  margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.24em; color:var(--stripe-blue);
  animation:splash-rise .8s .48s cubic-bezier(.22,1,.36,1) both;
}

/* --- filet de progression, aux couleurs de la charte --- */
.splash-bar{
  margin-top:32px; width:140px; height:2px; border-radius:2px;
  background:rgba(234,243,249,.14); overflow:hidden; display:block;
  animation:splash-rise .8s .6s cubic-bezier(.22,1,.36,1) both;
}
.splash-bar i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  animation:splash-sweep 1.25s ease-in-out infinite;
}
@keyframes splash-sweep{
  0%  { transform:translateX(-105%); }
  100%{ transform:translateX(255%); }
}

/* mouvement réduit : l'écran reste, sans animation */
@media (prefers-reduced-motion: reduce){
  .splash-crest, .splash-line, .splash-motto, .splash-bar{ animation:none !important; opacity:1; transform:none; }
  .splash-halo .halo-blue, .splash-halo .halo-green, .splash-bar i{ animation:none !important; }
}

@media print{ .splash{ display:none !important; } }

@media (max-width:600px){
  .splash-crest{ width:100px; height:100px; }
  .splash-emblem{ width:68px; height:68px; }
  .splash-line{ font-size:17px; }
}

/* =========================================================================
   ═══ PAGE « LA GARDE-CÔTES » — LIENS INSTITUTIONNELS ═══
   Trois cartes simples et directes vers les pages institutionnelles.
   ========================================================================= */
.inst-links{ display:grid; gap:14px; }
.inst-card{
  display:flex; align-items:center; gap:18px; padding:24px 26px;
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md);
  text-decoration:none; transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.inst-card:hover{ background:#fff; border-color:var(--stripe-blue); transform:translateY(-2px); box-shadow:var(--sh-1); }
.inst-ico{
  width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; border-radius:13px;
  background:rgba(108,172,228,.12); color:var(--stripe-blue-deep);
}
.inst-ico svg{ width:23px; height:23px; }
.inst-txt{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.inst-t{ font-family:'Source Serif 4',serif; font-weight:600; font-size:18px; color:var(--navy-deep); }
.inst-d{ font-size:13.5px; color:var(--ink-soft); }
.inst-arrow{ flex-shrink:0; color:var(--stripe-blue-deep); opacity:.6; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.inst-card:hover .inst-arrow{ opacity:1; transform:translateX(3px); }
html[dir="rtl"] .inst-arrow{ transform:scaleX(-1); }
html[dir="rtl"] .inst-card:hover .inst-arrow{ transform:scaleX(-1) translateX(3px); }

/* =========================================================================
   ═══ BILAN D'ACTIVITÉ ═══
   ========================================================================= */
.bilan-section{ background:var(--hull-2); }
.bilan-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
@media (max-width:900px){ .bilan-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bilan-grid{ grid-template-columns:1fr; } }
.bilan-card{
  --bl:var(--stripe-blue);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bilan-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-1); }
.bilan-card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--bl);
}
.bl-1{ --bl:var(--red-star); } .bl-2{ --bl:var(--stripe-blue); }
.bl-3{ --bl:var(--stripe-green); } .bl-4{ --bl:var(--gold-bright); }
.bilan-figure{
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:40px; line-height:1;
  color:var(--bl); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
html[lang="ar"] .bilan-figure{ font-family:'Cairo',sans-serif; }
.bilan-label{ margin-top:10px; font-weight:700; font-size:14px; color:var(--navy-deep); line-height:1.35; }
.bilan-year{
  margin-top:5px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--ink-soft); letter-spacing:.03em;
}
html[lang="ar"] .bilan-year{ font-family:'Cairo',monospace; letter-spacing:0; }
.bilan-source{ margin-top:22px; font-size:11.5px; color:var(--ink-soft); font-style:italic; }

/* =========================================================================
   ═══ ESPACE PRESSE ═══
   ========================================================================= */
.presse-h2{ font-family:'Source Serif 4',serif; font-size:22px; color:var(--navy-deep);
  margin:44px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.presse-h2:first-of-type{ margin-top:0; }
.presse-list{ display:grid; gap:14px; }
.presse-item{
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.presse-item:hover{ background:#fff; border-color:var(--stripe-blue); }
.presse-date{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stripe-blue-deep); margin-bottom:8px;
}
html[lang="ar"] .presse-date{ font-family:'Cairo',monospace; letter-spacing:0; }
.presse-item h3{ font-family:'Source Serif 4',serif; font-size:17px; color:var(--navy-deep); margin-bottom:8px; }
.presse-item p:last-child{ font-size:14px; color:var(--ink-soft); line-height:1.6; }

.presse-assets{ display:grid; gap:16px; }
.asset-card{
  display:flex; align-items:center; gap:18px; padding:22px 24px;
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md);
}
.asset-emblem{
  width:56px; height:56px; flex-shrink:0; display:block;
  background-image:var(--emblem); background-size:contain;
  background-position:center; background-repeat:no-repeat;
}
.asset-txt{ display:flex; flex-direction:column; gap:3px; }
.asset-t{ font-weight:700; font-size:15px; color:var(--navy-deep); }
.asset-d{ font-size:13px; color:var(--ink-soft); }

.presse-contact{ background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 26px; }
.presse-contact p{ font-size:14.5px; color:var(--ink-soft); line-height:1.65; }
.presse-mail{ margin-top:14px; }
.presse-mail a, .presse-tel a{
  font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--stripe-blue-deep);
  text-decoration:underline; text-underline-offset:3px; direction:ltr; display:inline-block;
}
.presse-tel{ margin-top:6px; }

/* =========================================================================
   ═══ BANDEAU D'ALERTE ═══
   Masqué par défaut. S'active en passant data-active="true" sur l'élément
   #alert-banner, ou via window.__setAlert(texte) depuis la console.
   ========================================================================= */
.alert-banner{
  display:none; position:relative; z-index:120;
  background:linear-gradient(90deg, #8a0d1f, var(--red-star) 45%, #8a0d1f);
  color:#fff; box-shadow:0 4px 18px -6px rgba(200,16,46,.6);
}
.alert-banner[data-active="true"]{ display:block; animation:ab-drop .45s var(--ease) both; }
@keyframes ab-drop{ from{ opacity:0; transform:translateY(-100%); } to{ opacity:1; transform:none; } }
.ab-inner{ display:flex; align-items:center; gap:13px; padding:11px 0; }
.ab-pulse{
  width:8px; height:8px; border-radius:50%; background:#fff; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:ab-ping 1.8s ease-out infinite;
}
@keyframes ab-ping{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); }
  100%{ box-shadow:0 0 0 12px rgba(255,255,255,0); }
}
.ab-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 9px; border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill); flex-shrink:0;
}
html[lang="ar"] .ab-tag{ font-family:'Cairo',monospace; letter-spacing:0; }
.ab-text{ flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.45; }
.ab-close{
  background:none; border:none; color:#fff; cursor:pointer; flex-shrink:0;
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  opacity:.85; transition:opacity .2s var(--ease), background .2s var(--ease);
}
.ab-close:hover{ opacity:1; background:rgba(255,255,255,.16); }
@media (prefers-reduced-motion: reduce){
  .alert-banner[data-active="true"]{ animation:none; }
  .ab-pulse{ animation:none; }
}
@media print{ .alert-banner{ display:none !important; } }

/* =========================================================================
   ═══ TRANSITION DE PAGE ═══
   À chaque changement de page interne : un liseré de progression traverse
   le haut de l'écran et l'emblème pulse brièvement. Court (600 ms) pour
   marquer le changement sans jamais faire attendre.
   ========================================================================= */
.page-trans{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:9998;
  pointer-events:none; opacity:0; transition:opacity .25s var(--ease);
}
.page-trans[data-run="true"]{ opacity:1; }
.pt-bar{
  position:absolute; inset-block:0; inset-inline-start:0; width:0;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  box-shadow:0 0 12px rgba(108,172,228,.7);
}
.page-trans[data-run="true"] .pt-bar{ animation:pt-sweep .6s cubic-bezier(.35,.9,.4,1) forwards; }
@keyframes pt-sweep{ 0%{ width:0; } 65%{ width:82%; } 100%{ width:100%; } }

/* emblème qui pulse au centre, très bref */
.pt-crest{
  position:fixed; top:50%; left:50%; width:64px; height:64px;
  transform:translate(-50%,-50%) scale(.9);
  background-image:var(--emblem); background-size:contain;
  background-position:center; background-repeat:no-repeat;
  opacity:0; pointer-events:none;
  filter:drop-shadow(0 4px 16px rgba(2,12,22,.4));
}
.page-trans[data-run="true"] .pt-crest{ animation:pt-pulse .6s var(--ease) forwards; }
@keyframes pt-pulse{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.86); }
  35%{ opacity:.85; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .page-trans, .pt-bar, .pt-crest{ animation:none !important; opacity:0 !important; }
}
@media print{ .page-trans{ display:none !important; } }

/* =========================================================================
   ═══ RAFFINEMENTS VISUELS ═══
   Une série d'ajustements qui élèvent la finition générale sans changer
   la structure : profondeur des surfaces, netteté typographique, réaction
   au survol plus franche.
   ========================================================================= */

/* --- rendu typographique plus net, notamment sur les fonds sombres --- */
body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1, h2, .hero h1{ letter-spacing:-.015em; }

/* --- les cartes gagnent une ombre à deux niveaux : contact + diffusion,
   ce qui donne une profondeur bien plus crédible qu'une ombre unique --- */
.mission-card, .fleet-card, .news-card, .inst-card, .bilan-card, .presse-item{
  box-shadow:0 1px 2px rgba(6,42,69,.04), 0 0 0 1px rgba(6,42,69,.03);
}
.mission-card:hover, .fleet-card:hover, .news-card:hover,
.inst-card:hover, .bilan-card:hover, .presse-item:hover{
  box-shadow:0 2px 4px rgba(6,42,69,.06), 0 12px 28px -10px rgba(6,42,69,.16),
             0 0 0 1px rgba(108,172,228,.25);
}

/* --- liens de contenu : soulignement fin qui se déploie au survol --- */
.prose a:not(.read-more):not(.btn){
  background-image:linear-gradient(var(--stripe-blue-deep), var(--stripe-blue-deep));
  background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  text-decoration:none; transition:background-size .3s var(--ease);
  padding-bottom:2px;
}
.prose a:not(.read-more):not(.btn):hover{ background-size:100% 1.5px; }

/* --- boutons : réaction plus franche et lisible au survol --- */
.btn, .header-cta{ transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease); }
.btn:active, .header-cta:active{ transform:translateY(1px); }

/* --- contour de focus homogène et visible partout (accessibilité) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--stripe-blue);
  outline-offset:3px; border-radius:3px;
}

/* --- sélection de texte aux couleurs de l'institution --- */
::selection{ background:rgba(108,172,228,.28); color:var(--navy-deep); }

/* --- les sections sombres gagnent un léger grain, qui casse l'aspect
   « aplat numérique » et rapproche du rendu imprimé --- */
.bases-dark::after, .stats-dark::after, .contact-section.on-dark::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:3px 3px;
}

/* =========================================================================
   ═══ VOILE DE TRANSITION ENTRE PAGES ═══
   Bref passage de l'emblème à chaque changement de page. Volontairement
   court (480 ms) et non bloquant : il ne retarde jamais l'affichage.
   ========================================================================= */
.route-veil{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  display:grid; place-items:center; opacity:0; visibility:hidden;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(108,172,228,.16), transparent 65%),
    linear-gradient(170deg, rgba(10,50,82,.97) 0%, rgba(6,42,69,.98) 55%, rgba(4,32,47,.99) 100%);
  transition:opacity .28s var(--ease), visibility .28s;
}
.route-veil[data-on="true"]{ opacity:1; visibility:visible; }
.rv-crest{
  width:72px; height:72px; display:block;
  background-image:var(--emblem); background-size:contain;
  background-position:center; background-repeat:no-repeat;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.route-veil[data-on="true"] .rv-crest{ animation:rv-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes rv-in{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
.rv-bar{
  position:absolute; bottom:38%; width:96px; height:2px; border-radius:2px;
  background:rgba(234,243,249,.16); overflow:hidden; display:block;
}
.rv-bar i{
  display:block; height:100%; width:45%; border-radius:2px;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  animation:rv-sweep .9s ease-in-out infinite;
}
@keyframes rv-sweep{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(240%);} }
@media (prefers-reduced-motion: reduce){ .route-veil{ display:none !important; } }
@media print{ .route-veil{ display:none !important; } }

/* =========================================================================
   ═══ RAFFINEMENTS VISUELS — PROFONDEUR ET MATIÈRE ═══
   Détails discrets qui séparent un site correct d'un site premium :
   grain de surface, halos de lumière, transitions plus soignées.
   ========================================================================= */

/* --- grain très fin sur les grandes surfaces sombres : évite l'aplat
   numérique plat, donne une matière proche de l'impression --- */
/* pseudo-élément ::before dédié : ::after est déjà pris par le vignettage
   du hero, l'écraser aurait supprimé cet effet (conflit évité) */
.hero .grain, .stats-dark .grain, .bases-dark .grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; display:block;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- soulignement animé des liens de navigation : glisse depuis la gauche
   plutôt que d'apparaître d'un bloc --- */
nav.primary a::after{ transform-origin:left center; }
html[dir="rtl"] nav.primary a::after{ transform-origin:right center; }

/* --- cartes : ombre portée plus naturelle, en deux couches --- */
.mission-card, .news-card, .fleet-card, .inst-card, .bilan-card, .presse-item{
  box-shadow:0 1px 2px rgba(6,42,69,.04), 0 2px 8px -2px rgba(6,42,69,.05);
}
.inst-card:hover, .bilan-card:hover, .news-card:hover{
  box-shadow:0 2px 4px rgba(6,42,69,.06), 0 12px 28px -8px rgba(6,42,69,.16);
}

/* --- boutons principaux : lueur douce au survol, sans clignotement --- */
.btn-primary, .header-cta{
  transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.header-cta:hover{ box-shadow:0 8px 26px -6px rgba(200,16,46,.55); }

/* --- titres de section : léger dégradé sur les grands titres sombres --- */
.on-dark .section-head h2, .stats-dark .section-head h2{
  background:linear-gradient(180deg, #ffffff 0%, #cfe0ee 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- liens de contenu : soulignement fin qui s'épaissit au survol --- */
.prose a:not(.btn):not(.read-more){
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:text-decoration-thickness .2s var(--ease);
}
.prose a:not(.btn):not(.read-more):hover{ text-decoration-thickness:2px; }

/* --- défilement fluide entre les ancres --- */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* --- sélection de texte aux couleurs de l'institution --- */
::selection{ background:rgba(108,172,228,.28); color:var(--navy-deep); }

/* =========================================================================
   ═══ CARTE INTERACTIVE — ZONE MARITIME ═══
   Marqueurs et panneau de couches dans le langage visuel du site plutôt
   que l'apparence par défaut de la bibliothèque cartographique.
   ========================================================================= */
.gcd-map-wrap{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(108,172,228,.22);
  box-shadow:0 20px 46px -16px rgba(2,12,22,.5);
}
.gcd-map{ width:100%; height:420px; background:#0b3f66; }
.gcd-map-full .gcd-map{ height:560px; }
@media (max-width:700px){ .gcd-map{ height:320px; } .gcd-map-full .gcd-map{ height:420px; } }

/* --------- repères personnalisés --------- */
.gcd-pin{ background:none; border:none; }
.gcd-pin-dot{
  position:relative; display:block; width:14px; height:14px; border-radius:50%;
  background:var(--pin); border:2px solid rgba(4,20,34,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.gcd-pin-halo{
  position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--pin);
  opacity:.6; animation:ring-breathe 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .gcd-pin-halo{ animation:none; } }

/* --------- habillage sombre des éléments Leaflet, cohérent avec le site --------- */
.leaflet-popup-content-wrapper{
  background:rgba(9,42,68,.97); color:#eaf3f9; border-radius:var(--r-sm);
  box-shadow:0 20px 44px -14px rgba(2,12,22,.6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.leaflet-popup-content{ font-family:inherit; font-size:13px; line-height:1.5; margin:12px 14px; }
.leaflet-popup-content b{ font-family:'Source Serif 4',serif; font-size:14.5px; color:#fff; }
.leaflet-popup-tip{ background:rgba(9,42,68,.97); }
.leaflet-container a.leaflet-popup-close-button{ color:#9fbdd4; }
.leaflet-container a.leaflet-popup-close-button:hover{ color:#fff; }
.leaflet-bar a{
  background:rgba(9,42,68,.9); color:#eaf3f9; border-color:rgba(108,172,228,.25);
}
.leaflet-bar a:hover{ background:rgba(9,42,68,1); }
.leaflet-control-attribution{
  background:rgba(4,20,34,.7); color:#8fa9bd; font-size:9.5px; backdrop-filter:blur(6px);
}
.leaflet-control-attribution a{ color:#9fbdd4; }

/* --------- panneau de couches --------- */
.gcd-map-layers{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.gcd-layer-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border-radius:var(--r-pill);
  background:var(--hull); border:1px solid var(--line);
  font-size:12px; font-weight:600; color:var(--ink-soft);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.gcd-layer-chip:has(input:checked){
  background:rgba(108,172,228,.12); border-color:var(--stripe-blue); color:var(--navy-deep);
}
.gcd-layer-chip input{ accent-color:var(--stripe-blue); width:14px; height:14px; margin:0; }
.gcd-map-note{
  margin-top:10px; font-size:11px; color:var(--ink-soft); font-style:italic;
}

/* =========================================================================
   ═══ PAGE « LA GARDE-CÔTES » — PORTAIL INSTITUTIONNEL ═══
   ========================================================================= */

/* --------- bandeau de chiffres sous le titre --------- */
.inst-hero{ position:relative; overflow:hidden; }
.inst-facts{
  display:flex; align-items:center; flex-wrap:wrap; gap:0 26px; margin-top:34px;
  padding-top:24px; border-top:1px solid rgba(234,243,249,.16);
}
.if-item{ display:flex; flex-direction:column; gap:2px; }
.if-item b{
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:26px; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1;
}
html[lang="ar"] .if-item b{ font-family:'Cairo',sans-serif; }
.if-item i{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--stripe-blue);
}
html[lang="ar"] .if-item i{ font-family:'Cairo',monospace; letter-spacing:0; }
.if-sep{ width:1px; height:30px; background:rgba(234,243,249,.18); }
@media (max-width:600px){ .if-sep{ display:none; } .inst-facts{ gap:20px 30px; } }

/* --------- introduction + valeurs --------- */
.inst-intro{ padding:var(--section-y) 0; }
.inst-intro-grid{ display:grid; grid-template-columns:1.35fr .85fr; gap:52px; align-items:start; }
@media (max-width:900px){ .inst-intro-grid{ grid-template-columns:1fr; gap:36px; } }
.inst-intro-copy h2{
  font-family:'Source Serif 4',serif; font-size:30px; line-height:1.25;
  color:var(--navy-deep); margin:10px 0 20px;
}
.inst-intro-copy p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px; }

.inst-values{
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 26px 22px;
}
.iv-title{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stripe-blue-deep); margin-bottom:18px;
}
html[lang="ar"] .iv-title{ font-family:'Cairo',monospace; letter-spacing:0; }
.inst-values ul{ list-style:none; display:grid; gap:18px; }
.inst-values li{ display:flex; gap:14px; align-items:flex-start; }
.iv-num{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
  color:var(--stripe-blue); flex-shrink:0; padding-top:2px;
}
.iv-txt{ display:flex; flex-direction:column; gap:3px; }
.iv-txt b{ font-family:'Source Serif 4',serif; font-size:15.5px; color:var(--navy-deep); }
.iv-txt i{ font-style:normal; font-size:13px; line-height:1.55; color:var(--ink-soft); }

/* --------- grille des six destinations --------- */
.inst-nav-section{ padding:0 0 var(--section-y); }
.inst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
@media (max-width:900px){ .inst-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .inst-grid{ grid-template-columns:1fr; } }

.ic{
  --ic-accent:var(--stripe-blue);
  position:relative; display:flex; flex-direction:column; gap:0;
  padding:26px 24px 20px; text-decoration:none; overflow:hidden; isolation:isolate;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(6,42,69,.04), 0 2px 8px -2px rgba(6,42,69,.05);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

/* liseré supérieur qui se déploie depuis le bord d'attaque */
.ic::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; z-index:2;
  background:var(--ic-accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
html[dir="rtl"] .ic::before{ transform-origin:right center; }

/* halo coloré qui monte du bas de la carte au survol : donne la profondeur
   qui manquait à un aplat blanc uniforme */
.ic-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 80% at 50% 118%,
              color-mix(in srgb, var(--ic-accent) 22%, transparent), transparent 68%);
  transition:opacity .45s var(--ease);
}
.ic:hover{
  transform:translateY(-5px); border-color:color-mix(in srgb, var(--ic-accent) 45%, var(--line));
  box-shadow:0 2px 4px rgba(6,42,69,.06), 0 20px 42px -12px color-mix(in srgb, var(--ic-accent) 32%, rgba(6,42,69,.2));
}
.ic:hover::before{ transform:scaleX(1); }
.ic:hover .ic-glow{ opacity:1; }

.ic-feature{ --ic-accent:var(--gold-bright); }
.ic-accent{ --ic-accent:var(--stripe-green); }
.ic:nth-child(3){ --ic-accent:#6B4E9E; }
.ic:nth-child(4){ --ic-accent:#0E7C7B; }
.ic:nth-child(5){ --ic-accent:#B8860B; }

/* --------- en-tête : icône gravée + numéro --------- */
.ic-head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.ic-ico{
  width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  color:var(--ic-accent);
  background:color-mix(in srgb, var(--ic-accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ic-accent) 26%, transparent);
  transition:transform .45s cubic-bezier(.22,1.2,.36,1), background .4s var(--ease);
}
.ic-ico svg{ width:23px; height:23px; display:block; }
.ic:hover .ic-ico{
  transform:translateY(-2px) scale(1.06);
  background:color-mix(in srgb, var(--ic-accent) 17%, transparent);
}
.ic-num{
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:30px; line-height:1;
  color:color-mix(in srgb, var(--ic-accent) 20%, transparent);
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  transition:color .45s var(--ease);
}
html[lang="ar"] .ic-num{ font-family:'Cairo',sans-serif; }
.ic:hover .ic-num{ color:color-mix(in srgb, var(--ic-accent) 42%, transparent); }

/* --------- corps --------- */
.ic-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:7px; flex:1; }
.ic-t{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:19px;
  color:var(--navy-deep); line-height:1.28;
}
html[lang="ar"] .ic-t{ font-family:'Cairo',sans-serif; }
.ic-d{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* --------- pied : appel à l'action révélé au survol --------- */
.ic-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px; margin-top:20px; padding-top:15px;
  border-top:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.ic:hover .ic-foot{ border-color:color-mix(in srgb, var(--ic-accent) 30%, transparent); }
.ic-cta{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ic-accent);
  opacity:.75; transition:opacity .35s var(--ease);
}
html[lang="ar"] .ic-cta{ font-family:'Cairo',monospace; letter-spacing:0; }
.ic:hover .ic-cta{ opacity:1; }
.ic-go{
  color:var(--ic-accent); opacity:.75; display:block;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.ic-go svg{ width:15px; height:10px; display:block; }
html[dir="rtl"] .ic-go{ transform:scaleX(-1); }
.ic:hover .ic-go{ opacity:1; transform:translateX(5px); }
html[dir="rtl"] .ic:hover .ic-go{ transform:scaleX(-1) translateX(5px); }

@media (prefers-reduced-motion: reduce){
  .ic, .ic-ico, .ic-go, .ic-glow, .ic::before{ transition:none !important; }
  .ic:hover{ transform:none; }
}

/* --------- appel à l'action de bas de page --------- */
.inst-cta{
  position:relative; overflow:hidden; padding:var(--section-y) 0;
  background:
    radial-gradient(60% 90% at 82% 10%, rgba(108,172,228,.16), transparent 62%),
    linear-gradient(160deg, #0a3252 0%, var(--navy-deep) 60%, #04202f 100%);
}
.inst-cta-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.inst-cta h2{
  font-family:'Source Serif 4',serif; font-size:28px; color:#fff; line-height:1.25; margin:10px 0 12px;
}
.inst-cta p{ font-size:15px; line-height:1.7; color:#bdd0dd; max-width:520px; }
.inst-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================================
   ═══ CHRONOLOGIE (page Histoire) ═══
   ========================================================================= */
.timeline{ list-style:none; margin:32px 0 34px; padding:0; position:relative; }
.timeline::before{
  content:""; position:absolute; inset-block:8px; inset-inline-start:52px; width:1px;
  background:linear-gradient(180deg, var(--stripe-blue), rgba(108,172,228,.15));
}
.tl-item{ position:relative; display:flex; gap:26px; padding:0 0 26px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-year{
  flex:0 0 42px; text-align:end;
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:15px;
  color:var(--stripe-blue-deep); font-variant-numeric:tabular-nums; padding-top:1px;
}
html[lang="ar"] .tl-year{ font-family:'Cairo',sans-serif; }
.tl-item::before{
  content:""; position:absolute; inset-inline-start:47px; top:5px; width:11px; height:11px;
  border-radius:50%; background:#fff; border:2.5px solid var(--stripe-blue); z-index:1;
}
.tl-body{ display:flex; flex-direction:column; gap:5px; padding-inline-start:22px; }
.tl-body b{ font-family:'Source Serif 4',serif; font-size:16.5px; color:var(--navy-deep); }
html[lang="ar"] .tl-body b{ font-family:'Cairo',sans-serif; }
.tl-body span{ font-size:14px; line-height:1.65; color:var(--ink-soft); }

/* =========================================================================
   ═══ CARTES (pages Coopération et Formation) ═══
   ========================================================================= */
.coop-grid, .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:28px 0 34px; }
@media (max-width:700px){ .coop-grid, .form-grid{ grid-template-columns:1fr; } }
.coop-card, .form-card{
  background:var(--hull); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 24px 22px; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.coop-card:hover, .form-card:hover{ background:#fff; border-color:rgba(108,172,228,.45); }
.cc-tag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--stripe-blue-deep);
  padding:4px 9px; border:1px solid rgba(108,172,228,.3); border-radius:var(--r-pill);
  margin-bottom:12px;
}
html[lang="ar"] .cc-tag{ font-family:'Cairo',monospace; letter-spacing:0; }
.fc-n{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
  color:var(--stripe-blue); margin-bottom:10px;
}
html[lang="ar"] .fc-n{ font-family:'Cairo',monospace; }
.coop-card b, .form-card b{
  display:block; font-family:'Source Serif 4',serif; font-size:16.5px;
  color:var(--navy-deep); margin-bottom:7px;
}
html[lang="ar"] .coop-card b, html[lang="ar"] .form-card b{ font-family:'Cairo',sans-serif; }
.coop-card p, .form-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* correctif : dans le bandeau sombre de bas de page, .btn-primary héritait
   d'un fond transparent et d'un texte sombre — donc invisible sur le fond
   marine (bug réel corrigé en fixant explicitement les deux) */
.inst-cta-actions .btn-primary{
  background:var(--red-star); color:#fff; border:none;
}
.inst-cta-actions .btn-primary:hover{
  background:#D8203A; box-shadow:0 8px 26px -6px rgba(200,16,46,.55);
}
.inst-cta-actions .btn-ghost{
  border:1px solid rgba(234,243,249,.4); color:#eaf3f9; background:transparent;
}
.inst-cta-actions .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(234,243,249,.7); }

/* =========================================================================
   ═══ EN-TÊTE PREMIUM — PROFONDEUR ET SIGNATURE ═══
   ========================================================================= */

/* --------- barre de progression de lecture, fine, aux couleurs de la
   charte : indique la position dans la page sans jamais distraire --------- */
.read-progress{
  position:absolute; inset-inline:0; bottom:-1px; height:3px; z-index:90;
  background:transparent; pointer-events:none;
}
.read-progress i{
  display:block; height:100%; width:0; border-radius:0 2px 2px 0;
  background:linear-gradient(90deg, var(--stripe-blue), var(--stripe-green));
  box-shadow:0 0 10px rgba(108,172,228,.5);
  transition:width .1s linear;
}
html[dir="rtl"] .read-progress i{ border-radius:2px 0 0 2px; margin-inline-start:auto; }

/* --------- verre dépoli au défilement : la barre gagne en matière et se
   détache nettement du contenu qui glisse dessous --------- */
header.site.is-stuck{
  background:rgba(242,246,249,.72);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  box-shadow:0 1px 0 rgba(108,172,228,.18), 0 12px 34px -12px rgba(6,42,69,.22);
}

/* --------- halo lumineux discret derrière l'enseigne --------- */
.header-row{ position:relative; }
.header-row::before{
  content:""; position:absolute; inset-block:-10px; inset-inline-start:-40px; width:340px;
  z-index:0; pointer-events:none; opacity:.55;
  background:radial-gradient(60% 70% at 20% 50%, rgba(108,172,228,.16), transparent 70%);
}
html[dir="rtl"] .header-row::before{ inset-inline-start:auto; inset-inline-end:-40px; }
.brand, nav.primary, .header-cta, .burger{ position:relative; z-index:1; }

/* --------- bouton d'alerte : relief et lueur au survol --------- */
.header-cta{
  box-shadow:0 4px 14px rgba(200,16,46,.26), inset 0 1px 0 rgba(255,255,255,.22);
}
/* pas de transform ici : il crée un contexte de positionnement qui fait
   sortir le menu « Signaler un incident » de l'écran (bug réel corrigé) */
.header-cta:hover{
  box-shadow:0 10px 26px -6px rgba(200,16,46,.5), inset 0 1px 0 rgba(255,255,255,.28);
}

@media (prefers-reduced-motion: reduce){
  .read-progress i{ transition:none; }
  .header-cta:hover{ transform:none; }
}
@media print{ .read-progress{ display:none !important; } }


/* --------- plage étroite (1261-1360 px) : la navigation complète a besoin
   d'un peu moins de place. On resserre le rembourrage des rubriques et du
   bouton d'alerte, sans jamais toucher à la taille du texte. --------- */
@media (min-width:1261px) and (max-width:1460px){
  nav.primary a{ padding-inline:6px; }
  .header-cta{ padding-inline:11px; }
  .brand{ gap:11px; }
}

/* =========================================================================
   ═══ ACCORDÉON MISSIONS — MISE EN SCÈNE DE L'OUVERTURE ═══
   Le panneau ne se contente plus de s'élargir : il gagne une profondeur
   lumineuse, un chiffre en filigrane, et son contenu entre en cascade.
   ========================================================================= */
@media (min-width:961px){

  /* --------- profondeur : un dégradé prend vie dans le panneau actif,
     aux couleurs de la mission --------- */
  .ma-depth{
    position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
    background:
      radial-gradient(78% 108% at 6% 100%,
        color-mix(in srgb, var(--m-accent) 15%, transparent), transparent 66%),
      linear-gradient(178deg, transparent 55%,
        color-mix(in srgb, var(--m-accent) 7%, transparent) 100%);
    transition:opacity .55s var(--ease);
  }
  .missions-accordion .mission-card:hover .ma-depth,
  .missions-accordion .mission-card:focus-within .ma-depth,
  .missions-accordion .mission-card.is-open .ma-depth{ opacity:1; }

  /* --------- chiffre en filigrane, très grand, en bord de panneau --------- */
  .ma-ghost{
    position:absolute; z-index:0; pointer-events:none;
    inset-inline-end:22px; bottom:-14px;
    font-family:'Public Sans',sans-serif; font-weight:800; font-size:128px; line-height:1;
    letter-spacing:-.05em; font-variant-numeric:tabular-nums;
    color:color-mix(in srgb, var(--m-accent) 9%, transparent);
    opacity:0; transform:translateY(16px) scale(.94);
    transition:opacity .6s var(--ease), transform .7s cubic-bezier(.22,1,.36,1);
  }
  html[lang="ar"] .ma-ghost{ font-family:'Cairo',sans-serif; }
  .missions-accordion .mission-card:hover .ma-ghost,
  .missions-accordion .mission-card:focus-within .ma-ghost,
  .missions-accordion .mission-card.is-open .ma-ghost{
    opacity:1; transform:translateY(0) scale(1);
  }

  /* le contenu revient à une apparition unique et synchronisée (portée par
     .ma-body lui-même, plus haut) : l'entrée en cascade détaillait chaque
     élément un par un et retardait l'ensemble jusqu'à près d'une seconde,
     ce qui cassait la fluidité que le mouvement avait auparavant */

  /* pas d'atténuation des titres voisins : à pleine opacité, la rotation
     de l'horizontale à la verticale reste nette et confiante — c'est ce
     mouvement lui-même qui faisait tout le charme de l'effet d'origine */

  /* --------- le lien « Lire la mission » prend la couleur de la mission --------- */
  .missions-accordion .mission-card .ma-body .read-more{ color:var(--m-accent); }
  .missions-accordion .mission-card .ma-body .read-more svg{ transition:transform .3s var(--ease); }
  .missions-accordion .mission-card:hover .ma-body .read-more:hover svg{ transform:translateX(4px); }

  /* --------- le chevron du panneau replié pulse doucement au survol de la
     rangée, invitant au clic --------- */
  .missions-accordion:hover .mission-card:not(:hover) .ma-spine::after{
    animation:ma-chev 2.4s ease-in-out infinite;
  }
  @keyframes ma-chev{
    0%,100%{ transform:translateX(-50%) rotate(-45deg); opacity:.5; }
    50%    { transform:translateX(-50%) rotate(-45deg) translate(2px,2px); opacity:1; }
  }
}

@media (prefers-reduced-motion: reduce){
  .ma-depth, .ma-ghost, .ma-body > *{ transition:none !important; }
  .ma-ghost{ transform:none !important; }
  .ma-body > *{ opacity:1 !important; transform:none !important; }
  .missions-accordion .mission-card .ma-spine::after{ animation:none !important; }
}

/* les calques d'accordéon n'ont aucun sens en cartes empilées : le chiffre
   en filigrane et le dégradé de profondeur y apparaissaient en petit,
   parasitant la lecture (bug réel corrigé) */
@media (max-width:960px){
  .ma-ghost, .ma-depth{ display:none !important; }
}

/* =========================================================================
   ═══ CONTACT — CANAUX LATÉRAUX ═══
   Une hiérarchie claire remplace quatre encadrés identiques : le standard
   domine, WhatsApp suit, l'adresse et les horaires se regroupent.
   ========================================================================= */
.form-aside{ display:grid; gap:14px; align-content:start; }

.ac{
  --ac:var(--stripe-blue);
  position:relative; display:block; overflow:hidden; isolation:isolate;
  padding:22px 22px 20px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); text-decoration:none;
  box-shadow:0 1px 2px rgba(6,42,69,.04), 0 2px 8px -2px rgba(6,42,69,.05);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.ac:hover{
  transform:translateY(-3px); border-color:color-mix(in srgb, var(--ac) 45%, var(--line));
  box-shadow:0 2px 4px rgba(6,42,69,.06), 0 16px 34px -10px color-mix(in srgb, var(--ac) 28%, rgba(6,42,69,.18));
}

/* halo qui monte du bas au survol */
.ac-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 82% at 50% 118%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 68%);
  transition:opacity .4s var(--ease);
}
a.ac:hover .ac-glow{ opacity:1; }

.ac > *{ position:relative; z-index:1; }

.ac-ico{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  color:var(--ac); margin-bottom:15px;
  background:color-mix(in srgb, var(--ac) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ac) 25%, transparent);
  transition:transform .35s cubic-bezier(.22,1.2,.36,1);
}
.ac-ico svg{ width:21px; height:21px; display:block; }
a.ac:hover .ac-ico{ transform:translateY(-2px) scale(1.05); }

.ac-tag{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ac); opacity:.85;
  margin-bottom:6px;
}
html[lang="ar"] .ac-tag{ font-family:'Cairo',monospace; letter-spacing:0; }
.ac-t{
  display:block; font-family:'Source Serif 4',serif; font-weight:600; font-size:16.5px;
  color:var(--navy-deep); line-height:1.3;
}
html[lang="ar"] .ac-t{ font-family:'Cairo',sans-serif; }
.ac-d{ display:block; margin-top:7px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* --------- canal prioritaire : le numéro en grand --------- */
.ac-primary{ --ac:var(--stripe-blue-deep); }
.ac-big{
  display:block; margin-top:12px;
  font-family:'Public Sans',sans-serif; font-weight:800; font-size:25px;
  color:var(--navy-deep); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  direction:ltr;
}
html[lang="ar"] .ac-big{ font-family:'Cairo',sans-serif; }

.ac-wa{ --ac:#25A566; }

/* flèche en angle, révélée au survol */
.ac-go{
  position:absolute; top:24px; inset-inline-end:22px; z-index:2;
  color:var(--ac); opacity:.45;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.ac-go svg{ width:15px; height:10px; display:block; }
html[dir="rtl"] .ac-go{ transform:scaleX(-1); }
a.ac:hover .ac-go{ opacity:1; transform:translateX(4px); }
html[dir="rtl"] a.ac:hover .ac-go{ transform:scaleX(-1) translateX(4px); }

/* --------- adresse et horaires : deux blocs plus discrets, côte à côte --------- */
.ac-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1100px){ .ac-pair{ grid-template-columns:1fr; } }
.ac-static{
  --ac:var(--ink-soft);
  background:var(--hull); box-shadow:none; padding:20px 20px 18px;
}
.ac-static .ac-ico{ width:36px; height:36px; margin-bottom:13px; }
.ac-static .ac-ico svg{ width:18px; height:18px; }
.ac-static .ac-t{ font-size:15px; }

/* pastille « veille 24h/24 », avec point qui palpite */
.ac-badge{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(67,176,42,.1); border:1px solid rgba(67,176,42,.28);
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#2E8B45;
}
html[lang="ar"] .ac-badge{ font-family:'Cairo',monospace; letter-spacing:0; }
.ac-dot{
  width:6px; height:6px; border-radius:50%; background:var(--stripe-green); flex-shrink:0;
  box-shadow:0 0 6px var(--stripe-green); animation:tag-dot 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .ac-dot{ animation:none; }
  a.ac:hover{ transform:none; }
}

/* =========================================================================
   ═══ RÉSEAUX SOCIAUX — PIED DE PAGE ═══
   ========================================================================= */
.footer-social{ display:flex; gap:9px; margin-top:16px; }
.fs-item{
  --fs-c:#8aa5b7;
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:#c3d9e8; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.fs-item svg{ width:16px; height:16px; }
.fs-item:hover{
  transform:translateY(-2px); color:#fff;
  background:var(--fs-c); border-color:var(--fs-c);
}
.fs-fb{ --fs-c:#1877F2; }
.fs-yt{ --fs-c:#FF0000; }
.fs-x{ --fs-c:#000000; }
@media (prefers-reduced-motion: reduce){ .fs-item:hover{ transform:none; } }

/* =========================================================================
   ═══ ENQUÊTE DE SATISFACTION — TOUT EN BAS ═══
   Micro-sondage discret : une question, quatre visages, un commentaire
   facultatif. N'apparaît qu'une fois par visiteur (mémorisé localement).
   ========================================================================= */
.csat{
  background:var(--hull-2); border-top:1px solid var(--line);
  padding:30px 0;
}
.csat-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }

.csat-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--stripe-blue-deep); margin-bottom:6px;
}
html[lang="ar"] .csat-eyebrow{ font-family:'Cairo',monospace; letter-spacing:0; }
.csat-ask p:not(.csat-eyebrow){ font-size:15px; font-weight:600; color:var(--navy-deep); margin-bottom:14px; }

.csat-faces{ display:flex; gap:10px; justify-content:center; }
.csat-face{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1.3,.36,1), border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.csat-face svg{ width:22px; height:22px; }
.csat-face:hover{ transform:translateY(-2px) scale(1.08); border-color:var(--stripe-blue); color:var(--stripe-blue-deep); }
.csat-face[data-score="1"]:hover{ color:#C8102E; border-color:#C8102E; background:rgba(200,16,46,.06); }
.csat-face[data-score="2"]:hover{ color:#B8860B; border-color:#B8860B; background:rgba(184,134,11,.06); }
.csat-face[data-score="3"]:hover{ color:#2E8B45; border-color:#2E8B45; background:rgba(46,139,69,.06); }
.csat-face[data-score="4"]:hover{ color:#1B7A3D; border-color:#1B7A3D; background:rgba(27,122,61,.08); }
.csat-face.is-picked{ transform:scale(1.1); color:#fff; border-color:transparent; }
.csat-face[data-score="1"].is-picked{ background:#C8102E; }
.csat-face[data-score="2"].is-picked{ background:#B8860B; }
.csat-face[data-score="3"].is-picked{ background:#2E8B45; }
.csat-face[data-score="4"].is-picked{ background:#1B7A3D; }

/* [hidden] doit rester prioritaire : un display explicite sur l'élément
   écrase sinon l'attribut natif, et les trois états s'affichaient tous en
   même temps (bug réel corrigé) */
.csat-detail[hidden], .csat-done[hidden], .csat-ask[hidden]{ display:none !important; }
.csat-detail{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:440px; }
.csat-detail-label{ font-size:13px; color:var(--ink-soft); }
.csat-detail textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 13px;
  font-family:inherit; font-size:13.5px; resize:vertical; background:#fff;
}
.csat-detail textarea:focus{ outline:none; border-color:var(--stripe-blue); }
.csat-detail-actions{ display:flex; align-items:center; gap:14px; }
.csat-skip{
  background:none; border:none; cursor:pointer; font-size:12.5px; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.csat-skip:hover{ color:var(--navy-deep); }

.csat-done{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--stripe-green-deep); }
.csat-done svg{ width:32px; height:32px; }
.csat-done p{ font-size:14px; font-weight:600; color:var(--navy-deep); }

/* déjà répondu : la section entière s'efface discrètement */
.csat.is-answered{ display:none; }

@media (prefers-reduced-motion: reduce){ .csat-face:hover, .csat-face.is-picked{ transform:none; } }
@media print{ .csat{ display:none !important; } }

/* =========================================================================
   ═══ PROCÉDURE D'URGENCE — « COMMENT DÉCLENCHER UNE INTERVENTION » ═══
   Trois étapes reliées par un fil visuel : l'alerte (rouge), la position
   (bleu), la veille (vert) — de l'urgence à la sécurité. Icônes propres à
   chaque geste plutôt qu'un simple numéro dans une carte plate.
   ========================================================================= */
.proc-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .proc-steps{ grid-template-columns:1fr; gap:14px; } }

.proc-step{
  --ps:var(--stripe-blue);
  /* pas de overflow:hidden : un fond en dégradé respecte déjà nativement
     les coins arrondis sans lui, et il coupait la flèche de liaison
     positionnée juste à l'extérieur de la carte (bug réel corrigé) */
  position:relative; isolation:isolate;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px 26px 26px;
  box-shadow:0 1px 2px rgba(6,42,69,.04), 0 2px 8px -2px rgba(6,42,69,.05);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.proc-step:hover{
  transform:translateY(-4px); border-color:color-mix(in srgb, var(--ps) 45%, var(--line));
  box-shadow:0 2px 4px rgba(6,42,69,.06), 0 18px 38px -12px color-mix(in srgb, var(--ps) 30%, rgba(6,42,69,.18));
}
.ps-1{ --ps:#C8102E; }   /* alerte : urgence */
.ps-2{ --ps:#1B5B8A; }   /* position : coordination */
.ps-3{ --ps:#2E8B45; }   /* veille : sécurité */

.ps-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--ps) 16%, transparent), transparent 68%);
  transition:opacity .4s var(--ease);
}
.proc-step:hover .ps-glow{ opacity:1; }
.proc-step > *{ position:relative; z-index:1; }

.ps-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ps-ico{
  width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:13px;
  color:var(--ps); background:color-mix(in srgb, var(--ps) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--ps) 26%, transparent);
  transition:transform .4s cubic-bezier(.22,1.2,.36,1), background .35s var(--ease);
}
.ps-ico svg{ width:22px; height:22px; }
.proc-step:hover .ps-ico{ transform:translateY(-2px) scale(1.06); background:color-mix(in srgb, var(--ps) 17%, transparent); }

.proc-step .n{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700;
  letter-spacing:.12em; color:var(--ps); margin:0; display:block;
}
html[lang="ar"] .proc-step .n{ font-family:'Cairo',monospace; letter-spacing:0; }
.proc-step h3{ font-family:'Source Serif 4',serif; font-size:18px; font-weight:600; color:var(--navy-deep); margin-bottom:9px; }
.proc-step p{ font-size:14px; line-height:1.65; color:var(--ink-soft); }

/* --------- flèche de liaison entre les étapes, sur grand écran --------- */
.ps-arrow{
  display:none; position:absolute; top:50%; inset-inline-end:-24px; z-index:3;
  width:32px; height:16px; color:var(--line); transform:translateY(-50%);
  transition:color .35s var(--ease);
}
@media (min-width:901px){ .ps-arrow{ display:block; } }
html[dir="rtl"] .ps-arrow{ transform:translateY(-50%) scaleX(-1); }
.proc-step:hover .ps-arrow, .proc-steps:has(.proc-step:hover) .ps-arrow{ color:var(--stripe-blue); }

@media (prefers-reduced-motion: reduce){ .proc-step:hover{ transform:none; } .proc-step:hover .ps-ico{ transform:none; } }

/* =========================================================================
   ═══ ÉCRAN DE BLOCAGE — ÉVÉNEMENTS CRITIQUES ═══
   Distinct du bandeau d'alerte : celui-ci couvre tout l'écran et exige un
   geste explicite avant de laisser reprendre la navigation. Réservé aux
   situations réellement critiques (cyclone, pollution majeure).
   ========================================================================= */
.lockdown{
  display:none; position:fixed; inset:0; z-index:9995;
  align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(60% 70% at 50% 30%, rgba(200,16,46,.16), transparent 65%),
    linear-gradient(170deg, rgba(10,20,30,.97) 0%, rgba(4,10,16,.99) 100%);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lockdown[data-active="true"]{ display:flex; animation:ld-in .4s var(--ease) both; }
@keyframes ld-in{ from{ opacity:0; } to{ opacity:1; } }

.ld-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ld-card{
  position:relative; z-index:1; width:100%; max-width:460px;
  background:rgba(20,26,34,.92); border:1px solid rgba(200,16,46,.3); border-radius:var(--r-lg);
  padding:44px 38px 38px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation:ld-card-in .5s .1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ld-card-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

.ld-icon{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px;
  border-radius:50%; color:#ff6b7a;
  background:rgba(200,16,46,.14); border:1px solid rgba(200,16,46,.35);
  animation:ld-pulse 2.4s ease-in-out infinite;
}
.ld-icon svg{ width:30px; height:30px; }
@keyframes ld-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,16,46,.35); }
  50%    { box-shadow:0 0 0 14px rgba(200,16,46,0); }
}

.ld-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#ff6b7a; margin-bottom:12px;
}
html[lang="ar"] .ld-tag{ font-family:'Cairo',monospace; letter-spacing:0; }

.ld-title{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:24px;
  color:#fff; line-height:1.3; margin-bottom:14px;
}
html[lang="ar"] .ld-title{ font-family:'Cairo',sans-serif; }

.ld-text{ font-size:14.5px; line-height:1.7; color:#c3d0da; margin-bottom:28px; }

.ld-ack{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:14px 24px; border:none; border-radius:var(--r-pill);
  background:linear-gradient(135deg,#D8203A,var(--red-star));
  color:#fff; font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(200,16,46,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ld-ack:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(200,16,46,.65); }
.ld-ack:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.ld-sub{ margin-top:16px; font-size:11.5px; color:#7f8e98; }

/* le reste de la page ne doit plus défiler tant que le blocage est actif */
body.is-locked{ overflow:hidden; }

@media (max-width:480px){
  .ld-card{ padding:34px 24px 28px; }
  .ld-title{ font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .lockdown[data-active="true"], .ld-card, .ld-icon{ animation:none !important; }
}
@media print{ .lockdown{ display:none !important; } }

/* =========================================================================
   ═══ MOT DU COLONEL — MESSAGE VALIDÉ ═══
   Citation d'ouverture, ligne de cap, triptyque de clôture : trois
   éléments distincts pour un texte institutionnel qui a du souffle.
   ========================================================================= */
.colonel-quote{
  font-family:'Source Serif 4',serif; font-style:italic; font-weight:600;
  font-size:24px; line-height:1.45; color:var(--navy-deep);
  padding-inline-start:22px; margin-bottom:28px;
  border-inline-start:3px solid var(--stripe-blue);
}
html[lang="ar"] .colonel-quote{ font-family:'Cairo',sans-serif; font-style:normal; }

.colonel-cap{
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--stripe-blue-deep);
  padding:14px 18px; margin:8px 0 20px;
  background:var(--hull); border-radius:var(--r-sm);
  border-inline-start:3px solid var(--stripe-green);
}
html[lang="ar"] .colonel-cap{ font-family:'Cairo',monospace; letter-spacing:0; }

.colonel-triptych{
  margin:30px 0 26px; padding:24px 26px;
  background:var(--hull); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:9px;
}
.colonel-triptych p{
  font-family:'Source Serif 4',serif; font-weight:600; font-size:16.5px;
  color:var(--navy-deep); margin:0; line-height:1.4;
}
html[lang="ar"] .colonel-triptych p{ font-family:'Cairo',sans-serif; }


/* =========================================================================
   ROUTEUR — une seule page visible à la fois
   ========================================================================= */
/* .route{ display:none; } retire : chaque page ne contient plus quune seule route, toujours visible */
.route.is-active{ display:block; animation:route-in .38s var(--ease) both; }
@keyframes route-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .route.is-active{ animation:none; } }