/* Karka — styles propres à templates/dossier/faisabilite.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. */

/* ── Hero ───────────────────────────────────────────────────────────── */
.mq-hero { position: relative; overflow: hidden; padding: 66px 0 74px; background: var(--white); }
.mq-hero .container { position: relative; z-index: 1; }
.mq-hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; 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. */
.mq-hero-grid > * { min-width: 0; }
/* Pas de <br> forcé dans le titre : la coupure « vous le / permet-il » tombait
   au mauvais endroit dès que la colonne changeait de largeur. On borne la
   mesure, le texte se coupe tout seul. */
.mq-h1 { font-family: var(--font-head); font-size: clamp(32px, 3.6vw, 46px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1.6px; text-wrap: balance; }
.mq-h1 em { font-style: normal; color: var(--v-txt); }
/* ⚠ Cette ligne est DANS le H1, et ce n'est pas un détail : l'accroche qui
   convertit (« votre terrain vous le permet-il ? ») ne contient aucun mot-clé,
   et un H1 sans mot-clé sur une page indexée est une page qu'on ne trouve pas.
   Le sous-titre porte « dossier de faisabilité », « PLU », « parcelle » et
   « Île-de-France » sans rien retirer à la question. Même procédé que l'accueil.
   Ne pas la sortir du H1 pour « faire plus propre ». */
.mq-h1 .kw { display: block; margin-top: 15px; font-family: var(--font-body);
  font-size: 15.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0;
  color: var(--ink-60); max-width: 560px; }
.mq-lead { font-size: 17px; color: var(--ink-60); line-height: 1.65; margin: 18px 0 26px; max-width: 560px; }

.mq-micro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-35); }
.mq-micro i { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green); margin-right: 7px; vertical-align: 1px; }

/* ── Carte « résultat », verrouillée ─────────────────────────────────── */
.mq-res { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); overflow: hidden; }
.mq-res-top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--border); background: var(--off); }
.mq-res-top .l { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-35); }
.mq-res-top .l i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.mq-res-top .r { font-family: var(--font-mono); font-size: 10px; color: var(--ink-35); }
.mq-res-body { padding: 22px 20px 20px; }
.mq-res-proj { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-35); }
.mq-res-adr { font-family: var(--font-head); font-size: 17px; font-weight: 700;
  letter-spacing: -.4px; margin: 3px 0 16px; }
.mq-verdict { display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  background: var(--amber-bg); border: 1px solid rgba(217,119,6,.2); border-radius: var(--r-md); }
.mq-verdict-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: rgba(217,119,6,.14); color: var(--amber); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 17px; }
.mq-verdict b { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 800;
  letter-spacing: -.2px; color: var(--amber); }
.mq-verdict em { font-style: normal; font-size: 12.5px; color: var(--ink-60); }

.mq-checks { list-style: none; margin: 16px 0 0; }
.mq-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.mq-checks li:last-child { border-bottom: 0; }
.mq-checks .n { flex: 1; color: var(--ink); }
.mq-checks .v { font-family: var(--font-mono); font-size: 11px; }
.mq-checks .ok { color: var(--green); }
.mq-checks .warn { color: var(--amber); }
.mq-dot { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 700; }
.mq-dot.ok { background: var(--green-bg); color: var(--green); }
.mq-dot.warn { background: var(--amber-bg); color: var(--amber); }

/* Le verrou : ce qui reste derrière la vitre. Flou ET non sélectionnable — un
   simple voile laisserait le texte lisible dans le code source. */
.mq-lock { position: relative; margin-top: 14px; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); }
.mq-lock-blur { filter: blur(4.5px); opacity: .55; user-select: none; pointer-events: none;
  padding: 15px 16px; background: var(--off); }
.mq-lock-blur p { height: 7px; border-radius: 4px; background: var(--ink-12); margin-bottom: 9px; }
.mq-lock-over { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: rgba(255,255,255,.55); }
.mq-lock-over .k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--v-txt); }

/* ── Sections ───────────────────────────────────────────────────────── */
.mq-sec { padding: 74px 0; }
.mq-sec.alt { background: var(--off); }
.mq-sec.ink { background: var(--ink); color: rgba(255,255,255,.72); }
.mq-sec.ink .sec-h2, .mq-sec.ink strong { color: #fff; }
.mq-sec.ink .sec-label span { color: #a5a8f5; }
.mq-sec.ink .sec-label-line { background: #a5a8f5; }
.mq-intro { font-size: 16px; color: var(--ink-60); line-height: 1.7; max-width: 680px; }
.mq-center { text-align: center; }
.mq-center .sec-label { justify-content: center; }
.mq-center .mq-intro { margin-left: auto; margin-right: auto; }

/* ── La peur ────────────────────────────────────────────────────────── */
.mq-fear { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.mq-fear-list { list-style: none; margin-top: 6px; }
.mq-fear-list li { position: relative; padding: 13px 0 13px 34px;
  border-bottom: 1px solid rgba(255,255,255,.09); font-size: 15px; line-height: 1.5; }
.mq-fear-list li::before { content: '✕'; position: absolute; left: 0; top: 12px; width: 21px;
  height: 21px; border-radius: 50%; background: rgba(220,38,38,.16); color: #f87171;
  font-size: 10px; display: flex; align-items: center; justify-content: center; }
.mq-fear-quote { font-family: var(--font-head); font-size: 21px; font-weight: 700; line-height: 1.35;
  letter-spacing: -.5px; color: #fff; padding-left: 18px; border-left: 2px solid var(--v); }

/* ── Étapes du parcours ─────────────────────────────────────────────── */
.mq-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.mq-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 22px 20px; }
.mq-step .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; color: var(--v);
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mq-step .n::before { content: ''; width: 14px; height: 1px; background: var(--v); }
.mq-step h3 { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: -.3px;
  margin-bottom: 7px; }
.mq-step p { font-size: 13.5px; color: var(--ink-60); line-height: 1.55; }
.mq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mq-chip { font-size: 12px; padding: 5px 11px; border-radius: 100px; border: 1px solid var(--border);
  color: var(--ink-60); }
.mq-chip.on { border-color: var(--v-border); background: var(--v-soft); color: var(--v-txt); font-weight: 600; }
.mq-scan { list-style: none; margin-top: 12px; }
.mq-scan li { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-60); padding: 4px 0; }
.mq-scan li b { color: var(--green); }

/* ── Aperçus du dossier ─────────────────────────────────────────────── */
.mq-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 42px; }
.mq-shot { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; display: flex; flex-direction: column; }
.mq-sheet-top { display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--off);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-35); }
.mq-sheet-top .b { display: flex; align-items: center; gap: 7px; color: var(--v-txt); }
.mq-sheet-top .b i { width: 9px; height: 9px; border: 1.4px solid var(--v); border-radius: 2px; }
/* ⚠ La planche est BORNÉE en largeur. Un SVG en `width: 100%` sur une carte de
   600 px agrandit tout son contenu d'un facteur 2,4 : les libellés de 8 px du
   dossier s'affichaient en 19 px, et l'aperçu ne ressemblait plus à une page
   mais à une affiche. On garde donc la planche à sa taille de lecture, centrée
   sur un fond gris — la carte, elle, occupe toute la colonne. */
.mq-sheet { position: relative; display: flex; justify-content: center;
  padding: 22px 22px 26px; background: var(--off); }
.mq-page { position: relative; width: 100%; max-width: 340px; background: #fff;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  box-shadow: var(--sh-sm); }
/* ⚠ `>` obligatoire : en `.mq-sheet svg`, la règle attrapait aussi le cadenas
   du voile et l'étirait à toute la largeur de la carte. */
.mq-page > svg { display: block; width: 100%; height: auto; }
.mq-sheet .pg-txt { font-family: var(--font-mono); fill: var(--ink-60); }
.mq-sheet .pg-txt.v { fill: var(--v-txt); }
/* Voile de verrouillage sur le bas d'une planche : assez pour convaincre,
   pas assez pour recopier. */
.mq-veil { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.86) 42%, #fff 100%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.mq-veil .k { display: inline-flex; align-items: center; gap: 7px; background: var(--white);
  border: 1px solid var(--v-border); border-radius: 100px; padding: 5px 13px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--v-txt); box-shadow: var(--sh-sm); }
.mq-veil .k svg { flex-shrink: 0; width: 11px; height: 11px; }
.mq-shot-cap { padding: 18px 20px 20px; border-top: 1px solid var(--border); }
.mq-shot-cap h3 { font-family: var(--font-head); font-size: 15.5px; font-weight: 700;
  letter-spacing: -.3px; margin-bottom: 6px; }
.mq-shot-cap p { font-size: 13.5px; color: var(--ink-60); line-height: 1.55; }

/* ── Seul vs Karka ─────────────────────────────────────────────────── */
.mq-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.mq-col { border-radius: var(--r-xl); padding: 28px 26px; border: 1px solid var(--border); background: var(--white); }
.mq-col.win { border: 2px solid var(--v); box-shadow: var(--sh-md); padding: 27px 25px; }
.mq-col h3 { font-family: var(--font-head); font-size: 17px; font-weight: 800; letter-spacing: -.5px;
  margin-bottom: 4px; }
.mq-col .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--ink-35); margin-bottom: 18px; display: block; }
.mq-col ul { list-style: none; }
.mq-col li { position: relative; padding: 8px 0 8px 26px; font-size: 14px; line-height: 1.5;
  color: var(--ink-60); }
.mq-col li::before { position: absolute; left: 0; top: 8px; font-size: 13px; }
.mq-col.lose li::before { content: '✕'; color: var(--ink-35); }
.mq-col.win li { color: var(--ink); }
.mq-col.win li::before { content: '✓'; color: var(--green); font-weight: 700; }
.mq-col .out { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-60); }
.mq-col.win .out { color: var(--v-txt); font-weight: 600; }

/* ── Tableau comparatif ─────────────────────────────────────────────── */
.mq-tw { overflow-x: auto; margin-top: 38px; border: 1px solid var(--border);
  border-radius: var(--r-xl); background: var(--white); }
.mq-tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
.mq-tbl th, .mq-tbl td { padding: 14px 18px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--border); }
.mq-tbl thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-35); background: var(--off); }
.mq-tbl td:not(:first-child), .mq-tbl th:not(:first-child) { text-align: center; }
.mq-tbl .mid { background: var(--v-soft); }
.mq-tbl thead .mid { color: var(--v-txt); }
.mq-tbl tbody tr:last-child td { border-bottom: 0; }
.mq-tbl .y { color: var(--green); font-weight: 700; }
.mq-tbl .no { color: var(--ink-35); }
.mq-tbl .price td { font-family: var(--font-mono); font-size: 13px; }
.mq-tbl .price td:first-child { font-family: var(--font-body); font-weight: 700; }
.mq-tbl .price .mid { font-weight: 700; color: var(--v-txt); }

/* ── Valeur & prix ──────────────────────────────────────────────────── */
.mq-value { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 34px; box-shadow: var(--sh-md); margin-top: 40px; }
.mq-value ul { list-style: none; columns: 2; column-gap: 26px; }
.mq-value li { break-inside: avoid; position: relative; padding: 7px 0 7px 24px; font-size: 14px;
  line-height: 1.5; color: var(--ink); }
.mq-value li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px;
  border-left: 1.9px solid var(--v); border-bottom: 1.9px solid var(--v); transform: rotate(-45deg); }
.mq-buy { border-left: 1px solid var(--border); padding-left: 32px; }
.mq-buy .was { font-family: var(--font-mono); font-size: 16px; color: var(--ink-35);
  text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mq-buy .amt { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.mq-buy .amt b { font-family: var(--font-head); font-size: 52px; font-weight: 800;
  letter-spacing: -2.4px; line-height: 1; }
.mq-buy .amt span { font-size: 14px; color: var(--ink-60); }
.mq-buy .launch { display: inline-flex; align-items: center; margin-top: 8px; padding: 3px 10px;
  background: var(--green-bg); color: var(--green); border: 1px solid rgba(22,163,74,.18);
  border-radius: 100px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; }
.mq-buy .cmp { margin: 16px 0 18px; font-size: 13.5px; color: var(--ink-60); line-height: 1.55; }
.mq-buy .btn-primary { width: 100%; padding: 15px 20px; font-size: 15.5px; }
.mq-buy .foot { margin-top: 11px; font-size: 12px; color: var(--ink-35); line-height: 1.5; text-align: center; }

.mq-cta-row { display: flex; justify-content: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ── Questions ──────────────────────────────────────────────────────── */
.mq-faq { max-width: 780px; margin: 38px auto 0; text-align: left; }
.mq-faq details { border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--white); margin-bottom: 10px; }
.mq-faq summary { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--ink); }
.mq-faq summary::-webkit-details-marker { display: none; }
.mq-faq summary svg { flex-shrink: 0; color: var(--ink-35); transition: transform .2s; }
.mq-faq details[open] summary { color: var(--v-txt); }
.mq-faq details[open] summary svg { transform: rotate(180deg); color: var(--v); }
.mq-faq p { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.65; color: var(--ink-60); }
.mq-faq p a { color: var(--v-txt); font-weight: 600; text-decoration: underline; }
.mq-faq-depl { max-width: 780px; margin: 22px auto 0; text-align: left; }

@media (max-width: 980px) {
  .mq-hero-grid, .mq-fear, .mq-vs, .mq-shots, .mq-value { grid-template-columns: 1fr; }
  .mq-steps { grid-template-columns: repeat(2, 1fr); }
  .mq-buy { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 26px; }
  .mq-value ul { columns: 1; }
  .mq-value { padding: 26px; }
}
@media (max-width: 620px) {
  .mq-steps { grid-template-columns: 1fr; }

  /* Même resserrement que sur l'accueil : 66 px de vide sous une barre de
     navigation déjà haute repoussent l'accroche hors du premier écran. */
  .mq-hero { padding: 26px 0 44px; }
  .mq-sec { padding: 52px 0; }

  /* L'étiquette de droite de l'en-tête de planche (« Vos chiffres face aux
     règles ») passait sur deux lignes et venait chevaucher « Votre dossier » à
     sa gauche. Elle est redondante : la légende sous la planche nomme déjà son
     contenu, en toutes lettres et en plus lisible. */
  .mq-sheet-top span:last-child { display: none; }

  /* ⚠ Première colonne COLLANTE. Le tableau fait 620 px au minimum et défile
     donc horizontalement sur téléphone — c'est voulu, un tableau comprimé à
     390 px n'est plus lisible. Mais en faisant défiler pour atteindre la
     colonne Karka (le propos du tableau), on perdait de vue le nom de la
     ligne : on lisait « ✓ » sans savoir de quoi. La colonne des libellés reste
     donc à gauche, avec un fond opaque et un filet qui marque la césure. */
  .mq-tbl th:first-child, .mq-tbl td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--white);
    box-shadow: 1px 0 0 var(--border);
    /* ⚠ Largeur BORNÉE. Sans elle, la colonne des libellés se dimensionne sur
       « Accompagnement complet, dépôt en mairie » et occupe 250 des 327 px
       visibles : une fois collée, elle masquait les colonnes qu'on venait
       justement de faire défiler pour voir. À 148 px il reste de quoi lire une
       colonne de valeurs entière. */
    width: 148px; min-width: 148px; }
  .mq-tbl thead th:first-child { background: var(--off); }
  /* 470 plutôt que 620 : trois colonnes de valeurs à ~107 px suffisent pour un
     « ✓ » ou « Plusieurs heures » sur deux lignes, et le défilement devient
     court — deux gestes au lieu de cinq. */
  .mq-tbl { min-width: 470px; }
  .mq-tbl th, .mq-tbl td { padding: 11px 10px; font-size: 12.5px; }
}