/* =========================================================
   MADYGOOD — editorial.css — les pages éditoriales : les 3 piliers (rouge, jaune, noir), leurs 9 clusters et la page À propos (gabarit editorial.template.html).
   La couleur du pôle vient de <body>. Chargée après accueil.css ; les scènes épinglées (.fm, .gw) sont animées par js/scenes.js, le reste par js/editorial.js.
   Variables du pôle posées sur <body> : --c (couleur), --on (texte sur cette couleur), --hov (texte des boutons) ; --btn-t, --btn-bc, --btn-h (bouton de l'ouverture, si le pôle est noir).
   Tout est carré, sans ombre, sans filet horizontal ; PP Mori 200 / 400 / 600, IvyPresto Thin à 32 px minimum.
   ========================================================= */
.ed{--navh:64px}
.ed main{overflow-x:clip}
.js .p-lit .w{opacity:.16;transition:opacity .7s var(--ease)}
.js .p-lit .w.is-on{opacity:1}

/* ---------- 1. Ouverture : le rouge du pôle, le mot en grand ---------- */
.ph{
  position:relative;min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-7);
  padding:var(--sp-5) var(--gut) var(--sp-6);background:var(--c);color:var(--on);overflow:hidden;
}
.ph__bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0}
.ph__bc li + li::before{content:'›';margin:0 .7em;opacity:.7}
.ph__bc a{border-bottom:1px solid transparent}
.ph__bc a:hover{border-bottom-color:currentColor}
.ph__h{margin:0;font-weight:inherit;text-transform:none}
.ph__big{
  display:block;font-family:var(--font-display);font-weight:var(--w-thin);
  font-size:clamp(var(--bmin,88px),var(--bvw,24vw),460px);line-height:.8;text-wrap:balance;letter-spacing:-.055em;margin-left:-.04em;
  transform:translate3d(0,var(--ty,0px),0);will-change:transform;
}
.ph__sub{display:block;margin-top:var(--sp-5);font-weight:var(--w-light);font-size:clamp(24px,3.2vw,48px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;max-width:20em}
.ph__bot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end}
.ph__lead{grid-column:1 / span 6;max-width:34em;font-size:clamp(17px,1.45vw,21px);line-height:1.4;text-wrap:pretty}
.ph__cta{grid-column:8 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.ph__b{
  display:inline-flex;align-items:center;gap:14px;height:64px;padding:0 28px;
  background-color:var(--on);color:var(--btn-t,var(--paper-hi));--bc:var(--btn-bc,var(--paper-hi));--bh:var(--btn-h,var(--ink));
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:14px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
}
.ph__l{font-weight:var(--w-semi);font-size:14px;letter-spacing:var(--ls-ui);text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- 2. Définition ---------- */
.pd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding:var(--sp-10) var(--gut)}

.pd__t{grid-column:4 / -1;max-width:25em;font-weight:var(--w-light);font-size:clamp(28px,3.5vw,54px);line-height:1.14;letter-spacing:-.03em;text-wrap:pretty}

/* ---------- 3. Ce que ce n'est pas : un vrai titre ; chaque phrase est suivie, tout de suite, de son explication ; le mot se barre ---------- */
.pn{padding:var(--sp-9) var(--gut) var(--sp-10)}
.pn__h{margin-bottom:var(--sp-8);font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(52px,7.6vw,132px);line-height:.92;letter-spacing:-.05em}
.pn__l{list-style:none;display:flex;flex-direction:column;gap:var(--sp-8)}
.pn__r{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}

.pn__c{grid-column:2 / span 10}
.pn__s{font-weight:var(--w-light);font-size:clamp(30px,4vw,66px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.pn__x{margin-top:var(--sp-3);max-width:30em;font-size:var(--fs-intro);line-height:1.34;text-wrap:pretty}
.nope{
  background:linear-gradient(currentColor,currentColor) 0 58% / 0% 3px no-repeat;
  transition:background-size 1.1s var(--ease-io) .5s;
}
.pn__r.in .nope{background-size:100% 3px}

/* ---------- 4. Pourquoi c'est stratégique : une page noire ---------- */
.pw{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding:var(--sp-10) var(--gut);background:var(--ink);color:var(--paper)}

.pw__t{grid-column:4 / -1;max-width:26em;font-weight:var(--w-light);font-size:clamp(26px,3.2vw,48px);line-height:1.2;letter-spacing:-.025em;text-wrap:pretty}

/* page cluster : « Notre approche pour ce service » — la scène reste en place, l'affirmation s'allume mot à mot (js/editorial.js), sur la couleur du pilier */
.ap{position:relative;height:calc(100vh + 150vh);height:calc(100svh + 150svh);background:var(--c);color:var(--on)}
.ap__pin{
  position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-6);padding:var(--gut);
}

.ap__t{max-width:15em;font-weight:var(--w-light);font-size:clamp(36px,6.8vw,120px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.js .ap__w{opacity:.2;transition:opacity .45s var(--ease)}
.js .ap__w.is-on{opacity:1}
.ap__s{max-width:32em;font-size:var(--fs-body);line-height:1.5;opacity:var(--ap,1)}
.js .ap__s{opacity:var(--ap,0)}

/* ---------- 5. Notre approche générale : six panneaux de couleur qui défilent à l'horizontale (scène épinglée, js/scenes.js) ---------- */
.fm{position:relative;height:300vh;height:300svh;display:flex;align-items:flex-start}
.fm__text{
  flex:0 0 clamp(260px,26vw,400px);align-self:flex-start;position:sticky;top:var(--navh);
  height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);
}
.fm__pin{flex:1 1 auto;min-width:0;position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden}
.fm__view{height:100%;display:flex;align-items:center;overflow:hidden}
.fm__track{display:flex;align-items:stretch;gap:var(--gut);padding:0 var(--gut) 0 18vw;will-change:transform;transform:translate3d(var(--tx,0px),0,0)}

.pa__h{font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(40px,4.6vw,72px);line-height:.96;letter-spacing:-.04em;text-wrap:balance}
.stp{
  flex:none;width:min(78vw,520px);height:min(70vh,640px);height:min(70svh,640px);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-5);
  background:var(--pc);color:var(--pn);
}
.stp__n{font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(110px,15vw,230px);line-height:.8;letter-spacing:-.05em}
.stp__t{margin-bottom:var(--sp-3);text-transform:none;font-family:var(--font-sans);font-weight:var(--w-semi);font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em}
.stp__b p{max-width:22em;font-size:var(--fs-body);line-height:1.45}

/* ---------- 6. Ce que couvre le pilier : la liste à gauche, un visuel qui change à droite (le terme au centre de l'écran s'allume) ---------- */
.po{padding:var(--sp-10) var(--gut)}
.po__h{margin-bottom:var(--sp-8);font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(44px,6.2vw,104px);line-height:.94;letter-spacing:-.045em}
.po__h .eyebrow{display:block;margin-bottom:var(--sp-4);color:var(--graphite);font-family:var(--font-sans)}
.po__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.po__l{grid-column:1 / span 6;list-style:none;display:flex;flex-direction:column;gap:var(--sp-9);padding-block:14vh;padding-block:14svh}
.po__i{opacity:.28;transition:opacity .5s var(--ease)}
.po__i.is-on{opacity:1}
.po__t{font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(42px,5.2vw,88px);line-height:.98;letter-spacing:-.045em}
.po__d{margin-top:var(--sp-3);max-width:24em;font-size:var(--fs-intro);line-height:1.34}
.po__v{
  grid-column:8 / -1;position:sticky;top:calc(var(--navh) + 5vh);top:calc(var(--navh) + 5svh);
  height:min(74vh,calc(100vh - var(--navh) - 10vh));height:min(74svh,calc(100svh - var(--navh) - 10svh));background:var(--paper-hi);overflow:hidden;
}
.po__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--f,50% 50%);opacity:0;transition:opacity .8s var(--ease)}
.po__v img.is-on{opacity:1}
.po__mi{display:none}
.po[data-n="2"] .po__l{gap:34vh;gap:34svh;padding-block:18vh;padding-block:18svh}               /* deux termes seulement : de la place pour que chacun ait son moment */

/* ---------- 7. Nos expertises rattachées : une carte visuelle par expertise, un seul lien (image, titre, flèche) ---------- */
.pe{padding:var(--sp-10) var(--gut)}
.pe__h{margin-bottom:var(--sp-8);font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(44px,6vw,96px);line-height:.95;letter-spacing:-.045em}
.pe__l{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) var(--gut)}
.pe__l[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pe__l[data-n="3"] .pe__t{font-size:clamp(32px,3.4vw,56px)}
.pe__l[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.pe__l[data-n="4"] .pe__ph{aspect-ratio:1}
.pe__l[data-n="4"] .pe__t{font-size:clamp(30px,2.8vw,46px)}
@media (max-width:1100px){.pe__l[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pe__a{display:flex;flex-direction:column;gap:var(--sp-3);color:inherit}
.pe__a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.pe__ph{display:block;overflow:hidden;background:var(--paper-hi);aspect-ratio:4 / 3}
.pe__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--f,50% 50%);-webkit-user-drag:none}
.pe__t{margin-top:var(--sp-2);font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(38px,4.4vw,70px);line-height:1;letter-spacing:-.04em}
.pe__d{max-width:26em;font-size:var(--fs-intro);line-height:1.34}
.pe__go{align-self:flex-start;margin-top:var(--sp-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- Page cluster (une expertise d'un pilier) : l'ouverture du pilier en plus compact, puis des blocs propres à la page ---------- */
.ph--cl{min-height:calc(76vh - var(--navh));min-height:calc(76svh - var(--navh))}

/* Ce que ça inclut concrètement : les termes en très grand, sans photo (la galerie qui suit a les images) ; le terme au centre de l'écran s'allume */
.inc{padding:var(--sp-10) var(--gut)}

.inc__l{list-style:none;display:flex;flex-direction:column;gap:var(--sp-8)}
.inc__i{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);transition:opacity .5s var(--ease)}
.js .inc__i{opacity:.28}
.js .inc__i.is-on{opacity:1}

.inc__t{grid-column:3 / -1;font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(44px,var(--ts,11.5vw),210px);line-height:.9;letter-spacing:-.055em;text-wrap:balance}
.inc__d{grid-column:3 / span 6;margin-top:var(--sp-4);max-width:28em;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}

/* Visuels : la galerie épinglée du pilier (.fm), avec des photos au lieu des panneaux ; les photos restent inertes */
.fm--ph{--fh:min(62vh,560px);--fh:min(62svh,560px)}
.fm--ph .fm__track{align-items:center}
.fm--ph .fm__f{flex:none;margin:0;height:var(--fh);width:calc(var(--fh) * var(--r));background:var(--paper-hi);overflow:hidden}
.fm--ph .fm__f img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--f,50% 50%);-webkit-user-drag:none}

/* Projets associés : une carte par projet (un seul lien : image, nom, flèche) ; à deux, deux colonnes */
.rp{padding:var(--sp-10) var(--gut)}
.rp__h{margin-bottom:var(--sp-8);font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(44px,6vw,96px);line-height:.95;letter-spacing:-.045em}
.rp__l{list-style:none;display:flex;flex-direction:column;gap:var(--sp-9)}
.rp__a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end;color:inherit}
.rp__a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.rp__ph{grid-column:1 / span 4;display:block;overflow:hidden;background:var(--paper-hi);aspect-ratio:4 / 5}
.rp__ph img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.rp__b{grid-column:6 / -1;display:flex;flex-direction:column;gap:var(--sp-3)}
.rp__t{font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(48px,6.4vw,112px);line-height:.94;letter-spacing:-.05em}
.rp__d{max-width:30em;font-size:var(--fs-body);line-height:1.5;text-wrap:pretty}
.rp__ph--ph{display:flex;align-items:flex-end;padding:var(--sp-4);background:color-mix(in srgb,var(--ink) 7%,var(--paper));color:var(--graphite)}
.rp__go{align-self:flex-start;margin-top:var(--sp-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.rp__l[data-n="2"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) var(--gut)}
.rp__l[data-n="2"] .rp__a{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4)}
.rp__l[data-n="2"] .rp__ph{aspect-ratio:4 / 3}
.rp__l[data-n="2"] .rp__b{margin:0}
.rp__l[data-n="2"] .rp__t{font-size:clamp(44px,5vw,84px)}

/* Retour au pilier + l'expertise sœur : la phrase (le pilier en lien), puis une très grande bande vers la suite ; au survol, les bandes de la couleur du pilier la remplissent */
.bk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:var(--sp-10) var(--gut) var(--sp-9)}

.bk__t{grid-column:4 / -1;max-width:25em;font-weight:var(--w-light);font-size:clamp(26px,3.1vw,48px);line-height:1.16;letter-spacing:-.03em;text-wrap:pretty}
.bk__in{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.bk__big{
  grid-column:1 / -1;margin-top:var(--sp-8);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);
  min-height:clamp(320px,56vh,580px);min-height:clamp(320px,56svh,580px);padding:var(--sp-5);
  background-color:var(--paper-hi);color:var(--ink);--bc:var(--c);--bh:var(--on);
}
.bk__big:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bk__nm{font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(56px,13.2vw,240px);line-height:.88;letter-spacing:-.055em}
.bk__row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5)}
.bk__s{max-width:26em;font-size:var(--fs-body);line-height:1.5}
.bk__go{flex:none;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- 8. FAQ ---------- */
.pf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding:var(--sp-10) var(--gut)}
.pf__side{grid-column:1 / span 4}
.pf__h{font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(56px,8vw,140px);line-height:.9;letter-spacing:-.05em}
.pf__list{grid-column:6 / -1;display:flex;flex-direction:column;gap:var(--sp-3)}
.pf__i{background:var(--paper-hi)}
.pf__i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-5);font-size:clamp(18px,1.5vw,22px);line-height:1.25;letter-spacing:-.01em}
.pf__i summary::-webkit-details-marker{display:none}
.pf__i summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pf__x{position:relative;flex:none;width:18px;height:18px}
.pf__x::before,.pf__x::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .35s var(--ease)}
.pf__x::after{transform:rotate(90deg)}
.pf__i[open] .pf__x::after{transform:rotate(0)}
.pf__i p{max-width:36em;padding:0 var(--sp-5) var(--sp-5);font-size:var(--fs-body);line-height:1.5;color:var(--graphite)}

/* ---------- 9. Le diagnostic : l'habillage « ticket » du contact de l'accueil (accueil.css : .contact--ticket, .cb, .cx__*, .tk2) ---------- */
#diagnostic{margin-top:0}
/* page cluster (test) : le diagnostic prend la couleur du pilier, texte --on (le ticket reste en papier) */
.contact--c{color:var(--on)}
.contact--c .contact__bg{background:var(--c)}
.contact--c .eyebrow{color:color-mix(in srgb,var(--on) 70%,transparent)}

.contact--c .cb__q{color:var(--on)}
.contact--c .cb__sub{color:color-mix(in srgb,var(--on) 82%,transparent)}
.contact--c .cb__in{color:var(--on);caret-color:var(--on);border-bottom-color:color-mix(in srgb,var(--on) 55%,transparent)}
.contact--c .cb__in::placeholder{color:color-mix(in srgb,var(--on) 55%,transparent)}
.contact--c .cb__in:focus{border-bottom-color:var(--on)}
.contact--c .cb__tiles{border-top-color:color-mix(in srgb,var(--on) 38%,transparent)}
.contact--c .tile{color:var(--on);border-bottom-color:color-mix(in srgb,var(--on) 38%,transparent);--bc:var(--on);--bh:var(--btn-t,var(--paper-hi))}

.contact--c .tile:hover{color:var(--btn-t,var(--paper-hi))}
.contact--c .tile:has(input:checked){background-color:var(--on);color:var(--btn-t,var(--paper-hi));--bc:var(--btn-t,var(--paper-hi));--bh:var(--on)}

.contact--c .tile:has(input:focus-visible){outline-color:var(--on)}
.contact--c .cx__go,.contact--c .cx__go--send{background-color:var(--on);color:var(--btn-t,var(--paper-hi));--bc:var(--btn-bc,var(--paper-hi));--bh:var(--btn-h,var(--ink))}
.contact--c .cx__go:focus-visible{outline-color:var(--on)}
.contact--c .cx__lk{color:color-mix(in srgb,var(--on) 76%,transparent)}
.contact--c .cx__lk:hover,.contact--c .cx__lk:focus-visible{color:var(--on)}
.contact--c .cx__hint{color:var(--on)}
.contact--c .copy{color:var(--on)}
#diagnostic .contact__top h2{max-width:14em}

/* ---------- Page « À propos » : l'ouverture d'origine (papier) ---------- */
.ph--ab{background:transparent;color:var(--ink)}

/* ---------- Page « À propos » ---------- */

/* une photo de Marseille qui s'agrandit jusqu'au plein écran (js/scenes.js pose --e) */
.gw{position:relative;height:calc(100vh + 120vh);height:calc(100svh + 120svh)}
.gw__pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));height:calc(100svh - var(--navh));overflow:hidden;contain:layout paint}
.gw__img{
  --i:calc(1 - var(--e,0));
  position:absolute;margin:0;overflow:hidden;background:var(--paper-hi);
  top:calc(var(--i) * 16vh);bottom:calc(var(--i) * 16vh);left:calc(var(--i) * 24vw);right:calc(var(--i) * 24vw);
}
.gw__img img{width:100%;height:100%;object-fit:cover;object-position:var(--f,50% 50%);transform:scale(calc(1 + var(--i) * .08));-webkit-user-drag:none}

html:not(.js) .gw{--e:1}

/* notre histoire : « 2018 » en très grand, une phrase, deux photos légendées */
.ab-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;padding:var(--sp-10) var(--gut)}

.ab-h__n{grid-column:1 / span 6;grid-row:2;margin-top:var(--sp-5);color:var(--c);font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(140px,21vw,380px);line-height:.8;letter-spacing:-.06em}
.ab-h__s{grid-column:1 / span 5;grid-row:3;max-width:23em;margin-top:var(--sp-6);font-weight:var(--w-light);font-size:clamp(22px,2.1vw,32px);line-height:1.22;letter-spacing:-.025em;text-wrap:pretty}
.ab-h__f{grid-column:7 / -1;grid-row:1 / span 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);align-items:start}
.ab-h__fig{margin:0}
.ab-h__fig:nth-child(2){margin-top:var(--sp-10)}
.ab-h__ph{display:block;aspect-ratio:4 / 5;overflow:hidden;background:var(--paper-hi)}
.ab-h__ph img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.ab-h__fig figcaption{display:flex;flex-direction:column;gap:4px;margin-top:var(--sp-3)}
.ab-h__fig .eyebrow{color:var(--c)}
.ab-h__cp{max-width:22em;color:var(--graphite);font-size:12px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase}

/* la conviction : la scène de « Notre approche » des pages cluster, en noir */
.ap--ink{background:var(--ink);color:var(--paper)}

/* le fondateur : une planche beige (le papier du ticket, #D9D4CA), son nom en très grand, son portrait */
.ab-f{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-6);
  min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));padding:var(--sp-5) var(--gut) var(--sp-7);background:#D9D4CA;color:var(--ink);
}
.ab-f .eyebrow{color:var(--graphite)}

.ab-f__ph{grid-column:8 / -1;grid-row:1 / span 2;margin:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--paper-hi);align-self:start}
.ab-f__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-user-drag:none}
.ab-f__b{grid-column:1 / span 7;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:var(--sp-4)}
.ab-f__n{font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(64px,11.5vw,210px);line-height:.88;letter-spacing:-.055em}
.ab-f__n span{display:block}
.ab-f__t{max-width:26em;font-size:var(--fs-body);line-height:1.5}

/* interventions et engagements : une bande de noms qui défile avec la page, une ligne de détail */
.ab-i{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:var(--sp-9) 0 var(--sp-10);overflow:hidden}
.ab-m{grid-column:1 / -1;overflow:hidden;margin-bottom:var(--sp-7)}
.ab-m__t{
  display:flex;width:max-content;white-space:nowrap;transform:translate3d(var(--mx,0px),0,0);will-change:transform;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(64px,10vw,180px);line-height:1;letter-spacing:-.05em;
}
.ab-m__t span{display:inline-flex;align-items:center}
.ab-m__t span::after{content:'';flex:none;width:.16em;height:.16em;margin:0 .55em;background:var(--c)}

.ab-i__t{grid-column:4 / span 7;max-width:46em;color:var(--graphite);line-height:1.5}

/* les expertises : les trois pôles en tuiles de leur couleur, avec leurs pages */
.ab-x{padding:var(--sp-10) var(--gut)}

.ab-x__g{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ab-x__c{display:flex;flex-direction:column;gap:var(--sp-3);min-height:clamp(440px,40vw,620px);padding:var(--sp-5);background:var(--tc);color:var(--tn)}

.ab-x__h{margin-top:auto;font-family:var(--font-display);font-weight:var(--w-thin);text-transform:none;font-size:clamp(40px,4.2vw,72px);line-height:.96;letter-spacing:-.05em}
.ab-x__h a{color:inherit}
.ab-x__l{max-width:20em;font-size:var(--fs-body);line-height:1.4}
.ab-x__u{list-style:none;display:flex;flex-direction:column;margin-top:var(--sp-3)}
.ab-x__u a{
  display:flex;justify-content:space-between;gap:var(--sp-4);padding:.55em 0;color:inherit;font-size:var(--fs-body);line-height:1.25;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color .25s var(--ease);
}
.ab-x__u a:hover,.ab-x__u a:focus-visible{text-decoration-color:currentColor}
.ab-x__h a:focus-visible,.ab-x__u a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Pages de service (Actualités, Mentions légales) ---------- */
.sv{display:flex;flex-direction:column;align-items:flex-start;min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));padding:var(--sp-5) var(--gut) var(--sp-9)}
.sv__h{margin:var(--sp-8) 0 var(--sp-6);text-transform:none;font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(56px,10.5vw,190px);line-height:.92;letter-spacing:-.055em;text-wrap:balance}
.sv__lead{max-width:30em;margin-bottom:var(--sp-8);font-size:var(--fs-intro);line-height:1.3;text-wrap:pretty}
.sv__s{width:100%;max-width:56em;margin-bottom:var(--sp-7)}
.sv__t{margin-bottom:var(--sp-4);text-transform:none;font-family:var(--font-sans);font-weight:var(--w-semi);font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em}
.sv__s dl{display:flex;flex-direction:column;gap:var(--sp-3)}
.sv__s dl > div{display:grid;grid-template-columns:minmax(9em,14em) minmax(0,1fr);gap:var(--gut);align-items:baseline}
.sv__s dt{color:var(--graphite)}
.sv__s dd{margin:0;font-size:var(--fs-body);line-height:1.5}
.sv__tbd{display:inline-block;padding:3px 8px;background:var(--amber);color:var(--ink);font-family:var(--font-sans);font-weight:var(--w-semi);font-size:11px;letter-spacing:var(--ls-ui);text-transform:uppercase}
.sv__go{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-3)}
.sv__b{height:56px}

/* ---------- Page Contact : « Un café ? », trois portes, le formulaire de l'accueil, l'atelier, le sur-mesure ---------- */
.cp-h{display:flex;flex-direction:column;gap:var(--sp-6);min-height:calc(100vh - var(--navh));min-height:calc(100svh - var(--navh));padding:var(--sp-5) var(--gut) var(--sp-6)}
.cp-h__t{
  margin:auto 0 0 -.04em;text-transform:none;white-space:nowrap;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(120px,30vw,540px);line-height:.78;letter-spacing:-.06em;
}
.cp-h__q{color:var(--red)}
.cp-h__now{color:var(--graphite)}
.cp-h__b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end}
.cp-h__lead{grid-column:1 / span 6;max-width:30em;font-size:clamp(17px,1.45vw,21px);line-height:1.4;text-wrap:pretty}
.cp-h__cta{grid-column:8 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.cp-m{padding:var(--sp-6) 0 var(--sp-5);background:var(--ink);color:var(--paper);overflow:hidden}
.cp-m .ab-m{margin:0}
.cp-m .ab-m__t{font-size:clamp(56px,8vw,140px)}
.cp-m .ab-m__t span::after{background:var(--red)}

.cp-d{padding:var(--sp-10) var(--gut)}
.cp-d__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end;margin-bottom:var(--sp-8)}

.cp-d__t{grid-column:4 / -1;max-width:13em;font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(44px,6.4vw,112px);line-height:.94;letter-spacing:-.05em;text-wrap:balance}
.cp-d__g{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.cp-d__c{display:flex;flex-direction:column;gap:var(--sp-3);min-height:clamp(460px,42vw,640px);padding:var(--sp-5);background:var(--tc);color:var(--tn)}

.cp-d__h{margin-top:auto;text-transform:none;font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(44px,4.6vw,80px);line-height:.94;letter-spacing:-.05em}
.cp-d__l{max-width:18em;font-size:var(--fs-body);line-height:1.4}

.cp-d__go{
  display:flex;align-items:center;justify-content:space-between;gap:14px;height:56px;padding:0 20px;margin-top:var(--sp-4);
  background-color:var(--tn);color:var(--tb);--bc:var(--hc);--bh:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:13px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;
}
.cp-d__lk{align-self:flex-start;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.cp-d__go:focus-visible,.cp-d__lk:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.cp-l{
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-content:start;
  min-height:100vh;min-height:100svh;padding:var(--sp-5) var(--gut) var(--sp-8);background:var(--paper-hi);overflow:hidden;
}

.cp-l__nd{
  position:absolute;z-index:-1;right:var(--gut);top:var(--sp-8);height:min(92vh,980px);aspect-ratio:520 / 1780;max-width:44vw;pointer-events:none;
  background:center / contain no-repeat;opacity:.5;mix-blend-mode:multiply;
}
.cp-l.is-near .cp-l__nd{background-image:url(../img/ndg-dots.svg)}   /* 64 Ko : ne se charge qu'à l'approche (accueil.js) */
.cp-l__big{
  grid-column:1 / -1;margin:var(--sp-9) 0 0 -.04em;
  font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(88px,26vw,470px);line-height:.8;letter-spacing:-.06em;
}
.cp-l__b{grid-column:1 / span 7;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5);margin-top:var(--sp-8)}
.cp-l__t{max-width:26em;font-size:clamp(19px,1.7vw,26px);line-height:1.3;text-wrap:pretty}
.cp-l__s{color:var(--graphite);font-size:var(--fs-body);line-height:1.5}
.cp-l__dl{display:grid;grid-template-columns:repeat(3,auto);gap:var(--sp-6);justify-content:start}
.cp-l__dl dt{margin-bottom:var(--sp-2);color:var(--graphite)}
.cp-l__dl dd{margin:0;font-size:var(--fs-body);line-height:1.55}
.cp-l__dl a{border-bottom:1px solid transparent}
.cp-l__dl a:hover{border-bottom-color:currentColor}

.cp-s{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-7) var(--gut);padding:var(--sp-10) var(--gut);background:var(--ink);color:var(--paper)}   /* une scène noire entre l'atelier clair et les projets */

.cp-s__t{grid-column:4 / -1;max-width:15em;text-transform:none;font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(44px,6.2vw,108px);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.cp-s__l{grid-column:4 / -1;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.cp-s__i{display:flex;flex-direction:column;gap:var(--sp-3)}

.cp-s__h{text-transform:none;font-family:var(--font-sans);font-weight:var(--w-semi);font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em}
.cp-s__i p{max-width:22em;color:color-mix(in srgb,var(--paper) 78%,transparent);font-size:var(--fs-body);line-height:1.5}

.cp-r{padding:var(--sp-10) var(--gut)}
.cp-r__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end;margin-bottom:var(--sp-8)}

.cp-r__h{grid-column:4 / -1;max-width:15em;font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(34px,4.4vw,76px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.cp-r__l{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);align-items:start}
.cp-r__c:nth-child(2){margin-top:var(--sp-8)}
.cp-r__a{display:flex;flex-direction:column;gap:var(--sp-3);color:inherit}
.cp-r__a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.cp-r__ph{display:block;overflow:hidden;background:var(--paper-hi);aspect-ratio:4 / 5}
.cp-r__ph img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.cp-r__t{font-family:var(--font-display);font-weight:var(--w-thin);font-size:clamp(32px,3.2vw,56px);line-height:.96;letter-spacing:-.05em}
.cp-r__a:hover .cp-r__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* ---------- Bouton de diagnostic flottant ---------- */
.dg{
  position:fixed;z-index:60;right:var(--gut);bottom:var(--gut);display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 20px;
  background-color:var(--ink);color:var(--paper-hi);--bc:var(--red);--bh:var(--paper-hi);
  font-family:var(--font-sans);font-weight:var(--w-semi);font-size:12px;line-height:1;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.dg.is-on{opacity:1;transform:none;pointer-events:auto}
.dg.is-lt{background-color:var(--paper-hi);color:var(--ink);--bc:var(--red);--bh:var(--paper-hi)}              /* par-dessus la page noire */

/* ---------- Petits écrans ---------- */
@media (max-width:900px){
  .sv__s dl > div{display:block}
  .sv__s dt{margin-bottom:2px}
  .ph{gap:var(--sp-6)}
  .ph__lead,.ph__cta{grid-column:1 / -1}
  .ph__bot{row-gap:var(--sp-5)}
  .ph__b{white-space:normal;max-width:100%;height:auto;min-height:60px;padding:16px 22px;line-height:1.2}
  .pd,.pw,.pf{display:block}

  .pn__r{display:block}

  .fm{display:block}
  .fm__text{position:static;height:auto;display:block;padding:var(--sp-8) var(--gut) var(--sp-5)}
  .fm__pin{flex:none}
  .fm__track{padding-left:12vw}
  .stp{width:min(82vw,420px);height:min(64vh,520px);height:min(64svh,520px)}
  .po__g{display:block}
  .po__v{display:none}
  .po__l{gap:var(--sp-8);padding-block:0}
  .po__i{opacity:1}
  .po__mi{display:block;width:100%;height:auto;aspect-ratio:4 / 3;margin-top:var(--sp-4);object-fit:cover;object-position:var(--f,50% 50%)}
  .pe__l,.pe__l[data-n="3"],.pe__l[data-n="4"]{grid-template-columns:1fr}
  .pe__l[data-n="3"] .pe__t,.pe__l[data-n="4"] .pe__t{font-size:clamp(38px,4.4vw,70px)}
  .pe__l[data-n="4"] .pe__ph{aspect-ratio:4 / 3}
  .po[data-n="2"] .po__l{gap:var(--sp-8);padding-block:0}
  .inc__i{display:block}
  .js .inc__i{opacity:1}

  .inc__t{font-size:clamp(52px,16.5vw,120px)}
  .inc__d{margin-top:var(--sp-3)}
  .ap{height:calc(100vh + 130vh);height:calc(100svh + 130svh)}
  .fm--ph{--fh:min(54vh,420px);--fh:min(54svh,420px)}
  .rp__a{display:block}
  .rp__b{margin-top:var(--sp-5)}
  .rp__l[data-n="2"]{grid-template-columns:1fr}
  .rp__l[data-n="2"] .rp__a{display:flex}
  .bk{display:block}

  .bk__big{margin-top:var(--sp-6);min-height:300px}
  .bk__row{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .gw{height:calc(100vh + 90vh);height:calc(100svh + 90svh)}
  .gw__img{top:calc(var(--i) * 18vh);bottom:calc(var(--i) * 18vh);left:calc(var(--i) * 12vw);right:calc(var(--i) * 12vw)}

  .ab-h{display:block}
  .ab-h__n{margin-top:var(--sp-4);font-size:clamp(120px,40vw,260px)}
  .ab-h__f{margin-top:var(--sp-7)}
  .ab-h__fig:nth-child(2){margin-top:var(--sp-7)}
  .ab-f{display:flex;flex-direction:column}
  .ab-f__ph{order:2;align-self:stretch}
  .ab-f__b{order:3;align-self:stretch}
  .ab-i__t{grid-column:1 / -1;padding-inline:var(--gut)}

  .ab-x__g{grid-template-columns:1fr}
  .ab-x__c{min-height:420px}
  .pf__side{margin-bottom:var(--sp-6)}
  .cp-h{min-height:0;gap:var(--sp-5)}
  .cp-h__b{display:block}
  .cp-h__lead{margin-bottom:var(--sp-5)}
  .cp-d__top,.cp-s,.cp-r__top{display:block}

  .cp-s__t{margin-bottom:var(--sp-6)}
  .cp-d__g,.cp-s__l,.cp-r__l{grid-template-columns:1fr}
  .cp-s__l{gap:var(--sp-6)}
  .cp-d__c{min-height:380px}
  .cp-l{min-height:0}
  .cp-l__b{grid-column:1 / -1}
  .cp-l__nd{max-width:40vw;height:72vh;opacity:.32}
  .cp-l__dl{grid-template-columns:1fr 1fr}
  .cp-r__c:nth-child(2){margin-top:0}
  .dg{height:46px;padding:0 16px;font-size:11px}
}

/* ---------- Mouvement réduit / sans JavaScript : tout est posé ---------- */
@media (prefers-reduced-motion:reduce){
  .ph__big{transform:none}
  .fm{height:auto !important;display:block}
  .fm__text,.fm__pin{position:relative;top:0;height:auto}
  .fm__view{overflow-x:auto;height:auto}
  .fm__track{transform:none;padding-bottom:var(--sp-5)}
  .nope{background-size:100% 3px;transition:none}
  .gw{height:auto}
  .gw__pin{position:relative;top:0;height:auto}
  .gw__img{position:relative;inset:auto;aspect-ratio:16 / 9}
  .gw__img img{transform:none}

  .ab-m__t{transform:none}
  .ap{height:auto}
  .ap__pin{position:relative;top:0;height:auto;min-height:60vh}
  .js .ap__w{opacity:1;transition:none}
  .js .ap__s{opacity:1}
  .js .inc__i{opacity:1}
  .js .p-lit .w{opacity:1}
  .dg{transition:none}
}
@media print{.dg{display:none !important}.fm{height:auto !important}}