/* ============================================================================
   check-list — LA FEUILLE DES DEUX LANGUES.

   Le CSS n'a pas de langue. Cette feuille etait ecrite DEUX FOIS : une dans
   check-list.html, une recopiee a la main dans en/check-list.html. Reunies le 09/09/2026 —
   une retouche se fait desormais a UN seul endroit.

   Preuve du deplacement : tools/empreinte-styles.py, qui compare le style
   CALCULE de chaque element avant et apres, aux deux largeurs et dans les
   deux themes.
   ============================================================================ */

  /* Check-list des documents — styles locaux */
  .cl-wrap { max-width: 880px; margin: 0 auto; }
  .cl-carte { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
  .cl-q { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .cl-q:last-child { border-bottom: none; }
  .cl-q-titre { font-family: Sora, sans-serif; font-weight: 600; font-size: var(--fs-base, .9375rem); color: var(--navy-dark); margin-bottom: 10px; }
  .cl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .cl-opt { padding: 9px 15px; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-sm);
    font-family: inherit; font-size: var(--fs-sm, .875rem); color: var(--ink); cursor: pointer; transition: background-color .18s, border-color .18s, color .18s, transform .18s; text-align: left; }
  .cl-opt:hover { border-color: var(--red); color: var(--red-dark); }
  .cl-opt.on { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; font-weight: 600; }
  /* Avancement */
  .cl-suivi { position: sticky; top: calc(var(--fr-haut-nav, 84px) + 8px); z-index: 40; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .cl-suivi-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .cl-suivi-tete b { font-family: Sora, sans-serif; font-size: var(--fs-xl, 1.5rem); color: var(--navy-dark); }
  .cl-suivi-tete span { font-size: var(--fs-sm, .875rem); color: var(--muted); }
  .cl-barre { height: 8px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; margin-top: 10px; }
  .cl-barre i { display: block; height: 100%; width: 0; background: var(--red); border-radius: var(--r-pill); transition: width .4s ease, background .4s; }
  /* Documents */
  .cl-cat { margin-bottom: 24px; }
  .cl-cat h3 { font-size: var(--fs-xs, .75rem); text-transform: uppercase; letter-spacing: 1.2px; color: var(--red-dark);
    margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--blush); }
  .cl-doc { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r); padding: 14px 16px; margin-bottom: 8px; cursor: pointer; transition: background-color .18s, border-color .18s; }
  .cl-doc:hover { border-color: #F3D4D2; }
  .cl-doc input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; cursor: pointer; }
  .cl-doc-corps { flex: 1; min-width: 0; }
  .cl-doc-corps b { display: block; font-size: var(--fs-base, .9375rem); color: var(--navy-dark); line-height: 1.4; }
  .cl-doc-corps small { display: block; font-size: var(--fs-sm, .875rem); color: var(--muted); margin-top: 4px; line-height: 1.55; }
  .cl-piege { display: block; font-size: var(--fs-sm, .875rem); color: var(--amber-ink); background: var(--amber-light);
    border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); border-radius: var(--r-sm); padding: 8px 11px; margin-top: 9px; line-height: 1.55; }
  .cl-doc.fait { background: var(--teal-light); border-color: #BFE3CE; }
  .cl-doc.fait .cl-doc-corps b { text-decoration: line-through; opacity: .6; }
  .cl-doc.fait .cl-doc-corps small, .cl-doc.fait .cl-piege { display: none; }
  /* Bloc de conclusion */
  .cl-fin { background: linear-gradient(135deg, #fff 0%, var(--blush) 100%); border: 2px solid #F3D4D2;
    border-radius: var(--r); padding: 24px; margin-top: 26px; text-align: center; }
  .cl-fin p { font-size: var(--fs-base, .9375rem); color: var(--ink); line-height: 1.6; max-width: 640px; margin: 0 auto 16px; }
  .cl-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
  .cl-note { font-size: var(--fs-sm, .875rem); color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.6; }
  /* Plancher téléphone : rien sous 14 px (audit #38 / #66). */
  @media (max-width: 768px) { .cl-cat h3 { font-size: .875rem; } }
  @media print {
    .topbar, .navbar, footer, .wa-float, .cl-actions, .cl-fin, .cl-suivi { display: none !important; }
    .cl-doc { break-inside: avoid; }
  }
    @media (max-width: 768px) { .cl-opt { min-height: 44px; } }

  /* Barème officiel IRCC — styles locaux (préfixe bi- : aucun nom partagé
     avec la charte du site, comme l'exige CHARTE.md) */
  .bi-bloc { max-width: 900px; margin: 0 auto 34px; }
  /* 🐛 DÉFAUT VU PAR ALEX LE 16/08 : la première lettre des titres était
     rognée (« REUVE DE FONDS », « ISITE MÉDICALE »). Le titre était un
     <caption>, donc DANS le tableau, et le tableau porte overflow:hidden
     pour arrondir ses coins, à l'intérieur d'un cadre qui défile. Le titre
     est désormais AU-DESSUS du cadre, et chaque tableau a le sien : plus rien
     ne peut le rogner, et sur téléphone il reste en place pendant qu'on fait
     glisser les colonnes. */
  .bi-titre { font-family: 'Sora', sans-serif; font-size: .75rem; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--red-dark); font-weight: 700; margin: 30px 0 9px; }
  .bi-bloc > div > .bi-titre:first-child { margin-top: 0; }
  .bi-defil { overflow-x: auto; margin-bottom: 14px; }
  .bi-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .875rem;
    border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .bi-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); background: var(--blush); padding: 9px 14px; white-space: nowrap; }
  .bi-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
  .bi-table td small { display: block; margin-top: 3px; font-size: .75rem; color: var(--muted); line-height: 1.5; }
  /* Les colonnes de MONNAIE s'alignent à droite. C'est la règle de tout
     tableau de chiffres — les montants se comparent alors d'un coup d'œil —
     et c'est ce qui répond à la remarque d'Alex du 16/08 : le tableau de la
     visite médicale, qui n'a que deux colonnes, ne laisse plus tout son côté
     droit vide. */
  .bi-table th + th, .bi-table td + td { text-align: right; }
  .bi-cad { font-weight: 700; white-space: nowrap; }
  .bi-fcfa { white-space: nowrap; color: var(--red-dark); font-weight: 600; }
  /* 📱 TÉLÉPHONE — signalé par Alex le 18/08/2026 : sur un écran de 375 px, les
     tableaux mesuraient 420 px. Ils tenaient dans une boîte qui défile, mais RIEN
     ne le disait : on voyait la colonne des FCFA coupée net et on croyait la page
     cassée. Or c'est LA colonne qui intéresse un candidat camerounais.
     Deux coupables : les en-têtes interdits de passer à la ligne, et 28 px de
     marge intérieure par cellule. On les desserre, sans jamais casser un montant
     en deux, un « 6 563 090 F » coupé serait pire que tout. */
  @media (max-width: 560px) {
    .bi-table { font-size: .875rem; }
    .bi-table th { white-space: normal; padding: 8px 8px; font-size: .75rem; letter-spacing: .03em; }
    .bi-table td { padding: 9px 8px; }
    .bi-table td small { font-size: .75rem; }
    .bi-cad, .bi-fcfa { white-space: nowrap; }
  }
  .bi-taux { display: block; font-size: .875rem; color: var(--muted); line-height: 1.65;
    background: var(--blush); border-radius: var(--r-sm); padding: 11px 14px; margin-bottom: 12px; }
  .bi-taux-vieux { background: #FDF6E3; color: #7A5B12; }
  .bi-note { font-size: .875rem; line-height: 1.65; margin: 0 0 18px; padding: 11px 14px;
    border: 1px solid var(--line); background: var(--bg); border-radius: var(--r-sm); }
  .bi-source { font-size: .75rem; color: var(--muted); line-height: 1.6; margin: 0; }
  .bi-attente { font-size: .875rem; color: var(--muted); }
  /* Partage en image : un bouton par tableau, discret mais toujours visible. */
  .bi-partage { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px;
    font: 600 .875rem/1 'Inter', sans-serif; color: var(--red-dark); cursor: pointer;
    background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 10px 17px;
    transition: background-color .18s, border-color .18s, color .18s, transform .18s; }
  .bi-partage:hover { border-color: var(--red-dark); background: var(--blush); }
  .bi-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
  .bi-actions .bi-partage { margin: 0; }
  /* WhatsApp garde SA couleur : c'est ce qui le rend reconnaissable d'un
     coup d'œil, et c'est le bouton qu'on veut voir en premier. */
  .bi-wa { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--sur-couleur); }
  .bi-wa:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--sur-couleur); }
  .bi-astuce { flex-basis: 100%; font-size: .875rem; line-height: 1.6; color: var(--muted);
    margin: 2px 0 0; }
  .bi-astuce a { color: var(--red-dark); }

  /* Calculateur de budget — styles locaux */
  .fr-wrap { max-width: 900px; margin: 0 auto; }
  .fr-carte { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 18px; }
  .fr-carte h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--red-dark);
    margin-bottom: 14px; padding-bottom: 7px; border-bottom: 2px solid var(--blush); }
  .fr-champs { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 620px) { .fr-champs { grid-template-columns: repeat(2, 1fr); } }
  .fr-champ { display: flex; flex-direction: column; gap: 5px; font-size: .875rem; color: var(--muted); font-weight: 500; }
  .fr-champ input { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-family: inherit; font-size: .9375rem; color: var(--ink); width: 100%; }
  .fr-champ input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
  .fr-aide { font-size: .75rem; color: var(--muted); line-height: 1.55; margin-top: 10px; }
  /* Le TAUX est affiché, pas saisi : c'est le cours du jour qui fait foi. Un
     bouton ouvre la saisie pour qui veut le taux de sa banque. */
  .fr-taux { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .875rem; }
  .fr-taux b { font-family: Sora, sans-serif; font-size: 1.125rem; color: var(--navy-dark); }
  .fr-taux small { font-size: .75rem; color: var(--muted); flex-basis: 100%; line-height: 1.55; }
  .fr-lien { background: none; border: 0; padding: 0; cursor: pointer;
    font: 600 .875rem/1.5 'Inter', sans-serif; color: var(--red-dark); text-decoration: underline; }
  /* Ce que le VISITEUR renseigne : ces tarifs varient d'un cas à l'autre, et
     personne d'autre que lui ne les connaît. Bloc distinct pour qu'on voie
     tout de suite ce qui est à remplir. */
  .fr-vous { background: var(--blush); border-radius: var(--r); padding: 15px 16px 16px; margin: 4px 0 16px; }
  .fr-vous > p { font-size: .875rem; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
  .fr-modif { font-size: .75rem; color: var(--red-dark); font-weight: 600; }
  /* Resume colle en haut. ⚠️ PAS à 0 : le bandeau du site est lui aussi
     collant, et à 0 le total passait DERRIÈRE lui, coupé en deux — défaut vu
     par Alex le 16/08. La hauteur exacte est MESURÉE par js/frais.js
     (--fr-haut-nav) : le bandeau fait 68 px sur une ligne, jusqu'à 84 px quand
     le menu passe à la ligne, vers 960 px de large. Une valeur figée
     recréerait le défaut sur la moitié des écrans. */
  .fr-resume { position: sticky; top: var(--fr-haut-nav, 88px); z-index: 30; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r); padding: 16px 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .fr-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .fr-total-lab { font-size: .875rem; color: var(--muted); flex-basis: 100%; }
  .fr-total b { font-family: Sora, sans-serif; font-size: 1.5rem; color: var(--red-dark); line-height: 1.1; }
  .fr-total small { font-size: .875rem; color: var(--muted); }
  .fr-fonds { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: .875rem; color: var(--amber-ink); line-height: 1.6; }
  .fr-fonds b { color: var(--navy-dark); }
  /* Lignes de detail */
  .fr-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
  .fr-ligne:last-child { border-bottom: none; }
  .fr-ligne b { color: var(--navy-dark); font-weight: 600; display: block; }
  .fr-ligne small { display: block; font-size: .75rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .fr-montant { font-family: Sora, sans-serif; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
  .fr-sous-total { background: var(--bg); margin: 0 -24px; padding: 12px 24px; border-bottom: none; }
  .fr-sous-total .fr-montant { color: var(--red-dark); }
  .fr-fin { background: linear-gradient(135deg, var(--white) 0%, var(--blush) 100%); border: 2px solid #F3D4D2;
    border-radius: var(--r); padding: 24px; text-align: center; }
  .fr-fin p { font-size: .9375rem; color: var(--ink); line-height: 1.6; max-width: 640px; margin: 0 auto 16px; }
  .fr-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
  .fr-note { font-size: .875rem; color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.6; }
  /* En-tête de la feuille imprimée : invisible à l'écran, il rappelle qui a
     fait le calcul, quand, et sur quelles hypothèses. Sans lui, la feuille
     sortie de l'imprimante ne dirait ni d'où elle vient ni pour combien de
     personnes elle a été faite. */
  .fr-impr { display: none; }
  /* 🖨 IMPRESSION — refaite le 16/08 : « le bouton imprimer n'imprime pas, et
     l'impression prend aussi les tableaux de POF, VM et frais de RP, ce n'est
     pas nécessaire ». Deux fautes dans l'ancienne règle : elle CACHAIT le
     total (.fr-resume) — la feuille sortait sans le chiffre qu'on voulait —
     et elle ne cachait PAS les trois tableaux de référence (.bi-bloc).
     On imprime donc UNIQUEMENT le budget : hypothèses, détail IRCC, détail
     Cameroun, total. */
  @media print {
    .topbar, .navbar, footer, .wa-float, .bi-bloc, .fr-actions, #frWa,
    .page-hero, .section-head, .fr-champs, .fr-vous,
    /* Ces deux cartes n'ont plus rien à dire sur le papier : leurs champs sont
       cachés, et l'en-tête de la feuille porte déjà la composition de la famille
       et le taux avec sa source. Le renvoi « à renseigner ci-dessus » non plus :
       il désigne un bloc qui ne s'imprime pas. */
    #frCarteSituation, #frCarteTaux, .fr-modif, .fr-lien { display: none !important; }
    /* La mise en garde (« cette estimation ne remplace pas les barèmes
       officiels d'IRCC ») RESTE imprimée : une feuille de budget circule, se
       photographie et se transmet — c'est précisément là qu'elle sert. */
    .fr-note { font-size: .75rem !important; margin-top: 12px !important; }
    .fr-impr { display: block !important; margin-bottom: 18px; }
    .fr-impr h2 { font-family: Sora, sans-serif; font-size: 1.125rem; color: var(--red-dark); margin-bottom: 4px; }
    .fr-impr p { font-size: .875rem; color: #444; line-height: 1.6; margin: 0; }
    .fr-resume { position: static !important; box-shadow: none !important; }
    .fr-carte, .fr-resume, .fr-fin { break-inside: avoid; page-break-inside: avoid;
      border: 1px solid #DDD !important; background: var(--white) !important; }
    .fr-fin { text-align: left; }
    .section { padding: 0 !important; }
    body { background: var(--white); }
  }
  /* 📱 Sous 768 px (règle maison, audit du 22/08) : aucun texte sous 14 px,
     aucune cible tactile sous 44 px, champs de saisie à 16 px pour que le
     téléphone ne zoome pas à la saisie. */
  @media (max-width: 767px) {
    .bi-titre, .bi-table th, .bi-table td small, .bi-source, .fr-carte h3, .fr-aide, .fr-taux small, .fr-modif, .fr-ligne small { font-size: .875rem; }
    .bi-partage, .fr-lien { min-height: 44px; }
    .fr-champ input { font-size: 1rem; min-height: 44px; }
    .fr-champ small { font-size: .875rem; }
  }

/* ---------- Vérificateur de lettre (26/08/2026) ---------- */
.vl-avis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r);
  background: var(--blush); border: 1px solid var(--red-dark); margin-bottom: 22px; }
.vl-avis p { margin: 0; font-size: .9375rem; color: var(--red-ink); }
.vl-depot { border: 2px dashed var(--red-dark); border-radius: var(--r); padding: 22px; text-align: center;
  background: var(--blush); margin-bottom: 18px; transition: background .15s, border-color .15s; }
.vl-depot.survol { background: #FBE3E1; border-color: var(--red); }
.vl-depot-aide { margin: 10px 0 0; font-size: .9375rem; color: var(--red-ink); }
.vl-depot-aide.erreur { color: var(--red-dark); font-weight: 600; }
.vl-depot-aide.ok { color: var(--teal); font-weight: 600; }
.vl-saisie { margin-bottom: 26px; }
.vl-saisie label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.vl-saisie textarea { width: 100%; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: 1rem; line-height: 1.6; min-height: 220px; resize: vertical; }
.vl-saisie textarea:focus { outline: none; border-color: var(--red); box-shadow: var(--ring); }
.vl-saisie .vl-sous { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 8px; flex-wrap: wrap; }
.vl-saisie small { color: var(--muted); font-size: .875rem; }
.vl-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.vl-point { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--white); }
.vl-point.ok { border-color: var(--teal); background: #F3FBF6; }
.vl-point.manque { border-color: var(--amber); background: #FDFAF1; }
.vl-verdict { flex: 0 0 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 700; background: var(--bg); color: var(--muted); }
.vl-point.ok .vl-verdict { background: var(--teal-dark); color: #fff; }
.vl-point.manque .vl-verdict { background: var(--amber); color: #fff; }
.vl-corps h3 { font-size: 1rem; color: var(--navy-dark); margin: 0 0 6px; }
.vl-pourquoi { font-size: .9375rem; color: var(--ink); margin: 0 0 6px; line-height: 1.6; }
.vl-exemple { font-size: .875rem; color: var(--muted); margin: 0 0 8px; }
.vl-forcer { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted);
  min-height: 44px; cursor: pointer; }
.vl-forcer input { width: 18px; height: 18px; accent-color: var(--red); }
.vl-manuels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.vl-case { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--white); cursor: pointer; min-height: 44px; }
.vl-case input { width: 20px; height: 20px; accent-color: var(--red); margin-top: 2px; }
.vl-case span { font-size: .9375rem; }
.vl-case small { display: block; color: var(--muted); font-size: .875rem; margin-top: 3px; }
.vl-resultat { padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.vl-resultat.ok { border-color: var(--teal); background: #F3FBF6; }
.vl-resultat.manque { border-color: var(--amber); background: #FDFAF1; }
/* Tout ce que je peux lire est la, mais il reste des points que SEUL L'OEIL
   voit sur le papier. Ce n'est ni un echec ni une reussite complete : c'est
   un vert prudent, et la phrase qui va avec dit pourquoi. */
.vl-resultat.presque { border-color: var(--teal); background: #F5FAF8; }
.vl-aoeil { font-size: .9375rem; color: var(--ink); margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--white); border: 1px dashed var(--line); }
.vl-resultat h3 { font-size: 1.125rem; color: var(--navy-dark); margin: 0 0 10px; }
.vl-resultat ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.8; font-size: .9375rem; }
.vl-rappel { font-size: .9375rem; color: var(--ink); margin: 0 0 14px; }
.vl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vl-message { display: block; margin: 0 0 14px; }
.vl-message span { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: .9375rem; }
.vl-message textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: .9375rem; line-height: 1.6; background: var(--white); resize: vertical; }

.sp-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-bottom: 24px; }
.sp-champ { display: block; }
.sp-champ > span { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: .9375rem; }
.sp-champ input { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: 1rem; }
.sp-champ input:focus { outline: none; border-color: var(--red); box-shadow: var(--ring); }
.sp-champ small { display: block; margin-top: 5px; color: var(--muted); font-size: .875rem; }
.sp-alerte { padding: 13px 16px; border-radius: var(--r-sm); background: var(--blush);
  border: 1px solid var(--red-dark); color: var(--red-ink); font-size: .9375rem; margin-bottom: 16px; }
.sp-calme { padding: 13px 16px; border-radius: var(--r-sm); background: #F3FBF6; border: 1px solid var(--teal);
  color: var(--teal-ink); font-weight: 600; font-size: .9375rem; margin-bottom: 16px; }
/* 10/09/2026 — l'état d'une ligne se lit à une PASTILLE devant son titre
   (plus au trait épais sur le bord gauche) ; le fond teinté reste. */
.sp-ligne { padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); margin-bottom: 12px; --sp-etat: var(--line-strong); }
.sp-ligne h3::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sp-etat); margin-right: 8px; vertical-align: .12em; }
.sp-ligne.ok { --sp-etat: var(--teal); }
.sp-ligne.bientot { --sp-etat: var(--amber); background: #FDFAF1; border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); }
.sp-ligne.expire { --sp-etat: var(--red); background: var(--blush); border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.sp-ligne.info { --sp-etat: var(--muted); }
.sp-ligne h3 { font-size: 1rem; color: var(--navy-dark); margin: 0 0 6px; }
.sp-ligne p { font-size: .9375rem; line-height: 1.7; margin: 0; }

/* Le jour J (30/08, listes fournies par Alex) : ce qu'on apporte à la
   visite médicale et à la biométrie — deux cartes côte à côte. */
/* 09/10 : 3e carte (dépôt du passeport, la plus longue) — deux colonnes au plus,
   et elle passe en dessous sur toute la largeur (.sp-large). */
.sp-apporter { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px; margin-top: 18px; }
.sp-apporter .sp-large { grid-column: 1 / -1; }
.sp-apporter article { border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sp-apporter h3 { display: flex; align-items: center; gap: 9px; font-size: var(--fs-md);
  color: var(--navy-dark); margin: 0 0 10px; }
.sp-apporter ul { margin: 0; padding: 0; list-style: none; }
.sp-apporter li { position: relative; padding: 5px 0 5px 26px; font-size: .9375rem; line-height: 1.65; }
.sp-apporter li::before { content: '✓'; position: absolute; left: 2px; top: 5px;
  color: var(--teal); font-weight: 700; }
.sp-apporter .sp-lieu { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg); font-size: .875rem; line-height: 1.65; color: var(--ink); }
.sp-apporter .sp-lieu b { color: var(--navy-dark); }
.sp-apporter .sp-rib { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: .875rem; }
.sp-apporter .sp-rib th, .sp-apporter .sp-rib td { padding: 7px 3px; border: 1px solid var(--line-strong); text-align: center; }
.sp-apporter .sp-rib th { color: var(--navy-dark); font-weight: 700; line-height: 1.3; }
.sp-apporter .sp-rib td { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 359px) { .sp-apporter .sp-rib { font-size: .75rem; } }
.sp-apporter .sp-maps { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }

/* ----- annuaires officiels (notaires, microfinances) ----- */
.ann-bloc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; margin-top: 18px; }
.ann-bloc header h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: var(--fs-md); color: var(--navy-dark); }
.ann-nb { background: var(--blush); color: var(--red-dark); font-family: Inter, sans-serif;
  font-size: var(--fs-sm); font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill); }
.ann-bloc header p { font-size: .875rem; color: var(--muted); margin: 8px 0 0; line-height: 1.65; }
.ann-outils { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ann-cherche { flex: 1 1 220px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: var(--r-sm); font: inherit; font-size: .9375rem; background: var(--bg); color: var(--ink); }
.ann-cherche:focus { outline: 2px solid var(--red); outline-offset: 1px; background: var(--white); }
.ann-compte { font-size: .875rem; color: var(--muted); margin: 10px 0 0; }
.ann-defile { overflow-x: auto; margin-top: 8px; }
.ann-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 720px; }
.ann-table th { text-align: left; border-bottom: 2px solid var(--blush); padding: 8px 10px; }
.ann-tri { font-family: Sora, sans-serif; font-size: var(--fs-sm); font-weight: 600;
  color: var(--navy-dark); background: none; border: 0; cursor: pointer; padding: 0; }
.ann-tri:hover { color: var(--red); }
.ann-table td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; line-height: 1.55; }
.ann-table td b { color: var(--ink); }
.ann-table td small { display: block; color: var(--muted); margin-top: 2px; }
.ann-vide { font-size: .9375rem; color: var(--muted); padding: 14px 2px; }

/* ----- compte à rebours ITA + 60 jours ----- */
.rb-carte { background: var(--white); border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
  border-radius: var(--r); padding: 18px 20px; margin: 18px 0 6px; }
.rb-titre { display: flex; align-items: center; gap: 8px; color: var(--navy-dark); font-size: 1rem; }
.rb-invite, .rb-limite { margin-top: 10px; font-size: .9375rem; line-height: 1.65; }
.rb-invite { color: var(--muted); }
.rb-blocs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rb-blocs > div { flex: 1 1 90px; min-width: 76px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); text-align: center; padding: 10px 6px; }
.rb-blocs b { display: block; font-family: Sora, sans-serif; font-size: 1.5rem;
  color: var(--red-dark); font-variant-numeric: tabular-nums; }
.rb-blocs span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rb-alerte { margin-top: 10px; font-size: .9375rem; font-weight: 600; color: var(--red-dark); }
.rb-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.rb-carte.rb-urgent { border-left-color: var(--amber); }
.rb-carte.rb-depasse { border-left-color: var(--red-dark); background: var(--blush); }
.rb-carte.rb-ok { border-left-color: var(--teal); }

/* ----- compresser un PDF (30/08) ----- */
.cp-depot { border: 2px dashed var(--line); border-radius: var(--r); background: var(--white);
  padding: 34px 20px; text-align: center; transition: border-color .15s, background-color .15s; }
.cp-depot.cp-survol { border-color: var(--red); background: var(--blush); }
.cp-ico { font-size: 2rem; margin-bottom: 8px; }
.cp-glisser { margin-top: 10px; color: var(--muted); font-size: .9375rem; }
.cp-etat { margin-top: 14px; font-size: .9375rem; color: var(--muted); }
.cp-infos { margin-top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 18px; font-size: .9375rem; line-height: 1.7; }
.cp-badge { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm);
  font-weight: 600; margin-left: 6px; }
.cp-badge.ok { background: var(--teal-light); color: var(--teal-ink); }
.cp-badge.ko { background: var(--blush); color: var(--red-dark); }
.cp-niveaux { display: grid; gap: 8px; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 760px) { .cp-niveaux { gap: 12px; } }
.cp-niveau { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-niveau h3 { font-size: 1rem; color: var(--navy-dark); }
.cp-niveau p { font-size: .875rem; color: var(--muted); line-height: 1.6; margin: 0; }
.cp-niveau .cp-taille { color: var(--ink); }
.cp-niveau .btn { margin-top: auto; }
/* 08/09 (Alex, capture) : les trois niveaux étaient empilés sur téléphone —
   trois plaques de 200 px à faire défiler avant de comparer. Elles tiennent
   maintenant sur une rangée : le nom, la taille estimée, le verdict, le
   bouton. La phrase d'explication n'apparaît qu'à partir de 760 px. */
.cp-court { display: none; }
@media (max-width: 759px) {
  .cp-niveau { padding: 12px 6px; gap: 6px; text-align: center; }
  /* « Moyenne » en Sora gras fait 76 px : le titre prend toute la largeur
     de la plaque (94 px), sans marge ni retrait herites. */
  .cp-niveau h3 { font-size: var(--fs-sm); width: 100%; margin: 0; padding: 0; letter-spacing: -.2px; overflow-wrap: anywhere; }
  .cp-niveau p:not(.cp-taille) { display: none; }
  .cp-niveau .cp-taille { font-size: var(--fs-xs); line-height: 1.5; }
  .cp-badge { margin: 4px 0 0; padding: 2px 6px; font-size: var(--fs-xs); }
  .cp-niveau .btn { padding: 10px 6px; font-size: var(--fs-xs); width: 100%; }
  .cp-long { display: none; }
  .cp-court { display: inline; }
  button.cp-niveau span { display: none; }
}
.cp-resultat { margin-top: 18px; background: var(--teal-light); border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
  border-radius: var(--r); padding: 18px 20px; }
.cp-resultat h3 { font-size: 1rem; color: var(--navy-dark); margin-bottom: 8px; }
.cp-note { font-size: .875rem; color: var(--muted); line-height: 1.65; margin-top: 10px; }

/* ----- la barre des volets en trois familles (30/08) -----
   La grille auto-fit de .fus-barre donnait des lignes inégales à dix
   pilules ; ici, trois groupes étiquetés. Sur téléphone, la barre se
   replie en un bouton qui porte le nom de l'outil ouvert. */
.fus-groupes-barre { display: block; }
.fus-plier { display: none; }
/* Une GRILLE, pas un flux (30/08, « organise ca mieux » d'Alex) : les
   familles avaient des largeurs tres inegales, le flux les rangeait donc
   n'importe comment — une famille seule sur sa ligne, deux sur la suivante.
   Une colonne par famille : les titres s'alignent, chaque outil tient sur
   sa ligne, et la barre garde la meme hauteur quoi qu'on y ajoute. */
.fus-groupes { display: grid; align-items: start; gap: 14px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Le nombre de colonnes est DECIDE, pas devine : auto-fit laissait la
   quatrieme famille orpheline sur sa propre rangee des que le conteneur
   manquait de quelques pixels. Deux paliers francs. */
@media (min-width: 768px)  { .fus-groupes { gap: 20px 16px; } }
@media (min-width: 1040px) { .fus-groupes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fus-groupe { flex: 0 1 auto; min-width: 0; }
.fus-groupe-titre { display: block; text-align: center; font-family: Sora, sans-serif;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
/* Dans sa colonne, chaque outil prend toute la largeur : on lit une liste,
   plus une mosaique de pilules de tailles differentes. */
.fus-groupe-onglets { display: flex; flex-direction: column; gap: 8px; }
.fus-groupes-barre .fus-groupe-onglets .fus-onglet { width: 100%; text-align: left; justify-content: flex-start; }
.fus-groupes-barre .fus-onglet { font-size: .9375rem; padding: 9px 12px; }
@media (max-width: 767px) {
  .fus-plier { display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid var(--line);
    border-radius: var(--r-pill); background: var(--white); color: var(--ink); font: inherit; font-size: 1rem;
    font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
  .fus-plier svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s ease; }
  .fus-groupes-barre.ouverte .fus-plier { border-color: var(--red); }
  .fus-groupes-barre.ouverte .fus-plier svg { transform: rotate(180deg); }
  .fus-groupes { display: none; }
  .fus-groupes-barre.ouverte .fus-groupes { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
  .fus-groupe-onglets .fus-onglet { width: 100%; }
  @media (prefers-reduced-motion: reduce) { .fus-plier svg { transition: none; } }
}
.sp-vide { color: var(--muted); font-size: .9375rem; padding: 18px 0; }

/* ---------- Cohérence du dossier (26/08/2026) ---------- */
.cd-avis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r);
  background: var(--blush); border: 1px solid var(--red-dark); margin-bottom: 24px; }
.cd-avis p { margin: 0; font-size: .9375rem; color: var(--red-ink); }
.cd-bloc { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 22px; background: var(--white); }
.cd-bloc h2 { font-size: 1.125rem; color: var(--navy-dark); margin: 0 0 6px; }
.cd-bloc > p.cd-intro { font-size: .9375rem; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
.cd-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cd-champ { display: block; }
.cd-champ > span { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: .9375rem; }
.cd-champ input, .cd-champ select { width: 100%; padding: 11px 13px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font: inherit; font-size: 1rem; }
.cd-champ input:focus, .cd-champ select:focus { outline: none; border-color: var(--red);
  box-shadow: var(--ring); }
.cd-champ small { display: block; margin-top: 5px; color: var(--muted); font-size: .875rem; }
.cd-exige { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg);
  font-size: .9375rem; color: var(--ink); }
.cd-exige small { color: var(--muted); font-size: .875rem; }
.cd-cases { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cd-case { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer; min-height: 44px; }
.cd-case input { width: 20px; height: 20px; accent-color: var(--red); margin-top: 2px; }
.cd-case span { font-size: .9375rem; }
.cd-case small { display: block; color: var(--muted); font-size: .875rem; margin-top: 3px; }
.cd-resultat { padding: 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.cd-resultat.ok { border-color: var(--teal); background: #F3FBF6; }
.cd-resultat.manque { border-color: var(--amber); background: #FDFAF1; }
.cd-resultat h3 { font-size: 1.125rem; color: var(--navy-dark); margin: 0 0 12px; }
.cd-resultat ul { margin: 0 0 14px; padding-left: 20px; }
.cd-resultat li { margin-bottom: 12px; line-height: 1.7; font-size: .9375rem; }
.cd-bien { font-size: .9375rem; color: var(--teal); font-weight: 600; margin: 0 0 14px; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; }



.ede-etapes { counter-reset: ede; display: flex; flex-direction: column; gap: 16px; margin: 22px 0; }
.ede-etape { position: relative; padding: 18px 20px 18px 62px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--white); }
.ede-etape::before { counter-increment: ede; content: counter(ede); position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--red-fond); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9375rem; }
.ede-etape h3 { font-size: 1rem; color: var(--navy-dark); margin: 0 0 6px; }
.ede-etape p { font-size: .9375rem; line-height: 1.7; margin: 0 0 8px; }
.ede-etape .ede-piege { font-size: .875rem; color: var(--red-ink); background: var(--blush);
  padding: 9px 12px; border-radius: var(--r-sm); margin: 8px 0 0; }
.ede-tableau { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9375rem; }
.ede-tableau th { text-align: left; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 8px 12px; border-bottom: 2px solid var(--line); }
.ede-tableau td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Les trois ordres professionnels se distinguent des cinq organismes
   generaux : ils ne concernent qu'un metier, et seulement si ce metier
   exige un permis d'exercice. */
.ede-tableau .ede-ordre td { background: var(--bg); }
.ede-tableau .ede-ordre td:first-child { box-shadow: inset 3px 0 0 var(--red-dark); }
.ede-tableau .ede-ordre small { color: var(--muted); font-weight: 400; }
.ede-defil { overflow-x: auto; }

  /* 07/09 — LE TRAITEMENT PAR LOTS. Une ligne par fichier : son nom, son
     poids, ce qu'il devient. Les fichiers passent l'un apres l'autre. */
  .cp-lot { margin-top: var(--sp-5); }
  .cp-lot h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
  .cp-lot-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .cp-lot-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); font-size: var(--fs-sm); }
  .cp-lot-nom { font-weight: 600; flex: 1 1 180px; min-width: 0; word-break: break-word; }
  .cp-lot-etat { color: var(--muted); font-size: var(--fs-xs); flex: 0 1 auto; }
  .cp-lot-etat.fait { color: var(--teal-dark); font-weight: 600; }
  .cp-lot-etat.rate { color: var(--red-dark); font-weight: 600; }
  .cp-lot-liste .btn { padding: 6px 12px; font-size: var(--fs-xs); }
  .cp-lot-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); align-items: center; }

/* ── 10/09/2026 — modernisation : l'étiquette ne coiffe plus le titre, elle le
   SUIT, comme une ligne d'appoint (une étiquette AU-DESSUS d'un titre est le
   premier signe d'un gabarit). Le code des pages n'a pas bougé : seul l'ordre
   à l'écran change — l'étiquette ne contient rien qu'on puisse cliquer. ── */
.section-head:has(> .eyebrow), .section-head-left:has(> .eyebrow) { display: flex; flex-direction: column; }
.section-head:has(> .eyebrow) { align-items: center; }
.section-head:has(> .eyebrow) > *, .section-head-left:has(> .eyebrow) > * { order: 2; }
.section-head:has(> .eyebrow) > h2, .section-head-left:has(> .eyebrow) > h2 { order: 0; }
.section-head:has(> .eyebrow) > .eyebrow, .section-head-left:has(> .eyebrow) > .eyebrow { order: 1; margin: 12px 0 0; }

/* ── 11/09/2026 — CONVERTISSEUR DE DEVISES (demande d'Alex) ─────────────────
   Dans l'onglet « Le barème officiel », au-dessus des tableaux dont il reprend
   le cours (js/convertisseur-devises.js). Préfixe cv- : aucun nom partagé avec
   la charte du site. Couleurs : des variables seulement, elles s'inversent la nuit.
   📱 Téléphone : le montant sur toute la largeur, puis « De ⇄ Vers » CÔTE À
   CÔTE — jamais une colonne. Grand écran : les quatre sur une seule ligne. ── */
.cv { max-width: 900px; margin: 0 auto 34px; padding: 22px 24px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r); }
.cv-titre { margin: 0 0 14px; font-family: 'Sora', sans-serif; font-size: 1.125rem; font-weight: 700;
  color: var(--navy-dark); }
.cv-grille { display: grid; gap: 10px; align-items: end;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  grid-template-areas: "montant montant montant" "de inverser vers"; }
@media (min-width: 640px) {
  .cv-grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 44px minmax(0, 1fr);
    grid-template-areas: "montant de inverser vers"; }
}
.cv-montant { grid-area: montant; }
.cv-de { grid-area: de; }
.cv-vers { grid-area: vers; }
.cv-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: .875rem; font-weight: 500; color: var(--muted); }
/* 1rem dans les champs : en dessous, l'iPhone agrandit la page au toucher. */
.cv-champ input, .cv-champ select { width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--white);
  font-family: inherit; font-size: 1rem; color: var(--ink); }
.cv-champ input:focus, .cv-champ select:focus { outline: 2px solid var(--red); outline-offset: 1px;
  border-color: var(--red); }
.cv-inverser { grid-area: inverser; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--blush); color: var(--red-ink); cursor: pointer; }
.cv-inverser svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.cv-inverser:hover { border-color: var(--red-dark); }
.cv-inverser:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cv-resultat { display: block; margin-top: 16px; font-family: 'Sora', sans-serif; font-size: 1.5rem;
  font-weight: 700; line-height: 1.35; color: var(--navy-dark); overflow-wrap: break-word; }
.cv-resultat span { font-weight: 600; color: var(--muted); }
.cv-resultat strong { color: var(--red-dark); }
.cv-resultat .cv-attente { font: 500 .875rem/1.6 'Inter', sans-serif; }
.cv-taux { margin: 8px 0 0; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.cv-taux-vieux { color: var(--amber-ink); }
@media (max-width: 560px) {
  .cv { padding: 16px; }
  .cv-resultat { font-size: 1.125rem; }
}
@media print { .cv { display: none !important; } }

/* 28/09/2026 — « il y a encore des zones grises qui s'affichent quand le site
   est en mode nuit » (Alex). Ces teintes claires sont écrites en dur et
   n'avaient pas d'équivalent de nuit : elles n'apparaissent qu'après un geste
   (un résultat, une erreur, un survol), là où le robot, qui ouvre les pages
   sans y toucher, ne regarde pas. Équivalents repris de la Prépa TCF (14/09)
   et du guichet (07/09) : lavis rouge, vert, ambre du thème nuit. */
:where(:root[data-theme="nuit"]) .cl-fin { background: linear-gradient(135deg, var(--white) 0%, var(--blush) 100%); border-color: var(--line); }
:where(:root[data-theme="nuit"]) .bi-taux-vieux { background: var(--amber-light); color: var(--amber-ink); }
:where(:root[data-theme="nuit"]) .vl-depot.survol { background: var(--blush); }
:where(:root[data-theme="nuit"]) .vl-point.ok, :where(:root[data-theme="nuit"]) .vl-resultat.ok, :where(:root[data-theme="nuit"]) .vl-resultat.presque, :where(:root[data-theme="nuit"]) .cd-resultat.ok { background: var(--teal-light); }
:where(:root[data-theme="nuit"]) .vl-point.manque, :where(:root[data-theme="nuit"]) .vl-resultat.manque, :where(:root[data-theme="nuit"]) .cd-resultat.manque, :where(:root[data-theme="nuit"]) .sp-ligne.bientot { background: var(--amber-light); }
:where(:root[data-theme="nuit"]) .sp-calme { background: var(--teal-light); color: var(--teal-ink); }

/* ===== 04/10/2026 — LES INTERCALAIRES DU CLASSEUR (ORDINATEUR SEULEMENT) =====
   Demande d'Alex : sur ordinateur, les onze outils deviennent les onglets
   d'un classeur. Deux rangées sur toute la largeur — les deux premières
   familles (5 outils) et les deux dernières (6) — et l'onglet ouvert prend
   la couleur de la page qu'il ouvre et s'y fond, sans trait entre eux.

   Décision d'Alex (04/10, « fixe-les ») : les deux rangées ne bougent
   JAMAIS. La première version faisait passer devant la rangée de l'onglet
   ouvert ; au clic sur la rangée du haut, les rangées échangeaient leur
   place (63 px) et la souris se retrouvait sur un autre onglet.
   Désormais : en haut, Mes preuves + Ma procédure (la rangée du fond) ;
   en bas, contre la page, Mes pièces + Mon budget (la rangée de devant).
   Un onglet ouvert du bas se fond dans la page. Un onglet ouvert du haut ne
   peut pas la toucher : il garde la même peau (couleur de la page, liseré
   rouge, texte fort) et reste derrière la rangée de devant, comme tout
   intercalaire du fond — aucun onglet du bas ne se fond alors dans la page,
   le trait de base court sans interruption sous la rangée de devant.

   Le téléphone et la tablette (< 900 px) ne voient RIEN de tout ceci : tout
   vit dans la media query ci-dessous. Même palier que l'alignement des
   titres et de .fus-barre dans styles.css. */
@media (min-width: 900px) {
  /* La bande des onglets prolonge l'en-tête de page (qui finit sur --bg) ;
     le trait de base court d'un bord à l'autre de l'écran. Ombres pleine
     largeur + clip-path : aucun débordement horizontal possible. */
  .page-hero:has(+ .fus-groupes-barre) { border-bottom: 0; }
  .fus-groupes-barre {
    --intercalaire-page: var(--white);          /* le fond de la page ouverte */
    --intercalaire: var(--blush);               /* onglet de la rangée de devant */
    --intercalaire-fond: color-mix(in srgb, var(--red) 9%, var(--white)); /* rangée du fond */
    --intercalaire-bord: color-mix(in srgb, var(--red) 16%, var(--line));
    position: relative; padding-top: 6px; background: var(--bg);
    box-shadow: 0 0 0 100vmax var(--bg), 0 1px 0 100vmax var(--line);
    clip-path: inset(0 -100vmax -1px); }
  .fus-groupes { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 0 6px; align-items: stretch; }
  .fus-groupe, .fus-groupe-onglets { display: contents; }
  .fus-groupe-titre { display: none; }

  /* 5 onglets × 6 colonnes, 6 onglets × 5 colonnes : chaque rangée est
     pleine. Rangées FIXES, quel que soit l'onglet ouvert. */
  .fus-groupe:nth-child(-n+2) .fus-onglet { grid-column: span 6; grid-row: 2; }
  .fus-groupe:nth-child(n+3) .fus-onglet { grid-column: span 5; grid-row: 1; }

  .fus-groupes-barre .fus-groupe-onglets .fus-onglet {
    position: relative; z-index: 3; width: auto; min-height: 50px;
    padding: 11px 12px 12px; justify-content: flex-start; text-align: left; gap: 10px;
    border: 1px solid var(--intercalaire-bord); border-bottom: 0;
    border-radius: 12px 12px 0 0; background: var(--intercalaire); color: var(--ink);
    box-shadow: none; font-size: .9375rem; text-wrap: balance; }
  /* La rangée du fond : un ton plus soutenu, et son pied glisse sous la
     rangée de devant, comme un intercalaire posé derrière un autre. */
  .fus-groupes-barre .fus-groupe:nth-child(n+3) .fus-onglet {
    z-index: 1; margin-bottom: -8px; padding-bottom: 20px; background: var(--intercalaire-fond); }

  .fus-groupes-barre .fus-groupe-onglets .fus-onglet:hover { border-color: var(--red); color: var(--red-dark); }

  /* L'onglet ouvert, dans l'une ou l'autre rangée : la couleur de la page,
     un liseré rouge en tête, le texte fort. Le liseré de 3 px se prend sur
     la marge du haut (11 → 9 px) : l'onglet garde sa hauteur, son libellé
     ne descend pas et la rangée ne grandit pas — rien ne bouge au clic. */
  .fus-groupes-barre .fus-groupes .fus-groupe-onglets .fus-onglet[aria-selected="true"] {
    z-index: 4; padding-top: 9px;
    background: var(--intercalaire-page); color: var(--red-dark);
    border-color: var(--line); border-top: 3px solid var(--red); font-weight: 700;
    box-shadow: 0 -4px 14px rgba(23, 19, 20, .06); transform: none; }
  /* Devant : 1 px de plus vers le bas couvre le trait de base — il se fond
     dans la page. */
  .fus-groupes-barre .fus-groupe:nth-child(-n+2) .fus-onglet[aria-selected="true"] {
    margin-bottom: -1px; padding-bottom: 13px; }
  /* Au fond : il reste derrière la rangée de devant, son pied glissé
     dessous comme celui de ses voisins. Il ne touche pas la page. */
  .fus-groupes-barre .fus-groupe:nth-child(n+3) .fus-onglet[aria-selected="true"] { z-index: 2; }

  .fus-groupes-barre .fus-onglet:focus-visible { outline-offset: -4px; }
  /* Au clavier, l'anneau d'un onglet du fond se fermerait SOUS la rangée de
     devant (et pointerait entre deux onglets). Même anneau — 3 px rouge
     foncé, 1 px en retrait du bord — tracé par un pseudo-élément qui
     s'arrête au-dessus de la rangée de devant. */
  .fus-groupes-barre .fus-groupe:nth-child(n+3) .fus-onglet:focus-visible { outline: none; }
  .fus-groupes-barre .fus-groupe:nth-child(n+3) .fus-onglet:focus-visible::after {
    content: ""; position: absolute; inset: 0 0 9px; border: 3px solid var(--red-dark);
    border-radius: 11px 11px 0 0; pointer-events: none; }
  .fus-groupes-barre .fus-groupe:nth-child(n+3) .fus-onglet[aria-selected="true"]:focus-visible::after { top: -2px; }
}
/* 900-1099 px : six onglets dans 860 px, les libellés passaient sur trois
   lignes — un corps et des marges un cran plus serrés. */
@media (min-width: 900px) and (max-width: 1099px) {
  .fus-groupes-barre .fus-groupe-onglets .fus-onglet { font-size: .875rem; padding-left: 9px; padding-right: 9px; gap: 7px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .fus-groupes-barre .fus-onglet:not([aria-selected="true"]):hover { transform: translateY(-2px); }
  .fus-groupes-barre .fus-onglet:active { transform: none; }
}
:root[data-theme="nuit"] .fus-groupes-barre {
  --intercalaire-page: var(--bg);
  --intercalaire: var(--blush);
  --intercalaire-fond: color-mix(in srgb, var(--red) 7%, var(--white)); }

/* =============================================================================
   12/10/2026 — LA PRISE EN MAIN (refonte, lot 4 « espaces clients »)
   Mesuré avant (serveur d'essai) : une fois l'outil choisi, AUCUN champ ni
   bouton de l'outil n'était dans le premier écran du téléphone (premier
   contrôle entre 954 et 1 619 px pour un écran de 812), ni dans celui de
   l'ordinateur pour six outils sur onze (953 à 1 481 px pour 900).
   ============================================================================= */

/* 1. LE MENU DU TÉLÉPHONE DIT À QUOI SERT CHAQUE OUTIL. Onze noms courts ne
   disaient pas lequel ouvrir ; une ligne sous chacun le dit. À l'ordinateur,
   les intercalaires gardent leur seul nom. */
.fus-onglet .onglet-txt { display: block; min-width: 0; }
.fus-onglet .onglet-desc { display: none; }
@media (max-width: 767px) {
  .fus-accordeon .fus-groupe-onglets .fus-onglet { justify-content: flex-start; text-align: left; padding-top: 9px; padding-bottom: 9px;
    border-radius: var(--r); }
  .fus-accordeon .fus-onglet .onglet-desc { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400;
    line-height: 1.35; color: var(--muted); }
  .fus-accordeon .fus-onglet[aria-expanded="true"] .onglet-desc { color: inherit; opacity: .88; }
  /* L'outil choisi remonte sous le bandeau du site (js/barre-outils.js). */
  .fus-groupes-barre { scroll-margin-top: calc(var(--fr-haut-nav, 72px) + 4px); }
}

/* 2. LE RAPPEL DE COMPTE, PLUS MINCE. Même phrase, même bouton, toujours au
   centre (décision d'Alex du 30/08) — mais sur UNE ligne à l'ordinateur : il
   prenait 110 px entre les onglets et l'outil. */
#memoireCompte.fus-compte { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; }
@media (min-width: 768px) {
  #memoireCompte.fus-compte.sans-compte { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: var(--sp-2) var(--sp-5); }
  #memoireCompte.fus-compte.sans-compte > span:first-child { flex: 0 1 760px; text-align: left; }
  #memoireCompte.fus-compte.sans-compte .fus-compte-actions { flex: none; }
}

/* 24/10/2026 — LA PAGE NE SAUTE PLUS AU CHARGEMENT (robot visiteurs : 0,12).
   Le rappel de compte arrive après le premier écran (js/memoire-compte.js,
   chargé en différé) et les questions après les réglages lus sur le réseau
   (js/check-list.js) : en apparaissant, ils poussaient l'outil vers le bas.
   On leur garde leur place, vide, le temps qu'ils arrivent. Le rappel :
   jusqu'à data-pret, sauf sur les volets qui n'en ont pas (data-sans-rappel). */
html.js:not([data-volet-actif="equivalence"], [data-volet-actif="tcf"], [data-volet-actif="adresses"], [data-volet-actif="pdf"]) #memoireCompte[hidden]:not([data-pret]) {
  display: block !important; visibility: hidden; padding: 0; min-height: var(--place-rappel, 156px);
}
@media (min-width: 768px) { #memoireCompte { --place-rappel: 81px; } }
@media (min-width: 1024px) { #memoireCompte { --place-rappel: 62px; } }
/* Les questions : vides, elles tiennent tout l'écran — dessinées, elles sont
   plus hautes encore ; ce qui suit reste donc hors de vue dans les deux cas. */
html.js #clQuestions:empty { min-height: 100vh; }

/* 3. LES FAMILLES DE LA LISTE : un filet d'un pixel, pas un trait de deux
   (règle du 10/09 : pas de trait épais). Et l'index y mène sous le bandeau. */
.cl-cat h3 { border-bottom-width: 1px; }
.cl-cat { scroll-margin-top: calc(var(--fr-haut-nav, 72px) + 16px); }
.cl-index { display: none; }

/* 4. ORDINATEUR (≥ 1100 px) — LA CHECK-LIST EN DEUX COLONNES.
   À gauche, le titre et son explication, puis — une fois la liste faite — la
   jauge épinglée et l'index des familles (« Langue 0/1 ») ; à droite, l'outil :
   les onze questions, puis la liste. Avant : une colonne de 880 px au milieu,
   les questions commençaient sous le pli et la jauge recouvrait la liste.
   Mécanique : .cl-wrap et #clEtapeListe s'effacent (display: contents) et leurs
   enfants se rangent dans la grille du volet. L'ordre de la page ne change pas :
   au téléphone et au lecteur d'écran, tout se lit comme avant. */
@media (min-width: 1100px) {
  #volet-docs > .section > .container { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    column-gap: var(--sp-8); align-items: start; }
  #volet-docs .section-head { grid-column: 1; grid-row: 1; margin: 0; max-width: none; }
  #volet-docs .section-head h2 { font-size: var(--fs-xl); }
  #volet-docs .section-head { scroll-margin-top: calc(var(--fr-haut-nav, 72px) + var(--sp-4)); }
  #volet-docs .cl-wrap { display: contents; }
  #volet-docs #clEtapeProfil { grid-column: 2; grid-row: 1 / span 4; }
  #volet-docs #clEtapeListe:not([hidden]) { display: contents; }
  #volet-docs .cl-suivi { grid-column: 1; grid-row: 2 / span 3; align-self: start; margin: var(--sp-6) 0 0;
    top: calc(var(--fr-haut-nav, 72px) + var(--sp-4)); max-height: calc(100vh - var(--fr-haut-nav, 72px) - var(--sp-6));
    overflow-y: auto; box-shadow: none; }
  #volet-docs #clListe { grid-column: 2; grid-row: 1 / span 2; }
  #volet-docs .cl-fin { grid-column: 2; grid-row: 3; }
  #volet-docs #clEtapeListe > .cl-note { grid-column: 2; grid-row: 4; }
  #volet-docs .cl-index { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-4) calc(var(--sp-2) * -1) 0;
    padding-top: var(--sp-3); border-top: 1px solid var(--line); }
  .cl-index-l { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); width: 100%;
    padding: 6px var(--sp-2); border: 0; border-radius: var(--r-sm); background: transparent; font: inherit;
    font-size: var(--fs-sm); line-height: 1.35; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .15s ease; }
  .cl-index-l:hover { background: var(--bg); }
  .cl-index-l b { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cl-index-l.fait b { color: var(--teal-ink); }
  .cl-index-l:focus-visible { outline: 2px solid var(--red-dark); outline-offset: -2px; }
}

/* 5. « À QUOI SERT CET OUTIL ? » SE REPLIE. L'encart devient un <details> :
   fermé au téléphone, ouvert à l'ordinateur (js/barre-outils.js). Le titre
   reste lisible et dit qu'on peut le déplier (chevron, 44 px au doigt). */
details.outil-but > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin: -10px 0;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.outil-but > summary::-webkit-details-marker { display: none; }
details.outil-but > summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-left: auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease; }
details.outil-but[open] > summary::after { transform: rotate(180deg); }
details.outil-but > summary:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 4px; border-radius: var(--r-sm); }
details.outil-but > p { margin: var(--sp-3) 0 0; }
@media (prefers-reduced-motion: reduce) { details.outil-but > summary::after { transition: none; } }

/* 6. « AUCUN CHIFFRE NE SORT DE VOTRE APPAREIL » EST UNE BONNE NOUVELLE. Le cadre
   rouge de la cohérence et du vérificateur de lettre se lisait comme une
   erreur ; il prend le ton neutre d'une précision. */
.cd-avis, .vl-avis { background: var(--bg); border-color: var(--line); }
.cd-avis p, .vl-avis p { color: var(--ink); }

/* 7. ORDINATEUR (≥ 1100 px) — MÊME FORMULE POUR LE BUDGET, LE BARÈME ET LA
   COMPRESSION. Leur titre partait à gauche (règle du 20/09) mais l'outil restait
   centré dessous, 170 px plus à droite : deux bords, et 300 à 500 px de titre et
   de chapeau avant le premier champ. Le titre et son chapeau prennent la colonne
   de gauche et l'accompagnent pendant qu'on descend ; l'outil, celle de droite. */
@media (min-width: 1100px) {
  :is(#volet-couts, #volet-bareme, #volet-pdf) > .section > .container { display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: var(--sp-8); align-items: start; }
  :is(#volet-couts, #volet-bareme, #volet-pdf) > .section > .container > .section-head { grid-column: 1; grid-row: 1 / span 12;
    margin: 0; max-width: none; position: sticky; top: calc(var(--fr-haut-nav, 72px) + var(--sp-5)); }
  :is(#volet-couts, #volet-bareme, #volet-pdf) .section-head h2 { font-size: var(--fs-xl); }
  :is(#volet-couts, #volet-bareme, #volet-pdf) > .section > .container > :not(.section-head) { grid-column: 2;
    max-width: none; margin-left: 0; margin-right: 0; }
}

/* 8. TÉLÉPHONE — LA PETITE BARRE DES ONZE QUESTIONS (24/10/2026, point 18 du
   plan accepté par Alex ; construite par js/check-list.js). Le compteur
   « Encore 11 réponses à donner » n'existait qu'au pied du questionnaire, à
   y≈2 880 : la barre reste collée juste sous celle du site pendant qu'on
   répond (--fr-haut-nav = sa hauteur mesurée + 4 px, js/frais.js ; collée au
   ras, aucune question ne passe entre les deux), avec « Changer d'outil ». */
.cl-mini { display: none; }
@media (max-width: 767px) {
  .cl-mini { position: sticky; top: calc(var(--fr-haut-nav, 61px) - 4px); z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    margin: 0 0 var(--sp-3); padding: 4px; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-sm); }
  .cl-mini button { min-height: 44px; font-family: inherit; font-size: var(--fs-sm); line-height: 1.25;
    cursor: pointer; border-radius: var(--r-sm); }
  .cl-mini-compte { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0;
    padding: 0 var(--sp-2); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .cl-mini-compte b { color: var(--red-dark); font-size: var(--fs-md, 1.0625rem); }
  .cl-mini-compte.pret { flex: 0 1 auto; background: var(--red-fond); color: var(--sur-couleur);
    padding: 0 var(--sp-4); text-align: center; }
  .cl-mini-compte.pret:hover { background: var(--red-deep); }
  .cl-mini-outil { flex: none; display: inline-flex; align-items: center; padding: 0 var(--sp-3);
    background: var(--bg); border: 1px solid var(--line); font-weight: 600; color: var(--navy-dark); }
  .cl-mini-outil:hover { border-color: var(--red); color: var(--red-dark); }
  .cl-mini button:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }
}

/* 9. TÉLÉPHONE — LES TABLEAUX DEVIENNENT DES FICHES (24/10/2026, point 18).
   Mesuré à 375 px : « Équivalence » et « TCF » défilaient de côté sans le
   dire, « À savoir » coupé (« Le plus cou… »), la colonne « Notée » jamais
   vue. Sous 480 px, une ligne = une fiche ; chaque case porte le titre de sa
   colonne, recopié par js/barre-outils.js depuis l'en-tête (qui pose aussi
   role="table" : sans script, le tableau reste un tableau qui défile). */
@media (max-width: 480px) {
  .ede-defil:has(> .ede-tableau[role="table"]) { overflow-x: visible; }
  .ede-tableau[role="table"] { display: block; }
  .ede-tableau[role="table"] thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ede-tableau[role="table"] tbody { display: flex; flex-direction: column; gap: var(--sp-3); }
  .ede-tableau[role="table"] tr { display: block; padding: var(--sp-3) var(--sp-4); background: var(--white);
    border: 1px solid var(--line); border-radius: var(--r); }
  .ede-tableau[role="table"] td { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
    column-gap: var(--sp-3); padding: 6px 0; border: 0; overflow-wrap: normal; hyphens: manual; }
  .ede-tableau[role="table"] td::before { content: attr(data-label); padding-top: .2em; font-size: var(--fs-xs, .75rem);
    font-weight: 600; line-height: 1.35; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .ede-tableau[role="table"] td:first-child { display: block; padding: 0 0 var(--sp-2); margin-bottom: 2px;
    border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--navy-dark); }
  .ede-tableau[role="table"] td:first-child::before { content: none; }
  .ede-tableau.ede-titre-court[role="table"] td:first-child::before { content: attr(data-label) "\00a0"; padding: 0;
    font-size: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; color: inherit; }
  /* Les ordres professionnels gardent leur fond distinct ; le trait rouge de
     3 px du tableau n'a pas sa place sur une fiche. */
  .ede-tableau[role="table"] .ede-ordre { background: var(--bg); }
  .ede-tableau[role="table"] .ede-ordre td { background: none; }
  .ede-tableau[role="table"] .ede-ordre td:first-child { box-shadow: none; }
}