/* ============================================================ ZELLIJ STUDIO — COUCHE PARTAGÉE « ÉDITORIAL IMMERSIF » ------------------------------------------------------------ Le vocabulaire visuel de la nouvelle page d'accueil, extrait pour être réutilisé par TOUTES les pages du site. Source : Experiments/Refonte_ERA_2026-07-27/styles.css Écrit une seule fois → les 22 articles (puis les 12 pages principales) héritent du même hero immersif, du même rythme clair/sombre, des mêmes révélations au scroll. Chargé après styles.css et tokens.css. ============================================================ */ /* ------------------------------------------------------------ 1 · SOCLE — le scroll est piloté par Lenis (voir zellij-motion.js). scroll-behavior:smooth et Lenis se contredisent : le CSS ne reprend la main que si Lenis est absent (classe .no-lenis). ------------------------------------------------------------ */ html { scroll-behavior: auto; overflow-anchor: none; } html.no-lenis { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html.no-lenis { scroll-behavior: auto; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Grain : la texture papier de l'accueil, sur tout le site. */ .grain { position: fixed; z-index: 80; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.045; pointer-events: none; animation: grain 9s steps(8) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2%, 3%); } 50% { transform: translate(3%, -2%); } 75% { transform: translate(-3%, -3%); } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; } } /* ------------------------------------------------------------ 2 · RÉVÉLATIONS AU SCROLL Le texte se pose (flou → net), il n'apparaît pas d'un coup. Posé par IntersectionObserver, pas de dépendance externe. ------------------------------------------------------------ */ .rev { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity var(--duree-longue) var(--ease), transform var(--duree-longue) var(--ease), filter var(--duree-longue) var(--ease); will-change: opacity, transform, filter; } .rev.vu { opacity: 1; transform: none; filter: none; } .no-motion .rev, .no-js .rev { opacity: 1; transform: none; filter: none; transition: none; } /* ------------------------------------------------------------ 3 · TYPOGRAPHIE ÉDITORIALE — le « display » de l'accueil ------------------------------------------------------------ */ .eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; /* --accent = la couleur de rubrique de LA page. Doré si non précisée. C'est le petit signal qui donne son univers à chaque page sans sortir du système commun. */ color: var(--accent, var(--gold)); } /* 🚨 TOUS LES TITRES SERIF DU SITE PASSENT PAR ICI. Latifa, 30/07 : « toute la page Kit, le serif n'est pas épaissi, revois toute la page ». Et elle a LU « 16 pages » là où le site écrit « 46 » — à cette graisse, le 4 du Bodoni passe pour un 1. Sur la page produit, ce n'est plus un détail de goût. Deux causes empilées, les deux corrigées le 30/07 : 1. `assets/fonts/fonts.css` déclarait `font-weight:400 600`, ce qui **clampe** l'axe variable. Les fichiers, eux, vont jusqu'à 900 (mesuré au canvas). Passé à `400 900`. 2. Ici, la graisse était écrite dans `font-variation-settings` sous la forme `"wght" 600`. ⚠️ Un `wght` posé là **écrase `font-weight`** : toute tentative d'épaissir ailleurs restait sans effet, sans erreur et sans conflit visible. On ne garde donc dans `font-variation-settings` que l'axe optique, et la graisse repasse par `font-weight`, où le reste du CSS peut la corriger. 🚨 30/07 (soir) — LA POLICE A CHANGE, et ces deux corrections n'etaient que des pansements. Le probleme n'etait ni la plage de font-face ni le `wght` mal place : c'etait la FAMILLE. Bodoni Moda est une Didone, ses delies sont des cheveux par construction, et epaissir creuse l'ecart au lieu de le combler. Newsreader le remplace (voir `fonts.css`). Consequence directe : le bridage de l'axe optique disparait. Il n'existait que pour empecher le Bodoni d'affiner ses delies en grandissant. Newsreader n'a pas ce defaut, et son axe optique s'arrete a 72 : on laisse donc `font-optical-sizing` faire son travail automatiquement, ce qui reste juste a toutes les tailles au lieu d'etre regle pour une seule. ⚠️ Ne remettre ni `"wght"` ni `"opsz"` dans `font-variation-settings` : le premier ecrase `font-weight` en silence, le second refige ce qu'on vient de liberer. La graisse se pilote par `font-weight`, et nulle part ailleurs. ⚠️ Newsreader plafonne a 800. Demander 900 serait clampe sans erreur. */ .page-hero h1, .article-body h2, .article-related h2, .faq-block h2, .article-body h3, .section-heading h2, .featured-product h2, .format-grid h2, .sales-cta h2, .admin-kit-copy h2, .proof-result h3, .contents-grid h3, .value-grid h3, .proof-card h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; } /* ------------------------------------------------------------ 4 · HERO IMMERSIF — une image par sujet L'image arrive de la page (`--hero-img`), la mise en scène est ici : plein cadre, voile prune, titre en Bodoni clair, indice de défilement. C'est le hero de l'accueil, à l'échelle article. ------------------------------------------------------------ */ /* styles.css cible `.page-hero.blog-page` (2 classes) : il faut la même force ici, sinon l'ancien fond horizontal gagne — et l'ancienne image se télécharge pour rien derrière la nouvelle. */ .page-hero, .page-hero.blog-page, .page-hero.contenus-hero, .page-hero.studio-hero, .page-hero.portfolio-hero, .page-hero.admin-hero { position: relative; display: flex; /* Le texte etait colle en bas (`flex-end`) : il s'ecrasait sur la partie chargee des photos pendant que le haut du mur restait vide. Pose en haut, il occupe la zone calme et degage ~200 px d'image sous lui — la composition pour laquelle ces photos ont ete choisies. `flex-start` s'appuie sur le padding-top (nav + marge) : c'est le plus haut possible sans venir toucher le fil d'Ariane. */ align-items: flex-start; overflow: hidden; min-height: min(88svh, 780px); padding: calc(var(--navh) + clamp(60px, 12vh, 130px)) clamp(20px, 4vw, 56px) clamp(48px, 9vh, 96px); border-bottom: 0; background-color: var(--plum-deep); background-image: none; } .page-hero::before { position: absolute; z-index: 0; inset: 0; background-image: var(--hero-img, url("/assets/hero-kit-fondatrice-clean.jpg")); background-position: center; background-size: cover; content: ""; transform: scale(1.06); transition: transform 1.6s var(--ease); } .page-hero.pret::before { transform: scale(1); } /* Voile vertical : le titre est en bas, donc l'ombre est en bas. L'ancien voile de styles.css était horizontal (pensé desktop) et laissait le titre illisible sur téléphone. */ .page-hero::after { position: absolute; z-index: 1; inset: 0; /* ⚠️ Ce voile creusait à 0.12 vers 32 % de hauteur — pensé pour un titre posé tout en bas (l'accueil). Or sur les pages à texte long le bloc remonte : mesuré sur /commencer/, le titre occupe 30 %→54 %, donc pile dans le creux. D'où des titres blancs illisibles sur les zones claires de la photo. Le voile protège maintenant tout le bas. */ background: linear-gradient( 180deg, rgba(34, 20, 32, 0.46) 0%, rgba(34, 20, 32, 0.38) 18%, rgba(34, 20, 32, 0.56) 42%, rgba(34, 20, 32, 0.78) 70%, rgba(34, 20, 32, 0.92) 100% ); content: ""; pointer-events: none; } .page-hero-inner { position: relative; z-index: 2; max-width: min(var(--wrap), 100%); margin: 0 auto; width: 100%; color: var(--paper); } /* Sur une photo, la lisibilité passe avant la couleur de rubrique : le surtitre était beige (#e9d9c7) et se noyait dans les tons clairs. La rubrique reste signalée partout ailleurs (filets, cadres, encadrés). */ .page-hero .eyebrow { color: #ffffff; text-shadow: 0 1px 18px rgba(24, 13, 22, 0.6), 0 1px 3px rgba(24, 13, 22, 0.5); } .breadcrumb, .article-breadcrumb { text-shadow: 0 1px 10px rgba(24, 13, 22, 0.6); } .page-hero h1 { max-width: 22ch; margin-top: 16px; /* Blanc éclatant, pas le blanc cassé du papier : sur une photo, le titre doit trancher. */ color: #ffffff; font-size: clamp(2.5rem, 5.6vw, 4.9rem); /* 30/07 : 400 sur une photo, c'est le cas le PIRE — les delies du Bodoni disparaissent dans les zones claires de l'image. 700 maintenant que `fonts.css` ne bride plus l'axe (il declarait `400 600`). */ font-weight: 700; line-height: 1.04; /* Deux ombres : une large qui assombrit le fond derrière la lettre, une courte et serrée qui en redessine le bord. C'est la seconde qui rend le texte net sur les zones claires de la photo. */ text-shadow: 0 2px 30px rgba(24, 13, 22, 0.55), 0 1px 4px rgba(24, 13, 22, 0.5); } .page-hero p:not(.eyebrow) { max-width: 46ch; margin-top: 22px; /* Était #f0e6ee (rosé pâle) : trop proche des tons clairs de la photo. Blanc franc + ombre, comme le titre. */ color: #ffffff; font-family: var(--sans); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.7; text-shadow: 0 1px 12px rgba(24, 13, 22, 0.55); } /* Fil d'Ariane : posé sur le hero, pas au-dessus. */ .breadcrumb, .article-breadcrumb { position: absolute; z-index: 3; top: calc(var(--navh) + 18px); left: 0; width: 100%; padding: 0 clamp(20px, 4vw, 56px); color: #d9c9d6; font-size: 12.5px; letter-spacing: 0.04em; } .breadcrumb a, .article-breadcrumb a { color: #e9d9c7; text-decoration: none; } /* Indice de défilement, comme sur l'accueil. */ .scrollcue { position: absolute; z-index: 3; right: clamp(20px, 4vw, 56px); bottom: clamp(30px, 5vh, 54px); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #e4d6e0; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; } .scrollcue i { width: 1px; height: 46px; background: linear-gradient(180deg, #e4d6e0, transparent); animation: cue 2.2s var(--ease) infinite; } @keyframes cue { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 40% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } } @media (prefers-reduced-motion: reduce) { .scrollcue i { animation: none; } .page-hero::before { transform: none; transition: none; } } @media (max-width: 720px) { .scrollcue { display: none; } /* 🚨 CORRIGE LE 30/07 — cette regle ne s'appliquait PAS aux articles. Latifa : « des fois il y a de trop grands ecarts de vide inexplique, comme s'il manquait quelque chose ». Mesure sur /ressources/ en 390 px : hero de 743 px pour 464 px de contenu, soit 279 px de vide SOUS le texte. Cause : la regle desktop est ecrite sur une LISTE de selecteurs qui contient `.page-hero.blog-page` — DEUX classes. Celle-ci n'en avait qu'une. Sur toutes les pages en `blog-page` (les 21 articles, les 5 rubriques et l'index des ressources), la version desktop gagnait donc malgre la media-query : hauteur de 88svh ET contenu colle en haut. Les pages commerciales, elles, obeissaient — d'ou un defaut qui n'apparaissait que par endroits, « des fois ». On reprend la meme force de selecteur, comme partout ailleurs dans ce fichier (piege 5). Et `center` plutot que `flex-end` : le texte cesse de s'ecraser sur la partie chargee des photos, et le vide restant se repartit haut/bas au lieu de s'accumuler en bas. */ .page-hero, .page-hero.blog-page, .page-hero.contenus-hero, .page-hero.studio-hero, .page-hero.portfolio-hero, .page-hero.admin-hero, .page-hero.kit-sales-hero, .page-hero.ressources-hero { align-items: center; min-height: min(78svh, 620px); padding-top: calc(var(--navh) + clamp(34px, 7vh, 64px)); padding-bottom: clamp(34px, 6vh, 64px); } } /* ------------------------------------------------------------ 5 · CORPS D'ARTICLE — le « chapitre clair » de l'accueil ------------------------------------------------------------ */ .article-shell { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 11vh, 130px) clamp(20px, 4vw, 56px) clamp(70px, 12vh, 150px); background: var(--paper); } .article-meta { color: var(--accent, var(--gold)); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } /* 30/07 — Cette ligne est devenue un LIEN vers la rubrique de l'article (avant : des mots-cles sans accents, ecrits a la main dans 24 fichiers ; voir `_data/cocon.js`). Un lien de 11.5 px fait une cible de 14 px de haut : intouchable au doigt, et « les effets doivent marcher au doigt » est une regle du chantier. On lui donne une vraie zone tactile. Le soulignement natif tombe : a cette taille et avec 0.2em de lettrage, il coupe les jambages. Un filet sous le texte le remplace, decolle. */ .article-meta a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-thickness: 1px; /* Le texte est en capitales : aucun jambage a couper, mais a 0.2em de lettrage un trait collé au texte l'alourdit. On le decolle. */ text-underline-offset: 5px; } .article-body { margin-top: clamp(26px, 4vh, 44px); color: var(--ink-soft); font-size: clamp(1rem, 1.1vw, 1.09rem); } .article-body > p, .article-body > ul, .article-body > ol { max-width: var(--largeur-texte); } .article-body p, .article-body li { color: var(--ink-soft); line-height: 1.78; } .article-body li + li { margin-top: 0.5em; } /* 30/07 (soir) — GRAISSE RELEVEE AVEC LE CHANGEMENT DE POLICE. Ces titres etaient a 400. Ils echappaient aux deux passes d'epaississement precedentes parce que ces regles-ci arrivent APRES le bloc « GRAISSE DES TITRES » en fin de fichier : a specificite egale ou superieure, c'est la derniere qui gagne. On ne l'a vu qu'en relevant la graisse CALCULEE de chaque titre de chaque page dans le navigateur — 213 titres etaient concernes, sur 22 pages. Relire le CSS ne suffisait pas. ⚠️ Si un titre parait encore maigre, chercher la DERNIERE regle qui le vise, pas la premiere. */ /* Titres de section : l'accent italique bordeaux de l'accueil. */ .article-body h2 { max-width: 26ch; margin-top: clamp(60px, 9vh, 108px); margin-bottom: 18px; color: var(--ink); font-size: clamp(1.95rem, 3.1vw, 3rem); font-weight: 700; line-height: 1.1; } .article-body h2 em, .article-body h2 i { color: var(--bordeaux); font-style: italic; } /* Un filet doré discret ouvre chaque section : c'est le repère de chapitre de l'accueil, réduit à l'échelle d'un article. */ .article-body h2::before { display: block; width: 46px; height: 1px; margin-bottom: 26px; background: var(--accent, var(--gold)); content: ""; } /* 🚨 LES « VIDES INEXPLIQUES » DU GLOSSAIRE — corrige le 30/07. Latifa : « des fois il y a de trop grands ecarts de vide inexplique, comme s'il manquait quelque chose ». Vu sur le glossaire. Cause : l'ecart de CHAPITRE de `.article-body h2/h3` s'appliquait a des titres qui ne sont pas des chapitres mais des en-tetes de CARTE. Mesure en 390 px : le titre « Les fondations de la marque » portait `margin-top: 76px` dans une carte dont le padding-haut fait 22px, et les 12 titres de definitions portaient 42px alors que leur carte a DEJA 40px de padding et 40px de marge. Soit ~82px entre le filet et le mot. 14 titres concernes sur la seule page du glossaire. Les cartes gardent leur propre respiration (marge + padding + filet) : on ne retire QUE le surplus herite. Le filet dore `::before` reste, c'est le repere de rubrique. Deux classes contre une, volontairement : le style des cartes vit dans le `styles.css` de PROD, qu'on ne modifie pas (piege 4). On reprend la main sans dependre de l'ordre des fichiers. */ .article-body .glossary-sommaire-head h2, .article-body .glossary-term-head h2, .article-body .glossary-term-head h3 { margin-top: 0; } .article-body h3 { max-width: 30ch; margin-top: clamp(38px, 5vh, 56px); margin-bottom: 12px; color: var(--bordeaux); font-size: clamp(1.35rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.22; } .article-body strong { color: var(--ink); font-weight: 600; } .article-body a:not(.button) { color: var(--bordeaux); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(123, 44, 63, 0.28); transition: border-color var(--duree) var(--ease); } .article-body a:not(.button):hover { border-bottom-color: var(--bordeaux); } /* Encadré : la carte douce de l'accueil. */ .article-note { max-width: var(--largeur-texte); margin: clamp(34px, 5vh, 52px) 0; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(161, 138, 88, 0.34); border-left: 3px solid var(--accent, var(--gold)); border-radius: var(--rayon); /* Le fond n'est plus un beige fixe : c'est un voile de la couleur de RUBRIQUE de la page. Chaque page garde ainsi son univers, et le fond du site reste blanc. La 1re ligne est le repli des vieux navigateurs. */ background: #f7f5f7; background: color-mix(in srgb, var(--accent, var(--gold)) 7%, #ffffff); color: var(--ink); } .article-note p { color: var(--ink); } /* ------------------------------------------------------------ 6 · BANDE SOMBRE D'APPEL — la bascule d'ambiance de l'accueil, pleine largeur, qui coupe la lecture au bon moment. ------------------------------------------------------------ */ /* ⚠️ Piège de spécificité, corrigé le 29/07. Ce bloc sort de sa colonne pour occuper toute la largeur. La recette classique est `left:50%` compensé par `margin-left:-50vw`. Or le CSS de prod contient `.questions-section .article-cta { margin-left:auto }` : DEUX classes contre une, il gagnait. La compensation sautait, `left:50%` restait, et le bloc partait 195 px hors de l'écran (vu sur /commencer/). On reprend la main avec la même force, et sans dépendre de `left`. */ .article-cta, .questions-section .article-cta { position: relative; left: 0; width: 100vw; max-width: none; margin: clamp(80px, 13vh, 150px) 0 0; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding: clamp(70px, 12vh, 130px) clamp(20px, 4vw, 56px); border: 0; border-radius: 0; background: var(--plum-deep); color: var(--paper); text-align: center; } /* 🚨 Le titre etait INVISIBLE sur les 24 pages d'articles — vu par Latifa au telephone le 30/07 : « on dirait qu'il n'y a pas de texte ». Cause : aucune regle ne visait `.article-cta h2`. Le titre retombait donc sur la balise nue de `styles.css` (prod), `h2 { color: var(--bordeaux-dark) }`, soit rgb(36,23,34) — pose sur `--plum-deep` rgb(34,20,32). Contraste MESURE : 1.03:1. Le texte etait la, simplement peint en sombre sur du sombre. C'est le piege 5 dans sa forme la plus discrete : la balise nue ne declenche aucun conflit visible au diagnostic, elle repeint. Meme force de selecteur que le bloc au-dessus, pour la meme raison. */ .article-cta h2, .questions-section .article-cta h2 { max-width: 24ch; margin: 0 auto 22px; color: var(--paper); font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1; /* Vraie graisse, pas un contour : `fonts.css` ne bride plus l'axe variable depuis le 30/07 (il declarait `400 600`, ce qui clampait). */ font-weight: 700; } /* Le filet de chapitre (`.article-body h2::before`) heritait ici alors que le bloc est CENTRE : il se posait tout a gauche, comme un trait oublie. On le recentre au lieu de le supprimer — il garde le repere visuel de l'accueil. */ .article-cta h2::before, .questions-section .article-cta h2::before { margin-right: auto; margin-left: auto; background: var(--gold); } .article-cta p { max-width: 30ch; margin: 0 auto 30px; color: #e7ddef; font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 400; font-style: italic; line-height: 1.22; } .article-cta .button, .article-cta a.button.primary { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border: 0; border-radius: var(--rayon-pilule); background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14.5px; font-weight: 600; transition: transform var(--duree) var(--ease), background var(--duree); } .article-cta .button:hover { transform: translateY(-2px); background: #fff; } /* ------------------------------------------------------------ 7 · FAQ — dépliants sobres ------------------------------------------------------------ */ .faq-block { max-width: 66ch; margin-top: clamp(60px, 9vh, 100px); } .faq-block h2 { margin-bottom: 26px; } .faq-block details { padding: 20px 0; border-bottom: 1px solid rgba(36, 23, 34, 0.12); } .faq-block summary { cursor: pointer; color: var(--ink); font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.24rem); font-weight: 600; list-style: none; } .faq-block summary::-webkit-details-marker { display: none; } .faq-block summary::after { float: right; margin-left: 16px; color: var(--accent, var(--gold)); content: "+"; font-family: var(--sans); transition: transform var(--duree) var(--ease); } .faq-block details[open] summary::after { content: "–"; } .faq-block details p { margin-top: 12px; color: var(--ink-soft); } /* ------------------------------------------------------------ 8 · « LIRE AUSSI » — les cartes de l'accueil ------------------------------------------------------------ */ .article-related { margin-top: clamp(70px, 11vh, 130px); } .article-related h2 { margin-bottom: 30px; color: var(--ink); font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 700; } .article-related h2::before { display: block; width: 46px; height: 1px; margin-bottom: 24px; background: var(--accent, var(--gold)); content: ""; } .article-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(16px, 2.2vw, 28px); margin: 0; padding: 0; list-style: none; } .article-related li { margin: 0; } .article-related li a { display: flex; align-items: flex-end; min-height: 148px; padding: 26px; border: 1px solid rgba(36, 23, 34, 0.1); border-radius: var(--rayon-grand); background: #fff; color: var(--ink); font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.28; text-decoration: none; transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease), border-color var(--duree) var(--ease); } .article-related li a::after { margin-left: auto; padding-left: 14px; color: var(--bordeaux); content: "→"; font-family: var(--sans); font-size: 1rem; } .article-related li a:hover { transform: translateY(-6px); border-color: rgba(123, 44, 63, 0.32); box-shadow: 0 40px 60px -42px rgba(36, 23, 34, 0.32); } /* ------------------------------------------------------------ 9 · BARRE DE LECTURE — sait où on en est dans l'article. Plus utile qu'un rail de sections sur un texte long. ------------------------------------------------------------ */ .lecture-progress { position: fixed; z-index: 70; top: 0; left: 0; width: 100%; height: 3px; background: transparent; pointer-events: none; } .lecture-progress i { display: block; width: var(--avancement, 0%); height: 100%; background: linear-gradient(90deg, var(--gold), var(--bordeaux)); } /* ------------------------------------------------------------ 10 · EN-TÊTE — transparente sur le hero, givrée au scroll. ------------------------------------------------------------ */ .site-header { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: var(--navh); padding: 0 clamp(18px, 3vw, 44px); border: 0; background: transparent; box-shadow: none; transition: background var(--duree-longue), box-shadow var(--duree-longue); } .site-header.defile { background: rgba(252, 250, 246, 0.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(36, 23, 34, 0.08); } /* Au-dessus du hero (donc sur fond sombre), les libellés passent en clair. */ .site-header:not(.defile) .site-nav a, .site-header:not(.defile) .menu-toggle { color: var(--paper); } .site-header .site-nav a { font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; } /* ------------------------------------------------------------ 11 · PIED DE PAGE — le prune profond de l'accueil. ------------------------------------------------------------ */ footer { position: relative; padding: clamp(60px, 9vh, 92px) clamp(20px, 4vw, 56px) clamp(34px, 5vh, 52px); background: var(--plum-deep); color: #cdbbc9; text-align: center; } footer > p { max-width: 34ch; margin: 18px auto 26px; color: #e7ddef; font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-style: italic; line-height: 1.4; } .footer-contact { display: inline-block; margin-bottom: 8px; color: #e7ddef; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(231, 221, 239, 0.46); text-underline-offset: 4px; } .footer-contact:hover, .footer-contact:focus-visible { color: #ffffff; text-decoration-color: currentColor; } footer .social-links, footer .footer-links { display: flex; flex-wrap: wrap; gap: 10px clamp(16px, 2.4vw, 30px); justify-content: center; margin-top: 18px; } footer a { color: #cdbbc9; font-family: var(--sans); font-size: 14px; text-decoration: none; transition: color var(--duree); } footer a:hover { color: var(--rose); } footer .footer-legal { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(217, 169, 180, 0.16); } footer .footer-legal a { font-size: 12.5px; letter-spacing: 0.05em; opacity: 0.75; } /* ------------------------------------------------------------ 12 · BOUTON « REMONTER » ------------------------------------------------------------ */ .scroll-top { border: 0; background: var(--bordeaux); color: #fff; box-shadow: 0 18px 34px -18px rgba(36, 23, 34, 0.6); transition: transform var(--duree) var(--ease), background var(--duree); } .scroll-top:hover { transform: translateY(-3px); background: var(--bordeaux-dark); } /* ------------------------------------------------------------ 13 · DESKTOP — la gouttière de droite devient une marge vivante. Le texte garde sa longueur de ligne lisible, les titres respirent plus large : c'est la mise en page éditoriale. ------------------------------------------------------------ */ @media (min-width: 1100px) { .article-body > p, .article-body > ul, .article-body > ol, .article-note { margin-left: clamp(0px, 6vw, 96px); } .article-body h2, .article-body h3 { margin-left: 0; } } /* ------------------------------------------------------------ 14 · LOGO — blanc au-dessus du hero, couleur ensuite. Sans ça, le logo prune/olive disparaît sur une photo claire. ------------------------------------------------------------ */ .site-header .brand { position: relative; display: inline-flex; align-items: center; } .site-header .brand img { transition: opacity var(--duree) var(--ease); } .site-header .brand .l-white { position: absolute; top: 0; left: 0; } .site-header:not(.defile) .brand .l-color, .site-header.defile .brand .l-white { opacity: 0; } /* ------------------------------------------------------------ 15 · NAV AU-DESSUS DU HERO — contraste. styles.css verrouille la couleur des liens avec `!important` (ligne 2991 : `color: var(--ink) !important`). Sur une photo, ces liens deviennent illisibles : il faut la même force pour reprendre la main, et seulement quand l'en-tête est sur l'image. ------------------------------------------------------------ */ .site-header:not(.defile) .site-nav a { color: #f3ecf1 !important; text-shadow: 0 1px 14px rgba(24, 13, 22, 0.55); } .site-header:not(.defile) .site-nav a:hover, .site-header:not(.defile) .site-nav a:focus-visible, .site-header:not(.defile) .site-nav a[aria-current="page"] { color: #fff !important; border-bottom-color: var(--rose); } .site-header:not(.defile) .menu-toggle { color: #f3ecf1; text-shadow: 0 1px 14px rgba(24, 13, 22, 0.55); } /* ============================================================ BEIGES RÉSIDUELS DU CSS DE PROD ------------------------------------------------------------ Décision du 28/07/2026 : « pas de beige, fond blanc pur ». Le fond général passe par --paper, donc il suit tout seul. Restent quelques `#fffdf8` écrits EN DUR dans styles.css, que les tokens ne peuvent pas atteindre. On les neutralise ici plutôt que de retoucher les 4 912 lignes du CSS de prod : ce fichier-ci est chargé après, et c'est lui qui part au déploiement. styles.css, lui, n'y va pas. ============================================================ */ .newsletter-form input[type="text"], .newsletter-form input[type="email"] { background: var(--paper); } /* Fond de vignette (les visuels d'aperçu se chargent en différé). */ .preview-grid img { background: var(--paper); } /* Carte du popup « freebie » (le PDF offert). */ .freebie-popup-card { background: var(--paper); } /* ============================================================ INDEX /ressources/ — « la ligne active pilote le visuel » ------------------------------------------------------------ Prototype validé par Latifa le 28/07/2026, reversé ici. Principe : UN seul mécanisme, DEUX déclencheurs. Au doigt, c'est le DÉFILEMENT qui désigne la ligne active (le visuel est collé en haut et ne quitte pas l'écran). À la souris, c'est le survol. Pas d'effet réservé au desktop. Les classes sont préfixées `res-` : styles.css de prod ne les connaît pas, donc aucune collision possible. ============================================================ */ .res-visuel { position: sticky; /* L'en-tête du site est fixe : sans ce décalage, le visuel se colle dessous et l'image est coupée par la barre. --navh seule ne suffit pas (l'en-tête mesurée fait 16 px de plus) : on reprend le même `+ 18px` que le fil d'Ariane, qui, lui, tombe juste. */ top: calc(var(--navh) + 18px); z-index: 2; background: var(--paper); padding: 8px 0 18px; } .res-panneau { --c: var(--sauge); height: 34vh; min-height: 220px; padding: 10px; border-radius: 4px; background: var(--c); transition: background var(--duree-longue) var(--ease); } .res-cadre { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; } .res-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.06); transition: opacity 240ms var(--ease), clip-path var(--duree-longue) var(--ease), transform 1400ms var(--ease); } .res-cadre img.montre { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); } /* ------------------------------------------------------------ LE PARCOURS DANS LE HERO DE /ressources/ — 30/07 ------------------------------------------------------------ Latifa : « le texte en dessous doit etre mis en valeur, ca donne les etapes a accomplir, essentiel pour etre bien guidee, donc ca doit etre visible et beau ». Le paragraphe n'avait aucun style propre : il heritait du texte courant, sur une photo, et il ANNONCAIT un ordre sans jamais le montrer. Ici : le texte prend une vraie taille de chapeau, et les 5 etapes deviennent visibles, numerotees, dans la couleur de leur rubrique. Choix mobile-first, sa regle : ca DOIT marcher au doigt. Donc pas de defilement horizontal (qui cacherait des etapes), mais un retour a la ligne — les 5 etapes sont toutes visibles d'un coup. Chaque etape est un vrai lien, avec une hauteur de touche confortable. ------------------------------------------------------------ */ .ressources-lede { max-width: 44ch; margin-top: 18px; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.6; /* Sur photo, la lisibilite passe avant tout — meme raison que le surtitre et le fil d'Ariane un peu plus haut dans ce fichier. */ text-shadow: 0 1px 18px rgba(24, 13, 22, 0.6), 0 1px 3px rgba(24, 13, 22, 0.5); } /* 30/07 — Latifa, apres avoir vu la 1re version : « les bulles 5 rubriques dans l'ordre doivent etre une en dessous de l'autre et bien centrees ». J'avais mis un retour a la ligne, ce qui produisait 2 colonnes inegales (2 · 2 · 1) : ca ne se lit plus comme un ORDRE, et c'est justement l'ordre qui compte ici. Une colonne, centree, et chaque bulle a la meme largeur pour que la suite se lise comme un escalier. */ .res-parcours { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 26px auto 0; padding: 0; list-style: none; } .res-parcours li { width: 100%; max-width: 20rem; } .res-parcours a { display: flex; align-items: baseline; justify-content: center; gap: 9px; /* 12px vertical : la zone de touche depasse 44 px avec la hauteur de ligne. Sur telephone, une etape doit s'attraper sans viser. */ padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--rayon-pilule); color: #ffffff; text-decoration: none; transition: border-color var(--duree) var(--ease), background var(--duree); } .res-parcours a:hover, .res-parcours a:focus-visible { border-color: var(--c); background: rgba(255, 255, 255, 0.12); } /* Le numero etait peint dans la couleur de la rubrique. Mesure sur la photo : l'olive tombait a 0.11 de luminance et le bordeaux a 0.064 — illisibles. C'est la lecon deja apprise juste au-dessus pour le surtitre du hero : SUR UNE PHOTO, LA LISIBILITE PASSE AVANT LA COULEUR DE RUBRIQUE. Le numero repasse donc en blanc, et la couleur se dit par la pastille qui le precede — visible sans avoir a etre lue. */ .res-parcours__num { display: inline-flex; align-items: baseline; gap: 7px; color: rgba(255, 255, 255, 0.82); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; } .res-parcours__num::before { width: 6px; height: 6px; border-radius: 50%; background: var(--c); /* Un liseré clair : sur les zones sombres de la photo, une pastille olive ou bordeaux disparaitrait tout autant que le texte. */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); content: ""; } .res-parcours__nom { font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 700; } .res-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .res-ligne { position: relative; border-bottom: 1px solid var(--line); } .res-ligne a { display: block; padding: 20px 0 20px 20px; color: inherit; text-decoration: none; transition: opacity var(--duree, 280ms) var(--ease); } /* Le filet de couleur qui marque la ligne active. */ .res-ligne a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--c); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--duree-longue) var(--ease); } .res-ligne.est-actif a::before { transform: scaleY(1); } /* Les lignes non actives reculent, elles ne disparaissent pas. */ .res-liste.attenue .res-ligne:not(.est-actif) a { opacity: 0.62; } .res-meta { margin: 0 0 8px; color: var(--c); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .res-titre { margin: 0; font-family: var(--serif); font-size: clamp(23px, 5.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; } /* Le résumé est CONSERVÉ (rien n'est retiré au texte de la page), mais borné à 2 lignes : la liste reste parcourable au pouce. */ .res-resume { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; } .res-numero { display: none; } /* --- Grand écran : même effet, déclenché par la souris. Le visuel passe simplement dans la colonne de droite. --- */ @media (min-width: 1000px) { .res-corps { display: grid; grid-template-columns: 1fr minmax(280px, 34%); gap: 56px; align-items: start; } .res-visuel { grid-row: 1; grid-column: 2; top: calc(var(--navh) + 24px); padding: 0; } .res-liste { grid-row: 1; grid-column: 1; } .res-panneau { height: auto; aspect-ratio: 4 / 5; padding: 14px; } .res-ligne a { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: baseline; padding: 26px 0 26px 24px; } .res-numero { display: block; color: var(--c); font-family: var(--serif); font-size: 19px; font-weight: 600; } .res-titre { font-size: clamp(25px, 3vw, 36px); line-height: 1.1; } .res-resume { -webkit-line-clamp: 3; max-width: 56ch; } } @media (prefers-reduced-motion: reduce) { .res-cadre img { clip-path: none !important; transform: none !important; } } /* --- Le glossaire : ce n'est pas un article, c'est un outil qui grandit. Il sort donc de la liste et prend un bloc à lui. --- */ .res-glossaire { display: block; overflow: hidden; margin-top: 48px; border-radius: 4px; background: var(--plum); color: #fff; text-decoration: none; } .res-glossaire__image { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; } .res-glossaire__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); } .res-glossaire:hover .res-glossaire__image img { transform: scale(1.04); } .res-glossaire__texte { padding: 26px 22px 30px; } .res-glossaire__meta { margin: 0 0 10px; color: var(--rose); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* Deux classes, pas une : `styles.css` de prod colore les h3 en bordeaux avec cette force-là. Sur le fond prune, le bordeaux devenait illisible. */ .res-glossaire .res-glossaire__titre { color: #ffffff; } .res-glossaire__titre { margin: 0; font-family: var(--serif); font-size: clamp(26px, 6vw, 34px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; } .res-glossaire__intro { max-width: 46ch; margin: 14px 0 0; color: rgba(255, 255, 255, 0.78); } .res-glossaire__lien { display: inline-block; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.45); font-size: 15px; transition: border-color var(--duree, 280ms) var(--ease); } .res-glossaire:hover .res-glossaire__lien { border-color: #fff; } @media (min-width: 1000px) { .res-glossaire { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: 72px; } .res-glossaire__image { height: 100%; aspect-ratio: auto; } .res-glossaire__texte { align-self: center; padding: 56px 52px; } } /* ============================================================ RÉSEAUX SOCIAUX — le vrai logo, plus le nom ------------------------------------------------------------ Les SVG sont intégrés dans la page (voir `_includes/icones-sociales.njk`) et prennent la couleur du texte : ils restent lisibles sur le footer sombre. Aucun appel réseau. Ici, le PIED DE PAGE seulement : les mêmes icônes dans le menu sont habillées par `css/site-menu.css`, avec tout le reste du menu. ============================================================ */ .social-links a { display: inline-flex; align-items: center; gap: 8px; } .social-links svg { flex: none; /* L'icône s'aligne sur la hauteur de la lettre, pas sur la ligne : sinon elle flotte au-dessus du mot. */ width: 1.15em; height: 1.15em; opacity: 0.92; transition: opacity var(--duree, 280ms) var(--ease); } .social-links a:hover svg, .social-links a:focus-visible svg { opacity: 1; } /* ============================================================ FOOTER — lisibilité des liens ------------------------------------------------------------ Ils étaient en --bordeaux (#7b2c3f) sur le prune #221420 : contraste mesuré 1.91, alors que le minimum lisible est 4.5. Sur un fond sombre, la couleur de marque ne peut pas servir au texte : elle sert au survol et aux à-plats. Le texte, lui, est clair. (Les pastilles de réseaux sont déjà à 9.08 : elles ont un fond clair, on n'y touche pas.) ============================================================ */ footer .footer-links a { color: #e7ddef; transition: color var(--duree, 280ms) var(--ease); } footer .footer-links a:hover, footer .footer-links a:focus-visible { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; } footer .footer-legal a { color: #c3b3c4; } footer .footer-legal a:hover, footer .footer-legal a:focus-visible { color: #ffffff; } /* ============================================================ SECTIONS SOMBRES (.section.dark) — texte clair ------------------------------------------------------------ La prod pose `.dark { background: var(--bordeaux-dark) }` mais ne dit RIEN de la couleur du texte : il héritait donc de l'encre du body (#241722) et se retrouvait presque noir sur bordeaux — contraste ~1.6 quand il en faut 4.5. Repéré par Latifa sur « Lire le guide complet » (/studio/). Les boutons gardent leur propre habillage : on les exclut. ============================================================ */ .section.dark { color: #f0e6ee; } .section.dark h2, .section.dark h3, .section.dark h4, .section.dark .eyebrow, .section.dark strong { color: #ffffff; } .section.dark p, .section.dark li { color: #f0e6ee; } .section.dark a:not(.button) { color: #ffffff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 4px; transition: text-decoration-color var(--duree, 280ms) var(--ease); } .section.dark a:not(.button):hover, .section.dark a:not(.button):focus-visible { text-decoration-color: #ffffff; } /* ============================================================ UNE PAGE PAR RUBRIQUE ------------------------------------------------------------ Deux ajouts seulement, tout le reste réutilise les classes `res-` déjà validées le 28/07 : .res-portes → l'index : 5 portes au lieu de 21 lignes, donc chaque porte peut respirer. .res-liste--pleine → la page de rubrique : la même liste, mais sans visuel collé à côté (les articles d'une rubrique partagent une seule image). .res-voisines → le maillage d'une rubrique vers les autres. ============================================================ */ /* --- L'index : 5 portes. Moins d'entrées = plus de place. --- */ .res-portes .res-ligne a { padding-top: 26px; padding-bottom: 26px; } .res-portes .res-titre { font-size: clamp(28px, 7vw, 34px); } /* Le nombre de ressources passe devant le nom : c'est une promesse de contenu, pas une étiquette de classement. */ .res-portes .res-meta { font-size: 12px; letter-spacing: 0.16em; } .res-portes .res-resume { -webkit-line-clamp: 3; } @media (min-width: 1000px) { .res-portes .res-ligne a { padding-top: 34px; padding-bottom: 34px; } .res-portes .res-titre { font-size: clamp(32px, 3.4vw, 44px); } } /* --- La page de rubrique : la liste occupe toute la largeur. --- */ .res-liste--pleine { margin-top: 8px; } @media (min-width: 1000px) { .res-liste--pleine .res-resume { max-width: 72ch; } } /* --- « Continuer ailleurs » : d'une rubrique aux autres, sans repasser par l'index. C'est ce lien horizontal qui tient le cocon ensemble ; sans lui chaque rubrique serait un cul-de-sac. --- */ /* ⚠️ Collision de prod, piège n°5 : `styles.css` style TOUS les `nav` (flex, puis grille à 3 colonnes en mobile) et TOUS les `nav a` (pastille bordeaux pleine, texte centré). Ce bloc est un vrai `