/* ===== UNI PRESTIGE — page styles ===== */

/* Tokens: brand values, do not change */
:root{
  --eerie:#1c2321;
  --deep:#141a18;
  --black:#0a0d0c;
  --card:#232b28;
  --line:#333d3a;
  --sea:#98d2eb;
  --soft:#e1f2fe;
  --txt:#e8edeb;
  --mut:#9fb4ad;
  --seadark:#3d7ea6;

  /* Derived: --sea opacities only */
  --sea-06:rgba(152,210,235,.06);
  --sea-12:rgba(152,210,235,.12);
  --sea-26:rgba(152,210,235,.26);
  --sea-45:rgba(152,210,235,.45);

  --hd-h:60px;

  /* Shared radii, curves and durations */
  --r-card:20px;          /* Cards: faces, references, off-market, form */
  --r-soft:14px;          /* Thumbnails and medallions */
  --e-out:cubic-bezier(.2,.7,.2,1);
  --e-sweep:cubic-bezier(.65,.05,.2,1);
  --t-rvl:1.05s;          /* Entrance reveal */
  --t-hover:.42s;         /* Hover response */
  --ico:24px;             /* Line icons */
  --ico-w:1.2;            /* Same stroke as the .gmark icons */

  --serif:'Playfair Display','Didot','Bodoni MT',Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
}

/* Playfair Display, self-hosted (no request to Google before consent) */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 500;font-display:swap;
  src:url(../fonts/playfair-display-latin.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(../fonts/playfair-display-italic-latin.woff2) format('woff2')}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
/* No scroll snapping: it made the footer unreachable on trackpads */
html{scroll-behavior:smooth;scroll-padding-top:var(--hd-h)}
body{font-family:var(--sans);color:var(--txt);background:var(--deep);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.pre-lock{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;color:inherit}
img,video{max-width:100%}
::selection{background:var(--sea);color:var(--eerie)}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:3px}

/* ===== TYPOGRAPHY ===== */
h1{font-size:clamp(38px,min(6vw,8.2vh),78px);font-weight:400;letter-spacing:-.02em;line-height:1.06;color:#fff}
h2{font-size:clamp(26px,min(4vw,5vh),50px);font-weight:400;letter-spacing:-.015em;line-height:1.14;color:#fff}
h1 b,h2 b{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea);letter-spacing:-.01em}
.lead{font-size:clamp(15px,min(1.45vw,1.9vh),18px);line-height:1.6;color:var(--mut);max-width:56ch;margin-top:16px;font-weight:300}
.legende{font-size:11.5px;color:#6f7875;margin-top:16px;font-style:italic}
/* The h2 opens each section (no eyebrow) */

/* ===== LAYOUT — content centred, rail overlays with no width ===== */
.sec{position:relative;padding:clamp(56px,7.5vh,104px) 0}
/* Each section fills the screen */
.sec--fit{min-height:100svh;display:flex;align-items:center}
.sec--fit>.wrap{width:100%}
.band{padding:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ===== GLOW BUTTON ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#e8f4fb 0%,var(--sea) 100%);
  color:var(--eerie);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 32px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 38px 4px rgba(152,210,235,.25);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .3s,filter .3s;
  animation:btn-halo 3.6s ease-in-out infinite;
}
@keyframes btn-halo{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 34px 3px rgba(152,210,235,.22)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 60px 12px rgba(152,210,235,.42)}
}
.btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--sm{padding:13px 22px;font-size:10.5px;letter-spacing:.15em;border-radius:11px;animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 26px 2px rgba(152,210,235,.2)}

/* ===== PRELOADER ===== */
#pre{position:fixed;inset:0;z-index:3000;background:var(--black);display:grid;place-items:center;
  overflow:hidden;transition:opacity .5s ease,visibility .5s}
#pre.off{opacity:0;visibility:hidden;pointer-events:none}
.pre-mesh{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pre-mesh span{position:absolute;width:min(560px,86vw);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--sea-12);transform:scale(.2);opacity:0;
  animation:pre-ring 3.1s cubic-bezier(.16,1,.3,1) forwards}
.pre-mesh span:nth-child(2){animation-delay:.16s}
.pre-mesh span:nth-child(3){animation-delay:.32s}
.pre-mesh span:nth-child(4){animation-delay:.48s}
.pre-mesh span:nth-child(5){animation-delay:.64s}
@keyframes pre-ring{0%{transform:scale(.18);opacity:0}28%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pre-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}
.pre-in img{height:58px;opacity:0;animation:pre-up 1s cubic-bezier(.16,1,.3,1) forwards .2s}
.pre-word{font-size:12px;letter-spacing:.56em;text-transform:uppercase;color:var(--sea);font-weight:600;
  margin-left:.56em;opacity:0;animation:pre-up 1s cubic-bezier(.16,1,.3,1) forwards .7s}
.pre-bar{display:block;width:150px;height:1px;background:var(--line);overflow:hidden;opacity:0;
  animation:pre-up .7s ease forwards 1s}
.pre-bar i{display:block;height:100%;width:100%;background:var(--sea);transform:scaleX(0);transform-origin:left;
  animation:pre-fill 1.9s cubic-bezier(.5,0,.2,1) forwards 1.15s}
@keyframes pre-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pre-fill{to{transform:scaleX(1)}}
.pre-curtain{position:absolute;inset:0;background:var(--deep);transform:scaleY(0);transform-origin:bottom;z-index:3}
#pre.leaving .pre-curtain{animation:pre-curt .7s cubic-bezier(.65,0,.35,1) forwards}
@keyframes pre-curt{
  0%{transform:scaleY(0);transform-origin:bottom}
  55%{transform:scaleY(1);transform-origin:bottom}
  56%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:top}
}

/* ===== CURSOR — pen nib ===== */
#nib,#nibtrail{display:none}
@media(pointer:fine){
  #nib{display:block;position:fixed;left:0;top:0;z-index:3100;pointer-events:none;width:26px;height:7px;
    border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
    background:linear-gradient(90deg,rgba(152,210,235,.15),var(--sea) 55%,rgba(152,210,235,.15));
    mix-blend-mode:screen;transition:opacity .3s,height .28s cubic-bezier(.16,1,.3,1),background .28s}
  #nibtrail{display:block;position:fixed;left:0;top:0;z-index:3099;pointer-events:none;width:5px;height:5px;
    border-radius:50%;background:var(--sea);opacity:.28;transition:opacity .3s,width .3s,height .3s}
  body.nib-on #nib{height:13px;background:linear-gradient(90deg,var(--sea),var(--soft) 55%,var(--sea))}
  body.nib-on #nibtrail{opacity:.5;width:9px;height:9px}
}

/* ===== PROGRESS RAIL — overlay, no layout width ===== */
#rail{position:fixed;left:0;top:0;bottom:0;width:40px;z-index:900;pointer-events:none}
.rail-line{position:absolute;left:19px;top:17vh;bottom:17vh;width:1px;background:var(--line)}
.rail-line i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--sea);
  box-shadow:0 0 8px var(--sea-45)}
/* Padding widens the hover area without moving the dots */
#railticks{position:absolute;left:15px;top:17vh;bottom:17vh;list-style:none;
  display:flex;flex-direction:column;justify-content:space-between;pointer-events:auto;
  padding-right:150px}
#railticks a{display:block;position:relative;width:9px;height:9px}
#railticks a::before{content:"";position:absolute;left:3px;top:3px;width:3px;height:3px;border-radius:50%;
  background:#3f4a47;transition:background .3s,width .3s,height .3s,left .3s,top .3s}
#railticks a:hover::before{background:var(--sea)}
/* Glow under the hovered item */
#railticks a::after{content:"";position:absolute;left:-13px;top:-13px;width:35px;height:35px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(152,210,235,.55),rgba(152,210,235,.12) 45%,transparent 70%);
  opacity:0;transform:scale(.5);
  transition:opacity .3s ease,transform .35s var(--e-out)}
#railticks a:hover::after,#railticks a:focus-visible::after,#railticks li.on a::after{
  opacity:1;transform:scale(1)}
#railticks li.on a::before{background:var(--sea);width:5px;height:5px;left:2px;top:2px;
  box-shadow:0 0 8px var(--sea-45)}
/* Labels unfold top to bottom on hover, fold at once on leave */
#railticks span{position:absolute;left:17px;top:50%;white-space:nowrap;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600;
  background:radial-gradient(130% 170% at 0% 50%,rgba(152,210,235,.22),rgba(152,210,235,.07) 52%,transparent 78%);
  padding:6px 16px 6px 10px;border-radius:999px;
  text-shadow:0 1px 9px rgba(10,13,12,.95);
  opacity:0;transform:translateY(-50%) translateX(-8px);pointer-events:auto;
  transition:opacity .26s ease,transform .32s cubic-bezier(.16,1,.3,1),color .26s;
  transition-delay:0ms}
#railticks:hover span,#railticks:focus-within span{
  opacity:1;transform:translateY(-50%) translateX(0);transition-delay:var(--d,0ms)}
#railticks:hover a:hover span,#railticks a:focus-visible span{color:var(--sea)}
#railticks:hover li.on span{color:var(--sea)}
@media(max-width:1023px){
  #rail{width:3px}
  #railticks{display:none}
  .rail-line{left:0;top:0;bottom:0;width:2px}
}

/* ===== HEADER — only frosted-glass surface ===== */
#hd{position:fixed;top:0;left:0;right:0;z-index:950;height:var(--hd-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,4vw,48px);
  /* Logo visible from load; bar and phone appear on scroll */
  transition:box-shadow .4s,background .4s,border-color .4s;
  background:transparent;border-bottom:1px solid transparent}
#hd.show{background:rgba(14,19,17,.55);border-bottom-color:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
#hd.sc{box-shadow:0 14px 40px rgba(0,0,0,.4);background:rgba(14,19,17,.78)}
#hd .tel{opacity:0;pointer-events:none;transition:opacity .45s,border-color .3s,color .3s}
#hd.show .tel{opacity:1;pointer-events:auto}
/* PRESTIGE centred on the logo height */
#hd .brand{display:flex;align-items:center;gap:13px}
/* Logo inverts over light areas; no filter (it breaks the blend) */
#hd .brand{mix-blend-mode:difference}
#hd .brand img{height:46px;display:block}   /* Header logo height (desktop) */
/* line-height:1 centres the caps on the logo */
#hd .brand .p{font-size:15px;line-height:1;letter-spacing:.42em;text-transform:uppercase;
  color:var(--sea);font-weight:600}
#hd .tel{font-size:12.5px;font-weight:600;color:var(--txt);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:9px 18px;transition:border-color .3s,color .3s}
#hd .tel:hover{border-color:var(--sea);color:var(--sea)}
/* Mobile: PRESTIGE shown, phone button shows the number only */
@media(max-width:720px){#hd .brand .p{font-size:11px;letter-spacing:.3em}#hd .tel-lb{display:none}#hd .brand img{height:42px}#hd .tel{font-size:11.5px;padding:8px 13px}}
/* Phones up to 360px: one size smaller */
@media(max-width:360px){#hd{gap:12px}#hd .brand{gap:10px}#hd .brand img{height:38px}#hd .brand .p{font-size:10px;letter-spacing:.25em}}

/* ===== FLOATING BUTTON — circle expands on hover ===== */
#fab{position:fixed;right:22px;bottom:22px;z-index:940;
  display:flex;align-items:center;height:56px;width:56px;border-radius:999px;
  border:1px solid var(--sea-45);background:rgba(18,24,22,.9);cursor:pointer;overflow:hidden;
  color:var(--sea);box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition:width .5s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
#fab:hover,#fab:focus-visible{width:250px;border-color:var(--sea);box-shadow:0 14px 44px rgba(152,210,235,.2)}
.fab-i{flex:0 0 54px;display:grid;place-items:center}
.fab-i i{display:block;width:12px;height:12px;border:1.5px solid var(--sea);border-radius:50%;
  animation:fab-pulse 2.6s ease infinite}
@keyframes fab-pulse{
  0%{box-shadow:0 0 0 0 rgba(152,210,235,.5)}
  70%{box-shadow:0 0 0 11px rgba(152,210,235,0)}
  100%{box-shadow:0 0 0 0 rgba(152,210,235,0)}
}
.fab-t{white-space:nowrap;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  opacity:0;transition:opacity .3s .12s}
#fab:hover .fab-t,#fab:focus-visible .fab-t{opacity:1}
@media(max-width:720px){#fab{right:14px;bottom:14px}}

/* ===== HERO ===== */
#accueil{background:var(--eerie);overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;overflow:hidden}
/* Brightness only, no desaturation: motion visible, title readable */
.hero-bg video{width:100%;height:100%;object-fit:cover;opacity:.46;filter:brightness(.6)}
/* Shade behind the text; edges stay visible */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(64% 50% at 50% 44%,rgba(16,21,19,.92),rgba(16,21,19,.62) 58%,rgba(16,21,19,.2) 100%),
  linear-gradient(180deg,rgba(20,26,24,.72),rgba(20,26,24,.3) 38%,rgba(20,26,24,.78) 82%,var(--eerie))}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
/* Text carries its own contrast */
#accueil h1{text-shadow:0 2px 30px rgba(10,13,12,.85),0 1px 4px rgba(10,13,12,.5)}
#vendre{overflow:hidden}
#accueil .sig-lb{text-shadow:0 1px 12px rgba(10,13,12,.9)}
.hero-cta{margin-top:clamp(34px,5.4vh,62px)}
/* Spacing alone separates the pledges from the associates */
.sig{margin-top:clamp(46px,7.4vh,92px);width:min(920px,100%)}
.sig-lb{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);
  font-weight:600;margin-bottom:clamp(14px,2.2vh,20px)}
.sig-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vh,16px) clamp(16px,2vw,30px)}
.sig-list li{display:inline-flex;align-items:center;gap:10px}
/* Natural-colour photos */
.sig-list img{width:clamp(42px,5.6vh,54px);height:clamp(42px,5.6vh,54px);border-radius:50%;
  object-fit:cover;object-position:top;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sig-list em{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.5vh,25px);color:var(--txt);transition:color .3s}
.sig-list li:hover img{transform:scale(1.14)}
.sig-list li:hover em{color:var(--sea)}
/* Centred on the window, not the text column */
.scrolldn{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--mut);transition:color .3s}
.scrolldn:hover{color:var(--sea)}
.scrolldn i{display:block;width:1px;height:28px;background:linear-gradient(180deg,var(--sea),transparent);
  animation:dn 1.9s ease infinite}
@keyframes dn{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ===== KEY FIGURES — animated entrance ===== */
#chiffres{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deep)}
.strip-in{display:grid;grid-template-columns:repeat(var(--n,3),1fr);padding:clamp(38px,5.5vh,60px) 0}
.stat{position:relative;padding:0 34px}
.stat::before{content:"";position:absolute;left:0;top:6%;height:88%;width:1px;background:var(--line);
  transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.stat:first-child{padding-left:0}
.stat:first-child::before{display:none}
.stat b{display:block;font-size:clamp(24px,min(2.8vw,3.6vh),42px);font-weight:600;color:#fff;
  letter-spacing:-.02em;line-height:1.1;
  opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.stat b .u{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea)}
.stat>span{font-size:13px;color:var(--mut);line-height:1.55;display:block;margin-top:10px;font-weight:300;
  max-width:30ch;opacity:0;transition:opacity .7s ease}
#strip.is-in .stat::before{transform:scaleY(1)}
#strip.is-in .stat b{opacity:1;transform:none}
#strip.is-in .stat>span{opacity:1}
#strip.is-in .stat:nth-child(1) b{transition-delay:.05s}
#strip.is-in .stat:nth-child(2) b{transition-delay:.19s}
#strip.is-in .stat:nth-child(3) b{transition-delay:.33s}
#strip.is-in .stat:nth-child(1)>span{transition-delay:.3s}
#strip.is-in .stat:nth-child(2)>span{transition-delay:.44s}
#strip.is-in .stat:nth-child(3)>span{transition-delay:.58s}
#strip.is-in .stat:nth-child(2)::before{transition-delay:.1s}
#strip.is-in .stat:nth-child(3)::before{transition-delay:.24s}
#statnum{font-size:inherit;color:inherit;display:inline;margin:0}
.unip-count{font-size:inherit;color:inherit;display:inline;margin:0}
#strip.is-in .stat:nth-child(4) b{transition-delay:.47s}
#strip.is-in .stat:nth-child(4)>span{transition-delay:.72s}
#strip.is-in .stat:nth-child(4)::before{transition-delay:.38s}
@media(max-width:900px){
  .strip-in{grid-template-columns:1fr;gap:24px;padding:34px 0}
  .stat{padding:0 0 0 20px}
  .stat:first-child{padding-left:20px}
  .stat:first-child::before{display:block}
}

/* ===== SCROLLING TEXT BAR ===== */
.tmarq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--deep);padding:clamp(18px,3vh,28px) 0}
.tmarq .ttrack{display:flex;width:max-content;animation:slide 30s linear infinite;white-space:nowrap}
.tmarq span{font-size:clamp(30px,min(4.4vw,6vh),62px);font-weight:200;letter-spacing:.02em;
  color:var(--sea);padding-right:44px}
.tmarq span b{color:var(--soft);font-weight:200;opacity:.45;font-family:var(--sans);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== ETHOS / SEARCH — columns and principles ===== */
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:center;width:100%}
.two .ph{position:relative;overflow:hidden;border-radius:4px;height:clamp(240px,52vh,520px)}
.two .ph img{width:100%;height:100%;object-fit:cover}
/* Gradient blends the photo into the dark background */
.two .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 46%,rgba(20,26,24,.6))}
/* Gradient joins the photo to the background */
.principes{list-style:none;margin-top:clamp(18px,3vh,32px)}
/* Title and icon centred on their row height */
.principes li{display:flex;gap:20px;align-items:center;padding:clamp(11px,1.7vh,18px) 0;
  border-top:1px solid var(--line);font-weight:300;font-size:clamp(13.5px,1.75vh,15px);
  color:var(--mut);line-height:1.5}
.principes li:last-child{border-bottom:1px solid var(--line)}
.principes li b{color:#fff;font-weight:600;font-size:clamp(15px,1.95vh,16.5px);flex:0 0 200px;letter-spacing:-.01em}
@media(max-width:960px){
  .two{grid-template-columns:1fr;gap:30px}
  .two .ph{height:260px}
  /* Stacked: back to left alignment */
  .principes li{flex-direction:column;align-items:flex-start;gap:5px}
  .principes li b{flex:none}
}

/* ===== THE FACES — one row, auto-scrolling track ===== */
.faces{position:relative;display:flex;gap:var(--fg);
  /* Vertical padding leaves room for the hover glow */
  margin-top:calc(clamp(20px,3.4vh,42px) - 20px);padding:20px 0 22px;
  --fg:clamp(12px,1.4vw,20px);
  /* 4.5 cards visible: the next face peeks in */
  --fw:calc((100% - 4 * var(--fg)) / 4.5)}
/* Double class beats the fade vars set by .swipe */
.faces.swipe{
  /* Fade covers the half-visible card */
  --fade-r:calc(var(--fw) / 2 + var(--fg));
  /* No left fade until the track has scrolled */
  --fade-l:0px}
.faces.swipe.is-scrolled{--fade-l:calc(var(--fw) / 2)}
.face{position:relative;z-index:0;overflow:hidden;background:var(--black);margin:0;
  flex:0 0 var(--fw);
  /* Playing-card proportions */
  border-radius:var(--r-soft);aspect-ratio:5/7;
  box-shadow:0 0 0 1px transparent;
  transition:box-shadow var(--t-hover) ease}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  -webkit-user-drag:none;user-select:none}
/* Shade covers only the card foot at rest */
.face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,12,0),rgba(10,13,12,.6) 44%,rgba(10,13,12,.96));
  transition:height var(--t-hover) var(--e-out)}
.face:hover::after,.face:focus-within::after{height:64%}
/* Card stays still; only border and glow react */
.face:hover,.face:focus-within{z-index:3;
  box-shadow:0 24px 56px rgba(0,0,0,.55),
             0 0 52px 10px rgba(152,210,235,.26),
             0 0 0 1px var(--sea-26)}
/* Name and role always visible; quote on hover */
.face figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 16px 15px}
.face b{color:#fff;font-size:clamp(15px,1.9vh,17px);font-weight:600;display:block;letter-spacing:-.01em}
.face .fr{font-size:9.5px;color:var(--sea);display:block;margin-top:5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.5}
.face .fq{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--mut);
  line-height:1.45;margin-top:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--e-out),opacity .38s ease,margin-top .5s var(--e-out)}
.face:hover .fq,.face:focus-within .fq{max-height:9em;opacity:1;margin-top:9px}
@media(max-width:960px){
  /* Touch: 1.5 cards, quote always shown */
  .faces{--fw:calc((100% - var(--fg)) / 1.5)}
  .face{aspect-ratio:3/4.5}
  .face::after{height:56%}
  .face .fq{max-height:9em;opacity:1;margin-top:9px;font-size:12px;line-height:1.4}
}

/* ===== THE COLLECTIVE ===== */
/* Soft blue halo behind the section */
#collectif{overflow:hidden}
#collectif::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 18% 30%,rgba(152,210,235,.09),transparent 68%),
    radial-gradient(46% 42% at 86% 74%,rgba(61,126,166,.11),transparent 70%)}
#collectif>.wrap{position:relative;z-index:1}

/* ===== THE OFF-MARKET — marquee and sticky stack ===== */
#offmarket>.wrap{position:relative;z-index:2}
.omq{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:5vh;
  pointer-events:none;overflow:hidden;opacity:.5}
.omq-l{display:flex;width:max-content;white-space:nowrap;animation:slide 58s linear infinite}
.omq-l.r{animation-direction:reverse;animation-duration:72s}
.omq-l span{font-size:clamp(70px,11vw,168px);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
  color:rgba(152,210,235,.055);padding-right:50px;line-height:1}
.offgrid{display:grid;grid-template-columns:210px 1fr;gap:42px;align-items:start;margin-top:clamp(28px,4.4vh,54px)}
.otl{position:sticky;top:26vh;list-style:none}
.otl li{position:relative;padding:0 0 clamp(24px,4.2vh,40px) 26px;font-size:12px;color:#6f7875;
  line-height:1.5;transition:color .4s}
.otl li::before{content:"";position:absolute;left:4px;top:5px;bottom:-5px;width:1px;background:var(--line)}
.otl li:last-child::before{display:none}
.otl li::after{content:"";position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line);background:var(--deep);
  transition:background .4s,border-color .4s,box-shadow .4s}
.otl li b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-bottom:4px;transition:color .4s}
.otl li.on b{color:var(--sea)}
.otl li.on::after{background:var(--sea);border-color:var(--sea);box-shadow:0 0 12px var(--sea-45)}

.scard{position:sticky;background:linear-gradient(158deg,#252d2a,#1b2320);
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,3.4vh,40px) clamp(24px,3vw,44px);margin-bottom:22px;
  display:grid;grid-template-columns:auto 1fr .95fr;gap:clamp(20px,2.6vw,36px);align-items:center;
  box-shadow:0 -18px 50px rgba(0,0,0,.42);overflow:hidden}
.scard:nth-child(1){top:calc(var(--hd-h) + 40px)}
.scard:nth-child(2){top:calc(var(--hd-h) + 58px)}
.scard:nth-child(3){top:calc(var(--hd-h) + 76px)}
.scard:nth-child(4){top:calc(var(--hd-h) + 94px)}
/* Cards past the 4th: same 18px step via --i */
.scard{top:calc(var(--hd-h) + 40px + var(--i,0) * 18px)}
/* Background shapes made denser so their motion shows */
.scard::before,.scard::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(52px);opacity:.85;transition:opacity .7s}
/* Shapes breathe continuously; hover only brightens the halo */
.scard::before{width:360px;height:360px;left:-60px;top:-110px;background:rgba(152,210,235,.42);
  animation:blob-a 15s ease-in-out infinite}
.scard::after{width:300px;height:300px;right:10%;bottom:-120px;background:rgba(61,126,166,.5);
  animation:blob-b 19s ease-in-out infinite}
@keyframes blob-a{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(90px,52px) scale(1.2)}
  66%{transform:translate(34px,102px) scale(.9)}}
@keyframes blob-b{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-84px,-58px) scale(1.18)}
  75%{transform:translate(-26px,-104px) scale(.92)}}
.scard:hover::before{opacity:1}
.scard:hover::after{opacity:.95}
.scard>*{position:relative;z-index:1}
/* Long fade so the numeral blends at the bottom */
.scard .n{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(64px,min(8.6vw,15vh),146px);line-height:.78;letter-spacing:-.03em;
  background:linear-gradient(176deg,
    var(--soft) 0%,
    #cbe6f5 22%,
    var(--sea) 44%,
    rgba(152,210,235,.78) 62%,
    rgba(152,210,235,.5) 76%,
    rgba(152,210,235,.28) 87%,
    rgba(152,210,235,.12) 95%,
    rgba(152,210,235,.05) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;white-space:nowrap}
.scard .n i{font-style:italic;-webkit-text-fill-color:var(--sea);color:var(--sea)}
.scard .st b{font-size:clamp(20px,min(2.2vw,3vh),32px);font-weight:600;color:#fff;letter-spacing:-.015em;display:block}
.scard .st .du{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sea);
  font-weight:700;display:block;margin-top:9px}
.scard p{font-size:clamp(13.5px,1.8vh,15px);color:var(--mut);line-height:1.65;font-weight:300;
  margin-top:14px;max-width:44ch}
.scard .sph{border-radius:14px;overflow:hidden;height:clamp(150px,32vh,320px);border:1px solid var(--line)}
/* Natural-colour photo */
.scard .sph img{width:100%;height:100%;object-fit:cover}
@media(max-width:1100px){.offgrid{grid-template-columns:1fr}.otl{display:none}}
@media(max-width:960px){
  .scard{grid-template-columns:1fr;padding:24px;gap:14px}
  .scard:nth-child(n){top:calc(var(--hd-h) + 18px)}
  .scard .n{font-size:60px}
  .scard .sph{height:180px;order:-1}
  .omq{opacity:.35}
}

/* ===== THE GUARANTEES ===== */
.big3{font-size:1.85em;line-height:.75;vertical-align:-.09em;margin-right:.04em}
/* Balanced two-line title on small screens */
#garanties h2{text-wrap:balance}
.gar{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:clamp(16px,1.8vw,22px);
  margin-top:clamp(28px,4.6vh,58px);width:100%}
/* Title is the focus: centred, large, icon above */
.g{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--black);
  height:clamp(250px,50vh,430px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(20px,3vh,32px) clamp(18px,2vw,28px);cursor:default;
  transition:border-color .45s}
/* Shade keeps the big title readable */
.g>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;
  transition:opacity .6s}
.g::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 54% at 50% 46%,rgba(10,13,12,.62),rgba(10,13,12,.2) 78%,transparent),
    linear-gradient(180deg,rgba(10,13,12,.42),rgba(10,13,12,.5) 46%,rgba(10,13,12,.9))}
.g{box-shadow:0 0 0 0 rgba(152,210,235,0)}
/* Card does not move on hover */
.g:hover,.g:focus-visible{border-color:var(--sea-45);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 60px 12px rgba(152,210,235,.3)}
.g:hover>img,.g:focus-visible>img{opacity:.6}
/* Icon above the title, centred */
.gmark{position:relative;z-index:2;display:block;
  width:clamp(34px,4.4vh,44px);height:clamp(34px,4.4vh,44px);
  margin:0 auto clamp(12px,2.2vh,20px);color:var(--sea);opacity:.92;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.75))}
/* Paragraph out of flow so the title stays centred */
.gb{position:relative;z-index:2;width:100%}
.gb b{font-size:clamp(24px,3.4vh,34px);font-weight:600;color:#fff;display:block;
  letter-spacing:-.02em;line-height:1.12;text-wrap:balance;
  text-shadow:0 2px 16px rgba(0,0,0,.85)}
.gb p{position:absolute;left:0;right:0;top:calc(100% + clamp(10px,1.6vh,15px));
  font-size:clamp(13px,1.75vh,14.5px);color:#c4d3ce;line-height:1.6;font-weight:300;
  text-shadow:0 1px 10px rgba(0,0,0,.9);text-wrap:pretty;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .42s ease,transform .5s var(--e-out)}
.g:hover .gb p,.g:focus-visible .gb p,.g:focus-within .gb p{opacity:1;transform:none}
@media(max-width:960px){
  .gar{grid-template-columns:1fr;gap:12px}
  .g{height:auto;min-height:230px;padding:30px 22px}
  /* Touch: paragraph back in the flow */
  .gb p{position:static;opacity:1;transform:none;margin-top:12px}
}

/* ===== THE CIRCLE — rings centred on the content ===== */
#cercle{background:var(--black);overflow:hidden;text-align:center}
#cercle>.wrap{position:relative}
.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.rings i{position:absolute;width:150px;height:150px;border:1px solid var(--sea-26);border-radius:50%;
  animation:ripple 7s linear infinite}
.rings i:nth-child(2){animation-delay:1.75s}
.rings i:nth-child(3){animation-delay:3.5s}
.rings i:nth-child(4){animation-delay:5.25s}
@keyframes ripple{from{transform:scale(.9);opacity:.5}to{transform:scale(8);opacity:0}}
.cercle-in{position:relative;z-index:2}
.adm{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(26px,4.4vh,52px);text-align:left}
.adm .a{border-left:1px solid var(--line);padding-left:20px;transition:border-color .4s}
.adm .a:hover{border-color:var(--sea)}
.adm .a b{display:block;font-size:clamp(17px,min(1.8vw,2.4vh),26px);font-weight:600;color:#fff;
  letter-spacing:-.015em;line-height:1.18}
.adm .a b .u{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sea)}
/* Admission counter readable from afar */
.adm .a b .u--24{font-size:2.1em;line-height:.85;display:inline-block;color:var(--soft);
  text-shadow:0 0 26px rgba(152,210,235,.5)}
.adm .a p{font-size:clamp(12.5px,1.65vh,13.5px);color:var(--mut);line-height:1.55;font-weight:300;margin-top:9px}
#cercle .hero-cta{margin-top:clamp(26px,4.4vh,48px)}
@media(max-width:960px){.adm{grid-template-columns:1fr 1fr;gap:24px 18px}}
@media(max-width:600px){.adm{grid-template-columns:1fr}}

/* ===== SELLING — four struck-through refusals ===== */
.rayes{list-style:none;margin-top:clamp(14px,2.4vh,38px);border-top:1px solid var(--line)}
.raye{display:grid;grid-template-columns:52px 1fr;gap:0 20px;align-items:baseline;
  padding:clamp(11px,2vh,30px) 0;border-bottom:1px solid var(--line)}
.rx{font-size:10.5px;letter-spacing:.2em;color:var(--mut);font-weight:700;padding-top:.7em}
/* Strike line is a background gradient, not an SVG */
.rw{display:inline;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,min(4vw,5.4vh),54px);line-height:1.1;letter-spacing:-.015em;color:var(--txt);
  --rs-h:clamp(4px,.11em,8px);
  background-image:linear-gradient(var(--sea),var(--sea));
  background-repeat:no-repeat;background-position:0 56%;
  background-size:0% var(--rs-h);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.05s cubic-bezier(.62,0,.3,1),
             color .8s ease .35s,opacity .8s ease .35s}
.raye.is-struck .rw{color:var(--mut);opacity:.62;background-size:100% var(--rs-h)}
.rd{font-size:clamp(12.5px,1.7vh,14.5px);color:var(--mut);line-height:1.5;font-weight:300;
  margin-top:clamp(5px,1vh,10px);max-width:52ch}
@media(max-width:700px){.raye{grid-template-columns:1fr;gap:6px}.rx{padding-top:0}}
/* No box: text and button sit on the section, glow behind */
/* No overflow:hidden (it clipped the glow) */
.elig{position:relative;display:flex;gap:24px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:clamp(14px,2.4vh,40px);padding:clamp(15px,2.3vh,28px) 0;
  background:none;border:none;border-radius:0}
/* Glow overflows on purpose; the section clips it */
.elig::before{content:"";position:absolute;top:-52%;bottom:-52%;left:0;width:46%;
  z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(152,210,235,.3),rgba(152,210,235,.09) 52%,transparent 74%);
  animation:elig-sweep 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes elig-sweep{
  0%{transform:translateX(-115%);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(235%);opacity:0}}
.elig>div{position:relative;z-index:2;flex:1;min-width:270px}
.elig b{font-size:clamp(16px,2.1vh,18px);color:#fff;font-weight:600;display:block}
.elig span{font-size:clamp(13px,1.7vh,14px);color:var(--mut);font-weight:300;display:block;margin-top:6px;max-width:56ch}
.elig .btn{position:relative;z-index:2}

/* ===== SEARCH — full-bleed half screen ===== */
.sec--split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0;min-height:100svh}
.sp-txt{display:flex;align-items:center;padding:clamp(48px,7vh,88px) clamp(20px,4vw,48px)}
.sp-in{width:100%;max-width:560px;margin-left:auto;padding-right:clamp(16px,3vw,44px)}
.sp-img{position:relative;overflow:hidden;background:var(--black)}
/* Natural-colour photo, gradient blend */
.sp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.sp-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--deep) 0%,rgba(20,26,24,.4) 24%,transparent 58%)}
.sp-in .principes li{padding:clamp(10px,1.5vh,15px) 0}
.sp-in .hero-cta{margin-top:clamp(18px,2.8vh,30px)}
@media(max-width:960px){
  .sec--split{grid-template-columns:1fr;min-height:0}
  .sp-txt{padding:56px 24px;order:2}
  .sp-in{margin-left:0;padding-right:0;max-width:none}
  .sp-img{order:1;height:38vh}
  .sp-img::after{background:linear-gradient(180deg,transparent 40%,var(--deep))}
}

/* ===== TERRITORIES — list, wireframe globe, continents ===== */
#territoires{background:var(--black);overflow:hidden}
.terr{display:grid;grid-template-columns:1fr minmax(260px,40%);gap:clamp(24px,3.4vw,44px);
  align-items:center;margin-top:clamp(16px,2.6vh,34px)}
.trows{max-width:600px}
.trow{display:flex;align-items:baseline;gap:14px;padding:clamp(7px,1.35vh,15px) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:clamp(17px,min(2.4vw,3.1vh),34px);font-weight:300;color:#cfd8d4;cursor:pointer;
  letter-spacing:-.01em;transition:color .3s,padding-left .35s cubic-bezier(.16,1,.3,1)}
.trow::before{content:"";width:0;height:1px;background:var(--sea);flex-shrink:0;
  transition:width .35s cubic-bezier(.16,1,.3,1)}
.trow:hover,.trow.on{color:#fff;padding-left:6px}
.trow:hover::before,.trow.on::before{width:24px}
.globe{display:grid;place-items:center}
.globe svg{width:100%;max-width:min(400px,44vh);height:auto;overflow:visible}
.g-limb{fill:none;stroke:var(--sea-26);stroke-width:1}
/* Graticule and continents redrawn every frame */
.g-par path{fill:none;stroke:rgba(152,210,235,.13);stroke-width:.75;stroke-linecap:round}
.g-mer path{fill:none;stroke:rgba(152,210,235,.18);stroke-width:.75;stroke-linecap:round}
.g-cont path{fill:none;stroke:rgba(152,210,235,.42);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
#gpts circle{fill:var(--sea);opacity:0;transition:opacity .4s}
#gpts circle.on{opacity:1}
#gpts circle.home{opacity:.5}
/* Route drawn in full, revealed by dash (see main.js) */
#garcs path{fill:none;stroke:var(--sea);stroke-width:2.2;stroke-linecap:round;opacity:1}
/* Glowing tip moving along the route */
#garcs .arc-head{fill:var(--soft);stroke:none;filter:drop-shadow(0 0 5px var(--sea))}
#glabel{fill:var(--sea);font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transition:opacity .35s}
#glabel.on{opacity:1}
.clocks{display:flex;gap:clamp(20px,3vw,38px);margin-top:clamp(18px,3vh,38px);flex-wrap:wrap}
.clock b{font-size:clamp(18px,2.4vh,23px);color:#fff;font-weight:600;display:block;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);font-weight:700}
.clock .cl-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sea);
  margin-right:7px;vertical-align:2px}
@media(max-width:960px){
  .terr{grid-template-columns:1fr;gap:26px}
  .globe{order:-1}
  .globe svg{max-width:230px}
  .clocks{gap:20px}
}

/* ===== THE FILM — scroll scrub ===== */
#film{padding:0}
.film-track{position:relative;height:260vh}
.film-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(16px,2.6vh,30px);overflow:hidden;padding:var(--hd-h) 24px 24px}
.film-head{text-align:center;max-width:740px;opacity:var(--fh,1);transition:opacity .2s linear}
.film-head .lead{margin-left:auto;margin-right:auto}
/* 9:16 frame on a blue halo */
.film-frame{position:relative;height:min(62vh,548px);aspect-ratio:9/16;width:auto;max-width:94vw;
  border-radius:18px;overflow:hidden;
  background:#000;border:1px solid var(--line);transform:scale(var(--fs,.58));transform-origin:center;
  box-shadow:0 0 90px 16px rgba(152,210,235,.2),0 30px 90px rgba(0,0,0,.6)}
.film-stage::before{content:"";position:absolute;left:50%;top:52%;width:min(90vh,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(152,210,235,.16),rgba(152,210,235,.05) 45%,transparent 68%);
  animation:film-glow 11s ease-in-out infinite}
@keyframes film-glow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
.film-head,.film-frame{position:relative;z-index:1}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block}
/* Controls: tap the film to play/pause, glass bar with play, progress and sound */
.film-ui{position:absolute;inset:0;z-index:3}
.film-tap{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.film-tap:focus-visible{outline:2px solid var(--sea);outline-offset:-4px;border-radius:18px}
.film-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;padding:6px;
  border-radius:999px;background:rgba(10,13,12,.42);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
/* Shown once the frame is open; hidden again while the film plays untouched */
.film-frame.ui-on .film-bar{opacity:1;transform:none;pointer-events:auto}
.film-frame.ui-on.ui-idle .film-bar{opacity:0;transform:translateY(12px);pointer-events:none}
.film-btn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  transition:transform .25s var(--e-out),background .3s,box-shadow .3s,color .3s}
.film-btn svg{width:18px;height:18px;display:block}
.film-btn:hover{transform:scale(1.08)}
.film-btn:active{transform:scale(.94)}
.film-play{background:linear-gradient(180deg,#e8f4fb 0%,var(--sea) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 18px 2px rgba(152,210,235,.35)}
.film-play svg{fill:var(--eerie)}
.film-play .i-play{margin-left:2px}
.film-play .i-pause,.film-frame.is-playing .film-play .i-play{display:none}
.film-frame.is-playing .film-play .i-pause{display:block}
/* Progress: thin line, thickens with a thumb on hover or drag */
.film-progress{position:relative;flex:1;height:26px;cursor:pointer;touch-action:none}
.film-progress::before,.film-progress i{content:"";position:absolute;left:0;top:50%;height:3px;border-radius:3px;
  transform:translateY(-50%);transition:height .2s}
.film-progress::before{right:0;background:rgba(255,255,255,.2)}
.film-progress i{width:0;background:var(--sea);box-shadow:0 0 10px rgba(152,210,235,.6)}
.film-progress i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px rgba(152,210,235,.9);transform:translateY(-50%) scale(0);transition:transform .2s var(--e-out)}
.film-progress:hover::before,.film-progress:hover i,
.film-frame.is-seeking .film-progress::before,.film-frame.is-seeking .film-progress i{height:5px}
.film-progress:hover i::after,.film-progress:focus-visible i::after,
.film-frame.is-seeking .film-progress i::after{transform:translateY(-50%) scale(1)}
.film-progress:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:6px}
/* Sound: speaker with waves, or crossed out when muted */
.film-snd{background:rgba(255,255,255,.08);color:var(--txt)}
.film-snd:hover{background:rgba(255,255,255,.16)}
.film-snd svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.film-snd .spk{fill:currentColor;stroke:none}
.film-snd .x,.film-frame.is-muted .film-snd .w1,.film-frame.is-muted .film-snd .w2{display:none}
.film-frame.is-muted .film-snd .x{display:inline}
/* Browser held the sound back: the sound button rings (any click or tap turns the sound on) */
@keyframes film-snd-ring{0%,100%{box-shadow:0 0 0 0 rgba(152,210,235,.45)}60%{box-shadow:0 0 0 8px rgba(152,210,235,0)}}
.film-frame.snd-prompt.is-muted .film-snd{background:rgba(152,210,235,.16);color:var(--sea);
  animation:film-snd-ring 2.2s ease-in-out infinite}
/* Centre flash confirming play or pause */
.film-flash{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;opacity:0;
  background:rgba(10,13,12,.45);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.film-flash svg{width:30px;height:30px;fill:#fff;grid-area:1/1}
.film-flash .i-play{margin-left:3px}
.film-flash[data-icon="play"] .i-pause,.film-flash[data-icon="pause"] .i-play{display:none}
.film-flash.go{animation:film-flash .7s var(--e-out)}
@keyframes film-flash{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
/* Play hint centred on the video */
.film-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  opacity:var(--fhint,1);transition:opacity .35s;pointer-events:none;text-align:center}
.film-hint i{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  border:1px solid var(--sea);background:rgba(10,13,12,.55);
  animation:film-pulse 2.4s ease-in-out infinite}
.film-hint i svg{fill:var(--sea);margin-left:3px}
.film-hint b{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt);
  font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.film-hint em{font-style:normal;font-size:11px;color:var(--mut);font-weight:300;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
@keyframes film-pulse{
  0%,100%{box-shadow:0 0 26px 3px rgba(152,210,235,.28);transform:scale(1)}
  50%{box-shadow:0 0 46px 12px rgba(152,210,235,.5);transform:scale(1.07)}}
#film.no-scrub .film-track{height:auto}
#film.no-scrub .film-stage{position:static;height:auto;padding:clamp(56px,7.5vh,104px) 24px}
#film.no-scrub .film-frame{transform:none}
#film.no-scrub .film-hint,#film.no-scrub .film-ui{display:none}
/* Floating button steps aside while the film is open */
#fab{transition:width .5s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s,opacity .4s var(--e-out),transform .4s var(--e-out)}
body.film-on #fab{opacity:0;transform:scale(.8);pointer-events:none}

/* ===== FAQ ===== */
.faq{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin-top:clamp(20px,3.4vh,42px);width:100%}
.fq-item{border-bottom:1px solid var(--line);background:var(--card)}
.fq-item:last-child{border-bottom:none}
.fq-q{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:clamp(15px,2.2vh,23px) clamp(18px,2.2vw,28px);cursor:pointer;
  font-size:clamp(15px,min(1.6vw,2.1vh),20px);font-weight:600;color:#fff;user-select:none;
  background:none;border:none;width:100%;text-align:left}
.fq-q:hover{color:var(--sea)}
.fq-q .pl{color:var(--sea);font-size:23px;font-weight:300;transition:transform .35s ease;flex-shrink:0;line-height:1}
.fq-item.open .pl{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.fq-a p{padding:2px clamp(18px,2.2vw,28px) clamp(16px,2.4vh,24px);
  font-size:clamp(13.5px,1.8vh,15px);color:var(--mut);line-height:1.65;font-weight:300;max-width:74ch}

/* ===== CONTACT — centred column ===== */
#contact{background:var(--eerie)}
#contact .col{max-width:760px;margin:0 auto;width:100%;text-align:center}
/* Same template as .faq */
/* Form uses the off-market card style */
.formbox{position:relative;overflow:hidden;text-align:left;margin-top:clamp(16px,2.6vh,32px);
  border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(158deg,#252d2a,#1b2320);
  box-shadow:0 -18px 50px rgba(0,0,0,.42)}
.formbox::before{content:"";position:absolute;width:320px;height:320px;left:-100px;top:-150px;
  border-radius:50%;filter:blur(58px);opacity:.5;pointer-events:none;z-index:0;
  background:rgba(152,210,235,.16);animation:blob-a 17s ease-in-out infinite}
.formbox::after{content:"";position:absolute;width:250px;height:250px;right:8%;bottom:-160px;
  border-radius:50%;filter:blur(58px);opacity:.5;pointer-events:none;z-index:0;
  background:rgba(61,126,166,.2);animation:blob-b 23s ease-in-out infinite}
.fhead,.fprog,.fstep{position:relative;z-index:1}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:clamp(10px,1.5vh,15px) clamp(18px,2.2vw,28px);border-bottom:1px solid var(--line)}
.fhead span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7d8b86;font-weight:700}
.fback{background:none;border:none;color:#6f7875;font-size:12px;cursor:pointer;letter-spacing:.06em;
  padding:4px;transition:color .3s;visibility:hidden}
.fback.show{visibility:visible}
.fback:hover{color:var(--sea)}
.fprog{height:1px;background:var(--line);overflow:hidden}
.fprog i{display:block;height:100%;width:0;background:var(--sea);
  transition:width .45s cubic-bezier(.16,1,.3,1);box-shadow:0 0 10px var(--sea-45)}
.fstep{padding:clamp(13px,1.8vh,20px) clamp(18px,2.2vw,28px)}
/* Form is sans-serif only */
.formbox,.formbox *{font-family:var(--sans);font-style:normal}
/* Step question reads as a title: blue, centred, underlined */
.fstep h4{font-weight:600;font-size:clamp(15.5px,2.05vh,20px);color:var(--sea);
  text-align:left;letter-spacing:.03em;line-height:1.35;
  margin:0 0 clamp(12px,1.9vh,21px);padding-bottom:clamp(9px,1.4vh,15px);
  max-width:38ch;border-bottom:1px solid var(--line)}
/* Choices as ruled rows, like the FAQ */
.fbig{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;
  padding:clamp(13px,1.9vh,18px) 2px;border:none;border-top:1px solid var(--line);background:none;
  color:#fff;font-size:clamp(15px,2vh,17px);font-weight:600;cursor:pointer;text-align:left;
  transition:padding-left .3s cubic-bezier(.16,1,.3,1),color .3s}
.fbig small{display:block;font-size:12.5px;color:var(--mut);font-weight:300;margin-top:4px;letter-spacing:0}
.fbig .ar{color:var(--sea);font-weight:300;font-size:19px;transition:transform .3s}
.fbig:hover{padding-left:10px}
.fbig:hover .ar{transform:translateX(5px)}
/* The site's only pill shape */
.fopts{display:flex;flex-wrap:wrap;gap:9px}
.fopt{border:1px solid var(--line);border-radius:999px;padding:11px 19px;font-size:14px;color:#cfd8d4;
  cursor:pointer;user-select:none;background:transparent;transition:border-color .25s,background .25s,color .25s}
.fopt:hover{border-color:var(--sea)}
.fopt.on{background:var(--sea);border-color:var(--sea);color:var(--eerie);font-weight:600}
.ffree{margin-top:16px}
.ffree input{width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:12px 2px;font-size:16px;font-family:inherit;color:var(--txt);outline:none;transition:border-color .3s}
.ffree input:focus{border-color:var(--sea)}
.fnext{margin-top:22px}
.who{display:flex;gap:14px;align-items:center;background:var(--deep);border:1px solid var(--line);
  border-radius:10px;padding:14px 16px;margin-bottom:20px}
/* Natural-colour photo */
.who img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;flex-shrink:0}
.who b{font-size:13.5px;color:#fff;display:block;letter-spacing:-.01em}
.who span{font-size:12px;color:var(--mut);font-weight:300;line-height:1.45;display:block;margin-top:3px}
.who .wk{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sea);font-weight:700;
  display:block;margin-bottom:3px}
.formbox label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin:16px 0 5px}
.formbox input,.formbox textarea{width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;padding:11px 2px;font-size:15px;font-family:inherit;color:var(--txt);
  outline:none;transition:border-color .3s}
.formbox input:focus,.formbox textarea:focus{border-color:var(--sea)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ok-msg{background:var(--sea-12);border:1px solid var(--sea-45);border-radius:10px;padding:17px 19px;
  font-size:14px;color:var(--sea);line-height:1.55}
.frecap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.frecap span{font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;letter-spacing:.04em}
/* Info block moves under the form */
/* Stack: form, photo, contact details */
.cbelow{display:block;margin-top:clamp(12px,1.8vh,20px);text-align:left}
.cbelow .coord{margin-top:clamp(9px,1.5vh,16px)}
.cteam{border-radius:12px;overflow:hidden}
/* Natural-colour photo */
.cteam img{display:block;width:100%;height:clamp(72px,9.5vh,126px);object-fit:cover;object-position:center 42%}
.coord{list-style:none}
.coord li{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:baseline;
  padding:clamp(6px,1vh,10px) 0;border-top:1px solid var(--line)}
.coord li:last-child{border-bottom:1px solid var(--line)}
.cl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sea);font-weight:700}
.cv{font-size:clamp(13px,1.7vh,14.5px);color:#cfd8d4;font-weight:300;line-height:1.45}
.fine{font-size:11px;color:#6f7875;line-height:1.5;margin-top:clamp(9px,1.4vh,15px);text-align:center}
@media(max-width:760px){
  .cbelow{grid-template-columns:1fr;gap:18px}
  .coord li{grid-template-columns:1fr;gap:3px}
  .frow{grid-template-columns:1fr}
}

/* ===== FOOTER ===== */
footer{background:#0d1110;color:var(--mut);border-top:1px solid var(--line)}
.ft-in{max-width:1180px;margin:0 auto;padding:56px clamp(20px,4vw,48px) 28px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer img{height:36px;margin-bottom:14px;opacity:.95}
footer .base-line{font-size:12.5px;line-height:1.6;font-weight:300}
footer h6{color:#fff;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:13px;font-weight:700}
footer ul{list-style:none}
footer li{font-size:12.5px;margin-bottom:9px;font-weight:300}
footer li a:hover{color:var(--sea)}
.base{border-top:1px solid #222a27;max-width:1180px;margin:0 auto;padding:17px clamp(20px,4vw,48px);
  font-size:11px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#5c6663}
@media(max-width:960px){.ft-in{grid-template-columns:1fr 1fr}}

/* ===== SHARED ANIMATIONS ===== */
/* Content reveals in sequence when the section is live */
.rvl{opacity:0;transform:translateY(34px);filter:blur(12px);
  transition:opacity var(--t-rvl) ease,transform var(--t-rvl) var(--e-out),filter var(--t-rvl) ease}
.sec.live .rvl{opacity:1;transform:none;filter:blur(0)}
/* Cascade starts at the h2 */
.sec.live .d2{transition-delay:.15s}
.sec.live .d3{transition-delay:.3s}
/* Accent word: blue Playfair italic, no underline */
/* No wipe reveal on cards */
h1 .sw,h2 .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
h1 .sw i,h2 .sw i{display:inline-block;font-style:inherit;transform:translateY(118%);
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
h1.in .sw i,h2.in .sw i{transform:none}
.two .ph{clip-path:inset(0 100% 0 0 round 4px);transition:clip-path 1.2s var(--e-sweep)}
.sec.live .two .ph{clip-path:inset(0 0 0 0 round 4px)}

/* ===== ACCESSIBILITY ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  h1 .sw i,h2 .sw i{transform:none!important}
  .two .ph{clip-path:none!important}
  #nib,#nibtrail{display:none!important}
  #pre{display:none!important}
  .raye .rw{background-size:100% var(--rs-h)!important}
  .face .fq{max-height:none!important;opacity:1!important}
  .face::after{height:56%!important}
  .gb p{opacity:1!important;transform:none!important}
  .film-frame{transform:none!important}
  .stat b,.stat>span{opacity:1!important;transform:none!important}
  .stat::before{transform:scaleY(1)!important}
}


/* ===== SHARED COMPONENTS ===== */

/* ===== AUTO-SCROLLING TRACKS — faces and references ===== */
.swipe{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:auto;overscroll-behavior-x:contain;
  /* pan-y: the finger keeps vertical page scroll */
  touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;
  /* Edges fade to hint that the track continues */
  --fade:clamp(28px,4.5%,72px);
  --fade-l:var(--fade);
  --fade-r:var(--fade);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%)}
.swipe::-webkit-scrollbar{display:none}
.swipe.is-grabbing{cursor:grabbing}
.swipe img{-webkit-user-drag:none}
/* Arrow header shared by both carousels */
.rhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.anav{flex:none;white-space:nowrap}
.anav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--txt);font-size:16px;cursor:pointer;margin-left:9px;
  transition:background var(--t-hover),color var(--t-hover),border-color var(--t-hover)}
.anav button:hover{background:var(--sea);border-color:var(--sea);color:var(--eerie)}

/* Line icons (Ethos, Guarantees) */
.ico{width:var(--ico);height:var(--ico);flex:none;fill:none;stroke:var(--sea);
  stroke-width:var(--ico-w);stroke-linecap:round;stroke-linejoin:round}
/* Row alignment set once in .principes li */
/* Icons share a 24x24 grid and stroke */
.gmark svg{display:block;width:100%;height:100%;fill:none;stroke:var(--sea);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* Hero pledges: three grey lines, no box */
.pledge{list-style:none;display:grid;grid-template-columns:repeat(var(--n,3),1fr);
  align-items:start;gap:clamp(16px,2.4vw,34px);
  width:min(840px,100%);margin:clamp(22px,3.2vh,34px) auto 0;
  font-size:12.5px;font-weight:300;line-height:1.5;color:var(--mut);
  text-align:center;text-wrap:balance;
  text-shadow:0 1px 12px rgba(10,13,12,.9)}
@media(max-width:720px){
  .pledge{grid-template-columns:1fr;gap:7px;width:min(340px,100%)}
}

/* Rising blue dust */
.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.dust i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:rgba(152,210,235,.5);animation:drift linear infinite;
  animation-play-state:paused}
.sec.live .dust i{animation-play-state:running}   /* Paused off screen */
@keyframes drift{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.8}
  88%{opacity:.5}
  100%{transform:translateY(-102vh) translateX(var(--dx,14px));opacity:0}}

/* Group life photo strip */
#collectif{overflow:hidden;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,44px)}
#collectif>.wrap{position:relative;z-index:2}
/* Outline title sits under the photo strip */
.kt{position:relative;display:flex;width:max-content;max-width:none;
  white-space:nowrap;z-index:1;pointer-events:none;overflow:hidden;
  animation:ktm 42s linear infinite}
/* Spans filled by main.js so -50% never shows a gap */
.kt span{font-size:clamp(38px,5.2vw,76px);font-weight:700;line-height:1.06;
  text-transform:uppercase;letter-spacing:.09em;
  color:transparent;-webkit-text-stroke:1.1px rgba(225,242,254,.16);padding-right:.5em}
/* Outline strip spaces the section bottom */
#collectif{padding-bottom:clamp(28px,4vh,56px)}
@keyframes ktm{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mstage{position:relative;z-index:2;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mrow{display:flex;gap:18px;width:max-content;margin-bottom:18px;
  animation:mgo 46s linear infinite}
.mrow.rev{animation:mgo2 52s linear infinite;margin-bottom:0}
.mrow:hover{animation-play-state:paused}   /* Pause only the hovered row */
@keyframes mgo{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mgo2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mph{position:relative;flex:none;width:clamp(230px,24vw,330px);aspect-ratio:330/215;
  border-radius:var(--r-soft);overflow:hidden;transition:transform var(--t-hover) var(--e-out)}
.mrow.rev .mph{width:clamp(210px,22vw,300px)}
.mph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--e-out)}
.mph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(10,13,12,.55))}
.mph:hover{transform:scale(1.05) rotate(-.5deg);z-index:5}
.mph:hover img{transform:scale(1.06)}

/* References as an address book */
/* stretch keeps .astrip at window width so it scrolls */
#references{flex-direction:column;align-items:stretch;justify-content:center;
  gap:clamp(12px,2.2vh,26px)}
/* .rhead and .anav are defined with .swipe */
/* Track starts at the window edge; first card aligned by padding */
.astrip{display:flex;gap:20px;width:100%;overflow-x:auto;
  --agut:calc(max(0px,(100% - 1180px) / 2) + clamp(20px,4vw,48px));
  padding:8px var(--agut) 14px;scroll-padding-inline:var(--agut);
  /* No smooth scroll here: autoSwipe handles the easing */
  scrollbar-width:none;
  /* Fade ends where the first card starts */
  --fade:max(24px,var(--agut))}
.astrip::-webkit-scrollbar{display:none}
/* Narrower, taller cards; no movement on hover */
.acard{position:relative;flex:none;width:clamp(210px,17vw,260px);aspect-ratio:3/4.6;
  max-height:66vh;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(150deg,#2a3a41,var(--eerie));
  border:1px solid var(--line);
  transition:box-shadow var(--t-hover) ease,border-color var(--t-hover)}
.acard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(15px) brightness(.6);transform:scale(1.12);transition:filter .8s ease}
.acard:hover img{filter:blur(9px) brightness(.72)}
.acard:hover{border-color:var(--sea-45);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 62px 12px rgba(152,210,235,.28)}
.acard .ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(10,13,12,.92))}
.acard .dst,.acard .ie{position:absolute;top:14px;z-index:3;font-size:9.5px;
  letter-spacing:.16em;font-weight:700;padding:5px 11px;border-radius:11px;text-transform:uppercase}
/* Place name never goes under the year badge */
.acard .dst{left:14px;background:rgba(232,237,235,.94);color:var(--eerie);
  max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .ie{right:14px;background:var(--sea);color:var(--eerie)}
.acard .alock{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.acard .alock svg{width:30px;height:30px;fill:none;stroke:var(--sea);stroke-width:1.3;opacity:.45}
.acard .bx{position:absolute;left:20px;right:20px;bottom:18px;z-index:3}
.acard .bx b{display:block;font-size:clamp(16px,2vh,20px);font-weight:600;color:#fff;letter-spacing:-.01em}
.acard .pr2{display:block;font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.45;font-weight:300}
.acard .amore{display:block;margin-top:11px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--sea);opacity:0;transform:translateY(9px);transition:.4s var(--e-out)}
.acard:hover .amore,.acard:focus-visible .amore{opacity:1;transform:none}
/* Narrow cards: smaller badges */
@media(max-width:520px){
  .acard .dst,.acard .ie{font-size:8.5px;letter-spacing:.1em;padding:4px 9px}
  .acard .dst{max-width:calc(100% - 112px)}
}

/* Removed #chemins section and its rules */

/* ===== ACCESSIBILITY — no motion with reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1!important;transform:none!important;filter:none!important}
  .two .ph{clip-path:none!important}
  .dust{display:none!important}
  .mrow,.kt{animation:none!important}
  .mrow.rev{transform:none}
}

/* Form error message (see inc/form.php) */
.f-err{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#e8b4b4;
}

/* Free content blocks, styled for the dark page */
.unip-libre{color:var(--ink,#e8eef2);font-size:16px;line-height:1.65;text-align:left}
.unip-libre > *:first-child{margin-top:0}
.unip-libre > *:last-child{margin-bottom:0}
.unip-libre h1,.unip-libre h2,.unip-libre h3,.unip-libre h4{
  font-family:var(--sans);font-weight:400;line-height:1.15;margin:1.6em 0 .5em;color:#fff}
.unip-libre h1{font-size:clamp(30px,5vw,52px)}
.unip-libre h2{font-size:clamp(26px,4vw,40px)}
.unip-libre h3{font-size:clamp(20px,3vw,28px)}
.unip-libre h4{font-size:18px;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.unip-libre em,.unip-libre i{font-family:var(--serif);font-style:italic;color:var(--sea)}
.unip-libre p{margin:0 0 1.1em}
.unip-libre a{color:var(--sea);text-decoration:underline;text-underline-offset:3px}
.unip-libre a:hover{text-decoration-thickness:2px}
.unip-libre ul,.unip-libre ol{margin:0 0 1.2em;padding-left:1.3em}
.unip-libre li{margin:.35em 0}
.unip-libre img,.unip-libre video,.unip-libre iframe{max-width:100%;height:auto;border-radius:14px;display:block}
.unip-libre figure{margin:1.6em 0}
.unip-libre figcaption{margin-top:.6em;font-size:13px;opacity:.6}
.unip-libre blockquote{
  margin:1.6em 0;padding-left:18px;border-left:2px solid var(--sea);
  font-family:var(--serif);font-style:italic;font-size:1.15em;color:#fff}
.unip-libre hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:2.4em 0}
.unip-libre table{width:100%;border-collapse:collapse;font-size:14px}
.unip-libre th,.unip-libre td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
.unip-libre .wp-block-button__link{
  display:inline-block;padding:14px 28px;border-radius:999px;
  background:var(--sea);color:#0b1013;text-decoration:none;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px}
@media(max-width:720px){ .unip-libre{font-size:15px} }

/* ===== THEME — other pages (legal, 404, fallback) ===== */
/* Header is solid on these pages, so content starts below it */
.sec--page{padding-top:calc(var(--hd-h) + clamp(48px,9vh,110px));min-height:72vh}
.sec--page.sec--fit{padding-top:var(--hd-h)}
.page-col{max-width:760px;margin:0 auto;width:100%}
.page-col > h1,.page-col article > h1{margin-bottom:clamp(26px,4.5vh,44px)}
.page-col--center{text-align:center}
.page-col--center .lead{margin-left:auto;margin-right:auto}
.page-entry + .page-entry{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.page-entry h2{font-size:clamp(22px,3vw,30px);margin-bottom:12px}
.page-entry h2 a:hover{color:var(--sea)}
/* Legal links in the footer base line */
.base-links a{transition:color .3s}
.base-links a:hover{color:var(--sea)}

/* ===== COOKIE BANNER (tarteaucitron) — brand colours ===== */
/* Its stylesheet loads after this one, hence the #tarteaucitronRoot prefix and !important */
#tarteaucitronRoot #tarteaucitronAlertBig{background:rgba(14,19,17,.96)!important;border-top:1px solid var(--line)!important;
  font-family:var(--sans)!important;color:var(--txt)!important;padding:18px clamp(16px,3vw,32px)!important}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert{color:var(--txt)!important;font-family:var(--sans)!important;font-size:14px!important}
#tarteaucitronRoot #tarteaucitronAlertBig button{font-family:var(--sans)!important;border-radius:11px!important;
  font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:11px 18px!important}
#tarteaucitronRoot #tarteaucitronPersonalize2,#tarteaucitronRoot #tarteaucitronAllDenied2{background:var(--sea)!important;color:var(--eerie)!important}
#tarteaucitronRoot #tarteaucitronAllDenied2{background:transparent!important;color:var(--txt)!important;border:1px solid rgba(255,255,255,.22)!important}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl{background:transparent!important;color:var(--mut)!important;
  text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:400!important;text-decoration:underline!important;text-underline-offset:3px}
#tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitronRoot #tarteaucitron #tarteaucitronInfo{background:var(--eerie)!important;border-color:var(--line)!important}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager{background:var(--eerie)!important;border:1px solid var(--sea-45)!important}