/*
 * Bandeau supérieur générique de la page créateur (façon Skool) : icônes
 * notifications/messagerie, avatar + menu déroulant, barre de recherche
 * locale. Réutilise les jetons de couleur déjà posés par
 * gallia-subscribe-oneclick/modal.css (--gallia-cta-yellow etc.).
 */

.gallia-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 1rem;
	/* Même piège que .gallia-sale-layout (voir sale.css) : la barre de
	   partage verticale flottante pré-existante (Sassy Social Share,
	   position:fixed left:0) recouvre le début de ce bandeau, confirmé en
	   capture d'écran réelle. Même !important nécessaire, une autre
	   feuille de style du site ignorait sinon silencieusement la règle. */
	margin-left: 72px !important;
}

@media (max-width: 782px) {
	.gallia-header-bar {
		margin-left: 0 !important;
	}
}

/* ---------- Logo / nom du créateur ---------- */

.gallia-header-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.gallia-header-brand-avatar {
	border-radius: 8px;
	width: 36px;
	height: 36px;
	object-fit: cover;
	display: block;
}

.gallia-header-brand-name {
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.gallia-header-brand-name {
		display: none;
	}
}

/* ---------- Recherche ---------- */

.gallia-header-search {
	position: relative;
	flex: 1 1 320px;
	max-width: 420px;
}

.gallia-header-search-input {
	width: 100%;
	padding: 0.55rem 0.85rem;
	border: 1px solid #ccc;
	border-radius: 999px;
	font-size: 0.9rem;
}

/*
 * 🔴 Chantier "motif Astra — passe complète, 3e fichier" (11/09/2026) :
 * `border-color` ajouté par précaution — [NON MESURÉ sur CE champ précis]
 * mais ce projet documente 3 fois ailleurs (gallia-global-header/header.css,
 * gallia-header-selector-search-input/gallia-global-header-search-input)
 * qu'Astra pose une bordure POINTILLÉE BLEUE (`1px dotted rgb(4,107,210)`)
 * au focus des champs, jamais couverte par un simple `outline`. Ce champ a
 * une bordure propre visible au repos (`1px solid #ccc`, contrairement aux
 * 2 autres champs déjà corrigés qui n'en avaient aucune) : plutôt que la
 * neutraliser en entier, sa couleur est reprise au focus (même noir que
 * .gallia-header-selector-search-row:focus-within, gallia-global-header/
 * header.css) — cohérent avec le contour jaune déjà en place, jamais bleu.
 */
.gallia-header-search-input:focus {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 1px;
	border-color: var(--gallia-black, #0F0F0F);
}

.gallia-header-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 60vh;
	overflow-y: auto;
	z-index: 200;
	padding: 0.5rem 0;
}

.gallia-header-search-results[hidden] {
	display: none;
}

.gallia-search-group-title {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
	padding: 0.4rem 0.9rem 0.2rem;
}

.gallia-search-result-item {
	display: block;
	padding: 0.45rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
	font-size: 0.88rem;
}

/*
 * 🔴 Chantier "motif Astra — passe complète, 3e fichier" (11/09/2026) :
 * `color` ajouté (absent — base 1 seule classe, spécificité insuffisante
 * face à Astra `a:hover`/`a:focus`) ; `:focus`/`:focus-visible` ajoutés,
 * absents jusqu'ici — même bug exact que les 4 liens de résultats de
 * recherche déjà corrigés dans gallia-global-header/header.css (recherche
 * globale), ici pour la recherche locale de la page créateur.
 */
.gallia-search-result-item:hover,
.gallia-search-result-item:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

.gallia-search-result-item:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: -2px;
}

.gallia-search-empty {
	padding: 0.6rem 0.9rem;
	color: #888;
	font-size: 0.85rem;
}

/* ---------- Icônes / avatar ---------- */

.gallia-header-icons {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gallia-header-dropdown-wrap {
	position: relative;
}

/*
 * 🔴 Bug réel trouvé et corrigé (chantier "Page d'accueil façon YouTube",
 * correctifs post-captures 2026-08-23) : Astra imprime en <style> inline un
 * reset global `button, .ast-button, ... { color: #fff }` (couleur de texte
 * de bouton configurée dans le Customizer, appliquée à TOUT <button> brut du
 * site, confirmé réellement via `document.styleSheets` — aucune règle
 * n'avait jamais ciblé `.gallia-header-icon-btn` spécifiquement). Sans effet
 * visible tant que ces boutons affichaient des EMOJI (🔔/✉️, glyphes en
 * couleur, ignorent `color`) — devenu blanc sur blanc, invisible à l'état
 * normal, dès leur conversion en SVG dessinées à la main (`stroke=
 * "currentColor"`, hérite bien `color`) lors de ce même chantier. `color`
 * explicite ci-dessous (spécificité de classe, l'emporte naturellement sur
 * le sélecteur d'élément `button` d'Astra, aucun `!important` nécessaire).
 * Les deux boutons n'avaient PAS disparu du DOM (position/layout confirmés
 * inchangés) — uniquement invisibles par la couleur.
 */
/*
 * 🔴 Bug réel corrigé (chantier "lot de corrections... fidélité Skool",
 * 2026-08-29), point 7 : icônes cloche/enveloppe décrites comme "floues" —
 * cause réelle trouvée via getBoundingClientRect() sur l'icône rendue
 * (jamais un flou de filtre/transform, aucun des deux n'était posé) :
 * `padding: 0.4rem` (6,4px à la taille de police racine de ce site) produit
 * une largeur de bouton totale FRACTIONNAIRE (22px d'icône + 2×6,4px =
 * 34,8px), qui décale le SVG centré à des coordonnées non-entières
 * (confirmé réellement : x=1761.046875, y=17.390625) — un navigateur doit
 * alors anti-aliaser des traits fins (stroke-width 1,8) sur une grille de
 * pixels non alignée, ce qui se voit comme un flou léger. `padding: 7px`
 * (valeur entière, remplace l'unité rem qui produisait la fraction) :
 * bouton total 22+2×7=36px, PAIR — centrage vertical dans le bandeau de
 * 60px devient lui aussi entier ((60-36)/2=12), les deux axes corrigés
 * simultanément par le même changement.
 */
.gallia-header-icon-btn,
.gallia-header-avatar-btn {
	background: none;
	border: none;
	color: var(--gallia-black, #0f0f0f);
	cursor: pointer;
	padding: 7px;
	border-radius: 999px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/*
 * 🔴 Chantier "motif Astra — passe complète, 3e fichier" (11/09/2026),
 * demandé explicitement par le fondateur (avatar, cloche, messagerie) :
 * `color` ajouté (absent — Astra `button:hover{color:#fff}` restait seul
 * sur cette propriété, cette règle ne déclarant que `background`, MÊME bug
 * déjà documenté et corrigé pour `color` sur .gallia-header-icon-btn AU
 * REPOS, ligne ~173, jamais reporté ici à l'état survol). `:focus` ajouté
 * (absent, aucune règle de focus n'existait pour ces 2 boutons) — même
 * cause que le hamburger (gallia-global-header/header.css) : un clic laisse
 * un bouton *focus* sans être forcément *focus-visible*.
 */
.gallia-header-icon-btn:hover,
.gallia-header-icon-btn:focus,
.gallia-header-avatar-btn:hover,
.gallia-header-avatar-btn:focus {
	background: #f0f0f0;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-header-icon-btn:focus-visible,
.gallia-header-avatar-btn:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 2px;
}

.gallia-header-icon {
	font-size: 1.2rem;
}

/*
 * Chantier "Harmonisation YouTube/Skool" (2026-08-25), point 12 : jaune de
 * marque au lieu du rouge — même principe que YouTube (neutre noir/blanc +
 * UNE seule couleur d'accent utilisée avec parcimonie, le rouge chez
 * YouTube) transposé au jaune Gallia. Texte repassé en noir (var(--gallia-
 * cta-text), même paire jaune+noir que .gallia-btn-cta/.gallia-verified-badge
 * partout ailleurs sur le site) — blanc sur jaune pâle aurait été illisible
 * (contraste insuffisant), jamais le cas avec le rouge d'origine.
 */
.gallia-header-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	background: var(--gallia-yellow, #F8D481);
	color: var(--gallia-black, #0f0f0f);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	min-width: 16px;
	height: 16px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.gallia-header-badge[hidden] {
	display: none;
}

.gallia-header-avatar-img {
	border-radius: 999px;
	width: 32px;
	height: 32px;
	object-fit: cover;
	display: block;
}

.gallia-header-login-btn {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}

.gallia-header-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	max-width: 320px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	z-index: 200;
	padding: 0.4rem 0;
}

.gallia-header-dropdown[hidden] {
	display: none;
}

.gallia-header-dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
}

.gallia-header-dropdown-list li {
	border-bottom: 1px solid #f0f0f0;
}

.gallia-header-dropdown-list li:last-child {
	border-bottom: none;
}

.gallia-header-dropdown-list li a {
	display: block;
	padding: 0.55rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
	font-size: 0.85rem;
}

/*
 * 🔴 Chantier "motif Astra — passe complète, 3e fichier" (11/09/2026) :
 * `:focus`/`:focus-visible` ajoutés — `color` reste protégé sans
 * déclaration explicite (règle de base composée, `.classe li a` = 3
 * niveaux de spécificité, suffisant face à Astra), mais `background`
 * n'était affecté qu'au survol : un focus clavier (Tab, dans le panneau
 * cloche/messagerie) laissait Astra seul sur cette propriété.
 */
.gallia-header-dropdown-list li a:hover,
.gallia-header-dropdown-list li a:focus {
	background: #f7f7f7;
}

.gallia-header-dropdown-list li a:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: -2px;
}

.gallia-header-dropdown-list li.is-unread a {
	font-weight: 700;
}

.gallia-header-dropdown-empty {
	padding: 0.75rem 0.9rem;
	color: #888;
	font-size: 0.85rem;
	margin: 0;
}

.gallia-header-dropdown-menu a {
	display: block;
	padding: 0.55rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
	font-size: 0.88rem;
}

/*
 * 🔴 Chantier "motif Astra — passe complète, 3e fichier" (11/09/2026) :
 * `color` ajouté — base à 1 classe + 1 élément (0-1-1) est à SPÉCIFICITÉ
 * ÉGALE à un probable `a:hover{color:...}` Astra (0-1-1) : une égalité se
 * résout par l'ordre de chargement des feuilles, jamais fiable. `color`
 * répété explicitement lève l'ambiguïté sans dépendre de cet ordre.
 * `:focus`/`:focus-visible` ajoutés aussi, absents jusqu'ici — menu avatar
 * ("Créer une communauté", "Mode sombre", etc.).
 */
.gallia-header-dropdown-menu a:hover,
.gallia-header-dropdown-menu a:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

.gallia-header-dropdown-menu a:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: -2px;
}

/*
 * Séparateur entre groupes d'entrées du menu avatar (chantier "lot de
 * corrections... fidélité Skool", 2026-08-29), point 17 — même motif que
 * .gallia-header-selector-separator déjà en place dans le panneau du
 * sélecteur de créateur (gallia-global-header/header.css), pas redéfini
 * autrement.
 */
.gallia-header-dropdown-separator {
	height: 1px;
	margin: 0.4rem 0;
	background: var(--gallia-border, #e4e4e4);
}

@media (max-width: 640px) {
	.gallia-header-bar {
		flex-wrap: wrap;
	}
	.gallia-header-search {
		order: 2;
		flex: 1 1 100%;
		max-width: none;
	}
	.gallia-header-icons {
		order: 1;
		margin-left: auto;
	}
}