/*
 * brand.css — design Hautes Fréquences Festival (CSS thème consolidée).
 *
 * Fichier UNIQUE du thème HFF (ex pages-festival.css fusionné ici) :
 *   - Base : @font-face SuisseIntl + overrides body/liens/cards
 *   - Layout 2 colonnes : sidebar (nav + poster édition) + main content
 *   - Header HFF avec lettres H/F/F animées (alternance par JS, voir hff.js)
 *   - Year-display fixe bas-droit (format `dd—jj.mm` ou `aaaa`)
 *   - Page-types (artistes, wall of fame, archives, 404…), boutons, utilities
 *   - Couleurs d'édition injectées dynamiquement par snippet edition-colors
 *
 * Charge APRÈS assets/shared/css/components.css. Cascade : @layer brand bat
 * @layer blocks sans guerre de spécificité. Les blocs @media/@print en bas
 * de fichier sont volontairement UNLAYERED (priorité + var() interdites en
 * media query).
 *
 * Dé-doublonnage socle : body n'override QUE background/font-size/smoothing —
 * font-family, color et line-height (1.6) viennent déjà du socle (components.css).
 *
 * Valeurs `rem` nues (0.25rem / 0.75rem / 1rem / 1.25rem / 2rem / 2.5rem / 4rem) :
 * micro-paddings de composants (skip-link, .btn, .error-page). Pas de token
 * cross-composant équivalent dans le primitive partagé (`--space-xs/block/section`
 * suffit au layout, pas à ces interstices fins). Laissé en dur côté brand —
 * chantier potentiel post-PR (tokens locaux `--space-md`/`--size-control-padding`).
 *
 * Discipline ADR-006 :
 *   - var(--token) UNIQUEMENT (linté par scripts/lint-tokens-only.sh)
 *   - JAMAIS d'override de :root (piège unlayered tokens.css) — passer par
 *     tokens.semantic.dtcg.json
 *   - Les valeurs d'édition (--edition-typo/bg) sont surchargées
 *     dynamiquement par edition-colors.php via style inline sur :root
 */
@layer brand {

  /* --- @font-face : Suisse Intl (servis depuis assets/themes/haute-frequences/fonts/) --- */
  @font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'SuisseIntl';
    src: url('../fonts/SuisseIntl-SemiBold-WebXL.woff2') format('woff2'),
         url('../fonts/SuisseIntl-SemiBold-WebXL.woff')  format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  /* --- Base ------------------------------------------------------------- */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
  }
  /* Dé-doublonnage : font-family, color et line-height (1.6) viennent du
     socle (components.css body). On n'override ici que le strict HFF. */
  body {
    background: var(--color-bg);
    font-size: var(--text-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-base);
  }
  a:hover { color: var(--edition-typo); }

  /* Cards génériques (bloc socle .block-cards) — variante HFF : à plat,
     transparent, sans bordure. Le hover border-color du socle devient
     inopérant (border:0). Le skip-link a11y est défini plus bas dans la
     section page-types (version animée HFF, source unique). */
  .block-cards__item {
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* ───────────────────────────────────────────────────────────────────────
     Layout — header HFF, sidebar, page-content, year-display
     ─────────────────────────────────────────────────────────────────────── */

  .site-nav--mobile { display: none; }

  /* Header HFF — override des règles `header` du socle (components.css : fond
     `--color-bg` + `border-bottom`) : HFF veut un chrome TRANSPARENT par défaut
     pour laisser apparaître le contenu derrière les lettres H/F/F sticky. */
  .hff-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: var(--z-index-sticky);
    padding: var(--layout-page-padding);
    margin-left: -.5vw;
    word-spacing: .5vw;
    background-color: transparent;
    border-bottom: 0;
    transition: background-color var(--transition-fast);
  }
  .hff-text {
    display: block;
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    line-height: 0.85;
    white-space: nowrap;
    text-decoration: none;
  }
  .hff-h,
  .hff-f {
    color: var(--edition-typo);
    transition: color var(--transition-fast);
  }
  .hff-invis {
    color: transparent;
    transition: color var(--transition-fast);
  }
  .hff-time {
    display: none;
    position: absolute;
    top: var(--layout-page-padding);
    left: var(--layout-page-padding);
    right: var(--layout-page-padding);
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    line-height: 0.85;
    color: var(--edition-typo);
    white-space: nowrap;
    overflow: hidden;
  }

  /* Voile semi-transparent + révélation des lettres invisibles. Les trigger
     sont portés par hff.js qui pose l'état sur le header (cf. JS) :
       - hover du header lui-même       → data-state="name"
       - hover de `.hff-year-display`   → data-state="name"
       - hover d'un `.artist-list__item` (/edition) → data-state="time"
       - hover d'un `.wof-artist` (/artistes)       → classe `.wof-active`
     Le CSS ci-dessous se contente de répondre à ces états. Voile blanc
     translucide (`--color-bg` 80% sur transparent) via `color-mix()` (Chrome
     111+/Safari 16.4+/FF 113+) — laisse percevoir le contenu derrière tout en
     donnant du contraste aux lettres en couleur d'édition.

     Exception `.wof-active` (hover d'un artiste sur /artistes) : NE déclenche
     ni voile ni révélation des `.hff-invis` — seules les lettres H/F/F
     changent de couleur (cf. règle `.wof-active .hff-h, .wof-active .hff-f`
     plus bas) pour signaler la couleur éditoriale de l'artiste survolé. */
  .hff-header[data-state="name"],
  .hff-header[data-state="time"] {
    background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
  }

  .hff-header[data-state="name"] .hff-invis { color: var(--edition-typo); }

  .hff-header[data-state="time"] .hff-text { visibility: hidden; }
  .hff-header[data-state="time"] .hff-time { display: block; }

  .page-layout {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--hff-height));
  }

  .page-sidebar {
    width: var(--layout-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: var(--hff-height);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    padding-left: var(--layout-page-padding);
    padding-right: 1vw;
    padding-top: 0.75rem;
    padding-bottom: var(--layout-page-padding);
  }

  .site-nav {
    flex-shrink: 0;
    padding-bottom: 0.75rem;
    z-index: 20;
  }
  .site-nav__list {
    display: flex;
    flex-direction: column;
    list-style: none;
  }
  .site-nav__link {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.125rem;
    color: var(--color-text);
  }

  .sidebar-poster {
    position: fixed;
    bottom: var(--layout-page-padding);
    left: var(--layout-page-padding);
    width: calc(var(--layout-sidebar-width) - var(--layout-page-padding));
    z-index: 1;
    padding-right: 1vw;
  }
  .sidebar-poster__img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Réaffirme la priorité de l'attribut HTML `hidden` : `display: block` ci-dessus
     le neutralisait (spec : toute règle CSS sur `display` bat le `display: none`
     implicite de `hidden`). Utilisé par le slot WoF dont l'`<img>` est masqué
     entre les hovers (cf. hff.js → initWallOfFameHover). */
  .sidebar-poster__img[hidden] { display: none; }

  /* Slot Wall-of-Fame TOUJOURS rendu dans la sidebar (cf. header.php) — révélé
     uniquement quand le main contient `#wof-list` (template `artistes`). Permet
     la navigation HTMX boost vers/depuis /artistes sans devoir OOB-swap la
     sidebar : le CSS détecte le contenu via `:has()` (Chrome 105+/Safari 15.4+).
     Au même moment, le poster statique (édition courante ou home fallback) est
     masqué pour ne pas se superposer au slot WoF. */
  .sidebar-poster--wof { display: none; }
  body:has(#wof-list) .sidebar-poster:not(.sidebar-poster--wof) { display: none; }
  body:has(#wof-list) .sidebar-poster--wof { display: block; }

  .page-content {
    flex: 1;
    min-width: 0;
    padding-right: var(--layout-page-padding);
  }

  .hff-year-display {
    position: fixed;
    bottom: var(--layout-page-padding);
    right: var(--layout-page-padding);
    z-index: 250;
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    line-height: 0.85;
    text-align: left;
    color: var(--edition-typo);
    pointer-events: none;
    transition: color var(--transition-fast);
  }
  /* Wall of Fame : un artiste peut avoir joué à plusieurs éditions — les
     années (séparées par `\n` côté template) s'empilent verticalement. */
  .hff-year-display[data-format="wof"] { white-space: pre-line; }

  .splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--color-bg);
    cursor: pointer;
  }
  /* Skip du splash dans 2 cas (classe posée par le script inline du <head>) :
       - splash déjà joué dans cette session (sessionStorage `hff:splash-played`)
       - `prefers-reduced-motion: reduce`
     Pose la classe AVANT le 1er paint pour éviter le flash de splash visible. */
  .hff-no-splash .splash-overlay { display: none !important; }
  .splash-poster {
    position: absolute;
    top: var(--layout-page-padding);
    left: var(--layout-page-padding);
    bottom: var(--layout-page-padding);
    width: auto;
    height: calc(100% - 2 * var(--layout-page-padding));
    object-fit: contain;
    object-position: left bottom;
    display: block;
  }

  /* Skip-link override : repositionnement HFF (le shared brand.css applique
     son défaut a11y, ici on remplace par le pattern visuel HFF — animation
     translateY + couleur edition). */
  .skip-link {
    position: fixed;
    top: var(--layout-page-padding);
    left: var(--layout-page-padding);
    z-index: var(--z-index-skip-link);
    padding: 0.25rem 0.75rem;
    background: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
    font-size: var(--text-sm);
    transform: translateY(calc(-100% - var(--layout-page-padding) - 1rem));
    transition: transform var(--transition-fast);
  }
  .skip-link:focus { transform: translateY(0); }

  /* ───────────────────────────────────────────────────────────────────────
     Page-types — artists list, wall of fame, archives, content, errors
     ─────────────────────────────────────────────────────────────────────── */

  .mobile-poster { display: none; }

  .artist-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .artist-list__item {
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    line-height: 1;
    display: block;
    padding-left: 1em;
    text-indent: -1em;
    letter-spacing: -0.125rem;
  }
  .artist-name {
    display: inline;
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--transition-fast);
  }
  .artist-name:hover { color: var(--edition-typo); }

  .wof-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .wof-artist {
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    line-height: 1;
    color: var(--color-text);
    cursor: default;
    transition: color var(--transition-fast);
    display: block;
    padding-left: 1em;
    text-indent: -1em;
    letter-spacing: -0.125rem;
  }
  .wof-artist:hover { color: var(--wof-hover-color, var(--color-text)); }
  .wof-active .hff-h,
  .wof-active .hff-f { color: var(--wof-hover-color, var(--color-text)); }

  /* En mode `fullBleed` (template editions.php), `.page-layout` ne contient
     plus que `<aside.page-sidebar>` — `<main.archives-main>` est rendu en
     sibling. On lui réserve un bandeau haut court (34vh moins la hff-header)
     pour que la sidebar reste lisible avant le scroll horizontal des archives. */
  .is-editions .page-layout {
    min-height: calc(34vh - var(--hff-height, 0rem) - 1vw);
  }

  /* `<main>` du template `editions.php` (mode `fullBleed`) : sibling de
     `.page-layout`, occupe la pleine largeur de body sous la sidebar. */
  .archives-main {
    display: block;
    width: 100%;
  }

  .archives-scroll-wrapper {
    width: 100%;
    margin-bottom: 1vw;
  }
  .archives-scroll {
    display: flex;
    gap: 1vw;
    padding-left: 1vw;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .archives-scroll::-webkit-scrollbar { display: none; }
  .archive-poster {
    flex-shrink: 0;
    display: block;
    text-decoration: none;
  }
  .archive-poster:last-child { margin-right: 1vw; }
  .archive-poster__img {
    height: 66vh;
    width: auto;
    display: block;
  }

  /* Logos partenaires — rendu de la page `/partenaires` via `children-list`
     en mode `grille` (cf. config `agency.core.children-list.rendu`).
     `display: flex` annule la grille auto-fit du rendu socle `.block-cards`
     (@layer brand > @layer blocks). Cible `.children-list-zone .block-cards`
     pour scope strict au rendu via children-list (anti-dérive si un .block-cards
     est introduit ailleurs). */
  .children-list-zone .block-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-block);
    align-items: center;
  }
  .children-list-zone .block-cards__logo-link {
    display: inline-flex;
    align-items: center;
  }
  .children-list-zone .block-cards__logo {
    height: 2.5rem;
    width: auto;
    filter: grayscale(1) contrast(1.5);
    transition: filter var(--transition-fast);
  }
  .children-list-zone .block-cards__logo-link:hover .block-cards__logo {
    filter: none;
  }
  .children-list-zone .block-cards__logo-fallback {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* Page 404 */
  .error-page {
    padding: 4rem 2rem;
    text-align: center;
  }
  .error-page h1 {
    font-size: var(--hff-font-size);
    font-weight: var(--font-weight-black);
    margin-bottom: 1rem;
  }

  /* Fiche artiste (page navigable /artistes/<slug>) */
  .artiste-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
    padding: 1rem;
  }
  .artiste-page__nom {
    font-size: var(--text-content-heading);
    font-weight: var(--font-weight-black);
    line-height: 1.1;
  }
  .artiste-page__photo {
    max-width: 50%;
  }
  .artiste-page__bio {
    font-size: var(--text-lg);
    line-height: 1.4;
    max-width: 60ch;
  }
  .artiste-page__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-block);
    list-style: none;
    padding: 0;
  }
  .artiste-page__editions-titre {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
  }
  .artiste-page__editions-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-block);
    list-style: none;
    padding: 0;
  }

  .empty-state {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    font-style: italic;
    padding: 2rem 0;
  }

  /* ───────────────────────────────────────────────────────────────────────
     Buttons + utilities
     ─────────────────────────────────────────────────────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 1.25rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border: 0.0625rem solid var(--color-text);
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
  }
  .btn:hover {
    background: var(--color-text);
    color: var(--color-bg);
  }
  .btn--primary { /* alias visuel, identique pour HFF */ }

  :focus-visible {
    outline: 0.125rem solid var(--edition-typo);
    outline-offset: 0.125rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile (≤ 47.99em) — UNLAYERED pour ne pas être battu par les overrides
   éventuels, et car les @media queries CSS ne supportent pas var(--token).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 47.99em) {
  :where(html) {
    --layout-page-padding: 3vw;
  }

  .hff-header {
    display: flex;
    align-items: flex-start;
    /* Mobile : voile blanc translucide permanent (pas de hover sur tactile) —
       même rendu que les états `[data-state="name"|"time"]` desktop. Donne du
       contraste aux lettres en couleur d'édition par-dessus du contenu qui
       défile derrière le header sticky. */
    background-color: color-mix(in srgb, var(--color-bg) 80%, transparent);
  }
  .hff-text {
    display: flex;
    flex-direction: column;
    font-size: 16vw !important;
    white-space: normal;
    flex-shrink: 0;
  }
  .hff-text .hff-invis { display: none !important; }

  .site-nav--mobile {
    display: block;
    flex: 1;
    padding-left: 3vw;
    padding-top: 0.75vw;
    padding-right: 20vw;
  }

  .hff-year-display {
    top: var(--layout-page-padding);
    bottom: auto;
    font-size: 16vw !important;
    line-height: 0.85;
  }

  .page-sidebar { display: none; }
  .page-layout {
    flex-direction: column;
    min-height: auto;
  }
  .page-content {
    width: 100%;
    padding-right: 0;
  }
  .splash-overlay { display: none !important; }

  .mobile-poster {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0 var(--layout-page-padding);
    margin-bottom: 1em;
  }
  .mobile-poster__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  .artist-list__item {
    font-size: 13vw;
    letter-spacing: -0.0625rem;
    padding-left: 3vw;
    text-indent: 0;
  }
  .artist-mobile-time {
    display: none;
    font-size: 1em;
    font-weight: var(--font-weight-medium);
    color: var(--edition-typo);
    text-indent: 0;
    letter-spacing: 0;
  }
  .artist-name:hover { color: inherit; }
  .artist-list__item.is-time-open .artist-name { color: var(--edition-typo); }
  .artist-list__item.is-time-open .artist-mobile-time { display: block; }

  .wof-artist {
    font-size: 13vw;
    letter-spacing: -0.0625rem;
    padding-left: 3vw;
    text-indent: 0;
  }

  .archives-scroll-wrapper { margin-bottom: 3vw; }
  .archives-scroll {
    flex-direction: column;
    overflow: visible;
    padding-left: 3vw;
    padding-right: 3vw;
    gap: 3vw;
  }
  .archive-poster { display: block; }
  .archive-poster__img {
    height: auto;
    width: 100%;
  }
}

/* Print */
@media print {
  .hff-header,
  .page-sidebar,
  .hff-year-display,
  .splash-overlay { display: none !important; }
  .page-content { margin: 0; padding: 0; }
}