/* chonchon.org : pages statiques (CSP stricte ; un seul script, celui du carrousel, servi par le site). */
:root {
  --fond: #fdf8ee; --carte: #ffffff; --texte: #23313a; --discret: #5b6b74;
  --bleu: #07566d; --bord: #e4dccb; --accent: #f2b544;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #14232a; --carte: #1c2f37; --texte: #eef3f4; --discret: #a9bac1; --bleu: #8fd3e6; --bord: #2c434d; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--bleu); }
.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem;
  max-width: 46rem; margin: 0 auto; padding: 1rem 16px .4rem;
}
.marque { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.2rem; color: var(--texte); text-decoration: none; }
.marque img { width: 34px; height: 34px; }
/* En-tête : « Jouer » à côté de la marque, « Espace parents » en bouton à droite. */
.bouton.bouton-entete { padding: .45rem 1rem; font-size: .95rem; }
.bouton.bouton-entete.parents { margin-left: auto; }
.bouton.jaune { background: var(--accent); color: #3a2a00; }
/* Téléphone : le logo seul, pour garder l'en-tête sur une ligne (le nom est dans la page). */
@media (max-width: 400px) {
  .marque-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .entete { gap: .4rem .6rem; }
  .bouton.bouton-entete { padding: .4rem .8rem; font-size: .9rem; }
}
main { max-width: 46rem; margin: 0 auto; padding: .5rem 16px 2.5rem; }
h1 { font-size: 1.7rem; line-height: 1.25; margin: .8rem 0 .4rem; }
h2 { font-size: 1.2rem; margin: 1.8rem 0 .4rem; }
p, ul, dl { margin: .5rem 0; }
.discret { color: var(--discret); font-size: .92rem; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; }
.a-completer { background: #fff3d1; color: #6b4b00; border-radius: 4px; padding: 0 .3rem; }
@media (prefers-color-scheme: dark) { .a-completer { background: #4a3b10; color: #ffe39a; } }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--bord); }
.tableau { overflow-x: auto; }
.accueil { text-align: center; }
.accueil img { width: 120px; height: auto; }
.beta { display: inline-block; margin: .6rem auto 0; padding: .4rem .9rem; border-radius: 12px; background: #fff3d1; color: #6b4b00; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .beta { background: #4a3b10; color: #ffe39a; } .beta a { color: #ffe39a; } }
.presentation { border-top: 1px solid var(--bord); margin-top: 1rem; }
.presentation ul { padding-left: 1.2rem; }
.presentation li { margin: .35rem 0; }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.4rem 0; }
.bouton {
  display: inline-block; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  background: var(--bleu); color: #fff;
}
@media (prefers-color-scheme: dark) { .bouton { color: #10262e; } }
.bouton.secondaire { background: transparent; color: var(--bleu); border: 2px solid var(--bleu); }
/* Pied : les liens d'information d'abord, plus grands et soulignés ; puis les mentions, plus petites. */
.pied { max-width: 46rem; margin: 0 auto; padding: 1rem 16px 2rem; border-top: 1px solid var(--bord); font-size: .95rem; }
.pied p { margin: .2rem 0; overflow-wrap: anywhere; }
.pied .discret { font-size: .82rem; }
.pied .discret a { text-decoration: none; }
.pied .discret a:hover { text-decoration: underline; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .4rem; }
.pied-liens a { white-space: nowrap; }
.pied-liens a[aria-current="page"] { font-weight: 700; }
@media (max-width: 400px) {
  .pied-liens { gap: .2rem .9rem; }
  .pied-liens .long { display: none; }
  .pied { font-size: .9rem; }
  .pied .discret { font-size: .78rem; }
}

/* Page légale dans une fenêtre du jeu (iframe, /infos/cadre.js) : le contenu seul. */
.dans-cadre .entete, .dans-cadre .pied { display: none; }

/* « Hébergé en France » dans le pied de page : le drapeau à la hauteur du texte. */
.heberge { white-space: nowrap; }
.drapeau-fr { display: inline-block; width: 1.05em; height: .7em; vertical-align: -.02em; margin: 0 .1em; border: 1px solid rgba(0,0,0,.25); border-radius: 1px; }

/* Accueil : Chonchon observe les tuiles des jeux autour de lui (regard à droite, clignement, regard à
   gauche), devient curieux, puis rit avec un petit saut (CSS seul, sans script ; planche de 12 images
   de 140 px, home/chonchon-accueil.webp, faite par frontend/scripts/chonchon-art/accueil.py :
   0 face, 1 droite, 2 gauche, 3 clignement, 4-7 curieux, 8-11 rit). */
.scene-accueil { position: relative; width: 300px; max-width: 100%; height: 190px; margin: 0 auto; }
.chonchon-anime {
  position: absolute; left: 50%; bottom: 0; width: 140px; height: 140px; margin-left: -70px;
  background: url(/chonchon-accueil.webp?v=3) 0 0 / 1680px 140px no-repeat;
  animation: chonchon-accueil 15s step-end infinite, chonchon-rit 15s ease-in-out infinite;
}
@keyframes chonchon-accueil {
  0% { background-position: 0 0; }
  6% { background-position: -140px 0; }
  12% { background-position: 0 0; }
  14% { background-position: -420px 0; }
  15% { background-position: 0 0; }
  20% { background-position: -280px 0; }
  26% { background-position: 0 0; }
  30% { background-position: -560px 0; }
  33% { background-position: -700px 0; }
  36% { background-position: -840px 0; }
  39% { background-position: -980px 0; }
  50% { background-position: -840px 0; }
  53% { background-position: -1120px 0; }
  56% { background-position: -1260px 0; }
  59% { background-position: -1400px 0; }
  62% { background-position: -1540px 0; }
  82% { background-position: -1400px 0; }
  85% { background-position: -1260px 0; }
  88% { background-position: -1120px 0; }
  92% { background-position: 0 0; }
  100% { background-position: 0 0; }
}
/* Un petit saut quand le rire éclate, puis le rire le secoue doucement. */
@keyframes chonchon-rit {
  0%, 61%, 66%, 82%, 100% { transform: translateY(0); }
  63.5% { transform: translateY(-14px); }
  69%, 74%, 79% { transform: translateY(-4px); }
  71.5%, 76.5% { transform: translateY(0); }
}
.tuile {
  position: absolute; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; font-weight: 900; font-size: 1.2rem; color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15); animation: tuile-flotte 6s ease-in-out infinite;
}
.tuile.t1 { left: 8%; top: 18%; background: #e8544b; }
.tuile.t2 { left: 4%; top: 62%; background: #3a8fd8; animation-delay: -1.5s; }
.tuile.t3 { left: 26%; top: 0; background: #f2b544; animation-delay: -3s; }
.tuile.t4 { right: 24%; top: 2%; background: #3fae4a; animation-delay: -4.5s; }
.tuile.t5 { right: 6%; top: 24%; background: #9a6bff; animation-delay: -2.2s; }
.tuile.t6 { right: 3%; top: 66%; background: #ff7ab6; animation-delay: -.8s; }
@keyframes tuile-flotte {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chonchon-anime, .tuile { animation: none; }
  .chonchon-anime { background-position: -1540px 0; }  /* immobile, mais en train de rire */
}

/* Carrousel de l'accueil : captures du jeu et de l'espace parents, une à la fois, avec une légende.
   Défile au doigt ou à la molette (scroll-snap) ; carrousel.js ajoute les flèches et le compteur. */
.carrousel { margin: .5rem 0 1.5rem; }
.carrousel-piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 14px;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.diapo { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.diapo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px;
  border: 1px solid var(--bord); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); background: var(--carte);
}
.diapo figcaption { margin: .6rem .4rem 0; text-align: center; color: var(--discret); font-size: .92rem; line-height: 1.45; }
.carrousel-commandes { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .6rem; }
.carrousel-commandes[hidden] { display: none; }
.carrousel-commandes button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--bleu); background: var(--carte);
  color: var(--bleu); font-size: 1.5rem; line-height: 1; font-weight: 700; cursor: pointer;
}
.carrousel-commandes button:hover { background: var(--bleu); color: var(--carte); }
.carrousel-compteur { min-width: 4.5rem; text-align: center; color: var(--discret); font-size: .9rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .carrousel-piste { scroll-behavior: auto; } }

/* Page introuvable (404.html) : Chonchon triste au milieu des tuiles « 4 0 4 ». */
.introuvable .chonchon-triste { position: absolute; left: 50%; bottom: 0; width: 140px; height: 140px; margin-left: -70px; }
/* Mis en avant sous les boutons : le jeu hors ligne. */
.atout { display: flex; gap: .9rem; align-items: flex-start; max-width: 36rem; margin: 0 auto 1.2rem; padding: 1rem 1.2rem; text-align: left;
  background: #e3f4f8; border: 2px solid var(--bleu); border-radius: 16px; }
.atout h2 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--bleu); }
.atout p { margin: 0; }
.atout-icone { flex: 0 0 auto; width: 40px; height: 40px; color: var(--bleu); }
@media (prefers-color-scheme: dark) { .atout { background: #12313b; } }
/* Fin de page : la ressource du gouvernement sur les écrans (logo d'origine, sur fond blanc). */
.ressource { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.ressource p { flex: 1 1 16rem; margin: .3rem 0; }
.ressource-logo { flex: 0 0 auto; display: block; padding: .5rem .7rem; background: #fff; border-radius: 10px; }
.ressource-logo img { display: block; width: 184px; height: auto; }