/* ============================================================
   Épargne et retraite, rubrique du site Vivre au Luxembourg
   ============================================================
   Feuille propre a cette rubrique, qui vit dans sa propre page.
   Elle reprend les jetons du guide (palette, rayons, typographie,
   theme sombre) : une rubrique du site doit en avoir l'air. La
   barre vient de ../app/entete.css, commune a tout le site.
   ============================================================ */

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

/* ------------------------------------------------------------
   Palette
   ------------------------------------------------------------
   Couleurs et typographie relevees sur le site institutionnel du
   groupe : bleu #2957c8, marine #01213c, gris #1a1d23 et #67768e,
   fonds #f8f9fc et #eaeefa, Barlow pour les titres, Inter pour le
   texte, rayons courts de 4 et 8 px.

   La reprise s'arrete a la palette et aux polices. Aucun logo,
   aucun nom, aucune signature : ce site est une demonstration sur
   un dispositif fiscal public, il ne doit passer pour la page
   officielle de personne.
   ------------------------------------------------------------ */

:root {
  /* Les valeurs de app/styles.css du guide. Changer une couleur du site veut
     dire la changer aux deux endroits. */
  --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-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);
  --r-s: 12px;
  --r-m: 18px;
  --max: 1200px;
  --micro: 11px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titre: var(--serif);
  /* Propres a la rubrique */
  --profond: #01213c;
  --h-champ: 44px;
  /* L'echelle des graphiques, du plus clair au plus dense, ancree sur l'accent :
     le taux le plus eleve porte la couleur la plus dense. */
  --serie-1: #a9c4ea; --serie-2: #6c9bd8; --serie-3: #0a4fa8; --serie-4: #05295c;
}
/* Le theme sombre du guide, suivi ici : le reglage se fait dans ses parametres
   et vaut pour tout le site. */
: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-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);
  /* Sur fond sombre, la couleur la plus dense est la plus claire. */
  --serie-1: #27466f; --serie-2: #3b6fae; --serie-3: #5fa8f5; --serie-4: #bfe0ff;
  color-scheme: dark;
}
@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-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);
    --serie-1: #27466f; --serie-2: #3b6fae; --serie-3: #5fa8f5; --serie-4: #bfe0ff;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------- Les icones ----------
   Une icone est un mot de la phrase, pas une image posee a cote : elle
   s'aligne sur la ligne de base du texte et en prend la couleur, par
   currentColor. Sa taille suit celle du texte, en em et non en pixels, ce qui
   la garde juste quand la police grossit sur telephone. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 1.15em; height: 1.15em; flex: none;
  vertical-align: -.18em; color: inherit; pointer-events: none;
}
[hidden] { display: none !important; }
/* « clip » et non « hidden » : hidden fait du corps un conteneur de
   defilement, et un element sticky pose dedans se cale alors sur un conteneur
   qui ne defile jamais. Il glissait donc avec la page au lieu de rester en
   haut. « clip » coupe le debordement sans creer ce conteneur. */
html, body { overflow-x: clip; }
/* La colonne de page contient ses marges : sans quoi celle du premier titre
   ressortirait au-dessus d'elle et le defilement commencerait de travers. */
.page { display: flow-root; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }

/* ---------- La barre, et la rubrique dans le site ---------- */

/* La barre est celle de tout le site (../app/entete.css). Dans cette page a
   volet, elle colle en haut de la colonne de page au lieu d'etre fixe : en deux
   colonnes, elle s'arrete ainsi d'elle-meme au bord du volet. */
header.top { position: sticky; top: 0; z-index: 60; }

.rubrique {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 18px; flex-wrap: wrap; margin: 26px 0 0;
}
.fil { margin: 0; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.fil b { color: var(--text); font-weight: 600; }
/* Les onglets de la rubrique ont l'allure des sous-onglets du guide. */
nav.sous-nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav.sous-nav button {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 8px 17px; border-radius: 999px;
  border: 1px solid var(--border-fort); background: var(--surface); color: var(--text-2);
  transition: border-color .16s, color .16s, background .16s;
}
nav.sous-nav button:hover { border-color: var(--accent); color: var(--accent); }
nav.sous-nav button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600;
}
@media (max-width: 760px) {
  nav.sous-nav { gap: 6px; }
  nav.sous-nav button { padding: 7px 13px; font-size: 13.5px; }
}

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

main { max-width: var(--max); margin: 0 auto; padding: 0 max(22px, env(safe-area-inset-left)) 80px; }
h1 { font-family: var(--titre); font-weight: 400; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.1; margin: 40px 0 16px; letter-spacing: -.4px; }
h2 { font-family: var(--titre); font-weight: 400; font-size: clamp(22px, 2.8vw, 30px); margin: 54px 0 14px; letter-spacing: -.2px; }
h3 { font-size: 16.5px; margin: 20px 0 8px; font-weight: 620; }
p { color: var(--text-2); }
/* Aucun texte n'est bride en largeur : un paragraphe plus etroit que la carte
   ou le tableau qu'il surmonte se lit comme un defaut d'affichage. C'est la
   colonne de la page qui regle la longueur de ligne. */
.lead { color: var(--muted); font-size: 17px; margin: 0 0 26px; }
.lead.small { font-size: 15px; }
.hint { font-size: 13px; color: var(--muted); margin-top: 9px; }

.hero { padding: 20px 0 8px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.btn {
  border: 1px solid var(--accent); background: var(--accent); color: var(--surface);
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600;
  transition: background .16s, border-color .16s, transform .16s;
}
.btn:hover { background: var(--text); border-color: var(--text); transform: translateY(-1px); }
.btn.contour { background: none; color: var(--accent); }
.btn.contour:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 22px 24px; box-shadow: var(--ombre-s); margin: 20px 0;
}
.row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 1 1 180px; min-width: 0; }
label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
input:not([type="checkbox"]), select {
  width: 100%; height: var(--h-champ); padding: 0 13px; margin: 0;
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--border-fort); border-radius: var(--r-s);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; line-height: normal;
  transition: border-color .16s, box-shadow .16s;
}
select { padding-right: 34px; }

/* « appearance: none » emporte le chevron du select. Une variable CSS ne se
   resout pas dans un url(), et un data URI est charge comme un document
   separe : ni var(), ni currentColor n'y arrivent. Le chevron est donc trace
   au trait sur le conteneur du champ, ou il suit le theme sans effort. */
.champ-sel { position: relative; }
.champ-sel::after {
  content: ""; position: absolute; right: 15px; bottom: 18px;
  width: 8px; height: 8px; pointer-events: none;
  border-right: 1.7px solid var(--accent);
  border-bottom: 1.7px solid var(--accent);
  transform: rotate(45deg);
}
input:not([type="checkbox"]):focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* La note d'un champ tient sous lui, sans pousser la ligne : elle
   n'apparait que lorsqu'une valeur a ete ramenee dans les bornes. */
.champ-note { margin: 6px 0 0; font-size: 12.5px; color: var(--warn); }
.kpi.vide .v { color: var(--muted); }

.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; flex: 1 1 14ch; min-width: 0; display: flex; align-items: center; color: var(--text-2); font-weight: 400; font-size: 14.5px; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.chip {
  border: 1px solid var(--border-fort); background: var(--surface); color: var(--text-2);
  padding: 8px 15px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px;
  transition: color .16s, border-color .16s, background .16s;
}
.chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip.actif { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.notice {
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--r-s) var(--r-s) 0; padding: 16px 20px; margin: 24px 0;
}
.notice.small { font-size: 14px; }
.badge {
  display: inline-block; font-size: var(--micro); padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .8px; font-weight: 620; white-space: nowrap;
  vertical-align: middle;
}
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 18px 0; }
.qcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: 18px 20px; cursor: pointer; box-shadow: var(--ombre-s);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.qcard:hover { transform: translateY(-3px); box-shadow: var(--ombre-m); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
/* Le carre teinte donne a l'icone le poids d'un titre. Sans lui, elle se lit
   comme une decoration posee a cote du texte. */
.qcard-ic {
  display: grid; place-items: center;
  width: 37px; height: 37px; border-radius: var(--r-s); margin-bottom: 13px;
  background: var(--accent-soft); color: var(--accent); font-size: 18px;
}
.qcard h3 { margin: 0 0 6px; }
.qcard p { margin: 0; font-size: 14px; color: var(--muted); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); margin: 18px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th { font-weight: 620; color: var(--muted); font-size: var(--micro); text-transform: uppercase; letter-spacing: .9px; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.total td { background: var(--surface-2); border-top: 2px solid var(--border-fort); font-weight: 600; }

.search-bar { margin-bottom: 18px; max-width: 560px; }

/* ---------- Le plafond montre comme un mouvement ---------- */

.mouvement { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 24px 26px; margin: 28px 0; box-shadow: var(--ombre-s); }
.mvt-chiffres { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px 26px; margin-bottom: 12px; }
.mvt-lab { display: block; font-size: var(--micro); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: 4px; }
.mvt-val { display: block; font-family: var(--titre); font-weight: 400; font-size: 33px; line-height: 1; }
.mvt-av .mvt-val { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.mvt-ap .mvt-val { color: var(--accent); }
.mvt-delta .mvt-val { color: var(--ok); font-size: 25px; }
.mvt-fleche { font-size: 21px; color: var(--muted); padding-bottom: 4px; }
.mouvement p { margin: 0; }
@media (max-width: 560px) { .mvt-val { font-size: 26px; } .mvt-fleche { display: none; } }

/* ---------- Simulateur ---------- */

.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 20px 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: 620; }
.kpi .v { font-family: var(--titre); font-weight: 400; font-size: 30px; margin-top: 6px; line-height: 1.1; }
.calcul { font-size: 13px; color: var(--muted); }
.sous { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sous.reserve { color: var(--warn); }
.etapes { list-style: none; padding-left: 0; margin: 18px 0; }
.etapes li { position: relative; display: flex; gap: 15px; align-items: flex-start; padding-bottom: 22px; }
/* Un trait relie les quatre moments : c'est lui qui dit la suite, a la place
   des numeros. Le dernier n'en porte pas, il ne mene nulle part. */
.etapes li:not(:last-child)::before {
  content: ""; position: absolute; left: 18px; top: 40px; bottom: 4px;
  width: 1px; background: var(--border-fort);
}
.etape-ic {
  flex: none; display: grid; place-items: center;
  width: 37px; height: 37px; border-radius: var(--r-s);
  background: var(--accent-soft); color: var(--accent); font-size: 18px;
}
.etapes strong { display: block; font-size: 16.5px; margin-bottom: 3px; }
.etapes p { margin: 0; font-size: 14.5px; }
.etapes li > div { padding-top: 6px; }

/* ---------- Questions ---------- */

.qitem { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s); margin-bottom: 9px; overflow: hidden; }
.qitem summary { cursor: pointer; padding: 14px 18px; font-weight: 550; list-style: none; display: flex; align-items: center; gap: 12px; }
.qitem summary::-webkit-details-marker { display: none; }
.qitem summary::before { content: "▸"; color: var(--accent); flex: none; }
.qitem[open] summary::before { content: "▾"; }
.qitem[open] summary { border-bottom: 1px solid var(--border); }
.qcorps { padding: 16px 18px 18px 42px; }
.qcorps p { margin: 0 0 10px; }
.qtheme { margin: 30px 0 10px; font-size: 19px; }
.srcs { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 13px; }
.srcs strong { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: var(--micro); margin-bottom: 5px; }
.srcs a { display: block; margin: 3px 0; }

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

.perimetre { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 22px 0; }
.per-bloc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 18px 20px; }
.per-bloc h3 { margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .9px; color: var(--muted); }
.per-bloc ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-2); }
.per-bloc li { margin: 5px 0; }
.per-bloc.sait { border-left: 3px solid var(--ok); }
.per-bloc.pas { border-left: 3px solid var(--border-fort); }

.conv { padding: 0; overflow: hidden; }
.chat-log { min-height: 260px; max-height: 52vh; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.chat-bar input { flex: 1 1 12rem; min-width: 0; }
.chat-bar .btn { flex: 0 0 auto; }

.msg { max-width: 88%; padding: 12px 15px; border-radius: 12px; font-size: 14.5px; line-height: 1.6; }
.msg.moi { align-self: flex-end; background: var(--accent); color: var(--surface); border-bottom-right-radius: 5px; }
.msg.rep { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 5px; }

/* Quatre statuts, quatre rendus distincts. Les aplatir en « du texte dans une
   bulle » annulerait ce que le moteur fait pour distinguer ce qu'il sait de ce
   qu'il suppose. */
.msg.rep { border-left: 3px solid var(--ok); }
.msg.preciser { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.msg.hors { border-left: 3px solid var(--border-fort); }
.msg.perso { border-left: 3px solid #b3261e; background: color-mix(in srgb, #b3261e 8%, transparent); }
.msg .statut { display: block; font-size: var(--micro); text-transform: uppercase; letter-spacing: 1px; font-weight: 650; margin-bottom: 7px; opacity: .8; }
.msg .chips { margin: 10px 0 0; }
.msg .chip { font-size: 12.5px; padding: 6px 12px; }


/* ---------- Graphiques ----------
   Le SVG porte le dessin, la feuille porte le style : les couleurs de trait
   restent dans le JS, ou elles suivent la donnee, et tout ce qui est typographie
   vient d'ici, ou il suit le reste du site. */

.graphe-bloc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: 20px 22px 14px; margin: 20px 0;
  box-shadow: var(--ombre-s);
}
.graphe-titre {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  color: var(--text); margin-bottom: 10px;
}
.graphe { display: block; width: 100%; height: auto; overflow: visible; }
.g-grille { stroke: var(--border); stroke-width: 1; }
.g-axe { stroke: var(--border-fort); stroke-width: 1; }
.g-lab {
  font-family: var(--sans); font-size: 12px; fill: var(--muted);
  text-anchor: middle; dominant-baseline: auto;
}
.g-lab-y { text-anchor: end; }
.g-val { font-weight: 650; fill: var(--text-2); font-size: 12.5px; }
.g-fin { text-anchor: start; font-weight: 650; fill: var(--text-2); }
.graphe-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

/* Sous 620 px, un graphique de 720 de large rend un texte de 12 px a 10 px
   reels. Il defile alors a sa taille plutot que de retrecir. */
@media (max-width: 620px) {
  .graphe-bloc { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .graphe { width: 660px; max-width: none; }
}


/* ---------- Le panneau de l'assistant ----------
   Fixe, hauteur d'ecran, defilement propre. Un cadre qui defile a l'interieur
   d'une page qui defile oblige a viser pour choisir lequel bouge ; ici les
   deux zones sont separees a l'ecran et chacune porte le sien. */

.voile {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(1, 33, 60, .34);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}

.panneau {
  position: fixed; z-index: 80;
  top: 0; right: 0; bottom: 0; width: min(var(--pan-l, 420px), 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--ombre-m);
  padding-right: env(safe-area-inset-right);
}
/* Sa tete tombe a la hauteur de celle du site : le panneau va du haut au bas
   de l'ecran, les deux barres se lisent alors comme une seule ligne. */
.pan-tete {
  flex: none; display: flex; align-items: center; gap: 10px;
  min-height: var(--h-top); padding: 10px 12px 10px 20px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
}
.pan-tete h2 {
  flex: 1; margin: 0; font-family: var(--sans); font-weight: 600; font-size: 16px;
  display: flex; align-items: center; gap: 9px; color: var(--text);
}
.pan-fermer {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-s); background: none; color: var(--muted);
  cursor: pointer; font-size: 17px; transition: color .16s, background .16s;
}
.pan-fermer:hover { color: var(--accent); background: var(--accent-soft); }


/* Poignee de redimensionnement. Sa zone sensible depasse largement le trait
   visible : viser un filet de 1 px a la souris est un exercice, pas une
   interface. */
.pan-poignee {
  position: absolute; left: -5px; top: 0; bottom: 0; width: 11px; z-index: 2;
  cursor: col-resize; background: none; border: 0;
}
.pan-poignee::after {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px;
  background: transparent; transition: background .16s;
}
.pan-poignee:hover::after, .pan-poignee:focus-visible::after,
body[data-redim="1"] .pan-poignee::after { background: var(--accent); width: 2px; }
.pan-poignee:focus-visible { outline: none; }
/* Pendant le glissement, le curseur ne doit pas changer au survol du texte, et
   rien ne doit se selectionner sous la souris. */
body[data-redim="1"] { cursor: col-resize; user-select: none; }
body[data-redim="1"] * { pointer-events: none; }
body[data-redim="1"] .pan-poignee { pointer-events: auto; }

.pan-outil {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-s); background: none; color: var(--muted);
  cursor: pointer; transition: color .16s, background .16s;
}
.pan-outil:hover { color: var(--accent); background: var(--accent-soft); }
.pan-outil[disabled] { opacity: .35; cursor: default; }
.pan-outil[disabled]:hover { color: var(--muted); background: none; }

.pan-debut { margin-bottom: 18px; }
/* Neuf puces avant de pouvoir poser sa question, c'est neuf puces qu'on ne
   lit pas. Le perimetre reste a un clic : il sert quand une question echoue,
   et la reponse « hors de ce que je sais » le rappelle deja a ce moment-la. */
.pan-perimetre { margin: 0; }
.pan-perimetre summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: underline; text-underline-offset: 3px;
}
.pan-perimetre summary::-webkit-details-marker { display: none; }
.pan-perimetre summary::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s;
}
.pan-perimetre[open] summary::before { transform: rotate(45deg); }
.pan-perimetre .perimetre { margin-top: 12px; }
.pan-debut[hidden] { display: none; }
.pan-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.panneau .perimetre { display: block; margin: 0; }
.panneau .per-bloc { padding: 12px 14px; margin-bottom: 8px; border-radius: var(--r-s); }
.panneau .per-bloc h3 { font-size: 11px; margin-bottom: 6px; }
.panneau .per-bloc ul { font-size: 13px; padding-left: 16px; }

/* Le bouton de retour en bas flotte au-dessus de la barre de saisie, la ou
   l'oeil revient. Il n'apparait que si l'on a vraiment remonte. */
.pan-bas {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 74px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-fort);
  background: var(--surface); color: var(--text-2); box-shadow: var(--ombre-m);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.pan-bas:hover { color: var(--accent); border-color: var(--accent); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* La saisie grandit avec la question, jusqu'a cinq lignes. Un champ d'une
   ligne pour une question de deux la fait defiler sous les yeux pendant
   qu'on l'ecrit. */
.panneau .chat-bar { align-items: flex-end; }
.panneau .chat-bar textarea {
  flex: 1 1 10rem; min-width: 0; resize: none; overflow-y: auto;
  min-height: var(--h-champ); max-height: 8.5em; padding: 11px 13px;
  line-height: 1.45; border: 1px solid var(--border-fort); border-radius: var(--r-s);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
  transition: border-color .16s, box-shadow .16s;
}
.panneau .chat-bar textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Dans un panneau, le bouton d'envoi se serre : chaque pixel qu'il prend est
   un pixel de moins pour la question. */
.panneau .chat-bar .btn { padding: 0 16px; height: var(--h-champ); flex: none; }
.panneau .btn[disabled] { opacity: .45; cursor: default; transform: none; }
.panneau .btn[disabled]:hover { background: var(--accent); border-color: var(--accent); transform: none; }

/* Un seul element defile : ce corps. La barre de saisie reste au bas du
   panneau, ou le pouce la trouve sans faire remonter la conversation. */
.pan-corps { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 20px 4px; }
.pan-intro { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.pan-perimetre { margin: 0 0 14px; }
.pan-perimetre summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.pan-perimetre summary::-webkit-details-marker { display: none; }
.pan-perimetre .perimetre { margin-top: 12px; }
.panneau .chat-log { max-height: none; overflow: visible; padding: 0; }
.panneau .chat-bar {
  flex: none; border-top: 1px solid var(--border); padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--surface);
}
.panneau .msg { max-width: 100%; }

/* Au-dela de 1180 px le panneau pousse le contenu au lieu de le recouvrir :
   on peut lire le simulateur et poser sa question en meme temps, ce qui est
   tout l'interet de le sortir de son onglet. */
/* Des qu'il y a la place pour deux colonnes, le volet cesse d'etre un calque
   et en devient une. La difference n'est pas cosmetique : pose par-dessus la
   page, il recouvrait la barre de defilement collee au bord droit de la
   fenetre, et l'on defilait a l'aveugle derriere lui. En colonne, c'est la
   page qui defile, sa barre tombe a sa droite, donc juste a gauche du volet,
   et reste visible. C'est la disposition des volets de navigateur, et ce
   n'est pas un hasard. */
@media (min-width: 1180px) {
  body[data-panneau="1"] {
    height: 100vh; height: 100dvh; overflow: hidden;
    display: flex; align-items: stretch;
  }
  body[data-panneau="1"] .page {
    flex: 1 1 auto; min-width: 0; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    /* La barre garde sa place des le depart : sans cela le contenu saute de
       sa largeur au premier debordement. */
    scrollbar-gutter: stable;
  }
  body[data-panneau="1"] .panneau {
    position: relative; inset: auto; flex: none;
    width: var(--pan-l, 420px); height: 100%; z-index: auto;
    box-shadow: none;
  }
}

/* Sur telephone, le volet prend tout l'ecran. Un panneau de 257 px sur un
   ecran de 390 laisse derriere lui une bande de page qu'on ne peut ni lire ni
   utiliser : autant s'y consacrer entierement, et revenir par la croix. */
@media (max-width: 760px) {
  .panneau { width: 100%; }
  /* Rien a redimensionner quand on occupe deja tout. */
  .pan-poignee { display: none; }
  /* Celui du volet n'a plus rien a assombrir, puisque le volet couvre tout.
     La regle vise donc ce voile-la, et non la classe : celui de la fiche doit
     continuer a assombrir ce qui est derriere elle. */
  body[data-panneau="1"] #voile { display: none; }
}

/* ---------- Renvoyer vers un endroit de la page ----------
   Le surlignage dure le temps qu'il faut pour trouver, puis s'efface : une
   marque qui reste devient une decoration et on cesse de la voir. */

.chip.vise { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-fort)); }
.chip.vise:hover { background: var(--accent-soft); }

.surligne { animation: sursaut 2.8s cubic-bezier(.2,.7,.2,1); border-radius: var(--r-m); }
@keyframes sursaut {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); background-color: var(--accent-soft); }
  12%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent); background-color: var(--accent-soft); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent); background-color: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .surligne { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}


/* ---------- La fiche d'une source ----------
   Sur telephone, un titre de source tient sur trois lignes et l'on tape dessus
   sans savoir ou l'on va. La fiche dit ce que la source est avant qu'on quitte
   le site : l'organisme, la nature du document, ce qu'il etablit ici, et la
   date ou le lien a ete verifie. */

.fiche-voile { z-index: 90; }
.fiche {
  position: fixed; z-index: 91; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0; box-shadow: var(--ombre-m);
  padding: 22px 20px max(22px, env(safe-area-inset-bottom));
}
/* Elle monte du bas sur telephone, la ou se trouve le pouce. Sur un ecran
   large, elle se pose au centre : une feuille collee au bas d'un grand ecran
   oblige a descendre les yeux pour rien. */
@media (min-width: 640px) {
  .fiche {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 40px));
    border-radius: var(--r-m); border: 1px solid var(--border);
  }
}
.fiche-fermer {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-s); background: none; color: var(--muted); cursor: pointer;
}
.fiche-fermer:hover { color: var(--accent); background: var(--accent-soft); }
.fiche-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding-right: 40px; }
.fiche-organisme {
  font-size: var(--micro); font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: var(--r-s);
}
.fiche-nature { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.fiche h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.fiche-porte { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.fiche-verif { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; color: var(--ok); }
/* L'adresse en entier, coupee proprement : elle dit ou l'on va, et une adresse
   tronquee par des points de suspension ne dit plus rien. */
.fiche-adresse {
  margin: 0 0 18px; font-size: 12px; color: var(--muted);
  word-break: break-all; line-height: 1.5;
  background: var(--surface-2); border-radius: var(--r-s); padding: 9px 11px;
}
.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fiche-actions .btn { flex: 1 1 auto; justify-content: center; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }

/* Le nom court sur telephone, le titre entier des qu'il y a la place. */
.src-long { display: none; }
.src-court { display: inline; }
@media (min-width: 761px) {
  .src-long { display: inline; }
  .src-court { display: none; }
}
@media (max-width: 760px) {
  /* Une source devient une ligne qu'on peut viser du doigt. */
  .srcs a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; margin: 0; padding: 4px 0;
    border-bottom: 1px solid var(--border); text-decoration: none;
  }
  .srcs a:last-child { border-bottom: 0; }
  .srcs a::after {
    content: ""; flex: none; width: 7px; height: 7px;
    border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
    transform: rotate(-45deg);
  }
}

/* ---------- Pied de page ----------
   Ce qu'il porte d'utile, ce sont les sources : le site s'interdit d'afficher
   une reponse sans elles, autant les rassembler. La mention legale tient sur
   une ligne, en bas, sans accordeon : trois lignes ne meritent pas un
   mecanisme a ouvrir. */

.pied {
  border-top: 1px solid var(--border); background: var(--surface-2);
  padding: 34px max(22px, env(safe-area-inset-left)) 0;
  font-size: 13px;
}
.pied-grille {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: 26px 40px;
  grid-template-columns: 1.5fr 1.2fr 1fr;
}
.pied-marque { display: flex; gap: 12px; align-items: flex-start; }
.pied-marque .mark {
  width: 32px; height: 32px; border-radius: var(--r-s); flex: none;
  display: grid; place-items: center; background: var(--accent); color: var(--surface);
}
.pied-marque .mark svg { width: 18px; height: 18px; }
.pied-marque strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 19px; color: var(--text); }
.pied-marque p { margin: 4px 0 0; color: var(--muted); }
.pied-col h2 {
  margin: 0 0 10px; font-family: var(--sans); font-size: var(--micro);
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col li { margin-bottom: 7px; line-height: 1.45; }
.pied-col a {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--text-2); text-decoration: none;
}
.pied-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pied-col a .ic { opacity: .5; }
.pied-col a:hover .ic { opacity: 1; }
.pied-bas {
  max-width: var(--max); margin: 26px auto 0; padding: 14px 0 18px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
/* La mention legale fait trois lignes sur un ecran large et 116 caracteres
   par ligne sans borne : l'oeil perd le debut de la ligne suivante. */


@media (max-width: 860px) {
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pied-grille { grid-template-columns: 1fr; }
}

/* ---------- Cibles tactiles ---------- */

@media (pointer: coarse) {
  :root { --micro: 12px; }
  nav.sous-nav button { min-height: 44px; }
  .chip { min-height: 40px; padding: 10px 16px; }
  .btn { min-height: 46px; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
  .check label { min-height: 44px; font-size: 15px; }
  .qitem summary { min-height: 52px; }
  .srcs a, input, select { font-size: 16px; }
  /* Tout ce qui se tape fait au moins 44 px de haut, y compris ce qui n'a
     l'air que d'un lien : le pied de page, les resumes qui se deplient, les
     sources d'une reponse. */
  .pied-col a, .pied-plus summary, .pan-perimetre summary,
  .srcs a, summary, .lien-guide { min-height: 44px; display: flex; align-items: center; }
  .pied-col a { gap: 8px; }
  .fiche-actions .btn { min-height: 48px; }
}

@media (max-width: 700px) {
  main { padding: 0 16px 70px; }
  .row { flex-direction: column; align-items: stretch; }
  .row > div { width: 100%; }
  .kpis { grid-template-columns: 1fr; }
  table { min-width: 520px; }
}