/* =========================================================================
   ÉTUDE MUR PORTEUR by EFORA
   Identité éditoriale : ivoire / noir profond / béton + terre cuite en accent
   discret. Direction : studio d'architecture contemporain, magazine
   indépendant, design suisse. Distincte du noir/or de la V1 et du
   brutalisme sombre d'EFORA.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Sécurité cascade : un élément [hidden] (ex. bouton "Précédent" du wizard,
   cas masqués par le filtre réalisations) ne doit jamais être réaffiché par
   une règle .btn/.case avec display explicite — l'attribut HTML doit
   toujours gagner. */
[hidden]{display:none!important}

:root{
  /* Identité Étude Mur Porteur by EFORA (validée par Hamid) : NOIR/CHARBON
     dominant + OR/BRONZE en accent + crème (respiration, quelques blocs
     clairs) + gris acier (secondaire). Retour au fond noir d'origine — la
     composition éditoriale (Fraunces, asymétrie façon magazine) est
     conservée, seule la dominante clair/sombre est inversée. Les noms de
     variables ("ivory"/"ink") sont conservés tels quels dans tout le fichier
     pour limiter les risques d'édition ; seules leurs VALEURS sont inversées
     ci-dessous, ce qui bascule mécaniquement chaque bloc "sombre" existant
     en bloc clair (respiration) et vice-versa. */
  --ivory:#0B0B0D;
  --ivory-2:#161310;
  --ink:#F3ECDA;
  --concrete:#9199A3;
  --concrete-light:#3A362E;
  --terracotta:#C9A24A;
  --terracotta-dark:#E4CF95;

  /* Dérivés techniques (mêmes familles de teinte, ajustés pour le texte/les
     surfaces sombres — pas de nouvelle couleur de marque) */
  --white:#FFFFFF;
  --ink-2:#221D15;
  --ink-line:rgba(243,238,230,.14);
  --on-ink-muted:#4A4438;
  --on-ink-faint:#6b6459;
  --text-muted:#C9C0AE;
  --text-soft:#A79C86;
  --ok:#4f7a52;

  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:'Space Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-eyebrow:clamp(.72rem,.68rem + .16vw,.8rem);
  --fs-sm:clamp(.86rem,.82rem + .2vw,.95rem);
  --fs-base:clamp(1rem,.95rem + .3vw,1.08rem);
  --fs-lg:clamp(1.1rem,1rem + .5vw,1.3rem);
  --fs-h3:clamp(1.26rem,1.1rem + .7vw,1.62rem);
  --fs-h2:clamp(1.7rem,1.25rem + 2vw,2.6rem);
  --fs-h1:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);

  --radius:2px;
  --radius-lg:2px;
  --shadow-lg:0 30px 70px -40px rgba(23,20,15,.35);
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Polices auto-hébergées ---------- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../assets/fonts/Fraunces-normal-var.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url('../assets/fonts/Fraunces-italic-var.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../assets/fonts/SpaceGrotesk-var.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/SpaceMono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/SpaceMono-700.woff2') format('woff2');
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.1;letter-spacing:-.01em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{max-width:70ch}
.em{color:var(--terracotta);font-style:italic;font-weight:400}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
.skip-link{position:absolute;left:-999px;top:0;background:var(--terracotta);color:var(--ivory);padding:.6rem 1rem;z-index:999;font-family:var(--font-mono);font-size:.85rem}
.skip-link:focus{left:1rem;top:1rem}
:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:3px;border-radius:1px}

/* ---------- Eyebrow / en-tête de section ---------- */
/* Traitement "annotation de plan" : mono, capitales, chasse large, filet
   fin — sert la lecture technique demandée par le brief plutôt qu'un badge
   SaaS (pas de fond, pas de pilule). */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--terracotta-dark);margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--terracotta)}
.eyebrow--light{color:var(--text-soft)}
.eyebrow--light::before{background:var(--concrete)}
.section-head{max-width:64ch;margin-bottom:2.4rem}
.section-head .lead{margin-top:1rem;color:var(--text-muted);font-size:var(--fs-lg)}
.section{padding:clamp(3.2rem,6vw,6rem) 0}
.section--dark{background:var(--ink);color:var(--ivory)}
.section--dark .section-head .lead{color:var(--on-ink-muted)}
.section--dark h2,.section--dark h3{color:var(--ivory)}
.section--sand{background:var(--ivory-2)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:var(--radius);font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--ink);color:var(--ivory)}
.btn--primary:hover{background:var(--terracotta)}
.btn--outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--ivory)}
/* Utilisé uniquement à l'intérieur des blocs clairs (profile-card, price-box) :
   bordure sombre translucide, pas la bordure claire d'origine (qui devenait
   invisible une fois ces blocs passés en fond crème). */
.btn--outline-light{border:1.5px solid rgba(11,11,13,.35);color:var(--ivory)}
/* La flèche systématique sur chaque bouton secondaire est un tic générique :
   on la réserve au CTA principal. */
.btn--outline-light svg{display:none}
.btn--outline-light:hover{background:rgba(11,11,13,.06);border-color:rgba(11,11,13,.6)}
.btn--ghost{color:var(--terracotta-dark);font-weight:700;padding-inline:0}
.btn--ghost svg{transition:transform .18s var(--ease)}
.btn--ghost:hover svg{transform:translateX(3px)}
.btn--ghost:hover{color:var(--terracotta)}
.btn--lg{padding:1rem 1.9rem;font-size:var(--fs-base)}
.btn--block{width:100%;justify-content:center}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--ivory);border-bottom:1px solid var(--concrete-light);transition:box-shadow .25s var(--ease)}
.header.scrolled{box-shadow:0 12px 30px -26px rgba(23,20,15,.45)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:1.9rem;font-size:.94rem;font-weight:500}
.nav a{position:relative;color:var(--text-muted);white-space:nowrap;padding-bottom:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--terracotta);transition:right .22s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav a.active{color:var(--ink);font-weight:700}
.nav a.active::after{right:0;background:var(--ink)}
.nav__cta{background:var(--ink);color:var(--ivory)!important;padding:.6rem 1.1rem;border-radius:var(--radius)}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--terracotta)!important}
.burger{display:none;flex-direction:column;gap:5px;width:30px;padding:.4rem}
.burger span{height:2px;background:var(--ink);border-radius:1px;transition:transform .2s var(--ease),opacity .2s var(--ease)}

@media (max-width:920px){
  .burger{display:flex}
  .nav{position:fixed;inset:72px 0 0 0;background:var(--ink);flex-direction:column;align-items:flex-start;padding:2.2rem 1.5rem;gap:1.5rem;transform:translateX(100%);transition:transform .28s var(--ease);overflow-y:auto}
  body.menu-open .nav{transform:translateX(0)}
  .nav a{font-size:1.15rem;font-family:var(--font-serif);color:var(--on-ink-muted)}
  .nav a:hover,.nav a.active{color:var(--ivory)}
  .nav a.active::after{background:var(--terracotta)}
  /* Le bouton CTA (fond encre) se fondrait dans le panneau encre du menu
     mobile — bascule en terre cuite ici pour rester identifiable. */
  .nav__cta{font-family:var(--font-sans);font-size:1rem;margin-top:.6rem;background:var(--terracotta)!important;color:var(--ivory)!important}
  .nav__cta:hover{background:var(--terracotta-dark)!important}
}
@media (prefers-reduced-motion: reduce){
  .header{transition:none}
  .nav{transition:none}
}

/* ---------- Fil d'Ariane ---------- */
.crumbs{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--concrete);padding:1.1rem 0}
.crumbs a{color:var(--concrete);border-bottom:1px dotted var(--concrete)}
.crumbs a:hover{color:var(--terracotta-dark)}
.crumbs span{margin:0 .5rem}

/* ---------- Hero de page interne ---------- */
/* Traitement éditorial : bandeau ivoire soutenu, filet fin, titre décalé
   (composition asymétrique légère), amorce de plan en filigrane. */
.page-hero{background:var(--ivory-2);color:var(--ink);padding:clamp(3.4rem,8vw,6rem) 0 clamp(2.6rem,5vw,4rem);position:relative;overflow:hidden;border-bottom:1px solid var(--concrete-light)}
/* Même trame de plan technique que le hero d'accueil (cf. .hero__grid-bg) :
   signature graphique reprise sur l'en-tête de chaque page plutôt que
   réservée à la seule homepage. */
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M46 0H0V46' fill='none' stroke='rgba(243,238,230,0.055)' stroke-width='1'/%3E%3C/svg%3E")}
.page-hero::after{content:"";position:absolute;top:14%;right:6%;width:min(34vw,320px);height:min(34vw,320px);border:1px solid var(--concrete-light);border-radius:50%;opacity:.6;pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{margin-bottom:1.2rem}
.page-hero h1{max-width:19ch;margin-left:clamp(0px,3vw,2.2rem);font-weight:600}
.page-hero p{margin-top:1.2rem;margin-left:clamp(0px,3vw,2.2rem);max-width:58ch;color:var(--text-muted);font-size:var(--fs-lg)}
.page-hero__cta{margin-top:1.6rem;display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- Hero d'accueil ---------- */
/* Composition asymétrique façon couverture de magazine d'architecture :
   colonne de titre décentrée + repère d'annotation technique, grande
   photographie en vis-à-vis avec cadre-plan. Pas de dégradés/mesh flous
   (identité "SaaS" à éviter). */
.hero{position:relative;background:var(--ivory);color:var(--ink);overflow:hidden;border-bottom:1px solid var(--concrete-light)}
.hero__grid-bg{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.hero__mesh{display:none}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;column-gap:3rem;align-items:start;padding-block:clamp(2.6rem,6vw,4.4rem)}
.hero__text{padding-top:clamp(1.2rem,3vw,2.6rem)}
.hero__badge{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terracotta-dark);margin-bottom:1.4rem}
.hero__badge .dot{width:6px;height:6px;border-radius:50%;background:var(--terracotta)}
.hero h1{max-width:13ch;font-size:clamp(2.5rem,1.7rem + 4vw,4.9rem);letter-spacing:-.02em;font-weight:600}
.hero__sub{margin-top:1.3rem;max-width:52ch;color:var(--text-muted);font-size:var(--fs-lg)}
.hero__cta{margin-top:1.9rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero__trust{margin-top:2.2rem;display:flex;flex-direction:column;gap:.7rem;border-top:1px solid var(--concrete-light);padding-top:1.4rem;max-width:44ch}
.hero__trust li{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.8rem;color:var(--text-soft)}
.hero__trust svg{width:16px;height:16px;color:var(--terracotta);flex:none}
.hero__visual{position:relative;border:1px solid var(--ink)}
/* Ratio porté par la photo seule : la légende s'ajoute dessous au lieu de déborder sur le texte */
.hero__visual picture{display:block;width:100%;position:relative;z-index:1;aspect-ratio:555/720;max-height:640px}
.hero__visual::before{content:"";position:absolute;top:-10px;left:-10px;right:10px;bottom:10px;border:1px solid var(--concrete);z-index:0;pointer-events:none}
.hero__visual img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center}
.hero__visual figcaption{position:relative;z-index:1;background:var(--ink);color:var(--on-ink-muted);padding:1rem 1.15rem;font-family:var(--font-mono);font-size:.76rem;display:flex;flex-direction:column;gap:.3rem}
.hero__visual figcaption b{color:var(--ivory);font-family:var(--font-sans);font-weight:700;font-size:.9rem}
@media (max-width:920px){
  .hero__inner{grid-template-columns:1fr;row-gap:2.4rem}
  .hero__text{order:1;padding-top:0}
  .hero__visual{order:2}
  .hero__visual picture{aspect-ratio:3/4;max-height:460px}
}

/* ---------- Réassurance ---------- */
.reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem 1.2rem;padding-block:2.2rem;border-top:1px solid var(--concrete-light);border-bottom:1px solid var(--concrete-light)}
.reassure__item{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.reassure__item svg{width:24px;height:24px;color:var(--terracotta-dark)}
.reassure__item span{font-weight:700;font-size:.9rem}

/* ---------- Étapes (méthode) ---------- */
/* Schéma de synthèse (chaîne du processus) au-dessus du détail des étapes,
   puis grille uniforme de cartes — plutôt qu'une ligne de connexion entre
   des numéros flottants, qui rendait la section décousue. */
.method-flow{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;justify-content:center;
  margin:0 auto 3rem;padding:1.1rem 1.4rem;background:var(--ivory-2);border:1px solid var(--concrete-light);
  border-radius:var(--radius);width:fit-content;max-width:100%}
.method-flow__step{font-family:var(--font-mono);font-weight:700;font-size:.78rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);padding:.3rem .7rem}
.method-flow__step:last-child{color:var(--terracotta-dark)}
.method-flow svg{width:15px;height:15px;color:var(--terracotta);flex-shrink:0}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.step{display:flex;gap:1.2rem;align-items:flex-start;background:var(--ivory-2);
  border:1px solid var(--concrete-light);border-radius:var(--radius);padding:1.5rem 1.6rem;
  transition:transform .25s var(--ease),border-color .25s var(--ease);transform-origin:center}
.step:hover{border-color:var(--terracotta);transform:scale(1.03)}
@media (prefers-reduced-motion: reduce){ .step:hover{transform:none} }
.step__n{flex-shrink:0;width:42px;height:42px;border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:1.05rem;background:var(--terracotta);color:var(--ivory)}
.step h3{font-size:1.05rem;margin-bottom:.4rem;font-weight:600}
.step p{color:var(--text-muted);font-size:.92rem}
@media (max-width:640px){.steps{grid-template-columns:1fr}.method-flow{gap:.1rem;padding:.9rem 1rem}.method-flow__step{font-size:.68rem;padding:.25rem .4rem}}

/* ---------- Grilles (prestations) ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
/* Les 8 prestations de l'accueil en 2 colonnes (4 lignes pleines, jamais de
   reste) — cartes plus larges pour porter numéro + tags (cf. .svc-card),
   plutôt que des tuiles étroites à icône seule. */
#prestations .grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ #prestations .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ #prestations .grid-3{grid-template-columns:1fr} }
@media (max-width:860px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* Fiche prestation simple (icône + titre + texte + lien) — réutilisée telle
   quelle sur les pages "Pages connexes" / "Prestations liées" partout dans
   le site (grid-3 des pages de prestation, profils, etc.). */
.svc-card{background:var(--ivory-2);border:1px solid var(--concrete-light);border-radius:var(--radius);
  padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);transform-origin:center}
.svc-card:hover{border-color:var(--terracotta);transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.svc-card:hover{transform:none}}
.svc-card h3{font-size:1.05rem;font-weight:600}
.svc-card p{color:var(--text-muted);font-size:.92rem;flex:1}
.svc-card .btn--ghost{font-size:.88rem;padding:.2rem 0;margin-top:auto}
.svc-card__ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.svc-card__ico svg{width:24px;height:24px;color:var(--terracotta-dark)}

/* Grille "Prestations principales" de l'accueil : carte retournable. Recto =
   numéro + icône + titre seuls (repérage rapide) ; survol (ou focus clavier)
   : retournement 3D vers un verso qui détaille la prestation, ses mots-clés
   et le lien "En savoir plus". Sur tactile / sans hover fiable, pas de
   retournement : le verso (le détail utile) s'affiche directement. Composant
   distinct de .svc-card (structure recto/verso imbriquée, pas réutilisable
   telle quelle ailleurs). */
.svc-flip{position:relative;perspective:1500px}
/* Empilement en grille (recto et verso dans la même cellule) plutôt que
   position:absolute + hauteur fixe : le conteneur épouse la hauteur de la
   face la plus haute (le verso, plus riche en texte), donc le contenu ne
   déborde jamais du cadre selon la largeur d'écran ou la longueur du texte. */
.svc-flip__inner{display:grid;transition:transform .55s var(--ease);transform-style:preserve-3d}
@media (hover:hover) and (pointer:fine){
  .svc-flip:hover .svc-flip__inner,.svc-flip:focus-within .svc-flip__inner{transform:rotateY(180deg)}
}
.svc-flip__face{grid-area:1/1;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:var(--ivory-2);border:1px solid var(--concrete-light);border-radius:var(--radius);
  padding:1rem 1.15rem;display:flex;flex-direction:column;transition:border-color .25s var(--ease);box-sizing:border-box}
.svc-flip:hover .svc-flip__face,.svc-flip:focus-within .svc-flip__face{border-color:var(--terracotta)}
.svc-flip__back{transform:rotateY(180deg)}
.svc-flip__front{align-items:flex-start;justify-content:flex-start;gap:.35rem}
.svc-flip__n{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--terracotta);opacity:.4;line-height:1}
.svc-flip__front h3{font-size:1rem;font-weight:600}
.svc-flip__hint{margin-top:auto;font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}
.svc-flip__back h3{font-size:.92rem;font-weight:600;margin-bottom:.4rem}
.svc-flip__back p{color:var(--text-muted);font-size:.83rem;flex:1}
.svc-flip__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.svc-flip__tags span{font-family:var(--font-mono);font-size:.64rem;font-weight:700;padding:.22rem .5rem;
  border-radius:var(--radius);background:var(--ivory);color:var(--text-soft);border:1px solid var(--concrete-light)}
.svc-flip .btn--ghost{font-size:.82rem;padding:.15rem 0;margin-top:auto}
@media (prefers-reduced-motion: reduce){ .svc-flip__inner{transition:none} }
/* Tactile : pas de hover fiable, donc bascule au toucher (classe .is-flipped
   posée par main.js) plutôt que d'afficher le verso en permanence — même
   mécanique carte recto/verso que sur desktop, déclenchée par un tap. */
@media (hover:none),(pointer:coarse){
  .svc-flip:hover .svc-flip__inner{transform:none}
  .svc-flip.is-flipped .svc-flip__inner{transform:rotateY(180deg)}
  .svc-flip.is-flipped .svc-flip__face{border-color:var(--terracotta)}
}

/* ---------- Profils ---------- */
.profile-card{background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);padding:1.9rem;display:flex;flex-direction:column;gap:.85rem;border-top:2px solid var(--terracotta)}
.profile-card h3{color:var(--ivory);font-weight:600}
.profile-card p{color:var(--on-ink-muted);font-size:.92rem;flex:1}
.profile-card .svc-card__ico svg{color:var(--terracotta)}
.profile-card .btn--outline-light{align-self:flex-start}

/* Bande photo illustrative (fiches prestations, méthode) : image réelle
   d'illustration générique — jamais présentée comme un chantier documenté
   précis, toujours légendée "Illustration —" pour éviter toute ambiguïté
   avec les cas réels de la page Réalisations. */
.illu-photo{border:1px solid var(--concrete-light);overflow:hidden;background:var(--ivory-2)}
.illu-photo img{width:100%;height:auto;display:block}
.illu-photo figcaption{padding:.85rem 1.2rem;font-family:var(--font-mono);font-size:.78rem;color:var(--text-soft);border-top:1px solid var(--concrete-light)}

/* Page "Pour qui ?" : liste-annuaire plutôt que 5 cases identiques qui ne
   font que répéter icône + titre + une ligne de texte. */
.profile-index{border-top:1px solid var(--concrete-light)}
.profile-row{display:grid;grid-template-columns:3rem 2.2rem 1fr auto;align-items:center;gap:1.6rem;
  padding:1.5rem .4rem;border-bottom:1px solid var(--concrete-light);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.profile-row:hover,.profile-row:focus-within{background:var(--ivory-2);border-color:var(--terracotta)}
.profile-row__n{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--terracotta);opacity:.55}
.profile-row__ico{width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.profile-row__ico svg{width:24px;height:24px;color:var(--terracotta-dark)}
.profile-row__body h3{font-size:1.1rem;font-weight:600;margin-bottom:.3rem}
.profile-row__body p{color:var(--text-muted);font-size:.92rem}
.profile-row__go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--terracotta-dark);white-space:nowrap}
.profile-row__go svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.profile-row:hover .profile-row__go svg,.profile-row:focus-within .profile-row__go svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.profile-row:hover .profile-row__go svg,.profile-row:focus-within .profile-row__go svg{transform:none}}
@media (max-width:640px){
  .profile-row{grid-template-columns:1fr;row-gap:.6rem;padding:1.3rem .2rem}
  .profile-row__ico{display:none}
}

/* ---------- Prix ---------- */
.price-box{background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);padding:2.4rem;display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.price-box__num{font-family:var(--font-serif);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);color:var(--terracotta)}
.price-box__note{color:var(--on-ink-muted);font-size:.9rem;max-width:40ch}
@media (max-width:560px){.price-box{padding:1.8rem 1.5rem;gap:1.3rem}}
@media (max-width:400px){.price-box .btn--lg{white-space:normal;text-align:center;width:100%}}

/* ---------- Pourquoi une étude ---------- */
.why-box{background:var(--ivory-2);border-left:3px solid var(--terracotta);border-radius:0;padding:1.9rem 2.1rem}
.why-box p+p{margin-top:.9rem}

/* ---------- Expert / bloc dirigeant ---------- */
.expert{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.2rem;align-items:center}
/* Même traitement que .hero__visual (cadre + recadrage maîtrisé) : évite
   qu'un portrait très vertical (555x941) ne s'étire dans une colonne plus
   étroite que sa hauteur naturelle. */
.expert__photo{border:1px solid var(--concrete-light);overflow:hidden;position:relative;aspect-ratio:555/720;max-height:560px}
.expert__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.expert h2{margin-bottom:.5rem}
.expert__role{font-family:var(--font-mono);font-size:.85rem;color:var(--terracotta-dark);font-weight:700;margin-bottom:1.1rem}
.expert p{color:var(--text-muted)}
@media (max-width:860px){.expert{grid-template-columns:1fr}}

/* ---------- Cas / réalisations ---------- */
.filters{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:2.2rem;border-bottom:1px solid var(--concrete-light);padding-bottom:1rem}
.filter-btn{border:none;border-bottom:2px solid transparent;padding:.2rem 0;border-radius:0;font-size:.85rem;font-weight:700;color:var(--text-soft);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.filter-btn.active,.filter-btn:hover{color:var(--ink);border-color:var(--terracotta)}
.case{background:var(--white);color:var(--ivory);border:1px solid var(--concrete-light);border-radius:0;overflow:hidden;margin-bottom:1.8rem}
.case[hidden]{display:none}
.case__head{background:var(--ink);color:var(--ivory);padding:1.3rem 1.8rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.case__tag{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-ink-muted);border-left:2px solid var(--terracotta);padding-left:.6rem}
.case__head h3{color:var(--ivory);flex:1;min-width:200px;font-weight:600}
/* Plan technique en remplacement d'une photo de chantier (aucune photo de
   chantier réelle disponible pour l'instant — voir rapport) : composition
   graphique cohérente avec l'identité plutôt qu'une image non pertinente.
   Plaque plus basse + repère (icône, libellé du cas) pour que la trame
   diagonale se lise comme un motif "plan technique" volontaire plutôt
   que comme un grand bloc vide en attente d'une photo. */
.case__media{aspect-ratio:3/1;overflow:hidden;position:relative;background:
  repeating-linear-gradient(135deg, #EFECE3 0 2px, #F7F6F2 2px 26px);
  border-bottom:1px solid var(--concrete-light);display:flex;align-items:flex-end;justify-content:space-between;padding:1.2rem 1.6rem}
.case__media::before{content:"";position:absolute;inset:12px;border:1px solid var(--concrete-light)}
.case__media::after{content:"";position:absolute;inset:12px;
  background:
    linear-gradient(#8C6D1F,#8C6D1F) top left/12px 1px no-repeat,
    linear-gradient(#8C6D1F,#8C6D1F) top left/1px 12px no-repeat,
    linear-gradient(#8C6D1F,#8C6D1F) bottom right/12px 1px no-repeat,
    linear-gradient(#8C6D1F,#8C6D1F) bottom right/1px 12px no-repeat;
  opacity:.55}
.case__media-tag{position:relative;display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6459}
.case__media-tag svg{width:20px;height:20px;color:#8C6D1F;flex-shrink:0}
.case__media-n{position:relative;font-family:var(--font-serif);font-weight:900;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--concrete-light);line-height:1}
@media (max-width:520px){.case__media{aspect-ratio:16/9}}

/* Variante photo : quand une image d'illustration existe réellement pour le
   type de cas (sinon on garde la plaque "plan technique" ci-dessus — pas de
   photo générique forcée sur un cas où elle ne correspondrait à rien). Reste
   clairement une illustration générique, jamais présentée comme la photo du
   chantier documenté (cf. libellé "Illustration" dans le repère). */
.case__media--photo{background:none}
.case__media--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.case__media--photo::before{border-color:rgba(243,238,230,.35)}
.case__media--photo::after{background:none}
/* Étiquette sur fond plein (plutôt que sur le seul dégradé) : reste lisible
   quelle que soit la tonalité de la photo derrière, claire ou sombre. */
.case__media--photo .case__media-tag{color:#F3ECDA;background:rgba(11,11,13,.72);padding:.35rem .7rem;border-radius:var(--radius)}
.case__media--photo .case__media-tag svg{color:var(--terracotta-dark)}
.case__media--photo .case__media-n{color:#F3ECDA;background:rgba(11,11,13,.72);padding:.15rem .6rem;border-radius:var(--radius);font-size:clamp(1.3rem,3vw,1.8rem)}
.case__body{padding:1.9rem 1.8rem}
.case__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1rem}
.case__block{border-top:1px solid var(--concrete-light);padding-top:.85rem}
.case__block b{display:block;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--terracotta-dark);margin-bottom:.4rem}
.case__block p,.case__block ul{font-size:.9rem;color:var(--text-muted)}
@media (max-width:760px){.case__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.case__grid{grid-template-columns:1fr}.case__media{padding:1rem}}

/* ---------- FAQ accordéon ---------- */
.acc-list{border-top:1px solid var(--concrete-light)}
.acc{border-bottom:1px solid var(--concrete-light)}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;text-align:left;font-weight:600;font-family:var(--font-serif);font-size:1.05rem}
.acc__q svg{width:20px;height:20px;flex:none;transition:transform .2s var(--ease);color:var(--terracotta-dark)}
.acc.open .acc__q svg{transform:rotate(45deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc__a p{padding-bottom:1.3rem;color:var(--text-muted);font-size:.95rem;max-width:74ch}
.acc__a a{color:var(--terracotta-dark);font-weight:700;border-bottom:1px solid var(--terracotta-dark)}
@media (prefers-reduced-motion: reduce){ .acc__a{transition:none} .acc__q svg{transition:none} }

/* ---------- Formulaire devis multi-étapes ---------- */
/* .wizard/.case/.confirm-box restent des cartes blanches (lisibilité du
   formulaire) même si le reste du site est passé au fond noir : on ré-scope
   localement les tons de texte secondaire à leur variante sombre, sinon ils
   héritent des tons clairs prévus pour le fond noir et deviennent
   illisibles sur fond blanc. */
.wizard,.case,.confirm-box{--text-muted:#4A4438;--text-soft:#6b6459;--terracotta-dark:#8C6D1F;--concrete-light:#DAD4C8}
.wizard{background:var(--white);color:var(--ivory);border:1px solid var(--concrete-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.wizard__top{display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.6rem;background:var(--ink);color:var(--ivory)}
.wizard__top strong{font-size:.95rem;font-weight:600}
.wizard__count{font-family:var(--font-mono);font-size:.8rem;color:var(--on-ink-muted)}
/* Jauge en repères gradués façon règle technique, plutôt qu'une barre de
   progression générique (chaque graduation = une étape du questionnaire). */
.wizard__ticks{display:flex;gap:3px;padding:.65rem 1.6rem 0;background:var(--ink)}
.wz-tick{flex:1;height:4px;background:var(--ink-2);border-radius:1px;transition:background .3s var(--ease),transform .3s var(--ease)}
.wz-tick.done{background:var(--terracotta)}
.wz-tick.active{background:var(--terracotta-dark);transform:scaleY(1.6)}
@media (prefers-reduced-motion:reduce){.wz-tick{transition:none}}
.wizard__body{padding:1.9rem}
.wq{display:none}
.wq.active{display:block;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .wq.active{animation:none} }
.q-title{display:block;font-weight:600;font-family:var(--font-serif);font-size:1.15rem;margin-bottom:.4rem}
.q-help{color:var(--text-soft);font-size:.86rem;margin-bottom:1rem}
.field{margin-bottom:1.15rem}
.field label{display:block;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin-bottom:.5rem;color:var(--text-soft)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=number],.field select,.field textarea{
  width:100%;padding:.75rem .9rem;border:1.5px solid var(--concrete-light);border-radius:var(--radius);background:#FAF8F2;color:var(--ivory);font-family:var(--font-sans);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--terracotta);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

.opts{display:flex;flex-wrap:wrap;gap:.6rem}
.opt{border:1.5px solid var(--concrete-light);border-radius:var(--radius);padding:.65rem 1rem;cursor:pointer;font-size:.9rem;font-weight:600;position:relative;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%}
.opt.checked{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.opt.checked::after{content:"✓";margin-left:.4rem;color:var(--terracotta)}

.file-drop{border:1.5px dashed var(--concrete);border-radius:var(--radius);padding:1.4rem;text-align:center;font-size:.88rem;color:var(--text-muted)}
.file-drop input{margin-top:.6rem}
.file-list{margin-top:.6rem;font-size:.82rem;color:var(--text-muted)}

.wizard__nav{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.9rem;border-top:1px solid var(--concrete-light)}
.wizard__micro{font-family:var(--font-mono);font-size:.78rem;color:var(--text-soft);text-align:center;padding:.8rem 1.8rem 1.5rem}

.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--text-muted)}
.consent input{margin-top:.25rem}

/* ---------- Bandeau contact ---------- */
.cta-strip{background:var(--ink);color:var(--ivory);border-radius:var(--radius-lg);padding:2.5rem;display:flex;flex-wrap:wrap;gap:1.7rem;align-items:center;justify-content:space-between;border-top:2px solid var(--terracotta)}
.cta-strip h3{color:var(--ivory);margin-bottom:.4rem;font-weight:600}
.cta-strip p{color:var(--on-ink-muted);font-size:.92rem}
/* Le bouton primaire (fond encre) se fondrait dans le fond encre du
   bandeau — on bascule l'accent terre cuite en surface pleine ici,
   ponctuellement, pour que le CTA reste immédiatement identifiable. */
.cta-strip .btn--primary{background:var(--terracotta);color:var(--ivory)}
.cta-strip .btn--primary:hover{background:var(--terracotta-dark)}
@media (max-width:560px){.cta-strip{padding:1.8rem 1.5rem;gap:1.3rem}}
@media (max-width:400px){.cta-strip .btn--lg{white-space:normal;text-align:center;width:100%}}

/* ---------- Footer ---------- */
/* Le footer reste noir/charbon comme le header (persistance du cadre sombre
   du site) plutôt que de suivre l'inversion clair/sombre générale — sinon
   il devient le seul bloc clair en bas de page, en rupture avec "fond noir". */
.footer{background:var(--ivory);color:var(--text-muted);padding:3.6rem 0 1.7rem;font-size:.9rem}
.footer__top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.2rem;padding-bottom:2.3rem;border-bottom:1px solid var(--ink-line)}
.footer__brand img{height:32px;margin-bottom:1rem}
.footer__brand p{max-width:34ch;font-size:.85rem}
.footer__badge{display:inline-block;margin-top:.9rem;font-family:var(--font-mono);font-size:.72rem;color:var(--terracotta);border-left:2px solid var(--terracotta);padding-left:.5rem;text-transform:uppercase;letter-spacing:.05em}
.footer__col h4{color:var(--ink);font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:1.1rem;font-weight:700}
.footer__col ul{display:flex;flex-direction:column;gap:.65rem}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;font-size:.8rem}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}

/* ---------- Apparition progressive au scroll ---------- */
/* Sobre et maîtrisée : léger fondu + micro-décalage, jamais systématique
   (les zones critiques du hero restent visibles immédiatement). */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .reveal.in{opacity:1;transform:translateY(0)}
  .reveal[data-d="1"]{transition-delay:.08s}
  .reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Confirmation ---------- */
.confirm-box{background:var(--white);color:var(--ivory);border:1px solid var(--concrete-light);border-radius:var(--radius-lg);padding:2.8rem;text-align:center;max-width:640px;margin-inline:auto}
.confirm-box svg{width:52px;height:52px;color:var(--ok);margin-bottom:1.1rem}

/* ---------- Utilitaires ---------- */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.mb-0{margin-bottom:0!important}
.tag-list{display:flex;flex-wrap:wrap;gap:.7rem}
.tag{background:none;border:none;border-left:2px solid var(--terracotta);border-radius:0;padding:.15rem 0 .15rem .55rem;font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--text-soft)}
.list-check{display:flex;flex-direction:column;gap:.75rem}
.list-check li{display:flex;gap:.65rem;font-size:.94rem}
.list-check svg{width:19px;height:19px;color:var(--terracotta-dark);flex:none;margin-top:.15rem}
.note-box{background:var(--ivory-2);border-radius:0;padding:1rem 1.2rem;font-size:.85rem;color:var(--text-muted);border-left:3px solid var(--concrete)}

/* ---------- Page d'erreur ---------- */
.err{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;background:var(--ink);color:var(--ivory)}
.err__code{font-family:var(--font-serif);font-weight:900;font-size:clamp(3.2rem,9vw,7rem);color:var(--terracotta);line-height:1}
.err h1{margin:.6rem 0 1.1rem;font-size:clamp(1.4rem,3vw,2rem);color:var(--ivory)}
.err p{color:var(--on-ink-muted);max-width:46ch;margin:0 auto 2.2rem}
/* Le bouton primaire (fond encre) se fondrait dans le fond encre de cette
   page — seul endroit du site où on bascule l'accent terre cuite en
   surface pleine, ponctuellement, pour rester lisible. */
.err .btn--primary{background:var(--terracotta);color:var(--ivory)}
.err .btn--primary:hover{background:var(--terracotta-dark)}

/* ---------- Réduction de mouvement globale ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Zones d'intervention (Occitanie · PACA · IDF) */
.steps--zones{grid-template-columns:repeat(3,1fr)}
.zones-more{text-align:center;margin:1.6rem auto 0;max-width:none}
@media (max-width:860px){.steps--zones{grid-template-columns:1fr}}