/*!
Theme Name: quentin_wireframe_template v1.5
Description: Template wireframe visuel pour la construction de sites WordPress. Blocs et composants affichés en style wireframe avec grille, placeholders et annotations. Idéal pour préparer la structure d'un site avant la phase de design.
Author: quentinrenaux.com
Author URI: https://quentinrenaux.com
Version: 1.5
Text Domain: qwt
*/
/* ═══════════════════════════════════════════════════════
TABLE DES MATIÈRES
1. TOKENS & VARIABLES
2. RESET & BASE
3. LAYOUT - WRAP / GRID
4. GRILLE OVERLAY (admin)
5. WIREFRAME DECORATORS
6. NAVBAR
7. COVER / HERO BLOCK
8. MARQUEE BANDEAU
9. SECTIONS GÉNÉRIQUES
10. BLOCS : AGENDA
11. BLOCS : RESTAURANTS
12. BLOCS : INFO / HOURS
13. FOOTER
14. SECTION CARDS MENU
15. BOUTON FLOTTANT (ORDER FAB)
16. UTILITAIRES
17. RESPONSIVE
18. TYPOGRAPHIE DE CONTENU ← paragraphes, citations, liens
19. LISTES
20. ARTICLE (single.php) ← en-tête, colonne de lecture, liés
+ blocs Gutenberg par défaut
21. COMMENTAIRES ← liste + formulaire
22. ACCUEIL STREAMING ← page-accueil-streaming.php
23. ARCHIVES ← category / tag / archive / author / search
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
1. TOKENS & VARIABLES
═══════════════════════════════════════════════════════ */
:root {
--bg: #f2efe9;
--surf: #e8e3db;
--bd: #b8b0a4;
--bds: #5c5650;
--tx: #1e1b17;
--mt: #7a7268;
--acc: #f5c031;
--adk: #2b2822;
--wf-red: rgba(210, 60, 15, 1);
--mono: 'DM Mono', monospace;
--sans: 'Space Grotesk', sans-serif;
--r: var(--wf-radius, 3px);
/* Grille */
--cols: 12;
--gap: 20px;
--pad: 40px;
--max: 1240px;
/* Navbar */
--h-navbar: 60px;
}
@media (max-width: 900px) { :root { --cols: 8; --gap: 16px; --pad: 24px; } }
@media (max-width: 600px) { :root { --cols: 4; --gap: 12px; --pad: 16px; } }
/* ═══════════════════════════════════════════════════════
2. RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background: var(--bg);
}
body {
background: var(--bg);
color: var(--tx);
font-family: var(--sans);
font-size: var(--wf-base-font-size, 15px);
line-height: 1.6;
/* `clip` et NON `hidden` — la différence n'est pas cosmétique.
Quand un seul axe vaut `hidden`, la spec force l'autre axe de
`visible` à `auto` : devient alors une zone de défilement.
Or `position: sticky` s'accroche à la zone de défilement la plus
proche. Les éléments collants du thème (bandeau défilant, navbar)
se retrouvaient donc accrochés à un conteneur qui ne défile jamais
— ils ne collaient plus du tout.
`clip` rogne pareil horizontalement mais ne crée aucune zone de
défilement : l'axe vertical reste `visible` et sticky refonctionne. */
overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* Supprimer le noise overlay (spécifique ancien thème) */
.noise-overlay { display: none !important; }
/* ═══════════════════════════════════════════════════════
3. LAYOUT - WRAP / GRID
═══════════════════════════════════════════════════════ */
.wrap,
.container {
max-width: var(--wf-max-width, var(--max));
margin: 0 auto;
padding: 0 var(--pad);
}
.grid {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: var(--gap);
}
/* Colonnes nommées */
.c-hero-text { grid-column: 1 / span 7; }
.c-hero-img { grid-column: 8 / span 5; }
.c-sec-head { grid-column: 1 / span 8; }
.c-sec-center { grid-column: 3 / span 8; text-align: center; }
.c-feat { grid-column: span 4; }
.c-split-img { grid-column: 1 / span 5; }
.c-split-cnt { grid-column: 7 / span 6; }
.c-stat { grid-column: span 3; }
.c-testi { grid-column: span 4; }
.c-price { grid-column: span 4; }
.c-cta { grid-column: 3 / span 8; text-align: center; }
.c-fbrand { grid-column: 1 / span 4; }
.c-fcol1 { grid-column: 6 / span 2; }
.c-fcol2 { grid-column: 8 / span 2; }
.c-fcol3 { grid-column: 10 / span 3; }
@media (max-width: 900px) {
.c-hero-text { grid-column: 1 / -1; }
.c-hero-img { grid-column: 1 / -1; order: -1; }
.c-sec-head { grid-column: 1 / -1; }
.c-sec-center { grid-column: 1 / -1; }
.c-feat { grid-column: span 4; }
.c-split-img { grid-column: 1 / span 4; }
.c-split-cnt { grid-column: 5 / span 4; }
.c-stat { grid-column: span 4; }
.c-testi { grid-column: 1 / -1; }
.c-price { grid-column: 1 / -1; }
.c-cta { grid-column: 1 / -1; }
.c-fbrand { grid-column: 1 / -1; }
.c-fcol1 { grid-column: 1 / span 4; }
.c-fcol2 { grid-column: 5 / span 4; }
.c-fcol3 { grid-column: 1 / span 4; }
}
@media (max-width: 600px) {
.c-feat { grid-column: 1 / -1; }
.c-split-img { grid-column: 1 / -1; }
.c-split-cnt { grid-column: 1 / -1; }
.c-stat { grid-column: span 2; }
.c-testi { grid-column: 1 / -1; }
.c-price { grid-column: 1 / -1; }
.c-cta { grid-column: 1 / -1; }
.c-fbrand { grid-column: 1 / -1; }
.c-fcol1 { grid-column: 1 / span 2; }
.c-fcol2 { grid-column: 3 / span 2; }
.c-fcol3 { grid-column: 1 / -1; }
}
/* Padding helpers */
.pt64 { padding-top: 64px; }
.pb64 { padding-bottom: 64px; }
.py64 { padding-top: 64px; padding-bottom: 64px; }
.pb40 { padding-bottom: 40px; }
/* ═══════════════════════════════════════════════════════
4. GRILLE OVERLAY (admin uniquement)
Les règles de l'overlay vivent dans assets/css/wf-tools.css,
partagées avec la bibliothèque de blocs. Voir inc/wf-page-panel.php.
═══════════════════════════════════════════════════════ */
/* Annotation de section */
.wf-sec {
position: relative;
border-top: 1.5px solid var(--bd);
}
/* ═══════════════════════════════════════════════════════
5. WIREFRAME DECORATORS
═══════════════════════════════════════════════════════ */
/* Label chip */
.wl {
display: inline-flex; align-items: center; gap: 6px;
font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--bg); padding: 4px 10px; border-radius: 2px;
}
.wl::before {
content: ''; width: 6px; height: 6px;
border: 1.5px solid var(--bds); border-radius: 50%;
}
/* Badge de dimension */
.dim {
font: 400 9px/1 var(--mono); color: rgba(210,60,15,.8);
border: 1px solid rgba(210,60,15,.3);
padding: 2px 6px; border-radius: 2px;
background: rgba(210,60,15,.05);
display: inline-block;
}
/* Annotation */
.ann {
font: 400 10px/1 var(--mono); color: var(--mt);
display: flex; align-items: center; gap: 5px;
}
.ann::before { content: ''; width: 12px; height: 1px; background: var(--bd); }
/* ── IMAGE PLACEHOLDER ── */
.wf-img {
position: relative;
background: var(--surf);
border: 1.5px solid var(--bd);
border-radius: var(--r);
overflow: hidden;
}
.wf-img-ratio { padding-top: 62.5%; }
.wf-img svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.wf-img-lbl {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
font: 400 10px/1 var(--mono); color: var(--mt);
background: var(--surf); border: 1px solid var(--bd);
padding: 2px 8px; border-radius: 2px;
white-space: nowrap; z-index: 1;
}
/* Block label (apparaît en haut à gauche de chaque bloc) */
.wf-block-label {
display: inline-flex; align-items: center; gap: 6px;
font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--surf); padding: 3px 8px;
border-radius: 0 0 var(--r) 0;
position: absolute; top: 0; left: 0; z-index: 10;
}
/* ── Mixin badge sombre (réutilisé par les ::before de chaque bloc) ── */
/* usage : appliquer ces valeurs dans chaque block::before */
/* color: #f2efe9; background: #1e1b17; font: 500 9px/1 'DM Mono'; */
/* padding: 4px 10px; border-radius: 0 0 4px 0; */
/* Zone éditable - pointillés sur les textes modifiables.
Conditionné à .wf-outline-on : ces repères sont un outil de relecture,
pas une décoration. Affichés en permanence, ils se superposaient aux
contours de l'outil « Contours des blocs » et donnaient l'impression
d'un double encadrement. Le drawer les allume désormais avec le reste. */
.wf-outline-on .wf-editable {
outline: 1.5px dashed rgba(184, 176, 164, 0.5);
outline-offset: 5px;
border-radius: 2px;
transition: outline-color .2s;
}
.wf-outline-on .wf-editable:hover {
outline-color: rgba(92, 86, 80, 0.7);
}
/* ═══════════════════════════════════════════════════════
6. NAVBAR
═══════════════════════════════════════════════════════ */
header.navbar {
position: sticky;
top: 0;
background: var(--bg);
border-bottom: 1.5px solid var(--bd);
z-index: 200;
height: var(--h-navbar);
display: flex;
align-items: center;
padding: 0 var(--pad);
}
/* Conteneur principal de l'en-tête */
.site-header {
display: flex;
align-items: center;
gap: 15px;
padding: 0px;
}
.site-logo {
max-width: 100px;
max-height: 26px;
object-fit: contain;
width: auto;
height: auto;
}
.site-title {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
}
.site-title a {
text-decoration: none;
color: inherit;
}
.site-title a:hover {
opacity: 0.8;
}
.dot { display: none; }
header.navbar .nav-right {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
}
/* Menu WordPress */
header.navbar .nav-links {
display: flex;
gap: 0;
}
header.navbar .nav-links ul,
header.navbar .nav-links .menu {
display: flex;
list-style: none;
gap: 0;
margin: 0; padding: 0;
}
header.navbar .nav-links .menu-item a {
font: 500 14px/1 var(--sans);
color: var(--mt);
padding: 4px 12px;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
display: block;
}
header.navbar .nav-links .menu-item a:hover,
header.navbar .nav-links .menu-item.current-menu-item a {
color: var(--tx);
border-bottom-color: var(--acc);
}
/* Masquer le theme switcher (spécifique à l'ancien site) */
.theme-switcher { display: none !important; }
/* Hamburger mobile */
.burger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 36px; height: 36px;
border: 1.5px solid var(--bd); border-radius: var(--r);
background: transparent; cursor: pointer;
}
.burger span {
display: block; width: 16px; height: 1.5px;
background: var(--tx); border-radius: 1px;
}
.mobile-nav {
display: none;
position: fixed;
top: var(--h-navbar); left: 0; right: 0; bottom: 0;
background: var(--bg); border-top: 1.5px solid var(--bd);
z-index: 199;
padding: 20px var(--pad);
overflow-y: auto;
}
.mobile-nav.active { display: block; }
.mobile-nav .menu-item a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
font: 500 15px/1 var(--sans); color: var(--mt);
border-bottom: 1px solid var(--bd);
transition: background .15s, color .15s;
}
.mobile-nav .menu-item a:hover { background: var(--surf); color: var(--tx); }
@media (max-width: 900px) {
header.navbar .nav-links { display: none; }
.burger { display: flex; }
}
/* ═══════════════════════════════════════════════════════
7. COVER / HERO BLOCK
═══════════════════════════════════════════════════════ */
.wf-cover {
min-height: 70vh;
background: var(--surf);
}
/* Quand il y a un media réel, on laisse le media s'afficher */
.wf-cover-bg-wrap {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 1;
}
/*.wf-cover-bg-wrap .bg-media {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.25;
filter: grayscale(1);
}*/
/* Placeholder wireframe quand pas de media */
.wf-cover .wf-cover-placeholder {
position: absolute;
inset: 0;
z-index: 1;
}
.wf-cover .wf-cover-placeholder svg {
width: 100%; height: 100%;
}
/* Overlay wireframe léger */
/*.wf-cover-overlay {
position: absolute;
inset: 0;
background: rgba(242,239,233,.5);
z-index: 2;
}*/
/* Contenu */
.wf-cover-content {
position: relative;
z-index: 3;
text-align: center;
padding: 60px var(--pad);
width: 100%;
max-width: var(--max);
}
.wf-cover-content h1 {
font: 700 clamp(30px, 5vw, 60px)/1.1 var(--sans);
letter-spacing: -.03em;
color: var(--tx);
margin-bottom: 16px;
}
.wf-cover-content .wf-subtitle {
font: 400 16px/1.7 var(--sans);
color: var(--mt);
max-width: 560px;
margin: 0 auto 20px;
}
.wf-sub-titles-group {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.wf-sub-item {
font: 400 11px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
border: 1px solid var(--bd);
padding: 6px 12px;
border-radius: 2px;
background: var(--bg);
}
/* L'étiquette « Block · Cover » qui vivait ici a été supprimée.
Deux raisons, pas une :
· elle s'affichait en permanence sur le site public, encadrée, alors
que c'est un repère de construction ;
· elle occupait .wf-cover::before, le pseudo-élément dont l'outil
« Contours » a besoin pour poser son étiquette (data-wf-label).
Les deux se disputaient donc le même emplacement.
Le nom du bloc vient maintenant d'une source unique : wf_block_label()
dans inc/wf-block-extras.php, rendu par assets/css/wf-tools.css et
visible seulement quand on active l'outil. */
/* Bouton son */
.wf-sound-btn {
position: absolute;
bottom: 12px; left: var(--pad);
z-index: 4;
background: transparent;
color: var(--bds);
border: 1px solid var(--bd);
border-radius: var(--r);
padding: 6px 14px;
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
cursor: pointer;
transition: background .2s;
}
.wf-sound-btn:hover { background: var(--surf); }
.wf-sound-btn.is-active { border-color: var(--bds); color: var(--tx); }
/* ═══════════════════════════════════════════════════════
8. MARQUEE BANDEAU
═══════════════════════════════════════════════════════ */
/* ⚠️ RÈGLE MIROIR — à garder identique à blocks/wf-bandeau2/style.css.
Les deux existent parce que le bandeau a deux origines : index.php écrit
ce markup à la main, et le bloc wf/bandeau2 le génère. Les feuilles sont
chargées dans des contextes différents (l'éditeur et le catalogue ne
voient que celle du bloc), aucune ne peut donc disparaître.
L'enveloppe ne se voit pas : c'est un rail de positionnement. Tout ce
qui se voit — fond jaune, filets noirs, hauteur — vit sur
.wf-marquee-inner.
Ce qui a été retiré ici et pourquoi :
· border-top / border-bottom : dessinés aux bords de la boîte
rembourrée, donc 40px au-dessus et en dessous du bandeau. Deux
traits perdus dans le vide, alors que le bandeau a déjà les siens.
· padding: 40px 0 + margin: -40px 0 : le padding décalait le bandeau
de 40px sous son point d'ancrage — une fois collé il flottait à
100px du haut au lieu de se poser contre la navbar. La marge
négative l'annulait dans le flux, donc aucun espace n'était même
réservé.
· overflow: clip → overflow-x: clip : sur les deux axes, il rognait
le bandeau pivoté au survol (c'est ce que les 40px compensaient).
Sur le seul axe X, il contient toujours les 100px de débordement
latéral de .wf-marquee-inner, mais laisse la rotation respirer. */
.wf-marquee-outer.sticky-bandeau {
position: sticky;
top: var(--h-navbar, 60px);
left: 0;
z-index: 190;
width: 100vw;
margin-left: calc(-50vw + 50%);
overflow-x: clip;
pointer-events: none;
}
.wf-marquee-inner {
background: var(--acc);
display: flex;
align-items: center;
height: 44px;
width: calc(100% + 100px);
margin-left: -50px;
overflow: clip;
pointer-events: all;
border-top: 2px solid var(--adk);
border-bottom: 2px solid var(--adk);
transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: center;
}
.wf-marquee-outer.sticky-bandeau:hover .wf-marquee-inner {
transform: rotate(-2deg) scale(1.02);
}
.marquee-content {
display: flex;
white-space: nowrap;
animation: scrollLinear 20s linear infinite;
}
@keyframes scrollLinear {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-track {
display: flex;
align-items: center;
flex-shrink: 0;
}
.wf-marquee-outer .item {
font: 700 1.4rem/1 var(--sans);
text-transform: uppercase;
color: var(--adk);
padding: 0 15px;
display: inline-block;
letter-spacing: -.01em;
}
.wf-marquee-outer .sep {
font-weight: 900;
font-size: 1rem;
color: var(--adk);
opacity: .5;
}
.wf-marquee-outer .highlight {
background: var(--adk);
color: var(--acc);
padding: 2px 15px;
margin: 0 10px;
}
.wf-marquee-outer .outline {
color: transparent;
-webkit-text-stroke: 1.5px var(--adk);
}
/* ═══════════════════════════════════════════════════════
9. SECTIONS GÉNÉRIQUES
═══════════════════════════════════════════════════════ */
.section-border-top {
border-top: 1.5px solid var(--bd);
padding-top: 12px;
margin-bottom: 8px;
}
.section-header {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .15em;
color: var(--mt);
margin-bottom: 6px;
}
.subtitle {
font: 400 13px/1.6 var(--sans);
color: var(--mt);
}
/* En-têtes de section */
.sec-hd { display: flex; flex-direction: column; gap: 10px; }
.sec-hd h2 {
font: 700 clamp(22px,3vw,40px)/1.2 var(--sans);
letter-spacing: -.025em; margin-top: 6px;
}
.sec-hd p { color: var(--mt); font-size: 15px; line-height: 1.7; }
/* Boutons génériques */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 10px 20px;
border: 1.5px solid var(--bds); background: transparent; color: var(--tx);
font: 500 14px/1 var(--sans); cursor: pointer; border-radius: var(--r);
transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surf); }
.btn-fill { background: var(--tx); color: var(--bg); }
.btn-fill:hover { background: var(--bds); }
.btn-acc { background: var(--acc); color: var(--tx); border-color: var(--acc); font-weight: 600; }
.btn-acc:hover { background: #e8b420; border-color: #e8b420; }
.btn-ghost { border-color: var(--bd); color: var(--mt); }
.btn-ghost:hover { border-color: var(--bds); color: var(--tx); }
/* ═══════════════════════════════════════════════════════
10. BLOCK · INFO GRID (ratz/info)
─────────────────────────────────────────────────────
Structure : 2 colonnes
.info-col-left → numéro + grand titre + sous-texte
.info-col-right → liste à puces + bouton CTA
═══════════════════════════════════════════════════════ */
.wf-info-block {
padding: 64px 0;
background: var(--bg);
border-top: 1.5px solid var(--bd);
position: relative;
}
.wf-outline-on .wf-info-block::before {
content: 'Block · Info Grid';
position: absolute; top: 0; left: 0;
font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--surf); padding: 3px 8px;
border-radius: 0 0 var(--r) 0;
}
.wf-info-block-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
/* Colonne gauche */
.info-col-left .info-section-num {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .15em;
color: var(--mt);
border-top: 1.5px solid var(--bd);
padding-top: 12px;
margin-bottom: 20px;
}
.info-col-left h2 {
font: 700 clamp(2rem, 4vw, 3.5rem)/1.05 var(--sans);
letter-spacing: -.04em;
color: var(--tx);
margin-bottom: 12px;
}
.info-col-left .info-subtitle {
font: 400 14px/1.6 var(--sans);
color: var(--mt);
}
/* Colonne droite */
.info-col-right .info-list {
list-style: none;
margin: 0 0 28px;
border-top: 1.5px solid var(--bd);
}
.info-col-right .info-list li {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--bd);
font: 400 14px/1.4 var(--sans);
color: var(--tx);
}
.info-col-right .info-list li::before {
content: '>';
font: 500 12px/1 var(--mono);
color: var(--mt);
flex-shrink: 0;
}
@media (max-width: 900px) {
.wf-info-block-wrap { grid-template-columns: 1fr; gap: 40px; }
}
/* ═══════════════════════════════════════════════════════
11. BLOCS : AGENDA (supprimé - conservé pour référence CSS)
═══════════════════════════════════════════════════════ */
.agenda-block-section {
background: var(--bg);
padding: 64px 0;
position: relative;
border-top: 1.5px solid var(--bd);
}
.wf-outline-on .agenda-block-section::before {
content: 'Block · Agenda';
position: absolute; top: 0; left: 0;
font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--surf); padding: 3px 8px;
border-radius: 0 0 var(--r) 0;
}
/* Labels colonnes */
.agenda-labels {
display: grid;
grid-template-columns: 120px 1fr 160px;
padding: 8px 20px;
border-bottom: 1.5px solid var(--bd);
font: 400 9px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
}
/* Ligne d'événement */
.agenda-container {
border: 1.5px solid var(--bd);
border-radius: var(--r);
overflow: hidden;
}
.event-row {
display: grid;
grid-template-columns: 120px 1fr 160px;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--bd);
transition: background .15s;
background: var(--bg);
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--surf); }
.event-row.is-sold-out { opacity: .5; }
.event-date {
display: flex;
flex-direction: column;
}
.event-date .day {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
}
.event-date .num {
font: 600 24px/1 var(--sans);
letter-spacing: -.03em;
color: var(--tx);
margin-top: 3px;
}
.event-title {
font: 600 16px/1.3 var(--sans);
letter-spacing: -.01em;
color: var(--tx);
margin: 0 0 6px;
}
.event-title a { color: var(--tx); }
.event-title a:hover { color: var(--bds); }
.event-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.event-tag a {
font: 400 10px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
border: 1px solid var(--bd);
padding: 2px 7px;
border-radius: 2px;
background: var(--bg);
transition: border-color .15s, color .15s;
}
.event-tag a:hover { border-color: var(--bds); color: var(--tx); }
.event-location {
font: 400 11px/1 var(--mono);
color: var(--mt);
display: block;
}
.event-action {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.event-prix-inrender {
font: 400 11px/1 var(--mono);
color: var(--mt);
}
.btn-ticket {
display: inline-block;
padding: 8px 16px;
border: 1.5px solid var(--bds);
color: var(--tx);
font: 500 12px/1 var(--sans);
border-radius: var(--r);
transition: background .15s;
text-align: center;
}
.btn-ticket:hover { background: var(--surf); }
.btn-soldout {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
border: 1px solid var(--bd);
padding: 4px 8px;
border-radius: 2px;
}
.no-events {
font: 400 11px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
text-align: center;
padding: 40px;
}
.block-agenda-see-allevents {
display: flex;
justify-content: center;
padding: 20px;
border-top: 1px solid var(--bd);
background: var(--surf);
}
.block-agenda-see-allevents a {
font: 400 11px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
border: 1px solid var(--bd);
padding: 8px 16px;
border-radius: var(--r);
transition: border-color .15s, color .15s;
}
.block-agenda-see-allevents a:hover { border-color: var(--bds); color: var(--tx); }
/* ═══════════════════════════════════════════════════════
11. BLOCS : RESTAURANTS
═══════════════════════════════════════════════════════ */
.wf-resto-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
padding: 64px var(--pad);
max-width: var(--max);
margin: 0 auto;
position: relative;
border-top: 1.5px solid var(--bd);
}
.wf-outline-on .wf-resto-grid::before {
content: 'Block · Restaurants';
position: absolute; top: 0; left: var(--pad);
font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--surf); padding: 3px 8px;
border-radius: 0 0 var(--r) 0;
}
.resto-card {
border: 1.5px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
overflow: hidden;
transition: background .15s, border-color .15s;
}
.resto-card:hover { background: var(--surf); border-color: var(--bds); }
.resto-card a { display: block; color: inherit; }
/* Placeholder image resto */
.resto-thumb {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--surf);
border-bottom: 1px solid var(--bd);
}
/* Image réelle (filtrée en wireframe) */
.resto-thumb img {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
opacity: .4;
transition: filter .3s, opacity .3s;
}
.resto-card:hover .resto-thumb img { opacity: .6; }
/* SVG placeholder */
.resto-thumb-wf {
position: absolute; inset: 0;
}
.resto-thumb-wf svg {
width: 100%; height: 100%;
}
.resto-thumb-lbl {
position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
font: 400 9px/1 var(--mono); color: var(--mt);
background: var(--surf); border: 1px solid var(--bd);
padding: 2px 7px; border-radius: 2px;
white-space: nowrap;
}
.resto-lot {
position: absolute; top: 8px; right: 8px;
background: var(--acc);
color: var(--adk);
font: 500 9px/1 var(--mono);
padding: 2px 7px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: .06em;
}
.no-img {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
}
.resto-infos {
padding: 16px;
}
.resto-title {
font: 600 14px/1.3 var(--sans);
color: var(--tx);
margin: 0 0 6px;
}
.resto-food {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .08em;
color: var(--mt);
margin: 0;
}
@media (max-width: 1024px) {
.wf-resto-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.wf-resto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.wf-resto-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════
12. BLOCS : INFO / HOURS
═══════════════════════════════════════════════════════ */
.wf-info-section {
padding: 64px 0;
background: var(--surf);
border-top: 1.5px solid var(--bd);
position: relative;
}
.wf-outline-on .wf-info-section::before {
content: 'Block · Info & Hours';
position: absolute; top: 0; left: 0;
font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--mt); border: 1px solid var(--bd);
background: var(--bg); padding: 3px 8px;
border-radius: 0 0 var(--r) 0;
}
.wf-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
/* Gauche */
.wf-title-large {
font: 700 clamp(2.5rem, 5vw, 5rem)/1 var(--sans);
letter-spacing: -.04em;
margin: 0 0 20px;
color: var(--tx);
}
.wf-description {
font: 400 15px/1.7 var(--sans);
color: var(--mt);
max-width: 420px;
}
/* Droite - liste horaires */
.hours-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
}
.hours-list li {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: baseline;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--bd);
font: 400 15px/1 var(--sans);
color: var(--tx);
}
.hours-list li .day { color: var(--tx); }
.hours-list li .middle { color: var(--mt); font-size: 13px; }
.hours-list li .time { color: var(--mt); font: 400 13px/1 var(--mono); }
.hours-list.extra-lines { margin-bottom: 8px; }
.hours-list.extra-lines li.extra-line {
font-size: 13px;
color: var(--mt);
border-bottom: 1px dashed var(--bd);
padding: 8px 0;
}
.hours-list.extra-lines li.extra-line strong { color: var(--tx); }
.info-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.wf-btn-brutal {
flex: 1;
display: inline-block;
padding: 12px 20px;
border: 1.5px solid var(--bds);
color: var(--tx);
text-align: center;
font: 500 13px/1 var(--sans);
border-radius: var(--r);
transition: background .15s;
}
.wf-btn-brutal:hover { background: var(--bg); }
@media (max-width: 900px) {
.wf-info-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ═══════════════════════════════════════════════════════
13. FOOTER
═══════════════════════════════════════════════════════ */
footer.footer-brut {
border-top: 1.5px solid var(--bd);
padding: 48px 0 28px;
background: var(--bg);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.f-col h3 {
font: 600 15px/1 var(--footer-sans, var(--sans));
letter-spacing: -.01em;
margin-bottom: 14px;
color: var(--tx);
}
.f-col h4 {
font: 400 10px/1 var(--mono);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--mt);
margin-bottom: 14px;
}
.f-col p {
font: 400 var(--footer-body, 13px)/1.7 var(--footer-sans, var(--sans));
color: var(--mt);
max-width: 280px;
margin-bottom: 16px;
}
/* Social links */
.social-footer {
font: 400 11px/1 var(--mono);
color: var(--mt);
margin-top: 12px;
}
.social-footer .social-icons,
.social-footer .social-menu,
.social-footer ul {
display: flex;
gap: 8px;
flex-wrap: wrap;
list-style: none;
margin-top: 8px;
padding: 0;
}
.social-footer a,
.social-footer .menu-item a {
font: 400 10px/1 var(--mono);
color: var(--footer-lnk, var(--mt));
border: 1px solid var(--footer-lnk, var(--bd));
border-radius: 20px;
padding: 3px 9px;
transition: border-color .15s, color .15s;
display: block;
}
.social-footer a:hover,
.social-footer .menu-item a:hover { border-color: var(--footer-lnk, var(--bds)); color: var(--footer-lnk, var(--tx)); opacity: .8; }
/* Menu footer liens */
.links-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
padding: 0; margin: 0;
}
.links-menu li a {
font: 400 var(--footer-body, 13px)/1 var(--footer-sans, var(--sans));
color: var(--footer-lnk, var(--mt));
transition: color .15s;
}
.links-menu li a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }
/* Bloc d'aide admin (footer · uniquement visible aux admins connectés) */
.wf-admin-hint {
margin-top: 14px;
padding: 10px 12px;
border: 1px dashed var(--footer-bd, var(--bd));
border-radius: 4px;
background: rgba(255, 255, 255, .04);
font: 400 11px/1.5 var(--mono, monospace);
color: var(--footer-mt, var(--mt));
opacity: .85;
}
.wf-admin-hint strong {
display: block;
margin-bottom: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
font-size: 10px;
opacity: .8;
}
.wf-admin-hint a {
color: var(--footer-lnk, var(--tx));
text-decoration: underline;
text-underline-offset: 2px;
}
.wf-admin-hint a:hover { opacity: .7; }
/* Colonne privatisation */
.f-col.privat p {
font-size: var(--footer-body, 13px);
font-family: var(--footer-sans, var(--sans));
color: var(--mt);
line-height: 1.6;
max-width: 100%;
}
.btn-privat {
display: inline-block;
padding: 10px 18px;
border: 1.5px solid var(--footer-btn, var(--bds));
color: var(--footer-btn, var(--tx));
font: 500 var(--footer-body, 13px)/1 var(--footer-sans, var(--sans));
border-radius: var(--r);
transition: background .15s, opacity .15s;
margin-top: 4px;
}
.btn-privat:hover { background: var(--surf); opacity: .8; }
/* Ligne copyright */
.footer-bottom {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--bd);
}
.footer-bottom span,
.footer-bottom .footer-credits span {
font: 400 11px/1.6 var(--mono);
color: var(--mt);
}
.footer-bottom a { color: var(--footer-lnk, var(--mt)); }
.footer-bottom a:hover { color: var(--footer-lnk, var(--tx)); opacity: .8; }
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════
14. SECTION CARDS MENU
═══════════════════════════════════════════════════════ */
.section-cards-menu-footer {
border-top: 1.5px solid var(--bd);
background: var(--surf);
padding: 32px 0;
}
.wf-cards-grid-footer {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad);
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wf-card-item-footer {
flex: 1 1 160px;
}
.wf-card-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
border: 1.5px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
font: 500 13px/1 var(--sans);
color: var(--tx);
transition: background .15s, border-color .15s;
}
.wf-card-link:hover { background: var(--bg); border-color: var(--bds); }
.wf-card-arrow {
font-size: 12px;
color: var(--mt);
}
/* ═══════════════════════════════════════════════════════
15. BOUTON FLOTTANT (ORDER FAB)
═══════════════════════════════════════════════════════ */
.wf-order-fab {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 9000;
}
.wf-order-btn {
width: 80px; height: 80px;
border-radius: 50%;
border: 2px solid var(--bds);
background: var(--bg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.wf-order-svg {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.wf-order-circle-text {
font: 400 9px/1 var(--mono);
fill: var(--mt);
text-transform: uppercase;
letter-spacing: .12em;
}
.wf-order-icon {
position: relative; z-index: 1;
}
.logo-svg {
width: 36px; height: 36px;
fill: var(--tx);
}
/* Panel slide-in */
.wf-order-panel {
position: fixed;
top: 0; right: 0;
width: 400px; height: 100vh;
background: var(--bg);
border-left: 1.5px solid var(--bd);
z-index: 9001;
transform: translateX(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.wf-order-panel.is-open { transform: translateX(0); }
.wf-order-panel-inner {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wf-order-close {
position: absolute;
top: 12px; right: 12px;
background: transparent;
border: 1px solid var(--bd);
color: var(--mt);
width: 28px; height: 28px;
border-radius: 50%;
cursor: pointer;
font: 12px/1 var(--sans);
display: flex; align-items: center; justify-content: center;
}
.wf-order-iframe {
flex: 1;
border: none;
width: 100%;
}
/* ═══════════════════════════════════════════════════════
16. UTILITAIRES
═══════════════════════════════════════════════════════ */
/* Masquer éléments internes à l'ancien thème */
.sansplombtest { display: none !important; }
/* Styles login page */
.login #login {
background: var(--bg);
}
/* Edit button (template part) */
.wf-edit-btn a {
display: inline-flex;
align-items: center;
gap: 6px;
font: 400 11px/1 var(--mono);
color: var(--mt);
border: 1px solid var(--bd);
padding: 5px 10px;
border-radius: var(--r);
background: var(--bg);
transition: border-color .15s, color .15s;
}
.wf-edit-btn a:hover { border-color: var(--bds); color: var(--tx); }
/* Pagination */
.pagination-wrapper {
display: flex;
justify-content: center;
padding: 40px 0;
}
.pagination {
list-style: none;
display: flex;
gap: 4px;
}
.pagination a,
.pagination .current {
display: block;
padding: 7px 12px;
border: 1.5px solid var(--bd);
border-radius: var(--r);
font: 400 13px/1 var(--sans);
color: var(--mt);
transition: border-color .15s, color .15s;
}
.pagination a:hover { border-color: var(--bds); color: var(--tx); }
.pagination .current { border-color: var(--bds); color: var(--tx); background: var(--surf); }
/* ═══════════════════════════════════════════════════════
17. RESPONSIVE
Le thème était pensé desktop d'abord : le mobile se contentait
d'empiler les colonnes. Cette section reprend les points où
l'empilement seul ne suffit pas — cibles tactiles trop petites,
texte qui déborde, éléments collants qui mangent l'écran.
Repères utilisés :
≤ 900px → tablette / grand mobile : la navigation bascule
≤ 768px → mobile : les grilles s'effondrent
≤ 600px → petit mobile : la typo et les chromes se resserrent
═══════════════════════════════════════════════════════ */
/* ── Confort tactile, tous mobiles ──────────────────────
iOS zoome sur tout champ dont la police descend sous 16px, et
recentre la page au blur : la saisie devient pénible. */
@media (hover: none) and (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea { font-size: 16px; }
/* 44px : plancher recommandé pour une cible tactile. Les liens de
menu, boutons et pastilles du thème descendaient à 28-32px. */
.btn,
.wf-btn-brutal,
.mobile-nav .menu-item a,
.pagination a,
.pagination .current { min-height: 44px; }
.btn,
.wf-btn-brutal {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Le survol ne veut rien dire au doigt : on neutralise les états
qui restaient « collés » après un tap. */
.wf-card:hover,
.wf-feature-item:hover { background: transparent; }
}
@media (max-width: 900px) {
/* Navbar : le titre du site poussait le burger hors du cadre
quand le nom est long. */
.site-title { font-size: 1.15rem; }
.site-title a {
display: block;
max-width: 52vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Le drawer prenait toute la hauteur sous une navbar en position
sticky : sur un écran court, le dernier lien tombait sous le pli
sans indice de défilement. */
.mobile-nav {
padding: 12px var(--pad) 40px;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.mobile-nav .menu-item a { font-size: 16px; padding: 15px 4px; }
.mobile-nav .menu-item:last-child a { border-bottom: none; }
}
@media (max-width: 768px) {
.agenda-labels { display: none; }
.event-row {
grid-template-columns: 90px 1fr;
grid-template-rows: auto auto;
}
.event-action {
grid-column: 1 / -1;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.wf-info-grid { grid-template-columns: 1fr; gap: 40px; }
.wf-order-panel { width: 100%; }
.wf-order-fab { bottom: 16px; left: 16px; }
header.navbar { padding: 0 var(--pad); }
/* Les helpers en dur cassaient le rythme fluide des blocs :
64px de padding fixe à côté d'un bloc en clamp(). */
.pt64 { padding-top: var(--wf-space-m); }
.pb64 { padding-bottom: var(--wf-space-m); }
.py64 { padding-top: var(--wf-space-m); padding-bottom: var(--wf-space-m); }
.pb40 { padding-bottom: var(--wf-space-s); }
/* Un tableau ne s'empile pas : on lui donne son propre défilement
plutôt que de laisser la page entière partir en travers. */
.wf-article table,
.wp-block-table { display: block; overflow-x: auto; max-width: 100%; }
/* Idem pour le code et les mots longs (URL, noms de fichiers). */
.wf-article pre { overflow-x: auto; }
.wf-article p,
.wf-article li,
.wf-article h1, .wf-article h2, .wf-article h3 { overflow-wrap: break-word; }
}
@media (max-width: 600px) {
/* La navbar mange 60px de haut sur un écran de 640px de haut. */
:root { --h-navbar: 54px; }
.site-logo { max-height: 22px; }
/* Les pastilles mono passaient en dessous du seuil de lisibilité
à force d'interlettrage : moins d'espacement, taille tenue. */
.wl, .dim, .wf-img-lbl, .wf-block-label { letter-spacing: .06em; }
/* Le FAB du panneau et celui de commande se superposaient. */
.wf-order-fab { bottom: 12px; left: 12px; }
}
/* ═══════════════════════════════════════════════════════
UTILITAIRES WF - ÉCHELLE D'ESPACEMENT
Source de vérité partagée avec :
· inc/wf-block-extras.php → wf_spacing_scale() (libellés)
· admin-editor.css → mêmes variables (éditeur)
· assets/js/wf-block-controls.js → PAD_PX / MAR_PX (panneau)
Deux principes :
1. FLUIDE. Chaque palier est un clamp() : la borne basse sert le
mobile, la borne haute le desktop, et la pente en vw fait le
trajet. Un bloc en padding L ne colle plus 120px de vide en haut
d'un écran de 390px de large.
2. COMPACT. L'ancienne échelle (40 / 80 / 120 / 180) empilait
160px entre deux blocs consécutifs en réglage par défaut, et la
page se lisait comme une suite de sections flottantes sans
rythme. Les paliers desktop sont ramenés à 24 / 48 / 80 / 120 :
le défaut « M » vaut désormais 48px, soit deux fois moins.
Les deux variables --wf-pad-top / --wf-pad-bottom sont posées en
même temps que le padding : elles servent à l'outil « Espacements »
du drawer (assets/css/wf-tools.css) pour dessiner les bandes au bon
endroit, sans mesure JS.
═══════════════════════════════════════════════════════ */
:root {
--wf-space-s: clamp(16px, 2.5vw, 24px);
--wf-space-m: clamp(28px, 4.5vw, 48px);
--wf-space-l: clamp(40px, 6.5vw, 80px);
--wf-space-xl: clamp(56px, 9vw, 120px);
/* Marges extérieures : volontairement plus serrées que les paddings.
Une marge s'ajoute au padding des deux blocs qu'elle sépare ; à
valeur égale, l'écart réel doublait. */
--wf-gap-s: clamp( 8px, 1.5vw, 12px);
--wf-gap-m: clamp(16px, 3vw, 24px);
--wf-gap-l: clamp(28px, 5vw, 48px);
--wf-gap-xl: clamp(40px, 7vw, 80px);
}
/* Padding vertical des blocs — contrôlé via wfPadding (panneau ↕ Espacement).
Ces classes ne sont posées QUE si l'auteur a choisi une valeur : « auto »
n'en pose aucune et laisse le bloc appliquer son padding natif. Le
!important est donc légitime — quand la classe est là, c'est une décision
explicite qui doit battre la feuille de style du bloc, dont l'ordre de
chargement n'est pas garanti. */
.wf-pad-0 {
--wf-pad-top: 0px; --wf-pad-bottom: 0px;
padding-top: 0 !important; padding-bottom: 0 !important;
}
.wf-pad-s {
--wf-pad-top: var(--wf-space-s); --wf-pad-bottom: var(--wf-space-s);
padding-top: var(--wf-space-s) !important; padding-bottom: var(--wf-space-s) !important;
}
.wf-pad-m {
--wf-pad-top: var(--wf-space-m); --wf-pad-bottom: var(--wf-space-m);
padding-top: var(--wf-space-m) !important; padding-bottom: var(--wf-space-m) !important;
}
.wf-pad-l {
--wf-pad-top: var(--wf-space-l); --wf-pad-bottom: var(--wf-space-l);
padding-top: var(--wf-space-l) !important; padding-bottom: var(--wf-space-l) !important;
}
.wf-pad-xl {
--wf-pad-top: var(--wf-space-xl); --wf-pad-bottom: var(--wf-space-xl);
padding-top: var(--wf-space-xl) !important; padding-bottom: var(--wf-space-xl) !important;
}
/* Marges extérieures des blocs — contrôlées via wfMarginTop / wfMarginBottom.
Chaque classe expose aussi sa valeur en variable : l'outil « Espacements »
du drawer s'en sert pour dessiner les bandes de marge À L'EXTÉRIEUR du
bloc, là où le padding se dessine à l'intérieur. */
.wf-mt-s { --wf-mt: var(--wf-gap-s); margin-top: var(--wf-gap-s) !important; }
.wf-mt-m { --wf-mt: var(--wf-gap-m); margin-top: var(--wf-gap-m) !important; }
.wf-mt-l { --wf-mt: var(--wf-gap-l); margin-top: var(--wf-gap-l) !important; }
.wf-mt-xl { --wf-mt: var(--wf-gap-xl); margin-top: var(--wf-gap-xl) !important; }
.wf-mb-s { --wf-mb: var(--wf-gap-s); margin-bottom: var(--wf-gap-s) !important; }
.wf-mb-m { --wf-mb: var(--wf-gap-m); margin-bottom: var(--wf-gap-m) !important; }
.wf-mb-l { --wf-mb: var(--wf-gap-l); margin-bottom: var(--wf-gap-l) !important; }
.wf-mb-xl { --wf-mb: var(--wf-gap-xl); margin-bottom: var(--wf-gap-xl) !important; }
/* ═══════════════════════════════════════════════════════
UTILITAIRES WF - séparateurs de blocs
Contrôlés via wfDividerTop / wfDividerBottom
═══════════════════════════════════════════════════════ */
.wf-divider-top { border-top: 1.5px solid var(--bd) !important; }
.wf-divider-bottom { border-bottom: 1.5px solid var(--bd) !important; }
/* ═══════════════════════════════════════════════════════
UTILITAIRES WF - arrondi des blocs
Contrôlé via wfRadius dans le panneau 🎨 Apparence
═══════════════════════════════════════════════════════ */
.wf-radius-s { border-radius: 4px !important; overflow: hidden !important; }
.wf-radius-m { border-radius: 8px !important; overflow: hidden !important; }
.wf-radius-l { border-radius: 16px !important; overflow: hidden !important; }
/* ═══════════════════════════════════════════════════════
UTILITAIRES WF - largeur max du contenu
Contrôlé via wfMaxWidth dans le panneau 🎨 Apparence
═══════════════════════════════════════════════════════ */
.wf-width-narrow > * { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
.wf-width-full { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* ═══════════════════════════════════════════════════════
UTILITAIRES WF - presets couleur de fond des blocs
Contrôlés via wfBgColor dans le panneau 🎨 Apparence
═══════════════════════════════════════════════════════ */
.wf-bg-bg { background-color: var(--bg) !important; }
.wf-bg-surface { background-color: var(--surf) !important; }
.wf-bg-dark { background-color: var(--adk) !important; color: var(--bg) !important; }
.wf-bg-accent { background-color: var(--acc) !important; }
/* --------- accueil monitor template ------------ */
/* Style pour les vignettes du monitoring */
.wf-card {
border: 1.5px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
overflow: hidden;
transition: all .2s;
display: flex;
flex-direction: column;
height: 100%;
}
.wf-card:hover {
background: var(--surf);
border-color: var(--bds);
}
.wf-card .wf-img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-bottom: 1px solid var(--bd);
}
.wf-card-content {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.wf-card-title {
font: 600 14px/1.3 var(--sans);
color: var(--tx);
margin: 0;
}
.wf-card-excerpt {
font: 400 12px/1.5 var(--sans);
color: var(--mt);
margin: 0;
flex: 1;
}
.wf-card .ann {
font-size: 10px;
margin: 4px 0;
}
.wf-card .btn {
margin-top: auto;
align-self: flex-start;
}
/* Style pour le Main Link Button dans les vignettes */
.wf-main-link-button {
margin-top: auto;
align-self: stretch;
text-align: center;
font-weight: 600;
border-radius: var(--r);
padding: 10px;
transition: all .2s;
}
/* ═══════════════════════════════════════════════════════════════
18. TYPOGRAPHIE DE CONTENU
Paragraphes, citations, emphases, liens, séparateurs.
── OÙ MODIFIER ──
Tout se règle depuis le bloc « RÉGLAGES » ci-dessous : change une
variable, l'effet se propage partout. Ne touche aux règles qui
suivent que si tu veux changer la structure (ex. passer la barre
de citation à droite plutôt qu'à gauche).
── PORTÉE ──
Un seul sélecteur de scope, répété sur chaque règle :
:where(.entry-content, [class*="wp-block-wf-"])
.entry-content → le contenu de page.php (the_content)
[class*="wp-block-wf-"] → l'intérieur des blocs wf/*
Le footer, les menus et la navbar ne sont donc jamais touchés.
Pour couvrir un nouveau conteneur, ajoute sa classe dans les
parenthèses du :where() — sur chaque règle.
── POURQUOI :where() ──
:where() ne compte pas dans la spécificité. Ces règles pèsent donc
le strict minimum et TOUTE règle de bloc existante les écrase
automatiquement : .wf-card-text, .wf-feature-text, .wf-cta-subtitle,
.wf-split-description, .wf-accordion-answer p… gardent leur mise en
forme. Ce sont des valeurs par défaut, pas des règles autoritaires.
Corollaire : pour surcharger un point précis, une simple classe
suffit — inutile de sortir !important.
── NOTE : les titres ne sont pas ici ──
h1-h6 restent gérés par le bloc wf/titre et par les règles
contextuelles (.wf-cover-content h1 l.507, .sec-hd h2 l.676).
Si tu veux une échelle de titres générique, ajoute-la ICI, en
:where() elle aussi, pour ne pas les écraser.
════════════════════════════════════════════════════════════════ */
/* ── RÉGLAGES ── */
:root {
/* Paragraphe */
--wf-p-leading: 1.7; /* interlignage */
--wf-p-space: 1em; /* espace sous chaque paragraphe */
--wf-measure: none; /* largeur de lecture max, ex. 68ch */
/* Citation */
--wf-quote-size: 1.2em; /* taille du texte cité */
--wf-quote-space: 1.8em; /* marge au-dessus / en dessous */
--wf-quote-pad: 22px; /* retrait depuis la barre */
--wf-quote-bar: 2px; /* épaisseur de la barre */
--wf-quote-bar-color: var(--bd);
}
/* ───────────────────────────────────────────────
Paragraphe
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) p {
line-height: var(--wf-p-leading);
margin: 0 0 var(--wf-p-space);
max-width: var(--wf-measure);
}
/* Dernier paragraphe d'un conteneur : pas d'espace résiduel */
:where(.entry-content, [class*="wp-block-wf-"]) p:last-child {
margin-bottom: 0;
}
/* ───────────────────────────────────────────────
Emphases
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) strong {
font-weight: 600;
color: var(--tx);
}
:where(.entry-content, [class*="wp-block-wf-"]) em {
font-style: italic;
}
/* Surlignage - reprend le jaune accent du wireframe */
:where(.entry-content, [class*="wp-block-wf-"]) mark {
background: var(--acc);
color: var(--tx);
padding: .1em .3em;
border-radius: 2px;
}
/* Code inline */
:where(.entry-content, [class*="wp-block-wf-"]) code {
font: 400 .88em/1.4 var(--mono);
background: var(--surf);
border: 1px solid var(--bd);
border-radius: 2px;
padding: .12em .38em;
}
:where(.entry-content, [class*="wp-block-wf-"]) small {
font-size: .82em;
color: var(--mt);
}
/* ───────────────────────────────────────────────
Lien dans le texte
Les boutons (.btn) et les liens de menu/footer
ne sont pas concernés.
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) a:not(.btn) {
color: inherit;
border-bottom: 1px solid var(--bd);
transition: border-color .2s, color .2s;
}
:where(.entry-content, [class*="wp-block-wf-"]) a:not(.btn):hover {
color: var(--wf-red);
border-bottom-color: var(--wf-red);
}
/* ───────────────────────────────────────────────
Citation - blockquote / core/quote
Markup Gutenberg :
…
…
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) blockquote {
margin: var(--wf-quote-space) 0;
padding: 2px 0 2px var(--wf-quote-pad);
border-left: var(--wf-quote-bar) solid var(--wf-quote-bar-color);
color: var(--tx);
}
:where(.entry-content, [class*="wp-block-wf-"]) blockquote p {
font-size: var(--wf-quote-size);
line-height: 1.45;
margin-bottom: .5em;
max-width: none;
}
:where(.entry-content, [class*="wp-block-wf-"]) blockquote p:last-of-type {
margin-bottom: 0;
}
/* Attribution - en mono majuscules, comme les labels wireframe */
:where(.entry-content, [class*="wp-block-wf-"]) blockquote cite {
display: block;
margin-top: .9em;
font: 400 11px/1.4 var(--mono);
font-style: normal;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
:where(.entry-content, [class*="wp-block-wf-"]) blockquote cite::before {
content: '— ';
}
/* Variante « Simple » de Gutenberg : sans barre */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-quote.is-style-plain {
border-left: 0;
padding-left: 0;
}
/* Variante « Grande » de Gutenberg */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-quote.is-style-large p {
font-size: calc(var(--wf-quote-size) * 1.35);
line-height: 1.35;
}
/* ───────────────────────────────────────────────
Citation mise en avant - core/pullquote
Centrée, encadrée haut et bas
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-pullquote {
margin: calc(var(--wf-quote-space) * 1.4) 0;
padding: 1.6em 0;
border-top: var(--wf-quote-bar) solid var(--wf-quote-bar-color);
border-bottom: var(--wf-quote-bar) solid var(--wf-quote-bar-color);
text-align: center;
}
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-pullquote p {
font-size: calc(var(--wf-quote-size) * 1.3);
line-height: 1.35;
max-width: none;
}
/* ───────────────────────────────────────────────
Séparateur - hr / core/separator
─────────────────────────────────────────────── */
:where(.entry-content, [class*="wp-block-wf-"]) hr {
height: 0;
margin: 2em 0;
border: 0;
border-top: 1px solid var(--bd);
}
/* Variante « Ligne large » de Gutenberg */
:where(.entry-content, [class*="wp-block-wf-"]) .wp-block-separator.is-style-wide {
border-top-width: 2px;
}
/* ───────────────────────────────────────────────
Responsive - citations un peu plus compactes
─────────────────────────────────────────────── */
@media (max-width: 600px) {
:root {
--wf-quote-size: 1.1em;
--wf-quote-space: 1.4em;
--wf-quote-pad: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════
19. LISTES - blocs WF uniquement
Sélecteur : [class*="wp-block-wf-"] cible tous les blocs wf/*
sans toucher au footer, menus, ou autres zones du thème.
════════════════════════════════════════════════════════════════ */
[class*="wp-block-wf-"] ul,
[class*="wp-block-wf-"] ol {
list-style: none;
margin: 0 0 1em 0;
padding: 0;
}
/* ── Liste non ordonnée ── */
[class*="wp-block-wf-"] ul li {
position: relative;
padding-left: 15px;
margin-bottom: .45em;
line-height: 1.6;
}
[class*="wp-block-wf-"] ul li::before {
content: '';
position: absolute;
left: 1px;
top: .59em; /* alignement vertical avec la première ligne */
width: 6px;
height: 6px;
border-radius: 10px; /* carré légèrement arrondi */
background: currentColor; /* hérite de la couleur du li, quelle qu'elle soit */
}
/* ── Liste ordonnée - compteur ── */
[class*="wp-block-wf-"] ol {
counter-reset: wf-list;
}
[class*="wp-block-wf-"] ol li {
position: relative;
padding-left: 2em;
margin-bottom: .45em;
line-height: 1.6;
counter-increment: wf-list;
}
[class*="wp-block-wf-"] ol li::before {
content: counter(wf-list);
position: absolute;
left: 0;
top: 0;
width: 1.4em;
font: 600 .75em/1.8 var(--mono, monospace);
letter-spacing: .02em;
text-align: center;
color: currentColor; /* hérite de la couleur du li */
background: transparent;
}
/* ── Listes imbriquées ── */
[class*="wp-block-wf-"] ul ul,
[class*="wp-block-wf-"] ol ul {
margin-top: .35em;
margin-bottom: 0;
}
[class*="wp-block-wf-"] ul ul li::before {
width: 4px;
height: 4px;
background: var(--mt, #7a7268); /* puce secondaire plus discrète */
}
/* ═══════════════════════════════════════════════════════════════
20. ARTICLE (single.php)
En-tête, colonne de lecture, rythme vertical, tableaux, figures,
pied d'article et articles liés.
── OÙ MODIFIER ──
Tout se règle depuis le bloc « RÉGLAGES » ci-dessous. Change une
variable, l'effet se propage sur toute la page article.
── PORTÉE ──
Scope unique : .wf-article, posé par single.php sur .
Les pages (page.php), l'accueil, le footer et les blocs wf/* ne
sont JAMAIS touchés par cette section.
Le conteneur de contenu porte aussi .entry-content : l'article
hérite donc gratuitement de la section 18 (paragraphes, citations,
liens, emphases, séparateurs). Ici on ajoute seulement ce que la
section 18 ne couvre pas : mise en page, titres, listes, tableaux,
figures.
── CONTRAT DE LARGEUR ──
Les enfants DIRECTS de .wf-article-content sont contraints :
(défaut) → --wf-art-measure colonne de lecture, centrée
.alignwide → --wf-art-wide images, tableaux, blocs larges
.alignfull → bord à bord covers, bandeaux pleine largeur
Ces deux classes sont posées par Gutenberg quand on choisit
« Large » ou « Pleine largeur » dans la barre d'outils du bloc.
Le conteneur n'a volontairement PAS de max-width : ce sont les
enfants qui se contraignent, sinon .alignfull ne pourrait pas
s'échapper.
── NOTE : le reset ──
Le reset (l. 66) applique margin: 0 à tout. C'est pourquoi le
rythme vertical est reconstruit ici à la main, via `> * + *`.
════════════════════════════════════════════════════════════════ */
/* ── RÉGLAGES ── */
.wf-article {
/* Largeurs */
--wf-art-measure: 680px; /* colonne de lecture (~78 signes) */
--wf-art-wide: 1080px; /* blocs « Large » */
/* Texte */
--wf-art-size: 17px; /* taille de base du corps d'article */
/* Rythme vertical entre blocs */
--wf-art-flow: 28px; /* espace par défaut */
--wf-art-flow-md: 44px; /* avant un h3 */
--wf-art-flow-lg: 68px; /* avant un h2 (nouvelle section) */
/* Respiration de la page */
--wf-art-top: 72px; /* au-dessus de l'en-tête */
--wf-art-bottom: 120px; /* sous le dernier bloc */
}
@media (max-width: 600px) {
.wf-article {
--wf-art-size: 16px;
--wf-art-flow: 22px;
--wf-art-flow-md: 34px;
--wf-art-flow-lg: 48px;
--wf-art-top: 40px;
--wf-art-bottom: 72px;
}
}
.wf-article {
padding-bottom: var(--wf-art-bottom);
}
/* ───────────────────────────────────────────────
En-tête d'article
─────────────────────────────────────────────── */
/* ── Mode TEXTE (pas d'image mise en avant) ──
L'en-tête reste sur le fond kraft, dans la colonne de lecture. */
.wf-article-head--plain .wf-article-head-inner {
max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
margin: 0 auto;
padding: var(--wf-art-top) var(--pad) 0;
}
/* Catégorie - chip mono, langage des labels wireframe */
.wf-article-cat {
display: inline-block;
padding: 5px 11px;
border: 1px solid var(--bds);
border-radius: var(--r);
font: 500 10px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tx);
transition: background .2s, color .2s;
}
.wf-article-cat:hover {
background: var(--acc);
border-color: var(--acc);
}
.wf-article-title {
margin-top: 26px;
font-size: clamp(2rem, 1.25rem + 3.4vw, 3.5rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -.03em;
text-wrap: balance;
}
/* Chapô - reprend l'extrait manuel de l'article */
.wf-article-lead {
margin-top: 22px;
font-size: 1.24rem;
line-height: 1.5;
color: var(--mt);
text-wrap: pretty;
}
/* Ligne de méta - date · auteur · temps de lecture */
.wf-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 34px;
padding-top: 15px;
border-top: 1px solid var(--bd);
font: 400 11px/1.4 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.wf-article-meta-sep {
opacity: .5;
}
/* ───────────────────────────────────────────────
HERO SUPERPOSÉ (image mise en avant présente)
Cover et titre ne forment qu'un bloc : l'image occupe
toute la largeur sous la navbar, le titre est posé
dessus, sous un voile dégradé qui garantit le contraste
quelle que soit la photo.
Hauteur bornée par clamp() : jamais moins de 400px
(sinon le titre étouffe), jamais plus de 660px ni de
62vh (sinon le hero mange tout l'écran).
─────────────────────────────────────────────── */
.wf-article-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: clamp(400px, 62vh, 660px);
overflow: hidden;
background: var(--adk); /* repli tant que l'image charge */
}
.wf-article-hero-media {
position: absolute;
inset: 0;
}
.wf-article-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Voile dégradé : dense en bas où vit le texte, transparent en haut
pour ne pas écraser l'image. */
.wf-article-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(12, 10, 8, .90) 0%,
rgba(12, 10, 8, .62) 34%,
rgba(12, 10, 8, .20) 66%,
rgba(12, 10, 8, .04) 100%
);
}
/* Titre masqué : le hero se réduit à une image de tête. Moins haut,
voile plus léger — il ne porte plus qu'une puce et une ligne de méta. */
.wf-article-hero--bare {
min-height: clamp(280px, 42vh, 440px);
}
.wf-article-hero--bare::after {
background: linear-gradient(
to top,
rgba(12, 10, 8, .78) 0%,
rgba(12, 10, 8, .34) 42%,
rgba(12, 10, 8, .02) 82%
);
}
.wf-article-hero .wf-article-head-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: calc(var(--wf-art-wide) + var(--pad) * 2);
margin: 0 auto;
padding: 0 var(--pad) 52px;
color: #fff;
}
/* ── Inversions clair-sur-sombre ── */
.wf-article-hero .wf-article-cat {
border-color: rgba(255, 255, 255, .55);
background: rgba(0, 0, 0, .28);
color: #fff;
}
.wf-article-hero .wf-article-cat:hover {
background: var(--acc);
border-color: var(--acc);
color: var(--tx);
}
.wf-article-hero .wf-article-title {
max-width: 880px;
color: #fff;
text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}
.wf-article-hero .wf-article-lead {
max-width: 620px;
color: rgba(255, 255, 255, .82);
}
.wf-article-hero .wf-article-meta {
margin-top: 28px;
border-top-color: rgba(255, 255, 255, .28);
color: rgba(255, 255, 255, .78);
}
/* Le hero est collé sous la navbar : le contenu n'a plus besoin
du grand écart réservé à l'en-tête texte. */
.wf-article--hero .wf-article-content {
margin-top: 56px;
}
/* Titre ET cover masqués : l'article démarre sur son contenu,
qui récupère la respiration du haut de page. */
.wf-article--no-head .wf-article-content {
margin-top: var(--wf-art-top);
}
/* ───────────────────────────────────────────────
Corps de l'article - contrat de largeur
─────────────────────────────────────────────── */
/* Le conteneur reprend EXACTEMENT la géométrie de .container
(max-width --max + padding --pad, l. 96). Ce n'est pas cosmétique :
les blocs wf/* de section embarquent leur propre compensation pleine
largeur, calculée pour ce parent précis —
margin-left: calc(-1 * (max(0px, (100vw - --max) / 2) + --pad))
(voir blocks/wf-container/style.css). Dans un conteneur sans
max-width, ce calcul dérape et décale les blocs vers la gauche.
On leur rend le contexte attendu plutôt que de lutter contre eux. */
.wf-article-content {
max-width: var(--wf-max-width, var(--max));
margin-top: 64px;
margin-inline: auto;
padding: 0 var(--pad);
font-size: var(--wf-art-size);
}
/* ── BLOCS DE SECTION wf/* ──
Sections autonomes : padding vertical propre, conteneur interne
1240px, parfois compensation pleine largeur. On les EXCLUT de la
colonne de lecture et on ne touche NI à leur largeur NI à leurs
marges — leur feuille de style fait déjà le travail.
wf-titre n'y figure pas volontairement : c'est un bloc de texte
(aucun padding, simple margin-bottom), il reste dans la colonne.
Cette liste est reprise à l'identique dans la règle de rythme
vertical plus bas : garder les deux synchronisées. */
/* Par défaut : colonne de lecture centrée */
.wf-article-content > *:not(
.wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
.wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
.wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
) {
max-width: var(--wf-art-measure);
margin-inline: auto;
}
/* « Large » depuis l'éditeur */
.wf-article-content > .alignwide {
max-width: var(--wf-art-wide);
}
/* « Pleine largeur » : même formule de compensation que les blocs
wf/*, puisque le conteneur a désormais un max-width. */
.wf-article-content > .alignfull {
width: 100vw;
max-width: none;
margin-inline: calc(-1 * (max(0px, (100vw - var(--wf-max-width, var(--max))) / 2) + var(--pad)));
}
/* Un groupe pleine largeur s'étend bord à bord, mais son CONTENU
reste dans la grille — sinon le texte traverse tout l'écran.
En :where() pour que tout réglage d'espacement fait dans l'éditeur
(padding du bloc, largeur d'un enfant) reprenne la main. */
:where(.wf-article-content > .alignfull.wp-block-group) {
padding-inline: var(--pad);
}
:where(.wf-article-content > .alignfull.wp-block-group > *) {
max-width: var(--wf-art-wide);
margin-inline: auto;
}
/* Rythme vertical (le reset a mis toutes les marges à 0) */
.wf-article-content > * + * {
margin-top: var(--wf-art-flow);
}
/* Les blocs de section portent déjà leur propre padding vertical : y
ajouter le flux créerait un double espace. Liste identique à celle de
la colonne de lecture ci-dessus.
wf-bandeau2 y figure : c'est un bandeau collant pleine largeur, il se
pose contre la navbar et n'a pas à recevoir la respiration du flux de
lecture. (Il en avait été sorti pour protéger un `margin: -40px 0` qui
n'existe plus — le couple padding/marge négative a été supprimé.)
:where() plutôt qu'un sélecteur nu : à spécificité nulle, un bloc qui
déclare ses propres marges reprend toujours la main sans !important. */
:where(
.wf-article-content > * + :is(
.wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
.wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
.wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
),
.wf-article-content > :is(
.wp-block-wf-container, .wp-block-wf-cover, .wp-block-wf-features,
.wp-block-wf-split, .wp-block-wf-cta, .wp-block-wf-accordeon,
.wp-block-wf-bandeau2, .wp-block-wf-corners, .wp-block-wf-cards
) + *
) {
margin-top: 0;
}
.wf-article-content > * + :is(h2, .wp-block-heading.h2) {
margin-top: var(--wf-art-flow-lg);
}
.wf-article-content > * + :is(h3, h4, h5, h6) {
margin-top: var(--wf-art-flow-md);
}
/* Les blocs larges et pleine largeur respirent davantage */
.wf-article-content > * + :is(.alignwide, .alignfull) {
margin-top: calc(var(--wf-art-flow) * 1.6);
}
.wf-article-content > :is(.alignwide, .alignfull) + * {
margin-top: calc(var(--wf-art-flow) * 1.6);
}
/* ───────────────────────────────────────────────
Échelle de titres - scope article uniquement
(la section 18 laisse volontairement h1-h6 de côté)
─────────────────────────────────────────────── */
.wf-article-content :is(h2, h3, h4, h5, h6) {
font-weight: 600;
letter-spacing: -.015em;
text-wrap: balance;
}
/* h2 = nouvelle section. Le filet reprend le langage de .wf-sec. */
.wf-article-content h2 {
padding-top: 22px;
border-top: 1px solid var(--bd);
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
line-height: 1.15;
}
.wf-article-content h3 {
font-size: clamp(1.18rem, 1.05rem + .55vw, 1.38rem);
line-height: 1.25;
}
.wf-article-content h4 {
font-size: 1.06rem;
line-height: 1.3;
}
.wf-article-content :is(h5, h6) {
font: 500 11px/1.4 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mt);
}
/* Un titre suivi immédiatement de son texte reste soudé */
.wf-article-content > :is(h2, h3, h4, h5, h6) + * {
margin-top: .7em;
}
/* ───────────────────────────────────────────────
Listes
La section 19 ne couvre que les blocs wf/*, pas
le contenu d'article. Même dessin de puces.
─────────────────────────────────────────────── */
.wf-article-content :is(ul, ol) {
padding-left: 0;
list-style: none;
}
.wf-article-content ul li {
position: relative;
padding-left: 18px;
margin-bottom: .5em;
line-height: var(--wf-p-leading);
}
.wf-article-content ul li::before {
content: '';
position: absolute;
left: 2px;
top: .62em;
width: 6px;
height: 6px;
border-radius: 10px;
background: currentColor;
}
.wf-article-content ol {
counter-reset: wf-art-list;
}
.wf-article-content ol li {
position: relative;
padding-left: 2.2em;
margin-bottom: .5em;
line-height: var(--wf-p-leading);
counter-increment: wf-art-list;
}
.wf-article-content ol li::before {
content: counter(wf-art-list) '.';
position: absolute;
left: 0;
top: 0;
width: 1.6em;
font: 500 .8em/2 var(--mono);
letter-spacing: .02em;
color: var(--mt);
}
.wf-article-content li:last-child {
margin-bottom: 0;
}
.wf-article-content :is(ul, ol) :is(ul, ol) {
margin-top: .4em;
margin-bottom: 0;
}
.wf-article-content :is(ul, ol) ul li::before {
width: 4px;
height: 4px;
background: var(--mt);
}
/* ───────────────────────────────────────────────
Tableaux - core/table
─────────────────────────────────────────────── */
.wf-article-content .wp-block-table {
overflow-x: auto; /* le tableau scrolle, jamais la page */
}
.wf-article-content table {
width: 100%;
border-collapse: collapse;
font-size: .95em;
}
.wf-article-content th {
padding: 0 14px 11px 0;
border-bottom: 1.5px solid var(--bds);
font: 500 10px/1.4 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
text-align: left;
color: var(--mt);
}
.wf-article-content td {
padding: 13px 14px 13px 0;
border-bottom: 1px solid var(--bd);
vertical-align: top;
}
.wf-article-content :is(th, td):last-child {
padding-right: 0;
}
.wf-article-content tbody tr:last-child td {
border-bottom: 1.5px solid var(--bds);
}
.wf-article-content .wp-block-table figcaption {
margin-top: 12px;
}
/* ───────────────────────────────────────────────
Images & figures - core/image, core/gallery, core/embed
─────────────────────────────────────────────── */
.wf-article-content :is(img, video, iframe) {
max-width: 100%;
height: auto;
border-radius: var(--r);
}
.wf-article-content figcaption {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--bd);
font: 400 11px/1.5 var(--mono);
letter-spacing: .04em;
color: var(--mt);
}
/* Une figure pleine largeur colle ses légendes à la grille de lecture */
.wf-article-content > .alignfull figcaption {
max-width: var(--wf-art-measure);
margin-inline: auto;
padding-inline: var(--pad);
}
/* Bloc code */
.wf-article-content .wp-block-code {
padding: 18px 20px;
background: var(--surf);
border: 1px solid var(--bd);
border-radius: var(--r);
overflow-x: auto;
}
.wf-article-content .wp-block-code code {
padding: 0;
background: none;
border: 0;
font-size: .86em;
line-height: 1.6;
}
/* ───────────────────────────────────────────────
Pied d'article - étiquettes & retour catégorie
─────────────────────────────────────────────── */
/* Le filet est tracé par ::before, en retrait du padding, pour
s'aligner exactement sur la colonne de texte. Posé sur la boîte,
un border-top déborderait de var(--pad) de chaque côté. */
.wf-article-foot {
position: relative;
max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
margin: 72px auto 0;
padding: 30px var(--pad) 0;
}
.wf-article-foot::before {
content: '';
position: absolute;
top: 0;
left: var(--pad);
right: var(--pad);
border-top: 1.5px solid var(--bds);
}
.wf-article-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.wf-article-tags-label {
margin-right: 4px;
font: 400 10px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mt);
}
.wf-tag-chip {
padding: 5px 10px;
border: 1px solid var(--bd);
border-radius: var(--r);
font: 400 10.5px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tx);
transition: background .2s, border-color .2s;
}
.wf-tag-chip:hover {
background: var(--surf);
border-color: var(--bds);
}
.wf-article-back {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 30px;
font: 400 11px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
transition: color .2s;
}
.wf-article-back:hover {
color: var(--tx);
}
.wf-article-back-arrow {
display: inline-block;
transition: transform .2s;
}
.wf-article-back:hover .wf-article-back-arrow {
transform: translateX(-4px);
}
/* ───────────────────────────────────────────────
Articles liés
─────────────────────────────────────────────── */
.wf-article-related {
position: relative;
max-width: calc(var(--wf-art-wide) + var(--pad) * 2);
margin: 100px auto 0;
padding: 30px var(--pad) 0;
}
.wf-article-related::before {
content: '';
position: absolute;
top: 0;
left: var(--pad);
right: var(--pad);
border-top: 1.5px solid var(--bds);
}
.wf-related-title {
font: 500 11px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mt);
}
.wf-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
margin-top: 28px;
}
.wf-related-card {
display: block;
}
.wf-related-thumb {
aspect-ratio: 3 / 2;
background: var(--surf);
border: 1px solid var(--bd);
border-radius: var(--r);
overflow: hidden;
}
.wf-related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.wf-related-card:hover .wf-related-thumb img {
transform: scale(1.03);
}
.wf-related-cat {
display: block;
margin-top: 14px;
font: 400 10px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mt);
}
.wf-related-name {
margin-top: 8px;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
transition: color .2s;
}
.wf-related-card:hover .wf-related-name {
color: var(--wf-red);
}
.wf-related-date {
display: block;
margin-top: 8px;
font: 400 10px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
}
/* ───────────────────────────────────────────────
Commentaires
─────────────────────────────────────────────── */
.wf-article-comments {
position: relative;
max-width: calc(var(--wf-art-measure) + var(--pad) * 2);
margin: 90px auto 0;
padding: 30px var(--pad) 0;
}
.wf-article-comments::before {
content: '';
position: absolute;
top: 0;
left: var(--pad);
right: var(--pad);
border-top: 1px solid var(--bd);
}
/* ───────────────────────────────────────────────
Responsive
─────────────────────────────────────────────── */
@media (max-width: 860px) {
.wf-related-grid { grid-template-columns: repeat(2, 1fr); }
.wf-related-grid > :nth-child(3) { display: none; }
}
@media (max-width: 560px) {
.wf-related-grid { grid-template-columns: 1fr; }
.wf-related-grid > :nth-child(3) { display: block; }
.wf-article-lead { font-size: 1.05rem; line-height: 1.55; }
.wf-article-content { margin-top: 40px; }
/* Hero plus court sur mobile : l'image reste lisible sans
repousser le premier paragraphe hors de l'écran.
svh et non vh : sans ça, la hauteur se calcule sur un viewport
barre d'URL rétractée, et le hero se met à sauter au scroll. */
.wf-article-hero { min-height: clamp(300px, 58svh, 440px); }
.wf-article-hero .wf-article-head-inner { padding-bottom: 28px; }
.wf-article--hero .wf-article-content { margin-top: 36px; }
/* Le chapô posé sur la photo est le premier à devenir illisible :
on renforce le voile sous lui et on limite la mesure, sinon il
s'étale sur six lignes au ras du bas de l'image. */
.wf-article-hero::after {
background: linear-gradient(
to top,
rgba(12, 10, 8, .94) 0%,
rgba(12, 10, 8, .80) 40%,
rgba(12, 10, 8, .38) 72%,
rgba(12, 10, 8, .08) 100%
);
}
.wf-article-hero .wf-article-lead {
margin-top: 14px;
color: rgba(255, 255, 255, .88);
}
/* La ligne de méta tenait sur trois lignes à cause des séparateurs. */
.wf-article-title { margin-top: 18px; }
.wf-article-meta { margin-top: 20px; gap: 6px; font-size: 10px; }
.wf-article-meta-sep { opacity: .35; }
}
/* ───────────────────────────────────────────────
Blocs Gutenberg par défaut
Les blocs core n'utilisent aucun style du thème :
WordPress leur applique son propre theme.json (boutons
gris anthracite, etc.). On les raccroche ici aux tokens
du wireframe.
─────────────────────────────────────────────── */
/* ── Boutons - core/button ──
Le noir par défaut vient de :root :where(.wp-element-button)
généré par WordPress. On reprend le dessin de .btn (l. 616).
Spécificité : sélecteur à 2 classes, il passe devant le style
core. Les :not() laissent la main dès que tu choisis une
couleur dans l'éditeur (WP ajoute alors has-background /
has-text-color) : ton réglage gagne toujours.
`.stlh-content` accompagne `.wf-article` : l'accueil streaming
pose ses blocs Gutenberg dans ce conteneur-là, jamais dans un
article. Sans lui, un bouton posé sur l'accueil retombait sur
le gris anthracite de WordPress. */
.wf-article .wp-block-buttons,
.stlh-content .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.wf-article .wp-block-button__link,
.stlh-content .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 22px;
border: 1.5px solid var(--bds);
border-radius: var(--r);
font: 500 14px/1 var(--sans);
transition: background .15s, border-color .15s, color .15s;
}
/* Remplissage par défaut : encre du thème, texte papier */
.wf-article .wp-block-button__link:not(.has-background),
.stlh-content .wp-block-button__link:not(.has-background) {
background: var(--tx);
}
.wf-article .wp-block-button__link:not(.has-text-color),
.stlh-content .wp-block-button__link:not(.has-text-color) {
color: var(--bg);
}
.wf-article .wp-block-button__link:not(.has-background):hover,
.stlh-content .wp-block-button__link:not(.has-background):hover {
background: var(--bds);
border-color: var(--bds);
}
/* Variante « Contour » de Gutenberg */
.wf-article .is-style-outline .wp-block-button__link:not(.has-background),
.stlh-content .is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.wf-article .is-style-outline .wp-block-button__link:not(.has-text-color),
.stlh-content .is-style-outline .wp-block-button__link:not(.has-text-color) {
color: var(--tx);
}
.wf-article .is-style-outline .wp-block-button__link:not(.has-background):hover,
.stlh-content .is-style-outline .wp-block-button__link:not(.has-background):hover {
background: var(--surf);
}
/* Un bouton ne doit pas hériter du soulignement des liens (section 18) */
.wf-article .wp-block-button__link,
.stlh-content .wp-block-button__link {
border-bottom-width: 1.5px;
}
/* ── Lettrine - core/paragraph « Lettrine » ──
Le défaut de WordPress est font-size:8.4em / font-weight:100.
Sur Space Grotesk, une lettre étroite (I, l, T) devient un trait
vertical fin qu'on confond avec un filet de citation. On repasse
sur une lettrine typographique : plus petite, pleine, calée sur
les trois premières lignes.
Le sélecteur reprend la forme du core (:not(:focus)) pour passer
devant lui dans la cascade. */
.wf-article-content .has-drop-cap:not(:focus):first-letter {
float: left;
margin: .02em .1em 0 0;
font-size: 3.5em;
font-weight: 600;
line-height: .82;
color: var(--tx);
}
/* Le pseudo-élément que le core utilise pour corriger l'alignement */
.wf-article-content .has-drop-cap:not(:focus)::after {
content: none;
}
/* ── Espaceur - core/spacer ──
Le bloc porte déjà sa hauteur : la marge de flux ferait double. */
.wf-article-content > .wp-block-spacer,
.wf-article-content > .wp-block-spacer + * {
margin-top: 0;
}
/* ── Séparateur - core/separator ──
On rend au bloc les marges prévues par la section 18, que le
flux générique écrasait. */
.wf-article-content > :is(hr, .wp-block-separator),
.wf-article-content > :is(hr, .wp-block-separator) + * {
margin-top: 2em;
}
/* ── Média & texte - core/media-text ── */
.wf-article-content .wp-block-media-text {
gap: 0;
}
.wf-article-content .wp-block-media-text__media img {
border-radius: var(--r);
}
.wf-article-content .wp-block-media-text__content {
padding: 0 0 0 32px;
}
.wf-article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
padding: 0 32px 0 0;
}
@media (max-width: 600px) {
.wf-article-content .wp-block-media-text__content,
.wf-article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
padding: 22px 0 0;
}
}
/* ── Colonnes - core/columns ── */
.wf-article-content .wp-block-columns {
gap: var(--gap);
}
/* ── Cover - core/cover ── */
.wf-article-content .wp-block-cover {
border-radius: var(--r);
overflow: hidden;
}
/* ── Galerie - core/gallery ── */
.wf-article-content .wp-block-gallery {
gap: var(--gap);
}
/* ── Embeds - core/embed ── */
.wf-article-content .wp-block-embed__wrapper {
position: relative;
}
.wf-article-content .wp-block-embed iframe {
width: 100%;
border-radius: var(--r);
}
/* ── Placeholder d'article lié sans image ──
Reprend la convention .wf-img (l. 209) : fond papier,
croix diagonale, étiquette mono. */
.wf-related-ph {
position: absolute;
inset: 0;
background: var(--surf);
}
.wf-related-ph svg {
width: 100%;
height: 100%;
display: block;
}
.wf-related-ph line {
stroke: var(--bd);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.wf-related-ph-lbl {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 3px 9px;
background: var(--surf);
border: 1px solid var(--bd);
border-radius: 2px;
font: 400 9.5px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
white-space: nowrap;
}
/* .wf-related-thumb doit devenir le repère du placeholder absolu */
.wf-related-thumb {
position: relative;
}
/* ═══════════════════════════════════════════════════════════════
21. COMMENTAIRES
Liste des commentaires et formulaire de réponse.
── PORTÉE ──
Scope .wf-article, comme la section 20 : les pages ne sont pas
touchées. Le markup vient du walker par défaut de WordPress
(comments.php) — d'où les noms de classes en anglais, qu'il ne
faut PAS renommer, ils sont imposés par le core.
── OÙ MODIFIER ──
Les champs de formulaire partagent le bloc « CHAMPS » ci-dessous.
════════════════════════════════════════════════════════════════ */
/* ── RÉGLAGES ── */
.wf-article {
--wf-field-bg: var(--surf);
--wf-field-bd: var(--bd);
--wf-field-bd-on: var(--bds);
--wf-field-pad: 12px 14px;
--wf-field-radius: var(--r);
}
/* ───────────────────────────────────────────────
Titres de section
─────────────────────────────────────────────── */
.wf-article-comments #comments-title,
.wf-article-comments .comment-reply-title {
font: 500 11px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mt);
}
.wf-article-comments #comments-title span {
color: var(--tx);
}
/* Lien « Annuler la réponse » */
.wf-article-comments #cancel-comment-reply-link {
margin-left: 10px;
font: 400 10px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--wf-red);
}
/* ───────────────────────────────────────────────
Liste des commentaires
─────────────────────────────────────────────── */
.wf-article-comments .commentlist {
margin-top: 26px;
padding: 0;
list-style: none;
}
.wf-article-comments .commentlist li.comment {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--bd);
list-style: none;
}
.wf-article-comments .commentlist > li.comment:last-child {
margin-bottom: 0;
}
/* Réponses imbriquées - décalage + filet vertical */
.wf-article-comments .commentlist .children {
margin: 24px 0 0 0;
padding-left: 22px;
border-left: 2px solid var(--bd);
list-style: none;
}
.wf-article-comments .commentlist .children li.comment:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* En-tête d'un commentaire */
.wf-article-comments .comment-author {
display: flex;
align-items: center;
gap: 11px;
}
.wf-article-comments .comment-author .avatar {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--bd);
}
.wf-article-comments .comment-author .fn {
font-size: .95rem;
font-weight: 600;
font-style: normal;
letter-spacing: -.01em;
}
.wf-article-comments .comment-author .says {
display: none; /* « dit : » — bruit hérité du core */
}
.wf-article-comments .comment-meta {
margin-top: 8px;
font: 400 10px/1.4 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
}
.wf-article-comments .comment-meta a {
color: inherit;
border-bottom: 0;
}
.wf-article-comments .comment-body > p {
margin: 12px 0 0;
line-height: var(--wf-p-leading);
}
.wf-article-comments .comment-awaiting-moderation {
display: inline-block;
margin-top: 10px;
padding: 4px 9px;
background: var(--acc);
border-radius: 2px;
font: 400 10px/1.4 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tx);
}
/* Lien « Répondre » */
.wf-article-comments .reply {
margin-top: 14px;
}
.wf-article-comments .comment-reply-link {
display: inline-block;
padding: 5px 11px;
border: 1px solid var(--bd);
border-radius: var(--r);
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
transition: background .2s, border-color .2s, color .2s;
}
.wf-article-comments .comment-reply-link:hover {
background: var(--surf);
border-color: var(--bds);
color: var(--tx);
}
/* Navigation entre pages de commentaires */
.wf-article-comments :is(#comment-nav-above, #comment-nav-below) {
display: flex;
justify-content: space-between;
gap: 16px;
margin: 20px 0;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.wf-article-comments .assistive-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wf-article-comments .nocomments {
margin-top: 18px;
font: 400 11px/1.4 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
}
/* ───────────────────────────────────────────────
Formulaire
─────────────────────────────────────────────── */
.wf-article-comments .comment-respond {
margin-top: 44px;
padding-top: 30px;
border-top: 1px solid var(--bd);
}
.wf-article-comments .commentlist + .comment-respond {
margin-top: 40px;
}
.wf-article-comments .comment-form {
margin-top: 22px;
}
/* Notes d'intro (« Connecté en tant que… », champs requis) */
.wf-article-comments :is(.comment-notes, .logged-in-as, .comment-form-cookies-consent label) {
font: 400 11px/1.6 var(--mono);
letter-spacing: .04em;
color: var(--mt);
}
.wf-article-comments .comment-form > p {
margin: 0 0 16px;
}
.wf-article-comments .comment-form label {
display: block;
margin-bottom: 7px;
font: 500 10px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mt);
}
.wf-article-comments .required {
color: var(--wf-red);
}
/* ── CHAMPS ── */
.wf-article-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
width: 100%;
padding: var(--wf-field-pad);
background: var(--wf-field-bg);
border: 1.5px solid var(--wf-field-bd);
border-radius: var(--wf-field-radius);
color: var(--tx);
font: 400 15px/1.5 var(--sans);
transition: border-color .2s, background .2s;
}
.wf-article-comments :is(input, textarea)::placeholder {
color: var(--mt);
opacity: .8;
}
.wf-article-comments :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
outline: none;
background: var(--bg);
border-color: var(--wf-field-bd-on);
}
.wf-article-comments textarea {
min-height: 150px;
resize: vertical;
}
/* Auteur / e-mail / site sur une même ligne en grand écran */
@media (min-width: 700px) {
.wf-article-comments .comment-form {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 var(--gap);
}
.wf-article-comments :is(.comment-notes, .comment-form-comment,
.comment-form-cookies-consent, .form-submit) {
grid-column: 1 / -1;
}
}
/* Case à cocher RGPD */
.wf-article-comments .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 10px;
}
.wf-article-comments .comment-form-cookies-consent input {
margin-top: 3px;
accent-color: var(--tx);
flex-shrink: 0;
}
.wf-article-comments .comment-form-cookies-consent label {
margin-bottom: 0;
text-transform: none;
letter-spacing: .04em;
}
/* Bouton d'envoi - reprend .btn-fill */
.wf-article-comments .form-submit {
margin-bottom: 0;
}
.wf-article-comments input[type="submit"] {
padding: 12px 26px;
background: var(--tx);
border: 1.5px solid var(--tx);
border-radius: var(--r);
color: var(--bg);
font: 500 12px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.wf-article-comments input[type="submit"]:hover {
background: var(--bds);
border-color: var(--bds);
}
/* ═══════════════════════════════════════════════════════════════
22. ACCUEIL STREAMING
Mise en forme de page-accueil-streaming.php.
── PORTÉE ──
Tous les sélecteurs sont préfixés .stlh- et vivent sous
.stlh-home. Aucune autre page du site ne peut être touchée.
── LE HERO ──
Un mur d'affiches presque éteint, et un faisceau de projecteur
qui le rallume là où passe le curseur. Deux techniques
superposées, dans cet ordre de préférence :
· backdrop-filter + mask → le faisceau réveille vraiment
les couleurs des affiches (navigateurs récents) ;
· dégradé radial en mix-blend-mode: screen → une nappe de
lumière chaude, partout ailleurs.
Sans JavaScript, le faisceau balaie le mur tout seul.
La position vient de --stlh-bx / --stlh-by (script.js).
── STRUCTURE ──
22.1 Ossature & titres de section
22.2 Hero — décors (mur, faisceau, grain, vignettage)
22.3 Hero — contenu (titre, recherche, boutons, bandeau)
22.4 Rails d'affiches (reprendre + catalogue)
22.5 Contenu éditable (Gutenberg)
22.6 Derniers articles
22.7 Genres
22.8 Rappel des pages
22.9 Responsive & accessibilité
════════════════════════════════════════════════════════════════ */
/* Position du faisceau. Déclarées via @property pour être
interpolables : c'est ce qui rend le balayage automatique fluide
quand aucune souris ne pilote le hero. */
@property --stlh-bx { syntax: ''; inherits: true; initial-value: 50%; }
@property --stlh-by { syntax: ''; inherits: true; initial-value: 44%; }
/* ───────────────────────────────────────────────
22.1 · Ossature & titres de section
─────────────────────────────────────────────── */
.stlh-home {
/* Réglages locaux : un seul endroit pour respirer plus ou moins. */
--stlh-gap: 20px;
--stlh-section: 84px;
--stlh-ink: #f4f0e8; /* encre du hero, sur fond sombre */
--stlh-dark: #14120f;
--stlh-beam-r: clamp(200px, 26vw, 380px);
}
/* Même gouttière que .container, sans en dépendre : les blocs de
section du contenu doivent pouvoir en sortir. */
.stlh-wrap {
max-width: var(--wf-max-width, var(--max));
margin: 0 auto;
padding: 0 var(--pad);
}
.stlh-section {
padding: var(--stlh-section) 0;
border-top: 1px solid var(--bd);
}
.stlh-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 20px;
margin-bottom: 34px;
}
.stlh-section-num {
width: 100%;
font: 400 10.5px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mt);
}
.stlh-section-title {
margin: 0;
font: 600 clamp(23px, 3.2vw, 38px)/1.04 var(--sans);
letter-spacing: -.025em;
text-transform: uppercase;
color: var(--tx);
}
.stlh-section-link {
margin-left: auto;
padding-bottom: 3px;
border-bottom: 1px solid var(--bd);
font: 500 11px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mt);
text-decoration: none;
transition: color .15s, border-color .15s;
}
.stlh-section-link:hover {
color: var(--tx);
border-color: var(--tx);
}
/* Placeholder partagé : reprend la convention .wf-img
(croix diagonale sur fond papier). */
.stlh-ph {
position: absolute;
inset: 0;
background: var(--surf);
}
.stlh-ph svg { width: 100%; height: 100%; display: block; }
.stlh-ph line {
stroke: var(--bd);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
/* Libellé réservé aux lecteurs d'écran (absent du reste du thème). */
.stlh-home .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ───────────────────────────────────────────────
22.2 · Hero — décors
─────────────────────────────────────────────── */
.stlh-hero {
position: relative;
isolation: isolate; /* les blend-modes restent dans le hero */
display: flex;
flex-direction: column;
justify-content: center;
min-height: min(86vh, 760px);
padding: clamp(70px, 11vh, 130px) 0 clamp(96px, 12vh, 128px);
background: var(--stlh-dark);
color: var(--stlh-ink);
}
/* ── Le calque de décor ──
C'est lui qui rogne, pas le hero : le menu de la recherche
instantanée doit pouvoir sortir par le bas sans être coupé. */
.stlh-hero-decor {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* ── Le mur d'affiches ──
Légèrement penché et débordant : on ne doit jamais voir un bord. */
.stlh-hero-wall {
position: absolute;
inset: -12% -8%;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(10px, 1.2vw, 18px);
opacity: .2;
filter: saturate(.7) contrast(1.05);
transform: rotate(-5deg) scale(1.15);
pointer-events: none;
}
.stlh-wall-row {
display: flex;
gap: clamp(10px, 1.2vw, 18px);
width: max-content;
animation: stlh-drift 110s linear infinite;
}
/* Une rangée sur deux part dans l'autre sens, à une autre vitesse :
le mur ne se lit jamais comme une seule bande qui glisse. */
.stlh-wall-row--1 {
animation-duration: 150s;
animation-direction: reverse;
}
.stlh-wall-img {
flex: none;
width: clamp(104px, 12vw, 178px);
aspect-ratio: 2 / 3;
object-fit: cover;
border-radius: var(--r);
display: block;
}
/* La rangée est écrite deux fois : à -50% elle recommence à
l'identique, la boucle est invisible. */
@keyframes stlh-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* ── Le faisceau ──
Nappe de lumière chaude, partout. */
.stlh-hero-beam {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background: radial-gradient(
circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
rgba(255, 240, 214, .26) 0%,
rgba(255, 232, 196, .13) 42%,
rgba(255, 226, 180, 0) 72%
);
/* Balayage d'attente : coupé dès que la souris prend la main. */
animation: stlh-sweep 16s ease-in-out infinite alternate;
}
.stlh-hero.is-live .stlh-hero-beam { animation: none; }
@keyframes stlh-sweep {
from { --stlh-bx: 24%; --stlh-by: 56%; }
to { --stlh-bx: 76%; --stlh-by: 36%; }
}
/* Version augmentée : le faisceau ravive réellement les couleurs du
mur au lieu de simplement l'éclairer. */
@supports (backdrop-filter: brightness(2)) or (-webkit-backdrop-filter: brightness(2)) {
.stlh-hero-beam {
/* Le filtre suffit à rallumer le mur : garder « screen » par-dessus
doublerait l'éclairage et cramerait le centre du faisceau. */
mix-blend-mode: normal;
-webkit-backdrop-filter: brightness(3.2) saturate(1.5) contrast(1.06);
backdrop-filter: brightness(3.2) saturate(1.5) contrast(1.06);
-webkit-mask-image: radial-gradient(
circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
#000 0%, rgba(0, 0, 0, .78) 44%, transparent 74%
);
mask-image: radial-gradient(
circle var(--stlh-beam-r) at var(--stlh-bx) var(--stlh-by),
#000 0%, rgba(0, 0, 0, .78) 44%, transparent 74%
);
}
}
/* ── Grain argentique ──
feTurbulence en data-URI : aucune requête, aucune image à charger.
Le décalage par paliers imite le défilement d'une pellicule. */
.stlh-hero-grain {
position: absolute;
inset: -60%;
z-index: 2;
pointer-events: none;
opacity: .2;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
animation: stlh-grain 620ms steps(1, end) infinite;
}
@keyframes stlh-grain {
0% { transform: translate3d(0, 0, 0); }
12% { transform: translate3d(-3%, -5%, 0); }
25% { transform: translate3d(-8%, 3%, 0); }
37% { transform: translate3d(4%, -6%, 0); }
50% { transform: translate3d(-2%, 7%, 0); }
62% { transform: translate3d(6%, 2%, 0); }
75% { transform: translate3d(-6%, -3%, 0); }
87% { transform: translate3d(2%, 5%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* ── Vignettage + fondus haut et bas ──
Le bas se fond vers le papier du site : la rupture sombre/clair ne
doit pas se lire comme une bordure. */
.stlh-hero-vignette {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
radial-gradient(ellipse 92% 78% at 50% 46%, transparent 38%, rgba(8, 7, 5, .78) 100%),
linear-gradient(to bottom, rgba(8, 7, 5, .72) 0%, rgba(8, 7, 5, .1) 26%, rgba(8, 7, 5, .1) 58%, rgba(8, 7, 5, .92) 100%);
}
/* ───────────────────────────────────────────────
22.3 · Hero — contenu
─────────────────────────────────────────────── */
/* Au-dessus du bandeau (z-index 4) : sans quoi celui-ci passerait
par-dessus le menu de résultats de la recherche. */
.stlh-hero-inner {
position: relative;
z-index: 5;
width: 100%;
}
.stlh-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 22px;
font: 400 10.5px/1 var(--mono);
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(244, 240, 232, .62);
}
/* Le point rouge du magnétoscope : ça tourne. */
.stlh-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wf-red);
box-shadow: 0 0 10px rgba(210, 60, 15, .9);
animation: stlh-rec 2.4s ease-in-out infinite;
}
@keyframes stlh-rec {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
.stlh-eyebrow-sep { color: rgba(244, 240, 232, .3); }
.stlh-hero-title {
position: relative;
margin: 0;
max-width: 15ch;
font: 700 clamp(42px, 8.2vw, 104px)/.92 var(--sans);
letter-spacing: -.04em;
text-transform: uppercase;
color: var(--stlh-ink);
}
/* Aberration chromatique au survol : un défaut de projection,
pas une animation permanente. */
.stlh-hero-title::before,
.stlh-hero-title::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
transition: opacity .18s;
}
.stlh-hero-title::before { color: #ff3b1f; transform: translate(-3px, 2px); }
.stlh-hero-title::after { color: #2ee6d6; transform: translate(3px, -2px); }
.stlh-hero-title:hover::before { opacity: .72; }
.stlh-hero-title:hover::after { opacity: .55; }
.stlh-hero-lede {
margin: 24px 0 0;
max-width: 54ch;
font: 300 clamp(15px, 1.5vw, 19px)/1.55 var(--sans);
color: rgba(244, 240, 232, .76);
}
/* ── Recherche ──
Le conteneur porte la largeur et sert de repère au panneau de
résultats, qui se pose juste en dessous du champ. */
.stlh-search-wrap {
position: relative;
z-index: 5;
max-width: 540px;
margin: 32px 0 0;
}
.stlh-search {
display: flex;
border: 1.5px solid rgba(244, 240, 232, .3);
border-radius: var(--r);
background: rgba(8, 7, 5, .5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
overflow: hidden;
transition: border-color .18s, box-shadow .18s;
}
.stlh-search:focus-within {
border-color: var(--acc);
box-shadow: 0 0 0 4px rgba(245, 192, 49, .14);
}
.stlh-search-input {
flex: 1;
min-width: 0;
padding: 15px 17px;
border: 0;
background: transparent;
font: 400 14px/1.2 var(--sans);
color: var(--stlh-ink);
}
.stlh-search-input:focus { outline: none; }
.stlh-search-input::placeholder { color: rgba(244, 240, 232, .45); }
.stlh-search-btn {
padding: 15px 24px;
border: 0;
background: var(--acc);
color: var(--adk);
font: 500 11px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background .15s;
}
.stlh-search-btn:hover { background: var(--stlh-ink); }
/* ── Résultats instantanés ──
Panneau posé sous le champ, alimenté par script.js
(initStreamingSearch → action AJAX stl_search du plugin). */
.stlh-search-results {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
max-height: min(58vh, 420px);
overflow-y: auto;
padding: 6px;
border: 1.5px solid rgba(244, 240, 232, .28);
border-radius: var(--r);
background: rgba(14, 12, 10, .94);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.stlh-result {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: var(--r);
color: var(--stlh-ink);
text-decoration: none;
transition: background .12s;
}
/* Une seule classe pour le survol et la navigation au clavier :
la ligne visée se signale de la même façon dans les deux cas. */
.stlh-result:hover,
.stlh-result.is-active {
background: rgba(244, 240, 232, .12);
}
.stlh-result-thumb {
flex: none;
width: 34px;
height: 50px;
border-radius: 2px;
background: rgba(244, 240, 232, .1);
object-fit: cover;
display: block;
}
.stlh-result-body { min-width: 0; }
.stlh-result-title {
display: block;
font: 500 13.5px/1.3 var(--sans);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stlh-result-meta {
display: block;
margin-top: 3px;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(244, 240, 232, .5);
}
/* Dernière ligne : « voir tous les résultats », vers le catalogue. */
.stlh-result--all {
justify-content: center;
margin-top: 4px;
border-top: 1px solid rgba(244, 240, 232, .14);
border-radius: 0 0 var(--r) var(--r);
font: 500 10.5px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--acc);
}
.stlh-search-empty {
padding: 16px 12px;
margin: 0;
font: 300 13.5px/1.5 var(--sans);
color: rgba(244, 240, 232, .6);
text-align: center;
}
/* ── Boutons ── */
.stlh-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.stlh-btn {
display: inline-block;
padding: 13px 26px;
border: 1.5px solid rgba(244, 240, 232, .38);
border-radius: var(--r);
background: transparent;
color: var(--stlh-ink);
font: 500 11px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.stlh-btn:hover {
background: var(--stlh-ink);
border-color: var(--stlh-ink);
color: var(--stlh-dark);
}
.stlh-btn--solid {
background: var(--stlh-ink);
border-color: var(--stlh-ink);
color: var(--stlh-dark);
}
.stlh-btn--solid:hover {
background: var(--acc);
border-color: var(--acc);
color: var(--adk);
}
/* ── Bandeau des derniers ajouts ──
Collé au bas du hero, il prouve d'un coup d'œil que le catalogue
bouge — sans coûter une section de plus. */
.stlh-ticker {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
border-top: 1px solid rgba(244, 240, 232, .16);
background: rgba(8, 7, 5, .55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow: hidden;
}
.stlh-ticker-label {
flex: none;
align-self: stretch;
display: flex;
align-items: center;
padding: 0 18px;
border-right: 1px solid rgba(244, 240, 232, .16);
background: var(--acc);
color: var(--adk);
font: 500 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
z-index: 1;
}
.stlh-ticker-track {
display: flex;
/* flex: none — sans ça le conteneur écraserait la piste au lieu de
la laisser déborder, et le défilement n'aurait plus de course. */
flex: none;
width: max-content;
padding: 13px 0;
animation: stlh-drift 46s linear infinite;
}
.stlh-ticker-run {
display: flex;
align-items: center;
gap: 14px;
padding-left: 14px;
}
.stlh-ticker-item {
display: inline-flex;
align-items: baseline;
gap: 7px;
font: 400 12px/1 var(--sans);
letter-spacing: .01em;
color: rgba(244, 240, 232, .82);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.stlh-ticker-item:hover { color: var(--acc); }
.stlh-ticker-year {
font: 400 10px/1 var(--mono);
color: rgba(244, 240, 232, .42);
}
.stlh-ticker-sep { color: rgba(244, 240, 232, .24); font-size: 9px; }
/* Le bandeau ne doit pas continuer à défiler pendant qu'on vise un
titre : on l'arrête au survol. */
.stlh-ticker:hover .stlh-ticker-track { animation-play-state: paused; }
/* ───────────────────────────────────────────────
22.4 · Rails d'affiches
Douze fiches dans la hauteur d'une seule rangée : c'est ce qui
permet de montrer beaucoup sans rallonger la page.
─────────────────────────────────────────────── */
.stlh-rail {
display: flex;
gap: var(--stlh-gap);
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 14px;
scrollbar-width: thin;
scrollbar-color: var(--bd) transparent;
}
.stlh-rail::-webkit-scrollbar { height: 6px; }
.stlh-rail::-webkit-scrollbar-track { background: var(--surf); border-radius: 3px; }
.stlh-rail::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.stlh-rail-item {
flex: 0 0 clamp(128px, 15vw, 176px);
scroll-snap-align: start;
text-decoration: none;
color: inherit;
}
.stlh-poster {
position: relative;
aspect-ratio: 2 / 3;
margin-bottom: 11px;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--surf);
overflow: hidden;
transition: border-color .15s, transform .18s, box-shadow .18s;
}
.stlh-rail-item:hover .stlh-poster {
border-color: var(--tx);
transform: translateY(-4px);
box-shadow: 0 10px 22px rgba(30, 27, 23, .18);
}
.stlh-poster img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stlh-poster-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 3px 8px;
border: 1px solid var(--bd);
border-radius: 2px;
background: var(--bg);
font: 400 9px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--bds);
}
/* Barre de progression, collée au bas de l'affiche. */
.stlh-poster-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: rgba(20, 18, 15, .55);
}
.stlh-poster-bar-fill {
display: block;
height: 100%;
background: var(--acc);
}
.stlh-rail-title {
margin: 0;
font: 500 13.5px/1.3 var(--sans);
color: var(--tx);
}
.stlh-rail-meta {
display: block;
margin-top: 4px;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
color: var(--mt);
}
/* La section « Reprendre » se distingue au fond, pas à la forme. */
.stlh-resume { background: var(--surf); }
/* ── Invitation (à la place du rail, quand il n'y a rien à reprendre) ──
Volontairement pas une .stlh-section : pas de grand titre, pas de
double espacement. Une bande qui informe, posée juste sous le hero,
et que le contenu suivant recouvre de son propre souffle. */
.stlh-invite { padding: 30px 0 0; }
.stlh-invite-card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 28px;
padding: 20px 24px;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--surf);
}
.stlh-invite-body { flex: 1 1 340px; }
.stlh-invite-label {
margin: 0 0 7px;
font: 400 10px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mt);
}
.stlh-invite-text {
margin: 0;
max-width: 68ch;
font: 300 14px/1.55 var(--sans);
color: var(--bds);
}
/* Ce qui est ouvert se lit avant ce qui demande un compte. */
.stlh-invite-text strong {
font-weight: 500;
color: var(--tx);
}
.stlh-invite-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.stlh-invite-btn {
display: inline-block;
padding: 11px 20px;
border: 1.5px solid var(--bds);
border-radius: var(--r);
font: 500 10.5px/1 var(--mono);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--bds);
text-decoration: none;
white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
.stlh-invite-btn:hover {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
.stlh-invite-btn--solid {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
.stlh-invite-btn--solid:hover {
background: var(--acc);
border-color: var(--acc);
color: var(--adk);
}
/* ───────────────────────────────────────────────
22.5 · Contenu éditable
La section n'est pas bornée : les blocs de section wf/* portent
déjà leur padding et leur max-width interne, ils doivent pouvoir
occuper toute la largeur.
Seuls les blocs sans gouttière à eux — texte courant, listes,
médias, timeline Streamlog — sont ramenés dans la colonne de
lecture. Une liste blanche plutôt qu'une exclusion : un bloc
inconnu passe en pleine largeur, ce qu'on attend d'un bloc de
section.
─────────────────────────────────────────────── */
.stlh-content {
padding: var(--stlh-section) 0;
}
/* Le contenu est coupé en deux autour de la timeline (voir le gabarit) :
la première moitié ne referme pas son espace, c'est la section des
articles qui suit qui pose le sien. */
.stlh-content--top { padding-bottom: 0; }
.stlh-content--rest { border-top: 1px solid var(--bd); }
/* ── Reprise d'agenda ──
Le gabarit fait remonter avec la timeline le bloc de boutons posé
juste après elle : c'est le « et ensuite ? » du calendrier (voir la
coupe dans page-accueil-streaming.php).
Il arrivait donc sans un pixel de marge : le dernier jour de la
semaine au-dessus, le filet de la section suivante en dessous. Le
bouton n'avait pas l'air de conclure la liste, il avait l'air d'être
tombé là.
On lui donne son propre palier. L'espace du BAS est un padding et
non une marge : `.stlh-content--top` ne referme pas son padding, une
marge basse sur le dernier enfant s'échapperait donc du conteneur par
fusion, et l'espace deviendrait celui de la section suivante — même
résultat à l'œil, mais impossible à relire.
Le centrage suit : aligné à gauche, le bouton se posait sous la
gouttière des dates et se lisait comme une ligne de plus du rail.
Une justification choisie dans l'éditeur (Gutenberg pose alors
is-content-justification-*) reprend la main. */
.stlh-content > .stl-timeline + .wp-block-buttons,
.stlh-content--top > .wp-block-buttons:last-child {
margin-top: calc(var(--stlh-section) * .5);
padding-bottom: calc(var(--stlh-section) * .6);
}
.stlh-content > .stl-timeline + .wp-block-buttons:not([class*="is-content-justification"]),
.stlh-content--top > .wp-block-buttons:last-child:not([class*="is-content-justification"]) {
justify-content: center;
}
.stlh-content > p,
.stlh-content > h1,
.stlh-content > h2,
.stlh-content > h3,
.stlh-content > h4,
.stlh-content > h5,
.stlh-content > h6,
.stlh-content > ul,
.stlh-content > ol,
.stlh-content > dl,
.stlh-content > pre,
.stlh-content > table,
.stlh-content > figure,
.stlh-content > blockquote,
.stlh-content > hr,
.stlh-content > .wp-block-buttons,
.stlh-content > .wp-block-columns,
.stlh-content > .wp-block-embed,
.stlh-content > .stl-timeline {
max-width: var(--wf-max-width, var(--max));
margin-left: auto;
margin-right: auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
/* Les alignements Gutenberg gardent le dernier mot. */
.stlh-content > .alignwide {
max-width: calc(var(--wf-max-width, var(--max)) + 200px);
margin-left: auto;
margin-right: auto;
}
.stlh-content > .alignfull {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* ───────────────────────────────────────────────
22.6 · Derniers articles
─────────────────────────────────────────────── */
/* Rubriques du journal : la rangée de puces qui ouvre les archives
depuis l'accueil. Reprend .stlh-genre-chip, avec un compteur. */
.stlh-rubriques {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: -14px 0 28px;
}
.stlh-rubriques-lbl {
margin-right: 6px;
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
.stlh-chip-num {
margin-left: 7px;
font: 400 10px/1 var(--mono);
color: var(--mt);
}
.stlh-genre-chip:hover .stlh-chip-num { color: var(--bg); }
.stlh-posts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--stlh-gap);
}
.stlh-post {
display: block;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .18s;
}
.stlh-post:hover {
border-color: var(--tx);
transform: translateY(-3px);
}
.stlh-post-thumb {
position: relative;
aspect-ratio: 3 / 2;
background: var(--surf);
border-bottom: 1px solid var(--bd);
overflow: hidden;
}
.stlh-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.stlh-post:hover .stlh-post-thumb img { transform: scale(1.04); }
.stlh-post-body { padding: 18px; }
.stlh-post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 10px;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.stlh-post-cat {
padding: 4px 8px;
border: 1px solid var(--bd);
border-radius: 2px;
color: var(--bds);
}
.stlh-post-read::before {
content: '· ';
color: var(--bd);
}
.stlh-post-title {
margin: 0;
font: 500 clamp(15px, 1.5vw, 18px)/1.25 var(--sans);
letter-spacing: -.01em;
color: var(--tx);
}
.stlh-post-excerpt {
margin: 14px 0 0;
font: 300 15px/1.6 var(--sans);
color: var(--bds);
}
.stlh-post-cta {
display: inline-block;
margin-top: 18px;
padding-bottom: 3px;
border-bottom: 1px solid var(--bd);
font: 500 11px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tx);
}
/* Article en vedette : toute la largeur, image et texte côte à côte. */
.stlh-post--lead {
grid-column: span 4;
display: grid;
grid-template-columns: 1.3fr 1fr;
}
.stlh-post--lead .stlh-post-thumb {
aspect-ratio: auto;
min-height: 330px;
border-bottom: 0;
border-right: 1px solid var(--bd);
}
.stlh-post--lead .stlh-post-body {
padding: 36px;
align-self: center;
}
.stlh-post--lead .stlh-post-title {
font-size: clamp(22px, 2.8vw, 34px);
line-height: 1.08;
letter-spacing: -.025em;
}
/* ───────────────────────────────────────────────
22.7 · Genres
─────────────────────────────────────────────── */
.stlh-genres {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 30px;
padding-top: 26px;
border-top: 1px solid var(--bd);
}
.stlh-genres-label {
margin-right: 6px;
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
.stlh-genre-chip {
padding: 7px 13px;
border: 1px solid var(--bd);
border-radius: 100px;
font: 400 12px/1 var(--sans);
color: var(--bds);
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.stlh-genre-chip:hover {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
/* ───────────────────────────────────────────────
22.8 · Rappel des pages
─────────────────────────────────────────────── */
.stlh-pages { background: var(--surf); }
.stlh-pages-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--stlh-gap);
margin: 0;
padding: 0;
list-style: none;
}
.stlh-page-item { margin: 0; }
.stlh-page-link {
position: relative;
display: block;
height: 100%;
padding: 24px 24px 50px;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
text-decoration: none;
transition: border-color .15s, transform .18s;
}
.stlh-page-link:hover {
border-color: var(--tx);
transform: translateY(-3px);
}
.stlh-page-num {
display: block;
margin-bottom: 13px;
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
color: var(--mt);
}
.stlh-page-label {
display: block;
font: 600 17px/1.2 var(--sans);
letter-spacing: -.015em;
text-transform: uppercase;
color: var(--tx);
}
.stlh-page-desc {
display: block;
margin-top: 10px;
font: 300 13.5px/1.55 var(--sans);
color: var(--bds);
}
.stlh-page-arrow {
position: absolute;
left: 24px;
bottom: 20px;
font-size: 17px;
color: var(--mt);
transition: transform .15s, color .15s;
}
.stlh-page-link:hover .stlh-page-arrow {
transform: translateX(5px);
color: var(--tx);
}
/* ───────────────────────────────────────────────
22.9 · Responsive & accessibilité
─────────────────────────────────────────────── */
@media (max-width: 1100px) {
.stlh-pages-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.stlh-home { --stlh-section: 62px; }
.stlh-hero { min-height: auto; }
.stlh-posts-grid { grid-template-columns: repeat(2, 1fr); }
.stlh-post--lead { grid-column: span 2; grid-template-columns: 1fr; }
.stlh-post--lead .stlh-post-thumb {
aspect-ratio: 16 / 9;
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--bd);
}
.stlh-post--lead .stlh-post-body { padding: 24px; }
.stlh-pages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.stlh-home { --stlh-section: 46px; --stlh-gap: 14px; }
/* Les boutons de l'invitation prennent toute la largeur plutôt que
de se couper en deux lignes bancales. */
.stlh-invite-card { padding: 18px; }
.stlh-invite-actions { width: 100%; }
.stlh-invite-btn { flex: 1; text-align: center; }
.stlh-search { flex-direction: column; }
.stlh-search-btn { padding: 14px; }
.stlh-hero-actions .stlh-btn { flex: 1; text-align: center; }
/* Le libellé du bandeau mange trop de place sur un petit écran. */
.stlh-ticker-label { display: none; }
.stlh-posts-grid { grid-template-columns: 1fr; }
.stlh-post--lead { grid-column: span 1; }
.stlh-pages-grid { grid-template-columns: 1fr; }
.stlh-section-link { margin-left: 0; }
}
/* Mouvement réduit : on garde le décor, on enlève tout ce qui bouge.
Le mur reste lisible, le faisceau se fige au centre. */
@media (prefers-reduced-motion: reduce) {
.stlh-wall-row,
.stlh-hero-beam,
.stlh-hero-grain,
.stlh-ticker-track,
.stlh-eyebrow-dot {
animation: none !important;
}
.stlh-post:hover,
.stlh-page-link:hover,
.stlh-rail-item:hover .stlh-poster {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════
23. ARCHIVES
Mise en forme de category.php, tag.php, archive.php, author.php
et search.php — tous rendus par template-parts/archive-shell.php.
── PORTÉE ──
Tous les sélecteurs sont préfixés .wfa- et vivent sous .wf-archive.
Aucune autre page du site ne peut être touchée.
── LE PARTI PRIS ──
Une archive n'est pas une liste, c'est un carrefour. La page est
donc bâtie en quatre temps qui répondent chacun à une question :
· l'en-tête → où suis-je, et qu'est-ce qu'il y a ici ?
· la barre → où puis-je aller sans revenir en arrière ?
· la grille → par quoi commencer ? (une vedette, puis le reste)
· le pied → et après la dernière page ?
── STRUCTURE ──
23.1 Ossature & titres de section
23.2 En-tête (fil d'Ariane, titre, compteurs)
23.3 Barre des rubriques + recherche
23.4 Chips (rubriques, sujets)
23.5 Grille & cartes
23.6 Pagination
23.7 Sujets & autres rubriques
23.8 Archive vide
23.9 Responsive & accessibilité
════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────
23.1 · Ossature & titres de section
─────────────────────────────────────────────── */
.wf-archive {
/* Réglages locaux : un seul endroit pour respirer plus ou moins. */
--wfa-gap: 20px;
--wfa-section: 74px;
}
/* Même gouttière que .container, sans en dépendre. */
.wfa-wrap {
max-width: var(--wf-max-width, var(--max));
margin: 0 auto;
padding: 0 var(--pad);
}
.wfa-section {
padding: var(--wfa-section) 0;
border-top: 1px solid var(--bd);
}
.wfa-section-head { margin-bottom: 30px; }
.wfa-section-num {
margin: 0 0 6px;
font: 400 10.5px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-section-title {
margin: 0;
font: 600 clamp(21px, 2.8vw, 32px)/1.05 var(--sans);
letter-spacing: -.025em;
text-transform: uppercase;
color: var(--tx);
}
/* Libellé réservé aux lecteurs d'écran : la règle du thème est scopée
sur .stlh-home, on la redéclare pour les archives. */
.wf-archive .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ───────────────────────────────────────────────
23.2 · En-tête
─────────────────────────────────────────────── */
.wfa-head {
padding: clamp(30px, 5vw, 58px) 0 clamp(24px, 3.5vw, 40px);
background: var(--surf);
border-bottom: 1px solid var(--bd);
}
.wfa-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-bottom: 22px;
font: 400 10.5px/1.4 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-crumbs a {
color: var(--mt);
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
.wfa-crumbs a:hover {
color: var(--tx);
border-bottom-color: var(--bd);
}
.wfa-crumbs-sep { color: var(--bd); }
.wfa-crumbs-here { color: var(--tx); }
.wfa-kicker {
margin: 0 0 10px;
font: 400 10.5px/1 var(--mono);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-title {
margin: 0;
font: 600 clamp(31px, 6vw, 64px)/1 var(--sans);
letter-spacing: -.035em;
text-transform: uppercase;
color: var(--tx);
/* Un titre de recherche ou de série peut être long et sans espace. */
overflow-wrap: anywhere;
}
.wfa-desc {
max-width: 60ch;
margin-top: 16px;
}
.wfa-desc p {
margin: 0 0 8px;
font: 300 clamp(14.5px, 1.5vw, 17px)/1.6 var(--sans);
color: var(--bds);
}
.wfa-desc p:last-child { margin-bottom: 0; }
/* Compteurs : le volume de la liste, avant de la parcourir. */
.wfa-stats {
display: flex;
flex-wrap: wrap;
gap: 14px 40px;
margin: 28px 0 0;
padding-top: 22px;
border-top: 1px solid var(--bd);
list-style: none;
}
.wfa-stat {
display: flex;
flex-direction: column;
gap: 6px;
}
.wfa-stat-num {
font: 500 clamp(18px, 2.2vw, 25px)/1 var(--sans);
letter-spacing: -.02em;
color: var(--tx);
}
.wfa-stat-lbl {
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
/* Sous-rubriques */
.wfa-children {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 24px;
}
.wfa-children-lbl {
margin-right: 4px;
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
/* ───────────────────────────────────────────────
23.3 · Barre des rubriques + recherche
Collante sous la navbar : changer de rubrique reste à un clic,
même au milieu d'une longue liste.
─────────────────────────────────────────────── */
.wfa-bar {
position: sticky;
top: var(--h-navbar, 60px);
z-index: 90;
background: var(--bg);
border-bottom: 1px solid var(--bd);
}
.wfa-bar-inner {
display: flex;
align-items: center;
gap: 16px;
padding-top: 11px;
padding-bottom: 11px;
}
.wfa-taxo {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 2px 0;
list-style: none;
/* Beaucoup de rubriques : on défile latéralement plutôt que de
casser la barre sur deux lignes et de doubler sa hauteur. */
overflow-x: auto;
scrollbar-width: none;
}
.wfa-taxo::-webkit-scrollbar { display: none; }
.wfa-taxo li { flex: 0 0 auto; }
.wfa-search {
display: flex;
flex: 0 0 auto;
border: 1px solid var(--bd);
border-radius: 100px;
background: var(--bg);
overflow: hidden;
transition: border-color .15s;
}
.wfa-search:focus-within { border-color: var(--tx); }
.wfa-search-input {
width: 165px;
padding: 8px 15px;
border: 0;
background: transparent;
font: 400 12.5px/1.2 var(--sans);
color: var(--tx);
}
.wfa-search-input:focus { outline: none; }
.wfa-search-input::placeholder { color: var(--mt); }
.wfa-search-btn {
padding: 0 15px;
border: 0;
border-left: 1px solid var(--bd);
background: var(--surf);
font: 500 12px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tx);
cursor: pointer;
transition: background .15s, color .15s;
}
.wfa-search-btn:hover {
background: var(--tx);
color: var(--bg);
}
/* ───────────────────────────────────────────────
23.4 · Chips — rubriques, sous-rubriques, sujets
─────────────────────────────────────────────── */
.wfa-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border: 1px solid var(--bd);
border-radius: 100px;
font: 400 12.5px/1 var(--sans);
color: var(--bds);
white-space: nowrap;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.wfa-chip:hover {
background: var(--surf);
border-color: var(--bds);
color: var(--tx);
}
.wfa-chip.is-active {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
.wfa-chip-num {
font: 400 10px/1 var(--mono);
color: var(--mt);
}
.wfa-chip:hover .wfa-chip-num { color: var(--bds); }
.wfa-chip.is-active .wfa-chip-num { color: rgba(242, 239, 233, .6); }
/* ───────────────────────────────────────────────
23.5 · Grille & cartes
─────────────────────────────────────────────── */
.wfa-list { padding: var(--wfa-section) 0; }
.wfa-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wfa-gap);
}
.wfa-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
overflow: hidden;
transition: border-color .15s, transform .18s;
}
.wfa-card:hover {
border-color: var(--tx);
transform: translateY(-3px);
}
.wfa-card-thumb {
position: relative;
aspect-ratio: 3 / 2;
background: var(--surf);
border-bottom: 1px solid var(--bd);
overflow: hidden;
}
.wfa-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.wfa-card:hover .wfa-card-thumb img { transform: scale(1.04); }
/* Article sans image : placeholder wireframe (convention .wf-img). */
.wfa-ph {
position: absolute;
inset: 0;
background: var(--surf);
}
.wfa-ph svg { width: 100%; height: 100%; display: block; }
.wfa-ph line {
stroke: var(--bd);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.wfa-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 18px;
}
.wfa-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 11px;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-card-cat {
padding: 4px 8px;
border: 1px solid var(--bd);
border-radius: 2px;
color: var(--bds);
transition: background .15s, color .15s, border-color .15s;
}
.wfa-card-cat:hover {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
.wfa-card-read::before {
content: '· ';
color: var(--bd);
}
.wfa-card-title {
margin: 0;
font: 500 clamp(15px, 1.5vw, 18px)/1.25 var(--sans);
letter-spacing: -.01em;
color: var(--tx);
}
.wfa-card-title a { color: inherit; }
/* La carte entière est cliquable sans envelopper son contenu dans un
lien : le pseudo-élément du titre s'étire par-dessus. Les rubriques
et les sujets repassent au-dessus (z-index) pour rester atteignables.
Voir l'en-tête de template-parts/archive-card.php. */
.wfa-card-title a::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
.wfa-card-excerpt {
margin: 12px 0 0;
font: 300 14px/1.6 var(--sans);
color: var(--bds);
}
.wfa-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--bd);
}
.wfa-card-tag {
position: relative;
z-index: 1;
padding: 4px 9px;
border: 1px solid var(--bd);
border-radius: var(--r);
font: 400 10px/1 var(--mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--mt);
transition: background .15s, color .15s, border-color .15s;
}
.wfa-card-tag:hover {
background: var(--surf);
border-color: var(--bds);
color: var(--tx);
}
/* Les rubriques doivent aussi rester cliquables sous le lien étiré. */
.wfa-card-cat { position: relative; z-index: 1; }
/* Le bloc d'étiquettes est poussé en bas : les cartes d'une même rangée
alignent leurs pieds, quelle que soit la longueur du titre. */
.wfa-card-tags { margin-top: auto; }
.wfa-card-cta {
display: inline-block;
align-self: flex-start;
margin-top: 20px;
padding-bottom: 3px;
border-bottom: 1px solid var(--bd);
font: 500 11px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tx);
}
/* Vedette : pleine largeur, image et texte côte à côte. */
.wfa-card--lead {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.25fr 1fr;
}
.wfa-card--lead .wfa-card-thumb {
aspect-ratio: auto;
min-height: 340px;
border-bottom: 0;
border-right: 1px solid var(--bd);
}
.wfa-card--lead .wfa-card-body {
padding: 34px;
justify-content: center;
}
.wfa-card--lead .wfa-card-title {
font-size: clamp(22px, 2.8vw, 34px);
line-height: 1.08;
letter-spacing: -.025em;
}
.wfa-card--lead .wfa-card-excerpt {
margin-top: 16px;
font-size: 15.5px;
}
.wfa-card--lead .wfa-card-tags { margin-top: 22px; }
/* ───────────────────────────────────────────────
23.6 · Pagination
─────────────────────────────────────────────── */
.wfa-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
margin-top: 44px;
padding-top: 24px;
border-top: 1px solid var(--bd);
}
.wfa-pagination-count {
margin: 0;
font: 400 10.5px/1 var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-pagination-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
}
.wfa-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border: 1px solid var(--bd);
border-radius: var(--r);
font: 400 12.5px/1 var(--mono);
color: var(--bds);
transition: background .15s, color .15s, border-color .15s;
}
.wfa-pagination .page-numbers:hover {
border-color: var(--tx);
color: var(--tx);
}
.wfa-pagination .page-numbers.current {
background: var(--tx);
border-color: var(--tx);
color: var(--bg);
}
.wfa-pagination .page-numbers.dots {
border-color: transparent;
color: var(--mt);
}
/* ───────────────────────────────────────────────
23.7 · Sujets & autres rubriques
─────────────────────────────────────────────── */
.wfa-topics-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wfa-others { background: var(--surf); }
.wfa-others-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wfa-gap);
margin: 0;
padding: 0;
list-style: none;
}
.wfa-other { margin: 0; }
.wfa-other-link {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 22px 22px 52px;
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--bg);
text-decoration: none;
transition: border-color .15s, transform .18s;
}
.wfa-other-link:hover {
border-color: var(--tx);
transform: translateY(-3px);
}
.wfa-other-count {
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-other-name {
font: 600 17px/1.2 var(--sans);
letter-spacing: -.015em;
text-transform: uppercase;
color: var(--tx);
}
.wfa-other-desc {
font: 300 13.5px/1.55 var(--sans);
color: var(--bds);
}
.wfa-other-latest {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--bd);
font: 300 12.5px/1.45 var(--sans);
color: var(--bds);
}
.wfa-other-latest-lbl {
display: block;
margin-bottom: 3px;
font: 400 9.5px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-other-arrow {
position: absolute;
left: 22px;
bottom: 20px;
font-size: 17px;
color: var(--mt);
transition: transform .15s, color .15s;
}
.wfa-other-link:hover .wfa-other-arrow {
transform: translateX(5px);
color: var(--tx);
}
/* ───────────────────────────────────────────────
23.8 · Archive vide
─────────────────────────────────────────────── */
.wfa-empty {
max-width: 660px;
padding: clamp(26px, 4vw, 40px);
border: 1px solid var(--bd);
border-radius: var(--r);
background: var(--surf);
}
.wfa-empty-num {
margin: 0 0 8px;
font: 400 10.5px/1 var(--mono);
letter-spacing: .18em;
color: var(--mt);
}
.wfa-empty-title {
margin: 0;
font: 600 clamp(20px, 2.6vw, 28px)/1.1 var(--sans);
letter-spacing: -.025em;
text-transform: uppercase;
color: var(--tx);
}
.wfa-empty-text {
margin: 12px 0 0;
font: 300 15px/1.6 var(--sans);
color: var(--bds);
}
.wfa-empty-search {
display: flex;
margin-top: 22px;
border: 1px solid var(--bd);
border-radius: 100px;
background: var(--bg);
overflow: hidden;
transition: border-color .15s;
}
.wfa-empty-search:focus-within { border-color: var(--tx); }
.wfa-empty-search .wfa-search-input { flex: 1; width: auto; }
.wfa-empty-last {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--bd);
}
.wfa-empty-last-lbl {
display: block;
margin-bottom: 12px;
font: 400 10px/1 var(--mono);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-empty-last ul {
margin: 0;
padding: 0;
list-style: none;
}
.wfa-empty-last li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
padding: 7px 0;
border-bottom: 1px solid var(--bd);
}
.wfa-empty-last li:last-child { border-bottom: 0; }
.wfa-empty-last a {
font: 400 14px/1.4 var(--sans);
color: var(--tx);
border-bottom: 1px solid transparent;
transition: border-color .15s;
}
.wfa-empty-last a:hover { border-bottom-color: var(--tx); }
.wfa-empty-last-date {
margin-left: auto;
font: 400 10px/1 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mt);
}
.wfa-empty-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
font: 500 11px/1 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mt);
transition: color .15s;
}
.wfa-empty-back:hover { color: var(--tx); }
/* ───────────────────────────────────────────────
23.9 · Responsive & accessibilité
─────────────────────────────────────────────── */
@media (max-width: 1100px) {
.wfa-grid { grid-template-columns: repeat(2, 1fr); }
.wfa-others-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.wf-archive { --wfa-section: 54px; }
.wfa-card--lead { grid-template-columns: 1fr; }
.wfa-card--lead .wfa-card-thumb {
aspect-ratio: 16 / 9;
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--bd);
}
.wfa-card--lead .wfa-card-body { padding: 24px; }
}
@media (max-width: 600px) {
.wf-archive { --wfa-section: 42px; --wfa-gap: 14px; }
.wfa-grid { grid-template-columns: 1fr; }
.wfa-others-grid { grid-template-columns: 1fr; }
/* La recherche passe sous les rubriques : à 4 colonnes de grille,
la garder sur la même ligne réduirait les chips à trois lettres. */
.wfa-bar-inner { flex-wrap: wrap; }
.wfa-taxo { order: 1; width: 100%; }
.wfa-search { order: 2; width: 100%; }
.wfa-search-input { flex: 1; width: auto; }
.wfa-stats { gap: 14px 26px; }
.wfa-pagination-list { margin-left: 0; }
}
/* Mouvement réduit : la page garde ses cadres, plus rien ne se déplace. */
@media (prefers-reduced-motion: reduce) {
.wfa-card:hover,
.wfa-other-link:hover { transform: none; }
.wfa-card:hover .wfa-card-thumb img { transform: none; }
.wfa-other-link:hover .wfa-other-arrow { transform: none; }
}