/* Pages légales — mise en forme sobre, jetons du design system. */
/* ═══ POLICES AUTO-HÉBERGÉES ═══════════════════════════════════════════════
   Servies depuis notre domaine, jamais depuis Google Fonts : le site affirme
   un hébergement français et la conformité RGPD, et un appel à
   fonts.gstatic.com transmet l’adresse IP du visiteur avant tout consentement.

   Deux fontes variables, sous-ensemblées au jeu latin et à la ponctuation
   française (guillemets, apostrophe typographique, tirets, €, signe moins) —
   32 Ko et 84 Ko au total. Recette dans static/polices/LISEZMOI.md.

   Montserrat porte tout. Archivo est réservée aux CHIFFRES HÉROS : Montserrat
   y est trop large et couperait les montants. Les deux ont de vrais chiffres
   tabulaires (`tnum`), retenus au sous-ensemblage.
   ═════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Montserrat';src:url('/static/polices/montserrat.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/static/polices/archivo.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root {
  --vert-bouteille:#17402F; --vert-profond:#0B2719; --vert-clair:#72B190; --accent:#A7500A;
  --papier:#F4F6F4; --blanc:#FFFFFF; --encre:#14181A; --encre-douce:#545C58;
  --vert-pale:#E2ECE6;
  --border:#DCE2DE; --attention-light:#FAE4CE; --attention-dark:#8F3D05;
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-num:'Archivo','Montserrat',sans-serif;

  /* LES RAYONS, ET POURQUOI ILS SONT DÉCLARÉS ICI. Cette feuille est
     AUTONOME : les pages qu'elle habille ne chargent ni style.css ni
     design.css, seulement legal.css et evitement.css. Écrire
     `var(--radius-card)` sans déclarer le jeton ne l'emprunterait à personne —
     ce serait une variable INCONNUE, la déclaration serait ignorée en silence,
     et le rayon tomberait à zéro par accident plutôt que par décision.
     C'est la même raison qui fait déclarer ici les couleurs et les fontes.

     LA VALEUR EST ZÉRO, ET C'EST MESURÉ, pas déduit. design.css la pose à 0
     pour l'application (« le nouveau design ne connaît que l'angle droit »),
     landing.css la pose à 0 pour la page de vente. Les 4/3/3/2 px que déclare
     encore style.css sont l'ancien design : design.css les écrase partout où
     l'application les lirait. Ces pages-ci, à 8 px en dur, étaient la seule
     surface arrondie du site.

     Pas de `--radius-badge` : aucune règle de cette feuille n'habille un
     badge, et un jeton déclaré sans emploi est du code mort. */
  --radius-card: 0;
  --radius-btn: 0;
  --radius-input: 0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--encre);background:var(--papier);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--vert-bouteille)}
.legal-nav{border-bottom:1px solid var(--border);background:var(--blanc)}
.legal-nav .in{max-width:760px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--vert-bouteille);letter-spacing:-.01em;text-decoration:none}
/* Le point du logo est VERT, comme sur la page de vente et l'application (le
   point orange était un reste de l'ancien design). */
.wordmark::after{content:'.';color:var(--vert-clair);font-weight:700}
main{max-width:760px;margin:0 auto;padding:48px 24px 80px}
h1{font-family:var(--font-display);font-weight:600;font-size:34px;color:var(--vert-bouteille);letter-spacing:-.01em;line-height:1.1;margin-bottom:8px}
h2{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--vert-bouteille);margin:34px 0 10px}
p,li{color:var(--encre);margin-bottom:12px}
ul{padding-left:22px;margin-bottom:12px}
.maj{color:var(--encre-douce);font-size:14px;margin-bottom:8px}
/* Le bandeau d'avertissement, UNE seule fois pour ses deux emplois : la page
   légale encore incomplète (`.avalider`) et la saisie refusée de l'outil public
   (`.qt-alerte`). Deux noms, parce qu'ils ne veulent pas dire la même chose ;
   une seule règle, parce qu'ils s'affichent pareil (CLAUDE.md, règle 1).
   L'orange et non le rouge : le rouge ne dit que de l'argent qui manque. */
.avalider,.qt-alerte{background:var(--attention-light);color:var(--attention-dark);border:1px solid var(--accent);border-radius:var(--radius-card);padding:14px 18px;font-size:14.5px;margin:22px 0 8px}
.avalider strong{font-weight:700}
.qt-alerte[hidden]{display:none}

/* ═══ FORMULAIRE ═══════════════════════════════════════════════════════════
   Aucune page légale n'avait de champ : cette feuille n'en portait donc aucun,
   et l'outil public /quittance-de-loyer en demande sept. Les règles ci-dessous
   sont la SEULE définition d'un champ de saisie dans cette feuille — celle de
   l'application vit dans style.css, que ces pages ne chargent pas.

   Les montants sont composés en Archivo (`--font-num`), comme partout ailleurs
   dans le produit : Montserrat est trop large pour des chiffres. */
.qt-form{margin:26px 0 8px}
.qt-groupe{border:0;padding:0;margin:0 0 22px}
.qt-groupe legend{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);padding:0;margin-bottom:12px}
.qt-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.qt-champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.qt-champ.qt-large{grid-column:1 / -1}
.qt-champ label{font-size:14px;font-weight:600;color:var(--encre)}
.qt-champ input,.qt-champ select{font-family:var(--font-body);font-size:15px;color:var(--encre);background:var(--blanc);border:1px solid var(--border);border-radius:var(--radius-input);padding:10px 12px;width:100%;transition:border-color .22s}
.qt-champ input.qt-nombre{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.qt-champ input:hover,.qt-champ select:hover{border-color:var(--vert-clair)}
.qt-champ input:focus,.qt-champ select:focus{outline:2px solid var(--vert-clair);outline-offset:1px;border-color:var(--vert-bouteille)}
.qt-aide{font-size:13px;color:var(--encre-douce)}
.qt-bouton{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--blanc);background:var(--vert-bouteille);border:1px solid var(--vert-bouteille);border-radius:var(--radius-btn);padding:14px 26px;cursor:pointer;transition:background-color .22s,border-color .22s}
.qt-bouton:hover{background:var(--vert-profond);border-color:var(--vert-profond)}
.qt-bouton:focus-visible{outline:2px solid var(--vert-clair);outline-offset:2px}
.qt-sous-bouton{font-size:13px;color:var(--encre-douce);margin-top:10px}

/* L'invitation vers le produit, en fin de page : un aplat vert pâle, aucun
   compte à rebours, aucun superlatif. */
.qt-invite{background:var(--vert-pale);border-left:3px solid var(--vert-bouteille);border-radius:0 var(--radius-card) var(--radius-card) 0;padding:18px 22px;margin:34px 0 8px}
.qt-invite p{margin-bottom:8px}
.qt-invite p:last-child{margin-bottom:0}

@media (max-width:640px){
  .qt-grille{grid-template-columns:minmax(0,1fr)}
}
/* Une transition d'interaction n'a rien d'indispensable : réglage système
   respecté, l'état final s'affiche directement. */
@media (prefers-reduced-motion:reduce){
  .qt-champ input,.qt-champ select,.qt-bouton{transition:none}
}
footer{border-top:1px solid var(--border);text-align:center;padding:26px;color:var(--encre-douce);font-size:14px}
footer a{margin:0 10px}