:root {
  --ciel: #38b6f0;
  --ciel-fonce: #0e86c9;
  --marine: #0b3a5c;
  --jaune: #ffd02b;
  --jaune-fonce: #e0a800;
  --vert: #5ccf5a;
  --vert-fonce: #34a83a;
  --corail: #ff7a59;
  --texte: #16324a;
  --texte-doux: #46617a;
  --fond: #f2faff;
  --fond-doux: #ddf1fc;
  --carte: #ffffff;
  --bord: #16324a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fond: #f2faff; }
}
:root[data-theme="dark"] { --fond: #f2faff; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Nunito", system-ui, sans-serif; color: var(--texte); background: var(--fond); line-height: 1.6; overflow-x: hidden; }
h1, h2, h3 { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--marine); }
h2 span { color: var(--ciel-fonce); }
a { color: var(--ciel-fonce); }
code { background: rgba(14,134,201,.12); padding: .1em .45em; border-radius: 6px; font-weight: 700; }
.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.etroit { max-width: 780px; }
section { padding: 70px 0; }
.fond-doux { background: var(--fond-doux); }
.intro { text-align: center; color: var(--texte-doux); margin: -.4em auto 2.2em; max-width: 600px; font-size: 1.1rem; }

/* boutons "jeu" : bord epais + ombre pleine */
.btn { display: inline-block; padding: 14px 28px; border-radius: 16px; font: 800 1.1rem "Nunito", sans-serif; text-decoration: none;
  border: 3px solid var(--bord); box-shadow: 0 5px 0 var(--bord); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--bord); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--bord); }
.btn-jaune { background: var(--jaune); color: var(--bord); }
.btn-blanc { background: #fff; color: var(--bord); }

/* navigation */
.nav { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 16px; background: #fff; border-bottom: 4px solid var(--bord); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marine); font: 400 1.5rem "Lilita One", sans-serif; }
.marque img { width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--bord); }
.marque b { color: var(--ciel-fonce); font-weight: 400; }
.liens { display: flex; align-items: center; gap: 18px; }
.liens a { color: var(--marine); text-decoration: none; font-weight: 800; }
.liens a:hover { color: var(--ciel-fonce); }
.btn-mini { background: var(--jaune); padding: 6px 14px; border-radius: 12px; border: 3px solid var(--bord); box-shadow: 0 3px 0 var(--bord); }
@media (max-width: 720px) { .liens a:not(.btn-mini) { display: none; } }

/* hero */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; text-align: center; color: #fff; padding: 80px 0 120px; overflow: hidden; }
.hero-fond { position: absolute; inset: -20px; background: url("assets/hero.webp") center 30% / cover no-repeat; animation: zoom 30s ease-in-out infinite alternate; }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,58,92,.35) 0%, rgba(11,58,92,.55) 55%, rgba(14,134,201,.75) 100%); }
@keyframes zoom { to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-fond { animation: none; } }
.hero-contenu { position: relative; z-index: 2; }
.badge-haut { display: inline-block; background: var(--vert); color: #fff; font-weight: 800; padding: 6px 16px; border-radius: 999px; border: 3px solid var(--bord); margin: 0 0 14px; transform: rotate(-2deg); }
.hero h1 { font-size: clamp(3.4rem, 13vw, 7.5rem); margin: 0; color: #fff;
  -webkit-text-stroke: 3px var(--bord); paint-order: stroke fill; text-shadow: 0 7px 0 var(--bord); }
.hero h1 span { color: var(--jaune); }
.accroche { font-size: clamp(1.1rem, 2.6vw, 1.35rem); font-weight: 700; max-width: 640px; margin: .7em auto 1.6em; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.adresse { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px;
  background: #fff; color: var(--bord); border: 3px solid var(--bord); box-shadow: 0 5px 0 var(--bord); border-radius: 18px; padding: 10px 10px 10px 18px; }
.adresse .lib { font-weight: 800; font-size: .85rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .05em; }
.adresse code { background: none; font-size: 1.35rem; color: var(--marine); padding: 0; }
.btn-copier { border: 3px solid var(--bord); background: var(--jaune); color: var(--bord); font: 800 .95rem "Nunito", sans-serif; padding: 7px 14px; border-radius: 12px; cursor: pointer; }
.btn-copier.ok { background: var(--vert); color: #fff; }
.boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.vague { position: absolute; left: 0; right: 0; bottom: -2px; height: 80px; z-index: 3;
  background: var(--jaune); clip-path: polygon(0 55%, 8% 45%, 18% 52%, 30% 38%, 42% 50%, 55% 36%, 68% 48%, 80% 35%, 91% 47%, 100% 40%, 100% 100%, 0 100%); }

/* bande de pastilles */
.pastilles-bande { background: var(--jaune); padding: 6px 0 34px; border-bottom: 4px solid var(--bord); }
.pastilles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pastille { background: #fff; border: 3px solid var(--bord); border-radius: 18px; box-shadow: 0 5px 0 var(--bord); text-align: center; padding: 12px 8px; }
.pastille b { display: block; font: 400 1.7rem "Lilita One", sans-serif; color: var(--ciel-fonce); line-height: 1.1; }
.pastille span { font-weight: 800; color: var(--texte-doux); font-size: .9rem; }
.pastille:nth-child(odd) { transform: rotate(-1.5deg); }
.pastille:nth-child(even) { transform: rotate(1.5deg); }

/* statut */
.statut { padding: 34px 0 0; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tuile { background: #fff; border: 3px solid var(--bord); box-shadow: 0 5px 0 var(--bord); border-radius: 18px; padding: 16px 22px; }
.tuile .titre { margin: 0 0 4px; font-weight: 800; color: var(--texte-doux); }
.tuile .chiffre { margin: 6px 0 0; }
.tuile .chiffre b { font: 400 2.2rem "Lilita One", sans-serif; color: var(--ciel-fonce); }
.tuile .sous { margin: 0; color: var(--texte-doux); }
.etat { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.etat i { width: 12px; height: 12px; border-radius: 50%; background: #9aa9b7; border: 2px solid var(--bord); }
.etat.on i { background: var(--vert); }
.etat.off i { background: #e5484d; }

/* etapes */
.etapes { list-style: none; padding: 0; margin: 2.4em 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 22px; }
.etapes li { background: #fff; border: 3px solid var(--bord); box-shadow: 0 6px 0 var(--bord); border-radius: 22px; padding: 34px 22px 22px; position: relative; }
.num { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--corail); color: #fff;
  display: grid; place-items: center; font: 400 1.6rem "Lilita One", sans-serif; border: 3px solid var(--bord); }
.etapes h3 { text-align: center; font-size: 1.5rem; color: var(--marine); }
.etapes p { color: var(--texte-doux); margin: 0 0 .6em; text-align: center; }
.etapes .lien { display: block; text-align: center; font-weight: 800; }

/* reglages sur fond d'image floute */
.fond-image { position: relative; background: linear-gradient(rgba(14,134,201,.88), rgba(11,58,92,.92)), url("assets/galerie1.webp") center / cover fixed; }
.fond-image h2, .fond-image h2 span { color: #fff; }
.fond-image h2 span { color: var(--jaune); }
.fond-image .intro { color: #d7ecfa; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.carte { background: #fff; border: 3px solid var(--bord); box-shadow: 0 6px 0 var(--bord); border-radius: 20px; padding: 18px 20px; transition: transform .15s; }
.carte:hover { transform: translateY(-4px) rotate(-1deg); }
.carte .icone { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.7rem; background: var(--fond-doux); border: 3px solid var(--bord); border-radius: 14px; }
.carte h3 { margin: .5em 0 .15em; font-size: 1.35rem; color: var(--marine); }
.carte p { margin: 0; color: var(--texte-doux); }

/* galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 2em; }
.galerie button { padding: 0; border: 3px solid var(--bord); box-shadow: 0 6px 0 var(--bord); border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--bord); aspect-ratio: 16 / 9; transition: transform .15s; }
.galerie button:hover { transform: translateY(-4px) scale(1.02); }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visionneuse { position: fixed; inset: 0; z-index: 50; background: rgba(11,58,92,.92); display: grid; place-items: center; padding: 16px; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 88vh; border: 4px solid #fff; border-radius: 16px; }
.fermer { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--bord); background: var(--jaune); font: 800 1.2rem "Nunito", sans-serif; cursor: pointer; }

/* regles */
.regles { list-style: none; padding: 0; margin: 2em 0 1.4em; display: grid; gap: 12px; }
.regles li { display: flex; gap: 14px; align-items: center; background: #fff; border: 3px solid var(--bord); border-radius: 16px; padding: 12px 16px; }
.regles li > span { font-size: 1.6rem; }
.note { text-align: center; color: var(--texte-doux); font-weight: 700; }

/* bande finale */
.bande { background: var(--vert); padding: 50px 0; border-top: 4px solid var(--bord); border-bottom: 4px solid var(--bord); }
.bande .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.bande h2 { text-align: left; color: #fff; -webkit-text-stroke: 2px var(--bord); paint-order: stroke fill; text-shadow: 0 4px 0 var(--bord); margin-bottom: .2em; }
.bande p { margin: 0; color: var(--bord); font-weight: 800; }

.anglais { padding: 28px 0; text-align: center; }
.anglais p { margin: 0; color: var(--texte-doux); }
footer { text-align: center; padding: 26px 16px; font-size: .85rem; color: var(--texte-doux); background: var(--fond-doux); }
footer p { margin: .3em 0; }