/* Mise en page : galerie de chantier. Des aplats de couleur tirés des matériaux (béton, pierre, bois, brique),
   les photos des réalisations en grand, un seul accent orange BDLV. Thème clair assumé, une seule section sombre (la méthode). */
:root{
  --ground:#edeeeb;      /* béton clair */
  --ink:#121314;
  --soft:#55595c;
  --hair:#c9ccc8;
  --orange:#e0621b;
  --orange-ink:#a33f0b;
  --night:#111314;
  --night-soft:#9aa0a4;
  /* aplats des réalisations et des expertises */
  --c-sauge:#8d9a88;
  --c-ardoise:#aebac6;
  --c-pierre:#d3cab9;
  --c-brique:#b97a5f;
  --c-beton:#c8ccc9;
  --c-argile:#c9a38b;
  --c-graphite:#3b4043;
  --c-lin:#dcd9d0;
  --f-wide:"Anton","Impact","Arial Narrow",sans-serif;
  --f-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --tilt:22deg;  /* sens du vrai logo BDLV : le carré penche vers la droite */
  /* Marge latérale ; iPhone à l'horizontale : jamais moins que l'encoche (0 sur ordinateur) */
  --gutter:max(clamp(16px,3vw,44px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--soft) var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--orange);accent-color:var(--orange-ink)}
::selection{background:var(--orange);color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h2,h3{font-weight:400;letter-spacing:-.04em;line-height:.95;text-wrap:balance}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:60;background:var(--ink);color:var(--ground);padding:.6rem 1rem;border-radius:999px}
.skip:focus{left:16px}
.pad{padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;text-transform:uppercase}

/* Boutons */
.pill{display:inline-flex;align-items:center;gap:1.4rem;font:500 .8rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.03em;padding:1.05rem 1.3rem 1.05rem 1.5rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 220ms ease,color 220ms ease,transform 140ms var(--ease)}
.pill::after{content:"";width:7px;height:7px;background:currentColor;transform:rotate(var(--tilt))}
.pill:active{transform:scale(.97)}
@media (hover:hover){.pill:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}}
.pill.solid{background:var(--orange);border-color:var(--orange);color:var(--ink)}
@media (hover:hover){.pill.solid:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}}
.round{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;color:inherit;text-decoration:none;flex:none;transition:background-color 220ms ease,color 220ms ease,transform 300ms var(--ease)}
.round svg{width:18px;height:18px}
@media (hover:hover){.round:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);transform:rotate(45deg)}}

/* Vitrine : une seule bande horizontale épinglée. L'ouverture sort par la gauche, chaque réalisation s'ouvre à son tour. */
.show{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ground)}
.track{display:flex;height:100%}
.intro{flex:none;width:50vw;display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 26px) var(--gutter) 30px;background:var(--ground)}
.intro nav ul{display:flex;justify-content:space-between;gap:1rem;list-style:none;margin:0;padding:0}
.intro nav a{display:flex;align-items:center;gap:.9rem;text-decoration:none;font-size:clamp(1rem,1.25vw,1.2rem);letter-spacing:-.01em;transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.intro nav a:active{transform:scale(.97)}
/* Libellés de Xavier plus longs : la navigation reste sur une ligne (taste §4.7). Resserrée de 1280 à 1599 px ;
   en dessous, la pastille Menu la remplace dès l'arrivée, comme au téléphone */
.intro nav a,.intro nav .lbl,.xp-top a{white-space:nowrap}
@media (min-width:1280px) and (max-width:1599px){.intro nav a{gap:.6rem;font-size:clamp(.92rem,1.1vw,1.2rem)}}
@media (min-width:861px) and (max-width:1279px){.intro nav{display:none}#menuBtn.menu-btn{opacity:1;pointer-events:auto}}
/* Le point a la couleur de ce qu'on trouve en arrivant ; au survol il devient le carré incliné du logo */
.intro nav a::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot);transition:transform 220ms cubic-bezier(.23,1,.32,1),border-radius 220ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .intro nav a:hover::before{border-radius:1px;transform:rotate(var(--tilt)) scale(1.15)}
  .intro nav a:hover .lbl > span:first-child{transform:translateY(-110%)}
  .intro nav a:hover .lbl > span + span{transform:translateY(0)}
}
/* Voile de continuité au clic sur une rubrique de l'ouverture (sous le logo et le menu) */
.veil{position:fixed;inset:0;z-index:46;pointer-events:none}
.mid{display:grid;align-content:center;gap:clamp(14px,1.6vw,24px);padding-block:clamp(20px,3vw,48px)}
.wm{width:100%;height:auto;display:block;color:var(--ink);overflow:visible}
@media (prefers-reduced-motion:no-preference){
  /* Le mot entier se dévoile du bas vers le haut, d'un seul tenant : rien ne bouge, rien ne saute */
  .js .wm{clip-path:inset(100% 0 0 0)}
  .js.ready .wm{animation:wm-in 1.1s var(--ease) .1s both}
  @keyframes wm-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
}
.tagline,.motto{font-size:clamp(1.1rem,1.6vw,1.6rem);letter-spacing:-.03em;line-height:1.2;text-align:center;text-wrap:balance;max-width:42ch;margin-inline:auto}
/* Deux rôles distincts (Impeccable typeset : tailles et graisses voisines ne portent pas deux rôles) :
   la devise est la légende du logo (petite, grise, collée au BDLV), l'accroche est l'affirmation principale, avec de l'air au-dessus */
.motto{font-size:clamp(.95rem,1.1vw,1.15rem);letter-spacing:-.01em;color:var(--soft);margin-top:calc(.7rem - clamp(14px,1.6vw,24px))}
.motto + .tagline{margin-top:clamp(.6rem,1.2vw,1.2rem)}
.foot-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem 1.4rem;border-top:2px solid var(--ink);padding-top:1.5rem}
.foot-links a{font:500 .8rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.02em;text-decoration:none}
@media (hover:hover){.foot-links a:hover{color:var(--orange-ink)}}
.card{flex:none;position:relative;width:5vw;height:100%;background:var(--c);color:var(--ink);overflow:hidden;cursor:pointer}
.card.dark{color:var(--ground)}
.card .ph{position:absolute;left:0;right:0;top:var(--y,30%);height:40%;overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .info{position:absolute;left:0;right:0;top:69%;bottom:0;padding:1rem 1.4rem 1.4rem;opacity:0;display:grid;grid-template-rows:auto 1fr;pointer-events:none}
.card .meta{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;font:500 .72rem/1.3 var(--f-sans);text-transform:uppercase;letter-spacing:.02em}
.card .meta .tag{border:1px solid currentColor;border-radius:999px;padding:.35rem .75rem}
.card .meta span:nth-child(2){text-align:center}
.card h3{align-self:center;justify-self:center;font-size:clamp(2.6rem,5.4vw,5.8rem);white-space:nowrap;padding-bottom:.4rem}
.card .round{position:absolute;right:1.4rem;bottom:1.4rem;pointer-events:auto}
.card .num{position:absolute;left:12px;bottom:12px;font:500 .72rem/1 var(--f-mono)}
.card.end{background:var(--ink);color:var(--ground);cursor:default}
.card.end .inner{position:absolute;inset:0;padding:clamp(28px,4vw,56px);display:grid;align-content:end;gap:1.6rem;min-width:36vw;opacity:0}
.card.end h3{justify-self:start;white-space:normal;font-size:clamp(2.6rem,4.6vw,5rem);max-width:10ch}
.card.end .pill{justify-self:start}
@media (hover:hover){.card.end .pill:hover{background:var(--ground);color:var(--ink);border-color:var(--ground)}}
/* Sans animation (mobile, mouvement réduit) : tout se lit à plat */
.show.flat{height:auto;overflow:visible}
.show.flat .track{height:auto}
.show.flat .card{width:60vw !important}
.show.flat .card .ph{top:3% !important;height:66% !important}
.show.flat .card .info,.show.flat .card.end .inner{opacity:1 !important}
.show.flat.scroll .track{overflow-x:auto;scroll-snap-type:x mandatory;height:100svh}
.show.flat.scroll .card{scroll-snap-align:start;height:100svh}
.show.flat.scroll .intro{min-height:100svh}
@media (max-width:860px){
  .show,.show.flat{height:auto;overflow:visible}
  .track,.show.flat .track{flex-direction:column;height:auto;overflow:visible}
  .intro{width:100%;min-height:90svh}
  .intro nav ul{justify-content:flex-start;flex-wrap:wrap;column-gap:1.6rem}
  .card,.show.flat .card{width:100% !important;height:auto;cursor:default}
  .card .ph,.show.flat .card .ph{position:relative;top:auto !important;height:auto !important;aspect-ratio:4/3}
  .card .info{position:relative;top:auto;opacity:1;padding-bottom:5.5rem}
  .card h3{justify-self:start;white-space:normal;font-size:clamp(2.4rem,11vw,4rem);padding-top:1.4rem}
  .card.end .inner{position:relative;opacity:1;min-width:0;padding-block:4rem}
}
/* Pastille menu, toujours accessible */
.menu-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 20.5px);right:var(--gutter);z-index:50;display:flex;align-items:center;gap:1.2rem;padding:1rem 1.25rem 1rem 1.6rem;border:0;border-radius:999px;background:var(--ink);color:var(--ground);font:500 .82rem/1 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:transform 140ms var(--ease)}
.menu-btn:active{transform:scale(.96)}
.menu-btn i{width:9px;height:9px;background:var(--orange);transform:rotate(var(--tilt));transition:transform 400ms var(--ease)}
.menu-btn[aria-expanded="true"] i{transform:rotate(135deg) scale(1.3)}
.menu-btn[aria-expanded="true"]{background:var(--orange);color:var(--ink)}
.menu-btn[aria-expanded="true"] i{background:var(--ink)}
.menu-btn{opacity:0;pointer-events:none;transition:opacity 300ms ease,transform 140ms var(--ease),background-color 250ms ease,color 250ms ease}
/* Sur fond sombre, la pastille passe en clair (mesuré sous elle, comme le logo) */
.menu-btn.on-dark:not([aria-expanded="true"]){background:var(--ground);color:var(--ink)}
/* Liseré de 1 px : la pastille garde sa forme quand elle est à cheval sur deux fonds (bord du cadre de l'animation, d'une photo) */
.menu-btn{box-shadow:0 0 0 1px color-mix(in srgb,var(--ground) 22%,transparent)}
.menu-btn.on-dark:not([aria-expanded="true"]){box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}
.menu-btn[aria-expanded="true"]{box-shadow:none}
.menu-btn.on{opacity:1;pointer-events:auto}

/* Petit logo animé : les lettres s'écrivent une à une, puis le carré se trace autour (repris du logo BDLV) */
.brand-fixed{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(var(--gutter) - 4.5px);z-index:50;width:64px;height:64px;display:block;color:var(--ink);text-decoration:none;opacity:0;pointer-events:none;transition:opacity 300ms ease,color 250ms ease}
.brand-fixed.light{color:#fff}
/* Sur fond uni neutre : logo blanc en mode différence, il s'inverse sur ce qu'il recouvre, lettres comprises */
.brand-fixed.blend{color:#fff;mix-blend-mode:difference}
.brand-fixed.on{opacity:1;pointer-events:auto}
.brand-fixed svg{width:100%;height:100%;display:block;overflow:visible}
/* Logo animé, fidèle au GIF d'origine : les lettres s'écrivent de gauche à droite, puis le carré se trace
   en partant du V, fait le tour et s'arrête juste sous sa pointe. Le V est dessiné : sa branche droite
   est le côté du carré, même axe, même épaisseur */
.logo-anim .wd{clip-path:inset(0 100% 0 0);clip-path:fill-box inset(0 100% 0 0)}
.logo-anim .sq{stroke-dasharray:166;stroke-dashoffset:166}
.on .logo-anim .wd,.menu.open .logo-anim .wd{animation:logo-write .9s cubic-bezier(.45,0,.55,1) forwards}
.on .logo-anim .sq,.menu.open .logo-anim .sq{animation:logo-draw 1.2s cubic-bezier(.65,0,.35,1) .95s forwards}
@keyframes logo-write{to{clip-path:fill-box inset(0 0 0 0)}}
@keyframes logo-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.logo-anim .wd{clip-path:none}.logo-anim .sq{stroke-dashoffset:0}.on .logo-anim *,.menu.open .logo-anim *,.rdv-dlg .logo-anim *{animation:none !important}}
@media (hover:hover){.brand-fixed:hover .logo-anim .sq{animation:logo-draw 1.2s cubic-bezier(.65,0,.35,1) forwards;stroke-dashoffset:166}}

/* Menu plein écran */
.menu{position:fixed;inset:0;z-index:45;background:var(--night);color:var(--ground);display:grid;grid-template-rows:1fr auto;padding:calc(env(safe-area-inset-top,0px) + 110px) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom,0px));clip-path:circle(0 at calc(100% - 70px) 48px);visibility:hidden;transition:clip-path 700ms var(--ease),visibility 0s linear 700ms}
.menu.open{clip-path:circle(150% at calc(100% - 70px) 48px);visibility:visible;transition:clip-path 800ms var(--ease),visibility 0s}
.menu .cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-content:start}
.menu nav a{display:block;font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.04em;line-height:1.08;text-decoration:none;color:var(--night-soft);transition:color 200ms ease}
@media (hover:hover){.menu nav a:hover{color:var(--ground)}}
.menu address{font-style:normal;display:grid;gap:1.2rem;font-size:.95rem;color:var(--night-soft);align-content:start}
.menu address b{color:var(--ground);font-weight:500;display:block}
/* Prendre rendez-vous dans le menu (demande de Guillaume) : l'action principale, sous l'adresse */
.menu .menu-rdv{margin-top:.4rem}
.menu .wordmark{width:min(46vw,640px);justify-self:end;color:var(--ground)}
@media (max-width:760px){.menu .cols{grid-template-columns:1fr}}

/* Métier : grand titre, liste numérotée, manifeste */
.metier{padding-block:clamp(90px,12vw,180px)}
.metier .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.metier h2{font-size:clamp(3rem,7vw,7rem);letter-spacing:-.04em}
.list{list-style:none;margin:clamp(20px,6vw,90px) 0 0;padding:0}
.list li{display:grid;grid-template-columns:3rem minmax(0,1fr);align-items:baseline;gap:1rem;padding:1rem 0 .8rem;border-bottom:1px solid var(--hair)}
.list li .mono{color:var(--orange-ink)}
.list li span:last-child{font-size:clamp(1.1rem,1.4vw,1.35rem);letter-spacing:-.015em;line-height:1.25}
.list li.group{border-bottom:0;padding:2rem 0 .2rem;display:block;font:500 .74rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.list li.group:first-child{padding-top:0}
.manifesto{margin-top:clamp(70px,10vw,150px);font-size:clamp(1.6rem,3.2vw,3rem);letter-spacing:-.03em;line-height:1.16;max-width:30ch}
.manifesto .w{color:var(--ink)}
.js .manifesto .w{color:#828682;transition:color 250ms linear}
.js .manifesto .w.on{color:var(--ink)}
.manifesto em{font-style:normal;color:var(--orange-ink)}
.metier .after{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:clamp(36px,4vw,56px)}
.metier .after{align-items:end;justify-content:space-between}
.more-text{display:grid;gap:1.1rem;color:var(--soft);max-width:60ch;font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.6}
.more-text b{color:var(--ink);font-weight:550}
@media (max-width:860px){.metier .row{grid-template-columns:1fr}}

/* Méthode : la seule section sombre, volontaire */
.method{background:var(--night);color:var(--ground);padding-block:clamp(90px,11vw,160px)}
.method .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end}
.method h2{font-size:clamp(2.4rem,4.6vw,4.8rem);max-width:15ch}
.method .head .sub{color:var(--ground);font-weight:500;font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:-.02em;margin-bottom:.7rem}
.method .head b{color:var(--ground);font-weight:600}
.method .head p{color:var(--night-soft);max-width:44ch;font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.5}
.code{font:600 .95em/1 var(--f-mono);background:var(--orange);color:var(--ink);padding:.18em .4em;border-radius:3px}
.screen{margin-top:clamp(40px,5vw,72px);position:relative;aspect-ratio:16/9;max-width:1200px;margin-inline:auto;background:#fff;border-radius:4px;overflow:hidden}
.screen img,.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 450ms var(--ease)}
/* L'animation « un code, trois documents » remplit l'écran (16:9, 3:4 au téléphone) */
.screen:has(#anim){background:var(--ground)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:700px){.screen:has(#anim){aspect-ratio:3/4}}
.screen [data-off="true"]{opacity:0}
.docs{max-width:1200px;margin:1.6rem auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #3a3f42}
.doc{all:unset;cursor:pointer;padding:1.1rem 1rem 0 0;display:grid;gap:.4rem;color:var(--night-soft);transition:color 200ms ease}
.doc b{font-weight:500;color:inherit;font-size:1.02rem}
.doc .mono{color:inherit}
@media (hover:hover){.doc:hover{color:var(--ground)}}
.doc[aria-selected="true"]{color:var(--ground);box-shadow:inset 0 2px 0 var(--orange)}
.doc:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
@media (max-width:860px){.method .head{grid-template-columns:1fr}.docs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}}

/* Expertises : panneaux de couleur empilés, en double page (repère à gauche, lecture à droite) */
.stack{position:relative}
.panel{position:sticky;top:0;min-height:100svh;background:var(--c);display:grid;grid-template-rows:1fr auto;gap:clamp(28px,4vw,56px);padding:clamp(100px,10vw,140px) var(--gutter) clamp(24px,3vw,36px)}
.panel.dark{color:var(--ground)}
.spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,110px);align-items:start}
.side{position:sticky;top:110px;display:grid;gap:clamp(14px,1.6vw,22px)}
.idx{font:500 .78rem/1 var(--f-mono);opacity:.75}
.panel .t{font-size:clamp(2.6rem,5vw,5.2rem);letter-spacing:-.04em;line-height:.95;max-width:12ch}
.lead{font-size:clamp(1.15rem,1.5vw,1.45rem);letter-spacing:-.02em;line-height:1.3;max-width:34ch;opacity:.9}
.panel .img{aspect-ratio:3/2;overflow:hidden;border-radius:3px;margin-top:clamp(6px,1vw,14px);max-width:560px}
.panel .img img{width:100%;height:100%;object-fit:cover}
.panel .img.white{background:#fff}
.panel .img.badge{aspect-ratio:auto;padding:1.4rem 1.6rem}
.panel .img.badge img{height:auto;object-fit:contain}
.text{display:grid;gap:1.1rem;font-size:clamp(1.02rem,1.1vw,1.12rem);line-height:1.68;max-width:62ch}
.text > p:first-child{font-size:1.18em;line-height:1.5;letter-spacing:-.01em}
.text p{opacity:.9}
/* Mots clés en gras, repris de l'ancien site : une seule graisse d'appui, nette sans être lourde */
.text strong,.text b{font-weight:600}
.text h3{font-size:clamp(1.25rem,1.6vw,1.55rem);letter-spacing:-.025em;line-height:1.2;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.panel .engage{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.8rem}
.panel .engage li{padding-left:1.4rem;position:relative;opacity:.92}
.panel .engage li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border:1.5px solid currentColor;transform:rotate(var(--tilt))}
.panel .engage b{font-weight:600}
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid currentColor;opacity:.9}
.steps span{padding-top:.7rem;font:500 .7rem/1.3 var(--f-sans);text-transform:uppercase;letter-spacing:.02em;display:flex;gap:.6rem}
.steps span b{font-family:var(--f-mono);font-weight:500}
.steps span.here{font-weight:700;box-shadow:inset 0 2px 0 currentColor}
@media (max-width:980px){.spread{grid-template-columns:1fr}.side{position:static}}
@media (max-width:860px){.panel{position:relative;min-height:0;top:auto !important}.steps{display:none}}

/* Parcours */
.path-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem clamp(20px,4vw,64px);margin-top:1.8rem;color:var(--soft);font-size:clamp(1.08rem,1.3vw,1.28rem);line-height:1.55;max-width:1200px}
@media (max-width:760px){.path-intro{grid-template-columns:1fr}}
.path{padding-block:clamp(90px,11vw,160px)}
/* Même fond que le bloc du dessus : une seule marge entre les deux, comme sous un changement de fond (et comme « Toutes nos références ») */
.path + .xgrid{padding-top:0}
.path h2{font-size:clamp(3rem,7vw,7rem)}
.path .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(40px,5vw,72px);counter-reset:s}
.path h3{font-size:clamp(1.5rem,2vw,2rem);letter-spacing:-.03em;padding-bottom:.9rem;border-bottom:1px solid var(--ink)}
.path ol{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
.path li{counter-increment:s;display:grid;grid-template-columns:2.2rem minmax(0,1fr);font-size:1.04rem;line-height:1.45;color:var(--soft)}
.path li::before{content:counter(s,decimal-leading-zero);font:500 .74rem/1.9 var(--f-mono);color:var(--orange-ink)}
.path li b{color:var(--ink);font-weight:500}
@media (max-width:980px){.path .grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.6rem}}
@media (max-width:560px){.path .grid{grid-template-columns:1fr}}

/* Toutes les réalisations */
.index{padding-bottom:clamp(90px,11vw,160px)}
.index h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.rows{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--ink)}
.rows a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) 24px;gap:1rem;align-items:center;padding:1.25rem 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding 300ms var(--ease),background-color 200ms ease}
.rows a span:first-child{font:500 .74rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.03em;color:var(--soft)}
.rows a b{font-weight:450;font-size:clamp(1.2rem,1.8vw,1.7rem);letter-spacing:-.02em}
.rows a span:nth-child(3){color:var(--soft)}
.rows svg{width:16px;height:16px}
@media (hover:hover){.rows a:hover{padding-inline:.8rem;background:var(--c,#dfe1de)}}
.peek{position:fixed;z-index:30;width:260px;aspect-ratio:4/3;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity 200ms ease,transform 300ms var(--ease);border-radius:2px;overflow:hidden}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.rows a{grid-template-columns:minmax(0,1fr) 24px}.rows a span:first-child,.rows a span:nth-child(3){display:none}}

/* Contact */
.contact{background:var(--c-lin);padding-block:clamp(90px,11vw,160px)}
.contact .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px)}
.contact h2{font-size:clamp(3.4rem,8vw,8rem)}
.contact .pitch{margin-top:1.6rem;color:var(--soft);max-width:40ch;font-size:1.1rem}
.contact dl{margin:2.4rem 0 0;display:grid;gap:1.3rem}
.contact dt{font:500 .74rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.03em;color:var(--soft)}
.contact dd{margin:.4rem 0 0;font-size:1.08rem}
.copy{all:unset;cursor:pointer;margin-left:.7rem;font-size:.82rem;color:var(--soft);text-decoration:underline;text-underline-offset:.25em}
.copy:focus-visible{outline:2px solid var(--orange)}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.4rem;align-content:start}
.field{display:grid;gap:.3rem;min-width:0}
.field.full{grid-column:1 / -1}
label{font:500 .76rem/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.03em}
label .opt{text-transform:none;letter-spacing:0;color:var(--soft);font-weight:400}
input,select,textarea{font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.6rem 0;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-bottom:2px solid var(--orange-ink);padding-bottom:calc(.6rem - 1px)}
textarea{min-height:110px;resize:vertical}
.err{color:#a4251c;font-size:.86rem}
.err:empty{display:none}
.field.invalid input,.field.invalid textarea{border-bottom-color:#a4251c}
.rgpd{grid-column:1 / -1;font-size:.85rem;line-height:1.5;color:var(--soft);max-width:72ch}
.rgpd a{color:var(--ink)}
.send{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.status{font-size:.95rem}
@media (max-width:860px){.contact .grid{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}}

/* Pied de page */
footer{background:var(--night);color:var(--ground);padding:clamp(56px,7vw,96px) var(--gutter) 1.6rem}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;font-size:.92rem;color:var(--night-soft)}
.fgrid b{display:block;color:var(--ground);font-weight:500;margin-bottom:.35rem}
.fgrid a{color:inherit}
footer .wordmark{margin-top:clamp(40px,6vw,90px);color:var(--ground)}
.wm-foot{display:block;height:auto;width:min(100%,calc(34svh * 436 / 262))}
.legal{margin-top:2.4rem;border-top:1px solid #33383b}
.legal details{border-bottom:1px solid #33383b}
.legal summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;padding:1rem 0;font-weight:500}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:"+";font-weight:400;transition:transform 250ms var(--ease)}
.legal details[open] summary::after{transform:rotate(45deg)}
.legal .txt{padding-bottom:2rem;display:grid;gap:.8rem;font-size:.92rem;color:var(--night-soft);max-width:82ch}
.legal h3{font-size:1rem;letter-spacing:-.01em;line-height:1.3;color:var(--ground);margin-top:.5rem}
.legal ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.legal b{color:var(--ground);font-weight:500}
@media (max-width:860px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}.menu,.menu.open{transition:none}}

/* Pages expertise */
/* Logo, pastille Menu et liens du haut centrés sur la même ligne (44 px) ; le tracé du logo, et non sa boîte, tombe sur la marge */
.xp-top{position:absolute;inset:0 0 auto;z-index:20;display:flex;justify-content:flex-end;align-items:center;gap:clamp(1rem,3vw,3rem);padding:calc(env(safe-area-inset-top,0px) + 17.4px) calc(var(--gutter) + 150px) 0 calc(var(--gutter) + 90px)}
.xp-top a{text-decoration:none;font-size:.95rem}
.xp-top a:not(.pill)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--ink));margin-right:.6rem;vertical-align:.08em}
/* Liseré de la couleur du texte : le point reste visible quand il a la couleur de la tête de page (brique sur brique, sauge sur sauge, argile sur argile) */
.xp-top a:not(.pill)::before{box-shadow:0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
@media (max-width:860px){.xp-top{display:none}}
.xp-hero{background:var(--c);padding:clamp(120px,13vw,170px) var(--gutter) clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:end}
.xp-hero.dark{color:var(--ground)}
/* Les liens du haut prennent la couleur du texte de la tête de page : clairs sur une tête sombre (encre sur graphite : 1,8:1, illisible) */
body:has(.xp-hero.dark) .xp-top a:not(.pill){color:var(--ground)}
.crumb{font:500 .78rem/1 var(--f-mono);opacity:.75;display:flex;gap:.6rem;flex-wrap:wrap}
.crumb a{text-decoration:none}
.xp-hero h1{font-size:clamp(3rem,7.2vw,7.4rem);font-weight:400;letter-spacing:-.045em;line-height:.93;margin-top:1.2rem;max-width:11ch;text-wrap:balance}
.xp-hero .lead{margin-top:1.6rem;font-size:clamp(1.2rem,1.8vw,1.7rem);max-width:30ch}
.xp-hero .img{aspect-ratio:4/3;overflow:hidden;border-radius:3px}
.xp-hero .img img{width:100%;height:100%;object-fit:cover}
.xp-hero .img.white{background:#fff}
.xp-hero .img.badge{aspect-ratio:auto;padding:2rem}
.xp-hero .img.badge img{height:auto;object-fit:contain}
.xp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,110px);padding:clamp(64px,8vw,120px) var(--gutter)}
.toc{position:sticky;top:110px;align-self:start;display:grid;gap:.7rem}
.toc b{font:500 .74rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin-bottom:.4rem}
.toc a{text-decoration:none;color:var(--soft);font-size:1rem;line-height:1.3;padding-left:1rem;border-left:2px solid var(--hair);transition:color 200ms ease,border-color 200ms ease}
@media (hover:hover){.toc a:hover{color:var(--ink);border-color:var(--orange)}}
.xp-body .text{max-width:66ch;font-size:clamp(1.05rem,1.15vw,1.16rem)}
.xp-body .text h2{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:450;letter-spacing:-.03em;line-height:1.15;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hair);scroll-margin-top:100px}
.xp-body .engage{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.9rem}
.xp-body .engage li{padding-left:1.4rem;position:relative}
.xp-body .engage li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border:1.5px solid var(--orange-ink);transform:rotate(var(--tilt))}
.xp-cta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.others{padding:0 var(--gutter) clamp(72px,9vw,130px)}
.others h2{font-size:clamp(2.2rem,4.4vw,4.2rem);letter-spacing:-.04em}
.others .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,40px)}
.others a{background:var(--c);min-height:clamp(180px,20vw,280px);padding:1.2rem;display:grid;align-content:space-between;text-decoration:none;border-radius:3px;transition:transform 300ms var(--ease)}
.others a.dark{color:var(--ground)}
@media (hover:hover){.others a:hover{transform:translateY(-4px)}}
.others a span{font:500 .74rem/1 var(--f-mono);opacity:.75}
.others a b{font-weight:450;font-size:clamp(1.2rem,1.6vw,1.6rem);letter-spacing:-.025em;line-height:1.1}
@media (max-width:980px){.xp-hero,.xp-body{grid-template-columns:1fr}.toc{position:static}.others .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Accueil version B : panneaux courts avec lien */
.panel .text.short > p:first-child{font-size:1.12em}
.panel .text.short .pill{justify-self:start;margin-top:.6rem}
@media (hover:hover){.panel.dark .text.short .pill:hover{background:var(--ground);color:var(--ink);border-color:var(--ground)}}
.legal-links{margin-top:2rem;display:flex;gap:1.6rem;flex-wrap:wrap;font-size:.92rem}
.legal-links a{color:var(--night-soft)}

/* Accueil B : grille « Nos expertises » (6 tuiles, tailles variées) */
.xgrid{padding-block:clamp(80px,10vw,150px)}
.xgrid h2{font-size:clamp(3rem,7vw,7rem);letter-spacing:-.045em}
.xgrid-sub{margin-top:1.2rem;color:var(--soft);font-size:clamp(1.1rem,1.4vw,1.35rem);max-width:44ch}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:clamp(10px,1.2vw,16px);margin-top:clamp(36px,5vw,64px)}
.tile{position:relative;background:var(--c);color:var(--ink);text-decoration:none;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform 400ms var(--ease)}
.tile.dark{color:var(--ground)}
@media (hover:hover){.tile:hover{transform:translateY(-4px)}.tile:hover .round{background:var(--ink);color:var(--ground);border-color:var(--ink);transform:rotate(45deg)}.tile.dark:hover .round{background:var(--ground);color:var(--ink);border-color:var(--ground)}}
.tile.xl{grid-column:span 7;grid-row:span 2}
.tile.md{grid-column:span 5}
/* 7 prestations : grande tuile + 2 moyennes, puis 2 × 2 (une rangée de 4 serrait titres et étiquettes) */
.tile.sm{grid-column:span 6}
.tile-media{flex:1 1 auto;min-height:180px;overflow:hidden;position:relative}
.tile-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover){.tile:hover .tile-media img{transform:scale(1.04)}}
.tile-media.doc{background:#fff}
/* Picto sur le fond coloré (Xavier : plus de photos sur les prestations). Phosphor Light, même taille partout : même épaisseur de trait (taste §3.C, Impeccable craft-floor) */
.tile-media.picto{flex:1 1 auto;min-height:clamp(96px,8vw,130px);padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0}
.tile.xl .tile-media.picto{min-height:clamp(150px,14vw,220px)}
svg.picto{display:block;width:clamp(56px,5vw,80px);height:auto}
.mini-img.picto{aspect-ratio:auto;padding:1.1rem 1.1rem 0}
.mini-img.picto svg{width:48px}
/* Pictos animés au survol (principe de brand.dropbox.com) : le picto fait le geste de son métier, la carte garde sa couleur */
svg.picto{overflow:visible}svg.picto *{transform-box:view-box}
svg.picto .res{transform:scaleX(0);transform-origin:158px 88px;transition:transform 180ms ease-out}
svg.picto .cn,svg.picto .pl{transition:transform 260ms ease-out}
svg.picto .rc{transform-origin:128px 141.5px;transition:transform 260ms ease-out}
svg.picto .pl{transform-origin:128px 230px}
svg.picto .ln{transform-origin:90px 0}
svg.picto .st{transform-origin:128px 198px}
svg.picto .ink{transform-origin:128px 224px}
svg.picto .hm{transform-origin:50px 206px}
svg.picto .k1{transform-origin:88px 148px}svg.picto .k2{transform-origin:128px 148px}svg.picto .k3{transform-origin:168px 148px}
svg.picto .k4{transform-origin:88px 188px}svg.picto .k5{transform-origin:128px 188px}svg.picto .k6{transform-origin:168px 188px}
@keyframes p-key{40%{transform:scale(.55)}}
@keyframes p-write{from{transform:scaleX(0)}}
@keyframes p-stamp{35%{transform:translateY(-34px) rotate(-7deg)}62%{transform:translateY(4px) scaleY(.94)}80%{transform:none}}
@keyframes p-hammer{35%{transform:rotate(-24deg)}62%{transform:rotate(5deg)}78%{transform:rotate(-1.5deg)}}
@keyframes p-ink{0%,58%{transform:none}68%{transform:scaleX(1.14)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(.tile,.mini):hover .k{animation:p-key 260ms ease-out both}
  :is(.tile,.mini):hover .k2{animation-delay:60ms}:is(.tile,.mini):hover .k3{animation-delay:120ms}
  :is(.tile,.mini):hover .k4{animation-delay:180ms}:is(.tile,.mini):hover .k5{animation-delay:240ms}:is(.tile,.mini):hover .k6{animation-delay:300ms}
  :is(.tile,.mini):hover .res{transform:scaleX(1);transition:transform 420ms var(--ease) 380ms}
  :is(.tile,.mini):hover .ln{animation:p-write 380ms var(--ease) both}
  :is(.tile,.mini):hover .ln2{animation-delay:150ms}
  :is(.tile,.mini):hover .st{animation:p-stamp 650ms ease-in-out both}
  :is(.tile,.mini):hover .ink{animation:p-ink 650ms ease-out both}
  :is(.tile,.mini):hover .hm{animation:p-hammer 620ms ease-in-out both}
  :is(.tile,.mini):hover .cn{transition:transform 420ms var(--ease)}
  :is(.tile,.mini):hover .tl{transform:translate(12px,12px)}:is(.tile,.mini):hover .tr{transform:translate(-12px,12px)}
  :is(.tile,.mini):hover .bl{transform:translate(12px,-12px)}:is(.tile,.mini):hover .br{transform:translate(-12px,-12px)}
  :is(.tile,.mini):hover .rc{transform:rotate(120deg);transition:transform 700ms var(--ease)}
  :is(.tile,.mini):hover .pl{transform:scale(1.12);transition:transform 600ms var(--ease)}
}
.xp-hero .img.picto{aspect-ratio:auto;overflow:visible;border-radius:0;display:flex;justify-content:flex-end;align-items:flex-end}
.xp-hero .img.picto svg{width:clamp(120px,14vw,220px)}
/* Tuile sombre : l'image 3D est transparente, le fond de la tuile monte jusqu'en haut et la délimite */
.tile.dark .tile-media.doc{background:var(--c)}
.tile-media.badge{background:#fff;flex:0 0 auto;min-height:0;padding:1rem 1.2rem}
.tile-media.badge img{position:static;height:auto;object-fit:contain}
.tile.xl .tile-media{min-height:clamp(280px,32vw,460px)}
.tile-body{padding:clamp(18px,2vw,28px);padding-right:5.5rem;display:grid;gap:.6rem}
.tile h3{font-size:clamp(1.5rem,2.2vw,2.3rem);letter-spacing:-.035em;line-height:1}
.tile.xl h3{font-size:clamp(2rem,3.4vw,3.6rem)}
.tile-body p{font-size:1rem;line-height:1.4;opacity:.85;max-width:40ch}
.tile-tags{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tile-tags li{font:500 .72rem/1.2 var(--f-sans);text-transform:uppercase;letter-spacing:.02em;border:1px solid currentColor;border-radius:999px;padding:.35rem .7rem;opacity:.85}
.tile .round{position:absolute;right:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);width:52px;height:52px}
@media (max-width:980px){.tile.xl,.tile.md,.tile.sm{grid-column:span 12;grid-row:auto}}
/* Pages expertise : colonne latérale et bandeau des autres expertises */
.xp-aside{position:sticky;top:110px;align-self:start;display:grid;gap:2rem}
.xp-aside .toc{position:static}
.incl b,.xp-aside .toc b{display:block;font:500 .74rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--soft);margin-bottom:.8rem}
.incl ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.incl li{font-size:1.02rem;line-height:1.3;padding-left:1.2rem;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border:1.5px solid var(--orange-ink);transform:rotate(var(--tilt))}
.xp-aside .pill{justify-self:start}
.strip-x{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(24px,3vw,40px);padding-bottom:1rem;scrollbar-width:thin}
.mini{flex:0 0 clamp(240px,24vw,340px);scroll-snap-align:start;background:var(--c);color:var(--ink);text-decoration:none;border-radius:4px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transition:transform 400ms var(--ease)}
.mini.dark{color:var(--ground)}
@media (hover:hover){.mini:hover{transform:translateY(-4px)}}
.mini-img{aspect-ratio:4/3;overflow:hidden;display:block}
.mini-img.white{background:#fff}
.mini-img img{width:100%;height:100%;object-fit:cover}
.mini b{padding:1rem 1.1rem 1.3rem;font-weight:450;font-size:clamp(1.15rem,1.4vw,1.4rem);letter-spacing:-.025em;line-height:1.1}
@media (max-width:980px){.xp-aside{position:static}}
.mini-img img[src*="cstb"],.tile-media img[src*="cstb"]{object-fit:contain;padding:1rem;background:#fff}

/* Manifeste en composition asymétrique : texte sur 8 colonnes, photo verticale décalée */
.metier{padding-block:clamp(90px,11vw,170px)}
.mani-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:stretch}
.mani-text{grid-column:1 / span 9;display:grid;gap:clamp(24px,3vw,40px)}
.metier .manifesto{margin:0;max-width:none;font-size:clamp(1.9rem,3vw,3.2rem);line-height:1.1}
.mani-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.6;color:var(--soft)}
.mani-cols p{max-width:38ch}
.mani-end{font-size:clamp(1.2rem,1.6vw,1.55rem);letter-spacing:-.02em;line-height:1.3;max-width:34ch}
.mani-text .pill{justify-self:start}
.mani-fig{grid-column:10 / span 3;margin:0;position:relative;min-height:320px}
.mani-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px}
.mani-fig figcaption{display:none}
@media (max-width:980px){.mani-text{grid-column:1 / -1}.mani-fig{grid-column:1 / -1;max-width:none;min-height:0;aspect-ratio:16/10}.mani-cols{grid-template-columns:1fr}}

/* Pastilles : remplissage directionnel (entre et sort du côté du curseur), libellé qui roule, attraction magnétique légère */
.pill,.menu-btn{overflow:hidden;isolation:isolate;--fill:var(--ink);--on-fill:var(--ground);--x:50%;--y:50%}
.pill{position:relative}
.menu-btn{--fill:var(--orange);--on-fill:var(--ink)}
/* Menu ouvert : le bouton reste orange au survol, le remplissage passe en noir (plus de flash) */
.menu-btn[aria-expanded="true"]{--fill:var(--ink);--on-fill:var(--ground)}
/* Menu ouvert : le remplissage noir laisse un anneau orange net de 2 px (voulu, plus de filet irrégulier) */
.menu-btn[aria-expanded="true"]::before{inset:2px}
/* Largeur fixe : « Menu » et « Fermer » occupent la même place, le bouton ne bouge pas sous la souris */
.menu-btn{min-width:8.6rem;justify-content:space-between}
@media (hover:hover) and (pointer:fine){.menu-btn[aria-expanded="true"]:hover{background:var(--orange)}.menu-btn[aria-expanded="true"]:hover i{background:var(--ground)}}
/* La place de la barre de défilement est réservée : rien ne se décale quand le menu bloque le défilement */
html{scrollbar-gutter:stable}
.panel.dark .pill,.tile.dark .pill,.method .pill,footer .pill,.card.end .pill{--fill:var(--ground);--on-fill:var(--ink)}
.pill::before,.menu-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill);clip-path:circle(0% at var(--x) var(--y));transition:clip-path 450ms cubic-bezier(.16,1,.3,1)}
.lbl{position:relative;display:inline-grid;overflow:hidden;line-height:1.15}
.lbl > span{grid-area:1/1;transition:transform 420ms cubic-bezier(.16,1,.3,1)}
.lbl > span + span{transform:translateY(110%)}
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:transparent;border-color:var(--fill);color:var(--on-fill)}
  .pill.solid:hover{background:var(--orange);border-color:var(--fill);color:var(--on-fill)}
  .menu-btn:hover{background:var(--ink);color:var(--on-fill)}
  .pill:hover::before,.menu-btn:hover::before{clip-path:circle(150% at var(--x) var(--y))}
  .pill:hover .lbl > span:first-child,.menu-btn:hover .lbl > span:first-child{transform:translateY(-110%)}
  .pill:hover .lbl > span + span,.menu-btn:hover .lbl > span + span{transform:translateY(0)}
  .pill::after{transition:transform 450ms cubic-bezier(.16,1,.3,1)}
  .pill:hover::after{transform:rotate(calc(var(--tilt) + 90deg))}
  .menu-btn:not([aria-expanded="true"]):hover i{transform:rotate(calc(var(--tilt) + 90deg))}
  .menu-btn:hover i{background:var(--ink)}
  .pill,.menu-btn{transition:transform 350ms cubic-bezier(.16,1,.3,1),color 250ms ease,border-color 250ms ease}
  .menu-btn{transition:opacity 300ms ease,transform 350ms cubic-bezier(.16,1,.3,1),color 250ms ease,background-color 250ms ease}
}
.pill:active,.menu-btn:active{transform:scale(.96) !important}
@media (prefers-reduced-motion:reduce){.pill::before,.menu-btn::before,.lbl > span{transition:none}}

.rdv-float,.xp-menu,.rows .thumb{display:none}
/* ===== Téléphone (≤ 860 px) : barre haute, réalisations au doigt, cibles tactiles de 44 px, rythme resserré ===== */
.topbar{display:none}
@media (max-width:860px){
  /* Barre claire derrière le logo et le menu : plus rien ne flotte sur le texte ; elle s'efface en descendant, revient en remontant */
  .topbar{display:block;position:fixed;inset:0 0 auto;z-index:44;height:calc(env(safe-area-inset-top,0px) + 76px);background:color-mix(in srgb,var(--ground) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);opacity:0;pointer-events:none;transition:opacity 250ms ease,translate 280ms cubic-bezier(.23,1,.32,1)}
  .scrolled .brand-fixed.on ~ .topbar{opacity:1}
  /* Logo et pastille centrés sur la même ligne, celle de la barre (38 px) ; le tracé du logo, et non sa boîte, s'aligne sur la marge comme la pastille */
  .menu-btn{top:calc(env(safe-area-inset-top,0px) + 14.5px)}
  .brand-fixed{left:calc(var(--gutter) - 3.7px)}
  /* La barre a son propre fond clair : logo et Menu restent dans leurs couleurs normales, ils ne s'adaptent plus à ce qui passe dessous (sauf menu ouvert, sombre) */
  .scrolled:not(:has(.menu.open)) .brand-fixed.on{color:var(--ink);mix-blend-mode:normal}
  .scrolled .menu-btn.on.on-dark:not([aria-expanded="true"]){background:var(--ink);color:var(--ground);box-shadow:0 0 0 1px color-mix(in srgb,var(--ground) 22%,transparent)}
  /* Bande claire derrière l'heure et la Dynamic Island dès qu'on a défilé : le texte ne passe jamais dessous quand la barre se cache.
     En haut de page, l'ouverture monte jusqu'en haut de l'écran. Sous le menu plein écran (z-index 45), qui reste sombre jusqu'en haut */
  .scrolled body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--ground);z-index:44;pointer-events:none}
  .brand-fixed{width:52px;height:52px;transition:opacity 300ms ease,color 250ms ease,translate 280ms cubic-bezier(.23,1,.32,1)}
  .menu-btn{transition:opacity 300ms ease,transform 140ms var(--ease),translate 280ms cubic-bezier(.23,1,.32,1),background-color 250ms ease,color 250ms ease}
  /* En descendant, logo, Menu et barre sortent par le haut, Dynamic Island comprise */
  .bar-up .topbar,.bar-up .brand-fixed,.bar-up .menu-btn{translate:0 calc(-100% - 30px - env(safe-area-inset-top,0px))}

  /* Ouverture : quatre rubriques en deux colonnes, chaque lien fait 44 px de haut */
  .intro nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  .intro nav a,.foot-links a{min-height:44px}
  .foot-links{gap:0 1.4rem;padding-top:.6rem}
  .foot-links a{display:inline-flex;align-items:center}

  /* Réalisations : une bande qui défile au doigt, aimantée carte par carte ; la suivante dépasse pour inviter au geste */
  .track,.show.flat .track,.show.flat.scroll .track{flex-direction:row;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);gap:10px;padding:0 var(--gutter) 4px;scrollbar-width:none;overscroll-behavior-x:contain}
  .track::-webkit-scrollbar{display:none}
  .card,.show.flat .card,.show.flat.scroll .card{width:84vw !important;height:auto;scroll-snap-align:start;border-radius:4px}
  .card h3{font-size:clamp(2rem,9vw,3rem)}
  .card .meta{gap:.8rem;font-size:.76rem}
  .card .num{font-size:.76rem}
  .card .meta{grid-template-columns:auto 1fr}
  .card .meta span:nth-child(3){display:none}
  .card.end .inner{display:grid;align-content:end;height:100%}

  /* Rythme : des marges de 64 px entre sections au lieu de 90 à 170 */
  .metier,.method,.xgrid,.path,.contact{padding-block:64px}
  .index{padding-bottom:64px}

  /* Tuiles expertise : étiquettes lisibles (12 px), la flèche ne les écrase plus */
  .tile-body{padding-right:clamp(18px,2vw,28px);padding-bottom:5rem}
  .tile-tags li{font-size:.75rem}

  /* Cibles tactiles de 44 px (Impeccable, persona « Casey ») */
  .copy{min-height:44px;padding-inline:.9rem}
  .crumb a,.toc a,.fgrid a,.contact dd a{display:inline-flex;align-items:center;min-height:44px}
  .legal summary{min-height:44px}

  /* Pages expertise : la pastille « Prendre rendez-vous » reste en haut à droite */
  .xp-top{display:flex;position:fixed;inset:auto var(--gutter) calc(env(safe-area-inset-bottom,0px) + 16px) auto;padding:0;z-index:43}
  .xp-top a:not(.pill){display:none}
  /* Le contenu commence 25 px sous le logo et la pastille Menu, comme le grand BDLV de l'accueil, Dynamic Island comprise */
  .xp-hero{padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
  .xp-hero .img.picto{justify-content:flex-start}
  .xp-hero .img.picto svg{width:96px}
  .crumb{align-items:center;row-gap:0}
  /* La pastille du haut suffit : pas deux « Prendre rendez-vous » à l'écran (taste, NO DUPLICATE CTA INTENT) */
  .xp-aside .pill{display:none}
  .legal-links a{display:inline-flex;align-items:center;min-height:44px}

  /* Critique Impeccable du 30/09 (P0-P2), téléphone seulement */
  /* Rendez-vous à portée de pouce : pastille en bas, après l'ouverture, jamais sur le formulaire */
  .rdv-float{display:inline-flex;position:fixed;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:43;opacity:0;translate:0 12px;pointer-events:none;transition:opacity 220ms ease,translate 280ms cubic-bezier(.23,1,.32,1)}
  .rdv-on .rdv-float{opacity:1;translate:0 0;pointer-events:auto}
  footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
  /* Pages expertise : le bouton Menu en haut à droite */
  .xp-menu{display:flex}
  /* Ouverture ramassée : le grand BDLV reste, la 1re réalisation entre dans le premier écran */
  .intro{min-height:0;gap:1.4rem;padding-bottom:1.6rem}
  .mid{padding-block:.4rem}
  /* Une seule navigation au téléphone : la pastille Menu remplace les 4 rubriques (le menu plein écran mène aux mêmes endroits).
     Elle n'est pas affichée à l'arrivée (Guillaume) : elle apparaît avec le petit logo, une fois l'ouverture passée.
     Rien au-dessus du grand BDLV : même marge en haut que sur les côtés */
  .intro nav{display:none}
  .intro{padding-top:calc(env(safe-area-inset-top,0px) + var(--gutter) - .4rem)}
  .foot-links a:first-child{background:var(--orange);color:var(--ink);border-radius:999px;padding-inline:1.2rem}
  .foot-links a[data-legal]{display:none}
  /* « De A à Z » est de la navigation (le Parcours est dans le Menu) : au téléphone la ligne garde ses deux actions, sans orphelin */
  .foot-links a[href="#parcours"]{display:none}
  /* Toutes les réalisations : vignette + ville, pas de flèche trompeuse */
  .rows a{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"img t" "img l";column-gap:.9rem;row-gap:.15rem;padding-block:.7rem}
  .rows a .thumb{display:block;grid-area:img;width:56px;height:42px;object-fit:cover;border-radius:3px}
  .rows a b{grid-area:t;font-size:1.15rem}
  .rows a span:nth-child(3){display:block;grid-area:l;font-size:.9rem}
  .rows a svg{display:none}
  /* Tuiles : l'accroche seule (le titre dit déjà le reste), étiquettes en texte simple */
  .tile-body .pre{display:none}
  .tile-body p::first-letter{text-transform:uppercase}
  .tile-tags{gap:.2rem .5rem}
  .tile-tags li{border:0;padding:0;opacity:.75}
  .tile-tags li+li::before{content:"·";margin-right:.5rem}
  /* Libellés à 12 px minimum, liens du menu à 44 px */
  .mono{font-size:.75rem}
  .contact dt,.toc b,.incl b,.xp-aside .toc b{font-size:.76rem}
  .menu nav a{padding-block:.15rem}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.topbar,.brand-fixed,.menu-btn,.xp-top,.rdv-float{transition:none}}

/* Fenêtre de prise de rendez-vous (agenda Calendly) : centrée comme toute modale ; entre en 260 ms depuis 96 %,
   sort plus vite en 160 ms (Emil) ; plein écran au téléphone pour que l'agenda reste utilisable */
/* Une colonne de 640 px : sous 650 px de large, Calendly pose son agenda bord à bord au lieu d'une carte encadrée (Impeccable craft-floor : pas de cartes imbriquées).
   Hauteur = celle de l'agenda (taste §9.C : pas de vide sans raison) */
.rdv-dlg{width:min(640px,calc(100vw - 2 * var(--gutter)));height:fit-content;max-height:min(820px,calc(100dvh - 2 * var(--gutter)));max-width:none;padding:0;border:0;border-radius:6px;background:var(--ground);color:var(--ink);overflow:hidden;box-shadow:0 30px 80px -30px rgba(18,19,20,.45)}
.rdv-dlg[open]{display:flex;flex-direction:column;animation:rdv-in 260ms cubic-bezier(.23,1,.32,1)}
.rdv-dlg.closing{animation:rdv-out 160ms ease-out forwards}
.rdv-dlg::backdrop{background:rgba(17,19,20,.55);animation:rdv-fade 260ms ease-out}
.rdv-dlg.closing::backdrop{opacity:0;transition:opacity 160ms ease-out}
@keyframes rdv-in{from{opacity:0;transform:scale(.96)}}
@keyframes rdv-out{to{opacity:0;transform:scale(.98)}}
@keyframes rdv-fade{from{opacity:0}}
.rdv-head{display:flex;align-items:center;gap:1.2rem;padding:.55rem .55rem .55rem 1.4rem;border-bottom:1px solid var(--hair)}
.rdv-head .mono{flex:1}
.rdv-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform 140ms var(--ease),background-color 200ms ease}
.rdv-x:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.rdv-x:hover{background:var(--ground)}}
.rdv-body{position:relative;flex:0 1 var(--cal-h,600px);min-height:0;min-width:0}
/* Panneau BDLV à gauche de l'agenda : logo animé, qui, quoi, combien de temps */
.rdv-main{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
.rdv-side{flex:none;display:flex;align-items:center;gap:1rem;padding:.9rem 1.4rem;border-bottom:1px solid var(--hair)}
.rdv-logo{display:block;flex:none;width:46px;height:46px;color:var(--ink)}
.rdv-logo svg{width:100%;height:100%;display:block;overflow:visible}
/* Logo de l'en-tête déjà dessiné : c'est celui du chargement qui bouge, un seul mouvement à la fois */
.rdv-logo .logo-anim .wd{clip-path:none}
.rdv-logo .logo-anim .sq{stroke-dashoffset:0}
.rdv-who{font:500 .72rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.rdv-what{font-size:1.25rem;font-weight:400;letter-spacing:-.03em;line-height:1.05;margin-top:.2rem}
.rdv-meta{list-style:none;margin:0 0 0 auto;padding:0;font-size:.85rem;color:var(--soft);white-space:nowrap}
.rdv-wait{position:absolute;inset:0;display:grid;place-items:center;transition:opacity 160ms ease-out}
.cal-on .rdv-wait{opacity:0;pointer-events:none}
/* Logo du chargement : s'écrit, se trace, tient, s'efface, recommence (2,4 s) */
.rdv-spin{display:block;width:64px;height:64px;color:var(--ink)}
.rdv-spin svg{width:100%;height:100%;display:block;overflow:visible;animation:spin-fade 2.4s ease-out infinite}
.rdv-dlg[open] .rdv-spin .wd{animation:spin-write 2.4s cubic-bezier(.45,0,.55,1) infinite}
.rdv-dlg[open] .rdv-spin .sq{animation:spin-draw 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes spin-write{0%{clip-path:fill-box inset(0 100% 0 0)}35%,100%{clip-path:fill-box inset(0 0 0 0)}}
@keyframes spin-draw{0%,35%{stroke-dashoffset:166}75%,100%{stroke-dashoffset:0}}
@keyframes spin-fade{0%,85%{opacity:1}100%{opacity:0}}
/* L'agenda apparaît quand il est prêt (Emil : entrée en ease-out, sous 300 ms) */
.rdv-body iframe{opacity:0;transition:opacity 220ms ease-out}
.cal-on .rdv-body iframe{opacity:1}
@media (prefers-reduced-motion:reduce){.rdv-spin svg{animation:none}.rdv-body iframe,.rdv-wait{transition:none}}
.rdv-body iframe{position:absolute;inset:0;width:100%;max-width:640px;margin-inline:auto;height:100%;border:0;background:transparent}
@media (max-width:860px){
  /* Plein écran : la Dynamic Island en haut et la barre d'accueil en bas ne recouvrent ni la croix ni l'agenda */
  /* Bord à bord par inset et non 100vw : Chrome retire de 100vw la place réservée à la barre de défilement (scrollbar-gutter), ce qui laissait une bande à droite */
  .rdv-dlg{inset:0;margin:0;width:auto;height:100dvh;max-height:none;border-radius:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
  .rdv-head{padding-left:var(--gutter)}
  .rdv-side{padding:.9rem var(--gutter)}
  .rdv-main,.rdv-body{flex:1 1 auto}
  /* Une ligne chacun : le logo dit déjà BDLV */
  .rdv-org{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rdv-dlg[open]{animation-name:rdv-fade}
  .rdv-dlg.closing{animation:rdv-fade 160ms ease-out reverse forwards}
}
/* Formulaire envoyé : le « Merci » prend la place des champs ; sans JavaScript, contact.php renvoie sur #envoye ou #erreur (:target) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent,.fail{display:none;grid-column:1 / -1;scroll-margin-top:120px;outline:none}
.sent:target,.sent.on{display:grid;gap:1rem;justify-items:start;outline:none}
.fail:target{display:block;color:#a4251c;font-size:.95rem;text-wrap:pretty}
#rdv:has(.sent:target,.sent.on) > :not(.sent){display:none}
.sent h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.sent p:not(.mono){color:var(--soft);max-width:44ch;text-wrap:pretty}
.sent .pill{margin-top:.6rem}
/* Entrée courte et en ease-out (Emil : un élément qui arrive ralentit en fin de course, moins de 300 ms) */
.sent.on{animation:sent-in 280ms cubic-bezier(.23,1,.32,1)}
@keyframes sent-in{from{opacity:0;translate:0 8px}}
@media (prefers-reduced-motion:reduce){.sent.on{animation:none}}