/*
 Theme Name: CodyCrossPuzzle — GeneratePress Child
 Theme URI: https://www.codycrosspuzzle.com
 Description: Child theme for GeneratePress (CodyCrossPuzzle)
 Author: You
 Version: 1.0.0
 Template: generatepress
 Text Domain: codycrosspuzzle
*/

/* =========================
   TOKENS / COULEURS
   ========================= */
:root{
  --cc-violet:#1f0c5a;
  --cc-card:#3a268d;
  --cc-yl:#ffde59;       /* jaune UI */
  --cc-or:#ff9f2e;       /* orange UI */
  --cc-green:#19b84a;    /* hamburger */
  --cc-green-dark:#0f8f3a;
  --cc-glow:rgba(255,255,255,.25);
}

/* =========================
   LAYOUT DE BASE / HERO
   ========================= */
.cc-home{min-height:100vh;background:var(--cc-violet);color:#fff}
html, body { height: 100%; overflow-x:hidden; }

.cc-hero{
  height: 100dvh; min-height: 100svh; min-height: 100vh;
  background: var(--cc-hero-bg) center / cover no-repeat; /* défini inline dans front-page.php */
  display:flex;align-items:center;justify-content:center;
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
#primary.site-main{ padding:0; margin:0; }
body.home .site-content, body.home .site-main, body.home #primary{
  margin:0 !important; padding-top:0 !important; padding-bottom:0 !important;
}

/* =========================
   HEADER / BRANDING / NAV
   ========================= */
/* Header au-dessus du hero, pas de clipping */
body.home .site-header{
  position:absolute; top:0; left:0; right:0;
  background:transparent; z-index:500;
}
body.home.admin-bar .site-header{ top:32px; }

/* Branding natif masqué visuellement (pour éviter le doublon), accessibilité OK */
.site-branding .main-title,
.site-branding .site-description{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Contexte et hauteur du header pour ancrer le bouton */
.site-header .inside-header{
  position: relative;
  min-height: 72px; /* ajuste si besoin */
}

/* Conteneur nav : pas de clip */
.site-header .main-navigation{
  position: relative;
  overflow: visible !important;
}

/* ======= Bouton HAMBURGER (mobile) =======
   - Centré verticalement à droite du header
   - Pour changer l'écart du bord droit → modifier "right:16px"
*/
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{
    position:absolute;
    top:50%; transform:translateY(-50%);
    right:16px;                    /* ← AJUSTER ICI si tu veux + à droite/gauche */
    width:44px; height:44px;
    border:0; border-radius:12px; padding:0;
    display:flex !important; align-items:center; justify-content:center;
    cursor:pointer; z-index:600;
    background: linear-gradient(180deg, var(--cc-green), var(--cc-green-dark));
    box-shadow: 0 6px 0 #0b6d2c, 0 14px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  }
  /* cache l'icône SVG GP par défaut */
  .site-header .main-navigation .menu-toggle .gp-icon svg{ display:none !important; }
  /* 3 barres custom */
  .site-header .main-navigation .menu-toggle .gp-icon{
    position:absolute; left:50%; top:14px; transform:translateX(-50%);
    width:22px; height:2px; background:#fff; border-radius:2px;
  }
  .site-header .main-navigation .menu-toggle .gp-icon::before,
  .site-header .main-navigation .menu-toggle .gp-icon::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    height:2px; background:#fff; border-radius:2px; display:block;
  }
  .site-header .main-navigation .menu-toggle .gp-icon::before{ width:18px; top:8px; }
  .site-header .main-navigation .menu-toggle .gp-icon::after{  width:14px; top:16px; }

  /* masque éventuel libellé "Menu" */
  .site-header .main-navigation .menu-toggle .mobile-menu{
    font-size:0; line-height:0; color:transparent;
  }
}

/* ======= Menu mobile affiché quand .toggled est présent (fallback) ======= */
@media (max-width:980px){
  .main-navigation .main-nav { display: none; }
  .main-navigation.toggled .main-nav{
    display:block;
    position:absolute;
    top: calc(100% + 8px); left:12px; right:12px;
    background: rgba(26,10,77,0.97);
    border-radius:16px; padding:12px; z-index:550;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .main-navigation.toggled .main-nav ul{
    list-style:none; margin:0; padding:0; display:grid; gap:10px;
  }
  .main-navigation.toggled .main-nav a{
    display:block; padding:10px 12px; color:#fff; font-weight:700;
    text-decoration:none; border-radius:10px;
  }
  .main-navigation.toggled .main-nav a:active{ background: rgba(255,255,255,.08); }
}

/* =========================
   BANNIÈRE / TITRES
   ========================= */
.cc-hero__inner{
  position:relative; z-index:2;
  width:min(860px,92vw);
  text-align:center;
  transform: translateY(-2vh);
}

.cc-top-banner{ position: relative; display:flex; justify-content:center; margin:6px 0 8px; }
.cc-top-banner img{
  width:min(92vw, 860px); height:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

/* Titre générique si utilisé hors bannière */
.cc-title{
  font-size:clamp(26px,7.5vw,42px);
  margin:6px 0 10px; font-weight:800; text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.cc-title span{ color: var(--cc-yl); }

/* Titre posé SUR la bannière + sous-titre "Answers" */
.cc-top-banner .cc-title.cc-title--on-banner{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:35%;
  margin:0;
  font-size:clamp(16px,5.2vw,30px) !important;
  line-height:1.05; font-weight:800; letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25);
  white-space:nowrap; text-align:center;
}
.cc-top-banner .cc-title.cc-title--on-banner span{ color:#ffde59; }
/* Sous-ligne Answers si présente (em.cc-answers) */
.cc-top-banner .cc-title.cc-title--on-banner .cc-answers{
  display:block; margin-top:4px; font-style:normal; font-weight:800;
  font-size: clamp(12px, 3.8vw, 18px); color:#ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25);
}
@media (max-width:420px){
  .cc-top-banner .cc-title.cc-title--on-banner{ top:33%; font-size:clamp(15px, 5vw, 26px) !important; }
  .cc-top-banner .cc-title.cc-title--on-banner .cc-answers{ font-size:clamp(11px, 3.6vw, 16px); }
}

/* =========================
   LISTE DES WORLDS
   ========================= */
.cc-sub{ opacity:.9; margin:6px 0 14px; font-size:14px }

.cc-world-list{
  display:flex; flex-direction:column; gap:10px;
  max-height: 56vh; overflow:auto; padding: 2px;
  margin: 8px auto 0; width:min(92vw, 700px);
  -webkit-overflow-scrolling: touch;
}
.cc-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:58px; padding:14px 16px; border:0; cursor:pointer; text-align:left;
  border-radius:18px; color:#4a2200;
  background: linear-gradient(180deg, var(--cc-yl), var(--cc-or));
  box-shadow: 0 8px 0 #b35f00, 0 16px 28px rgba(0,0,0,.35), inset 0 1px 0 #fff7b8;
  font-weight:800;
  transition: transform .06s ease, box-shadow .06s ease;
}
.cc-row:active{
  transform: translateY(3px);
  box-shadow: 0 5px 0 #b35f00, 0 10px 18px rgba(0,0,0,.35), inset 0 1px 0 #fff7b8;
}
.cc-row-label{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-row-chevron{ font-size:18px; opacity:.85; }

/* =========================
   ÉTAPE GROUP
   ========================= */
.cc-range{ margin: 4px 0 6px; font-size: 12px; opacity: .9; }
.cc-group-picker{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:12px }
.cc-spinner{ display:flex; align-items:center; gap:10px }
.cc-spin{
  width:48px; height:48px; border:0; border-radius:14px; cursor:pointer; font-size:22px; font-weight:800;
  background:var(--cc-card); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.06);
}
.cc-group-input{
  width:130px; height:52px; border-radius:16px; border:0; background:var(--cc-card); color:#fff;
  text-align:center; font-size:20px; box-shadow: inset 0 2px 0 rgba(255,255,255,.05);
}
.cc-primary{
  border:0; border-radius:24px; padding:12px 20px; font-weight:800; cursor:pointer;
  background:linear-gradient(180deg,var(--cc-yl),var(--cc-or)); color:#4a2200;
  box-shadow:0 8px 0 #b35f00, 0 16px 28px rgba(0,0,0,.35), inset 0 1px 0 #fff7b8;
}

/* =========================
   ÉTAPE PUZZLES (1..5)
   ========================= */
.cc-grid{ display:grid; gap:12px }
.cc-puzzle-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:8px }
@media (max-width:420px){
  .cc-puzzle-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.cc-card{
  border:0; border-radius:18px; padding:18px; min-height:86px; cursor:pointer; text-align:center;
  background:var(--cc-card); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .06s ease;
}
.cc-card:active{ transform: translateY(2px); }
.cc-puzzle-num{ font-weight:800; font-size:16px }
.cc-inline-links{ margin-top:10px }
.cc-link{ color:#ffd54a; text-decoration:underline }
.cc-back{
  align-self:flex-start; margin:0 0 8px 0; border:0; background:transparent; color:#fff; font-weight:700; cursor:pointer;
}

/* NUDGE: descendre légèrement le hamburger en mobile */
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{
    /* +8px sous le centrage vertical — augmente si tu veux le baisser plus */
    transform: translateY(calc(-50% + 27px)) !important;
  }
}
/* === CodyCross style search bar — fix fond blanc iOS/Chrome === */
.cc-search-lite{
  width: min(92vw, 860px);
  margin: 8px auto 16px;
  position: relative;

  /* image fournie en background (bleu + flèches) */
  background: url('https://www.codycrosspuzzle.com/wp-content/uploads/2025/08/search-bar-Edited.png') center / 100% 100% no-repeat;

  border-radius: 22px;
  aspect-ratio: 1020 / 166;

  display:flex; align-items:center; justify-content:center;
  padding: 0 12%;
}

/* Champ transparent (vraiment), sans style natif, texte blanc */
.ccq-input{
  width:100%;
  height: calc(100% - 26px);

  /* neutralise tous les fonds & styles imposés */
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;

  color: #fff;                 /* texte saisi = blanc */
  -webkit-text-fill-color:#fff;/* iOS/Chrome autofill */
  caret-color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: clamp(16px, 4.6vw, 26px);
  line-height: 1.15;
  border-radius: 16px; /* arrondi interne doux */
}

/* Placeholder blanc (tous navigateurs) */
.ccq-input::placeholder{ color:#fff; opacity:.95; }
.ccq-input:-ms-input-placeholder{ color:#fff; }
.ccq-input::-ms-input-placeholder{ color:#fff; }

/* Supprime les gadgets du search iOS (loupe/cancel) */
.ccq-input::-webkit-search-decoration,
.ccq-input::-webkit-search-cancel-button,
.ccq-input::-webkit-search-results-button,
.ccq-input::-webkit-search-results-decoration { display:none; }

/* Évite le jaune de l’autofill */
.ccq-input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* Bouton: zone cliquable sur la flèche droite du visuel */
.ccq-btn{
  position:absolute; right:0; top:0; bottom:0;
  width:16%;
  background: transparent; border: 0;
  text-indent: -9999px; cursor: pointer;
}

/* Petits écrans */
@media (max-width:380px){
  .cc-search-lite{
    aspect-ratio: auto;
    height: 56px;
    background-size: cover;
    padding: 0 18%;
  }
} /* ← important : on ferme bien ce @media */

/* --- Ajustements search bar : placeholder -10% & hauteur +5% --- */
.cc-search-lite{ aspect-ratio: 1020 / 174; } /* 166 * 1.05 ≈ 174 */
.ccq-input::placeholder{ font-size: 90%; }
.ccq-input::-ms-input-placeholder{ font-size: 90%; }
.ccq-input:-ms-input-placeholder{ font-size: 90%; }

/* Fallback mobile (garder la hauteur +5%) */
@media (max-width:380px){
  .cc-search-lite{ height: 59px; }
}
/* Pastille lisible pour "Or choose your World..." (étape 1) */
.cc-v2 .cc-hero__inner{ position:relative; z-index:3; }

.cc-v2 .cc-step[data-step="1"] > .cc-sub{
  color:#fff !important;
  display:inline-block;
  padding:8px 12px;
  margin:6px 0 14px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(20,10,70,.82), rgba(10,5,40,.78)) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Pastille plus claire pour le sous-titre (étape 1) */
.cc-v2 .cc-step[data-step="1"] > .cc-sub{
  background: linear-gradient(
    180deg,
    rgba(20,10,70,.18),   /* avant ~.82  → plus clair */
    rgba(10,5,40,.55)     /* avant ~.78  → plus clair */
  ) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
/* Header au-dessus du contenu quand bannière présente (home + global) */
body.home .site-header,
body.cc-has-banner .site-header{
  position:absolute; top:0; left:0; right:0;
  background:transparent; z-index:500;
}

/* Ajuste si barre d’admin WordPress */
body.admin-bar.home .site-header,
body.admin-bar.cc-has-banner .site-header{
  top:32px;
}
/* Bannière globale (mêmes styles que la home) */
.cc-top-banner--global{ position:relative; display:flex; justify-content:center; margin:6px 0 8px; }
.cc-top-banner--global img{
  width:min(92vw, 860px); height:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{ z-index:600; }
}
/* ===== Header absolu & z-index partout où on veut la bannière (home + global) ===== */
body.home .site-header,
body.cc-has-banner .site-header{
  position:absolute; top:0; left:0; right:0;
  background:transparent; z-index:600;
}
body.admin-bar.home .site-header,
body.admin-bar.cc-has-banner .site-header{ top:32px; }

/* ===== Bannière globale (mêmes styles que la home) ===== */
.cc-top-banner--global{
  position:relative;
  display:flex; justify-content:center;
  /* Laisse de la place sous le header absolu */
  margin: clamp(76px, 11vw, 120px) auto 8px;
}
body.admin-bar .cc-top-banner--global{
  margin-top: clamp(108px, 13vw, 140px);
}
.cc-top-banner--global img{
  width:min(92vw, 860px); height:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
/* Titre posé sur la bannière (reprend tes règles existantes) */
.cc-top-banner--global .cc-title.cc-title--on-banner{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top:35%;
  margin:0;
  font-size:clamp(16px,5.2vw,30px);
  line-height:1.05; font-weight:800; letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25);
  white-space:nowrap; text-align:center;
}
.cc-top-banner--global .cc-title.cc-title--on-banner span{ color:#ffde59; }
.cc-top-banner--global .cc-title.cc-title--on-banner .cc-answers{
  display:block; margin-top:4px; font-style:normal; font-weight:800;
  font-size: clamp(12px, 3.8vw, 18px); color:#ffffff;
  text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.25);
}

/* ===== Assure la visibilité du hamburger mobile au-dessus de la bannière ===== */
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{
    z-index:700;
    /* si tu veux le descendre encore un peu : augmente la valeur ci-dessous */
    transform: translateY(calc(-50% + 27px)) !important;
  }
}
/* === Fix bannière globale poussée + fond blanc === */

/* 1) Corps violet partout quand la bannière globale est active */
body.cc-has-banner{
  background: var(--cc-violet);
}

/* 2) Supprime le padding/marge par défaut de GeneratePress en haut du contenu */
body.cc-has-banner .site-content{ padding-top:0 !important; }
body.cc-has-banner .site-main{ padding-top:0 !important; margin-top:0 !important; }
body.cc-has-banner .inside-header{ margin-bottom:0 !important; padding-bottom:0 !important; }

/* 3) Espace sous le header absolu (AJUSTE ICI si tu veux plus/moins) */
.cc-top-banner--global{
  margin: 84px auto 8px !important;  /* ← baisse/monte la bannière en changeant 84px */
}
body.admin-bar .cc-top-banner--global{
  margin-top: 116px !important;      /* 84 + 32px pour la barre d’admin WP */
}

/* 4) Assure la priorité du hamburger au-dessus de la bannière */
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{ z-index:700; }
}
/* === PATCH — Bannière globale + Hamburger (GP) === */

/* 1) Fond violet partout quand la bannière globale est active */
body.cc-has-banner{ background: var(--cc-violet); }

/* 2) On neutralise les espacements par défaut en haut */
body.cc-has-banner .site-content,
body.cc-has-banner .site-main{
  padding-top:0 !important; margin-top:0 !important;
}
body.cc-has-banner .inside-header{
  margin:0 !important; padding:0 !important;
}

/* 3) Position exacte de la bannière globale (ajuste la valeur si besoin) */
.cc-top-banner--global{
  margin: 56px auto 8px !important;  /* ↓ augmente/diminue pour monter/descendre l’image */
}
body.admin-bar .cc-top-banner--global{
  margin-top: 88px !important;       /* 56 + ~32px pour la barre admin WP */
}

/* 4) Ne garder visible/cliquer QUE le hamburger du menu principal */
.site-header .menu-toggle{ display:none !important; }
.site-header .main-navigation .menu-toggle{
  display:flex !important;
  position:absolute; right:16px; top:50%;
  transform: translateY(-50%) !important; /* supprime l’ancien “nudge” */
  width:44px; height:44px; z-index:700;
  border:0; border-radius:12px; padding:0; cursor:pointer;
  background: linear-gradient(180deg, var(--cc-green), var(--cc-green-dark));
  box-shadow: 0 6px 0 #0b6d2c, 0 14px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}

/* 5) Icône 3 barres custom + cache l’icône GP */
.site-header .main-navigation .menu-toggle .gp-icon svg{ display:none !important; }
.site-header .main-navigation .menu-toggle .gp-icon{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:22px; height:2px; background:#fff; border-radius:2px;
}
.site-header .main-navigation .menu-toggle .gp-icon::before,
.site-header .main-navigation .menu-toggle .gp-icon::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  height:2px; background:#fff; border-radius:2px; display:block;
}
.site-header .main-navigation .menu-toggle .gp-icon::before{ width:18px; top:8px; }
.site-header .main-navigation .menu-toggle .gp-icon::after{  width:14px; top:16px; }
/* Masque le libellé “Menu” éventuel */
.site-header .main-navigation .menu-toggle .mobile-menu{ font-size:0; line-height:0; color:transparent; }

/* 6) Contexte de positionnement */
.site-header .main-navigation{ position:relative; }

/* 7) Comportement mobile du menu (fallback) */
@media (max-width:980px){
  .main-navigation .main-nav{ display:none; }
  .main-navigation.toggled .main-nav{
    display:block; position:absolute; top:calc(100% + 8px); left:12px; right:12px;
    background:rgba(26,10,77,.97); border-radius:16px; padding:12px; z-index:650;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
  }
}
/* --- Supprimer tout l'espace au-dessus du contenu quand la bannière est là --- */
body.cc-has-banner .site-content,
body.cc-has-banner .site-main,
body.cc-has-banner #primary,
body.home .site-content,
body.home .site-main,
body.home #primary{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Pas de marge au-dessus de la bannière (home + global) */
.cc-top-banner,
.cc-top-banner--global{
  margin-top:0 !important;
}

/* Par sécurité, neutraliser un éventuel padding/margin interne du container */
.content-area,
.inside-article{
  padding-top:0 !important;
  margin-top:0 !important;
}
/* Force white title on all CodyCross banners (home + global) */
.cc-top-banner .cc-title--on-banner,
.cc-top-banner--global .cc-title--on-banner{
  color:#fff !important;
}

/* If the H1 is wrapped in a link anywhere, keep it white too */
.cc-top-banner .cc-title--on-banner a,
.cc-top-banner--global .cc-title--on-banner a{
  color:#fff !important;
  text-decoration:none;
}

/* Keep “Puzzle” yellow */
.cc-top-banner .cc-title--on-banner span,
.cc-top-banner--global .cc-title--on-banner span{
  color:#ffde59 !important;
}
/* === Step 2 — mauve pills for "Groups X–Y" and "Select your Group" === */
.cc-v2 .cc-step[data-step="2"] > .cc-range{
  display:inline-block;
  color:#fff !important;
  background: linear-gradient(180deg, rgba(58,38,141,.96), rgba(31,12,90,.92)); /* mauve */
  border-radius:14px;
  padding:8px 12px;
  margin: 6px auto 6px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* keep it on its own line, centered */
.cc-v2 .cc-step[data-step="2"] > .cc-sub{
  display:block; width:fit-content;
  color:#fff !important;
  background: linear-gradient(180deg, rgba(58,38,141,.92), rgba(31,12,90,.88)); /* mauve */
  border-radius:14px;
  padding:8px 12px;
  margin: 6px auto 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
/* === Step 3 (puzzles) — titres en pilules mauves === */
.cc-v2 .cc-step[data-step="3"] .cc-step-title,
.cc-v2 .cc-step[data-step="3"] > .cc-sub{
  display:inline-block;
  padding:8px 12px;
  margin:6px 0 12px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(20,10,70,.18), rgba(10,5,40,.55));
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Taille/poids cohérents pour le H2 "Group 21" */
.cc-v2 .cc-step[data-step="3"] .cc-step-title{
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 800;
  line-height: 1.1;
}
/* Étape 3 — pilules mauves empilées (l'une au-dessus de l'autre) */
.cc-v2 .cc-step[data-step="3"] .cc-step-title,
.cc-v2 .cc-step[data-step="3"] > .cc-sub{
  /* même style que l'étape 2, mais empilé */
  display: block;
  width: fit-content;           /* garde une pilule à la largeur du texte */
  margin: 6px auto 12px;        /* centrage */
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,10,70,.18), rgba(10,5,40,.55));
  color:#fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cc-v2 .cc-step[data-step="3"] .cc-step-title{
  font-size: clamp(16px, 4.2vw, 22px);
  font-weight: 800;
  line-height: 1.1;
}

/* Bouton Back en bas et centré pour l'étape 3 */
.cc-v2 .cc-step[data-step="3"] .cc-back{
  align-self: center;           /* override du flex-start global */
  margin: 14px auto 0;
}
/* Étape 2 — bouton Back en bas et centré */
.cc-v2 .cc-step[data-step="2"] .cc-back{
  align-self: center;      /* override du flex-start global */
  margin: 14px auto 0;     /* espace au-dessus et centrage */
}
/* Bannière cliquable vers la home */
.cc-top-banner--link{
  display:flex;              /* conserve la mise en page actuelle */
  justify-content:center;
  position:relative;         /* garde le titre overlay */
  text-decoration:none;      /* pas de soulignement */
  color:inherit;             /* garde le blanc/jaune du titre */
  cursor:pointer;
}

/* accessibilité focus au clavier */
.cc-top-banner--link:focus-visible{
  outline:3px solid #ffd54a;
  outline-offset:4px;
  border-radius:12px;
}

/* Laisse le clic passer sur toute l'image/titre */
.cc-top-banner--link img{ pointer-events:none; }
/* --- Banner link helper (cliquable partout, aucun changement visuel) --- */
.cc-banner-link{
  display:inline-block;
  position:relative;
  text-decoration:none;
  color:inherit;
}
.cc-banner-link img{ display:block; }
/* --- Fix : rendre la bannière cliquable partout --- */

/* Le header reste au-dessus du contenu, mais sous la bannière */
body.home .site-header,
body.cc-has-banner .site-header{
  z-index: 600; /* ne pas monter plus */
}

/* La bannière passe au-dessus du header -> donc cliquable partout */
.cc-top-banner--global,
.cc-top-banner{
  position: relative;
  z-index: 650;     /* > header */
}

/* Le bouton hamburger doit rester cliquable par-dessus la bannière */
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{
    z-index: 700;   /* > bannière */
  }
}

/* Lien de bannière : surface cliquable propre et sans drag sur l'image */
.cc-banner-link{ display: inline-block; position: relative; text-decoration: none; color: inherit; }
.cc-top-banner--global img,
.cc-top-banner img{ display:block; pointer-events:none; }
/* === FINAL FIX — Banner clickable + hamburger visible === */

/* 1) Le header est au-dessus visuellement, mais “laisse passer” les clics */
body.home .site-header,
body.cc-has-banner .site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index: 900;              /* > bannière */
  background: transparent;
  pointer-events: none;      /* clics traversent le header */
}

/* 2) La bannière peut rester sous le header (elle recevra les clics quand même) */
.cc-top-banner,
.cc-top-banner--global{
  position: relative;
  z-index: 800;              /* < header, mais header est click-through */
}

/* 3) On réactive les clics UNIQUEMENT sur les éléments utiles du header */
.site-header .main-navigation,
.site-header .main-navigation .menu-toggle,
.site-header .main-navigation .main-nav,
.site-header .main-navigation .main-nav a{
  pointer-events: auto;
}

/* 4) Hamburger bien visible et cliquable en mobile */
@media (max-width:980px){
  .site-header .main-navigation .menu-toggle{
    position: absolute;
    top: 50%;
    right: 16px;             /* ← change ici pour le décaler */
    transform: translateY(-50%);
    z-index: 950;            /* > header + > bannière */
  }
}

/* 5) Sécurité : l’image de bannière ne “mange” pas les clics du header */
.cc-top-banner img,
.cc-top-banner--global img{ pointer-events: none; }
/* === CodyCross — panneau Puzzle list (home step 3) === */
.cc-pz{ width:min(720px,92vw); margin:10px auto 0; }

/* En-tête jaune façon jeu */
.cc-pz-title{
  display:block; text-align:center; font-weight:800; color:#4a2200;
  background:linear-gradient(180deg,var(--cc-yl),var(--cc-or));
  padding:12px 18px; border-radius:18px;
  font-size:clamp(16px,5vw,22px); line-height:1.1;
  box-shadow:0 8px 0 #b35f00, 0 16px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  margin:0 auto 10px;
}
.cc-pz-title .cc-group-num{ color:#4a2200; }

/* Cartouche violet du panneau */
.cc-pz-panel{
  background:linear-gradient(180deg, #5533be, #3b1d98);
  border-radius:26px; padding:12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Liste et lignes */
.cc-pz-list{ list-style:none; margin:0; padding:10px; display:grid; gap:12px; }
.cc-pz-li{ margin:0; }

/* Ligne type bouton */
.cc-pz-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:linear-gradient(180deg, rgba(255,243,238,.98), rgba(255,224,208,.98));
  color:#1d0c40; text-align:left; cursor:pointer;
  border:0; border-radius:18px; padding:14px 12px 14px 14px;
  box-shadow:0 6px 0 rgba(179,95,0,.55), 0 12px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .06s ease, box-shadow .06s ease;
}
.cc-pz-item:active{
  transform: translateY(2px);
  box-shadow:0 4px 0 rgba(179,95,0,.55), 0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Partie gauche : pastille bleue + libellé */
.cc-pz-left{ display:flex; align-items:center; gap:10px; }
.cc-pz-bullet{
  width:28px; height:8px; border-radius:6px;
  background:linear-gradient(180deg,#2f7ae6,#0c4fb3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.cc-pz-name{ font-weight:800; font-size:18px; }

/* Bouton Play vert (décoratif) */
.cc-pz-play{
  position:relative; flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(180deg, #1fd26b, #0f8f3a);
  box-shadow: 0 6px 0 #0b6d2c, 0 12px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.cc-pz-play::before{
  content:""; position:absolute; left:14px; top:11px;
  border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #fff;
}

/* Petits écrans : resserrer un peu */
@media (max-width:420px){
  .cc-pz{ width:min(92vw, 560px); }
  .cc-pz-item{ padding:12px; }
  .cc-pz-name{ font-size:16px; }
  .cc-pz-play{ width:36px; height:36px; }
  .cc-pz-play::before{ left:12px; top:9px; border-width:8px 0 8px 12px; }
}
/* ===== CodyCross — Ajustements puzzles (alignés sur la capture) ===== */

/* Texte "Puzzle X" : plus grand/gras + ombre douce */
.cc-pz-name{
  font-weight: 900;                 /* encore plus “bold” */
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.05;
  color: #0f1340;                   /* bleu très foncé (in-game) */
  text-shadow: 0 1px 0 rgba(255,255,255,.55); /* léger emboss clair */
}

/* Pastille bleue plus large et un peu “3D” */
.cc-pz-bullet{
  width: 34px;
  height: 10px;
  border-radius: 7px;
  background: linear-gradient(180deg,#2f7ae6,#0c4fb3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(0,0,0,.18);
}

/* Alternance des lignes : 1/3/5 = A (un peu plus soutenu), 2/4 = B (plus clair) */
.cc-pz-item{
  background: linear-gradient(180deg, rgba(255,243,238,.98), rgba(255,224,208,.98)); /* A */
}
.cc-pz-li:nth-child(even) .cc-pz-item{
  background: linear-gradient(180deg, rgba(255,238,233,.98), rgba(255,217,201,.98)); /* B plus clair */
}

/* Bouton play : petit centrage optique (triangle bien centré) */
.cc-pz-play{ display:inline-block; }

/* Pagination sous le panneau : liens apparents, même style que “cc-back” */
.cc-g-nav.under-panel .nav-link{
  text-decoration: none;
  font-weight: 800;
  color: #fff;
}
.cc-g-nav.under-panel .nav-link:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* Espace confortable avant la search bar (déjà ajouté inline, on complète) */
.cc-g-nav.under-panel{ margin-bottom: 8px; }

/* Petits écrans : garde la hiérarchie visuelle */
@media (max-width: 420px){
  .cc-pz-name{ font-size: 18px; }
  .cc-pz-bullet{ width: 30px; height: 9px; }
}

/* Alternance des lignes puzzles (1 foncé, 2 clair, 3 foncé, 4 clair, 5 foncé) */
.cc-pz-list .cc-pz-li:nth-child(odd)  .cc-pz-item{
  /* “normal” (foncé) – identique à ton style actuel */
  background: linear-gradient(180deg, rgba(255,243,238,.98), rgba(255,224,208,.98));
}
.cc-pz-list .cc-pz-li:nth-child(even) .cc-pz-item{
  /* “clair” (plus lumineux) */
  background: linear-gradient(180deg, rgba(255,250,247,.98), rgba(255,232,216,.98));
}

/* Texte “Puzzle X” plus épais et bleu profond comme l’app */
.cc-pz-name{
  color:#1b0f49;                 /* bleu nuit */
  font-weight:800;
  font-size:clamp(18px,4.6vw,22px);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* Pastille bleue un peu plus “embossée” */
.cc-pz-bullet{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 0 rgba(0,0,0,.18);
}
/* Liste de clues (cards) */
.cc-results{ list-style:none; padding:0; margin:12px 0; display:grid; gap:12px; }
.cc-result{
  background:var(--cc-card);
  color:#fff; border-radius:16px; padding:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.cc-result a{
  color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:2px;
}
.cc-result a:hover{ opacity:.95; }
.cc-excerpt{ opacity:.92; font-size:14px; margin-top:6px; }