/* ============================================================ Théâtre le douze dix-huit — main.css Fondations CSS (chantier 1 / Foundation). Écrin neutre : noir + blanc + un accent par saison. Source : design_handoff_ledouzedixhuit/prototype/styles.css ============================================================ */ /* ---------- Tokens ---------- */ /* L'accent (--accent) est injecté inline dans par le layout PHP à partir de la saison courante (saisons.accent_hex). Ne pas le redéfinir ici. */ :root { /* Surfaces */ --bg: #ffffff; /* blanc pur — fond par défaut */ --bg-tint: #f6f5f2; /* off-white — sidebars, cards partenaires */ /* Encre */ --ink: #0e0e0f; /* noir profond — texte principal */ --ink-2: #2a2a2c; /* corps de texte */ --mute: #6a6a6e; /* gris méta, captions, dates */ --mute-2: #9a9a9d; /* gris secondaire, désactivé */ /* Traits */ --line: #e6e5e1; /* hairlines */ --line-2: #d8d6d0; /* bordures légèrement plus marquées */ /* Accent — fallback uniquement, écrasé inline par PHP */ --accent: #E14B1F; --accent-ink: #ffffff; /* Pills catégorie (palette désaturée, dot par catégorie via data-cat) */ --pill-bg: #f0eeea; --pill-ink: #2a2a2c; /* Layout */ --grid-gap: clamp(20px, 2.4vw, 36px); --pad-x: clamp(20px, 4vw, 64px); --max: 1480px; /* Rayons */ --radius-sm: 4px; --radius: 6px; /* Typographie — police des titres d'affichage (Poppins, géométrique). Le corps reste en Hanken Grotesk (cf. html, body). Fallback : géométriques système (Avenir Next / Century Gothic) puis sans-serif générique. */ --font-display: "Poppins", "Avenir Next", "Century Gothic", system-ui, sans-serif; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Garde-fou anti-débordement horizontal. `overflow-x: clip` plutôt que `hidden` parce que `hidden` casse `position: sticky` sur les descendants (le site-header en dépend). */ html { overflow-x: clip; } body { overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color 0.15s; } a:hover { color: var(--accent); } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Focus visible accessible — outline accent, jamais default (le brief insiste : pas de halo, juste un outline net) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Respect du prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Typography scale ---------- */ /* Échelle fluide. Les titres d'affichage sont en Poppins (var --font-display) ; le corps reste en Hanken Grotesk. Eyebrow et meta passent en JetBrains Mono. */ /* Police des titres : appliquée aux classes utilitaires de titre ET aux titres bespoke de composants (année archives, titres de liste, code 404) pour que AUCUN titre ne retombe sur la stack du corps. */ .display-xl, .display, .h1, .h2, .h3, .home-hero__title, .seasons-row__year, .hs-row__title, .program-list__title, .error-404__code { font-family: var(--font-display); } .display-xl { font-weight: 700; font-size: clamp(3.5rem, 12vw, 10rem); line-height: 0.88; letter-spacing: -0.035em; margin: 0; text-wrap: balance; } .display { font-weight: 700; font-size: clamp(2.5rem, 7.5vw, 6rem); line-height: 0.94; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } .h1 { font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.022em; margin: 0; text-wrap: balance; } .h2 { font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .h3 { font-weight: 600; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.005em; margin: 0; } .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--mute); } .body-lg { font-size: 1.18rem; line-height: 1.55; max-width: 62ch; color: var(--ink-2); } .body { font-size: 1rem; line-height: 1.6; color: var(--ink-2); } .body p { margin: 0 0 1em; } /* ---------- Layout ---------- */ /* .wrap : container principal centré, gouttières fluides. .wrap-narrow : variante éditoriale (page contact, mentions, etc.). */ .wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .wrap-narrow { max-width: 940px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .section { padding: clamp(56px, 7vw, 96px) 0; } .section + .section { border-top: 1px solid var(--line); } /* ---------- Site header ---------- */ /* Layout chrome : header sticky + nav horizontale. Reste minimal — les composants (pills, cards, etc.) viendront aux chantiers suivants. */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px); padding-top: clamp(16px, 2.5vw, 24px); padding-bottom: clamp(16px, 2.5vw, 24px); } .site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .site-header__logo svg { display: block; height: clamp(36px, 4vw, 48px); width: auto; } .site-header__nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); flex-wrap: wrap; } .site-header__nav-link { font-size: 1rem; font-weight: 500; color: var(--ink); padding: 4px 0; position: relative; letter-spacing: -0.005em; white-space: nowrap; transition: color 0.15s; } .site-header__nav-link:hover { color: var(--accent); } .site-header__nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); } .site-header__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; transition: background 0.18s, color 0.18s; } .site-header__cta:hover { background: var(--accent); color: var(--accent-ink, #fff); } /* Burger mobile : caché par défaut, montré sous 880px (cf. media query plus bas). */ .site-header__burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--ink); } .site-header__burger-lines, .site-header__burger-lines::before, .site-header__burger-lines::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .site-header__burger-lines { position: relative; } .site-header__burger-lines::before, .site-header__burger-lines::after { content: ""; position: absolute; left: 0; } .site-header__burger-lines::before { top: -7px; } .site-header__burger-lines::after { top: 7px; } /* Panneau mobile : caché par défaut, affiché si [aria-expanded="true"]. */ .site-header__mobile { display: none; position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 80px var(--pad-x) 32px; flex-direction: column; gap: 32px; overflow-y: auto; } .site-header__mobile-nav { display: flex; flex-direction: column; gap: 4px; } .site-header__mobile-nav a { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.015em; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); } .site-header__mobile-nav a:hover { color: var(--accent); } .site-header__mobile-nav a.is-active { color: var(--accent); } .site-header__mobile-cta { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 14px 22px; background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 1rem; margin-top: 12px; } .site-header__mobile-cta:hover { background: var(--accent); } @media (max-width: 880px) { .site-header__nav { display: none; } .site-header__burger { display: inline-flex; } } /* Quand le panneau est ouvert, on bascule l'affichage et on barre le scroll de fond. */ body.has-mobile-nav-open { overflow: hidden; } body.has-mobile-nav-open .site-header__mobile { display: flex; } /* État ouvert du burger : croix */ .site-header__burger[aria-expanded="true"] .site-header__burger-lines { background: transparent; } .site-header__burger[aria-expanded="true"] .site-header__burger-lines::before { top: 0; transform: rotate(45deg); } .site-header__burger[aria-expanded="true"] .site-header__burger-lines::after { top: 0; transform: rotate(-45deg); } /* ---------- Site footer ---------- */ .site-footer { background: var(--ink); color: #fff; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 32px; margin-top: clamp(56px, 6vw, 96px); } .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 3.5vw, 56px); padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } @media (max-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } } .site-footer__col h4 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 14px; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; } .site-footer__col a { color: rgba(255, 255, 255, 0.7); transition: color 0.15s; } .site-footer__col a:hover { color: #fff; } .site-footer__col--brand { display: flex; flex-direction: column; gap: 18px; } .site-footer__logo svg { display: block; height: clamp(48px, 5vw, 64px); width: auto; } .site-footer__addr { font-style: normal; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } .site-footer__legal { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); flex-wrap: wrap; gap: 16px; } /* ---------- Home ---------- */ /* Section ajoutée au chantier 2. Tout ce qui suit ne sert qu'à la home, peut éventuellement migrer ailleurs si réutilisé par d'autres pages. Ordre : hero affiche → grille spectacles → hors-saison teaser. */ /* Hero affiche saison La seule section du site avec un fond pastel (cf README handoff §design principles). Reste : pure white. */ .home-hero { position: relative; background: linear-gradient(155deg, #d6e4ef 0%, #dcdee9 35%, #e2d8e3 65%, #ede4e1 100%); border-bottom: 1px solid var(--line); overflow: hidden; padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 96px); } .home-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px); background-size: 4px 4px; pointer-events: none; } .home-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; z-index: 2; } /* Breakpoint stack remonté à 1100px (au lieu de 920px). Entre 920 et 1100, la colonne gauche du split est trop étroite pour contenir l'affiche portrait (ratio 0.707) à sa hauteur naturelle sans être contrainte par max-height — résultat : aspect-ratio cassé, object-fit:cover rogne le haut/bas de l'affiche. Sous 1100, on empile : l'affiche prend la largeur (max 480px) et respire en entier au-dessus du texte. */ @media (max-width: 1100px) { /* minmax(0, 1fr) au lieu de 1fr : sans ça, la cellule grid laisse le contenu intrinsèque (poster avec aspect-ratio + max-width: 480px) dépasser le viewport sur 375px. */ .home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } .home-hero__poster { position: relative; width: 100%; aspect-ratio: 1683 / 2381; /* PAS de max-height : couplé à width:100% et aspect-ratio, max-height écrase l'aspect-ratio (la cellule devient plus courte que prévu) et fait rogner l'image. On laisse l'affiche dicter sa hauteur — le grid `align-items: center` centre le texte verticalement à côté. */ margin: 0 auto; background: var(--bg); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 60px -20px rgba(20,30,50,0.25), 0 8px 20px -10px rgba(20,30,50,0.18); overflow: hidden; } @media (max-width: 1100px) { .home-hero__poster { max-width: 480px; } } .home-hero__img { width: 100%; height: 100%; /* contain (au lieu de cover) en garde-fou : si jamais la cellule finit avec un ratio différent (image future de proportions différentes, contrainte de hauteur réintroduite, etc.), l'affiche reste entièrement visible plutôt que rognée. Avec un aspect-ratio de cellule = aspect-ratio image, contain et cover sont équivalents en pratique. */ object-fit: contain; display: block; } .home-hero__ribbon { position: absolute; top: 18px; left: -34px; transform: rotate(-12deg); background: var(--accent); color: #fff; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 38px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 2; } .home-hero__intro { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); max-width: 580px; } .home-hero__intro--solo { /* Quand pas d'affiche, on étend l'intro sur les 2 cols */ grid-column: 1 / -1; max-width: 720px; } .home-hero__stamp { display: inline-flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); width: fit-content; } .home-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: home-hero-pulse 2.4s ease-in-out infinite; } @keyframes home-hero-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .home-hero__title { /* Adapté à la colonne ~580px du split. Plus modéré que .display (qui doit rester pour les titres standalone genre "Saison 26·27"). */ margin: 0; font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; } .home-hero__title em { font-style: italic; color: var(--accent); font-weight: 700; } .home-hero__lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.5; max-width: 52ch; color: var(--ink-2); margin: 0; } .home-hero__lead em { font-style: italic; color: var(--accent); font-weight: 500; } .home-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } .home-hero__cta { /* Le btn-primary du specimen est repris ici en attendant un composant dédié (chantier composants). */ display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; background: var(--accent); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.98rem; transition: background 0.18s; } .home-hero__cta:hover { background: var(--ink); color: #fff; } /* Section head (utilisé par /partials/section-head.php) */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: clamp(28px, 4vw, 48px); flex-wrap: wrap; } .section-head__lhs { max-width: 720px; } .section-head__eyebrow { display: block; margin-bottom: 14px; } .section-head__title { margin: 0; } .section-head__sub { margin-top: 14px; } .section-head__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: border-color 0.18s, color 0.18s; white-space: nowrap; } .section-head__cta:hover { border-color: var(--ink); color: var(--ink); } /* Grille spectacles — 3 cols par défaut, 2 sous 1024, 1 sous 620. Toujours minmax(0, 1fr) pour permettre le shrinking propre des cellules. */ .shows-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } @media (max-width: 1024px) { .shows-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .shows-grid { grid-template-columns: minmax(0, 1fr); } } /* Show card */ .show-card { display: flex; flex-direction: column; gap: 14px; color: var(--ink); text-decoration: none; transition: color 0.15s; } .show-card:hover { color: var(--ink); } .show-card:hover .show-card__poster { transform: translateY(-4px); } .show-card__poster { position: relative; aspect-ratio: 5 / 7; overflow: hidden; background: var(--bg-tint); border-radius: 2px; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); } .show-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .show-card__poster--fallback { display: flex; align-items: flex-end; padding: clamp(14px, 1.8vw, 22px); } .show-card__fallback { display: flex; flex-direction: column; gap: 8px; width: 100%; } .show-card__fallback-cat { color: var(--mute); } .show-card__fallback-title { font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.85rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; } .show-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; } .show-card__date { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82rem; color: var(--mute); } .show-card__title { margin: 0; font-weight: 600; font-size: 1.1rem; line-height: 1.2; letter-spacing: -0.01em; } .show-card__author { margin: -6px 0 0; font-size: 0.92rem; color: var(--mute); line-height: 1.4; } /* Pills catégorie — palette désaturée du handoff. data-cat = slug DB. Cas spécial 'jeune-public' (slug DB plus long que le 'jeune' du proto). */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-ink); font-size: 0.78rem; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pill-dot, #c4c1b8); } .pill[data-cat="theatre"] { --pill-dot: #5b6f8f; } .pill[data-cat="cinema"] { --pill-dot: #7a6a8a; } .pill[data-cat="humour"] { --pill-dot: #b08850; } .pill[data-cat="impro"] { --pill-dot: #6f8a6a; } .pill[data-cat="jeune"], .pill[data-cat="jeune-public"] { --pill-dot: #c08a7a; } .pill[data-cat="musique"] { --pill-dot: #8c7a90; } .pill[data-cat="seul"] { --pill-dot: #8a7a5a; } .pill[data-cat="danse"] { --pill-dot: #a08a8a; } .pill[data-cat="hors-saison"] { --pill-dot: #9a9a9d; } /* Hors saison teaser — split 2 cols sur fond bg-tint */ .section--tint { background: var(--bg-tint); } .hors-saison-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; } @media (max-width: 820px) { .hors-saison-teaser { grid-template-columns: 1fr; } } .hors-saison-teaser__intro { display: flex; flex-direction: column; gap: 18px; } .hors-saison-teaser__intro .eyebrow { margin: 0; } .hors-saison-teaser__title { margin: 0; } .hors-saison-teaser__sub { max-width: 46ch; margin: 0; } .hors-saison-teaser__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: border-color 0.15s; margin-top: 6px; } .hors-saison-teaser__cta:hover { border-color: var(--ink); } .hors-saison-teaser__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .hors-saison-teaser__item { border-top: 1px solid var(--line-2); } .hors-saison-teaser__item:last-child { border-bottom: 1px solid var(--line-2); } .hors-saison-teaser__link { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: baseline; padding: 18px 0; color: var(--ink); transition: padding-left 0.15s; } .hors-saison-teaser__link:hover { padding-left: 8px; color: var(--ink); } .hors-saison-teaser__link:hover .hors-saison-teaser__arrow { color: var(--accent); transform: translateX(4px); } @media (max-width: 620px) { .hors-saison-teaser__link { grid-template-columns: 1fr auto; grid-template-areas: "when arrow" "what arrow"; } .hors-saison-teaser__when { grid-area: when; } .hors-saison-teaser__what { grid-area: what; } .hors-saison-teaser__arrow { grid-area: arrow; align-self: center; } } .hors-saison-teaser__when { letter-spacing: 0.04em; color: var(--ink); } .hors-saison-teaser__what { display: flex; flex-direction: column; gap: 2px; } .hors-saison-teaser__title-line { font-weight: 600; font-size: 1.05rem; line-height: 1.3; } .hors-saison-teaser__who { color: var(--mute); font-size: 0.92rem; } .hors-saison-teaser__arrow { color: var(--mute); transition: color 0.15s, transform 0.15s; font-family: "JetBrains Mono", ui-monospace, monospace; } /* ---------- Components — Buttons primitives ---------- */ /* Primitives génériques pill, déclinées en 3 variantes. Adoptées au chantier 3 (Fiche spectacle). La home utilise encore `.home-hero__cta` (équivalent à `.btn-primary` à l'identique) — on les fusionnera quand un chantier le justifiera. */ .btn-primary, .btn-ghost, .btn-ink { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; font-family: inherit; line-height: 1.1; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-ink, #fff); } .btn-primary:hover { background: var(--ink); color: #fff; } .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { background: var(--accent); } /* État désactivé : gris doux + cursor not-allowed + suppression du hover. Appliqué quand un CTA Réserver est rendu en . */ .btn-primary.is-disabled, .btn-ghost.is-disabled, .btn-ink.is-disabled { background: var(--line-2); color: var(--mute); border-color: var(--line-2); cursor: not-allowed; pointer-events: none; } /* ---------- Fiche spectacle ---------- */ /* Page /spectacle/{slug} — split sticky (affiche / contenu) puis galerie + related en pleine largeur sous le split. Référence : design_handoff/screenshots/04-fiche-spectacle.png + prototype/pages.jsx → ShowPage(). */ .fiche { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(80px, 8vw, 120px); } /* Back-link discret en haut de page (vrai href, pas history.back). */ .fiche-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); color: var(--mute); font-size: 0.92rem; transition: color 0.15s; } .fiche-back:hover { color: var(--ink); } .fiche-grid { display: grid; /* 1fr (affiche) | 1.05fr (contenu) — la colonne droite est légèrement plus large, c'est le contenu qui domine. align-items: start est essentiel pour que `position: sticky` fonctionne sur l'affiche. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 88px); align-items: start; } /* Breakpoint stack à 1100px — aligné sur le hero de la home pour une cohérence inter-pages, et parce que le split à 1024 était trop serré pour le contenu droit (dl + prose + 3 CTAs). */ @media (max-width: 1100px) { /* Stack : l'affiche passe au-dessus du texte. Pas de sticky en stack (le sticky devient inutile et perturbe le scroll). */ .fiche-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } /* Colonne gauche : affiche sticky. `top: 100px` = hauteur header sticky (~76px) + 24px de respiration. `max-height: calc(100vh - 120px)` borne en hauteur sur les écrans courts — sans ça, sur un viewport 720px, l'affiche dépasse en bas du viewport pendant le scroll et le `sticky` perd son intérêt. */ .fiche-poster { position: sticky; top: 100px; max-height: calc(100vh - 120px); display: flex; align-items: flex-start; justify-content: center; } @media (max-width: 1100px) { .fiche-poster { position: static; max-height: none; max-width: 480px; margin: 0 auto; } } /* Image : `contain` (cf. fix Home — pas de rognage quelle que soit la forme de l'affiche). On laisse la hauteur naturelle dicter la cellule. */ .fiche-poster__img { width: 100%; height: auto; max-height: calc(100vh - 120px); object-fit: contain; display: block; background: var(--bg-tint); /* fond derrière les bandes si ratio diffère */ } @media (max-width: 1100px) { .fiche-poster__img { max-height: none; } } /* Fallback "Affiche à venir" : aspect 5/7 cohérent avec ShowCard, teinté off-white, caption mono en bas. */ .fiche-poster__placeholder { width: 100%; aspect-ratio: 5 / 7; background: var(--bg-tint); background-image: repeating-linear-gradient( 135deg, transparent 0 14px, rgba(0,0,0,0.025) 14px 15px ); display: flex; align-items: flex-end; padding: clamp(16px, 1.8vw, 24px); border-radius: 2px; } .fiche-poster__placeholder-caption { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } /* Colonne droite : contenu vertical */ .fiche-body { min-width: 0; /* permet au contenu prose de respecter la grille */ } .fiche-cat { margin-bottom: 18px; } .fiche-title { margin: 0 0 14px 0; } .fiche-author { font-size: 1.18rem; color: var(--mute); margin: 0 0 32px 0; line-height: 1.4; } /* Liste de définition : 2 colonnes (label mono | valeur), hairlines top/bottom, padding vertical confortable. La colonne dt est en largeur fixe pour aligner les valeurs ; sur mobile on stack en single column pour ne pas écraser le label. */ .fiche-meta { display: grid; grid-template-columns: 130px 1fr; gap: 14px 24px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 32px 0; } @media (max-width: 480px) { .fiche-meta { grid-template-columns: 1fr; gap: 4px 0; } .fiche-meta dt:not(:first-child) { margin-top: 14px; } } .fiche-meta dt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); padding-top: 2px; } .fiche-meta dd { margin: 0; font-weight: 500; color: var(--ink); } .fiche-meta__strong { font-weight: 700; } /* Prose : styles éditoriaux pour le HTML WYSIWYG (description, distrib, soutiens). Restitution conservative : pas d'effets clinquants. */ .fiche-prose { font-size: 1.06rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 32px 0; max-width: 62ch; } .fiche-prose > *:first-child { margin-top: 0; } .fiche-prose > *:last-child { margin-bottom: 0; } .fiche-prose p { margin: 0 0 1em 0; } .fiche-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color 0.15s, color 0.15s; } .fiche-prose a:hover { color: var(--accent); text-decoration-color: var(--accent); } .fiche-prose em, .fiche-prose i { font-style: italic; } .fiche-prose strong, .fiche-prose b { font-weight: 700; color: var(--ink); } .fiche-prose ul, .fiche-prose ol { padding-left: 1.2em; margin: 0 0 1em 0; } .fiche-prose li { margin-bottom: 0.4em; } .fiche-prose h2, .fiche-prose h3 { margin: 1.6em 0 0.6em; line-height: 1.2; } .fiche-prose h2 { font-size: 1.4rem; font-weight: 700; } .fiche-prose h3 { font-size: 1.15rem; font-weight: 600; } .fiche-prose blockquote { margin: 1em 0; padding-left: 1.2em; border-left: 2px solid var(--line); color: var(--mute); font-style: italic; } .fiche-prose--small { font-size: 0.98rem; line-height: 1.55; } /* CTAs en ligne (Réserver primary + Calendrier ghost + Partager ghost). Wrap sur mobile pour éviter le débordement. */ .fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px 0; } .fiche-cta { font-size: 1rem; } .fiche-cta-secondary { font-size: 0.94rem; } /* Sections éditoriales (Distribution, Soutiens & coproductions) : marquées par un titre h3 et un bloc prose en dessous. */ .fiche-section { margin-top: 40px; } .fiche-section__title { margin: 0 0 14px 0; letter-spacing: -0.005em; } /* Galerie photos — pleine largeur sous le split. 3 colonnes desktop → 2 cols < 720 → 1 col < 480. */ .fiche-gallery { margin-top: clamp(60px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); } .fiche-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; } @media (max-width: 720px) { .fiche-gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .fiche-gallery__grid { grid-template-columns: 1fr; } } /* Chaque item :