/* SIX1 CREATIVE */

/* ---------- Tokens ---------- */
:root{
  /* Charte officielle : nuancier Adobe + dégradé fournis par le client */
  --brand-1:#FABE04;   /* début du dégradé */
  --brand-2:#F28705;
  --brand-3:#E96002;   /* fin du dégradé */
  --brand-4:#F25D07;
  --brand-5:#F29F05;
  --grad:linear-gradient(120deg,#FABE04 0%,#F28705 52%,#E96002 100%);

  --bg:#FFFFFF;
  --bg-2:#F5F5F6;
  --bg-3:#EDEDEF;
  --tile:#FFFFFF;
  --ink:#0B0B0C;
  --ink-2:#33333A;
  --muted:#636369;
  --line:rgba(11,11,12,.11);
  --line-2:rgba(11,11,12,.06);
  --pill:rgba(255,255,255,.78);
  --shadow:0 14px 44px -18px rgba(11,11,12,.28);
  /* Animation de carte — courbe, ombres et teinte d'accent.
     La spécification citait rgba(99,102,241,…), un indigo de système
     générique : on lui substitue l'orange officiel #E96002. */
  --ease-carte:cubic-bezier(.16,1,.3,1);
  --carte-ombre:0 4px 20px -2px rgba(0,0,0,.05);
  --carte-ombre-active:0 18px 40px -12px rgba(11,11,12,.20),
                       0 10px 30px -12px rgba(233,96,2,.15);
  --carte-bord-actif:rgba(233,96,2,.28);
  --shadow-sm:0 3px 14px -6px rgba(11,11,12,.18);

  --f-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --f-body:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* rythme 4/8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --pad:clamp(16px,4vw,48px);
  --max:1400px;
  --sec:clamp(30px,4.2vw,60px);      /* espacement vertical de section */
  --gap:clamp(12px,1.6vw,22px);

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:32px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ico:18px;
}
html[data-theme="dark"]{
  --bg:#0A0A0B;
  --bg-2:#111113;
  --bg-3:#17181A;
  --tile:#F2F2F3;
  --ink:#FAFAFA;
  --ink-2:#D4D4D8;
  --muted:#8C8C94;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.07);
  --pill:rgba(22,22,25,.78);
  --shadow:0 14px 44px -18px rgba(0,0,0,.85);
  --carte-ombre:0 4px 20px -2px rgba(0,0,0,.35);
  --carte-ombre-active:0 18px 40px -12px rgba(0,0,0,.62),
                       0 10px 30px -12px rgba(242,135,5,.18);
  --carte-bord-actif:rgba(242,135,5,.34);
  --shadow-sm:0 3px 14px -6px rgba(0,0,0,.7);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  /* Empêche le caoutchouc horizontal : sans cela, pousser la page de
     côté la fait « sortir du cadre » et découvre le fond du navigateur.
     L'axe vertical reste libre — on ne prive pas l'utilisateur du
     tirer-pour-actualiser, qu'il connaît. */
  overscroll-behavior-x:none;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .45s var(--ease),color .45s var(--ease);
}
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,ol{list-style:none}
::selection{background:var(--brand-3);color:#fff}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}

/* ---------- Typo ---------- */
.display{font-family:var(--f-display);font-weight:400;line-height:.94;
  letter-spacing:-.03em;text-transform:uppercase}
.display--tight{letter-spacing:.005em}
.h-xxl{font-size:clamp(2.7rem,9vw,8.4rem)}
.h-xl {font-size:clamp(2.3rem,7.4vw,6.4rem)}
.h-lg {font-size:clamp(1.9rem,5vw,4rem)}
.h-md {font-size:clamp(1.5rem,3vw,2.5rem)}
.h-sm {font-size:clamp(1.15rem,1.9vw,1.5rem)}

.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:inline-block}
/* Signe hiéroglyphique en tête du sur-titre.
   La police ne contient AUCUN hiéroglyphe Unicode : elle substitue des
   formes hiéroglyphiques aux lettres latines. Composer le sur-titre
   avec elle le rendrait illisible et panaché de lettres de secours,
   faute des accents É À Ç È Ê Î Ô Û. On la réserve donc à un signe
   isolé, purement décoratif, retiré de la lecture à voix haute. */
.lead{font-size:clamp(.98rem,1.2vw,1.1rem);color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec);position:relative}
.section--sm{padding-block:calc(var(--sec) * .6)}
.rule{height:1px;background:var(--line);border:0}
.grid{display:grid;gap:var(--gap)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.cols-2{grid-template-columns:1fr}}

.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,38px)}
/* Le bloc de titre était plafonné à 62ch, soit environ 620 px : « Rien
   n'est immobile » réclame 664 px et retombait donc sur deux lignes,
   alors que la rangée en offre 1304. On lève le plafond au-delà de
   1000 px, où la place ne manque pas, et on le conserve en dessous
   pour éviter qu'un titre ne vienne écraser le texte qui l'accompagne. */
.sechead__l{max-width:62ch}
@media(min-width:1001px){
  .sechead__l{max-width:none;flex:1 1 auto}
  .sechead > .lead{flex:0 1 auto}
}
.sechead .eyebrow{display:block;margin-bottom:10px}

/* Icônes : taille unique, jeu unique */
.ico{width:var(--ico);height:var(--ico);fill:currentColor;flex:none}
.ico--sm{width:15px;height:15px}
.ico--lg{width:22px;height:22px}

/* ---------- Boutons ---------- */
.btn{--bh:48px;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:var(--bh);padding:0 1.4em;border-radius:999px;
  font-size:.9rem;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),
             background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn--brand{background:var(--grad);color:#fff;box-shadow:0 6px 20px -10px rgba(233,96,2,.9)}
.btn--brand::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(120deg,#E96002,#F28705 52%,#FABE04);transition:opacity .4s var(--ease)}
.btn--brand:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(233,96,2,.85)}
.btn--brand:hover::before{opacity:1}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--line);background:transparent}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
/* Bouton posé sur un bloc inversé : sa couleur suit celle du bloc,
   sinon il devenait blanc sur blanc en thème sombre. */
.btn--light{border:1px solid currentColor;color:inherit;opacity:.85}
.btn--light:hover{background:currentColor;opacity:1;border-color:currentColor}
.btn--light:hover span,.btn--light:hover{color:var(--ink)}
.cta .btn--light:hover{background:var(--bg);color:var(--ink)}
.btn--sm{--bh:40px;font-size:.82rem;padding:0 1.05em}
.btn--lg{--bh:54px;font-size:.96rem;padding:0 1.7em}
.btn--block{width:100%}
.btn:active{transform:scale(.985)}

.link-u{position:relative;display:inline-block}
.link-u::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}

.arrow-c{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;background:var(--bg);
  transition:background .3s var(--ease),transform .4s var(--ease-out),border-color .3s}
.arrow-c svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  transition:stroke .3s}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px var(--pad);transition:transform .5s var(--ease-out)}
.nav.is-hidden{transform:translateY(-140%)}
.nav__group{display:flex;align-items:center;gap:8px}
.nav__center{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}

.socials{display:flex;align-items:center;gap:2px}
.socials a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-2);transition:color .25s,background .25s,transform .35s var(--ease-out)}
.socials a:hover{color:var(--brand-txt);background:var(--bg-2);transform:translateY(-2px)}
.socials .ico{width:16px;height:16px}

.navpill{display:flex;align-items:center;gap:clamp(6px,1.4vw,18px);
  padding:6px 8px;border-radius:999px;background:var(--pill);border:1px solid var(--line-2);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--shadow-sm)}
.navpill a{font-size:.86rem;font-weight:500;padding:9px 12px;border-radius:999px;
  min-height:40px;display:inline-flex;align-items:center;transition:color .25s}
.navpill a:hover{color:var(--brand-txt)}
.navpill a.is-active{color:var(--brand-txt);font-weight:600}
.navmark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-2);flex:none;
  transition:transform .45s var(--ease-out)}
.navmark img{width:20px;height:auto}
.navmark:hover{transform:rotate(-8deg) scale(1.06)}
.nav__here{font-size:.62rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-txt)}

.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--pill);border:1px solid var(--line-2);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out)}
.iconbtn:hover{transform:translateY(-2px)}
.iconbtn .icon-moon svg,.iconbtn .icon-sun svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.iconbtn .ico{width:17px;height:17px}
html[data-theme="dark"] .icon-sun{display:block}
html[data-theme="dark"] .icon-moon{display:none}
.icon-sun{display:none}

.burger{display:none}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;
  transition:.3s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;
  background:var(--ink);transition:.3s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}
body.menu-open .burger i{background:transparent}
body.menu-open .burger i::before{top:0;transform:rotate(45deg)}
body.menu-open .burger i::after{top:0;transform:rotate(-45deg)}

.mobilemenu{position:fixed;inset:0;z-index:110;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 32px;
  clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease-out);visibility:hidden}
body.menu-open .mobilemenu{clip-path:inset(0 0 0 0);visibility:visible}
.mobilemenu nav:not(.socials){display:flex;flex-direction:column}
.mobilemenu nav:not(.socials) a{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,10vw,3.4rem);line-height:1.06;letter-spacing:-.03em;
  padding-block:10px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .25s}
.mobilemenu nav:not(.socials) a:active{color:var(--brand-txt)}
body.menu-open .mobilemenu nav:not(.socials) a{opacity:1;transform:none}
body.menu-open .mobilemenu nav:not(.socials) a:nth-child(1){transition-delay:.1s}
body.menu-open .mobilemenu nav:not(.socials) a:nth-child(2){transition-delay:.15s}
body.menu-open .mobilemenu nav:not(.socials) a:nth-child(3){transition-delay:.2s}
body.menu-open .mobilemenu nav:not(.socials) a:nth-child(4){transition-delay:.25s}
.mobilemenu__foot{margin-top:auto;padding-top:28px;display:grid;gap:14px;
  opacity:0;transition:opacity .5s .3s var(--ease)}
body.menu-open .mobilemenu__foot{opacity:1}
.mobilemenu__foot .socials{gap:4px}

@media(max-width:1100px){.nav__group--left .socials{display:none}}
@media(max-width:780px){
  .nav__group--left .btn{display:none}
  .burger{display:grid;place-items:center}
  .navpill a:not(.navmark){display:none}
  .navpill{padding:4px;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
  .nav__here{display:none}
  .nav{padding:10px var(--pad)}
}

/* ---------- Préchargeur ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center}
/* Sans JavaScript, rien ne lèverait jamais ce voile et les 16 pages
   resteraient blanches : la classe « js » est posée par un script en
   ligne dans l'en-tête, avant le premier rendu. */
html:not(.js) .loader{display:none}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:22px}
/* L'empreinte se dessine à la vitesse du chargement réel : elle remplace
   la barre de progression, qui n'apportait rien de plus. */
.loader__draw{width:clamp(58px,9vw,84px);height:auto;overflow:visible}
.loader__draw path{stroke-dasharray:1;stroke-dashoffset:1}
.loader__word{font-family:var(--f-display);font-weight:400;
  text-transform:uppercase;font-size:.72rem;letter-spacing:.34em;color:var(--muted);
  opacity:0;transition:opacity .5s var(--ease)}
body.loader-done .loader__word{opacity:1}
body.loaded .loader{clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--ease-out);
  pointer-events:none}

/* ---------- Curseur ---------- */
.cursor,.cursor-d{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;will-change:transform}
.cursor{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
.cursor-d{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);margin:-17px 0 0 -17px;
  display:grid;place-items:center;
  transition:width .35s var(--ease-out),height .35s var(--ease-out),background .35s,border-color .35s}
.cursor-d span{font-size:.62rem;font-weight:700;letter-spacing:.08em;color:#000;opacity:0;
  transition:opacity .25s;text-transform:uppercase}
body.cursor-view .cursor-d{width:80px;height:80px;background:#fff;border-color:#fff}
body.cursor-view .cursor-d span{opacity:1}
body.cursor-view .cursor{opacity:0}
body.cursor-hover .cursor-d{width:52px;height:52px}
@media(hover:none),(pointer:coarse),(max-width:900px){.cursor,.cursor-d{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(104px,13vw,150px) 0 clamp(28px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;text-align:center}
@media(min-width:900px){.hero{min-height:min(90svh,820px)}}
.badge{display:inline-flex;align-items:center;gap:.5em;padding:7px 14px;border-radius:999px;
  font-size:.78rem;font-weight:500;background:var(--pill);border:1px solid var(--line);
  backdrop-filter:blur(14px);box-shadow:var(--shadow-sm)}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--grad);flex:none}
.hero__title{margin-top:clamp(14px,2vw,24px);font-size:clamp(2.5rem,8.2vw,7.6rem);}
.hero__line{display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.5vw,24px);flex-wrap:wrap}
.hero__mark{width:clamp(40px,7vw,104px);height:auto;flex:none;
  filter:drop-shadow(0 10px 22px rgba(233,96,2,.3))}
.hero__sub{margin:clamp(14px,2vw,22px) auto 0;max-width:54ch;color:var(--ink-2);
  font-size:clamp(.94rem,1.1vw,1.05rem)}
.hero__cta{margin-top:clamp(20px,2.4vw,30px);display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center}

/* Bandeau de confiance sous le hero : comble le vide et rassure tout de suite */
.trustbar{border-block:1px solid var(--line);padding-block:clamp(12px,1.6vw,18px);overflow:hidden}
/* L'écart sous le libellé était de 12 px : le texte touchait presque les
   logos. On le fait respirer, proportionnellement à la largeur. */
.trustbar__lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin:0 0 clamp(20px,2.4vw,32px)}

@media(max-width:780px){
  .hero{padding-top:clamp(88px,22vw,116px)}
  .hero__line{row-gap:0;column-gap:9px}
  .hero__mark{width:32px;align-self:center}
  .hero__cta .btn{flex:1 1 220px}
}
@media(max-width:400px){.hero__mark{width:28px}}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:12px;overflow:hidden;display:flex;
  user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;flex:none;animation:slide 46s linear infinite;
  /* Le ruban fait plus de 7000 px de large. Sans couche propre il est
     repeint par le processeur à chaque image, donc il tressaute dès que
     le fil principal travaille — c'est-à-dire pendant le défilement.
     Promu, il glisse sur le compositeur et devient insensible au reste. */
  will-change:transform;backface-visibility:hidden}
.marquee--rev .marquee__track{animation-direction:reverse}
/* La pause au survol ne doit pas se déclencher quand c'est la page qui
   bouge sous un curseur immobile : la bande se figeait alors en plein
   défilement. On ne la garde donc qu'au repos. */
html:not([data-defile]) .marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee__item{display:inline-flex;align-items:center;gap:.75em;padding-inline:clamp(14px,1.8vw,26px);
  font-size:.84rem;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.marquee__item .ico{width:13px;height:13px;flex:none;fill:var(--brand-2);opacity:.9}
.marquee--logos{border-top:0;padding-block:0;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee--logos .marquee__track{animation-duration:52s}
.marquee--logos .marquee__item{padding-inline:clamp(18px,2.4vw,38px)}
.marquee--logos .marquee__item::before{display:none}
.marquee--logos img{height:clamp(44px,5.6vw,64px);width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;
  transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease-out)}
.marquee--logos img:hover{filter:none;opacity:1;transform:scale(1.06)}
html[data-theme="dark"] .marquee--logos img{background:#fff;border-radius:5px;padding:5px 8px;opacity:1}


/* ---------- Projets ---------- */
/* Neuf couvertures en portrait : une grille régulière de trois colonnes
   les présente comme une galerie de reliques. La carte « pleine largeur »
   n'a plus lieu d'être — étirée, un portrait 4/5 écrasait la page. */
.work{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.workcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--carte-ombre);
  transition:border-color .4s var(--ease-carte),translate .4s var(--ease-carte),
             box-shadow .4s var(--ease-carte)}
.workcard:hover,.workcard.is-vedette{
  translate:0 -8px!important;
  box-shadow:var(--carte-ombre-active);
  border-color:var(--carte-bord-actif)}
.workcard__media{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--bg-3)}
.workcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .4s var(--ease-carte);will-change:transform}
.workcard:hover .workcard__media img,
.workcard.is-vedette .workcard__media img{transform:scale(1.08)}
.workcard__count{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:999px;
  font-size:.7rem;font-weight:600;background:rgba(10,10,11,.62);color:#fff;
  backdrop-filter:blur(8px)}
.workcard__body{padding:clamp(15px,1.8vw,24px);display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px}
.workcard__cat{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;display:block}
.workcard__title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.9rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.workcard:hover .arrow-c,.workcard.is-vedette .arrow-c{
  background:var(--grad);border-color:transparent;
  transform:translateX(4px) rotate(45deg)}
.workcard:hover .arrow-c svg,.workcard.is-vedette .arrow-c svg{stroke:#fff}
.workcard__tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.workcard__tags span{font-size:.66rem;padding:3px 9px;border-radius:999px;background:var(--bg);
  border:1px solid var(--line);color:var(--ink-2)}
.workcard--wide{grid-column:auto}   /* étirée, une couverture portrait
   écrasait la page : toutes les cartes ont désormais la même emprise */
@media(max-width:860px){
  .work{grid-template-columns:1fr}
  .workcard--wide{grid-column:auto}
}

/* ---------- Chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stat{padding:clamp(18px,2.2vw,32px) clamp(10px,1.6vw,24px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat__n{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,4vw,3.4rem);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat__l{font-size:.78rem;color:var(--muted);margin-top:6px;line-height:1.35}
@media(max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
}

/* ---------- Services ---------- */
.srv{border-top:1px solid var(--line)}
.srvrow{position:relative;display:grid;
  grid-template-columns:52px minmax(0,1fr) minmax(0,32ch) 46px;
  gap:clamp(10px,2vw,32px);align-items:center;
  padding-block:clamp(16px,2.2vw,30px);border-bottom:1px solid var(--line);
  transition:padding-inline .45s var(--ease-out)}
.srvrow::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg-2);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out)}
.srvrow:hover::before{transform:scaleY(1);transform-origin:top}
.srvrow:hover{padding-inline:clamp(6px,1.4vw,20px)}
.srvrow__n{font-family:var(--f-display);font-weight:400;font-size:.85rem;color:var(--brand-txt)}
.srvrow__t{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,2.7vw,2.2rem);line-height:1.02;letter-spacing:.01em;}
.srvrow__d{font-size:.88rem;color:var(--muted);line-height:1.5}
.srvrow .arrow-c{justify-self:end}
.srvrow:hover .arrow-c{background:var(--grad);border-color:transparent;transform:rotate(45deg)}
.srvrow:hover .arrow-c svg{stroke:#fff}
@media(max-width:860px){
  .srvrow{grid-template-columns:38px 1fr 42px;gap:6px 12px;align-items:center}
  .srvrow__n{grid-area:1/1}
  .srvrow__t{grid-area:1/2}
  .srvrow .arrow-c{grid-area:1/3;width:38px;height:38px}
  .srvrow__d{grid-area:2/2/2/4;font-size:.85rem;margin-top:2px}
}

/* ---------- Méthode ---------- */
.step{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg);margin-bottom:var(--gap);
  box-shadow:var(--carte-ombre);outline:1px solid transparent;outline-offset:-1px;
  transition:translate .4s var(--ease-carte),box-shadow .4s var(--ease-carte),
             outline-color .4s var(--ease-carte),border-color .4s var(--ease-carte)}
.step:hover,.step.is-vedette{
  translate:0 -8px!important;
  box-shadow:var(--carte-ombre-active);
  border-color:var(--carte-bord-actif);
  outline-color:var(--carte-bord-actif)}
.step__media img{transition:transform .4s var(--ease-carte);will-change:transform}
.step:hover .step__media img,.step.is-vedette .step__media img{transform:scale(1.08)}
/* micro-interaction : le lien d'action glisse vers la droite */
.step .btn{transition:transform .4s var(--ease-carte),background .3s var(--ease),
           border-color .3s var(--ease),color .3s var(--ease)}
.step:hover .btn,.step.is-vedette .btn{transform:translateX(4px)}
.step:last-child{margin-bottom:0}
.step__txt{padding:clamp(20px,3vw,52px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.step__n{font-family:var(--f-display);font-weight:400;font-size:.82rem;letter-spacing:.1em;
  color:var(--brand-txt)}
.step__t{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,2.8vw,2.3rem);line-height:1.05;letter-spacing:.005em}
.step__d{color:var(--muted);font-size:.93rem;max-width:46ch}
.step__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.step__list span{font-size:.72rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2)}
.step__media{position:relative;background:var(--bg-3);min-height:220px;overflow:hidden}
.step__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* Alternance gauche/droite : une carte sur deux inverse ses moitiés.
   « nth-of-type » ne compte que les <article>, alors que « nth-child »
   comptait aussi le <h2> qui les précède et décalait le rythme d'un cran.
   On vise les impaires pour que la PREMIÈRE carte ait sa relique à gauche. */
.step:nth-of-type(odd) .step__txt{order:2}
@media(max-width:860px){
  .step{grid-template-columns:1fr}
  .step__media{min-height:180px;order:-1}
  /* en pile, la relique passe au-dessus pour toutes les cartes */
  .step:nth-of-type(odd) .step__txt{order:0}
}

/* ---------- Mur clients ---------- */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.client{display:grid;place-items:center;padding:clamp(12px,1.4vw,20px);min-height:118px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--tile);transition:background var(--dur) var(--ease)}
.client:hover{background:#fff}
/* Les tuiles sont recadrées au ratio réel de chaque logo : on borne
   par la hauteur ET la largeur pour équilibrer optiquement un bandeau
   très large et un emblème carré. */
.client img{width:auto;height:auto;max-height:78px;max-width:100%;
  filter:grayscale(1);opacity:.72;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease-out)}
.client:hover img{filter:none;opacity:1;transform:scale(1.06)}
@media(max-width:520px){.clients{grid-template-columns:repeat(2,1fr)}}

/* ---------- Citation ---------- */
.quote{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,3.4vw,56px);align-items:center}
@media(max-width:860px){.quote{grid-template-columns:1fr}}
.quote__art{aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--bg-2);
  display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid var(--line)}
.quote__art img{width:44%;height:auto;filter:drop-shadow(0 14px 32px rgba(233,96,2,.24))}
.quote__t{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,2.7vw,2.3rem);line-height:1.12;letter-spacing:.005em}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:22px}
.quote__av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;
  place-items:center;color:#fff;font-weight:700;font-size:.85rem;flex:none}

/* ---------- CTA + pied ---------- */
.cta{border-radius:var(--r-xl);background:var(--ink);color:var(--bg);
  padding:clamp(32px,5.5vw,84px) clamp(20px,4vw,64px);text-align:center;
  position:relative;overflow:hidden}
.cta > *{position:relative;z-index:1}
.cta .display{color:var(--bg)}

.footer{padding-top:clamp(36px,5vw,68px);border-top:1px solid var(--line);
  margin-top:clamp(36px,5vw,68px)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(20px,2.6vw,40px);
  padding-bottom:clamp(28px,3.4vw,48px)}
@media(max-width:900px){.footer__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__top{grid-template-columns:1fr;gap:26px}}
.footer h4,.footer .footer__h{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;font-weight:600}
.footer li{margin-bottom:2px}
.footer li a,.footer li span{font-size:.92rem;color:var(--ink-2);display:inline-block;padding-block:9px}
.footer li a{transition:color .25s}
.footer li a:hover{color:var(--brand-txt)}
.footer__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-block:18px 24px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}

/* ---------- Page projet ---------- */
.phead{padding-top:clamp(96px,12vw,158px);padding-bottom:clamp(24px,3vw,44px)}
.phead__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,52px);align-items:end}
@media(max-width:900px){.phead__grid{grid-template-columns:1fr;gap:16px}}
.pmeta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);
  margin-top:clamp(22px,3vw,40px)}
.pmeta div{padding:16px 14px 16px 0;border-right:1px solid var(--line)}
.pmeta div:last-child{border-right:0}
.pmeta dt{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px;display:flex;align-items:center;gap:.5em}
.pmeta dt .ico{width:13px;height:13px}
.pmeta dd{font-size:.92rem;font-weight:500;line-height:1.4}
@media(max-width:700px){
  .pmeta{grid-template-columns:repeat(2,1fr)}
  .pmeta div{border-bottom:1px solid var(--line)}
  .pmeta div:nth-child(2n){border-right:0}
  .pmeta div:nth-child(2n+1){padding-right:14px}
}

.gallery{columns:2;column-gap:var(--gap)}
@media(max-width:700px){.gallery{columns:1}}
.gallery figure{break-inside:avoid;margin-bottom:var(--gap);border-radius:var(--r);
  overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.gallery img{width:100%;height:auto;transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.025)}

.nextproj{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(22px,4vw,54px) 0;border-top:1px solid var(--line)}
.nextproj__t{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.03em;transition:color .3s}
.nextproj:hover .nextproj__t{color:var(--brand-txt)}
.nextproj:hover .arrow-c{background:var(--grad);border-color:transparent;transform:rotate(45deg)}
.nextproj:hover .arrow-c svg{stroke:#fff}

/* ---------- Formulaire ---------- */
.contactform{display:grid;gap:14px}
.contactform label{display:grid;gap:6px}
.contactform label > span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.contactform input,.contactform select,.contactform textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);min-height:48px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color .25s,background .25s;resize:vertical}
.contactform textarea{min-height:118px}
.contactform input::placeholder,.contactform textarea::placeholder{color:var(--muted)}
.contactform input:focus,.contactform select:focus,.contactform textarea:focus{
  outline:none;border-color:var(--brand-2);background:var(--bg)}
.contactform select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media(max-width:560px){.contactform .cols-2{grid-template-columns:1fr}}
.formnote{padding:12px 14px;border-radius:var(--r-sm);font-size:.86rem;background:var(--bg-2);
  border:1px solid var(--line)}
.formnote--ok{border-color:var(--brand-2);color:var(--brand-txt)}

.infolist{display:grid;border-top:1px solid var(--line)}
.infolist > *{display:flex;align-items:center;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);min-height:56px;
  transition:padding-inline .4s var(--ease-out)}
.infolist > a:hover{padding-inline:8px}
.infolist__i{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;color:var(--brand-txt)}
.infolist__i .ico{width:16px;height:16px}
.infolist strong{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:3px}
.infolist > * > span:last-child{font-size:.95rem;font-weight:500}

/* ---------- Révélations ---------- */
.wordline{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
html.has-anim .reveal{opacity:0}
html.has-anim .reveal-stagger > *{opacity:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.has-anim .reveal,html.has-anim .reveal-stagger > *{opacity:1}
}

/* Logo bi-thème : le mot CREATIVE est blanc dans le fichier d'origine */
.logoswap{position:relative;line-height:0}
.logoswap img{width:100%;height:auto}
.logoswap .is-dark{display:none}
html[data-theme="dark"] .logoswap .is-dark{display:block}
html[data-theme="dark"] .logoswap .is-light{display:none}

/* Erreur de champ : message au contact du champ concerné */
.fielderr{font-size:.82rem;color:#C2410C;margin-top:5px}
html[data-theme="dark"] .fielderr{color:#FDBA74}
.contactform [aria-invalid]{border-color:#C2410C}

/* ══════════════════════════════════════════════════════════════════
   Couche « premium » — grain, serif italique, bandes inversées,
   carrousel coverflow, éventail de cartes, transition de page.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --dur-fast:180ms; --dur:320ms; --dur-slow:560ms;
}

/* Emphase par l'axe de largeur variable d'Archivo plutôt que par une
   serif italique rapportée : ce duo sans + italique est devenu le
   marqueur visuel des sites générés automatiquement. */
.wide{display:inline-block;font-weight:500;letter-spacing:-.005em}
.display .wide{font-weight:400}

/* Serif réservée à un seul usage : la ligne de rôle du fondateur */
.it{font-family:var(--f-serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:.005em;padding-right:.06em}
.display .it{font-stretch:normal}

/* Grain : casse le rendu « plat » des aplats et des dégradés */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.16;
  mix-blend-mode:soft-light}
html[data-theme="dark"] .grain{opacity:.2}
.grain::before{content:"";position:absolute;inset:-120%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}     16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)} 50%{transform:translate(-1%,3%)}
  66%{transform:translate(3%,1%)}  83%{transform:translate(-2%,2%)}
}

/* Bande inversée : rythme sombre / clair au fil du défilement */
.band{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
.band .eyebrow{color:color-mix(in srgb,var(--bg) 58%,transparent)}
html[data-theme="dark"] .band .eyebrow{color:rgba(0,0,0,.5)}
.band .muted,.band .lead{color:color-mix(in srgb,var(--bg) 74%,transparent)}
.band .rule,.band .srv,.band .srvrow{border-color:color-mix(in srgb,var(--bg) 16%,transparent)}
.band .srvrow::before{background:color-mix(in srgb,var(--bg) 7%,transparent)}
.band .arrow-c{border-color:color-mix(in srgb,var(--bg) 22%,transparent);background:transparent}
.band .arrow-c svg{stroke:var(--bg)}

/* ── Carrousel coverflow ─────────────────────────────────────────── */
.cover{position:relative;padding-block:clamp(8px,1.4vw,20px);overflow:hidden}
.cover__stage{position:relative;perspective:1600px;perspective-origin:50% 46%;
  height:clamp(360px,41vw,600px);display:flex;align-items:center;justify-content:center}
.cover__track{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cover__item{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(258px,42vw,600px);
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  will-change:transform,opacity;
}
.cover__card{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);
  border:1px solid var(--line);box-shadow:0 30px 70px -34px rgba(11,11,12,.55)}
html[data-theme="dark"] .cover__card{box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
/* Les couvertures du portfolio sont composées en portrait 4/5 : tout
   recadrage en paysage ampute le sujet — le faisceau, le collier, le
   filet de l'amphore. La scène et la carte s'adaptent à elles. */
.cover__media{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--bg-3)}
.cover__media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.cover__item.is-active .cover__card:hover .cover__media img{transform:scale(1.04)}
/* Voile léger pour la profondeur ; la légende passe SOUS l'image,
   sinon elle devient illisible sur les logos clairs. */
.cover__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,7,.16),transparent 46%);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.cover__item.is-active .cover__shade{opacity:1}
.cover__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,22px);
  background:var(--bg);border-top:1px solid var(--line)}
.cover__cat{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:4px}
.cover__title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.cover__go{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;transition:background var(--dur),transform var(--dur) var(--ease-out)}
.cover__go svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2;fill:none;transition:stroke var(--dur)}
.cover__card:hover .cover__go{background:var(--grad);border-color:transparent;transform:rotate(45deg)}
.cover__card:hover .cover__go svg{stroke:#fff}
.cover__item:not(.is-active) .cover__card{pointer-events:none}
.cover__item:not(.is-active){cursor:pointer}

.cover__ui{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  margin-top:clamp(16px,2.2vw,28px)}
.cover__nav{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;background:var(--bg);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease-out)}
.cover__nav:hover{background:var(--grad);border-color:transparent;transform:scale(1.06)}
.cover__nav:hover svg{stroke:#fff}
.cover__nav svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2;fill:none}
.cover__nav[disabled]{opacity:.3;pointer-events:none}
.cover__dots{display:flex;gap:2px;align-items:center}
.cover__dot{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:0;padding:0}
.cover__dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:width var(--dur) var(--ease-out),background var(--dur) var(--ease)}
.cover__dot:hover::before{background:var(--muted)}
.cover__dot.is-on{width:52px}
.cover__dot.is-on::before{width:24px;border-radius:999px;background:var(--grad)}
.cover__count{font-family:var(--f-display);font-size:.8rem;letter-spacing:.06em;
  color:var(--muted);font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.cover__stage{touch-action:pan-y;cursor:grab}
.cover__stage.is-dragging{cursor:grabbing}
@media(max-width:860px){
  .cover__stage{height:clamp(300px,72vw,420px)}
  .cover__item{width:74vw}
  .cover__title{font-size:1.05rem}
  .cover__go{width:34px;height:34px}
}
@media(max-width:520px){
  /* sur petit écran, 8 pastilles ne tiennent pas à une taille tappable :
     on garde les flèches et le compteur, plus simples à comprendre */
  .cover__dots{display:none}
  .cover__stage{height:clamp(290px,86vw,400px)}
  .cover__item{width:80vw}
  .cover__nav{width:44px;height:44px}
  .cover__ui{gap:12px}
  /* les cartes latérales encombrent sur petit écran : on les efface */
  .cover__item:not(.is-active){opacity:.18 !important}
}

/* ── Éventail de cartes (méthode) ────────────────────────────────── */
.fan{display:flex;justify-content:center;align-items:flex-end;
  min-height:clamp(230px,26vw,340px);perspective:1400px;margin-top:clamp(18px,3vw,42px)}
.fan__card{position:relative;width:clamp(122px,13.6vw,188px);flex:none;
  margin-inline:clamp(-24px,-1.9vw,-10px);
  border-radius:var(--r);overflow:hidden;background:var(--bg);border:1px solid var(--line);
  box-shadow:0 22px 48px -26px rgba(11,11,12,.5);
  transform-origin:50% 100%;
  transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur) var(--ease),
             z-index 0s}
html[data-theme="dark"] .fan__card{box-shadow:0 22px 48px -22px rgba(0,0,0,.9)}
.fan__card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.fan__cap{padding:10px 12px 13px}
.fan__n{font-family:var(--f-display);font-weight:400;font-size:.72rem;color:var(--brand-txt);
  letter-spacing:.08em}
.fan__t{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:.85rem;line-height:1.1;letter-spacing:-.02em;margin-top:4px}
.fan:hover .fan__card{transform:rotate(0deg) translateY(0) !important}
.fan__card:hover{z-index:20;transform:translateY(-14px) scale(1.03) !important;
  box-shadow:0 34px 64px -22px rgba(11,11,12,.6)}
@media(max-width:780px){
  .fan{flex-wrap:wrap;gap:10px;min-height:0;perspective:none}
  .fan__card{width:calc(50% - 10px);margin-inline:0;transform:none !important}
}


/* ── Révélation par caractère ────────────────────────────────────── */
.split{display:inline-block}
.split .ch{display:inline-block;will-change:transform,opacity}
html.has-anim .split .ch{opacity:0}

/* ── Défilement : légère inclinaison à la vélocité ───────────────── */
.velo{will-change:transform}

@media(prefers-reduced-motion:reduce){
  .grain::before{animation:none}
  html.has-anim .split .ch{opacity:1}
  .fan__card{transform:none !important}
}

/* Contenu réservé aux lecteurs d'écran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cover__count{text-align:center;margin-top:10px}

/* ══════════════════════════════════════════════════════════════════
   Sites internet : cartes « navigateur » + visionneuse plein écran
   ══════════════════════════════════════════════════════════════════ */
.sites{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:1000px){.sites{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sites{grid-template-columns:1fr}}

.sitecard{display:flex;flex-direction:column;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out)}
.sitecard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.sitecard__bar{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--bg-3);border-bottom:1px solid var(--line)}
.sitecard__bar i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.sitecard__host{font-size:.7rem;color:var(--muted);margin-left:4px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.sitecard__shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.sitecard__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:object-position 2.4s var(--ease)}
.sitecard:hover .sitecard__shot img{object-position:50% 100%}
.sitecard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--bg)}
.sitecard__name{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:1rem;line-height:1.1;letter-spacing:-.02em;display:block}
.sitecard__kind{font-size:.74rem;color:var(--muted);display:block;margin-top:3px}
.sitecard:hover .arrow-c{background:var(--grad);border-color:transparent}
.sitecard:hover .arrow-c svg{stroke:#fff}

.viewer{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:clamp(8px,2vw,32px)}
.viewer[hidden]{display:none}
.viewer__scrim{position:absolute;inset:0;background:rgba(6,6,8,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.viewer__panel{position:relative;width:min(1180px,100%);height:min(88svh,900px);
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--bg);border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.viewer__bar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:none;
  background:var(--bg-3);border-bottom:1px solid var(--line)}
.viewer__bar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.viewer__url{font-size:.76rem;color:var(--muted);margin-inline:6px auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.viewer__close{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);transition:background var(--dur),transform var(--dur) var(--ease-out)}
.viewer__close:hover{background:var(--ink);transform:rotate(90deg)}
.viewer__close:hover svg{stroke:var(--bg)}
.viewer__close svg{width:15px;height:15px;stroke:var(--ink);stroke-width:2;fill:none}
.viewer__scroll{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-2);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.viewer__scroll img{width:100%;height:auto;display:block}
.viewer__hint{position:absolute;left:50%;bottom:14px;translate:-50% 0;padding:7px 14px;
  border-radius:999px;font-size:.74rem;background:rgba(6,6,8,.72);color:#fff;
  backdrop-filter:blur(8px);pointer-events:none;transition:opacity var(--dur) var(--ease)}
body.viewer-open{overflow:hidden}
@media(max-width:620px){
  .viewer__panel{height:92svh}
  .viewer__bar .btn{padding:0 .8em;font-size:.76rem}
  .viewer__url{display:none}
}

/* Sites : la carte doit se lire comme un bouton, pas comme une image */
.sitecard{cursor:pointer}
.sitecard:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}
@media(max-width:620px){
  .sitecard__shot{aspect-ratio:16/11}
  .sitecard__name{font-size:.95rem}
}
/* Repère visuel : indique que le carrousel se fait glisser */
.cover__stage::after{content:"";position:absolute;inset:0;pointer-events:none}
@media(hover:none){
  .cover__hint{display:block}
}
.cover__hint{display:none;text-align:center;font-size:.72rem;color:var(--muted);margin-top:8px}

/* ══════════════════════════════════════════════════════════════════
   Effets portés de Magic UI (React) vers du CSS natif :
   Border Beam et Shimmer Button. Aucun JavaScript ajouté.
   ══════════════════════════════════════════════════════════════════ */

/* @property rend l'angle interpolable ; sans support, la bordure reste
   simplement fixe au lieu de tourner — dégradation propre. */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}

.beam{position:relative;isolation:isolate}
.beam::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--beam),
    transparent 0 68%, var(--brand-1) 82%, var(--brand-3) 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beamspin 7s linear infinite;
  pointer-events:none;opacity:.85;
}
@keyframes beamspin{to{--beam:360deg}}

/* Le faisceau ne s'allume qu'au survol sur les cartes, pour ne pas
   transformer la page en sapin de Noël. */
.beam--hover::after{opacity:0;transition:opacity .4s var(--ease)}
.beam--hover:hover::after,.beam--hover:focus-visible::after{opacity:.9}

/* Balayage lumineux sur le bouton principal.
   Animé en transform uniquement : `left` provoquait un recalcul de mise en
   page à chaque frame, mesuré à une centaine de décalages par défilement. */
.btn--brand::after{
  content:"";position:absolute;top:-20%;left:0;width:38%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  pointer-events:none;will-change:transform;
  animation:shimmer 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes shimmer{
  0%,62%{transform:translate3d(-140%,0,0) skewX(-18deg)}
  100%  {transform:translate3d(340%,0,0) skewX(-18deg)}
}
.btn--brand:hover::after{animation-duration:1.6s}

@media(prefers-reduced-motion:reduce){
  .beam::after{animation:none}
  .btn--brand::after{display:none}
}

/* Le navigateur saute le rendu de ce qui est hors écran.
   Décisif sur les pages projet, qui dépassent 18 000 px de haut.
   contain-intrinsic-size réserve la place pour ne pas faire sauter l'ascenseur. */
.gallery figure{content-visibility:auto;contain-intrinsic-size:auto 520px}

.work .workcard{content-visibility:auto;contain-intrinsic-size:auto 460px}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — 90 % du trafic.
   Principe : tout ce qui dépasse trois blocs passe en défilement
   horizontal, pour raccourcir la page et garder un rythme lisible.
   ══════════════════════════════════════════════════════════════════ */

/* Rail horizontal réutilisable, débordant jusqu'aux bords de l'écran */
.rail{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px var(--pad) 14px;margin-inline:calc(var(--pad) * -1);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:center;flex:0 0 auto}
.railhint{display:none;font-size:.72rem;color:var(--muted);margin-top:2px}

@media(max-width:860px){
  :root{--sec:clamp(28px,5.6vw,46px)}

  /* ── Hero : titre sur UNE ligne, empreinte au bon rapport ─────── */
  .hero{padding-top:clamp(84px,21vw,112px);padding-bottom:22px}
  .hero__title{font-size:clamp(1.85rem,10.2vw,3rem);
    margin-top:14px;white-space:nowrap}
  .hero__line{flex-wrap:nowrap;column-gap:.18em;row-gap:0}
  .hero__mark{width:.82em;height:auto;align-self:center}
  .hero__sub{margin-top:14px;font-size:.93rem;max-width:38ch}
  .hero__cta{margin-top:18px;gap:8px}
  .hero__cta .btn{flex:1 1 100%}

  /* ── Projets, sites et éventail : rails horizontaux ───────────── */
  .work{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px var(--pad) 14px;margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none}
  .work::-webkit-scrollbar{display:none}
  .work .workcard,.work .workcard--wide{flex:0 0 78%;grid-column:auto;
    scroll-snap-align:center;content-visibility:visible}
  .work .workcard__media{aspect-ratio:5/4}

  .sites{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px var(--pad) 14px;margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none;grid-template-columns:none}
  .sites::-webkit-scrollbar{display:none}
  .sites .sitecard{flex:0 0 80%;scroll-snap-align:center}

  .fan{display:flex;flex-wrap:nowrap;gap:10px;min-height:0;perspective:none;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    padding:2px var(--pad) 14px;margin-inline:calc(var(--pad) * -1);
    scrollbar-width:none;align-items:stretch}
  .fan::-webkit-scrollbar{display:none}
  .fan__card{flex:0 0 40%;width:auto;margin-inline:0;transform:none !important;
    scroll-snap-align:center}

  /* ── Logos clients : deux rangées qui défilent horizontalement ── */
  .clients{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
    grid-template-columns:none;grid-auto-columns:minmax(132px,1fr);
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
    border-left:0;border-top:1px solid var(--line);
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .clients::-webkit-scrollbar{display:none}
  .client{min-height:94px;padding:10px;scroll-snap-align:center;
    border-left:1px solid var(--line);border-right:0}
  .client img{max-height:56px}

  .railhint{display:flex}

  /* ── « Six domaines, une seule signature » : mise en page du desktop ── */
  .band .sechead__l h2{max-width:none}
  .band .sechead__l .it{display:block;font-size:.8em;margin-top:.04em}

  /* ── Galeries projet : deux colonnes, page deux fois plus courte ── */
  .gallery{columns:2;column-gap:10px}
  .gallery figure{margin-bottom:10px}

  /* ── Étapes de méthode : visuel plus court ───────────────────── */
  .step__media{min-height:132px}
  .step__txt{padding:18px 16px 22px;gap:8px}

  /* ── Chiffres : quatre colonnes compactes plutôt que deux hautes ── */
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:14px 6px;border-bottom:0}
  .stat:nth-child(-n+2){border-bottom:0}
  .stat:nth-child(2n){border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat__n{font-size:clamp(1.3rem,6vw,2rem)}
  .stat__l{font-size:.66rem;margin-top:3px;line-height:1.25}

  /* ── Pied de page : deux colonnes équilibrées ─────────────────── */
  .footer{padding-top:34px;margin-top:34px}
  .footer__top{grid-template-columns:1fr 1fr;gap:16px 20px;padding-bottom:24px}
  .footer__top > :first-child{grid-column:1 / -1}
  /* la colonne Contact restait seule sur sa ligne : elle occupe la
     largeur et répartit ses entrées sur deux colonnes */
  .footer__top > :last-child{grid-column:1 / -1}
  .footer__top > :last-child ul{display:grid;grid-template-columns:1fr 1fr;
    gap:0 20px;align-items:start}
  .footer__top > :last-child .btn{margin-top:12px}
  .footer li a,.footer li span{font-size:.88rem;padding-block:0;
    min-height:44px;display:flex;align-items:center}
  .footer li{margin-bottom:0}
    .footer__bottom{padding-block:14px 20px;font-size:.74rem;gap:4px}

  /* ── Sections : titres et respiration ────────────────────────── */
  .sechead{margin-bottom:16px;gap:12px}
  .sechead .btn{--bh:42px;font-size:.8rem}
  .cta{padding:30px 20px}
  .quote{gap:18px}
  .quote__art{aspect-ratio:16/10}
  .quote__art img{width:32%}
}

@media(max-width:420px){
  .hero__title{font-size:clamp(1.7rem,10.6vw,2.4rem)}
  .work .workcard,.work .workcard--wide{flex:0 0 84%}
  .sites .sitecard{flex:0 0 86%}
  .fan__card{flex:0 0 46%}
}

/* Sans souris, le survol n'existe pas : les logos restent en couleur */
@media(hover:none){
  .client img,.marquee--logos img{filter:none;opacity:.95}
}

/* Dans une bande inversée, les cartes gardent leur fond clair : sans ce
   rappel elles héritent de la couleur de texte de la bande (blanc sur
   blanc) et leurs titres disparaissent. */
.band .fan__card,
.band .sitecard,
.band .workcard,
.band .cover__card,
.band .client{color:var(--ink)}
.band .fan__t,
.band .sitecard__name,
.band .workcard__title,
.band .cover__title{color:var(--ink)}
.band .fan__cap,
.band .sitecard__foot,
.band .workcard__body,
.band .cover__meta{background:var(--bg);color:var(--ink)}
.band .sitecard__kind,
.band .workcard__cat,
.band .cover__cat{color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════
   Le fondateur
   ══════════════════════════════════════════════════════════════════ */
.founder__grid{display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(22px,4vw,64px);align-items:center}
.founder__ph{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-3);aspect-ratio:4/5}
.founder__ph img{width:100%;height:100%;object-fit:cover;object-position:62% 32%;
  transition:transform 1.1s var(--ease-out)}
.founder__ph:hover img{transform:scale(1.03)}
.founder__role{font-size:clamp(1.05rem,1.9vw,1.5rem);color:var(--ink-2);margin-top:2px}
.founder__body{display:grid;gap:14px;margin-top:clamp(14px,2vw,22px);
  font-size:clamp(.95rem,1.15vw,1.06rem);color:var(--ink-2);max-width:56ch}
.vision .sechead{align-items:flex-end}
@media(max-width:860px){
  .founder__grid{grid-template-columns:1fr;gap:18px}
  .founder__ph{aspect-ratio:5/4}
  .founder__ph img{object-position:62% 28%}
  .founder__body{gap:11px;font-size:.93rem}
  .founder__role{font-size:1.05rem}
  .vision .sechead__l h2{max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   L'empreinte qui accompagne le défilement
   Elle avance le long d'un rail discret et bascule légèrement de
   gauche à droite, comme une marche. Elle indique aussi la
   progression dans la page.
   ══════════════════════════════════════════════════════════════════ */
.trail{position:fixed;right:clamp(10px,1.6vw,26px);top:0;bottom:0;width:34px;z-index:85;
  pointer-events:none;display:flex;justify-content:center;
  padding-block:clamp(88px,12vh,140px) clamp(48px,8vh,90px)}
.trail__foot{position:absolute;top:0;left:50%;width:clamp(15px,1.7vw,21px);height:auto;
  transform:translate(-50%,0);
  filter:drop-shadow(0 3px 8px rgba(233,96,2,.34));
  will-change:transform;transition:opacity .4s var(--ease)}
.trail.is-idle .trail__foot{opacity:.55}
@media(max-width:820px){
  .trail{right:6px;width:26px;
    padding-block:clamp(74px,11vh,110px) clamp(40px,7vh,70px)}
  .trail__foot{width:14px}
}
@media(max-width:400px){.trail{right:3px;width:22px}.trail__foot{width:12px}}
@media(prefers-reduced-motion:reduce){.trail{display:none}}

/* ── Pages légales ───────────────────────────────────────────────── */
.legal{max-width:72ch;display:grid;gap:clamp(22px,3vw,38px)}
.legal__bloc h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,1.9vw,1.4rem);letter-spacing:-.02em;margin-bottom:10px}
.legal__bloc p{color:var(--ink-2);font-size:.96rem;line-height:1.65;margin-bottom:10px}
.legal__bloc p:last-child{margin-bottom:0}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--bg-2);padding:2px 6px;border-radius:5px}
.footer__legal{display:flex;gap:16px;flex-wrap:wrap}

/* ── WhatsApp permanent : au Sénégal c'est le canal commercial ───── */
.wa{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:95;
  display:inline-flex;align-items:center;gap:.5em;height:52px;padding:0 18px;
  border-radius:999px;background:#25D366;color:#fff;font-weight:600;font-size:.9rem;
  box-shadow:0 8px 26px -8px rgba(37,211,102,.7);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.wa .ico{width:20px;height:20px;fill:#fff}
.wa:hover{transform:translateY(-3px);box-shadow:0 14px 34px -8px rgba(37,211,102,.8)}
.wa:active{transform:scale(.97)}
@media(max-width:820px){
  .wa{height:54px;width:54px;padding:0;justify-content:center;right:12px;bottom:14px}
  .wa span{display:none}
  .wa .ico{width:26px;height:26px}
  /* le rail du pied s'écarte pour ne pas passer dessous */
  .trail{padding-bottom:88px}
}

/* ══════════════════════════════════════════════════════════════════
   Navigation en bas sur mobile
   Le pouce atteint le bas de l'écran, pas le haut. La pilule y est
   donc déplacée, avec ses libellés rendus visibles.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  .nav__center{
    position:fixed;left:50%;translate:-50% 0;
    bottom:calc(11px + env(safe-area-inset-bottom,0px));
    z-index:96;flex-direction:column-reverse;gap:5px;
  }
  .navpill{
    padding:6px 7px;background:var(--pill);border:1px solid var(--line-2);
    backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
    box-shadow:0 10px 30px -12px rgba(11,11,12,.4);
  }
  html[data-theme="dark"] .navpill{box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
  .navpill a:not(.navmark){display:inline-flex;font-size:.86rem;padding:8px 14px;min-height:40px}
  .nav__here{display:block;font-size:.6rem;letter-spacing:.13em}

  /* la barre du haut ne garde que les commandes secondaires */
  .nav{justify-content:flex-end;gap:8px;padding-top:10px}

  /* WhatsApp remonte au-dessus de la barre */
  .wa{bottom:calc(102px + env(safe-area-inset-bottom,0px))}
  /* le rail de l'empreinte s'arrête avant la barre */
  .trail{padding-bottom:calc(172px + env(safe-area-inset-bottom,0px))}
  /* et le pied de page laisse la place */
  .footer__bottom{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}

/* Une ligne sur grand écran, retour à la ligne autorisé sur mobile :
   forcé partout, ce titre débordait de 141 px sur un écran de 390. */
.nowrap-lg{white-space:nowrap}
@media(max-width:860px){.nowrap-lg{white-space:normal}}

/* Liens légaux : hauteur tactile suffisante */
.footer__legal a{min-height:44px;display:inline-flex;align-items:center}

/* ══════════════════════════════════════════════════════════════════
   Carrousel : seule la carte active porte sa légende.
   Les cartes empilées derrière affichaient la leur, ce qui produisait
   des textes superposés en travers de la vue.
   ══════════════════════════════════════════════════════════════════ */
.cover__item:not(.is-active) .cover__meta{opacity:0;pointer-events:none}
.cover__meta{transition:opacity var(--dur) var(--ease)}
.cover__item:not(.is-active) .cover__card{box-shadow:0 18px 40px -26px rgba(11,11,12,.5)}

/* Bouton WhatsApp : icône seule, empreinte réduite.
   Avec son libellé il venait se poser sur des titres de section. */
.wa{width:56px;padding:0;justify-content:center}
.wa span{display:none}
.wa .ico{width:26px;height:26px}

/* ══════════════════════════════════════════════════════════════════
   Allègement des filets
   Le site comptait 47 règles de bordure. On garde uniquement celles
   qui séparent des lignes de liste (services, coordonnées) ou une
   grande zone structurelle. Partout ailleurs, l'espace et un aplat
   discret font le même travail sans quadriller la page.
   ══════════════════════════════════════════════════════════════════ */

/* Bandeaux : un aplat plutôt que deux lignes */
.trustbar{border-block:0;background:var(--bg-2)}
.marquee{border-block:0;background:var(--bg-2)}
.band .marquee{background:color-mix(in srgb,var(--bg) 8%,transparent)}

/* Chiffres : un bloc respirant, sans quadrillage */
.stats{border-block:0;background:var(--bg-2);border-radius:var(--r-lg);
  overflow:hidden;padding:clamp(6px,1vw,14px)}
.stat{border-right:0}
.stat:nth-child(-n+2){border-bottom:0}
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr);gap:2px}
  .stat:nth-child(2n){border-right:0}
}

/* Mur clients : les tuiles blanches se suffisent */
.clients{border-top:0;border-left:0;gap:6px}
.client{border-right:0;border-bottom:0;border-radius:var(--r-sm)}
@media(max-width:860px){
  .clients{gap:6px;border-top:0}
  .client{border-left:0}
}

/* Cartes et vignettes : le fond porte la forme, pas le trait */
.workcard{border-color:transparent}
.workcard:hover{border-color:var(--line)}
.step{border:0;background:var(--bg-2)}
.step__media{background:var(--bg-3)}
.gallery figure{border:0}
.quote__art{border:0}
.founder__ph{border:0}
.step__list span{border:0;background:var(--bg-3);color:var(--ink-2)}
.band .step__list span{background:color-mix(in srgb,var(--bg) 12%,transparent)}

/* Métadonnées de projet : une seule ligne, en tête */
.pmeta div{border-right:0}
@media(max-width:700px){.pmeta div{border-bottom:0}}
.pmeta{gap:4px 18px}

/* Pied de page : la ligne du haut suffit */
.footer__bottom{border-top:0}

/* Carrousel : la légende se distingue par son fond */
.cover__meta{border-top:0}
.cover__card{border-color:transparent}

/* Un titre en une seule ligne ne peut pas cohabiter côte à côte avec un
   paragraphe : il ne se rétrécit pas et vient le recouvrir. Cet en-tête
   passe donc en colonne. */
.sechead--stack{flex-direction:column;align-items:flex-start;gap:10px}
.sechead--stack .lead{max-width:60ch}
/* filet de sécurité : tout titre nowrap dans un en-tête force l'empilement */
.sechead:has(.nowrap-lg){flex-direction:column;align-items:flex-start;gap:10px}

/* ══════════════════════════════════════════════════════════════════
   Motion & vidéo — hébergement Bunny Stream
   Rien n'est chargé depuis Bunny tant que l'utilisateur n'a pas
   cliqué : l'aperçu est un dégradé décodé localement depuis le
   blurhash fourni par l'API (42 Ko pour les 20 vidéos).
   ══════════════════════════════════════════════════════════════════ */
.vgroup{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:.78rem;letter-spacing:.12em;color:var(--muted);
  display:flex;align-items:center;gap:.6em;margin-bottom:12px}
.vgroup span{font-size:.72rem;padding:2px 9px;border-radius:999px;
  background:var(--bg-2);color:var(--ink-2)}

.vrail{display:flex;flex-wrap:nowrap;gap:var(--gap);overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:2px var(--pad) 14px;margin-inline:calc(var(--pad) * -1)}
.vrail::-webkit-scrollbar{display:none}
.vrail > *{scroll-snap-align:center;flex:0 0 auto}

.vcard{display:flex;flex-direction:column;gap:9px;text-align:left}
.vrail--land .vcard{width:clamp(240px,30vw,380px)}
.vrail--port .vcard{width:clamp(150px,19vw,240px)}
.vcard__ph{position:relative;display:block;border-radius:var(--r);overflow:hidden;
  background:var(--bg-3)}
.vrail--land .vcard__ph{aspect-ratio:16/9}
.vrail--port .vcard__ph{aspect-ratio:9/16}
.vcard__v{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-3)}
.vcard__btn{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;
  cursor:pointer;display:grid;place-items:center;padding:0}
.vcard__sound{display:none}
.vcard.is-sound .vcard__play{display:none}
.vcard.is-sound .vcard__sound{display:grid;place-items:center;
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);color:#0B0B0C}
.vcard.is-sound .vcard__sound svg{width:20px;height:20px}
/* le bouton s'efface pendant l'aperçu pour ne pas masquer l'image */
.vcard.is-preview .vcard__play{opacity:0;transform:scale(.8)}
.vcard__play{position:absolute;inset:0;margin:auto;width:54px;height:54px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#0B0B0C;
  box-shadow:0 8px 26px -10px rgba(0,0,0,.6);
  transition:transform .35s var(--ease-out),background .3s var(--ease)}
.vcard__play svg{width:20px;height:20px;margin-left:2px}
.vcard:hover .vcard__play{transform:scale(1.06);background:#fff}
.vcard__play{transition:transform .3s var(--ease-out),opacity .3s var(--ease),background .3s}
.vcard__meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.vcard__t{font-size:.9rem;font-weight:600;line-height:1.25}
.vcard__d{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}


@media(max-width:820px){
  .vrail--land .vcard{width:82vw}
  .vrail--port .vcard{width:52vw}
  .vcard__play{width:46px;height:46px}
}

/* Les 20 cartes vidéo hors écran ne sont pas rendues : c'est elles qui
   produisaient une frame à 200 ms à l'entrée de la section. */
.vcard{content-visibility:auto;contain-intrinsic-size:auto 260px}


/* Bouton secondaire du bloc CTA.
   `color:inherit` ne suffisait pas — la valeur calculée restait blanche.
   On pose donc la couleur explicitement : var(--bg) est la couleur de
   texte du bloc inversé, donc correcte dans les deux thèmes. */

/* ══════════════════════════════════════════════════════════════════
   Bloc d'appel à l'action : toujours sombre, dans les deux thèmes.
   L'inversion selon le thème rendait le bouton secondaire blanc sur
   blanc, et la cascade ne permettait pas de le corriger de façon
   fiable. Un panneau sombre constant tranche dans les deux cas et
   supprime toute la classe de bug.
   ══════════════════════════════════════════════════════════════════ */
.cta{background:#0B0B0C;color:#FAFAFA}
.cta .display,.cta h2{color:#FAFAFA}
.cta .eyebrow{color:rgba(250,250,250,.62)}
.cta .lead{color:rgba(250,250,250,.82)}
.cta .btn--light{color:#FAFAFA;border:1px solid rgba(250,250,250,.4);opacity:1}
.cta .btn--light:hover{background:#FAFAFA;color:#0B0B0C;border-color:#FAFAFA}

/* ══════════════════════════════════════════════════════════════════
   Protection des visuels et confort de défilement
   ══════════════════════════════════════════════════════════════════ */
img,video{
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;              /* pas de menu « enregistrer » au appui long */
}
/* le texte reste sélectionnable : un prospect doit pouvoir copier le numéro */
p,h1,h2,h3,h4,li,span,a,td,th,dd,dt{user-select:text;-webkit-user-select:text}

/* Ancres : la cible ne se cale plus sous la barre fixe */
html{scroll-padding-top:clamp(80px,12vh,120px)}
@media(max-width:820px){html{scroll-padding-bottom:110px}}

/* Les rails horizontaux ne doivent jamais capturer le défilement vertical */
/* « contain » sur les deux axes retenait la molette : au survol d'un rail
   vidéo — seul défileur horizontal présent à toutes les largeurs — le
   défilement vertical ne remontait plus à la page, qui restait figée.
   On ne contient que l'axe horizontal, ce qui empêche toujours le geste
   de retour du navigateur, et on laisse le vertical se propager. */
.work,.sites,.fan,.clients,.vrail,.rail{
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

/* Élan de défilement fluide sur iOS pour tous les conteneurs défilants */
.work,.sites,.fan,.clients,.vrail,.rail,.gallery{-webkit-overflow-scrolling:touch}

/* ── bandeau panoramique (page services) ───────────────────────────── */
.bandeau{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3)}
.bandeau img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:2/1}
/* Le 25/8 d'origine convenait à des photos larges ; les nouvelles
   bannières sont composées en 2/1, et un recadrage plus serré
   couperait la couronne de Néfertiti comme son socle. */
.bandeau__t{position:absolute;left:clamp(18px,4vw,48px);bottom:clamp(16px,3vw,38px);
  margin:0;color:#FAFAFA;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.55)}
@media(max-width:700px){
  .bandeau img{aspect-ratio:16/9}
  .bandeau__t{max-width:10ch}
}

/* ── échelle typographique mobile ──────────────────────────────────
   Les tailles de bureau reposaient sur des planchers en rem fixes :
   sur 375 px on obtenait 43 / 37 / 30 / 24 px, avec des écarts
   irréguliers (1,17 puis 1,21 puis 1,27). On repasse sur une
   progression constante de 1,18, pilotée par la largeur d'écran.   */
@media(max-width:700px){
  .h-xxl{font-size:clamp(2.15rem,9.2vw,3.1rem)}
  .h-xl {font-size:clamp(1.85rem,7.8vw,2.65rem)}
  .h-lg {font-size:clamp(1.55rem,6.6vw,2.25rem)}
  .h-md {font-size:clamp(1.30rem,5.6vw,1.90rem)}

  /* menu déroulant : aligné sur l'échelle de la page */
  .mobilemenu nav:not(.socials) a{font-size:clamp(1.7rem,7.4vw,2.5rem);padding-block:8px}
  /* réseaux sociaux : une seule rangée, juste sous le numéro */
  .mobilemenu__foot .socials{display:flex;flex-wrap:nowrap;justify-content:center;
    gap:2px;margin-top:2px}
  .mobilemenu__foot .socials a{width:clamp(38px,11.5vw,46px);height:44px}
}

/* ── menu mobile ouvert : la barre du bas et le bouton flottant
   s'effacent, sinon ils recouvrent les réseaux sociaux du menu ──── */
@media(max-width:780px){
  body.menu-open .nav__center,
  body.menu-open .wa{opacity:0;pointer-events:none;
    transform:translateY(140%);transition:opacity .25s var(--ease),transform .35s var(--ease-out)}
  /* le menu se répartit au lieu de laisser un grand vide au milieu */
  .mobilemenu{justify-content:flex-start;
    padding-block:clamp(88px,13vh,120px) calc(26px + env(safe-area-inset-bottom,0px))}
  .mobilemenu__foot{padding-top:20px}
}

/* ── ajustements mobile relevés à l'audit ──────────────────────────── */
@media(max-width:700px){
  /* le bas de page mêlait copyright, liens et ville sur des lignes
     mal alignées : on empile proprement, tout aligné à gauche */
  /* Le bas de page alignait trois lignes de longueurs très inégales, la
     ville restant orpheline en dernier. On le lit maintenant en DEUX
     groupes : les liens d'abord (ce sur quoi on peut cliquer), puis le
     copyright et la ville resserrés en un seul bloc d'informations. */
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:0;
    padding-block:18px 22px}
  .footer__legal{order:-1;display:flex;gap:22px;margin-bottom:16px}
  .footer__bottom > span{line-height:1.75}
  /* le titre du bandeau tombait sur quatre lignes */
  .bandeau__t{max-width:13ch}
}

/* ── cibles tactiles : 44 px minimum (recommandation WCAG 2.5.5) ────
   L'audit relevait des liens à 40-43 px : navigation basse, boutons
   « petits » et icônes de réseaux sociaux.                          */
@media(max-width:780px){
  .navpill a:not(.navmark){min-height:44px;align-items:center}
  .btn,.btn--sm{min-height:44px}
  .socials a{min-width:44px;min-height:44px}
  .mobilemenu__foot .socials a{width:44px;height:44px}
  .mobilemenu__foot .socials{gap:calc((100% - 264px) / 5)}
  .footer__legal a{display:inline-flex;align-items:center;min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════
   Harmonisation mobile
   Le site employait deux jetons de rayon en parallèle pour des cartes
   de même poids visuel : --r (16px) pour les sites, vidéos et éventail,
   --r-lg (22px) pour les projets, la méthode et les bandeaux. Sur
   grand écran l'écart passe inaperçu ; sur mobile, où toutes les
   cartes ont la même largeur et se suivent verticalement, il se voit.
   On fait converger les jetons : un seul rayon pour toutes les cartes.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  :root{
    --r-sm:10px;
    --r:18px;      /* sites, vidéos, éventail   */
    --r-lg:18px;   /* projets, méthode, bandeaux, portrait */
    --r-xl:26px;   /* bloc d'appel, seul élément de ce niveau */
  }

  /* Le bloc de chiffres avait 6 px de marge intérieure pour un rayon
     de 22 : les nombres venaient buter contre l'angle arrondi. On lui
     donne le même souffle que les autres cartes. */
  .stats{padding:14px 10px}
  .stat{padding:14px 10px}

  /* En-têtes de section : le bouton bordé « Voir la grille complète »
     était plus large et plus lourd que le titre qu'il accompagnait.
     Sur mobile il devient un lien : le titre reprend la main, la
     hauteur de page ne bouge pas, la cible tactile reste à 44 px. */
  .sechead{align-items:center}
  .sechead .btn--ghost{
    border:0;background:none;padding-inline:0;
    color:var(--brand-txt);font-weight:600;
    min-height:44px;--bh:44px}
  .sechead .btn--ghost:hover{background:none;transform:none}
}


/* ══════════════════════════════════════════════════════════════════
   Couleur de marque appliquée au texte
   L'orange #E96002 ne donne que 3,4:1 sur fond clair : sous le minimum
   de 4,5:1 exigé pour du texte. Il tenait pour un aplat, pas pour un
   libellé. On sépare donc la couleur d'aplat (--brand-3) de la couleur
   de texte (--brand-txt), et on l'accroche à la SURFACE plutôt qu'au
   thème : « .band » emploie var(--ink) en fond, donc elle s'inverse —
   sombre en thème clair, claire en thème sombre.
   ══════════════════════════════════════════════════════════════════ */
:root{ --brand-txt:#B04302; }                        /* 4,9:1 sur surface claire */
html[data-theme="dark"]{ --brand-txt:#F28705; }      /* 7,0:1 sur surface sombre */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --brand-txt:#F28705; }
}
.band{ --brand-txt:#F28705; }
html[data-theme="dark"] .band{ --brand-txt:#B04302; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band{ --brand-txt:#B04302; }
}
/* le sur-titre des bandes était posé à 58 % d'opacité : trop pâle */
.band .eyebrow{color:color-mix(in srgb,var(--bg) 72%,transparent)}
html[data-theme="dark"] .band .eyebrow{color:rgba(0,0,0,.66)}

/* Le gris secondaire souffrait du même défaut que la couleur de marque :
   il ne s'inversait pas avec la bande. Gris foncé sur bande sombre =
   3,3:1 ; gris clair sur bande claire = 3,2:1. On l'inverse aussi. */
.band{ --muted:#8C8C94; }
html[data-theme="dark"] .band{ --muted:#636369; }
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band{ --muted:#636369; }
}

/* Titre du bandeau : le sujet de la photo occupe la moitié gauche, le
   texte se posait dessus. On le déplace dans la zone libre à droite et
   on le centre verticalement — sans « transform », pour ne pas entrer en
   conflit avec les animations d'apparition. Le voile suit le texte :
   il vient de la droite au lieu du bas. */
.bandeau{position:relative}
.bandeau::after{content:"";position:absolute;inset:0 0 0 auto;width:66%;
  background:linear-gradient(to left,rgba(8,8,10,.66),rgba(8,8,10,0));
  pointer-events:none}
.bandeau__t{z-index:1;
  left:auto;right:clamp(18px,4vw,48px);
  top:0;bottom:0;
  display:grid;align-content:center;justify-items:end;
  text-align:right}

/* Sur grand écran l'image du bandeau fait près de 600 px de haut : un
   titre à 40 px s'y perdait. On lui donne l'échelle d'un vrai titre de
   section pour qu'il tienne tête à l'image. */
@media(min-width:861px){
  .bandeau__t{font-size:clamp(2.9rem,5.2vw,4.8rem);max-width:13ch;line-height:.95}
}

/* Une carte posée DANS une bande garde son propre fond : elle ne suit
   donc pas l'inversion de la bande. On rétablit chez elle les jetons du
   thème courant, sinon le gris inversé devient illisible sur la carte. */
.band .sitecard, .band .workcard, .band .step, .band .cover__card,
.band .stats, .band .fan__card, .band .founder__ph{
  --muted:#636369; --brand-txt:#B04302;
}
html[data-theme="dark"] .band .sitecard, html[data-theme="dark"] .band .workcard,
html[data-theme="dark"] .band .step, html[data-theme="dark"] .band .cover__card,
html[data-theme="dark"] .band .stats, html[data-theme="dark"] .band .fan__card,
html[data-theme="dark"] .band .founder__ph{
  --muted:#8C8C94; --brand-txt:#F28705;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .band .sitecard,
  :root:not([data-theme="light"]) .band .workcard,
  :root:not([data-theme="light"]) .band .step,
  :root:not([data-theme="light"]) .band .cover__card,
  :root:not([data-theme="light"]) .band .stats,
  :root:not([data-theme="light"]) .band .fan__card,
  :root:not([data-theme="light"]) .band .founder__ph{
    --muted:#8C8C94; --brand-txt:#F28705;
  }
}

/* Bouton principal : le libellé blanc sur le dégradé de marque ne donnait
   que 1,7 à 3,4:1 selon l'endroit du dégradé — très en dessous des 4,5:1
   exigés pour du texte. Le dégradé est conservé tel quel ; seul le libellé
   passe en encre foncée, ce qui remonte le contraste à 5,8–11,7:1. */
.btn--brand{color:#0B0B0C}
.btn--brand svg{stroke:#0B0B0C}

/* Le badge d'accroche ne porte plus qu'un nom : la pastille orange, le
   grand écart entre éléments et la casse courante n'ont plus lieu d'être.
   On le traite en étiquette de marque, lettres espacées. */
.badge{gap:0;letter-spacing:.09em;font-weight:600;text-transform:uppercase;font-size:.72rem}

/* ══════════════════════════════════════════════════════════════════
   Déclenchement de l'animation de carte sur mobile — Services et Projets
   Les états sont définis plus haut, avec « :hover ». Au doigt le survol
   n'existe pas : le script pose « is-vedette » sur la carte la plus proche
   du centre de l'écran, ce qui rejoue exactement le même état.
   Ici on ne garde que le retour à l'appui, propre au tactile.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* Appui : retour immédiat, posé après l'état actif pour le supplanter.
     Une transformation ne décale pas la mise en page. */
  .workcard:active,.step:active{scale:.985!important;translate:0 -2px!important;
    transition-duration:.12s}
}

/* Si l'utilisateur limite les animations : plus de déplacement ni de zoom,
   on conserve seulement le changement de teinte, qui ne bouge pas. */
@media(prefers-reduced-motion:reduce){
  .workcard,.workcard:hover,.workcard.is-vedette,
  .step,.step:hover,.step.is-vedette{translate:none!important;scale:none!important}
  .workcard:hover .workcard__media img,.workcard.is-vedette .workcard__media img,
  .step:hover .step__media img,.step.is-vedette .step__media img{transform:none}
  .step:hover .btn,.step.is-vedette .btn{transform:none}
}


/* ══════════════════════════════════════════════════════════════════
   LE PANTHÉON — cartes à relique, MOBILE UNIQUEMENT
   Sur ordinateur les cartes gardent leur affichage d'origine, en deux
   colonnes. Sur mobile, le visuel est un objet panoramique : le recadrer
   en hauteur le décapiterait, la carte passe donc en une seule colonne
   avec le panoramique en bandeau.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .step{grid-template-columns:1fr}
  .step__media{aspect-ratio:2/1;min-height:0}
  .step__txt{padding:clamp(18px,2.4vw,36px);gap:9px}
}

/* Le nom divin remplace le numéro : il lui faut de la place, à toutes
   les tailles d'écran, sans quoi « SESHAT » déborderait de sa colonne. */
.step__n{font-size:.74rem;letter-spacing:.2em;display:inline-flex;
  align-items:center;gap:7px}
.step__n .ico{width:17px;height:17px}
.srvrow{grid-template-columns:104px minmax(0,1fr) minmax(0,30ch) 46px}
.srvrow__n{font-size:.72rem;letter-spacing:.14em;line-height:1.2;
  display:inline-flex;align-items:center;gap:6px}
.srvrow__n .ico{width:16px;height:16px}

/* La sentence : une ligne gravée entre le nom et le corps.
   Sans filet vertical — l'italique et la graisse du caractère de titrage
   suffisent à la détacher du corps de texte. */
.step__mot{
  font-family:var(--f-body);font-weight:500;font-style:italic;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.3;
  color:var(--ink);margin:0;max-width:34ch;
}
.step__cta{margin-top:8px}

@media(max-width:860px){
  .srvrow{grid-template-columns:92px 1fr 42px}
}
@media(max-width:700px){
  .step__mot{font-size:1rem;max-width:none}
}

/* ══════════════════════════════════════════════════════════════════
   Carrousel des blocs Panthéon et Passage — mobile uniquement
   Même mécanique que le carrousel des projets, mais les cartes sont
   plus hautes : relique panoramique, sentence, texte, jalons et bouton.
   La scène s'adapte à leur hauteur réelle, mesurée par le script.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* la carte occupe tout l'item : plus de marge basse en pile */
  /* les cartes du carrousel ne sont plus empilées : on annule le
     positionnement absolu hérité du portefeuille */
}


.step__cta{margin-top:8px}

/* Les cartes de côté sont réduites : leurs boutons tombent à 28 px, sous
   le seuil tactile. On les rend inertes — un appui sur une carte latérale
   la ramène au centre, ce qui est le geste attendu ; ses commandes ne
   redeviennent visables qu'une fois la carte au premier plan. */
.cover__item:not(.is-active) .btn,
.cover__item:not(.is-active) .arrow-c{pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   Cartes projet — empilement collant sur mobile
   Même mécanique que Services et Méthode : chaque carte se fige et la
   suivante la recouvre, en laissant un bandeau. Tout est fait par
   « position: sticky », donc composé par le navigateur.
   Le bandeau ne montrerait qu'une tranche de couverture : on y pose le
   nom du domaine, sans quoi la pile serait indéchiffrable.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .work{
    display:block!important;overflow:visible!important;
    scroll-snap-type:none!important;
  }
  .work .workcard,.work .workcard--wide{
    position:sticky;
    top:calc(var(--proj-haut) + var(--i, 0) * var(--proj-bande));
    width:auto!important;flex:none!important;
    margin:0 0 clamp(30px,5vh,56px)!important;
    content-visibility:visible!important;
  }
  .work .workcard:last-child{margin-bottom:0!important}
  :root{ --proj-haut:66px; --proj-bande:62px; }

  .workcard__bande{
    position:absolute;left:0;right:0;top:0;height:var(--proj-bande);
    display:flex;align-items:center;padding:0 16px;
    font-family:var(--f-display);font-size:1.05rem;letter-spacing:.03em;
    line-height:1.1;color:#FAFAFA;
    background:linear-gradient(to bottom,rgba(8,8,10,.86),rgba(8,8,10,.36) 66%,rgba(8,8,10,0));
    z-index:3;pointer-events:none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Empilement collant — cartes Services et Méthode
   Chaque carte se fige à son tour et la suivante vient la recouvrir ;
   il reste de chacune un bandeau portant son nom, et les bandeaux
   s'accumulent en haut de l'écran.
   Tout repose sur « position: sticky » : c'est le navigateur qui
   compose, pas un script. Aucune valeur n'est recalculée au
   défilement, donc rien ne peut retarder sur le doigt.
   La course vient de l'écart entre les cartes, pas d'une piste
   artificielle : la page ne s'allonge que du strict nécessaire.
   ══════════════════════════════════════════════════════════════════ */
/* Le bandeau doit contenir le nom divin en entier. Mesuré : avec le
   texte centré verticalement et 43 px de marge, le nom tombait à
   43-62 px et se faisait trancher par un bandeau de 52. On aligne le
   texte en haut — comme sur la référence — et on cale le bandeau sur
   la position réelle du nom. */
/* Bandeau calé sur la hauteur réelle de l'en-tête : nom et titre
   entiers, rien du corps qui dépasse. Mesuré, pas estimé. */
:root{ --pile-haut:80px; --pile-bande:84px; }
/* La carte se lit en trois morceaux : l'en-tête (nom + titre), le
   visuel, puis le corps. Sur grand écran le visuel prend une colonne
   entière et le texte l'autre ; sur mobile les trois s'empilent, le
   visuel entre l'en-tête et le corps — c'est l'ordre du code. */
.step{grid-template-areas:"tete media" "corps media";align-content:start}
.step:nth-of-type(odd){grid-template-areas:"media tete" "media corps"}
.step__tete{grid-area:tete;padding:24px clamp(18px,2.4vw,36px) 0}
.step__corps{grid-area:corps;padding:10px clamp(18px,2.4vw,36px) clamp(18px,2.4vw,36px);
  display:flex;flex-direction:column;gap:9px}
.step__media{grid-area:media}

.step{
  position:sticky;
  top:calc(var(--pile-haut) + var(--i, 0) * var(--pile-bande));
  margin-bottom:clamp(38px,6vh,72px);
}
/* la dernière carte n'a personne à laisser passer */
.step:last-of-type{margin-bottom:0}

/* Le bandeau qui dépasse doit porter le nom du métier : sur mobile on
   remet donc le texte AVANT le visuel, comme sur la référence. */
@media(max-width:860px){
  :root{ --pile-haut:70px; --pile-bande:72px; }
  /* trois rangs : en-tête, visuel, corps — dans les deux sens
     d'alternance, puisqu'il n'y a plus qu'une colonne */
  .step,.step:nth-of-type(odd){
    grid-template-columns:1fr;
    grid-template-areas:"tete" "media" "corps";
  }
  .step__tete{padding:15px 18px 9px}
  .step__corps{padding:14px 18px 20px}
}
@media(max-width:700px){
  /* même bandeau qu'en tablette : il doit contenir le nom ET le titre,
     mesurés à 15-33 px et 40-64 px du haut de la carte */
  :root{ --pile-haut:66px; --pile-bande:72px; }
}

/* Écrans courts : sans plafond, une carte plus haute que la fenêtre
   ne pourrait jamais se figer proprement. */
@media(min-width:861px){
  .step{max-height:none}
}

/* Liens en ligne dans les textes légaux : à 25 px de haut ils tombaient
   sous le seuil tactile de 44 px. On étend la zone de contact par une
   marge intérieure compensée par une marge extérieure négative — la
   cible grandit, l'interlignage ne bouge pas d'un pixel. */
.legal__bloc a,.legal__bloc .link-u{
  display:inline-block;
  padding-block:10px;margin-block:-10px;
}

/* Devise du bandeau composée en hiéroglyphes : ni capitales ni
   interlettrage, ces réglages sont faits pour l'alphabet latin.
   Noto n'a qu'une graisse — en demander plus produirait un faux gras. */
.marquee__hg{
  font-family:'Hieroglyphes','Bebas Neue',sans-serif;
  font-size:1.5em;line-height:1;
  font-weight:400;letter-spacing:0;text-transform:none;
  vertical-align:-.18em;
}

/* Bannière d'accueil allégée sur mobile : les deux boutons d'appel
   surchargeaient le premier écran. Rien n'est perdu — WhatsApp reste
   sur le bouton flottant et dans le pied de page, les réalisations
   dans la barre de navigation basse et le menu. */
@media(max-width:700px){
  /* on épargne la page 404 : ses deux boutons sont la seule sortie,
     les masquer y enfermerait le visiteur */
  .hero__cta:not(.hero__cta--sortie){display:none}
  .hero__sub{margin-bottom:0}
}

/* Le carrousel des sites reprend le composant des projets. Ses cartes
   sont des boutons d'aperçu, pas des liens : on neutralise les styles
   de bouton hérités et on rétablit la disposition d'une carte. */
.cover--sites .cover__card{
  appearance:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  background:var(--bg-2);text-align:left;cursor:pointer;
  display:flex;flex-direction:column;width:100%;
}
.cover--sites .cover__media{display:block;position:relative;overflow:hidden}
.cover--sites .cover__meta{display:flex;align-items:center;justify-content:space-between}
.cover--sites .cover__title{display:block}

/* Bannière d'accueil sur mobile : on lui donne de l'air.
   Les respirations sont élargies entre l'étiquette, le titre et
   l'accroche, et le bas de bannière est dégagé — sans les deux boutons
   retirés, l'ensemble tenait trop serré en haut de page. */
@media(max-width:700px){
  .hero{padding-top:clamp(112px,17vw,150px);padding-bottom:clamp(40px,9vw,64px)}
  .hero .badge{margin-bottom:6px}
  .hero__title{margin-top:18px}
  .hero__sub{margin-top:20px;max-width:34ch;line-height:1.62}
}

/* ══════════════════════════════════════════════════════════════════════
   Bannière « Plateau de Gizeh » — scène 3D calculée par le navigateur
   Le titre, l'accroche et les boutons du site viennent se poser dessus,
   avec leur balisage d'origine. Tout est préfixé s1g- : rien ne fuit.
   ══════════════════════════════════════════════════════════════════════ */
/* La bannière est un fond fixe : les sections suivantes remontent
   par-dessus, exactement comme les cartes empilées de Services et
   Méthode. Il n'y a donc plus de course de défilement vide entre la fin
   de la scène et la barre de confiance. */
.s1g{--s1g-noir:#08080A;position:fixed;top:0;left:0;right:0;
  height:100svh;z-index:0;background:var(--s1g-noir)}
/* la place du premier écran est réservée par la section qui suit */
.s1g + *{margin-top:100svh}
/* Tout ce qui suit passe au-dessus de la bannière.
   Le fond opaque est posé sur des sélecteurs d'ÉLÉMENTS seuls : une
   règle de classe comme « .band{background:var(--ink)} » l'emporte donc
   naturellement. Avec « main > *:not(.s1g) », plus spécifique, les
   bandes sombres viraient au blanc. */
main > *:not(.s1g),
body > footer{position:relative;z-index:1}
main > section, main > div, main > article, body > footer{background:var(--bg)}
.s1g *{box-sizing:border-box}
.s1g-stage{
  /* La section porte déjà la position fixe : la scène n'a plus besoin
     d'être collante, elle occupe simplement tout le cadre. */
  position:relative;height:100svh;min-height:460px;
  overflow:hidden;background:var(--s1g-noir);
}
.s1g-gl{position:absolute;inset:0;display:block;width:100%;height:100%}
/* repli : si WebGL manque ou se perd, un dégradé dans les mêmes tons */
.s1g-fallback{position:absolute;inset:0;z-index:0;display:block;
  background:linear-gradient(180deg,#08080A 0%,#0a0a0d 52%,#150b07 78%,#3a1608 90%,#0b0908 100%)}
.s1g-vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(118% 100% at 50% 56%, rgba(8,8,10,0) 46%, rgba(8,8,10,.55) 84%, rgba(8,8,10,.92) 100%),
  linear-gradient(180deg, rgba(8,8,10,.80) 0%, rgba(8,8,10,0) 22%),
  linear-gradient(0deg,  rgba(8,8,10,.62) 0%, rgba(8,8,10,0) 18%)}

/* Le contenu du hero, centré comme il l'est aujourd'hui sur le site.
   Il laisse passer la souris vers la scène, sauf sur ce qui se clique. */
.s1g-content{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 clamp(16px,4vw,40px);
  pointer-events:none;will-change:opacity;
}
.s1g-content a,.s1g-content button,.s1g-content input,
.s1g-content select,.s1g-content textarea,.s1g-content [role="button"]{pointer-events:auto}

/* La scène est sombre en permanence : le texte doit l'être clair,
   quel que soit le thème choisi par le visiteur. */
.s1g-content .hero__title{color:#FAFAFA}
.s1g-content .hero__sub{color:rgba(250,250,250,.88);margin-inline:auto}
.s1g-content .badge{
  background:rgba(250,250,250,.10);border-color:rgba(250,250,250,.22);
  color:#FAFAFA;backdrop-filter:blur(10px);
}
.s1g-content .hero__cta{justify-content:center}
.s1g-content .btn--ghost{color:#FAFAFA;border-color:rgba(250,250,250,.36)}
.s1g-content .btn--ghost:hover{background:rgba(250,250,250,.10);border-color:#FAFAFA}

/* Sur téléphone le texte quitte le centre pour le tiers supérieur : la
   scène du dessous revient aux pyramides, qui ne sont plus cachées
   derrière le titre. */
@media(max-width:700px){
  /* l'élément porte les deux classes : « .s1g-content.hero », et non un
     .hero enfant — la première version de cette règle ne ciblait rien */
  .s1g-content.hero{justify-content:flex-start;padding-top:clamp(118px,25vw,150px)}
}

@media(prefers-reduced-motion:reduce){
  /* en mouvement réduit la bannière reprend sa place dans le flux :
     rien ne se superpose, rien ne bouge */
  .s1g{position:relative;height:auto}
  .s1g + *{margin-top:0}
  .s1g-stage{height:70svh}
}

/* ── Pied de page mobile : simple, épuré, centré ───────────────────
   La navigation basse et le menu couvrent déjà toutes les pages : les
   colonnes Navigation et Expertises faisaient neuf liens de plus pour
   rien. Ne restent que les réseaux et les contacts, en typographie pure,
   sans boutons ni cadres, tout sur l'axe central. */
@media(max-width:700px){
  .footer{padding-top:40px}
  .footer__top{grid-template-columns:1fr;gap:30px;padding-bottom:34px;text-align:center}
  .footer__top > :nth-child(2),.footer__top > :nth-child(3){display:none}
  .footer__top > :first-child .muted{margin-inline:auto}
  .footer__top > :first-child .socials{justify-content:center;gap:14px;margin-top:22px}
  .footer__top > :first-child .socials a{width:44px;height:44px;border:0;background:none;border-radius:0}
  .footer__top > :first-child .socials .ico{width:19px;height:19px}
  .footer__top > :last-child .footer__h{margin-bottom:6px}
  .footer__top > :last-child ul{display:flex;flex-direction:column;align-items:center;gap:0}
  .footer__top > :last-child li a{width:auto;justify-content:center;min-height:44px;font-size:.98rem;
    color:var(--ink);border:0;border-radius:0;background:none;background-image:none;padding-inline:8px}
  .footer__top > :last-child li:last-child{display:none}   /* la ville est déjà dans la ligne du bas */
  .footer__bottom{align-items:center;text-align:center;padding-top:22px;border-top:1px solid var(--line)}
  .footer__legal{justify-content:center;margin-bottom:12px}
}