/* Header transparent sur la bannière d'accueil, blanc au défilement.
   Chargé uniquement sur la page d'accueil (cai_header_transparent_assets). Classes posées par header-transparent.js :
   cai-hdr-overlay (actif), cai-hdr-clear (en haut, menu mobile fermé), cai-hdr-anim (transitions après le 1er rendu). */

/* Le header reste sticky ; la bannière remonte dessous (hauteur mesurée en JS, menu mobile fermé). */
html.cai-hdr-overlay #site-header{margin-bottom:calc(-1 * var(--cai-hh, 0px))}

/* Après défilement : fond blanc opaque. */
html.cai-hdr-overlay:not(.cai-hdr-clear) #site-header{background:#fff}
@media (prefers-color-scheme:dark){html.cai-hdr-overlay:not(.cai-hdr-clear) #site-header{background:var(--bg)}}

/* En haut de page : transparent ; textes, icônes et logo en blanc pour rester lisibles sur la bannière. */
html.cai-hdr-clear #site-header{background:transparent;border-bottom-color:transparent}
html.cai-hdr-clear #site-header .top small,
html.cai-hdr-clear #site-header .cai-header-right button,
html.cai-hdr-clear #site-header .cai-mobile-menu,
html.cai-hdr-clear #site-header .cai-menu>li>a{color:#fff}
html.cai-hdr-clear #site-header .cai-mobile-menu span{background:#fff}
html.cai-hdr-clear #site-header .cai-header-logo{filter:brightness(0) invert(1)}
html.cai-hdr-clear #site-header .sub-menu a{color:var(--fg)}

/* Transitions fluides (activées après le premier rendu pour éviter tout clignotement au chargement). */
html.cai-hdr-anim #site-header{transition:background-color .25s ease,border-color .25s ease}
html.cai-hdr-anim #site-header .top small,
html.cai-hdr-anim #site-header .cai-header-right button,
html.cai-hdr-anim #site-header .cai-mobile-menu,
html.cai-hdr-anim #site-header .cai-menu>li>a{transition:color .25s ease,border-color .25s ease}
html.cai-hdr-anim #site-header .cai-mobile-menu span{transition:background-color .25s ease}
html.cai-hdr-anim #site-header .cai-header-logo{transition:filter .25s ease}