/* Studio Sturm, site complet (E v4). Socle de la direction E, charte terre cuite. Registre : ../LEDGER.md */
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-latin-wght.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/spacemono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
/* repli métrique : une police système ajustée à la largeur de Playfair, pour que le titre garde sa hauteur au chargement de la police */
@font-face{font-family:"Playfair Repli";src:local("Georgia");font-weight:400 900;size-adjust:94%}

:root{
  --stone:#F9F8F5;--white:#ffffff;--ink:#2C302E;--ui:#666D6B;--mut:#6B7270;--line:#E5E4DF;--leaf:#1E382B;
  --ac:#D26E4B;--onph:#fffaf0;--gut:24px;--hd:64px;--gap:64px;
  --e:cubic-bezier(.2,.7,.1,1);--e2:cubic-bezier(.7,0,.2,1);
  --mono:"Space Mono",ui-monospace,monospace;
  --serif:"Playfair Display","Playfair Repli",Georgia,serif;
}
@media (min-width:900px){:root{--gap:100px;--gut:40px}}
*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px);overflow-x:clip}
a,button,label{touch-action:manipulation;-webkit-tap-highlight-color:rgba(44,48,46,.12)}
body{margin:0;background:var(--stone);color:var(--ink);font:400 1.0625rem/1.55 Archivo,system-ui,sans-serif;letter-spacing:-.02em;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:500;line-height:1.1}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit}
.w{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ui);outline-offset:3px}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:200;background:var(--ink);color:var(--stone);padding:12px 18px;font-weight:500;border-radius:2px;text-decoration:none}
.skip:focus{top:12px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08}
h2.serif{font-size:clamp(2.5rem,4.4vw,4rem)}
.intro{margin-top:20px;max-width:34em;color:var(--ui)}
.sec{padding:var(--gap) 0}
.lb-mono{font:400 .75rem/1.4 var(--mono);letter-spacing:0;color:var(--ui)}

/* Ce que vos clients cherchent : cartes blanches décalées */
.cards{display:grid;gap:20px;margin-top:48px}
.card{background:var(--white);border-radius:20px;padding:32px}
.card h3{font-size:1.5rem;font-weight:500;margin-bottom:10px}
.card p{max-width:30em}
@media (min-width:900px){
  .cards{grid-template-columns:repeat(12,1fr);gap:24px;margin-top:72px;align-items:start}
  .k1{grid-column:1/8;padding:48px}.k2{grid-column:8/13;margin-top:72px}
  .k3{grid-column:2/7}.k4{grid-column:7/13;margin-top:48px;padding:48px}
}

/* Pour qui */
.jobs{display:grid;gap:0 64px;margin-top:40px}
.jobs li{padding:20px 0;display:grid;gap:6px;align-content:start;border-top:1px solid var(--line)}
.jobs h3{font-size:2rem;font-weight:400}
.jobs p{max-width:26em;color:var(--ui)}
.jobs-more{margin-top:28px;max-width:40em;color:var(--ui)}
@media (min-width:900px){.jobs{grid-template-columns:1fr 1fr;margin-top:64px}.jobs li{padding:28px 0}}

/* Réalisations : quatre grandes cartes décalées */
.mos{display:grid;gap:24px;margin-top:48px}
.pc{margin:0;background:var(--white);border-radius:20px;overflow:hidden}
.ph{position:relative;overflow:hidden;aspect-ratio:3/2}
.pz{position:absolute;inset:0}
.pz img{width:100%;height:100%;object-fit:cover}
.pc figcaption{display:grid;gap:4px;padding:20px 24px 24px;justify-items:start}
.pc strong{font-size:1.1875rem;font-weight:500}
.pc figcaption span{color:var(--ui)}
.lb{font:400 .75rem/1 var(--mono);letter-spacing:0;color:var(--ui);border:1px solid var(--line);border-radius:2px;padding:4px 7px;margin-bottom:8px}
@media (hover:hover) and (min-width:900px){
  .pz{transition:transform .5s var(--e)}
  .pc:hover .pz{transform:scale(1.03)}
}
@media (min-width:900px){
  .mos{grid-template-columns:repeat(12,1fr);gap:32px;margin-top:72px;align-items:start}
  .m1{grid-column:1/9}
  .m2{grid-column:9/13;margin-top:120px}.m2 .ph{aspect-ratio:4/5}
  .m3{grid-column:1/6}.m3 .ph{aspect-ratio:4/5}
  .m4{grid-column:6/13;margin-top:96px}
}

/* Méthode */
.proc-g{display:grid;gap:32px}
.steps li{padding:24px 0;border-top:1px solid var(--line);display:grid;gap:10px}
.steps h3{font-size:1.5rem;font-weight:500}
.steps p{max-width:34em}
@media (min-width:900px){
  .proc-g{grid-template-columns:5fr 7fr;gap:80px;align-items:start}
  .proc h2{position:sticky;top:calc(var(--hd) + 40px)}
  .steps li{padding:36px 0}
}

/* Robin */
.robin-g{display:grid;gap:40px}
.pt{margin:0;max-width:360px}
.pt img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
.robin h2{margin-bottom:24px}
.robin p{max-width:32em}
.robin .sub{margin-top:16px;color:var(--ui)}
.robin .refs{margin-top:16px}
@media (min-width:900px){.robin-g{grid-template-columns:4fr 7fr;gap:96px;align-items:center}}

/* Contact et pied de page : un seul bloc sombre, vert feuillage */
.contact{background:var(--leaf);color:var(--onph)}
.cc{display:grid;gap:40px}
.cc h2{margin-bottom:20px}
.cc p{max-width:34em}
.cc .act{margin-top:28px}
.coords{display:grid;gap:2px;align-content:start}
.coords a,.coords span{display:flex;align-items:center;min-height:48px;font-size:1.25rem}
.coords span{font-size:1rem}
@media (min-width:900px){.cc{grid-template-columns:7fr 4fr;gap:96px;align-items:end}}
.ft{background:var(--leaf);color:var(--onph);padding:64px 0 120px;border-top:1px solid rgba(229,228,223,.35)}
.ft-g{display:grid;gap:40px}
.ft h2{font-size:.9375rem;font-weight:500;color:var(--line);margin-bottom:8px}
.ft p{max-width:30em;margin-top:12px;font-size:.9375rem}
.ft-logo{display:block;height:20px;width:auto;aspect-ratio:744.1/73.6;color:var(--onph)}
.ft a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration-thickness:1px;text-underline-offset:3px}
.ft :focus-visible,.contact :focus-visible{outline-color:var(--onph)}
.ft-cr{margin-top:48px;padding-top:32px;position:relative}
.ft-cr::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:rgba(229,228,223,.35)}
.ft-cr ul{display:grid;margin-top:12px}
.mt-w{margin-top:20px}
.mt{min-height:44px;padding:0 18px;background:transparent;color:var(--onph);font:400 .8125rem var(--mono);letter-spacing:0;border:1px solid rgba(229,228,223,.5);border-radius:2px;cursor:pointer;touch-action:manipulation}
.mt:hover{background:rgba(255,250,240,.08)}
@media (min-width:900px){.ft{padding-bottom:64px}.ft-g{grid-template-columns:4fr 2fr 3fr 3fr;gap:48px}.ft-cr ul{grid-template-columns:repeat(2,1fr);column-gap:32px}}

/* Barre d'action mobile (après l'accueil) */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:none;gap:8px;padding:10px var(--gut) max(10px,env(safe-area-inset-bottom));background:var(--stone);border-top:1px solid var(--line);transition:transform .35s var(--e)}
.bar .btn{flex:1 1 auto;white-space:normal;min-width:0;padding-left:14px;padding-right:14px}
.bar .btn-2{flex:0 0 auto}
@media (max-width:899px){.bar{display:flex}}

/* Mouvement (html.anim, posé dans le head hors mouvement réduit) */
.anim [data-r]{opacity:0;transform:translateY(24px)}
.anim [data-r].in{opacity:1;transform:none;transition:opacity .7s var(--e) calc(var(--i,0) * 90ms),transform .7s var(--e) calc(var(--i,0) * 90ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===== E v2 : intro du logo, bande des métiers, couche d'animations ===== */

/* ---- Intro du logo (portée de refonte-gpt/refonte.css, section 10b) : le logo s'écrit trait par trait puis vole vers l'en-tête.
   Calque créé par site.js ; repli CSS (html.intro-on) avant que le JS ne le pose, et garde-fou : si le JS plante, le voile
   disparaît seul à 2,6 s et l'amorce du <head> retire les classes à 3,2 s. Thème E : fond pierre, lettres sépia, point orange. */
html.intro-on::before{content:"";position:fixed;inset:0;z-index:2000;background:#F9F8F5;animation:intro-failsafe 0s 2.6s forwards}
@keyframes intro-failsafe{to{visibility:hidden}}
.ss-intro{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;overflow:hidden;background:#F9F8F5;color:#2C302E;animation:ibgfade .45s ease 1.1s both,intro-failsafe 0s 2.6s forwards}
.intro-skip{position:absolute;right:16px;bottom:16px;z-index:5;min-height:44px;padding:0 16px;font:500 .9375rem/1 Archivo,sans-serif;letter-spacing:-.02em;color:inherit;background:transparent;border:1px solid #2C302E;border-radius:2px;cursor:pointer}
.intro-skip:focus-visible{outline:2px solid #2C302E;outline-offset:3px}
.iw{width:min(76vw,760px);height:auto;fill:currentColor;overflow:visible;transform-origin:0 0;animation:iflip .5s cubic-bezier(.65,0,.35,1) 1.1s both}
@keyframes ibgfade{to{background-color:transparent}}
@keyframes iflip{to{transform:translate(var(--tx),var(--ty)) scale(var(--s));color:var(--lc)}}
.ss-intro .L path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:idraw .62s ease-out both,ifillin .3s ease .82s forwards;animation-delay:calc(var(--k) * 45ms),.82s}
@keyframes idraw{to{stroke-dashoffset:0}}
@keyframes ifillin{to{fill-opacity:1;stroke-opacity:0}}
.ss-intro .idot3{fill:var(--dotc,#ff6a2b);opacity:0;animation:ilight .3s ease .95s forwards}
.ss-intro .ihalo{fill:#ff8a57;fill-opacity:.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:ihalo .6s var(--e) .95s forwards}
@keyframes ilight{to{opacity:1}}
@keyframes ihalo{from{opacity:0;transform:scale(.4)}40%{opacity:1}to{opacity:0;transform:scale(1.6)}}
.ss-intro .intro-skip{animation:ifadeout .2s ease 1.1s both}
@keyframes ifadeout{to{opacity:0}}
/* pendant l'intro, la bande des métiers attend son tour (seule animation temporelle de la page ; une règle sur tous les éléments coûtait 190 ms de recalcul de style au CPU x4) ; le logo de l'en-tête cède la place à celui du calque */

/* ---- Menu : lettres qui roulent au survol ---- */
.rl{display:inline-block;position:relative;overflow:hidden;height:1.35em;line-height:1.35}
.rl span{display:block;transition:transform .5s var(--e)}
.rl span+span{position:absolute;left:0;top:100%}
.hd-nav a:hover .rl span,.hd-nav a:focus-visible .rl span{transform:translateY(-100%)}

/* ---- Titres h2 : chaque mot monte derrière son masque (site.js, headings) ---- */
.js .sp .sw{display:inline-block;overflow:clip;vertical-align:top;padding:.08em .06em .16em;margin:-.08em -.06em -.16em}
.js .sp .sw-i{display:inline-block;transform:translateY(135%);transition:transform 1s var(--e);transition-delay:calc(var(--l,0) * 80ms + var(--k,0) * 16ms)}
.js .sp.in .sw-i{transform:none}

/* ---- Rideau : un panneau pierre glisse hors de l'image (transform seulement) pendant qu'elle revient à sa taille ---- */
.anim .cu{position:relative;overflow:hidden}
.anim .cu::after{content:"";position:absolute;inset:0;z-index:2;background:var(--stone)}
.anim .cu.in::after{transform:translateY(-101%);transition:transform 1.2s cubic-bezier(.7,0,.2,1) calc(var(--cd,0) * 90ms)}
.anim .cu .pz,.anim .cu>img{scale:1.1}
.anim .cu.in .pz,.anim .cu.in>img{scale:1;transition:scale 1.6s var(--e) calc(var(--cd,0) * 90ms)}
.pt.cu{border-radius:20px}

/* ---- Méthode : quatre étapes numérotées, grille 2x2 alignée, hauteurs égales par rangée ---- */
.proc-g{display:block}
.proc h2{position:static;margin-bottom:32px}
.steps{display:grid;gap:20px;counter-reset:etape}
.steps li.card{border-top:0;padding:32px;display:block}
.steps li.card::before{counter-increment:etape;content:counter(etape,decimal-leading-zero);display:block;margin-bottom:20px;font:400 .875rem/1 var(--mono);letter-spacing:.04em;color:var(--ui)}
.steps li.card h3{margin-bottom:10px}
@media (min-width:900px){
  .proc h2{margin-bottom:56px}
  .steps{grid-template-columns:1fr 1fr;gap:24px}
  .steps li.card{padding:44px}
}

/* ---- Parallaxe léger (CSS, transform et translate seulement, rien sans prise en charge) ---- */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.rm) .bgband .bg{inset:-10% 0;height:120%;animation:bgd linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes bgd{from{translate:0 -6%}to{translate:0 6%}}


/* ===== E v3 : site complet. Ajouts au socle de E v2 (voir plans/refonte-batiment/LEDGER.md, section E v3) ===== */

/* ---- Transitions entre pages (View Transitions, fondu croisé ; l'en-tête et la barre mobile restent en place) ---- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.hd{view-transition-name:hd}
.bar{view-transition-name:bar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}

/* ---- En-tête collant, menu en liste déroulante sous 1000 px (sans JavaScript : <details>) ---- */
.hd{position:sticky;top:0;z-index:30;height:var(--hd);color:var(--ink)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%}
.logo{display:flex;align-items:center;min-height:44px;color:var(--ink)}
.logo svg{height:15px;width:auto;aspect-ratio:744.1/73.6}
.hd-nav{display:none}
.hd a{text-decoration:none}
.hd-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;font-size:.9375rem}
.hd-nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hd a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;color:var(--ink)}
.hd-menu summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:2px;font-size:.9375rem;cursor:pointer;color:var(--ink)}
.hd-menu summary::-webkit-details-marker{display:none}
.hd-menu[open] summary{background:var(--white)}
.hd-menu nav{position:absolute;left:0;right:0;top:100%;display:grid;padding:4px var(--gut) 16px;background:var(--stone);border-bottom:1px solid var(--line)}
.hd-menu nav a{display:flex;align-items:center;min-height:48px;font-size:1.0625rem;border-top:1px solid var(--line)}
.hd-menu nav a:first-child{border-top:0}
@media (min-width:1000px){.hd-nav{display:flex;gap:0}.hd-menu{display:none}.logo svg{height:18px}.hd-nav a{padding:0 13px}}
@media (min-width:1200px){.hd-nav a{padding:0 16px}}
html.intro-lg .hd .logo svg{opacity:0}

/* ---- Pages intérieures ---- */
.bc ol{display:flex;flex-wrap:wrap;gap:0 10px;font-size:.875rem;color:var(--ui)}
.bc li{display:flex;align-items:center;min-height:44px}
.bc li+li::before{content:"/";margin-right:10px;color:var(--mut)}
.bc a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.pg-hero{padding:32px 0 16px}
.pg-hero h1{margin-top:24px;font-size:clamp(2.25rem,5.4vw,4rem);max-width:17em}
.pg-hero .lead{margin-top:20px;max-width:36em;font-size:1.125rem;color:var(--ui)}
.pg-hero .act{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.mh{display:grid;gap:32px;margin-top:32px}
.pt2{margin:0;border-radius:20px;overflow:hidden}
.pt2 img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){.mh{grid-template-columns:7fr 5fr;gap:64px;align-items:center}}
.prose{max-width:44em}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,3vw,2.5rem);margin:48px 0 16px;letter-spacing:-.01em;line-height:1.12}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;font-weight:600;margin:28px 0 8px}
.prose p{margin-top:14px}
.prose ul{margin-top:12px;padding-left:1.2em;list-style:disc}
.prose ol{margin-top:12px;padding-left:1.4em;list-style:decimal}
.prose li{margin-top:8px}
.prose a{text-underline-offset:3px}
.prose .note{margin-top:20px;padding:16px 20px;background:var(--white);border-radius:2px;border-left:3px solid var(--ink)}
.prose .src{font-size:.9375rem;color:var(--ui)}
.prose dl{display:grid;gap:12px;margin-top:16px}
.prose dt{font-weight:600}
.todo{background:#fff2c4;color:var(--ink);padding:0 4px;border-radius:2px}
.sp2{padding:56px 0}
@media (min-width:900px){.sp2{padding:88px 0}}
.two{display:grid;gap:32px}
@media (min-width:900px){.two{grid-template-columns:5fr 7fr;gap:80px;align-items:start}}
.checks{display:grid;gap:0;margin-top:24px}
.checks li{padding:16px 0 16px 36px;border-top:1px solid var(--line);position:relative}
.checks li::before{content:"";position:absolute;left:4px;top:24px;width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.cta-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---- Pour qui : six cartes ---- */
.mc{display:grid;gap:20px;margin-top:40px}
.mcard{background:var(--white);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.mcard .ph{aspect-ratio:3/2}
.mcard .mb{display:grid;gap:8px;padding:24px 24px 28px;align-content:start}
.mcard h3{font-size:1.75rem;font-weight:400}
.mcard p{color:var(--ui)}
.mcard .go{margin-top:6px;display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:4px}
@media (min-width:700px){.mc{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.mc{grid-template-columns:repeat(3,1fr);gap:24px}}
.more-j{margin-top:28px;max-width:40em;color:var(--ui)}

/* ---- Réalisations : filtres et cartes liées ---- */
.flt{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.flt[hidden]{display:none}
.flt button{min-height:44px;padding:0 18px;background:transparent;color:var(--ui);border:1px solid var(--line);border-radius:2px;font:500 .9375rem Archivo,sans-serif;letter-spacing:-.02em;cursor:pointer}
.flt button:hover{background:rgba(44,48,46,.05)}
.flt button[aria-pressed="true"]{background:var(--ink);color:var(--stone);border-color:var(--ink)}
.gal{display:grid;gap:24px;margin-top:32px}
.gal .pc[hidden]{display:none}
.pc .ex-l{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-underline-offset:4px;margin-top:4px}
@media (min-width:800px){.gal{grid-template-columns:1fr 1fr;gap:32px}}
.gal-n{margin-top:24px;color:var(--ui)}

/* ---- Réalisations : projet réel Casa Fusco (captures d'écran d'une maquette proposée) ---- */
.cf{padding-bottom:56px}
.cf + .sp2{border-top:1px solid var(--line)}
.cf .lb{display:inline-block;margin-bottom:0}
.cf h2{margin-top:12px;max-width:22em}
.cf-txt{display:grid;gap:12px;margin-top:20px;max-width:42em}
.cf-g{display:grid;gap:32px;margin-top:32px;align-items:start}
.cf-g figure{margin:0}
.cf-g img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--ink)}
.cf-g figcaption,.cf-cr{margin-top:10px;font-size:.9375rem;color:var(--ui)}
.cf-t{max-width:300px}
@media (min-width:900px){
  .cf-g{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
  .cf-d{grid-column:1;grid-row:1}
  .cf-t{grid-column:2;grid-row:1;max-width:none}
  .cf-c{grid-column:1;grid-row:2}
  .cf-cr{grid-column:2;grid-row:2;align-self:end;margin:0;max-width:18em}
}

/* ---- Contact : devis en trois étapes ---- */
.cx{display:grid;gap:12px;margin-top:32px}
.cx a{display:grid;gap:2px;padding:18px 20px;background:var(--white);border-radius:2px;text-decoration:none;border:1px solid var(--line);min-height:44px}
.cx .k{font:400 .75rem/1.3 var(--mono);color:var(--ui)}
.cx .v{font-size:1.25rem;font-weight:500}
.cx .s{font-size:.9375rem;color:var(--ui)}
.cx-b{display:grid;gap:8px;align-content:start}
.cx-b .s{font-size:.9375rem;color:var(--ui)}
.cx-r{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.cx-r button{min-height:44px;min-width:44px;padding:0 16px;background:transparent;border:1px solid var(--line);border-radius:2px;font:500 .9375rem Archivo,sans-serif;cursor:pointer}
@media (min-width:900px){.cx{grid-template-columns:repeat(3,1fr)}}
.qf{display:grid;gap:20px;max-width:46em;margin-top:24px}
.qf fieldset{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.qf legend{font-family:var(--serif);font-size:1.75rem;font-weight:400;padding:0;margin-bottom:8px}
.qf .stp{font:400 .8125rem/1.3 var(--mono);color:var(--ui)}
.qf .fld label,.qf .fld .lab{display:block;font-weight:500;margin-bottom:6px}
.qf .opt{font-weight:400;color:var(--ui)}
.qf input[type=text],.qf input[type=tel],.qf input[type=email],.qf select,.qf textarea{width:100%;min-height:48px;padding:10px 14px;background:var(--white);color:var(--ink);border:1px solid #8c8579;border-radius:2px;font:400 1rem Archivo,sans-serif;letter-spacing:-.02em}
.qf textarea{min-height:140px;resize:vertical}
.qf [aria-invalid="true"]{border-color:#b3261e;border-width:2px}
.chg{display:grid;gap:10px}
.ch{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;background:var(--white);border:1px solid var(--line);border-radius:2px;cursor:pointer}
.ch input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.ch:has(input:checked){border-color:var(--ink);outline:1px solid var(--ink)}
.ch:has(input:focus-visible){outline:2px solid var(--ui);outline-offset:3px}
.qf .nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.qf .btn[hidden]{display:none}   /* .btn impose display:flex et l'emportait sur [hidden] : les trois boutons d'etape s'affichaient a chaque etape */
.qf .st{color:var(--ui);font-size:.9375rem;min-height:1.4em}
.qf .err{color:#8f1d16;font-weight:500}
.js .qf fieldset[hidden]{display:none}
.out{display:grid;gap:12px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:2px}
.out[hidden]{display:none}
.out h3{font-size:1.25rem}
.out .ol{display:grid;gap:10px}
.qf .alt summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.qf .alt .out{margin-top:8px}
.qf .ck{align-items:flex-start;padding-top:14px;padding-bottom:14px}
.qf .ck input{margin-top:2px}
.q-err{display:grid;gap:12px;justify-items:start;padding:16px 20px;background:var(--white);border:2px solid #b3261e;border-radius:2px;color:var(--ink)}
.q-err[hidden]{display:none}
.q-err p{margin:0;font-weight:500}
.qf .btn.busy{cursor:progress}
.fnote{font-size:.9375rem;color:var(--ui);max-width:44em}
.prog{display:none;gap:8px;margin:0 0 4px}
.js .prog{display:flex}
.prog li{flex:1;height:4px;background:var(--line);border-radius:2px}
.prog li.on{background:var(--ink)}

/* ---- FAQ ---- */
.fq-l{max-width:50em;margin-top:32px}
.fq{border-top:1px solid var(--line)}
.fq:last-child{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-size:1.125rem;font-weight:500;cursor:pointer}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";font:400 1.5rem/1 Archivo,sans-serif;flex:none}
.fq[open] summary::after{content:"\2212"}
.fq .ans{padding:0 0 20px;max-width:42em;color:var(--ui)}
.fq .ans p+p,.fq .ans ul{margin-top:10px}
.fq .ans ul{padding-left:1.2em;list-style:disc}

/* ---- Guides ---- */
.gd{display:grid;gap:20px;margin-top:32px}
.gd a{display:grid;gap:8px;padding:28px;background:var(--white);border-radius:20px;text-decoration:none}
.gd h2,.gd h3{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15}
.gd p{color:var(--ui)}
.gd .more{font-weight:500;text-decoration:underline;text-underline-offset:4px}
@media (min-width:800px){.gd{grid-template-columns:1fr 1fr}}
.exm{display:grid;gap:16px;margin-top:24px}
.exm div{padding:20px;background:var(--white);border-radius:2px;border:1px solid var(--line)}
.exm .lb{display:inline-block;margin-bottom:10px}
@media (min-width:700px){.exm{grid-template-columns:1fr 1fr}}

/* ---- Tarifs ---- */
.gd+.prose,.sv-l+.prose{margin-top:48px}
.sv-l{max-width:44em}
.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:1rem}
.tbl th,.tbl td{padding:12px 10px;border-top:1px solid var(--line);text-align:left}
.tbl thead th{font-weight:600;border-top:0}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tw{overflow-x:auto}

/* ---- Le devis : une feuille blanche sur le canevas pierre, lignes « compris », un seul total ; accueil et page tarifs ---- */
.dv-g{display:grid;gap:40px}
.dv-a .intro+.intro{margin-top:16px}
.dv-a{max-width:68ch}
/* deux devis : empilés sur mobile, côte à côte sur ordinateur */
.dv-duo{display:grid;gap:32px}
@media (min-width:1080px){.dv-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}.dv-duo .dv{padding:clamp(24px,2.6vw,40px)}}
.dv{min-width:0;padding:clamp(20px,4.5vw,56px);background:var(--white);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);font-size:1rem;color:var(--ink)}
.dv-hd{display:grid;gap:8px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.dv-hd h3{font-size:clamp(2.25rem,4.4vw,3.25rem);line-height:1}
.dv-hd p,.dv-k,.dv-t thead th{font:400 .75rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui)}
.dv-pa{display:grid;gap:20px;padding:24px 0 28px;font-size:.9375rem;line-height:1.5}
.dv-pa .dv-k{margin-bottom:6px}
.dv-pa strong{font-weight:600}
@media (min-width:560px){.dv-pa{grid-template-columns:1fr 1fr}}
.dv-t{width:100%;border-collapse:collapse}
.dv-t thead th{padding:10px 0;text-align:left;border-block:1px solid var(--line)}
.dv-t thead th:last-child,.dv-t td{text-align:right}
.dv-t tbody tr{border-bottom:1px solid var(--line)}
.dv-t tbody th{position:relative;padding:14px 16px 14px 2.5rem;text-align:left;font-weight:400}
.dv-n{position:absolute;left:0;top:17px;font:400 .75rem/1.4 var(--mono);color:var(--ui)}
.dv-l{display:block;font-weight:500}
.dv-d{display:block;margin-top:2px;font-size:.9375rem;line-height:1.45;color:var(--ui)}
.dv-t tbody td{padding:15px 0 14px;vertical-align:top;white-space:nowrap;font:400 .8125rem/1.5 var(--mono);color:var(--ink)}
@media (max-width:479px){.dv-t tbody th{padding-left:0}.dv-n{position:static;display:block;margin-bottom:2px}}
.dv-tot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-top:20px;border-top:2px solid var(--ink);margin-top:-1px;text-align:right}
.dv-tot>p:last-child{margin-left:auto}
.dv-tot strong{display:block;font-size:clamp(2.75rem,6vw,4.5rem);line-height:1;color:var(--ac-h)}
.dv .todo{display:inline-block;margin-top:8px;font-size:.8125rem}
.dv-3{display:block;margin-top:6px;font-size:1.0625rem}
.dv-ft{display:grid;gap:28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.dv-mn{display:grid;gap:4px;font-size:.875rem;line-height:1.5;color:var(--ui)}
.dv-ok{display:grid;gap:10px;justify-items:start}
@media (min-width:700px){.dv-ok{justify-items:end;justify-self:end;text-align:right}}
/* les lignes se posent l'une après l'autre quand la feuille entre (.anim : jamais en mouvement réduit) */
.anim .dv tbody tr{opacity:0;transform:translateY(6px)}
.anim .dv.in tbody tr{opacity:1;transform:none;transition:opacity .5s var(--e) calc(.25s + var(--k,0) * 70ms),transform .5s var(--e) calc(.25s + var(--k,0) * 70ms)}

/* ---- À propos ---- */
.eng{display:grid;gap:16px;margin-top:32px}
.eng li{padding:20px 0 0;border-top:1px solid var(--line)}
@media (min-width:800px){.eng{grid-template-columns:1fr 1fr;gap:24px 56px}}

/* ---- 404 ---- */
.nf{display:grid;gap:8px;margin-top:32px;max-width:28em}
.nf a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-top:1px solid var(--line);font-size:1.125rem;text-underline-offset:4px}

/* ---- Pied de page enrichi ---- */
.ft-g{grid-template-columns:1fr 1fr;gap:28px 20px}
@media (max-width:899px){.ft-g>div:first-child{grid-column:1/-1}}
@media (min-width:900px){.ft-g{grid-template-columns:4fr 2fr 3fr 3fr 3fr}}
.ft ul{display:grid}
.ft-cr .lk{margin-top:16px}

/* ---- Clips d'ambiance : pages métier (lecture une fois) et cartes de réalisations (lecture au survol) ---- */
.clip{position:relative}
.clip img{aspect-ratio:16/9}
.clip .cctl{bottom:12px;right:12px}
.pvid,.hov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hov{z-index:1;transition:opacity .35s var(--e)}
.pvid.on,.hov.on{opacity:1}
/* reglage-anim.css : reglage des animations en haut de page (voir reglage-anim.js). Commun a l'accueil de Studio Sturm (ajoute a style.css par site-css.py) et aux exemples (exemples/reglage-anim.css).
   Chaque charte pose ses jetons sur :root (ci-dessous, valeur par defaut entre parentheses) et la mise en place du bouton dans son en-tete :
   --ssa-bg (#fff) fond de la page ; --ssa-panel (= bg) fond du panneau ; --ssa-ink (#1a1a1a) texte ; --ssa-mut (#555) texte secondaire ; --ssa-line (#767676) bordure du bouton ; --ssa-bd (#555) bordure des choix et du panneau ;
   --ssa-acc (#1a1a1a) accent du choix coche ; --ssa-tint (#eee) fond du choix coche et du survol ; --ssa-r (0) rayon ; --ssa-f (inherit) police ; --ssa-s (Georgia) police du titre du panneau ; --ssa-fc (currentColor) anneau de focus ;
   Un en-tete sombre (Ostermann) pose en plus --ssa-b-ink, --ssa-b-mut, --ssa-b-line, --ssa-b-tint et --ssa-b-fc : couleurs du BOUTON sur l'en-tete (texte, etat, bordure, survol, anneau de focus) ; le panneau garde --ssa-ink, --ssa-mut, etc.
   --ssa-sh (none) ombre du panneau ; --ssa-btn (transparent) fond du bouton ; --ssa-edge (16px) retrait du panneau sur telephone (sous 700 px, le panneau prend la largeur de l'en-tete) ; --ssa-g (20px) retrait du bandeau (le script l'aligne sur le premier element de l'en-tete) ;
   --ssa-bn-bg, --ssa-bn-ink, --ssa-bn-btn, --ssa-bn-btn-ink, --ssa-bn-fc : bandeau (fond sombre, texte clair, bouton clair).
   Le bandeau (et le panneau sous 700 px) se place par rapport a l'en-tete : celui-ci doit etre positionne (sticky, fixed ou relative). Rien n'est anime hors prefers-reduced-motion: no-preference. */
html:not(.js) .ssa,html:not(.js) .ssa-me{display:none}
body:has(.ssa) .lg-w{display:none}   /* le bouton « Animations » de l'en-tete remplace le bouton de bas de page des exemples (ex-moteur.js, mode leger) : un exemple sans l'en-tete le garde */
.ssa{position:relative;flex:none;pointer-events:auto;font-family:var(--ssa-f,inherit);color:var(--ssa-ink,#1a1a1a);text-transform:none;letter-spacing:0;font-style:normal;text-align:left}
.ssa *,.ssa-bn *{box-sizing:border-box}
.ssa-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;background:var(--ssa-btn,transparent);color:var(--ssa-b-ink,var(--ssa-ink,#1a1a1a));border:1px solid var(--ssa-b-line,var(--ssa-line,#767676));border-radius:var(--ssa-r,0);font:500 .9375rem/1.1 var(--ssa-f,inherit);cursor:pointer;touch-action:manipulation;text-align:left;box-shadow:var(--ssa-sh-b,none)}
.ssa-b:hover,.ssa-b[aria-expanded="true"]{background:var(--ssa-b-tint,var(--ssa-tint,#eee));border-color:var(--ssa-b-bd,var(--ssa-bd,#555))}
.ssa-b:focus-visible,.ssa-me:focus-visible{outline:2px solid var(--ssa-b-fc,var(--ssa-fc,currentColor));outline-offset:3px}
.ssa-p button:focus-visible,.ssa-bn button:focus-visible{outline:2px solid var(--ssa-fc,currentColor);outline-offset:3px}
.ssa-bn button:focus-visible{outline-color:var(--ssa-bn-fc,#fff)}
.ssa-i{flex:none}
.ssa-tx{display:grid;gap:1px}
.ssa-t{white-space:nowrap}
.ssa-s{display:block;min-width:5.4em;min-height:1.15em;font-size:.75rem;font-weight:400;color:var(--ssa-b-mut,var(--ssa-mut,#555));line-height:1.15;white-space:nowrap}
/* sous 1200 px : bouton carre de 44 px, icone seule ; le nom accessible (aria-label) dit « Animations, » et l'etat. Une charte a l'etroit plus haut ajoute sa propre limite (voir kochersberg.css). */
@media (max-width:1199px){.ssa-b{width:44px;padding:0;justify-content:center}.ssa-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* panneau */
.ssa-p{position:absolute;z-index:31;right:0;top:calc(100% + 10px);width:min(380px,calc(100vw - 2 * var(--ssa-edge,16px)));max-height:calc(100vh - 96px);max-height:calc(100svh - 96px);overflow:auto;overscroll-behavior:contain;padding:18px 18px 12px;background:var(--ssa-panel,var(--ssa-bg,#fff));color:var(--ssa-ink,#1a1a1a);border:1px solid var(--ssa-bd,#555);border-radius:var(--ssa-r,0);box-shadow:var(--ssa-sh,none);text-align:left}
.ssa-p[hidden]{display:none}
@media (max-width:699px){.ssa{position:static}.ssa-p{left:var(--ssa-edge,16px);right:var(--ssa-edge,16px);top:calc(100% + 8px);width:auto}}
.ssa-p h2{margin:0 0 4px;font:600 1.25rem/1.2 var(--ssa-s,Georgia,serif);letter-spacing:0;text-transform:none;color:var(--ssa-ink,#1a1a1a)}
.ssa-cur{margin:0 0 12px;font-size:.875rem;line-height:1.4;color:var(--ssa-mut,#555)}
.ssa-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ssa-c{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;width:100%;min-height:56px;padding:11px 12px;background:transparent;color:var(--ssa-ink,#1a1a1a);border:1px solid var(--ssa-bd,#555);border-radius:var(--ssa-r,0);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.ssa-c:hover{background:var(--ssa-tint,#eee)}
.ssa-c[aria-pressed="true"]{background:var(--ssa-tint,#eee);border-color:var(--ssa-acc,#1a1a1a);box-shadow:inset 0 0 0 1px var(--ssa-acc,#1a1a1a)}
.ssa-ct b{display:block;font-weight:600;font-size:.9375rem;line-height:1.3}
.ssa-ct span{display:block;margin-top:2px;font-size:.8125rem;line-height:1.4;color:var(--ssa-mut,#555)}
.ssa-r{width:20px;height:20px;margin-top:1px;border:1.5px solid var(--ssa-bd,#555);border-radius:50%;display:grid;place-items:center;color:transparent;font-style:normal}
.ssa-c[aria-pressed="true"] .ssa-r{background:var(--ssa-acc,#1a1a1a);border-color:var(--ssa-acc,#1a1a1a);color:#fff}
.ssa-n{margin:12px 0 0;font-size:.8125rem;line-height:1.4;color:var(--ssa-mut,#555)}
.ssa-auto{margin:6px 0 0;min-height:44px;padding:0 4px;background:transparent;border:0;color:var(--ssa-ink,#1a1a1a);font:500 .875rem var(--ssa-f,inherit);text-decoration:underline;text-underline-offset:3px;cursor:pointer;touch-action:manipulation}
.ssa-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* entree du menu mobile : posee par le script dans [data-ssa-menu] ; invisible tant que la charte ne l'affiche pas (display) */
.ssa-mi{list-style:none}
.ssa-me span{color:var(--ssa-mut,inherit)}
.ssa-me{display:none;gap:.4em;width:100%;margin:0;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
/* bandeau sous l'en-tete : mode leger decide tout seul, ou page qui a du mal a suivre */
.ssa-bn{position:absolute;left:0;right:0;top:100%;z-index:29;pointer-events:auto;background:var(--ssa-bn-bg,#222);color:var(--ssa-bn-ink,#fff);font-family:var(--ssa-f,inherit);font-size:.9375rem;line-height:1.35;text-transform:none;letter-spacing:0;font-style:normal;border-bottom:1px solid rgba(255,255,255,.14)}
.ssa-bn:empty{display:none}
.ssa-bn-in{display:flex;align-items:center;gap:6px 16px;min-height:48px;padding:4px var(--ssa-g,20px)}
.ssa-bn p{margin:0;flex:1 1 auto;font-weight:500;text-wrap:balance}
.ssa-bn button{min-height:44px;padding:0 14px;font:600 .875rem/1.15 var(--ssa-f,inherit);cursor:pointer;touch-action:manipulation;border-radius:var(--ssa-r,0)}
.ssa-bn .bn-a{background:var(--ssa-bn-btn,#fff);color:var(--ssa-bn-btn-ink,#222);border:1px solid var(--ssa-bn-btn,#fff)}
.ssa-bn .bn-a:hover{filter:brightness(.93)}
.ssa-bn .bn-x{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ssa-bn-ink,#fff);border:1px solid transparent;text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media (max-width:699px){
  .ssa-bn-in{gap:6px 10px;padding-top:6px;padding-bottom:6px}
  .ssa-bn p{font-size:.8125rem;line-height:1.3}
  .ssa-bn button{padding:0 10px;font-size:.8125rem}
  .ssa-bn .bn-x{width:44px;padding:0;justify-content:center;text-decoration:none}
  .bn-xt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:359px){.ssa-bn-in{flex-wrap:wrap}.ssa-bn p{flex-basis:calc(100% - 54px)}.ssa-bn .bn-x{order:2;margin-left:auto}.ssa-bn .bn-a{order:3}}
/* bulle sous le bouton (29/10, reglage-anim.js) : premier passage de la visite, en animations completes ; la pointe vise le centre du bouton carre de 44 px (et la fin du libelle au-dela de 1200 px) */
.ssa-b{position:relative}
.ssa-bu{position:absolute;z-index:32;right:0;top:calc(100% + 12px);width:max-content;max-width:min(13rem,calc(100vw - 32px));padding:10px 14px;background:var(--ssa-bn-bg,#222);color:var(--ssa-bn-ink,#fff);border-radius:var(--ssa-r,0);font:500 .875rem/1.35 var(--ssa-f,inherit);text-align:left;white-space:normal;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.ssa-bu::before{content:"";position:absolute;right:15px;bottom:100%;border:7px solid transparent;border-top:0;border-bottom-color:var(--ssa-bn-bg,#222)}
@media (prefers-reduced-motion:no-preference){
  .ssa-bu{animation:ssaBu .4s ease-out both,ssaBuH 1.1s ease-in-out .5s 3}
  @keyframes ssaBu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @keyframes ssaBuH{50%{transform:translateY(5px)}}
  .ssa-p:not([hidden]){animation:ssaIn .16s ease-out}
  .ssa-bn:not(:empty){animation:ssaBn .22s ease-out}
  @keyframes ssaIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes ssaBn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ===== E v4 : charte terre cuite (trois prompts de Robin), hero piloté par le défilement, plan de masse en boucle =====
   Jetons : fond #F9F8F5, texte #2C302E, secondaire #6B7270, action #D26E4B, survol #A65337, bordures #E5E4DF.
   #D26E4B ne porte jamais de texte courant (3,3:1 sur pierre) : boutons principaux avec texte blanc gras de 18,67 px au moins (grand texte, 3:1),
   filets, points, barres et focus. Liens et petits libellés colorés : #A65337 (5,1:1 sur pierre, 4,7:1 sur blanc). */
:root{--ac-h:#A65337;--shadow:0 1px 2px rgba(44,48,46,.04),0 16px 40px -20px rgba(44,48,46,.22)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.ft :focus-visible,.contact :focus-visible,.exb :focus-visible{outline-color:var(--onph)}
.logo{color:var(--ink)}
.card,.pc,.mcard,.out,.gd a{box-shadow:var(--shadow)}
/* téléphone : ombre légère (les grands flous coûtaient une image de 42 à 49 ms à l'apparition des cartes, CPU x4) */
@media (max-width:899px){:root{--shadow:0 1px 3px rgba(44,48,46,.12)}}
.card,.pc,.mcard{border:1px solid transparent}
.lb-mono,.stp,.sc-steps .job{letter-spacing:.04em;text-transform:uppercase}
.lb-mono{font-size:.75rem}
.sc-steps .job{font-size:.8125rem}

/* ---- Boutons : rectangulaires 2 px ; principal = #D26E4B, texte blanc gras 18,67 px au moins ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;background:var(--ac);color:#fff;font:700 1.17rem/1.2 Archivo,sans-serif;letter-spacing:-.01em;text-decoration:none;border:1px solid var(--ac);border-radius:2px;text-align:center;cursor:pointer;transition:background-color .25s var(--e),border-color .25s var(--e),transform .25s var(--e),box-shadow .25s var(--e)}
@media (max-width:520px){.btn{padding:10px 20px}}
.btn{max-width:100%;white-space:normal;text-wrap:balance}
.btn::before{content:none}
.btn .arr{flex:none;transition:transform .25s var(--e)}
.btn:hover,.btn:focus-visible{background:var(--ac-h);border-color:var(--ac-h);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(166,83,55,.55)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(3px)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-2{background:transparent;color:var(--ink);border:1px solid #8a918f;font:500 1rem/1.2 Archivo,sans-serif;letter-spacing:-.02em}
.btn-2:hover,.btn-2:focus-visible{background:var(--white);color:var(--ink);border-color:var(--ink);transform:none;box-shadow:none}
.bar .arr,.hd .arr{display:none}
.bar .btn{white-space:normal;line-height:1.15;padding:0 14px}

/* ---- Liens du texte et petits libellés colorés : #A65337 ---- */
.prose a,.intro a,.more-j a,.sub a,.fnote a,.src a,.gal-n a,.exf a,.sc-note a{color:var(--ac-h);text-underline-offset:3px;text-decoration-thickness:1px}
.prose .cta-b a.btn{color:#fff}
.prose .cta-b a.btn-2{color:var(--ink)}
.mcard .go,.pc .ex-l,.gd .more{color:var(--ac-h)}
.mc .mcard h3,.pc strong{color:var(--ink)}
.bc a{color:var(--ink)}
.todo{color:var(--ink)}

/* ---- En-tête collant : hauteur constante, seuls les couleurs et l'ombre changent après 24 px (classe .sc posée par site.js) ---- */
.hd{background:var(--stone);border-bottom:1px solid var(--line);transition:background-color .25s var(--e),box-shadow .25s var(--e)}
.hd.sc{background:var(--stone);box-shadow:0 8px 24px -16px rgba(44,48,46,.25)}
#sent{position:absolute;top:0;left:0;width:1px;height:24px;pointer-events:none}
.hd-menu summary{border-color:#8a918f}

/* ---- Apparitions en cascade des cartes [data-rv] : opacité et translateY(24px), 700 ms, 90 ms par carte ---- */
.anim [data-rv]{opacity:0;transform:translateY(24px)}
.anim [data-rv].in{opacity:1;transform:none;transition:opacity .7s var(--e) calc(var(--i,0) * 90ms),transform .7s var(--e) calc(var(--i,0) * 90ms)}
.pc[data-rv]{transition:none}

/* ===== Hero : image fixe (heure bleue, maison allumée), qui est aussi l'image 0 de la maison des quatre métiers (maison.css) : même fichier, même cadrage « cover » centré.
   Le titre et le bouton sont posés en bas, sur le muret et la terrasse, avec un voile local doux ; le ciel et la maison restent dégagés.
   Avec mouvement (html.anim) : le titre se révèle ligne par ligne au chargement, après l'intro du logo (site.js, .hero-in) ; sinon il est là tout de suite. ===== */
.hero{position:relative;height:calc(100svh - var(--hd));overflow:hidden;background:#121a2a;color:#F6EFE6}
.hero-vw{position:absolute;left:50%;top:50%;width:max(100%,calc((100svh - var(--hd)) * 16 / 9));aspect-ratio:16/9;translate:-50% -50%}
.hero-vw picture{display:contents}
.ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* voile de nuit dans l'angle haut gauche (sous la mention), le même que celui de la maison ; voile local doux sous le titre */
.hero::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 60% 66% at 6% 0,rgba(9,17,36,.7) 0%,rgba(9,17,36,.56) 42%,rgba(9,17,36,.2) 76%,rgba(9,17,36,0) 100%)}
@media (orientation:portrait) and (max-width:899px){.hero::before{display:none}}
/* 23/10 : voile plus haut (88 % au lieu de 70 %) pour la ligne sous le titre, qui remonte le titre de trois lignes de texte */
/* voile centre sur le bord gauche du titre (conteneur de 1360 px) et un peu plus haut : sur les fenetres plus larges que 16:9, le titre passait sur la terrasse claire (2,84:1 a 1920 x 930, 20/10) */
.hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 84% 88% at max(0px,calc((100% - 1360px) / 2)) 100%,rgba(8,12,22,.82) 0%,rgba(8,12,22,.68) 38%,rgba(8,12,22,.3) 70%,rgba(8,12,22,0) 100%)}
.hero-panel{position:absolute;z-index:5;left:max(var(--gut),calc((100% - 1360px) / 2 + var(--gut)));right:var(--gut);bottom:clamp(28px,6svh,64px);display:grid;grid-template-columns:minmax(0,auto) auto;justify-content:start;align-items:end;gap:14px 40px}
.hero h1{max-width:13.5em;font-size:clamp(1.85rem,4.1vw,3.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:#F6EFE6;text-wrap:balance;text-shadow:0 2px 22px rgba(8,12,22,.5)}
.hero .act{margin:0 0 4px}
/* ligne sous le titre (23/10) : titre et ligne dans la colonne de gauche, bouton à droite en bas ; sous 1100 px le bouton passe sous la ligne */
.hero h1{grid-column:1;grid-row:1}
.hero-lead{grid-column:1;grid-row:2;max-width:38rem;margin:0;font:400 clamp(1rem,1.3vw,1.1875rem)/1.5 Archivo,sans-serif;color:#F6EFE6;text-wrap:balance;text-shadow:0 1px 10px rgba(8,12,22,.6)}
.hero .act{grid-column:2;grid-row:1 / span 2;align-self:end}
@media (max-width:1099px){.hero-panel{grid-template-columns:minmax(0,1fr)}.hero .act{grid-column:1;grid-row:3;align-self:start}}
.hero-cap{position:absolute;z-index:5;left:max(var(--gut),calc((100% - 1360px) / 2 + var(--gut)));top:18px;margin:0;color:#e6e0d6;font:400 .75rem/1.4 var(--mono);letter-spacing:.02em;text-shadow:0 1px 6px rgba(8,12,22,.9);max-width:calc(100% - 2 * var(--gut))}
/* téléphone et tablette en portrait (décision de Robin, 19/10, 17h) : la maison en haut, lumineuse, sans voile ; le titre et le bouton dessous, sur un fond de nuit,
   avec un fondu court entre l'image et ce fond. La maison des quatre métiers suit le hero (pas de recouvrement : maison.css). */
@media (orientation:portrait) and (max-width:899px){
  .hero{display:flex;flex-direction:column;background:#0d1424}
  .hero-vw{position:relative;left:auto;top:auto;translate:none;flex:1 1 auto;min-height:0;width:100%;aspect-ratio:auto}
  .hero-vw .ly{object-position:50% 40%}
  .hero-vw::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;pointer-events:none;background:linear-gradient(rgba(13,20,36,0),#0d1424)}
  .hero::after{display:none}
  .hero-panel{position:relative;left:auto;right:auto;bottom:auto;flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:6px var(--gut) 24px;gap:12px}
  .hero h1,.hero-lead{text-shadow:none}
  .hero-lead{font-size:1rem;line-height:1.45}
  .hero .act{margin-top:6px}
  .hero-cap{position:relative;left:auto;top:auto;flex:none;padding:0 var(--gut) 14px;text-shadow:none}   /* la mention passe sous le bouton, sur le fond de nuit (le ciel de l'image est trop clair sans voile) */
}
@media (orientation:portrait) and (max-width:899px) and (max-height:600px){.hero-panel{gap:8px;padding-bottom:16px}.hero-lead{line-height:1.4}.hero .act{margin-top:2px}.hero-cap{padding-bottom:10px}}   /* 320 x 568 : un peu plus serré pour garder de l'image au-dessus du titre */
/* révélation : le titre monte ligne par ligne (mots masqués, site.js), puis le bouton ; sans script, en mouvement réduit ou si site.js manque (filet du head) : tout est là */
.js.anim:not(.hero-in) .hero-panel{visibility:hidden}
/* maison.css arrive après l'image du hero (élément LCP) : la boîte de la maison a déjà sa place définitive (aucun décalage, rien ne remonte plus près de l'écran), son contenu n'est mis en page qu'avec la feuille */
html.js .maison:not(.ms-fixe){position:relative;z-index:1;height:calc(100svh - var(--hd))}
html.js .maison:not(.ms-fixe) > .ms-track{display:none}
.hero .act{transition:opacity .7s var(--e),transform .7s var(--e)}
.js.anim .hero h1.sp:not(.in) ~ .act{opacity:0;transform:translateY(12px)}
.js.anim .hero h1.sp.in ~ .act{transition-delay:.75s}
.js .hero .sp .sw-i{transition-duration:1.1s;transition-delay:calc(var(--l,0) * 170ms + var(--k,0) * 12ms + .1s)}   /* ligne par ligne, plus lent que les h2 */
/* bouton Pause des vidéos (plan de masse) */
.hctl{position:absolute;right:var(--gut);bottom:16px;z-index:8;min-height:44px;min-width:44px;padding:0 16px;background:var(--stone);color:var(--ink);border:1px solid #8a918f;border-radius:2px;font:500 .9375rem/1 Archivo,sans-serif;letter-spacing:-.02em;cursor:pointer;touch-action:manipulation}
.hctl[hidden]{display:none}
.hctl:hover{background:var(--white)}

/* ===== Plan de masse (#scene) : section normale, vidéo lue une fois quand elle est visible, étape en grand, six points cliquables sur la dernière image =====
   Ordinateur avec mouvement (html.hs, section sans .ps-off) : grande vidéo, panneau en haut à gauche (étape, métier, ouvrage, six crans), carte du point en haut à droite,
   bouton Pause / Lecture / Revoir en bas à droite. Sinon (téléphone, mouvement réduit, sans script, échec de la vidéo) : dernière image, six points,
   carte sous l'image, liste des six étapes en texte. */
.scene-sec{position:relative;padding:var(--gap) 0}
.sc-stage{display:grid;gap:22px;align-content:start}
.sc-head{display:contents}
.sc-head h2{order:1;max-width:14em}
.sc-now{display:none}
.sc-hint{order:2;max-width:36em;color:var(--ui)}
.scene{order:3;margin:0}
.pcards{order:4}
.sc-steps{order:5;list-style:none;margin:0;padding:0;display:grid}
.sc-note{order:6;max-width:30em;margin:0;color:var(--ui)}
.sc-steps li{display:grid;grid-template-columns:2.4rem 1fr;gap:2px 8px;padding:12px 0;border-top:1px solid var(--line)}
.sc-steps .num{grid-row:1/3;font:400 .875rem/1.5 var(--mono);letter-spacing:.04em;color:var(--ui)}
.sc-steps .job{font-family:var(--mono)}
.sc-steps .tx{font-size:1.0625rem}
.pstack{position:relative;aspect-ratio:16/9;background:#e9dcc3;border-radius:2px;overflow:hidden}
.pstack picture{display:block}
.pfin,.pvid{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.pvid{opacity:0;transition:opacity .4s var(--e)}
.pvid.on{opacity:1}
.scene .lb-mono{margin-top:12px}
.pts{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:3}
.pts li{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:0;height:0}
/* point du plan : cible de 44 px (--d), pastille visible de 36 px (--v, 40 sur grand écran) dessinée par ::before */
.pnt{--d:44px;--v:36px;position:absolute;left:calc(var(--d) / -2);top:calc(var(--d) / -2);width:var(--d);height:var(--d);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);isolation:isolate;font:700 .875rem/1 var(--mono);cursor:pointer;transition:transform .2s var(--e),opacity .4s var(--e)}
.pnt::before{content:"";position:absolute;z-index:-1;inset:calc((var(--d) - var(--v)) / 2);border-radius:50%;background:var(--stone);border:2px solid var(--ink);box-shadow:0 2px 10px rgba(44,48,46,.4)}
.pnt:hover,.pnt[aria-expanded="true"]{color:var(--stone);transform:scale(1.08)}
.pnt:hover::before,.pnt[aria-expanded="true"]::before{background:var(--ink)}
.pnt:focus-visible{outline:none}
.pnt:focus-visible::before{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.pcard{max-width:34rem;padding:20px 22px 18px;background:var(--stone);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);color:var(--ink)}
.pcard[hidden]{display:none}
.pcard:not([hidden]){animation:pcIn .28s var(--e)}
.pc-k{margin:0;color:var(--ui)}
.pcard h3{margin-top:6px;font-size:1.5rem}
.pc-o{margin:2px 0 0;font-weight:600}
.pc-s{margin:12px 0 0}
.pc-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin:12px 0 0}
.pc-a .go{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--ac-h);text-underline-offset:4px}
.pc-x{min-height:44px;min-width:44px;padding:0 16px;background:transparent;color:var(--ink);border:1px solid #8a918f;border-radius:2px;font:500 .9375rem/1 Archivo,sans-serif;letter-spacing:-.02em;cursor:pointer}
.pc-x:hover{background:var(--white)}
@keyframes pcIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.pcard:not([hidden]){animation:none}}
html.rm .pcard:not([hidden]){animation:none}
@keyframes scIn{from{opacity:.2;transform:translateY(8px)}}
@media (min-width:900px){
  .sc-steps{grid-template-columns:repeat(3,1fr);gap:0 36px}
  .pnt{--v:40px}
}
@media (min-width:900px) and (min-height:640px){
  html.hs .scene-sec:not(.ps-off) .sc-stage{display:block;position:relative;max-width:1600px}
  html.hs .scene-sec:not(.ps-off) .scene{margin:0}
  html.hs .scene-sec:not(.ps-off) .sc-head{display:block;position:absolute;z-index:9;left:calc(var(--gut) + 20px);top:20px;width:min(24rem,40%);padding:22px 26px 22px;background:var(--stone);border-radius:2px;box-shadow:var(--shadow)}
  html.hs .scene-sec:not(.ps-off) .sc-head h2{max-width:none;font-size:clamp(1.2rem,1.7vw,1.5rem)}
  html.hs .scene-sec:not(.ps-off) .sc-now{display:grid;gap:4px;margin:14px 0 0}
  html.hs .scene-sec:not(.ps-off) .sc-now .n{font-family:var(--serif);font-weight:500;font-size:clamp(3rem,5vw,4.25rem);line-height:1;letter-spacing:-.02em}
  html.hs .scene-sec:not(.ps-off) .sc-now .j{font:400 .8125rem/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ac-h);margin-top:6px}
  html.hs .scene-sec:not(.ps-off) .sc-now .o{font:500 1.25rem/1.25 Archivo,sans-serif;letter-spacing:-.02em}
  html.hs .scene-sec:not(.ps-off) .sc-now.chg > *{animation:scIn .35s var(--e)}
  html.hs .scene-sec:not(.ps-off) .sc-hint{margin:14px 0 0;color:var(--ink)}
  html.hs .scene-sec:not(.ps-off).is-end .sc-now,html.hs .scene-sec:not(.ps-off):not(.is-end) .sc-hint{display:none}
  html.hs .scene-sec:not(.ps-off) .sc-steps{grid-template-columns:repeat(6,1fr);gap:6px;margin-top:18px}
  html.hs .scene-sec:not(.ps-off) .sc-steps li{display:block;height:5px;padding:0;border:0;background:#8a918f;transition:background-color .3s var(--e)}
  html.hs .scene-sec:not(.ps-off) .sc-steps li.on{background:var(--ac)}
  html.hs .scene-sec:not(.ps-off) .sc-steps li > *,html.hs .scene-sec:not(.ps-off) .sc-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.hs .scene-sec:not(.ps-off) .pctl{right:16px;bottom:16px}
  html.hs .scene-sec:not(.ps-off) .pcards{position:absolute;z-index:10;top:20px;right:calc(var(--gut) + 20px);width:min(27rem,42%)}
  html.hs .scene-sec:not(.ps-off) .pcard{max-width:none}
  html.hs .scene-sec:not(.ps-off):not(.is-end) .pnt{opacity:0;visibility:hidden;pointer-events:none}
  html.hs .scene-sec:not(.ps-off) .pts li:nth-child(2) .pnt{transition-delay:0s,.07s}
  html.hs .scene-sec:not(.ps-off) .pts li:nth-child(3) .pnt{transition-delay:0s,.14s}
  html.hs .scene-sec:not(.ps-off) .pts li:nth-child(4) .pnt{transition-delay:0s,.21s}
  html.hs .scene-sec:not(.ps-off) .pts li:nth-child(5) .pnt{transition-delay:0s,.28s}
  html.hs .scene-sec:not(.ps-off) .pts li:nth-child(6) .pnt{transition-delay:0s,.35s}
}

/* réponses de la FAQ : texte principal (le filet entre deux questions passe sous la boîte de texte) */
.fq .ans{color:var(--ink)}

/* ===== Intro de l'accueil « L'allumage » (site.js, intro()) : nuit, le logo s'écrit dans le ciel, son point glisse jusqu'à la lampe de la porte et devient sa lumière,
   puis le clip allume la maison jusqu'à l'image du hero (même cadre que .hero-vw), fondu de 0,4 s. Écran sombre dès le premier rendu (html.intro-nuit, amorce du head). ===== */
html.intro-on.intro-nuit::before{background:#070b13}
.ss-intro.allumage{display:block;background:#070b13;color:#F6EFE6;animation:none}
.allumage .in-stage{position:absolute;left:0;right:0;top:var(--hd);height:calc(100svh - var(--hd));overflow:hidden}
.allumage .in-box{position:absolute;left:50%;top:50%;width:max(100%,calc((100svh - var(--hd)) * 16 / 9));aspect-ratio:16/9;translate:-50% -50%;opacity:0;transition:opacity .5s ease}
@media (orientation:portrait) and (max-width:899px){.allumage .in-box{width:max(100%,calc((100svh - var(--hd)) * 9 / 16));aspect-ratio:9/16}}
.allumage .in-nuit,.allumage .in-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.allumage .in-vid{opacity:0}
.allumage.nuit .in-box,.allumage.joue .in-vid{opacity:1}
.allumage .iw{position:absolute;left:50%;top:calc(var(--hd) + 6svh);width:min(56vw,460px);translate:-50% 0;transform:none;animation:none;color:#F6EFE6;transition:opacity .45s ease}
.allumage:not(.ecrit) :is(.L path,.idot3,.ihalo){animation:none;opacity:0}
/* écriture du logo en 0,9 s (1,3 s avant le 30/10 : durées et retards de e-v2.css multipliés par 0,69, valable pour l'accueil seulement) */
.allumage .L path{animation-duration:.43s,.21s;animation-delay:calc(var(--k) * 31ms),.57s}
.allumage .idot3{animation-duration:.21s;animation-delay:.66s}
.allumage .ihalo{animation-duration:.41s;animation-delay:.66s}
.allumage.glisse .iw{opacity:0}
.allumage .in-dot{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff3dc 0,#ff8a3d 55%,#ff6a2b 100%);box-shadow:0 0 18px 6px rgba(255,140,70,.55);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.45,0,.2,1),opacity .55s ease}
.allumage.glisse .in-dot{opacity:1}
.allumage.lampe .in-dot{opacity:0;transition:transform .7s cubic-bezier(.45,0,.2,1),opacity .6s ease .1s}
.allumage.fin{opacity:0;transition:opacity .4s linear}
.allumage.fin:not(.joue){transition-duration:1.2s}
.allumage .intro-skip{color:#F6EFE6;border-color:rgba(246,239,230,.75);animation:none;z-index:6}
.allumage .intro-skip:focus-visible{outline-color:#F6EFE6}

/* barre fixe du bas (téléphone) : sur l'accueil (html.bar-attend, amorce du head), elle n'arrive qu'une fois le bouton du hero sorti de l'écran et part quand le contact est à l'écran
   (site.js, barre()) : un seul bouton orange à la fois. Transformation seulement (aucun décalage) ; sans script ou si site.js manque : visible comme ailleurs. */
html.bar-attend .bar:not(.bar-on){transform:translateY(calc(100% + 2px));visibility:hidden;transition:transform .35s var(--e),visibility 0s linear .35s}
html.bar-attend .bar.bar-on{transition:transform .35s var(--e),visibility 0s}
@media (prefers-reduced-motion:reduce){html.bar-attend .bar,html.bar-attend .bar.bar-on{transition:none}}
html.rm.bar-attend .bar,html.rm.bar-attend .bar.bar-on{transition:none}
/* intro sur téléphone en portrait : la nuit et le clip occupent exactement la boîte de l'image du hero (posée par site.js), même cadrage (50 % 40 %) */
@media (orientation:portrait) and (max-width:899px){
  .allumage .in-box{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;translate:none}
  .allumage .in-nuit,.allumage .in-vid{object-position:50% 40%}
  .ss-intro.allumage{background:#0d1424}   /* même fond de nuit que sous le titre du hero */
  .allumage .in-stage::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:1;pointer-events:none;background:linear-gradient(rgba(13,20,36,0),#0d1424)}
}
/* accueil : les sections sous l'établi ne sont mises en page et peintes qu'en approchant de l'écran (content-visibility) ; le premier affichage du hero en est allégé
   (LCP téléphone, 19/10). La taille retenue après le premier rendu évite les sauts ; la barre fixe n'est pas concernée. */
#ecrans,#clients,#clients~section:not(.bar){content-visibility:auto;contain-intrinsic-size:auto 900px}   /* l'établi aussi : depuis que la maison tient en un écran, ses images partaient avant l'image du hero */
/* bouton Animations du pied de page (23/10, mode léger) : état actuel, puis un bouton par autre choix (site.js, motionBtn) */
.mt-e{margin:0;color:var(--onph);font:400 .8125rem/1.5 var(--mono);letter-spacing:0}
.mt-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* ---- Réglage « Animations » de l'en-tête (24/10) : jetons de la charte et mise en place ; le composant est dans reglage-anim.css / reglage-anim.js ---- */
:root{--ssa-bg:var(--stone);--ssa-ink:var(--ink);--ssa-mut:#5A615F;--ssa-line:#8A918F;--ssa-bd:#7F8785;--ssa-acc:var(--ac-h);--ssa-tint:#F3E7E0;--ssa-r:2px;--ssa-f:Archivo,system-ui,sans-serif;--ssa-s:"Playfair Display",Georgia,serif;--ssa-fc:var(--ink);--ssa-sh:0 14px 30px -18px rgba(44,48,46,.45);--ssa-edge:var(--gut);--ssa-g:var(--gut);--ssa-bn-bg:var(--leaf);--ssa-bn-ink:var(--onph);--ssa-bn-btn:var(--onph);--ssa-bn-btn-ink:var(--leaf);--ssa-bn-fc:var(--onph)}
.hd-nav{margin-left:auto}
.ssa{margin-left:12px}
@media (min-width:1200px){.ssa-b{border-color:transparent}.ssa-b:hover,.ssa-b[aria-expanded="true"]{border-color:var(--ssa-bd)}}
@media (max-width:999px){.hd-in{gap:8px}.logo{margin-right:auto}.ssa{margin-left:0}}
@media (max-width:359px){.logo svg{height:14px}.hd-menu summary{padding:0 12px}}   /* 320 px : logo, bouton Animations et Menu tiennent sur la ligne */
.hd-menu nav{z-index:30}
.hd-menu nav .ssa-me{display:flex;align-items:center;min-height:48px;font-size:1.0625rem;border-top:1px solid var(--line);color:var(--ink)}