/* Polices AUTO-HEBERGEES.
   La maquette les chargeait depuis Google Fonts ; un domaine tiers tombe sous
   une CSP stricte et le site perdrait sa typographie sans message d'erreur.
   Elles sont ici plutot que dans une balise <style> de chaque page : une
   balise inline serait bloquee par style-src, et la dupliquer sept fois la
   ferait diverger a la premiere modification. */
@font-face{font-family:'Jost';font-weight:400;font-display:swap;src:url('/fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-display:swap;src:url('/fonts/jost-500.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:600;font-display:swap;src:url('/fonts/jost-600.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:700;font-display:swap;src:url('/fonts/jost-700.woff2') format('woff2')}
@font-face{font-family:'Jost';font-weight:800;font-display:swap;src:url('/fonts/jost-800.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url('/fonts/hanken-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-display:swap;src:url('/fonts/hanken-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;src:url('/fonts/hanken-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-display:swap;src:url('/fonts/hanken-700.woff2') format('woff2')}
@font-face{font-family:'Pacifico';font-weight:400;font-display:swap;src:url('/fonts/pacifico-400.woff2') format('woff2')}

/* =============================================================================
   SEALTY · SITE  ·  langage visuel du Dashboard v2
   Tokens identiques : Jost / Hanken Grotesk / Pacifico, boutons 10px,
   tuile monogramme lime, indigo + surfaces crème, chips pill.
   ============================================================================= */
:root{
  --blue:#2f2f96; --blue-700:#3b3bb8; --blue-800:#26266f; --blue-900:#1c1c55;
  --ink:#1b1b3f; --ink-70:rgba(27,27,63,.72); --ink-45:rgba(27,27,63,.48); --ink-28:rgba(27,27,63,.28);
  --lime:#cff00c; --lime-600:#a8c800; --lime-tint:#f2fbc8;
  --orange:#f95701; --orange-tint:#fff0e6;
  --green:#10944f; --green-tint:#e7f6ed;
  --red:#c4344a; --red-tint:#fbebed;
  --bg:#f7f5ef; --sf:#ffffff; --sf2:#faf8f2; --sf3:#f2efe6;
  --line:rgba(27,27,63,.09); --line-2:rgba(27,27,63,.16);
  --dk:#22224f; --dk-2:#2b2b5e; --dk-ink:#e9e9f6; --dk-ink-60:rgba(233,233,246,.62); --dk-line:rgba(255,255,255,.1);
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-2xl:32px;
  --sh-xs:0 1px 2px rgba(27,27,63,.05);
  --sh-sm:0 2px 10px -4px rgba(27,27,63,.1),0 1px 2px rgba(27,27,63,.04);
  --sh-md:0 14px 34px -18px rgba(27,27,63,.24);
  --sh-lg:0 40px 80px -30px rgba(27,27,63,.4);
  --f-dis:'Jost',system-ui,sans-serif; --f-body:'Hanken Grotesk',system-ui,sans-serif; --f-script:'Pacifico',cursive;
  --ease:cubic-bezier(.2,.75,.25,1);
  --nav-h:66px; --pad:28px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; text-wrap:pretty; }
h1,h2,h3,h4{ font-family:var(--f-dis); margin:0; color:var(--ink); letter-spacing:-.025em; line-height:1.06; text-wrap:balance; }
h1{ font-weight:700; font-size:clamp(38px,5.6vw,72px); }
h2{ font-weight:700; font-size:clamp(29px,3.7vw,48px); }
h3{ font-weight:600; font-size:20px; letter-spacing:-.02em; }
p{ margin:0; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a:hover{ color:var(--blue-700); }
.script{ font-family:var(--f-script); font-weight:400; letter-spacing:0; text-transform:none; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
::selection{ background:var(--lime); color:var(--blue-900); }

/* ---------- kicker / titres de section (signature dashboard) ---------- */
.kick{ display:inline-block; font-family:var(--f-dis); font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--orange); }
.kick.on-dk{ color:var(--lime); }
.lead{ font-size:18.5px; line-height:1.6; color:var(--ink-70); max-width:60ch; }
.lead.on-dk{ color:rgba(233,233,246,.76); }
.sect{ padding:104px 0; } .sect.tight{ padding:72px 0; }
@media(max-width:760px){ .sect{ padding:70px 0; } :root{ --pad:20px; } }

/* ---------- boutons (exactement .btn du dashboard, échelle site) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:10px;
  border:1px solid transparent; font-family:var(--f-dis); font-weight:600; font-size:14px; cursor:pointer;
  white-space:nowrap; transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s; }
.btn svg{ width:16px; height:16px; }
.btn-p{ background:var(--blue); color:#fff; }
.btn-p:hover{ background:var(--blue-700); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(47,47,150,.8); }
.btn-l{ background:var(--lime); color:var(--blue-900); }
.btn-l:hover{ background:#dcf83a; color:var(--blue-900); transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(168,200,0,.75); }
.btn-o{ background:var(--orange); color:#fff; }
.btn-o:hover{ background:#ff6a1a; color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(249,87,1,.95); }
.btn svg{ transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-g{ background:var(--sf); color:var(--ink-70); border-color:var(--line-2); }
.btn-g:hover{ background:var(--sf3); color:var(--ink); }
.btn-gd{ background:transparent; color:var(--dk-ink); border-color:rgba(255,255,255,.22); }
.btn-gd:hover{ background:rgba(255,255,255,.1); color:#fff; }
.btn-lg{ padding:15px 26px; font-size:15px; }
.btn-sm{ padding:9px 15px; font-size:13px; border-radius:8px; }
.lnk{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-dis); font-weight:600; font-size:14px; color:var(--blue); }
.lnk .ar{ transition:transform .2s var(--ease); } .lnk:hover .ar{ transform:translateX(4px); }

/* ---------- chips / pills ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--sf); font-family:var(--f-dis); font-weight:600; font-size:12px; color:var(--ink); }
.chip.lime{ background:var(--lime-tint); border-color:rgba(168,200,0,.4); }
.chip.on-dk{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:var(--dk-ink); }

/* ---------- badge : étiquette à petites capitales, langage dashboard ---------- */
.badge{ display:inline-block; padding:7px 13px 6px; border-radius:8px; background:var(--sf3); border:1px solid var(--line);
  font-family:var(--f-dis); font-weight:700; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-70);
  align-self:flex-start; width:fit-content; }
.badge.on-dk{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.17); color:var(--dk-ink); }
.badge.lime{ background:var(--lime); border-color:var(--lime); color:var(--blue-900); }
.badge.orange{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ---------- tuile monogramme (.sb-mark) ---------- */
.mk{ display:inline-flex; align-items:center; justify-content:center; background:var(--lime); color:var(--blue-900);
  font-family:var(--f-script); line-height:1; flex-shrink:0; width:34px; height:34px; border-radius:11px; font-size:20px; padding-bottom:4px; }
.mk.sm{ width:28px; height:28px; border-radius:9px; font-size:17px; padding-bottom:3px; }
.mk.lg{ width:46px; height:46px; border-radius:14px; font-size:27px; padding-bottom:5px; }

/* =============================================================================
   NAV
   ============================================================================= */
.nav{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.86); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transition:box-shadow .3s,background .3s; }
.nav.stuck{ box-shadow:0 10px 30px -22px rgba(27,27,63,.5); background:rgba(255,255,255,.94); }
.nav-in{ max-width:1200px; margin:0 auto; padding:0 var(--pad); height:var(--nav-h); display:flex; align-items:center; gap:22px; }
.brand{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
.brand .wm{ font-family:var(--f-script); font-size:28px; color:var(--blue); line-height:1; padding-bottom:4px; }
.nav-links{ display:flex; align-items:center; gap:3px; margin-left:8px; }
.nav-links a{ padding:8px 13px; border-radius:9px; font-family:var(--f-dis); font-weight:500; font-size:14px; color:var(--ink-70); transition:.15s; }
.nav-links a:hover{ background:var(--sf3); color:var(--ink); }
.nav-links a.on{ color:var(--ink); font-weight:600; background:var(--sf3); }
.nav-r{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.burger{ display:none; width:38px; height:38px; align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--line-2); border-radius:10px; cursor:pointer; color:var(--ink); }
.burger svg{ width:18px; height:18px; }
.mob{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:190; background:var(--sf); border-bottom:1px solid var(--line);
  padding:14px var(--pad) 20px; display:none; flex-direction:column; gap:3px; box-shadow:var(--sh-md); }
.mob.open{ display:flex; animation:mobIn .24s var(--ease) both; }
@keyframes mobIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.mob a{ padding:12px 13px; border-radius:10px; font-family:var(--f-dis); font-weight:600; font-size:15px; color:var(--ink); }
.mob a:hover{ background:var(--sf3); }
.mob .btn{ margin-top:8px; }
@media(max-width:920px){ .nav-links,.nav-r .btn-g{ display:none; } .burger{ display:inline-flex; } }

/* barre d'action collante, apparaît après le hero */
.scta{ position:fixed; left:0; right:0; bottom:0; z-index:180; background:var(--dk); border-top:1px solid rgba(255,255,255,.13);
  padding:11px 20px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  transform:translateY(115%); transition:transform .38s var(--ease); box-shadow:0 -12px 34px rgba(27,27,63,.3); }
.scta.on{ transform:none; }
.scta p{ font-family:var(--f-dis); font-weight:500; font-size:14px; color:var(--dk-ink); }
.scta p b{ color:var(--lime); font-weight:700; }
.scta .close{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color:rgba(233,233,246,.5); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.scta .close:hover{ background:rgba(255,255,255,.1); color:#fff; }
.scta .close svg{ width:14px; height:14px; }
@media(max-width:700px){ .scta p{ display:none; } .scta{ padding:10px 44px 10px 16px; } .scta .btn{ flex:1; } }

/* barre de progression de lecture */
.prog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; background:transparent; pointer-events:none; }
.prog i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--lime),var(--lime-600));
  transform:scaleX(0); transform-origin:0 50%; }

/* =============================================================================
   ANIMATIONS AU SCROLL
   ============================================================================= */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease); }
.rv.in{ opacity:1; transform:none; filter:none; }
.rv-l{ transform:translateX(-34px); } .rv-r{ transform:translateX(34px); }
.rv-s{ transform:scale(.93); } .rv-b{ filter:blur(12px); transform:translateY(16px); }
.rv-u{ transform:translateY(44px); }
[style*="--i"]{ transition-delay:calc(var(--i) * 85ms); }
/* révélation mot à mot des grands titres */
.wr span{ display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.5deg); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.wr.in span{ opacity:1; transform:none; }
/* halo qui suit le curseur sur les cartes */
.glow{ position:relative; overflow:hidden; }
.glow::after{ content:''; position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s;
  background:radial-gradient(circle,rgba(207,240,12,.22),transparent 68%); }
.glow:hover::after{ opacity:1; }
.glow>*{ position:relative; z-index:1; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv,.wr span{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* =============================================================================
   HERO
   ============================================================================= */
.hero{ position:relative; overflow:hidden; background:var(--dk); color:var(--dk-ink); padding:82px 0 96px; }
.hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 62% at 84% 8%,rgba(207,240,12,.16),transparent 62%),
             radial-gradient(46% 52% at 4% 96%,rgba(249,87,1,.13),transparent 66%); }
.hero::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%); -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%); }
.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.hero h1{ color:#fff; margin-top:14px; font-size:clamp(30px,3.9vw,52px); line-height:1.08; max-width:19ch; }
.hero h1 em{ font-style:normal; color:var(--lime); }
.hero-for{ font-family:var(--f-dis); font-weight:600; font-size:15px; color:rgba(233,233,246,.58); margin-top:20px; }
.rot{ display:inline-block; color:var(--orange); font-weight:700; transition:opacity .3s var(--ease),transform .3s var(--ease); }
.rot.out{ opacity:0; transform:translateY(-6px); }
.hero .lead{ margin-top:20px; color:rgba(233,233,246,.78); font-size:18px; max-width:47ch; }
.hero-micro{ margin-top:15px; font-family:var(--f-dis); font-weight:500; font-size:13px; color:rgba(233,233,246,.5); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.hero-micro b{ color:var(--lime); font-weight:700; }
.hero-cta{ display:flex; gap:11px; flex-wrap:wrap; margin-top:30px; }
.hero-tr{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
@media(max-width:960px){ .hero-in{ grid-template-columns:1fr; gap:44px; } .hero{ padding:56px 0 72px; } }

/* =============================================================================
   MOCKS (reprise fidèle du dashboard)
   ============================================================================= */
.mock{ background:var(--sf); border-radius:var(--r-lg); box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.09);
  overflow:hidden; font-size:11px; }
.mock-w{ display:flex; min-height:296px; }
.mock-sb{ width:104px; flex-shrink:0; background:var(--dk); padding:12px 9px; display:flex; flex-direction:column; gap:11px; }
.mock-sb .top{ display:flex; align-items:center; gap:7px; }
.mock-sb .nm{ font-family:var(--f-dis); font-weight:600; font-size:10.5px; color:#fff; }
.mock-nav{ display:flex; flex-direction:column; gap:2px; }
.mock-nav i{ display:block; height:22px; border-radius:7px; background:rgba(255,255,255,.05); position:relative; }
.mock-nav i.on{ background:rgba(255,255,255,.12); }
.mock-nav i.on::before{ content:''; position:absolute; left:-9px; top:5px; width:3px; height:12px; border-radius:0 3px 3px 0; background:var(--lime); }
.mock-nav i::after{ content:''; position:absolute; left:8px; top:9px; right:9px; height:4px; border-radius:2px; background:rgba(255,255,255,.22); }
.mock-nav i.on::after{ background:rgba(255,255,255,.55); }
.mock-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mock-top{ padding:11px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.mock-top .t{ font-family:var(--f-dis); font-weight:700; font-size:13px; letter-spacing:-.02em; }
.mock-top .s{ font-size:9.5px; color:var(--ink-45); }
.mock-top .cta{ margin-left:auto; background:var(--blue); color:#fff; font-family:var(--f-dis); font-weight:600;
  font-size:9.5px; padding:6px 10px; border-radius:8px; white-space:nowrap; }
.mock-bd{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; background:var(--bg); flex:1; }
.mock-kpi{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:7px; }
.mkpi{ background:var(--sf); border:1px solid var(--line); border-radius:11px; padding:10px; }
.mkpi.hero{ background:var(--blue); border-color:var(--blue); color:#fff; display:flex; align-items:center; gap:9px; }
.mkpi .v{ font-family:var(--f-dis); font-weight:700; font-size:19px; letter-spacing:-.03em; line-height:1; }
.mkpi .l{ font-family:var(--f-dis); font-weight:700; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-top:4px; }
.mkpi.hero .l{ color:rgba(255,255,255,.7); }
.ring{ width:32px; height:32px; flex-shrink:0; }
.mock-rows{ background:var(--sf); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.mrow{ display:flex; align-items:center; gap:8px; padding:8px 11px; }
.mrow+.mrow{ border-top:1px solid var(--line); }
.mrow .h{ font-family:var(--f-dis); font-weight:700; font-size:11px; width:32px; }
.mrow .n{ font-size:10.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow .p{ font-family:var(--f-dis); font-weight:600; font-size:9.5px; color:var(--ink-45); }
.mpill{ font-family:var(--f-dis); font-weight:700; font-size:8.5px; padding:3px 7px; border-radius:999px; white-space:nowrap; }
.mpill.g{ background:var(--green-tint); color:var(--green); } .mpill.o{ background:var(--orange-tint); color:var(--orange); }
.mpill.l{ background:var(--lime-tint); color:var(--blue-900); }
/* plan de salle mock */
.mock-floor{ background:var(--sf); border:1px solid var(--line); border-radius:11px; padding:11px; position:relative; flex:1; min-height:120px; }
.mzone{ position:absolute; border-radius:9px; border:1px dashed var(--line-2); }
.mtable{ position:absolute; border:1.5px solid var(--blue); background:var(--lime-tint); border-radius:7px;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-dis); font-weight:700; font-size:8px; color:var(--blue-900); }
.mtable.rd{ border-radius:50%; } .mtable.busy{ background:var(--blue); color:#fff; border-color:var(--blue); }
/* widget mock */
.wmock{ width:250px; background:var(--sf); border-radius:var(--r-lg); box-shadow:var(--sh-lg),0 0 0 1px var(--line); overflow:hidden; }
.wmock-h{ padding:13px 14px 11px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:9px; }
.wmock-h .k{ font-family:var(--f-dis); font-weight:700; font-size:8px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45); }
.wmock-h .n{ font-family:var(--f-dis); font-weight:700; font-size:14px; letter-spacing:-.025em; }
.wmock-prog{ display:flex; align-items:center; gap:0; padding:10px 14px 0; }
.wmock-prog b{ width:11px; height:11px; border-radius:50%; background:var(--sf3); border:2px solid var(--line-2); flex-shrink:0; }
.wmock-prog b.on{ background:var(--lime); border-color:var(--lime); }
.wmock-prog i{ flex:1; height:1.5px; background:var(--line); }
.wmock-prog i.on{ background:var(--lime); }
.wmock-b{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.wl{ font-family:var(--f-dis); font-weight:700; font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); margin-bottom:5px; }
.wg{ display:grid; gap:4px; } .wg.c5{ grid-template-columns:repeat(5,1fr); } .wg.c4{ grid-template-columns:repeat(4,1fr); }
.wt{ padding:7px 2px; border:1px solid var(--line-2); border-radius:8px; text-align:center;
  font-family:var(--f-dis); font-weight:600; font-size:10.5px; }
.wt.on{ background:var(--blue); border-color:var(--blue); color:#fff; }
.wmock .go{ background:var(--blue); color:#fff; text-align:center; padding:9px; border-radius:9px;
  font-family:var(--f-dis); font-weight:600; font-size:10.5px; }
/* bouton flottant simulé */
.fabm{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 9px; border-radius:var(--r-md);
  background:var(--blue); color:#fff; box-shadow:0 14px 34px -18px rgba(47,47,150,.9); }
.fabm .tx{ display:flex; flex-direction:column; gap:1px; }
.fabm b{ font-family:var(--f-dis); font-weight:600; font-size:13px; }
.fabm i{ font-style:normal; font-family:var(--f-dis); font-weight:600; font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; opacity:.62; }

/* =============================================================================
   MARQUEE
   ============================================================================= */
.mq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--sf); padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mq-t{ display:flex; gap:40px; width:max-content; animation:mqs 34s linear infinite; }
.mq:hover .mq-t{ animation-play-state:paused; }
@keyframes mqs{ to{ transform:translateX(-50%); } }
.mq-t span{ display:inline-flex; align-items:center; font-family:var(--f-dis); font-weight:600; font-size:15px; color:var(--ink-45); white-space:nowrap; }

/* =============================================================================
   CARTES / GRILLES
   ============================================================================= */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.g2>*,.g3>*,.g4>*,.split>*,.cta-band>*,.show>*,.plans>*,.nums>*{ min-width:0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split.wide-l{ grid-template-columns:1.15fr .85fr; }
@media(max-width:960px){ .g2,.g3,.g4,.split,.split.wide-l{ grid-template-columns:1fr; gap:26px; } }
@media(max-width:640px){ .g4{ grid-template-columns:1fr 1fr; } }

.card{ background:var(--sf); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; }
.card:hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--sh-md); }
.card .ico{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.card .ico svg{ width:19px; height:19px; }
.card h3{ margin-bottom:8px; }
.card p{ font-size:14.5px; color:var(--ink-70); line-height:1.6; }
.ico.b{ background:var(--lime-tint); color:var(--blue-900); }
.ico.o{ background:var(--orange-tint); color:var(--orange); }
.ico.g{ background:var(--green-tint); color:var(--green); }
.ico.i{ background:rgba(47,47,150,.09); color:var(--blue); }
.ico.r{ background:var(--red-tint); color:var(--red); }
.card.dk{ background:var(--dk); border-color:var(--dk-line); color:var(--dk-ink); }
.card.dk h3{ color:#fff; } .card.dk p{ color:rgba(233,233,246,.72); }
.card.flat:hover{ transform:none; box-shadow:var(--sh-xs); }

/* liste à coches */
.checks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.55; }
.checks .c{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--lime); color:var(--blue-900);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px; }
.checks.on-dk li{ color:rgba(233,233,246,.85); }
.checks .x{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--red-tint); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; margin-top:1px; }

/* =============================================================================
   SHOWCASE COLLANT (scroll-linked)
   ============================================================================= */
.show{ display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:start; }
.show-steps{ display:flex; flex-direction:column; gap:14px; padding:40px 0; }
.step{ border-left:2px solid var(--line); padding:16px 0 16px 22px; cursor:pointer; transition:border-color .35s,opacity .35s; opacity:.42; }
.step.on{ opacity:1; border-color:var(--lime); }
.step .n{ font-family:var(--f-dis); font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45); }
.step h3{ font-size:25px; margin:7px 0 8px; font-weight:700; }
.step p{ font-size:15px; color:var(--ink-70); line-height:1.6; max-width:44ch; }
.show-stage{ position:sticky; top:112px; }
.stage-panes{ position:relative; }
.pane{ opacity:0; transform:translateY(18px) scale(.985); transition:opacity .5s var(--ease),transform .5s var(--ease);
  position:absolute; inset:0; pointer-events:none; }
.pane.on{ opacity:1; transform:none; position:relative; pointer-events:auto; }
@media(max-width:960px){ .show{ grid-template-columns:1fr; gap:28px; } .show-stage{ position:static; } .show-steps{ padding:0; }
  .step{ opacity:1; } .pane{ position:relative; opacity:1; transform:none; margin-bottom:14px; } }

/* =============================================================================
   CHIFFRES
   ============================================================================= */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; }
.num{ background:var(--sf); padding:30px 24px; }
.num .v{ font-family:var(--f-dis); font-weight:700; font-size:clamp(34px,4vw,50px); letter-spacing:-.035em; line-height:1; color:var(--blue); }
.num .v small{ font-size:.5em; letter-spacing:-.02em; }
.num .l{ font-family:var(--f-dis); font-weight:700; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45); margin-top:10px; }
.num .d{ font-size:13.5px; color:var(--ink-70); margin-top:7px; line-height:1.5; }
@media(max-width:860px){ .nums{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .nums{ grid-template-columns:1fr; } }

/* =============================================================================
   BANDES SOMBRES / CTA
   ============================================================================= */
.dark{ background:var(--dk); color:var(--dk-ink); position:relative; overflow:hidden; }
.dark h2,.dark h3{ color:#fff; }
.dark::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 58% at 88% 12%,rgba(207,240,12,.13),transparent 64%),
             radial-gradient(44% 48% at 6% 92%,rgba(249,87,1,.11),transparent 66%); }
.dark>*{ position:relative; z-index:1; }
.cta-band{ display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
@media(max-width:860px){ .cta-band{ grid-template-columns:1fr; gap:32px; } }

/* formulaire */
.form{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); padding:28px; }
.form.light{ background:var(--sf); border-color:var(--line); box-shadow:var(--sh-sm); }
.fld{ margin-bottom:13px; }
.fld label{ display:block; font-family:var(--f-dis); font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:7px; color:rgba(233,233,246,.7); }
.form.light .fld label{ color:var(--ink-45); }
.fld input,.fld select,.fld textarea{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font-family:var(--f-body); font-size:14.5px; outline:none; transition:.16s; }
.fld input::placeholder{ color:rgba(255,255,255,.45); }
.fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--lime); background:rgba(255,255,255,.13); }
.form.light .fld input,.form.light .fld select,.form.light .fld textarea{ background:var(--sf); border-color:var(--line-2); color:var(--ink); }
.form.light .fld input::placeholder{ color:var(--ink-28); }
.form.light .fld input:focus,.form.light .fld select:focus,.form.light .fld textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,47,150,.09); }
.fld select option{ color:#1b1b3f; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media(max-width:560px){ .f2{ grid-template-columns:1fr; } }
.form .btn{ width:100%; margin-top:5px; }
.form .micro{ text-align:center; font-size:12px; color:rgba(233,233,246,.62); margin-top:12px; }
.form.light .micro{ color:var(--ink-45); }
.form .ok{ display:none; text-align:center; padding:14px 0; }
.form .ok.show{ display:block; animation:mobIn .3s var(--ease) both; }
.form .ok .t{ font-family:var(--f-dis); font-weight:700; font-size:19px; color:var(--lime); margin-bottom:6px; }
.form.light .ok .t{ color:var(--blue); }
.form .ok p{ font-size:14px; color:rgba(233,233,246,.8); }
.form.light .ok p{ color:var(--ink-70); }

/* compteur de places */
.slots{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg); padding:22px; }
.slots .v{ font-family:var(--f-dis); font-weight:700; font-size:52px; letter-spacing:-.035em; line-height:1; color:var(--lime); }
.slots .v small{ font-size:.42em; color:rgba(255,255,255,.5); }
.slots .l{ font-family:var(--f-dis); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(233,233,246,.7); margin:9px 0 13px; }
.bar{ height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime),var(--orange)); border-radius:3px;
  transition:width 1.3s var(--ease); }

/* =============================================================================
   SECTEURS
   ============================================================================= */
.sect-tabs{ display:inline-flex; flex-wrap:wrap; gap:3px; background:var(--sf3); border-radius:999px; padding:4px; }
.sect-tab{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border:none; background:transparent;
  border-radius:999px; cursor:pointer; font-family:var(--f-dis); font-weight:600; font-size:13.5px; color:var(--ink-45); transition:.18s; }
.sect-tab:hover{ color:var(--ink); }
.sect-tab.on{ background:var(--sf); color:var(--ink); box-shadow:var(--sh-xs); }
.sect-card{ display:block; background:var(--sf); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; }
.sect-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--line-2); color:inherit; }
.sect-card .em{ font-size:26px; line-height:1; }
.sect-card h3{ margin:14px 0 7px; font-size:21px; font-weight:700; }
.sect-card p{ font-size:14px; color:var(--ink-70); line-height:1.55; }
.sect-card .tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:15px; }
.sect-card .tags span{ font-family:var(--f-dis); font-weight:600; font-size:11px; padding:4px 10px; border-radius:999px;
  background:var(--sf3); color:var(--ink-70); }

/* =============================================================================
   TARIFS
   ============================================================================= */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
@media(max-width:960px){ .plans{ grid-template-columns:1fr; } }
.plan{ background:var(--sf); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px 26px; position:relative; }
.plan.feat{ background:var(--dk); border-color:var(--dk); color:var(--dk-ink); box-shadow:var(--sh-lg); }
.plan.feat h3{ color:#fff; }
.plan .tag{ position:absolute; top:-11px; left:26px; background:var(--orange); color:#fff;
  font-family:var(--f-dis); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 13px 5px; border-radius:8px; }
.plan .pr{ font-family:var(--f-dis); font-weight:700; font-size:42px; letter-spacing:-.035em; line-height:1; margin:14px 0 4px; }
.plan .pr small{ font-size:15px; font-weight:600; letter-spacing:0; color:var(--ink-45); }
.plan.feat .pr small{ color:rgba(233,233,246,.6); }
.plan .desc{ font-size:14px; color:var(--ink-70); line-height:1.55; min-height:44px; }
.plan.feat .desc{ color:rgba(233,233,246,.72); }
.plan .checks{ margin:20px 0 22px; } .plan .checks li{ font-size:14.5px; }
.plan.feat .checks li{ color:rgba(233,233,246,.85); }
.plan .btn{ width:100%; }

/* =============================================================================
   FAQ
   ============================================================================= */
.faq{ display:flex; flex-direction:column; gap:10px; }
.qa{ background:var(--sf); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:background .2s; }
.qa[open]{ background:var(--sf2); }
.qa summary{ padding:19px 22px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; font-family:var(--f-dis); font-weight:600; font-size:16.5px; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:''; width:11px; height:11px; flex-shrink:0; border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue); transform:rotate(45deg) translateY(-2px); transition:transform .28s var(--ease); }
.qa[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.qa .a{ padding:0 22px 20px; font-size:15px; color:var(--ink-70); line-height:1.65; max-width:74ch; }

/* =============================================================================
   CONNEXION
   ============================================================================= */
.login{ min-height:calc(100vh - var(--nav-h)); display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:900px){ .login{ grid-template-columns:1fr; min-height:0; } .login-aside{ display:none; } }
.login-form{ display:flex; align-items:center; justify-content:center; padding:64px var(--pad); }
.login-form>div{ width:100%; max-width:388px; }
.login-aside{ background:var(--dk); color:var(--dk-ink); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:56px 44px; }
.login-aside::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(54% 58% at 88% 10%,rgba(207,240,12,.15),transparent 62%),
             radial-gradient(46% 50% at 6% 94%,rgba(249,87,1,.14),transparent 66%); }
.login-aside>*{ position:relative; z-index:1; }
.login-q{ font-family:var(--f-dis); font-weight:600; font-size:clamp(21px,2.2vw,27px); line-height:1.28; letter-spacing:-.02em; color:#fff; }
.login-q em{ font-style:normal; color:var(--lime); }
.login-who{ display:flex; align-items:center; gap:11px; margin-top:22px; }
.login-who .av{ width:38px; height:38px; border-radius:50%; background:var(--lime); color:var(--blue-900);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-dis); font-weight:700; font-size:14px; flex-shrink:0; }
.login-who .n{ font-family:var(--f-dis); font-weight:600; font-size:14px; color:#fff; }
.login-who .r{ font-size:12.5px; color:rgba(233,233,246,.55); }
/* diaporama de témoignages par secteur */
.login-aside .tsector,.login-q,.login-who{ transition:opacity .38s var(--ease),transform .38s var(--ease); }
.login-aside.swap .tsector,.login-aside.swap .login-q,.login-aside.swap .login-who{ opacity:0; transform:translateY(9px); }
.tbars{ display:flex; gap:6px; margin-top:30px; max-width:320px; }
.tbars button{ flex:1; height:3px; padding:0; border:none; border-radius:2px; background:rgba(255,255,255,.17);
  cursor:pointer; overflow:hidden; }
.tbars button i{ display:block; height:100%; width:100%; border-radius:2px; background:var(--lime); transform:scaleX(0); transform-origin:0 50%; }
.tbars button.on i{ animation:tfill 6s linear forwards; }
.tbars button.done i{ transform:scaleX(1); }
@keyframes tfill{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .tbars button.on i{ animation:none; transform:scaleX(1); } }
.fpwd{ display:flex; justify-content:space-between; align-items:baseline; }
.fpwd a{ font-family:var(--f-dis); font-weight:600; font-size:11.5px; color:var(--blue); }

/* =============================================================================
   FOOTER
   ============================================================================= */
footer{ background:var(--dk); color:var(--dk-ink); padding:64px 0 30px; }
.f-g{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:38px; }
@media(max-width:860px){ .f-g{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:520px){ .f-g{ grid-template-columns:1fr; } }
.f-brand .wm{ font-family:var(--f-script); font-size:32px; color:#fff; line-height:1; }
.f-brand p{ font-size:14px; color:var(--dk-ink-60); margin-top:12px; max-width:34ch; line-height:1.6; }
.f-col h4{ font-family:var(--f-dis); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(233,233,246,.42); margin-bottom:15px; }
.f-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.f-col a{ font-size:14px; color:var(--dk-ink-60); transition:color .16s; }
.f-col a:hover{ color:#fff; }
.f-bot{ margin-top:52px; padding-top:22px; border-top:1px solid var(--dk-line); display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap; font-size:12.5px; color:rgba(233,233,246,.42); }

/* =============================================================================
   MOBILE  ·  travaillé au même niveau que le bureau
   ============================================================================= */
@media (max-width:900px){
  html{ scroll-padding-top:76px; }
  *{ -webkit-tap-highlight-color:rgba(47,47,150,.12); }
  :root{ --nav-h:60px; }

  /* toucher confortable */
  .btn{ min-height:46px; padding:13px 20px; }
  .btn-sm{ min-height:40px; }
  .btn-lg{ min-height:52px; font-size:15.5px; }
  .nav-r .btn-sm{ min-height:38px; padding:9px 14px; }

  /* menu : feuille plein écran, verrou de scroll */
  .mob{ inset:var(--nav-h) 0 0 0; padding:18px var(--pad) calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto; gap:2px; border-bottom:none; }
  .mob a{ padding:15px 14px; font-size:16.5px; border-radius:12px; }
  .mob a + a{ border-top:1px solid var(--line); border-radius:0; }
  .mob a.btn{ border-top:none; border-radius:10px; margin-top:16px; justify-content:center; font-size:15.5px; }
  body.lock{ overflow:hidden; }

  /* hero */
  .hero{ padding:40px 0 60px; }
  .hero h1{ font-size:clamp(31px,8.4vw,42px); max-width:none; margin-top:12px; }
  .hero-for{ font-size:14px; margin-top:16px; }
  .hero .lead{ font-size:16.5px; max-width:none; margin-top:16px; }
  .hero-cta{ margin-top:24px; width:100%; gap:9px; }
  .hero-cta .btn{ flex:1 1 100%; justify-content:center; }
  .hero-micro{ font-size:12.5px; justify-content:flex-start; }
  .hero-visual{ margin-top:34px; }
  /* le bouton flottant simulé repasse dans le flux, centré */
  .hero-visual > div[data-para]{ position:static !important; transform:none !important;
    display:flex; justify-content:center; margin-top:18px; }
  .mock,.wmock,.sector-phone,.hero-phone{ transform:none !important; }

  /* maquettes : compactées, jamais de débordement */
  .mock{ font-size:10.5px; }
  .mock-sb{ width:82px; padding:10px 7px; gap:9px; }
  .mock-sb .nm{ font-size:9.5px; }
  .mock-kpi{ grid-template-columns:1fr 1fr; }
  .mock-kpi .mkpi:nth-child(3){ display:none; }
  .mock-top .cta{ font-size:9px; padding:5px 8px; }
  .wmock{ width:100%; max-width:290px; }

  /* typo de section */
  .sect{ padding:56px 0; } .sect.tight{ padding:44px 0; }
  h2{ font-size:clamp(25px,6.6vw,32px); }
  .lead{ font-size:16.5px; }
  .kick{ font-size:10.5px; }

  /* grilles */
  .g3,.g4{ grid-template-columns:1fr; gap:12px; }
  .card{ padding:22px 20px; }
  .card:hover{ transform:none; box-shadow:var(--sh-xs); }
  .sect-card:hover{ transform:none; }
  .glow::after{ display:none; }
  .nums{ grid-template-columns:1fr 1fr; }
  .num{ padding:22px 18px; }
  .num .v{ font-size:clamp(28px,8vw,36px); }
  .num .l{ font-size:9.5px; letter-spacing:.09em; }
  .num .d{ font-size:12.5px; }

  /* showcase : bandeau d'étapes glissant + une seule maquette */
  .show{ grid-template-columns:1fr; gap:20px; }
  .show-steps{ flex-direction:row; overflow-x:auto; gap:10px; padding:2px 2px 10px;
    scroll-snap-type:x mandatory; scrollbar-width:none; }
  .show-steps::-webkit-scrollbar{ display:none; }
  .step{ flex:0 0 82%; scroll-snap-align:center; border-left:none; border-top:2px solid rgba(255,255,255,.16);
    padding:15px 0 0; opacity:.4; }
  .step.on{ opacity:1; border-color:var(--lime); }
  .step h3{ font-size:21px; margin:6px 0 7px; }
  .step p{ font-size:14.5px; max-width:none; }
  .show-stage{ position:static; }
  .pane{ position:absolute; opacity:0; transform:translateY(14px); margin-bottom:0; pointer-events:none; }
  .pane.on{ position:relative; opacity:1; transform:none; pointer-events:auto; }

  /* bandes et CTA */
  .cta-band{ grid-template-columns:1fr; gap:24px; }
  .cta-band > div:last-child{ justify-content:flex-start !important; }
  .cta-band .btn{ flex:1 1 100%; justify-content:center; }
  .split,.split.wide-l{ gap:26px; }
  .checks li{ font-size:15px; }

  /* barre d'action collante */
  .scta{ padding:10px 46px 10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .scta .btn{ flex:1; min-height:44px; }
  body.scta-on footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); }

  /* offres */
  .plans{ gap:14px; }
  .plan{ padding:26px 22px; }
  .plan .pr{ font-size:36px; }
  .plan .desc{ min-height:0; }

  /* FAQ */
  .qa summary{ padding:17px 18px; font-size:15.5px; }
  .qa .a{ padding:0 18px 18px; font-size:14.5px; }

  /* connexion : le témoignage revient sous le formulaire */
  .login{ grid-template-columns:1fr; }
  .login-form{ padding:40px var(--pad) 32px; }
  .login-form > div{ max-width:none; }
  .login-aside{ display:flex; padding:34px var(--pad) 44px; }
  .login-q{ font-size:19px; }

  /* formulaires : 16px pour éviter le zoom iOS */
  .form{ padding:22px 20px; }
  .fld input,.fld select,.fld textarea{ font-size:16px; padding:13px 14px; }

  /* pied de page */
  footer{ padding:52px 0 26px; }
  .f-g{ grid-template-columns:1fr 1fr; gap:26px; }
  .f-brand{ grid-column:1 / -1; }
  .f-bot{ margin-top:36px; flex-direction:column; gap:7px; }

  /* marquee un peu plus vif */
  .mq{ padding:13px 0; } .mq-t{ gap:28px; animation-duration:26s; }
  .mq-t span{ font-size:14px; }
}

@media (max-width:520px){
  .nums{ grid-template-columns:1fr; }
  .f-g{ grid-template-columns:1fr; }
  .step{ flex:0 0 88%; }
  .hero h1{ font-size:clamp(29px,8.6vw,36px); }
  .badge{ font-size:9.5px; letter-spacing:.12em; padding:6px 11px 5px; }
}

/* écrans tactiles : pas d'effets suspendus au survol */
@media (hover:none){
  .card:hover,.sect-card:hover,.btn:hover,.plan:hover{ transform:none; }
  .btn:hover svg{ transform:none; }
  .glow::after{ display:none; }
  .mq:hover .mq-t{ animation-play-state:running; }
}

/* Le VRAI logo, en image.
   Il etait rendu en Pacifico : la police ressemble beaucoup au logo, mais
   « ressembler » n'est pas « etre », et un rendu qui varie selon que la police
   charge ou non n'est pas une identite de marque. L'image ne depend de rien.
   Servie en 3x pour rester nette sur les ecrans a haute densite, recadree sur
   ses pixels utiles et redimensionnee : l'original faisait 1563 px de cote et
   100 Ko pour un affichage de 30 px de haut. */
.wm-img {
  height: 30px;
  width: auto;
  display: block;
}
.f-brand .wm-img.wm-foot {
  height: 36px;
}
@media (max-width: 560px) {
  .wm-img {
    height: 26px;
  }
  .f-brand .wm-img.wm-foot {
    height: 32px;
  }
}

/* Le bandeau d'appel a l'action et le pied de page partageaient la MEME
   couleur (--dk). Vus l'un au-dessus de l'autre, ils formaient un seul bloc
   sombre de plus de mille pixels : le bouton « Demander un acces » s'y noyait,
   et rien ne disait ou finissait l'argumentaire et ou commencait le pied.
   On garde la famille indigo mais on separe les deux plans : la section
   d'appel reste au premier plan, le pied recule. */
.sect.dark:last-of-type,
.cta-final {
  background: var(--dk-2);
}
footer {
  background: #1a1b3f;
  /* Un filet marque la couture, meme quand les deux fonds se ressemblent sur
     un ecran mal calibre. */
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* Message d'erreur de formulaire : il doit se voir sans casser la mise en
   page, et rester lisible sur fond clair comme sur fond sombre. */
.form-err {
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: 9px;
  background: rgba(196, 52, 74, 0.12);
  border: 1px solid rgba(196, 52, 74, 0.35);
  color: #c4344a;
  font-size: 13px;
  line-height: 1.5;
}
.dark .form-err,
footer .form-err {
  color: #ff9aa8;
}

/* Pot de miel : hors de l'ecran et masque aux lecteurs d'ecran. Un humain ne
   le voit jamais, un robot le remplit et sa demande est ignoree cote serveur.
   `display:none` serait detecte par les robots serieux : on le sort du champ
   de vision plutot que de le retirer du document. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Ceinture et bretelles : meme si un futur bloc deborde, la page ne doit
   jamais glisser horizontalement sur telephone. Les elements qui defilent
   vraiment (bande de metiers, tableaux) ont leur propre conteneur. */
html,
body {
  overflow-x: hidden;
}

/* En-tete sur telephone.
   Le logo, « Se connecter », « Demander un acces » et le burger ne tiennent
   pas ensemble sous 640px : la barre se tassait et la page gagnait 28px de
   largeur. On MASQUE l'appel a l'action plutot que de le compresser -- un
   bouton ecrase se lit mal et se touche mal, et l'action reste accessible
   partout ailleurs : dans le menu burger, dans le corps de chaque page, et
   dans la barre collante qui apparait au defilement.
   Le burger devient alors le seul point d'entree du menu, ce qui est le
   comportement attendu sur telephone. */
@media (max-width: 640px) {
  .nav-r .btn {
    display: none;
  }
  .nav-in {
    gap: 10px;
  }
  .burger {
    display: inline-flex;
  }
}