body {
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 20%, #12aebd 0%, var(--turquoise) 45%, var(--turquoise-fonce) 100%);
  color: var(--blanc);
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 480px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); min-height: 100dvh; }
.ecran { display: none; flex-direction: column; align-items: center; gap: 16px; min-height: calc(100dvh - 44px); justify-content: center; text-align: center; }
.ecran.actif { display: flex; }

.entete { text-align: center; }
.sur-titre { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.25; }
.sur-titre sup { text-transform: lowercase; }
h1 { margin: 2px 0 0; font-size: 64px; font-weight: 700; line-height: .9; letter-spacing: .02em; color: #f4f0e8; }
h2 { margin: 0; font-size: 34px; font-weight: 700; }
.embleme { width: min(74vw, 300px); height: auto; filter: drop-shadow(0 6px 18px rgba(5, 28, 79, .35)); }
.embleme.petit { width: 140px; }
.devise { margin: 0; display: inline-block; background: var(--jaune); color: var(--marine); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; padding: 6px 14px; }
.accroche { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; max-width: 22em; }
.info { margin: 0; font-size: 15px; line-height: 1.4; opacity: .95; }
.info.petit { font-size: 13px; }
.etat { margin: 0; font-size: 20px; font-weight: 600; }

.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 8px; }
.actions.ligne { flex-direction: row; justify-content: center; }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: 999px; font: 600 18px 'Instrument Sans', system-ui, sans-serif; cursor: pointer; }
.bouton.principal { background: var(--rouge); color: var(--blanc); box-shadow: 0 6px 18px rgba(5, 28, 79, .3); width: 100%; max-width: 320px; }
.actions.ligne .bouton { flex: 1; }
.bouton.secondaire { background: rgba(255, 255, 255, .16); color: var(--blanc); border: 2px solid rgba(255, 255, 255, .7); }
.bouton:disabled { opacity: .45; box-shadow: none; }
.bouton:active:not(:disabled) { transform: translateY(1px); }
.lien, .lien-bouton { color: var(--blanc); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 8px; }
.lien-inline { color: inherit; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

.apercu-cadre { width: 100%; background: rgba(5, 28, 79, .25); border-radius: 12px; padding: 8px; }
#apercu { display: block; width: 100%; max-height: 46dvh; object-fit: contain; border-radius: 6px; }
.champ { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.champ span { display: flex; justify-content: space-between; align-items: baseline; }
.champ em { font-style: normal; font-weight: 400; opacity: .85; }
.champ b { font-weight: 500; font-size: 13px; opacity: .85; }
.champ input { width: 100%; min-height: 50px; border-radius: 10px; border: 0; padding: 0 14px; font: 500 17px 'Instrument Sans', system-ui, sans-serif; color: var(--marine); }
.accord { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 15px; line-height: 1.4; width: 100%; }
.accord input { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--rouge); }
.erreur { margin: 0; background: var(--blanc); color: var(--rouge); font-weight: 600; padding: 10px 14px; border-radius: 10px; width: 100%; }

.barre { width: 100%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .25); overflow: hidden; }
#progression { height: 100%; width: 0; background: var(--jaune); transition: width .2s; }

dialog { max-width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 14px; padding: 20px; color: var(--marine); }
dialog::backdrop { background: rgba(5, 28, 79, .6); }
dialog h3 { margin-top: 0; }
dialog p { font-size: 15px; line-height: 1.45; }
dialog .bouton { width: 100%; }