:root {
  --bg: #0E0F14;
  --ink: #F2F0EA;
  --muted: #A9A6A0;
  --amber: #F7A41D;
  --rust: #B83A0A;
  --shadow: #C2310E;
  --dark: #1A1A1A;
  --error: #FF8A65;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #1B1C24 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 16px 48px;
}
main { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
a { color: var(--muted); }
a:hover { color: var(--amber); }
code { font-family: ui-monospace, "JetBrains Mono", monospace; color: var(--amber); }
footer { margin-top: 40px; color: var(--muted); font-size: 13px; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Carte du fact (proportions du visuel 1200×1200) */
.card { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fact {
  position: absolute; left: 13.33%; top: 53.75%; width: 73.33%; height: 27.5%;
  padding: 0 1.7cqw;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2cqw;
  text-align: center; transform: rotate(-4deg);
}
.fact p { margin: 0; font-weight: 900; line-height: 1.1; letter-spacing: -.05cqw; text-wrap: balance; font-size: 4.6cqw; }
.fact .a { color: var(--dark); }
.fact .b { color: var(--rust); }
.tag {
  position: absolute; right: 10.4%; top: 79.2%; margin: 0;
  padding: .5cqw 1.8cqw; transform: rotate(-5deg);
  background: var(--amber); color: var(--dark);
  border: .42cqw solid var(--dark); box-shadow: .5cqw .5cqw 0 var(--shadow);
  font-size: 3cqw; font-weight: 900; font-style: italic; text-transform: uppercase;
}

/* Boutons BD */
.btn {
  font: inherit; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .5px;
  font-size: 18px; padding: 12px 28px; min-height: 48px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--amber); color: var(--dark);
  border: 4px solid var(--dark); box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-2deg); transition: transform .1s;
}
.btn:hover { color: var(--dark); transform: rotate(-2deg) translate(-1px, -1px); box-shadow: 6px 6px 0 var(--shadow); }
.btn:active { transform: rotate(-2deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--shadow); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.btn:disabled { opacity: .6; cursor: wait; }

/* Accueil */
.intro { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.intro h1 { margin: 0; font-size: 22px; font-weight: 800; }
.intro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* Page de proposition */
main.large { max-width: 1100px; }
.banner { width: 100%; max-width: 760px; height: auto; display: block; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.retour { align-self: flex-start; font-size: 14px; }
.propose-layout { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.propose { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.propose .consigne { margin: 0; color: var(--muted); line-height: 1.5; text-align: center; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 800; font-size: 15px; }
.champ .aide { color: var(--muted); font-size: 13px; }
.champ input[type=text] {
  font: inherit; font-size: 16px; font-weight: 600; padding: 12px 14px; width: 100%;
  background: #FFF8E7; color: var(--dark);
  border: 3px solid var(--dark); box-shadow: 4px 4px 0 var(--shadow); border-radius: 0;
}
.champ input[type=text]::placeholder { color: #8C8478; font-weight: 400; }
.champ input[type=text]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.champ label.regles { font-weight: 400; }
.regles { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.regles input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--amber); }
.propose .btn { align-self: center; margin-top: 6px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.statut { margin: 0; min-height: 1.4em; text-align: center; font-weight: 800; }
.statut.ok { color: var(--amber); }
.statut.erreur { color: var(--error); }
.alt { margin: 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Erreurs façon Angular : un champ n'est signalé qu'une fois quitté (.touche), ou après une tentative d'envoi (.soumis) */
.erreur-champ { display: none; margin: 0; color: var(--error); font-size: 14px; font-weight: 700; }
.champ input.touche:invalid ~ .erreur-champ,
.soumis .champ input:invalid ~ .erreur-champ,
.champ .regles:has(input.touche:invalid) ~ .erreur-champ,
.soumis .champ .regles:has(input:invalid) ~ .erreur-champ { display: block; }
.champ input[type=text].touche:invalid,
.soumis .champ input[type=text]:invalid { border-color: var(--error); box-shadow: 4px 4px 0 var(--error); }

/* Remerciement, à la place du formulaire après l'envoi */
.merci { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 8px 0; }
.merci:focus { outline: none; }
.merci h2 { margin: 0; font-size: 32px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--amber); text-shadow: 3px 3px 0 var(--shadow); transform: rotate(-2deg); }
.merci p { margin: 0; color: var(--muted); line-height: 1.5; }
.merci .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 8px; }
.btn.secondaire { background: transparent; color: var(--amber); border-color: var(--amber); box-shadow: 5px 5px 0 var(--dark); }
.btn.secondaire:hover { color: var(--amber); box-shadow: 6px 6px 0 var(--dark); }

/* Aperçu : texte d'exemple en grisé tant que le champ est vide */
.apercu .fact .vide { opacity: .4; }

/* Mobile : pendant la saisie, l'aperçu devient une pancarte compacte qui reste en haut de l'écran.
   Après l'envoi (.envoye), la carte complète revient. */
@media (max-width: 959px) {
  .propose-layout:not(.envoye) .apercu { position: sticky; top: 0; z-index: 2; padding: 10px 6px 14px; margin: 0 -6px; background: var(--bg); }
  .propose-layout:not(.envoye) .apercu .card {
    aspect-ratio: auto; overflow: visible; border-radius: 0;
    background: #FFF8E7; border: 3px solid var(--dark); box-shadow: 4px 4px 0 var(--shadow);
    transform: rotate(-1.5deg);
  }
  .propose-layout:not(.envoye) .apercu .card img, .propose-layout:not(.envoye) .apercu .tag { display: none; }
  .propose-layout:not(.envoye) .apercu .fact { position: static; width: auto; height: auto; padding: 10px 14px; gap: 6px; transform: none; }
  .propose-layout:not(.envoye) .apercu .fact p { font-size: 15px; }
}

/* Grand écran : carte à gauche qui suit le défilement, formulaire à droite */
@media (min-width: 960px) {
  .propose-layout { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .propose, .merci { grid-column: 2; grid-row: 1; }
  .apercu { grid-column: 1; grid-row: 1; position: sticky; top: 24px; }
}