/* ═══════════════════════════════════════════════════════════════════════════ SOMMET LUMIÈRE — app.css (ajustements front hors theme.json ; valeurs = Figma) SOMMAIRE (tout replier : Cmd+K Cmd+0 · sauter : Cmd+F « §2.3 » ou « ▸ SMALL ») ───────────────────────────────────────────────────────────────────────────── §0 FONDATIONS ossature · container-max · has-background · boutons §1 GLOBAL (toutes les pages) §1.1 Header / nav §1.2 Launch minimal §1.3 Sélecteur de langue §1.4 Burger + backdrop §1.5 Header mobile §1.6 Footer §2 HOME §2.1 Hero §2.2 Présentation §2.3 Actualités §2.4 Grands sujets §2.5 Lieu §2.6 CTA final §3 ARTICLE single actualité + fil d'Ariane §4 PAGES TEXTE mentions légales BREAKPOINTS (marqueurs « ▸ » dans le fichier) : ▸ LARGE ≥80em (base) · ▸ MEDIUM ≤80em · ▸ SMALL ≤62em · ▸ XSMALL ≤30em Valeurs responsives (tailles, paddings, container-max-width) = theme.json › settings.custom.responsive (générées en @media par functions.php). ═══════════════════════════════════════════════════════════════════════════ */ /* #region §0 · FONDATIONS — ossature · container-max · boutons */ /* ============ Ossature standard des sections ============ section (ou header/footer) : flex column, top-center > .container-max : fill + max-width (var Figma) + padding horizontal-gap > .container-design : grille interne */ .section, .site-header, .site-footer { display: flex; flex-direction: column; align-items: center; width: 100%; } /* --container-max-width : valeurs responsives centralisées dans theme.json (settings.custom.responsive.layout), générées par functions.php comme les autres tokens. Ici on ne fait que la consommer. Large 1440px / Medium 1279 / Small 991 / Xsmall 479. */ .container-max { box-sizing: border-box; width: 100%; max-width: var(--container-max-width, 90rem); /* Large : 1440px (padding-general inclus) */ margin-inline: auto; /* centré au-delà de 1440 (décision Fred 2026-07-26, cf maquette 1920) */ padding-inline: var(--wp--preset--spacing--padding-general, 4rem); /* Large : 64px */ padding-block: 0; /* Convention DS : .container-max = largeur seule, JAMAIS de padding vertical. Le rythme vertical vient des sections / .container-design. */ } .container-design { width: 100%; } /* Gras du texte : Akkurat n'a que 300 et 700. Le défaut navigateur `bolder` résout à 400 depuis un corps en 300 → retombe sur 300 (pas de gras visible). On force 700. */ strong, b { font-weight: 700; } /* Textes courants & rich-text justifiés partout (demande Fred 2026-07-31) : corps d'article, mentions légales, bodies de la home, descriptions de cartes, chapôs. PAS les titres/labels/méta. SANS césure (décision Fred : pas de coupure de mots). */ .sl-article__body p, .sl-article__body li, .sl-article__lead, .sl-legal__block p, .sl-legal__credits, .sl-s2__body, .sl-s5__body, .sl-s4__card-desc, .sl-s3__card-body { text-align: justify; } /* Variante « full » (Hero) : container pleine largeur, sans max-width ni padding horizontal. Seule section full-bleed du site (les autres restent contraintes par .container-max). */ .container-max.container-max--full { max-width: none; padding-inline: 0; } /* WP core ajoute un padding gauche/droite par défaut aux groupes colorés (:where(.wp-block-group.has-background) { padding: 1.25rem 2.375rem }) dès que le style du bloc ne fixe que top/bottom. On neutralise : le padding horizontal est déjà géré par container-max. */ .wp-block-group.has-background { padding-inline: 0; } /* Tous les boutons principaux à la même hauteur : 47px (bouton « Gérez votre participation », Figma). Les boutons icônes (partage / back-to-top) sont 47×47. */ .wp-element-button { box-sizing: border-box; min-height: 2.9375rem; /* 47px */ display: inline-flex; align-items: center; justify-content: center; } /* #endregion */ /* #region §1.1 · GLOBAL · HEADER / NAV */ /* ============ En-tête — Figma « Navigation » (2131:1999) ============ */ .site-header { background: var(--wp--preset--color--blanc); border-bottom: 1px solid var(--wp--preset--color--gris-200); padding-block: var(--wp--preset--spacing--24); } /* .container-design : enfant unique nav.sl-header__nav — layout délégué à lui */ .site-header .container-design { display: flex; justify-content: space-between; } /* Wrapper nav — flex row desktop */ .sl-header__nav { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3rem; /* 48px — rangée de contenu (Figma) → header = 24+48+24 = 96px */ } /* Vestige markup Osmo (sous-menus retirés du JS) : à sortir du flux flex, sinon ce div vide compte comme 3e enfant et casse le space-between (espace fantôme à droite). */ .sl-header__nav [data-dropdown-wrapper] { display: none; } /* Logo — 2 variantes Figma : wordmark 1 ligne (Large ≥80rem) / compact 2 lignes (<80rem, node 8301:3449) */ .sl-header__logo { display: inline-flex; flex-shrink: 0; } .sl-header__logo-img { width: auto; display: block; } .sl-header__logo-img--large { height: 2.125rem; } /* 34px viewBox → lettres ~27px + largeur 315px = Figma nav Large */ .sl-header__logo-img--compact { height: 3rem; display: none; } /* 48px : taille Medium */ @media (max-width: 79.99em) { /* ▸ MEDIUM ≤80em */ .sl-header__logo-img--large { display: none; } .sl-header__logo-img--compact { display: block; } } @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-header__logo-img--compact { height: 2rem; } /* 32px : taille Small/Xsmall */ } /* Overlay nav (desktop : rangée droite ; mobile : plein écran via GSAP) */ .sl-nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--48); font-family: "Akkurat LL", system-ui, sans-serif; font-weight: 300; font-size: var(--wp--preset--font-size--body); } /* Liste des liens */ .sl-nav__list { display: flex; align-items: center; gap: var(--wp--preset--spacing--32); list-style: none; margin: 0; padding: 0; } .sl-nav a { color: var(--wp--preset--color--noir); text-decoration: none; line-height: 1.45; } .sl-nav a[aria-current="page"] { font-weight: 700; } /* #endregion */ /* #region §1.2 · GLOBAL · LAUNCH MINIMAL */ /* ============ Launch minimal — home sans lien mort ============ Nav réduite à : logo + sélecteur de langue, à tous les paliers. Les liens de nav sont retirés côté PHP ; ici on masque le burger et on garde le sélecteur de langue INLINE sur mobile (sinon il serait piégé dans l'overlay qui n'a plus de burger pour l'ouvrir). */ .sl-launch-minimal .sl-header__burger-wrap { display: none; } @media (max-width: 62em) { /* ▸ ≤62em (header mobile) */ .sl-launch-minimal .sl-nav { position: static; inset: auto; flex-direction: row; justify-content: flex-end; align-items: center; background: none; padding: 0; opacity: 1; visibility: visible; z-index: auto; } } /* #endregion */ /* #region §1.3 · GLOBAL · SÉLECTEUR DE LANGUE */ /* Sélecteur de langue — interrupteur (Figma 8007:16143). Piste beige FIXE (fond du conteneur) ; une seule « chip » blanche (bordure beige, comme la maquette) glisse d'une case à l'autre pour marquer la langue active. Le fond ne bouge pas : seule la chip coulisse selon [data-active]. */ .sl-lang { position: relative; display: inline-flex; align-items: center; /* Polylang sort FR puis EN dans le DOM → ordre naturel : FR à gauche, EN à droite. Le FRANÇAIS est la langue PRINCIPALE/par défaut du site (décision Fred 2026-08-01, retour arrière après un essai EN par défaut). */ flex-direction: row; background: var(--wp--preset--color--beige); /* piste fixe */ } .sl-lang__chip { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 2.0625rem; /* 33px */ height: 2rem; /* 32px */ background: var(--wp--preset--color--blanc); border: 1px solid var(--wp--preset--color--beige); pointer-events: none; z-index: 0; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* Ordre visuel : FR à gauche (slot 0), EN à droite (slot 1). */ .sl-lang[data-active="fr"] .sl-lang__chip { transform: translateX(0); } /* chip sous FR (gauche) */ .sl-lang[data-active="en"] .sl-lang__chip { transform: translateX(2.0625rem); } /* chip sous EN (droite) */ .sl-lang__btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.0625rem; /* 33px */ height: 2rem; /* 32px */ font-size: var(--wp--preset--font-size--legal); color: var(--wp--preset--color--noir); text-decoration: none; line-height: 1.2; font-weight: 300; /* Light (inactive) */ } /* Langue active (selon data-active) → texte Bold, comme la maquette */ .sl-lang[data-active="fr"] .sl-lang__btn[lang="fr"], .sl-lang[data-active="en"] .sl-lang__btn[lang="en"] { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .sl-lang__chip { transition: none; } } /* #endregion */ /* #region §1.4 · GLOBAL · BURGER + BACKDROP MOBILE */ /* Burger — masqué sur desktop */ /* position/z-index : doit rester au-dessus de l'overlay .sl-nav (z-index:200 en mobile), sinon le burger (animé en croix à l'ouverture) se retrouve caché dessous. */ .sl-header__burger-wrap { display: none; align-items: center; position: relative; z-index: 210; } /* Burger — Figma Xsmall node 8012:16229 : 2 traits de 42×2px, gap 4px, noir, sans fond */ .sl-burger { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.25rem; /* 4px */ padding-block: 0.75rem; /* 12px — zone de tap */ width: 2.625rem; /* 42px */ background: none; border: none; cursor: pointer; } .sl-burger__line { display: block; width: 2.625rem; /* 42px */ height: 0.125rem; /* 2px */ background: var(--wp--preset--color--noir); transform-origin: center; } /* Backdrop mobile */ .mega-nav__backdrop { display: none; position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, 0.3); cursor: pointer; } [data-menu-open="true"] .mega-nav__backdrop { display: block; } /* #endregion */ /* #region §1.5 · GLOBAL · HEADER MOBILE (≤62em) */ /* ============ Header — mobile (≤62rem / 992px) ============ */ @media (max-width: 62em) { /* ▸ ≤62em (header mobile) */ .sl-header__burger-wrap { display: flex; } /* Overlay plein écran — état initial masqué (GSAP anime open/close) */ .sl-nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center; gap: var(--wp--preset--spacing--48); background: var(--wp--preset--color--blanc); z-index: 200; padding: var(--wp--preset--spacing--48); opacity: 0; visibility: hidden; } /* Liste de liens en colonne */ .sl-nav__list { flex-direction: column; align-items: center; gap: 0; width: 100%; } .sl-nav__list li { width: 100%; text-align: center; } .sl-nav__list a { display: block; width: 100%; padding-block: var(--wp--preset--spacing--16); border-bottom: 1px solid var(--wp--preset--color--gris-200); font-size: 1.25rem; } } /* #endregion */ /* #region §1.6 · GLOBAL · FOOTER */ /* ============ Pied de page — Figma « Footer » (6002:11505) ============ */ .site-footer { background: var(--wp--preset--color--blanc); padding-block: var(--wp--preset--spacing--24); position: relative; } .site-footer .container-design { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--horizontal-gap); align-items: flex-start; } .sl-footer__logos { display: flex; flex-wrap: wrap; /* pas de débordement : retour à la ligne si trop étroit */ align-items: flex-start; gap: var(--wp--preset--spacing--64); padding-block: var(--wp--preset--spacing--12); } .sl-footer__logo { display: block; width: auto; max-width: 100%; } .sl-footer__logo--cnc { height: 2.0625rem; } /* 33px — relevé maquette footer (réduit vs 48px) */ .sl-footer__logo--rf { height: 4.4375rem; } /* 71px */ .sl-footer__line { width: 100%; height: 0; border: 0; border-top: 1px solid var(--wp--preset--color--gris-300); margin: 0; } /* Rangée basse (Figma 6002:11505) : © (gauche) + liens légaux (droite), sous le filet. */ .sl-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; width: 100%; gap: var(--wp--preset--spacing--16); font-family: "Akkurat LL", system-ui, sans-serif; font-weight: 300; font-size: var(--wp--preset--font-size--legal); line-height: 1.2; } .sl-footer__copy { margin: 0; color: var(--wp--preset--color--noir); } .sl-footer__nav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wp--preset--spacing--16); } .sl-footer__nav a { color: var(--wp--preset--color--noir); text-decoration: none; line-height: 1.2; } .sl-footer__nav a:hover, .sl-footer__nav a:focus-visible { text-decoration: underline; } /* Bouton back to top — fixe en bas à droite */ .sl-footer__btt { position: fixed; bottom: var(--wp--preset--spacing--32); right: var(--wp--preset--spacing--32); z-index: 100; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 2.9375rem; /* 47px — même taille que « Gérez votre participation » / boutons de partage */ height: 2.9375rem; background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--noir); border: 1px solid var(--wp--preset--color--noir); /* carré, sans radius (comme les boutons de partage) */ cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, color 0.2s ease; } .sl-footer__btt.is-visible { opacity: 1; visibility: visible; } .sl-footer__btt:hover, .sl-footer__btt:focus-visible { background: var(--wp--preset--color--noir); color: var(--wp--preset--color--blanc); } .sl-footer__btt svg { display: block; } /* Responsive footer — cascade desktop-first (base = Large ≥80rem, cf. Figma 6002:11505). Base ci-dessus = Large + Medium (logos en ligne, nav space-between). */ @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .site-footer { padding-block: var(--wp--preset--spacing--16); } /* 24 → 14px */ .sl-footer__logos { gap: var(--wp--preset--spacing--24); } /* 48 → ~20px (Small en ligne / Xsmall vertical) */ /* Rangée basse empilée : Mentions légales AU-DESSUS, © en dessous (relevé Figma Small/Xsmall). column-reverse car l'ordre DOM est © (1er) puis liens (2e) pour le desktop space-between. */ .sl-footer__bottom { flex-direction: column-reverse; flex-wrap: nowrap; align-items: flex-start; gap: 0; /* écart = line-height (maquette) */ } .sl-footer__nav { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; /* liens empilés, écart = line-height */ } } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-footer__logos { flex-direction: column; } /* CNC / RF / MC empilés */ } /* #endregion */ /* #region §2.1 · HOME · S1 HERO */ /* ============ S1 · HERO — Figma (Large 8424:7030 / Medium 8603:7767 / Small 8603:9201 / Xsmall 8603:10172) ============ Grille 24 col × 3 rangées (0.75/1/0.75), full-bleed beige + bandes prismatiques. Cascade desktop-first (comme theme.json) : base = Large ≥80rem, puis paliers max-width. */ .sl-hero { background: var(--wp--preset--color--beige); overflow: clip; /* aucune bande ne déborde de la section en largeur */ } /* Pas de gap vertical (blockGap) autour du Hero full-bleed ni des template parts (header/footer) : sinon une bande beige (fond body) apparaît au-dessus/en dessous des barres chromatiques, absente de la maquette. */ .sl-hero, .wp-block-template-part, main, .section { margin-block-start: 0; } /* pas de gap (blockGap) entre sections empilées : chacune gère son padding interne */ .sl-hero__grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 0.75fr); column-gap: var(--wp--preset--spacing--horizontal-gap); /* Large : 1.25rem (20px) */ row-gap: 0; width: 100%; min-height: 44.0625rem; /* 705px — relevé Figma Large/Medium (em sur body 20px : 705/20) */ } @media (max-width: 79.99em) { /* ▸ MEDIUM ≤80em */ .sl-hero__grid { column-gap: var(--wp--preset--spacing--8); } /* 8px */ } @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-hero__grid { column-gap: var(--wp--preset--spacing--4); min-height: 30rem; } /* 4px / 480px (24×20) */ } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-hero__grid { min-height: 23rem; } /* 368px (18.4×20) */ } /* Édition blocs natifs (FSE) : la grille et le sur-titre sont des wp:group (is-layout-flow). Le blockGap global (theme.json styles.spacing.blockGap = 1.5rem) ajouterait un margin-block-start entre enfants → décalerait les items dans leur cellule de grille. Les deux groupes portent l'attribut style.spacing.blockGap:0 (conteneur WP côté serveur) ; ce reset CSS garantit l'annulation quelle que soit la version WP et neutralise aussi les marges par défaut des

/

. */ .sl-hero__grid > *, .sl-hero__surtitle > * { margin-block: 0; } /* --- Bandes prismatiques (décoratives) --- 3 jeux (desktop/small/xsmall) ; display:contents → les bandes deviennent items de la grille ; on bascule le jeu actif par palier. */ .sl-hero__bands { display: none; } .sl-hero__bands--desktop { display: contents; } /* Large + Medium */ @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-hero__bands--desktop { display: none; } .sl-hero__bands--small { display: contents; } /* Small */ } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-hero__bands--small { display: none; } .sl-hero__bands--xsmall { display: contents; } /* Xsmall */ } /* Bande = cellule de grille clippée. Le dégradé (--band-grad, posé inline) vit sur ::before DOUBLÉ (repeat-x, 2 copies) et DÉFILE de la gauche vers la droite via translateX, en boucle continue — déplacement du dégradé (PAS d'opacité), fidèle à l'interaction Figma (Change to · Smart animate · Ease out · 1500ms · relance after-delay). Repos / prefers-reduced-motion = dégradé fixe (aucune anim). */ .sl-hero__band { align-self: stretch; min-height: 0; overflow: hidden; position: relative; /* ancre le dégradé animé (::before) */ --band-delay: 0ms; --band-dur: 3700ms; /* entrée ~35% + tenue ~54% (≈2000ms) + fondu ~11% */ } .sl-hero__band::before { content: ""; position: absolute; inset: 0; background: var(--band-grad); /* un seul dégradé (custom prop inline) */ } /* GSAP (JS) : masque l'animation CSS de secours (::before) et affiche le fill animé par GSAP. */ .sl-hero.gsap-bands .sl-hero__band::before { display: none; } .sl-hero__band-fill { position: absolute; inset: 0; background: var(--band-grad); /* hérité de la bande */ will-change: transform, opacity; } @media (prefers-reduced-motion: no-preference) { .sl-hero__band::before { animation: sl-hero-band-sweep var(--band-dur) ease-out var(--band-delay) infinite; } /* Panachage par bande : durée (→ tenue ~2000ms) + délai de départ désynchronisés. */ .sl-hero__band:nth-child(8n+1) { --band-dur: 3600ms; --band-delay: 0ms; } .sl-hero__band:nth-child(8n+2) { --band-dur: 4000ms; --band-delay: 190ms; } .sl-hero__band:nth-child(8n+3) { --band-dur: 3400ms; --band-delay: 400ms; } .sl-hero__band:nth-child(8n+4) { --band-dur: 3900ms; --band-delay: 120ms; } .sl-hero__band:nth-child(8n+5) { --band-dur: 3500ms; --band-delay: 520ms; } .sl-hero__band:nth-child(8n+6) { --band-dur: 4100ms; --band-delay: 300ms; } .sl-hero__band:nth-child(8n+7) { --band-dur: 3700ms; --band-delay: 60ms; } .sl-hero__band:nth-child(8n) { --band-dur: 3800ms; --band-delay: 440ms; } /* Hover : relance IMMÉDIATE de l'animation (nom d'animation différent → redémarre à 0), indépendamment du temps passé sur la bande. */ @media (hover: hover) { .sl-hero__band:hover::before { animation-name: sl-hero-band-sweep-hover; } } } /* Cycle perpétuel : le dégradé part HORS-CHAMP à gauche, RENTRE entièrement (gauche → droite), S'ARRÊTE une fois complètement visible (translateX 0), s'y tient un court instant, puis disparaît en opacité SUR PLACE. Reset de boucle invisible (opacity 0 → retour hors-champ gauche). */ @keyframes sl-hero-band-sweep { 0% { transform: translateX(-100%); opacity: 1; } /* hors-champ gauche */ 35% { transform: translateX(0); opacity: 1; } /* entièrement rentré → STOP */ 89% { transform: translateX(0); opacity: 1; } /* longue tenue (~2000ms) */ 100% { transform: translateX(0); opacity: 0; } /* disparaît en opacité, sur place */ } /* Hover : rembobine ~300ms (retour au départ) puis rejoue — relance immédiate. */ @keyframes sl-hero-band-sweep-hover { 0% { transform: translateX(0); opacity: 1; } /* départ du rembobinage (état visible) */ 8% { transform: translateX(-100%); opacity: 1; } /* rembobiné au départ (~300ms) */ 43% { transform: translateX(0); opacity: 1; } /* re-rentre → stop */ 89% { transform: translateX(0); opacity: 1; } /* longue tenue */ 100% { transform: translateX(0); opacity: 0; } /* disparaît en opacité */ } /* Bandes à largeur fixe (relevé KV) : ancrées au départ de leur colonne. */ .sl-hero__band--fixed { justify-self: start; width: min(var(--band-w), 100%); /* plafonné à l'emprise de colonnes : pas de chevauchement/débordement */ } /* Hover des bandes : les blocs de contenu du Hero (sur-titre, logotype, baseline) sont posés AU-DESSUS des bandes (z-index:1) et, même transparents, intercepteraient le survol. Aucun n'est interactif → on les rend transparents au pointeur pour laisser passer le hover vers les bandes. (Les bandes reprennent pointer-events:auto par défaut.) */ .sl-hero__surtitle, .sl-hero__logotype, .sl-hero__baseline { pointer-events: none; } /* --- Sur-titre date (rangée 1) : 2 lignes, tailles fixes non responsives --- Édition blocs natifs : .sl-hero__surtitle est un wp:group (item de grille) qui contient 2 paragraphes éditables inline (.sl-hero__surtitle-l1 / -l2). */ .sl-hero__surtitle { grid-row: 1; grid-column: 16 / span 4; /* Large + Medium */ align-self: center; margin: 0; text-align: right; color: var(--wp--preset--color--noir); letter-spacing: 0; position: relative; z-index: 1; } .sl-hero__surtitle-l1, .sl-hero__surtitle-l2 { display: block; margin: 0; } .sl-hero__surtitle-l1 { font-size: var(--wp--preset--font-size--body); line-height: 1.45; } /* Date = Body (20px Large, scale par media-query) */ .sl-hero__surtitle-l2 { font-size: var(--wp--preset--font-size--legal); line-height: 1.2; } /* Lieu = Legal (14px Large, scale par media-query) */ @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-hero__surtitle { grid-column: 13 / span 9; } /* Small : décalé à gauche (Figma ~242→419px), éloigné de la bande à droite */ } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-hero__surtitle { grid-column: 10 / span 11; white-space: nowrap; } /* zone 146px = Figma Xsmall (8603:10197), sinon débordait sur les bandes */ } /* --- Logotype SOMMET LUMIÈRE (rangée 2, aligné gauche, centré vertical) --- */ .sl-hero__logotype { grid-row: 2; grid-column: 5 / span 12; /* Large + Medium : départ col 5 */ align-self: center; justify-self: start; display: flex; align-items: center; padding-block: var(--wp--preset--spacing--32); /* 32/28/24/24 px selon palier */ position: relative; z-index: 1; } .sl-hero__logo-img { display: block; width: 30.75rem; /* 492px — Large (rem : ÷16, indépendant du body 20px) */ height: auto; } @media (max-width: 79.99em) { /* ▸ MEDIUM ≤80em */ .sl-hero__logo-img { width: 22.5rem; } /* 360px — réduit un peu vs Figma 392px pour ne pas coller la bande rouge à droite au plus petit Medium (992px) */ } @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-hero__logotype { grid-column: 1 / -1; justify-self: start; padding-inline-start: var(--wp--preset--spacing--padding-general); } /* logo aligné sur le padding général (Small + Xsmall) */ .sl-hero__logo-img { width: 15.625rem; } /* 250px */ } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-hero__logo-img { width: 10.875rem; } /* 174px — logotype hérite de l'alignement padding-général du palier Small */ } /* --- Baseline (rangée 3) : H1 unique, stylé h-s (override h1→h-l), uppercase --- */ .sl-hero__baseline { grid-row: 3; grid-column: 13 / span 6; /* Large + Medium */ align-self: center; margin: 0; font-size: var(--wp--preset--font-size--h-s); /* responsif natif : 27/27/17/14 px */ line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: var(--wp--preset--color--noir); position: relative; z-index: 1; } @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-hero__baseline { grid-column: 10 / span 10; } } @media (max-width: 29.99em) { /* ▸ XSMALL ≤30em */ .sl-hero__baseline { grid-column: 8 / span 12; } } /* #endregion */ /* #region §2.2 · HOME · S2 PRÉSENTATION */ /* ============ S2 · PRÉSENTATION « Pourquoi maintenant ? » ============ Figma « section-content » Visuel=À gauche (Large 8657:11177 / Medium 8688:16826 / Small 8688:16846 / Xsmall 8657:11458). 2 colonnes image-gauche + texte-droite (≥62rem), empilé image→texte (<62rem). Cascade desktop-first (base = Large ≥80rem). Ossature .section > .container-max > .container-design déjà gérée plus haut : padding-block (vertical-gap) posé sur le bloc via style.spacing ; overflow ci-dessous. */ .sl-s2 { overflow: clip; } /* clippe le débord gauche du dégradé KV décoratif */ /* .container-design → grille interne 12 colonnes (≥62rem) */ .sl-s2__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, auto); column-gap: var(--wp--preset--spacing--horizontal-gap); /* 1.25rem (20px) ≥62rem */ width: 100%; align-items: start; } /* neutralise le blockGap global (margin-block) sur les items de grille */ .sl-s2__grid > * { margin-block: 0; } /* --- Colonne visuel : image (col 1→6) + dégradé KV en fond --- */ .sl-s2__visuel { grid-column: 1 / span 6; grid-row: 1; position: relative; isolation: isolate; aspect-ratio: 566 / 473; /* relevé Figma ≈1,20:1 (ratio revu par Fred 2026-07-30) */ } /* Image : remplit la colonne, au-dessus du dégradé (z-2). wp:image core =
*/ .sl-s2__visuel .wp-block-image { position: absolute; inset: 0; margin: 0; z-index: 2; height: 100%; } .sl-s2__visuel .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Dégradé KV décoratif (aria-hidden) : ancré bord gauche, DERRIÈRE l'image (z-1), débord dans la marge gauche (clippé par .sl-s2 overflow:clip). Insets + rotate = relevé Figma. */ .sl-s2__gradient { position: absolute; z-index: 1; top: 0; bottom: 0; right: 89.22%; left: -59.19%; background: var(--wp--preset--gradient--kv-purple); transform: rotate(180deg); /* Figma : gradient to-r + rotate 180 */ pointer-events: none; } /* --- Colonne texte (col 8→12 ; colonne 7 = gouttière vide) --- */ /* Rendu PHP (hors blocs) : les écarts verticaux et le flex du sur-titre venaient des classes de layout générées par WordPress (is-layout-flex/flow + blockGap). On les redéfinit explicitement pour ne pas dépendre de ces classes. */ .sl-s2__text { grid-column: 8 / span 5; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--24); } .sl-s2__text > * { margin-block: 0; } .sl-s2__titlewrap { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); } .sl-s2__titlewrap > * { margin-block: 0; } .sl-s2__surtitle { display: flex; align-items: center; gap: var(--wp--preset--spacing--16); } .sl-s2__surtitle > * { margin-block: 0; } /* Barre déco du sur-titre : 40×15px fixes (décoratif, hors échelle de tokens) */ .sl-s2__tick { flex-shrink: 0; width: 2.5rem; /* 40px */ height: 0.9375rem; /* 15px */ background: var(--wp--preset--color--noir); } /* Medium (62–80rem) : image plus étroite / texte plus large (à Large c'est image 6 / texte 5). */ @media (min-width: 62em) and (max-width: 79.99em) { /* ▸ MEDIUM seul (62–80em) */ .sl-s2__visuel { grid-column: 1 / span 5; } .sl-s2__text { grid-column: 7 / span 6; } } /* --- Empilé (<62rem) : image au-dessus du texte, pleine largeur --- */ @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-s2__grid { display: flex; flex-direction: column; row-gap: var(--wp--preset--spacing--vertical-gap); } .sl-s2__visuel { grid-column: auto; width: 100%; } .sl-s2__text { grid-column: auto; width: 100%; } } /* #endregion */ /* #region §2.3 · HOME · S3 ACTUALITÉS */ /* ============ S3 · LE SOMMET EN DIRECT (Actualités) ============ Figma « section-actualites » (8688:15941) + carte « card-actualite » (8603:9725). Actus empilées verticalement (max 3, gap 32) + bouton « Voir toutes les actualités ». Ossature .section > .container-max > .container-design gérée plus haut (padding-block vertical-gap posé sur le bloc via style.spacing). Cascade desktop-first (base = Large ≥80rem). */ /* .container-design → colonne interne (titre + liste + bouton), gap 32 */ .sl-s3__inner { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--32); width: 100%; } .sl-s3__inner > * { margin-block: 0; } /* --- Wrapper-titre : eyebrow (barre déco + sur-titre) + H2 --- */ .sl-s3__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); } .sl-s3__head > * { margin-block: 0; } /* Sur-titre =

en flex row ; barre déco 40×15px en ::before (décoratif, hors échelle de tokens — même repère que .sl-s2__tick). */ .sl-s3__eyebrow { display: flex; align-items: center; gap: var(--wp--preset--spacing--16); } .sl-s3__eyebrow::before { content: ""; flex-shrink: 0; width: 2.5rem; /* 40px */ height: 0.9375rem; /* 15px */ background: var(--wp--preset--color--noir); } /* --- Liste des cartes (sortie du shortcode [sl_actualites]) --- */ .sl-s3__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--32); width: 100%; } .sl-s3__item { margin: 0; } /* --- Carte : grille 12 col (≥62rem) → date | image | contenu --- */ .sl-s3__card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--horizontal-gap); align-items: start; width: 100%; } /* neutralise tout margin par défaut des enfants (p/h) dans la grille */ .sl-s3__card > * { margin-block: 0; } .sl-s3__card-date { grid-column: 1 / span 2; grid-row: 1; line-height: 1.2; } /* Image : col 3→6, ratio Figma 413×468 (portrait), object-cover */ .sl-s3__card-visuel { grid-column: 3 / span 4; grid-row: 1; display: block; aspect-ratio: 413 / 468; overflow: hidden; } .sl-s3__card-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Contenu : col 8→12 (col 7 = gouttière vide), colonne, gap 12 */ .sl-s3__card-content { grid-column: 8 / span 5; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--12); } /* Medium + Large (≥62rem) : carte élargie — image plus large + espace image↔texte RÉDUIT mais modéré (~48px, pas une simple gouttière). Large : demande Fred 2026-07-24 ; étendu au Medium le 2026-08-01 (le Medium avait une colonne vide ~118px, visuel trop étroit → on veut se rapprocher du ratio desktop). Gabarit explicite (date | 20 | image | 48 | contenu) car la grille 12 col ne donne que des écarts binaires (~20px ou ~118px). */ @media (min-width: 62em) { /* ▸ ≥62em (Medium + Large) */ .sl-s3__card { grid-template-columns: minmax(0, 176fr) /* date */ var(--wp--preset--spacing--horizontal-gap) /* 20px : date ↔ image */ minmax(0, 410fr) /* image élargie (≈370→410px) */ var(--wp--preset--spacing--48) /* 48px : espace modéré image ↔ texte */ minmax(0, 490fr); /* contenu */ column-gap: 0; } .sl-s3__card-date { grid-column: 1; } .sl-s3__card-visuel { grid-column: 3; aspect-ratio: 448 / 468; } /* un peu plus large, hauteur ≈ conservée */ .sl-s3__card-content { grid-column: 5; } } /* Badge catégorie : fond beige, padding 8/4 */ .sl-s3__card-cat { display: inline-flex; align-items: center; padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8); line-height: 1.2; } .sl-s3__card-title { line-height: 1.2; margin-block: 0; } .sl-s3__card-title a { color: var(--wp--preset--color--noir); text-decoration: none; } .sl-s3__card-title a:hover, .sl-s3__card-title a:focus-visible { text-decoration: underline; } .sl-s3__card-body { line-height: 1.45; margin-block: 0; } /* CTA « En savoir plus » → article : texte souligné (border-bottom) + flèche 20px */ .sl-s3__card-cta { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--12); color: var(--wp--preset--color--noir); text-decoration: none; line-height: 1.2; margin-top: var(--wp--preset--spacing--16); /* respiration au-dessus du CTA */ } .sl-s3__card-cta-label { border-bottom: 1px solid var(--wp--preset--color--noir); padding-bottom: var(--wp--preset--spacing--4); } /* États hover/focus non fournis au Figma — défaut proposé (à valider, PO §1) */ .sl-s3__card-cta:hover, .sl-s3__card-cta:focus-visible { opacity: 0.7; } /* --- Flèche droite (masque SVG, prend currentColor) : carte CTA + bouton --- */ :root { --sl-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10h11M10 5l5 5-5 5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .sl-s3__card-cta::after, .sl-s3__seeall .wp-block-button__link::after { content: ""; flex-shrink: 0; width: 1.25rem; /* 20px */ height: 1.25rem; background-color: currentColor; -webkit-mask: var(--sl-arrow-right) no-repeat center / contain; mask: var(--sl-arrow-right) no-repeat center / contain; } /* --- Bouton « Voir toutes les actualités » : primaire (style global theme.json), centré, avec flèche --- */ .sl-s3__seeall { justify-content: center; } .sl-s3__seeall .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--12); } /* --- Medium (62–80rem) : identique Large (grille 12 col) ; tokens auto par palier. --- */ /* --- Empilé (<62rem) : image (pleine largeur) → date → contenu, gap 24 --- */ @media (max-width: 61.99em) { /* ▸ SMALL ≤62em */ .sl-s3__card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--24); } .sl-s3__card-visuel { order: 1; width: 100%; aspect-ratio: 480 / 281; /* ratio image empilée (relevé Figma Small/Xsmall) */ } .sl-s3__card-date { order: 2; } .sl-s3__card-content { order: 3; } } /* #endregion */ /* #region §2.4 · HOME · S4 GRANDS SUJETS */ /* ============ S4 · LES GRANDS SUJETS EN DÉBAT (Thèmes) ============ Figma « Section · Grands sujets » (Large 8068:3304 / Medium 8603:8795 / Small 8603:9870 / Xsmall 8655:10680). Section fond BLANC (décision Fred 2026-07-24 : les cartes beige-clair ressortent dessus, pas d'alternance ici). Wrapper-titre + grille de cartes. Ossature .section > .container-max > .container-design gérée plus haut (padding-block vertical-gap posé sur le bloc via style.spacing). Cascade desktop-first. Grille ÉVOLUTIVE selon le nombre N de cartes affichées (règle Fred 2026-07-24) : desktop (≥80rem) N ≤ 4 → 2 col (2×2) · N ≥ 5 → 3 col (classe modificatrice --3col) Medium (62–80rem) → 2 col (cap, quel que soit N) Small/Xsmall (<62rem) → 1 col empilée Le nombre de colonnes desktop est piloté par la CLASSE posée au rendu selon N (sl-s4__grid = 2 col par défaut ; +sl-s4__grid--3col quand N≥5), PAS par une valeur en dur. Choix d'une classe modificatrice plutôt qu'un `--cols` inline : un custom property inline l'emporterait sur les media queries (impossible de le « caper » à 2 en Medium). Aujourd'hui N=4 → la grille porte seulement `sl-s4__grid` (2×2). */ /* .container-design → colonne interne (wrapper-titre + grille), gap 48 */ .sl-s4__inner { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--48); width: 100%; } .sl-s4__inner > * { margin-block: 0; } /* --- Wrapper-titre : eyebrow (barre déco + sur-titre) + H2 (repère S3) --- */ .sl-s4__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--16); } .sl-s4__head > * { margin-block: 0; } .sl-s4__eyebrow { display: flex; align-items: center; gap: var(--wp--preset--spacing--16); } /* Barre déco 40×15px (décoratif, hors échelle de tokens — même repère que S2/S3) */ .sl-s4__eyebrow::before { content: ""; flex-shrink: 0; width: 2.5rem; /* 40px */ height: 0.9375rem; /* 15px */ background: var(--wp--preset--color--noir); } /* --- Grille de cartes (liste sémantique