/* =========================================================================
   EWT — vitrine
   Blanc franc dominant, zones noires en ponctuation, un seul accent or.
   Palette neutre : pas de crème, pas de beige.
   Architecture et effets repris de Khla Lodge.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --topbar-h:34px;
  /* fonds */
  --white:    #FFFFFF;   /* fond principal */
  --grey-50:  #F6F6F7;   /* sections alternées */
  --grey-100: #ECECEE;   /* aplats, vignettes vides */

  /* zones sombres — chacune a son emploi :
     noir  = bandeau haut, bloc espace pro
     vert  = sections de fond (la couleur de la maison)
     bleu  = pied de page et bandeau bancaire */
  --black:    #0B0C0E;
  --black-2:  #131519;
  --black-3:  #1C1F25;
  --green:    #14402C;
  --green-2:  #1B5138;
  --green-lt: #2E7A55;
  --navy:     #142B4D;
  --navy-2:   #1C3A64;

  /* texte */
  --text:     #16181C;
  --text-soft:#585C64;
  --text-mute:#8B8F97;

  /* accents */
  --gold:     #C9A227;   /* signaux, onglet actif, chiffres cles */
  --gold-dk:  #927509;
  --purple:   #4A2E63;   /* numerotation et petites marques, avec parcimonie */
  --purple-lt:#7A5A96;
  --rust:     var(--green);   /* les surtitres passent au vert */

  /* traits */
  --line:     rgba(11,12,14,.12);
  --line-2:   rgba(11,12,14,.24);
  --line-lt:  rgba(11,12,14,.06);
  --line-inv: rgba(255,255,255,.14);

  /* Polices reprises de Khla Lodge : Julius Sans One en titrage, Montserrat
     en courant. Elles portent mieux le registre que Fraunces/Inter. */
  --ff-display:"Julius Sans One","Optima","Segoe UI",sans-serif;
  --ff-sans:   "Montserrat","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:   "IBM Plex Mono",ui-monospace,Consolas,monospace;

  --max: 1240px;
  --gut: clamp(20px,4vw,56px);
  --r: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
/* Pas de clipping sur html/body : combiné à position:sticky il empêche la
   peinture du scroll-hero. Le débordement des cartes « converge » est coupé
   section par section (.section / .strip). */
body{
  background:var(--white); color:var(--text);
  font-family:var(--ff-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--gold); color:var(--black) }

.wrap{ width:min(var(--max),100% - var(--gut)*2); margin-inline:auto }

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-display); font-weight:400; line-height:1.12;
  letter-spacing:-.015em; color:var(--black);
}
.h-xl{ font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.04 }
.h-lg{ font-size:clamp(1.8rem,3.6vw,2.9rem) }
.h-md{ font-size:clamp(1.4rem,2.4vw,2rem) }
.eyebrow{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rust); font-weight:500;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--rust); flex:none }
.serif-it{ font-style:italic; color:var(--gold-dk) }
.lead{ font-size:clamp(.98rem,1.15vw,1.06rem); color:var(--text-soft); max-width:60ch }

.section{ padding:clamp(64px,9.5vh,124px) 0; position:relative; overflow-x:clip }
.section--grey{ background:var(--grey-50) }
.section--deep{ background:var(--black); color:rgba(255,255,255,.78) }
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{ color:#fff }
.section--deep .lead{ color:rgba(255,255,255,.62) }
.section--deep .eyebrow{ color:var(--gold) }
.section--deep .eyebrow::before{ background:var(--gold) }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px;
  border:1px solid var(--black); border-radius:var(--r); cursor:pointer;
  background:var(--black); color:#fff;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; transition:.3s var(--ease-out);
}
.btn:hover{ background:transparent; color:var(--black) }
.btn svg{ width:14px; height:14px; transition:transform .35s var(--ease-out) }
.btn:hover svg{ transform:translateX(4px) }
.btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--text) }
.btn--ghost:hover{ background:var(--black); border-color:var(--black); color:#fff }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--black) }
.btn--gold:hover{ background:transparent; color:var(--gold-dk); border-color:var(--gold) }
.btn--light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff }
.btn--light:hover{ background:#fff; border-color:#fff; color:var(--black) }
.btn--sm{ padding:10px 18px; font-size:.66rem }

/* ---------- Bandeau défilant (zone noire) ---------- */
.topbar{
  /* --topbar-h sert aussi a caler la nav des pages a hero sombre. */
  --topbar-h:34px;
  position:relative; z-index:110; background:var(--black); height:var(--topbar-h);
  display:flex; align-items:center; overflow:hidden;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
}
.ticker{ display:flex; width:max-content; animation:tick 52s linear infinite }
.topbar:hover .ticker{ animation-play-state:paused }
@keyframes tick{ to{ transform:translateX(-50%) } }
.ticker span{ padding:0 24px; color:rgba(255,255,255,.55); white-space:nowrap; display:inline-flex; gap:9px }
.ticker b{ color:rgba(255,255,255,.95); font-weight:500 }
.ticker i{ font-style:normal; color:var(--gold); font-size:.5rem }

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; gap:22px; height:68px }
.logo{ display:flex; align-items:center; gap:11px; flex:none }
.logo__mark{ width:46px; height:auto; flex:none }
.logo__txt{ font-family:var(--ff-display); font-size:1.22rem; line-height:1; color:var(--black) }
.logo__txt small{
  display:block; font-family:var(--ff-mono); font-size:.5rem; font-weight:500;
  letter-spacing:.3em; color:var(--gold-dk); margin-top:5px;
}
.nav__links{ display:flex; gap:2px; margin-left:auto }
.nav__links a{
  position:relative; padding:8px 13px; font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft); transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.nav__links a:hover{ color:var(--black) }
.nav__links a:hover::after{ transform:scaleX(1) }
.nav__actions{ display:flex; align-items:center; gap:10px; flex:none }

/* Sélecteur de langue */
.lang{ position:relative }
.lang__btn{
  display:flex; align-items:center; gap:7px; padding:9px 12px; background:transparent;
  border:1px solid var(--line-2); color:var(--text-soft); border-radius:var(--r);
  cursor:pointer; font-family:var(--ff-mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; transition:.3s;
}
.lang__btn:hover{ border-color:var(--black); color:var(--black) }
.lang__btn svg{ width:10px; height:10px; opacity:.7; transition:transform .3s }
.lang.open .lang__btn svg{ transform:rotate(180deg) }
.lang__menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:172px; z-index:20;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .3s var(--ease-out); box-shadow:0 18px 46px -22px rgba(11,12,14,.36);
}
.lang.open .lang__menu{ opacity:1; visibility:visible; transform:none }
.lang__menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  background:transparent; border:0; border-radius:var(--r); cursor:pointer;
  font-size:.86rem; color:var(--text); text-align:left; transition:background .2s;
}
.lang__menu button:hover{ background:var(--grey-50) }
.lang__menu button[aria-current="true"]{ color:var(--gold-dk); font-weight:600 }
.lang__menu button span{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em;
  color:var(--text-mute); margin-left:auto;
}

.burger{
  display:none; width:40px; height:40px; border:1px solid var(--line-2);
  border-radius:var(--r); background:none; cursor:pointer; place-items:center;
}
.burger i{ display:block; width:16px; height:1.5px; background:var(--black); position:relative; transition:.3s }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--black); transition:.3s;
}
.burger i::before{ top:-5px } .burger i::after{ top:5px }
body.menu-open .burger i{ background:transparent }
body.menu-open .burger i::before{ top:0; transform:rotate(45deg) }
body.menu-open .burger i::after{ top:0; transform:rotate(-45deg) }

/* =========================================================================
   1. SCROLL-HERO — fond blanc, la vignette s'ouvre en plein écran
   ========================================================================= */
.shero{ height:180vh; position:relative; background:var(--white) }
.shero__pin{
  position:sticky; top:0; height:100vh; min-height:580px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--white);
}
.shero__bg{ position:absolute; inset:0; z-index:0; background:var(--white) }
.shero__bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 42%, rgba(255,255,255,.55));
}
.shero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.58; filter:saturate(.85) contrast(1.04) }
.shero__media{
  position:relative; z-index:2; width:300px; height:400px;
  max-width:95vw; max-height:85vh; overflow:hidden; border-radius:var(--r);
  background:var(--grey-100); box-shadow:0 30px 70px -34px rgba(11,12,14,.5);
}
.shero__media img{ width:100%; height:100%; object-fit:cover }
.shero__shade{ position:absolute; inset:0; background:rgba(11,12,14,.10) }
.shero__title{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; gap:.4em; pointer-events:none; z-index:5;
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.1rem,7vw,5.2rem); letter-spacing:-.02em; white-space:nowrap;
  color:var(--black);
  /* Le titre traverse la vignette photo : un halo blanc le garde lisible
     aussi bien sur le fond clair que sur l'image. */
  text-shadow:0 0 3px rgba(255,255,255,.95), 0 2px 28px rgba(255,255,255,.8);
}
.shero__w{ display:inline-block; will-change:transform, opacity }
.shero__hint{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-mute); transition:opacity .2s;
}
.shero__hint svg{ width:16px; height:16px; animation:sheroBounce 1.8s ease-in-out infinite }
@keyframes sheroBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* ---------- 2. Hero-reveal ---------- */
.hreveal{ background:var(--white); padding:clamp(62px,10vh,110px) 0 clamp(46px,6.5vh,74px) }
.hreveal__in{ max-width:700px }
.hreveal h1{ margin:14px 0 0 }
.hreveal p{ margin:22px 0 30px; color:var(--text-soft); font-size:clamp(.98rem,1.2vw,1.08rem); max-width:56ch }
.hreveal__cta{ display:flex; flex-wrap:wrap; gap:13px }

/* ---------- 3. Split + stat-row ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,68px); align-items:center }
.split__media{
  position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--r);
  background:var(--grey-100);
}
.split__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out) }
.split__media:hover img{ transform:scale(1.05) }
.split__badge{
  position:absolute; top:16px; left:16px; z-index:3; background:var(--black); color:#fff;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 12px; border-radius:var(--r);
}
.stat-row{
  display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,44px);
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line);
}
.stat b{
  display:block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.5rem,2.5vw,2rem); color:var(--black); letter-spacing:-.02em;
}
.stat span{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute);
}
.prod__facts{ margin-top:22px; border:1px solid var(--line); border-radius:var(--r) }
.prod__facts div{ padding:14px 18px; display:flex; gap:16px; align-items:baseline; border-bottom:1px solid var(--line-lt) }
.prod__facts div:last-child{ border-bottom:0 }
.prod__facts b{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rust); width:104px; flex:none;
}
.prod__facts span{ font-size:.88rem; color:var(--text-soft) }

/* ---------- Tableau de spécifications ---------- */
.spec{ width:100%; border-collapse:collapse; font-size:.88rem }
.spec tr{ border-bottom:1px solid var(--line-lt) }
.spec tr:first-child{ border-top:1px solid var(--line) }
.spec tr:last-child{ border-bottom:1px solid var(--line) }
.spec td{ padding:12px 16px; vertical-align:top }
.spec td:first-child{ width:40%; color:var(--text-soft) }
.spec td:last-child{ color:var(--black); font-weight:500 }
.spec__note{ font-size:.8rem; color:var(--text-mute); margin-top:16px; line-height:1.7 }

/* ---------- 4. Grille tarifaire ---------- */
.price{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.pcard{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:32px 26px 28px;
  display:flex; flex-direction:column; gap:9px; transition:.4s var(--ease-out);
}
.pcard:hover{ border-color:var(--black); transform:translateY(-4px);
  box-shadow:0 22px 46px -32px rgba(11,12,14,.4) }
.pcard--best{ background:var(--black); border-color:var(--black) }
.pcard--best .pcard__p{ color:#fff }
.pcard--best p{ color:rgba(255,255,255,.7) }
.pcard--best li{ color:rgba(255,255,255,.68) }
.pcard--best ul{ border-top-color:var(--line-inv) }
.pcard--best .pcard__k{ color:var(--gold) }
.pcard--best .pcard__u{ color:rgba(255,255,255,.45) }
.pcard__flag{
  position:absolute; top:-1px; right:-1px; background:var(--gold); color:var(--black);
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border-radius:0 var(--r) 0 var(--r);
}
.pcard__k{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rust) }
.pcard__p{
  font-family:var(--ff-display); font-weight:400; color:var(--black);
  font-size:clamp(2.3rem,3.8vw,3rem); line-height:1; letter-spacing:-.03em;
}
.pcard__p sup{ font-size:.3em; vertical-align:super; opacity:.5; margin-right:5px; letter-spacing:.08em }
.pcard__u{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute) }
.pcard p{ font-size:.86rem; color:var(--text-soft); line-height:1.6 }
.pcard ul{ display:grid; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line-lt) }
.pcard li{ font-size:.79rem; color:var(--text-soft); display:flex; gap:9px }
.pcard li::before{ content:"—"; color:var(--gold); flex:none }

/* ---------- 5. Cartes photo ---------- */
.cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.cardgrid--3{ grid-template-columns:repeat(3,1fr) }
.pcardx{
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); background:#fff; transition:.45s var(--ease-out);
}
.pcardx:hover{ transform:translateY(-4px); border-color:var(--black);
  box-shadow:0 22px 46px -32px rgba(11,12,14,.4) }
.pcardx__ph{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--grey-100) }
.pcardx__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.pcardx:hover .pcardx__ph img{ transform:scale(1.06) }
.pcardx__n{
  position:absolute; top:12px; left:12px; z-index:2; font-family:var(--ff-mono);
  font-size:.6rem; letter-spacing:.14em; background:var(--black); color:#fff;
  padding:5px 9px; border-radius:var(--r);
}
.pcardx__b{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1 }
.pcardx__b h4{ font-size:1.18rem; line-height:1.22 }
.pcardx__b p{ font-size:.85rem; color:var(--text-soft); line-height:1.65 }
.cmeta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--line-lt); font-family:var(--ff-mono); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
}
.cmeta i{ font-style:normal; color:var(--gold) }

/* ---------- 6. Procédure ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 26px; position:relative }
.flow::before{ content:""; position:absolute; top:22px; left:0; right:0; height:1px; background:var(--line) }
.flow__s{ position:relative; padding-bottom:38px }
.flow__n{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--white); border:1px solid var(--line-2); color:var(--black);
  position:relative; z-index:2; font-family:var(--ff-mono); font-size:.7rem;
  transition:.4s var(--ease-out);
}
.section--grey .flow__n{ background:var(--grey-50) }
.flow__s:hover .flow__n{ background:var(--black); color:#fff; border-color:var(--black) }
.flow__s h4{ font-size:1.06rem; margin:18px 0 8px }
.flow__s p{ font-size:.84rem; color:var(--text-soft); line-height:1.65; padding-right:8px }
.tagl{
  display:inline-block; margin-top:11px; font-family:var(--ff-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
  border:1px solid var(--line); border-radius:var(--r); padding:5px 9px;
}

/* ---------- 8. Documents ---------- */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.doci{
  display:flex; align-items:center; gap:14px; padding:18px 20px; font-size:.86rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  color:var(--text-soft); transition:.4s var(--ease-out);
}
.doci:hover{ border-color:var(--black); color:var(--black) }
.doci b{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.12em; color:var(--gold-dk); flex:none }
.section--deep .doci{ background:var(--black-2); border-color:var(--line-inv); color:rgba(255,255,255,.75) }
.section--deep .doci:hover{ border-color:var(--gold); color:#fff }
.section--deep .doci b{ color:var(--gold) }

/* ---------- 9. Réseau ---------- */
.net{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.ent{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; display:flex; flex-direction:column; gap:10px; transition:.4s var(--ease-out);
}
.ent:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -32px rgba(11,12,14,.4) }
.ent--lead{ background:var(--black); border-color:var(--black) }
.ent--lead h3{ color:#fff }
.ent__h{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.ent__cc{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; padding:5px 9px;
  border:1px solid var(--line); border-radius:var(--r); color:var(--text-soft);
}
.ent--lead .ent__cc{ border-color:var(--line-inv); color:var(--gold) }
.ent__tag{
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); margin-left:auto;
}
.ent--lead .ent__tag{ color:var(--gold) }
.ent h3{ font-size:1.14rem; line-height:1.25 }
.ent__loc{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute) }
.ent--lead .ent__loc{ color:rgba(255,255,255,.45) }
.ent__role{ font-size:.85rem; line-height:1.7; color:var(--text-soft) }
.ent--lead .ent__role{ color:rgba(255,255,255,.7) }
.ent__f{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-lt);
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute);
}
.ent--lead .ent__f{ border-color:var(--line-inv); color:rgba(255,255,255,.45) }
.ent__f b{ font-size:.78rem; letter-spacing:.02em; text-transform:none; color:var(--black); font-weight:600 }
.ent--lead .ent__f b{ color:var(--gold) }

/* ---------- Chiffres ---------- */
.figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line) }
.figs div{ background:var(--white); padding:30px 24px }
.section--grey .figs div{ background:var(--grey-50) }
.figs b{
  display:block; font-family:var(--ff-display); font-weight:400; color:var(--black);
  font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.02em;
}
.figs span{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rust) }
.figs p{ font-size:.8rem; color:var(--text-soft); margin-top:10px; line-height:1.6 }

/* ---------- 10. CTA espace pro (zone noire) ---------- */
.procta{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--black); padding:clamp(38px,6vw,68px); color:rgba(255,255,255,.78);
}
.procta::before{
  content:""; position:absolute; inset:0; opacity:.10;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 82% 26%, #000, transparent);
  mask-image:radial-gradient(70% 70% at 82% 26%, #000, transparent);
}
.procta__in{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center }
.procta h2{ color:#fff }
.procta .eyebrow{ color:var(--gold) }
.procta .eyebrow::before{ background:var(--gold) }
.procta__in > div > p{ color:rgba(255,255,255,.68); margin-top:16px; font-size:.96rem; max-width:50ch }
.procta .btn{ background:var(--gold); border-color:var(--gold); color:var(--black) }
.procta .btn:hover{ background:transparent; color:var(--gold) }
.procta__box{
  background:rgba(255,255,255,.05); border:1px solid var(--line-inv);
  border-radius:var(--r); padding:28px;
}
.procta__box h4{
  font-family:var(--ff-mono); font-size:.64rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.procta__box ul{ display:grid; gap:12px; margin-bottom:22px }
.procta__box li{ font-size:.85rem; color:rgba(255,255,255,.76); display:flex; gap:11px }
.procta__box li svg{ width:15px; height:15px; color:var(--gold); flex:none; margin-top:4px }

/* ---------- Avertissement ---------- */
.warn{
  border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r); background:var(--grey-50); padding:22px 24px; display:flex; gap:16px;
}
.section--grey .warn{ background:#fff }
.warn svg{ width:20px; height:20px; color:var(--gold-dk); flex:none; margin-top:2px }
.warn h4{
  font-family:var(--ff-mono); font-size:.62rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:8px;
}
.warn p{ font-size:.82rem; color:var(--text-soft); line-height:1.7 }
.section--deep .warn,.procta .warn{ background:rgba(255,255,255,.05); border-color:var(--line-inv) }
.section--deep .warn h4,.procta .warn h4{ color:var(--gold) }
.section--deep .warn p,.procta .warn p{ color:rgba(255,255,255,.68) }
.section--deep .warn svg,.procta .warn svg{ color:var(--gold) }

/* ---------- Contact ---------- */
.section--dark{ background:var(--grey-50); border-top:1px solid var(--line) }
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,68px) }
.field{ display:grid; gap:7px; margin-bottom:16px }
.field label{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-mute);
}
.field input,.field select,.field textarea{
  width:100%; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:13px 14px; font-size:.9rem; transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--black) }
.field textarea{ min-height:116px; resize:vertical; font-family:inherit }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.cinfo{ border:1px solid var(--line); border-radius:var(--r); background:#fff }
.cinfo div{ padding:20px 22px; border-bottom:1px solid var(--line-lt) }
.cinfo div:last-child{ border-bottom:0 }
.cinfo b{
  display:block; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--rust); margin-bottom:8px;
}
.cinfo p{ font-size:.88rem; line-height:1.7; color:var(--text-soft) }
.cinfo a:hover{ color:var(--gold-dk) }

/* ---------- Footer (zone noire) ---------- */
.foot{ background:var(--black); color:rgba(255,255,255,.7); padding:56px 0 26px }
.foot .logo__txt{ color:#fff }
.foot .logo__mark{ color:var(--gold) }
.foot h5{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.foot__top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:38px; padding-bottom:42px }
.foot ul{ display:grid; gap:9px }
.foot ul a,.foot ul li{ font-size:.84rem; color:rgba(255,255,255,.6); transition:color .25s }
.foot ul a:hover{ color:var(--gold) }
.foot__bot{
  border-top:1px solid var(--line-inv); padding-top:22px;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
}
.foot__bot p{ font-size:.74rem; color:rgba(255,255,255,.42) }
.foot__note{ font-size:.76rem; color:rgba(255,255,255,.5); line-height:1.75; max-width:64ch; margin-top:16px }

/* ---------- En-têtes de section ---------- */
.shead{ margin-bottom:clamp(36px,5.5vh,64px); max-width:72ch; display:grid; gap:16px }
.shead--split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px);
  align-items:end; max-width:none;
}

/* ---------- Reveal & converge ---------- */
[data-rv]{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
[data-rv].in{ opacity:1; transform:none }
[data-rv][data-d="1"]{ transition-delay:.09s } [data-rv][data-d="2"]{ transition-delay:.18s }
[data-rv][data-d="3"]{ transition-delay:.27s } [data-rv][data-d="4"]{ transition-delay:.36s }
.converge-word{ display:inline-block; white-space:nowrap }
.converge-char{ display:inline-block; will-change:transform }
.converge-item{ will-change:transform, opacity }
@media (prefers-reduced-motion:reduce){
  [data-rv]{ opacity:1; transform:none; transition:none }
  .ticker,.shero__hint svg{ animation:none }
}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .split,.price,.net,.docs,.procta__in,.contact,.shead--split{ grid-template-columns:1fr }
  .cardgrid,.cardgrid--3{ grid-template-columns:repeat(2,1fr) }
  .flow{ grid-template-columns:repeat(2,1fr); row-gap:30px }
  .flow::before{ display:none }
  .figs{ grid-template-columns:1fr 1fr }
  .foot__top{ grid-template-columns:1fr 1fr }
  .split__media{ aspect-ratio:16/10; max-height:440px }
  .strip{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:760px){
  .burger{ display:grid }
  .nav__links{
    position:fixed; inset:102px 0 auto; flex-direction:column; gap:0; margin:0;
    padding:16px var(--gut) 30px; background:#fff; border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .5s var(--ease-out);
  }
  body.menu-open .nav__links{ transform:none }
  .nav__links a{ padding:15px 0; font-size:.94rem; border-bottom:1px solid var(--line-lt) }
  .nav__actions .btn{ display:none }
  .cardgrid,.cardgrid--3,.flow,.f2,.foot__top{ grid-template-columns:1fr }
  .shero{ height:160vh }
  .shero__media{ width:210px; height:290px }
}

/* =========================================================================
   CHAÎNE D'APPROVISIONNEMENT — effet orbite
   Repris de la page restaurant de Khla Lodge : les cartes se dispersent,
   forment un cercle puis s'ouvrent en arc. Ici piloté par le scroll.
   ========================================================================= */
.orbit{ height:220vh; position:relative; background:var(--white) }
.orbit__pin{
  position:sticky; top:0; height:100vh; min-height:600px; overflow:hidden;
  background:var(--white);
}
.orbit__pin::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 50% at 50% 42%, rgba(201,162,39,.09), transparent 66%),
    linear-gradient(180deg, var(--white), var(--grey-50));
}
.orbit__stage{ position:absolute; inset:0; z-index:1 }
.orbit-card{
  position:absolute; top:50%; left:50%; z-index:1;
  width:70px; height:95px; margin:-47.5px 0 0 -35px;
  border-radius:var(--r); overflow:hidden; background:var(--grey-100);
  box-shadow:0 10px 30px rgba(11,12,14,.22);
  will-change:transform, opacity;
}
.orbit-card img{ width:100%; height:100%; object-fit:cover }
.orbit-card__label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(11,12,14,.9); color:#fff; font-family:var(--ff-mono);
  font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; text-align:center;
  padding:6px; line-height:1.35; opacity:0; transition:opacity .3s;
}
.orbit-card:hover .orbit-card__label{ opacity:1 }

.orbit__intro{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; z-index:20; padding:36px 60px;
  transition:opacity .5s;
}
.orbit__intro::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,.88) 54%, rgba(255,255,255,0) 78%);
}
.orbit__intro p{
  margin-top:12px; font-family:var(--ff-mono); font-size:.6rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--text-mute);
}

.orbit__reveal{
  position:absolute; top:11%; left:50%; transform:translate(-50%,10px);
  text-align:center; max-width:620px; width:90%; padding:30px 20px;
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity .5s, transform .5s;
}
.orbit__reveal::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, #fff 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,0) 80%);
}
.orbit__reveal.visible{ opacity:1; transform:translate(-50%,0) }
.orbit__reveal .eyebrow{ justify-content:center; margin-bottom:12px }
.orbit__reveal .lead{ margin:14px auto 0 }

@media (max-width:760px){
  .orbit{ height:190vh }
  .orbit-card{ width:50px; height:68px; margin:-34px 0 0 -25px }
  .orbit__intro{ padding:26px 30px }
}

/* =========================================================================
   CARTES DE TEXTE — sections « Notre role » et « La garantie, en clair »
   ========================================================================= */
.tcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px; display:flex; flex-direction:column; gap:12px;
  transition:.4s var(--ease-out);
}
.tcard:hover{ border-color:var(--black); transform:translateY(-4px) }
.tcard__n{
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.2em;
  color:var(--gold-dk);
}
.tcard h4{ font-size:1.14rem; line-height:1.28 }
.tcard p{ font-size:.86rem; color:var(--text-soft); line-height:1.72 }

.section--deep .tcard{
  background:var(--black-2); border-color:var(--line-inv);
}
.section--deep .tcard:hover{ border-color:var(--gold) }
.section--deep .tcard h4{ color:#fff }
.section--deep .tcard p{ color:rgba(255,255,255,.68) }
.section--deep .tcard__n{ color:var(--gold) }

/* Logo dans les fiches du reseau */
.ent__logo{ height:26px; width:auto; object-fit:contain; margin-bottom:2px }
.ent--lead .ent__logo{ filter:brightness(0) invert(1); opacity:.9 }
.ent__who{ font-size:.8rem; color:var(--text-mute); line-height:1.5; margin-top:2px }
.ent--lead .ent__who{ color:rgba(255,255,255,.5) }

@media (max-width:1040px){ .tcards{ grid-template-columns:1fr } }


/* =========================================================================
   PAGES INTERIEURES — en-tete de page, lien courant, cartes cliquables
   ========================================================================= */
.pagehero{
  position:relative; overflow:hidden; background:var(--grey-50);
  padding:clamp(56px,9vh,104px) 0 clamp(48px,7vh,84px); border-bottom:1px solid var(--line);
}
.pagehero__bg{ position:absolute; inset:0; z-index:0 }
.pagehero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.16; filter:saturate(.7) }
.pagehero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
}
.pagehero__in{ position:relative; z-index:2; max-width:44rem }
.pagehero h1{ margin:14px 0 18px }
.pagehero .lead{ font-size:clamp(1rem,1.25vw,1.12rem) }

/* Onglet actif dans la navigation */
.nav__links a.is-current{ color:var(--black) }
.nav__links a.is-current::after{ transform:scaleX(1) }

/* Les cartes de l accueil sont des liens */
a.pcardx{ color:inherit; text-decoration:none }
a.pcardx .cmeta{ color:var(--gold-dk); letter-spacing:.14em }
a.pcardx .cmeta span::after{ content:" \2192" }

/* Sur l accueil, la grille de teasers reprend la mise en page des cartes photo */
#explore .tcards.cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:1040px){ #explore .tcards.cardgrid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ #explore .tcards.cardgrid{ grid-template-columns:1fr } }


/* ---------- Logo jumele EWT + YLS Export ---------- */
.logo--duo{ gap:9px }
.logo__amp{
  font-family:var(--ff-display); font-size:1rem; color:var(--text-mute);
  margin:0 1px; align-self:center;
}
.logo__yls{ width:52px; height:auto; object-fit:contain; flex:none }
.foot .logo__amp{ color:rgba(255,255,255,.4) }
.tools .logo__amp{ color:rgba(255,255,255,.4) }

@media (max-width:900px){
  .logo__amp,.logo__yls,.logo--duo .logo__txt:last-child{ display:none }
}

/* ---------- Orbite en en-tete de page ----------
   L orbite remplace le bandeau statique une page sur deux : le titre de la
   page se revele quand les cartes se rassemblent en arc. */
.orbit--hero{ border-bottom:1px solid var(--line) }
.orbit--hero .orbit__pin{ background:var(--grey-50) }
.orbit--hero .orbit__pin::before{
  background:
    radial-gradient(58% 50% at 50% 40%, rgba(201,162,39,.12), transparent 66%),
    linear-gradient(180deg, var(--white), var(--grey-50));
}
/* Le titre revele est le h1 de la page : il doit primer sur le mot d intro. */
.orbit--hero .orbit__reveal{ top:auto; bottom:13%; max-width:52rem }
.orbit--hero .orbit__reveal h1{ margin:10px 0 14px }
.orbit--hero .orbit__intro h2{ color:var(--text-mute) }


/* ---------- Logos : image reelle plutot que monogramme dessine ----------
   Un seul fichier sert partout : sur fond sombre on le passe en blanc par
   filtre, ce qui evite d avoir deux versions a maintenir. */
img.logo__mark{ width:58px; height:auto }
.foot img.logo__mark,
.tools img.logo__mark,
.gate img.logo__mark{ filter:brightness(0) invert(1) }
.logo--duo{ gap:11px }
.logo__amp{ font-size:1.15rem }

@media (max-width:900px){
  img.logo__mark{ width:44px }
  .logo__yls{ width:40px }
}

/* Adresse complete dans les fiches du reseau */
.ent__addr{ font-size:.78rem; line-height:1.6; color:var(--text-mute) }
.ent--lead .ent__addr{ color:rgba(255,255,255,.5) }

/* ---------- Questions/reponses numerotees (page Guarantee) ---------- */
.qa{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.qa__i{ background:#fff; padding:26px 28px; display:flex; gap:22px; align-items:flex-start; transition:background .3s }
.qa__i:hover{ background:var(--white) }
.qa__n{
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; color:var(--gold-dk);
  flex:none; padding-top:.25em; width:26px;
}
.qa__i h4{ font-size:1.12rem; margin-bottom:8px }
.qa__i p{ font-size:.88rem; line-height:1.75; color:var(--text-soft); max-width:76ch }
.qa__i b{ color:var(--black); font-weight:600 }

/* ---------- Bloc banque ---------- */
.bankblk{ max-width:58rem }
.bankblk h2{ margin:14px 0 18px }
.bankblk .lead{ font-size:1rem; line-height:1.8; max-width:none }
.bankblk b{ color:#fff; font-weight:600 }

@media (max-width:700px){
  .qa__i{ flex-direction:column; gap:10px; padding:22px }
}

/* ---------- Logos : calage sur la HAUTEUR ----------
   Les trois marques ont des proportions tres differentes (EWT presque carre,
   YLS deux fois plus large que haut). Les caler en largeur les desequilibre :
   on fixe la hauteur et on laisse la largeur suivre. */
img.logo__mark{ height:42px; width:auto }
.logo__yls{ height:30px; width:auto }
.ent__logo{ height:30px; width:auto }

@media (max-width:900px){
  img.logo__mark{ height:34px; width:auto }
  .logo__yls{ height:24px; width:auto }
}

/* ---------- Bandeau bancaire ----------
   HSBC est cite en toutes lettres, jamais par son logo : leur marque est
   deposee et l afficher laisserait croire a un partenariat. Le poids vient
   donc de la typographie. */
.bankstrip{ background:var(--black); color:rgba(255,255,255,.72); padding:clamp(28px,3.6vw,44px) 0 }
.bankstrip__in{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(22px,4vw,56px); align-items:center }
.bankstrip__id .eyebrow{ color:var(--gold) }
.bankstrip__id .eyebrow::before{ background:var(--gold) }
.bankstrip__n{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:#fff; letter-spacing:-.01em; margin-top:8px; white-space:nowrap;
}
.bankstrip__pts{ display:grid; gap:7px }
.bankstrip__pts li{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.62); display:flex; gap:10px;
}
.bankstrip__pts li::before{ content:"\2014"; color:var(--gold); flex:none }
.bankstrip__d{ font-size:.84rem; line-height:1.7; color:rgba(255,255,255,.55); max-width:34ch }

@media (max-width:1040px){
  .bankstrip__in{ grid-template-columns:1fr; gap:20px }
  .bankstrip__n{ white-space:normal }
  .bankstrip__d{ max-width:none }
}


/* =========================================================================
   PALETTE — attribution des couleurs
   Vert : la couleur de fond de la maison, sections profondes et surtitres.
   Bleu foncé : pied de page et bandeau bancaire, registre institutionnel.
   Noir : bandeau haut et bloc espace pro, pour trancher.
   Or : signaux et chiffres. Violet : numerotation, par petites touches.
   ========================================================================= */

/* --- Sections profondes en vert --- */
.section--deep{ background:var(--green) }
.section--deep .tcard{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16) }
.section--deep .tcard:hover{ border-color:var(--gold) }
.section--deep .doci{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16) }

/* --- Pied de page et bandeau bancaire en bleu foncé --- */
.foot{ background:var(--navy) }
.bankstrip{ background:var(--navy) }
.bankstrip__n{ color:#fff }

/* --- Le bloc espace pro reste noir, il doit trancher --- */
.procta{ background:var(--black) }

/* --- Surtitres en vert --- */
/* p.eyebrow et pas .eyebrow : les surtitres sont des <p>, et des regles
   comme « .hreveal p » les emportaient sur une classe seule. */
p.eyebrow,.eyebrow{ color:var(--green) }
.eyebrow::before{ background:var(--green) }
.section--deep p.eyebrow,
.procta p.eyebrow,
.bankstrip__id p.eyebrow{ color:var(--gold) }
.section--deep .eyebrow::before,
.procta .eyebrow::before,
.bankstrip__id .eyebrow::before{ background:var(--gold) }

/* --- Violet : la numerotation, et rien d autre --- */
.tcard__n,
.qa__n,
.chk__n,
.pcardx__n{ color:var(--purple) }
.pcardx__n{ background:var(--purple); color:#fff }
.steps__n{ color:var(--purple-lt) }
.flow__n{ border-color:rgba(74,46,99,.35); color:var(--purple) }
.flow__s:hover .flow__n{ background:var(--purple); border-color:var(--purple); color:#fff }

/* --- Cartes et liens : le vert prend la place du noir sur les survols --- */
.pcard:hover,
.pcardx:hover,
.tcard:hover,
.doci:hover{ border-color:var(--green) }
.pcard--best{ background:var(--green); border-color:var(--green) }
.pcard--best .pcard__flag{ background:var(--gold); color:var(--black) }
.ent--lead{ background:var(--green); border-color:var(--green) }
.split__badge{ background:var(--green); color:#fff }
.tagl{ color:var(--green) }
.figs span{ color:var(--green) }
.cinfo b{ color:var(--green) }
.prod__facts b{ color:var(--green) }
.pcard__k{ color:var(--green) }
.serif-it{ color:var(--green-lt) }

/* --- Boutons : le principal passe au vert, le noir reste pour le secondaire --- */
.btn{ background:var(--green); border-color:var(--green); color:#fff }
.btn:hover{ background:transparent; color:var(--green) }
.btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--text) }
.btn--ghost:hover{ background:var(--green); border-color:var(--green); color:#fff }
.nav__links a::after{ background:var(--green) }
.nav__links a:hover{ color:var(--green) }
.nav__links a.is-current{ color:var(--green) }

/* --- En-tetes de page et scroll-hero : un fond vert tres pale --- */
.pagehero{ background:#F4F7F5 }
.pagehero__bg::after{
  background:linear-gradient(180deg, rgba(244,247,245,.72), rgba(244,247,245,.94));
}
.shero__pin,.shero__bg{ background:#F7F9F8 }
.shero__bg::before{
  background:linear-gradient(180deg, rgba(247,249,248,.42), rgba(247,249,248,.12) 42%, rgba(247,249,248,.55));
}
.orbit--hero .orbit__pin{ background:#F4F7F5 }
.orbit--hero .orbit__pin::before{
  background:
    radial-gradient(58% 50% at 50% 40%, rgba(201,162,39,.14), transparent 66%),
    linear-gradient(180deg, #FBFCFB, #F4F7F5);
}


/* ---------- Titrage Julius Sans One ----------
   La fonte n existe qu en un seul poids et sans italique : on compense par
   l interlettrage plutot que par la graisse, et l accent italique passe en
   Montserrat italique. */
h1,h2,h3,h4{ letter-spacing:.02em; font-weight:400 }
.h-xl{ letter-spacing:.01em }
.serif-it{ font-family:var(--ff-sans); font-style:italic; font-weight:300 }
.shero__w,.expand__w{ letter-spacing:.06em }
.pcard__p,.figs b,.stat b,.prod__icu b{ letter-spacing:.01em }
body{ font-weight:300 }
b,strong{ font-weight:600 }

/* --- Garde-fou : pas de vert sur fond vert ---
   .pcard--best et .ent--lead passent en fond vert ; tout ce qui etait vert
   a l interieur doit redevenir clair, sinon le texte disparait. */
.pcard--best,.ent--lead{ color:rgba(255,255,255,.80) }
.pcard--best h1,.pcard--best h2,.pcard--best h3,.pcard--best h4,
.ent--lead h1,.ent--lead h2,.ent--lead h3,.ent--lead h4{ color:#fff }
.pcard--best .pcard__k,
.pcard--best .tagl,
.pcard--best .figs span,
.ent--lead .tagl,
.ent--lead .cinfo b,
.ent--lead .figs span{ color:var(--gold) }
.pcard--best p.eyebrow,.ent--lead p.eyebrow{ color:var(--gold) }
.pcard--best p.eyebrow::before,.ent--lead p.eyebrow::before{ background:var(--gold) }
.pcard--best .btn,.ent--lead .btn{ background:var(--gold); border-color:var(--gold); color:var(--black) }
.pcard--best .btn:hover,.ent--lead .btn:hover{ background:transparent; color:var(--gold) }
.split__badge p.eyebrow{ color:var(--gold) }

/* =========================================================================
   RYTHME — repris de Khla Lodge
   Chez Khla la page respire parce que trois choses sont tenues : la section
   est haute (110px), la tete de section est etroite (640px, pas 72ch), et les
   cartes sont peu denses. La densite venait surtout de la mesure trop large :
   un paragraphe sur 76ch se lit comme un mur.
   ========================================================================= */

.section{ padding:clamp(84px,11vh,132px) 0 }

.shead{ max-width:640px; margin-bottom:clamp(48px,7vh,80px); gap:18px }
.shead--split{ max-width:none; gap:clamp(28px,5vw,64px) }
.shead--split > div{ max-width:560px }
.shead--split .lead{ max-width:46ch }
.shead h2{ line-height:1.2 }
.lead{ font-size:1.02rem; line-height:1.72; max-width:56ch }

/* --- Cartes : plus d air dedans, moins de trait autour --- */
.tcard{ padding:34px 30px; gap:14px; border-color:var(--line-lt) }
.tcard p{ font-size:.9rem; line-height:1.78; max-width:44ch }
.tcard h4{ line-height:1.3 }

.qa{ gap:1px; background:var(--line-lt); border-color:var(--line-lt) }
.qa__i{ padding:34px 34px; gap:26px }
.qa__i p{ font-size:.9rem; line-height:1.8; max-width:62ch }
.qa__i h4{ margin-bottom:11px }

.flow{ gap:0 34px }
.flow__s{ padding-bottom:46px }
.flow__s p{ font-size:.86rem; line-height:1.72; padding-right:16px }
.flow__s h4{ margin:20px 0 10px }

.docs{ gap:18px }
.pcard{ border-color:var(--line-lt) }

/* --- Les paves de texte : jamais au-dela de la mesure confortable --- */
.section p:not(.eyebrow):not(.lead):not([class]){ max-width:62ch }

/* --- Le bloc d avertissement se pose, il ne crie pas --- */
.warn{ padding:26px 28px; border-color:var(--line-lt) }
.warn p{ font-size:.86rem; line-height:1.78; max-width:60ch }

@media (max-width:860px){
  .section{ padding:clamp(58px,8vh,84px) 0 }
  .shead{ margin-bottom:36px }
  .qa__i{ padding:26px 24px; gap:18px }
  .tcard{ padding:26px 22px }
}

/* ---------- Documents publics ---------- */
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.dl{
  display:flex; flex-direction:column; gap:12px; text-decoration:none;
  background:#fff; border:1px solid var(--line-lt); border-radius:var(--r);
  padding:30px 26px 22px; color:inherit; transition:.4s var(--ease-out);
}
.dl:hover{ border-color:var(--green); transform:translateY(-4px) }
.dl__ico{ color:var(--green) }
.dl__ico svg{ width:22px; height:22px }
.dl h4{ font-size:1.08rem; line-height:1.3 }
.dl p{ font-size:.86rem; color:var(--text-soft); line-height:1.75; flex:1; max-width:40ch }
.dl__f{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--line-lt);
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
}
.dl__f span{ color:var(--text-mute) }
.dl__f b{ color:var(--green); font-weight:500 }
.dl:hover .dl__f b{ color:var(--gold-dk) }
.section--grey .dl{ background:#fff }
@media (max-width:860px){ .dl-grid{ grid-template-columns:1fr } }

/* ---------- Pied de page : ligne du bas ----------
   Trois informations distinctes plutot qu'une phrase a rallonge. Les deux
   societes sont nommees : le site est le leur a toutes les deux. */
.foot__bot{ gap:10px 28px }
.foot__bot p{
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.40); margin:0;
}
.foot__copy{ color:rgba(255,255,255,.62) !important }
.foot__cities{ color:var(--gold) !important; letter-spacing:.18em }
.foot__rights{ margin-left:auto !important }
@media (max-width:700px){
  .foot__bot{ flex-direction:column; align-items:flex-start }
  .foot__rights{ margin-left:0 !important }
}

/* ---------- Bande visuelle pleine largeur ----------
   Une respiration entre deux blocs de texte. Hauteur au viewport pour qu'elle
   ne devienne pas une banniere sur grand ecran. */
.imgband{ height:clamp(200px,34vh,360px); overflow:hidden; position:relative }
.imgband img{ width:100%; height:100%; object-fit:cover; display:block }
.imgband::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,64,44,.30), rgba(20,43,77,.30));
}

/* ---------- Documents : une image en fond, tres attenuee ----------
   Le texte reste sur les cartes blanches, donc la lisibilite ne bouge pas ;
   l'image ne sert qu'a casser la page. Elle est posee sur un pseudo-element
   pour pouvoir la faire descendre a 8% sans toucher au contenu. */
#downloads{ position:relative; isolation:isolate; overflow:hidden }
#downloads::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--dl-bg); background-size:cover; background-position:center;
  opacity:.10;
}
#downloads::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(246,246,247,.55), rgba(246,246,247,.88));
}
#downloads .dl{ backdrop-filter:blur(2px) }

/* ---------- Fond des sections sombres ----------
   Un aplat de couleur sur toute la hauteur finit par etre austere. L'image
   passe sous le contenu (z-index negatif sur un pseudo-element) et reste assez
   basse en opacite pour ne jamais disputer la lisibilite au texte blanc.
   Le degrade par-dessus rattrape la couleur de la section, sinon la photo
   tirerait tout vers le gris. */
[data-bg]{ position:relative; isolation:isolate }
[data-bg] > *{ position:relative; z-index:1 }
[data-bg]::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--sec-bg); background-size:cover; background-position:center;
  opacity:.38;
}
[data-bg]::after{ content:""; position:absolute; inset:0; z-index:-1 }

.section--deep[data-bg]::after{
  background:linear-gradient(160deg, rgba(20,64,44,.90), rgba(20,64,44,.97));
}
.procta[data-bg]::after{
  background:linear-gradient(160deg, rgba(11,12,14,.86), rgba(11,12,14,.96));
}
.bankstrip[data-bg]::after{
  background:linear-gradient(160deg, rgba(20,43,77,.88), rgba(20,43,77,.96));
}
/* Le bloc pro a des coins arrondis : l'image doit s'y conformer. */
.procta[data-bg]{ overflow:hidden }

/* ---------- Espace pro : verre depoli plutot qu'aplat noir ----------
   L'aplat noir ecrasait la photo et fermait le bas de la page d'accueil.
   Ici l'image reste visible, et c'est un panneau translucide floute qui
   porte le texte. backdrop-filter floute ce qu'il y a DERRIERE l'element,
   d'ou le voile leger : sans lui le flou n'aurait rien a mordre. */
.procta[data-bg]::before{ opacity:.66 }
.procta[data-bg]::after{
  background:linear-gradient(155deg, rgba(11,12,14,.58), rgba(20,43,77,.62));
  backdrop-filter:blur(3px) saturate(115%);
  -webkit-backdrop-filter:blur(3px) saturate(115%);
}
.procta[data-bg]{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -24px rgba(11,12,14,.55);
}
/* Le petit grain en pointilles ne sert plus a rien sur une photo. */
.procta[data-bg] > .procta__in ~ ::before{ display:none }

.procta[data-bg] .procta__box{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.procta[data-bg] .procta__box .warn{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* Repli : sans backdrop-filter le panneau doit rester lisible tout seul. */
@supports not (backdrop-filter: blur(2px)){
  .procta[data-bg]::before{ opacity:.30 }
  .procta[data-bg] .procta__box{ background:rgba(11,12,14,.62) }
}

/* ---------- Hero : la phrase complete plutot que deux mots ----------
   Le texte est bien plus long qu'un seul mot, donc plus petit, et la chute
   passe sur sa propre ligne. Le nowrap reste sur chaque moitie : elles doivent
   s'ecarter d'un bloc, pas se casser en deux. */
.shero__title{
  flex-direction:column; align-items:center; gap:.18em;
  font-size:clamp(1.25rem,3.9vw,3.1rem);
}
.shero__row{ display:flex; gap:.55em; align-items:baseline }
.shero__w--3{ font-size:.78em; color:var(--green-lt) }
@media (max-width:600px){
  .shero__title{ font-size:clamp(1.05rem,5.4vw,1.6rem) }
  .shero__row{ gap:.4em }
}

/* ---------- Declaration plein cadre ----------
   Le seul bloc du site sans carte, sans grille et sans colonne : une phrase,
   grande, sur une photo. Il sert de respiration entre deux sections denses.
   Les lignes montent une par une au lieu d'apparaitre ensemble : c'est ce
   decalage qui donne le rythme, sinon autant ecrire un paragraphe. */
.stmt{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(90px,15vh,180px) 0; color:#fff;
}
.stmt[data-bg]::before{ opacity:.60 }
.stmt[data-bg]::after{
  background:linear-gradient(120deg, rgba(20,64,44,.90), rgba(11,12,14,.72) 62%, rgba(20,43,77,.86));
}
.stmt__in{ max-width:1000px }
.stmt p.eyebrow{ color:var(--gold) }
.stmt p.eyebrow::before{ background:var(--gold) }

.stmt__l{
  font-family:var(--ff-display); font-weight:400; line-height:1.1;
  font-size:clamp(1.7rem,5.4vw,4rem); letter-spacing:.01em; color:#fff;
  margin-top:.12em;
}
.stmt__l--3{ color:var(--gold) }
.stmt__l span{ display:inline-block; transform:translateY(24px); opacity:0;
  transition:transform .9s var(--ease-out), opacity .9s var(--ease-out) }
/* La classe posee par l'observateur est "in", pas "is-in". */
[data-rv].in .stmt__l span{ transform:none; opacity:1 }
.stmt__l:nth-of-type(2) span{ transition-delay:.12s }
.stmt__l:nth-of-type(3) span{ transition-delay:.24s }
.stmt__l--3 span{ transition-delay:.36s }

.stmt__d{
  margin-top:34px; max-width:56ch; font-size:1rem; line-height:1.8;
  color:rgba(255,255,255,.74);
}
.stmt .btn{ margin-top:30px; background:var(--gold); border-color:var(--gold); color:var(--black) }
.stmt .btn:hover{ background:transparent; color:var(--gold) }

@media (max-width:700px){
  .stmt{ padding:clamp(64px,11vh,110px) 0 }
  .stmt__d{ font-size:.94rem }
}

/* ---------- Voile au survol sur les cartes illustrees ----------
   Repris de la galerie envoyee par le client : le voile monte du bas et
   porte le titre. Sur un ecran tactile il n'y a pas de survol, donc on ne
   l'affiche pas du tout — le titre est deja lisible sous la photo, un voile
   permanent ne ferait que masquer l'image. */
.pcardx__ov{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:18px 20px; color:#fff;
  background:linear-gradient(180deg, rgba(11,12,14,0) 34%, rgba(20,64,44,.88));
  opacity:0; transition:opacity .35s var(--ease-out);
}
.pcardx:hover .pcardx__ov,
.pcardx:focus-visible .pcardx__ov{ opacity:1 }
.pcardx__ovt{
  font-size:1.05rem; line-height:1.25; font-weight:500; color:#fff;
  transform:translateY(10px); transition:transform .45s var(--ease-out);
}
.pcardx:hover .pcardx__ovt{ transform:none }
.pcardx__ovl{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  transform:translateY(10px); transition:transform .45s var(--ease-out) .06s;
}
.pcardx:hover .pcardx__ovl{ transform:none }
.pcardx__ovl svg{ width:13px; height:13px }
@media (hover:none){ .pcardx__ov{ display:none } }


/* ---------- Visionneuse ---------- */
.lb{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px);
  background:rgba(11,12,14,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lb[hidden]{ display:none }
.lb__f{ margin:0; max-width:1100px; max-height:86vh; display:flex; flex-direction:column; gap:14px }
.lb__f img{
  max-width:100%; max-height:74vh; object-fit:contain; border-radius:10px; display:block;
  opacity:0; transform:scale(.94); transition:opacity .3s, transform .3s var(--ease-out);
}
.lb__f img.is-in{ opacity:1; transform:none }
.lb__f figcaption{ text-align:center; color:#fff }
.lb__f figcaption b{ display:block; font-size:1.05rem; font-weight:500 }
.lb__f figcaption span{
  display:block; margin-top:4px; font-family:var(--ff-mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.lb button{
  position:absolute; z-index:2; border:0; background:none; cursor:pointer;
  color:rgba(255,255,255,.75); transition:color .2s, transform .2s;
  display:grid; place-items:center; padding:8px;
}
.lb button:hover{ color:#fff }
.lb__x{ top:14px; right:16px } .lb__x svg{ width:30px; height:30px }
.lb__p{ left:12px } .lb__n{ right:12px }
.lb__p svg,.lb__n svg{ width:38px; height:38px }
.lb__p:hover{ transform:translateX(-3px) } .lb__n:hover{ transform:translateX(3px) }
.lb button[hidden]{ display:none }
.lb__c{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.2em;
  color:rgba(255,255,255,.6); background:rgba(255,255,255,.08);
  padding:7px 14px; border-radius:8px;
}

/* ---------- Intitule de la galerie des contacts ----------
   Un intertitre, pas une tete de section : la galerie vit a l'interieur du
   bloc reseau, elle n'ouvre pas un nouveau chapitre. */
.peo{
  margin:clamp(46px,7vh,80px) 0 clamp(22px,3vh,32px);
  display:grid; gap:10px; max-width:640px;
}
.peo__t{ font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.22 }
.peo__d{ font-size:.95rem; line-height:1.75; color:var(--text-soft); max-width:56ch }

/* ---------- Cartes qui s'etirent ----------
   Equivalent du composant ExpandingCards. La grille change de proportions,
   pas les elements : c'est grid-template-columns qui s'anime, ce qui evite de
   faire bouger la mise en page autour. Les valeurs (5fr / 1fr) sont posees en
   ligne par le script, elles dependent du nombre de cartes. */
.xc{
  display:grid; gap:10px; width:100%; margin:0; padding:0; list-style:none;
  height:clamp(420px,62vh,520px);
  transition:grid-template-columns .5s var(--ease-out),
             grid-template-rows .5s var(--ease-out);
}

.xc__i{
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer;
  min-width:0; min-height:0; background:var(--black);
}
.xc__i:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.xc__i img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.1); filter:grayscale(1);
  transition:transform .4s var(--ease-out), filter .4s var(--ease-out);
}
.xc__i[data-active="true"] img{ transform:scale(1); filter:grayscale(0) }

.xc__grad{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(11,12,14,.86), rgba(11,12,14,.42) 46%, transparent);
}

/* Le nom a la verticale : seul repere sur une carte etroite. Il s'efface des
   que la carte s'ouvre, sinon il chevaucherait le texte horizontal. */
.xc__vert{
  position:absolute; bottom:22px; left:50%; z-index:2;
  transform:translateX(-50%) rotate(-90deg); transform-origin:center;
  white-space:nowrap; font-family:var(--ff-mono); font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.82);
  transition:opacity .3s var(--ease-out);
}
.xc__i[data-active="true"] .xc__vert{ opacity:0 }

/* Le contenu apparait en cascade, comme les delais 75 / 150 / 225 de leur
   version. Chaque ligne a son propre retard. */
.xc__b{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end; gap:7px;
  padding:24px; color:#fff; pointer-events:none;
}
.xc__b > *{
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.xc__i[data-active="true"] .xc__b > *{ opacity:1; transform:none }
.xc__i[data-active="true"] .xc__cc  { transition-delay:.06s }
.xc__i[data-active="true"] .xc__tag { transition-delay:.09s }
.xc__i[data-active="true"] .xc__t   { transition-delay:.12s }
.xc__i[data-active="true"] .xc__loc { transition-delay:.15s }
.xc__i[data-active="true"] .xc__addr{ transition-delay:.18s }
.xc__i[data-active="true"] .xc__d   { transition-delay:.21s }
.xc__i[data-active="true"] .xc__who { transition-delay:.24s }

.xc__cc{
  align-self:flex-start; font-family:var(--ff-mono); font-size:.55rem;
  letter-spacing:.16em; padding:4px 9px; border-radius:6px;
  border:1px solid rgba(255,255,255,.3); background:rgba(11,12,14,.4);
}
.xc__tag{
  font-family:var(--ff-mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.xc__t{ font-family:var(--ff-display); font-size:1.5rem; line-height:1.12 }
.xc__loc{
  font-family:var(--ff-mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
.xc__addr{ font-size:.76rem; line-height:1.55; color:rgba(255,255,255,.62); max-width:40ch }
.xc__d{ font-size:.86rem; line-height:1.65; color:rgba(255,255,255,.85); max-width:44ch }
.xc__who{
  display:flex; flex-direction:column; gap:2px; margin-top:6px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.2);
}
.xc__who b{ font-size:1rem; font-weight:500 }
.xc__who i{ font-style:normal; font-size:.72rem; color:var(--gold) }

@media (max-width:767px){
  .xc{ height:auto; min-height:600px }
  .xc__vert{ display:none }
  .xc__b{ padding:20px }
  .xc__t{ font-size:1.3rem }
}


/* ---------- Illustration de fond de la section produit ----------
   Un motif de cristaux au trait plutot qu'une photo : derriere du texte, une
   image meme tres attenuee salit la lecture, alors qu'un filet fin la laisse
   intacte. Fichier separe et non data URI : les guillemets d'un SVG inline
   cassent le url() une fois echappes. */
#product{ position:relative; isolation:isolate; overflow:hidden }
#product::before{
  content:""; position:absolute; z-index:-1;
  top:-6%; right:-8%; width:min(720px,70vw); aspect-ratio:1;
  background:url("../assets/img/crystals.svg") top right / contain no-repeat;
  opacity:.11; pointer-events:none;
}
@media (max-width:860px){
  #product::before{ width:118vw; right:-28%; opacity:.07 }
}

/* ---------- Cartes qui s'etirent : variante documents ----------
   Meme mecanique que le reseau, mais chaque carte est un lien de
   telechargement : le contenu doit rester cliquable, contrairement aux cartes
   du reseau ou il est neutralise au profit de la visionneuse. */
#dlGrid .xc__i a{
  position:absolute; inset:0; display:block; text-decoration:none; color:inherit;
}
#dlGrid .xc__b{ pointer-events:none }
.xc__ico{ color:var(--gold) }
.xc__ico svg{ width:22px; height:22px }
.xc__f{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.xc__f span{ color:rgba(255,255,255,.55) }
.xc__f b{ color:var(--gold); font-weight:500 }

/* La section documents n'a plus besoin de sa photo de fond : les cartes en
   portent chacune une. */
#downloads::before{ display:none }

/* ---------- « Notre role » : sortir de l'effet bloc ----------
   Trois cartes blanches identiques posees sur un aplat gris se lisent comme
   un tableau, pas comme un propos. On met une photo derriere et on rend les
   cartes translucides : elles flottent au lieu de decouper la surface.
   Le voile est clair et non sombre, la section reste dans le registre blanc
   du reste de la page. */
#role[data-bg]::before{ opacity:.30 }
#role[data-bg]::after{
  background:linear-gradient(160deg, rgba(246,246,247,.90), rgba(246,246,247,.80) 45%, rgba(237,242,239,.92));
}

#role .tcard{
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 18px 44px -30px rgba(11,12,14,.42);
}
#role .tcard:hover{
  background:rgba(255,255,255,.9);
  border-color:var(--green);
}

/* La carte du milieu decalee : trois cartes alignees au cordeau, c'est
   precisement ce qui fait « bloc ». Un cran suffit a casser la rangee. */
@media (min-width:900px){
  /* Marge et non transform : l'effet converge-grid pose des transformations
     en ligne sur ces cartes au defilement, elles ecraseraient la regle. */
  #role .tcards{ align-items:start }
  #role .tcards > .tcard:nth-child(2){ margin-top:30px }
}
@supports not (backdrop-filter: blur(2px)){
  #role .tcard{ background:rgba(255,255,255,.94) }
}

/* ---------- Bandeau bancaire : vert et non bleu ----------
   Il etait bleu marine comme le pied de page, juste au-dessus : les deux
   blocs se fondaient en un seul pave. Le vert le detache et reprend la
   couleur de la maison. La photo derriere est un peu plus presente que sur
   les autres sections sombres, le bandeau est bas et court. */
.bankstrip[data-bg]{ background:var(--green) }
.bankstrip[data-bg]::before{ opacity:.30 }
.bankstrip[data-bg]::after{
  background:linear-gradient(160deg, rgba(20,64,44,.88), rgba(20,64,44,.95));
}

/* ---------- Due diligence : une photo derriere ----------
   Le passage le plus dense de la page. Meme traitement clair que « Our
   role » : la photo aere sans jamais passer devant le texte. */
#disclosure[data-bg]::before{ opacity:.26 }
#disclosure[data-bg]::after{
  background:linear-gradient(160deg, rgba(246,246,247,.91), rgba(237,242,239,.94));
}
#disclosure .qa{ background:rgba(11,12,14,.06) }
#disclosure .qa__i{
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}
#disclosure .qa__i:hover{ background:rgba(255,255,255,.94) }
#disclosure .warn{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@supports not (backdrop-filter: blur(2px)){
  #disclosure .qa__i{ background:#fff }
  #disclosure .warn{ background:#fff }
}

/* ---------- Contact : deux implantations cote a cote ---------- */
.cinfo > div b{ display:block }

/* =========================================================================
   PIED DE PAGE
   L'ancien listait des liens comme n'importe quel site. Celui-ci fait trois
   choses : il relance, il montre deux bureaux joignables a des heures
   differentes, et il donne de quoi verifier la societe.
   ========================================================================= */
.foot{ padding-top:0 }
.foot > .wrap{ padding-top:clamp(46px,7vh,78px) }

/* --- Relance --- */
.foot__cta{
  display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(24px,4vw,56px);
  align-items:end; padding-bottom:clamp(38px,5vh,58px);
  border-bottom:1px solid var(--line-inv);
}
.foot__cta p.eyebrow{ color:var(--gold) }
.foot__cta p.eyebrow::before{ background:var(--gold) }
.foot__ct{
  margin-top:14px; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(1.2rem,2.2vw,1.85rem); line-height:1.3; color:#fff; max-width:34ch;
}
.foot__cb{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end }
.foot .btn{ background:var(--gold); border-color:var(--gold); color:var(--black) }
.foot .btn:hover{ background:transparent; color:var(--gold) }
.foot .btn--ghost{ background:transparent; border-color:var(--line-inv); color:#fff }
.foot .btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--navy) }

/* --- Quatre colonnes : deux bureaux, verification, navigation --- */
.foot__grid{
  display:grid; grid-template-columns:1fr 1fr .9fr .7fr;
  gap:clamp(24px,3.5vw,52px); padding:clamp(38px,5vh,58px) 0;
}
.foot__dn{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
}
/* L'heure en chiffres tabulaires : sans cela le texte tressaute a chaque
   changement de minute, la largeur des chiffres n'etant pas la meme. */
.foot__dt{
  font-family:var(--ff-display); font-size:2.1rem; line-height:1; color:#fff;
  margin:10px 0 14px; font-variant-numeric:tabular-nums;
}
.foot__da,.foot__dl{ font-size:.78rem; line-height:1.7; color:rgba(255,255,255,.6) }
.foot__dl{ margin-top:10px }
.foot__dl a{ color:rgba(255,255,255,.72); text-decoration:none }
.foot__dl a:hover{ color:var(--gold) }

.foot__vh{
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:16px;
}
.foot__ver dl{ display:grid; gap:9px }
.foot__ver dt{
  font-family:var(--ff-mono); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.38);
}
.foot__ver dd{ margin:0 0 4px; font-size:.82rem; color:rgba(255,255,255,.78) }

.foot__nav ul{ display:grid; gap:9px }
.foot__nav a{ font-size:.84rem; color:rgba(255,255,255,.66); text-decoration:none }
.foot__nav a:hover{ color:var(--gold) }

.foot__note{
  font-size:.74rem; line-height:1.75; color:rgba(255,255,255,.42);
  max-width:78ch; padding-bottom:clamp(30px,4vh,46px);
  border-bottom:1px solid var(--line-inv); margin:0;
}

/* --- Signature --- */
.foot__sign{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,26px);
  padding:clamp(34px,5vh,54px) 0 clamp(26px,4vh,40px);
  font-family:var(--ff-display); letter-spacing:.14em;
  font-size:clamp(1.1rem,3.4vw,2.4rem); color:rgba(255,255,255,.30);
  user-select:none;
}
.foot__sign img{ height:clamp(24px,3.4vw,40px); width:auto; opacity:.4 }
.foot__sign em{ font-style:normal; font-size:.6em; opacity:.6 }

@media (max-width:1000px){
  .foot__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:660px){
  .foot__cta{ grid-template-columns:1fr; align-items:start }
  .foot__cb{ justify-content:flex-start }
  .foot__grid{ grid-template-columns:1fr; gap:34px }
  .foot__dt{ font-size:1.7rem }
}

/* =========================================================================
   PIED DE PAGE — EFFET VERRE

   Le verre depoli a besoin de quelque chose derriere pour avoir un sens :
   sans matiere, backdrop-filter ne floute rien et les panneaux paraissent
   simplement gris. On ne peut pas mettre une photo — le pied de page est sur
   les sept pages, l'image ferait doublon partout. On fabrique donc la
   lumiere : deux halos larges et un voile de grain, que les panneaux
   viennent flouter.
   ========================================================================= */
.foot{ position:relative; isolation:isolate; overflow:hidden }

/* Les halos. Le vert monte du bas a gauche, l'or descend du haut a droite :
   les deux couleurs de la maison, tres diluees. */
.foot::before{
  content:""; position:absolute; inset:-20% -10%; z-index:-2;
  background:
    radial-gradient(46% 52% at 12% 88%, rgba(46,122,85,.55), transparent 64%),
    radial-gradient(40% 46% at 88% 6%,  rgba(201,162,39,.28), transparent 62%),
    radial-gradient(70% 60% at 50% 50%, rgba(28,58,100,.55), transparent 70%);
  filter:blur(10px);
}
/* Un grain tres fin : il donne au flou de quoi mordre et evite les bandes
   de degrade sur les grands aplats. */
.foot::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.20;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.5) 1px, transparent 0);
  background-size:3px 3px;
}

/* --- Les panneaux --- */
.foot__cta,
.foot__desk,
.foot__ver,
.foot__nav{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  /* Le liseré clair sur l'arete haute : c'est lui qui fait lire « vitre »
     plutot que « rectangle translucide ». */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             0 20px 50px -34px rgba(0,0,0,.6);
}

.foot__cta{
  padding:clamp(26px,3.4vw,40px); border-bottom:1px solid rgba(255,255,255,.13);
}
.foot__grid{ padding:clamp(16px,2.4vh,26px) 0 }
.foot__desk,.foot__ver,.foot__nav{ padding:clamp(20px,2.4vw,28px) }

.foot__desk{ transition:background .4s, border-color .4s }
.foot__desk:hover{
  background:rgba(255,255,255,.09); border-color:rgba(201,162,39,.34);
}

/* La clause et la signature restent hors panneau : trois niveaux de verre
   empiles finiraient par ne plus rien vouloir dire. */
.foot__note{ border-bottom-color:rgba(255,255,255,.13) }
.foot__bot{ border-top-color:rgba(255,255,255,.13) }

/* Sans backdrop-filter, un panneau translucide devient illisible : on le
   rend opaque plutot que de laisser le texte flotter sur les halos. */
@supports not (backdrop-filter: blur(2px)){
  .foot__cta,.foot__desk,.foot__ver,.foot__nav{
    background:rgba(16,34,60,.88);
  }
}

/* =========================================================================
   HERO VIDEO
   Transpose du composant React envoye. La video de fond fournit toute la
   profondeur : pas de degrade decoratif, pas de halo, juste un voile sombre
   qui garantit la lisibilite du texte quel que soit le plan.
   ========================================================================= */
.vhero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
  /* L'image de poster est aussi le fond : video refusee, absente ou en cours
     de chargement, il y a toujours quelque chose derriere le texte. */
  background:var(--navy) var(--vhero-poster, none) center / cover no-repeat;
}
.vhero__v{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.vhero__v.is-off{ display:none }

/* Le voile n'est pas decoratif : sans lui, un plan clair rendrait le titre
   blanc illisible. Plus dense en bas, ou se trouve le texte. */
.vhero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,12,14,.42), rgba(11,12,14,.28) 34%, rgba(11,12,14,.72));
}

.vhero__in{ position:relative; z-index:2; text-align:center; padding:clamp(96px,14vh,150px) 0 }
.vhero .eyebrow{ justify-content:center; color:rgba(255,255,255,.72) }
.vhero .eyebrow::before{ background:var(--gold) }

.vhero__t{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.1rem,6.2vw,5.2rem); line-height:1.02; letter-spacing:-.015em;
  color:#fff; max-width:16ch; margin:22px auto 0;
}
/* Les mots en retrait, comme les <em class="not-italic text-muted-foreground">
   de la version React : c'est ce contraste qui donne le relief au titre. */
.vhero__t em{ font-style:normal; display:block; color:rgba(255,255,255,.70) }
.vhero__t .vhero__dim{ color:rgba(255,255,255,.45) }

.vhero__d{
  margin:26px auto 0; max-width:52ch;
  font-size:clamp(.98rem,1.3vw,1.14rem); line-height:1.75; color:rgba(255,255,255,.72);
}
.vhero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:38px }

.vhero__b{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 38px; border-radius:999px; text-decoration:none;
  font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:#fff;
  transition:transform .3s var(--ease-out), background .3s, border-color .3s;
}
.vhero__b:hover{ transform:scale(1.03) }
.vhero__b svg{ width:15px; height:15px }
.vhero__b--plain{ border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.82) }
.vhero__b--plain:hover{ border-color:#fff; color:#fff }

.vhero__hint{
  position:absolute; z-index:2; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.vhero__hint svg{ width:15px; height:15px; animation:sheroBounce 1.8s ease-in-out infinite }

/* ---------- Verre liquide ----------
   Repris tel quel de la specification. Le trait interieur en degre du haut
   vers le bas est ce qui fait lire « verre » plutot que « bouton translucide ». */
.liquid-glass{
  background:rgba(255,255,255,.01);
  background-blend-mode:luminosity;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  position:relative; overflow:hidden;
}
.liquid-glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* ---------- Apparitions echelonnees ---------- */
@keyframes fadeRise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
.rise{ animation:fadeRise .8s var(--ease-out) both }
.rise--1{ animation-delay:.15s }
.rise--2{ animation-delay:.3s }
.rise--3{ animation-delay:.45s }
@media (prefers-reduced-motion:reduce){
  .rise,.rise--1,.rise--2,.rise--3{ animation:none }
}

/* =========================================================================
   NAVIGATION TRANSPARENTE SUR LE HERO
   Comme sur Khla Lodge : elle appartient a l'image, puis devient une barre
   des qu'on descend. N'agit que sur les pages qui declarent un hero sombre,
   sinon des liens blancs se poseraient sur un fond blanc.
   ========================================================================= */
body[data-hero="dark"] .nav{
  /* absolute et non fixed : au repos la nav se pose juste sous le bandeau
     deroulant, hors du flux, par-dessus la video. Elle ne peut donc pas
     passer dessous et se faire recouvrir. */
  position:absolute; top:var(--topbar-h,34px); left:0; right:0;
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  transition:background .4s var(--ease-out), border-color .4s, backdrop-filter .4s;
}
body[data-hero="dark"] .nav__links a,
body[data-hero="dark"] .logo__txt{ color:#fff }
body[data-hero="dark"] .logo__txt small{ color:rgba(255,255,255,.7) }
/* Les logos sont sombres : sur une video il faut les passer en blanc. */
body[data-hero="dark"] .logo__mark,
body[data-hero="dark"] .logo__yls{ filter:brightness(0) invert(1) }
body[data-hero="dark"] .burger i,
body[data-hero="dark"] .burger i::before,
body[data-hero="dark"] .burger i::after{ background:#fff }

/* Etat solidifie : on revient exactement a la barre d'origine. */
body[data-hero="dark"] .nav.is-solid{
  /* On repasse en fixed une fois le bandeau sorti de l'ecran. L'animation
     evite que la barre apparaisse d'un coup. */
  position:fixed; top:0;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
}
/* Pas d'animation d'apparition sur la barre de menu : une animation qui ne se
   joue pas — onglet en arriere-plan, moteur qui la refuse, reglage systeme —
   laisserait la navigation hors ecran. Un menu ne doit dependre de rien pour
   etre visible. */
body[data-hero="dark"] .nav.is-solid .nav__links a{ color:var(--text) }
body[data-hero="dark"] .nav.is-solid .nav__links a.is-current{ color:var(--green) }
body[data-hero="dark"] .nav.is-solid .logo__txt{ color:var(--black) }
body[data-hero="dark"] .nav.is-solid .logo__txt small{ color:var(--gold-dk) }
body[data-hero="dark"] .nav.is-solid .logo__mark,
body[data-hero="dark"] .nav.is-solid .logo__yls{ filter:none }
body[data-hero="dark"] .nav.is-solid .burger i,
body[data-hero="dark"] .nav.is-solid .burger i::before,
body[data-hero="dark"] .nav.is-solid .burger i::after{ background:var(--black) }

/* =========================================================================
   MENU MOBILE SUR UNE PAGE A HERO SOMBRE

   Le panneau deroulant a un fond blanc. Les regles du hero sombre passent les
   liens en blanc pour qu'ils se lisent sur la video — mais une fois le menu
   ouvert, ils se retrouvent blancs sur blanc, donc invisibles. Ces trois
   correctifs valent uniquement sous le point de rupture mobile.
   ========================================================================= */
@media (max-width:760px){
  body[data-hero="dark"] .nav__links a{ color:var(--text) }
  body[data-hero="dark"] .nav__links a:hover,
  body[data-hero="dark"] .nav__links a.is-current{ color:var(--green) }

  /* Le panneau s'ouvre sous la barre. Une fois celle-ci collee en haut, elle
     n'est plus a la meme hauteur : sans cela il resterait un vide de 33px. */
  body[data-hero="dark"] .nav.is-solid .nav__links{ top:69px }

  /* La croix de fermeture : les regles du hero sombre repeignent les trois
     barres en blanc et cassaient la transformation en X, car elles arrivent
     apres dans la feuille. On les reaffirme ici. */
  body[data-hero="dark"].menu-open .burger i{ background:transparent }
  body[data-hero="dark"].menu-open .burger i::before,
  body[data-hero="dark"].menu-open .burger i::after{ background:#fff }
}