/* ============================================================ Header V3.2 — CSS plat (pas de Tailwind global) Costume Privé Paris — thème warehouse-v3 Mobile-first : base = 375px, @media min-width: 1440px pour desktop SPÉCIFICITÉ v3.2.1 — résolution conflits Bootstrap 4 / Warehouse ───────────────────────────────────────────────────────────────── Stratégie : tous les sélecteurs sont préfixés par leur ID racine (#hv3-header, #hv3-mobile-header, .hv3-drawer, .hv3-search-overlay) afin d'atteindre une spécificité de 100+010 = 110 minimum. !important réservé aux propriétés confirmées cassées par DevTools : - color (hérité de a { color:#777 } Bootstrap) - padding (hérité de a, li { padding:0 }) - text-decoration (Bootstrap met underline sur certains a) - background-color sur .hv3-btn-rdv (jamais overridé par défaut, mais les thèmes reboot parfois background:transparent sur a) ============================================================ */ /* ——— 0. FONT-SIZE ROOT RESET (alignement V3 statique) —————————————————— Bootstrap warehouse force html { font-size: 14px } (au lieu du standard 16px). Sans ce reset, toutes les valeurs rem du V3 sont multipliées par 0.875 (ex: 15.2px = 13.3px au lieu de 15.2px attendu pour matcher Tailwind statique). Fix isolé au scope hv3-* : force 16px qui devient la base rem pour tout l'intérieur. —————————————————————————————————————————————————————————— */ #hv3-header, #hv3-mobile-header, .hv3-drawer, .hv3-search-overlay { font-size: 16px; } /* ——— 1. FONTS —————————————————————————————————————————————— Josefin Sans = font-heading (titres, drawer, boutons) Raleway = font-body (liens nav, texte) ⚠️ Fix P0 cross-check : suppression de l'@import bloquant. Les fonts sont déjà chargées en async via + onload dans le du thème warehouse (head.tpl). Le @import dans ce CSS doublonnait la requête ET bloquait le rendu sur mobile lent (+300-600ms LCP). —————————————————————————————————————————————————————————— */ /* @import supprimé — fonts chargées via head.tpl preload */ /* ——— 2. TOKENS —————————————————————————————————————————————— Source : tailwind.config.ts du proto Next.js V3.2 —————————————————————————————————————————————————————————— */ :root { --hv3-ink: #1a1a1a; --hv3-ink-soft: #2a2a2a; --hv3-cream: #f8f6f2; --hv3-gold: #a17738; --hv3-gold-light: #d4b88a; --hv3-navy: #1d2a3a; --hv3-navy-dark: #142031; --hv3-muted-fg: #6b6b6b; --hv3-muted-border: #e8e4dc; --hv3-white: #ffffff; --hv3-font-heading: 'Josefin Sans', 'Helvetica Neue', sans-serif; --hv3-font-body: 'Raleway', system-ui, sans-serif; /* Transitions */ --hv3-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --hv3-duration: 300ms; /* Shadows */ --hv3-shadow-soft: 0 2px 12px rgba(20, 18, 14, 0.06); --hv3-shadow-card: 0 8px 32px rgba(20, 18, 14, 0.10); /* Container */ --hv3-container-px: 20px; /* mobile */ } @media (min-width: 768px) { :root { --hv3-container-px: 32px; } } @media (min-width: 1024px) { :root { --hv3-container-px: 40px; } } /* ——— 3. RESET CIBLÉ ——————————————————————————————————————— */ /* box-sizing et reset margin/padding : on les force en !important pour contrecarrer les resets Bootstrap qui s'appliquent via des sélecteurs comme * { box-sizing: content-box } ou body *, .container * reset plus spécifiques. */ #hv3-header *, #hv3-mobile-header *, .hv3-drawer *, .hv3-search-overlay *, .hv3-top-bar * { box-sizing: border-box !important; } #hv3-header ul, .hv3-drawer-nav, .hv3-drawer-footer { list-style: none; padding-left: 0; margin: 0; } /* ——— 4. CONTENEUR —————————————————————————————————————————— Max-width 1440px (breakpoint "2xl" du proto), centré. —————————————————————————————————————————————————————————— */ #hv3-header .hv3-container, #hv3-mobile-header .hv3-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--hv3-container-px); } /* Version standalone hors header (top-bar, search overlay) */ .hv3-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--hv3-container-px); } /* ——— 5. TOP BAR (announcement bar) ——————————————————————— */ .hv3-top-bar { background-color: var(--hv3-navy) !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 13.12px; text-align: center; padding-block: 8px !important; } /* ——— 6. HEADER DESKTOP (visible ≥ 1280px) ———————————————— */ /* BUG-A cycle 3 FIX: breakpoint remonté de 1024px → 1280px pour éviter overflow 229px à 1024-1279px */ #hv3-header { display: none; /* caché en mobile — le mobile-header prend la relève */ /* Reset explicite de toute marge/padding héritée du thème */ margin: 0 !important; padding: 0 !important; } @media (min-width: 1024px) { #hv3-header { display: block; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--hv3-muted-border); background-color: rgba(255, 255, 255, 0.90) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background-color var(--hv3-duration) var(--hv3-ease), box-shadow var(--hv3-duration) var(--hv3-ease); } /* État scrollé : fond plus opaque + ombre */ #hv3-header.is-scrolled { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--hv3-shadow-soft); } } /* ——— 7. NAV DESKTOP — layout 3 colonnes ————————————————— */ @media (min-width: 1024px) { #hv3-header .hv3-nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 24px !important; /* py-6 Tailwind */ padding-left: 20px !important; padding-right: 20px !important; min-height: 110px; position: relative; margin: 0 !important; } /* Cellules gauche et droite : flex:1 pour que le logo soit centré viewport */ #hv3-header .hv3-cell { display: flex; align-items: center; flex: 1; padding: 0 !important; margin: 0 !important; } #hv3-header .hv3-cell--left { justify-content: flex-end; /* colle le primary au logo */ } #hv3-header .hv3-cell--right { justify-content: flex-start; } } /* ——— 8. LIENS PRIMARY (Business / Mariage / Life style / Accessoires) ——— */ @media (min-width: 1024px) { #hv3-header .hv3-primary-list { display: flex; align-items: center; gap: 40px; /* gap-10 Tailwind = 40px */ list-style: none !important; margin: 0 !important; padding: 0 !important; } #hv3-header .hv3-primary-item { position: relative; padding: 0 !important; margin: 0 !important; list-style: none !important; } #hv3-header .hv3-primary-link { display: flex !important; align-items: center; gap: 6px; /* gap-1.5 */ font-family: var(--hv3-font-body); font-size: 15.2px; font-weight: 400; color: var(--hv3-ink) !important; text-decoration: none !important; white-space: nowrap; letter-spacing: 0.12em; /* tracking-wide */ padding-block: 16px !important; padding-inline: 0 !important; transition: color var(--hv3-duration) var(--hv3-ease); background-color: transparent !important; border: none; line-height: 1.65; /* matches V3 statique Tailwind Raleway default */ } #hv3-header .hv3-primary-link:hover, #hv3-header .hv3-primary-link:focus-visible { color: var(--hv3-gold) !important; outline: none; text-decoration: none !important; background-color: transparent !important; } #hv3-header .hv3-primary-link:focus-visible { outline: 2px solid var(--hv3-gold); outline-offset: 2px; border-radius: 2px; } #hv3-header .hv3-chevron { opacity: 0.5; margin-top: 1px; flex-shrink: 0; transition: transform var(--hv3-duration) var(--hv3-ease); } /* Rotation chevron quand dropdown ouvert (géré par JS via .is-open) */ #hv3-header .hv3-primary-item.is-open .hv3-chevron { transform: rotate(180deg); } } /* ——— 9. DROPDOWN SOUS-MENUS ————————————————————————————— */ @media (min-width: 1024px) { #hv3-header .hv3-dropdown { position: absolute; top: calc(100% + 0px); /* flush sous le lien parent */ left: 0; min-width: 260px; background-color: var(--hv3-white) !important; border: 1px solid var(--hv3-muted-border); border-radius: 4px; box-shadow: var(--hv3-shadow-card); padding: 12px !important; margin: 0 !important; z-index: 50; /* État fermé : invisible + légèrement remonté */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 200ms var(--hv3-ease), visibility 200ms var(--hv3-ease), transform 200ms var(--hv3-ease); } /* Ouverture via hover CSS (primary) + classe .is-open (JS fallback touch) */ #hv3-header .hv3-primary-item:hover .hv3-dropdown, #hv3-header .hv3-primary-item.is-open .hv3-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Délai 200ms à la sortie pour éviter le clignotement involontaire */ #hv3-header .hv3-primary-item .hv3-dropdown { transition-delay: 0ms; } #hv3-header .hv3-primary-item:not(:hover):not(.is-open) .hv3-dropdown { transition-delay: 200ms; /* petite tolérance avant fermeture */ } #hv3-header .hv3-dropdown-link { display: block !important; padding: 8px 16px !important; font-family: var(--hv3-font-body); font-size: 14px; color: var(--hv3-ink-soft) !important; text-decoration: none !important; white-space: nowrap; border-radius: 2px; transition: color var(--hv3-duration) var(--hv3-ease), background-color var(--hv3-duration) var(--hv3-ease); } #hv3-header .hv3-dropdown-link:hover, #hv3-header .hv3-dropdown-link:focus-visible { color: var(--hv3-gold) !important; background-color: var(--hv3-cream) !important; outline: none; text-decoration: none !important; } #hv3-header .hv3-dropdown-link:focus-visible { outline: 2px solid var(--hv3-gold); outline-offset: -2px; } } /* ——— 10. LOGO DESKTOP ————————————————————————————————————— */ .hv3-logo-link { display: none; /* caché en mobile (le mobile-header a son propre logo) */ } @media (min-width: 1024px) { #hv3-header .hv3-logo-link { display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none !important; pointer-events: auto; z-index: 10; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none; } #hv3-header .hv3-logo-img { height: 72px; width: auto; display: block; } } /* ——— 11. CELLULE DROITE — liens secondary ———————————————— */ @media (min-width: 1024px) { #hv3-header .hv3-secondary-list { display: flex; align-items: center; gap: 40px; /* gap-10 = 40px */ list-style: none !important; margin: 0 !important; padding: 0 !important; } #hv3-header .hv3-secondary-link { font-family: var(--hv3-font-body); font-size: 15.2px; font-weight: 400; color: var(--hv3-ink) !important; text-decoration: none !important; white-space: nowrap; letter-spacing: 0.12em; padding-block: 16px !important; padding-inline: 0 !important; transition: color var(--hv3-duration) var(--hv3-ease); background-color: transparent !important; display: inline-block; line-height: normal; } #hv3-header .hv3-secondary-link:hover, #hv3-header .hv3-secondary-link:focus-visible { color: var(--hv3-gold) !important; outline: none; text-decoration: none !important; background-color: transparent !important; } #hv3-header .hv3-secondary-link:focus-visible { outline: 2px solid var(--hv3-gold); outline-offset: 2px; border-radius: 2px; } } /* ——— 12. BLOC CTA (bouton + icônes) ———————————————————————— */ @media (min-width: 1024px) { #hv3-header .hv3-cta-block { display: flex; align-items: center; gap: 16px; /* gap-4 */ margin-left: 40px !important; /* décalage par rapport à la secondary-list */ padding: 0 !important; } } /* ——— 13. BOUTON RÉSERVER ————————————————————————————————— */ /* Propriétés avec !important : color, padding, background-color, text-decoration — confirmées cassées par DevTools (computed: color #777, padding 0, height 20px au lieu de 44px). Les autres propriétés (border-radius, font-size, etc.) n'ont pas besoin de !important car elles ne sont pas écrasées. */ #hv3-header .hv3-btn-rdv, .hv3-btn-rdv { display: inline-flex !important; align-items: center; justify-content: center; background-color: var(--hv3-navy) !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 13.12px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none !important; white-space: nowrap; border-radius: 4px; padding: 12px 24px !important; /* py-3 px-6 — confirmé cassé (computed 0px) */ min-height: 44px; /* touch target mobile */ border: none; cursor: pointer; line-height: 1.65; /* matches V3 statique Tailwind Raleway default */ transition: background-color var(--hv3-duration) var(--hv3-ease), color var(--hv3-duration) var(--hv3-ease); } #hv3-header .hv3-btn-rdv:hover, #hv3-header .hv3-btn-rdv:focus-visible, .hv3-btn-rdv:hover, .hv3-btn-rdv:focus-visible { background-color: var(--hv3-navy-dark) !important; color: var(--hv3-white) !important; text-decoration: none !important; outline: none; } #hv3-header .hv3-btn-rdv:focus-visible, .hv3-btn-rdv:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: 2px; } /* ——— 14. ICÔNES UTILITAIRES (Search / User / Cart) ————————— */ #hv3-header .hv3-icons-block { display: flex; align-items: center; gap: 8px; /* gap-2 */ padding-left: 20px !important; /* pl-5 */ padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 20px !important; border-left: 1px solid var(--hv3-muted-border); margin: 0 !important; } #hv3-header .hv3-icon-btn, #hv3-mobile-header .hv3-icon-btn, .hv3-icon-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; /* 40px — touch target ok ≥ 44px avec padding */ height: 40px; padding: 4px !important; color: var(--hv3-ink) !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 2px; cursor: pointer; text-decoration: none !important; transition: color var(--hv3-duration) var(--hv3-ease); /* Assure ≥ 44px de zone cliquable via pseudo-élément */ position: relative; } #hv3-header .hv3-icon-btn::before, #hv3-mobile-header .hv3-icon-btn::before, .hv3-icon-btn::before { content: ''; position: absolute; inset: -4px; } #hv3-header .hv3-icon-btn:hover, #hv3-header .hv3-icon-btn:focus-visible, #hv3-mobile-header .hv3-icon-btn:hover, #hv3-mobile-header .hv3-icon-btn:focus-visible, .hv3-icon-btn:hover, .hv3-icon-btn:focus-visible { color: var(--hv3-gold) !important; outline: none; background-color: transparent !important; text-decoration: none !important; } #hv3-header .hv3-icon-btn:focus-visible, #hv3-mobile-header .hv3-icon-btn:focus-visible, .hv3-icon-btn:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: 2px; } /* ——— 15. BADGE PANIER ————————————————————————————————————— */ #hv3-header .hv3-cart-btn, #hv3-mobile-header .hv3-cart-btn, .hv3-cart-btn { position: relative; } #hv3-header .hv3-cart-badge, #hv3-mobile-header .hv3-cart-badge, .hv3-cart-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding-inline: 3px !important; background-color: var(--hv3-gold) !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 9999px; pointer-events: none; } /* ——— 16. MOBILE HEADER (< 1024px) ——————————————————————— */ #hv3-mobile-header { position: sticky; top: 0; z-index: 40; background-color: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--hv3-muted-border); margin: 0 !important; padding: 0 !important; transition: background-color var(--hv3-duration) var(--hv3-ease), box-shadow var(--hv3-duration) var(--hv3-ease); } #hv3-mobile-header.is-scrolled { background-color: rgba(255, 255, 255, 0.97) !important; box-shadow: var(--hv3-shadow-soft); } /* Masqué sur desktop (BUG-A cycle 3: synchronisé avec breakpoint 1280px) */ @media (min-width: 1024px) { #hv3-mobile-header { display: none !important; } } #hv3-mobile-header .hv3-mobile-bar { display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 64px; padding-block: 12px !important; padding-inline: 0 !important; margin: 0 !important; } /* ——— 17. LOGO MOBILE ————————————————————————————————————— */ #hv3-mobile-header .hv3-mobile-logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex !important; align-items: center; justify-content: center; text-decoration: none !important; pointer-events: auto; z-index: 10; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none; } #hv3-mobile-header .hv3-mobile-logo-img { height: 44px; width: auto; display: block; } /* ——— 18. BURGER ——————————————————————————————————————————— */ #hv3-mobile-header .hv3-burger { /* Déjà géré par .hv3-icon-btn — ajustement taille */ width: 44px; height: 44px; flex-shrink: 0; } /* ——— 19. DROITE MOBILE — RDV compact + icônes ——————————— */ #hv3-mobile-header .hv3-mobile-right { display: flex; align-items: center; gap: 6px; /* gap-1.5 */ margin-left: auto !important; padding: 0 !important; } #hv3-mobile-header .hv3-btn-rdv-compact, .hv3-btn-rdv-compact { display: inline-flex !important; align-items: center; justify-content: center; background-color: var(--hv3-navy) !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 11.52px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none !important; white-space: nowrap; border-radius: 4px; height: 44px; /* h-11 — fix P0 WCAG 2.5.5 touch target (était 36px = h-9, sous le seuil) */ padding-top: 0 !important; padding-bottom: 0 !important; padding-inline: 12px !important; /* px-3 */ margin-right: 4px !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; border: none; cursor: pointer; line-height: 1.2; transition: background-color var(--hv3-duration) var(--hv3-ease); } #hv3-mobile-header .hv3-btn-rdv-compact:hover, #hv3-mobile-header .hv3-btn-rdv-compact:focus-visible, .hv3-btn-rdv-compact:hover, .hv3-btn-rdv-compact:focus-visible { background-color: var(--hv3-navy-dark) !important; color: var(--hv3-white) !important; text-decoration: none !important; outline: none; } #hv3-mobile-header .hv3-btn-rdv-compact:focus-visible, .hv3-btn-rdv-compact:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: 2px; } #hv3-mobile-header .hv3-mobile-icons { display: flex; align-items: center; gap: 2px; /* gap-0.5 */ padding-left: 6px !important; /* pl-1.5 */ padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 20px !important; border-left: 1px solid var(--hv3-muted-border); margin: 0 !important; } /* Icônes mobile légèrement plus petites : w-9 h-9 */ #hv3-mobile-header .hv3-mobile-right .hv3-icon-btn { width: 36px; height: 36px; } /* ——— BUG-B FIX — Cart + icon buttons mobile : forcer dimensions visibles ——— */ /* Corrige le rendu 0×0 causé par flex collapse dans .hv3-mobile-icons */ #hv3-mobile-header .hv3-cart-btn, #hv3-mobile-header .hv3-icon-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex-shrink: 0 !important; } /* Empêche le collapse des enfants dans le conteneur flex */ #hv3-mobile-header .hv3-mobile-icons { flex-shrink: 0 !important; } #hv3-mobile-header .hv3-mobile-icons > * { flex-shrink: 0 !important; } /* ——— 20. BACKDROP (overlay derrière le drawer) ——————————— */ .hv3-drawer-backdrop { display: none; position: fixed; inset: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity var(--hv3-duration) var(--hv3-ease); } .hv3-drawer-backdrop.is-visible { display: block; opacity: 1; } /* ——— 21. DRAWER MOBILE ———————————————————————————————————— Fond #1a1a1a (--hv3-ink), slide depuis la droite. —————————————————————————————————————————————————————————— */ .hv3-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(85vw, 400px); background-color: var(--hv3-ink) !important; display: flex; flex-direction: column; padding: 24px !important; overflow-y: auto; /* État fermé */ transform: translateX(100%); transition: transform 320ms var(--hv3-ease); visibility: hidden; } .hv3-drawer.is-open { transform: translateX(0); visibility: visible; } /* Sur desktop, le drawer ne doit jamais être visible (synchronisé 1280px) */ @media (min-width: 1024px) { .hv3-drawer { display: none !important; } } /* ——— 22. BOUTON FERMETURE DRAWER ——————————————————————————— */ .hv3-drawer .hv3-drawer-close { align-self: flex-end; display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--hv3-white) !important; background: transparent !important; border: none !important; border-radius: 2px; cursor: pointer; padding: 0 !important; margin: 0 !important; transition: color var(--hv3-duration) var(--hv3-ease); flex-shrink: 0; } .hv3-drawer .hv3-drawer-close:hover, .hv3-drawer .hv3-drawer-close:focus-visible { color: var(--hv3-gold-light) !important; background-color: transparent !important; outline: none; text-decoration: none !important; } .hv3-drawer .hv3-drawer-close:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: 2px; } /* ——— 23. LIENS DANS LE DRAWER ——————————————————————————— */ .hv3-drawer .hv3-drawer-nav { display: flex; flex-direction: column; gap: 0; margin-top: 32px !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; list-style: none !important; } .hv3-drawer .hv3-drawer-link { display: block !important; font-family: var(--hv3-font-heading); font-size: 24px; /* text-2xl */ font-weight: 400; color: var(--hv3-white) !important; text-decoration: none !important; padding-block: 12px !important; padding-inline: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10); margin: 0 !important; background-color: transparent !important; transition: color var(--hv3-duration) var(--hv3-ease); } .hv3-drawer .hv3-drawer-link:hover, .hv3-drawer .hv3-drawer-link:focus-visible { color: var(--hv3-gold-light) !important; background-color: transparent !important; text-decoration: none !important; outline: none; } .hv3-drawer .hv3-drawer-link:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: -2px; } /* ——— 24. FOOTER DU DRAWER ———————————————————————————————— */ .hv3-drawer .hv3-drawer-footer { margin-top: auto !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; display: flex; flex-direction: column; gap: 12px; padding-top: 24px !important; padding-bottom: 0 !important; padding-inline: 0 !important; list-style: none !important; } .hv3-drawer .hv3-drawer-btn-rdv { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; background-color: var(--hv3-gold) !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none !important; border-radius: 4px; padding: 14px 24px !important; margin: 0 !important; border: none; cursor: pointer; line-height: 1.2; transition: background-color var(--hv3-duration) var(--hv3-ease); } .hv3-drawer .hv3-drawer-btn-rdv:hover, .hv3-drawer .hv3-drawer-btn-rdv:focus-visible { background-color: var(--hv3-gold-light) !important; color: var(--hv3-ink) !important; text-decoration: none !important; outline: none; } .hv3-drawer .hv3-drawer-btn-rdv:focus-visible { outline: 2px solid var(--hv3-white) !important; outline-offset: 2px; } .hv3-drawer .hv3-drawer-btn-phone { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; background: transparent !important; background-color: transparent !important; color: var(--hv3-white) !important; font-family: var(--hv3-font-body); font-size: 14px; font-weight: 400; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 4px; padding: 14px 24px !important; margin: 0 !important; cursor: pointer; line-height: 1.2; transition: border-color var(--hv3-duration) var(--hv3-ease), color var(--hv3-duration) var(--hv3-ease); } .hv3-drawer .hv3-drawer-btn-phone:hover, .hv3-drawer .hv3-drawer-btn-phone:focus-visible { border-color: rgba(255, 255, 255, 0.60) !important; color: var(--hv3-white) !important; text-decoration: none !important; outline: none; } .hv3-drawer .hv3-drawer-btn-phone:focus-visible { outline: 2px solid var(--hv3-gold) !important; outline-offset: 2px; } /* ——— 25. SEARCH OVERLAY ———————————————————————————————————— Apparaît juste sous le header (top calé par JS dynamiquement). Fond blanc, border-bottom, ombre. —————————————————————————————————————————————————————————— */ .hv3-search-overlay { position: fixed; /* top est injecté dynamiquement par JS en fonction de la hauteur réelle du header */ top: 0; left: 0; right: 0; z-index: 100; background-color: var(--hv3-white) !important; border-bottom: 1px solid var(--hv3-muted-border); box-shadow: var(--hv3-shadow-card); /* Caché par défaut */ opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 250ms var(--hv3-ease), transform 250ms var(--hv3-ease); } .hv3-search-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .hv3-search-overlay .hv3-search-inner { display: flex; align-items: center; gap: 16px; padding-block: 24px !important; padding-inline: 0 !important; margin: 0 !important; } .hv3-search-overlay .hv3-search-icon-static { color: var(--hv3-muted-fg); flex-shrink: 0; } .hv3-search-overlay .hv3-search-form { flex: 1; margin: 0 !important; padding: 0 !important; } .hv3-search-overlay .hv3-search-input { width: 100%; font-family: var(--hv3-font-heading); font-size: 18px; color: var(--hv3-ink) !important; background: transparent !important; border: none !important; outline: none; padding: 0 !important; margin: 0 !important; /* Suppression du style natif search input sur webkit */ -webkit-appearance: none; } .hv3-search-overlay .hv3-search-input::placeholder { color: var(--hv3-muted-fg); } /* Suppression de la croix native Chrome/Safari dans input[type=search] */ .hv3-search-overlay .hv3-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* ——— 26. UTILITAIRE — sr-only (accessibilité) ——————————— */ .hv3-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === BUG-A cycle 3.1 FIX === */ /* Le wrapper Warehouse #mobile-header.mobile-header-style-1 a une règle Warehouse qui le masque à min-width: 992px. On force display:block pour la range 0-1279px pour que le mobile V3 reste visible avant que le desktop V3 prenne le relais à 1280px+ */ @media (max-width: 1023.98px) { #mobile-header, #mobile-header.mobile-header-style-1 { display: block !important; } } @media (min-width: 1024px) { #mobile-header, #mobile-header.mobile-header-style-1 { display: none !important; } } /* === BUG-NEW-1 fix cycle 4 — cart desktop 35→40px === */ #hv3-header .hv3-cart-btn, #hv3-header .hv3-icon-btn { min-width: 40px !important; min-height: 40px !important; } /* ——— SPRINT 1.9 CYCLE 5 — Fixes UX globaux (mobile + Bootstrap override) ——— Ajoutés le 2026-05-12 (session 4 cycle 5). Triple impact : 1. iOS Safari zoom involontaire sur focus input < 16px → force 16px minimum mobile 2. Bootstrap .btn-primary cyan (#2fb5d2) sur Product/Cart/Login → override navy CPP 3. .btn-primary hover/focus cohérent (gold accent) Note : double vérification 2 sub-agents (règle mémoire projet) avant push prod. —————————————————————————————————————————————————————————— */ /* 1.9b — iOS zoom fix global (mobile uniquement) */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="url"], select, textarea, .form-control, .form-select, .form-control-custom { font-size: 16px !important; } } /* 1.9a — Bootstrap .btn-primary cyan #2fb5d2 → navy CPP #1d2a3a */ .btn-primary, .btn-primary:visited, button.btn-primary, a.btn-primary, input[type="submit"].btn-primary, input[type="button"].btn-primary { background-color: #1d2a3a !important; border-color: #1d2a3a !important; color: #ffffff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:focus-visible, button.btn-primary:hover, button.btn-primary:focus, a.btn-primary:hover, a.btn-primary:focus { background-color: #0f1924 !important; border-color: #a17738 !important; color: #ffffff !important; outline: 2px solid #a17738 !important; outline-offset: 2px !important; } .btn-primary:disabled, .btn-primary.disabled { background-color: #6c757d !important; border-color: #6c757d !important; opacity: 0.65 !important; } /* 1.9b/c — Focus visible global (WCAG 2.4.7) — backup pour pages sans tokens v3 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #a17738 !important; outline-offset: 2px !important; } /* 1.9a-bis — Override .appointment-submit-btn (form RDV) — couleur Bootstrap-dark #2c3e50 → navy CPP */ .appointment-submit-btn, button.appointment-submit-btn, input[type="submit"].appointment-submit-btn { background-color: #1d2a3a !important; border-color: #1d2a3a !important; } .appointment-submit-btn:hover, .appointment-submit-btn:focus, .appointment-submit-btn:active, .appointment-submit-btn:focus-visible { background-color: #0f1924 !important; border-color: #a17738 !important; box-shadow: 0 4px 15px rgba(29, 42, 58, 0.35) !important; outline: 2px solid #a17738 !important; outline-offset: 2px !important; } /* 1.9a-ter — Override .btn-outline-primary Bootstrap cyan → navy CPP */ .btn-outline-primary, a.btn-outline-primary, button.btn-outline-primary { color: #1d2a3a !important; border-color: #1d2a3a !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:focus-visible { color: #ffffff !important; background-color: #1d2a3a !important; border-color: #a17738 !important; outline: 2px solid #a17738 !important; outline-offset: 2px !important; } /* ——— SPRINT 4 CYCLE 5 (2026-05-12) — iPad landscape compact ——— Breakpoint nav desktop descendu de 1280 → 1024 (les @media ci-dessus). Cette section compacte les éléments pour 1024-1279 afin d'éviter overflow. À partir de 1280px, les valeurs originales reprennent (gaps 40px, etc.). —————————————————————————————————————————————————————————— */ @media (min-width: 1024px) and (max-width: 1279.98px) { #hv3-header .hv3-container { padding-inline: 24px !important; } #hv3-header .hv3-nav { gap: 16px !important; } #hv3-header .hv3-primary-list, #hv3-header .hv3-secondary-list { gap: 22px !important; } #hv3-header .hv3-primary-link, #hv3-header .hv3-secondary-link { font-size: 13px !important; letter-spacing: 0 !important; } #hv3-header .hv3-logo-img { max-height: 56px !important; } #hv3-header .hv3-btn-rdv { padding: 10px 16px !important; font-size: 13px !important; letter-spacing: 0.02em !important; } #hv3-header .hv3-icons-block { padding-left: 12px !important; gap: 4px !important; } #hv3-header .hv3-icon-btn { width: 36px !important; height: 36px !important; } } /* ——— SPRINT 4 CYCLE 5 FIX LOGO ISO HOME (12/05) ——— Le SVG logocostumeprive.svg a viewBox 0 0 2005 1298 mais le rendering home V3 le contraint à 97×72 (aspect squashed). Le PS le rendait à 111×72 (aspect natural preserved). Différence visuelle perceptible par user. Fix : forcer width 97px sur le logo PS pour matcher home V3 exact. */ #hv3-header .hv3-logo-img, #hv3-header img[src*="logocostumeprive"], #hv3-mobile-header img[src*="logocostumeprive"] { width: 97px !important; height: 72px !important; object-fit: fill !important; } /* ——— SPRINT 4.3d CYCLE 5 (12/05) — FIX CENTERING NAV ——— .hv3-nav avait `margin: 0 !important` qui écrasait `margin-inline: auto` de .hv3-container. Conséquence : sur viewport > 1440px, la nav restait collée à gauche au lieu d'être centrée. User à 1720px voyait Business à X=20 alors que home le centrait (X=155). Fix chirurgical : override margin-inline auto pour la nav PS desktop. */ @media (min-width: 1024px) { #hv3-header .hv3-nav { margin-inline: auto !important; margin-left: auto !important; margin-right: auto !important; } }