/* Page publique du circuit de validation — telephone d'abord.
   Couleurs : jetons du design system (design-system/tokens.css, v2.5.0),
   recopies ici parce que la page se deploie seule. Police systeme : aucune
   ressource tierce, rien a charger sur un reseau mobile faible. */
:root {
  --navy: #2B4074;
  --navy-900: #1A2849;
  --navy-50: #EEF1F7;
  --orange: #F7931E;
  --orange-50: #FFF7EB;
  --paper: #FAF8F5;
  --white: #FFFFFF;
  --gray-200: #DBDCDE;
  --gray-500: #6B6965;
  --gray-700: #35332F;
  --success: #2F7D5A;       /* jeton --success du design system */
  --success-fond: #E2F3EA;  /* hors jetons : fond clair de --success */
  --rayon: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--gray-700);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.entete { background: var(--white); border-bottom: 3px solid var(--orange); padding: 12px 16px; }
.logo { height: 36px; display: block; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { color: var(--navy); font-size: 1.25rem; margin: 8px 0 4px; }
.valideur { color: var(--gray-500); margin: 0 0 12px; }
.etat, .resultat {
  background: var(--white); border-radius: var(--rayon); padding: 16px;
  border-left: 4px solid var(--navy); margin-bottom: 16px;
}
.resultat.reussi { border-left-color: var(--success); background: var(--success-fond); }
/* Toujours rendu (region aria-live) : sans message, aucun habillage. Surtout pas
   display: none, qui retirerait la region et l'annonce avec elle. */
.resultat:empty { padding: 0; margin: 0; border: 0; background: none; }
.resultat:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.etat h2, .resultat h2 { font-size: 1.1rem; color: var(--navy-900); margin: 0 0 6px; }
.pages { display: flex; flex-direction: column; gap: 12px; }
.pages canvas { width: 100%; height: auto; background: var(--white); box-shadow: 0 1px 4px rgba(43, 64, 116, .2); border-radius: 4px; }
.ouvrir { font-size: .9rem; }
.ouvrir a { color: var(--navy); }

/* La zone de validation suit le document, sans rester collee : on lit, puis on valide
   en bas (decision du 29/09/2026 : collee, elle prenait 57 % de l'ecran d'un telephone). */
.geste {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--rayon);
  padding: 16px; margin: 16px 0 0;
}
.glisser {
  position: relative; height: 60px; border-radius: 30px; background: var(--navy-50);
  border: 2px solid var(--navy); overflow: hidden; user-select: none;
}
.glisser-libelle {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-left: 56px; color: var(--navy); font-weight: 600; pointer-events: none;
}
.glisser-curseur {
  position: absolute; top: 4px; left: 4px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; cursor: grab; touch-action: none; transition: transform .25s ease;
}
.glisser-curseur.en-mouvement { transition: none; cursor: grabbing; }
/* Anneau de focus : 3 px hors du curseur, dans les 4 px de marge de la piste (l'overflow de
   la piste ne le rogne donc pas), navy-900 sur navy-50 = 12,9:1 ; filet blanc a l'interieur,
   blanc sur navy = 10,1:1, pour que l'anneau se lise aussi contre le curseur lui-meme. */
.glisser-curseur:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 0; box-shadow: inset 0 0 0 3px var(--white); }
@media (prefers-reduced-motion: reduce) { .glisser-curseur { transition: none; } }
.aide { font-size: .8rem; color: var(--gray-500); margin: 6px 0 12px; }
.information, .clause { font-size: .85rem; color: var(--gray-500); margin: 0 0 8px; }
.clause { font-size: .8rem; margin-bottom: 16px; }

button { font: inherit; }
.bouton-principal, .bouton-secondaire {
  min-height: 44px; padding: 10px 16px; border-radius: 22px; margin: 4px 8px 4px 0; cursor: pointer;
}
.bouton-principal { background: var(--navy); color: var(--white); border: 0; }
.bouton-secondaire { background: var(--white); color: var(--navy); border: 2px solid var(--navy); }
.lien-bouton {
  background: none; border: 0; color: var(--navy); text-decoration: underline; padding: 10px 0;
  min-height: 44px; cursor: pointer;
}
.confirmation, .correction { background: var(--orange-50); border-radius: var(--rayon); padding: 12px; margin: 8px 0; }
.correction label { display: block; margin-bottom: 6px; }
.correction textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--gray-200); border-radius: 8px; }
/* Pendant un envoi (P14) : rien ne se relance, et cela se voit. */
.bouton-principal:disabled, .bouton-secondaire:disabled { opacity: .6; cursor: default; }
.glisser-curseur[aria-disabled="true"] { opacity: .6; cursor: default; }
[hidden] { display: none !important; }