/* Tokens DA §2 — copie synchronisée avec l'autre page */
:root {
  --c-paper: #FFFFFF;
  --c-paper-2: #F5F8FC;
  --c-paper-3: #E8EEF6;
  --c-border: #D3DEEA;
  --c-ink: #0A1220;
  --c-ink-soft: #475569;
  --c-brand-700: #024E7C;
  --c-brand-600: #0369A1;
  --c-brand-400: #38A3F1;
  --c-danger: #C81E1E;
  --c-success: #15803D;
  --c-focus-light: #B45309;
  --scrim-paper: rgba(255,255,255,.92);
  --scrim-paper-2: rgba(255,255,255,.82);

  --shadow-1: 0 1px 2px rgba(10,18,32,.08), 0 1px 3px rgba(10,18,32,.06);
  --shadow-2: 0 4px 12px rgba(10,18,32,.10);
  --shadow-3: 0 12px 32px rgba(10,18,32,.14);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --control-h: 56px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;
  --lh-snug: 1.35; --lh-base: 1.55; --lh-loose: 1.7;
  --font-display: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2,.8,.3,1);
  --ease-in: cubic-bezier(.5,0,.9,.3);

  --z-map: 0; --z-map-ui: 10; --z-sheet: 40; --z-header: 50; --z-toast: 200;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-paper-2);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* INDISPENSABLE, et pas une precaution de style : sans cette regle, la ligne
   `.ecran/.feuille { display:flex }` casse tout le parcours. app.js masque
   les ecrans inactifs avec l'attribut `hidden`, qui n'agit que par la regle
   `[hidden] { display: none }` de la feuille du NAVIGATEUR. Or une regle
   d'auteur l'emporte toujours sur celle du navigateur a specificite egale.
   Constate dans un vrai navigateur le 30/08/2026 : les CINQ ecrans
   s'affichaient empiles, y compris « Signalement envoye » avant tout envoi. */
[hidden] { display: none !important; }

/* --- LA CARTE EST LE FOND (DA §7.2) ------------------------------------- */
#carte { position: fixed; inset: 0; z-index: var(--z-map); background: #C8C2B8; }

/* --- EN-TETE FLOTTANT ---------------------------------------------------- */
.entete {
  position: fixed;
  top: max(var(--s-3), env(safe-area-inset-top));
  left: var(--s-3);
  z-index: var(--z-header);
  max-width: calc(100vw - var(--s-3) * 2);
  padding: var(--s-2) var(--s-4);
  background: var(--scrim-paper);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(211,222,234,.6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.entete h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}
.progression {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-1) 0 0;
  color: var(--c-ink-soft);
  font-size: .9375rem;
}
/* Piste de progression : un complement visuel, le texte « Etape x sur 4 »
   reste l'information (regle n°81). Remplie par app.js via --etapes-faites. */
.progression::after {
  content: '';
  flex: 0 0 64px;
  height: 4px;
  border-radius: var(--r-full);
  background:
    linear-gradient(to right, var(--c-brand-600) calc(var(--etapes-faites, .25) * 100%),
                    var(--c-paper-3) calc(var(--etapes-faites, .25) * 100%));
}

/* --- FEUILLES (bottom-sheets) -------------------------------------------- */
.feuille {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--scrim-paper);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -1px 0 rgba(10,18,32,.10), 0 -12px 32px rgba(10,18,32,.20);
  padding: var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  .feuille {
    left: auto;
    right: var(--s-6);
    bottom: var(--s-6);
    width: 30rem;
    border-radius: var(--r-lg);
    max-height: calc(100dvh - 120px);
  }
}

.ecran h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.aide { margin: 0; color: var(--c-ink-soft); line-height: var(--lh-loose); }

.erreur { margin: 0; color: var(--c-danger); font-weight: 600; min-height: 1.5em; }
.erreur:empty { min-height: 0; }

label { font-family: var(--font-display); font-weight: 700; }

/* --- CHAMPS -------------------------------------------------------------- */
textarea, input[type="text"] {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-3);
  font: inherit;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 2px solid var(--c-border);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out);
}
textarea:hover, input[type="text"]:hover { border-color: var(--c-brand-400); }
textarea { min-height: 140px; resize: vertical; }

/* --- CATEGORIES : blocs 64px, cible du pouce (DA §5.4) ------------------- */
.categorie {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  margin-bottom: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  text-align: left;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 2px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.categorie:hover { border-color: var(--c-brand-400); box-shadow: var(--shadow-1); }
.categorie:active { transform: scale(.985); }
.categorie[aria-checked="true"] {
  border-color: var(--c-brand-600);
  background: var(--c-paper-2);
  box-shadow: inset 3px 0 0 var(--c-brand-600);
}
.categorie svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 6px;
  color: var(--c-brand-700);
  background: var(--c-paper-3);
  border-radius: var(--r-sm);
}
.categorie[aria-checked="true"] svg { color: #FFFFFF; background: var(--c-brand-600); }

/* --- BARRE D'ACTION ------------------------------------------------------ */
.barre-action {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--s-2);
  padding-top: var(--s-3);
  margin-bottom: calc(-1 * max(var(--s-5), env(safe-area-inset-bottom)));
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--c-paper) 72%, transparent);
}

.bouton {
  flex: 1;
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  font: inherit;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
.bouton:active { transform: scale(.985); }
.bouton-primaire { background: var(--c-brand-600); color: #FFFFFF; box-shadow: var(--shadow-1); }
.bouton-primaire:hover { background: var(--c-brand-700); box-shadow: var(--shadow-2); }
.bouton-secondaire { background: var(--c-paper); color: var(--c-brand-700); border-color: var(--c-border); }
.bouton-secondaire:hover { border-color: var(--c-brand-400); }
.bouton:disabled {
  background: var(--c-paper-3);
  color: var(--c-ink-soft);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

:focus-visible { outline: 3px solid var(--c-focus-light); outline-offset: 2px; }

.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#apercu { max-width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-1); }

.confirmation { margin: 0; font-size: var(--fs-lg); }
.num { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- RECHERCHE D'ADRESSE A COMPLETION (DA §7.2, regle n°103) ------------
   La liste se pose AU-DESSUS du contenu plutot que de le pousser : sur un
   telephone, un decalage de la mise en page a chaque frappe rend le champ
   inutilisable. Elle reste ancree au champ, donc jamais loin du pouce. */
.recherche { display: flex; flex-direction: column; gap: var(--s-2); }
.combo { position: relative; }
.combo input { width: 100%; }

.resultats {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--c-paper);
  border: 2px solid var(--c-brand-600);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  max-height: min(46vh, 320px);
  overflow-y: auto;
}

/* Cible a --control-h (56 px) comme tout le parcours citoyen : une liste de
   propositions se touche avec un pouce, pas avec une souris. Le libelle d'une
   adresse passe a la ligne plutot que d'etre tronque (regle n°113). */
.resultat {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: var(--s-2) var(--s-3);
  border-radius: 4px;
  cursor: pointer;
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}
.resultat:hover { background: var(--c-paper-2); }
/* L'option courante n'est pas signalee par la seule couleur (regle n°37) :
   fond teinte ET barre laterale. */
.resultat[aria-selected="true"] {
  background: var(--c-paper-3);
  box-shadow: inset 3px 0 0 var(--c-brand-600);
}

.statut-recherche { margin: 0; color: var(--c-ink-soft); font-size: .9375rem; min-height: 1.4em; }
.statut-recherche:empty { min-height: 0; }

/* --- CHOREGRAPHIE DES FEUILLES (DA §6 ④, amendement 30/08/2026) ---------- */
@keyframes feuille-entree { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes feuille-sortie { from { transform: translateY(0); opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
.feuille-entree { animation: feuille-entree var(--dur-base) var(--ease-out); }
.feuille-sortie { animation: feuille-sortie var(--dur-fast) var(--ease-in) forwards; }

/* Le pin du lieu choisi : il tombe, deux ondes, puis il se tient tranquille. */
@keyframes pin-chute { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pin-onde { from { transform: scale(.4); opacity: .55; } to { transform: scale(2.4); opacity: 0; } }
.pin {
  position: relative;
  width: 22px;
  height: 22px;
  background: var(--c-brand-600);
  border: 3px solid #FFFFFF;
  border-radius: var(--r-full);
  box-shadow: 0 0 0 1px rgba(10,18,32,.45), 0 2px 8px rgba(10,18,32,.45);
  animation: pin-chute var(--dur-fast) var(--ease-out);
}
.pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 2px solid var(--c-brand-600);
  border-radius: var(--r-full);
  opacity: 0;
  animation: pin-onde 900ms var(--ease-out) 2;
}

/* --- DEPOT PHOTO (l'input reste focusable, la zone n'est que son habit) --- */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.depot-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 120px;
  padding: var(--s-4);
  border: 2px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-paper);
  color: var(--c-brand-700);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.depot-photo:hover { border-color: var(--c-brand-400); background: var(--c-paper-2); }
.depot-photo svg { width: 32px; height: 32px; }
.visuellement-cache:focus-visible + .depot-photo {
  outline: 3px solid var(--c-focus-light);
  outline-offset: 2px;
}

#apercu-bloc { display: flex; flex-direction: column; gap: var(--s-3); }
@keyframes apercu-entree { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#apercu-photo {
  max-width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  animation: apercu-entree var(--dur-fast) var(--ease-out);
}

/* --- CONFIRMATION : la coche se dessine, le numero est le heros ---------- */
.succes { display: flex; justify-content: center; color: var(--c-success); }
.coche { width: 72px; height: 72px; }
@keyframes coche { to { stroke-dashoffset: 0; } }
.coche-cercle { stroke-dasharray: 158; stroke-dashoffset: 158; animation: coche var(--dur-slow) var(--ease-out) forwards; }
.coche-trait  { stroke-dasharray: 34;  stroke-dashoffset: 34;  animation: coche 300ms var(--ease-out) 250ms forwards; }
.numero-suivi {
  margin: 0;
  font-size: var(--fs-3xl);
  text-align: center;
  letter-spacing: .04em;
  padding: var(--s-3) var(--s-4);
  background: var(--c-paper-2);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
}

/* --- Audit SOTA (web-interface-guidelines, 30/08/2026) ------------------- */
button, a, input, textarea, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
h1, h2 { text-wrap: balance; }
.aide, .confirmation { text-wrap: pretty; }
/* Sous 400 px, les deux boutons de la barre d'action passent l'un sous
   l'autre plutot que d'ecraser leurs libelles. */
@media (max-width: 399px) {
  .barre-action { flex-wrap: wrap; }
  .bouton { flex-basis: 100%; }
}