/* ===== Polices hébergées sur le site (pas d'appel à Google) ===== */
@font-face{font-family:"Marcellus";src:url(../fonts/marcellus-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.evitement{position:absolute;left:-9999px;top:0;background:var(--pin);color:var(--chaux);padding:10px 16px;z-index:50}
.evitement:focus{left:16px;top:16px}


/* Concept : galerie d'atelier. Grandes images à fond perdu, colonnes asymétriques,
   légendes composées comme des cartels de musée (titre · technique · lieu). */
:root{
  --chaux:#ECEAE4;      /* fond : blanc de chaux, légèrement gris */
  --chaux-2:#E2DED5;    /* surfaces alternées */
  --pin:#253029;        /* encre : vert pin parasol */
  --pin-doux:#59635C;   /* texte secondaire */
  --ocre:#A8762F;       /* accent : le soleil des fresques */
  --sable:#D6B3A2;      /* rose des dunes, en touche */
  --trait:rgba(37,48,41,.16);
  --sur-image:#F7F4EE;  /* texte posé sur photo, identique dans les deux thèmes */
  --voile:rgba(20,26,22,.55);
  --f-titre:"Marcellus",Georgia,"Times New Roman",serif;
  --f-texte:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --t-xs:.78rem; --t-s:.92rem; --t-m:1.06rem; --t-l:1.45rem; --t-xl:clamp(1.9rem,1.2rem + 2.6vw,3rem); --t-xxl:clamp(2.6rem,1.4rem + 5vw,5.2rem);
  --gout:max(16px, env(safe-area-inset-left,0px));
  --goutd:max(16px, env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --chaux:#161B17; --chaux-2:#1F2620; --pin:#E7E3DA; --pin-doux:#A6ADA6; --ocre:#D3A157; --sable:#B98D7C; --trait:rgba(231,227,218,.16); --voile:rgba(8,10,9,.6); color-scheme:dark}}
:root[data-theme="dark"]{--chaux:#161B17; --chaux-2:#1F2620; --pin:#E7E3DA; --pin-doux:#A6ADA6; --ocre:#D3A157; --sable:#B98D7C; --trait:rgba(231,227,218,.16); --voile:rgba(8,10,9,.6); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--chaux);color:var(--pin);font-family:var(--f-texte);font-weight:300;font-size:var(--t-m);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titre);font-weight:400;line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
.etiquette{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--pin-doux)}
.cadre{max-width:1240px;margin-inline:auto;padding-left:var(--gout);padding-right:var(--goutd)}
section{padding-block:clamp(64px,9vw,128px)}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}

/* Bandeau maquette */
.maquette{background:var(--pin);color:var(--chaux);font-size:var(--t-xs);letter-spacing:.06em;text-align:center;padding-block:6px;padding-left:var(--gout);padding-right:var(--goutd)}

/* En-tête */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--chaux) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,padding .3s}
.entete.reduit{border-bottom-color:var(--trait)}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;transition:padding .3s}
.entete.reduit .cadre{padding-block:10px}
.marque{display:flex;flex-direction:column;text-decoration:none;line-height:1.1}
.marque b{font-family:var(--f-titre);font-weight:400;font-size:1.28rem;letter-spacing:.14em;text-transform:uppercase}
.marque span{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pin-doux);margin-top:4px}
.nav{display:flex;align-items:center;gap:28px;font-size:var(--t-s)}
.nav a{text-decoration:none;position:relative}
.nav a:not(.bouton)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--ocre);transition:right .35s ease}
.nav a:not(.bouton):hover::after{right:0}
.bouton{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid currentColor;text-decoration:none;font-size:var(--t-s);letter-spacing:.06em;font-weight:400;background:transparent;color:inherit;cursor:pointer;font-family:inherit;transition:background .3s,color .3s}
.bouton.plein{background:var(--pin);color:var(--chaux);border-color:var(--pin)}
.bouton.plein:hover{background:var(--ocre);border-color:var(--ocre)}
.bouton:not(.plein):hover{background:var(--pin);color:var(--chaux)}
.burger{display:none;background:none;border:1px solid var(--trait);color:inherit;padding:10px 12px;font:inherit;font-size:var(--t-s);cursor:pointer}
@media (max-width:960px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:18px;background:var(--chaux);padding:24px var(--goutd) 28px var(--gout);border-bottom:1px solid var(--trait)}
  .nav[data-ferme]{display:none}
}

/* Héros avec parallaxe */
.heros{position:relative;overflow:hidden;color:var(--sur-image);min-height:min(82vh,760px);display:flex;align-items:flex-end;background:#2a2f2a}
.heros-fond{position:absolute;inset:-12% 0 -12% 0;will-change:transform}
.heros-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.heros::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,20,16,.6) 0%,rgba(15,20,16,.15) 60%,transparent 80%),linear-gradient(180deg,rgba(15,20,16,0) 40%,rgba(15,20,16,.55) 100%)}
.heros .cadre{position:relative;z-index:1;width:100%;padding-block:clamp(48px,8vw,96px)}
.heros .etiquette{color:var(--sur-image);opacity:.88}
.heros h1{font-size:var(--t-xxl);margin-top:18px;max-width:12ch}
.heros p.chapo{max-width:52ch;margin-top:22px;font-size:clamp(1rem,.9rem + .4vw,1.2rem);opacity:.94}
.heros .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.heros .bouton{color:var(--sur-image)}
.heros .bouton:not(.plein):hover{background:var(--sur-image);color:#1d241f}
.heros .bouton.plein{background:var(--sur-image);color:#1d241f;border-color:var(--sur-image)}
.heros .bouton.plein:hover{background:#C9944A;border-color:#C9944A;color:#1d241f}
.cartel-heros{position:absolute;right:var(--goutd);bottom:20px;z-index:1;font-size:var(--t-xs);letter-spacing:.08em;opacity:.8;text-align:right;max-width:30ch}
@media (max-width:700px){.cartel-heros{display:none}}

/* Introduction */
.intro{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px);align-items:end}
.intro h2{font-size:var(--t-xl)}
.intro p{max-width:58ch;color:var(--pin-doux)}
@media (max-width:800px){.intro{grid-template-columns:1fr}}

/* Savoir-faire */
.savoirs{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.savoir{grid-column:span 2;display:flex;flex-direction:column;gap:16px;text-decoration:none;min-width:0}
.savoir.large{grid-column:span 3}
.savoir .vignette{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--chaux-2);max-width:100%}
.savoir.large .vignette{aspect-ratio:3/2}
.savoir img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s}
.savoir:hover img{transform:scale(1.1)}
.savoir .note{position:absolute;left:12px;bottom:12px;right:12px;font-size:.72rem;letter-spacing:.04em;background:var(--voile);color:var(--sur-image);padding:6px 10px;width:fit-content}
.savoir h3{font-size:var(--t-l)}
.savoir p{color:var(--pin-doux);font-size:var(--t-s)}
.savoir .usages{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);font-weight:500}
@media (max-width:900px){.savoirs{grid-template-columns:repeat(2,1fr)}.savoir,.savoir.large{grid-column:span 1}.savoir.large .vignette{aspect-ratio:4/5}}
@media (max-width:520px){.savoirs{grid-template-columns:1fr}}

.conseil{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding-block:28px}
.conseil h3{font-size:var(--t-l)}
.conseil p{color:var(--pin-doux);max-width:60ch;font-size:var(--t-s)}
.pastilles{display:flex}
.pastilles i{width:34px;height:34px;border-radius:50%;margin-left:-8px;border:2px solid var(--chaux)}
@media (max-width:800px){.conseil{grid-template-columns:1fr}}

/* Simulations */
.simulations .cadre{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,5vw,72px);align-items:center}
.simulations .texte{display:flex;flex-direction:column;gap:18px;min-width:0}
.simulations h2{font-size:var(--t-xl)}
.simulations .texte > p{color:var(--pin-doux);max-width:52ch}
.onglets{display:flex;flex-direction:column;border-top:1px solid var(--trait)}
.onglets button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--trait);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.onglets b{font-family:var(--f-titre);font-weight:400;font-size:1.15rem}
.onglets span{font-size:var(--t-xs);letter-spacing:.08em;color:var(--pin-doux)}
.onglets button[aria-selected="true"] b{color:var(--ocre)}
.onglets button[aria-selected="true"]{border-bottom-color:var(--ocre)}
.legende-simu{font-size:var(--t-s);font-style:italic}
#baSimu{max-height:78vh;justify-self:center;width:100%}
#baSimu[style*="3/4"]{max-width:520px}
@media (max-width:800px){.simulations .cadre{grid-template-columns:1fr}}

/* Avant / après */
.comparer{background:var(--chaux-2)}
.comparer .cadre{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,5vw,72px);align-items:center}
.comparer h2{font-size:var(--t-xl)}
.comparer .texte{display:flex;flex-direction:column;gap:18px}
.comparer .texte p{color:var(--pin-doux)}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;max-width:100%;user-select:none;--pos:50%;background:#ccc}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .apres{clip-path:inset(0 0 0 var(--pos))}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .poignee{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--sur-image);transform:translateX(-1px);pointer-events:none}
.ba .poignee::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--sur-image);color:#1d241f;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.ba input:focus-visible ~ .poignee::after{outline:2px solid var(--ocre);outline-offset:3px}
.ba .lbl{position:absolute;top:14px;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;background:var(--voile);color:var(--sur-image);padding:5px 10px;pointer-events:none}
.ba .lbl.g{left:14px}.ba .lbl.d{right:14px}
@media (max-width:800px){.comparer .cadre{grid-template-columns:1fr}}

/* Carrousel des réalisations */
.tete-carrousel{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.tete-carrousel h2{font-size:var(--t-xl)}
.fleches{display:flex;gap:10px}
.fleches button{width:48px;height:48px;border:1px solid var(--trait);background:transparent;color:inherit;font-size:1.2rem;cursor:pointer;transition:background .3s,color .3s}
.fleches button:hover{background:var(--pin);color:var(--chaux)}
.piste{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,380px);gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:40px;padding-bottom:8px;cursor:grab}
.piste::-webkit-scrollbar{display:none}
.piste.glisse{cursor:grabbing;scroll-snap-type:none}
.oeuvre{scroll-snap-align:start;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.oeuvre button{padding:0;border:0;background:var(--chaux-2);cursor:zoom-in;overflow:hidden;aspect-ratio:4/5;display:block;width:100%}
.oeuvre img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.oeuvre button:hover img{transform:scale(1.05)}
.oeuvre figcaption{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--ocre);padding-left:12px}
.oeuvre figcaption b{font-family:var(--f-titre);font-weight:400;font-size:1.15rem}
.oeuvre figcaption span{font-size:var(--t-xs);letter-spacing:.06em;color:var(--pin-doux)}
.progression{height:1px;background:var(--trait);margin-top:28px;position:relative}
.progression i{position:absolute;left:0;top:0;height:1px;background:var(--pin);width:20%;transition:width .2s}

/* Démarche */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:48px;counter-reset:etape}
.etape{border-top:1px solid var(--pin);padding-top:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.etape::before{counter-increment:etape;content:"Étape " counter(etape);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);font-weight:500}
.etape h3{font-size:var(--t-l)}
.etape p{color:var(--pin-doux);font-size:var(--t-s)}
@media (max-width:900px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}

/* Bande parallaxe */
.bande{position:relative;overflow:hidden;color:var(--sur-image);padding-block:clamp(96px,14vw,180px);background:#2a2f2a}
.bande .fond{position:absolute;inset:-25% 0;will-change:transform}
.bande .fond img{width:100%;height:100%;object-fit:cover}
.bande::after{content:"";position:absolute;inset:0;background:rgba(18,22,19,.5)}
.bande .cadre{position:relative;z-index:1}
.bande blockquote{margin:0;font-family:var(--f-titre);font-size:var(--t-xl);max-width:22ch;line-height:1.2}

/* Professionnels */
.pros .cadre{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.pros h2{font-size:var(--t-xl)}
.pros .gauche{display:flex;flex-direction:column;gap:22px}
.pros .gauche p{color:var(--pin-doux);max-width:52ch}
.publics{display:flex;flex-direction:column;gap:36px;min-width:0}
.publics h3{font-size:var(--t-l);margin-bottom:6px}
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.liste li{padding-block:18px;border-bottom:1px solid var(--trait);display:grid;grid-template-columns:28px 1fr;gap:12px}
.liste li::before{content:"—";color:var(--ocre)}
@media (max-width:800px){.pros .cadre{grid-template-columns:1fr}}

/* À propos */
.apropos{background:var(--chaux-2)}
.apropos .cadre{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.portrait{position:relative;max-width:100%}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:46% 40%}
.portrait .second{position:absolute;width:44%;right:-6%;bottom:-8%;aspect-ratio:4/5;object-fit:cover;filter:none;border:6px solid var(--chaux-2)}
.apropos .texte{display:flex;flex-direction:column;gap:20px;min-width:0}
.apropos h2{font-size:var(--t-xl)}
.apropos p{color:var(--pin-doux);max-width:58ch}
.gages{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin-top:8px}
.gages div{padding-block:14px;border-top:1px solid var(--trait);font-size:var(--t-s);display:flex;flex-direction:column;gap:4px}
.gages small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);font-weight:500}
@media (max-width:800px){.apropos .cadre{grid-template-columns:1fr}.portrait{max-width:440px;margin-bottom:40px}.portrait .second{right:0}}
@media (max-width:480px){.gages{grid-template-columns:1fr}}

/* Zone */
.zone .cadre{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,6vw,96px)}
.zone h2{font-size:var(--t-xl)}
.communes{display:flex;flex-wrap:wrap;gap:10px 10px;align-content:flex-start}
.communes span{border:1px solid var(--trait);padding:6px 14px;font-size:var(--t-s)}
.communes span.base{background:var(--pin);color:var(--chaux);border-color:var(--pin)}
@media (max-width:800px){.zone .cadre{grid-template-columns:1fr}}

/* Contact */
.contact{background:var(--pin);color:var(--chaux)}
.contact .cadre{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px)}
.contact h2{font-size:var(--t-xl)}
.contact .coord{display:flex;flex-direction:column;gap:22px}
.contact .coord p{opacity:.8;max-width:42ch}
.contact dl{margin:0;display:grid;gap:14px}
.contact dt{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.contact dd{margin:0;font-family:var(--f-titre);font-size:1.25rem;user-select:all}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ.plein{grid-column:1/-1}
label{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
input,select,textarea{font:inherit;font-size:var(--t-s);color:var(--chaux);background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--chaux) 40%,transparent);padding:10px 0;width:100%}
select option{color:#1d241f}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--ocre)}
.contact .bouton.plein{background:var(--chaux);color:var(--pin);border-color:var(--chaux)}
.contact .bouton.plein:hover{background:var(--ocre);border-color:var(--ocre);color:var(--chaux)}
.retour{grid-column:1/-1;font-size:var(--t-s);color:var(--sable)}
@media (max-width:800px){.contact .cadre{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}


/* Visionneuse */
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,1200px);max-height:92vh}
dialog::backdrop{background:rgba(10,12,11,.88)}
dialog img{max-height:82vh;width:auto;margin:auto}
dialog p{color:#F2EFE8;text-align:center;font-size:var(--t-s);margin-top:12px}
dialog button{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));background:#F2EFE8;color:#1d241f;border:0;width:44px;height:44px;font-size:1.3rem;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .heros-fond,.bande .fond{transform:none!important}
}
/* ===== Navigation avec sous-menu ===== */
.nav ul{list-style:none;margin:0;padding:0}
.nav > ul{display:flex;align-items:center;gap:28px}
.a-sous{position:relative}
.sous-bouton{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;display:inline-flex;gap:8px;align-items:center}
.sous-bouton::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.sous-menu{position:absolute;top:calc(100% + 16px);left:-22px;min-width:300px;background:var(--chaux);border:1px solid var(--trait);padding:10px 0;display:none;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.sous-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.a-sous.ouvert .sous-menu,.a-sous:hover .sous-menu,.a-sous:focus-within .sous-menu{display:block}
.sous-menu a{display:block;padding:9px 22px}
.sous-menu a::after{display:none}
.sous-menu a:hover,.sous-menu a[aria-current="page"]{background:var(--chaux-2)}
.nav > ul > li > a[aria-current="page"]::after{right:0}
@media (max-width:960px){
  .nav > ul{flex-direction:column;align-items:flex-start;gap:16px;width:100%}
  .sous-bouton::after{display:none}
  .sous-menu{position:static;display:block;border:0;box-shadow:none;background:none;padding:8px 0 0 14px;min-width:0}
  .sous-menu::before{display:none}
  .sous-menu a{padding:6px 0;color:var(--pin-doux)}
  .nav{max-height:calc(100vh - 80px);overflow-y:auto}
}

/* ===== Bandeau des pages intérieures ===== */
.bandeau-page{position:relative;overflow:hidden;color:var(--sur-image);min-height:min(64vh,580px);display:flex;align-items:flex-end;background:#2a2f2a}
.bandeau-page .fond{position:absolute;inset:-12% 0;will-change:transform}
.bandeau-page .fond img{width:100%;height:100%;object-fit:cover}
.bandeau-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,20,16,.62) 0%,rgba(15,20,16,.2) 60%,transparent 85%),linear-gradient(180deg,rgba(15,20,16,0) 35%,rgba(15,20,16,.55) 100%)}
.bandeau-page .cadre{position:relative;z-index:1;width:100%;padding-block:clamp(40px,6vw,84px)}
.bandeau-page h1{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.4rem);max-width:15ch;margin-top:16px}
.bandeau-page .chapo{max-width:56ch;margin-top:18px;font-size:clamp(1rem,.92rem + .35vw,1.18rem);opacity:.94}
.bandeau-page .etiquette{color:var(--sur-image);opacity:.9}
.ariane{font-size:var(--t-xs);letter-spacing:.08em;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ariane a{text-decoration:none;border-bottom:1px solid transparent}
.ariane a:hover{border-bottom-color:currentColor}
.ariane span[aria-hidden]{opacity:.6}
.bandeau-page .ariane{opacity:.88}
.bandeau-simple{padding-block:clamp(48px,7vw,96px) 0}
.bandeau-simple h1{font-size:var(--t-xxl);margin-top:12px;max-width:16ch}
.bandeau-simple .chapo{color:var(--pin-doux);max-width:60ch;margin-top:18px;font-size:clamp(1rem,.92rem + .35vw,1.18rem)}
.bandeau-simple .ariane{color:var(--pin-doux)}

/* ===== Blocs de contenu ===== */
.fond-alt{background:var(--chaux-2)}
.titre-section{font-size:var(--t-xl)}
.deux{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px);align-items:start}
.deux > *{min-width:0}
.deux.inverse{grid-template-columns:1.3fr 1fr}
.prose{display:flex;flex-direction:column;gap:18px;color:var(--pin-doux);max-width:64ch}
.prose strong{color:var(--pin);font-weight:500}
.prose h3{color:var(--pin);font-size:var(--t-l);margin-top:10px}
.prose ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--ocre)}
.prose a{color:var(--pin);text-decoration-color:var(--ocre);text-underline-offset:3px}
.photo-texte{width:100%;aspect-ratio:4/5;object-fit:cover;max-width:100%}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px}
.points.quatre{grid-template-columns:repeat(4,1fr)}
.point{border-top:1px solid var(--pin);padding-top:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.point h3{font-size:var(--t-l)}
.point p{color:var(--pin-doux);font-size:var(--t-s)}
.points.numerotes{counter-reset:pt}
.points.numerotes .point::before{counter-increment:pt;content:"Étape " counter(pt);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ocre);font-weight:500}
@media (max-width:900px){.deux,.deux.inverse{grid-template-columns:1fr}.points,.points.quatre{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.points,.points.quatre{grid-template-columns:1fr}}

.marques{display:flex;flex-wrap:wrap;gap:12px}
.marques span{border:1px solid var(--trait);padding:8px 16px;font-family:var(--f-titre);font-size:1.08rem;color:var(--pin)}
.a-confirmer{display:inline-block;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:var(--sable);color:#2a2320;padding:2px 8px;margin-left:6px;vertical-align:middle;font-weight:500;font-family:var(--f-texte)}

/* Galerie en colonnes */
.galerie{columns:3 260px;column-gap:clamp(12px,1.6vw,22px);margin-top:40px}
.galerie a{display:block;break-inside:avoid;margin-bottom:clamp(12px,1.6vw,22px);overflow:hidden;cursor:zoom-in;position:relative;background:var(--chaux-2)}
.galerie img{width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.galerie a:hover img{transform:scale(1.04)}
.galerie a span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:var(--t-xs);letter-spacing:.04em;color:var(--sur-image);background:linear-gradient(transparent,rgba(15,20,16,.72));opacity:0;transition:opacity .4s}
.galerie a:hover span,.galerie a:focus-visible span{opacity:1}
@media (hover:none){.galerie a span{opacity:1}}
.attente{border:1px dashed color-mix(in srgb,var(--pin) 35%,transparent);padding:40px 24px;text-align:center;color:var(--pin-doux);margin-top:40px}

/* Questions fréquentes */
.faq{margin-top:28px;border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-family:var(--f-titre);font-size:1.2rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--f-texte);font-weight:300;font-size:1.6rem;color:var(--ocre);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--pin-doux);max-width:70ch}

/* Bandeau d'appel */
.appel{background:var(--pin);color:var(--chaux)}
.appel .cadre{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.appel h2{font-size:var(--t-xl);max-width:20ch}
.appel p{opacity:.8;margin-top:12px;max-width:52ch}
.appel .actions{display:flex;flex-wrap:wrap;gap:12px}
.appel .bouton{color:var(--chaux)}
.appel .bouton.plein{background:var(--chaux);color:var(--pin);border-color:var(--chaux)}
.appel .bouton.plein:hover{background:var(--ocre);border-color:var(--ocre);color:var(--chaux)}
.appel .bouton:not(.plein):hover{background:var(--chaux);color:var(--pin)}

/* Autres savoir-faire */
.autres{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px}
.autre{text-decoration:none;display:flex;flex-direction:column;gap:10px;min-width:0}
.autre div{aspect-ratio:1;overflow:hidden;background:var(--chaux-2)}
.autre img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.autre:hover img{transform:scale(1.06)}
.autre b{font-family:var(--f-titre);font-weight:400;font-size:1.05rem;line-height:1.25}
@media (max-width:900px){.autres{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.autres{grid-template-columns:repeat(2,1fr)}}

/* Réalisations */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.filtres button{border:1px solid var(--trait);background:none;color:inherit;font:inherit;font-size:var(--t-s);padding:8px 18px;cursor:pointer;transition:background .3s,color .3s}
.filtres button[aria-pressed="true"]{background:var(--pin);color:var(--chaux);border-color:var(--pin)}
.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px);margin-top:40px}
.projet{display:flex;flex-direction:column;gap:14px;min-width:0;margin:0}
.vignettes{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:4/3;max-width:100%}
.vignettes a{overflow:hidden;display:block;background:var(--chaux-2);cursor:zoom-in;min-height:0}
.vignettes a:first-child{grid-row:1/3}
.vignettes.n1 a{grid-column:1/3}
.vignettes.n2 a{grid-row:1/3}
.vignettes a:nth-child(n+4){display:none}
.vignettes img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.vignettes a:hover img{transform:scale(1.05)}
.cartel{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--ocre);padding-left:12px}
.cartel b{font-family:var(--f-titre);font-weight:400;font-size:1.18rem}
.cartel span{font-size:var(--t-xs);letter-spacing:.06em;color:var(--pin-doux)}
.cartel em{font-style:normal;font-size:var(--t-s);color:var(--pin-doux);margin-top:4px}
@media (max-width:900px){.projets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.projets{grid-template-columns:1fr}}

/* Pages de texte (mentions, confidentialité) */
.legal{max-width:780px;display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:var(--t-l);margin-top:28px}
.legal p,.legal li{color:var(--pin-doux)}
.legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.a-completer{background:color-mix(in srgb,var(--sable) 50%,transparent);color:var(--pin);padding:0 5px}

/* Coordonnées en ligne (page contact) */
.contact .coord a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--chaux) 40%,transparent)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Pied de page */
footer{background:var(--chaux-2);padding-block:56px 28px;font-size:var(--t-s)}
footer .grille{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
footer .grille > *{min-width:0}
footer .marque{margin-bottom:14px}
footer p{color:var(--pin-doux);max-width:40ch}
footer h2{font-family:var(--f-texte);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--pin-doux);margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ocre)}
footer .bas{margin-top:44px;padding-top:20px;border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:var(--t-xs);color:var(--pin-doux)}
@media (max-width:800px){footer .grille{grid-template-columns:1fr}}

/* Visionneuse avec navigation */
dialog .vis-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(242,239,232,.92);color:#1d241f;border:0;width:48px;height:48px;font-size:1.3rem;cursor:pointer}
dialog .vis-nav.av{left:calc(12px + env(safe-area-inset-left,0px));right:auto}
dialog .vis-nav.ap{right:calc(12px + env(safe-area-inset-right,0px));left:auto}
dialog .fermer{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));background:#F2EFE8;color:#1d241f;border:0;width:44px;height:44px;font-size:1.3rem;cursor:pointer}
dialog img{max-width:min(92vw,1400px)}

/* Simulations (onglets) */
.simulations .cadre{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,5vw,72px);align-items:center}
.simulations .texte{display:flex;flex-direction:column;gap:18px;min-width:0}
.simulations h2{font-size:var(--t-xl)}
.simulations .texte > p{color:var(--pin-doux);max-width:52ch}
.onglets{display:flex;flex-direction:column;border-top:1px solid var(--trait)}
.onglets button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--trait);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.onglets b{font-family:var(--f-titre);font-weight:400;font-size:1.15rem}
.onglets span{font-size:var(--t-xs);letter-spacing:.08em;color:var(--pin-doux)}
.onglets button[aria-selected="true"] b{color:var(--ocre)}
.onglets button[aria-selected="true"]{border-bottom-color:var(--ocre)}
.legende-simu{font-size:var(--t-s);font-style:italic}
.ba.simu{max-height:80vh;justify-self:center;width:100%}
@media (max-width:800px){.simulations .cadre{grid-template-columns:1fr}}

/* Carrousel par projet (réalisations) */
.diapo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--chaux-2);max-width:100%}
.diapo-piste{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.diapo-piste::-webkit-scrollbar{display:none}
.diapo-piste a{flex:0 0 100%;height:100%;scroll-snap-align:start;cursor:zoom-in;display:block}
.diapo-piste img{width:100%;height:100%;object-fit:cover}
.diapo button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(247,244,238,.88);color:#1d241f;font-size:1.05rem;cursor:pointer;opacity:0;transition:opacity .3s}
.diapo-prec{left:10px}.diapo-suiv{right:10px}
.diapo:hover button,.diapo:focus-within button{opacity:1}
@media (hover:none){.diapo button{opacity:1}}
.diapo-compteur{position:absolute;right:10px;bottom:10px;font-size:var(--t-xs);letter-spacing:.08em;background:var(--voile);color:var(--sur-image);padding:3px 9px;pointer-events:none}