/* Base commune a tous les ecrans exportes.
   Les valeurs viennent des tokens, aucune couleur n'est ecrite en dur ici. */

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

body {
  margin: 0;
  padding: 24px 16px 48px;
  background: var(--canvas);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.ecran { margin: 0 auto; }

a { color: var(--brand-violet); }
a:hover { color: var(--brand-pink); }
::selection { background: #EAD9FF; }

/* Carte, la surface de base */
.carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.carte--saillante { box-shadow: var(--shadow-lg); }
.carte--accent { border: 1.5px solid var(--brand-violet); }
.carte--attention { border: 1.5px solid #EFDFBE; }

.carte__entete { padding: 20px 22px; border-bottom: 1px solid var(--border); }
.carte__corps { padding: 20px 22px; }

/* Typographie */
.titre { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.035em; line-height: 1.2; margin: 0; font-size: 23px; }
.titre--petit { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; }
.sous-titre { font-size: 13.5px; line-height: 1.6; color: var(--slate); margin: 8px 0 0; }
/* Filet anti-debordement des zones de prose : les mots y sont lies par des
   espaces insecables (retour a la ligne apres ponctuation, decision 0076) ;
   si une proposition depasse malgre le plafond du groupe insecable, le
   navigateur reprend la coupure au lieu de deborder. */
.sous-titre, .texte, .texte--discret, .encart { overflow-wrap: break-word; }
.texte { font-size: 14px; line-height: 1.6; margin: 0; }
.texte--discret { font-size: 12.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.surtitre { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--slate); margin: 0 0 10px; text-wrap: balance; }
.mono { font-family: var(--font-mono); }
.montant { font-family: var(--font-mono); font-weight: 700; font-size: 16px; white-space: nowrap; }
.montant__regime { font-weight: 600; font-size: 11.5px; color: var(--slate); }

/* Boutons, centres par defaut */
.actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  white-space: nowrap;
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: none; cursor: pointer; text-decoration: none;
}
.bouton--principal { background: var(--brand-gradient); color: #fff; box-shadow: 0 6px 18px rgba(109,74,238,0.6); }
.bouton--secondaire { background: var(--surface); color: var(--ink); border: 1.5px solid var(--button-secondary-border); min-height: 44px; font-size: 14px; }
.bouton--discret { background: none; color: var(--slate); min-height: 40px; font-size: 13.5px; padding: 0 12px; }

/* Champs */
.champ { display: block; margin-top: 18px; }
.champ__etiquette { display: block; font-weight: 700; font-size: 12.5px; margin-bottom: 7px; }
.champ__saisie, .champ__zone {
  width: 100%;
  background: var(--surface-sunken);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.6;
  color: var(--ink);
}
.champ__zone { min-height: 96px; resize: vertical; font-weight: 500; }
.champ__saisie:focus, .champ__zone:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand-violet);
  box-shadow: 0 0 0 4px rgba(109,74,238,0.14);
}

/* Case a cocher et bouton radio */
.choix { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--input-border); border-radius: var(--radius-md); padding: 14px 15px; min-height: 48px; cursor: pointer; }
.choix + .choix { margin-top: 10px; }
.choix__marque { width: 20px; height: 20px; border: 1.5px solid var(--button-secondary-border); border-radius: 5px; flex: none; margin-top: 1px; }
.choix__marque--rond { border-radius: 50%; }
.choix__texte { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.45; }
.choix__precision { display: block; font-weight: 500; font-size: 12.5px; color: var(--slate); margin-top: 4px; line-height: 1.55; }

/* Pastilles d'etat */
.pastille { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-full); padding: 4px 11px; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.pastille__point { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pastille--attente { background: var(--warning-bg); color: var(--warning); }
.pastille--attente .pastille__point { background: var(--warning-dot); }
.pastille--payeur { background: var(--violet-soft); color: var(--brand-violet); }
.pastille--neutre { background: var(--surface-sunken); border: 1px solid var(--border); color: var(--slate); }
.pastille--faite { color: var(--success); }
.pastille--faite .pastille__point { background: var(--success-dot); }

/* Encarts */
.encart { border-radius: var(--radius-md); padding: 13px 15px; margin-top: 14px; font-size: 13px; line-height: 1.6; }
.encart--neutre { background: var(--surface-sunken); }
.encart--accent { background: var(--violet-soft); }
.encart--attention { border: 1.5px solid #EFDFBE; }

/* Liste d'etapes, l'apparence heritee du simulateur */
.etapes { margin: 0; padding: 0; list-style: none; }
.etape { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.etape > * { min-width: 0; }
.etape:last-child { border-bottom: none; }
.etape__rang { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); flex: none; padding-top: 0; }
.etape__rang--actif { color: var(--ink); font-weight: 700; }
.etape__corps { flex: 1 1 auto; min-width: 0; }
.etape__libelle { font-weight: 600; font-size: 15px; }
.etape__meta { display: flex; gap: 10px; align-items: center; margin-top: 5px; flex-wrap: wrap; }
.etape__duree { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate); white-space: nowrap; flex: none; }
.etape__montant { font-family: var(--font-mono); font-weight: 700; font-size: 16px; white-space: nowrap; flex: none; }

/* Le bloc de droite d'une etape, montant plus lien eventuel. Il se replie sous
   le corps en mobile et revient a droite des 560 px. */
.etape > div:last-child:not(.etape__corps) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.etape--passee .etape__libelle, .etape--passee .etape__montant { color: var(--slate); }

/* Tableaux de journal */
.journal { width: 100%; border-collapse: collapse; }
.journal th { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); text-align: left; font-weight: 400; padding: 9px 0; border-bottom: 1px solid var(--border); }
.journal td { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: baseline; }
.journal tr:last-child td { border-bottom: none; }
.journal__date { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate); white-space: nowrap; padding-right: 14px; }
.journal__auteur { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }

/* Barre de quota */
.jauge { height: 9px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; margin-top: 14px; }
.jauge__part { height: 100%; background: var(--brand-violet); border-radius: 99px; }
.jauge__part--seuil { background: var(--warning-dot); }
.jauge__bornes { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }

/* Entete interne, pour les surfaces Seequency */
.bandeau-interne { background: #231F35; color: #fff; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.bandeau-interne__marque { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.bandeau-interne__etiquette { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #B9B2D4; border: 1px solid #4A4363; border-radius: var(--radius-full); padding: 3px 9px; }

/* Sous 560 px, un bouton isole prend la largeur disponible plutot que de
   deborder avec un libelle long. */
@media (max-width: 559px) {
  .actions .bouton {
    width: 100%;
    white-space: normal;
    height: auto;
    padding: 12px 20px;
    line-height: 1.3;
  }
}

@media (min-width: 560px) {
  .etape { flex-direction: row; align-items: flex-start; gap: 12px; }
  .etape__rang { width: 16px; padding-top: 2px; }
  .etape > div:last-child:not(.etape__corps) { flex: none; }
}

@media (min-width: 720px) {
  body { padding: 40px 24px 64px; }
  .carte__entete, .carte__corps { padding: 24px 28px; }
  .actions { flex-direction: row; justify-content: center; }
}