/* Theme Name: McLeod */ /* Polices auto-hébergées, aucune requête externe (Google Fonts ou autre) */ @font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/plus-jakarta-sans-variable.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Glamour Palace"; src: url("assets/fonts/glamour-palace-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Emphase forte : token préparé en session dédiée, jamais consommé jusqu'ici */ strong, b { color: var(--wp--preset--color--contrast); font-weight: var(--wp--custom--font-weight--strong); } ::selection { background: var(--wp--preset--color--accent); color: black; text-shadow: none; } ::-moz-selection { background: var(--wp--preset--color--accent); color: black; text-shadow: none; } /* Fragment manuscrit dans un titre (ex. hero, accroche centrée). Couleur propre (contrast) : sans elle, un fragment .script hérite simplement du texte courant, la classe ne définissait jusqu'ici que la police et la taille. */ .script { font-family: var(--wp--preset--font-family--script); font-size: 1.2em; color: var(--wp--preset--color--contrast); padding-left: .15em; padding-right: .15em; } /* Panneau indigo : texture à pointillés en arrière-plan, jamais au-dessus du contenu */ .is-style-panel-indigo { position: relative; } .is-style-panel-indigo::before { content: ""; position: absolute; inset: var(--wp--preset--spacing--sm); background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 14px 14px; color: var(--wp--preset--color--foreground); opacity: 0.240; pointer-events: none; z-index: 0; } .is-style-panel-indigo > * { position: relative; z-index: 1; } /* Panneau clair (variation "is-style-panel-clair" sur core/group) : règles de contexte, comme .is-style-panel-indigo pour l'eyebrow. Titres et mention en accent-2 (contraste 4,98:1 sur surface, vérifié) ; strong neutralisé en couleur héritée, sinon il reste blanc (règle globale, pensée pour un fond sombre) — illisible sur ce fond clair. */ .is-style-panel-clair :is(h1, h2, h3, h4, h5, h6), .is-style-panel-clair .mention { color: var(--wp--preset--color--accent-2); } .is-style-panel-clair strong, .is-style-panel-clair b { color: inherit; } /* Boutons dans un panneau (clair ou indigo) ou dans le pied de page : pas d'ombre portée — le bouton global (styles.elements.button, theme.json) en porte une par défaut, pensée pour un bouton posé directement sur le fond de page, pas dans un panneau déjà surélevé visuellement. Les boutons hors panneau gardent leur ombre. */ .is-style-panel-clair .wp-block-button__link, .is-style-panel-indigo .wp-block-button__link, .pied-de-page .wp-block-button__link { box-shadow: none; } /* Sur-titre discret avant un titre de section (ex. "À propos", "Texte et liste"). Couleur dépendante du CONTEXTE, jamais d'un réglage d'instance (textColor) : corail par défaut, ambré dans un panneau indigo (lisible sur ce fond, cf. CLAUDE.md). */ .eyebrow { font-size: var(--wp--preset--font-size--eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent); } .is-style-panel-indigo .eyebrow { color: var(--wp--preset--color--accent-3); } /* Panneau de texte du pattern "À propos" (patterns/about.php) : padding RETIRÉ de l'attribut du bloc (style inline), posé ici par une classe dédiée à la place — lg sur desktop, md sous le breakpoint mobile (≤781px). Pourquoi une classe et pas l'attribut : un style inline poserait padding:lg partout, et le ramener à md sur mobile par-dessus aurait exigé !important (un style inline a une spécificité que seul !important peut battre) — explicitement écarté par Yvan. Une classe CSS ordinaire n'a pas ce problème : les deux valeurs (desktop/mobile) sont posées au même niveau de spécificité, la media query choisit simplement laquelle s'applique selon la largeur, sans jamais avoir besoin de forcer la cascade. Mêmes tokens qu'avant (lg/md), juste déplacés du bloc vers une règle de contexte — le patron déjà suivi ailleurs dans ce thème pour .cartes-ressources__carte, .cta-panneau, etc. (voir CLAUDE.md, "Panneau clair"/"CTA panneau"). */ .about-panel { padding: var(--wp--preset--spacing--lg); } @media (max-width: 781px) { .about-panel { padding: var(--wp--preset--spacing--md); } } /* Déclencheur de contact (pattern "À propos") : taille de boîte fixe (dimension "picto"), jamais modifiée par le survol — seul le SVG à l'intérieur se met à l'échelle (transform), voir plus bas. */ .about-contact-trigger { display: block; position: relative; width: var(--wp--preset--dimension--picto); height: var(--wp--preset--dimension--picto); padding: 0; border: 0; background: none; cursor: pointer; } .about-contact-trigger svg { display: block; position: relative; width: var(--wp--preset--dimension--picto); height: var(--wp--preset--dimension--picto); transition: transform 0.3s ease-out; } /* Composition d'images du pattern "À propos" : colonne 1 fixe (picto), ligne 1 à la hauteur du portrait, ligne 2 (photo laptop) prend le reste. Le portrait garde son ratio 4/5 à toutes les largeurs (aspect-ratio inline posé par l'attribut du bloc Image, plus de height:100% qui l'écrasait) : il n'est jamais l'image réduite. La pastille contact reste carrée à sa taille, calée en haut. */ .about-media { display: grid; grid-template-columns: var(--wp--preset--dimension--picto) 1fr; grid-template-rows: auto 1fr; gap: var(--wp--preset--spacing--md); height: 100%; } /* Neutralise la marge par défaut du layout "flow" de WordPress : l'espacement vient du gap de la grille */ .about-media > * { margin-block-start: 0; } .about-media > :nth-child(1) { grid-column: 1; grid-row: 1; align-self: start; } .about-media > :nth-child(2) { grid-column: 2; grid-row: 1; } .about-media > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; height: 100%; } .about-media .wp-block-image { height: 100%; overflow: hidden; border-radius: var(--wp--preset--border-radius--md); } .about-media .wp-block-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--preset--border-radius--md); } /* Portrait : hauteur dérivée de sa largeur par son ratio 4/5, jamais imposée par la rangée. Deux classes + pseudo-classe : bat .about-media .wp-block-image(/img) ci-dessus. */ .about-media > .wp-block-image:nth-child(2), .about-media > .wp-block-image:nth-child(2) img { height: auto; } /* Une colonne au même seuil que la section Méthode (container query sur la largeur de contenu de la section, pas sur la fenêtre) : 978/979px, voir l'en-tête de blocks/methode/style.css pour l'origine de la valeur — à changer aux deux endroits ensemble. Le container est la section du pattern, repérée par sa structure (:has), aucune classe à ajouter dans le pattern ni dans la page 2. Les colonnes passent en grille d'une seule colonne : core/columns ne s'empile nativement qu'à 781px (flex-basis inline + flex-wrap:nowrap!important du cœur au-delà) ; en grille, ni l'un ni l'autre ne s'applique, aucun !important nécessaire. Panneau puis mosaïque (rangée ou empilement, voir plus bas). Le gap reste celui du bloc (blockGap md). */ .wp-block-group:has(> .wp-block-columns > .wp-block-column > .about-media) { container: a-propos / inline-size; } /* Photo laptop retirée du flux à partir de 600px de section (deux colonnes ET rangée, ci-dessous) : elle remplit sa cellule, recadrée (object-fit:cover), sans jamais peser sur la hauteur. En deux colonnes, son ratio 16/10 entrait sinon dans la hauteur de la rangée de colonnes et allongeait le panneau (mesuré : 499 -> 592px à 1366px) ; en rangée, la hauteur est celle du portrait seul. Sous 600px (empilement), elle garde son ratio naturel. */ @container a-propos (min-width: 600px) { .about-media > .wp-block-image:nth-child(3) { position: relative; } .about-media > .wp-block-image:nth-child(3) img { position: absolute; inset: 0; } } /* Deux colonnes (section ≥ 979px) : comportement d'avant f7828f1 rétabli — ligne 1 à la hauteur du picto, portrait recadré (object-fit:cover) à cette hauteur, aligné sur la pastille contact. Le ratio 4/5 du portrait ne vaut qu'en rangée et en empilement (sous 979px). width + height à 100% sur l'img : l'aspect-ratio inline du bloc Image est alors ignoré. Même spécificité que la règle "height:auto" du portrait plus haut, placée après : elle l'emporte. */ @container a-propos (min-width: 979px) { .about-media { grid-template-rows: var(--wp--preset--dimension--picto) 1fr; } .about-media > .wp-block-image:nth-child(2), .about-media > .wp-block-image:nth-child(2) img { height: 100%; } } @container a-propos (max-width: 978px) { .wp-block-columns:has(> .wp-block-column > .about-media) { display: grid; grid-template-columns: minmax(0, 1fr); } } /* Une colonne, section de 600 à 978px : mosaïque en RANGÉE, portrait 4/5 à gauche, photo laptop à droite, même hauteur (celle du portrait). Colonnes 1fr / 2fr : la photo laptop fait alors 2 × la largeur du portrait pour 1,25 × cette largeur de haut, soit 1,6 = son ratio 16/10 exact, sans recadrage. Pastille contact masquée dans cette plage (décision d'Yvan). Sous 600px, empilement de la version mobile (pastille + portrait, puis photo laptop) : en rangée, le portrait y passerait sous ~190 x 237px (600px de section : (600 − md) / 3 de large). 600 : seuil proposé, valeur en dur faute de token dans une condition de container query. */ @container a-propos (min-width: 600px) and (max-width: 978px) { .about-media { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto; } .about-media > :nth-child(1) { display: none; } .about-media > :nth-child(2) { grid-column: 1; grid-row: 1; } .about-media > :nth-child(3) { grid-column: 2; grid-row: 1; } } /* Hero : centrage vertical du contenu (agit grâce à la min-height de la variation) */ .is-style-hero { display: flex; flex-direction: column; justify-content: center; } /* Hero : centrage horizontal du groupe de boutons */ .is-style-hero .wp-block-buttons { justify-content: center; } /* Hero : largeur maximale du paragraphe d'introduction */ .is-style-hero .hero__lead { max-width: /*var(--wp--custom--measure)*/ 27.5ch; margin-bottom:1rem; } /* Hero : retours à la ligne équilibrés sur le titre */ .is-style-hero h1 { text-wrap: balance; margin-bottom:var(--wp--preset--spacing--sm); } /* Hero, mobile (781px et moins) : fragment manuscrit réduit de 1.2em à 0.94em. Recalculé en session 63 pour l'étoile du titre rotatif : « qu'on a envie de montrer » (variante la plus longue) + réserve (voir plus bas) donne à 1em -1 % de marge à 375px (déborde), à 0.95em 4,28 % (sous les 5 % visés), à 0.94em 5,33 % — retenu. Sans étoile (`.script` hors `.titre-rotatif--actif`, ex. « Accroche centrée »), ce réglage n'a pas d'effet : le sélecteur ne cible que le hero. Aucun effet au-dessus de 781px. */ @media (max-width: 781px) { .is-style-hero h1 .script { font-size: 0.94em; } } /* Hero, mobile (781px et moins) : fragment manuscrit à 41px (2.5625rem, remplace le 0.94em ci-dessus ; le reste du H1 garde la taille xl) et interligne 1.5 (réglages d'Yvan, tokens settings.custom.hero). Interligne sans unité (et non 1.5em) : le fragment le recalcule sur sa propre taille. */ @media (max-width: 781px) { .is-style-hero h1 { line-height: var(--wp--custom--hero--interligne-mobile); } .is-style-hero h1 .script { font-size: var(--wp--custom--hero--script-mobile); } } /* Titre rotatif (inc/titre-rotatif.php, assets/js/titre-rotatif.js) — refonte session 63 : effacement/apparition avec étoile, pilotés par l'API Web Animations (element.animate), pas par des transitions CSS. Réglages déclarés une seule fois, lus par le JS via getComputedStyle (comme --diapo-duree, --etude-passage-*) : durées et courbes des DEUX phases, délai de pause au creux, largeurs des deux zones de réserve, taille de l'étoile. `.titre-rotatif--actif` n'est posée par le serveur que si le fragment a au moins 2 variantes. L'étoile (::after) n'est PAS sous `.js` : elle s'affiche statique dès le CSS seul, avec ou sans script (voir plus bas). */ .titre-rotatif { --titre-pause: 2.5s; --titre-effacement-duree: 500ms; --titre-effacement-courbe: cubic-bezier(0.55, 0, 1, 0.45); --titre-apparition-duree: 600ms; --titre-apparition-courbe: cubic-bezier(0, 0.55, 0.45, 1); --titre-creux-delai: 100ms; /* Apparition animée du premier suffixe au chargement (voir plus bas, section dédiée) : délai avant que le script ne joue sa propre apparition (compté après police prête + hero visible), et réglages du filet de sécurité CSS seul (délai avant son déclenchement, durée de son fondu). */ --titre-apparition-delai-initial: 150ms; --titre-filet-delai: 2.5s; --titre-filet-fondu: 300ms; --titre-masque-opaque: 0.3em; --titre-masque-degrade: 0.25em; /* Réserve verticale/gauche anti-rognage (session 63, ajustement) : un mask-image coupe tout ce qui dépasse de la boîte de l'élément masqué, quel que soit overflow (overflow-y:visible n'y change rien — la clip du masque suit sa propre zone, pas la propriété overflow). Valeurs = dépassements d'encre mesurés (Glamour Palace, les trois variantes réelles de la page), arrondis avec marge : bas jusqu'à 14,22px/57,6px = 0,247em (constant à toutes les tailles, mêmes glyphes) ; haut jusqu'à 5,36px = 0,093em ; gauche jusqu'à 4,7px = 0,082em (le "q" de "qui", commun aux trois variantes, déborde légèrement AVANT le bord gauche de la boîte). */ --titre-masque-haut: 0.1em; --titre-masque-bas: 0.25em; --titre-masque-gauche: 0.12em; /* Distance mesurée entre le bas de la boîte de texte (bord de son padding-box, avant tout ajustement) et la vraie ligne de base typographique, pour Glamour Palace : ~0,20em (mesuré via les métriques de police, constant entre 30px et 57,6px de corps). Sert à corriger l'alignement de l'étoile (voir .script::after) : align-items:flex-end seul alignerait les bas de BOÎTE, pas les lignes de base. Alex Brush : ~0,34em (non retenu, police de repli seulement, écart non corrigé si la police change un jour). */ --titre-etoile-ligne-base: 0.2em; /* Taille choisie par Yvan à l'œil après comparaison de deux captures réelles (75 % et 50 % de l'ancienne valeur 0,45em) : 50 % retenu. */ --titre-etoile-taille: 0.22em; /* Écart entre la chasse (fin d'avance) de la dernière lettre et l'étoile, au repos : distance typographique de point final. Posé en marge négative sur l'étoile (voir .script::after) : comme le texte ne bouge jamais dans son propre padding-right (la réserve, ci-dessous, reste constante), l'étoile — plus proche — suit alors le bord du texte DÉVOILÉ pendant le mouvement, pas le bord de la réserve. 0,06em d'abord (proposition initiale), puis 0,17em (0,06 + la moitié de --titre-etoile-taille à 0,22em, sur retour d'Yvan : « trop proche », décalée vers la droite) — CHEVAUCHEMENT D'ENCRE PERSISTANT sur « qui vous sert » (le « t » final déborde de 0,282em/16,23px à 1081-1440px, largement plus que cet écart) : voir CLAUDE.md, non corrigé sans accord d'Yvan. */ /* 0,06em puis 0,17em (retour d'Yvan : « trop proche ») puis 0,24em (retour : l'effet de l'étoile qui passe sous le texte restait visible) : décalée à nouveau vers la droite. Le chevauchement d'encre sur « qui vous sert » (le « t » final déborde de 0,282em/16,23px à 1081-1440px) n'est complètement résolu qu'à partir de ~0,29-0,30em — voir CLAUDE.md pour la mesure exacte, non poussé jusque-là sans confirmation. */ --titre-etoile-ecart: 0.24em; /* Avance/retard temporaire de l'étoile par rapport à sa position naturelle (retour d'Yvan : elle semblait « se faire manger » par le texte à l'ouverture) — une bosse de translateX, nulle aux deux bouts de chaque phase, ajoutée par le script à la rotation. Valeurs proposées, à ajuster à l'œil : légère avance à l'ouverture (compense la sensation), plus léger retard à la fermeture. */ --titre-etoile-avance-ouverture: 0.15em; --titre-etoile-avance-fermeture: 0.08em; } /* Fragment = boîte de texte + étoile, dans cet ordre. `display` en deux valeurs (extérieur/intérieur) : bloc sur sa propre ligne jusqu'à 1080px (centré par margin-inline:auto, indépendant du reste du texte), en ligne au-delà (centré par l'héritage text-align:center du hero, comme le reste du H1) — une seule paire de règles remplace le jeu grid/inline-block de la version précédente (empilement de mots), le centrage ne change jamais de mécanisme visible en traversant le seuil. Sous `.js` seulement : sans script, `.script` reste un span inline ordinaire (le texte suit le flux normal du H1, `text-wrap:balance` s'applique comme avant), seule l'étoile (::after, réglée plus bas hors de `.js`) s'ajoute après le texte. */ .js .titre-rotatif--actif .script { display: block flex; /* flex-end, pas baseline : mesuré (session 63, ajustement), align-items:baseline pour cet item (overflow-x:clip le prive d'une vraie ligne de base, il retombe sur son bord bas de boîte) donne le MÊME résultat que flex-end — autant utiliser la valeur au comportement garanti par la spec (aligne les bords bas de boîte des deux items), corrigé ensuite par une marge sur le texte (voir .titre-rotatif__texte) pour viser la vraie ligne de base. */ align-items: flex-end; /* box-sizing:content-box (le site entier est en border-box, voir "Bandeau à filets") : la largeur posée par le script est la « place réservée » au sens strict (texte dévoilé + réserve + étoile), jamais mêlée au padding propre de la classe `.script` de base (.15em de chaque côté, qui reste inchangé, en plus, à l'extérieur). */ box-sizing: content-box; width: max-content; /* valeur avant le premier rendu du script ; remplacée par une largeur explicite dès l'init. */ margin-inline: auto; } @media (min-width: 1081px) { /* Les mots inactifs de l'ancienne version sortaient de la fenêtre (scrollWidth 1092 pour 1081 de large, jusqu'à ~1139px) : la boîte de texte actuelle ne déborde plus (une seule variante, largeur toujours ≤ à sa valeur naturelle), mais `clip` est conservé par précaution (aucun effet mesuré si rien ne déborde, coûte moins cher qu'une vérification). `clip` sur l'axe X seul : l'axe Y reste visible, les paraphes de Glamour Palace ne sont pas rognés (jamais `overflow: hidden`). */ .is-style-hero { overflow-x: clip; } .js .titre-rotatif--actif { white-space: nowrap; text-wrap: nowrap; } .js .titre-rotatif--actif .script { display: inline flex; width: auto; /* idem : remplacée par une largeur explicite dès l'init du script. */ margin-inline: 0; } } /* Étoile : assets/images/etoile.svg (tracé seul, nettoyé), en mask-image comme le chevron/téléchargement — seul le canal alpha compte pour le masque, la couleur vient de `background-color` (token accent, celui déjà intégré dans le fichier source). `::after` d'un conteneur flex devient lui-même un item flex, placé après le texte dans l'ordre des enfants ; SA POSITION PAR DÉFAUT (flush après la boîte de texte, donc après toute la réserve du padding-right — zone opaque + dégradé) est ramenée plus près par une marge négative (session 63, ajustement) : distance d'un point final après la chasse de la dernière lettre (`--titre-etoile-ecart`), jamais un calcul de position — la réserve elle-même (padding-right de `.titre-rotatif__texte`) ne change pas. Comme la réserve reste constante alors que le texte, lui, change de largeur, cette marge fait suivre l'étoile au bord du texte DÉVOILÉ (pas au bord de la réserve) aussi bien au repos que pendant le mouvement : elle passe alors par-dessus le début de la réserve (zone opaque), ce qui masque visuellement l'amorce du bord du masque (effet voulu). PAS sous `.js` : visible et immobile même sans script (texte + étoile, statique). */ .titre-rotatif--actif .script::after { content: ""; display: inline-block; flex: none; /* Bas de l'étoile sur la ligne de base du texte : `vertical-align:baseline` seul suffit ici (sans JS, flux inline normal — l'étoile, sans contenu, synthétise sa propre ligne de base à son bord bas de boîte, qui s'aligne alors sur celle du texte voisin). En contexte flex (avec JS), voir `align-items:flex-end` + la marge de `.titre-rotatif__texte` : ce `vertical-align` n'a alors aucun effet (ignoré pour un item flex), sans conflit. */ vertical-align: baseline; width: var(--titre-etoile-taille); aspect-ratio: 39.6 / 41.2; /* Ramène l'étoile de sa position par défaut (après opaque + dégradé) à `--titre-etoile-ecart` après la chasse du texte : marge négative = réserve totale du texte moins l'écart voulu. */ margin-left: calc((var(--titre-masque-opaque) + var(--titre-masque-degrade) - var(--titre-etoile-ecart)) * -1); /* Angle courant : posé par le script comme valeur DE REPOS (pas seulement pendant l'animation), 0deg par défaut (sans JS, ou avant le premier départ). Le script anime toujours VERS cette valeur déjà posée (fill par défaut, jamais forwards) : une fois l'animation terminée, la disparition de son effet ne change rien, la propriété personnalisée porte déjà la bonne valeur — aucun commit ni cancel nécessaire pour fixer l'arrivée. */ transform: rotate(var(--titre-etoile-angle, 0deg)); background-color: var(--wp--preset--color--accent); -webkit-mask-image: url("assets/images/etoile.svg"); mask-image: url("assets/images/etoile.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Boîte de texte, créée par le script (`.titre-rotatif__texte`) : sans JS elle n'existe pas, `.script` garde son texte brut, sans overflow ni masque (aucune conséquence : le point ci-dessus vaut aussi ici). Largeur DÉVOILÉE animée par l'API Web Animations (jamais de transition CSS) — distincte de la largeur RÉSERVÉE, portée par `.script` lui-même (voir plus haut et assets/js/titre-rotatif.js). **Piège corrigé en session 63 (ajustement)** : un `mask-image` coupe tout ce qui dépasse de la boîte de l'élément masqué, quel que soit `overflow` — `overflow-y: visible` (ou `overflow-x: clip` côté X) ne change rien à cette règle, propre au masque (sa zone de peinture, `mask-clip`, est bornée à la boîte, indépendamment de la propriété `overflow`). Rognage constaté (bas du « q » et du « g », capture d'Yvan) : `overflow-x: clip` reste nécessaire pour l'axe X (couper le texte qui sort de la largeur animée), mais ne protège plus les dépassements d'encre verticaux ni le débord gauche — d'où la réserve en padding sur les TROIS autres côtés ci-dessous, compensée par une marge négative égale pour ne rien changer à la mise en page (la boîte peint plus large, mais n'occupe pas plus de place). */ .titre-rotatif__texte { display: inline-block; /* Le site entier est en box-sizing:border-box (voir "Bandeau à filets") : override explicite en content-box, pour que la largeur posée par le script (JS) reste la largeur du TEXTE seul, jamais celle du texte + réserve. */ box-sizing: content-box; overflow-x: clip; overflow-y: visible; white-space: nowrap; /* Réserve en padding sur les quatre côtés, jamais dans le masque seul (voir le piège ci-dessus et, pour le bord droit, le commentaire plus bas sur les deux zones opaque/dégradé) : - haut/bas (--titre-masque-haut/-bas) : couvre le dépassement d'encre vertical (ascendantes/descendantes des paraphes de Glamour Palace), compensé par une marge négative ÉGALE sur ces deux côtés (aucun effet sur la hauteur de ligne ni la position du texte) ; - gauche (--titre-masque-gauche) : couvre le débord du premier jambage (mesuré : le « q » de « qui », commun aux trois variantes, déborde très légèrement AVANT le bord gauche de la boîte), compensé de la même façon ; - droite : AUCUNE compensation (la réserve droite est un espace fonctionnel voulu, pour le dégradé et l'étoile, pas un correctif invisible) — voir le commentaire dédié. La marge du bas cumule aussi la correction de ligne de base de l'étoile (--titre-etoile-ligne-base) : voir `align-items:flex-end` de `.script`, plus haut. */ padding: var(--titre-masque-haut) calc(var(--titre-masque-opaque) + var(--titre-masque-degrade)) var(--titre-masque-bas) var(--titre-masque-gauche); margin: calc(var(--titre-masque-haut) * -1) 0 calc((var(--titre-masque-bas) + var(--titre-etoile-ligne-base)) * -1) calc(var(--titre-masque-gauche) * -1); /* Réserve permanente à DROITE du texte, en DEUX zones dans le padding : d'abord OPAQUE (--titre-masque-opaque, couvre le dépassement d'encre à droite mesuré jusqu'à 16,23px à 1081/1440px, soit 0,282em du corps du script, constant à toutes les tailles — jamais pâlie, sinon la dernière lettre semblerait s'effacer au repos), puis en DÉGRADÉ (--titre-masque-degrade, fondu vers transparent, juste avant l'étoile). C'est cette réserve permanente qui évite qu'une lettre ne pâlisse d'un coup au démarrage : la première portion effacée par le rétrécissement de la boîte est toujours cette zone vide, jamais une lettre. */ -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--titre-masque-degrade)), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - var(--titre-masque-degrade)), transparent 100%); } /* Apparition animée du premier suffixe au chargement — DEUXIÈME exception à la règle de mouvement du thème (voir CLAUDE.md, « Couches de fond » : la première est la rotation elle-même, sans bouton pause). Plutôt que d'afficher le premier texte d'un coup, le script attend la police prête + le hero visible + un court délai (--titre-apparition-delai-initial), puis joue la même apparition (masque + étoile) que pour un changement de variante normal. Le texte brut (avant que le script n'ait construit `.titre-rotatif__texte`) est donc masqué pendant une fenêtre brève — jamais indéfiniment : un FILET DE SÉCURITÉ en CSS seul, indépendant du script, révèle texte et étoile par un simple fondu si `titre-rotatif--pilote` n'a pas encore été posé. Ce marqueur est ajouté par le script UNIQUEMENT au moment où il est prêt à jouer sa propre apparition (jamais à son démarrage, voir assets/js/titre-rotatif.js) : jusque-là, le filet tourne pour son propre compte, sans savoir si le script existe. Deux façons dont le filet peut arriver le premier, sans script cassé : police plus lente que 2,5s (JS termine par jouer SON apparition normalement, un peu plus tard) ; script bloqué ou en échec (le filet ne rencontre jamais `--pilote`, le texte reste révélé et STATIQUE — comme les autres composants du thème dont le script est en échec, voir « Onglets »). Réserve à droite IDENTIQUE à celle de `.titre-rotatif__texte` (opaque + dégradé) posée sur le span brut lui-même : aucun changement de largeur/centrage au moment où le script prend la main (mesures dans PASSATION.md). Pas de réserve gauche/verticale à répliquer : elles sont déjà annulées par une marge négative égale côté `.titre-rotatif__texte` (voir plus haut), sans effet sur son propre encombrement. */ @media (prefers-reduced-motion: no-preference) { .js .titre-rotatif--actif:not(.titre-rotatif--pilote) .script { padding-right: calc(var(--titre-masque-opaque) + var(--titre-masque-degrade)); opacity: 0; } .js .titre-rotatif--actif:not(.titre-rotatif--pilote) .script, .js .titre-rotatif--actif:not(.titre-rotatif--pilote) .script::after { animation: titre-filet-reveal var(--titre-filet-fondu) var(--titre-filet-delai) forwards; } .js .titre-rotatif--actif:not(.titre-rotatif--pilote) .script::after { opacity: 0; } } @keyframes titre-filet-reveal { to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* Horloge : animation d'attente sur un pseudo-élément VIDE de 1px (transparent, hors flux) du TITRE (le H1, `.titre-rotatif`, distinct de l'étoile qui est le ::after de `.script`), en opacité : animation composée, aucun travail sur le fil principal pendant l'attente (mesuré : 0 image sur 5 s, contre ~60 par seconde avec une propriété personnalisée). Sa fin (`animationend`) déclenche l'effacement. Pause = même animation, en pause. Inchangée depuis la session 62 : ne pilote plus que la phase d'attente (2,5s), l'effacement et l'apparition sont désormais des Animation (API Web Animations) créées par le script, pas des animations CSS. */ .titre-rotatif.is-rotation::after { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; animation: titre-attente var(--titre-pause) linear forwards; } .titre-rotatif.is-rotation.is-en-pause::after { animation-play-state: paused; } /* Même mécanisme (::after du H1, animationend), classe et keyframe DISTINCTES : délai avant la première apparition (voir plus haut), jamais confondu avec l'attente entre deux variantes (`is-rotation`). Les deux classes ne sont jamais posées en même temps (le script retire l'une avant de poser l'autre). Non mis en pause par `appliquerPause()` (fenêtre de 150ms au maximum, hero déjà confirmé visible pour l'atteindre) : limite acceptée, voir CLAUDE.md. */ .titre-rotatif.is-attente-initiale::after { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; animation: titre-delai-initial var(--titre-apparition-delai-initial) linear forwards; } } @keyframes titre-attente { to { opacity: .01; } } @keyframes titre-delai-initial { to { opacity: .01; } } /* Boutons : transition au survol (global, comme styles.elements.button) */ .wp-element-button, .wp-block-button__link { transition: background-color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing), color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing); } @media (prefers-reduced-motion: reduce) { .wp-element-button, .wp-block-button__link { transition: none; } } /* Bordure corail autour des boutons à fond accent (par défaut + variations Télécharger/Formulaire, qui ne redéfinissent pas leur couleur) — jamais sur les boutons "en contour" (fond déjà transparent, bordure différente déjà en place), LinkedIn (fond accent-2) ni le formulaire de contact (fond blanc) : tous hors du périmètre "fond corail". box-sizing:border-box (site entier) : la bordure mord sur le padding existant, ne change pas la taille du bouton. */ .wp-block-button:not(.is-style-contour-accent, .is-style-outline, .is-style-bouton-linkedin, .is-style-bouton-substack) > .wp-block-button__link, .wp-element-button:not(.wp-block-mcleod-contact .wp-element-button) { /*border: 1px solid var(--wp--preset--color--accent);*/ } /* Même piège que le calque de remplissage (voir plus bas) : Contour accent et LinkedIn sont exclus de la première branche (via le wrapper .wp-block-button) mais rattrapés par la seconde (.wp-element-button, que TOUT lien de core/button porte aussi) — neutralisé ici, à spécificité égale (3 classes) et après dans le fichier. Outline n'a pas besoin de ce correctif : sa propre règle de contexte (pied de page, plus bas) est déjà à 3 classes et déjà après celle-ci. */ .wp-block-button.is-style-contour-accent > .wp-block-button__link { border-width: 2px; } .wp-block-button.is-style-bouton-linkedin > .wp-block-button__link, .wp-block-button.is-style-bouton-substack > .wp-block-button__link { border-width: 0; } /* Changement de couleur au survol par translation verticale (bas → haut), pour tous les boutons PLEINS (y compris les .wp-element-button natifs du formulaire de contact) — remplace le saut plat ci-dessus (simple changement de background-color) par une couche qui se révèle depuis le bas. Couleur de la couche portée par --bouton-survol, réglée une fois ici (défaut : color-mix accent 82%+noir, identique à la couleur de survol déjà en place pour le bouton par défaut et les variations Télécharger/Formulaire, qui ne redéfinissent pas leur couleur) puis recontextualisée ci-dessous où le fond du bouton diffère — même logique que --fill/--base du scrollspy du menu (voir plus bas), une règle de contexte plutôt qu'un réglage d'instance. Exclus : les boutons "en contour" (fond transparent au repos) — "Contour accent" (styles/bouton-contour-accent.json, sa propre inversion de couleur est déjà en place plus bas dans ce fichier) et "Outline" natif du cœur (filet du pied de page) — remplir un bouton pensé comme creux est une décision visuelle à part, non prise ici. background-position n'est jamais transitionné, seul background-size l'est (même mécanique que le scrollspy) : c'est ce bord net, sans interpolation de position, qui donne son sens au remplissage plutôt qu'à un fondu. */ .wp-block-button:not(.is-style-contour-accent, .is-style-outline) > .wp-block-button__link, .wp-element-button { --bouton-survol: color-mix(in oklab, var(--wp--preset--color--accent-2) 80%, black); background-image: linear-gradient(var(--bouton-survol), var(--bouton-survol)); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 0%; transition: background-size var(--wp--custom--transition--duration) var(--wp--custom--transition--easing), background-color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing), color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing); } /* Chaque lien de core/button porte AUSSI .wp-element-button (vérifié dans le HTML servi, les deux classes coexistent toujours) : la branche générique de la règle ci-dessus le rattrape donc même sous un wrapper exclu par le :not() (qui ne protège que la branche .wp-block-button__link). Neutralisé ici, explicitement, pour les deux variations "en contour". */ .is-style-contour-accent > .wp-block-button__link, .pied-de-page .is-style-outline > .wp-block-button__link { background-image: none; } /* État piloté par le script (assets/js/boutons-survol.js) : le fondu plat ci-dessus cède la main (background-image repassé à none, en style inline posé par le script — un inline bat toute règle de classe, pas de bataille de spécificité à gérer) à une ellipse (.bouton-filler, un vrai inséré par le script, pas un pseudo-élément : ::before/::after sont déjà pris par les pictos de Télécharger/ Formulaire/LinkedIn) qui monte depuis le bas à l'entrée et CONTINUE vers le haut à la sortie — jamais un retour en arrière, ce qu'une transition CSS ne sait pas faire seule (elle revient toujours par le même chemin). overflow:hidden rogne l'ellipse au gabarit du bouton ; un box-shadow serait rogné de la même façon (il peint hors de la boîte) — l'ombre passe donc en filter:drop-shadow (même recette exacte que le token, survit au rognage), neutralisée dans les mêmes contextes que le box-shadow plus haut (panneaux, pied de page). z-index:0 sur le bouton + z-index:-1 sur l'ellipse : la gardent sous le TEXTE (contenu réel du bouton) tout en restant au-dessus du fond du bouton. */ .bouton-survol--pilote { position: relative; z-index: 0; overflow: hidden; box-shadow: none; filter: drop-shadow(var(--wp--preset--shadow--sm)); } .is-style-panel-clair .bouton-survol--pilote, .is-style-panel-indigo .bouton-survol--pilote, .pied-de-page .bouton-survol--pilote { filter: none; } .bouton-filler { position: absolute; z-index: -1; top: -50%; left: -25%; width: 150%; height: 200%; border-radius: 50%; background-color: var(--bouton-survol); transform: translateY(75%); pointer-events: none; } /* LinkedIn (fond accent-2) : jusqu'ici "aucun état de survol" (son propre fond, plus spécifique que le survol générique, bloquait le changement de couleur) — reçoit maintenant la même mécanique que les autres, avec SA couleur. */ .wp-block-button.is-style-bouton-linkedin > .wp-block-button__link, .wp-block-button.is-style-bouton-substack > .wp-block-button__link { --bouton-survol: color-mix(in oklab, var(--wp--preset--color--accent-2) 82%, black); } /* Formulaire de contact (boutons blancs, blocks/contact/style.css) : même mécanique, survol en base (sombre) — même couleur que le calque JS (blocks/contact/style.css), pour le repli sans JS. */ .wp-block-mcleod-contact .wp-element-button { --bouton-survol: var(--wp--preset--color--base); } .wp-block-button:not(.is-style-contour-accent, .is-style-outline) > .wp-block-button__link:is(:hover, :focus-visible), .wp-element-button:is(:hover, :focus-visible) { background-size: 100% 100%; } @media (prefers-reduced-motion: reduce) { .wp-block-button:not(.is-style-contour-accent, .is-style-outline) > .wp-block-button__link, .wp-element-button { transition: none; } } /* Boutons "Télécharger"/"Formulaire" (variations is-style-bouton-telecharger/ is-style-bouton-formulaire sur core/button) : picto décoratif à droite du texte, qui seul porte le sens. Taille en em (relative au texte du bouton, comme les pictos de Pastille/Élément à picto) — non exprimable en token theme.json. is-style-X est posé par WP sur le wrapper .wp-block-button, jamais sur le lien lui-même : le picto est donc un ::after sur .wp-block-button__link, coloré en currentColor via mask-image (background-color visible, mask = juste la forme). */ .is-style-bouton-telecharger .wp-block-button__link, .is-style-bouton-formulaire .wp-block-button__link, .is-style-bouton-linkedin .wp-block-button__link, .is-style-bouton-substack .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5em; } .is-style-bouton-telecharger .wp-block-button__link::after, .is-style-bouton-formulaire .wp-block-button__link::after, .is-style-bouton-linkedin .wp-block-button__link::before, .is-style-bouton-substack .wp-block-button__link::before { content: ""; display: block; width: 1.25em; height: 1.25em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .is-style-bouton-telecharger .wp-block-button__link::after { -webkit-mask-image: url("assets/icons/telecharger.svg"); mask-image: url("assets/icons/telecharger.svg"); } .is-style-bouton-formulaire .wp-block-button__link::after { -webkit-mask-image: url("assets/icons/enveloppe.svg"); mask-image: url("assets/icons/enveloppe.svg"); } /* "LinkedIn" : même mécanique, picto à GAUCHE du texte (::before). Tracé issu de core/social-link, normalisé dans assets/icons/linkedin.svg. Couleurs dans styles/bouton-linkedin.json. */ .is-style-bouton-linkedin .wp-block-button__link::before { -webkit-mask-image: url("assets/icons/linkedin.svg"); mask-image: url("assets/icons/linkedin.svg"); } /* "Substack" : jumeau de LinkedIn (mêmes couleurs, styles/bouton-substack.json, picto à gauche). Tracé issu de Simple Icons (CC0), une seule forme pleine, normalisé dans assets/icons/substack.svg. */ .is-style-bouton-substack .wp-block-button__link::before { -webkit-mask-image: url("assets/icons/substack.svg"); mask-image: url("assets/icons/substack.svg"); } /* LinkedIn/Substack : bouton rond (picto seul), qui s'élargit au survol/focus clavier pour révéler le texte. Le texte reste TOUJOURS dans le DOM et dans la boîte (nom accessible du lien) : il est seulement rogné par overflow:hidden au-delà du cercle. Cercle = cible (44px, WCAG 2.5.8), padding latéral calculé pour centrer le picto (1.25em) ; radius pill hérité de theme.json (cercle replié, pilule déployée). max-width plutôt que width : width:auto ne se transitionne pas partout. 20em est une borne haute (texte actuel ≈ 16,5em déployé) : à la fermeture, le rétrécissement visible démarre avec un léger retard (la portion 20em → largeur réelle ne se voit pas). Allonger le texte au-delà de 20em le ferait rogner. */ .wp-block-button:is(.is-style-bouton-linkedin, .is-style-bouton-substack) > .wp-block-button__link { --bouton-rs-retrait: calc((var(--bouton-rs-taille, var(--wp--preset--dimension--cible)) - var(--bouton-rs-picto, 1.25em)) / 2); --bouton-rs-duree: 0.7s; height: var(--bouton-rs-taille, var(--wp--preset--dimension--cible)); max-width: var(--bouton-rs-taille, var(--wp--preset--dimension--cible)); padding-block: 0; padding-inline: var(--bouton-rs-retrait); overflow: hidden; white-space: nowrap; /* Texte au repos invisible : c'est un nœud texte nu (aucune balise à laquelle poser une opacity), le fondu passe donc par sa couleur, transparente au repos. Le texte reste dans l'arbre d'accessibilité. */ color: transparent; transition: max-width var(--bouton-rs-duree) var(--wp--custom--transition--easing), padding-inline-end var(--bouton-rs-duree) var(--wp--custom--transition--easing), background-size var(--bouton-rs-duree) var(--wp--custom--transition--easing), background-color var(--bouton-rs-duree) var(--wp--custom--transition--easing), color var(--bouton-rs-duree) var(--wp--custom--transition--easing); } /* Le picto ne se tasse jamais quand la boîte est plus étroite que son contenu. Sa couleur ne suit plus currentColor (transparent au repos, ci-dessus) : fixée sur celle du texte déployé. */ .wp-block-button:is(.is-style-bouton-linkedin, .is-style-bouton-substack) > .wp-block-button__link::before { flex-shrink: 0; background-color: var(--wp--preset--color--contrast); } .wp-block-button:is(.is-style-bouton-linkedin, .is-style-bouton-substack) > .wp-block-button__link:is(:hover, :focus-visible) { max-width: 20em; padding-inline-end: var(--wp--preset--spacing--md); color: var(--wp--preset--color--contrast); } /* Côte à côte en permanence : sans nowrap, le bouton voisin passerait à la ligne quand l'autre s'élargit. */ .pied-de-page__identite .wp-block-buttons:has(.is-style-bouton-linkedin, .is-style-bouton-substack) { flex-wrap: nowrap; gap: var(--wp--preset--spacing--stack); } @media (prefers-reduced-motion: reduce) { .wp-block-button:is(.is-style-bouton-linkedin, .is-style-bouton-substack) > .wp-block-button__link { transition: none; } } /* Bandeau à filets : conteneur pleine hauteur avec filet haut/bas, padding vertical lg, padding horizontal sm (écart avec le bord du bandeau, contenu décalé vers l'intérieur sans changer la largeur du bandeau lui-même — box-sizing:border-box). Générique (pas propre aux cartes-picto) — la largeur reste portée par l'attribut de bloc align:"wide" du conteneur, jamais dupliquée ici en CSS. .cartes-picto en hérite sans changement de rendu (padding vertical déjà identique en attribut de bloc, filets identiques). */ .bandeau-filets, .cartes-picto { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--lg); padding-bottom: var(--wp--preset--spacing--lg); padding-left: var(--wp--preset--spacing--sm); padding-right: var(--wp--preset--spacing--sm); } /* Mobile : bandeau bord à bord (filets d'un bord à l'autre de l'écran), contenu retiré du root padding — aligné sur les sections voisines. Le root padding passe de la section parente (has-global-padding, remis à 0) au bandeau lui-même ; le bandeau reste align:"wide" (sa largeur max ne joue pas à cette taille), aucune marge négative à écrire contre le margin-inline:auto !important du layout constrained. */ @media (max-width: 781px) { .wp-block-group.has-global-padding:has(> .bandeau-filets) { padding-left: 0; padding-right: 0; } .bandeau-filets { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); } .cartes-picto{ padding-left:0; padding-right:0; } } /* Grille : autant de colonnes égales que de cartes (2, 3 ou 4), gap du token lg. Groupe par défaut (pas de layout natif imposé) + CSS Grid sur la classe, comme .about-media plus haut : le layout natif de WordPress ("flow"/"constrained") ajouterait une marge automatique entre les cartes (24px par défaut) qu'il faudrait de toute façon neutraliser ; autant piloter tout l'espacement par le gap de la grille, seule source de vérité. */ .cartes-picto__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--wp--preset--spacing--lg); } .cartes-picto__grille > * { margin-block-start: 0; } /* Carte : picto au-dessus par défaut (desktop, et tablette à 2 ou 3 cartes) */ .cartes-picto__carte { display: grid; grid-template-columns: 1fr; } .cartes-picto__carte > * { margin-block-start: 0; } .cartes-picto__carte .wp-block-icon svg { width: var(--wp--preset--dimension--icon-md); height: auto; } .cartes-picto__carte .wp-block-icon { margin-bottom: var(--wp--preset--spacing--md); } .cartes-picto__carte .wp-block-heading { margin-bottom: var(--wp--preset--spacing--stack); } /* Tablette, uniquement à 4 cartes : 2 colonnes (2+2), picto à gauche du bloc titre+texte dans chaque carte. Détection du nombre de cartes en CSS via :has() : la grille a un 4e enfant mais pas de 5e. Ordre du DOM inchangé (picto, titre, texte) : seul le placement en grille change visuellement. */ @media (min-width: 782px) and (max-width: 1080px) { .cartes-picto__grille:has(> .cartes-picto__carte:nth-child(4)):not(:has(> .cartes-picto__carte:nth-child(5))) { grid-template-columns: repeat(2, 1fr); } .cartes-picto__grille:has(> .cartes-picto__carte:nth-child(4)):not(:has(> .cartes-picto__carte:nth-child(5))) .cartes-picto__carte { grid-template-columns: auto 1fr; column-gap: var(--wp--preset--spacing--md); align-items: start; } .cartes-picto__grille:has(> .cartes-picto__carte:nth-child(4)):not(:has(> .cartes-picto__carte:nth-child(5))) .cartes-picto__carte .wp-block-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; } .cartes-picto__grille:has(> .cartes-picto__carte:nth-child(4)):not(:has(> .cartes-picto__carte:nth-child(5))) .cartes-picto__carte .wp-block-heading { grid-column: 2; grid-row: 1; } .cartes-picto__grille:has(> .cartes-picto__carte:nth-child(4)):not(:has(> .cartes-picto__carte:nth-child(5))) .cartes-picto__carte p { grid-column: 2; grid-row: 2; } } /* Mobile : une colonne, picto à gauche du bloc titre+texte dans chaque carte, taille réduite (icon-sm). Même principe de placement en grille qu'en tablette à 4 cartes, sans condition de nombre : en dessous de 782px, toutes les grilles passent en une colonne quel que soit le nombre de cartes. */ @media (max-width: 781px) { .cartes-picto__grille { grid-template-columns: 1fr; } .cartes-picto__carte { grid-template-columns: auto 1fr; column-gap: var(--wp--preset--spacing--md); align-items: start; } .cartes-picto__carte .wp-block-icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; } .cartes-picto__carte .wp-block-heading { grid-column: 2; grid-row: 1; } .cartes-picto__carte p { grid-column: 2; grid-row: 2; } /* La taille choisie dans l'éditeur (style inline sur le , réglage de largeur du bloc Icône) doit céder la place à icon-sm sur mobile : c'est voulu, un picto de carte ne doit jamais dépasser cette taille sur petit écran, quel que soit le réglage fait ailleurs. D'où le !important, seul moyen de l'emporter sur un style inline. */ .cartes-picto__carte .wp-block-icon svg { width: var(--wp--preset--dimension--icon-sm) !important; } } /* Pastille (variation de style "is-style-pill" sur core/group) : ce que theme.json ne sait pas exprimer (tailles relatives à la taille du texte de la pastille, en em, pas en token fixe) ou n'a pas de mécanisme de preset pour ça (text-transform, couleur par défaut du picto), même logique que .eyebrow plus haut. */ .is-style-pill { display: inline-flex; align-items: center; gap: 0.4em; /* écart picto/texte */ padding: 0.20em 1.9em 0.35em 0.9em; /* padding pilule, relatif à la taille du texte */ font-variant-caps: all-small-caps; white-space: nowrap; /* le texte ne passe jamais à la ligne dans la pastille */ } .is-style-pill .wp-block-icon { margin: 0; } .is-style-pill .wp-block-icon svg { width: 1em; height: 1em; /* Couleur par défaut du picto : accent-3, distincte du texte (contrast) posé par pill.json. currentColor sur les des SVG mcleod hérite de cette valeur. */ color: var(--wp--preset--color--accent-3); } .is-style-pill p { margin: 0; } /* Pastille "variante accent" (classe additionnelle, pas une variation de style à part : même composant Pastille, fond accent/corail au lieu d'accent-2) — statut "à venir" sur les cartes Ressources. Charge après le CSS global (ordre des feuilles), bat la couleur de fond de .is-style-pill à spécificité égale. Sans picto : padding droit ramené à la même valeur que le gauche (0.9em), l'écart d'origine (1.9em) ne compensait qu'un picto absent ici. */ .pastille-accent { background-color: var(--wp--preset--color--accent); padding-right: 0.9em; } /* Liste de pastilles (variation "yvan-perso/liste-pastilles" sur core/group en ul) : reset des styles de liste par défaut du navigateur, l'espacement vient du gap du layout flex (attribut de bloc, token stack). */ .pastilles-liste { list-style: none; margin: 0; padding: 0; } /* Liste à pictos (variation "yvan-perso/liste-picto" sur core/group en ul, layout "default"). Contrairement à .pastilles-liste (layout flex, gap en CSS gap — jamais en conflit avec une marge), ce layout simule l'écart entre enfants par une marge haute générée dynamiquement par le cœur (margin-block-start sur le conteneur parent). Ne jamais réinitialiser marge haut/bas ici (margin: 0 les écraserait, même spécificité qu'une classe, chargée après = toujours gagnante) : seules les marges gauche/droite sont à zéro (déjà le cas par défaut navigateur, gardé pour documenter l'intention). */ .liste-a-pictos { list-style: none; margin-inline: 0; padding: 0; } /* Élément à picto (variation "is-style-picto-item" sur core/group, composant "Liste à pictos") : ce que theme.json ne sait pas exprimer (grille picto/texte, picto aligné sur la première ligne, tailles en em relatives au texte "chapo" posé par picto-item.json ; filet séparateur au-dessus de chaque élément, y compris le premier — aucun n'est posé sous le dernier, il n'y en a simplement jamais). */ .is-style-picto-item { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6em; align-items: start; border-top: 1px solid var(--wp--preset--color--line); } /* Hauteur d'une ligne (1lh) : le picto se centre dans cette hauteur, donc sur le milieu de la première ligne du texte, pas sur le haut de sa propre boîte. line-height réaffecté : core/icon pose line-height:0 sur .wp-block-icon (wp-includes/blocks/icon/style.css), ce qui annulerait 1lh (relatif à la line-height de l'élément lui-même) sans ce rétablissement. */ .is-style-picto-item .wp-block-icon { display: flex; align-items: center; line-height: inherit; height: 1lh; margin: 0; } .is-style-picto-item .wp-block-icon svg { width: 2em; height: 2em; color: var(--wp--preset--color--accent); } .is-style-picto-item p { margin: 0; } /* Cartes ressources : grille responsive (points de rupture du thème). Desktop (> 1080px, par défaut) : 3 colonnes inégales (2fr 2fr 3fr), gap lg. */ .cartes-ressources__grille { display: grid; grid-template-columns: 2fr 2fr 3fr; gap: var(--wp--preset--spacing--sm); } /* Carte en colonne flex : le bouton (dernier enfant) est poussé en bas par une marge automatique, ce qui aligne les boutons entre cartes d'une même ligne — la grille étire déjà les cartes à la même hauteur par défaut (comportement natif de CSS Grid, aucune règle supplémentaire nécessaire pour ça). .wp-block-buttons : la spécificité de ce sélecteur (deux classes) l'emporte sur la marge générée par le blockGap de la carte (une classe) — un seul écart final s'applique, jamais deux qui s'additionnent. padding-block-start double la garantie : même si "auto" ne produisait aucun espace (carte qui remplit exactement sa hauteur), l'écart minimum resterait garanti par le padding. */ .cartes-ressources__carte { display: flex; flex-direction: column; padding: var(--wp--preset--spacing--md); } .cartes-ressources__carte .wp-block-buttons { margin-block-start: auto; margin-block-end: 0; padding-block-start: var(--wp--preset--spacing--md); } /* Boutons « Me prévenir de la sortie » (is-style-outline) : le remplissage au survol (.bouton-filler, assets/js/boutons-survol.js) prend la couleur du filet du bouton dans sa carte, le texte s'inverse pour rester lisible sur ce remplissage. Le filet est en border-color:currentColor (style généré par le cœur pour is-style-outline) : sans le figer ici, il suivrait la nouvelle couleur du texte au survol. Carte claire (check-list) : filet base, texte surface au survol. */ .cartes-ressources__carte.is-style-panel-clair .is-style-outline > .wp-block-button__link .bouton-filler { background-color: var(--wp--preset--color--base); } .cartes-ressources__carte.is-style-panel-clair .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { border-color: var(--wp--preset--color--base); color: var(--wp--preset--color--surface); } /* Carte indigo (autres ressources) : filet foreground, texte accent-2 au survol. */ .cartes-ressources__carte.is-style-panel-indigo .is-style-outline > .wp-block-button__link .bouton-filler { background-color: var(--wp--preset--color--foreground); } .cartes-ressources__carte.is-style-panel-indigo .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { border-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--accent-2); } /* Bouton outline du hero (« Évaluez votre site ») : au repos, filet dans la couleur de texte choisie dans l'éditeur (classe de preset has-*-color sur le lien, filet du cœur en currentColor), texte dans la couleur du corps (foreground). Le texte passe par -webkit-text-fill-color, jamais par color : color doit rester la couleur de l'admin pour que le filet la suive. Au survol : remplissage accent-2, filet accent-2, texte contrast. Le remplissage est celui de tous les boutons (--bouton-survol : .bouton-filler avec le script, background-size en repli sans JS ou sous prefers-reduced-motion), seule sa couleur change ici. La transition reprend celle des boutons pleins, plus border-color. */ .is-style-hero .is-style-outline > .wp-block-button__link { --bouton-survol: var(--wp--preset--color--accent-2); /* Filet 1px au lieu des 2px de la variation Outline du cœur (:root :where(), 0,1,0). */ border-width: 1px; -webkit-text-fill-color: var(--wp--preset--color--foreground); transition: background-size var(--wp--custom--transition--duration) var(--wp--custom--transition--easing), border-color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing), -webkit-text-fill-color var(--wp--custom--transition--duration) var(--wp--custom--transition--easing); } .is-style-hero .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { border-color: var(--wp--preset--color--accent-2); -webkit-text-fill-color: var(--wp--preset--color--contrast); } @media (prefers-reduced-motion: reduce) { .is-style-hero .is-style-outline > .wp-block-button__link { transition: none; } } /* Titre de la carte indigo : 2.2rem à toutes les largeurs (valeur littérale demandée par Yvan), au lieu du preset lg fluide posé en attribut (pattern et copie de la page 2). !important obligatoire : la classe de preset has-lg-font-size l'est déjà (cœur WP). Règle de contexte, aucun contenu modifié en base. */ .cartes-ressources__carte.is-style-panel-indigo > .wp-block-heading { font-size: 2.2rem !important; } /* Tablette : deux colonnes égales, carte 3 (dernière) sur toute la largeur. */ @media (min-width: 782px) and (max-width: 1080px) { .cartes-ressources__grille { grid-template-columns: repeat(2, 1fr); } .cartes-ressources__carte:last-child { grid-column: 1 / -1; } } /* Mobile : une colonne. */ @media (max-width: 781px) { .cartes-ressources__grille { grid-template-columns: 1fr; } } /* Section « Témoignages » (patterns/temoignages.php, inc/champs-client.php) — session 7a. Rendu statique, aucun JS : tous les avis empilés, lisibles sans script. Navigation entre avis (points, animation) hors périmètre (session 7b). Colonne de logos animés hors périmètre (session ultérieure) : les colonnes 9-12 de la grille restent réservées, sans bloc, sans overflow/isolation/z-index/transform sur la section (règle du thème pour tout futur élément qui devra sortir visuellement des sections voisines, voir CLAUDE.md « Couches de fond »). Grille 12 colonnes déclarée une seule fois : la zone avis occupe les colonnes 2 à 7 au-dessus de 1080px (colonne 1 et 8 vides de part et d'autre, réserve logos en 9-12), pleine largeur en dessous. */ .temoignages { --temoignages-colonnes: 12; --temoignages-gouttiere: var(--wp--preset--spacing--md); /* Navigation entre avis : durée et courbe du fondu, lues par le script via getComputedStyle. */ --temoignages-fondu-duree: 300ms; --temoignages-fondu-courbe: ease; /* Swipe : distance horizontale minimale (px, nombre sans unité) pour changer d'avis au relâchement. */ --temoignages-swipe-seuil: 50; display: grid; grid-template-columns: repeat(var(--temoignages-colonnes), minmax(0, 1fr)); gap: var(--temoignages-gouttiere); } .temoignages__avis { grid-column: 2 / 8; padding-block: var(--wp--preset--spacing--xl); } @media (max-width: 1080px) { /* Une seule colonne : toutes les zones occupent déjà 1 / -1 à cette largeur. Les 12 colonnes ne servent qu'au-delà de 1080px ; gardées ici, leurs 11 gouttières md (352px) dépassaient la largeur disponible à 375px (311px) et la bande de logos, élargie de ±32px, faisait défiler la page horizontalement (417px de large, mesuré). */ .temoignages { grid-template-columns: minmax(0, 1fr); } .temoignages__avis { grid-column: 1 / -1; /* Padding bas retiré, SEULEMENT ici (le haut reste xl, rythme avec la section précédente) : en colonne (>1080px), ce padding équilibre l'avis par rapport au panneau de logos voisin ; empilé, il s'ADDITIONNE au gap de grille (md, 32px) avant la bande de logos — même piège que les deux paddings verticaux déjà documentés ailleurs dans ce fichier (« Texte et liste »/« Accroche centrée »). Mesuré avant correctif : jusqu'à 222px d'écart visuel (1080px) entre le dernier avis et la bande ; avec ce correctif, seul le gap de grille (32px) reste. */ padding-block-end: 0; } } /* Collage : la section n'a pas de marge propre (attribut margin-top:0, comme CTA panneau), et la section SUIVANTE (Cartes ressources) ne doit pas recevoir le blockGap de post-content (24px, :root :where(.is-layout- constrained) > *, spécificité 0,1,0 à cause du :root) — règle de contexte, jamais un attribut sur l'instance voisine (voir « Méthode de travail »). Deux classes (0,2,0) pour battre à coup sûr cette règle du cœur, sans dépendre de l'ordre de chargement (le même choix que le footer, `.wp-site-blocks:has(.cta-panneau) > footer`, pour la même raison). */ .entry-content .section-temoignages + * { margin-top: 0; } /* Empilement sans JS : gap CSS + margin:0 sur les
  • (repli flow 24px neutralisé, piège déjà connu, voir « Cartes ressources »), filet 1px line entre deux témoignages (bordure haute, jamais sur le premier). */ .temoignages__avis .wp-block-post-template { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--lg); list-style: none; margin: 0; padding: 0; } .temoignages__avis .wp-block-post-template > li { margin: 0; } .temoignages__avis .wp-block-post-template > li:not(:first-child) { border-top: 1px solid var(--wp--preset--color--line); } /* figure/figcaption : reset des marges UA (le cœur ne les génère pas, ce sont des balises HTML natives). margin-block ET margin-inline séparés (jamais le raccourci margin), même piège que « Liste à pictos » : un margin générique écraserait une marge verticale générée par blockGap sans erreur ni avertissement. Ici margin-block:0 est sans risque (figure est fille unique d'article, blockGap ne s'applique jamais à un fils unique) mais on garde la forme longhand par prudence, comme sur le blockquote juste en dessous. */ .temoignage > figure { margin-block: 0; margin-inline: 0; } /* Écart blockquote -> figcaption à md (32px, était lg/60px avant l'espace ajouté au-dessus de la navigation) : remplace le blockGap sm (20px) généré par WordPress sur .temoignage__auteur (second enfant de la figure). Règle à 2 classes (ancêtre .temoignage + la classe propre du figcaption) pour battre sans ambiguïté la classe générée par instance, même logique que .temoignages__avis .temoignages__navigation plus bas. */ .temoignage .temoignage__auteur { margin-block-start: var(--wp--preset--spacing--md); } /* Citation : taille chapo (18px, règle de contexte — jamais en attribut de bloc), faux italique EN PLACE, PROVISOIRE, en l'absence de face italique de Plus Jakarta Sans (aucun fichier dans assets/fonts/, un seul @font-face style:normal) — non validé par Yvan, face italique à ajouter en session dédiée. margin-inline SEUL (jamais margin) : le blockquote porte par défaut la marge horizontale du navigateur (40px de chaque côté, vérifié en valeur calculée) — margin-block n'est PAS touché ici, il calcule déjà à 0px dans ce thème (vérifié), aucun rapport avec le blockGap de la figure (qui ne génère jamais de marge sur son premier enfant, seulement sur figcaption). position:relative : ancre le guillemet en lettrine (::before), positionné en absolu, sans transform/filter/overflow/isolation/z-index (contrainte de la section, voir « Couches de fond »). */ .temoignage blockquote { font-size: var(--wp--preset--font-size--md); /*font-style: italic;*/ margin-inline: 0; position: relative; /* Taille et dépassement du guillemet en lettrine, à ajuster à l'œil par Yvan (session 7c). */ --temoignage-guillemet-taille: 2em; --temoignage-guillemet-depassement: 0.5em; } .temoignage blockquote p:first-child{ font-size: var(--wp--preset--font-size--chapo); } /* Guillemet en lettrine (session 7c, remplace le caractère « " » en Glamour Palace) : assets/images/guillemet.svg en mask-image (seul le canal alpha compte, la couleur du fichier source — accent en dur — n'a aucun effet, même mécanisme que l'étoile du titre rotatif et le chevron de la FAQ), couleur accent. Positionné en haut à gauche du blockquote, dépassant au-dessus de la première ligne — purement décoratif (`content:""`, jamais de texte), rien à exposer aux lecteurs d'écran. */ .temoignage blockquote::before { content: ""; position: absolute; top: calc(var(--temoignage-guillemet-depassement) * -1); left: 0; width: var(--temoignage-guillemet-taille); height: var(--temoignage-guillemet-taille); background-color: var(--wp--preset--color--accent); -webkit-mask-image: url("assets/images/guillemet.svg"); mask-image: url("assets/images/guillemet.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* Retrait de première ligne : laisse la place au guillemet sur la seule ligne qu'il chevauche, jamais sur les lignes suivantes ni sur un éventuel second paragraphe. */ .temoignage blockquote > p:first-child { text-indent: calc(var(--temoignage-guillemet-taille) + 0.2em); } .temoignage__personne { align-items: center; } .temoignage__identite { color: var(--wp--preset--color--foreground); } .temoignage__nom { color: var(--wp--preset--color--contrast); font-weight: var(--wp--custom--font-weight--strong); } /* Poste — entreprise sur une même ligne (session 7c). Les deux

    sont frères adjacents dans le HTML servi ; le rôle disparaît entièrement du DOM si la méta est vide (filtre existant, session 7a), donc le sélecteur `+` ci-dessous ne matche — et le séparateur n'apparaît — que lorsque le poste existe réellement. `font-size:0` sur le conteneur puis restauré sur chaque enfant : neutralise l'espace blanc du HTML source entre les deux

    (un texte de largeur nulle plutôt qu'un espace collapsé d'1 caractère) — l'espacement affiché est entièrement piloté par `content`, jamais par la mise en forme du fichier source. */ .temoignage__identite { font-size: 0; } .temoignage__nom { font-size: 1rem; } /* Poste et entreprise en sm (14px, session 7c) — règle de contexte, jamais un attribut de bloc. Le nom de l'auteur reste à sa taille propre (1rem, ci-dessus), seule cette ligne change. Les écarts du séparateur (nbsp, margin-inline-end, plus bas) sont en em : le ::before hérite du font-size de .temoignage__entreprise, ils suivent donc automatiquement ce nouveau sm (16px → 14px), sans rien à toucher côté séparateur. */ .temoignage__role, .temoignage__entreprise { font-size: var(--wp--preset--font-size--sm); display: inline; } /* Espace insécable avant le tiret : il reste collé au poste si l'entreprise passe seule à la ligne en mobile (le tiret ne se retrouve jamais en début de ligne). Repli à texte alternatif : deux déclarations successives (la syntaxe "texte" / "alt" n'est pas supportée partout) — un navigateur qui ignore la seconde garde la première, un lecteur d'écran qui la supporte lit une virgule au lieu du tiret. PIÈGE CSS vérifié en valeur calculée : un espace normal FINAL dans une chaîne `content` est rogné par le navigateur (la valeur calculée se résout à `" —"`, sans le troisième caractère pourtant écrit dans la feuille de style — mesuré aussi en largeur, 0px attribués à cet espace) — le tiret collait à « Anko » sans espace. Corrigé en sortant l'espace du `content` : `margin-inline-end` sur le pseudo-élément, qui rend toujours, quelle que soit la chaîne. Conséquence acceptée : la ligne ne peut plus se couper entre le tiret et l'entreprise (ce n'est qu'une marge, pas une espace insécable) — elle se coupe dans les mots du poste, qui en offre déjà plusieurs ; jamais un tiret seul en fin de ligne. */ .temoignage__role + .temoignage__entreprise::before { content: "\00a0\2014"; content: "\00a0\2014" / ", "; margin-inline-end: 0.25em; } /* Vignette : carrée au token icon-md, radius md, recadrée en cover (fonctionne aussi bien pour une vraie photo que pour le repli assets/images/avatar.svg, dont le viewBox n'est pas exactement carré). */ .champ--temoignage_photo img { width: var(--wp--preset--dimension--icon-md); height: var(--wp--preset--dimension--icon-md); border-radius: var(--wp--preset--border-radius--md); object-fit: cover; } /* Pastilles de prestations (session 7c) : écarts resserrés propres aux témoignages, en règle de contexte — jamais sur .pastilles-liste ou .pastilles-prestations elles-mêmes (classes partagées avec l'étude de cas). .pastilles-liste { margin:0 } (règle partagée) est sans risque ici : son layout est flex avec gap, jamais de marge sur les enfants (contrairement au piège de « Liste à pictos », layout default). Deux classes (ancêtre + pastilles-liste, 0,2,0) pour battre la règle de layout générée par le cœur sur ce bloc (gap et blockGap, 0,1,0 à cause de sa classe unique par instance) — vérifié en valeur calculée. */ .temoignage__auteur .pastilles-liste { gap: calc(var(--wp--preset--spacing--stack) / 2); margin-block-start: var(--wp--preset--spacing--stack); } /* Navigation entre avis (assets/js/temoignages.js) — session 7b. Un seul avis visible à la fois, aucune rotation automatique. Même mécanique que les Onglets de l'étude de cas (session 6c) : état final appliqué dès le CSS sous `.js` pour ne jamais décaler le bloc suivant à l'exécution du script, empilement en grid-area 1/1, `inert` posé par le script. E = « JS actif ET au moins deux avis » (sans attendre le script) OU « le script a fini » (`is-navigation`) : la mise en page est la même aux deux moments. Une seule fiche : `li + li` n'existe pas, rien ne change (le script n'est de toute façon pas mis en file, voir inc/champs-client.php). */ :is(.js .section-temoignages:has(.wp-block-post-template > li + li), .section-temoignages.is-navigation) .wp-block-post-template { display: grid; gap: 0; } :is(.js .section-temoignages:has(.wp-block-post-template > li + li), .section-temoignages.is-navigation) .wp-block-post-template > li { grid-area: 1 / 1; min-width: 0; /* Neutralise le filet de la 7a (border-top sur chaque avis sauf le premier) : parasite en mode navigation — quel que soit l'avis actif, il afficherait SA propre bordure haute (absente du premier), un filet visible au-dessus du contenu actif et un décalage vertical d'1px du texte selon l'avis. Jamais touché hors de cet état : la règle de la 7a (empilement sans JS) reste intacte pour le rendu sans script. */ border-top: 0; } /* Avant que le script ait posé `inert` : seule la première fiche est visible (aussi la fiche active à l'initialisation). Limite : JS actif (.js) mais script en échec = avis 2 et suivants masqués, sans navigation. */ .js .section-temoignages:has(.wp-block-post-template > li + li):not(.is-navigation) .wp-block-post:nth-child(n+2) { visibility: hidden; } .section-temoignages.is-navigation .wp-block-post[inert] { visibility: hidden; } /* Swipe (assets/js/temoignages.js) : le geste vertical reste au navigateur (défilement de la page), seul le geste horizontal est confié au script. Pendant un glisser horizontal, aucune sélection de texte. */ .section-temoignages.is-navigation .wp-block-post-template { touch-action: pan-y; } .section-temoignages.is-navigation .wp-block-post-template.is-glisse { user-select: none; -webkit-user-select: none; cursor: grabbing; } /* Réserve la place de la rangée de navigation (points + flèche) AVANT que le script ne la crée (même raison que les Onglets : sans ça, son insertion au moment où le script s'exécute décale le bloc suivant). Hauteur = exactement ce que la rangée ajoute une fois réelle : écart stack + hauteur de la rangée. La rangée est dominée par la flèche (cible, 44px) depuis la session 7c (retrait du filet propre à la navigation, dont la réserve d'espace n'a plus lieu d'être — le filet empilé de la 7a, lui, n'a jamais eu besoin de réserve : il fait partie du flux normal, sans JS). Un ::after n'est jamais concerné par le blockGap du cœur (sélecteur `> *`, ne matche pas les pseudo-éléments) : rien à neutraliser ici. Disparaît dès que `.is-navigation` est posé (le vrai élément occupe alors cette place). */ .js .section-temoignages:has(.wp-block-post-template > li + li):not(.is-navigation) .temoignages__avis::after { content: ""; display: block; height: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs) + var(--wp--preset--dimension--cible)); } /* Rangée de navigation : flèches et compteur « n / total » seuls (les points ont été retirés, redondants avec le compteur), alignés sur le bord gauche de la zone avis. Écart md + xs au-dessus (44px, entre md et lg ; réserve d'avant script ci-dessus alignée sur la même valeur), jamais le blockGap lg de .temoignages__avis (deux classes, 0,2,0, bat la règle générée par le cœur pour ce blockGap, 0,1,0 à cause de sa classe unique par instance — vérifié en valeur calculée). */ .temoignages__avis .temoignages__navigation { display: flex; align-items: center; justify-content: flex-start; margin-block-start: calc(var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xs)); } /* Bande de logos animée (sessions 8a-8b). Colonnes 9-12 de .temoignages réservées depuis la 7a : deux bandes, côte à côte en mode colonne (>1080px), une seule visible en mode bande horizontale (≤1080px, voir plus bas — la seconde y créait deux rangées décalées, masquée dans ce mode). Défilement continu, aucun JS. Boucle continue en CSS pur : chaque copie (deux