/* ============================================================
   Alta Madeira — feuille de style unique (issue des maquettes 03–07, oct. 2026)
   Palette : Verde Floresta #1E3329 · Latão #A98545 (#7A5F2C texte sur crème,
   #C7A767 sur vert) · Creme #F1EBDD · Carvão #26231F
   Colonne : une seule, marge = 5 % de l'écran plafonnée à 96 px, largeur max 2000 px.
   ============================================================ */
:root{
  --verde:#1E3329; --verde-2:#17281F; --verde-3:#243D31;
  --latao:#A98545; --latao-txt:#7A5F2C; --latao-claro:#C7A767;
  --creme:#F1EBDD; --creme-2:#E8E0CD; --areia:#DCD2BA;
  --carvao:#26231F; --cinza:#5E5950;
  --serif:"Spectral",Georgia,serif; --sans:"Archivo",system-ui,sans-serif;
  --hand:"Architects Daughter","Bradley Hand","Segoe Print",cursive;
  --w:2000px; --gut:clamp(20px,5vw,96px); --hh:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px)}
body{font-family:var(--sans);color:var(--carvao);background:var(--creme);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--latao);color:var(--creme);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--latao-txt);font-weight:600}
.dark .eyebrow,.dark.eyebrow{color:var(--latao-claro)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-weight:600;font-size:.9rem;letter-spacing:.02em;border:1px solid var(--latao);background:var(--latao);color:var(--creme);transition:.2s;white-space:nowrap}
.btn:hover{background:var(--latao-txt);border-color:var(--latao-txt)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.dark .btn.ghost:hover{background:rgba(255,255,255,.08)}
.link{font-weight:600;font-size:.88rem;color:var(--latao-txt);display:inline-flex;gap:8px;align-items:center}
.link::after{content:"→"}
.dark{background:var(--verde);color:var(--creme)}
.dark h1,.dark h2,.dark h3{color:var(--creme)}
.dark .link{color:var(--latao-claro)}
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:36px}
.sec-head h2{font-size:clamp(2rem,3.4vw,2.9rem);margin-top:10px}
.sec-head p{color:var(--cinza);max-width:44ch}
.dark .sec-head p{color:var(--creme);opacity:.85}

/* ---------- photos (emplacements) ---------- */
figure.ph{position:relative;aspect-ratio:var(--r,3/2);overflow:hidden;background:var(--areia);margin:0}
figure.ph img{width:100%;height:100%;object-fit:cover}
figure.ph figcaption{position:absolute;right:14px;bottom:12px;pointer-events:none}
.fr-tag{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--creme);background:rgba(38,35,31,.55);padding:4px 8px}
figure.ph .ph-preview{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  background:var(--areia) repeating-linear-gradient(135deg,rgba(38,35,31,.07) 0 12px,transparent 12px 24px);outline:1px dashed var(--latao);outline-offset:-10px}
figure.ph .ph-preview span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--latao-txt);background:var(--creme);padding:8px 12px;max-width:80%}
figure.ph .ph-preview small{position:absolute;left:14px;bottom:12px;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--carvao);opacity:.6}
.door .ph-preview{background:var(--verde-3) repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px);outline-color:rgba(199,167,103,.5);align-items:start}
.door .ph-preview span{background:var(--verde-2);color:var(--latao-claro)}
.door .ph-preview small{display:none}

/* ---------- carrousel photo (emplacements à plusieurs photos) ---------- */
.gal-stage{position:relative}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:2px solid var(--latao);outline-offset:3px}
.gal-track>figure.ph{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(241,235,221,.55);background:rgba(38,35,31,.45);color:var(--creme);display:grid;place-items:center;transition:.2s;z-index:1}
.gal-btn:hover,.gal-btn:focus-visible{background:var(--latao);border-color:var(--latao);outline:0}
.gal-prev{left:14px}.gal-next{right:14px}
.gal-btn svg{width:20px;height:20px}.gal-next svg{transform:scaleX(-1)}
.gal-nav{display:flex;align-items:center;gap:16px;margin-top:12px}
.gal-dots{display:flex;gap:6px}
.gal-dots button{width:22px;height:16px;padding:0;border:0;background:none;position:relative}
.gal-dots button::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--latao);opacity:.3;transition:.25s}
.gal-dots button.on::before,.gal-dots button:hover::before{opacity:1}
.gal-n{font-size:.7rem;letter-spacing:.14em;color:var(--latao-txt);font-weight:600;font-variant-numeric:tabular-nums}
.gal-n b{font-weight:600}
.gal+.cap{margin-top:8px}
@media(prefers-reduced-motion:reduce){.gal-track{scroll-behavior:auto}}

/* ---------- en-tête ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--verde);color:var(--creme);border-bottom:1px solid rgba(255,255,255,.08)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:40px;height:40px;flex:none}
.brand-name b{font-family:var(--serif);font-weight:500;letter-spacing:.14em;font-size:.98rem;display:block;line-height:1;white-space:nowrap}
.brand-name span{font-style:normal;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--latao-claro);display:block;margin-top:5px;white-space:nowrap}
.nav{display:flex;gap:30px}
.nav a{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--creme);padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--latao-claro);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-right{display:flex;align-items:center;gap:22px}
.lang{display:flex;gap:16px}
.lang a,.lang span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--creme);padding:6px 0;position:relative}
.lang a{opacity:.55;transition:opacity .2s}.lang a:hover{opacity:1}
.lang a::after,.lang span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--latao-claro);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.lang a:hover::after,.lang span::after{transform:scaleX(1)}
.site-header .btn{padding:11px 18px;font-size:.8rem}
.burger{display:none;width:28px;height:18px;border:0;background:none;border-top:2px solid var(--creme);border-bottom:2px solid var(--creme);position:relative;padding:0}
.burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--creme);transform:translateY(-50%)}
.mobile-menu{display:none;position:fixed;top:var(--hh);left:0;right:0;bottom:0;z-index:19;background:var(--verde-2);color:var(--creme);padding:28px var(--gut);flex-direction:column;gap:6px}
.mobile-menu a.m{font-family:var(--serif);font-size:1.7rem;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu .lang{margin-top:22px;gap:18px;font-size:.84rem}
.menu-open .mobile-menu{display:flex}
.menu-open body{overflow:hidden}

/* ---------- hero (croquis 3D) ---------- */
.hero{position:relative;height:calc(100vh - var(--hh));min-height:620px;overflow:hidden;
  /* couleurs du croquis 3D (lues par asna-hero.js sur #stage) */
  --paper:#1E3329;--ink:#EFE6D2;--accent:#C7A767;--wash:#8C6F3A;--wash2:#2F4D3C;--sky:#24403A;--hill2:#2A4A38;--tile:#B8683F;background:radial-gradient(ellipse 60% 55% at 62% 42%,#2C4D3C 0%,#24402F 45%,#1E3329 100%)}
.stage{position:absolute;inset:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.stage canvas:active{cursor:grabbing}
.stage canvas:focus-visible{outline:2px solid var(--latao-claro);outline-offset:-4px}
.hero figure.ph.full{position:absolute;inset:0;aspect-ratio:auto;background:var(--verde-3)}
.hero.has-photo .stage{display:none}
.hero.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,51,41,.92) 25%,rgba(30,51,41,.5) 60%,rgba(30,51,41,.2) 100%);pointer-events:none}
.hero-grid{position:absolute;inset:0;max-width:var(--w);margin:0 auto;padding:0 var(--gut);pointer-events:none;z-index:2}
.hero-eyebrow{position:absolute;left:var(--gut);top:26px}
.hero-hint{position:absolute;right:var(--gut);top:26px;font-family:var(--hand);font-size:14px;color:var(--latao-claro);opacity:.75}
.hero-cart{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;font-family:var(--hand);font-size:13px;color:var(--latao-claro);opacity:.7;border-top:1px solid var(--latao);padding-top:4px;white-space:nowrap}
.hero-txt{position:absolute;left:var(--gut);bottom:clamp(36px,7vh,72px);max-width:460px}
.hero-txt > *{pointer-events:auto}
.hero-txt::before{content:"";position:absolute;inset:-60px -80px -60px -60px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 60%,rgba(30,51,41,.92) 30%,rgba(30,51,41,0) 72%)}
.hero h1{font-size:clamp(1.7rem,2.5vw,2.5rem);margin:12px 0 12px;max-width:18ch;color:var(--creme)}
.hero h1 em{font-style:italic;color:var(--latao-claro)}
.hero .sub{opacity:.86;font-size:.95rem;max-width:40ch;margin-bottom:20px;color:var(--creme)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{padding:13px 20px;font-size:.84rem}
.hero .btn.ghost{color:var(--creme)}
.hero-proof{position:absolute;right:var(--gut);bottom:clamp(36px,7vh,72px);display:grid;gap:10px;text-align:right;font-size:.78rem;color:var(--creme);opacity:.85}
.hero-proof b{font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--latao-claro);margin-right:8px;line-height:1}
.hero-proof sup{font-size:.5em}

/* ---------- portes (accueil) ---------- */
.doors-sec{padding:clamp(48px,6vh,72px) 0}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:320px}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 30px;border:1px solid rgba(199,167,103,.35);overflow:hidden;color:var(--creme);transition:.25s;background:var(--verde-3) repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px);min-height:320px}
.door figure.ph{position:absolute;inset:0;aspect-ratio:auto}
.door figure.ph figcaption{bottom:auto;top:14px;right:auto;left:14px}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,40,31,0) 30%,rgba(23,40,31,.92) 100%);pointer-events:none}
.door > *:not(figure){position:relative;z-index:2}
.door .tag{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--latao-claro);font-weight:600}
.door h2{font-size:clamp(1.7rem,2.6vw,2.4rem);margin:8px 0 8px;color:var(--creme)}
.door p{font-size:.9rem;opacity:.85;max-width:52ch}
.door .arrow{position:absolute;right:26px;top:24px;z-index:2;width:44px;height:44px;border:1px solid var(--latao-claro);border-radius:50%;display:grid;place-items:center;color:var(--latao-claro);font-size:1.1rem}
.door:hover{border-color:var(--latao-claro)}
.door:hover .arrow{background:var(--latao-claro);color:var(--verde)}
.doors-sec .reno{margin-top:18px;text-align:center;font-size:.86rem;color:var(--cinza)}
.doors-sec .reno a{color:var(--latao-txt);border-bottom:1px solid currentColor}

/* ---------- pourquoi (accueil) ---------- */
.why{padding:clamp(64px,8vh,96px) 0}
.why .wrap{display:grid;grid-template-columns:minmax(260px,.9fr) 1.6fr;grid-template-rows:auto 1fr;grid-template-areas:"media head" "media body";column-gap:clamp(36px,5vw,72px);align-items:start}
.why figure.ph{max-width:380px}
.why h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:14px 0 18px;max-width:18ch}
.why .lead{font-size:1.05rem;color:var(--cinza);max-width:56ch;margin-bottom:28px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.why-grid > div{border-top:1px solid var(--latao);padding-top:18px}
.why-grid h3{font-size:1.2rem;margin-bottom:8px}
.why-grid p{font-size:.92rem;color:var(--cinza)}
.why-grid svg{width:100%;margin:6px 0 10px}
.steps{display:flex;margin-top:30px;border:1px solid rgba(38,35,31,.14)}
.steps div{flex:1;padding:16px 20px;border-left:1px solid rgba(38,35,31,.14);font-size:.88rem;color:var(--cinza)}
.steps div:first-child{border-left:0}
.steps b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--carvao);margin-bottom:2px}
.steps b::before{content:attr(data-n);font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;color:var(--latao-txt);margin-right:10px;vertical-align:middle}
.proline{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:.92rem;color:var(--cinza)}

/* ---------- contact court (accueil) ---------- */
.e3{padding:clamp(64px,8vh,96px) 0 0}
.e3 .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start;padding-bottom:clamp(56px,8vh,88px)}
.e3 h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:14px 0 18px}
.e3 p{opacity:.85;font-size:1.03rem;max-width:40ch}
.direct{margin-top:30px;display:grid;gap:12px;font-size:.95rem}
.direct div{display:flex;gap:14px;align-items:baseline}
.direct span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--latao-claro);width:84px;flex:none}

/* ---------- formulaires ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:var(--verde-2);padding:30px;border:1px solid rgba(255,255,255,.1);color:var(--creme)}
.form .ft{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.form .ft h3{font-size:1.4rem;color:var(--creme)}
.form .ft span{font-size:.78rem;opacity:.7}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:var(--creme);padding:10px 0;font:inherit;font-size:.95rem;outline:0;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--latao-claro)}
.field select option{color:var(--carvao)}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(241,235,221,.4)}
.seg{display:flex;border:1px solid rgba(255,255,255,.25)}
.seg label{flex:1;text-align:center;padding:10px 6px;font-size:.78rem;letter-spacing:.04em;text-transform:none;opacity:.8;cursor:pointer;border-left:1px solid rgba(255,255,255,.25)}
.seg label:first-child{border-left:0}
.seg input{display:none}
.seg label:has(input:checked){background:rgba(199,167,103,.14);opacity:1;color:var(--latao-claro)}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.form .priv{grid-column:1/-1;font-size:.74rem;opacity:.55}
.form .priv a{text-decoration:underline}
.form .status{grid-column:1/-1;font-size:.9rem;min-height:1.2em}
.form .status.err{color:#E7B9A3}
.hp{position:absolute;left:-9999px}
details.details{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:14px}
details.details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.9rem}
details.details summary::-webkit-details-marker{display:none}
details.details summary::after{content:"+";font-family:var(--serif);font-size:1.4rem;color:var(--latao-claro)}
details.details[open] summary::after{content:"−"}
details.details .hint{font-size:.82rem;opacity:.65;margin:8px 0 14px}
details.details .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
details.details .note{grid-column:1/-1;font-size:.78rem;opacity:.6;margin-top:10px}
details.details .field[hidden]{display:none}

/* ---------- bandeau de titre des sous-pages ---------- */
.phead{padding:clamp(22px,3.5vh,34px) 0}
.phead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.phead h1{font-size:clamp(1.6rem,2.4vw,2.2rem);display:flex;align-items:baseline;gap:16px;color:var(--creme)}
.phead h1 .eyebrow{font-size:.66rem}
.jump{display:flex;gap:10px;flex-wrap:wrap}
.jump a{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--latao-claro);border:1px solid rgba(199,167,103,.4);padding:8px 12px}
.jump a:hover{background:rgba(199,167,103,.14)}

/* ---------- services ---------- */
.fam{padding:clamp(64px,8vh,96px) 0}
:root{--colgap:clamp(36px,5vw,80px)}
.fam .wrap{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto 1fr;grid-template-areas:"media head" "media body";column-gap:var(--colgap);row-gap:0;align-items:stretch}
.fam.rev .wrap{grid-template-columns:1.15fr 1fr;grid-template-areas:"head media" "body media"}
/* blocs photo + texte : titre / photo / corps (sur mobile, le titre passe avant la photo) */
.fhead{grid-area:head}.fbody{grid-area:body}.why .media,.who .media,.atelier .media,.fam .media{grid-area:media}
.wrap.nomedia{grid-template-columns:1fr;grid-template-areas:"head" "body"}
.media{position:static}
.fam .media figure.ph{aspect-ratio:4/5 !important}
.media .cap{margin-top:12px;font-size:.84rem;color:var(--cinza);font-style:italic;font-family:var(--serif)}
.fam .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--latao-txt);font-weight:600}
.fam h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:10px 0 6px}
.fam .sub{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--cinza);margin-bottom:26px}
.items{list-style:none;border-top:1px solid rgba(38,35,31,.14)}
.items li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid rgba(38,35,31,.14)}
.items .n{font-size:.7rem;letter-spacing:.14em;color:var(--latao-txt);padding-top:6px}
.items h3{font-size:1.3rem;margin-bottom:4px}
.items p{font-size:.95rem;color:var(--cinza)}
.items .more{font-size:.8rem;color:var(--latao-txt);font-weight:600;margin-left:6px}
.fam .foot{margin-top:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fam .foot span{font-size:.86rem;color:var(--cinza)}

/* croquis pédagogique (Serviços) — fond papier */
.asna{padding:clamp(56px,8vh,96px) 0;border-top:1px solid rgba(38,35,31,.12);border-bottom:1px solid rgba(38,35,31,.12);background:var(--creme-2);
  /* même ambiance que le hero : croquis sur vert sombre (choix de Gaetan) */
  --paper:#1E3329;--ink:#EFE6D2;--accent:#C7A767;--wash:#8C6F3A;--wash2:#2F4D3C;--sky:#24403A;--hill2:#2A4A38;--tile:#B8683F}
.asna .sec-head{display:block;margin-bottom:clamp(20px,3vw,36px)}
.asna .sec-head h2{max-width:22ch}
.asna-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--colgap);align-items:start}
/* le bord droit du croquis tombe sur la ligne où commencent les photos des sections voisines */
.asna-sticky{margin-right:calc(-1 * var(--colgap))}
.asna-steps{padding-left:var(--colgap)}
.asna-sticky{position:sticky;top:calc(var(--hh) + 14px);min-width:0}
.asna-stage{position:relative;background:var(--verde);border:1px solid rgba(38,35,31,.14);aspect-ratio:4/3;overflow:hidden}
.asna-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.asna-stage canvas:active{cursor:grabbing}
.asna-cart{position:absolute;right:12px;bottom:10px;font-family:var(--hand);font-size:14px;line-height:1.25;color:var(--latao-claro);text-align:right;border-top:1px solid var(--latao);padding-top:4px;pointer-events:none;opacity:.85}
.asna-hint{position:absolute;left:12px;bottom:10px;font-family:var(--hand);font-size:14px;color:var(--latao-claro);pointer-events:none;opacity:.8}
.asna-note{margin:10px 0 0;font-size:13px;color:var(--cinza);line-height:1.45}
.asna-steps{display:flex;flex-direction:column;padding-bottom:18vh}
.stepcard{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:.35;transition:opacity .35s}
.stepcard.on{opacity:1}
.stepcard .n{font-size:12px;letter-spacing:.16em;color:var(--latao-txt)}
.stepcard h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2}
.stepcard p{max-width:44ch;color:var(--cinza)}

/* ---------- encarts côte à côte ---------- */
.bands{padding:clamp(56px,8vh,88px) 0}
.bands .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bands.n3 .wrap{grid-template-columns:1fr 1fr 1fr}
.band{border:1px solid var(--latao);padding:30px 32px;display:flex;flex-direction:column;gap:10px}
.band h3{font-size:1.5rem}
.band p{color:var(--cinza);flex:1}
.band .btn{align-self:flex-start}
.band.dark{border-color:transparent}
.band.dark p{color:var(--creme);opacity:.85}
.band.dark .btn.ghost{color:var(--creme)}

/* ---------- appel final ---------- */
.cta{padding:clamp(56px,8vh,88px) 0;text-align:center}
.cta h2{font-size:clamp(2rem,3.6vw,3rem);margin:12px auto 14px}
.cta p{opacity:.85;max-width:44ch;margin:0 auto 26px}

/* ---------- à propos ---------- */
.who{padding:clamp(64px,8vh,96px) 0}
.who .wrap{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;grid-template-rows:auto 1fr;grid-template-areas:"media head" "media body";column-gap:clamp(36px,5vw,80px);align-items:start}
.who .media figure.ph{max-width:460px}
.who h2{font-size:clamp(2.1rem,3.6vw,3.2rem);margin:10px 0 22px;max-width:16ch}
.who p{font-size:1.08rem;color:var(--cinza);max-width:58ch;margin-bottom:16px}
.quote{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--verde);border-left:2px solid var(--latao);padding-left:22px;margin:30px 0}
.quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--latao-txt);margin-top:12px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid rgba(38,35,31,.14);padding-top:22px;margin-top:10px}
.facts b{font-family:var(--serif);font-weight:500;font-size:2.2rem;color:var(--latao-txt);display:block;line-height:1}
.facts b sup{font-size:.5em}
.facts span{font-size:.84rem;color:var(--cinza);display:block;margin-top:6px}
.parcours{padding:0 0 clamp(64px,8vh,96px)}
.parcours ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--latao)}
.parcours li{padding:22px 24px 0 0;border-right:1px solid rgba(38,35,31,.12);margin-right:24px}
.parcours li:last-child{border-right:0;margin-right:0}
.parcours b{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--verde);display:block;margin-bottom:6px}
.parcours span{font-size:.9rem;color:var(--cinza)}
.parcours .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--latao-txt);display:block;margin-bottom:8px}
.obras{padding:clamp(56px,8vh,88px) 0;background:var(--creme-2);border-top:1px solid rgba(38,35,31,.1);border-bottom:1px solid rgba(38,35,31,.1)}
.obras .head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.obras h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:8px}
.obras .head p{color:var(--cinza);max-width:44ch}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.metodo{padding:clamp(64px,8vh,96px) 0}
.metodo ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.metodo li{border-top:1px solid var(--latao);padding-top:22px}
.metodo li b{font-family:var(--serif);font-weight:400;font-size:3rem;line-height:1;color:var(--latao);display:block;margin-bottom:12px}
.metodo h3{font-size:1.4rem;margin-bottom:8px}
.metodo p{color:var(--cinza);font-size:.96rem}
.atelier{padding:0 0 clamp(64px,8vh,96px)}
.atelier .wrap{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;grid-template-areas:"media head" "media body";column-gap:clamp(36px,5vw,80px);align-items:center}
.atelier .fhead{align-self:end}.atelier .fbody{align-self:start}
.atelier h2,.atelier h3{font-size:clamp(2rem,3.4vw,2.9rem);margin:10px 0 14px}
.atelier h3{font-size:1.5rem}
.atelier p{color:var(--cinza);max-width:44ch;margin-bottom:14px}
.cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cities span{font-size:.82rem;padding:7px 12px;border:1px solid rgba(38,35,31,.18);border-radius:999px}
.cities span.base{background:var(--verde);color:var(--creme);border-color:var(--verde)}

/* ---------- professionnels ---------- */
.pro-intro{padding:clamp(56px,8vh,88px) 0}
.pro-intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.pro-intro .lead{grid-column:1/-1;max-width:62ch;font-size:1.12rem;color:var(--cinza);margin-bottom:8px}
.pro-intro .lead b{color:var(--carvao);font-weight:500}
.who-card{border:1px solid rgba(38,35,31,.14);padding:30px 32px 32px;background:var(--creme-2)}
.who-card h2{font-size:1.8rem;margin:8px 0 14px}
.who-card ul{list-style:none;display:grid;gap:10px}
.who-card li{font-size:.95rem;color:var(--cinza);padding-left:18px;position:relative}
.who-card li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--latao)}
.deliv{padding:clamp(56px,8vh,88px) 0}
.deliv ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.deliv li{background:var(--verde);padding:24px 26px 26px}
.deliv li b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem;margin-bottom:6px}
.deliv li span{font-size:.9rem;opacity:.8}
.deliv li em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--latao-claro);margin-top:10px}
.steps-pro{padding:clamp(64px,8vh,96px) 0}
.steps-pro ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-top:1px solid var(--latao)}
.steps-pro li{padding-top:20px}
.steps-pro li b{font-family:var(--serif);font-weight:400;font-size:2.2rem;line-height:1;color:var(--latao);display:block;margin-bottom:10px}
.steps-pro h3{font-size:1.15rem;margin-bottom:6px}
.steps-pro p{font-size:.88rem;color:var(--cinza)}
.d{display:inline-block;margin-top:8px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--latao-txt);border:1px dashed var(--latao);padding:4px 8px}
.ferm{padding:0 0 clamp(64px,8vh,96px)}
.ferm .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,5vw,80px);align-items:center}
.ferm .fig{border:1px solid rgba(38,35,31,.14);background:var(--creme-2);padding:28px}
.ferm h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:10px 0 14px}
.ferm p{color:var(--cinza);max-width:52ch;margin-bottom:14px}
.ferm .facts{grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 24px;padding-top:18px}
.ferm .facts b{font-size:1.7rem}
.ferm .note{font-size:.78rem;margin-top:14px;opacity:.7}
.dossier{padding:clamp(64px,8vh,96px) 0}
.dossier .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.dossier h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:10px 0 14px}
.dossier p{opacity:.85;max-width:44ch;margin-bottom:18px}
.dossier p em{font-size:.8rem;opacity:.7}
.dossier ul{list-style:none;display:grid;gap:10px;font-size:.95rem;opacity:.9}
.dossier li{padding-left:18px;position:relative}
.dossier li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--latao-claro)}

/* ---------- contact ---------- */
.ct{padding:clamp(48px,7vh,80px) 0 clamp(64px,8vh,96px)}
.ct .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start}
.ct h2{font-size:clamp(2rem,3.4vw,2.9rem);margin:10px 0 16px;max-width:14ch}
.ct .lead{font-size:1.05rem;color:var(--cinza);max-width:42ch;margin-bottom:28px}
.dlist{display:grid;margin-bottom:30px}
.dlist > a,.dlist > div{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline;font-size:1rem;padding:12px 0;border-top:1px solid rgba(38,35,31,.12)}
.dlist .k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--latao-txt)}
.dlist b{font-weight:500}
.dlist small{display:block;color:var(--cinza);font-size:.84rem;margin-top:2px}
.dlist .btn{padding:11px 16px;font-size:.82rem}
.next{border:1px solid rgba(38,35,31,.14);background:var(--creme-2);padding:22px 24px}
.next h3{font-size:1.1rem;margin-bottom:12px}
.next ol{list-style:none;display:grid;gap:10px;counter-reset:n}
.next li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:.92rem;color:var(--cinza)}
.next li::before{counter-increment:n;content:"0" counter(n);font-family:var(--serif);color:var(--latao-txt);font-size:1.05rem}
.next em{font-style:normal;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--latao-txt);border:1px dashed var(--latao);padding:2px 6px;margin-left:6px}
.form.big{padding:34px}

/* ---------- pied de page ---------- */
.site-footer{background:var(--verde-2);color:var(--creme);padding:60px 0 28px;border-top:1px solid rgba(255,255,255,.08)}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--latao-claro);margin-bottom:16px}
.site-footer ul{list-style:none;display:grid;gap:8px;font-size:.9rem;opacity:.85}
.site-footer .fb{font-size:.9rem;opacity:.85;line-height:1.7}
.site-footer .fb b{font-family:var(--serif);letter-spacing:.14em;font-weight:500}
.site-footer .fb i{color:var(--latao-claro);font-family:var(--serif)}
.site-footer .fb svg{width:56px;height:56px;margin-bottom:14px}
.site-footer .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:.78rem;opacity:.55;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-footer .copy a{text-decoration:underline}

/* ---------- apparition au défilement ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}.stepcard{transition:none}html{scroll-behavior:auto}}

/* ---------- blocs sans photo (Joseph, atelier : photos à venir) ----------
   Ordinateur : le titre prend la colonne de la photo, le texte reste à droite.
   Limité aux grands écrans, sinon cette règle (plus précise) écraserait la colonne unique du mobile. */
@media(min-width:981px){
  .why .wrap.nomedia,.who .wrap.nomedia,.atelier .wrap.nomedia{grid-template-columns:minmax(260px,.9fr) 1.6fr;grid-template-rows:auto;grid-template-areas:"head body";align-items:start}
  .why .wrap.nomedia .fhead,.who .wrap.nomedia .fhead{position:sticky;top:calc(var(--hh) + 40px)}
  .why .wrap.nomedia h2,.who .wrap.nomedia h2{margin-top:14px}
  .why .wrap.nomedia .fbody,.who .wrap.nomedia .fbody{padding-top:6px}
  .atelier .wrap.nomedia{border-top:1px solid rgba(38,35,31,.14);padding-top:clamp(40px,6vh,64px)}
  .atelier .wrap.nomedia .fhead,.atelier .wrap.nomedia .fbody{align-self:start}
  .atelier .wrap.nomedia .fbody{padding-top:30px}
}

/* ---------- mobile ---------- */
@media(max-width:980px){
  .nav,.header-right .lang{display:none}.burger{display:block}
  .site-header .btn{padding:9px 12px;font-size:.72rem}.brand-name b{font-size:.86rem}.brand-name span{font-size:.54rem}
  .hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .stage{position:relative;height:56vh;min-height:340px;order:2}
  .hero figure.ph.full{position:relative;height:50vh;order:2}
  .hero.has-photo::after{display:none}
  .hero-grid{position:static;padding:0;max-width:none}
  .hero-eyebrow,.hero-hint{display:none}
  .hero-cart{font-size:12px;position:absolute;bottom:14px;white-space:normal;text-align:center;width:calc(100% - 2*var(--gut));border-top:0}
  .hero-txt{position:static;max-width:none;padding:28px var(--gut) 24px}.hero-txt::before{display:none}.hero h1{font-size:2.1rem}
  .hero-proof{position:static;grid-auto-flow:column;justify-content:start;text-align:left;padding:0 var(--gut) 20px;gap:20px}
  .doors{grid-template-columns:1fr;min-height:0}.door{min-height:260px}
  .why .wrap,.e3 .wrap,.sec-head,.fam .wrap,.fam.rev .wrap,.bands .wrap,.bands.n3 .wrap,.who .wrap,.atelier .wrap,.pro-intro .wrap,.ferm .wrap,.dossier .wrap,.ct .wrap{grid-template-columns:1fr}
  .why figure.ph{max-width:100%;--r:4/3}
  .steps{flex-direction:column}.steps div{border-left:0;border-top:1px solid rgba(38,35,31,.14)}.steps div:first-child{border-top:0}
  .phead h1{flex-direction:column;gap:4px;align-items:flex-start}
  .fam .wrap,.fam.rev .wrap,.why .wrap,.who .wrap,.atelier .wrap{grid-template-rows:auto;grid-template-areas:"head" "media" "body";row-gap:0}
  .wrap.nomedia{grid-template-areas:"head" "body"}
  .why .media,.who .media,.atelier .media,.fam .media{margin-bottom:28px}.fam .sub{margin-bottom:18px}
  .asna-grid{grid-template-columns:minmax(0,1fr);gap:0}.asna-sticky{margin-right:0}.asna-steps{padding-left:0}
  .asna-sticky{top:var(--hh);z-index:2;background:var(--creme-2);padding-block:8px}
  .stepcard{min-height:55vh}.asna-hint{display:none}
  .who .media figure.ph{max-width:100%;--r:4/3}
  .parcours ol{grid-template-columns:1fr 1fr}.parcours li{border-right:0;margin-right:0;padding-right:0}
  .strip,.metodo ol,.deliv ul{grid-template-columns:1fr}
  .steps-pro ol{grid-template-columns:1fr 1fr}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .form,.form.big{grid-template-columns:1fr;padding:24px}details.details .grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* en-tête : logo + nom + bouton + burger doivent tenir dans 350 px (FR et EN ont des libellés plus longs que PT) */
  .header-in{gap:12px}.header-right{gap:12px}.brand{gap:10px}.brand svg{width:34px;height:34px}
  .brand-name b{font-size:.8rem;letter-spacing:.1em}.brand-name span{font-size:.5rem;letter-spacing:.14em;margin-top:4px}
  .site-header .btn{padding:8px 10px;white-space:normal;text-align:center;max-width:125px;line-height:1.15}
  .facts,.ferm .facts{grid-template-columns:1fr;gap:14px}
  .parcours ol,.steps-pro ol{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
}
@media(max-width:374px){
  .brand-name span{display:none}.site-header .btn{max-width:104px}
}