/* ==========================================================================
   TOEIC Training — layout
   --------------------------------------------------------------------------
   POINTS DE RUPTURE (littéraux : une media query ne peut pas lire une
   custom property) :
     sm   480px   grand téléphone
     md   768px   tablette portrait
     nav  900px   bascule tiroir mobile ⇄ nav en ligne
     lg  1024px   tablette paysage / petit portable
     xl  1280px   bureau
   Mobile-first : uniquement des min-width, sauf la nav qui est
   authentiquement un composant à deux modes.
   ========================================================================== */

.container{
  inline-size:min(100% - (2 * var(--gutter)), var(--w-content));
  margin-inline:auto;
}
.container--wide  { max-inline-size:var(--w-wide); }
.container--narrow{ inline-size:min(100% - (2 * var(--gutter)), var(--w-narrow)); }
.container--prose { inline-size:min(100% - (2 * var(--gutter)), var(--w-prose)); }

/* Primitives de composition ------------------------------------------------ */

/* Pile verticale à rythme régulier */
.stack > * + *{ margin-block-start:var(--stack-gap, var(--sp-4)); }
.stack--sm{ --stack-gap:var(--sp-2); }
.stack--lg{ --stack-gap:var(--sp-8); }

/* Groupe horizontal qui passe à la ligne */
.cluster{
  display:flex; flex-wrap:wrap;
  gap:var(--cluster-gap, var(--sp-3));
  align-items:center;
}
.cluster--between{ justify-content:space-between; }
.cluster--center { justify-content:center; }

/* Grille auto-ajustée : pas de media query nécessaire */
.grid{
  display:grid;
  gap:var(--grid-gap, var(--sp-5));
  grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr));
}

/* Deux colonnes asymétriques, empilées sous 900px */
.split{ display:grid; gap:var(--sp-8); }
@media (min-width:900px){
  .split{ grid-template-columns:var(--split, 1.15fr 1fr); align-items:center; }
  .split--sidebar{ grid-template-columns:1fr minmax(280px, 320px); align-items:start; }
}

.section{ padding-block:var(--sp-section); }

/* Contenu large (tableau, diagramme, bloc de code) : défile dans son
   propre conteneur, jamais le body. Focusable au clavier. */
.scroll-x{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.scroll-x:focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
}

.flow-prose{ max-inline-size:var(--w-prose); }
.center{ margin-inline:auto; }