/* ========================================================================== Céline Théret — sections construites en MODULES WPBakery -------------------------------------------------------------------------- Complément de ct-refonte.css, qui style les blocs Raw HTML. Ici le contenu est éditable par Céline dans le page builder : chaque texte est un module, chaque titre un `vc_custom_heading`, chaque lien un `vc_button`, chaque photo un fond de row ou de colonne. Le style vient de ce fichier, jamais des réglages de WPBakery. -------------------------------------------------------------------------- LA STRUCTURE RÉELLE D'UNCODE — relevée sur le staging le 26/08/2026 div.vc_row.row-container ← el_class de la row atterrit ici div.row.limit-width.row-parent ← le cadre : max-width + padding div.wpb_row.row-inner ← le CONTENEUR DES COLONNES div.wpb_column.col-lg-N ← el_class de la colonne div.uncol div.uncoltable ← display: table div.uncell ← display: table-cell div.uncont ← les modules sont ici Trois conséquences, et trois erreurs corrigées le 26/08 : 1. Les colonnes ne sont PAS enfants de `.row` mais de `.row-inner`. Poser `display:grid` sur `.row` ne range donc rien : la grille n'a qu'un seul enfant. Toutes les grilles et flexbox de mise en page vont désormais sur `.row-inner`. 2. `.row-inner` et les colonnes sont en `display: table` / `table-cell`. Forcer `display:flex` sur une colonne la sort du tableau : elle passe en bloc et les colonnes s'empilent. Pour caler un contenu en bas, on utilise `vertical-align: bottom` sur `.uncell`, pas une flexbox. 3. `.row-inner` est en `position: relative`. Un module en `position: absolute` se cale donc sur lui, pas sur la section. Pour la hero, toute la chaîne est remise à `static`. -------------------------------------------------------------------------- DEUX AUTRES CHOSES QU'UNCODE FAIT AUTREMENT `vc_single_image` en lien externe ne rend rien : Uncode réécrit ce module et affiche « Media not available ». Les photos passent donc par le FOND de la row ou de la colonne — ce qui correspond d'ailleurs aux maquettes, où toutes ces images sont des `background-image`. `vc_button` pose `el_class` sur la balise `` elle-même, et n'écrit pas le libellé dans le lien : il ne vit que dans l'attribut `title`. D'où la règle `:empty::after { content: attr(title) }` plus bas. -------------------------------------------------------------------------- MÉTHODE — toutes les valeurs typographiques sont MESURÉES sur le rendu de la maquette d'origine, jamais déduites ni recopiées de mémoire : python3 mesure.py une section python3 referentiel.py les 58 sections python3 verif_modules.py contrôle du résultat Les `!important` sont nécessaires : Uncode applique sa propre typographie et ses propres gouttières aux modules, avec une spécificité supérieure. ========================================================================== */ .ct-mod { --ct-paper: #f6f4ef; --ct-paper-dim: #efece4; --ct-ink: #14161a; --ct-body: #3d3f43; --ct-blue: #0f2a4a; --ct-blue-light: #9fb6cf; --ct-blue-grey: #8f9aa8; --ct-grey: #83837c; --ct-on-dark: #e4e1d8; --ct-on-dark-dim: #d8d5cb; --ct-on-dark-mute: #c9c6bc; --ct-line: rgba(21, 24, 29, 0.12); /* Le titre de la hero est fluide dans la maquette : clamp(38px, 6vw, 72px). La valeur sert aussi à calculer la sous-ligne et l'interlettrage, qui en dépendent — d'où la variable. */ --ct-hero-h1: clamp(38px, 6vw, 72px); /* La maquette pose `body{font:16px/1.6 Jost; color:var(--ink)}` ; nos rows vivent hors du wrapper `.ct-content` et Uncode part de 14 px : il faut redire ces trois valeurs ici, sinon tout ce qui hérite est faux. */ font-family: 'Jost', sans-serif; font-size: 16px; line-height: 1.6; color: var(--ct-ink); } /* ========================================================================== LE CADRE — commun à toutes les sections -------------------------------------------------------------------------- Une seule règle donne à toutes nos rows la largeur de la navigation : 1200 px de cadre, 28 px de marge interne, donc 1144 px de contenu. Chaque section ne fait ensuite que régler ses marges hautes et basses. Le `padding` remplace les 36 px qu'Uncode pose sur `.row-parent`. ========================================================================== */ .ct-mod > .row { max-width: var(--ct-cadre, 1200px) !important; width: 100% !important; margin: 0 auto !important; padding: 0 var(--ct-cadre-marge, 28px) !important; } /* Uncode compense ses gouttières par des marges négatives sur `.row-inner` et des paddings sur les colonnes. Nos sections portent leur propre cadrage : sans cette remise à zéro, tout se décale de 15 à 36 px. */ .ct-mod .row-inner { margin: 0 !important; width: auto !important; } /* Uncode donne 15 px de gouttiere laterale a chaque colonne, et 36 px de marge haute sous 960 px. Nos sections portent leur propre cadrage : la remise a zero est totale, chaque section reposant ensuite ses paddings. */ .ct-mod .wpb_column, .ct-mod .uncol { padding: 0 !important; } .ct-mod .uncell, .ct-mod .uncoltable { padding: 0 !important; } /* DÉCISIF. Uncode pose `height: 0` sur chaque colonne. C'est un vieux truc de mise en page en tableau : une cellule de tableau grandit quand même pour son contenu, la hauteur déclarée ne servant qu'à répartir. Mais dès que `.row-inner` passe en grille ou en flexbox, les colonnes deviennent des blocs ordinaires — et un bloc en `height: 0` s'effondre. Son contenu déborde et continue de s'afficher, si bien que la page a l'air correcte alors que trois sections sur six font le tiers de leur hauteur et se chevauchent. Relevé sur le staging le 26/08 : intro 191 px au lieu de 537, grille 130 au lieu de 486, bande Ausstellung 182 au lieu de 903. */ .ct-mod .wpb_column { height: auto !important; } /* Sous 960 px, Uncode donne `height:100%` et `min-height:inherit` a `.uncol` et `.uncoltable` pour egaliser ses colonnes. Nos sections fixent elles-memes leurs hauteurs : sans cette remise a zero, la hauteur minimale d'une colonne s'ajoute a son padding et la section grandit sans raison. */ .ct-mod .uncol, .ct-mod .uncoltable { min-height: 0 !important; height: auto !important; } .ct-mod .uncol, .ct-mod .wpb_column, .ct-mod [class*="ct-mod__"] { box-sizing: border-box; } /* Un enfant de grille ou de flexbox refuse de rétrécir sous son plus long mot insécable : en allemand, cela suffit à faire déborder la colonne. */ .ct-mod * { min-width: 0; } .ct-mod { overflow-wrap: break-word; } .ct-mod p, .ct-mod h1, .ct-mod h2, .ct-mod h3 { hyphens: auto; -webkit-hyphens: auto; } /* --------------------------------------------------------------------------- LE CORPS DE TEXTE — UNE SEULE TAILLE Décision de Laurence, 27/08/2026 : tous les paragraphes de lecture sont à 17 px, interligne 1,85 (31,45 px). Ce que disaient les maquettes, mesuré à 1440 px avant la bascule : 17 / 28,90 (1,70) hero-sub Startseite 17 / 31,45 (1,85) intro Startseite <- valeur retenue 16,5 / 28,05 (1,70) cartes de pôles Startseite 15,5 / 26,35 (1,70) bande Ausstellung Startseite 17 / 33,15 (1,95) vision Wer bin ich? 16 / 28,80 (1,80) parcours Wer bin ich? 17 / 30,60 (1,80) clôture Wer bin ich? 16 / 25,60 (1,60) chapeau Ausstellungen 15,5 / 27,90 (1,80) 5 descriptions Ausstellungen Cinq tailles et six interlignes pour un même usage : lire un paragraphe. L'interligne retenu est celui de l'intro de la Startseite, le texte long le plus en vue du site. C'est un ÉCART ASSUMÉ par rapport aux maquettes. Il est déclaré dans `fabrique/verif_page.py` (PROPRIETES_ASSUMEES) et le contrôle l'affiche à chaque passage : sans cela il crierait à l'erreur sur onze blocs, et on prendrait l'habitude de ne plus le lire. La règle ne porte PAS de `!important` : chaque bloc qui doit s'en écarter — libellés, méta, légendes, l'année d'une exposition — garde sa propre règle avec `!important`, plus bas dans cette feuille. Ce sont les seuls écarts qui restent, et ils sont voulus : ces paragraphes-là ne se lisent pas, ils s'étiquettent. MODIFIÉ LE 08/09/2026 : demande de Laurence, la taille passe de 17 px à 15 px, partout où le CSS du plugin porte 17 px. L'interligne (31,45 px) n'a PAS été touché : seule la taille de police a été demandée. Le ratio interligne/taille passe donc de 1,85 à 2,10 avec ce changement — écart assumé, à signaler si le rendu paraît trop aéré une fois en ligne. --------------------------------------------------------------------- */ .ct-mod p { font-size: 15px; line-height: 31.45px; } /* LES LIBELLÉS EN CAPITALES — la part commune. Neuf blocs portaient les mêmes cinq déclarations, recopiées neuf fois. Ce qui les distingue vraiment tient en quatre propriétés : la graisse (400 ou 500), l'interlettre (1,68 à 2,16 px), la couleur (bleu ou bleu clair) et, pour trois d'entre eux, le centrage. Ces quatre-là restent écrites bloc par bloc — ce sont des choix de la designer, pas des répétitions. Le partage ne change RIEN à l'écran : les contrôles le vérifient à chaque passage sur les trois pages. */ .ct-mod__hero-eyebrow, .ct-mod__hero-eyebrow p, .ct-mod__eyebrow, .ct-mod__eyebrow p, .ct-mod__pole-tag, .ct-mod__pole-tag p, .ct-mod__expo-eyebrow, .ct-mod__expo-eyebrow p, .ct-mod__vision-eyebrow, .ct-mod__vision-eyebrow p, .ct-mod__closing-eyebrow, .ct-mod__closing-eyebrow p, .ct-mod__intro-eyebrow, .ct-mod__intro-eyebrow p, .ct-mod__parcours-eyebrow, .ct-mod__parcours-eyebrow p, .ct-mod__expo-tag, .ct-mod__expo-tag p, .ct-mod__fa-hero-eyebrow, .ct-mod__fa-hero-eyebrow p, .ct-mod__sc-eyebrow, .ct-mod__sc-eyebrow p, .ct-mod__fa-eyebrow, .ct-mod__fa-eyebrow p, .ct-mod__serie-eyebrow, .ct-mod__serie-eyebrow p, .ct-mod__serie-curatorial-eyebrow, .ct-mod__serie-curatorial-eyebrow p, .ct-mod__serie-nav-eyebrow, .ct-mod__serie-nav-eyebrow p, .ct-mod__sub-hero-eyebrow, .ct-mod__sub-hero-eyebrow p, .ct-mod__portrait-eyebrow, .ct-mod__portrait-eyebrow p, .ct-mod__approach-eyebrow, .ct-mod__approach-eyebrow p, .ct-mod__testimonials-eyebrow, .ct-mod__testimonials-eyebrow p, .ct-mod__cta-eyebrow, .ct-mod__cta-eyebrow p { font-family: 'Jost', sans-serif !important; font-size: 12px !important; line-height: 19.2px !important; margin: 0 !important; text-transform: uppercase !important; } /* Les libellés en capitales espacées ne se coupent jamais. */ .ct-mod__eyebrow, .ct-mod__hero-eyebrow, .ct-mod__pole-tag, .ct-mod__card-label, .ct-mod__expo-eyebrow { hyphens: none; -webkit-hyphens: none; } /* Uncode enveloppe chaque bouton dans un `span.btn-container` et lui donne 36 px de marge haute — `.btn-container { margin-top: 18px }`, doublé par `.single-internal-gutter .uncont > *`. C'est SA gouttière, pas la nôtre : l'espacement doit venir de la marge basse du texte qui précède, comme dans les maquettes. Relevé sur la page réelle le 27/08/2026 : 36 px au-dessus du lien des cartes de pôles au lieu de 26, et 36 px de trop sous le texte de la clôture de « Wer bin ich? », où les boîtes en ligne empêchent la fusion des marges. Ce défaut était passé à travers les contrôles parce que ma reproduction du balisage n'écrivait pas cette enveloppe. */ .ct-mod .btn-container { margin: 0 !important; } /* CHAÎNE STATIQUE — RENFORT POUR LES PETITS ÉCRANS Sous 960 px, Uncode repose lui-même la chaîne en `relative` : @media (max-width: 959px) { .main-container .row .uncol { position: relative !important } } (style.css, Uncode 2.12.7, relevé le 27/08/2026) Trois classes battent les deux de nos règles de bloc — et un `!important` ne protège pas d'une règle plus spécifique. Le fond de colonne redevenait donc absolu par rapport à la boîte de texte sur téléphone : c'est le piège qui a déjà coûté la carte de pôle de la Startseite, à ceci près qu'il ne se voit qu'en dessous de 960 px, largeur qu'aucun contrôle de rendu n'a regardée avant `verif_regles.py`. Quatre classes ici, pour ne pas dépendre de l'ordre des feuilles. La règle est GÉNÉRALE : elle protège aussi les pages déjà collées dans WordPress. */ .main-container .ct-mod .uncol, .main-container .ct-mod .uncoltable, .main-container .ct-mod .uncell { position: static !important; } /* Sous 570 px, Uncode réduit TOUS les boutons à 80 % : @media (max-width: 569px) { .btn:not(input):not(.checkout-button):not(.btn-no-scale):not(.btn-advanced) { transform: scale(0.8); transform-origin: left; } } (style.css du thème, Uncode 2.12.7, relevé le 27/08/2026) Nos liens ne sont pas des boutons pleins mais du texte souligné, réglé au demi-pixel près sur les maquettes : les rapetisser d'un cinquième sur téléphone change la taille du texte ET la hauteur de la boîte — 27 px mesurés dans la maquette, 21 chez nous sur la barre d'ancres. Le thème prévoit lui-même une échappatoire, la classe `btn-no-scale` ; on passe par le CSS plutôt que par le `el_class` de chaque bouton pour que les pages déjà collées dans WordPress n'aient pas à être refaites. */ @media (max-width: 569px) { .ct-mod a.btn, .ct-mod a.btn-link { transform: none !important; } } /* Le fond de colonne d'Uncode, quand Céline choisit une photo dans les réglages de la colonne : il doit rester sous le voile et sous le texte. */ .ct-mod .column-background, .ct-mod .row-background { z-index: 0 !important; } /* Uncode propose des animations de fond dans les réglages de la row et de la colonne (« zoom out », « Ken Burns »). Le zoom out agrandit la photo de 50 % et la fait entrer en fondu : mesuré `transform: matrix(1.5, …)` sur `.background-inner`, page enregistrée le 26/08/2026. Sur nos blocs, le cadrage vient de la maquette et l'agrandissement n'a lieu qu'au survol ; l'échelle revient donc à 1. L'opacité est forcée pour que la photo ne dépende pas d'un script : sans le script, la règle du thème la laisse à 0. */ .ct-mod .row-background .background-inner, .ct-mod .column-background .background-inner { transform: none !important; animation: none !important; opacity: 1 !important; } /* Les photos de fond. UN SEUL CHEMIN : la photo se règle dans les options de fond de la row ou de la colonne, dans WPBakery. Uncode rend alors un `.row-background` ou un `.column-background`, dont on reprend ici le traitement d'image. Il y avait auparavant un second chemin, une variable `--ct-photo` posée par une feuille de démonstration qui servait des photos Unsplash. Elle est retirée en 1.2.9, pour deux raisons. La première est juridique : des images servies par un tiers posent le même problème que les Google Fonts (LG München I, 20/01/2022, Az. 3 O 17493/20), et une feuille livrée avec le plugin finit par se retrouver en production. La seconde est de fabrication : deux chemins pour la même chose se superposent, et c'est exactement ce qui avait fait passer une photo par-dessus son voile. Conséquence voulue : un bloc dont la photo n'est pas encore choisie est vide. Un manque se voit, au lieu d'être masqué par une image d'emprunt. */ /* ========================================================================== 1. HERO — mesuré sur .ct-hero de l'accueil ========================================================================== */ .ct-mod--hero { position: relative; height: 92vh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; } /* Toute la chaîne en `static` : la photo et l'indicateur de défilement se calent alors sur la SECTION, comme dans la maquette, et non sur la row intérieure — qu'Uncode positionne en `relative`. */ .ct-mod--hero > .row, .ct-mod--hero .row-inner, .ct-mod--hero .wpb_column, .ct-mod--hero .uncol, .ct-mod--hero .uncoltable, .ct-mod--hero .uncell, .ct-mod--hero .uncont { position: static !important; } .ct-mod--hero > .row { padding: 0 var(--ct-cadre-marge, 28px) 64px !important; } .ct-mod--hero .row-inner { display: block; } .ct-mod--hero .uncont { color: var(--ct-paper); } /* La photo, et le voile par-dessus. Dans la maquette les deux sont dans le même `background` et subissent donc le même désaturage : on garde ce rapport en filtrant la photo seule, et en posant le dégradé au-dessus. */ .ct-mod--hero .row-background .background-inner { filter: grayscale(80%) contrast(1.08); } .ct-mod--hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 18, 28, 0.15) 0%, rgba(10, 18, 28, 0.62) 100%); pointer-events: none; } /* Les modules de texte passent devant la photo et le voile. */ .ct-mod__hero-eyebrow, .ct-mod__hero-title, .ct-mod__hero-title-sub, .ct-mod__hero-scroll, .ct-mod__hero-sub { position: relative; z-index: 2; } .ct-mod__hero-eyebrow, .ct-mod__hero-eyebrow p { font-weight: 400 !important; color: var(--ct-blue-light) !important; letter-spacing: 2.16px !important; } .ct-mod__hero-eyebrow { margin-bottom: 18px !important; } /* Le titre. UN SEUL module, en `

`, avec son emphase au milieu de la ligne. Jusqu'à la 1.2.8 il en fallait deux, parce que je tenais pour acquis qu'une balise ne pouvait pas entrer dans un module. C'était faux : vérifié le 26/08/2026 sur le staging, un `` collé dans un shortcode survit à l'enregistrement et rend bien un ``. La ligne redevient donc un seul champ pour Céline, et un seul titre pour un moteur de recherche. */ /* 13/09/2026 — Laurence : "Ein" doit être en light, "anderer Blick" en italic bold. Avant ce jour les deux segments partageaient la même graisse (350) ; seuls le style italique et la couleur distinguaient l'emphase. Le contraste de graisse est un choix explicite de Laurence, pas une valeur tirée de la maquette (qui, elle, pose 350 partout sur .hero h1 y compris son em). 14/09/2026 — le "bold" du "anderer Blick" est revenu à 400 (voir la règle du `em` plus bas) ; "Ein" reste en 300 (light), inchangé. */ .ct-mod__hero-title, .ct-mod__hero-title *:not(.clear) { max-width: 820px !important; font-family: 'Newsreader', serif !important; font-size: var(--ct-hero-h1) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: calc(var(--ct-hero-h1) * -0.01) !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; padding: 0 !important; } /* L'emphase. `:not(.clear)` n'est pas decoratif : il porte la specificite de ce selecteur au-dessus de celle de la regle generale ci-dessus, qui vise `*:not(.clear)` et imposerait sinon sa couleur au `em`. Deux `!important` de meme specificite se departagent a l'ordre d'ecriture, et l'ordre est trop fragile pour qu'on s'y fie. 14/09/2026 — Laurence : finalement 400, pas 700 (voir plus haut, poids d'abord posé à 700 le 13/09). Ce poids est explicite ici : sans lui, le `em` aurait hérité du 300 (light) posé sur la règle générale ci-dessus, pas du 400 attendu. 400 italique est déjà chargé par les deux modes de police (voir celine-refonte.php) : aucun changement côté PHP nécessaire pour ce poids, à la différence du 700 essayé le 13/09. */ .ct-mod__hero-title em:not(.clear), .ct-mod__hero-title em *:not(.clear) { display: inline !important; max-width: none !important; font-style: italic !important; font-weight: 400 !important; color: var(--ct-blue-light) !important; } /* Uncode ferme chaque titre par un `.clear` qui ajouterait une ligne vide. */ .ct-mod__hero-title .clear { display: none !important; } /* La sous-ligne : 0,42 em de la taille du h1 dans la maquette, et un interlettrage hérité en pixels de ce même h1 — d'où les deux calculs. */ .ct-mod__hero-title-sub, .ct-mod__hero-title-sub *:not(.clear) { display: block !important; font-family: 'Newsreader', serif !important; font-size: calc(var(--ct-hero-h1) * 0.42) !important; font-weight: 300 !important; font-style: normal !important; line-height: 1.4 !important; letter-spacing: calc(var(--ct-hero-h1) * -0.01) !important; color: var(--ct-on-dark) !important; margin: 0 !important; } .ct-mod__hero-title-sub { margin-top: 14px !important; max-width: 820px; } .ct-mod__hero-sub, .ct-mod__hero-sub p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-on-dark) !important; margin: 0 !important; } .ct-mod__hero-sub { margin-top: 22px !important; max-width: 460px; } /* L'indicateur de défilement, calé sur le bord de la SECTION — d'où la remise à `static` de toute la chaîne plus haut. */ .ct-mod__hero-scroll { position: absolute !important; right: var(--ct-cadre-marge, 28px); bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; margin: 0 !important; } .ct-mod__hero-scroll, .ct-mod__hero-scroll p { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 17.6px !important; letter-spacing: 1.65px !important; color: var(--ct-on-dark) !important; margin: 0 !important; } .ct-mod__hero-scroll::after { content: ""; width: 1px; height: 50px; background: var(--ct-on-dark); opacity: 0.5; } /* ========================================================================== 2. INTRO — mesuré sur .ct-intro de l'accueil ========================================================================== */ .ct-mod--intro { background: var(--ct-paper); } .ct-mod--intro > .row { padding: 100px var(--ct-cadre-marge, 28px) 90px !important; border-bottom: 1px solid var(--ct-line); } .ct-mod--intro .row-inner { display: flex !important; gap: 60px; align-items: flex-start; } /* Répartition d'origine : 471,3 px et 612,7 px, gouttière 60 px. Les fractions de WPBakery (1/3 et 2/3) donneraient 33/67. */ @media (min-width: 861px) { .ct-mod--intro .ct-mod__side { flex: 0 0 calc((100% - 60px) * 0.4348) !important; max-width: calc((100% - 60px) * 0.4348) !important; } .ct-mod--intro .ct-mod__body { flex: 0 0 calc((100% - 60px) * 0.5652) !important; max-width: calc((100% - 60px) * 0.5652) !important; } } .ct-mod__eyebrow, .ct-mod__eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.8px !important; } .ct-mod--intro .ct-mod__eyebrow { margin-bottom: 20px !important; } /* `vc_custom_heading` est enveloppé par Uncode dans `.heading-text` puis un `h2 > span` : on cible le module et tous ses descendants. */ .ct-mod__title, .ct-mod__title *, .ct-mod__title .heading-text, .ct-mod__title .heading-text * { font-family: 'Newsreader', serif !important; font-size: 32px !important; font-weight: 400 !important; font-style: normal !important; line-height: 41.6px !important; color: var(--ct-ink) !important; letter-spacing: -0.32px !important; text-transform: none !important; margin: 0 !important; } /* Marges à zéro : dans la maquette les paragraphes se suivent sans espace supplémentaire, l'interligne de 31,45 px fait tout le travail. */ .ct-mod__text, .ct-mod__text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } /* Le module ne contient que le prénom : aucune balise à saisir dans le champ éditable. Le tiret est ajouté ici, dans la typographie de la ligne. L'ordre compte : la remise à zéro et la marge haute ont la même spécificité, donc la dernière écrite l'emporte. */ .ct-mod__signature, .ct-mod__signature p { font-family: 'Alex Brush', cursive !important; font-size: 25.6px !important; font-weight: 400 !important; line-height: 40.96px !important; color: var(--ct-blue) !important; margin: 0 !important; } .ct-mod__signature { margin-top: 22px !important; } .ct-mod__signature p::before { content: "— "; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 400; line-height: 25.6px; vertical-align: 0.12em; } /* ========================================================================== 3. PÔLES — mesuré sur .ct-poles de l'accueil -------------------------------------------------------------------------- Deux cartes pleine largeur, photo en fond, voile dégradé, contenu calé en bas. Le calage bas passe par `vertical-align: bottom` sur la cellule d'Uncode : forcer une flexbox sur la colonne la sortirait du tableau et les deux cartes s'empileraient. ========================================================================== */ .ct-mod--poles { background: var(--ct-paper); } .ct-mod--poles > .row { max-width: none !important; padding: 0 !important; border-bottom: 1px solid var(--ct-line); } .ct-mod--poles .row-inner { display: grid !important; grid-template-columns: 1fr 1fr; } /* La colonne EST la carte. `.row-inner` étant passée en grille, la colonne n'est plus une cellule de tableau : elle peut donc redevenir une flexbox, comme dans la maquette, et caler son contenu en bas. Toute la chaîne d'Uncode repasse en blocs — lui laisser `display: table` donnerait une hauteur fausse et le contenu resterait collé en haut. */ .ct-mod--poles .ct-mod__pole { position: relative; overflow: hidden; isolation: isolate; min-height: 480px; padding: 80px 60px !important; width: auto !important; max-width: none !important; display: flex; flex-direction: column; justify-content: flex-end; } .ct-mod--poles .ct-mod__pole .uncol, .ct-mod--poles .ct-mod__pole .uncoltable, .ct-mod--poles .ct-mod__pole .uncell, .ct-mod--poles .ct-mod__pole .uncont { display: block !important; width: 100%; height: auto !important; /* Uncode impose une hauteur minimale a `.uncol` pour ses colonnes de hauteur egale : elle s'ajoutait au padding de la carte et la rendait 136 px trop haute des que le texte passait a la ligne, en mobile. */ min-height: 0 !important; } /* `will-change` place la photo sur son propre calque. Sans cela, animer son filtre et son échelle force le navigateur à re-tramer tout le contenu de la carte à chaque image : le texte se remet à trembler pendant les 0,6 s de la transition. `pointer-events: none` l'écarte du survol, qui n'appartient qu'à la zone cliquable du lien. */ .ct-mod__pole .column-background .background-inner { filter: grayscale(70%) contrast(1.05); transition: transform .6s ease, filter .6s ease; /* `will-change` place la photo sur son propre calque. Sans cela, animer son filtre et son échelle force le navigateur à re-tramer tout le contenu de la carte à chaque image : le texte se remet à trembler pendant les 0,6 s de la transition. */ will-change: transform, filter; backface-visibility: hidden; } .ct-mod__pole .column-background { pointer-events: none; } /* Le voile est SÉPARÉ de la photo : dans la maquette c'est un second pseudo-élément, non désaturé, posé par-dessus l'image qui, elle, l'est. */ .ct-mod__pole::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 17, 20, 0.1) 0%, rgba(10, 18, 28, 0.8) 100%); pointer-events: none; } .ct-mod__pole:hover .column-background .background-inner { transform: scale(1.04) !important; filter: grayscale(25%) contrast(1.1); } /* DÉCISIF pour la photo de colonne. Un fond absolu se cale sur le premier ancêtre positionné ; Uncode met `.uncell` en `position: relative`. La photo se calait donc sur la boîte du TEXTE — mesuré 600 x 298 px au bas d'une carte de 720 x 480 — et, logée dans `.uncol` que nous placions en z-index 2, elle passait PAR-DESSUS le voile. D'où les deux symptômes observés ensemble : cadrage faux et voile disparu. Toute la chaîne repasse en `static` : la photo se cale alors sur la CARTE, seule positionnée, et son débordement est coupé par son `overflow: hidden`. Même correctif que celui déjà appliqué à la hero et aux cartes de séries. */ .ct-mod--poles .ct-mod__pole .uncol, .ct-mod--poles .ct-mod__pole .uncoltable, .ct-mod--poles .ct-mod__pole .uncell, .ct-mod--poles .ct-mod__pole .uncont { position: static !important; } /* Les modules passent alors devant la photo (z-index 0) et le voile (1), un par un. Remonter `.uncont` d'un bloc conviendrait aussi, mais sa boîte deviendrait l'ancêtre positionné de la zone cliquable du lien. */ .ct-mod__pole-tag, .ct-mod__pole-title, .ct-mod__pole-text { position: relative; z-index: 2; } /* Le texte ne bouge jamais : aucune transformation ne lui est appliquée, et son calque est isolé de celui de la photo. */ .ct-mod__pole .uncol, .ct-mod__pole .uncont { transform: none !important; } .ct-mod__pole-tag, .ct-mod__pole-tag p { font-weight: 400 !important; color: var(--ct-blue-light) !important; letter-spacing: 1.92px !important; } .ct-mod__pole-tag { margin-bottom: 16px !important; } .ct-mod__pole-title, .ct-mod__pole-title *, .ct-mod__pole-title .heading-text, .ct-mod__pole-title .heading-text * { font-family: 'Newsreader', serif !important; font-size: 30px !important; font-weight: 400 !important; font-style: normal !important; line-height: 48px !important; letter-spacing: -0.3px !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__pole-title { margin-bottom: 14px !important; } .ct-mod__pole-text, .ct-mod__pole-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-on-dark-dim) !important; margin: 0 !important; } .ct-mod__pole-text { max-width: 380px; margin-bottom: 26px !important; } /* ========================================================================== LES LIENS -------------------------------------------------------------------------- `vc_button` pose `el_class` sur la balise `` elle-même, habillée par Uncode (fond, bordure, capitales), et laisse le lien VIDE : le libellé n'existe que dans l'attribut `title`. On remet donc le libellé à sa place, et seulement si Uncode ne l'a pas écrit lui-même. ========================================================================== */ /* Le libellé du bouton. `vc_button` laisse le lien vide : le texte ne vit que dans un attribut. Mais Uncode le DÉPLACE au survol — `title` part dans `data-title` pour supprimer l'infobulle native, et revient au départ du curseur. Lire `title` seul faisait donc disparaître le libellé à l'entrée du curseur : le bouton rétrécissait, le curseur se retrouvait hors de la boîte, le libellé revenait, et ainsi de suite — 183 changements d'attribut par seconde et le bloc entier qui tremble. On lit les deux : à tout instant l'un des deux porte le libellé, jamais les deux à la fois, et la boîte ne bouge plus. */ .ct-mod__pole-link:empty::after, .ct-mod__expo-cta:empty::after { content: attr(title) attr(data-title); } /* Uncode anime ses boutons au survol — décalages, rotations d'icône. Sur les nôtres, la boîte ne bouge pas : seule la couleur change. Un bouton qui se déplace sous le curseur perd le survol, le reprend, et clignote. */ .ct-mod__pole-link, .ct-mod__pole-link:hover, .ct-mod__expo-cta, .ct-mod__expo-cta:hover { transform: none !important; } .ct-mod__pole-link:hover span, .ct-mod__expo-cta:hover span { transform: none !important; } /* Uncode habille ses boutons avec une spécificité élevée. La classe est répétée pour passer devant sans avoir à deviner son sélecteur exact. */ a.ct-mod__pole-link, .ct-mod .ct-mod__pole-link.ct-mod__pole-link { display: block !important; position: relative; z-index: 2; width: fit-content; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 19.2px !important; letter-spacing: 0.72px !important; color: var(--ct-paper) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(246, 244, 239, 0.5) !important; border-radius: 0 !important; padding: 0 0 4px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; } /* Zone cliquable. Elle se cale sur le lien lui-même, qui est positionné : elle couvre donc le libellé et son soulignement, pas toute la carte. Dans la maquette, `.pole` est un lien et la carte entière est cliquable ; ici la colonne n'en est pas un, et un pseudo-élément posé plus haut dans l'arbre n'appartiendrait pas au lien, donc ne déclencherait rien. Écart assumé, à revoir si Uncode expose une option « lien » sur la colonne. */ .ct-mod__pole-link::before { content: ""; position: absolute; inset: 0; z-index: 3; } /* ========================================================================== 4. SÉLECTION — mesuré sur .ct-work de l'accueil -------------------------------------------------------------------------- La maquette n'a qu'une section ; on en fait deux rows, le titre et la grille, pour que Céline puisse ajouter ou retirer une carte sans toucher au titre. Les espacements sont conservés : 110 px au-dessus, 130 px en dessous (40 px de padding + 90 px de marge dans la maquette). ========================================================================== */ .ct-mod--work, .ct-mod--work-grid { background: var(--ct-paper); } .ct-mod--work > .row { padding: 110px var(--ct-cadre-marge, 28px) 0 !important; } .ct-mod--work-grid > .row { padding: 0 var(--ct-cadre-marge, 28px) 130px !important; } .ct-mod--work-grid .row-inner { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 2px; } .ct-mod__work-title, .ct-mod__work-title *, .ct-mod__work-title .heading-text, .ct-mod__work-title .heading-text * { font-family: 'Newsreader', serif !important; font-size: 30px !important; font-weight: 400 !important; font-style: normal !important; line-height: 48px !important; letter-spacing: -0.3px !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } /* Dans la maquette, `.work-head` est une flexbox et son premier enfant se rétrécit à son contenu. */ .ct-mod--work .ct-mod__eyebrow, .ct-mod__work-title { width: fit-content; } .ct-mod__work-title { margin-top: 8px !important; } .ct-mod__work-sub, .ct-mod__work-sub p { font-family: 'Newsreader', serif !important; font-size: 15px !important; font-weight: 300 !important; font-style: italic !important; line-height: 24px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__work-sub { margin-top: 14px !important; margin-bottom: 50px !important; } /* Chaque colonne EST la carte : format 4/5, photo en fond, libellé posé en bas dans un dégradé. */ /* Pas de `min-height` ici : la hauteur vient du format 4/5 et de lui seul, comme dans la maquette. Un plancher en pixels avait été posé le 26/08 pour empêcher l'effondrement de ces cartes ; la vraie cause était le `height: 0` d'Uncode, corrigé plus haut, et le plancher rendait les cartes trop hautes en mobile. Un filet qui déforme est pire que pas de filet. */ .ct-mod--work-grid .ct-mod__card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ddd; padding: 0 !important; width: auto !important; max-width: none !important; } /* DÉCISIF pour le libellé. Uncode met `.uncol` en `position: relative`, et comme le libellé est le seul contenu de la carte et qu'il est posé en absolu, cette enveloppe fait 0 px de haut. Le libellé, calé sur `bottom:0` de cette boîte plate, se retrouvait 86 px AU-DESSUS de la carte — donc coupé par son `overflow: hidden`, et invisible. Toute la chaîne repasse en `static` : le libellé se cale alors sur la carte, comme prévu. */ .ct-mod--work-grid .ct-mod__card .uncol, .ct-mod--work-grid .ct-mod__card .uncoltable, .ct-mod--work-grid .ct-mod__card .uncell, .ct-mod--work-grid .ct-mod__card .uncont { position: static !important; height: 100%; } .ct-mod__card .column-background .background-inner { filter: grayscale(70%); transition: transform .5s ease, filter .5s ease; will-change: transform, filter; backface-visibility: hidden; } .ct-mod__card .column-background { pointer-events: none; } .ct-mod__card:hover .column-background .background-inner { transform: scale(1.05) !important; filter: grayscale(15%); } /* Le libellé : un seul module, deux paragraphes. La première ligne est le numéro, la seconde le titre. Céline édite un champ, pas deux. */ .ct-mod__card-label { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px !important; margin: 0 !important; background: linear-gradient(180deg, transparent, rgba(10, 15, 20, 0.9)); color: var(--ct-paper); } .ct-mod__card-label p { margin: 0 !important; } .ct-mod__card-label p:first-child { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 17.6px !important; letter-spacing: 1.43px !important; color: var(--ct-blue-light) !important; margin-bottom: 4px !important; } .ct-mod__card-label p:last-child { font-family: 'Newsreader', serif !important; font-size: 18px !important; font-weight: 400 !important; font-style: italic !important; line-height: 28.8px !important; color: var(--ct-paper) !important; } /* ========================================================================== 5. EXPOSITION — mesuré sur .ct-expo de l'accueil ========================================================================== */ .ct-mod--expo { background: var(--ct-ink); color: var(--ct-paper); } .ct-mod--expo > .row { padding: 90px var(--ct-cadre-marge, 28px) !important; } .ct-mod--expo .row-inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .ct-mod--expo .ct-mod__expo-body, .ct-mod--expo .ct-mod__expo-side { width: auto !important; max-width: none !important; } .ct-mod__expo-eyebrow, .ct-mod__expo-eyebrow p { font-weight: 500 !important; color: var(--ct-blue-light) !important; letter-spacing: 1.8px !important; } .ct-mod__expo-title, .ct-mod__expo-title *, .ct-mod__expo-title .heading-text, .ct-mod__expo-title .heading-text * { font-family: 'Newsreader', serif !important; font-size: 36px !important; font-weight: 400 !important; font-style: normal !important; line-height: 45px !important; letter-spacing: -0.36px !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__expo-title { margin: 18px 0 22px !important; } .ct-mod__expo-text, .ct-mod__expo-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-on-dark-mute) !important; margin: 0 !important; } .ct-mod__expo-text { max-width: 440px; margin-bottom: 28px !important; } /* Six paragraphes lus deux par deux : libellé, valeur. `grid-auto-flow: column` sur deux rangées les répartit en trois colonnes. */ .ct-mod__expo-meta { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; justify-content: start; column-gap: 36px; } .ct-mod__expo-meta { margin-bottom: 30px !important; } .ct-mod__expo-meta p { margin: 0 !important; } .ct-mod__expo-meta p:nth-child(odd) { font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 19.2px !important; color: var(--ct-blue-grey) !important; } .ct-mod__expo-meta p:nth-child(even) { font-family: 'Newsreader', serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 27.2px !important; color: var(--ct-paper) !important; margin-top: 4px !important; } a.ct-mod__expo-cta, .ct-mod .ct-mod__expo-cta.ct-mod__expo-cta { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 19.2px !important; letter-spacing: 0.72px !important; color: var(--ct-paper) !important; background: none !important; background-color: transparent !important; border: 1px solid var(--ct-blue-light) !important; border-radius: 2px !important; padding: 12px 26px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; /* Liste explicite, jamais `all` : `all` anime aussi ce qui touche à la mise en page, et le bouton se met à vibrer si le thème modifie sa boîte au survol. */ transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .ct-mod__expo-cta:hover { background-color: var(--ct-blue-light) !important; color: var(--ct-ink) !important; } /* Le visuel : la colonne EST l'image, au format 3/4. */ .ct-mod__expo-side { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0a1626; border: 1px solid rgba(159, 182, 207, 0.25); } .ct-mod__expo-side .column-background .background-inner { filter: grayscale(55%) sepia(10%) hue-rotate(170deg) saturate(1.3); } /* La colonne est vide : sans cela, `.uncell` fait 0 px de haut et la photo, calée sur elle, disparaît. Toute la chaîne repasse en `static` pour que le fond se cale sur la colonne, dont le format 3/4 est déjà fixé au-dessus. */ .ct-mod--expo .ct-mod__expo-side .uncol, .ct-mod--expo .ct-mod__expo-side .uncoltable, .ct-mod--expo .ct-mod__expo-side .uncell, .ct-mod--expo .ct-mod__expo-side .uncont { position: static !important; } /* ========================================================================== MOBILE La maquette ne fait qu'une chose sous 860 px : passer les grilles en une colonne, deux pour la sélection. Les paddings, les tailles et la hauteur de la hero ne bougent pas. On s'en tient à cela — inventer un traitement mobile ici ferait diverger la version en modules de la version en Raw HTML, qui suit la maquette. ========================================================================== */ @media (max-width: 860px) { .ct-mod--intro .row-inner { flex-direction: column; } .ct-mod--intro .ct-mod__side, .ct-mod--intro .ct-mod__body { flex: 0 0 auto !important; max-width: 100% !important; } .ct-mod--poles .row-inner { grid-template-columns: 1fr; } .ct-mod--work-grid .row-inner { grid-template-columns: 1fr 1fr; } .ct-mod--expo .row-inner { grid-template-columns: 1fr; } } /* ========================================================================== COMPOSANT RÉUTILISABLE — GRILLE DE CARTES (3 OU 4 COLONNES) -------------------------------------------------------------------------- Réécrit le 31/08/2026 : la première version (1.7.1) reprenait le STYLE de `.ct-mod__sc-card` (deux lignes, lien invisible) — Laurence a signalé que Céline attendait le contenu de la maquette d'origine de « Porträts » (`src/maquette-portraits.html`, section `.categories`) : un tag, un titre, une description ET un lien visible. Toutes les valeurs ci-dessous sont MESURÉES sur cette maquette (Playwright, `getComputedStyle`, 1440 px), pas recopiées de mémoire ni d'un autre composant : .cat-card flex; align-items:flex-end; aspect-ratio 3/4 (380 × 506,7 px) .cat-content padding 30px, couleur #f6f4ef .cat-tag Jost 400, 10,5 px, interlettre 1,68 px, capitales, #9fb6cf .cat-title Jost 400, 24 px, line-height 36 px, #f6f4ef — PAS Newsreader : c'est un
, pas un , donc il n'hérite pas de la police des titres. .cat-desc Jost 300, 13 px, line-height 20,8 px, #d8d5cb .cat-link Jost 400, 11,5 px, interlettre 0,69 px, #f6f4ef, soulignement 1px solid rgba(246,244,239,.5), 3px de retrait Différence assumée avec la maquette : dans la maquette, `.cat-card` EST le `` — la carte entière est cliquable nativement. Une colonne WPBakery ne peut pas être enveloppée dans un `` (`claude/uncode-balisage-reel.md`). La carte reste donc entièrement cliquable, mais par un second lien, invi- sible, étendu par-dessus toute la carte (`.ct-mod__cards-lien`, technique déjà éprouvée sur `.ct-mod__sc-card`) — le texte « Entdecken » affiché n'est qu'un texte, pas lui-même un lien, exactement comme dans la maquette où `.cat-link` n'est qu'un `
` à l'intérieur du vrai lien. Même piège déjà réglé qu'ailleurs sur le site : la photo de fond se cale sur le premier ancêtre positionné, et Uncode met `.uncell` en `relative` — sans la remise à `static` ci-dessous, la photo se calerait sur la boîte du texte et passerait par-dessus le voile. `.ct-mod--cards` porte tout le socle (fond, remise à `static`, forme de la carte). Le nombre de colonnes est un second modificateur, à poser EN PLUS sur la row : `.ct-mod--cards-3` ou `.ct-mod--cards-4`. NE PAS renommer `.ct-mod--sc-grid` / `.ct-mod__sc-card` en ce composant : la page « Freie Arbeiten » est déjà construite avec ces noms-là, et cette feuille sert onze pages sur un seul site — y toucher casserait une page déjà livrée. Ce composant est un second jeu de classes, pour les pages à construire à partir de maintenant. ========================================================================== */ .ct-mod--cards { background: var(--ct-paper); } .ct-mod--cards > .row { padding: 0 var(--ct-cadre-marge, 28px) 110px !important; border-bottom: 1px solid var(--ct-line); } .ct-mod--cards .row-inner { display: grid !important; gap: 2px; } /* Le nombre de colonnes : à poser EN PLUS de `.ct-mod--cards`, sur la row. */ .ct-mod--cards-3 .row-inner { grid-template-columns: repeat(3, 1fr); } .ct-mod--cards-4 .row-inner { grid-template-columns: repeat(4, 1fr); } .ct-mod--cards .wpb_column { width: auto !important; max-width: none !important; } .ct-mod--cards .ct-mod__cards-item { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; padding: 30px !important; display: flex; flex-direction: column; justify-content: flex-end; background: var(--ct-paper-dim); } /* Comme `.ct-mod__pole` : la chaîne Uncode repasse en blocs, sans la hauteur minimale qu'elle impose pour ses colonnes de hauteur égale — elle s'ajouterait au padding de la carte et la rendrait trop haute dès que le texte passe à la ligne. */ .ct-mod--cards .ct-mod__cards-item .uncol, .ct-mod--cards .ct-mod__cards-item .uncoltable, .ct-mod--cards .ct-mod__cards-item .uncell, .ct-mod--cards .ct-mod__cards-item .uncont { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } /* La photo se cale sur le premier ancêtre positionné ; Uncode met `.uncell` en `relative`. Sans cette remise à `static`, elle se calerait sur la boîte du texte et passerait par-dessus le voile. */ .ct-mod--cards .ct-mod__cards-item .uncol, .ct-mod--cards .ct-mod__cards-item .uncoltable, .ct-mod--cards .ct-mod__cards-item .uncell, .ct-mod--cards .ct-mod__cards-item .uncont { position: static !important; } /* Le dégradé couvre TOUTE la carte, pas seulement le texte. */ .ct-mod__cards-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 17, 20, 0.05) 0%, rgba(10, 15, 20, 0.82) 100%); pointer-events: none; } .ct-mod__cards-item .column-background .background-inner { filter: grayscale(70%) contrast(1.05); transition: transform .6s ease, filter .6s ease; will-change: transform, filter; backface-visibility: hidden; } .ct-mod__cards-item .column-background { pointer-events: none; } .ct-mod__cards-item:hover .column-background .background-inner { transform: scale(1.05) !important; filter: grayscale(20%); } /* Le texte ne bouge jamais et reste au-dessus du voile (z-index 1). */ .ct-mod__cards-tag, .ct-mod__cards-title, .ct-mod__cards-desc { position: relative; z-index: 2; } .ct-mod--cards .ct-mod__cards-item .uncol, .ct-mod--cards .ct-mod__cards-item .uncont { transform: none !important; } .ct-mod__cards-tag, .ct-mod__cards-tag p { font-family: 'Jost', sans-serif !important; font-size: 10.5px !important; font-weight: 400 !important; line-height: 15.75px !important; letter-spacing: 1.68px !important; text-transform: uppercase !important; color: var(--ct-blue-light) !important; margin: 0 !important; } .ct-mod__cards-tag { margin-bottom: 10px !important; } /* `.cat-title` est un `
` dans la maquette, pas un `` : il n'hérite donc PAS de la police des titres (Newsreader) — Jost, comme le reste. */ .ct-mod__cards-title, .ct-mod__cards-title *, .ct-mod__cards-title .heading-text, .ct-mod__cards-title .heading-text * { font-family: 'Jost', sans-serif !important; font-size: 24px !important; font-weight: 400 !important; font-style: normal !important; line-height: 36px !important; letter-spacing: normal !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__cards-title { margin-bottom: 10px !important; } .ct-mod__cards-desc, .ct-mod__cards-desc p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 20.8px !important; color: var(--ct-on-dark-dim) !important; margin: 0 !important; } .ct-mod__cards-desc { margin-bottom: 16px !important; } /* Le libellé visible du lien (« Entdecken »). Dans la maquette, `.cat-link` n'est qu'un `
` : ce n'est pas lui-même un lien, seul `.cat-card`, qui l'enveloppe, en est un. Même chose ici : un texte, pas un bouton — le vrai lien est `.ct-mod__cards-lien`, étendu par-dessus toute la carte juste après. */ .ct-mod__cards-link-label { position: relative; z-index: 2; display: block; width: fit-content; font-family: 'Jost', sans-serif !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 17.25px !important; letter-spacing: 0.69px !important; color: var(--ct-paper) !important; border-bottom: 1px solid rgba(246, 244, 239, 0.5) !important; padding-bottom: 3px !important; margin: 0 !important; pointer-events: none; } .ct-mod__cards-link-label p { margin: 0 !important; } /* Le lien de la carte : la maquette fait de la carte entière un ``, ce qu'une colonne WPBakery ne permet pas. Le lien est donc étendu par-dessus, sans libellé visible à lui — le libellé affiché est `.ct-mod__cards-link- label` ci-dessus, un texte, pas ce lien. Le nom accessible du lien vient de l'attribut `title`, que Céline modifie comme le reste. PAS de règle `:empty::after` ici : ce lien n'affiche rien lui-même. */ .ct-mod__cards-item .btn-container { position: absolute !important; inset: 0; z-index: 3; display: block !important; margin: 0 !important; } a.ct-mod__cards-lien, .ct-mod .ct-mod__cards-lien.ct-mod__cards-lien { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; } @media (max-width: 860px) { .ct-mod--cards-3 .row-inner, .ct-mod--cards-4 .row-inner { grid-template-columns: 1fr 1fr; } } /* ========================================================================== PAGE « Wer bin ich? » — mesuré sur wer-bin-ich-de.html -------------------------------------------------------------------------- Trois sections, dont deux plus étroites que le cadre commun : la maquette les centre sur 720 px et 600 px, pas sur 1200. Ce n'est pas un oubli d'alignement, c'est une mesure de lecture — un texte courant de 664 px de large se lit, un de 1144 non. ========================================================================== */ /* ---------- 1. VISION — ouvre la page, aucune photo ---------- */ .ct-mod--vision { background: var(--ct-paper); } /* 720 px de cadre au lieu de 1200 : 664 px de texte, comme la maquette. */ .ct-mod--vision > .row { max-width: 720px !important; padding: 130px var(--ct-cadre-marge, 28px) 110px !important; } .ct-mod--vision .row-inner { display: block; } .ct-mod__vision-eyebrow, .ct-mod__vision-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; text-align: center !important; } .ct-mod__vision-eyebrow { margin-bottom: 18px !important; } /* Le

de la page. Un seul, et c'est celui-ci : la maquette n'en a aucun, elle ouvre sur un

. Une page sans titre de niveau 1 n'a pas de titre pour un moteur de recherche ni pour un lecteur d'écran. */ .ct-mod__vision-title, .ct-mod__vision-title *:not(.clear) { font-family: 'Newsreader', serif !important; /* Fluide dans la maquette : `clamp(30px, 4vw, 42px)`. Une valeur figee a 42 px donnait un titre de 42 px sur un telephone, la ou la maquette descend a 30. L'interligne et l'interlettrage suivent la taille, d'ou leur expression relative. */ font-size: clamp(30px, 4vw, 42px) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.6 !important; letter-spacing: -0.01em !important; color: var(--ct-ink) !important; text-transform: none !important; text-align: center !important; margin: 0 !important; } /* Les 50 px viennent du bloc de tête de la maquette, pas du titre lui-même : ici les deux ne font qu'un, la marge se pose donc sur le titre. */ .ct-mod__vision-title { margin-bottom: 50px !important; } .ct-mod__vision-title .clear { display: none !important; } /* Le chapeau garde son Newsreader italique — c'est une voix, pas une taille — mais sa taille et son interligne viennent de la base : 17 px / 31,45. */ .ct-mod__vision-lede, .ct-mod__vision-lede p { font-family: 'Newsreader', serif !important; font-weight: 300 !important; font-style: italic !important; /* La maquette ecrit `color: var(--blue)` sur `.vision-lede`, mais une regle plus loin — `.vision p { color:#2c2e32 }` — la recouvre. C'est la valeur MESUREE qui fait foi, pas celle qu'on lit dans la feuille. */ color: #2c2e32 !important; text-align: center !important; margin: 0 !important; } .ct-mod__vision-lede { margin-bottom: 24px !important; } /* Les cinq paragraphes du corps tiennent dans UN module : Céline édite un champ, et l'espacement entre eux vient de leur propre marge. */ .ct-mod__vision-text, .ct-mod__vision-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: #2c2e32 !important; text-align: left !important; } .ct-mod__vision-text { margin: 0 !important; } .ct-mod__vision-text p { margin: 0 0 24px !important; } /* ---------- 2. PARCOURS — deux photos et un texte ---------- */ .ct-mod--parcours { background: var(--ct-paper); } .ct-mod--parcours > .row { padding: 0 var(--ct-cadre-marge, 28px) 120px !important; } /* Deux colonnes égales, 70 px entre elles — la gouttière de la maquette. ÉCART VOULU : la maquette pose DEUX photos ici, une haute et une courte, dans une grille imbriquée. Laurence a demandé une image unique et deux colonnes égales le 26/08/2026. La section est donc plus simple, et plus haute : la photo fait 537 x 671 px là où les deux faisaient 356 px de haut. L'écart de hauteur est déclaré dans `verif_page.py`, avec sa raison. */ .ct-mod--parcours .row-inner { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 70px; align-items: center; } .ct-mod--parcours .wpb_column { width: auto !important; max-width: none !important; } /* La colonne de photo n'a aucun contenu : sans cette remise à `static`, son fond se calerait sur une boîte de zéro pixel et disparaîtrait. */ .ct-mod--parcours .uncol, .ct-mod--parcours .uncoltable, .ct-mod--parcours .uncell, .ct-mod--parcours .uncont { position: static !important; display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } /* Format 4/5, le même que les cartes de séries de l'accueil : une seule proportion de portrait sur tout le site. Une seule ligne à changer si Céline préfère un autre cadrage. */ .ct-mod__parcours-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ct-paper-dim); } .ct-mod__parcours-photo .column-background .background-inner { filter: grayscale(55%) contrast(1.05); } .ct-mod__parcours-eyebrow, .ct-mod__parcours-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; } .ct-mod__parcours-eyebrow { margin-bottom: 20px !important; } .ct-mod__parcours-title, .ct-mod__parcours-title *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 30px !important; font-weight: 400 !important; font-style: normal !important; line-height: 37.5px !important; letter-spacing: -0.3px !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__parcours-title { margin-bottom: 22px !important; } .ct-mod__parcours-title .clear { display: none !important; } .ct-mod__parcours-text, .ct-mod__parcours-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; } .ct-mod__parcours-text { margin: 0 !important; } .ct-mod__parcours-text p { margin: 0 0 18px !important; } /* Les titres de séries, en emphase au milieu d'une phrase. `:not(.clear)` porte la spécificité au-dessus de la règle ci-dessus, qui vise `p`. */ .ct-mod__parcours-text em:not(.clear) { font-style: italic !important; font-weight: 400 !important; color: var(--ct-blue) !important; } /* ---------- 3. CLÔTURE ---------- */ .ct-mod--closing { background: var(--ct-paper); } .ct-mod--closing > .row { max-width: 600px !important; padding: 80px var(--ct-cadre-marge, 28px) 120px !important; border-top: 1px solid var(--ct-line); } .ct-mod--closing .row-inner { display: block; } /* Tout est centré, y compris les deux liens : les `span.btn-container` d'Uncode sont des boîtes en ligne, `text-align` suffit à les centrer et évite une flexbox qui casserait l'empilement en mobile. */ /* `!important` obligatoire, et pour la raison écrite en tête de ce fichier. Uncode aligne à gauche avec `.row div[class*="col-lg-"].align_left > .uncol > .uncoltable > .uncell > .uncont`, sept sélecteurs de spécificité contre nos deux. Relevé sur la page réelle le 27/08/2026 : sans cette ligne, les deux liens de la clôture restaient collés à gauche. */ .ct-mod--closing .uncont { text-align: center !important; } .ct-mod__closing-eyebrow, .ct-mod__closing-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; text-align: center !important; } .ct-mod__closing-eyebrow { margin-bottom: 20px !important; } .ct-mod__closing-text, .ct-mod__closing-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; text-align: center !important; margin: 0 !important; } .ct-mod__closing-text { margin-bottom: 28px !important; } .ct-mod--closing .btn-container { display: inline-block !important; } /* 30 px ENTRE les deux liens, et rien sur les bords extérieurs. Une marge de 15 px de chaque côté donnerait le même écart visuel mais 30 px de largeur en plus : sur un téléphone de 390 px, les deux liens passaient à la ligne alors que la maquette les garde côte à côte. */ .ct-mod--closing .btn-container + .btn-container { margin-left: 30px !important; } a.ct-mod__closing-link, .ct-mod .ct-mod__closing-link.ct-mod__closing-link { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20.8px !important; letter-spacing: 0.78px !important; color: var(--ct-ink) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ct-ink) !important; border-radius: 0 !important; padding: 0 0 4px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity .2s ease; } .ct-mod__closing-link:hover { opacity: 0.6; } .ct-mod__closing-link:empty::after { content: attr(title) attr(data-title); } /* ---------- MOBILE — la maquette ne fait qu'une chose : une colonne ------- */ @media (max-width: 860px) { /* Une colonne : la photo, puis le texte. Les 70 px de gouttière deviennent un espace vertical, comme dans la maquette — qui garde son `gap` en passant en une colonne. Sans cette ligne, la section faisait 70 px de moins que la maquette sur téléphone. */ .ct-mod--parcours .row-inner { grid-template-columns: 1fr; row-gap: 70px; } } /* ========================================================================== PAGE « Ausstellungen » — mesuré sur ausstellungen-de.html -------------------------------------------------------------------------- Dix rows. La maquette imbrique jusqu'à trois grilles ; comme pour le parcours de « Wer bin ich? », elles sont APLATIES en colonnes de même niveau et les proportions rétablies ici. LES GALERIES NE SONT PAS ICI. Deux blocs attendent un module Gallery d'Uncode, posé par Laurence : la grille de quatre photos du festival de Treviso, et la galerie de « Perspektiven ». Leur colonne est dimensionnée, son contenu ne l'est pas — je n'ai pas relevé le balisage que ce module produit, et je ne l'invente pas. Les encadrés bleus de la maquette (`.note`) sont des annotations de la designer, pas du contenu : ils ne sont pas repris. ========================================================================== */ /* ---------- 1. INTRO ---------- */ .ct-mod--page-intro { background: var(--ct-paper); } .ct-mod--page-intro > .row { max-width: 700px !important; padding: 100px var(--ct-cadre-marge, 28px) 30px !important; } .ct-mod--page-intro .row-inner { display: block; } .ct-mod__intro-eyebrow, .ct-mod__intro-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; text-align: center !important; } .ct-mod__intro-eyebrow { margin-bottom: 18px !important; } /* Fluide dans la maquette : clamp(32px, 4.4vw, 48px), interligne 1,2. */ .ct-mod__intro-title, .ct-mod__intro-title *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: clamp(32px, 4.4vw, 48px) !important; font-weight: 350 !important; font-style: normal !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: var(--ct-ink) !important; text-transform: none !important; text-align: center !important; margin: 0 !important; } .ct-mod__intro-title { margin-bottom: 16px !important; } .ct-mod__intro-title .clear { display: none !important; } .ct-mod__intro-lede, .ct-mod__intro-lede p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-grey) !important; text-align: center !important; margin: 0 auto !important; max-width: 440px !important; } /* ---------- 2. ANCRES ---------- */ .ct-mod--anchors { background: var(--ct-paper); } .ct-mod--anchors > .row { padding: 30px var(--ct-cadre-marge, 28px) 0 !important; } .ct-mod--anchors .row-inner { display: block; } /* Rangée souple, comme la maquette (`.page-anchors { display:flex; justify-content:center; gap:36px; flex-wrap:wrap }`). PAS des boîtes en ligne séparées par une marge : à 390 px les trois liens passent à la ligne, et une marge gauche décale la ligne suivante vers la droite au lieu de la centrer, tandis que l'écart vertical retombe à l'interligne (6 px mesurés) au lieu des 20 px de la maquette. `gap` règle les deux d'un coup, horizontalement comme verticalement. Les éléments souples sont les `span.btn-container` qu'Uncode pose autour de chaque bouton, pas les `` eux-mêmes. */ .ct-mod--anchors .uncont { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 36px; text-align: center !important; } /* `.btn-container` en boîte souple, et non en bloc : en bloc il garde un contexte de ligne, dont le talon de police ajoute 6 px sous le lien — la maquette mesurait 20 px entre deux lignes d'ancres, nous 26. */ .ct-mod--anchors .btn-container { display: flex !important; margin: 0 !important; } a.ct-mod__anchor, .ct-mod .ct-mod__anchor.ct-mod__anchor { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 21.6px !important; letter-spacing: 0.54px !important; color: var(--ct-grey) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid transparent !important; border-radius: 0 !important; padding: 0 0 4px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; transition: color .2s ease, border-color .2s ease; } .ct-mod__anchor:hover { color: var(--ct-blue) !important; border-bottom-color: var(--ct-blue) !important; } .ct-mod__anchor:empty::after { content: attr(title) attr(data-title); } /* ---------- 3. BANDEAUX DE TITRE ---------- */ .ct-mod--head { background: var(--ct-paper); } .ct-mod--head > .row { padding: 70px var(--ct-cadre-marge, 28px) 40px !important; } .ct-mod--head .row-inner { display: block; } .ct-mod__head-title, .ct-mod__head-title *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 26px !important; font-weight: 400 !important; font-style: normal !important; line-height: 41.6px !important; letter-spacing: -0.26px !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__head-title .clear { display: none !important; } /* ---------- 4. L'EXPOSITION À VENIR ---------- */ .ct-mod--featured { background: var(--ct-paper); } .ct-mod--featured > .row { padding: 0 var(--ct-cadre-marge, 28px) 40px !important; } /* La carte EST la row intérieure : bordure et grille 1fr / 1,2fr, sans gouttière — les deux moitiés se touchent, comme dans la maquette. */ .ct-mod--featured .row-inner { display: grid !important; grid-template-columns: 1fr 1.2fr; border: 1px solid var(--ct-line); overflow: hidden; } .ct-mod--featured .wpb_column { width: auto !important; max-width: none !important; } .ct-mod--featured .uncol, .ct-mod--featured .uncoltable, .ct-mod--featured .uncell, .ct-mod--featured .uncont { position: static !important; display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } /* L'affiche. `contain` et non `cover` : c'est une affiche, on ne la recadre pas. Le fond beige comble ce que le format ne remplit pas. */ .ct-mod__featured-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ct-paper-tint, #e8e6e0); } .ct-mod__featured-img .column-background .background-inner { background-size: contain !important; background-repeat: no-repeat !important; filter: none; } /* Deux classes, pas une : `.ct-mod .wpb_column { padding: 0 !important }` plus haut dans cette feuille est plus specifique et gagnait, ce qui privait la carte de ses 50 px de rembourrage — le texte touchait le filet. Un `!important` ne protege pas d'une regle plus specifique. (Trouve par verif_regles.py le 27/08/2026.) */ .ct-mod .ct-mod__featured-body { padding: 54px 50px !important; align-self: center; } .ct-mod__expo-tag, .ct-mod__expo-tag p { font-weight: 400 !important; letter-spacing: 1.68px !important; color: var(--ct-blue) !important; } .ct-mod__expo-tag { margin-bottom: 16px !important; } /* Jost, et non Newsreader : la maquette ne passe en serif que pour les titres de page et de section, et pour l'annee. Mesure, pas supposition — je l'avais supposee, et le controle l'a rattrapee. */ .ct-mod__aus-title, .ct-mod__aus-title *:not(.clear) { font-family: 'Jost', sans-serif !important; font-size: 30px !important; font-weight: 400 !important; font-style: italic !important; line-height: 37.5px !important; letter-spacing: normal !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__aus-title { margin-bottom: 16px !important; } .ct-mod__aus-title .clear { display: none !important; } .ct-mod__aus-meta, .ct-mod__aus-meta p { font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 22.95px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__aus-meta { margin-bottom: 22px !important; } .ct-mod__aus-meta strong { color: var(--ct-ink) !important; font-weight: 500 !important; } .ct-mod__expo-desc, .ct-mod__expo-desc p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } .ct-mod__expo-desc { margin-bottom: 20px !important; } a.ct-mod__expo-lien, .ct-mod .ct-mod__expo-lien.ct-mod__expo-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20.8px !important; letter-spacing: 0.52px !important; color: var(--ct-ink) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ct-ink) !important; border-radius: 0 !important; padding: 0 0 3px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity .2s ease; } .ct-mod__expo-lien:hover { opacity: 0.6; } .ct-mod__expo-lien:empty::after { content: attr(title) attr(data-title); } /* ---------- 5. LES LIGNES D'EXPOSITION ---------- */ .ct-mod--expo-row { background: var(--ct-paper); } /* Chaque ligne porte son filet haut et ses 44 px de rembourrage, comme `.expo-row` dans la maquette. La dernière d'une liste porte en plus le filet bas et les 90 px de rembourrage bas de la section `.expo-list`. Ces 90 px s'AJOUTENT aux 44 px de la ligne — ils ne les incluent pas : j'avais écrit 46 en croyant compléter les 44, ce qui laissait chaque liste 44 px trop courte (mesuré le 27/08/2026). */ .ct-mod--expo-row > .row { padding: 44px var(--ct-cadre-marge, 28px) !important; border-top: 1px solid var(--ct-line); } .ct-mod--expo-row--last > .row { border-bottom: 1px solid var(--ct-line); } /* Rembourrage et non marge : le fond ivoire est porté par la row, et une marge le laisserait sortir — une bande blanche apparaissait entre les listes d'expositions et la section suivante. */ .ct-mod--expo-row--last { padding-bottom: 90px; } .ct-mod--expo-row .wpb_column { width: auto !important; max-width: none !important; } .ct-mod--expo-row .uncol, .ct-mod--expo-row .uncoltable, .ct-mod--expo-row .uncell, .ct-mod--expo-row .uncont { position: static !important; display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } /* Trois dispositions, aplaties depuis les grilles imbriquées de la maquette. Les gouttières diffèrent d'une colonne à l'autre — 40 px après l'année, 36 px autour du média — donc `column-gap: 0` et des marges explicites, seule façon d'être exact. */ .ct-mod--expo-row .row-inner { display: grid !important; column-gap: 0; align-items: start; } /* Les liens sont des boîtes en ligne posées directement dans `.uncont`, sans conteneur à eux : la ligne anonyme qui les porte hérite de l'interligne du bloc et ajoute 2 px au-dessus. La maquette les enferme dans un `.expo-row-links` en flex, qui n'a pas ce talon. Mettre l'interligne du bloc à zéro ne touche que cette ligne anonyme — les modules de texte ont chacun le leur. */ .ct-mod--expo-row .uncont { line-height: 0; } .ct-mod--expo-row .uncont > .btn-container { vertical-align: top; } /* a. année | texte | grille de quatre photos */ /* Les pistes incluent la marge de gouttière que porte la colonne suivante : la maquette imbrique deux grilles (`.expo-row` puis `.expo-side`), nous en avons une seule. Une piste de 320 px avec 36 px de marge ne laisse que 284 px au média — mesuré 240 au lieu de 280 sur la ligne b le 27/08/2026. */ .ct-mod--expo-row--quad .row-inner { grid-template-columns: 120px 1fr 356px; /* 36 de gouttière + 320 de grille */ } /* b. année | photo | texte */ .ct-mod--expo-row--photo .row-inner { grid-template-columns: 120px 320px 1fr; /* 40 de gouttière + 280 de photo */ } /* c. année | texte pleine largeur */ .ct-mod--expo-row--large .row-inner { grid-template-columns: 120px 1fr; } .ct-mod__expo-texte { margin-left: 40px; } .ct-mod--expo-row--photo .ct-mod__expo-texte { margin-left: 36px; } .ct-mod__expo-quad { margin-left: 36px; align-self: start; } .ct-mod--expo-row--photo .ct-mod__expo-photo { margin-left: 40px; } .ct-mod__expo-annee, .ct-mod__expo-annee p { font-family: 'Newsreader', serif !important; font-size: 22px !important; font-weight: 400 !important; font-style: italic !important; line-height: 35.2px !important; color: var(--ct-blue) !important; margin: 0 !important; } /* Les 2 px de rembourrage haut sont sur le MODULE, pas sur le paragraphe qu'il contient : les mettre sur les deux les comptait deux fois — 39 px mesures au lieu des 37 de la maquette, sur chacune des trois lignes. */ .ct-mod__expo-annee { padding-top: 2px; } .ct-mod__expo-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ct-paper-dim); } .ct-mod__expo-photo .column-background .background-inner { filter: grayscale(50%) contrast(1.05); transition: transform .5s ease; will-change: transform; backface-visibility: hidden; } .ct-mod__expo-photo:hover .column-background .background-inner { transform: scale(1.04); } .ct-mod__expo-row-title, .ct-mod__expo-row-title *:not(.clear) { font-family: 'Jost', sans-serif !important; font-size: 22px !important; font-weight: 400 !important; font-style: normal !important; line-height: 35.2px !important; letter-spacing: normal !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__expo-row-title { margin-bottom: 10px !important; } .ct-mod__expo-row-title .clear { display: none !important; } .ct-mod__expo-row-meta, .ct-mod__expo-row-meta p { font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 22.95px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__expo-row-meta { margin-bottom: 16px !important; } .ct-mod__expo-row-meta strong { color: var(--ct-ink) !important; font-weight: 500 !important; } .ct-mod__expo-row-desc, .ct-mod__expo-row-desc p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; max-width: 700px !important; margin: 0 !important; } .ct-mod__expo-row-desc { margin-bottom: 16px !important; } .ct-mod--expo-row .btn-container { display: inline-block !important; } .ct-mod--expo-row .btn-container + .btn-container { margin-left: 20px !important; } a.ct-mod__expo-row-lien, .ct-mod .ct-mod__expo-row-lien.ct-mod__expo-row-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20.8px !important; letter-spacing: 0.52px !important; color: var(--ct-blue) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ct-blue) !important; border-radius: 0 !important; padding: 0 0 2px !important; /* La maquette écrit `.expo-row-links { margin-top: 10px }`, mais cette marge FUSIONNE avec les 16 px de marge basse du paragraphe qui précède : à l'écran l'écart mesuré est de 16 px, pas de 26. Nos liens sont des boîtes en ligne dans un `span.btn-container`, où les marges ne fusionnent pas ; les 10 px s'ajoutaient donc aux 16. On reproduit le RENDU, pas la déclaration. (Mesuré le 27/08/2026 sur la maquette.) */ margin: 0 !important; text-transform: none !important; box-shadow: none !important; } .ct-mod__expo-row-lien:empty::after { content: attr(title) attr(data-title); } /* Les deux encadrés en pointillé : une note sur une photo provisoire, et le cadre du futur enregistrement vidéo. Ce sont des CONTENUS de la maquette, pas des annotations de la designer. */ .ct-mod__note-provisoire, .ct-mod__note-provisoire p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-style: italic !important; line-height: 20.8px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__note-provisoire { display: inline-block !important; border: 1px dashed var(--ct-line); border-radius: 3px; padding: 10px 14px !important; margin-top: 8px !important; } .ct-mod__video-cadre, .ct-mod__video-cadre p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-style: italic !important; line-height: 20.8px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__video-cadre { aspect-ratio: 16 / 9; max-width: 340px; background: var(--ct-paper-dim); border: 1px solid var(--ct-line); display: flex !important; align-items: center; justify-content: center; margin-top: 16px !important; } /* La colonne qui attend un module Gallery d'Uncode. On lui donne sa place, rien d'autre : le balisage que ce module produit n'a pas été relevé, et lui imposer un style à l'aveugle ferait plus de mal que de bien. */ /* La largeur du quadrillage vient de la piste de grille (356 px moins 36 px de gouttiere) : une declaration `width` ici serait morte, battue par `.ct-mod--expo-row .wpb_column { width: auto !important }`. */ .ct-mod__expo-galerie { margin-top: 20px; } /* ---------- 6. LE COLLECTIF ---------- */ .ct-mod--collectif { background: var(--ct-paper); } .ct-mod--collectif > .row { padding: 0 var(--ct-cadre-marge, 28px) 90px !important; } /* La carte EST la row intérieure : bordure, 50 px de padding, deux colonnes séparées de 50 px, alignées en haut. */ .ct-mod--collectif .row-inner { display: grid !important; grid-template-columns: 320px 1fr; column-gap: 50px; align-items: start; border: 1px solid var(--ct-line); padding: 50px !important; } .ct-mod--collectif .wpb_column { width: auto !important; max-width: none !important; } .ct-mod--collectif .uncol, .ct-mod--collectif .uncoltable, .ct-mod--collectif .uncell, .ct-mod--collectif .uncont { position: static !important; display: block !important; width: 100%; height: auto !important; min-height: 0 !important; } .ct-mod__collectif-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ct-paper-dim); } .ct-mod__collectif-img .column-background .background-inner { filter: grayscale(50%) contrast(1.05); } .ct-mod__collectif-title, .ct-mod__collectif-title *:not(.clear) { font-family: 'Jost', sans-serif !important; font-size: 28px !important; font-weight: 400 !important; font-style: italic !important; line-height: 44.8px !important; letter-spacing: normal !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__collectif-title { margin-bottom: 10px !important; } .ct-mod__collectif-title .clear { display: none !important; } .ct-mod__collectif-membres, .ct-mod__collectif-membres p { font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 22.95px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__collectif-membres { margin-bottom: 24px !important; } /* Deux liens au milieu d'une phrase : impossible avec un bouton, qui est un bloc à part. Ils sont donc écrits dans le texte, ce que le module accepte depuis qu'on a vérifié qu'une balise y survit. */ .ct-mod__collectif-membres a { color: var(--ct-blue) !important; border-bottom: 1px solid var(--ct-blue); padding-bottom: 1px; } .ct-mod__collectif-desc, .ct-mod__collectif-desc p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; max-width: 600px !important; margin: 0 !important; } .ct-mod__collectif-desc { margin-bottom: 20px !important; } .ct-mod__collectif-badge, .ct-mod__collectif-badge p { font-family: 'Jost', sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; font-style: italic !important; line-height: 20px !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod__collectif-badge { display: inline-block !important; border: 1px dashed var(--ct-line); border-radius: 3px; padding: 8px 14px !important; } /* ---------- MOBILE ---------- */ @media (max-width: 860px) { .ct-mod--featured .row-inner { grid-template-columns: 1fr; } /* `gap: 50px` reste 50 px quand la carte passe a une colonne : l'ecart devient vertical. J'avais ecrit 30 en recopiant le rembourrage. */ .ct-mod--collectif .row-inner { grid-template-columns: 1fr; padding: 30px !important; row-gap: 50px; } .ct-mod--expo-row .row-inner { grid-template-columns: 1fr !important; row-gap: 8px; } .ct-mod__expo-texte, .ct-mod__expo-photo, .ct-mod__expo-quad { margin-left: 0 !important; } /* La maquette imbrique deux grilles aux gouttières différentes : 8 px entre l'année et le reste (`.expo-row`), 36 px entre le média et le texte (`.expo-side`). Empilées, ces deux valeurs restent distinctes. Notre grille unique porte 8 px ; les 28 px manquants sont posés sur l'élément qui suit le média. Sans cela la ligne « photo » était 27 px trop courte sur téléphone. */ .ct-mod--expo-row--photo .ct-mod__expo-texte { margin-top: 28px; } .ct-mod--expo-row--quad .ct-mod__expo-quad { margin-top: 28px; } /* `!important` : `.ct-mod--expo-row .wpb_column { width: auto !important }` est aussi spécifique, et un !important bat toujours ce qui ne l'est pas. */ .ct-mod--expo-row .ct-mod__expo-quad { width: 320px !important; max-width: 100% !important; } .ct-mod--anchors .uncont { gap: 20px; } } /* ========================================================================== PAGE « FREIE ARBEITEN » — mesuré sur src/de/freie-arbeiten-de.html ========================================================================== */ /* ---------- 1. LE HERO ---------- REVU LE 31/08/2026. La première version posait huit photos en mosaïque CSS Grid, chacune en fond de colonne. Vérifiée au pixel en simulation, elle ne rendait pourtant pas ce qui était attendu sur le staging — la cause n'a pas pu être établie, faute d'accès à la page en ligne (mur d'authentification WP Staging Pro, `WebFetch` comme le navigateur lié au poste de Laurence). Décision : une seule photo, composée à l'avance dans Photoshop, posée en fond de ROW — la technique de `.ct-mod--hero` (l'accueil), déjà en service. Une colonne unique, sans grille : la partie la plus singulière de l'ancienne recette — `.row-inner` plaqué en CSS Grid — disparaît avec elle. */ .ct-mod--fa-hero { position: relative; height: 74vh; min-height: 480px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ct-ink); } /* Toute la chaîne en `static`, comme sur `.ct-mod--hero` : la photo et le voile se calent alors sur la SECTION, et non sur la row intérieure — ni sur la boîte du texte — qu'Uncode positionne en `relative`. */ .ct-mod--fa-hero > .row, .ct-mod--fa-hero .row-inner, .ct-mod--fa-hero .wpb_column, .ct-mod--fa-hero .uncol, .ct-mod--fa-hero .uncoltable, .ct-mod--fa-hero .uncell, .ct-mod--fa-hero .uncont { position: static !important; } /* La photo : un fond de ROW (réglages WPBakery de la row, pas de la colonne), comme sur l'accueil. */ .ct-mod--fa-hero .row-background .background-inner { filter: grayscale(75%) contrast(1.1); } .ct-mod--fa-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 15, 20, 0.15) 0%, rgba(10, 15, 20, 0.55) 55%, rgba(10, 15, 20, 0.78) 100%); pointer-events: none; } /* Le texte, centré, devant la photo et le voile. z-index sur `.uncont` lui-même ne sert à rien : la remise à `static` ci-dessus le porte en `!important`, et un `position: relative` écrit sans `!important` sur le même sélecteur ne peut pas le battre — vérifié par `verif_regles.py`, qui a montré la déclaration perdante avant l'envoi. Comme sur `.ct-mod--hero` (l'accueil), le z-index se pose donc sur les MODULES de texte eux-mêmes, que la remise à `static` ne touche pas. Largeur maximale : sur `.uncol`, pas sur `.uncont`. Sous 960 px le thème enlève sa largeur maximale à `.uncont` avec un sélecteur plus spécifique que le nôtre — `verif_regles.py` l'a montré à 390 px. Sur `.uncol`, il ne la touche pas. PAS de marge latérale ici : une tentative de `padding: 0 28px` sur ce même `.uncol` a été écrite, puis retirée — elle perdait toujours contre `.ct-mod .uncol { padding: 0 !important }` (plus haut dans cette feuille), sans que `verif_regles.py` le signale comme un défaut, parce que les deux sélecteurs nomment `.uncol` et que son heuristique d'« affinage assumé » ne vérifie pas LEQUEL des deux est censé l'emporter. Mesuré directement (`tmp/verifie_padding_hero.py`) : le padding calculé est 0 aux deux largeurs. Ce n'est pourtant pas un défaut visuel — la marge de 28 px que la maquette demande vient déjà du padding de `.row` (`.ct-mod > .row`, plus haut, commun à toutes les sections) : le texte ne touche jamais le bord. La déclaration retirée était simplement inutile, pas cassée. */ .main-container .ct-mod--fa-hero .uncol { max-width: 640px; margin: 0 auto; } .ct-mod--fa-hero .uncont { text-align: center !important; } .ct-mod__fa-hero-eyebrow, .ct-mod__fa-hero-titre, .ct-mod__fa-hero-lede { position: relative; z-index: 2; } .ct-mod__fa-hero-eyebrow, .ct-mod__fa-hero-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue-light) !important; text-align: center !important; margin-bottom: 22px !important; } .ct-mod__fa-hero-titre, .ct-mod__fa-hero-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-weight: 350 !important; font-size: clamp(38px, 6vw, 68px) !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; color: var(--ct-paper) !important; text-align: center !important; margin: 0 !important; } .ct-mod__fa-hero-titre .clear { display: none !important; } .ct-mod__fa-hero-titre { margin-bottom: 26px !important; } .ct-mod__fa-hero-lede, .ct-mod__fa-hero-lede p { font-weight: 300 !important; color: #e4e1d8 !important; text-align: center !important; margin: 0 auto !important; max-width: 480px; } /* La flèche de défilement : une invite animée, pas un contenu. Elle est dessinée ici (en `::before`, `::after` porte déjà le voile), et déclarée dans verif_textes.py. */ .ct-mod--fa-hero::before { content: "↓"; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; color: #e4e1d8; font-family: 'Jost', sans-serif; font-size: 22px; line-height: 1; opacity: 0.8; animation: ctHintBounce 2.4s ease-in-out infinite; pointer-events: none; } @keyframes ctHintBounce { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; } 50% { transform: translateX(-50%) translateY(6px); opacity: 1; } } /* ---------- 2. BANDEAU « DIE SERIEN » ---------- */ .ct-mod--sc-head { background: var(--ct-paper); } .ct-mod--sc-head > .row { padding: 70px var(--ct-cadre-marge, 28px) 44px !important; } .ct-mod--sc-head .uncont { text-align: center !important; } .ct-mod__sc-eyebrow, .ct-mod__sc-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; text-align: center !important; } .ct-mod__sc-eyebrow { margin-bottom: 12px !important; } .ct-mod__sc-titre, .ct-mod__sc-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 26px !important; font-weight: 400 !important; line-height: 41.6px !important; letter-spacing: -0.26px !important; color: var(--ct-ink) !important; text-align: center !important; margin: 0 !important; } .ct-mod__sc-titre .clear { display: none !important; } /* ---------- 3. LES QUATRE CARTES DE SÉRIES ---------- */ .ct-mod--sc-grid { background: var(--ct-paper); } .ct-mod--sc-grid > .row { padding: 0 var(--ct-cadre-marge, 28px) 100px !important; border-bottom: 1px solid var(--ct-line); } .ct-mod--sc-grid .row-inner { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 2px; } .ct-mod--sc-grid .wpb_column { width: auto !important; max-width: none !important; padding: 0 !important; } /* Comme pour les cartes de la Startseite : le libellé est posé en absolu, et `.uncol` en `relative` ferait 0 px de haut — le libellé se calerait sur une boîte plate, au-dessus de la carte, donc coupé par `overflow: hidden`. */ .ct-mod--sc-grid .uncol, .ct-mod--sc-grid .uncoltable, .ct-mod--sc-grid .uncell, .ct-mod--sc-grid .uncont { position: static !important; height: 100%; } .ct-mod__sc-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ct-paper-dim); } /* Le dégradé couvre TOUTE la carte, pas seulement le libellé. */ .ct-mod__sc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 17, 20, 0.02) 45%, rgba(10, 15, 20, 0.82) 100%); pointer-events: none; } .ct-mod__sc-card .column-background .background-inner { filter: grayscale(65%) contrast(1.05); transition: transform .5s ease, filter .5s ease; will-change: transform, filter; backface-visibility: hidden; } .ct-mod__sc-card .column-background { pointer-events: none; } .ct-mod__sc-card:hover .column-background .background-inner { transform: scale(1.05) !important; filter: grayscale(15%); } /* Le libellé : un seul module, deux paragraphes — le numéro puis le titre. */ .ct-mod__sc-label { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px !important; margin: 0 !important; color: var(--ct-paper); } .ct-mod__sc-label p { margin: 0 !important; } .ct-mod__sc-label p:first-child { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 17.6px !important; letter-spacing: 1.54px !important; text-transform: uppercase !important; color: var(--ct-blue-light) !important; margin-bottom: 6px !important; } .ct-mod__sc-label p:last-child { font-family: 'Newsreader', serif !important; font-size: 15px !important; font-weight: 400 !important; font-style: italic !important; line-height: 21.25px !important; color: var(--ct-paper) !important; } /* Le lien de la carte : la maquette fait de la carte entière un ``, ce qu'une colonne WPBakery ne permet pas. Le lien est donc étendu par-dessus, sans libellé visible — son nom accessible vient de l'attribut `title`, que Céline modifie comme le reste. PAS de règle `:empty::after` ici : c'est elle qui affiche le libellé des autres liens. */ .ct-mod__sc-card .btn-container { position: absolute !important; inset: 0; z-index: 3; display: block !important; margin: 0 !important; } a.ct-mod__sc-lien, .ct-mod .ct-mod__sc-lien.ct-mod__sc-lien { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; } /* ---------- 4. LA CLÔTURE ---------- */ .ct-mod--fa-closing { background: var(--ct-paper); } .ct-mod--fa-closing > .row { max-width: 640px !important; padding: 100px var(--ct-cadre-marge, 28px) !important; } /* Uncode aligne à gauche le contenu d'une colonne avec sept sélecteurs ; `!important` est le seul moyen de reprendre la main. */ .ct-mod--fa-closing .uncont { text-align: center !important; } /* Uncode met `.btn-container` en `display: block`. Dans la maquette le lien est une boîte EN LIGNE, posée dans une ligne de texte : l'alignement sur la ligne de base le descend de 4 px sous le paragraphe. Mesuré : 34 px de distance dans la maquette, 30 chez nous. On remet la boîte en ligne, plutôt que d'ajouter 4 px à une marge — la cause, pas le nombre. */ .ct-mod--fa-closing .btn-container { display: inline-block !important; } /* Uncode pose aussi `vertical-align: middle` sur `.btn`. Dans la maquette le lien est aligné sur la ligne de base : les 3 px qui restaient venaient de là. (`display: contents` sur l'enveloppe réglait la ligne de base mais supprimait la boîte, et le lien n'était plus centré.) */ .ct-mod--fa-closing .btn-container, .ct-mod__fa-lien { vertical-align: baseline !important; } .ct-mod__fa-eyebrow, .ct-mod__fa-eyebrow p { font-weight: 500 !important; letter-spacing: 1.92px !important; color: var(--ct-blue) !important; text-align: center !important; } .ct-mod__fa-eyebrow { margin-bottom: 22px !important; } .ct-mod__fa-citation, .ct-mod__fa-citation p { font-family: 'Newsreader', serif !important; font-size: 21px !important; font-weight: 400 !important; font-style: italic !important; line-height: 33.6px !important; color: var(--ct-ink) !important; text-align: center !important; margin: 0 !important; } .ct-mod__fa-citation { margin-bottom: 30px !important; } .ct-mod__fa-texte, .ct-mod__fa-texte p { font-weight: 300 !important; color: #3d3f43 !important; text-align: center !important; margin: 0 auto !important; max-width: 540px; } .ct-mod__fa-texte { margin-bottom: 30px !important; } a.ct-mod__fa-lien, .ct-mod .ct-mod__fa-lien.ct-mod__fa-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 20.8px !important; letter-spacing: 0.78px !important; color: var(--ct-ink) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ct-ink) !important; border-radius: 0 !important; padding: 0 0 4px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity .2s ease; } .ct-mod__fa-lien:hover { opacity: 0.6 !important; } .ct-mod__fa-lien:empty::after { content: attr(title) attr(data-title); } /* ---------- MOBILE ---------- */ @media (max-width: 860px) { /* Le hero n'a plus de grille à replier : `74vh` + `min-height: 480px` restent responsives sans réglage supplémentaire. */ .ct-mod--sc-grid .row-inner { grid-template-columns: 1fr 1fr; } } /* ========================================================================== LE FIL D'ARIANE — partagé par « München mal anders », « Berufliche Porträts », « Privatporträts » et « Familienporträts » -------------------------------------------------------------------------- Mesuré à l'identique sur les quatre maquettes : `max-width:1200px; padding:14px 28px 0; font-size:12px; color:var(--grey); letter-spacing:0.03em`, un seul lien en bleu. Un module de texte, avec un `` en ligne — vérifié le 26/08/2026, une balise survit au collage. ========================================================================== */ .ct-mod--breadcrumb { background: var(--ct-paper); } .ct-mod--breadcrumb > .row { padding: 14px var(--ct-cadre-marge, 28px) 0 !important; } .ct-mod--breadcrumb .row-inner { display: block; } .ct-mod__breadcrumb, .ct-mod__breadcrumb p { font-family: 'Jost', sans-serif !important; font-size: 12px !important; color: var(--ct-grey) !important; letter-spacing: 0.36px !important; margin: 0 !important; } .ct-mod__breadcrumb a { color: var(--ct-blue) !important; } /* ========================================================================== COMPOSANT RÉUTILISABLE — GABARIT « PORTRAITS » -------------------------------------------------------------------------- Commun à « Berufliche Porträts », « Privatporträts » et « Familienporträts » : les trois maquettes partagent, à la virgule près, le hero, l'introduction à deux colonnes, la bande « Ablauf » à trois étapes et la bande CTA finale. Ce qui diffère (dégradé du hero, largeur des titres, couleur du bouton CTA) est isolé dans un modificateur par page, posé EN PLUS de la classe de base — même principe que `.ct-mod--cards` / `-3` / `-4`. LES TROIS GALERIES NE SONT PAS ICI. Laurence pose lui-même le module Gallery d'Uncode (grille de trois pour Berufliche/Privatporträts, masonry pour Familienporträts) : je n'ai pas relevé le balisage qu'il produit, et je ne l'invente pas. Seul l'en-tête de chaque galerie (le texte) est construit ; la grille de photos elle-même est un emplacement vide. Les encadrés bleus des maquettes (`.note`) sont des annotations de la designer, pas du contenu : ils ne sont pas repris, comme demandé. ========================================================================== */ /* ---------- 1. HERO — mesuré sur .hero des trois maquettes ---------- */ .ct-mod--sub-hero { position: relative; height: 70vh; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; } .ct-mod--sub-hero > .row, .ct-mod--sub-hero .row-inner, .ct-mod--sub-hero .wpb_column, .ct-mod--sub-hero .uncol, .ct-mod--sub-hero .uncoltable, .ct-mod--sub-hero .uncell, .ct-mod--sub-hero .uncont { position: static !important; } .ct-mod--sub-hero > .row { padding: 0 var(--ct-cadre-marge, 28px) 56px !important; } .ct-mod--sub-hero .row-inner { display: block; } .ct-mod--sub-hero .uncont { color: var(--ct-paper); } /* La photo et le voile : dégradé et désaturage propres à chaque page, comme dans les maquettes (`.hero-img{ background: linear-gradient(...), url(...); filter: grayscale(...) contrast(1.1) }`). */ .ct-mod--sub-hero--pro .row-background .background-inner { filter: grayscale(85%) contrast(1.1); } .ct-mod--sub-hero--particuliers .row-background .background-inner { filter: grayscale(78%) contrast(1.1); } .ct-mod--sub-hero--famille .row-background .background-inner { filter: grayscale(80%) contrast(1.1); } .ct-mod--sub-hero--pro::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 18, 28, 0.15) 0%, rgba(10, 18, 28, 0.65) 100%); } .ct-mod--sub-hero--particuliers::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 18, 28, 0.1) 0%, rgba(10, 18, 28, 0.62) 100%); } .ct-mod--sub-hero--famille::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 18, 28, 0.1) 0%, rgba(10, 18, 28, 0.6) 100%); } .ct-mod__sub-hero-eyebrow, .ct-mod__sub-hero-titre, .ct-mod__sub-hero-sub { position: relative; z-index: 2; } .ct-mod__sub-hero-eyebrow, .ct-mod__sub-hero-eyebrow p { font-weight: 400 !important; color: var(--ct-blue-light) !important; letter-spacing: 2.4px !important; } .ct-mod__sub-hero-eyebrow { margin-bottom: 16px !important; } .ct-mod__sub-hero-titre, .ct-mod__sub-hero-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: clamp(34px, 5.2vw, 58px) !important; font-weight: 350 !important; font-style: normal !important; line-height: 1.1 !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__sub-hero-titre .clear { display: none !important; } /* Largeur mesurée par page : 680 px (pro, famille), 660 px (particuliers). */ .ct-mod--sub-hero--pro .ct-mod__sub-hero-titre { max-width: 680px !important; } .ct-mod--sub-hero--particuliers .ct-mod__sub-hero-titre { max-width: 660px !important; } .ct-mod--sub-hero--famille .ct-mod__sub-hero-titre { max-width: 680px !important; } .ct-mod__sub-hero-sub, .ct-mod__sub-hero-sub p { font-family: 'Jost', sans-serif !important; font-size: 15px !important; font-weight: 300 !important; color: var(--ct-on-dark) !important; margin: 0 !important; } .ct-mod__sub-hero-sub { margin-top: 18px !important; } .ct-mod--sub-hero--pro .ct-mod__sub-hero-sub { max-width: 480px !important; } .ct-mod--sub-hero--particuliers .ct-mod__sub-hero-sub { max-width: 460px !important; } .ct-mod--sub-hero--famille .ct-mod__sub-hero-sub { max-width: 460px !important; } /* ---------- 2. INTRO — deux colonnes, mesuré sur .intro ---------- */ .ct-mod--portrait-intro { background: var(--ct-paper); } .ct-mod--portrait-intro > .row { padding: 100px var(--ct-cadre-marge, 28px) 90px !important; border-bottom: 1px solid var(--ct-line); } .ct-mod--portrait-intro .row-inner { display: grid !important; grid-template-columns: 1fr 1.2fr; gap: 70px; } /* Réutilisé pour les en-têtes de bande (« Für wen? », « Zu welchem Anlass », « Auswahl ») : dans les trois maquettes ce sont, sans exception, la même classe `.eyebrow` générique — aucune surcharge propre à la page. */ .ct-mod__portrait-eyebrow, .ct-mod__portrait-eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.92px !important; } .ct-mod__portrait-eyebrow { margin-bottom: 20px !important; } .ct-mod__portrait-titre, .ct-mod__portrait-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 32px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.3 !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__portrait-titre .clear { display: none !important; } /* Les deux paragraphes de l'intro suivent le corps de texte unifié (17 px / 31,45), comme le reste du site depuis le 27/08/2026 : aucune taille ici. */ .ct-mod__portrait-text, .ct-mod__portrait-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } /* La citation encadrée — un traitement à part, pas un paragraphe de lecture : même logique que le pull-quote de blog-article dans l'ancienne feuille. */ .ct-mod__portrait-quote, .ct-mod__portrait-quote p { font-family: 'Newsreader', serif !important; font-size: 15.5px !important; font-style: italic !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } .ct-mod__portrait-quote { margin-top: 26px !important; padding: 22px 24px !important; background: var(--ct-paper-dim); border-left: 2px solid var(--ct-blue); } /* ---------- 3. BANDE À CARTES NUMÉROTÉES — « Für wen? » / « Zu welchem Anlass » ---------- */ /* Socle commun aux deux bandes ; le nombre de colonnes (2 pour Berufliche Porträts, 4 pour Privatporträts) est un second modificateur, comme pour `.ct-mod--cards`. */ .ct-mod--num-band { background: var(--ct-paper-dim); border-top: 1px solid var(--ct-line); border-bottom: 1px solid var(--ct-line); } .ct-mod--num-band > .row { padding: 90px var(--ct-cadre-marge, 28px) !important; } .ct-mod--num-band .row-inner { display: block; } /* Largeur mesurée par page : 560 px sur « Für wen? » (Berufliche Porträts), 520 px sur « Zu welchem Anlass » (Privatporträts) — écart réel entre les deux maquettes, pas une approximation. Le modificateur de page se pose directement sur cette row, comme `.ct-mod--sub-hero--pro/--particuliers`. */ .ct-mod__num-band-head { max-width: 560px; margin-bottom: 50px !important; } .ct-mod--num-band--particuliers .ct-mod__num-band-head { max-width: 520px; } .ct-mod--num-band-grid > .row { padding: 0 var(--ct-cadre-marge, 28px) 90px !important; } .ct-mod--num-band-grid .row-inner { display: grid !important; } .ct-mod--num-band-grid-2 .row-inner { grid-template-columns: repeat(2, 1fr); gap: 50px; } .ct-mod--num-band-grid-4 .row-inner { grid-template-columns: repeat(4, 1fr); gap: 36px; } /* DÉCISIF, trouvé le 31/08/2026 — même défaut, même correction que `.ct-mod--testimonials-grid .ct-mod__testi-item` et `.ct-mod--approach- steps .ct-mod__step-item` (voir leurs commentaires) : sans cette ligne, chaque carte ne fait qu'une fraction (33 % ou 25 %, selon le nombre de colonnes) de la largeur déjà répartie par la grille. */ .ct-mod--num-band-grid .ct-mod__num-item { width: auto !important; max-width: none !important; } /* Le titre de bande (30 px) : identique pour « Für wen? » et « Zu welchem Anlass », et réutilisé plus bas pour l'en-tête de chaque galerie. */ .ct-mod__band-titre, .ct-mod__band-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 30px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.3 !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__band-titre { margin-bottom: 12px !important; } .ct-mod__band-titre .clear { display: none !important; } /* Le chapeau de bande suit lui aussi le corps de texte unifié. */ .ct-mod__band-text, .ct-mod__band-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-grey) !important; margin: 0 !important; } /* Numéro, titre, description de chaque carte. */ .ct-mod__num-num, .ct-mod__num-num p { font-family: 'Newsreader', serif !important; font-style: italic !important; font-weight: 400 !important; color: var(--ct-blue) !important; margin: 0 !important; } .ct-mod__num-num { margin-bottom: 14px !important; } /* Taille propre à chaque bande : 26 px (2 cartes), 24 px (4 cartes). */ .ct-mod--num-band-grid-2 .ct-mod__num-num { font-size: 26px !important; } .ct-mod--num-band-grid-4 .ct-mod__num-num { font-size: 24px !important; } /* Le titre de carte : un `
` pour Berufliche Porträts (deux cartes, pas de niveau de titre dans la maquette), un vrai `

` pour Privatporträts (quatre cartes, la maquette y met un `

`) — écart entre les deux gabarits, voulu par la maquette, pas une incohérence. */ .ct-mod__num-titre, .ct-mod__num-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-weight: 400 !important; font-style: normal !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__num-titre .clear { display: none !important; } .ct-mod--num-band-grid-2 .ct-mod__num-titre { font-size: 20px !important; margin-bottom: 12px !important; } /* Remis à 18px le 17/09/2026 (plugin 1.9.13) : Laurence a annulé la version 1.9.12. Le 17/09, l'audit du guide typographique de la cliente (guide-typographie.docx) avait fait passer cette valeur à 16px (accord entre le guide et la maquette source src/maquette-particuliers-2.html, .occ h3 { font-size:16px; }) — voir CHANGELOG 1.9.12 pour le détail de cet audit, qui reste valable comme référence même si la correction est annulée ici. Revenu à 18px sur instruction explicite de Laurence (« on annule cette version »), sans nouvelle justification technique. */ .ct-mod--num-band-grid-4 .ct-mod__num-titre { font-size: 18px !important; margin-bottom: 8px !important; } .ct-mod__num-desc, .ct-mod__num-desc p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } /* 15,5 px pour les deux cartes (suit le corps unifié, aucune taille ici) ; 13,5 px pour les quatre cartes, plus dense — écart mesuré, assumé. */ .ct-mod--num-band-grid-4 .ct-mod__num-desc, .ct-mod--num-band-grid-4 .ct-mod__num-desc p { font-size: 13.5px !important; line-height: 20.8px !important; color: var(--ct-grey) !important; } /* ---------- 4. EN-TÊTE DE GALERIE — texte seul, la grille de photos est posée par Laurence ---------- */ .ct-mod--gallery-head { background: var(--ct-paper); } .ct-mod--gallery-head > .row { padding: 100px var(--ct-cadre-marge, 28px) 0 !important; } .ct-mod--gallery-head .row-inner { display: block; } .ct-mod__gallery-head-col { max-width: 520px; } /* Le chapeau de galerie : 14,5 px sur Berufliche Porträts et Privatporträts — en dessous du seuil de 15 px du corps de texte unifié, donc une étiquette, pas un paragraphe de lecture (voir la règle 7 de claude/etat-du-chantier.md). Familienporträts n'a PAS ce paragraphe dans sa maquette : sa bande « Unsere Fotoserien » n'a qu'un eyebrow et un titre, cette classe n'y est donc simplement jamais posée. */ .ct-mod__gallery-head-text, .ct-mod__gallery-head-text p { font-family: 'Jost', sans-serif !important; font-size: 14.5px !important; font-weight: 300 !important; color: var(--ct-grey) !important; margin: 0 !important; } .ct-mod--gallery-slot { background: var(--ct-paper); } .ct-mod--gallery-slot > .row { padding: 50px var(--ct-cadre-marge, 28px) 100px !important; } .ct-mod--gallery-slot .row-inner { display: block; } /* ---------- 5. « ABLAUF » — trois étapes numérotées, fond sombre ---------- */ .ct-mod--approach { background: var(--ct-ink); color: var(--ct-paper); } .ct-mod--approach > .row { padding: 100px var(--ct-cadre-marge, 28px) 0 !important; } .ct-mod--approach .row-inner { display: block; } .ct-mod__approach-eyebrow, .ct-mod__approach-eyebrow p { font-weight: 500 !important; color: var(--ct-blue-light) !important; letter-spacing: 1.92px !important; } .ct-mod__approach-eyebrow { margin-bottom: 16px !important; } .ct-mod__approach-titre, .ct-mod__approach-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 32px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.3 !important; color: var(--ct-paper) !important; text-transform: none !important; max-width: 560px; margin: 0 !important; } .ct-mod__approach-titre .clear { display: none !important; } .ct-mod--approach-steps { background: var(--ct-ink); color: var(--ct-paper); } .ct-mod--approach-steps > .row { padding: 0 var(--ct-cadre-marge, 28px) 100px !important; } .ct-mod--approach-steps .row-inner { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 50px; } /* DÉCISIF, trouvé le 31/08/2026 en vérifiant la correction des sur Familienporträts (voir le commentaire complet sur `.ct-mod--testimonials- grid .ct-mod__testi-item` plus haut) : sans cette ligne, Uncode donne à `.ct-mod__step-item` (`.col-lg-4`) une largeur de 33,33 % calculée sur la largeur DÉJÀ RÉPARTIE par la grille — la carte ne fait plus qu'un tiers de sa colonne, 116 px au lieu de 348. Même défaut, même correction que `.ct-mod--work-grid .ct-mod__card`, `.ct-mod--cards .wpb_column`, etc. */ .ct-mod--approach-steps .ct-mod__step-item { width: auto !important; max-width: none !important; } /* Même piège que partout ailleurs sur le site : sans cette remise à `static`, un fond de colonne se calerait mal — ici il n'y en a pas, mais la remise à zéro de la hauteur minimale reste nécessaire, comme pour `.ct-mod__pole`. */ .ct-mod--approach-steps .uncol, .ct-mod--approach-steps .uncoltable, .ct-mod--approach-steps .uncell, .ct-mod--approach-steps .uncont { display: block !important; height: auto !important; min-height: 0 !important; } .ct-mod__step-num, .ct-mod__step-num p { font-family: 'Newsreader', serif !important; font-size: 32px !important; font-style: italic !important; font-weight: 400 !important; color: var(--ct-blue-light) !important; margin: 0 !important; } .ct-mod__step-num { margin-bottom: 18px !important; } .ct-mod__step-titre, .ct-mod__step-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 19px !important; font-weight: 400 !important; font-style: normal !important; color: var(--ct-paper) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__step-titre { margin-bottom: 12px !important; } .ct-mod__step-titre .clear { display: none !important; } /* Suit le corps de texte unifié ; seules la couleur (sur fond sombre) et la graisse restent propres à ce bloc. */ .ct-mod__step-desc, .ct-mod__step-desc p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-on-dark-mute) !important; margin: 0 !important; } /* ---------- 6. TÉMOIGNAGES — deux ou trois colonnes ---------- */ .ct-mod--testimonials { background: var(--ct-paper); } .ct-mod--testimonials > .row { max-width: 1000px !important; padding: 100px var(--ct-cadre-marge, 28px) 20px !important; } .ct-mod--testimonials .row-inner { display: block; } .ct-mod__testimonials-head { text-align: center; margin-bottom: 56px !important; } .ct-mod__testimonials-eyebrow, .ct-mod__testimonials-eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.92px !important; text-align: center !important; } .ct-mod__testimonials-eyebrow { margin-bottom: 16px !important; } .ct-mod__testimonials-titre, .ct-mod__testimonials-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 28px !important; font-weight: 400 !important; font-style: normal !important; text-align: center !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__testimonials-titre .clear { display: none !important; } .ct-mod--testimonials-grid > .row { max-width: 1000px !important; padding: 0 var(--ct-cadre-marge, 28px) 100px !important; } .ct-mod--testimonials-grid .row-inner { display: grid !important; gap: 44px; } /* Deux colonnes, cadre resserré à 700 px (Privatporträts, témoignages provisoires) ; trois colonnes, pleine largeur (Familienporträts, vrais témoignages). */ .ct-mod--testimonials-grid-2 .row-inner { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 0 auto; } .ct-mod--testimonials-grid-3 .row-inner { grid-template-columns: repeat(3, 1fr); } /* DÉCISIF, trouvé le 31/08/2026 en vérifiant la correction des . Uncode donne à chaque colonne (`.wpb_column.col-lg-N`) une largeur en POURCENTAGE héritée de son ancien système en tableau (ex. `.col-lg-4 { width: 33.33% }`). Une fois `.row-inner` passé en grille, ce pourcentage se calcule sur la largeur DÉJÀ RÉPARTIE de la colonne (un tiers de la rangée), pas sur la rangée entière : la colonne ne fait plus qu'un tiers de ce tiers, 95 px au lieu de 285 sur Familienporträts. Les remplacés par deux modules `inline-block` (voir plus bas) l'ont rendu visible : ils passaient à la ligne, faute de place. Même défaut, même corrections déjà en place ailleurs — voir `.ct-mod--poles .ct-mod__pole`, `.ct-mod--featured .wpb_column`, `.ct-mod--collectif .wpb_column`, `.ct-mod--serie-promo/.ct-mod--serie-nav .wpb_column`. */ .ct-mod--testimonials-grid .ct-mod__testi-item { width: auto !important; max-width: none !important; } /* Emplacement réservé (Privatporträts) — la maquette annote ces deux boîtes d'une note bleue expliquant qu'elles attendent les vrais témoignages ; l'annotation n'est pas reprise, la boîte l'est, c'est le contenu prévu par la maquette. */ .ct-mod__testi-placeholder, .ct-mod__testi-placeholder p { font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; font-style: italic !important; color: var(--ct-grey) !important; text-align: center !important; margin: 0 !important; } .ct-mod__testi-placeholder { border: 1px dashed var(--ct-line); border-radius: 4px; padding: 28px 24px !important; min-height: 120px; display: flex; align-items: center; justify-content: center; } /* Vrai témoignage (Familienporträts). La citation est un traitement à part, pas un paragraphe de lecture — même logique que la citation de l'intro. */ .ct-mod__testi-quote, .ct-mod__testi-quote p { font-family: 'Newsreader', serif !important; font-size: 16.5px !important; font-style: italic !important; font-weight: 400 !important; line-height: 26.4px !important; color: var(--ct-ink-soft) !important; margin: 0 !important; } .ct-mod__testi-quote { margin-bottom: 18px !important; } .ct-mod__testi-quote::before { content: "\201C"; color: var(--ct-blue); font-size: 22px; margin-right: 2px; } /* CORRIGÉ LE 31/08 — le prénom n'est plus un dans le texte du module : posé chez Laurence, il s'est affiché comme du texte littéral (« Agnès »), capture d'écran à l'appui, au lieu de passer en gras. Cause côté WordPress non confirmée (fort probablement le mode de collage dans l'éditeur), et non vérifiable d'ici — la maquette WP Staging Pro reste derrière son mur d'authentification. Correction robuste, indépendante de la cause : le prénom devient un second module Text Block à part entière (`.ct-mod__testi-name-fort`), mis en ligne avec le reste par CSS plutôt que par une balise dans le contenu. Même technique que la ligne de titre de la hero de l'accueil (« Ein » / « anderer Blick », deux modules `inline-block`). Précaution appliquée aux quatre pages livrées ce jour-là : plus aucune balise HTML écrite dans le contenu d'un module. */ .ct-mod__testi-name, .ct-mod__testi-name p, .ct-mod__testi-name-fort, .ct-mod__testi-name-fort p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; letter-spacing: 0.52px !important; margin: 0 !important; } .ct-mod__testi-name, .ct-mod__testi-name p { color: var(--ct-grey) !important; font-weight: 400 !important; } .ct-mod__testi-name-fort, .ct-mod__testi-name-fort p { color: var(--ct-ink) !important; font-weight: 500 !important; } .ct-mod__testi-name, .ct-mod__testi-name-fort { display: inline-block; } .ct-mod__testi-name-fort + .ct-mod__testi-name { margin-left: 0.3em !important; } /* ---------- 7. BANDE CTA FINALE ---------- */ /* Deux habillages mesurés : plein bleu, centré, sur fond papier (Berufliche Porträts) ; contour encre sur fond beige, plus discret, aligné sur Familienporträts (Privatporträts, Familienporträts). Modificateur en plus de la classe de base, comme le reste du gabarit. */ .ct-mod--cta-band { text-align: center; } .ct-mod--cta-band > .row { max-width: var(--ct-cadre, 1200px) !important; padding: 100px var(--ct-cadre-marge, 28px) !important; } .ct-mod--cta-band--pro { background: var(--ct-paper); } .ct-mod--cta-band--particuliers, .ct-mod--cta-band--famille { background: var(--ct-paper-dim); border-top: 1px solid var(--ct-line); } .ct-mod--cta-band--particuliers > .row, .ct-mod--cta-band--famille > .row { max-width: 100% !important; padding: 90px var(--ct-cadre-marge, 28px) !important; } .ct-mod--cta-band .row-inner { display: block; } .ct-mod__cta-titre, .ct-mod__cta-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-weight: 400 !important; font-style: normal !important; text-align: center !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__cta-titre .clear { display: none !important; } .ct-mod--cta-band--pro .ct-mod__cta-titre { font-size: 34px !important; margin-bottom: 16px !important; } .ct-mod--cta-band--particuliers .ct-mod__cta-titre, .ct-mod--cta-band--famille .ct-mod__cta-titre { font-size: 28px !important; margin-bottom: 14px !important; } .ct-mod__cta-text, .ct-mod__cta-text p { font-family: 'Jost', sans-serif !important; font-size: 15.5px !important; font-weight: 300 !important; text-align: center !important; color: var(--ct-grey) !important; margin: 0 auto !important; } .ct-mod--cta-band--pro .ct-mod__cta-text { max-width: 460px !important; margin-bottom: 26px !important; } .ct-mod--cta-band--particuliers .ct-mod__cta-text { max-width: 460px !important; margin-bottom: 26px !important; } .ct-mod--cta-band--famille .ct-mod__cta-text { max-width: 440px !important; margin-bottom: 26px !important; } /* CORRIGÉ LE 31/08 — même défaut, même correction que `.ct-mod__testi-name` ci-dessus : le montant n'est plus un dans le contenu du module (il s'affichait littéralement une fois posé). Le segment en gras devient `.ct-mod__cta-price-fort`, un module à part, mis en ligne par CSS. Une phrase peut donc s'écrire en 2 ou 3 modules successifs (`ct-mod__cta-price` / `ct-mod__cta-price-fort` / `ct-mod__cta-price`) — l'espacement entre segments est posé par la feuille, pas par le texte. */ .ct-mod__cta-price, .ct-mod__cta-price p, .ct-mod__cta-price-fort, .ct-mod__cta-price-fort p { font-family: 'Jost', sans-serif !important; font-size: 14.5px !important; text-align: center !important; margin: 0 !important; } .ct-mod__cta-price, .ct-mod__cta-price p { font-weight: 300 !important; color: var(--ct-grey) !important; } .ct-mod__cta-price-fort, .ct-mod__cta-price-fort p { font-weight: 500 !important; color: var(--ct-ink) !important; } .ct-mod__cta-price, .ct-mod__cta-price-fort { display: inline-block; margin-bottom: 26px !important; } .ct-mod__cta-price + .ct-mod__cta-price, .ct-mod__cta-price + .ct-mod__cta-price-fort, .ct-mod__cta-price-fort + .ct-mod__cta-price, .ct-mod__cta-price-fort + .ct-mod__cta-price-fort { margin-left: 0.3em !important; } /* Le bouton : plein bleu (Berufliche Porträts) ou contour encre (Privatporträts, Familienporträts) — même lien, deux habillages. */ a.ct-mod__cta-lien, .ct-mod .ct-mod__cta-lien.ct-mod__cta-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.78px !important; border-radius: 2px !important; padding: 14px 30px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; transition: opacity .2s ease, background-color .2s ease, color .2s ease; } .ct-mod--cta-band--pro a.ct-mod__cta-lien { background: var(--ct-blue) !important; color: var(--ct-paper) !important; border: 0 !important; } .ct-mod--cta-band--pro a.ct-mod__cta-lien:hover { opacity: 0.85 !important; } .ct-mod--cta-band--particuliers a.ct-mod__cta-lien, .ct-mod--cta-band--famille a.ct-mod__cta-lien { background: transparent !important; color: var(--ct-ink) !important; border: 1px solid var(--ct-ink) !important; padding: 13px 28px !important; } .ct-mod--cta-band--particuliers a.ct-mod__cta-lien:hover, .ct-mod--cta-band--famille a.ct-mod__cta-lien:hover { background: var(--ct-ink) !important; color: var(--ct-paper) !important; } .ct-mod__cta-lien:empty::after { content: attr(title) attr(data-title); } @media (max-width: 860px) { .ct-mod--portrait-intro .row-inner { grid-template-columns: 1fr; } .ct-mod--num-band-grid-2 .row-inner { grid-template-columns: 1fr; gap: 36px; } .ct-mod--num-band-grid-4 .row-inner { grid-template-columns: 1fr 1fr; } .ct-mod--approach-steps .row-inner { grid-template-columns: 1fr; gap: 36px; } .ct-mod--testimonials-grid-2 .row-inner, .ct-mod--testimonials-grid-3 .row-inner { grid-template-columns: 1fr; gap: 36px; } } /* ---------- 8. « BERUFLICHE PORTRÄTS » — propre à cette page ---------- */ /* L'audience est le gabarit à deux cartes du composant réutilisable ci-dessus : `.ct-mod--num-band` + `.ct-mod--num-band-grid.ct-mod--num- band-grid-2`, posé directement dans `fabrique/page_portraet_professionell.py` — aucune classe de plus ici. */ /* ========================================================================== PAGE « München mal anders » — patron « série », mesuré sur src/de/serie-muenchen-de.html -------------------------------------------------------------------------- Premier des quatre gabarits « série » (les trois autres — Die Wiesn mal anders, Zwischen Linien und Kurven, In den Straßen von Berlin — n'ont pas encore de maquette, cf. claude/audit-technique-refonte.md). Ce jeu de classes est prévu pour être rejoué tel quel sur elles. LA SÉQUENCE DE PHOTOS (masonry, 21 images) N'EST PAS ICI. Laurence pose lui-même le module Gallery d'Uncode ; je n'ai pas relevé le balisage qu'il produit pour une grille masonry, et je ne l'invente pas. Son emplacement est prêt : une row vide, cadrée comme la maquette. Le fil d'Ariane est `.ct-mod--breadcrumb` / `.ct-mod__breadcrumb`, déjà posé plus haut dans cette feuille — commun aux quatre pages construites cette fois-ci. ========================================================================== */ .ct-mod--serie-head { background: var(--ct-paper); } .ct-mod--serie-head > .row { max-width: 700px !important; padding: 100px var(--ct-cadre-marge, 28px) 30px !important; } .ct-mod--serie-head .row-inner { display: block; } .ct-mod__serie-eyebrow, .ct-mod__serie-eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.92px !important; text-align: center !important; } .ct-mod__serie-eyebrow { margin-bottom: 18px !important; } .ct-mod__serie-titre, .ct-mod__serie-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: clamp(32px, 4.4vw, 48px) !important; font-weight: 350 !important; font-style: italic !important; line-height: 1.2 !important; text-align: center !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__serie-titre { margin-bottom: 16px !important; } .ct-mod__serie-titre .clear { display: none !important; } .ct-mod__serie-lede, .ct-mod__serie-lede p { font-family: 'Newsreader', serif !important; font-size: 15px !important; font-style: italic !important; font-weight: 300 !important; line-height: 1.7 !important; color: var(--ct-grey) !important; text-align: center !important; max-width: 440px; margin: 0 auto !important; } /* ---------- Le renvoi vers l'exposition ---------- */ .ct-mod--serie-promo { background: var(--ct-paper); } .ct-mod--serie-promo > .row { padding: 10px var(--ct-cadre-marge, 28px) 44px !important; } .ct-mod--serie-promo .row-inner { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; background: var(--ct-paper-dim); border-left: 2px solid var(--ct-blue); padding: 18px 24px; } .ct-mod--serie-promo .wpb_column { width: auto !important; max-width: none !important; } /* Écart technique corrigé le 31/08 : `width:auto` seul ne suffit pas à faire tenir le texte et le lien sur une même ligne flex — l'algorithme flexbox utilise la taille "hypothétique" (max-content) de chaque item pour décider du retour à la ligne, pas la largeur réellement appliquée. Le paragraphe, non contraint, est donc toujours mesuré comme trop large et bascule seul sur sa ligne. On fixe donc explicitement le rôle de chaque colonne : le texte pousse (flex-basis à 0, il ne dépend plus de son contenu), le lien se cale sur son contenu (flex-basis auto). */ .ct-mod--serie-promo .ct-mod__serie-promo-texte-col { flex: 1 1 0%; min-width: 0; } .ct-mod--serie-promo .ct-mod__serie-promo-lien-col { flex: 0 0 auto; white-space: nowrap; } /* La colonne « lien » ne peut pas se caler sur son contenu (flex-basis:auto) tant que la chaine interne d'Uncode garde `.uncoltable{width:100%}` — un pourcentage contre un conteneur dont la largeur est elle-même en train d'être calculée n'a pas de valeur définie, et Chrome lui substitue une largeur de repli énorme (mesuré : ~1 000 000 px), qui repousse tout à la ligne suivante. On sort cette colonne du calage par tableau pour cette seule colonne, comme déjà fait pour `.ct-mod--approach-steps` plus haut, afin qu'elle se dimensionne enfin sur son texte réel. */ .ct-mod--serie-promo .ct-mod__serie-promo-lien-col .uncol, .ct-mod--serie-promo .ct-mod__serie-promo-lien-col .uncoltable, .ct-mod--serie-promo .ct-mod__serie-promo-lien-col .uncell, .ct-mod--serie-promo .ct-mod__serie-promo-lien-col .uncont { display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; } .ct-mod__serie-promo-text, .ct-mod__serie-promo-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-body) !important; margin: 0 !important; } a.ct-mod__serie-promo-lien, .ct-mod .ct-mod__serie-promo-lien.ct-mod__serie-promo-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.52px !important; color: var(--ct-blue) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ct-blue) !important; border-radius: 0 !important; padding: 0 0 2px !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; white-space: nowrap; } .ct-mod__serie-promo-lien:empty::after { content: attr(title) attr(data-title); } /* ---------- L'emplacement de la galerie masonry ---------- */ .ct-mod--serie-gallery-slot { background: var(--ct-paper); } .ct-mod--serie-gallery-slot > .row { padding: 0 var(--ct-cadre-marge, 28px) 60px !important; } .ct-mod--serie-gallery-slot .row-inner { display: block; } /* ---------- Le texte curatorial complet ---------- */ .ct-mod--serie-curatorial { background: var(--ct-paper); } .ct-mod--serie-curatorial > .row { max-width: 700px !important; padding: 80px var(--ct-cadre-marge, 28px) 20px !important; border-top: 1px solid var(--ct-line); } .ct-mod--serie-curatorial .row-inner { display: block; } .ct-mod__serie-curatorial-eyebrow, .ct-mod__serie-curatorial-eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.92px !important; text-align: center !important; } .ct-mod__serie-curatorial-eyebrow { margin-bottom: 16px !important; } .ct-mod__serie-curatorial-titre, .ct-mod__serie-curatorial-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 26px !important; font-weight: 400 !important; font-style: italic !important; text-align: center !important; color: var(--ct-ink) !important; text-transform: none !important; margin: 0 !important; } .ct-mod__serie-curatorial-titre { margin-bottom: 32px !important; } .ct-mod__serie-curatorial-titre .clear { display: none !important; } /* Les deux paragraphes suivent le corps de texte unifié (17 px / 31,45) ; seules la couleur et la graisse restent propres à ce bloc. */ .ct-mod__serie-curatorial-text, .ct-mod__serie-curatorial-text p { font-family: 'Jost', sans-serif !important; font-weight: 300 !important; color: var(--ct-ink-soft) !important; margin: 0 !important; } /* ---------- La navigation de fin ---------- */ .ct-mod--serie-nav { background: var(--ct-paper); } .ct-mod--serie-nav > .row { padding: 80px var(--ct-cadre-marge, 28px) 100px !important; border-top: 1px solid var(--ct-line); } .ct-mod--serie-nav .row-inner { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; } .ct-mod--serie-nav .wpb_column { width: auto !important; max-width: none !important; } /* Même correction flexbox que .ct-mod--serie-promo ci-dessus : les deux colonnes reçoivent un rôle flex explicite au lieu de dépendre du seul `width:auto`, insuffisant pour éviter le retour à la ligne. */ .ct-mod--serie-nav .ct-mod__serie-nav-back-col { flex: 0 0 auto; white-space: nowrap; } .ct-mod--serie-nav .ct-mod__serie-nav-next { flex: 0 0 auto; white-space: nowrap; } .ct-mod--serie-nav .ct-mod__serie-nav-next { text-align: right; } /* Même piège que .ct-mod__serie-promo-lien-col ci-dessus : `.uncoltable` impose `width:100%`, un pourcentage sans valeur définie tant que la colonne se cale sur son contenu (`flex-basis:auto`) — Chrome lui substitue alors une largeur de repli énorme. On sort les deux colonnes de la mise en page par tableau pour qu'elles se dimensionnent sur leur texte réel. */ .ct-mod--serie-nav .ct-mod__serie-nav-back-col .uncol, .ct-mod--serie-nav .ct-mod__serie-nav-back-col .uncoltable, .ct-mod--serie-nav .ct-mod__serie-nav-back-col .uncell, .ct-mod--serie-nav .ct-mod__serie-nav-back-col .uncont, .ct-mod--serie-nav .ct-mod__serie-nav-next .uncol, .ct-mod--serie-nav .ct-mod__serie-nav-next .uncoltable, .ct-mod--serie-nav .ct-mod__serie-nav-next .uncell, .ct-mod--serie-nav .ct-mod__serie-nav-next .uncont { display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; } a.ct-mod__serie-nav-back, .ct-mod .ct-mod__serie-nav-back.ct-mod__serie-nav-back { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.65px !important; color: var(--ct-grey) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; } .ct-mod__serie-nav-back:empty::after { content: attr(title) attr(data-title); } .ct-mod__serie-nav-eyebrow, .ct-mod__serie-nav-eyebrow p { font-weight: 500 !important; color: var(--ct-blue) !important; letter-spacing: 1.92px !important; } .ct-mod__serie-nav-eyebrow { margin-bottom: 8px !important; display: block; } /* Écart assumé : dans la maquette, l'eyebrow ET le titre sont ensemble dans UN seul lien (« Nächste Serie » + le nom de la série cliquent tous les deux). Un bouton Uncode ne porte qu'un seul libellé : seul le titre est donc le lien ; l'eyebrow au-dessus reste un texte simple. Repéré et documenté ici plutôt que rendu à moitié fonctionnel sans explication. */ a.ct-mod__serie-nav-lien, .ct-mod .ct-mod__serie-nav-lien.ct-mod__serie-nav-lien { display: inline-block !important; width: auto; min-width: 0 !important; font-family: 'Newsreader', serif !important; font-size: 22px !important; font-style: italic !important; font-weight: 400 !important; color: var(--ct-ink) !important; background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; text-transform: none !important; box-shadow: none !important; } .ct-mod__serie-nav-lien:empty::after { content: attr(title) attr(data-title); } @media (max-width: 860px) { .ct-mod--serie-promo .row-inner { flex-direction: column; align-items: flex-start; } .ct-mod--serie-nav .row-inner { flex-direction: column; align-items: flex-start; } .ct-mod--serie-nav .ct-mod__serie-nav-next { text-align: left; } /* Le calage "ne pas couper" n'a de sens qu'en ligne ; empilées, les colonnes reprennent un texte normal pour ne pas déborder à l'écran. */ .ct-mod--serie-promo .ct-mod__serie-promo-lien-col, .ct-mod--serie-nav .ct-mod__serie-nav-back-col, .ct-mod--serie-nav .ct-mod__serie-nav-next { white-space: normal; } } /* ========================================================================== RANGÉES LIBRES — quatre rows vides (1, 2, 3, 4 colonnes), demandées par Laurence le 01/09/2026 : il les remplit lui-même avec des modules WPBakery posés directement dans l'éditeur, plutôt que par une classe CSS par bloc de contenu. Voir `fabrique/page_rows_libres.py`. Volontairement minimal : SEULE la gouttière entre les colonnes est ajoutée ici. La largeur de la row vient déjà de `ct-mod` (le même cadre que la navigation et le pied de page — voir `claude/cadre-de-page.md`) ; tout le reste — largeur de chaque colonne, empilement sous 960 px — reste le fonctionnement NATIF d'Uncode, sans surcharge (pas de `row-inner` en `display: grid` ou `flex` ici). C'est ce qui évite toute la famille de défauts de largeur de colonne rencontrée le 31/08 sur les grilles du gabarit « Porträts » — voir CHANGELOG.md, 1.8.1. ========================================================================== */ .ct-mod--libre .wpb_column { padding: 0 18px !important; } .ct-mod--libre .wpb_column:first-child { padding-left: 0 !important; } .ct-mod--libre .wpb_column:last-child { padding-right: 0 !important; } /* ========================================================================== BLOG — page de liste des articles (plugin 1.9.19, 29/09/2026) -------------------------------------------------------------------------- Demande de Laurence : la page qui liste les articles est montée en modules WPBakery, avec une place VIDE pour le module « Posts » d'Uncode, qu'il pose lui-même. Générateur : fabrique/page_blog.py ; sortie : modules/blog-modules.txt. Source : maquettes/blog-de.html ; tailles : guide typographique de Céline, section « Blog (Journal) ». Trois rows : introduction centrée, titre « Alle Beiträge », place du module Posts. La colonne de cette dernière (`ct-mod__blog-grid-slot`) n'a volontairement aucun style : le balisage du module dépend des réglages que Laurence choisira. Son habillage (cartes 4/5, tag, date, titre 19px italique, filtres en pastilles) se fera sur la page enregistrée. Écart signalé : l'accroche suit le corps de texte unifié (.ct-mod p, 15px / 31,45px, décision du 08/09), comme le sous-titre de la Startseite. Le guide et la maquette donnent 16px / 1,6. Voir CHANGELOG 1.9.19. ========================================================================== */ .ct-mod--blog-intro, .ct-mod--blog-head, .ct-mod--blog-grid { background: var(--ct-paper); } /* ---------- 1. INTRODUCTION ---------- */ .ct-mod--blog-intro > .row { padding: 100px var(--ct-cadre-marge, 28px) 30px !important; } .ct-mod--blog-intro .uncont { max-width: 700px; margin: 0 auto !important; text-align: center !important; } .ct-mod__blog-eyebrow, .ct-mod__blog-eyebrow p { font-family: 'Jost', sans-serif !important; font-size: 12px !important; /* guide : Eyebrow 12px */ line-height: 19.2px !important; font-weight: 500 !important; letter-spacing: 1.92px !important; /* 0,16em */ text-transform: uppercase !important; color: var(--ct-blue) !important; text-align: center !important; margin: 0 !important; hyphens: none; -webkit-hyphens: none; } .ct-mod__blog-eyebrow { margin-bottom: 18px !important; } .ct-mod__blog-titre, .ct-mod__blog-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: clamp(32px, 4.4vw, 48px) !important; /* guide : Titre de page */ font-weight: 350 !important; font-style: normal !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--ct-ink) !important; text-align: center !important; margin: 0 !important; } .ct-mod__blog-titre .clear { display: none !important; } .ct-mod__blog-titre { margin-bottom: 18px !important; } .ct-mod__blog-lede, .ct-mod__blog-lede p { font-weight: 300 !important; color: var(--ct-grey) !important; text-align: center !important; margin: 0 auto !important; max-width: 440px; } /* ---------- 2. « ALLE BEITRÄGE » ---------- */ .ct-mod--blog-head > .row { padding: 70px var(--ct-cadre-marge, 28px) 44px !important; } .ct-mod__blog-alle, .ct-mod__blog-alle *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 26px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.3 !important; letter-spacing: -0.26px !important; text-transform: none !important; color: var(--ct-ink) !important; text-align: left !important; margin: 0 !important; } .ct-mod__blog-alle .clear { display: none !important; } /* ---------- 3. PLACE DU MODULE « POSTS » ---------- Seulement l'espace sous la grille (maquette : 120px). Rien sur la colonne ni sur le module. */ .ct-mod--blog-grid > .row { padding: 0 var(--ct-cadre-marge, 28px) 120px !important; } /* ========================================================================== CLASSES TYPOGRAPHIQUES LIBRES (plugin 1.9.20, 30/09/2026) -------------------------------------------------------------------------- Demande de Laurence : deux classes à poser dans le champ « Extra class name » d'un module, utilisables PARTOUT, sans dépendre des classes de row (`ct-mod`, `ct-mod--…`). ct-texte Jost 15px Text Block (et tout module de texte) ct-titre Newsreader 20px module Heading / Custom Heading Pourquoi des valeurs écrites en clair et pas des variables : les variables de couleur et de police du plugin sont posées sur `.ct-mod`. Un module placé dans une row ordinaire d'Uncode ne les voit pas. Pourquoi `*:not(.clear)` : Uncode enveloppe le texte (`.heading-text`, `h2.h2`, `span`, `p`) et pose sa propre typographie sur ces enfants. La classe est sur l'enveloppe, la règle doit donc atteindre les enfants. Même motif que les titres des huit pages déjà construites. `.clear` est le séparateur vide d'Uncode, on n'y touche pas. Pourquoi la classe est écrite deux fois (`.ct-texte.ct-texte`) : c'est le même élément, mais la spécificité monte à trois classes. Mesuré en simulation : une règle de thème du type `.uncont .uncode_text_column p` en !important (deux classes + une balise) battait la version à une seule classe. Doubler la classe la bat sans dépendre du nom de balise. Ce qui n'est PAS forcé, volontairement : la couleur, l'alignement, les marges (réglages du module ou de la row) ; la graisse et l'italique des ``, ``, ``, `` à l'intérieur, qui gardent leur rôle. Interlignes choisis par Claude (non demandés) : texte 31,45px, celui du corps de texte unifié du site (décision 27/08) ; titre 1,3 (26px), celui des titres Newsreader de même famille (`.ct-mod__blog-alle`). À changer ici si besoin, une ligne chacun. ========================================================================== */ .ct-texte, .ct-texte.ct-texte *:not(.clear) { font-family: 'Jost', sans-serif !important; font-size: 15px !important; line-height: 31.45px !important; } .ct-texte, .ct-texte.ct-texte *:not(.clear):not(strong):not(b) { font-weight: 400 !important; } .ct-titre, .ct-titre.ct-titre *:not(.clear) { font-family: 'Newsreader', serif !important; font-size: 20px !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; } .ct-titre, .ct-titre.ct-titre *:not(.clear):not(strong):not(b) { font-weight: 400 !important; }