/* * Portfolio Cinéaste — CSS * Ce que theme.json ne peut pas exprimer : grille horizontale, compteur CSS, * hover/focus-within, apparition échelonnée, lightbox , scrim, scrollbar masquée. * Toute valeur vient de theme.json via var(--wp--preset--*) / var(--wp--custom--*). */ /* ----- Reset plein écran ----- */ html, body { margin: 0; height: 100%; } /* Suppression de tous les outline (demande client). ⚠️ Retire les indicateurs de focus clavier — voir docs/decisions.md. */ :focus, :focus-visible, :focus-within { outline: none; } /* Verrou plein écran — **trois vues seulement** (ADR-0021) : la grille (`.pfc-strip-wrapper`), la fiche film (`.pfc-flow`) et le visionnage (`.pfc-view`) — et, depuis ADR-0025, les pages et articles, repassés au flux latéral. Seule la 404 (`.pfc-page`) défile encore verticalement. */ html:has(.pfc-strip-wrapper), body:has(.pfc-strip-wrapper), html:has(.pfc-view), body:has(.pfc-view), html:has(.pfc-flow), body:has(.pfc-flow) { overflow: hidden; } /* Repli sans `:has()` (ADR-0031) : la même serrure via la classe posée sur `` côté serveur (`pfc_layout_mode()`). `html.pfc-mode-flow` a la **même spécificité 0,1,1** que `html:has(.pfc-flow)`, donc les batailles de spécificité — dont la levée mobile ci-dessous — se départagent identiquement. `` étant l'ancêtre de tout, la seule classe racine couvre ce que `:has()` posait sur `html` ET `body`. Un moteur moderne applique les deux règles (même valeur) ; FF ESR ≤ 120 la classe seule. `.pfc-mode-page` (404) reste volontairement hors verrou : elle défile. */ html.pfc-mode-strip, html.pfc-mode-view, html.pfc-mode-flow { overflow: hidden; } /* ----- Scrollbar — noir et blanc, épurée (demande client) ----- * * Une seule identité pour tout le site : la scrollbar verticale du document (pages * et articles classiques, ADR-0021) et la scrollbar horizontale de la fiche film * lisent les mêmes tokens `--wp--custom--scrollbar--*`. Un filet blanc translucide * sur un rail presque invisible ; rien d'autre — ni flèches, ni relief, ni couleur. * * `color-scheme: dark` est le levier natif : sans lui, un navigateur qui ne * comprend pas `scrollbar-color` (Safari < 18.2) dessine une scrollbar CLAIRE, en * plein contraste avec le fond noir. Il met aussi les contrôles de formulaire au * même régime — cohérent, le thème est sombre de bout en bout. * * Posé sur `html` : pour la scrollbar du **viewport**, la spec fait autorité à * l'élément racine. `scrollbar-width` et `scrollbar-color` étant héritées, la fiche * film reçoit le même régime sans rien redéclarer ; la grille et la barre latérale * l'écrasent par `none` — c'est le design (CDC §6) : là, aucune scrollbar. */ html { color-scheme: dark; } /* * Deux écritures, une seule apparence — et **pas** de doublon : quand un moteur * comprend `::-webkit-scrollbar`, il ignore `scrollbar-width` / `scrollbar-color` * (et inversement). Il faut donc choisir par capacité, sinon Chrome retombe sur le * régime standard, où la largeur des flèches de fin de course n'est pas réglable : * on hérite alors de la scrollbar Windows, juste assombrie. Ce n'est pas « épuré ». * * `@supports not selector(...)` n'est pas un ciblage de navigateur mais une question * de capacité — et il se répare tout seul : le jour où un moteur retirerait * `::-webkit-scrollbar`, la requête basculerait et il recevrait le régime standard. * Firefox, qui n'a jamais eu ces pseudo-éléments, passe ici : `thin` + * `scrollbar-color` est tout ce qu'il expose, et il ne dessine pas de flèches. * * ⚠️ Branche non recettée (Firefox absent de la machine de développement). Si elle * ne prenait pas, le repli reste noir et blanc : `color-scheme: dark` donne une * scrollbar système sombre, simplement plus large. */ @supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: var(--wp--custom--scrollbar--thumb) var(--wp--custom--scrollbar--track); } } /* Régime WebKit (Chrome, Safari) : contrôle complet — largeur exacte, angles francs comme les vignettes et les cadres du thème, aucune flèche. */ html::-webkit-scrollbar, .pfc-flow::-webkit-scrollbar { width: var(--wp--custom--scrollbar--size); height: var(--wp--custom--scrollbar--size); } html::-webkit-scrollbar-track, .pfc-flow::-webkit-scrollbar-track { background: var(--wp--custom--scrollbar--track); } html::-webkit-scrollbar-thumb, .pfc-flow::-webkit-scrollbar-thumb { background: var(--wp--custom--scrollbar--thumb); border-radius: 0; } html::-webkit-scrollbar-thumb:hover, .pfc-flow::-webkit-scrollbar-thumb:hover { background: var(--wp--custom--scrollbar--thumb-hover); } /* Les flèches de fin de course : WebKit les dessine en gris système dès qu'une scrollbar est personnalisée. `display: none` et non une couleur transparente — sinon elles gardent leur place et le curseur ne parcourt pas tout le rail. */ html::-webkit-scrollbar-button, .pfc-flow::-webkit-scrollbar-button { display: none; } /* L'angle entre deux scrollbars ne doit pas se signaler par un carré gris. */ html::-webkit-scrollbar-corner, .pfc-flow::-webkit-scrollbar-corner { background: transparent; } .wp-site-blocks { min-height: 100dvh; display: flex; flex-direction: column; } /* Hauteur *exacte* de l'écran (et non `min-height`) : le multi-colonnes n'a de point de fragmentation que si la hauteur est définie. Sans ça, la colonne grandit indéfiniment et le débordement redevient vertical. */ .wp-site-blocks:has(.pfc-flow) { height: 100dvh; } /* Jumeau sans `:has()` (ADR-0031). Forme `.pfc-mode-flow .wp-site-blocks` : spécificité 0,2,0, **identique** à `.wp-site-blocks:has(.pfc-flow)`, donc les levées mobile et impression ci-dessous se départagent par l'ordre source, comme les originales entre elles. */ .pfc-mode-flow .wp-site-blocks { height: 100dvh; } /* ----- Navbar ----- */ .pfc-header { flex: none; border-bottom: 1px solid var(--wp--custom--line--soft); } .pfc-brand { display: flex; align-items: baseline; gap: 12px; } /* Sous-titre d'en-tête, sous la ligne nom + slogan. Texte défini dans « Apparence → En-tête » (option `pfc_header_subtitle`, ADR-0016), injecté côté serveur ; masqué quand l'option est vide. Reprend la graduation « label » du design (11px / 500 / .28em / muted-4). L'écart avec la ligne au-dessus vient du blockGap du groupe `.pfc-identity` (preset spacing 10). */ .pfc-subtitle { margin-top: 10px; font-size: var(--wp--preset--font-size--label); font-weight: 300; letter-spacing: var(--wp--custom--tracking--role); text-transform: uppercase; /* Plus opaque que le libellé « rôle » du design (muted-4) : le trait plus fin (300) est compensé par un gris plus présent (muted-2), demande client. */ color: var(--wp--preset--color--muted-2); } /* ----- Menu : toggle (burger + libellé) et panneau latéral ----- core/navigation en `overlayMenu: "always"` : le burger et le drawer s'affichent à **toutes** les largeurs (ADR-0018). Le voile et sa couleur de texte viennent des attributs natifs du bloc (`overlayBackgroundColor` / `overlayTextColor`), pas d'ici : rien de codé en dur. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--white); opacity: 0.9; /* Cible tactile de 44px sans grossir l'icône (24px). */ min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } /* Toggle : fixé EXACTEMENT au même point que la croix (mêmes tokens partagés), en boîte 44×44 à icône centrée → superposition ☰/✕ parfaite. Hors flux (l'en-tête ne réserve plus sa place) et ancré au coin haut-droit, à l'écart de l'identité. */ .pfc-header .wp-block-navigation__responsive-container-open { position: fixed; top: var(--pfc-menu-btn-top); inset-inline-end: var(--pfc-menu-btn-end); z-index: 10; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } /* Libellé configurable (« Apparence → En-tête », option `pfc_menu_toggle_label`, ADR-0018) : porté par `data-pfc-menu-label` (posé via WP_HTML_Tag_Processor, = aussi l'`aria-label`), rendu par `content: attr(...)`. Posé EN ABSOLU à gauche du bouton pour ne PAS agrandir la boîte 44×44 ni décaler le ☰ (sinon la ✕ ne tomberait plus dessus). Rien si l'option est vide. Taille sur un token dédié (`toggle`, 16px) plutôt que `nav` : ce dernier sert aussi de taille de base globale du site (styles.typography racine) et à la barre de filtres — les coupler aurait fait grossir tout le reste. */ .pfc-header .wp-block-navigation__responsive-container-open[data-pfc-menu-label]::after { content: attr(data-pfc-menu-label); position: absolute; inset-inline-end: 100%; margin-inline-end: var(--wp--preset--spacing--20); top: 50%; transform: translateY(-50%); white-space: nowrap; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--toggle); font-weight: 700; letter-spacing: var(--wp--custom--tracking--nav); text-transform: uppercase; opacity: 0.9; } /* Les outline sont supprimés globalement (demande client, en tête de fichier) : le focus clavier se signale ici par la couleur, comme sur `.pfc-filter__link`. */ .wp-block-navigation__responsive-container-open:hover, .wp-block-navigation__responsive-container-open:focus-visible, .wp-block-navigation__responsive-container-close:hover, .wp-block-navigation__responsive-container-close:focus-visible { color: var(--wp--preset--color--white); } /* Le toggle (☰) et la croix (✕) occupent le MÊME point — mêmes `top` et `inset-inline-end` (tokens partagés), tous deux en `position: fixed`, pour une superposition parfaite et un basculement sur place ☰ ⇄ ✕. Offsets serrés vers l'angle haut-droit (demande client). */ .pfc-header { --pfc-menu-btn-top: var(--wp--preset--spacing--20); --pfc-menu-btn-end: var(--wp--preset--spacing--20); } /* Croix : sortie du flux du panneau et fixée au même point que le toggle. Le drawer porte un `transform`, donc `position: fixed` se résout par rapport à LUI (il devient bloc conteneur) : la ✕ voyage avec le panneau et se pose exactement sur le toggle une fois ouvert. */ .pfc-header .wp-block-navigation__responsive-container-close { position: fixed; top: var(--pfc-menu-btn-top); inset-inline-end: var(--pfc-menu-btn-end); z-index: 10; } /* `.pfc-header` préfixe TOUTES les règles du drawer : le CSS du bloc natif a la même spécificité et WordPress ne garantit pas l'ordre d'enfilage des styles de bloc vis-à-vis d'une feuille de thème (ADR-0014). Sans ce préfixe, géométrie et animation se font écraser — le panneau « saute » au lieu de glisser. */ /* Conteneur du drawer — état de base = FERMÉ + transition de SORTIE. La GÉOMÉTRIE (ancrage droite via `left: auto` — physique, pour lever le `left: 0` du cœur —, largeur bornée, marge interne) est portée ICI, PAS seulement sur `.is-menu-open` : à la fermeture, le script retire `.is-menu-open` alors qu'`allow-discrete` garde le panneau affiché le temps du glissement. Sans géométrie de base, le cœur rebascule alors le conteneur en plein écran (`inset: 0`) + items en ligne → l'ancienne navbar « flashe » pendant la sortie. Hors écran à droite au repos. Contexte LTR (thème français). */ .pfc-header .wp-block-navigation__responsive-container { left: auto; width: var(--wp--custom--menu-panel--width); max-width: 100%; /* `!important` : le cœur pose un `padding` en clamp scopé à `.is-menu-open` (style.css, spécificité 0,3,0). Sans ça, notre `padStart` serait ignoré à l'ouverture ET le padding sauterait à la fermeture (le cœur le retire avec la classe) → items qui se décalent. On impose le nôtre dans les deux états. */ padding-block: var(--wp--preset--spacing--50) !important; padding-inline-end: var(--wp--preset--spacing--40) !important; padding-inline-start: var(--wp--custom--menu-panel--pad-start) !important; /* Le cœur met `z-index: 100000` sous `.is-menu-open` uniquement : à la fermeture il retombe, et le drawer passerait SOUS le burger (z-index 10) qui vient de réapparaître → il « clignote » par-dessus. On le fixe dans les deux états (même valeur que le cœur). */ z-index: 100000; opacity: 0; transform: translateX(100%); will-change: transform, opacity; /* FERMETURE INSTANTANÉE — choix de robustesse. Pas de transition sur la base : à la fermeture, le cœur retire `.is-menu-open` et le panneau passe IMMÉDIATEMENT en `display: none`. Il ne reste donc jamais affiché dans son état « sans classe » (celui où le cœur rebascule box-sizing, layout, fond… → les « deux formes »). L'OUVERTURE, elle, reste animée (slide + fade) via la transition de `.is-menu-open` + `@starting-style`. Approche indépendante de tout style interne du bloc natif — plus de dépendance fragile au cœur. */ transition: none; } /* Drawer OUVERT : seulement l'état d'arrivée + la transition d'ENTRÉE (la géométrie est sur la base ci-dessus). « Fade glissant » : le panneau GLISSE (`transform`) ET se FOND (`opacity`) ensemble, mêmes durée et courbe. `animation: none` DÉSACTIVE l'animation `overlay-menu__fade-in-animation` du cœur (style.css) : elle anime `transform`+`opacity` avec `fill-mode: forwards`, donc — une `animation` primant sur une `transition` — elle écrasait tout notre effet (c'était la cause du « aucune animation »). */ .pfc-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; opacity: 1; transform: translateX(0); transition: opacity var(--wp--custom--duration--menu) var(--wp--custom--ease-out), transform var(--wp--custom--duration--menu) var(--wp--custom--ease-out), display var(--wp--custom--duration--menu) allow-discrete; } /* Animer *depuis* `display:none` : `@starting-style` donne l'état de départ au premier rendu quand `.is-menu-open` s'applique. Avec `allow-discrete` sur `display`, la SORTIE reste rendue le temps du glissement — apparition ET disparition sont animées, sans JS (baseline 2024 ; repli = instantané). */ @starting-style { .pfc-header .wp-block-navigation__responsive-container.is-menu-open { opacity: 0; transform: translateX(100%); } } /* Colonne des items, portée HORS `.is-menu-open` pour persister pendant la SORTIE (le cœur ne l'impose que sous `.is-menu-open` ; à la fermeture les items rebasculeraient en ligne — le flash). Alignés à gauche, après la marge interne, quel que soit le `justifyContent` du bloc pensé pour la barre inline. */ .pfc-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content, .pfc-header .wp-block-navigation__responsive-container .wp-block-navigation__container { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; } /* Le cœur pousse le contenu vers le bas (`padding-top: calc(2rem + 24px)`, scopé `.is-menu-open`) pour dégager SA croix, placée en haut de l'overlay. La nôtre est fixée au coin (hors flux) : ce décalage est inutile, et retiré à la fermeture il ferait sauter les items ~56px vers le haut (parasite). On le neutralise — `!important` pour battre la règle 0,3,0 du cœur. Le haut vient de `padding-block` du conteneur, identique dans les deux états. */ .pfc-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { padding-top: 0 !important; } /* Fond opaque du drawer conservé pendant la SORTIE : le cœur force `background-color: inherit !important` dès que `.is-menu-open` part (style.css ~ligne 481), ce qui rendrait le panneau transparent en se fermant. Double `:not()` → spécificité 0,4,0 pour battre sa règle 0,3,0 !important, quel que soit l'ordre d'enfilage des feuilles. */ .pfc-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.is-menu-open) { background-color: var(--wp--preset--color--overlay) !important; } /* --- Verrou d'apparence : MÊME forme à l'ouverture ET à la fermeture --- Le cœur scope au seul `.is-menu-open` une foule de styles de mise en page (box-sizing, overflow, direction, couleur du voile, display des items). Comme `allow-discrete` garde le panneau affiché pendant la SORTIE alors que la classe est déjà retirée, tous rebasculent → « deux formes d'affichage ». On les réimpose INCONDITIONNELLEMENT, aux mêmes valeurs que l'état ouvert du cœur : la fermeture devient identique à l'ouverture, seuls `opacity`/`transform` animent. */ .pfc-header .wp-block-navigation__responsive-container, .pfc-header .wp-block-navigation__responsive-close, .pfc-header .wp-block-navigation__responsive-dialog, .pfc-header .wp-block-navigation__responsive-container-content { box-sizing: border-box; } .pfc-header .wp-block-navigation__responsive-container { flex-direction: column; overflow: auto; color: var(--wp--preset--color--contrast); } .pfc-header .wp-block-navigation__responsive-container .wp-block-navigation-item { display: flex; } /* Le voile est à 94 % d'opacité (token `overlay`, comme la lightbox) : sans ça le bouton ☰ transparaît sous la croix de fermeture. `visibility` plutôt que `display` : le bouton garde sa place, la croix ne se décale pas à l'ouverture. */ html.has-modal-open .wp-block-navigation__responsive-container-open { visibility: hidden; } /* Typographie des items portée hors `.is-menu-open` (comme la colonne et le fond) : sans ça, elle rebasculerait pendant la sortie. Demande client : capitales en graisse fine — `font-weight: 300`, `text-transform: uppercase`. Le `letter-spacing` (token `filter`) rend les capitales lisibles, calé sur les étiquettes de filtre. Repos en gris nav (`muted-1`, plus clair que les étiquettes — demande client : moins effacé avant survol), bascule au blanc au survol et au focus avec transition sur la couleur, comme `.pfc-filter__link` (le focus clavier se signale donc par la couleur, cf. suppression globale des outline). */ .pfc-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--brand); font-weight: 300; letter-spacing: var(--wp--custom--tracking--filter); text-transform: uppercase; /* Aligné à gauche, après la marge interne du drawer (ADR-0018). */ text-align: start; color: var(--wp--preset--color--muted-1); transition: color var(--wp--custom--duration--filter) var(--wp--custom--easing); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--white); } /* Apparition échelonnée des entrées à l'ouverture (entrée seule : à la fermeture le drawer glisse d'un bloc). Discret — léger fondu + montée de 8px, décalage par le token `stagger`, plafonné dès la 6ᵉ entrée pour rester bref quel que soit le nombre de liens. `both` : l'entrée part de l'état masqué (pas de scintillement avant le délai). */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: pfc-menu-item-in var(--wp--custom--duration--fade) var(--wp--custom--ease-out) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: var(--wp--custom--duration--stagger); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: calc(2 * var(--wp--custom--duration--stagger)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: calc(3 * var(--wp--custom--duration--stagger)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: calc(4 * var(--wp--custom--duration--stagger)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: calc(5 * var(--wp--custom--duration--stagger)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { animation-delay: calc(6 * var(--wp--custom--duration--stagger)); } @keyframes pfc-menu-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ----- Sous-navigation (filtres + méta) ----- */ .pfc-subnav { flex: none; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--wp--custom--gutter); padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--20); } .pfc-filter { display: flex; gap: 26px; font-size: var(--wp--preset--font-size--nav); font-weight: 600; letter-spacing: var(--wp--custom--tracking--filter); text-transform: uppercase; } .pfc-filter__link { color: var(--wp--preset--color--muted-3); border-bottom: 1px solid transparent; padding-bottom: 5px; transition: color var(--wp--custom--duration--filter) var(--wp--custom--easing), border-color var(--wp--custom--duration--filter) var(--wp--custom--easing); text-decoration: none; } .pfc-filter__link:hover, .pfc-filter__link:focus-visible { color: var(--wp--preset--color--white); } .pfc-filter__link.is-active { color: var(--wp--preset--color--white); border-bottom-color: var(--wp--preset--color--accent); } .pfc-meta { display: flex; align-items: center; gap: 16px; font-size: var(--wp--preset--font-size--label); font-weight: 500; letter-spacing: var(--wp--custom--tracking--meta); text-transform: uppercase; color: var(--wp--preset--color--muted-5); } .pfc-meta__rule { display: inline-block; width: 60px; height: 1px; background: var(--wp--custom--line--rule); } .pfc-meta__hint { color: var(--wp--preset--color--muted-2); } /* ----- Rangée principale : grille pleine largeur + barre latérale flottante ----- */ .pfc-layout { flex: 1; min-height: 0; display: flex; align-items: stretch; /* Ancre le positionnement absolu de la barre latérale (overlay). */ position: relative; } /* * Voile de lisibilité derrière la barre latérale flottante : dégradé * transparent → fond, pour que les catégories restent lisibles par-dessus les * affiches (contraste RGAA/WCAG AA, CDC §14). Au-dessus de la grille (z-index 1), * sous les liens de la barre (z-index 2). */ .pfc-layout::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--wp--custom--sidebar--scrim-width); background: var(--wp--custom--sidebar--scrim); z-index: 1; pointer-events: none; } /* ----- Grille défilante ----- */ .pfc-strip-wrapper { flex: 1; min-width: 0; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 8px var(--wp--custom--gutter) 40px; scrollbar-width: none; /* Glissement latéral natif au doigt ; le pan vertical est laissé au JS, qui le convertit en défilement horizontal (ADR-0010). */ touch-action: pan-x pinch-zoom; /* Conteneur de requête : `cqh` = hauteur réelle disponible de la bande, pour dimensionner les colonnes 16:9 depuis la hauteur (voir .pfc-strip). */ container-type: size; } /* * Le bloc `core/query` insère un `
` entre le * wrapper et le `