/* ============================================================
   S'installer au Luxembourg
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #fcfcfd;
  --bg-alt: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --border: #e6eaef;
  --border-fort: #ccd4de;
  --text: #0b0f16;
  --text-2: #38424f;
  /* Le gris secondaire passe 4,5 de contraste sur tous les fonds clairs du site,
     accent-soft compris (4,61) : #6a7583 tombait a 4,12 et 4,36, sous le seuil
     du petit texte. Mesure le 12 octobre 2026. */
  --muted: #636d7b;
  --accent: #0a4fa8;
  --accent-2: #00b3c8;
  --accent-3: #6b4df6;
  --accent-soft: #eaf1fb;
  --warn: #96570a;
  --warn-soft: #fdf5e8;
  --ok: #0c6b3e;
  --ombre-s: 0 1px 2px rgba(11,18,32,.05), 0 2px 6px rgba(11,18,32,.05);
  --ombre-m: 0 6px 14px -4px rgba(11,18,32,.10), 0 18px 34px -10px rgba(11,18,32,.10);
  --ombre-l: 0 16px 28px -12px rgba(11,18,32,.16), 0 40px 70px -20px rgba(11,18,32,.22);
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --max: 1200px;
  /* Taille des etiquettes en capitales (categories, badges, intitules de
     colonnes). Un seul reglage, releve sur ecran tactile. */
  --micro: 11px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080a0f;
    --bg-alt: #0d1017;
    --surface: #12161e;
    --surface-2: #1a1f29;
    --border: #232a36;
    --border-fort: #36404f;
    --text: #f0f3f7;
    --text-2: #c6cfda;
    --muted: #8792a1;
    --accent: #5fa8f5;
    --accent-2: #3ad6ee;
    --accent-3: #a78bfa;
    --accent-soft: #10203a;
    --warn: #e7b165;
    --warn-soft: #221a0e;
    --ok: #5ccb90;
    --ombre-s: 0 1px 3px rgba(0,0,0,.5);
    --ombre-m: 0 8px 20px -6px rgba(0,0,0,.6);
    --ombre-l: 0 24px 60px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  --bg: #080a0f; --bg-alt: #0d1017; --surface: #12161e; --surface-2: #1a1f29;
  --border: #232a36; --border-fort: #36404f; --text: #f0f3f7; --text-2: #c6cfda;
  --muted: #8792a1; --accent: #5fa8f5; --accent-2: #3ad6ee; --accent-3: #a78bfa;
  --accent-soft: #10203a; --warn: #e7b165; --warn-soft: #221a0e; --ok: #5ccb90;
  --ombre-s: 0 1px 3px rgba(0,0,0,.5);
  --ombre-m: 0 8px 20px -6px rgba(0,0,0,.6);
  --ombre-l: 0 24px 60px -16px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--h-top) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.68 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* L'attribut hidden a une specificite nulle : la moindre regle display le
   neutralise sans bruit, et l'element reste a l'ecran. On le rend inviolable
   une fois pour toutes, au lieu de le rattraper au cas par cas. */
[hidden] { display: none !important; }

a { color: var(--accent); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* ---------- Navigation ---------- */

/* En-tete fixe, et non colle. Un en-tete colle depend de ses ancetres : le
   garde-fou `html, body { overflow-x: hidden }` en fait des conteneurs de
   defilement, et `position: sticky` cesse alors de tenir, ce qui laissait la
   barre partir vers le haut sur la plupart des onglets. En position fixe elle
   ne depend plus de rien. Le corps recoit en echange une marge haute de la
   hauteur de la barre, sinon le contenu commencerait dessous. */
/* L'apparence de la barre, ses entrees et ses menus vivent dans entete.css,
   commune a toutes les pages du site. Reste ici sa place dans cette page. */
header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }

body { padding-top: var(--h-top); }

/* Focus visible : un utilisateur au clavier doit voir ou il est. Il n'y avait
   aucun anneau de focus dans la feuille, la navigation se faisait a l'aveugle. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* ---------- Structure ---------- */

main { max-width: var(--max); margin: 0 auto; padding: 0 24px 90px; }
/* Chaque section commence a la meme distance de l'en-tete fixe, qu'elle
   s'ouvre sur un titre ou sur un bloc. */
.panel { padding-top: 30px; }
.panel[hidden] { display: none; }

h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06;
  margin: 0 0 14px; letter-spacing: -.5px;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.15;
  margin: 58px 0 18px; letter-spacing: -.3px;
}
h3 { font-size: 16.5px; margin: 22px 0 8px; font-weight: 600; letter-spacing: -.2px; }
p { color: var(--text-2); }
/* LARGEUR DU TEXTE, regle unique de la feuille.

   Un paragraphe prend la largeur du bloc qu'il accompagne. Pas de mesure de
   lecture, pas de max-width sur du texte courant : une colonne de texte qui
   s'arrete au tiers d'une carte pleine largeur se lit comme un defaut de mise
   en page, et la question s'est posee a chaque relecture. L'alignement des
   bords vaut mieux ici que la longueur de ligne ideale.

   Aucune largeur de texte ne se declare ailleurs dans la feuille. La seule
   exception est le hero, ou le titre et sa phrase sont composes court
   par-dessus une photographie : c'est une composition, pas un paragraphe. */
.lead { color: var(--muted); font-size: 17.5px; margin: 0 0 30px; }

/* Apparition au defilement */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.vu { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }

/* ---------- Hero ---------- */

.hero {
  position: relative; margin: 0; min-height: min(72vh, 600px);
  display: flex; align-items: flex-end; overflow: hidden;
  border-radius: var(--r-l);
  box-shadow: var(--ombre-m);
}
.hero-img { position: absolute; inset: 0; }
.hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  animation: derive 26s ease-in-out infinite alternate;
}
@keyframes derive { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero-img img { animation: none; } .reveal { opacity: 1; transform: none; } }
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 80% at 12% 100%, rgba(10,79,168,.55), transparent 62%),
    linear-gradient(180deg, rgba(4,8,16,.34) 0%, rgba(4,8,16,.52) 40%, rgba(4,8,16,.93) 100%);
}
.hero-in {
  position: relative; max-width: var(--max); margin: 0 auto;
  padding: 90px 24px 46px; width: 100%; color: #fff;
}
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.86); background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.hero .kicker .pt { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 3px 40px rgba(0,0,0,.4); }
.hero h1 em { font-style: italic; color: #9fd4ff; }
.hero p { color: rgba(255,255,255,.87); font-size: 18px; max-width: 54ch; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-stats .s .n { font-family: var(--serif); font-size: 34px; line-height: 1; }
.hero-stats .s .l {
  font-size: 11.5px; color: rgba(255,255,255,.68);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 7px; font-weight: 500;
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--surface); border: 1px solid transparent;
  padding: 12px 21px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 550;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, background .16s, border-color .16s;
  box-shadow: var(--ombre-s);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.btn:active { transform: translateY(0); }
.btn.clair { background: #fff; color: #08203c; }
.btn.contour { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.38); backdrop-filter: blur(8px); }
.btn.contour:hover { background: rgba(255,255,255,.17); }
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--border-fort); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.danger { background: transparent; color: #c1392a; border-color: #c1392a; box-shadow: none; }

/* ---------- Cartes ---------- */

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.grid.serre { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 24px; box-shadow: var(--ombre-s);
}

.tuile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); overflow: hidden; cursor: pointer;
  box-shadow: var(--ombre-s); display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.tuile:hover { transform: translateY(-5px); box-shadow: var(--ombre-l); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tuile .visuel { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.tuile .visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.25,1); }
.tuile:hover .visuel img { transform: scale(1.08); }
.tuile .visuel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(6,11,20,.62));
}
.tuile .visuel .etiquette {
  position: absolute; left: 14px; bottom: 13px; z-index: 2;
  color: #fff; font-size: var(--micro); font-weight: 650;
  text-transform: uppercase; letter-spacing: 1.1px;
  background: rgba(8,16,30,.42); backdrop-filter: blur(10px);
  padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
}
.tuile .corps { padding: 19px 21px 22px; flex: 1; display: flex; flex-direction: column; }
.tuile h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.3px; }
.tuile p { margin: 0; color: var(--muted); font-size: 14.3px; line-height: 1.6; }
.tuile .compte {
  margin-top: 14px; font-size: 12px; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px;
}

/* ---------- Carte de fiche, sans photo ---------- */

.fcarte {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 20px 22px 22px; cursor: pointer;
  box-shadow: var(--ombre-s); position: relative; overflow: hidden;
  transition: transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s, border-color .24s;
}
/* Un filet de la couleur du theme sur le bord haut : la categorie se lit d'un
   coup d'oeil en balayant la colonne, sans lire l'etiquette. */
.fcarte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cat-c, var(--accent));
}
.fcarte:hover {
  transform: translateY(-3px); box-shadow: var(--ombre-m);
  border-color: color-mix(in srgb, var(--cat-c, var(--accent)) 45%, var(--border));
}
.fcarte-cat {
  display: inline-block; font-size: var(--micro); font-weight: 680;
  text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 11px;
  color: var(--cat-c, var(--accent));
}
.sans-etiquette .fcarte-cat { display: none; }
.sans-etiquette .fcarte h3 { margin-top: 2px; }
.fcarte h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.3px; line-height: 1.3; }
.fcarte p { margin: 0; color: var(--muted); font-size: 14.3px; line-height: 1.6; }

/* Une couleur par theme, prise dans la meme famille que le reste du site. */
.fcarte[data-cat="Administratif"] { --cat-c: #0a4fa8; }
.fcarte[data-cat="Logement"]      { --cat-c: #0f766e; }
.fcarte[data-cat="Impots"]        { --cat-c: #96570a; }
.fcarte[data-cat="Finances"]      { --cat-c: #7c3aed; }
.fcarte[data-cat="Travail"]       { --cat-c: #1d4ed8; }
.fcarte[data-cat="Famille"]       { --cat-c: #be123c; }
.fcarte[data-cat="Sante"]         { --cat-c: #0c6b3e; }
.fcarte[data-cat="Mobilite"]      { --cat-c: #0369a1; }
.fcarte[data-cat="Quotidien"]     { --cat-c: #a21caf; }

/* Groupes par theme dans la liste des fiches */
.grp-tete {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 2px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.grp-tete:first-child { margin-top: 6px; }
.grp-tete h2 { margin: 0; font-size: 22px; }
.grp-compte { font-size: var(--micro); color: var(--muted); font-weight: 620; letter-spacing: .8px; text-transform: uppercase; }
.grp-grille { grid-column: 1 / -1; margin: 0; }

.cat {
  display: inline-block; font-size: var(--micro); font-weight: 680;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}

.qcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 20px 22px; cursor: pointer;
  box-shadow: var(--ombre-s); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.qcard::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--accent), var(--accent-2));
  transform: scaleY(0); transform-origin: top; transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.qcard:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); border-color: var(--border-fort); }
.qcard:hover::after { transform: scaleY(1); }
.qcard h3 { margin: 0 0 7px; font-size: 15.5px; }
.qcard p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Encadres ---------- */

.recap {
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--r-m); padding: 19px 22px; margin: 26px 0;
}
.recap strong { color: var(--warn); display: block; margin-bottom: 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.1px; }
.recap ul { margin: 0; padding-left: 20px; }
.recap li { margin: 6px 0; color: var(--text-2); }

.notice {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-s); padding: 17px 20px; margin: 24px 0;
  box-shadow: var(--ombre-s);
}

/* ---------- Tableaux ---------- */

.table-wrap {
  overflow-x: auto; margin: 18px 0; border: 1px solid var(--border);
  border-radius: var(--r-m); background: var(--surface); box-shadow: var(--ombre-s);
}
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
th {
  font-weight: 620; color: var(--muted); font-size: var(--micro);
  text-transform: uppercase; letter-spacing: 1px; background: var(--surface-2);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--surface-2); }

/* ---------- Formulaires ---------- */

label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; font-weight: 530; letter-spacing: .2px; }
input, select, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-fort);
  border-radius: 11px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; transition: border-color .16s, box-shadow .16s;
  line-height: 1.68;
}
/* Une liste deroulante ne tient pas compte de sa hauteur de ligne pour calculer
   sa propre hauteur : elle faisait quatre pixels de moins qu'un champ de saisie,
   et une rangee qui melange les deux ne s'alignait jamais tout a fait. On lui
   impose donc la hauteur d'un champ, calculee de la meme facon : hauteur de
   ligne, plus les deux rembourrages, plus les deux bordures. */
select { min-height: calc(1.68em + 26px); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }

/* Un champ s'aligne sur son controle, pas sur son etiquette. Sans cela, une
   etiquette qui passe a la ligne pousse son champ vers le bas et la rangee
   part en escalier. Les cases a cocher gardent leur disposition en ligne. */
.row > div:not(.check) { display: flex; flex-direction: column; justify-content: flex-end; }
.row > div:not(.check) > label { margin-top: 0; }

/* Capacite d'emprunt : la rangee des revenus porte trois champs, dont une
   liste deroulante longue ; celle du pret en porte six, qui se replient par
   trois puis par deux. */
.e-personnes { display: grid; gap: 14px; grid-template-columns: 1fr; }
.e-qui { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.e-qui-choix {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0;
  padding: 14px 16px; border: 1px solid var(--border-fort); border-radius: 12px; background: var(--surface);
  transition: border-color .16s, background .16s;
}
.e-qui-choix:hover { border-color: var(--accent); }
.e-qui-choix input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.e-qui-choix span { display: flex; flex-direction: column; gap: 2px; }
.e-qui-choix b { font-size: 15px; color: var(--text); }
.e-qui-choix i { font-style: normal; font-size: 13px; color: var(--muted); }
.e-qui-choix:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 620px) { .e-qui { grid-template-columns: 1fr; } }
.e-personne { padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.e-personne h4, .e-sous { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.e-sous { margin-top: 22px; }
.row-personne { gap: 14px; grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.1fr) minmax(210px, 1.2fr) minmax(90px, .55fr); }
.row-autres { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
.row-charges { grid-template-columns: repeat(4, minmax(170px, 1fr)); }

/* Une aide sous chaque champ. Les rangees passent en sous-grille : les
   etiquettes, les champs et les aides s'alignent chacun sur leur ligne, quelle
   que soit la longueur du texte des voisins. */
.row.avec-aides { row-gap: 18px; }
.row.avec-aides > div:not(.check) {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0;
}
.row.avec-aides > div > label { align-self: end; }
.aide-champ { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
#e-etranger ol { margin: 8px 0 6px; padding-left: 20px; }
#e-etranger li { margin: 4px 0; }
#e-etranger p { margin: 6px 0 0; }
.row-pret { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 1000px) {
  .e-personnes { grid-template-columns: 1fr; }
  .row-autres, .row-charges, .row-personne { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 520px) {
  .row-personne, .row-autres, .row-charges { grid-template-columns: 1fr; }
}
h3.premier { margin-top: 0; }
.btn.petit { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
.e-reprise { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
table.plan-table tr.hl td { background: var(--accent-soft); font-weight: 600; }
table.plan-table tr.total td { font-weight: 650; border-top: 2px solid var(--border-fort); }
details.e-autres { margin-top: 10px; }
details.e-autres summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 8px 0; }
.aides { margin-top: 18px; }
.card.aide { margin: 0; }
.card.aide h3 { margin-top: 0; font-size: 16px; }
.card.aide .chiffre { font-family: var(--serif); font-size: 27px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.card.aide .sous { margin: 4px 0 12px; font-size: 13.5px; color: var(--muted); }
.card.aide p { font-size: 14px; margin: 0 0 10px; }
.card.aide h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.card.aide ul { margin: 0; padding-left: 18px; font-size: 14px; }
.card.aide li { margin: 3px 0; }
.card.aide .liens { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; }
.card.aide .liens a, .card.aide .liens button { font-size: 13.5px; }
.card.aide .liens button { background: none; border: 0; padding: 0; margin: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 13.5px; text-decoration: underline; }
.dossier { margin-top: 8px; }
.tableau-titre { margin: 30px 0 0; }
.tableau-titre > h3 { margin: 0 0 10px; }
.tableau-titre > .table-wrap { margin-top: 0; }
.aides .aides-locatif { grid-column: 1 / -1; margin: 0; }

/* Rangee de saisie du simulateur. Quatre colonnes egales donnaient a « 12 mois »
   la meme largeur qu'a un libelle de soixante caracteres : la premiere flottait
   dans le vide, la derniere se repliait sur trois lignes. Chaque colonne est
   donc calibree sur ce qu'elle recoit. */
.row-champs {
  grid-template-columns:
    minmax(140px, 1fr) minmax(140px, 1fr) minmax(104px, .62fr) minmax(170px, 1.25fr);
}
@media (max-width: 900px) {
  .row-champs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.check label {
  margin: 0; color: var(--text-2); font-size: 14.5px;
  flex: 1 1 14ch; min-width: 0; align-self: stretch;
  display: flex; align-items: center; cursor: pointer;
}
.search-bar { position: relative; margin-bottom: 26px; max-width: 580px; }
.search-bar input { padding-left: 44px; height: 50px; border-radius: 14px; }
.search-bar::before {
  content: "⌕"; position: absolute; left: 16px; top: 50%; transform: translateY(-54%);
  color: var(--muted); font-size: 21px; pointer-events: none;
}

/* ---------- Indicateurs ---------- */

.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); margin: 24px 0; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 18px 20px; box-shadow: var(--ombre-s);
}
.kpi .k { font-size: var(--micro); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.kpi .v { font-family: var(--serif); font-size: 31px; line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums; }
.kpi.hl {
  background: linear-gradient(145deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 30%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.kpi.hl .v { color: var(--accent); }

/* Barre de repartition du salaire */
.repartition { margin: 8px 0 22px; }
.barre { display: flex; height: 15px; border-radius: 999px; overflow: hidden; box-shadow: var(--ombre-s); }
.barre span { display: block; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.barre .net { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.barre .impot { background: color-mix(in srgb, var(--accent-3) 72%, transparent); }
.barre .cotis { background: var(--border-fort); }
.legende { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* ---------- Assistant ---------- */

.chat-wrap { display: flex; flex-direction: column; height: min(72vh, 660px); padding: 0; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 15px; }
.msg {
  max-width: 74%; padding: 14px 18px; border-radius: 19px;
  white-space: pre-wrap; font-size: 15px; line-height: 1.62;
  animation: bulle .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bulle { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
.msg.bot { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 6px; align-self: flex-start; color: var(--text-2); }
.msg.me {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
  color: var(--surface); border-bottom-right-radius: 6px; align-self: flex-end; box-shadow: var(--ombre-s);
}
.msg .srcs { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12.5px; }
.msg .srcs strong { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: var(--micro); margin-bottom: 5px; }
.msg .srcs a { display: block; margin: 3px 0; }
.points span {
  display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%;
  background: var(--muted); animation: rebond 1.3s infinite;
}
.points span:nth-child(2) { animation-delay: .18s; }
.points span:nth-child(3) { animation-delay: .36s; }
@keyframes rebond { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.chip {
  border: 1px solid var(--border-fort); background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13.5px; transition: all .16s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.chat-bar {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.chat-bar input { flex: 1 1 12rem; min-width: 0; }
.chat-bar .btn { flex: 0 0 auto; }
.badge {
  font-size: var(--micro); padding: 4px 11px; border-radius: 999px; font-weight: 620;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  vertical-align: middle; text-transform: uppercase; letter-spacing: .8px;
}
.badge.on { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); }

/* ---------- Frise ---------- */

.tl { position: relative; margin: 34px 0 0 12px; padding-left: 34px; }
.tl::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2) 60%, transparent); border-radius: 2px; }
.tl .step { position: relative; padding-bottom: 38px; }
.tl .step::before {
  content: ""; position: absolute; left: -41px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent);
}
.tl h3 { margin: 0 0 11px; font-size: 19px; font-family: var(--serif); font-weight: 400; letter-spacing: -.2px; }
.tl ul { margin: 0; padding-left: 21px; }
.tl li { margin: 7px 0; color: var(--text-2); }

/* ---------- Detail de fiche ---------- */

.detail-hero { position: relative; margin: 0 -24px 30px; height: 300px; overflow: hidden; border-radius: 0 0 var(--r-l) var(--r-l); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,10,19,.22), rgba(5,10,19,.88));
}
.detail-hero .titre {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 0 24px 28px; color: #fff;
}
.detail-hero .titre h1 { color: #fff; margin: 0; text-shadow: 0 3px 34px rgba(0,0,0,.45); }
.detail-hero .cat { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
/* Article sur deux colonnes : le texte, puis une colonne laterale collante */
.detail-corps {
  display: grid; gap: 52px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 310px;
}
.detail-texte > p { font-size: 17.2px; line-height: 1.78; margin: 0 0 22px; }
.detail-texte > p.chapo {
  font-size: 20px; line-height: 1.6; color: var(--muted);
  margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--border);
}
.detail-texte h2 {
  font-size: 22px; margin: 38px 0 14px; letter-spacing: -.2px;
}
.detail-texte h2:first-of-type { margin-top: 8px; }
.detail-cote { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.detail-cote .bloc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 19px 21px; box-shadow: var(--ombre-s);
}
.detail-cote .bloc h4 {
  margin: 0 0 12px; font-size: var(--micro); text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--muted); font-weight: 650;
}
.detail-cote ul { margin: 0; padding-left: 18px; }
.detail-cote li { margin: 8px 0; font-size: 14.2px; color: var(--text-2); line-height: 1.55; }
.detail-cote .bloc.cle { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.detail-cote .bloc.cle h4 { color: var(--warn); }
.detail-cote a { display: block; margin: 7px 0; font-size: 14px; }
.lien-fiche {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-top: 1px solid var(--border); padding: 11px 0 0;
  margin-top: 11px; color: var(--accent); cursor: pointer; font: inherit; font-size: 14px;
}
.lien-fiche:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.lien-fiche:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .detail-corps { grid-template-columns: 1fr; gap: 34px; }
  .detail-cote { position: static; }
}
.back { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 14.5px; padding: 0; margin-bottom: 20px; font-weight: 550; }
.back:hover { text-decoration: underline; }
.srcbox {
  margin-top: 34px; padding: 18px 20px; border: 1px solid var(--border);
  border-radius: var(--r-m); background: var(--surface-2); font-size: 14px;
}
.srcbox strong { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: var(--micro); }

/* ---------- Divers ---------- */

.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 9px; }
.panel > .hint, .ct-note { margin-top: 16px; }
.credits { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }

@media (max-width: 720px) {
  .msg { max-width: 92%; }
  .hero { min-height: 500px; border-radius: 0 0 var(--r-m) var(--r-m); }
  .hero-in { padding: 60px 24px 34px; }
  .hero-stats { gap: 26px; }
  .hero-stats .s .n { font-size: 27px; }
  .detail-hero { height: 210px; }
}

/* ---------- Parcours personnalise ---------- */

.tl-bandeau { margin: 0 0 26px; }
.tl-compte {
  font-size: 11.5px; font-weight: 620; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px; padding: 3px 10px;
  vertical-align: 3px; margin-left: 8px; letter-spacing: .4px;
}
.tl ul.tl-items { list-style: none; padding-left: 0; }
.tl-item { display: flex; align-items: flex-start; gap: 11px; margin: 9px 0; }
.tl-case { display: inline-flex; flex: none; cursor: pointer; margin-top: 1px; }
.tl-item input[type="checkbox"] {
  width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer;
}
.tl-item.fait .tl-lien, .tl-item.fait span { text-decoration: line-through; color: var(--muted); }
.tl-lien {
  background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left;
  color: var(--text-2); cursor: pointer; text-decoration: none;
}
.tl-lien:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Comparateur de contrats ---------- */

.ctr-wrap .chat-log {
  flex: none; height: min(52vh, 460px); margin-top: 14px;
  border: 1px solid var(--border); border-radius: var(--r-s); background: var(--bg-alt);
}
.ctr-wrap .chat-bar { border-top: none; background: transparent; padding: 12px 0 0; }
.ctr-wrap .msg.bot { max-width: 100%; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.vcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: 12px 14px; font-size: 13.5px;
}
.vhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.vstatut {
  font-size: var(--micro); font-weight: 650; text-transform: uppercase; letter-spacing: .6px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.vstatut.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.vstatut.cond { color: var(--warn); background: var(--warn-soft); }
.vstatut.ko { color: #be123c; background: color-mix(in srgb, #be123c 11%, transparent); }
.vstatut.nf { color: var(--muted); background: var(--surface-2); }
.vcard.ko { border-color: color-mix(in srgb, #be123c 30%, var(--border)); }
.vcard.ok { border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
.vcle { margin: 0 0 6px; color: var(--text-2); }
.vinfo { margin: 0 0 4px; color: var(--muted); font-size: 12.5px; }
.vcard details { margin-top: 7px; }
.vcard summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.vcitation {
  margin: 8px 0 0; padding: 9px 12px; border-left: 3px solid var(--border-fort);
  color: var(--muted); font-size: 12.5px; font-style: italic;
}
.vsuite { margin: 13px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- Carte ---------- */

#carte-map {
  height: min(62vh, 520px); margin-top: 20px;
  border: 1px solid var(--border); border-radius: var(--r-m);
  background: var(--surface-2);
}

/* ---------- Assistant flottant ---------- */

#widget-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 25px; line-height: 1; color: var(--surface);
  display: grid; place-items: center;
  background: var(--accent);
  box-shadow: var(--ombre-m);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), background .16s;
}
#widget-btn:hover { transform: translateY(-2px); background: var(--text); }
#widget {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: min(390px, calc(100vw - 32px)); height: min(72vh, 580px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); box-shadow: var(--ombre-l);
  animation: bulle .25s cubic-bezier(.2,.8,.3,1) both;
}
#widget .w-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; color: var(--text); font-weight: 620; font-size: 14.5px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
#widget .w-head button {
  background: none; border: none; color: var(--muted); font-size: 21px; line-height: 1;
  cursor: pointer; padding: 0 3px; transition: color .16s;
}
#widget .w-head button:hover { color: var(--accent); }
#widget .chat-log { padding: 16px; gap: 12px; }
#widget .msg { max-width: 88%; font-size: 14px; padding: 11px 14px; }
#widget .chat-bar { padding: 11px 13px; }
@media (max-width: 560px) {
  #widget { right: 8px; bottom: 8px; height: min(80vh, 580px); }
}
#widget[hidden], #widget-btn[hidden] { display: none; }

/* ---------- Sous-onglets du simulateur ---------- */

.sous-onglets { display: flex; gap: 8px; margin: 0 0 22px; }
.sous-onglets button {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border-fort); background: var(--surface); color: var(--text-2);
  transition: all .16s;
}
.sous-onglets button:hover { border-color: var(--accent); color: var(--accent); }
/* La couleur de surface et non du blanc : en theme sombre l'accent devient un
   bleu clair, sur lequel un texte blanc ne se lit plus. */
.sous-onglets button.actif {
  background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600;
}

/* Le panneau Simulateur : quatre outils presentes comme des cartes, pas
   comme des pastilles, parce que chacun est une page a part entiere. */
.sim-choix { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin: 0 0 30px; }
.sim-choix button {
  font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border-fort); background: var(--surface); color: var(--text-2);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sim-choix button:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--ombre-m); }
.sim-choix button b { font-size: 15px; color: var(--text); }
.sim-choix button i { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.4; }
.sim-choix button.actif { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.sim-choix button.actif b { color: var(--accent); }
@media (max-width: 1000px) { .sim-choix { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sim-choix { grid-template-columns: 1fr; } }
h2.sim-titre { margin-top: 0; }

/* Onglets internes : une barre soulignee, collee sous l'en-tete, qui decoupe
   une longue page en sections sans en perdre le formulaire. */
.onglets-internes {
  position: sticky; top: var(--h-top); z-index: 5;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 26px 0 22px; padding: 6px 0 0;
  background: var(--bg); border-bottom: 1px solid var(--border-fort);
}
.onglets-internes::-webkit-scrollbar { display: none; }
.onglets-internes button {
  font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  padding: 10px 14px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-2);
  transition: color .16s, border-color .16s;
}
.onglets-internes button:hover { color: var(--accent); }
.onglets-internes button.actif { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
body.rail-ouvert .onglets-internes { z-index: 4; }

/* Lien discret vers une fiche depuis un formulaire */
.check .lien-fiche-inline { flex: 1 0 100%; margin-left: 28px; }
.lien-fiche-inline { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.lien-fiche-inline:hover { color: var(--accent); }

/* ---------- Barre de question de l'accueil ---------- */

.ask {
  margin: 6px 0 34px; padding: 34px 30px 26px;
  border-radius: var(--r-l);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface)),
    color-mix(in srgb, var(--accent-2) 7%, var(--surface)) 55%,
    color-mix(in srgb, var(--accent-3) 8%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--ombre-m);
}
.ask-titre {
  margin: 0 0 6px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.4px;
}
.ask-sous { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.ask-bar { display: flex; gap: 10px; }
.ask-bar input {
  flex: 1; font-size: 16.5px; padding: 15px 22px; border-radius: 999px;
  border: 1px solid var(--border-fort); background: var(--surface);
  box-shadow: var(--ombre-s);
}
.ask-bar .btn { border-radius: 999px; padding: 0 26px; font-size: 15px; }
.ask .chips { margin-top: 14px; }
.ask .chip { background: color-mix(in srgb, var(--surface) 72%, transparent); }
#accueil-resultats:not(:empty) { margin-top: 20px; }
@media (max-width: 560px) {
  .ask { padding: 24px 18px 20px; }
  .ask-bar { flex-direction: column; }
  .ask-bar .btn { padding: 13px 26px; }
}

/* ---------- Comparaisons standardisees ---------- */

.vert-carte { cursor: pointer; }
.vert-badge {
  display: inline-block; font-size: var(--micro); font-weight: 650;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.vert-badge.reel { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.vert-badge.demo { color: var(--warn); background: var(--warn-soft); }
.vert-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.vert-head h2 { margin: 0; }
.vert-pos { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 3px; }
#vert-table th.vert-col { min-width: 160px; }
#vert-table .col-gagnante { background: color-mix(in srgb, var(--ok) 10%, transparent); }
#ctr-vue .table-wrap { margin-top: 14px; }
.classement { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 260px; }
.cl-ligne { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.cl-rang { font-weight: 650; color: var(--muted); width: 26px; flex: none; }
.cl-nom { flex: 2; }
.cl-barre { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 70px; }
.cl-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cl-ligne.gagnant .cl-nom { font-weight: 650; color: var(--ok); }

/* ---------- Harmonie du widget ---------- */

#widget { width: min(410px, calc(100vw - 32px)); }
#widget .msg { font-size: 13.5px; line-height: 1.6; }
#widget .msg .srcs { font-size: 12px; }
#widget .chips { gap: 6px; }
#widget .chip { padding: 6px 12px; font-size: 12.5px; }
.ask .chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-cta { margin-top: 12px; }

/* ---------- FAQ ---------- */

h2.faq-groupe { margin: 40px 0 12px; font-size: clamp(20px, 2.4vw, 26px); }
h2.faq-groupe:first-child { margin-top: 24px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s);
  margin: 8px 0; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 14px 18px; font-weight: 550; font-size: 15px;
  list-style: none; position: relative; padding-right: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 19px; font-weight: 400; transition: transform .18s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-corps { padding: 14px 18px 16px; }
.faq-corps p { margin: 0 0 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.faq-corps .chips { margin-top: 10px; }
.faq-sources { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Suggestions de questions sous la recherche de l'accueil */
.ask-faq { grid-column: 1 / -1; margin-top: 4px; }

/* Cartes d'outils officiels (onglet Carte) */
#carte-outils .qcard { cursor: pointer; display: flex; flex-direction: column; }
.outil-lien { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 550; text-decoration: none; }
.outil-lien:hover { text-decoration: underline; }

/* ---------- Comparateur habitation ---------- */

.biens-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px; }
.bien {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-s); transition: background .14s;
}
.bien:hover { background: var(--surface-2); }
.bien input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--accent); cursor: pointer; }
.bien-nom { display: block; font-size: 14.5px; color: var(--text); font-weight: 500; }
.bien-aide { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

.reco-carte {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 16px 18px; margin: 10px 0;
}
.reco-carte.premier { border-color: color-mix(in srgb, var(--ok) 45%, transparent); box-shadow: var(--ombre-s); }
.reco-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.reco-rang { font-weight: 700; color: var(--muted); font-size: 14px; }
.reco-nom { font-weight: 650; font-size: 16px; flex: 1; }
.reco-pct { font-weight: 700; font-size: 20px; }
.reco-pct.ok { color: var(--ok); } .reco-pct.part { color: var(--warn); } .reco-pct.ko { color: #be123c; }
.reco-barre { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 10px; }
.reco-barre i { display: block; height: 100%; border-radius: 99px; }
.reco-barre i.ok { background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 60%, var(--accent-2))); }
.reco-barre i.part { background: var(--warn); }
.reco-barre i.ko { background: #be123c; }
.reco-ok { margin: 0; font-size: 13.5px; color: var(--ok); }
.reco-lacunes summary { cursor: pointer; font-size: 13.5px; color: var(--accent); }
.lacune { margin: 9px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); }
.lacune-t { margin: 0; font-size: 13.5px; color: var(--text-2); }
.lacune-s { color: #be123c; font-weight: 600; }
.lacune-c { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.55; }

table.mrh-table { width: 100%; }
table.mrh-table td.num { text-align: center; font-size: 13px; }
.cell-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); font-weight: 600; }
.cell-cond { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-weight: 600; }
.cell-part { color: var(--warn); background: var(--warn-soft); font-weight: 600; }
.cell-ko { color: #be123c; background: color-mix(in srgb, #be123c 8%, transparent); font-weight: 600; }
.cell-nf { color: var(--muted); }
.mat-hits { display: block; font-weight: 600; }
.mat-page { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.mrh-sources-liste { color: var(--text-2); font-size: 14px; }
.mrh-sources-liste li { margin: 5px 0; }

/* Ce que contient une comparaison, dit avant d'y entrer. */
.vert-quoi {
  display: block; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.vert-carte { display: flex; flex-direction: column; }
.vert-carte p { flex: 1; }

/* ---------- Commande du tableau ---------- */
/* Volontairement different d'une conversation : l'application n'a qu'un seul
   chatbot, l'assistant. Ici, une ligne de commande et un journal. */

.ctr-cmd { margin-top: 4px; }
.ctr-cmd-label {
  display: block; font-size: var(--micro); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin-bottom: 8px;
}
.ctr-cmd .chat-bar { margin: 0; }
.ctr-cmd .chips { margin-top: 10px; }
.ctr-journal {
  margin-top: 14px; max-height: 260px; overflow-y: auto;
  border-left: 2px solid var(--border); padding-left: 14px;
}
.ctr-journal:empty { display: none; }
.jr { font-size: 13.5px; line-height: 1.6; }
.jr-cmd {
  margin-top: 14px; color: var(--text); font-weight: 600;
  font-size: 13px; letter-spacing: .1px;
}
.jr-cmd::before { content: "› "; color: var(--accent); font-weight: 700; }
.jr-cmd:first-child { margin-top: 0; }
.jr-res { color: var(--text-2); margin-top: 4px; }
.jr-res .chips { margin-top: 8px; }
.jr-res .vgrid { margin-top: 10px; }

/* ---------- Questionnaire des verticales ---------- */

.etapes-tete { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.etapes-num {
  font-size: var(--micro); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 650; white-space: nowrap;
}
.etapes-jauge { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.etapes-jauge i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.etapes-q { font-size: 16px; color: var(--text); margin: 0 0 14px; font-weight: 550; }
.etapes-rappel { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.etapes-rl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13px; margin: 4px 0; }
.etapes-rq { color: var(--muted); }
.etapes-ra { color: var(--text); font-weight: 600; }
.etapes-refaire {
  border: 0; background: none; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 12px; padding: 0; text-decoration: underline;
}
.etapes-fin h4 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }

/* ---------- Reprise sur l'accueil ---------- */

.reprise {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px 24px; margin: 40px 0 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 22px 24px; box-shadow: var(--ombre-s);
}
.reprise-txt h3 { margin: 0 0 5px; font-size: 17px; }
.reprise-txt p { margin: 0; font-size: 14px; }
.reprise-jauge {
  grid-column: 1 / -1; height: 6px; border-radius: 99px;
  background: var(--surface-2); overflow: hidden;
}
.reprise-jauge i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 700px) {
  .reprise { grid-template-columns: 1fr; }
  .reprise .btn { width: 100%; }
}

#fiches-themes { margin: -8px 0 22px; }

/* ---------- Classe d'impot et simulateurs officiels ---------- */

tr.ligne-choisie td { background: var(--accent-soft); font-weight: 600; }
td.gain { color: var(--ok); font-weight: 650; }

.cl-titre {
  font-family: var(--serif); font-size: 27px; margin: 0 0 10px;
  color: var(--text); letter-spacing: -.3px;
}
.off-groupe { margin: 30px 0 14px; font-size: 17px; font-weight: 650; }
.off-groupe:first-child { margin-top: 6px; }
.off-carte { display: block; text-decoration: none; color: inherit; }
.off-carte h3 { color: var(--text); }
.off-carte:hover h3 { color: var(--accent); }
.off-org {
  display: block; font-size: var(--micro); font-weight: 650;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--muted); margin-bottom: 8px;
}
/* Ces liens sortent du guide : on le montre plutot que de le laisser decouvrir. */
.off-carte h3::after { content: " ↗"; color: var(--muted); font-weight: 400; }

/* ---------- Parametres ---------- */

table.par-stock { font-size: 13.5px; }
table.par-stock td { padding: 9px 12px; }
table.par-stock td.num { text-align: right; white-space: nowrap; }
#par-theme .chip { font-variant-numeric: tabular-nums; }

/* ---------- Tableau sur mesure ---------- */

.sm-barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin: 20px 0 12px;
}
.sm-cols, .sm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.sm-cols-t {
  font-size: var(--micro); letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin-right: 3px;
}
.chip.actif {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
table.sm-table { border-collapse: collapse; }
table.sm-table th, table.sm-table td {
  vertical-align: top; border-bottom: 1px solid var(--border); padding: 11px 12px;
}
table.sm-table thead th {
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
}
.sm-lib { min-width: 190px; max-width: 260px; }
.sm-lib strong { display: block; font-size: 14px; line-height: 1.4; }
.sm-type { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sm-poids {
  margin-top: 8px; font-size: 12px; padding: 4px 6px; width: auto;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--surface-2); color: var(--text-2);
}
.sm-cell { min-width: 150px; font-size: 13px; }
.sm-edition {
  font-size: var(--micro); font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--muted); margin-top: 3px;
}
.sm-sum-ok { color: var(--ok) !important; }
.sm-sum-arev { color: var(--muted) !important; }
.sm-verif { font-size: 11px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.sm-reserves { margin-top: 14px; }
.sm-info { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.sm-det { margin-top: 7px; }
.sm-det summary {
  cursor: pointer; font-size: 11.5px; color: var(--accent); list-style: none;
}
.sm-det summary::-webkit-details-marker { display: none; }
.sm-det summary::before { content: "▸ "; }
.sm-det[open] summary::before { content: "▾ "; }
.sm-det .vcitation { font-size: 11.5px; margin-top: 6px; }
.sm-x { width: 38px; text-align: right; }
.sm-retirer {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1;
}
.sm-retirer:hover { color: #be123c; border-color: #be123c; }
tr.sm-score td { background: var(--surface-2); border-top: 2px solid var(--border-fort); }
.sm-pct { font-size: 19px; font-family: var(--serif); font-weight: 400; }
.sm-pct.sm-top { color: var(--ok); }
.sm-vide { margin-top: 4px; }
.sm-glisser { display: none; }
@media (max-width: 900px) { .sm-glisser { display: block; } }
.sm-choix { margin-top: 18px; }
.sm-choix summary { cursor: pointer; font-size: 13.5px; color: var(--accent); font-weight: 550; }
.sm-choix-corps { margin-top: 12px; }
.sm-choix-corps h4 {
  margin: 14px 0 7px; font-size: var(--micro); letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); font-weight: 650;
}

.sin-groupe { margin: 26px 0 8px; font-size: 17px; font-weight: 600; font-family: var(--sans); }
.sin-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s);
  margin: 7px 0; overflow: hidden;
}
.sin-item summary {
  cursor: pointer; padding: 13px 16px; list-style: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sin-item summary::-webkit-details-marker { display: none; }
.sin-titre { flex: 1; font-size: 14.5px; font-weight: 500; min-width: 200px; }
.sin-pastilles { display: flex; gap: 5px; }
.pastille {
  width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.pastille.ok { background: var(--ok); }
.pastille.cond { background: var(--warn); }
.pastille.ko { background: #be123c; }
.pastille.nf { background: var(--muted); }
.sin-item[open] summary { border-bottom: 1px solid var(--border); }
.sin-corps { padding: 14px 16px 16px; }
.sin-question { margin: 0 0 12px; font-size: 14px; color: var(--muted); font-style: italic; }

.constat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 18px 20px; margin: 12px 0;
}
.constat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.constat-num {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px;
}
.constat-head h3 { margin: 0; font-size: 16px; }
.constat p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; }
.constat-portee {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); background: var(--surface-2); padding: 4px 10px; border-radius: 999px;
}
#mrh-methode h3 { margin-top: 22px; }
#mrh-methode p { font-size: 14.5px; line-height: 1.7; }
.lead .badge { margin-right: 8px; }

/* ---------- Carte : comparaison d'adresses ---------- */

.c-sep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
#c-liste { margin-top: 14px; }
.adr-chip { display: inline-flex; align-items: center; gap: 8px; }
.adr-pastille {
  width: 20px; height: 20px; border-radius: 6px; flex: none; color: #fff;
  font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
#c-stats { margin-top: 26px; }
#c-stats h3 { margin-top: 0; }
table.carte-table th.num { vertical-align: bottom; }
table.carte-table th .adr-pastille { margin-bottom: 5px; }
.carte-commune { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.carte-poi { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 3px; }
td.sous-ligne { color: var(--muted); font-size: 12.5px; }

/* ---------- Assistant ancre en panneau lateral ---------- */
/* Sous 1100 px, le rail n'a pas la place : l'assistant reste une bulle.
   Au-dessus, il s'ancre a droite et pousse le contenu au lieu de le couvrir. */

@media (min-width: 1100px) {
  #widget {
    top: 0; right: 0; bottom: 0; left: auto;
    width: var(--rail-w, 400px); height: 100vh; max-height: none;
    border-radius: 0; border-width: 0 0 0 1px;
    box-shadow: -14px 0 34px -22px rgba(11,18,32,.28);
    animation: rail .22s cubic-bezier(.2,.8,.3,1) both;
  }
  /* Poignee de redimensionnement sur le bord gauche du panneau */
  #widget-poignee {
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    margin-left: -5px; cursor: col-resize; z-index: 3;
    display: block; background: transparent;
  }
  #widget-poignee::after {
    content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 42px; border-radius: 2px; background: var(--border-fort);
    opacity: 0; transition: opacity .15s;
  }
  #widget-poignee:hover::after, body.rail-redim #widget-poignee::after { opacity: 1; }
  body.rail-redim { cursor: col-resize; user-select: none; }
  /* Pendant le glissement, aucune transition : le suivi doit etre immediat */
  body.rail-redim, body.rail-redim #widget { transition: none !important; }
  @keyframes rail { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* Le contenu se decale : rien n'est masque par le panneau. La marge sur le
     corps retrecit la page entiere, et main, centre par ses marges auto, se
     recentre dans la place restante. Le panneau, en position fixe, reste
     colle au bord de la fenetre. */
  body.rail-ouvert { margin-right: var(--rail-w, 400px); }
  body.rail-ouvert #widget-btn { display: none; }
  /* L'en-tete est fixe : il ignore la marge du corps, son bord droit doit donc
     s'arreter lui-meme au panneau, sinon il passe dessous. */
  body.rail-ouvert header.top { right: var(--rail-w, 400px); }

  #widget .w-head { padding: 15px 18px; }
  #widget .w-head button { font-size: 24px; }
  #widget .msg { max-width: 92%; }
}

/* Transition douce du contenu quand le panneau s'ouvre ou se ferme. */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  body { transition: margin-right .22s cubic-bezier(.2,.8,.3,1); }
}

/* Surlignage du passage qui repond, dans la fiche ouverte */
mark.surligne {
  background: color-mix(in srgb, var(--accent-2) 30%, transparent);
  color: inherit; padding: 1px 3px; border-radius: 4px;
}
mark.surligne.pulse { animation: surlign 1.5s ease-out; }
@keyframes surlign {
  0%, 100% { background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
  25% { background: color-mix(in srgb, var(--accent-2) 72%, transparent); }
}
@media (prefers-reduced-motion: reduce) { mark.surligne.pulse { animation: none; } }

/* Le badge de mode ne se coupe plus en deux lignes */
.badge { white-space: nowrap; display: inline-block; }

/* Titre avec une action a droite */
.titre-action {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.titre-action h1 { margin-bottom: 0; }

/* Actions de la barre du panneau */
.w-actions { display: inline-flex; align-items: center; gap: 2px; }
#widget-plein { font-size: 16px; }
@media (max-width: 1099px) { #widget-plein { display: none; } }

/* ---------- Responsive : ecrans etroits ---------- */

/* Les rangees d'onglets secondaires passent a la ligne au lieu de deborder */
.sous-onglets { flex-wrap: wrap; }




@media (max-width: 759px) {
  main { padding: 0 16px 70px; }
  .detail-hero { margin: 0 -16px 24px; }
  .ask { padding: 22px 16px 18px; border-radius: var(--r-m); }
  .hero { min-height: min(64vh, 460px); border-radius: var(--r-m); }
  .hero-in { padding: 60px 18px 30px; }
  .hero-stats { gap: 22px; margin-top: 28px; padding-top: 18px; }
  .hero-stats .s .n { font-size: 26px; }

  .row { flex-direction: column; align-items: stretch; }
  .row > div { width: 100%; }
  .card { padding: 16px; }
  .sous-onglets button { padding: 8px 14px; font-size: 13.5px; }
  .biens-grille { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  #carte-map { height: min(52vh, 380px); }

  /* Les tableaux larges defilent dans leur cadre, la page ne bouge pas */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.mrh-table { min-width: 560px; }
  table.sm-table { min-width: 680px; }
  .sm-barre { flex-direction: column; align-items: stretch; }
  .detail-corps { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .kpis { grid-template-columns: 1fr; }
  .ask-titre { font-size: 24px; }
  .hero h1 { font-size: 34px; }
  .sin-item summary { padding: 12px 13px; }
  .sin-titre { min-width: 0; }
}

/* Garde-fou general : aucun element ne pousse la page horizontalement. Sur
   html seulement : la regle se propage a la fenetre, et le corps reste un bloc
   ordinaire. Posee aussi sur body, elle en faisait un conteneur de defilement
   et annulait tout position: sticky de la page, dont l'en-tete du comparateur
   de communes. */
html { overflow-x: hidden; }

/* ---------- Comparer des logements ----------
   Deux colonnes qui ne se melangent pas : a gauche les logements enregistres
   et leurs notes, a droite la carte et ses seules commandes d'affichage. La
   comparaison vient dessous, sur toute la largeur. */
.lo-haut { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.lo-col { padding: 20px; }
.lo-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lo-titre h2 { margin: 0; font-size: 20px; }
.lo-ajout label, .lo-repere label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.lo-ligne { display: flex; gap: 8px; }
.lo-ligne input { flex: 1 1 auto; min-width: 0; }
.lo-ligne .btn { flex: none; width: auto; white-space: nowrap; }
#c-liste { display: grid; gap: 10px; margin: 14px 0 0; }
.lo-vide { margin: 0; font-size: 13.5px; }
.lo-fiche { border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px 12px; background: var(--surface); }
.lo-fiche-tete { display: flex; align-items: center; gap: 9px; }
.lo-fiche-nom { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lo-fiche-nom b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-fiche-nom span { font-size: 12px; color: var(--muted); }
.lo-pin {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: #0b0f16; color: #fff; font: 700 12.5px/1 inherit;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(11,15,22,.35);
}
.lo-mini {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); flex: none;
  border-radius: 8px; padding: 5px 9px; font: 600 12px/1 inherit; cursor: pointer;
}
.lo-mini:hover { color: var(--accent); border-color: var(--accent); }
.lo-champs { display: grid; gap: 7px; margin-top: 10px; }
.lo-champ { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; }
.lo-champ span { font-size: 12px; color: var(--muted); font-weight: 600; }
.lo-champ input { min-height: 0; height: 34px; padding: 0 10px; font-size: 13.5px; border-radius: 9px; }
.lo-repere { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.lo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.lo-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.lo-cmd-t { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lo-cats { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 1 auto; }
.lo-cat { display: inline-flex; align-items: center; gap: 7px; }
.lo-pt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.lo-rayon { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lo-rayon select { width: auto; min-height: 0; height: 38px; padding: 0 30px 0 10px; font-size: 13.5px; }
.lo-col-carte #carte-map { margin: 0; height: min(70vh, 600px); }

#c-etat { margin: 14px 0 0; font-size: 13.5px; }
#c-stats h2 { margin: 26px 0 12px; }
.lo-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.lo-wrap table.carte-table { width: max-content; min-width: 100%; margin: 0; }
.lo-wrap table.carte-table th, .lo-wrap table.carte-table td { min-width: 168px; }
.lo-wrap table.carte-table th:first-child, .lo-wrap table.carte-table td:first-child {
  position: sticky; left: 0; z-index: 1; min-width: 200px; max-width: 240px; text-align: left;
  background: var(--surface); box-shadow: 1px 0 0 var(--border), 6px 0 8px -6px rgba(11,15,22,.2);
}
.lo-wrap th .lo-pin { margin-bottom: 6px; }
tr.lo-section td {
  padding-top: 16px; padding-bottom: 5px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600; background: var(--surface);
}
tr.lo-section td span { position: sticky; left: 12px; display: inline-block; }
.lo-campus { font-size: 11.5px; font-weight: 600; color: #0f8b57; margin-top: 3px; }

@media (max-width: 980px) {
  .lo-haut { grid-template-columns: 1fr; }
  .lo-col-carte #carte-map { height: min(56vh, 420px); }
}
@media (max-width: 560px) {
  .lo-champ { grid-template-columns: 1fr; gap: 3px; }
  .lo-wrap table.carte-table th, .lo-wrap table.carte-table td { min-width: 132px; }
  .lo-wrap table.carte-table th:first-child, .lo-wrap table.carte-table td:first-child { min-width: 128px; max-width: 150px; }
}

/* Plein ecran : la colonne de la carte entiere, commandes comprises. */
.lo-plein { margin-left: auto; }
.lo-col-carte.plein {
  position: fixed; inset: 0; z-index: 4000; margin: 0; padding: 12px 14px 14px;
  background: var(--bg, #fafafa); display: flex; flex-direction: column;
}
.lo-col-carte.plein .lo-cmd { flex: none; }
.lo-col-carte.plein #carte-map { flex: 1 1 auto; height: auto; min-height: 0; margin: 0; }
.lo-col-carte.plein > .hint { display: none; }

/* Les cartes Leaflet empilent leurs couches jusqu'a z-index 1000, ce qui les
   faisait passer devant l'en-tete fixe (z-index 60) des qu'on defilait. Chaque
   carte forme son propre contexte d'empilement : ses couches se classent
   entre elles, et la carte entiere reste sous l'en-tete. */
.leaflet-container { isolation: isolate; }

/* ---------- Cibles tactiles ---------- */
/* Au doigt, une case a cocher de 17 px se rate. On agrandit la case et surtout
   la zone cliquable autour, sans toucher au rendu a la souris. */

@media (pointer: coarse) {
  .check {
    min-height: 44px; padding: 6px 8px; margin: 0 -8px;
    border-radius: var(--r-s); gap: 12px;
  }
  .check input[type="checkbox"] { width: 22px; height: 22px; }
  .check label { font-size: 15px; min-height: 44px; }

  .bien { min-height: 52px; padding: 12px; }
  .bien input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; }

  .tl-item { margin: 2px 0; }
  /* La case garde sa taille, c'est son entourage qui devient prenable */
  .tl-case { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin: -10px 0 -10px -10px; }
  .tl-item input[type="checkbox"] { width: 24px; height: 24px; margin: 0; }
  .tl-lien, .tl-item span { min-height: 40px; display: flex; align-items: center; }

  /* Liens de sources et de fiches : une ligne de texte seule est trop fine */
  .faq-sources a, .detail-cote .bloc a, .lien-fiche, .lien-fiche-inline,
  .msg .srcs a, .srcbox a, .mrh-sources-liste a {
    display: inline-block; padding: 8px 0; min-height: 40px;
  }
  .faq-item summary { min-height: 52px; display: flex; align-items: center; }
  .sin-item summary { min-height: 52px; }
  /* Tout resume repliable est une commande, il lui faut sa hauteur au doigt */
  summary { min-height: 44px; display: flex; align-items: center; }

  .chip { min-height: 40px; padding: 10px 16px; }
  .btn { min-height: 46px; }
  .sous-onglets button { min-height: 44px; }

  /* A bout de bras, une capitale de 11 px se devine plus qu'elle ne se lit */
  :root { --micro: 12px; }

  /* La zone de saisie ne doit pas declencher le zoom sur iOS : 16 px minimum */
  input, select, textarea { font-size: 16px; }
}

/* Cibles tactiles restantes de l'onglet Carte */
@media (pointer: coarse) {
  .outil-lien { min-height: 40px; display: flex; align-items: center; }
  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    width: 42px !important; height: 42px !important;
    line-height: 40px !important; font-size: 21px !important;
  }
}