/* ============================================================ HEADER refonte V2.5 — fashioncurvyshop.com (02/08/2026, refonte-code) Déployé dans : wp-content/themes/enfold-child/refonte-header.css (STAGING) Source de vérité : maintenance-fcs/ux/refonte-header.css Enfilé par : functions.php (enfold-child), hook wp_enqueue_scripts, prio 999 (après refonte-socle.css, qui fournit les variables --fcs-* et les polices) Principe retenu (voir rapport de livraison pour la justification complète) : le header natif Enfold (#header, menu WP complet à dizaines de sous-catégories, hamburger natif) est MASQUÉ ci-dessous en une seule règle réversible. Un header maison est injecté à la place via functions.php (hook wp_body_open, fonction fcs_refonte_header()) : bandeau de réassurance + barre logo/ recherche/icônes + nav 7 entrées + tiroir mobile. Rollback = supprimer ce fichier (ou juste la règle #header{display:none}) : le header Enfold d'origine réapparaît instantanément, rien d'autre n'est touché. ============================================================ */ /* ---------- 1. Masquage du header natif Enfold (réversible) ---------- */ #header { display: none !important; } /* ---------- 1bis. CORRECTIF 03/08/2026 (retour visuel gérante) ---------- Enfold réserve un padding-top sur #main pour compenser SON PROPRE header quand il est sticky/fixed (théorie confirmée en conditions réelles : #top #main hérite jusqu'à 198px de padding-top selon la combinaison de classes html_header_sticky/html_header_topbar_active/html_large/ html_bottom_nav_header posées par Enfold sur — présentes même header natif masqué, car ce sont des réglages de thème, pas liés à l'affichage réel). Notre .fcs-header est position:relative (flux normal, jamais fixed) : cette réserve est du vide mort, jamais comblé par rien. C'était la cause du grand espace blanc vu par la gérante entre le menu et le hero de l'accueil (visible à toutes les largeurs, plus frappant en grand écran). Sélecteur + !important nécessaires : plusieurs variantes de la règle Enfold (`.html_xxx… #top #main`) sont déjà très spécifiques (2 ID + jusqu'à 6 classes) sans être elles-mêmes !important — un simple ajout de classes ne suffit pas à égaler richement toutes les combinaisons possibles, d'où le recours à !important ici (règle no-op de toute façon ailleurs qu'à 0, donc sans risque de régression). */ #top #main { padding-top: 0 !important; } /* ============================================================ 2. Bandeau de réassurance défilant ============================================================ */ .fcs-marquee { background: var(--fcs-rose); overflow: hidden; padding: 9px 0; /* Correctif refonte-perf (02/08/2026) : seul élément du header sans hauteur réservée avant l'arrivée de Jost — micro-CLS possible au swap de police. ~13px de texte + 9px de padding haut/bas = hauteur rendue réelle mesurée autour de 38-40px selon les navigateurs ; on la réserve. */ min-height: 40px; } .fcs-marquee-track { display: flex; width: max-content; animation: fcs-marquee 30s linear infinite; } .fcs-marquee-group { display: flex; align-items: center; gap: 36px; padding-right: 36px; } .fcs-marquee-item { color: var(--fcs-prune); font-family: var(--fcs-font-text); font-size: 13px; letter-spacing: .08em; white-space: nowrap; } .fcs-marquee-sep { color: rgba(42, 22, 32, .45); font-size: 9px; animation: fcs-blink 2.5s ease-in-out infinite; } @keyframes fcs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fcs-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Réduction de mouvement : on fige la piste et on masque le doublon (déjà couvert globalement par refonte-socle.css, on rend juste le doublon inerte proprement ici pour éviter un texte tronqué visible). */ @media (prefers-reduced-motion: reduce) { .fcs-marquee-track { animation: none; transform: none; } /* Correctif refonte-perf (02/08/2026) : le clignotement d'opacité des séparateurs ◆ (@keyframes fcs-blink) échappait à la neutralisation globale de refonte-socle.css car il est réaffirmé ici avec sa propre déclaration `animation` — il faut le neutraliser explicitement aussi. */ .fcs-marquee-sep { animation: none; } .fcs-marquee-group:nth-child(2) { display: none; } } /* ============================================================ 3. Barre principale (logo / recherche / icônes) + nav desktop ============================================================ */ .fcs-header { font-family: var(--fcs-font-text); background: var(--fcs-white); border-bottom: 1px solid var(--fcs-bg-card); position: relative; z-index: 200; } .fcs-header-bar { display: flex; align-items: center; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 16px clamp(20px, 4vw, 56px); } .fcs-header-logo img { height: 60px; width: auto; display: block; } .fcs-header-search { flex: 1; display: flex; align-items: center; gap: 14px; background: var(--fcs-bg-soft); border: 1px solid var(--fcs-bg-card); border-radius: var(--fcs-radius-pill); padding: 0 24px; height: 52px; transition: border-color .2s var(--fcs-ease-out); } .fcs-header-search:focus-within { border-color: var(--fcs-rose); } .fcs-header-search svg { flex: none; color: var(--fcs-text-subtle); } .fcs-header-search input { flex: 1; border: 0; background: none; font-size: 14.5px; font-family: inherit; color: var(--fcs-prune); letter-spacing: .02em; } .fcs-header-search input::placeholder { color: var(--fcs-text-subtle); } .fcs-header-search input:focus { outline: none; } /* Correctif 03/08/2026 (retour gérante post-bascule) : la règle globale Enfold #top input[type="search"] écrasait le champ (fond blanc, bordure, height 37px, margin-bottom 20px) → boîte blanche désaxée qui débordait de la pilule rose. Même préfixe #top, déclaré ici : il gagne. */ #top .fcs-header-search input[type="search"] { flex: 1; border: 0; background: none; box-shadow: none; height: auto; margin: 0; padding: 0; font-size: 14.5px; font-family: inherit; color: var(--fcs-prune); letter-spacing: .02em; } .fcs-header-icons { display: flex; align-items: center; gap: 4px; } .fcs-icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--fcs-prune); position: relative; transition: color .2s var(--fcs-ease-out); border-radius: var(--fcs-radius-sm); } .fcs-icon-btn:hover, .fcs-icon-btn:focus-visible { color: var(--fcs-framboise); } .fcs-icon-btn .fcs-cart-count { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; border-radius: var(--fcs-radius-pill); background: var(--fcs-framboise); color: var(--fcs-white); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-sizing: border-box; } /* --- Nav desktop (7 entrées) --- */ .fcs-nav { display: flex; justify-content: center; align-items: center; gap: 30px; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); height: 56px; border-top: 1px solid var(--fcs-bg-soft); font-size: 15px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; } .fcs-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--fcs-text-secondary); text-decoration: none; white-space: nowrap; transition: color .2s var(--fcs-ease-out); padding: 4px 2px; } .fcs-nav-link:hover, .fcs-nav-link:focus-visible { color: var(--fcs-framboise); } .fcs-nav-item { position: relative; display: inline-flex; align-items: center; } .fcs-nav-caret { font-size: 9px; color: var(--fcs-text-subtle); } .fcs-submenu { position: absolute; left: -18px; top: 100%; margin-top: 10px; background: var(--fcs-white); border: 1px solid var(--fcs-bg-card); border-radius: var(--fcs-radius-lg); box-shadow: var(--fcs-shadow-xl); padding: 14px 8px; display: flex; flex-direction: column; min-width: 236px; z-index: 210; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s var(--fcs-ease-out), transform .2s var(--fcs-ease-out); } .fcs-nav-item:hover .fcs-submenu, .fcs-nav-item:focus-within .fcs-submenu { opacity: 1; transform: translateY(0); pointer-events: auto; } .fcs-submenu a { display: block; padding: 10px 18px; border-radius: var(--fcs-radius-sm); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fcs-text-secondary); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; } .fcs-submenu a:hover, .fcs-submenu a:focus-visible { background: var(--fcs-bg-soft); color: var(--fcs-framboise); } .fcs-nav-star { font-size: 12px; color: #e0a800; line-height: 1; } /* Hamburger + logo mobile + panier : masqués en desktop */ .fcs-header-mobilebar, .fcs-drawer, .fcs-drawer-backdrop { display: none; } /* ============================================================ 4. Version mobile (≤767px) — cohérent avec le seuil de mobile-ux.css ============================================================ */ @media only screen and (max-width: 767px) { .fcs-header-bar, .fcs-nav { display: none; } .fcs-header-mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--fcs-white); } .fcs-burger { display: flex; flex-direction: column; gap: 4.5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; } .fcs-burger span { height: 2px; width: 24px; background: var(--fcs-prune); border-radius: 2px; display: block; } .fcs-burger span:last-child { width: 16px; align-self: center; } .fcs-header-mobilebar .fcs-header-logo img { height: 44px; } .fcs-mobile-cart { background: var(--fcs-framboise); color: var(--fcs-white); border-radius: var(--fcs-radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap; } } /* Desktop nav un peu resserrée entre 768 et 1024px (pas de maquette dédiée, ajustement raisonnable pour éviter le tassement à l'étroit). */ @media (min-width: 768px) and (max-width: 1024px) { .fcs-header-bar { gap: 20px; padding: 14px clamp(16px, 3vw, 32px); } .fcs-header-logo img { height: 48px; } .fcs-nav { gap: 16px; font-size: 13.5px; padding: 0 clamp(16px, 3vw, 32px); } } /* ============================================================ 5. Tiroir de navigation mobile (off-canvas) ============================================================ */ @media only screen and (max-width: 767px) { .fcs-drawer-backdrop { position: fixed; inset: 0; background: rgba(42, 22, 32, .4); z-index: 998; opacity: 0; pointer-events: none; transition: opacity .3s var(--fcs-ease-out); } .fcs-drawer { position: fixed; left: 0; top: 0; bottom: 0; width: min(330px, 86vw); background: var(--fcs-bg-soft); display: flex; flex-direction: column; box-shadow: 18px 0 50px rgba(42, 22, 32, .3); z-index: 999; transform: translateX(-100%); transition: transform .3s var(--fcs-ease-out); } html.fcs-drawer-open .fcs-drawer-backdrop { opacity: 1; pointer-events: auto; } html.fcs-drawer-open .fcs-drawer { transform: translateX(0); } html.fcs-drawer-open { overflow: hidden; } .fcs-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--fcs-bg-card); background: var(--fcs-white); } .fcs-drawer-head img { height: 40px; width: auto; } .fcs-drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fcs-text-subtle); background: none; border: 0; cursor: pointer; } .fcs-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; } .fcs-drawer-eyebrow { margin: 18px 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fcs-text-subtle); font-weight: 600; } .fcs-drawer-eyebrow:first-child { margin-top: 0; } .fcs-drawer-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--fcs-bg-card); text-decoration: none; font-family: var(--fcs-font-script); font-size: 30px; line-height: 1; color: var(--fcs-prune); } .fcs-drawer-link .fcs-chev { font-family: var(--fcs-font-text); color: #c8b3bc; font-size: 16px; display: flex; align-items: center; gap: 8px; } .fcs-drawer-star { font-size: 13px; color: #e0a800; } .fcs-drawer details { border-bottom: 1px solid var(--fcs-bg-card); } .fcs-drawer summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; font-family: var(--fcs-font-script); font-size: 30px; line-height: 1; color: var(--fcs-prune); cursor: pointer; list-style: none; } .fcs-drawer summary::-webkit-details-marker { display: none; } .fcs-drawer summary .fcs-chev { font-family: var(--fcs-font-text); color: var(--fcs-framboise-clair); font-size: 20px; transition: transform .2s var(--fcs-ease-out); } .fcs-drawer details[open] summary .fcs-chev { transform: rotate(45deg); } .fcs-drawer-sublist { display: flex; flex-direction: column; padding: 2px 0 10px; } .fcs-drawer-sublink { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 0 14px; font-size: 14px; color: var(--fcs-text-secondary); text-decoration: none; border-left: 2px solid var(--fcs-bg-card); } .fcs-drawer-sublink span { color: #c8b3bc; } /* Lien "Voir toute la [catégorie]" — premier lien du sous-menu, ajouté suite à l'audit SEO (02/08/2026) : le parent est un déplieur, pas un lien, donc sans ce lien la page catégorie parente n'a plus aucun lien visible depuis le tiroir mobile. Légèrement distingué visuellement des sous-catégories qui suivent. */ .fcs-drawer-sublink-all { font-weight: 600; color: var(--fcs-framboise); } .fcs-drawer-service { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--fcs-bg-card); font-size: 15.5px; color: var(--fcs-prune); text-decoration: none; } .fcs-drawer-service .fcs-label { display: flex; align-items: center; gap: 9px; } .fcs-drawer-badge-new { background: var(--fcs-framboise); color: var(--fcs-white); font-size: 9px; font-weight: 700; letter-spacing: .08em; border-radius: var(--fcs-radius-pill); padding: 3px 7px; text-transform: uppercase; } .fcs-drawer-dot { width: 7px; height: 7px; border-radius: var(--fcs-radius-pill); background: #e6446e; flex: none; } .fcs-drawer-foot { padding: 14px 16px 18px; border-top: 1px solid var(--fcs-bg-card); background: var(--fcs-white); display: flex; gap: 10px; } .fcs-drawer-account { flex: 1; min-height: 48px; border: 1.5px solid var(--fcs-framboise); color: var(--fcs-framboise); border-radius: var(--fcs-radius-pill); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; text-decoration: none; } .fcs-drawer-wishlist { min-height: 48px; min-width: 48px; border: 1.5px solid var(--fcs-border); border-radius: var(--fcs-radius-pill); display: flex; align-items: center; justify-content: center; color: var(--fcs-framboise-clair); font-size: 18px; text-decoration: none; } } /* Correctif refonte-compat (02/08/2026, bloquant) : le bouton WhatsApp flottant du mu-plugin (fcs-wa-float, fixed left:14 bottom:14, z-index 9998 — mu-plugin non touché) recouvre le pied du tiroir mobile (.fcs-drawer-foot, z-index 999, contient le bouton "Mon compte") quand le tiroir est ouvert. On le masque simplement tant que le tiroir est ouvert ; il réapparaît à la fermeture (classe fcs-drawer-open déjà posée/retirée par refonte-header.js sur , aucun changement JS nécessaire). */ html.fcs-drawer-open .fcs-wa-float { display: none; } /* Focus clavier visible partout dans le header/tiroir */ .fcs-header a:focus-visible, .fcs-header button:focus-visible, .fcs-drawer a:focus-visible, .fcs-drawer button:focus-visible, .fcs-drawer summary:focus-visible { outline: 2px solid var(--fcs-framboise); outline-offset: 2px; }