/* ============================================================
   ToumiSoft — site vitrine app.toumisoft.tn (accueil + tarifs)
   Partagé par index.html et tarifs.html. Reprend les jetons de
   design du moteur pour une identité cohérente avec l'app à venir.
   ============================================================ */

@font-face{font-family:'Archivo';font-weight:500;font-display:swap;src:url('../fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;src:url('../fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;src:url('../fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-display:swap;src:url('../fonts/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url('../fonts/ibmplexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url('../fonts/ibmplexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url('../fonts/ibmplexmono-600.woff2') format('woff2')}

:root{
  --paper:#F6F7F5; --card:#FFFFFF; --ink:#17252F; --muted:#5C6B75;
  --line:#DCE2E4; --line-soft:#EAEEEF;
  --blue:#14649F; --blue-deep:#0E4A77;
  --ok:#1E7F5C; --err:#B3372B;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --disp:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{margin:0 auto;padding:0 20px}
.narrow{max-width:800px}

/* Visible only for keyboard focus, never for a mouse click — :focus-visible
   is exactly "the browser thinks this needs a visible ring". */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-family:var(--disp);font-weight:600;font-size:13.5px;z-index:100;transition:top .15s}
.skip-link:focus{top:12px}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px}
.brand{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:9px}
.brand span{display:block;font-family:var(--sans);font-weight:600;font-size:11.5px;color:var(--blue-deep);letter-spacing:0}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:7px}
.nav-links a:hover{color:var(--ink);background:var(--paper)}
.nav-links a.active{color:var(--ink);background:var(--paper)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.nav-toggle svg{pointer-events:none}

/* ---------- admin console: same shell, distinct chrome so it can never be
   mistaken for the customer-facing app ---------- */
.nav-admin{background:var(--ink)}
.nav-admin .brand{color:#fff}
.nav-admin .brand span{color:#8FBEE0}
.admin-badge{display:inline-flex;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0E1720;background:#8FBEE0;padding:3px 8px;border-radius:20px}
/* Must outrank ".brand span"/".nav-admin .brand span" (class+type, i.e. more
   specific than a plain ".brand .admin-badge" class-only override) on every
   property they also set — restate the whole badge style here rather than
   debug one clobbered property at a time. */
.brand .admin-badge,.nav-admin .brand .admin-badge{display:inline-flex;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0E1720}
.nav-admin .nav-links a{color:#9FB0BA}
.nav-admin .nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-admin .nav-links a.active{color:#fff;background:rgba(255,255,255,.12)}
.nav-admin .btn.sm.ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.nav-admin .btn.sm.ghost:hover{background:rgba(255,255,255,.1)}
.nav-admin .nav-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}

/* L'ATTRIBUT `hidden` DOIT GAGNER.
 *
 * Le navigateur lui donne `display:none` par sa feuille par défaut — la plus
 * faible de toutes. La MOINDRE règle d'auteur posant un `display` la balaie, et
 * `.btn{display:inline-flex}` juste en dessous le fait : un bouton marqué
 * `hidden` restait parfaitement visible. Le piège est d'autant plus vicieux que
 * `hidden` a l'air d'une garantie, et que l'élément disparaît bien partout
 * ailleurs — donc on ne pense pas à le vérifier là où il compte.
 *
 * `!important` est ici à sa place : `hidden` n'est pas une préférence de mise
 * en page, c'est une déclaration d'absence. Ce qui doit rester masqué SOUS une
 * condition s'écrit avec une classe (`.gen-hidden`), pas avec cet attribut. */
[hidden]{display:none !important}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;font-size:14px;padding:11px 20px;border-radius:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn:active{transform:translateY(1px)}
/* The default UA ring is drawn in the platform accent and sits directly on the
   button edge, which on the dark navy fill is close to invisible. offset:2px
   lifts it onto the page background so it reads on both filled and ghost
   variants. :focus-visible, not :focus, so a mouse click never shows it. */
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}
/* .btn.sm sets color:var(--card) for white text on the default dark fill —
   wrong for a transparent ghost button, where it renders as invisible
   white-on-white text (only combo this hits: the dashboard logout button). */
.btn.sm.ghost{color:var(--ink)}
.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.blue:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.sm{padding:8px 15px;font-size:13px;color:var(--card)}
.btn.lg{padding:14px 26px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink);border-color:var(--ink)}
.btn.danger{background:transparent;color:var(--err);border-color:#F1C7C1}
.btn.danger:hover{background:#FBEAE8;border-color:var(--err);color:var(--err)}
.btn .spin{width:14px;height:14px;flex:none}

/* button busy state — spinner replaces the label's leading space, text stays
   put so the button doesn't reflow/jump width while working */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.btn.ghost .spin,.btn.danger .spin{border-color:rgba(23,37,47,.25);border-top-color:var(--ink)}

/* generic CTA row, reused across sections */
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- pastilles ---------- */
/* weight 600, not 500: --blue-deep measures 9.27:1 here, so this was never a
   contrast failure, but a 11.5px monospace at 500 has strokes thin enough to
   read as washed out anyway. Contrast ratio does not model stroke weight. */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--blue-deep);border:1px solid var(--line);border-radius:20px;padding:5px 12px;background:var(--card)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.tag .tn-flag{width:16px;height:16px;margin:-1px -1px -1px -3px}

/* emblème « conforme à la législation tunisienne » */
.tn-flag{flex:none;border-radius:50%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.14))}
.tn-badge{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:9px 16px 9px 11px;background:var(--card)}
.tn-badge .tn-flag{width:30px;height:30px}
.tn-badge b{font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--ink);display:block;line-height:1.2}
.tn-badge small{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px;background:
  radial-gradient(1200px 380px at 50% -140px,#EAF2F8 0%,transparent 70%)}
.hero.hero-tight{padding-bottom:24px}
.hero .wrap{text-align:center}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,50px);line-height:1.08;letter-spacing:-.025em;max-width:820px;margin:20px auto 0}
.hero .lead{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:640px;margin:18px auto 0}
.hero .cta{margin-top:30px}
.hero .reassure{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px}

/* ---------- bandeau confiance ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;padding:18px 20px}
.trust .item{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--muted)}
.trust .item b{color:var(--ink);font-weight:600}
.trust svg{flex:none;color:var(--blue)}

/* ---------- sections ---------- */
section{padding:56px 0}
.section-card{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 38px}
.sec-head .kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.sec-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.5vw,34px);letter-spacing:-.02em;margin-top:8px}
.sec-head p{color:var(--muted);font-size:16px;margin-top:12px}

/* ---------- grille fonctionnalités ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.feature .ic{width:42px;height:42px;border-radius:10px;background:#EAF2F8;color:var(--blue-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feature h3{font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:7px}
.feature p{color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- étapes ---------- */
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s}
.stepc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 22px 22px}
.stepc .num{font-family:var(--disp);font-weight:800;font-size:14px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.stepc h3{font-family:var(--disp);font-weight:700;font-size:16px;margin-bottom:6px}
.stepc p{color:var(--muted);font-size:14px}

/* ---------- formats ---------- */
.formats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fmt{font-family:var(--mono);font-size:12.5px;font-weight:500;border:1px solid var(--line);background:var(--card);border-radius:7px;padding:9px 15px}
.fmt b{color:var(--blue-deep)}

/* ---------- confidentialité ---------- */
.privacy{background:var(--ink);color:#fff}
.privacy .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.privacy .kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7FB3D8}
.privacy h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em;margin:10px 0 14px}
.privacy p{color:#B9C6CE;font-size:15.5px}
.privacy ul{list-style:none;margin-top:8px}
.privacy li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.09)}
.privacy li svg{flex:none;color:#5FBF97;margin-top:2px}

/* ---------- programme fondateurs ---------- */
.founder-banner{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 26px;margin:0 20px 40px}
.founder-banner .txt b{font-family:var(--disp);font-weight:700;font-size:15px;display:block}
.founder-banner .txt span{color:var(--muted);font-size:13.5px}
.founder-banner .cnt{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue-deep);white-space:nowrap}

/* ---------- tarifs ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px}
.plan.featured{border:2px solid var(--blue);box-shadow:0 10px 30px rgba(20,100,159,.12);position:relative}
.plan.locked{opacity:.82}
.plan .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;background:var(--blue);color:#fff;padding:5px 14px;border-radius:20px}
.plan h3{font-family:var(--disp);font-weight:700;font-size:19px}
.plan .desc{color:var(--muted);font-size:13.5px;margin-top:5px;min-height:38px}
.plan .price{font-family:var(--disp);font-weight:800;font-size:40px;letter-spacing:-.02em;margin:16px 0 2px;line-height:1}
.plan .price small{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--muted)}
.plan .price .strike{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--muted);text-decoration:line-through;margin-right:6px}
.plan .per{font-family:var(--mono);font-size:12px;color:var(--muted)}
.plan ul{list-style:none;margin:20px 0 24px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14px;border-bottom:1px solid var(--line-soft)}
.plan li svg{flex:none;color:var(--ok);margin-top:2px}
.plan li.off{color:var(--muted)}
.plan li.off svg{color:var(--line)}
.plan .btn{width:100%;justify-content:center}
.pricing-note{text-align:center;color:var(--muted);font-size:13px;margin-top:20px;font-family:var(--mono)}

/* ---------- tableau comparatif ---------- */
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table.compare{border-collapse:collapse;width:100%;min-width:560px}
table.compare th,table.compare td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:14px}
table.compare thead th{font-family:var(--disp);font-weight:700;font-size:13px;background:var(--paper);border-bottom:2px solid var(--ink)}
table.compare td.c,table.compare th.c{text-align:center}
table.compare tbody tr:last-child td{border-bottom:none}
table.compare .yes{color:var(--ok);font-weight:700}
/* Was var(--line) back when this cell held a faint dash, where near-invisible
   was the intent. It now holds ✕, which is information ("not in this plan")
   rather than decoration, so it has to survive being read: #DCE2E4 on white is
   about 1.3:1. */
table.compare .no{color:var(--muted)}
table.compare td:first-child{font-weight:500}
/* Une cellule d'actions espace ses boutons À TOUTE LARGEUR. La règle
   équivalente n'existait que dans la disposition en cartes (max-width:720px),
   si bien que « Voir Ajouter Supprimer » se touchaient sur grand écran : le JS
   concatène ces boutons sans séparateur, et se reposer sur un nœud de texte
   entre deux balises pour les écarter ne marche que tant que personne ne
   reformate le gabarit. */
/* ------ Etat de resultat au modele autorise de NC1 (assets/js/nc1.js) ------
 * Quatre niveaux, et le rang se lit sans avoir a comparer deux lignes :
 * intertitre de section, poste, sous-poste replie, total. Les lignes de
 * RESULTAT (exploitation, activites ordinaires, net) sont encadrees : ce sont
 * les seules que l on cherche des l ouverture de l ecran.
 */
/* Le titre d une MOITIE de bilan (« Actif », « Capitaux propres et passifs ») :
 * au-dessus du tableau, pas dedans — deux tableaux distincts se comparent mal
 * quand leurs titres se confondent avec leurs intertitres de section. */
/* Saisie de la colonne N-1 du tableau des flux. Les champs sont dans un
 * `table.compare`, donc alignes a droite comme les montants qu ils remplacent :
 * un chiffre tape doit se lire a la meme place qu un chiffre calcule. */
table.compare input.fm-in{width:150px;text-align:right;font-family:var(--mono,ui-monospace,monospace);
  font-size:13px;padding:6px 8px;border:1px solid var(--line-soft);border-radius:6px;background:#fff}
table.compare input.fm-in:focus{outline:2px solid var(--blue-deep);outline-offset:1px;border-color:var(--blue-deep)}
/* « propose » : la ligne vient de la balance, pas de la saisie. Le dire evite
 * de faire passer un calcul pour une declaration — et laisse corriger. */
/* « calcule » se distingue de « propose » : l un est deduit des autres lignes
 * saisies, l autre vient de la balance. Confondre les deux ferait passer une
 * coherence obtenue PAR CONSTRUCTION pour une verification. */
.fm-calcule{color:var(--muted);border-color:var(--muted)}

.fm-propose{font-family:var(--disp);font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue-deep);border:1px solid var(--blue-deep);
  border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:middle}

h4.nc1-titre{font-family:var(--disp);font-weight:800;font-size:15px;margin:22px 0 10px}
h4.nc1-titre:first-child{margin-top:0}

table.compare tr.nc1-head td{background:var(--paper);font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:14px 16px 6px}
table.compare tr.nc1-poste td:first-child{font-weight:500;padding-left:26px}
table.compare tr.nc1-detail td{font-size:13px;color:var(--muted);background:var(--paper)}
table.compare tr.nc1-detail td:first-child{font-weight:400;padding-left:52px}
/* LA LIGNE « Moins : amortissements et provisions » du bilan actif. Elle est
 * en RETRAIT et en gris : c est une deduction, pas un poste de plein droit, et
 * la lire au meme poids que le brut et le net ferait compter trois postes la
 * ou la norme en presente un. Le net qui la suit garde, lui, le poids normal
 * d un poste — c est lui qui part dans la liasse. */
table.compare tr.nc1-moins td{color:var(--muted);font-style:italic}
table.compare tr.nc1-moins td:first-child{font-weight:400;padding-left:40px}
table.compare tr.nc1-total td{font-weight:700;border-top:1px solid var(--ink)}
table.compare tr.nc1-resultat td{font-weight:700;background:var(--paper);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
/* Le chevron n est pas un bouton de formulaire : il porte le libelle du poste
 * et doit s aligner sur les libelles qui n en ont pas. D ou la remise a zero
 * du padding et de la bordure, en gardant le focus visible au clavier. */
table.compare .nc1-toggle,table.compare .nc1-plat{display:inline-flex;gap:7px;align-items:baseline;
  font:inherit;color:inherit;text-align:left}
table.compare .nc1-toggle{background:none;border:0;padding:0;margin:0;cursor:pointer}
table.compare .nc1-toggle:hover{color:var(--blue-deep)}
/* La MEME largeur reservee des deux cotes : le chevron d un poste depliable et
 * le vide d un poste qui ne l est pas occupent la meme gouttiere, sinon les
 * libelles ne s alignent plus entre eux. */
table.compare .nc1-toggle span,table.compare .nc1-plat span{font-size:10px;color:var(--muted);
  display:inline-block;width:9px;flex:0 0 9px}
table.compare .nc1-toggle:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px;border-radius:3px}

table.compare td.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:2px 6px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:15.5px;padding:16px 12px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-size:20px;color:var(--blue);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 12px 16px;color:var(--muted);font-size:14.5px}

/* ---------- CTA final ---------- */
.finalcta{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:48px 28px;margin:0 20px}
.finalcta h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.5vw,32px);letter-spacing:-.02em}
.finalcta p{color:var(--muted);font-size:16px;margin:12px auto 26px;max-width:520px}
.finalcta .cta{margin-top:0}

/* ---------- formulaire d'invitation (waitlist) ---------- */
.waitlist{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:36px 32px;max-width:720px;margin:0 auto}
.waitlist .sec-head{margin-bottom:26px}
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.wl-field{display:flex;flex-direction:column;gap:6px}
.wl-field.full{grid-column:1/-1}
.wl-field label{font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--muted)}
.wl-field input,.wl-field select{font-family:var(--sans);font-size:14.5px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper)}
.wl-field input:focus,.wl-field select:focus{outline:2px solid var(--blue);outline-offset:1px}
.wl-field.err input,.wl-field.err select{border-color:var(--err)}
.wl-hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.wl-err{display:none;color:var(--err);font-size:13.5px;background:#FBEAE8;border:1px solid #F1C7C1;border-radius:8px;padding:10px 14px;margin-top:16px}
.wl-err.show{display:block}
/* The technical half of an error message. Smaller and quieter on purpose: the
   sentence above it is for the accountant, this line is for whoever installed
   the software, and only one of them is usually reading. */
.wl-err .err-detail{margin-top:6px;font-size:12.5px;opacity:.75;font-family:var(--mono);line-height:1.5}
.wl-ok{display:none;color:var(--ok);font-size:14.5px;background:#E7F4EE;border:1px solid #BFE3D2;border-radius:8px;padding:16px;margin-top:16px;text-align:center;font-family:var(--disp);font-weight:600}
.wl-ok.show{display:block}
.wl-actions{margin-top:20px;text-align:center}
.wl-note{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:center;margin-top:14px}

/* ---------- authentification (app/) ---------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-shell .waitlist{margin:0}
.auth-links{text-align:center;margin-top:18px;font-size:13.5px;color:var(--muted)}
.auth-links a{color:var(--blue-deep);font-weight:600}
.auth-links p+p{margin-top:6px}
.auth-status{text-align:center;color:var(--muted);font-size:15px}
.auth-status.err{color:var(--err)}
.auth-status.ok{color:var(--ok)}

/* ---------- génération d'états (app/generate.html) ---------- */
.gen-shell{min-height:100vh;padding:40px 20px}
.gen-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px 32px;margin:0 auto 20px}
.gen-card h2{margin-bottom:4px}
.gen-card .hint{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.gen-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}

/* ---------- cases à cocher ----------
   There was no checkbox styling at all: browser defaults meant a 13px box
   pressed flush against its label, which reads as cramped and gives a small
   target for something that decides which documents get filed.

   accent-color rather than a hand-built control: it recolours the native
   widget while keeping the keyboard behaviour, the focus ring and the
   indeterminate state that a div-based imitation always loses. */
input[type=checkbox]{
  width:17px;height:17px;
  accent-color:var(--blue);
  cursor:pointer;
  flex:none;
  margin:0;
}

/* A label wrapping a checkbox becomes the click target, so it needs room to
   be one. Used by the liasse form picker and by the table toggles. */
.check{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:13.5px;
  padding:9px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
  user-select:none;
}
.check:hover{border-color:var(--blue);background:var(--paper)}
/* :has() so the chip itself shows the state — a checked box on a plain white
   chip is easy to miss when scanning five of them. */
.check:has(input:checked){border-color:var(--blue);background:#EAF2F8;color:var(--blue-deep)}
.check:has(input:focus-visible){outline:2.5px solid var(--blue);outline-offset:2px}
.check:has(input:disabled){opacity:.55;cursor:not-allowed}

/* Inside a table cell the chip border would fight the row lines. */
.check.bare{border:0;background:none;padding:6px 0}
.check.bare:hover{background:none}
.check.bare:has(input:checked){background:none;color:inherit}

/* `flex:1 1 200px` et non `min-width` seul : sans base souple, un champ dont
   le contenu est large — un <select> se dimensionne sur son option la plus
   longue — s'étirait au double de ses voisins et cassait le rythme de la
   rangée. Tous les champs partagent maintenant la largeur disponible. */
.gen-field{display:flex;flex-direction:column;gap:6px;flex:1 1 200px;min-width:200px}
.gen-field label{font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--muted)}
.gen-field select,.gen-field input{font-family:var(--sans);font-size:14.5px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--paper)}
/* Un <select> se dimensionne sur son option la plus longue : dans une rangée
   de champs il ressortait deux fois plus large que ses voisins et cassait le
   rythme. `width:100%` le rend au flux, comme un <input>. */
.gen-field select{width:100%;max-width:100%}

/* Colonne « Forme juridique » du carnet de dossiers : le code en pastille, la
   conséquence — le F6007 s'applique ou non — en note dessous. */
.c-vide{color:var(--muted)}
.c-note{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.c-note.c-warn{color:#8A6D00}

/* Notes de detail : une ligne par compte. Le numero en chasse fixe pour que
   les colonnes de comptes s alignent a l oeil, et des lignes serrees — une
   note peut compter trente comptes et se lit sur papier. */
.annexes-detail td,.annexes-detail th{padding:5px 10px}
.annexes-detail .n-compte{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.annexes-detail .c{font-variant-numeric:tabular-nums}

/* Une case a cocher ne se dimensionne pas comme un champ de saisie : etiree sur
   toute la rangee, sa bordure dessinait un grand rectangle vide autour de trois
   mots. Elle prend la largeur de son texte. */
.gen-field > .check{align-self:flex-start}

/* En-tête du décompte fiscal. Les deux menus partagent la largeur ; le
   résultat imposable est une SORTIE — chiffre en tabulaire, aligné à droite,
   sur fond distinct — et non un troisième champ de saisie déguisé. */
.f6005-head .gen-field{flex:1 1 260px}
.f6005-head .hint{font-size:11.5px;line-height:1.45;color:var(--muted)}
.f6005-out{flex:1 1 220px}
/* L'indicateur d'enregistrement occupe la hauteur d'un champ, sinon la rangée
   se déséquilibre quand il est vide — c'est-à-dire la plupart du temps.
   CIBLÉ PAR IDENTIFIANT, pas par classe : scheduleF6005Save() fait
   `className = "hr-status"`, ce qui effacerait toute classe ajoutée ici. */
#f6005Status{display:flex;align-items:center;min-height:41px;font-size:13px}
.gen-table-wrap{overflow-x:auto;margin:14px 0}
.gen-banner{display:flex;align-items:flex-start;gap:10px;border-radius:10px;padding:14px 18px;font-size:14.5px;font-weight:600;margin-bottom:16px}
.gen-banner::before{flex:none;font-weight:800;line-height:1.3}
.gen-banner.ok{background:#E7F4EE;color:var(--ok);border:1px solid #BFE3D2}
.gen-banner.ok::before{content:'✓'}
.gen-banner.err{background:#FBEAE8;color:var(--err);border:1px solid #F1C7C1}
.gen-banner.err::before{content:'✕'}
.gen-banner.warn{background:#FFF6E0;color:#8A6D00;border:1px solid #F0DFA0}
.gen-banner.warn::before{content:'⚠'}
.gen-inline-form{gap:8px;margin-top:8px;align-items:center}
/* `:not([type=checkbox]):not([type=radio])` — sans quoi une case a cocher, large
   de 17 px, se voyait imposer min-width:220px et sa legende occupait 335 px.
   Dans le tableau des cabinets cela poussait la colonne Licence hors de la
   fenetre des qu on ouvrait le champ de cle. Une case a cocher n a jamais
   besoin d une largeur minimale de champ de saisie. */
.gen-inline-form input:not([type=checkbox]):not([type=radio]){font-family:var(--sans);font-size:13px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:220px}
/* !important because this is a display UTILITY, not a component style: it has
   to win over the inline `display:block` several banners carry to override
   .gen-banner's flex layout. Without it those banners were permanently
   visible — an inline style outranks a class — which is exactly what happened
   to #snapBox, #savedBox and #arreteBox until a browser check caught it. */
.gen-hidden{display:none !important}
/* MASQUE AU CHARGEMENT, SANS `!important` — et la distinction avec
   `.gen-hidden` ci-dessus est tout l'objet de cette classe.

   POURQUOI ELLE EXISTE. La CSP du site declare `style-src 'self'` sans
   `'unsafe-inline'` (www-app/.htaccess) : le navigateur REFUSE alors tout
   attribut HTML `style="..."`. Les elements qui s'ouvraient masques par
   `style="display:none"` — etats vides, formulaire d'administration, champs
   de fichier — apparaissaient donc tous au chargement. Un `<input type=file>`
   brut au milieu de la page, une liste vide affichee EN MEME TEMPS que ses
   lignes.

   SANS `!important`, contrairement a `.gen-hidden` : ces elements sont
   reveles par le JS via `element.style.display = "block"` — un style en
   ligne pose par CSSOM, que la CSP autorise (elle ne couvre que l'attribut
   HTML, pas la propriete JS). Un `!important` ici les rendrait invisibles
   pour toujours, ce qui est exactement le bug inverse. */
.js-hidden{display:none}

/* ---------- indicateur d'étapes (assistant à 3 écrans) ---------- */
/* 640px fitted three steps; the fourth (Exercices antérieurs) wrapped onto its
   own line, which reads as a separate widget rather than part of the track. */
.steps-track{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 28px;flex-wrap:wrap}
.steps-track .st{display:flex;align-items:center;gap:10px;padding:6px 4px}
.steps-track .st .n{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:12.5px;background:var(--line-soft);color:var(--muted);transition:background .15s,color .15s}
.steps-track .st .l{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}
.steps-track .st.active .n{background:var(--ink);color:#fff}
.steps-track .st.active .l{color:var(--ink)}
.steps-track .st.done .n{background:var(--ok);color:#fff}
.steps-track .sep{width:28px;height:1px;background:var(--line);margin:0 5px;flex:none}
.steps-track .st.done + .sep{background:var(--ok)}

/* ---------- onglets des résultats ---------- */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 18px}
.tabs .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:10px 14px;cursor:pointer;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--muted);
  transition:color .15s,border-color .15s}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.active{color:var(--ink);border-bottom-color:var(--blue-deep)}
.tabs .tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px 6px 0 0}

/* ---------- F6005 : groupes repliables ---------- */
.f6005-sec td{background:var(--line-soft);padding:0 !important}
.f6005-toggle{appearance:none;background:none;border:0;width:100%;text-align:left;cursor:pointer;
  padding:9px 12px;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink)}
.f6005-toggle:hover{color:var(--blue-deep)}
.f6005-toggle .caret{display:inline-block;width:1em;color:var(--muted)}
.f6005-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* The row is hidden on a <tr>, so display:none must win over the table
   display the browser would otherwise apply. */
tr.f6005-row.gen-hidden{display:none}
/* A plan feature that is not built yet. Visibly different from a ✓ rather
   than a footnote: a commercial page that ticks something unshipped is a
   refund conversation, and the clock icon has to be legible at a glance. */
/* Sans utilisateur depuis le retrait de l'offre Cabinet de tarifs.html : ses
   deux lignes « à venir » étaient les seules. Conservé volontairement, c'est
   exactement le style dont cette offre aura besoin quand la phase 10 aura
   expédié. À supprimer si ce plan est abandonné pour de bon. */
.plan li.soon{color:var(--muted)}
.plan li.soon em{font-style:normal;font-weight:600}

/* Format warnings on the matricule and on an irreversible dépôt. Amber, not
   red: neither is an error the app should refuse — one is a format the DGI
   publishes and may revise, the other is a legitimate choice the accountant
   is entitled to make. They exist to be read, not to block. */
.mf-warn-line{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;
  color:#8A6D00;background:#FFF6E0;border:1px solid #F0DFA0;border-radius:7px;padding:7px 10px}
.mf-warn{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;
  color:#8A6D00;background:#FFF6E0;border:1px solid #F0DFA0;border-radius:20px;padding:2px 9px;
  cursor:help;white-space:nowrap}

/* First-run guide (échéances). Numbered, roomy, and it disappears on its own
   once the feature is in use — an explainer that stays forever stops being
   read and starts being scrolled past. */
.guide{border-left:3px solid var(--blue)}
.guide-steps{margin:14px 0 4px;padding-left:1.4em;display:flex;flex-direction:column;gap:12px}
.guide-steps li{font-size:14.5px;line-height:1.55;padding-left:4px}
.guide-steps li::marker{font-family:var(--disp);font-weight:700;color:var(--blue-deep)}
.guide-steps b{font-weight:700}
.guide-steps code{font-family:var(--mono);font-size:12.5px;background:var(--paper);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* Notes aux états financiers (ROADMAP 2.6). The empty cells are the point:
   they mark what a balance cannot say, so they read as "to be completed"
   rather than as zero. */
.annexes-vide{color:var(--muted);font-style:italic}
.annexes-total td{font-weight:700;border-top:1.5px solid var(--line)}
#panel-annexes h3{font-family:var(--disp);font-size:15px;margin:22px 0 8px}
#panel-annexes h3:first-of-type{margin-top:4px}

/* Historique des dépôts (ROADMAP 2.2). Deliberately quiet: it is context for
   the acte de dépôt choice sitting under it, not an alert. */
.depot-hist{border:1px solid var(--line);border-radius:10px;background:var(--paper);
  padding:14px 16px;margin:0 0 16px}
.depot-hist h3{font-family:var(--disp);font-size:14px;margin:0 0 10px}
.depot-hist .hint{margin:8px 0 0}
.depot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.depot-item{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13.5px;
  padding-bottom:8px;border-bottom:1px solid var(--line-soft)}
.depot-item:last-child{padding-bottom:0;border-bottom:0}
.depot-meta{color:var(--muted)}
/* The fingerprint is truncated on screen; the full value is in the title
   attribute, so it stays selectable rather than being decoration. */
.depot-emp{margin-left:auto;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px}
@media (max-width:560px){
  .depot-emp{margin-left:0}
}

.f6005-in{width:100%;box-sizing:border-box;padding:5px 7px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:13px;text-align:right}
.f6005-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,124,178,.15)}
.f6005-v{display:block;text-align:right;font-size:13px;color:var(--muted)}

/* ---------- tableaux en cartes sur petit écran ----------
   Le tableau des dossiers fait ~670px de large : dans un viewport de 312px la
   colonne d'actions sort de l'écran et « Modifier »/« Supprimer » deviennent
   inatteignables — un défilement horizontal à l'intérieur d'une carte ne se
   voit pas. Chaque ligne devient une carte étiquetée ; l'en-tête disparaît
   puisque chaque valeur porte alors son libellé. */
@media (max-width:720px){
  /* `table.compare` carries min-width:560px so it scrolls horizontally on
     desktop; in card layout that floor is exactly what must go. */
  table.cards{min-width:0}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards td{white-space:normal}
  table.cards thead{display:none}
  table.cards tr{border:1px solid var(--line);border-radius:12px;background:var(--card);
    padding:12px 14px;margin:0 0 12px}
  table.cards td{border:0;padding:5px 0;display:flex;gap:14px;align-items:baseline;justify-content:space-between}
  table.cards td:before{content:attr(data-label);flex:none;font-family:var(--disp);font-weight:600;
    font-size:12px;color:var(--muted)}
  /* La cellule d'actions n'a pas de libellé et prend toute la largeur : les
     deux boutons se partagent la ligne au lieu de déborder. */
  table.cards td.actions{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);
    display:flex;gap:8px;justify-content:stretch}
  table.cards td.actions:before{content:none}
  table.cards td.actions .btn{flex:1;justify-content:center}
  /* La valeur principale se lit en premier, en gras. */
  table.cards td.key{font-family:var(--disp);font-weight:700;font-size:15px}
  table.cards td.key:before{font-weight:600;font-size:12px;color:var(--muted)}
}

/* ---------- cibles tactiles ----------
   Mesuré sur un viewport iPhone 13 : « Se déconnecter » sortait à 32px et le
   bouton de menu à 38px, sous le seuil de 44px au-dessous duquel une cible
   devient difficile à atteindre au pouce. Uniquement sur pointeur grossier :
   à la souris ces tailles sont parfaites et les agrandir gonflerait l'UI. */
@media (pointer:coarse){
  .btn.sm{min-height:44px;padding-top:11px;padding-bottom:11px}
  .nav-toggle{width:44px;height:44px}
  .hr-file{min-height:44px;display:inline-flex;align-items:center}
  /* Same 44px rule as every other control: a checkbox is the smallest thing
     on these screens and the one most often tapped on a phone. */
  .check{min-height:44px}
  input[type=checkbox]{width:20px;height:20px}
}

/* ============================================================
   IMPRESSION — les états financiers remis au client
   ============================================================
   Le cabinet livre deux choses : le XML pour la DGI et un jeu d'états
   financiers signés pour le client, l'AG et la banque. Sans cette feuille,
   le second n'existe pas et le classeur Excel reste ouvert.

   Le PDF est produit par le navigateur (window.print()) : aucune
   bibliothèque à embarquer, et la mise en page suit le contenu réel. */

.print-only{display:none}

@media print{
  /* UN ETAT IMPRIME EST COMPLET. Le repli des sous-postes sert a lire l ecran ;
   * sur papier, un poste dont le detail manque est un etat tronque. Les lignes
   * nulles des deux cotes, elles, ne sont pas dans le DOM du tout — c est
   * voulu, la norme n exige pas d imprimer soixante lignes a zero. */
  /* `!important` OBLIGATOIRE ICI : la garde globale `[hidden]{display:none
   * !important}` gagnerait sinon, malgré la spécificité bien plus forte de ce
   * sélecteur — `!important` bat la spécificité. Sans lui, les sous-postes
   * repliés resteraient masqués sur papier et l'état sortirait tronqué. */
  table.compare tr.nc1-detail[hidden]{display:table-row !important}
  table.compare .nc1-toggle span{display:none}

  /* Chrome/Edge n'impriment pas les fonds par défaut ; sans cela les en-têtes
     de tableau et les bandeaux perdent leur trame et deviennent illisibles. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  @page{size:A4 portrait;margin:14mm 12mm}

  body{background:#fff;font-size:10.5pt;line-height:1.35}
  .gen-shell{max-width:none;margin:0;padding:0}

  /* Tout ce qui est chrome d'application : rien à faire sur un document
     remis à un tiers. */
  .nav,.steps-track,.tabs,.wl-actions,.hint,.no-print,
  #stepCompany,#stepHistory,#stepMapping,#stepF6005,#stepExtract{display:none !important}

  /* LES BANDEAUX DE CONTRÔLE NE S'IMPRIMENT PAS.
   *
   * « Balance équilibrée », « Trésorerie réconciliée », « Soldes d'ouverture
   * équilibrés » : ce sont des vérifications faites AVANT de produire le
   * document, adressées au comptable qui le prépare. Sur un état remis à un
   * client, à une banque ou à une assemblée, elles n'ont pas de destinataire —
   * et un « Bilan déséquilibré » imprimé au milieu d'états qu'on remet est pire
   * qu'inutile.
   *
   * Elles restent PLEINEMENT visibles à l'écran : c'est là qu'elles servent, et
   * les masquer là serait perdre les seuls garde-fous qui distinguent un état
   * juste d'un état faux d'apparence identique. */
  #banners{display:none !important}

  .print-only{display:block}

  /* Les panneaux sont masqués par onglet à l'écran ; à l'impression ils
     doivent TOUS sortir, chacun sur sa page. */
  #stepResults .tab-panel,#stepResults .tab-panel.gen-hidden{display:block !important}
  /* Named explicitly rather than via `.tab-panel + .tab-panel`: this says
     which statements start a page, so adding a fourth panel later is a
     deliberate decision instead of a silent one.
     LE BILAN OUVRE LE DOCUMENT et n'a donc pas de saut avant lui — il est
     premier dans le DOM depuis que les onglets commencent par lui. Un
     `break-before` sur le premier panneau laisserait une page blanche en
     tête. Ce sont les SUIVANTS qui en portent un. */
  #panel-resultat,#panel-flux{break-before:page;page-break-before:always}
  /* SPÉCIFICITÉ, PAS ORDRE. La règle juste au-dessus vaut
   * `#stepResults .tab-panel` — un identifiant plus une classe, soit (1,1,0).
   * Un simple `#panel-annexes` ne vaut que (1,0,0) : il PERDAIT, quelle que
   * soit sa place dans le fichier, et `!important` des deux côtés n'y changeait
   * rien. Résultat : les notes aux états financiers, le décompte fiscal et la
   * revue sortaient à l'impression alors que trois commentaires affirmaient le
   * contraire depuis des mois. Vérifié au navigateur en média `print`, pas
   * relu — c'est précisément le genre de règle qu'on ne peut pas valider en la
   * lisant.
   *
   * Tous ces sélecteurs sont donc préfixés par `#stepResults` : deux
   * identifiants, (2,0,0), qui l'emporte. Et le mode « impression des notes »
   * ajoute `body.print-annexes` par-dessus, (2,1,1), pour reprendre la main.
   *
   * DEUX IDENTIFIANTS POUR LES NOTES : `#panel-annexes` sur le site,
   * `#panel-notes` sur le poste. La feuille est partagée, les identifiants ne
   * l'étaient pas — d'où tests/run-parite-apps.js, qui exige que tout panneau
   * déclaré d'un côté ou de l'autre soit nommé ici. */
  #stepResults #panel-f6005,
  #stepResults #panel-revue,
  /* Les notes sont un document DISTINCT, pas une page de plus des états : un
     banquier reçoit les états, l'assemblée reçoit les notes, et agrafer les
     deux n'est le bon choix ni pour l'un ni pour l'autre. */
  #stepResults #panel-annexes,
  #stepResults #panel-notes{display:none !important}

  /* ...et inversement quand c'est ELLES qu'on imprime. */
  body.print-annexes #stepResults #panel-resultat,
  body.print-annexes #stepResults #panel-bilan,
  body.print-annexes #stepResults #panel-flux{display:none !important}
  body.print-annexes #stepResults #panel-annexes,
  body.print-annexes #stepResults #panel-notes{display:block !important;break-before:auto;page-break-before:auto}
  body.print-annexes #stepResults #panel-annexes h3,
  body.print-annexes #stepResults #panel-notes h3{break-before:page;page-break-before:always}
  body.print-annexes #stepResults #panel-annexes h3:first-of-type,
  body.print-annexes #stepResults #panel-notes h3:first-of-type{break-before:auto;page-break-before:avoid}
  /* Un tableau ne doit pas être coupé juste après son titre. */
  body.print-annexes #stepResults #panel-annexes h3+.gen-table-wrap,
  body.print-annexes #stepResults #panel-annexes h3+p+.gen-table-wrap,
  body.print-annexes #stepResults #panel-notes h3+.gen-table-wrap,
  body.print-annexes #stepResults #panel-notes h3+p+.gen-table-wrap{break-before:avoid;page-break-before:avoid}

  .gen-card{border:0;box-shadow:none;padding:0;margin:0;background:none}
  .gen-table-wrap{overflow:visible !important}

  /* En-tête du document */
  #printHead{border-bottom:1.5pt solid #17252F;padding-bottom:6pt;margin-bottom:10pt}
  #printHead .ph-firm{font-family:var(--disp);font-weight:800;font-size:13pt}
  #printHead .ph-client{font-family:var(--disp);font-weight:600;font-size:11pt;margin-top:2pt}
  #printHead .ph-adresse{font-size:10pt;color:#000;margin-top:1pt}
  /* Le titre du document, quand il en porte un — « Notes aux états financiers
     au JJ/MM/AAAA ». Repris de la presentation d'un classeur de cabinet. */
  #printHead .ph-doc{font-family:var(--disp);font-weight:700;font-size:12pt;margin-top:6pt}
  /* Une ligne vide ne doit pas laisser d'espace : l'en-tete change selon le
     document imprime, et trois des cinq lignes sont vides la moitie du temps. */
  #printHead > div:empty{display:none}
  #printHead .ph-meta{font-size:9pt;color:#000;margin-top:2pt}
  /* Répété en tête de chaque page imprimée : une page isolée doit dire de
     quel client et de quel exercice elle parle. */
  #stepResults .tab-panel h3{font-family:var(--disp);font-size:12pt;margin:0 0 6pt;
    padding-bottom:3pt;border-bottom:.75pt solid #17252F}

  table.compare{width:100%;border-collapse:collapse;font-size:10pt}
  /* Sur un tableau qui déborde d'une page, l'en-tête doit se répéter :
     sinon la seconde page présente deux colonnes de chiffres sans titre. */
  table.compare thead{display:table-header-group}
  table.compare tr{break-inside:avoid;page-break-inside:avoid}
  table.compare th,table.compare td{border-bottom:.5pt solid #B9C2C7;padding:3pt 4pt}
  table.compare th{border-bottom:.75pt solid #17252F;text-align:left}
  table.compare td.c,table.compare th.c{text-align:right;font-variant-numeric:tabular-nums}
  /* Four columns now (libellé, N-1, exercice, variation): keep the label
     column from being squeezed to nothing on A4. */
  table.compare td:first-child,table.compare th:first-child{width:46%}

  /* Le ruban de contrôle reste : « balance équilibrée » est une information
     que le lecteur du document a le droit d'avoir. */
  .gen-banner{border:.5pt solid #B9C2C7;padding:4pt 6pt;margin:0 0 8pt;font-size:9pt}

  a[href]:after{content:""}
}

/* ---------- zone de dépôt (glisser-déposer un fichier) ---------- */
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:28px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.dropzone:hover,.dropzone.drag{border-color:var(--blue);background:#F3F8FB}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone .ic{color:var(--blue-deep);margin:0 auto 10px}
.dropzone .main{font-family:var(--disp);font-weight:600;font-size:14.5px}
.dropzone .main b{color:var(--blue-deep)}
.dropzone .sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.dropzone.has-file{border-style:solid;border-color:var(--ok);background:#F4FAF7;text-align:left;padding:16px 18px;cursor:default}
.dropzone.has-file input[type=file]{display:none}
.dropzone .file-row{display:flex;align-items:center;gap:12px}
.dropzone .file-row.gen-hidden,.dropzone .dz-empty.gen-hidden{display:none}
.dropzone .file-row .ic{margin:0;color:var(--ok)}
.dropzone .file-row .meta{flex:1;min-width:0}
.dropzone .file-row .name{font-family:var(--disp);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropzone .file-row .size{color:var(--muted);font-size:12.5px}
.dropzone .file-row .change{position:relative;z-index:1;flex:none}
.dropzone .file-row .change input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ---------- pastilles d'état (plan / statut / rôle) ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.02em;padding:4px 10px;border-radius:20px;white-space:nowrap}
.badge.b-blue{background:#EAF2F8;color:var(--blue-deep)}
.badge.b-ok{background:#E7F4EE;color:var(--ok)}
.badge.b-warn{background:#FFF6E0;color:#8A6D00}
.badge.b-err{background:#FBEAE8;color:var(--err)}
.badge.b-muted{background:var(--line-soft);color:var(--muted)}

/* ---------- import d'historique (N-1 / N-2, optionnel) ---------- */
.history-block{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:16px;background:var(--paper)}
.history-block .hb-title{font-family:var(--disp);font-weight:700;font-size:14px;margin-bottom:4px}
.history-block .hb-hint{color:var(--muted);font-size:13px;margin-bottom:14px}
.history-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line-soft)}
.history-row:first-of-type{border-top:none}
.hr-label{font-family:var(--disp);font-weight:600;font-size:13.5px}
/* The five liasse checkboxes sit in a .gen-row, whose align-items:flex-end is
   meant for form fields of differing height and leaves chips hanging. */
#xForms{align-items:center;gap:10px;margin-bottom:20px}
.history-row .hr-label{min-width:170px}
#xForms .hr-label{display:flex;align-items:center;gap:7px;font-weight:500}
.history-row .hr-file{position:relative}
.history-row .hr-file input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.history-row .hr-status{font-size:13px;color:var(--muted);flex:1;min-width:160px}
.history-row .hr-status.ok{color:var(--ok);font-weight:600}
.history-row .hr-status.err{color:var(--err);font-weight:600}

/* ---------- barre d'usage des postes (licence) ---------- */
.seat-bar{width:56px;height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden;display:inline-block;vertical-align:middle}
/* `display:block` INDISPENSABLE : un <span> est inline, et un element inline
   ignore width et height. La jauge etait donc large de 0 pixel — la barre
   n a jamais rien montre, quel que soit le nombre de postes occupes. */
.seat-bar .fill{display:block;height:100%;background:var(--blue);border-radius:4px}
.seat-bar.full .fill{background:var(--err)}

/* Identite d'une licence : quelle cle, jusqu'a quand, envoyee ou non.
   L'ecran n'affichait que le compte de postes, ce qui rendait la licence
   elle-meme invisible pour l'operateur qui venait de l'enregistrer. */
.lic-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11.5px;color:var(--muted);line-height:1.5}
.lic-meta code{font-family:var(--mono);font-size:11px;color:var(--ink)}
/* La cle est longue : elle doit se replier et rester selectionnable pour etre
   copiee dans un email ou dictee au telephone. */
.lic-key{margin-top:6px;max-width:420px}
.lic-key code{
  display:block;font-family:var(--mono);font-size:11px;line-height:1.5;
  padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-soft,#F6F7F5);color:var(--ink);
  word-break:break-all;user-select:all
}

/* ===================== Tableau des cabinets (admin) =====================
   Ce tableau reutilise `.compare`, une mise en forme concue pour des colonnes
   de chiffres. Sans les regles ci-dessous chaque cellule s etale a sa guise :
   les noms se coupaient en deux, et la colonne Licence empilait six elements
   de largeurs differentes. */

/* Une cellule de licence est un BLOC, pas une pile d elements detaches. */
.lic-cell{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:210px}
/* La ligne toujours visible : etat + identifiant + une seule commande. */
.lic-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.lic-head .seat-cell{display:inline-flex;align-items:center;gap:6px}
.lic-head .seat-cell .n{font-size:12.5px;color:var(--ink);white-space:nowrap}
.lic-head .lic-id{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Le detail, replie par defaut. */
.lic-detail{width:100%;display:flex;flex-direction:column;gap:7px}
.lic-actions{display:flex;flex-wrap:wrap;gap:6px}
.lic-cell .lic-meta{margin-top:0}
.lic-meta .warn{color:#8A6D00}

/* Boutons d action de ligne : assez petits pour tenir a plusieurs cote a cote
   sans que la ligne du tableau double de hauteur. */
.btn.xs{padding:5px 10px;font-size:12px;border-radius:7px;min-height:0}

/* Le nom du cabinet et sa date de creation, l un sous l autre. */
/* La colonne du nom reste EN PLACE quand le tableau defile.
   Neuf colonnes ne tiennent pas dans une fenetre ; des qu on faisait glisser
   pour atteindre la licence, on ne savait plus de quel cabinet il s agissait. */
.c-nom,#firmsTable thead th:first-child{
  position:sticky;left:0;z-index:2;background:var(--card);
  box-shadow:1px 0 0 var(--line-soft)
}
#firmsTable thead th:first-child{background:var(--line-soft)}
.c-nom{min-width:170px}
.c-nom .f-nom{display:block;font-weight:600;color:var(--ink)}
.c-nom .f-sub{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}

.c-mf{white-space:nowrap}
.c-mf code{font-family:var(--mono);font-size:12px}
.c-mf .btn{margin-left:8px;vertical-align:middle}

.c-num{white-space:nowrap;text-align:center}
.c-sel{min-width:120px}
/* Le plan DEDUIT, quand il ne correspond pas au plan enregistre. C est
   l explication du « mon changement n a pas ete pris en compte » : le reglage
   est bien enregistre, mais la deduction le ramene a « free ». */
.c-sel .f-eff{display:block;margin-top:4px;font-size:11px;color:#8A6D00}

/* Une donnee qui vient d ailleurs et ne se modifie pas ici : elle a l allure
   d un champ pour rester lisible dans la grille, mais pas son comportement.
   Un <select> grise inviterait a cliquer ; ceci non. */
.mf-fixed{
  padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;
  background:var(--bg-soft,#F6F7F5);color:var(--ink);font-size:14px
}
.c-date{white-space:nowrap}
.c-note{min-width:150px}
/* Largeur ARRETEE. Un <input> possede un `size` par defaut de 20 caracteres,
   et c est cette largeur INTRINSEQUE que l algorithme de table utilise : ouvrir
   le champ de cle elargissait la colonne de 164 px et poussait le tableau hors
   de la fenetre. `size="1"` sur le champ + une largeur fixe ici rendent la
   colonne insensible a ce qu on y ouvre. */
.c-lic{width:280px;max-width:280px}
.c-lic>.lic-cell{max-width:100%}

/* Aligner en HAUT. Une cellule Licence de 170 px de haut faisait flotter le nom
   du cabinet et ses commandes au milieu de la ligne, loin de l en-tete qu ils
   suivent. Le tableau se lit ligne par ligne : tout part du meme bord. */
#firmsTable td,#firmsTable th{vertical-align:top}
#firmsTable td{padding-top:14px;padding-bottom:14px}

/* Le <select> PORTE l etat, au lieu d etre double d une pastille qui repetait
   la meme valeur juste au-dessus. Une seule commande, une seule verite. */
.c-sel select,.c-note input,.c-date input{width:100%}
select.sel-b-blue{border-color:#B9D4E8;background:#EAF2F8;color:var(--blue-deep)}
select.sel-b-ok{border-color:#BFE0C8;background:#E7F4EE;color:var(--ok)}
select.sel-b-warn{border-color:#E8D191;background:#FFF6E0;color:#8A6D00}
select.sel-b-err{border-color:#F3C6C0;background:#FBEAE8;color:var(--err)}
select.sel-b-muted{border-color:var(--line);background:var(--card);color:var(--muted)}

/* Le formulaire de saisie d une cle occupe toute la largeur de la cellule :
   colle a cote des boutons, son champ devenait illisiblement etroit. */
/* Le formulaire est BORNE en largeur.
   Un <input type=text> reclame environ 180 px par defaut, et la case a cocher
   ajoutait sa legende a cote : la colonne Licence gonflait, poussait le tableau
   au-dela de la fenetre, et la premiere colonne — le nom du cabinet — sortait
   de l ecran par la gauche. */
.licence-form{flex-direction:column;align-items:stretch;gap:7px;width:100%;max-width:260px}
.licence-form input[type=text]{width:100%;min-width:0;font-family:var(--mono);font-size:11.5px}
.lic-form-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lic-form-row .check{white-space:nowrap;font-size:12px;padding:0}
.lic-form-row .btn{flex:none}
.seat-cell{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:110px}
.seat-cell .n{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- cartes de statistiques (tableau de bord admin) ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.stat-card .v{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.stat-card .l{color:var(--muted);font-size:13px;margin-top:4px}

/* ---------- étapes de la page pièces justificatives ----------
   Deux sources alimentent un seul assemblage (ce que le client envoie, ce que
   le cabinet ajoute). Empilées sans marquage, elles se lisaient comme deux
   fonctionnalités indépendantes ; numérotées, l'une se lit comme alimentant
   l'autre. */
.notes-step{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:16px;background:var(--paper)}
.ns-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.ns-num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:13px}
.ns-txt b{font-family:var(--disp);font-weight:700;font-size:14.5px;display:block;margin-bottom:3px}
.ns-txt span{color:var(--muted);font-size:13px;display:block}
/* Compteur accolé au titre : « combien de pièces sont arrivées » est la
   question qu'on se pose en rouvrant la page, et y répondre dans le titre
   évite d'avoir à compter des lignes. */
.ns-count{font-family:var(--mono);font-weight:600;font-size:11.5px;color:var(--blue-deep);background:#EAF2F8;border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:middle}
.ns-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Le statut passe à la ligne seul dès que la place manque, au lieu de comprimer
   les boutons : quatre boutons plus un message tiennent mal sur un portable. */
.ns-actions .hr-status{flex:1 1 100%;min-width:0;font-size:13px;color:var(--muted)}
@media (min-width:640px){
  .ns-actions .hr-status{flex:1 1 auto}
}

/* ---------- état vide ---------- */
.empty-state{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-state svg{margin:0 auto 12px;color:var(--line)}
.empty-state .t{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink)}
.empty-state .s{font-size:13.5px;margin-top:4px}

/* ---------- squelette de chargement ---------- */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skel-row{height:16px;border-radius:6px;background:linear-gradient(90deg,var(--line-soft) 0%,#F1F4F5 40%,var(--line-soft) 80%);background-size:400px 100%;animation:shimmer 1.3s infinite linear;margin:10px 0}

/* ---------- pied de page ---------- */
.foot{border-top:1px solid var(--line);background:var(--card);margin-top:60px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;padding:44px 20px 30px}
.foot .brand{font-size:18px}
.foot p{color:var(--muted);font-size:13.5px;margin-top:12px;max-width:280px}
.foot h4{font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
.foot a{display:block;color:var(--muted);font-size:14px;padding:5px 0}
.foot a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line-soft)}
.foot-bottom .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding:16px 20px;font-size:12.5px;color:var(--muted)}
.foot-bottom .norm{font-family:var(--mono);font-size:11.5px}

@media (max-width:720px){
  .privacy .wrap{grid-template-columns:1fr;gap:26px}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .nav-links .hide-sm{display:none}
  .wl-grid{grid-template-columns:1fr}
  .waitlist{padding:28px 20px}
  .gen-card{padding:22px 18px}
  .gen-field{min-width:0;flex:1 1 100%}
  .steps-track{gap:0}
  .steps-track .st .l{display:none}
  .steps-track .sep{width:20px}

  /* Collapsible mobile nav: the toggle button shows, the links list becomes
     a dropdown panel anchored under the bar, hidden until [data-open]. */
  .nav-toggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:var(--card);padding:0 20px;max-height:0;overflow:hidden;transition:max-height .2s ease,padding .2s ease}
  .nav-admin .nav-links{background:var(--ink)}
  .nav[data-open="true"] .nav-links{max-height:60vh;overflow-y:auto;padding:10px 20px 16px;border-bottom:1px solid var(--line)}
  .nav-admin[data-open="true"] .nav-links{border-bottom-color:rgba(255,255,255,.15)}
  .nav .wrap{position:relative}
  .nav-links a,.nav-links .btn{width:100%;justify-content:flex-start}
}
@media (max-width:480px){
  .foot .wrap{grid-template-columns:1fr}
}

/* ============================================================
   GUIDES (/guides/ et /guides/ar/)
   Pages de contenu indexables. Elles réutilisent .nav, .foot,
   .faq et .btn ; seul le corps de l'article a besoin de styles
   propres, plus le miroir RTL pour la version arabe.
   ============================================================ */

/* ---------- en-tête d'un guide ---------- */
.guide-head{padding:52px 0 8px;background:linear-gradient(180deg,var(--card),var(--paper))}
.guide-head .wrap{max-width:820px}
.guide-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(27px,4.2vw,40px);line-height:1.12;letter-spacing:-.025em;margin:14px 0 0}
.guide-head .lead{color:var(--muted);font-size:clamp(15.5px,2vw,18px);margin-top:14px}

/* Fil d'Ariane : sa valeur est autant pour le lecteur que pour le moteur, qui
   s'en sert pour afficher le chemin sous le titre dans les résultats. */
.crumb{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--blue-deep);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb .sep{opacity:.5}

/* Date + temps de lecture */
.guide-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- corps de l'article ---------- */
.article{max-width:820px;margin:0 auto;padding:34px 20px 10px}
.article h2{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.9vw,27px);letter-spacing:-.02em;margin:44px 0 14px;scroll-margin-top:80px}
.article h2:first-child{margin-top:0}
.article h3{font-family:var(--disp);font-weight:700;font-size:clamp(17px,2.2vw,19.5px);margin:30px 0 10px;scroll-margin-top:80px}
.article p{font-size:16px;line-height:1.75;margin-bottom:16px;color:#243642}
.article ul,.article ol{margin:0 0 18px 22px}
.article li{font-size:16px;line-height:1.72;margin-bottom:9px;color:#243642}
.article li::marker{color:var(--blue)}
.article strong,.article b{font-weight:600;color:var(--ink)}
/* Prose links only. The :not() list is load-bearing, not defensive: a bare
   `.article a` is (0,0,1,1), which OUTRANKS `.btn` and `.guide-card` at
   (0,0,1,0) no matter what order they appear in. Without it the call-to-action
   button renders as blue underlined text on its own navy fill, and the cards
   underline their headings. Any future link-shaped component dropped inside an
   article has to be added here too. */
.article a:not(.btn):not(.guide-card){color:var(--blue-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article a:not(.btn):not(.guide-card):hover{color:var(--blue)}
.article code{font-family:var(--mono);font-size:.88em;background:var(--line-soft);border-radius:5px;padding:2px 6px}
.article hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* Tableaux d'un guide : même grammaire visuelle que .compare, mais lisibles
   sans min-width, car ils portent du texte et non des colonnes d'offres. */
.article .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 20px}
.article table{border-collapse:collapse;width:100%}
.article th,.article td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:14.5px;vertical-align:top}
.article thead th{font-family:var(--disp);font-weight:700;font-size:13px;background:var(--paper);border-bottom:2px solid var(--ink);white-space:nowrap}
.article tbody tr:last-child td{border-bottom:none}
.article td code{white-space:nowrap}

/* ---------- sommaire ---------- */
.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:34px}
.toc b{font-family:var(--disp);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:10px}
.toc ol{margin:0 0 0 18px}
.toc li{font-size:14.5px;margin-bottom:6px;color:var(--muted)}
.toc a{color:var(--blue-deep);text-decoration:none;font-weight:500}
.toc a:hover{text-decoration:underline}

/* ---------- encadrés ----------
   .note pour un rappel, .warn pour ce que le lecteur ne doit surtout pas
   prendre pour argent comptant : les dates de dépôt changent et ne sont pas
   de notre ressort, cf. Companies\Echeances qui refuse la même autorité. */
.callout{border-radius:12px;padding:18px 22px;margin:0 0 22px;border:1px solid var(--line);background:var(--card)}
.callout p{margin-bottom:0;font-size:15px}
.callout p+p{margin-top:10px}
.callout b{font-family:var(--disp);display:block;margin-bottom:6px;font-size:14.5px}
.callout.note{border-left:3px solid var(--blue);background:#F2F7FB}
.callout.warn{border-left:3px solid #C89A00;background:#FFFBEF}
.callout.warn b{color:#7A5E00}

/* ---------- renvoi produit en fin de section ---------- */
.guide-cta{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:34px 0 8px;display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between}
.guide-cta .t{flex:1 1 300px}
.guide-cta .t b{font-family:var(--disp);font-weight:700;font-size:16px;display:block;margin-bottom:4px}
.guide-cta .t span{color:var(--muted);font-size:14px}

/* Sized up to .btn.lg here rather than adding the class to ten files: this is
   the conversion point of a ten-minute read and the default 14px button reads
   as an afterthought inside a 26px-padded card. */
.guide-cta .btn{padding:14px 26px;font-size:15px;flex:none;box-shadow:0 6px 16px rgba(23,37,47,.13)}
.guide-cta .btn:hover{box-shadow:0 8px 22px rgba(20,100,159,.26)}
.guide-cta .btn:active{box-shadow:0 3px 10px rgba(23,37,47,.16)}

/* Chevron drawn from borders instead of an inline SVG or a "→" glyph: it is
   purely decorative so it does not belong in the DOM, it costs no extra markup
   across ten pages, and it cannot fall back to a different font's arrow. */
.guide-cta .btn::after{content:"";width:7px;height:7px;flex:none;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-inline-start:2px;transition:margin-inline-start .15s ease}
.guide-cta .btn:hover::after{margin-inline-start:7px}
/* Arrows follow the reading direction; in Arabic that is leftwards. */
[dir="rtl"] .guide-cta .btn::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){
  .guide-cta .btn::after{transition:none}
  .guide-cta .btn:hover::after{margin-inline-start:2px}
}

/* ---------- guides liés ---------- */
.guide-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.guide-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .12s}
.guide-card:hover{border-color:var(--blue);box-shadow:0 8px 22px rgba(20,100,159,.12);transform:translateY(-2px)}
.guide-card:active{transform:translateY(0)}
.guide-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The whole card is the link, so the heading is what should look clickable.
   Underline rather than recolour: swapping --ink for --blue-deep here moved the
   heading from 15.65:1 to 9.27:1, i.e. it got HARDER to read at the exact
   moment the pointer was on it. Both pass AA; the direction was still wrong. */
.guide-card:hover h3{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){
  .guide-card,.guide-card:hover{transform:none}
}
.guide-card .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.guide-card h3{font-family:var(--disp);font-weight:700;font-size:16.5px;margin:8px 0 6px;line-height:1.3}
.guide-card p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}

/* ---------- sélecteur de langue ---------- */
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.lang-switch a{font-family:var(--mono);font-size:12px;font-weight:500;padding:6px 12px;color:var(--muted)}
.lang-switch a[aria-current="true"]{background:var(--ink);color:#fff}
.lang-switch a:not([aria-current="true"]):hover{background:var(--paper);color:var(--ink)}

/* ============================================================
   ARABE / RTL
   Le site charge Inter, Archivo et IBM Plex Mono en local
   (font-src 'self' dans .htaccess) et aucune des trois ne
   couvre l'arabe. La pile ci-dessous ne référence donc que des
   polices déjà installées sur le système du lecteur : rien
   n'est téléchargé, la CSP est respectée.
   ============================================================ */
[lang="ar"],[dir="rtl"]{
  --disp:'Segoe UI','Noto Naskh Arabic','Geeza Pro','Traditional Arabic',Tahoma,sans-serif;
  --sans:'Segoe UI','Noto Naskh Arabic','Geeza Pro',Tahoma,sans-serif;
  --mono:'Segoe UI Mono','Noto Naskh Arabic',Tahoma,monospace;
}
/* L'arabe naskh a une hauteur d'x plus faible : sans ce rattrapage le corps
   de texte paraît une taille en dessous du français à taille égale. */
[dir="rtl"] .article p,[dir="rtl"] .article li{font-size:17px;line-height:1.95}
[dir="rtl"] .article h2{letter-spacing:0}
[dir="rtl"] .article h1,[dir="rtl"] .guide-head h1{letter-spacing:0;line-height:1.3}

[dir="rtl"] .article th,[dir="rtl"] .article td,
[dir="rtl"] table.compare th,[dir="rtl"] table.compare td{text-align:right}
[dir="rtl"] .article ul,[dir="rtl"] .article ol,
[dir="rtl"] .toc ol{margin-left:0;margin-right:22px}
[dir="rtl"] .callout.note,[dir="rtl"] .callout.warn{border-left:1px solid var(--line);border-right:3px solid var(--blue)}
[dir="rtl"] .callout.warn{border-right-color:#C89A00}
[dir="rtl"] .foot p{max-width:280px}

/* Les chiffres, matricules, codes de formulaire (F6001) et dates restent en
   lecture gauche→droite au milieu d'une phrase arabe. Sans isolation, le
   bidi-algorithme colle la ponctuation du mauvais côté : « F6001. » devient
   « .F6001 ». */
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

@media (max-width:720px){
  .guide-cta{flex-direction:column;align-items:flex-start}
  .article{padding-top:26px}
  .toc{padding:16px 18px}
}