/* Parcours de signature — charte VA telecom, déclinaison claire.
 *
 * Les couleurs viennent du brandbook (août 2022), colonne RVB. Ne jamais
 * reprendre les équivalents CMJN qu'il donne à côté : #94D0C8 pour le cyan et
 * #C3DDAB pour la menthe décrivent ce que l'encre atteint sur du papier, pas
 * ce que l'écran affiche, et donnent des couleurs délavées.
 *
 * Règle qui gouverne toute cette feuille : les accents de la marque — cyan et
 * menthe — sont illisibles en texte sur blanc (contrastes 1,24 et 1,19). Ils
 * ne servent donc JAMAIS d'encre ici, uniquement d'aplat, avec du bleu écrit
 * dessus. Les liens et les libellés sont en bleu profond, qui donne 9,25.
 */

/* ---------- Work Sans, servie depuis notre domaine ----------
 * Licence SIL OFL (voir fonts/OFL.txt). Auto-hébergée volontairement :
 * un appel à un CDN extérieur ferait fuiter l'adresse IP du signataire et
 * donnerait à un tiers les moyens de réécrire la page où il signe.
 */
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/worksans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/worksans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/worksans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/worksans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/worksans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/worksans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/worksans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/worksans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
  /* Couleurs de marque, valeurs RVB du brandbook */
  --va-bleu-profond: #184E58;
  --va-bleu-nuit:    #1D343D;
  --va-cyan:         #5BFFE7;
  --va-menthe:       #A1FFC4;
  --va-jaune:        #FFFEC5;
  --va-degrade: linear-gradient(135deg, #A1FFC4 0%, #5BFFE7 100%);

  /* Neutres teintés vers le bleu de la marque plutôt que gris purs */
  --fond:       #F4F8F8;
  --surface:    #FFFFFF;
  --trait:      #DCE7E9;
  --trait-fort: #B9CDD1;
  --sourdine:   #55707A;   /* 5,3 sur blanc — texte secondaire lisible */

  /* Couleurs d'état. Le vert de succès est celui de la marque assombri
     jusqu'à être lisible en encre ; la menthe pure ne l'est pas. */
  --succes:       #0F7A52;
  --succes-fond:  #E6FBF0;
  --alerte:       #8A5A00;
  --alerte-fond:  #FFFBEB;
  --erreur:       #A32020;
  --erreur-fond:  #FDECEC;

  --rayon:       8px;
  --rayon-pilule: 999px;
  --ombre: 0 1px 2px rgba(24, 78, 88, .06), 0 4px 16px rgba(24, 78, 88, .06);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--va-bleu-profond);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--va-bleu-nuit);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1rem; }
a { color: var(--va-bleu-profond); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--va-bleu-nuit); }

:focus-visible {
  outline: 3px solid var(--va-bleu-profond);
  outline-offset: 2px;
  border-radius: 3px;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 0 4rem;
}

/* ---------- En-tête et logo ---------- */
/* L'en-tête est délibérément hors de .container : plusieurs écrans
   redéfinissent ce conteneur pour leur propre mise en page. Il porte donc sa
   propre largeur et son propre centrage. */
.entete {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 16px 0;
}
.entete__marque {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--trait);
}
.entete__titre {
  font-weight: 600;
  font-size: 1rem;
  color: var(--va-bleu-nuit);
  padding-left: 1rem;
  border-left: 1px solid var(--trait);
  line-height: 1.3;
}
.entete__logo {
  /* Le brandbook fixe 170 px comme largeur minimale du logo AVEC baseline.
     En dessous, il doit être présenté sans. 180 px garde une marge. Hauteur
     auto : imposer les deux dimensions déformerait le logo, ce que la charte
     interdit explicitement. */
  width: 180px;
  max-width: 50vw;
  height: auto;
  /* align-self: center empeche l'etirement si le logo se retrouve un jour
     dans une grille ou un flex qui etire ses enfants — la charte interdit
     toute deformation du logotype. */
  align-self: center;
  object-fit: contain;
}

/* ---------- Barre de progression ---------- */
.progression {
  margin: 0 0 2rem;
}
.progression ol {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etape {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  text-align: center;
}
/* Le rail qui relie les repères : tracé derrière eux, d'un centre à l'autre. */
/* Le rail s'arrête AVANT chaque repère plutôt que de passer dessous : il
   affleurait les coches et donnait un trait qui semblait les traverser. */
.etape::before {
  content: "";
  position: absolute;
  top: 11px;
  right: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 3px;
  background: var(--trait);
  border-radius: 999px;
  z-index: 0;
}
.etape:first-child::before { display: none; }
.etape--faite::before,
.etape--courante::before { background: var(--va-degrade); }

.etape__marque {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fond);
  border: 3px solid var(--trait);
  display: grid;
  place-items: center;
  flex: none;
}
.etape--faite .etape__marque {
  background: var(--va-degrade);
  border-color: transparent;
}
/* La coche d'une étape franchie, dessinée en CSS pour ne charger aucune image */
.etape--faite .etape__marque::after {
  content: "";
  width: 6px; height: 11px;
  border: solid var(--va-bleu-nuit);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}
.etape--courante .etape__marque {
  background: var(--surface);
  border-color: var(--va-bleu-profond);
  box-shadow: 0 0 0 4px rgba(24, 78, 88, .12);
}
.etape--courante .etape__marque::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--va-bleu-profond);
}

.etape__nom {
  font-size: .8rem;
  font-weight: 600;
  color: var(--sourdine);
  line-height: 1.25;
}
.etape--faite .etape__nom,
.etape--courante .etape__nom { color: var(--va-bleu-nuit); }

/* Les sous-étapes : une pastille par document à signer. Elles vivent DANS
   l'étape « Signature » plutôt que comme des étapes de premier niveau, pour
   que la barre garde la même forme quel que soit le nombre de documents. */
.etape__documents {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .1rem;
}
.doc-pastille {
  width: 14px;
  height: 5px;
  border-radius: 999px;
  background: var(--trait-fort);
}
.doc-pastille--signe { background: var(--va-bleu-profond); }
.etape__compte {
  font-size: .72rem;
  color: var(--sourdine);
  line-height: 1.2;
}

@media (max-width: 560px) {
  .entete__titre { padding-left: 0; border-left: none; font-size: .9rem; }
  .etape::before { right: calc(50% + 15px); width: calc(100% - 30px); }
  .etape__nom { font-size: .65rem; overflow-wrap: anywhere; }
  .etape__compte { font-size: .65rem; }
  .doc-pastille { width: 10px; }
}

/* ---------- Cartes ---------- */
.card, .signatory-info, .document-item, .legal-notice {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.card {
  padding: 1.5rem;
  box-shadow: var(--ombre);
  margin-bottom: 1.25rem;
}
.card-body { padding: 0; }

/* Le filet dégradé sous un titre — signature visuelle de la marque */
.card > h1:first-child::after,
.card > h2:first-child::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: .6rem 0 1rem;
  border-radius: 999px;
  background: var(--va-degrade);
}

.header { text-align: center; margin-bottom: 1.5rem; }
/* Un bloc a fond sombre impose sa couleur a ses titres. Sans cette regle, le
   h1 global (bleu nuit) s'applique et rend le titre illisible sur le fond
   sombre — c'est ce qui arrivait au titre du document sur l'ecran de
   signature. */
[class*="header"] h1, [class*="header"] h2,
[class*="header"] h3, [class*="header"] p { color: inherit; }
.footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  color: var(--sourdine);
  font-size: .85rem;
  text-align: center;
}

.signatory-info { padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.document-name, .document-title { font-weight: 600; color: var(--va-bleu-nuit); }
.document-item { padding: 1rem 1.25rem; margin-bottom: .75rem; }
.document-info { color: var(--sourdine); font-size: .9rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  color: var(--va-bleu-profond);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease;
}
.btn:hover { box-shadow: var(--ombre); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Le bouton principal porte le dégradé de la marque, avec du bleu écrit
   dessus — 7,45 de contraste. Du cyan en texte sur blanc donnerait 1,24. */
.btn-primary {
  background: var(--va-degrade);
  border-color: transparent;
  color: var(--va-bleu-nuit);
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-secondary { background: var(--surface); color: var(--va-bleu-profond); }

/* ---------- Alertes ---------- */
.alert {
  padding: .9rem 1.1rem;
  border-radius: var(--rayon);
  border-left: 4px solid;
  margin-bottom: 1rem;
  font-size: .95rem;
}
.alert-success { background: var(--succes-fond); border-color: var(--succes); color: #0B5C3E; }
.alert-info    { background: #EDF6F7;            border-color: var(--va-bleu-profond); color: var(--va-bleu-profond); }
.alert-warning { background: var(--alerte-fond); border-color: var(--alerte); color: #6B4600; }
.alert-error   { background: var(--erreur-fond); border-color: var(--erreur); color: #7F1A1A; }

.status-badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--rayon-pilule);
  font-size: .78rem;
  font-weight: 600;
  background: #EDF6F7;
  color: var(--va-bleu-profond);
}

/* ---------- Saisie du code ---------- */
/* `.otp-input` porte le CONTENEUR des six cases, pas un champ. La disposition
   est donc explicite : sans elle, six `<input>` se rangent comme des blocs,
   c'est-à-dire en colonne — et c'est exactement ce qui est parti en production
   le 2026-09-16. La largeur des cases l'est tout autant, sinon elles héritent
   du `width: 100%` de la règle générique plus bas et s'empilent quand même. */
.otp-input {
  display: flex;
  /* Alignées à gauche comme le titre, le texte et le bouton de la page.
     Six cases de 3rem et cinq écarts de .4rem tiennent dans 320 px, soit la
     largeur utile d'un téléphone de 360 px ; `wrap` reste le filet pour plus
     étroit encore, où deux rangées de trois valent mieux que six cases
     rognées. */
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.otp-input input[type="text"] {
  width: 3rem;
  padding: .7rem .2rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  color: var(--va-bleu-nuit);
  background: var(--surface);
  border: 2px solid var(--trait-fort);
  border-radius: var(--rayon);
  /* Le chiffre est centré dans sa case : l'interlettrage hérité décalerait
     chaque glyphe vers la droite de sa boîte. */
  letter-spacing: 0;
}
.otp-input input:focus { border-color: var(--va-bleu-profond); outline: none;
                         box-shadow: 0 0 0 4px rgba(24, 78, 88, .12); }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--va-bleu-profond);
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
}
label { display: block; font-size: .88rem; font-weight: 600;
        color: var(--va-bleu-nuit); margin-bottom: .3rem; }

.countdown { font-variant-numeric: tabular-nums; color: var(--sourdine); font-size: .9rem; }
.resend-link { background: none; border: none; color: var(--va-bleu-profond);
               font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.legal-notice { padding: 1rem 1.25rem; font-size: .85rem; color: var(--sourdine); }

/* ---------- Divers ---------- */
.hidden { display: none !important; }

.spinner {
  width: 20px; height: 20px;
  border: 3px solid var(--trait);
  border-top-color: var(--va-bleu-profond);
  border-radius: 50%;
  animation: tourne .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.test-mode-banner {
  background: var(--alerte-fond);
  border-bottom: 3px solid var(--alerte);
  color: #6B4600;
  padding: .6rem 1rem;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
}

/* Le quart de disque de la charte, en ornement discret */
.forme-angle {
  position: fixed;
  top: 0; right: 0;
  width: 120px; aspect-ratio: 1;
  background: var(--va-degrade);
  border-bottom-left-radius: 100%;
  opacity: .28;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 460px) { .forme-angle { width: 72px; } }

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