/* ============================================================ « Ovaires sous surveillance » (AbbVie) — Design tokens ============================================================ */ :root { /* --- Témoin de version ------------------------------------- Sert uniquement à vérifier quelle build est réellement servie, sans dépendre d'un effet visuel. Dans la console du navigateur : getComputedStyle(document.documentElement) .getPropertyValue('--oss-css-build') Si la valeur retournée n'est pas celle ci-dessous, le navigateur ou le dispatcher sert encore l'ancien fichier. À incrémenter à chaque upload. */ --oss-css-build: "V16"; /* --- Couleurs --- */ --oss-color-navy: #101971; --oss-color-teal: #40acb5; --oss-color-turquoise: #5ce1e6; --oss-color-text: #7e7e7e; --oss-color-bg-lavender: #f1f3ff; --oss-color-white: #ffffff; --oss-color-divider: rgba(16, 25, 113, 0.15); /* --- Typographie : familles --- */ --oss-font-display: "Bowlby One", system-ui, sans-serif; --oss-font-eyebrow: "Roboto Condensed", system-ui, sans-serif; --oss-font-body: "Roboto", system-ui, sans-serif; --oss-font-body-alt: "Inter", system-ui, sans-serif; /* --- Typographie : tailles (desktop) --- */ --oss-fs-display-lg: 60px; --oss-fs-display-md: 45px; --oss-fs-question: 19px; --oss-fs-icon: 35px; --oss-fs-body: 15px; --oss-fs-eyebrow: 15px; --oss-fs-nav: 17px; /* --- Interlignes --- */ --oss-lh-display: 60px; --oss-lh-title: 50px; --oss-lh-text: 25px; /* --- Divers --- */ --oss-eyebrow-tracking: 1.2px; --oss-nav-tracking: 0.34px; --oss-radius-lg: 30px; --oss-radius-md: 20px; /* cartes de témoignage, visuel du hero */ /* --- Rythme vertical de l'accordéon FAQ (cmp-accordion--line) --- Le clientlib pose 1.875rem (30px) en haut ET en bas du bouton, et autant sur le panneau ouvert. Ces deux jetons les remplacent. Ils sont volontairement séparés : la densité de la liste fermée et l'aération de la réponse ouverte se règlent indépendamment. */ --oss-faq-pad-y: 20px; /* bouton (question) — était 30px */ --oss-faq-panel-pad-y: 20px; /* panneau (réponse) — était 30px */ } /* ============================================================ « Ovaires sous surveillance » — Polices self-hostées (woff2) ============================================================ */ /* Cette feuille est dans .../ovaires-sous-surveillance/fr/css/ et les .woff2 dans .../ovaires-sous-surveillance/fr/font/ d'où les chemins relatifs en ../font/. Les unicode-range sont indispensables : sans eux, deux @font-face de même famille + graisse s'écrasent et seul le dernier compte. */ @font-face { font-family: 'Bowlby One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/bowlby-one-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/roboto-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/roboto-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../font/roboto-condensed-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../font/roboto-condensed-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../font/roboto-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../font/roboto-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ GLOBAL AEM COMPONENT STYLING ============================================================ */ /* --- Base Text & Paragraphs --- */ body, p, .cmp-text p, .cmp-accordion__panel { font-family: var(--oss-font-body); font-size: var(--oss-fs-body); line-height: var(--oss-lh-text); color: var(--oss-color-text); } /* --- H1: Main Page Titles --- */ h1, .cmp-title h1 { font-family: var(--oss-font-display); font-weight: 400; font-size: var(--oss-fs-display-lg); line-height: var(--oss-lh-display); color: var(--oss-color-navy); margin-top: 0; margin-bottom: 24px; } /* --- H2: Section Titles --- */ h2, .cmp-title h2 { font-family: var(--oss-font-display); font-weight: 400; font-size: var(--oss-fs-display-md); line-height: var(--oss-lh-title); color: var(--oss-color-teal); margin-top: 0; margin-bottom: 24px; } /* --- H3: Subtitles & Accordions --- */ h3, .cmp-title h3, .cmp-accordion__header, .cmp-accordion__title { font-family: var(--oss-font-body); font-weight: 500; font-size: var(--oss-fs-question); line-height: var(--oss-lh-text); color: var(--oss-color-navy); margin-top: 0; margin-bottom: 16px; } /* --- H6: Eyebrows / Supertitles --- */ h6, .cmp-title h6 { font-family: var(--oss-font-eyebrow); font-weight: 700; font-size: var(--oss-fs-eyebrow); line-height: var(--oss-lh-text); letter-spacing: var(--oss-eyebrow-tracking); text-transform: uppercase; color: var(--oss-color-teal); margin-top: 0; margin-bottom: 12px; } /* --- Buttons / CTAs --- */ .cmp-button, .cmp-teaser__action-link, a.button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: var(--oss-radius-lg); background: var(--oss-color-turquoise); color: var(--oss-color-white); font-family: var(--oss-font-body-alt); font-weight: 500; font-size: var(--oss-fs-body); text-decoration: none; border: none; cursor: pointer; } .cmp-button:hover, .cmp-teaser__action-link:hover, a.button:hover { filter: brightness(0.96); color: var(--oss-color-white); text-decoration: none; } /* ============================================================ HALOS DE FOCUS BOOTSTRAP — NEUTRALISATION GLOBALE ============================================================ LE SYMPTÔME Un clic sur un bouton fait apparaître autour de lui un rectangle gris de 4 px, qui persiste après le clic parce que l'élément garde le focus — après la fermeture d'une pop-in, notamment. LES QUATRE RÈGLES EN CAUSE — relevé dans clientlib-site .btn:focus{box-shadow:0 0 0 .25rem rgba(7,29,73,.25);outline:0} .btn-close:focus{box-shadow:0 0 0 .25rem rgba(7,29,73,.25); opacity:1;outline:0} .btn-light:focus{…box-shadow:0 0 0 .25rem hsla(210,2%,83%,.5);…} .btn-light:active:focus{box-shadow:0 0 0 .25rem hsla(210,2%,83%,.5)} C'est le halo de focus hérité de Bootstrap 4, que le thème n'a jamais retaillé pour ce site. Deux raisons pour lesquelles il se voit ici alors qu'il passerait inaperçu sur un bouton plein : — rgba(7,29,73,.25) aplati sur le blanc de la page donne ≈ #c1c6d2, un gris bleuté : d'où « rectangle gris » et non « halo navy » ; — la plupart de ces boutons n'ont ni fond ni rayon, le halo de 4 px épouse donc la boîte de l'élément et se lit comme un rectangle à angles vifs. Le déclencheur est :focus et NON :focus-visible : la règle s'applique donc aussi au clic souris, pas seulement au parcours clavier. C'est tout le problème — un halo de focus n'a rien à faire là. INVENTAIRE DES ÉLÉMENTS ATTEINTS — relevé sur le rendu courant 16 .btn, tous porteurs de .btn:focus : — 3 .btn.rounded-pill : « Découvrir la vidéo » (l. 278), « Découvrir l'affiche » (l. 2353), « Découvrir le livret » (l. 2372) ; — 7 boutons de témoignage .btn--text-swapped (l. 1211 à 1687) ; — 4 .btn.default du pied de page : Mentions légales, Déclaration d'accessibilité, Politique de confidentialité, Contact ; — 2 .btn.btn-light : « Annuler » et « Continuer » de la pop-in de lien externe #confirmModal (l. 3511 et 3527). Ces deux-là cumulent DEUX halos, celui de .btn et celui, gris clair, de .btn-light. 9 .btn-close : les 8 croix des pop-in de témoignage, plus celle de #confirmModal (l. 3490), qui est hors de tout wrapper .popup. LE CAS TACTILE, QUI EST UN AUTRE MÉCANISME Sur Chrome Android un second rectangle est peint pendant l'appui : -webkit-tap-highlight-color, rgba(0,0,0,.18) par défaut. Il ne passe pas par :focus — il est peint AVANT que le focus soit acquis — d'où une déclaration posée sur l'élément lui-même et non sur un état. POURQUOI !important ICI, ALORS QUE LE CLIENTLIB N'EN MET PAS Parce que les variantes montent en spécificité : .btn:focus pèse (0,2,0), mais .btn-light:focus (0,3,0) et .btn-light:active:focus (0,4,0) passeraient au-dessus d'un simple .btn:focus de cette feuille. Bootstrap décline ce halo sur une quinzaine de variantes (btn-primary, btn-secondary, btn-outline-*, .active:focus, .dropdown-toggle.show:focus…). Les réénumérer serait un piège à maintenance : la première variante posée par un auteur en réintroduit un. Un seul !important éteint la famille entière, présente et future. ⚠ L'ACCESSIBILITÉ N'EST PAS NÉGOCIABLE — ON REMPLACE, ON NE SUPPRIME PAS Le clientlib pose outline:0 en même temps que le halo. Éteindre le halo sans rien mettre à la place laisserait ces 25 éléments SANS AUCUN indicateur de focus, ce qui les rend inutilisables au clavier (WCAG 2.4.7). On rétablit donc un indicateur en navy sur :focus-visible, qui ne se déclenche PAS au clic souris — c'est exactement la distinction que Bootstrap 4 ne faisait pas. Le patron reprend celui déjà utilisé par les boutons de témoignage et les croix de pop-in de cette feuille : 2 px navy. CE QUI N'EST PAS TOUCHÉ, ET POURQUOI Le burger du menu mobile (.navbar-toggler) a bien le halo Bootstrap — .navbar-toggler:focus{box-shadow:0 0 0 .25rem} — mais le thème le neutralise DÉJÀ, plus bas dans le même fichier : .navbar-toggler:active,:focus,:hover{border-color:#212529; box-shadow:none} Il ne reste donc sur le burger qu'un changement de couleur de bordure (#f8f9fa → #212529), qui n'est pas un halo mais son SEUL indicateur de focus. On le laisse : le retirer reviendrait à retirer un indicateur, soit l'inverse de ce que fait ce bloc. ============================================================ */ /* 1. Extinction du halo au clic (souris) — voir la note sur !important. */ .btn:focus, .btn-close:focus { box-shadow: none !important; } /* 2. Extinction du voile d'appui (tactile). Posé sur l'élément, pas sur un état : le voile précède l'acquisition du focus. */ .btn, .btn-close { -webkit-tap-highlight-color: transparent; } /* 3. Rétablissement de l'indicateur clavier, pour les 25 éléments. Les blocs « boutons de témoignage » et « châssis de pop-in » affinent ce patron plus bas (rayon, offset) ; leurs sélecteurs sont plus spécifiques et l'emportent là où ils s'appliquent. */ .btn:focus-visible, .btn-close:focus-visible { outline: 2px solid var(--oss-color-navy); outline-offset: 4px; } /* --- Navigation Links (Forced Override with custom AEM class) --- */ header a, .cmp-navigation a, .cmp-navigation__item-link, .cmp-navigation__item > a, .meta-navigation__inner, .meta-navigation__inner a { font-family: var(--oss-font-eyebrow) !important; font-weight: 600 !important; font-size: var(--oss-fs-nav) !important; letter-spacing: var(--oss-nav-tracking) !important; text-transform: uppercase !important; color: var(--oss-color-navy) !important; text-decoration: none !important; } header a:hover, .cmp-navigation a:hover, .cmp-navigation__item-link:hover, .cmp-navigation__item > a:hover, .meta-navigation__inner:hover, .meta-navigation__inner a:hover { color: var(--oss-color-teal) !important; } /* Active Nav Link */ .cmp-navigation__item--active > a, .cmp-navigation__item--active > .cmp-navigation__item-link, .meta-navigation__inner.active, .meta-navigation__inner.is-active, .meta-navigation__inner .active { border-bottom: 2px solid var(--oss-color-turquoise) !important; } /* ============================================================ MENU MOBILE — RÉPARATION DU CONTRASTE (bleu sur bleu) ============================================================ LE SYMPTÔME Sous 992 px, le menu déroulé affiche ses quatre entrées (COMPRENDRE, TEMOIGNAGES, LA CAMPAGNE, EN SAVOIR PLUS) en navy sur un fond bleu : illisible. LE DIAGNOSTIC — C'EST LE FOND, PAS LA COULEUR DU TEXTE Relevé dans clientlib-site, deux règles sous @media(max-width:991.98px) : .global-header-menu{background:var(--bs-secondary);…} .meta-navigation ul{background:var(--bs-secondary);…} .meta-navigation ul li a{color:var(--bs-white)} avec --bs-secondary:#0033ad. Le clientlib prévoit donc du BLANC sur ce bleu, et son intention se tient. Mais le bloc « Navigation Links » ci-dessus impose color:var(--oss-color-navy) !important à toutes les entrées, desktop ET mobile : le blanc du clientlib est écrasé, et il reste #101971 sur #0033ad, soit un rapport de contraste de 1,48:1 (le minimum exigé pour du texte est 4,5:1). POURQUOI ON REPEINT LE PANNEAU PLUTÔT QUE DE REPASSER LE TEXTE EN BLANC Deux corrections étaient possibles. Rendre le texte blanc sur mobile est plus court d'une ligne, mais elle grave #0033ad dans la page : ce bleu n'appartient PAS à la charte « Ovaires sous surveillance », c'est le --bs-secondary générique du thème AbbVie, et il ne figure dans aucun token de cette feuille. Le menu mobile serait alors le seul endroit du site peint dans une couleur hors charte. On repeint donc le panneau en --oss-color-bg-lavender (#f1f3ff), qui est un token de la charte, et on garde le navy du texte : le menu mobile devient la version empilée du header desktop (fond très clair, entrées navy en capitales), au lieu d'en être l'inverse vidéo. Contraste obtenu : navy #101971 sur #f1f3ff = 13,6:1 (AAA). ⚠ CE BLOC NE S'ANCRE PAS SUR
— ET C'EST VOLONTAIRE Relevé dans le rendu : il n'y a AUCUN élément
dans la page (0 occurrence). L'en-tête est un
(l. 99). Tous les sélecteurs « header … » de cette feuille sont donc INERTES, y compris « header a » : ce qui colore réellement les entrées, c'est « .meta-navigation__inner a » de la même liste. C'est aussi la raison pour laquelle ce bloc ne peut pas se contenter de « header a ». SPÉCIFICITÉ Aucun !important sur les fonds : .global-header .global-header-menu pèse (0,2,0) contre (0,1,0) au clientlib, et .global-header .meta-navigation ul pèse (0,2,1) contre (0,1,1). La cascade suffit. Le !important est en revanche OBLIGATOIRE sur la couleur du survol, parce que la règle à écraser est « .meta-navigation__inner a:hover { color: teal !important } » de cette feuille : entre deux déclarations !important, c'est la spécificité qui tranche, et (0,3,3) l'emporte sur (0,2,1). POURQUOI LE SURVOL RESTE EN NAVY ICI Le teal de la charte tombe à 2,4:1 sur la lavande — insuffisant pour du texte. Sur mobile le survol n'est de toute façon pas un état « au passage » : sur écran tactile il RESTE collé au dernier lien touché. On garde donc le navy et on signale l'état par un soulignement, qui ne coûte rien en contraste. BORNE 991.98px C'est celle du clientlib (breakpoint lg de Bootstrap), pas 767.98px comme les blocs mobiles du reste de ce fichier : le menu bascule en burger à 992 px, il faut donc corriger exactement à partir de là. ============================================================ */ @media (max-width: 991.98px) { .global-header .global-header-menu, .global-header .meta-navigation ul { background: var(--oss-color-bg-lavender); } /* Le panneau est en position:absolute; top:100% : il flotte au-dessus du contenu. Le liseré le détache du header blanc, l'ombre le détache du visuel qu'il recouvre. */ .global-header .global-header-menu { border-top: 1px solid var(--oss-color-divider); box-shadow: 0 10px 24px rgba(16, 25, 113, 0.1); } .global-header .meta-navigation ul li a:hover, .global-header .meta-navigation ul li a:focus, .global-header .meta-navigation ul li.active > a { color: var(--oss-color-navy) !important; text-decoration: underline !important; text-underline-offset: 4px; } } /* --- Standard Links --- */ a { color: var(--oss-color-teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ============================================================ VISUAL POLISH & LAYOUT OVERRIDES (Added) ============================================================ */ /* --- Header Logo Size Override --- */ header img, .cmp-image--logo img, .oss-header__logo img { height: 64px !important; width: auto; } /* --- General Image Radius --- */ /* ⚠ Cette règle ne touche AUCUNE image de la page d'accueil : les 16 visuels sont tous servis par le composant image-extension, dont le ne porte que « d-block img-fluid ». Elle ne vaut que pour le composant image standard d'AEM, employé ailleurs sur le site. L'arrondi du hero est donc traité par la règle ci-dessous, et celui des témoignages par le bloc « CARTES DE TÉMOIGNAGE ». */ .cmp-image__image, img.cmp-image__image { border-radius: var(--oss-radius-lg); } /* --- Arrondi du visuel du hero d'en-tête (« Le point de vue des experts ») --- POURQUOI CETTE RÈGLE EXISTE Le visuel restait à angles vifs, seul de la page, alors que les 7 portraits de témoignages et les deux bandeaux sont arrondis. Cause : l'absence de .cmp-image__image sur son , voir ci-dessus. POURQUOI --oss-radius-md ET NON --oss-radius-lg Consigne : « identique aux autres images comme dans la section Témoignages ». Les cartes de témoignage sont à --oss-radius-md (20px) ; les 30px de --oss-radius-lg sont le rayon des BANDEAUX, pas celui des visuels. POURQUOI CE SCOPE, ET NON UN ANCRAGE SUR LE CHEMIN JCR Les deux bandeaux overlay-content ont dû être ancrés sur le chemin JCR de leur column-control (voir les deux gros blocs plus bas), faute de la moindre classe qui les distingue. Ce hero-ci, lui, EST distinguable : il est le seul des trois à porter .hero-teaser, et le seul à ne pas porter .overlay-content. Une signature de classe suffit donc, et elle survit à un déplacement du composant dans l'arbre JCR — ce qu'un ancrage sur le src ne fait pas. Le jour où l'auteur poserait un second hero en teaser, il héritera de cet arrondi : c'est le comportement souhaitable, tous les visuels de la charte étant arrondis. POURQUOI L'ARRONDI EST SUR LE ET NON SUR UN CONTENEUR Contrairement aux deux bandeaux, l'image n'est pas ici un calque en position:absolute recouvrant un fond : c'est un élément remplacé ordinaire dans le flux. border-radius rogne alors directement son propre rendu, sans overflow:hidden sur un ancêtre. SPÉCIFICITÉ (0,3,0) face au (0,1,0) de .img-fluid, et le clientlib ne pose aucun border-radius sur .hero-banner-image ni sur ses descendants : aucun !important requis. */ .hero-banner__inner.hero-teaser .hero-banner-image img { border-radius: var(--oss-radius-md); } /* --- Accordion Dividers & Icons --- */ .cmp-accordion__item { border-bottom: 1px solid var(--oss-color-divider); } .cmp-accordion__item:last-child { border-bottom: none; } /* Force AEM default accordion icons to use custom color and size */ .cmp-accordion__icon, .cmp-accordion__header::after, .cmp-accordion__header::before { color: var(--oss-color-turquoise) !important; font-size: var(--oss-fs-icon) !important; } /* ============================================================ RYTHME VERTICAL DE L'ACCORDÉON FAQ ============================================================ CE QU'ON CORRIGE Un item fermé de la FAQ « Zoom sur le cancer de l'ovaire » occupait ~126px pour 34px de texte utile. Quatre déclarations s'empilaient, dont DEUX viennent de cette feuille : 30 + 30 px clientlib .cmp-accordion--line .cmp-accordion__button { padding: 1.875rem 0 } 16 px ICI .cmp-accordion__title { margin-bottom: 16px } 16 px ICI .cmp-accordion__header { margin-bottom: 16px } 30 + 30 px clientlib …__item .cmp-accordion__panel (ouvert) POURQUOI LES DEUX 16 px SONT DES PARASITES, PAS UNE INTENTION Ils ne sont pas écrits pour l'accordéon : ils tombent de la règle générique des sous-titres en haut de ce fichier, où .cmp-accordion__header et .cmp-accordion__title ont été agrégés à « h3, .cmp-title h3 » pour hériter de la famille, de la graisse et de la couleur. Le margin-bottom:16px, pertinent sous un H3 suivi d'un paragraphe, n'a aucun sens à l'intérieur d'un bouton d'accordéon. On les annule ici plutôt que de les retirer de la règle générique : celle-ci sert aussi l'accordéon « REFERENCES » du pied de page et les H3 de tout le site. ⚠ LE margin-bottom DU TITRE N'EST PAS INERTE, MALGRÉ LE .cmp-accordion__title est un , donc inline — une marge verticale sur un inline est normalement ignorée. Mais le clientlib met le bouton parent en display:flex : le span devient flex-item, donc blocifié, et la marge s'applique pour de bon. Elle comptait bien dans les 126px. POURQUOI L'ICÔNE NE PLAFONNE PAS LA RÉDUCTION Point vérifié avant de choisir les valeurs : .cmp-accordion__icon reçoit font-size:35px (!important, règle ci-dessus). Sur un flex-item, une boîte de 35px de fonte aurait pu devenir la hauteur de ligne et absorber toute la baisse de padding. Il n'en est rien : le bouton pose line-height:1.1875rem, une LONGUEUR absolue, que le span hérite telle quelle. Sa boîte vaut donc 19px + 5px de padding-top = 24px, bien sous les 34px du titre. C'est le titre qui dicte la hauteur, avant comme après. Le 35px, lui, n'atteint jamais le glyphe : le chevron est un ::after à font-size:1.25rem fixe, non hérité. Rien à corriger là — la taille rendue de l'icône est inchangée par cette livraison. RÉSULTAT ATTENDU 20 + 34 + 20 + 1px de filet ≈ 75px par item fermé, soit −41 %. Écart question → réponse : 76px (30 + 16 + 30) ramené à 40px. POURQUOI LE SCOPE EST SUR .cmp-accordion--line La page porte un second accordéon, « REFERENCES » en pied de page, en .cmp-accordion--scroll-effect. Il n'a qu'un item, un titre en capitales et un tout autre padding (.75rem, du sélecteur de base). Le scoper sur --line le laisse hors d'atteinte. SPÉCIFICITÉ — POURQUOI LE .cmp-accordion INTERCALAIRE Le clientlib atteint le bouton en (0,2,0) et le panneau en (0,3,0). Cette feuille étant chargée après lui, l'égalité suffirait. Mais elle ne tiendrait qu'au seul ordre des : le jour où le clientlib ajoute une règle plus précise, ou passe après, tout saute en silence. On intercale donc .cmp-accordion — le wrapper interne, toujours présent dans le balisage du composant — pour monter d'un cran et gagner sur la spécificité seule, sans un seul !important. ============================================================ */ /* --- 1. Question : le padding de 30px du clientlib --- */ .cmp-accordion--line .cmp-accordion .cmp-accordion__button { padding-top: var(--oss-faq-pad-y); padding-bottom: var(--oss-faq-pad-y); } /* --- 2. Les deux marges de 16px héritées de la règle des sous-titres --- */ .cmp-accordion--line .cmp-accordion .cmp-accordion__header, .cmp-accordion--line .cmp-accordion .cmp-accordion__title { margin-bottom: 0; } /* --- 3. Réponse : le padding du panneau ouvert --- */ .cmp-accordion--line .cmp-accordion .cmp-accordion__item .cmp-accordion__panel { padding-top: var(--oss-faq-panel-pad-y); padding-bottom: var(--oss-faq-panel-pad-y); } /* ============================================================ BANDEAU « ZOOM SUR 3 GRANDS LEVIERS D'ACTION » ============================================================ POURQUOI CE BLOC EST CASSÉ PAR DÉFAUT Le clientlib AEM pose le contenu en absolu au-dessus de l'image : .hero-banner__inner.overlay-content .hero-banner-content { position:absolute; height:100%; overflow:auto } La hauteur du bandeau est donc dictée par l'IMAGE, pas par le texte : le contenu déborde et une scrollbar apparaît. S'y ajoutent max-width:806px + text-align:center sur .hero-banner-content__inner (3 colonnes écrasées à ~268px) et --bs-gutter-x:0 hérité de .hero-banner--box (les titres de colonnes se touchent). On inverse le modèle : l'image passe en calque décoratif absolu, le contenu revient dans le flux et c'est lui qui donne la hauteur. POURQUOI LE SCOPE EST ANCRÉ SUR LE CHEMIN JCR La page contient un SECOND hero-banner overlay-content — le bandeau « Ovaires sous surveillance » — avec exactement la même liste de classes. Rien dans les classes ne les distingue : il faut une autre prise. Ce fut d'abord :has(.col-md-4), la grille des 3 colonnes. Mauvaise idée : le scope de l'AUTRE bandeau devenait alors son complément négatif, :not(:has(.col-md-4)) — et un scope négatif échoue DANGEREUSEMENT, puisqu'il attrape tout ce qui n'est pas ce bloc. Le jour où la grille a bougé, ce bandeau a perdu sa mise en forme ET reçu celle de l'autre, d'un seul coup (arrondi disparu en desktop, mobile cassé sur les deux bandeaux). On s'ancre donc sur le chemin JCR du column-control qui contient le hero, lisible dans le src de son image. Il est propre à ce bloc et ne bouge pas quand l'auteur retouche un texte, la grille ou le visuel : il ne changerait qu'en supprimant puis recréant le composant. Les DEUX bandeaux ont désormais un scope POSITIF. Si le markup change, les styles cessent simplement de s'appliquer — ils ne peuvent plus fuir sur le voisin. ⚠ LE « / » FINAL EST OBLIGATOIRE column_control_72709 (l'autre bandeau) est un PRÉFIXE de column_control_727099504 (celui-ci). Sans le séparateur, la sous-chaîne de [src*=…] confondrait les deux blocs. SPÉCIFICITÉ cssstyles-V1.css est chargée APRÈS les clientlibs, donc !important n'est requis que contre les styles inline de l'auteur (color:rgb(221,221,221) posé sur chaque depuis le RTE AEM). ============================================================ */ /* --- Jetons locaux au bandeau (pas de fuite vers le reste du site) --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) { --oss-zoom-pad-y: 72px; --oss-zoom-gutter: 40px; --oss-zoom-on-navy: rgba(255, 255, 255, 0.88); --oss-zoom-rule: rgba(255, 255, 255, 0.35); } /* --- 1. L'image devient un calque décoratif derrière le contenu --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-top-area { position: relative; background-color: var(--oss-color-navy); /* filet de sécurité si l'image ne charge pas */ /* Arrondi du bandeau. Il est porté ici, sur le conteneur : comme .hero-banner-top-area est le bloc conteneur de l'image (elle est en position:absolute), overflow:hidden rogne l'image ET le fond navy selon la courbe. La règle globale .cmp-image__image ne s'appliquait pas ici, l'image n'ayant que les classes « d-block img-fluid » — d'où l'absence d'arrondi. */ border-radius: var(--oss-radius-lg); overflow: hidden; } .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* Répété sur le calque image : certains navigateurs laissent suinter 1px d'un enfant dans les angles quand le rognage ne vient que de l'ancêtre. */ border-radius: var(--oss-radius-lg); } /* La chaîne .image-extension > .image-container > a doit filer la hauteur jusqu'au , sinon object-fit n'a rien à quoi se raccrocher. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image .image-extension, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image .image-container, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image .image-container > a { height: 100%; } /* height:100% doit battre le height:auto de .img-fluid. Pas de border-radius ici : l'arrondi vient du rognage par les deux conteneurs ci-dessus. Le poser aussi sur l'image serait sans effet visible, object-fit:cover la faisant déjà remplir tout le cadre. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-image img { width: 100%; height: 100%; object-fit: cover; } /* --- 2. Le contenu revient dans le flux : c'est lui qui donne la hauteur --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-top-area .hero-banner-content { position: relative; z-index: 1; display: block; /* annule le flex centré du clientlib */ height: auto; overflow: visible; /* supprime la scrollbar */ padding: var(--oss-zoom-pad-y) 20px; } /* --- 3. On desserre et on aligne à gauche (maquette) --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-top-area .hero-banner-content__inner { max-width: 1140px; /* au lieu des 806px du clientlib */ width: 100%; margin: 0 auto; text-align: left; } /* --- 4. Neutralise le gris rgb(221,221,221) inline du RTE --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .cmp-text span[style] { color: inherit !important; } /* ⚠ PIÈGE font-size SUR LES TITRES — VALABLE DANS TOUT CE FICHIER Le clientlib pose, dans ses toutes premières règles : .h1,h1{font-size:var(--heading-1-font-size)!important} et l'équivalent pour h2 à h6. Un !important ne se bat pas à la spécificité : AUCUN font-size de cette feuille ne peut atteindre un titre sans porter son propre !important. Sans lui la déclaration est silencieusement inerte — alors que les AUTRES propriétés de la même règle (famille, graisse, couleur, text-transform, filet…) passent normalement. D'où une panne trompeuse : le bloc a l'air stylé, mais il garde la taille du clientlib. C'est ce qui cassait les intitulés de colonnes (point 7) : restés à --heading-1-font-size, soit ~40px au lieu de 15px, ils débordaient de leur colonne et se télescopaient entre 768px et 991px, largeurs où les colonnes tombent à ~227px. line-height et letter-spacing ne sont pas en !important : ils passent sans rien. ⚠ Corollaire non traité ici : les 6 règles globales de titres en haut de ce fichier (h1…h6) ont donc leur font-size inerte sur tout le site. Les réparer changerait le rendu de toutes les pages : à décider séparément. */ /* --- 5. Titre principal du bandeau --- Discriminé des 3 titres de colonnes par le wrapper .mb-0, propre au titre du bandeau (les colonnes ont un
nu). */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner > .aem-Grid > .headline-text > .mb-0 .cmp-text > h1 { font-family: var(--oss-font-display); /* "Bowlby One" */ font-size: var(--oss-fs-display-md) !important; /* 45px — voir le piège ci-dessus */ line-height: var(--oss-lh-title); font-weight: 400; color: var(--oss-color-white); margin: 0 0 40px; max-width: 720px; /* casse le titre sur 2 lignes comme la maquette */ /* Bowlby One n'est fournie qu'en graisse 400. On interdit au navigateur de fabriquer un faux gras par déformation mécanique des contours, ce qui empâte cette display déjà très grasse. */ font-synthesis: none; -webkit-font-smoothing: antialiased; } /* Le titre est balisé dans le RTE AEM : sans ce reset, le style par défaut du navigateur applique font-weight:bolder sur le et redéclenche le faux gras que font-synthesis vient d'écarter. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner > .aem-Grid > .headline-text > .mb-0 .cmp-text > h1 b, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner > .aem-Grid > .headline-text > .mb-0 .cmp-text > h1 strong { font-weight: 400; } /* Le

 

laissé par l'auteur sous le titre creuse un trou */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner > .aem-Grid > .headline-text > .mb-0 .cmp-text > p { display: none; } /* --- 6. Gouttières entre les 3 colonnes (annule --bs-gutter-x:0) --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner .row { --bs-gutter-x: var(--oss-zoom-gutter); } /* --- 7. Intitulés de colonnes : label court + filet, pas un H1 display --- L'auteur a utilisé des

; la maquette demande une étiquette capitale discrète surmontant un filet. Relevé sur le composant Figma « Key figures » (2008:22) : les trois intitulés sont en Inter Bold 15/25, capitales, blanc pur. On reste néanmoins sur Roboto Condensed 700 : les @font-face de ce fichier n'hébergent Inter qu'en 400 et 500, donc demander Inter Bold ferait fabriquer un faux gras par le navigateur — pire que l'écart de famille. Pour coller à la maquette, il faut d'abord livrer ../font/inter-700-latin.woff2 et son latin-ext. Le !important sur font-size est indispensable, voir le piège documenté au point 5. DÉPENDANCE RÉSIDUELLE À LA GRILLE (points 7, 8 et 9) Le SCOPE du bandeau ne dépend plus de la grille, mais ces trois règles-ci visent encore les colonnes par .col-md-4 — c'est le seul moyen lisible de les distinguer du titre, qui est dans un col-md-12 de la même .row. Si l'auteur repasse les colonnes en col-md-6 ou col-md-3, elles perdront leur mise en forme (intitulés et corps de texte) tandis que le reste du bandeau — fond, arrondi, titre — restera intact. Panne partielle et visible, donc facile à repérer : il suffira de mettre à jour ces trois sélecteurs. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .col-md-4 .cmp-text h1 { font-family: var(--oss-font-eyebrow); /* "Roboto Condensed", graisse 700 réellement hébergée */ font-weight: 700; font-size: var(--oss-fs-eyebrow) !important; /* 15px */ line-height: var(--oss-lh-text); letter-spacing: var(--oss-eyebrow-tracking); text-transform: uppercase; color: var(--oss-color-white); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--oss-zoom-rule); } /* --- 8. Corps de texte des colonnes --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .col-md-4 .cmp-text p { font-family: var(--oss-font-body); font-size: var(--oss-fs-body); line-height: var(--oss-lh-text); color: var(--oss-zoom-on-navy); text-align: left; margin: 0; } /* --- 9. Mobile : colonnes empilées, titre resserré --- */ @media (max-width: 767.98px) { .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-top-area .hero-banner-content { padding: 48px 20px; } .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .hero-banner-content__inner > .aem-Grid > .headline-text > .mb-0 .cmp-text > h1 { font-size: 32px !important; /* voir le piège font-size du point 5 */ line-height: 38px; margin-bottom: 28px; } .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_727099504/"]) .col-md-4 + .col-md-4 { margin-top: 28px; } } /* ============================================================ CARTES DE TÉMOIGNAGE — VISUELS ============================================================ POURQUOI CE SCOPE La page compte 17 .image-extension aux classes rigoureusement identiques (hero, bandeaux, affiche, logos partenaires…). Aucun id ni classe d'auteur ne distingue les témoignages, et le chemin AEM des visuels n'est pas un point d'accroche fiable : « -5050col » apparaît aussi hors de cette section. La seule signature structurelle propre aux cartes est la paire de frères visuel + prénom dans une même .aem-Grid. Relevé sur la page : 8 correspondances (2 dans la rangée 50/50, 3+3 dans les deux rangées 33/33/33), et aucun faux positif — les 5 autres .aem-Grid porteuses d'un .image-extension n'ont pas de .button-link en enfant direct. Le jour où l'auteur posera un button-link à côté d'une image hors témoignages, ce scope l'atteindra : la parade sera d'ajouter une classe d'auteur sur les column-control concernés. POURQUOI L'ARRONDI EST EN CSS ET NON CUIT DANS LE PNG Les visuels sont servis en .img-fluid, donc leur largeur rendue varie : ~645px en rangée 50/50, ~415px en 33/33/33, jusqu'à la pleine largeur en mobile. Un rayon cuit dans le fichier se met à l'échelle avec l'image — 20px sur un PNG de 1440px ne valent plus que 9px en 2 colonnes et 5,8px en 3 colonnes, et l'arrondi diffère donc d'une rangée à l'autre. Porté ici, il vaut 20px partout. POURQUOI aspect-ratio ET NON LE SEUL height:auto D'AEM .img-fluid laisse la hauteur suivre le ratio intrinsèque du fichier : un visuel livré dans un autre format désaligne toute sa rangée. Le 16/9 est donc verrouillé ici, object-fit:cover absorbant l'écart. Les 7 PNG livrés étant déjà en 1440×810, cette règle ne change rien aujourd'hui : c'est un garde-fou. SPÉCIFICITÉ (0,4,1) face au (0,1,0) de .img-fluid : aucun !important requis. ============================================================ */ .aem-Grid:has(> .image-extension):has(> .button-link) > .image-extension img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--oss-radius-md); } /* ============================================================ BOUTON DE LANCEMENT VIDÉO (témoignages) — modèle « GUITTA » ============================================================ PORTÉE — À JOUR AU RELEVÉ DU RENDU COURANT .btn--text-swapped[data-type="icon-with-text"] correspond maintenant aux SEPT boutons de témoignage : GUITTA, ANNE-MARIE, LAURA, EMILIE, CHRISTIAN, PASCALE, MONIQUE. Contrôle : 7 occurrences de btn--text-swapped et 7 de data-type="icon-with-text" dans le rendu. La note des versions précédentes (« un seul élément, le bouton GUITTA, les 8 autres en data-type="video" et en tofu ») est PÉRIMÉE : les auteurs ont depuis saisi le SVG partout, et les carrés vides ont disparu sans une ligne de CSS de plus — c'était l'effet attendu. Reste hors de cette portée le CTA « Découvrir la vidéo » du haut de page (.btn.rounded-pill, sans data-type), qui n'est pas bâti sur ce modèle. SPÉCIFICITÉ Aucun !important n'est nécessaire sur la couleur : le style inline de l'auteur (color:rgb(74,201,197)) est posé sur le , or une déclaration directe sur le l'emporte toujours sur une valeur simplement héritée du parent. ORDRE VISUEL AEM applique flex-direction:row-reverse. Le SVG est donc premier dans le DOM mais s'affiche à DROITE, le libellé à gauche. ============================================================ */ .btn.btn--text-swapped[data-type="icon-with-text"] { align-items: center; /* aligne verticalement libellé et pastille */ gap: 0.9375rem; text-decoration: none; transition: color 0.15s ease-in-out; } /* --- Libellé : spécification de la charte --- */ .btn.btn--text-swapped[data-type="icon-with-text"] span:last-child { color: rgba(64, 172, 181, 0.9); /* --oss-color-teal à 90 % */ font-family: var(--oss-font-eyebrow); /* "Roboto Condensed" */ font-size: 22px; font-style: normal; font-weight: 700; /* graisse réelle, self-hostée : pas de faux gras */ line-height: 1.2; /* Annule le margin-right:.9375rem d'AEM : l'écart est désormais porté par le gap du conteneur flex, plus lisible et symétrique. */ margin: 0; } /* --- Pastille : correction de l'alignement --- */ .btn.btn--text-swapped[data-type="icon-with-text"] span:first-child { display: inline-flex; align-items: center; } /* AEM remonte le SVG de 5px (margin-top:-.3125rem), ce qui le décale par rapport à la ligne de base du libellé. */ .btn.btn--text-swapped[data-type="icon-with-text"] svg { display: block; margin-top: 0; flex-shrink: 0; } /* --- États d'interaction (absents du composant AEM) --- */ .btn.btn--text-swapped[data-type="icon-with-text"]:hover { text-decoration: none; /* neutralise le a:hover global de cette feuille */ } .btn.btn--text-swapped[data-type="icon-with-text"]:hover span:last-child { color: rgb(64, 172, 181); /* le libellé passe de 90 % à pleine opacité */ } /* fill-opacity en CSS l'emporte sur l'attribut de présentation fill-opacity="0.901961" porté par le du SVG. */ .btn.btn--text-swapped[data-type="icon-with-text"]:hover svg rect { fill-opacity: 1; } /* --- Rectangle gris au clic : traité globalement --- Le rectangle gris qui apparaissait au clic sur ces boutons, et qui persistait après la fermeture de la pop-in, était le halo de focus Bootstrap 4 du clientlib. Il est éteint pour TOUS les .btn et .btn-close de la page par le bloc « HALOS DE FOCUS BOOTSTRAP » en tête de cette feuille — diagnostic, inventaire et raison du !important y sont consignés. Il n'y a donc rien à répéter ici. Ne reste ci-dessous que l'indicateur clavier, plus serré que le patron global : ces boutons n'ont ni fond ni bordure, un rayon de 4 px cadre mieux le couple libellé + pastille. Le sélecteur pèse (0,4,0) contre (0,2,0) au patron global : c'est celui-ci qui s'applique. */ .btn.btn--text-swapped[data-type="icon-with-text"]:focus-visible { outline: 2px solid var(--oss-color-navy); outline-offset: 4px; border-radius: 4px; } /* ============================================================ BANDEAU « OVAIRES SOUS SURVEILLANCE » (après les témoignages) ============================================================ C'est le second hero-banner overlay-content annoncé plus haut comme « intact ». Il ne l'était pas : il casse par le même mécanisme que le bandeau « Zoom sur 3 leviers », en pire, parce que son visuel est très panoramique (ratio ~2,4) alors que son texte est long. CE QUI CASSAIT 1. Hauteur dictée par l'image. Le clientlib pose .hero-banner__inner.overlay-content .hero-banner-content { position:absolute; top:0; height:100%; overflow:auto } En mobile l'image ne fait plus que ~200px de haut quand le texte en demande ~420 : scrollbar verticale, phrase coupée en plein milieu. 2. Scrollbar horizontale. .hero-banner--box met --bs-gutter-x:0, donc le padding latéral de .hero-banner-content (calculé en var(--bs-gutter-x,.75rem)) tombe à zéro. Mais le .row imbriqué RE-DÉCLARE --bs-gutter-x:1.5rem sur lui-même (règle Bootstrap de base), d'où margin-left/right:-12px. 24px de débord que plus rien n'absorbe. 3. Contraste. Le texte héritait du #7e7e7e de cette feuille (règle « Base Text & Paragraphs ») sur le navy #1a2172, soit un ratio d'environ 1,9:1. La maquette demande du blanc. 4. Collision. Le lockup « Ovaires sous surveillance » est cuit dans le PNG, et align-items:center centrait le texte verticalement : il atterrissait pile sur le logo. POURQUOI ON N'UTILISE PAS ICI object-fit:cover Le bandeau « Zoom » passait son image en calque absolu recadré en cover. Impossible ici : le visuel est panoramique et le logo est centré. En mobile le conteneur devient plus haut que large, cover recadre donc les CÔTÉS et le lockup serait rogné à « AIRE ». On empile : image dans le flux à son ratio naturel, texte dans un panneau navy dessous. POURQUOI UNE MARGE NÉGATIVE EN POURCENTAGE (--oss-banner-jonction) Le PNG contient, sous le logo, une large plage de navy vide destinée à recevoir le texte. Empiler naïvement laisserait donc un trou. On remonte le panneau pour la manger. La valeur est en %, et les marges en % se résolvent sur la LARGEUR du bloc conteneur — exactement la façon dont la géométrie interne du PNG se met à l'échelle (img-fluid : largeur 100%, hauteur auto). Un jeton en px se serait décalé à chaque largeur d'écran. Relevé sur le rendu à 464px de large : plage vide = 136px, soit 29,3 % de la largeur. D'où 29 %. Effet de bord utile : la remontée (29 % ≈ 134px) dépasse largement le rayon des angles (30px de maquette ≈ 9px à cette échelle), donc le panneau recouvre au passage les angles inférieurs arrondis du PNG — aucune encoche blanche à la jonction. ⚠ Cette valeur est solidaire de CE visuel. Si l'auteur remplace image2.png, la re-mesurer. POURQUOI UN NAVY LOCAL ET NON --oss-color-navy Le navy du visuel est #1a2172 (relevé concordant dans Figma et au pixel sur le rendu). Le jeton global vaut #101971 : l'employer ferait apparaître une couture nette à la jonction. POURQUOI LE SCOPE EST ANCRÉ SUR LE CHEMIN JCR Les deux hero-banner overlay-content de la page portent une liste de classes rigoureusement identique. Ce bloc était d'abord ciblé par :not(:has(.col-md-4)), le complément de la grille du bloc « Zoom » — un scope NÉGATIF, donc ouvert : il attrapait tout hero overlay dépourvu de col-md-4. Quand la grille du bloc « Zoom » a changé, ce dernier a simultanément perdu sa mise en forme et hérité de celle d'ici. Voir l'explication complète dans le bloc « Zoom » ci-dessus. On s'ancre donc sur le chemin JCR du column-control qui porte ce hero, lisible dans le src de son image : signature positive, propre à ce bloc, insensible aux retouches de contenu. Le troisième hero-banner (en-tête de page) n'a pas overlay-content : il est hors d'atteinte d'office. ⚠ LE « / » FINAL EST OBLIGATOIRE column_control_72709 est un PRÉFIXE de column_control_727099504 (le bloc « Zoom »). Sans le séparateur, [src*=…] matcherait les deux. ⚠ SI L'IMAGE PASSE EN RESPONSIVE Tu prévois d'ajouter des variantes mobile/tablette. Tant que le conserve un src pointant sous ce column-control, le scope tient. Si AEM émet un dont l' perd son src, il faudra viser aussi [srcset*=…]. ============================================================ */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) { --oss-banner-navy: #1a2172; --oss-banner-jonction: 29%; --oss-banner-inset-start: 20.32%; /* 306/1506 dans la maquette */ --oss-banner-inset-end: 16.73%; /* (1506-1254)/1506 */ } /* --- 0. L'image doit remplir la largeur du bandeau --- .img-fluid ne pose que max-width:100%;height:auto — jamais width. L'image s'arrête donc à sa largeur intrinsèque dès que le conteneur est plus large qu'elle. En mobile le conteneur est plus étroit, donc invisible ; en desktop le visuel mesurait 1161px pour un panneau de 1250px, d'où un décrochement de ~89px sur le bord droit. width:100% le fait aussi remonter à la largeur du panneau, ce qui rend --oss-banner-jonction exact : ce pourcentage suppose que la géométrie interne du PNG s'échelonne sur la largeur du bandeau. POURQUOI TOUTE LA CHAÎNE ET PAS SEULEMENT LE Même logique que pour la hauteur dans le bandeau « Zoom » : la chaîne .image-extension > .image-container > a doit filer la largeur jusqu'au . Le maillon critique est le , que le composant AEM laisse en display:inline — une largeur sur un inline est purement ignorée. D'où display:block sur toute la chaîne. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-image, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-image .image-extension, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-image .image-container, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-image .image-container > a, .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-image img { display: block; width: 100%; } /* --- 1. Le contenu quitte la surimpression et revient dans le flux --- position:relative + z-index:1 n'est pas décoratif : deux frères non positionnés se peignent dans l'ordre du DOM pour leurs FONDS, mais un élément remplacé (le ) se peint, lui, au-dessus des fonds de blocs non positionnés. Sans z-index, l'image ressortirait par-dessus le panneau navy sur toute la zone de recouvrement. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-top-area .hero-banner-content { position: relative; z-index: 1; display: block; /* annule le flex centré du clientlib */ height: auto; overflow: visible; /* supprime les deux scrollbars */ max-width: none; /* annule les paliers .container (540px, 45pc, 60pc…) */ width: 100%; margin: calc(-1 * var(--oss-banner-jonction)) 0 0; padding: 40px var(--oss-banner-inset-end) 48px var(--oss-banner-inset-start); background: var(--oss-banner-navy); border-bottom-left-radius: var(--oss-radius-lg); border-bottom-right-radius: var(--oss-radius-lg); } /* --- 2. On desserre et on aligne à gauche (maquette) --- */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-top-area .hero-banner-content__inner { max-width: none; /* au lieu des 806px du clientlib */ width: 100%; margin: 0; text-align: left; } /* --- 3. Annule le --bs-gutter-x:1.5rem que le .row se redonne --- Sans ça, ses -12px de marge latérale font sortir le texte des paddings posés en 1. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-content__inner .row { --bs-gutter-x: 0; } /* --- 4. Le
transparent de l'auteur creuse 2 × 25px --- L'espacement est désormais porté par le padding du panneau. display:none plutôt qu'un reset de marges : .my-5 est en !important, il faudrait surenchérir pour rien. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .separator .cmp-separator__horizontal-rule { display: none; } /* --- 5. Corps de texte : blanc, Inter (maquette) --- Inter et non Roboto : c'est la police relevée sur ce bloc dans Figma, là où le reste du site est en Roboto. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .cmp-text p { font-family: var(--oss-font-body-alt); font-weight: 400; font-size: var(--oss-fs-body); line-height: var(--oss-lh-text); color: var(--oss-color-white); margin: 0; } /* --- 6. Accroche : premier

du bloc, en jaquette d'eyebrow --- L'auteur l'a saisie en

ordinaire, pas en

. */ .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .cmp-text p:first-child { font-family: var(--oss-font-eyebrow); font-weight: 700; font-size: var(--oss-fs-eyebrow); line-height: var(--oss-lh-text); letter-spacing: var(--oss-eyebrow-tracking); text-transform: uppercase; color: rgba(64, 172, 181, 0.9); /* --oss-color-teal à 90 %, comme la maquette */ margin-bottom: 8px; } /* --- 7. Mobile : gouttières plates, l'inset en % n'a plus de sens --- */ @media (max-width: 767.98px) { .hero-banner__inner.overlay-content.hero-banner--center-content:has(img[src*="column_control_72709/"]) .hero-banner-top-area .hero-banner-content { padding: 28px 24px 32px; } } /* ============================================================ POP-IN DU COMPOSANT « popup » — CHROME COMMUN (s'applique aux pop-in TEXTUELLES *et* VIDÉO) ============================================================ CE QUE CE BLOC SERT Tout ce qui est CHÂSSIS de pop-in, indépendamment du contenu : le cadre, le rythme intérieur, la croix de fermeture et le surtitre

. La typographie propre à un type de pop-in reste dans son bloc dédié (voir le bloc « POP-IN DE TÉMOIGNAGE TEXTUEL » ci-dessous). La géométrie des médias, elle, n'appartient pas au CSS : voir l'avertissement en fin de bloc. POURQUOI CE SCOPE — .popup ET NON L'id DE CHAQUE POP-IN Le composant AEM « popup » s'enveloppe lui-même dans un
(relevé l. 1072 et 2538 du rendu). Le clientlib s'appuie exactement sur ce marqueur pour styler les pop-in — vérifié : .popup .modal-content{border:0;box-shadow:var(--popup-body-box-shadow)} .popup .modal-body{background-color:#fff;border-radius:.5rem; color:#0033ad;padding:0} .popup .btn-close{…} Il n'y a donc RIEN à inventer : on reprend le scope que le clientlib emploie déjà, un cran plus bas en spécificité. ⚠ POURQUOI AUCUN PRÉFIXE D'id ICI Parce qu'un châssis ne doit pas attendre que l'auteur ait bien nommé son nœud pour se dessiner. L'épisode qui a produit ce bloc le montre : les deux pop-in vidéo s'appelaient « caroline » et « caroline2 » (relevé du rendu du 20/08). Un scope [id^="video-"], pourtant conforme à la consigne de nommage d'alors, aurait été INERTE — et inerte en silence : la pop-in s'ouvre normalement, sans une ligne de mise en forme. C'est la panne trompeuse documentée sur les deux bandeaux de cette feuille. Elles ont depuis été renommées « temoignage-guitta » et « temoignage-anne-marie », ce qui ne change rien ici : le scope .popup ne peut pas se désynchroniser du contenu, il EST le composant. Corollaire, et c'est tout l'intérêt : la croix et le surtitre d'une pop-in sont réparés au moment où elle est créée, quel que soit son id et quel que soit son format. CE QUE CE BLOC N'ATTEINT PAS La pop-in « lien externe » du pied de page (#confirmModal) est enveloppée dans .external-link-popup, PAS dans .popup (relevé l. 2840 du rendu). Le clientlib duplique d'ailleurs tous ses réglages sur les deux wrappers séparément. Elle reste donc intégralement sous contrôle du clientlib — c'est voulu : elle appartient au socle AbbVie, pas à la charte OSS. Contrôle en console — la liste renvoyée ne doit JAMAIS contenir « confirmModal » : [...document.querySelectorAll('.popup .modal')].map(m => m.id) SPÉCIFICITÉ — RELEVÉ CONTRE LES CLIENTLIBS Les sélecteurs de ce bloc sont en (0,3,0) (.popup .modal .x) contre (0,2,0) pour ceux du clientlib (.popup .x), et cette feuille est chargée après : aucun !important requis. ⚠ SAUF SUR font-size DU SURTITRE — voir le point 4. ============================================================ */ /* --- Jetons du châssis (pas de fuite hors des pop-in) --- --oss-popin-pad-top n'est pas une valeur libre : c'est la hauteur qu'occupe la croix de fermeture, calculée à partir de ses deux propres jetons. Régler la croix suffit donc à garantir que la première ligne de contenu ne passe jamais dessous, y compris en mobile où l'inset tombe à 8px (48px de dégagement au lieu de 56). Les gouttières 24px sont celles des blocs mobiles de cette feuille. C'est un plancher de sécurité pour toute pop-in qui n'appartient à aucune famille connue : elle sortira aérée, jamais collée au bord. Les huit témoignages, eux, les rehaussent à 56px dans leur bloc. */ .popup .modal { --oss-popin-close-size: 40px; --oss-popin-close-inset: 16px; --oss-popin-pad-top: calc(var(--oss-popin-close-inset) + var(--oss-popin-close-size)); --oss-popin-pad-x: 24px; --oss-popin-pad-bottom: 24px; } /* ============================================================ 1. CADRE ============================================================ 30px est le rayon des BANDEAUX (--oss-radius-lg), pas celui des visuels de témoignage (--oss-radius-md, 20px) : la pop-in est une surface, pas une vignette. ⚠ POURQUOI border-radius EST REDÉCLARÉ SUR .modal-body Le clientlib donne au corps un fond blanc ET son propre rayon : .popup .modal-body{background-color:#fff;border-radius:.5rem} Or le corps remplit exactement le cadre (width auto, aucune marge, son padding est intérieur) et .modal-content n'est PAS en overflow:hidden. Les deux surfaces étant blanches, la silhouette visible de la pop-in est leur UNION : les angles à 8px du corps dépassent des angles à 30px du cadre et les rabotent. Sans cette ligne, le rayon de la charte est posé mais ne se voit pas — une panne muette de plus, et la raison pour laquelle la V13 rendait une pop-in aux angles presque droits. « inherit » plutôt qu'une valeur en dur : le corps suit le cadre, quel que soit le jour où l'on retouche --oss-radius-lg. */ .popup .modal .modal-content { border: none; border-radius: var(--oss-radius-lg); } .popup .modal .modal-body { border-radius: inherit; } /* --- 2. Rythme intérieur --- Le clientlib pose padding:0 sur le corps : sans cette règle, le contenu est collé aux quatre bords et passe sous la croix. */ .popup .modal .modal-body { padding: var(--oss-popin-pad-top) var(--oss-popin-pad-x) var(--oss-popin-pad-bottom); } /* ============================================================ 3. CROIX DE FERMETURE — RÉPARATION ============================================================ CE QUI EST CASSÉ, ET POURQUOI Bootstrap de base dessine la croix avec un SVG en data-URI posé en background. Le clientlib le DÉTRUIT ensuite — .popup .btn-close {background:transparent} — et le remplace par un glyphe d'icon-font : .popup .btn-close:after{content:"…";font-family:bootstrap-icons!important} Or la police bootstrap-icons N'EST PAS CHARGÉE sur ce site : c'est exactement la cause des carrés vides (tofu) déjà constatée sur les boutons de témoignage (bloc « BOUTON DE LANCEMENT VIDÉO » ci-dessus). Le clientlib pose de surcroît color:var(--bs-white) : le glyphe, même s'il se dessinait, serait blanc sur un .modal-content blanc. Résultat net : une pop-in dont la croix est invisible — le défaut qui rend les trois pop-in vidéo impossibles à fermer autrement qu'au clic sur le fond ou à la touche Échap. CE QU'ON FAIT On neutralise le ::after et on rétablit un SVG en background, en navy. Le content du clientlib n'est PAS en !important (seul font-family l'est) : content:none à (0,3,0) suffit à l'éteindre. Pas de dépendance à une police, donc plus de tofu possible. POSITIONNEMENT Le composant popup place la croix en ENFANT DIRECT de .modal-content, hors de tout .modal-header — la règle .popup .modal-header .btn-close du clientlib ne l'atteint donc jamais. Heureusement .popup .btn-close porte déjà position:absolute;right:5px;top:5px : on ne fait que reprendre l'inset pour l'aligner sur le padding du corps. Le margin-right: auto que le clientlib pose aussi est annulé par margin:0, sans quoi la croix repartirait à gauche. ZONE DE CLIC 40x40 : au-delà du carré de 1em du clientlib, et la cible reste confortable au doigt. Le padding haut du corps vaut exactement 16 + 40 (voir les jetons) : aucune première ligne ne peut passer sous la croix. ============================================================ */ .popup .modal .btn-close::after { content: none; } .popup .modal .btn-close { position: absolute; top: var(--oss-popin-close-inset); right: var(--oss-popin-close-inset); z-index: 5; width: var(--oss-popin-close-size); height: var(--oss-popin-close-size); margin: 0; padding: 0; border: none; border-radius: 50%; opacity: 1; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23101971' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50%; background-size: 16px 16px; transition: background-color 0.15s ease-in-out; } .popup .modal .btn-close:hover { background-color: var(--oss-color-bg-lavender); } /* Le clientlib pose outline:auto — un liseré système, peu lisible sur un bouton rond. On reprend l'indicateur de focus des boutons de témoignage de ce fichier, pour rester cohérent au clavier. L'anneau gris qui apparaissait au CLIC sur la croix, lui, est éteint globalement : voir « HALOS DE FOCUS BOOTSTRAP » en tête de feuille, qui traite les 9 .btn-close de la page — les 8 croix de témoignage et celle de #confirmModal, hors .popup. L'offset est réduit à 2 px ici : la croix est collée à l'angle de la pop-in, 4 px déborderaient. */ .popup .modal .btn-close:focus-visible { outline: 2px solid var(--oss-color-navy); outline-offset: 2px; } /* --- 4. Surtitre

: le patron « eyebrow » de la charte --- Cette feuille style h1, h2, h3 et h6 mais PAS h4 — or c'est h4 que le RTE de ce site produit pour les surtitres, aussi bien « TÉMOIGNAGE DE LAURA » dans une pop-in textuelle que « DÉCOUVREZ LE TÉMOIGNAGE DE GUITTA » dans une pop-in vidéo. Le patron est donc redéclaré ici en entier. ⚠ LE !important SUR font-size EST OBLIGATOIRE Vérifié dans clientlib-site : .h4,h4{font-size:var(--heading-4-font-size)!important} Sans lui la déclaration est silencieusement inerte alors que famille, graisse et couleur passent — la panne trompeuse documentée en détail au point 5 du bandeau « Zoom ». */ .popup .modal .cmp-text h4 { font-family: var(--oss-font-eyebrow); /* "Roboto Condensed" */ font-weight: 700; font-size: var(--oss-fs-eyebrow) !important; /* 15px */ line-height: var(--oss-lh-text); letter-spacing: var(--oss-eyebrow-tracking); text-transform: uppercase; color: var(--oss-color-teal); margin: 0 0 16px; } /* L'auteur balise le surtitre

dans le RTE. font-weight:bolder sur une graisse déjà à 700 demande un 900 qui n'est PAS hébergé : le navigateur fabriquerait un faux gras. */ .popup .modal .cmp-text h4 b, .popup .modal .cmp-text h4 strong { font-weight: 700; } /* --- 5. Neutralise les couleurs inline du RTE --- L'auteur pose systématiquement un color: inline sur ses depuis le RTE d'AEM. Le surtitre de la pop-in de GUITTA en est l'exemple : — un turquoise saisi à la main, voisin mais distinct du teal de la charte (#40acb5). Sans cette règle, c'est la valeur tapée qui gagne, et les trois pop-in vidéo ne seraient jamais tout à fait de la même couleur que les cinq textuelles. Même parade qu'au point 4 du bandeau « Zoom ». */ .popup .modal .cmp-text span[style] { color: inherit !important; } /* ============================================================ ⚠ CE BLOC NE TOUCHE PAS À LA GÉOMÉTRIE DE LA VIDÉO — VOULU ============================================================ Les dimensions du lecteur se règlent dans les OPTIONS DU COMPOSANT VIDÉO d'AEM, pas ici. Toute déclaration de largeur, de hauteur ou de ratio posée en CSS entrerait en concurrence avec un réglage d'auteur : elle gagnerait silencieusement, et le champ du dialogue deviendrait sans effet — le pire des deux mondes, puisque plus personne ne saurait où la valeur est décidée. Le châssis s'arrête donc au bord du média : padding du corps, croix, surtitre. Le reste appartient à l'auteur. Ce que cela laisse sciemment de côté, à traiter dans l'auteur et non ici : — la pop-in de GUITTA contient DEUX fois la même vidéo, l'iframe YouTube collée dans le RTE (l. 2556 du rendu) et le composant vidéo Brightcove. Un CSS ne peut pas trancher lequel garder ; — cette iframe de RTE porte width="560" en dur, qu'aucune option AEM ne pilote : c'est un embed manuel, pas un composant. ============================================================ */ /* --- 6. Mobile --- Seul l'inset de la croix change : le padding haut du corps le suit par calcul (8 + 40 = 48px). Le débordement vertical n'a pas à être traité : .modal est en overflow-y:auto dans le clientlib. */ @media (max-width: 767.98px) { .popup .modal { --oss-popin-close-inset: 8px; } } /* ============================================================ POP-IN DE TÉMOIGNAGE — 8 occurrences, texte ET vidéo ============================================================ CE QUE CE BLOC SERT Les huit témoignages sont servis par un composant popup d'AEM nommé « temoignage- » : cinq au format textuel — LAURA, EMILIE, CHRISTIAN, PASCALE, MONIQUE —, trois en vidéo — GUITTA, ANNE-MARIE et CORALIE (« INTERVIEW DE C. MARJOLLET »). Le format ne se lit PAS dans l'id : c'est un choix d'auteur assumé, les vidéos portent le même préfixe que les textes. Voir la note « LE PRÉFIXE EST LA MARQUE DE LA FAMILLE » plus bas. Ce bloc apporte ce qui vaut pour toute la famille — les gouttières larges et le rythme des paragraphes — plus la CITATION MISE EN AVANT, que seul un témoignage écrit déclenche : une pop-in vidéo ne contient aucun

, la règle y reste muette faute d'élément à styler. Le corps de texte, lui, atteint les deux formats (voir le ⚠ sur la règle

). Le châssis (cadre, croix, surtitre

) est commun aux deux formats et vit dans le bloc « CHROME COMMUN » ci-dessus, ancré sur .popup — il ne dépend d'aucun id. STRUCTURE RÉELLE DU modal-body — RELEVÉE, PAS SUPPOSÉE Un seul composant texte, dont le RTE produit : format vidéo

surtitre, puis 4

(le composant vidéo d'AEM est un frère du composant texte) format textuel

surtitre, puis une SÉRIE ALTERNÉE

citation /

corps — cinq à six citations par témoignage, pas une seule. Les guillemets « » sont TYPÉS par l'auteur dans le

. ⚠ CE POINT A ÉTÉ CORRIGÉ EN V14 La V13 décrivait « le

unique du modal », posé en accroche avant le corps. Le relevé du rendu dit autre chose : les

sont des intertitres de relance, répartis dans tout le témoignage. La règle qui les style vaut pour tous — mais sa marge, elle, avait été calculée pour une citation en tête de corps. Voir le ⚠ MARGE HAUTE sur la règle

. POURQUOI LE SCOPE EST L'id DU MODAL, ET NON UN CHEMIN JCR Les deux bandeaux de cette feuille ont dû être ancrés sur img[src*="column_control_…/"], faute de la moindre classe qui les distingue — avec le piège de préfixe que ce choix traîne, et surtout avec ce défaut-ci : une faute d'ancrage laisse le bandeau s'afficher NU ET SILENCIEUX (deux tours de diagnostic, cf. le bloc « Zoom »). L'id du modal n'a pas ce défaut, parce qu'il fait un DOUBLE EMPLOI : — Bootstrap ouvre la pop-in en cherchant l'élément désigné par le href="#…" du ; — ce bloc CSS s'accroche au même attribut. Les deux ne peuvent donc pas divorcer. Un id faux ou mal orthographié empêche la pop-in de S'OUVRIR — panne immédiate et visible. Il est structurellement impossible d'obtenir une pop-in qui s'ouvre bien mais sort sans mise en forme. OÙ L'AUTEUR SAISIT CET id — CONFIRMÉ La valeur est tapée à la main dans le dialogue du composant popup. AEM, lui, nommerait un nœud dupliqué « popup_1834840097 », comme les column_control_… de la page. C'est de toute façon la même valeur que l'auteur écrit après le # dans le href du bouton déclencheur : les pop-in ont été renommées en « temoignage-guitta » et « temoignage-anne-marie » précisément pour tomber dans ce scope. LE PRÉFIXE EST LA MARQUE DE LA FAMILLE, PAS DU FORMAT Ce point a changé de sens en V14, et c'est important pour la suite. La V13 réservait « temoignage- » au textuel et prescrivait « video- » pour les vidéos, afin que celles-ci n'héritent pas du traitement de citation. L'auteur a tranché dans l'autre sens : les vidéos ont été renommées « temoignage-guitta », « temoignage-annemarie » et « temoignage-coralie ». Ce n'est pas une fuite, c'est une décision — un témoignage est un témoignage, et il n'y a rien à isoler puisque la règle de citation ne mord que sur un

, élément qu'une pop-in vidéo ne contient pas. CE QUE CETTE DÉCISION ENTRAÎNE, ET QU'IL FAUT ASSUMER Les trois pop-in vidéo prennent les gouttières du format long : 56px de chaque côté au lieu des 24px du châssis. Dans un modal-lg (800px), l'image utile passe donc de 752 à 688px. Si cela serre trop la vidéo, la séparation ne pourra PLUS se faire par l'id — il faudra la faire par le contenu, en ancrant les jetons de ce bloc sur .popup .modal:has(.cmp-text h2), c'est-à-dire sur la présence réelle d'une citation. Le relevé confirme que ce discriminant est fiable : h2 présent dans les cinq textuelles, absent des trois vidéo. CONSIGNE DE SAISIE : le préfixe « temoignage- » est la marque des huit témoignages, quel que soit leur format. Contrôle en console — doit rendre 8 : document.querySelectorAll('.popup .modal[id^="temoignage-"]').length POURQUOI .popup PRÉFIXE MAINTENANT CHAQUE SÉLECTEUR Deux raisons, aucune cosmétique : — les jetons de ce bloc REDÉFINISSENT ceux du châssis. À égalité de spécificité, c'est l'ordre d'écriture qui trancherait, et une feuille ne doit pas dépendre de l'ordre de ses blocs pour être juste. .popup .modal[id^=…] est en (0,3,0) contre (0,2,0) pour .popup .modal : la redéfinition gagne où qu'on la place ; — un id est unique dans une page, pas dans un site : le préfixe garantit qu'un ancrage homonyme hors composant popup ne recevrait pas cette typographie. SPÉCIFICITÉ — RELEVÉ CONTRE LES CLIENTLIBS ⚠ font-size DES TITRES. Vérifié dans clientlib-site : .h2,h2{font-size:var(--heading-2-font-size)!important} La citation DOIT donc porter son propre !important, sinon la déclaration est silencieusement inerte alors que famille, graisse et couleur passent (même mécanique que pour le

du châssis). ============================================================ */ /* --- Jetons de la famille « témoignage » --- Gouttières larges, 56px : un paragraphe a besoin d'air sur les côtés. Les trois pop-in vidéo les prennent aussi, puisqu'elles portent le même préfixe — c'est le seul effet réellement visible de ce choix de nommage, et il est documenté dans l'en-tête. Le padding haut reste celui du châssis (dégagement de la croix), le bas est rehaussé pour ne pas serrer la signature. */ .popup .modal[id^="temoignage-"] { --oss-popin-pad-x: 56px; --oss-popin-pad-bottom: 48px; --oss-popin-quote-fs: 28px; --oss-popin-quote-lh: 36px; } /* ============================================================ 1. LA CITATION MISE EN AVANT ============================================================ ⚠ VALEURS À CONFIRMER SUR LA MAQUETTE Le nœud Figma 2015-1093 n'a pas pu être lu (accès MCP non actif au moment de la livraison) et l'export local figma/OSS_V4.png ne contient que la page d'accueil, sans les pop-in. Les valeurs ci-dessous sont donc DÉDUITES des jetons de la charte, pas relevées : famille Bowlby One — la voix « mise en avant » de toute la maquette (hero, titres de section, bandeaux). Roboto Condensed 700 serait l'autre candidat, mais il lirait comme un sous-titre, pas comme une citation. taille 28px / 36px d'interligne. La charte n'a pas de palier entre --oss-fs-display-md (45px, un titre de section) et --oss-fs-question (19px) : 28px est un intercalaire. L'interligne est à 1,29 et non au 1,11 de --oss-lh-title : Bowlby One est très grasse, une citation sur 3 lignes a besoin de plus d'air qu'un titre sur 2. couleur --oss-color-navy. Le h2 global de cette feuille est en teal, ce qui conviendrait mal à un bloc de texte long sur blanc (le navy monte à ~11:1 de contraste). Les valeurs à revoir le jour où la maquette est lisible sont regroupées dans les jetons --oss-popin-quote-* en tête de bloc. LES GUILLEMETS SONT TYPÉS PAR L'AUTEUR, PAS POSÉS EN ::before Le contenu du site emploie déjà les guillemets français « » saisis au clavier (l. 1827 du rendu). Un ::before ferait doublon dès que l'auteur les tape, et un doublon est invisible en revue de contenu. Si la maquette impose un guillemet DÉCORATIF (gros glyphe en filigrane), il viendra en ::before une fois sa géométrie relevée. ⚠ MARGE HAUTE — DÉFAUT CONNU, CORRECTIF EN ATTENTE D'ARBITRAGE margin:0 0 28px a été calculé pour la structure que supposait la V13 : UNE citation, en tête de corps, juste sous le surtitre — cas où une marge haute nulle est la bonne réponse. Le rendu réel enchaîne cinq à six citations entre les paragraphes. Pour la deuxième et les suivantes, il ne reste donc au-dessus que les 16px de marge basse du

qui précède, contre 28px en dessous : l'intertitre est collé au paragraphe qu'il quitte et détaché de celui qu'il introduit — exactement l'inverse de ce qu'on veut. Le correctif tient en deux déclarations, à appliquer après contrôle visuel sur laura (6 citations) : margin: 40px 0 28px; puis .cmp-text h2:first-of-type { margin-top: 0 } Volontairement NON appliqué : il déplace la typographie des cinq pop-in textuelles déjà en ligne. ============================================================ */ .popup .modal[id^="temoignage-"] .cmp-text h2 { font-family: var(--oss-font-display); /* "Bowlby One" */ font-weight: 400; font-size: var(--oss-popin-quote-fs) !important; /* voir l'en-tête */ line-height: var(--oss-popin-quote-lh); color: var(--oss-color-navy); margin: 0 0 28px; /* Bowlby One n'est fournie qu'en graisse 400. On interdit au navigateur de fabriquer un faux gras par déformation mécanique des contours, ce qui empâte cette display déjà très grasse. */ font-synthesis: none; -webkit-font-smoothing: antialiased; } /* Même parade que sur le titre du bandeau « Zoom » : le RTE encadre volontiers le texte d'un , dont le font-weight:bolder du navigateur redéclenche le faux gras que font-synthesis vient d'écarter. */ .popup .modal[id^="temoignage-"] .cmp-text h2 b, .popup .modal[id^="temoignage-"] .cmp-text h2 strong { font-weight: 400; } /* --- 2. Corps du témoignage et signature --- Déclaré explicitement plutôt que laissé à la règle globale « Base Text & Paragraphs » : le bloc reste autonome si cette règle-là change un jour. La couleur retenue est --oss-color-text (#7e7e7e), le gris de corps du site — 4,6:1 sur blanc, conforme AA. À revoir si la maquette demande du navy pour ce texte. ⚠ Cette règle atteint aussi les quatre

de chacune des trois pop-in vidéo, du fait du préfixe partagé. C'est voulu : ce sont de vrais paragraphes de contexte sous le surtitre, ils doivent lire comme le corps d'un témoignage écrit. Le lecteur vidéo, lui, est un composant frère du composant texte — il n'est pas dans un

et cette règle ne l'approche pas. */ .popup .modal[id^="temoignage-"] .cmp-text p { font-family: var(--oss-font-body); /* "Roboto" */ font-weight: 400; font-size: var(--oss-fs-body); line-height: var(--oss-lh-text); color: var(--oss-color-text); margin: 0 0 16px; } .popup .modal[id^="temoignage-"] .cmp-text p:last-child { margin-bottom: 0; } /* --- 3. Mobile --- L'inset de la croix et le padding haut qui en découle sont traités dans le mobile du châssis. */ @media (max-width: 767.98px) { .popup .modal[id^="temoignage-"] { --oss-popin-pad-x: 24px; --oss-popin-pad-bottom: 32px; --oss-popin-quote-fs: 22px; --oss-popin-quote-lh: 29px; } .popup .modal[id^="temoignage-"] .cmp-text h2 { margin-bottom: 20px; } } /* ============================================================ BLOCS JAUNE PÂLE « TÉLÉCHARGEMENTS » — TAILLE DES TITRES 2 occurrences, fond #FAF8D8 CE QUE CE BLOC SERT Les deux encarts de téléchargement en bas de page, structurés à l'identique (visuel en col-md-4, texte en col-md-8) : · « Téléchargez l'affiche et le livret de la campagne ! » · « Téléchargez notre brochure ! » CE QUI ÉTAIT RENDU AVANT — relevé, pas supposé Les deux titres sont des

. Le

global en haut de cette feuille demande --oss-fs-display-md (45px) SANS !important : il est donc inerte, voir le piège documenté plus haut. Les titres sortaient à la valeur du clientlib : :root { --bs-body-font-size: 0.875rem } → 14px :root { --heading-2-font-size: calc(var(--bs-body-font-size)*2.5) } .h2,h2 { font-size: var(--heading-2-font-size)!important } → 35px Confirmé par deux voies indépendantes : ce calcul de cascade, et la mesure des hauteurs de capitales sur la capture du 04/09/2026 (28px device pour ces titres contre 37px pour « Zoom sur 3 grands leviers », dont les 45px sont acquis) — les deux tombent sur 35px. L'interligne, lui, venait bien de cette feuille : 50px (--oss-lh-title), le clientlib ne posant aucun line-height sur h2. CE QU'ON FAIT Spécification Figma du graphiste : Bowlby One, 400, 25px / 30px, letter-spacing 0%. CE QUI N'A BESOIN D'AUCUNE DÉCLARATION ICI · font-family : le

global pose déjà --oss-font-display, et le clientlib ne met pas d'!important sur font-family. On la redéclare quand même, pour que la règle porte la spécification entière et survive à un remaniement des règles globales. · font-weight 400 : posé par le

global, non contrarié. · letter-spacing 0% : relevé dans clientlib-site, AUCUNE règle ne touche au letter-spacing des h2. La valeur native est donc déjà celle demandée — une déclaration serait un no-op. · faux gras : contrairement au titre du bandeau, ces deux

ne contiennent PAS de (relevé dans le rendu : un simple porteur d'un color: inline). Bowlby One n'existant qu'en 400, il n'y a ici rien à neutraliser, donc pas de font-synthesis. LE !important EST OBLIGATOIRE SUR font-size, PAS SUR line-height font-size doit battre le .h2,h2{...!important} du clientlib. En spécificité notre sélecteur pèse (0,3,1) contre (0,0,1) : à !important égal, il passe. line-height n'est pas disputé. POURQUOI L'ANCRAGE SUR LA COULEUR DE FOND Un seul sélecteur couvre les deux encarts, et il ne dépend ni de la grille ni des chemins JCR. Le risque est assumé et connu : si l'auteur change #FAF8D8 dans la boîte de dialogue AEM, la règle meurt d'un coup sur les deux blocs — panne franche et visible, donc immédiate à diagnostiquer. Le drapeau « i » du sélecteur d'attribut n'est pas décoratif : la valeur d'un attribut est comparée LITTÉRALEMENT, et le HTL sort « background: #FAF8D8 » en capitales. Sans le « i », le jour où AEM ou l'auteur écrirait #faf8d8, la règle cesserait de matcher. L'alternative écartée était d'ancrer sur le chemin JCR des deux visuels : column_control_59318 est un PRÉFIXE de column_control_593189693, donc un [src*=] sur le premier attrape aussi le second. Piège à maintenance, pour aucun gain. CE QUE CE BLOC NE TOUCHE PAS, ET POURQUOI · Le surtitre « ALLER PLUS LOIN » du premier encart est un

. Cette feuille ne style pas h4 : il sort à --heading-4-font-size (14 × 1,8 = 25,2px) dans la police de corps du clientlib, et ne ressemble donc pas aux surtitres

du reste du site (Roboto Condensed 700 / 15px / capitales / teal). Il pèse désormais autant que le titre qu'il surmonte. Hors spécification reçue, laissé tel quel volontairement — à arbitrer séparément. · Les marges. Le

global pose margin-bottom: 24px ; la spécification reçue ne couvre pas le rythme vertical, on n'y touche pas. · La couleur. Elle vient d'un color: inline sur le du RTE (rgb(0,64,184)) : aucune règle de feuille ne peut l'atteindre, et ce n'était pas demandé. PAS DE PALIER MOBILE — VÉRIFIÉ, PLUS NÉCESSAIRE --heading-2-font-size n'a aucun palier responsive dans le clientlib : les 35px s'appliquaient jusqu'à 320px de large, dans une colonne empilée. À 25px le problème se dissout : le mot le plus long, « Téléchargez », mesure ~156px à cette taille, contre ~319px de largeur utile à 375px de viewport. Le titre passe sur 3 lignes sans jamais déborder. Un palier mobile serait donc du réglage esthétique, pas une réparation. UNE LIGNE OU DEUX, SELON LE BREAKPOINT Mesuré sur la capture : le titre affiche/livret occupe ~1150px device bout à bout à 35px, soit ~821px à 25px, pour ~891px de largeur utile. Il tient donc sur UNE ligne — mais seulement en xxl (conteneur 1320px). De 1200 à 1400px de viewport le conteneur retombe à 1140 et le titre reste sur deux lignes. Comportement attendu, pas un défaut. ============================================================ */ .bg-container[style*="FAF8D8" i] .cmp-text h2 { font-family: var(--oss-font-display); /* "Bowlby One" */ font-size: 25px !important; /* voir le piège !important ci-dessus */ line-height: 30px; }