/* ==========================================================================
   nexushomes.eu — Direction B « Habité »
   Hérite des tokens de nexusbuild : même famille de marque, même palette.
   Écarts assumés vs le B2B : plus de respiration, titres plus grands,
   cartes à angles adoucis. Le B2C vend un lieu de vie, pas un procédé.
   ========================================================================== */

/* La palette et les rayons viennent de tokens.css, bloc [data-brand="homes"] :
   base Teal partagée avec la maison mère, accent Warm Amber, neutres chauds.
   Rien à redéclarer ici. */

.page-head { padding-block: var(--nx-24) var(--nx-12); }
.page-head h1 { margin-bottom: var(--nx-6); }
.section-head { max-width: 62ch; margin-bottom: var(--nx-12); }
.section-head h2 { margin-bottom: var(--nx-6); }
.section-foot { margin-top: var(--nx-8); font-size: var(--nx-text-sm); }
.nx-header__actions { display: flex; gap: var(--nx-3); }

/* --- HERO ACCUEIL -----------------------------------------------------
   Pas de photo pleine largeur : il n'existe aucun rendu de maison. Un
   visuel d'ambiance emprunté ferait croire à une maison qu'on ne vend pas.
   Le cadre vide est assumé, le texte porte seul.
   ---------------------------------------------------------------------- */
.hero-h {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-16);
  align-items: center;
  padding-block: var(--nx-24);
  background: linear-gradient(160deg, var(--nx-neutre) 0%, var(--nx-paper) 100%);
}
.hero-h__inner { max-width: 34rem; margin-left: auto; padding-inline: var(--nx-gutter); }
.hero-h h1 { margin-bottom: var(--nx-6); }
.hero-h__lede { font-size: var(--nx-text-md); color: var(--nx-ink-soft); max-width: 44ch; }
.hero-h__actions { display: flex; flex-wrap: wrap; gap: var(--nx-3); margin-top: var(--nx-8); }
.hero-h__from {
  margin-top: var(--nx-8); padding-top: var(--nx-6);
  border-top: 1px solid var(--nx-line);
  font-size: var(--nx-text-sm); color: var(--nx-ink-soft);
}
.hero-h__from strong { color: var(--nx-ink); }
.hero-h__shot {
  aspect-ratio: 16 / 9; margin-right: var(--nx-gutter);
  border-radius: var(--nx-radius); overflow: hidden;
  background: var(--nx-neutre);
}
.hero-h__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- STATS ------------------------------------------------------------ */
/* Cinq chiffres depuis le 16/09/2026 : `auto-fit` les repartit sans avoir a
   recompter a chaque ajout. Les deux points de rupture plus bas continuent de
   forcer deux colonnes puis une seule. */
.stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--nx-8);
}
.stat { padding-left: var(--nx-6); border-left: 2px solid var(--nx-accent); }
.stat__label {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-white);
}
.stat__value {
  font-family: var(--nx-font-display); font-size: var(--nx-text-2xl);
  font-weight: 600; letter-spacing: var(--nx-tracking-display);
  line-height: 1; color: var(--nx-white); margin: var(--nx-3) 0 var(--nx-2);
}
.stat__note { font-size: var(--nx-text-sm); color: #C9C0B2; line-height: var(--nx-leading-snug); }

/* --- L'ÉCONOMIE -------------------------------------------------------
   Décomposée en trois lignes plus un encart « bonus » nettement séparé :
   les trois premières sont des faits du modèle, la quatrième dépend de la
   situation du ménage. Les mélanger visuellement les rendrait tous suspects.
   ---------------------------------------------------------------------- */
.eco__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--nx-12); align-items: start; }
.eco__lignes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nx-8); }
.eco-l {
  display: grid; grid-template-columns: auto 1fr; gap: var(--nx-6);
  padding-bottom: var(--nx-8); border-bottom: 1px solid var(--nx-line);
}
.eco-l:last-child { border-bottom: 0; padding-bottom: 0; }
.eco-l__num {
  font-family: var(--nx-font-mono); font-size: var(--nx-text-sm);
  font-weight: 700; color: var(--nx-base);
  padding-top: 2px;
}
.eco-l h3 { font-size: var(--nx-text-md); margin-bottom: var(--nx-3); }
.eco-l p { color: var(--nx-ink-soft); font-size: var(--nx-text-sm); }

.eco__bonus {
  background: var(--nx-neutre); border-radius: var(--nx-radius);
  padding: var(--nx-8);
  border-top: 3px solid var(--nx-accent);
}
.eco__bonus-tag {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-base); margin-bottom: var(--nx-3);
}
.eco__bonus h3 { font-size: var(--nx-text-lg); margin-bottom: var(--nx-4); }
.eco__bonus p { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.eco__bonus-chiffre {
  margin-block: var(--nx-6);
  padding-block: var(--nx-4);
  border-block: 1px solid rgba(26, 26, 26, 0.1);
}
.eco__bonus-chiffre span {
  display: block;
  font-family: var(--nx-font-display); font-size: var(--nx-text-2xl);
  font-weight: 600; letter-spacing: var(--nx-tracking-display);
  color: var(--nx-ink); line-height: 1;
}
.eco__bonus-chiffre small {
  display: block; margin-top: var(--nx-2);
  font-size: 0.7rem; color: var(--nx-ink-soft);
}
.eco__bonus-note { font-size: var(--nx-text-xs) !important; font-style: italic; }

.eco__flag {
  margin-top: var(--nx-16); padding: var(--nx-4) var(--nx-6);
  background: #FDF8EC; border-left: 3px solid #C79A2E;
  font-size: var(--nx-text-xs); color: #5A4409; max-width: none;
}

@media (max-width: 900px) {
  .eco__grid { grid-template-columns: 1fr; gap: var(--nx-8); }
}

/* --- ARGUMENTS -------------------------------------------------------- */
.args { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-12); }
.arg { border-top: 2px solid var(--nx-base); padding-top: var(--nx-6); }
.arg__num {
  font-family: var(--nx-font-mono); font-size: var(--nx-text-sm);
  color: var(--nx-base); margin-bottom: var(--nx-3);
}
.arg h3 { margin-bottom: var(--nx-4); }
.arg p { color: var(--nx-ink-soft); }
.arg__flag {
  margin-top: var(--nx-4); padding: var(--nx-3) var(--nx-4);
  background: #FDF8EC; border-left: 3px solid #C79A2E;
  font-size: var(--nx-text-xs); color: #5A4409; max-width: none;
}

/* --- Tableau comparatif ----------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--nx-text-sm); }
.table th, .table td {
  text-align: left; padding: var(--nx-4) var(--nx-6);
  border-bottom: 1px solid var(--nx-line); vertical-align: top;
}
.table thead th {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-ink-soft); border-bottom-width: 2px; border-bottom-color: var(--nx-ink);
}
.table tbody th { font-weight: 600; }
.table td.hi { font-weight: 600; color: var(--nx-base); }

/* --- Exemple chiffré -------------------------------------------------- */
.exemple {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-8);
  align-items: stretch;
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  overflow: hidden; background: var(--nx-white);
}
.exemple__body { padding: var(--nx-8); display: flex; flex-direction: column; gap: var(--nx-4); }
.exemple__ref {
  font-family: var(--nx-font-mono); font-size: var(--nx-text-xs);
  color: var(--nx-base); font-weight: 600;
}
.exemple__prix { display: grid; gap: var(--nx-4); margin-block: var(--nx-4); }
.exemple__prix > div { padding-bottom: var(--nx-3); border-bottom: 1px solid var(--nx-neutre); }
.exemple__prix dt {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-ink-soft); margin-bottom: var(--nx-1);
}
.exemple__prix dd {
  font-family: var(--nx-font-display); font-size: var(--nx-text-lg); font-weight: 600;
}
.exemple__prix dd span {
  display: block; font-family: var(--nx-font-body);
  font-size: 0.7rem; font-weight: 400; color: var(--nx-ink-soft); margin-top: 2px;
}
.exemple__mens dd { color: var(--nx-base); }
.exemple__body .nx-btn { align-self: start; margin-top: auto; }
.exemple__shot { background: var(--nx-neutre); min-height: 260px; }

.callout {
  border-left: 3px solid var(--nx-base); background: var(--nx-white);
  padding: var(--nx-8); border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
}
.callout p { color: var(--nx-ink-soft); }

@media (max-width: 900px) {
  .hero-h { grid-template-columns: 1fr; gap: var(--nx-8); padding-block: var(--nx-16); }
  .hero-h__inner { margin-left: 0; max-width: none; }
  .hero-h__shot { margin-inline: var(--nx-gutter); }
  .args, .exemple { grid-template-columns: 1fr; }
  .exemple__shot { min-height: 200px; order: -1; }
}
@media (max-width: 1024px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--nx-12) var(--nx-8); } }
@media (max-width: 560px)  { .stats__grid { grid-template-columns: 1fr; } }

/* --- Avertissement ---------------------------------------------------- */
.warn {
  border: 1px solid #E0C179; border-left: 3px solid #C79A2E;
  background: #FDF8EC;
  padding: var(--nx-6) var(--nx-8);
  border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
  margin-bottom: var(--nx-12);
}
.warn h2 { font-size: var(--nx-text-md); margin-bottom: var(--nx-3); color: #5A4409; }
.warn p { color: #5A4409; font-size: var(--nx-text-sm); }
.warn code {
  font-family: var(--nx-font-mono); font-size: 0.9em;
  background: #F5E7C4; padding: 1px 5px; border-radius: 2px;
}

/* --- Bascule TVA ------------------------------------------------------
   Un <fieldset> de radios, pas un interrupteur bricolé : l'état est
   annoncé, le clavier fonctionne, et « hors TVA / TVA comprise » n'est pas
   un booléen évident — deux libellés explicites valent mieux qu'un toggle.
   ---------------------------------------------------------------------- */
.tva-switch fieldset { border: 0; padding: 0; margin: 0; }
.tva-switch legend {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-ink-soft); margin-bottom: var(--nx-3);
}
.tva-switch__opts { display: flex; gap: var(--nx-3); flex-wrap: wrap; }
.tva-switch__opts label {
  display: flex; align-items: baseline; gap: var(--nx-2);
  padding: var(--nx-3) var(--nx-6);
  border: 1px solid var(--nx-line); border-radius: 100px;
  background: var(--nx-white); cursor: pointer;
  font-size: var(--nx-text-sm); font-weight: 600;
  transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease);
}
.tva-switch__opts label:has(input:checked) {
  border-color: var(--nx-green); background: var(--nx-green); color: var(--nx-white);
}
.tva-switch__opts label:has(input:checked) span { color: rgba(255,255,255,0.8); }
.tva-switch__opts input { accent-color: var(--nx-green); }
.tva-switch__opts span { font-weight: 400; color: var(--nx-ink-soft); }
.tva-switch__help {
  margin-top: var(--nx-4);
  font-size: var(--nx-text-xs); color: var(--nx-ink-soft); max-width: 70ch;
}

/* --- Modèles ---------------------------------------------------------- */
.modeles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-8);
}
.modele {
  background: var(--nx-white);
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.nx-section--cream .modele { background: var(--nx-white); }

.modele__shot { aspect-ratio: 4 / 3; background: var(--nx-mist); }
.modele__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Cadre vide assumé. Hachures = « travail en cours », pas « image cassée ». */
.shot__todo {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--nx-1); text-align: center; padding: var(--nx-4);
  background:
    repeating-linear-gradient(45deg, #EDF1EF, #EDF1EF 10px, #E4EAE7 10px, #E4EAE7 20px);
  color: var(--nx-ink-soft);
}
.shot__todo span {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
}
.shot__todo small { font-size: 0.7rem; }

.modele__body { padding: var(--nx-6); display: flex; flex-direction: column; gap: var(--nx-3); flex: 1; }
.modele__ref {
  font-family: var(--nx-font-mono); font-size: var(--nx-text-xs);
  color: var(--nx-green); font-weight: 600;
}
.modele__body h3 { font-size: var(--nx-text-lg); }
.modele__pos { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.modele__part { font-size: var(--nx-text-xs); color: var(--nx-ink-soft); }

.modele__specs { display: grid; gap: var(--nx-2); margin-top: var(--nx-2); }
.modele__specs > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--nx-4);
  padding-bottom: var(--nx-2); border-bottom: 1px solid var(--nx-mist);
  font-size: var(--nx-text-xs);
}
.modele__specs dt { color: var(--nx-ink-soft); }
.modele__specs dd { font-weight: 600; }

/* --- Prix ------------------------------------------------------------- */
.prix {
  margin-top: auto; padding-top: var(--nx-4);
  border-top: 2px solid var(--nx-ink);
}
.prix__val {
  display: block;
  font-family: var(--nx-font-display); font-size: var(--nx-text-xl);
  font-weight: 600; letter-spacing: var(--nx-tracking-display);
  color: var(--nx-ink); line-height: 1.1;
}
.prix__note { display: block; font-size: 0.7rem; color: var(--nx-ink-soft); margin-top: 2px; }
.prix__mens {
  margin-top: var(--nx-3); font-size: var(--nx-text-sm); color: var(--nx-ink-soft);
}
.prix__mens strong { color: var(--nx-green); font-size: var(--nx-text-md); }

/* --- Hypothèses ------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--nx-green); background: var(--nx-cream);
  padding: var(--nx-8); border-radius: 0 var(--nx-radius) var(--nx-radius) 0;
}
.hyp { display: grid; gap: var(--nx-4); }
.hyp > div { display: grid; grid-template-columns: 16ch 1fr; gap: var(--nx-6); }
.hyp dt {
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label); text-transform: uppercase;
  color: var(--nx-green);
}
.hyp dd { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.hyp__flag {
  margin-top: var(--nx-6); padding: var(--nx-3) var(--nx-4);
  background: #FDF8EC; border-left: 3px solid #C79A2E;
  font-size: var(--nx-text-xs); color: #5A4409; max-width: none;
}

/* --- CTA / footer ----------------------------------------------------- */
.cta__inner { text-align: center; }
.cta__inner h2 { max-width: 20ch; margin-inline: auto; }
.cta__inner .nx-lede { margin: var(--nx-6) auto var(--nx-8); }

@media (max-width: 940px)  { .nx-nav:not([hidden]) { } }
@media (max-width: 640px)  {
  .modeles { grid-template-columns: 1fr; }
  .hyp > div { grid-template-columns: 1fr; gap: var(--nx-1); }
  .tva-switch__opts { flex-direction: column; }
}

/* --- Deux colonnes ---------------------------------------------------- */
.split-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-8); align-items: start; }
.callout--warn { border-left-color: #C79A2E; background: #FDF8EC; }
.callout--warn h3 { margin-bottom: var(--nx-3); font-size: var(--nx-text-md); color: #5A4409; }
.callout--warn p { color: #5A4409; }
.callout h3 { margin-bottom: var(--nx-4); font-size: var(--nx-text-md); }
.callout .ticks, .callout .crosses { margin-top: var(--nx-3); }

/* --- Étapes ----------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nx-8); }
.step {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--nx-6); align-items: start;
  padding-bottom: var(--nx-8); border-bottom: 1px solid var(--nx-line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--nx-base); color: var(--nx-white);
  font-family: var(--nx-font-display); font-weight: 600; font-size: var(--nx-text-md);
}
.step h3 { margin-bottom: var(--nx-3); }
.step p { color: var(--nx-ink-soft); }

.ticks, .crosses { list-style: none; padding: 0; display: grid; gap: var(--nx-2); }
.ticks li, .crosses li {
  position: relative; padding-left: var(--nx-6);
  font-size: var(--nx-text-sm); color: var(--nx-ink);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 2px; background: var(--nx-base);
}
.crosses li::before { content: "×"; position: absolute; left: 0; top: 0; color: #C0705E; font-weight: 700; }
.callout--warn .crosses li { color: #5A4409; }

/* --- FAQ --------------------------------------------------------------
   <details name="faq"> : accordéon exclusif natif, sans une ligne de JS.
   Focusable et annoncé par défaut — ce qu'un accordéon maison n'est jamais.
   ---------------------------------------------------------------------- */
.faqs { display: grid; gap: var(--nx-3); max-width: 80ch; }
.faq {
  background: var(--nx-white); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); overflow: hidden;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nx-4);
  padding: var(--nx-6); cursor: pointer;
  font-family: var(--nx-font-display); font-size: var(--nx-text-md); font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--nx-neutre); color: var(--nx-base);
  font-size: 1.1rem; line-height: 1;
  transition: transform var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease);
}
.faq[open] summary::after { content: "−"; background: var(--nx-accent); color: var(--nx-ink); }
.faq summary:hover { background: var(--nx-neutre); }
.faq__body { padding: 0 var(--nx-6) var(--nx-6); }
.faq__body p { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); max-width: 72ch; }

/* --- Formulaire ------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--nx-16); align-items: start; }
.form__note {
  background: #FDF8EC; border-left: 3px solid #C79A2E;
  padding: var(--nx-4) var(--nx-6); margin-bottom: var(--nx-8);
  font-size: var(--nx-text-sm); color: #5A4409; max-width: none;
}
.field { margin-bottom: var(--nx-6); }
.field > label { display: block; margin-bottom: var(--nx-2); font-size: var(--nx-text-sm); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: var(--nx-3) var(--nx-4);
  font: inherit; font-size: var(--nx-text-base); color: var(--nx-ink);
  background: var(--nx-white); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); transition: border-color var(--nx-dur) var(--nx-ease);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--nx-base); }
.field textarea { resize: vertical; line-height: var(--nx-leading-body); }
.field__help { margin-top: var(--nx-2); font-size: var(--nx-text-xs); color: var(--nx-ink-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-6); }
.radios { display: grid; gap: var(--nx-3); }
.radios label {
  display: grid; grid-template-columns: auto 1fr; gap: var(--nx-3); align-items: start;
  padding: var(--nx-4); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); cursor: pointer; font-weight: 400;
  transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease);
}
.radios label:has(input:checked) { border-color: var(--nx-base); background: var(--nx-neutre); }
.radios input { margin-top: 3px; accent-color: var(--nx-base); }
.radios strong { display: block; font-size: var(--nx-text-sm); }
.radios small { display: block; font-size: var(--nx-text-xs); color: var(--nx-ink-soft); margin-top: 2px; }
.field--consent { margin-block: var(--nx-8); }
.checkbox { display: grid; grid-template-columns: auto 1fr; gap: var(--nx-3); align-items: start; font-weight: 400; }
.checkbox input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--nx-base); }
.checkbox span { font-size: var(--nx-text-sm); }

.form-aside {
  background: var(--nx-neutre); border: 1px solid var(--nx-line);
  border-radius: var(--nx-radius); padding: var(--nx-8);
}
.form-aside h2 { font-size: var(--nx-text-md); margin-bottom: var(--nx-4); }
.form-aside h2:not(:first-child) { margin-top: var(--nx-8); }
.form-aside p { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.mini-steps { padding-left: var(--nx-6); display: grid; gap: var(--nx-3); }
.mini-steps li { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.form-aside__legal { margin-top: var(--nx-8); padding-top: var(--nx-6); border-top: 1px solid var(--nx-line); }
.form-aside__legal p { font-size: var(--nx-text-xs); }

@media (max-width: 900px) {
  .split-two, .form-grid { grid-template-columns: 1fr; gap: var(--nx-8); }
  .step { grid-template-columns: 1fr; gap: var(--nx-4); }
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* --- Pages légales (générées par tools/legal.py) ---------------------- */
.legal__sec { margin-bottom: var(--nx-12); }
.legal__sec h2 { font-size: var(--nx-text-lg); margin-bottom: var(--nx-4); }
.legal__sec p { color: var(--nx-ink-soft); }
.legal__sec > p + p { margin-top: var(--nx-3); }
.legal__date { font-size: var(--nx-text-xs); color: var(--nx-ink-soft); }
.warn h3 { font-size: var(--nx-text-md); margin-bottom: var(--nx-3); color: #5A4409; }
/* --- Badge PEB -------------------------------------------------------
   Posé sur le cadre du visuel, pas dans le corps de la fiche : c'est une
   caractéristique du modèle, pas une ligne de spécification de plus.
   Ce n'est PAS le label officiel wallon — reproduire la flèche du certificat
   ferait croire à un certificat délivré pour ce modèle. C'est une pastille
   de marque qui porte la même affirmation que le bandeau de l'accueil. */
.modele__shot { position: relative; }
/* `.peb` ne porte plus que la POSITION : c'est le groupe des deux niveaux.
   La pastille elle-meme, c'est `.peb__b`. */
.peb {
  position: absolute; top: var(--nx-3); left: var(--nx-3);
  display: flex; align-items: flex-start; gap: var(--nx-2);
}
.peb__b {
  margin: 0;
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--nx-green); color: var(--nx-white);
  border-radius: var(--nx-radius);
  padding: var(--nx-1) var(--nx-3);
  font-size: var(--nx-text-xs); font-weight: 600;
  letter-spacing: var(--nx-tracking-label);
}

/* --- Carte cliquable -------------------------------------------------
   Le lien du titre est étiré sur toute la carte : un seul <a>, donc un seul
   arrêt au clavier et un seul intitulé pour un lecteur d'écran. Le bouton
   « plans » repasse au-dessus en position relative — il ne peut pas être
   imbriqué dans l'autre lien, ce serait du HTML invalide. */
.modele { position: relative; }
.modele__lien { color: inherit; text-decoration: none; }
.modele__lien::after { content: ""; position: absolute; inset: 0; }
.modele:hover { border-color: var(--nx-green); }
.modele:has(.modele__lien:focus-visible) { outline: 2px solid var(--nx-green); outline-offset: 3px; }
.modele__actions { position: relative; z-index: 1; margin-top: auto; padding-top: var(--nx-4); }
.modele__plans { display: inline-flex; align-items: baseline; gap: var(--nx-2); }
.modele__plans span { font-size: var(--nx-text-xs); opacity: 0.7; }

/* --- Fiche d'un modèle ------------------------------------------------ */
.fiche-tete .nx-label a { color: inherit; }
.fiche__ref {
  font-family: var(--nx-font-display); font-size: var(--nx-text-sm);
  letter-spacing: var(--nx-tracking-label); color: var(--nx-ink-soft);
  margin-bottom: var(--nx-2);
}
.pictos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nx-4);
  margin-top: var(--nx-8);
}
@media (max-width: 760px) { .pictos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pictos { grid-template-columns: 1fr; } }
/* Trois colonnes : les six pieces comptees tiennent en DEUX LIGNES, et une
   fiche qui en compte moins garde des blocs de meme largeur (Vittorio,
   16/09/2026). Le dessin est a gauche, le chiffre ensuite, le libelle apres :
   on lit de quoi il s'agit avant de lire combien. */
.picto {
  display: grid; grid-template-columns: auto auto 1fr;
  align-items: center; gap: var(--nx-1) var(--nx-3);
  padding: var(--nx-3) var(--nx-5);
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  background: var(--nx-white);
}
.picto__i {
  width: 1.65rem; height: 1.65rem; flex: none;
  color: var(--nx-green); opacity: .9;
}
/* Le jeu de dessins lui-meme ne s'affiche pas : il n'est la que pour etre
   reference par <use>. `display:none` le rendrait inerte dans certains
   navigateurs, d'ou la mise hors flux plutot que la suppression. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.picto__n {
  font-family: var(--nx-font-display); font-size: var(--nx-text-xl);
  font-weight: 600; line-height: 1; color: var(--nx-green);
}
.picto__l { font-size: var(--nx-text-sm); color: var(--nx-ink-soft); }
.fiche__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--nx-6); margin-top: var(--nx-8);
  padding-top: var(--nx-6); border-top: 1px solid var(--nx-line);
}
.fiche__specs dt {
  font-size: var(--nx-text-xs); letter-spacing: var(--nx-tracking-label);
  text-transform: uppercase; color: var(--nx-ink-soft);
}
.fiche__specs dd { margin: var(--nx-2) 0 0; font-weight: 600; }
.releve { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--nx-8); }
.releve__niveau h3 { font-size: var(--nx-text-md); margin-bottom: var(--nx-3); }
.fiche__dl { margin-top: var(--nx-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-4); }
.fiche__dl span { font-size: var(--nx-text-xs); color: var(--nx-ink-soft); max-width: 40ch; }

/* --- Liseuse : une planche A4, tournée comme une page ----------------
   Le format est celui du document, pas celui de l'écran : aspect-ratio A4
   portrait. La planche est CALÉE SUR LA LARGEUR, pas sur la hauteur : une
   planche de permis porte des cotes et des noms de pièces en petits
   caractères, illisibles dans une page haute de 84 % de la fenêtre (Vittorio,
   16/09/2026). Elle peut donc dépasser la fenêtre en hauteur — on fait
   défiler, ce qui est le geste normal devant un plan.

   L'effet livre est fait de trois propriétés — perspective sur le conteneur,
   transform-origin sur le bord gauche, rotateY sur la planche tournée.
   Aucune bibliothèque : le site n'appelle aucun tiers (voir CLAUDE.md §3). */
.liseuse { max-width: 68rem; margin-inline: auto; }
.liseuse__barre {
  display: flex; align-items: baseline; gap: var(--nx-4);
  margin-bottom: var(--nx-3);
}
.liseuse__ref { font-weight: 600; margin: 0; }
.liseuse__compteur {
  margin: 0 0 0 auto; font-size: var(--nx-text-sm); color: var(--nx-ink-soft);
  font-variant-numeric: tabular-nums;
}
.liseuse__livre {
  position: relative;
  width: min(100%, calc(128vh / 1.4142));
  aspect-ratio: 1 / 1.4142;          /* A4 portrait */
  margin-inline: auto;
  perspective: 2200px;
  background: var(--nx-mist);
  border-radius: var(--nx-radius);
  /* Consultables, pas collectionnables. */
  user-select: none; -webkit-user-select: none;
}
.liseuse__page {
  position: absolute; inset: 0; margin: 0;
  z-index: calc(90 - var(--i));
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 700ms cubic-bezier(.28, .06, .22, 1);
  background: var(--nx-white);
  box-shadow: 0 2px 18px -6px rgb(0 0 0 / 0.35);
  overflow: hidden; border-radius: var(--nx-radius);
}
.liseuse__page[data-tournee] { transform: rotateY(-180deg); }
.liseuse__page img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-user-drag: none; pointer-events: none;
}
.liseuse__page figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--nx-2) var(--nx-4); text-align: center;
  font-size: var(--nx-text-xs); color: var(--nx-ink-soft);
  background: rgb(255 255 255 / 0.92);
  border-top: 1px solid var(--nx-line);
}
.liseuse__nav {
  display: flex; gap: var(--nx-3); justify-content: center;
  margin-top: var(--nx-4);
}
.liseuse__nav button {
  border: 1px solid var(--nx-line); background: var(--nx-white); color: inherit;
  border-radius: var(--nx-radius); padding: var(--nx-2) var(--nx-5);
  font: inherit; cursor: pointer;
}
.liseuse__nav button:hover:not(:disabled) { background: var(--nx-mist); }
.liseuse__nav button:disabled { opacity: .4; cursor: default; }

/* Une page qui pivote pendant 700 ms, c'est exactement le mouvement que
   prefers-reduced-motion demande d'éviter. La planche change alors d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .liseuse__page { transition: none; }
}
@media (max-width: 640px) {
  .liseuse__livre { width: 100%; }
  .pictos { gap: var(--nx-2); }
  .picto { padding: var(--nx-2) var(--nx-3); }
}

/* --- Slider des modèles (accueil) -------------------------------------
   Défilement natif avec accroche : il marche au doigt, à la molette, au
   trackpad et au clavier sans une ligne de JavaScript. Les deux boutons ne
   font qu'ajouter le geste à la souris — sans eux, la piste reste utilisable.
   Aucune bibliothèque : le site n'appelle aucun tiers. */
.slider { position: relative; }
.slider__piste {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(20rem, 82%), 1fr);
  gap: var(--nx-6);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: var(--nx-4);      /* place pour la barre de défilement */
  scrollbar-width: thin;
}
.slider__piste > .modele { scroll-snap-align: start; }
.slider__nav { display: flex; gap: var(--nx-3); justify-content: flex-end; margin-top: var(--nx-2); }
.slider__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--nx-line); background: var(--nx-white); color: inherit;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.slider__nav button:hover:not(:disabled) { background: var(--nx-mist); }
.slider__nav button:disabled { opacity: .35; cursor: default; }

@media (max-width: 900px) {
  .slider__piste { grid-auto-columns: minmax(min(18rem, 88%), 1fr); }
}

/* --- Prix sur la carte -------------------------------------------------
   N'apparaît que si un tarif est entré en vigueur (voir nx_prix dans
   _shared/api/nx/catalogue.php). Le hors-TVA en grand, le TVA comprise en
   dessous : c'est le premier que compare un acheteur, c'est le second qu'il
   paie. */
.modele__prix {
  margin-top: var(--nx-4); padding-top: var(--nx-4);
  border-top: 1px solid var(--nx-line);
  display: flex; flex-direction: column; gap: 2px;
}
.modele__prix-v {
  font-family: var(--nx-font-display); font-size: var(--nx-text-xl);
  font-weight: 600; line-height: 1.1;
}
.modele__prix-n, .modele__prix-t {
  font-size: var(--nx-text-xs); color: var(--nx-ink-soft);
}
.modele__prix-t { margin-top: var(--nx-1); }

/* --- Carte des réalisations -------------------------------------------
   Fond fixe assemblé au build (tools/build-carte.py), points posés à la
   requête. Aucune tuile n'est chargée chez un tiers : c'est ce qui permet au
   pied de page de continuer à dire « aucun cookie ». */
.carte { max-width: 56rem; margin-inline: auto; }
.carte__fond { position: relative; border-radius: var(--nx-radius); overflow: hidden; }
.carte__fond img { width: 100%; height: auto; display: block; }

.carte__pt { position: absolute; transform: translate(-50%, -50%); }
.carte__puce {
  display: block; width: 16px; height: 16px; padding: 0;
  border: 2px solid var(--nx-white); border-radius: 50%;
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.35);
  cursor: pointer; background: var(--nx-ink);
  transition: transform var(--nx-dur) var(--nx-ease);
}
/* Les trois couleurs, demandées le 15/09/2026. Elles racontent une
   progression : le vert fonce à mesure que le chantier avance, l'orange dit
   l'attente. Les trois tiennent l'écart de contraste sur un fond de carte
   clair — mesuré : 7,1, 3,2 et 3,0 contre le fond, au-dessus du seuil de 3:1
   exigé pour un objet graphique porteur de sens (WCAG 1.4.11). Le vert clair
   demandé était à 2,3 : assombri juste ce qu'il faut, il reste clairement le
   plus clair des deux verts. La pastille garde son liseré blanc pour se
   détacher d'un bois ou d'une zone urbaine, et son état est aussi écrit —
   dans la légende, dans la vignette, et pour un lecteur d'écran. */
.carte__pt--realisee .carte__puce { background: #1F5A3C; }   /* vert foncé — réalisée */
.carte__pt--en-cours .carte__puce { background: #4E9466; }   /* vert clair — en cours */
.carte__pt--permis   .carte__puce { background: #C97518; }   /* orange     — permis */
.carte__pt:hover .carte__puce,
.carte__puce:focus-visible { transform: scale(1.45); }

/* La vignette : au survol comme au clavier — un point qui ne se lit qu'à la
   souris n'existe pas pour qui navigue au clavier. */
.carte__bulle {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: 15rem; padding: var(--nx-3);
  background: var(--nx-white); color: var(--nx-ink);
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  box-shadow: 0 8px 26px -8px rgb(0 0 0 / 0.35);
  opacity: 0; visibility: hidden; z-index: 5;
  transition: opacity var(--nx-dur) var(--nx-ease);
}
.carte__pt:hover .carte__bulle,
.carte__pt:focus-within .carte__bulle { opacity: 1; visibility: visible; }
.carte__photo img { width: 100%; height: 7rem; object-fit: cover; border-radius: 2px; }
.carte__commune { font-weight: 600; margin-top: var(--nx-2); }
.carte__modele, .carte__specs, .carte__bulle .carte__etat {
  font-size: var(--nx-text-xs); color: var(--nx-ink-soft); margin-top: 2px;
}
.carte__bulle a { font-size: var(--nx-text-xs); display: inline-block; margin-top: var(--nx-2); }

.carte__legende {
  display: flex; flex-wrap: wrap; gap: var(--nx-6);
  list-style: none; padding: 0; margin: var(--nx-6) 0 0;
  font-size: var(--nx-text-sm);
}
.carte__leg { display: flex; align-items: center; gap: var(--nx-2); }
.carte__leg::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--nx-white); box-shadow: 0 0 0 1px var(--nx-line);
}
.carte__leg--realisee::before { background: #1F5A3C; }
.carte__leg--en-cours::before { background: #4E9466; }
.carte__leg--permis::before   { background: #C97518; }
.carte__leg span { color: var(--nx-ink-soft); font-variant-numeric: tabular-nums; }
.carte__credit { margin-top: var(--nx-3); font-size: var(--nx-text-xs); color: var(--nx-ink-soft); }

/* Bandeau d'aperçu : la page existe mais n'est pas publiée. */
.apercu {
  background: var(--nx-neutre); border-left: 3px solid var(--nx-accent);
  padding: var(--nx-3) var(--nx-6); font-size: var(--nx-text-sm);
}

@media (max-width: 640px) {
  .carte__bulle { width: 12rem; }
  .carte__photo img { height: 5rem; }
}

/* Deux pastilles : le niveau standard, puis le niveau optionnel — celui-ci
   plus petit, pour ne pas manger la photo (Vittorio, 16/09/2026). En logo
   officiel dès que tools/build-peb.py a découpé la planche ; la pastille de
   marque reste le repli. */
.peb__b--option { transform: scale(.82); transform-origin: left top; }
.peb__opt {
  display: block; margin-top: 2px;
  font-size: .62rem; letter-spacing: .04em; line-height: 1.1;
  opacity: .85; text-align: center;
}
.peb__b--logo { background: none; padding: 0; box-shadow: none; }
.peb__b--logo img {
  height: 28px; width: auto; display: block;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.28));
}
/* La mention se pose SUR la photo : une ombre portee suffit sur un ciel
   sombre et disparait sur un ciel clair. Une pastille sombre, elle, tient sur
   les deux. */
.peb__b--logo .peb__opt {
  color: #fff; background: rgb(28 34 32 / 0.78);
  border-radius: 999px; padding: 1px 7px; margin-top: 3px;
}


/* --- Galerie d'une fiche ----------------------------------------------
   Les rendus du modele, qui defilent seuls toutes les cinq secondes (le
   `data-delai` de nx_galerie). Meme piste que le slider de l'accueil, mais
   une vue par ecran : une photo coupee en deux ne montre rien.

   Format impose et `object-fit: cover` : les masters ne sont pas tous au meme
   rapport, et une piste dont chaque vue a sa hauteur sautille a chaque pas. */
.galerie { margin-top: var(--nx-8); }
.galerie__piste { grid-auto-columns: 100%; gap: var(--nx-4); }
.galerie__vue { margin: 0; scroll-snap-align: start; }
.galerie__vue img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--nx-radius); background: var(--nx-mist);
}
.galerie--seule .galerie__vue img { aspect-ratio: auto; }

/* --- La fiche par-dessus le catalogue ---------------------------------
   <dialog> natif : Echap, piege a focus et fond assombri viennent du
   navigateur. On ne redessine ici que la feuille et sa croix. */
.fichepop {
  width: min(1180px, 94vw); max-width: none;
  max-height: 92vh; padding: 0;
  border: 0; border-radius: var(--nx-radius);
  background: var(--nx-white); color: inherit;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.32);
  overflow: hidden;
}
.fichepop::backdrop { background: rgb(18 22 20 / 0.62); }
.fichepop__corps {
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
}
/* La fiche entiere est rendue dedans : ses sections gardent leur rythme, mais
   pas la marge haute qui suppose un en-tete de site au-dessus. */
.fichepop__corps > .nx-section:first-child { padding-top: var(--nx-8); }
.fichepop__x {
  position: absolute; top: var(--nx-4); right: var(--nx-4); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--nx-line); background: var(--nx-white); color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.fichepop__x:hover { background: var(--nx-mist); }
@media (max-width: 700px) {
  .fichepop { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .fichepop__corps { max-height: 100dvh; }
}


/* Le bouton de pause porte un DESSIN, pas un caractère : les glyphes ▐▌ se
   collent l'un à l'autre dans la plupart des polices et on n'y lit plus une
   pause (Vittorio, 16/09/2026). */
.slider__nav [data-pause] { display: grid; place-items: center; }
.slider__nav .ic {
  width: 15px; height: 15px; fill: currentColor; grid-area: 1 / 1;
}
.slider__nav .ic[hidden] { display: none; }


/* Les memes badges, mais dans le flux d'une fiche : ni position absolue, ni
   pastille sombre sous la mention — le fond est deja clair. */
.peb--ligne { position: static; margin-top: var(--nx-2); align-items: flex-start; }
.peb--ligne .peb__b--logo .peb__opt {
  color: var(--nx-ink-soft); background: none; padding: 0; text-shadow: none;
}


/* --- Affiner le catalogue ---------------------------------------------
   Les trois criteres sur UNE ligne, au-dessus des photos : chaque valeur est
   une etiquette qu'on coche, et on peut en cocher plusieurs dans le meme
   critere (125-150 ET 151-175). C'est ce qu'une liste deroulante ne sait pas
   faire sans passer en `multiple`, que personne ne sait manipuler.

   La barre est posee `hidden` par le PHP et revelee par le script : sans
   JavaScript, pas de barre, et le catalogue reste entier. */
.tri {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--nx-3) var(--nx-6);
  margin: var(--nx-6) 0 var(--nx-8);
  padding: var(--nx-4) var(--nx-5);
  border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
  background: var(--nx-white);
}
.tri__groupe {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-2);
  margin: 0; padding: 0; border: 0;
}
.tri__groupe legend {
  float: left; padding: 0; margin-right: var(--nx-3);
  font-size: var(--nx-text-xs); letter-spacing: var(--nx-tracking-label);
  text-transform: uppercase; color: var(--nx-ink-soft);
}
/* `float` sort la legende du flux flex ; ce frere vide referme la ligne pour
   que les etiquettes se posent a sa droite et non dessous. */
.tri__groupe legend + * { clear: none; }

.tri__et { cursor: pointer; }
.tri__et input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.tri__et span {
  display: inline-block;
  padding: var(--nx-1) var(--nx-4);
  border: 1px solid var(--nx-line); border-radius: 999px;
  font-size: var(--nx-text-sm); line-height: 1.6;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.tri__et:hover span { border-color: var(--nx-green); }
.tri__et input:checked + span {
  background: var(--nx-green); border-color: var(--nx-green);
  color: var(--nx-white);
}
/* Le focus clavier doit se voir : l'input est masque, c'est l'etiquette qui
   porte l'anneau. */
.tri__et input:focus-visible + span {
  outline: 2px solid var(--nx-green); outline-offset: 2px;
}

.tri__fin {
  display: flex; align-items: center; gap: var(--nx-4);
  margin: 0 0 0 auto;
}
.tri__raz {
  font: inherit; font-size: var(--nx-text-sm); cursor: pointer;
  padding: var(--nx-1) var(--nx-4);
  border: 1px solid var(--nx-line); border-radius: 999px;
  background: none; color: inherit;
}
.tri__raz:disabled { opacity: .35; cursor: default; }
.tri__compte {
  font-size: var(--nx-text-sm); color: var(--nx-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tri__vide { flex: 1 0 100%; margin: var(--nx-2) 0 0; color: var(--nx-ink-soft); }
.tri__vide[hidden] { display: none; }
@media (max-width: 860px) {
  .tri__fin { margin-left: 0; flex: 1 0 100%; justify-content: space-between; }
}