/* ============================================================ BLOG refonte V2.5 — LISTE + ARCHIVES CATÉGORIE fashioncurvyshop.com — 04/08/2026, refonte-code (2e intégrateur) Déployé dans : wp-content/themes/enfold-child/refonte-blog.css (STAGING) Source de vérité : maintenance-fcs/ux/refonte-blog.css Enfilé par functions.php (prio 999) UNIQUEMENT sur is_home() || is_category(). Dépendances déclarées : fcs-refonte-socle, fcs-refonte-header. PÉRIMÈTRE DE CE LOT : la LISTE (/blog/, page 59113 = page_for_posts) et les ARCHIVES de catégorie (/category//). Le gabarit ARTICLE (single) fera l'objet d'un lot séparé — ce fichier n'est volontairement PAS enfilé sur is_singular('post') aujourd'hui. 0 SURCHARGE DE TEMPLATE. Le registre des surcharges WooCommerce reste vide. Le H1, le chapô et le filtre de catégories sont posés par le hook standard du thème parent `ava_after_main_title`, qui se déclenche à l'identique dans enfold/index.php (l.27), enfold/archive.php (l.26) et enfold/single.php (l.28) — un seul hook couvre les trois gabarits. AUCUNE VARIABLE CSS NOUVELLE. Toutes les couleurs, rayons et ombres proviennent de refonte-socle.css. ------------------------------------------------------------ MARKUP NATIF SUR LEQUEL ON S'APPUIE (relevé au curl sur le staging, pas supposé) — Enfold « content slider » en mode GRILLE : .avia-content-slider.avia-content-grid-active > .avia-content-slider-inner > .slide-entry-wrap (× 8, une par rangée de 3) > article.slide-entry > a.slide-image > img > .slide-content > header.entry-content-header > span.blog-categories.minor-meta > a[rel=tag] > h3.slide-entry-title > a > span.av-vertical-delimiter > .slide-entry-excerpt.entry-content > footer.entry-footer > .slide-meta > time.slide-meta-time > span.hidden (données structurées) ⚠️ Le mode est `avia-content-GRID-active`, pas `-slider-active` : shortcodes.js (l.205) n'attache `aviaSlider` qu'à `.avia-content-slider-active`. AUCUN JavaScript Enfold ne touche donc à la géométrie de ces cartes — la mise en grille CSS ci-dessous ne peut pas être défaite par un script. ------------------------------------------------------------ RÈGLES ADVERSES, RELEVÉES DANS LE CSS RÉELLEMENT SERVI (avia-merged-styles-*.css téléchargé depuis le staging, PAS l'option en base — c'est cette version-là que le navigateur applique). Le Quick CSS Enfold y est fusionné et servi APRÈS nos refonte-*.css : seule la spécificité nous protège, jamais l'ordre. [A] .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title { font-size:25px !important; font-family:'inclusivesans-regular',… !important; line-height:1.1em !important; text-align:center; text-transform:uppercase; padding:15px 0; letter-spacing:0; margin-bottom:10px } → porte bien `html_elegant-blog` (vérifié). Cette règle frappe les titres de cartes. `!important` sur font-size / font-family / line-height : aucune spécificité ne les bat, `!important` de notre côté est ici la SEULE option — et il est légitime au sens de la convention (règle adverse elle-même `!important`, prouvée). Les autres déclarations sont en priorité normale : nos 3 ID suffisent. [B] #top #wrap_all .all_colors h1, .main-title .entry-title { font-size:35px !important } ← SANS media query → plafonne TOUS les h1 du site à 35px. `!important` requis pour le H1 du blog. Spécificité adverse 2 ID + 1 classe + 1 élément ; la nôtre (#top #wrap_all #main h1.fcs-blog-h1) est à 3 ID + 1 classe + 1 élém. [C] #top #wrap_all .all_colors h1 { font-size:80px; line-height:.7em; font-family:'birthstone-regular-ttf',… } → priorité NORMALE : nos 3 ID suffisent pour la police, et l'interligne passe par --fcs-hn-lh (règle socle à 3 ID). ⚠️ SIGNALEMENT PERF : cette règle applique la police Enfold « Custom Font » birthstone-regular-ttf (TTF ~376 Ko) aux h1. Notre H1 bascule sur la Birthstone woff2 auto-hébergée du socle ; la TTF reste déclarée par Enfold pour les autres h1 du site. Constat PRÉEXISTANT déjà signalé à l'étape 1, hors de ce lot — à trancher par refonte-perf, pas ici. [D] #top .pagination a, #top .fullsize .template-blog .pagination a { color:#f1919c !important; border:1px solid #f1919c !important; background:#fff !important; font-size:20px !important; height/width/line-height:50px !important; box-shadow:… !important } #top .pagination .current { background:#f1919c !important; color:#fff !important; … } → #f1919c sur blanc = **2,27:1** (calculé), très en dessous du seuil AA de 4,5:1. Même défaut que les étiquettes de catégorie. Corrigé ci-dessous en --fcs-framboise. `!important` obligatoire et prouvé. [E] .html_elegant-blog #top .main_color .blog-categories a { color: var(--enfold-main-color-primary) } avec --enfold-main-color-primary: #f1919c → C'EST LA SOURCE des étiquettes de catégorie à 2,27:1 signalées dans le brief. Priorité NORMALE, 1 ID + 3 classes → nos 3 ID la battent SANS `!important`. [F] .responsive #top #wrap_all .slide-entry { width:48%; margin-left:4% } @media (max-width:767px) .av_one_third { margin-left:6%; width:29.33% } .avia-content-slider .slide-entry-wrap { width:100%; float:left; margin-bottom:40px } → grille flottante native, priorité normale, battue par nos 3 ID. ------------------------------------------------------------ ÉCART ASSUMÉ À LA MAQUETTE (documenté, pas subi) La maquette pose le fond de page à #fdfbfa et les cartes en blanc. #fdfbfa n'existe pas dans le socle et la consigne est de NE CRÉER AUCUNE VARIABLE. Les cartes restent donc blanches sur le fond du site, et leur détachement est porté par la bordure --fcs-bg-card + l'ombre --fcs-shadow-sm, toutes deux déjà au socle. Rendu équivalent, zéro valeur nouvelle introduite. ============================================================ */ /* ============================================================ 1. BANDEAU DE TÊTE — fil d'ariane natif + H1 + chapô ============================================================ */ /* Le fil d'ariane Enfold est déjà rendu dans .title_container, JUSTE AU-DESSUS du point d'injection de `ava_after_main_title`. On ne le redessine donc PAS (la maquette en dessine un : le recopier créerait un second BreadcrumbList dans les données structurées). On prolonge simplement le fond pour que fil + titre forment une seule bande, comme dans la frame. Dégradé VERTICAL et non 135° comme la maquette : la bande est coupée en deux éléments DOM distincts, un dégradé oblique y produirait une couture visible à la jointure. Départ et arrivée sont les couleurs de la maquette. */ #top.blog .title_container, #top.category .title_container { background: var(--fcs-bg-soft); border-bottom: 0; } #top.blog .title_container .container, #top.category .title_container .container { padding-top: 18px; padding-bottom: 0; } #top.blog .title_container .breadcrumb, #top.category .title_container .breadcrumb { position: static; float: none; margin: 0; padding: 0; font-family: var(--fcs-font-text); font-size: 13px; color: var(--fcs-text-subtle); } #top.blog .title_container .breadcrumb a, #top.category .title_container .breadcrumb a { color: var(--fcs-text-subtle); text-decoration: none; } #top.blog .title_container .breadcrumb a:hover, #top.category .title_container .breadcrumb a:hover { color: var(--fcs-framboise); text-decoration: underline; } #top.blog .title_container .breadcrumb .trail-end, #top.category .title_container .breadcrumb .trail-end { color: var(--fcs-framboise); } .fcs-blog-hero { background: linear-gradient(180deg, var(--fcs-bg-soft) 0%, var(--fcs-white) 100%); padding: 22px 0 34px; } .fcs-blog-hero > .container { display: flex; flex-direction: column; gap: 12px; } /* H1 — Birthstone, comme la maquette (76px @1440 / 43px @390). `clamp()` en RÈGLE UNIQUE plutôt que deux règles jumelles desktop/mobile : c'est le défaut récurrent du projet (une correction appliquée à un seul affichage). Bornes : 43px atteint dès 813px et en dessous, 76px atteint à partir de 1440px, 5.28vw = 76/1440 entre les deux. */ #top #wrap_all #main h1.fcs-blog-h1 { font-family: var(--fcs-font-script); font-weight: 400; color: var(--fcs-prune); text-transform: none; letter-spacing: 0; margin: 0; padding: 0; /* [B] : #top #wrap_all .all_colors h1 { font-size:35px !important } — sans media query, relevé dans le CSS servi. Aucune spécificité ne bat un !important : celui-ci est obligatoire et prouvé. */ font-size: clamp(43px, 5.28vw, 76px) !important; } /* Interligne du H1 Birthstone. Constante mesurée sur ce projet : la boîte de ligne Birthstone vaut 1,354 × le corps. Un ratio de 1 (valeur de la maquette) ne tient QUE tant que le titre reste sur une seule ligne — dès qu'il boucle, les jambages se chevauchent. Le titre du blog fait 36 caractères : il boucle en mobile. La valeur passe donc par --fcs-hn-lh (règle socle à 3 ID), posée SUR LE TITRE et jamais sur un conteneur — une propriété personnalisée est héritée, la poser sur la bande repeindrait tous les titres qu'elle contient. Valeur de sécurité 1,4 > 1,354. */ #top #wrap_all #main h1.fcs-blog-h1 { --fcs-hn-lh: 1.4; } .fcs-blog-chapo { font-family: var(--fcs-font-text); font-size: 16px; line-height: 1.6; color: var(--fcs-text-muted); max-width: 660px; margin: 0; } /* ============================================================ 2. FILTRE PAR CATÉGORIE — demande explicite de la gérante CRÉATION : n'existe ni en production ni dans la maquette. Conçu dans la charte, et volontairement SANS UNE LIGNE DE JAVASCRIPT : ce sont de vrais liens vers les archives `/category//`, donc indexables, insensibles au cache pleine page, et immunisés au piège `defer_all_js = 1` (qui enferme tout script EN LIGNE contenant du jQuery dans un DOMContentLoaded et transforme une globale en variable locale). « Non classé » est exclue côté PHP (arbitrage manager du 04/08/2026). ============================================================ */ .fcs-blog-filtres { background: var(--fcs-white); padding: 20px 0 4px; } .fcs-blog-filtres-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .fcs-blog-filtres-list li { margin: 0; padding: 0; } .fcs-blog-filtres-list li::marker { content: none; } #top #wrap_all #main .fcs-blog-filtre { display: inline-flex; align-items: center; justify-content: center; /* Cible tactile : 44px de haut minimum (exigence mobile du cahier des charges), obtenue par min-height ET padding, pas par line-height — le texte doit rester centré si le libellé passe sur deux mots longs. */ min-height: 44px; padding: 0 18px; border: 1px solid var(--fcs-bg-card); border-radius: var(--fcs-radius-pill); background: var(--fcs-white); font-family: var(--fcs-font-text); font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--fcs-text-secondary); text-decoration: none; transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out; } #top #wrap_all #main .fcs-blog-filtre:hover, #top #wrap_all #main .fcs-blog-filtre:focus-visible { color: var(--fcs-framboise); background: var(--fcs-bg-soft); border-color: var(--fcs-border-light); } #top #wrap_all #main .fcs-blog-filtre:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 2px; } /* Catégorie active : contraste blanc sur --fcs-framboise (#b04d6b). 5,10:1 mesuré — au-dessus du seuil AA de 4,5:1. */ #top #wrap_all #main .fcs-blog-filtre.is-current { background: var(--fcs-framboise); border-color: var(--fcs-framboise); color: var(--fcs-white); } /* ============================================================ 3. GRILLE DE CARTES — /blog/ ET /category// ============================================================ */ /* La bande de contenu ne doit plus porter le fond de section Enfold : les cartes portent désormais le contraste. */ #top.blog .container_wrap_first, #top.category .container_wrap_first { border-top: 0; } #top #wrap_all #main .template-blog .avia-content-slider { margin: 0; } /* Chaque .slide-entry-wrap est UNE RANGÉE de 3 articles (mesuré : 8 wraps pour 24 articles). On met donc la grille sur la rangée, pas sur le conteneur : les cartes d'une même rangée s'égalisent en hauteur (align stretch par défaut), ce qui donne les « cartes homogènes » de la maquette, sans recourir à display:contents sur ce niveau. */ #top #wrap_all #main .template-blog .slide-entry-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; float: none; width: auto; margin: 0 0 24px; } /* --- La carte --------------------------------------------------------- `display:contents` sur .slide-content et header.entry-content-header remonte leurs enfants au rang d'items de grille de l'article : c'est ce qui permet de placer l'ÉTIQUETTE DE CATÉGORIE et la DATE sur une même ligne alors que le DOM natif les sépare (la date vit dans footer.entry-footer, après l'extrait). PLACEMENT EXPLICITE (grid-row / grid-column), et non par auto-placement. Première version écrite en `order` + auto-placement : MESURÉE FAUSSE le 04/08/2026. La grille produisait SIX lignes au lieu de cinq et l'étiquette de catégorie tombait hors de la ligne de la date (écart constant de 15px, indépendant du contenu). Le placement explicite supprime la classe entière de ces surprises : chaque élément est à une position nommée. L'objection qui avait fait préférer l'auto-placement — « un article sans image décalerait toutes les lignes » — ne tient pas : Enfold rend TOUJOURS un `a.slide-image`, y compris sans miniature (c'est le sens de sa propre règle `.avia-content-slider .fake-thumbnail .slide-image{min-height:70px}`). La ligne 1 existe donc dans tous les cas. Mesuré sur les 24+18 articles du jour : 42 `real-thumbnail`, 0 `fake-thumbnail`. `order` est conservé en second rideau : il fixe aussi l'ordre de parcours au clavier et l'ordre de peinture. */ #top #wrap_all #main .template-blog .slide-entry { display: grid; grid-template-columns: auto 1fr; /* 5 pistes explicites : image / bandeau catégorie+date / titre / extrait / « Lire l'article ». L'extrait est en `1fr` pour ABSORBER la hauteur excédentaire : les cartes d'une même rangée sont étirées à la même hauteur par la grille parente, et sans cette piste souple le lien de fin flotterait au milieu d'une carte dont le titre est court — ce qui casse la lecture en rangée que la maquette recherche. */ grid-template-rows: auto auto auto 1fr auto; align-content: start; column-gap: 8px; row-gap: 13px; width: auto; margin: 0; float: none; padding: 28px; background: var(--fcs-white); border: 1px solid var(--fcs-bg-card); border-radius: 18px; box-shadow: var(--fcs-shadow-sm); overflow: hidden; /* fait mordre l'image sur le rayon de la carte */ transition: box-shadow .22s ease-out, transform .22s ease-out; } #top #wrap_all #main .template-blog .slide-content, #top #wrap_all #main .template-blog .entry-content-header { display: contents; } /* Rien d'autre que transform/opacity en animation (règle motion du projet). */ #top #wrap_all #main .template-blog .slide-entry:hover { transform: translateY(-3px); box-shadow: var(--fcs-shadow-md); } /* Image — débord jusqu'aux bords de la carte, ratio 16/10 de la maquette. Le ratio est imposé en CSS dès le premier rendu (pas par JS) : aucun CLS. Les images natives sont servies en 495×400 (ratio 1,24) : object-fit recadre sans déformer. */ #top #wrap_all #main .template-blog .slide-entry .slide-image { order: 1; grid-row: 1; grid-column: 1 / -1; display: block; margin: -28px -28px 3px; /* SANS CECI, LE DÉBORD NE MARCHE QUE D'UN CÔTÉ. Un `max-width:100%` global (Enfold/WordPress) s'applique à ce lien : il plafonne la largeur à celle de la CELLULE de grille. Les marges négatives décalent alors l'image vers la gauche sans jamais l'élargir — mesuré à 375 comme à 1280 : cellule 280,8px, image 280,75px au lieu des 316,75px attendus, d'où une bande blanche le long du bord droit de chaque carte. Le défaut se voyait mal en desktop, la zone débordante étant blanche elle aussi. */ max-width: none; border-radius: 0; overflow: hidden; background: var(--fcs-bg-soft); } #top #wrap_all #main .template-blog .slide-entry .slide-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; margin: 0; transition: transform .35s ease-out; } #top #wrap_all #main .template-blog .slide-entry:hover .slide-image img { transform: scale(1.04); } /* Étiquette de catégorie — LE POINT SENSIBLE DE CE GABARIT. La maquette la dessine en NON cliquable ; la production porte 32 vrais — un lien ne peut pas en contenir un autre : le y est une contrainte technique, pas un choix de design. En production la contrainte n'existe pas.) */ #top #wrap_all #main .template-blog .slide-entry .blog-categories { order: 2; grid-row: 2; grid-column: 1; min-width: 0; /* NEUTRALISATION MESURÉE, PAS PRÉVENTIVE. Enfold pose `.html_elegant-blog #top .post-entry .blog-categories { display:block; position:relative }` PUIS `.html_elegant-blog #top .avia-content-slider .blog-categories { top:15px }`. Ne pas déclarer `position` laissait donc l'étiquette décalée de 15px vers le bas — exactement 15px, mesuré sur les 24 cartes, ce qui l'empêchait de s'aligner avec la date. L'absence de déclaration n'est pas une neutralisation. `position:static` suffit : il rend `top:15px` inopérant, sans avoir à le redéclarer. */ position: static; justify-self: start; /* Alignement en HAUT et non centré : si l'étiquette passe sur deux lignes (catégorie longue dans une carte étroite), c'est la PREMIÈRE ligne qui doit rester au niveau de la date. Un centrage ferait dériver les deux textes dès que l'un des deux boucle. */ align-self: start; margin: 0; padding: 0; font-family: var(--fcs-font-text); font-size: 12px; font-weight: 600; line-height: 1.2; /* ÉCART ASSUMÉ À LA MAQUETTE : .18em -> .14em. Mesuré le 04/08/2026 : la frame est dessinée à 1440px, où la carte offre 371px de contenu ; à 1280px la nôtre n'en offre que 319. Avec les VRAIES données (« TRUCS ET ASTUCES » + « 22 SEPTEMBRE 2023 »), l'interlettrage de la maquette fait déborder la ligne et renvoie la date sur trois lignes. L'interlettrage est réduit juste assez pour que le cas le plus long tienne ; l'effet « petites capitales espacées » est conservé. */ letter-spacing: .14em; text-transform: uppercase; } /* [E] Enfold pose ici #f1919c (2,27:1 sur blanc). --fcs-framboise -> 5,10:1. Priorité adverse NORMALE : aucun !important nécessaire. */ #top #wrap_all #main .template-blog .slide-entry .blog-categories a { color: var(--fcs-framboise); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease-out; } #top #wrap_all #main .template-blog .slide-entry .blog-categories a:hover, #top #wrap_all #main .template-blog .slide-entry .blog-categories a:focus-visible { border-bottom-color: currentColor; } #top #wrap_all #main .template-blog .slide-entry .blog-categories a:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 2px; } /* Date — remontée sur la ligne de l'étiquette, séparée par « · ». La TYPOGRAPHIE EST POSÉE SUR `.entry-footer` LUI-MÊME, et pas seulement sur le