/* removed: utilities.css handled by page aggregator */
/* =========================================================================
   Chapitres – v5 (top-down clean)
   - Aucune dépendance circulaire : les tokens sont déjà chargés via <link>
   - UA reset local (pas de liseré blanc)
   - Header intégré via variables, mais skin pilotée par header.css
   ========================================================================= */

/* ==================== 0) Resets & Scoping (page) ==================== */
.container { padding: 0; background: transparent; } /* pas d’anneau blanc */

/* ==================== 1) Variables de page ==================== */
:root{
  /* Neutral base: porcelain → linen (no violet/blue) */
  --bg-1:#f9f9f7;
  --bg-2:#f2f0eb;
  --bg-3:#ebe7de;


  /* Largeurs contrôlées */
  --page-max:   1200px;                            /* largeur max du contenu */
  --section-max: clamp(560px, 72vw, 920px);        /* pastille “Partie X”   */
  --chap-max:    clamp(520px, 66vw, 780px);        /* largeur des chapitres */
  --chap-gap:    clamp(8px, 1.1vw, 10px);         /* espacement chapitres  */
}

/* ==================== 2) Contexte & décor Aurora ==================== */
.chapitres-container,
.chapitres-container *{ box-sizing:border-box; }
.chapitres-container a{ color:inherit; text-decoration:none; }

.chapitres-container{
  position:relative;
  padding-block: var(--page-shell-padding-block, clamp(12px, 2.5vw, 28px));
  padding-inline: var(--page-shell-padding-inline, clamp(12px, 2.5vw, 28px));
  color: var(--on-surface);
  min-height: 100dvh;
  isolation:isolate;
  display:grid;
  grid-template-rows: auto 1fr; /* header en haut, contenu remplit */
  gap: var(--page-shell-gap, clamp(10px, 1.5vw, 16px));
  place-items: stretch;
}
.chapitres-container::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 600px at 8% 12%, rgba(150,216,187,.22), transparent 60%),  /* mint halo */
    radial-gradient(700px 500px at 92% 90%, rgba(237,234,177,.20), transparent 60%), /* yellow halo */
    linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));
  filter: saturate(110%);
  animation: bg-pan 18s ease-in-out infinite alternate;
}
@keyframes bg-pan{
  from{ background-position: 0% 20%; }
  to  { background-position: 100% 80%; }
}
@media (prefers-reduced-motion: reduce){
  .chapitres-container::before{ animation:none; }
}

/* ==================== 3) Conteneur principal (“verre”) ==================== */
.main-content{
  grid-row: 2;            /* occupe la 2e ligne (1fr) */
  align-self: stretch;
  min-height: 0;          /* autorise le scroll interne si nécessaire */
  width:100%;
  max-width: var(--page-max);
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  backdrop-filter: blur(var(--blur-md)) saturate(130%);
  border: 1px solid rgb(255 255 255 / .28);
  box-shadow: var(--shadow-l);
  padding-block: var(--panel-padding-block, clamp(14px, 2.6vw, 34px));
  padding-inline: var(--panel-padding-inline, clamp(14px, 2.6vw, 34px));
}

/* ==================== 4) Intégration Header ==================== */
/* (aucune redéfinition du header ici : styles unifiés dans header.css) */

/* ==================== 5) Deck des niveaux ==================== */
.niveau-container-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: var(--grid-gap, clamp(12px, 2vw, 24px));
  margin-bottom: var(--section-gap, clamp(8px, 1.4vw, 16px));
}

.menu-item{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;

  /* Galet centralisé (vient des tokens) */
  background: var(--galet-bg);
  border: var(--galet-border);
  box-shadow: var(--galet-shadow);
}
.menu-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); }
.menu-item.inactive-level{ opacity:.55; }
.menu-item.active-level{
  box-shadow: 0 0 0 4px rgb(0 0 0 / .22), var(--shadow-m);
  transform: translateY(-2px);
}
.menu-item::after{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(120% 120% at 100% 0%, rgb(255 255 255 / .60), transparent 55%);
  pointer-events:none;
}
.menu-link{ display:grid; place-items:center; gap:12px; height:172px; color:inherit; padding:10px; }
.icon-wrapper{ width:92px; height:92px; display:grid; place-items:center; }
.item-icon{ width:100%; height:100%; object-fit:contain; }
/* → titrage via token */
.title{ margin:0; font: 800 1.02rem/1.1 var(--font-title); letter-spacing:.1px; }

/* ==================== 6) LISTES DES CHAPITRES ==================== */
/* Section demandée : placée ici, pas en fin de fichier */
.chapitres-liste{
  display:grid;
  grid-template-columns: 1fr;             /* liste verticale lisible    */
  gap: var(--grid-gap, var(--chap-gap));  /* espace entre chapitres     */
  margin-top: var(--section-gap, 8px);
}
/* Fallback robuste si “gap” est neutralisé ailleurs par erreur */
.chapitre-item + .chapitre-item{ margin-top: var(--chap-gap); }

.niveau-title{
  margin: 6px 2px 2px;
  font: 800 1.25rem/1.2 var(--font-title);
  letter-spacing: .1px;
}

/* Pastille “Partie X : …” centrée et plus étroite que la page */
.part-title{
  grid-column: 1 / -1;
  position: sticky; top: 8px; z-index: 2;
  max-width: var(--section-max);
  margin-block-start: var(--section-gap, 18px);
  margin-block-end: var(--section-gap, 10px);
  margin-inline: auto;
  padding: 10px 18px;
  text-align: center;
  border-radius: 9999px;
  background: var(--pill-grad, var(--brand-grad));
  border: 1px solid rgba(0,0,0,.08);
  /* neutral ambient only — kill violet ring */
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  color: #fff; /* contraste élevé sur pastille brand */
  font: 800 .98rem/1.1 Poppins,system-ui;
  letter-spacing: .1px;
}

/* Carte contenant le bouton (plus étroite, centrée) */
.chapitre-item{
  max-width: var(--chap-max);
  margin-left: auto;
  margin-right: auto;
}

/* Bouton “chapitre” – galet harmonisé */
.chapitre-button{
  background: var(--galet-bg);
  border: var(--galet-border);
  box-shadow: var(--galet-shadow);
  outline: none;
  display:flex; align-items:center; gap:.6rem;
  width:100%;
  padding-block: var(--card-padding-block, 14px);
  padding-inline: var(--card-padding-inline, 16px);
  gap: var(--card-gap, .6rem);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font: 700 .98rem/1.1 var(--font-primary);
  position:relative;
  transition: background .15s ease, box-shadow .15s ease;
}
.chapitre-button:focus-visible{ box-shadow: var(--focus-ring); outline:none; }
.chapitre-button:hover{
  background: var(--galet-bg-bright);
  box-shadow: var(--galet-shadow-strong);
}
.chap-num{ opacity:.65; min-width: 1.8rem; }
.chap-title{ flex:1; }

/* États (unlocked / locked_*) : pastille verte & cadenas conservés */
.chapitre-button.unlocked::after{
  content:"";
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  width:12px; height:12px; border-radius:999px; background:var(--clr-success);
  box-shadow: 0 0 8px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.35);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%,100%{ transform:translateY(-50%) scale(1) }
  50%    { transform:translateY(-50%) scale(1.35) }
}
.chapitre-button.locked_not_logged::after,
.chapitre-button.locked_no_abo::after,
.chapitre-button.locked_expired::after,
.chapitre-button.locked_no_tokens::after,
.chapitre-button.locked_expired_has_tokens::after,
.chapitre-button.locked_expired_no_tokens::after{
  content:"🔒";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:1.1rem; opacity:.78;
}

.btn-modal-ok:hover{ filter:brightness(1.05); }

/* ==================== 8) Responsivité ==================== */
@media (max-width: 960px){
  .niveau-container-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .main-content{ border-radius: var(--radius-lg); }
}
@media (max-width: 560px){
  :root{
    --section-max: 92vw;
    --chap-max:    92vw;
    --chap-gap:    clamp(10px, 2.2vw, 14px);
  }
}
@media (max-width: 420px){
  .niveau-container-row{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px){
  .menu-link{ height: 154px; gap: 10px; }
  .icon-wrapper{ width:82px; height:82px; }
  .title{ font-size:.98rem; }
}

/* ==================== 9) Accessibilité ==================== */
:focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce){
  .menu-item, .chapitre-item, .chapitre-button{ transition: none !important; }
  .chapitre-button.unlocked::after{ animation:none; }
}