:root {
    --encre: #17314D; --bleu: #2E6DA4; --papier: #FBF9F5; --fond: #E9E9E6;
    --bord: #D5D6D2; --bord-clair: #E4E6E4; --bord-champ: #C3CBD4;
    --texte: #1B2331; --texte-2: #3F4855; --gris: #74797A;
    --jaune-fond: #F5E7C8; --jaune-bord: #A87B24; --jaune-sombre: #6E4E12;
    --bleu-fond: #DCE7F2; --rouge-bord: #B8563F; --rouge-fond: #F6E4DE;
    --sans: 'Libre Franklin', Helvetica, Arial, sans-serif;
    --serif: 'Newsreader', Georgia, serif;
    --mono: 'IBM Plex Mono', 'Courier New', monospace;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--fond); font-family: var(--sans); color: var(--texte); }

  .app { min-height: 100vh; display: flex; flex-direction: column; background: var(--papier); }

  /* Bandeau pilote — permanent, non masquable */
  .bandeau { background: var(--encre); color: var(--papier); font-family: var(--mono); font-size: 12px;
             padding: 9px 24px; display: flex; gap: 12px; align-items: center; }
  .bandeau .tag { background: var(--bleu); padding: 2px 7px; font-weight: 500; }

  /* En-tête applicatif */
  .entete { padding: 14px 24px; border-bottom: 1px solid var(--bord-clair); background: #fff;
            display: flex; align-items: center; justify-content: space-between; }
  .logo { display: flex; align-items: center; gap: 10px; }
  .logo .carre { width: 26px; height: 26px; background: var(--encre); border-radius: 3px; }
  .logo span { font-family: var(--mono); font-size: 13px; color: var(--gris); }
  .entete .droite { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--texte-2); }
  .entete .droite .nom { font-weight: 600; }
  .entete a { color: var(--bleu); text-decoration: none; }

  /* Pied de page — permanent */
  .pied { border-top: 1px solid var(--bord-clair); background: #fff; padding: 12px 24px;
          display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
          font-size: 12px; color: var(--gris); flex-wrap: wrap; }
  .pied .version { font-family: var(--mono); font-size: 11px; }
  .pied a { color: var(--bleu); }

  main { flex: 1; display: flex; flex-direction: column; }
  .ecran { display: none; flex: 1; }
  .ecran.actif { display: flex; flex-direction: column; }
  .centre { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 24px; }

  /* Boutons */
  .btn { display: inline-block; padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer;
         font-family: var(--sans); font-size: 14px; font-weight: 600; text-align: center; }
  .btn-plein { background: var(--encre); color: var(--papier); }
  .btn-plein:hover { background: #1B2331; }
  .btn-plein:disabled { background: #9AA4AF; cursor: not-allowed; }
  .btn-contour { background: #fff; color: var(--texte); border: 1px solid var(--bord-champ); }
  .btn-contour:hover { background: #F1F3F5; }

  /* Formulaires */
  label { font-size: 13px; font-weight: 600; color: var(--texte); }
  input[type=text], input[type=password] { border: 1px solid var(--bord-champ); border-radius: 4px;
    background: #fff; padding: 11px 12px; font-size: 14px; font-family: var(--sans); color: var(--texte); width: 100%; }

  /* E1 */
  .carte-connexion { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 28px; }
  .carte-connexion h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
  .carte-connexion .sous { font-size: 14px; line-height: 1.55; color: var(--texte-2); }
  .champ { display: flex; flex-direction: column; gap: 6px; }
  .note-grise { font-size: 12px; color: var(--gris); line-height: 1.5; }

  .carte-conditions { width: 560px; max-width: 100%; background: #fff; border: 1px solid var(--bord); display: flex; flex-direction: column; }
  .carte-conditions .tete { padding: 22px 28px; border-bottom: 1px solid var(--bord-clair); }
  .carte-conditions .tete h1 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
  .carte-conditions .tete div { font-size: 13px; color: var(--gris); }
  .conditions-texte { padding: 24px 28px; font-family: var(--serif); font-size: 15px; line-height: 1.65;
                      color: #232B3A; max-height: 300px; overflow-y: auto; }
  .conditions-texte p { margin: 0 0 14px; }
  .carte-conditions .pied-carte { padding: 18px 28px; border-top: 1px solid var(--bord-clair);
    display: flex; flex-direction: column; gap: 14px; }
  .case-ligne { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5;
                color: var(--texte); cursor: pointer; }
  .case-ligne input { margin-top: 2px; accent-color: var(--encre); width: 16px; height: 16px; flex: none; }
  .erreur-inline { border: 1px solid var(--rouge-bord); background: var(--rouge-fond); border-radius: 4px;
                   padding: 10px 12px; font-size: 13px; color: var(--texte); display: none; }
  .erreur-inline.visible { display: block; }
  .lien-maquette { font-family: var(--mono); font-size: 11px; color: var(--gris); }
  .lien-maquette a { color: var(--bleu); cursor: pointer; }

  /* S1 */
  .colonne-saisie { width: 760px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
  .colonne-saisie h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
  .colonne-saisie .sous { font-size: 14px; color: var(--texte-2); }
  .zone-notes { background: #fff; border: 1px solid var(--bord-champ); border-radius: 4px; display: flex; flex-direction: column; }
  .zone-notes textarea { border: none; outline: none; resize: vertical; padding: 20px; min-height: 260px;
    font-family: var(--serif); font-size: 15px; line-height: 1.65; color: #232B3A; background: transparent; }
  .zone-notes textarea::placeholder { color: var(--gris); }
  .depot { margin: 0 20px 20px; border: 1px dashed var(--bord-champ); border-radius: 4px; padding: 14px;
           display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--gris); }
  .depot .ext { font-family: var(--mono); font-size: 11px; background: #E4E9EE; color: var(--encre); padding: 2px 6px; }
  .barre-generer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .barre-generer .infos { display: flex; flex-direction: column; gap: 4px; }
  .barre-generer .limite { font-family: var(--mono); font-size: 11px; color: var(--gris); }
  .barre-generer .rassure { font-size: 13px; color: var(--texte-2); }

  /* Bannières d'erreur (affichées sur S1) */
  .bannieres { display: flex; flex-direction: column; gap: 10px; }
  .banniere { border-radius: 4px; padding: 14px 16px; display: none; align-items: center;
              justify-content: space-between; gap: 16px; font-size: 14px; }
  .banniere.visible { display: flex; }
  .banniere-echec { border: 1px solid var(--rouge-bord); background: var(--rouge-fond); }
  .banniere-occupe { border: 1px solid var(--jaune-bord); background: var(--jaune-fond); }
  .banniere-session { border: 1px solid var(--bleu); background: var(--bleu-fond); }
  .banniere .btn { padding: 8px 16px; font-size: 13px; flex: none; }

  /* S2 */
  .colonne-progression { width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 28px; }
  .colonne-progression h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
  .colonne-progression .sous { font-size: 14px; color: var(--texte-2); }
  .etape { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--bord-clair); }
  .etape:last-child { border-bottom: none; }
  .etape .puce { width: 14px; height: 14px; border-radius: 2px; border: 1px solid var(--bord-champ); background: transparent; flex: none; }
  .etape .lib { font-size: 15px; color: var(--gris); }
  .etape .statut { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--gris); }
  .etape.encours .puce { background: var(--bleu); border-color: var(--bleu); }
  .etape.encours .lib { font-weight: 600; color: var(--encre); }
  .etape.encours .statut { color: var(--bleu); }
  .etape.fait .puce { background: var(--encre); border-color: var(--encre); }
  .etape.fait .lib { color: var(--texte); }
  .ligne-annuler { display: flex; align-items: center; gap: 14px; }

  /* S3 */
  #ecran-s3 .barre-actions { display: flex; align-items: center; gap: 18px; }
  .legende { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--texte-2); }
  .legende .pastille { width: 12px; height: 12px; display: inline-block; }
  .pastille-completer { background: var(--jaune-fond); border-bottom: 2px solid var(--jaune-bord); }
  .pastille-reviser { background: var(--bleu-fond); border-bottom: 2px solid var(--bleu); }
  .deux-zones { flex: 1; display: flex; align-items: stretch; min-height: 0; }
  .zone-lettre { flex: 1; background: var(--papier); padding: 44px 56px; overflow-y: auto;
                 border-right: 1px solid var(--bord); }
  .zone-lettre .surtitre { font-family: var(--mono); font-size: 11px; color: var(--gris);
                           letter-spacing: 0.08em; margin-bottom: 18px; }
  .lettre { font-family: var(--serif); font-size: 16px; line-height: 1.75; color: #232B3A; max-width: 68ch; outline: none; }
  .lettre p { margin: 0 0 16px; }
  .lettre mark { padding: 1px 3px; color: inherit; }
  mark.a-completer { background: var(--jaune-fond); border-bottom: 2px solid var(--jaune-bord); font-style: italic; }
  mark.a-reviser { background: var(--bleu-fond); border-bottom: 2px solid var(--bleu); }
  mark.flash { outline: 2px solid var(--encre); }

  /* Panneau qualité — jamais copié (user-select none + hors du flux de copie) */
  .panneau { width: 360px; flex: none; background: #fff; display: flex; flex-direction: column;
             overflow-y: auto; user-select: none; }
  .panneau .tete { padding: 18px 22px; border-bottom: 1px solid var(--bord-clair); }
  .panneau .tete .titre { font-size: 16px; font-weight: 700; color: var(--encre); }
  .panneau .tete .sous { font-family: var(--mono); font-size: 11px; color: var(--gris); }
  .note-caducite { margin: 16px 22px 0; background: #E4E9EE; border-radius: 4px; padding: 12px 14px;
                   font-size: 12px; line-height: 1.55; color: var(--encre); display: none; }
  .note-caducite.visible { display: block; }
  .bloc-nc { margin: 16px 22px 0; border: 1px solid var(--jaune-bord); border-radius: 4px; overflow: hidden; display: none; }
  .bloc-nc.visible { display: block; }
  .bloc-nc .tete-nc { background: var(--jaune-fond); padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--jaune-sombre); }
  .bloc-nc .corps-nc { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
  .panneau .section { padding: 18px 22px; border-bottom: 1px solid var(--bord-clair); }
  .panneau .section:last-child { border-bottom: none; }
  .panneau .section-titre { font-size: 12px; font-weight: 600; color: var(--gris); letter-spacing: 0.06em; margin-bottom: 10px; }
  .verif-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; }
  .verif-ligne .compte { font-family: var(--mono); font-size: 11px; color: var(--gris); }
  .point { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--bord-clair); }
  .point:last-child { border-bottom: none; }
  .point .titre-point { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
  .point .pastille { width: 10px; height: 10px; flex: none; }
  .point .detail { font-size: 12px; line-height: 1.55; color: var(--texte-2); }
  .point a { font-size: 12px; color: var(--bleu); text-decoration: none; font-weight: 600; cursor: pointer; }
  .panneau .rappel { font-size: 12px; line-height: 1.55; color: var(--gris); padding-top: 6px; }

  /* S4 */
  .carte-copie { width: 520px; max-width: 100%; background: #fff; border: 1px solid var(--bord); display: flex; flex-direction: column; }
  .carte-copie .tete { padding: 26px 30px; border-bottom: 1px solid var(--bord-clair); }
  .carte-copie .titre-ligne { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .carte-copie .coche { width: 22px; height: 22px; background: var(--encre); border-radius: 3px; color: var(--papier);
                        display: flex; align-items: center; justify-content: center; font-size: 13px; }
  .carte-copie h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--encre); }
  .carte-copie .sous { font-size: 14px; line-height: 1.55; color: var(--texte-2); }
  .carte-copie .mention { padding: 16px 30px; border-bottom: 1px solid var(--bord-clair); }
  .carte-copie .mention .etiquette { font-family: var(--mono); font-size: 11px; color: var(--gris); display: block; margin-bottom: 4px; }
  .carte-copie .mention .texte { font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--texte-2); }
  .carte-copie .actions { padding: 20px 30px; display: flex; align-items: center; gap: 14px; }

  /* Barre de scénarios de la maquette (outil de démonstration, pas un écran produit) */
  .scenarios { position: fixed; right: 16px; bottom: 16px; background: var(--encre); color: var(--papier);
               border-radius: 6px; padding: 12px 14px; font-size: 12px; z-index: 50; max-width: 280px;
               box-shadow: 0 4px 16px rgba(23,49,77,0.35); }
  .scenarios .titre { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: #9FB3C8; margin-bottom: 8px; }
  .scenarios .grille { display: flex; flex-wrap: wrap; gap: 6px; }
  .scenarios button { background: #24466B; color: var(--papier); border: none; border-radius: 3px;
                      padding: 6px 9px; font-size: 11px; font-family: var(--sans); cursor: pointer; }
  .scenarios button:hover { background: var(--bleu); }
  .scenarios button.actif { background: var(--bleu); font-weight: 600; }
  .scenarios .repli { background: none; padding: 2px 4px; float: right; margin-top: -2px; }

  @media (max-width: 900px) {
    .deux-zones { flex-direction: column; }
    .zone-lettre { border-right: none; border-bottom: 1px solid var(--bord); padding: 28px 24px; }
    .panneau { width: 100%; }
    .zone-lettre, .panneau { overflow-y: visible; }
  }

/* ---- ajouts SPA (hors maquette) ---- */
.lien-dev { border: 1px dashed var(--bord-champ); background: #fff; border-radius: 4px;
            padding: 10px 12px; font-family: var(--mono); font-size: 11px; color: var(--gris);
            word-break: break-all; }
.lien-dev a { color: var(--bleu); }
.banniere-info { border: 1px solid var(--bleu); background: var(--bleu-fond); }
.scenarios .note { font-size: 10px; color: #9FB3C8; margin-top: 6px; font-family: var(--mono); }

/* ---- bande d'aide « Comment ça marche » (S1) ---- */
.lien-aide { font-size: 13px; color: var(--bleu); text-decoration: none; font-weight: 600;
             cursor: pointer; white-space: nowrap; flex: none; }
.lien-aide:hover { text-decoration: underline; }

.aide-process { position: absolute; inset: 0; z-index: 10; display: none; flex-direction: column;
                background: var(--papier); border-radius: 4px; overflow-y: auto;
                font-family: var(--sans); box-shadow: inset 0 0 0 1px var(--bord-champ); }
.aide-process.visible { display: flex; }
.aide-process .tete-aide { position: sticky; top: 0; background: #fff; padding: 13px 22px;
  border-bottom: 1px solid var(--bord-clair); border-radius: 4px 4px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aide-process .tete-aide .titre { font-size: 15px; font-weight: 700; color: var(--encre); }
.aide-process .fermer { border: none; background: none; cursor: pointer; color: var(--gris);
  font-size: 15px; line-height: 1; padding: 4px 8px; border-radius: 3px; font-family: var(--sans); }
.aide-process .fermer:hover { background: #EDEFF1; color: var(--encre); }
.aide-process ol { margin: 0; padding: 16px 22px 4px; list-style: none; counter-reset: etape; }
.aide-process li { counter-increment: etape; display: flex; gap: 12px; padding: 7px 0;
  font-size: 14px; line-height: 1.6; color: var(--texte-2); }
.aide-process li::before { content: counter(etape); flex: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--encre); color: var(--papier); font-family: var(--mono);
  font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.aide-process li strong { color: var(--texte); font-weight: 600; }
.aide-process .note-fin { padding: 4px 22px 20px 56px; font-size: 12px; line-height: 1.55;
  color: var(--gris); }