/*
Theme Name: MMEA — Atelier (charte claire)
Theme URI: https://mmea.ch/
Author: MORET — Menuiserie & Agencement
Author URI: https://mmea.ch/
Description: Thème sur mesure pour MORET Menuiserie & Agencement (Yens, Vaud). Base « charte claire » (Bricolage Grotesque + Hanken Grotesk, palette Chêne/Noyer/Lin/Copeau) avec le fil rouge (1.16.0) : barre de lecture, traits et soulignés rouges, couleur réglable depuis « Contenu du site → Fil rouge (couleur) ».
Version: 1.23.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Propriétaire — usage réservé à MORET Menuiserie & Agencement
Text Domain: mmea-atelier
*/

/* ============ TOKENS — charte MORET ============ */
:root{
  color-scheme:only light;   /* le site est en thème clair : empêche l'assombrissement auto des navigateurs/apps en dark mode */
  --noyer:#2C231B;       /* noyer profond — texte & fonds sombres */
  --noyer2:#3A2F24;      /* noyer clair */
  --chene:#B5824A;       /* chêne — accent principal (gros titres, icônes) */
  --chene-d:#9A6C39;     /* chêne foncé (hover) */
  --chene-t:#86592C;     /* chêne texte — petits libellés sur fond clair */
  --lin:#FAF7F1;         /* lin — surfaces claires */
  --copeau:#F2EBDD;      /* copeau — fond de page */
  --copeau-d:#EBE2CF;    /* copeau soutenu */
  --taupe:#8A7E6F;       /* taupe — texte secondaire (gros) */
  --taupe-t:#6E6353;     /* taupe texte — petits libellés (contraste renforcé) */
  --sapin:#4E5B48;       /* sapin — accent froid, rare */
  --trait:#DDD2BE;       /* trait — filets & bordures */
  --encre:#4A4137;       /* encre — texte courant sur clair */
  --max:1160px;
  --r:14px;              /* rayon standard de la charte */
  --r-s:10px;
  --ff-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --ff-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--copeau);
  color:var(--noyer);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--chene);color:var(--lin)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{position:relative;scroll-margin-top:88px}
/* Ancre de repli invisible : garde un ancien lien #… fonctionnel
   quand une section change d'identifiant (1.20.0). */
.ancre-alias{display:block;height:0;overflow:hidden;scroll-margin-top:88px}
.emblem{color:var(--chene)}

/* ============ TYPO UTILITAIRES ============ */
.eyebrow{
  font-family:var(--ff-body);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chene-t);margin-bottom:18px;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--chene-t);display:inline-block}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:620;line-height:1.1;letter-spacing:-.005em;color:var(--noyer)}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h2 em,h1 em{font-style:normal;color:var(--chene)}
.lead{color:var(--encre);max-width:62ch;font-size:clamp(1.02rem,1.4vw,1.14rem)}
.bowtie{width:15px;height:10px;flex:none;display:inline-block;vertical-align:middle}

/* ============ RÉVÉLATIONS ============ */
.js .rv{opacity:0;transform:translateY(22px)}
.io.in-view .rv{
  opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0)*.09s);
}
.draw{stroke-dasharray:1;stroke-dashoffset:1;fill:none}
@keyframes drawIn{to{stroke-dashoffset:0}}
.io.in-view .draw{animation:drawIn 1.1s ease forwards;animation-delay:calc(var(--i,0)*.12s)}
.lab{opacity:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ NAVIGATION ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s;
}
header.scrolled{background:rgba(242,235,221,.9);backdrop-filter:blur(12px);border-color:var(--trait);box-shadow:0 1px 0 rgba(44,35,27,.04)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:38px;height:34px;color:var(--chene);flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt b{font-family:var(--ff-display);font-weight:720;font-size:21px;letter-spacing:.02em;color:var(--noyer)}
.brand .bt span{font-weight:620;font-size:9.5px;letter-spacing:.2em;color:var(--taupe-t);text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--encre);transition:color .25s;position:relative}
.nav-links a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--chene);transition:width .3s;border-radius:2px}
.nav-links a:hover{color:var(--noyer)}
.nav-links a:not(.cta):hover::after{width:100%}
.cta{
  font-weight:620;font-size:13.5px;letter-spacing:.01em;border-radius:999px;
  background:var(--noyer);color:var(--lin)!important;padding:11px 20px;
  transition:background .3s,transform .2s;
}
.cta:hover{background:var(--chene);transform:translateY(-1px)}
.burger{display:none;background:none;border:1px solid var(--trait);border-radius:10px;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--noyer);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:26px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{min-height:100svh;display:flex;align-items:center;padding:clamp(104px, 9.8vw + 30px, 130px) 0 90px;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 88% 8%,rgba(181,130,74,.10) 0%,transparent 55%),
  linear-gradient(180deg,var(--copeau) 0%,var(--lin) 100%);}
.hero-bg svg{position:absolute;inset:0;width:100%;height:100%}
/* — veines de bois animées — */
.grain path{fill:none;stroke:var(--chene);stroke-linecap:round}
.js .grain .vein{stroke-dasharray:1;stroke-dashoffset:1}
.grain .vein{animation:drawIn 2.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i)*.13s)}
.flowset{fill:none}
.flowset use{
  fill:none;stroke:var(--chene-d);stroke-linecap:round;
  stroke-dasharray:.02 .23;stroke-dashoffset:0;opacity:0;
  animation:flowMove var(--fd,11s) linear infinite,flowFade 1.6s ease forwards 2.6s;
}
@keyframes flowMove{to{stroke-dashoffset:-1}}
@keyframes flowFade{to{opacity:.65}}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem);font-weight:720;max-width:14ch;letter-spacing:-.02em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.js .hero h1 .w i{display:inline-block;font-style:inherit;transform:translateY(110%)}
.hero h1 .w i{animation:rise .9s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(.25s + var(--i)*.08s)}
@keyframes rise{to{transform:none}}
.hero .eyebrow,.hero .lead,.hero .actions,.hero .hero-art{opacity:0;animation:fadeUp .9s ease forwards}
.hero .eyebrow{animation-delay:.1s}
.hero .lead{animation-delay:.95s;margin:24px 0 36px;max-width:48ch}
.hero .actions{animation-delay:1.15s;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  font-weight:620;font-size:15px;border-radius:999px;
  padding:15px 28px;transition:.25s;display:inline-flex;align-items:center;gap:9px;border:2px solid transparent;
}
.btn-solid{background:var(--noyer);color:var(--lin)}
.btn-solid:hover{background:var(--chene);transform:translateY(-2px)}
.btn-ghost{color:var(--noyer);border-color:var(--trait)}
.btn-ghost:hover{border-color:var(--chene);color:var(--chene-d)}
/* emblème géant en signature du hero */
.hero-art{animation-delay:1.05s;position:relative}
.hero-art .disc{aspect-ratio:1;border-radius:50%;background:var(--noyer);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px rgba(44,35,27,.18);position:relative;overflow:hidden}
.hero-art .disc::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 28%,rgba(181,130,74,.22),transparent 60%)}
.hero-art .disc svg{width:58%;height:58%;color:var(--lin);position:relative;z-index:1;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-2deg)}}
.hero-art .tagchip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--lin);border:1px solid var(--trait);border-radius:999px;padding:9px 18px;font-weight:620;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chene-d);box-shadow:0 8px 20px rgba(44,35,27,.10)}

/* ============ HERO — COPEAU 3D (option activable) ============
   Couche 3D montée par copeau3d.js dans #stage. Elle se superpose au
   fond animé du hero (veines) et passe SOUS le texte (.wrap). Le canevas
   est transparent (renderer alpha) ; le copeau flotte à droite du texte
   sur ordinateur, au-dessus sur téléphone (géré par copeau3d.js). */
.hero #stage{position:absolute;inset:0;z-index:1;pointer-events:auto;touch-action:pan-y}
.hero #stage canvas{width:100%;height:100%;display:block;cursor:grab}
.hero #stage.grab canvas{cursor:grabbing}
/* Le repère est centré par la boîte elle-même (left:0/right:0 +
   text-align), et non par un transform : l'animation fadeUp se termine
   sur « transform:none » et effaçait le translateX(-50%) — le texte
   partait alors vers la droite et se faisait rogner sur téléphone
   (corrigé en 1.20.0). */
.hero.has-3d .hint{
  position:absolute;left:0;right:0;bottom:26px;z-index:2;
  margin:0;padding:0 24px;text-align:center;
  font-weight:620;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--taupe-t);opacity:0;animation:fadeUp .9s ease forwards;animation-delay:1.8s;
}
@media (max-width:420px){
  .hero.has-3d .hint{font-size:10px;letter-spacing:.12em}
}

/* ============ BANDEAU CLIENTS ============ */
.clients{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--lin)}
.clients .row{
  display:flex;justify-content:center;align-items:center;gap:18px 26px;flex-wrap:wrap;text-align:center;
  padding:22px 0;font-weight:620;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe-t);
}

/* ============ CHIFFRES-CLÉS ============ */
.stats{padding:62px 0;background:var(--copeau)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .stat{padding:8px 10px;position:relative}
.stats .stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:14%;height:72%;width:1px;background:var(--trait)}
.stats .n{font-family:var(--ff-display);font-weight:720;font-size:clamp(2.1rem,4.4vw,3rem);color:var(--noyer);line-height:1}
.stats .n em{font-style:normal;color:var(--chene)}
.stats .k{margin-top:10px;font-weight:620;font-size:12.5px;letter-spacing:.04em;color:var(--encre)}

/* ============ SECTIONS COMMUNES ============ */
.sect{padding:108px 0}
.head{max-width:760px;margin-bottom:60px}
.head .lead{margin-top:18px}

/* ============ EXPERTISES ============ */
.mat{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:44px 0 60px}
.mat div{background:var(--lin);border:1px solid var(--trait);border-radius:var(--r);padding:22px 26px;font-size:15px;color:var(--encre)}
.mat b{color:var(--noyer);font-family:var(--ff-display);font-weight:620;display:block;margin-bottom:5px;font-size:14px;letter-spacing:.01em;text-transform:none}
.grid-x{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.card{
  grid-column:span 2;background:var(--lin);border:1px solid var(--trait);border-radius:var(--r);
  padding:28px 28px 30px;position:relative;transition:border-color .35s,transform .35s,box-shadow .35s;overflow:hidden;
}
.card:nth-child(1),.card:nth-child(2){grid-column:span 2}
.card h3 a{position:static}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.card:has(h3 a){cursor:pointer}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--chene);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.card:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 40px rgba(44,35,27,.10)}
.card:hover::before{transform:scaleX(1)}
.card .ic{width:52px;height:52px;border-radius:12px;background:var(--copeau);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card .ic svg{width:30px;height:30px}
.card .icon{stroke:var(--noyer);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.card .acc{stroke:var(--chene)}
.card h3{font-size:1.42rem;margin-bottom:10px}
.card p{color:var(--encre);font-size:15px}
/* — En-tête de la carte (1.21.0) —
   Le titre et l'étiquette partagent une ligne : l'étiquette flotte à
   droite, le titre l'habille puis reprend toute la largeur en dessous
   — un titre long n'est donc jamais comprimé. Le bloc réserve deux
   lignes : toutes les cartes ont exactement le même en-tête, et les
   images démarrent à la même hauteur d'une carte à l'autre. C'était
   la vraie cause du déséquilibre : l'écart entre le titre et l'image
   changeait d'une carte à l'autre. */
.card .card-tete{margin-bottom:22px}
.card .card-tete::after{content:"";display:block;clear:both}
.card .card-tete .ref{position:static;float:right;margin:6px 0 6px 14px}
.card .card-tete h3{margin:0;line-height:1.1;min-height:2.2em}

/* — Carte avec image —
   Sur l'accueil, la carte d'un savoir-faire montre une image plutôt
   qu'un paragraphe : le détail du métier se lit sur sa page. L'image
   occupe toute la largeur de la carte (coins arrondis compris) et se
   cale en bas. Le zoom au survol est celui des vignettes de
   réalisations : un seul geste sur tout le site. */
.card.has-img{display:flex;flex-direction:column;padding-bottom:0}
.card-img{margin:auto -28px 0;aspect-ratio:4/3;overflow:hidden;background:var(--copeau-d)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card.has-img:hover .card-img img{transform:scale(1.05)}
.card .ref{
  position:absolute;top:30px;right:26px;font-weight:700;
  font-size:10px;letter-spacing:.14em;color:var(--chene-t);text-transform:uppercase;
  background:var(--copeau);border-radius:999px;padding:4px 10px;
}

/* ============ PRÉCISION ============ */
.precision{background:var(--noyer);color:var(--lin);border-radius:0}
.precision .eyebrow{color:var(--chene)}
.precision h2{color:var(--lin)}
.precision h2 em{color:var(--chene)}
.precision .lead{color:#D9CDB8}
.prec-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.joint-fig{margin:0}
.joint-fig svg{width:100%;height:auto;overflow:visible}
.joint-fig figcaption{margin-top:18px;font-weight:620;font-size:12px;letter-spacing:.08em;color:#B8AB92}
.board{stroke:var(--lin);stroke-width:2;stroke-linejoin:round;fill:rgba(181,130,74,.10)}
.bgrain{stroke:rgba(181,130,74,.55);stroke-width:1.2;fill:none}
.anno{stroke:#7C7059;stroke-width:1.1;fill:none}
.jl{stroke:var(--chene);stroke-width:2;fill:none;stroke-linejoin:round;opacity:0}
.joint-fig text{font-family:var(--ff-body);font-weight:600;font-size:12px;fill:#C9A26B;letter-spacing:.04em}
.js .board-a{transform:translateX(-56px)}
.io.in-view .board-a{animation:assemble 8s cubic-bezier(.65,0,.35,1) infinite;animation-delay:1.7s}
@keyframes assemble{0%{transform:translateX(-56px)}30%{transform:translateX(0)}70%{transform:translateX(0)}100%{transform:translateX(-56px)}}
.io.in-view .jl{animation:glow 8s ease-in-out infinite;animation-delay:1.7s}
@keyframes glow{0%,32%{opacity:0}42%,60%{opacity:1}70%,100%{opacity:0}}
.io.in-view .joint-fig .lab{animation:fadeUp .8s ease forwards;animation-delay:calc(1.1s + var(--i,0)*.15s)}

/* ============ PROCESSUS ============ */
.proc-line{margin:10px 0 -6px}
.proc-line svg{width:100%;height:84px}
.proc-line path{stroke:var(--chene);stroke-width:1.6;fill:none;opacity:.5}
.proc-line circle{fill:var(--chene);transform:scale(0);transform-origin:center;transform-box:fill-box}
.io.in-view .proc-line circle{transition:transform .5s cubic-bezier(.3,1.4,.4,1);transform:scale(1)}
.io.in-view .proc-line circle:nth-of-type(1){transition-delay:.2s}
.io.in-view .proc-line circle:nth-of-type(2){transition-delay:.85s}
.io.in-view .proc-line circle:nth-of-type(3){transition-delay:1.5s}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:34px}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--noyer);color:var(--lin);font-family:var(--ff-display);font-weight:720;font-size:15px;margin-bottom:16px}
.step h3{font-size:1.32rem;margin-bottom:9px}
.step p{color:var(--encre);font-size:15px}
.step .tag{display:block;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chene-t);margin-bottom:6px}

/* ============ RÉALISATIONS — GALERIE ============ */
.real{background:var(--lin);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.real-cta{display:flex;justify-content:center;margin-top:44px}
.proj{margin:0;background:var(--copeau);border:1px solid var(--trait);border-radius:var(--r);position:relative;cursor:pointer;overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.proj:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(44,35,27,.12);border-color:transparent}
.proj:focus-visible{outline:2px solid var(--chene);outline-offset:3px}
.proj-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--copeau-d)}
.proj-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);z-index:1}
.proj:hover .proj-img img{transform:scale(1.05)}
.proj-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--taupe-t);font-weight:620;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:0 16px}
.proj-ph svg{width:30px;height:30px;color:var(--chene);opacity:.7}
.proj figcaption{padding:20px 22px 22px}
.proj h3{font-size:1.18rem;margin-bottom:6px}
.proj figcaption p{font-weight:620;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chene-t)}
.proj-count{position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;font-weight:620;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lin);background:rgba(44,35,27,.78);border-radius:999px;padding:5px 11px}
.proj-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:54px;height:54px;border-radius:50%;background:rgba(44,35,27,.55);backdrop-filter:blur(2px);pointer-events:none;transition:background .3s}
.proj-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--lin);transition:border-color .3s}
.proj:hover .proj-play{background:var(--chene)}

/* ============ VISIONNEUSE ============ */
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:78px 84px 84px}
.lb[hidden]{display:none}
.lb [hidden]{display:none!important}
.lb-backdrop{position:absolute;inset:0;background:rgba(36,29,22,.94);backdrop-filter:blur(8px);cursor:zoom-out}
.lb-head{position:absolute;top:0;left:0;right:0;height:74px;z-index:2;pointer-events:none;display:flex;align-items:center;gap:18px;padding:0 86px 0 28px}
.lb-title{font-family:var(--ff-display);font-weight:620;font-size:14px;letter-spacing:.02em;color:var(--lin);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-count{font-weight:620;font-size:12px;letter-spacing:.1em;color:#B8AB92;flex:none}
.lb-media{position:relative;z-index:1;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lb-media>*{animation:lbIn .35s ease}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb-img{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100vh - 176px);max-height:calc(100svh - 176px);border-radius:var(--r);background:var(--noyer2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lb-video{position:relative;aspect-ratio:16/9;background:#000;width:min(1100px,100%,calc((100vh - 176px)*16/9));width:min(1100px,100%,calc((100svh - 176px)*16/9));border-radius:var(--r);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;width:min(560px,84vw);aspect-ratio:4/3;border:1px dashed #7C7059;border-radius:var(--r);background:var(--noyer2);font-weight:620;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#B8AB92;padding:0 24px}
.lb-missing small{font-weight:500;font-size:10px;letter-spacing:.04em;text-transform:none;color:#9A8E78;word-break:break-all}
.lb-cap{position:absolute;left:84px;right:84px;bottom:28px;z-index:2;pointer-events:none;text-align:center;font-weight:620;font-size:12px;letter-spacing:.1em;color:#B8AB92}
.lb-btn{position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(250,247,241,.1);border:1px solid rgba(250,247,241,.3);color:var(--lin);font-size:18px;line-height:1;cursor:pointer;transition:background .25s,border-color .25s}
.lb-btn:hover{background:var(--chene);border-color:var(--chene)}
.lb-close{top:14px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
body.lb-open{overflow:hidden}

/* ============ HISTOIRE — CERNES ============ */
.hist-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.rings svg{width:100%;height:auto;overflow:visible}
.ring{stroke:var(--chene);fill:none;stroke-width:var(--sw,1.5);stroke-linecap:round}
.leader{stroke:var(--trait);stroke-width:1.5;fill:none}
.rings text{font-family:var(--ff-body);font-weight:620;font-size:12.5px;fill:var(--encre);letter-spacing:.02em}
.rings .dot{fill:var(--chene)}
.js .ring,.js .leader{stroke-dasharray:1;stroke-dashoffset:1}

/* Le tracé du copeau (1.23.0) — 3,5 s en tout.
   Chaque segment attend que le précédent ait fini : sur une spirale
   continue, des tracés simultanés feraient apparaître le trait à deux
   endroits à la fois et casseraient le geste unique. Les durées suivent
   la longueur de chaque tour — l'outil accélère en s'éloignant du cœur —
   et chaque génération pose son étiquette quand son tour s'achève. */
.io.in-view .ring{animation:drawIn var(--dur,.8s) linear forwards;animation-delay:var(--del,0s)}
.io.in-view .leader{animation:drawIn .55s ease forwards;animation-delay:var(--del,0s)}
.rings .dot,.rings .lab{opacity:0}
.io.in-view .rings .dot{animation:fadeUp .4s ease forwards;animation-delay:var(--del,0s)}
.io.in-view .rings .lab{animation:fadeUp .6s ease forwards;animation-delay:var(--del,0s)}

/* La respiration porte sur le GROUPE, jamais sur les segments : une
   rotation appliquée segment par segment décollerait les raccords. */
.copeau{transform-box:fill-box;transform-origin:center;
  animation:copeauSouffle 22s ease-in-out infinite;animation-delay:4.2s}
@keyframes copeauSouffle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(1.1deg) scale(1.012)}}
.hist-copy .lead{margin:20px 0 0}
.hist-copy .sig{margin-top:32px;display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-display);font-weight:620;font-size:1.18rem;color:var(--chene-d)}
.hist-copy .sig svg{width:30px;height:26px;color:var(--chene)}

/* ============ POURQUOI ============ */
.why{background:var(--copeau-d)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px}
.why-item{background:var(--lin);border:1px solid var(--trait);border-radius:var(--r);padding:30px 28px}
.why-item .ic{width:46px;height:46px;border-radius:12px;background:var(--copeau);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.why-item .ic svg{width:24px;height:24px;stroke:var(--chene);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:1.32rem;margin-bottom:9px}
.why-item p{color:var(--encre);font-size:15px}
.quote{
  margin-top:64px;padding:44px 48px;background:var(--noyer);border-radius:var(--r);color:var(--lin);
  font-family:var(--ff-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2rem);max-width:34ch;line-height:1.3;position:relative;
}
.quote .bowtie{position:absolute;top:30px;left:48px;width:24px;height:16px;opacity:.6}
.quote span{padding-left:0}
.quote small{display:block;margin-top:18px;font-family:var(--ff-body);font-weight:620;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chene)}

/* ============ PROS ============ */
.pro .head{margin-bottom:34px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.chip{font-weight:620;font-size:13.5px;color:var(--noyer);border:1px solid var(--trait);border-radius:999px;padding:11px 20px;background:var(--lin);transition:.25s}
.chip:hover{border-color:var(--chene);color:var(--chene-d)}
a.chip{text-decoration:none;cursor:pointer}

/* ============ CONTACT ============ */
.contact{background:var(--copeau-d)}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:54px;align-items:start}
.contact h2{max-width:12ch}
.contact .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.info{border:1px solid var(--trait);border-radius:var(--r);background:var(--lin);overflow:hidden}
.info .blk{padding:26px 30px;border-bottom:1px solid var(--trait)}
.info .blk:last-child{border-bottom:none}
.info h4{font-family:var(--ff-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chene-t);margin-bottom:12px}
.info p{font-size:15.5px;color:var(--encre)}
.info a:hover{color:var(--chene-d)}
.maplink{display:inline-block;margin-top:10px;font-weight:620;font-size:13.5px;color:var(--chene-t);border-bottom:1.5px solid var(--trait);transition:.25s}
.maplink:hover{color:var(--chene-d);border-color:var(--chene)}
.hours{width:100%;border-collapse:collapse;font-size:14.5px}
.hours td{padding:7px 0;color:var(--encre)}
.hours td:first-child{color:var(--noyer);font-weight:620;padding-right:18px;white-space:nowrap}
.hours .closed{color:var(--taupe-t)}
.links a{display:inline-block;margin-right:20px;font-weight:620;font-size:14px;color:var(--encre);border-bottom:2px solid var(--trait);padding-bottom:2px;transition:.25s}
.links a:hover{color:var(--chene-d);border-color:var(--chene)}

/* ============ FORMULAIRE ============ */
.cform{display:grid;gap:16px;margin-top:6px}
.cform .field{display:flex;flex-direction:column;gap:7px}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{font-weight:620;font-size:12.5px;letter-spacing:.04em;color:var(--noyer)}
.cform label .req{color:var(--chene-t)}
.cform input,.cform select,.cform textarea{
  font-family:var(--ff-body);font-size:15.5px;color:var(--noyer);
  background:var(--lin);border:1px solid var(--trait);border-radius:var(--r-s,10px);
  padding:13px 15px;transition:border-color .25s,box-shadow .25s;width:100%;
}
.cform textarea{resize:vertical;min-height:120px}
.cform input::placeholder,.cform textarea::placeholder{color:#A99C87}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--chene);box-shadow:0 0 0 3px rgba(181,130,74,.14)}
.cform .consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--encre);line-height:1.5}
.cform .consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--chene)}
.cform .consent a{color:var(--chene-t);border-bottom:1px solid var(--trait)}
.cform button{
  justify-self:start;font-family:var(--ff-body);font-weight:620;font-size:15px;cursor:pointer;
  border:none;border-radius:999px;background:var(--noyer);color:var(--lin);padding:15px 30px;
  transition:background .3s,transform .2s;display:inline-flex;align-items:center;gap:9px;
}
.cform button:hover{background:var(--chene);transform:translateY(-2px)}
.po-label{display:block;font-weight:620;font-size:12.5px;letter-spacing:.04em;color:var(--noyer);margin-bottom:9px}
.po-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px 18px}
.po-item{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--encre);cursor:pointer;line-height:1.3}
.po-item input{width:17px;height:17px;flex:none;margin:0;accent-color:var(--chene)}
#projet-options-field{background:var(--lin);border:1px solid var(--trait);border-radius:14px;padding:16px 18px}
.form-note{font-size:12.5px;color:var(--taupe-t);margin-top:2px}
.form-msg{display:none;border-radius:var(--r);padding:16px 20px;font-weight:500;font-size:14.5px}
.form-msg.show{display:block}
.form-msg.ok{background:#EEF2E9;border:1px solid #C5D2BA;color:#3A4A33}
.form-msg.err{background:#FBEDEC;border:1px solid #E4C3BF;color:#7A2E25}
.form-msg.err a{color:#7A2E25;text-decoration:underline}
.wf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cform button[disabled]{opacity:.6;cursor:progress}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--trait);padding:34px 0;background:var(--copeau)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--taupe-t)}
.foot .legal a{margin-left:22px;transition:.25s;font-weight:500}
.foot .legal a:hover{color:var(--chene-d)}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .hero-art{max-width:380px}
  .grid-x{grid-template-columns:1fr 1fr}
  .card,.card:nth-child(1),.card:nth-child(2){grid-column:span 1}
  .card:nth-child(5){grid-column:span 1}
  .prec-grid,.hist-grid,.contact-grid{grid-template-columns:1fr;gap:48px}
  .real-grid{grid-template-columns:1fr 1fr}
  .hist-grid .rings{order:2}
  .why-grid,.steps{grid-template-columns:1fr;gap:20px}
  .proc-line{display:none}
  .stats .grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .stats .stat:nth-child(2)::after{display:none}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(242,235,221,.98);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--trait);padding:10px 28px 26px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.35s;
  }
  .menu-open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links li{width:100%;border-bottom:1px solid var(--trait)}
  .nav-links li:last-child{border:none;padding-top:18px}
  .nav-links a{display:block;padding:16px 0;font-size:16px}
  .burger{display:block}
  .sect{padding:74px 0}
  .grid-x{grid-template-columns:1fr}
  .card:nth-child(5){grid-column:span 1}
  .card-img{aspect-ratio:16/10}
  .mat{grid-template-columns:1fr}
  .real-grid{grid-template-columns:1fr}
  .clients .row{justify-content:center}
  .cform .two{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr 1fr}
  .stats .stat::after{display:none!important}
  .quote{padding:36px 28px}
  .quote .bowtie{left:28px;top:24px}
  .lb{padding:64px 14px 96px}
  .lb-head{height:64px;padding:0 72px 0 16px}
  .lb-prev{left:14px;top:auto;bottom:20px;transform:none}
  .lb-next{right:14px;top:auto;bottom:20px;transform:none}
  .lb-close{top:10px;right:14px}
  .lb-cap{left:16px;right:16px;bottom:84px}
  .lb-img{max-height:calc(100vh - 196px);max-height:calc(100svh - 196px)}
  .lb-video{width:min(100%,calc((100vh - 196px)*16/9));width:min(100%,calc((100svh - 196px)*16/9))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.hero .eyebrow,.hero .lead,.hero .actions,.hero .hero-art,.lab{opacity:1!important;transform:none!important}
  .js .hero h1 .w i{transform:none}
  .draw,.js .ring,.js .leader{stroke-dashoffset:0!important}
  .rings .dot,.rings .lab{opacity:1!important}
  .copeau{animation:none!important}
  .js .board-a{transform:none}.jl{opacity:.9}
  .proc-line circle{transform:scale(1)!important}
  .hero.has-3d .hint{opacity:1!important}
}

/* ============ ANTI-DARK-MODE ============ */
/* Si l'appareil est en mode sombre, on réaffirme explicitement le thème clair
   de la charte pour que rien ne soit assombri automatiquement. */
@media (prefers-color-scheme: dark){
  html, body{background:var(--copeau)!important;color:var(--noyer)!important}
  .precision{background:var(--noyer)!important}
  .real, .clients, .info{background:var(--lin)!important}
  .why, .contact{background:var(--copeau-d)!important}
  .card, .proj, .why-item, .chip, .mat div{background:var(--lin)!important}
  .proj{background:var(--copeau)!important}
  .proj-img, .card-img{background:var(--copeau-d)!important}
  .quote, .step .num, .cta, .btn-solid{background:var(--noyer)!important;color:var(--lin)!important}
  .lead, .step p, .card p, .why-item p, .mat div{color:var(--encre)!important}
  h1, h2, h3, h4{color:var(--noyer)!important}
  .precision h2, .precision h2 em{color:var(--lin)!important}
  .precision h2 em{color:var(--chene)!important}
  h1 em, h2 em{color:var(--chene)!important}
  .lb-backdrop{background:rgba(36,29,22,.94)!important}
}

/* ============ GABARITS GÉNÉRIQUES (pages & articles) ============ */
.page-wrap{padding:calc(74px + 64px) 0 96px}
.page-head{max-width:760px;margin-bottom:40px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:14px}
.page-content{max-width:760px}
.page-content p{margin:0 0 18px;color:var(--encre)}
.page-content h2{font-size:clamp(1.5rem,3vw,2rem);margin:36px 0 14px}
.page-content h3{font-size:1.3rem;margin:28px 0 10px}
.page-content ul,.page-content ol{margin:0 0 18px 22px;color:var(--encre)}
.page-content li{margin:0 0 8px}
.page-content a{color:var(--chene-t);border-bottom:1px solid var(--trait);transition:.25s}
.page-content a:hover{color:var(--chene-d);border-color:var(--chene)}
.page-content img{border-radius:var(--r);margin:24px 0}
.page-content blockquote{border-left:3px solid var(--chene);padding:6px 0 6px 22px;margin:24px 0;color:var(--noyer);font-family:var(--ff-display)}
.page-nav-back{display:inline-block;margin-top:40px;font-weight:620;font-size:14px;color:var(--chene-t);border-bottom:1.5px solid var(--trait)}
.page-nav-back:hover{color:var(--chene-d);border-color:var(--chene)}

/* ============ MAILLAGE EXPERTISES (SEO) ============ */
.xp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px}
.xp-grid a{display:flex;align-items:center;min-height:60px;background:var(--lin);border:1px solid var(--trait);border-radius:14px;padding:16px 22px;font-family:var(--ff-display);font-weight:620;color:var(--noyer);text-decoration:none;transition:border-color .2s,color .2s,transform .2s}
.xp-grid a:hover{border-color:var(--chene);color:var(--chene-d);transform:translateY(-2px)}

/* ============ PORTFOLIO ============ */
.pfhero{padding:140px 0 10px;background:linear-gradient(180deg,var(--copeau),var(--lin))}
.pfhero .lead{margin-top:18px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.filter{
  font-family:var(--ff-body);font-weight:620;font-size:13.5px;cursor:pointer;
  border:1px solid var(--trait);background:var(--lin);color:var(--encre);
  border-radius:999px;padding:10px 18px;transition:.25s;
}
.filter:hover{border-color:var(--chene);color:var(--chene-d)}
.filter.active{background:var(--noyer);color:var(--lin);border-color:var(--noyer)}
.pfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:46px 0 0}
.proj.hide{display:none}
.pf-empty{display:none;padding:40px 0 10px;color:var(--taupe-t);font-weight:600}
.pfcount{margin-top:14px;font-weight:620;font-size:12.5px;letter-spacing:.04em;color:var(--taupe-t)}
.pf-cta{margin:0;background:var(--noyer);border-radius:var(--r);padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-wrap{padding:80px 0}
.pf-cta h3{color:var(--lin);font-size:clamp(1.4rem,2.6vw,2rem);max-width:20ch}
.pf-cta p{color:#D9CDB8;margin-top:8px;max-width:46ch}
@media (max-width:980px){.pfgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.pfgrid{grid-template-columns:1fr}.pf-cta{padding:34px 26px}.cta-wrap{padding:54px 0}}

/* ============================================================
   SECTEURS — pages « zones d'intervention »
   CSS repris à l'identique du site statique, mais cloisonné
   sous .sec-page pour ne pas toucher au reste de la charte
   (.sect, .eyebrow et .btn y sont réglés différemment).
   ============================================================ */
.sec-page .crumb{font-size:13px;color:var(--taupe-t);padding:26px 0 0}
.sec-page .crumb a:hover{color:var(--chene-d)}
.sec-page .crumb span{color:var(--trait);margin:0 7px}
.sec-page .shero{padding:calc(74px + 34px) 0 56px;position:relative;overflow:hidden;border-bottom:1px solid var(--trait);
  background:radial-gradient(120% 90% at 90% 4%,rgba(181,130,74,.10),transparent 55%),linear-gradient(180deg,var(--copeau),var(--lin))}
.sec-page .eyebrow{font-size:13px;font-weight:620;letter-spacing:.18em;text-transform:uppercase;color:var(--chene-t);display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec-page .eyebrow::before{content:"";width:38px;height:2px;background:var(--chene-d);border-radius:2px}
.sec-page .shero h1{font-size:clamp(2.3rem,5.6vw,3.8rem);letter-spacing:-.02em;max-width:20ch}
.sec-page .shero .lead{margin:20px 0 30px;max-width:60ch;font-size:1.12rem;color:#3a322a}
.sec-page .actions{display:flex;gap:14px;flex-wrap:wrap}
.sec-page .btn{display:inline-block;border-radius:999px;font-weight:620;font-size:15px;padding:14px 26px;transition:.25s;border:1px solid transparent;cursor:pointer}
.sec-page .btn-solid{background:var(--noyer);color:var(--lin)}
.sec-page .btn-solid:hover{background:var(--chene-d);transform:translateY(-1px)}
.sec-page .btn-ghost{border-color:var(--trait);color:var(--noyer)}
.sec-page .btn-ghost:hover{border-color:var(--chene);color:var(--chene-d)}
.sec-page .sect{padding:72px 0}
.sec-page .sect h2{font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:-.01em;margin-bottom:14px}
.sec-page .sect .sub{color:var(--taupe-t);max-width:62ch;margin-bottom:22px}
.sec-page .intro{max-width:64ch;font-size:1.12rem;color:#3a322a}
.sec-page .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:26px}
.sec-page .feat li{list-style:none;background:#fff;border:1px solid var(--trait);border-radius:16px;padding:20px 22px}
.sec-page .feat li b{display:block;font-family:var(--ff-display);font-weight:620;font-size:1.05rem;margin-bottom:5px}
.sec-page .feat li span{color:var(--taupe-t);font-size:.96rem}
.sec-page .tag{display:inline-block;font-size:12px;font-weight:620;letter-spacing:.06em;text-transform:uppercase;color:var(--chene-d);background:var(--copeau);border:1px solid var(--trait);border-radius:999px;padding:5px 13px;margin-bottom:18px}
.sec-page .zone{background:var(--copeau);padding:46px 0 56px}
.sec-page .zone h2{font-size:1.2rem;letter-spacing:-.01em;margin-bottom:8px}
.sec-page .zone p{color:var(--taupe-t);font-size:.96rem;max-width:72ch}
.sec-page .cta-sect{background:var(--copeau);padding:80px 0}
.sec-page .xp{background:var(--copeau);border-top:1px solid var(--trait);padding-bottom:56px}
.sec-page .xp .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:24px}
.sec-page .xp a{display:block;background:var(--lin);border:1px solid var(--trait);border-radius:14px;padding:16px 18px;font-family:var(--ff-display);font-weight:620;transition:.2s}
.sec-page .xp a:hover{border-color:var(--chene);color:var(--chene-d);transform:translateY(-2px)}
.sec-page .xp a[aria-current]{border-color:var(--chene);color:var(--chene-d);background:#fff}
.sec-page .cta-card{background:var(--noyer);border-radius:20px;padding:46px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.sec-page .cta-card h2{color:var(--lin);font-size:clamp(1.4rem,2.6vw,2rem);max-width:20ch;margin-bottom:0}
.sec-page .cta-card p{color:#D9CDB8;margin-top:8px;max-width:46ch}
.sec-page .cta-card .btn{flex:none;border-color:var(--chene);color:var(--lin)}
.sec-page .cta-card .btn:hover{border-color:var(--lin);color:var(--lin);transform:translateY(-1px)}
@media(max-width:760px){.sec-page .cta-card{padding:34px 26px}.sec-page .cta-sect{padding:54px 0}.sec-page .sect{padding:56px 0}}

/* ============================================================
   NAVIGATION — reprise intégrale du CSS que partials.js
   injectait autrefois. Le menu est désormais rendu en PHP et
   piloté depuis Apparence → Menus ; ce bloc arrive en fin de
   feuille pour primer sur les anciennes règles ci-dessus.
   ============================================================ */
/* Pas de position ici : header{position:fixed} (plus haut) fait foi, comme
   dans partials.js. Un #top{position:sticky} le remettait dans le flux et
   décalait tout le contenu de 74px vers le bas. */
#top{border-bottom:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
#top.scrolled{background:rgba(242,235,221,.9);backdrop-filter:blur(12px);border-color:var(--trait,#DDD2BE);box-shadow:0 1px 0 rgba(44,35,27,.04)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none}
.brand .mk{width:38px;height:34px;color:var(--chene,#B5824A);flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.05}
.brand .bt b{font-family:var(--ff-display,'Bricolage Grotesque','Segoe UI',system-ui,sans-serif);font-weight:720;font-size:21px;letter-spacing:.02em;color:var(--noyer,#2C231B);white-space:nowrap}
.brand .bt span{font-weight:620;font-size:9.5px;letter-spacing:.2em;color:var(--taupe-t,#6E6353);text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--encre,#4A4137);transition:color .25s;position:relative;text-decoration:none}
.nav-links a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--chene,#B5824A);transition:width .3s;border-radius:2px}
.nav-links a:hover{color:var(--noyer,#2C231B)}
.nav-links a:not(.cta):hover::after{width:100%}
.has-sub{position:relative;display:flex;align-items:center}
.subtoggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;margin:0;padding:0;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--encre,#4A4137);transition:color .25s}
.subtoggle:hover,.has-sub.open .subtoggle,.has-sub.is-here .subtoggle{color:var(--noyer,#2C231B)}
.subtoggle .caret{width:10px;height:6px;transition:transform .25s;color:var(--chene,#B5824A)}
.has-sub.open .subtoggle .caret{transform:rotate(180deg)}
.subnav{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:248px;list-style:none;margin:0;padding:8px;background:var(--lin,#FAF7F1);border:1px solid var(--trait,#DDD2BE);border-radius:14px;box-shadow:0 18px 44px rgba(44,35,27,.16);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.has-sub:hover .subnav,.has-sub.open .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.subnav::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.subnav li{display:block;width:auto;border:0;margin:0}
.subnav a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--noyer,#2C231B);white-space:nowrap;text-decoration:none}
.subnav a::after{display:none}
.subnav a:hover{background:var(--copeau,#F2EBDD);color:var(--chene-d,#8A5F2F)}
.subnav a.strong{font-weight:620}
.subnav .sub-sep{height:1px;background:var(--trait,#DDD2BE);margin:6px 8px;padding:0}
.cta{font-weight:620;font-size:13.5px;letter-spacing:.01em;border-radius:999px;background:var(--noyer,#2C231B);color:var(--lin,#FAF7F1)!important;padding:11px 20px;white-space:nowrap;transition:background .3s,transform .2s}
.cta:hover{background:var(--chene,#B5824A);transform:translateY(-1px)}
.burger{display:none;background:none;border:1px solid var(--trait,#DDD2BE);border-radius:10px;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--noyer,#2C231B);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:26px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
body.mmea-no-anim .nav-links{transition:none!important}
@media (max-width:1024px){
.nav-links{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(242,235,221,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait,#DDD2BE);padding:10px 28px 26px;max-height:calc(100dvh - 74px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.35s}
.menu-open .nav-links{transform:none;opacity:1;pointer-events:auto}
.nav-links li{width:100%;border-bottom:1px solid var(--trait,#DDD2BE)}
.nav-links li:last-child{border:none;padding-top:18px}
.nav-links a{display:block;padding:16px 0;font-size:16px}
.nav-links a.cta{display:flex;justify-content:center;align-items:center;width:100%;margin-top:4px;padding:15px 22px;font-size:15px;border-radius:999px}
.has-sub{display:block;width:100%;align-items:stretch}
.subtoggle{display:flex;width:100%;justify-content:space-between;align-items:center;padding:16px 0;font-size:16px;color:var(--noyer,#2C231B)}
.subnav{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;background:transparent;border:0;box-shadow:none;border-radius:0;padding:0 0 10px 14px;display:none}
.has-sub.open .subnav{display:block;transform:none;left:auto;top:auto}
.subnav::before{display:none}
.subnav li{border:0;width:auto}
.subnav a{padding:12px 0;font-size:15px}
.subnav .sub-sep{margin:6px 0}
.burger{display:block}
}

/* ============================================================
   CORRECTIFS
   ============================================================ */

/* Le bandeau est en position:fixed : connecté, la barre d'outils
   WordPress passait par-dessus le menu. */
.admin-bar #top{top:32px}
@media (max-width:782px){ .admin-bar #top{top:46px} }

/* Fonds : dans la charte, le fond de page est le BEIGE (--copeau) et
   ce sont les sections qui repassent en crème (--lin). Les pages
   savoir-faire et projet n'avaient aucune alternance : tout restait
   beige. On rétablit la respiration crème / beige. */
.pfhero{background:linear-gradient(180deg,var(--copeau),var(--lin));border-bottom:1px solid var(--trait)}
/* Fiche savoir-faire (1.21.0) : quand la page a un texte détaillé, celui-ci
   vit dans sa propre bande crème (.sf-body). L'en-tête reste alors beige,
   sinon les deux blocs auraient le même fond de part et d'autre du filet —
   une séparation qui se voit sans rien séparer. Sans texte détaillé,
   l'en-tête garde son dégradé d'origine : la bande suivante est beige. */
.pfhero.pfhero--beige{background:linear-gradient(180deg,var(--copeau-d),var(--copeau))}
.sf-body{background:var(--lin);border-bottom:1px solid var(--trait)}

/* L'icône du métier, en tête de sa page : la carte de l'accueil n'en
   porte plus, elle se lit ici, en pastille au-dessus du surtitre. */
.pfhero .sf-ic{width:58px;height:58px;border-radius:15px;background:var(--lin);
  border:1px solid var(--trait);display:flex;align-items:center;justify-content:center;
  margin-bottom:22px}
.pfhero .sf-ic svg{width:33px;height:33px}
.pfhero .sf-ic .icon{stroke:var(--noyer);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pfhero .sf-ic .acc{stroke:var(--chene)}
.pfhero .sf-ic .draw{stroke-dasharray:none;stroke-dashoffset:0}
.js .pfhero .sf-ic .draw{stroke-dasharray:1;stroke-dashoffset:1;
  animation:drawIn 1.1s ease forwards;animation-delay:calc(.35s + var(--i,0)*.1s)}
.sf-autres{background:var(--copeau)}
.proj-body{background:var(--lin);border-bottom:1px solid var(--trait)}

/* Galerie d'une page projet */
.proj-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:36px}
.proj-gal figure{margin:0;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;background:var(--copeau)}
.proj-gal img{width:100%;height:auto;display:block}
.proj-gal figcaption{padding:12px 16px;font-size:13px;color:var(--taupe-t)}
.proj-video{position:relative;aspect-ratio:16/9;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;background:#000;margin-top:20px}
.proj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Page 404 (reprise de la charte du site statique) */
.e404{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px;background:linear-gradient(180deg,var(--copeau),var(--lin))}
.e404 .inner{max-width:560px}
.e404 .mark{width:96px;height:96px;margin:0 auto 30px;color:var(--chene)}
.e404 .code{font-family:var(--ff-display);font-weight:720;font-size:clamp(3.4rem,12vw,6rem);line-height:1;color:var(--noyer);letter-spacing:-.03em}
.e404 .code em{font-style:normal;color:var(--chene)}
.e404 h1{font-family:var(--ff-display);font-weight:620;font-size:clamp(1.4rem,3.4vw,1.9rem);margin:14px 0 12px;color:var(--noyer)}
.e404 p{color:var(--encre);margin-bottom:30px}
.e404 .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Visionneuse — vidéo invisible.
   .lb-video a une largeur min(1100px, 100%, …) mais .lb-media, simple
   élément flex, n'avait pas de largeur définie : le « 100% » se résolvait
   sur une largeur de contenu encore inconnue, donc à zéro. L'iframe était
   bien dans le DOM, mais large de 0 pixel (les photos, elles, ont une
   largeur intrinsèque et passaient). On donne une largeur ferme au parent. */
.lb-media{width:100%}
.lb-video{margin:0 auto}

/* Pages secteurs — le fond.
   Leur feuille d'origine commence par body{background:var(--lin)} : le fond
   de ces pages est le CRÈME, et ce sont .xp / .zone / .cta-sect qui posent le
   beige. En les portant j'étais parti de .crumb et j'avais sauté cette ligne :
   le beige du body de la charte l'emportait, et tout devenait beige.
   On rétablit le fond crème sur le conteneur des pages secteurs. */
.sec-page{background:var(--lin)}

/* Le bandeau doit rester au-dessus, sans exception.
   header{position:fixed;z-index:50} (plus haut) visait le bandeau, mais
   frappait TOUT élément <header> : un <header class="shero"> se retrouvait
   au même z-index que le menu et, à égalité, l'ordre du DOM le faisait
   passer devant. On restreint la règle au vrai bandeau. */
header:not(#top){position:static;z-index:auto}
#top{z-index:60}

/* ============================================================
   PAGES D'INFORMATIONS (mentions légales, protection des données)
   CSS repris de leurs pages d'origine, cloisonné sous .infos-page.
   La numérotation des sections est faite par compteur CSS : le
   contenu reste du HTML simple, modifiable dans l'éditeur.
   ============================================================ */
.infos-page{background:var(--copeau)}
.infos-main{max-width:820px;margin:0 auto;padding:150px 28px 90px}
.infos-main h1{font-family:var(--ff-display);font-weight:720;line-height:1.08;letter-spacing:-.015em;font-size:clamp(2.3rem,5.5vw,3.6rem);color:var(--noyer)}
.infos-main h1 em{font-style:normal;color:var(--chene)}
.infos-main .meta{margin-top:18px;font-weight:620;font-size:12px;letter-spacing:.06em;color:var(--taupe-t)}
.infos-main .rule{height:1px;background:var(--trait);margin:46px 0} /* remplacée plus bas (fil rouge) */
.infos-body{counter-reset:mmea-sec}
.infos-body h2{counter-increment:mmea-sec;font-family:var(--ff-display);font-weight:620;font-size:1.5rem;margin:46px 0 14px;line-height:1.22;color:var(--noyer);display:flex;align-items:baseline;gap:14px}
.infos-body h2::before{content:counter(mmea-sec);font-family:var(--ff-display);font-weight:720;font-size:13px;color:var(--lin);background:var(--noyer);border-radius:8px;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:none;align-self:center}
.infos-body h3{font-family:var(--ff-body);font-weight:700;font-size:1.04rem;margin:26px 0 8px;color:var(--noyer)}
.infos-body p{color:var(--encre);margin-bottom:14px;max-width:68ch}
.infos-body p strong,.infos-body address strong{color:var(--noyer);font-weight:700}
.infos-body sup{font-size:.7em}
.infos-body a{color:var(--chene-t);font-weight:620;border-bottom:1.5px solid var(--trait);transition:.25s}
.infos-body a:hover{color:var(--chene-d);border-color:var(--chene)}
.infos-body address{font-style:normal;color:var(--encre);background:var(--lin);border:1px solid var(--trait);border-left:3px solid var(--chene);border-radius:var(--r);padding:20px 24px;margin:18px 0 14px;line-height:1.85}
.infos-body ul{list-style:none;margin:4px 0 14px}
.infos-body ul li{padding-left:24px;position:relative;margin-bottom:9px;max-width:66ch;color:var(--encre)}
.infos-body ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;border:1.4px solid var(--chene);transform:rotate(45deg)}
.infos-body .callout{background:var(--noyer);color:var(--lin);border-radius:var(--r);padding:26px 30px;margin:22px 0 8px}
.infos-body .callout p{color:#E7DCC8;margin-bottom:0;max-width:66ch}
@media (max-width:560px){.infos-main{padding-top:120px}.infos-body h2{gap:10px}}

/* ============================================================
   ALTERNANCE DES FONDS (1.9.0)
   ------------------------------------------------------------
   Dans la charte, le fond de page est le BEIGE (--copeau) et ce
   sont les sections qui repassent en crème (--lin) ou en beige
   soutenu (--copeau-d). Trois zones n'avaient aucun fond déclaré
   et retombaient donc toutes sur le beige du body : l'accueil
   (stats → savoir-faire), la fin du portfolio (appel à devis →
   maillage) et le hub des secteurs (toutes les régions).
   On rétablit l'alternance, sans jamais poser deux fonds
   identiques côte à côte.
   ============================================================ */

/* --- ACCUEIL ---
   .stats (beige) était suivi de #expertises (beige) : 170 px de
   vide sans rupture de couleur. La section savoir-faire devient
   une vraie bande crème, et ses cartes passent en beige pour
   rester lisibles dessus (même principe que .real / .proj). */
.stats{padding-bottom:48px}
#expertises{background:var(--lin);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding-top:88px}
#expertises .card,#expertises .mat div{background:var(--copeau)}
#expertises .card .ic,#expertises .card .ref{background:var(--copeau-d)}
#expertises .card .card-img{background:var(--copeau-d)}

/* --- PORTFOLIO & SAVOIR-FAIRE ---
   .cta-wrap et le maillage de fin n'avaient pas de fond : tout le
   bas de page était d'un seul beige, jusqu'au pied de page inclus. */
.cta-wrap{background:var(--lin);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.sf-autres,.xp-sect{background:var(--copeau-d)}

/* Fiche savoir-faire : .sf-body (crème) était suivi de .real (crème).
   Les réalisations passent en beige, leurs vignettes en crème. */
.single-mmea_savoir_faire .real{background:var(--copeau)}
.single-mmea_savoir_faire .real .proj{background:var(--lin)}

/* --- SECTEURS ---
   Hub : chaque région portait .xp (beige) — toutes identiques.
   On alterne crème / beige d'une région à l'autre ; les pastilles
   des régions crème passent en beige pour rester visibles.
   Le compteur est sûr ici : sous <main>, les seules sections sont
   les régions puis .cta-sect (qui n'a pas la classe .xp). */
body.post-type-archive-mmea_secteur .sec-page main .xp:nth-of-type(even){background:var(--lin)}
body.post-type-archive-mmea_secteur .sec-page main .xp:nth-of-type(even) a{background:var(--copeau)}

/* Fiche secteur : .cta-sect et .zone tombaient en beige après un .xp
   beige. Sur ces pages les sections sont conditionnelles (intro et
   voisins peuvent manquer) : on raisonne donc par voisinage réel,
   pas par compteur. */
.sec-page .cta-sect{background:var(--copeau-d)}
.sec-page .xp + .zone{background:var(--lin)}

/* --- Mode sombre : on réaffirme les mêmes fonds ---
   Le bloc ANTI-DARK-MODE plus haut impose .card/.real/… en !important ;
   sans ce rappel, l'alternance sautait pour les visiteurs en thème sombre. */
@media (prefers-color-scheme: dark){
  #expertises{background:var(--lin)!important}
  #expertises .card,#expertises .mat div{background:var(--copeau)!important}
  #expertises .card .ic,#expertises .card .ref{background:var(--copeau-d)!important}
  #expertises .card .card-img{background:var(--copeau-d)!important}
  .cta-wrap{background:var(--lin)!important}
  .sf-autres,.xp-sect{background:var(--copeau-d)!important}
  .single-mmea_savoir_faire .real{background:var(--copeau)!important}
  .single-mmea_savoir_faire .real .proj{background:var(--lin)!important}
  body.post-type-archive-mmea_secteur .sec-page main .xp:nth-of-type(even){background:var(--lin)!important}
  body.post-type-archive-mmea_secteur .sec-page main .xp:nth-of-type(even) a{background:var(--copeau)!important}
  .sec-page .cta-sect{background:var(--copeau-d)!important}
  .sec-page .xp + .zone{background:var(--lin)!important}
}

/* ============================================================
   PAGES PILOTES (1.10.0)
   Le grand titre des archives /realisations/ et /services/ était
   posé en style « inline » ; il vient maintenant du titre de la
   page pilote, donc la mise en forme passe en CSS.
   (Le em → chêne est déjà global, voir « h2 em,h1 em » plus haut.)
   ============================================================ */
.pfhero .pf-h1{font-family:var(--ff-display);font-weight:720;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.02em;line-height:1.05;color:var(--noyer)}

/* Contenu libre inséré sous l'en-tête d'une archive.
   Sans l'extension « MMEA — Blocs », ce conteneur reste neutre :
   le texte s'affiche quand même, simplement sans la grille. */
.mmb-page--incruste{margin:0 auto}

/* Maillage : titre et sous-titre viennent de la page pilote (1.11.0),
   la mise en forme quitte donc le style « inline ». */
.xp-h2{font-family:var(--ff-display);font-weight:720;font-size:clamp(1.5rem,3vw,2rem);color:var(--noyer);margin-bottom:6px}
.xp-sub{color:var(--taupe-t);margin-bottom:18px}

/* ============================================================
   LE FIL ROUGE (1.16.0 · complété en 1.17.0)
   ------------------------------------------------------------
   Le rouge de la marque devient un TRAIT qui court sur tout le
   site : barre de lecture, tiret des petits libellés, soulignés
   de la navigation, boutons, cartes, formulaire, filet du pied
   de page. Le chêne reste la couleur de la matière (titres,
   icônes, fonds) ; le rouge est réservé aux lignes — jamais un
   aplat, sauf le nœud « devis signé » de la section Processus.

   ► La couleur se règle dans « Contenu du site → Fil rouge
     (couleur) » : le thème réécrit --rouge (et --rouge-halo)
     dans un petit style en ligne. Les valeurs ci-dessous sont
     le rouge d'origine, utilisé tant que rien n'est réglé.

   ► 1.19.0 — le remplissage au survol est réservé à ce qui se
     clique : la marque, la navigation, les boutons, les cartes
     et les vignettes de réalisations. Les traits qui ne mènent
     nulle part (surtitres, filet du pied, règles des pages
     d'informations) ne réagissent plus au passage de la
     souris : ils se dessinent une fois, puis restent posés.
     Les surtitres reposent aux deux tiers de leur piste
     (--fil-titre), les longs filets au 40 % d'origine.

   ► 1.17.0 — au survol, chaque segment se complète jusqu'au
     bout de sa piste sur les éléments cliquables. Et la frise
     du Processus porte désormais les
     règlements : trois repères sous le fil, liés à
     l'avancement (signature, fabrication, réception).

   ► Motif commun « piste + segment » : une piste beige
     (--trait) sur laquelle le segment rouge SE DESSINE — au
     chargement pour les éléments toujours visibles, à l'entrée
     à l'écran pour les sections [data-io]. Sans JavaScript (et
     dans l'éditeur), le segment est simplement déjà dessiné :
     mêmes règles de base, aucune rupture.
   ============================================================ */
:root{
  --rouge:#DA291C;                       /* le rouge MORET — réglable dans l'admin */
  --rouge-halo:rgba(218,41,28,.16);      /* halo des champs de formulaire (suit --rouge) */
  --transition-ligne:width .45s cubic-bezier(.65,0,.35,1);
  --fil-titre:66%;                       /* les surtitres reposent aux 2/3 de leur piste */
}

/* — Accessibilité : le focus clavier reprend le fil rouge — */
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
.proj:focus-visible{outline-color:var(--rouge)}

/* ------------------------------------------------------------
   1. BARRE DE LECTURE
   Une piste discrète sur toute la largeur, un remplissage rouge
   qui avance avec le défilement (rempli par le script du thème).
   ------------------------------------------------------------ */
.fil-lecture{position:fixed;top:0;left:0;right:0;height:3px;background:var(--copeau-d);z-index:70;pointer-events:none}
.fil-lecture b{display:block;height:100%;width:0;background:var(--rouge)}
.admin-bar .fil-lecture{top:32px}
@media (max-width:782px){.admin-bar .fil-lecture{top:46px}}

/* ------------------------------------------------------------
   2. LA MARQUE
   Sous « MORET », la piste et son segment rouge — dessiné au
   chargement, comme un trait de crayon.
   ------------------------------------------------------------ */
.brand .bt .trait-marque{display:block;width:100%;height:3px;margin:4px 0 3px;
  background-color:var(--trait);
  background-image:linear-gradient(var(--rouge),var(--rouge));
  background-repeat:no-repeat;background-size:40% 100%;background-position:left center;
  transition:background-size .45s cubic-bezier(.65,0,.35,1)}
.brand:hover .bt .trait-marque{background-size:100% 100%}
.js .brand .bt .trait-marque{animation:mmea-trait-se-dessine .9s cubic-bezier(.65,0,.35,1) .3s backwards}
@keyframes mmea-trait-se-dessine{from{background-size:0 100%}to{background-size:40% 100%}}

/* ------------------------------------------------------------
   3. NAVIGATION
   Survol : le souligné rouge part de la gauche et se complète.
   Page ouverte : un tiret rouge court et fixe (aria-current).
   ------------------------------------------------------------ */
.nav-links a:not(.cta)::after{background:var(--rouge)}
.nav-links a[aria-current="page"]:not(.cta)::before{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:22px;background:var(--rouge);border-radius:2px}
/* Élément courant du sous-menu : un court segment rouge centré à gauche.
   On neutralise à la fois le tiret hérité des liens de 1er niveau (::before)
   et l'ancienne barre pleine (box-shadow), qui formaient un « crochet ». */
.subnav a[aria-current="page"]{box-shadow:none;position:relative;color:var(--noyer)}
.subnav a[aria-current="page"]:not(.cta)::before{content:none}
.subnav a[aria-current="page"]::after{
  content:"";display:block;position:absolute;left:6px;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;background:var(--rouge)}
/* Le remplissage au survol appartient aux liens de 1er niveau. Dans un
   sous-menu, sa règle (plus spécifique) attrapait le repère de la page
   courante et l'étirait sur toute la carte — « Nos réalisations » virait
   au pavé rouge. On le fige donc à sa largeur de repère (1.20.0). */
.nav-links .subnav a::after,
.nav-links .subnav a:hover::after,
.nav-links .subnav a:focus-visible::after{width:3px}

/* ------------------------------------------------------------
   4. PETITS LIBELLÉS (.eyebrow) — partout sur le site
   Le tiret chêne devient la piste du fil rouge : le segment se
   dessine à l'entrée à l'écran (sections [data-io]) ou au
   chargement (hero, en-têtes de pages), puis reste posé aux
   deux tiers de sa piste (--fil-titre).

   Un surtitre n'est pas cliquable : il ne se remplit donc PAS
   au survol — le geste « la ligne se complète » est réservé
   aux éléments qui mènent quelque part (marque, navigation,
   boutons, cartes, vignettes). La proportion se règle en un
   seul endroit, --fil-titre (50 % / 66 % / 75 %).
   ------------------------------------------------------------ */
.eyebrow::before{width:60px;height:3px;flex:none;
  background-color:var(--trait);
  background-image:linear-gradient(var(--rouge),var(--rouge));
  background-repeat:no-repeat;background-size:var(--fil-titre) 100%;background-position:left center}
.js .eyebrow::before{animation:mmea-titre-se-dessine .9s cubic-bezier(.65,0,.35,1) .45s backwards}
.js .io .eyebrow::before{animation:none;background-size:0 100%;transition:background-size .8s cubic-bezier(.65,0,.35,1) .15s}
.js .io.in-view .eyebrow::before{background-size:var(--fil-titre) 100%}
@keyframes mmea-titre-se-dessine{from{background-size:0 100%}to{background-size:var(--fil-titre) 100%}}

/* ------------------------------------------------------------
   5. BOUTONS (pastilles de la charte + boutons des blocs)
   Au repos : un petit tiret rouge sous le libellé — la ligne
   « commencée ». Au survol : elle se complète, sans toucher
   les arrondis.
   ------------------------------------------------------------ */
.btn,.cform button,
.wp-block-button.mmb-btn .wp-block-button__link,
.wp-block-button.mmb-btn-ghost .wp-block-button__link{position:relative;overflow:hidden}
.btn::after,.cform button::after,
.wp-block-button.mmb-btn .wp-block-button__link::after,
.wp-block-button.mmb-btn-ghost .wp-block-button__link::after{
  content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  height:3px;width:22px;border-radius:2px;background:var(--rouge);
  transition:var(--transition-ligne)}
.btn:hover::after,.btn:focus-visible::after,.cform button:hover::after,.cform button:focus-visible::after,
.wp-block-button.mmb-btn .wp-block-button__link:hover::after,
.wp-block-button.mmb-btn-ghost .wp-block-button__link:hover::after{width:calc(100% - 48px)}

/* ------------------------------------------------------------
   6. CARTES & PROJETS
   Savoir-faire : la ligne du survol passe au rouge.
   Réalisations : un trait rouge balaie le haut de la légende.
   ------------------------------------------------------------ */
.card::before{background:var(--rouge)}
.proj figcaption{position:relative}
.proj figcaption::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--rouge);transition:var(--transition-ligne)}
.proj:hover figcaption::after,.proj:focus-visible figcaption::after{width:100%}

/* ------------------------------------------------------------
   7. FORMULAIRE & LIENS SOULIGNÉS
   Le champ actif et les soulignés de survol suivent le fil.
   ------------------------------------------------------------ */
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--rouge);box-shadow:0 0 0 3px var(--rouge-halo)}
.maplink:hover{border-color:var(--rouge)}
.links a:hover{border-color:var(--rouge)}
.infos-body a:hover{border-color:var(--rouge)}
.foot .legal a:hover{box-shadow:0 2px 0 var(--rouge)}
.cform .consent a:hover{border-color:var(--rouge)}

/* ------------------------------------------------------------
   8. PIED DE PAGE
   Le filet : piste sur toute la largeur, segment rouge dessiné
   quand le pied de page entre à l'écran.
   ------------------------------------------------------------ */
footer .filet-pied{height:3px;margin-bottom:30px;transition:background-size .5s cubic-bezier(.65,0,.35,1);
  background-color:var(--trait);
  background-image:linear-gradient(var(--rouge),var(--rouge));
  background-repeat:no-repeat;background-size:40% 100%;background-position:left center}
.js footer .filet-pied{background-size:0 100%;transition:background-size 1s cubic-bezier(.65,0,.35,1) .2s}
.js footer.in-view .filet-pied{background-size:40% 100%}
/* Le pied de page n'est pas un lien : le filet se dessine une fois
   puis reste posé — aucun remplissage au survol (1.19.0). */

/* Pages d'informations : le séparateur devient une piste du fil
   (même motif — dessiné au chargement, ces pages n'ont pas d'observateur). */
/* La règle garde 3 px visibles dans une boîte de 15 px (l'aération du
   séparateur) : deux couches de fond — la piste (pleine largeur) et le
   segment. Séparateur, donc non cliquable : pas de survol (1.19.0). */
.infos-main .rule{height:15px;margin:40px 0;
  background-image:linear-gradient(var(--rouge),var(--rouge)),linear-gradient(var(--trait),var(--trait));
  background-repeat:no-repeat;background-position:left center;
  background-size:40% 3px,100% 3px}
.js .infos-main .rule{animation:mmea-regle-se-dessine 1s cubic-bezier(.65,0,.35,1) .5s backwards}
@keyframes mmea-regle-se-dessine{from{background-size:0 3px,100% 3px}to{background-size:40% 3px,100% 3px}}

/* ------------------------------------------------------------
   9. SECTION « LE PROCESSUS » (le fil rouge du projet)
   La frise : pointillés rouges (les décisions, prises avec
   vous) jusqu'au nœud « devis signé », puis trait plein
   (l'atelier tient le fil). Le nœud est le seul aplat rouge
   du site — l'assemblage des deux parties.
   ------------------------------------------------------------ */
.parcours{--parc-bg:var(--copeau-d);
  /* Les points d'ancrage de la frise, en un seul endroit (1.22.0).
     L'étape d'atelier ayant été retirée, la frise se lit en trois temps
     égaux : le nœud au tiers, puis les deux règlements qui suivent se
     partagent exactement le reste (66,5 % et 100 %). Trois segments de
     même longueur — plus aucun trou ni resserrement. */
  --pivot:33%;--jal2:66.5%;
  background:var(--parc-bg);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}

/* — La frise — */
.fil-projet{position:relative;height:116px;margin:6px 0 34px}
.fil-projet .fil-piste,.fil-projet .fil-avant,.fil-projet .fil-apres{position:absolute;top:62px;height:3px}
.fil-projet .fil-piste{left:0;right:0;background:var(--trait)}
.fil-projet .fil-avant{left:0;width:var(--pivot);
  background:repeating-linear-gradient(90deg,var(--rouge) 0 10px,transparent 10px 18px)}
.fil-projet .fil-apres{left:var(--pivot);width:calc(100% - var(--pivot));background:var(--rouge)}
.fil-projet .fil-noeud{position:absolute;left:var(--pivot);top:62px;transform:translate(-50%,-50%);
  background:var(--parc-bg);padding:0 12px;line-height:0}
.fil-projet .fil-noeud .bowtie{width:22px;height:15px;color:var(--rouge)}
.fil-projet .fil-pivot{position:absolute;left:var(--pivot);top:0;transform:translateX(-50%);
  text-align:center;white-space:nowrap}
.fil-projet .fil-pivot b{display:block;font-family:var(--ff-display);font-weight:620;font-size:15px;color:var(--noyer)}
.fil-projet .fil-pivot small{display:block;margin-top:2px;font-weight:620;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chene-t)}

/* Dessin à l'entrée à l'écran (états finaux sans JS / dans l'éditeur) */
.js .parcours .fil-avant{width:0;transition:width .9s cubic-bezier(.65,0,.35,1) .2s}
.js .parcours.in-view .fil-avant{width:var(--pivot)}
.js .parcours .fil-apres{width:0;transition:width 1s cubic-bezier(.65,0,.35,1) 1.3s}
.js .parcours.in-view .fil-apres{width:calc(100% - var(--pivot))}
.js .parcours .fil-noeud .bowtie{transform:scale(0);transform-origin:center;transition:transform .5s cubic-bezier(.3,1.6,.4,1) 1.05s}
.js .parcours.in-view .fil-noeud .bowtie{transform:scale(1)}
.js .parcours .fil-pivot{opacity:0;transform:translateX(-50%) translateY(8px);transition:opacity .6s ease 1.15s,transform .6s ease 1.15s}
.js .parcours.in-view .fil-pivot{opacity:1;transform:translateX(-50%)}

/* — Les règlements suivent le fil : trois repères sous la ligne —
   1er acompte sous le nœud (il est versé à la signature et déclenche la
   commande des matières), 2e au cœur de la fabrication, facture finale à
   la remise (bout du fil). Les encoches apparaissent au moment où le
   trait les atteint. */
.fil-projet .fil-tick{position:absolute;top:56px;width:3px;height:15px;border-radius:2px;background:var(--rouge)}
.fil-projet .fil-tick.t2{left:var(--jal2);transform:translateX(-50%)}
.fil-projet .fil-tick.t3{left:100%;transform:translateX(-100%)}
.fil-projet .fil-jalon{position:absolute;top:80px;margin:0;line-height:1.25;white-space:nowrap;text-align:center}
.fil-projet .fil-jalon b{display:block;font-family:var(--ff-display);font-weight:640;font-size:12.5px;color:var(--noyer)}
.fil-projet .fil-jalon small{display:block;margin-top:1px;font-weight:620;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--chene-t)}
.fil-projet .fil-jalon.j1{left:var(--pivot);transform:translateX(-50%)}
.fil-projet .fil-jalon.j2{left:var(--jal2);transform:translateX(-50%)}
.fil-projet .fil-jalon.j3{left:100%;transform:translateX(-100%);text-align:right}
.js .parcours .fil-tick{opacity:0;transform:translateX(-50%) scaleY(.2);transition:opacity .35s ease,transform .35s cubic-bezier(.3,1.6,.4,1)}
.js .parcours .fil-tick.t2{transition-delay:1.7s}
.js .parcours .fil-tick.t3{transform:translateX(-100%) scaleY(.2);transition-delay:2.1s}
.js .parcours.in-view .fil-tick{opacity:1;transform:translateX(-50%) scaleY(1)}
.js .parcours.in-view .fil-tick.t3{transform:translateX(-100%) scaleY(1)}
.js .parcours .fil-jalon{opacity:0;transform:translate(-50%,6px);transition:opacity .5s ease,transform .5s ease}
.js .parcours .fil-jalon.j1{transition-delay:1.25s}
.js .parcours .fil-jalon.j2{transition-delay:1.75s}
.js .parcours .fil-jalon.j3{transform:translate(-100%,6px);transition-delay:2.15s}
.js .parcours.in-view .fil-jalon{opacity:1;transform:translateX(-50%)}
.js .parcours.in-view .fil-jalon.j3{transform:translateX(-100%)}

/* Écrans intermédiaires : cinq repères sur une frise plus étroite —
   on resserre la typographie et on rééquilibre les ancrages. */
@media (max-width:1000px){
  .parcours{--pivot:30%;--jal2:65%}
  .fil-projet .fil-jalon b{font-size:11.5px}
  .fil-projet .fil-jalon small{font-size:9.5px;letter-spacing:.06em}
  .fil-projet .fil-pivot b{font-size:14px}
}

/* — Les deux temps du projet — */
.parc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px}
.parc-col h3{font-size:1.32rem;margin-bottom:6px}
.parc-col .parc-sous{color:var(--encre);font-size:15px;margin-bottom:16px}
.parc-liste{list-style:none;margin:0;padding:0}
.parc-liste li{display:flex;align-items:baseline;gap:12px;font-weight:600;font-size:15.5px;color:var(--noyer);margin-bottom:10px}
.parc-liste li::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--rouge);flex:none;transform:translateY(-4px)}
.fil-vertical{display:none}

/* — La note de fin : le cordeau tenu — */
.parc-note{margin-top:38px;max-width:62ch;font-family:var(--ff-display);font-weight:500;font-size:1.12rem;line-height:1.45;color:var(--noyer);border-left:3px solid var(--rouge);padding-left:20px}

@media (max-width:760px){
  /* Sur téléphone, la frise horizontale ne tient pas : elle est
     redressée à la verticale (.fil-vertical), au même endroit et dans
     le même rôle — le calendrier d'abord, les deux temps du projet
     ensuite, aérés et séparés par un filet. */
  .fil-projet{display:none}
  .fil-vertical{display:block;position:relative;padding-left:30px}
  .fil-vertical::before{content:"";position:absolute;left:0;top:0;height:42px;width:3px;
    background:repeating-linear-gradient(180deg,var(--rouge) 0 9px,transparent 9px 16px)}
  .fv-noeud{position:relative;display:flex;align-items:center;gap:16px;margin-left:-30px;padding-top:42px}
  .fv-noeud .bowtie{width:22px;height:15px;color:var(--rouge);flex:none;margin-left:-9.5px}
  .fv-txt b{display:block;font-family:var(--ff-display);font-weight:620;font-size:15.5px;color:var(--noyer)}
  .fv-txt small{display:block;margin-top:3px;font-weight:620;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chene-t)}
  .fv-liste{list-style:none;position:relative;margin:6px 0 0;padding:24px 0 0}
  .fv-liste::before{content:"";position:absolute;left:-30px;top:-14px;bottom:9px;width:3px;background:var(--rouge)}
  .fv-item{position:relative;padding-bottom:24px}
  .fv-item:last-child{padding-bottom:0}
  .fv-item::before{content:"";position:absolute;left:-30px;top:9px;width:18px;height:3px;border-radius:2px;background:var(--rouge)}
  .fv-item b{display:block;font-family:var(--ff-display);font-weight:640;font-size:15px;color:var(--noyer)}
  .fv-item small{display:block;margin-top:3px;font-weight:620;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chene-t)}
    /* Les deux temps : plus de fil ni d'encoche, seulement de l'air et
     un filet de séparation — la section respire comme le reste du site. */
  .parc-grid{grid-template-columns:1fr;gap:0}
  .parc-col{padding-top:40px;margin-top:40px;border-top:1px solid var(--trait)}
  .parc-col h3{font-size:1.24rem}
  .parc-col .parc-sous{margin-bottom:0}
  .parc-liste{margin-top:22px;display:grid;gap:14px}
  .parc-liste li{margin-bottom:0}
  .parc-note{margin-top:40px}
}
/* ------------------------------------------------------------
   10. ANIMATIONS RÉDUITES : les traits sont simplement dessinés.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .js .brand .bt .trait-marque{animation:none;transition:none;background-size:40% 100%}
  .js .eyebrow::before,.js .io .eyebrow::before{animation:none;transition:none;background-size:var(--fil-titre) 100%}
  .js .infos-main .rule{animation:none;transition:none;background-size:40% 3px,100% 3px}
  .js footer .filet-pied{transition:none;background-size:40% 100%}
  .js .parcours .fil-avant{transition:none;width:var(--pivot)}
  .js .parcours .fil-apres{transition:none;width:calc(100% - var(--pivot))}
  .js .parcours .fil-noeud .bowtie{transition:none;transform:scale(1)}
  .js .parcours .fil-pivot{transition:none;opacity:1;transform:translateX(-50%)}
  .js .parcours .fil-tick{transition:none;opacity:1;transform:translateX(-50%) scaleY(1)}
  .js .parcours .fil-tick.t3{transform:translateX(-100%) scaleY(1)}
  .js .parcours .fil-jalon{transition:none;opacity:1;transform:translateX(-50%)}
  .js .parcours .fil-jalon.j3{transform:translateX(-100%)}
  .btn::after,.cform button::after,.proj figcaption::after,.card::before{transition:none}
  .fil-lecture{display:none}
}