@charset "UTF-8";







/* ============================================================
   DME BÂTIMENT — Page d'accueil
   Direction : éditorial kaki & beige

   RÈGLES DE DESIGN — tout part des jetons ci-dessous.
   Aucune valeur d'espacement, de taille ou de rayon ne doit
   être écrite en dur dans un composant.

   · Typographie   --t-xs → --t-8   (11 crans fluides)
                   + --t-num, --t-reel, --t-mega pour les
                     trois pièces d'affichage hors échelle.
   · Espacement    --s1 → --s7      (7 crans fluides)
                   --gut  gouttière latérale de page
                   --sec  respiration verticale d'une section
   · Rayons        --r-xs 2 · --r-sm 4 · --r-md 8 · --r-pill
   · Contrôles     --ctl-sm/md/lg pastilles · --ico icônes
   · Plans (z)     rail 10 · sticky 20 · image projet 35 · nav 60
                   flottant 70 · menu 100 · grain 110
                   curseur 150 · préchargeur 200
   · Couleur       3 beiges, 3 encres, 2 kakis, 3 filets.
                   L'italique serif kaki est le seul accent.
   ============================================================ */

:root{
  --paper:#F5F3EC; --paper-2:#E3DED0; --paper-3:#D0C9B6;
  --ink:#23281E; --ink-2:#4B543C; --ink-3:#575F41;
  --olive:#4F5B29; --olive-lit:#DED2B7;   /* écru coton : l'accent des fonds sombres */
  --wine:#7B2D3B; --wine-deep:#5E2833;   /* troisième couleur : signal, jamais du texte courant */
  --line:rgba(35,40,30,.16); --line-soft:rgba(35,40,30,.08); --line-dark:rgba(233,227,211,.18);

  --serif:"Aspekta","Helvetica Neue",Helvetica,Arial,sans-serif;   /* éditorial : titres + corps */
  --sans:"Aspekta","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Aspekta","Helvetica Neue",Helvetica,Arial,sans-serif;   /* micro-labels : même famille, graisse 500 */
  --t-mono:clamp(12px,.62rem + .28vw,14px);

  --step--1:clamp(.72rem,.70rem + .1vw,.78rem);
  --step-0:clamp(.95rem,.90rem + .22vw,1.06rem);
  --step-1:clamp(1.12rem,1.02rem + .45vw,1.36rem);
  --step-2:clamp(1.45rem,1.2rem + 1.05vw,2.1rem);
  --step-3:clamp(2rem,1.4rem + 2.5vw,3.4rem);
  --step-4:clamp(2.3rem,1.35rem + 4.2vw,4.9rem);

  /* échelle typographique — 9 crans, tout le texte s'y rattache */
  --t-xs:clamp(.72rem,.70rem + .1vw,.78rem);
  --t-sm:clamp(.86rem,.82rem + .2vw,.98rem);
  --t-0:clamp(.95rem,.90rem + .22vw,1.06rem);
  --t-1:clamp(1.12rem,1.02rem + .45vw,1.36rem);
  --t-2:clamp(1.10rem,.95rem + .72vw,1.62rem);
  --t-3:clamp(1.45rem,1.2rem + 1.05vw,2.1rem);
  --t-4:clamp(1.48rem,1.02rem + 1.85vw,2.72rem);
  --t-5:clamp(1.9rem,1.25rem + 2.5vw,3.4rem);
  --t-6:clamp(1.88rem,1.18rem + 3.4vw,4.2rem);
  --t-7:clamp(2.3rem,1.35rem + 4.2vw,4.9rem);
  --t-8:clamp(2.4rem,1.1rem + 5.4vw,5.8rem);

  /* échelle d'affichage — 5 crans, tous les titres de la page s'y rattachent
     desktop : 76 · 56 · 44 · 33 · 25 px   ·   rapport ≈ 1,33 */
  --d-1:clamp(2.35rem,1.20rem + 4.60vw,4.75rem);  /* H1, une seule occurrence */
  --d-2:clamp(1.95rem,1.15rem + 3.20vw,3.50rem);  /* titres de section */
  --d-3:clamp(1.70rem,1.10rem + 2.40vw,2.75rem);  /* grandes phrases */
  --d-4:clamp(1.35rem,1.00rem + 1.40vw,2.05rem);  /* sous-titres */
  --d-5:clamp(1.15rem,0.98rem + 0.68vw,1.55rem);  /* titres de carte */
  --t-num:clamp(2.4rem,1.45rem + 3.80vw,4.25rem); /* chiffres de preuve */
  --t-reel:clamp(2.6rem,1.40rem + 4.80vw,5rem);   /* odomètre 01 → 05 */
  --t-mega:clamp(2.4rem,0.6rem + 8.6vw,9rem);     /* mot géant du footer */
  /* alias hérités */
  --step--1:var(--t-xs); --step-0:var(--t-0); --step-1:var(--t-1);
  --step-2:var(--t-3); --step-3:var(--t-5); --step-4:var(--t-7);

  /* échelle d'espacement — 7 crans, plus la gouttière et le pas de section */
  --s1:clamp(.45rem,.40rem + .22vw,.65rem);
  --s2:clamp(.70rem,.60rem + .45vw,1.05rem);
  --s3:clamp(1rem,.82rem + .80vw,1.65rem);
  --s4:clamp(1.45rem,1.15rem + 1.30vw,2.30rem);
  --s5:clamp(1.90rem,1.40rem + 2.20vw,3.20rem);
  --s6:clamp(2.50rem,1.80rem + 3.00vw,4.40rem);
  --s7:clamp(3.20rem,2.20rem + 4.40vw,5.80rem);
  --gut:clamp(1.25rem,4vw,4.5rem);
  --rail:0px;
  --sec:clamp(4.5rem,9vw,9rem);

  /* rythme vertical — quatre crans ; tout écart entre deux blocs s'y rattache */
  --gap-xs:var(--s2);   /* étiquette → valeur, à l'intérieur d'une ligne */
  --gap-sm:var(--s3);   /* titre de bloc → son paragraphe */
  --gap-md:var(--s4);   /* sur-titre → titre */
  --gap-lg:var(--s5);   /* titre de section → contenu */

  /* graisses — trois crans, rien d'autre sur la page */
  --w-air:300;   /* titres, accents, corps de texte */
  --w-acc:400;   /* le sigle et les chiffres : un cran au-dessus */
  --w-lab:500;   /* micro-labels, boutons, navigation */

  /* rayons */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-pill:999px;

  /* contrôles : trois gabarits de pastille + une taille d'icône */
  --ctl-lg:clamp(42px,4.4vw,54px);
  --ctl-md:clamp(38px,3.3vw,46px);
  --ctl-sm:clamp(28px,2.6vw,34px);
  --ico:clamp(14px,1.2vw,16px);

  /* plans */
  --z-rail:10; --z-sticky:20; --z-work:35; --z-nav:60; --z-float:70;
  --z-menu:100; --z-grain:110; --z-cursor:150; --z-load:200;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}
/* rail latéral retiré : plus de gouttière réservée */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,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{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,blockquote,fieldset{ margin:0; }
fieldset{ border:0; padding:0; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; border-radius:var(--r-xs); }

/* grain : texture d'impression sur toute la page */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; opacity:.22;
  transform:translateZ(0);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.32'/></svg>");
}

/* repli si un média ne charge pas */
.mediabg{
  background-color:#39402D;
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(222,210,183,.26), transparent 62%),
    radial-gradient(90% 80% at 85% 95%, rgba(211,218,187,.20), transparent 60%),
    linear-gradient(157deg,#6C7554 0%,#414A34 52%,#1E2318 100%);
}


/* ---------- primitives ---------- */
.wrap{ padding-inline:calc(var(--gut) + var(--rail)) var(--gut); }
.display{ font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.035em; text-wrap:balance; }
/* Un seul traitement d'accent sur toute la page : serif italique, teinte kaki. */
.display em,.out,.whyword em,.mline em,.plate__line em,.gal__head h2 em,.mclose p em{
  font-style:normal; font-weight:500; letter-spacing:inherit; color:var(--olive);
}
.onDark .display em,[data-dark] .display em,.method .display em,
.onDark .out,[data-dark] .out,
.method .mline em,[data-dark] .plate__line em{ color:var(--olive-lit); }
.label{ font-size:var(--step--1); font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.label--olive{ color:var(--olive); }
.label--pale{ color:rgba(233,227,211,.58); }
.label--olive-lit{ color:var(--olive-lit); }

.btn{
  white-space:nowrap; --bg:var(--ink); --fg:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:.85em;
  padding:1.05em 1.7em; border-radius:var(--r-pill); background:var(--bg); color:var(--fg);
  font-size:var(--step--1); font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; transition:color .35s var(--ease);
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--wine); transform:translateY(101%); transition:transform .5s var(--ease-io); }
.btn:hover::after{ transform:translateY(0); }
.btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ --fg:var(--paper); }
.btn--pale{ --bg:var(--paper); --fg:var(--ink); }
.btn--pale:hover{ --fg:var(--paper); }
.btn--pale:hover{ color:var(--paper); }
.btn--onDark.btn--ghost{ --fg:var(--paper); box-shadow:inset 0 0 0 1px rgba(233,227,211,.32); }
.btn--paper{ --bg:var(--paper); --fg:var(--wine); } .btn--paper::after{ background:var(--wine); } .btn--paper:hover{ color:var(--paper); }

.ulink{ position:relative; display:inline-block; padding-bottom:.18em; }
.ulink::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .45s var(--ease-io); }
.ulink:hover::after{ transform-origin:left; animation:ulink .6s var(--ease-io); }
@keyframes ulink{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* rangée de sorties en fin de bloc */
.outs{ margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center; padding-top:1.2rem; border-top:1px solid var(--line); }
.onDark .outs{ border-top-color:var(--line-dark); }
.outs a{ display:inline-flex; align-items:center; gap:.6em; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--olive); }
.onDark .outs a{ color:var(--olive-lit); }
.outs a .btn__arrow{ transition:transform .4s var(--ease); }
.outs a:hover .btn__arrow{ transform:translateX(4px); }

.shead{ display:grid; gap:1.2rem; align-items:end; }
@media (min-width:900px){ .shead{ grid-template-columns:1fr minmax(0,26rem); } }
.shead h2{ font-size:var(--step-4); margin-top:.9rem; }
.shead p{ color:var(--ink-2); font-weight:300; }
.onDark .shead p{ color:rgba(233,227,211,.7); }

/* ---------- barre de lecture (là où le rail est masqué) ---------- */
.pbar{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:calc(var(--z-nav) + 1); pointer-events:none; transform-origin:left; transform:scaleX(0); background:var(--olive); }
.nav.dark ~ .pbar,.pbar.on-dark{ background:var(--olive-lit); }
/* la barre de lecture reste visible à toutes les largeurs */

/* ---------- invitation à faire défiler ---------- */
.scrollcue{
  position:absolute; z-index:3; right:var(--gut); bottom:calc(var(--s6) + 2.2rem);
  display:none; flex-direction:column; align-items:center; gap:.7rem;
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:rgba(233,227,211,.55);
  transition:opacity .6s var(--ease), transform .6s var(--ease-io);
}
@media (min-width:900px){ .scrollcue{ display:flex; } }
.scrollcue.gone{ opacity:0; transform:translateY(10px); }
.scrollcue__rail{ position:relative; width:1px; height:56px; background:rgba(233,227,211,.22); overflow:hidden; }
.scrollcue__dot{ position:absolute; left:0; top:0; width:1px; height:16px; background:var(--olive-lit); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ 0%{ transform:translateY(-18px); } 60%,100%{ transform:translateY(58px); } }

/* ---------- images qui respirent dans leur cadre ---------- */
[data-drift]{ will-change:transform; }

/* ---------- filets qui se tracent ---------- */
.outs{ position:relative; }
.outs::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--olive); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-io);
}
.onDark .outs::before,.method .outs::before{ background:var(--olive-lit); }
.outs.is-in::before{ transform:scaleX(1); }

/* ---------- boutons magnétiques ---------- */
.magnet{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .scrollcue{ display:none !important; }
  .scrollcue__dot{ animation:none; }
  .pbar{ display:none !important; }
  .outs::before{ transform:scaleX(1); transition:none; }
}

/* ---------- reveals ---------- */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,32px,0); }
[data-rv="fade"]{ transform:none; }
[data-rv="left"]{ transform:translate3d(-22px,0,0); }
[data-rv].is-in{ opacity:1; transform:none; transition:opacity .9s var(--ease) var(--rv-d,0s), transform 1.05s var(--ease-io) var(--rv-d,0s); }
.mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.mask > span{ display:block; transform:translate3d(0,110%,0) rotate(2.5deg); transform-origin:left bottom; }
.is-in .mask > span,.mask.is-in > span{ transform:none; transition:transform 1.15s var(--ease-io) var(--rv-d,0s); }
.drawline{ transform:scaleX(0); transform-origin:left; }
.is-in .drawline,.drawline.is-in{ transform:scaleX(1); transition:transform 1.1s var(--ease-io) var(--rv-d,0s); }
.wipe{ clip-path:inset(0 0 100% 0); }
.is-in .wipe,.wipe.is-in{ clip-path:inset(0 0 0 0); transition:clip-path 1.5s var(--ease-io) calc(var(--rv-d,0s) + .08s); }

/* ---------- preloader ---------- */
#load{ position:fixed; inset:0; z-index:var(--z-load); background:var(--ink); color:var(--paper); display:flex; align-items:flex-end; padding:var(--gut); transition:transform 1.05s var(--ease-io) .15s; }
#load.done{ transform:translateY(-101%); pointer-events:none; }
#load .lrow{ width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
#load .lmark{ font-family:var(--serif); font-size:var(--t-8); line-height:.85; }
#load .lmark em{ font-style:normal; font-weight:500; color:var(--olive-lit); }
#load .lnum{ font-size:var(--t-6); font-weight:300; font-variant-numeric:tabular-nums; }
#load .lbar{ position:absolute; left:0; bottom:0; height:2px; background:var(--olive-lit); width:0%; }

/* ---------- rail ---------- */
.rail{ position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:var(--z-rail); display:none; align-items:center; justify-content:center; border-right:1px solid var(--line); pointer-events:none; }

.rail__txt{ writing-mode:vertical-rl; font-size:var(--step--1); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); transition:opacity .35s ease; }
.rail__txt b{ font-weight:500; color:var(--olive); }
.rail__prog{ position:absolute; left:-1px; top:0; width:2px; background:var(--olive); height:0%; transition:height .2s linear; }
.rail.on-dark{ border-right-color:var(--line-dark); }
.rail.on-dark .rail__txt{ color:rgba(233,227,211,.5); }
.rail.on-dark .rail__txt b{ color:var(--olive-lit); }
.rail.on-dark .rail__prog{ background:var(--olive-lit); }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); padding-left:calc(var(--gut) + var(--rail)); padding-right:var(--gut); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:82px; border-bottom:1px solid transparent; transition:background .5s var(--ease),height .5s var(--ease),border-color .5s ease,color .4s ease; }
.nav.stuck{ background:rgba(245,243,236,.9); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border-bottom-color:var(--line-soft); height:68px; }
.nav__logo{ font-family:var(--serif); font-size:1.5rem; line-height:1; white-space:nowrap; }
.nav__logo em{ font-style:normal; font-weight:500; color:var(--olive); }
.nav__right{ display:flex; align-items:center; gap:1rem; }
.nav__tel{ display:none; font-size:var(--step--1); letter-spacing:.1em; font-variant-numeric:tabular-nums; }
@media (min-width:1040px){ .nav__tel{ display:block; } }
.nav .btn{ padding:.8em 1.35em; }
.nav.invert{ color:var(--paper); }
.nav.invert .nav__logo em{ color:var(--olive-lit); }
.nav.invert .btn{ --bg:var(--paper); --fg:var(--ink); }
@media (max-width:600px){
  .nav{ height:66px; } .nav__logo{ font-size:1.25rem; }
  .nav .btn{ padding:.7em 1.05em; font-size:.68rem; letter-spacing:.1em; } .nav__right{ gap:.35rem; }
}
.burger{ display:flex; flex-direction:column; gap:5px; padding:.6rem; }
.burger i{ display:block; width:22px; height:1.5px; background:currentColor; transition:transform .4s var(--ease-io),opacity .3s; }
.burger.open i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.burger{ display:flex; }
/* ---------- menu plein écran ---------- */
.menu{
  position:fixed; inset:0; z-index:var(--z-menu); background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease-io);
  pointer-events:none; overflow-y:auto; overscroll-behavior:contain;
}
.menu.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu__in{ flex:1 1 auto; display:flex; flex-direction:column; padding:var(--s3) var(--gut) var(--s4); gap:var(--s5); }

.menu__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex:none; }
.menu__logo{ font-family:var(--serif); font-size:var(--t-1); letter-spacing:-.02em; }
.menu__logo em{ font-style:normal; font-weight:500; color:var(--olive-lit); }
.menu__x{
  width:var(--ctl-lg); height:var(--ctl-lg); border-radius:50%;
  display:grid; place-items:center; color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(233,227,211,.3);
  transition:background .35s var(--ease), color .35s var(--ease), transform .5s var(--ease-io);
}
.menu__x svg{ width:17px; height:17px; }
.menu__x:hover{ background:var(--olive-lit); color:var(--ink); transform:rotate(90deg); box-shadow:inset 0 0 0 1px var(--olive-lit); }

.menu__body{ flex:1 1 auto; display:grid; gap:var(--s5); align-content:center; }
@media (min-width:900px){ .menu__body{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; gap:var(--s6); } }

.mnav{ display:flex; flex-direction:column; }
.mrow{ position:relative; border-top:1px solid rgba(233,227,211,.14); }
.mrow:last-child{ border-bottom:1px solid rgba(233,227,211,.14); }
.mrow__hit{
  width:100%; display:flex; align-items:baseline; gap:var(--s3);
  padding-block:var(--s2); text-align:left; color:inherit;
}
.mrow__n{ font-size:.66rem; letter-spacing:.18em; color:rgba(233,227,211,.4); font-variant-numeric:tabular-nums; flex:none; transition:color .4s var(--ease); }
.mrow__t{
  font-family:var(--serif); font-weight:400;
  font-size:var(--t-6); line-height:1.02; letter-spacing:-.034em;
  transition:color .4s var(--ease), transform .55s var(--ease-io);
}
.mrow__t em{ font-style:normal; font-weight:500; color:var(--olive-lit); }
.mrow[data-on] .mrow__n,.mrow__hit:hover .mrow__n,.mrow__hit:focus-visible .mrow__n{ color:var(--olive-lit); }
.mrow[data-on] .mrow__t,.mrow__hit:hover .mrow__t,.mrow__hit:focus-visible .mrow__t{ color:var(--olive-lit); transform:translateX(clamp(4px,.8vw,14px)); }
.mrow__go{
  margin-left:auto; align-self:center; flex:none;
  width:var(--ctl-md); height:var(--ctl-md); border-radius:50%;
  display:grid; place-items:center; color:rgba(233,227,211,.5);
  box-shadow:inset 0 0 0 1px rgba(233,227,211,.22);
  transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease-io);
}
.mrow__go svg{ width:var(--ico); height:var(--ico); display:block; }
.mrow[data-on] .mrow__go,.mrow__hit:hover .mrow__go,.mrow__hit:focus-visible .mrow__go{
  background:var(--paper); color:var(--olive); box-shadow:none; transform:translate(3px,-3px);
}

/* volet des sous-pages */
.mpanels{ position:relative; }
.mpanel{ display:none; }
.mpanel.on{ display:block; }
.mpanel__k{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-lit); }
.mpanel ul{ margin-top:1rem; display:grid; gap:.1rem; }
.mpanel li a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem;
  padding-block:.62rem; border-bottom:1px solid rgba(233,227,211,.1);
  transition:color .3s var(--ease);
}
.mpanel li a b{ font-weight:400; font-size:var(--t-0); }
.mpanel li a span{ font-size:.66rem; letter-spacing:.1em; color:rgba(233,227,211,.34); text-transform:lowercase; }
.mpanel li a:hover{ color:var(--olive-lit); }
.mpanel__note{ margin-top:1.1rem; font-size:.9rem; font-weight:300; color:rgba(233,227,211,.6); max-width:36ch; }
.mtags{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.mtags a{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.5em .8em; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px rgba(233,227,211,.2); transition:background .3s var(--ease), color .3s var(--ease); }
.mtags a:hover{ background:var(--olive-lit); color:var(--ink); box-shadow:none; }

.menu__foot{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.9rem 1.6rem; padding-top:var(--s3); border-top:1px solid rgba(233,227,211,.14);
  font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:rgba(233,227,211,.55);
}
.menu__foot a{ transition:color .3s var(--ease); }
.menu__foot a:hover{ color:var(--olive-lit); }
.menu__soc{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }

/* apparition en cascade */
.menu .mrow,.menu .mpanels,.menu .menu__foot,.menu .menu__bar{ opacity:0; transform:translate3d(0,26px,0); }
.menu.open .mrow,.menu.open .mpanels,.menu.open .menu__foot,.menu.open .menu__bar{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) var(--md,0s), transform .9s var(--ease-io) var(--md,0s);
}
@media (prefers-reduced-motion:reduce){
  .menu{ transition:none; }
  .menu .mrow,.menu .mpanels,.menu .menu__foot,.menu .menu__bar{ opacity:1; transform:none; }
}

/* ============ 01 · HÉRO VIDÉO ============ */
.heropin{ position:relative; }
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:clamp(84px,10vh,100px); background:var(--ink); color:var(--paper); overflow:hidden; }
.hero__media{ position:absolute; inset:-4% -2%; will-change:transform; backface-visibility:hidden; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(35,40,30,.74) 0%, rgba(35,40,30,.30) 30%, rgba(35,40,30,.56) 70%, rgba(35,40,30,.93) 100%),
    linear-gradient(90deg, rgba(35,40,30,.62) 0%, rgba(35,40,30,0) 66%);
}
.hero__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; display:grid; grid-template-columns:repeat(3,1fr); padding-inline:calc(var(--gut) + var(--rail)) var(--gut); }
@media (min-width:900px){ .hero__grid{ grid-template-columns:repeat(6,1fr); } }
.hero__grid i{ display:block; border-left:1px solid rgba(233,227,211,.12); transform:scaleY(0); transform-origin:50% 0; }
.hero__grid i:last-child{ border-right:1px solid rgba(233,227,211,.12); }
.hero.ready .hero__grid i{ transform:scaleY(1); transition:transform 1.5s var(--ease-io) calc(.25s + var(--i)*.11s); }

.hero__inner{ position:relative; z-index:2; padding-bottom:var(--s5); }
.hero__eyebrow{ display:flex; align-items:center; gap:.85rem; margin-bottom:var(--s4); }
.hero__eyebrow .dot{ background:var(--wine) !important; width:7px; height:7px; border-radius:50%; background:var(--olive-lit); flex:none; }
.hero h1{ font-size:var(--t-8); max-width:16ch; }
.hero__sub{ margin-top:var(--s4); max-width:48ch; font-size:var(--step-1); font-weight:300; color:rgba(233,227,211,.85); }
.hero__cta{ margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:.75rem; }
.hero__cta .btn:not(.btn--ghost){ --bg:var(--paper); --fg:var(--ink); }
.hero__cta .btn:not(.btn--ghost):hover{ color:var(--paper); }

.hero__zone{ position:relative; z-index:2; border-top:1px solid rgba(233,227,211,.2); padding-block:1rem 1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:baseline; }
.hero__zone strong{ font-weight:500; font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase; color:var(--olive-lit); }
.hero__zone ul{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.hero__zone li{ font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:rgba(233,227,211,.6); }


/* bandeau de typologies, entre les chiffres et les réalisations.
   Le fondu sur les deux bords évite le mot tranché net : les typologies
   naissent à gauche et s'effacent à droite. */
.band{
  background:var(--paper); color:var(--ink); overflow:hidden;
  padding-block:clamp(1.5rem,2.8vw,2.4rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.band__track{ display:flex; gap:clamp(2.2rem,4.4vw,4rem); width:max-content; will-change:transform; }
.band__track span{
  display:flex; align-items:center; gap:clamp(2.2rem,4.4vw,4rem); white-space:nowrap;
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3);
  line-height:1.1; letter-spacing:-.022em;
}
.band__track span i{ width:6px; height:6px; border-radius:50%; background:var(--wine); display:block; flex:none; }
.splitintro{ padding-block:var(--s7) var(--s5); }

/* ============ 02 · VOUS ÊTES / NOS OFFRES ============ */
.splitintro{ padding-block:var(--s7) var(--s5); }

.pair{ display:flex; flex-direction:column; }
@media (min-width:1000px){ .pair{ flex-direction:row; min-height:92svh; } }
.pv{ position:relative; overflow:hidden; flex:1 1 50%; transition:flex .9s var(--ease-io); display:flex; flex-direction:column; justify-content:flex-end; }
@media (min-width:1000px){ .pair:hover .pv{ flex:1 1 40%; } .pair .pv:hover{ flex:1 1 60%; } }
.pv + .pv{ border-top:1px solid rgba(233,227,211,.2); }
@media (min-width:1000px){ .pv + .pv{ border-top:0; border-left:1px solid rgba(233,227,211,.2); } }
.pv__bg{ position:absolute; inset:0; }
.pv__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.6s var(--ease); }
.pv:hover .pv__bg img{ transform:scale(1.11); }
.pv__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(35,40,30,.46) 0%,rgba(35,40,30,.52) 32%,rgba(35,40,30,.93) 100%);
  transition:background .8s var(--ease);
}
.pv:hover .pv__bg::after{ background:linear-gradient(180deg,rgba(35,40,30,.34) 0%,rgba(35,40,30,.42) 32%,rgba(35,40,30,.9) 100%); }
.pv__in{ position:relative; z-index:2; padding:var(--s5); color:var(--paper); }
@media (min-width:1100px){ .pair .pv:first-child .pv__in{ padding-left:calc(var(--rail) + var(--s5)); } }
.pv__in h3{ font-family:var(--serif); font-weight:400; font-size:var(--t-5); line-height:1; letter-spacing:-.02em; margin-top:.7rem; max-width:12ch; }
.pv__note{ margin-top:.85rem; color:rgba(233,227,211,.78); font-weight:300; max-width:36ch; }
.pv__list{ margin-top:var(--s4); border-top:1px solid rgba(233,227,211,.26); }
.pv__list li{ border-bottom:1px solid rgba(233,227,211,.16); }
.pv__list a{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:.8rem 0; transition:padding-left .5s var(--ease-io), color .35s ease; }
.pv__list a:hover{ padding-left:.75rem; color:#fff; }
.pv__list b{ font-family:var(--serif); font-weight:400; font-size:var(--t-2); line-height:1.2; }
.pv__list span{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:rgba(233,227,211,.45); white-space:nowrap; }
.pv__list a:hover span{ color:var(--olive-lit); }
.pv__list a:hover .btn__arrow{ transform:translateX(4px); }
.pv__go{ margin-top:var(--s3); display:inline-flex; align-items:center; gap:.6em; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--olive-lit); }
.pv__go:hover .btn__arrow{ transform:translateX(4px); }

/* ============ 03 · PREUVE EN CHIFFRES ============ */
.figures{ background:var(--ink); color:var(--paper); padding-block:var(--s7); }
.figures__grid{ display:grid; gap:var(--s4); }
@media (min-width:760px){ .figures__grid{ grid-template-columns:repeat(4,1fr); } }
.fg{ position:relative; padding-top:var(--gap-sm); }
.fg__line{ position:absolute; left:0; top:0; height:1px; width:100%; background:var(--line-dark); display:block; }
.fg b{ display:block; font-family:var(--serif); font-weight:400; font-size:var(--t-num); line-height:.95; font-variant-numeric:tabular-nums; }
.fg > span{ display:block; margin-top:var(--gap-sm); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:rgba(233,227,211,.55); }
.fg em{ display:block; margin-top:var(--gap-xs); font-style:normal; color:rgba(233,227,211,.42); font-weight:300; max-width:26ch; }

/* ============ 04 · RÉALISATIONS (liste + image au curseur) ============ */
.work{ position:relative; background:var(--paper-2); padding-block:var(--sec); }
.work__list{ margin-top:var(--s4); border-top:1px solid var(--line); }
.work__row{ position:relative; border-bottom:1px solid var(--line); }
.work__row.hide{ display:none; }
.work__row a{
  display:grid; gap:.3rem 1.5rem; grid-template-columns:1fr auto; align-items:center;
  padding:var(--s3) 0;
  transition:padding-left .55s var(--ease-io), color .4s ease;
}
@media (min-width:960px){
  .work__row a{ grid-template-columns:minmax(0,1fr) 14rem 11rem 5rem; }
  .work__row a:hover{ padding-left:1.6rem; }
}
.work__name{ font-family:var(--serif); font-size:var(--t-5); line-height:1.02; letter-spacing:-.03em; grid-column:1; transition:color .4s ease; }
.work__row a:hover .work__name{ color:var(--olive); }
.work__name .pro{
  font-family:var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  vertical-align:middle; margin-left:.9rem; color:var(--paper); background:var(--wine);
  border-radius:var(--r-pill); padding:.4em .8em;
}
.work__type,.work__meta,.work__yr{ font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.work__type{ grid-column:1; }
.work__meta{ grid-column:1; }
.work__yr{ grid-row:1; grid-column:2; text-align:right; font-variant-numeric:tabular-nums; }
@media (min-width:960px){
  .work__type{ grid-column:2; }
  .work__meta{ grid-column:3; }
  .work__yr{ grid-column:4; }
}
.work__row::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--olive); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease-io);
}
.work__row:hover::after{ transform:scaleX(1); transform-origin:left; }

.work__thumb{ display:none; }
.work__swipe{ display:none; }
/* sur tactile : carrousel à accroche plutôt qu'une liste sans survol */
@media (hover:none){
  .work__list{
    display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    border-top:0; padding-bottom:1.2rem; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut);
    scroll-padding-left:var(--gut); scrollbar-width:none;
  }
  .work__list::-webkit-scrollbar{ display:none; }
  .work__row{ flex:0 0 78%; max-width:22rem; scroll-snap-align:start; border-bottom:0; }
  .work__row::after{ display:none; }
  .work__row a{ display:block; padding:0; }
  .work__row a > *{ display:block; }
  .work__thumb{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-sm); margin-bottom:.9rem; }
  .work__name{ font-size:1.55rem; }
  .work__name .pro{ margin-left:.55rem; }
  .work__type{ margin-top:.45rem; }
  .work__meta{ margin-top:.2rem; }
  .work__yr{ text-align:left; margin-top:.2rem; }
  .work__swipe{ display:flex; align-items:center; gap:.6em; margin-top:.4rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
}

.follow{
  position:fixed; top:0; left:0; z-index:var(--z-work);
  width:clamp(184px,16.5vw,264px); aspect-ratio:4/5;
  pointer-events:none; opacity:0; transition:opacity .45s var(--ease); will-change:transform;
}
.follow.on{ opacity:1; }
.follow img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.08); border-radius:var(--r-xs);
  transition:opacity .5s var(--ease), transform .9s var(--ease);
  box-shadow:0 30px 60px -30px rgba(35,40,30,.6);
}
.follow img.show{ opacity:1; transform:scale(1); }
.follow__tag{
  position:absolute; left:50%; bottom:-.8rem; transform:translateX(-50%);
  background:var(--wine); color:var(--paper); padding:.5em .95em; border-radius:var(--r-pill); white-space:nowrap;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
}
@media (hover:none){ .follow{ display:none; } }

/* ============ 05 · NOS OFFRES (cartes empilées) ============ */
.offers{ padding-block:var(--sec); }
/* ============ 06 · MÉTHODE EN VIDÉO ============ */
.method{ background:var(--ink); color:var(--paper); padding-block:var(--sec); scroll-margin-top:90px; }
.method .mcount__rail{ background:var(--line-dark); }
.method .mcount__rail i{ background:var(--olive-lit); }
.method .mcount__reel span{ color:rgba(233,227,211,.35); }
.method .mcount__reel span.on{ color:var(--olive-lit); }
.method .mcount__cap span{ color:rgba(233,227,211,.55); }
.method .mstep{ border-top-color:var(--line-dark); }
.method .mstep p{ color:rgba(233,227,211,.72); }
.method .mstep__n,.method .mstep__k{ color:var(--olive-lit); }
.method .mstep__act{ color:rgba(233,227,211,.55); }
@media (min-width:1000px){ .method .mstep__act{ color:var(--olive-lit); } }
.method .mfilm__cap{ color:rgba(233,227,211,.5); }
.method .outs{ border-top-color:var(--line-dark); }
.method .outs a{ color:var(--olive-lit); }

/* lecteur — commun aux blocs 06 et 08 */
.player{ position:relative; overflow:hidden; border-radius:var(--r-sm); background:#39402D; }
.player video,.player img{ width:100%; height:100%; object-fit:cover; }
.player__poster{ position:absolute; inset:0; z-index:2; transition:opacity .6s var(--ease); }
.player__poster::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,40,30,.05) 40%,rgba(35,40,30,.62) 100%); }
.player.playing .player__poster{ opacity:0; pointer-events:none; }
.player__play{
  position:absolute; z-index:3; left:var(--s3); bottom:var(--s3);
  display:inline-flex; align-items:center; gap:.8em;
  padding:.9em 1.4em; border-radius:var(--r-pill);
  background:rgba(233,227,211,.95); color:var(--ink);
  font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  transition:background .35s ease, opacity .4s ease; will-change:transform;
}
.player__play .tri{ width:0; height:0; border-left:7px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; flex:none; }
.player__play:hover{ background:var(--olive-lit); }
.player.playing .player__play{ opacity:0; pointer-events:none; }
.player__meta{
  position:absolute; z-index:3; right:var(--s3); bottom:calc(var(--s3) + .55rem);
  color:rgba(233,227,211,.8); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .4s ease;
}
.player.playing .player__meta{ opacity:0; }
@media (max-width:720px){
  .player__meta{ display:none; }
  .player__play{ padding:.8em 1.15em; }
}

/* film dans la colonne de gauche */
.mfilm{ margin-top:var(--s4); }
.mfilm .player__meta{ display:none; }
.mfilm__cap{ margin-top:.9rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.mfilm .player{ aspect-ratio:4/3; }
@media (min-width:1000px){ .mfilm .player{ aspect-ratio:5/4; } }

.mline{
  font-family:var(--serif); font-size:var(--t-5); line-height:1.1;
  letter-spacing:-.03em; margin-block:var(--s5) var(--s4);
  max-width:24ch;
}
.mline em{ font-style:normal; font-weight:500; color:var(--olive); }

/* compteur 01 → 05, piloté au scroll */
.msteps{ margin-top:var(--s5); display:grid; gap:var(--s5); }
@media (min-width:1000px){ .msteps{ grid-template-columns:minmax(0,.46fr) minmax(0,1fr); align-items:start; } }

.mcount{ display:none; }
@media (min-width:1000px){ .mleft{ position:sticky; top:15vh; } .mcount{ display:flex; gap:var(--s3); } }
.mcount__rail{ position:relative; width:1px; background:var(--line); flex:none; align-self:stretch; }
.mcount__rail i{ position:absolute; left:0; top:0; width:1px; height:0%; background:var(--olive); display:block; }
.mcount__win{
  height:3em; overflow:hidden;
  font-family:var(--serif); font-weight:400;
  font-size:var(--t-reel); line-height:1; letter-spacing:-.04em;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 27%,#000 73%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 27%,#000 73%,transparent 100%);
}
.mcount__reel{ transition:transform .85s var(--ease-io); }
.mcount__reel span{
  display:block; height:1em; line-height:1em; font-variant-numeric:tabular-nums;
  color:var(--ink-3); opacity:.2; transition:opacity .55s var(--ease), color .55s var(--ease);
}
.mcount__reel span.on{ opacity:1; color:var(--olive); }
.mcount__cap{ position:relative; width:15rem; max-width:100%; height:1.7em; overflow:hidden; margin-top:1.1rem; }
.mcount__cap span{
  position:absolute; inset:0; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.7; white-space:nowrap; opacity:0; transform:translateY(.8em);
  transition:opacity .28s ease, transform .4s var(--ease-io);
}
.mcount__cap span.on{ opacity:1; transform:none; transition:opacity .5s var(--ease) .22s, transform .6s var(--ease-io) .22s; }


.mstep{ border-top:1px solid var(--line); padding-block:var(--s4); opacity:.34; transition:opacity .6s var(--ease); }
.mstep.on{ opacity:1; }
@media (min-width:1000px){ .mstep{ min-height:40vh; display:flex; flex-direction:column; justify-content:center; } }
.mstep__n{ font-size:var(--step--1); letter-spacing:.18em; color:var(--olive); font-variant-numeric:tabular-nums; }
@media (min-width:1000px){ .mstep__n{ display:none; } }
.mstep__act{ display:block; margin-top:.55rem; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
@media (min-width:1000px){ .mstep__act{ margin-top:0; color:var(--olive); } }
.mstep h3{ font-family:var(--serif); font-weight:400; font-size:var(--t-4); line-height:1.04; letter-spacing:-.03em; margin-top:.45rem; }
.mstep p{ margin-top:.9rem; color:var(--ink-2); font-weight:300; max-width:44ch; }
.mstep__k{ margin-top:1rem; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
@media (min-width:1000px){ .mstep__k{ display:none; } }

.sign{ position:relative; width:13px; height:13px; flex:none; }
.sign::before,.sign::after{ content:""; position:absolute; background:var(--olive); left:0; top:6px; width:13px; height:1px; transition:transform .4s var(--ease-io); }
.sign::after{ transform:rotate(90deg); }
details[open] > summary .sign::after{ transform:rotate(0deg); }

/* ============ 06 · POURQUOI DME ============ */
.why{ background:var(--paper); padding-block:var(--sec); }
.why__head{ max-width:72ch; }
.why__head h2{ font-size:var(--t-4); margin-top:.9rem; max-width:24ch; }
.why__intro{ margin-top:1.25rem; color:var(--ink-2); font-weight:300; max-width:60ch; }
.why__list{ margin-top:var(--s5); border-top:1px solid var(--line); }
.whyrow{
  position:relative; border-bottom:1px solid var(--line);
  padding:var(--s5) 0; display:grid; gap:.9rem;
}
.whyrow::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--olive); transform:scaleX(var(--k,0)); transform-origin:left;
}
.whyrow--r::after{ transform-origin:right; }
@media (min-width:900px){
  .whyrow{ grid-template-columns:13rem 1fr; gap:var(--s5); align-items:start; }
  .whyrow--r{ grid-template-columns:1fr 13rem; }
  .whyrow--r .whyrow__tag{ order:2; justify-content:flex-end; text-align:right; }
  .whyrow--r .whyrow__body{ order:1; text-align:right; }
  .whyrow--r .whyrow__body p{ margin-left:auto; text-align:left; }
}
.whyword{
  font-family:var(--serif); font-weight:400;
  font-size:var(--t-4);
  line-height:1.08; letter-spacing:-.028em; text-wrap:balance;
}
.whyrow__body p{ margin-top:var(--gap-sm); color:var(--ink-2); font-weight:300; max-width:58ch; }
.whyrow .w,.wline .w{ display:inline-block; color:rgba(75,84,60,.22); transition:color .55s var(--ease); }
.whyrow .w.on,.wline .w.on{ color:var(--ink); }
.wline.on-dark .w{ color:rgba(233,227,211,.22); }
.wline.on-dark .w.on{ color:var(--paper); }
.wline.on-dark em .w.on{ color:var(--olive-lit); }
.whyrow__tag{
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding-top:.55em; transition:color .5s var(--ease);
  display:flex; align-items:baseline; gap:.7em;
}
.whyrow__tag i{
  width:6px; height:6px; border-radius:50%; background:var(--olive); flex:none;
  transform:scale(0); transition:transform .5s var(--ease-io);
}
.whyrow.on .whyrow__tag{ color:var(--olive); }
.whyrow.on .whyrow__tag i{ transform:scale(1); background:var(--wine); }

/* badge d'avis */
.gbadge{
  margin-top:var(--s3);
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3);
  border-radius:var(--r-md); background:#fff; color:#202124;
  font-family:var(--sans);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.14);
  transition:transform .4s var(--ease-io), box-shadow .4s var(--ease);
}
.gbadge:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -18px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.16); }
.gbadge__logo{ flex:none; width:var(--ctl-sm); height:var(--ctl-sm); display:block; }
.gbadge__logo svg{ width:100%; height:100%; display:block; }
.gbadge__body{ flex:1 1 auto; min-width:0; }
.gbadge__name{ font-size:.95rem; font-weight:500; color:#202124; line-height:1.2; }
.gbadge__score{ display:flex; align-items:center; gap:.5rem; margin-top:.2rem; }
.gbadge__score b{ font-size:1.05rem; font-weight:600; color:#202124; line-height:1; font-variant-numeric:tabular-nums; }
.stars{ position:relative; display:inline-block; line-height:1; letter-spacing:.08em; font-size:.92rem; }
.stars__base{ color:#dadce0; }
.stars__fill{ position:absolute; left:0; top:0; width:var(--fill,0%); overflow:hidden; white-space:nowrap; color:#fbbc04; }
.gbadge__meta{ margin-top:.28rem; font-size:.78rem; color:#5f6368; letter-spacing:0; text-transform:none; }
.gbadge__go{
  flex:none; display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:#1a73e8;
}
.gbadge__go .btn__arrow{ transition:transform .4s var(--ease); }
.gbadge:hover .gbadge__go .btn__arrow{ transform:translateX(4px); }
@media (max-width:520px){
  .gbadge{ flex-wrap:wrap; }
  .gbadge__go{ width:100%; padding-top:.7rem; border-top:1px solid #e8eaed; }
}
@media (max-width:560px){ .gbadge{ flex-wrap:wrap; } .gbadge__go{ width:100%; } }


/* ---- plaque plein écran ---- */
.plate{ position:relative; min-height:78svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); }
@media (min-width:900px){ .plate{ min-height:86svh; } }
.plate__bg{ position:absolute; inset:-6% 0; }
.plate__bg img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.plate__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,40,30,.42) 0%,rgba(35,40,30,.34) 38%,rgba(35,40,30,.93) 100%),linear-gradient(90deg,rgba(35,40,30,.60) 0%,rgba(35,40,30,.10) 62%); }
.plate__in{ position:relative; z-index:2; padding-block:var(--s6); width:100%; }
.plate__line{ font-family:var(--serif); font-weight:400; font-size:var(--t-6); line-height:1.04; letter-spacing:-.034em; color:var(--paper); max-width:21ch; }
.plate__k{ margin-top:1.4rem; font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:rgba(233,227,211,.55); }
.plate__go{ margin-top:var(--s4); }


/* ---- galerie défilante ---- */
.gal{
  background:var(--paper); overflow:hidden; position:relative;
  padding-block:0 var(--s6);
}
.gal__top{ background:var(--paper-2); padding-block:var(--s6) var(--s5); }
.gal__head h2{ font-size:var(--t-4); }
.gal__go{ margin-top:1.2rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--olive); display:inline-flex; align-items:center; gap:.6em; }
.gal__go .btn__arrow{ transition:transform .4s var(--ease); }
.gal__go:hover .btn__arrow{ transform:translateX(4px); }

/* le fond bascule du beige chaud au beige clair pile au milieu des images */
.gal__strip{
  position:relative;
  background:linear-gradient(180deg, var(--paper-2) 0 50%, var(--paper) 50% 100%);
}
.gal__strip::before,.gal__strip::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(40px,9vw,140px); z-index:2; pointer-events:none;
  background:linear-gradient(180deg, var(--paper-2) 0 50%, var(--paper) 50% 100%);
}
.gal__strip::before{ left:0;  -webkit-mask-image:linear-gradient(90deg,#000 12%,transparent); mask-image:linear-gradient(90deg,#000 12%,transparent); }
.gal__strip::after{ right:0; -webkit-mask-image:linear-gradient(270deg,#000 12%,transparent); mask-image:linear-gradient(270deg,#000 12%,transparent); }
.gal__track{ display:flex; gap:var(--s3); width:max-content; will-change:transform; padding-block:var(--s3); }
.gal__set{ display:flex; gap:var(--s3); align-items:center; }

.gcard{
  position:relative; flex:none;
  width:clamp(214px,23vw,296px); aspect-ratio:3/4;
  border-radius:var(--r-md); overflow:hidden; background:var(--paper-3);
  box-shadow:0 18px 40px -22px rgba(35,40,30,.55), 0 2px 6px -2px rgba(35,40,30,.2);
  transform:rotate(var(--rot,0deg));
  transition:transform .55s var(--ease-io);
}
.gcard img{ width:100%; height:100%; object-fit:cover; }
.gcard__cap{
  position:absolute; left:0; right:0; bottom:0; padding:2.2rem .95rem .85rem;
  background:linear-gradient(180deg,rgba(35,40,30,0),rgba(35,40,30,.82));
  color:var(--paper); text-transform:uppercase;
  display:flex; flex-direction:column; gap:.3rem; align-items:flex-start;
}
.gcard__cap b{ font-weight:500; font-size:.74rem; letter-spacing:.16em; }
.gcard__cap span{ font-size:.66rem; letter-spacing:.09em; line-height:1.4; color:rgba(233,227,211,.6); }
@media (hover:hover){ .gcard:hover{ transform:rotate(0deg) translateY(-6px); } }

.gcard--note{
  background:var(--wine); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s3);
}
.gcard--note h3{ font-family:var(--serif); font-weight:400; font-size:var(--t-2); line-height:1.06; letter-spacing:-.028em; }
.gcard--note p{ margin-top:.7rem; font-size:.9rem; font-weight:300; color:rgba(233,227,211,.78); line-height:1.5; }
.gcard--note .gnote__go{ margin-top:1.1rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6em; color:var(--olive-lit); }

@media (prefers-reduced-motion:reduce){
  .gal__track{ transform:none !important; width:auto; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .gcard{ transform:none; scroll-snap-align:center; }
}

/* ---- barre d'action ---- */
.actionbar{
  position:fixed; right:var(--s4); bottom:var(--s3); z-index:var(--z-float);
  transform:translateY(160%); opacity:0;
  display:flex; align-items:center; gap:var(--s3);
  padding:.7rem .8rem .7rem 1.4rem; border-radius:var(--r-pill);
  background:rgba(35,40,30,.94); color:var(--paper);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 22px 50px -26px rgba(35,40,30,.8);
  transition:transform .6s var(--ease-io), opacity .45s var(--ease);
  max-width:calc(100vw - 2rem);
}
.actionbar.on{ transform:translateY(0); opacity:1; }
.actionbar__txt{ font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:rgba(233,227,211,.6); white-space:nowrap; }
@media (max-width:760px){ .actionbar__txt{ display:none; } .actionbar{ left:1rem; right:1rem; width:auto; max-width:none; justify-content:space-between; } }
.actionbar .btn{ padding:.85em 1.4em; --bg:var(--paper); --fg:var(--ink); }
.actionbar__tel{ font-size:var(--step--1); letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--olive-lit); white-space:nowrap; padding-right:.6rem; }

/* ---- mode particulier / professionnel ---- */
.aud-off{ display:none !important; }
.modepill{
  display:none; align-items:center; gap:.6em;
  padding:.55em .5em .55em 1em; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--ink-3);
  font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
}
.modepill.on{ display:inline-flex; }
.modepill b{ font-weight:500; color:var(--olive); }
.modepill i{
  width:1.35em; height:1.35em; border-radius:50%; background:var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:.9em; line-height:1;
}
.modepill:hover i{ background:var(--olive); color:var(--paper); }
.nav.invert .modepill{ border-color:rgba(233,227,211,.3); color:rgba(233,227,211,.7); }
.nav.invert .modepill b{ color:var(--olive-lit); }
.nav.invert .modepill i{ background:rgba(233,227,211,.2); color:var(--paper); }
@media (max-width:820px){ .modepill{ padding:.5em .4em .5em .8em; } .modepill__pre{ display:none; } }

/* ============ 07 · TÉMOIGNAGES ============ */
.voice{ background:var(--ink); color:var(--paper); padding-block:var(--sec); }
.voice .player__meta{ display:none; }

.vgrid{ margin-top:var(--s5); display:grid; gap:var(--s3); align-items:stretch; }
@media (min-width:980px){ .vgrid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); } }

/* ---- colonne gauche : le film ---- */
.vfilm{ position:relative; display:flex; }
.vfilm .player{ width:100%; aspect-ratio:16/11; border-radius:var(--r-md); }
@media (min-width:980px){
  .vfilm{ position:relative; min-height:0; }
  .vfilm .player{ position:absolute; inset:0; width:auto; height:auto; aspect-ratio:auto; }
}
.vfilm .player__play{ left:auto; right:var(--s3); }
.vfilm__tag{
  position:absolute; z-index:4; top:var(--s3); left:var(--s3);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--ink); background:rgba(233,227,211,.92); border-radius:var(--r-pill); padding:.5em .9em;
}
.vfilm__by{
  position:absolute; z-index:3; left:0; right:0; bottom:0; pointer-events:none;
  padding:var(--s6) var(--s3) var(--s3);
  background:linear-gradient(180deg,rgba(35,40,30,0),rgba(35,40,30,.85));
}
.vfilm__by h3{ font-family:var(--serif); font-weight:400; font-size:var(--t-4); line-height:1; letter-spacing:-.02em; }
.vfilm__by p{ margin-top:var(--gap-xs); font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; color:rgba(233,227,211,.6); }
.vfilm__by q{ display:block; margin-top:var(--gap-sm); font-family:var(--serif); font-size:var(--t-1); line-height:1.3; quotes:"\00ab\00a0" "\00a0\00bb"; max-width:30ch; }
.vswap{ margin-top:.9rem; font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; color:var(--olive-lit); display:inline-flex; align-items:center; gap:.6em; }
.vswap:hover .btn__arrow{ transform:translateX(4px); }

/* ---- colonne droite : les avis écrits qui défilent ---- */
.vrail{ --qgap:var(--s2); --qh:clamp(204px,17.4vw,232px); display:flex; flex-direction:column; justify-content:center; }
.vrail__stage{ position:relative; flex:0 0 auto; }
.vrail__win{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 82px),rgba(0,0,0,.16) 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 82px),rgba(0,0,0,.16) 100%);
}
.vrail__track{ display:flex; flex-direction:column; gap:var(--qgap); transition:transform .8s var(--ease-io); will-change:transform; }
.qcard{
  flex:none; background:rgba(233,227,211,.05); border:1px solid var(--line-dark);
  border-radius:var(--r-md); padding:var(--s3);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem;
  height:var(--qh);
}
.qcard q{ font-family:var(--serif); font-size:var(--t-1); line-height:1.3; quotes:"\00ab\00a0" "\00a0\00bb"; display:block; }
.qcard__by{ display:flex; align-items:center; gap:.9rem; }
.qcard__ini{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(222,210,183,.14); color:var(--olive-lit);
  font-size:.72rem; letter-spacing:.08em; font-weight:600;
}
.qcard__id{ min-width:0; }
.qcard__id b{ display:block; font-weight:500; font-size:.94rem; }
.qcard__id span{ display:block; margin-top:.15rem; font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:rgba(233,227,211,.5); }
.qcard__st{ margin-left:auto; color:var(--olive-lit); letter-spacing:.12em; font-size:.8rem; flex:none; }

.vrail__arw{
  position:absolute; left:50%; z-index:5; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; transform:translateX(-50%);
  background:var(--paper); color:var(--ink);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.vrail__arw:hover{ background:var(--olive-lit); }
.vrail__arw--up{ top:-16px; }
.vrail__arw--down{ bottom:-16px; }
.vrail__arw--up:hover{ transform:translateX(-50%) translateY(-3px); }
.vrail__arw--down:hover{ transform:translateX(-50%) translateY(3px); }
.vrail__arw svg{ width:15px; height:15px; display:block; }
.vrail__dots{ margin-top:var(--s5); display:flex; justify-content:center; gap:.45rem; flex:none; }
.vrail__dots i{ width:5px; height:5px; border-radius:50%; background:rgba(233,227,211,.24); transition:background .4s var(--ease), transform .4s var(--ease); }
.vrail__dots i.on{ background:var(--wine); transform:scale(1.5); }

@media (prefers-reduced-motion:reduce){
  .vrail__track{ transition:none; }
}


/* ============ 08 · PRESCRIPTEURS ============ */
.pres{ background:var(--paper-2); padding-block:var(--sec); overflow:hidden; }

/* titre avec une photo incrustée dans la ligne */
.pres__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.14em .4em;
  font-family:var(--serif); font-weight:400; font-size:var(--t-5);
  line-height:.98; letter-spacing:-.034em; margin-top:var(--gap-md);
}
.pres__w{ display:inline-block; }
.pres__w em{ font-style:normal; font-weight:500; color:var(--olive); }
.pres__slot{
  display:inline-block; vertical-align:middle; flex:none;
  width:clamp(78px,9.5vw,168px); aspect-ratio:16/9;
  border-radius:var(--r-sm); overflow:hidden; background:var(--paper-3);
  transform:translateY(-.06em);
}
.pres__slot img{ width:100%; height:100%; object-fit:cover; }
.pres__arrow{ flex:none; width:clamp(26px,2.6vw,44px); height:clamp(26px,2.6vw,44px); color:var(--olive); }
.pres__arrow svg{ width:100%; height:100%; display:block; }
.pres__rule{ margin-top:var(--gap-lg); height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-io); }
.pres.is-in .pres__rule,.pres__rule.is-in{ transform:scaleX(1); }

/* onglets de catégorie */
.pres__tabs{
  position:relative; margin-top:var(--s4); display:flex; flex-wrap:wrap;
  gap:0 clamp(1.4rem,3.4vw,3rem); border-bottom:1px solid var(--line);
}
.ptab{
  display:inline-flex; align-items:baseline; gap:.55em;
  padding:0 0 clamp(.8rem,1.6vw,1.1rem);
  color:var(--ink-3); transition:color .4s var(--ease);
}
.ptab svg{ display:none; }
.ptab:hover{ color:var(--ink); }
.ptab.on{ color:var(--ink); }
.ptab__n{ font-size:.7em; opacity:.5; font-variant-numeric:tabular-nums; transform:translateY(-.55em); }
.ptab.on .ptab__n{ opacity:1; color:var(--wine); }
.ptabs__ind{
  position:absolute; bottom:-1px; left:0; height:2px; width:0; background:var(--wine);
  transition:transform .6s var(--ease-io), width .6s var(--ease-io);
}
/* si les onglets passent sur plusieurs lignes, le filet glissant n'a plus de sens */
.pres__tabs.wrapped .ptabs__ind{ display:none; }
.pres__tabs.wrapped .ptab{ padding-bottom:.55rem; }
.pres__tabs.wrapped .ptab.on{ box-shadow:inset 0 -2px 0 var(--wine); }
@media (prefers-reduced-motion:reduce){ .ptabs__ind{ transition:none; } }

/* corps : bande de logos à gauche, texte à droite */
.pres__body{ margin-top:var(--gap-lg); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
.pres__body > *{ min-width:0; }
@media (min-width:1000px){ .pres__body{ grid-template-columns:minmax(0,1fr) minmax(0,19rem); gap:var(--s6); align-items:start; } }

.pres__wrap{ position:relative; }
.pres__wrap::after{
  content:""; position:absolute; top:0; bottom:0; right:calc(var(--gut) * -1); width:clamp(48px,7vw,120px);
  z-index:2; pointer-events:none;
  background:linear-gradient(270deg,var(--paper-2) 34%,rgba(227,222,208,0));
}
.pres__strip{
  display:flex; align-items:stretch; gap:0;
  overflow-x:auto; overflow-y:hidden; padding-bottom:.4rem;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; user-select:none; -webkit-overflow-scrolling:touch;
}
.pres__strip::-webkit-scrollbar{ display:none; }
.pres__strip.drag{ cursor:grabbing; }

.plogo{
  flex:none; width:clamp(150px,16vw,206px);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:0 clamp(.9rem,1.8vw,1.5rem) 0 0; position:relative;
}
.plogo::after{
  content:""; position:absolute; right:0; top:12%; bottom:12%; width:1px; background:var(--line-soft);
}
.plogo + .plogo{ padding-left:clamp(.9rem,1.8vw,1.5rem); }
.plogo:last-child::after{ display:none; }
.plogo.off{ display:none; }
.plogo__mark{
  height:clamp(44px,4.4vw,58px);
  display:flex; align-items:flex-end; justify-content:flex-start;
}
.plogo__mark img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.06); opacity:.52;
  transition:filter .55s var(--ease), opacity .55s var(--ease), transform .6s var(--ease-io);
}
.plogo:hover .plogo__mark img{ filter:none; opacity:1; transform:translateY(-2px); }
.plogo__by{ margin-top:clamp(.95rem,1.7vw,1.25rem); }
.plogo__by b{ display:block; font-weight:500; font-size:.92rem; line-height:1.25; transition:color .4s var(--ease); }
.plogo:hover .plogo__by b{ color:var(--wine); }
.plogo__by span{ display:block; margin-top:.3rem; font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }

/* barre de défilement manuelle */
.pres__scrub{ position:relative; z-index:3; margin-top:var(--s3); display:flex; align-items:center; gap:var(--s3); }
.pres__scrub > span{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); flex:none; }
.pres__bar{ position:relative; flex:1 1 auto; max-width:16rem; height:2px; background:var(--line); cursor:pointer; }
.pres__bar i{ position:absolute; left:0; top:-3px; height:8px; width:28%; background:var(--wine); border-radius:var(--r-pill); transition:background .3s var(--ease); }
.pres__bar:hover i{ background:var(--ink); }

.pres__note{ color:var(--ink-2); font-weight:300; }
.pres__tag{ margin-top:var(--s3); display:flex; align-items:center; gap:.6em; font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pres__tag i{ width:5px; height:5px; border-radius:50%; background:var(--wine); flex:none; }

@media (prefers-reduced-motion:reduce){ .pres__rule{ transform:scaleX(1); transition:none; } }

/* ============ 10 · NOS CONSEILS ============ */
.guides{ padding-block:var(--sec); }
.guides__grid{ margin-top:var(--s5); display:grid; gap:var(--s4); }
@media (min-width:840px){ .guides__grid{ grid-template-columns:repeat(3,1fr); } }
.guide{ display:flex; flex-direction:column; }
.guide__fig{ overflow:hidden; border-radius:var(--r-sm); aspect-ratio:16/11; }
.guide__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.guide:hover .guide__fig img{ transform:scale(1.05); }
.guide__k{ margin-top:1.1rem; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.guide h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-2); line-height:1.1; letter-spacing:-.012em; margin-top:var(--gap-xs); }
.guide > p{ margin-top:var(--gap-sm); color:var(--ink-2); font-weight:300; }
.guide__more{ margin-top:1rem; font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--olive); display:inline-flex; align-items:center; gap:.6em; }
.guide:hover .guide__more .btn__arrow{ transform:translateX(4px); }

/* ============ 10 · FAQ + FORMULAIRE ============ */
.contact{ background:var(--paper-2); padding-block:var(--sec); }
.contact__grid{ margin-top:var(--s5); display:grid; gap:var(--s6); align-items:start; }
@media (min-width:1000px){ .contact__grid{ grid-template-columns:1fr minmax(0,30rem); } }

.faq{ border-top:1px solid var(--ink); will-change:transform; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto;
  gap:var(--s3); align-items:baseline; padding:1.4rem 0;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq__n{ font-family:var(--mono); font-weight:500; letter-spacing:.09em; font-size:var(--t-mono); color:var(--wine); }
.faq__q{
  font-family:var(--serif); font-weight:300; font-size:var(--d-5);
  line-height:1.25; letter-spacing:-.012em; transition:color .3s var(--ease);
}
.faq summary:hover .faq__q{ color:var(--olive); }
.faq .sign{ width:14px; height:14px; align-self:center; }
.faq .sign::before,.faq .sign::after{ top:6.5px; width:14px; }
/* le volet s'ouvre sur la grille : pas de saut, pas de hauteur mesurée en JS */
.faq__w{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease-io); }
.faq details[open] .faq__w{ grid-template-rows:1fr; }
.faq__c{ overflow:hidden; }
.faq__a{
  margin:0 0 1.5rem; margin-inline-start:calc(2.6ch + var(--s3));
  color:var(--ink-2); font-weight:300; max-width:62ch;
}
@media (max-width:640px){ .faq__a{ margin-inline-start:0; } }

/* la carte accompagne le scroll pendant qu'on ouvre les réponses */
.ccard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--s4); }
@media (min-width:1000px){
  .contact__grid{ align-items:start; }
  .ccard{ position:sticky; top:calc(82px + var(--s3)); }
}
.ccard h3{ font-family:var(--serif); font-weight:400; font-size:var(--step-2); line-height:1.08; letter-spacing:-.024em; }
.ccard > p{ margin-top:var(--gap-sm); color:var(--ink-2); font-weight:300; font-size:.95rem; max-width:36ch; }
.ccard__rows{ margin-top:var(--s4); border-top:1px solid var(--line); }
.ccard__row{ display:block; padding:var(--gap-sm) 0; border-bottom:1px solid var(--line); }
.ccard__row .label{ display:block; }
.ccard__row b{
  display:block; margin-top:var(--gap-xs); font-family:var(--serif);
  font-size:var(--t-2); line-height:1.15; letter-spacing:-.02em;
  transition:color .35s ease;
}
a.ccard__row:hover b{ color:var(--olive); }
.ccard .btn{ margin-top:var(--s4); width:100%; justify-content:center; }
.ccard__legal{ margin-top:var(--gap-sm); font-size:var(--step--1); color:var(--ink-3); line-height:1.5; }

/* ============ FOOTER ============ */
.foot{ background:var(--ink); color:var(--paper); padding-block:var(--s6) 1.5rem; overflow:hidden; }
/* volet : la page glisse par-dessus le footer, qui se découvre en fin de course */
.reveal main{ position:relative; z-index:1; background:var(--paper); }
.reveal .footpad{ height:var(--footh,0px); }
.reveal .foot{ position:fixed; left:0; right:0; bottom:0; z-index:0; }
.footpad{ height:0; }
.foot__word{ font-family:var(--serif); font-weight:400; font-size:var(--t-mega); line-height:.82; letter-spacing:-.03em; white-space:nowrap; }
.foot__word em{ font-style:normal; font-weight:500; color:var(--olive-lit); }
.foot__grid{ display:grid; gap:var(--s5); margin-top:var(--s6); }
@media (min-width:800px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.foot p{ color:rgba(233,227,211,.6); font-weight:300; max-width:34ch; }
.foot h4{ font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:rgba(233,227,211,.45); font-weight:500; }
.foot ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.55rem; }
.foot ul a,.foot ul li{ color:rgba(233,227,211,.82); }
.foot ul a:hover{ color:#fff; }
.foot__bar{ margin-top:var(--s6); padding-top:1.4rem; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:var(--step--1); color:rgba(233,227,211,.45); letter-spacing:.08em; }

/* ============ CURSEUR ============ */
.cursor{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; width:9px; height:9px; border-radius:50%; background:var(--olive); opacity:0; transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),background .3s; will-change:transform; }
.cursor.on{ opacity:1; }
.cursor.big{ width:52px; height:52px; background:rgba(79,91,41,.22); }
.cursor.pale{ background:var(--olive-lit); }
.cursor.pale.big{ background:rgba(222,210,183,.24); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask > span{ transform:none !important; }
  .drawline{ transform:none !important; }
  .wipe{ clip-path:none !important; }
  .cursor{ display:none !important; }
  .step{ opacity:1 !important; }
  .split .spanel{ flex:1 1 50% !important; }
  .grain{ display:none; }
}

/* ---------- navigation & micro-labels : Aspekta 500, capitales ---------- */
.label,.btn,.outs a,.scrollcue,.rail__txt,.mpanel__k,.mtags a,.menu__foot,.hero__zone strong,.hero__zone li,.pv__list span,.pv__go,.fg > span,.work__name .pro,.work__type,.work__meta,.work__yr,.work__swipe,.follow__tag,.player__play,.player__meta,.mfilm__cap,.mcount__cap span,.mstep__n,.mstep__act,.mstep__k,.whyrow__tag,.gbadge__go,.plate__k,.gal__go,.gcard__cap,.gcard--note .gnote__go,.actionbar__txt,.modepill,.vfilm__tag,.vfilm__by p,.vswap,.qcard__id span,.ptab,.plogo__by span,.pres__scrub > span,.pres__tag,.guide__more,.foot h4,.nav__tel,.foot__bar,.mrow__n,.ptab__n,.vrail__dots,.gbadge__meta,.gbadge__name,.say__by span,.tmoin__meta,.pcard__by span,.mpanel li a span,.qcard__st{
  font-family:var(--mono); font-weight:500; letter-spacing:.09em;
}
.label,.outs a,.scrollcue,.rail__txt,.mpanel__k,.mtags a,.menu__foot,.hero__zone strong,.hero__zone li,
.pv__list span,.pv__go,.fg > span,.work__type,.work__meta,.work__yr,.mfilm__cap,.mcount__cap span,
.mstep__act,.mstep__k,.whyrow__tag,.gbadge__go,.plate__k,.gal__go,.gcard__cap,.actionbar__txt,
.vfilm__tag,.vfilm__by p,.vswap,.qcard__id span,.ptab,.plogo__by span,.pres__scrub > span,.pres__tag,
.guide__more,.foot h4,.nav__tel,.foot__bar,.mrow__n,.player__play,.player__meta,.follow__tag,
.gcard--note .gnote__go,.modepill,.btn,.work__name .pro,.mpanel li a span,.say__by span,.tmoin__meta,
.pcard__by span{
  font-size:var(--t-mono); text-transform:uppercase;
}
.rail__txt{ font-size:calc(var(--t-mono) * .86); letter-spacing:.22em; }
.foot__bar,.menu__foot,.gcard__cap span,.mpanel li a span,.plogo__by span,.pcard__by span{ text-transform:uppercase; }
.gbadge__name,.gbadge__meta,.gbadge__score b{ font-family:var(--sans); font-weight:500; letter-spacing:0; text-transform:none; }
.gbadge__go{ letter-spacing:.08em; }



/* ---------- graisses : tout le texte de plus de 20 px respire ---------- */
.display,#load .lmark,.mrow__t,.pv__in h3,.fg b,.work__name,.mline,.mcount__win,
.mstep h3,.whyword,.plate__line,.vfilm__by h3,.pres__head,.foot__word,.tmoin__q,
.gal__head h2,.pres__w,.gcard--note h3,
.guide h3,.ccard h3,.ccard__row b,.pv__list b,.mpanel li a b,.qcard q,.vfilm__by q{
  font-weight:var(--w-air);
}
/* l'accent ne pèse plus : c'est la teinte seule qui le porte */
.display em,.out,.whyword em,.mline em,.plate__line em,.gal__head h2 em,.mclose p em,
.mrow__t em,.foot__word em,.pres__w em{
  font-weight:var(--w-air);
}
/* le sigle est une marque, pas un accent : il garde un cran de plus */
.nav__logo em,.menu__logo em,#load .lmark em{ font-weight:var(--w-acc); }

/* ---------- tailles de titres coordonnées ---------- */
h1.display{ font-size:var(--d-1); }
.shead h2,.why__head h2,.gal__head h2,.pres__head,#load .lmark{ font-size:var(--d-2); }
.plate__line,.mrow__t,.mline,.pv__in h3,.work__name{ font-size:var(--d-3); }
.mstep h3,.whyword,.vfilm__by h3,.tmoin__q{ font-size:var(--d-4); }
.guide h3,.ccard h3,.gcard--note h3,.qcard q,.vfilm__by q,.faq summary,
.ccard__row b,.pv__list b,.menu__logo,.mpanel li a b{ font-size:var(--d-5); }
.nav__logo{ font-size:calc(var(--d-5) * 1.02); }

/* ---------- rideau de transition entre les pages ---------- */
.veil{
  position:fixed; inset:0; z-index:calc(var(--z-load) - 1); pointer-events:none;
  background:var(--ink); transform:translateY(100%);
}
.veil.out{ transform:translateY(0); transition:transform .72s var(--ease-io); }
.veil.in{ transform:translateY(-100%); transition:transform .82s var(--ease-io) .05s; }

/* ---------- curseur contextuel ---------- */
.cursor{ display:grid; place-items:center; }
.cursor.say{ width:auto; height:auto; min-width:82px; padding:.85em 1.1em; border-radius:var(--r-pill); }
@media (hover:none),(pointer:coarse){ .cursor.say{ display:none; } }
.cursor__lab{
  font-size:.6rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); opacity:0; white-space:nowrap; transform:scale(.7);
  transition:opacity .3s var(--ease), transform .4s var(--ease-io);
}
.cursor.say{ background:var(--wine); }
.cursor.say .cursor__lab{ opacity:1; transform:none; }
.cursor.pale.say{ background:var(--wine); }

/* ---------- lignes de réalisation attirées par le curseur ---------- */
.work__row a{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .veil{ display:none; }
  .cursor__lab{ transition:none; }
}

/* ---------- chiffres qui roulent, chiffre par chiffre ---------- */
.odo{ display:inline-flex; align-items:flex-end; overflow:hidden; vertical-align:bottom; line-height:1; }
.odo > span{ font-size:inherit; letter-spacing:inherit; text-transform:none; }
.odo__col{ display:inline-block; overflow:hidden; height:1em; vertical-align:bottom; }
.odo__reel{ display:block; transform:translateY(0); }
.odo__reel span{ display:block; height:1em; line-height:1; font-variant-numeric:tabular-nums; }
.odo.go .odo__reel{ transition:transform 1.5s var(--ease-io) var(--od,0s); }
@media (prefers-reduced-motion:reduce){ .odo__reel{ transition:none !important; } }


/* ============================================================
   PASSE MOBILE — sous 900 px
   ============================================================ */
@media (max-width:899px){

  /* le héro : le contenu remonte au lieu de laisser un tiers d'écran vide */
  .hero{ justify-content:center; padding-top:calc(82px + var(--s4)); padding-bottom:var(--s5); }
  .hero__zone{ padding-block:var(--s3); }
  .hero__zone ul{ gap:.35rem 1.1rem; }

  /* la plaque : un cadrage portrait, pas un gros plan */
  .plate{ min-height:64svh; }
  .plate__bg img{ object-position:64% 38%; }

  /* la barre d'action tient moins de place */
  .actionbar{ padding:.5rem .5rem .5rem 1.1rem; gap:var(--s2); bottom:var(--s2); }
  .actionbar .btn{ padding:.8em 1.2em; }
  .actionbar__tel{ padding-right:0; }

  /* le carrousel d'avis : les flèches sortent des cartes, les points disparaissent */
  .vrail__stage{
    display:grid; grid-template-columns:44px 44px 1fr;
    align-items:center; gap:var(--s3) .6rem;
  }
  .vrail__win{ grid-row:1; grid-column:1 / -1; }
  .vrail__arw--up{ grid-row:2; grid-column:1; }
  .vrail__arw--down{ grid-row:2; grid-column:2; }
  .vrail__arw--up,.vrail__arw--down{
    position:static; inset:auto; transform:none; width:44px; height:44px;
  }
  .vrail__arw--up:hover,.vrail__arw--down:hover{ transform:none; }
  .vrail__dots{ display:none; }

  /* la vidéo témoignage : la citation cède la place au bouton Lire */
  .vfilm__by q{ display:none; }
  .vfilm .player__play{ top:var(--s3); bottom:auto; }
  .vfilm__by{ padding-top:clamp(2.4rem,10vw,4rem); }
}
@media (max-width:520px){
  /* deux liens de parcours plus courts */
  .pv__go span.long{ display:none; }
}


/* =========================================================================
   PAGE RÉALISATIONS — ce qui s'ajoute à la feuille du site
   ========================================================================= */

/* ---------- héro de page : le mot géant, centré, sur le vert foncé ---------- */
.rhero{
  background:var(--ink); color:var(--paper); position:relative; overflow:hidden;
  text-align:center;
  padding:calc(82px + var(--s7)) 0 var(--s7);
}
.rhero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(222,210,183,.12), transparent 62%),
    radial-gradient(90% 80% at 50% 110%, rgba(211,218,187,.07), transparent 60%);
}
.rhero > .wrap{ position:relative; z-index:1; }
.rhero__k{ display:block; color:var(--olive-lit); }
.rhero h1{
  margin:clamp(1.8rem,4vw,3.4rem) 0 0;
  font-family:var(--serif); font-weight:var(--w-air); color:var(--paper);
  font-size:clamp(2.6rem,.2rem + 10.4vw,10.5rem);
  line-height:.92; letter-spacing:-.045em; text-transform:uppercase; text-wrap:balance;
}
.rhero__sub{
  margin:clamp(2rem,4vw,3.2rem) auto 0; max-width:56ch;
  color:rgba(233,227,211,.7); font-weight:300; text-wrap:pretty;
}
.rhero__facts{
  margin:clamp(2rem,4vw,3rem) auto 0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.55rem clamp(1rem,2.4vw,2.2rem);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:rgba(233,227,211,.55);
}
.rhero__facts span{ display:inline-flex; align-items:baseline; gap:.5em; }
.rhero__facts i{
  width:4px; height:4px; border-radius:50%; background:var(--olive-lit);
  opacity:.5; display:block; flex:none;
}
.rhero__facts b{
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-1);
  letter-spacing:-.01em; text-transform:none; color:var(--olive-lit);
}

/* la nav garde un fond même au-dessus d'une section sombre : sinon le titre
   du héro passe derrière le sigle quand on s'arrête en plein dedans */
.nav.dark.stuck{
  background:rgba(30,35,24,.88);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-bottom-color:var(--line-dark);
}

/* ---------- barre de filtres ----------
   Un seul jeu, dans l'ordre des catégories de /realisations/.
   Les trois derniers sont les catégories Pro : ils sont séparés par un filet. */
.fbar{
  position:sticky; top:68px;             /* la hauteur de la nav réduite */
  z-index:var(--z-sticky);
  background:var(--paper); border-bottom:1px solid var(--line);
}
@media (max-width:600px){ .fbar{ top:66px; } }
/* deux lignes : les sept filtres d'abord, sur toute la largeur ;
   le lien vers la page catégorie dessous, seulement quand un filtre est actif.
   Il reste ainsi sous les yeux où qu'on soit dans la grille. */
.fbar__in{ display:flex; flex-wrap:wrap; align-items:stretch; padding-block:var(--gap-sm); }
.fbar__scroll{ flex:1 1 100%; }
.fbar .foffer{ flex:1 1 100%; margin-top:.6rem; padding-top:.65rem; border-top:1px solid var(--line-soft); }
.fbar .foffer:not(.on){ display:none; }
.fbar__scroll{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:clamp(.9rem,2.2vw,1.9rem);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity; padding-block:.35rem;
}
.fbar__scroll::-webkit-scrollbar{ display:none; }
.fbar__sep{ width:1px; height:18px; background:var(--line); flex:none; }
.ftab{
  position:relative; flex:none; scroll-snap-align:start; white-space:nowrap; cursor:pointer;
  padding:.35rem 0; color:var(--ink-3);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase;
  transition:color .35s var(--ease);
}
.ftab::after{
  content:""; position:absolute; left:0; right:0; bottom:-.35rem; height:1px;
  background:var(--wine); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-io);
}
.ftab:hover{ color:var(--ink); }
.ftab[aria-pressed="true"]{ color:var(--ink); }
.ftab[aria-pressed="true"]::after{ transform:scaleX(1); }
.ftab__n{
  margin-left:.55em; font-size:.74em; letter-spacing:.04em;
  color:var(--ink-3); vertical-align:super;
}
.ftab[aria-pressed="true"] .ftab__n{ color:var(--wine); }
/* typologie sans projet publié : visible dans le jeu de filtres, mais éteinte */
.ftab.is-empty{ opacity:.34; cursor:default; pointer-events:none; }
.ftab.is-empty:hover{ color:inherit; }
.ftab.is-empty::after{ transform:scaleX(0); }

/* ---------- ligne d'état : ce que le filtre a fait ---------- */
.fstate{ padding-block:var(--gap-lg) var(--gap-md); scroll-margin-top:170px; }
.fstate__l{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em; }
.fstate__n{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4);
  line-height:1; letter-spacing:-.018em; }
.fstate__t{ color:var(--ink-2); font-weight:300; }
.fstate__t em{ font-style:normal; color:var(--olive); }
.foffer{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--wine);
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.foffer.on{ opacity:1; transform:none; pointer-events:auto; }
.foffer .btn__arrow{ transition:transform .4s var(--ease); }
.foffer:hover .btn__arrow{ transform:translateX(4px); }

/* ---------- la mosaïque ----------
   Vraie maçonnerie : le script range chaque fiche dans la colonne la plus
   courte, donc aucune fiche n'attend la fin de sa rangée. Sans script, les
   fiches restent en grille simple — un peu plus de blanc, mais rien de cassé. */
.pgrid{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--s5); align-items:start; padding-bottom:var(--sec);
}
@media (min-width:700px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .pgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pcol{ display:none; }
.pgrid.is-masonry .pcol{ display:grid; gap:var(--s5); align-content:start; }
/* typologie à une ou deux réalisations : la grille se resserre et se centre */
.pgrid.is-few{ margin-inline:auto; }
@media (min-width:700px){
  .pgrid.is-few{ max-width:min(100%,62rem); }
  .pgrid.is-one{ max-width:min(100%,34rem); }
}
/* un seul décalage, sur la colonne du milieu : assez pour le rythme, pas assez pour trouer */
@media (min-width:1100px){
  .pgrid.is-masonry .pcol:nth-of-type(2){ margin-top:var(--s5); }
}

.pcard{ align-self:start; }
.pcard[hidden]{ display:none; }
.pcard a{ display:block; }
/* --k va de 0 (la fiche entre par le bas) à 1 (elle est installée dans l'écran).
   Le cadre s'ouvre par le haut et le bas pendant que la photo se détend :
   la photo grandit à mesure qu'on descend. Valeur de repli : 1, donc si le
   script ne tourne pas, tout est simplement ouvert. */
.pcard__fig{
  display:block; position:relative; overflow:hidden; background:var(--paper-3);
  aspect-ratio:var(--ar,3 / 4);
  clip-path:inset(calc(7% * (1 - var(--k,1))) 0);
}
.pcard__zoom{
  display:block; width:100%; height:100%;
  transform:scale(calc(1 + .085 * (1 - var(--k,1))));
  transform-origin:center;
}
.pcard__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease-io), filter .6s var(--ease);
}
.pcard a:hover .pcard__fig img{ transform:scale(.965); }
@media (prefers-reduced-motion:reduce){
  .pcard__fig{ clip-path:none; }
  .pcard__zoom{ transform:none; }
}
.pcard__bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  margin-top:var(--gap-sm); padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.pcard__name{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5);
  line-height:1.1; letter-spacing:-.018em; transition:color .35s var(--ease); }
.pcard a:hover .pcard__name{ color:var(--olive); }
.pcard__yr{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; color:var(--ink-3); flex:none; }
.pcard__foot{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem var(--s3); margin-top:.7rem; }
.pcard__type{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--olive); }
.pcard__meta{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

/* sortie / entrée au changement de filtre */
.pcard{ transition:opacity .34s var(--ease), transform .34s var(--ease); }
.pgrid.is-swapping .pcard{ opacity:0; transform:translate3d(0,10px,0); }
.pcard.is-new{ opacity:0; transform:translate3d(0,14px,0); }
.pcard.is-new.is-settled{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease) var(--d,0s), transform .7s var(--ease-io) var(--d,0s);
}

/* ---------- rien à afficher ---------- */
.pempty{ padding:var(--s6) 0 var(--sec); display:none; }
.pempty.on{ display:block; }
.pempty p{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4); max-width:32ch; }
.pempty a{ margin-top:var(--gap-lg); }

/* ---------- bandeau de fin ---------- */
.rcta{ background:var(--paper-2); padding-block:var(--sec); }
.rcta__in{ display:grid; gap:var(--gap-lg); align-items:end; }
@media (min-width:900px){ .rcta__in{ grid-template-columns:1fr auto; gap:var(--s6); } }
.rcta h2{ font-size:var(--d-2); }
.rcta p{ margin-top:var(--gap-md); color:var(--ink-2); font-weight:300; max-width:48ch; }

@media (prefers-reduced-motion:reduce){
  .pcard,.pcard.is-new.is-settled{ transition-duration:.01ms !important; }
}


/* =========================================================================
   FICHE PROJET — dix blocs, toujours dans cet ordre
   ========================================================================= */

/* ---------- 01 · la photo plein écran, le titre posé dessus ---------- */

/* =========================================================================
   INTERLETTRAGE — un jeton par palier d'affichage.
   L'audit avait relevé quatre valeurs différentes sur des titres de même
   taille (-1,79 / -1,90 / -1,96 px à 56 px). Elles venaient de quatre
   déclarations écrites à la main. Ici, une seule source par palier.
   ========================================================================= */
:root{
  --track-d1:-.040em;   /* titres de première grandeur  */
  --track-d2:-.032em;   /* titres de section            */
  --track-d3:-.026em;   /* sous-titres, citations       */
  --track-t:-.016em;    /* corps mis en avant           */
}

/* .display vient de la charte de l'accueil, avec son propre interlettrage.
   Sur les pages projet on le ramène sur le jeton, sinon deux titres de même
   taille ne sont pas tracés pareil (c'était -1,96 contre -1,79 px à 56 px). */
.pquote .display,.psim .display,.pact .display,.pctx h2,.pline h2{
  letter-spacing:var(--track-d2);
}
.phero{ position:relative; height:100svh; min-height:30rem; overflow:hidden; background:var(--ink); }
.phero__fig{ position:absolute; inset:0; overflow:hidden; }
/* Le parallaxe avait besoin de 18 % de hauteur en plus : sur une photo de
   2000 px c'est invisible, mais cela recadrait et agrandissait la première
   image d'autant. Ramené à 7 %, le cadrage reste celui du photographe. */
.phero__fig img{
  width:100%; height:107%; object-fit:cover; position:absolute; left:0; top:-3.5%;
  transform:translate3d(0,calc(var(--hp,0) * 3.5%),0) scale(calc(1.015 - var(--hk,0) * .015));
}
.phero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(30,35,24,.55) 0,rgba(30,35,24,0) 16%),
    linear-gradient(0deg,rgba(30,35,24,.80) 0,rgba(30,35,24,.24) 26%,rgba(30,35,24,0) 48%);
}
.phero__in{
  position:absolute; left:0; right:0; bottom:0; z-index:2; color:var(--paper);
  padding-block:var(--s6);
}
.phero__k{ display:block; color:var(--olive-lit); }
.phero h1{
  margin:var(--gap-md) 0 0;
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-1);
  line-height:.98; letter-spacing:var(--track-d1); text-wrap:balance; max-width:16ch;
}
.phero h1 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }

/* -------------------------------------------------------------------------
   HERO « PHOTO VERTICALE »
   Une photo 800 x 1200 posée en plein écran horizontal perd 58 % de sa
   hauteur et se retrouve agrandie 1,8 fois : c'est le « trop zoomé ».
   Ici la photo garde son format d'origine et c'est le CADRE qui s'adapte :
   piloté par la hauteur, jamais recadré, jamais agrandi au-delà du besoin.
   Le titre prend la place laissée libre, sur le vert foncé.
   ------------------------------------------------------------------------- */
.phero--couverture{ height:auto; min-height:0; overflow:visible; }
.phero--couverture .phero__grid{
  display:grid; gap:var(--gap-lg);
  padding-block:calc(82px + var(--s5)) var(--s6);
  padding-inline:var(--gut);
  align-items:center;
}
@media (min-width:900px){
  .phero--couverture .phero__grid{
    grid-template-columns:minmax(0,1fr) auto;
    gap:var(--s6); min-height:100svh;
    padding-block:calc(82px + var(--s4)) var(--s5);
  }
}
.phero--couverture .phero__shot{
  margin:0; overflow:hidden; background:#1A1E15;
  aspect-ratio:var(--ar,2 / 3);
  height:min(78svh, 46rem); width:auto; max-width:100%;
  justify-self:center;
}
/* une photo paysage mais trop petite pour le plein écran passe ici aussi :
   on borne alors la largeur pour laisser respirer le titre. */
@media (min-width:900px){
  .phero--couverture .phero__shot{ max-width:min(100%, 52vw); }
}
@media (max-width:899px){
  .phero--couverture .phero__shot{ height:min(58svh, 30rem); }
}
.phero--couverture .phero__shot img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.phero--couverture .phero__txt{ color:var(--paper); }
.phero--couverture h1{ margin:var(--gap-md) 0 0; max-width:12ch; }
/* Les chiffres du chantier passent dans la couverture : la colonne de
   gauche est pleine, et la fiche technique ne fait plus doublon dessous. */
.phero__cles{
  margin-top:clamp(2.2rem,4.5vw,4rem);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4) var(--s5); max-width:34rem;
  border-top:1px solid var(--line-dark); padding-top:var(--s4);
}
@media (min-width:1200px){ .phero__cles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); } }
.phero__c{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.phero__v{
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4);
  line-height:1; letter-spacing:var(--track-d3); color:var(--paper);
  font-variant-numeric:tabular-nums lining-nums;
}
.phero__v small{
  display:block; margin-top:.45rem; font-size:.42em; letter-spacing:.14em;
  text-transform:uppercase; font-family:var(--mono); color:var(--olive-lit);
}
.phero--couverture .phero__shot{ height:min(80svh, 48rem); }
@media (max-width:899px){
  .phero--couverture .phero__shot{ height:min(56svh, 28rem); }
  .phero__cles{ margin-top:var(--s5); }
}
@media (min-width:900px){ .phero--couverture .phero__grid{ gap:var(--s5); } }
/* la photo se lève doucement à l'ouverture, comme le reste de la page */
.phero--couverture .phero__shot{
  clip-path:inset(var(--wipe,0%) 0 var(--wipe,0%) 0);
}

/* ---------- 02 · la fiche technique, en bandeau vert foncé ----------
   Le bandeau prolonge la photo au lieu de flotter sur le beige : filets en
   haut et en bas, séparateurs verticaux entre les quatre postes. */
.pkey{ background:var(--ink); color:var(--paper); }
.pkey__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
}
@media (min-width:860px){ .pkey__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pkey__c{ padding:var(--s5) 0; position:relative; }
.pkey__c + .pkey__c{ border-left:1px solid var(--line-dark); padding-left:var(--s4); }
@media (max-width:859px){
  .pkey__c{ padding-block:var(--s4); }
  .pkey__c:nth-child(odd){ border-left:0; padding-left:0; }
  .pkey__c:nth-child(n+3){ border-top:1px solid var(--line-dark); }
}
.pkey__k{ display:block; color:rgba(233,227,211,.5); }
.pkey__v{
  display:block; margin-top:var(--gap-sm);
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  color:var(--olive-lit);
}
.pkey__v small{
  font-size:.46em; letter-spacing:0; margin-left:.3em;
  color:rgba(233,227,211,.62);
}

/* ---------- 03 · le contexte : le titre en marge, le récit en deux colonnes ---------- */
.pctx{ padding-block:var(--sec); }
.pctx__grid{ display:grid; gap:var(--gap-lg); }
@media (min-width:1000px){
  .pctx__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s7); align-items:start; }
}
.pctx h2{
  margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2);
  text-wrap:balance; max-width:13ch;
}
.pctx h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive); }
/* deux colonnes typographiques, comme une monographie */
.pctx__body{ columns:2; column-gap:var(--s5); }
@media (max-width:899px){ .pctx__body{ columns:1; } }
.pctx__body p{ margin:0 0 var(--gap-sm); color:var(--ink-2); font-weight:300; break-inside:avoid; }
.pctx__body p:first-child::first-letter{
  float:left; font-family:var(--serif); font-weight:var(--w-air); font-size:3.1em;
  line-height:.82; padding:.06em .14em 0 0; color:var(--olive);
}
.pctx__note{
  margin-top:var(--gap-lg); padding-top:var(--gap-sm); border-top:1px solid var(--line);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- 08 · citations : deux plaques décalées ----------
   La carte n'est pas une boîte qu'on remplit à moitié : elle a une hauteur
   minimale, le texte est en grand, et la signature est poussée en pied par
   `margin-top:auto`. Un filet se dessine sous elle quand la carte arrive. */
.pquote{ padding-block:var(--sec); }
.pquote__grid{ margin-top:clamp(2.4rem,4.6vw,3.8rem); display:grid; gap:var(--s5); }
@media (min-width:900px){
  .pquote__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); align-items:start; }
  .pq:nth-child(2){ margin-top:clamp(4rem,9vw,8rem); }
}
.pq{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  background:var(--paper-2); color:var(--ink);
  padding:clamp(1.9rem,3.6vw,3.2rem);
  min-height:clamp(21rem,33vw,29rem);
  box-shadow:inset 0 0 0 1px var(--line);
}
.pq:nth-child(2){ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px var(--line-dark); }
/* pas de guillemet géant : dans Aspekta il se lit comme deux chevrons.
   La plaque, la grande typo et le filet suffisent. */

.pq__top{ display:flex; align-items:center; gap:var(--s3); }
.pq__mono{
  width:clamp(46px,4.6vw,58px); height:clamp(46px,4.6vw,58px); border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--wine); color:var(--paper);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.08em;
}
.pq:nth-child(2) .pq__mono{ background:var(--olive-lit); color:var(--ink); }
.pq__k{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.pq:nth-child(2) .pq__k{ color:rgba(233,227,211,.55); }

.pq q{
  display:block; margin-top:clamp(2rem,4vw,3.2rem);
  font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3);
  line-height:1.14; letter-spacing:var(--track-d3); max-width:19ch;
  quotes:"\00ab\00a0" "\00a0\00bb"; text-wrap:pretty;
}
.pq__by{
  margin-top:auto; padding-top:clamp(1.8rem,3.4vw,2.8rem);
  display:flex; flex-direction:column; gap:.3rem;
}
.pq__by b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); letter-spacing:-.018em; }
.pq__by span{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.pq:nth-child(2) .pq__by span{ color:rgba(233,227,211,.5); }
/* un filet qui se dessine sous la signature quand la carte arrive */
.pq__by::before{
  content:""; display:block; height:1px; width:100%; margin-bottom:clamp(1rem,1.8vw,1.4rem);
  background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-io) .25s;
}
.pq:nth-child(2) .pq__by::before{ background:var(--line-dark); }
.pq.is-in .pq__by::before{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .pq__by::before{ transform:scaleX(1); } }

/* ---------- 09 · bande activité ---------- */
.pact{ background:var(--ink); color:var(--paper); padding-block:var(--sec); overflow:hidden; }
.pact__in{ display:grid; gap:var(--gap-lg); align-items:end; }
@media (min-width:900px){ .pact__in{ grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); } }
.pact h2{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2);
  line-height:1.02; letter-spacing:var(--track-d2); text-wrap:balance; }
.pact h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }
.pact p{ margin-top:var(--gap-md); color:rgba(233,227,211,.68); font-weight:300; max-width:48ch; }

/* ---------- 10 · projets de la même typologie ---------- */
.psim{ padding-block:var(--sec); }
.psim__grid{ margin-top:var(--gap-lg); display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); }
@media (min-width:800px){ .psim__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.scard__fig{ display:block; overflow:hidden; background:var(--paper-3); aspect-ratio:4 / 5;
  clip-path:inset(calc(7% * (1 - var(--k,1))) 0); }
.scard__fig span{ display:block; width:100%; height:100%;
  transform:scale(calc(1 + .085 * (1 - var(--k,1)))); }
.scard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-io); }
.scard a:hover .scard__fig img{ transform:scale(.965); }
.scard__bar{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  margin-top:var(--gap-sm); padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.scard__name{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5);
  line-height:1.1; letter-spacing:-.018em; transition:color .35s var(--ease); }
.scard a:hover .scard__name{ color:var(--olive); }
.scard__yr,.scard__type,.scard__meta{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; }
.scard__yr,.scard__meta{ color:var(--ink-3); }
.scard__type{ color:var(--olive); }
.scard__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem var(--s3); margin-top:.7rem; }
.scard--more a{
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
  background:var(--paper-2); padding:var(--s4); min-height:18rem;
  transition:background .4s var(--ease);
}
.scard--more a:hover{ background:var(--paper-3); }
.scard--more h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4);
  line-height:1.1; letter-spacing:var(--track-d3); max-width:14ch; }
.scard--more span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--wine);
  display:inline-flex; align-items:center; gap:.7em; }
.scard--more a:hover .btn__arrow{ transform:translateX(5px); }
.scard--more .btn__arrow{ transition:transform .4s var(--ease); }

/* ---------- révélations propres à la fiche ---------- */
.rise{ opacity:0; transform:translate3d(0,26px,0); }
.rise.is-in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease) var(--rv-d,0s), transform 1.05s var(--ease-io) var(--rv-d,0s); }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1 !important; transform:none !important; }
  .phero__fig img{ transform:none !important; }
}

/* ---------- 06 · la phrase qui se compose, et la vidéo ---------- */
.pline{ padding-block:var(--sec); }
.pline__grid{ display:grid; gap:var(--s6); align-items:center; }
@media (min-width:1000px){
  .pline__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:start; }
}
.pline__k{ display:block; color:var(--olive); }
.pline__p{
  margin:var(--gap-lg) 0 0;
  font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-3); line-height:1.16; letter-spacing:var(--track-d3);
  text-wrap:pretty; max-width:20ch;
}
.pline__p .w{ display:inline-block; opacity:calc(.14 + .86 * var(--o,1)); transition:opacity .18s linear; }
.pline__p em{ font-style:normal; color:var(--olive); }
.pline__note{ margin-top:var(--gap-lg); color:var(--ink-2); font-weight:300; max-width:44ch; }

/* la vidéo reste une vignette, pas un mur : bornée en largeur, et plus large
   que haute dès qu'elle passe sous le texte en une seule colonne */
/* Les films du chantier sont tournés en 1080 x 1920, donc verticaux.
   Le cadre est piloté par la HAUTEUR et non par la largeur : quelle que
   soit la taille de l'écran, la vidéo tient entre le haut et le bas de la
   fenêtre au lieu de la déborder. */
.pmedia{
  position:relative; overflow:hidden; background:#1A1E15;
  aspect-ratio:9 / 16;
  height:min(66svh, 34rem); width:auto; max-width:100%;
  margin-inline:auto;
  clip-path:inset(var(--wipe,0%) 0 var(--wipe,0%) 0);
}
@media (max-width:999px){
  .pmedia{ height:min(62svh, 30rem); }
  .pmedia__meta{ max-width:38rem; }
}
@media (max-width:520px){ .pmedia{ height:min(58svh, 26rem); } }
.pmedia video,.pmedia img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Juste le triangle : la miniature — donc la personne — reste visible. */
.pmedia__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  display:grid; place-items:center;
  width:clamp(58px,7vw,76px); aspect-ratio:1; padding:0;
  border-radius:50%; background:rgba(245,243,236,.92); color:var(--ink);
  backdrop-filter:blur(6px);
  transition:transform .45s var(--ease), opacity .4s var(--ease), background .35s var(--ease);
}
.pmedia__play svg{ width:34%; height:34%; margin-left:8%; }
.pmedia__play b{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.pmedia__play:hover{ transform:translate(-50%,-50%) scale(1.07); background:var(--paper); }
.pmedia__play:hover{ transform:translate(-50%,-50%) scale(1.04); background:var(--olive-lit); }
.pline.is-playing .pmedia__play{ opacity:0; pointer-events:none; }
.pmedia__meta{
  margin:var(--gap-sm) auto 0; max-width:40rem;
  display:flex; flex-wrap:wrap; gap:.5rem var(--s4);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}

/* =========================================================================
   05 · LA GALERIE — quatre photos verticales de front, qui filent au scroll
   Quatre vignettes tiennent dans l'écran ; la molette verticale fait glisser
   la bande vers la gauche et amène les suivantes. Format portrait : la photo
   est montrée presque entière au lieu d'être recadrée en plein écran.
   ========================================================================= */
.pwall{ position:relative; background:var(--ink); height:340svh; }
/* La vitrine se lit en trois temps : le titre en haut, la bande de photos au
   centre, le compteur en bas. Chaque zone occupe sa ligne, plus de bandeau
   flottant qui se pose sur les photos. */
.pwall__stick{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding-top:calc(76px + var(--s2)); padding-bottom:var(--s3);
}
/* la bande part de la gouttière de la page : la première vignette s'aligne
   sur les titres du reste du site. */
/* Quatre vues de front : la largeur est bornée par l'écran, alors on
   récupère tout ce qu'on peut sur les gouttières et on allonge le format
   (5/8 au lieu de 2/3). À 1440 px, chaque vue gagne un tiers de surface. */
.pwall__track{
  display:flex; align-items:center; gap:clamp(.7rem,1.1vw,1.3rem);
  padding-inline:clamp(.7rem,1.1vw,1.3rem); width:max-content; will-change:transform;
  align-self:center;
}
/* Une seule hauteur pour toute la bande, une largeur par photo : c'est le
   format du fichier qui décide. Les verticales sont donc plus hautes que
   larges, et aucune n'est rognée pour entrer dans un cadre commun. */
/* Un seul cadre pour toute la bande, en portrait et sur toute la hauteur
   disponible : quatre vues de front, la cinquième qui dépasse. C'est le
   format que le client a retenu — les horizontales sont donc recadrées
   en vertical, volontairement. */
.pwall__pan{
  position:relative; margin:0; flex:none;
  width:var(--pan-w,22vw); height:var(--pan-h,60svh);
  aspect-ratio:auto; overflow:hidden; background:#1A1E15;
}
.pwall__pan img{ width:100%; height:100%; object-fit:cover; display:block; }

/* le titre reste lisible pendant toute la traversée */
/* le titre se fait court : chaque pixel qu'il rend, la bande le prend. */
.pwall__head{
  position:relative; z-index:4; pointer-events:none;
  color:var(--paper); padding-bottom:var(--s3);
}
.pwall__head h2{
  margin-top:var(--gap-xs); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-4); line-height:1.02; letter-spacing:var(--track-d3); max-width:24ch;
}
.pwall__head h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }

.pwall__foot{
  position:relative; z-index:4; padding-inline:var(--gut);
  display:flex; align-items:center; gap:var(--s4); pointer-events:none;
}
.pwall__count{
  flex:none; font-family:var(--mono); font-weight:var(--w-lab); font-size:var(--t-mono);
  letter-spacing:.18em; color:rgba(233,227,211,.62);
}
.pwall__count b{ color:var(--olive-lit); font-weight:var(--w-lab); }
.pwall__bar{ position:relative; flex:1 1 auto; height:1px; background:rgba(233,227,211,.20); }
.pwall__bar i{
  position:absolute; left:0; top:0; height:1px; width:100%; background:var(--olive-lit);
  transform:scaleX(var(--pp,0)); transform-origin:left;
}
@media (max-width:899px){
  .pwall{ height:280svh; }
  .pwall__stick{ padding-top:calc(62px + var(--s2)); padding-bottom:var(--s3); }
}
@media (prefers-reduced-motion:reduce){
  .pwall{ height:auto; }
  .pwall__stick{ position:static; height:auto; display:block; padding-bottom:var(--s5); }
  .pwall__track{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto; transform:none !important; padding:var(--s4) var(--gut);
  }
  .pwall__pan{ width:auto; }
}

/* ---------- 06 · le mot de l'architecte, vidéo à droite ---------- */
.pline__by{ margin-top:var(--gap-lg); display:flex; flex-direction:column; gap:.25rem; }
.pline__by b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-1); letter-spacing:-.012em; }
.pline__by span{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}

/* =========================================================================
   LES DÉTAILS — une bande qui file de gauche à droite pendant qu'on descend
   ========================================================================= */
.pdet{
  padding-block:var(--sec); overflow:hidden;
  background:var(--ink); color:var(--paper);
}
.pdet__head{ display:grid; gap:var(--gap-lg); }
@media (min-width:900px){
  .pdet__head{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:var(--s6); align-items:end; }
}
.pdet__head h2{
  margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2);
}
.pdet__head h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }
.pdet__head p{ color:rgba(233,227,211,.68); font-weight:300; }

.pdet__rail{ margin-top:var(--gap-lg); overflow:hidden; }
.pdet__strip{
  display:flex; align-items:flex-start; gap:var(--s4); width:max-content;
  padding-inline:var(--gut); will-change:transform;
}
/* Une matière par vignette. Carré, plein cadre, jamais de voile sur la photo :
   c'est la légende qui s'allume quand la vignette passe au centre. */
.pdet__it{ margin:0; flex:none; width:clamp(15rem,24vw,23rem); pointer-events:none; }
.pdet__shot{
  display:block; overflow:hidden; background:#1A1E15; aspect-ratio:1 / 1;
}
.pdet__shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.pdet__cap{
  display:flex; align-items:baseline; gap:.9rem;
  margin-top:var(--gap-sm); padding-top:var(--gap-sm);
  border-top:1px solid rgba(222,210,183,.22);
  /* pas de transition CSS : la valeur est déjà lissée image par image par
     le défilement, une transition par-dessus la retiendrait à mi-chemin. */
  opacity:calc(.22 + .78 * var(--f,0));
}
.pdet__cap i{
  flex:none; font-style:normal; font-family:var(--mono); font-weight:var(--w-lab);
  font-size:var(--t-mono); letter-spacing:.2em; color:var(--olive-lit);
}
.pdet__cap b{
  font-weight:var(--w-air); font-size:var(--d-5); line-height:1.16;
  letter-spacing:-.018em; color:var(--paper);
}
.pdet__cap-t{ display:block; min-width:0; }
.pdet__cap-t span{ display:block; margin-top:.25rem; font-size:.92rem;
  font-weight:300; line-height:1.4; color:rgba(233,227,211,.6); }

@media (max-width:640px){
  .pdet__it{ width:76vw; }
  .pdet__cap b{ font-size:1.05rem; }
}
@media (prefers-reduced-motion:reduce){
  .pdet__rail{ overflow-x:auto; }
  .pdet__strip{ transform:none !important; }
  .pdet__cap{ opacity:1; }
}

/* =========================================================================
   PASSE DE FINITION — couche « composant » de la fiche projet
   Trois niveaux : primitif (la palette du site) → sémantique (--gap-*, --w-*)
   → composant (--pj-*). Rien n'est écrit en dur ici.
   ========================================================================= */
:root{
  /* durées : trois crans, plus le cran « révélation » */
  --mo-fast:.35s;
  --mo:.55s;
  --mo-slow:.9s;
  --mo-reveal:1.05s;

  /* filets de la fiche projet */
  --pj-rule:1px solid var(--line);
  --pj-rule-strong:1px solid var(--ink);
  --pj-rule-dark:1px solid var(--line-dark);

  /* numérotation de section, dans la marge */
  --pj-num:var(--t-mono);
  --pj-num-ink:var(--ink-3);
  --pj-num-pale:rgba(233,227,211,.42);
}

/* ---------- la sélection porte la marque ---------- */
::selection{ background:var(--olive); color:var(--paper); }
[data-dark] ::selection{ background:var(--olive-lit); color:var(--ink); }

/* ---------- anneau de focus : bordeaux, visible partout ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--wine); outline-offset:3px; border-radius:var(--r-xs);
}
[data-dark] a:focus-visible,[data-dark] button:focus-visible{
  outline-color:var(--olive-lit);
}

/* ---------- numéro de section, posé dans la marge ----------
   Un chiffre discret par bloc : c'est le geste des monographies. */
.pnum{
  position:absolute; left:var(--gut); top:var(--s5); z-index:3;
  font-family:var(--mono); font-weight:var(--w-lab); font-size:var(--pj-num);
  letter-spacing:.22em; color:var(--pj-num-ink); pointer-events:none;
}
[data-dark] .pnum{ color:var(--pj-num-pale); }
/* le chiffre se cale sur la ligne du sur-titre, pas sur le haut de la section :
   le décalage compense l'interlignage de l'étiquette. */
.pctx .pnum,.pline .pnum,.pdet .pnum,.pquote .pnum,.pact .pnum,.psim .pnum{
  top:calc(var(--sec) + 1.2rem);
}
.pwall .pnum{ top:calc(76px + var(--s2) + .28rem); }
.pctx,.pwall,.pline,.pdet,.pquote,.pact,.psim{ position:relative; }
@media (max-width:1199px){ .pnum{ display:none; } }
@media (min-width:1200px){
  /* le numéro occupe la marge, le contenu n'y touche pas */
  .pctx > .wrap,.pline > .wrap,.pdet__head,.pquote > .wrap,.pact > .wrap,.psim > .wrap,
  .pwall__head > .wrap{
    padding-left:calc(var(--gut) + 3.4rem);
  }
  .pdet__rail .pdet__strip{ padding-left:calc(var(--gut) + 3.4rem); }
}

/* ---------- le filet se dessine sous chaque sur-titre ---------- */
.label--rule{ position:relative; display:inline-block; padding-bottom:.6rem; }
.label--rule::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.34;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--mo-reveal) var(--ease-io) .1s;
}
.rise.is-in .label--rule::after,.label--rule.is-in::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .label--rule::after{ transform:scaleX(1); } }

/* ---------- les blocs sombres s'ouvrent sur un filet écru ---------- */
.pwall,.pact{ border-top:1px solid rgba(222,210,183,.22); }

/* ---------- chiffres : chasse fixe et petites capitales d'unité ---------- */
.pkey__v{ font-variant-numeric:tabular-nums lining-nums; }
.pkey__v small{ font-variant-numeric:normal; }

/* ---------- citations : guillemets suspendus ---------- */
.pq q{ text-indent:-.42em; }
@media (max-width:640px){ .pq q{ text-indent:0; } }

/* ---------- une transition unique pour tout ce qui réagit ---------- */
.pcard__name,.scard__name,.prow__name,.pq__by b,.pkey__v{ transition:color var(--mo) var(--ease); }


/* une seule vue livrée : pas de bande à faire défiler, une image pleine page */
.pwall--une{ padding-block:var(--sec); height:auto; }
/* le numéro de section s'aligne comme sur les autres sections en pleine page */
.pwall--une .pnum{ top:calc(var(--sec) + 1.2rem); }
@media (min-width:1200px){ .pwall--une > .wrap{ padding-left:calc(var(--gut) + 3.4rem); } }
.pwall--une .wrap{ margin-bottom:var(--gap-lg); }
.pwall--une h2{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-2); line-height:1.02; letter-spacing:-.03em; }
.pwall--une h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }
.pwall__une{ display:grid; gap:var(--s3); padding-inline:var(--gut); }
@media (min-width:760px){ .pwall__une:not(:only-child){ grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); } }
.pwall__une figure{ margin:0; overflow:hidden; background:#1A1E15; aspect-ratio:16 / 10; }
.pwall__une img{ width:100%; height:100%; object-fit:cover; display:block; }

/* pas de vidéo livrée : le même cadre reçoit une photo */
.pmedia--fixe{ margin:0 auto; overflow:hidden; background:var(--paper-3); }
.pmedia--fixe img{ width:100%; height:100%; object-fit:cover; display:block; }


/* =========================================================================
   04 · MOSAÏQUE ÉDITORIALE — matières et finitions
   ========================================================================= */
.pmos{
  position:relative; background:var(--paper); color:var(--ink);
  padding-block:var(--sec) calc(var(--sec) * 1.2);
  overflow:hidden;
}
.pmos__head{ margin-bottom:clamp(3.5rem,8vw,8rem); }
.pmos__head h2{
  margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-1); line-height:.98; letter-spacing:var(--track-d1);
  text-transform:uppercase;
}
.pmos__head h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive); }
.pmos__mat{
  margin-top:var(--gap-md); font-family:var(--mono); font-weight:var(--w-lab);
  font-size:var(--t-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
}

/* la grille : quatre colonnes, des gouttières larges, des colonnes décalées */
.pmos__grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(2.2rem,5vw,4.5rem);
  padding-inline:var(--gut);
}
@media (min-width:640px){ .pmos__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Trois colonnes et non quatre : à quatre, les vignettes tombaient sous les
   300 px et la section perdait sa présence. Le blanc reste, les images
   gagnent un tiers de largeur. */
@media (min-width:1100px){
  .pmos__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2.6rem,3.4vw,4.4rem); }
}
.pmos__col{ display:grid; gap:clamp(3rem,7vw,7.5rem); align-content:start; }
/* le décalage : chaque colonne démarre à une hauteur différente */
@media (min-width:1100px){
  .pmos__col:nth-child(2){ margin-top:clamp(5rem,11vw,11rem); }
  .pmos__col:nth-child(3){ margin-top:clamp(1.5rem,3vw,3.5rem); }
}
@media (min-width:640px) and (max-width:1099px){
  .pmos__col:nth-child(2){ margin-top:clamp(3rem,8vw,6rem); }
}

.pmos__it{
  margin:0; opacity:0; transform:translate3d(0,26px,0);
  transition:opacity 1s var(--ease-io), transform 1.15s var(--ease-io);
}
.pmos__it.is-in{ opacity:1; transform:none; }
.pmos__it img{
  width:100%; height:auto; display:block;
  background:var(--paper-3);
}
/* quelques vignettes volontairement plus étroites : la composition respire */
@media (min-width:1100px){
  .pmos__it[data-etroit]{ width:80%; }
  .pmos__col:nth-child(even) .pmos__it[data-etroit]{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){
  .pmos__it{ opacity:1; transform:none; transition:none; }
  .pmos__col{ margin-top:0 !important; }
}


/* =========================================================================
   MAJ 09/2026 · galerie 2 « matières & finitions » en composition éditoriale
   Des rangées qui alternent grand paysage, paires de verticales décalées et
   duo portrait + paysage. Beaucoup de blanc, mais des images toujours grandes.
   ========================================================================= */
.pctx__hard{ margin-top:var(--gap-lg); padding-top:var(--gap-md); border-top:1px solid var(--line); }
.pctx__hard .label{ display:block; margin-bottom:var(--gap-sm); }
.pctx__hard p{ margin:0 0 var(--gap-sm); color:var(--ink-2); font-weight:300; }

.pcomp{ display:flex; flex-direction:column; gap:clamp(2.5rem,5vw,6rem); padding-inline:calc(var(--gut) + clamp(0rem,5vw,6rem)); max-width:1560px; margin-inline:auto; box-sizing:content-box; }
.pcomp__it{ margin:0; }
.pcomp__it img{ display:block; width:100%; height:auto; background:var(--paper-3); }
@media (max-width:759px){
  .pcomp{ gap:clamp(1.6rem,6vw,2.5rem); }
  .pcomp__row{ display:flex; flex-direction:column; gap:clamp(1.6rem,6vw,2.5rem); }
}
@media (min-width:760px){
  /* trois colonnes sur toute la largeur de l'écran */
  .pcomp__row{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(1rem,2.2vw,2.8rem); align-items:end;
  }
  .pcomp__row--lp .pcomp__it:nth-child(1){ grid-column:1 / span 2; }
  .pcomp__row--pl .pcomp__it:nth-child(2){ grid-column:2 / span 2; }
  .pcomp__row--ppp{ align-items:start; }
  .pcomp__row--ppp .pcomp__it:nth-child(2){ margin-top:clamp(2.5rem,6vw,7rem); }
  .pcomp__row--l .pcomp__it{ grid-column:1 / span 2; }
  .pcomp__row--lr .pcomp__it{ grid-column:2 / span 2; }
  .pcomp__row--p .pcomp__it{ grid-column:2; }
  .pcomp__row--ll{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .pcomp__row--ll .pcomp__it:nth-child(2){ margin-top:clamp(2.5rem,6vw,7rem); }
  /* deux verticales, au même format que les trios, centrées */
  .pcomp__row--pp{ grid-template-columns:repeat(6,minmax(0,1fr)); align-items:start; }
  .pcomp__row--pp .pcomp__it:nth-child(1){ grid-column:2 / span 2; }
  .pcomp__row--pp .pcomp__it:nth-child(2){ grid-column:4 / span 2; margin-top:clamp(2.5rem,6vw,7rem); }
}

/* =========================================================================
   MAJ 09/2026 · l'avis client, une seule voix en grand
   ========================================================================= */
.pavis{ position:relative; padding-block:var(--sec); background:var(--paper-2); color:var(--ink); }
.pavis .pnum{ top:calc(var(--sec) + 1.2rem); }
@media (min-width:1100px){ .pavis > .wrap{ padding-left:calc(var(--gut) + 3.4rem); } }
.pavis__grid{ display:grid; gap:var(--gap-lg); }
@media (min-width:900px){ .pavis__grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s6); align-items:start; } }
.pavis__q{ margin:0; }
.pavis__q blockquote{ margin:0; }
.pavis__q blockquote p{
  margin:0 0 var(--gap-sm); font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-3); line-height:1.16; letter-spacing:var(--track-d3); text-wrap:pretty; max-width:26ch;
}
.pavis__q blockquote p:first-child::before{ content:"«\00a0"; }
.pavis__q blockquote p:last-child::after{ content:"\00a0»"; }
.pavis--long .pavis__q blockquote p{ font-size:var(--t-3); line-height:1.3; max-width:40ch; }
.pavis__by{
  margin-top:var(--gap-lg); padding-top:var(--gap-sm); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.3rem; max-width:40rem;
}
.pavis__by b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); letter-spacing:-.018em; }
.pavis__by span{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}

/* =========================================================================
   MAJ 09/2026 · la section vidéo : texte à gauche, un ou deux films à droite
   Cadres verticaux aux angles adoucis, miniature plein cadre, bouton de
   lecture discret avec la durée. Deux films : le second descend d'un cran.
   ========================================================================= */
.pvid{ position:relative; padding-block:var(--sec); background:var(--paper); border-top:1px solid var(--line); }
.pvid .pnum{ top:calc(var(--sec) + 1.2rem); }
@media (min-width:1100px){ .pvid > .wrap{ padding-left:calc(var(--gut) + 3.4rem); } }
.pvid__grid{ display:grid; gap:clamp(2.5rem,6vw,4rem); }
@media (min-width:900px){
  .pvid__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s6); align-items:center; }
  .pvid--solo .pvid__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}
.pvid__txt .label{ display:block; color:var(--olive); }
.pvid__p{
  margin:var(--gap-lg) 0 0; font-family:var(--serif); font-weight:var(--w-air);
  font-size:var(--d-3); line-height:1.16; letter-spacing:var(--track-d3); text-wrap:pretty; max-width:20ch;
}
.pvid__p em{ font-style:normal; color:var(--olive); }

.pvid__films{ display:grid; gap:clamp(1rem,2.4vw,2rem); align-items:start; }
.pvid--duo .pvid__films{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pvid--duo .pvid__card:nth-child(2){ margin-top:clamp(2rem,6vw,5.5rem); }
.pvid--solo .pvid__films{ justify-items:center; }
.pvid--solo .pvid__card{ width:min(100%, 24rem); }
.pvid__card{ margin:0; }
.pvid__frame{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:var(--ar,9 / 16); border-radius:18px; background:var(--ink);
  box-shadow:0 34px 60px -38px rgba(35,40,30,.55), 0 2px 6px -2px rgba(35,40,30,.18);
}
@media (min-width:900px){ .pvid--duo .pvid__frame{ max-height:78svh; } }
.pvid__frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.001); transition:transform 1.1s var(--ease-io);
}
.pvid__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,rgba(30,35,24,0) 58%,rgba(30,35,24,.46) 100%);
  transition:opacity .5s var(--ease);
}
.pvid__card:hover .pvid__frame video{ transform:scale(1.035); }
.pvid__play{
  position:absolute; left:clamp(.8rem,1.6vw,1.2rem); bottom:clamp(.8rem,1.6vw,1.2rem); z-index:2;
  display:inline-flex; align-items:center; gap:.7rem; padding:.42rem 1rem .42rem .42rem;
  border:0; border-radius:999px; cursor:pointer;
  background:rgba(245,243,236,.9); color:var(--ink); backdrop-filter:blur(8px);
  transition:background .4s var(--ease), transform .4s var(--ease), opacity .35s var(--ease);
}
.pvid__play:hover{ background:var(--olive-lit); transform:translateY(-2px); }
.pvid__ico{
  display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--ink); color:var(--paper);
}
.pvid__ico svg{ width:38%; height:38%; margin-left:9%; }
.pvid__dur{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.12em; text-transform:uppercase;
}
.pvid__card.is-playing .pvid__play,.pvid__card.is-playing .pvid__frame::after{ opacity:0; pointer-events:none; }
.pvid__card.is-playing .pvid__frame video{ transform:none; }
.pvid__cap{
  display:flex; align-items:baseline; gap:.9rem;
  margin-top:clamp(.9rem,1.6vw,1.2rem); padding-top:.8rem; border-top:1px solid var(--line);
}
.pvid__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--olive); }
.pvid__t{ display:flex; flex-direction:column; gap:.2rem; }
.pvid__t b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-1); letter-spacing:-.012em; }
.pvid__t span{
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:599px){
  .pvid--duo .pvid__films{ gap:.8rem; }
  .pvid--duo .pvid__card:nth-child(2){ margin-top:2.5rem; }
  .pvid__play{ padding-right:.7rem; gap:.45rem; }
  .pvid__ico{ width:2rem; height:2rem; }
  .pvid__frame{ border-radius:14px; }
}
/* hero cadré pour photo paysage basse définition */
.phero--cadre .phero__grid{ align-items:end; }
@media (min-width:900px){ .phero--cadre .phero__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important; } }
.phero--cadre h1{ max-width:none; font-size:clamp(2.6rem,5vw,5rem); }
.phero--cadre .phero__shot{ height:auto !important; max-width:none !important; width:100%; aspect-ratio:3/2; }
.phero--cadre .phero__shot img{ width:100%; height:100%; object-fit:cover; }
.phero--cadre .phero__grid{ min-height:0 !important; height:auto !important; padding-top:clamp(7rem,15vh,9.5rem) !important; padding-bottom:clamp(3rem,7vh,5rem) !important; align-items:center; }
.phero--cadre .phero__shot{ border-radius:18px; overflow:hidden; }

/* Bossuet : triptyque très clair, voile renforcé pour la lisibilité */
.phero[data-p="bossuet"] .phero__veil{
  background:
    linear-gradient(180deg,rgba(30,35,24,.55) 0,rgba(30,35,24,0) 18%),
    linear-gradient(0deg,rgba(30,35,24,.92) 0,rgba(30,35,24,.55) 28%,rgba(30,35,24,.12) 52%,rgba(30,35,24,0) 70%);
}

/* Section « même typologie » avec 4 projets + la tuile : la tuile prend 2 colonnes */
@media (min-width:800px){ .psim__grid--n5 .scard--more{ grid-column:span 2; } .psim__grid--n5 .scard--more a{ min-height:14rem; } }

/* =========================================================================
   PAGES SERVICES · même charte que les pages projets
   ========================================================================= */
.phero__lead{ margin-top:var(--gap-md); max-width:40ch; color:rgba(233,227,211,.86); font-weight:300; font-size:var(--t-1); line-height:1.5; }
.phero__go{ margin-top:var(--gap-lg); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); }
.phero__tel{ color:var(--paper); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; border-bottom:1px solid rgba(233,227,211,.4); padding-bottom:.2rem; }
.phero__chips{ margin-top:var(--gap-lg); display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.phero__chips span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); padding:.5em .9em; border:1px solid rgba(233,227,211,.28); border-radius:999px; backdrop-filter:blur(6px); background:rgba(30,35,24,.18); }
.sv .phero h1{ max-width:14ch; }

.ssec{ position:relative; padding-block:var(--sec); }
.ssec .pnum{ top:calc(var(--sec) + 1.2rem); }
@media (min-width:1100px){ .ssec > .wrap{ padding-left:calc(var(--gut) + 3.4rem); } }
.ssec--tint{ background:var(--paper-2); }
.ssec--dark{ background:var(--ink); color:var(--paper); }
.shd{ display:grid; gap:var(--gap-md); margin-bottom:clamp(2.5rem,6vw,5rem); }
@media (min-width:900px){ .shd{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:var(--s6); } }
.shd h2{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); text-wrap:balance; max-width:16ch; }
.shd h2 em{ font-style:normal; color:var(--olive); }
.ssec--dark .shd h2 em{ color:var(--olive-lit); }
.shd p{ color:var(--ink-2); font-weight:300; max-width:44ch; }
.ssec--dark .shd p{ color:rgba(233,227,211,.72); }
.ssec--dark .label{ color:var(--olive-lit); }

/* prestations */
.spresta{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:700px){ .spresta{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .spresta{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.spresta__it{ background:var(--paper-2); padding:clamp(1.6rem,3vw,2.6rem); min-height:clamp(12rem,18vw,15rem); display:flex; flex-direction:column; gap:.9rem; transition:background .45s var(--ease); }
.spresta__it:hover{ background:var(--paper); }
.spresta__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--olive); }
.spresta__it h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.1; letter-spacing:-.02em; margin-top:auto; }
.spresta__it p{ color:var(--ink-2); font-weight:300; max-width:34ch; }

/* réalisations liées */
.sreal{ display:grid; gap:clamp(2rem,4vw,3.5rem) clamp(1rem,2.4vw,2.4rem); }
@media (min-width:640px){ .sreal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .sreal{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sreal .scard:nth-child(3n+2){ margin-top:0; }
@media (min-width:1100px){ .sreal .scard:nth-child(3n+2){ margin-top:clamp(2rem,5vw,4.5rem); } }
.sreal__more{ margin-top:clamp(2.5rem,5vw,4rem); display:flex; justify-content:flex-end; }
.sreal__more a{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); display:inline-flex; gap:.7em; align-items:center; }

/* méthode */
.smeth{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-dark); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
@media (min-width:900px){ .smeth{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.smeth li{ background:var(--ink); padding:clamp(1.4rem,2.4vw,2.2rem) clamp(1rem,1.6vw,1.6rem) clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:.8rem; }
.smeth__n{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3); line-height:1; color:var(--olive-lit); }
.smeth h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); letter-spacing:-.015em; color:var(--paper); }
.smeth p{ color:rgba(233,227,211,.7); font-weight:300; font-size:.95rem; line-height:1.55; }
.smeth__tag{ margin-top:auto; padding-top:.8rem; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--olive-lit); }

/* FAQ */
.sfaq{ border-top:1px solid var(--line); }
.sfaq details{ border-bottom:1px solid var(--line); }
.sfaq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3); align-items:baseline; padding:clamp(1.2rem,2.4vw,1.8rem) 0; }
.sfaq summary::-webkit-details-marker{ display:none; }
.sfaq__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--olive); }
.sfaq__q{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); letter-spacing:-.015em; }
.sfaq__x{ width:1.6rem; height:1.6rem; position:relative; }
.sfaq__x::before,.sfaq__x::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:1px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .4s var(--ease); }
.sfaq__x::after{ transform:translate(-50%,-50%) rotate(90deg); }
.sfaq details[open] .sfaq__x::after{ transform:translate(-50%,-50%) rotate(0deg); }
.sfaq details p{ padding:0 0 clamp(1.3rem,2.4vw,1.9rem) calc(var(--t-mono) * 3 + var(--s3)); color:var(--ink-2); font-weight:300; max-width:62ch; }

/* voir aussi */
.svoir{ margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:.6rem; }
.svoir a{ padding:.7em 1.1em; border:1px solid var(--line-dark); border-radius:999px; color:var(--paper); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; transition:background .35s var(--ease), color .35s var(--ease); }
.svoir a:hover{ background:var(--olive-lit); color:var(--ink); }
/* hero service : le texte est long, on assombrit la moitié gauche de la photo */
.sv .phero__veil{
  background:
    linear-gradient(90deg,rgba(30,35,24,.78) 0,rgba(30,35,24,.55) 38%,rgba(30,35,24,.08) 70%,rgba(30,35,24,0) 100%),
    linear-gradient(180deg,rgba(30,35,24,.5) 0,rgba(30,35,24,0) 18%),
    linear-gradient(0deg,rgba(30,35,24,.6) 0,rgba(30,35,24,0) 35%);
}
@media (max-width:759px){ .sv .phero__veil{ background:linear-gradient(0deg,rgba(30,35,24,.88) 0,rgba(30,35,24,.55) 55%,rgba(30,35,24,.25) 100%); } }


/* =========================================================================
   PAGES SERVICES · blocs éditoriaux (ouverture, concept, budget…)
   ========================================================================= */
.shd__side p{ color:var(--ink-2); font-weight:300; max-width:44ch; margin:0 0 .7rem; }
.shd__side p:first-child{ color:var(--ink); font-weight:400; }
.ssec--dark .shd__side p{ color:rgba(233,227,211,.72); }
.stags{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-top:var(--gap-lg); }
.stags span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:.6em 1em; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); background:rgba(255,255,255,.25); }
.ssec--dark .stags span,.stags--dark span{ border-color:var(--line-dark); color:var(--olive-lit); background:transparent; }

.sfeat__grid{ display:grid; gap:var(--gap-lg); }
@media (min-width:900px){ .sfeat__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s7); align-items:start; } }
.sfeat h2,.sduo h3{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); text-wrap:balance; max-width:15ch; }
.sduo h3{ font-size:var(--d-3); max-width:18ch; }
.sfeat h2 em,.sduo h3 em{ font-style:normal; color:var(--olive); }
.ssec--dark.sfeat h2 em{ color:var(--olive-lit); }
.sfeat__lead{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.3; letter-spacing:-.015em; max-width:32ch; margin:0 0 var(--gap-md); }
.sfeat--img .sfeat__lead,.sduo .sfeat__lead{ margin-top:var(--gap-lg); }
.sfeat__body p{ color:var(--ink-2); font-weight:300; max-width:52ch; margin:0 0 .8rem; }
.ssec--dark .sfeat__body p{ color:rgba(233,227,211,.74); }
.sfeat__cta{ margin-top:var(--gap-lg); display:inline-flex; align-items:center; gap:.7em; padding:.95em 1.5em; border-radius:999px;
  background:var(--ink); color:var(--paper); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; transition:background .35s var(--ease); }
.sfeat__cta:hover{ background:var(--olive); }
/* bloc avec photo : la photo occupe la colonne gauche, cadrée en portrait */
@media (min-width:900px){ .sfeat--img .sfeat__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:center; } }
.sfeat__fig{ margin:0; overflow:hidden; border-radius:18px; aspect-ratio:4 / 5; background:var(--paper-3);
  box-shadow:0 34px 60px -40px rgba(35,40,30,.5); }
.sfeat__fig img{ width:100%; height:100%; object-fit:cover; display:block; }

/* deux blocs côte à côte : votre concept / franchise */
.sduo{ background:var(--paper); }
.sduo__grid{ display:grid; gap:clamp(2rem,4vw,3rem); }
@media (min-width:900px){ .sduo__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2.4rem); } }
.sduo__it{ background:var(--paper-2); border-radius:22px; padding:clamp(1.8rem,3.6vw,3.2rem); display:flex; flex-direction:column; }
.sduo__it:nth-child(2){ background:var(--ink); color:var(--paper); }
.sduo__it:nth-child(2) .label{ color:var(--olive-lit); }
.sduo__it:nth-child(2) h3 em{ color:var(--olive-lit); }
.sduo__it:nth-child(2) .sfeat__body p{ color:rgba(233,227,211,.74); }
.sduo__it:nth-child(2) .stags span{ border-color:var(--line-dark); color:var(--olive-lit); background:transparent; }
.sduo__it .stags{ margin-top:auto; padding-top:var(--gap-lg); }

/* prestations sur 4 colonnes */
@media (min-width:1100px){ .spresta--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.spresta__x{ font-style:italic; color:var(--olive) !important; }

/* cartes réalisations enrichies */
.scard__extra{ display:block; margin-top:.8rem; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.scard__go{ display:inline-flex; align-items:center; gap:.6em; margin-top:1rem; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); }

/* vidéo témoignage */
.pvid--story h2{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); max-width:15ch; }
.pvid--story h2 em{ font-style:normal; color:var(--olive); }
.pvid__kick{ margin:var(--gap-lg) 0 var(--gap-sm); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.pvid__cta{ margin-top:var(--gap-lg); display:inline-flex; align-items:center; gap:.8rem; padding:.45rem 1.3rem .45rem .45rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--paper); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; transition:background .35s var(--ease); }
.pvid__cta .pvid__ico{ background:var(--olive-lit); color:var(--ink); }
.pvid__cta:hover{ background:var(--olive); }

/* méthode en 6 étapes : 3 × 2 */
@media (min-width:900px){ .smeth--6{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.smeth li p + p{ margin-top:-.2rem; }

/* avis avec titre */
.pavis__h{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3); line-height:1.08; letter-spacing:var(--track-d3); }
.pavis__h em{ font-style:normal; color:var(--olive); }

/* FAQ à plusieurs paragraphes */
.sfaq__a{ padding:0 0 clamp(1.3rem,2.4vw,1.9rem) calc(var(--t-mono) * 3 + var(--s3)); max-width:calc(62ch + 4rem); }
.sfaq__a p{ padding:0 !important; margin:0 0 .6rem; color:var(--ink-2); font-weight:300; }

/* appel final */
.scta h2{ margin-top:var(--gap-md); }
.scta__body p{ color:rgba(233,227,211,.74); font-weight:300; max-width:48ch; margin:var(--gap-sm) 0 0; }
.scta .stags{ margin-top:var(--gap-md); }
.scta__other{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); }
.scta__other .label{ color:rgba(233,227,211,.6); margin:0; }
.scta__other .svoir{ margin-top:0; }

/* prestations sur 3 colonnes, textes à plusieurs paragraphes */
.spresta--3 .spresta__it{ min-height:0; }
.spresta__it p + p{ margin-top:-.2rem; }
.spresta__it h3{ margin-top:clamp(1.4rem,3vw,2.4rem); }
/* image à droite */
@media (min-width:900px){ .sfeat--rev .sfeat__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }
/* réalisations sur 4 colonnes, avec une phrase */
@media (min-width:1100px){ .sreal--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sreal--4 .scard:nth-child(3n+2){ margin-top:0; } .sreal--4 .scard:nth-child(even){ margin-top:clamp(2rem,4vw,4rem); } }
.scard__desc{ display:block; margin-top:.8rem; color:var(--ink-2); font-weight:300; font-size:.95rem; line-height:1.55; }
/* avant / après */
.sba__list{ display:grid; gap:var(--s4); }
.sba__it{ margin:0; }
.sba__cmp{ position:relative; overflow:hidden; border-radius:18px; aspect-ratio:4 / 3; background:#1A1E15; }
.sba__cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.sba__cmp::after{ content:""; position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--paper); transform:translateX(-1px); pointer-events:none; }
.sba__cmp input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.sba__tag{ position:absolute; top:1rem; z-index:2; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:.45em .9em; border-radius:999px; background:rgba(245,243,236,.9); color:var(--ink); }
.sba__tag--a{ left:1rem; } .sba__tag--b{ right:1rem; }
.sba__it figcaption{ margin-top:.8rem; color:rgba(233,227,211,.7); font-weight:300; }
.sba__empty{ position:relative; aspect-ratio:4 / 3; border-radius:18px; border:1px dashed var(--line-dark);
  background:linear-gradient(90deg,rgba(233,227,211,.04) 0 50%,rgba(233,227,211,.08) 50% 100%); display:grid; place-items:center; }
.sba__empty::after{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line-dark); }
.sba__empty p{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(233,227,211,.55); }
/* trois avis */
.sav__grid{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
@media (min-width:900px){ .sav__grid{ grid-template-columns:1.4fr 1fr 1fr; align-items:stretch; } }
.sav__it{ margin:0; background:var(--paper); border-radius:20px; padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:var(--s4); }
.sav__it:first-child{ background:var(--ink); color:var(--paper); }
.sav__it blockquote{ margin:0; }
.sav__it blockquote p{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.05rem,1.25vw,1.2rem); line-height:1.5; letter-spacing:0; }
.sav__it:first-child blockquote p{ font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.45; }
.sav__it blockquote p::before{ content:"«\00a0"; } .sav__it blockquote p::after{ content:"\00a0»"; }
.sav__it figcaption{ margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.3rem; }
.sav__it:first-child figcaption{ border-color:var(--line-dark); }
.sav__it figcaption b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-1); }
.sav__it figcaption span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.sav__it:first-child figcaption span{ color:var(--olive-lit); }
.sav__g{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.sav__stars{ color:var(--wine); letter-spacing:.2em; }
.sav__g b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); }
.sav__g a{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); display:inline-flex; gap:.6em; }
.sba h2{ margin-top:var(--gap-md); margin-bottom:var(--gap-lg); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); max-width:15ch; }
.sba h2 em{ font-style:normal; color:var(--olive-lit); }
.pkey__v--txt{ font-size:var(--d-4) !important; line-height:1.1; }
.pkey__v--txt small{ display:block; margin-top:.35rem; }

/* =========================================================================
   PHOTOS VIVANTES · parallaxe, bandeaux plein cadre, galerie au scroll
   ========================================================================= */
.ssec--dark .sfeat__fig{ box-shadow:0 40px 70px -40px rgba(0,0,0,.6); }
@media (min-width:900px){
  .sfeat--img .sfeat__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1fr); align-items:center; }
  .sfeat--img.sfeat--rev .sfeat__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); }
  .sfeat--img .sfeat__fig{ aspect-ratio:4 / 5; max-height:86svh; }
}
.sfeat--img .sfeat__txt .label{ display:block; }

/* bandeau photo plein cadre entre deux sections */
.sband{ position:relative; background:var(--ink); }
.sband__fig{ position:relative; overflow:hidden; height:clamp(22rem,78svh,52rem); }
.sband__fig img{ position:absolute; inset:-10% 0; width:100%; height:120%; object-fit:cover; transform:scale(1.14); will-change:transform; }
.sband__fig::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,35,24,.55) 0,rgba(30,35,24,0) 40%); }
.sband__cap{ position:absolute; left:0; right:0; bottom:clamp(1.2rem,3vw,2.4rem); z-index:2; display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin:0; }
.sband__cap span,.sband__cap a{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--paper); }
.sband__cap a{ display:inline-flex; gap:.6em; padding:.6em 1.1em; border:1px solid rgba(233,227,211,.4); border-radius:999px; backdrop-filter:blur(6px); }
.sband__cap a:hover{ background:var(--paper); color:var(--ink); }

/* galerie horizontale : légende de chaque photo */
.swall .pwall__pan{ position:relative; }
.swall__cap{ position:absolute; left:.8rem; bottom:.8rem; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper); background:rgba(30,35,24,.45); backdrop-filter:blur(6px); padding:.4em .8em; border-radius:999px; }

/* =========================================================================
   CABINET MÉDICAL · sous-titre, logos, trio, listes, carrousels, interviews
   ========================================================================= */
.phero__sub{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.25; color:var(--paper); max-width:30ch; }
.phero__sub + .phero__lead{ margin-top:var(--gap-sm); }
.phero__lead + .phero__lead{ margin-top:.5rem; }

.slogos{ background:var(--paper); border-bottom:1px solid var(--line); padding-block:clamp(2rem,4vw,3.2rem); }
.slogos__in{ display:grid; gap:var(--s3); align-items:center; }
@media (min-width:900px){ .slogos__in{ grid-template-columns:auto 1fr; gap:var(--s6); } }
.slogos__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
@media (min-width:700px){ .slogos__row{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.slogos__it{ display:grid; place-items:center; height:3.6rem; border:1px dashed var(--line); border-radius:12px;
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); opacity:.6; }

.pctx__trio{ margin-top:var(--gap-lg); padding-top:var(--gap-md); border-top:1px solid var(--line); }
.pctx__trio p{ color:var(--ink-2); font-weight:300; margin:0 0 .8rem; }
.pctx__trio ol{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.4rem; }
.pctx__trio li{ display:flex; gap:1rem; align-items:baseline; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); letter-spacing:-.015em; color:var(--ink); }
.pctx__trio li span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--olive); }

.sp-dark .spresta{ background:var(--line-dark); border-color:var(--line-dark); }
.sp-dark .spresta__it{ background:var(--ink); }
.sp-dark .spresta__it:hover{ background:#2A3024; }
.sp-dark .spresta__it h3{ color:var(--paper); }
.sp-dark .spresta__it p{ color:rgba(233,227,211,.7); }
.sp-dark .spresta__n{ color:var(--olive-lit); }
.ssec:not(.ssec--tint):not(.ssec--dark) .spresta__it{ background:var(--paper); }
.ssec:not(.ssec--tint):not(.ssec--dark) .spresta__it:hover{ background:var(--paper-2); }
.spresta__dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--olive); }
.spresta__fig{ margin:var(--gap-md) 0 0; border-radius:18px; overflow:hidden; aspect-ratio:16 / 10; }
.spresta__fig img{ width:100%; height:100%; object-fit:cover; display:block; }

.slist{ list-style:none; margin:.4rem 0 1rem; padding:0; display:grid; gap:.1rem; }
@media (min-width:700px){ .slist{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s4); } }
.slist li{ position:relative; padding:.55rem 0 .55rem 1.4rem; border-bottom:1px solid var(--line); color:var(--ink-2); font-weight:300; }
.slist li::before{ content:""; position:absolute; left:0; top:1.05rem; width:.45rem; height:.45rem; border-radius:50%; background:var(--olive); }
.snote{ margin-top:var(--gap-md) !important; padding:1rem 1.2rem; border-radius:14px; background:var(--paper-2); color:var(--ink) !important; }

.strio{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
@media (min-width:900px){ .strio{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.strio__it{ border-radius:22px; padding:clamp(1.8rem,3vw,2.8rem); background:var(--paper-2); display:flex; flex-direction:column; gap:.8rem; }
.strio__it:nth-child(2){ background:var(--ink); color:var(--paper); }
.strio__it:nth-child(2) p{ color:rgba(233,227,211,.72) !important; }
.strio__it:nth-child(2) .strio__n{ color:var(--olive-lit); }
.strio__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--olive); }
.strio__it h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.15; letter-spacing:-.018em; margin:clamp(1rem,3vw,2.2rem) 0 .4rem; }
.strio__it p{ color:var(--ink-2); font-weight:300; margin:0; }

/* carrousels */
.scar__nav{ display:flex; align-items:center; gap:1rem; justify-content:flex-end; margin-top:calc(var(--gap-md) * -1); margin-bottom:var(--gap-md);
  font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; color:var(--ink-3); }
.scar__nav b{ color:var(--olive); font-weight:500; }
.scar__nav button{ width:3rem; height:3rem; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:1rem; transition:background .3s var(--ease),color .3s var(--ease); }
.scar__nav button:hover{ background:var(--ink); color:var(--paper); }
.scar__track{ display:flex; gap:clamp(1rem,2vw,1.8rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:calc(var(--gut) + 3.4rem);
  padding:0 var(--gut) 1rem calc(var(--gut) + 3.4rem); scrollbar-width:none; }
.scar__track::-webkit-scrollbar{ display:none; }
@media (max-width:1099px){ .scar__track{ padding-left:var(--gut); scroll-padding-left:var(--gut); } }
.scar__it{ flex:0 0 clamp(17rem,30vw,26rem); scroll-snap-align:start; }
.scar__it a{ display:block; }
.scar__fig{ display:block; border-radius:18px; overflow:hidden; aspect-ratio:4 / 5; background:var(--paper-3); }
.scar__fig img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-io); }
.scar__it a:hover .scar__fig img{ transform:scale(1.04); }
.scar__it .scard__bar{ margin-top:var(--gap-sm); }
.scar__hint{ margin-top:var(--gap-md); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; }

/* interviews */
.sint__it{ flex:0 0 clamp(16rem,24vw,21rem); scroll-snap-align:start; margin:0; }
.sint__cap{ margin-top:1rem; display:flex; flex-direction:column; gap:.35rem; }
.sint__k{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.sint__cap p{ color:var(--ink-2); font-weight:300; font-size:.95rem; line-height:1.5; margin:.2rem 0 .6rem; }
.sint__cap b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-1); }
.sint__cap span:not(.sint__k){ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.sint__empty{ display:grid; place-items:center; background:var(--paper-3) !important; box-shadow:none !important; border:1px dashed var(--line); }
.sint__empty span{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

.sav__grid--one{ grid-template-columns:1fr !important; max-width:56rem; }
/* haut de page des services : la hauteur suit le texte, jamais coupé sous le menu */
.sv .phero{ height:auto; min-height:100svh; display:flex; align-items:flex-end; }
.sv .phero__in{ position:relative; width:100%; padding-top:calc(82px + var(--s5)); }
/* en-tête de section avec photo : titre et texte alignés en haut */
.shd--top{ align-items:start !important; }
/* galerie au scroll en photos horizontales : même mécanique, cadres en 3:2 */
.swall--h .pwall__pan{ width:calc(var(--pan-h,60svh) * 1.5) !important; }
@media (max-width:899px){ .swall--h .pwall__pan{ width:86vw !important; height:calc(86vw / 1.5) !important; } }
@media (prefers-reduced-motion:reduce){
  .swall--h .pwall__track{ grid-template-columns:1fr !important; }
  .swall--h .pwall__pan{ width:auto !important; height:auto !important; aspect-ratio:3 / 2; }
}
/* --- cartes empilées au scroll (sections feature) --- */
.sstack{ position:relative; padding:clamp(2.5rem,6vw,5rem) var(--gut) clamp(1rem,3vw,2rem); background:var(--paper); }
@media (min-width:1100px){ .sstack{ padding-left:calc(var(--gut) + 3.4rem); } }
.sstack .sfeat--card{ position:sticky; top:96px; padding:clamp(1.2rem,2.6vw,2.4rem); margin:0 0 clamp(1.5rem,4vw,3rem);
  background:var(--paper-2); border-radius:26px; box-shadow:0 -30px 60px -45px rgba(35,40,30,.5); }
.sstack .sfeat--card + .sfeat--card{ background:#ece5d6; }
.sstack .sfeat--card > .wrap{ padding:0 !important; max-width:none; }
.sstack .sfeat--card .pnum{ display:none; }
.sstack .sfeat--card .sfeat__grid{ align-items:center; gap:clamp(1.5rem,4vw,4rem); }
.sstack .sfeat--card .sfeat__fig{ aspect-ratio:4/5; max-height:min(68svh,620px); width:auto; }
.sstack .sfeat--card h2{ font-size:clamp(2rem,3.4vw,3.2rem); margin-top:1rem; }
.sstack .sfeat--card .sfeat__lead{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.4; margin-top:1.2rem; margin-bottom:1rem; max-width:40ch; }
.sstack .sfeat--card .sfeat__body p,.sstack .sfeat--card .sfeat__body li{ font-size:.95rem; margin-bottom:.5rem; }
.sstack .sfeat--card .sfeat__cta{ margin-top:1.2rem; }
@media (max-width:899px){ .sstack .sfeat--card{ position:relative; top:auto !important; } }

/* ======== blocs scroll ======== */
.ssec h3{ font-weight:var(--w-air); }
/* story : photo collante qui change au fil des points */
.sstory__grid{ display:grid; gap:var(--s5); }
@media (min-width:900px){ .sstory__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(3rem,7vw,8rem); } }
.sstory__aside{ display:none; }
@media (min-width:900px){ .sstory__aside{ display:block; } }
.sstory__fig{ position:sticky; top:calc(82px + 2vh); height:calc(100svh - 82px - 6vh); margin:0; border-radius:22px; overflow:hidden; background:var(--paper-3); }
.sstory__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease), transform 1.6s var(--ease); }
.sstory__fig img.on{ opacity:1; transform:none; }
.sstory__fig figcaption{ position:absolute; left:1.2rem; bottom:1.2rem; display:flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px; background:rgba(35,40,30,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--paper); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; }
.sstory__caps{ position:relative; display:inline-grid; margin-left:.6rem; padding-left:.8rem; border-left:1px solid rgba(233,227,211,.35); }
.sstory__caps span{ grid-area:1/1; opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); white-space:nowrap; }
.sstory__caps span.on{ opacity:1; transform:none; }
.sstory__intro h2{ margin-block:var(--gap-md); }
.sstory__intro p{ color:var(--ink-2); font-weight:300; max-width:46ch; margin-top:.9rem; }
.sstory__intro .sstory__key{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.3; color:var(--ink); max-width:30ch; margin-top:var(--s4); }
.sstory__step{ position:relative; padding:var(--s4) 0 var(--s4) 1.6rem; border-left:1px solid var(--line); transition:opacity .6s var(--ease); }
.sstory__step::before{ content:""; position:absolute; left:-1px; top:0; width:2px; height:100%; background:var(--wine); transform:scaleY(0); transform-origin:top; transition:transform .8s var(--ease); }
.sstory__step h3{ font-family:var(--serif); font-size:var(--d-4); letter-spacing:-.02em; margin:.4rem 0 .8rem; }
.sstory__step p{ color:var(--ink-2); font-weight:300; max-width:40ch; }
.sstory__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; color:var(--olive); }
.sstory__mimg{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; margin-bottom:1.2rem; }
@media (min-width:900px){
  .sstory__col{ padding-bottom:20svh; }
  .sstory__step{ min-height:52svh; display:flex; flex-direction:column; justify-content:center; opacity:.28; }
  .sstory__step.on{ opacity:1; } .sstory__step.on::before{ transform:scaleY(1); }
  .sstory__mimg{ display:none; }
  .sstory__intro{ min-height:60svh; display:flex; flex-direction:column; justify-content:center; }
}
/* rows : grandes lignes typographiques */
.srows__list{ margin-top:var(--s5); }
.srow{ position:relative; display:grid; gap:.8rem 2rem; padding:clamp(1.8rem,3.5vw,3rem) 0; }
.srow::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink); opacity:.25; transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-io); }
.srow.is-in::before{ transform:scaleX(1); }
.srows__list .srow:last-child{ border-bottom:1px solid var(--line); }
@media (min-width:900px){ .srow{ grid-template-columns:4rem minmax(0,1.1fr) minmax(0,1.3fr) 12rem; align-items:start; } }
.srow__n{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4); color:var(--olive); line-height:1; transition:color .4s var(--ease); }
.srow h3{ font-family:var(--serif); font-size:var(--d-3); line-height:1.05; letter-spacing:-.02em; transition:transform .5s var(--ease); }
.srow__txt p{ color:var(--ink-2); font-weight:300; max-width:44ch; } .srow__txt p+p{ margin-top:.8rem; }
.srow__tag{ justify-self:start; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); padding:.45em .9em; border:1px solid currentColor; border-radius:999px; }
@media (min-width:900px){ .srow__tag{ justify-self:end; } }
.srow img{ position:absolute; right:16rem; top:50%; width:13rem; aspect-ratio:4/5; object-fit:cover; border-radius:14px; opacity:0; transform:translateY(-50%) rotate(-3deg) scale(.9); pointer-events:none; transition:opacity .4s var(--ease), transform .6s var(--ease); box-shadow:0 40px 60px -40px rgba(0,0,0,.55); z-index:2; }
@media (hover:hover) and (min-width:1100px){ .srow:hover img{ opacity:1; transform:translateY(-50%) rotate(-3deg) scale(1); } .srow:hover .srow__n{ color:var(--wine); } .srow:hover h3{ transform:translateX(.6rem); } }
@media (max-width:1099px){ .srow img{ display:none; } }
/* tech : la photo s'ouvre au scroll */
.stech__fig{ position:relative; margin:var(--s5) 0 0; height:clamp(22rem,78svh,52rem); overflow:hidden; clip-path:inset(calc(var(--g,1) * 10%) calc(var(--g,1) * 16%) round calc(var(--g,1) * 28px + 0px)); }
.stech__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(calc(1 + var(--g,1) * .18)); }
.stech__fig figcaption{ position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--paper); background:rgba(35,40,30,.55); padding:.5rem 1rem; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:calc(1 - var(--g,1) * 2); white-space:nowrap; }
.stech__grid{ display:grid; gap:var(--s4); margin-top:var(--s6); }
@media (min-width:700px){ .stech__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .stech__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stech__it{ position:relative; padding-top:1.4rem; }
.stech__it::before{ content:""; position:absolute; left:0; top:0; height:1px; width:100%; background:var(--olive-lit); opacity:.5; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-io) var(--rv-d,0s); }
.stech__it.is-in::before{ transform:scaleX(1); }
.stech__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:var(--olive-lit); }
.stech__it h3{ font-family:var(--serif); font-size:var(--t-3); color:var(--paper); margin:.6rem 0; }
.stech__it p{ color:rgba(233,227,211,.72); font-weight:300; }
.stech__note{ margin:var(--s6) auto 0; max-width:34ch; text-align:center; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4); line-height:1.2; color:var(--paper); }
/* réalisations : à la une + liste */
.ra-feat{ display:grid; gap:var(--s4); align-items:center; margin-top:var(--s5); }
@media (min-width:900px){ .ra-feat{ grid-template-columns:1.5fr 1fr; gap:var(--s6); } }
.ra-feat__fig{ display:block; border-radius:20px; overflow:hidden; aspect-ratio:3 / 2; }
.ra-feat__fig img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.14); }
.ra-feat__txt{ display:flex; flex-direction:column; gap:1rem; }
.ra-feat__k{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.ssec--dark .ra-feat__k{ color:var(--olive-lit); }
.ra-feat__name{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1; letter-spacing:var(--track-d2); }
.ra-feat__p{ color:var(--ink-2); font-weight:300; max-width:36ch; }
.ra-feat__stats{ display:flex; gap:var(--s4); padding-block:1rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ra-feat__stats span{ display:flex; flex-direction:column; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ra-feat__stats b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3); color:var(--ink); letter-spacing:-.02em; text-transform:none; }
.ra-list{ margin-top:var(--s6); border-top:1px solid var(--line); }
.ra-row{ position:relative; display:grid; grid-template-columns:3rem 1.2fr 1.4fr 1fr 4rem 2rem; align-items:center; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); transition:padding .4s var(--ease); }
.ra-row:hover{ padding-left:1rem; }
.ra-row__n,.ra-row__y,.ra-row__m,.ra-row__t{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.ra-row__t{ color:var(--olive); }
.ra-row__name{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4); letter-spacing:-.02em; }
.ra-row__go{ font-size:1.2rem; color:var(--wine); }
.ra-row img{ position:absolute; right:12%; top:50%; width:11rem; aspect-ratio:4/5; object-fit:cover; border-radius:12px; transform:translateY(-50%) scale(.9); opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .5s var(--ease); z-index:2; box-shadow:0 30px 50px -30px rgba(0,0,0,.5); }
.ra-row:hover img{ opacity:1; transform:translateY(-50%) scale(1); }
@media (max-width:899px){ .ra-row{ grid-template-columns:2.4rem 1fr auto; } .ra-row__t,.ra-row__m,.ra-row img{ display:none; } }
/* interviews : vidéo vedette + playlist (fond sombre) */
.ia-grid{ display:grid; gap:var(--s5); margin-top:var(--s5); }
@media (min-width:900px){ .ia-grid{ grid-template-columns:minmax(0,.75fr) minmax(0,1fr); align-items:start; gap:var(--s6); } }
.ia-stage{ margin:0; } .ia-stage .pvid__frame{ max-height:80svh; aspect-ratio:9/16; margin-inline:auto; }
.ia-info{ display:flex; flex-direction:column; gap:1rem; min-height:14rem; animation:iain .6s var(--ease); }
@keyframes iain{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ia-desc{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.3; max-width:32ch; color:var(--paper); }
.ia-q{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.ia-q li{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); color:var(--paper); padding-left:1.4rem; position:relative; }
.ia-q li::before{ content:"—"; position:absolute; left:0; color:var(--olive-lit); }
.ia-who{ display:flex; flex-direction:column; gap:.2rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line-dark); }
.ia-who b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); color:var(--paper); }
.ia-who span{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(233,227,211,.55); }
.ia-list{ display:grid; gap:.6rem; margin-top:1.2rem; }
@media (min-width:600px){ .ia-list{ grid-template-columns:1fr 1fr; } }
.ia-it{ display:grid; grid-template-columns:3.6rem 1fr; gap:.9rem; align-items:center; padding:.6rem; border-radius:14px; border:1px solid var(--line-dark); background:transparent; text-align:left; cursor:pointer; color:var(--paper); transition:background .3s var(--ease), border-color .3s var(--ease); }
.ia-it img,.ia-it i{ width:3.6rem; aspect-ratio:9/16; object-fit:cover; border-radius:8px; }
.ia-it i{ display:grid; place-items:center; font-style:normal; font-family:var(--mono); font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(233,227,211,.08); color:rgba(233,227,211,.6); }
.ia-it span{ display:flex; flex-direction:column; gap:.15rem; }
.ia-it b{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--olive-lit); }
.ia-it em{ font-style:normal; font-family:var(--serif); font-size:var(--t-1); color:var(--paper); }
.ia-it small{ font-family:var(--mono); font-size:var(--t-mono); color:rgba(233,227,211,.5); }
.ia-it.on{ background:rgba(233,227,211,.1); border-color:var(--olive-lit); } button.ia-it:hover{ background:rgba(233,227,211,.06); }
.ia-it--soon{ cursor:default; opacity:.6; }
/* citation : les mots s'allument au scroll */
.squote__in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3,1.2rem); }
.squote__stars{ color:var(--wine); letter-spacing:.3em; font-size:1.1rem; margin-top:var(--s3,1rem); }
.squote blockquote{ margin:0; max-width:24ch; }
.squote blockquote p{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3); line-height:1.15; letter-spacing:-.02em; }
.squote blockquote span{ opacity:.16; transition:opacity .35s var(--ease); }
.squote blockquote span.on{ opacity:1; }
.squote__by{ display:flex; flex-direction:column; gap:.25rem; } .squote__by b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); }
.squote__by span,.squote__g span{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.squote__g{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem; align-items:center; padding-top:1.2rem; border-top:1px solid var(--line); }
.squote__g a{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--wine); }
/* timeline : la ligne se remplit au scroll */
.stl__grid{ display:grid; gap:var(--s5); }
@media (min-width:900px){ .stl__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(3rem,7vw,8rem); } .stl__head{ position:sticky; top:calc(82px + 6vh); align-self:start; } }
.stl__head h2{ margin-top:var(--gap-md); }
.stl__note{ margin-top:var(--s5); padding:1.6rem; border-radius:18px; background:var(--paper); max-width:30rem; }
.stl__note h3{ font-family:var(--serif); font-size:var(--t-3); margin-bottom:.6rem; }
.stl__note p{ color:var(--ink-2); font-weight:300; } .stl__note p+p{ margin-top:.6rem; }
.stl__list{ position:relative; list-style:none; margin:0; padding:0 0 0 2.6rem; }
.stl__list::before,.stl__list::after{ content:""; position:absolute; left:.55rem; top:.6rem; bottom:.6rem; width:1px; background:var(--line); }
.stl__list::after{ background:var(--wine); width:2px; left:calc(.55rem - .5px); transform:scaleY(var(--p,0)); transform-origin:top; }
.stl__it{ position:relative; padding-bottom:clamp(2.4rem,7svh,4.5rem); }
.stl__it:last-child{ padding-bottom:0; }
.stl__dot{ position:absolute; left:-2.6rem; top:.35rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--paper-2); border:1px solid var(--ink-3); z-index:1; transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.stl__it.on .stl__dot{ background:var(--wine); border-color:var(--wine); transform:scale(1.15); }
.stl__n{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; color:var(--olive); }
.stl__it h3{ font-family:var(--serif); font-size:var(--d-4); letter-spacing:-.02em; margin:.3rem 0 .7rem; transition:color .4s var(--ease); }
.stl__it p{ color:var(--ink-2); font-weight:300; max-width:42ch; } .stl__it p+p{ margin-top:.6rem; }
.stl__it .smeth__tag{ display:inline-block; margin-top:1rem; }
.stl__it{ opacity:.4; transition:opacity .5s var(--ease); } .stl__it.on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .stl__it,.sstory__step{ opacity:1 !important; } .squote blockquote span{ opacity:1; } .stech__fig{ clip-path:none; } .stech__fig img{ transform:none; } }

/* interviews : carrousel éditorial, vidéo nette devant, les autres floues derrière */
.icf__grid{ display:grid; gap:var(--s5); align-items:center; }
@media (min-width:900px){ .icf__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,6rem); } }
.icf h2{ margin-top:var(--gap-md); }
.icf__intro p{ margin-top:1rem; color:rgba(233,227,211,.7); font-weight:300; max-width:44ch; }
.icf__txts{ display:grid; margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-dark); }
.icf__txt{ grid-area:1/1; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .6s var(--ease), transform .8s var(--ease); }
.icf__txt.on{ opacity:1; transform:none; pointer-events:auto; transition-delay:.15s; }
.icf__k{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--olive-lit); }
.icf__txt h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-3); line-height:1.02; letter-spacing:-.02em; color:var(--paper); margin:.5rem 0 1rem; }
.icf__p{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.32; color:rgba(233,227,211,.88); max-width:34ch; }
.icf .ia-q{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.icf .ia-q li{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); color:rgba(233,227,211,.88); padding-left:1.4rem; position:relative; }
.icf .ia-q li::before{ content:"—"; position:absolute; left:0; color:var(--olive-lit); }
.icf__who{ display:flex; flex-direction:column; gap:.2rem; margin-top:1.4rem; }
.icf__who b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); color:var(--paper); }
.icf__who span{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(233,227,211,.5); }
.icf__nav{ display:flex; align-items:center; gap:1.2rem; margin-top:var(--s5); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:rgba(233,227,211,.6); }
.icf__nav b{ color:var(--paper); font-weight:500; }
.icf__nav button{ width:3.4rem; height:3.4rem; border-radius:50%; border:1px solid rgba(233,227,211,.35); background:transparent; color:var(--paper); font-size:1.1rem; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.icf__nav button:hover{ background:var(--paper); color:var(--ink); transform:scale(1.05); }
.icf__stage{ position:relative; height:clamp(30rem,80svh,48rem); perspective:1600px; }
.icf__card{ position:absolute; top:0; left:50%; height:100%; aspect-ratio:9/16; margin:0 0 0 calc(-0.5 * 100% * 9 / 16); width:auto;
  transform:translateX(calc(var(--d,0) * 46%)) scale(calc(1 - var(--a,0) * .17)) rotateY(calc(var(--d,0) * -14deg));
  filter:blur(calc(var(--a,0) * 5px)) brightness(calc(1 - var(--a,0) * .4)); opacity:var(--o,1); z-index:calc(10 - var(--a,0));
  transition:transform 1s var(--ease-io), filter 1s var(--ease-io), opacity .8s var(--ease); cursor:pointer; }
.icf__card{ margin-left:0; translate:-50% 0; }
.icf__card .pvid__frame{ height:100%; width:100%; aspect-ratio:auto; border-radius:20px; overflow:hidden; box-shadow:0 50px 80px -50px rgba(0,0,0,.8); }
.icf__card video{ width:100%; height:100%; object-fit:cover; }
.icf__card:not(.on) .pvid__play{ opacity:0; pointer-events:none; }
.icf__card:not(.on) .pvid__frame *{ pointer-events:none; }
.icf__card figcaption{ position:absolute; left:0; right:0; bottom:-2.2rem; text-align:center; font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(233,227,211,.6); opacity:0; transition:opacity .5s var(--ease); }
.icf__card.on figcaption{ opacity:1; }
.icf__soon{ display:grid; place-items:center; background:linear-gradient(160deg,#3a4030,#23281e); }
.icf__soon span{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(233,227,211,.6); }
@media (max-width:899px){ .icf__stage{ height:68svh; margin-bottom:2.4rem; } .icf__card{ transform:translateX(calc(var(--d,0) * 34%)) scale(calc(1 - var(--a,0) * .18)) rotateY(calc(var(--d,0) * -12deg)); } }

/* retouches */
.sstory h2,.icf h2,.stl h2{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); max-width:16ch; }
.sstory h2 em,.stl h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive); }
.icf h2{ color:var(--paper); } .icf h2 em{ font-style:normal; font-weight:var(--w-air); color:var(--olive-lit); }
.squote blockquote{ max-width:none; } .squote blockquote p{ max-width:26ch; margin-inline:auto; }
.stl__it .smeth__tag{ color:var(--wine); border-color:currentColor; }
.stech__it h3{ line-height:1.15; }
.srow__tag{ white-space:nowrap; }
.icf .ia-q li{ font-size:var(--t-1); line-height:1.35; }
.icf__txt h3{ font-size:var(--d-4); }
.icf__card{ transform:translateX(calc(var(--d,0) * 58%)) scale(calc(1 - var(--a,0) * .2)) rotateY(calc(var(--d,0) * -16deg)); filter:blur(calc(var(--a,0) * 6px)) brightness(calc(1 - var(--a,0) * .35)); }
@media (max-width:899px){ .icf__card{ transform:translateX(calc(var(--d,0) * 40%)) scale(calc(1 - var(--a,0) * .2)) rotateY(calc(var(--d,0) * -12deg)); } }

.icf__left{ position:relative; z-index:20; }

/* manifeste */
.smanif{ background:var(--ink); color:var(--paper); padding:clamp(6rem,14vw,11rem) 0; }
.smanif__t{ margin-top:var(--s4); font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2.4rem,6.4vw,6.4rem); line-height:1.02; letter-spacing:-.035em; max-width:16ch; }
.smanif__t span{ opacity:.14; transition:opacity .45s var(--ease); } .smanif__t span.on{ opacity:1; }
.smanif__s{ margin-top:var(--s5); max-width:46ch; color:rgba(233,227,211,.72); font-weight:300; }
/* appartement / maison */
.ssplit__head h2{ margin-top:var(--gap-md); max-width:18ch; }
.ssplit__grid{ display:grid; gap:clamp(1rem,2.4vw,2rem); margin-top:var(--s5); }
@media (min-width:800px){ .ssplit__grid{ grid-template-columns:1fr 1fr; } .ssplit__it:nth-child(2){ margin-top:clamp(3rem,8vw,7rem); } }
.ssplit__it{ display:flex; flex-direction:column; gap:1rem; color:inherit; }
.ssplit__fig{ display:block; aspect-ratio:4/5; border-radius:22px; overflow:hidden; }
.ssplit__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.ssplit__it:hover .ssplit__fig img{ transform:scale(1.04); }
.ssplit__k{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2.6rem,5.6vw,5rem); letter-spacing:-.03em; line-height:1; text-transform:uppercase; margin-top:.6rem; }
.ssplit__it ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem .5rem; }
.ssplit__it li{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:.4em .8em; border:1px solid var(--line); border-radius:999px; }
.ssplit__go{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); }
/* projets en grand */
.ssc .shd{ margin-bottom:var(--s5); }
.ssc__row{ display:grid; gap:var(--s4); align-items:end; color:inherit; margin-top:clamp(3rem,7vw,6rem); }
.ssc__fig{ display:block; border-radius:22px; overflow:hidden; }
.ssc__fig img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.12); }
.ssc__info{ display:flex; flex-direction:column; gap:.35rem; padding-bottom:1rem; }
.ssc__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:var(--olive); }
.ssc__info b{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2.2rem,4.4vw,4rem); line-height:1; letter-spacing:-.03em; text-transform:uppercase; }
.ssc__lieu,.ssc__typ,.ssc__what{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.ssc__lieu{ color:var(--olive); margin-bottom:.8rem; }
.ssc__m2{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2.6rem,5vw,4.4rem); letter-spacing:-.03em; line-height:1.05; }
.ssc__go{ margin-top:1rem; font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--wine); }
.ssc__fig{ aspect-ratio:3/2; }
@media (min-width:900px){
  .ssc__row--l{ grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); }
  .ssc__row--r{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } .ssc__row--r .ssc__fig{ order:2; aspect-ratio:4/5; max-width:34rem; justify-self:end; width:100%; } .ssc__row--r .ssc__info{ align-self:center; }
  .ssc__row--w{ grid-template-columns:1fr; } .ssc__row--w .ssc__fig{ aspect-ratio:21/9; } .ssc__row--w .ssc__info{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.6rem 2rem; }
  .ssc__row--w .ssc__info b{ margin-right:1rem; }
}
@media (prefers-reduced-motion:reduce){ .smanif__t span{ opacity:1; } }

.sflow__grid{ display:grid; gap:var(--s5); margin-top:var(--s5); }
@media (min-width:860px){ .sflow__grid{ grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); } }
.sflow__col h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2.2rem,4vw,3.4rem); text-transform:uppercase; letter-spacing:-.02em; margin-bottom:var(--s3,1.2rem); }
.sflow__st{ padding:1.2rem 0; border-top:1px solid var(--line); }
.sflow__lab{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--olive); }
.sflow__st ul{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.3rem; }
.sflow__st li{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); color:var(--ink); }
.sflow__st--end li{ color:var(--wine); }
.sflow__arr{ display:block; font-size:1.4rem; color:var(--wine); padding:.2rem 0 .4rem; }
.ssc__desc{ font-family:var(--sans,inherit); text-transform:none; letter-spacing:0; font-size:1rem; color:var(--ink-2); font-weight:300; max-width:40ch; margin-top:.6rem; line-height:1.55; }

.ssplit__head h2{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); }
.ssplit__head h2 em{ font-style:normal; color:var(--olive); }

/* projets : cartes paysage qui s'empilent au scroll */
.ssc__stack{ position:relative; }
.ssc__row{ background:var(--paper); border-radius:26px; padding:clamp(1rem,2vw,1.6rem); margin-top:clamp(1.5rem,4vw,3rem); box-shadow:0 -30px 60px -50px rgba(35,40,30,.45); }
.ssc__row .ssc__fig{ aspect-ratio:3/2 !important; max-width:none !important; width:100%; }
@media (min-width:900px){
  .ssc__row{ position:sticky; top:calc(96px + var(--i,0) * 1.4rem); grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) !important; align-items:center; }
  .ssc__row--r{ grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) !important; }
  .ssc__row--r .ssc__fig{ order:2; justify-self:stretch; }
  .ssc__row--r .ssc__info{ padding-left:clamp(.5rem,2vw,2rem); }
  .ssc__info{ min-width:0; } .ssc__info b{ font-size:clamp(2rem,3.4vw,3.4rem); overflow-wrap:break-word; }
  .ssc__row--l .ssc__info{ padding-right:clamp(.5rem,2vw,2rem); }
  .ssc__row .ssc__info{ flex-direction:column !important; align-items:flex-start !important; gap:.35rem !important; }
  .ssc__row .ssc__fig{ max-height:calc(100svh - 160px); }
  .ssc .wrap{ padding-bottom:12svh; }
}

/* avant / travaux / après, version sombre à onglets */
.sfl{ background:var(--ink); color:var(--paper); padding:clamp(5rem,11vw,9rem) 0; }
.sfl__head{ display:grid; gap:var(--s4); align-items:end; margin-bottom:var(--s5); }
@media (min-width:900px){ .sfl__head{ grid-template-columns:1fr 1fr; } }
.sfl h2{ margin-top:var(--gap-md); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d2); color:var(--paper); }
.sfl h2 em{ font-style:normal; color:var(--olive-lit); }
.sfl__side p{ color:rgba(233,227,211,.7); font-weight:300; max-width:44ch; }
.sfl__tabs{ display:inline-flex; gap:.3rem; margin-top:1.4rem; padding:.3rem; border:1px solid rgba(233,227,211,.25); border-radius:999px; }
.sfl__tab{ border:0; background:transparent; color:var(--paper); font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; padding:.8rem 1.4rem; border-radius:999px; cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease); }
.sfl__tab.on{ background:var(--paper); color:var(--ink); }
.sfl__pane{ display:none; } .sfl__pane.on{ display:block; animation:sflIn .7s var(--ease); }
@keyframes sflIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.sfl__fig{ margin:0 0 var(--s4); aspect-ratio:21/8; border-radius:22px; overflow:hidden; }
.sfl__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.sfl__steps{ display:grid; gap:1rem; }
@media (min-width:900px){ .sfl__steps{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; } }
.sfl__st{ padding:1.6rem; border-radius:20px; border:1px solid rgba(233,227,211,.16); display:flex; flex-direction:column; gap:.4rem; }
.sfl__st--2{ background:var(--olive-lit); color:var(--ink); border-color:transparent; }
.sfl__n{ font-family:var(--serif); font-weight:var(--w-air); font-size:2.4rem; line-height:1; color:var(--olive-lit); }
.sfl__st--2 .sfl__n{ color:var(--wine); }
.sfl__lab{ font-family:var(--mono); font-weight:500; font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(233,227,211,.6); margin-bottom:.6rem; }
.sfl__st--2 .sfl__lab{ color:var(--ink-3); }
.sfl__st ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.sfl__st li{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-2); line-height:1.25; }
.sfl__arr{ align-self:center; justify-self:center; font-size:1.6rem; color:var(--olive-lit); }
@media (max-width:899px){ .sfl__arr{ transform:rotate(90deg); } .sfl__fig{ aspect-ratio:4/3; } }

/* typologies */
.styp__grid{ display:grid; gap:clamp(2rem,4vw,3.5rem); margin-top:var(--s5); }
@media (min-width:900px){ .styp__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .styp__it:nth-child(2){ margin-top:clamp(3rem,7vw,7rem); } }
.styp__fig{ position:relative; margin:0; aspect-ratio:3/4; border-radius:20px; overflow:hidden; background:var(--paper-3); }
.styp__fig img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 1.4s var(--ease); }
.styp__it:hover .styp__fig img{ transform:scale(1.09); }
.styp__fig::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,24,18,0) 45%,rgba(20,24,18,.62)); }
.styp__k{ position:absolute; z-index:1; left:clamp(1rem,2vw,1.6rem); bottom:clamp(.8rem,1.6vw,1.3rem); font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.7rem,2.7vw,2.9rem); line-height:1; letter-spacing:-.025em; text-transform:uppercase; color:var(--paper); }
.styp__s{ margin:1.3rem 0 .4rem; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); line-height:1.25; color:var(--olive); }
.styp__p{ color:var(--ink-2); font-weight:300; margin:0 0 .8rem; max-width:40ch; }
.styp__l{ list-style:none; padding:0; margin:0 0 1.2rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.styp__l li{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.08em; text-transform:uppercase; padding:.45em .8em; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); }
.styp__go{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--wine,#6b2a32); }
/* mots-clés */
.swd__list{ margin-top:var(--s5); border-top:1px solid var(--line); }
.swd__row{ display:grid; grid-template-columns:3rem minmax(0,1fr); gap:.4rem 1.2rem; padding:clamp(1.1rem,2.2vw,1.8rem) 0; border-bottom:1px solid var(--line); align-items:baseline; }
.swd__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:var(--olive); }
.swd__w{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(2rem,5.4vw,5.2rem); line-height:1; letter-spacing:-.035em; }
.swd__row p{ grid-column:2; margin:0; color:var(--ink-2); font-weight:300; max-width:44ch; }
@media (min-width:900px){ .swd__row{ grid-template-columns:4rem minmax(0,1.3fr) minmax(0,1fr); } .swd__row p{ grid-column:auto; } }
.swd__row:hover .swd__w{ color:var(--olive); transition:color .4s; }
.swd__key{ margin-top:var(--s5); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); max-width:34ch; }
/* parcours en grande typo */
.sstory--big .sstory__step h3{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(3rem,7.2vw,7rem); line-height:.95; letter-spacing:-.04em; text-transform:uppercase; margin:.4rem 0 .8rem; }
.sstory--big .sstory__step .sstory__sub{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--t-3); color:var(--olive); margin:0 0 .6rem; }
.sstory--big .sstory__step p{ max-width:42ch; }

/* parcours sans photo */
.sstory--noimg .sstory__aside{ display:block; }
.sstory--noimg .sstory__pin{ position:sticky; top:calc(96px + 6vh); }
@media (min-width:900px){ .sstory--noimg .sstory__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
@media (max-width:899px){ .sstory--noimg .sstory__pin{ position:static; } }
.sstory--noimg .sstory__count{ margin-top:var(--s5); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:var(--ink-3); }
.sstory--noimg .sstory__count b{ color:var(--olive); font-weight:500; }
.sstory--noimg .sstory__step{ min-height:46svh; }
.sstory--noimg .sstory__step h3{ font-size:clamp(3.2rem,8vw,8rem); }


/* ---- optimisations petits écrans ---- */
@media (max-width:420px){
  .nav__right{ gap:.45rem !important; }
  .nav .btn{ padding:.62em .8em !important; letter-spacing:.05em !important; font-size:.6rem !important; }
  .nav__logo{ font-size:1.12rem; }
}
@media (max-width:640px){
  .pact__in,.pact__in > *,.pact__go{ min-width:0; }
  .pact__go .btn,.bl-cta .btn,.scta .btn,.phero .btn,.hero__cta .btn{ white-space:normal; text-align:left; line-height:1.35; }
  .pact h2,.bl-cta__t{ overflow-wrap:break-word; }
  a,button,summary,label{ touch-action:manipulation; }
}

/* ============================ BLOG ============================ */
.bl{ background:var(--paper); }
.bl-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:300; pointer-events:none; }
.bl-progress i{ display:block; height:100%; width:100%; background:var(--wine); transform-origin:0 50%; transform:scaleX(var(--p,0)); }
.bl-hero{ padding-top:clamp(7.5rem,13vw,11rem); }
.bl-crumb{ display:flex; flex-wrap:wrap; gap:.55em; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:clamp(1.6rem,3vw,2.6rem); }
.bl-crumb a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.bl-crumb a:hover{ border-color:currentColor; }
.bl-crumb [aria-current]{ color:var(--ink); }
.bl-hero h1{ margin:var(--s3) 0 0; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-1); line-height:1.02; letter-spacing:var(--track-d1); max-width:20ch; text-wrap:balance; }
.bl-hero h1 em{ font-style:normal; color:var(--olive); }
.bl-hero__lead{ margin:var(--s4) 0 0; max-width:62ch; font-size:var(--t-1); line-height:1.55; font-weight:300; color:var(--ink-2); }
.bl-hero__meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:var(--s4) 0 0; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.bl-hero__meta span+span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--olive); margin-right:1.6rem; vertical-align:middle; transform:translateY(-1px); }
.bl-hero__fig{ margin:clamp(2.4rem,5vw,4.5rem) 0 0; }
.bl-hero__fig img{ display:block; width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; border-radius:4px; }
.bl-hero__fig figcaption,.bl-fig figcaption,.bl-schema figcaption{ margin-top:.8rem; font-size:var(--t-xs); letter-spacing:.06em; color:var(--ink-3); line-height:1.5; }
.bl-hero--index{ padding-bottom:var(--s5); }
.bl-hero--index h1{ max-width:16ch; }

/* corps */
.bl-body{ display:grid; gap:var(--s5); padding-top:var(--s6); padding-bottom:var(--s6); }
@media (min-width:1000px){ .bl-body{ grid-template-columns:minmax(200px,.32fr) minmax(0,1fr); gap:var(--s7); } }
.bl-toc details{ border-top:1px solid var(--ink); padding-top:1rem; }
.bl-toc summary{ list-style:none; cursor:pointer; font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink); display:flex; justify-content:space-between; }
.bl-toc summary::-webkit-details-marker{ display:none; }
.bl-toc summary::after{ content:"+"; font-weight:300; }
.bl-toc details[open] summary::after{ content:"–"; }
.bl-toc ol{ list-style:none; margin:1rem 0 0; padding:0; counter-reset:t; }
.bl-toc li{ counter-increment:t; }
.bl-toc a{ display:grid; grid-template-columns:2.1em 1fr; padding:.42rem 0; font-size:var(--t-sm); line-height:1.35; color:var(--ink-3); text-decoration:none; transition:color .3s; }
.bl-toc a::before{ content:counter(t,decimal-leading-zero); font-size:var(--t-xs); letter-spacing:.08em; padding-top:.15em; }
.bl-toc a:hover,.bl-toc a.is-on{ color:var(--ink); }
.bl-toc a.is-on::before{ color:var(--wine); }
@media (min-width:1000px){ .bl-toc{ position:sticky; top:6.5rem; align-self:start; max-height:calc(100vh - 8rem); overflow:auto; scrollbar-width:none; } .bl-toc summary{ pointer-events:none; } .bl-toc summary::after{ content:none; } }

.bl-art{ max-width:46rem; min-width:0; }
.bl-art > p,.bl-sec > p,.bl-sec li,.bl-split__c p{ font-size:var(--t-0); line-height:1.75; font-weight:300; color:var(--ink-2); }
.bl-art p{ margin:0 0 1.15em; }
.bl-art strong{ font-weight:500; color:var(--ink); }
.bl-art a:not(.btn):not(.bl-proj__go):not(.bl-proj__img):not(.bl-cta__alt){ color:var(--ink); text-decoration:none; background:linear-gradient(var(--wine),var(--wine)) 0 100%/100% 1px no-repeat; transition:color .3s; }
.bl-art a:not(.btn):not(.bl-proj__go):not(.bl-proj__img):not(.bl-cta__alt):hover{ color:var(--wine); }
.bl-sec{ scroll-margin-top:6rem; margin-top:var(--s6); }
.bl-sec h2{ margin:0 0 var(--s3); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-4); line-height:1.12; letter-spacing:var(--track-d2); color:var(--ink); text-wrap:balance; }
.bl-sec h3{ margin:var(--s4) 0 .6rem; font-size:var(--t-1); font-weight:500; letter-spacing:var(--track-t); color:var(--ink); }
.bl-sec ul{ list-style:none; margin:0 0 1.3em; padding:0; }
.bl-sec li{ position:relative; padding-left:1.6em; margin:.3em 0; line-height:1.6; }
.bl-sec li::before{ content:""; position:absolute; left:0; top:.8em; width:.8em; height:1px; background:var(--olive); }
.bl-fig{ margin:var(--s4) 0; }
.bl-fig img{ display:block; width:100%; height:auto; max-height:78vh; object-fit:cover; border-radius:4px; }

/* étiquettes : réalisation réelle vs exemple théorique */
.bl-tag{ display:inline-flex; align-items:center; gap:.55em; font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--olive); }
.bl-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.bl-tag--theo{ color:var(--ink-3); }
.bl-tag--theo::before{ background:none; border:1px solid currentColor; }
.bl-sec--theo{ padding:var(--s4); border:1px dashed var(--paper-3); border-radius:6px; background:linear-gradient(var(--paper),var(--paper)); }
.bl-sec--theo h2{ margin-top:.7rem; font-size:var(--d-5); }
.bl-theo__note{ margin:1rem 0 0 !important; padding-top:.9rem; border-top:1px dashed var(--paper-3); font-size:var(--t-xs) !important; letter-spacing:.04em; color:var(--ink-3) !important; }
.bl-sec--proof{ padding-top:var(--s4); border-top:1px solid var(--ink); }

/* blocs réalisation */
.bl-projs{ display:grid; gap:var(--s5); margin-top:var(--s4); }
.bl-projs .bl-proj + .bl-proj{ padding-top:var(--s5); border-top:1px solid var(--line); }
.bl-projs--grid{ gap:var(--s4); }
@media (min-width:760px){ .bl-projs--grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } }
.bl-proj{ display:grid; gap:1.2rem; }
@media (min-width:640px){ .bl-proj{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s4); align-items:start; } .bl-proj--c{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); } }
.bl-proj__img{ display:block; overflow:hidden; border-radius:4px; background:var(--paper-2); }
.bl-proj__img img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--ease); }
.bl-proj--c .bl-proj__img img{ aspect-ratio:4/3; }
.bl-proj:hover .bl-proj__img img{ transform:scale(1.035); }
.bl-proj h3{ margin:.7rem 0 .25rem; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5); letter-spacing:var(--track-d3); line-height:1.1; }
.bl-proj h3 a{ color:var(--ink); text-decoration:none; background:none !important; }
.bl-proj__meta{ margin:0 0 .9rem !important; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.bl-proj__facts{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0 0 1rem; padding:.8rem 0; border-block:1px solid var(--line); }
.bl-proj__facts div{ min-width:0; }
.bl-proj__facts dt{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.bl-proj__facts dd{ margin:.15rem 0 0; font-size:var(--t-sm); color:var(--ink); }
.bl-proj p{ font-size:var(--t-sm); line-height:1.65; font-weight:300; color:var(--ink-2); margin:0 0 1rem; }
.bl-proj__q{ margin:0 0 1rem; padding-left:1rem; border-left:2px solid var(--wine); }
.bl-proj__q p{ margin:0 0 .4rem !important; font-size:var(--t-sm); font-style:normal; color:var(--ink) !important; }
.bl-proj__q cite{ font-style:normal; font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.bl-proj__go{ display:inline-flex; gap:.6em; font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--wine); text-decoration:none; }
.bl-proj__go:hover .btn__arrow{ transform:translateX(4px); }

/* architectes, tableau, schéma, deux colonnes */
.bl-archis{ margin-top:var(--s5); }
.bl-archis__h{ font-size:var(--t-xs) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) !important; margin-bottom:.8rem !important; }
.bl-archis ul{ display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
@media (min-width:640px){ .bl-archis ul{ grid-template-columns:1fr 1fr; column-gap:var(--s4); } }
.bl-archis li{ padding:0 !important; margin:0 !important; border-bottom:1px solid var(--line); }
.bl-archis li::before{ content:none !important; }
.bl-archis a{ display:flex; flex-direction:column; padding:.75rem 0; text-decoration:none; background:none !important; }
.bl-archis b{ font-weight:500; color:var(--ink); font-size:var(--t-sm); }
.bl-archis span{ font-size:var(--t-xs); color:var(--ink-3); letter-spacing:.04em; }
.bl-archis a:hover b{ color:var(--wine); }
.bl-table{ margin-top:var(--s4); overflow-x:auto; }
.bl-table table{ width:100%; border-collapse:collapse; font-size:var(--t-sm); }
.bl-table caption{ text-align:left; margin-bottom:.8rem; }
.bl-table th,.bl-table td{ text-align:left; padding:.85rem .8rem .85rem 0; border-bottom:1px solid var(--line); font-weight:300; color:var(--ink-2); vertical-align:top; white-space:nowrap; }
.bl-table thead th{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); border-bottom-color:var(--ink); font-weight:500; }
.bl-table tbody th a{ color:var(--ink); font-weight:500; text-decoration:none; background:none !important; }
.bl-table tbody th span{ display:block; font-size:var(--t-xs); color:var(--ink-3); }
.bl-schema{ margin:var(--s4) 0; padding:var(--s3); border:1px solid var(--line); border-radius:6px; color:var(--ink); }
.bl-schema svg{ display:block; width:100%; height:auto; }
.bl-note{ font-size:var(--t-sm) !important; }
.bl-split{ display:grid; gap:var(--s3); margin-top:var(--s3); }
@media (min-width:700px){ .bl-split{ grid-template-columns:1fr 1fr; } }
.bl-split__c{ padding:var(--s3); border-radius:6px; background:var(--paper-2); }
.bl-split__c:last-child{ background:none; border:1px solid var(--ink); }
.bl-split__c h3{ margin-top:0 !important; font-size:var(--t-0) !important; letter-spacing:.06em; text-transform:uppercase; }

/* appels à l'action dans l'article */
.bl-cta{ margin:var(--s6) 0 0; padding:var(--s5) var(--s4); border-radius:6px; background:var(--ink); color:var(--paper); }
.bl-cta__t{ margin:0 0 .5rem !important; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5) !important; line-height:1.2 !important; color:var(--paper) !important; text-wrap:balance; }
.bl-cta__s{ margin:0 0 1.4rem !important; font-size:var(--t-sm) !important; color:rgba(245,243,236,.7) !important; }
.bl-cta__go{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.bl-cta__alt{ color:var(--paper); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid rgba(245,243,236,.4); padding-bottom:.2rem; }
.bl-more{ margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--ink); }
.bl-more ul{ margin:.8rem 0 0; padding:0; list-style:none; }
.bl-more li{ border-bottom:1px solid var(--line); }
.bl-more a{ display:flex; justify-content:space-between; padding:.85rem 0; font-size:var(--t-0); color:var(--ink) !important; background:none !important; text-decoration:none; }
.bl-more a:hover{ color:var(--wine) !important; }
.sfaq__a p,.sfaq__a li{ font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
.sfaq__a ul{ margin:.4rem 0 0; padding-left:1.1rem; }

/* cartes d'articles */
.bl-list{ padding-bottom:var(--sec); }
.bl-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 var(--s5); }
.bl-chip{ font:inherit; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; padding:.7em 1.15em; border-radius:var(--r-pill); border:1px solid var(--line); background:none; color:var(--ink-2); cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.bl-chip:hover{ border-color:var(--ink); }
.bl-chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.bl-grid{ display:grid; gap:var(--s5) var(--s4); }
@media (min-width:700px){ .bl-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .bl-grid{ grid-template-columns:repeat(3,1fr); } }
.bl-card{ display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:var(--ink); }
.bl-card[hidden]{ display:none; }
.bl-card__img{ display:block; overflow:hidden; border-radius:4px; background:var(--paper-2); }
.bl-card__img img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform 1.2s var(--ease); }
.bl-card:hover .bl-card__img img{ transform:scale(1.04); }
.bl-card__txt{ display:flex; flex-direction:column; gap:.55rem; }
.bl-card b{ font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5); line-height:1.15; letter-spacing:var(--track-d3); text-wrap:balance; }
.bl-card__ex{ font-size:var(--t-sm); line-height:1.55; font-weight:300; color:var(--ink-2); }
.bl-card__go{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--wine); }
.bl-card:hover .btn__arrow{ transform:translateX(4px); }
.bl-card--big{ margin-bottom:var(--s6); padding-bottom:var(--s5); border-bottom:1px solid var(--line); }
@media (min-width:900px){ .bl-card--big{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s5); align-items:end; } .bl-card--big .bl-card__img img{ aspect-ratio:16/10; } .bl-card--big b{ font-size:var(--d-3); } }
.bl-rel .bl-grid--3 .bl-card b{ font-size:var(--d-5); }
.bl-all{ font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--wine); text-decoration:none; }
@media (max-width:999px){ .bl-toc details:not([open]) ol{ display:none; } }
@media (max-width:640px){ .bl-hero__fig img{ aspect-ratio:4/3; } .bl-sec--theo{ padding:var(--s3); } .bl-cta{ padding:var(--s4) var(--s3); } .bl-table th,.bl-table td{ white-space:normal; } }

.bl-sec ol.bl-ol{ list-style:none; margin:0 0 1.3em; padding:0; counter-reset:o; }
.bl-sec ol.bl-ol li{ counter-increment:o; padding-left:2.4em; }
.bl-sec ol.bl-ol li::before{ content:counter(o,decimal-leading-zero); width:auto; height:auto; background:none; top:.15em; font-size:var(--t-xs); letter-spacing:.08em; color:var(--wine); }
.bl-table .bl-tag{ margin:0 0 .8rem; }

.bl-m{ margin:var(--s5) 0; padding:var(--s4); border-radius:6px; background:var(--paper-2); }
.bl-m__h{ margin:.7rem 0 1.2rem !important; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-5) !important; line-height:1.15 !important; color:var(--ink) !important; }
.bl-m ol{ list-style:none; margin:0; padding:0; }
.bl-m li{ display:grid; grid-template-columns:2.4rem 1fr; gap:.4rem; padding:.9rem 0 !important; margin:0 !important; border-top:1px solid var(--line); }
.bl-m li::before{ content:none !important; }
.bl-m__n{ font-size:var(--t-xs); letter-spacing:.08em; color:var(--wine); padding-top:.2em; }
.bl-m b{ font-weight:500; color:var(--ink); }
.bl-m p{ margin:.25rem 0 .35rem !important; font-size:var(--t-sm) !important; line-height:1.6 !important; }
.bl-m__k{ font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }

/* =============== BLOG · page d'index (journal) =============== */
.bx-hero{ position:relative; min-height:min(100svh,980px); display:flex; align-items:flex-end; color:var(--paper); background:var(--ink); overflow:hidden; }
.bx-hero__fig{ position:absolute; inset:0; }
.bx-hero__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); animation:bxZoom 2.4s var(--ease) both; }
@keyframes bxZoom{ from{ transform:scale(1.12); } to{ transform:scale(1.04); } }
.bx-hero__veil{ position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(30,35,24,.62) 0,rgba(30,35,24,0) 22%),
  linear-gradient(0deg,rgba(30,35,24,.92) 0,rgba(30,35,24,.55) 38%,rgba(30,35,24,.12) 70%,rgba(30,35,24,.2) 100%),
  linear-gradient(90deg,rgba(30,35,24,.55) 0,rgba(30,35,24,0) 60%); }
.bx-hero__in{ position:relative; width:100%; padding-top:clamp(6.5rem,11vw,9rem); padding-bottom:clamp(2.2rem,5vw,4.5rem); }
.bx-crumb{ position:absolute; top:clamp(5.6rem,9vw,7.4rem); color:rgba(245,243,236,.6); }
.bx-crumb a,.bx-crumb span{ color:inherit; }
.bx-crumb [aria-current]{ color:var(--paper); }
.bx-hero__grid{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:end; }
@media (min-width:1000px){ .bx-hero__grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr); } }
.bx-hero h1{ margin:var(--s3) 0 0; font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-1); line-height:.98; letter-spacing:var(--track-d1); }
.bx-hero h1 em{ font-style:normal; color:var(--olive-lit); }
.bx-hero h1 .mask{ display:block; }
.bx-hero__lead{ margin:var(--s4) 0 0; max-width:52ch; font-size:var(--t-1); line-height:1.55; font-weight:300; color:rgba(245,243,236,.82); }
.bx-une{ display:grid; gap:.8rem; padding:clamp(1.3rem,2.4vw,2rem); border-radius:18px; text-decoration:none; color:var(--paper);
  background:rgba(245,243,236,.1); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(245,243,236,.22); transition:background .4s var(--ease), transform .6s var(--ease); }
.bx-une:hover{ background:rgba(245,243,236,.16); transform:translateY(-4px); }
.bx-une__k,.bx-une__m,.bx-une__go{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; }
.bx-une__k{ color:var(--olive-lit); }
.bx-une b{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.35rem,2vw,1.85rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.bx-une__m{ color:rgba(245,243,236,.6); letter-spacing:.12em; }
.bx-une__go{ margin-top:.4rem; padding-top:.9rem; border-top:1px solid rgba(245,243,236,.18); display:flex; justify-content:space-between; }
.bx-une:hover .btn__arrow{ transform:translateX(4px); }

.bx-band{ background:var(--ink); color:var(--paper); border-top:1px solid rgba(245,243,236,.1); }
.bx-band__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:800px){ .bx-band__grid{ grid-template-columns:repeat(4,1fr); } }
.bx-band__grid > div{ display:flex; align-items:baseline; gap:.8rem; padding:clamp(1.3rem,2.6vw,2.2rem) 0; border-bottom:1px solid rgba(245,243,236,.1); }
@media (min-width:800px){ .bx-band__grid > div{ border-bottom:0; } .bx-band__grid > div + div{ padding-left:clamp(1rem,2.5vw,2.5rem); border-left:1px solid rgba(245,243,236,.1); } }
.bx-band b{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.03em; line-height:1; }
.bx-band span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,243,236,.6); }

.bx-list{ padding:0 0 clamp(4rem,8vw,7rem); }
.bx-bar{ position:sticky; top:64px; z-index:20; background:rgba(245,243,236,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.bx-bar__in{ padding-block:.8rem; }
.bx-chips{ margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.bx-chips::-webkit-scrollbar{ display:none; }
.bx-chips .bl-chip{ flex:none; display:inline-flex; align-items:center; gap:.55rem; min-height:42px; }
.bx-chips .bl-chip i{ font-style:normal; font-size:.62rem; letter-spacing:0; min-width:1.5em; height:1.5em; padding:0 .35em; display:inline-grid; place-items:center; border-radius:999px; background:var(--paper-2,#E9E4D6); color:var(--ink-2); }
.bx-chips .bl-chip.is-on i{ background:rgba(245,243,236,.18); color:var(--paper); }
.bx-head{ padding:clamp(3rem,6vw,5.5rem) 0 clamp(2rem,4vw,3.4rem); }
.bx-head h2{ margin-top:var(--s3); font-family:var(--serif); font-weight:var(--w-air); font-size:var(--d-2); line-height:1.02; letter-spacing:var(--track-d1); }
.bx-head h2 em{ font-style:normal; color:var(--olive); }
.bx-head--d h2 em{ color:var(--olive-lit); }

.bx-grid{ display:grid; gap:clamp(2.4rem,4vw,3.6rem) clamp(1.2rem,2.4vw,2.2rem); }
@media (min-width:700px){ .bx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .bx-grid{ grid-template-columns:repeat(6,1fr); } .bx-card{ grid-column:span 2; } .bx-card--lg{ grid-column:span 3; } .bx-grid.is-filtered .bx-card{ grid-column:span 2; } }
.bx-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.bx-card[hidden]{ display:none; }
.bx-card__img{ position:relative; display:block; overflow:hidden; border-radius:14px; background:var(--paper-2,#E9E4D6); }
.bx-card__img img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; }
.bx-card--lg .bx-card__img img{ aspect-ratio:16/11; }
.bx-grid.is-filtered .bx-card__img img{ aspect-ratio:4/3; }
.bx-card:hover .bx-card__img img{ transform:scale(1.045); }
.bx-card__tag{ position:absolute; left:12px; top:12px; padding:.5em .85em; border-radius:999px; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--paper); background:rgba(35,40,30,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bx-card__meta{ display:flex; gap:1rem; margin:1.15rem 0 .6rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.bx-card__meta span:first-child{ color:var(--olive); font-weight:500; }
.bx-card__t{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.3rem,1.7vw,1.6rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.bx-card--lg .bx-card__t{ font-size:clamp(1.5rem,2.3vw,2.2rem); }
.bx-card__ex{ margin-top:.7rem; font-size:.95rem; line-height:1.55; font-weight:300; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bx-card__go{ margin-top:1rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--wine); }
.bx-card:hover .btn__arrow{ transform:translateX(4px); }

.bx-qs{ background:var(--ink); color:var(--paper); padding-bottom:clamp(4rem,8vw,7rem); }
.bx-qlist{ border-top:1px solid rgba(245,243,236,.14); }
.bx-q{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.4rem clamp(1rem,2.5vw,2.4rem); padding:clamp(1.2rem,2.4vw,1.8rem) 0; border-bottom:1px solid rgba(245,243,236,.14); text-decoration:none; color:inherit; }
.bx-q__n{ font-size:.66rem; letter-spacing:.18em; color:rgba(245,243,236,.42); }
.bx-q__t{ font-family:var(--serif); font-weight:var(--w-air); font-size:clamp(1.25rem,2.4vw,2.2rem); line-height:1.15; letter-spacing:-.025em; transition:color .3s, transform .5s var(--ease); }
.bx-q__s{ grid-column:2; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,243,236,.5); }
.bx-q__go{ grid-row:1 / span 2; grid-column:3; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(245,243,236,.25); transition:background .3s, color .3s, transform .4s var(--ease); }
.bx-q:hover .bx-q__t{ color:var(--olive-lit); transform:translateX(6px); }
.bx-q:hover .bx-q__go{ background:var(--paper); color:var(--ink); transform:rotate(-45deg); }
.bx-q__img{ display:none; }
@media (min-width:1000px) and (hover:hover){
  .bx-q__img{ display:block; position:absolute; right:90px; top:50%; width:220px; aspect-ratio:4/3; border-radius:12px; overflow:hidden; pointer-events:none; opacity:0; transform:translateY(-50%) rotate(3deg) scale(.9); transition:opacity .35s, transform .5s var(--ease); z-index:2; }
  .bx-q__img img{ width:100%; height:100%; object-fit:cover; }
  .bx-q:hover .bx-q__img{ opacity:1; transform:translateY(-50%) rotate(-2deg) scale(1); }
}
@media (max-width:699px){
  .bx-hero{ min-height:auto; }
  .bx-hero__in{ padding-top:7.5rem; }
  .bx-crumb{ top:5.2rem; }
  .bx-band__grid > div{ flex-direction:column; gap:.35rem; }
  .bx-bar{ top:56px; }
  .bx-q{ grid-template-columns:auto 1fr; }
  .bx-q__go{ display:none; }
}