/* ============================================================ 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 ============================================================ */ /* ---------- Onest (auto-hébergée, OFL) ---------- Typo UNIQUE du site (public + admin) : remplace Hanken Grotesk + JetBrains Mono. UN SEUL woff2 variable (poids 100–900, ~60K) au lieu des 5 TTF statiques. Dupliqué à l'identique dans admin.css (qui ne charge PAS main.css). */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/Onest/Onest-VariableFont_wght.woff2') format('woff2'); } /* ---------- 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); /* aligné specimen (audit 21.07.2026) */ --pad-x: clamp(20px, 4vw, 64px); --max: 1480px; /* Rayons */ --radius-sm: 4px; --radius: 6px; /* Typographie — UNE seule famille sur tout le site : Onest (400→800), auto-hébergée (cf. @font-face en tête). --font-display et le corps partagent la même pile ; les ex-eyebrows/dates/kicker (jadis en JetBrains Mono) sont aussi passés en Onest. */ --font-display: 'Onest', system-ui, -apple-system, sans-serif; /* ---- Palette saison — arc-en-ciel du programme papier 26-27 ---- Couleurs POSITIONNELLES (index de liste, hover d'année, filet prisme), jamais sémantiques. L'accent de saison reste --accent (injecté par PHP). */ --c-orange: #F4571F; --c-jaune: #FFB400; --c-rouge: #E8202A; --c-magenta: #E4007C; --c-violet: #7B4FE0; --c-teal: #00A78E; --c-vert: #5BB318; --c-bleu: #2E6FE0; --c-ciel: #DCEBF5; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Onest', 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. Tout est en Onest (var --font-display = corps = ex-mono) ; seules la graisse, la casse et le letter-spacing distinguent les rôles. */ /* 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, .seasons-row__year, .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: 'Onest', system-ui, sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); } .meta { font-family: 'Onest', system-ui, sans-serif; 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; border-bottom: 1px solid var(--line); } /* Fond translucide + blur du specimen, porté par un PSEUDO-ÉLÉMENT : un backdrop-filter posé sur .site-header lui-même ferait de lui le containing block des position:fixed descendants — le panneau mobile (#site-header-mobile, fixed inset:0) se calerait sur les 76px du header au lieu du viewport (bug mobile corrigé le 21.07.2026). */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 48px); /* Hauteur FIXE 76px (specimen handoff) — plus de padding vertical. */ height: 76px; /* Au-dessus du panneau mobile (z-40, enfant du même header) : la barre — logo + croix de fermeture — reste visible et cliquable panneau ouvert. */ position: relative; z-index: 41; } .site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .site-header__logo svg { display: block; /* Logotype v2 (ratio 2.91) réduit à 38px — à affiner à l'œil. Le SVG porte désormais des width/height intrinsèques → width:auto fiable aussi en Safari (fin de l'écrasement vertical). */ height: 38px; width: auto; } .site-header__nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); flex-wrap: wrap; } .site-header__nav-link { font-size: 0.97rem; 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 18px; background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.92rem; 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; /* AU-DESSUS de tout, sans dépendre de l'empilement du header (fragile cross-browser : Safari iOS peignait la diagonale par-dessus le panneau avec l'approche z-40 sous la barre). La fermeture est assurée par une croix DANS le panneau (.site-header__mobile-close). */ z-index: 100; background: var(--bg); padding: 96px var(--pad-x) 32px; flex-direction: column; gap: 32px; overflow-y: auto; } /* Croix de fermeture interne — calée sur la position du burger de la barre (même zone tactile 44px, même coin) pour une continuité totale. */ .site-header__mobile-close { position: absolute; top: 16px; right: var(--pad-x); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; line-height: 1; color: var(--ink); cursor: pointer; } .site-header__mobile-close:hover { color: var(--accent); } .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: 'Onest', system-ui, sans-serif; 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; /* Réduit (logotype v2, cf. header) — à affiner à l'œil. */ height: clamp(42px, 4.4vw, 58px); 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: 'Onest', system-ui, sans-serif; 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. */ /* (purge design-v2 phase I : home-hero legacy supprimé — obj-hero) */ /* 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); } /* (purge design-v2 phase I : shows-grid/show-card + affiche-card legacy supprimés — obj-list) */ /* 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; } /* (purge design-v2 phase I : section--tint + hors-saison-teaser legacy supprimés — hs-teaser) */ /* ---------- 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 : sizing par max-width/max-height (PAS de boîte forcée), donc l'affiche garde TOUJOURS son ratio réel — aucun letterbox, aucune bande, aucun rognage, quel que soit le ratio du fichier. width:auto + max-width:100% → remplit la colonne ; max-height borne la hauteur sur écran court (l'image rétrécit et se centre via le cadre, l'espace latéral est blanc, pas gris). Reflow évité par les attributs width/height HTML (dimensions réelles, cf. spectacle.php). */ .fiche-poster__img { /* Carré forcé, crop centré (décision Tony). aspect-ratio:1/1 réserve aussi la boîte → anti-reflow sans getimagesize. Plus de max-height (il briserait le carré) : le conteneur .fiche-poster borne encore via son max-height + overflow:hidden. */ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; height: auto; display: block; } /* Fallback "Affiche à venir" : aspect 5/7 cohérent avec ShowCard, teinté off-white, caption mono en bas. */ .fiche-poster__placeholder { width: 100%; aspect-ratio: 1 / 1; /* carré, cohérent avec le poster image (décision Tony) */ 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: 'Onest', system-ui, sans-serif; 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 */ } /* Genre / catégories : ligne texte mono (plus de pastilles sur la fiche, cohérent avec la révision A3 de la home). */ /* (.meta-genre retiré au nettoyage post-fusion : plus rendu nulle part — la fiche est passée aux pills, la carte home à l'obj-list.) */ /* Titre : gabarit de taille repris de la maquette. margin-top 18px se collapse quand le genre est absent → titre affleurant en haut de colonne. */ .fiche-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.025em; margin: 18px 0 0; } /* Ligne 3 — sous-titre (subtitle) : qualificatif de forme sous le titre. */ .fiche-soustitre { font-size: 1.25rem; line-height: 1.3; color: var(--ink-2); max-width: 36ch; margin: 8px 0 0; /* le sous-titre se lit comme 2e ligne du titre (écart réduit) */ } /* (.meta-accroche retiré au nettoyage post-fusion : le champ accroche (migration 029) n'est plus rendu côté public depuis la refonte.) */ /* Prose (description) APRÈS les CTA. Rythme SCOPÉ à l'enfant direct de .fiche-body → ne touche PAS les proses de Distribution/Soutiens (imbriquées dans .fiche-section). Rupture ~40px, plus marquée que le rythme d'en-tête. */ .fiche-body > .fiche-prose { margin: 40px 0 0; } /* Ligne méta sous le titre : Date · Compagnie · Durée · Public. Quatre segments depuis le lot 037 — au-delà de deux, le retour à la ligne devient la règle et non l'exception sur mobile. Traitement MIXTE assumé : la date porte l'information principale (0.92rem, --ink), le reste passe au registre de référence (0.85rem, --mute). L'écart est volontairement court — un cran de taille, un cran de couleur — pour que la hiérarchie se voie sans que la ligne se lise en deux morceaux. */ .meta-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; } /* ⚠️ Chaque segment EMBARQUE le point qui le suit, au lieu de le laisser flotter en item frère. Sans ce groupe, `flex-wrap` casse indifféremment entre un texte et son point : à 390px le point partait ouvrir seul la ligne suivante. Ici il ne peut plus se détacher du mot qu'il suit. Le gap interne vaut celui du conteneur : à plat, l'espacement reste exactement celui d'avant. */ .meta-summary__item { display: inline-flex; align-items: center; gap: 14px; } .meta-summary__date { font-family: 'Onest', system-ui, sans-serif; font-size: 0.92rem; color: var(--ink); } .meta-summary__dot { width: 4px; height: 4px; border-radius: 50%; background: #b4b2a9; flex: none; } /* .meta-summary__prod et .meta-summary__info sont mis en forme plus haut, avec .fiche-prose--small : ils partagent le registre « information de référence ». Seule la date garde un traitement propre, juste au-dessus. */ /* Flags = conditions commerciales (badges), APRÈS la méta, distincts des catégories. Traitement visuel .badge-flag inchangé. */ .fiche-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } /* 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: 32px 0 32px 0; scroll-margin-top: 100px; /* cible de l'ancre « Voir les dates » sous le header sticky */ } @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: 'Onest', system-ui, sans-serif; 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; } /* ─── Registre « information de référence » ────────────────────────────────── Un cran sous le corps de texte en TAILLE et en COULEUR : ce qu'on consulte, par opposition à ce qu'on lit d'un trait. Trois usages le partagent : .fiche-prose--small Distribution et Soutiens d'une fiche .meta-summary__prod compagnie, en tête de fiche .meta-summary__info durée et âge conseillé, en tête de fiche Ils sont RÉUNIS ICI plutôt que recopiés : la même valeur à trois endroits dérive au premier ajustement. La date (.meta-summary__date) en est exclue — elle reste l'information principale de sa ligne, le reste est du contexte. ⚠️ .volet__texte--second (la distribution d'un volet) porte les mêmes déclarations mais reste une règle SÉPARÉE : elle vit dans le bloc des cartes de volets, avec le reste de leur mise en forme. Les deux se citent mutuellement — toute retouche ici doit y être reportée. Plancher : --mute mesure 5.39:1 sur fond blanc, au-dessus du 4.5:1 exigé d'un texte. --mute-2 (2.81:1) est exclu, il est réservé au désactivé. */ .fiche-prose--small, .meta-summary__prod, .meta-summary__info { font-size: 0.85rem; line-height: 1.55; color: var(--mute); } /* ---- Utilitaires de prose, posés à la main en back-office (TinyMCE, mode « code »). Ils n'apparaissent nulle part dans les vues : c'est voulu. ---- .prose-note : mention secondaire à mettre en retrait du corps de texte (ex. « Billets subventionnés par la République et Canton de Genève. » dans l'onglet Tarifs). .prose-logo : logo inséré dans la prose (ex. 20 ans / 20 francs, JPEG 538px de large). Le max-width l'emporte sur les attributs width/ height que TinyMCE pose sur l' (spécificité nulle), d'où le height:auto qui préserve le ratio. */ .fiche-prose .prose-note { font-size: 0.85rem; line-height: 1.5; color: var(--mute); } .fiche-prose img.prose-logo { display: block; max-width: 180px; height: auto; margin: 1.2em 0; } /* Actions de fiche : « Réserver » seul en pill primary. Wrap sur mobile. */ .fiche-actions { margin: 32px 0 0; /* la rupture avant la prose est portée par .fiche-body > .fiche-prose (40px) */ } .fiche-actions__buttons { display: flex; flex-wrap: wrap; gap: 12px; } /* Boutons 1 (Réserver) et 2 (Voir les dates) : gabarit maquette (pill hérité de .btn-*, padding 13px 26px). */ .fiche-cta { font-size: 1rem; padding: 13px 26px; } /* 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 :