/* ============================================================================= blocks-document.css — LE RESET DE DOCUMENT du site généré ----------------------------------------------------------------------------- Ces règles habillent le DOCUMENT : le corps de la page, et le comportement par défaut des médias et des liens. Elles sont sorties de `blocks-base.css` le 2026-08-11, et la raison est mesurée, pas théorique. `blocks-base.css` est importé par `blocks-editor.css`, donc par l'application de bureau, pour que les blocs TipTap ressemblent au site. Il emmenait ces règles avec lui, dans un document qui n'est pas le sien et où aucune variable `--tw-*` n'existe : les replis en dur s'appliquaient donc au CHROME de l'app. Mesuré avant le découpage : `body` peint #fafafa / #222 — EN THÈME SOMBRE AUSSI — en 17 px, avec la police du site. Invisible, parce que `#root` couvre le corps. ⚠️ Les deux autres règles ne faisaient AUCUN dégât, et il faut le dire, sinon la prochaine personne surestimera le risque : le preflight de Tailwind v4 pose déjà `img,svg,video,iframe,… { display:block }` et `a { color:inherit }`. Les 38 icônes de l'application que j'ai comptées en `display:block` le sont par TAILWIND — j'avais mesuré l'effet et présumé la cause. Elles restent en `display:block` après le découpage, et c'est normal. Le découpage vaut quand même, et pour une raison qui n'est pas le dégât d'aujourd'hui : il fait passer la feuille de « inoffensive parce qu'une autre feuille dit la même chose » à « inoffensive par construction ». La règle suivante ajoutée ici n'aurait eu personne pour la doubler. > Une feuille qui habille un DOCUMENT ne doit jamais être importée dans un > AUTRE document. Une contre-règle posée après l'import corrige le symptôme > et laisse le canal ouvert : la règle suivante fuira pareil, et personne ne > saura d'où elle vient. `box-sizing` reste dans `blocks-base.css` : il vaut partout où une brique est rendue, y compris dans l'éditeur, et Tailwind pose exactement la même chose — il ne peut donc rien casser en fuyant. ⚠️ Ce fichier ne doit JAMAIS être importé par l'application. Un seul consommateur : le site généré, via `copySharedCSS` → `BaseLayout.astro`. ============================================================================= */ /* Le site ne charge pas Tailwind : c'est ici, et nulle part ailleurs, qu'il reçoit `box-sizing`. Il vivait dans `blocks-base.css` — que l'APPLICATION importe pour l'aperçu des blocs — d'où un sélecteur universel dans le graphe du chrome, signalé par `verifie-socle`. Le déplacer le rend inaccessible à l'app sans rien retirer au site. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--tw-page-bg, #fafafa); color: var(--tw-text, #222); font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-base, 1.0625rem); line-height: var(--tw-leading-body, 1.6); -webkit-font-smoothing: antialiased; } img, svg, video, iframe { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* « Afficher sur » (#479) — un bloc ou une section masqué sur un type d'écran. Les seuils de la grille (`blocks-base.css`) : mobile < 640 px, tablette 640 à 1023 px, ordinateur ≥ 1024 px. Ici, dans la feuille du SITE : l'éditeur importe blocks-base.css, et une règle posée là masquerait le bloc dans le canevas selon la largeur de la fenêtre. L'aperçu par appareil, lui, est le site : il masque pour de vrai. */ @media (max-width: 639px) { .tw-masquer-mobile { display: none !important; } } @media (min-width: 640px) and (max-width: 1023px) { .tw-masquer-tablette { display: none !important; } } @media (min-width: 1024px) { .tw-masquer-ordinateur { display: none !important; } } /* ============================================================================= blocks-base.css — LES 12 BRIQUES (couche neutre, DNA-agnostique) ----------------------------------------------------------------------------- C'est la première livraison de P1 (cf DNA-BRICK-DOM-SPEC.md). Chaque propriété visuelle = var(--tw-*) + fallback NEUTRE. AUCUN --theme-*, AUCUNE couleur/font/ radius/shadow en dur ici. Le DNA (dna-c.css) re-pointe les --tw-* + skinne. Réutilisable à l'identique par les 15 DNAs. Cascade : blocks-base.css → dna-{x}.css → user-overrides. Pas de !important. ============================================================================= */ /* ═══ LISIBILITÉ DÉRIVÉE — les deux jetons « auto » (B16, #223) ═════════════ Décision Fable 5.1 (2026-09-08), déléguée par Yann. Un DNA promet que « le contraste fond/texte est garanti par construction ». Mesuré sur les 96 combinaisons DNA × mode : 33 couples porteurs de texte passaient sous 4,5:1, dont un libellé de bouton à 1,95:1. > Une promesse qui n'est pas mesurée est une intention. Ces deux jetons calculent une couleur de TEXTE à partir de la couleur qu'elle recouvre. Ils sont posés sur `[data-dna]` — le MÊME élément que celui où le DNA déclare `--tw-btn-bg` — sans quoi `var()` ne verrait pas sa valeur. ⚠️ ILS NE SONT PAS APPLIQUÉS D'OFFICE. Un DNA les adopte en pointant son `--tw-btn-text` dessus. Les couples délibérés qui passent déjà — or sur marine, crème sur terracotta — gardent leur nuance : les remplacer par du noir et blanc uniformiserait 48 identités sur un détail où elles n'ont rien fait de mal. ⚠️ ET ILS NE SUFFISENT PAS TOUJOURS. Il existe une bande de clarté où NI le noir NI le blanc n'atteignent 4,5:1 sur un fond saturé — mesurée à L ∈ [0,475 ; 0,635] pour C = 0,30, et large de 0,011 même sur un gris neutre (noir dès L = 0,568, blanc jusqu'à L = 0,557 : ils ne se recouvrent PAS). Deux fonds de bouton étaient dans cette bande ; ils ont été déplacés à la main, en gardant leur teinte et leur saturation. La sonde `contraste-dna` refuse tout nouveau fond qui y retomberait. Le noir reste à L = 0,12 : à L = 0,17 le pire cas repasse sous 4,5. */ [data-dna]{ /* ══ LE PIVOT EST LA LUMINANCE WCAG, PAS LA CLARTÉ D'OKLAB (#225) ═══════ Décision Fable 5.1 (2026-09-09), déléguée par Yann. La première version pivotait sur `l`. C'était le défaut lui-même : le L d'OKLab est PERCEPTUEL, la luminance de WCAG ne l'est pas. Tourner la teinte à L constant — ce que font les curseurs de tonalité — changeait donc le contraste, et 67 couples passaient sous 4,5:1 sur le balayage. > On ne choisit pas une couleur de texte sur l'échelle qui décrit ce que > l'œil PERÇOIT, mais sur celle qui décrit ce que la norme MESURE. Y (la luminance relative de WCAG) est exactement le Y de XYZ, et il se lit depuis `l c h` par la ligne Y de M1⁻¹ d'OKLab — un polynôme cubique, sans décodage gamma. `pow()`, `cos()` et `sin()` existent en CSS (Values 4) et sont PLUS ANCIENS que `oklch(from …)` que ces feuilles exigent déjà : le plancher de compatibilité ne bouge pas. ⚠️ Vérifié : la formule rend la luminance WCAG à 3·10⁻⁵ près, et le pivot 0,1791 garantit **4,58:1 au pire** sur 4 000 fonds tirés au hasard — c'est le point où blanc et noir font le même contraste. Le blanc et le noir sont PURS (chroma 0) : le blanc teinté d'hier coûtait 0,08 de marge pour une nuance invisible. */ /* ⚠️ EN OKLAB, PAS EN OKLCH — ET CE N'EST PAS UN GOÛT DE NOTATION. La première écriture lisait `l c h` et repassait en cartésien avec `cos(h * 1deg)` / `sin(h * 1deg)`. **WebKit ignore l'unité et traite l'argument comme des RADIANS** : mesuré le 2026-09-09 dans WKWebView (le moteur de Safari sur cette machine), le cosinus de 35,2 degrés y rend −0,806 au lieu de 0,817 — la valeur qu'on obtient en radians. Le jeton restait valide et rendait du noir ou du blanc PUR : rien ne le signalait, sauf 8 fonds sur 300 qui recevaient la mauvaise polarité, jusqu'à 3,77:1. `oklab(from …)` donne `a` et `b` directement. Plus de trigonométrie, donc plus de dépendance à une primitive que les deux moteurs n'interprètent pas pareil — et la formule est plus courte. Vérifié : 4,58:1 au pire sur les mêmes 300 fonds, dans Chromium ET dans WebKit. > Une formule juste peut être fausse dans un moteur sans jamais devenir > invalide. C'est le pire des deux mondes : elle répond, et elle ment. */ --tw-y-origine: ( -0.0405801784 * pow(l + 0.3963377774 * a + 0.2158037573 * b, 3) + 1.1122568696 * pow(l - 0.1055613458 * a - 0.0638541728 * b, 3) - 0.0716766787 * pow(l - 0.0894841775 * a - 1.2914855480 * b, 3) ); --tw-blanc-ou-noir: clamp(0, (0.1791 - var(--tw-y-origine)) * 1000000, 1); /* ══ IL N'Y A PAS DE JETON « COULEUR PRÊTE À L'EMPLOI », ET C'EST VOULU ══ Ce qui suit est une POLARITÉ (0 = noir, 1 = blanc), pas une couleur. Elle se consomme DANS un `oklab(from var(--tw-sur-fond) 0 0 / 1)`, écrit dans le MÊME bloc que le fond dont il parle. ⚠️ C'est la seule forme qui marche, et le contraire est un piège muet. Une propriété personnalisée est substituée sur l'élément qui la DÉCLARE, et c'est le RÉSULTAT qui est hérité. Un jeton « couleur de texte du bouton » déclaré ici, sur `[data-dna]`, se fige donc avec le fond de bouton de la RACINE ; une palette de section qui repeint `--tw-btn-bg` hérite d'une couleur calculée pour un AUTRE fond. Mesuré le 2026-09-09 : bouton jaune, texte blanc, 13 constats « INVISIBLE » au gate `dna-smoke` — pendant que la sonde statique, qui MODÉLISE le jeton au lieu de le résoudre, était verte. > Un jeton dérivé n'est pas une valeur, c'est un calcul. Le ranger dans > une variable, c'est l'exécuter trop tôt. ⚠️ Et JAMAIS sur un fond `transparent` : la syntaxe de couleur relative hérite l'ALPHA de l'origine, donc `oklch(from transparent …)` rend un texte transparent — invisible, sur un chemin qu'aucune mesure de contraste ne signale (elle mesurerait un couple qui n'existe pas). Le `/ 1` final ferme cette porte pour un fond seulement SEMI-transparent ; il ne peut rien pour un fond entièrement transparent, dont la teinte n'existe pas. Un bouton fantôme garde un texte DÉCLARÉ, pas dérivé. */ --tw-sur-fond: calc(1 * var(--tw-blanc-ou-noir)); /* Sur-titre : on GARDE la teinte de la marque et on PINCE sa clarté. Un DNA clair prend la borne basse, un DNA sombre la borne haute — la polarité est connue du DNA, qui a déjà ses deux blocs d'origines. ⚠️ DÉRIVÉ DE `--tw-accent`, PAS DE `--theme-primary`, et c'est la garde `jetons-legacy` qui me l'a appris en devenant rouge : ce fichier est la couche NEUTRE, il ne consomme aucun `--theme-*`. Les 48 DNAs déclarent `--tw-accent` dans leur bloc de base — la brique a donc son propre jeton, et il vaut `var(--theme-primary)` chez eux. */ --tw-eyebrow-color-auto-clair: var(--tw-accent); --tw-eyebrow-color-auto-sombre:var(--tw-accent); /* ⚠️ LE JETON À UTILISER EST CELUI-CI, ET IL SUIT LE MODE TOUT SEUL. Ma première version obligeait chaque DNA à choisir `-clair` ou `-sombre` dans le bon bloc — six l'ont adopté dans leur bloc de BASE, que le bloc sombre HÉRITE : la clarté pincée vers le bas se retrouvait sur un fond sombre. Le gate `dna-smoke` l'a vu (aurore/dark, 1,09:1, « INVISIBLE ») ; ma sonde statique, non — elle ne résolvait pas ses propres jetons. > Un jeton qui oblige l'appelant à connaître le mode finira par être posé > dans le mauvais bloc. Celui-ci le sait pour lui. */ --tw-eyebrow-color-auto: var(--tw-eyebrow-color-auto-clair); /* Le LIEN du texte courant : la teinte de la marque, clarté pincée par mode comme le sur-titre. L'accent brut sortait sous 4,5:1 sur le fond clair d'une vingtaine de DNA (corail de TROPIC 2,6:1, or de COSMOS, terracotta d'ATELIER 2,4:1 — audit du 2026-09-28). Un DNA dont l'accent est lisible le déclare lui-même ; la bande `bold` le re-pointe sur son texte (plus bas). */ --tw-prose-link: var(--tw-eyebrow-color-auto); } @supports (color: oklch(from red l c h)){ [data-dna]{ --tw-eyebrow-color-auto-clair: oklch(from var(--tw-accent) min(l, 0.40) c h); --tw-eyebrow-color-auto-sombre:oklch(from var(--tw-accent) max(l, 0.80) c h); } } [data-dna][data-theme="dark"]{ --tw-eyebrow-color-auto: var(--tw-eyebrow-color-auto-sombre); } /* --- 0. Reset minimal + primitives de layout ----------------------------- */ /* Seul `box-sizing` reste ici : il vaut partout où une brique est rendue — éditeur compris — et Tailwind pose exactement la même chose, donc il ne peut rien casser en atteignant le chrome de l'application. Le reste du reset (`body`, `img/svg/video/iframe`, `a`) est parti dans `blocks-document.css` : ce fichier-ci est importé par `blocks-editor.css`, donc par l'application, et ces trois règles habillaient un document qui n'est pas le leur. Le dégât MESURÉ se limitait au corps (peint clair en thème sombre, en 17 px) : le preflight de Tailwind double déjà les deux autres règles côté application. Ce n'est pas le dégât qui justifie le découpage, c'est qu'une règle d'élément nu ajoutée ici n'aurait personne pour la doubler. ⚠️ NE RIEN AJOUTER ICI qui vise un sélecteur d'ÉLÉMENT NU. Tout ce qui n'est pas préfixé par une classe fuit dans l'application. */ /* `box-sizing` est parti dans `blocks-document.css` : c'est un sélecteur UNIVERSEL, donc du socle, et cette feuille-ci est importée par l'application pour l'aperçu des blocs. Dans l'app, Tailwind le pose déjà — il ne manquait donc à personne ici, et il manquait au SITE, qui ne charge pas Tailwind. Dernier sélecteur de racine de ce fichier : il n'en reste aucun. */ /* La BANDE — setter de palette (cf DNA-BLOCKS-SPEC §1). Ne consomme pas de couleur : la palette (dna-c.css [data-palette]) re-pointe les --tw-* contextuels. */ .content-section { position: relative; background: var(--tw-bg, transparent); color: var(--tw-text, inherit); padding-block: calc(var(--tw-section-py, 6rem) * var(--tw-section-density, 1)); } .content-section__container { max-width: var(--tw-container, 1200px); margin-inline: auto; padding-inline: var(--tw-container-pad, clamp(1.5rem, 4vw, 3rem)); } .content-section[data-container="narrow"] .content-section__container { max-width: 760px; } .content-section[data-container="wide"] .content-section__container { max-width: 1400px; } .content-section[data-container="full"] .content-section__container { max-width: none; } /* Rythme vertical des enfants = --tw-gap (remplace les marges StackPattern) */ .tw-stack > * + * { margin-top: var(--tw-gap, 1.5rem); } /* colonne (columnsBlock) : MÊME rythme vertical que .tw-stack. Sans ça, .tw-lead{margin:0} colle le lead au bloc suivant dans la story (manque d'air SOUS le sous-titre, cf #134). */ .column > * + * { margin-top: var(--tw-gap, 1.5rem); } /* Grille de collection (features/products/posts/team/…) */ .tw-grid { display: grid; gap: var(--tw-gap, 1.5rem); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); } @media (min-width: 1024px){ .tw-grid[data-cols-desktop="2"]{--cols:2} .tw-grid[data-cols-desktop="3"]{--cols:3} .tw-grid[data-cols-desktop="4"]{--cols:4} .tw-grid[data-cols-desktop="5"]{--cols:5} .tw-grid[data-cols-desktop="6"]{--cols:6} } @media (min-width:640px) and (max-width:1023px){ .tw-grid[data-cols-tablet="2"]{--cols:2} .tw-grid[data-cols-tablet="3"]{--cols:3} .tw-grid[data-cols-tablet="4"]{--cols:4} } @media (max-width:639px){ .tw-grid[data-cols-mobile="2"]{--cols:2} } /* ============================================================================ TAILLE DES TITRES (Thème › Formes et rythme, Yann 2026-10-11) ============================================================================ Le réglage est un facteur sur l'ÉCART entre un titre et le texte courant : taille = texte + (taille du style − texte) × --tw-heading-scale (absent = 1 : le style tel quel). Formule unique : `tailleDeTitreCss`, shared/bricks/dna-shape.ts — ce bloc la reprend mot pour mot (garde : taille-des-titres-reglage.test.ts). ⚠️ POURQUOI DEUX RÈGLES. Chaque DNA pose ses `--tw-size-h1…h6` (et `--tw-size-display`) sur l'élément `[data-dna]`. Les redéfinir AU MÊME endroit à partir d'eux-mêmes est un cycle (une variable qui se lit elle-même est invalide). Alors : 1. sur `[data-dna]`, on RECOPIE la valeur du style sous un autre nom (`--tw-size-h1-dna`) ; 2. sur ses ENFANTS DIRECTS, on redéfinit `--tw-size-h1` par la formule, à partir de la copie héritée. Tout le site (les briques, les titres libres, l'échelle de lecture des articles et des fiches produit) hérite de là. Les 50 feuilles de style restent intactes, et rien d'autre ne change de nom. Un DNA sans `--tw-size-display` (Revue) : la copie prend le H1 du style, le repli que les règles utilisaient déjà (sonde `dna-jetons` : pas de lecture sans repli). Le facteur (`--tw-heading-scale`) et le texte (`--tw-size-base`, « Taille du texte » comprise) sont lus sur l'élément `[data-dna]` : éditeur (style en ligne), Aperçu et site publié (theme.css) suivent le même chemin. */ [data-dna]{ --tw-size-h1-dna: var(--tw-size-h1); --tw-size-h2-dna: var(--tw-size-h2); --tw-size-h3-dna: var(--tw-size-h3); --tw-size-h4-dna: var(--tw-size-h4); --tw-size-h5-dna: var(--tw-size-h5); --tw-size-h6-dna: var(--tw-size-h6); --tw-size-display-dna: var(--tw-size-display, var(--tw-size-h1)); /* un DNA sans « display » (Revue) : le H1, repli des règles */ } [data-dna] > *{ --tw-size-h1: calc(min(var(--tw-size-h1-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h1-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-h2: calc(min(var(--tw-size-h2-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h2-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-h3: calc(min(var(--tw-size-h3-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h3-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-h4: calc(min(var(--tw-size-h4-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h4-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-h5: calc(min(var(--tw-size-h5-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h5-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-h6: calc(min(var(--tw-size-h6-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-h6-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); --tw-size-display: calc(min(var(--tw-size-display-dna), var(--tw-size-base, 1rem)) + max(var(--tw-size-display-dna) - var(--tw-size-base, 1rem), 0px) * var(--tw-heading-scale, 1)); } /* ============================================================================ BRIQUE 1 — TYPO (h1-h6, lead, body, meta, eyebrow, numeral, list, quote-em) ============================================================================ */ .tw-h1,.tw-h2,.tw-h3,.tw-h4,.tw-h5,.tw-h6{ font-family: var(--tw-font-heading, Georgia, serif); font-weight: var(--tw-weight-heading, 700); letter-spacing: var(--tw-tracking-heading, -0.01em); line-height: var(--tw-leading-heading, 1.15); color: var(--tw-text-heading, inherit); text-transform: var(--tw-case-display, none); text-shadow: var(--tw-text-shadow, none); margin: 0; } /* ÉCHELLE DE GRAISSE — dérivée, JAMAIS en dur. h1 = --tw-weight-heading (= la graisse de base choisie par l'user) ; chaque niveau descend de --tw-weight-step (pas DNA, défaut 0 → graisse uniforme). clamp [400,900] = garde-fou. */ .tw-h1{ font-size: var(--tw-size-h1, clamp(3rem,6.5vw,5.75rem)); line-height: var(--tw-leading-heading-tight, 1.05); } /* ═══ LE DISPLAY EST UN RÔLE, PAS UN H1 PLUS GROS ═══════════════════════════ Le titre de héros n'obéit pas à l'échelle des titres : il est plus grand, plus serré, souvent plus léger. Le vocabulaire ne savait pas le dire, alors les feuilles l'ont contourné — 32 des 46 DNAs écrivaient la MÊME règle, mot pour mot : [data-dna="x"] .content-section:has(.hero-block) .tw-h1{ font-size … } Quand les deux tiers d'un catalogue contournent le système au même endroit, ce ne sont pas trente-deux caprices, c'est un jeton manquant. Les voici. ⚠️ LES REPLIS SONT COPIÉS SUR LA RÈGLE GÉNÉRIQUE, PAS CHOISIS. Un DNA qui ne pose aucun jeton doit rendre au pixel près ce qu'il rendait — d'où `--tw-tracking-heading, -0.01em` et non `normal` : ma première écriture mettait `normal`, et onze DNAs ont bougé. 10 feuilles gardent leur règle, chacune pour une propriété qu'aucun jeton ne porte : b, i, l, neon, p, q, r, u, v, y — ombre portée, casse forcée, axes variables, texte en dégradé, couleur de l'em. Ce sont les jetons SUIVANTS à écrire. */ .content-section:has(.hero-block) .tw-h1{ font-size: var(--tw-size-display, var(--tw-size-h1, clamp(3rem,6.5vw,5.75rem))); line-height: var(--tw-leading-display, var(--tw-leading-heading-tight, 1.05)); letter-spacing: var(--tw-tracking-display, var(--tw-tracking-heading, -0.01em)); font-weight: var(--tw-weight-display, var(--tw-weight-heading, 700)); } /* ⚠️ À CÔTÉ D'UNE IMAGE, LE TITRE N'A QU'UNE COLONNE. La taille display se règle sur la FENÊTRE (vw) : pensée pour un héros pleine largeur, elle ne tient pas dans une demi-colonne dès qu'un mot est long — « d'information » sortait du cadre, coupé à « d'informatior » (page TOMail de lauyan.com, 25/09, #317). La colonne de texte devient un conteneur, et le titre se plafonne AUSSI à sa largeur : `min()` ne réduit que ce qui déborderait, un titre court garde la taille voulue par le DNA. 10cqi ≈ un mot de 14 lettres par ligne. */ .hero-block--layout-text-image-right > .hero-block__text, .hero-block--layout-text-image-left > .hero-block__text, .columns-block .column > .hero-block--layout-text-only > .hero-block__text{ container-type: inline-size; } /* (0,5,0) : bat la règle display des DNAs, `[data-dna] .content-section:has(.hero-block) .tw-h1` (0,4,0), qui se charge APRÈS cette feuille. */ /* Même cas quand le héros « texte seul » est posé DANS UNE COLONNE (à côté d'une animation, d'une image dans la colonne voisine) : la taille réglée sur la fenêtre donnait un titre de pleine page dans une demi-page — « vraiment trop gros » (Yann, staging de lauyan.com, 2026-09-28). */ .content-section .hero-block.hero-block--layout-text-image-right > .hero-block__text > .tw-h1, .content-section .hero-block.hero-block--layout-text-image-left > .hero-block__text > .tw-h1, .content-section .column > .hero-block.hero-block--layout-text-only > .hero-block__text > .tw-h1{ font-size: min(var(--tw-size-display, var(--tw-size-h1, clamp(3rem,6.5vw,5.75rem))), 10cqi); overflow-wrap: break-word; } .tw-h2{ font-size: var(--tw-size-h2, clamp(2rem,3.5vw,3rem)); font-weight: clamp(400, calc(var(--tw-weight-heading,700) - var(--tw-weight-step,0) * 1), 900); } .tw-h3{ font-size: var(--tw-size-h3, 1.625rem); font-weight: clamp(400, calc(var(--tw-weight-heading,700) - var(--tw-weight-step,0) * 2), 900); } .tw-h4{ font-size: var(--tw-size-h4, 1.3rem); font-weight: clamp(400, calc(var(--tw-weight-heading,700) - var(--tw-weight-step,0) * 2), 900); } .tw-h5{ font-size: var(--tw-size-h5, 1.1rem); font-weight: clamp(400, calc(var(--tw-weight-heading,700) - var(--tw-weight-step,0) * 3), 900); } .tw-h6{ font-size: var(--tw-size-h6, 1rem); font-weight: clamp(400, calc(var(--tw-weight-heading,700) - var(--tw-weight-step,0) * 3), 900); } /* Interligne : celui du style × le réglage du Thème (`--tw-leading-scale`, absent = 1), comme le texte libre (shared/theme/themeElementRules.ts). */ .tw-body{ font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-base,1.0625rem); line-height: calc(var(--tw-leading-body,1.65) * var(--tw-leading-scale, 1)); color: var(--tw-text, inherit); margin: 0; } .tw-lead{ font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-lead,1.25rem); line-height: calc(var(--tw-leading-lead,1.5) * var(--tw-leading-scale, 1)); color: var(--tw-text-muted, inherit); margin: 0; } .tw-meta{ font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-meta,0.875rem); color: var(--tw-text-muted, #777); } .tw-eyebrow{ font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-eyebrow,0.75rem); font-weight: 500; letter-spacing: var(--tw-tracking-eyebrow,0.16em); text-transform: uppercase; color: var(--tw-eyebrow-color, var(--tw-accent, #888)); display:inline-block; } /* em mid-phrase = âme de plusieurs DNAs (font-swap accent + couleur). `:is(em, i)` : les champs in-place (hero…) produisent via execCommand natif AVANT que le commit ne le normalise en (inlineHtml.ts) — on couvre les DEUX pour que l'accent s'affiche dès la frappe, pas seulement après le blur. */ .tw-body :is(em, i), .tw-lead :is(em, i), .tw-h1 :is(em, i), .tw-h2 :is(em, i), .tw-h3 :is(em, i), .tw-h4 :is(em, i){ font-family: var(--tw-font-accent, inherit); font-style: var(--tw-em-style, italic); color: var(--tw-em-color, inherit); } .tw-body :is(em, i), .tw-lead :is(em, i){ font-weight: var(--tw-em-weight, inherit); } .tw-h1 :is(em, i), .tw-h2 :is(em, i), .tw-h3 :is(em, i), .tw-h4 :is(em, i){ font-weight: inherit; } /* l'accent suit la graisse du titre (échelle) */ /* TRAITEMENT des mots accentués (em) des TITRES — token-driven, 3 modes, inerte par défaut : • COULEUR (défaut) : --tw-em-color/-fill ; pas de fond ; clip:text. • DÉGRADÉ-TEXTE : --tw-em-gradient: + --tw-em-fill:transparent (clip:text). • PLAQUE / MARQUEUR : --tw-em-gradient:linear-gradient(c,c) + --tw-em-clip:border-box + --tw-em-bg-size/-pos (bande peinte sur la SEULE hauteur des glyphes → AUCUN débordement sur un masthead à interligne serré, cf G #G-accent-overlap) + --tw-em-fill: + --tw-em-pad. Posé sur `.tw-h1` (hero only) ou sur le DNA. C'est la recette des aperçus à plaque (style-G/.accent-mark, style-FORGE/.box…) ENFIN réutilisée par le moteur. */ .tw-h1 :is(em, i), .tw-h2 :is(em, i), .tw-h3 :is(em, i), .tw-h4 :is(em, i){ background-image: var(--tw-em-gradient, none); background-repeat: no-repeat; background-size: var(--tw-em-bg-size, auto); background-position: var(--tw-em-bg-pos, 0 0); -webkit-background-clip: var(--tw-em-clip, text); background-clip: var(--tw-em-clip, text); -webkit-text-fill-color: var(--tw-em-fill, var(--tw-em-color, currentColor)); padding: var(--tw-em-pad, 0); /* Défaut SLICE (revue 2026-07-02) : un `clone` inconditionnel faisait redémarrer le dégradé-texte à chaque ligne sur un em multi-lignes (régression dna-k/dna-t). Seules les DNAs à PLAQUE (G/FORGE) posent --tw-em-decoration-break: clone (plaque par ligne). */ -webkit-box-decoration-break: var(--tw-em-decoration-break, slice); box-decoration-break: var(--tw-em-decoration-break, slice); } .tw-numeral{ font-family: var(--tw-price-font, var(--tw-font-heading, inherit)); font-variant-numeric: tabular-nums; } .tw-numeral[data-affix]{ font-size: .65em; color: var(--tw-text-muted, #888); font-family: var(--tw-font-body, sans-serif); } .tw-list{ list-style: none; margin: 0; padding: 0; } .tw-list.tw-list--bullet li{ padding-inline-start: 1.4em; position: relative; } .tw-list.tw-list--bullet li::before{ content:""; position:absolute; inset-inline-start:.3em; top:.65em; width:.4em; height:.4em; border-radius:50%; background: var(--tw-icon-color, var(--tw-accent, currentColor)); } /* token C → visible sur bold (cf §6) */ .tw-body--cols-2{ column-count: 2; column-gap: var(--tw-gap, 2rem); } /* Lettrine éditoriale — OFF par défaut, ENTIÈREMENT gardée par des tokens `--tw-dropcap-cap-*` que SEUL un DNA éditorial pose (≠ `--tw-dropcap-size/color/font`, que ~40 DNAs définissent globalement pour le mécanisme de section `content-section--text-dropcap`). Sans opt-in : font/size/float/margin/color héritent ⇒ 1ʳᵉ lettre strictement normale (zéro fuite). Un DNA éditorial active via --tw-dropcap-cap-float:left (+ cap-size/cap-color/cap-font). Émise par richHome sur le 1er paragraphe de la story (blockStyle:'dropcap' → .tw-dropcap) ; option justification du corps via --tw-dropcap-align:justify. Token-driven (cf #118, contrat DNA). */ .tw-dropcap{ text-align: var(--tw-dropcap-align, inherit); hyphens: var(--tw-dropcap-hyphens, manual); -webkit-hyphens: var(--tw-dropcap-hyphens, manual); } .tw-dropcap::first-letter{ font-family: var(--tw-dropcap-cap-font, inherit); font-size: var(--tw-dropcap-cap-size, 1em); line-height: .8; float: var(--tw-dropcap-cap-float, none); margin: var(--tw-dropcap-cap-margin, 0); color: var(--tw-dropcap-cap-color, inherit); } /* ============================================================================ BRIQUE 9 — QUOTE ============================================================================ */ .tw-quote{ margin: 0; color: var(--tw-text-heading, inherit); font-family: var(--tw-font-body, inherit); } .tw-quote p{ font-size: var(--tw-size-lead, 1.25rem); line-height: 1.5; margin: 0; } .tw-quote cite{ display:block; margin-top: .8em; font-style: normal; color: var(--tw-text-muted, #888); font-size: var(--tw-size-meta, .875rem); } /* guillemets décoratifs de la brique (DNA-BRICK-DOM-SPEC §9 ; un DNA peut les masquer via content:none) */ .tw-quote p::before{ content: open-quote; } .tw-quote p::after{ content: close-quote; } /* ============================================================================ BRIQUE 2 — SURFACE (carte / panel) ============================================================================ */ .tw-surface{ background: var(--tw-surface, #fff); color: var(--tw-on-surface, inherit); border: var(--tw-border-width, 1px) solid var(--tw-border, rgba(0,0,0,.1)); border-radius: var(--tw-radius-card, 16px); box-shadow: var(--tw-shadow-card, none); margin: 0; /* surface = îlot grille/flex : jamais de marge externe (sécurise l'usage
) */ padding: var(--tw-card-padding, 1.75rem); transition: transform .18s ease, box-shadow .18s ease; } .tw-surface[data-surface="bare"]{ background: transparent; border: 0; box-shadow: none; padding: 0; } .tw-surface[data-surface="raised"]{ background: var(--tw-surface-raised, var(--tw-surface, #fff)); } /* Une surface MATÉRIALISÉE (card/raised) est un « îlot » : son texte intérieur se RE-LOCALISE sur son propre on-surface, sinon une carte claire sur une bande flood (bold) hérite du text-muted de la bande (crème) et devient invisible. (bare = transparent → hérite la bande.) */ .tw-surface[data-surface="card"], .tw-surface[data-surface="raised"]{ --tw-text: var(--tw-on-surface); --tw-text-heading: var(--tw-on-surface); /* 86 % du texte de la carte, mêlé à SA surface (plus 76 % translucide) : la fonction d'un témoignage ou la légende d'une carte tombaient à 3-4:1 sur les cartes des bandes colorées (axe-core, audit des 48 DNA, 2026-09-28). */ --tw-text-muted: color-mix(in oklab, var(--tw-on-surface) 86%, var(--tw-surface, transparent)); } /* Sur une bande `bold` (flood mi-ton : rouge, magenta, émeraude…), même 86 % ne suffit plus : la fonction d'un témoignage, la légende d'une carte ou d'un compte à rebours y restaient à 3,3-4,4:1 (axe-core, audit des 48 DNA, 2026-09-28). L'atténué y prend le texte plein de la carte ; la hiérarchie tient à la taille. */ [data-palette="bold"] :is(.tw-surface[data-surface="card"], .tw-surface[data-surface="raised"], .cards-block__card, .countdown-block--cards .countdown-block__unit, .feedback-block__item){ --tw-text-muted: var(--tw-on-surface); /* Le PRIX aussi : la couleur de prix de la bande (or, sceau, rouge) est réglée pour la bande, pas pour la carte claire posée dessus — 1,5 à 3:1 chez NOUVEAU, SUMI, CONSTRUCT (axe-core, 2026-09-28). Dans la carte, il prend son encre ; un DNA qui a réglé le prix de ses cartes de bande le déclare et garde la main. */ --tw-price-color: var(--tw-on-surface); } /* accent : bordure COMPLÈTE (pas seulement border-color) → reste visible même sur un data-surface="bare" qui met border:0 (ex. plan highlighted en variant minimal). */ /* La carte MISE EN AVANT (tarif « populaire ») : la surface DE LA BANDE teintée d'accent — plus `--tw-accent-soft`, teinte globale claire. Sur une bande sombre (l'`accent` vert de BAZAR, l'`accent` noir de SUISSE), la carte restait pâle sous le texte clair de la bande : prix, nom et avantages invisibles (audit des 48 DNA, 2026-09-28). */ .tw-surface--accent{ background: color-mix(in oklab, var(--tw-accent, currentColor) 14%, var(--tw-surface, transparent)); border: var(--tw-border-width, 1px) solid var(--tw-accent, currentColor); } /* Sa teinte assombrit (ou éclaircit) la carte : le texte ATTÉNUÉ, réglé pour la carte nue, y tombait sous 4,5:1 — la période d'un tarif « populaire » à 4,3:1 chez NORDIQUE et PASTEL sur bande forte (axe-core, 2026-09-28). Il y prend le texte plein de la carte ; la hiérarchie tient à la taille. */ .tw-surface--accent .tw-meta{ color: var(--tw-on-surface, var(--tw-text, currentColor)); } .tw-surface--glass{ background: var(--tw-surface-translucent, var(--tw-surface, #fff)); backdrop-filter: blur(var(--tw-blur, 0)); } .tw-surface--hover-lift:hover{ transform: translateY(var(--tw-hover-lift, 0)); box-shadow: var(--tw-shadow-card-hover, var(--tw-shadow-card, none)); } /* ============================================================================ BRIQUE 3 — MEDIA (image/vidéo/iframe/logo/avatar) ============================================================================ */ .tw-media{ position: relative; margin: 0; border-radius: var(--tw-radius-media, 12px); box-shadow: var(--tw-shadow-media, none); overflow: hidden; background: var(--tw-media-placeholder, #e9e3d8); filter: var(--tw-media-filter, none); /* p.ex. DNA-N pose sepia() (photos d'époque) ; défaut none */ } .tw-media > img, .tw-media > video, .tw-media > iframe{ width: 100%; height: 100%; object-fit: cover; } .tw-media[data-aspect="16:9"]{ aspect-ratio: 16/9; } .tw-media[data-aspect="4:3"]{ aspect-ratio: 4/3; } .tw-media[data-aspect="1:1"]{ aspect-ratio: 1/1; } .tw-media[data-aspect="3:2"]{ aspect-ratio: 3/2; } .tw-media[data-aspect="4:5"]{ aspect-ratio: 4/5; } .tw-media[data-aspect="3:4"]{ aspect-ratio: 3/4; } .tw-media[data-shape="circular"], .tw-media--avatar{ border-radius: 9999px; aspect-ratio: 1/1; } .tw-media--avatar{ width: var(--avatar-size, 48px); height: var(--avatar-size, 48px); flex: none; } .tw-media--logo{ background: transparent; box-shadow: none; border-radius: 0; overflow: visible; } /* HELO 75068 : une image détourée (PNG, SVG) laisse voir ce qu'il y a derrière — le fond d'attente du cadre, peint à la couleur du site, se posait en carré derrière un logo rond. */ .tw-media.tw-media--transparent{ --tw-media-placeholder: transparent; background: transparent !important; } .tw-media--logo > img{ object-fit: contain; } .tw-media--embed > iframe{ aspect-ratio: 16/9; } .tw-media__caption{ font-size: var(--tw-size-meta, .875rem); color: var(--tw-text-muted, #888); padding-top: .6rem; } .tw-media__caption--overlay{ position: absolute; inset-inline: 0; bottom: 0; padding: .8rem; color:#fff; background: var(--tw-overlay, rgba(0,0,0,.4)); } /* frame presets (skin DNA peut surcharger) */ .tw-media--border{ border: var(--tw-border-width,1px) solid var(--tw-border, rgba(0,0,0,.15)); } .tw-media--polaroid{ background:#fff; padding: .6rem .6rem 2.2rem; border-radius: var(--tw-radius-card,8px); box-shadow: var(--tw-shadow-media, 0 6px 18px rgba(0,0,0,.15)); } /* DNA media filter (--tw-media-filter) sur les images PUBLIÉES qui ne sont pas enveloppées dans .tw-media : cartes blog/shop, images vedette article/produit, et les vignettes du bloc Galerie. Sans ça le filtre N&B (DNA-E) / sépia (DNA-N) ne s'appliquait qu'à l'accueil/About (qui utilisent .tw-media), pas au blog / boutique / galerie. (L'imageBlock le reçoit déjà via son wrapper .tw-media — filtre seul, pas de sizing, pour ne pas recadrer ces images au format natif de leur carte. Un photoFilter utilisateur, plus spécifique sur l'img, l'emporte.) */ .blog-card__image, .product-card__image, .post-featured-image, .toweb-product__gallery img, .gallery-block__item img{ filter: var(--tw-media-filter, none); } /* ============================================================================ BRIQUE 4 — BUTTON (rempli/outline/soft) ============================================================================ */ .tw-button{ display: inline-flex; align-items: center; gap: .5em; justify-content: center; background: var(--tw-btn-bg, #222); color: var(--tw-btn-text, #fff); border: var(--tw-border-width,1px) solid var(--tw-btn-border, transparent); border-radius: var(--tw-radius-button, 8px); box-shadow: var(--tw-shadow-button, none); padding: var(--btn-py, .9rem) var(--btn-px, 1.8rem); font-family: var(--tw-font-body, sans-serif); font-weight: var(--tw-btn-weight, 600); letter-spacing: .01em; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; max-width: 100%; } /* Un libellé LONG (« RETROUVEZ NOTRE ACTUALITE ET LES NOUVEAUTES SUR FACEBOOK », site client V14 importé) sortait du téléphone en `nowrap`, rogné des deux côtés — et sur ORDINATEUR aussi dans une colonne étroite (« Download the free edition of TOWeb version 14.10 for Windows », lauyan.com, 24/09). Le bouton ne dépasse plus son conteneur et son libellé passe à la ligne, équilibré, s'il ne tient pas ; un libellé qui tient n'en voit rien. `flex-shrink: 0` : dans une rangée de boutons, c'est la RANGÉE qui passe à la ligne, un bouton ne se tasse pas pour y rester. */ .tw-button{ white-space: normal; text-wrap: balance; text-align: center; flex-shrink: 0; } @media (max-width: 767px){ .tw-button{ line-height: 1.25; } } .tw-button[data-size="small"]{ --btn-py:.55rem; --btn-px:1.15rem; font-size: var(--tw-size-meta,.875rem); } .tw-button[data-size="large"]{ --btn-py:1.1rem; --btn-px:2.4rem; } .tw-button[data-variant="outline"]{ background: transparent; color: var(--tw-btn-outline-text, var(--tw-accent, currentColor)); border-color: var(--tw-btn-outline-border, var(--tw-accent, currentColor)); box-shadow: none; } /* Bouton SECONDAIRE : un voile d'accent TRANSLUCIDE sur la bande, pas la teinte globale `--tw-accent-soft` (claire) — son libellé prend le texte de la bande, il sortait blanc sur pâle sur toute bande sombre (audit du 2026-09-28). Sur la bande claire par défaut, le rendu est celui d'avant, à un souffle près. */ .tw-button[data-variant="secondary"], .tw-button--soft{ background: color-mix(in oklab, var(--tw-accent, currentColor) 15%, transparent); color: var(--tw-text-heading, inherit); box-shadow: none; } .tw-button:hover{ transform: translateY(var(--tw-btn-hover-lift, -1px)); background: var(--tw-btn-bg-hover, var(--tw-btn-bg, #222)); color: var(--tw-btn-text-hover, var(--tw-btn-text, #fff)); box-shadow: var(--tw-shadow-button-hover, var(--tw-shadow-button, none)); } /* soft/secondary : garde son fond atténué au survol (sinon le :hover générique impose le fond primaire) */ .tw-button[data-variant="secondary"]:hover, .tw-button--soft:hover{ background: color-mix(in oklab, var(--tw-accent, currentColor) 24%, transparent); color: var(--tw-text-heading, inherit); box-shadow: none; } /* ============================================================================ BRIQUE 5 — CTA-LINK (lien souligné) ============================================================================ */ .tw-cta-link{ display: inline-flex; align-items: center; gap: .4em; font-family: var(--tw-font-body, sans-serif); font-weight: 500; color: var(--tw-cta-color, currentColor); text-decoration-line: underline; text-decoration-style: var(--tw-cta-underline-style, solid); text-decoration-color: var(--tw-cta-underline-color, currentColor); text-decoration-thickness: var(--tw-cta-underline-thickness, 1.5px); text-underline-offset: var(--tw-cta-underline-offset, .35em); transition: text-decoration-color .2s ease, color .2s ease; } .tw-cta-link:hover{ text-decoration-color: var(--tw-cta-underline-hover, var(--tw-accent-2, var(--tw-accent, currentColor))); } .tw-cta-link__arrow{ transition: transform .2s ease; } .tw-cta-link:hover .tw-cta-link__arrow{ transform: translateX(3px); } /* Filet de sécurité §6 (la classe « cta-link invisible sur bande bold », attrapée par dna-smoke sur c/e/k/l/n/o) : sur la bande `bold` (flood/sombre, texte flippé en on-accent), AUCUN DNA ne re-pointe --tw-cta-color → le lien-CTA garde la couleur du root (≈ le flood) = invisible. On le re-pointe ici par DÉFAUT sur on-accent (toujours lisible sur un flood) ; un DNA peut surcharger via `[data-dna][data-palette="bold"]` (spécificité supérieure). */ /* Un lien DANS un titre a la couleur du titre (Shopify, Squarespace) : l'accent y était illisible sur la bande `accent` de rainbowio, dont chaque titre est un lien vers sa rubrique. `color: currentColor` vaut `inherit`. */ :is(h1, h2, h3, h4, h5, h6) a{ --tw-prose-link: currentColor; } /* Un DNA sombre IMPOSE son mode (`themeImposeParLeDna`) : le bouton clair/sombre de l'en-tête n'a plus rien à basculer. Posé sur au site, sur le canevas dans l'éditeur. */ [data-theme-impose] .site-header-block__theme{ display: none; } /* Le texte ATTÉNUÉ d'une bande décalée (`subtle`, `accent`) : le gris du DNA est réglé pour le fond de PAGE (la garde `contraste-dna` le vérifie là), et la bande est plus foncée ou teintée — le chapeau, les méta et les chiffres de liste d'ATELIER tombaient à 3,4:1 sur son sable (axe-core sur la démo, 2026-09-28). Ici il se calcule SUR la bande : le texte de la bande, mêlé à son fond, à 78 % (4,5:1 dès que le texte fait 7:1). Un DNA qui a réglé l'atténué de sa bande le déclare dans `[data-dna] [data-palette]` et garde la main. */ :is([data-palette="subtle"], [data-palette="accent"]){ --tw-text-muted: color-mix(in oklab, var(--tw-text, currentColor) 78%, var(--tw-bg, transparent)); } [data-palette="bold"]{ /* Même classe pour un lien de TEXTE (un titre-lien de bande colorée) : il prenait --tw-accent, soit le flood. Un DNA qui a un accent lisible sur sa bande le dit par `[data-dna][data-palette="bold"]{ --tw-prose-link: … }`. */ --tw-prose-link: var(--tw-text, var(--tw-on-accent, currentColor)); --tw-cta-color: var(--tw-text, var(--tw-on-accent, currentColor)); /* Le fond ATTÉNUÉ (bouton secondaire, encadrés) suit la bande : `--tw-accent-soft` est global, donc la teinte claire de la racine ; posée sous le texte clair de la bande, elle rendait « Learn more » ou « Choose » blanc sur pâle (audit des 48 DNA, 2026-09-28). Un DNA qui a sa teinte de bande la déclare. */ --tw-accent-soft: color-mix(in oklab, var(--tw-text, #fff) 16%, transparent); /* Le sur-titre d'une bande flood : l'accent y est le flood, ou sa variante « claire » calculée pour la PAGE (sombre, donc) — bleu nuit sur bleu chez BRUTAL, violet sur violet chez LIQUID (audit des 48 DNA). Un DNA qui a une couleur lisible sur sa bande la déclare dans `[data-dna] [data-palette="bold"]`. */ --tw-eyebrow-color: var(--tw-text, currentColor); /* …et la variante « auto », que plusieurs DNA recopient dans leur bande `bold` : résolue à la RACINE, elle y valait la couleur calculée pour la page. Posée ici, sur la bande, elle y vaut son texte. */ --tw-eyebrow-color-auto: var(--tw-text, currentColor); --tw-cta-underline-color: var(--tw-text, var(--tw-on-accent, currentColor)); } /* Lien de NAVIGATION (header / menu / footer) — distinct du cta-link. PAS de soulignement permanent (le permanent est réservé au cta-link inline "action →"). Sobre par défaut ; le DNA décide l'effet de SURVOL (skin) — p.ex. DNA-C met son ondulation au hover seulement (sinon = correcteur ortho). */ .tw-nav-link{ display:inline-flex; align-items:center; gap:.4em; font-family: var(--tw-font-body, sans-serif); font-weight: 500; color: var(--tw-nav-color, var(--tw-text, currentColor)); text-decoration: none; transition: color .18s ease, text-decoration-color .18s ease; } .tw-nav-link:hover, .tw-nav-link[aria-current="page"], .tw-nav-link--active{ color: var(--tw-nav-color-hover, var(--tw-accent, currentColor)); } /* ============================================================================ BRIQUE 6 — BADGE / TAG ============================================================================ */ .tw-badge, .tw-tag{ display: inline-flex; align-items: center; gap: .35em; background: var(--tw-badge-bg, rgba(0,0,0,.06)); color: var(--tw-badge-text, inherit); border: var(--tw-border-width, 1px) solid var(--tw-badge-border, transparent); border-radius: var(--tw-radius-badge, 999px); padding: .25em .7em; font-family: var(--tw-font-body, sans-serif); font-size: var(--tw-size-meta, .8rem); font-weight: 500; line-height: 1; } .tw-badge--chip{ cursor: pointer; } .tw-badge--status::before{ content:""; width:.5em; height:.5em; border-radius:50%; background: var(--tw-accent, currentColor); } /* ============================================================================ BRIQUE 7 — PRICE + STICKER ============================================================================ */ .tw-price{ color: var(--tw-price-color, inherit); font-family: var(--tw-price-font, inherit); font-weight: 700; } .tw-price--sale{ color: var(--tw-accent, inherit); } .tw-price__compare{ text-decoration: line-through; color: var(--tw-text-muted, #999); font-weight: 400; margin-left: .4em; } /* sticker : caché par défaut, le DNA l'affiche */ .tw-price-sticker{ display: none; } /* ============================================================================ BRIQUE 8 — RULE (divider) ============================================================================ */ .tw-rule{ display: flex; align-items: center; justify-content: center; gap: .6em; padding-block: var(--tw-rule-space, 1rem); } .tw-rule--left{ justify-content: flex-start; } .tw-rule--right{ justify-content: flex-end; } .tw-rule__line{ flex: 1 1 auto; border: 0; border-top: var(--rule-th, 1px) solid var(--tw-rule-strong, var(--tw-rule, rgba(0,0,0,.2))); } .tw-rule--w-75 .tw-rule__line{ max-width: 75%; } .tw-rule--w-50 .tw-rule__line{ max-width: 50%; } .tw-rule--w-25 .tw-rule__line{ max-width: 25%; } .tw-rule--thin .tw-rule__line{ --rule-th: 1px; } .tw-rule--medium .tw-rule__line{ --rule-th: 2px; } .tw-rule--thick .tw-rule__line{ --rule-th: 4px; border-color: var(--tw-rule-strong, var(--tw-rule, currentColor)); } .tw-rule[data-variant="dashed"] .tw-rule__line{ border-top-style: dashed; } .tw-rule[data-variant="dotted"] .tw-rule__line{ border-top-style: dotted; } .tw-rule[data-variant="double"] .tw-rule__line{ border-top-style: double; border-top-width: 3px; } /* variantes dégradées : la ligne devient un fond (les bords s'estompent) */ .tw-rule[data-variant="gradient"] .tw-rule__line{ border: 0; height: var(--rule-th, 2px); background: linear-gradient(90deg, transparent, var(--tw-rule-strong, var(--tw-accent, currentColor)), transparent); } .tw-rule[data-variant="fade"] .tw-rule__line{ border: 0; height: var(--rule-th, 1px); background: linear-gradient(90deg, transparent, var(--tw-rule, currentColor), transparent); } /* ornament : glyphe centré (✦) entre deux traits — couleur = token accent/glyph DNA. */ .tw-rule__glyph{ flex: none; color: var(--tw-rule-glyph-color, var(--tw-accent, currentColor)); font-size: 1.15em; line-height: 1; } /* espacement vertical (la valeur par défaut = medium = 1rem sur .tw-rule) */ .tw-rule[data-spacing="small"]{ --tw-rule-space: .5rem; } .tw-rule[data-spacing="large"]{ --tw-rule-space: 2.5rem; } .tw-rule__glyph{ flex: none; color: var(--tw-rule-glyph-color, var(--tw-accent, currentColor)); font-size: 1.1em; } /* ornement : flourish SVG porté par le DNA */ .tw-rule[data-variant="ornament"] .tw-rule__line{ display: none; } /* ============================================================================ BRIQUE 11 — ICON ============================================================================ */ .tw-icon{ display: inline-flex; align-items: center; justify-content: center; width: var(--tw-icon-size, 1.5em); height: var(--tw-icon-size, 1.5em); color: var(--tw-icon-color, var(--tw-accent, currentColor)); } /* Inline-SVG icons (social/team links, brand-coloured icons) read --tw-icon-color DIRECTLY into `fill` — NOT via the svg's inherited `color`/`currentColor`. The currentColor chain is fragile on wrappers (any `.content-section a`/`*` rule that touches the svg's `color` silently broke the fill → social icons stuck on the accent regardless of the palette re-point or the colour-style override). By reading the brick's own token here, the icon is legible on every palette (cream on a `bold` flood) and the Brand/Mono/White/Black styles (which set --tw-icon-color) work. Mask icons ([data-glyph]/[data-icon-svg]) have no child and keep their currentColor mask below. */ .tw-icon > svg{ width: 100%; height: 100%; fill: var(--tw-icon-color, var(--tw-accent, currentColor)); } /* HELO 75087 : site web, e-mail et téléphone sont dessinés AU TRAIT (`fill="none"`, `stroke`). La règle ci-dessus l'emporte sur l'attribut : le globe devenait un disque plein. Ceux-là gardent un fond vide, et leur trait lit le même jeton. */ .tw-icon > svg[fill="none"]{ fill: none; stroke: var(--tw-icon-color, var(--tw-accent, currentColor)); } /* mask-span = forme canonique de l'icône (DNA-BRICK-DOM-SPEC §11) : data-glyph = glyphe UI nommé ; data-icon-svg = SVG arbitraire (le markup pose --glyph = le data-URI). Les deux se peignent en currentColor → l'accent/DNA s'applique. */ .tw-icon[data-glyph], .tw-icon[data-icon-svg]{ background: currentColor; -webkit-mask: var(--glyph) center/contain no-repeat; mask: var(--glyph) center/contain no-repeat; } /* well = pastille autour de l'icône : on GARDE la taille définie (--tw-icon-size) et on étend le padding vers l'extérieur (content-box). width/height:auto cassait les en width:100% (pas de référence → ballonnent). */ .tw-icon--well{ background: var(--tw-accent-soft, rgba(0,0,0,.06)); border-radius: var(--tw-radius-button, 10px); padding: .6em; box-sizing: content-box; } /* ============================================================================ BRIQUE 12 — FIELD (input/textarea/select) ============================================================================ */ .tw-field{ width: 100%; background: var(--tw-field-bg, var(--tw-surface, #fff)); color: var(--tw-on-surface, inherit); border: var(--tw-border-width, 1px) solid var(--tw-field-border, var(--tw-border, rgba(0,0,0,.18))); border-radius: var(--tw-radius-field, var(--tw-radius-button, 8px)); padding: .7rem .9rem; font: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .tw-field::placeholder{ color: var(--tw-text-muted, #999); } .tw-field:focus{ outline: none; border-color: var(--tw-accent, #888); box-shadow: 0 0 0 3px var(--tw-accent-soft, rgba(0,0,0,.08)); } .tw-field--area{ min-height: 6em; resize: vertical; } /* ============================================================================ BRIQUE 10 — CODE (toujours sombre — pilotée uniquement par --tw-code-*) ============================================================================ */ .tw-code{ background: var(--tw-code-bg, #1e1e1e); color: var(--tw-code-text, #e6e6e6); border-radius: var(--tw-radius-card, 12px); font-family: var(--tw-font-mono, ui-monospace, monospace); overflow: hidden; } .tw-code__chrome{ display: flex; align-items: center; gap: .6em; padding: .6em .9em; border-bottom: 1px solid var(--tw-code-chrome-rule, rgba(255,255,255,.1)); } .tw-code__dots{ display:inline-flex; gap:.4em; } .tw-code__dots::before, .tw-code__dots::after{ content:""; width:.7em; height:.7em; border-radius:50%; background: rgba(255,255,255,.25); } .tw-code__lang{ font-size:.7rem; text-transform: uppercase; letter-spacing:.1em; color: var(--tw-code-prompt, #9cdcfe); } .tw-code__file{ font-size:.75rem; color: rgba(255,255,255,.55); } .tw-code__copy{ margin-left:auto; background:none; border:0; color: rgba(255,255,255,.5); cursor:pointer; } .tw-code__pre{ margin:0; padding: 1rem 1.1rem; overflow-x:auto; font-size:.85rem; line-height:1.6; } .code-token--keyword{ color: var(--tw-code-keyword, #c586c0); } .code-token--string{ color: var(--tw-code-string, #ce9178); } .code-token--comment{ color: var(--tw-code-comment, #6a9955); font-style: italic; } .code-token--number{ color: var(--tw-code-number, #b5cea8); } .code-token--function{ color: var(--tw-code-function, #dcdcaa); } /* ============================================================================ AUX — backdrop (atmosphère), rating (étoiles) ============================================================================ */ .tw-backdrop{ position: fixed; inset: 0; z-index: -1; background: var(--tw-backdrop, none); pointer-events: none; } .tw-backdrop--section{ position: absolute; inset: 0; z-index: 0; background: var(--tw-section-backdrop, none); pointer-events: none; } /* The section that owns a backdrop must be a positioning context, and its content must sit above the (z-index:0) atmosphere layer. Container class differs editor (.content-section__container) vs publish (.toweb-container). DNA-agnostic: any DNA that sets --tw-section-backdrop gets the atmosphere; none = the div paints nothing. */ .content-section:has(> .tw-backdrop--section){ position: relative; } .content-section:has(> .tw-backdrop--section) > :is(.content-section__container, .toweb-container){ position: relative; z-index: 1; } /* A user media background (image/video) supersedes the DNA atmosphere — applies to ALL DNAs. */ .content-section--has-bg-image > .tw-backdrop--section, .content-section--has-bg-video > .tw-backdrop--section{ display: none; } /* AMBIANCES ANIMÉES (`data-atmosphere`, choisies par section) — le fond VIVANT des sites premium : une aurore qui dérive, une lueur qui respire, une grille ou une trame qui s'estompe vers les bords. Tout vient de la palette de la bande (--tw-accent, --tw-text, --tw-bg) : l'ambiance suit le DNA, la palette de la section et le mode sombre, sans une couleur en dur. CSS pur, animé par `transform`/`opacity` seulement (composité, sans repeindre), figé quand le visiteur demande moins de mouvement. Elle REMPLACE l'atmosphère du DNA dans cette section ; une image ou une vidéo de fond la remplace à son tour (règle ci-dessus). */ .content-section[data-atmosphere] > .tw-backdrop--section{ overflow: hidden; background: none; --atm-a: color-mix(in oklab, var(--tw-accent, #6366f1) 42%, transparent); --atm-b: color-mix(in oklab, var(--tw-accent, #6366f1) 26%, var(--tw-text, #111) 6%); } @supports (color: oklch(from red l c h)){ .content-section[data-atmosphere] > .tw-backdrop--section{ --atm-b: var(--tw-accent, #6366f1); } @supports (color: oklch(from red l c h)){ .content-section[data-atmosphere] > .tw-backdrop--section{ --atm-b: oklch(from var(--tw-accent, #6366f1) l c calc(h + 55) / 0.34); } } } .content-section[data-atmosphere] > .tw-backdrop--section::before, .content-section[data-atmosphere] > .tw-backdrop--section::after{ content: ""; position: absolute; pointer-events: none; } /* Mise en pause par le visiteur (commande de la page, pause-animations.ts, WCAG 2.2.2) : l'ambiance s'arrête là où elle en est. Plus spécifique que les règles qui animent (l'attribut en plus) : `animation` en raccourci y remet `animation-play-state` à `running`. */ .content-section[data-atmosphere][data-tw-pause="on"] > .tw-backdrop--section::before, .content-section[data-atmosphere][data-tw-pause="on"] > .tw-backdrop--section::after{ animation-play-state: paused; } /* Aurore : deux nappes de couleur qui dérivent lentement, en sens contraires. */ .content-section[data-atmosphere="aurora"] > .tw-backdrop--section::before{ inset: -35% -20%; background: radial-gradient(38% 42% at 22% 30%, var(--atm-a), transparent 70%), radial-gradient(34% 40% at 78% 62%, var(--atm-b), transparent 70%); animation: tw-atm-derive 22s ease-in-out infinite alternate; } .content-section[data-atmosphere="aurora"] > .tw-backdrop--section::after{ inset: -30% -25%; background: radial-gradient(30% 36% at 60% 20%, var(--atm-b), transparent 70%); animation: tw-atm-derive 28s ease-in-out -9s infinite alternate-reverse; opacity: .8; } /* Lueur : un halo de la couleur d'accent au-dessus du contenu, qui respire. */ .content-section[data-atmosphere="glow"] > .tw-backdrop--section::before{ left: 50%; top: -30%; width: min(1100px, 130%); aspect-ratio: 2 / 1; translate: -50% 0; background: radial-gradient(closest-side, var(--atm-a), transparent); animation: tw-atm-respire 9s ease-in-out infinite alternate; } /* Grille et trame : un motif fin, estompé vers les bords, qui glisse à peine. */ .content-section[data-atmosphere="grid"] > .tw-backdrop--section::before, .content-section[data-atmosphere="dots"] > .tw-backdrop--section::before{ inset: -64px 0 0 0; --atm-trait: color-mix(in oklab, var(--tw-text, #111) 9%, transparent); -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 30%, transparent 100%); animation: tw-atm-glisse 14s linear infinite; } .content-section[data-atmosphere="grid"] > .tw-backdrop--section::before{ background: linear-gradient(var(--atm-trait) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--atm-trait) 1px, transparent 1px) 0 0 / 64px 64px; } .content-section[data-atmosphere="dots"] > .tw-backdrop--section::before{ --atm-trait: color-mix(in oklab, var(--tw-text, #111) 16%, transparent); background: radial-gradient(var(--atm-trait) 1.2px, transparent 1.6px) 0 0 / 22px 22px; animation-duration: 8s; } .content-section[data-atmosphere="grid"] > .tw-backdrop--section::after, .content-section[data-atmosphere="dots"] > .tw-backdrop--section::after{ left: 50%; top: -20%; width: min(900px, 110%); aspect-ratio: 2 / 1; translate: -50% 0; background: radial-gradient(closest-side, var(--atm-a), transparent); opacity: .55; } @keyframes tw-atm-derive{ 0% { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); } 100% { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.12); } } @keyframes tw-atm-respire{ 0% { opacity: .65; transform: scale(.94); } 100% { opacity: 1; transform: scale(1.06); } } /* Glisse d'exactement UNE maille : la boucle est invisible. */ @keyframes tw-atm-glisse{ from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 64px, 0); } } .content-section[data-atmosphere="dots"] > .tw-backdrop--section::before{ animation-name: tw-atm-glisse-trame; } @keyframes tw-atm-glisse-trame{ from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 22px, 0); } } @media (prefers-reduced-motion: reduce){ .content-section[data-atmosphere] > .tw-backdrop--section::before, .content-section[data-atmosphere] > .tw-backdrop--section::after{ animation: none; } } [data-animations="off"] .content-section[data-atmosphere] > .tw-backdrop--section::before, [data-animations="off"] .content-section[data-atmosphere] > .tw-backdrop--section::after{ animation: none; } /* ÉTOILES DE NOTATION — un élément graphique porteur de sens : 3:1 contre le fond (WCAG 1.4.11). Audit du 2026-09-28 : l'or des DNA (AURORE #f7b733, 1,8:1 sur blanc) et les étoiles vides en `--tw-rating-off` (filet, 1,2 à 2,9:1) passaient sous le seuil dans une vingtaine de DNA. Sans toucher à la couleur du DNA : - l'étoile PLEINE garde sa teinte et reçoit un CONTOUR, la même teinte mêlée à l'encre du texte — lisible sur clair comme sur sombre (le contour d'or foncé des étoiles d'Amazon ou de Google) ; - l'étoile VIDE est un contour à l'encre atténuée (`--tw-text-muted`, que chaque DNA et chaque palette tiennent à 4,5:1). Plein ou vide se lit par la FORME, pas seulement par la couleur (1.4.1). `--tw-rating-off` n'est plus lu ici. */ .tw-rating{ display:inline-flex; gap:.1em; color: var(--tw-rating-on, var(--tw-accent, #e0a030)); letter-spacing:.05em; } .tw-rating > span, .feedback-block__item-star.is-filled{ -webkit-text-stroke: .07em color-mix(in oklab, var(--tw-rating-on, var(--tw-accent, #e0a030)) 30%, var(--tw-text, #1a1a1a)); paint-order: stroke fill; } .tw-rating > [data-empty]{ color: var(--tw-text-muted, currentColor); -webkit-text-stroke: 0; } /* ============================================================================ LAYOUT DE BLOCS (DNA-agnostique — le bloc porte le layout, pas la couleur) ============================================================================ */ .hero-block{ display: grid; gap: var(--tw-gap, 3rem); align-items: center; } .hero-block--split{ grid-template-columns: 7fr 5fr; } .hero-block__text{ display:flex; flex-direction:column; min-width:0; } /* Masthead → lead : .tw-lead{margin:0} (brique typo) ANNULE le rythme .tw-stack sur cette paire → le titre et le sous-titre se touchent (gap réel = 0). Avec un masthead à line-height serré + un em italique à jambages (DNA-D : leading .95, « pièces choisies »), les descendantes mordent la ligne de lead. On rétablit un gap réel, robuste aux leadings serrés : le rythme propre du DNA (--tw-gap), avec un plancher em (suit la taille du lead) si un DNA réduit son gap. (0,2,0) bat .tw-lead{margin:0} (0,1,0). DNA-agnostique, pur layout. */ .hero-block__text.tw-stack > .tw-lead{ margin-top: max(var(--tw-gap, 1.5rem), 0.5em); } .hero-block__media{ min-width:0; } .hero-block__media > .tw-media, .hero-block__media img{ display:block; width:100%; height:auto; } .hero-block__ctas{ display:flex; gap: var(--tw-gap, 1.5rem); align-items:center; flex-wrap:wrap; margin-top: 1.5rem; } @media (max-width: 880px){ .hero-block--split{ grid-template-columns: 1fr; } } /* layout-variants (contentLayout TOWeb — DNA-BLOCKS-SPEC §3.3) : slot layout pur. */ .hero-block--layout-text-only{ grid-template-columns: 1fr; } .hero-block--layout-text-image-right{ grid-template-columns: 1.1fr 1fr; } .hero-block--layout-text-image-left{ grid-template-columns: 1fr 1.1fr; } .hero-block--layout-text-image-left .hero-block__text{ grid-column: 2; } .hero-block--layout-text-image-left .hero-block__media{ grid-column: 1; grid-row: 1; } /* text-image-background : la photo passe en FOND plein-cadre, le texte vit dans une CARTE = la recette de surface du DNA (IDENTIQUE à .tw-surface[data-surface="card"]). → AUCUNE valeur de style en dur : fond / bordure / rayon / ombre / padding + couleurs de texte viennent TOUS des tokens DNA (--tw-surface, --tw-border(-width), --tw-radius-card, --tw-shadow-card, --tw-card-padding, --tw-on-surface), eux-mêmes dérivés des variables utilisateur. Donc chaque DNA personnalise la carte du hero comme ses autres cartes, sans toucher aux 12 DNAs. Les libellés/accents/boutons gardent leurs couleurs natives → lisibles sur N'IMPORTE quel DNA. La photo reste audacieuse autour de la carte ; son rendu est gouverné par le DNA via --tw-media-filter (pas de voile en dur). Seule la GÉOMÉTRIE (position, grille, z-index, min-height, max-width, object-fit, justify-self) reste littérale = structure du bloc, pas un style. Scopé via :has(> .hero-block__media) : sans image, retombe sur un hero texte. Mobile (<=760px) : on dé-empile (texte sur la surface de section PUIS photo en bannière). */ .hero-block--layout-text-image-background{ grid-template-columns: 1fr; } /* PLEINE LARGEUR (décision Yann 2026-08-06). Une photo de hero contenue dans la colonne de texte se lit comme une vignette encadrée, pas comme une ouverture — c'est le seul endroit du site où l'image doit filer bord à bord. On neutralise donc la contrainte du CONTENEUR pour ce layout uniquement, et le texte reprend la largeur de contenu sur sa carte (voir `.hero-block__text` plus bas). Pas de `width: 100vw; margin-inline: calc(50% - 50vw)` : `100vw` INCLUT la barre de défilement verticale, donc cette recette classique déborde de sa largeur sur desktop et fait apparaître une barre horizontale. On laisse plutôt le conteneur cesser de contraindre — aucune unité `vw`, donc rien à compenser. Sélecteur préfixé `.toweb-section` : le thème généré émet `.toweb-section .toweb-container { max-width: … }` (0,2,0) APRÈS cette feuille ; à spécificité égale c'est lui qui gagnerait. Le préfixe porte la règle au-dessus. `:has()` NON IMBRIQUÉ : `:has(> .hero-block--…:has(> .hero-block__media))` est invalide et fait jeter la RÈGLE ENTIÈRE par le navigateur — silencieusement. La sélection se fait donc en une seule passe, avec le chemin complet à l'intérieur du `:has()`. Bornée à >760px : en dessous, le layout se dé-empile (texte PUIS photo en bannière) et le conteneur doit garder sa gouttière — sans cette borne, le texte du hero viendrait coller aux deux bords de l'écran sur téléphone. */ @media (min-width: 761px){ .toweb-section .toweb-container:has(> .hero-block--layout-text-image-background > .hero-block__media){ max-width: none; padding-inline: 0; } /* Et le visuel colle sous le menu (décision Yann 2026-08-08). Une image qui déborde sur les côtés mais flotte sous 6rem de fond clair a l'air à moitié finie : l'ouverture de page doit occuper le haut, pas y flotter. `:first-child` : SEULEMENT quand ce hero ouvre la page. Un même bloc placé en milieu de page a besoin de son espace au-dessus, sinon il vient buter contre la section précédente. Le padding du BAS reste dans les deux cas — c'est lui qui sépare le hero de la suite. */ /* ⚠️ SAUF QUAND LE MENU FLOTTE. « Coller sous le menu » suppose une BARRE sous laquelle se glisser. DNA-T (Aurora Glass) n'en a pas : son menu est une pilule de verre à marges et coins ronds, posée sur le fond de page. Mesuré le 2026-08-25 : bas de la pilule y=70, haut du hero y=70 — elles se touchent, et l'ombre portée de la pilule tombe sur la carte. Sur les 45 autres DNAs le menu est une barre pleine largeur et la valeur 0 reste la bonne. > Un objet qui flotte a besoin d'air dessous. Une barre, non. */ .toweb-section.content-section:first-child:has(.hero-block--layout-text-image-background > .hero-block__media){ padding-top: var(--tw-hero-flush-top, 0px); } /* ⚠️ UN PLANCHER D'AIR SOUS LE MENU, ET IL EST MESURÉ — PAS CHOISI. Depuis que la section colle au menu, la seule séparation restante est le `padding-block` du hero, qui suit `--tw-gap` : il varie du simple au triple selon le DNA. Relevé le 2026-08-25 sur dix DNAs, écart menu → carte du hero : t 0 px a 20 px cosmos 38 c/p/e 40 couture 48 solar 53 aqua 57 u 65 Zéro et vingt ne sont pas des choix de rythme, ce sont des accidents : la carte vient buter sous la barre. Le plancher vaut 2.5rem = 40 px, la valeur que quatre DNAs atteignent déjà d'eux-mêmes — il ne touche donc QUE les deux accidents et ne redessine le rythme d'aucun autre. Borné à >760px comme la règle du dessus : sous cette largeur la section garde son padding normal, un plancher s'y ajouterait au lieu de remplacer. */ .toweb-section.content-section:first-child .hero-block--layout-text-image-background:has(> .hero-block__media){ padding-block-start: max(var(--tw-gap, 1.5rem), 2.5rem); } } .hero-block--layout-text-image-background:has(> .hero-block__media){ position: relative; isolation: isolate; min-height: clamp(24rem, 58vh, 38rem); display: grid; align-items: center; /* La photo file bord à bord, mais la CARTE doit rester alignée sur la colonne de contenu du reste de la page — sinon elle vient coller au bord de l'écran. On rend donc au bloc les gouttières que le conteneur ne pose plus : au moins la gouttière habituelle, et davantage dès que la fenêtre dépasse la largeur de contenu. `--tw-content-max` / `--tw-content-pad` sont émis par le thème sur le conteneur (cf. generateGlobalCss) : ce sont les valeurs RÉELLEMENT appliquées au site. */ padding-block: var(--tw-gap, 1.5rem); padding-inline: max( var(--tw-content-pad, 2rem), calc((100% - var(--tw-content-max, 1200px)) / 2 + var(--tw-content-pad, 2rem)) ); /* Plus d'arrondi : un visuel bord à bord dont les angles sont rognés laisse quatre encoches de fond sur les côtés de la page. */ border-radius: 0; overflow: hidden; } .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__media{ position: absolute; inset: 0; z-index: 0; margin: 0; } .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__media > .tw-media, .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__media img{ width: 100%; height: 100%; object-fit: cover; /* ⚠️ ET L'ARRONDI VA JUSQU'À L'IMAGE — le `border-radius: 0` posé plus haut s'arrêtait au BLOC. Or la balise porte la classe `.tw-media`, qui applique `--tw-radius-media` : les quatre encoches que ce commentaire disait avoir supprimées étaient toujours là, sur les 46 DNAs. Les deux du HAUT touchent le menu et se lisent comme un défaut d'assemblage (Yann, 2026-08-25). > Une règle qui vise le parent d'un élément stylé ne le déshabille pas. > Le commentaire décrivait l'intention ; la mesure décrit le résultat. */ border-radius: 0; } /* LA CARTE = recette surface DNA (cf .tw-surface[data-surface="card"]) : zéro valeur en dur. z-index 1 > média 0 (PAS de z-index négatif : un -1 retombe derrière le fond opaque de .content-section quand .toweb-container pose un z-index:1). */ .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__text{ position: relative; z-index: 1; /* Panneau LÉGÈREMENT translucide par défaut (retour Yann 2026-07-04) : la photo de fond respire à travers la carte (92% + blur 6px). Tokens --tw-hero-panel-* pour qu'un DNA ajuste (A: 90%/6px, T: verre 22px — leurs overrides priment). */ background: var(--tw-hero-panel-bg, color-mix(in srgb, var(--tw-surface, #fff) 92%, transparent)); -webkit-backdrop-filter: blur(var(--tw-hero-panel-blur, 6px)); backdrop-filter: blur(var(--tw-hero-panel-blur, 6px)); border: var(--tw-border-width, 1px) solid var(--tw-border, rgba(0,0,0,.1)); border-radius: var(--tw-radius-card, 16px); box-shadow: var(--tw-shadow-card, none); padding: var(--tw-card-padding, 1.75rem); --tw-text: var(--tw-on-surface); --tw-text-heading: var(--tw-on-surface); --tw-text-muted: color-mix(in oklab, var(--tw-on-surface) 86%, var(--tw-surface, transparent)); color: var(--tw-on-surface, inherit); max-width: min(40rem, 100%); justify-self: start; } .hero-block--layout-text-image-background.hero-block--align-center:has(> .hero-block__media) > .hero-block__text{ justify-self: center; } .hero-block--layout-text-image-background.hero-block--align-right:has(> .hero-block__media) > .hero-block__text{ justify-self: end; } @media (max-width: 760px){ .hero-block--layout-text-image-background:has(> .hero-block__media){ display: block; min-height: 0; padding: 0; overflow: visible; isolation: auto; border-radius: 0; } .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__media{ position: relative; inset: auto; z-index: auto; width: 100%; aspect-ratio: 16 / 10; margin-top: var(--tw-gap, 1.5rem); border-radius: var(--tw-radius-media, 12px); overflow: hidden; } .hero-block--layout-text-image-background:has(> .hero-block__media) > .hero-block__text{ background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; --tw-text: inherit; --tw-text-heading: inherit; --tw-text-muted: inherit; color: inherit; } } /* alignement du texte (hero-block--align-{align}) */ .hero-block--align-center{ text-align: center; } .hero-block--align-center .hero-block__text{ align-items: center; } .hero-block--align-center .hero-block__ctas{ justify-content: center; } .hero-block--align-right{ text-align: right; } .hero-block--align-right .hero-block__text{ align-items: flex-end; } .hero-block--align-right .hero-block__ctas{ justify-content: flex-end; } @media (max-width: 760px){ .hero-block--layout-text-image-right, .hero-block--layout-text-image-left{ grid-template-columns: 1fr; } .hero-block--layout-text-image-left .hero-block__text, .hero-block--layout-text-image-left .hero-block__media{ grid-column: 1; grid-row: auto; } } /* (Le placeholder des champs éditables vides est une affordance ÉDITEUR : il vit dans blocks-editor.css, PAS ici — blocks-base.css = briques nues + layout, le DNA décide du reste.) */ .cta-block{ display:flex; gap: var(--tw-gap,1rem); align-items:center; flex-wrap:wrap; } .cta-block--align-center{ justify-content:center; } .cta-block--banner{ flex-direction:column; text-align:center; } .feature-item{ display:flex; flex-direction:column; gap:.75rem; } .feature-item--list{ flex-direction:row; align-items:flex-start; } .stat-item{ display:flex; flex-direction:column; gap:.25rem; } .stat-item__value{ font-size: clamp(2.2rem,4vw,3.2rem); color: var(--tw-accent, inherit); } .product-card{ display:flex; flex-direction:column; } .product-card__link{ display:flex; flex-direction:column; gap:.85rem; } .product-card__image-wrapper{ position:relative; } .product-card__index{ position:absolute; bottom:.85rem; inset-inline-start:1rem; z-index:1; font-family: var(--tw-font-mono, monospace); font-size: var(--tw-size-meta,.8rem); letter-spacing:.06em; color: color-mix(in srgb, #fff 82%, transparent); } .product-card__body{ display:flex; flex-direction:column; gap:.3rem; } .product-card__tagline{ font-style: italic; color: var(--tw-accent-2, var(--tw-text-muted, inherit)); } .product-card__cta{ margin-top:.4rem; } .schedule-row{ display:grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; align-items:center; padding-block: 1.25rem; } @media (max-width:680px){ .schedule-row{ grid-template-columns: 1fr; gap:.5rem; } } /* ---------------------------------------------------------------------------- BLOCS SUPPLÉMENTAIRES (DOM canonique DNA-BLOCKS-SPEC). Tous DNA-agnostiques : uniquement du layout, consomment les briques .tw-* et le moteur .tw-grid. Variantes différentes de celles de DNA-C → validation de l'usage des briques par des blocs variés (même couche, autre composition). ---------------------------------------------------------------------------- */ /* hero — variante centered (text-only) en plus de split */ .hero-block--centered{ grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; } .hero-block--centered .hero-block__ctas{ justify-content: center; } /* logos-block — bande de logos partenaires */ .logos-block{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(1.5rem, 5vw, 3.5rem); } .logos-block__item{ opacity:.6; transition: opacity .2s; } .logos-block__item:hover{ opacity:1; } /* features-block — grille de features (colonnes via .tw-grid en markup ; le conteneur porte `features-block features-block--{variant} tw-grid`). DNA-BLOCKS-SPEC §3.4. item = .tw-surface (card pour `cards`, bare pour icons/list/centered). */ /* ⚠️ PAS DE `height:100%` SUR UN ÉLÉMENT DE GRILLE (lauyan.com#380, iPad iOS 17) : WebKit 17 résolvait ce pourcentage sur bien plus que la rangée — les cartes doublaient de hauteur, débordaient de leur section et passaient sous la suivante. Un élément de grille ou de flex s'étire déjà à la hauteur de sa rangée (`align-self: stretch`) : même rendu partout, sans pourcentage. */ .features-block .tw-surface{ display:flex; flex-direction:column; gap:.7rem; align-self:stretch; } .features-block .tw-icon{ --tw-icon-size: 2rem; } /* icône proéminente */ .features-block .tw-media{ aspect-ratio: 16/10; } /* item à image */ .features-block--icons{ text-align:center; } .features-block--icons .tw-surface{ align-items:center; } .features-block--centered{ text-align:center; } .features-block--centered .tw-surface{ align-items:center; } /* list = icône à gauche, titre+texte à droite (grille : l'icône couvre 2 lignes, sans wrapper de contenu — DOM canonique icon+h4+p direct dans la surface). */ .features-block--list .tw-surface{ display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem; align-items:start; align-content:start; } .features-block--list .tw-surface > .tw-icon{ grid-row: 1 / span 2; } /* features-block — prix optionnel (.tw-numeral) + lien optionnel "label →" (.tw-cta-link). Tout optionnel : sans ces éléments, rendu identique. Le lien est aligné à gauche et poussé en bas de la carte (margin-top:auto) pour aligner les liens entre cartes de hauteurs différentes. Modelé sur cards-block__price / cards-block__button. */ .features-block__price{ margin-top:.1rem; } .features-block__link{ margin-top:auto; align-self:flex-start; padding-top:.35rem; } /* list = pas de poussée verticale (la grille auto/1fr ne définit pas de hauteur). */ .features-block--list .features-block__link{ margin-top:0; } /* stats-block — rangée de métriques */ .stats-block .tw-surface{ display:flex; flex-direction:column; gap:.3rem; } .stats-block--centered{ text-align:center; } .stats-block--centered .tw-surface{ align-items:center; } .stats-block--horizontal .tw-surface{ flex-direction:row; align-items:center; gap:1rem; } /* La grande taille est sur le WRAPPER : la valeur (.tw-numeral) l'hérite, mais l'affixe (.tw-numeral[data-affix]{font-size:.65em}) reste proportionnel et petit (sinon il s'écrase à la taille de la valeur — même spécificité, source tardive). */ .stats-block__value-wrapper{ display:flex; align-items:baseline; gap:.08em; flex-wrap:wrap; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height:1; } /* #491 — le nombre se règle sur la largeur de SA carte, pas sur celle de l'écran. La taille du wrapper (base ci-dessus, ou celle du DNA) reste la taille VOULUE ; le nombre la prend tant qu'il tient, et se réduit sinon : largeur de la carte (container query) / longueur du plus long chiffre du bloc (`--stats-len`, posée par le rendu, shared/blocks/statsLongueur.ts) / .66em par chiffre (gras compris). Cinq valeurs à cinq chiffres dans un article de 800 px ne se chevauchent plus, dans l'éditeur comme sur le site. L'affixe suit dans la même proportion. */ .stats-block > .tw-surface{ container-type: inline-size; min-width: 0; } .stats-block{ --stats-fit: calc(100cqi / (var(--stats-len, 4) * .66)); } .stats-block__value-wrapper{ max-width: 100%; } .stats-block__value-wrapper > .tw-numeral:not([data-affix]){ font-size: min(1em, var(--stats-fit)); } .stats-block__value-wrapper > .tw-numeral[data-affix]{ font-size: min(.65em, var(--stats-fit) * .65); } /* Dernier recours (police très large, valeur hors norme) : couper plutôt que déborder. */ .stats-block__value-wrapper > .tw-numeral{ overflow-wrap: anywhere; min-width: 0; } .stats-block--horizontal .stats-block__value-wrapper{ min-width: 0; } /* Colonnes plafonnées par la place : le nombre choisi est un MAXIMUM. Une grille trop étroite pour ses colonnes (article, colonne d'un bloc Colonnes) passe à la ligne au lieu d'écraser ses cartes sous ~7,5rem. Avec la place, la piste vaut exactement 1/--cols (le −1px absorbe l'arrondi) : rien ne change. */ .stats-block.tw-grid{ grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5rem, (100% - (var(--cols, 1) - 1) * var(--tw-gap, 1.5rem) - 1px) / var(--cols, 1))), 1fr)); } /* caption optionnelle : sous-ligne meta sous le label, plus petite/discrète (hérite .tw-meta) */ /* ⚠️ Pas d'opacité sur du texte déjà atténué (`.tw-meta` = `--tw-text-muted`) : la double atténuation le faisait passer sous 4,5:1 (axe-core sur la démo, 2026-09-28). */ .stats-block__caption{ font-size:.8em; } /* specs-block — rangées LABEL : VALUE (métadonnées projet / fiche technique). Layout-only : la typo/couleur vient des briques .tw-eyebrow (label) + .tw-body (value). DNA-BLOCKS-SPEC §3. */ .specs-block{ display:flex; flex-direction:column; gap:.85rem; } .specs-block__row{ display:grid; grid-template-columns:minmax(6rem,.4fr) 1fr; gap:.2rem 1.5rem; align-items:start; } .specs-block--stacked .specs-block__row{ grid-template-columns:1fr; gap:.15rem; } .specs-block__value{ white-space:pre-line; } /* story-block — récit « collant » façon Apple (Yann, 2026-09-26). Deux colonnes : les étapes défilent, la scène reste collée et fond d'une image à l'autre (`motion.ts` → initRecits pose `is-active` et --sb-progress). Layout-only : typo/couleur par .tw-eyebrow / .tw-h3 / .tw-body + jetons --tw-*. ⚠️ Les étapes ne pâlissent QUE sous `.story-block--vivant`, que le script pose : sans lui (éditeur, JS absent, moins de mouvement) tout reste lisible. Variables internes en --sb-* : un --tw-* lu sans repli devrait exister dans les 48 DNA. */ .story-block{ --sb-progress: 1; --sb-radius: var(--tw-radius-media, 14px); display:grid; grid-template-columns:1fr; gap:2rem; } .story-block__steps{ display:flex; flex-direction:column; gap:2.5rem; min-width:0; } .story-block__step{ display:flex; flex-direction:column; gap:1rem; } .story-block__step-body{ display:flex; flex-direction:column; gap:.6rem; max-width:34rem; } .story-block__title, .story-block__text, .story-block__eyebrow{ margin:0; } .story-block__step-media{ border-radius:var(--sb-radius); overflow:hidden; aspect-ratio:4/3; } .story-block__stage{ display:none; } /* Cadre de la scène (et, en mobile, de l'image de chaque étape). */ .story-block--frame-rounded :is(.story-block__frame, .story-block__step-media){ border-radius:var(--sb-radius); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 24px 60px -18px rgba(0,0,0,.28); } .story-block--frame-none :is(.story-block__frame, .story-block__step-media){ border-radius:0; box-shadow:none; } /* « Navigateur » : même habillage que .image-block--frame-browser (blocks-shared.css). */ .story-block--frame-browser :is(.story-block__frame, .story-block__step-media){ box-sizing:border-box; padding-top:2rem; border:1px solid color-mix(in oklab, var(--tw-text, #111) 12%, transparent); border-radius:12px; background: radial-gradient(circle 5px at 18px 1rem, #ff5f57 97%, transparent 100%) no-repeat, radial-gradient(circle 5px at 36px 1rem, #febc2e 97%, transparent 100%) no-repeat, radial-gradient(circle 5px at 54px 1rem, #28c840 97%, transparent 100%) no-repeat, linear-gradient(color-mix(in oklab, var(--tw-text, #111) 6%, var(--tw-surface, #fff)), color-mix(in oklab, var(--tw-text, #111) 6%, var(--tw-surface, #fff))) top / 100% 2rem no-repeat, var(--tw-surface, #fff); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 24px 60px -12px rgba(0,0,0,.28); } .story-block--frame-browser .story-block__step-media{ aspect-ratio:auto; } .story-block--frame-browser .story-block__step-media > img{ height:auto; aspect-ratio:4/3; } @media (min-width: 900px){ .story-block:not(.story-block--sans-scene){ grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr); gap:clamp(2rem,5vw,5rem); align-items:start; } .story-block--media-left:not(.story-block--sans-scene){ grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); } .story-block--media-left .story-block__stage{ order:-1; } .story-block:not(.story-block--sans-scene) .story-block__steps{ gap:0; } .story-block:not(.story-block--sans-scene) .story-block__step{ min-height:70vh; justify-content:center; } /* La PREMIÈRE étape et la scène partent du haut : centrées dans 70vh, elles laissaient un écran presque blanc avant la première image (Yann, 2026-09-26). */ .story-block:not(.story-block--sans-scene) .story-block__step:first-child{ justify-content:flex-start; padding-top:clamp(1rem, 6vh, 3.5rem); } .story-block:not(.story-block--sans-scene) .story-block__step-media{ display:none; } /* La scène a le FORMAT DES IMAGES (16:10, celui d'une capture d'écran), centrée dans la hauteur collante : une scène de 76vh sur une demi-largeur était un portrait, et rognait les captures sur les deux côtés. */ .story-block__stage{ display:flex; flex-direction:column; justify-content:flex-start; gap:1rem; position:sticky; top:max(12vh, calc(var(--mv-entete-h, 0px) + 1.5rem)); height:76vh; container-type:inline-size; } .story-block__frame{ position:relative; flex:none; width:100%; aspect-ratio:16/10; max-height:calc(76vh - 2rem); overflow:hidden; } .story-block--frame-browser .story-block__frame{ aspect-ratio:auto; height:calc((100cqw) * 0.625 + 2rem); } .story-block__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transform:scale(1.04); transition:opacity .7s ease, transform 1.2s cubic-bezier(.19,1,.22,1); } .story-block--frame-browser .story-block__media{ top:2rem; height:calc(100% - 2rem); border-radius:0 0 11px 11px; } .story-block__media.is-active{ opacity:1; transform:none; } .story-block__progress{ height:2px; border-radius:2px; background:color-mix(in oklab, var(--tw-text, #111) 12%, transparent); overflow:hidden; } .story-block__progress-bar{ display:block; height:100%; background:var(--tw-accent, currentColor); transform-origin:0 50%; transform:scaleX(var(--sb-progress)); transition:transform .6s cubic-bezier(.19,1,.22,1); } [dir="rtl"] .story-block__progress-bar{ transform-origin:100% 50%; } /* L'étape inactive s'estompe par sa COULEUR (le gris atténué du DNA, calculé pour tenir 4,5:1 sur sa bande), jamais par opacité : à .35, les étapes passées ou à venir tombaient sous le seuil de contraste (axe, lauyan.com). */ .story-block--vivant .story-block__step:not(.is-active), .story-block--vivant .story-block__step:not(.is-active) *{ color:var(--tw-text-muted, #595959); transition:color .5s ease; } } @media (prefers-reduced-motion: reduce){ .story-block__media, .story-block__progress-bar, .story-block--vivant .story-block__step, .story-block--vivant .story-block__step *{ transition:none; } .story-block__media{ transform:none; } } /* countdown-block — compte à rebours jusqu'à une date (#343). Chiffres en police de TITRE du DNA, alignés (tabular-nums) pour que la ligne ne tremble pas à chaque seconde. `cards` : une tuile par unité (surface/bordure/rayon du DNA) ; `plain` : les chiffres seuls, séparés par un filet. Centré, comme le veut le genre (lancements, soldes, événements). */ .countdown-block{ display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center; } .countdown-block__title{ margin:0; font-family:var(--tw-font-heading, inherit); font-weight:var(--tw-weight-heading, 700); font-size:clamp(1.1rem, 2.2vw, 1.5rem); color:var(--tw-text-heading, inherit); } .countdown-block__units{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(.5rem, 2vw, 1rem); } .countdown-block__units[hidden]{ display:none; } .countdown-block__unit{ display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:4.2em; } .countdown-block__value{ font-family:var(--tw-font-heading, inherit); font-weight:800; line-height:1; font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.02em; color:var(--tw-text-heading, inherit); } .countdown-block__label{ font-size:var(--tw-size-meta, .8rem); text-transform:uppercase; letter-spacing:.08em; color:var(--tw-text-muted, inherit); } .countdown-block--medium .countdown-block__value{ font-size:clamp(1.8rem, 5vw, 2.8rem); } .countdown-block--large .countdown-block__value{ font-size:clamp(2.4rem, 8vw, 4.6rem); } .countdown-block--cards .countdown-block__unit{ padding:clamp(.7rem, 2vw, 1.1rem) clamp(.8rem, 2.4vw, 1.4rem); background:var(--tw-surface, transparent); color:var(--tw-on-surface, inherit); border:var(--tw-border-width, 1px) solid var(--tw-border, var(--tw-rule, rgba(0,0,0,.12))); border-radius:var(--tw-radius-card, 12px); box-shadow:var(--tw-shadow-card, none); } .countdown-block--plain .countdown-block__unit + .countdown-block__unit{ border-inline-start:1px solid var(--tw-rule, rgba(0,0,0,.15)); padding-inline-start:clamp(.5rem, 2vw, 1rem); } .countdown-block__end{ margin:0; font-family:var(--tw-font-heading, inherit); font-weight:700; font-size:clamp(1.3rem, 3.4vw, 2rem); color:var(--tw-accent, inherit); } .countdown-block__end[hidden]{ display:none; } /* #497 — alignement à gauche / à droite (centré par défaut). */ .countdown-block--align-left{ align-items:flex-start; text-align:start; } .countdown-block--align-left .countdown-block__units{ justify-content:flex-start; } .countdown-block--align-right{ align-items:flex-end; text-align:end; } .countdown-block--align-right .countdown-block__units{ justify-content:flex-end; } .countdown-block__placeholder{ padding:1.2rem; border:1px dashed var(--tw-rule, rgba(0,0,0,.2)); border-radius:10px; color:var(--tw-text-muted, inherit); font-size:.9rem; } /* feedback-block — avis et commentaires (M-FEEDBACK). Il n'avait AUCUNE règle, ni commune ni dans un DNA (audit des 48 DNA, 2026-09-28) : libellés collés aux champs du dessus, étoiles de saisie en boutons radio natifs, étoiles pleines et vides identiques dans la liste. Tout en jetons : les 48 DNA l'habillent d'un coup. Garde : `scripts/ui-harness/dna-matrice.mjs` (règle « bloc-nu »). */ .feedback-block{ display:flex; flex-direction:column; gap:clamp(1rem, 2.5vw, 1.5rem); width:100%; max-width:48rem; } .feedback-block__header{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem 1rem; } .feedback-block__title{ margin:0; font-family:var(--tw-font-heading, inherit); font-weight:var(--tw-weight-heading, 700); font-size:var(--tw-size-h4, 1.25rem); line-height:var(--tw-leading-heading, 1.2); color:var(--tw-text-heading, inherit); } .feedback-block__average{ display:inline-flex; align-items:baseline; gap:.3em; color:var(--tw-text-muted, inherit); font-size:var(--tw-size-meta, .875rem); } .feedback-block__average-score{ font-family:var(--tw-font-heading, inherit); font-weight:700; font-size:1.6rem; line-height:1; color:var(--tw-text-heading, inherit); font-variant-numeric:tabular-nums; } .feedback-block__list{ display:flex; flex-direction:column; gap:.75rem; } .feedback-block__item{ padding:var(--tw-card-padding, 1.25rem); background:var(--tw-surface, transparent); color:var(--tw-on-surface, inherit); border:var(--tw-border-width, 1px) solid var(--tw-border, rgba(0,0,0,.12)); border-radius:var(--tw-radius-card, 12px); } .feedback-block__item-header{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .75rem; margin-bottom:.45rem; } .feedback-block__item-date{ margin-inline-start:auto; font-size:var(--tw-size-meta, .8rem); color:var(--tw-text-muted, inherit); } .feedback-block__item-content{ margin:0; white-space:pre-line; } .feedback-block__item-stars{ display:inline-flex; gap:.08em; } /* Étoile vide d'un avis : un CONTOUR à l'encre atténuée (voir `.tw-rating`). */ .feedback-block__item-star{ color: transparent; -webkit-text-stroke: .07em var(--tw-text-muted, currentColor); } .feedback-block__item-star.is-filled{ color:var(--tw-rating-on, var(--tw-accent, currentColor)); } .feedback-block__empty{ margin:0; color:var(--tw-text-muted, inherit); } .feedback-block__form{ display:flex; flex-direction:column; gap:1rem; } .feedback-block__fields{ position:relative; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; } .feedback-block__field{ display:flex; flex-direction:column; gap:.375rem; font-size:.875rem; font-weight:500; color:var(--tw-text, inherit); } .feedback-block__field--full, .feedback-block__rating, .feedback-block__captcha{ grid-column:1 / -1; } @media (max-width: 640px){ .feedback-block__fields{ grid-template-columns:minmax(0, 1fr); } } .feedback-block__rating{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; font-size:.875rem; font-weight:500; color:var(--tw-text, inherit); } .feedback-block__rating[hidden], .feedback-block [x-cloak]{ display:none; } /* Étoiles de SAISIE : la radio native reste dans l'arbre (clavier, lecteur d'écran) mais invisible ; l'étoile choisie et celles qui la précèdent s'allument, au survol comme à la sélection. Ordre du DOM : juste en RTL aussi. */ .feedback-block__rating-stars{ display:inline-flex; gap:.1em; } .feedback-block__star{ position:relative; display:inline-grid; place-items:center; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--tw-rating-on, var(--tw-accent, currentColor)); } .feedback-block__star input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; } .feedback-block__rating-stars:not(:has(input:checked)) .feedback-block__star, .feedback-block__star:has(input:checked) ~ .feedback-block__star{ color:var(--tw-rating-off, var(--tw-rule, rgba(0,0,0,.25))); } .feedback-block__rating-stars:hover .feedback-block__star{ color:var(--tw-rating-on, var(--tw-accent, currentColor)); } .feedback-block__rating-stars .feedback-block__star:hover ~ .feedback-block__star{ color:var(--tw-rating-off, var(--tw-rule, rgba(0,0,0,.25))); } .feedback-block__star:has(input:focus-visible){ outline:2px solid var(--tw-accent, currentColor); outline-offset:2px; border-radius:4px; } .feedback-block__submit{ align-self:flex-start; } .feedback-block__submit:disabled{ cursor:progress; opacity:.6; } .feedback-block__success, .feedback-block__error{ margin:0; padding:.75rem 1rem; font-size:.9375rem; color:var(--tw-text, inherit); border-radius:var(--tw-radius-field, var(--tw-radius-button, 8px)); } .feedback-block__success{ background:var(--tw-accent-soft, rgba(0,0,0,.06)); } .feedback-block__error{ background:color-mix(in srgb, var(--tw-surface, #fff) 82%, #dc2626); border-inline-start:3px solid #dc2626; } /* Une SURFACE peinte par un BLOC (hors brique `.tw-surface`) est un îlot, comme la brique : son texte se re-localise sur `--tw-on-surface`. Sans ça, une carte claire posée sur une bande `bold` héritait du texte clair de la bande — cartes, tuiles du compte à rebours et en-têtes de tableau BLANC SUR CRÈME chez ATELIER (audit des 48 DNA, 2026-09-28). */ :is(.cards-block__card, .countdown-block--cards .countdown-block__unit, .feedback-block__item, .product-card, .blog-card, .booking-block--card, .booking-block__summary-card, .tw-prose th, .content-section table th, .content-section table tbody tr:nth-child(even)){ --tw-text: var(--tw-on-surface); --tw-text-heading: var(--tw-on-surface); --tw-text-muted: color-mix(in oklab, var(--tw-on-surface) 86%, var(--tw-surface, transparent)); color: var(--tw-on-surface); } /* marquee-block — bandeau de texte qui défile sans fin (Yann, 2026-09-26). CSS seul : la piste porte deux groupes identiques et glisse de 0 à -50 %. Typo d'affiche = police de TITRE du DNA ; couleur = celle du texte de la bande (currentColor : le contour `outline` suit aussi le mode sombre). */ .marquee-block{ --mq-duree: 35s; --mq-sens: normal; position:relative; overflow:hidden; padding-block:.15em; font-family:var(--tw-font-heading, inherit); font-weight:700; line-height:1.1; letter-spacing:-.01em; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-block--medium{ font-size:clamp(1.5rem, 3.2vw, 2.4rem); } .marquee-block--large{ font-size:clamp(2.2rem, 6vw, 4.5rem); } .marquee-block--huge{ font-size:clamp(3rem, 10vw, 8rem); letter-spacing:-.02em; } .marquee-block[data-speed="slow"]{ --mq-duree: 60s; } .marquee-block[data-speed="fast"]{ --mq-duree: 20s; } .marquee-block[data-direction="right"]{ --mq-sens: reverse; } .marquee-block__track{ display:flex; width:max-content; animation:mq-defile var(--mq-duree) linear infinite; animation-direction:var(--mq-sens); } .marquee-block:hover .marquee-block__track, .marquee-block[data-tw-pause="on"] .marquee-block__track{ animation-play-state:paused; } .marquee-block__group{ display:flex; align-items:center; flex-shrink:0; } .marquee-block__item{ white-space:nowrap; padding-inline:.45em; } .marquee-block__sep{ padding-inline:.35em; color:var(--tw-accent, currentColor); font-size:.6em; } .marquee-block{ --mq-trait: var(--tw-text, #111); } /* ⚠️ LA PISTE NE DOIT PAS DONNER SA LARGEUR AU BLOC. Sans `contain: inline-size`, la largeur min-content du bloc est celle de sa piste (6 500 px mesurés) : dans l'éditeur, elle remontait jusqu'à la colonne du canevas, qui passait SOUS le panneau de droite (Yann, 2026-09-26). `overflow: hidden` ne suffit pas : il coupe l'affichage, pas la contribution à la largeur des parents. */ .marquee-block{ contain: inline-size; min-width: 0; max-width: 100%; } /* ⚠️ PAS `currentColor` : sur un texte transparent, currentColor EST transparent, et le contour disparaissait avec le remplissage (bandeau vide, 2026-09-26). */ .marquee-block--outline .marquee-block__item{ color:transparent; -webkit-text-stroke:1.5px var(--mq-trait); } @supports not (-webkit-text-stroke: 1px currentColor){ .marquee-block--outline .marquee-block__item{ color:inherit; } } @keyframes mq-defile{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } html[data-animations="off"] .marquee-block__track{ animation:none; } @media (prefers-reduced-motion: reduce){ .marquee-block{ -webkit-mask-image:none; mask-image:none; } .marquee-block__track{ animation:none; width:auto; justify-content:center; } .marquee-block__group{ flex-wrap:wrap; justify-content:center; flex-shrink:1; } .marquee-block__group[aria-hidden="true"]{ display:none; } .marquee-block__item{ white-space:normal; text-align:center; } } html[data-animations="off"] .marquee-block{ -webkit-mask-image:none; mask-image:none; } html[data-animations="off"] .marquee-block__track{ width:auto; justify-content:center; } html[data-animations="off"] .marquee-block__group{ flex-wrap:wrap; justify-content:center; flex-shrink:1; } html[data-animations="off"] .marquee-block__group[aria-hidden="true"]{ display:none; } /* pricelist-block — liste de prix / tarifs : entrées catégorie + items (nom … filet … prix). Layout-only : la typo/couleur vient des briques .tw-h4 (catégorie) / .tw-body (nom) / .tw-numeral (prix) / .tw-meta (description) ; les pointillés du filet réutilisent le token --tw-rule (défini par le DNA). DNA-BLOCKS-SPEC §3. */ .pricelist-block{ display:flex; flex-direction:column; gap:.5rem; } .pricelist-block__category{ margin-top:1.25rem; } .pricelist-block__entry:first-child.pricelist-block__category{ margin-top:0; } .pricelist-block__item{ display:flex; flex-direction:column; gap:.15rem; } .pricelist-block__line{ display:flex; align-items:baseline; gap:.6rem; } .pricelist-block__name{ flex:0 1 auto; } .pricelist-block__leader{ flex:1 1 auto; min-width:1.5rem; align-self:center; border-bottom:1px dotted var(--tw-rule, currentColor); opacity:.7; } .pricelist-block__price{ flex:0 0 auto; white-space:nowrap; } /* list-block — liste verticale d'entrées (annuaire / index / programme / line-up / registre). Layout-only : la typo/couleur vient des briques .tw-h4 (titre) / .tw-meta (meta, trailing, plain lead) / .tw-numeral (numéro, jour de date) / .tw-eyebrow (statut) + .tw-button (cta) ; le filet entre lignes réutilise le token --tw-rule (défini par le DNA). leadStyle pilote la colonne de gauche ; showRule => --ruled. DNA-BLOCKS-SPEC §3. */ .list-block{ display:flex; flex-direction:column; } .list-block__row{ display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; } .list-block__row:first-child{ padding-top:0; } .list-block--ruled .list-block__row + .list-block__row{ border-top:1px solid var(--tw-rule, rgba(0,0,0,.08)); } .list-block__lead{ flex:0 0 auto; min-width:2.25rem; } .list-block--lead-number .list-block__lead{ text-align:end; } .list-block__lead-num{ font-size:1.35em; line-height:1; color:var(--tw-text-muted, inherit); font-variant-numeric:tabular-nums; } /* couleur atténuée, plus d'opacité : 3:1 à 55 % (axe, démo 2026-09-28) */ .list-block__lead-date{ display:flex; flex-direction:column; align-items:center; line-height:1; } .list-block__lead-day{ font-size:1.3em; font-variant-numeric:tabular-nums; } .list-block__lead-month{ font-size:.7em; text-transform:uppercase; letter-spacing:.08em; color:var(--tw-text-muted, inherit); } .list-block__lead-plain{ white-space:nowrap; } .list-block__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.15rem; } .list-block__head{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; } .list-block__title{ margin:0; } .list-block__title-link{ display:inline-flex; align-items:baseline; gap:.3em; } .list-block__arrow{ transition:transform .15s ease; } .list-block__title-link:hover .list-block__arrow{ transform:translateX(.2em); } .list-block__status{ flex:0 0 auto; padding:.1em .55em; border:1px solid var(--tw-rule, currentColor); border-radius:999px; line-height:1.5; } .list-block__meta{ display:block; } .list-block__trailing{ flex:0 0 auto; margin-inline-start:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:end; white-space:nowrap; } @media (max-width:560px){ .list-block__row{ flex-wrap:wrap; } .list-block__trailing{ margin-inline-start:0; flex-basis:100%; flex-direction:row; align-items:baseline; justify-content:flex-start; text-align:start; } .list-block--lead-number .list-block__lead, .list-block--lead-plain .list-block__lead{ min-width:1.75rem; } } /* cards-block — grille de cartes riches (image + titre + texte + meta + prix + bouton). Colonnes via .tw-grid + data-cols-* en markup. La carte est un conteneur TOKEN-DRIVEN (PAS la brique .tw-surface dont le padding casserait l'image plein cadre — même choix que les product/blog cards) : surface/bordure/rayon/ombre via les tokens --tw-* du DNA. L'aspect de l'image est géré par .tw-media[data-aspect]. DNA-BLOCKS-SPEC §3. */ /* dense packing : une carte large (--span2) laisse un trou d'une colonne sur sa rangée ; grid-auto-flow:dense fait remonter une carte suivante pour le combler (no-op quand toutes les cartes font 1 colonne → rendu identique sans span2). */ .cards-block{ grid-auto-flow: dense; } .cards-block__card{ position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--tw-surface, #fff); border:var(--tw-border-width,1px) solid var(--tw-border, rgba(0,0,0,.08)); border-radius:var(--tw-radius-card, 12px); box-shadow:var(--tw-shadow-card, none); } /* Carte cliquable EN ENTIER (lien sans libellé de bouton — arbitrage Fable 2026-09-18) : le lien étiré de la carte d'article. Le `::after` du lien couvre la carte ; le survol reprend les jetons de `.tw-surface--hover-lift`, donc chaque DNA décide de l'élévation (0 pour les styles plats). Le focus se voit sur la CARTE, pas sur le seul titre. */ .cards-block__link{ color:inherit; text-decoration:none; } .cards-block__link::after{ content:''; position:absolute; inset:0; z-index:0; } .cards-block__card[data-linked]{ cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; } .cards-block__card[data-linked]:hover{ transform:translateY(var(--tw-hover-lift, 0)); box-shadow:var(--tw-shadow-card-hover, var(--tw-shadow-card, none)); } .cards-block__card:has(.cards-block__link:focus-visible){ outline:2px solid var(--tw-accent, currentColor); outline-offset:2px; } .cards-block__card:has(.cards-block__link:focus-visible) .cards-block__link:focus-visible{ outline:none; } @media (prefers-reduced-motion: reduce){ .cards-block__card[data-linked]{ transition:none; } .cards-block__card[data-linked]:hover{ transform:none; } } .cards-block__media{ width:100%; } .cards-block__body{ display:flex; flex-direction:column; gap:.35rem; padding:1.05rem 1.15rem 1.25rem; } .cards-block__text{ margin-top:.1rem; } .cards-block__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-top:.35rem; } .cards-block__button{ margin-top:.7rem; align-self:flex-start; } /* HELO 74942 — « Alignement du texte : Centré » (réglage du bloc). Gauche n'ajoute aucune classe : les grilles existantes ne bougent pas. Le pied (méta + prix) se resserre au centre au lieu de s'écarter aux deux bords. */ .cards-block--align-center .cards-block__body{ text-align:center; } .cards-block--align-center .cards-block__foot{ justify-content:center; flex-wrap:wrap; } .cards-block--align-center .cards-block__button{ align-self:center; } /* cards-block — éditorial/masonry : colSpan (carte large 2 colonnes), aspect image par carte, et badge d'angle. Tout optionnel : sans ces classes, rendu identique. --span2 n'est honoré que si la grille déclare ≥2 colonnes au breakpoint (clamp : jamais plus large que la grille ; sur mobile tout est 1-col → span ignoré). */ @media (min-width:1024px){ .tw-grid[data-cols-desktop="2"] > .cards-block__card--span2, .tw-grid[data-cols-desktop="3"] > .cards-block__card--span2, .tw-grid[data-cols-desktop="4"] > .cards-block__card--span2, .tw-grid[data-cols-desktop="5"] > .cards-block__card--span2, .tw-grid[data-cols-desktop="6"] > .cards-block__card--span2{ grid-column: span 2; } } @media (min-width:640px) and (max-width:1023px){ .tw-grid[data-cols-tablet="2"] > .cards-block__card--span2, .tw-grid[data-cols-tablet="3"] > .cards-block__card--span2, .tw-grid[data-cols-tablet="4"] > .cards-block__card--span2{ grid-column: span 2; } } /* aspect par carte — override du data-aspect du bloc (double classe pour gagner en spécificité face à .tw-media[data-aspect]) ; width/height/object-fit:cover hérités de la règle de base .tw-media > img (le remplissage en PUBLIÉ est ré-asserté une seule fois pour TOUT .tw-media dans astro-preview.css, plus de hack par-carte ici). */ .cards-block__media.cards-block__media--portrait{ aspect-ratio: 3/4; } .cards-block__media.cards-block__media--landscape{ aspect-ratio: 16/10; } .cards-block__media.cards-block__media--square{ aspect-ratio: 1/1; } /* badge d'angle — la brique .tw-badge (BRIQUE 6) porte le look (fond/texte/rayon via les tokens DNA) ; cette règle ne fait que le positionner dans le coin de la carte (même principe que .pricing-block__badge qui ne fait que positionner sa brique). */ .cards-block__badge{ position:absolute; top:.6rem; inset-inline-end:.6rem; z-index:1; pointer-events:none; } /* pricing-block — cartes de plans (colonnes via .tw-grid en markup) */ .pricing-block{ align-items: stretch; } .pricing-block__plan{ display:flex; flex-direction:column; gap:1rem; align-self:stretch; } /* pas de height:100% : cf. features-block */ .pricing-block__price{ display:flex; align-items:baseline; gap:.3rem; flex-wrap: wrap; } /* Le MONTANT ne se coupe jamais (« 59 » d'un côté, « € » de l'autre) : c'est la période qui passe dessous quand la carte est étroite — quatre éditions de front, mesuré sur lauyan.com le 25/09 (#317). */ .pricing-block__price .tw-numeral{ white-space: nowrap; } .pricing-block__price .tw-numeral{ font-size: clamp(2.2rem, 4vw, 3rem); line-height:1; } /* Prix barré (plan.compareAtPrice) — la convention Stripe / Shopify : le prix normal, plus petit, en atténué (.tw-meta = --tw-text-muted, que chaque DNA tient à 4,5:1), barré d'un trait fin qui ne coupe pas la lecture des chiffres. Il ne se coupe pas plus que le montant. */ .pricing-block__compare{ font-size: 1.05rem; white-space: nowrap; text-decoration: line-through; text-decoration-thickness: .08em; text-decoration-color: currentColor; margin-inline-start: .15rem; font-variant-numeric: tabular-nums; } /* « au lieu de » : lu par les lecteurs d'écran (qui n'annoncent pas ), pas vu. Le site n'a pas d'utilitaire .sr-only global : la règle est portée ici, comme pour .tw-rotation. */ .pricing-block__compare > .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Note sous le prix (plan.priceNote) : une ligne courte collée au prix — le `gap` de la carte l'en éloignerait autant que du nom. */ .pricing-block__price-note{ margin: -.6rem 0 0; line-height: 1.4; } /* La LISTE d'un plan se lit plus petit que le corps, et serrée — la convention des pages de prix (Stripe, Linear, Shopify : ≈ 0,9375 du corps, interligne ~1,45). Au corps entier (.tw-body), la carte Studio de lauyan.com débordait d'un écran de MacBook 13" et ses boutons passaient sous la ligne de flottaison (Yann, 18/10). La taille est posée sur le POINT et héritée par son texte : l'icône (en em) se cale ainsi sur la même ligne. Plancher à 14 px (lisibilité mobile). */ .pricing-block__features{ list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:.4rem; } .pricing-block__feature{ display:flex; align-items:flex-start; gap:.5rem; font-size: max(.875rem, calc(var(--tw-size-base, 1.0625rem) * .9375)); line-height: calc(1.45 * var(--tw-leading-scale, 1)); } .pricing-block__feature-text.tw-body{ font-size: inherit; line-height: inherit; } /* La phrase « pour qui » du plan à la même taille que la liste : au corps entier, elle prenait 4 lignes dans une carte de 297 px (lauyan.com, MacBook 13"). */ .pricing-block__description.tw-body{ font-size: max(.875rem, calc(var(--tw-size-base, 1.0625rem) * .9375)); line-height: calc(1.45 * var(--tw-leading-scale, 1)); } /* Lien contextuel d'un point (`features[].link`) : sans `linkLabel`, le texte du point est le lien (souligné fin, comme un lien du texte courant) ; avec, un petit lien discret APRÈS le texte — « … · Voir en démo → » —, souligné au survol. Couleur : le lien du texte (`--tw-prose-link`, accent au contraste tenu, re-pointé par la bande `bold`). `inline-block` sur le séparateur et le libellé : le trait d'un point NON compris ne les barre pas. */ .pricing-block__feature-link{ color: var(--tw-prose-link, var(--tw-accent, currentColor)); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); transition: color .15s ease, text-decoration-color .15s ease; } .pricing-block__feature-link:hover{ text-decoration-color: currentColor; } .pricing-block__feature-sep{ display: inline-block; margin-inline: .4em; color: var(--tw-text-muted, currentColor); } .pricing-block__feature-link--after{ display: inline-block; font-weight: 500; white-space: nowrap; text-decoration-line: none; } /* La flèche est décorative (texte de remplacement vide) ; un navigateur qui ne lit pas `/ ""` garde la première déclaration. Sens de lecture inversé : ←. */ .pricing-block__feature-link--after::after{ content: "\2192"; content: "\2192" / ""; display: inline-block; margin-inline-start: .3em; transition: transform .2s ease; } .pricing-block__feature-link--after:dir(rtl)::after{ content: "\2190"; content: "\2190" / ""; } .pricing-block__feature-link--after:hover{ text-decoration-line: underline; } .pricing-block__feature-link--after:hover::after{ transform: translateX(2px); } .pricing-block__feature-link--after:dir(rtl):hover::after{ transform: translateX(-2px); } .pricing-block__feature-link:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* Avantage NON compris : barré, en atténué — plus une opacité de 50 % qui le rendait illisible (3:1, axe-core, audit du 2026-09-28) ; seule l'icône s'efface. */ .pricing-block__feature--excluded .pricing-block__feature-text{ color: var(--tw-text-muted, inherit); } .pricing-block__feature--excluded .pricing-block__feature-icon{ opacity:.5; } .pricing-block__cta{ margin-top:auto; } /* Bouton SOUS le prix (`ctaPosition: 'top'`) — la convention des pages de prix SaaS (Linear, Vercel, Notion, Framer) : l'appel reste à l'écran même quand la liste est longue. Le DOM regroupe nom, prix, note et description dans `.pricing-block__head` ; la carte devient une sous-grille de TROIS rangées (en-tête, bouton, liste) qui partage les rangées de la grille du bloc : l'en-tête prend la hauteur du plus haut de la rangée de cartes, et les boutons de toutes les cartes tombent sur la même ligne, quelle que soit la longueur des descriptions. Sans subgrid (navigateurs anciens), la carte reste une colonne flex : bouton sous la description, simplement pas aligné d'une carte à l'autre. */ .pricing-block--cta-top .pricing-block__head{ display:flex; flex-direction:column; gap:1rem; } .pricing-block--cta-top .pricing-block__cta{ margin-top:0; } @supports (grid-template-rows: subgrid){ .pricing-block--cta-top > .pricing-block__plan{ display:grid; grid-row: span 3; grid-template-rows: subgrid; row-gap:1rem; align-content:start; } } /* pricing-block — additions DOM brique (DNA-BLOCKS-SPEC §3.6) */ .pricing-block__plan{ position: relative; } .pricing-block__badge{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; } /* Sur une bande FORTE, l'étiquette « Populaire » prend l'encre de SA carte en fond et la surface de la carte en texte : les couleurs d'étiquette de la bande y tombaient à 1,7-3,7:1 chez ATELIER, BOTANIQUE, CROQUIS, NORDIQUE, NOUVEAU (axe-core, 2026-09-28). Le fond est l'encre de la carte (toujours opaque) et le texte, blanc ou noir selon ce fond (`--tw-sur-fond`) : pas la surface de la carte, translucide chez AQUA, AURORE ou LIQUID. C'est la pastille « Most popular » de Stripe ou Linear. */ [data-palette="bold"] .pricing-block__badge.tw-badge{ background: var(--tw-on-surface, var(--tw-text, #111)); color: oklab(from var(--tw-on-surface, var(--tw-text, #111)) var(--tw-sur-fond) 0 0 / 1); border-color: transparent; } /* Icône centrée sur la PREMIÈRE ligne : (interligne 1,45em − icône 1,1em) / 2. */ .pricing-block__feature .tw-icon{ --tw-icon-size: 1.1em; flex: none; margin-top: .175em; } .pricing-block__feature--excluded .pricing-block__feature-text{ text-decoration: line-through; } .pricing-block__feature--excluded .tw-icon{ --tw-icon-color: var(--tw-text-muted, currentColor); } .pricing-block--comparison .pricing-block__features{ border-top: var(--tw-border-width,1px) solid var(--tw-rule); padding-top: 1rem; margin-top: .4rem; } /* testimonial-block — preuve sociale (colonnes via .tw-grid ; conteneur `testimonial-block testimonial-block--{variant} tw-grid`). DNA-BLOCKS-SPEC §3.5. item = .tw-surface (card pour `cards`, bare sinon ; carte non cliquable → --tw-hover-lift:0 inline sur l'item). */ .testimonial-block .tw-surface{ display:flex; flex-direction:column; gap:1rem; align-self:stretch; } /* pas de height:100% : cf. features-block */ .testimonial-block__rating{ margin-bottom:.25rem; } .testimonial-block__quote{ flex:1; margin:0; } .testimonial-block__author-info{ display:flex; align-items:center; gap:.8rem; margin-top:auto; } .testimonial-block__author-details{ display:flex; flex-direction:column; gap:.1rem; } .testimonial-block__photo.tw-media--avatar{ width:3rem; height:3rem; flex:none; } .testimonial-block__photo.tw-media--avatar img{ width:100%; height:100%; object-fit:cover; } .testimonial-block__photo--initials{ display:flex; align-items:center; justify-content:center; font-weight:600; background:var(--tw-accent-soft, rgba(128,128,128,.12)); color:var(--tw-on-surface, inherit); } .testimonial-block--no-rating .testimonial-block__rating{ display:none; } .testimonial-block--no-photos .testimonial-block__photo{ display:none; } .testimonial-block--centered{ text-align:center; } .testimonial-block--centered .tw-surface{ align-items:center; } .testimonial-block--centered .testimonial-block__rating, .testimonial-block--centered .testimonial-block__author-info{ justify-content:center; } .testimonial-block--centered .testimonial-block__author-info{ flex-direction:column; align-items:center; } .testimonial-block--minimal{ grid-template-columns: 1fr; } .testimonial-block--minimal .tw-surface + .tw-surface{ border-top:var(--tw-border-width,1px) solid var(--tw-rule); padding-top:var(--tw-gap, 1.5rem); } /* logo-cloud-block — bande de logos (DNA-BLOCKS-SPEC §3.8). DNA-agnostique : layout + briques. image = brique .tw-media tw-media--logo ; filtre grayscale via le token --tw-media-filter. */ .logo-cloud-block{ display:block; width:100%; } .logo-cloud-block__grid{ display:grid; grid-template-columns: repeat(var(--logo-cols-desktop, 5), 1fr); align-items:center; gap: var(--tw-gap, 1.5rem); } @media (max-width:1024px){ .logo-cloud-block__grid{ grid-template-columns: repeat(var(--logo-cols-tablet, 4), 1fr); } } @media (max-width:640px){ .logo-cloud-block__grid{ grid-template-columns: repeat(var(--logo-cols-mobile, 3), 1fr); } } .logo-cloud-block--align-left .logo-cloud-block__grid{ justify-items:start; } .logo-cloud-block--align-center .logo-cloud-block__grid, .logo-cloud-block--align-right .logo-cloud-block__grid{ display:flex; flex-wrap:wrap; } .logo-cloud-block--align-center .logo-cloud-block__grid{ justify-content:center; } .logo-cloud-block--align-right .logo-cloud-block__grid{ justify-content:flex-end; } .logo-cloud-block--align-center .logo-cloud-block__item, .logo-cloud-block--align-right .logo-cloud-block__item{ flex: 0 0 calc((100% - (var(--logo-cols-desktop, 5) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-desktop, 5)); max-width: calc((100% - (var(--logo-cols-desktop, 5) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-desktop, 5)); } @media (max-width:1024px){ .logo-cloud-block--align-center .logo-cloud-block__item, .logo-cloud-block--align-right .logo-cloud-block__item{ flex: 0 0 calc((100% - (var(--logo-cols-tablet, 4) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-tablet, 4)); max-width: calc((100% - (var(--logo-cols-tablet, 4) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-tablet, 4)); } } @media (max-width:640px){ .logo-cloud-block--align-center .logo-cloud-block__item, .logo-cloud-block--align-right .logo-cloud-block__item{ flex: 0 0 calc((100% - (var(--logo-cols-mobile, 3) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-mobile, 3)); max-width: calc((100% - (var(--logo-cols-mobile, 3) - 1) * var(--tw-gap, 1.5rem)) / var(--logo-cols-mobile, 3)); } } .logo-cloud-block__item{ display:flex; align-items:center; justify-content:center; } .logo-cloud-block__image{ max-width:100%; width:auto; height:auto; min-height:20px; object-fit:contain; display:block; } /* N&B : filtre piloté par un token C (le DNA calcule la nuance selon la bande) — sur le flood bold, dna-c re-pointe --tw-logo-mono-filter en silhouette claire (sinon gris-sur-terracotta se fond). Défaut = grayscale(1) (logos gris foncé sur fond clair). */ .logo-cloud-block--grayscale .logo-cloud-block__image{ --tw-media-filter: var(--tw-logo-mono-filter, grayscale(1)); opacity:.75; } .logo-cloud-block--grayscale-hover .logo-cloud-block__image{ --tw-media-filter: var(--tw-logo-mono-filter, grayscale(1)); opacity:.75; transition: filter .3s ease, opacity .3s ease; } .logo-cloud-block--grayscale-hover .logo-cloud-block__item:hover .logo-cloud-block__image{ --tw-media-filter: none; opacity:1; } .logo-cloud-block--color .logo-cloud-block__image{ --tw-media-filter: none; opacity:1; } /* #497 — un logo sans image s'écrit par son nom, en police de titre, comme une marque : atténué comme les logos N&B, plein au survol. */ .logo-cloud-block__name{ font-family:var(--tw-font-heading, inherit); font-weight:var(--tw-weight-heading, 700); font-size:clamp(1rem, 1.8vw, 1.3rem); line-height:1.15; letter-spacing:-.01em; text-align:center; color:var(--tw-text-heading, inherit); overflow-wrap:anywhere; } .logo-cloud-block--grayscale .logo-cloud-block__name, .logo-cloud-block--grayscale-hover .logo-cloud-block__name{ opacity:.7; transition: opacity .3s ease; } .logo-cloud-block--grayscale-hover .logo-cloud-block__item:hover .logo-cloud-block__name{ opacity:1; } /* ============================================================================ social-block — DNA-BLOCKS-SPEC §3.8 (brique .tw-icon, gap=--tw-gap). Toutes les valeurs CSS utilisent UNIQUEMENT des tokens --tw-*. Les couleurs de la colorStyle "brand" sont injectées via --tw-icon-color inline. ============================================================================ */ .social-block{ display:block; width:100%; } .social-block__links{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--tw-gap,1rem); } /* Alignment — applied to the flex links container */ .social-block--align-left .social-block__links{ justify-content:flex-start; } .social-block--align-center .social-block__links{ justify-content:center; } .social-block--align-right .social-block__links{ justify-content:flex-end; } /* Icon size — sets --tw-icon-size so .tw-icon reads it (no inline px) */ .social-block--size-small .tw-icon{ --tw-icon-size: 2rem; } /* 32px */ .social-block--size-medium .tw-icon{ --tw-icon-size: 2.5rem; } /* 40px */ .social-block--size-large .tw-icon{ --tw-icon-size: 3.25rem; }/* 52px */ /* Color styles — override --tw-icon-color; brand is set inline via style attr */ /* color-inherit = la couleur d'icône de la PALETTE (--tw-icon-color, token C re-pointé par [data-palette] → cream sur bold). PAS de var(--tw-accent) (G, jamais re-pointé → terracotta sur le flood terracotta = invisible). La brique .tw-icon consomme déjà --tw-icon-color → on ne l'override pas (contrat §6 « Règle dérivée »). */ .social-block--color-monochrome .tw-icon{ --tw-icon-color: var(--tw-text-muted, currentColor); opacity:.6; } .social-block--color-white .tw-icon{ --tw-icon-color: #ffffff; } .social-block--color-black .tw-icon{ --tw-icon-color: #000000; } /* Link interaction */ .social-block__link{ text-decoration:none; transition:opacity .2s, transform .2s; } .social-block__link:hover{ opacity:.8; transform:scale(1.1); } /* faq-block — accordéon natif
/ + variantes list/cards. DNA-BRICKS (2026-06-08): question=.tw-h4, answer=.tw-body, indicateur=.tw-icon[data-glyph], dividers=
(non-accordion) ou border-top (accordion). Cards variant root=.tw-grid. --tw-* ONLY. */ .faq-block{ display:flex; flex-direction:column; } /* cards variant uses .tw-grid co-applied on root; .tw-grid already sets display:grid */ /* item */ .faq-block__item{ padding-block: var(--tw-faq-item-py, 1rem); } /* accordion dividers: border-top between consecutive items */ .faq-block--accordion.faq-block--dividers .faq-block__item + .faq-block__item{ border-top: var(--tw-border-width,1px) solid var(--tw-rule, rgba(0,0,0,.12)); } /* non-accordion dividers:
in the DOM */ .faq-block:not(.faq-block--accordion) hr.tw-rule{ display:block; height:0; border:0; border-top: var(--tw-border-width,1px) solid var(--tw-rule, rgba(0,0,0,.12)); margin:0; padding:0; } /* cards: item as .tw-surface (card) handled by .tw-surface rules */ /* question row (.tw-h4 brick + .tw-icon indicator) */ .faq-block__question{ display:flex; justify-content:space-between; align-items:center; gap: var(--tw-faq-q-gap,.75rem); cursor:pointer; list-style:none; user-select:none; } .faq-block__question::-webkit-details-marker{ display:none; } /* indicator: .tw-icon[data-glyph] brick painted in currentColor (accent) */ .faq-block__indicator{ flex:none; transition: transform var(--tw-faq-speed,.2s) ease; } .faq-block--icon-chevron details.faq-block__item[open] .faq-block__indicator{ transform:rotate(90deg); } .faq-block--icon-plus details.faq-block__item[open] .faq-block__indicator{ transform:rotate(45deg); } /* answer */ .faq-block__answer{ padding-top: var(--tw-faq-answer-pt,.6rem); max-width:70ch; } /* .tw-body class on inner div handles font/color/line-height */ /* CSS-grid expand animation for
open/close (no JS, no height:auto flash). The inner .tw-body div is the overflow guard (min-height:0 = 0fr collapses it). */ .faq-block--accordion .faq-block__answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--tw-faq-speed,.3s) ease; } .faq-block--accordion details.faq-block__item[open] .faq-block__answer{ grid-template-rows:1fr; } .faq-block--accordion .faq-block__answer > *{ overflow:hidden; min-height:0; } /* article-block — corps long-form, option MULTI-COLONNES (presse/letterpress). column-rule + justify/hyphens token-driven, DNA-agnostique. */ .article-block{ max-width: 70ch; margin-inline: auto; } .article-block--multicol{ max-width: 960px; column-count: var(--tw-article-cols, 2); column-gap: var(--tw-gap, 2.5rem); column-rule: 1px solid var(--tw-rule); } .article-block--multicol > *{ break-inside: avoid; } .article-block--justify .tw-body{ text-align: justify; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 760px){ .article-block--multicol{ column-count: 1; } } .article-block--justify :is(p, li){ text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .article-block--dropcap > :first-child::first-letter{ font-family: var(--tw-dropcap-font, var(--tw-font-heading, serif)); font-size: var(--tw-dropcap-size, 3.2em); line-height:.8; float:left; margin:.05em .12em 0 0; color: var(--tw-dropcap-color, var(--tw-accent, inherit)); } /* pricelist-block — liste tarifaire tabulaire à POINTS DE CONDUITE (specimen ancien). Différent de pricing-block (cartes). nom … prix, via un trait pointillé extensible. */ .pricelist-block{ display:flex; flex-direction:column; gap:.8rem; } .pricelist-block__row{ display:grid; grid-template-columns: auto 1fr auto; align-items:baseline; gap:.4rem; border-bottom: var(--tw-border-width,1px) solid var(--tw-rule); padding-bottom:.5rem; } .pricelist-block__dots{ border-bottom: 1px dotted var(--tw-text-muted, currentColor); height: 1.05em; min-width: 24px; align-self: end; margin: 0 .4em .35em; } .pricelist-block__price{ white-space: nowrap; font-variant-numeric: tabular-nums; } /* index-list — liste d'archive/index tabulaire (meta │ titre │ flèche), filets pleins entre lignes (Swiss/éditorial). Différent de pricelist (points de conduite). */ .index-list{ display:flex; flex-direction:column; } .index-list__row{ display:grid; grid-template-columns: auto 1fr auto; align-items:baseline; gap: clamp(1rem,3vw,2rem); padding-block: 1.1rem; border-top: var(--tw-border-width,1px) solid var(--tw-rule); } .index-list__row:last-child{ border-bottom: var(--tw-border-width,1px) solid var(--tw-rule); } .index-list__meta{ font-variant-numeric: tabular-nums; color: var(--tw-text-muted, inherit); white-space: nowrap; } /* numbered-list — étapes/process à GRAND chiffre tabulaire (01. 02. …) + texte. */ .numbered-list{ display:flex; flex-direction:column; gap: var(--tw-gap, 2rem); } .numbered-list__item{ display:grid; grid-template-columns: auto 1fr; gap: clamp(1rem,2.5vw,2rem); align-items:baseline; } .numbered-list__num{ font-variant-numeric: tabular-nums; font-family: var(--tw-font-heading, inherit); font-weight: var(--tw-weight-heading, 700); font-size: clamp(2rem,4vw,3rem); line-height: 1; } /* ============================================================================ BLOCK — TIMELINE DNA-BLOCKS-SPEC §3.7. Trois variantes de rail (vertical/alternating/horizontal). RÈGLE D'OR : couleurs via --tw-* uniquement. PAS de var(--theme-*). Connecteur = §8 escape-hatch (geometry pur ; couleur = --tw-rule/--tw-rule-strong). Marker = .tw-icon brick (well pour dot, mask pour SVG icône). ============================================================================ */ /* Base ─────────────────────────────────────────────────────────────────────── */ .timeline-block { position: relative; width: 100%; } /* ── VERTICAL (default) : rail gauche ─────────────────────────────────────── */ .timeline-block--vertical { display: flex; flex-direction: column; gap: var(--tw-gap, 1.5rem); } .timeline-block--vertical .timeline-block__item { display: flex; align-items: flex-start; gap: 1rem; position: relative; /* room for marker (2.5rem) + gap (1rem) = 3.5rem */ padding-inline-start: 3.5rem; } /* Marker sits at absolute left, centered on connector line */ .timeline-block--vertical .timeline-block__marker { position: absolute; inset-inline-start: 0; top: 0; } /* Connector: vertical line between markers. Color = --tw-rule (§8 sanctioned escape-hatch: geometry is plain, color is token). */ .timeline-block--vertical.timeline-block--with-connector::before { content: ''; position: absolute; /* center line through 2.5rem-wide marker */ inset-inline-start: calc(1.25rem - 1px); top: 1.25rem; bottom: 1.25rem; width: 2px; background: var(--tw-rule-strong, var(--tw-rule, rgba(0,0,0,.18))); } /* ── ALTERNATING : rail centre, zig-zag ──────────────────────────────────── */ .timeline-block--alternating { display: flex; flex-direction: column; position: relative; gap: var(--tw-gap, 1.5rem); } .timeline-block--alternating .timeline-block__item { display: flex; align-items: flex-start; gap: 1rem; position: relative; width: calc(50% - 1.25rem); } /* Odd: left side, right-aligned text */ .timeline-block--alternating .timeline-block__item:nth-child(odd) { align-self: flex-start; text-align: end; flex-direction: row-reverse; padding-inline-end: 2rem; } /* Even: right side, left-aligned text */ .timeline-block--alternating .timeline-block__item:nth-child(even) { align-self: flex-end; padding-inline-start: 2rem; } .timeline-block--alternating .timeline-block__item:nth-child(odd) .timeline-block__marker { position: absolute; inset-inline-end: calc(-1.25rem - 1.25rem); } .timeline-block--alternating .timeline-block__item:nth-child(even) .timeline-block__marker { position: absolute; inset-inline-start: calc(-1.25rem - 1.25rem); } /* Connector: centered vertical line */ .timeline-block--alternating.timeline-block--with-connector::before { content: ''; position: absolute; left: 50%; top: 1.25rem; bottom: 1.25rem; width: 2px; background: var(--tw-rule-strong, var(--tw-rule, rgba(0,0,0,.18))); transform: translateX(-50%); } /* Mobile: collapse alternating → single left-rail column */ @media (max-width: 767px) { .timeline-block--alternating .timeline-block__item { width: 100%; padding-inline-start: 3.5rem; padding-inline-end: 0; text-align: start; flex-direction: row; } /* ⚠️ Impair ET pair, comme sur bureau : sinon la règle du bureau (0,3,0) gardait le texte aligné à droite (impair) et l'ancien retrait de 2rem (pair) — la date recouvrait l'icône sur un téléphone (audit des 48 DNA, 2026-09-28). */ .timeline-block--alternating .timeline-block__item:nth-child(odd), .timeline-block--alternating .timeline-block__item:nth-child(even) { align-self: flex-start; flex-direction: row; text-align: start; padding-inline-start: 3.5rem; padding-inline-end: 0; } .timeline-block--alternating .timeline-block__item:nth-child(odd) .timeline-block__marker, .timeline-block--alternating .timeline-block__item:nth-child(even) .timeline-block__marker { position: absolute; inset-inline-start: 0; inset-inline-end: auto; } .timeline-block--alternating.timeline-block--with-connector::before { inset-inline-start: calc(1.25rem - 1px); transform: none; } } /* ── HORIZONTAL : rail haut, scroll ─────────────────────────────────────── */ .timeline-block--horizontal { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--tw-gap, 1.5rem); } .timeline-block--horizontal .timeline-block__item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 1 200px; min-width: 150px; max-width: 250px; position: relative; } /* Horizontal connector disabled (doesn't work with flex-wrap) */ .timeline-block--horizontal.timeline-block--with-connector::before { display: none; } .timeline-block--horizontal .timeline-block__marker { margin-bottom: 0.75rem; } .timeline-block--horizontal .timeline-block__content { width: 100%; } /* ── MARKER sizing (overrides .tw-icon default em-based sizing) ─────────── */ /* Marker = pastille de FOND (couleur de la bande) qui MASQUE le connecteur qui passerait derrière (sinon le trait traverse l'icône) + icône/point centré. z-index au-dessus du connecteur. L'icône est l'enfant masqué (.tw-icon), pas le marker lui-même → le marker peut porter un fond opaque. */ .timeline-block__marker { width: 2.5rem; height: 2.5rem; flex-shrink: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--tw-bg, var(--tw-page-bg, #fafafa)); border-radius: 50%; } /* Point (pas d'icône) : petit disque accent. */ .timeline-block__marker-dot { width: 0.7rem; height: 0.7rem; /* token C (re-pointé par [data-palette]) — PAS --tw-accent (G, jamais re-pointé → accent-sur-flood = invisible sur bold). Contrat §4-O / §6 « Règle dérivée ». */ background: var(--tw-icon-color, var(--tw-accent, currentColor)); border-radius: 50%; } /* Icône SVG : c'est CE span qui porte le mask (.tw-icon[data-icon-svg]). */ .timeline-block__marker-icon { --tw-icon-size: 1.4rem; color: var(--tw-icon-color, var(--tw-accent, currentColor)); } /* ── CONTENT ─────────────────────────────────────────────────────────────── */ .timeline-block__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } /* date (.tw-meta) · title (.tw-h4) · description (.tw-body) — all brick-driven */ /* ============================================================================ team-block — grille d'équipe (DNA-BLOCKS-SPEC §3.5). Colonnes via .tw-grid sur .team-block__grid ; conteneur = team-block--{variant} ; item = article.tw-surface. --tw-* ONLY. Gap = --tw-gap (DNA-owned). ============================================================================ */ /* tw-media--square / --rounded : variantes radius du wrapper photo (circle = tw-media--avatar). */ .tw-media--square { border-radius: 0; } .tw-media--rounded { border-radius: var(--tw-radius-card, 16px); } /* === 4 VARIANTS distincts (cards/minimal/portrait/row), bâtis sur les bricks === */ /* Base : photo avatar 1:1 (cards/minimal/row), membre = colonne centrée. */ .team-block__photo-wrapper.tw-media { width: var(--team-avatar-size, 6.5rem); height: var(--team-avatar-size, 6.5rem); flex: none; } .team-block__photo-wrapper.tw-media img { width: 100%; height: 100%; object-fit: cover; } /* Taille de la photo (#19) : les grands médaillons des cartes de visite V14 (150 à 360 px) devenaient des avatars. Jamais plus large que la colonne. */ .team-block--size-small .team-block__photo-wrapper.tw-media { --team-avatar-size: 4.5rem; } .team-block--size-large .team-block__photo-wrapper.tw-media { --team-avatar-size: 10rem; } .team-block--size-xlarge .team-block__photo-wrapper.tw-media { --team-avatar-size: 14rem; } .team-block:is(.team-block--size-small, .team-block--size-large, .team-block--size-xlarge) .team-block__photo-wrapper.tw-media { width: min(var(--team-avatar-size), 100%); height: auto; aspect-ratio: 1 / 1; } .team-block__photo--initials { display: flex; align-items: center; justify-content: center; font-weight: 600; background: var(--tw-accent-soft, rgba(128,128,128,.12)); color: var(--tw-on-surface, inherit); } .team-block__member { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tw-gap, 1rem); align-self: stretch; } /* pas de height:100% : cf. features-block */ .team-block__info { display: flex; flex-direction: column; gap: .3rem; } .team-block__socials { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; } .team-block__social-link.tw-icon { --tw-icon-size: 1.4rem; } .team-block--no-bio .team-block__bio { display: none; } .team-block--no-socials .team-block__socials { display: none; } /* PORTRAIT : grande photo RECTANGULAIRE 4:5 pleine largeur (image dominante, éditorial). */ .team-block--portrait .team-block__photo-wrapper.tw-media { width: 100%; height: auto; aspect-ratio: 4 / 5; } .team-block--portrait .team-block__member { gap: var(--tw-gap, 1.1rem); } /* ROW : photo à gauche + texte à droite (horizontal, bios longues). */ .team-block--row .team-block__member { flex-direction: row; align-items: center; text-align: left; } .team-block--row .team-block__photo-wrapper.tw-media { --team-avatar-size: 5rem; } .team-block--row .team-block__info { align-items: flex-start; } .team-block--row .team-block__socials { justify-content: flex-start; } /* photoFilter → variante token-driven de .tw-media (filtre posé sur le wrapper). Set partagé avec le picker SidebarPickers (gallery/image). */ .team-block--filter-grayscale .team-block__photo-wrapper { --tw-media-filter: grayscale(1); } .team-block--filter-inkwell .team-block__photo-wrapper { --tw-media-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1); } .team-block--filter-matte .team-block__photo-wrapper { --tw-media-filter: contrast(.85) brightness(1.1) saturate(.7); } .team-block--filter-vivid .team-block__photo-wrapper { --tw-media-filter: contrast(1.15) saturate(1.5) brightness(1.05); } .team-block--filter-reyes .team-block__photo-wrapper { --tw-media-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(.75); } .team-block--filter-willow .team-block__photo-wrapper { --tw-media-filter: grayscale(.5) contrast(.95) brightness(.9); } .team-block--filter-moon .team-block__photo-wrapper { --tw-media-filter: grayscale(1) contrast(1.1) brightness(1.1); } .team-block--filter-lofi .team-block__photo-wrapper { --tw-media-filter: contrast(1.5) saturate(1.1); } .team-block--filter-clarendon .team-block__photo-wrapper { --tw-media-filter: contrast(1.2) saturate(1.35); } .team-block--filter-1977 .team-block__photo-wrapper { --tw-media-filter: contrast(1.1) brightness(1.1) saturate(1.3) sepia(.1); } .team-block--filter-aden .team-block__photo-wrapper { --tw-media-filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2); } .team-block--filter-brannan .team-block__photo-wrapper { --tw-media-filter: sepia(.5) contrast(1.4); } .team-block--filter-brooklyn .team-block__photo-wrapper { --tw-media-filter: contrast(.9) brightness(1.1) sepia(.05); } .team-block--filter-gingham .team-block__photo-wrapper { --tw-media-filter: brightness(1.05) hue-rotate(-10deg) saturate(.9); } .team-block--filter-hudson .team-block__photo-wrapper { --tw-media-filter: brightness(1.2) contrast(.9) saturate(1.1) hue-rotate(5deg); } .team-block--filter-maven .team-block__photo-wrapper { --tw-media-filter: sepia(.25) brightness(.95) contrast(.95) saturate(1.5) hue-rotate(-10deg); } .team-block--filter-nashville .team-block__photo-wrapper { --tw-media-filter: sepia(.25) contrast(1.2) brightness(1.05) saturate(1.2) hue-rotate(-5deg); } .team-block--filter-rise .team-block__photo-wrapper { --tw-media-filter: brightness(1.05) sepia(.2) contrast(.9) saturate(.9); } .team-block--filter-valencia .team-block__photo-wrapper { --tw-media-filter: contrast(1.08) brightness(1.08) sepia(.15) saturate(1.1); } .team-block--filter-walden .team-block__photo-wrapper { --tw-media-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6); } .team-block--filter-duo-cyan .team-block__photo-wrapper { --tw-media-filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(2.5) contrast(1.1); } .team-block--filter-duo-rose .team-block__photo-wrapper { --tw-media-filter: grayscale(1) sepia(1) hue-rotate(310deg) saturate(1.8) brightness(1.05); } .team-block--filter-duo-amber .team-block__photo-wrapper { --tw-media-filter: grayscale(1) sepia(1) hue-rotate(15deg) saturate(2) contrast(1.05); } .team-block--filter-duo-violet .team-block__photo-wrapper { --tw-media-filter: grayscale(1) sepia(1) hue-rotate(230deg) saturate(2) brightness(.95); } /* ============================================================================ columns-block — layout 2 à 4 colonnes (DNA-BLOCKS-SPEC §3.1). PAS de brique : compose les briques de ses enfants. GRILLE : nombre via data-cols="2|3|4" ; le ratio 2-col (50-50/33-66/66-33) via data-layout (seulement à data-cols="2", les 3/4 colonnes sont toujours égales). gap = --tw-gap ; valign top(défaut)/center/ bottom/stretch ; reverseOnMobile. --tw-* ONLY. ============================================================================ */ .columns-block{ display:grid; gap: var(--tw-gap, 1.5rem); grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; } .columns-block[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0,1fr)); } .columns-block[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0,1fr)); } /* 2-col ratios (only meaningful at data-cols="2") */ .columns-block[data-cols="2"][data-layout="33-66"]{ grid-template-columns: 1fr 2fr; } .columns-block[data-cols="2"][data-layout="66-33"]{ grid-template-columns: 2fr 1fr; } .columns-block--valign-center{ align-items:center; } .columns-block--valign-bottom{ align-items:end; } .columns-block--valign-stretch{ align-items:stretch; } .column{ min-width:0; } /* responsive: 4→2 on tablet, everything→1 stacked on mobile */ @media (max-width: 1100px){ .columns-block[data-cols="4"]{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 760px){ .columns-block{ grid-template-columns: 1fr !important; } .columns-block--reverse-mobile{ direction: rtl; } .columns-block--reverse-mobile > .column{ direction: ltr; } } /* ============================================================================ MOUVEMENT PREMIUM (`astro-runtime/src/scripts/motion.ts`) — Yann, 2026-09-26. Chaque règle ne s'applique qu'aux classes que le SCRIPT pose (`tw-defile`, `tw-titre-anime`, `tw-halo`…) : dans l'éditeur, qui ne l'exécute pas, et pour un visiteur qui demande moins de mouvement, le contenu reste à son état final. ============================================================================ */ /* Fonds génératifs : le canvas remplit la couche d'atmosphère. */ .cta-block[data-os-mode="only"]:has(> [data-os="macos"]) > .tw-button[data-os]:not([data-os="macos"]):is(html[data-os="macos"] *), .cta-block[data-os-mode="only"]:has(> [data-os="windows"]) > .tw-button[data-os]:not([data-os="windows"]):is(html[data-os="windows"] *), .cta-block[data-os-mode="only"]:has(> [data-os="linux"]) > .tw-button[data-os]:not([data-os="linux"]):is(html[data-os="linux"] *) { display: none; } /* La ligne « aussi pour… » : seulement les systèmes dont le bouton est caché. */ .cta-block__autres-os { display: none; flex-basis: 100%; margin: .25rem 0 0; gap: .35rem 1.25rem; flex-wrap: wrap; font-size: .9em; } .cta-block--align-center > .cta-block__autres-os { justify-content: center; } .cta-block--align-right > .cta-block__autres-os { justify-content: flex-end; } .cta-block__autres-os > .tw-cta-link { display: none; } html:is([data-os="macos"], [data-os="windows"], [data-os="linux"]) .cta-block[data-os-mode="only"] > .cta-block__autres-os:has(> [data-os]) { display: flex; } html[data-os="macos"] .cta-block__autres-os > [data-os]:not([data-os="macos"]), html[data-os="windows"] .cta-block__autres-os > [data-os]:not([data-os="windows"]), html[data-os="linux"] .cta-block__autres-os > [data-os]:not([data-os="linux"]) { display: inline; } /* Aucun bouton du système du visiteur (Linux sur un groupe Windows/macOS) : tous les boutons restent affichés, la ligne n'a rien à ajouter. */ html[data-os="linux"] .cta-block[data-os-mode="only"]:not(:has(> .tw-button[data-os="linux"])) > .cta-block__autres-os, html[data-os="macos"] .cta-block[data-os-mode="only"]:not(:has(> .tw-button[data-os="macos"])) > .cta-block__autres-os, html[data-os="windows"] .cta-block[data-os-mode="only"]:not(:has(> .tw-button[data-os="windows"])) > .cta-block__autres-os { display: none; } .tw-atm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .content-section[data-atmosphere="mesh"] > .tw-backdrop--section .tw-atm-canvas { filter: blur(24px) saturate(1.15); transform: scale(1.1); } /* Titres : chaque mot sort d'une fente (rise) ou d'un flou (blur). */ .tw-titre-anime .tw-mot { display: inline-block; vertical-align: top; } /* ⚠️ L'AILE DES GLYPHES PASSE PAR UN PADDING, PAS PAR `overflow-clip-margin` SEUL : Safari ne connaît pas cette propriété (2026-09) et tranchait à la boîte du mot le débord droit d'un italique (« chosen », « write to ») et même le « : » de « TOWeb 15 : » (captures de Yann, staging et démo). Le padding élargit la fenêtre sur les quatre côtés ; la marge négative rend la place prise. */ .tw-titre-anime--rise .tw-mot { overflow: clip; overflow-clip-margin: 0.12em; padding: 0 0.14em 0.08em; margin: 0 -0.14em -0.08em; } .tw-titre-anime .tw-mot__dedans { display: inline-block; will-change: transform; } .tw-titre-anime--rise .tw-mot__dedans { transform: translate3d(0, 108%, 0) rotate(4deg); transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--mv-i, 0) * 75ms + 80ms); } .tw-titre-anime--blur .tw-mot__dedans { opacity: 0; filter: blur(14px); transform: translate3d(0, 0.35em, 0) scale(1.04); transition: opacity 0.9s ease calc(var(--mv-i, 0) * 70ms + 80ms), filter 0.9s ease calc(var(--mv-i, 0) * 70ms + 80ms), transform 1.1s cubic-bezier(0.19, 1, 0.22, 1) calc(var(--mv-i, 0) * 70ms + 80ms); } .tw-titre-anime--parti .tw-mot__dedans { transform: none; opacity: 1; filter: none; } /* ⚠️ LE SOUS-TITRE N'EST JAMAIS INVISIBLE (Lighthouse, 2026-09-29) : c'est lui, le plus grand texte du héros sur téléphone, donc l'élément LCP. Parti de `opacity: 0`, il n'existait pour le navigateur qu'une fois le fondu commencé (0,55 s après le titre) : le LCP attendait l'animation. Il part d'un texte lisible, atténué, et le fondu le porte à pleine intensité. */ .tw-titre-anime .tw-titre-anime__suite { opacity: 0.5; transform: translate3d(0, 14px, 0); transition: opacity 0.9s ease 0.55s, transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0.55s; } .tw-titre-anime--parti .tw-titre-anime__suite { opacity: 1; transform: none; } /* Mot d'accent qui tourne : une piste verticale, le plus long mot réserve la place. */ /* ⚠️ LA FENÊTRE DÉBORDE LA LIGNE DE `--mv-rot-marge` EN HAUT ET EN BAS (padding-block compensé par une marge négative : la ligne ne bouge pas), et `overflow-clip-margin` y ajoute l'aile de l'italique, comme `.mv-titre-section .tw-mot`. Pourquoi : une fenêtre de 1lh tranchait les jambages (p, g) d'une serif italique à interligne serré pendant le défilement (démo « Maison Kafé », 2026-09-26). Les mots de la piste sont espacés de DEUX marges : le voisin reste hors de la fenêtre agrandie. */ /* ⚠️ `vertical-align: BASELINE`, pas `bottom` : aligner le BAS de la fenêtre sur le bas de la ligne ne pose le mot sur la ligne de base du titre que si les deux polices ont les mêmes métriques. L'italique d'accent tombait 7 à 12 px trop bas (vitrines, 2026-09-28). La ligne de base d'une grille en ligne est celle de son premier élément, le gabarit : la même que celle du mot affiché, qui occupe la même place dans la fenêtre. ⚠️ `box-sizing: CONTENT-BOX` : motion.ts pose en `width` la largeur MESURÉE du mot. En border-box, les ailes (padding) s'y retranchaient : « PC » perdait sa dernière lettre, tout mot ses 0,28 em de fin. ⚠️ PADDING `!important` : c'est la FENÊTRE du mécanisme, pas un habillage. `.tw-h1 :is(em, i){ padding: var(--tw-em-pad, 0) }` (0,1,1) l'annulait en silence — et les DNA à plaque posent le leur, plus spécifique encore (confetti). Sans padding, restaient les marges négatives : la fenêtre, amputée de 0,4 em, rognait jambages et ailes, et descendait sous la ligne (vitrines, 2026-09-28). Une plaque garde son fond : l'aile (0,14 em) vaut son padding. */ .tw-rotation { --mv-rot-marge: 0.2em; --mv-rot-aile: 0.14em; display: inline-grid; vertical-align: baseline; height: 1lh; box-sizing: content-box; padding-block: var(--mv-rot-marge) !important; margin-block: calc(-1 * var(--mv-rot-marge)); overflow: hidden; overflow: clip; overflow-clip-margin: 0.12em; /* Même aile en largeur, par padding compensé (Safari ignore overflow-clip-margin) : l'italique garde ses deux ailes, la ligne n'en est pas élargie. */ padding-inline: var(--mv-rot-aile) !important; margin-inline: calc(-1 * var(--mv-rot-aile)); } .tw-rotation > * { grid-area: 1 / 1; } /* Le mot lu par les lecteurs d'écran (gabarit et piste sont `aria-hidden`). */ .tw-rotation > .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .tw-rotation__gabarit { visibility: hidden; white-space: nowrap; } .tw-rotation__piste { display: flex; flex-direction: column; gap: calc(2 * var(--mv-rot-marge)); white-space: nowrap; transform: translate3d(0, calc(var(--mv-k, 0) * -1 * (1lh + 2 * var(--mv-rot-marge))), 0); transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1); } .tw-rotation__piste > span { display: block; width: max-content; height: 1lh; } .tw-rotation--mesuree { justify-items: start; transition: width 0.75s cubic-bezier(0.7, 0, 0.2, 1); } .tw-rotation--mesuree > .tw-rotation__gabarit { width: 0; } .tw-titre-anime .tw-rotation { opacity: 0; transform: translate3d(0, 0.4em, 0); transition: opacity 0.8s ease 0.35s, transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0.35s, width 0.75s cubic-bezier(0.7, 0, 0.2, 1); } .tw-titre-anime--parti .tw-rotation { opacity: 1; transform: none; } /* Le mot d'accent porte souvent un DÉGRADÉ découpé dans le texte (background-clip) : ses mots sont maintenant dans des enfants, qui doivent en hériter. */ .tw-rotation__piste, .tw-rotation__piste > span { background: inherit; -webkit-background-clip: text; background-clip: text; } /* Même chose pour les mots découpés d'un titre animé (effets rise, blur) : un mot d'accent en dégradé DISPARAISSAIT, ses morceaux n'héritant pas du fond. */ :is(.tw-titre-anime, .mv-titre-section) em :is(.tw-mot, .tw-mot__dedans) { background: inherit; -webkit-background-clip: text; background-clip: text; } /* Images pilotées par le défilement : --mv-p va de 0 (l'image entre) à 1 (elle est au centre). */ .tw-defile { --mv-p: 1; --mv-q: 0.5; } .tw-defile :is(img, video) { will-change: transform; } .tw-defile[data-scroll-effect="tilt"] { perspective: 1600px; } .tw-defile[data-scroll-effect="tilt"] :is(img, video) { transform-origin: 50% 0%; transform: rotateX(calc((1 - var(--mv-p)) * 32deg)) scale(calc(0.86 + var(--mv-p) * 0.14)) translate3d(0, calc((1 - var(--mv-p)) * 40px), 0); } .tw-defile[data-scroll-effect="zoom"] :is(img, video) { transform: scale(calc(0.78 + var(--mv-p) * 0.22)); opacity: calc(0.35 + var(--mv-p) * 0.65); } .tw-defile[data-scroll-effect="parallax"] { overflow: hidden; border-radius: var(--tw-radius-media, 12px); } .tw-defile[data-scroll-effect="parallax"] :is(img, video) { transform: scale(1.18) translate3d(0, calc((var(--mv-q) - 0.5) * -14%), 0); } /* Dévoilement : le CADRE entier (barre de navigateur comprise) s'ouvre du haut vers le bas comme un rideau, pendant que l'image, un peu agrandie, se pose. L'ancien découpage rognait l'image DANS son cadre de navigateur — « il faut une plus belle animation » (Yann, 2026-09-26). Il part d'un tiers visible : jamais de trou blanc à l'entrée. Le « tout voir » de l'écran d'édition n'est pas concerné : sans le script, `--mv-p` vaut 1 et rien n'est découpé. */ .tw-defile[data-scroll-effect="reveal"] { --lx-rideau: max(0%, calc((0.75 - var(--mv-p)) * 88%)); } .tw-defile[data-scroll-effect="reveal"] .image-block__media, .tw-defile[data-scroll-effect="reveal"]:not(:has(.image-block__media)) :is(img, video) { clip-path: inset(0 0 var(--lx-rideau) 0 round var(--tw-radius-media, 12px)); transform: translate3d(0, max(0px, calc((0.75 - var(--mv-p)) * 48px)), 0); } /* Sans cadre peint, l'image se pose aussi (légère réduction) ; un cadre de navigateur ou de téléphone est peint SUR l'image, on ne le déforme pas. */ .tw-defile[data-scroll-effect="reveal"]:not(.image-block--frame-browser, .image-block--frame-phone) .image-block__media :is(img, video) { transform-origin: 50% 0%; transform: scale(calc(1.08 - var(--mv-p) * 0.08)); } /* Cartes : halo qui suit le pointeur, ou inclinaison vers lui. */ [data-hover-effect] :is(.tw-surface, .cards-block__card):has(> .tw-halo) { position: relative; isolation: isolate; } .tw-halo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mv-mx, 50%) var(--mv-my, 50%), color-mix(in oklab, var(--tw-accent, #6366f1) 18%, transparent), transparent 62%); opacity: 0; transition: opacity 0.35s ease; } [data-hover-effect] :is(.tw-surface, .cards-block__card):hover > .tw-halo { opacity: 1; } [data-hover-effect="tilt"] :is(.tw-surface, .cards-block__card) { transform: perspective(900px) rotateX(var(--mv-rx, 0deg)) rotateY(var(--mv-ry, 0deg)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; } @media (prefers-reduced-motion: reduce) { .tw-halo { display: none; } [data-hover-effect="tilt"] :is(.tw-surface, .cards-block__card) { transform: none; } } /* ============================================================================ VARIANTES PREMIUM DE MISE EN PAGE (Yann, 2026-09-26) — des sections qui ne se ressemblent plus toutes. Bento et liste numérotée (featuresBlock), rail horizontal (cardsBlock `layout: scroll`), mur de témoignages (testimonialBlock `wall`), sections empilées (contentSection `data-stack`). Les tuiles du bento sont des CLASSES calculées à la génération (shared/blocks/premiumVariants.ts), pas des :nth-child : une règle qui dépend du nombre d'éléments se trompe dès qu'on en ajoute un. Propriétés internes en --lx-* (jamais --tw-* : la sonde exige que chaque DNA définisse tout --tw-* lu sans repli). Chaque --tw-* lu a son repli. Spécificité : les DNAs visent `[data-dna] .features-block > .tw-surface` (0,3,0) et se chargent APRÈS cette feuille — les règles de STRUCTURE d'une variante montent donc à (0,5,0) ; la PEAU (fonds, couleurs) reste au DNA. ============================================================================ */ /* ── featuresBlock « bento » ─────────────────────────────────────────────── */ .features-block.features-block--bento.tw-grid{ --lx-bento-gap: max(var(--tw-gap, 1.25rem), 0.875rem); grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; grid-auto-rows: minmax(11rem, auto); gap: var(--lx-bento-gap); } @media (min-width: 640px){ .features-block.features-block--bento.tw-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px){ .features-block.features-block--bento.tw-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .features-block.features-block--bento.tw-grid > .tw-surface.features-block__tile{ position: relative; isolation: isolate; overflow: hidden; height: auto; justify-content: flex-start; /* Composition de la variante : alignée à gauche même chez un DNA qui centre ses features. */ align-items: flex-start; text-align: start; /* Une TUILE garde son retrait et son rayon, même chez un DNA qui aplatit ses features en liste (`padding: 1.25rem 0 0; border-radius: 0`) : le texte touchait le bord de la tuile chez SUISSE, REVUE, GAZETTE… (audit des 48 DNA, 2026-09-28). Les valeurs restent celles du DNA (ses jetons). */ padding: var(--tw-card-padding, 1.5rem); border-radius: var(--tw-radius-card, 16px); /* Lueur intérieure : un halo d'accent dans le coin haut, sous le contenu. */ background-image: radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, var(--tw-accent, #6366f1) 11%, transparent), transparent 62%); } /* Liseré en dégradé (1 px) : accent mêlé à la bordure du DNA, qui s'efface vers le bas. Posé PAR-DESSUS la bordure du DNA (qui reste la sienne). */ .features-block.features-block--bento.tw-grid > .tw-surface.features-block__tile::after{ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Neutralise ce qu'un DNA pose sur le ::after de ses cartes (coins, tailles). */ width: auto; height: auto; margin: 0; border: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, color-mix(in oklab, var(--tw-accent, #6366f1) 70%, var(--tw-border, transparent)) 0%, color-mix(in oklab, var(--tw-accent, #6366f1) 22%, var(--tw-border, transparent)) 38%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; transition: opacity .35s ease; } .features-block.features-block--bento.tw-grid > .tw-surface.features-block__tile:hover::after{ opacity: 1; } @media (min-width: 640px){ .features-block.features-block--bento.tw-grid > .features-block__tile--hero, .features-block.features-block--bento.tw-grid > .features-block__tile--wide, .features-block.features-block--bento.tw-grid > .features-block__tile--full{ grid-column: span 2; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero{ min-height: 18rem; } } @media (min-width: 1024px){ .features-block.features-block--bento.tw-grid > .features-block__tile--hero{ grid-column: span 2; grid-row: span 2; min-height: 24rem; } .features-block.features-block--bento.tw-grid > .features-block__tile--tall{ grid-row: span 2; } .features-block.features-block--bento.tw-grid > .features-block__tile--full{ grid-column: 1 / -1; } } /* Puits d'icône teinté d'accent. */ .features-block__well{ display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; width: 2.75rem; height: 2.75rem; border-radius: var(--tw-radius-button, 12px); background: color-mix(in oklab, var(--tw-accent, #6366f1) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tw-accent, #6366f1) 28%, transparent); } .features-block.features-block--bento .features-block__well > .tw-icon{ --tw-icon-size: 1.35rem; } /* Tuile vedette : icône en haut, texte en bas, titre à l'échelle h3 (et plus). */ .features-block.features-block--bento.tw-grid > .features-block__tile--hero > .features-block__well{ width: 3.5rem; height: 3.5rem; margin-bottom: auto; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero > .features-block__well > .tw-icon{ --tw-icon-size: 1.75rem; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero .tw-h4{ font-size: clamp(var(--tw-size-h4, 1.3rem), 2.6vw, calc(var(--tw-size-h3, 1.625rem) * 1.25)); line-height: var(--tw-leading-heading, 1.15); } .features-block.features-block--bento.tw-grid > .features-block__tile--hero .tw-body{ max-width: 44ch; } /* Vedette SANS image : l'icône devient l'illustration — un emblème au centre du vide, entouré d'ondes, au lieu d'une petite pastille perdue en haut d'une grande carte blanche (« un grand vide dans la carte de gauche », Yann 2026-09-26). */ @media (min-width: 640px){ .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well{ position: relative; align-self: center; margin-block: auto; width: clamp(5.5rem, 9vw, 7.5rem); height: clamp(5.5rem, 9vw, 7.5rem); border-radius: 999px; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--tw-accent, #6366f1) 30%, var(--tw-bg, #fff)), color-mix(in oklab, var(--tw-accent, #6366f1) 12%, var(--tw-bg, #fff)) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tw-accent, #6366f1) 30%, transparent), 0 18px 50px -12px color-mix(in oklab, var(--tw-accent, #6366f1) 45%, transparent); } .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well > .tw-icon{ --tw-icon-size: clamp(2.25rem, 3.6vw, 3rem); } .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::before, .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::after{ content: ""; position: absolute; inset: -1.6rem; border-radius: inherit; pointer-events: none; border: 1px solid color-mix(in oklab, var(--tw-accent, #6366f1) 22%, transparent); /* DEUX ondes, puis le calme : une boucle sans fin de plus de 5 s devrait pouvoir s'arrêter (WCAG 2.2.2) — un décor ne mérite pas un bouton de pause, il s'arrête de lui-même avant (3,6 s + 1,2 s de décalage = 4,8 s). */ animation: lx-bento-onde 3.6s cubic-bezier(.2,.7,.2,1) 1 both; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::after{ animation-delay: 1.2s; } } @keyframes lx-bento-onde{ from{ transform: scale(.72); opacity: 0; } 25%{ opacity: 1; } to{ transform: scale(1.55); opacity: 0; } } /* ⚠️ MÊME SPÉCIFICITÉ QUE LA RÈGLE QUI ANIME (`:not(:has(> img.tw-media))` compris). Sans le `:not(:has())`, la garde perdait : les ondes tournaient en boucle chez un visiteur qui a demandé moins de mouvement, dans les 48 DNA (audit du 2026-09-28, `document.getAnimations()` sous `reducedMotion: reduce`). */ @media (prefers-reduced-motion: reduce){ .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::before, .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::after{ animation: none; opacity: .6; transform: none; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::after{ inset: -3rem; opacity: .35; } } html[data-animations="off"] .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::before, html[data-animations="off"] .features-block.features-block--bento.tw-grid > .features-block__tile--hero:not(:has(> img.tw-media)) > .features-block__well::after{ animation: none; } /* Vedette À IMAGE : l'image remplit la tuile et s'efface vers le bas, où le texte repose sur la couleur de surface du DNA — lisible sans voile en dur. */ .features-block.features-block--bento.tw-grid > .features-block__tile--hero:has(> img.tw-media){ justify-content: flex-end; } .features-block.features-block--bento.tw-grid > .features-block__tile--hero > img.tw-media{ position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 72%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 72%); } @media (max-width: 639px){ .features-block.features-block--bento.tw-grid > .features-block__tile--hero:has(> img.tw-media){ min-height: 22rem; } } /* ── featuresBlock « numbered » : liste éditoriale ───────────────────────── */ .features-block.features-block--numbered.tw-grid{ --lx-index-size: clamp(3rem, 10vw, 4rem); --lx-index-col: 0px; grid-template-columns: minmax(0, 1fr); gap: 0; } .features-block.features-block--numbered.tw-grid > .tw-surface.features-block__step{ position: relative; height: auto; gap: .5rem; align-items: flex-start; text-align: start; background: transparent; box-shadow: none; border: 0; border-radius: 0; border-top: 1px solid var(--tw-rule, var(--tw-border, rgba(0,0,0,.12))); padding: clamp(1.4rem, 3vw, 2.25rem) 0 clamp(1.4rem, 3vw, 2.25rem) var(--lx-index-col); } .features-block.features-block--numbered.tw-grid > .tw-surface.features-block__step:last-child{ border-bottom: 1px solid var(--tw-rule, var(--tw-border, rgba(0,0,0,.12))); } /* Le numéro EST le repère : les pastilles décoratives d'un DNA et l'icône se retirent. */ .features-block.features-block--numbered.tw-grid > .tw-surface.features-block__step::before{ content: none; } .features-block.features-block--numbered.tw-grid > .features-block__step > .tw-icon{ display: none; } .features-block.features-block--numbered.tw-grid > .features-block__step > img.tw-media{ max-width: 20rem; } .features-block__index{ --lx-index-stroke: color-mix(in oklab, var(--tw-accent, #555) 62%, var(--tw-text-heading, var(--tw-text, #111))); display: block; font-family: var(--tw-font-heading, Georgia, serif); font-weight: var(--tw-weight-heading, 700); font-size: var(--lx-index-size); line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; /* Détouré SANS les chevauchements internes des glyphes (le « 2 » d'une police variable dessine sa jonction) : trait double, peint SOUS un remplissage de la couleur du fond — seule la moitié extérieure du trait reste visible. */ color: var(--tw-bg, transparent); -webkit-text-stroke: 3px var(--lx-index-stroke); paint-order: stroke fill; transition: color .35s ease; user-select: none; } @supports not (-webkit-text-stroke: 1px #000){ .features-block__index{ color: var(--tw-accent, currentColor); } } .features-block.features-block--numbered.tw-grid > .features-block__step:hover > .features-block__index{ color: color-mix(in oklab, var(--tw-accent, #555) 16%, var(--tw-bg, transparent)); } .features-block.features-block--numbered.tw-grid > .features-block__step .tw-h4{ font-size: var(--tw-size-h3, 1.625rem); } .features-block.features-block--numbered.tw-grid > .features-block__step .tw-body{ max-width: 62ch; } @media (min-width: 768px){ .features-block.features-block--numbered.tw-grid{ --lx-index-size: clamp(4rem, 7vw, 6.5rem); --lx-index-col: calc(var(--lx-index-size) * 1.7 + clamp(1.5rem, 4vw, 3rem)); } .features-block.features-block--numbered.tw-grid > .tw-surface.features-block__step{ min-height: calc(var(--lx-index-size) * .9 + clamp(1.4rem, 3vw, 2.25rem) * 2); justify-content: center; } .features-block.features-block--numbered.tw-grid > .features-block__step > .features-block__index{ position: absolute; left: 0; top: clamp(1.4rem, 3vw, 2.25rem); } } /* ── cardsBlock « scroll » : rail horizontal ─────────────────────────────── */ .cards-block.cards-block--scroll{ --lx-rail-gap: max(var(--tw-gap, 1.5rem), 1rem); --lx-rail-card: min(80vw, 21rem); display: flex; gap: var(--lx-rail-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; /* Même garde que le bandeau : la piste ne donne pas sa largeur aux parents (le canevas de l'éditeur passait sous le panneau de droite). */ contain: inline-size; min-width: 0; /* De l'air pour l'ombre et le soulèvement des cartes (rendu par la marge sur le site, où l'enveloppe le permet — voir `.cards-scroll >` plus bas). */ padding-block: .5rem 1rem; } .cards-block.cards-block--scroll::-webkit-scrollbar{ display: none; } @media (min-width: 640px){ .cards-block.cards-block--scroll{ --lx-rail-card: clamp(17rem, 40vw, 22rem); } } @media (min-width: 1024px){ .cards-block.cards-block--scroll{ --lx-rail-card: clamp(18rem, 27vw, 24rem); } } .cards-block.cards-block--scroll > .cards-block__card{ flex: 0 0 var(--lx-rail-card); scroll-snap-align: start; } .cards-block.cards-block--scroll img{ -webkit-user-drag: none; } .cards-block.cards-block--scroll:focus-visible{ outline: 2px solid var(--tw-accent, currentColor); outline-offset: 4px; } @media (pointer: fine){ .cards-scroll[data-pret] > .cards-block--scroll{ cursor: grab; } } .cards-block.cards-block--scroll.is-glisse{ cursor: grabbing; scroll-snap-type: none; user-select: none; } /* Sur le site (enveloppe `.cards-scroll`) : la piste déborde jusqu'au bord DROIT de l'écran ; le rembourrage final ramène la dernière carte sur le bord du contenu. `.page-content` rogne en x le demi-ascenseur que 100vw compte en trop. */ .cards-scroll{ position: relative; } .cards-scroll > .cards-block.cards-block--scroll{ margin-block: -.5rem -1rem; margin-inline-end: calc(50% - 50vw); padding-inline-end: calc(50vw - 50%); } .cards-scroll__ui{ display: flex; align-items: center; gap: .75rem; margin-top: clamp(1rem, 2vw, 1.5rem); } .cards-scroll:not([data-pret]) .cards-scroll__ui, .cards-scroll[data-deborde="false"] .cards-scroll__ui{ display: none; } .cards-scroll__progress{ flex: 1 1 auto; height: 2px; border-radius: 2px; overflow: hidden; background: var(--tw-rule, color-mix(in oklab, var(--tw-text, #000) 14%, transparent)); } .cards-scroll__bar{ display: block; height: 100%; background: var(--tw-accent, currentColor); transform-origin: 0 50%; transform: scaleX(var(--lx-progress, .25)); transition: transform .25s ease-out; } .cards-scroll__nav{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 999px; border: var(--tw-border-width, 1px) solid var(--tw-border, rgba(0,0,0,.15)); background: var(--tw-surface, #fff); color: var(--tw-text-heading, var(--tw-text, inherit)); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; } .cards-scroll__nav:hover:not(:disabled){ background: var(--tw-accent, #111); color: var(--tw-on-accent, #fff); border-color: var(--tw-accent, #111); } .cards-scroll__nav:disabled{ opacity: .35; cursor: default; } .cards-scroll__nav:focus-visible{ outline: 2px solid var(--tw-accent, currentColor); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ .cards-scroll__bar, .cards-scroll__nav{ transition: none; } } html[data-animations="off"] .cards-scroll__bar{ transition: none; } /* ── testimonialBlock « wall » : maçonnerie (colonnes CSS) ───────────────── */ .testimonial-block.testimonial-block--wall{ --lx-wall-gap: max(var(--tw-gap, 1.5rem), 1rem); display: block; column-count: 1; column-gap: var(--lx-wall-gap); } @media (min-width: 640px){ .testimonial-block.testimonial-block--wall:not([data-cols-tablet="1"]){ column-count: 2; } } @media (min-width: 1024px){ .testimonial-block.testimonial-block--wall[data-cols-desktop="1"]{ column-count: 1; } .testimonial-block.testimonial-block--wall[data-cols-desktop="2"]{ column-count: 2; } .testimonial-block.testimonial-block--wall[data-cols-desktop="3"]{ column-count: 3; } .testimonial-block.testimonial-block--wall[data-cols-desktop="4"]{ column-count: 4; } } .testimonial-block.testimonial-block--wall > .testimonial-block__item{ height: auto; width: 100%; margin: 0 0 var(--lx-wall-gap); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .testimonial-block.testimonial-block--wall > .testimonial-block__item .testimonial-block__quote{ flex: none; } /* Une carte sur cinq, légèrement teintée d'accent : le mur respire. */ .testimonial-block.testimonial-block--wall > .testimonial-block__item[data-surface="card"]:nth-child(5n+2){ background-color: color-mix(in oklab, var(--tw-accent, #6366f1) 7%, var(--tw-surface, #fff)); } /* Citation courte = composée grand, dans la police des titres. */ /* (0,5,1) : bat les `[data-dna] .testimonial-block .tw-quote p` ; plancher 1,5rem pour rester au-dessus de la citation ordinaire d'un DNA qui grossit déjà les siennes. */ .testimonial-block.testimonial-block--wall > .tw-surface.testimonial-block__item--short .tw-quote p{ font-family: var(--tw-font-heading, inherit); font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: var(--tw-tracking-heading, -0.01em); line-height: 1.3; } /* ── contentSection « stack » : sections empilées (paquet de cartes) ─────── */ .content-section[data-stack]{ --lx-stack-radius: clamp(1.25rem, 3vw, 2rem); border-radius: var(--lx-stack-radius) var(--lx-stack-radius) 0 0; /* Fond opaque : la section suivante glisse PAR-DESSUS, rien ne doit transparaître. */ background-color: var(--tw-bg, var(--tw-page-bg, #fff)); box-shadow: 0 -1px 0 color-mix(in oklab, var(--tw-text, #000) 7%, transparent), 0 -26px 50px -30px color-mix(in oklab, var(--tw-text, #000) 45%, transparent); } /* Le collage n'existe qu'une fois la section MESURÉE par premium-variantes.ts (`data-stack-pret`, `--lx-stack-top` négatif pour une section plus haute que l'écran : elle défile jusqu'à son bas avant d'être recouverte). Sans z-index : la section d'en-tête (z-index 50, blocks-shared.css) et ses menus restent au-dessus ; chaque section suivante, plus loin dans le flux, passe devant. */ @media (min-width: 700px) and (min-height: 560px) and (prefers-reduced-motion: no-preference){ .content-section[data-stack][data-stack-pret]{ position: sticky; top: var(--lx-stack-top, 0px); } } html[data-animations="off"] .content-section[data-stack][data-stack-pret]{ position: relative; top: auto; } /* ── animation-block — animation de motion design écrite en code (2026-09-26) ── Un cadre ISOLÉ (iframe sandbox + CSP sans réseau, cf. shared/blocks/animationBlock.ts) dans une scène au ratio fixé par `data-ratio`. Le fond reste transparent : la section se voit derrière. `animation-block.ts` (runtime) envoie la palette au cadre. « Moins de mouvement » : l'affiche, si elle existe, remplace le cadre. */ /* Bloc Équipe : la page d'un membre (HELO 74815) — le nom garde son allure de titre, souligné au survol ; la photo reste un bloc. */ .team-block__name-link{ color: inherit; text-decoration: none; } .team-block__name-link:hover, .team-block__name-link:focus-visible{ text-decoration: underline; text-underline-offset: .2em; } /* HELO 74842 : le lien est un conteneur FLEX — en bloc, le médaillon (un ) redevenait EN LIGNE, sa largeur ne comptait plus et la photo prenait toute la colonne (« logo pleine largeur dans un grand cadre blanc »). */ .team-block__photo-link{ display: flex; justify-content: center; flex: none; max-width: 100%; } .team-block--row .team-block__photo-link{ justify-content: flex-start; } /* Bloc « Intégrer » (embedBlock) : une adresse dans un cadre, ou le code d'un service écrit tel quel. Le cadre prend la largeur du texte, sa hauteur est réglée dans le bloc ; le code HTML garde sa propre mise en page. */ .embed-block{ width: 100%; margin: 0 auto; } .embed-block__frame{ display: block; width: 100%; max-width: 100%; border: 0; border-radius: var(--tw-radius-media, 12px); background: color-mix(in srgb, currentColor 4%, transparent); } .embed-block--html{ overflow-x: auto; } /* En attente du consentement du visiteur (catégorie réglée dans le bloc) : le message tient la place, avec le lien qui rouvre la bannière ; le réveil (/_tw/consentement.js) le retire. Un cadre sans adresse garde sa hauteur. */ /* #420 (beta.15) : une vidéo ou une carte Google en attente du consentement. Le message tient la place du cadre (même hauteur), avec « Afficher la vidéo » qui ne charge QUE ce bloc. */ .tw-consentement{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem; text-align: center; font-size: 0.92em; background: var(--tw-surface, color-mix(in srgb, currentColor 6%, transparent)); color: var(--tw-text, inherit); } :is(.video-block__wrapper, .map-block) > .tw-consentement{ position: absolute; inset: 0; z-index: 1; } .tw-consentement p{ margin: 0; max-width: 34rem; } .tw-consentement__actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; } .tw-consentement__afficher{ cursor: pointer; font: inherit; padding: 0.55rem 1.1rem; border: 0; border-radius: var(--tw-radius-button, 8px); background: var(--tw-btn-bg, var(--tw-accent, #111)); color: var(--tw-btn-text, #fff); } .tw-consentement__afficher:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } .tw-consentement a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } .embed-block__consentement{ margin: 0; padding: 1rem 1.25rem; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--tw-radius-media, 12px); font-size: 0.9em; text-align: center; } .embed-block__consentement a{ text-decoration: underline; text-underline-offset: 2px; } .embed-block--url .embed-block__consentement{ margin-block-start: 0.5rem; } /* Le jeton d'un code PHP (#382) : visible dans l'APERÇU seulement — la passe après le build le remplace par le code et publie la page en index.php. */ tw-php{ display: block; padding: 1rem 1.25rem; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--tw-radius-media, 12px); font: 0.85em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } .animation-block{ margin: 0 auto; width: 100%; } .animation-block--full{ max-width: 100%; } .animation-block--large{ max-width: min(960px, 100%); } .animation-block--medium{ max-width: min(640px, 100%); } .animation-block__stage{ position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .animation-block[data-ratio="4:3"] .animation-block__stage{ aspect-ratio: 4 / 3; } .animation-block[data-ratio="1:1"] .animation-block__stage{ aspect-ratio: 1 / 1; } .animation-block[data-ratio="21:9"] .animation-block__stage{ aspect-ratio: 21 / 9; } .animation-block[data-ratio="3:4"] .animation-block__stage{ aspect-ratio: 3 / 4; } /* Vertical : la hauteur ne dépasse pas l'écran — c'est la largeur qui cède. */ .animation-block[data-ratio="9:16"] .animation-block__stage{ aspect-ratio: 9 / 16; width: min(100%, calc(90vh * 9 / 16)); margin: 0 auto; } .animation-block--rounded .animation-block__stage{ border-radius: var(--tw-radius-media, 1rem); } /* L'image nommée (`role="img"`) qui porte le cadre et l'affiche : elle remplit la scène (la mise en pause, pause-animations.ts, vise la figure). */ .animation-block__image{ position: absolute; inset: 0; } .animation-block__frame{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; } .animation-block__poster{ position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce){ .animation-block--has-poster .animation-block__frame{ display: none; } .animation-block--has-poster .animation-block__poster{ display: block; } } html[data-animations="off"] .animation-block--has-poster .animation-block__frame{ display: none; } html[data-animations="off"] .animation-block--has-poster .animation-block__poster{ display: block; } /* Éditeur seulement : un voile au-dessus du cadre, pour qu'un clic SÉLECTIONNE le bloc au lieu d'entrer dans l'animation ; et l'emplacement d'un bloc vide. */ .animation-block__overlay{ position: absolute; inset: 0; z-index: 1; cursor: pointer; background: transparent; } .animation-block__placeholder{ display: flex; align-items: center; justify-content: center; padding: 3rem; text-align: center; font-size: 1rem; color: var(--tw-text, rgba(128, 128, 128, 0.6)); opacity: 0.6; border: 2px dashed var(--tw-border, rgba(128, 128, 128, 0.25)); border-radius: 0.5rem; } /* Ambiances GÉNÉRATIVES sans leur script (éditeur, ou avant le chargement de motion.ts) : un rendu fixe qui en donne l'idée. L'éditeur n'exécute pas le script du site, et l'ambiance y était invisible (Yann, 2026-09-26). Dès que le canvas est posé, il prend le relais. */ .content-section:is([data-atmosphere="liquid"], [data-atmosphere="mesh"]) > .tw-backdrop--section:not(:has(canvas)){ background: radial-gradient(40% 55% at 20% 30%, color-mix(in oklab, var(--tw-accent, #6366f1) 38%, transparent), transparent 70%), radial-gradient(38% 50% at 80% 65%, color-mix(in oklab, var(--tw-accent-2, var(--tw-accent, #a855f7)) 34%, transparent), transparent 70%), radial-gradient(30% 40% at 60% 15%, color-mix(in oklab, var(--tw-accent, #6366f1) 22%, transparent), transparent 70%); } .content-section[data-atmosphere="particles"] > .tw-backdrop--section:not(:has(canvas)){ background: radial-gradient(color-mix(in oklab, var(--tw-accent, #6366f1) 45%, transparent) 1.5px, transparent 2px) 0 0 / 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 100%); } .content-section[data-atmosphere="waves"] > .tw-backdrop--section:not(:has(canvas)){ background: repeating-radial-gradient(ellipse 140% 60% at 50% 120%, transparent 0 22px, color-mix(in oklab, var(--tw-accent, #6366f1) 22%, transparent) 22px 23px); } /* DEUX SECTIONS VOISINES DU MÊME FOND n'additionnent plus leurs marges : sans changement de couleur, rien ne justifie le double vide (~16 rem chez Cobalt) — « je vois souvent de gros espaces blancs » (Yann, 2026-09-26). La seconde réduit sa marge du haut ; une bande de couleur différente garde les siennes. Une ambiance qui s'estompe vers le bas (grille, maillage, particules) laisse le fond de la page : elle compte comme le même fond. Les vagues et le liquide occupent le bas de leur section, eux gardent l'écart. */ .content-section:is([data-palette="default"], :not([data-palette])):not(.content-section--system):not([data-atmosphere="liquid"], [data-atmosphere="waves"]):not(.content-section--has-bg-image) + .content-section:is([data-palette="default"], :not([data-palette])):not(.content-section--system):not([data-atmosphere]):not(.content-section--has-bg-image){ padding-top: calc((var(--tw-section-py, 6rem) * var(--tw-section-density, 1)) * 0.3); } .content-section[data-palette="subtle"] + .content-section[data-palette="subtle"], .content-section[data-palette="accent"] + .content-section[data-palette="accent"], .content-section[data-palette="bold"] + .content-section[data-palette="bold"]{ padding-top: calc((var(--tw-section-py, 6rem) * var(--tw-section-density, 1)) * 0.3); } /* ── compare-block — comparaison AVANT / APRÈS (Yann, 2026-09-26) ────────── L'image « après » est dans le flux (en ratio `auto`, c'est elle qui donne les proportions) ; l'image « avant » est posée par-dessus et découpée par `clip-path` à `--cp-pos`. Un INVISIBLE couvre la scène : clavier, souris et doigt marchent sans script ; `comparaison.ts` recopie sa valeur dans `--cp-pos` (sans script, le style en ligne garde `start`). Le curseur déborde de la moitié de son pouce de chaque côté : le centre du pouce tombe ainsi EXACTEMENT sous le séparateur, de 0 à 100 %. Survoler n'est pas glisser : rien ne bouge sans appui. Variables internes en --cp-* ; les couleurs viennent des jetons --tw-*. */ .compare-block{ --cp-pos: 50%; --cp-radius: var(--tw-radius-media, 14px); --cp-thumb: 2.75rem; --cp-line: var(--tw-surface, #fff); margin: 0; width: 100%; } .compare-block__stage{ position: relative; box-sizing: content-box; overflow: hidden; isolation: isolate; line-height: 0; -webkit-user-select: none; user-select: none; } .compare-block__stage img{ display: block; width: 100%; max-width: none; margin: 0; border-radius: 0; } .compare-block__after{ height: auto; } .compare-block__before{ position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--cp-pos)) 0 0); } .compare-block--vertical .compare-block__before{ clip-path: inset(0 0 calc(100% - var(--cp-pos)) 0); } /* Proportions imposées : les deux images remplissent la scène. */ .compare-block[data-ratio="16:9"] .compare-block__stage{ aspect-ratio: 16 / 9; } .compare-block[data-ratio="4:3"] .compare-block__stage{ aspect-ratio: 4 / 3; } .compare-block[data-ratio="3:2"] .compare-block__stage{ aspect-ratio: 3 / 2; } .compare-block[data-ratio="1:1"] .compare-block__stage{ aspect-ratio: 1 / 1; } .compare-block:is([data-ratio="16:9"], [data-ratio="4:3"], [data-ratio="3:2"], [data-ratio="1:1"]) .compare-block__after{ position: absolute; inset: 0; height: 100%; object-fit: cover; } /* Étiquettes : petites pastilles dans les coins (typo du surtitre du DNA). */ .compare-block__label{ position: absolute; z-index: 1; top: .75rem; pointer-events: none; line-height: 1.2; white-space: nowrap; font-family: var(--tw-font-body, system-ui, sans-serif); font-size: var(--tw-size-eyebrow, .75rem); font-weight: 600; letter-spacing: var(--tw-tracking-eyebrow, .12em); text-transform: uppercase; color: var(--tw-text, #111); background: color-mix(in oklab, var(--tw-surface, #fff) 82%, transparent); padding: .4em .8em; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .compare-block__label--before{ left: .75rem; } .compare-block__label--after{ right: .75rem; } .compare-block--vertical .compare-block__label--after{ top: auto; right: auto; bottom: .75rem; left: .75rem; } /* Le curseur natif, invisible, sur toute la scène. */ .compare-block__range{ position: absolute; z-index: 2; top: 0; left: calc(var(--cp-thumb) / -2); width: calc(100% + var(--cp-thumb)); height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; } .compare-block__range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: var(--cp-thumb); height: var(--cp-thumb); border: 0; background: transparent; } .compare-block__range::-moz-range-thumb{ width: var(--cp-thumb); height: var(--cp-thumb); border: 0; background: transparent; } .compare-block--vertical .compare-block__range{ top: calc(var(--cp-thumb) / -2); left: 0; width: 100%; height: calc(100% + var(--cp-thumb)); writing-mode: vertical-lr; direction: ltr; cursor: ns-resize; touch-action: pan-x; } /* La poignée : un trait et une pastille ronde à deux chevrons. */ .compare-block__handle{ position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cp-pos); width: 0; pointer-events: none; } .compare-block__handle::before{ content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--cp-line); box-shadow: 0 0 6px rgba(0, 0, 0, .25); } .compare-block__grip{ position: absolute; top: 50%; left: 0; width: var(--cp-thumb); height: var(--cp-thumb); display: grid; place-items: center; border-radius: 999px; background: var(--tw-surface, #fff); color: var(--tw-text, #111); box-shadow: 0 2px 10px rgba(0, 0, 0, .22), 0 0 0 1px color-mix(in oklab, var(--tw-text, #111) 10%, transparent); transform: translate(-50%, -50%); transition: transform .2s ease; } .compare-block__grip svg{ display: block; } .compare-block--vertical .compare-block__handle{ top: var(--cp-pos); right: 0; bottom: auto; left: 0; width: auto; height: 0; } .compare-block--vertical .compare-block__handle::before{ top: -1px; right: 0; bottom: auto; left: 0; width: auto; height: 2px; } .compare-block--vertical .compare-block__grip{ top: 0; left: 50%; } .compare-block--vertical .compare-block__grip svg{ transform: rotate(90deg); } .compare-block__range:focus-visible ~ .compare-block__handle .compare-block__grip{ outline: 2px solid var(--tw-accent, currentColor); outline-offset: 3px; } .compare-block__range:active ~ .compare-block__handle .compare-block__grip{ transform: translate(-50%, -50%) scale(1.08); } @media (hover: hover) and (pointer: fine){ .compare-block__stage:hover .compare-block__grip{ transform: translate(-50%, -50%) scale(1.06); } } @media (prefers-reduced-motion: reduce){ .compare-block__grip{ transition: none; } } /* Cadres. « Navigateur » : même habillage que .image-block--frame-browser (blocks-shared.css) — la barre est une bordure haute TRANSPARENTE sur laquelle le fond peint les trois points : la scène (et donc les images, la poignée, le curseur) commence juste en dessous, sans élément de plus. */ .compare-block--frame-rounded .compare-block__stage{ border-radius: var(--cp-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px -18px rgba(0, 0, 0, .28); } .compare-block--frame-browser .compare-block__stage{ border-top: 2rem solid transparent; border-radius: 12px; background: radial-gradient(circle 5px at 18px 1rem, #ff5f57 97%, transparent 100%) no-repeat, radial-gradient(circle 5px at 36px 1rem, #febc2e 97%, transparent 100%) no-repeat, radial-gradient(circle 5px at 54px 1rem, #28c840 97%, transparent 100%) no-repeat, linear-gradient(color-mix(in oklab, var(--tw-text, #111) 6%, var(--tw-surface, #fff)), color-mix(in oklab, var(--tw-text, #111) 6%, var(--tw-surface, #fff))) top / 100% 2rem no-repeat, var(--tw-surface, #fff); background-origin: border-box; box-shadow: 0 0 0 1px color-mix(in oklab, var(--tw-text, #111) 12%, transparent), 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px -12px rgba(0, 0, 0, .28); } /* Éditeur seulement : l'emplacement d'une comparaison sans ses deux images. */ .compare-block__placeholder{ display: flex; align-items: center; justify-content: center; padding: 3rem; text-align: center; font-size: 1rem; color: var(--tw-text, rgba(128, 128, 128, 0.6)); opacity: 0.6; border: 2px dashed var(--tw-border, rgba(128, 128, 128, 0.25)); border-radius: 0.5rem; } /* ── callout-block — l'ENCADRÉ : note / astuce / attention / important (#335) ─ L'« admonition » de GitBook et Docusaurus, le callout de Notion. Un fond TEINTÉ (≈ 9 % de la couleur de sa nature, posé sur la surface de la section quelle qu'elle soit : on mélange avec `transparent`, pas avec une surface supposée), un filet de 3 px à gauche, une icône Lucide en ligne et un titre facultatif en demi-gras. Le contenu est du texte riche ordinaire : il garde la typographie du DNA. Couleurs : note = l'accent du thème, astuce = vert, attention = ambre, important = rouge. L'icône est mêlée à la couleur du TEXTE : elle fonce sur une section claire et s'éclaircit sur une section sombre sans qu'on ait à savoir laquelle. Le thème sombre éclaircit en plus les quatre teintes. Propriétés internes en --lx-* ; chaque --tw-* lu a son repli. */ .callout-block{ --lx-callout-c: var(--tw-accent, #2563eb); display: flex; align-items: flex-start; gap: .75rem; margin: 1.5rem 0; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--lx-callout-c); border-radius: min(var(--tw-radius-media, 10px), 12px); background: color-mix(in oklab, var(--lx-callout-c) 9%, transparent); } .callout-block--tip{ --lx-callout-c: #16a34a; } .callout-block--warning{ --lx-callout-c: #d97706; } .callout-block--danger{ --lx-callout-c: #dc2626; } [data-theme="dark"] .callout-block{ background: color-mix(in oklab, var(--lx-callout-c) 14%, transparent); } [data-theme="dark"] .callout-block--note{ --lx-callout-c: color-mix(in oklab, var(--tw-accent, #2563eb) 72%, #fff); } [data-theme="dark"] .callout-block--tip{ --lx-callout-c: #4ade80; } [data-theme="dark"] .callout-block--warning{ --lx-callout-c: #fbbf24; } [data-theme="dark"] .callout-block--danger{ --lx-callout-c: #f87171; } .callout-block__icon{ flex: none; display: inline-flex; width: 1.25rem; height: 1.25rem; margin-top: .2em; color: color-mix(in oklab, var(--lx-callout-c) 78%, currentColor); } .callout-block__icon svg{ display: block; width: 100%; height: 100%; } .callout-block__body{ flex: 1 1 auto; min-width: 0; } .callout-block__title{ margin: 0 0 .35rem; font-family: var(--tw-font-body, inherit); font-weight: 600; line-height: 1.45; color: var(--tw-text-heading, inherit); } /* Le premier et le dernier bloc du contenu collent au cadre. Deux profondeurs : la publication (enfants directs) et l'éditeur (la NodeView intercale son conteneur `[data-node-view-content-react]`). */ .callout-block__content > :first-child, .callout-block__content > [data-node-view-content-react] > :first-child{ margin-top: 0; } .callout-block__content > :last-child, .callout-block__content > [data-node-view-content-react] > :last-child{ margin-bottom: 0; } /* Éditeur seulement : le titre se tape en place, dans un champ qui a exactement l'allure du titre publié. */ .callout-block__title-input{ display: block; width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; outline: none; } .callout-block__title-input::placeholder{ color: inherit; opacity: .45; } button.callout-block__icon{ padding: 0; border: 0; background: none; cursor: pointer; } /* ── Écritures de droite à gauche (2026-09-26) — cf. la section RTL de blocks-shared.css. Rien ici n'agit sans `[dir="rtl"]`. ── */ /* Les flèches « → » des liens pointent vers la FIN de la ligne. */ [dir="rtl"] :is(.tw-cta-link__arrow, .list-block__arrow){ display: inline-block; transform: scaleX(-1); } [dir="rtl"] .tw-cta-link:hover .tw-cta-link__arrow{ transform: translateX(-3px) scaleX(-1); } [dir="rtl"] .list-block__title-link:hover .list-block__arrow{ transform: translateX(-.2em) scaleX(-1); } /* Avant / après : la poignée se place en `left: var(--cp-pos)`, calculé depuis la valeur du curseur natif — qui, en RTL, part de la DROITE. On garde le curseur de gauche à droite, pour que la poignée suive le doigt. */ [dir="rtl"] .compare-block__range{ direction: ltr; } /** * blocks-shared.css - TipTap Block Rendering Styles (SHARED) * * SHARED between: * - TipTap editor preview (imported by blocks-editor.css) * - Astro preview (copied to public/styles/blocks.css) * - Published Astro site * * DO NOT put editor-only styles here (modals, focus rings, sidebar UI, .dark rules). * Those belong in blocks-editor.css. * * COLOURS = DNA BRICK TOKENS (--tw-*): * ==================================== * All colours use the brick tokens (--tw-text, --tw-accent, --tw-surface, * --tw-border, --tw-btn-*…) derived by the active DNA (dna-{x}.css). A section * carries a [data-palette] attribute; the DNA re-points the contextual --tw-* * set per palette (default/subtle/accent/bold). No legacy --section-* injection. */ /* ═══════════════════════════════════════════════════════════════════════════ SECTION BASE Section vertical rhythm + system-section reset. Colours flow from the DNA brick tokens (--tw-*); the palette is selected by the [data-palette] attribute emitted on the section via ContentSectionExtension. ═══════════════════════════════════════════════════════════════════════════ */ .content-section { /* Section vertical rhythm — owned by the DNA (--tw-section-py). The legacy per-section --section-* colour bridge is gone: a section's colours come from the DNA via the [data-palette] attribute (dna-{x}.css re-points the contextual --tw-* set). Blocks read --tw-* directly. × --tw-section-density : Thème › Densité (Yann, 2026-10-17), 1 = le style. */ padding-top: calc(var(--tw-section-py, 4rem) * var(--tw-section-density, 1)); padding-bottom: calc(var(--tw-section-py, 4rem) * var(--tw-section-density, 1)); } /* System sections (header/footer) without an explicit palette paint nothing, so the child block (siteHeader/siteFooter) uses its own surface. */ .content-section--system:not([data-pattern-id]) { background: none; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION PALETTE BACKGROUND A section with a palette paints the DNA band colour. ═══════════════════════════════════════════════════════════════════════════ */ .content-section--has-pattern { /* DNA-first (contrat §1) : la bande suit la palette DNA via --tw-bg (re-pointé par dna-c.css [data-palette]). */ background: var(--tw-bg); } /* ═══════════════════════════════════════════════════════════════════════════ BACKGROUND IMAGE + BLUR Image backgrounds use inline styles for background: url(...). Blur requires a ::before pseudo-element so the content stays sharp. The blur value is passed via --section-bg-blur CSS variable. ═══════════════════════════════════════════════════════════════════════════ */ .content-section--has-bg-image { position: relative; } /* When blur is set: ::before inherits the background and applies filter */ .content-section--has-bg-blur { overflow: hidden; } .content-section--has-bg-blur::before { content: ''; position: absolute; /* Extend beyond edges to prevent blur fringe artifacts */ inset: -10px; background: inherit; filter: blur(var(--section-bg-blur, 0px)); z-index: 0; } /* FOND FIXE (03/10) — l'image reste immobile pendant que le contenu défile. ⚠️ PAS `background-attachment: fixed` : iOS Safari l'ignore. Un calque `position: fixed` à la taille de l'écran, DÉCOUPÉ par la section (`clip-path: inset(0)`) : on ne voit l'image qu'à travers la section, et elle ne bouge pas. Rendu par le compositeur, sans script ; marche sur iPhone et iPad. Le fond de la section reste posé dessous : c'est le repli quand le calque ne peut pas être fixe (« moins de mouvement », ou un ancêtre transformé qui fait de `fixed` un simple `absolute`). Propriétés logiques : RTL inchangé. */ .content-section--fond-fixe { clip-path: inset(0); isolation: isolate; } .content-section__fond-fixe { position: fixed; inset-block-start: 0; inset-inline: 0; height: 100vh; /* La grande hauteur d'écran (barre d'adresse repliée) : pas de bande vide en bas sur mobile quand la barre se replie au défilement. */ height: 100lvh; z-index: 0; pointer-events: none; background-attachment: scroll; } .content-section--has-bg-blur > .content-section__fond-fixe { /* Déborde un peu pour que le flou n'éclaircisse pas les bords. */ inset-inline: -10px; inset-block-start: -10px; height: calc(100vh + 20px); height: calc(100lvh + 20px); filter: blur(var(--section-bg-blur, 0px)); } @media (prefers-reduced-motion: reduce) { .content-section__fond-fixe { display: none; } } /* Content must sit above the blurred background layer. Target both editor (.content-section__container) and Astro (.toweb-container) wrappers */ .content-section--has-bg-image > .content-section__container, .content-section--has-bg-image > .toweb-container { position: relative; z-index: 1; } /* Video background —
UA default margin (1em 40px) */ } .gallery-block__item img { display: block; width: 100%; height: auto; object-fit: cover; } /* ⚠️ LA LÉGENDE « DESSOUS » ÉTAIT ROGNÉE. Le
d'une galerie est `.tw-media` ET contient sa légende. Or `.tw-media > img{height:100%}` (la brique), réaffirmé en (0,2,1) par `astro-preview.css` à la publication, fait remplir le figure par l'image. L'`overflow:hidden` coupait alors la légende, présente dans le HTML mais invisible (vu sur la galerie de lauyan.com, 2026-09-25). Seulement quand il y a une légende : sans elle, rien ne change. */ .gallery-block__item.tw-media:has(> .gallery-block__caption) > img { height: auto; } /* Rounded corners */ .gallery-block--rounded .gallery-block__item img { border-radius: 8px; } /* Aspect ratio variants - applied to IMAGE not container to preserve caption space */ .gallery-block--ratio-1-1 .gallery-block__item img { aspect-ratio: 1/1; } .gallery-block--ratio-4-3 .gallery-block__item img { aspect-ratio: 4/3; } .gallery-block--ratio-16-9 .gallery-block__item img { aspect-ratio: 16/9; } .gallery-block--ratio-3-2 .gallery-block__item img { aspect-ratio: 3/2; } .gallery-block--ratio-1-1 .gallery-block__item img, .gallery-block--ratio-4-3 .gallery-block__item img, .gallery-block--ratio-16-9 .gallery-block__item img, .gallery-block--ratio-3-2 .gallery-block__item img { width: 100%; height: auto; object-fit: cover; } /* Carrousel à UNE image par vue, au format libre : une image plus PETITE que la vue garde sa taille réelle, centrée, au lieu d'être étirée et floue — le diaporama de logos de partenaires (200 px) d'un site client V14 importé s'étalait sur toute la largeur de la page (24/09). Une grande image, elle, remplit toujours la vue (`max-width: 100%`). Un format imposé (ratio) garde son recadrage. */ .gallery-block--carousel[data-cols-desktop="1"]:not([class*="gallery-block--ratio-"]) .gallery-block__item img { width: auto; max-width: 100%; margin-inline: auto; } /* Legacy aspect ratio classes for compatibility */ .gallery-block--aspect-square .gallery-block__item img { aspect-ratio: 1/1; } .gallery-block--aspect-video .gallery-block__item img { aspect-ratio: 16/9; } .gallery-block--aspect-portrait .gallery-block__item img { aspect-ratio: 3/4; } .gallery-block--aspect-auto .gallery-block__item img { aspect-ratio: auto; } /* ───────────────────────────────────────────────────────────────────────────── GALLERY CAPTION STYLES (M-SIDEBAR.17) Mirrors image-block caption styles - keep in sync! ───────────────────────────────────────────────────────────────────────────── */ /* Caption Style: Below (default) - caption below the image */ /* Taille : × « Taille du texte » (Thème › Formes et rythme, `--tw-text-scale`, posé en ligne sur le canevas de l'éditeur et dans theme.css du site). Une taille fixe en rem laissait les légendes de galerie sourdes au réglage (HELO 75232) ; sans réglage, le facteur vaut 1 : rendu inchangé au pixel près. Garde : legende-taille-du-texte.test.ts. */ .gallery-block__caption { display: block; padding: 0.5rem; font-size: calc(0.75rem * var(--tw-text-scale, 1)); color: var(--tw-text); text-align: center; line-height: 1.4; } /* Caption Style: None - hide captions */ .gallery-block--caption-none .gallery-block__caption { display: none; } /* Caption Style: Overlay - caption overlaid at bottom with gradient */ .gallery-block--caption-overlay .gallery-block__item { position: relative; overflow: hidden; } .gallery-block--caption-overlay .gallery-block__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 0.75rem 0.5rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%); color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* Overlay caption + Shape combinations: apply shape to container so caption clips to it */ .gallery-block--caption-overlay.gallery-block--shape-rounded .gallery-block__item { border-radius: 1rem; } .gallery-block--caption-overlay.gallery-block--shape-rounded .gallery-block__item img { border-radius: 0; /* Container handles the radius */ } .gallery-block--caption-overlay.gallery-block--shape-rounded .gallery-block__caption { border-radius: 0 0 1rem 1rem; } .gallery-block--caption-overlay.gallery-block--shape-circular .gallery-block__item { border-radius: 50%; } .gallery-block--caption-overlay.gallery-block--shape-circular .gallery-block__item img { border-radius: 0; /* Container handles the radius */ } .gallery-block--caption-overlay.gallery-block--shape-circular .gallery-block__caption { /* Clip caption to bottom of circle */ border-radius: 0 0 50% 50% / 0 0 100% 100%; padding-top: 2rem; padding-bottom: 0.75rem; } /* Caption Style: Hover - caption appears on hover with blur effect */ .gallery-block--caption-hover .gallery-block__item { position: relative; overflow: hidden; } .gallery-block--caption-hover .gallery-block__item img { transition: filter 0.3s ease, transform 0.3s ease; } .gallery-block--caption-hover .gallery-block__caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.8); color: white; border-radius: 0.25rem; text-align: center; opacity: 0; transition: opacity 0.3s ease; max-width: 90%; font-size: calc(0.8rem * var(--tw-text-scale, 1)); /* suit « Taille du texte » (HELO 75232) */ font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hover caption + Shape combinations: apply shape to container */ .gallery-block--caption-hover.gallery-block--shape-rounded .gallery-block__item { border-radius: 1rem; } .gallery-block--caption-hover.gallery-block--shape-rounded .gallery-block__item img { border-radius: 0; } .gallery-block--caption-hover.gallery-block--shape-circular .gallery-block__item { border-radius: 50%; } .gallery-block--caption-hover.gallery-block--shape-circular .gallery-block__item img { border-radius: 0; } .gallery-block--caption-hover .gallery-block__item:hover img { filter: blur(2px) brightness(0.6); } .gallery-block--caption-hover .gallery-block__item:hover .gallery-block__caption { opacity: 1; } /* Lightbox hover effect */ .gallery-block--lightbox .gallery-block__item:hover img { transform: scale(1.02); cursor: zoom-in; } /* ───────────────────────────────────────────────────────────────────────────── MASONRY VARIANT True CSS columns-based masonry. Shared between editor (Pages) and preview. See masonry rules below (Phase 4A section) for the actual layout. ───────────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────────── CAROUSEL VARIANT Horizontal filmstrip - Astro renders with navigation and swipe ───────────────────────────────────────────────────────────────────────────── */ /* Gallery carousel = horizontal scroll strip. Number of visible items controlled by data-cols-* attributes. 1 column = full-width hero banner, N columns = multi-item strip. */ .gallery-block--carousel { --carousel-cols: 3; /* default, overridden by data-cols-* */ --carousel-gap: var(--collection-gap-h-medium, 1.5rem); display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--carousel-gap); row-gap: 0; } .gallery-block--carousel::-webkit-scrollbar { display: none; } /* Carousel horizontal gap from collection classes */ .gallery-block--carousel.collection--gap-h-none { --carousel-gap: 0px; gap: 0; } .gallery-block--carousel.collection--gap-h-small { --carousel-gap: var(--collection-gap-h-small, 0.75rem); gap: var(--carousel-gap); } .gallery-block--carousel.collection--gap-h-medium { --carousel-gap: var(--collection-gap-h-medium, 1.5rem); gap: var(--carousel-gap); } .gallery-block--carousel.collection--gap-h-large { --carousel-gap: var(--collection-gap-h-large, 2.5rem); gap: var(--carousel-gap); } /* Item sizing: each item = 100%/cols minus gap distribution */ .gallery-block--carousel .gallery-block__item { flex: 0 0 calc((100% - (var(--carousel-cols) - 1) * var(--carousel-gap)) / var(--carousel-cols)); scroll-snap-align: start; } /* 1 column = full-width slides, center-aligned snap */ .gallery-block--carousel[data-cols-desktop="1"] .gallery-block__item { scroll-snap-align: center; } /* Desktop columns (≥1024px) */ @media (min-width: 1024px) { .gallery-block--carousel[data-cols-desktop="1"] { --carousel-cols: 1; } .gallery-block--carousel[data-cols-desktop="2"] { --carousel-cols: 2; } .gallery-block--carousel[data-cols-desktop="3"] { --carousel-cols: 3; } .gallery-block--carousel[data-cols-desktop="4"] { --carousel-cols: 4; } .gallery-block--carousel[data-cols-desktop="5"] { --carousel-cols: 5; } .gallery-block--carousel[data-cols-desktop="6"] { --carousel-cols: 6; } } /* Tablet columns (768-1023px) */ @media (min-width: 768px) and (max-width: 1023px) { .gallery-block--carousel[data-cols-tablet="1"] { --carousel-cols: 1; } .gallery-block--carousel[data-cols-tablet="2"] { --carousel-cols: 2; } .gallery-block--carousel[data-cols-tablet="3"] { --carousel-cols: 3; } .gallery-block--carousel[data-cols-tablet="4"] { --carousel-cols: 4; } } /* Mobile columns (<768px) */ @media (max-width: 767px) { .gallery-block--carousel[data-cols-mobile="1"] { --carousel-cols: 1; } .gallery-block--carousel[data-cols-mobile="2"] { --carousel-cols: 2; } } .gallery-block--carousel .gallery-block__item img { width: 100%; height: auto; object-fit: cover; border-radius: inherit; } /* ⚠️ « AUTO » VEUT DIRE LE FORMAT DE L'IMAGE (#322). Il imposait du 4:3 recadré : les bannières larges du carrousel de lauyan.com perdaient ~20 % de chaque côté, alors qu'en « masonry » elles s'affichaient entières. Un format choisi (1:1, 4:3, 16:9, 3:2) recadre toujours, et c'est lui qu'on prend pour des vignettes toutes de même hauteur. */ .gallery-block--carousel:not([class*="gallery-block--ratio-"]) .gallery-block__item img { aspect-ratio: auto; } /* Carousel aspect ratio support */ .gallery-block--carousel.gallery-block--ratio-1-1 .gallery-block__item img { aspect-ratio: 1 / 1; } .gallery-block--carousel.gallery-block--ratio-4-3 .gallery-block__item img { aspect-ratio: 4 / 3; } .gallery-block--carousel.gallery-block--ratio-16-9 .gallery-block__item img { aspect-ratio: 16 / 9; } .gallery-block--carousel.gallery-block--ratio-3-2 .gallery-block__item img { aspect-ratio: 3 / 2; } /* Gallery carousel navigation wrapper (arrows outside scrollable area) */ .gallery-carousel-nav { position: relative; } .gallery-carousel-nav > .tw-carousel__prev, .gallery-carousel-nav > .tw-carousel__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); color: #1e293b; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: opacity 0.15s, background 0.15s; opacity: 0.7; } .gallery-carousel-nav > .tw-carousel__prev:hover, .gallery-carousel-nav > .tw-carousel__next:hover { opacity: 1; background: #fff; } .gallery-carousel-nav > .tw-carousel__prev { left: 0.5rem; } .gallery-carousel-nav > .tw-carousel__next { right: 0.5rem; } .gallery-carousel-nav > .tw-carousel__prev[disabled], .gallery-carousel-nav > .tw-carousel__next[disabled] { opacity: 0; pointer-events: none; } /* Hide gallery carousel arrows in editor */ .ProseMirror .gallery-carousel-nav > .tw-carousel__prev, .ProseMirror .gallery-carousel-nav > .tw-carousel__next { display: none; } /* ───────────────────────────────────────────────────────────────────────────── GALLERY SHAPE STYLES (M-SIDEBAR.16) Border-radius only - separate from frame effects to allow combinations ───────────────────────────────────────────────────────────────────────────── */ /* Shape: Rounded - rounded corners */ .gallery-block--shape-rounded .gallery-block__item img { border-radius: 1rem; } /* Shape: Circular - circle crop (best with 1:1 ratio) */ .gallery-block--shape-circular .gallery-block__item img { border-radius: 50%; } /* ───────────────────────────────────────────────────────────────────────────── GALLERY FRAME STYLES (M-SIDEBAR.17) Applied to gallery items, same styles as image-block but on __item level ───────────────────────────────────────────────────────────────────────────── */ /* Simple: just padding */ .gallery-block--frame-simple .gallery-block__item { padding: 0.5rem; } /* Rounded: rounded corners */ .gallery-block--frame-rounded .gallery-block__item img { border-radius: 0.75rem; } /* Simple Floating: shadow effect */ .gallery-block--frame-simple-floating .gallery-block__item img { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } /* Photo: white border + shadow */ .gallery-block--frame-photo .gallery-block__item img { border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } /* Photo Tilt: white border + shadow + slight rotation */ .gallery-block--frame-photo-tilt .gallery-block__item { transform: rotate(-2deg); } .gallery-block--frame-photo-tilt .gallery-block__item:nth-child(even) { transform: rotate(2deg); } .gallery-block--frame-photo-tilt .gallery-block__item img { border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } /* Perspective: 3D tilt effect */ .gallery-block--frame-perspective .gallery-block__item { transform: perspective(800px) rotateY(-5deg); } .gallery-block--frame-perspective .gallery-block__item:nth-child(even) { transform: perspective(800px) rotateY(5deg); } .gallery-block--frame-perspective .gallery-block__item img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } /* Polaroid: white border with extra bottom padding */ .gallery-block--frame-polaroid .gallery-block__item { background: rgba(255, 255, 255, 0.95); padding: 0.5rem 0.5rem 1.5rem 0.5rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } /* Border: simple thin border using section's text color */ .gallery-block--frame-border .gallery-block__item img { border: 1px solid color-mix(in srgb, var(--tw-text, currentColor) 25%, transparent); } /* Inset: deep "hole" effect with strong inner shadows */ /* Inset: deep "hole" effect with overlay pseudo-element */ .gallery-block--frame-inset .gallery-block__item { position: relative; } .gallery-block--frame-inset .gallery-block__item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; border-radius: inherit; /* Strong multi-layer inner shadow for deep "hole" effect */ box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.5), /* Top shadow - strongest */ inset 0 -4px 10px rgba(0, 0, 0, 0.2), /* Bottom subtle lift */ inset 8px 0 15px rgba(0, 0, 0, 0.3), /* Left shadow */ inset -8px 0 15px rgba(0, 0, 0, 0.3), /* Right shadow */ inset 0 2px 4px rgba(0, 0, 0, 0.4); /* Edge definition */ /* Dark border to define the "hole" edge */ border: 2px solid rgba(0, 0, 0, 0.4); } /* Inset + Shape combinations for gallery */ .gallery-block--shape-rounded.gallery-block--frame-inset .gallery-block__item::after { border-radius: 0.5rem; } .gallery-block--shape-circular.gallery-block--frame-inset .gallery-block__item::after { border-radius: 50%; } /* Circular: circular crop (works best with square images) */ .gallery-block--frame-circular .gallery-block__item { padding: 0.5rem; } .gallery-block--frame-circular .gallery-block__item img { border-radius: 50%; aspect-ratio: 1/1; object-fit: cover; } /* Vintage: sepia tone with contrast (color filter) */ .gallery-block--frame-vintage .gallery-block__item img { filter: sepia(0.3) contrast(1.1) saturate(0.9); } /* ───────────────────────────────────────────────────────────────────────────── GALLERY SHADOW OVERFLOW FIX Frames with shadows need space to render without clipping ───────────────────────────────────────────────────────────────────────────── */ /* Add padding to gallery container for shadow frames */ .gallery-block--frame-simple-floating, .gallery-block--frame-photo, .gallery-block--frame-photo-tilt, .gallery-block--frame-perspective, .gallery-block--frame-polaroid { padding: 1.5rem; } /* Allow overflow visible on items for shadow frames (only when no shape applied) */ .gallery-block--frame-simple-floating:not(.gallery-block--shape-rounded):not(.gallery-block--shape-circular) .gallery-block__item, .gallery-block--frame-photo:not(.gallery-block--shape-rounded):not(.gallery-block--shape-circular) .gallery-block__item, .gallery-block--frame-photo-tilt:not(.gallery-block--shape-rounded):not(.gallery-block--shape-circular) .gallery-block__item, .gallery-block--frame-perspective:not(.gallery-block--shape-rounded):not(.gallery-block--shape-circular) .gallery-block__item, .gallery-block--frame-polaroid:not(.gallery-block--shape-rounded):not(.gallery-block--shape-circular) .gallery-block__item { overflow: visible; } /* ───────────────────────────────────────────────────────────────────────────── GALLERY SHAPE + CONTAINER FRAME COMBINATIONS When shapes are combined with container-based frames (polaroid), apply shape to container and clip image to fit ───────────────────────────────────────────────────────────────────────────── */ /* Rounded + Polaroid: subtle rounded frame (matching /image style) */ .gallery-block--shape-rounded.gallery-block--frame-polaroid .gallery-block__item { border-radius: 0.5rem 0.5rem 0.375rem 0.375rem; } .gallery-block--shape-rounded.gallery-block--frame-polaroid .gallery-block__item img { /* Top corners slightly rounded, bottom straight (polaroid style) */ border-radius: 0.25rem 0.25rem 0 0; } /* Circular + Polaroid: polaroid frame with circular image inside */ .gallery-block--shape-circular.gallery-block--frame-polaroid .gallery-block__item { /* Keep polaroid asymmetric padding (more at bottom) */ border-radius: 50% 50% 45% 45% / 45% 45% 40% 40%; } .gallery-block--shape-circular.gallery-block--frame-polaroid .gallery-block__item img { border-radius: 50%; aspect-ratio: 1/1; } /* ───────────────────────────────────────────────────────────────────────────── SHAPE + SHADOW FRAME COMBINATIONS Move shadow to container so it's not clipped by overflow:hidden ───────────────────────────────────────────────────────────────────────────── */ /* Rounded + Photo: border and shadow on container, image clips to shape */ .gallery-block--shape-rounded.gallery-block--frame-photo .gallery-block__item { border-radius: 1rem; border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-rounded.gallery-block--frame-photo .gallery-block__item img { border: none; border-radius: 0; box-shadow: none; } /* Circular + Photo: border and shadow on container, image clips to shape */ .gallery-block--shape-circular.gallery-block--frame-photo .gallery-block__item { border-radius: 50%; border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-circular.gallery-block--frame-photo .gallery-block__item img { border: none; border-radius: 0; box-shadow: none; } /* Rounded + Photo Tilt: border and shadow on container */ .gallery-block--shape-rounded.gallery-block--frame-photo-tilt .gallery-block__item { border-radius: 1rem; border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-rounded.gallery-block--frame-photo-tilt .gallery-block__item img { border: none; border-radius: 0; box-shadow: none; } /* Circular + Photo Tilt: border and shadow on container */ .gallery-block--shape-circular.gallery-block--frame-photo-tilt .gallery-block__item { border-radius: 50%; border: 0.35em solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-circular.gallery-block--frame-photo-tilt .gallery-block__item img { border: none; border-radius: 0; box-shadow: none; } /* Rounded + Simple Floating: shadow on container */ .gallery-block--shape-rounded.gallery-block--frame-simple-floating .gallery-block__item { border-radius: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-rounded.gallery-block--frame-simple-floating .gallery-block__item img { border-radius: 0; box-shadow: none; } /* Circular + Simple Floating: shadow on container */ .gallery-block--shape-circular.gallery-block--frame-simple-floating .gallery-block__item { border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } .gallery-block--shape-circular.gallery-block--frame-simple-floating .gallery-block__item img { border-radius: 0; box-shadow: none; } /* Rounded + Perspective: shadow on container */ .gallery-block--shape-rounded.gallery-block--frame-perspective .gallery-block__item { border-radius: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); overflow: hidden; } .gallery-block--shape-rounded.gallery-block--frame-perspective .gallery-block__item img { border-radius: 0; box-shadow: none; } /* Circular + Perspective: shadow on container */ .gallery-block--shape-circular.gallery-block--frame-perspective .gallery-block__item { border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); overflow: hidden; } .gallery-block--shape-circular.gallery-block--frame-perspective .gallery-block__item img { border-radius: 0; box-shadow: none; } /* Selection state for gallery block */ .gallery-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent, #3b82f6); outline-offset: 4px; border-radius: 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════════ TABLE BLOCK Per EDITOR-BLOCKS-CONTRACT.md §TABLE ═══════════════════════════════════════════════════════════════════════════ */ .table-block, table { width: 100%; border-collapse: collapse; margin: 1rem 0; } .table-block th, .table-block td, th, td { padding: 0.75rem 1rem; text-align: start; border: 1px solid var(--tw-border); } .table-block th, th { background: var(--tw-surface); color: var(--tw-text-heading); font-weight: 600; } .table-block td, td { color: var(--tw-text); } /* Striped rows */ .table-block--striped tbody tr:nth-child(even), table tbody tr:nth-child(even) { background: var(--tw-surface); } /* ─────────────────────────────────────────────────────────────────────────── TOWeb Table - Cell Padding Variants Classes are added to tableWrapper via decorations, so target table inside ─────────────────────────────────────────────────────────────────────────── */ /* ── Tableaux sur petit écran (#319) ──────────────────────────────────────── Par défaut, le tableau DÉFILE horizontalement dans sa largeur : un tableau à 4 colonnes n'en montrait que 2 sur téléphone, sans moyen de voir la suite. C'est le standard (Gutenberg, Squarespace, Notion), jamais faux. Avec « une fiche par ligne » (l'option « Responsive » de V14), chaque ligne devient un bloc et chaque valeur est précédée du nom de sa colonne (`data-label`, posé par le générateur depuis la ligne d'en-tête). */ .toweb-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } @media (max-width: 640px) { .toweb-table--mobile-stack table, .toweb-table--mobile-stack tbody, .toweb-table--mobile-stack tr, .toweb-table--mobile-stack td, .toweb-table--mobile-stack th { display: block; width: 100%; } /* La ligne d'en-tête a donné ses noms : elle n'a plus à s'afficher. */ .toweb-table--mobile-stack tr:first-child { display: none; } .toweb-table--mobile-stack tr { border: 1px solid var(--tw-rule, #e2e8f0); border-radius: var(--tw-radius-card, 0.5rem); margin-bottom: 0.75rem; overflow: hidden; } .toweb-table--mobile-stack td[data-label] { display: flex; justify-content: space-between; gap: 1rem; text-align: end; } .toweb-table--mobile-stack td[data-label]::before { content: attr(data-label); font-weight: 600; text-align: start; } /* Une première colonne sans nom (le nom de la ligne) devient le titre de la fiche. */ .toweb-table--mobile-stack td:first-child:not([data-label]) { font-weight: 600; background: var(--tw-surface-2, rgba(0, 0, 0, 0.03)); } } /* Compact padding */ .toweb-table--padding-compact th, .toweb-table--padding-compact td, .toweb-table--padding-compact table th, .toweb-table--padding-compact table td { padding: 0.375rem 0.5rem !important; } /* Normal padding (default) */ .toweb-table--padding-normal th, .toweb-table--padding-normal td, .toweb-table--padding-normal table th, .toweb-table--padding-normal table td { padding: 0.75rem 1rem !important; } /* Spacious padding */ .toweb-table--padding-spacious th, .toweb-table--padding-spacious td, .toweb-table--padding-spacious table th, .toweb-table--padding-spacious table td { padding: 1rem 1.25rem !important; } /* ─────────────────────────────────────────────────────────────────────────── TOWeb Table - Header Styling Classes are added to tableWrapper via decorations, so target table inside IMPORTANT: Use high specificity to override TipTap's default .ProseMirror table th ─────────────────────────────────────────────────────────────────────────── */ /* When hasHeader is TRUE, first row has header styling (emphasized) */ .ProseMirror .toweb-table--has-header table th, .toweb-table--has-header table th, .tableWrapper.toweb-table--has-header table th { background: var(--surface-secondary, rgba(0,0,0,0.05)) !important; color: var(--tw-text-heading, inherit) !important; font-weight: 600 !important; } /* When hasHeader is FALSE, first row looks like regular cells (no emphasis) */ /* High specificity needed to override .ProseMirror table th defaults */ .ProseMirror .toweb-table:not(.toweb-table--has-header) table th, .ProseMirror .tableWrapper:not(.toweb-table--has-header) table th, .tableWrapper[data-has-header="false"] table th { background: transparent !important; background-color: transparent !important; color: inherit !important; font-weight: normal !important; } /* ─────────────────────────────────────────────────────────────────────────── TOWeb Table - Selection/Focus State (via ProseMirror decorations) Classes are added to tableWrapper via decorations ─────────────────────────────────────────────────────────────────────────── */ /* Focus state for table block - cursor is inside a cell */ /* Uses double-outline pattern for visibility on any background */ .toweb-table--focused { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px var(--editor-focus-color, #3b82f6); border-radius: 0.5rem; } /* NodeSelection state (direct selection of table node) */ /* Uses double-outline pattern for visibility on any background */ .toweb-table.ProseMirror-selectednode, table.ProseMirror-selectednode { outline: 2px solid white; outline-offset: 2px; box-shadow: 0 0 0 4px var(--editor-focus-color, #3b82f6); border-radius: 0.5rem; } /* NOTE: Tables do NOT support animations because CSS transforms don't work on display:table */ /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY - Headings, paragraphs, links DNA-first (contrat §6 « Règle palette » — tue le bug texte-invisible-sur-bande) : le texte BRUT (tapé en TipTap, sans classe brique) suit les tokens C de la palette de section/carte (--tw-text-heading / --tw-text), re-pointés par [data-palette] et re-localisés par .tw-surface[card]. Les éléments à classe brique (`tw-*`) portent LEUR couleur via leur propre token → exclus ici (sinon .content-section p écraserait .tw-lead/.tw-quote p par spécificité). ═══════════════════════════════════════════════════════════════════════════ */ .content-section :is(h1, h2, h3, h4, h5, h6):not([class*="tw-"]) { color: var(--tw-text-heading, inherit); /* Free-text headings (typed via TipTap, no tw- class) follow the DNA heading treatment like the .tw-h* bricks do: signature font + derived weight scale. Without this they fell back to the browser default (700) instead of the DNA's --tw-weight-heading (e.g. K = 900 black). Size stays as-is (set elsewhere). */ font-family: var(--tw-font-heading, inherit); font-weight: var(--tw-weight-heading, 700); letter-spacing: var(--tw-tracking-heading, normal); } .content-section h2:not([class*="tw-"]) { font-weight: clamp(400, calc(var(--tw-weight-heading, 700) - var(--tw-weight-step, 0) * 1), 900); } .content-section :is(h3, h4):not([class*="tw-"]) { font-weight: clamp(400, calc(var(--tw-weight-heading, 700) - var(--tw-weight-step, 0) * 2), 900); } .content-section :is(h5, h6):not([class*="tw-"]) { font-weight: clamp(400, calc(var(--tw-weight-heading, 700) - var(--tw-weight-step, 0) * 3), 900); } /* Issue 4 (Yann 2026-06-12) : un mot mis en italique (Cmd+I) dans un titre LIBRE = l'ACCENT du DNA — gradient violet→cyan (K), italique terracotta (C)… — exactement comme `.tw-h1 em` du spécimen, via les mêmes tokens --tw-em-*. Le DNA décide si l'accent est un vrai italique (--tw-em-style:italic) ou un gradient droit (--tw-em-gradient + --tw-em-fill:transparent). TipTap rend l'italique en ; on couvre par sécurité. → CMD+I devient « accentuer ce mot façon DNA ». */ .content-section :is(h1, h2, h3, h4):not([class*="tw-"]) :is(em, i) { font-style: var(--tw-em-style, italic); color: var(--tw-em-color, inherit); font-weight: inherit; background-image: var(--tw-em-gradient, none); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--tw-em-fill, var(--tw-em-color, currentColor)); } .content-section :is(p, li, td):not([class*="tw-"]) { color: var(--tw-text, inherit); } /* M-THEME-SCR.6: Text elements spacing is now handled by the Stack Pattern defined in the CONTENT SPACING section above. The * + * selector applies margin-top to all elements except the first, creating uniform spacing between headings, paragraphs, lists, and atom blocks alike. */ /* SoT: the ONE section-link colour rule (editor + preview + publish all load blocks-shared.css). The publish generator's .toweb-section a copy was removed in favour of this; the var(--tw-accent) fallback preserves its behaviour. */ /* Les briques-lien (.tw-icon social/team, .tw-cta-link, .tw-nav-link) gèrent LEUR couleur via leurs tokens --tw-* → exclues ici (sinon le bleu lien-section écrase --tw-icon-color : icônes sociales toutes bleues). [class*="button"] couvre .tw-button. */ /* ⚠️ LE CHROME EST EXCLU — 178 `!important` et 100 `-webkit-text-fill-color` en dépendaient, dans 23 feuilles de DNA sur 46. Cette règle est en spécificité (0,6,1) ; une règle de DNA plafonne à (0,2,1). Les liens de pied et d'en-tête étant des dans une `.content-section`, elle leur imposait `--tw-accent`, et aucune feuille ne pouvait reprendre la main sur `color`. Elles ont donc gagné par un AUTRE chemin : `-webkit-text-fill-color`, qui peint le texte quelle que soit la spécificité de `color`. Mesuré : retirer ce fill de dna-western fait virer ses liens de pied au rouille de l'accent. Le `!important` qui l'accompagnait, lui, ne servait à rien — il renforçait un `color` déjà battu, pendant que le fill faisait le travail. C'est ainsi qu'un contournement se propage : le premier auteur mesure, les suivants recopient. Le chrome a ses propres règles pilotées par jetons, plus bas dans ce fichier. L'exclure ici, c'est rendre `color` de nouveau opérant pour les DNAs. */ /* `--tw-prose-link` : la bande `bold` le re-pointe sur son texte (blocks-base.css, filet §6) — l'accent n'y est jamais re-pointé, un lien y était donc de la couleur du fond (« WHAT IS IT ? » de rainbowio, import V14 du 2026-09-24). */ .content-section a:not(.cta-button):not([class*="button"]):not(.tw-icon):not(.tw-cta-link):not(.tw-nav-link):not([class*="site-footer-block__"]):not([class*="site-header-block__"]):not(.content-section__suite):not(.tag):not([class*="__tag"]) { color: var(--tw-prose-link, var(--tw-accent)); } .content-section a:not(.cta-button):not([class*="button"]):not(.tw-icon):not(.tw-cta-link):not(.tw-nav-link):not([class*="site-footer-block__"]):not([class*="site-header-block__"]):not(.content-section__suite):not(.tag):not([class*="__tag"]):hover { opacity: 0.8; } /* Un lien DANS le texte courant se voit autrement que par sa couleur (WCAG 1.4.1) : sur une bande `bold`, il prend la couleur du texte (filet ci-dessus) et ne se distinguait plus du tout — « avec un lien et du texte courant » dans les 48 DNA (audit du 2026-09-28). Soulignement fin, décalé, à la couleur du lien. */ /* La documentation n'est pas une `.content-section` : ses liens dans le texte restaient nus, à 1,7:1 du texte courant (axe `link-in-text-block`, audit WCAG de lauyan.com du 2026-09-29). Même règle. */ :is(.content-section, .doc-article__contenu) :is(p, li, dd, td, th, blockquote, figcaption) > a:not([class]) { text-decoration-line: underline; text-decoration-thickness: max(1px, 0.07em); text-underline-offset: 0.2em; } /* ═══════════════════════════════════════════════════════════════════════════ BLOCKQUOTE ═══════════════════════════════════════════════════════════════════════════ */ /* Scope to direct-child blockquotes only (free-text TipTap content). Atom blocks like testimonial-block use
with BEM classes inside nested wrappers — this rule must NOT affect those. */ .content-section__container > blockquote, .toweb-container > blockquote { border-inline-start: 4px solid var(--tw-accent); padding-inline-start: 1rem; margin: 1rem 0; font-style: italic; color: var(--tw-text); opacity: 0.9; } /* ═══════════════════════════════════════════════════════════════════════════ FEATURES BLOCK - Grid of Features with Icons Per EDITOR-BLOCKS-CONTRACT.md §5.6 and ATOM-BLOCK-CONTRACT.md §6 M04quater.14.b: featuresBlock ═══════════════════════════════════════════════════════════════════════════ */ /* RÉ-ÉCRIT BRIQUES (DNA-BLOCKS-SPEC §3.4) : le features-block est porté par la couche briques (bricks/blocks-base.css : conteneur `.features-block .tw-grid`, item `.tw-surface`, `.tw-icon`/`.tw-media`/`.tw-h4`/`.tw-body`). Tout le CSS features legacy est retiré ci-dessous. (La règle de gap des AUTRES blocs de collection juste en dessous reste — ils ne sont pas encore migrés.) */ /* R.6 strip (Yann 2026-06-05): every collection block takes its grid gap from the DNA (--tw-gap) instead of the removed per-block Gap H/V knob. Fallback = the former 'medium' default → default/un-skinned projects unchanged. These containers had NO base gap (relied solely on the emitted collection--gap classes), so this rule is what keeps them from collapsing once we stop emitting those classes. */ /* (stats-block retiré : migré sur .tw-grid → gap = --tw-gap.) */ /* (timeline-block retiré : migré sur brique DNA — gap via --tw-gap dans blocks-base.css.) */ /* (faq-block retiré : migré sur brique DNA — layout dans blocks-base.css ; gap via flex/grid.) */ /* (team-block retiré : migré sur brique DNA — .tw-grid sur .team-block__grid, gap via --tw-gap.) */ /* (CSS features legacy retiré — DOM brique dans blocks-base.css ; placeholder + badge de variante déplacés dans blocks-editor.css. Sélection ci-dessous = éditeur.) */ /* Selection state for features block */ .features-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent, #3b82f6); outline-offset: 4px; border-radius: 0.5rem; } /* (CSS columns-block legacy retiré — layout dans blocks-base.css : .columns-block flex + gap=--tw-gap, .column--{33|50|66} flex, valign, empilement mobile. PAS de brique — compose les enfants.) */ /* (CSS team-block legacy retiré — DOM brique dans blocks-base.css : .tw-grid sur .team-block__grid, item .tw-surface, .tw-media--avatar/square/rounded, .tw-icon socials ; gap=--tw-gap ; affordances éditeur → blocks-editor.css.) */ /* (CSS testimonial-block legacy retiré — DOM brique dans blocks-base.css ; placeholder/badge → blocks-editor.css. Sélection ci-dessous = éditeur.) */ /* Selection state */ .testimonial-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent, #3b82f6); outline-offset: 4px; border-radius: 0.5rem; } /* (CSS pricing-block legacy retiré — DOM brique dans blocks-base.css ; placeholder → blocks-editor.css. Sélection ci-dessous = éditeur.) */ /* Selection state */ .pricing-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent); outline-offset: 4px; border-radius: 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════════ STATS BLOCK - M04quater.14.f Key figures/metrics with counter animation All colors MUST use section pattern CSS variables for proper theme support. Gap is controlled via collection--gap-* classes applied by the extension. ═══════════════════════════════════════════════════════════════════════════ */ /* (CSS stats legacy retiré — DOM brique dans blocks-base.css ; placeholder déplacé dans blocks-editor.css. Sélection ci-dessous = éditeur.) */ /* Selection state */ .stats-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent); outline-offset: 4px; border-radius: 0.5rem; } /* TIMELINE BLOCK — retiré (migré sur brique DNA — blocks-base.css §TIMELINE). var(--tw-accent) → --tw-rule-strong (connecteur) + .tw-icon (marker). Placeholder + sélection → blocks-editor.css. */ /* ═══════════════════════════════════════════════════════════════════════════ SPACER BLOCK - Vertical Spacing Per M04quater.14.g-bis: Explicit vertical spacing between blocks. The spacerBlock is a simple empty block with configurable height. It provides explicit spacing control when default margins aren't enough. ═══════════════════════════════════════════════════════════════════════════ */ /* spacer-block — espacement vertical explicite (layout pur, pas de brique — DNA-BLOCKS-SPEC §3.1). Hauteur = classe --{size} OU inline `height` (custom). Les affordances ÉDITEUR (zone pointillée, badge "ESPACEUR", sélection) vivent dans blocks-editor.css — surtout PAS ici : blocks-shared.css est copié au publish, elles s'afficheraient sur le site publié. */ .spacer-block { width: 100%; position: relative; } /* Predefined height classes */ .spacer-block--small { height: 1rem; } /* 16px */ .spacer-block--medium { height: 2rem; } /* 32px */ .spacer-block--large { height: 4rem; } /* 64px */ .spacer-block--xlarge { height: 6rem; } /* 96px */ .spacer-block--2xlarge { height: 8rem; } /* 128px */ .spacer-block--3xlarge { height: 12rem; } /* 192px */ /* ═══════════════════════════════════════════════════════════════════════════ MAP BLOCK - Embedded Maps (Google Maps / OpenStreetMap) Per M04quater.14.h: Interactive map display with configurable location. In the editor, displays a LIVE map via iframe (OpenStreetMap free, Google Maps with API key). ═══════════════════════════════════════════════════════════════════════════ */ .map-block { /* radius / overflow / position / shadow come from the .tw-media brick */ width: 100%; background: var(--tw-surface, rgba(128, 128, 128, 0.05)); border: 1px solid var(--tw-border, rgba(128, 128, 128, 0.2)); /* le map a une hauteur fixe + bordure → ce qui suit se colle sinon (Yann 2026-06-25). On rétablit le rythme de bloc dessous (les autres médias sont en flux avec du texte). */ margin-bottom: var(--theme-block-gap, 1.5rem); } /* Live map iframe */ .map-block__iframe { display: block; width: 100%; height: 100%; border: 0; } /* Dans l'ÉDITEUR seulement : le cadre ne capte pas les clics (le double-clic ouvre les réglages). Cette feuille est aussi celle du site publié : sans la portée `.ProseMirror`, la carte en ligne était figée, ni molette ni glisser (HELO 75119). */ .ProseMirror .map-block__iframe { pointer-events: none; } /* Provider badge */ .map-block__provider-badge { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.125rem 0.375rem; background: var(--tw-accent, #3b82f6); color: var(--tw-on-accent, #ffffff); border-radius: 0.25rem; text-transform: uppercase; z-index: 10; pointer-events: none; } /* Selection state */ .map-block.ProseMirror-selectednode { outline: 2px solid var(--tw-accent, #3b82f6); outline-offset: 2px; border-radius: 0.5rem; } /* Keep placeholder styles for fallback/Google Maps without API key */ .map-block__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 100%; min-height: 200px; padding: 2rem; text-align: center; color: var(--tw-text, rgba(128, 128, 128, 0.8)); } .map-block__placeholder-icon { width: 48px; height: 48px; opacity: 0.7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .map-block__placeholder-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--tw-text-heading, currentColor); } .map-block__placeholder-address { margin: 0; font-size: 0.875rem; color: var(--tw-text, rgba(128, 128, 128, 0.8)); max-width: 400px; word-break: break-word; } .map-block__placeholder-coords { margin: 0; font-size: 0.75rem; font-family: monospace; color: var(--tw-text, rgba(128, 128, 128, 0.6)); } .map-block__placeholder-hint { margin: 0; margin-top: 0.5rem; font-size: 0.75rem; color: var(--tw-text, rgba(128, 128, 128, 0.5)); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ FORM BLOCK - Contact form with configurable fields ═══════════════════════════════════════════════════════════════════════════ Per M04quater.14.i: Contact form with customizable fields. In the editor, displays a preview of the form (disabled inputs). ═══════════════════════════════════════════════════════════════════════════ */ .form-block { width: 100%; position: relative; } /* Variant: card - with background and shadow */ .form-block--card { background: var(--tw-surface, white); border: 1px solid var(--tw-border, rgba(128, 128, 128, 0.2)); /* Les formes et l'ombre du DNA (rayon et ombre de CARTE), plus un 8 px et une ombre grise identiques dans les 48 (audit du 2026-09-28). */ border-radius: var(--tw-radius-card, 0.5rem); padding: 1.5rem; box-shadow: var(--tw-shadow-card, 0 2px 8px rgba(0, 0, 0, 0.08)); color: var(--tw-on-surface, inherit); } /* Form container */ .form-block__form { display: flex; flex-direction: column; gap: 1rem; } /* ─── Inline layout (compact email-capture / newsletter signup) ────────────── Fields row + submit button on ONE horizontal row; the input(s) grow (flex:1), the submit sits inline at the end. Wraps to stacked on mobile. Pure layout switch — reuses every field/validation/alpine/success-error surface as-is. A form whose only field is {email} renders as the email-capture widget. */ .form-block--inline .form-block__form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; } /* The fields container grows and lays its fields in a row. */ .form-block--inline .form-block__fields { flex: 1 1 auto; flex-wrap: nowrap; align-items: flex-end; gap: 0.5rem; min-width: 0; } /* Each field grows to fill the row; the editor's "/ placeholder:" row + half width are neutralised so the inline pattern stays a single compact line. */ .form-block--inline .form-block__field { flex: 1 1 0; min-width: 0; } .form-block--inline .form-block__field--half { flex: 1 1 0; } /* Submit sits inline at the end of the row (not full-width / left-aligned). */ .form-block--inline .form-block__submit { align-self: flex-end; flex: 0 0 auto; white-space: nowrap; } /* In the published form the submit is wrapped in its own div (x-show="!sent"); keep that wrapper inline so the button rides on the same row as the fields. */ .form-block--inline .form-block__form > div:not(.form-block__fields):not(.form-block__success):not(.form-block__error) { flex: 0 0 auto; } /* Mobile: fall back to the stacked layout (fields + button stack full-width). */ @media (max-width: 640px) { .form-block--inline .form-block__form, .form-block--inline .form-block__fields { flex-direction: column; flex-wrap: wrap; align-items: stretch; } .form-block--inline .form-block__field, .form-block--inline .form-block__field--half { flex: 0 0 100%; } .form-block--inline .form-block__submit { align-self: flex-start; } } /* Title and description */ .form-block__title { margin: 0 0 0.25rem 0; font-size: 1.25rem; font-weight: 600; color: var(--tw-text-heading, currentColor); } .form-block__description { margin: 0 0 0.5rem 0; font-size: 0.875rem; color: var(--tw-text, rgba(128, 128, 128, 0.8)); } /* Fields container */ .form-block__fields { display: flex; flex-wrap: wrap; gap: 1rem; } /* Individual field */ .form-block__field { display: flex; flex-direction: column; gap: 0.375rem; } .form-block__field--full { flex: 0 0 100%; } .form-block__field--half { flex: 0 0 calc(50% - 0.5rem); } /* Responsive: full width on mobile */ @media (max-width: 640px) { .form-block__field--half { flex: 0 0 100%; } } /* Field label */ .form-block__label { font-size: 0.875rem; font-weight: 500; color: var(--tw-text, currentColor); } /* Checkbox label */ .form-block__checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--tw-text, currentColor); cursor: not-allowed; } .form-block__checkbox-label input { width: 1rem; height: 1rem; margin: 0; cursor: not-allowed; } /* Radio button group */ .form-block__radio-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-block__radio-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--tw-text, currentColor); cursor: not-allowed; } .form-block__radio-label input { width: 1rem; height: 1rem; margin: 0; cursor: not-allowed; accent-color: var(--tw-accent, #3b82f6); } /* Input styles */ /* Champs (input/textarea/select) = brique .tw-field — le DNA possède leur look (DOM-SPEC §12). Plus de styling .form-block__input ici. */ /* ─── Champ fichier (.tw-file) ───────────────────────────────────────────── Le contrôle natif est laid et non stylable ; on le rend INVISIBLE mais présent (opacity 0 par-dessus la coquille, pas display:none) pour garder le clavier, le lecteur d'écran et le clic n'importe où dans la coquille. La coquille reprend .tw-field (bordure, rayon, focus) et le bouton les jetons du bouton du thème — ainsi le champ change de look avec le DNA comme les autres champs. Mobile-first : le bouton et le nom s'empilent, la ligne s'étale dès 480px. */ .tw-file { position: relative; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.45rem; background: var(--tw-field-bg, var(--tw-surface, #fff)); color: var(--tw-on-surface, inherit); border: var(--tw-border-width, 1px) dashed var(--tw-field-border, var(--tw-border, rgba(0,0,0,.25))); border-radius: var(--tw-radius-field, var(--tw-radius-button, 8px)); transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; } @media (min-width: 480px) { .tw-file { flex-direction: row; align-items: center; } } .tw-file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; /* Safari : sinon le nom natif déborde à droite */ } .tw-file__input:disabled { cursor: not-allowed; } .tw-file:focus-within { border-color: var(--tw-accent, #888); box-shadow: 0 0 0 3px var(--tw-accent-soft, rgba(0,0,0,.08)); } .tw-file--filled { border-style: solid; } .tw-file--invalid { border-color: var(--tw-danger, #dc2626); } .tw-file__button { flex: 0 0 auto; padding: 0.45rem 0.9rem; border-radius: var(--tw-radius-button, 8px); font-size: 0.875rem; font-weight: var(--tw-btn-weight, 500); color: var(--tw-btn-text, var(--tw-on-accent, #fff)); background: var(--tw-btn-bg, var(--tw-accent, #3b82f6)); border: var(--tw-btn-border, none); text-align: center; pointer-events: none; /* le clic va au qui recouvre tout */ } .tw-file__name { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; color: var(--tw-text-muted, #777); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .tw-file--filled .tw-file__name { color: var(--tw-text, currentColor); } .tw-file__clear { position: relative; z-index: 1; /* au-dessus de l'input invisible : ce bouton, lui, se clique */ flex: 0 0 auto; align-self: flex-end; width: 1.75rem; height: 1.75rem; border: none; border-radius: 999px; background: var(--tw-accent-soft, rgba(0,0,0,.08)); color: var(--tw-text, currentColor); font-size: 1.1rem; line-height: 1; cursor: pointer; } @media (min-width: 480px) { .tw-file__clear { align-self: center; } } .tw-file__hint { margin: 0; font-size: 0.75rem; color: var(--tw-text-muted, #777); } .tw-file__error { margin: 0; font-size: 0.8125rem; color: var(--tw-danger, #dc2626); } /* Bandeaux succès / erreur du formulaire (le x-text de l'erreur n'avait aucun style : un message rouge sans rouge, c'est un message qu'on ne voit pas). */ .form-block__requis { margin-inline-start: 0.2em; font-weight: 600; } .form-block__legende-requis { margin: 0; font-size: 0.8125rem; color: var(--tw-text-muted, currentColor); } .form-block__legende-requis > span { font-weight: 600; } /* Les régions annoncées (role="status" / "alert") suivent le
: leur message garde l'écart qu'il avait dans la colonne du formulaire. */ .form-block__statut > * { margin-top: 1rem; } .form-block__success:focus { outline: none; } .form-block__success:focus-visible { outline: 2px solid var(--tw-accent, currentColor); outline-offset: 2px; } .form-block__success { padding: 0.75rem 1rem; border-radius: var(--tw-radius-field, var(--tw-radius-button, 8px)); background: var(--tw-accent-soft, rgba(0,0,0,.06)); color: var(--tw-text, currentColor); font-size: 0.9375rem; } .form-block__error { padding: 0.75rem 1rem; border-radius: var(--tw-radius-field, var(--tw-radius-button, 8px)); border-inline-start: 3px solid var(--tw-danger, #dc2626); background: rgba(220, 38, 38, 0.06); color: var(--tw-danger, #dc2626); font-size: 0.875rem; } /* Submit button - M-THEME-SCR.5: Uses theme CSS variables */ .form-block__submit { align-self: flex-start; /* M-THEME-SCR.5: Use theme button padding/radius/shadow/colors */ padding: 0.625rem 1.25rem; border-radius: var(--tw-radius-button, 8px); box-shadow: var(--tw-shadow-button, none); font-size: 0.875rem; font-weight: 500; /* M-THEME-SCR.5: Uses effective primary button colors (respects outline mode) */ color: var(--tw-btn-text, var(--tw-on-accent, #ffffff)); background: var(--tw-btn-bg, var(--tw-accent, #3b82f6)); border: var(--tw-btn-border, none); /* ⚠️ La police du site : un