/* ============================================================ FOOTER refonte V2.5 — fashioncurvyshop.com (02/08/2026, refonte-code) Déployé dans : wp-content/themes/enfold-child/refonte-footer.css (STAGING) Source de vérité : maintenance-fcs/ux/refonte-footer.css Enfilé par : functions.php (enfold-child), hook wp_enqueue_scripts, prio 999 Habille le contenu de la page Enfold "Footer" (ID 102611, builder ALB). Le post_content de cette page enveloppe le HTML ci-dessous habillé dans UN SEUL [av_section][av_codeblock]…[/av_codeblock][/av_section] (même procédé que le bloc SAG (avis) déjà présent en haut de cette page, éprouvé sur ce site) — le HTML n'est jamais posé nu hors builder. Ne touche PAS : - le bandeau socket (liens légaux) sous cette page, géré ailleurs par Enfold ; - le bouton WhatsApp flottant (mu-plugin fcs-whatsapp.php). ============================================================ */ .fcs-footer { background: var(--fcs-ink); color: #e9d3db; font-family: var(--fcs-font-text); padding: 0; } /* ---------- Bandeau réassurance (3 blocs) ---------- */ .fcs-footer-reassurance { background: var(--fcs-bg-soft); padding: 40px clamp(20px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; /* CORRECTIF 03/08/2026 (retour gérante n°2) : « la barre n'est pas assez large » — le fond rose s'arrêtait à 1280px (max-width + margin auto), laissant le noir du footer déborder de chaque côté sur grand écran. Fond désormais pleine largeur ; le CONTENU (les 3 blocs) reste centré dans 1280px via le padding calculé — pas de wrapper à ajouter. */ max-width: none; margin: 0; padding-inline: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2)); } .fcs-reassurance-item { display: flex; align-items: center; gap: 16px; justify-content: center; } .fcs-reassurance-icon { width: 52px; height: 52px; border-radius: var(--fcs-radius-pill); background: var(--fcs-white); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--fcs-shadow-md); flex: none; } .fcs-reassurance-text { display: flex; flex-direction: column; } .fcs-reassurance-title { font-size: 15px; font-weight: 600; color: var(--fcs-prune); } .fcs-reassurance-sub { font-size: 13px; color: var(--fcs-text-muted); } .fcs-reassurance-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .fcs-badge { height: 22px; padding: 0 7px; background: var(--fcs-white); border: 1px solid #ece0e4; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--fcs-shadow-sm); } /* ---------- Bandeau newsletter ---------- */ .fcs-footer-inner { max-width: 1280px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 56px) 36px; } .fcs-newsletter { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; background: var(--fcs-rose); border-radius: var(--fcs-radius-lg); padding: 28px 32px; margin-bottom: 38px; } .fcs-newsletter-copy { display: flex; flex-direction: column; gap: 5px; min-width: 240px; } .fcs-newsletter-copy h3 { margin: 0; font-family: var(--fcs-font-title); font-size: 20px; font-weight: 400; color: var(--fcs-prune); } .fcs-newsletter-copy p { margin: 0; font-size: 13.5px; color: #5c3040; } .fcs-newsletter-form { display: flex; gap: 10px; flex: 1; max-width: 440px; min-width: 260px; } .fcs-newsletter-form input[type="email"] { flex: 1; background: var(--fcs-white); border: 1px solid rgba(42, 22, 32, .14); border-radius: var(--fcs-radius-pill); padding: 12px 20px; color: var(--fcs-prune); font-size: 14px; font-family: inherit; } .fcs-newsletter-form button { background: var(--fcs-prune); color: var(--fcs-white); border: 0; border-radius: var(--fcs-radius-pill); padding: 12px 24px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; transition: transform .2s var(--fcs-ease-out); } .fcs-newsletter-form button:hover, .fcs-newsletter-form button:focus-visible { transform: translateY(-2px); } /* ---------- Colonnes ---------- */ .fcs-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(239, 136, 165, .22); } .fcs-footer-brand { display: flex; flex-direction: column; gap: 16px; } .fcs-footer-brand .fcs-wordmark { font-family: var(--fcs-font-title); font-size: 24px; color: var(--fcs-white); } .fcs-footer-brand p { margin: 0; font-size: 14px; line-height: 1.7; color: #c7a4b1; max-width: 300px; } .fcs-footer-social h3, .fcs-footer-col h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fcs-rose); font-weight: 600; } .fcs-social-icons { display: flex; gap: 10px; flex-wrap: wrap; } .fcs-social-icons a { width: 38px; height: 38px; border-radius: var(--fcs-radius-pill); display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .2s var(--fcs-ease-out), filter .2s var(--fcs-ease-out); } .fcs-social-icons a:hover, .fcs-social-icons a:focus-visible { transform: translateY(-3px); filter: brightness(1.08); } /* ANNULÉ le 03/08/2026 après-midi (clarification gérante) : « les logos avaient les vraies couleurs » — son objection du matin visait un fond ROSE, pas les pastilles aux couleurs de marque de la maquette (bleu Facebook, dégradé Instagram…), qui sont posées en style inline par le gabarit et qu'il faut LAISSER s'exprimer. L'override ci-dessous les écrasait en icônes roses unies : supprimé, retour à la maquette. (Bloc conservé en commentaire pour l'historique de la décision.) ANCIEN CORRECTIF (annulé) : la maquette V2.5 pose bien une pastille de couleur par réseau (bleu Facebook, dégradé Instagram, noir TikTok...) directement en style inline sur chaque — c'est CE QUI EST DÉPLOYÉ ICI, fidèle à la maquette. La gérante ne veut PLUS de fond du tout derrière les icônes (« rose ou autre ») : c'est un CHANGEMENT DE DÉCISION par rapport à la maquette validée, pas un défaut de conformité — signalé tel quel dans le rapport de livraison. Neutralise ici le style inline par icône (background posé en HTML, post_content de la page Footer 102611) avec !important : inline gagnerait sinon toujours contre une classe de feuille externe. Couleur d'icône reprise du rose d'accent déjà utilisé pour "Retrouvez-nous sur les réseaux sociaux" juste au-dessus, jamais de nouvelle couleur inventée. */ /* (override supprimé — les pastilles inline aux couleurs de marque de la maquette s'appliquent de nouveau ; seul le focus clavier garde un liseré) */ .fcs-social-icons a:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 2px; } .fcs-footer-logo-mark { width: 220px; max-width: 100%; height: auto; opacity: .95; margin-top: 6px; } .fcs-footer-col { display: flex; flex-direction: column; gap: 11px; font-size: 14px; } .fcs-footer-col a { display: inline-flex; align-items: center; gap: 7px; color: #e9d3db; text-decoration: none; transition: color .2s var(--fcs-ease-out); } .fcs-footer-col a:hover, .fcs-footer-col a:focus-visible { color: var(--fcs-rose); } .fcs-footer-badge-new { background: rgba(239, 136, 165, .22); color: #f5b8c9; font-size: 9px; font-weight: 700; letter-spacing: .08em; border-radius: var(--fcs-radius-pill); padding: 2px 6px; text-transform: uppercase; } .fcs-footer-copyright { padding-top: 20px; font-size: 12.5px; color: #a17e8d; display: flex; gap: 8px; flex-wrap: wrap; } .fcs-footer-copyright a { color: #a17e8d; text-decoration: underline; } .fcs-footer-copyright a:hover, .fcs-footer-copyright a:focus-visible { color: var(--fcs-rose); } @media only screen and (max-width: 767px) { .fcs-footer-reassurance { grid-template-columns: 1fr; padding: 28px 20px; } .fcs-newsletter { flex-direction: column; align-items: stretch; } .fcs-newsletter-form { max-width: none; } .fcs-footer-cols { grid-template-columns: 1fr; gap: 32px; } } @media (min-width: 768px) and (max-width: 1024px) { .fcs-footer-cols { grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; } } /* ============================================================ CORRECTIF 03/08/2026 — même cause racine que refonte-home.css : Enfold pose #top #wrap_all .all_colors h3 { font-family: birthstone-regular-ttf; font-size:40px } (2 ID + 1 classe + 1 élément), qui battait nos propres déclarations h3 ci-dessus (1 ou 2 classes seulement). Confirmé : le footer (page 102611) est injecté À L'INTÉRIEUR de #main.all_colors sur chaque page (vérifié en DOM réel), donc le même préfixe #top #main.all_colors fonctionne ici aussi. Tailles identiques à celles déjà déclarées plus haut ; .fcs-footer-social/.fcs-footer-col n'avaient jamais déclaré de font-family (ajout, conforme à la maquette V2.5 : eyebrow en police de texte normale). ============================================================ */ #top #main.all_colors .fcs-newsletter-copy h3 { font-family: var(--fcs-font-title); font-size: 20px; font-weight: 400; } #top #main.all_colors .fcs-footer-social h3, #top #main.all_colors .fcs-footer-col h3 { font-family: var(--fcs-font-text); font-size: 12px; font-weight: 600; } /* Correctif bis 03/08/2026 : PLEINE largeur réelle pour la bande de réassurance — la technique 100vw + marges négatives est insensible aux paddings des conteneurs parents (le padding du wrapper sombre la limitait encore). */ .fcs-footer-reassurance { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Correctif ter 03/08/2026 : l'écart blanc avant la bande de réassurance vient du GABARIT DE PAGE Enfold qui enveloppe la page Footer (102611) — #footer-page > .container_wrap > .container > .template-page.content porte les paddings verticaux par défaut d'une page (fond blanc). Annulés uniquement dans le contexte #footer-page. */ #top #footer-page .content, #top #footer-page .container, #top #footer-page .container_wrap { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } /* ============================================================ CORRECTIF 03/08/2026 (soir, demande gérante) — FOOTER : FOND NOIR, TEXTE BLANC. Consigne appliquée à la lettre : la variable globale --fcs-ink (#1c0e15) n'est PAS touchée dans refonte-socle.css (elle sert ailleurs) — tout est surchargé ici, au niveau du footer uniquement. DEUX BUGS LATENTS TROUVÉS EN MESURANT (getComputedStyle sur la prod), non signalés dans la demande mais corrigés par le même passage : 1. `.fcs-footer-col h3` / `.fcs-footer-social h3` s'affichaient en NOIR (#000) et non dans le rose déclaré : `.footer_color h3` / `.main_color h3` d'Enfold sont à spécificité ÉGALE (0-1-1) à notre règle et sa feuille (avia-merged-styles) est enfilée APRÈS refonte-footer.css → Enfold gagnait par simple ordre de chargement. Sur l'ancien fond #1c0e15 ces titres de colonnes étaient donc déjà quasi illisibles. 2. Idem pour `.fcs-footer-col a` et `.fcs-footer-copyright a`, qui s'affichaient en #f1919c (couleur de lien Enfold, `.main_color a`) et non dans les valeurs déclarées ici. D'où le préfixe #top #main.all_colors (2 ID) sur toutes les règles de couleur ci-dessous : il gagne indépendamment de l'ordre de chargement, sans aucun !important. (Le footer, page ALB 102611, est bien injecté à l'intérieur de #main.all_colors sur chaque page — vérifié en DOM réel.) CONTRASTES MESURÉS sur le nouveau fond #000 (WCAG 2.1, ratio calculé) : #fff texte courant, liens, titres de colonnes … 21,00:1 ✅ #ef88a5 survol des liens (var(--fcs-rose)) ……………… 8,74:1 ✅ #f5b8c9 badge « Nouveau » sur son fond rgba(239,136,165,.22) composité sur noir (#351e24) ……………………… 9,26:1 ✅ Aucune couleur de texte du footer sombre n'est sous 4,5:1. ============================================================ */ /* ---------- Fond noir ---------- */ .fcs-footer { background: #000; color: #fff; } /* La SECTION Enfold qui enveloppe le codeblock du footer porte elle aussi le fond --fcs-ink (posé par les réglages de section du builder, servi dans post-102611.css) : sans ça, un liseré #1c0e15 peut rester visible sur les bords. Ancrée sur NOTRE classe .fcs-footer (jamais sur la classe générée av-xxxxx, instable). :has() non supporté = simple repli sur l'ancien #1c0e15, aucun risque de casse. */ #top #footer-page .avia-section:has(.fcs-footer) { background-color: #000; } /* ---------- Textes en blanc ---------- */ #top #main.all_colors .fcs-footer-brand p { color: #fff; } #top #main.all_colors .fcs-footer-brand .fcs-wordmark { color: #fff; } #top #main.all_colors .fcs-footer-social h3, #top #main.all_colors .fcs-footer-col h3 { color: #fff; } #top #main.all_colors .fcs-footer-col a { color: #fff; } #top #main.all_colors .fcs-footer-copyright { color: #fff; } #top #main.all_colors .fcs-footer-copyright a { color: #fff; } /* ---------- Accents rose de la marque CONSERVÉS (consigne) ---------- */ #top #main.all_colors .fcs-footer-col a:hover, #top #main.all_colors .fcs-footer-col a:focus-visible, #top #main.all_colors .fcs-footer-copyright a:hover, #top #main.all_colors .fcs-footer-copyright a:focus-visible { color: var(--fcs-rose); } /* badge « Nouveau » : inchangé (9,26:1 sur le nouveau fond, déjà conforme) */ /* ---------- Garde-fous : les deux bandes à fond CLAIR du footer ne doivent pas hériter du blanc posé sur .fcs-footer (sinon un texte non stylé deviendrait blanc sur rose/rose poudré). Leurs textes visibles ont déjà leurs couleurs propres ; ceci ne fait que borner l'héritage. ---------- */ .fcs-footer-reassurance { color: var(--fcs-prune); } .fcs-newsletter { color: var(--fcs-prune); } /* ------------------------------------------------------------------ GARDE-FOU FLOTTANTS (03/08/2026, même livraison) — conséquence directe de la suppression du socket Enfold. Le socket occupait ~57 px (desktop) à ~130 px (mobile) SOUS la ligne de copyright : il servait d'amortisseur involontaire entre cette ligne et les éléments flottants ancrés en bas d'écran. Une fois le socket retiré, la ligne de copyright remonte au ras du bas de page et passe DANS la zone du bouton WhatsApp flottant. MESURÉ (elementFromPoint, page déroulée à fond, prod) : 375 px — bouton WhatsApp (.fcs-wa-float) y 744→798, x 14→68 lien « CGV » y 750→776 → CENTRE du lien recouvert : ÉCHEC (« Mentions légales » et « Confidentialité » restaient OK) 768 px — 21/21 liens du footer OK (le WhatsApp couvre x 20→197, les liens du copyright commencent après le « © … » vers x 200 ; badge Avis Garantis à droite, x 660→768, jamais atteint) 1280 px — 3/3 liens du copyright OK (mêmes raisons) Correctif appliqué donc UNIQUEMENT à ≤767 px, seule largeur où l'échec est prouvé. Réserve de 96 px : couvre le plus haut des flottants mesurés à cette largeur (badge Société des Avis Garantis, 79 px depuis le bas ; bouton WhatsApp, 68 px) avec une marge de sécurité. Inventaire testé : .fcs-wa-float (mu-plugin), .agJsWidget (Avis Garantis), bandeau/onglet Complianz, tiroir de navigation .fcs-drawer. ------------------------------------------------------------------ */ @media only screen and (max-width: 767px) { .fcs-footer-inner { padding-bottom: 96px; } }