/* ==================================================================
   budgetPDF.ca — feuille de style unique
   Jetons repris de README.md « Jetons de design ». Ne pas inventer de
   couleur : toute valeur ci-dessous vient de la maquette.
   ================================================================== */

/* ---------- Polices, servies localement (aucun appel à un tiers) ---------- */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

/* ---------- Jetons ---------- */

:root {
  --bleu: #0F3F7A;
  --bleu-fonce: #0B2E5C;
  --bleu-lien: #14509B;
  --bleu-barre: #2C6BC4;
  --bleu-pale: #E7EFFA;
  --bleu-survol: #EFF4FC;
  --bleu-coche: #F7FAFF;

  --jaune: #F7CB2E;
  --jaune-survol: #FFD84A;
  --jaune-pastille: #FFF1C4;
  --jaune-conseil: #FFF8E2;
  --jaune-retard: #FFFBEF;
  --jaune-bord: #EFD99B;
  --jaune-bord-coche: #E8C64A;
  --jaune-puce: #B98C06;

  --page: #F4F6FA;
  --subtil-1: #FAFBFE;
  --subtil-2: #FCFDFF;
  --subtil-3: #F6F8FC;

  --b-carte: #E2E8F2;
  --b-champ: #DDE4EF;
  --b-champ-2: #E6EAF2;
  --b-entete: #EEF1F7;
  --b-rangee: #F2F4F9;
  --b-piste: #EDF1F7;
  --b-pointille: #C7D3E6;
  --b-pointille-survol: #B9C6DC;

  --t-principal: #141922;
  --t-libelle: #2A3342;
  --t-3: #3D4A60;
  --t-courant: #4A566B;
  --t-secondaire: #54607A;
  --t-indice: #7A88A0;
  --t-icone: #8894AB;

  --sur-bleu-1: #EAF1FA;
  --sur-bleu-2: #DCE6F4;
  --sur-bleu-3: #E4EDF9;
  --sur-bleu-4: #C9D8EC;
  --sur-bleu-5: #A9BDD8;

  --sans: 'Figtree', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Largeur du contenu — l'entête, le corps et le pied la partagent, ce qui
     garantit que les onglets s'alignent sur les cartes en dessous.
     Par défaut : les pages de texte suivi, où une colonne étroite se lit mieux. */
  --largeur: 860px;
  /* La gouttière suit la fenêtre : serrée sur un téléphone, généreuse sur un
     grand écran, sans point de rupture à maintenir. */
  --gouttiere: clamp(16px, 2.2vw, 40px);
}

/* L'outil respire sur un écran d'ordinateur portable : une rangée de saisie en
   mode couple porte jusqu'à sept contrôles, et les tableaux du rapport n'ont
   plus à défiler horizontalement. La prose, elle, reste bornée à 62 caractères
   par ligne partout — c'est ce qui empêche l'élargissement de nuire à la
   lecture. Aucun effet sur le PDF, qui est construit en millimètres sur un A4
   portrait fixe, indépendamment de l'écran. */
/* `min(…, 100%)` : la largeur suit l'écran jusqu'à une borne, au lieu d'être
   figée. Sur un portable 15 po, l'outil occupe toute la fenêtre ; sur un écran
   très large, il s'arrête — une rangée de saisie étirée sur 2 500 px oblige
   l'œil à traverser le vide entre le nom de la dépense et son montant, et le
   tableau devient plus difficile à lire, pas plus lisible. */
body.outil { --largeur: min(1440px, 100%); }

/* L'accueil : même largeur que ses blocs `.large`, pour que le logo s'aligne
   sur le titre. Les deux ne coïncidaient pas. */
body.accueil { --largeur: min(1320px, 100%); }

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--t-principal);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu-lien); }
a:hover { color: var(--bleu-fonce); }

input, select, button, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Un anneau de focus visible partout : exigence d'accessibilité. */
:focus-visible {
  outline: 2px solid var(--bleu-lien);
  outline-offset: 2px;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Entête ---------- */

.entete { background: var(--bleu); color: #fff; padding: 18px 0 20px; }
.entete-inner {
  max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere);
  display: flex; flex-direction: column; gap: 14px;
}

.marque { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

/* Le logo est une image, pas un mot cliquable : la marque doit se reconnaître
   d'un coup d'œil, et le tracé est intégré au fichier SVG, donc indépendant du
   chargement des polices. */
.marque-lien { display: flex; align-items: center; text-decoration: none; border-radius: 6px; }
.marque-lien:hover { opacity: .88; }
.marque-logo { display: block; height: 32px; width: auto; }
.marque-jeton {
  width: 30px; height: 30px; border-radius: 8px; background: var(--jaune);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #20180A; flex: none;
}
.marque-nom { font-weight: 700; font-size: 19px; letter-spacing: -0.015em; }
.marque-nom .pdf { color: var(--jaune); }
.marque-sous {
  font-size: 12.5px; opacity: .78;
  border-left: 1px solid rgba(255, 255, 255, .3); padding-left: 11px;
}

.entete-nav { display: flex; flex-direction: column; gap: 10px; }
.entete-etat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pastille-plan { background: rgba(255, 255, 255, .14); border-radius: 20px; padding: 5px 11px; font-weight: 600; }
.lien-changer {
  background: none; border: 0; color: var(--jaune); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 5px 2px; text-decoration: underline;
}

.onglets { display: flex; gap: 8px; flex-wrap: wrap; }
.onglet {
  border: 0; border-radius: 9px; padding: 10px 13px; font-size: 14px; font-weight: 600;
  min-height: 44px; cursor: pointer;
  background: rgba(255, 255, 255, .13); color: var(--sur-bleu-3);
}
.onglet:hover { background: rgba(255, 255, 255, .22); }
.onglet[aria-current="page"] { background: #fff; color: var(--bleu); }

/* ---------- Corps ---------- */

main {
  max-width: var(--largeur); width: 100%; margin: 0 auto;
  padding: 22px var(--gouttiere) 56px;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1;
}

.carte {
  background: #fff; border: 1px solid var(--b-carte); border-radius: 14px; padding: 18px;
}
.carte-entete { padding: 20px; }

.titre-ecran { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.titre-ecran-s { font-size: 24px; }
.sous-ecran {
  font-size: 15.5px; color: var(--t-courant); margin: 8px 0 0;
  line-height: 1.6; max-width: 62ch; text-wrap: pretty;
}
.surtitre {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--t-indice); margin: 0 0 6px;
}

.texte { font-size: 15px; color: var(--t-courant); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.indice { font-size: 12.5px; color: var(--t-indice); line-height: 1.5; }
.indice-l { font-size: 13.5px; color: var(--t-indice); line-height: 1.55; max-width: 62ch; }

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

.btn {
  cursor: pointer; border-radius: 10px; font-weight: 700; font-size: 16px;
  padding: 15px 18px; min-height: 50px; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Un bouton peut être un <a> : il ne doit pas en porter le soulignement. */
  text-decoration: none; text-align: center;
}
a.btn:hover { text-decoration: none; }
.btn-principal { background: var(--jaune); color: #20180A; }
.btn-principal:hover { background: var(--jaune-survol); }
.btn-secondaire { background: #fff; border: 1px solid var(--b-pointille); color: var(--bleu-lien); }
.btn-secondaire:hover { background: var(--bleu-survol); }
.btn-bleu { background: var(--bleu); color: #fff; }
.btn-bleu:hover { background: var(--bleu-fonce); }
.btn-blanc { background: #fff; color: var(--bleu); font-size: 15px; padding: 12px 16px; min-height: 44px; }
.btn-blanc:hover { background: var(--sur-bleu-1); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-ajout {
  border: 1px dashed var(--b-pointille); background: none; color: var(--bleu-lien);
  border-radius: 9px; padding: 9px 13px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; min-height: 38px;
}
.btn-ajout:hover { border-color: var(--b-pointille-survol); background: var(--bleu-survol); }

.btn-lien {
  background: none; border: 0; color: var(--bleu-lien); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 6px 4px; min-height: 38px; white-space: nowrap;
}
.btn-lien:hover { text-decoration: underline; }

.btn-suppr {
  width: 36px; height: 36px; min-height: 36px; flex: none;
  border: 0; background: none; color: var(--t-icone);
  font-size: 18px; line-height: 1; border-radius: 9px; cursor: pointer;
}
.btn-suppr:hover { background: var(--page); color: var(--t-secondaire); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 200px; }

/* ---------- Écran 0 : cartes de plan ---------- */

.plans { display: flex; gap: 14px; flex-wrap: wrap; }
.plan-carte {
  flex: 1 1 260px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--b-carte); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-carte[aria-pressed="true"] {
  border: 2px solid var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); padding: 17px;
}
.plan-jeton {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.plan-jeton.bleu { background: var(--bleu-pale); color: var(--bleu); }
.plan-jeton.jaune { background: var(--jaune-pastille); color: #6B5205; }
.plan-titre { font-size: 17px; font-weight: 700; }
.plan-desc { font-size: 14.5px; color: var(--t-courant); line-height: 1.55; }

/* ---------- Champs ---------- */

.champ {
  border: 1px solid var(--b-champ); border-radius: 10px; padding: 10px 12px;
  font-size: 15px; min-height: 44px; background: #fff; width: 100%;
}
.champ:focus { border-color: var(--bleu-lien); }
.champ-nom {
  flex: 1 1 180px; min-width: 140px; border-radius: 9px; min-height: 38px;
  /* Borné : sur un écran large, un champ de nom étiré sur 500 px est
     disgracieux. Et comme il atteint alors sa borne dans toutes les rangées,
     les montants s'alignent en colonne — ce qui aide à comparer d'un coup
     d'œil trente lignes de budget. */
  max-width: min(460px, 34vw);
}
.champ-nom-court { flex: 1 1 140px; }

.libelle { display: block; font-size: 13.5px; font-weight: 600; color: var(--t-libelle); margin-bottom: 5px; }

.groupe-montant {
  display: flex; align-items: center; gap: 4px; flex: none;
  border: 1px solid var(--b-champ); border-radius: 9px; background: #fff;
  padding: 0 6px 0 0; min-height: 38px;
}
.groupe-montant:focus-within { border-color: var(--bleu-lien); }
.groupe-montant input {
  border: 0; background: none; text-align: right; width: 88px;
  font-family: var(--mono); font-size: 15px; padding: 8px 4px 8px 10px; min-height: 36px;
  font-variant-numeric: tabular-nums;
}
.groupe-montant input:focus { outline: none; }
.groupe-montant input.large { width: 92px; }
.groupe-montant .suffixe { color: var(--t-indice); font-size: 14px; flex: none; }
.groupe-montant select {
  border: 0; border-left: 1px solid var(--b-champ-2); background: none;
  font-size: 13.5px; padding: 8px 4px 8px 8px; min-height: 36px; cursor: pointer;
  color: var(--t-secondaire);
}
.groupe-montant select:focus { outline: none; }

.select-personne {
  border: 1px solid var(--b-champ); border-radius: 9px; padding: 8px 10px;
  min-height: 38px; max-width: 150px; background: #fff; font-size: 13.5px; cursor: pointer;
}

/* Date de paiement — facultative, donc volontairement discrète tant qu'elle est vide */
.champ-quand {
  border: 1px solid var(--b-champ); border-radius: 9px; padding: 8px 8px;
  min-height: 38px; background: #fff; font-size: 13px; cursor: pointer;
  color: var(--t-secondaire); max-width: 130px;
}
.champ-quand:focus { border-color: var(--bleu-lien); }
.champ-date { font-family: var(--mono); font-size: 12.5px; max-width: 148px; }

/* Bascule besoin / désir */
.bascule-bd {
  border: 1px solid var(--b-champ); background: #fff; color: var(--t-secondaire);
  border-radius: 9px; padding: 8px 11px; min-height: 38px; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; flex: none;
}
.bascule-bd:hover { border-color: var(--b-pointille); background: var(--bleu-survol); }
.bascule-bd[aria-pressed="true"] {
  border-color: var(--jaune-bord-coche); background: var(--jaune-conseil); color: #5C470A;
}
/* Marquer un virement comme remboursement n'est pas un « désir » : la couleur
   doit dire « dette », pas reprendre le jaune de la bascule besoin/désir. */
.bascule-dette[aria-pressed="true"] {
  border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu);
}

/* Le moyen de paiement : discret par défaut, souligné quand c'est du crédit —
   c'est le cas qui mérite d'être repérable en parcourant la page des yeux. */
.select-paiement {
  border: 1px solid var(--b-champ); border-radius: 9px; padding: 8px 9px;
  min-height: 38px; max-width: 108px; background: #fff; font-size: 13px;
  color: var(--t-secondaire); cursor: pointer; flex: none;
}
/* Bleu, et non jaune : le jaune est déjà celui de la bascule besoin/désir, et
   deux pastilles ambrées côte à côte se lisent comme une seule information. Le
   bleu est celui de « Rembourse une dette » — les deux disent la même chose,
   que cette ligne touche au crédit. */
.select-paiement.credit {
  border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu);
  font-weight: 600;
}

/* ---------- Écran 4 : entêtes de section du rapport ----------

   Un h2 de 19 px posé sur une carte blanche ne séparait pas assez : sur un
   rapport qui fait dix sections, on doit retrouver « Vos ratios » d'un coup
   d'œil, sans relire. Le bandeau tramé et le filet bleu font ce travail, et
   ils survivent à une impression en noir et blanc. */

.carte-rapport { padding: 0; overflow: hidden; }

.entete-rapport {
  padding: 18px 20px 15px;
  background: var(--subtil-3);
  border-bottom: 2px solid var(--bleu);
}
.entete-rapport .section-titre {
  font-size: 25px; line-height: 1.2; letter-spacing: -0.02em; color: var(--bleu-fonce);
}
.entete-rapport .section-sous { font-size: 15px; color: var(--t-courant); margin: 8px 0 0; }

.rapport-rang {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--jaune-puce); margin: 0 0 5px;
}

.corps-rapport { padding: 18px 20px 20px; }

/* Sous-titres à l'intérieur d'une section : un cran sous le titre, un cran
   au-dessus du corps de texte. */
.detail-groupe h3, .fixes-poste, .titre-liste {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--bleu);
  margin: 22px 0 8px;
}
.detail-groupe:first-child h3 { margin-top: 0; }

/* ---------- À qui vous payez ----------

   Une liste de noms, sans montants. En colonnes plutôt qu'en une seule file :
   des noms courts alignés sur toute la largeur d'un écran de 1 440 px laissent
   un vide qui rend la liste plus longue à parcourir, pas plus lisible. */

.paiements-bloc + .paiements-bloc { margin-top: 26px; }

.paiements-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px 26px; align-items: start;
}
.paiements-poste h4 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--t-indice); margin: 0 0 7px; padding-bottom: 5px;
  border-bottom: 1px solid var(--b-rangee);
}
.paiements-poste ul { list-style: none; margin: 0; padding: 0; }
.paiements-poste li {
  font-size: 14.5px; color: var(--t-secondaire); line-height: 1.45;
  padding: 4px 0 4px 12px; border-left: 3px solid var(--b-piste);
  overflow-wrap: anywhere;
}
/* Une ligne que la personne a nommée elle-même porte un vrai nom de créancier :
   c'est l'information utile de cette page, et elle se distingue d'un libellé
   d'origine resté tel quel. */
.paiements-poste li.nomme {
  color: var(--t-principal); font-weight: 600; border-left-color: var(--bleu);
}

/* ---------- Petites classes utilitaires ----------
   Elles remplacent les attributs `style` que la politique de sécurité du site
   ignore en production. Leur nom dit l'espacement, pas l'intention : ce sont
   des réglages fins, pas des composants. */

.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mb-10 { margin: 0 0 10px; }
.mb-12 { margin: 0 0 12px; }
.mb-14 { margin: 0 0 14px; }
.intro-bloc { margin: 6px 0 14px; }
.intro-large { margin: 6px 0 16px; }
.sous-titre-serre { margin: 6px 0 0; }
.mt-12-serre { margin: 12px 0 2px; }
.zone-ajout { padding: 8px 6px 0; }
.txt-droite { text-align: right; }
.pleine-largeur { flex: 1 1 100%; }
.min-44 { min-height: 44px; }
.t-16 { font-size: 16px; }
.t-secondaire { color: var(--t-secondaire); }
.t-17 { font-size: 17px; }
.mt-20 { margin-top: 20px; }
.facultatif { font-weight: 400; color: var(--t-indice); }
.sans-marge-haut { padding-top: 0; }
.public-jeton.grand-public { background: var(--bleu-pale); color: var(--bleu); }
.public-jeton.milieux { background: var(--jaune-pastille); color: #6B5205; }
.baseline { align-items: baseline; }
.normal-4 { font-weight: 400; margin-top: 4px; }
.titre-liste { font-size: 16px; font-weight: 700; margin: 20px 0 6px; }
.colonne-champs { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Cases à cocher ---------- */

.case {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  border: 1px solid var(--b-champ); background: #fff; border-radius: 10px;
  padding: 11px 12px; flex: 1 1 240px; min-height: 48px;
}
.case:hover { border-color: var(--b-pointille); }
.case input { width: 18px; height: 18px; accent-color: var(--bleu); margin: 2px 0 0; flex: none; }
.case-t { font-size: 14.5px; font-weight: 600; }
.case-h { font-size: 12.5px; color: var(--t-indice); line-height: 1.45; }
.case.coche {
  border: 2px solid var(--bleu); background: var(--bleu-coche); color: var(--bleu); padding: 10px 11px;
}
.case.coche .case-h { color: var(--t-secondaire); }

.cases { display: flex; flex-wrap: wrap; gap: 10px; }

/* Case « commune / commun / conjoint » d'une rangée */
.case-commun {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--b-champ); border-radius: 9px;
  padding: 8px 10px; min-height: 38px; font-size: 13px; background: #fff;
  color: var(--t-secondaire); white-space: nowrap; flex: none;
}
.case-commun input { width: 16px; height: 16px; accent-color: var(--bleu); margin: 0; }
.case-commun.coche { border: 1px solid var(--jaune-bord-coche); background: var(--jaune-conseil); color: #5C470A; }

/* ---------- Pastilles de choix unique ---------- */

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  border: 1px solid var(--b-champ); background: #fff; color: var(--t-3);
  border-radius: 20px; padding: 9px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 40px;
}
.pastille:hover { background: var(--bleu-survol); }
.pastille[aria-pressed="true"] { border: 2px solid var(--bleu); background: var(--bleu-survol); color: var(--bleu); padding: 8px 14px; }

/* ---------- Écran 1 : questionnaire, un poste par page ---------- */

/* Une question à la fois se répond vite ; une grille de trente cases décourage.
   Tout ici sert la même règle : lecture en colonne, cible large, sortie visible. */

.carte-question { padding: 22px; }
.question-rang {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--t-indice); margin: 0 0 6px;
}
.question-corps { margin-top: 18px; }

.carte-fil { padding: 14px 16px; }
.fil-entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.fil-titre { font-size: 13.5px; font-weight: 600; color: var(--t-secondaire); }
.fil-pct { font-size: 13px; color: var(--t-indice); }
.piste-fil { height: 6px; }

.jetons-q { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jeton-q {
  border: 1px solid var(--b-champ); background: #fff; color: var(--t-secondaire);
  border-radius: 20px; padding: 6px 11px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; min-height: 32px;
}
.jeton-q:hover { background: var(--bleu-survol); border-color: var(--b-pointille); }
.jeton-q.faite { color: var(--bleu-lien); border-color: var(--bleu-pale); background: var(--bleu-coche); }
.jeton-q.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* Cases en colonne : l'œil balaie une seule verticale au lieu de faire des
   allers-retours entre deux colonnes. */
.cases-colonne { display: flex; flex-direction: column; gap: 10px; }
/* `.case` porte `flex: 1 1 240px` pour la disposition en grille ; dans une
   colonne, ce 240px deviendrait une HAUTEUR de base et gonflerait chaque case
   en pavé. On repose donc la propriété ici. */
.cases-colonne .case { flex: 0 0 auto; width: 100%; }
.case-sous { margin-left: 26px; border-style: dashed; }

.pastilles-colonne { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pastille-large {
  border-radius: 12px; text-align: left; padding: 13px 16px; min-height: 52px;
  display: flex; flex-direction: column; gap: 3px;
}
.pastille-large[aria-pressed="true"] { padding: 12px 15px; }
.pastille-t { font-size: 15px; font-weight: 700; }
.pastille-h { font-size: 12.5px; font-weight: 400; color: var(--t-indice); line-height: 1.45; }
.pastille-large[aria-pressed="true"] .pastille-h { color: var(--t-secondaire); }

.champs-colonne { display: flex; flex-direction: column; gap: 14px; }
.champ-sous { margin: 2px 0 4px 26px; }

/* Les deux boutons gardent une taille de bouton : étirés sur toute la largeur,
   ils ressemblent à des bandeaux et on ne sait plus lequel fait avancer. */
.actions-question { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.actions-question .btn { flex: 0 1 auto; min-width: 220px; }
.saut-budget { margin: -6px 0 0; }

/* ---------- Écran 2 : sections ---------- */

.section { padding: 0; overflow: hidden; }
.section-entete { padding: 18px 18px 14px; border-bottom: 1px solid var(--b-entete); }
.section-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.section-num { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--t-indice); }
.pastille-cat { border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.pastille-cat.bleu { background: var(--bleu-pale); color: var(--bleu-lien); }
.pastille-cat.jaune { background: var(--jaune-pastille); color: #6B5205; }
.pastille-cat.gris { background: #F1F4F9; color: var(--t-secondaire); }
.section-titre { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.section-sous { font-size: 14px; color: var(--t-secondaire); margin: 6px 0 0; line-height: 1.55; max-width: 62ch; }

.corps-section { padding: 4px 12px; }

/* ---------- Rangée de ligne ---------- */

.rangee {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 6px; border-bottom: 1px solid var(--b-rangee);
}
.rangee:last-child { border-bottom: 0; }
.rangee.partagee { background: var(--subtil-2); box-shadow: inset 3px 0 0 var(--jaune); }
.rangee-note {
  flex: 1 1 100%; font-size: 13px; font-family: var(--mono);
  color: var(--t-secondaire); padding: 2px 0 0;
}
.rangee-dette {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px;
  background: var(--subtil-2); border: 1px solid var(--b-entete); border-radius: 11px;
  padding: 10px; margin-top: 4px;
}
.mini-groupe { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.mini-groupe > span:first-child { font-size: 12.5px; color: var(--t-indice); white-space: nowrap; }
.mini-groupe .groupe-montant input { width: 74px; }

/* ---------- Sous-groupes ---------- */

.sous-groupe { padding: 12px 0 4px; }
.sous-groupe-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 0 6px 4px;
}
/* Le nom du poste budgétaire est le repère qui permet de se situer dans un
   formulaire long : il doit se lire d'un coup d'œil, pas se déchiffrer. */
.sous-groupe-titre {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--bleu);
  line-height: 1.25;
}
.sous-groupe-total { font-family: var(--mono); font-size: 13px; color: var(--t-indice); margin-left: auto; }
.sous-groupe-hint {
  font-size: 12.5px; color: var(--t-indice); line-height: 1.5;
  max-width: 62ch; margin: 0 0 8px; padding: 0 6px;
}

/* ---------- Pied de section ---------- */

.pied-section {
  background: var(--subtil-1); border-top: 1px solid var(--b-entete);
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pied-total { text-align: right; margin-left: auto; }
.pied-total-lib { font-size: 13px; color: var(--t-secondaire); }
.pied-total-val { font-size: 20px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; }
.pied-repartition { flex: 1 1 100%; text-align: right; font-size: 12.5px; color: var(--t-indice); font-family: var(--mono); }

/* ---------- Bandeau de solde ---------- */

.bandeau {
  background: var(--bleu); color: #fff; border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.bandeau-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--sur-bleu-2); }
.bandeau-ligne strong { color: #fff; font-family: var(--mono); font-weight: 400; }
.bandeau-filet { height: 1px; background: rgba(255, 255, 255, .22); }
.bandeau-solde-lib { font-size: 14.5px; color: var(--sur-bleu-1); font-weight: 600; }
.bandeau-solde-val { font-size: 26px; font-weight: 700; color: var(--jaune); font-family: var(--mono); letter-spacing: -0.02em; }
.bandeau-texte { font-size: 14px; color: var(--sur-bleu-2); line-height: 1.6; max-width: 62ch; text-wrap: pretty; margin: 0; }

.optim {
  background: rgba(255, 255, 255, .10); border-radius: 11px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.optim-titre { font-size: 14.5px; font-weight: 700; }
.optim-hint { font-size: 13.5px; color: var(--sur-bleu-2); line-height: 1.55; max-width: 62ch; }

.optim-fait {
  background: var(--jaune-conseil); border: 1px solid var(--jaune-bord); border-radius: 11px;
  padding: 14px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
}
.optim-fait-titre { font-size: 14.5px; font-weight: 700; color: #332703; }
.optim-fait ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.optim-fait li { font-size: 14px; color: #4A3B08; line-height: 1.55; }

/* ---------- Écran 3 ---------- */

.bloc-personne {
  border: 1px solid var(--b-carte); border-radius: 11px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.modes { display: flex; gap: 8px; flex-wrap: wrap; }
.champs-inline { display: flex; gap: 12px; flex-wrap: wrap; }
.champs-inline > div { flex: 1 1 180px; }
.resume-brut {
  background: var(--subtil-3); border-radius: 9px; padding: 10px 12px;
  font-family: var(--mono); font-size: 13.5px; color: var(--t-secondaire);
}
.encadre-jaune {
  background: var(--jaune-conseil); border: 1px solid var(--jaune-bord);
  border-radius: 11px; padding: 16px;
}
.encadre-jaune .lib { font-size: 13.5px; color: #6B5205; font-weight: 600; }
.encadre-jaune .val { font-size: 24px; font-weight: 700; font-family: var(--mono); color: #332703; letter-spacing: -0.02em; }
.capacite-val { font-size: 28px; font-weight: 700; font-family: var(--mono); color: var(--bleu); letter-spacing: -0.02em; }
.mention { font-size: 12.5px; color: var(--t-indice); line-height: 1.55; max-width: 62ch; }

/* ---------- Écran 4 ---------- */

.indicateurs { display: flex; gap: 12px; flex-wrap: wrap; }
.indicateur {
  flex: 1 1 150px; background: #fff; border: 1px solid var(--b-carte);
  border-radius: 14px; padding: 16px;
}
.indicateur-lib { font-size: 13px; color: var(--t-secondaire); }
.indicateur-val { font-size: 19px; font-weight: 700; font-family: var(--mono); margin-top: 4px; letter-spacing: -0.02em; }

.ratio-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ratio-titre { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

/* Les quatre ratios vivent maintenant dans une seule carte : un filet les
   sépare, au lieu de quatre cartes qui ne disaient pas qu'elles allaient
   ensemble. */
.ratio-bloc + .ratio-bloc {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--b-rangee);
}
.ratio-droite { display: flex; align-items: center; gap: 9px; }
.ratio-val { font-size: 22px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; }
.zone { border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.zone.sain { background: var(--bleu-pale); color: var(--bleu); }
.zone.surveiller { background: var(--jaune-pastille); color: #6B5205; }
.zone.preoccupant { background: var(--bleu); color: var(--jaune); }

.piste { height: 14px; border-radius: 8px; background: var(--b-piste); margin: 12px 0 6px; overflow: hidden; }
.remplissage { height: 100%; border-radius: 8px; transition: width .35s ease; }
.remplissage.sain { background: var(--bleu-barre); }
.remplissage.surveiller { background: var(--jaune); }
.remplissage.preoccupant { background: var(--bleu); }
.echelle { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-family: var(--mono); color: var(--t-indice); }
.ratio-texte { font-size: 14.5px; color: var(--t-courant); line-height: 1.6; margin: 10px 0 0; max-width: 62ch; text-wrap: pretty; }

/* ---------- Répartition par poste budgétaire ----------
   Palette catégorielle à trois emplacements, validée (séparation en vision des
   couleurs déficiente, bande de clarté, plancher de chroma) contre la surface
   blanche des cartes. La couleur encode la SECTION budgétaire du poste, jamais
   sa valeur ni son rang : deux postes de la même section portent la même teinte.
   L'avertissement de contraste sur l'or et l'aqua est levé par les valeurs
   affichées en toutes lettres à côté de chaque barre. */
:root {
  --serie-essentielles: #2C6BC4;  /* emplacement 1 — bleu, déjà la « barre saine » */
  --serie-epargne:      #EDA100;  /* emplacement 2 — or */
  --serie-dettes:       #1BAF7A;  /* emplacement 3 — aqua */
}

/* Bande empilée : où va chaque dollar qui sort */
.masses {
  display: flex; gap: 2px;              /* 2px de surface entre les segments */
  height: 14px; margin: 14px 0 12px;
}
.masse { min-width: 3px; border-radius: 2px; }
.masse:first-child { border-radius: 8px 2px 2px 8px; }
.masse:last-child { border-radius: 2px 8px 8px 2px; }
.masse:only-child { border-radius: 8px; }

.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 4px; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--t-secondaire); }
.legende .puce { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legende .val { font-family: var(--mono); color: var(--t-principal); font-variant-numeric: tabular-nums; }

/* Barres par poste */
.postes { display: flex; flex-direction: column; gap: 13px; margin-top: 4px; }
.poste-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 5px;
}
.poste-nom { font-size: 14.5px; font-weight: 600; color: var(--t-libelle); }
.poste-chiffres {
  font-family: var(--mono); font-size: 13.5px; color: var(--t-secondaire);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.poste-chiffres .pct { color: var(--t-principal); font-weight: 500; }

/* Même géométrie que les barres de ratio : la piste découpe l'extrémité
   gauche, ce qui donne un pied carré et une extrémité arrondie. */
.poste .piste { margin: 0; height: 12px; }

.serie-essentielles { background: var(--serie-essentielles); }
.serie-epargne { background: var(--serie-epargne); }
.serie-dettes { background: var(--serie-dettes); }

/* ---------- 50/30/20 ----------
   Ces trois volets sont des ratios comparés à une cible, pas des séries à
   distinguer : la forme juste est donc une jauge à teinte unique avec un
   repère, et non une palette catégorielle. Une quatrième teinte aurait été
   nécessaire pour les « désirs », et elle tombait sous le seuil de séparation
   en deutéranopie face à l'aqua des dettes. Une seule teinte règle les deux
   problèmes — et évite de colorer un écart comme un échec, alors que c'est
   souvent la règle qui ne convient pas au budget, et non l'inverse. */

.volets { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 4px; }
.volet-entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px;
}
.volet-nom { font-size: 14.5px; font-weight: 600; color: var(--t-libelle); }
.volet-chiffres {
  font-family: var(--mono); font-size: 13.5px; color: var(--t-secondaire);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.volet-chiffres .pct { color: var(--t-principal); font-weight: 500; }
.volet .piste { margin: 0; height: 12px; position: relative; overflow: visible; }
.volet .piste .remplissage { background: var(--serie-essentielles); border-radius: 8px 4px 4px 8px; }
/* Repère de la cible, tracé sur la piste */
.repere-cible {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--t-indice); border-radius: 1px;
}
.volet-cible { font-size: 12px; color: var(--t-indice); margin-top: 5px; }

/* ---------- Budget calendrier ---------- */

.semaine { border: 1px solid var(--b-carte); border-radius: 11px; padding: 0; overflow: hidden; margin-bottom: 12px; }
.semaine-entete {
  background: var(--subtil-1); border-bottom: 1px solid var(--b-entete);
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px;
}
.semaine-titre { font-size: 13.5px; font-weight: 700; color: var(--bleu); }
.semaine-solde { font-family: var(--mono); font-size: 13px; color: var(--t-secondaire); font-variant-numeric: tabular-nums; }
.semaine-solde strong { color: var(--t-principal); font-weight: 500; }

.mouvement {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--b-rangee); font-size: 14px;
}
.mouvement:last-child { border-bottom: 0; }
.mouv-date {
  flex: 0 0 96px; font-family: var(--mono); font-size: 12.5px;
  color: var(--t-secondaire); font-variant-numeric: tabular-nums;
}
.mouv-nom { flex: 1 1 140px; color: var(--t-principal); }
.mouv-montant {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; margin-left: auto;
}
.mouv-montant.entree { color: var(--bleu-lien); font-weight: 500; }
.mouv-montant.sortie { color: var(--t-principal); }
.semaine-vide { padding: 12px 14px; font-size: 13px; color: var(--t-indice); }

/* ---------- Budget mensuel détaillé ---------- */

.detail-groupe { margin-bottom: 16px; }
.detail-groupe > h3 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bleu); margin: 0 0 6px;
}
/* Les quatre tableaux du budget détaillé sont des <table> distincts : chacun
   calculait ses largeurs de colonnes selon son propre contenu, si bien que
   « MONTANT » ne tombait pas au même endroit d'un tableau à l'autre. Une mise
   en page fixe et des largeurs communes les alignent — c'est ce qui permet de
   lire les quatre en descendant la page d'un seul regard. */
table.detail { min-width: 460px; table-layout: fixed; }
table.detail col.c-ligne { width: 46%; }
table.detail col.c-montant { width: 18%; }
table.detail col.c-freq { width: 18%; }
table.detail col.c-mois { width: 18%; }
/* Un nom long revient à la ligne plutôt que d'élargir sa colonne. */
table.detail td:first-child { overflow-wrap: anywhere; }
table.detail td.freq { font-size: 12.5px; color: var(--t-indice); white-space: nowrap; }
table.detail tr.sous-total td { font-weight: 700; background: var(--subtil-1); }

.tableau-wrap { overflow-x: auto; }
table.t { border-collapse: collapse; width: 100%; font-size: 14px; }
table.t th, table.t td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--b-rangee); }
table.t th:first-child, table.t td:first-child { text-align: left; }
table.t th {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t-indice); white-space: nowrap;
}
table.t td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.total td { font-weight: 700; border-bottom: 0; }
table.t tr.retard { background: var(--jaune-retard); }
table.t td.detail {
  font-size: 12.5px; color: var(--t-indice); text-align: left;
  padding-top: 0; border-bottom: 1px solid var(--b-rangee); line-height: 1.5;
}
table.qui { min-width: 420px; }
table.epargne { min-width: 520px; }
table.dettes { min-width: 480px; }

.perspective { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.perspective-lib { font-size: 13.5px; font-weight: 600; color: var(--t-libelle); }

.conseils {
  background: var(--jaune-conseil); border: 1px solid var(--jaune-bord);
  border-radius: 14px; padding: 18px;
}
.conseils h2 { font-size: 19px; font-weight: 700; color: #332703; margin: 0 0 14px; letter-spacing: -0.01em; }
.conseil { display: flex; gap: 10px; margin-bottom: 14px; }
.conseil-puce { width: 9px; height: 9px; border-radius: 50%; background: var(--jaune-puce); flex: none; margin-top: 6px; }
.conseil-titre { font-size: 15px; font-weight: 700; color: #2E2404; }
.conseil-texte { font-size: 14.5px; color: #4A3B08; line-height: 1.6; margin: 3px 0 0; max-width: 62ch; text-wrap: pretty; }
.conseils-mention { font-size: 12.5px; color: #6B5205; margin: 0; }

.etat-pdf { text-align: center; font-size: 13px; color: var(--t-indice); min-height: 20px; margin-top: 10px; }

/* ==================================================================
   Page d'accueil
   ================================================================== */

/* L'accueil s'affranchit de la largeur de 860 px de l'outil : une page de
   présentation respire, là où un formulaire a besoin d'être serré. */
.large { max-width: var(--largeur); width: 100%; margin: 0 auto; padding: 0 var(--gouttiere); }

.heros {
  background: var(--bleu);
  color: #fff;
  padding: 56px 0 64px;
}
.heros-grille {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
}
.heros-texte { flex: 1 1 400px; min-width: 0; }
.heros h1 {
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12;
  margin: 0 0 16px; text-wrap: balance;
}
.heros h1 .jaune { color: var(--jaune); }
.heros-sous {
  font-size: 18px; line-height: 1.6; color: var(--sur-bleu-2);
  margin: 0 0 12px; max-width: 46ch; text-wrap: pretty;
}
.heros-appel { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.heros-appel .btn { flex: 0 1 auto; }
.heros-note {
  margin-top: 20px; font-size: 13.5px; color: var(--sur-bleu-4);
  line-height: 1.6; max-width: 48ch;
}
.heros-visuel { flex: 1 1 360px; min-width: 0; }
.heros-visuel img {
  width: 100%; height: auto; border-radius: 14px; display: block;
  border: 1px solid rgba(255, 255, 255, .18);
}

.bloc { padding: 56px 0; }
.bloc-pale { background: #fff; border-top: 1px solid var(--b-carte); border-bottom: 1px solid var(--b-carte); }
.bloc-titre {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 10px; text-wrap: balance;
}
.bloc-intro {
  font-size: 16.5px; color: var(--t-courant); line-height: 1.65;
  margin: 0 0 30px; max-width: 62ch; text-wrap: pretty;
}

/* Les deux publics */
.publics { display: flex; flex-wrap: wrap; gap: 18px; }
.public {
  flex: 1 1 320px; background: #fff; border: 1px solid var(--b-carte);
  border-radius: 14px; padding: 24px;
}
.bloc-pale .public { background: var(--page); }
.public-jeton {
  display: inline-block; border-radius: 20px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 12px;
}
.public h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.public p { font-size: 15px; color: var(--t-courant); line-height: 1.65; margin: 0 0 10px; }
.public ul { margin: 10px 0 0; padding-left: 20px; }
.public li { font-size: 14.5px; color: var(--t-courant); line-height: 1.6; margin-bottom: 7px; }

/* Fonctionnalités : texte et capture en alternance.
   `align-items: start` plutôt que `center` — les deux colonnes ont rarement la
   même hauteur, et centrer creuse un vide au-dessus de la plus courte. */
.fonc {
  display: flex; flex-wrap: wrap; gap: 36px; align-items: start;
  padding: 34px 0; border-top: 1px solid var(--b-carte);
}
.fonc:first-of-type { border-top: 0; padding-top: 10px; }
.fonc-texte { flex: 1 1 320px; min-width: 0; }
.fonc-visuel { flex: 1 1 380px; min-width: 0; }
.fonc-visuel img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--b-carte);
}
.fonc.inverse .fonc-visuel { order: -1; }
.fonc-etiquette {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bleu-lien); margin: 0 0 8px;
}
.fonc h3 { font-size: 21px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.015em; }
.fonc p { font-size: 15.5px; color: var(--t-courant); line-height: 1.65; margin: 0 0 10px; max-width: 54ch; }

/* Bande de confiance */
.confiance {
  background: var(--bleu-fonce); color: #fff; border-radius: 14px; padding: 32px;
}
.confiance h2 { font-size: 24px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; }
.confiance p { font-size: 15.5px; color: var(--sur-bleu-2); line-height: 1.65; margin: 0 0 12px; max-width: 60ch; }
.confiance a { color: var(--jaune); }

/* Appel final */
.appel-final { text-align: center; padding: 56px 0; }
.appel-final h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.appel-final p { font-size: 16.5px; color: var(--t-courant); margin: 0 auto 24px; max-width: 52ch; line-height: 1.65; }
.appel-final .btn { display: inline-flex; }

/* La note de non-jugement : elle doit arrêter l'œil, pas se fondre */
.note-jugement {
  background: var(--jaune-conseil); border: 1px solid var(--jaune-bord);
  border-radius: 14px; padding: 24px;
}
.note-jugement h2 { font-size: 19px; font-weight: 700; color: #332703; margin: 0 0 10px; }
.note-jugement p { font-size: 15px; color: #4A3B08; line-height: 1.7; margin: 0 0 10px; max-width: 66ch; }
.note-jugement p:last-child { margin-bottom: 0; }
.note-jugement a { color: #6B5205; font-weight: 700; }

@media (max-width: 700px) {
  .heros { padding: 38px 0 44px; }
  .heros h1 { font-size: 30px; }
  .heros-sous { font-size: 16px; }
  .heros-appel .btn { flex: 1 1 100%; }
  .bloc { padding: 40px 0; }
  .bloc-titre { font-size: 23px; }
  .fonc { gap: 20px; padding: 26px 0; }
  .fonc.inverse .fonc-visuel { order: 0; }
  .confiance, .note-jugement { padding: 20px; }
  .appel-final .btn { width: 100%; }
}

/* ---------- Formulaire de contact ---------- */

.form-champ { margin-bottom: 16px; }
.form-champ textarea {
  border: 1px solid var(--b-champ); border-radius: 10px; padding: 12px;
  font-size: 15px; width: 100%; min-height: 160px; background: #fff;
  line-height: 1.6; resize: vertical; font-family: inherit;
}
.form-champ textarea:focus { border-color: var(--bleu-lien); outline: none; }
.form-aide { font-size: 12.5px; color: var(--t-indice); margin: 5px 0 0; line-height: 1.5; }
/* Piège à robots : invisible pour une personne, rempli par un automate. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pages de contenu (texte suivi) ---------- */

.prose { max-width: 66ch; }
.prose h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  margin: 28px 0 8px; color: var(--t-principal);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 15.5px; font-weight: 700; margin: 20px 0 6px; color: var(--t-libelle); }
.prose p { font-size: 15px; color: var(--t-courant); line-height: 1.65; margin: 0 0 12px; text-wrap: pretty; }
.prose ul, .prose ol { font-size: 15px; color: var(--t-courant); line-height: 1.65; padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 7px; }
.prose li::marker { color: var(--t-indice); }
.prose strong { color: var(--t-principal); font-weight: 700; }
.prose a { font-weight: 600; }
.prose .petit { font-size: 13px; color: var(--t-indice); }

/* Liste de définitions du lexique */
.lexique { margin: 0; }
.lexique dt {
  font-size: 15.5px; font-weight: 700; color: var(--bleu);
  margin: 20px 0 4px; scroll-margin-top: 20px;
}
.lexique dt:first-child { margin-top: 0; }
.lexique dd { margin: 0; font-size: 14.5px; color: var(--t-courant); line-height: 1.6; max-width: 66ch; }
.lexique dd + dd { margin-top: 6px; }

.ancres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.ancres a {
  display: inline-block; border: 1px solid var(--b-champ); border-radius: 20px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--bleu-lien); background: #fff; min-height: 32px;
}
.ancres a:hover { background: var(--bleu-survol); border-color: var(--b-pointille); }

/* Encadré d'avertissement, réservé aux mentions qui doivent arrêter l'œil */
.avis {
  background: var(--jaune-conseil); border: 1px solid var(--jaune-bord);
  border-radius: 11px; padding: 14px 16px; margin: 0 0 16px;
}
.avis p { color: #4A3B08; margin: 0; font-size: 14.5px; }
.avis p + p { margin-top: 8px; }
.avis .titre { font-weight: 700; color: #332703; }

/* Marqueur des renseignements à compléter avant la mise en ligne.
   Volontairement voyant : aucune de ces mentions ne doit survivre au déploiement. */
.a-completer {
  background: #FFE9A8; border-bottom: 2px solid #B98C06; color: #332703;
  font-weight: 700; padding: 1px 5px; border-radius: 4px;
}

.fil { font-size: 13.5px; margin: 0 0 4px; }
.fil a { color: var(--bleu-lien); font-weight: 600; text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.maj { font-size: 12.5px; color: var(--t-indice); margin: 24px 0 0; }

/* ---------- Pied de page ---------- */

.pied { background: var(--bleu-fonce); color: var(--sur-bleu-4); margin-top: auto; padding: 32px 0 24px; }
.pied-inner { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.pied-cols { display: flex; flex-wrap: wrap; gap: 28px; }
.pied-col { flex: 1 1 200px; }
.pied-col h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sur-bleu-5); margin: 0 0 10px;
}
.pied-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied a { color: var(--sur-bleu-4); text-decoration: none; font-size: 14px; }
.pied a:hover { color: var(--jaune); }
.pied-texte { font-size: 14px; line-height: 1.6; max-width: 46ch; margin: 10px 0 0; }
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 26px; padding-top: 16px;
  font-size: 12.5px; color: var(--sur-bleu-5); line-height: 1.6; max-width: 72ch;
}

/* ---------- Téléphone ---------- */

@media (max-width: 600px) {
  :root { --gouttiere: 16px; }
  .titre-ecran { font-size: 22px; }
  .carte, .carte-entete { padding: 15px; }
  .corps-section { padding: 4px 8px; }
  .rangee { padding: 12px 4px; }
  /* Le nom prend toute la largeur, le montant et sa fréquence la ligne suivante. */
  .champ-nom { flex: 1 1 100%; max-width: none; }
  .groupe-montant { flex: 1 1 auto; min-width: 0; }
  .groupe-montant input { width: auto; flex: 1 1 56px; min-width: 0; }
  .groupe-montant select { flex: 0 1 auto; min-width: 0; }
  .select-personne { max-width: none; flex: 1 1 130px; min-width: 0; }
  .case-commun { flex: 0 1 auto; min-width: 0; }
  .rangee-dette { gap: 6px; }
  .mini-groupe { flex: 1 1 100%; justify-content: space-between; }
  .mini-groupe .groupe-montant { flex: 0 1 auto; }
  .mini-groupe .groupe-montant input { width: 90px; flex: 0 1 90px; }
  .bandeau { padding: 16px; }
  .actions .btn { flex: 1 1 100%; }

  /* Calendrier : la date ne doit jamais se casser en deux lignes. */
  .mouvement { gap: 4px 8px; padding: 10px 11px; }
  .mouv-date { flex: 0 0 auto; font-size: 11.5px; white-space: nowrap; }
  .mouv-nom { flex: 1 1 90px; min-width: 0; font-size: 13.5px; }
  .mouv-montant { flex: 0 0 auto; font-size: 13.5px; }
  .semaine-entete { padding: 9px 11px; }
  .semaine-titre { font-size: 12.5px; }
  .semaine-solde { font-size: 11.5px; }

  /* Postes et volets : les chiffres restent collés à leur libellé. */
  .poste-chiffres, .volet-chiffres { font-size: 12.5px; }
}

/* ---------- Impression : Ctrl+P donne aussi un bon résultat ---------- */

/* ---------- Impression directe (Ctrl+P) ----------
   Le PDF téléchargé est produit par pdf.js et ne dépend pas de ces règles.
   Celles-ci ne servent qu'à l'impression de la page depuis le navigateur —
   qui doit elle aussi tenir en portrait, quelle que soit la largeur d'écran. */
@page { size: A4 portrait; margin: 12mm; }

@media print {
  body { background: #fff; }
  .entete, .pied, .actions, .perspective, .btn { display: none !important; }
  /* La largeur d'écran ne doit surtout pas suivre jusqu'au papier : on repasse
     sur la largeur de la page imprimée. */
  :root, body.outil, body.accueil { --largeur: 100%; --gouttiere: 0; }
  main { max-width: 100%; width: 100%; padding: 0; gap: 12px; }
  .carte, .conseils, .indicateur { break-inside: avoid; border-color: #ccc; }
  .bandeau { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
  .bandeau-ligne, .bandeau-texte, .bandeau-solde-lib { color: #000 !important; }
  .bandeau-solde-val { color: #000 !important; }
  .tableau-wrap { overflow: visible; }
}


/* ==================================================================
   Échelles de barres — classes .l-0 à .l-100 et .g-0 à .g-100
   ------------------------------------------------------------------
   Pourquoi des classes plutôt qu'un `style="width:27%"` : la politique
   de sécurité du site interdit les attributs `style` (`style-src 'self'`,
   sans `'unsafe-inline'`). Un attribut `style` n'est pas rejeté avec une
   erreur, il est simplement IGNORÉ — les barres se dessinaient donc
   pleines à 100 % en production, alors qu'elles étaient justes en local
   et dans le PDF. Ces classes sont immunisées, et elles fonctionnent
   sans JavaScript, ce dont la page « Exemple de rapport » a besoin.

   Bloc produit par `node outils/generer-echelles.mjs`. Ne pas modifier
   à la main.
   ================================================================== */

.l-0 { width: 0%; }
.l-1 { width: 1%; }
.l-2 { width: 2%; }
.l-3 { width: 3%; }
.l-4 { width: 4%; }
.l-5 { width: 5%; }
.l-6 { width: 6%; }
.l-7 { width: 7%; }
.l-8 { width: 8%; }
.l-9 { width: 9%; }
.l-10 { width: 10%; }
.l-11 { width: 11%; }
.l-12 { width: 12%; }
.l-13 { width: 13%; }
.l-14 { width: 14%; }
.l-15 { width: 15%; }
.l-16 { width: 16%; }
.l-17 { width: 17%; }
.l-18 { width: 18%; }
.l-19 { width: 19%; }
.l-20 { width: 20%; }
.l-21 { width: 21%; }
.l-22 { width: 22%; }
.l-23 { width: 23%; }
.l-24 { width: 24%; }
.l-25 { width: 25%; }
.l-26 { width: 26%; }
.l-27 { width: 27%; }
.l-28 { width: 28%; }
.l-29 { width: 29%; }
.l-30 { width: 30%; }
.l-31 { width: 31%; }
.l-32 { width: 32%; }
.l-33 { width: 33%; }
.l-34 { width: 34%; }
.l-35 { width: 35%; }
.l-36 { width: 36%; }
.l-37 { width: 37%; }
.l-38 { width: 38%; }
.l-39 { width: 39%; }
.l-40 { width: 40%; }
.l-41 { width: 41%; }
.l-42 { width: 42%; }
.l-43 { width: 43%; }
.l-44 { width: 44%; }
.l-45 { width: 45%; }
.l-46 { width: 46%; }
.l-47 { width: 47%; }
.l-48 { width: 48%; }
.l-49 { width: 49%; }
.l-50 { width: 50%; }
.l-51 { width: 51%; }
.l-52 { width: 52%; }
.l-53 { width: 53%; }
.l-54 { width: 54%; }
.l-55 { width: 55%; }
.l-56 { width: 56%; }
.l-57 { width: 57%; }
.l-58 { width: 58%; }
.l-59 { width: 59%; }
.l-60 { width: 60%; }
.l-61 { width: 61%; }
.l-62 { width: 62%; }
.l-63 { width: 63%; }
.l-64 { width: 64%; }
.l-65 { width: 65%; }
.l-66 { width: 66%; }
.l-67 { width: 67%; }
.l-68 { width: 68%; }
.l-69 { width: 69%; }
.l-70 { width: 70%; }
.l-71 { width: 71%; }
.l-72 { width: 72%; }
.l-73 { width: 73%; }
.l-74 { width: 74%; }
.l-75 { width: 75%; }
.l-76 { width: 76%; }
.l-77 { width: 77%; }
.l-78 { width: 78%; }
.l-79 { width: 79%; }
.l-80 { width: 80%; }
.l-81 { width: 81%; }
.l-82 { width: 82%; }
.l-83 { width: 83%; }
.l-84 { width: 84%; }
.l-85 { width: 85%; }
.l-86 { width: 86%; }
.l-87 { width: 87%; }
.l-88 { width: 88%; }
.l-89 { width: 89%; }
.l-90 { width: 90%; }
.l-91 { width: 91%; }
.l-92 { width: 92%; }
.l-93 { width: 93%; }
.l-94 { width: 94%; }
.l-95 { width: 95%; }
.l-96 { width: 96%; }
.l-97 { width: 97%; }
.l-98 { width: 98%; }
.l-99 { width: 99%; }
.l-100 { width: 100%; }

.g-0 { left: 0%; }
.g-1 { left: 1%; }
.g-2 { left: 2%; }
.g-3 { left: 3%; }
.g-4 { left: 4%; }
.g-5 { left: 5%; }
.g-6 { left: 6%; }
.g-7 { left: 7%; }
.g-8 { left: 8%; }
.g-9 { left: 9%; }
.g-10 { left: 10%; }
.g-11 { left: 11%; }
.g-12 { left: 12%; }
.g-13 { left: 13%; }
.g-14 { left: 14%; }
.g-15 { left: 15%; }
.g-16 { left: 16%; }
.g-17 { left: 17%; }
.g-18 { left: 18%; }
.g-19 { left: 19%; }
.g-20 { left: 20%; }
.g-21 { left: 21%; }
.g-22 { left: 22%; }
.g-23 { left: 23%; }
.g-24 { left: 24%; }
.g-25 { left: 25%; }
.g-26 { left: 26%; }
.g-27 { left: 27%; }
.g-28 { left: 28%; }
.g-29 { left: 29%; }
.g-30 { left: 30%; }
.g-31 { left: 31%; }
.g-32 { left: 32%; }
.g-33 { left: 33%; }
.g-34 { left: 34%; }
.g-35 { left: 35%; }
.g-36 { left: 36%; }
.g-37 { left: 37%; }
.g-38 { left: 38%; }
.g-39 { left: 39%; }
.g-40 { left: 40%; }
.g-41 { left: 41%; }
.g-42 { left: 42%; }
.g-43 { left: 43%; }
.g-44 { left: 44%; }
.g-45 { left: 45%; }
.g-46 { left: 46%; }
.g-47 { left: 47%; }
.g-48 { left: 48%; }
.g-49 { left: 49%; }
.g-50 { left: 50%; }
.g-51 { left: 51%; }
.g-52 { left: 52%; }
.g-53 { left: 53%; }
.g-54 { left: 54%; }
.g-55 { left: 55%; }
.g-56 { left: 56%; }
.g-57 { left: 57%; }
.g-58 { left: 58%; }
.g-59 { left: 59%; }
.g-60 { left: 60%; }
.g-61 { left: 61%; }
.g-62 { left: 62%; }
.g-63 { left: 63%; }
.g-64 { left: 64%; }
.g-65 { left: 65%; }
.g-66 { left: 66%; }
.g-67 { left: 67%; }
.g-68 { left: 68%; }
.g-69 { left: 69%; }
.g-70 { left: 70%; }
.g-71 { left: 71%; }
.g-72 { left: 72%; }
.g-73 { left: 73%; }
.g-74 { left: 74%; }
.g-75 { left: 75%; }
.g-76 { left: 76%; }
.g-77 { left: 77%; }
.g-78 { left: 78%; }
.g-79 { left: 79%; }
.g-80 { left: 80%; }
.g-81 { left: 81%; }
.g-82 { left: 82%; }
.g-83 { left: 83%; }
.g-84 { left: 84%; }
.g-85 { left: 85%; }
.g-86 { left: 86%; }
.g-87 { left: 87%; }
.g-88 { left: 88%; }
.g-89 { left: 89%; }
.g-90 { left: 90%; }
.g-91 { left: 91%; }
.g-92 { left: 92%; }
.g-93 { left: 93%; }
.g-94 { left: 94%; }
.g-95 { left: 95%; }
.g-96 { left: 96%; }
.g-97 { left: 97%; }
.g-98 { left: 98%; }
.g-99 { left: 99%; }
.g-100 { left: 100%; }

/* FIN DES ÉCHELLES */