/* =========================================================
   BASE
========================================================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }

:root{
  --bg:#020514;
  --gold:#f8d774;

  --glass: rgba(0,0,0,.22);
  --glass2: rgba(0,0,0,.30);
  --line: rgba(255,255,255,.14);
  --line2: rgba(255,255,255,.18);

  --aqua: rgba(0,255,200,.35);
  --blue: rgba(120,190,255,.35);
  --red: rgba(255,120,120,.55);
}

body{
  margin:0;
  font-family:"Segoe UI", system-ui, sans-serif;
  color:#fff;
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; color:inherit; }

:focus-visible{
  outline: 2px solid rgba(248,215,116,.75);
  outline-offset: 3px;
}

/* =========================================================
   NAV
========================================================= */
.top-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  padding:20px 40px;
  background:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,0));
}

.top-nav ul{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:48px;
  margin:0;
  padding:0;
}

.top-nav a{
  font-family:"Georgia", serif;
  font-size:15px;
  letter-spacing:.12em;
  opacity:.92;
}
.top-nav a:hover{
  color:var(--gold);
  text-shadow:0 0 10px rgba(248,215,116,.6);
}

/* =========================================================
   HERO (COMMUN)
========================================================= */
.hero{
  min-height:100vh;
  padding:170px 20px 90px;
  display:flex;
  justify-content:center;
}

.hero-inner{
  width:100%;
  max-width:1100px;
  text-align:center;
}

.hero-spacer{ height: 34px; }

.hero-tagline{
  margin: 12px 0 0;
  opacity: .92;
  line-height: 1.4;
}

/* =========================================================
   HERO ACCUEIL (INDEX)
========================================================= */
.hero-home{
  background:
    radial-gradient(circle at center, rgba(0,0,0,.15), rgba(0,0,0,.92)),
    url("images/bg-confrerie.png") center/cover no-repeat;
}

/* =========================================================
   HERO FORÊT
========================================================= */
.hero-foret{
  background:
    radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.95)),
    url("images/foret_enchantee.png") center/cover no-repeat;
}

/* =========================================================
   TITRES (COMMUN)
========================================================= */
.titre-magique{
  font-family:"Georgia", serif;
  letter-spacing:.06em;
  text-shadow:
    0 0 18px rgba(255,255,255,.35),
    0 0 60px rgba(0,255,200,.16);
}
.sous-titre-magique{ opacity:.92; }

.hero-header h1{
  font-family:"Georgia", serif;
  font-size:52px;
  letter-spacing:.16em;
  margin:0;
  text-transform:uppercase;
  text-shadow:
    0 0 14px rgba(255,255,255,.55),
    0 0 40px rgba(0,255,200,.18);
}

/* =========================================================
   PORTAILS (INDEX)  ✅ PORTES RÉDUITES ICI
========================================================= */
.portails{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:24px;
  max-width:880px;
  margin:0 auto;
  align-items:start;
}

.portail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
}

.portail-img{
  width:min(250px, 90%);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display:block;

  border-radius:999px 999px 28px 28px;
  border:1px solid rgba(255,255,255,.18);

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 26px rgba(0,255,200,.12);

  filter:saturate(1.05) contrast(1.02);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.portail:hover .portail-img{
  transform: translateY(-6px) scale(1.02);
  filter:saturate(1.10) contrast(1.06);
}

.portail-foret:hover .portail-img{
  box-shadow:
    0 22px 70px rgba(0,0,0,.58),
    0 0 42px rgba(0,255,180,.24);
}
.portail-enigmes:hover .portail-img{
  box-shadow:
    0 22px 70px rgba(0,0,0,.58),
    0 0 42px rgba(120,190,255,.24);
}
.portail-erudits:hover .portail-img{
  box-shadow:
    0 22px 70px rgba(0,0,0,.58),
    0 0 42px rgba(248,215,116,.24);
}

.portail-texte{
  font-family:"Georgia", serif;
  font-size:17px;
  letter-spacing:.1em;
  opacity:.98;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* =========================================================
   LIENS MAGIQUES (FORÊT)
========================================================= */
.liens-magiques{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  max-width:420px;
  margin:0 auto;
}

.lien-magique{
  display:block;
  width:100%;
  text-align:center;

  padding:16px 22px;
  font-family:"Georgia", serif;
  font-size:19px;
  letter-spacing:.08em;

  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);

  backdrop-filter:blur(10px);
  box-shadow:
    0 0 18px rgba(255,255,255,.08),
    inset 0 0 12px rgba(255,255,255,.04);

  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.lien-magique:hover{ transform:scale(1.05); }

.lien-vert:hover{ color:#7fffd4; box-shadow:0 0 36px rgba(0,255,180,.35); }
.lien-bleu:hover{ color:#8ecbff; box-shadow:0 0 36px rgba(120,190,255,.35); }
.lien-or:hover{ color:var(--gold); box-shadow:0 0 36px rgba(248,215,116,.35); }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  text-align:center;
  padding:30px 18px 0;
  font-size:13px;
  opacity:.85;
}
.site-footer a:hover{
  color:var(--gold);
  text-shadow:0 0 10px rgba(248,215,116,.5);
}

/* =========================================================
   HEADER DE PAGES JEUX (COMMUN)
========================================================= */
.phono-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  max-width:980px;
  margin:0 auto 18px;
  text-align:center;
}

.phono-titlewrap{ flex:1; }

.foret-titre{
  margin:0;
  font-size:56px;
  letter-spacing:.04em;
}

.foret-sous-titre{
  margin:10px auto 0;
  max-width:760px;
  font-size:16px;
  line-height:1.5;
  opacity:.92;
}

.lettres-travaillees{
  margin-top:14px;
  padding:10px 14px;
  border-radius:999px;
  display:inline-block;

  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter: blur(10px);

  font-size:13px;
  letter-spacing:.06em;
  opacity:.92;
}

#liste-lettres{
  display:inline-block;
  margin-left:8px;
  opacity:.98;
}

.phono-retour{
  white-space:nowrap;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.phono-retour:hover{
  transform:translateY(-2px);
  color:var(--gold);
  box-shadow:0 0 22px rgba(248,215,116,.22);
}

/* =========================================================
   PANEL JEU (COMMUN)
========================================================= */
.jeu-panel{ display:flex; justify-content:center; }

.jeu-carte{
  width:100%;
  max-width:980px;
  margin:22px auto 0;
  padding:18px 18px 16px;

  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 22px rgba(255,255,255,.05);
}

/* =========================================================
   PREMIÈRE LETTRE — STYLE (tes cartes/emoji/etc)
========================================================= */
.jeu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.jeu-consigne{
  margin:0;
  font-size:18px;
  opacity:.98;
}

.badge-lettre{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  font-size:30px;
  margin-left:10px;
  border-radius:20px;

  font-family:"Georgia", serif;
  font-weight:700;
  letter-spacing:.06em;

  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.40),
      rgba(0,255,200,.35),
      rgba(0,0,0,.65));

  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 0 26px rgba(0,255,200,.40),
    0 0 80px rgba(0,255,200,.18);

  animation:pulseLettre 2.6s ease-in-out infinite;
}

@keyframes pulseLettre{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}

.badge-lettre.revealed{
  background: radial-gradient(circle at center, #ffe9a8, #f8d774);
  color:#2b1d00;
  box-shadow: 0 0 18px rgba(248,215,116,.8);
}

.serie-compteur{
  font-size:14px;
  letter-spacing:.06em;
  opacity:.9;
}

.mots-grille{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:18px;
  margin:18px 0 14px;
}

.mot-carte{
  position:relative;
  border-radius:20px;
  padding:18px 16px 16px;

  cursor:pointer;
  user-select:none;

  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);

  box-shadow:
    0 16px 44px rgba(0,0,0,.45),
    inset 0 0 12px rgba(255,255,255,.04);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mot-carte:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 52px rgba(0,0,0,.55),
    0 0 30px rgba(120,190,255,.12),
    inset 0 0 10px rgba(255,255,255,.04);
}

.mot-carte.selected{
  border-color:rgba(0,255,180,.55);
  box-shadow:
    0 18px 56px rgba(0,0,0,.55),
    0 0 44px rgba(0,255,180,.22),
    inset 0 0 14px rgba(0,255,180,.10);
}

.mot-emoji-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0 10px;
}

.mot-emoji{
  font-size:64px;
  line-height:1;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}

.mot-audio{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:#fff;

  font-size:14.5px;
  letter-spacing:.02em;

  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mot-audio:hover{
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(120,190,255,.20);
  border-color:rgba(120,190,255,.35);
}

/* =========================================================
   BOUTONS / FEEDBACK (COMMUN)
========================================================= */
.actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn-jeu{
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:14px;
  letter-spacing:.04em;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}

.btn-jeu:hover{
  transform:translateY(-2px);
  box-shadow:0 0 26px rgba(255,255,255,.10);
}

.btn-jeu--ghost{ background:rgba(0,0,0,.18); opacity:.95; }

.btn-jeu--gold{
  border-color:rgba(248,215,116,.35);
  box-shadow:0 0 18px rgba(248,215,116,.10);
}
.btn-jeu--gold:hover{
  color:var(--gold);
  box-shadow:0 0 34px rgba(248,215,116,.22);
}

.feedback{
  margin:12px 0 0;
  min-height:22px;
  font-size:16px;
  letter-spacing:.02em;
  opacity:.95;
  text-shadow:0 0 18px rgba(255,255,255,.14);
}

.feedback-magique{ text-align:center; }

/* =========================================================
   AUDIO (si tu l’utilises pour debug)
========================================================= */
.audio-bar{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.audio-chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:13.5px;
  letter-spacing:.02em;
}

.audio-chip--bleu{ border-color:rgba(120,190,255,.35); }
.audio-chip--bleu:hover{ box-shadow:0 0 28px rgba(120,190,255,.22); }

.audio-chip--file{ opacity:.9; cursor:default; }

.audio-debug{
  margin:10px 0 0;
  font-size:13px;
  opacity:.85;
}

/* =========================================================
   PETITS LIENS DE RETOUR
========================================================= */
.retour-accueil{
  margin-top:18px;
  font-size:13.5px;
  opacity:.9;
}
.retour-accueil a:hover{
  color:var(--gold);
  text-shadow:0 0 10px rgba(248,215,116,.45);
}

/* =========================================================
   PREMIÈRE LETTRE — SANS ENCART (ton choix)
========================================================= */
.page-premiere-lettre .jeu-carte{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.page-premiere-lettre .foret-titre{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* =========================================================
   JEU — CLÉS VOLANTES (MAJUSCULES)
========================================================= */
.page-cles-majuscules .jeu-carte{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.page-cles-majuscules .jeu-carte.jeu-cles{
  max-width: 980px;
  margin: 22px auto 0;
  padding: 18px 18px 16px;
}

.cles-grille{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px, 1fr));
  gap:16px;
  margin:18px 0 10px;
}

.cle-btn{
  position:relative;
  border-radius:18px;
  padding:18px 16px;
  cursor:pointer;
  user-select:none;

  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 16px 44px rgba(0,0,0,.45),
    inset 0 0 12px rgba(255,255,255,.04);

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: cleFloat 2.8s ease-in-out infinite;
}

@keyframes cleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.cle-btn:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 18px 52px rgba(0,0,0,.55),
    0 0 30px rgba(120,190,255,.12),
    inset 0 0 12px rgba(255,255,255,.04);
}

.cle-btn:disabled{
  cursor: default;
  opacity: .95;
}

.cle-icone{
  font-size:26px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

.cle-lettre{
  font-family:"Georgia", serif;
  font-weight:700;
  letter-spacing:.08em;
  font-size:28px;
  text-shadow: 0 0 18px rgba(255,255,255,.18);
}

/* BON / MAUVAIS */
.cle-btn.is-correct{
  border-color: rgba(0,255,180,.55);
  box-shadow:
    0 18px 56px rgba(0,0,0,.55),
    0 0 44px rgba(0,255,180,.22),
    inset 0 0 14px rgba(0,255,180,.10);
}

.cle-btn.is-wrong{
  border-color: rgba(255,120,120,.55);
  box-shadow:
    0 18px 56px rgba(0,0,0,.55),
    0 0 44px rgba(255,120,120,.18),
    inset 0 0 14px rgba(255,120,120,.10);
}

.cle-btn.is-reveal{
  border-color: rgba(248,215,116,.45);
  box-shadow:
    0 18px 56px rgba(0,0,0,.55),
    0 0 44px rgba(248,215,116,.18),
    inset 0 0 14px rgba(248,215,116,.10);
}

/* =========================================================
   FUSION PHONÉMIQUE
========================================================= */
.page-fusion-phonemique .fusion-wrap{
  max-width: 980px;
  margin: 14px auto 0;
}

.page-fusion-phonemique .fusion-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.page-fusion-phonemique .fusion-struct{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.page-fusion-phonemique .fusion-label{ font-weight:900; }

.page-fusion-phonemique .fusion-struct-btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.page-fusion-phonemique .fusion-struct-btn{
  font-weight:900;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}

.page-fusion-phonemique .fusion-struct-btn.is-active{
  border-color: rgba(248,215,116,.75);
  transform: scale(1.02);
}

.page-fusion-phonemique .fusion-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.page-fusion-phonemique .fusion-phonemes-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.page-fusion-phonemique .fusion-phoneme-zone{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
}

.page-fusion-phonemique .fusion-phoneme-btn{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:10px 14px;
  background: rgba(0,0,0,.18);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}

.page-fusion-phonemique .fusion-phoneme-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

.page-fusion-phonemique .fusion-active{
  opacity:.95;
  font-weight:900;
}

.page-fusion-phonemique .fusion-prompt{
  font-weight:900;
  margin-bottom:10px;
  text-align:center;
}

.page-fusion-phonemique .fusion-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.page-fusion-phonemique .fusion-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:18px 14px;
  background: rgba(0,0,0,.22);
  color: inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:140px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  font-size:52px;
}

.page-fusion-phonemique .fusion-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}

.page-fusion-phonemique .fusion-card.is-disabled{
  opacity:.72;
  cursor: default;
  transform: none;
}

.page-fusion-phonemique .fusion-card.is-correct{
  border-color: rgba(0,255,200,.55);
  box-shadow: 0 0 0 2px rgba(0,255,200,.12) inset;
}

.page-fusion-phonemique .fusion-card.is-wrong{
  border-color: rgba(255,120,120,.60);
  box-shadow: 0 0 0 2px rgba(255,120,120,.12) inset;
}

.page-fusion-phonemique .fusion-footer{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.page-fusion-phonemique .fusion-feedback{ font-weight:900; }
.page-fusion-phonemique .fusion-score{ opacity:.95; font-weight:900; }

.page-fusion-phonemique .fusion-tip{
  max-width:980px;
  margin: 14px auto 0;
  opacity:.9;
  font-weight:700;
}

/* Fusion: les boutons doivent rester cliquables */
.page-fusion-phonemique .fusion-wrap,
.page-fusion-phonemique .fusion-wrap *{
  position: relative;
  z-index: 5;
}

/* ✅ Important : les overlays décoratifs ne doivent pas bloquer les clics */
.card::before,
.card::after,
.card-glass::before,
.card-glass::after{
  pointer-events: none;
}

/* =========================================================
   SEGMENTATION PHONÉMIQUE — FLEUR (BLOC UNIQUE)
========================================================= */
.page-seg-flower .garden{
  display:grid;
  place-items:center;
  padding: 12px 0 26px;
}

.page-seg-flower .flower-wrapper{
  position: relative;
  width: min(980px, 96vw);
  height: min(980px, 96vw);
  margin: 14px auto 0;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  overflow: visible;
  filter: drop-shadow(0 22px 70px rgba(0,0,0,.60));
}

.page-seg-flower .flower-bg{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  pointer-events:none;
  user-select:none;

  filter:
    drop-shadow(0 26px 70px rgba(0,0,0,.62))
    drop-shadow(0 0 34px rgba(170,120,255,.10));
}

.page-seg-flower #petals-layer{
  position:absolute;
  inset:0;
  z-index: 6;
}

.page-seg-flower .flower-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 7;
}

.page-seg-flower .flower-center button{
  width: 150px;
  height: 150px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(12px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.34),
    0 0 30px rgba(170,120,255,.12);

  padding: 14px;
  color: inherit;
  cursor:pointer;

  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}

.page-seg-flower .flower-center button:hover{
  transform: translateY(-2px) scale(1.01);
  background: rgba(0,0,0,.16);
  box-shadow:
    0 22px 68px rgba(0,0,0,.42),
    0 0 40px rgba(170,120,255,.16);
}

.page-seg-flower .flower-center .label{
  display:block;
  font-size: 13px;
  letter-spacing:.06em;
  opacity:.92;
  font-weight:900;
}

.page-seg-flower .flower-center .word{
  display:block;
  margin-top:8px;
  font-family:"Georgia", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing:.06em;
  text-shadow: 0 0 16px rgba(255,255,255,.16);
}

.page-seg-flower .petal{
  position:absolute;
  left:50%;
  top:50%;

  width: 220px;
  height: 62px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);

  color:#fff;
  font-weight: 900;
  font-size: 18px;
  letter-spacing:.04em;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 0 14px;
  white-space: nowrap;

  box-shadow:
    0 16px 44px rgba(0,0,0,.36),
    0 0 26px rgba(120,190,255,.06),
    inset 0 0 12px rgba(255,255,255,.02);

  transition: filter .18s ease, opacity .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
  user-select:none;
  z-index: 6;
}

.page-seg-flower .petal:hover{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.10);
  box-shadow:
    0 18px 52px rgba(0,0,0,.42),
    0 0 34px rgba(170,120,255,.10),
    inset 0 0 10px rgba(255,255,255,.03);
  filter: brightness(1.06);
}

.page-seg-flower .petal.locked{
  opacity:.45;
  cursor:not-allowed;
}

@keyframes segPetalGood{
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.20); }
  100% { filter: brightness(1.06); }
}
.page-seg-flower .petal.is-good{
  animation: segPetalGood .38s ease-out;
  border-color: rgba(0,255,180,.45);
  box-shadow:
    0 18px 56px rgba(0,0,0,.44),
    0 0 44px rgba(0,255,180,.14),
    inset 0 0 14px rgba(0,255,180,.06);
}

@keyframes segPetalWrong{
  0%   { opacity:1; }
  45%  { opacity:.72; filter: blur(2px) saturate(.95); }
  100% { opacity:1; }
}
.page-seg-flower .petal.is-wrong-temp{
  animation: segPetalWrong .45s ease-in-out;
  border-color: rgba(255,120,120,.45);
}

.page-seg-flower .flower-wrapper::after{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.18),
      rgba(170,120,255,.18) 30%,
      rgba(0,255,200,.10) 52%,
      rgba(0,0,0,0) 74%);
  opacity: 0;
  transform: scale(.92);
  filter: blur(14px);
  pointer-events:none;
  transition: opacity .35s ease, transform .45s ease;
  z-index: 2;
}

@keyframes segHaloPulse{
  0%   { opacity: 0; transform: scale(.92); }
  55%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: .85; transform: scale(1.00); }
}

.page-seg-flower .flower-wrapper.is-success::after{
  opacity: 1;
  transform: scale(1.02);
  animation: segHaloPulse .65s ease-out;
}

.page-seg-flower .sparkle{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index: 5;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.85), transparent 36%),
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.75), transparent 36%),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,.70), transparent 36%),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.65), transparent 36%);
  mix-blend-mode: screen;
  filter: blur(1px);
}

@keyframes segSparkle{
  0%{ opacity:0; transform: translateY(8px) scale(.96); }
  45%{ opacity:1; transform: translateY(0) scale(1); }
  100%{ opacity:0; transform: translateY(-12px) scale(1.03); }
}

.page-seg-flower .flower-wrapper.is-success .sparkle{
  animation: segSparkle .85s ease-out;
}

/* =========================================================
   JEU DU POMMIER — SANS GRAND ENCART (mais énoncés gardés)
========================================================= */
.page-pommier .jeu-carte{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.page-pommier .enonces,
.page-pommier .enonces-box,
.page-pommier .statements,
.page-pommier .task-box{
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
  padding: 14px 14px !important;
}

.page-pommier .enonces .opt,
.page-pommier .enonces .row,
.page-pommier .enonces-box .opt,
.page-pommier .task-box .opt{
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
}

/* =========================================================
   CARTES / HUBS (logographique, math, etc.)
========================================================= */
.zone-jeux{
  max-width: 1100px;
  margin: 26px auto 0;
  padding: 0 22px;
  text-align:left;
}

.zone-jeux h2{
  margin: 0 0 12px;
  font-family:"Georgia", serif;
  letter-spacing:.06em;
}

.grid-jeux{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}

.card-link{
  display:block;
  position:relative;
  z-index: 5;
}

.card{
  width:100%;
  border-radius:18px;
  padding:16px 18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .12s ease, background .12s ease;
}

.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
}

.card-emoji{ font-size:28px; margin-bottom:6px; }
.card-title{ font-weight:800; font-size:18px; }
.card-desc{ opacity:.88; margin-top:6px; line-height:1.35; }
.card-cta{ margin-top:10px; font-weight:700; opacity:.95; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 950px){
  .hero{ padding:150px 18px 80px; }

  .portails{
    grid-template-columns:1fr;
    max-width:560px;
    gap:26px;
  }

  .hero-header h1{ font-size:44px; }
  .top-nav{ padding:16px 18px; }
  .top-nav ul{ gap:24px; }

  .phono-header{ flex-direction:column; }
  .mots-grille{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .foret-titre{ font-size:44px; }

  .cles-grille{ grid-template-columns:repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 520px){
  .hero-header h1{ font-size:36px; }

  /* portes plus petites mobile aussi */
  .portail-img{ width:min(260px, 96%); }

  .liens-magiques{ max-width:360px; }

  .mots-grille{ grid-template-columns:1fr; }
  .badge-lettre{ width:64px; height:64px; font-size:26px; }
  .mot-emoji{ font-size:72px; }
  .foret-titre{ font-size:42px; }

  .cles-grille{ grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .cle-lettre{ font-size:26px; }

  .page-seg-flower .flower-wrapper{
    width: min(96vw, 560px);
    height: min(96vw, 560px);
  }
  .page-seg-flower .flower-center button{
    width: 140px;
    height: 140px;
  }
  .page-seg-flower .petal{
    width: 205px;
    height: 60px;
    font-size: 17px;
  }

/* =========================================================
   HERO — CIEL DES ÉRUDITS (fond plus mature)
========================================================= */
.hero-erudits{
  background:
    radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.92)),
    url("images/classe-erudit.png") center/cover no-repeat;
}

}