/* ============================================================
   FocusLab — shared.css
   Base commune à toutes les pages (tokens, nav, hero, footer,
   typography, accessibilité, mobile). Inclus AVANT tout
   <style> spécifique à une page.
   ============================================================ */

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── TOKENS ───────────────────────────────────────────────── */
:root{
  --o:#ec742c; --o2:#b8541a;
  --serif:'Cormorant Garamond',Georgia,serif;
  --label:'Syne',sans-serif;
  --sans:'Outfit',sans-serif;

  /* Logo treatment — identique partout */
  --logo-size:1.22rem;
  --logo-weight:400;
  --logo-spacing:-.015em;
  --logo-opsz:24;

  /* Couleurs par défaut (dark) — écrasées par data-theme */
  --bg:#0d0c0a; --sf:#141310; --sf2:#1d1a16;
  --bd:#302b24; --tx:#ede8df; --so:#c0b8ac; --mu:#a89c8a;

  /* Hauteur de la bannière construction (pour offsets) */
  --cb-h:38px;
}
[data-theme=dark]{
  --bg:#0d0c0a; --sf:#141310; --sf2:#1d1a16;
  --bd:#302b24; --tx:#ede8df; --so:#c0b8ac; --mu:#a89c8a;
}
[data-theme=light]{
  --bg:#fbf9f1; --sf:#f2ede3; --sf2:#e8e0d0;
  --bd:#d8cfc0; --tx:#1a1713; --so:#4a3e34; --mu:#6e6253;
}

/* ── BASE ─────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--sans); font-size:16px;
  line-height:1.7; overflow-x:hidden;
  transition:background .4s,color .4s;
}
body.no-scroll{overflow:hidden}
body::before{
  content:''; position:fixed; inset:0;
  pointer-events:none; z-index:200;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
}
[data-theme=dark] body::before{opacity:.025}
[data-theme=light] body::before{opacity:0}

/* ── A11Y ─────────────────────────────────────────────────── */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-40px; left:0;
  background:var(--o); color:var(--bg);
  padding:8px 16px; z-index:9999;
  text-decoration:none;
  font-family:var(--label); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{top:0}

/* Focus visible — clavier uniquement, partout */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--o);
  outline-offset:3px;
  border-radius:1px;
}
.btn:focus-visible,.lnk:focus-visible,.btn-reel:focus-visible,
.t-btn:focus-visible,.hbg:focus-visible,.cb-close:focus-visible,
.ck-btn:focus-visible,.sub-btn:focus-visible{
  outline-offset:2px;
}

/* ── LAYOUT ───────────────────────────────────────────────── */
.w{max-width:960px; margin:0 auto; padding:0 44px}
.w-wide{max-width:1200px; margin:0 auto; padding:0 44px}

/* ── LOGO (texte de fallback, hérité partout) ─────────────── */
.logo{
  font-family:var(--serif);
  font-size:var(--logo-size);
  font-weight:var(--logo-weight);
  letter-spacing:var(--logo-spacing);
  color:var(--tx);
  text-decoration:none;
  display:inline-block;
  line-height:1;
}
.logo em{font-style:italic; color:var(--o)}

/* Logo images — switch dark/light */
.logo-img-link,.ft-logo-img-link{
  display:inline-flex; align-items:center;
  text-decoration:none; line-height:0;
}
.nav-logo-img{height:28px; width:auto; display:block; object-fit:contain}
.hero-wordmark{height:clamp(28px,6vw,60px); width:auto; display:block; object-fit:contain}
.ft-logo-img{height:32px; width:auto; display:block; object-fit:contain}
.logo-l{display:none !important}
.logo-d{display:block !important}
[data-theme=dark]  .logo-l{display:none !important}
[data-theme=dark]  .logo-d{display:block !important}
[data-theme=light] .logo-d{display:none !important}
[data-theme=light] .logo-l{display:block !important}
@media(max-width:640px){.nav-logo-img{height:22px}}

/* ── DISCLAIMER BANNER (admin-driven, sits ABOVE construction-bar) ── */
#disclaimer-bar{
  position:fixed; top:0; left:0; right:0; z-index:10000;
  padding:10px 20px;
  display:none; align-items:center; gap:14px;
  font-family:var(--sans); font-size:.85rem; line-height:1.4;
  border-bottom:1px solid var(--bd);
}
#disclaimer-bar.show{display:flex}
#disclaimer-bar .db-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:currentColor; opacity:.8;
}
#disclaimer-bar .db-txt{flex:1; min-width:0}
#disclaimer-bar.t-info   {background:#0f2a3f; color:#9ec9e8; border-color:rgba(120,170,210,.3)}
#disclaimer-bar.t-warning{background:#2d1a0a; color:#e0945c; border-color:rgba(200,105,42,.4)}
#disclaimer-bar.t-success{background:#0f2a1f; color:#7fc7a3; border-color:rgba(80,160,120,.3)}
[data-theme=light] #disclaimer-bar.t-info   {background:#e8f1f8; color:#1f4f72}
[data-theme=light] #disclaimer-bar.t-warning{background:#fbeede; color:#8a4517}
[data-theme=light] #disclaimer-bar.t-success{background:#e6f3ec; color:#1f5a3c}
body.has-disclaimer{padding-top:var(--db-h, 0px); transition:padding-top .3s ease}
body.has-disclaimer.has-banner #construction-bar{top:var(--db-h, 0px)}
body.has-disclaimer.has-banner{padding-top:calc(var(--db-h, 0px) + var(--cb-h-real, var(--cb-h)))}
body.has-disclaimer #mainNav{top:var(--db-h, 0px)}
body.has-disclaimer.has-banner #mainNav{top:calc(var(--db-h, 0px) + var(--cb-h-real, var(--cb-h)))}
@media(max-width:640px){
  #disclaimer-bar{font-size:.78rem; padding:9px 14px; gap:10px}
}

/* ── CONSTRUCTION BANNER ──────────────────────────────────── */
#construction-bar{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:var(--sf); border-bottom:1px solid var(--bd);
  padding:9px 20px; min-height:var(--cb-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  font-family:var(--label); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--so);
  transform:translateY(0); transition:transform .3s ease;
}
#construction-bar.hidden{transform:translateY(-100%)}
#construction-bar .cb-dot{
  width:6px; height:6px; background:var(--o);
  border-radius:50%; flex-shrink:0;
  animation:pu 2s ease-in-out infinite;
}
#construction-bar .cb-txt{flex:1; min-width:0}
#construction-bar .cb-txt a{color:var(--o); text-decoration:none}
#construction-bar .cb-txt a:hover{text-decoration:underline}
#construction-bar .cb-close{
  background:none; border:1px solid var(--bd);
  color:var(--so); padding:4px 11px;
  font-family:var(--label); font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:border-color .2s,color .2s;
  flex-shrink:0;
}
#construction-bar .cb-close:hover{border-color:var(--o); color:var(--o)}
body.has-banner #mainNav{top:var(--cb-h)}
/* Pousse tout le contenu sous la bannière pour éviter la collision avec le hero.
   --cb-h-real est mesurée par shared.js (responsive). */
body.has-banner{padding-top:var(--cb-h-real, var(--cb-h)); transition:padding-top .3s ease}
body.has-banner #construction-bar{height:var(--cb-h-real, var(--cb-h))}
/* Sur mobile : version courte uniquement, single-line, banner compact */
.cb-short{display:none}
@media(max-width:640px){
  #construction-bar{font-size:.5rem; letter-spacing:.06em; padding:7px 12px; gap:8px}
  /* On masque le texte long et on affiche la version courte (data-fl="cb-short") */
  #construction-bar .cb-long{display:none}
  #construction-bar .cb-short{display:inline; font-size:.6rem; letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  /* Fallback CSS-only : si shared.js n'a pas encore wrap le texte (premier rendu, déploiement périmé…),
     on force malgré tout le .cb-txt à rester sur une ligne ellipsée — fini les bandeaux 3 lignes */
  #construction-bar .cb-txt{font-size:.6rem; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  #construction-bar .cb-close{padding:4px 8px; font-size:.55rem; letter-spacing:.06em}
  /* Cache le mot "Fermer" sur très petits écrans, garde juste le × */
  #construction-bar .cb-close .cb-close-lbl{display:none}
}
@media(max-width:380px){
  #construction-bar{padding:6px 10px; gap:6px}
  #construction-bar .cb-short{font-size:.55rem}
}

/* ── COOKIE BANNER ────────────────────────────────────────── */
#cookie-banner{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(12px);
  z-index:9999;
  background:var(--sf); border:1px solid var(--bd);
  border-left:3px solid var(--o);
  padding:18px 24px; max-width:580px;
  width:calc(100% - 48px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  opacity:0; pointer-events:none;
  transition:opacity .4s, transform .4s;
}
#cookie-banner.show{
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.ck-txt{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.04em; color:var(--so); line-height:1.7;
}
.ck-txt a{
  color:var(--o); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.ck-txt a:hover{border-color:var(--o)}
.ck-actions{display:flex; gap:10px; flex-shrink:0}
.ck-btn{
  font-family:var(--label); font-size:.65rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:9px 20px;
  border:1px solid var(--o); background:transparent; color:var(--o);
  cursor:pointer; transition:all .25s; white-space:nowrap;
}
.ck-btn:hover{background:var(--o); color:var(--bg)}
@media(max-width:600px){
  #cookie-banner{flex-direction:column; align-items:flex-start; gap:14px}
}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 44px;
  display:flex; justify-content:space-between; align-items:center;
  transition:all .4s;
}
.nav.float{background:linear-gradient(to bottom,rgba(13,12,10,.96) 0%,transparent 100%)}
.nav.stick{background:var(--bg); border-bottom:1px solid var(--bd)}
[data-theme=light] .nav.float{background:linear-gradient(to bottom,rgba(251,249,241,.97) 0%,transparent 100%)}
[data-theme=light] .nav.stick{background:var(--bg)}
.nav-left{display:flex; align-items:center; gap:20px}
.nav-back{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--so); text-decoration:none; transition:color .3s;
  display:flex; align-items:center; gap:8px;
}
.nav-back svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5}
.nav-back:hover{color:var(--o)}
.nav-right{display:flex; align-items:center; gap:16px}
.nav-links{display:flex; gap:20px; list-style:none}
.nav-links a{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--so); text-decoration:none; transition:color .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--o)}
.nav-sep{
  display:flex; align-items:center;
  color:var(--o); opacity:.5;
  font-size:1.1rem; line-height:1;
  pointer-events:none; user-select:none;
  padding:0 4px; margin-top:-2px;
}

/* ── THEME TOGGLE ─────────────────────────────────────────── */
.t-btn{
  width:36px; height:36px;
  border:1px solid var(--bd); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .3s; flex-shrink:0;
}
.t-btn:hover{border-color:var(--o)}
.t-btn svg{width:14px; height:14px; stroke:var(--so); fill:none; stroke-width:1.5; transition:stroke .3s}
.t-btn:hover svg{stroke:var(--o)}
.t-btn[data-mode=system]{position:relative}
.t-btn[data-mode=system]::after{
  content:""; position:absolute; right:5px; bottom:5px;
  width:5px; height:5px; border-radius:50%;
  background:var(--o); opacity:.9;
}
.i-sun{display:none} .i-moon{display:block}
[data-theme=light] .i-sun{display:block}
[data-theme=light] .i-moon{display:none}

/* ── HAMBURGER ────────────────────────────────────────────── */
.hbg{
  display:none; flex-direction:column; gap:6px;
  background:transparent; border:1px solid var(--bd);
  width:44px; height:44px;
  align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:border-color .3s;
}
.hbg:hover{border-color:var(--o)}
.hbg span{display:block; width:18px; height:1.5px; background:var(--so); transition:all .32s; transform-origin:center}
.hbg.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg); background:var(--o)}
.hbg.open span:nth-child(2){opacity:0; transform:scaleX(0)}
.hbg.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg); background:var(--o)}

/* ── MOBILE MENU ──────────────────────────────────────────── */
.mob-menu{
  position:fixed; inset:0; background:var(--bg);
  z-index:99; display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:28px;
  opacity:0; pointer-events:none; transition:opacity .32s;
}
.mob-menu.open{opacity:1; pointer-events:all}
.mob-bar{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right,var(--o),var(--o2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s .1s;
}
.mob-menu.open .mob-bar{transform:scaleX(1)}
.mob-nav{display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; text-align:center}
.mob-nav a{
  font-family:var(--serif);
  font-size:clamp(1.8rem,7vw,3rem);
  font-weight:300; color:var(--so);
  text-decoration:none; line-height:1.35; padding:5px 0;
  opacity:0; transform:translateY(14px);
  transition:color .3s,opacity .38s,transform .38s;
}
.mob-menu.open .mob-nav a{opacity:1; transform:none}
.mob-nav a:hover,.mob-nav a.active{color:var(--o)}
.mob-nav a:nth-child(1){transition-delay:.06s}
.mob-nav a:nth-child(2){transition-delay:.12s}
.mob-nav a:nth-child(3){transition-delay:.18s}
.mob-nav a:nth-child(4){transition-delay:.24s}
.mob-nav a:nth-child(5){transition-delay:.30s}
.mob-nav a:nth-child(6){transition-delay:.36s}
.mob-divider{width:32px; height:1px; background:var(--bd); margin:8px auto}
.mob-foot{
  display:flex; align-items:center; gap:20px;
  opacity:0; transform:translateY(8px);
  transition:opacity .38s .45s,transform .38s .45s;
}
.mob-menu.open .mob-foot{opacity:1; transform:none}
.mob-loc{
  font-family:var(--label); font-size:.65rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--so);
}

/* ── SECTION SHARED ───────────────────────────────────────── */
section{padding:96px 0}
.s-dark{background:var(--sf); transition:background .4s}
hr.dv{border:none; border-top:1px solid var(--bd); margin:0; transition:border-color .4s}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.lbl{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--o); margin-bottom:44px;
  display:flex; align-items:center; gap:16px;
}
.lbl::after{content:''; width:44px; height:1px; background:var(--o2)}
.lbl-center{justify-content:center}
.lbl-center::after{display:none}

.h2{
  font-family:var(--serif);
  font-size:clamp(2.2rem,5.5vw,3.8rem);
  font-weight:300; line-height:1.1;
  letter-spacing:-.01em; margin-bottom:28px;
  font-variation-settings:"opsz" 24,"wght" 300;
}
.h2 em{font-style:italic; color:var(--o)}

.lead{
  font-size:1rem; color:var(--so);
  line-height:1.85; max-width:620px;
}

/* ── BUTTONS & LINKS ──────────────────────────────────────── */
.btn{
  font-family:var(--label);
  display:inline-block; padding:13px 32px;
  border:1px solid var(--o); color:var(--o);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; transition:all .3s;
  cursor:pointer; background:transparent; position:relative;
}
.btn:hover{background:var(--o); color:var(--bg)}

.lnk{
  font-family:var(--label);
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--o); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s; padding-bottom:2px;
}
.lnk:hover{border-color:var(--o)}

/* ── FOOTER ───────────────────────────────────────────────── */
footer{
  background:var(--sf2); border-top:2px solid var(--bd);
  padding:52px 44px 36px;
  transition:background .4s,border-color .4s;
}
.ft-top{
  display:flex; justify-content:space-between;
  align-items:flex-start; flex-wrap:wrap; gap:40px;
  margin-bottom:44px; padding-bottom:40px;
  border-bottom:1px solid var(--bd); transition:border-color .4s;
}
.ft-logo-wrap .logo{
  --logo-size:1.5rem;
  display:block; margin-bottom:6px;
}
.ft-caption{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--so); opacity:.85; margin-top:2px;
  display:block;
}
.ft-tagline{
  font-family:var(--serif); font-size:.95rem;
  font-style:italic; color:var(--so);
  display:block; margin-bottom:10px;
}
.ft-loc{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.08em; color:var(--so);
  display:block; margin-top:6px; opacity:.85;
}
.ft-soc-label{
  font-family:var(--label); font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--so); margin-bottom:18px; display:block;
}
.ft-soc-row{display:flex; gap:12px; flex-wrap:wrap}

/* Socials — soon (désactivés tant que les comptes n'existent pas) */
.sk{
  width:52px; height:52px;
  border:1px solid var(--bd); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:all .3s;
  position:relative; flex-shrink:0;
}
.sk svg{transition:transform .25s; fill:var(--so); width:20px; height:20px}
.sk-ig svg{fill:none; stroke:var(--so); stroke-width:1.8}
.sk-soon{cursor:not-allowed; opacity:.55}
.sk-soon:hover{border-color:var(--bd); background:var(--bg)}
.sk-soon::after{
  content:'Bientôt';
  position:absolute; top:-9px; right:-9px;
  font-family:var(--label); font-size:.5rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bg); background:var(--o);
  padding:2px 6px; line-height:1;
  pointer-events:none;
}
/* Live socials (si jamais activés un jour) */
.sk-live:hover{border-color:var(--o); background:var(--sf)}
.sk-live:hover svg{transform:scale(1.1)}
.sk-li.sk-live:hover svg{fill:#0A66C2}
.sk-ig.sk-live:hover svg{stroke:var(--o)}
.sk-tt.sk-live:hover svg{fill:var(--tx)}
.sk-fb.sk-live:hover svg{fill:#1877F2}

.ft-cta{
  text-align:center; padding:32px 0; margin:28px 0 24px;
  border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
}
.ft-cta-title{
  font-family:var(--serif); font-size:1.18rem;
  color:var(--tx); margin-bottom:16px; font-weight:400;
}
.btn-footer{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 32px;
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bg);
  background:var(--o); border:1px solid var(--o);
  text-decoration:none; transition:all .3s; cursor:pointer;
}
.btn-footer:hover{background:var(--o2); border-color:var(--o2)}
.ft-bot{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.ft-nav{display:flex; gap:20px; flex-wrap:wrap}
.ft-nav a{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--so); text-decoration:none; transition:color .3s;
}
.ft-nav a:hover{color:var(--o)}
.ft-legal{
  display:flex; justify-content:center; align-items:center; gap:12px;
  padding:16px 0 0; margin-top:14px;
  border-top:1px solid var(--bd);
  font-family:var(--label); font-size:.65rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--so); opacity:.75;
  flex-wrap:wrap;
}
.ft-legal a{color:inherit; text-decoration:none}
.ft-legal a:hover{color:var(--o); opacity:1}
.ft-copy{
  font-family:var(--label); font-size:.7rem;
  letter-spacing:.06em; color:var(--so);
}

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.r{opacity:0; transform:translateY(22px); transition:opacity .85s ease, transform .85s ease}
.r.on{opacity:1; transform:none}
.d1{transition-delay:.12s}
.d2{transition-delay:.24s}
.d3{transition-delay:.36s}
@media (prefers-reduced-motion: reduce){
  .r{opacity:1 !important; transform:none !important}
}

/* ── KEYFRAMES ────────────────────────────────────────────── */
@keyframes fU{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fI{from{opacity:0}to{opacity:1}}
@keyframes pu{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes bounce-down{0%,100%{transform:translate(-50%,0);opacity:.4}50%{transform:translate(-50%,6px);opacity:1}}
@keyframes line-grow{0%,100%{opacity:.4;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* ── NOSCRIPT ─────────────────────────────────────────────── */
/* Si JS désactivé : tout reste lisible */
.no-js .r{opacity:1 !important; transform:none !important}

/* ============================================================
   GLOBAL OVERRIDES — applique sur toutes les pages
   (lié APRÈS les <style> in-page → priorité gagnée à spec égale)
   ============================================================ */

/* Patch — fix opacity bug (index.html : opacity:5) */
.hero-video-disclaimer{opacity:.55 !important}
.hero-video-disclaimer::before{opacity:.55 !important}

/* ── Patch responsive mobile (index.html) ──────────────────────
   Sur petits écrans, la légende vidéo hero (admin) peut être longue
   (« AFTER MOVIE | UCLOUVAIN — EXPOSITION : ARCTIQUE : LE GRAND
   FROID (2026) »). On la limite à 2 lignes max, on coupe proprement,
   et on libère de l'espace pour qu'elle n'entre pas en collision
   avec le chevron de scroll. */
@media(max-width:640px){
  .hero-video-disclaimer{
    right:64px !important;              /* laisse la place au chevron */
    letter-spacing:.08em !important;
    line-height:1.4 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Sur mobile le chevron prend moins de place : la barre de 36px
     est inutile et bouffe de la hauteur sous la vidéo. On garde
     juste le chevron animé. */
  .hero-scroll .scroll-line{display:none}
  .hero-scroll{bottom:18px !important; right:18px !important; gap:0}
  .hero-scroll .scroll-chevron{opacity:.9}
}
@media(max-width:380px){
  /* Très petits écrans : on cache carrément la légende pour ne pas
     concurrencer le wordmark et les CTA. Reste accessible en lisant
     la fiche projet. */
  .hero-video-disclaimer{display:none !important}
}

/* Patch — minimum readable size partout (était .5–.55rem) */
.sk-lbl,.proj-tag,.pctg,.val-badge,.proj-badge,.cible-tag,
.scroll-label,.ai-txt,.ct-lbl,.ph-label,.ap-role,.ap-loc,
.oc-ty,
.ck-btn,#cookie-banner .ck-txt{
  font-size:.66rem !important;
}

/* Patch — labels secondaires (.58rem → .68rem) */
.lbl,.mob-loc,.ft-soc-label,.ft-loc,.ft-caption,
.fg label,.info-l,.mi-l,.proj-yr,.pc-yr,.nav-links a,.nav-back,
.ft-nav a,.ft-copy,.ft-legal,.hero-eye{
  font-size:.72rem !important;
}

/* Patch — body/lead un peu plus lisible */
.lead{font-size:1.02rem !important; color:var(--so) !important}
.proj-dc,.pc-desc,.val-dc,.svc-dc{
  color:var(--so) !important;
  font-size:.86rem !important;
}

/* Patch — contraste : remplacer var(--mu) (gris faible) par var(--so) (gris fort)
   pour le texte courant des sections */
.cible p,.svc-note,.svc-foot,.ft-tagline,.ct-sub,.form-s{
  color:var(--so) !important;
}

/* Patch — focus visible partout (override les pages standalone) */
*:focus{outline:none}
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--o) !important;
  outline-offset:3px !important;
  border-radius:1px;
}

/* Patch — socials avec href="#" : deviennent visuellement "soon" */
.ft-soc-row a[href="#"]{
  cursor:not-allowed;
  opacity:.55;
  position:relative;
}
.ft-soc-row a[href="#"]::after{
  content:'Bientôt';
  position:absolute; top:-9px; right:-9px;
  font-family:var(--label); font-size:.55rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bg); background:var(--o);
  padding:2px 6px; line-height:1;
  pointer-events:none;
}
.ft-soc-row a[href="#"]:hover{
  border-color:var(--bd) !important;
  background:var(--sf) !important;
}
.ft-soc-row a[href="#"]:hover svg{transform:none !important}

/* Patch — projets disabled (href="#") : affiche un état "bientôt" */
.pc[href="#"],.proj-card[href="#"]{
  cursor:default;
  position:relative;
}
.pc[data-status="wip"],.proj-card[data-status="wip"]{position:relative}
.pc[data-status="wip"]::before,.proj-card[data-status="wip"]::before{
  content:'En cours';
  position:absolute; top:14px; right:14px; z-index:5;
  font-family:var(--label); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--bg); background:var(--o);
  padding:4px 10px; line-height:1;
  pointer-events:none;
}

/* ── GLOBAL MOBILE ────────────────────────────────────────── */
@media(max-width:820px){
  .nav{padding:16px 20px}
  .nav-links{display:none}
  .hbg{display:flex}
  .nav-right{gap:10px}
  .w,.w-wide{padding:0 20px}
  section{padding:72px 0}
  .lbl{margin-bottom:32px}
  footer{padding:40px 20px 28px}
}
@media(max-width:640px){
  .ft-top{flex-direction:column; gap:28px}
  .ft-bot{flex-direction:column; align-items:flex-start; gap:10px}
  .ft-soc-row{gap:10px}
  .btn{padding:12px 26px}
}

/* ── Lien admin discret dans le footer ─────────────────────── */
.ft-admin{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px;
  margin-left:6px;
  border-radius:50%;
  color:var(--mu);
  opacity:.28;
  transition:opacity .25s ease, color .25s ease, background .25s ease, transform .25s ease;
  vertical-align:middle;
}
.ft-admin svg{width:13px; height:13px; display:block; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ft-admin:hover,.ft-admin:focus-visible{
  opacity:.85;
  color:var(--o);
  background:rgba(236,116,44,.08);
  transform:translateY(-1px);
}
.ft-admin:focus-visible{outline:2px solid var(--o); outline-offset:2px}
.ft-copy-row{display:inline-flex; align-items:center; gap:2px}