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


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