wrapper du widget, PAS sur le
qui est le vrai lien cliquable/visible. Nos règles .ax-btn génériques
(dans axialys-elementor.css) stylent donc le mauvais élément.
→ On neutralise le wrapper et on réapplique le style ax-btn-primary
directement sur le réel, à l'intérieur. */
body.ax-scope .ax-btn.ax-btn-primary {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
body.ax-scope .ax-btn.ax-btn-primary .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ax-space-2);
padding: 12px 24px;
border-radius: var(--ax-radius-full);
background: var(--ax-color-accent-500);
color: var(--ax-color-neutral-0) !important;
border: 2px solid transparent;
font-family: var(--ax-font-body);
font-size: var(--ax-font-size-sm);
font-weight: var(--ax-font-weight-semibold);
letter-spacing: 0.025em;
line-height: 1;
text-decoration: none !important;
box-shadow: none;
transition: all var(--ax-duration-fast) var(--ax-ease-standard);
}
body.ax-scope .ax-btn.ax-btn-primary .elementor-button:hover {
background: var(--ax-color-accent-600);
border-color: var(--ax-color-accent-600);
}
/* Même piège à prévoir pour tout futur bouton Elementor marqué ax-btn-* :
dupliquer ce pattern (neutraliser le wrapper, cibler .elementor-button). */
/* ───────────────────────────────────────────────────────────────────
* 3 — CARDS ARTICLES (accueil, catégorie)
* Widget natif Elementor Posts (skin classique). Structure DOM confirmée
* en direct (4 sept 2026) :
* article.elementor-post.elementor-grid-item ← la card entière
* └ div.elementor-post__card (display:flex, column)
* ├ a.elementor-post__thumbnail__link (radius 20px déjà natif)
* │ └ div.elementor-post__thumbnail
* ├ div.elementor-post__badge (catégorie)
* └ div.elementor-post__text
* ├ h3.elementor-post__title > a
* └ div.elementor-post__excerpt > p + .rt-reading-time
* Toutes ces classes sont générées par le widget natif (pas des ID hex
* Elementor) → identiques sur preprod/prod, aucun réglage manuel BO requis
* pour cette partie (contrairement au header). On habille l'article entier
* en boîte (fond, bordure, radius, ombre) et le padding pousse l'image et
* le texte uniformément vers l'intérieur, comme un cadre.
* ─────────────────────────────────────────────────────────────────── */
body.ax-scope article.elementor-post{
background:var(--ax-color-neutral-0, #fff) !important;
border:1px solid rgba(66, 139, 254, 0.18) !important;
border-radius:var(--ax-radius-xl, 16px) !important;
box-shadow:0 2px 16px rgba(33, 29, 109, 0.05) !important;
padding:var(--ax-space-6, 24px) !important;
transition:box-shadow .22s cubic-bezier(.4,0,.2,1),
transform .22s cubic-bezier(.4,0,.2,1),
border-color .22s !important;
}
/* Radius de l'image interne — règle des "coins concentriques" (radius
imbriqué = radius de la boîte englobante − son padding, plancher à 0) :
avec un radius de carte de 16px et un padding de 24px, le padding dépasse
déjà le radius extérieur → l'image se trouve entièrement au-delà de la
zone courbée du coin de la carte, donc radius correct = max(0, 16-24) = 0.
Remplace le radius natif du widget (20px sur le lien, 10px sur l'image),
qui ne suivait pas cette règle et jurait visuellement avec le radius de
la carte. Si le padding ou le radius de la carte change un jour, recalculer
avec la même formule plutôt que de garder cette valeur figée. */
body.ax-scope article.elementor-post .elementor-post__thumbnail__link,
body.ax-scope article.elementor-post .elementor-post__thumbnail{
border-radius:0 !important;
}
body.ax-scope article.elementor-post:hover{
box-shadow:0 14px 36px rgba(33, 29, 109, 0.11), 0 3px 10px rgba(33, 29, 109, 0.07) !important;
transform:translateY(-4px) !important;
border-color:rgba(66, 139, 254, 0.35) !important;
}
/* Le lien du titre ne doit pas hériter d'un souligné générique */
body.ax-scope article.elementor-post .elementor-post__title a{
text-decoration:none !important;
}
/* ── Typographie — alignée sur le design system (ax-as-h4 / ax-as-p-sm)
du site principal, 4 sept 2026. Avant : HelveticaNeue, titre 22px/900
noir-bleu (#282589), excerpt 18px noir pur — pas les mêmes valeurs que
le site principal (SF Pro, échelle de tailles/couleurs définie dans
tokens.css). Repris ici en dur (valeurs identiques à ax-as-h4/ax-as-p-sm
dans axialys-elementor.css) plutôt que d'ajouter les classes ax-as-*
dans Elementor (contrainte : pas de nouvelle classe sur les widgets). */
body.ax-scope article.elementor-post .elementor-post__title a{
font-family:var(--ax-font-body) !important;
font-size:16px !important; /* fixe (9 sept 2026), avant clamp(16px, 1.5vw, 20px) — demande d'Ilich */
font-weight:600 !important;
line-height:1.35 !important;
letter-spacing:-0.005em !important;
color:var(--ax-color-primary-500, #211D6D) !important;
}
body.ax-scope article.elementor-post .elementor-post__excerpt p{
font-family:var(--ax-font-body) !important;
font-size:var(--ax-font-size-sm, 14px) !important;
font-weight:400 !important;
line-height:var(--ax-line-height-normal, 1.5) !important;
color:var(--ax-color-neutral-700, #495057) !important;
}
/* ── Tags/meta (catégorie + temps de lecture) — badges statut (8 sept 2026)
Ilich veut que ces deux tags ressemblent aux "Badges statut" du design
system (réf. preprod.axialys.com/compossants-axialys/, section "Badges
& Tags") : catégorie en bleu (comme le badge "IA"), temps de lecture en
vert (comme le badge "Actif"). Valeurs reprises À L'IDENTIQUE de ces
deux badges (vérifiées en Computed Styles sur la page de référence, pas
devinées depuis le CSS seul) : fond teinté 50, radius 9999px, padding
5px 10px, texte 11px/500 — sauf qu'on garde nos icônes Tabler existantes
(dossier/horloge, déjà pertinentes) plutôt que de les remplacer par
celles du design system (cerveau/check), non demandé.
Icône générée en Font Awesome via ::before à l'origine (confirmé en DOM :
.elementor-post__badge::before = \f07c "folder-open", .rt-reading-time
::before = \f252 "hourglass-half"), remplacée par le glyphe Tabler
correspondant (codepoints lus directement dans le fichier CSS Tabler
réellement chargé, pas devinés — ti-folder \eaad, ti-clock \ea70). */
body.ax-scope article.elementor-post .elementor-post__badge,
body.ax-scope article.elementor-post .rt-reading-time{
font-family:var(--ax-font-body) !important;
font-size:11px !important;
font-weight:500 !important;
gap:6px !important;
width:fit-content !important; /* sans ça le badge s'étire en pleine largeur (flex hérité du widget) */
padding:5px 10px !important;
border-radius:var(--ax-radius-full, 9999px) !important;
}
body.ax-scope article.elementor-post .elementor-post__badge *,
body.ax-scope article.elementor-post .rt-reading-time *{
color:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
}
/* Catégorie — bleu, comme le badge "IA" du design system */
body.ax-scope article.elementor-post .elementor-post__badge{
background:var(--ax-color-blue-50, #EFF5FF) !important;
color:var(--ax-color-blue-500, #428BFE) !important;
}
body.ax-scope article.elementor-post .elementor-post__badge::before{
font-family:"tabler-icons" !important;
content:"\eaad" !important;
font-weight:400 !important;
font-size:14px !important;
width:16px !important;
height:16px !important;
color:var(--ax-color-blue-500, #428BFE) !important;
margin:0 !important; /* voir note double-espacement ci-dessous */
}
/* Temps de lecture — vert, comme le badge "Actif" du design system.
Icône et texte n'ont PAS la même nuance de vert dans le design system
original (icône success-500 plus vive, texte success-700 plus sombre
pour la lisibilité) — reproduit tel quel plutôt qu'une seule couleur. */
body.ax-scope article.elementor-post .rt-reading-time{
background:var(--ax-color-success-50, #F0FDF4) !important;
color:var(--ax-color-success-700, #15803D) !important;
}
body.ax-scope article.elementor-post .rt-reading-time::before{
font-family:"tabler-icons" !important;
content:"\ea70" !important;
font-weight:400 !important;
font-size:14px !important;
width:16px !important;
height:16px !important;
color:var(--ax-color-success-500, #22C55E) !important;
margin:0 !important; /* voir note double-espacement ci-dessous */
}
/* Double espacement constaté (4 sept 2026) : le ::before natif d'Elementor
porte SON PROPRE margin-right:10px (règle native du widget, jamais
touchée par nos overrides précédents qui ne déclaraient pas margin), qui
s'ADDITIONNAIT à notre gap:6px sur le conteneur flex → ~16px d'écart au
lieu de 6px. Le margin:0 !important ci-dessus neutralise le natif, seul
notre gap:6px régit l'espacement désormais. */
/* ── Largeur de contenu harmonisée à 1080px (4 sept 2026) ────────────
Le template "Détail article" (elementor-location-single) est déjà à
1080px nativement (réglage Elementor du template, pas touché). Le
template "Archive" (accueil + pages catégorie, MÊME template Elementor,
partagé) était à 1280px → ramené à 1080px pour cohérence entre les pages.
Ciblage via :has() sur la section qui contient précisément le widget
Posts, plutôt qu'un ID Elementor auto-généré (instable entre
preprod/prod, cf. avertissement en tête de fichier) ou qu'une règle
généraliste sur TOUTES les sections "boxed" du template (qui toucherait
aussi le hero au-dessus, non demandé ici). elementor-location-archive
est une classe stable posée par Elementor selon le type de template
(pas un ID auto-généré) → safe preprod/prod. :has() supporté par tous
les navigateurs modernes (Chrome/Edge/Safari 2023+, Firefox 121+). */
body.ax-scope .elementor-location-archive .elementor-section.elementor-section-boxed:has(.elementor-widget-archive-posts, .elementor-widget-posts) > .elementor-container{
max-width:1080px !important;
}
/* ───────────────────────────────────────────────────────────────────
* 4 — TAGS / META (catégorie, temps de lecture, auteur) — icônes Tabler
* .elementor-post__badge (catégorie), .rt-reading-time (temps de lecture)
* ─────────────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────────────
* 5 — HEROS (bandeaux accueil / catégorie)
* L'essentiel se fait sans code : classes ax-bg-soft / ax-bg-aurora +
* ax-section dans le champ "Classes CSS" Elementor de la section
* (cf. axialys-elementor.css).
* ─────────────────────────────────────────────────────────────────── */
/* Utilitaire optionnel : à poser (Avancé > Classes CSS, dans Elementor)
sur une section hero dont le fond doit remonter visuellement jusqu'en
haut de l'écran, sous la pill flottante — comble le padding-top de
body.ax-scope avec le fond propre de la section (gradient inclus) au
lieu de laisser un espace neutre. Les deux valeurs (ici et sur
body.ax-scope ci-dessous) doivent rester synchronisées. */
.ax-hero-bleed {
margin-top: -100px;
padding-top: 100px;
}
/* ───────────────────────────────────────────────────────────────────
* 6 — DÉTAIL ARTICLE (sidebar sommaire, typographie)
* .sommaire, .SommaireCustom, .elementor-toc*
* ─────────────────────────────────────────────────────────────────── */
/* ── Sidebar sommaire — #ax-sommaire .sommaire (9 sept 2026). Le `ul`
lui-même porte la classe .sommaire (pas de wrapper supplémentaire) —
il avait une largeur FIXE (270px) plus large que son propre parent
(218px, la colonne sidebar), un margin-top/bottom par défaut du
navigateur (16px), et un border-left bleu marine hérité — passé en
largeur fluide (100% du parent), marge et bordure retirées, taille
de texte des items réduite. Décalage résiduel repéré par Ilich après
coup (capture DevTools à l'appui) : padding-left natif de 40px
(comportement par défaut du navigateur pour un ``, jamais
touché jusque-là), qui poussait le texte des items nettement plus à
droite que le titre "Sommaire" juste au-dessus — réduit à 20px pour
aligner visuellement les puces avec le titre (mesuré en live : le
titre démarre à ~22px du bord gauche du `ul`). */
#ax-sommaire .sommaire{
width:100% !important;
margin:0 !important;
border-left:none !important;
padding-left:20px !important;
}
#ax-sommaire .sommaire li{
font-size:14px !important;
}
/* ── Masquer #ax-sommaire quand il est vide (9 sept 2026). sommaire.js
(PRÉ-EXISTANT) ne remplit le `` que s'il trouve
au moins un h2 dans le contenu de l'article — sans h2 (cas des
articles courts/vidéo), le `` reste vide mais la boîte
#ax-sommaire (titre "Sommaire" + son cadre) restait affichée, vide.
Le script a bien une tentative de masquage existante ($titleContainer
.hide() sur `.titreSommaire`) mais ce sélecteur ne matche AUCUN
élément réel du DOM (vérifié en live), donc ne fait rien — plutôt que
corriger ce sélecteur mort côté JS, la boîte entière est masquée en
CSS via :has(), plus robuste (fonctionne même si la structure interne
change) et sans dépendance à ce bout de JS. .sommaire correspond
véritablement à :empty ici (contrairement au conteneur vidé de son
iframe plus bas, qui garde des nœuds de texte blancs résiduels du
HTML source — `.sommaire`, lui, est peuplé en JS via `.append()`,
sans un tel résidu). */
#ax-sommaire:has(.sommaire:empty){
display:none !important;
}
/* ── Accordéon "Derniers articles" — sidebar (9 sept 2026). Ilich
remonte 2 points : fermeture/ouverture qui décale le texte à
l'intérieur (peu fluide), et une couleur de fond indésirable sur les
articles.
(1) `.elementor-tab-content` (widget Accordéon natif d'Elementor)
était en overflow:visible au repos — pendant l'animation JS
(jQuery slideUp/slideDown, propre à Elementor, pas dans nos
fichiers), le contenu pouvait donc apparaître non "coupé" par la
hauteur en cours d'animation plutôt que révélé progressivement,
d'où l'effet de texte qui "saute" au lieu de glisser. Forcé en
overflow:hidden en permanence : le contenu reste toujours cadré par
la hauteur réelle de la boîte, animée ou non.
(2) Fond lavande (`rgb(247,247,255)`) trouvé à 2 endroits distincts
(pas le même élément que (1)) : sur `.eael-post-block-grid` (le
conteneur de la liste, widget "Post Block" du plugin Essential
Addons for Elementor) ET sur `.eael-entry-title` (le titre de
CHAQUE article, d'où la bande visible derrière chaque lien) — les
deux définis dans style.css natif, jamais touchés. Sélecteurs
stables utilisés (classes génériques du plugin, pas d'ID Elementor
auto-généré instable). Un seul accordéon "Derniers articles" existe
actuellement sur le blog (vérifié en DOM) — traité sans restriction
supplémentaire de scope. */
body.ax-scope .elementor-accordion .elementor-tab-content{
overflow:hidden !important;
}
body.ax-scope .eael-post-block-grid,
body.ax-scope .eael-post-block .eael-entry-title{
background:none !important;
}
/* ── .ax-accordeonArticles (9 sept 2026) — classe utilitaire à poser
dans Elementor sur le widget Accordéon "Derniers articles" (même
principe que .ax-SidebarBlog juste au-dessus : pas encore posée
dans le DOM au moment de l'écriture, pas testée en live). Complète
le fix du 9 sept 2026 plus haut (overflow:hidden + fond retiré sur
.eael-post-block-grid/.eael-entry-title) : largeur pleine du contenu
de l'accordéon, et fond de chaque `` (`.eael-post-block-
item`, actuellement blanc — invisible sur fond blanc mais pas
transparent) rendu explicitement transparent. */
.ax-accordeonArticles .elementor-tab-content{
width:100% !important;
}
.ax-accordeonArticles .elementor-tab-content article{
background:transparent !important;
}
/* ── .ax-SidebarBlog (9 sept 2026) — classe utilitaire posée par Ilich
dans Elementor (Avancé > Classes CSS) sur le conteneur de la
sidebar, espace les blocs (Sommaire, bannière, Derniers articles…)
de 30px. Ilich a confirmé la classe posée (`e-flex e-con e-child
ax-SidebarBlog`) mais sans effet visible — `gap:30px` sans
!important ne suffisait pas : Elementor pose sa propre règle,
`.elementor-element:where(.e-con-full, .elementor-widget){ gap:
var(--row-gap) var(--column-gap) }` (frontend.min.css), avec la
MÊME spécificité que notre classe seule (`:where()` compte pour une
spécificité nulle par conception, donc seul `.elementor-element`
compte, à égalité avec `.ax-SidebarBlog`) — à spécificité égale,
c'est l'ordre de chargement qui décide, et cette règle native gagne.
`!important` ajouté pour trancher sans ambiguïté, peu importe
l'ordre des fichiers. Testé en live avant écriture (`getComputedStyle`
confirmant gap/row-gap/column-gap à 30px, zoom confirmant l'espacement
visuel entre Sommaire / bannière replay / Derniers articles). */
.ax-SidebarBlog{
gap:30px !important;
}
/* ── Image de couverture (9 sept 2026) ──────────────────────────────
#thumbCover / #thumbCover-Tags / .thumbCover-Titre / .thumbCover-
MetaDatas : structure ET positionnement (position:relative sur
#thumbCover, position:absolute+bas sur #thumbCover-Tags, flex
space-between sur .thumbCover-MetaDatas, titre déjà blanc) DÉJÀ posés
par Ilich côté Elementor (Atomic containers) — seul le fond du bandeau
et la couleur du texte des metadata manquaient, sur inspiration d'un
rendu Figma (photo + bandeau sombre flouté en bas, nom+date à gauche,
tag à droite). Widgets réels dans .thumbCover-MetaDatas : Post Info
"auteur" (avatar+nom) à gauche, Post Info "date de publication" à
droite — pas de 3ᵉ tag "catégorie" dans ce bloc précis, mais l'agen-
cement en miroir reste identique à la référence. */
/* Élévation type "card articles" (9 sept 2026) — Ilich veut le même
radius/ombre/hover que les cards de l'accueil (article.elementor-post,
voir section 3 plus haut) sur l'image de couverture ET, plus largement,
sur toute image qui recevrait la classe réutilisable .cardImage-
elevation (à poser dans Elementor, onglet Avancé > Classes CSS, sur
n'importe quel widget image souhaité — aucune limite à #thumbCover).
Étendu le même jour à TOUTES les images du corps d'article
(.postPage-descPage img) — pas besoin de poser la classe une par une
sur chaque image insérée dans l'éditeur de contenu, contrairement aux
images de widgets Elementor (où seule .cardImage-elevation, posée à
la main, cible l'image voulue). Valeurs IDENTIQUES à
article.elementor-post (à resynchroniser manuellement si l'une des
deux change un jour, pas de mixin possible en CSS brut) — SAUF
background/padding, non pertinents pour une image pleine largeur (pas
une boîte de contenu blanche). `overflow:hidden` nécessaire : sans
lui, l'image et #thumbCover-Tags (position:absolute, ancré en bas)
dépasseraient des coins arrondis au lieu d'y être découpés. */
#thumbCover,
.cardImage-elevation,
.postPage-descPage img{
border-radius:var(--ax-radius-xl, 16px) !important;
overflow:hidden !important;
border:1px solid rgba(66, 139, 254, 0.18) !important;
box-shadow:0 2px 16px rgba(33, 29, 109, 0.05) !important;
transition:box-shadow .22s cubic-bezier(.4,0,.2,1),
transform .22s cubic-bezier(.4,0,.2,1),
border-color .22s !important;
}
#thumbCover:hover,
.cardImage-elevation:hover,
.postPage-descPage img:hover{
box-shadow:0 14px 36px rgba(33, 29, 109, 0.11), 0 3px 10px rgba(33, 29, 109, 0.07) !important;
transform:translateY(-4px) !important;
border-color:rgba(66, 139, 254, 0.35) !important;
}
#thumbCover-Tags{
background:rgba(33, 29, 109, 0.45) !important; /* teinte navy marque (9 sept 2026) au lieu de noir pur */
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
z-index:4 !important; /* 9 sept 2026 — passe devant le poster image posé sur
les articles vidéo (.elementor-widget-theme-post-featured-image img,
z-index:2, plus bas) : #thumbCover-Tags n'avait jamais eu besoin de
z-index explicite jusqu'ici (aucun autre élément absolute ne se
disputait la même zone), donc restait à "auto" — un poids plus faible
qu'un z-index explicite positif, le bandeau se retrouvait peint
EN DESSOUS du poster, invisible. */
}
.thumbCover-MetaDatas .elementor-icon-list-item,
.thumbCover-MetaDatas .elementor-icon-list-item *{
color:rgba(255,255,255,0.9) !important;
}
/* ── Image de couverture cassée sur les articles avec vidéo (9 sept
2026) — RÉGRESSION causée par l'élévation ci-dessus (overflow:hidden
sur #thumbCover, ajoutée le même jour). Sur les articles dont le
contenu contient une vidéo intégrée, assets/js/sommaire.js (script
`glossaire_script` chargé par functions.php, PRÉ-EXISTANT, pas écrit
par nous) détecte un