/* ============================================================================
   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: .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: .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: .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: #0E7A40; border-color: #0E7A40; 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 #D9D3D1; 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 #D9D3D1; 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 #D9D3D1; 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 #D9D3D1; 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); 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. */
.sp-apporter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-top: 18px; }
.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-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 #D9D3D1;
  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; } }