/* Theme Name: Médianes Theme URI: https://medianes.org Description: Thème enfant d'Ollie pour le site Médianes 2026 (Full Site Editing). Trois univers (Média, Studio, Réseau) et une section commune racine. Author: Médianes Author URI: https://medianes.org Template: ollie Version: 0.1.0 Requires at least: 6.5 Requires PHP: 8.2 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: medianes Tags: full-site-editing, block-styles, translation-ready */ /* Le système de design (tokens) est défini dans theme.json à partir des variables Figma. Cette feuille ne contient que les styles de composants non exprimables en theme.json (états contextuels, micro-layout). Valeurs issues du Dev Mode Figma (node 2777:38254 « Header général »). */ /* Réglages typographiques globaux (recette) ---------------------------------------------------------------------------- */ /* #18 : chiffres alignés (« lining ») partout — les chiffres elzéviriens de Loretta rendent les « 1 » illisibles en début de phrase. */ body { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } /* #59 : soulignement des hyperliens fin — spec composant Hyperlien Dev Mode : « decoration-from-font » (fallback 1px pour les moteurs sans support). */ .wp-site-blocks a { text-decoration-thickness: 1px; text-decoration-thickness: from-font; text-underline-offset: 0.15em; } .no-wrap { white-space: nowrap; } @media (max-width: 1300px) { .no-padding-left-right-mobile { padding-left: 0px !important; padding-right: 0px !important; } } .align-self-flex-end { align-self: flex-end !important; } /* Fond #F5F9FF (bleu-00) des contextes éditoriaux — vérifié sur les maquettes (2026-07-05, le #F5F9FF est quasi indiscernable du blanc mais reste bleu-00) : TOUT l'univers Média (accueil, articles, podcasts, hub, auteur, veille, job board) + les contenus éditoriaux Studio (fiches pratiques, séries, projets / cas clients). Les pages marketing Studio (le studio, formations, tarifs, nos services) et la racine (accueil, à-propos, expertises, FAQ, contact…) gardent leur fond propre (blanc / beige). */ body.univers-media, body.single-fiche_pratique, body.post-type-archive-cas_client, body.tax-serie { background-color: var(--wp--preset--color--bleu-00); } /* Détail projet (single cas_client, maquette 152:8666) : corps BLANC, avec l'ouverture et la section « Projets similaires » en bandes bleu-00 (contraste de la maquette). Retiré de la règle « contextes éditoriaux bleu-00 » ci-dessus (divergence assumée avec la déc. 2026-07-05 pour ce gabarit précis). */ /* Ticket #85 : la page Podcast (hub) fait exception — fond de PAGE blanc, seule la section d'ouverture (bandeau `medianes-podcast-tete`) reste en bleu-0. */ body.post-type-archive-podcast { background-color: var(--wp--preset--color--blanc); } /* Même exception pour la page de présentation d'une newsletter (consigne Noé 2026-07-31) : fond de PAGE blanc, seul le bandeau d'ouverture (`medianes-nl-single__hero`) garde son fond beige. Depuis le 2026-09-21 (ADR-038), ces pages sont des PAGES enfants de /newsletters/ servies par le gabarit `page-newsletter` — d'où la classe de gabarit et non plus `single-newsletter`, qui désigne désormais une ÉDITION et garde le bleu-00 des articles. */ body.page-template-page-newsletter { background-color: var(--wp--preset--color--blanc); } /* Index des projets clients (node 3220:19973, hero + sections de liste en bleu-00) : la page a été rattachée à l'univers STUDIO le 2026-07-31 quand elle est passée des offres d'emploi aux projets clients — son fond bleu-00, jusque-là hérité de `body.univers-media`, est donc redéclaré ici. */ body.medianes-page-index-des-missions { background-color: var(--wp--preset--color--bleu-00); } /* Accueil du Studio (/studio/) : fond bleu-00 lui aussi, à la demande de Baptiste (2026-09-23) — exception à la règle du 2026-07-05 qui laissait les pages marketing Studio en blanc. Les bandes qui portent leur propre fond (beige, bleu foncé) le gardent ; seul le fond de page change. */ body.medianes-page-studio { background-color: var(--wp--preset--color--bleu-00); } /* Troisième page du même cas (consigne Noé 2026-08-03) : /livre/ garde un fond de PAGE blanc, seul le bandeau d'ouverture (`medianes-livre-tete`, déjà en bleu-00 dans le contenu) doit ressortir. La page appartient à l'univers Média, elle héritait donc du bleu-00 général — bandeau et page étaient de la même teinte, donc l'ouverture ne se distinguait pas. ⚠️ CETTE CLASSE SUIT LE SLUG DE LA PAGE, elle n'est pas choisie : `functions.php` la fabrique avec `'medianes-page-' . $post->post_name`. La page est passée de `notre-livre` à `livre` le 2026-09-22 (renommage demandé par Baptiste), donc les neuf sélecteurs de cette feuille aussi — sans quoi ils auraient cessé de s'appliquer en silence, sans erreur nulle part. */ body.medianes-page-livre { background-color: var(--wp--preset--color--blanc); } /* Ticket #6 : les chapos des ouvertures de page et des blocs éditoriaux (Qui sommes-nous, Nos newsletters…) doivent être en Chapo 22px, pas 18px. `!important` justifié : WordPress génère les classes de taille du theme.json (`.has-corps-font-size`) avec `!important` — seul un `!important` les surcharge sans toucher le contenu de chaque page. */ /* `.has-corps-serif-font-size` exclu (2026-07-30) : la maquette de /nos-services/ (2346:33277) met le texte de l'encart « Médianes ? » en Loretta corps-serif 19/1.4 — un choix explicite posé dans le contenu ne doit pas être rabattu au chapo. */ /* `.medianes-newsletter__rgpd` exclu : la mention RGPD du bloc newsletter reste en Note (15px, Degular Mono) même quand le bloc est repris dans une bande de recirculation — ce n'est pas un chapo éditorial. */ /* `.medianes-retour` exclu (2026-09-21, demande Baptiste : « le lien Retour à nos expertises doit passer en 18px ») : c'est un lien de navigation, pas un chapô éditorial — le node le donne en style « Hyperlien » (Degular Medium 18/1,3), et ce `!important` le poussait à 22 parce qu'il se trouve être un `

` enfant direct de l'ouverture. Sa taille est posée juste en dessous, avec le reste de son style. */ .medianes-ouverture>p:not(.medianes-newsletter__rgpd):not(.medianes-retour), .medianes-qsn p:not(.medianes-newsletter__rgpd), .medianes-recirculation p:not(.medianes-lien-fleche):not(.medianes-hyperlien):not(.medianes-newsletter__rgpd), .medianes-recirc-cote p:not(.medianes-lien-fleche):not(.medianes-hyperlien):not(.has-corps-serif-font-size):not(.medianes-newsletter__rgpd) { font-size: var(--wp--preset--font-size--chapo) !important; line-height: 1.15; } /* Bandeau « traduction automatique » (Weglot) ---------------------------------------------------------------------------- */ /* Rendu par medianes_bandeau_traduction() sur wp_body_open, donc AVANT le header dans le flux — ce qui est exactement ce qu'il faut pour l'empiler au-dessus de lui : les deux sont collants, le bandeau à 0 et le header à la hauteur du bandeau (cf. --medianes-bandeau-h). Le bandeau étant premier dans le flux, il n'a aucun décalage à appliquer au chargement et se colle naturellement en défilant. z-index 85 : au-dessus du header (80) et du sous-header (70), sous le toaster promotionnel (90), qui reste l'élément le plus prioritaire. Volontairement sobre — c'est un avertissement de service, pas un élément de la maquette (aucun node Figma : Weglot est arrivé après). */ .medianes-bandeau-traduction { position: sticky; top: 0; z-index: 85; background: var(--wp--preset--color--beige-01); color: var(--wp--preset--color--bleu-10); border-bottom: 1px solid var(--wp--preset--color--bleu-01); } .medianes-bandeau-traduction p { margin: 0 auto; padding: var(--wp--preset--spacing--petit) clamp(24px, 6.667vw, 96px); max-width: 1248px; font-family: var(--wp--preset--font-family--degular-mono); font-size: var(--wp--preset--font-size--note); line-height: 1.4; text-align: center; } /* Bandeau d'annonce (functions.php, medianes_bandeau_annonce()) Hors maquette : jetons de la charte seulement — bleu-10 / blanc, Degular « note », lien souligné en graisse 500 comme .medianes-lien-fleche, pictos du thème. Non collant : il défile avec la page et ne décale pas le header. Le texte vient d'une composition synchronisée (un paragraphe, un lien). */ .medianes-bandeau-annonce { background: var(--wp--preset--color--bleu-10); color: var(--wp--preset--color--blanc); } /* Message déjà fermé : classe posée sur par le script de tête (medianes_bandeau_annonce_tete()), avant le rendu — pas de clignotement. */ .medianes-annonce-fermee .medianes-bandeau-annonce { display: none; } .medianes-bandeau-annonce__inner { display: flex; align-items: center; gap: var(--wp--preset--spacing--petit); margin: 0 auto; padding: var(--wp--preset--spacing--petit) clamp(24px, 6.667vw, 96px); max-width: 1248px; } .medianes-bandeau-annonce__texte { flex: 1; text-align: center; } .medianes-bandeau-annonce__texte p { margin: 0; font-family: var(--wp--preset--font-family--degular); font-size: var(--wp--preset--font-size--note); line-height: 1.4; } .medianes-bandeau-annonce__texte a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-position: from-font; white-space: nowrap; } /* Flèche « vers l'extérieur » : le lien mène hors du site (formulaire Tally). */ .medianes-bandeau-annonce__texte a::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: var(--wp--preset--spacing--nano); vertical-align: -2px; background: url(assets/icon-arrow-up-right-blanc.svg) center / contain no-repeat; } .medianes-bandeau-annonce__texte a:hover { text-decoration-thickness: 2px; } .medianes-bandeau-annonce__texte a:focus-visible, .medianes-bandeau-annonce__fermer:focus-visible { outline: 2px solid var(--wp--preset--color--blanc); outline-offset: 2px; } /* Croix du thème (icon-x.svg, tracé bleu-10) recolorée en blanc par masque : la couleur suit `background-color`, sans second fichier. Le masque est posé sur le PSEUDO-ÉLÉMENT, pas sur le bouton : un masque rogne aussi le contour de focus de l'élément masqué, qui deviendrait invisible au clavier. Cible 32px. */ .medianes-bandeau-annonce__fermer { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; } .medianes-bandeau-annonce__fermer::before { content: ""; width: 20px; height: 20px; background-color: var(--wp--preset--color--blanc); -webkit-mask: url(assets/icon-x.svg) center / contain no-repeat; mask: url(assets/icon-x.svg) center / contain no-repeat; } .medianes-bandeau-annonce__fermer:hover::before { background-color: var(--wp--preset--color--bleu-02); } @media (max-width: 781px) { .medianes-bandeau-annonce__inner { padding-right: var(--wp--preset--spacing--regulier); padding-left: var(--wp--preset--spacing--regulier); } .medianes-bandeau-annonce__texte { text-align: left; } } /* Header global ---------------------------------------------------------------------------- */ /* Hauteur nominale du header (rangée 72px + 1px de bordure basse), exposée en variable pour les ancrages (scroll-margin) et le sous-header sticky sur /a-propos/. */ :root { /* Hauteur du bandeau « traduction automatique » quand il est affiché, sinon 0. Renseignée par assets/bandeau-traduction.js, qui la mesure : le texte tient sur une ligne en grand écran et se replie en petit, aucune valeur fixe ne conviendrait. Sans JavaScript elle reste à 0 — le bandeau défile alors sous le header au lieu de rester collé, ce qui reste lisible en haut de page. */ --medianes-bandeau-h: 0px; /* Hauteur de la zone fixe SURPLOMBANT le contenu (rangée du header 72px + 1px de bordure), à laquelle s'ajoute le bandeau quand il est là. Utilisée par les `top` des éléments collants qui se placent sous le header et par les `scroll-margin-top` des ancres : dans tous les cas, la question posée est « combien de chrome fixe au-dessus ? ». L'intégrer ici évite de reprendre les huit règles concernées une par une. */ --medianes-header-h: calc(73px + var(--medianes-bandeau-h)); } /* Recette #100 : header sticky sur tout le site. z-index 80 sous le toaster promo (bloc medianes/toaster à 90). Le bloc Navigation enveloppe le header dans

(enfant direct de .wp-site-blocks). Le sticky doit porter sur CE wrapper : mis sur .medianes-header, son bloc conteneur est le wrapper (même hauteur que le header) → aucune marge de défilement, donc rien ne colle. */ .wp-block-template-part:has(> .medianes-header) { position: sticky; /* Se cale sous le bandeau de traduction quand il y en a un (0 sinon). */ top: var(--medianes-bandeau-h); z-index: 80; } .medianes-header a { text-decoration: none; } .medianes-logo { display: flex; align-items: center; } .medianes-logo img { display: block; width: 166px; height: 20px; } /* Sélecteur d'univers (pilules) : conteneur bleu-01 arrondi, pilule active bleu-09 selon l'univers courant (classe posée sur le body). */ .medianes-univers-switch .wp-block-navigation__container { background: var(--wp--preset--color--bleu-01); border-radius: 6px; padding: 0 var(--wp--preset--spacing--micro); min-height: 39px; align-items: center; gap: var(--wp--preset--spacing--nano); } .medianes-univers-switch .wp-block-navigation-item__content { padding: var(--wp--preset--spacing--nano) var(--wp--preset--spacing--micro); border-radius: 6px; line-height: 1.2; color: var(--wp--preset--color--bleu-09); } /* États des entrées de menu (ticket 25, contre-vérifié sur le composant Header EN CONTEXTE 2777:38254) : sélecteur d'univers → survol pastille blanche (visible sur le conteneur bleu-01), actif pastille bleu-09 texte blanc ; entrées de droite (sur header blanc) → nues, survol et actif = barre basse 3px bleu-09 (comme le sous-header). */ .medianes-univers-switch .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--blanc); } .univers-media .medianes-pill--media .wp-block-navigation-item__content, .univers-studio .medianes-pill--studio .wp-block-navigation-item__content, .univers-reseau .medianes-pill--reseau .wp-block-navigation-item__content { background: var(--wp--preset--color--bleu-09); color: var(--wp--preset--color--blanc); } /* Entrées de droite (survol/actif) : texte centré, barre 3px au ras du bas du header (maquette 2955:17306). Recette #100 : les liens remplissent la hauteur du header (72px, cf. --medianes-header-h) et la barre ::after se pose en bottom:0 — plus de position calculée à partir de la ligne de texte, plus de sauts entre l'état hover et l'état actif. */ .medianes-header__nav .wp-block-navigation-item__content { position: relative; display: inline-flex; align-items: center; height: 72px; padding: 0; line-height: 1.2; } .medianes-header__nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; transition: background 0.15s ease; } .medianes-header__nav .wp-block-navigation-item__content:hover::after, .medianes-header__nav .current-menu-item .wp-block-navigation-item__content::after { background: var(--wp--preset--color--bleu-09); } /* EXCEPTION (demande Baptiste, 2026-08-07) : la recherche n'a JAMAIS de barre — ni au survol, ni au focus, ni en état actif. La barre de 3px court sur toute la largeur de l'entrée : sous un mot elle se lit, sous une icône de 24px elle n'est qu'un moignon. Première version limitée à `.current-menu-item` : sans effet, WordPress ne marquant jamais cette entrée comme courante (mesuré sur `/?s=`, `/?s=media` et l'accueil). Ce qu'on voyait était le survol — et il persiste après un clic tant que le pointeur reste sur l'icône. D'où la suppression pure et simple du pseudo-élément, plutôt qu'un fond transparent état par état. */ .medianes-header__nav .medianes-header__recherche .wp-block-navigation-item__content::after { content: none; } /* Recherche en pictogramme (Lucide « search »), 2026-08-07 : le mot « Recherche » est remplacé par la loupe et l'entrée passe en tête de la nav de droite, à gauche de « Newsletters » (demande Baptiste). « Expertises » a été retirée du header le même jour — la page reste en ligne et joignable par les cartes et les pastilles de thématique. Le libellé n'est pas supprimé du balisage, seulement masqué visuellement : le lien garde un nom accessible pour les lecteurs d'écran et la navigation vocale. L'icône passe par `::before`, `::after` portant déjà la barre de survol. */ .medianes-header__recherche .wp-block-navigation-item__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .medianes-header__recherche .wp-block-navigation-item__content::before { content: ""; width: 24px; height: 24px; flex: none; background: url(assets/icon-search.svg) center / contain no-repeat; } .medianes-header__nav .current-menu-item .wp-block-navigation-item__content { font-weight: 700; } /* Recette #98/#99 : état actif des liens custom du header (pas de current-menu-item auto sur les liens custom → ciblage par classe de slug du body + href). */ body.medianes-page-expertises .medianes-header__nav .wp-block-navigation-item__content[href="/expertises/"], body.medianes-page-newsletters .medianes-header__nav .wp-block-navigation-item__content[href="/newsletters/"], body.medianes-page-a-propos .medianes-header__nav .wp-block-navigation-item__content[href="/a-propos/"], body.search .medianes-header__nav .wp-block-navigation-item__content[href="/?s="] { font-weight: 700; } body.medianes-page-expertises .medianes-header__nav .wp-block-navigation-item__content[href="/expertises/"]::after, body.medianes-page-newsletters .medianes-header__nav .wp-block-navigation-item__content[href="/newsletters/"]::after, body.medianes-page-a-propos .medianes-header__nav .wp-block-navigation-item__content[href="/a-propos/"]::after, body.search .medianes-header__nav .wp-block-navigation-item__content[href="/?s="]::after { background: var(--wp--preset--color--bleu-09); } /* Actions du header (compte, langue) */ .medianes-header__account { display: flex; align-items: center; } /* Recette #61 : bouton langue transparent (sans ombre ni habillage natif), avec pictos Lucide « languages » + chevron (capture maquette). */ .medianes-header__lang { display: inline-flex; align-items: center; /* Ticket #75 : 6px entre l'icône traduction, « Français » et le chevron. */ gap: var(--wp--preset--spacing--micro); } /* ⚠️ L'ICÔNE EST PORTÉE PAR LE ``, PAS PAR LE CONTENEUR. Elle était un `::before` de `.medianes-header__lang`, c'est-à-dire du `
` qui ENVELOPPE le `
` : cliquer dessus ne déclenchait donc rien, alors que le chevron — porté par le résumé — ouvrait bien le menu. Deux pictogrammes côte à côte dont un seul répond : relevé par Baptiste le 2026-09-14. Le déplacer suffit, le résumé étant déjà la zone sensible du composant. Le `gap` de 6px est le même de part et d'autre, l'espacement ne bouge pas. */ .medianes-header__lang .medianes-langue__barre::before { content: ""; width: 24px; height: 24px; flex: none; background: url(assets/icon-languages.svg) center / contain no-repeat; } /* 2026-08-07 : le `` natif était utilisé jusqu'au 2026-08-07 : le navigateur impose à sa liste déroulante le style du système d'exploitation, impossible à mettre en charte. Remplacé par le composant maison du thème, celui du filtre « Filtrer par domaine » (§ .medianes-filtre) : `
` + `` + liste de liens, sans une ligne de JavaScript. Ce qui est REPRIS du filtre : le vocabulaire visuel du panneau — carte blanche, bordure 0,5px bleu-08, rayon 6px, ombre douce, lignes séparées par un filet, cercle de sélection à droite, survol bleu-00, sélection bleu-02 + cercle pointé. Ce qui ne l'est PAS : les dimensions. Le filtre est calibré pour une carte de 345px en Degular Medium 22 posée dans le contenu ; le header demande la taille de ses propres liens. Les classes sont donc distinctes plutôt que partagées — les mutualiser aurait obligé à défaire dans le header la moitié des règles du filtre. La BARRE, elle, ne prend pas l'encadré du filtre : elle garde l'apparence dessinée pour le header (icône « langues » du conteneur, libellé, chevron), seul le panneau ouvert adopte le langage du menu déroulant. */ .medianes-langue { display: inline-flex; } .medianes-langue__barre { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--micro); cursor: pointer; list-style: none; } .medianes-langue__barre::-webkit-details-marker { display: none; } .medianes-langue__barre::after { content: ""; width: 16px; height: 16px; flex: none; background: url(assets/icon-chevron-down.svg) center / contain no-repeat; transition: transform 0.15s ease; } .medianes-langue[open] .medianes-langue__barre::after { transform: rotate(180deg); } /* Panneau : sorti du flux pour se superposer au contenu plutôt que déformer le header. Aligné à DROITE (`right: 0`) et non à gauche comme celui du filtre : le sélecteur est la dernière chose du header, un panneau aligné à gauche déborderait de la fenêtre. z-index 90 : au-dessus des autres enfants du header, lui-même à 80. */ .medianes-langue__options { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; display: flex; flex-direction: column; min-width: 100%; width: max-content; margin: 0; padding: 0; list-style: none; border: 0.5px solid var(--wp--preset--color--bleu-08); border-radius: 6px; background: var(--wp--preset--color--blanc); box-shadow: 0 1px 12px var(--wp--preset--color--bleu-02); /* Le panneau est détaché de la barre (8px) : sans bordure commune, les quatre coins sont arrondis, contrairement au filtre dont le panneau se raccorde au bouton. `overflow: hidden` évite que le fond d'une ligne survolée déborde des coins. */ overflow: hidden; } .medianes-langue__option { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--petit); padding: var(--wp--preset--spacing--micro) var(--wp--preset--spacing--petit); font-family: var(--wp--preset--font-family--degular-text); font-size: var(--wp--preset--font-size--corps); line-height: 1.2; color: var(--wp--preset--color--bleu-08); text-decoration: none; white-space: nowrap; } .medianes-langue__options li+li .medianes-langue__option { border-top: 0.5px solid var(--wp--preset--color--bleu-08); } .medianes-langue__option::after { content: ""; width: 20px; height: 20px; flex: none; background: url(assets/icon-circle.svg) center / contain no-repeat; } .medianes-langue__option:hover, .medianes-langue__option:focus-visible { background: var(--wp--preset--color--bleu-00); } .medianes-langue__option.is-active { background: var(--wp--preset--color--bleu-02); } .medianes-langue__option.is-active::after { background-image: url(assets/icon-circle-dot.svg); } /* Header mobile (composant Figma « bloc header mobile » 2777:38910 : logo + burger seulement ; les univers passent dans le menu). */ /* Recette #17 : les pastilles d'univers (Le média / Le studio) restent visibles ; elles ne se replient dans le menu que sur mobile (≤600px). */ @media (max-width: 600px) { .medianes-univers-switch { display: none; } } /* Bascule menu mobile ↔ navigation desktop, à 1276px (point demandé en recette #52/#17 ; c'était déjà le seuil auquel le burger natif était forcé). 2026-07-28 : l'overlay natif du bloc Navigation a été remplacé par le pattern medianes/menu-mobile — il n'accepte que des blocs de navigation en enfants, donc ni la carte newsletters ni le CTA de la maquette 3228:29132 ne pouvaient y entrer (cf. ADR-009). Le bloc Navigation est passé en overlayMenu:"never" : il ne rend plus qu'un