/* ==========================================================================
   Le repère des pirates · feuille de style
   Design : cartoon pirate, mer & sable. Tout est pilotable par les variables.
   Police titre : Baloo 2 · Police texte : Quicksand
   ========================================================================== */

:root{
  /* Palette (issue de la maquette) */
  --bleu-nuit:    #16324f;
  --bleu-nuit-fonce:#0f2438;
  --bleu-mer:     #2f80b5;
  --bleu-ciel:    #bfe6f5;
  --bleu-ciel-2:  #8fd2ee;
  --sable:        #f8edd2;
  --sable-2:      #f1e0ba;
  --jaune:        #f4a92b;
  --jaune-fonce:  #e2911a;
  --rouge:        #d24a3b;
  --rouge-fonce:  #b63a2d;
  --vert:         #4fa05a;
  --orange:       #e8862e;
  --texte:        #233a4d;
  --texte-doux:   #5a7184;
  --blanc:        #ffffff;
  --trait:        rgba(22,50,79,.15);
  --ombre:        rgba(22,50,79,.18);
  --rayon:        18px;
  --rayon-s:      12px;
  --max:          1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Quicksand", system-ui, -apple-system, sans-serif;
  font-size:18px;
  line-height:1.8;
  color:var(--texte);
  background:var(--sable);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.titre{
  font-family:"Baloo 2", "Quicksand", sans-serif;
  line-height:1.2;
  color:var(--bleu-nuit);
  margin:.2em 0 .5em;
}
h1{ font-size:clamp(2rem, 5vw, 3rem); }
h2{ font-size:clamp(1.5rem, 3.4vw, 2.1rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.1rem; }
a{ color:var(--bleu-mer); }
img{ max-width:100%; height:auto; display:block; }

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }

/* ----- Boutons ----- */
.bouton{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Baloo 2", sans-serif; font-weight:700; font-size:1.05rem;
  background:var(--jaune); color:var(--bleu-nuit);
  padding:.7rem 1.4rem; border-radius:999px; text-decoration:none;
  border:3px solid rgba(0,0,0,.06);
  box-shadow:0 4px 0 var(--jaune-fonce); transition:transform .12s, box-shadow .12s;
}
.bouton:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--jaune-fonce); }
.bouton--blanc{ background:var(--blanc); color:var(--bleu-nuit); box-shadow:0 4px 0 rgba(0,0,0,.12); }
.bouton--rouge{ background:var(--rouge); color:#fff; box-shadow:0 4px 0 var(--rouge-fonce); }

/* ==========================================================================
   En-tête / navigation (le "pont")
   ========================================================================== */
.entete{ position:sticky; top:0; z-index:50; }
.entete-bar{ background:var(--bleu-nuit); color:#fff; }
.vague-entete{ line-height:0; margin-top:-1px; }
.vague-entete svg{ display:block; width:100%; height:22px; }
.entete .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:78px; }
.marque{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.marque img{ height:62px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

.navire-nav{ display:flex; align-items:center; gap:.4rem; }
.nav-lien{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#fff; text-decoration:none; font-weight:600;
  padding:.5rem .8rem; border-radius:999px; transition:background .15s;
}
.nav-lien:hover{ background:rgba(255,255,255,.12); color:#fff; }
.nav-lien__icone{ font-size:1.1rem; }
.bouton-parents{
  background:var(--rouge); color:#fff; border-radius:999px;
  padding:.55rem 1.1rem; text-decoration:none; font-weight:700;
  box-shadow:0 3px 0 var(--rouge-fonce); white-space:nowrap;
}
.bouton-parents:hover{ color:#fff; transform:translateY(2px); box-shadow:0 1px 0 var(--rouge-fonce); }

.burger{ display:none; background:none; border:0; color:#fff; font-size:1.8rem; cursor:pointer; }

/* ==========================================================================
   Vagues de séparation
   ========================================================================== */
.vague{ display:block; width:100%; height:auto; margin:0; line-height:0; }
.vague svg{ display:block; width:100%; height:60px; }

/* ==========================================================================
   Bannière d'accueil (la "crique")
   ========================================================================== */
.crique{
  position:relative;
  background:#bfe6f5 url(/img/fond.webp) center right / cover no-repeat;
  min-height:520px; display:flex; align-items:center;
}
.crique::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(191,230,245,.96) 0%, rgba(191,230,245,.85) 32%, rgba(191,230,245,.25) 55%, rgba(191,230,245,0) 70%);
}
.crique .container{ position:relative; z-index:1; padding-top:2.5rem; padding-bottom:3.5rem; }
.crique-texte{ max-width:540px; }
.crique-texte .bienvenue{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--bleu-mer); font-size:1.6rem; display:block; }
.crique-texte h1{ color:var(--bleu-nuit); margin:.1em 0 .3em; }
.crique-texte h1 .grand{ display:block; font-size:1.4em; color:var(--bleu-nuit); text-shadow:3px 3px 0 #fff; }
.ruban{
  display:inline-block; background:var(--rouge); color:#fff; font-weight:700;
  font-family:"Baloo 2",sans-serif; padding:.7rem 1.2rem; border-radius:10px;
  box-shadow:0 4px 0 var(--rouge-fonce); margin:.4rem 0 1.4rem; max-width:30rem; line-height:1.4;
}
.crique-boutons{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* L'image porte déjà la scène : on n'affiche le scrim que si besoin sur petit écran */
@media(max-width:760px){
  .crique{ min-height:0; background-position:center bottom; padding-bottom:0; }
  .crique::before{ background:linear-gradient(180deg, rgba(191,230,245,.95) 0%, rgba(191,230,245,.8) 60%, rgba(191,230,245,.4) 100%); }
  .crique .container{ padding-bottom:2rem; }
  .crique-texte{ max-width:none; }
}

/* Emplacement image (en attendant les visuels générés) */
.visuel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 12px, rgba(255,255,255,.3) 12px, rgba(255,255,255,.3) 24px);
  border:3px dashed rgba(22,50,79,.25); border-radius:var(--rayon);
  color:var(--bleu-nuit); font-weight:600; padding:1.5rem; min-height:220px;
}
.visuel__emoji{ font-size:2.4rem; }
.visuel small{ color:var(--texte-doux); font-weight:500; }

/* ==========================================================================
   Section "Explore notre univers"
   ========================================================================== */
.section{ padding:2.5rem 0 3rem; }
.section--sable2{ background:var(--sable-2); }
.section-titre{ text-align:center; margin-bottom:1.8rem; }
.section-titre span{ display:inline-block; }
.etoile{ color:var(--jaune); }

.univers-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.univers-carte{
  background:#fff; border-radius:var(--rayon); padding:1.4rem 1.2rem 1.6rem;
  text-align:center; box-shadow:0 6px 18px var(--ombre); border-top:6px solid var(--bleu-mer);
  display:flex; flex-direction:column;
}
.univers-carte--activites{ border-color:var(--bleu-mer); }
.univers-carte--jeux{ border-color:var(--rouge); }
.univers-carte--coloriages{ border-color:var(--vert); }
.univers-carte--histoires{ border-color:var(--orange); }
.univers-carte h3{ margin-top:.3rem; }
.univers-carte--activites h3{ color:var(--bleu-mer); }
.univers-carte--jeux h3{ color:var(--rouge); }
.univers-carte--coloriages h3{ color:var(--vert); }
.univers-carte--histoires h3{ color:var(--orange); }
.univers-carte__emoji{ font-size:2.6rem; }
.univers-carte__img{ width:130px; height:130px; object-fit:contain; margin:.4rem auto .6rem; filter:drop-shadow(0 6px 8px rgba(22,50,79,.18)); }
.univers-carte p{ color:var(--texte-doux); font-size:.98rem; flex:1; }
.univers-carte .bouton{ align-self:center; }
.univers-carte--activites .bouton{ background:var(--bleu-mer); color:#fff; box-shadow:0 4px 0 #246593; }
.univers-carte--jeux .bouton{ background:var(--rouge); color:#fff; box-shadow:0 4px 0 var(--rouge-fonce); }
.univers-carte--coloriages .bouton{ background:var(--vert); color:#fff; box-shadow:0 4px 0 #3d7e46; }
.univers-carte--histoires .bouton{ background:var(--orange); color:#fff; box-shadow:0 4px 0 #c66f1f; }

/* ----- Atouts + équipage ----- */
.deux-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.atout{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1rem; background:#fff; border-radius:var(--rayon-s); padding:.9rem 1rem; box-shadow:0 3px 10px var(--ombre); }
.atout__icone{ flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; color:#fff; }
.atout--1 .atout__icone{ background:var(--bleu-mer); }
.atout--2 .atout__icone{ background:var(--vert); }
.atout--3 .atout__icone{ background:var(--orange); }
.atout h3{ margin:.1rem 0 .2rem; font-size:1.1rem; }
.atout p{ margin:0; color:var(--texte-doux); font-size:.96rem; }

.equipage{ background:var(--bleu-nuit-fonce); color:#fff; border-radius:var(--rayon); padding:2rem; position:relative; overflow:hidden; display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; align-items:center; }
.equipage h2{ color:#fff; }
.equipage p{ color:#dfe9f1; }
.equipage__coffre{ width:100%; max-width:300px; justify-self:center; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
@media(max-width:680px){ .equipage{ grid-template-columns:1fr; text-align:center; } .equipage__coffre{ max-width:220px; } }

/* ==========================================================================
   Pied de page (le "pont du navire")
   ========================================================================== */
.pont{ background:var(--bleu-nuit); color:#fff; padding:2.5rem 0 1.5rem; }
.pont a{ color:#cfe0ee; text-decoration:none; }
.pont a:hover{ color:#fff; text-decoration:underline; }
.pont-atouts{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; text-align:center; margin-bottom:1.8rem; }
.pont-atout{ max-width:130px; font-size:.85rem; color:#bcd0e0; }
.pont-atout .e{ font-size:1.8rem; display:block; margin-bottom:.3rem; }
.pont-grille{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; border-top:1px solid rgba(255,255,255,.15); padding-top:1.5rem; }
.pont-col h4{ color:var(--jaune); margin:0 0 .6rem; }
.pont-col ul{ list-style:none; padding:0; margin:0; line-height:2; }
.pont-bas{ text-align:center; color:#90aac0; font-size:.85rem; margin-top:1.5rem; }

/* ==========================================================================
   Pages de contenu (le "carnet")
   ========================================================================== */
.fil-ariane{ font-size:.9rem; color:var(--texte-doux); padding:1rem 0 .2rem; }
.fil-ariane a{ color:var(--bleu-mer); text-decoration:none; }
.fil-ariane span[aria-current]{ color:var(--texte-doux); }

.page-entete{ text-align:center; padding:1rem 0 1.4rem; }
.page-entete .meta{ color:var(--texte-doux); font-weight:600; }

.carnet{ max-width:760px; margin:0 auto; padding:1rem 0 3rem; }
.carnet p, .carnet li{ font-size:1.08rem; }
.carnet h2{ margin-top:2rem; }
.carnet figure{ margin:1.6rem 0; }
.carnet figure figcaption{ font-size:.85rem; color:var(--texte-doux); text-align:center; margin-top:.4rem; }

/* Aparté en marge */
.note-cap{ position:relative; background:#fff; border-radius:var(--rayon-s); padding:1.1rem 1.2rem; margin:1.6rem 0; box-shadow:3px 4px 0 var(--trait); border:2px solid var(--sable-2); transform:rotate(-.5deg); }
.note-cap--attention{ transform:rotate(.5deg); border-color:#f3c9a0; }
.note-cap__pin{ position:absolute; top:-10px; left:18px; width:18px; height:18px; border-radius:50%; background:var(--rouge); box-shadow:0 0 0 4px var(--sable); }
.note-cap__label{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--rouge); margin:0 0 .3rem; }
.note-cap p:last-child{ margin:0; }
@media(min-width:1100px){ .note-cap{ float:right; width:280px; margin:.4rem -150px 1.2rem 1.6rem; } }

/* Itinéraire (étapes) */
.itineraire{ list-style:none; padding:0; margin:1.8rem 0; }
.itineraire__escale{ display:flex; gap:1rem; position:relative; padding-bottom:1.6rem; }
.itineraire__escale:not(:last-child)::before{ content:""; position:absolute; left:19px; top:42px; bottom:0; border-left:3px dashed var(--bleu-ciel-2); }
.itineraire__num{ flex:0 0 40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--bleu-mer); color:#fff; font-family:"Baloo 2",sans-serif; font-weight:700; z-index:1; box-shadow:0 3px 0 #246593; }
.itineraire h3{ margin:.3rem 0 .3rem; }

/* Coffre à cocher */
.coffre-cocher{ background:#fff; border:2px solid var(--sable-2); border-radius:var(--rayon-s); padding:1.2rem 1.3rem; margin:1.8rem 0; }
.coffre-cocher__titre{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--jaune-fonce); margin:0 0 .8rem; }
.coffre-cocher__barre{ height:12px; border-radius:8px; background:var(--sable-2); overflow:hidden; margin-bottom:1rem; }
.coffre-cocher__barre span{ display:block; height:100%; width:0; background:var(--jaune); transition:width .35s; }
.coffre-cocher ul{ list-style:none; padding:0; margin:0; }
.coffre-cocher li+li{ margin-top:.5rem; }
.coffre-cocher label{ display:flex; gap:.6rem; align-items:center; cursor:pointer; }
.coffre-cocher input{ width:20px; height:20px; accent-color:var(--jaune); }
.coffre-cocher input:checked ~ span{ text-decoration:line-through; opacity:.55; }

/* Sélecteur d'âge */
.selecteur-age{ background:var(--bleu-ciel); border-radius:var(--rayon-s); padding:1.2rem; margin:1.8rem 0; }
.selecteur-age__choix{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.selecteur-age__choix button{ border:3px solid #fff; background:#fff; border-radius:999px; padding:.45rem 1.1rem; cursor:pointer; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--bleu-nuit); }
.selecteur-age__choix button.actif{ background:var(--bleu-mer); color:#fff; border-color:var(--bleu-mer); }
.selecteur-age__bloc{ background:#fff; border-radius:var(--rayon-s); padding:1rem 1.2rem; }
.selecteur-age__bloc p:last-child{ margin:0; }

/* Duel */
.duel{ display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; margin:1.8rem 0; }
.duel__camp{ background:#fff; border:2px solid var(--sable-2); border-radius:var(--rayon-s); padding:1.1rem; }
.duel__camp h3{ margin-top:0; }
.duel__vs{ font-family:"Baloo 2",sans-serif; font-weight:800; color:var(--rouge); font-size:1.4rem; }

/* Butin */
.butin{ background:var(--bleu-nuit); color:#fff; border-radius:var(--rayon); padding:1.4rem 1.6rem; margin:2rem 0; }
.butin__titre{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--jaune); margin:0 0 .6rem; font-size:1.2rem; }
.butin ul{ margin:0; padding-left:1.2rem; }
.butin li{ margin-bottom:.4rem; }

/* FAQ */
.repere-faq{ margin:2.4rem 0; }
.repere-faq__qr{ background:#fff; border-left:5px solid var(--bleu-mer); border-radius:0 var(--rayon-s) var(--rayon-s) 0; padding:1rem 1.2rem; margin-bottom:1rem; }
.repere-faq__q{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--bleu-nuit); margin:0 0 .4rem; }
.repere-faq__qr p:last-child{ margin:0; }

/* Histoire : en-tête illustré */
.histoire-entete{ text-align:center; background:linear-gradient(180deg, var(--bleu-ciel) 0%, #fff 100%); border-radius:var(--rayon); padding:1.8rem 1rem 1.5rem; margin:1rem 0 1.8rem; }
.histoire-entete__emoji{ font-size:3.2rem; line-height:1; }
.histoire-entete h1{ margin:.3rem 0 .7rem; }
.histoire-entete__meta{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:0 0 1.1rem; }
.pastille{ background:#fff; border-radius:999px; padding:.3rem .9rem; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.85rem; color:var(--bleu-nuit); box-shadow:0 2px 8px var(--ombre); }
.pastille--temps{ color:var(--bleu-mer); }

/* Histoire : panneau de lecture façon livre */
.histoire-corps{ max-width:680px; margin:0 auto; background:#fffdf5; border:2px solid var(--sable-2); border-radius:var(--rayon); padding:2.4rem 2.2rem; box-shadow:0 10px 28px var(--ombre); font-size:1.17rem; line-height:1.95; }
.histoire-corps p{ margin:0 0 1.2rem; }
.histoire-corps p:first-of-type::first-letter{ font-family:"Baloo 2",sans-serif; font-size:3.4rem; float:left; line-height:.7; padding:.35rem .55rem 0 0; color:var(--rouge); }
.histoire-ornement{ text-align:center; font-size:1.8rem; color:var(--jaune-fonce); margin:1.6rem 0 0; }
.coin-parents{ background:var(--sable-2); border-radius:var(--rayon-s); padding:1.2rem 1.4rem; margin:2rem 0 0; font-size:1rem; line-height:1.7; }
.coin-parents__titre{ font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--bleu-nuit); margin:0 0 .4rem; }
.bouton-audio{ background:var(--vert); color:#fff; box-shadow:0 4px 0 #3d7e46; }
@media(max-width:640px){ .histoire-corps{ padding:1.6rem 1.2rem; } }

/* Univers : page de liste */
.grille-fiches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1.3rem; padding:1.5rem 0 3rem; }
.fiche{ background:#fff; border-radius:var(--rayon); overflow:hidden; box-shadow:0 5px 16px var(--ombre); text-decoration:none; color:var(--texte); display:flex; flex-direction:column; transition:transform .12s; }
.fiche:hover{ transform:translateY(-4px); }
.fiche .visuel{ border:0; border-radius:0; min-height:160px; }
.fiche__corps{ padding:1rem 1.1rem 1.2rem; }
.fiche__corps h3{ margin:.1rem 0 .4rem; }
.fiche__corps p{ color:var(--texte-doux); font-size:.95rem; margin:0; }
.fiche__badge{ display:inline-block; font-size:.78rem; font-weight:700; color:#fff; background:var(--bleu-mer); padding:.15rem .6rem; border-radius:999px; margin-bottom:.4rem; }
.fiche__media{ display:grid; place-items:center; min-height:150px; font-size:3.4rem; background:linear-gradient(160deg, var(--bleu-ciel), var(--sable-2)); }
.fiche--bientot{ opacity:.7; cursor:default; }
.fiche--bientot:hover{ transform:none; }
.badge-bientot{ display:inline-block; font-size:.72rem; font-weight:700; color:#fff; background:var(--texte-doux); padding:.2rem .7rem; border-radius:999px; }
.univers-intro{ max-width:720px; margin:0 auto 1rem; text-align:center; color:var(--texte-doux); }
.hub-liens{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1.4rem auto 0; max-width:760px; }
.hub-liens a{ background:#fff; border:2px solid var(--bleu-ciel-2); color:var(--bleu-nuit); text-decoration:none; font-family:"Baloo 2",sans-serif; font-weight:600; font-size:.95rem; padding:.45rem 1.1rem; border-radius:999px; box-shadow:0 2px 8px var(--ombre); }
.hub-liens a:hover{ background:var(--bleu-mer); color:#fff; border-color:var(--bleu-mer); }
.hub-section-titre{ max-width:1180px; margin:2rem auto .4rem; font-size:1.4rem; }
.page-titre{ text-align:center; padding-top:1.4rem; }

/* ==========================================================================
   Jeux
   ========================================================================== */
.jeu{ max-width:640px; margin:1rem auto 3rem; text-align:center; }
.jeu-barre{ display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin:1rem 0 1.4rem; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--bleu-nuit); }
.jeu-barre b{ color:var(--bleu-mer); }
.jeu-message{ min-height:1.6rem; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--rouge); margin:.6rem 0; }
.jeu-rejouer{ margin-top:1rem; }
.jeu-niveaux, .laby-niveaux{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem; }
.jeu-niveaux button, .laby-niveaux button{ border:2px solid var(--bleu-ciel-2); background:#fff; border-radius:999px; padding:.4rem 1rem; font-family:"Baloo 2",sans-serif; font-weight:700; cursor:pointer; color:var(--bleu-nuit); }
.jeu-niveaux button.actif, .laby-niveaux button.actif{ background:var(--bleu-mer); color:#fff; border-color:var(--bleu-mer); }

/* Memory */
.memoire-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; max-width:420px; margin:0 auto; }
.memoire-carte{ aspect-ratio:1; font-size:2rem; border:0; border-radius:12px; background:var(--bleu-mer); color:transparent; cursor:pointer; box-shadow:0 4px 0 #246593; display:grid; place-items:center; transition:transform .15s; }
.memoire-carte.ouverte,.memoire-carte.trouvee{ background:#fff; color:initial; border:2px solid var(--sable-2); }
.memoire-carte.trouvee{ background:var(--bleu-ciel); cursor:default; }

/* Quiz */
.quiz-question{ font-family:"Baloo 2",sans-serif; font-size:1.3rem; color:var(--bleu-nuit); margin:1rem 0; }
.quiz-choix{ display:flex; flex-direction:column; gap:.6rem; max-width:420px; margin:0 auto; }
.quiz-choix button{ padding:.8rem 1rem; border:2px solid var(--bleu-ciel-2); background:#fff; border-radius:12px; font:inherit; cursor:pointer; }
.quiz-choix button:hover{ background:var(--bleu-ciel); }
.quiz-choix button.bon{ background:var(--vert); color:#fff; border-color:var(--vert); }
.quiz-choix button.faux{ background:var(--rouge); color:#fff; border-color:var(--rouge); }

/* Labyrinthe */
.laby{ display:grid; gap:2px; width:min(360px,92vw); aspect-ratio:1; grid-auto-rows:1fr; margin:0 auto; background:var(--bleu-nuit); padding:4px; border-radius:8px; }
.laby-case{ min-width:0; min-height:0; display:grid; place-items:center; font-size:1em; line-height:1; background:var(--sable); overflow:hidden; }
.laby-case.mur{ background:var(--bleu-nuit); }
.laby-case.cache{ background:#0c1b2a; }
.laby-dpad{ display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px); gap:6px; justify-content:center; margin:1.2rem auto 0; }
.laby-dpad button{ font-size:1.4rem; border:0; border-radius:10px; background:var(--jaune); box-shadow:0 4px 0 var(--jaune-fonce); cursor:pointer; }
.laby-dpad button:empty{ visibility:hidden; }

/* Attrape le trésor */
.attrape-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; max-width:360px; margin:0 auto; }
.attrape-trou{ aspect-ratio:1; border:0; border-radius:14px; background:var(--bleu-nuit-fonce); font-size:2.2rem; cursor:pointer; display:grid; place-items:center; }

/* Puissance 4 */
.p4-colonnes{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; max-width:392px; margin:0 auto .4rem; }
.p4-colonnes button{ border:0; background:var(--jaune); border-radius:8px; padding:.25rem 0; cursor:pointer; box-shadow:0 3px 0 var(--jaune-fonce); font-size:1rem; }
.p4-grille{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; max-width:392px; margin:0 auto; background:var(--bleu-mer); padding:.5rem; border-radius:14px; }
.p4-case{ aspect-ratio:1; background:#eef6fb; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; overflow:hidden; }
.p4-case .jeton{ display:inline-block; line-height:1; }
.p4-case .jeton.tombe{ animation:p4tombe .22s ease-in; }
@keyframes p4tombe{ from{ transform:translateY(-460%); } to{ transform:translateY(0); } }
.p4-trait{ position:absolute; height:8px; background:rgba(211,74,59,.9); border-radius:4px; transform-origin:left center; pointer-events:none; z-index:3; box-shadow:0 0 0 2px rgba(255,255,255,.65); }

/* Morpion */
.morpion{ display:grid; grid-template-columns:repeat(3,90px); grid-template-rows:repeat(3,90px); gap:6px; justify-content:center; margin:0 auto; }
.morpion button{ font-size:2.4rem; border:2px solid var(--sable-2); border-radius:12px; background:#fff; cursor:pointer; }
.morpion .pion{ display:inline-block; }
.morpion .pion.pop{ animation:morpionPop .2s ease-out; }
@keyframes morpionPop{ from{ transform:scale(0) rotate(-25deg); opacity:.2; } to{ transform:scale(1) rotate(0); opacity:1; } }

/* Comment dessiner */
.dessin-resultat{ max-width:320px; margin:1.5rem auto; background:#fff; border:2px solid var(--sable-2); border-radius:var(--rayon); padding:1rem; }
.dessin-resultat svg{ display:block; width:100%; height:auto; }
.dessin-resultat figcaption{ text-align:center; color:var(--texte-doux); font-size:.85rem; margin-top:.5rem; }

/* Blagues & devinettes */
.blague{ background:#fff; border:2px solid var(--sable-2); border-radius:var(--rayon-s); padding:1rem 1.2rem; margin:.8rem 0; }
.blague__q{ font-weight:700; color:var(--bleu-nuit); margin:0 0 .5rem; font-size:1.08rem; }
.blague summary{ cursor:pointer; font-weight:700; color:var(--bleu-mer); list-style:none; }
.blague summary::-webkit-details-marker{ display:none; }
.blague summary::before{ content:"👀 "; }
.blague[open] summary{ color:var(--texte-doux); }
.blague__r{ margin:.5rem 0 0; color:var(--texte); }

/* Pendu (la planche du pirate) */
.pendu-planche{ font-size:2rem; margin:1rem 0; min-height:2.4rem; }
.pendu-mot{ font-family:"Baloo 2",sans-serif; font-size:2rem; letter-spacing:.35rem; margin:1rem 0; }
.pendu-clavier{ display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; max-width:430px; margin:1rem auto; }
.pendu-clavier button{ padding:.5rem 0; border:2px solid var(--bleu-ciel-2); background:#fff; border-radius:8px; font-family:"Baloo 2",sans-serif; font-weight:700; cursor:pointer; }
.pendu-clavier button:disabled{ opacity:.3; cursor:default; }

/* Mots mêlés */
.mm-grille{ display:grid; gap:2px; max-width:360px; margin:0 auto; user-select:none; }
.mm-grille button{ aspect-ratio:1; border:1px solid var(--sable-2); background:#fff; font-family:"Baloo 2",sans-serif; font-weight:700; cursor:pointer; font-size:.95rem; }
.mm-grille button.sel{ background:var(--jaune); }
.mm-grille button.trouve{ background:var(--vert); color:#fff; }
.mm-mots{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0; }
.mm-mots span{ padding:.2rem .7rem; border-radius:999px; background:var(--sable-2); font-weight:700; font-size:.9rem; }
.mm-mots span.ok{ text-decoration:line-through; background:var(--vert); color:#fff; }

/* 7 différences */
.diff-zone{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; max-width:560px; margin:0 auto; }
.diff-grille{ display:grid; gap:3px; background:var(--bleu-mer); padding:4px; border-radius:10px; }
.diff-grille div, .diff-grille button{ aspect-ratio:1; display:grid; place-items:center; font-size:1.4rem; background:#eef6fb; border:0; border-radius:4px; }
.diff-grille button{ cursor:pointer; }
.diff-grille button.trouve{ background:var(--vert); box-shadow:0 0 0 2px var(--vert); }

/* Memory sonore (Simon) */
.simon{ display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; max-width:300px; margin:1rem auto; }
.simon button{ aspect-ratio:1; border:0; border-radius:18px; cursor:pointer; opacity:.5; transition:opacity .12s; }
.simon button.on{ opacity:1; }
.simon .s0{ background:#d24a3b; } .simon .s1{ background:#2f80b5; } .simon .s2{ background:#4fa05a; } .simon .s3{ background:#f4a92b; }

/* Jeu de l'oie */
.oie-plateau{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-width:440px; margin:0 auto; }
.oie-case{ aspect-ratio:1; display:grid; place-items:center; background:var(--sable-2); border-radius:6px; font-size:1.3rem; }
.oie-case.depart{ background:var(--bleu-ciel); } .oie-case.arrivee{ background:var(--jaune); } .oie-case.special{ background:#f3c9a0; }
.oie-de{ font-family:"Baloo 2",sans-serif; font-size:1.6rem; margin:.4rem 0; }

/* Bandeau "bientôt" (coloriages en attente) */
.bientot{ text-align:center; padding:3rem 1rem; }
.bientot__emoji{ font-size:3.5rem; }

/* 404 */
.erreur-404{ text-align:center; padding:4rem 1rem; }
.erreur-404 .code{ font-family:"Baloo 2",sans-serif; font-size:6rem; color:var(--rouge); line-height:1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:900px){
  .univers-grille{ grid-template-columns:repeat(2,1fr); }
  .crique .container,.deux-colonnes{ grid-template-columns:1fr; }
  .crique-visuel{ order:-1; }
}
@media(max-width:900px){
  .burger{ display:block; }
  .navire-nav{ position:absolute; top:78px; left:0; right:0; background:var(--bleu-nuit); flex-direction:column; align-items:stretch; gap:0; padding:.5rem; display:none; box-shadow:0 10px 20px rgba(0,0,0,.25); z-index:2; }
  .navire-nav.ouvert{ display:flex; }
  .nav-lien{ padding:.8rem 1rem; border-radius:10px; }
  .bouton-parents{ text-align:center; margin-top:.4rem; }
  .duel{ grid-template-columns:1fr; }
  .duel__vs{ justify-self:center; }
  .note-cap{ float:none; width:auto; margin:1.4rem 0; }
}
@media(max-width:520px){
  .univers-grille{ grid-template-columns:1fr; }
  .pont-grille{ flex-direction:column; }
}