/* Guichet d'assistance. CSS seul (aucun script, aucune police externe : CSP default-src 'none').
   Fond brume froide, encre bleue ; un seul element marquant : la frise de progression.
   Clair par defaut, sombre si le systeme le demande. */

:root {
  --fond: #eef1f4;
  --surface: #ffffff;
  --encre: #17212b;
  --discret: #525d69;
  --trait: #d3d9e0;
  --accent: #1f4e8c;
  --accent-texte: #ffffff;
  --accent-doux: #e3ebf6;
  --alerte-fond: #fbeae8;
  --alerte-texte: #8f1d12;
  --danger: #b3261e;
  --rayon: 10px;
  --ombre: 0 1px 2px rgb(23 33 43 / 6%);
  /* Etats : texte, fond de pastille. */
  --recu: #4a5563;           --recu-fond: #e9edf1;
  --en_analyse: #5534b0;     --en_analyse-fond: #ece8fa;
  --en_cours: #1f4e8c;       --en_cours-fond: #e3ebf6;
  --attente: #8a4600;        --attente-fond: #fcecd5;
  --resolu: #1c6a42;         --resolu-fond: #dff1e6;
  --ferme: #464f5b;          --ferme-fond: #e4e8ec;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12171d;
    --surface: #1b222b;
    --encre: #e6eaef;
    --discret: #a3adb9;
    --trait: #2f3945;
    --accent: #8db7ef;
    --accent-texte: #0c1a2c;
    --accent-doux: #1d2c40;
    --alerte-fond: #3b1d1a;
    --alerte-texte: #ffb3a9;
    --danger: #ff8f84;
    --ombre: none;
    --recu: #c3cbd5;           --recu-fond: #28313c;
    --en_analyse: #c4b5ff;     --en_analyse-fond: #2c2548;
    --en_cours: #9cc2f5;       --en_cours-fond: #1d2c40;
    --attente: #ffc77a;        --attente-fond: #3d2a10;
    --resolu: #8fd9ad;         --resolu-fond: #16352a;
    --ferme: #b9c1cb;          --ferme-fond: #2a323c;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1.0625rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2 { line-height: 1.25; letter-spacing: -.012em; font-weight: 650; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 1.95rem); margin: .25rem 0 .75rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
p { margin: .5rem 0; }
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.evitement { position: absolute; left: -999px; top: .5rem; }
.evitement:focus { left: .5rem; z-index: 2; background: var(--surface); padding: .5rem .75rem; }

/* En-tete et pied */
.entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete-dedans {
  max-width: 48rem; margin: 0 auto; padding: .35rem 1rem;
  display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: center;
  justify-content: space-between;
}
.marque {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  font-weight: 650; color: var(--encre); text-decoration: none; letter-spacing: -.01em;
}
.marque-signe {
  width: 1.1rem; height: 1.1rem; border-radius: 4px; background: var(--accent);
  box-shadow: inset 0 -.35rem 0 rgb(255 255 255 / 28%);
}
.entete nav { display: flex; flex-wrap: wrap; gap: 0 1.1rem; align-items: center; }
.entete nav a { display: inline-flex; align-items: center; min-height: 44px; }
.en-ligne { display: inline; margin: 0; }
.lien {
  background: none; border: 0; padding: 0; min-height: 44px; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: .18em;
  cursor: pointer;
}
main { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.pied { border-top: 1px solid var(--trait); padding: 1.25rem 1rem 2rem; text-align: center; }
.pied p { margin: 0; color: var(--discret); font-size: .9rem; }

/* Textes d'appoint */
.discret { color: var(--discret); font-size: .94rem; }
.chapeau { font-size: 1.15rem; color: var(--discret); max-width: 38rem; }
.retour { margin: 0 0 .5rem; font-size: .95rem; }
.retour a::before { content: "\2190\00a0"; }
.alerte, .info {
  padding: .8rem 1rem; border-radius: var(--rayon); margin: 0 0 1.25rem;
}
.alerte { background: var(--alerte-fond); color: var(--alerte-texte); font-weight: 500; }
.info { background: var(--accent-doux); }
.avertissement { color: var(--discret); font-size: .94rem; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .55rem 1.15rem; border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: var(--accent-texte);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton-second { background: var(--surface); color: var(--accent); border-color: var(--trait); }
.bouton-danger { background: var(--danger); color: var(--surface); }

/* Accueil */
.accueil { padding: 1.5rem 0 .5rem; }
.accueil h1 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.4rem); max-width: 30rem; }
.parcours {
  list-style: none; counter-reset: parcours; padding: 0; margin: 2rem 0 1.5rem;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.parcours li {
  counter-increment: parcours; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: .9rem 1rem; box-shadow: var(--ombre);
}
.parcours li::before {
  content: counter(parcours); display: block; font-weight: 700; color: var(--accent);
  font-size: 1.3rem; margin-bottom: .2rem;
}
.parcours strong { display: block; }

/* Pastilles d'etat */
.pastille {
  display: inline-block; padding: .1rem .6rem; border-radius: 999px;
  font-size: .84rem; font-weight: 600; white-space: nowrap; line-height: 1.6;
  color: var(--recu); background: var(--recu-fond);
}
.pastille-en_analyse { color: var(--en_analyse); background: var(--en_analyse-fond); }
.pastille-en_cours { color: var(--en_cours); background: var(--en_cours-fond); }
.pastille-attente_information { color: var(--attente); background: var(--attente-fond); }
.pastille-resolu { color: var(--resolu); background: var(--resolu-fond); }
.pastille-ferme { color: var(--ferme); background: var(--ferme-fond); }

/* Liste des demandes */
.titre-page {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 1rem;
}
.titre-page h1 { margin: 0; }
.demandes { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.demande {
  display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .9rem; align-items: baseline;
  padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--encre); text-decoration: none;
}
.demande:hover { border-color: var(--accent); }
.demande-numero { color: var(--discret); font-weight: 650; }
.demande-objet { font-weight: 600; }
.demande .demande-meta { grid-column: 2 / -1; color: var(--discret); font-size: .92rem; }
.export { margin-top: 2rem; }
.vide {
  background: var(--surface); border: 1px dashed var(--trait); border-radius: var(--rayon);
  padding: 1.25rem 1.25rem 1rem;
}
.vide h1, .vide h2 { margin-top: 0; }

/* Formulaires */
.formulaire { display: grid; gap: 1.4rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, label { font-weight: 600; }
legend { margin-bottom: .5rem; padding: 0; }
.champ label { display: block; }
.aide { color: var(--discret); font-size: .92rem; margin: .1rem 0 .45rem; }
input[type=text], input[type=password], input[type=email], input[type=number], textarea {
  width: 100%; padding: .65rem .8rem; font: inherit; color: var(--encre);
  background: var(--surface); border: 1px solid var(--trait); border-radius: 8px;
}
input:focus-visible, textarea:focus-visible { border-color: var(--accent); }
textarea { resize: vertical; min-height: 8rem; display: block; }
.tuiles {
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}
.tuile {
  display: flex; gap: .65rem; align-items: center; min-height: 48px; padding: .55rem .8rem;
  background: var(--surface); border: 1px solid var(--trait); border-radius: 8px;
  font-weight: 500; cursor: pointer;
}
.tuile input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); flex: none; }
.tuile:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.tuile:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
label.case { display: flex; gap: .6rem; align-items: center; font-weight: 500; margin: .5rem 0; }
label.case input { width: 1.2rem; height: 1.2rem; accent-color: var(--danger); }

/* Page d'une demande */
.demande-tete h1 { margin: .1rem 0 .3rem; }
.demande-tete .demande-numero { margin: 0; font-size: 1rem; }
.demande-tete .demande-meta { color: var(--discret); margin: 0 0 1.25rem; }

/* La frise : l'element marquant de la page. */
.progression {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.25rem 1.1rem 1rem; box-shadow: var(--ombre);
}
.frise {
  /* Couleur de l'etape actuelle : celle de l'etat de la demande. */
  --etat: var(--accent); --etat-fond: var(--accent-doux);
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.frise-attente_information { --etat: var(--attente); --etat-fond: var(--attente-fond); }
.frise-resolu { --etat: var(--resolu); --etat-fond: var(--resolu-fond); }
.frise-ferme { --etat: var(--ferme); --etat-fond: var(--ferme-fond); }
.etape { position: relative; text-align: center; padding: 0 .25rem; }
.etape::before {
  /* Trait qui relie l'etape a la precedente. */
  content: ""; position: absolute; top: .55rem; right: 50%; width: 100%; height: 3px;
  background: var(--trait);
}
.etape:first-child::before { display: none; }
.etape-point {
  position: relative; z-index: 1; display: block; width: 1.25rem; height: 1.25rem;
  margin: 0 auto .5rem;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--trait);
}
.etape-nom { display: block; font-size: .88rem; color: var(--discret); line-height: 1.3; }
.etape-franchie::before, .etape-actuelle::before { background: var(--accent); }
.etape-franchie .etape-point { background: var(--accent); border-color: var(--accent); }
.etape-franchie .etape-nom { color: var(--encre); }
.etape-sautee .etape-point { border-style: dashed; }
.etape-sautee .etape-nom { text-decoration: line-through; text-decoration-color: var(--trait); }
.etape-actuelle .etape-point {
  border-color: var(--etat); background: var(--etat); box-shadow: 0 0 0 5px var(--etat-fond);
}
.etape-actuelle .etape-nom { color: var(--encre); font-weight: 650; }
.cause {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--trait);
}
.cause-titre { display: block; font-size: .88rem; color: var(--discret); font-weight: 600; }

/* Reponse a donner */
.repondre { margin-top: 2rem; }
.repondre form { display: grid; gap: .6rem; justify-items: start; }
.repondre label:not(.invisible) { font-weight: 600; }
.repondre-en-avant {
  background: var(--attente-fond); border: 1px solid var(--attente); border-radius: var(--rayon);
  padding: 1.1rem 1.1rem 1.25rem;
}
.repondre-en-avant h2 { margin-top: 0; color: var(--attente); }
.question {
  margin: .25rem 0 1rem; padding: .7rem .9rem; background: var(--surface);
  border-left: 3px solid var(--attente); border-radius: 0 8px 8px 0;
}

/* Historique */
.note-ia {
  font-size: .92rem; color: var(--discret); background: var(--surface);
  border: 1px solid var(--trait); border-radius: 8px; padding: .6rem .8rem;
}
.fil { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.4rem; position: relative; }
.fil::before {
  content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px;
  background: var(--trait);
}
.evt { position: relative; margin: 0 0 1rem; }
.evt-repere {
  position: absolute; left: -1.2rem; top: .85rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--fond); border: 2px solid var(--discret);
}
.evt-etat .evt-repere { top: .45rem; width: .55rem; height: .55rem; left: -1.12rem; border-width: 2px; }
.evt-oracle .evt-repere { border-color: var(--accent); background: var(--accent); }
.evt-etat p { margin: 0; color: var(--discret); font-size: .93rem; }
.evt-etat time { margin-left: .35rem; }
.bulle {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .7rem 1rem .8rem; box-shadow: var(--ombre);
}
.evt-oracle .bulle { border-color: var(--accent); background: var(--accent-doux); }
.bulle-tete {
  display: flex; flex-wrap: wrap; gap: 0 .75rem; justify-content: space-between;
  align-items: baseline; margin-bottom: .2rem;
}
.bulle-auteur { font-weight: 650; font-size: .95rem; }
.bulle-tete time, .evt-etat time { color: var(--discret); font-size: .88rem; }
.texte { white-space: pre-wrap; margin: 0; }

/* Fermer ou effacer */
.gestion {
  margin-top: 2.5rem; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface);
}
.gestion summary {
  cursor: pointer; padding: .8rem 1rem; min-height: 44px; font-weight: 600; color: var(--accent);
}
.gestion-bloc { padding: 0 1rem 1rem; border-top: 1px solid var(--trait); }
.gestion-bloc h2 { font-size: 1.05rem; margin: 1rem 0 .3rem; }

/* Confidentialite */
.texte-long { max-width: 40rem; }
.texte-long li { margin: .45rem 0; }
.texte-long h2 { margin-top: 2rem; }

/* Mobile : la frise devient verticale. */
@media (max-width: 34rem) {
  main { padding-top: 1rem; }
  .frise { grid-template-columns: 1fr; gap: .1rem; }
  .etape {
    display: flex; align-items: center; gap: .75rem; text-align: left; padding: .3rem 0;
  }
  .etape::before { top: auto; bottom: 50%; right: auto; left: .55rem; width: 3px; height: 100%; }
  .etape-point { margin: 0; flex: none; }
  .demande { grid-template-columns: auto 1fr; }
  .demande .pastille { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; }
  .demande .demande-meta { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .tuile, .demande { transition: border-color .15s ease, background-color .15s ease; }
}
@media (forced-colors: active) {
  .etape-point, .evt-repere, .pastille { border: 1px solid CanvasText; }
}

/* Connexion : pages du guichet, parcours d'Authentik joue cote serveur */
.connexion { max-width: 26rem; }
.choix-facteur { display: grid; gap: .6rem; }
.cle-totp code, .codes-secours code { font-size: 1.05rem; letter-spacing: .06em; word-break: break-all; }
.codes-secours { columns: 2; padding-left: 1.2rem; }