/* ===== 3C SHIPPING — Immersive Landing ===== */
/* Typo : système IBM Plex (une seule superfamille). IBM Plex Serif = titres · IBM Plex Sans = corps · IBM Plex Mono = data/UI. Règle : jamais deux polices dans une même phrase, titre ou texte. */
:root{
  --navy:#0B1A2B;
  --navy-deep:#071120;
  --cream:#F4EBD9;
  --ink:#111111;
  --gold:#D4AF37;
  --gold-deep:#B5862B;
  --gold-text:#7A5A13; /* or lisible sur crème (5.4:1 WCAG AA) — pour texte, pas pour aplats */
  /* Design system « Nuit + Heritage » : les sections claires passent en crème vieilli + or chaud (cf. Figma) */
  --cream-h:#EFE4C9;
  --gold-warm:#C49A3A;
  --gold-warm-deep:#9C7A2A;
  --serif:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --serif-soft:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --pad:clamp(20px,5vw,110px);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:rgba(212,175,55,.85);color:var(--navy)}
html{scroll-behavior:auto;scroll-padding-top:96px;overflow-x:clip}
body{
  font-family:var(--sans);background:var(--cream-h);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.lock{overflow:hidden;height:100dvh}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
section{position:relative}

/* ---- Typography helpers ---- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--navy);font-weight:500}
.eyebrow--gold{color:var(--gold-deep);font-weight:600}
/* sections à fond crème : or plus foncé pour respecter le contraste (5.4:1) sans changer la teinte perçue */
.manifesto .eyebrow--gold,.stack__head .eyebrow--gold,.fleet .eyebrow--gold,.qhse .eyebrow--gold{color:var(--gold-text)}
.section-title{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-.01em}
.section-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.section-head .eyebrow{display:block;margin-bottom:18px}
.section-head--center{margin-inline:auto;text-align:center}
.italic{font-style:italic}

/* ---- Grain ---- */
/* grain SANS mix-blend (le blend plein écran au-dessus de la vidéo coûtait un compositing par frame) */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- Cursor (SmoothCursor — flèche spring) ---- */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;transform-origin:center;transform:translate(-100px,-100px);
  pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s;will-change:transform}
.cursor__arrow{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(7,17,32,.35))}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* ---- Loader ---- */
.loader{position:fixed;inset:0;z-index:200;background:#efe6cf;overflow:hidden;
  transition:opacity .3s var(--ease),visibility .3s;animation:loaderSafety 0s linear 7s forwards}
.loader.done{opacity:0;visibility:hidden}
@keyframes loaderSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
.hero__video::-webkit-media-controls-start-playback-button{display:none!important}
.loader__vid::-webkit-media-controls-start-playback-button{display:none!important}
/* petite vidéo dédiée du loader (plein cadre) */
.loader__vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;background:#efe6cf}
.loader__logo{position:absolute;inset:0;z-index:2}
.loader__logo[hidden]{display:none}
.loader__logo img{width:100%;height:100%;object-fit:cover;object-position:center}
.loader{cursor:pointer}
.loader__skip{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(11,26,43,.5);opacity:0;animation:skipFade .6s var(--ease) 2s forwards;pointer-events:none}
.loader.done .loader__skip{display:none}
@keyframes skipFade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.loader__skip{animation:none;opacity:1}}

/* ---- Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);transition:padding .5s var(--ease),background .5s var(--ease),backdrop-filter .5s;
  /* scrim au repos : liens crème lisibles sur les frames claires du hero (remplacé par le fond plein en .scrolled) */
  background:linear-gradient(180deg,rgba(7,17,32,.55),rgba(7,17,32,0))}
.nav__menu a,.lang{text-shadow:0 1px 8px rgba(6,9,14,.55)}
.nav .btn--pill{color:var(--gold)} /* --gold-deep illisible sur le scrim/fond sombre de la nav */
.nav.scrolled{padding:10px var(--pad);background:rgba(7,17,32,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(212,175,55,.14),0 18px 40px -30px rgba(2,6,14,.9)}
.nav__logo img{height:44px;width:auto;transition:height .5s var(--ease)}
.nav.scrolled .nav__logo img{height:34px}
.nav__menu{display:flex;gap:38px}
.nav__menu a{font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:var(--cream);position:relative;opacity:.85;transition:opacity .3s}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease)}
.nav__menu a:hover{opacity:1}.nav__menu a:hover::after{width:100%}
.nav__right{display:flex;align-items:center;gap:22px}
.lang{background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--cream);display:flex;gap:6px;align-items:center;min-height:44px;padding-inline:4px}
.lang__sep{opacity:.4}.lang__alt{opacity:.45;transition:opacity .3s}.lang:hover .lang__alt{opacity:.8}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;border:none;cursor:pointer;width:44px;height:44px}
.burger span{display:block;width:26px;height:1.5px;background:var(--cream);transition:transform .5s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* Focus accessible (clavier) */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:15px;letter-spacing:.04em;cursor:pointer;border:none;
  transition:background .4s var(--ease),color .4s var(--ease)}
.btn--pill{background:transparent;border:1px solid rgba(181,134,43,.65);color:var(--gold-deep);padding:11px 12px 11px 22px;border-radius:50px}
.btn--solid{position:relative;background:linear-gradient(180deg,#0d1f33,#071120);color:var(--cream);padding:16px 16px 16px 30px;border-radius:50px;
  box-shadow:0 1px 0 0 rgba(244,235,217,.14) inset,0 6px 22px -10px rgba(212,175,55,.4);transition:background .4s var(--ease),box-shadow .45s var(--ease)}
/* ---- NoiseBackground (Aceternity porté en CSS) : cadre dégradé grainé animé autour du bouton ---- */
@property --noise-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
.btn--solid::before{content:"";position:absolute;inset:0;padding:3px;border-radius:inherit;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),linear-gradient(120deg,#9C7A2A,#D4AF37,#F4EBD9,#C49A3A,#B5862B);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),conic-gradient(from var(--noise-angle),#9C7A2A,#D4AF37,#F4EBD9,#C49A3A,#B5862B,#D4AF37,#9C7A2A);
  background-size:90px 90px,100% 100%;background-blend-mode:overlay;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:noiseSpin 5s linear infinite}
@keyframes noiseSpin{to{--noise-angle:360deg}}
@media(prefers-reduced-motion:reduce){.btn--solid::before{animation:none}}
.btn--ghost{background:transparent;border:1px solid rgba(244,235,217,.5);color:var(--cream);padding:16px 30px;border-radius:50px}
.btn--lg{padding:20px 20px 20px 38px;font-size:16px}
.btn__ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:15px;
  background:rgba(11,26,43,.12);transition:transform .4s var(--ease),background .4s}
.btn--pill .btn__ico,.btn--ghost .btn__ico{background:rgba(212,175,55,.18)}
.btn--solid .btn__ico{background:rgba(212,175,55,.2);color:var(--gold)}
.btn:hover .btn__ico{transform:translate(3px,-2px);background:rgba(11,26,43,.22)}
.btn--solid:hover{background:linear-gradient(180deg,#12283f,#0a1728);box-shadow:0 1px 0 0 rgba(244,235,217,.16) inset,0 10px 30px -8px rgba(212,175,55,.6)}
.btn--solid:hover .btn__ico{transform:translate(3px,-2px);background:rgba(212,175,55,.4)}
.btn--ghost:hover{background:rgba(244,235,217,.1)}

/* ---- Spectral (CTA hero) : liseré conique tournant — éclats or/crème sur navy profond ---- */
.btn--spectral{position:relative;background:transparent;color:var(--cream);padding:0 26px;min-height:62px;border-radius:17px;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;overflow:hidden;isolation:isolate;
  box-shadow:0 18px 44px -18px rgba(6,9,14,.65),0 0 44px -18px rgba(212,175,55,.5)}
.btn--spectral::before{content:"";position:absolute;z-index:-2;inset:-170%;
  background:conic-gradient(from 0deg,transparent 0 14%,var(--gold-warm-deep) 22%,var(--cream) 28%,var(--gold) 36%,transparent 44% 64%,var(--gold-warm-deep) 73%,var(--gold) 82%,transparent 90%);
  animation:spectralSpin 5.8s linear infinite}
.btn--spectral::after{content:"";position:absolute;z-index:-1;inset:1.5px;border-radius:15.5px;
  background:radial-gradient(circle at 50% 0,rgba(244,235,217,.12),transparent 48%),linear-gradient(180deg,#0d1f33,#071120)}
.btn--spectral .btn__ico{width:auto;height:auto;background:transparent;color:var(--gold);font-size:16px;line-height:1;margin-top:-3px} /* calage optique : le glyphe ↗ s'assoit sur la baseline, on le remonte au centre des capitales */
.btn--spectral:hover::before{animation-duration:1.9s}
.btn--spectral:hover .btn__ico{transform:translate(3px,-2px);background:transparent}
@keyframes spectralSpin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.btn--spectral::before{animation:none}}

/* ---- HERO ---- */
.hero{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1;background:#efe6cf url('assets/hero-intro-poster.webp') center/cover no-repeat}
.hero__media{will-change:transform}
.hero__video{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
/* Overlay révélé seulement à la FIN (lisibilité du texte) — pas de filtre bleu pendant la vidéo */
/* modes statiques (reduce / no-JS) : le titre s'affiche sur la frame logo claire → vignettage radial derrière le texte */
@media(prefers-reduced-motion:reduce){.hero__overlay{opacity:1!important;
  background:radial-gradient(ellipse 62% 54% at 50% 52%,rgba(6,9,14,.5),rgba(6,9,14,.16) 68%,rgba(6,9,14,.06))}}
html:not(.js) .hero__overlay{opacity:1;
  background:radial-gradient(ellipse 62% 54% at 50% 52%,rgba(6,9,14,.5),rgba(6,9,14,.16) 68%,rgba(6,9,14,.06))}
.hero__overlay{position:absolute;inset:0;opacity:0;background:
  linear-gradient(0deg,rgba(6,9,14,.84) 0%,rgba(6,9,14,.34) 46%,rgba(6,9,14,.12) 100%)}
/* téléphones (≤767) : pas de scrub, la vidéo joue le voyage ; voile géré par JS (0 pendant, 1 à la fin comme desktop).
   fond image = secours si autoplay bloqué */
@media(max-width:767px){.hero__media{background-image:url('assets/hero-phone.webp')}} /* poster portrait recadré au centre : net sur téléphone (le paysage était étiré ×3,5) */
.hero__content{max-width:1240px;margin-inline:auto;color:var(--cream);display:flex;flex-direction:column;align-items:center}
/* le sur-titre a été retiré : le logo récupère cet espace et gagne en présence */
.hero__logo{width:clamp(148px,15.5vw,208px);height:auto;margin-bottom:34px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.45))}
.hero .eyebrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:26px}
.hero .eyebrow::before,.hero .eyebrow::after{content:"";width:44px;height:1px;background:var(--gold)}
/* frame finale = ciel doré : l'eyebrow or serait illisible (1.05:1) → crème + filets or conservés */
.hero .eyebrow--gold{color:var(--cream)}
.hero .eyebrow,.hero__sub{text-shadow:0 1px 6px rgba(6,9,14,.45)}
.hero__title{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.8vw,74px);line-height:1.02;letter-spacing:.012em;margin-bottom:30px;
  text-shadow:0 2px 22px rgba(6,9,14,.42),0 1px 4px rgba(6,9,14,.3)} /* lisible sur les frames claires (poster/blason), invisible sur fond sombre */
/* pas de masque ici : GSAP pose yPercent:0 sur ces lignes (révélées via l'autoAlpha de .hero__content).
   overflow:hidden ne servait donc qu'à rogner les jambages (y, g) sous une line-height de 1.02. */
.hero__title .line{display:block}
.hero__title .line>span{display:block}
.hero__sub{max-width:600px;margin:0 auto 44px;font-size:clamp(15px,1.3vw,18px);line-height:1.7;opacity:.92;font-weight:400;font-family:var(--sans);letter-spacing:.004em}
.hero__cta{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
/* Invite au défilement. Masquée par défaut : main.js pose .is-scrub sur le hero seulement
   quand la vidéo se lit au scroll (ordinateur, hors réseau lent). Dans tous les autres modes
   (tactile, réseau lent, sans JS) le texte et les boutons sont là d'emblée : rien à provoquer,
   et rien à recouvrir. Posée AU-DESSUS de la ligne HUD / « Skip intro » (bottom:34-38px) pour
   ne jamais les croiser, quelle que soit la largeur. navy + pilule crème = lisible sur le
   parchemin clair du départ. */
.hero__scroll{position:absolute;bottom:clamp(66px,10.5vh,104px);left:50%;transform:translateX(-50%);z-index:6;
  display:none;flex-direction:column;align-items:center;gap:8px;color:var(--navy);text-decoration:none}
.hero.is-scrub .hero__scroll{display:flex}
/* « Skip intro » en pastille — même vocabulaire que .hero__mouse et .stack__ico :
   fond crème translucide, filet or, flou. Le lien souligné à 60 % d'opacité se
   perdait aussi bien sur le parchemin clair du début que sur la mer sombre ;
   une forme FERMÉE tient sur les deux, sans halo de texte. */
.hero__skip{position:absolute;right:clamp(20px,4vw,54px);bottom:38px;z-index:6;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);text-decoration:none;
  padding:11px 19px;border-radius:999px;
  border:1px solid rgba(196,154,58,.6);background:rgba(244,235,217,.62);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 8px 26px -14px rgba(11,26,43,.55),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.hero__skip:hover{background:rgba(244,235,217,.88);border-color:var(--gold);transform:translateY(-1px)}
.hero__skip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:767px){.hero__skip{display:none}}
/* Pilule : même vocabulaire que « Skip intro » (crème translucide, filet or, flou) = forme
   FERMÉE qui tient sur le parchemin clair comme sur la mer sombre. À gauche la souris dans
   un disque navy (le point le plus contrasté du hero au départ : l'œil y va), puis le libellé. */
.hero__scroll-pill{display:flex;align-items:center;gap:13px;padding:7px 24px 7px 8px;border-radius:999px;
  border:1px solid rgba(196,154,58,.6);background:rgba(244,235,217,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 10px 30px -14px rgba(11,26,43,.6),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:background .3s var(--ease),border-color .3s var(--ease);
  animation:heroBreath 2.4s var(--ease) infinite}
.hero__scroll-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;line-height:1}
.hero__mouse{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--navy)}
.hero__mouse svg{display:block;width:13px;height:19px;color:var(--cream)}
/* la molette descend dans le corps de la souris, en unités du viewBox */
.hero__wheel{animation:heroWheel 2.4s var(--ease) infinite}
@keyframes heroWheel{0%{transform:translateY(0);opacity:0}
  14%{transform:translateY(1px);opacity:1}
  52%{transform:translateY(10px);opacity:1}
  64%{transform:translateY(11px);opacity:0}
  100%{transform:translateY(0);opacity:0}}
@keyframes heroBreath{0%,100%{transform:scale(1)}55%{transform:scale(1.055)}}
.hero__chev{display:block;width:21px;height:21px;color:var(--navy);margin-top:-1px;
  filter:drop-shadow(0 1px 7px rgba(244,235,217,.85));animation:heroChev 2.4s var(--ease) infinite}
@keyframes heroChev{0%,50%{opacity:.35;transform:translateY(0)}
  70%{opacity:1;transform:translateY(4px)}100%{opacity:.35;transform:translateY(0)}}
.hero__scroll:hover .hero__scroll-pill{border-color:var(--gold);background:rgba(244,235,217,.9)}
.hero__scroll:focus-visible{outline:none}
.hero__scroll:focus-visible .hero__scroll-pill{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .hero__scroll-pill,.hero__wheel,.hero__chev{animation:none}
  .hero__chev{opacity:.9}}

/* ---- Manifeste (section sous le hero, révélé au scroll) ---- */
.manifesto{background:var(--cream-h);color:var(--ink);padding:clamp(96px,17vh,190px) 0 clamp(56px,8vh,96px)}
.manifesto__inner{max-width:1160px;margin:0 auto;padding:0 6vw}
.manifesto .eyebrow--gold{margin-bottom:34px}
/* pas de max-width : la déclaration occupe toute la colonne de .manifesto__inner.
   L'ancien plafond 21ch était calé sur un texte plus court — avec le texte client
   il ne remplissait plus que 68 % de la largeur et retombait sur 6 lignes. */
.manifesto__statement{font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.9vw,56px);line-height:1.26;letter-spacing:-.005em;color:var(--navy)}
.manifesto__statement .w{display:inline-block}
html.js .manifesto__statement .w{opacity:.16}
@media(prefers-reduced-motion:reduce){html.js .manifesto__statement .w{opacity:1!important;transform:none!important}}
/* (accent doré/italique retiré : un seul style par texte — demande Clara 2026-07-11) */
.manifesto__rule{margin-top:clamp(40px,6vh,64px);height:1.5px;width:120px;background:rgba(11,26,43,.14);position:relative;overflow:hidden}
.manifesto__rule span{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ---- Services : cartes empilées au scroll (stack) ---- */
.stack{background:var(--cream-h);position:relative;padding:clamp(48px,6vh,84px) 0 clamp(48px,7vh,100px)}
.stack__head{max-width:1180px;margin:0 auto clamp(28px,4vh,56px);padding:0 clamp(24px,5vw,80px)}
.stack__head .eyebrow{margin-bottom:12px}
.stack__title{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-.01em;max-width:18ch}
/* même signature art-déco que les autres section-head (double filet + losange sur l'eyebrow) */
.stack__head .eyebrow::after{content:" ✦";color:var(--gold);margin-left:10px;font-size:.82em;vertical-align:1px}
.stack__title::after{content:"";display:block;width:64px;height:3px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);margin-top:20px}
/* Grille 3 × 2 (retour client 2026-08-16 : les cartes ne s'empilent plus, elles sont
   côte à côte). Pas de grid-auto-rows:1fr : chaque rangée se cale sur son propre contenu
   (les cartes d'une même rangée restent à hauteur égale via le stretch par défaut), sinon
   la rangée courte hérite de la hauteur de la longue et se creuse d'un grand vide. */
.stack__list{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,80px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.stack__card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--navy);border-radius:20px;box-shadow:0 26px 60px -30px rgba(7,17,32,.5);cursor:pointer}
.stack__card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.stack__card::after{content:"";position:absolute;inset:0;background:var(--navy-deep);opacity:var(--cover,0);pointer-events:none;border-radius:inherit;z-index:6}
.stack__card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent 72%);z-index:7}
/* bandeau photo en haut de carte, ratio fixe : les 6 images s'alignent au pixel */
.stack__media{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden}
.stack__media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.03)}
/* le voile atteint le navy opaque AVANT le bord (4 %) et déborde d'1px en bas :
   sinon le dernier pixel reste un mélange et dessine un liseré clair à la jonction.
   Retour client 2026-08-16 (« photos très sombres ») : les images ont été régénérées en
   plein jour ET le voile ne couvre plus que le bas de l'image, juste ce qu'il faut pour
   fondre dans le corps navy de la carte. */
.stack__media::after{content:"";position:absolute;inset:0 0 -1px 0;background:linear-gradient(0deg,var(--navy) 4%,rgba(7,17,32,0) 60%)}
/* fond navy + 1px de recouvrement : la hauteur du media tombe sur un pixel fractionnaire,
   dont le mélange laissait passer une ligne d'image à la jonction */
.stack__body{background:var(--navy);margin-top:-1px;position:relative;flex:1 1 auto;color:var(--cream);padding:clamp(22px,2.1vw,30px) clamp(22px,2.1vw,30px) clamp(24px,2.4vw,32px);display:flex;flex-direction:column;justify-content:flex-start;gap:14px;z-index:2}
.stack__num{position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(18px,1.8vw,26px);font-family:var(--serif);font-weight:600;font-size:clamp(44px,4.4vw,68px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(196,154,58,.5);pointer-events:none}
/* pastille : l'anneau doré, autrefois dessiné dans chaque SVG, est désormais porté par le conteneur.
   Même langage que .qhse .pillar__ico → les deux sections partagent la même pastille. */
/* Pictogrammes : le PNG sert de MASQUE, la couleur reste donnée par currentColor —
   les règles de couleur et de survol ci-dessous continuent donc de s'appliquer.
   (un masque CSS est soumis au CORS : invisible en file://, visible en http) */
.ico{display:block;background:currentColor;
  -webkit-mask-image:var(--ico);mask-image:var(--ico);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.stack__ico{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(212,175,55,.4);background:rgba(212,175,55,.06);color:var(--gold)}
.stack__ico svg,.stack__ico .ico{width:30px;height:30px;display:block}
.stack__ct{font-family:var(--serif);font-weight:500;font-size:clamp(22px,1.9vw,29px);line-height:1.1;letter-spacing:-.01em;color:var(--cream);margin:0}
.stack__desc{font-family:var(--sans);font-size:15px;line-height:1.65;color:rgba(244,235,217,.82);max-width:38ch;margin:0}
/* description encore vide (en attente des textes) : on la sort du flux pour ne pas doubler le gap */
.stack__desc:empty{display:none}
/* titres longs (2 mots-clés et plus) : cran en dessous pour rester sous 3 lignes */
.stack__ct{text-wrap:balance}
.stack__ct--long{font-size:clamp(19px,1.55vw,24px)}
/* tablette : 2 colonnes */
@media (max-width:1024px){
  .stack__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  /* mobile : carrousel scroll-snap (voir bloc « carrousel mobile » plus bas) */
  .stack__card{border-radius:18px}
  .stack__body{padding:26px 22px 32px}
  .stack__num{font-size:56px;top:14px;right:18px}
}

/* ---- SERVICES = section .stack (cartes empilées, stylée plus haut). Ancien bento .cards/.card retiré (code mort). ---- */

/* ---- STATS ---- */
.stats{padding:clamp(70px,8vw,110px) 0;overflow:hidden}
.stats__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.15);z-index:-2}
.stats__overlay{position:absolute;inset:0;background:rgba(7,17,32,.58);z-index:-1}
/* minmax(0,1fr) et pas 1fr : avec 1fr (= minmax(auto,1fr)) une colonne ne peut pas passer
   sous la largeur de son contenu, donc un chiffre trop large élargit SA colonne et rétrécit
   les autres. Les quatre colonnes doivent rester strictement égales. */
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;text-align:center}
.stat__numwrap{display:block;overflow:hidden;line-height:1;padding-bottom:.04em}
/* flex + align-items:flex-start : la pile d'odomètre ET le libellé statique « 24/7 » sont
   deux boîtes de 1em calées sur le haut de la même boîte — plus de strut de ligne entre les
   deux, donc plus d'écart de ligne de base d'une colonne à l'autre. */
/* La taille est calée sur le PLUS LARGE des quatre nombres (« 100% », 2,77 × la taille de
   police) pour qu'il tienne dans son quart de grille. Avant, 112px faisait déborder « 100% »
   et « 24/7 » : les colonnes 1fr s'élargissaient pour absorber le trop-plein, la grille
   devenait asymétrique et le filet séparateur passait au travers du chiffre. */
.stat__num{font-family:var(--serif);font-weight:600;font-size:clamp(44px,calc(7.4vw - 7px),80px);color:var(--gold);display:flex;align-items:flex-start;justify-content:center;line-height:1}
.stat__static{display:block;height:1em;line-height:1}
.stat__label{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,235,217,.8);margin-top:12px;display:block}

/* ---- ABOUT ---- */
.about{padding:clamp(80px,11vw,150px) 0;background:var(--cream-h)}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.about__text .eyebrow{display:block;margin-bottom:18px}
.about__text .section-title{margin-bottom:26px}
/* la colonne de gauche de .about__grid fait déjà la mesure (≈ 62 signes à 17 px) :
   le plafond 520px, calé sur un texte plus court, laissait 85px de blanc à droite */
.about__p{font-size:17px;line-height:1.75;color:rgba(17,17,17,.82);font-weight:400;margin-bottom:18px}
.about__text .btn{margin-top:14px}
.about__shell{position:relative;border-radius:24px;overflow:hidden;background:var(--navy);box-shadow:0 40px 80px -50px rgba(11,26,43,.6)}
/* double-bezel art-déco (écho du logo encadré) */
.about__shell::after{content:"";position:absolute;inset:14px;border:1px solid rgba(196,154,58,.45);border-radius:14px;pointer-events:none;z-index:2}
.about__shell img{width:100%;height:540px;object-fit:cover;opacity:.92}
.about__shell figcaption{position:absolute;left:0;right:0;bottom:0;padding:42px;background:linear-gradient(0deg,rgba(7,17,32,.92),transparent)}
.about__quote{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,28px);color:var(--cream);line-height:1.3;margin-bottom:16px}
.about__sign{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold)}

/* ---- PRESENCE ---- */
.presence{padding:clamp(80px,11vw,150px) 0;background:var(--navy-deep);color:var(--cream)}
.presence .section-title{color:var(--cream)}
/* Carte marine animée : la vidéo est le sujet, on lui laisse toute la largeur du conteneur
   et on la borde du même filet or que les autres coquilles du site. */
.mapvid{margin:clamp(18px,3vw,34px) 0 clamp(28px,4vw,48px);position:relative;border-radius:20px;
  overflow:hidden;background:var(--navy-deep);
  box-shadow:0 50px 100px -60px rgba(0,0,0,.9),0 0 0 1px rgba(196,154,58,.18)}
.mapvid::after{content:"";position:absolute;inset:13px;border:1px solid rgba(196,154,58,.30);
  border-radius:10px;pointer-events:none;z-index:2}
.mapvid__el{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--navy-deep)}
@media(max-width:640px){
  .mapvid{border-radius:14px}
  .mapvid::after{inset:9px;border-radius:7px}
}
/* la carte est épinglée en STICKY natif (pas de pin GSAP position:fixed → zéro layout-shift, compositor-friendly) ;
   le wrapper .map-pin reçoit sa hauteur (carte + 100vh de scrub) via JS ; sans JS il reste auto → flux normal */
.map-pin{position:relative}
.map-pin .map{position:sticky;top:25vh}
.map{position:relative;height:80vh;min-height:500px;overflow:hidden;margin:10px 0 56px;display:flex;align-items:center;justify-content:center}
.map__stage{position:relative;width:100%;transform-origin:65.4% 36.6%;will-change:transform}
.map__base{width:100%;height:auto;display:block;opacity:.92}
.map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map__cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.85}
.map__cue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(var(--gold),transparent)}
@media(max-width:768px){
  /* la carte reste CINÉMATIQUE (zoom Dubaï + navires) sur mobile/iPad — voir main.js */
  .map{min-height:460px}
}
@media(max-width:767px){
  /* téléphone : cadre resserré sur la bande des ports (moins d'océan au-dessus/dessous) */
  .map{height:56vh;min-height:340px}
}
.route{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:6 7;opacity:.82}
.port{fill:var(--gold);transform-box:fill-box;transform-origin:center;transition:filter .4s var(--ease)}
.port--hq{filter:drop-shadow(0 0 6px rgba(212,175,55,.55))}
.port.lit{filter:drop-shadow(0 0 10px var(--gold))}
.port.pulse{animation:portpulse 2.6s var(--ease) infinite}
@keyframes portpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55}}
.map__label{fill:rgba(244,235,217,.92);font-family:var(--mono);font-size:14px;letter-spacing:.06em;transition:fill .4s var(--ease);
  paint-order:stroke;stroke:var(--navy-deep);stroke-width:3.5px;stroke-linejoin:round} /* halo : lisible même traversé par une route/navire */
.map__label.lit{fill:var(--gold)}
.map__ship{fill:var(--gold);opacity:0;filter:drop-shadow(0 0 5px rgba(212,175,55,.7))}
/* ---- Présence : FlowingMenu (React Bits porté en vanilla + GSAP) ---- */
.zones{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(212,175,55,.2);border-radius:16px;background:rgba(7,17,32,.4)}
.zone{position:relative;overflow:hidden;border-bottom:1px solid rgba(212,175,55,.16)}
.zone:last-child{border-bottom:none}
.zone__row{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;
  padding:clamp(16px,2.2vw,26px) clamp(20px,2.6vw,38px)}
.zone h3{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,50px);line-height:1;color:var(--cream);margin:0;letter-spacing:-.01em}
.zone__meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.zone__ports{font-size:14px;letter-spacing:.02em;color:rgba(244,235,217,.7);font-weight:400}
.zone--hq h3{color:var(--gold)}
/* bande révélée au survol (marquee) */
.marquee{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;background:var(--gold);transform:translateY(101%)}
.marquee__inner-wrap{height:100%;width:100%;display:flex;align-items:center}
.marquee__inner{display:flex;align-items:center;width:max-content;will-change:transform}
.marquee__part{display:flex;align-items:center;gap:2rem;padding-right:2rem}
.marquee__part span{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.6vw,50px);line-height:1;color:#071120;white-space:nowrap}
.marquee__img{width:210px;height:clamp(54px,6vw,84px);border-radius:999px;background-size:cover;background-position:center;flex:0 0 auto;box-shadow:0 8px 22px -10px rgba(2,6,14,.6)}
@media(hover:none){.marquee{display:none}}

/* ---- QHSE ---- */
.qhse{padding:clamp(80px,11vw,150px) 0;background:var(--cream-h)}
.qhse__intro{max-width:700px;margin:0 auto clamp(48px,6vw,72px);text-align:center;font-size:clamp(16px,1.4vw,19px);line-height:1.7;color:rgba(17,17,17,.82);font-weight:400}
.pillar{padding-top:28px;border-top:1px solid rgba(11,26,43,.16)}
.pillar__ico{width:44px;height:44px;color:var(--gold-deep);margin-bottom:22px;transition:transform .6s var(--ease)}
.pillar__ico svg,.pillar__ico .ico{width:100%;height:100%;display:block;overflow:visible}
.pillar:hover .pillar__ico{transform:translateY(-3px) scale(1.06)}
.pillar h3{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--navy);margin-bottom:12px;letter-spacing:.02em}
.pillar p{font-size:15px;line-height:1.66;color:rgba(17,17,17,.8);font-weight:400}
/* QHSE — disposition éditoriale asymétrique (intro sticky + liste) */
.qhse__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,100px);align-items:start}
.qhse__aside{position:sticky;top:clamp(90px,12vh,140px)}
.qhse__aside .section-title{text-align:left;margin:18px 0 24px}
.qhse__intro{max-width:none;margin:0;text-align:left;font-size:clamp(16px,1.3vw,18px);line-height:1.72;color:rgba(17,17,17,.78);font-weight:400}
.qhse__list{display:flex;flex-direction:column}
.qhse .pillar{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,44px);padding:clamp(28px,3.4vw,46px) 0;border-top:1px solid rgba(11,26,43,.12)}
.qhse .pillar__rule{position:absolute;top:-1px;left:0;height:1.5px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.qhse .pillar__lead{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.qhse .pillar__num{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--gold)}
/* médaillon art-déco autour du picto + numéro fantôme géant */
.qhse .pillar__ico{position:relative;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(181,134,43,.45);box-shadow:inset 0 0 0 3px rgba(181,134,43,.14)}
.qhse .pillar__ico svg,.qhse .pillar__ico .ico{width:30px;height:30px}
.qhse .pillar__ghost{position:absolute;right:2%;top:50%;transform:translateY(-50%);font-family:var(--serif);
  font-size:clamp(90px,11vw,180px);line-height:1;color:rgba(181,134,43,.06);pointer-events:none;z-index:0;user-select:none}
.qhse .pillar__body{position:relative;z-index:1}
.qhse .pillar__ico{width:46px;height:46px;color:var(--gold-deep);margin:0}
.qhse .pillar__body{margin:0}
.qhse .pillar__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,28px);color:var(--navy);margin:0 0 12px;letter-spacing:.01em}
.qhse .pillar__body p{font-size:clamp(15px,1.05vw,16.5px);line-height:1.72;color:rgba(17,17,17,.8)}
@media(max-width:980px){
  .qhse__grid{grid-template-columns:1fr;gap:34px}
  .qhse__aside{position:static}
}
@media(max-width:560px){
  .qhse .pillar{grid-template-columns:1fr;gap:14px}
}

/* ---- Zone HQ tag + map HQ label ---- */
.zone__hq{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(212,175,55,.45);padding:3px 11px;border-radius:50px}
.map__label--hq{fill:var(--gold);font-weight:500}

/* ---- CONTACT ---- */
.contact{padding:clamp(100px,14vw,190px) 0;overflow:hidden;text-align:center}
.contact__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.15);z-index:-2}
.contact__overlay{position:absolute;inset:0;background:rgba(7,17,32,.7);z-index:-1}
/* emblème compas (Gemini, détouré) net en tête de la section contact */
.contact__emblem{display:block;width:clamp(92px,9vw,124px);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));pointer-events:none}
@media(max-width:768px){.contact__emblem{width:84px;margin-bottom:16px}}
.contact__inner{display:flex;flex-direction:column;align-items:center;color:var(--cream)}
.contact .eyebrow{margin-bottom:24px}
.contact__title{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5vw,62px);line-height:1.04;letter-spacing:.012em;margin-bottom:38px}
/* le masque est réel ici (GSAP anime yPercent 130 -> 0) : on descend la zone de rognage sous la
   ligne de base pour laisser passer les jambages, la marge négative annulant le décalage. */
.contact__title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.contact__title .line>span{display:block}

/* ---- FOOTER ---- */
.footer{background:var(--navy);color:var(--cream);padding:72px 0 36px}
.footer__top{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap;padding-bottom:44px}
.footer__logo{height:64px;width:auto;margin-bottom:18px}
.footer__brand p{max-width:340px;font-size:15px;line-height:1.65;color:rgba(244,235,217,.7);font-weight:300}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__h{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.footer__col a,.footer__col span:not(.footer__h){font-size:15px;color:rgba(244,235,217,.78);transition:color .3s}
.footer__col a:hover{color:var(--gold)}
.footer__bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(244,235,217,.14);padding-top:26px;font-size:13px;color:rgba(244,235,217,.55);flex-wrap:wrap;gap:10px}
/* crédit photo (licence Free Art License de l'image du port de Mumbai) : ligne à part, discrète */
.footer__credit{flex:1 0 100%;font-size:11px;color:rgba(244,235,217,.38);letter-spacing:.02em}
.footer__bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .3s}
.footer__bottom a:hover{color:var(--gold)}

/* ---- Reveal (opacity+transform only — pas de blur, 60fps) ---- */
html.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ---- Mobile menu ---- */
.menu-overlay{position:fixed;inset:0;z-index:75;background:rgba(7,17,32,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-overlay__links{display:flex;flex-direction:column;gap:8px;text-align:center}
.menu-overlay__links a{font-family:var(--serif);font-size:34px;color:var(--cream);padding:8px;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
.menu-overlay.open .menu-overlay__links a{opacity:1;transform:none}
.menu-overlay__links a:hover{color:var(--gold)}
.menu-overlay__links a.menu-overlay__cta{font-family:var(--mono);font-size:15px;color:var(--cream);margin-top:24px;align-self:center}
.menu-overlay__links a.menu-overlay__cta:hover{color:var(--gold)}
.menu-overlay__trust{position:absolute;left:0;right:0;bottom:38px;list-style:none;display:flex;flex-direction:column;
  align-items:center;gap:9px;padding:0}
.menu-overlay__trust li{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(244,235,217,.6);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.menu-overlay__trust li::before{content:"·";color:var(--gold);margin-right:9px}
.menu-overlay.open .menu-overlay__trust li{opacity:1;transform:none}
.menu-overlay.open .menu-overlay__trust li:nth-child(1){transition-delay:.42s}
.menu-overlay.open .menu-overlay__trust li:nth-child(2){transition-delay:.48s}
.menu-overlay.open .menu-overlay__trust li:nth-child(3){transition-delay:.54s}
.menu-overlay.open .menu-overlay__links a:nth-child(5){transition-delay:.34s}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .zones{grid-template-columns:repeat(2,1fr)}
  .zones .zone:last-child{grid-column:1/-1}
  /* le menu inline manque de place dès ~1024px (logo écrasé, liens qui cassent) → burger */
  .nav__menu{display:none}
  .nav__right .btn--pill{display:none}
  .burger{display:flex}
  .nav__logo{flex-shrink:0}
}
@media(max-width:768px){
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  /* deux colonnes = plus de place par chiffre, la formule desktop ne s'applique plus */
  .stat__num{font-size:clamp(40px,12.8vw,76px)}
  /* minmax(0,…) : sans plancher, la colonne suivait la largeur de la photo au scroll (630 px sur un écran de 390, texte coupé) */
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .about__shell img{height:420px}
  .zones{grid-template-columns:1fr;gap:0}
  .hero__scroll{display:none}
  .footer__top{gap:34px}
  .footer{padding-bottom:100px} /* la barre CTA fixe ne recouvre plus le bas du footer */
}
.menu-overlay.open .menu-overlay__links a:nth-child(1){transition-delay:.1s}
.menu-overlay.open .menu-overlay__links a:nth-child(2){transition-delay:.16s}
.menu-overlay.open .menu-overlay__links a:nth-child(3){transition-delay:.22s}
.menu-overlay.open .menu-overlay__links a:nth-child(4){transition-delay:.28s}
.menu-overlay.open .menu-overlay__links a:nth-child(6){transition-delay:.4s}
/* ---- Titres display (letter-spacing partagé ; tailles/line-height dans les blocs d'origine) ---- */
.section-title,.zone h3,.stat__num{letter-spacing:.012em}
.section-title{line-height:1.06}
/* Citations en italique : IBM Plex Serif italic (même famille que les titres) */
.about__quote{font-family:var(--serif-soft)!important;font-style:italic;text-transform:none;letter-spacing:0;font-weight:500}
/* Accents de titre : même famille que le titre porteur (jamais une 2e police dans la phrase) */
.italic{font-family:var(--serif)!important;text-transform:none;letter-spacing:inherit}
.about__text .section-title{font-family:var(--serif-soft);font-weight:600;letter-spacing:-.01em;line-height:1.12}


/* ===== QUICK WINS immersifs ===== */

/* 6 · Double-filet art-déco sous les titres de section + losange sur eyebrows */
.section-head .section-title::after{content:"";display:block;width:64px;height:3px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);margin-top:20px}
.section-head--center .section-title::after{margin-inline:auto}
.section-head .eyebrow::after{content:" ✦";color:var(--gold);margin-left:10px;font-size:.82em;vertical-align:1px}

/* 7 · Halos or respirants + vignette sur les sections navy */
.sec-halo{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.1;
  background:radial-gradient(40% 50% at 60% 55%,rgba(212,175,55,.13),transparent 70%)}
.presence .container,.stats__grid{position:relative;z-index:1}
.stats__overlay{box-shadow:inset 0 0 220px 80px rgba(7,17,32,.55)}
.presence{box-shadow:inset 0 0 240px 90px rgba(0,0,0,.32)}

/* 8 · Underline-draw doré (liens footer) */
.footer__col a{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;padding-bottom:3px;transition:color .3s,background-size .45s var(--ease)}
.footer__col a:hover{background-size:100% 1px}

/* ===== LOT 2 immersif ===== */

/* Duotone À propos PRÉ-CUIT (about-duo.webp) : calque au-dessus de la photo couleur,
   fondu au survol — plus AUCUN filtre SVG runtime (recalcul à chaque frame de parallaxe) */
.about__ph--duo{position:absolute;inset:0;z-index:1;transition:opacity 1s var(--ease)}
.about__shell:hover .about__ph--duo{opacity:0}

/* Stats — carte flottante + séparateurs + ligne de fret */
.stats__grid{max-width:1180px;margin-inline:auto;position:relative;z-index:1;
  background:rgba(9,20,34,.5);border:1px solid rgba(212,175,55,.2);border-radius:22px;
  padding:clamp(34px,5vw,54px) clamp(24px,4vw,48px);box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.stat{position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(10px,1.6vw,24px));top:18%;height:64%;width:1px;
  background:linear-gradient(transparent,rgba(212,175,55,.4),transparent)}
.stats__line{width:min(420px,64%);height:1px;margin:clamp(34px,5vw,52px) auto 0;background:rgba(212,175,55,.16);position:relative;z-index:1}
.stats__line span{position:absolute;inset:0;display:block;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* Moment typographique XXL */
.mega{background:var(--navy-deep);overflow:hidden;padding:clamp(46px,8vw,110px) 0}
.mega__word{display:block;white-space:nowrap;font-family:var(--serif);font-size:clamp(70px,16vw,230px);line-height:.86;
  letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.4px rgba(212,175,55,.85);padding-left:8vw;will-change:transform}

/* Brume océanique sur le contact */
.contact__fog{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 118%,rgba(244,235,217,.13),transparent 60%)}

@media(max-width:768px){
  .stat:not(:last-child)::after{display:none}
  .mega__word{-webkit-text-stroke-width:.6px}
}

@media(prefers-reduced-motion:reduce){
  /* on coupe tout SAUF le filet de sécurité du loader (sinon loader bloqué si JS mort) */
  *:not(.loader){animation:none!important;transition:none!important}
  .loader{animation:loaderSafety 0s linear 7s forwards!important}
  html.js .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .hero__overlay{opacity:1}         /* sinon texte crème sur poster crème = illisible */
  .map__ship{display:none}
  .stack__card{opacity:1!important}
}

/* ===== A11y + SEO helpers ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-64px;left:16px;z-index:300;background:var(--gold);color:var(--navy);font-family:var(--mono);font-size:14px;letter-spacing:.04em;padding:12px 20px;border-radius:0 0 8px 8px;transition:top .3s var(--ease)}
.skip-link:focus{top:0}

/* ===== Entrepôt Jakarta (remplace l'ancienne FAQ) ===== */
.wh{padding:clamp(80px,11vw,140px) 0;background:var(--cream-h)}
.wh__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.wh__p{font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:rgba(17,17,17,.8);
  margin-top:22px;font-weight:400}
/* fiche technique : libellé mono en petit, valeur en serif — même vocabulaire que .stat */
.wh__specs{list-style:none;margin:34px 0 36px;border-top:1px solid rgba(11,26,43,.16)}
.wh__specs li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid rgba(11,26,43,.16)}
.wh__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);font-weight:500}
.wh__v{font-family:var(--serif);font-size:clamp(17px,1.4vw,20px);font-weight:600;color:var(--navy);text-align:right}
/* même coquille que .about__shell : filet or en retrait, coins arrondis, ombre portée basse */
.wh__shell{position:relative;border-radius:24px;overflow:hidden;background:var(--navy);
  box-shadow:0 40px 80px -50px rgba(11,26,43,.6)}
.wh__shell::after{content:"";position:absolute;inset:14px;border:1px solid rgba(196,154,58,.45);
  border-radius:14px;pointer-events:none;z-index:2}
/* rail de photos : une vue par écran, calage scroll-snap, ascenseur masqué */
.wh__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--navy-deep);
  overscroll-behavior-x:contain}
.wh__track::-webkit-scrollbar{display:none}
.wh__track:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.wh__slide{flex:0 0 100%;width:100%;height:540px;object-fit:cover;opacity:.92;
  scroll-snap-align:center;scroll-snap-stop:always;-webkit-user-drag:none;user-select:none}
/* flèches : même verre teinté que la barre de nav, filet or au survol */
.wh__arw{position:absolute;top:50%;z-index:3;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--cream);
  background:rgba(7,17,32,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(212,175,55,.42);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             opacity .35s var(--ease),transform .35s var(--ease)}
.wh__arw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wh__arw--prev{left:26px;transform:translateY(-50%)}
.wh__arw--next{right:26px;transform:translateY(-50%)}
.wh__arw:hover{background:rgba(7,17,32,.82);border-color:var(--gold)}
.wh__arw--prev:hover{transform:translateY(-50%) scale(1.07)}
.wh__arw--next:hover{transform:translateY(-50%) scale(1.07)}
.wh__arw:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wh__arw[disabled]{opacity:0;pointer-events:none}
.wh__shell figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 42px;
  background:linear-gradient(0deg,rgba(7,17,32,.92),transparent);
  display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap}
.wh__figlabel{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(244,235,217,.72)}
/* pastilles + compteur : même grammaire que .stack__dots, transposée sur fond navy */
.wh__nav{display:flex;align-items:center;gap:18px;margin-left:auto}
.wh__dots{display:flex;gap:9px}
.wh__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(244,235,217,.3);-webkit-tap-highlight-color:transparent;
  transition:background .35s var(--ease),transform .35s var(--ease)}
.wh__dot.is-active{background:var(--gold);transform:scale(1.45)}
.wh__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wh__count{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  color:rgba(244,235,217,.6);white-space:nowrap}
.wh__num{color:var(--gold)}
@media(max-width:900px){
  .wh__grid{grid-template-columns:1fr}
  .wh__slide{height:380px}
  .wh__shell figcaption{padding:26px 24px;gap:12px 16px}
  .wh__arw{width:38px;height:38px}
  .wh__arw--prev{left:20px}
  .wh__arw--next{right:20px}
}

/* (la carte garde sa hauteur sur mobile pour l'effet cinématique épinglé) */

/* ===== Formulaire de cotation ===== */
.quote{max-width:680px;margin:10px auto 0;text-align:left;width:100%}
.quote__progress{display:flex;gap:26px;align-items:center;justify-content:center;position:relative;margin-bottom:38px;flex-wrap:wrap;counter-reset:qfstep}
.quote__step{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,235,217,.62);transition:color .4s;counter-increment:qfstep;background:none;border:none;padding:2px}
.quote__step::before{content:counter(qfstep,decimal-leading-zero) "\00a0\00a0";color:var(--gold);opacity:.7}
.quote__step.is-active{color:var(--gold)}
.quote__step:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.quote__bar{position:absolute;left:0;right:0;bottom:-14px;height:1px;background:rgba(244,235,217,.15)}
.quote__bar span{display:block;height:100%;width:33%;background:var(--gold);transition:width .5s var(--ease)}
.quote__panel{border:0;padding:0;margin:0;display:none}
.quote__panel.is-active{display:block;animation:qfIn .5s var(--ease)}
@keyframes qfIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quote__lbl{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,235,217,.92);margin-bottom:10px}
.quote__lbl[data-req]::after{content:" *";color:var(--gold)}
.quote__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quote__field{margin-bottom:18px}
.quote input[type=text],.quote input[type=email],.quote input[type=tel],.quote textarea{
  width:100%;background:rgba(244,235,217,.09);border:1px solid rgba(212,175,55,.25);border-radius:10px;
  padding:14px 16px;color:var(--cream);font-family:var(--sans);font-size:16px;transition:border-color .3s,background .3s}
.quote input::placeholder,.quote textarea::placeholder{color:rgba(244,235,217,.72)}
.quote input:focus,.quote textarea:focus{outline:none;border-color:var(--gold);background:rgba(244,235,217,.1)}
.quote input:user-invalid,.quote textarea:user-invalid{border-color:#c2663f}
.quote__pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pill span{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--cream);
  border:1px solid rgba(212,175,55,.3);border-radius:50px;padding:13px 18px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.pill input:checked+span{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.pill input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.quote__consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(244,235,217,.7);margin-top:6px;cursor:pointer;line-height:1.5}
.quote__consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--gold);flex:0 0 auto}
.quote__nav{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:30px;flex-wrap:wrap}
.quote__nav .btn[hidden]{display:none!important}
/* après envoi, main.js masque les enfants du formulaire : leurs display (flex, block) battaient l'attribut hidden */
.quote>[hidden]{display:none!important}
.quote__reassure{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(244,235,217,.55);margin-top:18px}
.contact__alt{display:inline-block;margin-top:28px;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:rgba(244,235,217,.72)}
@media(max-width:600px){.quote__row{grid-template-columns:1fr}}

/* ===== UI/UX polish (audit) ===== */
.link-draw{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;padding-bottom:3px;transition:background-size .45s var(--ease),color .3s}
.link-draw:hover{background-size:100% 1px;color:var(--gold)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-busy=true]{opacity:.6;cursor:not-allowed;pointer-events:none}

/* CTA hero : primaire dominant, secondaire en lien fléché */
.hero__cta .btn--solid{box-shadow:0 1px 0 0 rgba(244,235,217,.14) inset,0 16px 40px -14px rgba(212,175,55,.5)}
.hero__cta .btn--solid:hover{box-shadow:0 1px 0 0 rgba(244,235,217,.16) inset,0 20px 48px -12px rgba(212,175,55,.62)}
.hero__cta .btn--ghost{border:none;background:none;padding:16px 6px;border-radius:0;overflow:visible}
.hero__cta .btn--ghost::before{display:none} /* c'est un lien fléché, pas un bouton à remplissage */
.hero__cta .btn--ghost span{background:linear-gradient(var(--cream),var(--cream)) no-repeat 0 100%/0 1px;padding-bottom:4px;transition:background-size .45s var(--ease)}
.hero__cta .btn--ghost:hover span{background-size:100% 1px}
.hero__cta .btn--ghost::after{content:"→";margin-left:8px;color:var(--gold);line-height:1;margin-bottom:4px} /* compense le padding-bottom du span (soulignement) : flèche au centre optique du texte */

/* Stat KPI + zone siège */
/* « 24/7 » était rétréci de 25 % par rapport aux trois autres chiffres, et sa ligne de base
   ne tombait pas sur celle des compteurs (une pile .odo n'a pas le même calage qu'un nœud
   texte dans une boîte line-height:1). Les quatre chiffres partagent maintenant la même
   taille et le même calage — voir .stat__num / .stat__static plus bas. */
.zone--hq{background:rgba(212,175,55,.06);border-top-color:var(--gold)!important}
.zone--hq h3{color:var(--gold)}

/* Barre de progression de lecture */
.scroll-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.scroll-prog span{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* Carte : jauge du pin + bouton passer */
.map__gauge{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(244,235,217,.12);z-index:3}
.map__gauge span{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.map__cue{cursor:pointer;border:none;background:none}

/* Réassurance avant le formulaire */
.contact__proof{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:0 auto 36px;padding:0;list-style:none}
.contact__proof li{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:rgba(244,235,217,.82);display:flex;align-items:center;gap:10px}
/* puce filet or (le ✦ reste réservé aux eyebrows + marquee) */
.contact__proof li::before{content:"";width:14px;height:1px;background:var(--gold);flex:0 0 auto}

/* Formulaire : panneau, étape, erreurs, pastilles cliquables */
.quote{background:rgba(7,17,32,.5);border:1px solid rgba(212,175,55,.18);border-radius:18px;padding:clamp(26px,3vw,40px)}
.quote__count{display:block;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,235,217,.62);margin-bottom:16px}
.quote__step.is-done{color:rgba(212,175,55,.85);cursor:pointer}
.quote__step.is-done::after{content:" ✓";color:var(--gold)}
.quote input.is-error,.quote textarea.is-error{border-color:#c2663f;background:rgba(194,102,63,.08)}
.quote__pills.is-error .pill span{border-color:#c2663f}
.field-error{display:block;color:#e0916c;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;margin-top:7px}
@media(max-width:600px){.contact__proof{gap:14px}}
.nav__menu a.is-current{opacity:1}
.nav__menu a.is-current::after{width:100%}
.contact__alt::before{content:"✉  ";opacity:.85}
.contact__alt--tel{margin-top:12px}
.contact__alt--tel::before{content:"☎  "}
/* Titres UNIFORMES : le mot d'accent hérite tout (police, style, graisse, couleur) — une seule voix par titre */
.hero__title .italic,.contact__title .italic{font-family:inherit!important;font-style:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit}

/* ===== Bande de réassurance (après hero) — une police, une couleur, filets or ===== */
/* Bandeau de réassurance : hairlines or en fondu + losanges compas en séparateurs (motif or du site) */
.trust{position:relative;background:linear-gradient(180deg,#0a1a31,var(--navy-deep))}
.trust::before,.trust::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5) 18% 82%,transparent)}
.trust::before{top:0}
.trust::after{bottom:0}
.trust__row{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;padding:24px var(--pad)}
.trust__item{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,235,217,.85);white-space:nowrap;padding:4px clamp(18px,2.8vw,38px)}
.trust__item+.trust__item::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);
  margin-right:clamp(18px,2.8vw,38px);opacity:.75;box-shadow:0 0 8px rgba(212,175,55,.45);flex:none}
/* reveal : filets or qui se dessinent + items en stagger */
html.js .trust__item{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .trust.in .trust__item{opacity:1;transform:none}
html.js .trust.in .trust__item:nth-child(2){transition-delay:.08s}
html.js .trust.in .trust__item:nth-child(3){transition-delay:.16s}
html.js .trust.in .trust__item:nth-child(4){transition-delay:.24s}
@media(max-width:768px){
  .trust__row{flex-direction:column;gap:10px;padding:18px var(--pad)}
  .trust__item+.trust__item::before{display:none} /* colonne : pas de séparateur */
}

/* ===== Flotte / types de navires (cartes navy premium, écho des cartes services) ===== */
.fleet{background:var(--cream-h);padding:clamp(80px,11vw,140px) 0}
.fleet__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(36px,5vw,56px)}
.fleet__card{position:relative;overflow:hidden;background:var(--navy);border:1px solid rgba(196,154,58,.24);border-radius:18px;padding:clamp(28px,2.6vw,38px) clamp(24px,2.2vw,32px) clamp(30px,2.6vw,40px);
  box-shadow:0 24px 60px -38px rgba(7,17,32,.55);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.fleet__card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),transparent 72%)}
.fleet__card:hover{transform:translateY(-6px);box-shadow:0 34px 80px -36px rgba(7,17,32,.8);border-color:rgba(196,154,58,.5)}
.fleet__num{position:absolute;top:20px;right:22px;font-family:var(--serif);font-weight:600;font-size:clamp(38px,3.4vw,50px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(196,154,58,.48);pointer-events:none}
.fleet__ico{width:64px;height:64px;margin-bottom:20px;color:var(--gold);transition:transform .5s var(--ease)}
.fleet__ico svg,.fleet__ico .ico{width:100%;height:100%;display:block;overflow:visible;transition:filter .4s var(--ease)}
.fleet__card:hover .fleet__ico{transform:translateY(-4px) scale(1.06)}
/* lueur portée par le <svg> et non par chaque tracé : un seul filtre à composer, et
   ça marche aussi bien sur les icônes en remplissage que sur les navires en trait */
.fleet__card:hover .fleet__ico svg,.fleet__card:hover .fleet__ico .ico{filter:drop-shadow(0 0 6px rgba(212,175,55,.55))}
.fleet__t{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.8vw,24px);color:var(--cream);margin-bottom:10px}
.fleet__d{font-family:var(--sans);font-size:15px;line-height:1.65;color:rgba(244,235,217,.78);font-weight:400}
.fleet__range{margin-top:14px;padding-top:12px;border-top:1px solid rgba(212,175,55,.22);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(212,175,55,.85);line-height:1.5}
@media(max-width:980px){.fleet__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fleet__grid{grid-template-columns:1fr}}

/* ===== Process en 4 étapes ===== */
.process{background:var(--navy);padding:clamp(82px,11vw,140px) 0;position:relative;overflow:hidden}
.process .section-title,.process .eyebrow{color:var(--cream)}
.process__steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(40px,5vw,60px);counter-reset:none;position:relative}
/* route pointillée tracée au scroll (JS pose --pline:0→1 ; sans JS/reduce elle reste visible) */
.process__steps::before{content:"";position:absolute;top:30px;left:8%;right:8%;height:2px;
  background-image:repeating-linear-gradient(90deg,rgba(212,175,55,.6) 0 8px,transparent 8px 16px);
  transform:scaleX(var(--pline,1));transform-origin:left;transition:transform 1.8s var(--ease) .15s}
/* mini-navire qui suit la route de la demande à la livraison */
.process__step{position:relative;padding-top:8px}
.process__num{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border:1px solid rgba(212,175,55,.5);border-radius:50%;background:var(--navy);font-family:var(--serif);font-weight:600;font-size:24px;color:var(--gold);margin-bottom:22px;position:relative;z-index:1}
.process__t{font-family:var(--serif);font-weight:600;font-size:clamp(20px,1.9vw,25px);color:var(--cream);margin-bottom:10px}
.process__d{font-family:var(--sans);font-size:15px;line-height:1.68;color:rgba(244,235,217,.74);font-weight:400}
@media(max-width:900px){.process__steps{grid-template-columns:repeat(2,1fr);gap:34px 24px}.process__steps::before{display:none}}
@media(max-width:480px){.process__steps{grid-template-columns:1fr}}

/* ===== Hover unifié des cartes services (stack) ===== */
.stack__card{transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.stack__card:hover{box-shadow:0 34px 72px -32px rgba(0,0,0,.68);transform:translateY(-5px)}
.stack__card:hover::before{height:4px;background:linear-gradient(90deg,var(--gold),transparent 80%)}
/* lien "Demander une cotation" des cartes services (a11y : vrai lien, pas un role=button)
   margin-top:auto → dans la grille à hauteurs égales, les 6 liens s'alignent sur la même ligne */
.stack__link{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:auto;padding-top:10px;position:relative;z-index:8;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  padding-bottom:3px;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;transition:background-size .45s var(--ease)}
.stack__link:hover{background-size:100% 1px}
.stack__link span{transition:transform .4s var(--ease)}
.stack__card:hover .stack__link span{transform:translate(3px,-2px)}
.stack__link:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ===== Bouton flottant (devis) ===== */
.fab{position:fixed;right:24px;bottom:24px;z-index:80;display:inline-flex;align-items:center;gap:0;
  background:var(--navy-deep);color:var(--gold);border:1px solid rgba(212,175,55,.55);border-radius:16px;padding:15px;
  box-shadow:inset 0 0 0 3px rgba(212,175,55,.14),0 14px 34px -10px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s,background .3s,gap .4s var(--ease),padding .4s var(--ease)}
.fab.show{opacity:1;visibility:visible;transform:none}
.fab svg,.fab .ico{width:24px;height:24px;flex:none}
.fab__label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .4s var(--ease),opacity .3s var(--ease),margin .4s var(--ease)}
.fab:hover{background:var(--navy);border-color:var(--gold);gap:10px}
.fab:hover .fab__label{max-width:120px;opacity:1;margin-left:2px}
.fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:768px){.fab{display:none}}

/* ===== Barre CTA mobile ===== */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:79;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,17,32,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(212,175,55,.2);
  transform:translateY(110%);transition:transform .45s var(--ease)}
.cta-bar.show{transform:none}
.cta-bar .btn{width:100%;justify-content:center}
@media(max-width:768px){.cta-bar{display:block}}
@media(prefers-reduced-motion:reduce){.fab,.cta-bar{transition:none}}

/* ===== Design system « Nuit + Heritage » ===== */
/* Sections claires : or chaud (les sections navy gardent l'or vif #D4AF37) */
.manifesto,.stack,.fleet,.about,.qhse,.wh{--gold:var(--gold-warm);--gold-deep:var(--gold-warm-deep)}
/* Pictos inline : l'or structurel suit le thème de la section (l'accent clair #EBC85A reste) */
.stack [stroke="#D4AF37"],.fleet [stroke="#D4AF37"]{stroke:var(--gold)}
.stack [fill="#D4AF37"],.fleet [fill="#D4AF37"]{fill:var(--gold)}

/* ===== Sonar du siège (carte présence) ===== */
.sonar__ring{fill:none;stroke:var(--gold);stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;animation:sonar 5.2s linear infinite}
.sonar__ring--2{animation-delay:2.6s}
@keyframes sonar{0%{transform:scale(.35);opacity:.7}70%{opacity:.16}100%{transform:scale(3.2);opacity:0}}
.sonar__sweep{fill:rgba(212,175,55,.13);transform-box:view-box;transform-origin:784.3px 156.1px;animation:sweep 7s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}

/* ===== Coordonnées du siège (footer, détail de connaisseur) ===== */
.footer__gps{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:rgba(244,235,217,.38)}

/* ===== Horloge du siège (footer) ===== */
.footer__clock{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--gold)}
.footer__clock i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:clockpulse 2.4s var(--ease) infinite}
@keyframes clockpulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Chorégraphie Awwwards ===== */
/* 1 · titres révélés ligne par ligne (masques) — état initial posé par GSAP, pas par CSS (no-JS safe) */
.tline{display:block;overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}
.tline__in{display:block}
/* 4 · manifeste : chaque mot monte d'un masque */
.manifesto__statement .wm{display:inline-block;overflow:clip;vertical-align:bottom}
/* 5 · footer rideau : révélé SOUS le contact (gaté html.js, la marge est posée par JS) */
html.js .footer{position:fixed;left:0;right:0;bottom:0;z-index:1}
html.js main{position:relative;z-index:2}
html.js .trust,html.js .hero{position:relative;z-index:2}
/* le footer fixe occupe tout l'écran derrière la page : une section à fond d'image doit rester opaque
   tant que l'image n'est pas peinte (saut direct vers #contact, réseau mobile lent) */
.hero,.stats,.contact{background-color:var(--navy-deep)}
/* 7 · menu mobile : rideau navy + liens chorégraphiés */
.menu-overlay{clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease),opacity .5s var(--ease),visibility .65s}
.menu-overlay.open{clip-path:inset(0 0 0% 0)}
.menu-overlay__links{overflow:clip}
.menu-overlay__links a{transform:translateY(44px)}
/* 8 · nav : lettres qui roulent au survol */
.nav__menu a .roll{display:inline-block;overflow:clip;height:1.25em;vertical-align:bottom}
.nav__menu a .roll i{display:block;font-style:normal;transition:transform .45s var(--ease)}
.nav__menu a .roll i:last-child{color:var(--gold)}
.nav__menu a:hover .roll i{transform:translateY(-100%)}
/* 8b · boutons : remplissage or qui monte */
.btn--pill,.btn--ghost{position:relative;overflow:hidden;isolation:isolate}
.btn--pill::before,.btn--ghost::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--gold-deep);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn--pill:hover::before,.btn--ghost:hover::before{transform:scaleY(1)}
.btn--pill:hover{color:var(--cream);border-color:var(--gold-deep)}
.btn--ghost:hover{background:transparent;border-color:var(--gold-deep)}
/* 9 · frontières en vagues : une LANGUETTE de 72px (couleur de la section précédente) mord dans la section.
   Seule la languette est masquée (repaint minuscule) — jamais la section entière (perf) ; --wx = ondulation au scroll */
.sec-overlap{position:relative;z-index:2;--wx:0px}
.sec-overlap::before{content:"";position:absolute;top:-1px;left:0;right:0;height:72px;z-index:3;pointer-events:none;
  background:var(--wave-c,var(--navy-deep));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 72'%3E%3Cpath d='M0 0 H900 V38 Q788 66 675 38 Q562 10 450 38 Q338 66 225 38 Q112 10 0 38 Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 72'%3E%3Cpath d='M0 0 H900 V38 Q788 66 675 38 Q562 10 450 38 Q338 66 225 38 Q112 10 0 38 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-position:var(--wx) 0;mask-position:var(--wx) 0;
  -webkit-mask-size:900px 72px;mask-size:900px 72px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}
/* couleur de la languette = fond de la section PRÉCÉDENTE */
.manifesto.sec-overlap{--wave-c:var(--navy-deep)}   /* après la bande réassurance */
.stats.sec-overlap{--wave-c:var(--cream-h)}          /* après À propos */
.qhse.sec-overlap{--wave-c:var(--navy-deep)}         /* après Présence */
.wh.sec-overlap{--wave-c:var(--navy)}               /* après Process */
.contact.sec-overlap{--wave-c:var(--cream-h)}        /* après FAQ */

/* ===== Océan vivant : houle dorée qui traverse tout le site (transform-only, composité) ===== */
.ocean{position:fixed;inset:0;z-index:54;pointer-events:none;overflow:hidden}
.ocean i{position:absolute;left:-1200px;right:-1200px;height:120px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120'%3E%3Cpath d='M0 60 Q 150 24 300 60 T 600 60' fill='none' stroke='%23D4AF37' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x;
  background-size:600px 120px;opacity:.055;animation:oceanDrift 30s linear infinite}
.ocean i:last-child{top:64%;opacity:.04;animation-duration:44s;animation-direction:reverse;background-size:820px 120px}
.ocean i:first-child{top:30%}
@keyframes oceanDrift{to{transform:translateX(600px)}}

@media(max-width:1023px){.ocean{display:none}}

/* ===== Jauge de progression du voyage (hero, pendant le scrub) ===== */
.hero__gauge{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:2px;height:132px;z-index:3;
  background:rgba(11,26,43,.22);box-shadow:0 0 0 1px rgba(244,235,217,.12)}
.hero__gauge span{display:block;width:100%;height:100%;background:var(--gold-deep);transform:scaleY(0);transform-origin:top}
@media(max-width:767px){.hero__gauge{display:none}} /* téléphone : la vidéo joue seule, pas de scrub */

/* ===== HUD de navigation (hero, pendant le voyage scrubé) ===== */
.hero__hud{position:absolute;left:clamp(20px,4vw,56px);bottom:34px;z-index:3;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--navy);font-weight:600;
  text-shadow:0 1px 8px rgba(244,235,217,.55);white-space:nowrap}
@media(max-width:767px){.hero__hud{display:none}}

/* ===== Route → cotation (carte présence interactive) ===== */
.map__hit{fill:transparent;cursor:pointer;pointer-events:all}
/* toucher : hits élargis sur les implantations isolées (Cameroun/Gabon restent à 14 — déjà mitoyens) */
@media(pointer:coarse){.map__hit[data-zone="france"],.map__hit[data-zone="dubai"]{r:26px}}
.port.sel{filter:drop-shadow(0 0 12px var(--gold)) drop-shadow(0 0 4px var(--gold))}
.route--custom{stroke:var(--gold);stroke-width:2.2;stroke-dasharray:none;opacity:1;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.55))}
.zone{cursor:pointer}
.zone:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.routecta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:16px;align-items:center;background:rgba(7,17,32,.88);border:1px solid rgba(212,175,55,.45);
  border-radius:60px;padding:8px 10px 8px 24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.routecta[hidden]{display:none}
.routecta__route{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--cream);text-transform:uppercase;white-space:nowrap}
.routecta .btn{padding:10px 12px 10px 20px;font-size:13px}
.map__hint{max-width:720px;margin:0 auto clamp(24px,3vw,40px);text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,235,217,.6)}
@media(max-width:600px){
  .routecta{width:max-content;max-width:94%;padding:7px 8px 7px 16px;gap:10px}
  .routecta__route{font-size:11px}
}

/* ===== Lettrine du manifeste (même police, même couleur : seule la taille change) ===== */

/* ===== Services : hover — photo qui s'approche + numéro qui s'allume ===== */
/* on zoome l'IMAGE dans son cadre, pas le cadre : sinon le bord fractionnaire du media
   ressort de la zone couverte par le body et le liseré d'image réapparaît au survol */
.stack__media img{transition:transform .8s var(--ease)}
.stack__card:hover .stack__media img{transform:scale(1.07)}
.stack__num{transition:-webkit-text-stroke-color .5s var(--ease),color .5s var(--ease)}
.stack__card:hover .stack__num{-webkit-text-stroke-color:var(--gold);color:rgba(196,154,58,.12)}

/* ===== Flotte : silhouette du navire en filigrane au survol ===== */
.fleet__wm{position:absolute;right:-22px;bottom:-26px;width:170px;height:170px;pointer-events:none;
  opacity:0;transform:translateY(12px) rotate(-4deg);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fleet__wm svg,.fleet__wm .ico{width:100%;height:100%;display:block}
.fleet__card:hover .fleet__wm{opacity:.1;transform:none}

/* ===== Présence : heure locale de chaque implantation ===== */
.zone__time{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold)}

/* ===== Formulaire : confirmation inline (envoi AJAX) ===== */
.quote__done{text-align:center;padding:34px 10px 20px;color:var(--cream)}
.quote__done svg,.quote__done .ico{width:58px;height:58px;color:var(--gold);margin:0 auto 20px;display:block}
.quote__done h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,32px);margin-bottom:12px}
.quote__done p{font-size:15.5px;line-height:1.65;color:rgba(244,235,217,.8);max-width:40ch;margin:0 auto}

/* ===== Filigrane compas (process) ===== */
.process__wm{position:absolute;right:-5%;top:50%;width:clamp(320px,36vw,560px);height:auto;opacity:.07;pointer-events:none;transform:translateY(-50%);z-index:0}
.process>.container{position:relative;z-index:1}


/* ═══ ABOUT · ornements éditoriaux (guillemet dessiné + sceau compas) ═══ */
.about__quote-mark{position:absolute;top:16px;left:38px;width:clamp(40px,4.4vw,54px);height:auto;color:var(--gold);pointer-events:none;overflow:visible}
.about__quote-mark path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:miter}
html.js .about__quote-mark path{stroke-dasharray:1;stroke-dashoffset:1}
html.js .about__media.in .about__quote-mark path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
html.js .about__media.in .about__quote-mark path:nth-of-type(2){transition-delay:.14s}
.about__quote{position:relative;z-index:1}
.about__seal{display:block;width:clamp(48px,5vw,58px);height:auto;margin:6px 0 26px;filter:drop-shadow(0 8px 16px rgba(11,26,43,.18))}
html.js .about__seal{opacity:0;transform:scale(.86);transition:opacity .8s var(--ease) .3s,transform .9s var(--ease) .3s}
html.js .about__text.in .about__seal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .about__quote-mark path{stroke-dashoffset:0!important}html.js .about__seal{opacity:1!important;transform:none!important}}

/* ═══ PRÉSENCE · heure au survol d'un port + distance indicative ═══ */
.map__tip{position:fixed;z-index:120;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--gold);background:rgba(7,17,32,.92);border:1px solid rgba(212,175,55,.45);border-radius:6px;padding:5px 10px;white-space:nowrap;opacity:0;transition:opacity .18s var(--ease);box-shadow:0 10px 30px -12px rgba(0,0,0,.75)}
.map__tip::after{content:"";position:absolute;left:50%;top:100%;width:7px;height:7px;margin-left:-4px;transform:translateY(-4px) rotate(45deg);background:rgba(7,17,32,.92);border-right:1px solid rgba(212,175,55,.45);border-bottom:1px solid rgba(212,175,55,.45)}
.map__tip.show{opacity:1}
.routecta__info{display:flex;flex-direction:column;gap:2px;line-height:1.12}
.routecta__dist{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.routecta__dist:empty{display:none}
@media(max-width:600px){.routecta__dist{font-size:10px}}

/* ═══ CHIFFRES · odomètre + liseré or de la crête stats ═══ */
.stat__num .odo{display:inline-flex;align-items:flex-start;justify-content:center;line-height:1;vertical-align:top}
.stat__num .odo__cell{display:block;height:1em;line-height:1;overflow:hidden;text-align:center}
.stat__num .odo__digit{width:1ch}
.stat__num .odo__sym{padding:0 .04em}
.stat__num .odo__reel{display:block;transform:translateY(0);transition:transform 1.4s var(--ease);will-change:transform;backface-visibility:hidden}
.stat__num .odo__reel > span{display:block;height:1em;line-height:1;text-align:center}
.stat__num-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.stat__num .odo__reel{transition:none}}
.stats.sec-overlap::after{content:"";position:absolute;top:-1px;left:0;right:0;height:72px;z-index:4;pointer-events:none;background:var(--gold);opacity:.9;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 72'%3E%3Cpath d='M900 38 Q788 66 675 38 Q562 10 450 38 Q338 66 225 38 Q112 10 0 38' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 72'%3E%3Cpath d='M900 38 Q788 66 675 38 Q562 10 450 38 Q338 66 225 38 Q112 10 0 38' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");-webkit-mask-position:var(--wx) 0;mask-position:var(--wx) 0;-webkit-mask-size:900px 72px;mask-size:900px 72px;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x}

/* ═══ COTATION · récap de bord + signature d'arrivée (liner) ═══ */
.quote__recap{font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.04em;color:rgba(244,235,217,.82);margin:0 0 22px;padding:12px 16px;border-left:2px solid var(--gold);background:rgba(212,175,55,.05);border-radius:0 8px 8px 0;word-break:break-word}
.quote{position:relative;overflow:hidden}
.quote__done{position:relative;z-index:1}

/* ═══ SERVICES · carrousel mobile ═══
   (le compteur sticky « 01 / 06 » a été retiré avec l'empilement : dans une grille
   3 × 2, il n'y a plus de « carte active » à suivre) */
@media(max-width:767px){
  .stack__list{display:flex;gap:14px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px clamp(16px,6vw,32px) 8px;scroll-padding-left:clamp(16px,6vw,32px);scrollbar-width:none}
  .stack__list::-webkit-scrollbar{display:none}
  .stack__list > .stack__card{flex:0 0 86%;margin:0;scroll-snap-align:center;transform:none!important}
  .stack__list > .stack__card::after{opacity:0!important}
  .stack__media img{transform:none!important}
  .stack__dots{display:flex;justify-content:center;gap:10px;margin:18px auto 0;padding:0}
  .stack__dot{width:8px;height:8px;padding:8px;box-sizing:content-box;border:0;border-radius:50%;background:rgba(11,26,43,.24);cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease);-webkit-tap-highlight-color:transparent}
  .stack__dot.is-active{background:var(--gold);transform:scale(1.35)}
  /* zone tactile 24×24 (a11y target-size), point visible 8 px : le clip vient APRÈS les raccourcis background qui le réinitialisent */
  .stack__dot,.stack__dot.is-active{background-clip:content-box}
  .stack__dot:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
}

/* ═══ Vagues retirées (demande Clara 2026-07-14) : houle dorée + bords festonnés + liseré crête ═══ */
.ocean{display:none!important}
.sec-overlap::before{display:none!important}
.stats.sec-overlap::after{display:none!important}
/* numéro fantôme QHSE : le texte vit dans le pseudo-élément (purement décoratif, aria-hidden, hors audit de contraste) */
.qhse .pillar__ghost::after{content:attr(data-ghost)}

/* ===== MOBILE OPTIMISÉ · téléphone ≤ 767 px (audit UX du 26/08/2026) =====
   Le desktop ne bouge pas : tout est sous media query, ajouté en fin de feuille pour l'emporter dans la cascade. */
@media(max-width:767px){
  /* nav visible dès la 1re seconde sur le hero : voile léger pour garder le contraste sur la vidéo claire */
  .nav:not(.scrolled){background:rgba(7,17,32,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* respiration recalculée pour 390 px (multiples de 8) : planchers desktop jamais pensés pour un écran 3× plus petit */
  .manifesto{padding:64px 0 40px}
  .fleet,.qhse,.presence,.wh{padding:56px 0}
  .contact{padding:64px 0}
  /* flotte : cartes plus compactes */
  .fleet__card{padding:22px 20px 26px}
  .fleet__grid{gap:16px}
  /* lisibilité : plancher 12 px pour les libellés mono */
  .map__cue{font-size:12px}
  .fleet__range,.wh__k{font-size:12.5px}
  .zone__hq,.quote__count{font-size:12px}
  .wh__figlabel{font-size:12px}
  /* carte : les étiquettes sortent du cadre au zoom téléphone → masquées (la liste des implantations porte les noms) ;
     mode d'emploi AVANT la carte ; 6 zones tactiles homogènes */
  .map__label{display:none}
  .presence .container{display:flex;flex-direction:column}
  .presence .section-head{order:-2}
  .presence .map__hint{order:-1}
  .map__hit{r:26px}
  /* carrousel entrepôt : aperçu de la photo suivante (affordance de swipe), pastilles et flèches au doigt */
  .wh__slide{flex:0 0 88%;width:88%}
  .wh__track{scroll-padding-left:16px;gap:10px}
  .wh__dot{width:8px;height:8px;padding:8px;box-sizing:content-box}
  .wh__dot,.wh__dot.is-active{background-clip:content-box}
  .wh__arw{width:44px;height:44px}
  /* footer : zone tactile 44 px sans toucher au soulignement */
  .footer__col a{position:relative}
  .footer__col a::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  /* zones tactiles 44 px (audit mobile du 29/09) : zone élargie par pseudo-élément, rendu inchangé */
  .footer__bottom a,.stack__link{position:relative}
  .footer__bottom a::before{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
  .stack__link::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-12px}
  .contact__alt{padding:13px 0;margin-top:15px}
  .contact__alt--tel{margin-top:-14px}
  .stack__dots{gap:0}
  .stack__dot{padding:18px}
  /* plancher de lisibilité 12 px */
  .footer__credit{font-size:12px}
}

/* ===== VERSION MOBILE ADAPTÉE · téléphone ≤ 767 px (29/09/2026, demande Clara) =====
   Moins de défilement, lecture au pouce. Aucun texte modifié : on replie et on réorganise.
   Desktop et iPad inchangés. */
@media(max-width:767px){
  /* titres de section recalés pour 390 px */
  .section-title{font-size:clamp(26px,7.4vw,32px)}
  .section-head{margin-bottom:28px}

  /* FLOTTE : carrousel à balayer (même grammaire que Services, pastilles créées par main.js) */
  .fleet{padding-bottom:24px}
  .fleet__grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 8px;scroll-padding-left:var(--pad);scrollbar-width:none}
  .fleet__grid::-webkit-scrollbar{display:none}
  .fleet__grid > .fleet__card{flex:0 0 84%;scroll-snap-align:center}
  /* la révélation au scroll ne se déclenche pas pour les cartes hors écran à droite */
  html.js .fleet__card.reveal{opacity:1;transform:none}
  .fleet__card:hover{transform:none}

  /* ABOUT : photo moins haute, même respiration que les sections voisines */
  .about{padding:56px 0}
  .about__shell img{height:280px}
  /* la photo couleur n'apparaît qu'au survol souris : sur téléphone on ne charge que la version teintée
     (image lazy en display:none = jamais téléchargée), qui reprend sa place dans le flux */
  .about__shell img:not(.about__ph--duo){display:none}
  .about__ph--duo{position:static;display:block;width:100%;object-fit:cover}
  .about__shell:hover .about__ph--duo{opacity:1}
  /* padding haut = place des chevrons décoratifs (absolus, top 16 px, ~30 px de haut) : ils ne chevauchent plus la citation */
  .about__shell figcaption{padding:58px 24px 24px}
  .about__quote-mark{left:24px}
  .about__grid{gap:32px}

  /* QHSE : lignes repliables (picto + titre + chevron), texte au toucher */
  .qhse__grid{gap:24px}
  /* align-items:start : à l'ouverture, le picto reste en face du titre (il est aussi haut que la ligne de 44 px) */
  .qhse .pillar{grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:14px 0}
  .qhse .pillar__num,.qhse .pillar__ghost{display:none}
  .qhse .pillar__ico{width:40px;height:40px;margin-top:2px}
  .qhse .pillar__body h3{margin:0;font-size:20px}
  .pillar.is-collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pillar__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;
    padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
  .pillar__toggle::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
    transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease)}
  .pillar.is-open .pillar__toggle::after{transform:translateY(2px) rotate(-135deg)}
  .pillar__toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
  .pillar.is-collapsible .pillar__body p{display:none;margin-top:8px}
  .pillar.is-collapsible.is-open .pillar__body p{display:block}

  /* MÉTHODE : frise verticale compacte (pastille à gauche, filet pointillé qui relie les étapes) */
  .process{padding:56px 0}
  .process__steps{grid-template-columns:1fr;gap:22px;margin-top:0}
  .process__step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding-top:0}
  .process__step:not(:last-child)::after{content:"";position:absolute;left:21px;top:48px;bottom:-20px;width:2px;
    background-image:repeating-linear-gradient(180deg,rgba(212,175,55,.5) 0 6px,transparent 6px 12px)}
  .process__num{grid-row:span 2;width:44px;height:44px;font-size:18px;margin:0}
  .process__t{margin:8px 0 4px;font-size:20px}
  .process__d{font-size:15px;line-height:1.6}
  .process__wm{display:none}

  /* PRÉSENCE : carte moins haute, liste des implantations resserrée */
  .map{height:44vh;min-height:300px;margin:0 0 24px}
  .zone__row{padding:12px 18px;gap:6px 16px}
  .zone h3{font-size:22px}
  .zone__meta{gap:10px}
  .zone__ports{font-size:13px}
  .zone__hq{margin-top:0}

  /* FOOTER : navigation sur 2 colonnes, respirations réduites */
  .footer{padding-top:48px}
  .footer__top{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:28px}
  .footer__brand,.footer__top > .footer__col:nth-child(2){grid-column:1/-1}
  .footer__logo{height:52px;margin-bottom:12px}
  .footer__top > .footer__col:last-child{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:12px;grid-column:1/-1}
  .footer__top > .footer__col:last-child .footer__h{grid-column:1/-1}
}

/* ===== VERSION APPLI · téléphone ≤ 767 px (30/09/2026, direction A choisie par Clara) =====
   Barre d'onglets fixe, hero court, sections en cartes à balayer, en-têtes alignés à gauche.
   Desktop et iPad : .tabbar et .hero__call masqués, rien d'autre ne change. */
.tabbar,.hero__call{display:none}
@media(max-width:767px){
  /* --- Barre d'onglets --- */
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(7,17,32,.92);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid rgba(212,175,55,.22)}
  .tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:50px;border-radius:12px;
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,235,217,.62);
    -webkit-tap-highlight-color:transparent;transition:color .25s var(--ease),background .25s var(--ease)}
  .tabbar__item .ico{width:22px;height:22px}
  .tabbar__item.is-active{color:var(--gold)}
  .tabbar__item--cta{color:var(--navy-deep);background:var(--gold);margin:4px 2px}
  .tabbar__item--cta.is-active{color:var(--navy-deep)}
  .tabbar__item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
  /* menu ☰ ouvert : la barre d'onglets s'efface (elle passait devant le rideau du menu) */
  .menu-overlay.open ~ .tabbar{opacity:0;visibility:hidden;pointer-events:none}
  .tabbar{transition:opacity .3s var(--ease),visibility .3s}
  /* la barre remplace le bouton « Get a quote » flottant ; le bas de page reste lisible au-dessus d'elle */
  .cta-bar{display:none!important}
  .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .c3c{bottom:calc(72px + env(safe-area-inset-bottom))!important}

  /* --- Hero court : texte en bas à gauche, deux boutons côte à côte --- */
  .hero{min-height:0;height:78svh;justify-content:flex-end;align-items:stretch;text-align:left;padding:0 20px 28px}
  .hero__content{width:100%}
  .hero__logo{width:72px;margin:0 0 18px}
  .hero__title{font-size:clamp(34px,10vw,42px);margin-bottom:14px}
  .hero__sub{margin:0 0 22px;font-size:15px;line-height:1.55;max-width:34ch}
  .hero__cta{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;justify-content:stretch}
  .hero__cta{grid-template-columns:1.7fr 1fr}
  .hero__cta .btn{justify-content:center;min-height:52px;padding:0 14px;border-radius:14px;font-size:13px;letter-spacing:.06em;white-space:nowrap;gap:10px}
  .hero__cta .btn--ghost:not(.hero__call){display:none}
  .hero__call{display:inline-flex;border:1px solid rgba(244,235,217,.5)!important;background:rgba(7,17,32,.35)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .hero__overlay{opacity:1}

  /* --- Réassurance : pastilles à balayer --- */
  .trust__row{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;padding:14px 20px;scrollbar-width:none}
  .trust__row::-webkit-scrollbar{display:none}
  .trust__item{flex:0 0 auto;padding:8px 14px;border:1px solid rgba(212,175,55,.35);border-radius:999px;font-size:11.5px;letter-spacing:.08em}

  /* --- En-têtes de section façon appli : à gauche, compacts --- */
  .section-head,.section-head--center,.stack__head{text-align:left;margin-left:0;margin-right:0;margin-bottom:18px}
  .stack__head{padding:0 20px}
  .section-head .eyebrow,.stack__head .eyebrow,.about__text .eyebrow,.qhse__aside .eyebrow{font-size:11px;letter-spacing:.18em;margin-bottom:8px}
  .section-title,.stack__title{font-size:26px;line-height:1.15}
  .section-head .section-title::after,.section-head--center .section-title::after{display:none}
  .section-head .eyebrow::after,.stack__head .eyebrow::after{display:none}
  .stack__head,.section-head{position:relative}

  /* --- Manifeste : carte citation --- */
  .manifesto{padding:32px 20px}
  .manifesto__inner{background:var(--navy);border-radius:20px;padding:26px 22px}
  .manifesto__statement{font-size:21px;line-height:1.4;color:var(--cream)}
  .manifesto .eyebrow--gold{color:var(--gold)}
  .manifesto__rule{display:none}

  /* --- Carrousels : cartes plus étroites, la suivante dépasse (invite au balayage) --- */
  .services{padding:28px 0 8px}
  .stack__list > .stack__card{flex:0 0 78%}
  .fleet{padding:32px 0 16px}
  .fleet__grid > .fleet__card{flex:0 0 78%}

  /* --- About : carte photo + texte --- */
  .about{padding:32px 0}
  .about__grid{gap:18px}
  .about__media{order:-1}
  .about__shell img{height:210px}
  .about__seal{display:none}

  /* --- Chiffres : tuiles 2 × 2 --- */
  .stats{padding:32px 0}
  .stats__grid{gap:10px;padding:0 20px}
  .stat{background:rgba(244,235,217,.05);border:1px solid rgba(212,175,55,.2);border-radius:16px;padding:18px 8px}
  .stat__num{font-size:40px}
  .stat__label{font-size:11px;margin-top:6px}
  .stats__line{display:none}

  /* --- Mot géant : retiré --- */
  .mega{display:none}

  /* --- Présence, engagements, méthode : cartes arrondies sur fond de section --- */
  .presence{padding:32px 0}
  .zones{border-radius:18px}
  .qhse{padding:32px 0}
  .qhse__list{background:rgba(255,255,255,.35);border-radius:18px;padding:4px 16px}
  .qhse .pillar:first-child{border-top:0}
  .qhse .pillar__rule{display:none}
  .qhse__intro{font-size:15px}
  .process{padding:32px 0}
  .process__steps{background:rgba(244,235,217,.04);border:1px solid rgba(212,175,55,.18);border-radius:18px;padding:20px 16px}

  /* --- Contact --- */
  .contact{padding:40px 0 32px}
  .contact__emblem{width:56px;margin-bottom:10px}
}

/* ===== ÉCRANS BAS · téléphone tenu à l'horizontale (≤ 500 px de haut), 30/09/2026 =====
   Le hero était calibré pour la hauteur d'un téléphone vertical : à l'horizontale, le titre passait
   sous la barre du haut (version appli) ou le texte sortait par le bas (mise en page tablette). */
@media(max-height:500px) and (orientation:landscape){
  /* barre du haut compacte (88 px → ~50 px) : elle mangeait plus d'un quart de l'écran */
  .nav,.nav.scrolled{padding-top:8px;padding-bottom:8px}
  .nav__logo img,.nav.scrolled .nav__logo img{height:30px}
  .hero{height:auto;min-height:100svh;justify-content:center;padding-top:60px;padding-bottom:16px}
  .hero__logo{width:56px;margin-bottom:8px}
  /* titre sur une ligne : la largeur ne manque pas, la hauteur si */
  .hero__title{font-size:clamp(26px,4.2vw,38px);margin-bottom:8px}
  .hero__title .line{display:inline}
  .hero__title .line + .line::before{content:" "}
  .hero__sub{font-size:13.5px;line-height:1.45;margin:0 auto 12px;max-width:60ch;text-align:center}
  .hero__cta{margin-inline:auto}
  .hero__cta .btn{min-height:44px}
}
@media(max-width:767px) and (max-height:500px) and (orientation:landscape){
  /* version appli à l'horizontale : barre d'onglets en une ligne compacte, bas de page dégagé d'autant */
  .hero{padding-bottom:60px}
  .hero__logo{display:none}
  .hero__cta{max-width:420px}
  .tabbar{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .tabbar__item{flex-direction:row;gap:8px;min-height:40px}
  .tabbar__item .ico{width:18px;height:18px}
  .c3c{bottom:calc(56px + env(safe-area-inset-bottom))!important}
}