/* ============================================================
   Video-agency landing page — design system
   shift palette:ground #FAFAF7, violet #00AAFE / #00AAFE / #00AAFE.
   ============================================================ */

:root{
  --bg:#FAFAF7;
  --card:#FFFFFF;
  --card-2:#F2F2EE;
  --stroke:rgba(17,17,17,.09);
  --stroke-2:rgba(17,17,17,.18);
  --txt:#111111;
  --muted:#4D585F;
  --muted-2:rgba(17,17,17,.5);
  --accent:#111111;
  --accent-hi:#2A2A2A;
  --accent-soft:#00AAFE;
  --yellow:#00AAFE;
  --blue-grad:linear-gradient(180deg,#00AAFE 0%,#00AAFE 62%,#00C4FF 88%,#45D2FF 100%);
  --yellow-deep:#0096E6;
  --grid:rgba(17,17,17,.055);
  --grid-strong:rgba(17,17,17,.1);
  --radius:18px;
  --radius-lg:24px;
  --maxw:1200px;
  --pad:40px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:"Schibsted Grotesk",-apple-system,"Helvetica Neue",sans-serif;
  --font-body:"Schibsted Grotesk",-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  /* clip, pas hidden : « hidden » ferait du body un conteneur de defilement,
     ce qui neutralise tout position:sticky de la page (sections bloquees,
     etapes de la methode). « clip » coupe le debordement sans cet effet. */
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{position:relative}

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  line-height:1.02;letter-spacing:-.005em;word-spacing:.14em;margin:0;
}
h1.display{font-size:clamp(34px,4.5vw,64px);line-height:1.06}
h2.display{font-size:clamp(30px,3.6vw,48px);line-height:1.1}
h3.display{font-size:clamp(26px,3vw,40px);line-height:1.1}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:#111111;
}
.eyebrow::before{
  content:"";width:15px;height:15px;flex:0 0 auto;
  background:var(--accent);
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
/* une icône par nature de section */
.work{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h11a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM16 10l5-3v10l-5-3z'/%3E%3C/svg%3E")}
.about{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.services{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E")}
.dests{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 11h11.2l-4.6-4.6L12 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/%3E%3C/svg%3E")}
.method{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 5h3v3H3zM8 5.5h13v2H8zM3 10.5h3v3H3zM8 11h13v2H8zM3 16h3v3H3zM8 16.5h13v2H8z'/%3E%3C/svg%3E")}
.money{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 5C6.5 5 2.7 9.6 2 12c.7 2.4 4.5 7 10 7s9.3-4.6 10-7c-.7-2.4-4.5-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E")}
.results{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 18h4v4H3zM10 10h4v12h-4zM17 4h4v18h-4z'/%3E%3C/svg%3E")}
.testis{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-6 5V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E")}
.pricing{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11 2H4a2 2 0 0 0-2 2v7l11 11 9-9L11 2zm-4 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E")}
.faq{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 17h2v2h-2zM12 3a4.5 4.5 0 0 0-4.5 4.5h2A2.5 2.5 0 1 1 12 10c-1 0-1.5.8-1.5 1.7V15h2v-2.6c0-.9 1.1-1.4 1.8-2.1A4.5 4.5 0 0 0 12 3z'/%3E%3C/svg%3E")}
.toolkit{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M9 3h6a1 1 0 0 1 1 1v3h4a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4V4a1 1 0 0 1 1-1zm1 4h4V5h-4z'/%3E%3C/svg%3E")}
.cta{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 2h2v3H7zM15 2h2v3h-2zM3 5h18v17H3zM5 10v10h14V10z'/%3E%3C/svg%3E")}
.lead{color:var(--muted);font-size:16px;max-width:58ch;margin:0;line-height:1.6}
.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:60px}
.section-head.center{align-items:center;text-align:center}
.split-head{
  display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:start;margin-bottom:44px;
}
/* la bascule vit sous l'intitule de section, dans la colonne de gauche :
   un rectangle a coins arrondis, sans degrade ni halo */
.meth-col{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.meth-switch{
  display:inline-flex;gap:2px;padding:3px;border-radius:12px;
  border:1px solid var(--stroke);background:#FFFFFF}
.meth-switch button{
  padding:9px 17px;border:0;border-radius:9px;cursor:pointer;background:transparent;
  font-family:var(--font-display);font-size:14px;font-weight:500;
  color:var(--muted);transition:background .3s,color .3s}
.meth-switch button:hover{color:#111111}
.meth-switch button.on{background:rgba(17,17,17,.09);color:#111111}


/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 9px 9px 24px;border-radius:16px;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#111111;
  border:1px solid rgba(17,17,17,.2);
  box-shadow:0 12px 34px -14px var(--accent),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn .chev{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--accent);
  transition:transform .55s var(--ease);
}
.btn .chev svg{width:13px;height:13px;fill:currentColor}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px var(--accent)}
.btn:hover .chev{transform:translateX(3px)}
.btn.ghost{background:var(--card);border-color:var(--stroke-2);box-shadow:none}
.btn.ghost .chev{background:rgba(17,17,17,.12);color:#111111}
.btn.ghost:hover{background:var(--card-2)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:34px var(--pad) 22px;
  border-bottom:1px solid transparent;
  transition:padding .45s var(--ease),background .45s,backdrop-filter .45s,border-color .45s;
}
.nav.stuck{padding:14px var(--pad)}
/* le fond vit sur un calque déborde vers le bas et s'y dissout : aucune arête */
.nav::before{
  content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(250,250,247,.94) 0%,rgba(250,250,247,.76) 52%,rgba(250,250,247,0) 100%);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 54%,transparent 100%);
}
.nav.stuck::before{opacity:1}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{width:30px;height:30px;flex:0 0 auto;color:#111111;transition:color .35s}
.brand:hover .brand-logo{color:var(--accent-hi)}
.brand-name{
  font-family:var(--font-display);
  font-size:21px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;
}
.nav-links{
  display:flex;align-items:center;gap:30px;
  /* centrée sur la fenêtre, indépendamment du logo et du bouton menu */
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 26px;border-radius:16px;
  background:linear-gradient(180deg,rgba(17,17,17,.13),#FFFFFF);
  border:1px solid rgba(17,17,17,.16);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:0 10px 34px rgba(20,20,20,.112),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.07);
  transition:background .4s var(--ease),border-color .4s,box-shadow .4s,
             backdrop-filter .4s,padding .4s var(--ease);
}

/* au scroll la barre devient opaque : le verre par-dessus ferait doublon */
.nav.stuck .nav-links{
  background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:11px 0;
}
.nav.stuck .nav-links::before{opacity:0}
/* reflet spéculaire : c'est lui qui donne l'effet "verre liquide" */
.nav-links::before{
  content:"";position:absolute;inset:1px 1px auto;height:46%;
  transition:opacity .35s;
  border-radius:15px 15px 40% 40%/15px 15px 14px 14px;
  background:linear-gradient(180deg,rgba(17,17,17,.22),#FFFFFF);
  pointer-events:none;
}
.nav-links a{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--muted);position:relative;padding:4px 0;transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .4s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:#111111}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.menu-btn{
  display:none;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:#111111;
}
.menu-btn .plus{width:15px;height:15px;position:relative;transition:transform .5s var(--ease)}
.menu-btn .plus::before,.menu-btn .plus::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1.6px;background:currentColor;
  transform:translateY(-50%);
}
.menu-btn .plus::after{transform:translateY(-50%) rotate(90deg)}
.menu-btn.open .plus{transform:rotate(135deg)}

.drawer{
  position:fixed;inset:0;z-index:79;
  background:rgba(250,250,247,.97);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--font-display);
  font-size:clamp(34px,8vw,62px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.24;color:var(--muted-2);
  transform:translateY(24px);opacity:0;
  transition:color .3s,transform .6s var(--ease),opacity .6s var(--ease);
}
.drawer.open a{transform:none;opacity:1}
.drawer.open a:nth-child(2){transition-delay:.05s}
.drawer.open a:nth-child(3){transition-delay:.1s}
.drawer.open a:nth-child(4){transition-delay:.15s}
.drawer.open a:nth-child(5){transition-delay:.2s}
.drawer a:hover{color:#111111}

/* les résultats ne sont plus trois cartes mais un document : le rapport lui-même */
.report{
  position:relative;max-width:880px;margin:0 auto;border-radius:26px;overflow:hidden;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#FFFFFF,#FFFFFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             0 50px 110px -55px rgba(20,20,20,.266),
             0 0 0 1px rgba(20,20,20,.02)}
/* un reflet traverse lentement le document, une fois toutes les neuf secondes */
.report::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,#FFFFFF 48%,transparent 57%);
  transform:translateX(-130%);animation:repSheen 9s ease-in-out infinite}
@keyframes repSheen{0%,74%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.report::after{display:none}}
.report-mark{width:17px;height:17px;flex:0 0 auto;color:var(--accent-hi)}
.report-foot{display:flex;align-items:center;gap:10px;
  padding:15px 28px;border-top:1px solid var(--stroke);
  background:#FFFFFF;
  font-size:13px;color:var(--muted-2)}
/* trois colonnes egales de part et d'autre : la bascule tombe au milieu
   exact de la carte, quelle que soit la longueur des deux textes */
.report-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:12px 28px;border-bottom:1px solid var(--stroke);
  background:#FFFFFF}
.report-ident{display:flex;align-items:center;gap:11px;min-width:0}
.report-switch{justify-self:center}
.report-switch button{padding:7px 14px;font-size:13px}
@media (max-width:820px){
  .report-head{grid-template-columns:1fr;justify-items:center;text-align:center;padding:16px 20px}
}
.report-dot{width:8px;height:8px;border-radius:50%;background:#00AAFE;
  box-shadow:0 0 10px rgba(20,20,20,.238);flex:0 0 auto}
.report-title{font-family:var(--font-display);font-size:15px;font-weight:500;color:#111111}
.report-tag{justify-self:end;font-size:13px;color:var(--muted-2)}
.report-rows{list-style:none;margin:0;padding:0}
/* La carte grandit quand on ajoute la publicite : deux lignes de plus.
   C'est le signal, on ne le lisse pas. */
.report-rows[hidden]{display:none}

.report-row{
  position:relative;display:flex;align-items:flex-start;gap:24px;
  padding:28px;border-top:1px solid var(--stroke);
  transition:background .45s}
.report-row:first-child{border-top:0}
.report-row:hover{background:rgba(0,170,254,.05)}
.report-ico{flex:0 0 auto;width:50px;height:50px}
.report-ico img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(20,20,20,.14));
  animation:icoOrbit 7.6s ease-in-out infinite}
.report-row:nth-child(2) .report-ico img{animation-duration:8.9s;animation-delay:-2.3s}
.report-row:nth-child(3) .report-ico img{animation-duration:8.2s;animation-delay:-4.1s}

.report-row h3{margin:0 0 7px;font-size:clamp(18px,1.6vw,21px);text-transform:none;line-height:1.2}
.report-row p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:60ch}
@media (max-width:640px){
  .report-row{padding:22px 18px;gap:16px}
  .report-ico{width:42px;height:42px}
}

/* icône 3D en tête de carte, même langage que les objectifs */
.card-ico{display:block;width:54px;height:54px;margin-bottom:4px}
.card-ico img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 9px 18px rgba(20,20,20,.14));
  animation:icoOrbit 7.6s ease-in-out infinite}
.flux-card:nth-child(2) .card-ico img{animation-duration:8.7s;animation-delay:-1.6s}
.flux-card:nth-child(3) .card-ico img{animation-duration:8.1s;animation-delay:-3.2s}
.res:nth-child(2) .card-ico img{animation-duration:9s;animation-delay:-2.1s}
.res:nth-child(3) .card-ico img{animation-duration:7.9s;animation-delay:-3.8s}

/* ============================================================
   NAPPE D'AMBIANCE — derrière toute la page, sous tout contenu
   ============================================================ */
/* La nappe est fixe et pleine de degrades flous : sans promotion GPU elle est
   re-rasterisee a chaque image de scroll, ce qui laisse des tuiles perimees
   (bandes violettes) quand on descend vite. */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.amb-g{position:absolute;border-radius:50%}
.amb .a1{width:74vw;height:66vh;left:-12vw;top:-8vh;
  background:radial-gradient(closest-side,rgba(0,170,254,.079),rgba(0,170,254,.029) 52%,transparent 76%)}
.amb .a2{width:66vw;height:60vh;right:-14vw;top:24vh;
  background:radial-gradient(closest-side,rgba(0,170,254,.07),rgba(0,170,254,.024) 52%,transparent 76%)}
.amb .a3{width:88vw;height:58vh;left:6vw;bottom:-16vh;
  background:radial-gradient(closest-side,rgba(0,170,254,.062),rgba(0,170,254,.022) 52%,transparent 76%)}
/* les voiles clairs de la hero, refaits en CSS pour éviter les identifiants dupliqués */
.amb-streak{position:absolute;left:-10%;top:-5%;width:120%;height:110%;
  background:linear-gradient(104deg,transparent 36%,#FFFFFF 45%,transparent 54%),
    linear-gradient(84deg,transparent 56%,#FFFFFF 65%,transparent 74%)}

/* visuels des trois leviers */
.svc-vis{position:relative;aspect-ratio:1.04;border-radius:14px;overflow:hidden;
  border:1px solid var(--stroke);background:#FFFFFF}
.vis-feed{display:flex;flex-direction:column;gap:7px;padding:9px}
.ig-head{display:flex;align-items:center;gap:8px;padding:0 2px}
.ig-ava{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(17,17,17,.18)}
.ig-name{font-size:13px;font-weight:500;color:#111111;letter-spacing:-.01em}
.ig-check{width:13px;height:13px;flex:0 0 auto}
.ig-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px}
.ig-grid span{background-size:cover;background-position:center;border-radius:5px;overflow:hidden}
.ig-reel{position:relative}
.ig-reel video{width:100%;height:100%;object-fit:cover;display:block}
/* le petit repère qui signale une vidéo, comme sur un vrai profil */
.ig-reel::after{content:"";position:absolute;right:5px;top:5px;width:9px;height:9px;
  background:#FFFFFF;opacity:.92;
  clip-path:polygon(0 0,100% 50%,0 100%);
  filter:drop-shadow(0 1px 2px rgba(20,20,20,.196))}
/* la pub telle que le client final la voit dans son fil, une créative à la fois */
.vis-ads{position:relative;overflow:hidden}
.ads-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.ads-slide.on{opacity:1}
.ads-bg{position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center;
  filter:blur(26px) brightness(.42) saturate(1.1);transform:scale(1.2)}
.ads-frame{position:absolute;left:50%;top:13px;translate:-50% 0;
  height:calc(100% - 26px);aspect-ratio:9/16;
  border-radius:11px;overflow:hidden;
  box-shadow:0 16px 36px -12px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.14)}
.ads-media{position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center}
.ads-tag{position:absolute;left:8px;top:8px;
  padding:3.5px 9px;border-radius:100px;
  background:rgba(250,250,247,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(17,17,17,.18);
  font-size:9.5px;font-weight:500;color:rgba(17,17,17,.94)}
.ads-cta{position:absolute;left:8px;right:8px;bottom:8px;
  display:flex;align-items:center;justify-content:center;
  padding:8px 10px;border-radius:9px;background:#FFFFFF;color:#111111;
  font-family:var(--font-display);font-size:11px;font-weight:600}
/* la forme d'un reporting, sans aucun chiffre affirmé */
.vis-track{display:flex;flex-direction:column;padding:14px 15px 12px;gap:11px}
.trk-head{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted-2)}
.trk-dot{width:7px;height:7px;border-radius:50%;background:#00AAFE;
  box-shadow:0 0 9px rgba(20,20,20,.224);flex:0 0 auto}
.trk-tag{margin-left:auto;padding:3px 9px;border-radius:100px;font-size:11px;
  border:1px solid var(--stroke);background:#FFFFFF;color:rgba(17,17,17,.78)}
.trk-plot{position:relative;flex:1;min-height:0}
.trk-chart{display:block;width:100%;height:100%;overflow:visible}
.trk-chart line{stroke:rgba(17,17,17,.07);stroke-width:1}
.trk-line{fill:none;stroke:var(--accent-hi);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* hors du SVG : l'étirement du repère ne peut plus l'ovaliser */
.trk-pt{position:absolute;left:83.33%;top:28.8%;translate:-50% -50%;
  width:9px;height:9px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 0 2.5px var(--accent),0 0 14px rgba(20,20,20,.238)}
.trk-legend{display:flex;justify-content:space-between;gap:8px;
  font-size:11px;color:var(--muted-2)}
.trk-legend span{position:relative;padding-left:12px;white-space:nowrap}
.trk-legend span::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:6px;height:6px;border-radius:2px;background:var(--accent)}
.vis-report .row{display:flex;align-items:center;gap:11px}
.vis-report .lbl{flex:0 0 84px;font-size:11.5px;color:var(--muted-2)}
.vis-report .bar{flex:1;height:7px;border-radius:99px;background:rgba(17,17,17,.08)}
.vis-report .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi))}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:50svh;display:flex;align-items:center;padding:152px 0 48px;overflow:hidden;isolation:isolate}
/* le bas de la hero reste plat : c'est ce qui supprime la couture */
.hero-bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  background:none;
  -webkit-mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.6) 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.6) 72%,transparent 100%);
}
.hero-bg .plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.16;mix-blend-mode:overlay;transform:scale(1.08);
}
.hero-bg .silk{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:118%;height:118%;
}
.hero-bg .glow{position:absolute;border-radius:50%;filter:blur(90px)}
.hero-bg .g1{width:62vw;height:54vh;left:2vw;top:-6vh;
  background:radial-gradient(circle,rgba(0,170,254,.079),transparent 68%)}
.hero-bg .g2{width:50vw;height:50vh;right:-4vw;top:14vh;
  background:radial-gradient(circle,rgba(0,170,254,.092),transparent 70%)}
.hero-bg .g3{width:86vw;height:46vh;left:6vw;bottom:-20vh;
  background:radial-gradient(circle,rgba(250,250,247,.85),transparent 72%)}
.hero-bg .vignette{
  position:absolute;inset:0;
  background:radial-gradient(125% 100% at 46% 46%,transparent 52%,rgba(250,250,247,.34) 80%,rgba(250,250,247,.82) 100%),
    linear-gradient(180deg,rgba(250,250,247,.34),rgba(250,250,247,0) 20%,rgba(250,250,247,0) 72%,#FAFAF7 100%);
}
.grain{
  position:absolute;inset:0;opacity:.25;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:56px;align-items:center}
.hero-copy h1{max-width:none}
.hero-copy .btn{margin-top:26px}
/* l'appel principal : plus gros, plus dense, avec un curseur qui tourne autour */
.cta-order{position:relative;display:inline-block}
.cta-order.o1{margin-top:26px}
.btn-order{
  padding:16px 30px;border-radius:16px;gap:0;
  font-size:17px;font-weight:600;letter-spacing:-.012em;color:#111111;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent) 52%,#00AAFE);
  border:1px solid rgba(17,17,17,.22);
  box-shadow:0 14px 34px -14px var(--accent),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 0 rgba(20,20,20,.14)}
.btn-order:hover{transform:translateY(-2px);
  box-shadow:0 20px 44px -14px var(--accent),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 0 rgba(20,20,20,.14)}
/* la même touche, en plus discret, entre deux sections */
.cta-strip{display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;margin-top:52px}
.cta-strip p{margin:0;font-size:16.5px;color:var(--muted)}
.btn-order.sm{padding:13px 24px;font-size:15.5px;border-radius:14px}
/* un curseur par bouton, jamais le même trajet ni la même taille */
.cta-cursor{position:absolute;z-index:3;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(20,20,20,.168))}
.o1 .cta-cursor{width:36px;animation:cxo1 6.4s ease-in-out infinite,cyo1 4.9s ease-in-out infinite}
@keyframes cxo1{0%,100%{left:-9%}50%{left:87%}}
@keyframes cyo1{0%,100%{top:-42%}50%{top:74%}}
.o2 .cta-cursor{width:30px;animation:cxo2 7.8s ease-in-out infinite,cyo2 5.6s ease-in-out infinite}
@keyframes cxo2{0%,100%{left:92%}50%{left:2%}}
@keyframes cyo2{0%,100%{top:70%}50%{top:-34%}}
.o3 .cta-cursor{width:33px;animation:cxo3 5.9s ease-in-out infinite,cyo3 7.2s ease-in-out infinite}
@keyframes cxo3{0%,100%{left:-4%}50%{left:80%}}
@keyframes cyo3{0%,100%{top:78%}50%{top:-38%}}
.o4 .cta-cursor{width:28px;animation:cxo4 8.4s ease-in-out infinite,cyo4 6.1s ease-in-out infinite}
@keyframes cxo4{0%,100%{left:84%}50%{left:-6%}}
@keyframes cyo4{0%,100%{top:-30%}50%{top:72%}}
@media (prefers-reduced-motion:reduce){.cta-cursor{animation:none;left:84%;top:64%}}
.hero-side{display:flex;flex-direction:column;gap:13px;align-items:flex-start;align-self:start;padding-top:14px}
.trust{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;max-width:340px}
.trust-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}

/* anneau de logos qui défile en continu */
.ring{display:flex;flex:1 1 auto;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* Sans le compteur a sa droite, l'anneau s'etirait sur toute la colonne et
   montrait deux fois la meme enseigne. On le cale sur quatre pastilles.
   Selecteur qualifie : ".ring" seul toucherait aussi le carrousel 3D. */
.trust .ring{flex:0 0 auto;width:186px}
.ring-track{display:flex;align-items:center;gap:14px;padding-right:14px;flex:0 0 auto;
  animation:slide 26s linear infinite;will-change:transform}
.ring .av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(17,17,17,.14);pointer-events:none}
.avatars{display:flex}
.avatars .av{object-fit:cover;
  width:52px;height:52px;border-radius:50%;margin-left:-15px;flex:0 0 auto;
  border:2px solid rgba(17,17,17,.45);
  background:linear-gradient(150deg,#00AAFE,#00AAFE);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:14px;font-weight:700;color:rgba(17,17,17,.55);
}
.avatars .av:first-child{margin-left:0}
.trust-sub{display:block;align-self:flex-end;text-align:right;font-size:14px;color:var(--muted)}
.num-plus{font-size:.52em;color:var(--accent-hi);-webkit-text-fill-color:var(--accent-hi);
  vertical-align:super;margin-left:.04em;letter-spacing:0}
.trust .num{color:var(--txt);-webkit-text-fill-color:var(--txt);
  font-family:var(--font-display);font-size:clamp(54px,5.6vw,80px);
  font-weight:700;line-height:.92;letter-spacing:-.03em;
  
  
  -webkit-text-fill-
}
.hero-side .lead{font-size:clamp(17px,1.35vw,21px);line-height:1.55;max-width:34ch}
.badges{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.badge{display:flex;align-items:center;gap:9px;color:#111111}
.badge svg{width:24px;height:30px;flex:0 0 auto;opacity:.92}
.badge-txt{display:flex;flex-direction:column;align-items:center;line-height:1.25;text-align:center}
.badge-txt i{font-style:normal;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,17,17,.72)}
.badge-txt b{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-txt .stars{font-size:7px;letter-spacing:.24em;color:rgba(17,17,17,.85)}
.badge.chip{
  flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 15px;border-radius:12px;
  border:1px solid rgba(17,17,17,.18);background:#FFFFFF;
}
.badge.chip b{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.badge.chip i{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(17,17,17,.62)}

.float{
  position:absolute;left:0;top:0;z-index:-1;   /* derrière le titre : lisibilité garantie */
  width:104px;height:104px;
  filter:drop-shadow(0 26px 46px rgba(20,20,20,.21));
  pointer-events:none;will-change:transform;
}
.float img{width:100%;height:100%;object-fit:contain}
.float.f1{width:110px;height:110px}
.float.f2{width:98px;height:98px}
.float.f3{width:92px;height:92px}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:60px;padding-right:60px;flex:0 0 auto;
  animation:slide 32s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee.rev .marquee-track{animation-direction:reverse}
@keyframes slide{to{transform:translateX(-100%)}}
.logo-item{
  display:flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:var(--font-display);
  font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.01em;
  color:rgba(17,17,17,.55);transition:color .35s;
}
.logo-item:hover{color:#111111}
.logo-item img{
  width:clamp(40px,3.4vw,52px);aspect-ratio:1;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid rgba(17,17,17,.18);
}
.strip{padding:18px 0 44px;border-bottom:1px solid var(--stroke)}
.strip-label{
  text-align:center;margin:30px 0 0;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted-2);
}

/* ============================================================
   ABOUT — scroll-lit text
   ============================================================ */
.about{position:relative;z-index:71;margin-top:-120px;padding:34px 0 68px}
.about-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;
  filter:blur(calc(var(--peek,0) * 11px));
  opacity:calc(1 - var(--peek,0) * .55);
  }
.lit{
  font-family:var(--font-display);
  font-size:clamp(26px,3.7vw,48px);
  font-weight:600;text-transform:uppercase;      /* même traitement que le titre du hero */
  line-height:1.1;letter-spacing:-.005em;word-spacing:.14em;
  max-width:26ch;margin:0 auto;
}
.lit .w{display:inline-block;color:rgba(17,17,17,.13);transition:color .4s var(--ease)}
.lit .w.on{color:#111111}
.lit .w.accent.on{color:var(--txt);-webkit-text-fill-color:var(--txt);background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;
  
  
  -webkit-text-fill-
}

/* ============================================================
   WORK — staggered composition
   ============================================================ */
.work{position:relative;margin-top:-81px;padding:12px 0 0}
/* halo haut : visible depuis la hero, il donne envie de descendre */
.work::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1600px,100vw);height:80vh;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,170,254,.092),rgba(0,170,254,.035) 45%,transparent 72%)}
/* halo qui suit les cartes pendant toute la rotation */
.arc-pin::before{content:"";position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:min(1600px,100vw);height:126vh;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(0,170,254,.132) 0%,rgba(0,170,254,.097) 24%,
    rgba(0,170,254,.053) 46%,rgba(0,170,254,.022) 64%,transparent 82%)}
.work-comp{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.work-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-lg);border:1px solid var(--stroke);
  transition:transform .6s var(--ease),border-color .4s;
}
.work-card:hover{transform:translateY(-8px);border-color:var(--stroke-2)}
.work-card.p1{grid-column:2/6;aspect-ratio:9/13}
.work-card.p2{grid-column:8/12;aspect-ratio:9/11;margin-top:64px}
.work-card.p3{grid-column:2/6;aspect-ratio:9/12;margin-top:56px}
.work-card.p4{grid-column:8/12;aspect-ratio:9/13;margin-top:-8px}
.work-card .media{position:absolute;inset:0;z-index:-1}
.work-card .media video,.work-card .media img{width:100%;height:100%;object-fit:cover}
.work-card .fallback{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 12%,rgba(0,170,254,.11),transparent 58%),
    radial-gradient(110% 80% at 78% 92%,rgba(0,170,254,.176),transparent 62%),
    linear-gradient(198deg,#00AAFE,#FAFAF7 78%);
}
.work-card.p2 .fallback{filter:hue-rotate(-14deg) saturate(1.05)}
.work-card.p3 .fallback{filter:hue-rotate(12deg) brightness(1.06)}
.work-card.p4 .fallback{filter:hue-rotate(-26deg) saturate(.92)}
.work-card .shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 26%,transparent 42%,rgba(0,0,0,.82) 100%);
}
.work-card .stat{
  position:absolute;top:17px;left:17px;
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:rgba(250,250,247,.55);border:1px solid rgba(17,17,17,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.work-card .stat svg{width:14px;height:14px;fill:#111111;opacity:.9}
.work-card .meta{position:absolute;left:22px;right:22px;bottom:22px}
.work-card .handle{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:rgba(17,17,17,.72);
}
.work-card .title{
  font-family:var(--font-display);
  font-size:20px;font-weight:600;text-transform:none;letter-spacing:-.02em;
  margin-top:6px;line-height:1.1;
}
.work-card.p3 .meta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.work-card.p3 .title{margin-top:0}
.work-card .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:rgba(17,17,17,.2);border:1px solid rgba(17,17,17,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;scale:.84;transition:opacity .4s var(--ease),scale .4s var(--ease);
}
.work-card:hover .play{opacity:1;scale:1}
.work-card .play svg{width:16px;height:16px;fill:#111111}

/* ============================================================
   SERVICES
   ============================================================ */
.services{padding:68px 0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
  position:relative;overflow:hidden;isolation:isolate;
  padding:26px 26px 28px;min-height:452px;
  display:grid;grid-template-rows:auto auto 1fr;gap:18px;
  border-radius:var(--radius-lg);border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  transition:border-color .45s,transform .55s var(--ease);
}
.svc::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 108%,rgba(0,170,254,.092),transparent 62%);
  opacity:0;transition:opacity .5s;
}
.svc:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.2)}
.svc:hover::before{opacity:1}
.svc .top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.svc .ico{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto}
.svc .ico svg{width:100%;height:100%}
.svc .pill{
  padding:9px 14px;border-radius:100px;flex:0 0 auto;
  border:1px solid var(--stroke-2);background:#FFFFFF;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
}
.svc p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:34ch}

/* ============================================================
   FUN FACT — counters
   ============================================================ */
.facts{padding:110px 0 130px;overflow:hidden}
.facts::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(1400px,140vw);height:70%;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(0,170,254,.088),transparent 70%);
  filter:blur(40px);
}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.fact{
  padding:30px 26px 34px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#FFFFFF,#FFFFFF);
  display:flex;flex-direction:column;gap:14px;
}
.fact:nth-child(2){margin-top:44px}
.fact:nth-child(4){margin-top:44px}
.fact-num{
  display:flex;align-items:baseline;
  font-family:var(--font-display);
  font-size:clamp(40px,4.6vw,60px);font-weight:700;line-height:1;letter-spacing:-.035em;
}
.odo{display:inline-flex;overflow:hidden;line-height:1;vertical-align:baseline;height:1.16em}  /* CSS clamps to one row from the first paint; JS refines it in px */
.odo .col{display:flex;flex-direction:column;flex:0 0 auto;transition:transform 1.7s var(--ease);will-change:transform}
.odo .col span{display:block;line-height:1.05;text-align:center}
.fact-num .suffix{color:var(--accent)}
.fact-label{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:rgba(17,17,17,.78);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst{padding:110px 0}
.tst-grid{display:grid;grid-template-columns:.92fr minmax(0,1.95fr) .88fr;gap:22px;align-items:stretch}
.panel{
  border-radius:var(--radius-lg);border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
}
.rating{padding:34px 30px;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
.rating .score{
  font-family:var(--font-display);
  font-size:clamp(34px,3.6vw,46px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent);
}
.rating .cap{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:rgba(17,17,17,.8);
}
.rating .loop{margin:14px 0;opacity:.9}
.rating .loop svg{width:104px;height:52px;stroke:#111111;fill:none;stroke-width:9}
.rating .foot{
  margin-top:auto;font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted);
}
.quote-card{padding:36px 38px;display:flex;flex-direction:column;gap:26px;overflow:hidden;min-width:0}
.slides{display:flex;width:100%;min-width:0;transition:transform .75s var(--ease)}
.slide{flex:0 0 100%;width:100%;min-width:0;display:flex;flex-direction:column;gap:26px}
.who{display:flex;align-items:center;gap:14px}
.who .av{
  width:54px;height:54px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(150deg,#00AAFE,#00AAFE);border:1px solid var(--stroke-2);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:17px;font-weight:700;color:rgba(17,17,17,.5);
}
.who .n{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;text-transform:none;letter-spacing:normal;
}
.who .r{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--muted);
}
.slide blockquote{
  margin:0;font-family:var(--font-display);
  font-size:24px;font-weight:600;line-height:1.2;
  letter-spacing:-.02em;text-transform:none;
}
.slider-nav{display:flex;align-items:center;gap:14px;margin-top:auto}
.slider-nav .count{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;color:var(--muted);margin-right:auto;text-transform:none}
.slider-nav .count b{color:#111111}
.slider-nav button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--stroke-2);color:var(--muted);
  transition:background .35s,color .35s,border-color .35s;
}
.slider-nav button svg{width:14px;height:14px;fill:currentColor}
.slider-nav button:hover{background:var(--accent);color:#111111;border-color:transparent}
.mini-col{display:flex;flex-direction:column;gap:22px}
.mini{
  flex:1;padding:26px 26px 28px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,#FFFFFF,#FFFFFF);
  display:flex;flex-direction:column;gap:12px;
}
.mini .tag{color:var(--muted);font-size:14px}
.mini .fact-num{font-size:clamp(34px,3.4vw,46px);margin-top:auto}

/* ============================================================
   TOOLKIT
   ============================================================ */
.tools{padding:110px 0}
.tools-inner{
  border:1px solid var(--stroke);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  padding:56px 0;display:flex;flex-direction:column;gap:42px;overflow:hidden;
}
.tools-inner .section-head{margin:0 auto;padding:0 var(--pad);max-width:740px}

/* ============================================================
   PRICING
   ============================================================ */
.pricing{padding:68px 0}
.price-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
/* un seul curseur fait la tournée des trois boutons */
.price-cursor{
  position:absolute;width:38px;z-index:5;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(20,20,20,.182));
  animation:priceTour 13s ease-in-out infinite}
/* la pointe vise le centre de chaque bouton : 16,3 % / 50 % / 83,8 % */
@keyframes priceTour{
  0%   {left:19%;top:93%;opacity:0}
  5%   {left:19%;top:93%;opacity:1}
  24%  {left:19%;top:93%;opacity:1}
  37%  {left:53%;top:86%;opacity:1}
  55%  {left:53%;top:86%;opacity:1}
  68%  {left:87%;top:93%;opacity:1}
  90%  {left:87%;top:93%;opacity:1}
  97%  {left:87%;top:93%;opacity:0}
  100% {left:19%;top:93%;opacity:0}
}
@media (max-width:900px){.price-cursor{display:none}}
@media (prefers-reduced-motion:reduce){.price-cursor{animation:none;left:19%;top:93%}}
.plan{
  position:relative;padding:30px 26px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  display:flex;flex-direction:column;gap:17px;
  transition:border-color .45s,transform .55s var(--ease),box-shadow .55s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--stroke-2)}
.plan.pop{
  border-color:rgba(17,17,17,.275);
  background:radial-gradient(520px 300px at 50% -8%,rgba(0,170,254,.075),transparent 70%),
    linear-gradient(180deg,rgba(0,170,254,.031),#FFFFFF);
  box-shadow:0 34px 70px -40px rgba(20,20,20,.252),inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(-10px);
  overflow:hidden;
}
.plan.pop:hover{transform:translateY(-16px)}
/* un reflet traverse la formule mise en avant */
.plan.pop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(17,17,17,.07) 48%,transparent 57%);
  transform:translateX(-130%);animation:repSheen 8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.plan.pop::after{display:none}}
.plan .badge-pop{
  position:absolute;top:22px;right:22px;padding:7px 14px;border-radius:999px;
  background:var(--accent);color:#111111;
  font-family:var(--font-display);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.plan .pname{
  margin:0;
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted);
}
.plan .amount{color:var(--txt);-webkit-text-fill-color:var(--txt);
  display:flex;align-items:flex-end;gap:9px;margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px,3.6vw,48px);font-weight:700;line-height:.95;letter-spacing:-.035em;
  
  
  -webkit-text-fill-
}
.plan .amount .per{
  font-size:13.5px;font-weight:500;color:var(--muted);-webkit-text-fill-color:var(--muted);letter-spacing:0;
  text-transform:none;padding-bottom:9px;font-family:var(--font-body);
}
/* bascule d'engagement, au-dessus des cartes */
.pay-switch{
  position:relative;display:flex;justify-content:center;gap:4px;margin:0 auto 30px;
  padding:4px;border-radius:100px;width:max-content;
  border:1px solid var(--stroke);background:#FFFFFF}
.pay-switch button{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border:0;border-radius:100px;cursor:pointer;background:transparent;
  font-family:var(--font-display);font-size:14.5px;font-weight:500;
  color:var(--muted);transition:background .35s,color .35s}
.pay-switch button:hover{color:#111111}
.pay-switch button.on{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#111111;
  box-shadow:0 8px 20px -10px var(--accent)}
.pay-switch em{
  font-style:normal;font-size:12px;font-weight:600;padding:2px 7px;border-radius:100px;
  background:rgba(17,17,17,.16);letter-spacing:.02em}
.pay-switch button:not(.on) em{background:rgba(0,170,254,.22);color:var(--accent-hi)}
.excl{
  margin:-13px 0 0;font-size:12.5px;font-weight:500;color:var(--muted-2);
  font-family:var(--font-display);letter-spacing:.01em}
.excl span{color:var(--accent-hi);font-weight:700}
.pay-note{
  position:relative;max-width:74ch;margin:30px auto 0;text-align:center;
  font-style:italic;font-size:15px;line-height:1.6;color:var(--muted-2)}
.pay-note .star{color:var(--accent-hi);font-weight:700;font-style:normal}
.plan hr{border:0;border-top:1px solid var(--stroke);margin:2px 0 0;width:100%}
.plan .flabel{
  font-family:var(--font-display);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted-2);
}
.plan ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.plan li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:rgba(17,17,17,.84)}
.plan li svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;fill:var(--accent)}
.plan .btn{width:100%;justify-content:center;text-align:center}
.plan .spacer{flex:1}
/* la publicite n'est pas un quatrieme levier : une ligne sous les trois,
   pour qu'on sache des le tiers haut de la page qu'elle existe */
.svc-plus{
  margin:26px auto 0;max-width:760px;text-align:center;
  font-size:14.5px;line-height:1.6;color:var(--muted)}
.svc-plus b{color:rgba(17,17,17,.92);font-weight:600}
/* la contrepartie de l'engagement, sous la liste */
.plan .engage{
  margin:14px 0 0;padding:10px 12px;border-radius:12px;
  border:1px dashed rgba(17,17,17,.17);background:rgba(0,170,254,.07);
  font-size:13.5px;line-height:1.45;color:rgba(17,17,17,.86)}

/* le detail sous le montant : l'abonnement et la diffusion restent
   separes a l'oeil, meme si le client ne lit qu'un seul total */
.plan-detail{margin:-8px 0 0;font-size:12.5px;color:var(--muted)}

/* les commandes : on clique, le prix en haut suit */
.plan-add{
  margin:16px 0 14px;padding:14px 15px;border-radius:14px;
  border:1px solid var(--stroke);background:#FFFFFF;
  display:flex;flex-direction:column;gap:13px}
.add-titre{margin:0;font-family:var(--font-display);font-size:12.5px;
  font-weight:600;letter-spacing:.02em;color:rgba(17,17,17,.55)}
.add-ligne{display:flex;align-items:center;gap:11px;margin:0;cursor:pointer}
.add-ligne input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:19px;height:19px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(17,17,17,.28);background:#FFFFFF;
  transition:background .25s,border-color .25s}
.add-ligne input:checked{background:var(--accent);border-color:var(--accent)}
.add-ligne input:checked::after{content:"";display:block;width:100%;height:100%;
  background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E")}
.add-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;
  font-size:12.4px;line-height:1.45;color:var(--muted)}
.add-txt b{font-family:var(--font-display);font-size:13.5px;font-weight:600;color:#111111}
.add-prix{flex:0 0 auto;font-size:12.5px;color:var(--accent-hi);font-weight:600}
.add-pas{display:flex;align-items:center;gap:3px;flex:0 0 auto;
  padding:3px;border-radius:100px;border:1px solid var(--stroke);
  background:#FFFFFF}
.add-pas button{
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(17,17,17,.07);color:#111111;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:background .2s}
.add-pas button:hover:not(:disabled){background:var(--accent)}
.add-pas button:disabled{opacity:.3;cursor:default}
.add-pas .add-val{min-width:52px;text-align:center;font-family:var(--font-display);
  font-size:13.5px;font-weight:600;color:#111111}

/* le configurateur : deux compteurs et un total qui suit */
.cfg{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.cfg-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cfg-lab{display:flex;flex-direction:column;font-size:14.5px;color:rgba(17,17,17,.84)}
.cfg-lab em{font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.cfg-pas{display:flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:3px;border-radius:100px;border:1px solid var(--stroke);
  background:#FFFFFF}
.cfg-pas button{
  width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(17,17,17,.07);color:#111111;font-size:16px;line-height:1;
  display:grid;place-items:center;
  transition:background .2s,color .2s}
.cfg-pas button:hover:not(:disabled){background:var(--accent);color:#111111}
.cfg-pas button:disabled{opacity:.32;cursor:default}
.cfg-pas b{min-width:26px;text-align:center;font-family:var(--font-display);
  font-size:15px;font-weight:600;color:#111111}
.cfg-detail{margin:0;font-size:12.8px;color:var(--muted)}
.cfg-titre{margin:2px 0 0;font-family:var(--font-display);font-size:13px;
  font-weight:600;color:rgba(17,17,17,.62);letter-spacing:.02em}
.cfg-fin{margin-top:0}
.cfg-fin:empty,.cfg-fin:has(> [hidden]:only-child){display:none}
.cfg-bascule{
  margin:0;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(17,17,17,.17);background:rgba(0,170,254,.1);
  font-size:12.8px;line-height:1.5;color:rgba(17,17,17,.9)}
.cfg-hors{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* la note de bas de grille n'est plus un asterisque mais une porte de sortie */
.pay-note a{color:var(--accent-hi);text-decoration:none;border-bottom:1px solid rgba(17,17,17,.2)}
.pay-note a:hover{color:#111111;border-bottom-color:#111111}
.plan.custom{
  justify-content:center;text-align:center;align-items:center;
  background:radial-gradient(520px 280px at 50% 112%,rgba(0,170,254,.031),transparent 70%),
    linear-gradient(180deg,var(--card),#FFFFFF);
}
.plan.custom .desc{max-width:32ch}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:68px 0}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start}
/* la colonne de gauche suit la lecture : plus de vide sous le bouton,
   et l'appel à l'action reste à portée pendant qu'on lit les objections */
.faq-grid > .section-head{position:sticky;top:132px}
@media (max-width:900px){.faq-grid > .section-head{position:static}}
.faq-list{display:flex;flex-direction:column;gap:12px}
.qa{
  border:1px solid var(--stroke);border-radius:var(--radius);
  background:var(--card);overflow:hidden;transition:border-color .4s,background .4s;
}
.qa.open{border-color:rgba(17,17,17,.21);background:var(--card-2)}
.qa > button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 24px;text-align:left;
  font-family:var(--font-display);
  font-size:16px;font-weight:600;letter-spacing:-.005em;
}
.qa .ico{
  width:27px;height:27px;flex:0 0 auto;position:relative;border-radius:50%;
  border:1px solid var(--stroke-2);
  transition:transform .5s var(--ease),background .4s,border-color .4s;
}
.qa .ico::before,.qa .ico::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:1.7px;
  background:currentColor;transform:translate(-50%,-50%);
}
.qa .ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .35s}
.qa.open .ico{transform:rotate(180deg);background:var(--accent);border-color:transparent;color:#111111}
.qa.open .ico::after{opacity:0}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .ans p{margin:0;padding:0 24px 24px;color:var(--muted);font-size:14.5px;max-width:62ch}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{padding:84px 0 96px;text-align:center}
/* le calendrier prend la place de la vidéo : aucune rupture avec le fond */
.cal-wrap{
  position:relative;width:100%;max-width:920px;margin:34px auto 0;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--stroke);background:#FFFFFF}
#calBook{width:100%;min-height:520px}
/* variante mobile du calendrier : voir la media query en fin de feuille */
.cal-mobile{display:none}
#calBook iframe{width:100%!important;display:block}
.cta-note a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.cta-note a:hover{color:#111111}
.cta-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cta-bg video{width:100%;height:100%;object-fit:cover;opacity:.34;transform:scale(1.05)}
.cta-veil{
  position:absolute;inset:0;
  background:radial-gradient(70% 90% at 50% 50%,rgba(250,250,247,.5),rgba(250,250,247,.93) 78%),
    linear-gradient(180deg,var(--bg),rgba(250,250,247,.2) 30%,rgba(250,250,247,.35) 70%,var(--bg));
}
.cta::before{
  content:"";position:absolute;left:50%;top:-40px;translate:-50% 0;
  width:min(940px,94vw);height:460px;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(0,170,254,.066),transparent 66%);filter:blur(34px);
}
.cta .inner{display:flex;flex-direction:column;align-items:center;gap:24px;position:relative}
.cta h2{max-width:15ch}
.cta .lead{text-align:center}
.cta .btn{margin-top:12px}

.footer{border-top:1px solid var(--stroke);padding:64px 0 0;position:relative;overflow:hidden}
/* lueurs violettes et nacrées, plus le rouge d'origine */
.footer::before{
  content:"";position:absolute;inset:auto -10% -12% -10%;height:78%;pointer-events:none;
  background:radial-gradient(52% 100% at 10% 100%,rgba(0,170,254,.088),transparent 70%),
    radial-gradient(52% 100% at 90% 100%,rgba(0,170,254,.07),transparent 70%),
    radial-gradient(60% 90% at 50% 100%,rgba(17,17,17,.1),transparent 72%);
  filter:blur(30px);
}

/* deux façons de nous joindre, centrées, sans étiquette */
.foot-reach{
  position:relative;display:flex;justify-content:center;align-items:stretch;
  gap:18px;flex-wrap:wrap;margin-bottom:8px}
.reach{
  display:flex;align-items:center;gap:16px;
  padding:18px 26px;border-radius:18px;
  border:1px solid var(--stroke);background:#FFFFFF;
  transition:border-color .4s,background .4s,transform .5s var(--ease)}
.reach:hover{border-color:rgba(17,17,17,.25);background:rgba(0,170,254,.08);
  transform:translateY(-3px)}
.reach img{width:50px;height:50px;flex:0 0 auto;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(20,20,20,.14));
  animation:icoOrbit 7.4s ease-in-out infinite}
.reach:last-child img{animation-duration:8.6s;animation-delay:-2.4s}
.reach span{display:flex;flex-direction:column;
  font-family:var(--font-display);font-size:22px;font-weight:600;
  text-transform:none;letter-spacing:-.015em;color:#111111}
.reach em{font-style:normal;font-size:13px;font-weight:500;
  color:var(--muted-2);margin-top:3px;letter-spacing:0}

/* les objets flottent au-dessus du mot, en apesanteur */
.foot-mark{position:relative}
.foot-orbit{position:absolute;inset:0;z-index:2;pointer-events:none}
.foot-orbit > *{position:absolute;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(20,20,20,.168));
  animation:icoOrbit 8s ease-in-out infinite}
.foot-orbit > *:nth-child(2){animation-duration:9.4s;animation-delay:-1.7s}
.foot-orbit > *:nth-child(3){animation-duration:7.2s;animation-delay:-3.1s}
.foot-orbit > *:nth-child(4){animation-duration:8.8s;animation-delay:-4.6s}
.foot-orbit > *:nth-child(5){animation-duration:10s;animation-delay:-2.2s}
.foot-orbit > *:nth-child(6){animation-duration:7.8s;animation-delay:-5.4s}
.foot-orbit > *:nth-child(7){animation-duration:9s;animation-delay:-.9s}
.foot-orbit > *:nth-child(8){animation-duration:8.3s;animation-delay:-6.1s}
/* le logo Instagram est cliquable : il faut lui rendre le pointeur */
.foot-orbit a{display:block;pointer-events:auto;border-radius:50%}
.foot-orbit a img{display:block;width:100%;height:auto;object-fit:contain}
.foot-orbit a:hover{filter:brightness(1.12)}
@media (max-width:760px){.foot-orbit > *:nth-child(n+5){display:none}}

.foot-copy{
  position:relative;text-align:center;margin:26px 0 0;
  font-family:var(--font-display);
  font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:var(--muted-2)}
.foot-copy span{color:var(--accent)}
.wordmark{
  position:relative;margin:34px 0 0;padding:0;
  font-family:var(--font-display);
  font-size:clamp(74px,19.5vw,290px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.05em;line-height:.78;text-align:center;color:var(--accent-soft);
  user-select:none;
  translate:0 12%;
}

/* ============================================================
   SCROLL REVEAL + PROGRESS
   ============================================================ */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}.rv.d6{transition-delay:.48s}
.progress{
  position:fixed;left:0;top:0;height:2px;z-index:90;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));box-shadow:0 0 12px var(--accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .tst-grid{grid-template-columns:1fr 1fr}
  .mini-col{grid-column:1/-1;flex-direction:row}
}
@media (max-width:1080px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr 1fr}
  .plan.custom{grid-column:1/-1}
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .split-head{grid-template-columns:1fr;gap:20px}
  .work-card.p1{grid-column:1/7}
  .work-card.p2{grid-column:7/13}
  .work-card.p3{grid-column:2/12}
  .work-card.p4{grid-column:1/7}
  }
@media (max-width:900px){
  :root{--pad:24px}
  .nav-links{display:none}
  .menu-btn{display:flex}   /* seule nav dispo en mobile */
  .hero{padding:130px 0 70px}
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .float{display:none}
  .lit{max-width:100%}
  .tst-grid{grid-template-columns:1fr}
  .mini-col{flex-direction:row}
  .svc{min-height:390px}
}
@media (max-width:640px){
  .svc-grid,.facts-grid,.price-grid{grid-template-columns:1fr}
  .fact:nth-child(2),.fact:nth-child(4){margin-top:0}
  .work-comp{gap:20px}
  .work-card.p1,.work-card.p2,.work-card.p3,.work-card.p4,  .about{padding:90px 0}
  .work,.services,.tst,.tools,.pricing,.faq{padding:80px 0}
  .mini-col{flex-direction:column}
  .quote-card{padding:28px 24px}
  .pay-switch{width:100%;flex-direction:column;gap:6px;padding:6px;border-radius:20px}
  .pay-switch button{width:100%;justify-content:center}

  /* --- hero mobile : tout centre, resserre, et on doit deviner la suite --- */
  .hero{padding:118px 0 22px;min-height:0}
  .hero-grid{gap:24px;justify-items:center}
  .hero-copy{text-align:center}
  .hero-side{align-items:center;padding-top:0;gap:10px;width:100%}

  /* le bouton epouse son texte, le curseur tourne court */
  .btn-order{padding:12px 18px;font-size:15px;border-radius:14px}
  .cta-order.o1{margin-top:14px}
  .cta-order .cta-cursor{width:21px}
  /* la souris reste entierement dans le cadre du bouton */
  @keyframes cxmA{0%,100%{left:60%}50%{left:78%}}
  @keyframes cymA{0%,100%{top:4%}50%{top:38%}}
  @keyframes cxmB{0%,100%{left:76%}50%{left:62%}}
  @keyframes cymB{0%,100%{top:36%}50%{top:6%}}
  .o1 .cta-cursor,.o3 .cta-cursor{animation-name:cxmA,cymA}
  .o2 .cta-cursor,.o4 .cta-cursor{animation-name:cxmB,cymB}

  /* les logos tournent juste a cote du 30+, jamais plus de trois a l'ecran.
     La fenetre fait exactement trois pastilles : aucune n'est coupee. */
  .trust .ring{flex:0 0 auto;width:106px;overflow:hidden;
    -webkit-mask-image:none;mask-image:none}
  .trust .ring-track{gap:8px;padding-right:8px;animation:ringCycle 12s ease-in-out infinite}
  .trust .ring-track[aria-hidden="true"]{display:flex}
  .trust .ring .av{width:30px;height:30px;margin-left:0;border:1.5px solid rgba(17,17,17,.46)}
  @keyframes ringCycle{
    0%,20%  {transform:translateX(0)}
    25%,45% {transform:translateX(-38px)}
    50%,70% {transform:translateX(-76px)}
    75%,95% {transform:translateX(-114px)}
    100%    {transform:translateX(-152px)}
  }

  /* le compteur, colle a ses logos, avec sa legende dessous */
  .trust{max-width:none;align-items:center;gap:2px}
  .trust-row{width:auto;justify-content:center;gap:12px}
  .trust .num{font-size:40px}
  .trust-sub{align-self:center;text-align:center;font-size:12.5px}

  .foot-top{align-items:flex-start;gap:28px}
  .foot-bottom{gap:16px}
  .foot-nav{gap:26px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   WORK PAGE
   ============================================================ */
.page-head{padding:190px 0 90px;overflow:hidden}
.page-head::before{
  content:"";position:absolute;left:50%;top:-30%;translate:-50% 0;
  width:min(1150px,120vw);height:640px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,170,254,.075),transparent 72%);
  filter:blur(30px);
}
.page-head .wrap{position:relative;display:flex;flex-direction:column;gap:22px}
.page-head h1.display{font-size:clamp(40px,5.6vw,76px)}
.page-head .lead{max-width:52ch}

.projects{padding:20px 0 110px}

/* dense mosaic: tiles of different spans, tightly packed */
/* Content wall — masonry columns so ANY number of tiles packs itself.
   Adding a project = adding one <article class="tile">, nothing else to configure. */
.mosaic{columns:4;column-gap:16px}
.tile{
  position:relative;overflow:hidden;isolation:isolate;
  display:block;width:100%;margin:0 0 16px;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  border-radius:var(--radius);border:1px solid var(--stroke);
  transition:transform .55s var(--ease),border-color .4s;
}
.tile:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.25)}
/* varied tile shapes give the wall its rhythm, cycling every 5 */
.tile video{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:9/16}
.tile:nth-child(5n+2) video{aspect-ratio:4/5}
.tile:nth-child(5n+3) video{aspect-ratio:1/1}
.tile:nth-child(5n+4) video{aspect-ratio:9/13}
.tile:nth-child(5n+5) video{aspect-ratio:3/4}
.tile-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 28%,transparent 52%,rgba(0,0,0,.84) 100%);
}
.tile-fmt{
  position:absolute;top:14px;left:14px;
  padding:7px 13px;border-radius:999px;
  background:rgba(250,250,247,.55);border:1px solid rgba(17,17,17,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);font-size:12.5px;font-weight:500;
}
.tile-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,170,254,.32);border:1px solid rgba(17,17,17,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;scale:.84;transition:opacity .4s var(--ease),scale .4s var(--ease);
}
.tile:hover .tile-play{opacity:1;scale:1}
.tile-play svg{width:16px;height:16px;fill:#111111}
.tile-meta{position:absolute;left:18px;right:18px;bottom:16px}
.tile-meta .handle{
  margin:0;font-family:var(--font-display);font-size:14px;font-weight:500;color:rgba(17,17,17,.75);
}
.tile-meta .title{
  margin:4px 0 0;font-family:var(--font-display);
  font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
}

@media (max-width:1180px){.mosaic{columns:3}}
@media (max-width:900px){.page-head{padding:150px 0 60px}.mosaic{columns:2;column-gap:12px}.tile{margin-bottom:12px}.tile-meta .title{font-size:18px}}
@media (max-width:560px){.mosaic{columns:1}}

/* ============================================================
   OFFRE · MÉTHODE · TRANSPARENCE
   ============================================================ */
.svc-grid.three .svc{min-height:0}
.svc-grid.three .svc .top{justify-content:flex-start}
/* le titre vient se poser à côté du numéro */
.svc-grid.three .svc .top h3{margin:0;font-size:clamp(19px,1.6vw,23px);line-height:1.1}
.svc .idx{font-family:var(--font-display);font-weight:500;font-size:15px;
  color:var(--muted-2);letter-spacing:.01em}
.work-more{display:flex;justify-content:center;margin-top:58px}

.method{padding:30px 0 0}
/* la section se fige le temps que la lumière traverse les huit étapes */
.method-stage{position:relative;height:235vh}
.method-pin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  padding:96px 0 26px}
/* écran court ou mouvement réduit : on relâche, la séquence reste au scroll */
@media (max-height:720px),(prefers-reduced-motion:reduce){
  .method-stage{height:auto}
  .method-pin{position:static;min-height:0;display:block}
}
.steps{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 56px;list-style:none;margin:0;padding:0;
}
/* .steps est en grid : sans cette regle, l'attribut hidden du parcours
   inactif ne masque rien du tout */
.steps[hidden]{display:none}
.step{
  position:relative;isolation:isolate;
  display:flex;align-items:flex-start;gap:20px;
  padding:20px 0;border-top:1px solid var(--stroke);
}
/* la séquence se déroule au scroll : une étape s'allume à la fois */
.steps.seq .step{opacity:.14;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.steps.seq .step.on{opacity:1}
/* le trait se trace sur toute la largeur de l'étape */
.step::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hi) 60%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .75s var(--ease)}
.steps.seq .step.on::after{transform:scaleX(1)}
/* la lueur accompagne l'étape en cours puis la quitte */
.step::before{content:"";position:absolute;inset:-6px -22px;border-radius:16px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(56% 130% at 8% 50%,rgba(0,170,254,.07),transparent 74%)}
.steps.seq .step.cur::before{opacity:1}
.steps.seq .step.cur{transform:translateX(5px)}
.steps.seq .step.cur .step-n{color:#111111;text-shadow:0 0 26px rgba(20,20,20,.266)}
.step-n{transition:color .6s var(--ease),text-shadow .6s var(--ease)}
.steps.seq .step.on .step-n{color:var(--accent-hi);text-shadow:0 0 20px rgba(20,20,20,.224)}
.step-n{
  font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--accent);min-width:30px;padding-top:3px;flex:0 0 auto;
}
.step-t{
  margin:0 0 5px;font-family:var(--font-display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;
}
.step p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

.money{position:relative;margin-top:-64px;padding:68px 0}
.flux-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.flux-card{
  position:relative;padding:32px 30px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  display:flex;flex-direction:column;gap:12px;
}
.flux-card .flux-lbl{
  margin:0;font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--muted-2);
}
.flux-card h3.display{font-size:clamp(22px,2.3vw,30px);text-transform:none}
.flux-card p:last-child{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.flux-card strong{color:#111111;font-weight:600}
.flux-card.f-fee{
  border-color:rgba(17,17,17,.225);
  background:radial-gradient(420px 220px at 50% 0%,rgba(0,170,254,.04),transparent 70%),
    linear-gradient(180deg,var(--card-2),#FFFFFF);
}
.flux-card.f-fee h3.display{color:var(--accent-hi)}

@media (max-width:900px){
  .svc-grid.three{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .flux-grid{grid-template-columns:1fr}
  .method,.money{padding:80px 0}
}

/* ============================================================
   ARC 3D — sélection de cartes, section épinglée au scroll
   ============================================================ */
.arc-stage{position:relative;height:320vh}
.arc-pin{
  position:sticky;top:0;height:100vh;z-index:70;   /* au-dessus du voile (60), sous la nav (80) */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:max(0px,calc(clamp(22px,4vh,46px) - 24px));
  padding-top:clamp(0px,.6vh,14px);                /* écarte le titre de la nav */
}
.arc-pin .section-head{margin:24px 0 0;
  filter:blur(calc(var(--peek,0) * 11px));
  opacity:calc(1 - var(--peek,0) * .55)}
.arc-pin.picking .section-head{opacity:0;pointer-events:none}

/* croix de fermeture, visible seulement quand une carte est sortie */
.arc-close{
  position:absolute;top:0;left:0;                      /* le JS la pose au coin de la carte */
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(17,17,17,.09);border:1px solid rgba(17,17,17,.16);
  color:rgba(17,17,17,.85);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .35s,background .3s,transform .3s var(--ease);
}
.arc-close svg{width:11px;height:11px;fill:currentColor}
.arc-close:hover{background:var(--accent);color:#111111;transform:rotate(90deg)}
.arc-pin.picking .arc-close{opacity:1;pointer-events:auto}
.arc-wrap{position:relative;width:100vw;margin:-130px calc(50% - 50vw);
  padding:130px 0;overflow:hidden}   /* la boîte de découpe s'écarte : plus rien n'est tranché */
.arc{
  position:relative;height:clamp(370px,58vh,780px);  /* l'arc doit tenir sous le titre */
  perspective:950px;perspective-origin:50% 50%;
  transform-style:preserve-3d;
}
.arc-tile{
  position:absolute;left:50%;top:50%;
  width:clamp(158px,24vh,310px);aspect-ratio:9/16;
  padding:0;border:0;background:transparent;cursor:default;
  transform:translate(-50%,-50%);            /* JS complète la géométrie */
  transform-style:preserve-3d;
  will-change:transform,opacity;
  pointer-events:none;                       /* voir .arc.ring : visée faite en JS */
}
.arc.ring{cursor:default}
.arc.ring.over{cursor:pointer}
.arc-tile:focus-visible{outline:none}
/* la carte interne porte le visuel : le survol peut la faire avancer
   sans écraser la transformée que le JS applique au bouton */
.arc-card{
  position:absolute;inset:0;display:block;overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(17,17,17,.14);
  background:#FAFAF7;
  box-shadow:0 30px 60px -24px rgba(20,20,20,.238);
  transform:translateZ(0);
  transition:transform .45s var(--ease),box-shadow .45s,border-color .35s,filter .45s;
}
.arc-tile.hover .arc-card,
.arc-tile:focus-visible .arc-card{
  transform:translateZ(58px) scale(1.03);
  border-color:rgba(17,17,17,.35);
  box-shadow:0 22px 44px -14px rgba(20,20,20,.154);
}
.arc-card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.arc-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.82) 100%)}
.arc-name{
  position:absolute;left:14px;right:14px;bottom:13px;text-align:left;
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-body);font-size:13.5px;font-weight:500;
  letter-spacing:-.005em;line-height:1.2;color:#111111;
}
/* la pastille de l'enseigne : une vraie marque, pas une vidéo anonyme */
.arc-logo{
  width:21px;height:21px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(17,17,17,.28);
  box-shadow:0 2px 8px rgba(20,20,20,.154);
}
.arc-check{width:13px;height:13px;flex:0 0 auto;margin-left:-1px}

/* le fond s'assombrit ; la scène 3D de l'arc se compose au-dessus, donc les
   cartes restent visibles pendant que le reste de la page recule */
.arc-dim{
  position:fixed;inset:0;z-index:60;
  background:rgba(250,250,247,.88);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
}
.arc-dim.on{opacity:1;pointer-events:auto;cursor:zoom-out}

/* pendant une sélection : les autres cartes s'effacent */
.arc.has-selection .arc-tile:not(.selected) .arc-card{
  filter:brightness(.26) saturate(.5);
}
.arc.has-selection .arc-tile:not(.selected){pointer-events:none}
.arc-tile.selected .arc-card{
  border-color:rgba(17,17,17,.375);
  box-shadow:0 40px 80px -22px rgba(20,20,20,.168);
}
/* les transitions ne sont actives qu'aux changements d'état :
   pendant la rotation au scroll, le JS pilote image par image */
.arc.animating .arc-tile{transition:transform .6s var(--ease),opacity .6s var(--ease)}

/* l'anneau tourne aussi sur mobile : on garde les regles desktop,
   seules les tailles sont recalees pour un ecran etroit */
@media (max-width:1100px){
  .arc-stage{height:300vh}
  .arc{height:clamp(340px,63vh,620px)}
  .arc-tile{width:clamp(150px,24vh,270px)}
  .arc-pin .section-head{margin:14px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .arc-card,.arc-tile{transition:none}
}

/* mot encadré dans un titre */
.display .hl{
  display:inline-block;
  padding:.02em .18em .06em;
  border-radius:.16em;
  background:rgba(0,170,254,.16);
  border:2px solid rgba(17,17,17,.35);
  box-shadow:0 0 34px rgba(20,20,20,.084),inset 0 0 26px rgba(20,20,20,.05);
  color:#111111;
}

/* fond du hero : dérive lente et continue */
@keyframes silkDrift{
  0%   {transform:translateX(0)      scale(1)}
  50%  {transform:translateX(-2.2%)  scale(1.05)}
  100% {transform:translateX(0)      scale(1)}
}
@keyframes glowFloat{
  0%   {transform:translate(0,0)      scale(1)}
  50%  {transform:translate(3%,-2%)   scale(1.12)}
  100% {transform:translate(0,0)      scale(1)}
}
.hero-bg .silk{animation:silkDrift 38s ease-in-out infinite}
.hero-bg .g1{animation:glowFloat 26s ease-in-out infinite}
.hero-bg .g2{animation:glowFloat 32s ease-in-out infinite reverse}
.hero-bg .g3{animation:glowFloat 44s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .hero-bg .silk,.hero-bg .glow{animation:none}
}

/* ============================================================
   RÉSULTATS — ce que contient le reporting
   ============================================================ */
.results{padding:68px 0}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.res{
  padding:32px 30px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .45s,transform .55s var(--ease);
}
.res:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.2)}
.res-k{
  margin:0;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.16em;color:var(--accent);
}
.res h3.display{font-size:clamp(20px,2.1vw,27px);text-transform:none}
.res p:last-child{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.res-note{
  display:flex;align-items:center;gap:14px;margin:26px auto 0;max-width:760px;
  padding:18px 24px;border-radius:999px;
  border:1px solid rgba(17,17,17,.15);background:rgba(0,170,254,.08);
}
.res-note p{margin:0;color:var(--muted);font-size:15px}
.res-note strong{color:#111111;font-weight:600}
.res-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--accent);
  box-shadow:0 0 0 0 rgba(20,20,20,.168);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(20,20,20,.154)}
  70%{box-shadow:0 0 0 12px rgba(20,20,20,0)}
  100%{box-shadow:0 0 0 0 rgba(20,20,20,0)}
}

/* ============================================================
   BOÎTE À OUTILS
   ============================================================ */
.toolkit{padding:68px 0}
.tool-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.tool{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 12px;border-radius:var(--radius-lg);
  border:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--card),#FFFFFF);
  transition:border-color .45s,transform .55s var(--ease);
}
.tool:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.2)}
.tool-ico{
  position:relative;width:74px;height:74px;border-radius:19px;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 12%,rgba(17,17,17,.16),transparent 58%),
             linear-gradient(160deg,color-mix(in srgb,var(--tb) 74%,#FFFFFF 8%),var(--tb));
  color:var(--tf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(20,20,20,.112),
             0 16px 30px -16px rgba(20,20,20,.266);
  font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.02em;
  transition:transform .5s var(--ease)}
.tool-ico::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(17,17,17,.13);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
          mask-image:linear-gradient(180deg,#000,transparent 62%)}
.tool:hover .tool-ico{transform:translateY(-3px) scale(1.04)}
.tool-name{
  font-family:var(--font-display);font-size:14px;font-weight:500;
  color:rgba(17,17,17,.82);text-align:center;
}

@media (max-width:1080px){
  .res-grid{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .results,.toolkit{padding:80px 0}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .res-note{border-radius:var(--radius);align-items:flex-start}
}

/* ============================================================
   BANDEAU VIDÉO — ce qui dépasse sous le hero
   ============================================================ */
.reelstrip{padding:22px 0 90px;overflow:hidden}
.reel-track{gap:18px;padding-right:18px;animation-duration:46s}
.reel{
  position:relative;flex:0 0 auto;
  width:clamp(150px,15vw,210px);aspect-ratio:9/16;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow:0 26px 50px -24px rgba(20,20,20,.252);
  transition:transform .5s var(--ease),border-color .4s;
}
.reel:hover{transform:translateY(-8px);border-color:rgba(17,17,17,.275)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-name{
  position:absolute;left:14px;right:14px;bottom:12px;
  font-family:var(--font-display);font-size:14px;font-weight:600;color:#111111;
  text-shadow:0 2px 12px rgba(20,20,20,.238);
}
@media (max-width:640px){.reelstrip{padding:18px 0 60px}}

/* repères factuels sous le bloc de confiance */
.hero-chips{display:grid;grid-template-columns:1fr;gap:10px;list-style:none;margin:0;padding:0;width:100%;max-width:340px}
.hero-chips li{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-radius:14px;
  border:1px solid rgba(17,17,17,.16);
  background:#FFFFFF;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);font-size:15px;font-weight:500;color:rgba(17,17,17,.88);
}

/* titre du hero : la fin de phrase tourne */
.rot{position:relative;display:block}          /* hauteur figée en JS sur la variante la plus haute */
.rot-i{
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;
}
/* chaque mot arrive séparément : c'est le décalage qui accroche l'œil,
   pas le mouvement du bloc entier */
.rot-w{color:var(--txt);-webkit-text-fill-color:var(--txt);
  display:inline-block;
  opacity:0;transform:translateY(.6em) rotateX(-55deg) scale(.94);
  transform-origin:50% 100%;filter:blur(10px);
  transition:opacity .42s var(--ease),transform .62s var(--ease),filter .42s;
  
  
}
.rot-i.is-on .rot-w{opacity:1;transform:none;filter:none}
.rot-i.is-out .rot-w{
  opacity:0;transform:translateY(-.45em) scale(.96);filter:blur(10px);
  transition-duration:.26s;transition-delay:0s!important;
}
.rot{perspective:900px}
@media (prefers-reduced-motion:reduce){
  .rot-i{transition:none}
}
.chip-n{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,170,254,.22);border:1px solid rgba(17,17,17,.25);
  font-size:12px;font-weight:600;color:var(--accent-hi);
}

/* ============================================================
   DESTINATIONS DE CAMPAGNE
   ============================================================ */
.dests{padding:68px 0 32px}
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dest{
  padding:28px 26px;border-radius:16px;
  border:1px solid rgba(17,17,17,.16);
  background:#FFFFFF;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .45s,transform .55s var(--ease);
}
.dest:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.25)}
/* l'icône 3D est elle-même la tuile : plus de cadre autour */
.dest-ico{width:56px;height:56px;display:grid;place-items:center;flex:0 0 auto}
.dest-ico img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 9px 18px rgba(20,20,20,.14))}
/* les trois plateformes côte à côte, légèrement décalées */
.dest-multi{position:relative;width:114px;height:56px}
.dest-multi img{position:absolute;width:44px;height:44px}
.dest-multi img:nth-child(1){left:0;top:8px;z-index:3}
.dest-multi img:nth-child(2){left:35px;top:0;z-index:2}
.dest-multi img:nth-child(3){left:70px;top:9px;z-index:1}

/* chaque icône flotte sur un rayon de quelques pixels, jamais synchronisée */
@keyframes icoOrbit{
  0%,100%{translate:0 0;rotate:0deg}
  25%     {translate:2px -3px;rotate:1.6deg}
  50%     {translate:0 -4px;rotate:0deg}
  75%     {translate:-2px -2px;rotate:-1.6deg}
}
.dest-ico img{animation:icoOrbit 7s ease-in-out infinite}
.dest:nth-child(2) .dest-ico img{animation-duration:8.6s;animation-delay:-1.4s}
.dest:nth-child(4) .dest-ico img{animation-duration:9.2s;animation-delay:-.8s}
.dest:nth-child(5) .dest-ico img{animation-duration:8.1s;animation-delay:-3.4s}
.dest:nth-child(6) .dest-ico img{animation-duration:7.4s;animation-delay:-2s}
.dest-multi img:nth-child(2){animation-duration:8.8s;animation-delay:-1.9s}
.dest-multi img:nth-child(3){animation-duration:7.6s;animation-delay:-3.1s}
.dest h3.display{font-size:clamp(18px,1.7vw,21px);text-transform:none;line-height:1.2}
.dest p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

@media (max-width:1080px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dests{padding:80px 0}.dest-grid{grid-template-columns:1fr}}

/* ============================================================
   PAGE PARTENAIRE — STAR EATS
   palette magenta propre à Star Eats, distincte du violet shift
   ============================================================ */
.se-page{--se:#E5008F;--se-2:#8000F0;--se-soft:#FF6FD0}
.se-hero{position:relative;padding:190px 0 110px;overflow:hidden;text-align:center}
.se-glow{
  position:absolute;left:50%;top:-30%;translate:-50% 0;
  width:min(1100px,120vw);height:720px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,170,254,.079),rgba(0,170,254,.04) 55%,transparent 72%);
  filter:blur(30px);
}
.se-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.se-tag{
  padding:9px 16px;border-radius:999px;
  border:1px solid rgba(17,17,17,.2);background:rgba(17,17,17,.07);
  font-family:var(--font-display);font-size:14px;font-weight:500;
}
.se-logo{width:clamp(120px,13vw,168px);height:auto}
.se-base{color:var(--txt);-webkit-text-fill-color:var(--txt);
  margin:0;font-family:"Alegreya Sans",var(--font-display),sans-serif;
  font-style:italic;font-weight:900;font-size:clamp(38px,6vw,76px);line-height:1;
  
  
}
.se-hero .lead{text-align:center;max-width:60ch}
.se-btn{background:linear-gradient(180deg,var(--se-soft),var(--se));box-shadow:0 12px 34px -14px var(--se),inset 0 1px 0 rgba(255,255,255,.35)}
.se-btn .chev{color:var(--se)}
.se-btn:hover{box-shadow:0 18px 44px -14px var(--se)}

.se-why,.se-track,.se-cust{padding:110px 0}
.se-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.se-card{
  padding:32px 30px;border-radius:16px;
  border:1px solid var(--stroke);background:linear-gradient(180deg,var(--card),#FFFFFF);
  display:flex;flex-direction:column;gap:12px;
}
.se-card--on{
  border-color:rgba(17,17,17,.25);
  background:radial-gradient(460px 240px at 50% 0%,rgba(0,170,254,.035),transparent 70%),
             linear-gradient(180deg,var(--card-2),#FFFFFF);
}
.se-k{margin:0;font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--muted-2)}
.se-card--on .se-k{color:var(--se-soft)}
.se-card h3.display{font-size:clamp(21px,2.2vw,28px);text-transform:none;line-height:1.15}
.se-card p:last-child,.se-mini p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.se-note{text-align:center;margin:26px 0 0;color:var(--muted-2);font-size:15px}

.se-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.se-mini{
  padding:28px 26px;border-radius:16px;
  border:1px solid rgba(17,17,17,.16);background:#FFFFFF;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .45s,transform .55s var(--ease);
}
.se-mini:hover{transform:translateY(-6px);border-color:rgba(17,17,17,.25)}
.se-n{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--se-soft)}
.se-mini h3.display{font-size:clamp(18px,1.7vw,21px);text-transform:none;line-height:1.2}

.se-cust-in{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.se-cust-txt{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.se-list{display:flex;flex-direction:column;gap:16px;max-width:46ch}
.se-list li{color:var(--muted);font-size:16px;line-height:1.6;padding-left:18px;position:relative}
.se-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(140deg,var(--se-soft),var(--se-2));
}
.se-list strong{color:#111111;font-weight:600}
.se-links{margin:0;font-family:var(--font-display);font-size:15px;color:var(--muted-2)}
.se-cust-img img{width:100%;border-radius:20px;border:1px solid var(--stroke);display:block}

.se-disclose{
  max-width:56ch;margin:26px auto 0;
  font-size:14px;line-height:1.6;color:var(--muted-2);
}

@media (max-width:900px){
  .se-hero{padding:150px 0 80px}
  .se-compare,.se-grid,.se-cust-in{grid-template-columns:1fr;gap:20px}
  .se-why,.se-track,.se-cust{padding:80px 0}
}

.plan .amount{min-height:1.9em;display:flex;align-items:baseline;flex-wrap:wrap}

/* ============================== TÉMOIGNAGES ============================== */
.testis{padding:68px 0}
.testi-wall{display:flex;overflow:hidden;margin-top:46px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* défilement continu : il ne s'arrête jamais, même au survol */
.testi-track{display:flex;align-items:stretch;gap:18px;padding-right:18px;flex:0 0 auto;
  animation:slide 46s linear infinite}
.testi-card{flex:0 0 auto;width:min(370px,78vw);
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  padding:28px 26px;border-radius:20px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,#FFFFFF,#FFFFFF)}
.testi-q{font-size:16.5px;line-height:1.6;color:var(--fg);margin:0}
.testi-q::before{content:"\201C";display:block;font-family:var(--font-display);
  font-size:44px;line-height:.6;color:var(--accent);margin-bottom:12px}
.testi-who{display:flex;align-items:center;gap:12px}
.testi-logo{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(17,17,17,.16)}
.testi-n{display:block;font-size:15px;font-weight:600}
.testi-r{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* ========================= DOUBLE APPEL À L'ACTION ======================== */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-note{margin-top:18px;font-size:14.5px;color:var(--muted)}

@media (max-width:900px){.testi-grid{grid-template-columns:1fr;gap:14px}}

/* plus d'ouverture de carte : la croix et le voile ne servent plus */
.arc-close,.arc-dim{display:none}

/* Les puces du hero sont declarees plus bas que la section RESPONSIVE :
   leur reglage mobile doit donc vivre ici pour passer devant. */
@media (max-width:640px){
  .hero-chips{max-width:none;gap:8px}
  .hero-chips li{padding:10px 14px;gap:10px;border-radius:12px;font-size:13.5px;
    justify-content:center}
  .chip-n{width:19px;height:19px;font-size:11px}

  /* --- respiration : sur un ecran etroit les sections etaient plus espacees
     que sur desktop (80px contre 68px). On resserre tout d'un cran. --- */
  .section-head{margin-bottom:26px}
  .work,.services,.tst,.tools,.pricing,.faq,.dests,.testis,.results{padding:40px 0}
  .method,.money{padding:40px 0}
  .about{padding:20px 0 32px}
  .work-more{margin-top:26px}
  .cta-strip{margin-top:26px}

  /* la methode : la liste depasse la hauteur de l'ecran, donc l'epinglage
     faisait defiler la lumiere bien plus vite que le doigt. On relache. */
  .method-stage{height:auto}
  .method-pin{position:static;min-height:0;display:block;padding:0}

  /* les temoignages : cartes trop larges, on n'en voyait qu'une */
  .testi-wall{margin-top:26px}
  .testi-track{gap:12px;padding-right:12px}
  .testi-card{width:min(288px,72vw);padding:20px 18px;gap:16px;border-radius:16px}
  .testi-q{font-size:14px;line-height:1.55}
  .testi-q::before{font-size:32px;margin-bottom:8px}
  .testi-logo{width:34px;height:34px}
  .testi-n{font-size:13.5px}
  .testi-r{font-size:12px}

  /* mention legale : discrete, elle n'a pas a peser */
  .foot-copy{font-size:11.5px;margin:18px 0 0}
}

/* Le calendrier inline deplie tous les creneaux sur un ecran etroit.
   On lui substitue un bouton qui ouvre Cal en plein ecran. */
/* Le flou au scroll (--peek) donne l'impression d'un affichage casse
   sur un petit ecran : on le retire, les blocs arrivent nets. */
@media (max-width:900px){
  .about-inner,.arc-pin .section-head{filter:none}
}

@media (max-width:900px){
  .cal-wrap{display:none}
  .cal-mobile{display:flex;flex-direction:column;align-items:center;gap:16px;margin:30px auto 0}
  .cal-mobile-t{margin:0;font-size:14px;color:var(--muted);text-align:center}
}

/* ============================================================
   DERNIERS CALAGES MOBILE
   ============================================================ */
@media (max-width:900px){
  /* Le socle epingle centrait son contenu : 132px de vide au-dessus du titre.
     On le pose en haut, juste sous la navbar. */
  .arc-pin{justify-content:flex-start;padding-top:76px}

  /* .money remonte de 64px sur desktop pour mordre sur la methode ; sur mobile
     la methode n'est plus epinglee, ce retrait collait les deux blocs. */
  .money{margin-top:0}

  /* Garde-fou : plus aucun deplacement lateral possible, quoi qu'il arrive.
     clip (et non hidden) ne cree pas de conteneur de defilement, donc les
     sections epinglees continuent de fonctionner. */
  html,body{overflow-x:clip}
}
@media (max-width:640px){
  /* la phrase tenait sur deux lignes */
  .cta-strip p{font-size:13px}
}

/* ============================================================
   RESEAUX SOCIAUX SUR MOBILE
   ============================================================ */
/* Les trois logos du hero derivent aussi sur mobile, mais cantonnes
   sous le bloc de texte (la borne haute est posee en JS). */
@media (max-width:900px){
  .float{display:block;width:58px;height:58px}
  .float.f1{width:62px;height:62px}
  .float.f2{width:56px;height:56px}
  .float.f3{width:50px;height:50px}
}
/* Dans le footer on ne garde que les trois reseaux : Insta et TikTok
   a gauche du mot SHIFT, Snap cale a droite. */
@media (max-width:760px){
  .foot-orbit > *{display:none}
  .foot-orbit > *:nth-child(1),
  .foot-orbit > *:nth-child(3),
  .foot-orbit > *:nth-child(5){display:block}
  .foot-orbit > *:nth-child(1){left:5%!important;top:9%!important;width:52px!important}
  .foot-orbit > *:nth-child(3){left:23%!important;top:60%!important;width:46px!important}
  .foot-orbit > *:nth-child(5){left:78%!important;top:14%!important;width:48px!important}
}

/* ============================================================
   PAGE STAR EATS — ramenee dans l'ADN du site
   Le rose reste la couleur de Star Eats, mais il n'habille plus
   la page : il ne sert qu'a marquer la carte Star Eats.
   ============================================================ */
.se-hero{padding:152px 0 60px}
.se-hero-in{gap:18px}
.se-hero .display{font-size:clamp(34px,5.2vw,72px);max-width:16ch}
.se-hero .lead{max-width:56ch}
.se-glow{background:radial-gradient(closest-side,rgba(0,170,254,.075),rgba(0,170,254,.022) 55%,transparent 74%)}
.se-mark{display:flex;align-items:center;justify-content:center;margin:2px 0}
.se-mark .se-logo{width:clamp(104px,10vw,138px);height:auto}
.se-why,.se-track{padding:68px 0}
.se-card--on{
  border-color:rgba(17,17,17,.21);
  background:radial-gradient(420px 220px at 50% 0%,rgba(0,170,254,.033),transparent 70%),
    linear-gradient(180deg,var(--card-2),#FFFFFF);
}
.se-disclose{max-width:62ch;margin:26px auto 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--muted-2)}
@media (max-width:900px){
  .se-hero{padding:118px 0 36px}
  .se-why,.se-track{padding:40px 0}
  .se-compare{grid-template-columns:1fr;gap:14px}
}

/* ============================================================
   PASTILLE DE CONTACT — en bas a droite, ouvre WhatsApp
   ============================================================ */
.helper{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:flex;align-items:center;gap:12px;
  padding:9px 18px 9px 9px;border-radius:100px;
  border:1px solid rgba(17,17,17,.16);
  background:linear-gradient(180deg,rgba(0,170,254,.92),rgba(250,250,247,.94));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -16px rgba(20,20,20,.238),0 0 0 1px rgba(255,255,255,.04) inset;
  color:#111111;text-decoration:none;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.helper:hover{transform:translateY(-3px);
  border-color:rgba(17,17,17,.3);
  box-shadow:0 24px 54px -16px rgba(20,20,20,.14)}
.helper-ava{position:relative;flex:0 0 auto;width:44px;height:44px}
.helper-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  border:1px solid rgba(17,17,17,.16)}
.helper-dot{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;
  background:#00AAFE;border:2px solid rgba(17,17,17,.5)}
.helper-txt{display:flex;flex-direction:column;line-height:1.25;
  font-family:var(--font-display);font-size:13px;color:var(--muted)}
.helper-txt b{font-size:14.5px;font-weight:600;color:#111111}
@media (max-width:640px){
  .helper{right:14px;bottom:14px;gap:10px;padding:7px 15px 7px 7px}
  .helper-ava{width:38px;height:38px}
  .helper-txt{font-size:11.5px}
  .helper-txt b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.helper{transition:none}}

/* ============================================================
   STAR EATS — meme energie que la home, mais en rose
   On bascule les variables d'accent : tout ce qui est violet
   sur le site devient rose sur cette page.
   ============================================================ */
.se-page{--accent:#E5008F;--accent-hi:#FF4FB8;--accent-soft:#FF9BD8}
.se-page .display .hl{
  background:rgba(0,170,254,.16);
  border-color:rgba(17,17,17,.35);
  box-shadow:0 0 34px rgba(20,20,20,.095),inset 0 0 26px rgba(20,20,20,.056);
  color:#111111;
}
.se-page .btn-order{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent) 52%,#00AAFE);
  box-shadow:0 14px 34px -14px var(--accent),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 0 rgba(20,20,20,.14);
}
.se-page .btn-order:hover{box-shadow:0 20px 44px -14px var(--accent),
  inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(20,20,20,.14)}
.se-glow{background:radial-gradient(closest-side,rgba(0,170,254,.075),rgba(0,170,254,.031) 55%,transparent 74%)}

/* le hero prend la structure de la home : cale a gauche, titre plein cadre */
.se-hero{padding:170px 0 78px;text-align:left}
.se-hero-in{align-items:flex-start;gap:20px}
.se-hero .display{font-size:clamp(38px,6.6vw,92px);max-width:14ch;line-height:.98}
.se-hero .lead{text-align:left;max-width:52ch}
.se-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:100px;
  border:1px solid rgba(17,17,17,.21);
  background:rgba(0,170,254,.12);
  font-family:var(--font-display);font-size:14px;font-weight:500;color:#111111;
}
.se-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-hi);
  box-shadow:0 0 12px var(--accent-hi)}
/* l'icone Star Eats vole un peu plus grande que les autres */
.se-float-logo{width:124px!important;height:124px!important}

@media (max-width:900px){
  .se-hero{padding:120px 0 40px;text-align:center}
  .se-hero-in{align-items:center;gap:16px}
  .se-hero .display{max-width:none}
  .se-hero .lead{text-align:center}
  .se-float-logo{width:76px!important;height:76px!important}
}
/* les icones volantes portaient une ombre violette : elle passe au rose ici */
.se-page .float{filter:drop-shadow(0 26px 46px rgba(20,20,20,.154))}
/* Sur mobile le hero est court : les logos passent sur le texte.
   On les laisse voler, mais en retrait. */
@media (max-width:900px){
  .se-page .float{opacity:.38}
}

/* ============================================================
   STAR EATS — le fond du hero, identique a la home mais en rose
   Meme structure (degrade + plaque + halos + soie + vignette),
   seules les couleurs changent.
   ============================================================ */
.se-page .hero-bg{
  background:radial-gradient(ellipse 78% 76% at 44% 44%,
    #00AAFE 0%,#00AAFE 20%,#00AAFE 42%,#00AAFE 63%,#FAFAF7 82%,#FAFAF7 100%);
}
.se-page .hero-bg .g1{background:radial-gradient(circle,rgba(0,170,254,.075),transparent 68%)}
.se-page .hero-bg .g2{background:radial-gradient(circle,rgba(0,170,254,.092),transparent 70%)}
.se-hero{position:relative;isolation:isolate;overflow:hidden}
/* « Star Eats » se coupait en deux lignes dans la barre de navigation */
.nav-links a,.drawer a{white-space:nowrap}
/* Ces deux sections n'ont pas d'icone (--ico) : la pastille de l'eyebrow
   se rendait en aplat rose. On la retire. */
.se-why .eyebrow::before,.se-track .eyebrow::before{display:none}

/* ============================================================
   STAR EATS — hero epure : une seule icone, grande, a droite,
   qui respire au lieu de voler.
   ============================================================ */
.se-icon{
  position:absolute;right:7%;top:50%;translate:0 -50%;
  width:min(340px,26vw);height:auto;z-index:1;pointer-events:none;
  filter:drop-shadow(0 44px 76px rgba(20,20,20,.14));
  animation:seRespire 9s ease-in-out infinite;
}
@keyframes seRespire{
  0%,100%{transform:translateY(-9px) rotate(-2.2deg)}
  50%    {transform:translateY(9px)  rotate(2.2deg)}
}
/* le badge ferme le bloc : petit, discret, au-dessous du texte */
.se-hero-in .se-badge{margin-top:6px;padding:7px 15px;font-size:13px}
@media (prefers-reduced-motion:reduce){.se-icon{animation:none}}
@media (max-width:900px){
  /* sur mobile l'icone revient dans le flux, sous le texte */
  .se-icon{position:static;translate:none;width:150px;margin:6px auto 0;display:block}
  .se-hero-in{align-items:center}
}

/* ============================================================
   STAR EATS — le badge est une chip du hero de la home,
   meme boite, meme verre depoli, simplement sans le numero.
   ============================================================ */
.se-badge{
  gap:0;
  padding:12px 18px;border-radius:14px;
  border:1px solid rgba(17,17,17,.16);
  background:#FFFFFF;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);
  font-size:15px;font-weight:500;letter-spacing:normal;text-transform:none;
  color:rgba(17,17,17,.88);
}
.se-badge::before{display:none}
.se-hero-in .se-badge{margin-top:10px;padding:12px 18px;font-size:15px}

/* ============================================================
   STAR EATS — plus un seul violet : halos d'ambiance, lueurs,
   bordures et survols suivent l'accent rose de la page.
   ============================================================ */
.se-page .amb .a1{
  background:radial-gradient(closest-side,rgba(0,170,254,.075),rgba(0,170,254,.026) 52%,transparent 76%)}
.se-page .amb .a2{
  background:radial-gradient(closest-side,rgba(0,170,254,.07),rgba(0,170,254,.024) 52%,transparent 76%)}
.se-page .amb .a3{
  background:radial-gradient(closest-side,rgba(0,170,254,.057),rgba(0,170,254,.022) 52%,transparent 76%)}

/* la lueur au-dessus du bloc de prise de rendez-vous */
.se-page .cta::before{
  background:radial-gradient(circle at 50% 0%,rgba(0,170,254,.066),transparent 66%)}
/* les deux halos qui remontent du pied de page */
.se-page .footer::before{
  background:radial-gradient(52% 100% at 10% 100%,rgba(0,170,254,.088),transparent 70%),
    radial-gradient(52% 100% at 90% 100%,rgba(0,170,254,.066),transparent 70%),
    linear-gradient(180deg,transparent,#FFFFFF);
}
/* le bouton principal finissait sur un violet fonce */
.se-page .btn-order{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent) 52%,#00AAFE)}
/* les cartes de contact du pied de page */
.se-page .reach:hover{border-color:rgba(17,17,17,.25);background:rgba(0,170,254,.08)}
/* la pastille « Une question ? » en bas a droite */
.se-page .helper{
  border-color:rgba(17,17,17,.17);
  background:linear-gradient(180deg,rgba(250,250,247,.92),rgba(250,250,247,.94))}
.se-page .helper:hover{
  border-color:rgba(17,17,17,.31);
  box-shadow:0 24px 54px -16px rgba(20,20,20,.14)}
.se-page .helper-dot{border-color:rgba(17,17,17,.5)}
/* les trois cartes de suivi */
.se-page .dest:hover{border-color:rgba(17,17,17,.25)}
/* la lueur du hero gardait un fond violet en second plan */
.se-page .se-glow{
  background:radial-gradient(closest-side,rgba(0,170,254,.075),rgba(0,170,254,.029) 55%,transparent 74%)}

/* ============================================================
   STAR EATS — le visuel du hero : le telephone detoure,
   et le logo pose par-dessus, en debord sur l'ecran.
   ============================================================ */
.se-hero{min-height:min(780px,88vh)}
.se-visuel{
  position:absolute;right:5.5%;top:50%;translate:0 -50%;
  width:min(352px,29vw);z-index:1;pointer-events:none;
}
/* une lueur ronde derriere l'appareil : il se detache du fond */
.se-visuel-halo{
  position:absolute;left:52%;top:50%;translate:-50% -50%;
  width:170%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,170,254,.088),rgba(0,170,254,.029) 54%,transparent 76%);
  filter:blur(22px);
}
.se-phone{
  position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 58px 74px rgba(20,20,20,.174))
         drop-shadow(0 22px 58px rgba(20,20,20,.112));
  animation:sePhone 11s ease-in-out infinite;
}
@keyframes sePhone{
  0%,100%{transform:translateY(-8px) rotate(-.6deg)}
  50%    {transform:translateY(8px)  rotate(.6deg)}
}
/* le logo deborde en haut a gauche : il se pose sur l'appareil */
.se-visuel .se-icon{
  position:absolute;left:-19%;top:7%;right:auto;bottom:auto;
  translate:none;margin:0;width:47%;height:auto;z-index:2;display:block;
  filter:drop-shadow(0 30px 44px rgba(20,20,20,.168))
         drop-shadow(0 12px 34px rgba(20,20,20,.174));
  animation:seRespire 9s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .se-phone,.se-visuel .se-icon{animation:none}
}
@media (max-width:900px){
  .se-hero{min-height:0;display:block}
  /* relative, pas static : le logo est positionne par rapport au visuel */
  .se-visuel{position:relative;top:auto;right:auto;translate:none;
    width:min(228px,58vw);margin:18px auto 0}
  .se-visuel .se-icon{left:-13%;top:5%;width:46%}
  .se-visuel-halo{width:150%;filter:blur(16px)}
}

/* le visuel est haut : on le borne aussi par la hauteur de fenetre,
   et on reserve au texte une colonne qui ne le touche jamais */
@media (min-width:901px){
  .se-hero{min-height:min(716px,82vh);padding:152px 0 70px}
  .se-visuel{width:min(206px,16.5vw,21vh)}
  /* « pas une commission » doit tenir sur une seule ligne : plus de bride
     de largeur sur le titre, et un corps calibre pour s'arreter avant le
     visuel (mesure a 1280 : le logo commence a 869, le titre finit a 811). */
  .se-hero-in{padding-right:0}
  .se-hero .display{font-size:clamp(38px,4.7vw,76px);max-width:none}
  .se-hero .lead{max-width:48ch}
}

/* ============================================================
   PAGES LEGALES — mentions, CGV, confidentialite.
   Une colonne de lecture, rien d'autre.
   ============================================================ */
.lg{position:relative;padding:150px 0 96px}
.lg-wrap{max-width:820px}
.lg-kicker{
  font-family:var(--font-display);font-size:14px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi);margin:0 0 14px}
.lg h1.display{font-size:clamp(34px,4.4vw,58px);margin:0}
.lg-maj{margin:14px 0 0;font-size:14px;color:var(--muted-2)}
.lg-corps{margin-top:44px}
.lg-corps h2{
  font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.3;
  color:#111111;margin:44px 0 14px;letter-spacing:-.01em}
.lg-corps h2:first-child{margin-top:0}
.lg-corps p,.lg-corps li{font-size:16px;line-height:1.78;color:var(--muted)}
.lg-corps p{margin:0 0 14px}
.lg-corps ul{margin:0 0 18px;padding-left:20px}
.lg-corps li{margin-bottom:9px}
.lg-corps strong{color:rgba(17,17,17,.94);font-weight:600}
.lg-corps a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.lg-corps a:hover{color:#111111}
.lg-chapo{font-size:17.5px!important;color:rgba(17,17,17,.8)!important;
  padding-bottom:12px;border-bottom:1px solid var(--stroke);margin-bottom:30px!important}
/* les tableaux debordent plutot que d'ecraser la page */
.lg-table{width:100%;border-collapse:collapse;margin:8px 0 22px;display:block;overflow-x:auto}
.lg-table th,.lg-table td{
  text-align:left;vertical-align:top;padding:12px 16px;
  border-bottom:1px solid var(--stroke);font-size:15px;line-height:1.6;color:var(--muted)}
.lg-table th{
  font-family:var(--font-display);font-weight:600;color:#111111;font-size:14px;
  border-bottom-color:var(--stroke-2);white-space:nowrap}
.lg-table td:first-child{color:rgba(17,17,17,.9);font-weight:500;white-space:nowrap}
/* les mentions qu'il reste a completer : visibles, impossibles a oublier */
.lg-fill{
  display:inline-block;padding:1px 9px;border-radius:6px;
  background:rgba(0,170,254,.14);border:1px solid rgba(17,17,17,.21);
  color:#111111;font-size:.92em;font-weight:500}
@media (max-width:900px){
  .lg{padding:112px 0 64px}
  .lg-corps{margin-top:32px}
  .lg-corps h2{font-size:19px;margin:34px 0 12px}
  .lg-corps p,.lg-corps li{font-size:15.5px;line-height:1.72}
}

/* le bas du pied de page : les liens legaux a gauche, la mention au centre */
.foot-bas{display:flex;align-items:center;gap:20px;margin-top:26px;padding-bottom:22px}
.foot-legal,.foot-vide{flex:1 1 0;min-width:0}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.foot-legal a{
  font-family:var(--font-display);font-size:12.5px;font-weight:500;
  color:var(--muted-2);text-decoration:none;transition:color .3s var(--ease)}
.foot-legal a:hover{color:#111111}
.foot-bas .foot-copy{margin:0;flex:0 0 auto}
@media (max-width:900px){
  .foot-bas{flex-direction:column;gap:12px;margin-top:20px}
  .foot-vide{display:none}
  .foot-legal{justify-content:center;gap:14px}
  .foot-legal a{font-size:11.5px}
}

/* le visuel rentre vers le centre : il collait au bord de la fenetre */
@media (min-width:901px){
  .se-visuel{right:12%}
}
/* le curseur du hero, en rose, calibre pour le bouton */
.se-hero .cta-order.o1{margin-top:14px}

/* ============================================================
   STAR EATS — le logo et l'appel a l'action se posent SUR
   l'appareil : un seul bloc, pas trois elements cote a cote.
   ============================================================ */
.se-visuel{--vis:min(228px,58vw)}
.se-pose{
  position:absolute;left:calc(var(--vis) * -0.26);top:31%;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  pointer-events:auto;
}
.se-visuel .se-icon{
  position:static;translate:none;margin:0;display:block;
  width:calc(var(--vis) * .46);height:auto;
  filter:drop-shadow(0 30px 44px rgba(20,20,20,.168))
         drop-shadow(0 12px 34px rgba(20,20,20,.174));
  animation:seRespire 9s ease-in-out infinite;
}
.se-pose .btn-order{
  padding:13px 22px;font-size:15px;border-radius:14px;
  box-shadow:0 18px 38px -12px rgba(20,20,20,.21),
             0 10px 30px -10px var(--accent),
             inset 0 1px 0 rgba(255,255,255,.4),
             inset 0 -2px 0 rgba(20,20,20,.14);
}
.se-pose .cta-cursor{width:28px}
@media (min-width:901px){
  .se-visuel{--vis:min(292px,23vw,30vh);width:var(--vis);right:13%}
  .se-pose{top:34%}
  .se-pose .btn-order{padding:15px 26px;font-size:16px}
}
@media (max-width:900px){
  .se-visuel{width:var(--vis)}
  .se-pose{left:calc(var(--vis) * -0.20);top:28%}
}

/* ============================================================
   STAR EATS — reglages du hero : appareil un peu plus petit et
   ramene vers le centre, bouton pose a plat sur l'ecran.
   ============================================================ */
@media (min-width:901px){
  .se-hero{min-height:min(668px,78vh);padding:150px 0 62px}
  .se-visuel{--vis:min(268px,21vw,27vh);right:17%}
  /* la section suivante remonte : le trou sous l'appareil etait trop grand */
  .se-why{padding-top:38px}
}
/* le bouton n'est plus a plat sur l'ecran : il se couche dans la perspective
   de l'appareil, comme un element pose dessus */
.se-pose{perspective:820px}
.se-pose .cta-order{
  transform-origin:left center;
  transform:rotateY(-17deg) rotateX(7deg) rotate(-3.5deg);
}
.se-pose .btn-order{
  box-shadow:0 26px 46px -16px rgba(20,20,20,.224),
             0 12px 30px -8px var(--accent),
             inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -2px 0 rgba(20,20,20,.154);
}
@media (max-width:900px){
  .se-why{padding-top:26px}
}

/* « L'appli de commande » est plus longue que l'ancien titre : le corps
   est recalibre pour que la ligne s'arrete avant le logo pose sur l'ecran. */
@media (min-width:901px){
  .se-hero .display{font-size:clamp(36px,3.85vw,62px)}
  .se-visuel{right:15%}
}

/* L'appareil etait cale sur un pourcentage de la fenetre : plus l'ecran est
   large, plus il s'eloignait du texte. On l'accroche desormais au bord de la
   colonne de contenu, avec un decalage fixe : l'ecart ne bouge plus. */
@media (min-width:901px){
  .se-visuel{right:calc((100% - min(1200px,92vw)) / 2 + 130px)}
}

/* ============================================================
   STAR EATS — plus de neon rose autour de l'appareil : la lueur
   deposait une tache sur le degrade du fond. On garde une ombre
   neutre, qui pose l'objet sans salir l'arriere-plan.
   ============================================================ */
.se-visuel-halo{display:none}
.se-phone{
  filter:drop-shadow(0 44px 62px rgba(20,20,20,.174))
         drop-shadow(0 14px 26px rgba(20,20,20,.118));
}
.se-visuel .se-icon{
  filter:drop-shadow(0 26px 38px rgba(20,20,20,.174))
         drop-shadow(0 8px 16px rgba(20,20,20,.112));
}
.se-pose .btn-order{
  box-shadow:0 26px 44px -18px rgba(20,20,20,.238),
             0 8px 18px -8px rgba(20,20,20,.168),
             inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -2px 0 rgba(20,20,20,.154);
}

/* on serre encore le bloc contre le texte, et le logo se fait plus discret */
@media (min-width:901px){
  .se-visuel{right:calc((100% - min(1200px,92vw)) / 2 + 185px)}
}
.se-visuel .se-icon{width:calc(var(--vis) * .38)}

/* entre 901 et 1200 px, le chapo frole le logo : on le resserre par securite */
@media (min-width:901px) and (max-width:1200px){
  .se-hero .lead{max-width:42ch}
}

/* ------------------------------------------------------------
   Liens legaux masques temporairement (les pages restent en
   ligne : /mentions-legales, /cgv, /confidentialite).
   Pour les remontrer : supprimer ce bloc.
   ------------------------------------------------------------ */
.foot-legal,.foot-vide{display:none}
.foot-bas{justify-content:center}

/* ============================================================
   SCROLL — correction des bandes noires au retour en haut.

   Les trois lueurs de la hero cumulaient un flou de 90 px ET une
   animation d'echelle. Un flou n'est pas une transformation : le
   navigateur devait donc reconstruire un tampon floute plein ecran
   a chaque image, en boucle. Ajoutee au melange « overlay » de la
   texture et du grain, la hero entiere se redessinait en continu ;
   pendant un scroll rapide le compositeur ne suivait plus et
   laissait des tuiles vides.

   La douceur passe desormais dans le degrade lui-meme (un degrade
   radial est deja lisse, le flou n'apportait presque rien) et
   chaque lueur obtient sa propre couche : l'animation redevient
   une simple transformation, gratuite pour le compositeur.
   ============================================================ */
.hero-bg .glow{filter:none;will-change:transform}
.hero-bg .g1{background:radial-gradient(circle,
  rgba(0,170,254,.075) 0%,rgba(0,170,254,.046) 28%,
  rgba(0,170,254,.018) 52%,transparent 74%)}
.hero-bg .g2{background:radial-gradient(circle,
  rgba(0,170,254,.088) 0%,rgba(0,170,254,.055) 28%,
  rgba(0,170,254,.02) 54%,transparent 76%)}
.hero-bg .g3{background:radial-gradient(circle,
  rgba(250,250,247,.82) 0%,rgba(250,250,247,.52) 32%,
  rgba(250,250,247,.18) 58%,transparent 78%)}
/* la voile animee reste elle aussi sur sa propre couche */
.hero-bg .silk{will-change:transform}
/* meme traitement pour la declinaison rose de Star Eats */
.se-page .hero-bg .g1{background:radial-gradient(circle,
  rgba(0,170,254,.07) 0%,rgba(0,170,254,.044) 28%,
  rgba(0,170,254,.015) 52%,transparent 74%)}
.se-page .hero-bg .g2{background:radial-gradient(circle,
  rgba(0,170,254,.088) 0%,rgba(0,170,254,.055) 28%,
  rgba(0,170,254,.02) 54%,transparent 76%)}
/* la nappe fixe n'est pas animee : la promotion par translateZ suffit,
   le will-change permanent ne faisait qu'immobiliser de la memoire */
.amb{will-change:auto}

/* ============================================================
   « LES PUBS » — deux creatives empilees comme deux cartes.
   Une photo, une video. Celle de derriere depasse : on comprend
   au premier coup d'oeil qu'il y en a plusieurs. Toutes les trois
   secondes, celle de dessous passe devant.
   ============================================================ */
/* le fond floute sort des cartes : il n'y en a plus qu'un pour la tuile */
.vis-ads > .ads-bg{position:absolute;inset:0;z-index:0}
.ads-deck{position:absolute;inset:0;z-index:1}
.ads-deck .ads-slide{position:absolute;inset:0;opacity:1}
.ads-deck .ads-slide .ads-frame{
  transition:transform .9s var(--ease),filter .9s var(--ease),box-shadow .9s var(--ease);
}
.ads-deck .ads-slide.devant{z-index:2}
.ads-deck .ads-slide.derriere{z-index:1}
/* devant : plein cadre, nette */
.ads-deck .ads-slide.devant .ads-frame{transform:none;filter:none}
/* derriere : decalee, inclinee, un peu plus petite et assombrie */
.ads-deck .ads-slide.derriere .ads-frame{
  transform:translateX(52px) rotate(6.5deg) scale(.88);
  filter:brightness(.56) saturate(.85);
  box-shadow:0 12px 26px -10px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.1);
}
/* la video remplit son cadre comme l'image remplit le sien */
.ads-frame video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .ads-deck .ads-slide .ads-frame{transition:none}
}
@media (max-width:900px){
  .ads-deck .ads-slide.derriere .ads-frame{transform:translateX(38px) rotate(6deg) scale(.88)}
}

/* ============================================================
   « LE SUIVI » — le rapport devient lisible.
   L'ancien visuel montrait une courbe sans un seul chiffre, avec
   une legende de trois series pour une seule ligne tracee : on ne
   comprenait pas ce qu'on regardait. On montre maintenant les deux
   seuls nombres qui interessent un restaurateur, et le rapport
   entre les deux se lit d'un coup d'oeil dans la longueur des barres.
   ============================================================ */
.vis-track{gap:14px}
.trk-lignes{display:flex;flex-direction:column;gap:16px;flex:1;justify-content:center}
.trk-l-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.trk-l-top span{font-size:12px;color:var(--muted-2);line-height:1.3}
.trk-l-top b{font-family:var(--font-display);font-size:19px;font-weight:600;
  color:rgba(17,17,17,.9);letter-spacing:-.01em;white-space:nowrap}
.trk-l-top b.trk-fort{font-size:23px;color:#111111}
.trk-jauge{display:block;height:9px;border-radius:99px;
  background:rgba(17,17,17,.07);overflow:hidden}
.trk-jauge-in{display:block;height:100%;border-radius:99px}
.trk-out{background:linear-gradient(90deg,rgba(17,17,17,.3),rgba(17,17,17,.16))}
.trk-in{background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  box-shadow:0 0 18px rgba(20,20,20,.14)}
.trk-pied{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;
  padding-top:11px;border-top:1px solid var(--stroke);
  font-size:12px;color:var(--muted-2)}
.trk-pied b{color:rgba(17,17,17,.92);font-weight:600}
@media (max-width:900px){
  .trk-l-top span{font-size:11.5px}
  .trk-l-top b{font-size:17px}
  .trk-l-top b.trk-fort{font-size:21px}
  .trk-pied{font-size:11.5px}
}

/* le taux de transformation, juste sous sa jauge */
.trk-note{display:block;margin-top:6px;font-size:11px;color:var(--muted-2);opacity:.85}
.trk-pied span:nth-child(2n){text-align:right}

/* le contenu du rapport arrivait a 2 px du bord de la tuile : on desserre */
.vis-track{gap:10px}
.trk-lignes{gap:13px}
.trk-l-top{margin-bottom:7px}
.trk-note{margin-top:5px}
.trk-pied{padding-top:9px;gap:6px 10px;font-size:11.5px}

/* ============================================================
   « LE SUIVI » — finition. Hierarchie typographique nette :
   l'intitule en petites capitales espacees, le nombre en grand
   chiffre tabulaire, la jauge fine dessous. Le pied devient
   trois colonnes valeur / libelle.
   ============================================================ */
.vis-track{
  padding:16px 17px 15px;gap:0;
  background:linear-gradient(180deg,#FFFFFF,#FFFFFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.trk-head{font-size:12.5px}
.trk-tag{background:#FFFFFF;border:1px solid rgba(17,17,17,.14);
  color:rgba(17,17,17,.72);letter-spacing:.02em}

.trk-lignes{flex:1;justify-content:center;gap:22px}
.trk-l{display:block}
.trk-l-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:2px}
.trk-lab{
  font-size:10px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(17,17,17,.48);line-height:1.4}
.trk-taux{
  font-style:normal;font-family:var(--font-display);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--accent-hi)}
.trk-val{
  display:block;margin-bottom:9px;
  font-family:var(--font-display);font-size:29px;font-weight:600;
  letter-spacing:-.028em;line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  color:rgba(17,17,17,.72)}
.trk-val.trk-fort{color:#111111;text-shadow:0 0 30px rgba(20,20,20,.126)}

.trk-jauge{display:block;height:5px;border-radius:99px;
  background:rgba(17,17,17,.07);overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(20,20,20,.126)}
.trk-out{background:linear-gradient(90deg,rgba(17,17,17,.26),rgba(17,17,17,.13))}
.trk-in{background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  box-shadow:0 0 14px rgba(20,20,20,.196)}

/* un filet degrade plutot qu'un trait plat */
.trk-rule{display:block;height:1px;margin:16px 0 13px;
  background:linear-gradient(90deg,rgba(17,17,17,.16),#FFFFFF)}

.trk-pied{display:grid;grid-template-columns:repeat(3,1fr);gap:0 10px;
  padding-top:0;border-top:0}
.trk-pied span{display:flex;flex-direction:column;gap:3px;min-width:0}
.trk-pied span:nth-child(2){text-align:center;align-items:center}
.trk-pied span:nth-child(3){text-align:right;align-items:flex-end}
.trk-pied b{
  font-family:var(--font-display);font-size:15.5px;font-weight:600;
  letter-spacing:-.02em;color:rgba(17,17,17,.94);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.trk-pied i{
  font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.075em;
  text-transform:uppercase;color:rgba(17,17,17,.42);white-space:nowrap}

@media (max-width:900px){
  .vis-track{padding:14px 14px 13px}
  .trk-val{font-size:26px}
  .trk-lignes{gap:18px}
  .trk-pied b{font-size:14px}
  .trk-pied i{font-size:9px;letter-spacing:.06em}
}

/* ------------------------------------------------------------
   « Le suivi » — retour a la disposition validee : l'intitule a
   gauche, le chiffre a droite sur la meme ligne, la jauge dessous.
   Les capitales espacees prenaient toute la largeur et laissaient
   un grand vide a droite du nombre.
   ------------------------------------------------------------ */
.trk-lignes{gap:19px}
.trk-l-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:8px}
.trk-lab{
  font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--muted-2);line-height:1.35}
.trk-val{
  display:inline;margin:0;
  font-family:var(--font-display);font-size:21px;font-weight:600;
  letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;
  color:rgba(17,17,17,.78)}
.trk-val.trk-fort{font-size:24px;color:#111111;text-shadow:0 0 26px rgba(20,20,20,.112)}
.trk-jauge{height:6px}
.trk-note{margin-top:7px;font-size:11px;color:var(--muted-2);opacity:.8}
.trk-rule{margin:15px 0 12px}
.trk-pied i{text-transform:none;letter-spacing:0;font-size:11px;
  color:rgba(17,17,17,.46)}
.trk-pied b{font-size:16px}
@media (max-width:900px){
  .trk-lab{font-size:11.5px}
  .trk-val{font-size:19px}
  .trk-val.trk-fort{font-size:22px}
  .trk-pied b{font-size:14.5px}
  .trk-pied i{font-size:10.5px}
}

/* ============================================================
   « LES PUBS » — plusieurs jeux de cartes, un par client.
   Le scroll fait passer de l'un a l'autre ; a l'interieur d'un
   jeu, les cartes tournent. Les positions sont numerotees :
   pos-0 devant, les suivantes en escalier derriere.
   ============================================================ */
.ads-jeu{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility 0s .7s}
.ads-jeu.on{opacity:1;visibility:visible;
  transition:opacity .7s var(--ease),visibility 0s 0s}
.ads-jeu .ads-bg{position:absolute;inset:0;z-index:0}
.ads-deck{position:absolute;inset:0;z-index:1}

.ads-deck .ads-slide{position:absolute;inset:0;opacity:1}
.ads-deck .ads-slide .ads-frame{
  transition:transform .9s var(--ease),filter .9s var(--ease),box-shadow .9s var(--ease);
}
.ads-deck .ads-slide.pos-0 .ads-frame{transform:none;filter:none}
.ads-deck .ads-slide.pos-1 .ads-frame{
  transform:translateX(52px) rotate(6.5deg) scale(.88);
  filter:brightness(.56) saturate(.85);
  box-shadow:0 12px 26px -10px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.1)}
.ads-deck .ads-slide.pos-2 .ads-frame{
  transform:translateX(92px) rotate(12deg) scale(.79);
  filter:brightness(.36) saturate(.7);
  box-shadow:0 10px 20px -10px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.07)}

/* le nom du client dont on regarde les creatives */
.ads-client{
  position:absolute;left:9px;top:9px;z-index:6;
  padding:4px 10px;border-radius:100px;
  background:rgba(250,250,247,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(17,17,17,.16);
  font-family:var(--font-display);font-size:10.5px;font-weight:500;
  letter-spacing:.01em;color:rgba(17,17,17,.92);white-space:nowrap;
  pointer-events:none}
@media (max-width:900px){
  .ads-deck .ads-slide.pos-1 .ads-frame{transform:translateX(38px) rotate(6deg) scale(.88)}
  .ads-deck .ads-slide.pos-2 .ads-frame{transform:translateX(68px) rotate(11deg) scale(.79)}
}

/* ============================================================
   « CE QU'ON FAIT » — la section se bloque le temps qu'on la
   traverse, et le scroll fait passer d'un projet a l'autre.
   Les cartes ne bougent pas : seul leur contenu change, c'est
   ce qui fait sentir qu'il s'agit de deux clients differents.
   ============================================================ */
.services{padding:0}
.svc-scene{position:relative}
.svc-pin{position:relative}
/* le blocage ne s'active que si la fenetre est assez haute pour
   contenir la section entiere : sinon on la laisse defiler */
@media (min-width:901px) and (min-height:820px){
  .svc-scene{height:220vh}
  .svc-pin{position:sticky;top:0;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center}
}
/* le rembourrage ne vaut que hors blocage : sinon il decentre le bloc
   sur les fenetres de 760 a 819 px, ou le blocage est deja actif */
@media (max-width:900px),(max-height:759px){
  .svc-pin{padding:110px 0}
}

/* les deux projets, avec le fil d'avancement entre les deux */
.svc-projets{display:flex;align-items:center;justify-content:center;
  gap:16px;margin:-6px 0 30px}
.svc-projet{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13.5px;font-weight:500;
  color:var(--muted-2);white-space:nowrap;
  transition:color .5s var(--ease)}
.svc-projet i{font-style:normal;font-size:11px;letter-spacing:.08em;
  color:rgba(17,17,17,.3);transition:color .5s var(--ease)}
.svc-projet.on{color:#111111}
.svc-projet.on i{color:var(--accent-hi)}
.svc-fil{position:relative;width:min(190px,22vw);height:2px;border-radius:99px;
  background:rgba(17,17,17,.12);overflow:hidden;flex:0 0 auto}
.svc-fil i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-hi))}

/* les couches de contenu : une par projet, en fondu */
.svc-vis .jeu{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility 0s .55s}
.svc-vis .jeu.on{opacity:1;visibility:visible;
  transition:opacity .55s var(--ease),visibility 0s 0s}
/* la vitrine garde sa mise en page interne dans chaque couche */
.vis-feed{padding:0}
.vis-feed .jeu{display:flex;flex-direction:column;gap:7px;padding:9px}
@media (max-width:900px){
  .svc-projets{gap:12px;margin:-2px 0 22px}
  .svc-projet{font-size:12.5px}
  .svc-fil{width:90px}
}

/* A trois cartes, la pile debordait vers la droite : on decale
   l'ensemble vers la gauche pour qu'il reste centre dans la tuile. */
.ads-deck.n-3 .ads-slide.pos-0 .ads-frame{transform:translateX(-30px)}
.ads-deck.n-3 .ads-slide.pos-1 .ads-frame{transform:translateX(26px) rotate(6.5deg) scale(.88)}
.ads-deck.n-3 .ads-slide.pos-2 .ads-frame{transform:translateX(64px) rotate(12deg) scale(.79)}
@media (max-width:900px){
  .ads-deck.n-3 .ads-slide.pos-0 .ads-frame{transform:translateX(-22px)}
  .ads-deck.n-3 .ads-slide.pos-1 .ads-frame{transform:translateX(18px) rotate(6deg) scale(.88)}
  .ads-deck.n-3 .ads-slide.pos-2 .ads-frame{transform:translateX(48px) rotate(11deg) scale(.79)}
}

/* mesure faite : 47 px de marge a gauche contre 8 a droite. On decale
   l'ensemble de 20 px pour equilibrer la pile dans la tuile. */
.ads-deck.n-3 .ads-slide.pos-0 .ads-frame{transform:translateX(-50px)}
.ads-deck.n-3 .ads-slide.pos-1 .ads-frame{transform:translateX(6px) rotate(6.5deg) scale(.88)}
.ads-deck.n-3 .ads-slide.pos-2 .ads-frame{transform:translateX(44px) rotate(12deg) scale(.79)}
@media (max-width:900px){
  .ads-deck.n-3 .ads-slide.pos-0 .ads-frame{transform:translateX(-36px)}
  .ads-deck.n-3 .ads-slide.pos-1 .ads-frame{transform:translateX(4px) rotate(6deg) scale(.88)}
  .ads-deck.n-3 .ads-slide.pos-2 .ads-frame{transform:translateX(34px) rotate(11deg) scale(.79)}
}
/* la pile a deux cartes : meme traitement, pour qu'elle soit centree aussi */
.ads-deck.n-2 .ads-slide.pos-0 .ads-frame{transform:translateX(-24px)}
.ads-deck.n-2 .ads-slide.pos-1 .ads-frame{transform:translateX(28px) rotate(6.5deg) scale(.88)}
@media (max-width:900px){
  .ads-deck.n-2 .ads-slide.pos-0 .ads-frame{transform:translateX(-18px)}
  .ads-deck.n-2 .ads-slide.pos-1 .ads-frame{transform:translateX(20px) rotate(6deg) scale(.88)}
}

/* ============================================================
   L'INDICATEUR DE CAS — un seul client affiche a la fois, avec
   deux traits qui disent combien il y en a et ou on en est.
   L'ancienne liste « 01 nom / 02 nom » disait deja tout : plus
   rien a decouvrir en scrollant.
   ============================================================ */
.svc-cas{display:flex;flex-direction:column;align-items:center;gap:11px;
  margin:-4px 0 30px}
.svc-cas-pill{display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 7px;border-radius:100px;
  border:1px solid rgba(17,17,17,.14);background:#FFFFFF;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .18s var(--ease),transform .18s var(--ease)}
.svc-cas-pill.change{opacity:0;transform:translateY(-4px)}
.svc-cas-logo{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(17,17,17,.2)}
.svc-cas-nom{font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#111111;white-space:nowrap}
.svc-cas-pas{display:flex;gap:7px}
.svc-cas-pas i{display:block;width:34px;height:2px;border-radius:99px;
  background:rgba(17,17,17,.14);overflow:hidden;position:relative}
.svc-cas-pas i::after{content:"";position:absolute;inset:0;
  transform-origin:left;transform:scaleX(var(--q,0));
  background:linear-gradient(90deg,var(--accent),var(--accent-hi))}

/* la carte suivi accueille elle aussi deux couches */
.vis-track{padding:0;display:block}
.vis-track .jeu{display:flex;flex-direction:column;gap:10px;
  padding:16px 17px 15px}

/* ============================================================
   RYTHME DU SCROLL — la scene etait longue : on restait bloque
   plus d'un ecran entier avant que le projet change. Un cran de
   scroll doit suffire pour passer au suivant, puis la page repart.
   ============================================================ */
@media (min-width:901px) and (min-height:820px){
  .svc-scene{height:calc(100vh + 52vh)}
}

/* ============================================================
   MOBILE — trois blocs a la suite, c'est long. Les cartes passent
   en rail horizontal : on fait glisser du pouce, une carte a la
   fois, et la section tient sur un ecran.
   ============================================================ */
@media (max-width:900px){
  .svc-grid.three{
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:2px 20px 14px;margin:0 -20px;
    scrollbar-width:none}
  .svc-grid.three::-webkit-scrollbar{display:none}
  .svc-grid.three > .svc{
    flex:0 0 82vw;max-width:340px;scroll-snap-align:center;
    margin:0}
  /* le rail dit qu'il y a d'autres cartes a cote */
  .svc-rail{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .svc-rail i{display:block;width:18px;height:2px;border-radius:99px;
    background:rgba(17,17,17,.16);transition:background .35s var(--ease)}
  .svc-rail i.on{background:var(--accent-hi)}
}
@media (min-width:901px){ .svc-rail{display:none} }

/* ============================================================
   LA PILE — la creative dominante reste au centre de la tuile.
   Les autres s'ecartent de part et d'autre, derriere elle :
   on lit tout de suite laquelle est mise en avant.
   ============================================================ */
.ads-deck .ads-slide.pos-0 .ads-frame{transform:none;filter:none}
.ads-deck.n-2 .ads-slide.pos-0 .ads-frame,
.ads-deck.n-3 .ads-slide.pos-0 .ads-frame{transform:none}
/* deux cartes : la seconde s'ecarte a droite */
.ads-deck.n-2 .ads-slide.pos-1 .ads-frame{
  transform:translateX(54px) rotate(7deg) scale(.87)}
/* trois cartes : une de chaque cote, la dominante au milieu */
.ads-deck.n-3 .ads-slide.pos-1 .ads-frame{
  transform:translateX(58px) rotate(7.5deg) scale(.86)}
.ads-deck.n-3 .ads-slide.pos-2 .ads-frame{
  transform:translateX(-58px) rotate(-7.5deg) scale(.86)}
.ads-deck.n-3 .ads-slide.pos-2 .ads-frame{
  filter:brightness(.5) saturate(.8);
  box-shadow:0 12px 26px -10px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:900px){
  .ads-deck.n-2 .ads-slide.pos-1 .ads-frame{transform:translateX(40px) rotate(6.5deg) scale(.87)}
  .ads-deck.n-3 .ads-slide.pos-1 .ads-frame{transform:translateX(42px) rotate(7deg) scale(.86)}
  .ads-deck.n-3 .ads-slide.pos-2 .ads-frame{transform:translateX(-42px) rotate(-7deg) scale(.86)}
}

/* le blocage dure un ecran entier : on le sent vraiment */
@media (min-width:901px) and (min-height:820px){
  .svc-scene{height:calc(100vh + 95vh)}
}

/* ============================================================
   MOBILE — les trois cartes s'empilent de haut en bas :
   la vitrine, les pubs, puis les chiffres. Un glissement
   horizontal fait passer tout le bloc au projet suivant.
   ============================================================ */
@media (max-width:900px){
  .svc-grid.three{
    display:grid;grid-template-columns:1fr;gap:16px;
    overflow:visible;scroll-snap-type:none;
    padding:0;margin:0;
    touch-action:pan-y;
    transition:transform .19s var(--ease),opacity .19s var(--ease)}
  .svc-grid.three > .svc{flex:none;max-width:none;margin:0}
  /* le bloc suit le doigt : c'est le JS qui pose la transformation */
  .svc-grid.three{overscroll-behavior-x:contain}
  /* les deux traits deviennent le reperage du glissement */
  .svc-cas-pas i{width:26px;height:3px}
  .svc-cas{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .svc-grid.three{transition:none}
}

/* ============================================================
   L'ONGLET STAR EATS — dernier de la barre, apres Contact, et
   signale par un degrade rose : c'est une page partenaire, pas
   une section du site.
   ============================================================ */
.nav-links a.se-onglet{
  padding:7px 15px;border-radius:100px;color:#111111;
  background:linear-gradient(135deg,rgba(0,170,254,.92),rgba(0,170,254,.82));
  box-shadow:0 8px 20px -10px rgba(20,20,20,.252),
             inset 0 1px 0 rgba(255,255,255,.24);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease),filter .35s}
.nav-links a.se-onglet::after{display:none}   /* pas de soulignement sous une pastille */
.nav-links a.se-onglet:hover{
  transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 12px 26px -10px rgba(20,20,20,.28),
             inset 0 1px 0 rgba(255,255,255,.3)}
.nav-links a.se-onglet.active{
  box-shadow:0 0 0 1px rgba(255,255,255,.28),
             0 10px 24px -10px rgba(20,20,20,.28),
             inset 0 1px 0 rgba(255,255,255,.3)}
/* la barre se resserre un peu : la pastille prend de la place */
.nav.small .nav-links a.se-onglet{padding:6px 13px}
/* dans le tiroir mobile, la meme pastille mais calee a gauche */
.drawer a.se-onglet{
  align-self:flex-start;padding:9px 18px;border-radius:100px;color:#111111;
  background:linear-gradient(135deg,rgba(0,170,254,.92),rgba(0,170,254,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}

/* ============================================================
   LA BARRE D'AVANCEMENT — elle faisait 34 x 2 px : le blocage
   fonctionnait, mais rien ne montrait qu'il se passait quelque
   chose. Deux vrais segments, larges et lumineux, qui se
   remplissent l'un apres l'autre pendant que la section tient.
   ============================================================ */
.svc-cas{gap:14px}
.svc-cas-pas{gap:10px}
.svc-cas-pas i{
  width:150px;height:5px;border-radius:99px;
  background:rgba(17,17,17,.09);
  box-shadow:inset 0 1px 2px rgba(20,20,20,.14);
  overflow:hidden;position:relative}
.svc-cas-pas i::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  transform-origin:left;transform:scaleX(var(--q,0));
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
  box-shadow:0 0 14px rgba(20,20,20,.238);
  transition:transform .12s linear}
@media (max-width:900px){
  .svc-cas-pas i{width:74px;height:4px}
  .svc-cas-pas i::after{transition:transform .3s var(--ease)}
}

/* ============================================================
   La section n'a plus besoin d'une scene haute : le blocage se
   fait sur le geste, pas sur une distance de page. Elle occupe
   un ecran, ni plus ni moins.
   ============================================================ */
@media (min-width:901px) and (min-height:760px){
  .svc-scene{height:auto}
  .svc-pin{position:relative;top:auto;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center}
}

/* ============================================================
   CADRAGE DU BLOC BLOQUE — le contenu faisait 834 px de haut et
   debordait sur les fenetres autour de 800 px : les cartes
   etaient coupees en bas. On resserre pour qu'il tienne toujours.
   ============================================================ */
@media (min-width:901px) and (min-height:760px){
  .services .section-head{margin-bottom:26px}
  .services .section-head h2.display{font-size:clamp(28px,3vw,42px)}
  .svc-cas{margin:0 0 20px;gap:11px}
  .svc-vis{aspect-ratio:1.18}
  .svc p{font-size:15.2px;line-height:1.62}
}

/* les traits, plus courts */
.svc-cas-pas i{width:108px}
@media (max-width:900px){ .svc-cas-pas i{width:70px} }

/* ============================================================
   MISE A L'ECHELLE AUTOMATIQUE — chaque visiteur a une fenetre
   d'une hauteur differente. Plutot que d'empiler des paliers qui
   marcheront pour un ecran et casseront pour le suivant, le bloc
   est reduit juste ce qu'il faut pour tenir : le JS mesure sa
   hauteur naturelle et applique un facteur. En dessous de 100 %
   seulement, jamais d'agrandissement.
   ============================================================ */
@media (min-width:901px) and (min-height:760px){
  .svc-pin{padding:0}
  .svc-pin > .wrap{transform-origin:center center}
}

/* ============================================================
   LA CARTE SUIVI — les valeurs du pied touchaient les bords de
   la tuile (17 px de marge pour des chiffres de 16 px gras) et
   un trou s'ouvrait au-dessus. On elargit la marge interieure,
   on adoucit le pied et on resserre le rythme vertical.
   ============================================================ */
.vis-track .jeu{padding:18px 24px 17px;gap:8px}
.trk-lignes{gap:17px}
.trk-rule{margin:13px 0 11px}
.trk-pied{gap:5px 12px}
.trk-pied b{font-size:15px}
.trk-pied i{font-size:10.5px;letter-spacing:.005em}
@media (max-width:900px){
  .vis-track .jeu{padding:16px 20px 15px}
  .trk-pied b{font-size:14px}
  .trk-pied i{font-size:10px}
}

/* ============================================================
   « LA CARTE » — la page de commande, la ou la pub atterrit.
   Le bandeau se voit EN ENTIER : c'est l'element le plus visible
   d'une page Uber, le recadrer n'aurait aucun sens.
   ============================================================ */
.vis-carte{padding:0}
.vis-carte .jeu{display:flex;flex-direction:column;padding:11px;gap:11px;justify-content:center}
.ca-banniere{display:block;flex:0 0 auto;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ca-banniere img{width:100%;height:auto;display:block}
.ca-ligne{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:11px 12px;border-radius:11px;
  border:1px solid rgba(17,17,17,.11);background:#FFFFFF}
.ca-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ca-txt b{font-family:var(--font-display);font-size:14px;font-weight:600;color:#111111;
  letter-spacing:-.01em;line-height:1.25}
.ca-txt i{font-style:normal;font-size:11px;color:var(--muted-2);line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ca-txt em{font-style:normal;margin-top:2px;font-family:var(--font-display);
  font-size:13.5px;font-weight:600;color:rgba(17,17,17,.92)}
/* la vignette et le « + » : la vraie interface d'Uber, pas un bouton invente */
.ca-photo{position:relative;width:74px;height:74px;flex:0 0 auto;border-radius:9px;
  background-image:var(--img);background-size:cover;background-position:center}
.ca-plus{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 3px 8px rgba(20,20,20,.14)}
.ca-plus::before,.ca-plus::after{content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;background:#FAFAF7;border-radius:1px}
.ca-plus::before{width:11px;height:2px}
.ca-plus::after{width:2px;height:11px}
@media (max-width:900px){
  .ca-photo{width:66px;height:66px}
  .ca-txt b{font-size:13.5px}
}


/* ============================================================
   Le prix reservait deux lignes (min-height 1.9em) alors qu'il
   n'en occupe qu'une : 41 px de vide s'ouvraient sous les chiffres,
   a l'interieur de la boite. Aucune marge exterieure ne pouvait
   le rattraper. On ramene la reserve a une ligne.
   ============================================================ */
.plan .amount{min-height:1.18em;margin-bottom:0;line-height:1}
.plan .excl{margin-top:-6px}

/* ============================================================
   FEED — les creatives en continu, comme dans un fil social.
   Une video par ecran, accrochage au defilement, le compte du
   client en bas a gauche. Sur bureau la colonne reste au format
   telephone : une video plein cadre y serait illisible.
   ============================================================ */
.fd-page{margin:0;height:100dvh;overflow:hidden;background:#FAFAF7}
.fd-rail{
  height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none}
.fd-rail::-webkit-scrollbar{display:none}
.fd-slide{
  position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.fd-video{
  width:100%;height:100%;object-fit:cover;display:block;background:#FAFAF7}
@media (min-width:781px){
  .fd-slide{padding:22px 0}
  .fd-video{width:auto;height:100%;aspect-ratio:9/16;border-radius:20px;
    box-shadow:0 40px 90px -30px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.08)}
  /* le fond reprend l'image, floutee : la colonne ne flotte pas dans le noir */
  .fd-slide::before{content:"";position:absolute;inset:0;z-index:-1;
    background:radial-gradient(60% 60% at 50% 40%,rgba(0,170,254,.044),transparent 70%)}
}
/* le voile qui rend le texte lisible sur n'importe quelle image */
.fd-voile{
  position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(250,250,247,.72) 62%,rgba(250,250,247,.9))}
@media (min-width:781px){
  .fd-voile{left:50%;translate:-50% 0;width:min(56.25vh,100%);border-radius:0 0 20px 20px}
}

/* le compte, comme sur un vrai fil */
.fd-info{
  position:absolute;left:22px;bottom:26px;z-index:3;
  display:flex;flex-direction:column;gap:5px;max-width:min(72%,420px)}
@media (min-width:781px){
  .fd-info{left:50%;translate:-50% 0;width:min(56.25vh,100%);
    padding:0 22px;align-items:flex-start}
}
.fd-compte{display:flex;align-items:center;gap:9px}
.fd-logo{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1.5px solid rgba(17,17,17,.9)}
.fd-compte b{font-family:var(--font-display);font-size:17px;font-weight:600;
  color:#111111;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(20,20,20,.168)}
.fd-check{width:16px;height:16px;flex:0 0 auto}
.fd-handle{font-size:13.5px;color:rgba(17,17,17,.7);padding-left:43px;margin-top:-4px}
.fd-fmt{
  align-self:flex-start;margin-top:6px;margin-left:43px;
  padding:5px 12px;border-radius:100px;
  border:1px solid rgba(17,17,17,.2);background:rgba(17,17,17,.1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);font-size:12.5px;font-weight:500;color:#111111}

/* retour au site, et bouton de son */
.fd-retour,.fd-son{
  position:fixed;top:18px;z-index:20;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px 9px 10px;border-radius:100px;
  border:1px solid rgba(17,17,17,.18);background:rgba(250,250,247,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#111111;font-family:var(--font-display);font-size:14px;font-weight:600;
  transition:background .3s,transform .3s var(--ease)}
.fd-retour{left:18px}
.fd-retour svg{width:18px;height:18px}
.fd-retour:hover,.fd-son:hover{background:rgba(250,250,247,.86);transform:translateY(-1px)}
.fd-son{right:18px;width:44px;height:44px;padding:0;justify-content:center}
.fd-son svg{width:21px;height:21px}
.fd-son .fd-son-on{display:none}
.fd-son.actif .fd-son-on{display:block}
.fd-son.actif .fd-son-off{display:none}

/* l'ecran video tout entier met en pause ; les affiches gardent leurs liens */
.fd-slide:not(.fd-flyer){cursor:pointer}

/* temoin lecture / pause, au centre du film (jamais sur les affiches) */
.fd-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:6;width:64px;height:64px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(17,17,17,.2);background:rgba(250,250,247,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#111111;cursor:pointer;
  /* pendant la lecture, rien ne doit masquer l'image : le repere
     n'apparait qu'a l'arret. C'est l'ecran entier qui recoit l'appui,
     le bouton n'est donc qu'un temoin. */
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.82);
  transition:opacity .26s,transform .26s var(--ease)}
.fd-play svg{width:26px;height:26px;display:block}
.fd-play .fd-ico-pause{display:none}
.fd-play .fd-ico-play{margin-left:3px}   /* recentrage optique du triangle */
.fd-slide.arret .fd-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:900px){.fd-play{width:58px;height:58px}.fd-play svg{width:23px;height:23px}}

/* mention discrete pour les films livres sans bande son */
.fd-muet{
  position:absolute;right:18px;bottom:28px;z-index:3;
  padding:4px 10px;border-radius:100px;
  background:rgba(250,250,247,.55);border:1px solid rgba(17,17,17,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:11.5px;color:rgba(17,17,17,.6)}
@media (min-width:781px){
  .fd-muet{right:calc(50% - min(28.12vh,50%) + 18px)}
}

.fd-aide{
  position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:15;margin:0;
  font-family:var(--font-display);font-size:12.5px;color:rgba(17,17,17,.55);
  pointer-events:none;transition:opacity .5s var(--ease)}
.fd-aide.parti{opacity:0}

/* la pastille qui ouvre le feed depuis le site */
.fd-bulle{
  position:fixed;left:20px;bottom:20px;z-index:74;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 9px;border-radius:100px;
  border:1px solid rgba(17,17,17,.16);
  background:linear-gradient(180deg,rgba(0,170,254,.92),rgba(250,250,247,.94));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px -16px rgba(20,20,20,.238),0 0 0 1px rgba(255,255,255,.04) inset;
  color:#111111;text-decoration:none;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.fd-bulle:hover{transform:translateY(-3px);border-color:rgba(17,17,17,.3);
  box-shadow:0 24px 54px -16px rgba(20,20,20,.14)}
.fd-bulle-rond{
  position:relative;width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.fd-bulle-rond svg{width:19px;height:19px;fill:#111111}
.fd-bulle-txt{display:flex;flex-direction:column;line-height:1.2;
  font-family:var(--font-display);font-size:12px;color:var(--muted)}
.fd-bulle-txt b{font-size:14px;font-weight:600;color:#111111}
@media (max-width:900px){ .fd-bulle{display:none} }
@media (prefers-reduced-motion:reduce){
  .fd-bulle,.fd-retour,.fd-son{transition:none}
}

/* Les films portent la mention sanitaire obligatoire incrustee en bas.
   Le bloc du compte doit passer au-dessus, jamais la recouvrir. */
.fd-info{bottom:74px}
.fd-muet{bottom:76px}
@media (min-width:781px){
  .fd-info{bottom:66px}
  .fd-muet{bottom:68px}
}
.fd-aide{bottom:10px}

/* La mention sanitaire est incrustee vers 88 % de la hauteur du film :
   le bloc du compte doit se terminer au-dessus. */
.fd-info{bottom:112px}
.fd-muet{bottom:114px}
@media (min-width:781px){
  .fd-info{bottom:104px}
  .fd-muet{bottom:106px}
}

/* La pastille du feed devient un simple rond : le libelle allongeait
   inutilement un element qui doit rester discret. */
.fd-bulle{
  padding:0;width:58px;height:58px;border-radius:50%;
  justify-content:center;border-color:rgba(17,17,17,.17)}
.fd-bulle-txt{display:none}
.fd-bulle-rond{width:100%;height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
.fd-bulle-rond svg{width:22px;height:22px;margin-left:2px}
/* le nom apparait au survol, sans occuper de place */
.fd-bulle::after{
  content:"D\0000e9 couvrir notre feed";position:absolute;left:calc(100% + 12px);top:50%;translate:0 -50%;
  padding:6px 13px;border-radius:100px;white-space:nowrap;
  border:1px solid rgba(17,17,17,.14);background:rgba(250,250,247,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:var(--font-display);font-size:13px;font-weight:600;color:#111111;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),translate .3s var(--ease)}
/* L'etiquette se deploie d'elle-meme toutes les 12 s et reste sortie
   3,1 s. Le cycle vaut le double de celui de l'eclat : une fois sur
   deux, la lumiere passe sur l'icone pendant que le texte est sorti.
   Les deux gestes ne se marchent pas dessus, ils se repondent. */
.fd-bulle::after{animation:bulleInvite 12s var(--ease) infinite}
@keyframes bulleInvite{
  0%,30%   {opacity:0;translate:-8px -50%}
  34%,60%  {opacity:1;translate:0 -50%}
  66%,100% {opacity:0;translate:-8px -50%}
}
/* au survol l'etiquette se fige, sortie : on ne veut pas qu'elle
   disparaisse sous le curseur de quelqu'un qui vise le bouton */
.fd-bulle:hover::after{opacity:1;translate:0 -50%;animation:none}
@media (prefers-reduced-motion:reduce){
  .fd-bulle::after{transition:none;animation:none}
}

/* L'icone 3D du feed remplace le rond degrade : meme facture que les
   autres icones du site, et elle flotte comme elles. */
.fd-bulle{
  width:auto;height:auto;padding:0;border:0;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.fd-bulle-ico{
  width:62px;height:auto;display:block;
  filter:drop-shadow(0 16px 26px rgba(20,20,20,.168)) drop-shadow(0 6px 18px rgba(20,20,20,.14));
  animation:icoOrbit 7.8s ease-in-out infinite}
.fd-bulle:hover{transform:translateY(-3px);box-shadow:none;border-color:transparent}
.fd-bulle:hover .fd-bulle-ico{filter:drop-shadow(0 20px 30px rgba(20,20,20,.182)) drop-shadow(0 8px 24px rgba(20,20,20,.21))}
.fd-bulle::after{left:calc(100% + 8px)}
/* Un eclat traverse la face de l'icone une fois toutes les 6 s, puis
   plus rien. Le masque est l'icone elle-meme : la lumiere epouse sa
   forme et ne deborde jamais sur un cadre invisible. L'eclat rejoue
   icoOrbit a l'identique pour rester colle a l'icone qui flotte. */
.fd-bulle::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  background-size:240% 100%;background-repeat:no-repeat;background-position:170% 50%;
  -webkit-mask:url(assets/ico-feed.png) center/contain no-repeat;
          mask:url(assets/ico-feed.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:0;
  animation:icoOrbit 7.8s ease-in-out infinite,icoEclat 6s ease-in-out infinite}
@keyframes icoEclat{
  0%,70%   {background-position:170% 50%;opacity:0}
  73%      {opacity:.5}
  92%      {background-position:-70% 50%;opacity:.5}
  96%,100% {background-position:-90% 50%;opacity:0}
}
@media (prefers-reduced-motion:reduce){ .fd-bulle-ico{animation:none} }
@media (prefers-reduced-motion:reduce){ .fd-bulle::before{display:none} }

/* ============================================================
   FEED — l'habillage autour de la colonne. Le fond reprend
   l'image de la video en cours, floutee et assombrie : les cotes
   ne sont plus du noir vide, et la couleur du film deborde dans
   la piece. C'est une image fixe, donc rien ne se recalcule.
   ============================================================ */
.fd-slide::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--fond);background-size:cover;background-position:center;
  filter:blur(70px) brightness(.42) saturate(1.25);
  transform:scale(1.25)}
.fd-slide::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 60% at 50% 45%,transparent 35%,rgba(250,250,247,.55) 78%,rgba(250,250,247,.88) 100%)}
@media (min-width:781px){
  .fd-slide::before{
    background:radial-gradient(58% 58% at 50% 45%,rgba(0,170,254,.031),transparent 70%),
      radial-gradient(70% 60% at 50% 45%,transparent 30%,rgba(250,250,247,.5) 76%,rgba(250,250,247,.9) 100%)}
}
/* l'image d'attente evite l'ecran noir avant que la video demarre */
.fd-video{background:#FAFAF7 center/cover no-repeat}

/* l'icone du feed, un cran plus discrete */
.fd-bulle-ico{width:48px}

/* ============================================================
   FEED — les affiches entre deux films. Un vrai fil alterne
   videos et visuels fixes : c'est ce qui le rend credible.
   Avec le bouton de commande, on est dans l'usage reel.
   ============================================================ */
.fd-affiche{
  width:100%;height:100%;object-fit:cover;display:block;background:#FAFAF7}
@media (min-width:781px){
  .fd-affiche{width:auto;height:100%;aspect-ratio:9/16;border-radius:20px;
    box-shadow:0 40px 90px -30px rgba(20,20,20,.252),0 0 0 1px rgba(255,255,255,.08)}
}
.fd-cta{
  align-self:flex-start;margin-top:12px;margin-left:43px;
  display:inline-flex;align-items:center;
  padding:11px 24px;border-radius:12px;
  background:#FFFFFF;color:#111111;
  font-family:var(--font-display);font-size:14.5px;font-weight:600;
  letter-spacing:-.01em;text-decoration:none;
  box-shadow:0 12px 28px -10px rgba(20,20,20,.224);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fd-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(20,20,20,.252)}

/* Le bandeau sanitaire est incruste dans l'image, entre 7,8 % et 10,2 %
   du bas. On cale donc le compte au-dessus en proportion, pas en pixels
   fixes : la mention reste lisible quelle que soit la hauteur d'ecran.
   Sur telephone la video occupe tout l'ecran ; a partir de 781 px elle
   est encadree par 22 px de marge haut et bas, d'ou le decalage. */
.fd-info{bottom:calc(10.5dvh + 8px)}
@media (min-width:781px){ .fd-info{bottom:calc(10.5dvh + 26px)} }

/* L'icone du feed revient sur telephone, en bas a gauche */
@media (max-width:900px){
  .fd-bulle{display:flex}
  .fd-bulle-ico{width:42px}
  .fd-bulle::after{display:none}
}

/* ============================================================
   DA claire — quadrillage, logo jaune et encre
   ============================================================ */

/* Quadrillage de fond : trame fine de 16 px, lignes majeures tous les 160 px
   et petites croix aux intersections, comme sur la planche du logo. */
body{
  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M80 74v12M74 80h12' stroke='%23111' stroke-opacity='.28' stroke-width='1.2'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,160px 160px,16px 16px,16px 16px;
  background-position:-80px -80px,0 0,0 0,0 0,0 0;
  background-attachment:fixed;
}

/* Titres : Poppins, gras et serrés, en encre */
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;word-spacing:normal;color:var(--txt)}
h1,h2,h3,h4{font-family:var(--font-display)}

/* Logo */
.brand-logo{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.brand-name{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;color:var(--txt)}

/* Boutons : jaune du logo, texte et contour encre */
.btn{
  background:var(--yellow);color:var(--txt);
  border:1.5px solid var(--txt);
  box-shadow:0 3px 0 var(--txt);
  font-weight:600;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--txt)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--txt)}
.btn .chev{background:var(--txt);color:var(--yellow)}
.btn.ghost{background:#fff;color:var(--txt);border-color:var(--txt);box-shadow:0 3px 0 var(--txt)}
.btn.ghost .chev{background:var(--yellow);color:var(--txt)}
.btn.ghost:hover{background:#fff}

/* Icône des intitulés de section : pastille jaune cerclée */
.eyebrow{color:var(--txt);font-weight:600}
.eyebrow::before{background:var(--txt)}

/* Surligneur jaune pour les mots mis en avant */
::selection{background:var(--yellow);color:var(--txt)}

/* Hero : plus de nappe colorée ni de voile de soie, le quadrillage respire */
.hero-bg .plate,.hero-bg .silk,.hero-bg .glow,.hero-bg .vignette,.grain{display:none}
/* La phrase qui tourne dans le titre est passée au surligneur */
.rot-w{
  background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em;
}

/* Surfaces : blanc franc et filet d'encre, sans flou */
.nav-pill,.nav .links,.hero-chips li,.card,.plan,.faq-item,.testi,.step{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero-chips li{background:#fff;border:1px solid var(--stroke-2);box-shadow:none;color:var(--txt)}
.chip-n{background:var(--yellow);color:var(--txt);border:1px solid var(--txt)}

/* Navigation : pilule blanche nette, lien actif surligné */
.nav-links{
  background:#fff;border:1px solid var(--stroke-2);
  box-shadow:0 1px 0 var(--stroke);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav-links::before{display:none}
.nav-links a{color:var(--muted)}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-links a::after{height:3px;bottom:1px;background:var(--yellow)}
.nav.stuck{background:rgba(250,250,247,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke)}

/* États actifs et pastilles : jaune du logo, texte encre */
.btn-order,.se-page .btn-order{
  background:var(--yellow);color:var(--txt);
  border:1.5px solid var(--txt);box-shadow:0 3px 0 var(--txt);
}
.btn-order:hover,.se-page .btn-order:hover{box-shadow:0 5px 0 var(--txt)}
.plan .badge-pop,.pay-switch button.on,.slider-nav button:hover,
.cfg-pas button:hover:not(:disabled),.add-pas button:hover:not(:disabled),
.qa.open .ico,.arc-close:hover{
  background:var(--yellow);color:var(--txt);border:1px solid var(--txt);box-shadow:none;
}
.fd-bulle-rond,.res-dot,.add-ligne input:checked{background:var(--yellow);color:var(--txt)}

/* Icônes 3D d'origine violettes : ramenées au jaune du logo (violet ≈ 262°, jaune ≈ 58°) */
img[src*="assets/ico-"]:not([src*="curseur"]):not([src*="stareats"]),img[src*="assets/obj-"]{
  filter:grayscale(1) brightness(.62) contrast(1.35);
}

/* Pastilles flottantes (question, feed) : blanches, contour encre */
.helper,.fd-bulle,.se-page .helper{
  background:#fff;border:1px solid var(--txt);box-shadow:0 3px 0 var(--txt);color:var(--txt);
}
.fd-bulle-rond{border:1px solid var(--txt)}
.se-page .hero-bg{background:none}

/* Page feed : lecteur vidéo plein écran, reste sombre comme une appli vidéo */
body.fd-page{background:#0A0A0A;background-image:none;color:#fff}
.fd-page .fd-video,.fd-page .fd-affiche{background-color:#000}
.fd-page .fd-voile{background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 62%,rgba(0,0,0,.85))}
.fd-page .fd-info,.fd-page .fd-info *,.fd-page .fd-compte,.fd-page .fd-handle{color:#fff}
.fd-page .fd-retour,.fd-page .fd-son,.fd-page .fd-play{background:rgba(0,0,0,.45);color:#fff;border-color:rgba(255,255,255,.18)}
.fd-page .fd-retour:hover,.fd-page .fd-son:hover{background:rgba(0,0,0,.7)}
.fd-page .fd-slide::before{background:radial-gradient(70% 60% at 50% 45%,transparent 35%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.88) 100%)}
.fd-page .fd-cta{background:var(--yellow);color:var(--txt);border:1.5px solid var(--txt)}
.fd-page img[src*="assets/ico-"]{filter:none}

/* Texte posé sur une vidéo ou une photo : blanc sur voile sombre */
.work-card .meta,.work-card .title,.tile-meta,.tile-meta .title,.arc-name{color:#fff}
.work-card .handle,.tile-meta .handle{color:rgba(255,255,255,.78)}
.work-card .stat,.tile-fmt{background:rgba(255,255,255,.9);border-color:rgba(17,17,17,.12);color:var(--txt)}
.tile-play{background:var(--yellow);border:1.5px solid var(--txt)}

/* ============================================================
   Structure et typo inspirées d'insyder.io
   Titres en casse normale (Schibsted Grotesk depuis le 19/09), texte gris,
   sections centrées, peu de texte, beaucoup d'air.
   ============================================================ */
body{font-family:var(--font-body);color:var(--txt)}
.display,h1.display,h2.display,h3.display{
  font-family:var(--font-display);font-weight:600;text-transform:none;
  letter-spacing:-.035em;word-spacing:normal;line-height:1.08;
}
h1.display{font-size:clamp(40px,5.2vw,72px);line-height:1.05}
h2.display{font-size:clamp(32px,3.7vw,50px)}
h3.display{font-size:clamp(26px,2.8vw,38px)}
.lead,.section-head p,.hero-side .lead{font-family:var(--font-body);font-size:clamp(17px,1.3vw,20px);line-height:1.45;font-weight:500;color:var(--muted);max-width:52ch}
.eyebrow{
  font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--muted);
  padding:6px 12px 6px 10px;border:1px solid var(--stroke-2);border-radius:999px;background:#fff;
}
.eyebrow::before{width:13px;height:13px}
.brand-name{font-family:var(--font-display);font-weight:700;text-transform:none;letter-spacing:-.03em;font-size:22px}
.btn,.btn-order{font-family:var(--font-body);font-weight:600;letter-spacing:-.01em}

/* Le paragraphe « L'approche » : grand, en casse normale */
.lit{text-transform:none;letter-spacing:-.03em;word-spacing:normal;font-family:var(--font-display);font-weight:600;line-height:1.15}

/* ---------- Navigation : une carte compacte, centrée ---------- */
.nav{
  inset:14px 0 auto 0;margin:0 auto;
  width:min(920px,calc(100% - 28px));
  padding:10px 10px 10px 18px;
  background:#fff;border:1px solid var(--stroke-2);border-radius:18px;
  box-shadow:0 8px 28px -18px rgba(17,17,17,.35);
}
.nav.stuck{padding:10px 10px 10px 18px;background:#fff;border-bottom:1px solid var(--stroke-2);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.nav::before,.nav.stuck::before{display:none}
.nav-links{
  position:static;transform:none;margin:0 auto;
  background:none;border:0;box-shadow:none;padding:0;gap:4px;
}
.nav.stuck .nav-links{padding:0}
.nav-links a{font-family:var(--font-body);font-size:15px;font-weight:500;padding:8px 13px;border-radius:10px;transition:background .2s,color .2s}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a.active{background:#F1F1EE;color:var(--txt)}
.nav-links a.se-onglet{margin-left:6px}

/* ---------- Hero centré ---------- */
.hero{padding:190px 0 70px;min-height:0}
.hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:34px}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero-copy h1{max-width:18ch;margin-inline:auto}
.rot{text-align:center}
.cta-order{display:flex;justify-content:center}
.hero-side{align-items:center;padding-top:0;gap:22px}
.trust{align-items:center;max-width:none}
.trust-row{justify-content:center}
/* les trois engagements : une ligne de réassurance, sans cartes */
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:none}
.hero-chips li{background:none;border:0;padding:0;box-shadow:none;
  font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--muted);gap:8px}
.hero-chips .chip-n{width:20px;height:20px;font-size:11px}

/* ---------- En-têtes de section : centrés, courts ---------- */
.section-head{align-items:center;text-align:center;gap:14px;margin-bottom:56px}
.section-head .lead{margin-inline:auto}
.split-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
.meth-col{align-items:center}

/* ---------- Respiration entre les sections ---------- */
section{scroll-margin-top:100px}
.work,.about,.services,.method,.results,.testis,.money,.pricing,.faq{padding-top:clamp(90px,10vw,140px)}
.rot-w{padding:0 .02em}
/* Méthode : intitulé, titre, puis le sélecteur */
.split-head{display:flex;flex-direction:column;align-items:center}
.split-head .meth-col{display:contents}
.split-head .meth-switch{order:2}
/* FAQ : une colonne centrée, titre au-dessus */
.faq-grid{display:flex;flex-direction:column;align-items:center;gap:0;max-width:780px;margin-inline:auto}
.faq-grid > .section-head{position:static;align-items:center;text-align:center}
.faq-grid > *:not(.section-head){width:100%}
.faq-grid > .section-head{margin-bottom:44px}
@media (max-width:1080px){.nav{padding:8px 8px 8px 14px}}

/* ============================================================
   Repositionnement « toutes entreprises » (19/09/2026)
   ============================================================ */

/* ---------- Couverture : les meilleures réalisations ---------- */
.cover{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:64px}
.cover-board{
  position:relative;display:flex;justify-content:center;gap:clamp(14px,2.4vw,28px);
  padding:clamp(22px,3vw,40px);border-radius:32px;width:100%;max-width:760px;
  background:var(--blue-grad);
  border:1px solid rgba(17,17,17,.12);
}
.cover-card{margin:0;position:relative;flex:1 1 0;max-width:300px;aspect-ratio:9/16;
  border-radius:22px;overflow:hidden;background:#111;
  box-shadow:0 26px 50px -28px rgba(17,17,17,.7)}
.cover-card:nth-child(1){transform:rotate(-2.5deg)}
.cover-card:nth-child(2){transform:rotate(2.5deg) translateY(18px)}
.cover-card video{width:100%;height:100%;object-fit:cover}
.cover-card figcaption{
  position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.94);
  font:600 13px/1 var(--font-body);color:var(--txt)}
.cover-card figcaption img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.cover-link{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--stroke-2);
  font:500 15px/1 var(--font-body);color:var(--txt);transition:border-color .2s,transform .2s}
.cover-link:hover{border-color:var(--txt);transform:translateY(-1px)}

/* ---------- L'approche : court et centré ---------- */
.about-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.about-inner .lead{max-width:40ch}

/* ---------- Pour qui : les secteurs ---------- */
.sector-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:12px}
.sector{
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:150px;
  padding:20px;border-radius:20px;background:#fff;border:1px solid var(--stroke-2);
  transition:transform .2s,border-color .2s,box-shadow .2s}
.sector:hover{transform:translateY(-3px);border-color:var(--txt);box-shadow:0 12px 24px -18px rgba(17,17,17,.5)}
.sector b{font:600 20px/1.1 var(--font-display);letter-spacing:-.02em}
.sector span{font:500 14px/1.3 var(--font-body);color:var(--muted)}
.sector-main{background:var(--yellow);border-color:var(--txt);justify-content:space-between}
.sector-main b{font-size:28px}
.sector .sector-tag{align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--txt);color:#fff;font-size:12px;font-weight:600}
.sector-main .sector-go{color:var(--txt);font-weight:600}
@media (max-width:900px){.sector-grid{grid-template-columns:1fr 1fr}.sector-main{grid-column:1/-1}}

/* ---------- Méthode : le jaune fait ressortir les étapes ---------- */
.method .idx,.method .step-n,.method .step > span:first-child{
  display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:10px;
  background:var(--yellow);border:1px solid var(--txt);color:var(--txt);font-weight:700}
.method .step.on .step-t,.method .step.in .step-t{background:linear-gradient(transparent 60%,var(--yellow) 60%)}
.method .step::after,.method .progress{background:var(--yellow)}
.method .meth-switch button.on{background:var(--yellow);color:var(--txt);border:1px solid var(--txt)}

/* ---------- Fonds : on sort du quadrillage par moments ---------- */
.about,.results,.faq{background:#fff}
.method,.cta{background:linear-gradient(180deg,#E9F7FF 0%,#F5FBFF 55%,#fff 100%)}
.sectors{padding-top:clamp(80px,9vw,120px)}
.about{padding-bottom:clamp(70px,8vw,110px)}

/* ---------- Formules : deux colonnes ---------- */
.price-grid.duo{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
@media (max-width:820px){.price-grid.duo{grid-template-columns:1fr}}

/* ---------- FAQ : titre à gauche, questions à droite ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px;align-items:start;max-width:var(--maxw)}
.faq-grid > .section-head{align-items:flex-start;text-align:left;margin-bottom:0;position:sticky;top:120px}
.faq-grid > .section-head .cta-order{justify-content:flex-start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr;gap:30px}.faq-grid > .section-head{position:static}}

/* ---------- Page Restauration ---------- */
.hero-page{padding-bottom:20px}
.hero-page .lead{margin-inline:auto}
.vis-zone{position:relative;display:grid;place-items:center;background:#E9F7FF}
.vis-zone .jeu{position:absolute;inset:0;display:grid;place-items:center}
.zone-map{position:relative;width:170px;height:170px;display:grid;place-items:center}
.zone-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(17,17,17,.35)}
.zone-ring.r1{inset:52px;background:var(--yellow);border:1px solid var(--txt)}
.zone-ring.r2{inset:26px}
.zone-ring.r3{inset:0}
.zone-pin{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid #fff;box-shadow:0 6px 14px -6px rgba(17,17,17,.6)}
.zone-lbl{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:999px;background:#fff;border:1px solid var(--stroke-2);font:500 12.5px/1 var(--font-body)}

/* ---------- Pop-up de bienvenue ---------- */
.welcome{
  position:fixed;right:22px;bottom:22px;z-index:120;width:min(340px,calc(100vw - 32px));
  padding:24px 22px 20px;border-radius:22px;background:#fff;border:1px solid var(--txt);
  box-shadow:0 4px 0 var(--txt),0 30px 60px -30px rgba(17,17,17,.5);
  opacity:0;transform:translateY(18px);visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.welcome.on{opacity:1;transform:none;visibility:visible}
.welcome-badge{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--yellow);border:1px solid var(--txt);font:600 12px/1 var(--font-body)}
.welcome h3{margin:14px 0 6px;font:600 26px/1.1 var(--font-display);letter-spacing:-.03em}
.welcome p{margin:0 0 16px;font:500 14.5px/1.45 var(--font-body);color:var(--muted)}
.welcome .btn-order{width:100%;justify-content:center}
.welcome-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:#F1F1EE;font-size:13px;color:var(--muted)}
.welcome-close:hover{color:var(--txt)}
@media (max-width:560px){.welcome{right:12px;left:12px;bottom:12px;width:auto}}

/* ---------- Portfolio ---------- */
.page-head .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.filters{display:inline-flex;gap:4px;padding:4px;margin-top:10px;border-radius:14px;background:#fff;border:1px solid var(--stroke-2)}
.filters button{padding:9px 16px;border-radius:10px;font:500 14.5px/1 var(--font-body);color:var(--muted);transition:background .2s,color .2s}
.filters button:hover{color:var(--txt)}
.filters button.on{background:var(--yellow);color:var(--txt);box-shadow:inset 0 0 0 1px var(--txt)}
.tile[hidden]{display:none}
.tile-img{background:#fff;border:1px solid var(--stroke)}
.tile-img img{width:100%;height:auto;display:block}
.tile-img .tile-fmt{top:12px;left:12px}
/* les visuels gardent leur proportion d'origine, pas le format alterné des vidéos */
.mosaic .tile.tile-img{aspect-ratio:auto!important}
/* Méthode : numéros en pastille jaune, trait jaune, étape en cours surlignée */
.method .step-n{
  display:inline-grid;place-items:center;min-width:36px;height:30px;padding:0 8px;border-radius:9px;
  background:var(--yellow);border:1px solid var(--txt);color:var(--txt)!important;
  font:700 13px/1 var(--font-body);text-shadow:none!important}
.method .step::after{height:2px;background:var(--yellow);border-top:1px solid rgba(17,17,17,.15)}
.steps.seq .step.cur .step-t{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);padding:0 .08em}
.steps.seq .step.cur::before{background:#E9F7FF}
.hero{flex-direction:column;align-items:stretch;justify-content:center}
.hero > .wrap{width:100%}
.about{margin-top:0;z-index:auto}
.method .step .step-t{display:inline;background:none}
.method .steps.seq .step.cur .step-t{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.method .steps .step.on .step-t,.method .steps .step.in .step-t{background:none}
.method .steps.seq .step.cur.on .step-t,.method .steps.seq .step.cur .step-t{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%)}
.hl{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}

/* ============================================================
   Passage au bleu du logo, sans ombres portées (19/09/2026)
   ============================================================ */
/* Aucune ombre portée nulle part : des aplats et des filets, c'est tout */
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}

/* Boutons et aplats : le dégradé du logo */
.btn,.btn-order,.se-page .btn-order,.sector-main,.welcome-badge,.chip-n,
.plan .badge-pop,.pay-switch button.on,.method .step-n,.meth-switch button.on,.method .meth-switch button.on,
.qa.open .ico,.slider-nav button:hover,.cfg-pas button:hover:not(:disabled),.tile-play{
  background:var(--blue-grad);color:var(--txt);border:1px solid var(--txt);
}
.btn:hover,.btn-order:hover{transform:translateY(-2px)}
.btn:active,.btn-order:active{transform:translateY(0)}
.filters button.on{background:var(--blue-grad);color:var(--txt);border:1px solid var(--txt)}
.filters button{border:1px solid transparent}

/* Le mot mis en avant, surligné en bleu clair pour rester lisible */
.hl,.rot-w,.lit .w.accent.on,
.method .steps.seq .step.cur.on .step-t,.method .steps.seq .step.cur .step-t{
  background:linear-gradient(transparent 58%,#7FD6FF 58%,#7FD6FF 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
::selection{background:#7FD6FF;color:var(--txt)}
.display .hl{display:inline;padding:0 .04em;border:0;border-radius:0;background:linear-gradient(transparent 58%,#7FD6FF 58%,#7FD6FF 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- Portfolio v2 : vidéos au format téléphone, visuels par projet ---------- */
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}
.phones[hidden],.projs[hidden]{display:none}
.phone{margin:0;display:flex;flex-direction:column;gap:12px}
.phone-screen{aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;border:6px solid #111}
.phone-screen video{width:100%;height:100%;object-fit:contain;background:#000}
.phone figcaption{font:600 15px/1.2 var(--font-body);color:var(--txt);text-align:center}
@media (max-width:1000px){.phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.phones{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.phone-screen{border-width:4px;border-radius:18px}}

.projs{display:flex;flex-direction:column;gap:56px}
.proj h3{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:600 24px/1.1 var(--font-display);letter-spacing:-.02em}
.proj h3 span{font:600 12px/1 var(--font-body);padding:5px 9px;border-radius:999px;background:#fff;border:1px solid var(--stroke-2);color:var(--muted)}
.proj-grid{columns:4 220px;column-gap:14px}
.proj-grid img{width:100%;height:auto;display:block;margin:0 0 14px;border-radius:14px;border:1px solid var(--stroke);break-inside:avoid;background:#fff}
.footer-min{padding:30px 0 34px}

/* ---------- Méthode + rapport mensuel réunis ---------- */
.meth-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start;margin-top:10px}
.meth-grid .report{margin:0;position:sticky;top:120px}
.meth-grid .report-switch{display:none}
.meth-grid .steps{grid-template-columns:1fr}
.split-head .lead{order:1;margin-top:-4px}
@media (max-width:900px){.meth-grid{grid-template-columns:1fr}.meth-grid .report{position:static}}

/* ---------- Hero : les régies ---------- */
.ads-chips li{gap:8px}
.ads-chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-grad);border:1px solid var(--txt)}

/* ---------- Secteurs : grille 3 × 2, restauration en bleu ---------- */
.sector-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sector-main{justify-content:flex-end}
.sector-main b{font-size:24px}
.sector-other{background:#111;border-color:#111}
.sector-other b{color:#fff}
.sector-other .sector-go{color:#7FD6FF;font-weight:600}
@media (max-width:900px){.sector-grid{grid-template-columns:1fr 1fr}.sector-main{grid-column:auto}}

/* ---------- Sans Shift / Avec Shift : le bloc sombre ---------- */
.versus{padding-top:clamp(80px,9vw,120px)}
.versus-panel{background:#0E0F12;color:#fff;border-radius:32px;padding:clamp(40px,5vw,72px) clamp(22px,4vw,64px)}
.versus-panel .section-head{margin-bottom:44px}
.versus-panel .display{color:#fff}
.versus-panel .eyebrow{background:transparent;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.2)}
.versus-panel .eyebrow::before{background:#7FD6FF}
.versus-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vs-col{border-radius:22px;padding:28px 26px}
.vs-sans{border:1px solid rgba(255,255,255,.14)}
.vs-avec{background:var(--blue-grad);color:#0E0F12}
.vs-title{margin:0 0 18px;font:600 20px/1.2 var(--font-display);letter-spacing:-.02em}
.vs-col ul{display:flex;flex-direction:column;gap:14px}
.vs-col li{display:flex;gap:12px;align-items:flex-start;font:500 16px/1.45 var(--font-body)}
.vs-sans li{color:rgba(255,255,255,.72)}
.vs-sans li::before{content:"\2715";flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#FF8A8A;border:1px solid rgba(255,138,138,.45)}
.vs-avec li::before{content:"\2713";flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#0E0F12;color:#7FD6FF}
@media (max-width:820px){.versus-grid{grid-template-columns:1fr}}

/* ---------- Restauration : l'espace client ---------- */
.space{padding-top:clamp(90px,10vw,140px);background:#fff}
.space-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.space-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.space-list{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.space-list li{display:flex;flex-direction:column;gap:2px;padding-left:18px;border-left:3px solid #00AAFE;font:500 15px/1.4 var(--font-body);color:var(--muted)}
.space-list b{font:600 16px/1.3 var(--font-body);color:var(--txt)}
.dash{background:#0E0F12;color:#fff;border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px}
.dash-bar{display:flex;align-items:center;gap:6px;padding:2px 4px 6px;font:500 13px/1 var(--font-body);color:rgba(255,255,255,.7)}
.dash-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.dash-bar span{margin-left:8px}
.dash-bar em{margin-left:auto;font-style:normal;font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.25)}
.dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dash-kpis div,.dash-block{background:#191B20;border-radius:16px;padding:14px}
.dash-kpis span,.dash-h{display:block;margin:0 0 8px;font:500 12.5px/1 var(--font-body);color:rgba(255,255,255,.55)}
.dash-kpis b{font:700 24px/1 var(--font-display);letter-spacing:-.02em}
.dash-kpis div:first-child{background:var(--blue-grad);color:#0E0F12}
.dash-kpis div:first-child span{color:rgba(14,15,18,.7)}
.dash-row{display:grid;grid-template-columns:100px 1fr 60px;align-items:center;gap:10px;padding:5px 0;font:500 13.5px/1 var(--font-body)}
.dash-row i{height:8px;border-radius:99px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.dash-row i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--blue-grad);border-radius:99px}
.dash-row b{text-align:right}
.dash-files{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dash-files img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
@media (max-width:900px){.space-grid{grid-template-columns:1fr}}

/* Schibsted Grotesk : titres en 700, légèrement resserrés */
.display,h1.display,h2.display,h3.display{font-weight:700;letter-spacing:-.03em}
.meth-grid .report-row h3.display{font-size:20px;letter-spacing:-.02em}

/* Liens légaux : affichés, tout en bas de chaque page */
.foot-legal{display:flex!important;justify-content:center;gap:18px;flex-wrap:wrap}
.foot-legal a{font:500 13px/1 var(--font-body);color:var(--muted)}
.foot-legal a:hover{color:var(--txt)}
.foot-bas{flex-direction:column-reverse;align-items:center;gap:12px;margin-top:30px;padding-bottom:26px}
.foot-vide{display:none!important}
/* quatre vidéos : une seule rangée sur ordinateur */
.phones{max-width:1080px;margin-inline:auto}
.phones{grid-template-columns:repeat(5,minmax(0,1fr));max-width:1200px;gap:26px 16px}
@media (max-width:1000px){.phones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- La publicité : organique ou pub, et le budget ---------- */
.ads{padding-top:clamp(90px,10vw,140px);background:#fff}
.ads-ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:0 auto 16px}
.way{position:relative;padding:28px 26px;border-radius:22px;border:1px solid var(--stroke-2);background:#fff}
.way h3{margin:14px 0 8px;font:700 24px/1.1 var(--font-display);letter-spacing:-.02em}
.way p{margin:0;font:500 16px/1.5 var(--font-body);color:var(--muted)}
.way-tag{display:inline-block;padding:5px 11px;border-radius:999px;font:600 12px/1 var(--font-body);background:#F1F1EE;color:var(--muted)}
.way-pub{background:var(--blue-grad);border-color:var(--txt)}
.way-pub p{color:#0E0F12}
.way-pub .way-tag{background:#0E0F12;color:#fff}
.budget{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:980px;margin:0 auto;
  padding:16px;border-radius:26px;background:#0E0F12;color:#fff}
.budget-sim{padding:22px 20px;border-radius:18px;background:#191B20}
.budget-q{margin:0 0 18px;font:700 22px/1.2 var(--font-display);letter-spacing:-.02em}
.budget-label{display:block;margin-bottom:8px;font:500 13px/1 var(--font-body);color:rgba(255,255,255,.55)}
.budget-row{display:flex;align-items:center;gap:16px}
.budget-row input{flex:1;appearance:none;-webkit-appearance:none;height:8px;border-radius:99px;cursor:pointer;
  background:linear-gradient(90deg,#00AAFE var(--p,5%),rgba(255,255,255,.12) var(--p,5%))}
.budget-row input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #00AAFE}
.budget-row input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #00AAFE}
.budget-week{min-width:88px;text-align:right;font:700 28px/1 var(--font-display);letter-spacing:-.02em}
.budget-out{margin:18px 0 0;font:500 15px/1.45 var(--font-body);color:rgba(255,255,255,.72)}
.budget-out b{color:#7FD6FF}
.budget-rules{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:10px 12px}
.budget-rules li{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:3px solid #00AAFE;
  font:500 14.5px/1.4 var(--font-body);color:rgba(255,255,255,.62)}
.budget-rules b{font:600 16px/1.3 var(--font-body);color:#fff}
.lead a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.ads-ways,.budget{grid-template-columns:1fr}}

/* ---------- Titre d'accueil : exactement deux lignes sur ordinateur ---------- */
.hero-copy h1{max-width:none}
@media (min-width:821px){
  .hero-copy h1{font-size:clamp(40px,4.6vw,66px);white-space:nowrap}
}

/* ---------- Vidéos : agrandissement au clic ---------- */
.phone{cursor:zoom-in}
.phone-screen{position:relative}
.phone-screen::after{content:"";position:absolute;inset:auto 10px 10px auto;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M4 4h6v2H6v4H4zm10 0h6v6h-2V6h-4zM4 14h2v4h4v2H4zm14 0h2v6h-6v-2h4z'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transition:opacity .2s}
.phone:hover .phone-screen::after{opacity:1}
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(8,9,12,.9);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lightbox.on{opacity:1;visibility:visible}
.lightbox video{height:min(88vh,1280px);max-width:100%;aspect-ratio:9/16;border-radius:22px;background:#000;object-fit:contain}
.lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:#fff;color:#111;font-size:16px}
.lightbox-name{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:600 14px/1 var(--font-body);color:rgba(255,255,255,.75)}
.lightbox{z-index:1000;background:rgba(8,9,12,.94)}
body.lb-open .welcome{visibility:hidden;opacity:0}

/* ---------- Nom de marque : Shift Vidéo ---------- */
.brand-name{white-space:nowrap}
.brand-pole{color:#00AAFE}

/* ---------- L'univers Shift : les pôles ---------- */
.poles{padding-top:clamp(80px,9vw,120px);background:#fff}
.pole-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pole{display:flex;flex-direction:column;gap:10px;padding:22px 18px 18px;border-radius:22px;
  background:#fff;border:1px solid var(--stroke-2);min-height:250px}
.pole-logo{width:56px;height:56px}
.pole h3{margin:6px 0 0;font:700 20px/1.1 var(--font-display);letter-spacing:-.02em}
.pole p{margin:0;flex:1;font:500 14.5px/1.45 var(--font-body);color:var(--muted)}
.pole-go{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;
  font:600 13.5px/1.2 var(--font-body);background:#F4F4F1;color:var(--muted);cursor:default}
.pole-go em{font-style:normal;font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--stroke-2)}
/* chaque pôle garde sa couleur, en filet haut */
.pole{border-top:4px solid var(--c)}
.pole-video{--c:#00AAFE}.pole-design{--c:#FF3DA6}.pole-web{--c:#12C46B}.pole-cost{--c:#FF7A00}.pole-fidelity{--c:#FFD000}
.pole-here{background:#0E0F12;border-color:#0E0F12;border-top-color:#00AAFE}
.pole-here h3{color:#fff}
.pole-here p{color:rgba(255,255,255,.62)}
.pole-here .pole-go{background:var(--blue-grad);color:#0E0F12;justify-content:center}
@media (max-width:1080px){.pole-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.pole-grid{grid-template-columns:1fr 1fr}.pole-here{grid-column:1/-1}}
/* six pôles : grille 3 × 2 */
.pole-software{--c:#7C3AED}
.pole-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-inline:auto}
@media (max-width:700px){.pole-grid{grid-template-columns:1fr 1fr}}

/* Budget : autre montant */
.budget-other{display:flex;align-items:center;gap:10px;margin-top:16px;font:500 13.5px/1 var(--font-body);color:rgba(255,255,255,.6)}
.budget-other input{width:120px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0E0F12;color:#fff;font:600 15px/1 var(--font-body)}
.budget-other input:focus{outline:none;border-color:#00AAFE}
.budget-other em{font-style:normal}

/* Formules : trois colonnes, la troisième sur devis */
.price-grid.trio{grid-template-columns:repeat(3,minmax(0,360px));justify-content:center}
.plan-quote .amount b{font-size:clamp(30px,3vw,40px)}
@media (max-width:1000px){.price-grid.trio{grid-template-columns:minmax(0,420px)}}
/* Les régies du hero : la pièce de puzzle aux couleurs de chaque plateforme */
.ads-chips li::before{display:none}
.ads-chips li{gap:9px;font-weight:600;color:var(--txt)}
.ads-chips img{width:30px;height:30px;object-fit:contain}

/* ============================================================
   Téléphones et tablettes — passe de vérification du 20/09
   (ces règles ferment la feuille : elles priment sur les blocs
   ajoutés plus haut sans media query)
   ============================================================ */
@media (max-width:1080px){
  .pole-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
}
@media (max-width:820px){
  /* Pôles : cartes plus compactes ; une seule colonne sous 560 px */
  .pole-grid{gap:10px}
  .pole{min-height:0;padding:18px 16px}
  .pole-logo{width:46px;height:46px}
  .pole h3{font-size:19px}
  .pole-go{font-size:13px}

  /* Budget : le montant libre passe sous son intitulé */
  .budget-other{flex-wrap:wrap;gap:8px 10px}
  .budget-other input{flex:1;min-width:120px}
  .budget-week{min-width:0;font-size:24px}
  .budget-sim{padding:18px 16px}
  .budget-q{font-size:19px}

  /* Espace client : les trois chiffres respirent */
  .dash-kpis{grid-template-columns:1fr 1fr}
  .dash-kpis div:first-child{grid-column:1/-1}
  .dash-kpis b{font-size:22px}
  .dash-row{grid-template-columns:86px 1fr 54px;font-size:12.5px}

  /* Régies du hero : une ligne lisible */
  .ads-chips{gap:8px 18px}
  .ads-chips img{width:26px;height:26px}
}
@media (max-width:540px){
  .versus-panel{padding:28px 18px;border-radius:24px}
  .vs-col{padding:22px 18px}
  .vs-col li{font-size:15px}
  .way{padding:22px 18px}
  .cover-board{padding:14px;border-radius:24px}
  .cover-card{border-radius:16px}
  .plan{padding:28px 22px}
  .lightbox{padding:12px}
  .lightbox video{height:auto;max-height:82vh;width:100%}
  .lightbox-close{top:10px;right:10px;width:40px;height:40px}
}
@media (max-width:420px){
  :root{--pad:18px}
  .sector-grid{grid-template-columns:1fr}
  .sector{min-height:0;padding:16px}
  .foot-reach{grid-template-columns:1fr}
  .reach{width:100%}
}
@media (max-width:560px){
  .pole-grid{grid-template-columns:1fr;max-width:460px}
}
/* la pop-up ne passe pas devant le menu ouvert */
.drawer.open ~ .welcome,.drawer.open + * .welcome{opacity:0;visibility:hidden}
body.menu-open .welcome{opacity:0;visibility:hidden}

/* ============================================================
   PASSE DU 20/09 — retours client
   Chaque bloc porte le numero de la demande, pour pouvoir
   en retirer un sans toucher aux autres.
   ============================================================ */

/* [6] Les sections sans icone affichaient un carre noir : le masque
   « --ico » n'etait pas defini, la pastille restait pleine. */
.poles{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3H4a1 1 0 0 0-1 1v6h7V3zm4 0h6a1 1 0 0 1 1 1v6h-7V3zM3 14h7v7H4a1 1 0 0 1-1-1v-6zm11 0h7v6a1 1 0 0 1-1 1h-6v-7z'/%3E%3C/svg%3E")}
.sectors{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16l1 5a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0zM5 12h14v8H5z'/%3E%3C/svg%3E")}
.versus{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 2h2v20h-2zM3 6h6v4H3zM15 6h6v4h-6zM3 14h6v4H3zM15 14h6v4h-6z'/%3E%3C/svg%3E")}
.ads{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 9h4l7-5v16l-7-5H3zm14.5 3a4 4 0 0 0-2-3.5v7a4 4 0 0 0 2-3.5z'/%3E%3C/svg%3E")}

/* [3] Le paragraphe d'accroche, juste sous le titre. */
.hero-lead{margin-top:20px;font-size:clamp(16.5px,1.25vw,19px);max-width:52ch;text-wrap:balance}

/* [4] Les chiffres mis en avant, sous l'appel principal. */
.stats{display:flex;flex-wrap:wrap;gap:10px 34px;margin:30px 0 0;padding:0;list-style:none}
.stats li{display:flex;flex-direction:column;gap:2px;min-width:112px}
.stats b{font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,#00AAFE,#0086D8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:13.5px;line-height:1.35;color:var(--muted);max-width:19ch;text-wrap:balance}

/* [2] Test : l'appel principal en bleu plein, libelle blanc, contour marque. */
.btn-order,.se-page .btn-order{
  color:#fff;-webkit-text-fill-color:#fff;
  background:linear-gradient(180deg,#22B8FF,#00AAFE 55%,#0091DF);
  border:2px solid #0E0F12;
  box-shadow:0 14px 30px -16px rgba(0,120,190,.9),inset 0 1px 0 rgba(255,255,255,.34)}
.btn-order:hover{
  background:linear-gradient(180deg,#38C2FF,#03B1FF 55%,#0099EA);
  box-shadow:0 20px 40px -16px rgba(0,120,190,.95),inset 0 1px 0 rgba(255,255,255,.34)}

/* [11] Partout ou le fond est bleu, le texte passe en blanc. */
.vs-avec{color:#fff}
.vs-avec .vs-title{color:#fff}
.vs-avec li{color:rgba(255,255,255,.94)}
.vs-avec li::before{background:#fff;color:#0091DF}
.way-pub h3,.way-pub p{color:#fff}
.way-pub .way-tag{background:#fff;color:#0091DF}
.sector-main b,.sector-main span,.sector-main .sector-go{color:#fff}
.pole-here .pole-go{color:#fff}
.welcome-cta,.welcome .btn-order{color:#fff;-webkit-text-fill-color:#fff}

/* [10] Le logo Shift devant « Avec Shift ». */
.vs-title{display:flex;align-items:center;gap:10px}
.vs-logo{width:30px;height:30px;flex:0 0 auto;
  background:#fff;border-radius:9px;padding:3px}

/* [7] Les descriptions : centrees, et coupees pour equilibrer les lignes. */
.poles .section-head,.sectors .section-head,.versus .section-head,
.ads .section-head,.method .split-head{align-items:center;text-align:center}
.poles .lead,.sectors .lead,.versus .lead,.ads .lead,.method .lead{
  margin-left:auto;margin-right:auto;text-align:center}
.lead,.pole p,.way p,.step p,.sector span,.report-row p,.qa .ans p,.vs-col li{text-wrap:balance}
.pole p,.pole h3{text-align:center}
.pole{align-items:center;text-align:center}
.pole-logo{margin:0 auto}
.pole-go{width:100%;justify-content:center}

/* [9] Un visuel par secteur + [8] le S de Shift sur « Autre ». */
.sector{position:relative;overflow:hidden}
.sector-ico{width:34px;height:34px;flex:0 0 auto;align-self:flex-start;
  margin-bottom:auto;background:#0E0F12;
  -webkit-mask:var(--sico) center/contain no-repeat;
          mask:var(--sico) center/contain no-repeat}
.sec-resto{--sico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 2h2v8a2 2 0 0 1-1 1.7V22H5V11.7A2 2 0 0 1 4 10V2h2zM9 2h1.6v8H9zM16 2c2 0 3 2.5 3 5.5S18 13 17 13v9h-2V2z'/%3E%3C/svg%3E")}
.sec-auto{--sico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11l1.6-4.5A2 2 0 0 1 8.5 5h7a2 2 0 0 1 1.9 1.5L19 11h1v6h-2v2h-3v-2H9v2H6v-2H4v-6h1zm2.4-.5h9.2l-1-3H8.4zM7 13.5a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4zm10 0a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E")}
.sec-bat{--sico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21V9l7-4 7 4v12h-5v-6H8v6zm16 0V9l2 1v11z'/%3E%3C/svg%3E")}
.sec-beaute{--sico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2h4v3h-4zM9 6h6a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3zm0 5v3h6v-3z'/%3E%3C/svg%3E")}
.sec-commerce{--sico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 7V6a5 5 0 0 1 10 0v1h3v14H4V7zm2 0h6V6a3 3 0 0 0-6 0z'/%3E%3C/svg%3E")}
.sector-main .sector-ico{background:#fff}
.sector-s{width:34px;height:34px;align-self:flex-start;margin-bottom:auto}
.sector-other .sector-s{filter:brightness(0) invert(1)}

/* [12] L'espace mort entre « Sans Shift, avec Shift » et la methode. */
.method{padding-top:clamp(28px,3vw,44px)}
.method-stage{height:205vh}
.method-pin{min-height:auto;padding:clamp(24px,4vh,48px) 0}

/* [14] La formule Scale doit se voir tout de suite. */
.price-grid.trio{align-items:center}
.plan.pop{
  border:2px solid #00AAFE;
  background:linear-gradient(180deg,#F3FAFF,#FFFFFF 42%);
  box-shadow:0 40px 80px -42px rgba(0,130,200,.55),0 0 0 6px rgba(0,170,254,.09);
  transform:translateY(-10px) scale(1.045);
  z-index:2}
.plan.pop:hover{transform:translateY(-16px) scale(1.045)}
.plan.pop .pname{color:#0091DF}
.plan.pop .badge-pop{
  top:-15px;right:auto;left:50%;translate:-50% 0;
  background:linear-gradient(180deg,#22B8FF,#0091DF);
  color:#fff;-webkit-text-fill-color:#fff;
  border:2px solid #fff;
  box-shadow:0 10px 22px -10px rgba(0,120,190,.8);
  white-space:nowrap}
.plan.pop li svg{fill:#0091DF}
.plan.pop .btn-order{box-shadow:0 16px 34px -14px rgba(0,120,190,.95),inset 0 1px 0 rgba(255,255,255,.34)}
@media (max-width:900px){
  .plan.pop{transform:none;scale:1}
  .plan.pop:hover{transform:translateY(-6px)}
  .plan.pop .badge-pop{position:static;translate:none;align-self:center;margin-bottom:6px}
}

/* [16] Test : le calendrier en blanc, dans un encadre bleu. */
.cal-wrap{
  background:#fff;
  border:2px solid #00AAFE;
  border-radius:24px;
  padding:10px;
  box-shadow:0 30px 70px -44px rgba(0,130,200,.6),0 0 0 8px rgba(0,170,254,.08)}

/* [5] Les deux videos de la page d'accueil, en plus grand. */
.cover-card{max-width:382px}
.cover-board{gap:clamp(16px,2.4vw,30px)}
@media (max-width:820px){.cover-card{max-width:300px}}

/* ============================================================
   PASSE 2 DU 20/09 — écart méthode/publicité, formules et animations
   Formules et animations inspirées de resboard.fr.
   ============================================================ */

/* [A] L'écart entre la méthode et la publicité.
   Le socle épinglé gardait ~800 px de défilement à vide après la
   dernière étape ; on raccourcit la piste et le haut de « Publicité ». */
.method-stage{height:158vh}
.method-pin{padding:clamp(18px,3vh,34px) 0}
.ads{padding-top:clamp(48px,5vw,76px)}
@media (max-width:900px){.method-stage{height:auto}}

/* ---------- [B] LES FORMULES ---------- */
.pricing .pay-switch{margin-bottom:34px}
.price-grid.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;align-items:stretch;max-width:1060px;margin:0 auto}

.plan{
  padding:0;border-radius:34px;overflow:hidden;
  border:1px solid rgba(17,17,17,.1);
  background:#fff;gap:0;
  box-shadow:inset 0 -4px 20px 8px rgba(17,17,17,.045);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.plan:hover{transform:translateY(-6px);
  box-shadow:inset 0 -4px 20px 8px rgba(17,17,17,.045),0 30px 60px -40px rgba(17,17,17,.4)}
.plan-top{display:flex;flex-direction:column;align-items:flex-start;
  gap:9px;padding:30px 28px 26px}
/* une bande reservee en haut des trois cartes : le badge de la formule
   mise en avant s'y loge sans jamais mordre sur l'etiquette du dessous. */
.plan-top::before{content:"";display:block;height:22px;flex:0 0 auto}
.plan-who{font:500 12.5px/1 var(--font-body);text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted-2)}
.plan .pname{margin:0;font:700 29px/1.05 var(--font-display);letter-spacing:-.03em;
  text-transform:none;color:var(--txt)}
.pdesc{margin:0;font:400 15px/1.45 var(--font-body);color:var(--muted);
  min-height:2.9em;text-wrap:balance}
.plan .amount{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  margin:8px 0 2px;min-height:auto}
.plan .amount b{font:700 clamp(52px,5vw,74px)/.95 var(--font-display);
  letter-spacing:-.05em;color:var(--txt);-webkit-text-fill-color:var(--txt)}
.plan .amount .cur{font:500 19px/1 var(--font-display);color:var(--txt)}
.plan .amount .per{font:400 15px/1 var(--font-body);color:var(--muted)}
.amount-quote b{font-size:clamp(34px,3.2vw,44px)!important;letter-spacing:-.03em!important}
.plan .btn{width:100%;justify-content:center;margin-top:12px}
.plan hr{margin:0;border:0;border-top:1px solid rgba(17,17,17,.1)}
.plan ul{padding:24px 28px 30px;gap:13px}
.plan li{align-items:flex-start;gap:10px;font-size:15px;line-height:1.4;
  color:rgba(17,17,17,.82)}
.plan li svg{width:16px;height:16px;margin-top:2px;fill:#0091DF}
.plan .spacer{display:none}

/* la formule mise en avant : remplie, comme la carte ambre de resboard */
.plan.pop{
  border:1px solid rgba(17,17,17,.12);
  background:linear-gradient(26deg,#0083D6,#00AAFE 58%,#2FC0FF);
  box-shadow:inset 0 -4px 22px 8px rgba(0,0,0,.09),
             0 40px 80px -44px rgba(0,120,190,.75);
  transform:translateY(-14px);scale:1;z-index:2}
.plan.pop:hover{transform:translateY(-22px);
  box-shadow:inset 0 -4px 22px 8px rgba(0,0,0,.09),
             0 50px 90px -44px rgba(0,120,190,.85)}
.plan.pop::after{display:none}
.plan.pop .plan-who{color:rgba(255,255,255,.72)}
.plan.pop .pname,.plan.pop .amount b,.plan.pop .amount .cur{
  color:#fff;-webkit-text-fill-color:#fff}
.plan.pop .pdesc,.plan.pop .amount .per{color:rgba(255,255,255,.86)}
.plan.pop hr{border-top-color:rgba(255,255,255,.26)}
.plan.pop li{color:rgba(255,255,255,.94)}
.plan.pop li svg{fill:#fff}
.plan.pop .btn-order{background:#fff;border-color:#fff;
  color:#0083D6;-webkit-text-fill-color:#0083D6;
  box-shadow:0 14px 30px -16px rgba(0,0,0,.45)}
.plan.pop .btn-order:hover{background:#F2FAFF;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.plan.pop .badge-pop{
  position:absolute;top:26px;left:28px;right:auto;translate:none;
  padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.96);border:0;
  color:#0083D6;-webkit-text-fill-color:#0083D6;
  font:700 11.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.09em;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5);white-space:nowrap}
.plan.pop .plan-detail{color:rgba(255,255,255,.82)}

@media (max-width:980px){
  .price-grid.trio{grid-template-columns:1fr;max-width:460px}
  .plan.pop{transform:none}
  .plan.pop:hover{transform:translateY(-6px)}
}

/* ---------- [C] ANIMATIONS ---------- */
/* Les grands titres montent ligne par ligne derrière un masque
   (l'effet SplitText de resboard.fr, sans librairie). */
[data-lignes].lignes-pretes{overflow:visible}
[data-lignes] .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
[data-lignes] .ln-i{display:block;transform:translateY(112%);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--n) * 110ms)}
[data-lignes].lignes-on .ln-i{transform:none}
/* le titre reste lisible si le script ne tourne pas */
[data-lignes]:not(.lignes-pretes){opacity:1}

/* Les formules arrivent l'une après l'autre. */
.price-grid .plan{opacity:0;transform:translateY(34px) scale(.985)}
.price-grid .plan.pop{transform:translateY(34px) scale(.985)}
.price-grid .plan.in,.price-grid .plan.vu{
  opacity:1;transform:translateY(0);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i) * 130ms)}
.price-grid .plan.pop.in,.price-grid .plan.pop.vu{transform:translateY(-14px)}
@media (max-width:980px){.price-grid .plan.pop.in,.price-grid .plan.pop.vu{transform:none}}

@media (prefers-reduced-motion:reduce){
  [data-lignes] .ln-i{transform:none!important}
  .price-grid .plan{opacity:1!important;transform:none!important}
}
/* le survol doit reprendre la main une fois la carte apparue */
.price-grid .plan.in:hover{transform:translateY(-6px);transition-delay:0s}
.price-grid .plan.pop.in:hover{transform:translateY(-22px);transition-delay:0s}
@media (max-width:980px){.price-grid .plan.pop.in:hover{transform:translateY(-6px)}}

.plan .amount b{word-spacing:-.12em}
/* Les trois cartes doivent aligner leur prix et leur bouton, quelle que
   soit la longueur de la phrase de contexte. */
.pdesc{min-height:4.4em}
.plan .amount{min-height:calc(clamp(52px,5vw,74px) * .98);align-items:flex-end}
.amount-quote{align-items:flex-end}
@media (max-width:980px){.pdesc{min-height:0}.plan .amount{min-height:0}}

/* ============================================================
   PASSE 3 DU 20/09
   Méthode fusionnée, fonds quadrillés, barre centrée qui s'ouvre,
   formules qui se déploient. Mouvements inspirés de resboard.fr.
   ============================================================ */

/* ---------- [1] MÉTHODE : plus de panneau « Rapport mensuel » ---------- */
/* Les quatre (ou six) lignes du rapport sont désormais le détail de
   l'étape 06 : un seul enchaînement à lire, un seul sélecteur. */
.meth-grid{display:block;max-width:760px;margin:0 auto}
.method .steps{max-width:none}
.method .split-head{display:none}
.method .section-head{margin-bottom:38px}
.method .meth-switch{margin-top:6px}

.step-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;
  margin:14px 0 0;padding:16px 18px;list-style:none;
  border:1px solid rgba(17,17,17,.12);border-radius:16px;
  background:rgba(255,255,255,.62)}
.step-detail li{display:flex;flex-direction:column;gap:1px;font-size:0}
.step-detail b{font:600 14.5px/1.3 var(--font-body);color:var(--txt)}
.step-detail span{font:400 13px/1.35 var(--font-body);color:var(--muted)}
@media (max-width:640px){.step-detail{grid-template-columns:1fr}}

/* ---------- [2] LE QUADRILLAGE RESTE VISIBLE PARTOUT ---------- */
/* Plus aucun aplat blanc par-dessus le fond : seules les cartes ont
   leur propre fond. */
.poles,.ads,.space,.method,.cta,.pricing,.faq,.sectors,.versus,.hero{background:none}
.method,.cta{background:none}

/* ---------- [3] LA BARRE : logo au centre, liens de part et d'autre ---------- */
.nav{justify-content:center;gap:0}
.nav-bar{
  display:flex;align-items:center;
  padding:10px 14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),#FFFFFF);
  border:1px solid rgba(17,17,17,.14);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:0 10px 34px rgba(20,20,20,.11),inset 0 1px 0 rgba(255,255,255,.45);
  transition:padding .6s var(--ease),box-shadow .5s var(--ease)}
.nav-bar .brand{padding:0 16px;flex:0 0 auto}
.nav-side{
  display:flex;align-items:center;gap:26px;
  overflow:hidden;white-space:nowrap;
  /* repliée en haut de page, elle s'ouvre au défilement */
  max-width:0;opacity:0;
  transition:max-width .75s var(--ease),opacity .45s var(--ease),
             padding .75s var(--ease);
}
.nav.stuck .nav-side{max-width:340px;opacity:1}
.nav.stuck .nav-gauche{padding-left:16px;padding-right:6px}
.nav.stuck .nav-droite{padding-right:16px;padding-left:6px}
.nav-side a{
  font-family:var(--font-display);font-size:16px;font-weight:500;
  color:var(--muted);padding:4px 0;position:relative;transition:color .3s}
.nav-side a:hover,.nav-side a.active{color:var(--txt)}
.nav-side a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:#00AAFE;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.nav-side a:hover::after,.nav-side a.active::after{transform:scaleX(1)}
.menu-btn{position:absolute;right:var(--pad)}
@media (prefers-reduced-motion:reduce){
  .nav-side{transition:none}
}
@media (max-width:860px){
  .nav-side{display:none}
  .nav-bar{padding:8px 10px}
}

/* ---------- [4] LES FORMULES SE DÉPLOIENT ---------- */
/* Comme sur resboard.fr : les deux cartes latérales partent cachées
   derrière celle du milieu, puis glissent à gauche et à droite. */
.price-grid.trio{--ecart:22px}
.price-grid .plan{z-index:1}
.price-grid .plan.pop{z-index:5}
.price-grid .plan:first-child{transform:translateX(calc(100% + var(--ecart))) scale(.94);opacity:0}
.price-grid .plan:last-child{transform:translateX(calc(-100% - var(--ecart))) scale(.94);opacity:0}
.price-grid .plan.pop{transform:translateY(22px) scale(.97);opacity:0}
.price-grid .plan.in{
  opacity:1;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .6s var(--ease)}
.price-grid .plan.pop.in{transform:translateY(-14px);transition-delay:0s}
.price-grid .plan:first-child.in,.price-grid .plan:last-child.in{
  transform:none;transition-delay:.18s}
.price-grid .plan.in:hover{transform:translateY(-6px);transition-delay:0s;
  transition-duration:.45s}
.price-grid .plan.pop.in:hover{transform:translateY(-22px);transition-delay:0s;
  transition-duration:.45s}
@media (max-width:980px){
  .price-grid .plan:first-child,.price-grid .plan:last-child{transform:translateY(28px) scale(.98)}
  .price-grid .plan.pop{transform:translateY(28px) scale(.98)}
  .price-grid .plan.in,.price-grid .plan.pop.in,
  .price-grid .plan:first-child.in,.price-grid .plan:last-child.in{transform:none}
  .price-grid .plan.in:hover,.price-grid .plan.pop.in:hover{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .price-grid .plan,.price-grid .plan.pop{transform:none!important;opacity:1!important}
}

/* ---------- [5] CONTRASTES ----------
   Le bleu de marque #00AAFE ne porte pas de texte blanc : 2,5:1, très
   loin des 4,5:1 exigés. On garde le texte blanc et on réserve un bleu
   plus profond aux surfaces qui en portent. Le bleu clair reste partout
   ailleurs (accents, traits, surlignages), où il ne porte rien. */
:root{
  --bleu-encre:#0071B8;          /* blanc dessus : 5,2:1 */
  --bleu-encre-fonce:#00538C;
  --bleu-grad-encre:linear-gradient(180deg,#0080CE,#00629F 70%,#00538C);
  --bleu-texte:#00659F;          /* bleu lisible en texte sur fond clair : 5,6:1 */
}

/* les chiffres du hero : le dégradé montait trop clair */
.stats b{background:linear-gradient(180deg,#0080CE,#00629F)}

/* l'appel principal */
.btn-order,.se-page .btn-order{
  background:var(--bleu-grad-encre);
  border-color:#00365C;
  box-shadow:0 14px 30px -16px rgba(0,60,100,.85),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-order:hover{
  background:linear-gradient(180deg,#0A8FE0,#0070B4 70%,#005F98);
  box-shadow:0 20px 40px -16px rgba(0,60,100,.9),inset 0 1px 0 rgba(255,255,255,.28)}

/* « Avec Shift » */
.vs-avec{background:var(--bleu-grad-encre)}
.vs-avec li{color:#fff}
.vs-avec li::before{background:#fff;color:#00538C}

/* la carte « Publicité » */
.way-pub{background:var(--bleu-grad-encre);border-color:#00365C}
.way-pub .way-tag{background:#fff;color:#00538C}

/* la carte « Restauration » */
.sector-main{background:var(--bleu-grad-encre);border-color:#00365C}
.sector-main .sector-ico{background:#fff}

/* le pôle où l'on se trouve */
.pole-here .pole-go{background:var(--bleu-grad-encre);color:#fff}

/* la formule mise en avant */
.plan.pop{background:linear-gradient(26deg,#00538C,#0071B8 58%,#0080CE)}
.plan.pop .plan-who{color:rgba(255,255,255,.88)}
.plan.pop .pdesc,.plan.pop .amount .per{color:rgba(255,255,255,.93)}
.plan.pop li{color:#fff}
.plan.pop .plan-detail{color:rgba(255,255,255,.9)}
.plan.pop .badge-pop{color:#00538C;-webkit-text-fill-color:#00538C}
.plan.pop .btn-order{background:#fff;color:#00538C;-webkit-text-fill-color:#00538C;
  border-color:#fff}
.plan.pop .btn-order:hover{background:#EAF6FF}

/* le panneau sombre « Sans Shift, avec Shift » */
.versus-panel .eyebrow{color:rgba(255,255,255,.88)}
.vs-sans li{color:rgba(255,255,255,.86)}
.sector-other .sector-go{color:#9BDDFF}
.versus-panel .eyebrow::before{background:#9BDDFF}

/* les liens et mentions en bleu sur fond clair */
.plan.pop .pname{color:#fff}
.pricing .lead a,.cta-note a,.budget-out a{color:var(--bleu-texte)}
.brand-pole{color:var(--bleu-texte)}
.nav-side a::after{background:var(--bleu-texte)}
.plan li svg{fill:var(--bleu-texte)}
/* `-webkit-text-fill-color` est hérité et l'emporte sur `color` : sans le
   redéclarer, « / mois » restait gris foncé sur le bleu de la carte Scale. */
.plan.pop .pdesc,.plan.pop .amount .per,.plan.pop .plan-who,
.plan.pop li,.plan.pop li span,.plan.pop .plan-detail{-webkit-text-fill-color:currentColor}
.plan.pop .amount .per{color:rgba(255,255,255,.93);-webkit-text-fill-color:rgba(255,255,255,.93)}

/* le gris le plus clair passait à 3,5:1 sur le fond de page */
:root{--muted-2:rgba(17,17,17,.62)}
.foot-copy,.plan-who{color:rgba(17,17,17,.62)}
/* Le haut du dégradé restait à 4,2:1 : on le descend pour que le texte
   blanc tienne les 4,5:1 sur toute la hauteur, pas seulement au milieu. */
:root{--bleu-grad-encre:linear-gradient(180deg,#0072BA,#00629F 70%,#00538C)}
.btn-order,.se-page .btn-order,.vs-avec,.way-pub,.sector-main,
.pole-here .pole-go{background:var(--bleu-grad-encre)}
.btn-order:hover{background:linear-gradient(180deg,#0080CE,#006CAE 70%,#005E9E)}
.plan.pop{background:linear-gradient(26deg,#00426F,#00629F 58%,#0072BA)}
.plan.pop .btn-order{background:#fff}
.plan.pop .btn-order:hover{background:#EAF6FF}
.plan.pop .plan-who{color:#fff;-webkit-text-fill-color:#fff}

/* ---------- [6] LE CALENDRIER NE SE CHARGE QU'AU CLIC ---------- */
.cal-porte{display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(34px,6vw,64px) 24px;text-align:center}
.cal-porte[hidden]{display:none}
.cal-porte-t{margin:0;font:700 22px/1.15 var(--font-display);letter-spacing:-.02em}
.cal-porte-p{margin:0;max-width:52ch;font:400 14.5px/1.5 var(--font-body);color:var(--muted)}
.cal-porte-p a{color:var(--bleu-texte);text-decoration:underline;text-underline-offset:3px}
.cal-porte .btn-order{margin-top:6px}
#calBook:empty{min-height:0}

/* ============================================================
   PASSE 4 DU 20/09 — retour au bleu du logo
   Le bleu profond de la passe 3 servait à porter du texte blanc.
   Le bleu du logo est prioritaire : on le remet tel quel et c'est
   le texte qui s'adapte. Sur #0EA2FF, l'encre #111 donne 6,9:1,
   là où le blanc ne donnait que 2,7:1.
   ============================================================ */
:root{
  /* les quatre teintes sont celles du dégradé de logo-p-video.svg */
  --bleu-clair:#7AC8FF;
  --bleu:#0EA2FF;
  --bleu-vif:#0090FF;
  --bleu-profond:#007CE0;
  --bleu-logo:linear-gradient(180deg,#2FB0FF,#0EA2FF 45%,#0090FF 78%,#007CE0);
  --bleu-grad-encre:var(--bleu-logo);
  --encre:#0A1722;              /* l'encre posée sur le bleu */
  --bleu-texte:#0069BE;         /* bleu lisible en texte sur fond clair : 5,1:1 */
}

/* les surfaces bleues reprennent le bleu du logo, avec de l'encre dessus */
.btn-order,.se-page .btn-order{
  background:var(--bleu-logo);
  color:var(--encre);-webkit-text-fill-color:var(--encre);
  border:1px solid rgba(10,23,34,.34);
  box-shadow:0 14px 30px -16px rgba(0,110,200,.75),inset 0 1px 0 rgba(255,255,255,.42)}
.btn-order:hover{
  background:linear-gradient(180deg,#54BEFF,#2FB0FF 45%,#0EA2FF 78%,#0090FF);
  box-shadow:0 20px 40px -16px rgba(0,110,200,.8),inset 0 1px 0 rgba(255,255,255,.42)}

.vs-avec{background:var(--bleu-logo);color:var(--encre)}
.vs-avec .vs-title,.vs-avec li{color:var(--encre);-webkit-text-fill-color:var(--encre)}
.vs-avec li::before{background:var(--encre);color:#7AC8FF}

.way-pub{background:var(--bleu-logo);border-color:rgba(10,23,34,.3)}
.way-pub h3,.way-pub p{color:var(--encre);-webkit-text-fill-color:var(--encre)}
.way-pub .way-tag{background:var(--encre);color:#7AC8FF}

.sector-main{background:var(--bleu-logo);border-color:rgba(10,23,34,.3)}
.sector-main b,.sector-main span,.sector-main .sector-go{
  color:var(--encre);-webkit-text-fill-color:var(--encre)}
.sector-main .sector-ico{background:var(--encre)}

.pole-here .pole-go{background:var(--bleu-logo);color:var(--encre)}

/* la formule mise en avant : le bleu du logo, encre par-dessus */
.plan.pop{background:linear-gradient(26deg,#007CE0,#0EA2FF 62%,#3CB4FF);
  border-color:rgba(10,23,34,.26)}
.plan.pop .pname,.plan.pop .amount b,.plan.pop .amount .cur,
.plan.pop li,.plan.pop li span{color:var(--encre);-webkit-text-fill-color:var(--encre)}
.plan.pop .plan-who{color:rgba(10,23,34,.82);-webkit-text-fill-color:rgba(10,23,34,.82)}
.plan.pop .pdesc,.plan.pop .amount .per,.plan.pop .plan-detail{
  color:rgba(10,23,34,.84);-webkit-text-fill-color:rgba(10,23,34,.84)}
.plan.pop hr{border-top-color:rgba(10,23,34,.24)}
.plan.pop li svg{fill:var(--encre)}
.plan.pop .badge-pop{background:var(--encre);
  color:#7AC8FF;-webkit-text-fill-color:#7AC8FF;border:0}
.plan.pop .btn-order{background:var(--encre);border-color:var(--encre);
  color:#fff;-webkit-text-fill-color:#fff}
.plan.pop .btn-order:hover{background:#16283A;border-color:#16283A}

/* les accents bleus sur fond clair */
.brand-pole,.pricing .lead a,.cta-note a,.cal-porte-p a{color:var(--bleu-texte)}
.nav-side a::after{background:var(--bleu))}
.nav-side a::after{background:var(--bleu)}
.plan li svg{fill:var(--bleu-texte)}
.cal-wrap{border-color:var(--bleu)}
.sector-other .sector-go{color:#7AC8FF}
.versus-panel .eyebrow::before{background:#7AC8FF}

/* Les chiffres du hero étaient redevenus des rectangles pleins : la
   forme courte `background:` réinitialise `background-clip`, donc le
   dégradé peignait la boîte au lieu des lettres. */
.stats b{
  background-image:linear-gradient(180deg,#0090FF,#007CE0);
  background-color:transparent;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* ---------- La barre en haut de page : rien derrière, sauf le logo ----------
   Tant qu'on n'a pas défilé, le cadre de verre disparaît : il ne reste
   que la pastille blanche du logo. Au défilement, le cadre revient et
   les liens s'ouvrent de part et d'autre. */
.nav-bar{
  background:none;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;
  transition:padding .6s var(--ease),background .5s var(--ease),
             border-color .5s var(--ease),box-shadow .5s var(--ease)}
.nav-bar .brand{
  padding:9px 18px;border-radius:16px;
  background:#FFFFFF;
  border:1px solid rgba(17,17,17,.12);
  box-shadow:0 10px 30px -14px rgba(20,20,20,.35);
  transition:background .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease),padding .5s var(--ease)}
.nav.stuck .nav-bar{
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),#FFFFFF);
  border-color:rgba(17,17,17,.14);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:0 10px 34px rgba(20,20,20,.11),inset 0 1px 0 rgba(255,255,255,.45)}
/* une fois dans le cadre, la pastille du logo n'a plus lieu d'être */
.nav.stuck .nav-bar .brand{
  background:none;border-color:transparent;box-shadow:none;padding:0 16px}
.cal-mention{margin:12px auto 0;max-width:60ch;text-align:center;
  font:400 12.5px/1.5 var(--font-body);color:var(--muted-2)}
.cal-mention a{color:var(--bleu-texte);text-decoration:underline;text-underline-offset:3px}
/* C'était le <header> lui-même qui portait la pastille blanche de 920 px.
   Il ne peint plus rien : le cadre est désormais porté par .nav-bar, et
   seulement une fois qu'on a défilé. */
.nav{background:none;border:0;border-radius:0;box-shadow:none;padding:10px 0}
.nav.stuck{background:none;border:0;box-shadow:none;padding:10px 0;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- [7] LES COCHES DE « AVEC SHIFT » ----------
   Le caractère ✓ n'existe pas dans Schibsted Grotesk : le navigateur
   n'affichait que la pastille ronde, vide. On trace la coche en SVG,
   en vert, pour qu'on voie tout de suite que c'est validé. */
.vs-avec li::before{content:none}
.vs-coche{
  flex:0 0 auto;width:22px;height:22px;padding:4px;border-radius:50%;
  background:#0E8A4F;fill:#FFFFFF;margin-top:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.vs-sans li::before{margin-top:1px}

/* --------------------------------------------------------- menu, sur mobile
   Le bouton Menu flottait a droite de l'encadre de la marque, pose dans le
   vide. Il devient une pastille a lui, accrochee sous l'encadre et mordant
   un peu dessus. Il est desormais enfant de .nav-bar : il suit donc le cadre
   de la marque, y compris quand la barre change de forme au defilement. */
@media (max-width:900px){
  .nav-bar{position:relative}

  .menu-btn{
    position:absolute;
    top:calc(100% - 13px);
    /* centree sous l'encadre de la marque */
    left:50%;
    right:auto;
    transform:translateX(-50%);
    z-index:2;
    gap:7px;
    padding:7px 15px;
    border-radius:13px;
    font-size:15px;
    background:#FFFFFF;
    border:1px solid rgba(17,17,17,.12);
    box-shadow:0 10px 26px -14px rgba(20,20,20,.45);
  }
  .menu-btn .plus{width:13px;height:13px}
}