/* ==========================================================================
   Conversion RCS — feuille de style
   Ecrite a la main plutot que generee : le CDN Tailwind compile le CSS dans
   le navigateur et n'est pas destine a la production.
   Tous les contrastes texte/fond respectent au minimum 4.5:1 (WCAG AA), et
   7:1 pour le texte courant.
   ========================================================================== */

:root {
  /* Surfaces */
  --fond: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-active: #eef2f4;

  /* Texte — contraste mesure sur --surface */
  --texte: #10161c;          /* 16.8:1 */
  --texte-2: #48545f;        /*  8.1:1 */
  --texte-3: #667381;        /*  5.2:1 */

  --bordure: #dfe4e9;
  --bordure-forte: #c6ced6;

  /* Accent : petrole. Sobre et peu commun pour un outil de conformite.
     Trois roles distincts, car une seule teinte ne peut pas a la fois
     ressortir sur le fond et porter du texte lisible :
       --accent       traits, icones, anneaux de focus sur fond neutre
       --accent-fond  aplats portant du texte --sur-accent
       --accent-texte texte accentue pose sur une surface */
  --accent: #0a6c62;
  --accent-fond: #0a6c62;    /*  6.3:1 avec --sur-accent */
  --sur-accent: #ffffff;
  --accent-actif: #085951;
  --accent-clair: #e4f1ef;
  --accent-texte: #06514a;   /*  9.2:1 sur surface */

  --succes: #0c6b3d;
  --succes-fond: #0c6b3d;    /*  6.6:1 avec --sur-accent */
  --succes-clair: #e3f3ea;
  --alerte: #8a5300;
  --alerte-clair: #fdf1de;
  --erreur: #a8231c;
  --erreur-clair: #fdeceb;

  --rayon: 10px;
  --rayon-l: 14px;
  --ombre: 0 1px 2px rgba(16, 22, 28, .05), 0 1px 3px rgba(16, 22, 28, .04);
  --ombre-l: 0 4px 12px rgba(16, 22, 28, .07), 0 1px 3px rgba(16, 22, 28, .05);
  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0c1116;
    --surface: #141a21;
    --surface-2: #1a212a;
    --surface-active: #212a34;

    --texte: #e8edf2;          /* 14.2:1 */
    --texte-2: #a7b4c0;        /*  7.4:1 */
    --texte-3: #7f8d9b;        /*  4.9:1 */

    --bordure: #252e38;
    --bordure-forte: #35404c;

    /* En mode sombre, l'accent doit s'eclaircir pour ressortir du fond, ce
       qui le rend trop clair pour porter du blanc : l'aplat reste donc
       fonce, seul le trait s'eclaircit. */
    --accent: #2a9d8f;
    --accent-fond: #0d6157;    /*  7.4:1 avec --sur-accent */
    --sur-accent: #ffffff;
    --accent-actif: #10756a;
    --accent-clair: #10312e;
    --accent-texte: #5cc9bb;   /*  8.8:1 sur surface */

    --succes: #4cb87a;
    --succes-fond: #14683f;    /*  7.0:1 avec --sur-accent */
    --succes-clair: #10281b;
    --alerte: #d9a441;
    --alerte-clair: #2a2113;
    --erreur: #e8756c;
    --erreur-clair: #2b1614;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-l: 0 4px 14px rgba(0, 0, 0, .45);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
p { margin: 0; }

a { color: var(--accent-texte); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono {
  font-family: "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;
  font-size: .86em;
  font-variant-ligatures: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.secondaire { color: var(--texte-2); }
.tertiaire  { color: var(--texte-3); font-size: .8125rem; }
.nombre     { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.contenu { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 32px 24px 72px; }
.contenu.large { max-width: 1100px; }

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.entete-interieur {
  max-width: 940px; margin: 0 auto; padding: 0 24px;
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.entete.large .entete-interieur { max-width: 1100px; }

.marque { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--accent-fond); color: var(--sur-accent);
  display: grid; place-items: center;
}
.logo svg { width: 17px; height: 17px; }
.marque-titre { font-weight: 620; font-size: .925rem; line-height: 1.2; }
.marque-sous { font-size: .78rem; color: var(--texte-2); line-height: 1.3; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--texte-2); text-decoration: none; font-size: .875rem;
  padding: 7px 11px; border-radius: 7px; transition: var(--transition);
  white-space: nowrap;
}
.nav a:hover { color: var(--texte); background: var(--surface-active); text-decoration: none; }
.nav a.actif { color: var(--accent-texte); background: var(--accent-clair); }

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */
.titre-page { margin-bottom: 28px; }
.titre-page p { color: var(--texte-2); margin-top: 6px; font-size: .925rem; }

.section { margin-top: 36px; }
.section > header { margin-bottom: 14px; }
.section > header p { color: var(--texte-2); font-size: .875rem; margin-top: 3px; }

.etiquette {
  font-size: .72rem; font-weight: 620; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texte-3);
}

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre);
}
.carte-corps { padding: 20px; }
.carte-entete {
  padding: 15px 20px; border-bottom: 1px solid var(--bordure);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: .875rem; font-weight: 560;
  padding: 9px 16px; border-radius: 9px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface); color: var(--texte);
  cursor: pointer; transition: var(--transition); white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--surface-active); text-decoration: none; }
.btn:active { transform: translateY(.5px); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-primaire {
  background: var(--accent-fond); border-color: var(--accent-fond); color: var(--sur-accent);
  box-shadow: 0 1px 2px rgba(10, 108, 98, .25);
}
.btn-primaire:hover { background: var(--accent-actif); border-color: var(--accent-actif); }

.btn-succes { background: var(--succes-fond); border-color: var(--succes-fond); color: var(--sur-accent); }
.btn-succes:hover { filter: brightness(1.08); }

.btn-discret { border-color: transparent; background: transparent; color: var(--texte-2); }
.btn-discret:hover { background: var(--surface-active); color: var(--texte); }

.btn-danger { color: var(--erreur); }
.btn-danger:hover { background: var(--erreur-clair); }

.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-petit { padding: 5px 11px; font-size: .8125rem; border-radius: 7px; }

.barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pousse { margin-left: auto; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > label { font-size: .8125rem; font-weight: 560; color: var(--texte-2); }
.champ .aide { font-size: .78rem; color: var(--texte-3); }

.saisie {
  font: inherit; font-size: .9rem;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--bordure-forte);
  background: var(--surface); color: var(--texte);
  transition: var(--transition); width: 100%;
}
.saisie::placeholder { color: var(--texte-3); }
.saisie:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.saisie:read-only { background: var(--surface-2); color: var(--texte-2); }
.saisie-courte { width: 92px; }

.ligne-champs { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.unite { font-size: .875rem; color: var(--texte-2); }

.bascule { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .875rem; }
.bascule input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.bascule span { color: var(--texte-2); }
.bascule:hover span { color: var(--texte); }

/* --------------------------------------------------------------------------
   Choix de mode
   -------------------------------------------------------------------------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }

.mode {
  text-align: left; font: inherit; cursor: pointer;
  padding: 16px 18px; border-radius: var(--rayon-l);
  border: 1.5px solid var(--bordure);
  background: var(--surface); color: var(--texte);
  transition: var(--transition);
  display: flex; gap: 13px; align-items: flex-start;
}
.mode:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre); }
.mode[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-clair);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.mode-icone {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-active); color: var(--texte-2);
  transition: var(--transition);
}
.mode[aria-pressed="true"] .mode-icone { background: var(--accent-fond); color: var(--sur-accent); }
.mode-icone svg { width: 18px; height: 18px; }
.mode-titre { font-weight: 600; font-size: .925rem; }
.mode-detail { color: var(--texte-2); font-size: .8125rem; margin-top: 3px; }

/* --------------------------------------------------------------------------
   Zone de depot
   -------------------------------------------------------------------------- */
.depot {
  margin-top: 12px; padding: 34px 24px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--bordure-forte); border-radius: var(--rayon-l);
  background: var(--surface); transition: var(--transition);
}
.depot:hover { border-color: var(--accent); background: var(--accent-clair); }
.depot.survol {
  border-color: var(--accent); background: var(--accent-clair);
  transform: scale(1.005);
}
.depot-icone { color: var(--texte-3); transition: var(--transition); }
.depot:hover .depot-icone, .depot.survol .depot-icone { color: var(--accent); }
.depot-icone svg { width: 30px; height: 30px; }
.depot-titre { font-weight: 580; margin-top: 10px; }
.depot-detail { color: var(--texte-2); font-size: .875rem; margin-top: 3px; }
.depot-astuce {
  margin: 14px auto 0; max-width: 460px; padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-size: .8125rem; color: var(--texte-2);
}

/* --------------------------------------------------------------------------
   Liste de fichiers
   -------------------------------------------------------------------------- */
.fichiers { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.fichier {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--rayon);
  border: 1px solid var(--bordure); background: var(--surface);
  animation: apparait 180ms ease-out;
}
.fichier-icone { color: var(--texte-3); flex-shrink: 0; display: grid; }
.fichier-icone svg { width: 17px; height: 17px; }
.fichier-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; font-size: .875rem; }
.fichier-taille { color: var(--texte-2); font-size: .8125rem; flex-shrink: 0; }
.fichier-retirer {
  border: none; background: none; cursor: pointer; padding: 5px; border-radius: 6px;
  color: var(--texte-3); display: grid; transition: var(--transition);
}
.fichier-retirer:hover { color: var(--erreur); background: var(--erreur-clair); }
.fichier-retirer svg { width: 15px; height: 15px; }

@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }

/* --------------------------------------------------------------------------
   Avancement
   -------------------------------------------------------------------------- */
.avancement { margin-top: 22px; }
.avancement-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: .875rem;
}
.avancement-etape { color: var(--texte-2); }
.avancement-pct { color: var(--texte); font-weight: 580; font-variant-numeric: tabular-nums; }
.piste { height: 6px; border-radius: 3px; background: var(--surface-active); overflow: hidden; }
.jauge {
  height: 100%; width: 0; border-radius: 3px; background: var(--accent-fond);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
  position: relative; overflow: hidden;
}
.jauge.termine { background: var(--succes-fond); }

/* Une etape longue ne fait pas bouger la jauge : un reflet montre que le
   traitement avance, plutot que de laisser croire a un blocage. */
.jauge.active::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, .38), transparent);
  animation: reflet 1.5s ease-in-out infinite;
}
@keyframes reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   Etat d'attente des boutons
   -------------------------------------------------------------------------- */
.btn.occupe { pointer-events: none; }
.btn.occupe::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: tourne .6s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Depot sur toute la fenetre
   -------------------------------------------------------------------------- */
.voile-depot {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: color-mix(in srgb, var(--accent-fond) 82%, transparent);
  display: grid; place-items: center; color: #fff;
  animation: fondu 120ms ease-out;
}
.voile-depot-boite {
  text-align: center; padding: 40px 56px;
  border: 2px dashed rgba(255, 255, 255, .6); border-radius: 20px;
}
.voile-depot svg { width: 44px; height: 44px; }
.voile-depot p { margin-top: 14px; font-size: 1.1rem; font-weight: 580; }

/* --------------------------------------------------------------------------
   Recapitulatif de la selection
   -------------------------------------------------------------------------- */
.recap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 9px 14px; border-radius: var(--rayon);
  background: var(--surface-2); border: 1px solid var(--bordure);
  font-size: .8125rem; color: var(--texte-2);
}
.recap.depasse { background: var(--erreur-clair); border-color: var(--erreur); color: var(--erreur); }
.recap button { font-size: .8125rem; }

/* --------------------------------------------------------------------------
   Etat vide
   -------------------------------------------------------------------------- */
.vide {
  text-align: center; padding: 40px 24px; color: var(--texte-3);
  border: 1px dashed var(--bordure); border-radius: var(--rayon-l);
}
.vide svg { width: 26px; height: 26px; opacity: .6; }
.vide p { margin-top: 10px; font-size: .875rem; }

/* --------------------------------------------------------------------------
   Messages fugaces
   -------------------------------------------------------------------------- */
.messages {
  position: fixed; z-index: 60; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  pointer-events: none;
}
.message {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--texte); color: var(--surface);
  font-size: .875rem; font-weight: 540; box-shadow: var(--ombre-l);
  animation: monte-message 220ms cubic-bezier(.4, 0, .2, 1);
}
.message svg { width: 15px; height: 15px; }
.message.part { animation: part-message 220ms ease-in forwards; }
@keyframes monte-message { from { opacity: 0; transform: translateY(14px); } }
@keyframes part-message { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------------------
   Bandeaux
   -------------------------------------------------------------------------- */
.bandeau {
  display: flex; gap: 13px; padding: 15px 17px;
  border-radius: var(--rayon-l); border: 1px solid;
  font-size: .875rem; line-height: 1.55;
}
.bandeau + .bandeau { margin-top: 12px; }
.bandeau-icone { flex-shrink: 0; margin-top: 1px; }
.bandeau-icone svg { width: 18px; height: 18px; }
.bandeau strong { font-weight: 620; }
.bandeau p + p { margin-top: 8px; }

.bandeau-alerte { background: var(--alerte-clair); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); color: var(--texte); }
.bandeau-alerte .bandeau-icone { color: var(--alerte); }
.bandeau-info   { background: var(--accent-clair); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--texte); }
.bandeau-info .bandeau-icone { color: var(--accent-texte); }
.bandeau-succes { background: var(--succes-clair); border-color: color-mix(in srgb, var(--succes) 30%, transparent); color: var(--texte); }
.bandeau-succes .bandeau-icone { color: var(--succes); }
.bandeau-erreur { background: var(--erreur-clair); border-color: color-mix(in srgb, var(--erreur) 32%, transparent); color: var(--texte); }
.bandeau-erreur .bandeau-icone { color: var(--erreur); }
.bandeau-neutre { background: var(--surface-2); border-color: var(--bordure); color: var(--texte-2); }

/* --------------------------------------------------------------------------
   Pastilles
   -------------------------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 580; white-space: nowrap;
  border: 1px solid;
}
.pastille svg { width: 12px; height: 12px; }
.pastille-succes { background: var(--succes-clair); color: var(--succes); border-color: color-mix(in srgb, var(--succes) 30%, transparent); }
.pastille-erreur { background: var(--erreur-clair); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 30%, transparent); }
.pastille-alerte { background: var(--alerte-clair); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); }
.pastille-neutre { background: var(--surface-2); color: var(--texte-2); border-color: var(--bordure); }

/* --------------------------------------------------------------------------
   Resultats
   -------------------------------------------------------------------------- */
.resultats { display: flex; flex-direction: column; gap: 12px; }
.resultat { animation: apparait 220ms ease-out; }
.resultat-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat-detail { color: var(--texte-2); font-size: .8125rem; margin-top: 3px; }
.resultat-pastilles { display: flex; gap: 6px; flex-shrink: 0; }

.controles { display: flex; flex-direction: column; }
.controle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: .875rem;
}
.controle + .controle { border-top: 1px solid color-mix(in srgb, var(--bordure) 55%, transparent); }
.controle-libelle { color: var(--texte-2); display: flex; align-items: center; gap: 9px; min-width: 0; }
.controle-clause { color: var(--texte-3); font-size: .78rem; flex-shrink: 0; min-width: 62px; }
.controle-valeur { font-size: .8125rem; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.controle-valeur svg { width: 13px; height: 13px; }
.ok   { color: var(--succes); }
.pasok { color: var(--erreur); }

.sous-bloc { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--bordure); }
.sous-bloc-titre { font-size: .78rem; font-weight: 620; letter-spacing: .03em; margin-bottom: 8px; }
.signes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.signe {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--bordure);
  font-size: .8125rem;
}
.signe code { color: var(--texte); font-size: .95em; }
.signe .nombre { color: var(--texte-2); }

/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */
.journal { margin-top: 28px; }
.journal summary {
  cursor: pointer; padding: 13px 20px; font-size: .875rem; font-weight: 560;
  display: flex; align-items: center; gap: 9px; list-style: none;
  border-radius: var(--rayon-l);
}
.journal summary::-webkit-details-marker { display: none; }
.journal summary .chevron { transition: transform var(--transition); color: var(--texte-3); }
.journal[open] summary .chevron { transform: rotate(90deg); }
.journal[open] summary { border-bottom: 1px solid var(--bordure); border-radius: var(--rayon-l) var(--rayon-l) 0 0; }
.journal-lignes {
  max-height: 380px; overflow: auto; padding: 14px 20px;
  font-family: "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-size: .78rem; line-height: 1.65; white-space: pre-wrap;
  color: var(--texte-2);
}
.journal-lignes .l-ok { color: var(--succes); }
.journal-lignes .l-erreur { color: var(--erreur); }
.journal-lignes .l-titre { color: var(--texte); font-weight: 620; }

/* --------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */
.tableau { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tableau th {
  text-align: left; font-size: .72rem; font-weight: 620; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-3);
  padding: 10px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--bordure);
}
.tableau td { padding: 12px 20px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--surface-2); }
.aligne-droite { text-align: right; }
.actions-ligne { display: flex; gap: 7px; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Statistiques
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 15px 17px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bordure); }
.stat-libelle { font-size: .78rem; color: var(--texte-2); }
.stat-valeur { font-size: 1.5rem; font-weight: 640; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-detail { font-size: .78rem; color: var(--texte-3); }

/* --------------------------------------------------------------------------
   Formules
   -------------------------------------------------------------------------- */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .formules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .formules { grid-template-columns: 1fr; } }
.formule { display: flex; flex-direction: column; padding: 18px; }
.formule.actuelle { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.formule-nom { font-weight: 620; }
.formule-quota { color: var(--texte-2); font-size: .875rem; margin-top: 2px; }
.formule-desc { color: var(--texte-2); font-size: .8125rem; margin-top: 11px; flex: 1; }
.formule-action { margin-top: 16px; }
.formule-etat { font-size: .8125rem; color: var(--accent-texte); font-weight: 560; }

/* --------------------------------------------------------------------------
   Authentification
   -------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } }

.auth-presentation {
  background: var(--accent-fond); color: var(--sur-accent);
  padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
@media (max-width: 900px) { .auth-presentation { display: none; } }
/* Trame discrete, pour ne pas laisser un aplat nu */
.auth-presentation::after {
  content: ""; position: absolute; inset: 0; opacity: .11;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 22px 22px;
}
.auth-presentation > * { position: relative; z-index: 1; }
.auth-marque { font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; opacity: .82; }
.auth-titre { font-size: 2rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; max-width: 22ch; }
.auth-texte { margin-top: 18px; opacity: .93; max-width: 42ch; line-height: 1.6; }
.auth-liste { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 11px; }
.auth-liste li { display: flex; gap: 11px; align-items: flex-start; font-size: .9rem; opacity: .95; }
.auth-liste svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.auth-pied { font-size: .8125rem; opacity: .8; }

.auth-formulaire { display: grid; place-items: center; padding: 40px 24px; }
.auth-boite { width: 100%; max-width: 360px; }
.auth-boite h1 { font-size: 1.5rem; }
.auth-boite > p { color: var(--texte-2); margin-top: 7px; font-size: .9rem; }
.auth-champs { margin-top: 26px; display: flex; flex-direction: column; gap: 17px; }
.auth-lien-annexe { display: flex; justify-content: space-between; align-items: baseline; }
.auth-bas { margin-top: 22px; font-size: .875rem; color: var(--texte-2); }
.auth-mention { margin-top: 28px; font-size: .78rem; color: var(--texte-3); line-height: 1.6; }

.centre { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.centre-boite { max-width: 420px; }
.centre-icone { color: var(--accent); margin-bottom: 18px; }
.centre-icone svg { width: 42px; height: 42px; }
.centre h1 { margin-bottom: 12px; }
.centre p { color: var(--texte-2); }

/* --------------------------------------------------------------------------
   Fenetre modale
   -------------------------------------------------------------------------- */
.voile {
  position: fixed; inset: 0; z-index: 40; padding: 24px;
  background: rgba(8, 12, 16, .55); backdrop-filter: blur(3px);
  display: grid; place-items: center;
  animation: fondu 140ms ease-out;
}
@keyframes fondu { from { opacity: 0; } }
.modale {
  width: 100%; max-width: 380px; padding: 24px;
  background: var(--surface); border-radius: var(--rayon-l);
  box-shadow: var(--ombre-l); animation: monte 180ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }

.masque { display: none !important; }

/* --------------------------------------------------------------------------
   Accessibilite
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--bordure-forte); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--texte-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }