/*
Theme Name: La Clé Cachée
Theme URI: https://la-clee-cachee.com
Author: La Clé Cachée
Author URI: https://la-clee-cachee.com
Description: Thème sur mesure de La Clé Cachée — plateforme d'escape games en ligne, ludiques et éducatifs. Moteur de roman visuel complet (escapes narratifs, mini-jeux, cours de sciences du Biologiste), multijoueur coopératif à vote, bibliothèque avec démos et accès bêta, traduction automatique multilingue, thème sombre et clair. Palette bleu nuit / doré / cuivre, typographie Cormorant Garamond + Inter.
Version: 1.68.40
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-cle-cachee
Tags: custom, escape-game, education, multiplayer, dark, gold, french
*/
/* NB : la Version ci-dessus est celle AFFICHÉE dans Apparence → Thèmes.
   La version technique (cache-busting des assets) vit dans functions.php
   (LCC_VERSION) — penser à monter les DEUX à chaque patch. */

/* ============================================
   VARIABLES & RESET
   ============================================ */
:root {
  --bleu-nuit: #0F1E3D;
  --bleu-nuit-deep: #0A1530;
  --noir: #0A0A0F;
  --dore: #D4B16A;
  --dore-clair: #E5C68A;
  --cuivre: #B97A5A;
  --blanc-casse: #F5EFE6;
  /* v0.24 : contrast WCAG AA — opacité remontée pour passer >= 4.5:1 sur le bleu nuit */
  --gris-doux: rgba(245, 239, 230, 0.82);   /* texte secondaire ~7:1 */
  --gris-faible: rgba(245, 239, 230, 0.62); /* hint / meta ~5:1 (passable AA) */
  --bordure-doree: rgba(212, 177, 106, 0.22);
  --bg-header: rgba(10, 21, 48, 0.92);
  --bg-card: rgba(15, 30, 61, 0.6);
}

/* --- THÈME CLAIR --- */
:root[data-theme="light"] {
  --bleu-nuit:      #FAF7F0;   /* fond ivoire */
  --bleu-nuit-deep: #F0EAD9;
  --noir:           #2B1F12;   /* texte foncé */
  /* v0.86 : #966C20 mesuré à 4.40:1 sur #FAF7F0 (audit live) → échec AA (4.5).
     Approfondi à #8A5F16 (~5.3:1) pour les usages TEXTE (liens, nav active,
     titres H3, compteurs). Reste un doré, juste un cran plus profond. */
  --dore:           #8A5F16;
  --dore-clair:     #6F4F18;
  --cuivre:         #7A3D26;
  --blanc-casse:    #1F1509;   /* texte principal très foncé, ratio ~17:1 */
  --gris-doux:      rgba(31, 21, 9, 0.82);  /* secondaire ~9:1 */
  --gris-faible:    rgba(31, 21, 9, 0.6);   /* hint ~5.5:1 */
  --bordure-doree:  rgba(150, 108, 32, 0.38);
  --bg-header:      rgba(250, 247, 240, 0.92);
  --bg-card:        rgba(240, 234, 217, 0.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* v0.13.6 : overflow-x: hidden DÉPLACÉ de body vers html.
   v0.13.7 : on passe à position: FIXED pour le header (cf. plus bas).
   Pour compenser le retrait du flow, on réserve l'espace via padding-top
   sur le body, calé sur la variable --lcc-header-height. */
:root { --lcc-header-height: 92px; }
@media (max-width: 768px) { :root { --lcc-header-height: 76px; } }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bleu-nuit);
  color: var(--blanc-casse);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--lcc-header-height, 92px);
}

h1, h2, h3, h4, .serif {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

a { color: var(--dore); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--dore-clair); }

img { max-width: 100%; height: auto; display: block; }

/* ============================================
   HEADER & NAV
   ============================================ */
.site-header {
  /* v0.13.7 : FIXED au lieu de sticky — garantie 100 % qu'aucun overflow
     parent ne le décolle. Body a un padding-top correspondant pour
     compenser le retrait du flow. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure-doree);
  transition: background 0.3s ease;
}
/* v0.13.9 : compensation WP admin bar (uniquement pour les admins connectés
   qui voient la barre noire en haut). Pour les visiteurs lambda c'est top: 0. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .site-header { top: 0; } /* WP cache l'admin bar < 600px */
}

.nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--blanc-casse);
  flex-shrink: 0; /* le logo + nom ne doivent JAMAIS se rétrécir */
}

.site-logo:hover { color: var(--dore); }

.site-title-text {
  white-space: nowrap; /* "La Clé Cachée" reste sur une ligne */
}

.logo-mark {
  /* v1.42 — Réduit de 56px → 46px pour s'harmoniser avec la hauteur des
     liens du menu (~33px). Avant, le logo dépassait de ~11px au-dessus
     ET en-dessous des liens, ce qui donnait une impression de décalage. */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg, .logo-mark img { width: 100%; height: 100%; }

/* Footer : logo plus discret que le header (hiérarchie visuelle) */
.site-footer .logo-mark { width: 40px; height: 40px; }

/* Mobile : nom du site plus petit pour tenir sur une ligne sans tout pousser */
@media (max-width: 768px) {
  .site-logo { font-size: 20px; gap: 8px; }
  .logo-mark { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .site-logo { font-size: 17px; gap: 6px; }
  .logo-mark { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
  /* Ultra-compact : on cache le texte, le logo seul suffit */
  .site-title-text { display: none; }
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a {
  color: var(--blanc-casse);
  padding: 8px 14px;
  border-radius: 6px;
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
  /* v0.71 — Empêche les titres multi-mots (« Sélection du mois », « Créer un
     escape ») de wrapper sur 2 lignes quand l'écran se réduit. Si la place
     manque, le menu burger prend le relais (à partir de 980px). */
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--dore);
  background: rgba(212, 177, 106, 0.08);
}
.nav-links a.is-active {
  color: var(--dore);
}
.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--dore);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ============================================
   SÉLECTEUR DE LANGUE (natif + Polylang)
   ============================================ */
.lcc-lang-switcher { position: relative; display: inline-block; }

/* Bouton actuel */
.lcc-lang-current {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--bordure-doree);
  color: var(--blanc-casse);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.lcc-lang-current:hover { color: var(--dore); border-color: var(--dore); }
/* v0.23 : drapeau SVG flagcdn — image au lieu d'emoji pour cross-platform */
.lcc-lang-flag {
  display: inline-block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
  object-fit: cover;
}
img.lcc-lang-flag { transition: transform 0.15s ease; }
.lcc-lang-current:hover img.lcc-lang-flag,
.lcc-lang-menu a:hover img.lcc-lang-flag { transform: scale(1.08); }
.lcc-lang-code { letter-spacing: 1px; }

/* Menu déroulant — caché par défaut, visible quand .lcc-lang-switcher.is-open */
ul.lcc-lang-menu {
  display: none !important;
  position: absolute;
  top: 46px; right: 0;
  min-width: 200px;
  max-width: 240px;
  /* v1.68.15 — 34 langues → scroll interne quand la liste dépasse */
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  list-style: none; margin: 0; padding: 6px;
  background: var(--bg-header);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  z-index: 200;
  animation: lccLangMenuIn 0.18s ease;
}
ul.lcc-lang-menu::-webkit-scrollbar { width: 6px; }
ul.lcc-lang-menu::-webkit-scrollbar-track { background: transparent; }
ul.lcc-lang-menu::-webkit-scrollbar-thumb { background: rgba(212, 177, 106, 0.35); border-radius: 999px; }
.lcc-lang-switcher.is-open ul.lcc-lang-menu { display: block !important; }
@keyframes lccLangMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lcc-lang-current svg { transition: transform 0.2s ease; }
.lcc-lang-switcher.is-open .lcc-lang-current svg { transform: rotate(180deg); }
ul.lcc-lang-menu li { padding: 0; width: auto; height: auto; border: none; background: transparent; transform: none; display: list-item; border-radius: 0; }
ul.lcc-lang-menu a {
  display: flex !important; align-items: center; gap: 10px;
  width: auto !important; height: auto !important;
  padding: 8px 12px !important;
  border-radius: var(--radius-sm);
  color: var(--blanc-casse);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s ease;
}
ul.lcc-lang-menu a:hover { background: rgba(212, 177, 106, 0.10); color: var(--dore); }
ul.lcc-lang-menu .lcc-lang-name { flex: 1; }

/* Compatibilité Polylang : cible UNIQUEMENT les UL Polylang (pas les nôtres) */
.lcc-lang-switcher ul:not(.lcc-lang-menu) { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.lcc-lang-switcher ul:not(.lcc-lang-menu) li {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bordure-doree);
  transition: all 0.2s ease;
  overflow: hidden;
}
.lcc-lang-switcher ul:not(.lcc-lang-menu) li:hover { border-color: var(--dore); transform: scale(1.1); }
.lcc-lang-switcher ul:not(.lcc-lang-menu) .current-lang { border-color: var(--dore); background: rgba(212, 177, 106, 0.15); }
.lcc-lang-switcher ul:not(.lcc-lang-menu) a { display: block; width: 100%; height: 100%; padding: 4px; }
.lcc-lang-switcher ul:not(.lcc-lang-menu) img { width: 22px; height: 22px; border-radius: 50%; display: block; margin: auto; }

/* Light theme */
:root[data-theme="light"] .lcc-lang-current { color: #2B1F12; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .lcc-lang-current:hover { color: #6F4F18; border-color: #8A5F16; }
:root[data-theme="light"] .lcc-lang-menu { background: #FFFDF7; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .lcc-lang-menu a { color: #2B1F12; }
:root[data-theme="light"] .lcc-lang-menu a:hover { background: rgba(184, 146, 61, 0.10); color: #6F4F18; }

/* ============================================
   RÉSULTATS DE RECHERCHE
   ============================================ */
.lcc-search-list { list-style: none; padding: 0; margin: 0; }
.lcc-search-item {
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.lcc-search-item:hover { border-color: var(--dore); transform: translateX(4px); }
.lcc-search-item h3 { margin: 0 0 6px; font-size: 20px; font-family: 'Cormorant Garamond', serif; }
.lcc-search-item h3 a { color: var(--dore); text-decoration: none; }
.lcc-search-item h3 a:hover { color: var(--dore-clair); }
.lcc-search-item p { color: var(--gris-doux); font-size: 14px; margin: 0 0 6px; }
.lcc-search-url { color: var(--gris-faible); font-size: 12px; word-break: break-all; }
:root[data-theme="light"] .lcc-search-item { background: #FFFDF7; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .lcc-search-item h3 a { color: #6F4F18; }
:root[data-theme="light"] .lcc-search-item p { color: rgba(43, 31, 18, 0.78); }
:root[data-theme="light"] .lcc-search-url { color: rgba(43, 31, 18, 0.45); }

/* ============================================
   COOKIE BANNER RGPD
   ============================================ */
.lcc-cookie-banner {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: 999;
  background: var(--bg-header);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  animation: lccCookieIn 0.4s ease;
  max-width: 880px;
  margin: 0 auto;
}
@keyframes lccCookieIn {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.lcc-cookie-hide { transform: translateY(120%); opacity: 0; transition: all 0.3s ease; }
.lcc-cookie-inner {
  display: flex; gap: 16px; align-items: center;
  padding: 16px 20px;
}
.lcc-cookie-icon { font-size: 36px; flex-shrink: 0; }
.lcc-cookie-text { flex: 1; }
.lcc-cookie-text strong { color: var(--dore); display: block; margin-bottom: 4px; font-family: 'Cormorant Garamond', serif; font-size: 17px; }
.lcc-cookie-text p { font-size: 13px; color: var(--gris-doux); line-height: 1.5; margin: 0; }
.lcc-cookie-text a { color: var(--dore); }
.lcc-cookie-actions { flex-shrink: 0; }
:root[data-theme="light"] .lcc-cookie-banner {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
  box-shadow: 0 12px 40px rgba(60,40,10,0.15);
}
:root[data-theme="light"] .lcc-cookie-text strong { color: #6F4F18; }
:root[data-theme="light"] .lcc-cookie-text p { color: rgba(43, 31, 18, 0.78); }
@media (max-width: 600px) {
  .lcc-cookie-inner { flex-direction: column; text-align: center; }
  /* v0.73 — Retour Benjamin : sur mobile, les boutons « Tout accepter » et
     « Refuser le non-essentiel » étaient trop proches l'un de l'autre, risque
     de toucher le mauvais avec le pouce. On les empile en plein largeur avec
     un écart confortable. */
  .lcc-cookie-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .lcc-cookie-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   ANIMATIONS AU SCROLL (reveal premium)
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  .escape-card,
  .plan,
  .feature,
  .step,
  .creator-card,
  .account-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .lcc-revealed,
  .escape-card.lcc-revealed,
  .plan.lcc-revealed,
  .feature.lcc-revealed,
  .step.lcc-revealed,
  .creator-card.lcc-revealed,
  .account-card.lcc-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RECHERCHE SITE — bouton loupe + modale Spotlight
   ============================================ */
.lcc-search-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bordure-doree);
  color: var(--blanc-casse);
  cursor: pointer;
  transition: all 0.2s ease;
}
.lcc-search-toggle:hover { color: var(--dore); border-color: var(--dore); transform: scale(1.08); }
:root[data-theme="light"] .lcc-search-toggle { color: #2B1F12; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .lcc-search-toggle:hover { color: #6F4F18; border-color: #8A5F16; }

/* === Modale plein écran === */
.lcc-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
}
.lcc-search-modal.is-open { display: flex; }
.lcc-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 24, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lccSearchFadeIn 0.18s ease;
}
.lcc-search-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  background: #0A1530;
  border: 1px solid var(--bordure-doree);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(212, 177, 106, 0.18) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: lccSearchSlideDown 0.22s ease;
}
:root[data-theme="light"] .lcc-search-modal__panel {
  background: #FFFDF7;
  box-shadow: 0 30px 80px rgba(43, 31, 18, 0.35),
              0 0 0 1px rgba(184, 146, 61, 0.25) inset;
}
@keyframes lccSearchFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lccSearchSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form en haut de la modale */
.lcc-search-modal__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(212, 177, 106, 0.18);
}
.lcc-search-modal__icon {
  display: inline-flex;
  color: var(--dore);
  flex-shrink: 0;
}
.lcc-search-modal__form input[type="search"] {
  flex: 1;
  padding: 10px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--blanc-casse);
  font-size: 18px;
  font-family: inherit;
}
:root[data-theme="light"] .lcc-search-modal__form input[type="search"] { color: #2B1F12; }
.lcc-search-modal__form input[type="search"]::placeholder { color: var(--gris-doux); opacity: 0.7; }
.lcc-search-modal__close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  color: var(--blanc-casse);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.lcc-search-modal__close:hover { color: var(--dore); border-color: var(--dore); }
:root[data-theme="light"] .lcc-search-modal__close { color: #2B1F12; }

/* Zone résultats */
.lcc-search-modal__results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}
.lcc-search-modal__hint,
.lcc-search-modal__results .lcc-sugg-empty,
.lcc-search-modal__results .lcc-sugg-loading {
  padding: 28px 20px;
  text-align: center;
  color: var(--gris-doux);
  font-size: 14px;
}
.lcc-search-modal__results a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: var(--blanc-casse);
  text-decoration: none;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.35;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lcc-search-modal__results a:hover,
.lcc-search-modal__results a.is-active {
  background: rgba(212, 177, 106, 0.16);
  color: var(--dore);
  transform: translateX(2px);
}
:root[data-theme="light"] .lcc-search-modal__results a { color: #2B1F12; }
:root[data-theme="light"] .lcc-search-modal__results a:hover,
:root[data-theme="light"] .lcc-search-modal__results a.is-active {
  background: rgba(184, 146, 61, 0.18);
  color: #6F4F18;
}
.lcc-search-modal__results .lcc-sugg-thumb {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bordure-doree);
}
.lcc-search-modal__results .lcc-sugg-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.lcc-search-modal__results .lcc-sugg-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}
.lcc-search-modal__results .lcc-sugg-type {
  font-size: 11px;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.lcc-search-modal__results .lcc-sugg-more {
  display: block;
  text-align: center;
  border-top: 1px solid rgba(212, 177, 106, 0.18);
  margin: 8px -8px -8px;
  padding: 14px;
  font-size: 14px;
  color: var(--dore);
  font-weight: 600;
}

/* Footer avec raccourcis */
.lcc-search-modal__footer {
  border-top: 1px solid rgba(212, 177, 106, 0.18);
  padding: 10px 18px;
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--gris-doux);
  flex-wrap: wrap;
}
.lcc-search-modal__footer kbd {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: rgba(212, 177, 106, 0.12);
  border: 1px solid rgba(212, 177, 106, 0.3);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--blanc-casse);
}
:root[data-theme="light"] .lcc-search-modal__footer kbd { color: #2B1F12; }

/* Body lock quand modale ouverte */
body.lcc-search-modal-open { overflow: hidden; }

/* ============================================
   ACCESSIBILITÉ
   ============================================ */

/* Skip link : caché par défaut, visible au focus clavier (Tab) */
.lcc-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 12px 22px;
  background: var(--dore);
  color: #1a1408;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.2s ease;
  font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.lcc-skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Main wrapper : présent sur toutes les pages (header.php → footer.php).
   tabindex="-1" permet au skip link d'y déposer le focus, mais on ne veut
   pas d'outline visuel sur le bloc lui-même (on garde le focus-visible
   sur les éléments interactifs internes). */
.site-main { display: block; }
.site-main:focus { outline: none; }
.site-main:focus-visible { outline: none; }

/* Logo principal en image PNG (depuis v0.9.0). On lui donne un petit
   smoothing et un léger drop-shadow doré pour mieux ressortir sur les
   fonds sombres et clairs. */
.lcc-brand-logo {
  display: block;
  object-fit: contain;
  /* v0.85 — Retour Benjamin : le logo paraissait pixelisé. Cause : `crisp-edges`
     force un downscale au plus proche voisin (escalier) sur le PNG 512px rendu à
     56px. On repasse en interpolation lisse (auto) → bords nets et propres. */
  image-rendering: auto;
}
.site-logo .lcc-brand-logo {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
:root[data-theme="light"] .site-logo .lcc-brand-logo {
  filter: drop-shadow(0 1px 1px rgba(120, 80, 20, 0.18));
}

/* Focus-visible global : outline doré clair, partout où l'utilisateur navigue
   au clavier. Pas affiché en cas de clic souris (focus-visible standard). */
*:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Boutons et liens : suppression de l'outline par défaut au clic souris,
   conservé au clavier */
button, a, input, select, textarea { outline: none; }
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 3px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.lcc-toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  pointer-events: none;
}
.lcc-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #0A1530;
  border: 1px solid var(--bordure-doree);
  border-radius: 12px;
  color: var(--blanc-casse);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lcc-toast.is-visible { opacity: 1; transform: translateY(0); }
.lcc-toast.is-leaving { opacity: 0; transform: translateY(-10px); }
.lcc-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 14px;
}
.lcc-toast--success .lcc-toast__icon { background: rgba(46, 204, 113, 0.2); color: #2ECC71; }
.lcc-toast--error   .lcc-toast__icon { background: rgba(231, 76, 60, 0.2);  color: #E74C3C; }
.lcc-toast--warning .lcc-toast__icon { background: rgba(241, 196, 15, 0.22); color: #F1C40F; }
.lcc-toast--info    .lcc-toast__icon { background: rgba(212, 177, 106, 0.22); color: var(--dore); }
.lcc-toast--success { border-left: 3px solid #2ECC71; }
.lcc-toast--error   { border-left: 3px solid #E74C3C; }
.lcc-toast--warning { border-left: 3px solid #F1C40F; }
.lcc-toast--info    { border-left: 3px solid var(--dore); }
.lcc-toast__msg { flex: 1; line-height: 1.4; }
.lcc-toast__action {
  background: transparent;
  border: 1px solid var(--bordure-doree);
  color: var(--dore);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.lcc-toast__action:hover { background: rgba(212, 177, 106, 0.12); }
.lcc-toast__close {
  background: transparent;
  border: none;
  color: var(--gris-doux);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.lcc-toast__close:hover { color: var(--blanc-casse); }
:root[data-theme="light"] .lcc-toast {
  background: #FFFDF7;
  color: #2B1F12;
  border-color: rgba(184, 146, 61, 0.4);
}
@media (max-width: 480px) {
  .lcc-toast-container { left: 12px; right: 12px; max-width: none; bottom: 12px; }
}

/* Classe utilitaire screen-reader only */
.lcc-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respect global de prefers-reduced-motion : désactive toutes les animations
   et transitions non-essentielles. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive : sur mobile, la modale prend toute la largeur,
   le footer raccourcis se cache (clavier physique pas pertinent),
   le panneau flotte plus haut. */
@media (max-width: 640px) {
  .lcc-search-modal { padding: 16px 10px; align-items: stretch; }
  .lcc-search-modal__panel { max-width: 100%; border-radius: 14px; }
  .lcc-search-modal__form { padding: 12px 14px; gap: 10px; }
  .lcc-search-modal__form input[type="search"] { font-size: 16px; padding: 8px 0; }
  .lcc-search-modal__results { max-height: 70vh; }
  .lcc-search-modal__results .lcc-sugg-thumb { width: 38px; height: 38px; }
  .lcc-search-modal__results .lcc-sugg-title { font-size: 15px; }
  .lcc-search-modal__footer { display: none; }
}

/* ============================================
   SKELETONS (état de chargement)
   ============================================ */
.lcc-skeleton {
  background: linear-gradient(
    90deg,
    rgba(212, 177, 106, 0.06) 0%,
    rgba(212, 177, 106, 0.18) 50%,
    rgba(212, 177, 106, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: lccSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  border: 1px solid rgba(212, 177, 106, 0.1);
}
@keyframes lccSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.lcc-skeleton-card {
  height: 360px;
  border-radius: 14px;
  margin-bottom: 18px;
}
.lcc-skeleton-line {
  height: 14px;
  margin-bottom: 8px;
}
.lcc-skeleton-line.short  { width: 40%; }
.lcc-skeleton-line.medium { width: 70%; }
.lcc-skeleton-line.long   { width: 95%; }
:root[data-theme="light"] .lcc-skeleton {
  background: linear-gradient(
    90deg,
    rgba(184, 146, 61, 0.08) 0%,
    rgba(184, 146, 61, 0.20) 50%,
    rgba(184, 146, 61, 0.08) 100%
  );
}

/* ============================================
   EMPTY STATES (état "pas de résultats")
   ============================================ */
.lcc-empty-state {
  text-align: center;
  padding: 60px 20px;
  max-width: 520px;
  margin: 0 auto;
  color: var(--gris-doux);
}
.lcc-empty-state__icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.55;
  line-height: 1;
}
.lcc-empty-state__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: var(--dore);
  margin: 0 0 12px;
}
.lcc-empty-state__text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.lcc-empty-state__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BEST TIME BADGE (carte escape)
   ============================================ */
.escape-card-best {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* v0.97 — mobile : « par X » passe à la ligne en bloc, le temps reste entier */
  gap: 4px 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
  background: linear-gradient(135deg, rgba(212, 177, 106, 0.15), rgba(184, 146, 61, 0.08));
  border: 1px solid rgba(212, 177, 106, 0.4);
  border-radius: 8px;
  font-size: 13px;
  color: var(--blanc-casse);
  position: relative;
  overflow: hidden;
}
.escape-card-best::before {
  content: '🏆';
  font-size: 18px;
  margin-right: 4px;
}
.escape-card-best strong {
  color: var(--dore);
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap; /* v0.97 — « 2 min 42 s » ne se casse plus verticalement */
}
.escape-card-best em {
  color: var(--dore-clair);
  font-style: normal;
  font-weight: 600;
  margin-left: 2px;
}
:root[data-theme="light"] .escape-card-best {
  background: linear-gradient(135deg, rgba(212, 177, 106, 0.20), rgba(184, 146, 61, 0.10));
  border-color: rgba(184, 146, 61, 0.5);
  color: #2B1F12;
}
:root[data-theme="light"] .escape-card-best strong { color: #6F4F18; }
:root[data-theme="light"] .escape-card-best em { color: #8A5F16; }

/* ============================================
   AVIS & ÉTOILES
   ============================================ */
.lcc-stars { letter-spacing: 2px; display: inline-block; }
.lcc-rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
  font-size: 32px;
  margin: 8px 0;
}
.lcc-rating-input input { display: none; }
.lcc-rating-input label {
  cursor: pointer;
  color: rgba(212, 177, 106, 0.25);
  transition: color 0.15s ease;
}
.lcc-rating-input input:checked ~ label,
.lcc-rating-input label:hover,
.lcc-rating-input label:hover ~ label { color: var(--dore); }

.lcc-reviews-list { list-style: none; padding: 0; margin: 0; }
.lcc-review {
  display: flex; gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.lcc-review-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.lcc-review-body { flex: 1; }
.lcc-review-header {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.lcc-review-header small { color: var(--gris-doux); margin-left: auto; }
.lcc-review p { font-size: 14px; line-height: 1.55; color: var(--blanc-casse); margin: 0; }
:root[data-theme="light"] .lcc-review { background: #FFFDF7; }
:root[data-theme="light"] .lcc-review p { color: #2B1F12; }

/* ============================================
   BADGES / SUCCÈS
   ============================================ */
.lcc-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.lcc-badge {
  text-align: center;
  padding: 20px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
}
.lcc-badge.unlocked {
  border-color: var(--dore);
  box-shadow: 0 0 24px rgba(212, 177, 106, 0.18);
}
.lcc-badge.locked { opacity: 0.35; filter: grayscale(0.8); }
.lcc-badge.unlocked:hover { transform: translateY(-3px); box-shadow: 0 0 32px rgba(212, 177, 106, 0.30); }
.lcc-badge-icon { font-size: 36px; margin-bottom: 8px; }
.lcc-badge-name { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--dore); margin-bottom: 4px; font-weight: 600; }
.lcc-badge-desc { font-size: 12px; color: var(--gris-doux); line-height: 1.4; }
.lcc-badge-when { font-size: 11px; color: var(--dore-clair); margin-top: 8px; opacity: 0.7; }
:root[data-theme="light"] .lcc-badge { background: #FFFDF7; border-color: rgba(184, 146, 61, 0.35); }
:root[data-theme="light"] .lcc-badge.unlocked { border-color: #8A5F16; }
:root[data-theme="light"] .lcc-badge-name { color: #6F4F18; }
:root[data-theme="light"] .lcc-badge-desc { color: rgba(43, 31, 18, 0.78); }

/* ============================================
   NOTIFICATIONS BELL
   ============================================ */
.lcc-notif-bell-wrap { position: relative; }
.lcc-notif-bell {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bordure-doree);
  color: var(--blanc-casse);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.lcc-notif-bell:hover {
  border-color: var(--dore);
  color: var(--dore);
  transform: rotate(15deg) scale(1.08);
}
.lcc-notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-header);
}
.lcc-notif-panel {
  position: absolute;
  top: 48px; right: 0;
  width: 360px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--bg-header);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  z-index: 200;
}
/* v1.02 — Mobile : le panneau notif (width:360px, right:0) débordait/était rogné
   par le bord de l'écran (≤390px). On le passe en fixed, ancré sous le header,
   quasi pleine largeur, avec les marges de sécurité (encoche). */
@media (max-width: 600px) {
  .lcc-notif-panel {
    position: fixed;
    top: calc(var(--lcc-header-height, 76px) + 6px);
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 70vh;
    max-height: 70dvh;
  }
}
.lcc-notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure-doree);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--dore);
}
.lcc-notif-header a { font-size: 12px; color: var(--gris-doux); font-family: 'Inter', sans-serif; }
.lcc-notif-header a:hover { color: var(--dore); }
.lcc-notif-list { list-style: none; margin: 0; padding: 0; }
.lcc-notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--gris-doux);
  font-size: 14px;
}
.lcc-notif-item {
  display: flex; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(212, 177, 106, 0.10);
  font-size: 13px;
  transition: background 0.15s ease;
}
.lcc-notif-item:hover { background: rgba(212, 177, 106, 0.06); }
.lcc-notif-item.unread { background: rgba(212, 177, 106, 0.08); }
.lcc-notif-item.unread::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--dore);
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
}
.lcc-notif-icon { font-size: 18px; flex-shrink: 0; }
.lcc-notif-body { flex: 1; }
.lcc-notif-body a { color: var(--blanc-casse); text-decoration: none; }
.lcc-notif-body a:hover { color: var(--dore); }
.lcc-notif-body small { display: block; color: var(--gris-doux); margin-top: 4px; font-size: 11px; }
.lcc-notif-footer {
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--bordure-doree);
}
.lcc-notif-footer a { color: var(--dore); font-size: 13px; }

/* v0.23 : boutons suppression notifs (poubelle globale + croix individuelle) */
.lcc-notif-clear-all {
  background: transparent;
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: rgba(245, 239, 230, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.lcc-notif-clear-all:hover {
  border-color: #c0392b;
  color: #ff8270;
  background: rgba(192, 57, 43, 0.08);
}
.lcc-notif-item { position: relative; }
.lcc-notif-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(245, 239, 230, 0.35);
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lcc-notif-item:hover .lcc-notif-delete { opacity: 1; }
.lcc-notif-delete:hover { color: #ff8270; background: rgba(192, 57, 43, 0.12); }
.lcc-notif-delete:focus-visible { opacity: 1; outline: 2px solid #ff8270; outline-offset: 1px; }

/* Theme toggle button */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bordure-doree);
  color: var(--blanc-casse);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--dore);
  color: var(--dore);
  transform: rotate(20deg);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Burger pour mobile */
.nav-burger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--bordure-doree);
  border-radius: 6px;
  background: transparent;
  color: var(--blanc-casse);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-burger svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    /* Aligné à droite, sous le burger, sans s'étirer sur toute la largeur */
    left: auto;
    right: 16px;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    flex-direction: column;
    /* v0.99 — Fond OPAQUE : avant (var(--bg-header) translucide) le titre du hero
       traversait le menu → effet « bazard ». Solide = lisible. */
    background: var(--bleu-nuit);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--dore);
    border-radius: 12px;
    padding: 10px;
    gap: 2px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    text-align: right;
  }
  .nav-links li,
  .nav-links a {
    width: 100%;
    text-align: right;
    padding: 10px 14px;
    border-radius: 8px;
  }
  .nav-links a:hover { background: rgba(212, 177, 106, 0.10); }
  .nav-links.is-open { display: flex; }
  .nav-burger { display: inline-flex; }
}

/* ============================================
   HEADER RESPONSIVE — v0.69
   Sur petits écrans, on retire progressivement les éléments non-critiques
   de .nav-actions pour éviter le débordement. Le burger menu reste TOUJOURS
   accessible et la connexion est toujours atteignable.

   Ordre de masquage par priorité décroissante :
   1. < 768px : bouton « S'inscrire » (l'user peut s'inscrire depuis Connexion)
   2. < 600px : loupe recherche (Ctrl+K reste, Cmd+K sur Mac)
   3. < 600px : sélecteur de langue (dispo dans Mon Compte > Préférences)
   4. < 600px : pseudo dans user-pill (avatar seul)
   5. < 380px : theme-toggle (iPhone SE — accessible via Mon Compte)
   ============================================ */
@media (max-width: 768px) {
  .nav { padding: 14px 20px; gap: 12px; }
  .nav-actions { gap: 8px; }
  /* « S'inscrire » : retiré pour gagner de la place. L'utilisateur peut
     toujours arriver à l'inscription depuis le bouton Connexion. */
  .nav-actions .btn-primary { display: none; }
}
@media (max-width: 600px) {
  .nav { padding: 12px 16px; gap: 8px; }
  /* v1.68.9 — Rétablis sur mobile après retour user (« pas la sélection de la
     langue ni la barre de recherche »). Icônes compactes 36px, gap serré. */
  .lcc-search-toggle { display: inline-flex; width: 36px; height: 36px; }
  .lcc-lang-switcher { display: inline-block; }
  .lcc-lang-switcher ul:not(.lcc-lang-menu) li { width: 26px; height: 26px; }
  .lcc-lang-switcher ul:not(.lcc-lang-menu) img { width: 18px; height: 18px; }
  /* Bouton « Connexion » compact */
  .nav-actions .btn-ghost {
    padding: 7px 12px;
    font-size: 13px;
  }
  /* User-pill : juste l'avatar, sans le pseudo (qui peut être long) */
  .user-pill { padding: 3px; gap: 0; }
  .user-pill-name { display: none; }
  .user-pill-avatar { width: 32px; height: 32px; }
  /* Boutons à 36px pour cohérence visuelle et confort tactile */
  .theme-toggle,
  .nav-burger { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  /* iPhone SE / ultra-compact : on retire aussi le theme-toggle.
     L'utilisateur peut switcher de thème depuis Mon Compte > Préférences. */
  .nav-actions .theme-toggle { display: none; }
  .nav-actions { gap: 6px; }
  .nav { padding: 10px 12px; gap: 6px; }
}

/* ============================================
   BOUTONS
   ============================================ */
.btn {
  padding: 10px 22px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  display: inline-block;
  font-family: inherit;
  text-align: center;
}

.btn-ghost {
  color: var(--blanc-casse);
  border-color: rgba(245, 239, 230, 0.3);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--dore); color: var(--dore); }

.btn-primary {
  background: var(--dore);
  /* v0.24.2 : texte presque noir + bold 700 pour bien sortir du gradient or */
  color: #0a0a0a !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.btn-primary:hover {
  background: var(--dore-clair);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(212, 177, 106, 0.25);
}

.btn-large { padding: 14px 32px; font-size: 15px; }

.btn-block { width: 100%; }

/* ============================================
   HERO — version simple v0.64 (retour au design sobre)
   Halos dorés + animation discrète. Pas de SVG paysage, pas de fog,
   pas de stars/grain/runes/fireflies — juste un fond propre et élégant.
   ============================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  overflow: hidden;
  isolation: isolate;
  background:
    /* Halo doré principal au-dessus, en haut-droite */
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(212, 177, 106, 0.18), transparent 65%),
    /* Halo cuivré secondaire en bas-gauche */
    radial-gradient(ellipse 55% 45% at 22% 78%, rgba(185, 122, 90, 0.16), transparent 65%),
    /* Vignette douce au centre */
    radial-gradient(ellipse at center, rgba(15, 30, 61, 0) 0%, rgba(10, 16, 32, 0.55) 100%),
    /* Couleur de base avec léger dégradé vertical pour profondeur */
    linear-gradient(180deg, var(--bleu-nuit) 0%, var(--bleu-nuit-deep) 70%, #060d1f 100%);
}

/* v0.65 — 2 clés décoratives sobres (gauche/droite) + brume légère qui drift.
   Tout en currentColor → s'adapte au light/dark via override. */
/* v1.42 — On masque les 2 grandes clés statiques : remplacées par la brume +
   les lucioles du canvas (cf. js/lcc-hero-fx.js). Le SVG reste dans le DOM
   (front-page.php) pour ne pas casser l'historique CSS, mais display:none. */
.hero-key { display: none !important; }

/* v1.43 — Prairie retirée (revert). */

.hero-key-disabled-DEPRECATED {
  position: absolute;
  width: 200px;
  height: 400px;
  pointer-events: none;
  opacity: 0.09;
  color: #D4B16A;
  z-index: 0;
}
.hero-key--left  { top: 14%;  left: -50px;  transform: rotate(-22deg); animation: lccKeyDrift 22s ease-in-out infinite; }
.hero-key--right { bottom: 12%; right: -45px; transform: rotate(20deg); color: #B97A5A; animation: lccKeyDrift 26s ease-in-out infinite reverse; }
@keyframes lccKeyDrift {
  0%, 100% { transform: rotate(-22deg) translateY(0); }
  50%      { transform: rotate(-19deg) translateY(-14px); }
}
.hero-key--right { animation-name: lccKeyDriftRight; }
@keyframes lccKeyDriftRight {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50%      { transform: rotate(23deg) translateY(12px); }
}
:root[data-theme="light"] .hero-key { color: #8A5F16; opacity: 0.18; }
:root[data-theme="light"] .hero-key--right { color: #7A3D26; }

/* Brume légère qui drift très lentement (effet d'ambiance discret) */
.hero-fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 25% at 20% 65%, rgba(180, 190, 220, 0.05), transparent 65%),
    radial-gradient(ellipse 75% 28% at 80% 75%, rgba(180, 190, 220, 0.04), transparent 65%),
    radial-gradient(ellipse 100% 22% at 50% 88%, rgba(150, 160, 200, 0.07), transparent 60%);
  animation: lccHeroFogDrift 28s ease-in-out infinite alternate;
}
@keyframes lccHeroFogDrift {
  0%   { transform: translateX(0);    opacity: 0.95; }
  100% { transform: translateX(34px); opacity: 0.7; }
}
:root[data-theme="light"] .hero-fog {
  background:
    radial-gradient(ellipse 70% 25% at 20% 65%, rgba(122, 61, 38, 0.04), transparent 65%),
    radial-gradient(ellipse 75% 28% at 80% 75%, rgba(122, 61, 38, 0.03), transparent 65%),
    radial-gradient(ellipse 100% 22% at 50% 88%, rgba(122, 61, 38, 0.06), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-key, .hero-fog { animation: none !important; }
}
@media (max-width: 768px) {
  .hero-key { display: none; }
}

/* v0.64 — Halo central pulsant simple : le seul effet animé du hero,
   discret et élégant. Plus de SVG paysage / fog / stars / grain / runes / fireflies. */
.hero-glow {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(212, 177, 106, 0.14) 0%, rgba(212, 177, 106, 0.06) 35%, transparent 65%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: lccHeroGlowPulse 9s ease-in-out infinite;
  filter: blur(2px);
}
@keyframes lccHeroGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Reduced motion — on coupe l'animation du halo */
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none !important; }
}

.hero-content {
  text-align: center;
  max-width: 820px;
  position: relative;
  z-index: 2;
  /* Animation d'entrée subtile */
  animation: lccHeroContentIn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes lccHeroContentIn {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--dore);
  border-radius: 999px;
  color: var(--dore);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--blanc-casse);
  /* v0.64 — Text-shadow simple : retour à un relief léger. Plus besoin du
     halo multiple maintenant que le hero n'a plus de paysage dense. */
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero h1 em {
  color: var(--dore);
  font-style: italic;
  font-weight: 700;
  /* v0.58 — léger glow doré sur l'em pour signifier la « clé » */
  text-shadow: 0 0 22px rgba(212, 177, 106, 0.35), 0 4px 30px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #f3dca2 0%, #d4b16a 55%, #b48b4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
:root[data-theme="light"] .hero h1 em {
  background: linear-gradient(180deg, #b88a2a 0%, #966c20 55%, #6f4f18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
:root[data-theme="light"] .hero h1 {
  text-shadow: none;
}

.hero p {
  font-size: 18px;
  color: var(--gris-doux);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* v0.59 — Décorations hero ENRICHIES : clés (gauche/droite) + boussole +
   livre + engrenage. Toutes drift très subtilement pour donner vie.
   Color = currentColor → adapté automatiquement light/dark via :root override. */
.hero-deco {
  position: absolute;
  pointer-events: none;
  opacity: 0.10;
  color: #D4B16A;
  z-index: 0;
}
.hero-deco--key-left   { top: 12%; left: -55px;   transform: rotate(-22deg); animation: lccHeroDrift1 18s ease-in-out infinite; }
.hero-deco--key-right  { bottom: 10%; right: -55px; transform: rotate(20deg); color: #B97A5A; animation: lccHeroDrift2 22s ease-in-out infinite; }
.hero-deco--compass    { top: 8%; left: 4%; opacity: 0.08; animation: lccHeroRotate 80s linear infinite; }
.hero-deco--book       { bottom: 12%; right: 6%; opacity: 0.09; color: #B97A5A; animation: lccHeroDrift1 26s ease-in-out infinite reverse; }
.hero-deco--gear       { bottom: 6%; left: 8%; opacity: 0.07; animation: lccHeroRotate 60s linear infinite reverse; }
@keyframes lccHeroDrift1 {
  0%, 100% { transform: translateY(0) rotate(-22deg); }
  50%      { transform: translateY(-18px) rotate(-19deg); }
}
@keyframes lccHeroDrift2 {
  0%, 100% { transform: translateY(0) rotate(20deg); }
  50%      { transform: translateY(14px) rotate(23deg); }
}
@keyframes lccHeroRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Light mode : opacité plus marquée pour rester visible, doré profond */
:root[data-theme="light"] .hero-deco { color: #8A5F16; opacity: 0.18; }
:root[data-theme="light"] .hero-deco--compass { opacity: 0.14; }
:root[data-theme="light"] .hero-deco--gear { opacity: 0.13; }
:root[data-theme="light"] .hero-deco--book { color: #7A3D26; opacity: 0.16; }
:root[data-theme="light"] .hero-deco--key-right { color: #7A3D26; }
/* Reduced motion : on coupe les animations infinies */
@media (prefers-reduced-motion: reduce) {
  .hero-deco { animation: none !important; }
}
/* Mobile : on cache les décos compass/book/gear pour ne pas surcharger */
@media (max-width: 768px) {
  .hero-deco--compass,
  .hero-deco--book,
  .hero-deco--gear { display: none; }
  .hero-deco--key-left  { opacity: 0.07; }
  .hero-deco--key-right { opacity: 0.06; }
}

/* ============================================
   SECTIONS GÉNÉRIQUES
   ============================================ */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 32px;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-eyebrow {
  color: var(--dore);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}

.section h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 16px;
}

.section-header p {
  color: var(--gris-doux);
  max-width: 600px;
  margin: 0 auto;
  font-size: 17px;
}

/* ============================================
   CARTES ESCAPES
   ============================================ */
/* v0.94 — Sélection du mois : exactement 5 escapes. La grille auto-fill donnait
   un 3+2 bancal (vide à droite). On centre en flex → 3 en haut + 2 centrés en
   dessous = disposition harmonieuse et intentionnelle pour 5. */
.lcc-monthly-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 24px;
}
.lcc-monthly-grid > .escape-card {
  flex: 0 1 340px;
  max-width: 360px;
}
@media (max-width: 760px) {
  .lcc-monthly-grid > .escape-card { flex-basis: 100%; max-width: 460px; }
}

.escape-grid {
  display: grid;
  /* v0.13.1 : auto-fill (au lieu de auto-fit) → quand il y a peu de cartes,
     elles gardent leur taille naturelle au lieu de s'étirer sur toute la
     largeur. Le 1 escape Éducatif ne fait plus la largeur d'un cinéma. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 24px;
  justify-content: start;
}

/* v0.61 — CARROUSEL BIBLIOTHÈQUE — RETOUR au layout flex avec flèches sur
   les CÔTÉS (gauche/droite) du carrousel. Les flèches sont OUT de la zone
   de défilement (sibling flex) mais bien sur les côtés du track. */
.escape-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;  /* flèches centrées verticalement sur le track */
  gap: 10px;
  /* v0.85 — Espace horizontal + overflow visible : les flèches ont la place de
     grandir au survol (scale) sans être rognées par le bord de la section. */
  padding: 8px 8px;
  overflow: visible;
}
.escape-carousel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 6px 14px; /* bottom pour que la scrollbar ne mange pas les cartes */
  /* v0.61 — Scrollbar VISIBLE et STYLÉE doré (retour Benjamin) */
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 177, 106, 0.55) rgba(10, 21, 48, 0.4);
  /* v0.85 — Retour Benjamin : « le défilement se coupe net, c'est pas beau ».
     On adoucit les bords avec un dégradé de masque. Les classes .at-start /
     .at-end (posées par le JS du footer selon scrollLeft) retirent le fondu du
     côté où il n'y a plus rien à défiler, pour ne jamais griser la 1re/dernière
     carte quand on est en butée. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.escape-carousel.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.escape-carousel.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
}
.escape-carousel.at-start.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.escape-carousel::-webkit-scrollbar {
  height: 10px;
}
.escape-carousel::-webkit-scrollbar-track {
  background: rgba(10, 21, 48, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(212, 177, 106, 0.10);
}
.escape-carousel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(212, 177, 106, 0.55), rgba(150, 108, 32, 0.8));
  border-radius: 8px;
  border: 1px solid rgba(10, 21, 48, 0.6);
  transition: background 0.2s ease;
}
.escape-carousel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(212, 177, 106, 0.9), rgba(212, 177, 106, 1));
}
:root[data-theme="light"] .escape-carousel {
  scrollbar-color: rgba(150, 108, 32, 0.6) rgba(240, 234, 217, 0.5);
}
:root[data-theme="light"] .escape-carousel::-webkit-scrollbar-track {
  background: rgba(240, 234, 217, 0.5);
  border-color: rgba(150, 108, 32, 0.15);
}
:root[data-theme="light"] .escape-carousel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(150, 108, 32, 0.65), rgba(122, 61, 38, 0.85));
  border-color: rgba(240, 234, 217, 0.7);
}
/* 3 cartes visibles + 1 qui dépasse (peek). Calc :
   3 cartes pleines + 1 carte à 30 % visible = 3.3 cartes au total.
   Donc largeur d'une carte ≈ (100 % - 3 gaps) / 3.3 */
.escape-carousel > .escape-card {
  flex: 0 0 calc((100% - (24px * 3)) / 3.3);
  min-width: 260px;
  max-width: 380px;
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  /* 2.3 cartes visibles */
  .escape-carousel > .escape-card {
    flex: 0 0 calc((100% - (24px * 2)) / 2.3);
  }
}
@media (max-width: 700px) {
  /* v1.00 — Retour Benjamin : sur mobile, le carrousel horizontal ne montrait
     qu'UNE carte à la fois (« pas terrible »). On empile les cartes
     VERTICALEMENT → l'utilisateur fait défiler naturellement et voit toute la
     section. (Les flèches sont déjà masquées en mobile.) */
  .escape-carousel {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
    gap: 18px;
    padding: 4px 2px;
  }
  .escape-carousel > .escape-card {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: none;
  }
}

/* v0.59 — Flèches prev/next en FLEX ITEM (plus de position:absolute) :
   parfaitement alignées verticalement avec le carrousel via align-items:center
   sur le parent. Plus jamais d'erreur de position. */
.escape-carousel-btn {
  position: relative;
  flex: 0 0 auto;
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 177, 106, 0.55);
  background:
    radial-gradient(circle at 30% 30%, rgba(40, 55, 85, 0.95), rgba(10, 21, 48, 0.95));
  color: var(--dore, #D4B16A);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;
  opacity: 1;
}
.escape-carousel-btn svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.escape-carousel-btn:hover {
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 177, 106, 0.35), rgba(150, 108, 32, 0.65));
  border-color: var(--dore, #D4B16A);
  color: #fff;
  transform: scale(1.08);
  box-shadow:
    0 12px 32px rgba(212, 177, 106, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.45);
}
.escape-carousel-btn:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 3px;
}
.escape-carousel-btn:active {
  transform: scale(0.96);
}
.escape-carousel-btn.is-disabled {
  opacity: 0.25;
  pointer-events: none;
  transform: scale(0.92);
  filter: grayscale(0.6);
}
@media (max-width: 700px) {
  /* Sur mobile, on cache les boutons : le swipe natif suffit */
  .escape-carousel-btn { display: none; }
  .escape-carousel-wrap::before,
  .escape-carousel-wrap::after { display: none; }
}
/* Mode clair : versions adaptées des flèches */
:root[data-theme="light"] .escape-carousel-btn {
  background: radial-gradient(circle at 30% 30%, #FAF7F0, #EDE3CC);
  border-color: rgba(150, 108, 32, 0.45);
  color: var(--dore);
  box-shadow:
    0 8px 22px rgba(43, 31, 18, 0.18),
    0 2px 6px rgba(43, 31, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .escape-carousel-btn:hover {
  background: radial-gradient(circle at 30% 30%, #f3dca2, #d4b16a);
  border-color: var(--dore);
  color: #1F1509;
  box-shadow:
    0 12px 28px rgba(150, 108, 32, 0.35),
    0 4px 10px rgba(43, 31, 18, 0.18);
}

/* v0.13 — Bibliothèque : sections par type (Démo / Éducatif / Premium) */
.biblio-section {
  margin-bottom: 56px;
}
.biblio-section:last-child {
  margin-bottom: 0;
}
.biblio-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 177, 106, 0.25);
  flex-wrap: nowrap;
}
.biblio-section-title { flex-shrink: 0; }
.biblio-section-more { flex-shrink: 0; margin-left: auto; }

/* v0.13.5 : strips → dropdowns. Trigger fixe avec Niveau ▼ + valeur active,
   click ouvre un panel sous le trigger qui liste toutes les options. */
.biblio-section-strips {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  min-width: 0;
  flex-wrap: wrap;
}
.biblio-strip {
  position: relative;
  display: inline-block;
}
.biblio-strip-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 177, 106, 0.3);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gris-doux, #B5A989);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.biblio-strip-trigger:hover {
  border-color: var(--dore, #D4B16A);
  color: var(--dore, #D4B16A);
  background: rgba(212, 177, 106, 0.08);
}
.biblio-strip.is-open .biblio-strip-trigger,
.biblio-strip-trigger[aria-expanded="true"] {
  border-color: var(--dore, #D4B16A);
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore, #D4B16A);
}
.biblio-strip.is-active .biblio-strip-trigger {
  border-color: var(--dore, #D4B16A);
  background: rgba(212, 177, 106, 0.14);
  color: var(--dore, #D4B16A);
}
.biblio-strip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  opacity: 0.75;
}
.biblio-strip-value {
  font-weight: 600;
  color: inherit;
}
.biblio-strip.is-active .biblio-strip-value {
  color: #f5efe6;
}
.biblio-strip-chevron {
  transition: transform 0.2s ease;
  opacity: 0.7;
  flex-shrink: 0;
}
.biblio-strip.is-open .biblio-strip-chevron,
.biblio-strip-trigger[aria-expanded="true"] .biblio-strip-chevron {
  transform: rotate(180deg);
}

/* v0.84 — Tâche #1 : en mode clair, les pills de filtres (« Niveau Tout »,
   « Catégorie Tout », « Joueurs Tout ») utilisaient --gris-doux (#B5A989) sur
   fond crème → quasi illisibles. On renforce le contraste : texte brun foncé,
   bordure et fond dorés explicites. */
:root[data-theme="light"] .biblio-strip-trigger {
  border-color: rgba(150, 108, 32, 0.45);
  background: #FFFDF7;
  color: #5A3F12;
}
:root[data-theme="light"] .biblio-strip-trigger:hover {
  border-color: #8A5F16;
  background: rgba(150, 108, 32, 0.10);
  color: #5A3F12;
}
:root[data-theme="light"] .biblio-strip.is-open .biblio-strip-trigger,
:root[data-theme="light"] .biblio-strip-trigger[aria-expanded="true"],
:root[data-theme="light"] .biblio-strip.is-active .biblio-strip-trigger {
  border-color: #8A5F16;
  background: rgba(150, 108, 32, 0.16);
  color: #4A330D;
}
:root[data-theme="light"] .biblio-strip-label {
  color: #6F4F18;
  opacity: 1;
}
:root[data-theme="light"] .biblio-strip-value {
  color: #3D2A0A;
}
:root[data-theme="light"] .biblio-strip.is-active .biblio-strip-value {
  color: #4A330D;
}
/* Panel options en clair : fond clair lisible (le panel sombre par défaut
   jurait sur la page claire). */
:root[data-theme="light"] .biblio-strip-panel {
  background: #FFFDF7;
  border-color: rgba(150, 108, 32, 0.45);
}
:root[data-theme="light"] .biblio-strip-option {
  color: #4A330D;
}
:root[data-theme="light"] .biblio-strip-option:hover {
  background: rgba(150, 108, 32, 0.14);
  color: #5A3F12;
}
:root[data-theme="light"] .biblio-strip-option.is-current {
  background: rgba(150, 108, 32, 0.18);
  color: #4A330D;
}

/* Panel : liste des options sous le trigger, position absolute.
   v0.13.6 : ajout de [hidden] explicite — sinon le `display: flex` ci-dessous
   écrase l'attribut HTML `hidden` et les panels restent ouverts.
   v0.14.2 : élargi (320px), scrollbar visible, hauteur augmentée pour
   réduire la fréquence du scroll (les matières scolaires = ~20 items). */
.biblio-strip-panel[hidden] { display: none !important; }
.biblio-strip-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-width: 320px;
  background: rgba(15, 25, 40, 0.98);
  border: 1px solid rgba(212, 177, 106, 0.4);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 380px;
  overflow-y: auto;
  /* Scrollbar custom : fine, dorée discrète */
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 177, 106, 0.4) transparent;
  /* Animation d'apparition */
  animation: lcc-strip-panel-in 0.18s ease-out;
  transform-origin: top left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.biblio-strip-panel::-webkit-scrollbar { width: 6px; }
.biblio-strip-panel::-webkit-scrollbar-track { background: transparent; }
.biblio-strip-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 177, 106, 0.35);
  border-radius: 3px;
}
.biblio-strip-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 177, 106, 0.6);
}
@keyframes lcc-strip-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.biblio-strip-option {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gris-doux, #B5A989);
  text-decoration: none;
  transition: all 0.12s ease;
  /* v0.14.2 : retirer l'ellipsis qui rognait « Mathématiques »,
     « Géographie », « Philosophie », « Informatique »… Texte affiché
     en entier ; wrap autorisé si vraiment trop long. */
  white-space: normal;
  word-break: keep-all;
}
.biblio-strip-option:hover {
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore, #D4B16A);
}
.biblio-strip-option.is-current {
  background: rgba(212, 177, 106, 0.12);
  color: var(--dore, #D4B16A);
  font-weight: 600;
  position: relative;
}
.biblio-strip-option.is-current::before {
  content: '✓';
  margin-right: 6px;
  font-weight: 700;
}

/* Sur mobile, le panel s'aligne à droite si le strip est trop à droite */
@media (max-width: 700px) {
  .biblio-strip-panel { min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .biblio-strip-panel { animation: none; }
}
.biblio-strip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(212, 177, 106, 0.7);
  margin-right: 4px;
  white-space: nowrap;
}
.biblio-strip-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(212, 177, 106, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: var(--gris-doux, #B5A989);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.biblio-strip-chip:hover {
  border-color: var(--dore, #D4B16A);
  color: var(--dore, #D4B16A);
  background: rgba(212, 177, 106, 0.12);
  transform: translateY(-1px);
}

/* Sur tablette/mobile, le head se réorganise sur 2 lignes :
   ligne 1 = titre + lien « voir tout », ligne 2 = mini-bandeaux. */
@media (max-width: 900px) {
  .biblio-section-head {
    flex-wrap: wrap;
    gap: 12px;
  }
  .biblio-section-strips {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }
}

/* Bandeau « filtres actifs » discret quand on arrive via lien filtré */
.filters-active-banner {
  max-width: 1280px;
  margin: 0 auto 24px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(212, 177, 106, 0.08);
  border: 1px solid rgba(212, 177, 106, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gris-doux, #B5A989);
}
.filters-active-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  color: var(--dore, #D4B16A);
}
.filters-active-chips {
  flex: 1;
  color: #f5efe6;
  font-weight: 600;
}
.filters-active-reset {
  text-decoration: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: var(--cuivre, #B87333);
  transition: all 0.18s ease;
}
.filters-active-reset:hover {
  background: rgba(212, 177, 106, 0.15);
  border-color: var(--dore, #D4B16A);
  color: var(--dore, #D4B16A);
}
.biblio-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--dore, #D4B16A);
  margin: 0;
  letter-spacing: 0.5px;
}
.biblio-section-more {
  font-size: 13px;
  color: var(--gris-doux, #B5A989);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.biblio-section-more:hover {
  color: var(--dore, #D4B16A);
}
@media (max-width: 600px) {
  .biblio-section { margin-bottom: 40px; }
  .biblio-section-title { font-size: 22px; }
  .biblio-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* v0.13 — Footer : liens réseaux sociaux */
.footer-social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 6px;
  border: 1px solid rgba(212, 177, 106, 0.25);
  background: rgba(212, 177, 106, 0.05);
  color: var(--gris-doux, #B5A989);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}
.footer-social-link:hover {
  border-color: var(--dore, #D4B16A);
  color: var(--dore, #D4B16A);
  background: rgba(212, 177, 106, 0.12);
  transform: translateY(-1px);
}
.footer-social-link.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.footer-social-link svg { flex-shrink: 0; }
.footer-social-link small {
  font-size: 11px;
  opacity: 0.7;
  font-style: italic;
}
.footer-social-discord:hover {
  border-color: #5865F2;
  color: #7B83F5;
  background: rgba(88, 101, 242, 0.12);
}
.footer-social-instagram:hover {
  border-color: #E4405F;
  color: #E4405F;
}

.escape-card {
  background: linear-gradient(180deg, rgba(245, 239, 230, 0.04), rgba(245, 239, 230, 0.01));
  border: 1px solid rgba(212, 177, 106, 0.15);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative; /* Pour stretched link ::after */
  /* v0.85 — Colonne flex : permet de pousser le bloc bas (.escape-card-bottom)
     en bas de la carte pour aligner meilleurs temps + boutons entre cartes. */
  display: flex;
  flex-direction: column;
}

.escape-card:hover {
  border-color: var(--dore);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Stretched link : un seul vrai <a> rend toute la carte cliquable +
   tabable au clavier, sans onclick. Le lien couvre la zone via ::after,
   tout en gardant le titre visible et sélectionnable. */
.escape-card-link-stretched {
  color: inherit;
  text-decoration: none;
}
.escape-card-link-stretched::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.escape-card-link-stretched:hover { color: var(--dore); }
.escape-card-link-stretched:focus-visible { outline: none; }
.escape-card:focus-within {
  border-color: var(--dore);
  box-shadow: 0 0 0 2px var(--dore), 0 16px 40px rgba(0, 0, 0, 0.4);
}

.escape-card-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
  flex: 0 0 auto; /* v0.85 — ne pas écraser l'image dans la colonne flex */
}

.escape-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15, 30, 61, 0.95));
}

.escape-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* v0.84 — Tâche #2 : fonds OPAQUES (le badge est posé sur une photo, un fond
   translucide rendait le contraste imprévisible — ratio mesuré ≈ 2.57). Texte
   foncé sur gold vif / clair sur navy, + ombre portée pour détacher du décor. */
.tag-demo { background: #E0BE78; color: #241A05; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.tag-premium { background: var(--cuivre); color: #FFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.tag-edu { background: #0F1E3D; color: #E8C97D; border: 1px solid var(--dore); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }

/* v0.84 — Badge « ▶ JOUABLE » (coin haut-droit) RETIRÉ (tâche #3) : toutes les
   cartes affichées sont jouables, le badge était redondant. Son style vert est
   désormais réutilisé pour le bouton d'action en pied de carte (.escape-card-cta-btn). */

/* v0.66 — Badge AUDIENCE / PUBLIC CIBLE en bas-gauche de la carte image.
   Permet aux enseignants de voir d'un coup d'œil si un escape pédagogique
   est adapté à leur classe (primaire / collège / lycée+). */
.escape-card-audience {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.escape-card-audience.audience-all {
  background: rgba(46, 204, 113, 0.92);
  color: #0a2010;
  border: 1px solid rgba(46, 204, 113, 1);
}
.escape-card-audience.audience-primary {
  background: rgba(91, 165, 220, 0.92);
  color: #0a1a2e;
  border: 1px solid rgba(91, 165, 220, 1);
}
.escape-card-audience.audience-middle {
  background: rgba(245, 200, 80, 0.94);
  color: #2e1f08;
  border: 1px solid rgba(245, 200, 80, 1);
}
.escape-card-audience.audience-high {
  /* v0.86 — Rouge approfondi + opaque : l'ancien rgba(220,80,100) donnait un
     contraste blanc de 3.91 (< 4.5). #BC3247 → ~5.6:1, opaque pour rester
     fiable par-dessus la photo de la carte. */
  background: #BC3247;
  color: #fff;
  border: 1px solid #BC3247;
}

.escape-card.is-playable {
  border-color: rgba(46, 204, 113, 0.4);
}
.escape-card.is-playable:hover {
  border-color: #2ecc71;
  box-shadow: 0 16px 40px rgba(46, 204, 113, 0.18);
}

.escape-card-body {
  padding: 20px 22px;
  /* v0.85 — Colonne flex pour aligner le bloc bas (.escape-card-bottom). */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* v0.85 — Bloc bas (meilleur temps + bouton « Jouer ») poussé en bas de la
   carte. margin-top:auto absorbe l'espace libre sous le synopsis, ce qui
   aligne les meilleurs temps et boutons d'une carte à l'autre. */
.escape-card-bottom {
  margin-top: auto;
}
.escape-card-bottom .escape-card-best {
  margin: 0 0 12px; /* le best-time colle au footer plutôt qu'au synopsis */
}

.escape-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--gris-doux);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.escape-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--blanc-casse);
}

.escape-card p {
  font-size: 14px;
  color: var(--gris-doux);
  margin-bottom: 16px;
  /* Colonnes étroites + pas de césure = retour à un alignement à gauche.
     Le bord droit reste légèrement irrégulier mais on évite les trous
     disgracieux entre les mots qu'imposait text-align: justify. */
  text-align: left;
}

.escape-card-footer {
  display: block;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 177, 106, 0.12);
}

.price { color: var(--dore); font-weight: 600; font-size: 17px; }
.price-free { color: var(--dore-clair); font-style: italic; }
.card-link { color: var(--dore); font-size: 14px; font-weight: 600; }

/* v0.84 — Tâche #4 : bouton d'action unique, pleine largeur, repris du style
   de l'ancien badge JOUABLE vert. Remplace le couple « Gratuit · Jouer → ». */
.escape-card-cta-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 11px 16px;
  border-radius: 8px;
  background: #2ecc71;
  /* v0.86 — Texte foncé LITTÉRAL (pas var(--bleu-nuit) qui s'inverse en crème
     #FAF7F0 en thème clair → contraste 1.96 sur le vert). Navy fixe sur vert =
     ~8:1, identique à l'ancien badge JOUABLE. */
  color: #0A1A33;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.30);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.escape-card:hover .escape-card-cta-btn {
  background: #2bd673;
  box-shadow: 0 6px 18px rgba(46, 204, 113, 0.45);
  transform: translateY(-1px);
}
/* Variante non-jouable (« Voir ») : ton doré neutre plutôt que vert action. */
.escape-card-cta-btn.is-view {
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore-clair);
  box-shadow: none;
}
.escape-card:hover .escape-card-cta-btn.is-view {
  background: rgba(212, 177, 106, 0.28);
  box-shadow: none;
}

/* ============================================
   TEMPS FORT (Communauté) — v1.03
   Records par escape, présentés de façon vivante (pas une liste « à l'arrache »).
   ============================================ */
.lcc-tempsfort-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lcc-tf-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,177,106,0.08), rgba(212,177,106,0.02));
  border: 1px solid rgba(212,177,106,0.18);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.lcc-tf-row:hover {
  transform: translateY(-2px);
  border-color: rgba(212,177,106,0.5);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.lcc-tf-trophy { font-size: 26px; line-height: 1; flex-shrink: 0; }
.lcc-tf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lcc-tf-escape {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--blanc-casse);
  text-decoration: none;
}
.lcc-tf-escape:hover { color: var(--dore); }
.lcc-tf-meta { font-size: 13px; color: var(--gris-doux); }
.lcc-tf-who a { color: var(--dore); text-decoration: none; font-weight: 600; }
.lcc-tf-who a:hover { text-decoration: underline; }
.lcc-tf-anon { color: var(--gris-doux); font-style: italic; }
.lcc-tf-time {
  flex-shrink: 0;
  font-weight: 800;
  font-size: 18px;
  color: var(--dore);
  font-variant-numeric: tabular-nums;
  background: rgba(212,177,106,0.12);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
:root[data-theme="light"] .lcc-tf-escape { color: #2B1F12; }
:root[data-theme="light"] .lcc-tf-time { color: #6F4F18; background: rgba(150,108,32,0.12); }
@media (max-width: 600px) {
  /* Mobile : on garde la lisibilité, le chrono passe en dessous si besoin. */
  .lcc-tf-row { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
  .lcc-tf-body { flex-basis: calc(100% - 90px); }
  .lcc-tf-escape { font-size: 17px; }
  .lcc-tf-time { font-size: 16px; padding: 5px 10px; }
}

/* ============================================
   ABONNEMENTS
   ============================================ */
.subscription {
  background:
    linear-gradient(135deg, rgba(15, 30, 61, 0.6), rgba(10, 21, 48, 0.9)),
    radial-gradient(circle at 20% 50%, rgba(212, 177, 106, 0.1), transparent 60%);
  padding: 100px 32px;
}

.plans {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.plan {
  background: var(--bleu-nuit);
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.plan.featured {
  border-color: var(--dore);
  transform: scale(1.04);
  box-shadow: 0 20px 60px rgba(212, 177, 106, 0.15);
}

.plan.featured::before {
  content: 'POPULAIRE';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dore);
  color: var(--bleu-nuit);
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.plan-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  margin-bottom: 8px;
  color: var(--dore);
}

.plan-tagline {
  font-size: 13px;
  color: var(--gris-doux);
  margin-bottom: 24px;
  font-style: italic;
}

.plan-price {
  font-size: 48px;
  font-family: 'Cormorant Garamond', serif;
  color: var(--blanc-casse);
  margin-bottom: 4px;
  line-height: 1;
}

.plan-price span { font-size: 16px; color: var(--gris-doux); }

/* v1.66 — Tiers d'achat à l'unité (grille 3 colonnes façon carte tarif) */
.lcc-pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.lcc-pricing-tier {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--ligne-douce);
  border-radius: 16px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.lcc-pricing-tier:hover {
  border-color: var(--dore);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.lcc-pricing-tier--featured {
  border-color: rgba(212, 177, 106, 0.6);
  background: linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02));
}
.lcc-pricing-tier-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: var(--dore);
  line-height: 1;
  margin-bottom: 2px;
}
.lcc-pricing-tier-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--blanc-casse);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lcc-pricing-tier p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(232, 224, 210, 0.82);
}
:root[data-theme="light"] .lcc-pricing-tier {
  background: #FFFDF7;
  border-color: rgba(138, 95, 22, 0.28);
}
:root[data-theme="light"] .lcc-pricing-tier--featured {
  background: linear-gradient(180deg, rgba(184, 146, 61, 0.10), #FFFDF7);
  border-color: rgba(138, 95, 22, 0.55);
}
:root[data-theme="light"] .lcc-pricing-tier-price   { color: #6F4F18; }
:root[data-theme="light"] .lcc-pricing-tier-label   { color: #2B1F12; }
:root[data-theme="light"] .lcc-pricing-tier p       { color: rgba(43, 31, 18, 0.82); }

@media (max-width: 820px) {
  .lcc-pricing-tiers { grid-template-columns: 1fr; gap: 16px; }
  .lcc-pricing-tier-price { font-size: 32px; }
}

.plan-features {
  list-style: none;
  margin: 32px 0;
  text-align: left;
}

.plan-features li {
  /* v0.81 — Retour exploration : était en display:flex avec gap → quand un
     <li> contenait <strong> suivi de texte (ex: « <strong>5 escapes par mois
     en rotation</strong> (Sélection du mois) »), les 2 enfants devenaient
     des flex items séparés et le texte « (Sélection du mois) » se collait
     dans une 2e colonne à droite au lieu de continuer sur la même ligne.
     Fix : on revient en bloc normal avec le bullet ::before en position
     absolue, ce qui laisse le contenu inline wrapper naturellement. */
  padding: 10px 0 10px 22px;
  position: relative;
  border-bottom: 1px solid rgba(212, 177, 106, 0.08);
  color: var(--blanc-casse);
  font-size: 14px;
  line-height: 1.45;
}

.plan-features li::before {
  content: '🗝';
  position: absolute;
  left: 0;
  top: 11px;
  font-size: 12px;
  line-height: 1;
}

/* ============================================
   COMMUNAUTÉ
   ============================================ */
.community {
  text-align: center;
  background: linear-gradient(135deg, rgba(185, 122, 90, 0.1), transparent);
  border-top: 1px solid rgba(212, 177, 106, 0.1);
  border-bottom: 1px solid rgba(212, 177, 106, 0.1);
}

.community .section-header { margin-bottom: 32px; }

.community-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.stat-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  color: var(--dore);
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gris-doux);
  margin-top: 8px;
  display: inline-block;
}

/* ============================================
   FOOTER  (toujours en mode sombre, même en light theme)
   ============================================ */
.site-footer {
  background: #0A0A0F;
  color: #F5EFE6;
  padding: 60px 32px 30px;
  border-top: 1px solid rgba(212, 177, 106, 0.25);
}
/* v0.82 — BUG CONTRASTE MODE CLAIR : ces règles utilisaient !important sur
   les sélecteurs « .site-footer h4 + :root[data-theme="light"] .site-footer h4 »
   ce qui forçait le jaune pâle #FFE2A6 même en mode clair sur fond crème
   #F0EAD9 → ratio 1.05 (illisible, WCAG AA min = 4.5). Idem pour .footer-brand p
   et logo. Restructuré : règles dark séparées des règles light, avec couleurs
   contrastées pour chaque thème. */
.site-footer h4 {
  color: #FFE2A6;  /* mode sombre : jaune pâle sur fond #0A0A0F = ratio 13.4 OK */
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: none;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 177, 106, 0.25);
}
.site-footer .site-logo,
.site-footer .site-title-text { color: #F0D49A; }
.site-footer .footer-brand p { color: rgba(245, 239, 230, 0.88); }
.site-footer .footer-col a,
.site-footer .footer-bottom,
.site-footer .footer-bottom span,
.site-footer .footer-bottom a { color: rgba(245, 239, 230, 0.82); }
.site-footer .footer-col a:hover,
.site-footer .footer-bottom a:hover { color: #FFE6B5; }

.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* v0.13.1 : 5 colonnes (brand 2x + 4 colonnes : Explorer, Communauté, Aide, Réseaux) */
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand p {
  color: var(--gris-doux);
  font-size: 14px;
  margin-top: 16px;
  max-width: 320px;
}

.footer-col h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: var(--dore);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; }
.footer-col li { padding: 6px 0; }
.footer-col a { color: var(--gris-doux); font-size: 14px; }
.footer-col a:hover { color: var(--dore); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 177, 106, 0.1);
  display: flex;
  justify-content: space-between;
  color: var(--gris-doux);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================================
   CONTENU PAR DÉFAUT
   ============================================ */
.default-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 32px;
}

.default-content article {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--bordure-doree);
}

.default-content h1, .default-content h2 {
  margin-bottom: 16px;
  color: var(--dore);
}

.default-content p {
  margin-bottom: 16px;
  color: var(--blanc-casse);
}

/* ============================================
   PAGE HERO (HEADER COMPACT POUR PAGES SECONDAIRES)
   ============================================ */
/* v0.64 — page-hero : retour à la version simple (halos + gradient + veine
   dorée sous le bord). Plus de SVG fantasy / brume / étoiles. */
/* v1.40 — Canvas d'ambiance interactif (cf. js/lcc-hero-fx.js) :
   posé en 1er enfant absolu derrière le contenu ; pointer-events:none
   pour laisser passer clics/hover aux boutons et titres ; mix-blend pour
   un rendu plus chaleureux sur le fond dégradé sombre ou clair. */
.lcc-hero-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  mix-blend-mode: screen;
}
:root[data-theme="light"] .lcc-hero-fx-canvas {
  mix-blend-mode: multiply;
  opacity: 0.45;
}
/* v1.45 — Empilement : on cible UNIQUEMENT le contenu réel pour le placer
   au-dessus du canvas. On NE TOUCHE PAS aux éléments décoratifs déjà
   `position: absolute` (.hero-fog, .hero-glow, .hero-key). La version
   précédente forçait position:relative sur TOUS les enfants, ce qui
   ramenait .hero-glow et .hero-fog dans le flex layout du .hero et
   poussait .hero-content vers la droite (décalage signalé en v1.44). */
.hero > .hero-content,
.page-hero > *:not(.lcc-hero-fx-canvas) {
  position: relative;
  z-index: 1;
}

.page-hero {
  position: relative;
  padding: 120px 32px 80px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--bordure-doree);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 177, 106, 0.18), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(185, 122, 90, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bleu-nuit) 0%, var(--bleu-nuit-deep) 100%);
}
/* Veine dorée subtile sous le bord */
.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: min(80%, 320px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dore), transparent);
  opacity: 0.7;
  pointer-events: none;
}
/* LIGHT MODE — page-hero */
:root[data-theme="light"] .page-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150, 108, 32, 0.30), transparent 65%),
    linear-gradient(180deg, #F5E8C8 0%, #FBF4DF 70%, #EFE3C0 100%);
}
.page-hero .section-eyebrow { margin-bottom: 12px; }
.page-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  margin-bottom: 16px;
}
.page-hero h1 em { color: var(--dore); font-style: italic; }
.page-hero p {
  color: var(--gris-doux);
  font-size: 18px;
  max-width: 680px;
  margin: 0 auto;
}

/* v0.47 — Écran de choix solo/multi avec fond d'ambiance (Trésor Caché)
   Le fond couvre TOUTE la page, le hero garde son contenu lisible grâce
   à un voile sombre dégradé radial. */
.lcc-launch-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
.lcc-launch-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 16, 32, 0.55) 0%, rgba(10, 16, 32, 0.85) 80%),
    linear-gradient(180deg, rgba(10, 16, 32, 0.4), rgba(10, 16, 32, 0.75));
}
.lcc-launch-hero {
  background: transparent !important;
  border-bottom-color: transparent !important;
  position: relative;
}
.lcc-launch-hero h1 em,
.lcc-launch-hero h1 {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* v0.84 — Tâche #7 / bug #22 : le launcher (« Un Trésor Caché », etc.) pose son
   titre sur un fond image SOMBRE quel que soit le thème. En mode clair, la règle
   globale forçait le titre en brun foncé (#6F4F18) → illisible sur l'image. On
   force ici un doré clair lumineux + ombre renforcée, dans les 2 thèmes.
   NB : on chaîne .page-hero.lcc-launch-hero (le hero porte les 2 classes) pour
   dépasser la spécificité de `:root[data-theme=light] .page-hero h1 em` qui,
   à égalité, gagnait par ordre de cascade (défini plus bas dans le fichier). */
.page-hero.lcc-launch-hero h1,
:root[data-theme="light"] .page-hero.lcc-launch-hero h1 { color: #F5EFE6; }
.page-hero.lcc-launch-hero h1 em,
:root[data-theme="light"] .page-hero.lcc-launch-hero h1 em { color: #E8C97D; }
.lcc-launch-hero p {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
/* v0.89 — Le launcher RESPECTE désormais le thème (on ne force plus le sombre).
   Mais son contenu est posé sur l'image de port SOMBRE → il doit rester clair
   AUSSI en thème clair. On surcharge donc les règles light globales pour le
   sous-titre, le lien d'aide, le fil d'ariane et les boutons de ce hero. */
:root[data-theme="light"] .page-hero.lcc-launch-hero p { color: rgba(255, 255, 255, 0.92); }
:root[data-theme="light"] .page-hero.lcc-launch-hero p a { color: #E8C97D; }
:root[data-theme="light"] .breadcrumb.lcc-breadcrumb--top,
:root[data-theme="light"] .breadcrumb.lcc-breadcrumb--top a { color: rgba(255, 255, 255, 0.82); }
:root[data-theme="light"] .breadcrumb.lcc-breadcrumb--top .sep { color: rgba(255, 255, 255, 0.45); }
.lcc-launch-hero .section-eyebrow {
  background: rgba(10, 16, 32, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(212, 177, 106, 0.4);
}

/* v0.49 — Variante du breadcrumb à placer EN HAUT, juste sous le header
   (par opposition au placement standard sous le hero). Évite l'effet
   « orphelin au milieu de nulle part » sur les pages avec fond d'ambiance. */
.lcc-breadcrumb--top {
  position: relative;
  z-index: 2;
  padding-top: 18px;
  padding-bottom: 6px;
  max-width: 1280px;
  margin: 0 auto;
}

/* v0.52 — Bloc d'erreur du lobby (limite de sessions atteinte, etc.) :
   visuel rouge profond + bouton de récupération si applicable. */
.lcc-lobby-err {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(120, 32, 16, 0.55);
  border: 1px solid rgba(229, 176, 153, 0.55);
  padding: 14px 22px;
  border-radius: 12px;
  margin: 4px auto 0;
  max-width: 540px;
}
.lcc-lobby-err p {
  margin: 0;
  color: #ffd2bb;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

/* v0.50 — Hero compact spécifique au lobby (sinon trop d'air vide entre
   le breadcrumb et le contenu utile). On rogne les paddings verticaux
   et on resserre le pill / titre / sous-titre. */
.lcc-launch-bg + .lcc-breadcrumb--top + .page-hero.lcc-launch-hero {
  padding-top: 22px;
  padding-bottom: 18px;
}
.lcc-launch-bg + .lcc-breadcrumb--top + .page-hero.lcc-launch-hero h1 {
  margin: 8px 0 6px;
  font-size: clamp(32px, 4.5vw, 52px);
}
.lcc-launch-bg + .lcc-breadcrumb--top + .page-hero.lcc-launch-hero .section-eyebrow {
  margin-bottom: 6px;
}
.lcc-launch-bg + .lcc-breadcrumb--top + .page-hero.lcc-launch-hero p {
  margin-top: 4px;
}

/* v0.48 — Sur le lobby, la section principale doit RESTER lisible par-dessus
   le fond. On donne un voile sombre + bord doré aux cartes. */
.lcc-launch-bg + section + nav.breadcrumb,
.lcc-launch-bg + .lcc-launch-hero + nav.breadcrumb {
  position: relative;
  z-index: 1;
}
.lcc-lobby-empty {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.lcc-lobby-empty .lcc-lobby-card--invites { grid-column: 1 / -1; }
.lcc-lobby-card {
  background: rgba(15, 19, 32, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 177, 106, 0.35);
  border-radius: 14px;
  padding: 28px 26px;
  text-align: center;
  color: #f5efe6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.lcc-lobby-card__icon {
  font-size: 38px;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.lcc-lobby-card h3 {
  color: var(--dore);
  margin: 0 0 8px;
  font-size: 22px;
}
.lcc-lobby-card__hint {
  color: rgba(245, 239, 230, 0.78);
  font-size: 14px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.lcc-lobby-join-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.lcc-lobby-code-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(10, 16, 32, 0.7);
  border: 2px solid rgba(212, 177, 106, 0.5);
  border-radius: 10px;
  color: var(--dore);
  text-align: center;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lcc-lobby-code-input:focus {
  border-color: #d4b16a;
  box-shadow: 0 0 0 3px rgba(212, 177, 106, 0.25);
}
.lcc-lobby-invite-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.lcc-lobby-invite-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(212, 177, 106, 0.10);
  border: 1px solid rgba(212, 177, 106, 0.35);
  border-radius: 10px;
  text-align: left;
}
.lcc-lobby-invite-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background-size: cover; background-position: center;
  flex-shrink: 0;
  border: 2px solid rgba(212, 177, 106, 0.5);
}
.lcc-lobby-invite-meta { flex: 1; min-width: 0; font-size: 14px; }
.lcc-lobby-invite-meta strong { color: var(--dore); }

/* ===== Lobby actif : équipage, amis, demandes ===== */
.lcc-lobby-players-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
/* v0.51 — Carte joueur uniforme : 4 slots de DIMENSION IDENTIQUE.
   On évite .account-card pour ne plus dépendre des styles globaux. */
.lcc-player-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
  background: rgba(15, 19, 32, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 177, 106, 0.25);
  border-radius: 12px;
  border-left: 4px solid var(--badge-bg, #d4b16a);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  color: #f5efe6;
  box-sizing: border-box;
  overflow: hidden;
}
.lcc-player-card.is-empty {
  background: rgba(15, 19, 32, 0.45);
  border-style: dashed;
  border-color: rgba(212, 177, 106, 0.25);
  border-left-color: rgba(212, 177, 106, 0.25);
  border-left-style: dashed;
}
.lcc-player-badge {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--badge-bg, #d4b16a);
  color: var(--badge-fg, #1a1408);
  border: 2px solid var(--badge-border, #a3884d);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.lcc-player-badge--empty {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 239, 230, 0.55);
  border: 2px dashed rgba(245, 239, 230, 0.25);
  box-shadow: none;
}
.lcc-player-avatar {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(212, 177, 106, 0.35);
}
.lcc-player-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lcc-player-name {
  font-size: 17px;
  font-weight: 700;
  color: #f5efe6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lcc-player-host-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(212, 177, 106, 0.2);
  color: #d4b16a;
  border: 1px solid rgba(212, 177, 106, 0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.lcc-player-status {
  font-size: 13px;
  color: rgba(245, 239, 230, 0.65);
}
.lcc-player-status.is-ready { color: #2ecc71; font-weight: 600; }
.lcc-player-empty-msg {
  flex: 1;
  color: rgba(245, 239, 230, 0.5);
  font-style: italic;
  font-size: 14px;
}

/* v0.53 — Boutons / tags d'amitié placés à droite de chaque carte joueur */
.lcc-player-friend-btn,
.lcc-player-friend-tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  font-family: inherit;
}
.lcc-player-friend-btn {
  background: rgba(212, 177, 106, 0.16);
  color: var(--dore);
  border: 1px solid rgba(212, 177, 106, 0.5);
}
.lcc-player-friend-btn:hover {
  background: rgba(212, 177, 106, 0.32);
  color: #f5efe6;
  transform: translateY(-1px);
}
.lcc-player-friend-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.lcc-player-friend-btn.is-accept {
  background: rgba(46, 204, 113, 0.18);
  color: #66dd95;
  border-color: rgba(46, 204, 113, 0.55);
}
.lcc-player-friend-btn.is-accept:hover {
  background: rgba(46, 204, 113, 0.32);
  color: #f5efe6;
}
.lcc-player-friend-tag {
  cursor: default;
  background: rgba(46, 204, 113, 0.14);
  color: #66dd95;
  border: 1px solid rgba(46, 204, 113, 0.4);
}
.lcc-player-friend-tag.is-pending {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 239, 230, 0.65);
  border-color: rgba(245, 239, 230, 0.25);
}

/* v0.52 — Slot vide cliquable (hôte uniquement) → ouvre le picker d'invitation. */
.lcc-player-card.is-clickable {
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.lcc-player-card.is-clickable:hover,
.lcc-player-card.is-clickable:focus-visible {
  background: rgba(212, 177, 106, 0.12);
  border-color: rgba(212, 177, 106, 0.5);
  border-left-color: rgba(212, 177, 106, 0.5);
  transform: translateY(-1px);
  outline: none;
}
.lcc-player-card.is-clickable:hover .lcc-player-empty-msg,
.lcc-player-card.is-clickable:focus-visible .lcc-player-empty-msg {
  color: var(--dore);
  font-style: normal;
  font-weight: 600;
}
.lcc-player-card.is-clickable:hover .lcc-player-badge--empty,
.lcc-player-card.is-clickable:focus-visible .lcc-player-badge--empty {
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore);
  border-color: rgba(212, 177, 106, 0.6);
}

/* v0.52 — Modal picker d'invitation depuis un slot vide */
.lcc-invite-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 16, 32, 0.8) 0%, rgba(0, 0, 0, 0.92) 100%);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lccOverlayFadeIn 0.22s ease-out;
  padding: 20px;
}
.lcc-invite-modal-card {
  background: linear-gradient(180deg, rgba(28, 24, 18, 0.98), rgba(15, 13, 10, 0.98));
  border: 2px solid rgba(212, 177, 106, 0.55);
  border-radius: 14px;
  padding: 28px 26px 22px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  color: #f5efe6;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
  position: relative;
}
.lcc-invite-modal-card h3 {
  margin: 0 0 16px;
  color: var(--dore);
  font-size: 22px;
  text-align: center;
}
.lcc-invite-modal-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: rgba(245, 239, 230, 0.6);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.lcc-invite-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--dore); }
.lcc-invite-modal-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px; /* espace pour la scrollbar */
}
.lcc-invite-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15, 19, 32, 0.6);
  border: 1px solid rgba(212, 177, 106, 0.22);
  border-radius: 10px;
}
.lcc-invite-modal-item strong {
  display: block;
  color: var(--dore);
  font-size: 15px;
  margin-bottom: 2px;
}
.lcc-invite-modal-item small { font-size: 12px; display: block; }
.lcc-invite-modal-empty {
  text-align: center;
  color: rgba(245, 239, 230, 0.55);
  padding: 18px 0;
  font-style: italic;
}
.lcc-lobby-friends, .lcc-lobby-requests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.lcc-friend-card, .lcc-request-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(15, 19, 32, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 177, 106, 0.25);
  border-radius: 10px;
  color: #f5efe6;
}
.lcc-friend-meta, .lcc-request-meta {
  flex: 1;
  display: flex; flex-direction: column;
  min-width: 0;
}
.lcc-friend-meta strong, .lcc-request-meta strong {
  color: var(--dore);
  font-size: 15px;
  overflow: hidden; text-overflow: ellipsis;
}
.lcc-friend-meta small, .lcc-request-meta small { font-size: 12px; }
.lcc-friend-status {
  font-size: 12px;
  color: rgba(245, 239, 230, 0.6);
  padding: 6px 10px;
  border: 1px solid rgba(212, 177, 106, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}
.lcc-friend-status.is-in-lobby {
  color: #7fc99c;
  border-color: rgba(127, 201, 156, 0.4);
}
.lcc-friend-status.is-busy {
  color: #d4b16a;
  border-color: rgba(212, 177, 106, 0.45);
}
.lcc-request-card { border-color: rgba(127, 201, 156, 0.4); }
.lcc-request-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn.btn-sm { padding: 7px 14px; font-size: 13px; }
.lcc-lobby-friends-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(245, 239, 230, 0.65);
  padding: 14px;
}
.lcc-lobby-actions {
  text-align: center;
  margin: 12px auto 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lcc-lobby-rules {
  text-align: center;
  margin: 4px auto 0;
  color: rgba(245, 239, 230, 0.72);
  font-size: 13px;
  padding: 10px 16px;
  background: rgba(15, 19, 32, 0.55);
  border-radius: 8px;
  max-width: 540px;
  line-height: 1.55;
}
/* v0.53 — Deuxième ligne des règles, en italique doré pour souligner le pile-ou-face */
.lcc-lobby-rules-tagline {
  display: inline-block;
  color: rgba(212, 177, 106, 0.85);
  font-style: italic;
  font-size: 12.5px;
  margin-top: 2px;
}
/* v0.51 — Petit panneau "Rejoindre un autre lobby" en bas du lobby actif */
.lcc-lobby-other {
  max-width: 540px;
  margin: 12px auto 0;
  background: rgba(15, 19, 32, 0.55);
  border: 1px solid rgba(212, 177, 106, 0.22);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.lcc-lobby-other summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 13px;
  color: rgba(245, 239, 230, 0.75);
  user-select: none;
  text-align: center;
  transition: background 0.18s ease;
}
.lcc-lobby-other summary::-webkit-details-marker { display: none; }
.lcc-lobby-other summary:hover { background: rgba(212, 177, 106, 0.12); color: var(--dore); }
.lcc-lobby-other[open] summary { background: rgba(212, 177, 106, 0.10); color: var(--dore); }
.lcc-lobby-other-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.lcc-lobby-code-input--sm {
  font-size: 14px;
  letter-spacing: 1.5px;
  padding: 8px 12px;
  flex: 1 1 200px;
}
.lcc-lobby-other-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(245, 239, 230, 0.55);
  padding: 4px 16px 12px;
  margin: 0;
}
#lcc-lobby {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#lcc-lobby code {
  background: rgba(212, 177, 106, 0.18) !important;
}

/* v0.50 — Bandeau ID compact : label + pill cliquable centrés */
.lcc-lobby-id-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: -4px; /* recolle au hero */
}
.lcc-lobby-id-label {
  color: rgba(245, 239, 230, 0.78);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.lcc-lobby-id-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--dore);
  background: rgba(212, 177, 106, 0.14);
  border: 1.5px solid var(--dore);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.2s ease, border-color 0.18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.lcc-lobby-id-pill:hover {
  background: rgba(212, 177, 106, 0.24);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.lcc-lobby-id-pill .lcc-lobby-id-icon {
  font-size: 16px;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lcc-lobby-id-pill:hover .lcc-lobby-id-icon { opacity: 1; transform: scale(1.1); }
.lcc-lobby-id-pill .lcc-lobby-id-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  color: #0a1f10;
  border-radius: 9px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s ease, transform 0.22s ease;
  font-size: 16px;
  letter-spacing: 1px;
  pointer-events: none;
}
.lcc-lobby-id-pill.is-copied { border-color: #27ae60; }
.lcc-lobby-id-pill.is-copied .lcc-lobby-id-feedback {
  opacity: 1;
  transform: scale(1);
  animation: lccCopiedPop 0.45s ease-out;
}
@keyframes lccCopiedPop {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.lcc-lobby-id-pill.is-copy-failed {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.18);
}

/* v0.50 — Sections du lobby : titres compacts + grilles compactes */
.lcc-lobby-section {
  margin: 0;
}
.lcc-lobby-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  color: var(--dore);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}
.lcc-lobby-count {
  font-family: inherit;
  font-size: 16px;
  color: rgba(245, 239, 230, 0.7);
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 768px) {
  .lcc-lobby-empty,
  .lcc-lobby-players-grid,
  .lcc-lobby-friends,
  .lcc-lobby-requests {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px 0;
  font-size: 13px;
  color: var(--gris-doux);
}
.breadcrumb a { color: var(--gris-doux); }
.breadcrumb a:hover { color: var(--dore); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* ============================================
   FILTRES (BIBLIOTHÈQUE)
   ============================================ */
.filters-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--bordure-doree);
}
.filter-group { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--dore);
  margin-right: 8px;
  align-self: center;
}
.filter-chip {
  padding: 8px 16px;
  border: 1px solid var(--bordure-doree);
  border-radius: 999px;
  background: transparent;
  color: var(--blanc-casse);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.filter-chip:hover { border-color: var(--dore); color: var(--dore); }
.filter-chip.active {
  background: var(--dore);
  color: #1a1408;
  border-color: var(--dore);
  font-weight: 600;
}

/* Mobile : empile les groupes de filtres verticalement (label au-dessus
   des chips), plus aéré et lisible. */
@media (max-width: 720px) {
  .filters-bar {
    padding: 20px 14px;
    gap: 14px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
  }
  .filter-label {
    flex-basis: 100%;
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 1.2px;
  }
  .filter-chip {
    padding: 7px 13px;
    font-size: 12.5px;
  }
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.pagination a, .pagination span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bordure-doree);
  border-radius: 4px;
  color: var(--blanc-casse);
  font-size: 14px;
  transition: all 0.2s ease;
}
.pagination a:hover { border-color: var(--dore); color: var(--dore); }
.pagination .current {
  background: var(--dore);
  color: #1a1408;
  border-color: var(--dore);
  font-weight: 600;
}

/* ============================================
   STEPS (ÉTAPES "COMMENT ÇA MARCHE")
   ============================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin: 48px 0;
}
.step {
  text-align: center;
  padding: 32px;
  background: rgba(245, 239, 230, 0.03);
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.step:hover { border-color: var(--dore); transform: translateY(-2px); }
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--dore);
  border-radius: 50%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--dore);
  margin-bottom: 20px;
}
.step h3 { font-size: 22px; margin-bottom: 12px; color: var(--blanc-casse); }
.step p { color: var(--gris-doux); font-size: 15px; }

/* ============================================
   BENEFITS / FEATURES (3 colonnes)
   ============================================ */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin: 48px 0;
}
.feature {
  padding: 32px;
}
.feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--dore);
}
.feature-icon svg { width: 100%; height: 100%; }
.feature h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--blanc-casse);
}
.feature p { color: var(--gris-doux); font-size: 15px; }

/* ============================================
   TABLEAU COMPARATIF (ABONNEMENTS)
   ============================================ */
.compare-table {
  max-width: 1100px;
  margin: 48px auto 0;
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
}
.compare-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(212, 177, 106, 0.1);
  font-size: 14px;
}
.compare-table th {
  background: var(--bleu-nuit-deep);
  color: var(--dore);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.compare-table th:first-child { text-align: left; }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table .check { color: var(--dore); font-size: 18px; }
.compare-table .cross { color: var(--gris-faible); font-size: 18px; }
.compare-table .featured-col {
  background: rgba(212, 177, 106, 0.05);
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-category {
  margin-bottom: 48px;
}
.faq-category h3 {
  font-size: 24px;
  color: var(--dore);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bordure-doree);
}
.faq-item {
  border: 1px solid var(--bordure-doree);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
  background: rgba(245, 239, 230, 0.02);
}
.faq-item summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 500;
  color: var(--blanc-casse);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--dore); }
.faq-item summary::after {
  content: '+';
  color: var(--dore);
  font-size: 24px;
  font-family: 'Cormorant Garamond', serif;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item[open] summary { color: var(--dore); border-bottom: 1px solid var(--bordure-doree); }
.faq-answer {
  padding: 18px 22px;
  color: var(--gris-doux);
  font-size: 15px;
  line-height: 1.7;
}
.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: start;
}
.contact-info h3 {
  font-size: 24px;
  color: var(--dore);
  margin-bottom: 20px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bordure-doree);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--dore);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dore);
  border-radius: 50%;
}
.contact-info-text h4 { font-size: 16px; color: var(--blanc-casse); margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.contact-info-text p { color: var(--gris-doux); font-size: 14px; }

.contact-form {
  background: rgba(245, 239, 230, 0.03);
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  padding: 32px;
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--dore);
  margin-bottom: 8px;
  font-weight: 600;
}
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bleu-nuit-deep);
  border: 1px solid var(--bordure-doree);
  border-radius: 4px;
  color: var(--blanc-casse);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: var(--dore);
}
.form-row textarea { min-height: 140px; resize: vertical; }

/* ============================================
   CONTENU LONG (À PROPOS, JURIDIQUE)
   ============================================ */
.long-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 32px;
  color: var(--blanc-casse);
}
.long-content h2 {
  font-size: 32px;
  color: var(--dore);
  margin: 48px 0 16px;
}
.long-content h2:first-child { margin-top: 0; }
.long-content h3 {
  font-size: 22px;
  color: var(--blanc-casse);
  margin: 32px 0 12px;
}
.long-content p {
  margin-bottom: 16px;
  color: var(--blanc-casse);
  font-size: 16px;
  line-height: 1.8;
}
.long-content p strong { color: var(--dore); }
.long-content ul, .long-content ol {
  margin: 16px 0 16px 24px;
  color: var(--blanc-casse);
}
.long-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.long-content blockquote {
  border-left: 3px solid var(--dore);
  padding-left: 24px;
  margin: 32px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--blanc-casse);
}

/* ============================================
   GRILLE PROFILS (COMMUNAUTÉ)
   ============================================ */
.creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.creator-card {
  background: rgba(245, 239, 230, 0.03);
  border: 1px solid var(--bordure-doree);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}
.creator-card:hover { border-color: var(--dore); transform: translateY(-2px); }
.creator-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dore), var(--cuivre));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  color: var(--bleu-nuit);
  font-weight: 600;
}
.creator-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--blanc-casse);
  margin-bottom: 4px;
}
.creator-card .creator-tag {
  font-size: 12px;
  color: var(--dore);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 12px;
}
.creator-card p { font-size: 13px; color: var(--gris-doux); margin-bottom: 12px; }
.creator-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: var(--gris-doux);
  padding-top: 12px;
  border-top: 1px solid var(--bordure-doree);
}
.creator-stats strong { color: var(--dore); display: block; font-size: 18px; font-family: 'Cormorant Garamond', serif; }

/* ============================================
   CTA BANNER (BAS DE PAGE)
   ============================================ */
.cta-banner {
  max-width: 1100px;
  margin: 80px auto;
  padding: 60px 40px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(212, 177, 106, 0.08), rgba(185, 122, 90, 0.08)),
    var(--bleu-nuit-deep);
  border: 1px solid var(--dore);
  border-radius: 12px;
}
.cta-banner h2 {
  font-size: 36px;
  margin-bottom: 16px;
  color: var(--blanc-casse);
}
.cta-banner h2 em { color: var(--dore); font-style: italic; }
.cta-banner p {
  color: var(--gris-doux);
  font-size: 17px;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner .hero-actions { justify-content: center; }

/* ============================================
   GRILLE MATIÈRES (ENSEIGNANTS)
   ============================================ */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.subject {
  padding: 24px;
  background: rgba(245, 239, 230, 0.03);
  border: 1px solid var(--bordure-doree);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.subject:hover { border-color: var(--dore); }
.subject-icon { font-size: 32px; margin-bottom: 12px; }
.subject h4 { color: var(--blanc-casse); font-size: 18px; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; }
.subject p { color: var(--gris-doux); font-size: 13px; margin: 0; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1180px) {
  /* 5 cols → 4 cols (brand pleine largeur en haut) */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 968px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .nav { padding: 14px 20px; }
  /* nav-links visibility geree par .is-open dans le burger handler */
  .section { padding: 60px 20px; }
  .subscription { padding: 60px 20px; }
  .hero { padding: 60px 20px; min-height: 70vh; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .community-stats { gap: 32px; }
  .stat-number { font-size: 40px; }
  .plan.featured { transform: none; }
  .page-hero { padding: 80px 20px 60px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-banner { margin: 40px 20px; padding: 40px 24px; }
  .cta-banner h2 { font-size: 28px; }
  /* Cartes escape : une seule colonne, espace plus aéré */
  .escape-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 14px; }
  /* Section header : moins d'espace au-dessus/dessous */
  .section-header { margin-bottom: 32px; }
  /* Boutons : prennent toute la largeur sur mobile pour cibles tactiles */
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; }
}

/* Ultra-petits écrans (téléphone compact, iPhone SE) */
@media (max-width: 480px) {
  .page-hero { padding: 60px 16px 40px; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 38px); }
  .page-hero p { font-size: 14px; }
  .section { padding: 40px 14px; }
  .subscription { padding: 40px 14px; }
  .breadcrumb { padding: 12px 14px; font-size: 12px; }
  .breadcrumb .sep { margin: 0 6px; }
  .cta-banner { margin: 30px 14px; padding: 28px 18px; }
  .cta-banner h2 { font-size: 22px; }
  .footer { padding: 40px 16px 20px; }
  /* Plan cards : padding réduit */
  .plan { padding: 24px 18px; }
  .plan-name { font-size: 22px; }
  .plan-price { font-size: 36px; }
  /* Tableau comparatif scrollable horizontalement */
  .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   ============================================================
   POLISH LAYER — refonte visuelle pro et moderne
   (gardons l'ambiance escape game : doré, mystère, profondeur)
   ============================================================
   ============================================================ */

/* --- Variables d'ombrage et radius globaux --- */
:root {
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 0 40px rgba(212, 177, 106, 0.18);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --gradient-gold: linear-gradient(135deg, #E5C68A 0%, #D4B16A 50%, #B89455 100%);
}
:root[data-theme="light"] {
  --shadow-sm: 0 2px 6px rgba(60, 40, 10, 0.08);
  --shadow-md: 0 10px 30px rgba(60, 40, 10, 0.12);
  --shadow-lg: 0 28px 70px rgba(60, 40, 10, 0.18);
  --shadow-glow: 0 0 40px rgba(184, 146, 61, 0.18);
}

/* v0.63 — Anciens overrides retirés : ils écrasaient .hero::before (paysage
   SVG) et .hero h1 text-shadow (lisibilité v0.63). Tout est géré désormais
   en amont dans la section HERO refonte v0.61/v0.62/v0.63. */
.hero { min-height: 92vh; padding: 96px 32px; }
.hero h1 { letter-spacing: 0.5px; }
.hero p { font-size: 19px; max-width: 680px; margin: 0 auto; }
/* page-hero — on garde juste le tweak de padding */
.page-hero { padding: 140px 32px 96px; }

/* --- CARDS génériques unifiées --- */
.escape-card,
.plan,
.creator-card,
.faq-item,
.feature {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)),
    var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.escape-card:hover,
.plan:hover,
.creator-card:hover,
.feature:hover {
  border-color: rgba(212, 177, 106, 0.55);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Light theme : assure les fonds clairs restent contrastés */
:root[data-theme="light"] .escape-card,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .creator-card,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .step,
:root[data-theme="light"] .subject {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
}
:root[data-theme="light"] .step h3,
:root[data-theme="light"] .feature h3,
:root[data-theme="light"] .escape-card h3,
:root[data-theme="light"] .creator-card h4 { color: #2B1F12; }

/* Boutons : effet plus pro (gradient sur primary + glow au hover) */
.btn-primary {
  background: var(--gradient-gold);
  border: 1px solid rgba(212, 177, 106, 0.6);
  box-shadow: 0 6px 16px rgba(212, 177, 106, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #F0D49A 0%, #E5C68A 50%, #C9A465 100%);
  box-shadow: 0 10px 28px rgba(212, 177, 106, 0.40);
  transform: translateY(-2px);
}
.btn-ghost { backdrop-filter: blur(6px); }
:root[data-theme="light"] .btn-ghost { color: #2B1F12; border-color: rgba(184, 146, 61, 0.55); }
:root[data-theme="light"] .btn-ghost:hover { background: rgba(184, 146, 61, 0.10); }

/* Section eyebrow : plus distinctif */
.section-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--dore);
  background: rgba(212, 177, 106, 0.08);
  border: 1px solid rgba(212, 177, 106, 0.25);
}
:root[data-theme="light"] .section-eyebrow {
  background: rgba(184, 146, 61, 0.12);
  border-color: rgba(184, 146, 61, 0.35);
}

/* Titres de section : plus aérés */
.section-header h2 { font-size: clamp(32px, 4vw, 48px); margin-top: 12px; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-header p { color: var(--gris-doux); font-size: 17px; margin-top: 12px; }

/* --- ESCAPE CARDS : cover plus haute, badges plus visibles --- */
.escape-card { overflow: hidden; }
.escape-card .escape-cover { height: 220px; position: relative; }
.escape-card .escape-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* --- PLAN AVENTURIER (featured) : effet doré --- */
.plan.featured {
  background:
    linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02)),
    var(--bg-card);
  border-color: var(--dore);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.plan.featured::before {
  content: "★ " attr(data-recommended-label);
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: var(--gradient-gold);
  color: #1a1408;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan { position: relative; }

/* --- ACCOUNT GRID (page Mon compte) --- */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
/* v0.24.1 : fix contraste des <select> natifs sur fond sombre.
   Les browsers rendent les <option> sur fond blanc système avec color:inherit
   → texte light cream sur blanc = invisible. On force des couleurs explicites
   qui passent dans les 2 thèmes. */
select,
select option {
  color: #1a2848 !important;        /* texte foncé : visible sur blanc */
  background-color: #ffffff;        /* fond explicite blanc */
}
select option:checked,
select option:hover {
  background-color: #d4b16a !important;
  color: #0F1E3D !important;
}
/* Le select lui-même garde le style du thème (dark) — on n'override que
   les options de la dropdown système qui sont toujours sur fond blanc. */
.lcc-form select,
.account-page select,
select[name="lcc_view_as_set"],
select[name="level"],
select[name="pause-reminder"] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--blanc-casse) !important;
  border: 1px solid var(--ligne-douce);
}
/* Mais les options à l'intérieur restent dark text sur blanc (system) */
.lcc-form select option,
.account-page select option,
select[name="lcc_view_as_set"] option,
select[name="level"] option {
  background-color: #ffffff;
  color: #1a2848 !important;
}
:root[data-theme="light"] select,
:root[data-theme="light"] select option {
  color: #1F1509 !important;
  background-color: #ffffff;
}

/* v0.24 : variants par nombre de cartes pour éviter les orphelines moches */
.account-grid--n2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.account-grid--n3 { grid-template-columns: repeat(3, 1fr); }
.account-grid--n4 { grid-template-columns: repeat(2, 1fr); max-width: 800px; } /* 2x2 au lieu de 3+1 */
.account-grid--n5 { grid-template-columns: repeat(3, 1fr); } /* 3+2 acceptable */
.account-grid--n6 { grid-template-columns: repeat(3, 1fr); } /* 3+3 parfait */
.account-grid--n7 { grid-template-columns: repeat(4, 1fr); } /* 4+3 */
.account-grid--n8 { grid-template-columns: repeat(4, 1fr); } /* 4+4 */
/* Mobile : tout en une colonne quel que soit le variant */
@media (max-width: 720px) {
  .account-grid,
  .account-grid--n2,
  .account-grid--n3,
  .account-grid--n4,
  .account-grid--n5,
  .account-grid--n6,
  .account-grid--n7,
  .account-grid--n8 { grid-template-columns: 1fr; max-width: 100%; }
}
.account-card {
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05)),
    var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.account-card:hover {
  border-color: rgba(212, 177, 106, 0.55);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.account-card-icon {
  font-size: 28px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(212, 177, 106, 0.12);
  border: 1px solid rgba(212, 177, 106, 0.35);
  color: var(--dore);
  margin-bottom: 16px;
}
.account-card h3 { color: var(--blanc-casse); font-size: 22px; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; }
.account-card p { color: var(--gris-doux); font-size: 14px; }
:root[data-theme="light"] .account-card { background: #FFFDF7; }
:root[data-theme="light"] .account-card h3 { color: #2B1F12; }

/* --- BOUTON THEME TOGGLE — animation un peu plus douce --- */
.theme-toggle:hover { transform: rotate(15deg) scale(1.08); }

/* --- FAQ items en mode clair : meilleurs contrastes --- */
:root[data-theme="light"] .faq-item summary { color: #2B1F12; }
:root[data-theme="light"] .faq-item p,
:root[data-theme="light"] .faq-answer p { color: rgba(43, 31, 18, 0.78); }

/* --- TAGS d'escape : on assure la lisibilité dans les 2 thèmes ---
   v0.84 — Tâche #2 : ces règles (plus tardives dans la cascade) écrasaient les
   précédentes. Alignées sur le nouveau style opaque fort contraste. */
.tag-edu { background: #0F1E3D; color: #E8C97D; border: 1px solid var(--dore); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.tag-premium { background: var(--cuivre); color: #FFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }

/* --- COMPARE TABLE en mode clair --- */
:root[data-theme="light"] .compare-table table { background: #FFFDF7; }
:root[data-theme="light"] .compare-table th,
:root[data-theme="light"] .compare-table td { color: #2B1F12; border-color: rgba(184, 146, 61, 0.25); }
:root[data-theme="light"] .compare-table .featured-col { background: rgba(212, 177, 106, 0.08); }

/* --- STAT NUMBERS plus impactants --- */
.stat-number { font-weight: 600; }
.community-stats { gap: 56px; }

/* --- CONTAINER pour aérer les pages secondaires --- */
.section { max-width: 1280px; margin: 0 auto; padding: 80px 32px; }
.subscription { max-width: 1280px; margin: 0 auto; padding: 80px 32px; border-top: 1px solid var(--bordure-doree); border-bottom: 1px solid var(--bordure-doree); background: rgba(15, 30, 61, 0.18); border-radius: 0; }
:root[data-theme="light"] .subscription { background: rgba(212, 177, 106, 0.05); }

/* --- BREADCRUMB un peu plus discret --- */
.breadcrumb { padding: 16px 32px; max-width: 1280px; margin: 0 auto; font-size: 13px; }

/* --- LIGHT theme : body global --- */
:root[data-theme="light"] body { background: var(--bleu-nuit); color: var(--blanc-casse); }
/* v0.64 — Hero clair simple (halos cuivrés/dorés sur fond cream) */
:root[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 60% 40% at 78% 18%, rgba(150, 108, 32, 0.20), transparent 65%),
    radial-gradient(ellipse 55% 45% at 22% 78%, rgba(122, 61, 38, 0.15), transparent 65%),
    radial-gradient(ellipse at center, transparent 0%, rgba(217, 195, 145, 0.30) 100%),
    linear-gradient(180deg, #FBF4DF 0%, #F5E8C8 70%, #EDDDB1 100%);
}
/* Halo central doré profond sur fond clair */
:root[data-theme="light"] .hero-glow {
  background: radial-gradient(circle, rgba(150, 108, 32, 0.16) 0%, rgba(150, 108, 32, 0.06) 35%, transparent 65%);
}
/* v0.61 — Ancienne règle :root[data-theme="light"] .page-hero retirée :
   le nouveau .page-hero multi-couches (silhouette château + brume + étoiles)
   gère son propre light mode plus haut dans la définition de .page-hero. */
/* v0.61 — Anciennes règles light pour .hero::before/.hero::after retirées :
   les pseudos ont désormais un contenu DIFFÉRENT (château + brume au lieu
   de grain + constellations) géré plus haut dans le bloc light mode v0.61. */

/* Lien général en mode clair plus contrasté */
:root[data-theme="light"] a { color: #6F4F18; }
:root[data-theme="light"] a:hover { color: #8A5F16; }
:root[data-theme="light"] .nav-links a { color: #2B1F12; }
:root[data-theme="light"] .nav-links a:hover { color: #8A5F16; background: rgba(184, 146, 61, 0.08); }
:root[data-theme="light"] .nav-links a.is-active { color: #8A5F16; }

/* Hero badge / em colorés */
:root[data-theme="light"] .hero h1 em,
:root[data-theme="light"] .page-hero h1 em { color: #6F4F18; }

/* Reset des fichiers conflit avec le burger */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links.is-open { display: flex; }
}

/* --- Plus de fluidité au scroll --- */
@media (prefers-reduced-motion: no-preference) {
  .escape-card, .plan, .feature, .step, .creator-card, .account-card,
  .subject, .faq-item { will-change: transform; }
}

/* ============================================================
   THÈME CLAIR — corrections de contraste exhaustives
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;
}

/* Texte des paragraphes secondaires */
:root[data-theme="light"] .step p,
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .escape-card p,
:root[data-theme="light"] .plan-tagline,
:root[data-theme="light"] .stat-label,
:root[data-theme="light"] .footer-bottom span,
:root[data-theme="light"] .breadcrumb,
:root[data-theme="light"] .breadcrumb a,
:root[data-theme="light"] .creator-card p,
:root[data-theme="light"] .creator-stats,
:root[data-theme="light"] .escape-card-meta,
:root[data-theme="light"] .escape-card-meta span {
  color: rgba(43, 31, 18, 0.78);
}

/* Titres */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] .plan-name,
:root[data-theme="light"] .escape-card h3,
:root[data-theme="light"] .creator-card h4,
:root[data-theme="light"] .step h3,
:root[data-theme="light"] .feature h3,
:root[data-theme="light"] .account-card h3,
:root[data-theme="light"] .section-header h2 {
  color: #2B1F12;
}

/* Page hero : titres lisibles sur fond ivoire */
:root[data-theme="light"] .page-hero h1,
:root[data-theme="light"] .hero h1 { color: #2B1F12; }
:root[data-theme="light"] .page-hero p,
:root[data-theme="light"] .hero p { color: rgba(43, 31, 18, 0.78); }

/* Plan price doré */
:root[data-theme="light"] .plan-price { color: #6F4F18; }
:root[data-theme="light"] .plan-price span { color: rgba(43, 31, 18, 0.55); }

/* ============================================================
   v0.58 — DEFENSIVE LIGHT-MODE OVERRIDES (form fields + utilitaires)
   Pour éviter tout texte clair sur fond clair (ou inversement).
   ============================================================ */
/* Inputs / textarea / select : texte foncé + fond ivoire, focus doré */
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="url"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="tel"],
:root[data-theme="light"] input[type="number"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background-color: #FFFDF7 !important;
  color: #1F1509 !important;
  border-color: rgba(150, 108, 32, 0.40) !important;
  color-scheme: light;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
  color: rgba(43, 31, 18, 0.45) !important;
}
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
  border-color: #8A5F16 !important;
  box-shadow: 0 0 0 3px rgba(150, 108, 32, 0.18);
  outline: none;
}
:root[data-theme="light"] select option {
  background: #FFFDF7;
  color: #1F1509;
}

/* Bouton primary : doré sur foncé pour ressortir nettement */
:root[data-theme="light"] .btn-primary {
  color: #1F1509 !important;
  text-shadow: none;
}
/* Bouton ghost : pas de texte clair invisible */
:root[data-theme="light"] .btn-ghost {
  color: #1F1509;
  border-color: rgba(150, 108, 32, 0.55);
  background: rgba(255, 253, 247, 0.6);
}
:root[data-theme="light"] .btn-ghost:hover {
  color: #6F4F18;
  background: rgba(150, 108, 32, 0.12);
  border-color: #8A5F16;
}

/* Section eyebrow (les chips MULTIJOUEUR, À LA UNE…) */
:root[data-theme="light"] .section-eyebrow {
  color: #6F4F18;
}

/* Footer : forcer texte lisible en mode clair (le footer est sombre par défaut)
   v0.82 — Audit contraste : tous les textes du footer en mode clair étaient
   restés en couleurs claires (#FFE2A6, blanc cassé 0.88, etc.) sur fond crème
   → ratio 1.05 (illisible). Tous repassés en marron foncé #1F1509 / #2B1F12
   contrastés sur fond #F0EAD9 → ratio > 9 (AAA). */
:root[data-theme="light"] .site-footer { background: #F0EAD9; color: #1F1509; }
:root[data-theme="light"] .site-footer h4 { color: #2B1F12; }
:root[data-theme="light"] .site-footer a { color: #6F4F18; }
:root[data-theme="light"] .site-footer a:hover { color: #8A5F16; }
:root[data-theme="light"] .site-footer .footer-brand p { color: rgba(43, 31, 18, 0.85); }
:root[data-theme="light"] .site-footer .site-logo,
:root[data-theme="light"] .site-footer .site-title-text { color: #6F4F18; }
:root[data-theme="light"] .site-footer .footer-col a { color: rgba(43, 31, 18, 0.85); }
:root[data-theme="light"] .site-footer .footer-col a:hover { color: #8A5F16; }
:root[data-theme="light"] .site-footer .footer-bottom,
:root[data-theme="light"] .site-footer .footer-bottom span,
:root[data-theme="light"] .site-footer .footer-bottom a { color: rgba(43, 31, 18, 0.75); }
:root[data-theme="light"] .footer-col h4 { color: #2B1F12; }
:root[data-theme="light"] .footer-col li { color: rgba(43, 31, 18, 0.78); }
/* Liens sociaux footer en light : bordure plus visible + texte foncé */
:root[data-theme="light"] .footer-social-link { color: #6F4F18; border-color: rgba(111, 79, 24, 0.35); background: rgba(212, 177, 106, 0.10); }
:root[data-theme="light"] .footer-social-link:hover { color: #8A5F16; border-color: #8A5F16; }

/* Cartes générales (account-card, plan, escape-card) : fonds + bordures cohérents */
:root[data-theme="light"] .escape-card,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .feature,
:root[data-theme="light"] .creator-card {
  background: #FFFDF7;
  border-color: rgba(150, 108, 32, 0.30);
  color: #1F1509;
}
:root[data-theme="light"] .escape-card h3,
:root[data-theme="light"] .plan h3,
:root[data-theme="light"] .creator-card h4 {
  color: #1F1509;
}
:root[data-theme="light"] .escape-card p,
:root[data-theme="light"] .plan-features li,
:root[data-theme="light"] .feature p {
  color: rgba(43, 31, 18, 0.82);
}

/* Tags / badges sur cartes */
:root[data-theme="light"] .escape-card-tag,
:root[data-theme="light"] .escape-card-meta {
  color: #6F4F18;
}

/* Nav badges (mode prévisualisation, modo, etc.) */
:root[data-theme="light"] .account-badge,
:root[data-theme="light"] .account-badge-admin {
  background: rgba(150, 108, 32, 0.15);
  color: #6F4F18;
  border: 1px solid rgba(150, 108, 32, 0.5);
}

/* lcc-form-label */
:root[data-theme="light"] .lcc-form-label { color: #6F4F18; }
:root[data-theme="light"] .lcc-form-check { color: #1F1509; }

/* lcc-form-errors / success en clair */
:root[data-theme="light"] .lcc-form-errors {
  background: rgba(192, 57, 43, 0.10);
  border-color: rgba(192, 57, 43, 0.45);
  color: #8b1f15;
}
:root[data-theme="light"] .lcc-form-success {
  background: rgba(46, 204, 113, 0.10);
  border-color: rgba(46, 204, 113, 0.45);
  color: #1f6a3f;
}

/* Modales / dropdowns : fonds clairs explicites */
:root[data-theme="light"] .lcc-toast {
  background: #FFFDF7;
  color: #1F1509;
  border: 1px solid rgba(150, 108, 32, 0.40);
}
:root[data-theme="light"] .lcc-toast__text { color: #1F1509; }
:root[data-theme="light"] .lcc-toast__close { color: rgba(43, 31, 18, 0.55); }
:root[data-theme="light"] .lcc-toast__close:hover { color: #1F1509; }

/* Plan featured : tag « Recommandé » au sommet */
:root[data-theme="light"] .plan.featured {
  border-color: #8A5F16;
}
:root[data-theme="light"] .plan-soon-tag {
  background: rgba(150, 108, 32, 0.18);
  color: #6F4F18;
  border-color: rgba(150, 108, 32, 0.55);
}
:root[data-theme="light"] .btn-soon {
  background: rgba(31, 21, 9, 0.04);
  border-color: rgba(150, 108, 32, 0.5);
  color: rgba(43, 31, 18, 0.55);
}

/* Search modal (Ctrl+K) */
:root[data-theme="light"] .lcc-search-modal {
  background: rgba(43, 31, 18, 0.35);
}
:root[data-theme="light"] .lcc-search-modal__panel {
  background: #FFFDF7;
  border-color: rgba(150, 108, 32, 0.4);
  color: #1F1509;
}
:root[data-theme="light"] .lcc-search-modal__hint { color: rgba(43, 31, 18, 0.55); }
:root[data-theme="light"] .lcc-search-modal__footer kbd {
  background: #F0EAD9;
  border-color: rgba(150, 108, 32, 0.3);
  color: #1F1509;
}

/* Plan features cochées */
:root[data-theme="light"] .plan-features li { color: rgba(43, 31, 18, 0.85); border-bottom-color: rgba(184, 146, 61, 0.2); }

/* CTA banner */
:root[data-theme="light"] .cta-banner {
  background: linear-gradient(135deg, rgba(212, 177, 106, 0.10), rgba(184, 146, 61, 0.06));
  border: 1px solid rgba(184, 146, 61, 0.35);
  color: #2B1F12;
}
:root[data-theme="light"] .cta-banner h2 { color: #2B1F12; }
:root[data-theme="light"] .cta-banner p { color: rgba(43, 31, 18, 0.78); }

/* Tags — v0.84 tâche #2 : fonds opaques (le badge est sur une photo, le fond
   translucide à 0.15 donnait un ratio ≈ 2.57). Texte foncé sur gold vif. */
:root[data-theme="light"] .escape-card-tag.tag-demo {
  background: #D9B96E;
  color: #241A05;
  border: 1px solid #966C20;
}
:root[data-theme="light"] .escape-card-tag.tag-edu {
  background: #0F1E3D;
  color: #E8C97D;
  border-color: var(--dore);
}
:root[data-theme="light"] .escape-card-tag.tag-premium {
  background: #8C4A2E;
  color: #FFF;
}

/* Filter chips */
:root[data-theme="light"] .filter-chip {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
  color: rgba(43, 31, 18, 0.78);
}
:root[data-theme="light"] .filter-chip:hover {
  border-color: #6F4F18;
  color: #6F4F18;
}
:root[data-theme="light"] .filter-chip.active {
  background: #966C20;
  color: #FFF;
  border-color: #6F4F18;
}
:root[data-theme="light"] .filter-label {
  color: rgba(43, 31, 18, 0.6);
}

/* Pagination */
:root[data-theme="light"] .pagination a,
:root[data-theme="light"] .pagination span {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
  color: #2B1F12;
}
:root[data-theme="light"] .pagination .current {
  background: #966C20;
  color: #FFF;
}

/* Card prix */
:root[data-theme="light"] .price { color: #6F4F18; }
:root[data-theme="light"] .price-free { color: #8A5F16; }
:root[data-theme="light"] .card-link { color: #6F4F18; }
:root[data-theme="light"] .card-link:hover { color: #8A5F16; }

/* Compare table dans le mode clair : assure contrast */
:root[data-theme="light"] .compare-table .check { color: #6F4F18; }
:root[data-theme="light"] .compare-table .cross { color: rgba(43, 31, 18, 0.35); }

/* Scrollbar sur thème clair */
:root[data-theme="light"] ::-webkit-scrollbar { width: 12px; }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #F0EAD9; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(184, 146, 61, 0.4); border-radius: 6px; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(184, 146, 61, 0.65); }

/* ============================================================
   FORMULAIRES (inscription, contact, etc.)
   ============================================================ */
.lcc-form { display: flex; flex-direction: column; gap: 20px; }
.lcc-form-row { display: flex; flex-direction: column; gap: 6px; }
.lcc-form-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--dore); font-weight: 600; }
.lcc-form input[type="text"],
.lcc-form input[type="email"],
.lcc-form input[type="password"],
.lcc-form input[type="url"],
.lcc-form textarea,
.lcc-form select {
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-sm);
  color: var(--blanc-casse);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lcc-form input:focus, .lcc-form textarea:focus, .lcc-form select:focus {
  outline: none;
  border-color: var(--dore);
  background: rgba(212, 177, 106, 0.05);
}
.lcc-form-row small { color: var(--gris-doux); font-size: 12px; }
.lcc-form-check { display: flex; gap: 10px; align-items: flex-start; color: var(--gris-doux); font-size: 14px; line-height: 1.5; cursor: pointer; }
.lcc-form-check input { margin-top: 4px; flex-shrink: 0; accent-color: var(--dore); }
.lcc-form-errors {
  background: rgba(140, 74, 46, 0.15);
  border: 1px solid rgba(140, 74, 46, 0.5);
  color: #E5B099;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-size: 14px;
}
.lcc-form-errors ul { margin: 8px 0 0 18px; }
.lcc-form-success {
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.5);
  color: #6ee7a8;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-size: 14px;
}

/* ============================================================
   USER PILL (header) — avatar rond + nom
   ============================================================ */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(212, 177, 106, 0.08);
  border: 1px solid var(--bordure-doree);
  color: var(--blanc-casse);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  max-width: 200px;
  height: 42px;
  box-sizing: border-box;
}
.user-pill:hover {
  border-color: var(--dore);
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore-clair);
}
.user-pill-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(212, 177, 106, 0.25);
  border: 1px solid rgba(212, 177, 106, 0.4);
  flex-shrink: 0;
  display: inline-block;
  overflow: hidden;
}
.user-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="light"] .user-pill { color: #2B1F12; background: rgba(184, 146, 61, 0.10); }
:root[data-theme="light"] .user-pill:hover { color: #6F4F18; background: rgba(184, 146, 61, 0.20); }

/* ============================================================
   PAGE COMPTE — header + onglets + panes
   ============================================================ */
.account-page { max-width: 1080px; margin: 0 auto; padding: 80px 32px; }
/* v0.97 — Mobile : les 80px de padding-top (en plus des 76px réservés au header
   fixe) créaient un gros vide au-dessus de la carte profil. On resserre le
   padding-top uniquement (sans toucher à la disposition de l'en-tête). */
@media (max-width: 768px) {
  .account-page { padding-top: 24px; padding-bottom: 40px; }
}

.account-header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  margin-bottom: 32px;
  background:
    linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02)),
    var(--bg-card);
  border: 1px solid var(--bordure-doree);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.account-avatar-wrap { position: relative; }
.account-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(212, 177, 106, 0.1);
  border: 3px solid var(--dore);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 30px rgba(212, 177, 106, 0.15);
}
.account-avatar-sm { width: 80px; height: 80px; border-width: 2px; }
.account-avatar-edit {
  position: absolute;
  bottom: 0; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dore);
  border: 3px solid var(--bg-card);
  color: #1a1408;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.account-avatar-edit:hover { transform: scale(1.1); }
.account-avatar-edit svg { width: 18px; height: 18px; }

.account-identity h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 12px; }
.account-identity p  { color: var(--gris-doux); font-size: 15px; }

.account-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 8px;
  background: rgba(212, 177, 106, 0.15);
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: var(--dore);
}
.account-badge-maitre { background: var(--gradient-gold); color: #1a1408; border-color: transparent; }
.account-badge-aventurier { background: rgba(212, 177, 106, 0.25); color: var(--dore-clair); }
.account-badge-decouverte { background: rgba(245, 239, 230, 0.08); color: var(--blanc-casse); }
.account-badge-admin { background: rgba(140, 74, 46, 0.25); color: #E5B099; border-color: rgba(140, 74, 46, 0.5); }

/* Onglets */
.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bordure-doree);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.account-tab {
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gris-doux);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.account-tab:hover { color: var(--dore); }
.account-tab.is-active {
  color: var(--dore);
  border-bottom-color: var(--dore);
}
.account-tab-danger { margin-left: auto; color: #E5B099; }
.account-tab-danger:hover, .account-tab-danger.is-active { color: #FF8B6F; border-bottom-color: #B97A5A; }

.tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(212, 177, 106, 0.2);
  font-size: 11px;
  text-align: center;
  color: var(--dore);
}

.account-pane { display: none; animation: fadeIn 0.25s ease; }
.account-pane.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.account-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--dore);
  margin-bottom: 20px;
}

.account-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--gris-doux);
}
.account-empty p { margin-bottom: 16px; font-size: 17px; }

/* ============================================================
   AUDIT CONTRASTES — corrections globales light theme
   ============================================================ */

/* Compare-table : fond ivoire, texte doré → contraste insuffisant */
:root[data-theme="light"] .compare-table th {
  background: #966C20;
  color: #FFFDF7;
}
:root[data-theme="light"] .compare-table th:first-child { color: #FFFDF7; }

/* v0.86 — AUDIT CONTRASTES (passe 2) :
   En-tête de la colonne « featured » (ex. « Aventurier ») : le fond translucide
   .featured-col (rgba 0.08, plus spécifique) écrasait le fond doré du th tout en
   gardant le texte blanc → blanc sur ivoire (ratio 1.00, invisible). On restaure
   un fond doré plein pour ce th précis. */
:root[data-theme="light"] .compare-table th.featured-col {
  background: #966C20;
  color: #FFFDF7;
}

/* Skip-link (lien d'évitement clavier) : en thème clair, le texte passait à
   #6F4F18 sur fond doré #966C20 (ratio 1.59). Fond doré CLAIR + texte quasi noir
   → ~8:1, quel que soit le thème. */
:root[data-theme="light"] .lcc-skip-link {
  background: #D4B16A;
  color: #1a1408;
}

/* Section subscription en light theme : fond doré subtil */
:root[data-theme="light"] .subscription {
  background: linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02));
  border-top: 1px solid rgba(184, 146, 61, 0.35);
  border-bottom: 1px solid rgba(184, 146, 61, 0.35);
}

/* Hero badge (si présent ailleurs) */
:root[data-theme="light"] .hero-badge { color: #6F4F18; border-color: rgba(184, 146, 61, 0.6); }

/* Step number circle (étapes "Comment ça marche") */
:root[data-theme="light"] .step-number { color: #6F4F18; border-color: #8A5F16; }

/* Faq summary chevron + state */
:root[data-theme="light"] .faq-item summary { color: #2B1F12; }
:root[data-theme="light"] .faq-item summary:hover { color: #6F4F18; }
:root[data-theme="light"] .faq-item[open] summary { color: #6F4F18; }

/* Feature icons (svg avec stroke=currentColor) */
:root[data-theme="light"] .feature-icon { color: #6F4F18; }

/* Subject (FAQ catégories ou similaire) */
:root[data-theme="light"] .subject h4 { color: #2B1F12; }
:root[data-theme="light"] .subject p { color: rgba(43, 31, 18, 0.78); }

/* Notification panel en light theme : fond clair */
:root[data-theme="light"] .lcc-notif-panel {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
  box-shadow: 0 12px 32px rgba(60, 40, 10, 0.15);
}
:root[data-theme="light"] .lcc-notif-header { color: #6F4F18; border-bottom-color: rgba(184, 146, 61, 0.25); }
:root[data-theme="light"] .lcc-notif-item { border-bottom-color: rgba(184, 146, 61, 0.1); }
:root[data-theme="light"] .lcc-notif-item.unread { background: rgba(212, 177, 106, 0.10); }
:root[data-theme="light"] .lcc-notif-body a { color: #2B1F12; }
:root[data-theme="light"] .lcc-notif-body a:hover { color: #6F4F18; }
:root[data-theme="light"] .lcc-notif-body small { color: rgba(43, 31, 18, 0.55); }
:root[data-theme="light"] .lcc-notif-footer { border-top-color: rgba(184, 146, 61, 0.25); }
:root[data-theme="light"] .lcc-notif-bell { color: #2B1F12; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .lcc-notif-bell:hover { color: #6F4F18; border-color: #8A5F16; }
:root[data-theme="light"] .lcc-notif-badge { border-color: #FAF7F0; }

/* Theme toggle button en light theme */
:root[data-theme="light"] .theme-toggle { color: #2B1F12; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .theme-toggle:hover { color: #6F4F18; border-color: #8A5F16; }

/* Burger menu mobile en light theme */
:root[data-theme="light"] .nav-burger { color: #2B1F12; border-color: rgba(184, 146, 61, 0.4); }

/* Skip button du visual novel : reste inchangé (toujours sur fond sombre du jeu) */

/* Light theme adjustments */
:root[data-theme="light"] .account-header {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
}
:root[data-theme="light"] .account-identity h1 { color: #2B1F12; }
:root[data-theme="light"] .account-identity p { color: rgba(43, 31, 18, 0.78); }
:root[data-theme="light"] .account-section-title { color: #6F4F18; }
:root[data-theme="light"] .account-tab { color: rgba(43, 31, 18, 0.65); }
:root[data-theme="light"] .account-tab:hover,
:root[data-theme="light"] .account-tab.is-active { color: #6F4F18; border-bottom-color: #8A5F16; }

/* Light theme forms */
:root[data-theme="light"] .lcc-form input,
:root[data-theme="light"] .lcc-form textarea,
:root[data-theme="light"] .lcc-form select {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.4);
  color: #2B1F12;
}
:root[data-theme="light"] .lcc-form input:focus,
:root[data-theme="light"] .lcc-form textarea:focus,
:root[data-theme="light"] .lcc-form select:focus { background: #FFF; border-color: #8A5F16; }
:root[data-theme="light"] .lcc-form-label { color: #6F4F18; }
:root[data-theme="light"] .lcc-form-check { color: rgba(43, 31, 18, 0.78); }
:root[data-theme="light"] .lcc-form-row small { color: rgba(43, 31, 18, 0.6); }
:root[data-theme="light"] .lcc-form-errors { background: rgba(140, 74, 46, 0.10); color: #6B2C18; border-color: rgba(140, 74, 46, 0.4); }
:root[data-theme="light"] .lcc-form-success { background: rgba(46, 124, 90, 0.10); color: #1F6B47; border-color: rgba(46, 124, 90, 0.4); }
.account-avatar-wrap { position: relative; }
.account-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(212, 177, 106, 0.1);
  border: 3px solid var(--dore);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 30px rgba(212, 177, 106, 0.15);
}
.account-avatar-sm { width: 80px; height: 80px; border-width: 2px; }
.account-avatar-edit {
  position: absolute;
  bottom: 0; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dore);
  border: 3px solid var(--bg-card);
  color: #1a1408;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.account-avatar-edit svg { width: 18px; height: 18px; }
.account-identity h1 { font-size: clamp(28px, 4vw, 42px); margin: 8px 0 12px; }
.account-identity p  { color: var(--gris-doux); font-size: 15px; }
.account-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 8px;
  background: rgba(212, 177, 106, 0.15);
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: var(--dore);
}
.account-badge-maitre { background: var(--gradient-gold); color: #1a1408; border-color: transparent; }
.account-badge-aventurier { background: rgba(212, 177, 106, 0.25); color: var(--dore-clair); }
.account-badge-decouverte { background: rgba(245, 239, 230, 0.08); color: var(--blanc-casse); }
.account-badge-admin { background: rgba(140, 74, 46, 0.25); color: #E5B099; border-color: rgba(140, 74, 46, 0.5); }
.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bordure-doree);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.account-tab {
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gris-doux);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.account-tab:hover { color: var(--dore); }
.account-tab.is-active { color: var(--dore); border-bottom-color: var(--dore); }
.account-tab-danger { margin-left: auto; color: #E5B099; }
.tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(212, 177, 106, 0.2);
  font-size: 11px;
  text-align: center;
  color: var(--dore);
}
.account-pane { display: none; }
.account-pane.is-active { display: block; }
.account-section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: var(--dore);
  margin-bottom: 20px;
}
.account-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--gris-doux);
}
:root[data-theme="light"] .account-header { background: #FFFDF7; border-color: rgba(184, 146, 61, 0.4); }
:root[data-theme="light"] .account-identity h1 { color: #2B1F12; }
:root[data-theme="light"] .account-identity p { color: rgba(43, 31, 18, 0.78); }
:root[data-theme="light"] .account-section-title { color: #6F4F18; }
:root[data-theme="light"] .account-tab { color: rgba(43, 31, 18, 0.65); }
:root[data-theme="light"] .account-tab:hover,
:root[data-theme="light"] .account-tab.is-active { color: #6F4F18; border-bottom-color: #8A5F16; }

/* ==================================================================
   v1.05 — Système d'ACTUALITÉS (Phase 2 du gros lot Interfaces)
   Cartes news affichées sur accueil + page Communauté + /actualites/.
   Variants par type d'actu (escape / fonctionnalité / fix / général).
   ================================================================== */
.lcc-news-section {
  padding: 40px 24px 56px;
  max-width: 1100px;
  margin: 0 auto;
}
.lcc-news-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.lcc-news-section-head h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.4px;
  color: var(--dore);
}
.lcc-news-section-head .lcc-news-section-sub {
  font-size: 13.5px;
  color: rgba(232, 224, 210, 0.65);
}
:root[data-theme="light"] .lcc-news-section-head .lcc-news-section-sub {
  color: rgba(43, 31, 18, 0.7);
}
.lcc-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.lcc-news-list--compact { gap: 14px; }
.lcc-news-empty {
  text-align: center;
  padding: 28px 14px;
  border: 1px dashed var(--ligne-douce);
  border-radius: 12px;
  color: rgba(232, 224, 210, 0.55);
  font-style: italic;
}
:root[data-theme="light"] .lcc-news-empty { color: rgba(43, 31, 18, 0.55); }

.lcc-news-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--ligne-douce);
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.lcc-news-card:hover {
  border-color: var(--dore);
  background: linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02));
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(212, 177, 106, 0.18);
}
/* v1.07 — Carte FEATURED (avec compte à rebours intégré) : prend toute la
   largeur de la grille pour mettre l'événement en avant + bordure plus
   marquée + halo subtil + layout interne plus aéré. */
.lcc-news-card.is-featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(212, 177, 106, 0.1), rgba(15, 30, 61, 0.4) 60%, rgba(10, 21, 48, 0.3));
  border-color: rgba(212, 177, 106, 0.55);
  border-width: 1.5px;
  padding: 28px 28px 24px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(212, 177, 106, 0.15), inset 0 0 60px rgba(212, 177, 106, 0.04);
}
.lcc-news-card.is-featured:hover {
  border-color: var(--dore);
  transform: translateY(-3px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 177, 106, 0.3), inset 0 0 60px rgba(212, 177, 106, 0.06);
}
.lcc-news-card.is-featured .lcc-news-title {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}
.lcc-news-card.is-featured .lcc-news-excerpt {
  font-size: 15px;
  max-width: 720px;
}
:root[data-theme="light"] .lcc-news-card.is-featured {
  background: linear-gradient(135deg, rgba(184, 146, 61, 0.1), #FFFDF7 60%);
  border-color: rgba(138, 95, 22, 0.55);
}
/* Wrapper pour countdown intégré à la carte (v1.07) */
.lcc-news-countdown-wrap {
  margin: 4px -4px 2px;
}
.lcc-news-countdown-wrap .lcc-countdown {
  margin: 8px auto 4px;
  max-width: 100%;
}
.lcc-news-card.is-featured .lcc-news-countdown-wrap .lcc-countdown {
  max-width: 720px;
}
:root[data-theme="light"] .lcc-news-card {
  background: #FFFDF7;
  border-color: rgba(184, 146, 61, 0.45);
}
:root[data-theme="light"] .lcc-news-card:hover {
  border-color: #8A5F16;
  background: #FFF9EC;
}
.lcc-news-card.is-archived { opacity: 0.7; }
.lcc-news-card.is-archived::after {
  content: "ARCHIVÉE";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: rgba(232, 224, 210, 0.55);
  border: 1px solid currentColor;
  padding: 2px 6px;
  border-radius: 999px;
}
:root[data-theme="light"] .lcc-news-card.is-archived::after { color: rgba(43, 31, 18, 0.55); }

.lcc-news-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.lcc-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212, 177, 106, 0.18);
  color: var(--dore);
  border: 1px solid rgba(212, 177, 106, 0.4);
}
:root[data-theme="light"] .lcc-news-badge {
  background: rgba(184, 146, 61, 0.15);
  color: #6F4F18;
  border-color: rgba(138, 95, 22, 0.45);
}
.news-type-escape .lcc-news-badge { background: rgba(189, 105, 67, 0.18); color: #E69767; border-color: rgba(189, 105, 67, 0.4); }
.news-type-feat   .lcc-news-badge { background: rgba(122, 178, 134, 0.18); color: #95D2A5; border-color: rgba(122, 178, 134, 0.4); }
.news-type-fix    .lcc-news-badge { background: rgba(106, 154, 199, 0.18); color: #9BC1E2; border-color: rgba(106, 154, 199, 0.4); }
:root[data-theme="light"] .news-type-escape .lcc-news-badge { background: rgba(189, 105, 67, 0.14); color: #8A3D1A; border-color: rgba(138, 60, 26, 0.45); }
:root[data-theme="light"] .news-type-feat   .lcc-news-badge { background: rgba(80, 140, 95, 0.14); color: #2E5C3A; border-color: rgba(46, 92, 58, 0.45); }
:root[data-theme="light"] .news-type-fix    .lcc-news-badge { background: rgba(70, 120, 175, 0.14); color: #1F4576; border-color: rgba(31, 69, 118, 0.45); }

.lcc-news-date {
  font-size: 11.5px;
  color: rgba(232, 224, 210, 0.55);
  letter-spacing: 0.3px;
}
:root[data-theme="light"] .lcc-news-date { color: rgba(43, 31, 18, 0.6); }

.lcc-news-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
  margin: 0;
  color: #F5EFE6;
}
:root[data-theme="light"] .lcc-news-title { color: #2B1F12; }

.lcc-news-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(232, 224, 210, 0.85);
}
:root[data-theme="light"] .lcc-news-excerpt { color: rgba(43, 31, 18, 0.85); }

.lcc-news-full {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(212, 177, 106, 0.3);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(232, 224, 210, 0.92);
}
:root[data-theme="light"] .lcc-news-full {
  color: rgba(43, 31, 18, 0.92);
  border-top-color: rgba(138, 95, 22, 0.3);
}
.lcc-news-full p:first-child { margin-top: 0; }
.lcc-news-full p:last-child { margin-bottom: 0; }

/* v1.65 — Tags synthétiques dans la carte (extraits des h3 du contenu) */
.lcc-news-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lcc-news-tag {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(212, 177, 106, 0.10);
  border: 1px solid rgba(212, 177, 106, 0.28);
  color: rgba(232, 224, 210, 0.85);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcc-news-tag-more {
  background: transparent;
  border-style: dashed;
  color: var(--dore);
  font-weight: 600;
}
:root[data-theme="light"] .lcc-news-tag {
  background: rgba(184, 146, 61, 0.10);
  border-color: rgba(138, 95, 22, 0.30);
  color: rgba(43, 31, 18, 0.85);
}
:root[data-theme="light"] .lcc-news-tag-more { color: #6F4F18; }

/* v1.65 — Bouton « Voir le détail » qui ouvre le modal */
.lcc-news-detail-btn {
  align-self: flex-start;
  margin-top: 8px;
  background: rgba(212, 177, 106, 0.10);
  border: 1px solid rgba(212, 177, 106, 0.45);
  color: var(--dore);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.lcc-news-detail-btn:hover {
  background: rgba(212, 177, 106, 0.22);
  border-color: var(--dore);
  transform: translateY(-1px);
}
.lcc-news-detail-btn:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 2px;
}
:root[data-theme="light"] .lcc-news-detail-btn {
  color: #6F4F18;
  border-color: rgba(138, 95, 22, 0.55);
}
:root[data-theme="light"] .lcc-news-detail-btn:hover {
  background: rgba(184, 146, 61, 0.18);
  border-color: #8A5F16;
}

/* v1.65 — Modal plein écran pour le détail d'une note de patch.
   Style « patch note » façon LoL/Valorant : carte centrée large, tête
   ancrée avec badge type + date, corps scrollable, close XL en haut à
   droite. Overlay fade-in doux. */
.lcc-news-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  animation: lccNewsModalIn 0.22s ease;
}
.lcc-news-modal-overlay[hidden] { display: none; }
@keyframes lccNewsModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lcc-news-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 16, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.lcc-news-modal-card {
  position: relative;
  z-index: 1;
  max-width: 880px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a1428 0%, #100d1c 100%);
  border: 1px solid rgba(212, 177, 106, 0.55);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 177, 106, 0.15);
  padding: 26px 32px 30px;
  overflow: hidden;
  animation: lccNewsCardIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes lccNewsCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
:root[data-theme="light"] .lcc-news-modal-card {
  background: linear-gradient(180deg, #FFFDF7 0%, #F5EEDA 100%);
  border-color: rgba(138, 95, 22, 0.55);
  box-shadow: 0 30px 90px rgba(80, 55, 20, 0.35);
}
.lcc-news-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.lcc-news-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(232, 224, 210, 0.75);
}
.lcc-news-modal-icon { font-size: 18px; }
.lcc-news-modal-type { color: var(--dore); }
.lcc-news-modal-sep  { opacity: 0.5; }
:root[data-theme="light"] .lcc-news-modal-badge { color: rgba(43, 31, 18, 0.75); }
:root[data-theme="light"] .lcc-news-modal-type  { color: #6F4F18; }
.lcc-news-modal-close {
  background: rgba(212, 177, 106, 0.10);
  border: 1px solid rgba(212, 177, 106, 0.45);
  color: var(--dore);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.lcc-news-modal-close:hover {
  background: rgba(212, 177, 106, 0.25);
  transform: scale(1.05);
}
.lcc-news-modal-close:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 2px;
}
:root[data-theme="light"] .lcc-news-modal-close {
  color: #6F4F18;
  border-color: rgba(138, 95, 22, 0.55);
}
.lcc-news-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.15;
  margin: 0 0 20px;
  color: #F5EFE6;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(212, 177, 106, 0.28);
  flex-shrink: 0;
}
:root[data-theme="light"] .lcc-news-modal-title {
  color: #2B1F12;
  border-bottom-color: rgba(138, 95, 22, 0.35);
}
.lcc-news-modal-body {
  overflow-y: auto;
  padding-right: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(232, 224, 210, 0.92);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 177, 106, 0.55) rgba(10, 21, 48, 0.4);
}
:root[data-theme="light"] .lcc-news-modal-body {
  color: rgba(43, 31, 18, 0.92);
  scrollbar-color: rgba(150, 108, 32, 0.6) rgba(240, 234, 217, 0.5);
}
.lcc-news-modal-body::-webkit-scrollbar { width: 8px; }
.lcc-news-modal-body::-webkit-scrollbar-track {
  background: rgba(10, 21, 48, 0.4);
  border-radius: 4px;
}
.lcc-news-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212, 177, 106, 0.55), rgba(150, 108, 32, 0.8));
  border-radius: 4px;
}
.lcc-news-modal-body h3,
.lcc-news-modal-body h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--dore);
  margin: 26px 0 10px;
  font-size: 20px;
  padding: 6px 12px;
  background: rgba(212, 177, 106, 0.08);
  border-left: 3px solid var(--dore);
  border-radius: 0 6px 6px 0;
}
.lcc-news-modal-body h4 { font-size: 17px; margin-top: 18px; }
.lcc-news-modal-body h3:first-child,
.lcc-news-modal-body h4:first-child { margin-top: 0; }
:root[data-theme="light"] .lcc-news-modal-body h3,
:root[data-theme="light"] .lcc-news-modal-body h4 {
  color: #6F4F18;
  background: rgba(184, 146, 61, 0.12);
  border-left-color: #8A5F16;
}
.lcc-news-modal-body ul,
.lcc-news-modal-body ol { padding-left: 24px; }
.lcc-news-modal-body li { margin-bottom: 6px; }
.lcc-news-modal-body p:first-child { margin-top: 0; }
.lcc-news-modal-body p:last-child  { margin-bottom: 0; }
.lcc-news-modal-body code {
  background: rgba(212, 177, 106, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.88em;
  color: #FFE7AC;
}
:root[data-theme="light"] .lcc-news-modal-body code {
  background: rgba(184, 146, 61, 0.18);
  color: #6F4F18;
}
body.lcc-news-modal-open { overflow: hidden; }
@media (max-width: 700px) {
  .lcc-news-modal-overlay { padding: 12px; }
  .lcc-news-modal-card { padding: 20px 22px 24px; max-height: 92vh; }
  .lcc-news-modal-body { padding-right: 6px; }
}

/* v1.65 — Legacy toggle : caché mais laissé au cas où un vieux post
   contiendrait encore le pattern. Le mécanisme actif est detail-btn. */
.lcc-news-toggle {
  align-self: flex-start;
  margin-top: 6px;
  background: none;
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: var(--dore);
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lcc-news-toggle:hover {
  background: rgba(212, 177, 106, 0.12);
  border-color: var(--dore);
}
.lcc-news-toggle:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 2px;
}
.lcc-news-toggle .t-less { display: none; }
.lcc-news-toggle[aria-expanded="true"] .t-more { display: none; }
.lcc-news-toggle[aria-expanded="true"] .t-less { display: inline; }
:root[data-theme="light"] .lcc-news-toggle {
  color: #6F4F18;
  border-color: rgba(138, 95, 22, 0.5);
}
:root[data-theme="light"] .lcc-news-toggle:hover {
  background: rgba(184, 146, 61, 0.15);
  border-color: #8A5F16;
}

/* Section archives sur Communauté : repliée par défaut via <details> */
.lcc-news-archives-block {
  margin: 28px auto 0;
  max-width: 1100px;
  padding: 0 24px;
}
.lcc-news-archives-block summary {
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--dore);
  padding: 10px 0;
  border-top: 1px dashed rgba(212, 177, 106, 0.3);
  border-bottom: 1px dashed rgba(212, 177, 106, 0.3);
  list-style: none;
}
.lcc-news-archives-block summary::-webkit-details-marker { display: none; }
.lcc-news-archives-block summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s ease;
}
.lcc-news-archives-block[open] summary::before { transform: rotate(90deg); }
.lcc-news-archives-block > .lcc-news-list { margin-top: 18px; }

/* Section accueil un peu plus dense */
.lcc-home-news { padding-top: 30px; padding-bottom: 30px; }
.lcc-home-news .lcc-news-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ==================================================================
   v1.39 — Carrousel d'actualités (mode `carousel => true` de
   lcc_render_news_list). Calqué sur .escape-carousel pour cohérence
   visuelle. Les boutons prev/next sont sur les côtés du track, et le
   masque dégradé .at-start / .at-end évite tout rognage des cartes en
   butée (la 1ʳᵉ et la dernière sont toujours intégralement visibles).
   ================================================================== */
.lcc-news-carousel-wrap {
  position: relative;
  display: flex;
  align-items: stretch; /* boutons à hauteur du track pour lisibilité */
  gap: 10px;
  padding: 8px 8px;
  overflow: visible;
  margin-top: 14px; /* espace après la carte épinglée (countdown) si présente */
}
.lcc-news-carousel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 6px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 177, 106, 0.55) rgba(10, 21, 48, 0.4);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.lcc-news-carousel.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.lcc-news-carousel.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
}
.lcc-news-carousel.at-start.at-end {
  -webkit-mask-image: none;
          mask-image: none;
}
.lcc-news-carousel::-webkit-scrollbar { height: 10px; }
.lcc-news-carousel::-webkit-scrollbar-track {
  background: rgba(10, 21, 48, 0.4);
  border-radius: 8px;
  border: 1px solid rgba(212, 177, 106, 0.10);
}
.lcc-news-carousel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(212, 177, 106, 0.55), rgba(150, 108, 32, 0.8));
  border-radius: 8px;
  border: 1px solid rgba(10, 21, 48, 0.6);
}
:root[data-theme="light"] .lcc-news-carousel {
  scrollbar-color: rgba(150, 108, 32, 0.6) rgba(240, 234, 217, 0.5);
}
:root[data-theme="light"] .lcc-news-carousel::-webkit-scrollbar-track {
  background: rgba(240, 234, 217, 0.5);
  border-color: rgba(150, 108, 32, 0.15);
}
:root[data-theme="light"] .lcc-news-carousel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(150, 108, 32, 0.65), rgba(122, 61, 38, 0.85));
  border-color: rgba(240, 234, 217, 0.7);
}

/* Cartes dans le carrousel : largeur fixe + scroll-snap.
   La hauteur est uniformisée par align-items: stretch du parent flex. */
.lcc-news-carousel > .lcc-news-card {
  flex: 0 0 320px;
  max-width: 320px;
  scroll-snap-align: start;
  /* Annule le grid-column: 1 / -1 de la classe .is-featured qui n'a pas
     de sens hors d'une grille. (En théorie la séparation côté PHP exclut
     déjà les featured du track, mais ça garde la règle robuste.) */
  grid-column: auto;
}
/* Boutons prev/next : style sobre, calqué sur escape mais plus discret. */
.lcc-news-carousel-btn {
  flex: 0 0 auto;
  width: 38px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 177, 106, 0.12);
  color: var(--dore);
  border: 1px solid rgba(212, 177, 106, 0.4);
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  padding: 8px 0 10px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  user-select: none;
}
.lcc-news-carousel-btn:hover {
  background: rgba(212, 177, 106, 0.25);
  transform: scale(1.07);
  border-color: var(--dore);
}
.lcc-news-carousel-btn:disabled,
.lcc-news-carousel-btn[aria-disabled="true"] {
  opacity: 0.32;
  cursor: default;
  transform: none;
}
:root[data-theme="light"] .lcc-news-carousel-btn {
  background: rgba(150, 108, 32, 0.1);
  color: var(--marron-fonce, #5a3d18);
  border-color: rgba(150, 108, 32, 0.4);
}
:root[data-theme="light"] .lcc-news-carousel-btn:hover {
  background: rgba(150, 108, 32, 0.2);
  border-color: rgba(150, 108, 32, 0.7);
}

/* Mobile : les boutons disparaissent (l'utilisateur swipe), gap réduit. */
@media (max-width: 700px) {
  .lcc-news-carousel-wrap { gap: 0; padding: 4px 0; }
  .lcc-news-carousel-btn { display: none; }
  .lcc-news-carousel { gap: 14px; padding: 6px 4px 12px; }
  .lcc-news-carousel > .lcc-news-card { flex-basis: 82vw; max-width: 82vw; }
}

/* Mobile : grille en 1 col + densité augmentée */
@media (max-width: 700px) {
  .lcc-news-section { padding: 28px 16px 40px; }
  .lcc-news-list { grid-template-columns: 1fr; gap: 14px; }
  .lcc-news-section-head h2 { font-size: 26px; }
  .lcc-news-title { font-size: 19px; }
  .lcc-news-card { padding: 16px 14px 14px; }
}
@media (max-width: 380px) {
  .lcc-news-card-head { gap: 4px; }
  .lcc-news-badge { font-size: 10.5px; padding: 3px 8px; }
}

/* ==================================================================
   v1.08 — Widget countdown [lcc_countdown] (DÉPLACÉ depuis vn-game.css)
   Bug v1.06 : le CSS était dans vn-game.css (chargé uniquement en jeu)
   donc les J/H/M/S s'empilaient verticalement sur l'accueil et la page
   /actualites/ (display:block par défaut). En le mettant dans style.css
   (chargé partout), la grille horizontale prend enfin effet.
   ================================================================== */
.lcc-countdown {
  margin: 18px auto 8px;
  padding: 22px 18px 18px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, rgba(15, 30, 61, 0.55), rgba(10, 21, 48, 0.75));
  border: 1px solid rgba(212, 177, 106, 0.45);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(212, 177, 106, 0.04);
  box-sizing: border-box;
}
:root[data-theme="light"] .lcc-countdown {
  background: linear-gradient(135deg, rgba(212, 177, 106, 0.08), #FFFDF7);
  border-color: rgba(184, 146, 61, 0.55);
  box-shadow: 0 14px 40px rgba(43, 31, 18, 0.15), inset 0 0 30px rgba(184, 146, 61, 0.05);
}
.lcc-cd-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--dore, #D4B16A);
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.lcc-cd-grid {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin: 0 auto;
  max-width: 540px;
}
.lcc-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 12px 6px;
  background: rgba(212, 177, 106, 0.1);
  border: 1px solid rgba(212, 177, 106, 0.32);
  border-radius: 12px;
  min-width: 56px;
}
:root[data-theme="light"] .lcc-cd-cell {
  background: rgba(184, 146, 61, 0.1);
  border-color: rgba(184, 146, 61, 0.4);
}
.lcc-cd-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  color: #F5EFE6;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] .lcc-cd-num { color: #2B1F12; }
.lcc-cd-unit {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(245, 239, 230, 0.7);
  margin-top: 6px;
}
:root[data-theme="light"] .lcc-cd-unit { color: rgba(43, 31, 18, 0.7); }
.lcc-cd-sep {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: rgba(212, 177, 106, 0.55);
  font-weight: 700;
  flex: 0 0 auto;
  padding: 0 2px;
}
:root[data-theme="light"] .lcc-cd-sep { color: rgba(184, 146, 61, 0.65); }
.lcc-cd-target {
  margin-top: 14px;
  font-size: 13px;
  font-style: italic;
  color: rgba(245, 239, 230, 0.65);
}
:root[data-theme="light"] .lcc-cd-target { color: rgba(43, 31, 18, 0.7); }
.lcc-countdown.is-done {
  background: linear-gradient(135deg, rgba(50, 90, 50, 0.7), rgba(30, 60, 30, 0.85));
  border-color: rgba(150, 220, 150, 0.6);
}
.lcc-cd-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 0;
}
.lcc-cd-done-icon { font-size: 28px; }
.lcc-cd-done-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  color: #B6E6B6;
  font-weight: 700;
}
:root[data-theme="light"] .lcc-cd-done-text { color: #2E5C3A; }

/* Tablette : grille plus serrée */
@media (max-width: 720px) {
  .lcc-cd-cell { padding: 10px 4px; min-width: 48px; }
  .lcc-cd-num { font-size: 28px; }
  .lcc-cd-sep { font-size: 20px; }
}
/* Mobile : on garde l'alignement horizontal (4 cellules + 3 séparateurs)
   mais on rétrécit pour tenir sur 320px+ */
@media (max-width: 480px) {
  .lcc-countdown { padding: 16px 10px 14px; }
  .lcc-cd-grid { gap: 4px; max-width: 100%; }
  .lcc-cd-cell { padding: 8px 2px; min-width: 0; }
  .lcc-cd-num { font-size: 22px; }
  .lcc-cd-unit { font-size: 9px; letter-spacing: 0.5px; margin-top: 3px; }
  .lcc-cd-sep { font-size: 16px; padding: 0 1px; }
  .lcc-cd-label { font-size: 15px; }
  .lcc-cd-target { font-size: 12px; }
}

/* =====================================================================
 * v1.68.2 — RESPONSIVE OVERRIDES MOBILE/TABLETTE (append-only)
 * ---------------------------------------------------------------------
 * Passe de finition responsive avant l'ouverture. Consolidée en bas du
 * fichier pour ne pas toucher les media queries existantes et minimiser
 * le risque de régression. Les `!important` sont volontaires : on écrase
 * délibérément des règles antérieures écrites avec des paddings/scales
 * hardcodés qui rendaient l'expérience mobile inutilisable.
 * ===================================================================== */

/* --- HEADER / NAV : sur-charge d'icônes à 375px ---------------------- */
@media (max-width: 480px) {
    .site-header .nav-actions { gap: 4px !important; }
    .site-header .nav-actions .lcc-lang-switcher { display: none; }
    .site-header .nav-actions .user-pill-name { display: none; }
}
@media (max-width: 380px) {
    .site-header .nav { gap: 4px !important; }
    .site-title-text { display: none !important; }
}

/* --- HERO / PAGE-HERO : titre et paddings géants --------------------- */
@media (max-width: 600px) {
    .hero { padding: 80px 20px 40px !important; }
    .page-hero { padding: 72px 20px 48px !important; }
    .hero h1, .page-hero h1 { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.15; }
    .hero p, .page-hero p { font-size: 15px !important; line-height: 1.5; }
    .hero-actions { flex-direction: column !important; gap: 12px !important; align-items: stretch; }
    .hero-actions .btn, .hero-actions .btn-large { width: 100%; text-align: center; }
}

/* --- SECTIONS + CTA : réduire paddings verticaux --------------------- */
@media (max-width: 480px) {
    .section { padding: 40px 16px !important; }
    .cta-banner { padding: 40px 20px !important; border-radius: 14px; }
    .cta-banner h2 { font-size: clamp(22px, 6vw, 30px) !important; }
}

/* --- PLANS / TARIFS : retirer scale sur featured + 1 colonne --------- */
@media (max-width: 600px) {
    .plans { grid-template-columns: 1fr !important; gap: 16px !important; }
    .lcc-pricing-tiers { grid-template-columns: 1fr !important; gap: 14px !important; }
    .plan { max-width: 100%; }
    .plan.featured { transform: none !important; }
    .plan.featured::after,
    .plan.featured::before { transform: none !important; }
}

/* --- TABLEAU COMPARATIF : scroll horizontal < 768px ------------------ */
@media (max-width: 768px) {
    .compare-table,
    .comparison-table,
    .lcc-comparison-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .compare-table table,
    .comparison-table table { min-width: 620px; }
}

/* --- FOOTER : 1 colonne + brand text plein largeur ------------------- */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
    .footer-brand p { max-width: 100% !important; margin-left: auto; margin-right: auto; }
    .footer-social { justify-content: center !important; }
    .footer-col ul { padding-left: 0; }
}

/* --- ESCAPE CARDS : hauteur cover raisonnable ------------------------ */
@media (max-width: 480px) {
    .escape-card .escape-cover { height: auto !important; max-height: 200px; aspect-ratio: 16/9; }
    .escape-card .escape-cover img { width: 100%; height: 100%; object-fit: cover; }
}

/* --- COMPTE : grille n3 doit se dérouler ----------------------------- */
@media (max-width: 720px) {
    .account-grid.account-grid--n3 { grid-template-columns: 1fr !important; gap: 14px !important; }
}
@media (max-width: 480px) {
    .account-grid { grid-template-columns: 1fr !important; }
}

/* --- FAQ : accordéons moins étouffés --------------------------------- */
@media (max-width: 480px) {
    .faq-item summary { padding: 14px 16px !important; font-size: 15px; }
    .faq-answer { padding: 14px 16px !important; font-size: 14px; }
    .faq-answer p { font-size: 14px; line-height: 1.55; }
}

/* --- FORMULAIRES (contact, soumission escape, auth) ------------------ */
@media (max-width: 600px) {
    .contact-form,
    .lcc-submit-form { padding: 22px 18px !important; }
    .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    /* iOS : input font-size < 16px déclenche un zoom auto. On force 16px. */
    .contact-form input, .contact-form textarea, .contact-form select,
    .lcc-submit-form input, .lcc-submit-form textarea, .lcc-submit-form select,
    .lcc-auth-form input, .lcc-auth-form textarea, .lcc-auth-form select { font-size: 16px !important; }
    /* Les 2 col durée/joueurs du formulaire de soumission passent en 1 col */
    .lcc-submit-form div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* =====================================================================
 * VN ENGINE — mobile/tablette
 * ===================================================================== */

/* --- Launcher (écran-titre) : padding 60/80 → 24/18 ------------------ */
@media (max-width: 600px) {
    .lcc-vn-title-overlay { padding: 24px 18px !important; max-width: 92% !important; border-radius: 14px; }
    .lcc-vn-title { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.15; }
    .lcc-vn-subtitle { font-size: clamp(14px, 4vw, 18px) !important; }
    .lcc-vn-title-actions { gap: 10px !important; }
    .lcc-vn-title-actions .btn { padding: 12px 16px; font-size: 15px; }
}

/* --- Bulle de dialogue : ne déborde plus à 375px --------------------- */
@media (max-width: 480px) {
    .lcc-vn-staged .lcc-vn-bubble { max-width: min(88%, 380px) !important; }
    .lcc-vn-bubble { padding: 14px 16px !important; font-size: 15px; }
    .lcc-vn-continue { padding: 6px 12px; float: none; display: inline-block; margin-top: 6px; }
    .lcc-vn-narration { max-width: min(92%, 700px) !important; margin-left: auto !important; margin-right: auto !important; font-size: 15px; }
}

/* --- HUD in-game : boutons + espacement ------------------------------ */
@media (max-width: 600px) {
    .lcc-vn-hud-btn { width: 38px !important; height: 38px !important; }
    .lcc-vn-hud-left, .lcc-vn-hud-right { gap: 6px !important; }
}

/* --- Modales VN (settings, help, pause) ------------------------------ */
@media (max-width: 600px) {
    .lcc-vn-settings-card,
    .lcc-vn-help-card { padding: 22px 20px !important; max-width: 95% !important; }
    .lcc-vn-help-list li { padding: 10px 0; font-size: 14px; }
    .lcc-vn-pause-banner { flex-direction: column; gap: 10px; text-align: center; }
}

/* --- Vote overlay multi : min-width 360 → responsive ----------------- */
@media (max-width: 480px) {
    .lcc-vn-vote-overlay-card { min-width: 0 !important; max-width: calc(100vw - 40px) !important; padding: 18px 16px !important; }
    .lcc-vn-vote-coin { width: 170px !important; }
}

/* --- Mini-jeux : paniers + grilles ----------------------------------- */
@media (max-width: 768px) {
    .lcc-mg-paniers { gap: 10px !important; flex-wrap: wrap !important; justify-content: center; }
    .lcc-mg-panier { min-width: 60px; padding: 10px 12px; }
    .lcc-mg-panier-icon { font-size: 20px; }
    .lcc-mg-panier-name { font-size: 10px; }
}
@media (max-width: 600px) {
    .lcc-mg-stall-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    .lcc-mg-legume { padding: 6px 8px; font-size: 10px; }
    .lcc-mg-recipes { left: 8px !important; right: 8px !important; max-width: none !important; width: auto !important; }
}
@media (max-height: 500px) and (max-width: 900px) {
    /* Paysage smartphone : rapprocher les cartes du haut */
    .lcc-mg-cmd-card { top: 60px !important; padding: 12px 18px !important; }
    .lcc-mg-cauldron { top: 60px !important; right: 12px !important; width: 100px !important; height: 100px !important; }
}

/* =====================================================================
 * NOTES DE PATCH — modal + carrousel
 * ===================================================================== */

@media (max-width: 480px) {
    .lcc-news-modal-card {
        padding: 16px 14px 22px !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 14px;
    }
    .lcc-news-modal-header { gap: 8px !important; flex-wrap: wrap; }
    .lcc-news-modal-body { padding-right: 2px !important; }
    .lcc-news-modal-body h3 { font-size: 17px; }
    .lcc-news-modal-close { flex: 0 0 auto; }

    .lcc-news-carousel > .lcc-news-card {
        flex-basis: 88vw !important;
        max-width: 88vw !important;
    }
    .lcc-news-carousel {
        gap: 10px !important;
        padding: 4px 8px 14px !important;
    }
}

/* =====================================================================
 * HERO-FX CANVAS : v1.68.5 — Restauré sur mobile (retour user).
 * Le JS gère lui-même la densité réduite (50% des particules) et le
 * touchevents non-bloquants pour ne pas gêner le scroll.
 * ===================================================================== */

/* =====================================================================
 * COOKIES BANNER : ne pas écraser le contenu
 * ===================================================================== */
@media (max-width: 480px) {
    .lcc-cookie-banner { padding: 12px 14px !important; }
    .lcc-cookie-text p { font-size: 13px !important; margin: 0; }
    .lcc-cookie-actions { gap: 8px !important; }
    .lcc-cookie-actions .btn { width: 100%; padding: 10px 12px; font-size: 13px; }
}

/* =====================================================================
 * NOTIFICATIONS DROPDOWN : hauteur raisonnable sur mobile
 * ===================================================================== */
@media (max-width: 600px) {
    .lcc-notif-panel { max-height: 60dvh !important; }
}

/* =====================================================================
 * SAFETY NET : forcer les images à ne jamais déborder horizontalement
 * ===================================================================== */
@media (max-width: 768px) {
    img, video, iframe, canvas { max-width: 100%; height: auto; }
    body { overflow-x: hidden; } /* garde-fou global */
}

/* =====================================================================
 * v1.68.3 — REFONTE RESPONSIVE (retour user : "injouable" + captures)
 * ---------------------------------------------------------------------
 * Objectifs corrigés :
 *  1. Contenu rogné en haut par le header fixe → offset systématique
 *  2. Bibliothèque garde son CARROUSEL horizontal en mobile (pas de stack)
 *  3. Notes de patch restent en carrousel avec cartes plus petites
 *  4. Filtres bibliothèque (Niveau/Catégorie/Joueurs) proprement alignés
 *  5. Mon compte : avatar/tabs réorganisés, plus dense mais lisible
 *  6. Modal notes patch : espace en haut pour ne pas coller au header
 *  7. Padding-bottom pour ne pas passer sous la barre Safari mobile
 * ===================================================================== */

/* --- 1. OFFSET GLOBAL DU CONTENU (respirer sous le header fixe) ------ */
@media (max-width: 768px) {
    /* Toutes les sections/hero commencent avec un vrai souffle sous le header */
    .page-hero { padding-top: 32px !important; padding-bottom: 40px !important; }
    .hero { padding-top: 40px !important; padding-bottom: 40px !important; }
    .account-page { padding-top: 20px !important; padding-bottom: 80px !important; }
    .section:first-of-type { padding-top: 24px !important; }
    /* Safe-area en bas pour ne pas être caché par la barre Safari flottante */
    .site-content, main { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* --- 2. BIBLIOTHÈQUE : CARROUSEL HORIZONTAL restauré sur mobile ------ */
/* Sur mobile on gardait le carrousel latéral (défilement swipe) avec des
   cartes plus petites — pas d'empilement vertical qui casse la promesse
   d'un carrousel. Override du v1.00 qui empilait en column. */
@media (max-width: 700px) {
    .escape-carousel {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        gap: 14px !important;
        padding: 4px 12px 14px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .escape-carousel::-webkit-scrollbar { display: none; }
    .escape-carousel > .escape-card {
        flex: 0 0 82vw !important;
        min-width: 0 !important;
        max-width: 320px !important;
        width: 82vw !important;
        scroll-snap-align: start !important;
    }
    /* Cartes plus compactes : cover réduite, texte plus petit */
    .escape-carousel > .escape-card .escape-cover {
        height: 160px !important;
        aspect-ratio: auto;
        max-height: 160px;
    }
    .escape-carousel > .escape-card .escape-body,
    .escape-carousel > .escape-card .escape-card-body { padding: 14px 16px !important; }
    .escape-carousel > .escape-card h3,
    .escape-carousel > .escape-card .escape-title { font-size: 20px !important; margin-bottom: 6px; }
    .escape-carousel > .escape-card p,
    .escape-carousel > .escape-card .escape-description { font-size: 13px !important; line-height: 1.45; }
    .escape-carousel > .escape-card .escape-meta,
    .escape-carousel > .escape-card .escape-tags { font-size: 12px !important; }
    /* Le bouton Jouer prend toute la largeur de la carte */
    .escape-carousel > .escape-card .btn { padding: 10px 12px; font-size: 14px; }
}

/* --- 3. BIBLIOTHÈQUE : filtres section (Niveau/Catégorie/Joueurs) ---- */
@media (max-width: 768px) {
    /* La head passe en colonne : titre → strips → "voir X escapes" */
    .biblio-section-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
    }
    .biblio-section-title { font-size: clamp(24px, 6vw, 32px) !important; }
    .biblio-section-strips {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
    }
    .biblio-strip { display: block !important; width: 100%; }
    .biblio-strip-trigger {
        width: 100%;
        padding: 10px 12px !important;
        font-size: 13px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        text-align: left;
    }
    .biblio-strip-label { font-size: 10px !important; letter-spacing: 0.8px; }
    .biblio-strip-value { font-size: 13px !important; }
    .biblio-strip-chevron { align-self: flex-end; margin-top: -18px; }
    .biblio-section-more {
        margin-left: 0 !important;
        margin-right: auto;
        font-size: 13px;
    }
}
@media (max-width: 480px) {
    /* Sur très petit : 3 colonnes serrées, on garde le grid */
    .biblio-section-strips { gap: 6px !important; }
    .biblio-strip-trigger { padding: 8px 10px !important; }
    .biblio-strip-value { font-size: 12px !important; }
}

/* --- 4. MON COMPTE : refonte layout mobile -------------------------- */
@media (max-width: 768px) {
    .account-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
        padding: 22px 18px !important;
        margin-bottom: 20px !important;
    }
    .account-avatar { width: 96px !important; height: 96px !important; }
    .account-avatar-edit { width: 30px !important; height: 30px !important; }
    .account-avatar-edit svg { width: 15px; height: 15px; }
    .account-identity { width: 100%; }
    .account-identity h1 { font-size: clamp(22px, 5.5vw, 30px) !important; margin: 4px 0 8px !important; }
    .account-identity p { font-size: 13px !important; }
    .account-badge {
        font-size: 11px !important;
        padding: 3px 10px !important;
        margin: 2px 4px 2px 0 !important;
    }

    /* Tabs : scroll horizontal au lieu de wrap 2 col qui casse la lisibilité */
    .account-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 20px !important;
        padding-bottom: 2px;
        gap: 2px !important;
    }
    .account-tabs::-webkit-scrollbar { display: none; }
    .account-tab {
        flex: 0 0 auto;
        padding: 12px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    .account-tab-danger { margin-left: 0 !important; }
    .tab-count { font-size: 10px !important; padding: 1px 6px !important; }

    .account-section-title { font-size: 22px !important; margin-bottom: 14px !important; }
}

/* --- 5. MODAL NOTES DE PATCH : offset header + padding revu --------- */
@media (max-width: 768px) {
    .lcc-news-modal-overlay {
        padding: calc(var(--lcc-header-height, 76px) + 12px) 12px 16px !important;
        align-items: flex-start !important;
    }
    .lcc-news-modal-card {
        max-height: calc(100dvh - var(--lcc-header-height, 76px) - 28px) !important;
        padding: 18px 16px 22px !important;
        border-radius: 14px !important;
    }
    .lcc-news-modal-head { margin-bottom: 10px !important; }
    .lcc-news-modal-close {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 auto;
    }
    .lcc-news-modal-title { font-size: clamp(18px, 5.2vw, 24px) !important; line-height: 1.25; }
    .lcc-news-modal-body { padding-right: 2px !important; font-size: 14px !important; }
    .lcc-news-modal-body h3 { font-size: 16px !important; margin-top: 14px !important; }
    .lcc-news-modal-body h4 { font-size: 14.5px !important; }
    .lcc-news-modal-body p { line-height: 1.55; }
}

/* --- 6. CARTES NOTES DE PATCH sur accueil : plus compactes ---------- */
@media (max-width: 700px) {
    /* La carte du carrousel notes ne doit pas être trop haute */
    .lcc-news-card { padding: 14px 14px !important; }
    .lcc-news-card .lcc-news-title,
    .lcc-news-card h3 { font-size: 15px !important; line-height: 1.3; }
    .lcc-news-card .lcc-news-excerpt,
    .lcc-news-card p { font-size: 13px !important; line-height: 1.45; }
    .lcc-news-tags .lcc-news-tag { font-size: 11px !important; padding: 3px 8px !important; }
    .lcc-news-card-more { font-size: 13px !important; padding: 8px 12px !important; }
}

/* --- 7. Fix override d'un précédent overflow-x: hidden ------------- */
/* Le safety-net global overflow-x:hidden sur body cassait le sticky
   header sur certains navigateurs. On garde overflow-x hidden mais
   uniquement sur les enfants directs qui peuvent déborder. */
@media (max-width: 768px) {
    .site-content, main.site-main { overflow-x: hidden; }
    body { overflow-x: visible; } /* réactive pour le sticky/fixed */
}

/* --- 8. NAV MOBILE : rendre le menu burger plus utilisable --------- */
@media (max-width: 980px) {
    /* Le menu déroulant nav-links en position:absolute était rogné à droite.
       On le passe en drawer plein-largeur avec fond opaque. */
    .site-header .nav-links {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 14px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    }
    .site-header .nav-links li a {
        padding: 14px 18px !important;
        font-size: 15px !important;
    }
}

/* --- 9. Homepage news carousel : garder carrousel + cartes plus étroites ---- */
@media (max-width: 700px) {
    .lcc-news-carousel {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
    }
    .lcc-news-carousel > .lcc-news-card {
        flex: 0 0 82vw !important;
        max-width: 340px !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }
}

/* =====================================================================
 * v1.68.4 — CORRECTIONS RESPONSIVE PHASE 3 (retour user)
 * ---------------------------------------------------------------------
 *  a) J'ai RÉDUIT le padding-top de page-hero de 72→32 en v1.68.3
 *     ce qui a AGGRAVÉ le rognage haut. On restaure des valeurs
 *     confortables et on corrige la hauteur du header (76→84).
 *  b) Cartes carrousel (news + escapes) à 82vw = ~360px sur 375px,
 *     laissent seulement 15px pour la carte suivante. On passe à
 *     76vw pour avoir un vrai « peek » visible qui signale à
 *     l'utilisateur qu'il peut swiper.
 *  c) Communauté : les notes de patch passent en carrousel (fait
 *     côté PHP en passant carousel:true à lcc_render_news_list).
 * ===================================================================== */

/* --- a. FIX RÔGNAGE : body padding-top forcé directement (custom prop
       potentiellement pas appliquée à cause d'un fight de spécificité) --- */
/* v1.68.8 — Encore un peu de vide au-dessus. Header réel = 76px (nav 18+40+18).
   On cale pile-poil sans buffer. */
@media (max-width: 768px) {
    :root { --lcc-header-height: 76px !important; }
    body { padding-top: 76px !important; }
}
@media (max-width: 480px) {
    :root { --lcc-header-height: 72px !important; }
    body { padding-top: 72px !important; }
}
/* La barre d'admin WP shift le header : on répercute pour les admins */
body.admin-bar {
    padding-top: calc(var(--lcc-header-height, 76px) + 46px);
}
@media (max-width: 768px) {
    body.admin-bar { padding-top: calc(76px + 46px) !important; }
}

/* Padding top des zones de contenu : INTERNE au page-hero, en plus du buffer */
@media (max-width: 768px) {
    .page-hero { padding-top: 48px !important; padding-bottom: 48px !important; }
    .hero { padding-top: 48px !important; padding-bottom: 40px !important; }
    .account-page { padding-top: 40px !important; padding-bottom: 100px !important; }
    .section:first-of-type { padding-top: 48px !important; }
    /* Sécurité : pas de main padding-top parasite qui doublerait */
    .site-content, main.site-main { padding-top: 0 !important; }
    .site-content > *:first-child,
    main.site-main > *:first-child { margin-top: 0; }
}

/* --- b. Peek visible sur tous les carrousels ------------------------ */
@media (max-width: 700px) {
    /* Cartes escapes : 76vw + max 300px → sur 375, 285px de carte + 90px de
       viewport restants → on voit clairement le début de la carte suivante */
    .escape-carousel > .escape-card {
        flex: 0 0 76vw !important;
        max-width: 300px !important;
        width: 76vw !important;
    }
    /* Cartes news : idem */
    .lcc-news-carousel > .lcc-news-card {
        flex: 0 0 76vw !important;
        max-width: 320px !important;
    }
    /* Padding lateral du track = padding pour voir le peek AVANT la 1re carte */
    .escape-carousel,
    .lcc-news-carousel {
        padding-left: 12px !important;
        padding-right: 12px !important;
        scroll-padding-left: 12px;
    }
}

/* --- c. Carrousel notes patch sur communauté (identique à l'accueil) --- */
/* La grid .lcc-news-list qui restait par défaut ne sert plus sur communauté
   (on passe carousel:true dans le PHP), mais on renforce ici au cas où
   l'archive-list vertical (dans <details>) resterait compacte. */
@media (max-width: 700px) {
    .lcc-news-list.lcc-news-list--compact { gap: 12px; }
    .lcc-news-list.lcc-news-list--compact .lcc-news-card { padding: 14px 14px; }
}

/* --- e. Communauté : compacter la section stats + look de vraies cartes - */
/* v1.68.7 — Refonte présentation stats : au lieu de 4 chiffres nus qui
   flottent, chaque stat devient une petite carte avec bordure dorée
   subtile, fond légèrement contrasté et un highlight or au-dessus du
   chiffre. Grid 2×2 sur mobile. */
@media (max-width: 768px) {
    .community-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin: 12px auto 8px !important;
        max-width: 480px;
        padding: 0 !important;
    }
    .community-stats > div {
        position: relative;
        padding: 22px 12px 18px !important;
        text-align: center;
        background: linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02));
        border: 1px solid rgba(212, 177, 106, 0.28);
        border-radius: 14px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
        overflow: hidden;
    }
    /* Petit trait doré décoratif en haut de chaque carte */
    .community-stats > div::before {
        content: "";
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 40%; height: 1px;
        background: linear-gradient(90deg, transparent, var(--dore), transparent);
        opacity: 0.7;
    }
    .community-stats .stat-number {
        font-size: 40px !important;
        line-height: 1;
        display: block;
        text-shadow: 0 0 24px rgba(212, 177, 106, 0.25);
    }
    .community-stats .stat-label {
        font-size: 10.5px !important;
        letter-spacing: 1.6px;
        margin-top: 8px !important;
        line-height: 1.3;
    }
    /* .community section avait padding-bottom: 40px inline + section padding. Tasse. */
    section.community, section.section.community { padding: 24px 16px 32px !important; }
    /* Sections voisines : évite d'empiler du vide */
    .section + .section { padding-top: 32px !important; }
}
/* Light theme : garde le contraste des cartes */
:root[data-theme="light"] .community-stats > div {
    background: linear-gradient(180deg, rgba(150, 108, 32, 0.10), rgba(150, 108, 32, 0.03));
    border-color: rgba(138, 95, 22, 0.38);
}

/* --- d. Bug reveal-animation dans les carrousels ------------------- */
/* Cause : les cartes ont opacity:0 + transform:translateY(24px) et
   attendent la classe .lcc-revealed via IntersectionObserver au scroll.
   Dans un carrousel HORIZONTAL, les cartes 2,3,4 sont hors viewport
   horizontal → l'IO ne les observe pas comme intersectantes → elles
   restent invisibles. Solution : forcer les cartes des carrousels à
   être immédiatement visibles, la révélation restant valide en
   dehors des carrousels (grille verticale classique). */
.escape-carousel .escape-card,
.escape-carousel-wrap .escape-card,
.lcc-news-carousel .lcc-news-card,
.lcc-news-carousel-wrap .lcc-news-card {
    opacity: 1 !important;
    transform: none !important;
}

/* =====================================================================
 * v1.68.9 — Polish après validation user
 * ---------------------------------------------------------------------
 *  (1) Featured news card titre sur 1 ligne (au lieu de 2)
 *  (2) Stats communauté à 3 cartes sur 1 ligne (desktop + mobile)
 *  (3) Compresse espace mort au-dessus des sections biblio
 *  (4) Filtres biblio mobile : redesign plus « premium »
 *  (5) Nav icônes langue/recherche compactes visibles sur mobile (fait plus haut)
 * ===================================================================== */

/* --- (1) FEATURED NEWS : titre sur 1 ligne ------------------------- */
@media (max-width: 700px) {
    .lcc-news-card.is-featured .lcc-news-title,
    .lcc-news-card.is-featured h3 {
        font-size: clamp(11px, 3.6vw, 15px) !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --- (2) STATS COMMUNAUTÉ 3 cartes / 1 ligne ---------------------- */
/* Desktop : 3 colonnes égales avec max-width raisonnable, alignées centre */
.community-stats--3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 780px;
    margin: 32px auto !important;
    padding: 0 20px;
}
.community-stats--3 > div {
    position: relative;
    text-align: center;
    padding: 26px 18px 22px;
    background: linear-gradient(180deg, rgba(212, 177, 106, 0.08), rgba(212, 177, 106, 0.02));
    border: 1px solid rgba(212, 177, 106, 0.28);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 20px rgba(0, 0, 0, 0.25);
}
.community-stats--3 > div::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 40%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--dore), transparent);
    opacity: 0.7;
}
.community-stats--3 .stat-number {
    font-size: 48px !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 0 24px rgba(212, 177, 106, 0.25);
}
.community-stats--3 .stat-label {
    font-size: 11.5px !important;
    letter-spacing: 1.6px;
    margin-top: 10px !important;
    line-height: 1.3;
    display: block;
}
:root[data-theme="light"] .community-stats--3 > div {
    background: linear-gradient(180deg, rgba(150, 108, 32, 0.10), rgba(150, 108, 32, 0.03));
    border-color: rgba(138, 95, 22, 0.38);
}
/* Mobile : compact 3 cols réduites */
@media (max-width: 600px) {
    .community-stats--3 {
        gap: 8px !important;
        padding: 0 12px !important;
        margin: 16px auto !important;
    }
    .community-stats--3 > div { padding: 16px 8px 14px; border-radius: 12px; }
    .community-stats--3 .stat-number { font-size: 30px !important; }
    .community-stats--3 .stat-label { font-size: 9.5px !important; letter-spacing: 1.2px; margin-top: 6px !important; }
}
@media (max-width: 380px) {
    .community-stats--3 .stat-number { font-size: 26px !important; }
    .community-stats--3 .stat-label { font-size: 9px !important; letter-spacing: 1px; }
}

/* --- (3) BIBLIOTHÈQUE : compresser espace mort ---------------------- */
@media (max-width: 768px) {
    .biblio-section { margin-bottom: 20px !important; }
    .biblio-section-head { padding-bottom: 10px !important; gap: 8px !important; }
    .biblio-section-title { margin: 6px 0 0 !important; }
    /* Le breadcrumb en dessous du page-hero avait 12-14px padding + 40px avant
       la première section. On compresse. */
    .breadcrumb { padding: 10px 16px !important; margin-top: 0 !important; }
    /* Fusionne la première section biblio avec le breadcrumb sans grand vide */
    .breadcrumb + .biblio-section,
    .breadcrumb + section { margin-top: 0 !important; padding-top: 16px !important; }
    /* La grille biblio dans sa section : compact */
    .biblio-section .biblio-section-head { margin-bottom: 12px !important; }
}

/* --- (4) FILTRES BIBLIO mobile : refonte + jolie -------------------- */
/* Objectif : 3 pills or/nuit avec label discret et valeur mise en valeur,
   une ligne, cliquables. */
@media (max-width: 768px) {
    .biblio-section-strips {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    .biblio-strip { display: block !important; width: 100%; }
    .biblio-strip-trigger {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        background: linear-gradient(180deg, rgba(212, 177, 106, 0.07), rgba(212, 177, 106, 0.02)) !important;
        border: 1px solid rgba(212, 177, 106, 0.30) !important;
        border-radius: 12px !important;
        position: relative;
        transition: border-color 0.18s ease, background 0.18s ease;
    }
    .biblio-strip-trigger:active { transform: scale(0.98); }
    .biblio-strip.is-active .biblio-strip-trigger {
        border-color: var(--dore) !important;
        background: linear-gradient(180deg, rgba(212, 177, 106, 0.16), rgba(212, 177, 106, 0.06)) !important;
    }
    .biblio-strip-label {
        font-size: 9.5px !important;
        letter-spacing: 1.4px !important;
        text-transform: uppercase;
        color: var(--gris-doux) !important;
        font-weight: 600;
    }
    .biblio-strip-value {
        font-size: 13.5px !important;
        color: var(--dore) !important;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .biblio-strip-chevron {
        position: absolute !important;
        top: 12px;
        right: 10px;
        width: 10px !important;
        height: 10px !important;
        opacity: 0.7;
    }
    .biblio-strip-panel {
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        z-index: 20;
        border-radius: 12px !important;
        max-height: 280px;
        overflow-y: auto;
    }
    /* Sur les triggers focus/active, éviter que le chevron rotate ne casse le layout */
    .biblio-strip.is-open .biblio-strip-chevron,
    .biblio-strip-trigger[aria-expanded="true"] .biblio-strip-chevron { transform: rotate(180deg); }
}

/* Compact "voir X escapes" mobile */
@media (max-width: 768px) {
    .biblio-section-more {
        font-size: 12.5px !important;
        color: var(--dore);
        padding: 6px 0 !important;
    }
}

/* --- (6) SEARCH v2 : nouveaux éléments badge + excerpt + typerow ---- */
.lcc-search-modal__results .lcc-sugg-typerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.lcc-search-modal__results .lcc-sugg-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(212, 177, 106, 0.14);
    border: 1px solid rgba(212, 177, 106, 0.35);
    color: var(--dore);
    font-size: 10.5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
}
:root[data-theme="light"] .lcc-search-modal__results .lcc-sugg-badge {
    background: rgba(150, 108, 32, 0.14);
    border-color: rgba(138, 95, 22, 0.45);
    color: #6F4F18;
}
.lcc-search-modal__results .lcc-sugg-excerpt {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--gris-doux);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
:root[data-theme="light"] .lcc-search-modal__results .lcc-sugg-excerpt {
    color: rgba(43, 31, 18, 0.65);
}
@media (max-width: 640px) {
    .lcc-search-modal__results .lcc-sugg-excerpt { -webkit-line-clamp: 1; }
    .lcc-search-modal__results .lcc-sugg-badge { font-size: 10px; padding: 1px 7px; }
}

/* =====================================================================
 * v1.68.10 — Header mobile désencombré + filtres biblio refonte
 * ---------------------------------------------------------------------
 *  (A) Cache lang/user-pill du top bar mobile → tout passe dans le drawer
 *  (B) .nav-mobile-extras : styles du panneau du burger
 *  (C) Filtres biblio mobile : pills simplifiées « icône · label · valeur »
 *      sur une seule ligne
 * ===================================================================== */

/* --- (A) Top bar mobile : ne garde que loupe/thème/notif/burger ---- */
@media (max-width: 600px) {
    /* User pill (avatar+nom) : caché du top, présent dans le drawer */
    .nav-actions .user-pill { display: none !important; }
    /* Langue : idem, migre dans le drawer */
    .nav-actions .lcc-lang-switcher { display: none !important; }
    /* Boutons connexion/inscription en fallback (non connecté) → drawer */
    .nav-actions .btn-ghost,
    .nav-actions .btn-primary { display: none !important; }
    /* Serre les icônes qui restent */
    .nav-actions { gap: 6px !important; }
}

/* --- (B) DRAWER MOBILE UNIFIÉ — v1.68.11 --------------------------- */
/* Contient : compte (top) → menu items → langue (bottom).
   Desktop : caché. Mobile : slide-in premium.
   Le nav-links classique est caché en mobile (le drawer prend le relais). */

.site-drawer { display: none; }

@media (max-width: 980px) {
    /* En mobile, on cache le dropdown nav-links classique — le drawer complet prend le relais */
    .nav-links { display: none !important; }

    .site-drawer.is-open {
        display: block;
        position: absolute;
        top: calc(var(--lcc-header-height, 76px) + 6px);
        left: 12px;
        right: 12px;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - var(--lcc-header-height, 76px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px;
        border-radius: 16px;
        background: linear-gradient(180deg, #1a1a2e 0%, #12132a 100%);
        border: 1px solid rgba(212, 177, 106, 0.35);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
        z-index: 95;
        animation: lccDrawerIn 0.22s ease;
    }
    :root[data-theme="light"] .site-drawer.is-open {
        background: linear-gradient(180deg, #FFFDF7 0%, #F5EEDA 100%);
        border-color: rgba(138, 95, 22, 0.45);
    }
    @keyframes lccDrawerIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Empêche le scroll de la page derrière quand le drawer est ouvert */
    body.lcc-drawer-open { overflow: hidden; }
}

/* --- Compte : carte cliquable en haut du drawer -------------------- */
.drawer-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(212, 177, 106, 0.12), rgba(212, 177, 106, 0.03));
    border: 1px solid rgba(212, 177, 106, 0.32);
    color: inherit;
    text-decoration: none;
    transition: background 0.18s, transform 0.15s;
}
.drawer-account:active { transform: scale(0.98); }
.drawer-account:hover { background: linear-gradient(180deg, rgba(212, 177, 106, 0.18), rgba(212, 177, 106, 0.05)); }
.drawer-account-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--dore);
    flex: 0 0 46px;
}
.drawer-account-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drawer-account-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--blanc-casse);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drawer-account-sub {
    font-size: 12px;
    color: var(--dore);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.drawer-account-chevron {
    width: 18px; height: 18px;
    color: var(--dore);
    opacity: 0.7;
    flex: 0 0 18px;
}
:root[data-theme="light"] .drawer-account-name { color: #2B1F12; }
:root[data-theme="light"] .drawer-account-sub  { color: #6F4F18; }

/* Auth (non connecté) */
.drawer-auth { display: flex; flex-direction: column; gap: 8px; }
.drawer-auth .btn { width: 100%; text-align: center; padding: 11px 16px; font-size: 15px; }

/* Séparateur */
.drawer-sep {
    height: 1px;
    margin: 12px 4px;
    background: linear-gradient(90deg, transparent, rgba(212, 177, 106, 0.28), transparent);
}

/* Menu (liste de liens) */
.drawer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.drawer-menu li { margin: 0; }
.drawer-menu a {
    display: flex;
    align-items: center;
    padding: 13px 14px;
    border-radius: 10px;
    color: var(--blanc-casse);
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    border: 1px solid transparent;
}
.drawer-menu a:hover {
    background: rgba(212, 177, 106, 0.08);
    color: var(--dore);
}
.drawer-menu a.is-active {
    background: linear-gradient(180deg, rgba(212, 177, 106, 0.18), rgba(212, 177, 106, 0.05));
    color: var(--dore);
    border-color: rgba(212, 177, 106, 0.35);
    font-weight: 600;
}
:root[data-theme="light"] .drawer-menu a { color: #2B1F12; }
:root[data-theme="light"] .drawer-menu a.is-active { color: #6F4F18; }

/* Langue : label + rangée horizontale de drapeaux cliquables direct */
.drawer-lang {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(212, 177, 106, 0.04);
    border: 1px solid rgba(212, 177, 106, 0.2);
}
.drawer-lang-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gris-doux);
    font-weight: 600;
}
.drawer-lang-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.drawer-lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 177, 106, 0.2);
    color: var(--blanc-casse);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    min-width: 0;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}
.drawer-lang-flag img {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    display: block;
    flex: 0 0 20px;
}
.drawer-lang-code {
    display: inline-block;
    line-height: 1;
}
.drawer-lang-flag:hover,
.drawer-lang-flag:focus-visible {
    background: rgba(212, 177, 106, 0.12);
    border-color: var(--dore);
    color: var(--dore);
}
.drawer-lang-flag.is-current {
    background: linear-gradient(180deg, rgba(212, 177, 106, 0.22), rgba(212, 177, 106, 0.08));
    border-color: var(--dore);
    color: var(--dore);
    box-shadow: 0 4px 12px rgba(212, 177, 106, 0.18);
    pointer-events: none; /* pas d'action sur la langue actuelle */
}
:root[data-theme="light"] .drawer-lang-flag { color: #2B1F12; }
:root[data-theme="light"] .drawer-lang-flag.is-current { color: #6F4F18; }

/* --- (C) FILTRES BIBLIO refonte v3 : LABEL SEUL + chevron ---------- */
/* v1.68.13 — retour user : afficher juste le titre du filtre (Niveau,
   Catégorie, Joueurs). Pas de "· T.." qui reste illisible dans 111px. */
@media (max-width: 768px) {
    .biblio-section-strips {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .biblio-strip { min-width: 0 !important; }
    .biblio-strip-trigger {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 11px 12px !important;
        border-radius: 999px !important;
        background: rgba(212, 177, 106, 0.06) !important;
        border: 1px solid rgba(212, 177, 106, 0.28) !important;
        min-height: 42px;
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
    }
    /* Cache la valeur et le séparateur : on veut juste le label */
    .biblio-strip-value { display: none !important; }
    .biblio-strip-label::after { content: none !important; }
    .biblio-strip.is-active .biblio-strip-trigger {
        background: linear-gradient(180deg, rgba(212, 177, 106, 0.22), rgba(212, 177, 106, 0.08)) !important;
        border-color: var(--dore) !important;
        box-shadow: 0 4px 14px rgba(212, 177, 106, 0.15);
    }
    .biblio-strip-label {
        font-size: 13px !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important;
        color: var(--blanc-casse) !important;
        font-weight: 600;
        line-height: 1;
        flex: 0 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .biblio-strip.is-active .biblio-strip-label { color: var(--dore) !important; }
    .biblio-strip-chevron {
        position: static !important;
        margin-left: 2px !important;
        width: 11px !important;
        height: 11px !important;
        color: var(--dore);
        flex: 0 0 11px;
    }
    /* Panel : ancré sous le pill, arrondi */
    .biblio-strip-panel {
        top: calc(100% + 6px) !important;
        border-radius: 14px !important;
        padding: 6px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
    }
    .biblio-strip-option {
        border-radius: 10px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    .biblio-strip-option.is-current {
        background: rgba(212, 177, 106, 0.12);
        color: var(--dore);
    }
}
/* Version très étroite : label plus discret */
@media (max-width: 400px) {
    .biblio-strip-trigger { padding: 10px 12px !important; }
    .biblio-strip-label { font-size: 12px !important; }
}

/* =====================================================================
 * v1.68.13 — Biblio polish : ordre + tassement + langue dropdown mobile
 * ===================================================================== */

/* --- (a) Espace tassé entre breadcrumb et 1ère section biblio ------- */
@media (max-width: 768px) {
    .breadcrumb + .biblio-section,
    .breadcrumb + section {
        padding-top: 8px !important;
        margin-top: 0 !important;
    }
    .biblio-section:first-of-type { margin-top: 0 !important; padding-top: 8px !important; }
    .biblio-section-head { padding-top: 0 !important; margin-bottom: 12px !important; }
    .biblio-section-title { margin: 0 !important; }
}

/* --- (b) Force ordre : title → filtres → « voir X escapes » -------- */
@media (max-width: 768px) {
    .biblio-section-head { display: flex !important; flex-direction: column !important; }
    .biblio-section-title  { order: 1; }
    .biblio-section-strips { order: 2; width: 100%; }
    .biblio-section-more   { order: 3; align-self: flex-start; }
}

/* --- (c) DRAWER LANGUE : dropdown au lieu de rangée de drapeaux ----- */
/* Nouveau contrôle : un bouton compact qui affiche la langue courante,
   au tap ouvre une liste déroulante scrollable. Scale à n langues. */
.drawer-lang-select {
    position: relative;
    display: block;
    width: 100%;
}
.drawer-lang-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(212, 177, 106, 0.06);
    border: 1px solid rgba(212, 177, 106, 0.3);
    color: var(--blanc-casse);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.drawer-lang-btn:hover,
.drawer-lang-btn:focus-visible {
    background: rgba(212, 177, 106, 0.12);
    border-color: var(--dore);
}
.drawer-lang-btn img {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    display: block;
    flex: 0 0 24px;
}
.drawer-lang-btn-name { flex: 1; color: var(--blanc-casse); }
.drawer-lang-btn-arrow { width: 14px; height: 14px; color: var(--dore); flex: 0 0 14px; transition: transform 0.2s; }
.drawer-lang-select.is-open .drawer-lang-btn-arrow { transform: rotate(180deg); }

.drawer-lang-list {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    background: #12132a;
    border: 1px solid rgba(212, 177, 106, 0.35);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55);
    list-style: none;
    margin: 0;
    z-index: 5;
    display: none;
}
.drawer-lang-select.is-open .drawer-lang-list { display: block; animation: lccLangIn 0.15s ease; }
@keyframes lccLangIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.drawer-lang-list li { margin: 0; }
.drawer-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--blanc-casse);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s;
}
.drawer-lang-item:hover,
.drawer-lang-item:focus-visible { background: rgba(212, 177, 106, 0.12); color: var(--dore); }
.drawer-lang-item.is-current {
    background: rgba(212, 177, 106, 0.18);
    color: var(--dore);
    font-weight: 600;
    pointer-events: none;
}
.drawer-lang-item img {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    display: block;
    flex: 0 0 22px;
}
:root[data-theme="light"] .drawer-lang-list {
    background: #FFFDF7;
    border-color: rgba(138, 95, 22, 0.45);
}
:root[data-theme="light"] .drawer-lang-btn { color: #2B1F12; }
:root[data-theme="light"] .drawer-lang-item { color: #2B1F12; }
:root[data-theme="light"] .drawer-lang-item.is-current { color: #6F4F18; }