/** * Header Responsive Styles * * Styles responsive pour le header sur tablette et mobile. * Burger menu + drawer system. * * @package UneAutreVoix * @author Horizon Signature * @copyright 2026 Horizon Signature * @license Proprietary * @version 0.1.0 * * @changelog * 0.1.0 — Passage en preprod * 0.0.61 - Nuage Transmission mobile : suppression tap highlight bleu au clic * - -webkit-tap-highlight-color: transparent + outline: none sur .header-logo-nuage-link * 0.0.60 - Drawer Transmission : z-index 1001 → 999 quand ouvert (passe derrière le nuage) * - padding-top: 120px sur .header-drawer-content pour dégager le nuage * - body:has(.header-logo-transmission) cible uniquement les pages Transmission * 0.0.59 - Trait Transmission mobile : border-bottom → ::after height:0 + border-bottom + z-index:2 * - Même correctif que desktop : nuage SVG (~130px) couvrait le border-bottom du conteneur (50px) * 0.0.58 - Trait Transmission mobile : ::after background-color → border-bottom sur .header-logo-transmission * 0.0.57 - Compensation débordement nuage Transmission : padding-top 130px sur main * - body:has(.header-logo-transmission) main (ciblage sans classe body supplémentaire) * 0.0.56 - Logo Transmission mobile : nuage + lettres à la place du logo classique * - .header-logo-nuage-link : position relative (flow normal, pas absolu comme desktop) * - .custom-logo-link : display none (nuage le remplace visuellement) * - Nuage 100px large (~36px haut), lettres 6px/10px(t)/8px(i) * - pointer-events: visibleFill sur les paths du SVG (tap sur forme uniquement) * 0.0.55 - Cart badge drawer : repositionnement sur .drawer-cart-icon-wrap * - .drawer-cart-icon-wrap { position: relative } comme référence de positionnement * - Badge ancré sur le coin supérieur-droit de l'icône (top -0.45em, right -1em) * - Taille badge augmentée (1.5em × 1.5em, font 0.65em) pour lisibilité * - Gap .drawer-menu-cart : --spacing-sm → --spacing-md * - position: relative retiré de .drawer-menu-cart (inutile) * 0.0.54 - Header mobile : padding horizontal --spacing-lg → --spacing-md (alignement sections) * 0.0.53 - Phase 1 refacto : valeurs hardcodées → variables CSS * - transition color/fill 0.15s ease-out → var(--transition-fast) var(--ease-standard) * - transition transform 0.4s → var(--transition-smooth) var(--ease-standard) * - transition transform 0.3s cubic-bezier ease-smooth → var(--transition-normal) var(--ease-smooth) * - transition opacity 0.3s cubic-bezier + visibility → var(--transition-normal) var(--ease-smooth) * 0.0.49 - BREAKING CHANGE : Suppression breakpoint tablette (768-1200px) * - Fusion tablette + mobile → 1 seul breakpoint ≤1200px * - Header height : 50px pour tous (au lieu de 60px tablette) * - Logo : 20px pour tous (au lieu de 24px tablette) * - Burger : 32px/20px pour tous (au lieu de 40px/24px tablette) * - Drawer : 320px max pour tous * - Utilisation valeurs mobiles compactes (spacing, text-size) * - Simplification maintenance : ~336 lignes CSS supprimées * 0.0.48 - Fix clipping lettres Transmission durant animation (solution correcte) * - Ajout overflow: visible sur .drawer-menu-transmission et le lien * - Le transform dans l'animation créait un layer clippé par overflow: hidden parent * - Clipping brutal au début/fin d'animation résolu * 0.0.47 - Fix clipping lettres Transmission durant animation bounce * - Ajout padding-right: 0.25em sur .bounce-active uniquement * - Les lettres italiques ne sont plus clippées pendant le scale(1.35) * - L'espacement normal est préservé hors animation * 0.0.46 - Ajustement espacement sous-menu (version finale) * - Espaces ajustés à var(--spacing-lg) après tests * - md était encore trop petit, lg offre le bon équilibre * - Retour, sous-menu, articles : var(--spacing-lg) * 0.0.45 - Ajustement espacement sous-menu (entre-deux) * - Espaces ajustés : xl/lg → md (au lieu de sm, trop petit) * - Retour, sous-menu, articles : var(--spacing-md) * - Équilibre visuel entre l'ancien (trop grand) et sm (trop petit) * 0.0.44 - Amélioration espacement et cohérence sous-menu mobile + tablette * - Réduction espaces : Retour (xl/lg→sm), sous-menu (xl/lg→sm), articles (xl/lg→sm) * - Titres sections alignés sur style menu principal (CTA family, size, weight, transform) * - Suppression padding-bottom inutile sur .drawer-submenu-back * - Modifications appliquées aux deux breakpoints (tablette ET mobile) * 0.0.43 - Fix lettres italiques coupées sur Transmission mobile WebKit * - Suppression de will-change et backface-visibility sur les lettres animées * - Ces propriétés créent des layers de composition clippés sur iOS Safari * - Overflow drawer restauré à hidden (nécessaire pour animation panels) * 0.0.42 - Fix lettres italiques coupées sur Transmission (v3 - solution propre) * - Changement overflow: hidden → overflow-x: hidden + overflow-y: auto sur .header-drawer * - Les lettres italiques ne sont plus clippées, espacement préservé * - Suppression du padding-right sur les lettres (non nécessaire) * 0.0.41 - Fix lettres italiques coupées sur Transmission (v2) * - padding-right: 0.2em au lieu de margin-right pour préserver l'espacement visuel * - Le padding crée de l'espace interne où l'italique peut déborder sans être clippé * 0.0.40 - Fix lettres italiques coupées sur Transmission * - Ajout padding-right: var(--spacing-xs) pour éviter que l'italique soit coupé * - Le overflow: hidden du drawer coupait les lettres penchées * 0.0.39 - Fix text-transform Transmission : sélecteur plus spécifique avec !important * - .header-drawer-nav a.drawer-menu-transmission : text-transform: none !important * - Force l'override du uppercase hérité du menu principal * - Transmission s'affiche maintenant comme desktop (première lettre majuscule, reste minuscule) * 0.0.38 - Ajustements finaux menu mobile * - Menu secondaire : x0.9 → x1 (même taille que principal) * - Transmission : ajout text-transform: none et font-style: italic (comme desktop) * - Espacement Transmission augmenté : --spacing-xs/sm → --spacing-sm/md * 0.0.37 - Ajustement tailles menu mobile avec multiplicateurs * - Menu principal : calc(var(--text-size-cta) * 1.25) * - Menu secondaire : calc(var(--text-size-cta) * 0.9) * - Tablette : 17.5px principal / 12.6px secondaire * - Mobile : 16.25px principal / 11.7px secondaire * 0.0.36 - Alignement menu mobile sur variables desktop * - Menu drawer utilise maintenant var(--font-cta-*) comme desktop * - Font-family, font-size, font-weight, text-transform identiques * - Cohérence parfaite desktop/mobile pour le menu principal * 0.0.35 - Migration complète vers variables d'espacement sémantiques * - Tous les espacements (padding, margin, gap) utilisent var(--spacing-*) * - Tablette/Mobile : standardisation selon puissances de 2 * - Header padding : 40px → var(--spacing-lg) (32px tablette, 16px mobile) * - Amélioration cohérence visuelle et maintenabilité * 0.0.34 - Ajout padding-top sur main pour header fixe * - Tablette : padding-top 60px (hauteur header) * - Mobile : padding-top 50px (hauteur header) * - Empêche le contenu de passer sous le header fixe * 0.0.33 - Migration vers variables CSS pour tailles de texte responsive * - Création variables :root dans chaque @media (tablette + mobile) * - --responsive-font-menu-primary : 26px (tablette) / 22px (mobile) * - --responsive-font-menu-secondary : 22px (tablette) / 18px (mobile) * - --responsive-font-standard : 16px (tablette + mobile) * - --responsive-font-small : 14px (tablette + mobile) * - --responsive-font-extra-small : 12px (tablette + mobile) * - Remplacement toutes valeurs en dur par variables * - Facilite ajustements globaux des tailles de texte * 0.0.32 - Suppression séparateurs dans le sous-menu * - .drawer-submenu-back : suppression border-bottom * - .header-drawer-articles : suppression border-top * - Les titres suffisent à séparer visuellement les sections * 0.0.31 - Uniformisation couleurs bordures et séparateurs * - Tous les séparateurs et bordures : color-mix(in srgb, var(--color-text) 20%, transparent) * - Remplace rgba(50, 50, 50, 0.2) par --color-text avec opacité 20% * - Cohérence visuelle avec la couleur du texte * 0.0.30 - Ajout espacement sous le conteneur sous-menu * - .drawer-submenu-list : margin-bottom 30px (tablette), 25px (mobile) * - Espacement symétrique entre le conteneur et le séparateur, * et entre le séparateur et le titre qui suit * 0.0.29 - Correction bordure sous-menu : conteneur au lieu de chaque lien * - .drawer-submenu-list : border-left: 1px solid var(--color-text) * - .drawer-submenu-list : padding-left: 16px * - Bordure unique à gauche de tous les liens (au lieu d'une par lien) * - Épaisseur réduite : 2px → 1px * 0.0.28 - Ajout bordure et padding pour hiérarchie visuelle sous-menu * - .drawer-submenu-list a : border-left: 2px solid var(--color-text) * - Padding-left : 16px (tablette et mobile) * - Indique clairement que ce sont des sous-éléments de menu * 0.0.27 - Correction finale .drawer-section-title mobile * - .header-drawer-articles .drawer-section-title : font-size 18px → 22px * - Les titres "La maison d'édition" et "Nos derniers points de vue" ont maintenant * exactement les mêmes styles que le menu principal (26px tablette, 22px mobile) * - Correction suite à confusion entre styles menu principal / menu secondaire * 0.0.26 - Correction styles .drawer-section-title * - Font-weight : 600 → var(--font-h3-weight) * - Suppression text-transform: uppercase * - Tablette : font-size 14px → 26px (aligné menu principal) * - Mobile : font-size 12px → 22px (aligné menu principal) * - Police et graisse identiques au menu principal * 0.0.25 - Remplacement sélecteurs h3 par .drawer-section-title * - .header-drawer-submenu h3 → .header-drawer-submenu .drawer-section-title * - .header-drawer-articles h3 → .header-drawer-articles .drawer-section-title * - Cohérence avec suppression balises hn du header * 0.0.24 - Uniformisation police des titres H3 du sous-menu * - .header-drawer-submenu h3 : var(--font-body) → var(--font-h3-family) * - .header-drawer-articles h3 : var(--font-body) → var(--font-h3-family) * - Cohérence avec la police du menu principal * 0.0.23 - Uniformisation style sous-menu avec menu secondaire * - Font-family : var(--font-body) → var(--font-h3-family) * - Font-weight : 400 → var(--font-h3-weight) * - Tablette : font-size 16px → 22px * - Mobile : font-size 14px → 18px * - Cohérence visuelle entre tous les niveaux de menu * 0.0.22 - Augmentation taille menu principal (+2px) * - Tablette : 24px → 26px * - Mobile : 20px → 22px * - Menu secondaire inchangé (22px tablette, 18px mobile) * 0.0.21 - Fix spécificité sélecteur menu secondaire * - .drawer-menu-secondary → .header-drawer-nav a.drawer-menu-secondary * - Font-size correctement appliqué (22px tablette, 18px mobile) * 0.0.20 - Ajout classe .drawer-menu-secondary pour menu secondaire * - Tablette : font-size 22px (0.9 × 24px) * - Mobile : font-size 18px (0.9 × 20px) * - Hiérarchie visuelle entre menu principal et secondaire * 0.0.19 - Suppression effets hover et tap highlight (tablette + mobile) * - Suppression opacity: 0.7 au hover sur tous les liens/boutons * - Ajout -webkit-tap-highlight-color: transparent (pas de colorisation au clic) * - Navigation plus propre et cohérente * 0.0.18 - Optimisation : suppression classe .header-drawer-secondary * - "Mon panier" utilise maintenant .header-drawer-nav * - Élimination de ~50 lignes de code CSS dupliqué * - Meilleure maintenabilité et fichier CSS plus léger * 0.0.17 - Uniformisation style menu secondaire avec menu principal * - Tablette : font-size 18px → 24px, padding 8px → 10px * - Mobile : font-size 16px → 20px, padding 6px → 8px * - Même apparence visuelle entre menus principal et secondaire * 0.0.16 - Correction gap et taille icône Transmission * - Gap : 1vh → 8px (tablette et mobile, valeur fixe) * - Icône : 0.75em → 0.6em (plus petite et proportionnée) * 0.0.15 - Ralentissement animation Transmission (tablette + mobile) * - Durée animation : 0.4s → 0.6s * - Animation plus fluide et visible * 0.0.14 - Amélioration style Transmission et menu secondaire * - Transmission : gap 1vh (tablette) / 8px (mobile) pour espacement visible * - Transmission : icône height 0.75em comme desktop * - Transmission : animation bounce intégrée (classes + keyframes) * - Menu secondaire : font-family var(--font-h3-family) au lieu de body * - Menu secondaire : font-weight var(--font-h3-weight) * - JavaScript header-transmission-mobile.js pour animation auto toutes les 5s * 0.0.13 - Ajout séparateur + "Mon panier" + style spécial Transmission * - Séparateur visuel après menu principal * - "Mon panier" dans menu secondaire sous le séparateur * - "Transmission" avec icône et style spécial (comme desktop) * 0.0.12 - Navigation drawer à deux niveaux avec animation slide * - Panel menu principal avec chevron vers droite sur "La maison d'édition" * - Panel sous-menu avec bouton retour en haut * - Animation slide left/right entre les panels * - Gestion JavaScript des transitions * 0.0.11 - Restructuration menu drawer : menu principal + sous-menu * - Menu principal : 4 liens de premier niveau (La maison d'édition, Les livres, Contact, Transmission) * - Sous-menu : menu ID 26 affiché en dessous avec style différent * - Séparation visuelle entre menu principal et sous-menu * 0.0.10 - Ajustement padding drawer * - .header-drawer-content : padding-bottom 60px (au lieu de 80px) * - .header-drawer-cta : padding-bottom 30px (nouveau) * - Total 90px sous le CTA pour éviter contenu coupé * 0.0.9 - Fix scroll chaining drawer → page * - Ajout overscroll-behavior: contain sur .header-drawer * - Empêche le scroll de déborder du drawer vers la page * 0.0.8 - Augmentation padding-bottom drawer * - .header-drawer-content : padding: 30px 20px 60px 20px * - Plus d'espace en bas du drawer (60px au lieu de 30px) * 0.0.7 - Fix centrage vertical logo et burger * - Logo : height: auto au lieu de height: 100% * - Fix line-height du lien logo : line-height: 0 * - Lien logo en display: flex pour centrage parfait * - Image logo en display: block * - Logo et burger correctement centrés verticalement * 0.0.6 - Fix alignement header tablette/mobile avec sections * - gap: 0 sur tablette et mobile (inutile avec justify-content: space-between) * - Tablette : padding: 0 40px (identique sections, var(--section-padding-h)) * - Mobile : padding: 0 20px (identique sections, var(--section-padding-h)) * - Logo aligné avec le contenu des sections * 0.0.5 - Fix alignement logo mobile à gauche * - Ajout flex: 1 sur .header-logo (comme tablette) * - Permet au logo de prendre l'espace et s'aligner à gauche * 0.0.4 - Drawer mobile : ajout max-width 320px * - Largeur max = largeur tablette (320px) * - Si écran < 320px : prend 100% de la largeur * - Si écran ≥ 320px : limité à 320px (comme tablette) * 0.0.3 - Inversion layout header mobile : logo gauche, burger droite * - Grid : logo (1fr) | burger (60px) * - Drawer slide from right au lieu de left * 0.0.2 - Fix : cacher éléments mobile sur desktop * - Burger, drawer, overlay cachés sur desktop (≥1201px) * - Header desktop conserve sa structure originale * 0.0.1 - Version initiale du header responsive * - Tablette : burger menu + drawer + logo centré * - Mobile : identique tablette mais plus compact * - Drawer slide from left avec overlay */ /* ============================================================================ Desktop (≥1201px) - Cacher éléments mobile ========================================================================== */ @media (min-width: 1201px) { /* Cacher burger menu sur desktop */ .header-burger { display: none !important; } /* Cacher drawer sur desktop */ .header-drawer { display: none !important; } /* Cacher overlay drawer sur desktop */ .header-drawer-overlay { display: none !important; } /* Cacher actions (placeholder panier/compte) sur desktop */ .header-actions { display: none !important; } /* S'assurer que le header desktop n'est PAS fixe */ .site-header { position: relative !important; } } /* ============================================================================ Animation Transmission - Commun Tablette + Mobile ========================================================================== */ @media (max-width: 1200px) { /* Animation Transmission */ .drawer-menu-transmission .transmission-anim-element, .drawer-menu-transmission .char-anim { display: inline-block; padding-right: 0.15em; margin-right: -0.15em; transition: color var(--transition-fast) var(--ease-standard), transform var(--transition-smooth) var(--ease-standard); transform-origin: center bottom; } .drawer-menu-transmission svg, .drawer-menu-transmission svg path { transition: fill var(--transition-fast) var(--ease-standard); } @keyframes bounceElement { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .bounce-active { animation: bounceElement 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } } /* ============================================================================ Header Mobile et Tablette fusionnés (≤1200px) ========================================================================== */ @media (max-width: 1200px) { /* --- HEADER PRINCIPAL --- */ .site-header { height: 50px; padding: 0 var(--spacing-md); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; background-color: var(--color-background); border-bottom: 1px solid var(--color-text); } /* Décalage du contenu principal pour header fixe */ main { padding-top: 50px; } /* Compensation débordement nuage Transmission */ body:has(.header-logo-transmission) main { padding-top: 130px; } /* Cacher les conteneurs desktop */ .header-menu-left, .header-menu-right, .header-icons-left, .header-icons-right { display: none !important; } /* --- LOGO À GAUCHE --- */ .header-logo { width: auto; height: auto; display: flex; align-items: center; justify-content: flex-start; order: 1; flex: 1; } .header-logo a { display: flex; align-items: center; line-height: 0; } .header-logo .custom-logo { height: 20px; width: auto; display: block; } /* --- LOGO TRANSMISSION MOBILE --- */ /* Conteneur : hauteur pleine du header = référence pour top: 0 du nuage + trait */ .header-logo-transmission { position: relative; height: 50px; display: inline-flex; align-items: center; } /* Trait horizontal : même approche que desktop (::after height:0 + border-bottom + z-index:2) Le nuage SVG (~130px) recouvre le border-bottom du conteneur (50px) avec son fill blanc */ .header-logo-transmission::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 0; border-bottom: 1px solid var(--color-text); z-index: 2; pointer-events: none; } /* Logo classique : position normale, z-index au-dessus du nuage */ .header-logo-transmission .custom-logo-link { position: relative; z-index: 1; } /* Nuage : absolu, coin supérieur gauche du conteneur (= haut de l'écran), centré horizontalement sur le logo, peut déborder à gauche */ .header-logo-transmission .header-logo-nuage-link { position: absolute; top: 0; left: 50%; transform: translateX(-50%); line-height: 0; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; outline: none; } /* Nuage : 360px large, ~130px haut */ .header-logo-nuage { width: 360px; height: auto; display: block; pointer-events: none; } /* Zone cliquable = forme du nuage uniquement */ .header-logo-nuage a path { pointer-events: visibleFill; cursor: pointer; } /* Lettres : positionnées sur le nuage */ .header-logo-nuage-letters { position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; } /* Lettres : taille proportionnelle au nuage (~11% de 130px) */ .header-logo-nuage-letters .lt { height: 14px; width: auto; display: block; pointer-events: none; transform-origin: center bottom; transition: color var(--transition-fast) var(--ease-standard); } /* Ajustements taille par lettre */ .header-logo-nuage-letters .lt:nth-child(1) { height: 22px; } /* t */ .header-logo-nuage-letters .lt:nth-child(7), .header-logo-nuage-letters .lt:nth-child(10) { height: 18px; } /* i */ /* Couleur initiale des lettres (avant animation JS) */ .header-logo-nuage-letters .lt-rose, .header-logo-nuage-letters .lt-orange, .header-logo-nuage-letters .lt-bleu, .header-logo-nuage-letters .lt-vert { color: var(--color-text); } /* --- BURGER BUTTON À DROITE --- */ .header-burger { width: 32px; height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; order: 2; } .header-burger span { display: block; width: 20px; height: 2px; background-color: var(--color-text); transition: transform var(--transition-normal) var(--ease-standard), opacity var(--transition-normal) var(--ease-standard); } /* Animation burger actif */ .header-burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .header-burger.is-active span:nth-child(2) { opacity: 0; } .header-burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- DRAWER MOBILE (FROM RIGHT) --- */ .header-drawer { position: fixed; top: 50px; right: 0; width: 100%; max-width: 320px; height: calc(100vh - 50px); background-color: var(--color-background); border-left: 1px solid var(--color-text); transform: translateX(100%); transition: transform var(--transition-normal) var(--ease-smooth); z-index: 999; overflow: hidden; } .header-drawer.is-open { transform: translateX(0); z-index: 1001; /* passe au-dessus du header et du nuage Transmission */ } /* Conteneur des panels avec animation slide */ .header-drawer-panels { display: flex; width: 200%; height: 100%; transition: transform var(--transition-normal) var(--ease-smooth); } .header-drawer-panels.show-submenu { transform: translateX(-50%); } /* Panels individuels */ .header-drawer-panel { width: 50%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex-shrink: 0; } .header-drawer-content { padding: var(--spacing-md) var(--spacing-sm) var(--spacing-lg) var(--spacing-sm); } /* Menu navigation dans drawer */ .header-drawer-nav { margin-bottom: var(--spacing-xl); } .header-drawer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .header-drawer-nav a, .header-drawer-nav button { font-family: var(--font-cta-family); font-size: calc(var(--text-size-cta) * 1.25); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text); text-decoration: none; display: block; padding: var(--spacing-sm) 0; background: none; border: none; cursor: pointer; width: 100%; text-align: left; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } /* Item avec sous-menu */ .drawer-menu-has-submenu { display: flex; justify-content: space-between; align-items: center; } .drawer-menu-has-submenu .drawer-chevron { flex-shrink: 0; margin-left: var(--spacing-sm); } /* Menu secondaire - Même taille que principal */ .header-drawer-nav a.drawer-menu-secondary { font-size: calc(var(--text-size-cta) * 1); } /* Lien panier : icône alignée à droite du texte */ .drawer-menu-cart { display: flex; align-items: center; gap: var(--spacing-md); } /* Wrapper icône : référence de positionnement pour la pastille */ .drawer-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; } .drawer-cart-icon { height: 1em; width: auto; display: block; } /* Badge pastille panier (mobile) — positionné sur le wrapper icône */ .drawer-cart-icon-wrap .cart-badge { top: -0.45em; right: -1em; min-width: 1.5em; height: 1.5em; font-size: 0.65em; padding: 0; } /* Style spécial Transmission */ .drawer-menu-transmission { display: flex; align-items: center; gap: var(--spacing-xs); } .header-drawer-nav a.drawer-menu-transmission { text-transform: none !important; font-style: italic; padding-right: var(--spacing-xs); } .drawer-menu-transmission .transmission-icon { flex-shrink: 0; height: 0.6em; width: auto; } .header-drawer-nav a.drawer-menu-home { text-transform: none !important; font-style: italic; } /* Séparateur */ .header-drawer-separator { margin: var(--spacing-md) 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); } /* Bouton retour */ .drawer-submenu-back { margin-bottom: var(--spacing-md); padding-bottom: 0; } .drawer-back-button { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-body); font-size: var(--text-size-s); font-weight: 600; color: var(--color-text); background: none; border: none; cursor: pointer; padding: var(--spacing-sm) 0; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .drawer-back-button svg { flex-shrink: 0; } /* Sous-menu "La maison d'édition" */ .header-drawer-submenu .drawer-section-title { font-family: var(--font-cta-family); font-size: calc(var(--text-size-cta) * 1.25); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text); margin-bottom: var(--spacing-sm); } .header-drawer-submenu .drawer-submenu-list { list-style: none; margin: 0 0 var(--spacing-md) 0; padding: 0 0 0 var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); border-left: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); } .header-drawer-submenu .drawer-submenu-list a { font-family: var(--font-h3-family); font-size: var(--responsive-font-menu-secondary); font-weight: var(--font-h3-weight); color: var(--color-text); text-decoration: none; display: block; padding: var(--spacing-sm) 0; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } /* Articles dans drawer */ .header-drawer-articles { padding-top: var(--spacing-lg); } .header-drawer-articles .drawer-section-title { font-family: var(--font-cta-family); font-size: calc(var(--text-size-cta) * 1.25); font-weight: var(--font-cta-weight); text-transform: var(--font-cta-text-transform); color: var(--color-text); margin-bottom: var(--spacing-sm); } .header-drawer-articles-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } /* CTA dans drawer */ .header-drawer-cta { display: flex; justify-content: flex-start; padding-bottom: var(--spacing-xl); } .header-drawer-cta .section-cta { width: 100%; text-align: center; } /* --- OVERLAY DRAWER --- */ .header-drawer-overlay { position: fixed; top: 50px; left: 0; width: 100vw; height: calc(100vh - 50px); background-color: rgba(50, 50, 50, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity var(--transition-normal) var(--ease-smooth), visibility var(--transition-normal); z-index: 998; } .header-drawer-overlay.is-visible { opacity: 1; visibility: visible; } /* --- MEGA MENU DESKTOP CACHÉ --- */ .megamenu, .megamenu-overlay { display: none !important; } /* --- DRAWER TRANSMISSION : passe derrière le nuage --- */ /* Le nuage est enfant de .site-header (z-index: 1000). En ramenant le drawer ouvert à z-index: 999, il passe sous le header et donc sous le nuage qui déborde visuellement en dessous. */ body:has(.header-logo-transmission) .header-drawer.is-open { z-index: 999; } /* Dégager la zone du nuage (~130px) dans le contenu du drawer */ body:has(.header-logo-transmission) .header-drawer-content { padding-top: 100px; } }