/* Facturier Québec en ligne — styles (repris de Facturier Québec 1.2, puis ajouts de la version en ligne)
   © 2026 DRAK Infinity (NEQ 2281240509). Tous droits réservés. DRAK-FQS-2026-B2H6 */
:root{--bleu:#1f3a5f;--accent:#2e7d32;--gris:#5a6472;--fond:#f4f6f9;--ligne:#d9dee5;--vert:#2e7d32;--rouge:#c62828;--police:"Segoe UI",Arial,sans-serif;--police-facture:"Segoe UI",Arial,sans-serif;}
body{font-family:var(--police)}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:#1a1a1a}
header{background:var(--bleu);color:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
header h1{margin:0;font-size:19px}
header small{opacity:.85;display:block;font-size:12px}
.wrap{display:grid;grid-template-columns:420px 1fr;gap:20px;padding:20px;max-width:1400px;margin:0 auto}
@media(max-width:980px){.wrap{grid-template-columns:1fr}}
/* Forcer les colonnes à respecter la largeur du conteneur */
.col-gauche{min-width:0;container-type:inline-size}   /* mission 29, fait 172 : contexte de requête de conteneur, voir .export plus bas */
.facture{min-width:0}
/* Correction du débordement à 390 px : réduire le padding pour les très petits écrans */
@media(max-width:480px){.wrap{padding:8px;gap:12px}}
.panel{background:#fff;border:1px solid var(--ligne);border-radius:8px;padding:16px;margin-bottom:16px}
.panel h2{margin:0 0 12px;font-size:15px;color:var(--bleu);text-transform:uppercase;letter-spacing:.5px}
label{display:block;font-size:12px;color:var(--gris);margin:8px 0 3px}
input,textarea,select{width:100%;padding:8px;border:1px solid var(--ligne);border-radius:5px;font-size:14px;font-family:inherit}
textarea{min-height:60px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:6px;align-items:end}
/* Grilles responsives pour 390 px et plus petits */
@media(max-width:480px){
  .row{grid-template-columns:1fr;gap:8px}
  .row3{grid-template-columns:1fr;gap:6px}
  .export{grid-template-columns:1fr !important}
  .panel{padding:12px;margin-bottom:40px}
  /* Mission 28, D161-11 : en une seule colonne (pas de place à côté pour une bulle, .wrap en 1fr dès 980px), le calcul de place libre de
     web/js/aide.js (poussée verticale le long des champs, D161-8, puis balayage du viewport entier) ne trouvait plus nulle part où atterrir dans le
     panneau Client affiché sous le panneau Dépenses ouvert : les champs y sont empilés avec seulement 8 à 11 px entre eux (label), bien moins que la
     hauteur d'une bulle d'aide (34 à 52 px pour client-adresse et client-courriel) — et cette poussée, en remontant, butait sur le dernier paragraphe
     (haut sur trois lignes à cette largeur) du panneau Dépenses juste au-dessus, plein largeur, sans aucun dégagement latéral pour l'éviter. Pas un
     texte trop long : un vrai calcul géométrique (aide.test.mjs, tests/e2e/aide.mjs) confirme qu'aucun rectangle libre n'existe nulle part à l'écran
     à cette position, quel que soit le champ. Scopé à `.panel label` (pas tout `label`) : élargir à toute l'application poussait, par exemple, le
     bouton « ＋ Ajouter une ligne » hors du viewport après l'ajout d'une ligne (tests/e2e/aide.test.mjs, « écran tactile »), un effet de bord sans
     lien avec le vrai problème (densité du panneau Client). Les étiquettes déjà resserrées à dessein pour un autre motif (.check label, .modale-eg
     label, .modale-assistant label, #numero_fenetre label, etc.) gardent leurs propres réglages : leur sélecteur plus spécifique l'emporte toujours. */
  .panel label{margin:20px 0 10px}
}
button{cursor:pointer;border:none;border-radius:5px;padding:9px 14px;font-size:14px;font-weight:600}
.btn-p{background:var(--bleu);color:#fff}
.btn-s{background:#e8edf3;color:var(--bleu)}
.btn-d{background:#fde8e8;color:var(--rouge);padding:6px 10px}
.btn-v{background:var(--accent);color:#fff}
.btn-w{background:#fff;color:var(--bleu);border:1px solid #fff}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ligne-item{margin-bottom:6px}
.hint{font-size:11px;color:var(--gris);margin-top:4px}
.check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:14px}
.check input{width:auto}
.taxe-item{display:grid;grid-template-columns:2fr 1fr auto;gap:6px;align-items:end;margin-bottom:6px}
footer{text-align:center;font-size:11px;color:var(--gris);padding:14px 20px 24px}
footer a{color:var(--bleu);text-decoration:none;margin:0 6px}

/* ---------- Modales ---------- */
.voile{position:fixed;inset:0;background:rgba(15,25,40,.72);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.voile.ouvert{display:flex}
.modale{background:#fff;border-radius:10px;max-width:720px;width:100%;max-height:92vh;overflow:auto;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modale h2{margin:0 0 6px;color:var(--bleu);font-size:22px}
.modale h3{margin:18px 0 6px;font-size:14px;color:var(--bleu);text-transform:uppercase;letter-spacing:.5px}
.modale p{margin:6px 0;font-size:14px;line-height:1.5}
.legal{background:var(--fond);border:1px solid var(--ligne);border-radius:6px;padding:12px;font-size:12.5px;line-height:1.55;max-height:220px;overflow:auto;color:#333}
.surmesure{background:var(--fond);border:1px solid var(--ligne);border-left:4px solid var(--vert);border-radius:6px;padding:10px 12px;margin-top:14px;font-size:13px;line-height:1.5}
.surmesure a{color:var(--bleu);font-weight:600;overflow-wrap:anywhere}
.etape{display:none}.etape.active{display:block}
.pastilles{display:flex;gap:6px;margin-bottom:14px}
.pastilles span{height:6px;flex:1;background:var(--ligne);border-radius:3px}
.pastilles span.on{background:var(--bleu)}
.relire{display:none}
.relecture{z-index:55}
.relecture .premier,.relecture .pastilles{display:none}
.relecture .relire{display:flex}

/* ---------- Hors ligne (mission 25, lot C, fait 146, D146-4) ---------- */
.hors-ligne{position:fixed;inset:0;background:var(--fond);z-index:40;overflow:auto;padding:20px;display:flex;justify-content:center}
.hors-ligne[hidden]{display:none}
.hors-ligne-carte{background:#fff;border:1px solid var(--ligne);border-radius:10px;max-width:640px;width:100%;padding:24px;align-self:flex-start;margin-top:20px}
.hors-ligne-bandeau{background:#fff8e6;border:1px solid #ecd9a5;border-radius:6px;padding:10px 14px;font-size:13px;color:#4a3a00;margin:0 0 16px}
.hors-ligne-liste{list-style:none;padding:0;margin:0 0 18px}
.hors-ligne-liste li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--ligne);font-size:13px}

/* ---------- Aperçu facture ---------- */
.facture{background:#fff;padding:40px;min-height:1000px;border:1px solid var(--ligne);border-radius:8px;font-size:14px;position:relative}
.f-entete{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--bleu);padding-bottom:16px;margin-bottom:20px}
.f-entete img{max-height:70px;max-width:220px;object-fit:contain;margin-bottom:6px}
.f-titre{font-size:30px;font-weight:700;color:var(--bleu);text-align:right}
.f-meta{text-align:right;font-size:13px;color:var(--gris)}
.f-blocs{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:24px}
.f-blocs h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;color:var(--gris);letter-spacing:.6px}
.f-blocs p{margin:0;line-height:1.5;white-space:pre-line}
table.f-tab{width:100%;border-collapse:collapse;margin-bottom:16px}
.f-tab th{background:var(--bleu);color:#fff;text-align:left;padding:8px;font-size:12px}
.f-tab td{padding:8px;border-bottom:1px solid var(--ligne)}
.f-tab .num{text-align:right;white-space:nowrap}
.f-totaux{margin-left:auto;width:320px}
.f-totaux div{display:flex;justify-content:space-between;padding:5px 8px}
.f-totaux .grand{border-top:2px solid var(--bleu);font-weight:700;font-size:17px;color:var(--bleu);margin-top:4px}
.f-pied{margin-top:30px;padding-top:14px;border-top:1px solid var(--ligne);font-size:12px;color:var(--gris);white-space:pre-line}
.f-statut{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;margin-top:6px}
.paye{background:#e3f3e5;color:var(--vert)} .impaye{background:#fdecec;color:var(--rouge)}
.f-taxes{font-size:12px;color:var(--gris);margin-top:6px}
.f-credit{position:absolute;bottom:10px;right:14px;font-size:9px;color:#b0b6bd}
.f-signature{margin-top:36px;display:flex;justify-content:space-between;align-items:flex-end;font-size:12px;color:var(--gris)}
.f-signature .ligne-sig{border-top:1px solid var(--gris);width:200px;padding-top:4px;text-align:center}
.f-merci{margin-top:18px;font-size:14px;color:var(--bleu);font-style:italic}
.swatch{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid #ccc}
.themes{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.themes button{padding:6px 10px;font-size:12px;background:#fff;border:1px solid var(--ligne);color:#222}
.themes button.on{border-color:var(--bleu);box-shadow:0 0 0 2px var(--bleu) inset}
.dossier{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.dossier small{color:var(--gris);display:block;font-size:11px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:#fff;padding:10px 16px;border-radius:6px;font-size:13px;display:none;z-index:60}

/* ---------- Gabarits de facture ---------- */
.facture{font-family:var(--police-facture)}
.t-moderne .f-entete{background:var(--bleu);color:#fff;margin:-40px -40px 24px;padding:32px 40px 24px;border:none;border-radius:8px 8px 0 0}
.t-moderne .f-entete .f-titre,.t-moderne .f-entete .f-meta,.t-moderne .f-entete div,.t-moderne .f-taxes{color:#fff!important}
.t-moderne .f-entete .f-meta,.t-moderne .f-taxes,.t-moderne .f-entete div div{opacity:.92}
.t-moderne .f-entete img{background:#fff;padding:6px;border-radius:6px}
.t-moderne .f-tab th{background:var(--accent)}
.t-moderne .f-tab tr:nth-child(even) td{background:var(--fond)}
.t-moderne .f-totaux .grand{background:var(--bleu);color:#fff;border:none;border-radius:6px;padding:10px}
.t-moderne .f-statut{border-radius:20px}
.t-elegant{--police-facture:Georgia,"Times New Roman",serif}
.t-elegant .f-entete{flex-direction:column;align-items:center;text-align:center;border-bottom:1px solid var(--bleu);gap:6px}
.t-elegant .f-entete>div{text-align:center}
.t-elegant .f-titre{font-size:26px;letter-spacing:6px;font-weight:400;text-align:center;margin-top:10px}
.t-elegant .f-meta{text-align:center}
.t-elegant .f-tab th{background:none;color:var(--bleu);border-bottom:2px solid var(--bleu);font-family:var(--police-facture);letter-spacing:1px}
.t-elegant .f-tab td{border-bottom:1px solid #eee}
.t-elegant .f-totaux .grand{border-top:1px solid var(--bleu);font-weight:400;letter-spacing:1px}
.t-elegant .f-blocs h3{letter-spacing:2px}

@media print{
  body{background:#fff}
  header,.col-gauche,.no-print,footer,.voile{display:none!important}
  .wrap{display:block;padding:0;margin:0;max-width:none}
  .facture{border:none;border-radius:0;padding:14mm 16mm;min-height:auto;box-shadow:none}
  .t-moderne .f-entete{margin:-14mm -16mm 24px;padding:14mm 16mm 20px;border-radius:0}
  .f-entete,.f-tab th,.f-totaux .grand,.f-statut{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:letter;margin:0}
}

/* ---------- Ajouts de la version en ligne ---------- */
.lien{text-decoration:none;display:inline-block;border-radius:5px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer}
.check label{margin:0;font-size:14px;color:#1a1a1a}
.bandeau{background:#fff8e6;border-bottom:1px solid #ecd9a5;color:#5c4400;padding:10px 20px;font-size:14px;display:none;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-height:30vh;overflow:auto}
.bandeau.visible{display:flex}
.bandeau{box-sizing:border-box;max-width:100%}.bandeau>*{max-width:100%;overflow-wrap:anywhere}   /* jamais de défilement horizontal, même à 320 px */
.bandeau button{padding:6px 12px}
.bandeau a{color:inherit;text-decoration:underline;font-weight:600}
/* Invitation à la deuxième vérification : un seul bandeau à la fois (js/bandeaux.js); le détail se déplie sous le texte. */
.bandeau-invitation{background:#eef3fa;border-bottom-color:#c9d6e8;color:#1f3a5f}
.bandeau .bandeau-detail{flex-basis:100%;margin:0;max-width:760px;text-align:center;font-size:13px;line-height:1.5}
.bandeau .bandeau-detail[hidden]{display:none}
.avertissement-2fa{font-size:13px;line-height:1.5;margin:8px 0;padding:8px 12px;background:#fff8e6;border:1px solid #ecd9a5;border-radius:6px;color:#5c4400}
.avertissement-2fa[hidden]{display:none}
.perte-2fa{font-size:13px;line-height:1.5;margin:8px 0}
.perte-2fa summary{cursor:pointer;font-weight:600}
.refus-canada{font-size:13.5px;line-height:1.5;margin:10px 0;padding:10px 12px;background:#fdecec;border:1px solid #f1c2c2;border-radius:6px;color:#8a1c1c}
.refus-canada[hidden]{display:none}
.refus-canada a{color:inherit;text-decoration:underline;font-weight:600}
.beta{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:1px 9px;font-size:11px;letter-spacing:.5px;margin-left:8px;vertical-align:2px;font-weight:600}
.etat{font-size:13px;line-height:1.5;margin:6px 0}
.pastille{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700}
.p-ok{background:#e3f3e5;color:var(--vert)} .p-att{background:#fff3d6;color:#8a5a00} .p-non{background:#fdecec;color:var(--rouge)}
.logo-apercu{max-height:48px;max-width:180px;display:none;margin-top:6px}
.liste-item{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--ligne);padding:6px 0;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed}
footer .plus{margin-top:6px}
.chargement{position:fixed;inset:0;background:var(--fond);display:flex;align-items:center;justify-content:center;z-index:70;font-size:15px;color:var(--gris)}
.chargement.fini{display:none}
.chargement.verif{color:transparent}
.toast{pointer-events:none}   /* un message d'état ne doit jamais masquer un bouton */
/* Deuxième vérification : fenêtres au-dessus de Paramètres; l'écran du code passe même devant l'écran de chargement. */
.voile-haut{z-index:56}
.voile-verif{z-index:80}
.erreur{color:var(--rouge);font-size:13px;min-height:18px;margin-top:6px}
.code-saisie{font-family:Consolas,"Courier New",monospace;font-size:20px;letter-spacing:3px;text-align:center}
.qr{display:flex;justify-content:center;margin:10px 0}
.qr img{width:200px;height:200px;background:#fff;border:1px solid var(--ligne);border-radius:6px;padding:8px}
.cle{font-family:Consolas,"Courier New",monospace;font-size:15px;letter-spacing:1px;background:var(--fond);border:1px solid var(--ligne);border-radius:6px;padding:8px 10px;overflow-wrap:anywhere;user-select:all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding:12px 12px 12px 36px;margin:10px 0;background:var(--fond);border:1px solid var(--ligne);border-radius:6px;font-family:Consolas,"Courier New",monospace;font-size:16px}
.codes li{padding-left:2px}
/* Activation : le code QR reste noir sur blanc (jamais inversé), même en contraste élevé; il sert aussi de lien otpauth:// pour ouvrir l'application sur ce téléphone. */
.qr a{display:block;line-height:0;border-radius:6px;cursor:pointer}
.qr a:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.qr img{background:#fff;color-scheme:light;forced-color-adjust:none;filter:none}
.encadre-qr{background:#eef3fa;border:2px solid var(--bleu);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.5;color:#1a1a1a}
.encadre-qr p{margin:0 0 6px}.encadre-qr .encadre-titre{font-size:15px;color:var(--bleu)}
.encadre-qr ul{margin:4px 0 0;padding-left:20px}.encadre-qr li{margin:2px 0}
.hint-telephone{font-size:13px;margin:6px 0 10px}.hint-telephone a{color:var(--bleu);font-weight:600;text-decoration:underline;cursor:pointer}
.cle-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}.cle-ligne .cle{flex:1 1 220px;min-width:0}.cle-ligne button{flex:0 0 auto}
@media(max-width:480px){.codes{grid-template-columns:1fr}.qr img{width:180px;height:180px}.cle{font-size:14px;letter-spacing:.5px}}
/* Page d'accueil et page de paiement */
.centre{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.carte-accueil{background:#fff;border:1px solid var(--ligne);border-radius:10px;max-width:480px;width:100%;padding:32px;box-shadow:0 10px 40px rgba(31,58,95,.12)}
.carte-accueil h1{margin:0 0 4px;font-size:24px;color:var(--bleu)}
.carte-accueil p{font-size:14px;line-height:1.55;margin:10px 0}
.etiquette{display:inline-block;background:#e8edf3;color:var(--bleu);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px}
.message{border-radius:6px;padding:10px 12px;font-size:13.5px;line-height:1.5;margin-top:12px;display:none}
.message.visible{display:block}
.message.ok{background:#e3f3e5;color:#1e4d2b}
.message.erreur{background:#fdecec;color:#8a1c1c}
.message.info{background:#e8edf3;color:var(--bleu)}
.pied-accueil{font-size:11.5px;color:var(--gris);margin-top:18px;line-height:1.6;text-align:center}
.pied-accueil a{color:var(--bleu)}
.montant-du{font-size:34px;font-weight:700;color:var(--bleu);margin:6px 0}
@media print{.bandeau,.chargement,.toast{display:none!important}}

/* ---------- Marque de l'utilisateur : gabarits côte à côte, exports, lot de PDF ---------- */
.gabarits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.gabarits button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;background:#fff;border:1px solid var(--ligne);color:#222;border-radius:8px;cursor:pointer;font-weight:400}
.gabarits button.on{border-color:var(--bleu);box-shadow:0 0 0 2px var(--bleu) inset}
.gabarits small{font-size:11px;color:var(--gris);text-align:center;line-height:1.3}
.mini{position:relative;display:block;width:100%;max-width:120px;height:120px;border:1px solid var(--ligne);border-radius:4px;background:#fff;padding:8px;overflow:hidden}
.mini span{display:block}
.m-tete{height:6px;width:60%;background:var(--bleu);margin-bottom:8px}
.m-ligne{height:3px;background:#d5d9de;margin-bottom:4px}.m-ligne.court{width:55%}
.m-tab{margin-top:8px}.m-tab i{display:block;height:7px;border-bottom:1px solid #d5d9de}.m-tab i:first-child{background:var(--bleu);border:none}
.m-total{height:5px;width:40%;margin:8px 0 0 auto;background:var(--bleu)}
.m-elegant .m-tete{margin:0 auto 8px;width:40%;height:2px;background:#1a1a1a}.m-elegant .m-tab i:first-child{background:none;border-bottom:2px solid #1a1a1a}.m-elegant .m-total{background:#1a1a1a;height:2px}
.m-moderne{padding-top:26px}.m-moderne .m-tete{position:absolute;top:0;left:0;width:100%;height:20px;margin:0}.m-moderne .m-tab i:first-child{background:var(--accent)}.m-moderne .m-tab i:nth-child(3){background:var(--fond)}
.m-classique .m-tab i{border:1px solid #333;border-top:none}.m-classique .m-tab i:first-child{border:1px solid #333}
.m-cachet{position:absolute;right:6px;top:30px;border:2px solid #2e7d32;color:#2e7d32;font-size:8px;font-weight:700;letter-spacing:1px;padding:1px 4px;transform:rotate(-10deg)}
.devis-discret{margin-top:10px}
.export{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:8px;align-items:end;margin-bottom:6px}
.export>div{min-width:0}   /* mission 29, fait 172 : sans ça, un input[type=date] ou un select à texte long imposent leur largeur minimale de contenu et poussent la grille hors du bloc */
.export button{padding:8px 14px;border:1px solid transparent;height:39px}   /* mission 29, fait 172 : même hauteur que les champs voisins (39px, mesuré : input/select ont une hauteur intrinsèque légèrement supérieure à padding+bordure+texte, propre aux contrôles natifs) */
/* Mission 29, fait 172 : le bouton « Exporter » du bloc Historique sortait du bloc par la droite à 1024, 1280, 1366 et 1440 px de largeur de FENÊTRE; .col-gauche
   reste fixé à 420 px dès que .wrap passe à deux colonnes (ligne 10, à partir de 980 px de fenêtre), alors que .export ne repassait en une seule colonne qu'en
   dessous de 480 px DE FENÊTRE (règle juste au-dessus) : un panneau de 420 px de large (388 px de contenu une fois son padding soustrait) ne correspond à AUCUNE
   des deux règles, pour toute largeur de fenêtre de 980 px à l'infini, exactement les quatre largeurs citées. Correctif par requête de CONTENEUR (la largeur
   réellement disponible, pas celle de la fenêtre) : sous le même seuil que .row et .row3 ci-dessus (480 px), .export repasse en une colonne, le bouton sous les
   champs, que ce soit un petit écran ou une colonne étroite et fixe dans un grand écran. Repose sur .col-gauche{container-type:inline-size} plus haut. */
@container (max-width:480px){
  .export{grid-template-columns:1fr}
}
/* Sobre : noir et blanc, quelles que soient les couleurs de la palette. */
.t-elegant{--bleu:#1a1a1a;--accent:#1a1a1a}
.t-elegant .f-merci{color:#1a1a1a}
/* Classique : tableau encadré et cachet « PAYÉ ». */
.t-classique .f-tab th,.t-classique .f-tab td{border:1px solid #333}
.t-classique .f-statut.paye{background:none;border:3px solid var(--vert);color:var(--vert);font-size:18px;letter-spacing:3px;padding:4px 14px;transform:rotate(-6deg);margin-top:10px}
#lot{display:none}
@media print{
  body.impression-lot #apercu{display:none!important}
  body.impression-lot #lot{display:block}
  #lot .facture{page-break-after:always;break-after:page}
  #lot .facture:last-child{page-break-after:auto;break-after:auto}
  .t-classique .f-statut.paye{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- Mission 15 : explications, encart « Aller plus loin », rappels personnalisables, mise en demeure ---------- */
.explication{font-size:13px;color:var(--gris);margin:0 0 8px;line-height:1.45}
.explication a{color:inherit;text-decoration:underline;white-space:nowrap}
.encart{background:var(--fond);border:1px solid var(--ligne);border-left:4px solid var(--vert);border-radius:6px;padding:4px 14px 12px;margin:12px 0 4px}
.encart[hidden]{display:none}
.encart h3{margin:10px 0 4px}
.onglets{display:flex;gap:6px;margin-top:12px;border-bottom:1px solid var(--ligne)}
.onglets button{background:none;border:1px solid transparent;border-bottom:none;border-radius:6px 6px 0 0;color:var(--gris);padding:8px 14px;font-weight:600}
.onglets button[aria-selected="true"]{background:#fff;border-color:var(--ligne);color:var(--bleu);box-shadow:0 2px 0 #fff}
.champs{display:flex;gap:6px;flex-wrap:wrap}
.champs button{background:#fff;border:1px solid var(--ligne);color:var(--bleu);padding:6px 10px;font-size:13px}
.apercu-rappel{width:100%;height:420px;border:1px solid var(--ligne);border-radius:6px;background:#f3f1ec;margin-top:6px}
.note-emploi{background:#fff8e6;border:1px solid #ecd9a5;border-radius:6px;padding:8px 14px;margin-top:12px;font-size:13px;line-height:1.5;color:#4a3a00}
.note-emploi h4{margin:6px 0 2px;font-size:13px}
.note-emploi p{margin:4px 0;font-size:13px}
.avertissement{font-size:13px;font-weight:600;color:#1a1a1a;margin:12px 0 0}
.feuille-demeure{background:#fff;border:1px solid var(--ligne);border-radius:6px;padding:22px 26px;font-family:var(--police-facture);font-size:13px;line-height:1.5;max-height:420px;overflow:auto}
.feuille-demeure .bande{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--bleu);padding-bottom:10px;margin-bottom:14px}
.feuille-demeure .bande img{max-height:56px;max-width:180px;object-fit:contain}
.feuille-demeure .bande strong{font-size:18px;color:var(--bleu)}
.feuille-demeure .l{white-space:pre-wrap;overflow-wrap:anywhere}
.feuille-demeure .l.gras{font-weight:700}
.feuille-demeure .l.vide{height:.9em}
.feuille-impression{display:none}
@media print{
  body.impression-demeure .wrap{display:none!important}
  body.impression-demeure #demeure_feuille{display:block;border:none;border-radius:0;max-height:none;overflow:visible;padding:18mm 20mm;font-size:11pt;line-height:1.45}
  body.impression-demeure .feuille-demeure .bande{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* Sommaire de taxes (mission 25, lot C, fait 144) : même mécanisme que la mise en demeure (#demeure_feuille) — une feuille cachée à l'écran, seule visible à l'impression. */
@media print{
  body.impression-sommaire .wrap{display:none!important}
  body.impression-sommaire #sommaire_impression{display:block;border:none;border-radius:0;max-height:none;overflow:visible;padding:18mm 20mm;font-size:11pt;line-height:1.45}
}
/* Portail du client final (mission 25, lot C, fait 145) : même mécanisme, sur web/portail.html (page publique, pas de #apercu ni de .wrap). */
.liste-portail{list-style:none;padding:0;margin:12px 0;text-align:left}
.liste-portail li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--ligne)}
.liste-portail .lp-actions{display:flex;gap:6px}
.langues{display:flex;gap:6px;justify-content:flex-end;margin-bottom:8px}
.langues button{background:#fff;border:1px solid var(--ligne);border-radius:4px;padding:2px 10px;font-size:12px;color:var(--gris);cursor:pointer}
.langues button[aria-pressed="true"]{color:var(--bleu);border-color:var(--bleu);font-weight:700}
#impression_facture{display:none}
@media print{
  body.impression-portail .centre{display:none!important}
  body.impression-portail #impression_facture{display:block;border:none;border-radius:0;max-height:none;overflow:visible;padding:18mm 20mm;font-size:11pt;line-height:1.45}
}
.sommaire-impression-corps table{width:100%;border-collapse:collapse;margin:10px 0;font-size:11pt}
.sommaire-impression-corps th,.sommaire-impression-corps td{padding:6px 8px;border-bottom:1px solid #ccc;text-align:left}
.sommaire-impression-corps th:last-child,.sommaire-impression-corps td:last-child{text-align:right}
.tx-table th,.tx-table td{padding:8px;border-bottom:1px solid var(--ligne);text-align:left}
.tx-table th:not(:first-child),.tx-table td:not(:first-child){text-align:right}
.tx-table th{background:var(--fond);font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--bleu)}
@media(max-width:480px){.onglets button{padding:8px 8px;font-size:13px}.apercu-rappel{height:360px}}

/* Option texto (Paramètres → Notifications) : ligne, fenêtre, états. L'attribut hidden doit l'emporter sur les display ci-dessous. */
.texto-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);font-size:14px}
.texto-ligne[hidden],.texto-etat[hidden],.check[hidden]{display:none}
.texto-ligne .actions{margin-top:0}
.champ-bouton{display:flex;gap:8px;align-items:stretch}
.champ-bouton input,.champ-bouton select{flex:1;min-width:0}
.check-haut{align-items:flex-start;margin-top:14px}
.check-haut input{margin-top:3px}
.check-haut label{font-size:13px;line-height:1.45}
.texto-etat{margin-top:10px}
@media(max-width:480px){.champ-bouton{flex-direction:column}.texto-ligne .actions{width:100%}}

/* Garantie du prix de lancement (Paramètres → Abonnement) et paragraphe « Ce que nous faisons de votre numéro » (fenêtre de l'option texto). L'attribut hidden doit l'emporter. */
.garantie-phrase{margin:10px 0 0;padding:10px 12px;border:1px solid var(--ligne);border-left:3px solid var(--accent);border-radius:5px;background:#f6faf6;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.garantie-phrase[hidden]{display:none}
.avis-numero{margin-top:12px;padding:10px 12px;background:var(--fond);border:1px solid var(--ligne);border-radius:5px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.avis-numero p{margin:0 0 6px}
.avis-numero p:last-child{margin-bottom:0}

/* Addendum 15.2 : à 360 px, le bloc des totaux de la feuille (320 px fixes) dépassait de 9 px la largeur de l'écran; il ne dépasse plus celle de la feuille. */
.f-totaux{max-width:100%}
/* Addendum 15.2 : à 360 px, le tableau des lignes de la feuille (marges de 40 px, colonnes de chiffres insécables) dépassait de 5 px; marges et cellules réduites à l'écran seulement (l'impression garde les siennes). */
@media screen and (max-width:480px){.facture{padding:16px}.f-tab th,.f-tab td{padding:6px 4px}.f-tab td:first-child{overflow-wrap:anywhere}}

/* ---------- Mission 16, tranches T8 et T10 : catalogue d'options textos, récapitulatif signé, Mes engagements, assistant de configuration ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.voile-haut-2{z-index:58}
.voile-haut-3{z-index:60}
.lien-bouton{background:none;color:var(--bleu);text-decoration:underline;font-weight:600;padding:9px 4px}
.lien-bouton[hidden],.eg-code[hidden],.options-bloc[hidden],#engagements_zone[hidden],#abonnement_suivi[hidden],.aa-rien[hidden]{display:none}
.modale-eg :focus-visible,.modale-assistant :focus-visible,#numero_fenetre :focus-visible,.options-bloc :focus-visible,.engagements-liste :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h2[tabindex="-1"]:focus,h2[tabindex="-1"]:focus-visible{outline:none}
/* Catalogue d'options (Paramètres → Notifications et assistant) */
.options-bloc{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne)}
.options-titre{margin:0 0 6px;font-size:14px;color:var(--bleu)}
.options-numero{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;margin:6px 0 10px}
.options-numero .hint{margin:0}
.options-liste,.engagements-liste{list-style:none;margin:0;padding:0}
.option-ligne{border:1px solid var(--ligne);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:#fff}
.option-tete{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.option-tete input{width:auto;margin:0}
.option-tete label,.option-nom{margin:0;font-size:14.5px;font-weight:700;color:#1a1a1a}
.option-prix{font-size:13px;color:var(--gris);margin-top:2px}
.option-description{margin:6px 0 0}
.option-detail{margin:6px 0 0;font-size:13px;line-height:1.45;color:#8a5a00}
.option-ligne .actions{margin-top:8px}
#options_raison_zone .texto-etat{margin:0 0 10px;padding:10px 12px;border:1px solid #ecd9a5;border-radius:6px;background:#fff8e6}
/* Mes engagements */
.engagement-ligne{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;border-bottom:1px solid var(--ligne);padding:8px 0;font-size:13.5px}
.engagement-corps{display:flex;flex-direction:column;gap:2px;min-width:0}
.engagement-date{font-size:12px;color:var(--gris)}
.engagement-etat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.engagement-etat .hint{margin:0}
.engagement-etat button{padding:6px 10px}
/* Fenêtre du récapitulatif signé */
.modale-eg{max-width:640px}
.eg-chapeau{color:var(--gris)}
.eg-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.eg-table th{background:var(--fond);color:var(--bleu);text-align:left;padding:8px;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.eg-table td{padding:8px;border-bottom:1px solid var(--ligne);overflow-wrap:anywhere}
.eg-table .num{text-align:right;white-space:nowrap}
.eg-total{font-size:15px;margin:14px 0 2px!important}
.eg-gros{display:block;font-size:30px;font-weight:700;color:var(--bleu);line-height:1.2;margin-top:2px}
.eg-taxes{font-size:13px;color:var(--gris);margin:0 0 8px!important}
.eg-prelevement{font-size:14px;margin:8px 0!important;overflow-wrap:anywhere}
.eg-clause{background:var(--fond);border:1px solid var(--ligne);border-radius:6px;padding:4px 12px 10px;margin:10px 0}
.eg-clause h3{margin:10px 0 4px}
.eg-clause p{font-size:13px;overflow-wrap:anywhere}
.eg-avis{margin:10px 0;font-size:13px;line-height:1.5}
.eg-avis summary{cursor:pointer;font-weight:600;color:var(--bleu)}
.eg-avis p{margin:6px 0;overflow-wrap:anywhere}
.eg-cases{border:0;padding:0;margin:8px 0 0;min-width:0}
.eg-cases .check label{overflow-wrap:anywhere}
.eg-info{font-size:12.5px;color:var(--gris);margin:10px 0!important;overflow-wrap:anywhere}
.eg-info a{color:inherit}
.eg-code{margin-top:10px}
.eg-actions{align-items:center}
.eg-numero{font-size:15px;margin:10px 0!important}
.eg-etiquette{display:block;font-size:12px;color:var(--gris)}
.eg-numero strong{font-size:22px;color:var(--bleu);letter-spacing:.5px;overflow-wrap:anywhere}
/* Assistant de configuration */
.modale-assistant{max-width:680px}
.aa-pourquoi{color:#333;background:var(--fond);border-left:3px solid var(--accent);border-radius:4px;padding:8px 12px;margin:8px 0 12px}
.aa-pourquoi[hidden]{display:none}
.aa-actions{justify-content:flex-end;align-items:center;margin-top:16px}
.aa-actions #b_aa_retour{margin-right:auto}
#aa_corps [hidden]{display:none}
#aa_corps .options-liste{margin-top:6px}
@media(max-width:480px){
  .modale-eg,.modale-assistant,#numero_fenetre .modale{padding:18px}
  #engagement,#assistant_abonne,#numero_fenetre{padding:8px}
  .eg-table th,.eg-table td{padding:6px 4px;font-size:13px}
  .eg-gros{font-size:26px}
  .option-ligne{padding:10px}
  .engagement-etat{width:100%}
  .aa-actions button,.eg-actions button{flex:1 1 auto}
  .aa-actions #b_aa_retour{margin-right:0}
}
/* Mission 16 (T10) : à 390 px et moins, le gabarit « Moderne » (bandeau d'en-tête aux marges de -40 px) dépassait de 15 px la largeur de l'écran; les marges suivent le rembourrage de 16 px de la feuille. À l'écran seulement. */
@media screen and (max-width:480px){.t-moderne .f-entete{margin:-16px -16px 24px;padding:20px 16px 16px;border-radius:8px 8px 0 0}}
/* Étiquettes des nouvelles fenêtres : de l'air sous l'étiquette pour que l'anneau de focus du champ ne la recouvre pas. */
.modale-eg label,.modale-assistant label,#numero_fenetre label{margin-bottom:6px}
.modale-eg .check label,.modale-assistant .check label,#numero_fenetre .check label,.option-tete label{margin-bottom:0}

/* ---------- Mission 17, tranche A1 : types de clients, fiche client, encart « sur mesure », facture d'un particulier ---------- */
.types-clients{border:0;margin:8px 0 0;padding:0;min-width:0}
.types-clients legend{padding:0;margin:0 0 2px;font-size:15px;font-weight:600;color:#1a1a1a}
.types-clients .hint{margin:0 0 4px;font-size:12.5px}
.types-clients .check label{overflow-wrap:anywhere;line-height:1.35}
/* Encart « sur mesure » (lot C 10) : cadre pâle, fond de la couleur principale de la charte à 6 %, texte en italique à la taille du texte courant, aucun pictogramme. */
.encart-mesure{margin:12px 0 4px;padding:10px 14px;border:1px solid rgba(31,58,95,.25);border:1px solid color-mix(in srgb,var(--bleu) 25%,transparent);border-radius:6px;background:rgba(31,58,95,.06);background:color-mix(in srgb,var(--bleu) 6%,transparent)}
.encart-mesure[hidden]{display:none}
.encart-mesure .encart-texte,.modale .encart-mesure .encart-texte{margin:0;font-size:14px;line-height:1.5;font-style:italic;color:#1a1a1a}
.encart-mesure a{color:var(--bleu);font-style:italic;font-weight:600;text-decoration:underline;overflow-wrap:anywhere}
.encart-mesure a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Liste des clients et fiche */
.clients-liste{list-style:none;margin:10px 0 0;padding:0}
.client-ligne{display:flex;gap:6px 10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--ligne);font-size:14px}
.client-ligne .client-texte{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 200px}
.client-ligne .client-nom{font-weight:600;overflow-wrap:anywhere}
.client-ligne .client-meta{color:var(--gris);font-size:12.5px;overflow-wrap:anywhere}
.client-ligne button{padding:6px 10px}
/* Mission 17, tranche A2 : l'adresse « à vérifier » (rebond ou plainte) s'affiche en orange ET porte le mot « à vérifier » : jamais la couleur seule. */
.client-courriel[data-verifier="true"]{color:#a04a00;font-weight:600}
.client-etat{display:inline-block;color:#8a3c00;background:#fff1e0;border:1px solid #f0b36a;border-radius:10px;padding:0 7px;font-size:11.5px;font-weight:700;white-space:nowrap}
.bandeau-adresse{background:#fff1e0;border-bottom-color:#f0b36a;color:#7a3b00}
.alerte-adresse{margin:8px 0;padding:8px 10px;border:1px solid #f0b36a;border-left:4px solid #d9822b;border-radius:6px;background:#fff7ee;color:#7a3b00;font-size:13.5px}
.alerte-adresse p{margin:0 0 6px}.alerte-adresse .actions{margin:0}.alerte-adresse[hidden]{display:none}
#c_courriel_alerte{color:#8a3c00}
.essai-bloc{margin:12px 0 4px}.essai-bloc .hint{margin:4px 0 0}
.erreur-champ{color:var(--rouge);font-size:12.5px}
.erreur-champ[hidden]{display:none}
input[aria-invalid="true"]{border-color:var(--rouge)}
.champ-client .hint{margin:2px 0 0;font-size:12px}
.champ-client[hidden],.groupe-exemption[hidden]{display:none}
.groupe-exemption{margin-top:10px;padding:10px 12px;border:1px solid var(--ligne);border-radius:6px;background:var(--fond)}
.groupe-exemption .hint{font-size:12.5px;line-height:1.45;margin:6px 0 0}
.groupe-exemption legend{padding:0 4px;font-size:13px;font-weight:600;color:var(--bleu)}
/* Facture d'un particulier : courte, taxes et total en évidence, aucun champ d'entreprise. Ne s'applique qu'à une facture dont le type est « particulier ». */
.f-particulier .f-totaux{width:380px;max-width:100%;font-size:15px}
.f-particulier .f-totaux div{padding:7px 8px}
.f-particulier .f-totaux .grand{font-size:22px}
/* Bloc client : références sous l'échéance, exemption sous les taxes, conditions de paiement près des conditions. */
.f-ref{text-align:right;font-size:13px;color:var(--gris)}
.f-exemption{margin:8px 0 0 auto;max-width:380px;text-align:right;font-size:12.5px;color:var(--gris);line-height:1.45}
.f-plus{margin:6px 0 0;font-size:13px;line-height:1.45}
/* Bloc de paiement du PDF (mission 25, fait 139 et 140) : lien de paiement et encadré Interac, sous les totaux. */
.f-paiement{margin-top:10px}
.f-interac{margin-top:6px;padding:10px 12px;border:1px solid var(--ligne);border-radius:6px}
.t-elegant .f-ref{text-align:center}
@media print{.encart-mesure,.devis-encart{display:none!important}}
@media screen and (max-width:480px){.f-particulier .f-totaux{width:100%}}
@media(max-width:480px){#mfa_inscription .modale{padding:18px}}
/* Paramètres : barre d'accès rapide fixée en haut de la fenêtre (mission 18, lot E 6). Défile horizontalement dans sa boîte quand l'écran est étroit. */
.param-nav{position:sticky;top:-28px;z-index:6;display:flex;gap:3px;margin:0 -28px 6px;padding:8px 28px;background:#fff;border-bottom:1px solid var(--ligne);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.param-nav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:7px 8px;border:1px solid var(--ligne);border-radius:999px;background:#fff;color:var(--bleu);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap}
.param-nav a:hover{background:#eef3fa}
.param-nav a[hidden]{display:none}
.param-nav a[aria-current="location"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.param-nav a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.param-nav svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#parametres .modale h3{scroll-margin-top:72px}
#parametres .modale h2{margin-bottom:10px}
@media(max-width:480px){.param-nav{top:-28px;margin:0 -18px 6px;padding:8px 18px}}
#parametres .modale{max-width:800px}   /* six liens dans la barre d accès rapide sans défilement à 1440 px, avec une marge d'environ 10 % pour une police plus large (addendum 18.1 : 7 px de marge seulement à 760 px) */
/* Mission 28, D161-11 (suite) : même densité qu'au panneau Client (voir plus haut), mais dans la fenêtre Paramètres (#parametres .modale, pas un
   .panel) : à 390 px, la bulle de param-logo (deux lignes à cette largeur) recouvrait le groupe de boutons « Retirer le logo » juste en dessous
   (10 px d'écart, bien moins que les 52 px de haut de cette bulle + sa marge). Scopé à #parametres : .actions sert aussi au bouton « ＋ Ajouter une
   ligne » (Articles et services), sans lien avec cette fenêtre, qu'un réglage général aurait poussé hors du viewport après l'ajout d'une ligne. */
@media(max-width:480px){#parametres .modale .actions{margin-top:68px}}

/* ---------- Mission 18, lot A : badge de DRAK Infinity (en-tête de l application, pied des pages publiques) ---------- */
.marque-app{display:flex;align-items:center;gap:10px}
.badge-app{width:32px;height:32px;display:block;border-radius:50%;flex:0 0 auto}
.badge-pied{display:block;width:20px;height:20px;margin:0 auto 6px;border-radius:50%}

/* ---------- Mission 18, lot B3 : vignette « Facturier monde » (grisée, non cliquable; seul « Me prévenir » ouvre un courriel préparé) et notes sous les champs ---------- */
.vignette-monde{margin:18px 0 0;padding:12px 16px;border:1px dashed var(--gris);border-radius:8px;background:transparent;color:var(--gris);font-size:14px;cursor:default;user-select:none}
.vignette-monde p{margin:0;color:var(--gris)}
.vignette-monde a{color:var(--bleu);font-weight:600;text-decoration:underline;cursor:pointer}
.note-pays{margin-top:6px;font-size:13px;color:var(--gris)}

/* ---------- Mission 22, lot A (faits 108 et 109) : connexion par lien ou par mot de passe, mot de passe oublié, écran « Nouveau mot de passe », bloc mot de passe de Paramètres ---------- */
.langues{display:flex;gap:4px;justify-content:flex-end;margin:-6px 0 6px}
.langues button{background:#fff;border:1px solid var(--ligne);color:var(--bleu);padding:4px 10px;font-size:12.5px;min-width:44px;min-height:32px;border-radius:5px}
.langues button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.entete-connexion{font-weight:600;color:#1a1a1a}
.onglets-connexion{margin-top:14px;gap:4px}
.onglets-connexion button{flex:1 1 0;min-height:44px;font-size:13.5px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.onglets-connexion button[aria-selected="true"]{border-color:var(--ligne);border-bottom:2px solid var(--bleu)}
.panneau-connexion{padding-top:6px}
.panneau-connexion[hidden],.encart-oubli[hidden]{display:none}
.champ-mdp{display:flex;gap:6px;align-items:stretch}
.champ-mdp input{flex:1 1 auto;min-width:0}
.champ-mdp button{flex:0 0 auto;min-height:44px;min-width:44px}
.carte-accueil input{min-height:44px}
.carte-accueil .actions button{min-height:44px}
.lien-oubli{margin:10px 0 0}
.lien-bouton{background:none;border:none;padding:6px 0;min-height:44px;color:var(--bleu);font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer}
.encart-oubli{margin-top:10px;padding:12px 14px;background:var(--fond);border:1px solid var(--ligne);border-radius:6px}
.titre-oubli{margin:0 0 6px;font-size:16px;color:var(--bleu)}
.panneau-connexion button:focus-visible,.langues button:focus-visible,.onglets-connexion button:focus-visible,.lien-bouton:focus-visible,.carte-accueil input:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
@media(max-width:480px){.carte-accueil{padding:20px}.onglets-connexion button{font-size:13px;padding:6px 6px}}
/* Écran « Nouveau mot de passe » (lien de réinitialisation) : au-dessus de tout, avant toute lecture de données. */
.voile-recuperation{z-index:85}
.voile-recuperation .modale{max-width:460px}
.voile-recuperation input{min-height:44px}
.voile-recuperation .actions button,.voile-recuperation .lien{min-height:44px}
.voile-recuperation .champ-mdp{margin-bottom:2px}
/* Paramètres, Sécurité : mot de passe. */
.bloc-mdp .etat{margin:4px 0 6px}
.bloc-mdp button{min-height:44px}

/* ---------- Mission 28, lot A, fait 161 : bulles d'aide simple ----------
   Fond plein (jamais transparent, pour la lecture); contraste vérifié par un test automatique (tests/unitaires/aide.test.mjs) : #1f3a5f sur blanc = 9,45:1, bien au-delà du minimum de 4,5:1 (WCAG AA).
   Position posée en JavaScript (web/js/aide.js, left/top en pixels) d'après un vrai calcul géométrique : aucun côté fixe ici. */
.bulle-aide{position:fixed;left:0;top:0;max-width:260px;background:var(--bleu);color:#fff;font-size:13px;font-style:italic;line-height:1.4;padding:8px 12px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:95;pointer-events:none}
.bulle-aide[hidden]{display:none}

/* ---------- Mission 28, lot B, fait 162 : didacticiel léger (cinq écrans) ----------
   La capture est une image statique (web/img/didacticiel/*.png, régénérée par outils/captures-didacticiel.mjs); le curseur et le halo sont dessinés (SVG et CSS, jamais
   une image) et positionnés en POURCENTAGE de la boîte de la capture (coordonnées calculées par le même script, à partir du vrai élément visé) : la mise à l'échelle
   de l'image (390 px comme 1366 px) déplace le curseur et le halo exactement avec elle, sans recalcul. Aucune bibliothèque tierce, aucune vidéo. */
.modale-didacticiel{max-width:640px}
.didacticiel-ecran{position:relative;margin:10px 0;border-radius:8px;overflow:hidden;background:#0b1a3a;line-height:0}
.didacticiel-capture{display:block;width:100%;height:auto;border-radius:8px}
.didacticiel-curseur{position:absolute;width:30px;height:30px;margin:-2px 0 0 -2px;transition:left .7s ease,top .7s ease;pointer-events:none}
.didacticiel-curseur svg{width:100%;height:100%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.didacticiel-halo{position:absolute;border:3px solid var(--vert);border-radius:8px;background:rgba(46,125,50,.08);pointer-events:none;transition:left .7s ease,top .7s ease,width .7s ease,height .7s ease;animation:didacticiel-halo 1.6s ease-in-out infinite}
@keyframes didacticiel-halo{0%,100%{box-shadow:0 0 0 2px rgba(46,125,50,.35)}50%{box-shadow:0 0 0 9px rgba(46,125,50,.05)}}
.dd-actions{justify-content:space-between;align-items:center;margin-top:16px}
.dd-actions #dd_ne_plus_proposer{margin-right:auto;background:transparent;color:var(--gris);font-weight:400;text-decoration:underline;padding:9px 4px}
#dd_texte{font-size:15px;line-height:1.5;min-height:1.5em}
@media(max-width:480px){
  .modale-didacticiel{padding:16px}
  .dd-actions{flex-wrap:wrap}
  .dd-actions button{flex:1 1 auto}
  .dd-actions #dd_ne_plus_proposer{flex:1 1 100%;order:3;margin-right:0;text-align:center}
}
/* Moins de mouvement demandé : ni le déplacement du curseur, ni le battement du halo n'animent — tout apparaît directement à sa position finale (mission 28, fait 162). */
@media(prefers-reduced-motion:reduce){
  .didacticiel-curseur,.didacticiel-halo{transition:none}
  .didacticiel-halo{animation:none;box-shadow:0 0 0 4px rgba(46,125,50,.3)}
}