/* ── polices auto-hébergées ────────────────────────────────────────────────
   Manrope et Source Sans 3 sont sous licence SIL Open Font (licences dans
   /assets/polices/). Elles étaient chargées depuis fonts.googleapis.com :
   deux connexions à un tiers sur le chemin critique du rendu, et l'adresse IP
   de chaque visiteur envoyée à Google avant tout consentement — ce qui est
   difficile à tenir sur un site qui affiche un bandeau de consentement.

   Servies d'ici : 132 Ko pour huit fichiers, en cache un an, sans requête
   externe. `font-display:swap` fait afficher le texte immédiatement dans la
   police de secours plutôt que de le laisser invisible. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/polices/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/polices/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/polices/manrope-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/polices/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/polices/manrope-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/polices/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/polices/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/polices/source-sans-3-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* maisonsberdin.com — feuille de style unique.
   Reprise de la charte : bleu Berdin #243870, bleu nuit #1A2164,
   Manrope pour les titres, Source Sans 3 pour le texte. */
/* Un élément porteur de `hidden` reste caché, quoi qu'en dise la règle de
   composant : une feuille d'auteur qui pose `display:flex` bat la feuille
   du navigateur, et le panneau fermé continuait alors de couvrir le coin
   bas-droit et d'intercepter les clics du bouton placé dessous. */
[hidden]{display:none!important}

:root{
  --ground:#F4F5F6; --surface:#FFFFFF; --surface-2:#E8EAED;
  /* --muted a été assombri de #767C86 à #6B717A : l'original ne passait
     l'exigence de contraste AA sur AUCUN des trois fonds du site (4,20 sur
     blanc, 3,85 sur le gris papier, 3,45 sur le bleu nuit — il faut 4,50).
     C'est la couleur des surtitres, des libellés de carte et des mentions
     secondaires : 315 occurrences fautives sur les 18 gabarits. Teinte et
     saturation de la charte conservées, seule la luminosité descend. */
  /* --muted assombri une seconde fois le 1er septembre. Au lot 9 il avait été
     calculé pour tenir sur blanc, sur le gris papier et sur le bleu nuit ; le
     lot 11 a introduit un quatrième fond, --sable, plus sombre que les trois
     autres, et le texte secondaire y retombait à 3,82:1. La recette du
     contraste ne connaissait pas encore ce fond : elle le connaît maintenant. */
  --ink:#282A2E; --ink-2:#4A4F58; --muted:#5D626A;
  /* Le même rôle, sur les grands aplats sombres où un gris moyen disparaît. */
  --muted-sombre:#A9BAE4;

  /* Deux fonds chauds, tirés de l'étalonnage lui-même : le traitement pousse
     l'enduit vers l'ivoire et les hautes lumières vers le sable. Les grands
     aplats de la page reprennent donc la lumière des images qu'ils portent,
     au lieu de les poser sur un gris qui les refroidit. C'est ce qui casse
     l'alternance bleu / gris / bleu / gris du site d'origine. */
  --ivoire:#F3EFE7;
  --sable:#E4DCCB;

  /* Rythme vertical : une seule échelle, pour que deux sections voisines ne
     respirent pas différemment sans raison. */
  --pas-1:14px; --pas-2:22px; --pas-3:36px; --pas-4:56px; --pas-5:84px; --pas-6:120px;
  --line:#D8DBE0; --line-soft:#E6E8EC;
  --brick:#243870; --brick-2:#1A2164; --sand:#C3C5C5;
  --dark:#1A2164; --perle:#DFE1E1;
  --sur-brick:#fff;   /* le texte posé sur --brick : blanc en clair, encre en sombre (contraste) */
  --logo-clair:block; --logo-sombre:none;   /* lequel des deux logos de l'en-tête s'affiche (lot 25) */
  --smart:#00936B; --smart-texte:#007A58;   /* le vert Smart en texte : 5,35:1 sur blanc, le 00936B ne passait pas */
  --shadow:0 1px 2px rgba(26,33,100,.06), 0 8px 24px -12px rgba(26,33,100,.24);
  --r:3px;
  --serif:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0F1322; --surface:#171C2E; --surface-2:#1F2538;
    --ink:#E9EBF0; --ink-2:#BFC5D2; --muted:#8B93A5;
    --ivoire:#1C1B18; --sable:#262319;
    --line:#2A3145; --line-soft:#212739;
    --brick:#7B96D8; --brick-2:#9BB0E4; --sand:#4E5878; --sur-brick:#0F1322;
    --logo-clair:none; --logo-sombre:block;
    --dark:#141A2E; --perle:#DFE1E1;
    --smart:#3FBE93;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
/* Le thème choisi au pied de page (lot 24) : les MÊMES jetons que le bloc
   ci-dessus, fonds chauds compris — un jeton oublié ici, et une section
   ivoire garde son fond clair sous une encre claire. */
:root[data-theme="dark"]{
  --ground:#0F1322; --surface:#171C2E; --surface-2:#1F2538;
  --ink:#E9EBF0; --ink-2:#BFC5D2; --muted:#8B93A5;
  --ivoire:#1C1B18; --sable:#262319;
  --line:#2A3145; --line-soft:#212739;
  --brick:#7B96D8; --brick-2:#9BB0E4; --sand:#4E5878; --sur-brick:#0F1322;
  --logo-clair:none; --logo-sombre:block;
  --dark:#141A2E; --perle:#DFE1E1;
  --smart:#3FBE93;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* 16 px sur un écran de bureau, c'est la taille d'une interface, pas celle
   d'un site qu'on lit. La typographie suit maintenant la largeur : 17 px sur
   un portable, 18,5 px au-delà de 1400. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:clamp(16.5px,.55vw + 15px,18.5px);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 1180 px bridait le contenu au milieu de deux marges vides sur un écran de
   1920. Le texte courant reste à 66 caractères par sa propre max-width ; ce
   sont les grilles et les images qui gagnent la largeur. */
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,3.2vw,40px)}
.wrap.etroit{max-width:820px}
/* Les marques géométriques. Trait fin, jamais de remplissage : elles se
   comportent comme du texte et prennent sa couleur. */
/* ── apparition au défilement ──────────────────────────────────────────────
   Une seule transition, courte, sur un léger décalage vertical. Ce n'est pas
   un effet : c'est ce qui fait comprendre qu'une section commence quand on
   fait défiler une page longue.

   `no-js` : sans JavaScript rien n'est masqué — le contenu ne dépend jamais
   d'un script. Et `prefers-reduced-motion` coupe tout, sans exception. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.6,.2,1),transform .5s cubic-bezier(.2,.6,.2,1)}
.js .reveal.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* À l'impression, rien n'est masqué : une page imprimée ne défile pas. */
@media print{
  .js .reveal{opacity:1!important;transform:none!important}
  .site-head,.site-foot,.barre-carnet,.ia-appel,.ia-panneau,.bandeau-cookies,.nav-bouton,.bloc-rappel,.rea-filtres,.retenir,.bandeau-apercu{display:none!important}
  body{background:#fff;font-size:11pt}
  .section{padding:14pt 0}
  /* Le fond bleu n'est pas imprimé par défaut : le titre du hero doit rester lisible. */
  .hero-simple,.hero,.section.sombre{background:none!important;color:#000!important;padding:0 0 10pt}
  .hero-simple h1,.hero-simple .lede,.hero-simple .eyebrow,.hero h1,.hero .lede{color:#000!important}
  .btn,.recherche-bouton,.fil a::after,.reveal .gal:empty,.autres,.suite,.par-ou,.theme-bouton{display:none!important}
  a[href^="http"]::after{content:none}
  .fil a::after{content:none}
  /* La marque et le contact en tête de page imprimée : le pied est masqué. */
  body::before{content:"Maisons Berdin · 03 26 08 04 04 · maisonsberdin.com";display:block;font:600 10pt/1.4 sans-serif;color:#1A2164;border-bottom:1px solid #999;padding-bottom:6pt;margin-bottom:12pt}
}

/* Les cartes réagissent au survol : elles sont cliquables, ça doit se voir. */
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px -14px rgba(26,33,100,.4);border-color:var(--line)}
.card .ph img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card:hover .ph img{transform:scale(1.035)}
.card .ph{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .card,.card .ph img{transition:none}
  .card:hover{transform:none}
  .card:hover .ph img{transform:none}
}

.marque{width:1.35em;height:1.35em;flex:none;display:inline-block;vertical-align:-.25em;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
.marque.grande{width:34px;height:34px;stroke-width:1.2}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
/* Sur fond sombre, le gris moyen tombe à 3,45:1. */
.hero-simple .eyebrow,.hero .eyebrow,.site-foot .muted,.bandeau-cookies .muted{color:var(--muted-sombre)}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}

/* ---- brick-bond divider ---- */
.bond{height:26px;background:
  repeating-linear-gradient(135deg,var(--line-soft) 0 13px,transparent 13px 26px),
  repeating-linear-gradient(45deg,var(--line) 0 13px,transparent 13px 26px);
  opacity:.9;border-radius:1px}

/* ---- prototype chrome ---- */




/* ---- site header ---- */
.site-head{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.site-head .wrap{display:flex;align-items:center;gap:26px;height:70px}
.brand{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;text-decoration:none}
.brand img{display:block;height:38px;width:auto}
.brand .logo-clair{display:var(--logo-clair)}
.brand .logo-sombre{display:var(--logo-sombre)}
.brand{gap:0}
nav.main{display:flex;gap:20px;font-size:13.5px;font-weight:500;margin-left:8px}
nav.main a{text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--ink);border-color:var(--brick)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.tel{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
/* La règle d'origine visait `nav.main`, une classe qui n'existe pas : le
   menu mobile n'a donc JAMAIS fonctionné. À 390 px, la navigation se
   répandait sur trois lignes, « Actualités » était coupé et « Contact »
   disparaissait purement et simplement. */
.site-nav .nav-tel{display:none}
.nav-bouton{display:none;border:1px solid var(--line);background:var(--surface);border-radius:3px;
  width:44px;height:40px;flex:none;cursor:pointer;padding:0;margin-left:auto;position:relative}
.nav-bouton span,.nav-bouton span::before,.nav-bouton span::after{
  content:"";position:absolute;left:12px;width:20px;height:2px;background:var(--ink);
  transition:transform .18s ease,opacity .12s ease}
.nav-bouton span{top:19px}
.nav-bouton span::before{top:-6px;left:0}
.nav-bouton span::after{top:6px;left:0}
.nav-bouton[aria-expanded="true"] span{background:transparent}
.nav-bouton[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-bouton[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1040px){
  .nav-bouton{display:block}
  /* Fermé par défaut : sans JavaScript, le menu reste accessible en dépliant
     la navigation sous l'en-tête plutôt qu'en la faisant disparaître. */
  .site-nav[data-ouvert="non"]{display:none}
  .site-head .wrap{gap:14px}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:6px 0 10px;box-shadow:0 14px 30px rgba(26,33,100,.12);
  }
  .site-nav>a,.site-nav .nav-tiroir a{padding:13px clamp(20px,3.2vw,40px);font-size:16.5px;
    border-top:1px solid var(--line-soft);border-bottom:0;display:block}
  .site-nav>a:first-child{border-top:0}
  .head-actions .tel{display:none}
  /* Le bouton flottant s'efface quand le menu (burger dès 1040 px) est ouvert. */
  body:has(.nav-bouton[aria-expanded="true"]) .ia-appel{opacity:0;pointer-events:none}
  /* Le téléphone et le rendez-vous rejoignent le menu ouvert : ce sont les
     deux actions qu'on cherche sur un téléphone, pas celles qu'on cache. */
  .site-nav .nav-tel{font-weight:700;color:var(--brick);display:block}
}
@media(max-width:560px){
  .head-actions .btn{padding:9px 13px;font-size:13.5px}
}
/* Sous 470 px, la loupe (lot 24) et le bouton de rendez-vous ne tiennent
   plus ensemble à côté du logo : le rendez-vous rejoint le menu ouvert, avec
   le téléphone, et l'en-tête ne déborde plus. */
.site-nav .nav-rdv{display:none}
@media(max-width:470px){
  .head-actions .btn{display:none}
  .site-nav .nav-rdv{display:block;font-weight:700;color:var(--brick)}
}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brick);background:var(--brick);color:var(--sur-brick);padding:10px 17px;border-radius:var(--r);font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--brick-2);border-color:var(--brick-2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
/* Sur les fonds chauds, `--line` est presque invisible : le bouton fantôme
   n'avait plus de contour et se lisait comme du texte. Il en garde un. */
.ivoire .btn.ghost,.sable .btn.ghost{border-color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--muted)}
.btn.sm{padding:7px 13px;font-size:13px}
/* Deux libellés dans le bouton de l'en-tête, un seul affiché : le long sur
   grand écran, le court sous 560 px. Un <span> qui ne contient que « Prendre »
   à côté du texte nu créait deux éléments flex — et un écart de 8 px entre
   « Prendre » et « rendez-vous ». */
.head-actions .btn .court{display:none}

/* ---- photo placeholders ---- */
.ph{position:relative;overflow:hidden;background:var(--surface-2);display:block}
.ph svg{display:block;width:100%;height:100%}
.ph .tag{position:absolute;left:10px;bottom:10px;background:rgba(26,33,100,.82);color:#fff;font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:4px 8px;border-radius:2px;font-weight:600}

/* ---- hero ---- */
.hero{background:var(--dark);color:#EDF0F7;padding:0}
/* La marge d'alignement du hero : la même valeur que celle du wrap. */
:root{--marge-wrap:max(clamp(20px,3.2vw,40px),calc((100vw - 1320px) / 2))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  min-height:min(560px,72vh);align-items:stretch;gap:clamp(24px,4vw,64px)}
/* Le visuel sort du wrap pour rejoindre le bord droit de l'écran. */
/* Le visuel rejoint le bord droit de l'écran, mais SEULEMENT au-delà de
   900 px : plus bas, la grille repasse sur une colonne et ce débordement
   ferait défiler la page latéralement. */

.hero-copy{padding:var(--pas-5) 0 var(--pas-5) var(--marge-wrap);display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero h1{font-size:clamp(34px,4.6vw,58px);color:#fff;letter-spacing:-.015em}
.hero h1 em{font-style:normal;color:#A9BAE4}
.hero p{color:rgba(233,237,247,.76);max-width:46ch;font-size:17px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero .btn.ghost,.hero-simple .btn.ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.hero .btn.ghost:hover,.hero-simple .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
/* Le rendu va au bord de l'écran : c'est ce qui donne au hero sa largeur,
   et ce qui fait la différence entre une image posée dans une colonne et une
   image qui tient la page. */
.hero-media{position:relative;margin:0;overflow:hidden;min-height:520px}
/* `> a` et pas `a` : la règle visait aussi le lien de la légende, qui
   devenait un bloc et cassait la ligne en deux. */
.hero-media > a{display:block;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Un dégradé côté texte : sans lui, la coupure entre l'aplat bleu nuit et le
   ciel du rendu se voit comme une bordure. */
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--dark) 0%,rgba(26,33,100,.55) 14%,rgba(26,33,100,0) 42%)}
.hero-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;padding:34px 24px 16px;
  background:linear-gradient(180deg,rgba(26,33,100,0),rgba(26,33,100,.86));
  color:rgba(233,237,247,.86);font-size:13px;line-height:1.35}

.hero-media figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-media figcaption a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
.hero-media .marque{color:var(--muted-sombre);width:18px;height:18px}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:var(--pas-4) var(--marge-wrap) var(--pas-3)}
  /* Pas de débordement négatif sur téléphone : `100vw` inclut la barre de
     défilement, et la page gagnait 8 px de défilement horizontal. */
  .hero-media{min-height:0;aspect-ratio:16/10;margin:0}
  .hero-media::before{background:linear-gradient(180deg,rgba(26,33,100,.35),rgba(26,33,100,0) 45%)}
}
/* Cette règle d'origine remettait un débordement négatif de 28 px sur le
   visuel du hero : c'est elle qui faisait défiler la page latéralement sur
   téléphone. Le repli mobile est déclaré plus haut, une seule fois. */

.proofbar{background:var(--dark);border-top:1px solid rgba(255,255,255,.14);color:rgba(233,237,247,.82)}
.proofbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:26px 28px}
.proofbar b{display:block;font-family:var(--serif);font-size:26px;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.proofbar span{font-size:12.5px;line-height:1.4;display:block;margin-top:5px}
@media(max-width:720px){.proofbar .wrap{grid-template-columns:1fr 1fr;gap:20px}}

section{padding:78px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}
@media(max-width:640px){.sec-head{flex-wrap:wrap;align-items:flex-start;gap:10px}.sec-head>.link,.sec-head>a{flex:none}}
/* Au doigt, rien sous 40 px (lot 26). */
@media(pointer:coarse),(max-width:640px){.retenir,.btn.sm,.chip,.card-foot .retenir{min-height:40px;padding-top:8px;padding-bottom:8px}.link,.proof{display:inline-block;padding:7px 0}}
.sec-head h2{font-size:clamp(25px,3vw,36px)}
.sec-head .lede{margin-top:12px}
.link{font-size:14px;font-weight:600;color:var(--brick);text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---- model cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:24px}
/* Trois cartes (ou deux) sur une grille de quatre laissaient une colonne vide
   (lot 26) : quand la grille en a trois au plus, `auto-fit` les étire. */
.grid.trois,.grid:has(> :nth-child(3):last-child),.grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .ph{aspect-ratio:4/3}
.card-body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:11px;flex:1}
.card h3{font-size:20px}
/* Quand le titre d'une carte est le lien (la vignette étant décorative),
   il garde l'apparence d'un titre. */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--brick)}
.card .style{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.spec{font-size:12px;border:1px solid var(--line);padding:3px 8px;border-radius:2px;color:var(--ink-2);font-variant-numeric:tabular-nums;background:var(--ground)}
.proof{font-size:12.5px;color:var(--brick);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.proof:hover{border-color:currentColor}
.card-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.card-foot .btn{white-space:nowrap;flex:1 1 100%;justify-content:center}   /* le bouton principal sur sa ligne, les pilules dessous — même hauteur d'une carte à l'autre (lot 26) */
.card-foot .retenir{margin-top:0;padding:4px 11px;font-size:12.5px}
.card-foot .cbx{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer;margin-left:auto}
.heart{background:none;border:0;padding:2px;font-size:15px;line-height:1;color:var(--muted)}
.heart[aria-pressed="true"]{color:var(--brick)}

/* ---- catalogue ---- */
.cat{display:grid;grid-template-columns:236px 1fr;gap:42px;align-items:start}
@media(max-width:880px){.cat{grid-template-columns:1fr;gap:26px}}
.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.fgroup h4,.fgroup-titre{margin:0 0 10px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-family:var(--sans);font-weight:600;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
a.chip[aria-current="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
a.chip[aria-current="true"] .muted{color:rgba(255,255,255,.7)}
.chip{border:1px solid var(--line);background:var(--surface);padding:5px 11px;border-radius:2px;font-size:13px;color:var(--ink-2)}
a.chip{text-decoration:none}
a.chip:hover{border-color:var(--brick);color:var(--brick)}
.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.rail input[type=range]{width:100%;accent-color:var(--brick)}
.count{font-family:var(--serif);font-size:15px;font-weight:600}
.count b{font-size:26px;font-variant-numeric:tabular-nums}
.cat-bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.urlbar{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);padding:4px 9px;border-radius:2px}
.empty{padding:60px 0;text-align:center;color:var(--muted)}

/* ---- compare tray ---- */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--dark);color:#fff;transform:translateY(110%);transition:transform .25s;box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.tray.on{transform:none}
.tray .wrap{display:flex;align-items:center;gap:16px;padding:14px 28px;flex-wrap:wrap}
.tray .names{font-size:14px;color:rgba(255,255,255,.75)}
.tray .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}

/* ---- fiche ---- */
.fiche-head{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
@media(max-width:880px){.fiche-head{grid-template-columns:1fr;gap:26px}}
.fiche-head h1{font-size:clamp(32px,4vw,50px);letter-spacing:-.015em}
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0}
.keyfacts div{padding:16px 14px 16px 0;border-right:1px solid var(--line-soft)}
.keyfacts div:last-child{border-right:0}
.keyfacts b{display:block;font-family:var(--serif);font-size:23px;font-variant-numeric:tabular-nums}
.keyfacts span{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:620px){.keyfacts{grid-template-columns:1fr 1fr}}
.gal{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:8px}
.gal .ph:first-child{aspect-ratio:4/3}
.gal .side{display:grid;gap:12px}
.gal .side .ph{aspect-ratio:16/10}
@media(max-width:700px){.gal{grid-template-columns:1fr}}

.variants{display:grid;gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.variant{background:var(--surface);display:grid;grid-template-columns:190px 1fr auto;gap:22px;align-items:center;padding:18px 20px}
.variant .ph{aspect-ratio:16/10;border-radius:2px}
.variant h4{font-size:17px}
.variant p{font-size:14.5px;color:var(--ink-2);margin-top:5px}
@media(max-width:760px){.variant{grid-template-columns:1fr;gap:12px}.variant .ph{max-width:280px}}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line-soft);padding:18px;border-radius:var(--r)}
.plan h4{font-size:15px;font-family:var(--sans);font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between}
.plan h4 span{color:var(--muted);font-weight:500;font-size:13px}
.plan .ph{aspect-ratio:5/4;border-radius:2px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
ul.ticks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px;font-size:15px;color:var(--ink-2)}
ul.ticks li{padding-left:20px;position:relative}
ul.ticks li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--brick)}

/* ---- materials strip ---- */
.mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.mat{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.mat .sw{height:88px}
.mat p{padding:9px 11px;font-size:13px;font-weight:500}
.mat p small{display:block;color:var(--muted);font-weight:400;font-size:11.5px}

/* ---- smart bridge ---- */
.bridge{background:var(--surface);border:1px solid var(--line-soft);border-left:4px solid var(--smart);border-radius:var(--r);padding:30px 32px;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.bridge h3{font-size:23px}
.bridge p{color:var(--ink-2);max-width:56ch;margin-top:8px;font-size:15px}
.bridge .btn{background:var(--smart);border-color:var(--smart)}
.bridge .btn:hover{filter:brightness(.92)}
.bridge .eyebrow{color:var(--smart)}

/* ---- callout ---- */

/* ---- rappel ---- */
.rappel{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.rappel input{flex:1;min-width:150px;background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;font:inherit;font-size:14px;color:var(--ink)}
.rappel input::placeholder{color:var(--muted)}

/* ---- footer ---- */
footer{background:var(--dark);color:rgba(233,237,247,.74);padding:56px 0 40px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
footer h5{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--perle);margin:0 0 12px;font-weight:600}
footer a{display:block;text-decoration:none;padding:3px 0;color:rgba(233,237,247,.74)}
footer a:hover{color:#fff}
footer .fbrand img{height:46px;width:auto;display:block}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* ---- assistant ---- */
.fab{position:fixed;right:22px;bottom:22px;z-index:75;background:var(--brick);color:var(--sur-brick);border:0;border-radius:40px;padding:13px 20px;font-size:14px;font-weight:600;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);display:flex;gap:9px;align-items:center}
.fab:hover{background:var(--brick-2)}
.assist{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--line);z-index:80;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .28s ease;box-shadow:-16px 0 40px -22px rgba(0,0,0,.5)}
.assist.on{transform:none}
.assist header{padding:16px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;background:var(--dark);color:#fff}
.assist header b{font-family:var(--serif);font-size:16px;display:block}
.assist header small{font-size:11.5px;color:rgba(255,255,255,.6)}
.assist header button{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.7);font-size:22px;line-height:1}
.thread{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:88%;font-size:14.5px;line-height:1.55;padding:11px 14px;border-radius:12px}
.msg.a{background:var(--ground);border:1px solid var(--line-soft);border-bottom-left-radius:3px}
.msg.u{background:var(--dark);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.msg .pick{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.msg .pick span{border:1px solid var(--line);border-radius:2px;padding:4px 8px;font-size:12px;background:var(--surface)}
.msg .rule{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted)}
.assist .foot{border-top:1px solid var(--line-soft);padding:12px 14px;display:flex;flex-direction:column;gap:9px;background:var(--ground)}
.sugg{display:flex;gap:7px;flex-wrap:wrap}
.sugg button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 12px;font-size:12.5px;color:var(--ink-2);text-align:left}
.sugg button:hover{border-color:var(--brick);color:var(--brick)}
.sugg button:disabled{opacity:.4;cursor:default}
.fakeinput{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:13.5px;color:var(--muted);background:var(--surface)}
.typing span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-right:3px;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---- compare modal ---- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(22,24,27,.6);display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.modal-in{background:var(--surface);border-radius:var(--r);max-width:820px;width:100%;max-height:86vh;overflow:auto;padding:28px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
th{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
td:first-child{color:var(--muted);font-size:13px}
.hidden{display:none!important}
.note{font-size:12.5px;color:var(--muted);margin-top:26px;padding-top:14px;border-top:1px solid var(--line-soft)}

/* ---------- gabarit du site en production ------------------------------ */
/* Les entrées du menu, qu'elles ouvrent un tiroir ou non.
   Une entrée à tiroir est un <button> : sans cette règle il héritait de la
   taille du corps de texte (16,5 px) là où les liens sont à 14,5 px — les
   deux familles n'avaient ni la même taille, ni la même graisse, ni la même
   ligne de base. C'était visible du premier coup d'œil, et c'est le genre de
   détail qui fait qu'un menu « ne va pas » sans qu'on sache dire pourquoi.
   Un seul sélecteur les tient désormais ensemble. */
.site-nav{display:flex;gap:22px;align-items:center}
.site-nav>a,.nav-groupe>button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:14.5px;font-weight:400;line-height:1.4;
  color:var(--ink-2);text-decoration:none;background:none;border:0;cursor:pointer;
  padding:4px 0;border-bottom:2px solid transparent}
.site-nav>a:hover,.nav-groupe>button:hover{color:var(--ink)}
.site-nav>a[aria-current="page"],.nav-groupe>button[aria-current="true"]{
  color:var(--brick);border-color:var(--brick);font-weight:600}
.site-foot{background:var(--dark);color:rgba(233,237,247,.78);margin-top:70px;padding:0;font-size:14px}
/* Trois étages (lot 25) : qui nous sommes et comment nous joindre ; les
   rubriques du menu ; le juridique en petit. */
.foot-haut{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start;padding-top:46px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-qui p{max-width:36ch;line-height:1.55}
.logo-pied{display:block;height:34px;width:auto;margin-bottom:14px}
.foot-reseaux{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.foot-reseaux a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);color:#fff;text-decoration:none;font-size:13.5px;min-height:36px}
.foot-reseaux a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.foot-reseaux svg{flex:none}
.foot-contact{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.site-foot .foot-tel{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,32px);color:#fff;text-decoration:none;letter-spacing:-.01em;line-height:1.1}
.foot-tel:hover{color:var(--muted-sombre)}
.foot-contact p{line-height:1.5}
.foot-contact .btn{margin-top:4px;background:#fff;border-color:#fff;color:var(--dark)}
.foot-contact .btn:hover{background:var(--muted-sombre);border-color:var(--muted-sombre)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 36px;padding-top:34px;padding-bottom:10px}
.foot-titre{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--perle);margin:0 0 12px;font-weight:600}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.site-foot a{color:rgba(233,237,247,.78);text-decoration:none;font-size:14px}
.site-foot a:hover{color:#fff}
.site-foot .muted{color:rgba(233,237,247,.55)}
.site-foot .foot-communes{columns:2;column-gap:20px;display:block}
.foot-communes li{break-inside:avoid;padding:3.5px 0}
.foot-communes li:last-child{column-span:all;padding-top:10px;font-size:13px}
.foot-bas{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:72px;margin-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px}   /* 72 px : le bouton de l'assistant, fixé en bas à droite, ne couvre pas la dernière ligne */
.foot-legal{flex-direction:row!important;flex-wrap:wrap;gap:6px 18px!important;align-items:center}
.foot-legal a,.foot-legal .theme-bouton{font-size:12.5px}
.foot-doctrine{margin:0;color:rgba(233,237,247,.55);max-width:52ch}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-haut{grid-template-columns:1fr;gap:22px}.foot-cols{grid-template-columns:1fr}.foot-communes{columns:2}}
/* Les fonds de section, nommés. Le rythme d'une page se compose en alternant
   ces quatre-là, jamais en répétant le même deux fois de suite. */
.section.claire{background:var(--surface)}
.section.ivoire{background:var(--ivoire)}
.section.sable{background:var(--sable)}
.section.encre{background:var(--dark);color:#EDF0F7}
.section.encre h2,.section.encre h3,.section.encre b{color:#fff}
.section.encre .lede,.section.encre p{color:rgba(233,237,247,.8)}
.section.encre .link{color:var(--muted-sombre)}
.section.large{padding-block:var(--pas-6)}

.section{padding:var(--pas-5) 0}
.section.serre{padding:var(--pas-4) 0}
.prose{max-width:70ch;font-size:17px}
.prose h2{font-size:26px;margin:34px 0 12px}
.prose h3{font-size:21px;margin:26px 0 10px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 16px 20px}
.prose img{border-radius:var(--r);margin:20px 0}
.prose figure{margin:24px 0}
.fil{font-size:13px;color:var(--muted);margin-bottom:18px}
.hero-simple .fil-hero,.hero .fil-hero{color:rgba(237,240,247,.72);margin:0 0 14px}
.hero-simple .fil-hero a,.hero .fil-hero a{color:inherit}
.fil a{color:var(--muted)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:26px}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block;background:var(--surface-2)}
.hero-simple{background:var(--dark);color:#fff;padding:56px 0 52px}
.hero-simple h1{color:#fff;font-size:clamp(30px,4vw,46px)}
.hero-simple .lede{color:rgba(233,237,247,.8);margin-top:14px}
.avert{background:#FFF6D8;border:1px solid #E1D09F;padding:14px 16px;border-radius:var(--r);font-size:14px;margin-bottom:26px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.tbl th{font-weight:600;color:var(--muted);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.ok{color:#00936B;font-weight:600}
.ko{color:#B4232A;font-weight:600}
.prix{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink)}
.prix small{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;font-family:var(--sans)}
.pagination{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap}
.pagination a,.pagination span{border:1px solid var(--line);padding:7px 12px;border-radius:2px;text-decoration:none;color:var(--ink-2);font-size:14px}
.pagination [aria-current]{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.carte-sm{background:var(--brick-2);border-color:var(--brick-2)}
.carte-sm .ph{background:var(--brick);display:grid;place-items:center;padding:24px;text-align:center}
.carte-sm .ph span{font:600 12px/1.7 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:#E1D09F}
.carte-sm h3,.carte-sm .style{color:#fff}
.carte-sm .style{color:#E1D09F}
.carte-sm p{font-size:13.5px;line-height:1.62;color:#C3C5C5;margin:0}
.carte-sm .card-foot{border-color:#3F62A7}
.carte-sm .btn.ghost{color:#fff;border-color:#3F62A7}
@media (max-width:900px){
  /* L'ancien repli faisait passer la navigation à la ligne et la rendait
     défilable horizontalement : c'est ce qui coupait « Actualités » en
     « Actu » et faisait disparaître « Contact ». Le menu déroulant le
     remplace (voir plus haut). */
  .cat{grid-template-columns:1fr}
  .rail{position:static}
}

/* ---------- visuels ----------------------------------------------------- */
.ph img.couvre{width:100%;height:100%;object-fit:cover;display:block}
img.hero-fiche,img.couvre{height:auto}
.ph img.couvre{height:100%}
.hero-visuel{margin:30px 0 0}
.hero-visuel img{width:100%;height:auto;border-radius:var(--r);display:block}
.gal a.zoom{display:block;position:relative;cursor:zoom-in}
.gal a.zoom::after{content:"⤢";position:absolute;right:8px;bottom:8px;background:rgba(26,33,100,.82);color:#fff;
  font-size:13px;line-height:1;padding:6px 7px;border-radius:2px;opacity:0;transition:opacity .15s}
.gal a.zoom:hover::after{opacity:1}
/* un plan de niveau ne se recadre pas : on le montre entier, sur fond blanc */
.gal.plans{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gal.plans img{object-fit:contain;background:#fff;aspect-ratio:4/3;padding:10px;border:1px solid var(--line-soft)}

/* ---------- agrandissement ---------------------------------------------- */
.loupe{position:fixed;inset:0;z-index:200;background:rgba(15,19,34,.94);display:grid;place-items:center;padding:28px}
.loupe img{max-width:min(1400px,96vw);max-height:92vh;width:auto;height:auto;border-radius:2px;background:#fff}
.loupe button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:6px 10px}
.loupe .compte{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:13px}
.loupe .nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:38px;padding:10px 18px;cursor:pointer;opacity:.65}
.loupe .nav:hover{opacity:1}
.loupe .prec{left:4px;right:auto;top:50%}
.loupe .suiv{right:4px;top:50%}

/* ---------- formulaires -------------------------------------------------- */
.form{max-width:640px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.champ{margin:0;display:flex;flex-direction:column;gap:6px}
.champ-large,.form-compact .champ{grid-column:1/-1}
.champ label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.champ label em{font-weight:400;color:var(--muted);font-style:normal}
.req{color:var(--brick);font-weight:700;margin-left:1px}
.ia-rappel-legende{font-size:12px;color:var(--muted);margin:6px 0 0}
.champ input,.champ select,.champ textarea{font:15px/1.4 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--brick);outline-offset:-1px;border-color:var(--brick)}
.champ small{font-size:12.5px;color:var(--muted)}
.champ textarea{resize:vertical;min-height:96px}
.champ-commune{position:relative}
.suggestions{position:absolute;top:100%;left:0;right:0;z-index:20;margin:2px 0 0;padding:0;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-height:260px;overflow:auto}
.suggestions li{padding:8px 12px;font-size:14.5px;cursor:pointer}
.suggestions li:hover,.suggestions li[aria-selected="true"]{background:var(--surface-2)}
.suggestions li span{color:var(--muted);font-size:12.5px;margin-left:6px}
.consent label{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--ink-2);cursor:pointer}
.consent input{width:auto;margin-top:2px;accent-color:var(--brick)}
.form-pied{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.form-pied small{font-size:12.5px;color:var(--muted)}
.form-erreur{background:#FBEAEA;border:1px solid #E0B4B4;color:#8A1F26;padding:11px 13px;border-radius:var(--r);font-size:14.5px;margin:0 0 18px}
.form-contexte{background:var(--surface-2);border-left:3px solid var(--brick);padding:10px 14px;font-size:14.5px;margin:0 0 18px}
.form-compact{max-width:420px}
.form-compact .champs{grid-template-columns:1fr}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
.contact-infos h2{font-size:17px;margin:0 0 8px}
.contact-infos h2+p{margin-top:0}
.contact-infos>*+h2{margin-top:26px}
.contact-infos .tel{font-size:20px;color:var(--brick)}
.etapes{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
.etapes li{margin-bottom:7px}
.bloc-rappel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:26px 28px;margin-top:44px;max-width:760px}
.bloc-rappel h2{font-size:22px;margin:0 0 6px}
@media (max-width:900px){.champs{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr;gap:38px}}

/* ---------- frise des étapes -------------------------------------------- */
.frise{list-style:none;margin:0;padding:0;counter-reset:e;max-width:900px}
.frise li{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:0 0 34px;position:relative}
.frise li::before{content:"";position:absolute;left:23px;top:34px;bottom:-4px;width:1px;background:var(--line)}
.frise li:last-child::before{display:none}
.frise-num{width:46px;height:46px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;
  font:700 15px/1 var(--serif);font-variant-numeric:tabular-nums;position:relative;z-index:1}
.frise-corps h2,.frise-corps h3{font-size:21px;margin:6px 0 4px}
.frise-corps h3{font-size:18px}
.frise-corps p{margin:0 0 4px;color:var(--ink-2)}
.frise-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px!important}
.frise-meta span{font-size:12px;border:1px solid var(--line);padding:2px 8px;border-radius:2px;color:var(--muted);background:var(--ground)}
.frise-courte li{padding-bottom:24px}
.deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.deux-cols h2{font-size:23px;margin:0 0 10px}
.deux-cols>*>h2+p,.deux-cols>*>*+h2{margin-top:20px}
.livre-liens{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.livre-liens a{display:block;background:var(--surface);padding:20px 22px;text-decoration:none;color:inherit}
.livre-liens a:hover{background:var(--ground)}
.livre-liens div{background:var(--surface);padding:22px 24px}
.livre-liens .marque{color:var(--brick);display:block;margin-bottom:12px}
/* Le chapeau : la phrase qui ouvre toutes les fiches, de la même façon. */
.chapeau{font-size:1.08em;line-height:1.55;color:var(--ink-2);max-width:62ch;
  margin:30px 0 0;padding-left:16px;border-left:2px solid var(--brick)}
.spec-sm{display:inline-flex;align-items:center;gap:6px;color:var(--brick);border-color:var(--brick)}
.callout{display:flex;gap:18px;align-items:flex-start;background:var(--ivoire);
  border:1px solid var(--line-soft);border-left:3px solid var(--brick);border-radius:var(--r);padding:20px 22px}
.callout .marque{color:var(--brick);flex:none;margin-top:2px}
.callout strong{display:block;font-family:var(--serif);font-size:17px;margin-bottom:5px;color:var(--ink)}
.callout p{margin:0 0 8px;color:var(--ink-2);font-size:15px;max-width:64ch}
.cadre-3d{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.cadre-3d iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.livre-liens strong{display:block;font-family:var(--serif);font-size:16.5px;color:var(--brick);margin-bottom:6px}
.livre-liens span{font-size:14.5px;color:var(--ink-2);line-height:1.55}
/* `.mat figcaption span` est plus spécifique que `.puce-standard` : sans ce
   sélecteur, le badge héritait du gris des légendes sur son fond bleu nuit,
   soit 2,95:1 — illisible, et la seule violation de contraste qui restait. */
.puce-standard,.mat figcaption .puce-standard{display:inline-block;align-self:flex-start;margin-top:7px;
  background:var(--dark);color:#fff;border-radius:2px;padding:3px 9px;
  font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.3}
.mat-mot{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.retenir{margin-top:10px;border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:5px 13px;font:600 13px var(--sans);color:var(--ink-2);cursor:pointer}
.retenir:hover{border-color:var(--brick);color:var(--brick)}
.retenir[aria-pressed="true"]{background:var(--brick);border-color:var(--brick);color:var(--sur-brick)}
/* La barre du carnet. Elle laisse la place à l'assistant, qui occupe déjà le
   coin bas-droit : elle s'ancre à gauche. */
.barre-carnet{position:fixed;left:22px;bottom:22px;z-index:110;display:flex;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:40px;padding:8px 10px 8px 12px;
  box-shadow:0 6px 22px rgba(26,33,100,.18)}
.barre-carnet b{font-variant-numeric:tabular-nums;margin-left:4px}
.barre-vider{border:0;background:none;color:var(--muted);font:600 13px var(--sans);cursor:pointer;padding:0 8px}
.barre-vider:hover{color:var(--brick)}
@media(max-width:640px){
  .barre-carnet{left:8px;right:8px;bottom:70px;justify-content:center}
}
/* Le nom d'un modèle n'est pas une étiquette de colonne : il se lit en
   capitales et corps 12 dans le style de tableau, ce qui le rend illisible
   pour la seule information que le visiteur cherche. */
.comparateur th[scope="col"]{vertical-align:bottom;width:calc((100% - 180px)/3);
  text-transform:none;letter-spacing:0;font-size:inherit;color:var(--ink)}
.comparateur th[scope="col"] strong{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink)}
.comparateur td{font-size:15px}
.comparateur th[scope="row"]{width:180px;text-transform:none;letter-spacing:.02em;font-size:13.5px;text-align:left;color:var(--muted);font-size:13.5px;
  font-weight:600;letter-spacing:.02em}
.comparateur td{vertical-align:top}
.comparateur-indice{display:none;font-size:13px;margin:0 0 8px}
@media(max-width:700px){.comparateur{min-width:640px}.comparateur-enveloppe{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}.comparateur-indice{display:block}}
.vide-carte{border:1px solid var(--line);border-radius:var(--r);padding:40px 32px;text-align:center;background:var(--surface)}
.vide-carte h2{font-size:22px;margin-bottom:8px}
.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.avis{margin:0;background:var(--ground);border:1px solid var(--line-soft);border-radius:var(--r);padding:22px 24px;
  display:flex;flex-direction:column;gap:12px}
.avis-note{margin:0;color:var(--brick);letter-spacing:.14em;font-size:15px}
.avis blockquote{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.avis figcaption{margin-top:auto;padding-top:6px}
.avis figcaption strong{display:block;font-family:var(--serif);font-size:15px}
.avis figcaption span{font-size:13px;color:var(--muted)}
.liste-nette{list-style:none;margin:0 0 16px;padding:0}
.liste-nette li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--line-soft);font-size:15px}
.liste-nette li::before{content:"—";position:absolute;left:0;color:var(--brick);font-weight:700}
.voie{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:30px 32px}
.voie-smart{border-color:var(--smart)}
.voie-smart .eyebrow{color:var(--smart-texte)}

/* ---------- bibliothèque de matières ------------------------------------ */
.fam-titre{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-family:var(--sans);font-weight:600;margin:36px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.fam-titre:first-child{margin-top:0}
.mats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;align-items:stretch}
.mats.peu{grid-template-columns:repeat(auto-fit,minmax(230px,320px))}
.mat{margin:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.mat-ton{display:block;aspect-ratio:3/2}
.mat figcaption{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
/* Le bouton se colle en bas : sans ça, il flotte à des hauteurs différentes
   d'une carte à l'autre selon la longueur du texte. */
.mat .retenir{margin-top:auto;align-self:flex-start}
.mat strong{font-size:14.5px}
.mat span{font-size:12.5px;color:var(--muted)}

/* ---------- questions fréquentes ---------------------------------------- */
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;padding:16px 34px 16px 0;font-family:var(--serif);font-weight:600;font-size:17px;
  list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;font-weight:400;color:var(--brick);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--brick)}
.faq-reponse{padding:0 40px 18px 0;color:var(--ink-2);font-size:15.5px;line-height:1.62}
.faq-reponse p{margin:0}
@media (max-width:900px){.deux-cols{grid-template-columns:1fr;gap:34px}.frise li{grid-template-columns:46px 1fr;gap:16px}.frise li::before{left:22px}}

/* ---------- bandeau de consentement -------------------------------------- */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--dark);color:rgba(233,237,247,.9);
  box-shadow:0 -6px 24px rgba(0,0,0,.22)}
.bandeau-cookies .wrap{display:flex;align-items:center;gap:26px;padding:16px 28px;flex-wrap:wrap}
.bandeau-cookies p{margin:0;font-size:14px;max-width:70ch}
.bandeau-cookies a{color:#A9BAE4}
.bandeau-actions{margin-left:auto;display:flex;gap:10px}
.bandeau-cookies .btn.ghost{color:#fff;border-color:rgba(255,255,255,.32)}
@media (max-width:700px){.bandeau-actions{margin-left:0;width:100%}}

/* ---------- assistant de projet ------------------------------------------ */
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── l'assistant : un tiroir, pas une bulle ──────────────────────────────
   Implantation reprise de la maquette. Une conversation a besoin de hauteur :
   la bulle plafonnait à quelques centaines de pixels, trois échanges et on
   faisait défiler dans un mouchoir de poche. Le tiroir prend toute la hauteur
   de la fenêtre.

   Il n'est pas masqué par `display:none` mais par `visibility` : sans boîte,
   pas de transition. `visibility:hidden` retire aussi l'élément de l'ordre de
   tabulation — c'est ce qui évite qu'un tiroir fermé garde le clavier. Le
   délai sur `visibility` laisse la translation se terminer avant de le
   masquer. */
.ia-appel{position:fixed;right:22px;bottom:22px;z-index:120;display:inline-flex;align-items:center;gap:9px;
  background:var(--dark);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:40px;padding:13px 20px;font-size:14px;
  font-weight:600;cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.55);transition:background .15s}
/* Sur le pied de page et en thème sombre, le bouton se fondait dans le fond (lot 26). */
:root[data-theme="dark"] .ia-appel{background:var(--brick);color:var(--sur-brick);border-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ia-appel{background:var(--brick);color:var(--sur-brick);border-color:transparent}}
.ia-appel:hover{background:var(--brick)}
.ia-appel[aria-expanded="true"]{opacity:0;pointer-events:none}
.ia-point{width:8px;height:8px;border-radius:50%;background:#7FD8B8;display:inline-block}

/* Le voile n'existe QU'au téléphone. Sur grand écran, le tiroir laisse le
   site utilisable derrière lui — c'est tout l'intérêt d'un panneau latéral,
   et l'assombrir le transformerait en boîte modale. */
.ia-voile{position:fixed;inset:0;z-index:125;background:transparent;
  opacity:0;transition:opacity .28s ease;pointer-events:none}
.ia-voile[data-ouvert="oui"]{opacity:1}

.ia-panneau{position:fixed;right:0;top:0;bottom:0;z-index:130;width:min(430px,100%);
  background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-18px 0 46px -24px rgba(26,33,100,.55);
  transform:translateX(102%);visibility:hidden;
  transition:transform .28s cubic-bezier(.32,.72,0,1),visibility 0s linear .28s}
.ia-panneau[data-ouvert="oui"]{transform:none;visibility:visible;
  transition:transform .28s cubic-bezier(.32,.72,0,1),visibility 0s}

.ia-tete{display:flex;gap:14px;align-items:flex-start;padding:17px 18px;
  background:var(--dark);color:#fff;flex:none}
.ia-tete strong{display:block;font-family:var(--serif);font-size:16px;line-height:1.25}
.ia-tete span{display:block;font-size:12.5px;color:rgba(233,237,247,.72);margin-top:4px;line-height:1.45}
.ia-fermer{margin-left:auto;background:none;border:0;color:rgba(255,255,255,.75);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px;flex:none}
.ia-fermer:hover{color:#fff}

.ia-fil{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px;
  display:flex;flex-direction:column;gap:13px}
.ia-bulle{max-width:88%;padding:11px 14px;border-radius:12px;font-size:14.5px;line-height:1.55}
.ia-bulle p{margin:0 0 9px}
.ia-bulle p:last-child{margin:0}
.ia-de-lui{background:var(--ground);border:1px solid var(--line-soft);align-self:flex-start;
  border-bottom-left-radius:3px}
.ia-de-moi{background:var(--dark);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.ia-de-moi a{color:#A9BAE4}

/* Les trois points d'attente. Ils disent « ça travaille » mieux qu'un mot,
   et `prefers-reduced-motion` les fige plus bas. */
.ia-attente{display:flex;gap:4px;align-items:center;padding:14px}
.ia-attente i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;
  animation:ia-clignote 1.2s infinite}
.ia-attente i:nth-child(2){animation-delay:.2s}
.ia-attente i:nth-child(3){animation-delay:.4s}
@keyframes ia-clignote{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ia-bas{flex:none;border-top:1px solid var(--line-soft);background:var(--ground);padding:12px 16px 14px}
.ia-suggestions{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ia-suggestions button{border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:6px 13px;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;text-align:left}
.ia-suggestions button:hover{border-color:var(--brick);color:var(--brick)}
.ia-saisie{display:flex;gap:8px}
.ia-saisie input{flex:1;min-width:0;font:15px var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.ia-saisie input:focus{outline:2px solid var(--brick);outline-offset:-1px}
.ia-saisie button{background:var(--brick);color:var(--sur-brick);border:0;border-radius:var(--r);width:46px;
  font-size:18px;cursor:pointer;flex:none}
.ia-saisie button:hover{background:var(--brick-2)}
.ia-pied{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.5;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
/* « Être rappelé » : un bouton qui a l'air d'un lien, toujours là, jamais
   criard — la valeur d'abord, la proposition ensuite. */
.ia-rappel-appel{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;
  font:600 13px var(--sans);color:var(--brick);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ia-rappel-appel .marque{width:15px;height:15px}
.ia-rappel-appel:hover{color:var(--brick-2)}
a.ia-formulaire-appel{text-decoration:underline}
.form-ia-note{margin:6px 0 0;font-size:12.5px;color:var(--muted)}

/* Le mini-formulaire, dans le fil. Une carte sable, pas une bulle : ce n'est
   pas l'assistant qui parle, c'est le site qui propose. */
.ia-rappel{align-self:stretch;background:var(--sable,#F3EEE4);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:grid;gap:10px;font-size:14px}
.ia-rappel-titre{margin:0;font-weight:600;color:var(--dark);line-height:1.4}
.ia-rappel label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ia-rappel input[type=text],.ia-rappel input[type=tel]{font:15px var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;width:100%}
.ia-rappel input:focus{outline:2px solid var(--brick);outline-offset:-1px}
.ia-rappel-consent{flex-direction:row!important;align-items:flex-start;gap:8px!important;font-weight:400!important;font-size:12px!important;line-height:1.45;color:var(--muted)}
.ia-rappel-consent input{margin-top:2px;flex:none;accent-color:var(--brick)}
.ia-rappel-consent a{color:inherit}
.ia-rappel-erreur{margin:0;color:#8A1F26;font-size:13px;font-weight:600}
.ia-rappel-actions{margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ia-rappel-non{border:0;background:none;font:600 13px var(--sans);color:var(--muted);cursor:pointer;padding:6px 0}
.ia-rappel-non:hover{color:var(--ink)}
.ia-rappel.envoye{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .ia-panneau,.ia-voile{transition:none}
  .ia-attente i{animation:none;opacity:.5}
}
@media (max-width:560px){
  /* Sur téléphone le tiroir prend tout l'écran : à 390 px, une conversation
     dans une colonne de 340 px avec des marges de chaque côté ne laisse pas
     la place d'écrire. Le voile devient cliquable — c'est là qu'on ferme
     d'instinct. */
  /* Plein écran et figé (correctif de mise en ligne) : le tiroir couvre tout
     (`inset:0`, hauteur en `dvh` — la barre du navigateur ne le décale plus),
     la page derrière est gelée (`html.ia-ouvert`), et le champ fait 16 px pour
     que Safari iOS n'agrandisse pas la page au premier tap. La hauteur suit
     le clavier virtuel (site.js, `visualViewport`). */
  .ia-panneau{width:100%;left:0;top:0;bottom:auto;height:100vh;height:100dvh;border-left:0;box-shadow:none}
  html.ia-ouvert,html.ia-ouvert body{overflow:hidden;height:100%}
  html.ia-ouvert body{position:fixed;left:0;right:0;width:100%}
  .ia-saisie input{font-size:16px}
  .ia-voile{background:rgba(26,33,100,.45)}
  .ia-voile[data-ouvert="oui"]{pointer-events:auto}
  .ia-appel{right:12px;bottom:12px;padding:12px 17px;font-size:13.5px}
  .ia-tete{padding:15px 16px}
  .ia-fil{padding:16px}
  .ia-bulle{max-width:94%}
}

/* ── lot 12 : caractéristiques, FAQ, lotissements ────────────────────────── */

/* Le bandeau de caractéristiques. Le même sur les 28 modèles et les 53
   réalisations : c'est ce qui rend deux fiches comparables d'un coup d'œil.
   Grille auto-fit plutôt que colonnes fixes — cinq postes sur un 1440,
   deux sur un téléphone, sans point de rupture à écrire. */
.caracteristiques{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin:20px 0 28px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
/* Cinq postes sur deux colonnes : le dernier prend la ligne, pas de case grise (lot 26). */
@media(max-width:640px){.caracteristiques>div:last-child:nth-child(odd){grid-column:1/-1}}
.caracteristiques>div{background:var(--surface);padding:16px 18px 14px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.caracteristiques .marque{color:var(--brick);margin-bottom:6px}
.caracteristiques dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.caracteristiques dd{margin:0;font-family:var(--serif);font-size:20px;font-weight:700;
  color:var(--ink);line-height:1.25}
.caracteristiques>div.vide dd{font-family:var(--sans);font-size:15px;font-weight:400;
  color:var(--muted);font-style:italic}

.origine{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 26px;
  font-size:15px;color:var(--ink-2)}
.origine .marque{color:var(--brick);flex:none}

/* Les repères d'un lotissement : viabilisé, borné, assainissement. */
.reperes{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.reperes li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}
.reperes .marque{color:var(--brick);flex:none}
/* Une carte « vendue » ou « terminée » : l'image s'éteint, pas le texte.
   Baisser l'opacité de toute la carte faisait tomber le contraste des
   libellés sous 4,5:1 — c'est l'image qui doit dire « c'est passé ». */
.card.pris .ph{filter:grayscale(1);opacity:.78}

/* La FAQ : quatre-vingt-dix questions ne se lisent pas en une colonne. */
.faq-filtre{margin:0 0 26px}
.faq-filtre label{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:7px}
.faq-filtre input{width:100%;padding:13px 16px;font:inherit;font-size:16.5px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.faq-filtre input:focus-visible{outline:2px solid var(--brick);outline-offset:1px;border-color:var(--brick)}
.faq-compte{margin:8px 0 0;font-size:14px;color:var(--muted);min-height:1.2em}

.faq-sommaire{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin:0 0 40px}
.faq-sommaire a{display:flex;align-items:center;gap:10px;padding:13px 15px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  transition:border-color .18s,transform .18s}
.faq-sommaire a:hover{border-color:var(--brick);transform:translateY(-1px)}
.faq-sommaire .marque{color:var(--brick);flex:none}
.faq-sommaire span{flex:1;font-size:15px;font-weight:600;line-height:1.3}
.faq-sommaire b{font-family:var(--serif);font-size:15px;color:var(--muted);font-weight:700}

.faq-groupe{margin:0 0 40px;scroll-margin-top:86px}
.faq-groupe>h2{display:flex;align-items:center;gap:11px;font-size:23px;margin:0 0 16px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.faq-groupe>h2 .marque{color:var(--brick);flex:none}
.faq-vide{padding:26px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);
  text-align:center}

/* Le tableau des lots, au back-office. */
.bo-table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
.bo-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 10px 7px;border-bottom:1px solid var(--line)}
.bo-table td{padding:8px 10px;border-bottom:1px solid var(--line-2,var(--line));vertical-align:middle}
.bo-enligne{display:flex;gap:7px;align-items:center}
.bo-enligne select{padding:5px 8px;font:inherit;font-size:14px}
.bo-lot-neuf{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:15px;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--ivoire)}
.bo-lot-neuf label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;
  color:var(--muted)}
.bo-lot-neuf input{padding:8px 10px;font:inherit;font-size:15px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface);color:var(--ink)}
.bo-lot-neuf .aide{flex-basis:100%;margin:0}

@media (max-width:620px){
  .caracteristiques{grid-template-columns:repeat(2,1fr)}
  .caracteristiques dd{font-size:18px}
  .bo-table thead{display:none}
  .bo-table tr{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px 0;
    border-bottom:1px solid var(--line)}
  .bo-table td{border:0;padding:2px 0}
  .bo-table td:last-child{grid-column:1/-1}
}

/* Un titre qui porte une marque : elle s'aligne sur la ligne de base du texte
   et garde son espace. Sans ça, « Ce que vous pouvez changer » collait à son
   pictogramme, ce qui se voit tout de suite et ne se répare qu'ici. */
h2>.marque,h3>.marque{vertical-align:-.14em;margin-right:.42em}
.faq-groupe>h2>.marque,.sec-head h2>.marque{margin-right:0}

/* Six postes dans « ce qui est compris » : en auto-fit ils font 4 + 2 sur un
   grand écran, et la cellule vide laisse voir le fond de la grille comme un
   pavé gris. Trois colonnes se remplissent exactement. */
.livre-liens.six{grid-template-columns:repeat(3,1fr)}
.livre-liens.quatre{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.livre-liens.six,.livre-liens.quatre{grid-template-columns:1fr}}
@media (max-width:900px){.livre-liens.six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.livre-liens.six{grid-template-columns:1fr}}

/* Dans une colonne déjà étroite, `.prose` n'a plus à se brider : sa mesure
   est celle de la colonne. Sinon la page a deux marges, l'une dans l'autre. */
.wrap.etroit>.prose{max-width:none}
.wrap.etroit>.prose p,.wrap.etroit>.prose li{max-width:none}

/* La colonne de texte se centre dans son wrap. `.prose` plafonne à 70 caractères
   — c'est la bonne mesure de lecture — mais collée à gauche d'un wrap de
   1 320 px elle donne l'impression d'une page à moitié vide. Centrée, la même
   colonne se lit comme un document. C'est la seconde moitié de la remarque
   « affichage trop petit sur desktop » : le texte n'était pas trop petit, il
   était décentré. */
.section>.wrap>.prose{margin-left:auto;margin-right:auto}
/* La colonne de lecture (lot 26) : chapeau, titre et texte ensemble, centrés
   ensemble — plus de titre à gauche au-dessus d'un texte au milieu. */
.lecture{max-width:72ch;margin-left:auto;margin-right:auto}
.lecture .prose{margin-left:0;margin-right:0;max-width:none}
.lecture .chapeau{max-width:none}

/* ── lot 13 : réassurance, avis, actualités ──────────────────────────────── */

/* Les étoiles. Une pleine et une vide, pour que cinq sur cinq se lise comme
   cinq sur cinq et non comme « cinq signes ». Elles sont décoratives : le
   `role="img"` du parent porte le libellé accessible. */
.avis-note .pleine{color:var(--brick)}
.avis-note .vide{color:var(--line)}
.avis blockquote{max-width:none}
.avis-suite{display:inline-block;margin-top:8px;font-size:13.5px;color:var(--brick);
  text-decoration:underline;text-underline-offset:2px}
.avis figcaption span{display:block;line-height:1.45}

/* Le bandeau de réassurance : il remplace les quatre compteurs. Un chiffre
   dit ce qu'on a fait ; ceci dit ce qu'on fait pour vous. */
.piliers{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.piliers .wrap{display:grid;gap:1px;grid-template-columns:repeat(4,1fr);
  background:var(--line-soft);border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);
  padding:0;max-width:1320px}
.pilier{background:var(--surface);padding:26px clamp(18px,2vw,28px) 24px;display:flex;
  flex-direction:column;gap:8px;min-width:0}
.pilier .marque{color:var(--brick)}
.pilier b{font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--ink);font-weight:700}
.pilier span{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* Les trois temps du parcours. « Après » n'est pas la dernière colonne d'une
   liste : c'est celle qu'on met en avant, parce que c'est là que les autres
   s'arrêtent. */
.parcours{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:8px}
.temps{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 28px;display:flex;flex-direction:column;gap:10px}
.temps.apres{border-color:var(--brick);border-width:1px;box-shadow:inset 3px 0 0 var(--brick)}
.temps .eyebrow{color:var(--brick)}
.temps h3{font-family:var(--serif);font-size:20px;margin:0;line-height:1.25}
.temps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.temps ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.temps li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.temps li .marque{color:var(--brick);flex:none;margin-top:2px}

/* Les actualités : des cartes avec une image, comme les réalisations. Sans
   visuel elles se réduisaient à un titre et un bouton, ce qui ne donne
   aucune envie de cliquer — et 146 des 147 articles ont une image. */
.card.actu .ph{aspect-ratio:16/10}
.card.actu .card-body{gap:8px}
.card.actu h3{font-size:19px;line-height:1.3}
.card.actu h3 a{text-decoration:none;color:inherit}
.card.actu h3 a:hover{color:var(--brick)}
.card.actu .extrait{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0}

@media (max-width:1040px){
  .piliers .wrap{grid-template-columns:repeat(2,1fr)}
  .parcours{grid-template-columns:1fr}
}
@media (max-width:560px){
  .piliers .wrap{grid-template-columns:1fr}
}

/* Deux paragraphes qui se suivent dans une colonne de la page d'accueil : ils
   se collaient, faute de marge sur `.deux-cols p`. */
.deux-cols p{margin:0 0 14px}
.deux-cols p:last-child{margin-bottom:0}

/* ── lot 14 : le plan de parcelle, les filtres, le menu ──────────────────── */

/* Le dessin de parcelle remplace la photo générique. Il est calculé depuis la
   surface, la façade et la forme : deux terrains différents ont deux dessins
   différents, et le même terrain a toujours le même. Une photo de prairie qui
   n'est pas celle du terrain ne dit rien et fait douter du reste. */
.plan-terrain{display:block;width:100%;height:100%;background:var(--ivoire)}
.plan-terrain .trame path{stroke:var(--line-soft);stroke-width:1;fill:none}
.plan-terrain .parcelle{fill:var(--surface);stroke:var(--brick);stroke-width:2;
  stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.plan-terrain .rue{stroke:var(--sable);stroke-width:10;fill:none}
.plan-terrain .cote{stroke:var(--ink-2);stroke-width:1;fill:none}
.plan-terrain .nord path{fill:var(--ink-2)}
.plan-terrain text{font-family:var(--sans);fill:var(--ink-2)}
.plan-terrain .aire{font-size:15px;font-weight:600;text-anchor:middle;fill:var(--ink)}
.plan-terrain .cote-txt{font-size:10.5px;text-anchor:middle}
.plan-terrain .etiq-rue{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.plan-terrain .etiq-echelle{font-size:9px;text-anchor:end;fill:var(--muted)}
.plan-terrain .parcelle.rognee{stroke-dasharray:7 4}
.plan-terrain .nord-txt{font-size:10px;text-anchor:middle;font-weight:600}
.card .ph .plan-terrain{position:absolute;inset:0}

/* Les filtres. Une barre pliable plutôt qu'une colonne latérale : sur un
   catalogue de quatorze terrains, une colonne de filtres occuperait plus de
   place que les résultats. */
.filtres{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  margin:0 0 26px;overflow:hidden}
.filtres summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:10px;list-style:none}
.filtres summary::-webkit-details-marker{display:none}
.filtres summary::after{content:"+";margin-left:auto;font-size:19px;color:var(--muted);line-height:1}
.filtres[open] summary::after{content:"−"}
.filtres summary .marque{color:var(--brick)}
.filtres-corps{padding:4px 18px 18px;border-top:1px solid var(--line-soft);
  display:grid;gap:16px 22px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.filtres-corps label{display:flex;flex-direction:column;gap:5px;font-size:13px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.filtres-corps select,.filtres-corps input{padding:9px 11px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:400}
.filtres-pied{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding-top:4px;border-top:1px solid var(--line-soft);margin-top:2px}
.filtres-actifs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.filtres-actifs li a{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border:1px solid var(--brick);border-radius:999px;font-size:13.5px;color:var(--brick);
  text-decoration:none;background:var(--surface)}
.filtres-actifs li a::after{content:"×";font-size:15px;line-height:1}
.filtres-actifs li a:hover{background:var(--ivoire)}

/* Les repères d'un terrain, sur sa carte et sur sa fiche. */
.tags-terrain{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.tags-terrain li{font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:3px;
  color:var(--ink-2);background:var(--ground)}
.tags-terrain li.oui{border-color:var(--brick);color:var(--brick)}

/* Le menu déroulant. Il n'apparaît qu'au survol ET au focus clavier : un menu
   qui ne s'ouvre qu'à la souris est un menu que la moitié des gens n'ouvre
   jamais. Sur mobile, tout est déplié — il n'y a pas de survol. */
.nav-groupe{position:relative;display:flex}
.nav-groupe>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.55;
  transition:transform .18s ease}
.nav-groupe[data-ouvert="oui"]>button::after{transform:rotate(225deg) translate(-2px,-2px);opacity:.9}
.nav-groupe[data-ouvert="oui"]>button{color:var(--ink)}
.nav-tiroir{position:absolute;top:calc(100% + 12px);left:-16px;min-width:250px;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 34px rgba(26,33,100,.13);padding:8px;display:none}
.nav-groupe[data-ouvert="oui"] .nav-tiroir{display:block}
.nav-tiroir a{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;
  color:var(--ink);font-size:15px;line-height:1.35}
.nav-tiroir a small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.nav-tiroir a:hover,.nav-tiroir a:focus-visible{background:var(--ivoire);color:var(--brick)}

@media (max-width:1040px){
  /* Menu replié : les tiroirs sont dépliés — il n'y a pas de survol sur un
     écran tactile, et un tiroir replié dans un menu déjà replié ne s'ouvre
     jamais. Mais leur libellé RESTE, en intertitre : sans lui, le visiteur
     voit une liste plate de douze liens sans savoir ce qui va avec quoi.
     Le bouton cesse d'être un bouton et devient un titre de groupe — il perd
     donc son rôle interactif, que le JavaScript n'installe pas en dessous de
     cette largeur. */
  .nav-groupe{width:100%;flex-direction:column;align-items:stretch}
  .nav-groupe>button{
    display:block;width:100%;text-align:left;cursor:default;
    padding:16px clamp(20px,3.2vw,40px) 5px;
    font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted);border-top:1px solid var(--line-soft);border-bottom:0}
  .nav-groupe>button::after{display:none}
  .nav-groupe[data-ouvert="oui"]>button{color:var(--muted)}
  .nav-tiroir{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0;
    background:transparent}
  .site-nav .nav-tiroir a{border-top:0;padding-top:10px;padding-bottom:10px;font-size:16px}
  .nav-tiroir a small{display:none}
}

/* Le plan sur la fiche d'un terrain : plus grand, avec sa réserve. */
.fig-plan{margin:26px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--ivoire)}
.fig-plan .plan-terrain{aspect-ratio:4/3;max-height:420px;margin:0 auto}
.fig-plan figcaption{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;
  border-top:1px solid var(--line-soft);background:var(--surface);font-size:13.5px;color:var(--muted)}
.fig-plan figcaption .marque{color:var(--brick);flex:none;margin-top:1px}

/* Les filtres complémentaires du catalogue, dans la colonne latérale. */
.cat-form{display:flex;flex-direction:column;gap:12px;margin:22px 0 16px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.cat-titre{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.cat-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;
  color:var(--muted)}
.cat-form select{padding:8px 10px;font:inherit;font-size:14.5px;font-weight:400;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.cat-form .cat-case{flex-direction:row;align-items:center;gap:8px;font-size:14.5px;
  font-weight:400;color:var(--ink)}
.cat-form .cat-case input{width:auto}
.cat-bar .count b{font-family:var(--serif);font-size:18px;color:var(--ink)}

/* Les quatre premières étapes, sur la page du sur-mesure. Numérotées parce
   qu'elles sont vraiment une séquence : on ne dépose pas le permis avant
   d'avoir étudié le terrain. */
.etapes-sm{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.etapes-sm li{background:var(--surface);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.etapes-sm .num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--brick);
  border:1.5px solid var(--brick);width:28px;height:28px;flex:none;display:flex;
  align-items:center;justify-content:center;border-radius:2px}
.etapes-sm h3{font-family:var(--serif);font-size:17px;margin:0 0 3px;line-height:1.3}
.etapes-sm .meta{margin:0 0 6px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.etapes-sm p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* Sur un plan de parcelle, l'étiquette « lotissement » se plaçait par-dessus
   la bande de rue et masquait l'échelle. Elle passe en haut : le bas de
   l'image porte de l'information, pas une décoration. */
.ph:has(.plan-terrain) .tag{bottom:auto;top:10px}

/* ── lot 15 : le rendu sur téléphone ─────────────────────────────────────
   Ces règles sont EN FIN DE FEUILLE, et c'est volontaire. Les précédentes
   étaient écrites dans un bloc `@media` placé haut dans le fichier, avant la
   règle de base `.site-nav > a` : à spécificité égale, c'est la dernière qui
   gagne, et les surcharges du menu replié n'étaient donc jamais appliquées.
   Les liens gardaient leur `display:inline-flex` et leur padding de barre
   horizontale — d'où des entrées centrées, tassées, et sans zone de clic. */

@media (max-width:1040px){
  .site-nav>a,.site-nav .nav-tiroir a{
    display:block;text-align:left;width:100%;
    padding:14px clamp(20px,3.2vw,40px);font-size:16.5px;line-height:1.3;
    border-bottom:0;border-top:1px solid var(--line-soft)}
  .site-nav>a:first-child{border-top:0}
  .site-nav .nav-tiroir a{border-top:0;padding-top:11px;padding-bottom:11px}
  .site-nav>a[aria-current="page"]{border-color:transparent;
    box-shadow:inset 3px 0 0 var(--brick)}
  .site-nav .nav-tiroir a[aria-current="page"]{color:var(--brick);font-weight:600;
    box-shadow:inset 3px 0 0 var(--brick)}
  /* Le menu peut dépasser la hauteur de l'écran : il défile, et il s'arrête
     avant le bas de la fenêtre pour qu'on voie qu'il y a une suite. */
  .site-nav{max-height:calc(100svh - 70px);overflow-y:auto;overscroll-behavior:contain}
}

@media (max-width:560px){
  /* L'en-tête à 390 px : le logo, un bouton et le burger ne tiennent pas si
     le bouton s'autorise deux lignes. « Prendre rendez-vous » devient
     « Rendez-vous » — le menu ouvert porte le numéro de téléphone juste en
     dessous, l'action n'est pas perdue. */
  .head-actions .btn{padding:9px 12px;font-size:13px;white-space:nowrap}
  .head-actions .btn .long{display:none}
  .head-actions .btn .court{display:inline}
  .site-head .wrap{gap:10px;height:64px}
  .logo img{height:34px;width:auto}
  /* Le bouton flottant de l'assistant masquait la dernière entrée du menu et
     le pied de page. Il s'efface quand le menu est ouvert, et le pied gagne
     la place d'un pouce. */
  body:has(.nav-bouton[aria-expanded="true"]) .ia-appel{opacity:0;pointer-events:none}
  .site-foot{padding-bottom:76px}
  .barre-carnet{bottom:72px}
}

/* Les programmes : une fiche large par programme ouvert, les faits d'abord. */
.prog{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 26px}
.prog-media{position:relative;background:var(--ivoire);min-height:280px}
.prog-media a,.prog-media img{display:block;width:100%;height:100%}
.prog-media img{object-fit:cover}
.prog-media .plan-terrain{position:absolute;inset:0;width:100%;height:100%}
.prog-vide{display:flex;align-items:center;justify-content:center;height:100%;color:var(--line)}
.prog-corps{padding:30px clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:14px}
.prog-corps h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);margin:0;line-height:1.15}
.prog-corps h3 a{color:inherit;text-decoration:none}
.prog-corps h3 a:hover{color:var(--brick)}
.prog-accroche{margin:0;font-size:16.5px;color:var(--ink-2);max-width:56ch}
.prog-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin:4px 0}
.prog-chiffres div{background:var(--surface);padding:12px 14px}
.prog-chiffres dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.prog-chiffres dd{margin:2px 0 0;font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.prog-lots{margin:0;font-size:14.5px;color:var(--ink-2)}
.prog-pied{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
@media (max-width:820px){
  .prog{grid-template-columns:1fr}
  .prog-media{min-height:0;aspect-ratio:16/10}
  .prog-corps{padding:22px 20px}
}
.prog-vide{flex-direction:column;gap:6px;color:var(--brick);padding:30px;text-align:center}
.prog-vide .marque{color:var(--sable);width:2.2em;height:2.2em}
.prog-vide b{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--ink);line-height:1.15}
.prog-vide span{font-size:13px;color:var(--muted)}

/* La liste de préparation : cochable à l'écran, imprimable telle quelle. */
.coches{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.coches label{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;cursor:pointer;
  padding:14px 16px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r)}
.coches input{width:18px;height:18px;margin-top:3px;accent-color:var(--brick)}
.coches strong{font-family:var(--serif);font-size:16px}
.coches span{grid-column:2;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.coches input:checked ~ strong{text-decoration:line-through;color:var(--muted)}
h2>.marque.grande{vertical-align:-.2em}
@media print{.imprimer{display:none}.coches label{break-inside:avoid;border-color:#999}}
.temps-lien{margin:8px 0 0;font-size:14px}
.temps-lien a{color:var(--brick)}

/* Filtres des réalisations (lot 19) : deux rangées de puces, aucune adresse engendrée. */
.rea-filtres{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.rea-filtres .chip{cursor:pointer;font:inherit;font-size:13px}
.rea-filtres .chip:hover{border-color:var(--brick);color:var(--brick)}
.rea-filtres .chip[aria-pressed="true"]:hover{color:#fff}
.rea-filtres .chip[aria-pressed="true"] .muted{color:rgba(255,255,255,.78)}
.rea-compte{font-size:13.5px;margin:0;min-height:1.2em}

/* L'aperçu depuis le back-office (lot 20). */
.bandeau-apercu{position:sticky;top:0;z-index:200;background:#8A6F2C;color:#fff;padding:9px 18px;font-size:14px;text-align:center}

/* ---------- garanties et contrat (lot 21) --------------------------------
   La page se lit dans l'ordre du projet : trois promesses, puis trois temps.
   Chaque temps a sa colonne de gauche — numéro, surtitre, titre, chapeau —
   qui reste en vue pendant qu'on lit la colonne de droite, comme une
   manchette dans la marge d'un contrat. */
.gar-sommaire{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;font-size:15px}
.gar-sommaire a{color:rgba(237,240,247,.86);text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid rgba(237,240,247,.32);padding-bottom:3px}
.gar-sommaire a:hover{color:#fff;border-color:#fff}
.gar-sommaire b{font:700 12px/1 var(--serif);color:var(--dark);background:var(--muted-sombre);width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center}
.piliers.trois .wrap{grid-template-columns:repeat(3,1fr)}
.piliers.trois .pilier span{max-width:44ch}

.gar-phase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,72px);align-items:start}
/* L'en-tête du site est collant lui aussi (71 px) : la manchette se cale dessous. */
.gar-phase-tete{position:sticky;top:94px}
.gar-temps{scroll-margin-top:94px}
.gar-num{width:46px;height:46px;border-radius:50%;background:var(--brick);color:var(--surface);display:grid;place-items:center;
  font:700 18px/1 var(--serif);margin-bottom:18px}
.gar-phase-tete .eyebrow{color:var(--brick);display:block;margin-bottom:10px}
.gar-phase h2{font-size:clamp(25px,2.8vw,34px);max-width:20ch}
.gar-phase .lede{margin-top:14px;font-size:17px}

.gar-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.gar-points.serre{gap:16px}
.gar-points li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.gar-points .marque{color:var(--brick);margin-top:2px}
.gar-points strong{display:block;font-family:var(--serif);font-size:18px;line-height:1.3;margin-bottom:5px}
.gar-points p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:60ch}

.gar-pieces{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 26px 22px;margin-top:34px;box-shadow:var(--shadow)}
.gar-pieces h3{font-size:19px;margin:0 0 6px}
.gar-pieces>.muted{font-size:15px;max-width:60ch}
.gar-pieces ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:0 24px}
.gar-pieces li{display:flex;gap:10px;align-items:flex-start;font-size:15px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.gar-pieces li .marque{color:var(--brick);margin-top:3px}
.gar-note{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-top:16px;max-width:64ch}
.gar-note a{color:var(--brick)}
.gar-h3{font-size:19px;margin:6px 0 4px}
.gar-sous{font-size:14.5px;margin:0 0 18px}
.gar-texte{color:var(--ink-2);font-size:15.5px;line-height:1.62;max-width:62ch;margin-bottom:30px}
.gar-callout{margin:30px 0}
.section.ivoire .gar-callout{background:var(--surface);border:1px solid var(--line-soft)}
.gar-callout .marque{color:var(--brick)}
.gar-callout p a{color:var(--brick)}
.gar-temps h3+.gar-points{margin-top:14px}

/* L'échéancier : une barre par étape, à l'échelle. On voit d'un coup d'œil
   que la moitié du prix n'est demandée qu'une fois la maison hors d'eau. */
.echeancier{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.echeancier li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;font-size:15px}
.echeancier .etape{color:var(--ink)}
.echeancier .pct{font:700 15px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--brick);white-space:nowrap}
.echeancier .barre{grid-column:1/-1;display:block;height:9px;background:var(--surface-2);border-radius:2px;position:relative;overflow:hidden}
.echeancier .barre span{position:absolute;top:0;bottom:0;display:block}
.echeancier .fait{left:0;background:var(--brick)}
.echeancier .reserve{background:repeating-linear-gradient(-45deg,var(--brick) 0 2px,transparent 2px 5px)}
.gar-hachure{display:inline-block;width:26px;height:9px;vertical-align:-1px;margin-right:6px;border-radius:2px;
  background:repeating-linear-gradient(-45deg,var(--brick) 0 2px,transparent 2px 5px)}

/* Les trois durées : le chiffre d'abord, gros, parce que c'est lui qu'on
   retient et qu'on compare. */
.durees{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.duree{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.duree b{font:800 clamp(34px,3.4vw,44px)/1 var(--serif);color:var(--brick);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.duree b small{font:700 15px/1 var(--serif);letter-spacing:0;margin-left:1px;color:var(--brick)}
.duree h3{font-size:17px;margin-top:4px}
.duree p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}

.gar-garants,.gar-suite{grid-template-columns:repeat(3,1fr)}
.gar-badge{display:block;width:120px;height:auto;margin-top:16px;border-radius:var(--r)}

/* Trois blocs restent sur trois colonnes jusqu'à 760 px : à deux colonnes, le
   troisième laisserait une case vide. */
@media (max-width:760px){
  .piliers.trois .wrap,.gar-garants{grid-template-columns:1fr}
}
@media (max-width:900px){
  .gar-phase{grid-template-columns:1fr;gap:28px}
  .gar-phase-tete{position:static}
  .gar-phase h2{max-width:none}
  .durees{grid-template-columns:1fr}
  .duree{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
  .duree b{min-width:96px}
  .duree h3{flex:1}
  .duree p{flex-basis:100%}
}
@media (max-width:620px){
  .piliers.trois .wrap{grid-template-columns:1fr}
  .gar-suite{grid-template-columns:1fr}
  .gar-pieces ol{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .gar-pieces{padding:20px 18px 16px}
}
@media print{.gar-sommaire{display:none}.gar-phase-tete{position:static}.gar-phase{grid-template-columns:1fr}
  .echeancier .barre,.echeancier .barre span,.gar-hachure{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ---------- images reprises, contraintes d'affichage (lot 22) ------------
   Une image en tête de page tient dans l'écran : jamais plus haute que la
   moitié d'un écran de bureau, recadrée plutôt qu'étirée. Le poids, lui, est
   réglé par les variantes (medias/redim). */
.img-une{display:block;width:100%;max-height:min(520px,56vh);object-fit:cover;border-radius:var(--r)}
.prose img,.prose figure img{max-width:100%;height:auto;max-height:640px;object-fit:contain}

/* ---------- fiche terrain (lot 22) ---------------------------------------- */
.terrain-head{align-items:start;gap:44px}
.terrain-head h1{font-size:clamp(30px,3.6vw,44px);margin:8px 0 12px}
.terrain-lede{font-size:17px;max-width:52ch;margin-bottom:18px}
.terrain-prix{display:flex;flex-wrap:wrap;gap:12px 40px;margin:6px 0 16px}
.terrain-prix .prix{font-size:30px}
.terrain-surface{font-size:30px}
.terrain-actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.terrain-visuel .fig-plan{margin:0}
.terrain-visuel .fig-plan .plan-terrain{max-height:360px}
.terrain-photo{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft)}
.terrain-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.terrain-corps{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;margin-top:44px;align-items:start}
.terrain-texte .prose{max-width:62ch}
.terrain-h2{font-size:22px;margin:0 0 12px}
.terrain-h2+.prose{margin-top:0}
.terrain-faits{margin:0 0 34px}
.terrain-faits b{font-size:21px}
.terrain-plan-second{max-width:520px;margin-top:30px}
.terrain-plan-second .plan-terrain{max-height:300px}
.terrain-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:94px}
.terrain-encart{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:20px 22px}
.terrain-encart .eyebrow{display:block;margin-bottom:8px}
.terrain-encart h2{font-size:18px;margin:0 0 8px}
.terrain-encart p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 8px}
.terrain-encart p:last-child{margin-bottom:0}
.terrain-encart .link{color:var(--brick)}
.terrain-encart-lien p{margin:0}
.terrain-regard{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:9px}
.terrain-regard li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.terrain-regard .marque{color:var(--brick);flex:none;margin-top:2px}
@media (max-width:900px){
  .terrain-corps{grid-template-columns:1fr;gap:30px}
  .terrain-aside{position:static}
}

/* ---------- recherche, thème, par où commencer, carnet (lot 24) ---------- */
.recherche-bouton{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);width:38px;height:38px;
  display:inline-grid;place-items:center;color:var(--ink-2);cursor:pointer}
.recherche-bouton:hover,.recherche-bouton[aria-expanded="true"]{border-color:var(--brick);color:var(--brick)}
.recherche-bouton .marque{width:18px;height:18px}
.recherche-barre{border-top:1px solid var(--line-soft);background:var(--surface)}
.recherche-forme{display:flex;gap:10px;align-items:center;padding:12px clamp(20px,3.2vw,40px)}
.recherche-forme input[type=search]{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink)}
.recherche-forme input[type=search]:focus{outline:2px solid var(--brick);outline-offset:1px;border-color:var(--brick)}
.recherche-page{padding:0;margin-top:6px}
.recherche-page input[type=search]{font-size:18px;padding:12px 14px}
.recherche-groupe{margin-top:34px;padding:0}
.recherche-groupe h2{font-size:21px;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.recherche-groupe h2 small{font:600 12px var(--sans);color:var(--muted);letter-spacing:.1em}
.recherche-liste{list-style:none;margin:0;padding:0}
.recherche-liste li{padding:12px 0;border-top:1px solid var(--line-soft)}
.recherche-liste a{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--brick);text-decoration:none}
.recherche-liste a:hover{text-decoration:underline}
.recherche-precision{font-size:13px;color:var(--muted);margin-left:10px}
.recherche-liste p{margin:4px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55;max-width:66ch}
.recherche-liste mark,.recherche-groupe mark{background:#F3E7A8;color:inherit;padding:0 1px;border-radius:2px}
:root[data-theme="dark"] .recherche-liste mark{background:#2E2A10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .recherche-liste mark{background:#2E2A10}}
.theme-bouton{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.theme-bouton:hover{color:#fff}
footer :focus-visible{outline-color:#fff}

.par-ou-forme{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px 36px;align-items:start}
.par-ou-tete h2{font-size:clamp(22px,2.4vw,28px);margin-top:8px;max-width:18ch}
.par-ou fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.par-ou legend{font-family:var(--serif);font-weight:600;font-size:16px;margin-bottom:12px;padding:0}
.par-ou label{border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:14px;cursor:pointer;background:var(--ground);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.par-ou label:has(input:checked){background:var(--brick);border-color:var(--brick);color:var(--sur-brick)}
/* Sans `:has()` (vieux Firefox), la case cochée ne se verrait pas : on montre les boutons radio. */
@supports not selector(:has(a)){.par-ou input[type=radio]{position:static;opacity:1;width:auto;height:auto}}
.par-ou label:has(input:focus-visible){outline:2px solid var(--brick);outline-offset:2px}
.par-ou input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.par-ou-action{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.par-ou-action .muted{font-size:14px}
@media (max-width:1040px){.par-ou-forme{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.par-ou-forme{grid-template-columns:1fr;gap:20px}}

.barre-carnet .barre-noms{font-size:13px;color:var(--ink-2);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-carnet .barre-parler{font:600 13px var(--sans);color:var(--brick);text-decoration:underline;text-underline-offset:2px;padding:0 4px}
@media (max-width:640px){.barre-carnet .barre-noms{display:none}}
@media print{.recherche-barre,.recherche-bouton,.par-ou,.theme-bouton{display:none!important}}

/* ── impression des fiches et de la liste du rendez-vous (lot 27) ──────── */
@media print{
  @page{margin:14mm 12mm}
  .imp-non,.autres-visuels,.gal:empty,.recherche-barre,.fil,.hero-visuel figcaption{display:none!important}
  .section,.section.serre,.imp-compact{padding:6pt 0!important;background:none!important}
  .imp-compact .livre-liens>*,.imp-compact li,.coches li{break-inside:avoid}
  h2,h3{break-after:avoid}
  .sec-head .link,.imp-compact .link{display:none}
  .imp-tete{padding:0 0 8pt!important}
  .imp-tete h1{font-size:22pt;margin:4pt 0}
  .imp-tete .lede{font-size:11pt;max-width:none}
  .imp-liste .deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24pt}
  .imp-liste h2{font-size:14pt;margin:8pt 0 4pt}
  .coches{gap:6pt}
  .coches label{border:1px solid #999;padding:6pt 8pt;break-inside:avoid}
  .coches strong{font-size:11pt}
  .coches span{font-size:9.5pt;line-height:1.4}
  .coches input{width:12pt;height:12pt;margin-top:1pt}
  /* La fiche modèle : le titre, les caractéristiques, le visuel, le texte, les plans — deux pages. */
  .hero-visuel img,.img-une{max-height:90mm;width:auto;max-width:100%;object-fit:contain}
  .caracteristiques{grid-template-columns:repeat(5,1fr)!important;margin:6pt 0 10pt}
  .caracteristiques>div{padding:4pt 6pt}
  .lecture{max-width:none}
  .lecture h2,.wrap>h2{font-size:14pt;margin:10pt 0 4pt!important}
  .prose p{font-size:10.5pt;line-height:1.45}
  .gal,.gal.plans{display:grid;grid-template-columns:1fr 1fr;gap:6pt;break-inside:avoid}
  .gal img{max-height:110mm;width:auto;max-width:100%}
  .livre-liens{grid-template-columns:repeat(3,1fr)!important;gap:0;border:0;background:none}
  .livre-liens div,.livre-liens a{padding:4pt 6pt 4pt 0;font-size:9.5pt}
  .livre-liens strong{font-size:10.5pt;margin-bottom:2pt}
  .livre-liens .marque{display:none}
  .sec-head{margin-bottom:6pt}
  .sec-head .lede,.imp-compact .lede{font-size:10pt}
  .imp-compact ul,.imp-compact ol{font-size:10pt}
  .imp-compact .muted{font-size:9pt}
}

/* ---------- la coupe de maison (lot 28) ---------- */
.mc-hero h1 em{font-style:italic;color:var(--muted-sombre)}
.coupe{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px;align-items:start}
.coupe-dessin{position:relative}
.coupe-svg{display:block;width:100%;height:auto;color:var(--ink);--cp-plein:var(--sand);--cp-mur:#D9CBB6;--cp-isolant:#EFD98F;--cp-vitre:#CFE3F1;--cp-toit:#B8776A;--cp-pac:var(--surface-2);--cp-sol:#EAE3D6}
:root[data-theme="dark"] .coupe-svg{--cp-plein:#3A4056;--cp-mur:#5A4A3E;--cp-isolant:#7A6A2E;--cp-vitre:#2E4A60;--cp-toit:#7A4A42;--cp-pac:#2A3145;--cp-sol:#1C2030}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .coupe-svg{--cp-plein:#3A4056;--cp-mur:#5A4A3E;--cp-isolant:#7A6A2E;--cp-vitre:#2E4A60;--cp-toit:#7A4A42;--cp-pac:#2A3145;--cp-sol:#1C2030}}
.cp-sol{fill:var(--cp-sol)}
.cp-trait{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:square}
.cp-trait.fin{stroke-width:1.2;opacity:.7}
.cp-trait.epais{stroke-width:3}
.cp-plein{fill:var(--cp-plein);stroke:currentColor;stroke-width:1.2}
.cp-agglo{fill:var(--cp-plein);stroke:currentColor;stroke-width:1.2}
.cp-vide{fill:var(--surface);stroke:currentColor;stroke-width:1.2;stroke-dasharray:4 4}
.cp-mur{fill:var(--cp-mur);stroke:currentColor;stroke-width:1.5}
.cp-isolant{fill:var(--cp-isolant);stroke:currentColor;stroke-width:1}
.cp-vitre{fill:var(--cp-vitre);stroke:currentColor;stroke-width:1.5}
.cp-toit{fill:var(--cp-toit);stroke:none}
.cp-pac{fill:var(--cp-pac);stroke:currentColor;stroke-width:1.5}
.cp-zone{fill:transparent;stroke:none;cursor:pointer}
.cp-strate{transition:opacity .25s,filter .25s}
.coupe.a-une-active .cp-strate:not(.active){opacity:.42}
.cp-strate.active .cp-mur,.cp-strate.active .cp-plein,.cp-strate.active .cp-agglo,.cp-strate.active .cp-isolant,.cp-strate.active .cp-vitre,.cp-strate.active .cp-toit,.cp-strate.active .cp-pac{stroke:var(--brick);stroke-width:2.5}
.cp-strate.active .cp-zone{fill:rgba(36,56,112,.06)}
.cp-strate:hover .cp-zone{fill:rgba(36,56,112,.08)}
/* la construction, strate par strate : chaque strate arrive de bas en haut */
.coupe.construit .cp-strate{opacity:0;transform:translateY(12px);animation:cp-monter .45s cubic-bezier(.2,.6,.2,1) forwards}
.coupe.construit .cp-strate[data-strate="fondations"]{animation-delay:.1s}
.coupe.construit .cp-strate[data-strate="vide"]{animation-delay:.45s}
.coupe.construit .cp-strate[data-strate="plancher"]{animation-delay:.8s}
.coupe.construit .cp-strate[data-strate="murs"]{animation-delay:1.15s}
.coupe.construit .cp-strate[data-strate="isolation"]{animation-delay:1.5s}
.coupe.construit .cp-strate[data-strate="menuiseries"]{animation-delay:1.85s}
.coupe.construit .cp-strate[data-strate="toiture"]{animation-delay:2.2s}
.coupe.construit .cp-strate[data-strate="chauffage"]{animation-delay:2.55s}
@keyframes cp-monter{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.coupe.construit .cp-strate{animation:none;opacity:1;transform:none}}
.coupe-legende{display:flex;gap:10px;align-items:center;justify-content:center;margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.coupe-jouer{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:7px 14px;font:600 13.5px var(--sans);color:var(--brick);cursor:pointer}
.coupe-jouer:hover{border-color:var(--brick)}
.coupe-jouer .marque{width:16px;height:16px}
.coupe-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.coupe-onglets [role=tab]{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 12px 6px 6px;font:500 13.5px var(--sans);color:var(--ink-2);cursor:pointer}
.coupe-onglets [role=tab]:hover{border-color:var(--brick);color:var(--ink)}
.coupe-onglets [role=tab][aria-selected="true"]{background:var(--brick);border-color:var(--brick);color:var(--sur-brick)}
.coupe-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font:700 12px var(--sans);color:var(--ink)}
.coupe-onglets [role=tab][aria-selected="true"] .coupe-num{background:rgba(255,255,255,.22);color:var(--sur-brick)}
.coupe-fiche{background:var(--surface);border:1px solid var(--line-soft);border-left:4px solid var(--brick);border-radius:var(--r);padding:20px 22px;animation:cp-fiche .3s ease}
@keyframes cp-fiche{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.coupe-eyebrow{font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.coupe-fiche h2{font-size:22px;margin:0 0 8px}
.coupe-quoi{font-weight:600;color:var(--ink);margin:0 0 10px}
.coupe-fiche p{font-size:15.5px;line-height:1.55;margin:0 0 10px}
.coupe-change{border-top:1px solid var(--line-soft);padding-top:10px;color:var(--ink-2)}
/* sans JavaScript, toutes les fiches, à la suite */
html:not(.coupe-js) .coupe-fiche[hidden]{display:block!important}
html:not(.coupe-js) .coupe-onglets,html:not(.coupe-js) .coupe-legende{display:none}
@media (max-width:900px){.coupe{grid-template-columns:1fr;gap:20px}}
.mc-detail{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0}
.mc-detail summary{cursor:pointer;padding:16px 20px;font:600 16px var(--serif);display:flex;gap:10px;align-items:center;list-style:none}
.mc-detail summary::-webkit-details-marker{display:none}
.mc-detail summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--brick);font-weight:400}
.mc-detail[open] summary::after{content:"–"}
.mc-detail summary .marque{width:18px;height:18px;color:var(--brick)}
.mc-detail summary .muted{font:400 14px var(--sans)}
.mc-detail .prose{padding:6px 22px 22px;max-width:none}
.mc-detail .prose p,.mc-detail .prose li{max-width:none}
@media print{.coupe{grid-template-columns:1fr}.coupe-onglets,.coupe-legende{display:none}.coupe-fiche[hidden]{display:block!important;margin-bottom:8pt}.coupe .cp-strate{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.mc-detail{border:0}.mc-detail summary{display:none}.mc-detail .prose{display:block}.frise li.reveal .frise-num,.frise li.reveal .frise-corps,.frise li.reveal::before{opacity:1!important;transform:none!important}}

/* ---------- le parcours d'un projet (lot 28) : la frise se dessine, le rail suit ---------- */
/* `.etapes-parcours`, pas `.parcours` : ce nom est celui des trois temps de l'accueil (correctif de mise en ligne). */
.etapes-parcours{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:stretch}
.frise li[id]{scroll-margin-top:96px}
.parcours-rail{position:sticky;top:110px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.parcours-rail a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--r);text-decoration:none;color:var(--muted);font-size:13.5px;border-left:2px solid transparent}
.parcours-rail a b{font:700 12px var(--sans);color:var(--ink-2);width:22px}
.parcours-rail a:hover{color:var(--ink);background:var(--surface-2)}
.parcours-rail a[aria-current="step"]{color:var(--ink);border-left-color:var(--brick);background:var(--surface)}
.parcours-rail a[aria-current="step"] b{color:var(--brick)}
.parcours-rail .parcours-jauge{height:3px;background:var(--line-soft);margin:12px 10px 0;position:relative;overflow:hidden;border-radius:2px}
.parcours-rail .parcours-jauge i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--brick);transition:width .4s ease}
.frise li.reveal{opacity:1;transform:none;transition:none}
.js .frise li.reveal .frise-num{transform:scale(.6);opacity:0;transition:transform .4s cubic-bezier(.2,.6,.2,1),opacity .3s}
.js .frise li.reveal.vu .frise-num{transform:none;opacity:1}
.js .frise li.reveal::before{transform:scaleY(0);transform-origin:top;transition:transform .7s ease .2s}
.js .frise li.reveal.vu::before{transform:scaleY(1)}
.js .frise li.reveal .frise-corps{opacity:0;transform:translateX(10px);transition:opacity .45s ease .1s,transform .45s ease .1s}
.js .frise li.reveal.vu .frise-corps{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .frise li.reveal *,.js .frise li.reveal::before{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:900px){.etapes-parcours{grid-template-columns:1fr}.parcours-rail{display:none}}
.coupe.teaser{display:block}
.accueil-coupe-dessin{display:block;text-decoration:none;color:inherit}
.accueil-coupe-dessin .coupe-svg{transition:transform .3s ease}
.accueil-coupe-dessin:hover .coupe-svg{transform:translateY(-3px)}
.accueil-coupe-dessin .cp-zone{cursor:pointer}