/**
* Header Styles - Desktop uniquement
*
* Styles pour le header du thème Une Autre Voix.
* Desktop uniquement (≥1201px) - Toutes les dimensions en vh/vw.
*
* @package UneAutreVoix
* @author Horizon Signature
* @copyright 2026 Horizon Signature
* @license Proprietary
* @version 0.1.0
*
* @changelog
* 0.1.0 — Passage en preprod
* 0.0.41 - Trait Transmission desktop : border-bottom → ::after height:0 + border-bottom + z-index:2
* - Correctif : le nuage SVG (fill blanc, overflow header) couvrait le border-bottom du parent
* - height:0 + border-bottom = rendu natif identique au site-header (pas de rounding vh)
* - z-index:2 = au-dessus du nuage (0) et du logo (1)
* - bottom: calc(-0.15vh / 2) = alignement précis sur le border-bottom du site-header
* 0.0.40 - Suppression outline focus sur le SVG nuage Transmission (tabindex="-1", non keyboard)
* 0.0.39 - Trait Transmission desktop : ::after background-color → border-bottom sur le conteneur
* 0.0.38 - Trait sous logo : .header-logo::after → .header-logo:has(.header-logo-transmission)::after
* - Le trait n'apparaît plus sur le header classique, uniquement Transmission
* 0.0.37 - .header-logo::after : pointer-events: none (trait décoratif non-interactif)
* 0.0.36 - Nuage cliquable : zone limitée à la forme du nuage (SVG interne)
* - Ajout cursor: pointer + pointer-events: visibleFill sur les paths du
* - pointer-events: none conservé sur le SVG (zone rectangulaire non-interactive)
* - .header-logo-nuage-letters .lt : pointer-events: visibleFill → none
* Les lettres laissent passer les clics vers le nuage en dessous
* 0.0.35 - Cart badge : styles de base (.cart-badge, .cart-badge--hidden) sortis
* - de la media query desktop → disponibles sur tous les breakpoints
* - Overrides desktop (tailles vh) conservés dans @media (min-width: 1201px)
* 0.0.34 - Phase 1 refacto : valeurs hardcodées → variables CSS
* - height 0.25vh (ligne hover) → var(--border-normal)
* - rgba(50, 50, 50, 0.1) overlay → color-mix(in srgb, var(--color-text) 10%, transparent)
* 0.0.31 - Correction animation liens mega menu : identique aux CTAs
* - Ligne visible par défaut (scaleX 1), disparaît vers droite au hover (scaleX 0)
* - Réutilisation de cta-animations.js via sélecteur .megamenu-nav-list a
* 0.0.30 - Augmentation flou overlay mega-menu (5px → 8px)
* - Harmonisation avec overlay mobile (8px)
* - Effet de flou plus prononcé pour meilleure séparation visuelle
* 0.0.29 - Migration systèmes transitions et border-width unifiés
* - Transitions : durées et easing remplacés par variables sémantiques
* - Border-width : var(--border-thin/normal) pour cohérence
* - ~8 transitions migrées
* 0.0.28 - Migration complète vers variables d'espacement sémantiques desktop
* - Tous les espacements standards (padding, margin, gap) utilisent var(--spacing-*)
* - Standardisation : 5vh → 4vh (var(--spacing-lg))
* - Valeurs rares conservées : 16vh, 24vh
* - Amélioration cohérence et maintenabilité
* 0.0.27 - Migration vers variables responsive unifiées
* - --font-cta-size → --responsive-font-cta
* - Structure cohérente avec desktop/tablette/mobile
* 0.0.26 - Suppression effet hover opacity sur mega menu
* - Suppression opacity: 0.7 au hover des liens mega menu
* - Cohérence avec l'absence d'effets hover sur le site
* 0.0.25 - Ajustement durée fade-in du mega menu
* - Fade-in : var(--transition-smooth) avec delay 0.2s (durée allongée pour plus de douceur)
* - Fade-out : var(--transition-normal) sans delay (conservé)
* 0.0.24 - Animation mega menu : fade-in/out décalé pour transition plus organique
* - Fade-out : var(--transition-normal) (rapide) pour disparaître avant de passer sous le header
* - Fade-in : var(--transition-normal) avec delay 0.2s pour apparaître vers la fin de l'ouverture
* - Bordure header : delay var(--transition-smooth) (au lieu de var(--transition-normal)) pour correspondre à la durée du slide
* 0.0.23 - Animation mega menu : ralentissement et courbe organique
* - Durée : var(--transition-normal) → var(--transition-smooth)
* - Courbe : var(--ease-standard) → var(--ease-smooth)
* - Accélération/décélération plus naturelle et fluide
* 0.0.22 - Mega menu : ajustement padding vertical asymétrique
* - Padding top : 8vh → 4vh
* - Padding bottom : 8vh (conservé)
* 0.0.21 - Mega menu : ajustement padding horizontal
* - Padding horizontal : 32vh → 24vh (32vh était trop large)
* 0.0.20 - Mega menu : augmentation padding et gap entre colonnes
* - Padding horizontal : 16vh → 32vh
* - Gap entre colonnes : 4vh → 16vh
* 0.0.19 - Mega menu : CTA aligné à gauche, gap réduit
* - Gap colonne droite : 4vh → 1vh
* - CTA aligné à gauche (justify-content: flex-start)
* 0.0.18 - Mega menu colonne droite : gap augmenté, structure pour CTA
* - Gap entre articles : 2vh → 3vh
* - Colonne droite en flex column avec gap 4vh
* - Conteneur .megamenu-cta centré sous les articles
* 0.0.17 - Mega menu : gap 3vh dans le menu, colonnes centrées verticalement
* - Gap menu navigation : 2vh → 3vh
* - align-items: center sur .megamenu-columns
* 0.0.16 - Ajustement padding mega menu : 8vh vertical, 16vh horizontal
* 0.0.15 - Ajout des styles pour les colonnes du mega menu
* - Colonnes 1/3 et 2/3 avec gap 4vh
* - Menu navigation : style H3, gap 2vh entre liens
* - Articles : grid 2 colonnes avec gap 2vh
* 0.0.14 - Contenu mega menu : padding 8vh, pleine largeur, hauteur flexible
* - Suppression min-height: 25vh pour hauteur adaptative
* - Padding augmenté de 5vh à 8vh
* - width: 100% pour s'assurer de la pleine largeur
* 0.0.13 - Augmentation taille chevron : 0.6em → 0.75em
* 0.0.12 - Changement du triangle plein en chevron creux
* - stroke: currentColor au lieu de fill: currentColor
* - Design plus épuré et moderne
* 0.0.11 - Rotation du chevron dans le sens antihoraire (-180deg au lieu de 180deg)
* - Animation inverse pour une transition plus naturelle
* 0.0.10 - Ajout d'une icône chevron sur "La maison d'édition"
* - Chevron down (0.6em) avec gap 0.5vh
* - Animation de rotation 180deg quand le mega menu est ouvert
* - Fill currentColor pour suivre la couleur du texte
* 0.0.9 - Ajout de l'overlay glassmorphism sous le mega menu
* - Effet de flou (backdrop-filter: blur(5px)) sur le fond
* - Fond semi-transparent rgba(50, 50, 50, 0.1)
* - Fade in/out synchronisé avec l'ouverture/fermeture du menu
* - z-index 98 (sous le mega menu)
* 0.0.8 - Ajout d'un effet fade sur le contenu du mega menu
* - Le contenu apparaît en douceur (opacity 0 → 1) pendant le slide in
* - Transition var(--transition-normal) var(--ease-standard) synchronisée avec l'animation du conteneur
* 0.0.7 - Synchronisation parfaite de la bordure du header avec l'animation du mega menu
* - Bordure disparaît instantanément à l'ouverture (transition 0s)
* - Bordure réapparaît après var(--transition-normal) à la fermeture (transition-delay)
* - Plus de conflit visuel entre bordure et mega menu en mouvement
* 0.0.6 - Correction z-index pour superposition correcte
* - Header : z-index 100 + position relative
* - Mega menu : z-index 99 (1 point en dessous du header)
* - Le mega menu passe maintenant correctement derrière le header
* 0.0.5 - Amélioration de l'animation du mega menu
* - Bordure en bas du mega menu (0.15vh solid)
* - Masquage de la bordure du header avec classe .megamenu-active
* - Animation slide pure (translateY -100% → 0) sans fade
* 0.0.4 - Ajout des styles pour le mega menu "Maison d'édition"
* - Position absolue sous le header (top: 5vh)
* - Pleine largeur (100vw), fond beige, z-index 100
* - Transition fluide avec opacity, transform, visibility
* - État .is-open pour l'affichage
* 0.0.3 - Restructuration complète du header avec 5 conteneurs
* - Icones gauche (10vh), Menu gauche (flex), Logo (25vh), Menu droite (flex), Icones droite (10vh)
* - Padding horizontal 5vh, padding vertical 0
* - Menus avec flex: 1 pour centrage parfait du logo
* - Borders de debug 1px noir
* 0.0.2 - Fix taille logo sur pages produit WooCommerce
* 0.0.1 - Version initiale
*/
/* ============================================================================
Cart Badge — styles de base (desktop + mobile)
========================================================================== */
.cart-badge {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--color-text);
line-height: 1;
pointer-events: none;
z-index: 10;
}
.cart-badge--hidden {
display: none;
}
/* ============================================================================
Header Desktop (≥1201px)
========================================================================== */
@media (min-width: 1201px) {
/* --- HEADER PRINCIPAL --- */
.site-header {
position: relative;
width: 100vw;
height: 5vh;
padding: 0 var(--spacing-lg);
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--color-background);
border-bottom: var(--border-thin) solid var(--color-text);
transition: border-bottom-color 0s var(--transition-smooth);
z-index: 100;
}
/* --- ICONES GAUCHE (10vh) --- */
.header-icons-left {
width: 10vh;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* --- MENU GAUCHE (largeur variable) --- */
.header-menu-left {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.header-menu-left a,
.header-menu-right a {
font-family: var(--font-cta-family);
font-size: var(--text-size-cta);
font-weight: var(--font-cta-weight);
text-transform: var(--font-cta-text-transform);
color: var(--color-text);
text-decoration: none;
}
/* Style spécifique pour Maison d'édition avec icône */
#menu-maison-edition {
display: flex;
align-items: center;
gap: var(--spacing-2xs);
}
#menu-maison-edition svg {
height: 0.75em;
width: auto;
flex-shrink: 0;
transition: transform var(--transition-normal) var(--ease-standard);
}
#menu-maison-edition svg path {
stroke: currentColor;
}
/* Rotation de l'icône quand le mega menu est ouvert (sens antihoraire) */
.site-header.megamenu-active #menu-maison-edition svg {
transform: rotate(-180deg);
}
/* Style spécifique pour Transmission et lien retour Une Autre Voix */
.header-menu-right [data-transmission-anim],
.header-menu-right [data-uav-anim],
.header-menu-right a.header-menu-home {
text-transform: none;
font-style: italic;
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.header-menu-right [data-transmission-anim] svg,
.header-menu-right [data-uav-anim] svg,
.header-menu-right a.header-menu-home svg {
height: 0.75em;
width: auto;
flex-shrink: 0;
}
.header-menu-right [data-transmission-anim] svg path,
.header-menu-right [data-uav-anim] svg path,
.header-menu-right a.header-menu-home svg path {
fill: currentColor;
}
/* Animation Transmission / Une Autre Voix */
[data-transmission-anim] .transmission-anim-element,
[data-transmission-anim] .char-anim,
[data-uav-anim] .transmission-anim-element,
[data-uav-anim] .char-anim {
display: inline-block;
transition: color var(--transition-fast) var(--ease-standard), transform var(--transition-normal);
transform-origin: center bottom;
}
[data-transmission-anim] svg,
[data-transmission-anim] svg path,
[data-uav-anim] svg,
[data-uav-anim] 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.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* --- LOGO (25vh) --- */
.header-logo {
position: relative;
width: 25vh;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Trait uniquement sur le header Transmission
Problème : border-bottom sur .header-logo est recouvert par le nuage SVG (position:absolute,
height≈14vh, fill blanc) qui se peint par-dessus le border de son parent.
Solution : ::after height:0 + border-bottom → rendu natif identique au site-header,
z-index:2 garantit l'affichage au-dessus du nuage (0) et du logo (1). */
.header-logo:has(.header-logo-transmission) {
position: relative;
}
.header-logo:has(.header-logo-transmission)::after {
content: '';
position: absolute;
bottom: calc(-0.15vh / 2);
left: 0;
right: 0;
height: 0;
border-bottom: var(--border-thin) solid var(--color-text);
z-index: 2;
pointer-events: none;
}
.header-logo .custom-logo-link {
display: flex;
align-items: center;
height: 100%;
}
.header-logo .custom-logo {
height: 2vh;
width: auto;
}
/* --- NUAGE TRANSMISSION --- */
.header-logo-transmission {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.header-logo-nuage-link {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 0;
line-height: 0;
}
.header-logo-nuage {
width: 40vh;
height: auto;
display: block;
pointer-events: none;
}
/* Zone cliquable = forme du nuage uniquement (SVG à l'intérieur du SVG) */
.header-logo-nuage a path {
pointer-events: visibleFill;
cursor: pointer;
}
/* Supprime l'outline de focus du SVG (tabindex="-1", non atteignable au clavier) */
.header-logo-nuage a:focus {
outline: none;
}
.header-logo-nuage-letters {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6vh;
display: flex;
align-items: flex-end;
gap: 0.35vh;
pointer-events: none;
}
.header-logo-nuage-letters .lt {
height: 1.6vh;
width: auto;
display: block;
pointer-events: none;
transform-origin: center bottom;
transition: color 0.15s ease-out;
}
.header-logo-nuage-letters .lt:nth-child(1) { height: 2.5vh; } /* t */
.header-logo-nuage-letters .lt:nth-child(7),
.header-logo-nuage-letters .lt:nth-child(10) { height: 2.3vh; } /* i */
.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); }
.header-logo-transmission .custom-logo-link {
position: relative;
z-index: 1;
}
/* --- MENU DROITE (largeur variable) --- */
.header-menu-right {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
/* --- ICONES DROITE (10vh) --- */
.header-icons-right {
width: 10vh;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* --- ICONE PANIER --- */
.header-cart-link {
position: relative;
display: flex;
align-items: center;
color: var(--color-text);
text-decoration: none;
}
.header-cart-link .header-cart-icon {
height: 2.5vh;
width: auto;
}
/* --- BADGE PASTILLE PANIER — overrides desktop (vh) --- */
.cart-badge {
top: -0.9vh;
right: -0.9vh;
min-width: 1.6vh;
height: 1.6vh;
font-size: 1.25vh;
padding: 0.4vh;
}
/* Masquer la bordure du header quand le mega menu est ouvert */
.site-header.megamenu-active {
border-bottom-color: transparent;
transition: border-bottom-color var(--transition-instant);
}
/* --- MEGA MENU --- */
.megamenu {
position: absolute;
top: 5vh;
left: 0;
width: 100vw;
background-color: var(--color-background);
border-bottom: var(--border-thin) solid var(--color-text);
visibility: hidden;
transform: translateY(-100%);
transition: transform var(--transition-smooth) var(--ease-smooth), visibility var(--transition-smooth);
z-index: 99;
}
.megamenu.is-open {
visibility: visible;
transform: translateY(0);
}
.megamenu-content {
width: 178vh;
max-width: 100%;
margin: auto;
padding: var(--spacing-lg) 16vh var(--spacing-xl) 16vh;
opacity: 0;
transition: opacity var(--transition-normal) var(--ease-smooth);
}
.megamenu.is-open .megamenu-content {
opacity: 1;
transition: opacity var(--transition-smooth) var(--ease-smooth) 0.2s;
}
/* --- COLONNES MEGA MENU --- */
.megamenu-columns {
display: grid;
grid-template-columns: 2fr 5fr;
gap: 0;
width: 100%;
align-items: center;
}
/* --- COLONNE GAUCHE : MENU NAVIGATION --- */
.megamenu-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}
.megamenu-nav-list li {
margin: 0;
padding: 0;
}
.megamenu-nav-list a {
font-family: var(--font-h3-family);
font-size: var(--font-h3-size);
font-weight: var(--font-h3-weight);
line-height: var(--font-h3-line-height);
letter-spacing: var(--font-h3-letter-spacing);
text-transform: var(--font-h3-text-transform);
color: var(--color-text);
text-decoration: none;
display: block;
position: relative;
padding-bottom: 0.5vh;
}
/* Ligne animée : cachée par défaut, apparaît depuis la gauche au hover (inverse des CTAs) */
.megamenu-nav-list a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--border-normal);
background-color: var(--color-text);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-smooth) var(--ease-smooth);
}
.megamenu-nav-list a.is-animating-hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* --- COLONNE DROITE : ARTICLES --- */
.megamenu-col-right {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.megamenu-articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
}
.megamenu-cta {
display: flex;
justify-content: flex-start;
}
/* --- OVERLAY MEGA MENU --- */
.megamenu-overlay {
position: absolute;
top: 5vh;
left: 0;
width: 100vw;
height: 100vh;
background-color: color-mix(in srgb, var(--color-text) 10%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-smooth) var(--ease-smooth), visibility var(--transition-smooth);
z-index: 98;
}
.megamenu-overlay.is-visible {
opacity: 1;
visibility: visible;
}
}