/* ========================================================================
   disciplines.css — design des pages par discipline (discipline-*.html)
   Chargé après pages.css. Tokens locaux uniquement (Open Props non chargé).
   Accent par discipline : main.disc { --disc-accent: <couleur> } (inline).
   ======================================================================== */

@layer components {

  .disc {
    /* Accent par défaut = rouge K-Show ; chaque page l'override en inline. */
    --disc-accent: var(--accent-red);
    --disc-accent-soft: color-mix(in oklch, var(--disc-accent) 22%, transparent);
  }

  /* ---- Hero accentué ------------------------------------------------------ */
  .disc .page-header--media .eyebrow {
    color: color-mix(in oklch, var(--disc-accent) 92%, white);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }
  .disc .page-header--media .eyebrow::before {
    content: "";
    width: clamp(20px, 4vw, 38px);
    height: 2px;
    background: var(--disc-accent);
    border-radius: var(--radius-pill);
  }
  .disc .page-header--media .h1 {
    text-wrap: balance;
  }
  /* Liseré d'accent sous le titre du hero. */
  .disc .page-header__lede {
    border-inline-start: 2px solid var(--disc-accent);
    padding-inline-start: var(--space-s);
  }

  /* ---- Bande de chips (qualitatifs, pas de stats inventées) --------------- */
  .disc-chips {
    list-style: none;
    margin: var(--space-l) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }
  .disc-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--surface) 70%, transparent);
    font-family: var(--font-mono, monospace);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide, 0.02em);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .disc-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--disc-accent);
  }

  /* ---- Intro éditoriale (2 colonnes desktop) ----------------------------- */
  .disc-intro {
    display: grid;
    gap: var(--space-l) var(--space-2xl);
    align-items: start;
  }
  @media (min-width: 56rem) {
    .disc-intro { grid-template-columns: 1.05fr 0.95fr; }
  }
  .disc-intro__lead {
    font-size: var(--step-2);
    line-height: 1.25;
    font-weight: 600;
    text-wrap: balance;
  }
  .disc-intro__lead .disc-accent { color: var(--disc-accent); }
  .disc-intro__body {
    color: var(--text-muted);
    border-inline-start: 2px solid var(--disc-accent-soft);
    padding-inline-start: var(--space-m);
  }
  .disc-intro__body > * + * { margin-block-start: var(--space-s); }

  /* ---- « Ce qu'on capte » : trio de cartes ------------------------------- */
  .disc-coverage {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
  }
  @media (min-width: 48rem) {
    .disc-coverage { grid-template-columns: repeat(3, 1fr); }
  }
  .disc-cov {
    position: relative;
    padding: var(--space-l) var(--space-m) var(--space-m);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--motion-base) ease, border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
  }
  .disc-cov::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--disc-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-base) ease;
  }
  .disc-cov:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
  }
  .disc-cov:hover::before { transform: scaleX(1); }
  .disc-cov__num {
    font-family: var(--font-mono, monospace);
    font-size: var(--step--1);
    color: var(--disc-accent);
    letter-spacing: var(--tracking-wide, 0.02em);
  }
  .disc-cov__title {
    margin-block: var(--space-2xs) var(--space-xs);
    font-size: var(--step-1);
    line-height: 1.15;
  }
  .disc-cov__desc { color: var(--text-muted); font-size: var(--step--1); }

  /* ---- Pull-quote --------------------------------------------------------- */
  .disc-quote {
    margin: 0;
    padding: var(--space-l) 0 var(--space-l) var(--space-l);
    border-inline-start: 4px solid var(--disc-accent);
    max-width: 28ch;
  }
  .disc-quote p {
    font-family: var(--font-display, var(--font-body));
    font-size: var(--step-4);
    line-height: 1.04;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .disc-quote .disc-accent { color: var(--disc-accent); }
  .disc-quote cite {
    display: block;
    margin-block-start: var(--space-s);
    font-style: normal;
    font-family: var(--font-mono, monospace);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-wide, 0.02em);
    text-transform: uppercase;
    color: var(--text-faint);
  }

  /* ---- Galerie : ring d'accent au survol --------------------------------- */
  .disc .gallery-masonry .gallery__img {
    border-radius: var(--radius-md);
    transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease;
  }
  .disc .gallery-masonry .gallery__img:hover {
    transform: scale(1.015);
    box-shadow: 0 0 0 2px var(--disc-accent), var(--shadow-card);
  }

  /* ---- CTA : teinte d'accent --------------------------------------------- */
  .disc .cta-banner {
    border-color: var(--disc-accent-soft);
  }
}

/* ========================================================================
   Galerie discipline — grille UNIFORME robuste.
   Hors @layer + !important À DESSEIN : doit passer devant pages.css (bento
   masonry layered) ET les <style> inline non-layered des pages bespoke.
   Corrige les tuiles --feat/--wide qui devenaient pleine largeur dès que la
   grille tombe à 2 colonnes (mobile/tablette) → photos empilées « pas belles ».
   Résultat : mur de vignettes propre, même rythme à toutes les largeurs.
   ======================================================================== */
main.disc .gallery-masonry {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 22vw, 196px), 1fr)) !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;
  gap: var(--space-2xs) !important;
}
main.disc .gallery-masonry .gallery__img {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}