/* style.css — Thème AdventGest Lite, repris de ui/theme/Theme.kt (Android,
   ADR-006) pour continuité visuelle entre les deux plateformes.

   UI-05 (ANTI_REGRESSION.md) : contrairement à la version Android, où
   #9AA9B7 mesure 2,4:1 sur blanc (écart connu, non résolu), le placeholder
   web réutilise #5A6B7B (« texteSecondaire ») — 5,5:1, conforme WCAG AA.
   Choix possible ici parce qu'il s'agit d'un nouveau code, pas d'une
   correction sur l'existant Android. */

:root {
  --fond: #eef2f7;
  --surface: #ffffff;
  --texte: #0f1d2a;
  --texte-secondaire: #5a6b7b;
  --placeholder: #5a6b7b;

  --accent: #15558c;
  --accent-fonce: #0e3f6b;
  --accent-clair: #e4edf6;

  --bordure: #d6dfe8;
  --danger: #a32118;
  --succes: #1a7f4b;
  --succes-clair: #e4f4eb;
  --avertissement: #8a5a00;
  --avertissement-clair: #fdf3de;
  --neutre-clair: #e7ecf2;

  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 1.5rem;
  --espace-xl: 2rem;

  --rayon-s: 0.625rem;
  --rayon-m: 0.875rem;
  --rayon-l: 1.25rem;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* [hidden] et une classe comme .ecran { display: flex } ont exactement la
   même spécificité (0,0,1,0) : sans ce !important, la règle de classe posée
   dans CETTE feuille l'emporte sur celle, pourtant plus tardive dans le
   document, de la feuille de style par défaut du navigateur — l'attribut
   `hidden` devient alors sans effet. Défaut constaté le 2026-08-13 : les
   deux écrans (accueil et récapitulatif) restaient visibles en même temps
   dès l'ouverture de la page, chacun avec ses propres boutons actionnables
   (ANTI_REGRESSION.md § 5 — voir aussi js/app.js pour le garde-fou sur
   fichier vide qui a laissé passer un appel d'extraction dans cet état).
   Règle unique, en tête de fichier, pour ne pas avoir à la répéter à chaque
   nouvel élément masqué. */
[hidden] {
  display: none !important;
}

html {
  /* Chrome/Android grossit automatiquement le texte dans les colonnes
     étroites (« font boosting », pensé pour du texte non stylé) : sur une
     mise en page déjà dimensionnée à la main, ça produit un rendu initial
     inconsistant — texte tantôt trop grand, tantôt normal, selon la largeur
     réelle de l'écran. `initial-scale=1` dans le viewport (index.html) ne
     suffit pas à l'empêcher : c'est un réglage distinct. Défaut constaté le
     2026-08-14. */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  /* Pas de hyphens: auto — pas de césure (ANTI_REGRESSION UI-02). */
  hyphens: none;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  /* env(safe-area-inset-*) : zones sûres en PWA installée plein écran (encoche, geste). */
  padding: max(env(safe-area-inset-top), 1rem) max(env(safe-area-inset-right), 1rem)
    max(env(safe-area-inset-bottom), 1rem) max(env(safe-area-inset-left), 1rem);
}

.ecran {
  max-width: 32rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Contrairement à l'Android natif (ANTI_REGRESSION UI-03 : aucun défilement
     clavier fermé), un défilement de page reste l'idiome web ordinaire —
     l'écran vise à tenir sans défiler sur un téléphone en usage normal, mais
     rien n'empêche le défilement s'il le faut (police agrandie, clavier
     ouvert). Déviation documentée, pas un oubli. */
}

.titre-app {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 var(--espace-s) 0;
}

.rangee-capture {
  display: flex;
  gap: var(--espace-m);
}

.bouton-capture {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--rayon-l);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  /* Relief : même logique que Bouton.kt / BoutonCapture (ANTI_REGRESSION § 4,
     Material3 ne pose aucune ombre par défaut — ici on en pose une nous-mêmes
     dès le départ, la leçon étant déjà payée côté Android). */
  box-shadow: 0 6px 10px rgb(15 29 42 / 18%);
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}

.bouton-capture:active {
  box-shadow: 0 1px 2px rgb(15 29 42 / 18%);
  transform: translateY(2px);
}

.bouton-capture--pleine {
  background: var(--accent);
  color: #ffffff;
  border: none;
}

.bouton-capture--contour {
  background: var(--accent-clair);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

/* Réglages incomplets (P-06) : le bouton reste cliquable — c'est ce tap qui
   révèle l'erreur — seul l'aspect visuel change. Jamais `disabled`, qui
   rendrait le clic muet (même piège que Modifier.clickable(enabled=false)
   en Compose, ANTI_REGRESSION § 4). */
.bouton-capture--inactif {
  opacity: 0.45;
}

.espace-l {
  height: var(--espace-l);
}

.champ {
  display: block;
  margin-bottom: var(--espace-s);
}

.champ-libelle {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-xs);
}

.champ-saisie {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem;
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--texte);
}

.champ-saisie::placeholder {
  color: var(--placeholder);
}

.champ-saisie:focus {
  outline: none;
  border-color: var(--accent);
}

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

.champ-saisie--multiligne {
  resize: vertical;
  min-height: 4.5rem;
}

.champ-erreur {
  display: block;
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: var(--espace-xs);
}

.texte-aide {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--texte-secondaire);
}

/* --- Feuille d'actions (import photo/PDF) --- */

.feuille {
  border: none;
  border-radius: var(--rayon-l) var(--rayon-l) 0 0;
  padding: var(--espace-m) 0;
  width: 100%;
  max-width: 32rem;
  margin: auto auto 0 auto;
  box-shadow: 0 -4px 20px rgb(15 29 42 / 20%);
}

.feuille::backdrop {
  background: rgb(15 29 42 / 40%);
}

.feuille-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texte);
  padding: var(--espace-m) var(--espace-l);
  cursor: pointer;
}

.feuille-option:active {
  background: var(--neutre-clair);
}

/* --- Récapitulatif --- */

.recap-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.recap-miniature {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon-s);
  background: var(--neutre-clair);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
}

.recap-titre-bloc {
  flex: 1;
  min-width: 0;
}

.recap-titre {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.recap-reference {
  font-size: 0.75rem;
  color: var(--texte-secondaire);
  margin: 0;
}

.bouton-icone {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--texte);
  cursor: pointer;
  padding: var(--espace-s);
  line-height: 1;
}

.recap-bandeau {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  border-radius: var(--rayon-s);
  padding: var(--espace-s);
  margin-top: var(--espace-s);
  font-size: 0.8125rem;
}

.recap-bandeau--info {
  color: var(--texte-secondaire);
}

.recap-bandeau--avertissement {
  background: var(--avertissement-clair);
  color: var(--avertissement);
  justify-content: space-between;
}

.lien-action {
  background: none;
  border: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.chargement {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--accent-clair);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: tourner 0.7s linear infinite;
}

@keyframes tourner {
  to {
    transform: rotate(360deg);
  }
}

.recap-champs {
  margin-top: var(--espace-m);
}

.recap-bas {
  margin-top: auto;
  padding-top: var(--espace-s);
}

.recap-erreur-globale {
  color: var(--danger);
  font-size: 0.8125rem;
  margin: 0 0 var(--espace-s) 0;
}

.recap-destinataire {
  font-size: 0.8125rem;
  color: var(--texte-secondaire);
  margin: 0 0 var(--espace-s) 0;
}

.recap-actions {
  display: flex;
  gap: var(--espace-s);
}

.bouton {
  flex: 1;
  min-height: 3.125rem;
  border-radius: var(--rayon-m);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgb(15 29 42 / 15%);
}

.bouton:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.bouton--primaire {
  background: var(--accent);
  color: #ffffff;
}

.bouton--secondaire {
  background: var(--neutre-clair);
  color: var(--texte);
  box-shadow: none;
}

.bouton--succes {
  background: var(--succes);
  color: #ffffff;
}

/* --- Dialogues (confirmation, repli) --- */

.dialogue {
  border: none;
  border-radius: var(--rayon-l);
  padding: var(--espace-l);
  max-width: 22rem;
  width: calc(100% - 2 * var(--espace-l));
  box-shadow: 0 8px 24px rgb(15 29 42 / 25%);
}

.dialogue::backdrop {
  background: rgb(15 29 42 / 40%);
}

.dialogue-titre {
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 var(--espace-m) 0;
}

.dialogue-texte {
  font-size: 0.875rem;
  color: var(--texte-secondaire);
  line-height: 1.5;
}

.dialogue-lignes {
  margin-bottom: var(--espace-m);
  max-height: 40vh;
  overflow-y: auto;
}

.dialogue-ligne {
  margin-bottom: var(--espace-s);
}

.dialogue-ligne-libelle {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--texte-secondaire);
  text-transform: uppercase;
}

.dialogue-ligne-valeur {
  display: block;
  font-size: 0.9375rem;
}

.dialogue-actions {
  display: flex;
  gap: var(--espace-s);
}

.dialogue-actions--seule {
  justify-content: stretch;
}