/* ==========================================================================
   KLIX Digital — reprise fidele de la maquette d'origine.
   Meme structure, memes animations, memes valeurs.
   Ecarts demandes par le client :
   - le heros et trois sections passent en fond clair
     (#top, #services, #chiffres, #preuves) ;
   - le bloc equipe est plus compact que dans la maquette.
   Rythme : CLAIR, sombre, CLAIR, volets, CLAIR, sombre, CLAIR, sombre.
   ========================================================================== */

:root{
  color-scheme: dark;

  --navy:#0F172A;         /* fond principal */
  --navy-deep:#0B1222;    /* manifeste, bandeaux */
  --card:#111F35;         /* cartes sur fond sombre */
  --accent:#FF9500;
  --accent-deep:#D97800;

  /* Textes sur fond sombre */
  --muted:#8FA0BA;
  --muted-2:#93A1B8;
  --soft:#C4D0E2;
  --soft-2:#CBD5E6;
  --soft-3:#E2E8F5;
  --dim:#7C8AA5;

  /* Sections claires */
  --paper:#FFFFFF;
  --ink:#0F172A;
  --ink-soft:#4B5A70;
  --ink-dim:#94A3B8;
  --line-light:#E2E9F2;
  --line-light-2:#DFE6F0;
  /* L'orange pur tombe a 2,2:1 sur blanc. Deux variantes lisibles : */
  --accent-text:#9C5600;    /* petits labels sur fond clair (5,6:1) */
  --accent-big:#DE7600;     /* gros titres sur fond clair (3,1:1) */

  --ease:cubic-bezier(.16,.84,.32,1);
  --shell:1560px;
  /* La gouttiere integre les zones sures iOS (encoche, coins arrondis). */
  --pad:calc(44px + env(safe-area-inset-left, 0px));
}

/* --------------------------------------------------------- Base --------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip et non hidden : clip ne cree pas de conteneur de
   defilement, donc position:sticky continue de fonctionner. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--navy);
  color:#FFFFFF;
  font-family:"Poppins","Poppins Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  overscroll-behavior-x:none;
}
img{display:block;max-width:100%}
a,button,[role=button],input,textarea,select{-webkit-tap-highlight-color:transparent}
button,[role=button]{touch-action:manipulation}
a{color:#FFFFFF}
::selection{background:var(--accent);color:var(--navy)}
:where(a,button,[role=button],summary,input,textarea):focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--accent);color:var(--navy);padding:14px 22px;font-weight:800}
.skip:focus{left:12px;top:12px}
.shell{max-width:var(--shell);box-sizing:border-box;margin:0 auto;padding:0 var(--pad);width:100%}

/* Metriques calees sur Poppins : evite le saut de mise en page au swap. */
@font-face{
  font-family:"Poppins Fallback";src:local("Arial");
  size-adjust:112%;ascent-override:92%;descent-override:31%;line-gap-override:0%;
}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/poppins-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/poppins-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------- Animations --------- */
@keyframes slashIn{from{opacity:0;transform:skewX(-22deg) translateY(140px)}}
@keyframes rise{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes riseBlur{from{opacity:0;transform:translateY(60px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes beamDrift{from{transform:skewX(-22deg) translateX(-6vw)}to{transform:skewX(-22deg) translateX(6vw)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes beamPulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ------------------------------------------------ Curseur / fond -------- */
#kbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#kbg .orb{position:absolute;border-radius:50%;animation:spinSlow 80s linear infinite}
#kbg .orb--a{right:-30%;top:-40%;width:90vw;height:90vw;filter:blur(24px);
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,149,0,.06) 40deg,transparent 95deg,rgba(148,163,184,.05) 200deg,transparent 265deg)}
#kbg .orb--b{left:-25%;bottom:-45%;width:70vw;height:70vw;filter:blur(30px);
  animation-duration:110s;animation-direction:reverse;
  background:conic-gradient(from 180deg,transparent 0deg,rgba(255,149,0,.04) 60deg,transparent 130deg)}
#kbg .grid{position:absolute;inset:0;background:repeating-linear-gradient(112deg,rgba(255,255,255,.018) 0 1px,transparent 1px 150px)}
#kbg .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 32%,transparent 52%,rgba(4,9,20,.4) 100%)}
#kbg i{position:absolute;top:-20%;height:140%;transform:skewX(-22deg)}
#kbg .b1{left:12%;width:140px;background:rgba(255,255,255,.016);animation:beamDrift 26s ease-in-out infinite alternate}
#kbg .b2{left:calc(12% + 150px);width:1px;background:linear-gradient(to bottom,transparent,rgba(255,149,0,.35),transparent);animation:beamDrift 26s ease-in-out infinite alternate,beamPulse 7s ease-in-out infinite}
#kbg .b3{left:46%;width:60px;background:rgba(255,149,0,.03);animation:beamDrift 34s ease-in-out infinite alternate-reverse}
#kbg .b4{left:calc(46% + 70px);width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.22),transparent);animation:beamDrift 34s ease-in-out infinite alternate-reverse,beamPulse 9s ease-in-out 1.5s infinite}
#kbg .b5{right:6%;width:200px;background:rgba(255,255,255,.012);animation:beamDrift 40s ease-in-out infinite alternate}
#kbg .b6{right:calc(6% + 210px);width:1px;background:linear-gradient(to bottom,transparent,rgba(255,149,0,.28),transparent);animation:beamDrift 40s ease-in-out infinite alternate,beamPulse 11s ease-in-out 3s infinite}
#kgrainsvg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:280;pointer-events:none;opacity:.05}
#klixbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:220;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* ------------------------------------------------------------ Nav ------- */
#klixnav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:background .4s ease,border-color .4s ease;
  border-bottom:1px solid rgba(255,255,255,0);
}
#klixnav[data-stuck]{background:rgba(15,23,42,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.08)}
.nav__in{max-width:var(--shell);margin:0 auto;padding:22px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav__logo{display:inline-flex;align-items:center;text-decoration:none}
.nav__logo img{height:32px;width:auto}
/* Le heros est clair : logo encre et liens sombres tant que la barre est
   transparente ; logo blanc et liens clairs des qu'elle prend son fond navy. */
.nav__logo .lg-white{display:none}
#klixnav[data-stuck] .lg-ink,.subnav .lg-ink{display:none}
#klixnav[data-stuck] .lg-white,.subnav .lg-white{display:block}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);font-size:.78rem;font-weight:600}
.nav__links>a{text-decoration:none;white-space:nowrap;color:var(--ink);letter-spacing:.05em;transition:color .25s ease}
#klixnav[data-stuck] .nav__links>a:not(.btn),
.subnav .nav__links>a:not(.btn){color:var(--soft-2)}
.nav__links>a:hover{color:var(--accent)}
.megabtn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 0;cursor:pointer;
  background:none;border:0;font:inherit;font-weight:600;color:var(--ink);letter-spacing:.05em;transition:color .25s ease;
}
#klixnav[data-stuck] .megabtn,.subnav .megabtn{color:var(--soft-2)}
.megabtn[aria-expanded=true],.megabtn:hover{color:var(--accent)}
.megabtn i{display:inline-block;width:9px;height:9px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .35s var(--ease)}
.megabtn[aria-expanded=true] i{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:rgba(9,15,28,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,149,0,.25);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2vw),0 100%);
  transform:translateY(-12px);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .4s var(--ease);
}
.mega[data-open]{transform:none;opacity:1;pointer-events:auto}
.mega__grid{max-width:var(--shell);box-sizing:border-box;margin:0 auto;padding:30px var(--pad) 38px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mega__item{
  display:flex;flex-direction:column;gap:8px;padding:18px 22px;text-decoration:none;color:#FFFFFF;
  border:1px solid rgba(255,255,255,0);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background .3s ease,border-color .3s ease,transform .35s var(--ease);
}
.mega__item:hover{background:rgba(255,149,0,.07);border-color:rgba(255,149,0,.35);transform:translateY(-3px)}
.mega__top{display:flex;align-items:center;gap:10px}
.mega__num{font-size:.72rem;font-weight:800;color:var(--accent);transform:skewX(-10deg);display:inline-block}
.mega__bar{display:inline-block;width:14px;height:5px;background:var(--accent);transform:skewX(-22deg)}
.mega__t{font-size:.92rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.mega__tag{font-size:.74rem;font-weight:300;line-height:1.5;color:var(--muted)}
.mega__cta{justify-content:center;background:var(--accent);color:var(--navy)}
.mega__cta:hover{background:var(--accent);color:var(--navy);transform:translateY(-3px)}
.mega__cta .mega__t{font-size:1rem;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.mega__cta .mega__go{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#klixnav[data-stuck] .burger span,.subnav .burger span{background:#fff}

/* ----------------------------------------------------- Boutons ---------- */
.btn{
  display:inline-block;background:var(--accent);color:var(--navy);font-weight:800;
  text-decoration:none;transform:skewX(-14deg);border:0;cursor:pointer;font-family:inherit;
  transition:background .25s ease,transform .35s var(--ease),box-shadow .35s ease;
}
.btn>span{display:inline-block;transform:skewX(14deg)}
.btn:hover{background:#FFFFFF;color:var(--navy);transform:skewX(-14deg) translateY(-3px)}
.btn--hero{font-size:.98rem;padding:20px 46px;box-shadow:0 18px 50px rgba(255,149,0,.35)}
.btn--hero:hover{transform:skewX(-14deg) translateY(-4px);box-shadow:0 26px 64px rgba(255,149,0,.5)}
.btn--nav{font-size:.78rem;padding:12px 26px}
.btn--sm{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 32px}
.btn--md{font-size:.9rem;padding:16px 36px}
.btn--lg{font-size:.95rem;padding:18px 42px;box-shadow:0 16px 44px rgba(255,149,0,.3)}

.ghostlink{
  display:inline-flex;align-items:center;gap:14px;color:#FFFFFF;font-weight:600;font-size:.98rem;
  text-decoration:none;padding:19px 10px;border-bottom:2px solid rgba(255,149,0,.45);
  transition:border-color .25s ease,color .25s ease,gap .3s var(--ease);
}
.ghostlink:hover{color:var(--accent);border-color:var(--accent);gap:22px}
.ghostlink i{display:inline-block;width:13px;height:13px;background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%)}

.eyebrow{
  margin:0;display:flex;align-items:center;gap:16px;
  font-size:.76rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
/* 0.3 : le repere des surtitres reprend le parallelogramme du logo. */
.eyebrow::before{content:"";display:inline-block;width:22px;height:9px;
  background:currentColor;transform:skewX(-22deg);flex:none}
.ghostnum{
  position:absolute;margin:0;font-size:clamp(8rem,18vw,17rem);font-weight:900;letter-spacing:-.05em;
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.05);
  user-select:none;pointer-events:none;
}

/* -------------------------------------------------------- Heros --------- */
.hero .ghostlink{color:var(--ink);border-bottom-color:rgba(255,149,0,.55)}
.hero .ghostlink:hover{color:var(--accent-text);border-bottom-color:var(--accent)}
#top{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink)}
.hero__deco{position:absolute;inset:0;pointer-events:none}
.hero__deco i{position:absolute;transform:skewX(-22deg)}
#hs1{right:-4%;top:-16%;width:230px;height:120%;background:linear-gradient(to bottom,var(--accent),var(--accent-deep));box-shadow:0 0 120px rgba(255,149,0,.3);animation:slashIn 1.2s var(--ease) .2s both}
#hs2{right:12%;top:-10%;width:56px;height:120%;background:rgba(255,149,0,.22);animation:slashIn 1.2s var(--ease) .38s both}
#hs3{right:22%;top:-10%;width:2px;height:120%;background:rgba(15,23,42,.14);animation:slashIn 1.2s var(--ease) .5s both}
#hs4{left:-2%;bottom:-20%;width:90px;height:70%;background:rgba(15,23,42,.04);animation:slashIn 1.2s var(--ease) .62s both}
.hero__scroll{display:none;position:absolute;left:var(--pad);bottom:120px;flex-direction:column;align-items:center;gap:14px;animation:rise 1s var(--ease) 1.4s both}
.hero__scroll span:first-child{writing-mode:vertical-rl;font-size:.66rem;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:#6B7789}
.hero__scroll span:last-child{width:2px;height:52px;background:linear-gradient(to bottom,var(--accent),transparent)}
.hero__in{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--shell);width:100%;margin:0 auto;padding:150px var(--pad) 60px;position:relative;z-index:2}
.hero__eyebrow{margin:0 0 0 6px;animation:rise .9s var(--ease) .1s both;color:var(--accent-text)}
/* Roue de mots. Pas 1.14em et non 1em : a 1em l'accent de VISIBILITE etait rogne. */
/* Les mots occupent tous la meme cellule de grille : la zone prend la
   taille du plus large, un seul est visible, et rien ne peut deborder
   puisqu'il n'y a qu'une cellule. L'ancienne roue reposait sur un
   `overflow:hidden` et une translation calculee — un mot mal masque
   suffisait a faire chevaucher les suivants. */
.slot{display:inline-grid;vertical-align:top}
.slot__w{
  grid-area:1/1;white-space:nowrap;color:var(--accent-big);
  opacity:0;transform:translateY(.28em);
  transition:opacity .45s ease,transform .6s var(--ease);
}
.slot__w.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .slot__w{transition:none;transform:none}
}
.hero__foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:52px}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;animation:rise .9s var(--ease) .7s both}
.hero__note{
  margin:0;max-width:34ch;font-size:.95rem;font-weight:300;line-height:1.7;color:#4B5A70;
  border-left:2px solid var(--accent);padding:14px 18px 14px 20px;background:#F6F8FC;
  animation:rise .9s var(--ease) .85s both;
}

/* L'indicateur de defilement n'a la place de s'afficher que sur les
   ecrans hauts : ailleurs il passait derriere le bouton d'appel. */
@media (min-height:1000px){.hero__scroll{display:flex}}

/* Bandeau orange incline en bas du heros */
.strip{position:relative;z-index:3;background:var(--accent);overflow:hidden;padding:16px 0;transform:skewY(-1.4deg) scale(1.02);transform-origin:left bottom}
.strip__track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.strip__set{display:flex;align-items:center;gap:46px;padding-right:46px;white-space:nowrap;font-size:1rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.strip__set b{display:inline-block;width:11px;height:18px;background:var(--navy);transform:skewX(-22deg)}

/* --------------------------------------------------- Manifeste ---------- */
#specialite{
  position:relative;background:var(--navy-deep);color:#FFFFFF;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6vw),0 100%);
  padding:120px 0 calc(6vw + 110px);overflow:clip;margin-top:-2px;
}
#specialite .ghostnum{top:30px;right:-2vw}
#specialite .sl1{position:absolute;left:6%;bottom:-10%;width:70px;height:60%;background:rgba(255,149,0,.06);transform:skewX(-22deg)}
#specialite .sl2{position:absolute;right:14%;top:-20%;width:2px;height:80%;background:rgba(255,255,255,.08);transform:skewX(-22deg)}
#manifwrap{max-width:1180px;margin:0 auto;padding:0 var(--pad);position:relative}
.manif__text{margin:44px 0 0;font-size:clamp(1.7rem,3.6vw,3.3rem);font-weight:800;letter-spacing:-.035em;line-height:1.22;text-wrap:pretty}
.manif__text [data-word]{opacity:.12;transition:opacity .18s linear}
.manif__text .hot{color:var(--accent)}
.manif__cards{display:flex;flex-wrap:wrap;gap:24px;margin-top:74px}
.manif__card{
  flex:1;min-width:240px;background:var(--card);border:1px solid rgba(255,255,255,.07);
  padding:26px 34px 28px;clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%);
  transition:transform .45s var(--ease),border-color .3s ease;
}
.manif__card:hover{transform:translateY(-6px);border-color:rgba(255,149,0,.5)}
.manif__card h3{margin:0;font-size:2rem;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.manif__card h3.accent{color:var(--accent)}
.manif__card p{margin:8px 0 0;font-size:.86rem;font-weight:300;line-height:1.6;color:var(--muted)}

/* ------------------------------------- Services (section eclaircie) ----- */
#services{position:relative;padding:130px 0 120px;overflow:clip;background:var(--paper);color:var(--ink)}
#services .ghostnum{bottom:-2vw;left:-1vw;-webkit-text-stroke-color:rgba(15,23,42,.07)}
#services .eyebrow{color:var(--accent-text)}
.svc__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:clamp(34px,4.5vw,90px);margin-top:64px;align-items:start}
.svc__row{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;
  padding:24px 14px 24px 0;border:0;border-bottom:1px solid rgba(15,23,42,.1);
  cursor:pointer;background:none;width:100%;text-align:left;
  font:inherit;color:inherit;transition:padding .45s var(--ease);
}
.svc__row .num{font-size:.85rem;font-weight:800;letter-spacing:.08em;color:#6B7789;transform:skewX(-10deg);display:inline-block;transition:color .3s ease}
.svc__row .name{font-size:clamp(1.15rem,1.9vw,1.8rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--ink);transition:color .3s ease}
.svc__row .arw{font-size:1.2rem;font-weight:300;color:var(--accent-big);opacity:.2;transform:translateX(-8px);transition:opacity .3s ease,transform .45s var(--ease)}
.svc__row[data-on]{padding-left:22px}
.svc__row[data-on] .num,.svc__row[data-on] .name{color:var(--accent-big)}
.svc__row[data-on] .arw{opacity:1;transform:none}
.svc__panelwrap{position:sticky;top:110px}
.svc__panel{
  position:relative;background:linear-gradient(135deg,#14243D 0%,#0D1930 100%);
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(40px 0,100% 0,calc(100% - 40px) 100%,0 100%);
  padding:clamp(30px,3.2vw,52px) clamp(36px,3.8vw,60px) clamp(32px,3.4vw,56px);
  overflow:hidden;color:#FFFFFF;
}
.svc__panel .bignum{
  position:absolute;right:34px;top:-12px;font-size:clamp(6rem,10vw,10rem);font-weight:900;letter-spacing:-.05em;
  line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,149,0,.4);transform:skewX(-10deg);pointer-events:none;
}
.svc__panel .beam{position:absolute;left:14px;top:-20%;width:16px;height:140%;background:rgba(255,149,0,.1);transform:skewX(-22deg)}
.svc__panel .kicker{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.svc__panel h3{margin:20px 0 0;font-size:clamp(1.5rem,2.2vw,2.3rem);font-weight:900;letter-spacing:-.03em;line-height:1.06;max-width:15ch;position:relative}
.svc__panel .desc{margin:20px 0 0;font-size:.95rem;font-weight:300;line-height:1.7;color:var(--muted-2);max-width:46ch;position:relative}
.svc__panel .go{margin:30px 0 0;position:relative}

/* ------------------------------------------- Le Systeme Mandat ---------- */
#mandcont{height:400vh;position:relative}
.mand__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.mand__panel{position:absolute;inset:0;display:flex;align-items:center;will-change:clip-path}
.mand__panel i{position:absolute;top:-15%;height:130%;transform:skewX(-22deg)}
.mand__panel .s1{right:8%;width:120px}
.mand__panel .s2{right:16%;width:14px}
.mand__ghost{
  position:absolute;right:-1vw;bottom:0;margin:0;font-size:clamp(12rem,30vw,30rem);font-weight:900;
  letter-spacing:-.06em;line-height:.75;color:transparent;user-select:none;pointer-events:none;
}
.mand__in{max-width:var(--shell);width:100%;box-sizing:border-box;margin:0 auto;padding:0 var(--pad);position:relative}
.mand__in h2{margin:26px 0 0;font-size:clamp(3rem,8vw,7.4rem);font-weight:900;letter-spacing:-.05em;line-height:.95;text-transform:uppercase}
.mand__in .desc{margin:30px 0 0;max-width:52ch;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:300;line-height:1.7;opacity:.78}
.mand__dots{position:absolute;left:var(--pad);bottom:38px;display:flex;gap:10px;z-index:10}
.mand__dots span{width:34px;height:8px;background:rgba(255,255,255,.3);transform:skewX(-22deg);transition:background .3s ease}

/* ------------------------------------------------------ Chiffres -------- */
#chiffres{position:relative;padding:130px 0 110px;overflow:clip;background:var(--paper);color:var(--ink)}
#chiffres .beam{position:absolute;left:-70px;top:-20%;width:120px;height:140%;background:rgba(255,149,0,.1);transform:skewX(-22deg)}
#chiffres .eyebrow{color:var(--accent-text)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:80px;border-top:1px solid rgba(15,23,42,.14)}
.stat{padding:36px 30px 10px;border-right:1px solid rgba(15,23,42,.14)}
.stat:last-child{border-right:0}
.stat__n{margin:0;font-size:clamp(3rem,5vw,4.6rem);font-weight:900;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.stat__d{margin:16px 0 0;font-size:.87rem;font-weight:300;line-height:1.55;color:#5D6878;max-width:26ch}
.stat__s{margin:14px 0 0;font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}

/* -------------------------------------------------------- Equipe -------- */
#equipe{position:relative;padding:60px 0 130px}
.team__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
/* Plus compact que la maquette (78vh) : demande client. */
.team{margin-top:56px;height:58vh;height:58svh;min-height:430px;max-height:600px;display:flex;align-items:stretch;overflow:hidden}
.member{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;cursor:pointer;
  border:0;padding:0;text-align:left;color:inherit;font:inherit;
  background:linear-gradient(160deg,#16243C 0%,#0B1222 100%);
  transition:flex .62s var(--ease);
}
.member[data-open]{flex:2.7 1 0}
.member--a{clip-path:polygon(0 0,100% 0,calc(100% - 72px) 100%,0 100%);margin-left:0}
.member--b{clip-path:polygon(72px 0,100% 0,calc(100% - 72px) 100%,0 100%);margin-left:-68px}
.member--c{clip-path:polygon(72px 0,100% 0,100% 100%,0 100%);margin-left:-68px}
.member__slashes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.member__slashes i{position:absolute;background:var(--accent);transform:skewX(-22deg) translateY(34px);opacity:0;transition:opacity .55s ease,transform .8s var(--ease)}
.member__slashes .m1{right:15%;top:6%;width:8%;height:54%}
.member__slashes .m2{right:3%;top:24%;width:4.5%;height:48%;transition-delay:.08s}
.member__slashes .m3{right:27%;top:34%;width:2.5%;height:36%;transition-delay:.14s}
.member[data-open] .member__slashes .m1{opacity:.92;transform:skewX(-22deg)}
.member[data-open] .member__slashes .m2{opacity:.5;transform:skewX(-22deg)}
.member[data-open] .member__slashes .m3{opacity:.7;transform:skewX(-22deg)}
.member__ph{position:absolute;inset:0;z-index:1;background-size:cover;background-position:50% 22%;background-repeat:no-repeat;
  filter:saturate(.15) brightness(.6) contrast(1.05);transition:filter .7s ease,background-position .9s var(--ease)}
.member[data-open] .member__ph{filter:none;background-position:42% 20%}
.member__veil,.member__veil2{position:absolute;inset:0;z-index:2;transition:opacity .7s ease}
.member__veil{opacity:1;background:linear-gradient(to top,rgba(15,23,42,.97) 0%,rgba(15,23,42,.86) 26%,rgba(15,23,42,.42) 55%,rgba(15,23,42,.18) 100%)}
.member__veil2{opacity:0;background:linear-gradient(to top,rgba(15,23,42,.82) 0%,rgba(15,23,42,.42) 26%,rgba(15,23,42,0) 52%),linear-gradient(to right,rgba(15,23,42,.55) 0%,rgba(15,23,42,0) 52%)}
.member[data-open] .member__veil{opacity:0}
.member[data-open] .member__veil2{opacity:1}
.member__body{position:absolute;z-index:3;left:clamp(20px,2.4vw,38px);right:clamp(20px,2.4vw,38px);bottom:clamp(24px,3.4vh,42px)}
.member--b .member__body,.member--c .member__body{padding-left:34px}
.member__mark{display:block;width:30px;height:8px;background:var(--accent);transform:skewX(-22deg);transform-origin:left center;margin-bottom:16px;transition:width .55s var(--ease)}
.member[data-open] .member__mark{width:68px}
.member h3,.member h2{margin:0;font-size:clamp(1.35rem,2vw,2.1rem);font-weight:900;letter-spacing:-.04em;line-height:.98;white-space:nowrap;text-transform:uppercase;color:#fff}
.member__toggle{
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit;line-height:inherit;cursor:pointer;text-align:left;
}
.member__short{
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin:10px 0 0;max-height:2.2em;opacity:1;overflow:hidden;white-space:nowrap;
  transition:opacity .28s ease,max-height .5s var(--ease),margin .5s var(--ease);
}
.member[data-open] .member__short{margin:0;max-height:0;opacity:0}
.member__more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease) .06s,opacity .45s ease .18s}
.member[data-open] .member__more{grid-template-rows:1fr;opacity:1}
.member__more>div{overflow:hidden;min-height:0}
.member__role{margin:10px 0 0;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.member__say{margin:12px 0 0;font-size:.88rem;font-weight:300;line-height:1.6;color:var(--soft-2);max-width:34ch}
.member__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.member__tags li{font-size:.7rem;font-weight:500;letter-spacing:.02em;color:var(--soft-3);padding:6px 14px;border:1px solid rgba(255,255,255,.22);background:rgba(15,23,42,.4);transform:skewX(-10deg)}
.member__tags li span{display:inline-block;transform:skewX(10deg)}
.member__cta{display:inline-block;margin-top:22px;font-size:.82rem;font-weight:600;color:#FFFFFF;text-decoration:none;padding-bottom:5px;border-bottom:2px solid var(--accent);transition:color .25s ease}
.member__cta:hover{color:var(--accent)}

/* ------------------------------- Preuves + FAQ (section eclaircie) ------ */
#preuves{
  position:relative;background:var(--paper);color:var(--ink);
  clip-path:polygon(0 6vw,100% 0,100% calc(100% - 6vw),0 100%);
  padding:calc(6vw + 100px) 0 calc(6vw + 110px);
}
#preuves .ghostnum{top:calc(6vw + 20px);right:-2vw;-webkit-text-stroke-color:rgba(15,23,42,.08)}
.trust__label{margin:0;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#6B7789}
.logos{margin-top:38px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 14%,black 86%,transparent);mask-image:linear-gradient(to right,transparent,black 14%,black 86%,transparent)}
.logos__track{display:flex;width:max-content;align-items:center;animation:marquee 30s linear infinite}
.logos__set{display:flex;align-items:center;gap:80px;padding-right:80px}
.logos__set img{height:52px;width:auto;filter:grayscale(1) opacity(.5)}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:56px}
.badges>span{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--ink);background:#F6F8FC;border:1px solid var(--line-light);padding:12px 22px;transform:skewX(-10deg)}
.badges>span>span{display:inline-block;transform:skewX(10deg)}

#faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:72px;margin-top:120px;align-items:start}
.faq__side{position:sticky;top:120px}
.faq__side .eyebrow{color:var(--accent-text)}
.faq__side h3{margin:22px 0 0;font-size:clamp(2rem,3.8vw,3.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;color:var(--ink)}
.band__title .stroke{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.band--light .band__title .stroke{-webkit-text-stroke-color:var(--accent-big)}
/* Un sur-titre reste un sur-titre, meme porte par un h2 ou un h3. */
h1.eyebrow,h2.eyebrow,h3.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.3em;line-height:1.4}
.faq__side p{margin:26px 0 0;font-size:.95rem;font-weight:300;line-height:1.7;color:var(--ink-soft)}
.faq__side a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.faq__list{display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--line-light-2)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:26px 0;cursor:pointer;text-align:left;font-family:inherit;
}
.faq__q>span:first-child{font-size:1.04rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.4}
.faq__chip{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:#EDF1F7;color:var(--ink);font-size:1.25rem;font-weight:300;transform:skewX(-8deg);
  transition:transform .45s var(--ease),background .3s ease;
}
.faq__q[aria-expanded=true] .faq__chip{background:var(--accent);transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .4s ease}
.faq__q[aria-expanded=true]+.faq__a{grid-template-rows:1fr;opacity:1}
.faq__a>div{overflow:hidden;min-height:0}
.faq__a p{margin:0;padding:0 46px 28px 0;font-size:.92rem;font-weight:300;line-height:1.7;color:var(--ink-soft)}

/* ------------------------------------------------ Contact / pied -------- */
#contact-cta{position:relative;overflow:clip;padding:150px 0 90px}
#contact-cta .deco{position:absolute;inset:0;pointer-events:none}
#contact-cta .deco i{position:absolute;transform:skewX(-22deg)}
#contact-cta .d1{left:2%;top:-14%;width:120px;height:80%;background:rgba(255,149,0,.08)}
#contact-cta .d2{right:6%;bottom:-18%;width:170px;height:90%;background:rgba(255,149,0,.12)}
#contact-cta .d3{right:24%;top:-8%;width:2px;height:64%;background:rgba(255,255,255,.12)}
.contact__in{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:0 var(--pad);text-align:center}
.contact__kicker{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
#bigcta{
  display:inline-block;margin-top:30px;font-size:clamp(4rem,14vw,13rem);font-weight:900;letter-spacing:-.05em;
  line-height:.9;text-transform:uppercase;text-decoration:none;color:transparent;-webkit-text-stroke:2px #FFFFFF;
  transition:color .45s ease,transform .3s ease-out;
}
#bigcta:hover{color:var(--accent)}
.contact__sub{margin:40px auto 0;max-width:54ch;font-size:1rem;font-weight:300;line-height:1.7;color:var(--muted)}
.foot__cols{max-width:var(--shell);margin:110px auto 0;padding:44px var(--pad) 0;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:40px}
.foot__nav{display:flex;flex-wrap:wrap;gap:70px}
.foot__col{display:flex;flex-direction:column;gap:11px}
.foot__col h3{margin:0 0 6px;font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.foot__col a:not(.btn){font-size:.84rem;color:var(--soft-2);text-decoration:none;transition:color .25s ease}
.foot__col a:hover{color:var(--accent)}
.foot__col p{margin:0;font-size:.84rem;font-weight:300;line-height:1.6;color:var(--muted)}
.foot__bar{max-width:var(--shell);margin:40px auto 0;padding:22px var(--pad) 30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.06)}
.foot__bar p{margin:0;font-size:.72rem;font-weight:300;color:var(--dim)}
.foot__bar div{display:flex;gap:26px}
.foot__bar a{font-size:.72rem;color:var(--muted);text-decoration:none;transition:color .25s ease}
.foot__bar a:hover{color:var(--accent)}

/* ------------------------------------------- Pages interieures ---------- */
.subnav{background:rgba(15,23,42,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.08)}
.subnav .nav__in{padding:18px var(--pad)}
.subnav .nav__logo img{height:30px}
.phead{position:relative;overflow:clip;padding:170px 0 90px}
.phead .s1{position:absolute;right:6%;top:-20%;width:150px;height:130%;background:linear-gradient(to bottom,rgba(255,149,0,.85),rgba(224,124,0,.6));transform:skewX(-22deg);animation:slashIn 1.1s var(--ease) .15s both}
.phead .s2{position:absolute;right:16%;top:-20%;width:40px;height:130%;background:rgba(255,149,0,.25);transform:skewX(-22deg);animation:slashIn 1.1s var(--ease) .3s both}
.phead .bignum{position:absolute;right:-1vw;bottom:-3vw;margin:0;font-size:clamp(9rem,20vw,19rem);font-weight:900;letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.06);user-select:none;pointer-events:none}
.phead__in{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
.crumb{margin:0;display:flex;align-items:center;gap:16px;font-size:.76rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);animation:rise .8s var(--ease) .1s both}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb i{display:inline-block;width:14px;height:5px;background:var(--accent);transform:skewX(-22deg)}
.phead h1{margin:28px 0 0;font-size:clamp(2.6rem,6.4vw,5.8rem);font-weight:900;letter-spacing:-.045em;line-height:.98;text-transform:uppercase;max-width:14ch;animation:rise .8s var(--ease) .22s both}
.phead .lead{margin:26px 0 0;font-size:clamp(1rem,1.4vw,1.25rem);font-weight:300;line-height:1.7;color:var(--soft);max-width:56ch;animation:rise .8s var(--ease) .34s both}
.phead__cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:44px;animation:rise .8s var(--ease) .46s both}
.phead__cta .ghostlink{font-size:.95rem;padding:17px 8px}

.band{position:relative;background:var(--navy-deep);clip-path:polygon(0 3vw,100% 0,100% calc(100% - 3vw),0 100%);padding:calc(3vw + 80px) 0 calc(3vw + 90px)}
.band--plain{clip-path:none;background:none;padding:110px 0}
.band--light{background:var(--paper);color:var(--ink);clip-path:none;padding:110px 0}
.band--light .eyebrow{color:var(--accent-text)}
.band--light h2,.band--light h3{color:var(--ink)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px}
.pcard{
  position:relative;background:var(--card);border:1px solid rgba(255,255,255,.07);padding:30px 32px 34px;
  clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%);
  transition:transform .45s var(--ease),border-color .3s ease;
}
.pcard:hover{transform:translateY(-8px);border-color:rgba(255,149,0,.5)}
.pcard .bar{display:block;width:34px;height:7px;background:var(--accent);transform:skewX(-22deg)}
.pcard h3{margin:20px 0 0;font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.pcard p{margin:10px 0 0;font-size:.87rem;font-weight:300;line-height:1.65;color:var(--muted)}
.band--light .pcard{background:#F6F8FC;border-color:var(--line-light)}
.band--light .pcard p{color:#5D6878}
.result{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;margin-top:70px;border-top:1px solid rgba(255,255,255,.1);padding-top:44px}
.result p{margin:0;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:800;letter-spacing:-.025em;line-height:1.25;max-width:34ch}
.otherlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:36px}
.otherlinks a{display:flex;align-items:center;gap:14px;padding:20px 22px;text-decoration:none;color:var(--soft-3);border:1px solid rgba(255,255,255,.08);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:border-color .3s ease,background .3s ease,transform .35s var(--ease)}
.otherlinks a:hover{border-color:rgba(255,149,0,.45);background:rgba(255,149,0,.05);transform:translateY(-3px);color:#fff}
.otherlinks .n{font-size:.72rem;font-weight:800;color:var(--accent);transform:skewX(-10deg);display:inline-block}
.otherlinks .t{font-size:.88rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}

.form{display:grid;gap:14px;margin-top:34px;max-width:640px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form textarea{
  width:100%;font:inherit;font-size:.95rem;font-weight:300;color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);padding:16px 18px;transition:border-color .25s ease,background .25s ease;
}
.form input::placeholder,.form textarea::placeholder{color:#8FA0BA}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.08)}
.form textarea{min-height:150px;resize:vertical}
.form .btn{justify-self:start;margin-top:8px}
.form__note{font-size:.78rem;font-weight:300;color:var(--muted)}
.contactgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(40px,6vw,80px)}
.clist{display:grid;gap:2px;margin:40px 0 0;padding:0}
.clist .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding:22px 24px;background:rgba(255,255,255,.04);text-decoration:none;transition:background .25s ease}
.clist .row:hover{background:rgba(255,149,0,.08)}
.clist dt{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);min-width:110px}
.clist dd{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#fff}

/* -------------------------------------------------- Revelations --------- */
[data-reveal]{opacity:0;filter:blur(5px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter .9s ease}
[data-reveal="up"]{transform:translateY(52px)}
[data-reveal="left"]{transform:translateX(-52px)}
[data-reveal="right"]{transform:translateX(52px)}
[data-reveal="scale"]{transform:scale(.92)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
/* Sans JS, rien ne doit rester invisible. */
.no-js [data-reveal]{opacity:1;transform:none;filter:none}

/* ---------------------------------------------------------- Mobile ------ */
@media (max-width:1100px){
  .mega__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--pad:calc(22px + env(safe-area-inset-left, 0px))}
  .burger{display:block}
  .nav__links{
    position:fixed;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(9,15,28,.98);backdrop-filter:blur(18px);padding:8px var(--pad) 26px;
    max-height:calc(100dvh - 72px);overflow:auto;border-bottom:1px solid rgba(255,149,0,.25);
    transform:translateY(-14px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s var(--ease);
  }
  .nav__links[data-open]{transform:none;opacity:1;pointer-events:auto}
  .nav__links>a:not(.btn),.megabtn{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:1rem;width:100%;justify-content:space-between}
  .nav__links>.btn{margin-top:18px;text-align:center}
  .mega{position:static;opacity:1;transform:none;pointer-events:auto;clip-path:none;border:0;background:none;display:none}
  .mega[data-open]{display:block}
  .mega__grid{grid-template-columns:1fr;padding:8px 0 16px}
  #hs2,#hs3{display:none}
  #hs1{width:110px}
  .hero__scroll{display:none}
  .hero__in{padding-top:130px}
  .svc__grid{grid-template-columns:1fr;gap:44px}
  .svc__panelwrap{position:static}
  /* Le defilement a volets suppose une souris et de la hauteur : sur mobile
     les quatre etapes s'empilent, meme contenu, meme identite. */
  #mandcont{height:auto}
  .mand__stick{position:static;height:auto}
  .mand__panel{position:relative;inset:auto;clip-path:none!important;min-height:78svh;padding:70px 0}
  .mand__dots{display:none}
  .mand__ghost{font-size:clamp(8rem,34vw,14rem)}
  .team{height:auto;min-height:0;max-height:none;flex-direction:column;overflow:visible}
  .member{flex:none!important;clip-path:none!important;margin-left:0!important;min-height:56svh}
  .member--b .member__body,.member--c .member__body{padding-left:0}
  /* En colonne, le bloc de texte monte plus haut que sur le montage large :
     le voile doit couvrir davantage, sinon le texte tombe sur le costume clair. */
  .member__ph{filter:none;background-position:50% 8%}
  .member__veil{opacity:0}
  .member__veil2{
    opacity:1;
    background:linear-gradient(to top,rgba(15,23,42,.97) 0%,rgba(15,23,42,.93) 38%,rgba(15,23,42,.55) 66%,rgba(15,23,42,.12) 100%);
  }
  .member__short{display:none}
  .member__more{grid-template-rows:1fr;opacity:1}
  .member__slashes i{opacity:.6;transform:skewX(-22deg)}
  .member__mark{width:68px}
  #faq{gap:44px}
  .faq__side{position:static}
  .stat{border-right:0;border-bottom:1px solid rgba(15,23,42,.14)}
  .foot__nav{gap:36px}
}
@media (max-width:900px){
  /* Sous 16px, iOS zoome automatiquement a la mise au point du champ. */
  .form input,.form textarea,.form select{font-size:16px}
  /* Cibles tactiles : 44px minimum. */
  .faq__q{padding:22px 0}
  .svc__row{padding-top:20px;padding-bottom:20px}
  /* ~44px de hauteur de touche sur les liens de pied de page. */
  .foot__col{gap:0}
  .foot__col a{padding:11px 0}
  .foot__bar a{padding:14px 0}
  .rost__cta{padding-top:10px;padding-bottom:10px}
  .rank__foot a{padding:8px 0;display:inline-block}
  .ilink{padding-top:10px;padding-bottom:10px}
  .review figcaption a,.communes__legend a{padding:8px 0;display:inline-block}
  .member__cta{padding-top:8px;padding-bottom:10px}
  .crumb a{padding:6px 0}
  /* Reste des cibles portees a ~44px. */
  .nav__logo{padding:6px 0}
  .foot__cols>a{padding:9px 0;display:inline-block}
  .member__toggle{padding:10px 0}
  .member[data-open] .member__mark{margin-bottom:8px}
  .faq__side a,.contact__in a:not(#bigcta){display:inline-block;padding:11px 0}
  .badges>span{padding:14px 22px}
}
@media (max-width:560px){
  .form .row{grid-template-columns:1fr}
  .btn--hero{padding:18px 30px;font-size:.9rem}
  .hero__foot{gap:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ==========================================================================
   Composants ajoutes avec la reprise complete du contenu klixdigital.be
   ========================================================================== */

/* ---------------------------------------------------- Bandes generiques -- */
.band{position:relative;padding:clamp(78px,9vw,132px) 0;overflow:clip}
.band--plain{background:transparent;clip-path:none}
.band--ink{background:var(--navy-deep);color:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 5vw),0 100%);margin-top:-2px}
.band--light{background:var(--paper);color:var(--ink);clip-path:none}
.band--light .eyebrow{color:var(--accent-text)}
.band--light .band__title,.band--light h2,.band--light h3{color:var(--ink)}
.band--light .lead{color:#4B5A70}
.band__title{margin:20px 0 0;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.1;color:#fff}
.band__title--xl{font-size:clamp(2rem,4.4vw,4rem);letter-spacing:-.045em;line-height:1.04;max-width:22ch}
.band__more{margin-top:38px}
.lead{margin:22px 0 0;font-size:clamp(1rem,1.3vw,1.18rem);font-weight:300;line-height:1.72;color:var(--soft);max-width:64ch}

.prose{margin-top:26px;max-width:70ch;display:grid;gap:18px}
.prose p{font-size:1rem;font-weight:300;line-height:1.75;color:#4B5A70}
.prose--ink p{color:#B9C4D6}
.prose--legal{max-width:78ch}
.prose--legal h2{margin:44px 0 0;font-size:clamp(1.2rem,2vw,1.6rem);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.prose--legal h2:first-child{margin-top:0}
.prose--legal p{margin-top:12px}

.pills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 0;padding:0}
.pills li{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:#E2E8F5;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);padding:11px 20px;transform:skewX(-10deg)}
.pills li::before{content:"";display:inline-block;width:12px;height:4px;background:var(--accent);transform:skewX(10deg);margin-right:10px;vertical-align:middle}

.ilink{display:inline-flex;align-items:center;gap:10px;color:var(--accent-text);font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:4px;transition:gap .25s var(--ease),color .25s}
.ilink:hover{gap:16px}
.band--plain .ilink,.band--ink .ilink{color:#fff}
.ilink--ink{color:#0F172A;border-color:#0F172A}

.note{margin-top:40px;font-size:.9rem;font-weight:300;line-height:1.65;color:#5D6878;max-width:72ch}
.band--plain .note,.note--ink{color:var(--muted)}
.notice{margin-top:44px;padding:22px 26px;background:rgba(255,149,0,.1);border-left:3px solid var(--accent);font-size:.9rem;font-weight:300;line-height:1.65;color:#4B5A70;max-width:78ch}
.notice b{font-weight:800;color:var(--ink)}

/* ------------------------------------------------------- Cartes service -- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:52px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 32px 62px;text-decoration:none;background:#F6F8FC;border:1px solid var(--line-light);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .45s var(--ease),background .3s,border-color .3s,box-shadow .4s}
.svc-card:hover{background:#fff;border-color:var(--accent);box-shadow:0 26px 60px -40px rgba(15,23,42,.6)}
.svc-card__k{font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--accent-text);transform:skewX(-10deg);display:inline-block}
.svc-card h2,.svc-card h3{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.svc-card p{font-size:.88rem;font-weight:300;line-height:1.6;color:#5D6878}
.svc-card__go{position:absolute;left:32px;bottom:26px;font-size:1.3rem;color:var(--accent-big);transform:translateX(-6px);opacity:.35;transition:transform .4s var(--ease),opacity .3s}
.svc-card:hover .svc-card__go{transform:none;opacity:1}
.band--plain .svc-card{background:var(--card);border-color:rgba(255,255,255,.08)}
.band--plain .svc-card h2,.svc-card h3{color:#fff}
.band--plain .svc-card p{color:var(--muted)}

/* --------------------------------------------------------------- Piliers -- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:48px}
.pillar{background:#F6F8FC;border:1px solid var(--line-light);padding:30px 32px 34px;clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .45s var(--ease),border-color .3s}
.pillar:hover{border-color:var(--accent)}
.pillar__n{font-size:.72rem;font-weight:800;color:var(--accent-text);letter-spacing:.1em;display:inline-block;transform:skewX(-10deg)}
.pillar h2,.pillar h3{margin-top:14px;font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pillar p{margin-top:10px;font-size:.88rem;font-weight:300;line-height:1.62;color:#5D6878}
.band--plain .pillar,.band--ink .pillar{background:var(--card);border-color:rgba(255,255,255,.08)}
.band--plain .pillar h2,.band--plain .pillar h3,
.band--ink .pillar h2,.band--ink .pillar h3{color:#fff}
.band--plain .pillar p,.band--ink .pillar p{color:var(--muted)}
.band--plain .pillar__n,.band--ink .pillar__n{color:var(--accent)}

/* ------------------------------------------------------------- Checklist -- */
.checklist{margin-top:48px;padding:34px 38px 38px;background:rgba(255,149,0,.06);border-left:3px solid var(--accent);max-width:80ch}
.checklist h3{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.checklist ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.checklist li{position:relative;padding-left:28px;font-size:.94rem;font-weight:300;line-height:1.6;color:#4B5A70}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:5px;background:var(--accent);transform:skewX(-22deg)}
.band--plain .checklist h3,.band--ink .checklist h3{color:var(--accent)}
.band--plain .checklist li,.band--ink .checklist li{color:var(--soft-2)}

/* ------------------------------------------------------------- Benefices -- */
.benefits{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px}
.benefits li{padding:26px 30px 28px;background:rgba(255,255,255,.04);font-size:.94rem;font-weight:300;line-height:1.65;color:var(--soft-2)}
.benefits li b{display:block;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.01em}
.band--light .benefits li{background:#F6F8FC;color:#4B5A70}
.band--light .benefits li b{color:var(--ink)}

/* ------------------------------------------------------------- Pourquoi --- */

/* ------------------------------------------------------------- Duo / cmp -- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:48px}
.duo__item{padding:34px 36px 38px;background:var(--card);border:1px solid rgba(255,255,255,.08);clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%)}
.duo__item h3{font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.duo__item p{margin-top:12px;font-size:.92rem;font-weight:300;line-height:1.65;color:var(--muted)}

.cmp{margin-top:48px;border-top:1px solid rgba(255,255,255,.14)}
.cmp__head,.cmp__row{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.cmp__head span{padding:18px 24px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.cmp__head .cmp__a{color:var(--dim)}
.cmp__head .cmp__b{color:var(--accent)}
.cmp__row span{padding:20px 24px;font-size:.92rem;font-weight:300;line-height:1.55;border-top:1px solid rgba(255,255,255,.1)}
.cmp__a{color:#8494AC;background:rgba(255,255,255,.02)}
.cmp__b{color:#fff;background:rgba(255,149,0,.08);position:relative}
.cmp__b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}

/* ------------------------------------------------------------------ Flow -- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:48px}
.flow__step{position:relative;padding:32px 34px 36px;background:var(--card);border:1px solid rgba(255,255,255,.08)}
.flow__n{font-size:2.6rem;font-weight:900;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,149,0,.5);display:block;line-height:1}
.flow__step h3{margin-top:14px;font-size:1.08rem;font-weight:800;color:#fff}
.flow__step p{margin-top:12px;font-size:.9rem;font-weight:300;line-height:1.62;color:var(--muted)}

/* ---------------------------------------------------------------- Tarifs -- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:52px;align-items:start}
.plan{position:relative;padding:38px 34px 40px;background:var(--card);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:6px;transition:transform .45s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-6px);border-color:rgba(255,149,0,.5)}
.plan--featured{background:linear-gradient(160deg,#16243C,#0B1222);border-color:var(--accent);box-shadow:0 30px 70px -40px rgba(255,149,0,.5)}
.plan__tag{position:absolute;top:-13px;left:34px;background:var(--accent);color:#0F172A;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;transform:skewX(-12deg)}
.plan h3{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:#fff}
.plan__for{font-size:.84rem;font-weight:300;color:var(--muted);min-height:2.6em}
.plan__price{margin-top:18px;font-size:.9rem;color:var(--muted)}
.plan__price span{font-size:2.4rem;font-weight:900;letter-spacing:-.04em;color:var(--accent);display:inline-block;margin-right:6px}
.plan__setup{font-size:.8rem;font-weight:300;color:var(--dim)}
.plan ul{list-style:none;margin:24px 0 28px;padding:0;display:grid;gap:11px;flex:1}
.plan li{position:relative;padding-left:24px;font-size:.88rem;font-weight:300;line-height:1.5;color:var(--soft-2)}
.plan li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:4px;background:var(--accent);transform:skewX(-22deg)}
.plan .btn{align-self:start}

.terms{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0;padding:0}
.terms li{font-size:.76rem;font-weight:600;color:var(--soft-2);border:1px solid rgba(255,255,255,.16);padding:9px 16px}

.setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:48px}
.setup__step{padding:30px 32px 34px;background:#F6F8FC;border:1px solid var(--line-light)}
.setup__day{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.setup__step h3{margin-top:12px;font-size:1.08rem;font-weight:800;color:var(--ink)}
.setup__step p{margin-top:10px;font-size:.88rem;font-weight:300;line-height:1.6;color:#5D6878}

/* ------------------------------------------------------------- Resultats -- */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:52px}
.res{padding:34px 32px 38px;background:#F6F8FC;border:1px solid var(--line-light);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.res h3{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.res__big{margin-top:20px;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.res__big--sm{margin-top:22px;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.res__lbl{margin-top:4px;font-size:.84rem;font-weight:300;color:#5D6878}
.res__d{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-light);font-size:.86rem;font-weight:300;line-height:1.6;color:#5D6878}

/* ------------------------------------------------------------------ Avis -- */
.reviews__rail{margin-top:52px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.reviews__track{display:flex;width:max-content;gap:16px;animation:marquee 60s linear infinite}
.reviews__rail:hover .reviews__track{animation-play-state:paused}
.review{width:min(420px,80vw);flex:none;margin:0;padding:30px 32px 32px;background:#fff;border:1px solid var(--line-light);clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.review__stars{color:var(--accent);letter-spacing:.14em;font-size:.9rem}
.review blockquote{margin:16px 0 0;font-size:.94rem;font-weight:300;line-height:1.65;color:#4B5A70}
.review figcaption{margin-top:18px;font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--ink)}

/* --------------------------------------------------------- Certifications -- */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:48px}
.cert{padding:30px 32px 34px;background:var(--card);border:1px solid rgba(255,255,255,.08);transition:transform .45s var(--ease),border-color .3s}
.cert:hover{border-color:rgba(255,149,0,.5)}
.cert__k{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cert h3{margin-top:12px;font-size:1.1rem;font-weight:800;color:#fff}
.cert p{margin-top:10px;font-size:.86rem;font-weight:300;line-height:1.6;color:var(--muted)}
.band--light .cert{background:#F6F8FC;border-color:var(--line-light)}
.band--light .cert h3{color:var(--ink)}
.band--light .cert p{color:#5D6878}
.band--light .cert__k{color:var(--accent-text)}

/* ------------------------------------------------------------------ Blog -- */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:20px}
.post{padding:32px 34px 36px;background:#F6F8FC;border:1px solid var(--line-light);clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);transition:transform .45s var(--ease),border-color .3s,background .3s}
.post:hover{background:#fff;border-color:var(--accent)}
.post__cat{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.post h2{margin-top:14px;font-size:1.2rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.post p{margin-top:12px;font-size:.9rem;font-weight:300;line-height:1.6;color:#5D6878}
.post__meta{margin-top:20px;font-size:.76rem;font-weight:600;color:#5F6C7E}

/* ------------------------------------------------ Logos & bande confiance -- */
.trustband{padding-block:clamp(46px,5vw,72px)}
.logos__mask{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}

/* ------------------------------------------------------------- FAQ grille -- */
.faq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(36px,5vw,72px);align-items:start}

/* -------------------------------------------------------------- Heros v3 -- */
/* Le titre porte desormais la page ; le bloc anime passe au second plan,
   a un peu moins de la moitie de sa taille precedente. */
.hero__h1{
  margin:0;max-width:19ch;
  font-size:clamp(1.8rem,3.7vw,3.2rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.08;color:var(--ink);
  animation:riseBlur 1.1s var(--ease) .1s both;
}
.hero__display{
  margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.28em;
  font-size:clamp(1.5rem,4vw,3.6rem);font-weight:900;letter-spacing:-.05em;
  line-height:1.06;text-transform:uppercase;color:var(--ink);
  animation:riseBlur 1.1s var(--ease) .3s both;
}
.hero__badge{margin:34px 0 0;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;color:var(--accent-text);border:1px solid rgba(255,149,0,.4);background:rgba(255,149,0,.08);padding:10px 18px;transform:skewX(-10deg);animation:rise .9s var(--ease) 1s both}
.hero__badge span{display:inline-block;transform:skewX(10deg)}
/* Le chapo passe sous le titre, pleine largeur : dans l'ancienne
   disposition en deux colonnes il creusait un vide sous le titre. */
.hero__lead{margin:30px 0 0;max-width:62ch;font-size:clamp(1rem,1.2vw,1.14rem);font-weight:300;line-height:1.72;color:#4B5A70}
.hero__cta{margin-top:38px}
.mand__head{padding-block:clamp(70px,8vw,110px) 0}
.mand__in h3{margin:26px 0 0;font-size:clamp(3rem,8vw,7.4rem);font-weight:900;letter-spacing:-.05em;line-height:.95;text-transform:uppercase}

/* --------------------------------------------------------- Formulaires v3 -- */
.form label{display:grid;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--soft-2)}
.form select{width:100%;font:inherit;font-size:.95rem;font-weight:300;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);padding:16px 18px}
.form select option{color:#0F172A}
.consent{display:flex!important;align-items:flex-start;gap:12px;font-size:.8rem;font-weight:300;line-height:1.5;color:var(--muted)}
.consent input{width:auto;flex:none;margin-top:3px}
.consent a{color:#fff}
.clist .dd--sm{font-size:.95rem;font-weight:300;line-height:1.55}
.foot__rating{font-size:.82rem;font-weight:300;line-height:1.6;color:var(--muted)}
.foot__rating span{color:var(--accent);letter-spacing:.1em}
.foot__brand{max-width:34ch;display:grid;gap:16px}
.foot__brand p{margin:0;font-size:.88rem;font-weight:300;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   Animations premium
   ========================================================================== */

/* Titres : chaque ligne monte derriere un masque, pilote par le scroll natif.
   Aucun JS d'animation : la ou animation-timeline n'existe pas, le titre
   s'affiche simplement, sans etape intermediaire invisible. */
[data-split]{display:block}
[data-split] .ln{display:block;overflow:hidden}
[data-split] .ln>span{display:block;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-split] .ln>span{
      animation:lineUp .9s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 6% cover 24%;
    }
  }
}
@keyframes lineUp{from{transform:translateY(105%) rotate(2deg)}to{transform:none}}

/* Cartes : inclinaison 3D suivant le curseur, pilotee par deux variables. */
@media (hover:hover) and (pointer:fine){
  [data-tilt]{transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .5s var(--ease)}
  [data-tilt].is-tilting{transition:transform .12s linear}
}

[data-magnetic]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .reviews__track,.strip__track,.logos__track{animation:none}
  [data-tilt]{transform:none!important}
}

/* ------------------------------------------------------------- Mobile v3 -- */
@media (max-width:900px){
  .band--ink{clip-path:none}
  .benefits{grid-template-columns:1fr}
  .cmp__head,.cmp__row{grid-template-columns:1fr}
  .cmp__head .cmp__a,.cmp__head .cmp__b{padding-bottom:6px}
  .cmp__row .cmp__a{border-top:1px solid rgba(255,255,255,.1)}
  .cmp__row .cmp__b{border-top:0}
  .plan__for{min-height:0}
  .review{width:min(320px,84vw)}
  .hero__badge{transform:none}
  .hero__badge span{transform:none}
  .checklist{padding:26px 24px 28px}
  .roi__row{flex-direction:column;gap:4px}
  .band__title--xl{max-width:none}
}

/* ==========================================================================
   Passe « territoire » : la promesse de KLIX est geographique (une seule
   agence par commune). Le vocabulaire visuel devient celui d'un tableau de
   bord de terrain : une mono pour les libelles et les mesures, une grille
   de communes comme element signature, et plus aucun bandeau defilant.
   ========================================================================== */

@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexmono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/plexmono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Tout ce qui releve de l'etiquette, de la source ou de la mesure passe en
   mono : c'est le registre d'une agence qui dit mesurer ce qui compte. */
.eyebrow,h1.eyebrow,h2.eyebrow,h3.eyebrow,.crumb,.stat__s,.res h3,.svc-card__k,
.pillar__n,.cert__k,.setup__day,.post__meta,.post__cat,.mega__num,.terms li,
.plan__setup,.plan__tag,.trust__label,.checklist h3,.flow__n,.proof__k,.cm,
.communes__legend b,.review figcaption{font-family:var(--mono);font-weight:500}
.eyebrow,h1.eyebrow,h2.eyebrow,h3.eyebrow{letter-spacing:.16em}
.crumb{letter-spacing:.16em}
.flow__n{font-family:var(--mono);font-weight:500;-webkit-text-stroke:0;color:rgba(255,149,0,.55);font-size:1.6rem}

/* ---------------------------------------------------------- Barre de preuve
   Remplace le bandeau defilant : trois faits verifiables, aucune animation. */
.proofbar{border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);background:#fff}
.proofbar__in{display:flex;flex-wrap:wrap;gap:0}
.proof{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;padding:26px 30px;border-left:1px solid var(--line-light)}
.proof:first-child{border-left:0;padding-left:0}
.proof__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.proof__v{font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.proof__v span{color:var(--accent-big);letter-spacing:.08em}

/* ------------------------------------------------------------ Mur de logos
   L'ancien ruban defilant en niveaux de gris sur fond sombre rendait les
   logos illisibles. Ici : fond blanc, cellules a filet, logos a leur couleur. */
/* Huit colonnes exactement : une grille en auto-fit laissait une cellule
   vide en bout de rangee et cassait le filet du mur. */
.logowall{margin-top:34px;display:grid;grid-template-columns:repeat(8,1fr);
  border:1px solid var(--line-light);border-right:0;border-bottom:0;background:#fff}
.logowall__cell{display:flex;align-items:center;justify-content:center;padding:30px 16px;
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  transition:background .3s}
.logowall__cell:hover{background:#F6F8FC}
/* Contrainte sur les deux axes : avec une hauteur fixe seule, les logos
   larges etaient comprimes horizontalement dans les cellules etroites. */
.logowall img{max-height:50px;max-width:100%;height:auto;width:auto;filter:grayscale(.35) contrast(1.05);opacity:.85;
  transition:filter .35s,opacity .35s,transform .45s var(--ease)}
.logowall__cell:hover img{filter:none;opacity:1;transform:scale(1.04)}
.trust__label{margin:0;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#6B7789;text-align:left}

/* ============================================================== SIGNATURE ==
   Le territoire. Les 19 communes bruxelloises, frontieres reelles, tracees
   au defilement comme un plan de geometre. Une seule est verrouillee.
   ========================================================================== */
.spec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(40px,5vw,88px);align-items:start}
.spec__legend{margin-top:32px;font-size:.92rem;font-weight:300;line-height:1.65;color:var(--muted);max-width:52ch}

.terr{margin:0;position:relative}
.terr__frame{position:relative;view-timeline-name:--terrline;view-timeline-axis:block}
.terr__map{display:block;width:100%;height:auto;overflow:visible}
.terr__map path{
  fill:#16233A;stroke:rgba(255,149,0,.55);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;fill-opacity:1;
  transition:fill .35s ease,stroke .35s ease,filter .35s ease;
  cursor:pointer;
}
.terr__map path:hover{fill:var(--accent);stroke:#fff;filter:drop-shadow(0 10px 26px rgba(255,149,0,.5))}
.terr__map path.is-taken{fill:var(--accent);stroke:#FFD9A0;filter:drop-shadow(0 14px 34px rgba(255,149,0,.55))}

/* Le trace se dessine commune par commune, puis les surfaces se remplissent.
   Piloté par le defilement, sans JavaScript. Sans animation-timeline, la
   carte s'affiche simplement dans son etat final. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .terr__map path{
      animation:terrDraw linear both;
      animation-timeline:--terrline;
      animation-range:cover calc(8% + var(--i,0) * 1.5%) cover calc(30% + var(--i,0) * 1.5%);
    }
  }
}
@keyframes terrDraw{
  0%{stroke-dashoffset:1;fill-opacity:0}
  70%{stroke-dashoffset:0;fill-opacity:0}
  100%{stroke-dashoffset:0;fill-opacity:1}
}

/* Le reperage de l'agence : un point qui bat lentement sur Woluwe-Saint-Pierre. */
.terr__pin{position:absolute;left:82.5%;top:53.4%;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,149,0,.9);pointer-events:none}
.terr__pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,149,0,.7);animation:pinPulse 3.2s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}

.terr__cap{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.terr__cap b{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.terr__cap span{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------- Ajustements de la passe */
.strip{display:none}                      /* bandeau defilant retire */
.hero{padding-bottom:clamp(48px,6vw,80px)}
.trustband{padding-block:clamp(40px,4.5vw,64px)}

@media (max-width:560px){.logowall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .communes__grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:6px}
  .cm{min-height:46px;font-size:.56rem;transform:skewX(-10deg)}
  .cm>span{transform:skewX(10deg)}
  .proof{flex:1 1 100%;border-left:0;border-top:1px solid var(--line-light);padding:20px 0}
  .proof:first-child{border-top:0}
  .logowall{grid-template-columns:repeat(4,1fr)}
  .logowall img{max-height:38px}
}

/* ==========================================================================
   Motif « ligne de toits »
   Chaque passage d'une bande sombre a une bande claire se fait sur une
   silhouette de pignons. Ce n'est pas un ornement : c'est le meme role que
   la coupe en biais precedente, mais dans le vocabulaire du client.
   Un seul masque SVG, la couleur vient de --roof.
   ========================================================================== */
/* La frise de pignons a ete retiree : a cette echelle elle lisait comme un
   zigzag decoratif, pas comme une silhouette de toits. Le motif ne survit que
   la ou il veut dire quelque chose : le pictogramme des cartes de service et
   le filigrane de skyline en pied de page. */

.svc-card:hover::after{opacity:.9;transform:none}

/* Filigrane de toits en pied de page : la page se ferme sur une skyline. */
#contact-cta::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  opacity:.5;
  background:linear-gradient(to top,rgba(255,149,0,.09),transparent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 120V70l34-22 34 22v50z'/%3E%3Cpath d='M68 120V84l26-16 26 16v36z'/%3E%3Cpath d='M120 120V60l40-26 40 26v60z'/%3E%3Cpath d='M200 120V90l22-14 22 14v30z'/%3E%3Cpath d='M244 120V74l30-19 30 19v46z'/%3E%3Cpath d='M304 120V96l18-12 18 12v24z'/%3E%3Cpath d='M340 120V66l40-25 40 25v54z'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left/420px 120px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='120'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 120V70l34-22 34 22v50z'/%3E%3Cpath d='M68 120V84l26-16 26 16v36z'/%3E%3Cpath d='M120 120V60l40-26 40 26v60z'/%3E%3Cpath d='M200 120V90l22-14 22 14v30z'/%3E%3Cpath d='M244 120V74l30-19 30 19v46z'/%3E%3Cpath d='M304 120V96l18-12 18 12v24z'/%3E%3Cpath d='M340 120V66l40-25 40 25v54z'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left/420px 120px;
}

@media (max-width:900px){
  #contact-cta::after{height:80px}
}
@media (prefers-reduced-motion:reduce){
  .svc-card::after{transition:none}
}

/* ==========================================================================
   Passe « masterpiece »
   1. L'equipe passe en lames decalees : plus de recadrage sur les visages,
      plus de bloc rectangulaire.
   2. La section « probleme » montre un classement local qui se reordonne au
      defilement, plutot qu'un pave de texte sur fond bleu.
   3. Les bandes sombres reagissent au curseur : le fond cesse d'etre inerte.
   ========================================================================== */

/* --------------------------------------------------------- 1. Les lames -- */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,34px);
  margin-top:56px;align-items:start}
.rost{position:relative;display:flex;flex-direction:column}
/* Ligne de base diagonale : chaque lame descend un peu plus que la precedente. */
.rost:nth-child(2){margin-top:clamp(24px,4vw,64px)}
.rost:nth-child(3){margin-top:clamp(48px,8vw,128px)}
.rost__ph{
  position:relative;aspect-ratio:3/4;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,#17273F 0%,#0B1222 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.rost__ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%;
  filter:saturate(.35) brightness(.92);transition:filter .6s ease,transform .8s var(--ease)}
.rost__slash{position:absolute;right:-6%;top:-10%;width:38%;height:120%;z-index:-1;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  transform:skewX(-22deg) translateY(16%);opacity:.9;
  transition:transform .8s var(--ease),opacity .5s ease}
.rost:hover .rost__ph{transform:translateY(-10px);box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
.rost:hover .rost__ph img{filter:none;transform:scale(1.03)}
.rost:hover .rost__slash{transform:skewX(-22deg) translateY(0);opacity:1}
.rost__body{padding:26px 4px 0}
.rost__role{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.rost h3{margin-top:10px;font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:900;
  letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:#fff}
.rost__say{margin-top:14px;font-size:.94rem;font-weight:300;line-height:1.62;color:var(--soft-2);max-width:38ch}
.rost__bio2{margin-top:12px;font-size:.88rem;font-weight:300;line-height:1.6;color:var(--muted);max-width:38ch}
.rost__tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0}
.rost__tags li{font-size:.68rem;font-weight:500;letter-spacing:.03em;color:var(--soft-3);
  padding:6px 13px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);transform:skewX(-10deg)}
.rost__tags li span{display:inline-block;transform:skewX(10deg)}
.rost__cta{display:inline-block;margin-top:20px;font-size:.82rem;font-weight:700;color:#fff;
  text-decoration:none;padding-bottom:5px;border-bottom:2px solid var(--accent);
  transition:color .25s ease,letter-spacing .3s var(--ease)}
.rost__cta:hover{color:var(--accent);letter-spacing:.02em}
.band--light .rost h3{color:var(--ink)}
.band--light .rost__say{color:#4B5A70}

/* ------------------------------------------------- 2. Classement local --- */
.rank{--rh:66px;margin-top:52px;max-width:720px;position:relative;
  view-timeline-name:--rankline;view-timeline-axis:block;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);padding:22px}
.rank__bar{display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1)}
.rank__bar::before{content:"";width:14px;height:14px;border:2px solid var(--muted);border-radius:50%;flex:none}
.rank__q{font-family:var(--mono);font-weight:500;font-size:.84rem;color:var(--soft-2)}
.rank__lbl{margin:20px 0 10px;font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
/* Les positions restent fixes dans une colonne a part : ce sont les agences
   qui bougent, pas le classement. */
.rank__wrap{display:grid;grid-template-columns:38px 1fr;gap:10px}
.rank__scale{display:grid;grid-template-rows:repeat(4,var(--rh))}
.rank__scale span{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--dim)}
.rank__scale span:first-child{color:var(--accent)}
.rank__list{list-style:none;margin:0;padding:0;position:relative;height:calc(var(--rh) * 4)}
.rank__row{position:absolute;left:0;right:0;top:0;height:var(--rh);
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07);
  transform:translateY(calc(var(--r) * var(--rh)));
  background:#131F33;color:var(--soft-2)}
.rank__name{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.rank__note{font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--soft-2)}
.rank__note i{color:var(--accent);font-style:normal}
.rank__rev{font-family:var(--mono);font-weight:500;font-size:.72rem;color:var(--dim)}
.rank__row--you{background:#2A2318;border-left:3px solid var(--accent);color:#fff;z-index:2}
.rank__row--you .rank__name{color:var(--accent)}
.rank__foot{margin-top:18px;font-size:.78rem;font-weight:300;line-height:1.5;color:var(--dim)}
/* Les positions se reordonnent au fil du defilement. Sans animation-timeline,
   les lignes restent dans leur ordre initial : le message tient quand meme. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rank__row:not(.rank__row--you){animation:rankDown linear both;animation-timeline:--rankline;
      animation-range:cover 38% cover 62%}
    .rank__row--you{animation:rankUp linear both;animation-timeline:--rankline;
      animation-range:cover 38% cover 62%}
  }
}
@keyframes rankDown{to{transform:translateY(calc((var(--r) + 1) * var(--rh)))}}
@keyframes rankUp{
  from{transform:translateY(calc(var(--r) * var(--rh)))}
  to{transform:translateY(0);box-shadow:0 20px 50px -30px rgba(255,149,0,.9)}
}

/* ---------------------------------------------- 3. Interactions de fond --
   Le halo qui suivait le curseur a ete retire : c'est l'effet le plus vu du
   moment et il ne racontait rien du metier. Ce sont les elements eux-memes
   qui reagissent maintenant. */
/* Les rectangles reagissent au passage de la souris. */
.cm{transition:color .3s ease,background .3s ease,border-color .3s ease,transform .4s var(--ease)}
.cm:not(.cm--taken):hover{color:#0F172A;background:rgba(255,149,0,.9);border-color:var(--accent)}
.band--light .benefits li:hover{background:#FFF3E2}
.duo__item,.flow__step,.cert{transition:transform .45s var(--ease),border-color .3s ease,background .35s ease}
.duo__item:hover,.flow__step:hover{transform:translateY(-6px);border-color:rgba(255,149,0,.5)}
.cmp__row{transition:background .3s ease}
.cmp__row:hover .cmp__b{background:rgba(255,149,0,.16)}

@media (max-width:900px){
  .roster{grid-template-columns:1fr;gap:44px}
  .rost:nth-child(2),.rost:nth-child(3){margin-top:0}
  .rost__ph{aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
  .rost__say,.rost__bio2{max-width:none}
  .rank{--rh:76px;padding:16px}
  .rank__wrap{grid-template-columns:26px 1fr;gap:6px}
  .rank__row{grid-template-columns:1fr auto;gap:10px;padding:0 12px}
  .rank__rev{display:none}
  [data-spot]::before{display:none}
}

/* ------------------------------------------------- Territoire, mobile ---- */
@media (max-width:980px){
  .spec{grid-template-columns:1fr;gap:44px}
  .terr__frame{max-width:520px;margin-inline:auto}
  .terr__cap{justify-content:center}
  .spec__legend{max-width:none}
}

/* ==========================================================================
   Passe « de-boxing »
   Trois grilles de cartes identiques donnaient un rendu de gabarit. Elles
   deviennent des listes a filets : la hierarchie fait le travail que faisaient
   les boites. Et le fond reagit a la vitesse de defilement.
   ========================================================================== */

/* ------------------------------------------ Services : liste + panneau --- */
#services .svc__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,4.5vw,80px);margin-top:56px;align-items:start}
#services .svc__row{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:18px;width:100%;
  padding:22px 8px 22px 0;border:0;border-bottom:1px solid rgba(15,23,42,.12);
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:padding .45s var(--ease),background .35s ease;
}
#services .svc__row:first-child{border-top:1px solid rgba(15,23,42,.12)}
#services .svc__row .num{font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.08em;
  color:#6B7789;transition:color .3s ease}
#services .svc__row .name{font-size:clamp(1.05rem,1.7vw,1.6rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.15;color:var(--ink);transition:color .3s ease,transform .45s var(--ease)}
#services .svc__row .arw{font-size:1.15rem;color:var(--accent-big);opacity:0;transform:translateX(-10px);
  transition:opacity .3s ease,transform .45s var(--ease)}
#services .svc__row:hover .name{transform:translateX(6px)}
#services .svc__row[data-on]{padding-left:18px;background:linear-gradient(90deg,rgba(255,149,0,.09),transparent 70%)}
#services .svc__row[data-on] .num,#services .svc__row[data-on] .name{color:var(--accent-big)}
#services .svc__row[data-on] .arw{opacity:1;transform:none}
#services .svc__panelwrap{position:sticky;top:104px}
#services .svc__panel{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,#17273F 0%,#0B1222 100%);
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(38px 0,100% 0,calc(100% - 38px) 100%,0 100%);
  padding:clamp(32px,3.2vw,52px) clamp(38px,3.6vw,58px) clamp(34px,3.4vw,54px);
}
#services .svc__panel .bignum{position:absolute;right:26px;top:-16px;font-size:clamp(6rem,9vw,9.5rem);
  font-weight:900;letter-spacing:-.05em;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,149,0,.38);transform:skewX(-10deg);pointer-events:none}
#services .svc__panel .beam{position:absolute;left:14px;top:-20%;width:14px;height:140%;
  background:rgba(255,149,0,.12);transform:skewX(-22deg)}
#services .svc__panel .kicker{margin:0;font-family:var(--mono);font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
#services .svc__panel h3{margin:18px 0 0;font-size:clamp(1.4rem,2.1vw,2.15rem);font-weight:900;
  letter-spacing:-.03em;line-height:1.06;max-width:16ch;color:#fff}
#services .svc__panel .desc{margin:18px 0 0;font-size:.95rem;font-weight:300;line-height:1.7;
  color:var(--muted-2);max-width:44ch}
#services .svc__panel .go{margin:28px 0 0}

/* --------------------------------------------- Pourquoi : liste a filets - */
.reasons{list-style:none;margin:56px 0 0;padding:0;counter-reset:none}
.reason{display:grid;grid-template-columns:96px 1fr;gap:clamp(18px,3vw,48px);
  padding:30px 0;border-top:1px solid rgba(255,255,255,.1);transition:background .35s ease}
.reason:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.reason:hover{background:linear-gradient(90deg,rgba(255,149,0,.07),transparent 60%)}
.reason__n{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.1em;color:var(--accent);
  transition:transform .45s var(--ease)}
.reason:hover .reason__n{transform:translateX(6px)}
.reason h3{font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.025em;color:#fff}
.reason p{margin-top:12px;font-size:.95rem;font-weight:300;line-height:1.68;color:var(--muted);max-width:66ch}
.band--light .reason h3{color:var(--ink)}
.band--light .reason p{color:#5D6878}

/* -------------------------------------------- Certifications a filets ---- */
.certs{list-style:none;margin:48px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0}
.cert{padding:28px 28px 30px;background:none;border:0;border-left:1px solid rgba(255,255,255,.1);
  transition:background .35s ease}
.cert:first-child{border-left:0;padding-left:0}
.cert:hover{background:rgba(255,149,0,.06)}
.band--light .cert{border-left-color:var(--line-light)}
.band--light .cert:hover{background:#FFF6EA}

/* ------------------------------------------------- Chiffres : jauge ------ */
.stat__bar{display:block;height:2px;margin-top:18px;background:rgba(15,23,42,.12);overflow:hidden}
.stat__bar i{display:block;height:100%;width:var(--w,50%);background:var(--accent);
  transform-origin:left center;transform:scaleX(0)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .stat__bar i{animation:barFill linear both;animation-timeline:view();animation-range:entry 20% cover 34%}
  }
}
@keyframes barFill{to{transform:scaleX(1)}}

/* ---------------------------------------- Le fond suit le defilement ----- */
/* Les faisceaux se penchent legerement selon la vitesse de scroll : le fond
   respire au lieu de rester fige, sans nappe lumineuse ni curseur. */
#kbg i{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
#kbg .b1,#kbg .b3,#kbg .b5{transform:skewX(calc(-22deg + var(--vel,0deg) * .35))}
#kbg .b2,#kbg .b4,#kbg .b6{transform:skewX(calc(-22deg - var(--vel,0deg) * .5))}
#kbg .orb--a{transform:rotate(calc(var(--sy,0) * .02deg))}

@media (max-width:980px){
  #services .svc__grid{grid-template-columns:1fr;gap:38px}
  #services .svc__panelwrap{position:static}
  #services .svc__panel h3{max-width:none}
}
@media (max-width:900px){
  .reason{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .reason p{max-width:none}
  .certs{grid-template-columns:1fr}
  .cert{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:24px 0}
  .cert:first-child{border-top:0}
  .band--light .cert{border-top-color:var(--line-light)}
  #kbg i{transform:skewX(-22deg)!important}
}

/* Cibles tactiles : declarees en dernier pour ne pas etre ecrasees par les
   blocs de composants ajoutes plus bas dans la feuille. */
@media (max-width:900px){
  .roster .rost__cta{padding-top:11px;padding-bottom:11px}
  .foot__brand>a{display:inline-block;padding-block:9px}
  .terr__cap b,.terr__cap span{padding-block:4px}
  .prose a,.lead a,.rank__foot a,.spec__legend a{display:inline-block;padding-block:8px}
}

/* ==========================================================================
   Suite du de-boxing : benefices, resultats et avis quittent les cartes.
   ========================================================================== */

/* ------------------------------------------------ Benefices a filets ----- */
.benefits{display:block;margin-top:52px}
.benefits li{
  display:grid;grid-template-columns:74px 1fr;gap:clamp(14px,2.4vw,38px);
  padding:26px 0;background:none;border-top:1px solid rgba(255,255,255,.1);
  transition:background .35s ease;
}
.benefits li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.benefits li:hover{background:linear-gradient(90deg,rgba(255,149,0,.07),transparent 60%)}
.benefits__n{font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.1em;
  color:var(--accent);transition:transform .45s var(--ease)}
.benefits li:hover .benefits__n{transform:translateX(6px)}
.benefits li b{display:block;font-size:clamp(1rem,1.5vw,1.24rem);font-weight:800;letter-spacing:-.02em;
  color:#fff;margin-bottom:8px}
.benefits li>div>span{display:block;font-size:.95rem;font-weight:300;line-height:1.66;
  color:var(--muted);max-width:66ch}
.band--light .benefits li{border-top-color:var(--line-light);background:none}
.band--light .benefits li:last-child{border-bottom-color:var(--line-light)}
.band--light .benefits li:hover{background:linear-gradient(90deg,#FFF6EA,transparent 60%)}
.band--light .benefits li b{color:var(--ink)}
.band--light .benefits li>div>span{color:#5D6878}

/* ------------------------------------------------- Resultats a filets ---- */
.results{list-style:none;display:block;margin:52px 0 0;padding:0}
.res{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,44px);align-items:start;padding:30px 0;background:none;border:0;
  border-top:1px solid var(--line-light);clip-path:none;transition:background .35s ease}
.res:last-child{border-bottom:1px solid var(--line-light)}
.res:hover{background:linear-gradient(90deg,#FFF6EA,transparent 65%)}
.res h3{margin:0;font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text)}
.res__nums{display:grid;gap:14px}
.res__nums p{margin:0;display:flex;flex-direction:column;gap:2px}
.res__big{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:900;letter-spacing:-.04em;
  line-height:1.05;color:var(--ink)}
.res__big--sm{font-size:clamp(1.1rem,1.8vw,1.5rem)}
.res__lbl{font-size:.82rem;font-weight:300;color:#5D6878}
.res__d{margin:0;padding:0;border:0;font-size:.9rem;font-weight:300;line-height:1.62;color:#5D6878}

/* --------------------------------------------------------- Avis cites ---- */
.review{width:min(460px,84vw);flex:none;margin:0;padding:34px 34px 30px;position:relative;
  background:none;border:0;border-left:2px solid rgba(255,149,0,.5);clip-path:none}
.review__mark{position:absolute;left:20px;top:8px;font-size:3.4rem;line-height:1;
  color:rgba(255,149,0,.32);font-family:var(--display);pointer-events:none}
.review blockquote{margin:0;font-size:1.02rem;font-weight:300;line-height:1.66;color:#3F4E63;
  quotes:"« " " »"}
.review blockquote::before{content:open-quote}
.review blockquote::after{content:close-quote}
.review figcaption{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7789}
.review figcaption b{color:var(--ink);letter-spacing:.08em}
.review figcaption span{color:var(--accent);letter-spacing:.1em}

/* ------------------------------------------------- Page courante --------- */
.nav__links>a[aria-current="page"],.megabtn[aria-current="page"]{color:var(--accent-text)}
#klixnav[data-stuck] .nav__links>a[aria-current="page"],
.subnav .nav__links>a[aria-current="page"],
#klixnav[data-stuck] .megabtn[aria-current="page"],
.subnav .megabtn[aria-current="page"]{color:var(--accent)}
.nav__links>a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:5px;
  background:var(--accent);transform:skewX(-22deg)}

@media (max-width:900px){
  .benefits li{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .benefits li>div>span{max-width:none}
  .res{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .res__nums{grid-template-columns:1fr 1fr;display:grid}
  .review{width:min(300px,86vw);padding:26px 22px 24px}
  .nav__links>a[aria-current="page"]::after{display:none}
}

/* Sur la bande orange, .prose--ink imposait la couleur prevue pour un fond
   sombre (1,2:1). La bande gagne, quelle que soit la variante de prose. */

/* ==========================================================================
   L'orange redevient un accent
   L'aplat pleine largeur ecrasait la page : le texte y perdait en lisibilite
   et la couleur, employee sur toute la largeur, cessait de signaler quoi que
   ce soit. Le meme contenu tient dans un encart tenu par un filet orange.
   ========================================================================== */
.bridge{position:relative;display:grid;grid-template-columns:3px 1fr;
  gap:clamp(20px,3vw,44px);max-width:82ch;
  padding:clamp(26px,3.2vw,42px) clamp(24px,3vw,44px) clamp(28px,3.4vw,44px) 0;
  background:linear-gradient(100deg,rgba(255,149,0,.10),transparent 64%)}
.bridge__rule{background:linear-gradient(180deg,var(--accent),rgba(255,149,0,.12));
  transform-origin:top;transform:scaleY(0)}
.bridge h3{margin:16px 0 0;font-size:clamp(1.45rem,2.6vw,2.3rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.08;color:#fff;max-width:22ch}
.bridge p{margin-top:16px;font-size:1rem;font-weight:300;line-height:1.72;
  color:var(--muted);max-width:64ch}
.bridge .prose{margin-top:16px}
.bridge__go{margin-top:26px}
.band--light .bridge{background:linear-gradient(100deg,rgba(255,149,0,.14),transparent 64%)}
.band--light .bridge h3{color:var(--ink)}
.band--light .bridge p{color:#4B5A70}

/* Le filet se trace quand l'encart entre dans le champ. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bridge__rule{animation:ruleDraw linear both;animation-timeline:view();
      animation-range:entry 15% cover 32%}
  }
}
@supports not (animation-timeline:view()){.bridge__rule{transform:none}}
@media (prefers-reduced-motion:reduce){.bridge__rule{transform:none}}
@keyframes ruleDraw{to{transform:scaleY(1)}}

/* ------------------------------------------------- Le blog en sommaire ---
   Quatre cartes alignees ne disaient rien de plus qu'une liste, et cachaient
   le fait que rien n'est encore publie. Un sommaire numerote l'annonce. */
.posts__count{margin-top:40px;font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:#5F6C7E}
.posts__count b{color:var(--accent-text);font-weight:500}
.posts{list-style:none;display:block;margin:20px 0 0;padding:0}
.post{display:grid;grid-template-columns:96px 1fr 56px;gap:clamp(14px,2.6vw,40px);
  align-items:start;padding:34px 0;background:none;border:0;
  border-top:1px solid var(--line-light);clip-path:none;transition:background .35s ease}
.post:last-of-type{border-bottom:1px solid var(--line-light)}
.post:hover{background:linear-gradient(90deg,#FFF4E6,transparent 72%)}
.post__n{font-family:var(--mono);font-weight:500;font-size:1.7rem;line-height:1;
  letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(15,23,42,.3);
  transition:-webkit-text-stroke-color .35s ease,transform .55s var(--ease)}
.post:hover .post__n{-webkit-text-stroke-color:var(--accent);transform:translateX(6px)}
.post__cat{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text)}
.post h2{margin-top:12px;font-size:clamp(1.2rem,2.2vw,1.9rem);font-weight:800;
  letter-spacing:-.032em;line-height:1.16;color:var(--ink);max-width:30ch;
  transition:transform .55s var(--ease)}
.post:hover h2{transform:translateX(6px)}
.post p{margin-top:12px;font-size:.95rem;font-weight:300;line-height:1.66;
  color:#4B5A70;max-width:64ch}
.post__meta{margin-top:16px;font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:#5F6C7E}
.post__soon{color:var(--accent-text)}
.post__go{justify-self:end;align-self:center;font-size:1.5rem;line-height:1;
  color:var(--accent-big);opacity:.22;transform:translateX(-10px);
  transition:opacity .3s ease,transform .55s var(--ease)}
.post:hover .post__go{opacity:1;transform:none}

/* -------------------------------------- Les rangs a filets, en fond clair - */
.band--light .reason{border-top-color:var(--line-light)}
.band--light .reason:last-child{border-bottom-color:var(--line-light)}
.band--light .reason:hover{background:linear-gradient(90deg,#FFF4E6,transparent 62%)}
.band--light .reason h3{color:var(--ink)}
.band--light .reason p{color:#4B5A70}
.band--light .reason__n{color:var(--accent-text)}

/* -------------------------------------------- Le formulaire en fond clair - */
.band--light .form label{color:#5B6879}
.band--light .form input,.band--light .form textarea,.band--light .form select{
  color:var(--ink);background:#F4F7FB;border-color:var(--line-light)}
.band--light .form input::placeholder,.band--light .form textarea::placeholder{color:#8B97A8}
.band--light .form input:focus,.band--light .form textarea:focus,
.band--light .form select:focus{background:#fff;border-color:var(--accent)}
.band--light .form select option{color:var(--ink)}
.band--light .form__status,.band--light .form__note{color:#4B5A70}
.band--light .consent{color:#5B6879}
.band--light .consent a{color:var(--ink)}
.band--light .clist .row{background:#F4F7FB}
.band--light .clist .row:hover{background:#FFF0DE}
.band--light .clist dt{color:var(--accent-text)}
.band--light .clist dd{color:var(--ink)}
.band--light .foot__rating{color:#4B5A70}
.band--light .foot__rating span{color:var(--accent-big)}

/* ---------------------------------------------- Du mouvement au defilement -
   Trois liaisons au scroll, sans JavaScript : le grand chiffre des entetes
   derive, et les trois lames de l'equipe montent a des vitesses differentes,
   ce qui donne de la profondeur a une simple rangee de portraits. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .phead .bignum{animation:pheadDrift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    .rost:nth-child(1) .rost__ph{animation:lameDrift1 linear both}
    .rost:nth-child(3) .rost__ph{animation:lameDrift2 linear both}
    .rost:nth-child(1) .rost__ph,.rost:nth-child(3) .rost__ph{
      animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
@keyframes pheadDrift{from{transform:translateY(-7%)}to{transform:translateY(9%)}}
@keyframes lameDrift1{from{transform:translateY(14px)}to{transform:translateY(-14px)}}
@keyframes lameDrift2{from{transform:translateY(-12px)}to{transform:translateY(12px)}}

@media (max-width:900px){
  .bridge{grid-template-columns:2px 1fr;padding-right:16px;max-width:none}
  .bridge h3,.bridge p{max-width:none}
  .post{grid-template-columns:1fr;gap:4px;padding:26px 0}
  .post__n{font-size:1.15rem}
  .post h2,.post p{max-width:none}
  .post:hover h2,.post:hover .post__n{transform:none}
  .post__go{display:none}
  /* Le parallaxe des lames n'a pas de sens en colonne unique. */
  .rost:nth-child(1) .rost__ph,.rost:nth-child(3) .rost__ph{animation:none}
}

/* Le sommaire du blog tient sur toute la mesure : le titre a gauche, la
   nature de l'article a droite, comme dans un ours de magazine. */
.post{grid-template-columns:96px minmax(0,1fr) 190px 56px}
.post h2{max-width:22ch}
.post p{max-width:46ch}
.post__rail{display:grid;gap:10px;justify-items:end;text-align:right;padding-top:4px}
.post__cat,.post__meta,.post__soon{display:block;margin:0;font-family:var(--mono);
  font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.post__cat{color:var(--accent-text)}
.post__meta{color:#5F6C7E}
.post__soon{color:var(--ink);padding:5px 10px;background:rgba(255,149,0,.16)}
@media (max-width:900px){
  .post{grid-template-columns:1fr}
  .post h2,.post p{max-width:none}
  .post__rail{justify-items:start;text-align:left;grid-auto-flow:column;
    justify-content:start;gap:14px;align-items:center;margin-top:14px}
}

/* Sur telephone, la lame orange des entetes passait derriere le titre et le
   rendait difficile a lire. Elle recule en bord de page et redevient un
   accent, comme sur grand ecran ou elle occupe la marge de droite. */
@media (max-width:720px){
  .phead{padding-top:140px}
  .phead .s1{right:-16%;width:78px;opacity:.55}
  .phead .s2{right:2%;width:18px;opacity:.45}
}

/* `.form label` l'emportait sur `.consent` : la mention de consentement
   s'affichait en gras, au meme poids que les intitules de champ. */
.form .consent{font-weight:300;letter-spacing:0;text-transform:none}

/* La case a cocher faisait 13 px : trop petite au doigt. Le label entier
   reste cliquable, mais la case elle-meme merite une vraie surface. */
.consent input{width:20px;height:20px;accent-color:var(--accent);margin-top:1px}

/* ==========================================================================
   Services : accordeon sur telephone
   Le panneau se glisse sous la ligne touchee (place par le script). Il garde
   son fond et sa lame, mais s'ouvre a l'endroit ou le doigt vient de taper.
   ========================================================================== */
@media (max-width:980px){
  #services .svc__grid{gap:0}
  #services .svc__panelwrap{margin:0 0 10px}
  #services .svc__row[data-on]{background:linear-gradient(90deg,rgba(255,149,0,.12),transparent 78%)}
  #services .svc__row .arw{transition:transform .4s var(--ease),opacity .3s ease}
  #services .svc__row[data-on] .arw{transform:rotate(90deg)}
  /* Le biseau entamait le texte : il se resserre, et la marge gauche
     depasse desormais l'entaille. */
  #services .svc__panel{clip-path:polygon(20px 0,100% 0,calc(100% - 20px) 100%,0 100%);
    padding:28px 26px 32px 32px}
  #services .svc__panel .bignum{right:16px;top:-8px;font-size:5.2rem}
  #services .svc__panel h3{font-size:1.35rem}
  #services .svc__panel .desc{font-size:.95rem}
}
/* L'ouverture est signalee par un deroule court : sans lui, le contenu
   apparait d'un coup et on ne sait pas d'ou il vient. */
@media (prefers-reduced-motion:no-preference){
  .svc__panelwrap.is-opening{animation:svcOpen .38s var(--ease) both}
}
@keyframes svcOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Lisibilite des libelles sur telephone
   Les intitules en mono capitales descendaient jusqu'a 9,9 px avec un large
   interlettrage : sur un ecran tenu a bout de bras, c'est trop petit. Ils
   remontent a 11,5 px, et l'interlettrage se resserre pour compenser.
   ========================================================================== */
@media (max-width:900px){
  .eyebrow,h1.eyebrow,h2.eyebrow,h3.eyebrow,.crumb,.stat__s,.res h3,.svc-card__k,
  .pillar__n,.cert__k,.setup__day,.post__meta,.post__cat,.post__soon,.mega__num,
  .plan__setup,.plan__tag,.trust__label,.flow__n,.proof__k,.cm,.rank__lbl,
  .posts__count,.rost__role,.clist dt,.reason__n,.benefits__n,.terr__cap span,
  .svc__panel .kicker,.foot__col h3,.review figcaption,.communes__legend b{
    font-size:.72rem;letter-spacing:.12em}
  .trust__label{letter-spacing:.16em}
  /* Les grands chiffres et le nom des lignes gardent leur echelle propre. */
  .reason__n,.benefits__n,.post__n{letter-spacing:.06em}
}
@media (max-width:900px){
  /* Deux libelles echappaient a la regle : le kicker du panneau services est
     porte par un selecteur d'identifiant, et les etiquettes de competences
     n'ont pas de classe propre. */
  #services .svc__panel .kicker,.rost__tags li span,
  .foot__map__note{font-size:.72rem;letter-spacing:.12em}
}

/* ==========================================================================
   Systeme Mandat, sur telephone
   Chaque volet occupait 78 % de la hauteur d'ecran plus 140 px de marge pour
   trois lignes de texte : les aplats de couleur devenaient enormes et vides.
   Les volets se calent maintenant sur leur contenu.
   ========================================================================== */
@media (max-width:980px){
  .mand__panel{min-height:0;padding:54px 0 62px}
  .mand__in h2{font-size:clamp(2.4rem,11vw,3.4rem)}
  .mand__in .desc{margin-top:22px;font-size:1rem;max-width:none}
  .mand__ghost{font-size:clamp(6rem,22vw,9rem)}
  .mand__panel .s1{right:-8%;width:74px}
  .mand__panel .s2{right:6%;width:12px}
}

/* ---------------------------------------------------- Avis : le rail ----- */
.reviews__set{display:contents}
/* Sans mouvement, le defilement automatique s'arrete : le rail doit alors
   pouvoir se parcourir a la main, sinon les avis suivants sont inaccessibles. */
@media (prefers-reduced-motion:reduce){
  .reviews__rail{overflow-x:auto}
}
@media (max-width:900px){
  /* Au doigt, on fait glisser : plus d'animation, un cran par avis. */
  .reviews__rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-mask-image:none;mask-image:none;
    padding-bottom:6px;overscroll-behavior-x:contain}
  .reviews__rail::-webkit-scrollbar{display:none}
  .reviews__track{animation:none;padding-inline:var(--pad)}
  .reviews__set+.reviews__set{display:none}
  .review{scroll-snap-align:center}
}

/* ==========================================================================
   Menu mobile ouvert : la barre suit le panneau
   Sur les pages a heros clair, la barre est en encre tant qu'on n'a pas
   defile. Le panneau deroulant, lui, est bleu nuit : les liens devenaient
   du bleu nuit sur bleu nuit. Ouvert, tout passe en sombre d'un bloc.
   ========================================================================== */
@media (max-width:900px){
  #klixnav[data-menu]{background:rgba(9,15,28,.98);backdrop-filter:blur(14px)}
  #klixnav[data-menu] .burger span{background:#fff}
  #klixnav[data-menu] .nav__links>a:not(.btn),
  #klixnav[data-menu] .megabtn{color:#fff}
  #klixnav[data-menu] .nav__links>a[aria-current=page],
  #klixnav[data-menu] .megabtn[aria-current=page]{color:var(--accent)}
  #klixnav[data-menu] .mega a{color:#fff}
  /* La barre est passee en sombre : le logo encre doit ceder la place
     a la version blanche, sinon il disparait dans le fond. */
  #klixnav[data-menu] .lg-ink{display:none}
  #klixnav[data-menu] .lg-white{display:block}
}

/* La ligne de service selectionnee etait en orange vif sur blanc (3,14:1) a
   17 px : sous le seuil, et c'est le texte qui porte le choix en cours. */
#services .svc__row[data-on] .num,
#services .svc__row[data-on] .name,
.svc__row[data-on] .num,
.svc__row[data-on] .name{color:var(--accent-text)}

/* ==========================================================================
   Equipe : trois panneaux en diagonale (points 1.24 et 7.4)
   Composition reprise du site Wix. Le panneau actif s'elargit, le portrait
   se decale et retrouve ses couleurs, le detail se deroule sous le nom.
   ========================================================================== */
.tmteam{
  --sk:96px;                     /* decalage de la diagonale KLIX */
  --gap:6px;
  display:flex;align-items:stretch;height:clamp(460px,58vw,620px);margin-top:56px;
}
.tm{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;
  background:var(--card);border:0;text-align:left;font:inherit;color:#fff;cursor:pointer;
  clip-path:polygon(var(--sk) 0,100% 0,calc(100% - var(--sk)) 100%,0 100%);
  margin-left:calc(-1 * var(--sk) + var(--gap));
  transition:flex-grow .62s var(--ease);
}
.tm:first-child{clip-path:polygon(0 0,100% 0,calc(100% - var(--sk)) 100%,0 100%);margin-left:0}
.tm:last-child{clip-path:polygon(var(--sk) 0,100% 0,100% 100%,0 100%)}
.tm.is-active{flex-grow:2.7}
.tm:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* --- portrait --- */
.tm__shot{position:absolute;inset:0;z-index:1}
.tm__shot img{
  position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;display:block;
  filter:saturate(.2) brightness(.72) contrast(1.04);transform:translateX(-50%);
  transition:filter .7s ease,transform .9s var(--ease);
}
.tm.is-active .tm__shot img{filter:none;transform:translateX(-28%)}
.tm__veil{
  position:absolute;inset:0;z-index:2;transition:opacity .7s ease;
  background:linear-gradient(to top,rgba(15,23,42,.97) 0%,rgba(15,23,42,.86) 26%,
    rgba(15,23,42,.42) 55%,rgba(15,23,42,.18) 100%);
}
.tm.is-active .tm__veil{
  background:
    linear-gradient(to top,rgba(15,23,42,.86) 0%,rgba(15,23,42,.5) 26%,rgba(15,23,42,0) 52%),
    linear-gradient(to right,rgba(15,23,42,.6) 0%,rgba(15,23,42,0) 52%);
}

/* --- obliques KLIX, derriere le portrait --- */
.tm__slashes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.tm__slashes i{
  position:absolute;background:var(--accent);opacity:0;
  transform:skewX(-22deg) translateY(30px);
  transition:opacity .55s ease,transform .8s var(--ease);
}
.tm__slashes i:nth-child(1){right:15%;top:6%;width:8%;height:54%}
.tm__slashes i:nth-child(2){right:3%;top:24%;width:4.5%;height:48%}
.tm__slashes i:nth-child(3){right:27%;top:34%;width:2.5%;height:36%}
.tm.is-active .tm__slashes i{transform:skewX(-22deg) translateY(0);opacity:.92}
.tm.is-active .tm__slashes i:nth-child(2){opacity:.5;transition-delay:.08s}
.tm.is-active .tm__slashes i:nth-child(3){opacity:.7;transition-delay:.14s}

/* --- contenu --- */
.tm__body{
  position:absolute;z-index:3;
  left:clamp(20px,2.2vw,34px);right:clamp(20px,2.2vw,34px);bottom:clamp(22px,3vh,38px);
  padding-left:calc(var(--sk) * .34);
}
.tm:first-child .tm__body{padding-left:0}
.tm__mark{
  display:block;width:30px;height:9px;background:var(--accent);
  transform:skewX(-22deg);transform-origin:left center;margin-bottom:16px;
  transition:width .55s var(--ease);
}
.tm.is-active .tm__mark{width:66px}
.tm__name{
  margin:0;font-size:clamp(1.45rem,2.35vw,2.5rem);font-weight:900;
  letter-spacing:-.035em;line-height:.98;white-space:nowrap;color:#fff;
}
.tm__short,.tm__role{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:10px 0 0;
}
.tm__short{
  max-height:2.2em;overflow:hidden;white-space:nowrap;
  transition:opacity .28s ease,max-height .5s var(--ease),margin-top .5s var(--ease);
}
.tm.is-active .tm__short{opacity:0;max-height:0;margin-top:0;pointer-events:none}
.tm__reveal{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--ease),opacity .45s ease;
}
.tm__reveal>div{overflow:hidden;min-height:0}
.tm.is-active .tm__reveal{grid-template-rows:1fr;opacity:1;transition-delay:.06s,.18s}
.tm__say{
  margin:14px 0 0;font-size:.95rem;font-weight:300;line-height:1.6;
  color:var(--soft-2);max-width:34ch;
}
.tm__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.tm__tags li{
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.06em;
  color:#E2E8F5;padding:6px 13px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
}

/* --- panneau du milieu : composition inversee --- */
@media (min-width:861px){
  .tm--mirror.is-active .tm__shot img{transform:translateX(-72%)}
  .tm--mirror.is-active .tm__body{padding-left:52%;padding-right:calc(var(--sk) * .34)}
  .tm--mirror.is-active .tm__veil{
    background:
      linear-gradient(to top,rgba(15,23,42,.86) 0%,rgba(15,23,42,.5) 26%,rgba(15,23,42,0) 52%),
      linear-gradient(to left,rgba(15,23,42,.6) 0%,rgba(15,23,42,0) 52%);
  }
  .tm--mirror .tm__slashes i:nth-child(1){right:auto;left:15%}
  .tm--mirror .tm__slashes i:nth-child(2){right:auto;left:3%}
  .tm--mirror .tm__slashes i:nth-child(3){right:auto;left:27%}
}

/* --- entree a l'ouverture --- */
@media (prefers-reduced-motion:no-preference){
  .tm{opacity:0;transform:translateX(26px);animation:tmEnter .85s var(--ease) forwards}
  .tm:nth-child(1){animation-delay:.05s}
  .tm:nth-child(2){animation-delay:.16s}
  .tm:nth-child(3){animation-delay:.27s}
}
@keyframes tmEnter{to{opacity:1;transform:none}}

/* --- ecrans intermediaires : diagonale plus courte --- */
@media (min-width:861px) and (max-width:1150px){
  .tmteam{--sk:62px}
  .tm.is-active{flex-grow:3.1}
  .tm__say{font-size:.9rem}
}

/* --- telephone : les fiches s'empilent, hauteurs egalisees par le script - */
@media (max-width:860px){
  .tmteam{flex-direction:column;height:auto;gap:10px}
  .tm,.tm:first-child,.tm:last-child{
    flex:0 0 auto;height:auto;min-height:252px;margin-left:0;padding:26px 22px 30px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),0 100%);
    background:#111E33;display:flex;flex-direction:column;justify-content:center;
    transition:none;animation:none;opacity:1;transform:none;
  }
  .tm--mirror,.tm--mirror:first-child,.tm--mirror:last-child{
    clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 16px))}
  .tm__slashes,.tm__veil{display:none}
  .tm__shot{left:auto;right:0;top:6px;bottom:0;width:43%;overflow:hidden}
  .tm__shot img,.tm.is-active .tm__shot img{
    position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;
    transform:translateX(-50%);filter:none;
  }
  .tm__body{position:relative;z-index:3;left:auto;right:auto;bottom:auto;padding:0}
  .tm:first-child .tm__body{padding-left:0}
  .tm__name,.tm__short,.tm__role{padding-right:44%}
  .tm__say{padding-right:38%;font-size:.85rem;line-height:1.5;margin-top:11px;max-width:none}
  .tm__tags{padding-right:40%;margin-top:12px;gap:5px}
  .tm__tags li{padding:5px 10px;font-size:.72rem}
  .tm__mark{margin-bottom:14px}
  .tm__name{font-size:1.6rem;white-space:normal}
  /* Pendant la mesure, aucune transition : sinon la hauteur est lue en plein vol. */
  .is-measuring .tm__reveal,.is-measuring .tm__short{transition:none !important}
}

/* ==========================================================================
   1.7  Les logos clients repassent en ruban continu
   La premiere version les rendait illisibles : gris, petits, trop serres.
   Ici ils gardent leur couleur, respirent, et le ruban s'arrete au survol
   comme au focus clavier pour qu'on puisse les lire.
   ========================================================================== */
.logos{
  margin-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.logos__track{display:flex;width:max-content;align-items:center;
  animation:logosRoll 44s linear infinite}
.logos__set{display:flex;align-items:center}
.logos:hover .logos__track,.logos:focus-within .logos__track{animation-play-state:paused}
.logos__cell{
  display:flex;align-items:center;justify-content:center;
  width:clamp(140px,12.5vw,186px);padding:22px 20px;flex:none;
}
/* Pleine opacite : le grief de la version precedente etait justement des
   logos delaves et illisibles. */
.logos__cell img{
  max-height:72px;max-width:100%;height:auto;width:auto;
  transition:transform .45s var(--ease);
}
.logos__cell:hover img{transform:scale(1.06)}
@keyframes logosRoll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* Sans animation le ruban ne bougerait plus : il devient parcourable. */
  .logos{overflow-x:auto}
  .logos__track{animation:none}
  .logos__set+.logos__set{display:none}
}
@media (max-width:900px){
  .logos__cell{width:clamp(126px,38vw,168px);padding:20px 16px}
  .logos__cell img{max-height:52px}
}

/* --------------------------------------------------------------------------
   7.1  Le titre de la page equipe s'etale en largeur
   « KLIX Digital, agence de marketing immobilier a Bruxelles » cassait en
   quatre lignes courtes. La mesure s'allonge et le corps se resserre un peu.
   -------------------------------------------------------------------------- */
.phead--wide h1{max-width:24ch;font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.02}
.phead--wide .lead{max-width:70ch}

/* ==========================================================================
   1.8  Les trois arguments quittent la forme de pastilles
   Trois affirmations valent mieux que trois etiquettes : chacune prend un
   numero, un filet, et se leve au defilement.
   ========================================================================== */
.claims{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:44px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.claims li{position:relative;padding:26px 26px 28px 0;display:grid;gap:14px;align-content:start}
.claims li+li{border-left:1px solid rgba(255,255,255,.12);padding-left:26px}
.claims li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--accent);transition:width .7s var(--ease)}
.claims li+li::after{left:26px}
.claim__n{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;
  color:var(--accent)}
.claim__t{font-size:clamp(1rem,1.5vw,1.22rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:#fff}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .claims li::after{animation:claimRule linear both;animation-timeline:view();
      animation-range:entry 20% cover calc(24% + var(--i,0) * 6%)}
  }
}
@supports not (animation-timeline:view()){.claims li::after{width:44px}}
@media (prefers-reduced-motion:reduce){.claims li::after{width:44px}}
@keyframes claimRule{to{width:44px}}

/* ==========================================================================
   5.6  Le retour sur investissement devient une progression
   Trois lignes egales ne disaient pas que la derniere decoule des deux
   autres. Elles deviennent des paliers relies, et le resultat domine.
   ========================================================================== */
.roi{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);margin:44px 0 0;padding:0}
.roi__step{position:relative;padding:28px 26px 30px;background:rgba(255,255,255,.04);
  border-top:2px solid rgba(255,149,0,.35);display:grid;gap:12px;align-content:start}
.roi__step:last-child{background:linear-gradient(150deg,rgba(255,149,0,.18),rgba(255,149,0,.05));
  border-top-color:var(--accent)}
/* La fleche qui relie un palier au suivant. */
.roi__step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;z-index:2;
  width:12px;height:12px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg)}
.roi__k{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);line-height:1.5}
.roi__v{font-size:clamp(1.5rem,3vw,2.6rem);font-weight:900;letter-spacing:-.045em;
  line-height:1;color:#fff;white-space:nowrap}
.roi__step:last-child .roi__v{font-size:clamp(2rem,4.2vw,3.5rem);color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .roi__step{animation:roiRise linear both;animation-timeline:view();
      animation-range:entry 10% cover calc(26% + var(--i,0) * 8%)}
  }
}
@keyframes roiRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .roi{grid-template-columns:1fr;gap:12px}
  .roi__step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-13px;
    transform:translateX(-50%) rotate(135deg)}
}

/* ==========================================================================
   6.1  Les resultats par service : un filet qui se remplit
   Chaque ligne gagne une jauge qui se trace a l'arrivee dans le champ, et le
   survol l'eclaire. Les chiffres et les libelles sont inchanges.
   ========================================================================== */
.res{position:relative}
.res__rule{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent);
  transition:width .8s var(--ease)}
.res:hover .res__rule{width:100% !important}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .res__rule{animation:resRule linear both;animation-timeline:view();
      animation-range:entry 15% cover calc(28% + var(--i,0) * 5%)}
  }
}
@supports not (animation-timeline:view()){.res__rule{width:64px}}
@media (prefers-reduced-motion:reduce){.res__rule{width:64px}}
@keyframes resRule{to{width:64px}}
.res .res__big{transition:transform .5s var(--ease),color .3s ease}
.res:hover .res__big{transform:translateX(4px);color:var(--accent-text)}

/* ==========================================================================
   6.2  De la visibilite au chiffre d'affaires
   Le texte disait une chaine de causes ; la chaine est maintenant montree.
   ========================================================================== */
.value{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,5vw,80px);align-items:stretch;margin-top:8px}
.value__text h3{margin:16px 0 0;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;
  letter-spacing:-.04em;line-height:1.05;color:var(--ink);max-width:18ch}
.value__text .prose{margin-top:18px}
.chain{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;
  justify-content:space-between;border-left:2px solid var(--line-light)}
.chain li{position:relative;padding:0 0 24px 30px;flex:1 1 0;display:flex;align-items:flex-start}
.chain li:last-child{padding-bottom:0}
.chain__d{position:absolute;left:-9px;top:2px;width:16px;height:16px;
  background:var(--paper);border:2px solid var(--accent);transform:skewX(-22deg)}
.chain li:last-child .chain__d{background:var(--accent)}
.chain__t{display:block;font-size:clamp(1rem,1.6vw,1.32rem);font-weight:800;
  letter-spacing:-.025em;color:var(--ink)}
.chain li:last-child .chain__t{color:var(--accent-text)}
/* Le trait se remplit du haut vers le bas, au rythme du defilement. */
.chain::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;
  background:var(--accent)}
.chain{position:relative}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .chain::before{animation:chainFill linear both;animation-timeline:view();
      animation-range:entry 20% cover 62%}
    .chain li{animation:chainIn linear both;animation-timeline:view();
      animation-range:entry 18% cover calc(30% + var(--i,0) * 9%)}
  }
}
@keyframes chainFill{to{height:100%}}
@keyframes chainIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .value{grid-template-columns:1fr;gap:34px}
  .value__text h3{max-width:none}
}

/* ==========================================================================
   2.3 / 2.4  Carte de l'agence et appel a avis, en pied de page
   La carte est chargee en differe et occupe toute la largeur ; elle reste
   discrete, en niveaux attenues, et reprend ses couleurs au survol.
   ========================================================================== */
.foot__map{
  max-width:var(--shell);margin:56px auto 0;padding:0 var(--pad);
  box-sizing:border-box;
}
.foot__map iframe{
  display:block;width:100%;height:clamp(280px,26vw,420px);border:0;
  border:1px solid rgba(255,255,255,.12);
}
.foot__cta{margin-top:18px}
.foot__cta .btn{padding:12px 26px}

/* Le panneau d'equipe est pilote par un vrai bouton, etendu a toute la
   surface. Rien d'interactif ne se trouve dessous : il peut donc la couvrir. */
.tm__hit{position:absolute;inset:0;z-index:4;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit}
.tm__hit:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}


/* ==========================================================================
   Rendu differe des sections hors ecran
   Le navigateur ne calcule ni ne peint une section tant qu'elle n'approche
   pas du champ de vision. Sur un telephone bride, cela fait passer le
   defilement de 47 images longues a une seule.

   Deux sections sont epargnees :
   - #top, le heros, deja visible au chargement : rien a gagner ;
   - #systeme, dont les volets reposent sur `position:sticky`. Le confinement
     introduit par content-visibility perturbe le collage, et c'est
     precisement l'effet signature de la page.

   `contain-intrinsic-size: auto` fait memoriser au navigateur la hauteur
   reelle apres le premier rendu ; la valeur de repli ne sert qu'avant.
   ========================================================================== */
@supports (content-visibility: auto){
  main > section:not(#systeme):not(#top){
    content-visibility:auto;
    contain-intrinsic-size:auto 1250px;
  }
}

/* Le lien vit desormais dans le <dd> : seul endroit ou une liste de
   definitions accepte du contenu. La ligne entiere reste survolable. */
.clist dd a{color:inherit;text-decoration:none}
.clist dd a:hover{color:var(--accent)}
.band--light .clist dd a:hover{color:var(--accent-text)}

/* ==========================================================================
   Cahier V3
   ========================================================================== */

/* 4.3  Menu mobile : le sous-menu se deplie sous « Services », pas en bas.
   Le panneau est le dernier enfant dans le HTML — c'est ce qui convient au
   grand ecran, ou il est positionne. En colonne, l'ordre d'affichage est
   reordonne sans toucher au balisage. */
@media (max-width:900px){
  .nav__links>.megabtn{order:1}
  .nav__links>.mega{order:2}
  .nav__links>a:not(.btn){order:3}
  .nav__links>a.btn{order:4}
  .mega__grid{gap:0}
  .mega__item{padding-left:14px;border-left:2px solid rgba(255,149,0,.35)}
}

/* 4.2  Pied de page : le bouton d'avis chevauchait l'adresse. Les entrees
   du pied de page avaient perdu leur interligne quand les liens ont recu
   leur surface tactile. */
@media (max-width:900px){
  .foot__col p{margin-bottom:12px}
  .foot__cta{margin-top:24px;margin-bottom:4px}
  .foot__cta .btn{display:inline-flex;justify-content:center}
}

/* 4.1  Classement local : la remontee se jouait entre 38 % et 62 % de la
   traversee. Sur un ecran haut, ces 62 % tombent quand le bloc a deja
   quitte la zone de lecture — l'animation semblait ne jamais partir. Elle
   se joue maintenant pendant que le bloc est au centre. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rank__row:not(.rank__row--you),
    .rank__row--you{animation-range:cover 24% cover 46%}
  }
}

/* 3.1  Resultats par service : les chiffres montent en cascade a l'arrivee
   dans le champ, et la ligne s'eclaire au passage. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .res h3,.res__nums p,.res__d{
      animation:resIn linear both;animation-timeline:view();
    }
    .res h3{animation-range:entry 12% cover 26%}
    .res__nums p:nth-child(1){animation-range:entry 16% cover 30%}
    .res__nums p:nth-child(2){animation-range:entry 20% cover 34%}
    .res__d{animation-range:entry 24% cover 38%}
    .res__big{animation:resPop linear both;animation-timeline:view();
      animation-range:entry 18% cover 34%}
  }
}
@keyframes resIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes resPop{from{letter-spacing:.04em;color:var(--accent-big)}to{letter-spacing:-.04em}}

/* 0.4  La carte s'affiche directement, sans encart intermediaire. */
.foot__map iframe{filter:none;opacity:1}

/* Mention sous la carte : presente pour qui la cherche, effacee pour les
   autres. Le contraste reste au-dessus du seuil de lisibilite. */
.foot__map__note{
  margin:8px 0 0;font-family:var(--mono);font-weight:500;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}


/* ==========================================================================
   Ruban de logos : la couleur revient, le defilement se lit
   Le filtre `grayscale(1) opacity(.5)` pose par `.logos__set img` (regle de
   la premiere version du ruban) n'a jamais ete annule. La regle qui l'a
   remplacee vise `.logos__cell img` : meme specificite, plus bas dans le
   fichier, elle gagne donc sur `max-height` et `width` — mais elle ne
   declare pas `filter`, et une propriete non declaree n'ecrase rien. Les
   logos etaient delaves sur tous les ecrans, pas seulement sur telephone.
   ========================================================================== */
.logos__cell img{filter:none}

/* Le ruban parcourt la moitie de sa longueur en 44 s, soit environ 40 px par
   seconde sur un telephone : un logo met plus de trois secondes a franchir sa
   propre largeur, et le mouvement se lit comme un arret. Sous 900 px la duree
   est reduite ; le ruban reste lent, mais visiblement en marche. */
@media (max-width:900px){
  .logos__track{animation-duration:22s}
}

/* ==========================================================================
   Pied de page centre sur telephone
   L'alignement a gauche vient de la disposition en trois colonnes du grand
   ecran, ou il est juste. Empilees sur un seul rang, la marque, les trois
   listes et la barre basse laissaient un bord droit vide et desequilibre.
   ========================================================================== */
@media (max-width:900px){
  .foot__cols{justify-content:center;text-align:center}
  .foot__brand{max-width:none;justify-items:center}
  .foot__nav{width:100%;justify-content:center;text-align:center}
  .foot__col{align-items:center}
  .foot__cta .btn{margin-inline:auto}
  .foot__bar{flex-direction:column;justify-content:center;text-align:center}
  .foot__bar div{justify-content:center;flex-wrap:wrap}
  .foot__map__note{text-align:center}
}

/* ==========================================================================
   Selecteur de langue
   Trois codes courts plutot qu'une liste deroulante : a trois entrees, un
   menu coute un clic de plus pour ne rien economiser. La langue en cours
   est marquee `aria-current`, ce qui la designe aux lecteurs d'ecran en
   meme temps qu'a l'oeil.
   ========================================================================== */
.lang{
  display:flex;align-items:center;gap:2px;
  padding:3px;border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
}
.lang a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:5px 8px;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  /* --muted (#8FA0BA) ne donne que 2,66:1 sur le blanc du heros, sous le
     seuil AA de 4,5:1 pour ce corps de texte. #4B5A70 monte a 7,01:1 et
     appartient deja a la palette (note Google sur fond clair). */
  color:#4B5A70;text-decoration:none;
  transition:color .25s ease,background-color .25s ease;
}
.lang a:hover{color:var(--accent-text)}
.lang a[aria-current="true"]{background:var(--accent);color:#0F172A}

/* Sur fond sombre — barre collee, sous-pages — le contour et le texte
   passent en clair pour garder le meme rapport de contraste. */
#klixnav[data-stuck] .lang,.subnav .lang{border-color:rgba(255,255,255,.18)}
#klixnav[data-stuck] .lang a,.subnav .lang a{color:var(--soft-2)}
#klixnav[data-stuck] .lang a[aria-current="true"],
.subnav .lang a[aria-current="true"]{background:var(--accent);color:#0F172A}

@media (max-width:900px){
  /* Dans le menu deplie, le selecteur ferme la liste : on choisit une
     langue apres avoir vu ou l'on peut aller, pas avant. */
  .nav__links>.lang{order:5;align-self:center;margin-top:6px}
  .lang a{min-width:52px;padding:11px 12px;font-size:.74rem}
}