/* Classe de neige — feuille unique, pensée d'abord pour le téléphone. */
:root {
  color-scheme: light;
  --encre: #13243a;
  --encre-douce: #4a5a70;
  --neige: #f5f7fa;
  --carte: #ffffff;
  --bord: #d9e0ea;
  --glacier: #1f5fbf;
  --glacier-fonce: #174a96;
  --glacier-pale: #e7effb;
  --sapin: #1e7a4f;
  --sapin-pale: #e3f3ea;
  --ambre: #a35c00;
  --ambre-pale: #fdf1dd;
  --rouge: #b42318;
  --rouge-pale: #fdecea;
  --rayon: 12px;
  --ombre: 0 1px 2px rgb(19 36 58 / 6%), 0 4px 16px rgb(19 36 58 / 6%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--encre);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--neige); }
a { color: var(--glacier); }
img { max-width: 100%; }

.entete {
  background: var(--encre);
  color: #fff;
  padding: 14px 16px;
}
.entete__in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.entete__titre { font-weight: 700; color: #fff; text-decoration: none; flex: 1; line-height: 1.2; }
.entete__titre small { display: block; font-weight: 400; opacity: .75; font-size: .8rem; }
.entete form { margin: 0; }
.entete button { background: none; border: 1px solid rgb(255 255 255 / 40%); color: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.entete nav a { color: #fff; font-size: .9rem; margin-right: 8px; }

main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 4px 0 12px; }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 0 0 6px; }
.intro { color: var(--encre-douce); margin-top: 0; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px;
  margin: 12px 0;
}
.carte--accent { border-left: 4px solid var(--glacier); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--glacier); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--glacier-fonce); }
.bouton--large { width: 100%; }
.bouton--clair { background: var(--carte); color: var(--glacier); border-color: var(--bord); }
.bouton--clair:hover { background: var(--glacier-pale); }
.bouton--petit { min-height: 38px; padding: 6px 12px; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }