/* Contrastes vérifiés (WCAG AA) : texte #1b1f2a sur #fbfaf7 ≈ 16:1, bouton blanc sur #1f4e79 ≈ 8,6:1,
   texte secondaire #4a5160 sur #fbfaf7 ≈ 7,9:1. */
:root {
  --fond: #fbfaf7;
  --texte: #1b1f2a;
  --secondaire: #4a5160;
  --accent: #1f4e79;
  --carte: #ffffff;
  --bordure: #d6d3cc;
  --focus: #b3541e;
}

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

html { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.55; }

body { margin: 0; background: var(--fond); color: var(--texte); }

main, footer { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 3rem 0 1rem; }
h2 { font-size: 1.6rem; margin: 3rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }

a { color: var(--accent); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.phrase { font-size: 1.2rem; max-width: 42rem; }
.mention, footer, figcaption { color: var(--secondaire); }

.grille { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grille > li { background: var(--carte); border: 1px solid var(--bordure); border-radius: 0.5rem; padding: 1.25rem; }

figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 0.5rem; border: 1px solid var(--bordure); }
figcaption { margin-top: 0.4rem; font-size: 0.95rem; }
.mention-ia { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border: 1px solid var(--secondaire);
  border-radius: 0.25rem; font-size: 0.85rem; }

.offre { display: flex; flex-direction: column; }
.offre p { margin: 0.25rem 0; }
.prix { font-size: 1.4rem; font-weight: 700; }

.bouton, button { display: inline-block; margin-top: auto; padding: 0.7rem 1.1rem; border: 0; border-radius: 0.4rem;
  background: var(--accent); color: #ffffff; font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  cursor: pointer; }
.offre .bouton { margin-top: 1rem; }
button:disabled { background: var(--secondaire); cursor: not-allowed; }

details { border-bottom: 1px solid var(--bordure); padding: 0.75rem 0; }
summary { cursor: pointer; font-weight: 600; }

form fieldset { border: 0; padding: 0; margin: 0; }
.champ { margin: 1.25rem 0; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.champ.case { display: flex; gap: 0.5rem; align-items: flex-start; }
.champ.case label { font-weight: 400; margin: 0; }
input[type="email"], select { width: 100%; max-width: 28rem; padding: 0.55rem; font: inherit;
  border: 1px solid var(--secondaire); border-radius: 0.3rem; background: var(--carte); color: var(--texte); }
.choix { margin: 1.25rem 0; }
.choix legend { font-weight: 600; margin-bottom: 0.3rem; }
.choix div { margin: 0.3rem 0; }
.avertissement { border-left: 4px solid var(--focus); padding: 0.5rem 0.75rem; background: var(--carte); }
.remise { font-weight: 600; }

footer { margin-top: 4rem; padding-top: 1.5rem; padding-bottom: 2rem; border-top: 1px solid var(--bordure); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.visuellement-masque, .piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.evitement { position: absolute; left: -999rem; }
.evitement:focus { left: 1rem; top: 1rem; padding: 0.5rem; background: var(--carte); }

.brouillon { border: 2px dashed var(--focus); padding: 0.75rem; }