/*
 * LA FEUILLE DE STYLE DE « DEMANDES » — ÉCRAN DÉRIVÉ (tâche `544`), aucun
 * artboard. Chaque bloc nomme l'écran du site dont il recopie la composition ;
 * aucune valeur n'est inventée.
 *
 * LES JETONS SONT COPIÉS DE `app/globals.css`, mêmes noms, mêmes valeurs :
 * l'annexe ne dépend pas du code du site, mais doit lui ressembler.
 * `jetons.garde.test.ts` compare chaque jeton déclaré ici à celui du site et refuse
 * tout écart. Deux exceptions, déclarées là-bas : `--police-affichage` et
 * `--police-texte`, qui nomment chez le site des polices chargées par Next ; ici
 * ce sont les piles de repli des artboards (`serif` / `sans-serif`).
 *
 * ÉCRITURE MOBILE D'ABORD. La seule requête média reprend `--bp-poche` (640px).
 */

:root {
  --fond: oklch(95% 0.02 222);
  --surface: oklch(99% 0.004 220);
  --surface-desactivee: oklch(91% 0.014 220);
  --survol: oklch(92.5% 0.028 220);
  --bordure: oklch(87% 0.025 220);
  --texte: oklch(27% 0.035 245);
  --texte-attenue: oklch(46% 0.03 240);
  --texte-tres-attenue: oklch(65% 0.02 235);

  --accent: oklch(52% 0.105 224);
  --accent-fort: oklch(44% 0.095 230);
  --accent-subtil: oklch(89% 0.05 205);
  --accent-fond: oklch(96.5% 0.02 205);
  --accent-bordure: oklch(85% 0.06 210);

  --danger: oklch(52.5% 0.13 28);
  --danger-fond: oklch(93% 0.03 25);
  --succes: oklch(62% 0.06 150);
  --succes-fond: oklch(92% 0.03 150);
  --succes-texte: oklch(32% 0.05 150);
  --avertissement: oklch(48% 0.08 60);
  --avertissement-fond: oklch(93% 0.04 70);

  --police-affichage: serif;
  --police-texte: sans-serif;

  --taille-2: 12.5px;
  --taille-3: 13.5px;
  --taille-4: 14.5px;
  --taille-5: 16px;
  --taille-6: 19px;
  --taille-8: 27px;

  --graisse-corps: 400;
  --graisse-titre: 600;
  --graisse-forte: 700;
  --interligne-titre: 1.15;
  --interligne-corps: 1.5;
  --interlettrage-surtitre: 0.5px;

  --espace-2: 2px;
  --espace-4: 4px;
  --espace-6: 6px;
  --espace-8: 8px;
  --espace-10: 10px;
  --espace-12: 12px;
  --espace-14: 14px;
  --espace-16: 16px;
  --espace-20: 20px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-48: 48px;
  --padding-champ: 12px 14px;
  --padding-bouton: 14px 24px;
  --padding-section: 32px;

  --largeur-page: 1180px;
  --largeur-lecture: 640px;
  --largeur-carte-auth: 440px;

  --rayon-8: 8px;
  --rayon-12: 12px;
  --rayon-16: 16px;
  --rayon-24: 24px;
  --rayon-pilule: 999px;

  --epaisseur-bordure: 1px;
  --epaisseur-bordure-controle: 1.5px;

  --ombre-1: 0 2px 12px -6px oklch(27% 0.035 245 / 0.1);
  --ombre-2: 0 12px 30px -10px oklch(27% 0.035 245 / 0.3);
  --ombre-accent: 0 8px 18px -8px oklch(52% 0.105 224 / 0.55);

  --focus-contour: 2px solid var(--accent);
  --focus-decalage: 2px;

  --bp-poche: 640px;

  --duree-courte: 150ms;
  --courbe-entree: ease-out;

  --cible-tactile: 34px;
  --cible-tactile-principale: 44px;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-4);
  line-height: var(--interligne-corps);
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-fort);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-contour);
  outline-offset: var(--focus-decalage);
}

/* La page : gouttière de `--espace-16` en rendu étroit, largeur de page au-delà
   (précédent : le gabarit `Page` du site, `--largeur-page`). */
.page {
  max-width: min(var(--largeur-page), 100%);
  margin-inline: auto;
  padding: var(--espace-16);
}

/* L'en-tête : titre à gauche, compte à droite (précédent : l'en-tête de page
   d'`ElevesEcran`, titre en `--police-affichage`). */
.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-12);
  margin-bottom: var(--espace-20);
}

.titre {
  margin: 0;
  font-family: var(--police-affichage);
  font-size: var(--taille-8);
  font-weight: var(--graisse-titre);
  line-height: var(--interligne-titre);
  overflow-wrap: anywhere;
}

.compte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-12);
  margin: 0;
  color: var(--texte-attenue);
  font-size: var(--taille-3);
}

.compte form {
  margin: 0;
}

/* Les boutons : le primaire est `.principal` de `FormulaireAuth.module.css`
   (pilule, ombre d'accent) ; le sobre est `.annuler` d'`AnnulerCoursPasse`
   (contour `--bordure`, fond de surface). */
.bouton-principal,
.bouton-sobre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-tactile-principale);
  font-family: inherit;
  font-size: var(--taille-4);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree-courte) var(--courbe-entree);
}

.bouton-principal {
  padding: var(--padding-bouton);
  border: none;
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--surface);
  font-weight: var(--graisse-forte);
  box-shadow: var(--ombre-accent);
}

.bouton-principal:hover {
  background: var(--accent-fort);
  color: var(--surface);
}

.bouton-sobre {
  padding: var(--espace-8) var(--espace-16);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font-weight: var(--graisse-titre);
}

.bouton-sobre:hover {
  background: var(--survol);
  color: var(--texte);
}

/* La barre d'action : empilée en rendu étroit, sur une ligne au-dessus de
   `--bp-poche` (précédent : `.actions` de `CarteSignalement`). */
.barre {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espace-12);
  margin-bottom: var(--espace-20);
}

.filtres {
  display: flex;
  flex-direction: column;
  gap: var(--espace-8);
  margin: 0;
}

.case {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-8);
  min-height: var(--cible-tactile);
  font-size: var(--taille-3);
  color: var(--texte-attenue);
}

.case input {
  width: var(--espace-20);
  height: var(--espace-20);
  accent-color: var(--accent);
}

/* La liste : l'empilement des cartes de `CarteSignalement` (`.liste`). */
.liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La carte : `.carte` de `CarteSignalement` (padding, rayon, ombre). Sa
   COULEUR dit l'état — combinaisons formées, déclarées au rapport de `544`. */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-6);
  min-width: 0;
  padding: var(--espace-16);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-12);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}

.carte-nouvelle {
  background: var(--surface);
  border-color: var(--bordure);
}

.carte-tache-faite {
  background: var(--accent-fond);
  border-color: var(--accent-bordure);
}

.carte-a-verifier {
  background: var(--avertissement-fond);
  border-color: var(--avertissement);
}

.carte-verifiee {
  background: var(--succes-fond);
  border-color: var(--succes);
  color: var(--succes-texte);
}

.carte-ecartee {
  background: var(--fond);
  border-color: var(--bordure);
  color: var(--texte-attenue);
}

/* Le titre est le lien ; son `::after` étend la zone cliquable à la carte. */
.carte-titre {
  margin: 0;
  font-size: var(--taille-5);
  font-weight: var(--graisse-titre);
  overflow-wrap: anywhere;
}

.carte-titre a {
  color: inherit;
  text-decoration: none;
}

.carte-titre a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rayon-12);
}

.carte-titre a:hover {
  text-decoration: underline;
}

.carte-titre a:focus-visible {
  outline: none;
}

.carte-titre a:focus-visible::after {
  outline: var(--focus-contour);
  outline-offset: var(--focus-decalage);
}

/* Les badges : `EtatSauvegarde` / `ListeSauvegardes` (pastille, `--taille-2`,
   `--graisse-titre`). Fond de surface sur la carte colorée, texte `--texte` :
   le contraste ne dépend pas de la teinte de la carte. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: inline-block;
  padding: var(--espace-2) var(--espace-10);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font-size: var(--taille-2);
  font-weight: var(--graisse-titre);
}

.badge-bloquante {
  border-color: var(--danger);
  background: var(--danger-fond);
  color: var(--danger);
}

.badge-type {
  color: var(--texte-attenue);
}

/* Les pages concernées : puces, comme les détails de `CarteSignalement`. */
.pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4) var(--espace-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--taille-2);
}

.pages li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.pages li::before {
  content: '• ';
}

/* L'aperçu : deux lignes, texte saisi gardé tel quel (`.texte` de
   `CarteSignalement` : retours à la ligne conservés, URL coupées). */
.apercu {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  overflow: hidden;
  font-size: var(--taille-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meta {
  margin: 0;
  font-size: var(--taille-2);
  opacity: 1;
}

.vide {
  padding: var(--espace-24);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-12);
  background: var(--surface);
  color: var(--texte-attenue);
  text-align: center;
}

/* Le formulaire : colonne de lecture (`--largeur-lecture`), champs de
   `FormulaireAuth.module.css` (`.champ`, `.label`, `.erreurChamp`). */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-14);
  max-width: min(var(--largeur-lecture), 100%);
  padding: var(--espace-16);
  border-radius: var(--rayon-16);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}

.champ-groupe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.label {
  display: block;
  margin-bottom: var(--espace-6);
  color: var(--texte-attenue);
  font-size: var(--taille-3);
  font-weight: var(--graisse-titre);
}

.champ {
  display: block;
  width: 100%;
  min-height: var(--cible-tactile-principale);
  padding: var(--padding-champ);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-12);
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--taille-5);
}

.champ-erreur {
  border-color: var(--danger);
}

.erreur-champ {
  margin: var(--espace-6) var(--espace-2) 0;
  color: var(--danger);
  font-size: var(--taille-2);
}

.aide {
  margin: var(--espace-6) 0 0;
  color: var(--texte-attenue);
  font-size: var(--taille-2);
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-6);
  margin-top: var(--espace-6);
}

.suggestions button {
  min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-10);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--taille-2);
  cursor: pointer;
}

.suggestions button:hover {
  background: var(--survol);
}

/* Les cinq états : boutons radio VISIBLES, empilés en rendu étroit. */
.etats {
  display: flex;
  flex-direction: column;
  gap: var(--espace-8);
}

.etat-option {
  display: flex;
  align-items: center;
  gap: var(--espace-10);
  min-height: var(--cible-tactile-principale);
  padding: var(--espace-8) var(--espace-14);
  border: var(--epaisseur-bordure-controle) solid var(--bordure);
  border-radius: var(--rayon-12);
  background: var(--surface);
  cursor: pointer;
}

.etat-option:hover {
  background: var(--survol);
}

.etat-option input {
  width: var(--espace-20);
  height: var(--espace-20);
  accent-color: var(--accent);
}

.etat-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-fond);
  font-weight: var(--graisse-titre);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-8);
}

.copie-manuelle {
  margin-top: var(--espace-12);
}

.copie-manuelle textarea {
  min-height: calc(var(--espace-48) * 3);
}

/* L'historique : lignes de la liste des sauvegardes (`ListeSauvegardes`). */
.historique {
  max-width: min(var(--largeur-lecture), 100%);
  margin-top: var(--espace-24);
}

.historique h2 {
  margin: 0 0 var(--espace-8);
  font-size: var(--taille-6);
  font-weight: var(--graisse-titre);
}

.historique ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.historique li {
  padding: var(--espace-8) 0;
  border-bottom: var(--epaisseur-bordure) solid var(--bordure);
  font-size: var(--taille-3);
  overflow-wrap: anywhere;
}

/* La connexion : colonne centrée, carte d'authentification
   (`FormulaireAuth.module.css` : `.carte`, `--largeur-carte-auth`). */
.connexion {
  display: flex;
  justify-content: center;
  padding: var(--espace-24) var(--espace-16) var(--espace-48);
}

.carte-auth {
  display: flex;
  flex-direction: column;
  gap: var(--espace-14);
  width: 100%;
  max-width: var(--largeur-carte-auth);
  padding: var(--padding-section);
  border-radius: var(--rayon-24);
  background: var(--surface);
  box-shadow: var(--ombre-2);
}

.carte-auth .titre {
  text-align: center;
}

.erreur-bandeau {
  margin: 0;
  padding: var(--espace-12) var(--espace-16);
  border: var(--epaisseur-bordure) solid var(--danger);
  border-radius: var(--rayon-12);
  background: var(--danger-fond);
  color: var(--danger);
  font-size: var(--taille-3);
}

.bouton-pleine-largeur {
  width: 100%;
}

@media (min-width: 640px) {
  .barre {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .filtres {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-16);
  }

  .etats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .formulaire {
    padding: var(--espace-24);
  }
}