@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; }
}


/* ---- 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; }
}