/* Karka — styles propres à templates/home/index.html.twig.
 * Sortis du gabarit le 11/09/2026 (audit SEO) : servis par AssetMapper avec
 * empreinte et cache long, au lieu d'être réinjectés dans chaque réponse. Le
 * <link> reste à la place exacte de l'ancien <style> : même ordre de cascade. */

/* ══ Home — identité « plan d'architecte » (cohérente avec /professionnels) ══ */

/* ── Hero ── */
/* overflow VISIBLE : la liste de suggestions de recherche doit pouvoir déborder
   sous le champ. Le clipping de la déco est confiné à .hm-hero-bg. */
.hm-hero { position: relative; overflow: visible; background: var(--white); }
.hm-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
/* ⚠ Le rembourrage vivait en style EN DUR sur l'élément. Il ne pouvait donc pas
   être réduit sur téléphone sans `!important` — d'où son passage ici. */
.hm-hero .container { position: relative; z-index: 1; padding-top: 74px; padding-bottom: 74px; }
.hm-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 44px; align-items: center; }
/* ⚠ `min-width: 0` sur les éléments de la grille. Par défaut un élément de
   grille vaut `min-width: auto` : il ne descend JAMAIS sous la taille
   min-content de son contenu. Or ce contenu comprend un <input>, dont la
   taille intrinsèque (l'attribut `size` implicite) vaut ~170 px, plus le
   bouton qui ne se coupe pas. La colonne restait donc bloquée à 343 px et
   débordait de la page sur tout écran de moins de 367 px — défilement
   horizontal sur un Android de 360 px, soit l'une des largeurs les plus
   répandues. Le champ, lui, portait déjà `min-width: 0` ; c'est la GRILLE
   au-dessus qui l'empêchait d'en profiter. */
.hm-hero-grid > * { min-width: 0; }
/* Le titre est passé de 5 mots à 7 : à 66 px il partait en QUATRE lignes et
   écrasait tout ce qui suit. Mesuré sur la colonne du hero (565 px au-delà de
   1280 px, le conteneur étant plafonné) : « Peut-on construire, » tolère 59 px.
   D'où trois lignes forcées à 56 px, et un coefficient `vw` calé pour que la
   plus longue des trois ne déborde à aucune largeur intermédiaire. */
.hm-h1 { font-family: var(--font-head); font-size: clamp(32px, 4.3vw, 56px); font-weight: 900;
  line-height: 1.04; margin-bottom: 18px;
  /* ⚠ En `em`, PAS en px. Un interlettrage fixe calé sur les 56 px du bureau
     étrangle le titre à 32 px sur téléphone : les mots se touchaient
     (« Peut-onconstruire, »). -0.043em vaut exactement -2.4 px à 56 px — le
     rendu bureau est inchangé — et se détend tout seul en descendant. */
  letter-spacing: -0.043em; }
.hm-h1 .q { color: var(--v); }   /* la question = le propos (indigo plein, pas de dégradé) */
/* Seconde ligne DANS le <h1> : l'accroche seule ne contenait aucun des termes que
   les gens tapent (« PLU », « Île-de-France »). Le H1 est le signal on-page le plus
   fort après le <title> — il les porte désormais, sans toucher à la hiérarchie
   visuelle : le gros « réalisable ? » reste l'accroche, ceci est un sous-titre. */
/* La taille suit la largeur de la colonne pour que la phrase tienne SUR UNE SEULE
   LIGNE — c'est ce qui la rend nette : une bande de surligneur continue, au lieu de
   deux tronçons aux longueurs inégales. Tenu de 1440 px jusqu'à ~900 px. En dessous
   (colonne de 343 px sur téléphone), deux lignes sont inévitables : il faudrait
   descendre à 13 px, illisible sous un H1 de 40 px. D'où le plancher à 15 px et
   `text-wrap: balance`, qui répartit alors les deux lignes à égalité. */
.hm-h1 .sub { display: block; margin-top: 18px; font-size: clamp(15px, 1.32vw, 18px);
  font-weight: 600; line-height: 1.5; letter-spacing: -0.4px; color: var(--ink);
  text-wrap: balance; }
/* Surligneur, et non pastille ou couleur pleine : la phrase doit ressortir du bloc de
   texte sans entrer en concurrence avec le « réalisable ? » qui est l'accroche.
   Deux essais écartés en chemin :
    · `--v-pale` (#ede9fe) comme couleur de bande — invisible sur fond blanc ;
    · un dégradé horizontal qui s'estompe vers la droite — joli sur le papier, mais
      les deux tiers droits de la phrase n'étaient plus surlignés du tout.
   Reste l'indigo uni à 20 %, qui se voit sans rien coûter au contraste du texte. */
.hm-h1 .sub .mark {
  /* `background-size` + `position` plutôt qu'un dégradé à seuil : la hauteur et
     l'assise de la bande se règlent alors en clair, indépendamment de la fonte.
     Le fond d'un élément EN LIGNE ne couvre que les métriques de la fonte et non la
     hauteur de ligne — d'où le padding, sans lequel la bande est trop fine pour se
     voir. Le `margin-left` négatif compense exactement le padding gauche, pour que le
     texte reste aligné sur le bord du grand H1 au-dessus. */
  background-image: linear-gradient(rgba(99,102,241,0.20), rgba(99,102,241,0.20));
  background-size: 100% 46%; background-position: 0 86%; background-repeat: no-repeat;
  padding: 0 7px 3px; margin-left: -7px; border-radius: 3px;
  /* Sans `clone`, la bande ne couvre que la première ligne dans le cas mobile. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hm-lead { font-size: 17.5px; color: var(--ink-60); line-height: 1.6; max-width: 480px; margin-bottom: 30px;
  text-wrap: pretty; }
.hm-lead strong { color: var(--v-txt); font-weight: 600; }
/* La promesse de délai est le seul argument du chapô qui décide d'un clic : elle
   passe en indigo, la couleur que le reste de la page réserve à ce qui est
   actionnable (le « réalisable ? », les CTA). */
.hm-lead .vite { color: var(--v-txt); font-weight: 700; }
.hm-trust { display: flex; align-items: center; column-gap: 16px; row-gap: 8px;
  margin-top: 22px; flex-wrap: wrap; }
.hm-trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-35); }
/* Les deux leveurs de friction sortent du gris : c'est la dernière chose que lit
   quelqu'un dont le curseur hésite au-dessus du bouton. */
.hm-trust-item.is-fort { font-size: 13px; font-weight: 600; color: var(--ink-60); }
.hm-trust-item svg { flex-shrink: 0; }

/* ── Sorties de section « pour aller plus loin » ───────────────────
   Les deux sections qui vendent finissent sur un lien : l'aperçu des 8 pages
   du dossier, et l'offre pro complète. En `btn-ghost` gris de 14 px, ils
   passaient tous deux pour de la mention légale sous les cartes de prix — or
   l'un montre le livrable avant l'achat, l'autre porte le reste de la gamme.
   Traités en bouton fantôme indigo : assez présents pour être vus, pas assez
   pour concurrencer le CTA de la carte, qui reste l'action principale. */
.hm-plus { display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 14px; border: 1px solid var(--v-border);
  background: var(--v-soft); border-radius: 100px;
  font-size: 14.5px; font-weight: 600; color: var(--v);
  transition: background .15s, border-color .15s; }
.hm-plus:hover { background: var(--v-pale); border-color: var(--v); }
.hm-plus-ico { display: flex; width: 26px; height: 26px; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--white);
  border: 1px solid var(--v-border); }
.hm-plus-ico svg { width: 14px; height: 14px; }
.hm-plus-fl { transition: transform .15s; }
.hm-plus:hover .hm-plus-fl { transform: translateX(3px); }

/* ── Carte « dossier » du hero : écho direct de la page résultats ── */
.hm-demo { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg); overflow: hidden; }
.hm-demo-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--off);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-35); }
.hm-demo-strip .l { color: var(--v); }
.hm-demo-body { padding: 22px 24px 20px; }
.hm-demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.hm-demo-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.hm-demo-addr { font-size: 12.5px; color: var(--ink-35); margin-top: 3px; }
/* Tampon de verdict (même vocabulaire que la page résultats) */
.hm-stamp { flex-shrink: 0; transform: rotate(-3deg); border: 2px solid var(--green); border-radius: 6px; padding: 2px; color: var(--green); background: var(--white); }
.hm-stamp-in { border: 1px solid currentColor; border-radius: 3px; padding: 6px 12px 5px; text-align: center; }
.hm-stamp .l { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; white-space: nowrap; }
.hm-stamp .s { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.8px; margin-top: 2px; opacity: .65; text-transform: uppercase; }
.hm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.hm-chip { display: inline-block; padding: 3px 11px; border-radius: 100px; font-size: 11px; font-weight: 600; }
.hm-chip.zone { background: var(--v-pale); border: 1px solid rgba(99,102,241,0.22); color: var(--v); font-family: var(--font-mono); }
.hm-chip.ok { background: var(--green-bg); border: 1px solid rgba(22,163,74,0.18); color: var(--green); }
.hm-chip.mono { background: var(--off); border: 1px solid var(--border); color: var(--ink-35); font-family: var(--font-mono); }
.hm-points { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; }
.hm-points .pt { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-60); line-height: 1.45; }
.hm-points .pt > span:first-child { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.hm-points .ok > span:first-child { color: var(--green); }
.hm-points .warn > span:first-child { color: var(--amber); }
/* Mini-cartouche en pied de carte : filets partagés, comme le dossier */
.hm-cart { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin-top: 20px; }
.hm-cart > div { padding: 8px 12px 7px; box-shadow: -1px 0 0 var(--border); min-width: 0; }
.hm-cart .k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-35); margin-bottom: 2px; white-space: nowrap; }
.hm-cart .v { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; }

/* ── Planche de faisabilité du hero (plan de masse + tampon de verdict) ── */
.hm-plan { width: 100%; max-width: 462px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.hm-plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--off);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-35); }
.hm-plan-strip .l { color: var(--v); }
.hm-plan-draw { position: relative; }
.hm-plan-draw > svg { display: block; width: 100%; height: auto;
  background: repeating-linear-gradient(0deg, transparent 0 19px, rgba(99,102,241,0.05) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, rgba(99,102,241,0.05) 19px 20px); }
.hm-plan-stamp { position: absolute; top: 14px; right: 14px; z-index: 2; }
.hm-plan-foot { display: flex; border-top: 1px solid var(--border); }
.hm-plan-foot > div { flex: 1; padding: 10px 14px; }
.hm-plan-foot > div + div { border-left: 1px solid var(--border); }
.hm-plan-foot .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-35); margin-bottom: 2px; }
.hm-plan-foot .v { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.hm-plan-foot .v.ok { color: var(--green); }
.pln-txt { font-family: var(--font-mono); fill: var(--v); }
.pln-txt.dim { fill: var(--ink-35); }
.pln-cote { stroke: rgba(99,102,241,0.30); stroke-width: 1; }
.pln-tick { stroke: rgba(99,102,241,0.55); stroke-width: 1; }

/* ── Vignettes d'étapes (locate → dessine → dossier tamponné) ── */
.hm-step-viz { height: 92px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.hm-step-viz svg { display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(99,102,241,0.05) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(99,102,241,0.05) 13px 14px); }
.step-card .step-number { font-size: 24px; margin-bottom: 6px; }

/* ── Animations d'entrée (respectent prefers-reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .hm-hero-copy-anim > * { opacity: 0; animation: hm-rise .6s cubic-bezier(.2,.7,.3,1) forwards; }
  .hm-hero-copy-anim > *:nth-child(1) { animation-delay: .04s; }
  .hm-hero-copy-anim > *:nth-child(2) { animation-delay: .10s; }
  .hm-hero-copy-anim > *:nth-child(3) { animation-delay: .16s; }
  .hm-hero-copy-anim > *:nth-child(4) { animation-delay: .22s; }
  .hm-hero-copy-anim > *:nth-child(5) { animation-delay: .28s; }
  .hm-plan { opacity: 0; animation: hm-fade .7s ease .2s forwards; }
  .pln-anim { stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: pln-draw 1.5s ease .45s forwards; }
  .hm-plan-stamp { opacity: 0; animation: hm-stamp-land .55s cubic-bezier(.2,1.5,.4,1) 1.05s forwards; }
}
@keyframes hm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hm-fade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pln-draw { to { stroke-dashoffset: 0; } }
@keyframes hm-stamp-land { 0% { opacity: 0; transform: scale(1.6); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

/* ── Étapes reliées par une ligne de cote ── */
.hm-steps { position: relative; }
.hm-steps .grid-3 { position: relative; z-index: 1; }

/* ── Bande faits + données officielles ── */
/* ── Cartouche de faits ───────────────────────────────────────────────
   Quatre chiffres flottaient auparavant, centrés, sur un fond gris : rien ne
   les tenait ensemble et le tout se lisait comme un pied de page.

   Ils sont désormais une planche, dans le vocabulaire déjà employé par le
   vérificateur (`.vf-cartouche`) : une carte blanche, des cellules séparées
   par des filets fins, une étiquette monospace en capitales au-dessus de
   chaque valeur. C'est la même famille visuelle d'un bout à l'autre du site.

   ⚠ LA VALEUR N'EST PLUS EN MONOSPACE. Le monospace est réservé aux données
   techniques — « 9,00 m », « CES 45 % », un code de zone. « Gratuit » et
   « 2 min » ne sont pas des relevés : en chasse fixe, à 34 px, ils avaient
   l'air d'une sortie de terminal. Ils passent dans la police de titrage, où
   un chiffre a du dessin. Le monospace reste sur l'étiquette, qui est bien,
   elle, une référence de planche. */
/* ── « Avant de signer » : la seule section sombre du corps de page ──
   Le fond `--ink` n'est pas un effet de style : cette section est la seule qui
   parle d'un risque, et elle doit se détacher de tout ce qui l'entoure. Ne pas
   la multiplier — deux blocs sombres dans la même page et l'accent se perd.

   ⚠ VERSION COURTE, volontairement. L'argumentaire complet vit sur
   /dossier-de-faisabilite ; recopier ici le bloc entier mettrait le même
   contenu sur deux pages du site. On garde les cinq constats et la phrase qui
   les résume, on laisse la mise en scène à la page qui vend. */
.hm-risk { background: var(--ink); color: rgba(255,255,255,0.72); padding: 62px 0; }
.hm-risk .sec-label span { color: #a5a8f5; }
.hm-risk .sec-label-line { background: #a5a8f5; }
.hm-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.hm-risk h2 { font-family: var(--font-head); font-size: clamp(24px, 2.9vw, 35px); font-weight: 800;
  letter-spacing: -1px; line-height: 1.16; color: #fff; margin-bottom: 18px; }
.hm-risk-intro { font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; }
.hm-risk-quote { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.4;
  letter-spacing: -.4px; color: #fff; padding-left: 16px; border-left: 2px solid var(--v); }
.hm-risk-list { list-style: none; }
.hm-risk-list li { position: relative; padding: 12px 0 12px 32px; font-size: 14.5px; line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.09); }
.hm-risk-list li:last-child { border-bottom: 0; }
.hm-risk-list li::before { content: '\2715'; position: absolute; left: 0; top: 12px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(220,38,38,0.16); color: #f87171; font-size: 9px;
  display: flex; align-items: center; justify-content: center; }
.hm-risk-foot { margin-top: 22px; font-size: 14.5px; line-height: 1.6; }
/* « avant de signer » en violet : c'est le moment que toute la section désigne,
   il doit se voir dans la phrase qui la conclut. Le violet clair (#a5a8f5) et non
   --v : l'accent de marque est trop sombre sur le fond --ink pour rester lisible.
   Sans soulignement — c'est le soulignement, et lui seul, qui distingue le lien
   de la même couleur juste à côté. */
.hm-risk-foot strong { color: #a5a8f5; }
.hm-risk-foot a { color: #a5a8f5; font-weight: 600; text-decoration: underline; }
@media (max-width: 900px) { .hm-risk-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── Badge data.gouv ────────────────────────────────────────────────
   Une pastille, pas un lien souligné : au milieu d'une page qui affirme
   beaucoup, la seule affirmation VÉRIFIABLE par un tiers mérite d'être
   reconnaissable au premier coup d'œil. Reste sobre pour autant — bordure
   fine, fond blanc — parce qu'elle est une preuve, pas un appel à l'action :
   elle ne doit pas concurrencer le bouton du hero. */
.hm-datagouv { display: inline-flex; align-items: center; gap: 11px; margin: 12px auto 0;
               padding: 9px 14px 9px 11px; border: 1px solid var(--border);
               border-radius: 100px; background: var(--white); text-decoration: none;
               transition: border-color .16s, box-shadow .16s, transform .16s; }
.hm-datagouv:hover { border-color: var(--v-border, rgba(99,102,241,.3));
                     box-shadow: 0 4px 16px rgba(99,102,241,.10); transform: translateY(-1px); }
.hm-datagouv:focus-visible { outline: 2px solid var(--v); outline-offset: 3px; }
.dg-ico { display: flex; width: 30px; height: 30px; flex: none; align-items: center;
          justify-content: center; border-radius: 50%; color: var(--v);
          background: var(--v-soft, rgba(99,102,241,.07)); }
.dg-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.dg-l { font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
        color: var(--ink-35); font-family: var(--font-mono, monospace); }
.dg-m { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.dg-arr { display: flex; color: var(--ink-35); transition: color .16s, transform .16s; }
.hm-datagouv:hover .dg-arr { color: var(--v); transform: translate(1px, -1px); }
/* Le conteneur des chiffres n'est pas un flex : le centrage se fait par le
   texte, ce qui suffit pour un inline-flex. */
.hm-facts-foot { text-align: center; }

/* Ligne de sources, sous les chiffres qu'elle atteste. Volontairement discrète —
   c'est une note de bas de tableau, pas un argument : elle se lit quand on la
   cherche, et elle ne dispute pas l'attention aux chiffres. */
.hm-sources { margin: 18px 0 0; text-align: center; font-family: var(--font-mono, monospace);
              font-size: 11px; line-height: 1.7; color: var(--ink-35); letter-spacing: .2px; }
@media (max-width: 560px) { .hm-sources { font-size: 10.5px; text-align: left; } }
.hm-facts { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-sm); position: relative; }
/* Filets intérieurs par `box-shadow` et non par `border` : une bordure sur
   chaque cellule doublerait l'épaisseur aux jonctions. */
.hm-fact { position: relative; padding: 22px 24px 20px;
  box-shadow: -1px 0 0 var(--border); min-width: 0; }
.hm-fact:first-child { box-shadow: none; }
.hm-fact .l { display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--v);
  margin-bottom: 10px; white-space: nowrap; }
.hm-fact .v { display: block; font-family: var(--font-head); font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800; color: var(--ink); letter-spacing: -1.6px; line-height: 1; white-space: nowrap; }
.hm-fact .k { display: block; font-size: 12.5px; color: var(--ink-60);
  margin-top: 9px; line-height: 1.45; }
.hm-fact .k strong,
.hm-steps .text-muted strong { color: var(--v-txt); font-weight: 600; }
/* Un liseré indigo au-dessus de la cellule survolée : le seul mouvement du
   bloc, et il suffit à le rendre vivant sans l'animer. */
.hm-fact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--v), var(--v-mid)); opacity: 0; transition: opacity .18s; }
.hm-fact:hover::before { opacity: 1; }

/* ── Guides : la carte répond d'abord à la question du visiteur ──────────
   L'ancienne version ouvrait sur un titre de rubrique (« Extension de
   maison ») puis un paragraphe : il fallait le lire en entier pour savoir si
   le guide traitait SON cas. La carte annonce maintenant, dans cet ordre,
   la question posée à voix haute, les trois réponses qu'on y trouve, et la
   règle du PLU qui tranche. */
.hm-guide { display: flex; flex-direction: column; padding: 26px 24px 22px; }
.hm-guide .card-ico svg { width: 22px; height: 22px; }
.hm-guide .card-title { margin-bottom: 4px; }
/* La question, dans les mots du visiteur : c'est elle qui doit accrocher. */
.hm-guide-q { display: block; font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.3px; line-height: 1.35; margin-bottom: 12px; }
.hm-guide-list { flex: 1; list-style: none; margin: 0; padding: 0; }
.hm-guide-list li { position: relative; padding-left: 21px; margin-bottom: 7px;
  font-size: 13px; color: var(--ink-60); line-height: 1.5; }
.hm-guide-list li:last-child { margin-bottom: 0; }
.hm-guide-list li::before { content: ''; position: absolute; left: 2px; top: 6px;
  width: 9px; height: 5px; border-left: 1.8px solid var(--v);
  border-bottom: 1.8px solid var(--v); transform: rotate(-45deg); }
.hm-guide-list li strong { color: var(--v-txt); font-weight: 600; }
.hm-guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
/* La règle qui décide, nommée : « Seuil 20 / 40 m² » vaut mieux qu'un badge
   décoratif — c'est le mot-clé que le visiteur cherchait. */
.hm-guide-tag { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.4px;
  color: var(--v); background: var(--v-pale); border: 1px solid rgba(99,102,241,0.2);
  padding: 4px 10px; border-radius: 100px; white-space: nowrap; }
.hm-guide-tag svg { width: 11px; height: 11px; flex-shrink: 0; }
.hm-guide-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--v); transition: gap .15s; white-space: nowrap; }
.hm-guide-cta svg { width: 13px; height: 13px; }
.hm-guide:hover .hm-guide-cta { gap: 9px; }
.hm-guide.card-bientot .hm-guide-q,
.hm-guide.card-bientot .hm-guide-list li strong { color: var(--ink-60); }
@media (max-width: 560px) {
  .hm-guide-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* La bande de pastilles (.hm-deps/.hm-dep) vit dans base.html.twig : la page
   département s'en sert aussi pour lister les communes encore à dépouiller. */

/* ── Répertoire communes (épuré, façon index) ── */
.hm-commune-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.hm-commune-link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 6px; border-top: 1px solid var(--border); color: var(--ink); transition: color .15s, padding-left .15s; }
.hm-commune-link:hover { color: var(--v); padding-left: 10px; }
.hm-commune-link .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.hm-commune-link .meta { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.hm-commune-link .dept { font-family: var(--font-mono); font-size: 10.5px; color: var(--v);
  background: var(--v-pale); padding: 1px 7px; border-radius: 4px; font-weight: 600; }
.hm-commune-link .zn { font-family: var(--font-mono); font-size: 11px; color: var(--ink-35); }

/* ── Formules pro (mises en avant sur la home pour la conversion) ── */
.hm-price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; align-items: stretch; }
.hm-price { position: relative; display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 24px; }
.hm-price--feat { border: 2px solid var(--v); box-shadow: var(--sh-md); }
.hm-price-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-35); }
.hm-price--feat .hm-price-name { color: var(--v); }
.hm-price-flag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  background: var(--v); color: #fff; padding: 3px 8px; border-radius: 100px; }
.hm-price-amt { margin: 12px 0 3px; display: flex; align-items: baseline; min-height: 40px; }
.hm-price-amt .n { font-family: var(--font-head); font-size: 34px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; }
.hm-price-amt .n.sm { font-size: 22px; letter-spacing: -0.5px; }
.hm-price-amt .per { font-size: 13px; color: var(--ink-60); }
.hm-price-sub { font-size: 12px; color: var(--ink-35); margin-bottom: 16px; }
/* Prix de lancement. Le barré précède le prix : le montant réclamé est ce que
   l'œil retient en dernier. La mention dit ce qui se passe après — sans elle,
   un prix barré n'est qu'une décoration. */
.hm-price-was { font-family: var(--font-mono); font-size: 13px; color: var(--ink-35);
  text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 7px; }
.hm-price-launch { display: inline-block; margin-bottom: 12px; padding: 2px 9px;
  background: var(--green-bg); color: var(--green); border: 1px solid rgba(22,163,74,0.18);
  border-radius: 100px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.6px; text-transform: uppercase; }
.hm-price-feats { list-style: none; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--ink-60); flex: 1; margin-bottom: 18px; }
.hm-price-feats li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.hm-price-feats svg { flex-shrink: 0; margin-top: 2px; }

/* ── Pont professionnels ── */
.hm-pro { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 34px 36px; box-shadow: var(--sh-sm); }
.hm-pro-copy { flex: 1; }
.hm-pro-grid { position: absolute; inset: 0; opacity: 1; pointer-events: none;
  background-image: linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 60% 90% at 92% 20%, black 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 92% 20%, black 5%, transparent 70%); }
.hm-pro > * { position: relative; z-index: 1; }
.hm-pro h3 { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -0.6px; margin: 10px 0 6px; }
.hm-pro p { font-size: 14.5px; color: var(--ink-60); line-height: 1.55; max-width: 520px; }

/* ── FAQ ── */
.hm-faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.hm-faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); transition: border-color .15s; }
.hm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; list-style: none; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary svg { flex-shrink: 0; color: var(--ink-35); transition: transform .18s; }
.hm-faq details[open] summary svg { transform: rotate(180deg); }
.hm-faq details p { padding: 0 20px 18px; font-size: 14px; color: var(--ink-60); line-height: 1.65; margin: 0; max-width: 700px; }

@media (max-width: 900px) {
  .hm-hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* Deux par deux : à quatre colonnes sur 390 px, chaque cellule tomberait à
     80 px et « 48 » y serait plus large que son étiquette. Le filet horizontal
     réapparaît entre les deux rangées, sinon elles se touchent sans séparation. */
  .hm-facts { grid-template-columns: repeat(2, 1fr); }
  .hm-fact { padding: 18px 16px 16px; }
  .hm-fact:nth-child(odd) { box-shadow: none; }
  .hm-fact:nth-child(n+3) { box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
  .hm-fact:nth-child(3) { box-shadow: 0 -1px 0 var(--border); }
  .hm-fact .v { font-size: 28px; letter-spacing: -1.2px; }
  .hm-price-row { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .hm-commune-list { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
}
@media (max-width: 600px) {
  .hm-commune-list { grid-template-columns: 1fr; }

  /* ── Hero sur téléphone ──────────────────────────────────────────────
     Trois réglages qui vont ensemble, et un seul but : que le titre soit la
     première chose qu'on voie, entier, sans faire défiler.

     1. 74 px de vide sous une barre de navigation déjà haute repoussaient
        l'accroche hors du premier écran. 30 px suffisent à séparer.
     2. Le titre restait au plancher du `clamp` (32 px) : c'est la taille d'un
        H2, pour la phrase qui porte toute la page.
     3. `line-height: 1.04` est un réglage d'affiche, calé sur les 56 px du
        bureau. Agrandi et sur trois lignes, les jambages de « g » frôlent les
        accents de la ligne suivante ; 1.12 leur rend l'air que le grand
        format n'exigeait pas.

     ⚠ LA TAILLE EST FLUIDE, ET CE N'EST PAS UN RAFFINEMENT. Le titre porte
     deux retours à la ligne EN DUR ; sa plus longue ligne, « Peut-on
     construire, », doit tenir d'un seul tenant, sinon une quatrième ligne
     apparaît avec « Peut-on » orphelin dessus. Mesuré dans Sora 900 : cette
     ligne fait 9,25 fois la taille de la fonte. Une valeur FIXE casserait donc
     d'une largeur d'écran à l'autre — 36 px passent sur un écran de 390 px et
     débordent sur un 360.

     La formule suit la place réellement disponible : 100vw, moins les 48 px de
     marges du conteneur, moins 15 px pour une éventuelle barre de défilement
     (les navigateurs de bureau en réservent une quand on réduit la fenêtre ;
     les téléphones la superposent). Le tout divisé par 9,25, arrondi vers le
     bas. Plafond à 36 px, plancher à 27.

     ⚠ Retoucher les retours à la ligne du titre, ou sa graisse, oblige à
     refaire cette mesure. */
  .hm-hero .container { padding-top: 30px; padding-bottom: 52px; }
  .hm-h1 { font-size: clamp(27px, calc(10.7vw - 7px), 36px); line-height: 1.12; margin-bottom: 14px; }
  .hm-h1 .sub { margin-top: 14px; }
}