/* Généré par outils/generer_pages.py : style de l'accueil + page projet. Ne pas modifier à la main. */

:root{
  --brule:#241610; --brule-moyen:#4A3226;
  --peuplier:#E8D5B0; --peuplier-clair:#F6EEDD;
  --blanc-atelier:#FBFAF7;
  /* --action : couleur d'action (boutons, liens, focus). Braise foncé, retenu le 16/07/2026
     contre le bleu de chauffe #2D4A5C, qui n'avait aucune origine dans l'atelier.
     Distinct du braise #B23A2E, qui reste le trait du logo et les filets. */
  --action:#8F2F24; --braise:#B23A2E; --gris:#756E67;
  --r:5px; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blanc-atelier);color:var(--brule);font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif;font-weight:500;line-height:1.15;letter-spacing:-0.01em}
a{color:var(--action)}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* Header a deux etats. En haut de page : transparent, pose sur le voile brule du
   hero, logo inverse en grand. Au scroll : opaque blanc atelier, logo normal, compact.
   Le logo ne touche JAMAIS la photo nue : le README interdit le fond moyen. */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .28s, border-color .28s, backdrop-filter .28s;
  background:transparent;border-bottom:1px solid transparent}
header.compact{background:rgba(251,250,247,.94);backdrop-filter:blur(8px);border-bottom-color:rgba(36,22,16,.12)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 28px;max-width:var(--max);margin:0 auto;transition:padding .28s}
header.compact .hd{padding:16px 28px}
/* logo horizontal : mini 120px de LARGE (README_logo). On pilote la largeur. */
.logo{position:relative;display:block;width:240px;transition:width .28s;line-height:0}
header.compact .logo{width:152px}
.logo img{width:100%;height:auto;transition:opacity .28s}
.logo .inv{position:absolute;inset:0}
header.compact .logo .inv{opacity:0}
header:not(.compact) .logo .std{opacity:0}
.hd nav{display:flex;gap:26px;align-items:center;font-size:14px;letter-spacing:.02em}
/* :not(.btn) sur TOUTES les règles du menu. Le bouton est un <a> dans le <nav> :
   sans ça, « padding-bottom:2px » écrasait son padding de 11px (texte 3px trop bas,
   5px de décalage avec le menu) et « color:brûlé » au scroll repeignait son texte
   en brûlé sur fond braise — 2,17 de contraste, illisible. */
.hd nav a:not(.btn){color:var(--peuplier-clair);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .28s}
header.compact .hd nav a:not(.btn){color:var(--brule)}
.hd nav a:not(.btn):hover{border-bottom-color:var(--braise)}
.btn{display:inline-block;background:var(--action);color:#fff;text-decoration:none;padding:11px 22px;border-radius:var(--r);font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:15px;border:0;cursor:pointer;transition:background .15s}
.btn:hover{background:#7A2820}
.btn-ghost{background:transparent;color:var(--brule);border:1px solid var(--brule)}
.btn-ghost:hover{background:var(--brule);color:var(--peuplier-clair)}

/* Hero : photo plein cadre + voile brule. Le voile est dense a gauche (ou vivent
   le logo et le texte) et s'ouvre a droite pour laisser respirer la photo.
   Il doit rester assez dense sous le logo : sur un fond moyen, la saignee se referme. */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:center;padding:150px 0 90px;overflow:hidden;background:var(--brule)}
/* La photo est agrandie et poussée à droite : le sujet est centré dans le fichier,
   il tomberait sinon pile sous le titre. object-position ne suffit pas quand l'image
   remplit déjà la largeur — il faut la déborder. */
.hero-ph{position:absolute;top:0;bottom:0;right:0;width:76%;height:100%;object-fit:cover;object-position:center}
/* Le voile s'ouvre juste après la fin du texte (54% de la largeur), pas plus tard.
   Mesuré sur le rendu, pire pixel sous le titre (seuil 3) et lumière de la moitié droite :
     ouverture 74% (ancienne) : titre 14,3 · photo 0,076  -> photo étouffée pour rien
     ouverture 48% (retenue)  : titre  5,0 · photo 0,240  -> 3,2x plus de photo
     ouverture 42%            : titre  2,4 · photo 0,282  -> ECHEC, le titre se noie
   Toucher à ces bornes sans remesurer le pire pixel casse la lisibilité en silence :
   la moyenne reste bonne (8,7) même quand des lettres disparaissent. */
.hero-voile{position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--brule) 0%, var(--brule) 34%, rgba(36,22,16,.90) 46%, rgba(36,22,16,.45) 60%, rgba(36,22,16,.10) 76%, rgba(36,22,16,0) 100%),
    linear-gradient(180deg, rgba(36,22,16,.72) 0%, rgba(36,22,16,0) 22%, rgba(36,22,16,0) 78%, rgba(36,22,16,.45) 100%);}
/* width:100% obligatoire : .wrap est un enfant flex, sans largeur il se dimensionne
   sur son contenu et margin:auto le centre — le texte se décalait à droite du logo. */
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .fil{width:100%;max-width:520px;height:1px;background:var(--braise);margin:0 0 34px}
.hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:700;letter-spacing:-0.025em;color:var(--peuplier-clair)}
/* Une ligne par objet (.l en bloc) : le titre se lit comme une liste et reste sur la
   partie dense du voile. Sous 620px, les lignes redeviennent du texte courant. */
.hero h1 .h1-txt{display:block}
.hero h1 .l{display:block}
/* opacity .72 mettait le sous-titre a 2,51 de contraste sur la photo (seuil 3).
   Il doit rester plus discret que le titre, mais lisible : .88 donne 3,6. */
.hero h1 em{font-style:normal;display:block;color:var(--peuplier);opacity:.88;font-weight:400;margin-top:6px}
.hero p.lead{margin-top:30px;max-width:48ch;font-size:19px;color:var(--peuplier);opacity:.92}
.hero .cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-ghost{color:var(--peuplier-clair);border-color:var(--peuplier-clair)}
.hero .btn-ghost:hover{background:var(--peuplier-clair);color:var(--brule)}
.kicker{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--peuplier);opacity:.7;margin-bottom:18px}
.hero .usages{margin-top:34px;max-width:44ch;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--peuplier);opacity:.7;line-height:1.9}

/* ---------- bandeau de réassurance ---------- */
/* Quatre affirmations, rien d'autre. Un argument de réassurance qui a besoin
   d'une phrase d'explication n'est pas un argument de réassurance. */
.reass{background:var(--brule);color:var(--peuplier-clair);padding:22px 0}
.reass .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px}
/* « .wrap > div » et pas « .reass div » : le .wrap est lui-même un div, il recevait
   la puce ::before, qui devenait une case vide de la grille sur mobile. */
.reass .wrap > div{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14.5px;
  display:flex;align-items:center;gap:11px;white-space:nowrap}
.reass .wrap > div::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--braise);flex:none}

/* ---------- ruban défilant des projets ---------- */
/* Très lent : 30 projets à ~14s chacun. La piste est dupliquée deux fois et
   translatée de -50% : la boucle est invisible parce que la seconde copie
   arrive exactement là où la première commençait. */
.ruban{background:var(--brule);border-top:1px solid rgba(232,213,176,.16);padding:20px 0;overflow:hidden;margin-top:64px}
.ruban-piste{display:flex;width:max-content;animation:defile 420s linear infinite}
.ruban-piste span{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--peuplier);opacity:.62;padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.ruban-piste span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--braise);flex:none}
@keyframes defile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ruban:hover .ruban-piste{animation-play-state:paused}
/* Un défilement infini est un déclencheur connu pour les troubles vestibulaires. */
@media(prefers-reduced-motion:reduce){
  .ruban-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:4px 0}
}

section{padding:96px 0}
.sec-head{max-width:60ch;margin-bottom:44px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-0.02em}
.sec-head p{margin-top:16px;color:var(--brule-moyen)}

/* padding-bottom à 0 : le ruban ferme la section. Sinon les 96px de padding
   de la section restaient en aplat brûlé vide sous le texte défilant. */
#realisations{background:var(--brule);color:var(--peuplier-clair);padding-bottom:0}
#realisations .sec-head h2{color:var(--peuplier-clair)}
#realisations .sec-head p{color:var(--peuplier);opacity:.82}
.filtres{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.filtres button{font-family:'Space Grotesk',sans-serif;font-size:14px;background:transparent;color:var(--peuplier);border:1px solid rgba(232,213,176,.34);padding:8px 17px;border-radius:var(--r);cursor:pointer;transition:.15s}
.filtres button:hover{border-color:var(--peuplier)}
.filtres button[aria-pressed="true"]{background:var(--peuplier);color:var(--brule);border-color:var(--peuplier);font-weight:500}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.item{border:0;padding:0;background:#1b100b;cursor:pointer;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:1/1;display:block}
.item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.item:hover img{transform:scale(1.045)}
.item .leg{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(27,16,11,.94));color:var(--peuplier-clair);padding:26px 12px 10px;font-size:12.5px;text-align:left;letter-spacing:.03em;opacity:0;transition:opacity .2s;font-family:'Space Grotesk',sans-serif}
.item:hover .leg,.item:focus-visible .leg{opacity:1}
.item.hide{display:none}
.compte{margin-top:26px;font-size:13.5px;color:var(--peuplier);opacity:.6}

/* ---------- fiche projet ---------- */
dialog#fp{border:0;padding:0;background:transparent;width:100vw;max-width:100vw;height:100vh;max-height:100vh}
dialog#fp[open]{display:flex;align-items:center;justify-content:center}
dialog#fp::backdrop{background:rgba(27,16,11,.95)}
.fiche{background:var(--blanc-atelier);border-radius:var(--r);width:min(1040px,94vw);max-height:92vh;overflow-y:auto;position:relative}
.fp-close{position:absolute;top:12px;right:12px;z-index:5;background:rgba(251,250,247,.9);border:1px solid rgba(36,22,16,.3);color:var(--brule);width:38px;height:38px;border-radius:var(--r);cursor:pointer;font-size:19px;line-height:1}
.car{position:relative;background:var(--brule);border-radius:var(--r) var(--r) 0 0}
.car-img{width:100%;height:min(58vh,520px);object-fit:contain;background:var(--brule);border-radius:var(--r) var(--r) 0 0}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(36,22,16,.72);border:1px solid rgba(232,213,176,.5);color:var(--peuplier-clair);width:44px;height:60px;border-radius:var(--r);cursor:pointer;font-size:24px;line-height:1;font-family:'Space Grotesk',sans-serif}
.car-nav:hover{background:var(--brule);border-color:var(--peuplier)}
.car-nav[hidden]{display:none}
#car-prev{left:12px} #car-next{right:12px}
.car-cpt{position:absolute;right:12px;bottom:12px;background:rgba(36,22,16,.82);color:var(--peuplier-clair);font-family:'Space Grotesk',sans-serif;font-size:12px;padding:4px 10px;border-radius:var(--r);border:1px solid rgba(232,213,176,.28)}
.pastilles{display:flex;gap:6px;justify-content:center;padding:12px;background:var(--brule);flex-wrap:wrap}
.pastilles button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--peuplier);background:transparent;cursor:pointer}
.pastilles button[aria-current="true"]{background:var(--peuplier)}
.fp-txt{padding:32px 34px 38px}
.fp-fam{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--braise);margin-bottom:10px}
.fp-txt h3{font-size:27px;font-weight:700;letter-spacing:-0.02em;margin-bottom:14px}
.fp-txt p{color:var(--brule-moyen);max-width:66ch;margin-bottom:12px}
.faits{list-style:none;margin-top:22px;padding-top:20px;border-top:1px solid rgba(36,22,16,.15);display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px 22px}
.faits div{font-size:14.5px}
.faits dt{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:3px}
.faits dd{color:var(--brule)}
.acompleter{color:var(--braise);font-style:italic}
.fp-cta{margin-top:26px}

#methode .etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:rgba(36,22,16,.14);border:1px solid rgba(36,22,16,.14);border-radius:var(--r);overflow:hidden}
.etape{background:var(--blanc-atelier);padding:32px 26px}
.etape .num{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--braise);letter-spacing:.12em;margin-bottom:12px}
.etape h3{font-size:19px;margin-bottom:9px}
.etape p{font-size:15px;color:var(--gris);line-height:1.6}

/* ---------- l'atelier ---------- */
/* Section plus courte que les autres : elle suit le hero, elle ne doit pas
   repousser les realisations sous la ligne de flottaison. */
#atelier{background:var(--blanc-atelier);padding:72px 0}
.at{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker-sombre{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--braise);margin-bottom:14px}
.at-txt h2{font-size:clamp(25px,3vw,33px);font-weight:700;letter-spacing:-0.02em;margin-bottom:16px}
.at-txt p{color:var(--brule-moyen);margin-bottom:12px;max-width:56ch;font-size:16px}
/* 4 faits sur une seule ligne : en minmax(168px) ils passaient sur deux rangs
   et rallongeaient la section de 80px.
   minmax(0,1fr) et pas 1fr : le minimum implicite d'une colonne est min-content,
   donc « Collonges-au-Mont-d'Or » élargissait la grille et faisait déborder la
   page entière sous 380px. Invisible à 390, cassant à 360. */
.at-faits{margin-top:20px;padding-top:16px;gap:10px 18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.at-faits div{font-size:13px}
.at-faits dd{line-height:1.45}
.ac-bloc{border-left:3px solid var(--braise);background:#FCF3F1;padding:11px 14px;border-radius:0 var(--r) var(--r) 0;font-size:14.5px}
.at-cta{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.at-mail{font-size:14px;color:var(--brule-moyen);text-decoration:none;border-bottom:1px solid rgba(36,22,16,.28)}
.at-mail:hover{color:var(--action);border-bottom-color:var(--action)}
/* Diptyque dessine / façonne. Les deux photos sont en portrait de ratios différents
   (0,56 et 0,90) : aspect-ratio + object-fit les aligne sans les déformer. */
/* Trois étapes côte à côte, en 9/16 : la section garde la hauteur qu'elle avait avec
   deux photos en 3/4 (mesuré : 812 px à 1440). En grand sous le texte, elle prenait +50 %. */
.at-ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.at-dip{position:relative;margin:0}
.at-dip img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);display:block}
/* le point du laser est à droite du centre : sans ce décalage, le recadrage le coupe */
.at-decoupe img{object-position:62% center}
.at-num{opacity:.7;margin-right:6px}
.at-dip figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 9px;
  background:linear-gradient(transparent,rgba(27,16,11,.88));color:var(--peuplier-clair);
  font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:0 0 var(--r) var(--r)}

#devis{background:var(--peuplier-clair)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px}
.f-full{grid-column:1/-1}
label{display:block;font-size:13px;font-family:'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--brule-moyen);margin-bottom:7px}
input,select,textarea{width:100%;font-family:Inter,sans-serif;font-size:16px;font-weight:300;color:var(--brule);background:var(--blanc-atelier);border:1px solid rgba(36,22,16,.28);border-radius:var(--r);padding:11px 13px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--action);outline-offset:1px;border-color:var(--action)}
textarea{min-height:118px;resize:vertical}
/* Le gris trait tombe a 4,35 sur bouleau clair (cale a 4,81 sur blanc atelier).
   Interdit de l'eclaircir : on descend vers le brule moyen, qui donne 10,3. */
.aide{font-size:13px;color:var(--brule-moyen);margin-top:6px}
/* champs obligatoires */
.oblig-note{font-size:13.5px;color:var(--brule-moyen);margin:-22px 0 22px}
.ast{color:var(--action);font-weight:600}
/* Le champ en faute est cerclé de braise : sur un formulaire de 9 champs, un
   message seul ne dit pas OÙ regarder. */
.en-faute input, .en-faute textarea, .en-faute select{border-color:var(--action);background:#FCF3F1}
.msg-faute{display:block;font-size:12.5px;color:var(--action);margin-top:5px;font-weight:400}
/* champ piège : hors écran plutôt que display:none, que certains robots savent ignorer */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#fdevis button[disabled]{opacity:.7;cursor:wait}
.envoye{max-width:820px;background:var(--blanc-atelier);border:1px solid rgba(36,22,16,.18);border-left:3px solid var(--action);border-radius:var(--r);padding:26px 28px}
.envoye:focus{outline:none}
.envoye-titre{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:500;color:var(--brule);margin-bottom:8px}
.envoye-txt{color:var(--brule-moyen)}
.envoi-echec{background:#FCF3F1;border-left:3px solid var(--action);padding:14px 16px;border-radius:0 var(--r) var(--r) 0;font-size:15px;color:var(--brule);line-height:1.55}
.envoi-echec a{color:var(--action)}
/* encadré « pièce de référence », venu d'une page projet */
.ref-projet{display:flex;align-items:center;gap:14px;max-width:820px;background:var(--blanc-atelier);border:1px solid var(--action);border-radius:var(--r);padding:10px 14px;margin-bottom:26px}
.ref-projet img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);flex:none}
.ref-projet div{min-width:0;font-size:15px;line-height:1.4}
.ref-lbl{display:block;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brule-moyen);margin-bottom:2px}
.ref-projet a{color:var(--brule);font-weight:400}
.ref-projet button{margin-left:auto;flex:none;background:transparent;border:0;color:var(--brule-moyen);font-size:13.5px;text-decoration:underline;cursor:pointer;font-family:Inter,sans-serif}

footer{background:var(--brule);color:var(--peuplier);padding:58px 0 34px;font-size:14px}
/* logo vertical : mini 90px de large. Version inverse obligatoire ici :
   le logo standard est brule sur brule, donc invisible. */
footer img{width:132px;height:auto;margin-bottom:30px}
footer a{color:var(--peuplier)}
.f-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
.f-cols h4{font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;opacity:.6;font-weight:400}
.f-cols p,.f-cols li{opacity:.82;line-height:1.75}
.f-cols ul{list-style:none}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(232,213,176,.18);font-size:12.5px;opacity:.6;line-height:1.7}


/* ---------- responsive : en fin de feuille, apres les regles surchargees ---------- */
@media(max-width:1000px){
  .grille{grid-template-columns:repeat(3,1fr)}
  /* Tablette : le texte occupe une part bien plus large de l'écran qu'en desktop.
     Deux corrections, l'une ne suffit pas :
     1. le voile s'ouvre plus tard ;
     2. le lead est resserré — à 48ch il faisait 60% de la largeur à 768px et sortait
        de la zone dense (contraste mesuré : 1,08, illisible). */
  .hero-voile{background:
    linear-gradient(90deg, var(--brule) 0%, var(--brule) 54%, rgba(36,22,16,.94) 70%, rgba(36,22,16,.55) 84%, rgba(36,22,16,.18) 100%),
    linear-gradient(180deg, rgba(36,22,16,.72) 0%, rgba(36,22,16,0) 22%, rgba(36,22,16,0) 78%, rgba(36,22,16,.45) 100%)}
  .hero p.lead{max-width:34ch}
}
/* Entre 1001 et 1280px, le lead à 48ch sortait du voile dense : 2,52 de contraste au pire
   pixel à 1024px (défaut antérieur au hero C, trouvé en le remesurant). 36ch : 8,7. */
@media(min-width:1001px) and (max-width:1280px){
  .hero p.lead{max-width:36ch}
}
@media(max-width:760px){
  .hd{padding:20px;gap:12px}
  header.compact .hd{padding:13px 20px}
  .hd nav a:not(.btn){display:none}
  .logo{width:180px}
  header.compact .logo{width:136px}
  .btn{padding:10px 16px;font-size:14px;white-space:nowrap}
  .wrap{padding:0 20px}
  .f-cols{grid-template-columns:1fr;gap:26px}
  form{grid-template-columns:1fr}
}
@media(max-width:860px){
  .at{grid-template-columns:1fr;gap:34px}
}
@media(max-width:520px){
  /* 4 faits côte à côte deviennent illisibles sous 520px */
  .at-faits{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .grille{grid-template-columns:repeat(2,1fr);gap:9px}
  .item .leg{opacity:1;font-size:11px;padding:20px 8px 7px;line-height:1.3}
  section{padding:64px 0}
  /* le voile passe en vertical : sur un ecran etroit, un degrade lateral
     laisserait le texte sur la photo nue */
  .hero{padding:120px 0 64px;min-height:auto}
  /* bas du voile à .7 (et non .55) pour la ligne des usages, qui tombe en bas du hero :
     mesuré sur les 62 photos, pire pixel 4,55 (seuil 4,5) ; à .55 il descendait à 2,48 */
  .hero-voile{background:linear-gradient(180deg, rgba(36,22,16,.94) 0%, rgba(36,22,16,.88) 55%, rgba(36,22,16,.7) 100%)}
  .hero-ph{object-position:center}
  /* white-space:nowrap ferait déborder sur mobile : le texte se replie. */
  .reass .wrap{gap:10px 20px}
  .reass .wrap > div{font-size:12.5px;white-space:normal;gap:8px;align-items:flex-start;flex:1 1 44%}
  .reass .wrap > div::before{margin-top:7px}
  .ruban{margin-top:44px}
  /* trois légendes dans 110 px de large : sur une ligne, sans numéro */
  .at-dip figcaption{font-size:10.5px;letter-spacing:.06em;padding:18px 6px 7px;white-space:nowrap;text-align:center}
  .at-num{display:none}
  .sec-head{margin-bottom:32px}
  .hero .cta .btn{flex:1 1 auto;text-align:center}
  .hero h1 .l{display:inline}
  .hero .usages{font-size:12px;letter-spacing:.08em;opacity:.9}
  .fiche{width:100vw;max-height:100vh;border-radius:0}
  .car-img{height:44vh;border-radius:0}
  .car,.car-img{border-radius:0}
  .fp-txt{padding:24px 20px 32px}
  .fp-txt h3{font-size:22px}
  .car-nav{width:38px;height:52px;font-size:21px}
}
@media(max-width:480px){
  .logo{width:150px}
  header.compact .logo{width:124px}  /* jamais sous 120 */
  .hd .btn{font-size:13px;padding:9px 13px}
  /* le libellé se replie sur « Devis » seul : là, la majuscule est légitime */
  .hd .btn .lg{display:none}
  .hd .btn .sm{text-transform:capitalize}
}

/* =================== PAGES GÉNÉRÉES (outils/generer_pages.py) =================== */

/* ---- page 404 : claire, sur le fond de l'accueil ---- */
.pj{padding:118px 0 0}
.pj section{padding:0}
.pj-fam{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--braise);margin:34px 0 10px}
.pj h1{font-size:clamp(30px,4.2vw,48px);font-weight:700;letter-spacing:-0.02em;max-width:24ch}
.pj-txt p{color:var(--brule-moyen);margin-bottom:14px;max-width:62ch}
.pj-cta{margin-top:30px}

/* ---- page projet « atelier sombre » (17/09/2026) ----
   Toute la page est brûlée, comme la galerie de l'accueil : le bois clair y ressort.
   Le rouge braise n'écrit jamais de texte sur ce fond (contraste 2,9) : il reste en filet. */
body.sombre{background:var(--brule)}
.sombre header,.sombre header.compact{background:var(--brule);backdrop-filter:none;border-bottom-color:rgba(232,213,176,.14)}
.sombre header .logo .std{opacity:0}
.sombre header .logo .inv{opacity:1}
/* même poids que la règle de l'accueil (header.compact .hd nav a:not(.btn)), sinon les liens restent brûlés sur brûlé */
.sombre header.compact .hd nav a:not(.btn),.sombre header .hd nav a:not(.btn){color:var(--peuplier-clair)}
.sombre footer{border-top:1px solid rgba(232,213,176,.14)}
.pjs{color:var(--peuplier-clair);padding:112px 0 0}
.pjs section{padding:0}
.pjs .ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13.5px;color:var(--peuplier)}
.pjs .ariane li+li::before{content:"›";margin-right:8px}
.pjs .ariane a{color:var(--peuplier);text-decoration:none;border-bottom:1px solid rgba(232,213,176,.3)}
.pjs .ariane a:hover{color:var(--peuplier-clair);border-bottom-color:var(--peuplier-clair)}
.pjs-tete{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:end;margin:30px 0 34px}
.pjs-fam{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--peuplier);margin-bottom:14px}
.pjs-fam::before{content:"";width:22px;height:2px;background:var(--braise);flex:none}
.pjs h1{font-size:clamp(32px,4.2vw,56px);font-weight:700;letter-spacing:-0.025em;line-height:1.06;color:var(--peuplier-clair)}
.pjs-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;border-left:1px solid rgba(232,213,176,.2);padding-left:28px}
.pjs-meta dt{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--peuplier);margin-bottom:3px}
.pjs-meta dd{font-size:15px;line-height:1.45;color:var(--peuplier-clair)}
.pjs-fil{height:1px;background:var(--braise)}

/* ---- carrousel ----
   Défilement natif (scroll-snap) : le doigt marche sans script, et sans JavaScript la
   bande défile quand même. Le script ajoute flèches, compteur, vignettes, clavier, boucle.
   Photos entières (contain) : sur le fond brûlé, les marges d'une photo carrée se fondent
   dans la page. Préfixe pjc- : les classes car-* sont celles de la fenêtre du mode édition. */
.pjc{min-width:0;margin-top:34px}
.pjc-scene{position:relative}
.pjc-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.pjc-piste::-webkit-scrollbar{display:none}
.pjc-piste:focus-visible{outline:2px solid var(--peuplier);outline-offset:4px}
.pjc-vue{flex:0 0 100%;scroll-snap-align:start;margin:0}
.pjc-vue img{width:100%;height:min(66vh,620px);object-fit:contain;display:block}
.pjc-vue figcaption{font-size:13px;color:var(--peuplier);margin-top:12px;line-height:1.5}
.pjc-fl,.pjc-cpt,.pjc-vign{display:none}
.pjc.js .pjc-fl{display:block;position:absolute;top:calc(min(66vh,620px) / 2);transform:translateY(-50%);width:52px;height:68px;border-radius:var(--r);background:rgba(36,22,16,.72);border:1px solid rgba(232,213,176,.5);color:var(--peuplier-clair);font-size:26px;line-height:1;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.pjc.js .pjc-fl:hover{background:var(--brule);border-color:var(--peuplier)}
.pjc-prec{left:0}.pjc-suiv{right:0}
.pjc.js .pjc-cpt{display:block;position:absolute;left:0;top:calc(min(66vh,620px) - 36px);background:rgba(36,22,16,.85);color:var(--peuplier-clair);font-family:'Space Grotesk',sans-serif;font-size:13px;padding:5px 12px;border-radius:var(--r);pointer-events:none}
.pjc.js .pjc-vign{display:flex;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding:3px}
.pjc-vign::-webkit-scrollbar{display:none}
.pjc-vign button{flex:0 0 calc((100% - 72px) / 10);min-width:56px;padding:0;border:0;background:none;cursor:pointer;border-radius:3px;overflow:hidden;opacity:.5;transition:opacity .2s}
.pjc-vign button:hover{opacity:.85}
.pjc-vign button[aria-current="true"]{opacity:1;outline:2px solid var(--peuplier);outline-offset:2px}
.pjc-vign button:focus-visible{outline:2px solid var(--peuplier-clair);outline-offset:2px;opacity:1}
.pjc-vign img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}

/* ---- récit et encadré ---- */
.pjs-corps{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;padding:72px 0 80px;align-items:start}
.pjs-recit p{color:var(--peuplier);font-size:17.5px;margin-bottom:16px;max-width:62ch}
.pjs-recit p:first-child{font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.42;color:var(--peuplier-clair);letter-spacing:-.01em}
.pjs-box{background:rgba(232,213,176,.06);border:1px solid rgba(232,213,176,.18);border-radius:var(--r);padding:30px}
.pjs-box h2{font-size:19px;font-weight:500;color:var(--peuplier-clair);margin-bottom:22px}
.pjs-chiffres{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:28px}
.pjs-chiffres b{display:block;font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--peuplier-clair)}
.pjs-chiffres span{font-family:'Space Grotesk',sans-serif;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--peuplier)}
.pjs-box .btn{display:block;text-align:center;padding:15px}

/* ---- projets voisins ---- */
.pjs-suite{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-top:1px solid rgba(232,213,176,.16);border-bottom:1px solid rgba(232,213,176,.16)}
.pjs-suite a{text-decoration:none;color:var(--peuplier-clair);font-family:'Space Grotesk',sans-serif;font-size:16px;line-height:1.35;max-width:46%}
.pjs-suite a:hover{color:var(--peuplier)}
.pjs-suite small{display:block;font-family:Inter,sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--peuplier);margin-bottom:4px}
.pjs-suite .suiv{text-align:right;margin-left:auto}
.pjs-voisins{margin:72px 0 96px}
.pjs-voisins h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-0.02em;margin-bottom:24px;color:var(--peuplier-clair)}
.pjs-voisins .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pjs-voisins a{text-decoration:none;color:var(--peuplier-clair);font-family:'Space Grotesk',sans-serif;font-size:15.5px;line-height:1.35}
.pjs-voisins a:hover{color:var(--peuplier)}
.pjs-voisins img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);margin-bottom:10px;transition:transform .45s ease}
.pjs-voisins a:hover img{transform:scale(1.02)}

@media(max-width:860px){
  .pjs-tete{grid-template-columns:1fr;gap:22px}
  .pjs-meta{border-left:0;padding-left:0;border-top:1px solid rgba(232,213,176,.2);padding-top:18px}
  .pjs-corps{grid-template-columns:1fr;gap:34px;padding:48px 0 60px}
}
@media(max-width:620px){
  .pj{padding-top:96px}
  .pjs{padding-top:92px}
  .pjs-tete{margin:22px 0 26px}
  .pjc{margin-top:24px}
  .pjc-vue img{height:min(52vh,380px)}
  .pjc.js .pjc-fl{top:calc(min(52vh,380px) / 2);width:40px;height:52px;font-size:22px}
  .pjc.js .pjc-cpt{top:calc(min(52vh,380px) - 34px)}
  .pjc-vign button{flex:0 0 60px}
  .pjs-recit p:first-child{font-size:20px}
  .pjs-chiffres b{font-size:34px}
  .pjs-box{padding:24px}
  .pjs-voisins .g{grid-template-columns:1fr 1fr}
  .pjs-voisins .g a:nth-child(3){display:none}
  .pjs-suite{flex-direction:column;gap:16px}
  .pjs-suite a{max-width:100%}
  .pjs-suite .suiv{text-align:left;margin-left:0}
}