/* Palette A, bleu-vert profond (tranchée le 26/10), police Manrope, téléphone d'abord. */
:root {
  --fond: #F6F8F9; --carte: #FFFFFF; --encre: #12354E; --gris: #52667A; --trait: #DCE5EA;
  --accent: #00746F; --accent-fonce: #00605C; --accent-clair: #E2F1F0; --gris-clair: #E6ECEF; --gris-moyen: #C4CFD6;
  --ambre: #E2B540; --ambre-fond: #FBF4DD; --ambre-encre: #7A5C00; --lien: #5A82B3; --alerte: #C2410C;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; font-weight: 700; }
a:hover { color: var(--accent-fonce); }
button, input { font: inherit; }
.ecran { max-width: 430px; min-height: 100vh; margin: 0 auto; padding: 28px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.etapes { display: flex; gap: 6px; }
.etapes span { flex: 1; height: 4px; border-radius: 2px; background: var(--trait); }
.etapes span.fait { background: var(--accent); }
h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.sous { margin: 0; font-size: 15px; color: var(--gris); line-height: 1.45; }
.centre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
label { font-size: 13px; font-weight: 600; color: var(--gris); }
input[type=email], input[type=password], input[type=text] { height: 54px; border-radius: 14px; border: 1px solid var(--trait);
  background: var(--carte); padding: 0 16px; font-size: 16px; color: var(--encre); width: 100%; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champs { display: flex; flex-direction: column; gap: 10px; }
.vide { flex: 1; }
.bouton { display: flex; align-items: center; justify-content: center; height: 56px; border: 0; border-radius: 16px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; width: 100%; }
.bouton:hover { background: var(--accent-fonce); color: #fff; }
.bouton.discret { background: transparent; color: var(--gris); font-weight: 600; font-size: 15px; height: 44px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.bascule { display: flex; background: var(--gris-clair); border-radius: 14px; padding: 4px; gap: 4px; }
.bascule a { flex: 1; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  color: var(--gris); font-size: 15px; }
.bascule a.choisi { background: var(--carte); color: var(--encre); }
.note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--encre); font-weight: 600; }
.case input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.erreurs { background: #FDEDE6; color: var(--alerte); border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; margin: 0; list-style: none; }
.pays { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 16px; }
.pays b { font-size: 14px; } .pays small { font-size: 12px; color: var(--gris); }
.relie { display: flex; align-items: center; gap: 12px; background: var(--accent-clair); border-radius: 16px; padding: 14px 16px; }
.relie .rond { width: 40px; height: 40px; border-radius: 20px; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; }
.attente { background: var(--ambre-fond); color: var(--ambre-encre); border-radius: 16px; padding: 14px 16px; font-weight: 600; font-size: 14px; }
.texte { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; line-height: 1.6; }
.texte h1 { margin-bottom: 8px; } .texte h2 { font-size: 18px; margin-top: 28px; }
.qr svg { width: 200px; height: 200px; }
code { background: var(--gris-clair); padding: 2px 6px; border-radius: 6px; font-size: 14px; word-break: break-all; }