/*
 * Gallia – Bandeau supérieur global (unique, site entier), façon YouTube.
 * Voir gallia-global-header.php pour le rendu HTML et le choix
 * d'architecture complet (remplacement des 2 anciens affichages "Gallia").
 *
 * Réutilise volontairement les classes .gallia-header-icon-btn,
 * .gallia-header-dropdown, .gallia-header-badge, .gallia-header-avatar-*
 * etc. définies dans gallia-radio-header/header.css (chargée en dépendance,
 * voir gallia-global-header.php) — mêmes icônes/menus déroulants,
 * réutilisés tels quels comme demandé, jamais redéfinis ici en double.
 */

:root {
	--gallia-header-height: 60px;
}

/* ---------- Bandeau fixe ---------- */

.gallia-global-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--gallia-header-height);
	background: var(--gallia-white, #fff);
	z-index: 9400;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1.25rem;
	box-sizing: border-box;
}

/*
 * 🔴 Bug réel corrigé (correctifs 2026-08-23, 2e passe — "recherche mal
 * centrée") : en flexbox, `margin:0 auto` sur la recherche ne la centre
 * QUE dans l'espace restant entre bloc logo et bloc icônes — ces deux
 * blocs n'ont pas la même largeur, donc l'espace restant lui-même n'est
 * pas symétrique par rapport à la page. Une grille à 3 colonnes
 * (1fr/600px/1fr) avait alors été posée pour centrer la recherche
 * exactement au milieu du bandeau entier, indépendamment du contenu des
 * colonnes extérieures.
 *
 * 🔄 SUPERSÉDÉ (chantier "Suppression Tchat, réorganisation bandeau...",
 * 2026-08-25, 5e suite), point 8 : objectif visuel INVERSÉ, demandé
 * explicitement — la recherche doit désormais coller au groupe
 * logo+sélecteur (façon Skool), PAS être centrée dans le bandeau entier
 * (c'était le but du correctif ci-dessus, valable au moment où il a été
 * écrit mais devenu incompatible avec cette nouvelle demande). Retour à un
 * flexbox simple (hérité de la règle de base ci-dessus, plus aucune grille
 * sur ce point de rupture) : le groupe logo+sélecteur+recherche reste
 * compact à gauche par le flux naturel du flexbox ; `margin-left:auto` sur
 * le lien "Réseau Départemental Gallia" (juste après la recherche dans le
 * DOM, voir gallia-global-header.php, points 2/3 du même chantier) pousse
 * CE lien — et tout ce qui le suit (icônes) — vers la droite, sans toucher
 * au flux des éléments qui le précèdent.
 */
@media screen and (min-width: 783px) {
	.gallia-global-header {
		gap: 12px;
	}

	.gallia-global-header-search {
		max-width: 600px;
		flex: 0 1 600px;
		margin: 0;
	}
}

/*
 * 🔴 Régression réelle corrigée (correctif "régressions du bandeau...",
 * point 1) : le flexbox ci-dessus fait dépendre la position de la recherche
 * de la largeur du bloc logo+sélecteur qui la précède — sur une page
 * créateur (sélecteur présent, ~200px de plus qu'un simple logo), la
 * recherche se retrouvait ainsi décalée par rapport à sa position
 * habituelle (mesuré : 360px au lieu des ~660px, centrée, qu'elle occupait
 * avant le chantier "sélecteur collé à la recherche"). Demande explicite de
 * ce correctif : la recherche doit retrouver une position FIXE
 * (indépendante du contenu du bloc logo+sélecteur) — PAS en la recentrant
 * au prix d'un grand vide entre le sélecteur et elle (ce qui annulerait
 * l'objectif du chantier précédent), mais en réintroduisant la grille à 3
 * colonnes déjà utilisée par le passé pour ce même problème (colonnes 1/2 :
 * 1fr / 600px / 1fr — la 2e colonne, fixe, ancre la recherche à une position
 * constante quel que soit le contenu des 2 colonnes voisines), UNIQUEMENT
 * sur les pages créateur (`.has-creator-selector`, posée sur le <header> —
 * jamais sur les pages sans sélecteur, dont le flexbox compact ci-dessus
 * reste inchangé, déjà correct). Le rapprochement sélecteur/recherche est
 * ensuite recréé À L'INTÉRIEUR de la 1re colonne (voir les règles
 * suivantes) : le bloc logo+sélecteur s'étire pour occuper toute la largeur
 * de cette colonne (bien plus large que son contenu), et seul le SÉLECTEUR
 * (pas le logo, qui reste aligné au rail du menu latéral) est poussé vers
 * la droite de cette colonne via `margin-left:auto` — il vient ainsi border
 * la recherche, qui elle-même ne bouge jamais.
 *
 * 🔴 Bug réel trouvé et corrigé EN TESTANT ce correctif (pas dans le prompt
 * d'origine) : posée dès 783px comme le reste du bandeau desktop, cette
 * grille (1fr/600px/1fr, largeur minimale ~1350px pour ses 3 colonnes à
 * leur contenu naturel) débordait silencieusement de tout viewport plus
 * étroit — confirmé réellement (getBoundingClientRect : le rail d'icônes se
 * retrouvait positionné bien au-delà du bord droit de l'écran, invisible et
 * INJOIGNABLE, sans barre de défilement pour le révéler, un bandeau
 * position:fixed ne participant pas au scroll du document). Seuil relevé à
 * 1400px (marge de sécurité au-dessus des ~1350px mesurés) : EN DESSOUS,
 * le flexbox existant (@media 783px ci-dessus, déjà en production, jamais
 * signalé cassé) sert de repli — la recherche y rétrécit proprement au lieu
 * de déborder, seul le "collage parfait" à la recherche perd un peu de sa
 * précision entre 783 et 1400px (aucune régression : c'était déjà son
 * comportement avant ce correctif).
 *
 * 🔴 RÉGRESSION RÉELLE CORRIGÉE (correctif "Fidélité Skool renforcée...",
 * point 1) : le correctif ci-dessus n'avait scopé la grille de centrage
 * qu'aux pages CRÉATEUR (`.has-creator-selector`) — mais la règle flexbox de
 * base (@media 783px plus haut) qui fait "coller" la recherche au bloc
 * logo est PARTAGÉE par TOUTES les pages, y compris l'accueil. Une grille
 * symétrique (`:not(.has-creator-selector)`) avait alors été ajoutée pour
 * CENTRER la recherche dans la largeur totale du bandeau sur l'accueil.
 *
 * 🔄 SUPERSÉDÉ DE NOUVEAU (chantier "Exploration exhaustive authentifiée +
 * refonte posts/popup...", 2026-08-27), point 1 : cette centration a été
 * elle-même signalée comme LA régression (écart mesuré réellement : 525px
 * entre logo et recherche à 1920px, largement > les "moins de 40px"
 * attendus) — objectif visuel de nouveau INVERSÉ par rapport au correctif
 * ci-dessus, demandé explicitement. La grille `:not(.has-creator-selector)`
 * est donc RETIRÉE : l'accueil retombe sur le flexbox de base (@media 783px
 * plus haut), qui colle naturellement la recherche au logo (gap 12px) et
 * pousse le reste (icônes) à droite via `margin-left:auto` sur
 * `.gallia-global-header-end` (règle de base, hors media query, inchangée).
 * Seule la variante CRÉATEUR (`.has-creator-selector`) conserve la grille
 * 3 colonnes ci-dessous — jamais visée par cette demande, dont le
 * "collage sélecteur/recherche" déjà validé reste inchangé à l'identique.
 */
/*
 * 🔴 RÉGRESSION RÉELLE CORRIGÉE (chantier "lot de corrections... fidélité
 * Skool", 2026-08-29), point 1 : cette grille de centrage n'était scopée
 * qu'aux pages CRÉATEUR (`.has-creator-selector`) — l'accueil (sans
 * sélecteur) retombait donc sur le flexbox de base (@media 783px plus haut),
 * qui colle la recherche directement au logo "Gallia" (bloc court, ~110px)
 * au lieu du bloc logo+sélecteur (~310px) d'une page créateur : la recherche
 * se retrouvait ainsi ~200px plus à gauche sur l'accueil que sur une page
 * créateur, confirmé réellement (capture comparative 1920px : recherche à
 * x≈145 sur l'accueil contre x≈665 sur la page créateur), signalé "trop à
 * gauche" par rapport à la page créateur. Qualificatif `.has-creator-
 * selector` RETIRÉ des 5 sélecteurs ci-dessous : la grille (colonnes 1fr/
 * 600px/1fr) s'applique désormais à TOUTE page dès 1400px de large, donnant
 * à la recherche une position ABSOLUE identique quel que soit le contenu de
 * la 1re colonne (logo seul, ou logo+sélecteur) — testé réellement par
 * injection de cette règle sur l'accueil en direct avant application ici,
 * la recherche tombe exactement à la même position qu'une page créateur.
 * En dessous de 1400px, les deux types de page continuaient déjà à se
 * comporter de façon identique (flexbox de base, partagé, inchangé) — donc
 * aucun risque de régression à ces largeurs.
 */
@media screen and (min-width: 1400px) {
	.gallia-global-header {
		display: grid;
		grid-template-columns: 1fr 600px 1fr;
		column-gap: 12px;
	}

	.gallia-global-header-search {
		max-width: none;
		flex: none;
	}

	.gallia-global-header-brand {
		justify-self: stretch;
	}

	.gallia-global-header.has-creator-selector .gallia-header-creator-selector {
		margin-left: auto;
	}

	.gallia-global-header-end {
		justify-self: end;
	}
}

/*
 * 🔴 Bordure retirée (chantier identité visuelle, reprise 2026-08-21) :
 * signalée comme toujours visible malgré le chantier précédent — celui-ci
 * avait retiré la bordure de #masthead (le bandeau SECONDAIRE) mais jamais
 * celle de CE bandeau primaire lui-même, qui avait sa propre
 * `border-bottom` distincte (bug non détecté à l'époque, faute d'avoir
 * inspecté le DOM rendu). La séparation visuelle avec le contenu de page
 * se fait désormais par contraste de fond (bandeau blanc, page grise
 * --gallia-page-bg), pas par un trait — cohérent avec le principe acté
 * cette session pour toutes les autres lignes retirées.
 */

/* La barre d'administration WordPress (z-index natif 99999, 32px desktop /
   46px mobile) reste toujours visible au-dessus — le bandeau commence juste
   en dessous plutôt que d'être partiellement recouvert. Même convention que
   gallia-left-sidebar.php. */
body.admin-bar .gallia-global-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .gallia-global-header {
		top: 46px;
	}
}

/*
 * Liens du bandeau secondaire natif ("Radio Jhesus Maria" / "Réseau
 * Départemental Gallia" / "Politique de cookies") — mis en avant en gras +
 * noir (correctifs post-captures 2026-08-23, demandé explicitement : trop
 * fins/en couleur de lien pour leur importance). Affordance de lien
 * conservée explicitement au survol/focus (soulignement) puisque la couleur
 * distinctive d'origine (bleu-ardoise Astra) qui la signalait jusqu'ici
 * disparaît avec le passage au noir.
 */
#masthead .menu-link {
	color: var(--gallia-black, #0F0F0F);
	font-weight: 700;
}

#masthead .menu-link:hover,
#masthead .menu-link:focus-visible {
	text-decoration: underline;
}

/* ---------- Masthead natif du thème : masqué, pas supprimé ---------- */

/*
 * Seul le bloc titre/logo natif d'Astra disparaît (doublon du logo "Gallia"
 * ci-dessous) — voir le docblock de gallia-global-header.php pour la
 * confirmation que .site-branding est bien isolé (aucun autre élément
 * partagé). Le reste du bandeau natif (#masthead : liens de navigation
 * "Radio Jhesus Maria" / "Politique de cookies" / "Réseau départemental
 * Gallia", bouton mobile natif) reste fonctionnel, simplement décalé sous
 * ce nouveau bandeau primaire pour ne jamais le chevaucher.
 */
/*
 * 🔴 Bug réel trouvé par capture d'écran réelle : Astra pose sa propre
 * règle .ast-logo-title-inline .ast-site-identity { display: inline-flex }
 * (2 sélecteurs de classe) — spécificité égale ou supérieure à un simple
 * .site-branding (1 sélecteur), qui restait donc affiché malgré cette
 * règle. Même situation, même solution déjà établie sur ce projet pour la
 * barre de partage verticale (.heateor_sss_vertical_sharing, voir
 * gallia-left-sidebar/sidebar.css) : !important, plutôt que de chaîner des
 * sélecteurs de classe fragiles face à une éventuelle mise à jour du thème.
 */
.site-branding {
	display: none !important;
}

/*
 * 🔴 Bug réel trouvé par capture d'écran réelle (mobile) : un
 * `margin-top: var(--gallia-header-height)` avait été posé ici en plus du
 * `padding-top` déjà posé sur <body> (voir gallia-left-sidebar/sidebar.css)
 * — #masthead étant le premier élément du flux normal de <body>, il était
 * déjà correctement repoussé par CE padding-top seul ; ce margin-top
 * cumulait un second décalage de la même hauteur (bande vide de 60px
 * mesurée entre le bandeau global et #masthead). Retiré : rien à faire ici,
 * #masthead suit déjà le flux normal du document sans code additionnel.
 */

/* ---------- Zone hamburger + logo ---------- */

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

/*
 * Alignait le logo avec la largeur du rail du menu latéral sur desktop
 * ("dans l'alignement du menu latéral") en réservant une largeur fixe
 * (--gallia-sidebar-width, 240px) au bloc logo — MAIS la position du logo
 * lui-même (padding-left + largeur du hamburger + gap) ne dépend PAS de
 * cette largeur de bloc : elle ne fait que réserver de l'espace VIDE
 * *après* le logo, avant le prochain élément flex (la recherche). Vérifié
 * réellement (chantier "Exploration exhaustive authentifiée...",
 * 2026-08-27, point 1) : c'est CETTE réserve qui causait l'essentiel de
 * l'écart logo→recherche mesuré (125px après un 1er correctif, jusqu'à
 * 525px avant) — retirée ci-dessous (repli en largeur naturelle, déjà le
 * comportement des pages créateur via `.has-creator-selector` avant ce
 * correctif, généralisé ici). Position du logo elle-même confirmée
 * INCHANGÉE après retrait (mesurée à l'identique).
 */
@media screen and (min-width: 783px) {
	.gallia-global-header-brand {
		width: auto;
	}
}

/* ---------- Sélecteur de créateur (Partie D, façon Skool) ---------- */

/*
 * Réutilise .gallia-header-dropdown / .gallia-header-dropdown-menu
 * (gallia-radio-header/header.css, chargée en dépendance) pour le panneau
 * déroulant lui-même — seul le bouton déclencheur (nom + chevron) est
 * propre à ce composant, jamais un second balisage de panneau créé ici.
 */
.gallia-header-creator-selector {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 8px; /* Voir la note de mesure complète plus bas dans ce fichier (points 4/6) — remplacé par margin-left:auto sur pages créateur desktop, voir plus haut dans ce fichier (correctif point 1). */
}

/*
 * Chantier "Style des posts, sélecteur, logo, onglets, bloc redondant"
 * (2026-08-25, 3e suite), points 4 et 6 — REFONTE sur la base de mesures
 * RÉELLES (getComputedStyle), qui remplacent le chantier "Harmonisation
 * YouTube/Skool" (2026-08-25, plus haut dans ce fichier) qui avait dû se
 * contenter d'une police approximée faute d'accès. skool.com/closers-
 * community reste bloquée par un mur de paiement (confirmé de nouveau) —
 * mais Skool sert UN SEUL bundle CSS compilé, partagé à l'IDENTIQUE par
 * toutes les communautés (seul le contenu diffère, jamais les classes ni
 * les tokens visuels) : mesuré à la place sur skool.com/admins ("What Is
 * Skool?"), une communauté publique accessible SANS connexion (vérifié en
 * direct), qui rend donc littéralement les mêmes valeurs réelles.
 *
 * Bouton déclencheur (getBoundingClientRect + getComputedStyle réels) :
 *   - icône (avatar communauté) 40×40, gap 8px vers le nom.
 *   - nom : 14px/400/rgb(32,33,36) — CONFIRME la valeur déjà posée par le
 *     chantier précédent (mesure indirecte via un lien comparable), aucun
 *     changement nécessaire ici.
 *   - gap nom → chevron : 8px. Chevron RÉEL mesuré : PAS un simple ˅, mais
 *     une icône double ↕ (2 petits chevrons haut+bas empilés, 12×20px) —
 *     remplace le ˅ simple posé jusqu'ici (jamais mesuré), voir le SVG
 *     dans gallia-global-header.php.
 *   - bouton entier mesuré : hauteur totale 48px (= 40px icône + 4px de
 *     marge haut/bas), largeur naturelle au contenu.
 *   - gap ENTRE le logo "Gallia" et ce bouton : PAS de valeur Skool
 *     directement comparable (différence structurelle réelle, signalée
 *     plutôt que masquée : sur Skool, ce bouton EST le premier élément du
 *     bandeau, aucun logo de plateforme distinct ne le précède — "What Is
 *     Skool?" est le nom de LA communauté elle-même, pas un second logo de
 *     plateforme). Valeur posée : 8px, le même rythme que tous les autres
 *     écarts mesurés dans ce bloc (choix de cohérence documenté, PAS une
 *     mesure).
 *   - gap bouton → recherche : 8px mesuré (bord du bouton chevron au bord
 *     visible du champ recherche) — non appliqué ici tel quel : la
 *     recherche Gallia vit dans une colonne de grille séparée avec son
 *     propre `gap:1rem` (16px, voir plus haut dans ce fichier), dont la
 *     modification isolée aurait exigé de restructurer la grille du
 *     bandeau entier pour un gain de 8px, un risque de régression jugé
 *     disproportionné — écart signalé explicitement plutôt que corrigé à
 *     l'aveugle.
 */
/*
 * 🔴 Bug réel corrigé (correctif "régressions du bandeau...", point 6) :
 * `.gallia-header-creator-selector-btn` (un <button> UNIQUE couvrant
 * avatar+nom+chevron) a été scindé en 2 éléments distincts côté PHP (voir
 * gallia-global-header.php) — un <a> de navigation (`-link`, avatar+nom) et
 * un <button> de bascule du panneau (`-chevron-btn`, chevron seul). Styles
 * ci-dessous répartis en conséquence ; valeurs visuelles (police, tailles,
 * rayon) inchangées, seule la répartition entre les 2 éléments change.
 */
/*
 * 🔴 Correction de mesure (chantier "Fidélité Skool renforcée...", point 2) :
 * la valeur 14px/400 ci-dessous datait d'une mesure INDIRECTE (via un lien
 * comparable, faute d'accès au vrai board authentifié — voir le chantier
 * "Style des posts, sélecteur, logo, onglets, bloc redondant", 2026-08-25).
 * Remesuré en DIRECT sur le vrai board Skool authentifié (getComputedStyle,
 * élément span du nom de communauté ET du nom de sidebar "À propos" — les 2
 * occurrences donnent la même valeur, cohérence confirmée) : 18px/500, pas
 * 14px/400. Le point 2 du prompt demandait "en gras" — la vraie graisse
 * mesurée est 500 (medium), pas 700 (bold) : appliquée telle quelle, la
 * demande visait la fidélité à Skool, pas un gras arbitraire.
 */
.gallia-header-creator-selector-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 4px;
	border-radius: 8px;
	font-family: var(--gallia-font);
	font-size: 1.125rem; /* 18px, mesuré en direct sur le board authentifié */
	font-weight: 500; /* mesuré en direct — remplace 400 */
	color: var(--gallia-black, #0f0f0f);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * 🔴 Bug réel corrigé (correctif "régressions du bandeau...", point 5) :
 * Astra pose une règle globale `button:hover{color:#fff; background-color:
 * var(--ast-global-color-1); ...}` (spécificité 0-1-1, élément + pseudo-
 * classe) — notre règle de fond ci-dessous (0-2-0, 1 classe + :hover) la
 * bat bien pour `background`, mais ne déclarait jusqu'ici AUCUNE valeur pour
 * `color` : celle d'Astra (blanc) s'appliquait donc SEULE, sans concurrente,
 * sur le texte du survol — fond gris clair + texte blanc, illisible
 * (confirmé réellement via un balayage de document.styleSheets). `color`
 * ajouté explicitement ci-dessous (spécificité suffisante pour l'emporter,
 * comme pour `background`, aucun `!important` nécessaire) ; fond conservé
 * tel quel (#f0f0f0, déjà un changement "léger" comme demandé).
 */
/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : plain `:focus`
 * ajouté — cette règle ne couvrait que `:hover`/`:focus-visible`, jamais
 * `:focus` seul. Même cause que le hamburger (voir gallia-sidebar-toggle
 * plus bas) : un clic laisse ce lien *focus* sans être forcément
 * *focus-visible*, Astra resterait alors seul sur `color` pour cet état.
 */
.gallia-header-creator-selector-link:hover,
.gallia-header-creator-selector-link:focus,
.gallia-header-creator-selector-link:focus-visible {
	background: #f0f0f0;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-header-creator-selector-link:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 2px;
}

.gallia-header-creator-selector-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
	display: block;
}

/*
 * Chevron : cible de clic SÉPARÉE (point 6) — cadre 32×32 minimum (cible
 * tactile utilisable, demandé explicitement) autour de l'icône 14×14, même
 * fond/texte de survol que le lien voisin (voir sa note ci-dessus, même bug
 * Astra `button:hover` corrigé ici de la même façon).
 */
.gallia-header-creator-selector-chevron-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	flex: 0 0 auto;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	color: var(--gallia-black, #0f0f0f);
	box-sizing: border-box;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : même correctif
 * `:focus` que le lien voisin ci-dessus — ce <button> ne couvrait que
 * `:hover`/`:focus-visible`, jamais `:focus` seul (même cause que le
 * hamburger).
 */
.gallia-header-creator-selector-chevron-btn:hover,
.gallia-header-creator-selector-chevron-btn:focus,
.gallia-header-creator-selector-chevron-btn:focus-visible {
	background: #f0f0f0;
	color: var(--gallia-black, #0f0f0f);
}

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

/*
 * 🔴 Correction de mesure (chantier "Fidélité Skool renforcée...", point 3) :
 * `color:inherit` faisait hériter le noir du bouton (jamais mesuré en
 * direct jusqu'ici) — le vrai chevron Skool est GRIS, mesuré en direct sur
 * le board authentifié : rgb(144,144,144) = #909090, exactement la même
 * teinte que le reste des icônes secondaires déjà utilisées ailleurs sur ce
 * site (ex. loupe de recherche, icône réglages du panneau). Taille CORRIGÉE
 * à 12x20 (mesurée en direct, remplace 14x14 jamais mesuré jusqu'ici) dans
 * les attributs width/height du SVG, gallia-global-header.php.
 */
.gallia-header-creator-selector-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: #909090;
	transition: transform 0.15s ease-in-out;
}

.gallia-header-creator-selector-chevron-btn[aria-expanded="true"] .gallia-header-creator-selector-chevron {
	transform: rotate(180deg);
}

/*
 * Point 6 : panneau restructuré — largeur/rayon/ombre/padding MESURÉS sur
 * le vrai panneau Skool (même méthode que ci-dessus). Ancré à GAUCHE (pas
 * right:0, le défaut de .gallia-header-dropdown pensé pour les icônes à
 * droite du bandeau) — ce sélecteur vit près du logo, tout à gauche ; un
 * panneau ancré à droite déborderait vers la gauche de l'écran.
 */
.gallia-header-creator-selector-menu {
	left: 0;
	right: auto;
	width: 305px;
	min-width: 0;
	max-width: none;
	padding: 4px 0 8px;
	border-radius: 10px;
}

.gallia-header-selector-search-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 16px 4px;
	padding: 11px 10px;
	background: var(--gallia-page-bg, #f8f7f5);
	border-radius: 10px;
	/*
	 * Défaut 8 (Lot B2, 09/09/2026) — 1px transparent au repos, pour
	 * qu'apparaître au focus (règle suivante) ne déplace rien (même
	 * épaisseur de bordure dans les deux états).
	 */
	border: 1px solid transparent;
	box-sizing: border-box;
}

/*
 * Repère d'accessibilité — ce champ n'en avait aucun avant ce correctif.
 * Même principe que .gallia-global-header-search-box:focus-within,
 * quelques dizaines de lignes plus bas dans ce fichier : la bordure de
 * l'enveloppe se colore au focus du champ qu'elle contient.
 */
.gallia-header-selector-search-row:focus-within {
	border-color: var(--gallia-black, #0F0F0F);
}

.gallia-header-selector-search-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: #909090;
}

.gallia-header-selector-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: none;
	font-size: 0.9rem;
	font-family: var(--gallia-font);
	color: var(--gallia-black, #0f0f0f);
}

/*
 * CORRECTIF (Lot B2, défaut 8, 09/09/2026) — même technique documentée
 * le 08/09 (gallia-video-player/player.css) et déjà appliquée sur ce
 * lot à .gallia-comments-input : élément ciblé directement, TOUS ses
 * états dans UN SEUL bloc, ::-moz-focus-outer pour Firefox. L'ancienne
 * règle ne couvrait que :focus, jamais :focus-visible — les navigateurs
 * modernes appliquent leur propre anneau par défaut sur :focus-visible
 * spécifiquement, non couvert par cette règle-là.
 *
 * ACCESSIBILITÉ : ce champ n'avait ENCORE AUCUN repère visuel de focus
 * distinct de l'anneau retiré — voir .gallia-header-selector-search-row
 * ci-dessus, à qui une bordure de focus est ajoutée juste en dessous,
 * même principe que .gallia-global-header-search-box:focus-within
 * (déjà en place pour l'AUTRE champ de recherche de ce fichier).
 */
/*
 * CORRECTIF 2 (09/09/2026) — [MESURÉ par le fondateur sur
 * .gallia-global-header-search-input, même règle Astra pour ce champ
 * frère] le pointillé restant est `border` (Astra : `1px dotted
 * rgb(4,107,210)` au focus), pas `outline` (déjà neutralisé ci-dessous,
 * sain). Ce champ n'a jamais eu de bordure propre (`border: none` de
 * base) : `border` neutralisée en entier, jamais seulement `outline`.
 *
 * CORRECTIF 3 (09/09/2026, défaut 1 signalé toujours présent) —
 * [MESURÉ, par lecture du HTML : gallia-global-header.php ligne 294] ce
 * champ est `type="text"`, PAS `type="search"` — contrairement à
 * .gallia-global-header-search-input (voir plus bas dans ce fichier),
 * la cause "sélecteur d'attribut input[type=search]" mesurée sur ce
 * champ FRÈRE ne s'applique donc pas ici telle quelle. [NON MESURÉ] Je
 * n'ai pas accès à la feuille Astra ni à l'onglet DevTools
 * "Styles"/"Computed" pour confirmer le sélecteur exact qui l'emporte
 * sur un champ `type="text"` — je ne peux pas l'affirmer. Escalade de
 * spécificité appliquée quand même, par précaution et parce qu'elle ne
 * coûte rien (Astra groupe fréquemment plusieurs types de champs sous un
 * même sélecteur `input[type=...], input[type=...], ...` de spécificité
 * identique à celle déjà mesurée) : sélecteur remonté à 2 classes via
 * l'enveloppe .gallia-header-selector-search-row, même technique que le
 * padding déjà corrigé ailleurs dans ce fichier. Si le pointillé
 * persiste malgré ceci, ce n'est PROBABLEMENT plus un problème de
 * spécificité mais d'ordre de chargement (feuille Astra chargée après
 * celle-ci) — la mesure DevTools deviendra alors nécessaire, à faire
 * plutôt que d'empiler une nouvelle règle à l'aveugle.
 */
.gallia-header-selector-search-row .gallia-header-selector-search-input,
.gallia-header-selector-search-row .gallia-header-selector-search-input:focus,
.gallia-header-selector-search-row .gallia-header-selector-search-input:focus-visible,
.gallia-header-selector-search-row .gallia-header-selector-search-input:active,
.gallia-header-selector-search-row .gallia-header-selector-search-input:hover {
	outline: 0 none transparent;
	outline-offset: 0;
	border: 0 none transparent;
}

.gallia-header-selector-search-input::-moz-focus-outer {
	border: 0;
}

.gallia-header-selector-search-settings {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	background: none;
	border: none;
	color: #909090;
	cursor: default; /* Icône décorative pour l'instant, voir docblock PHP. */
}

/*
 * 🔴 Bug réel corrigé (correctif "régressions du bandeau...", point 3) :
 * gallia-radio-header/header.css (chargée en dépendance, voir
 * gallia-global-header.php) pose `.gallia-header-dropdown-menu a{display:
 * block; ...}` — 1 classe + 1 élément (spécificité 0-1-1), qui BAT le
 * `display:flex` posé ci-dessous (1 seule classe, 0-1-0), puisque ce panneau
 * porte lui-même la classe `.gallia-header-dropdown-menu` (voir le balisage
 * PHP). Résultat confirmé réellement (getComputedStyle : display=block) :
 * l'icône (bloc de 32px) et le texte, tous deux en flux block normal,
 * s'empilaient sur 2 lignes au lieu d'être alignés sur une seule — l'icône
 * "+" au-dessus de "Créer ma communauté", la boussole au-dessus de
 * "Découvrir les communautés". Sélecteur étendu à 2 classes ci-dessous
 * (0-2-0) pour regagner la priorité sans `!important`, même approche déjà
 * utilisée ailleurs dans ce fichier pour des conflits Astra équivalents.
 * Lignes "Créer ma communauté" / "Découvrir les communautés" — 16px/700
 * mesuré (contraste avec les 400 du bouton déclencheur, vérifié réel).
 */
.gallia-header-creator-selector-menu .gallia-header-selector-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--gallia-black, #0f0f0f);
	text-decoration: none;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `:focus`/
 * `:focus-visible` ajoutés (absents jusqu'ici) — `color` reste protégé sans
 * déclaration explicite (règle de base à 2 classes ci-dessus, spécificité
 * suffisante face à Astra), mais `background` n'était affecté qu'au survol :
 * un focus clavier (Tab) laissait Astra seul sur cette propriété.
 */
.gallia-header-selector-row:hover,
.gallia-header-selector-row:focus {
	background: #f7f7f7;
}

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

.gallia-header-selector-row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	background: var(--gallia-border, #e4e4e4);
	border-radius: 7px;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-header-selector-separator {
	height: 1px;
	margin: 4px 16px;
	background: var(--gallia-border, #e4e4e4);
}

.gallia-header-selector-communities {
	display: flex;
	flex-direction: column;
}

/*
 * Point 6.e : ligne de communauté du membre — mise en avant fond jaune
 * pâle pour la page actuelle, comme demandé explicitement (pas mesuré sur
 * Skool : l'exemple anonyme accessible n'affiche aucune communauté membre à
 * mettre en avant, cette partie précise reste hors de portée de la mesure —
 * couleur choisie cohérente avec le jaune de marque déjà utilisé partout
 * ailleurs pour un état "actif/sélectionné", ex. .gallia-community-feed-pinned).
 */
/*
 * Même bug/même correctif que `.gallia-header-selector-row` ci-dessus
 * (point 3) : sélecteur étendu à 2 classes pour battre
 * `.gallia-header-dropdown-menu a{display:block}` — sans quoi cette ligne
 * (avatar + nom de communauté) subirait le même empilement sur 2 lignes dès
 * qu'une 2e communauté rejoindrait la liste (Phase 2).
 */
.gallia-header-creator-selector-menu .gallia-header-selector-community-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--gallia-black, #0f0f0f);
	text-decoration: none;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : même correctif
 * que `.gallia-header-selector-row` ci-dessus — `:focus`/`:focus-visible`
 * ajoutés, absents jusqu'ici.
 */
.gallia-header-selector-community-row:hover,
.gallia-header-selector-community-row:focus {
	background: #f7f7f7;
}

.gallia-header-selector-community-row:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: -2px;
}

.gallia-header-selector-community-row img {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
}

/*
 * Point 10 (chantier "Suppression Tchat, réorganisation bandeau...",
 * 2026-08-25, 5e suite) : CORRIGE le pâle jaune posé au chantier précédent
 * (#fdf3d9, une approximation non mesurée) — remplacé par var(--gallia-yellow)
 * EXACT, la même teinte que la bordure des posts et tous les autres accents
 * jaunes déjà appliqués ailleurs sur le site, comme demandé explicitement
 * ("un seul jaune cohérent sur toute la plateforme").
 */
.gallia-header-selector-community-row.is-current {
	background: var(--gallia-yellow, #F8D481);
}

/*
 * Correctif "header Gallia Studio" (2026-08-30) : badge "Studio" accolé au
 * logo "Gallia" UNIQUEMENT sur les pages Gallia Studio (voir
 * gallia-global-header.php, $is_studio) — même esprit que "YouTube" +
 * "Studio" chez YouTube. Poids/couleur volontairement plus légers que le
 * logo "Gallia" (gras, #0f0f0f) pour rester lisible comme un second élément,
 * pas une répétition égale.
 */
.gallia-global-header-studio-badge {
	font-weight: 400;
	font-size: 1.1rem;
	color: #606060;
	margin-left: 4px;
}

/*
 * Formulaire de recherche "Rechercher sur votre chaîne" (Gallia Studio) —
 * réutilise TELLES QUELLES les classes `.gallia-global-header-search-box`/
 * `.gallia-global-header-search-input` déjà stylées ci-dessus pour la
 * recherche globale (même apparence, contenu HTML dans un <form> plutôt
 * qu'un <div> — aucune règle spécifique nécessaire pour la boîte elle-même).
 * Seul ajustement : le <form> doit se comporter comme le <div> qu'il
 * remplace dans la mise en page flexbox/grille du bandeau.
 */
.gallia-studio-header-search {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Chantier "motif Astra — passe complète" (11/09/2026) : `:focus` ajouté,
 * même variante que `.gallia-header-selector-community-row:hover`
 * ci-dessus — sans quoi le focus clavier de la ligne "actuelle" retomberait
 * sur le gris générique de la règle de base plutôt que son propre jaune.
 */
.gallia-header-selector-community-row.is-current:hover,
.gallia-header-selector-community-row.is-current:focus {
	background: var(--gallia-yellow-hover, #F1D07C);
}

.gallia-header-selector-community-row.gallia-filterable-hidden {
	display: none;
}

.gallia-global-header-logo {
	font-weight: 700;
	font-size: 1.3rem;
	color: #0f0f0f;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `:focus`/
 * `:focus-visible` ajoutés — sans eux, la spécificité de la règle de base
 * (1 seule classe, `.gallia-global-header-logo{color:...}`) ne bat PAS
 * Astra (`a:focus{color:...}`, élément + pseudo-classe) au focus clavier,
 * contrairement au survol déjà couvert par cette règle.
 */
.gallia-global-header-logo:hover,
.gallia-global-header-logo:focus {
	text-decoration: none;
	color: #0f0f0f;
}

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

/*
 * Hamburger : enfant flexbox NORMAL de ce bandeau. CHANGEMENT (chantier
 * "Page d'accueil façon YouTube", 2026-08-23) : visible aussi en DESKTOP
 * désormais — 🔴 bug réel trouvé en testant ce chantier : la règle
 * d'origine (display:none sauf sous 782px) datait d'avant le repli en rail
 * d'icônes (le menu était "toujours visible sans interaction" sur desktop à
 * l'époque) et n'avait jamais été mise à jour, rendant le bouton totalement
 * INVISIBLE (et donc injoignable, même au clavier) sur desktop malgré toute
 * la logique de repli déjà câblée côté sidebar.js/sidebar.css — confirmé en
 * testant réellement le clic (timeout Playwright, élément non visible).
 */
/*
 * 🔴 CAUSE RÉELLE DU LISERÉ PERMANENT — CONFIRMÉE PAR MESURE DEVTOOLS
 * (chantier "hamburger", 11/09/2026, 4e passage) : `getComputedStyle()` sur
 * le bouton AU REPOS TOTAL (matches(':hover')=false, matches(':focus-
 * visible')=false, activeElement≠bouton) retourne
 * `boxShadow: rgba(0,0,0,0.05) 0px 1px 2px 0px` — une ombre légère, jamais
 * un outline/border, posée AVANT toute interaction. Les 3 pistes explorées
 * au passage précédent (fuite :hover/:focus, mauvais élément visé par
 * blur(), pseudo-élément ::before/::after) sont donc toutes écartées :
 * cette règle de base ne déclarait aucun `box-shadow` (grep exhaustif
 * confirmé, aucune autre feuille de ce projet non plus) — l'ombre vient
 * nécessairement d'une règle Astra générique (hors inventaire, non
 * vérifiable par grep, probablement `button`/`.ast-button` par défaut),
 * jamais contrée à l'état de repos alors qu'elle l'était déjà sur
 * `:hover`/`:focus` (lignes ~905/913 plus bas) — c'est cette dissymétrie qui
 * laissait l'ombre visible en permanence : neutralisée au repos, elle ne
 * pouvait plus jamais apparaître, dans aucun état.
 *
 * 🔴 2e CAUSE, DISTINCTE DE LA PREMIÈRE — CONFIRMÉE PAR MESURE DEVTOOLS DU
 * FONDATEUR (11/09/2026, 5e passage, APRÈS confirmation que `box-shadow`
 * était bien neutralisé) : `border: 1px solid rgb(221,221,221)` (= #ddd)
 * mesuré au repos total. Ce n'était NI le box-shadow NI une fuite
 * hover/focus : une vraie bordure, posée ICI MÊME depuis l'origine de ce
 * bouton, JAMAIS identifiée comme "le liseré" jusqu'à cette capture d'écran
 * — les 4 passages précédents ne touchaient que `outline`/`box-shadow`/
 * `border-color` (jamais `border-style`/`border-width`), donc cette
 * bordure n'a jamais bougé, dans aucun état, ce qui la rendait "permanente"
 * au sens propre : ce n'est pas Astra qui la posait, c'est ce fichier.
 * Vérifié avant retrait (grep `#ddd` sur les 3 feuilles de style) : aucun
 * autre bouton rond du bandeau (recherche, cloche, messagerie, avatar) ne
 * la partage — tous ont `border: none` — décision du fondateur (question
 * posée, réponse "Retirer entièrement") : `border: none` remplace la
 * bordure, ce bouton devient plat comme les autres icônes du bandeau.
 */
.gallia-sidebar-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: none;
	background: #fff;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	box-shadow: none;
}

.gallia-sidebar-toggle-icon {
	font-size: 1.3rem;
	line-height: 1;
	color: #0f0f0f;
}

/*
 * 🔴 Bug réel signalé par le fondateur (chantier "hamburger bleu au survol +
 * retrait du voile de fond", 11/09/2026) : Astra pose une règle globale
 * `button:hover{color:#fff; background-color:var(--ast-global-color-1); ...}`
 * (spécificité 0-1-1, élément + pseudo-classe) — .gallia-sidebar-toggle
 * (0-1-0, une seule classe) ne la battait pas au survol, n'ayant jusqu'ici
 * AUCUNE règle :hover propre. MÊME motif déjà documenté et corrigé plusieurs
 * fois dans ce fichier (voir plus haut .gallia-header-creator-selector-link:
 * hover, .gallia-header-login-btn:hover) — même technique reprise ici :
 * sélecteur remonté à 1 classe + :hover (0-2-0), qui l'emporte sur Astra sans
 * `!important`. `color` déclaré explicitement en plus de `background`, même
 * précaution que documentée pour ces 2 règles (une règle qui ne couvre que
 * `background` laisse `color` d'Astra s'appliquer seul, sans concurrent).
 *
 * Survol neutre légèrement grisé (#f0f0f0) — même teinte que
 * .gallia-sidebar-link:hover (gallia-left-sidebar/sidebar.css), pas un
 * simple maintien du blanc de repos, pour garder une affordance de clic
 * cohérente avec le reste du menu latéral. Jamais bleu.
 *
 * 🔴 CORRECTIF (11/09/2026, même chantier, signalé par le fondateur — PAS
 * mesuré via DevTools de notre côté, aucun accès navigateur) : un contour/
 * liseré bleu apparaît EN PLUS du fond gris au survol. Astra pourrait poser
 * ce contour via `border-color` (règle `button:hover` déjà documentée
 * ci-dessus) et/ou le contour de focus natif du navigateur. `border-color`
 * ramené au gris de repos (`.gallia-sidebar-toggle`, `#ddd`, ligne ~772) ;
 * `box-shadow` neutralisé. [NON MESURÉ] Si le liseré persiste malgré ceci,
 * une 4e cause non identifiée ici est probable — mesure DevTools nécessaire.
 *
 * 🔴 CAUSE RÉELLE DU SYMPTÔME "le contour revient au :focus" (chantier
 * "motif Astra — passe complète", 11/09/2026, signalé par le fondateur) :
 * cette règle ne couvrait QUE `:hover`, jamais `:focus` — un clic laisse ce
 * bouton *focus* sans forcément être *focus-visible* (heuristique du
 * navigateur, clavier vs souris) : Astra (`button:hover, button:focus{...}`,
 * groupés — motif déjà vérifié ailleurs dans ce fichier, ex.
 * .gallia-header-login-btn) restait donc seul sur `:focus`, d'où le bleu qui
 * "revient" après un clic même sans survol. `:focus` ajouté ci-dessous, aux
 * MÊMES valeurs que `:hover` — `outline`/`box-shadow` neutralisés ici aussi
 * (site de la fuite), mais REMPLACÉS par un contour jaune EXPLICITE sur
 * `:focus-visible` seul (clavier), même convention que tous les autres
 * boutons de ce fichier (ex. .gallia-header-login-btn:focus-visible,
 * quelques lignes plus bas) — jamais bleu, jamais absent.
 *
 * 🔴 CORRECTIF (11/09/2026, même chantier, signalé par le fondateur) :
 * `:hover` et `:focus` étaient groupés dans UNE SEULE règle ci-dessous — le
 * fond restait gris tant que le bouton gardait le focus, MÊME après un
 * clic une fois la souris déplacée ailleurs (le focus clavier survit
 * normalement à un clic, ce n'est pas un bug de focus, mais partager le
 * même fond que `:hover` faisait dépendre l'apparence du focus de la
 * position de la souris). Séparé en 2 règles distinctes : `:focus` seul
 * revient au blanc de repos (`.gallia-sidebar-toggle`, ligne ~773) ; le gris
 * n'apparaît QUE pendant un survol réel. `:hover` déclarée EN DERNIER
 * (après `:focus`) pour trancher le cas où les deux s'appliquent à la fois
 * (souris posée sur un bouton qui vient d'être cliqué) : à spécificité
 * égale, la dernière règle du fichier l'emporte — le gris doit primer
 * pendant un survol réel, focus ou non.
 */
.gallia-sidebar-toggle:focus {
	background: #fff;
	color: #0f0f0f;
	border: none;
	outline: none;
	box-shadow: none;
}

.gallia-sidebar-toggle:hover {
	background: #f0f0f0;
	color: #0f0f0f;
	border: none;
	outline: none;
	box-shadow: none;
}

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

@media screen and (max-width: 782px) {
	.gallia-sidebar-toggle {
		display: flex;
	}

	.gallia-global-header-brand {
		width: auto;
	}
}

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

/*
 * 🔴 Bug réel trouvé et corrigé (correctifs 2026-08-23, 4e passe — "la
 * barre reste minuscule malgré le correctif de centrage") : cette règle de
 * base (flex:1 1 auto + max-width:600px + margin:0 auto, héritée de
 * l'ancien layout flexbox) et la règle de grille desktop plus haut dans ce
 * fichier (@media min-width:783px, qui neutralise cette même max-width)
 * ont EXACTEMENT la même spécificité (1 classe chacune) — cette règle-ci,
 * placée PLUS BAS dans le fichier, l'emportait donc TOUJOURS par ordre de
 * cascade, quelle que soit la largeur d'écran, réduisant la recherche à
 * ~227px au lieu des 600px voulus (confirmé réellement : `max-width`
 * calculé restait "600px" mais `flex:1 1 auto` combiné à l'ancien
 * conteneur flexbox du bandeau, remplacé depuis par une grille, ne
 * signifiait plus rien de cohérent). Base réduite au strict nécessaire
 * (position uniquement) ; le comportement flex+max-width+margin d'origine
 * est désormais scopé exclusivement au repli MOBILE (voir plus bas dans ce
 * fichier), là où le bandeau reste en flexbox — un seul jeu de règles
 * actif par largeur d'écran, plus de conflit possible.
 */
.gallia-global-header-search {
	position: relative;
}

@media screen and (max-width: 782px) {
	.gallia-global-header-search {
		flex: 1 1 auto;
		max-width: 600px;
		margin: 0 auto;
	}
}

/*
 * 🔴 Refonte (correctifs 2026-08-23, 2e passe) : la 1re version posait DEUX
 * boîtes visuellement accolées (champ + bouton bordé séparé par un trait) —
 * décrite en retour comme "un rectangle vide collé à la pilule". Repartie
 * sur UNE SEULE forme pilule continue : la loupe vit désormais À L'INTÉRIEUR
 * du même cadre (positionnée en absolu à gauche), le champ lui laisse la
 * place via padding-left. Le bouton loupe n'a plus ni bordure ni fond
 * propres — un simple déclencheur transparent superposé au champ.
 */
/*
 * 🔴 Refonte des dimensions (correctifs 2026-08-23, 4e passe — "trop
 * petite, loupe qui chevauche le texte") : la version précédente n'avait
 * AUCUNE hauteur explicite (héritée du padding de l'input seul, ~34px
 * effectifs) et une icône à 18px positionnée à 4px du bord, empiétant sur
 * le padding-left du texte (2.6rem = 41.6px, marge insuffisante pour une
 * icône qui commence déjà à 4+32=36px). Valeurs ci-dessous MESURÉES en
 * direct sur youtube.com réel (getBoundingClientRect()/getComputedStyle(),
 * champ de recherche desktop, 1920px) plutôt qu'estimées :
 *   - hauteur totale du champ : 40px
 *   - padding-left du texte (zone dégagée avant le texte) : 16px mesurés
 *     dans le design YouTube à deux boîtes — ici avec l'icône DANS la même
 *     pilule (choix assumé, voir docblock plus haut), la zone icône fait
 *     40px de large (carrée, flush au bord gauche, mêmes proportions que
 *     le bouton loupe réel de YouTube) donc padding-left du texte = 40px
 *     + un espacement de 4px = 44px.
 *   - icône loupe : 24×24px (mesuré exactement sur youtube.com).
 *   - police du champ : 16px, line-height 22px (mesurés).
 */
.gallia-global-header-search-box {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 999px;
	background: #fff;
	box-sizing: border-box;
}

.gallia-global-header-search-box:focus-within {
	border-color: var(--gallia-black, #0F0F0F);
}

/*
 * 🔴 Loupe déplacée à DROITE (correctifs 2026-08-23, 6e passe — capture
 * réelle montrant la loupe à gauche chevauchant le placeholder). Le texte
 * (tapé ou placeholder) ne peut plus jamais passer sous l'icône : sa zone
 * dédiée (40px, voir .gallia-global-header-search-btn) est désormais
 * réservée par le padding-RIGHT de l'input, jamais son padding-left — un
 * texte long remplit l'espace vers la droite mais s'arrête au padding, il
 * ne peut pas déborder sous une icône positionnée plus loin qu'un simple
 * `overflow:hidden` du champ lui-même.
 */
/*
 * 🔴 Bug réel corrigé (correctifs 2026-08-23, 6e passe — trouvé par le
 * test Playwright dédié, PAS par lecture de code) : Astra impose en
 * <style> inline `input[type="search"] { padding: 12px 16px }` — un
 * sélecteur d'attribut compte comme une classe en spécificité, ce qui
 * dépasse une simple classe seule (.gallia-global-header-search-input) et
 * écrasait le padding-right voulu (44px retombait à 16px, recréant le
 * risque de chevauchement que ce correctif devait justement éliminer).
 * Sélecteur scopé au parent ci-dessous (2 classes) pour regagner la
 * priorité sans `!important`.
 */
.gallia-global-header-search-box .gallia-global-header-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 44px 0 16px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	line-height: 22px;
	box-sizing: border-box;
	background: none;
}

/*
 * CORRECTIF (Lot B2, défaut 8, 09/09/2026) — même technique que ci-dessus
 * pour .gallia-header-selector-search-input (voir ce commentaire pour le
 * détail). ACCESSIBILITÉ : repère DÉJÀ présent, conservé sans y toucher —
 * .gallia-global-header-search-box:focus-within (quelques lignes plus
 * haut) colore déjà la bordure de l'enveloppe au focus de ce champ.
 */
/*
 * CORRECTIF 2 (09/09/2026) — [MESURÉ 09/09 par le fondateur, relevé sur
 * le champ ayant réellement le focus] :
 *   outline : none 3px rgb(71,85,105)  -- SAIN, déjà neutralisé ci-dessous.
 *   border  : dotted 1px rgb(4,107,210) -- Astra, jamais touché avant ce
 *             correctif : ma règle d'origine ne neutralisait QUE
 *             `outline`, jamais `border`. Ce champ n'a pas de bordure
 *             propre (`border: none` de base) : neutralisée en entier.
 *
 * CORRECTIF 3 (09/09/2026, défaut 1 signalé toujours présent après
 * déploiement) — [MESURÉ, par lecture du HTML : gallia-global-header.php,
 * ce champ EST `type="search"`, ligne 375/360 selon l'instance] cette
 * règle ci-dessous ne ciblait que UNE classe (spécificité 0-2-0 avec
 * :focus). Or ce fichier documente déjà, quelques lignes plus haut, que
 * `input[type="search"]` compte comme une classe en spécificité chez
 * Astra pour ce même champ (0-2-1 avec :focus, donc supérieur) — MÊME
 * MÉCANISME que le correctif de padding juste au-dessus
 * (.gallia-global-header-search-box .gallia-global-header-search-input),
 * jamais appliqué à CETTE règle-ci jusqu'à présent : c'est la cause la
 * plus probable de la persistance du pointillé. Sélecteur scopé à
 * l'enveloppe, comme pour le padding, jamais !important (rien ne prouve
 * encore que cette 2e tentative échoue).
 */
.gallia-global-header-search-box .gallia-global-header-search-input,
.gallia-global-header-search-box .gallia-global-header-search-input:focus,
.gallia-global-header-search-box .gallia-global-header-search-input:focus-visible,
.gallia-global-header-search-box .gallia-global-header-search-input:active,
.gallia-global-header-search-box .gallia-global-header-search-input:hover {
	outline: 0 none transparent;
	outline-offset: 0;
	border: 0 none transparent;
}

.gallia-global-header-search-input::-moz-focus-outer {
	border: 0;
}

.gallia-global-header-search-btn {
	position: absolute;
	right: 0;
	left: auto;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	border: none;
	border-radius: 0 999px 999px 0;
	background: none;
	color: #606060;
	cursor: pointer;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `:focus`/
 * `:focus-visible` ajoutés — ce <button> n'en avait AUCUN, Astra
 * (`button:focus{color:#fff;background-color:...}`) s'appliquait donc sans
 * concurrent au focus clavier, malgré le survol déjà couvert.
 */
.gallia-global-header-search-btn:hover,
.gallia-global-header-search-btn:focus {
	color: #0f0f0f;
	background: #f2f2f2;
}

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

/* 🔴 Même bug que .gallia-home-card-menu-btn (homepage.css) — largeur SVG
   calculée à 0 malgré l'attribut HTML, taille CSS explicite en correctif.
   24×24 mesuré sur youtube.com (remplace l'estimation 18×18 précédente). */
.gallia-global-header-search-btn svg {
	width: 24px;
	height: 24px;
}

/* .gallia-header-search-results (largeur/position/ombre) déjà définie dans
   gallia-radio-header/header.css, réutilisée telle quelle ; ajustements
   propres au contexte global uniquement ci-dessous. */
.gallia-global-header-search-results {
	left: 0;
	right: 0;
}

/* ---------- Résultats : groupes vidéos/créateurs (structure différente
   des simples liens texte de l'ancienne recherche locale) ---------- */

.gallia-search-result-video {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `color` ajouté
 * (absent — la règle de base n'a qu'une seule classe, spécificité
 * insuffisante face à Astra `a:hover`/`a:focus`, contrairement aux lignes
 * du sélecteur de communauté plus haut qui ont un sélecteur composé à 2
 * classes). `:focus`/`:focus-visible` ajoutés aussi, absents jusqu'ici —
 * même correctif appliqué identiquement aux 3 autres types de résultat
 * juste en dessous (créateur/publication/simple), même bug.
 */
.gallia-search-result-video:hover,
.gallia-search-result-video:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

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

.gallia-search-result-video-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 36px;
	border-radius: 4px;
	object-fit: cover;
	background: #111;
	display: block;
}

.gallia-search-result-video-info {
	min-width: 0;
}

.gallia-search-result-video-title {
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gallia-search-result-video-creator {
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gallia-search-result-creator {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
	font-size: 0.88rem;
}

/* Chantier "motif Astra — passe complète" (11/09/2026) : même correctif que
   .gallia-search-result-video ci-dessus (color manquant, focus absent). */
.gallia-search-result-creator:hover,
.gallia-search-result-creator:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

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

.gallia-search-result-creator-avatar {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	overflow: hidden;
	object-fit: cover;
	background: #e0e0e0;
	display: block;
}

/* ---------- Point 7 : groupes de résultats scopés à la communauté ---------- */

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

/* Chantier "motif Astra — passe complète" (11/09/2026) : même correctif que
   .gallia-search-result-video plus haut (color manquant, focus absent). */
.gallia-search-result-post:hover,
.gallia-search-result-post:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

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

.gallia-search-result-post-author {
	font-size: 0.85rem;
	font-weight: 700;
}

.gallia-search-result-post-excerpt {
	font-size: 0.8rem;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gallia-search-result-simple {
	display: block;
	padding: 0.45rem 0.9rem;
	color: #0f0f0f;
	text-decoration: none;
	font-size: 0.88rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Chantier "motif Astra — passe complète" (11/09/2026) : même correctif que
   .gallia-search-result-video plus haut (color manquant, focus absent). */
.gallia-search-result-simple:hover,
.gallia-search-result-simple:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

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

/* ---------- Groupe de fin de bandeau : lien "Réseau Départemental Gallia" + icônes ---------- */

/*
 * 🔴 Régression corrigée (correctif "régressions du bandeau...", point 1) :
 * ce lien et `.gallia-header-icons` sont désormais des ENFANTS d'un
 * conteneur commun (`.gallia-global-header-end`, voir gallia-global-
 * header.php) plutôt que 2 enfants directs distincts du bandeau — nécessaire
 * pour que la grille à 3 colonnes des pages créateur (plus haut dans ce
 * fichier, point 1) les traite comme une seule case, sans quoi ils se
 * seraient empilés sur 2 lignes. `margin-left:auto` déplacé sur ce
 * conteneur ci-dessous (même effet de poussée à droite qu'avant en mode
 * flexbox, désormais posé sur l'ensemble plutôt que sur ce seul lien).
 */
.gallia-global-header-end {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	flex: 0 0 auto;
}

.gallia-header-regional-network-link {
	white-space: nowrap;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gallia-black, #0f0f0f);
	text-decoration: none;
	padding: 0.4rem 0.6rem;
	border-radius: 8px;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `color` ajouté
 * (absent — règle de base à 1 seule classe, spécificité insuffisante face à
 * Astra `a:hover`/`a:focus`) ; plain `:focus` ajouté (ne couvrait que
 * `:focus-visible`, même trou que le hamburger).
 */
.gallia-header-regional-network-link:hover,
.gallia-header-regional-network-link:focus,
.gallia-header-regional-network-link:focus-visible {
	color: var(--gallia-black, #0f0f0f);
	text-decoration: underline;
}

.gallia-header-regional-network-link:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 2px;
}

/* Masqué sous 783px : le bandeau repasse en flex-wrap (recherche pleine
   largeur, icônes en 1re ligne — voir plus bas dans ce fichier) où ce lien
   n'a plus de place cohérente ; retiré plutôt que superposé, même logique
   déjà appliquée à .gallia-header-creator-selector sous 640px. */
@media screen and (max-width: 782px) {
	.gallia-header-regional-network-link {
		display: none;
	}
}

/*
 * Masthead natif du thème (#masthead, "Menu temporaire Gallia") : VIDÉ de
 * ses 2 SEULES entrées par ce même chantier (points 2/3 — "Radio Jhesus
 * Maria" retiré entièrement, "Réseau Départemental Gallia" déplacé
 * ci-dessus) — confirmé réellement (`wp menu item list`, 0 entrée restante).
 * #masthead lui-même retiré (pas seulement son contenu interne) : vérifié en
 * direct que sa hauteur (80px) restait réservée et VISIBLE malgré un
 * contenu vide (bande blanche fantôme sous le bandeau principal, capture à
 * l'appui) — aucune autre règle CSS/JS du site ne dépend de sa présence ou
 * de sa hauteur pour un calcul de décalage (grep exhaustif sur mu-plugins/,
 * seule une règle de bordure le référençait, déjà retirée par un chantier
 * antérieur). #masthead n'ayant plus aucun rôle de navigation secondaire
 * réel désormais, il est masqué en totalité plutôt qu'une tentative fragile
 * de cibler seulement ses enfants internes (classes Astra profondément
 * imbriquées, sujettes à changer d'une mise à jour de thème à l'autre).
 */
#masthead {
	display: none !important;
}

/*
 * 🔴 Bug réel corrigé (correctif "régressions du bandeau...", point 7) :
 * environ 4cm (~60px) de vide constaté entre le bandeau/la recherche et le
 * vrai début du contenu de page (barre d'onglets, fil...) sur la page
 * créateur — signalé comme une régression du chantier précédent, mais
 * confirmé réel sur TOUTES les pages du site (y compris l'accueil), pas
 * seulement la page créateur : Astra pose `#primary{margin:4em 0}` (thème,
 * main.min.css) — sa propre règle de reset native
 * (`.ast-plain-container.ast-no-sidebar #primary{margin-top:0}`, plus
 * spécifique, censée neutraliser cette marge sur ce layout) matche pourtant
 * bien les classes réelles de <body> mais reste sans effet observable
 * (vérifié en direct : la marge de 60px persiste même après suppression de
 * la règle `#primary{margin:4em 0}` elle-même via la console — la cascade
 * réelle du thème est plus complexe qu'une simple lecture de
 * document.styleSheets ne le montre, `!important` tranche sans dépendre de
 * cette cause exacte). Ce site n'utilise plus aucun espacement de mise en
 * page Astra : le bandeau fixe + son padding-top sur <body> (plus haut dans
 * ce fichier) gèrent déjà entièrement le décalage sous le bandeau — cette
 * marge est un reliquat du thème, jamais voulue ici. Seul margin-TOP est
 * neutralisé (le bas de page n'est pas concerné par ce correctif).
 */
#primary {
	margin-top: 0 !important;
}

/* ---------- Icônes à droite ---------- */

.gallia-global-header .gallia-header-icons {
	flex: 0 0 auto;
}

/*
 * Partie B (chantier identité visuelle, correction post-captures,
 * 2026-08-21) : "Créer un compte", simple texte à gauche de "Se connecter"
 * — jamais un fond coloré ni une bordure, comme demandé explicitement
 * (contrairement à .gallia-header-login-btn, qui reste .gallia-btn.gallia-
 * btn-cta inchangé). <button> plutôt qu'un <a href> (voir le docblock PHP
 * dans gallia-global-header.php), stylé pour ne RIEN garder de visuel de
 * bouton — transparent, sans bordure, police héritée du bandeau.
 */
/*
 * Bouton "Se connecter" — pilule CONTOURNÉE (chantier "Page d'accueil façon
 * YouTube", 2026-08-23), remplace l'ancien style plein .gallia-btn-cta.
 * Le lien texte "Créer un compte" a été retiré (voir gallia-global-header.php),
 * cette règle .gallia-header-signup-link n'a donc plus d'appelant — laissée
 * ici sans effet si jamais réintroduite un jour, pas de suppression forcée.
 */
.gallia-header-signup-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 0.85rem;
	color: #444;
	cursor: pointer;
	white-space: nowrap;
}

.gallia-header-signup-link:hover {
	color: #0f0f0f;
	text-decoration: underline;
}

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

.gallia-header-login-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 36px;
	padding: 0 0.9rem;
	border-radius: 999px;
	border: 1px solid #ccc;
	background: #fff;
	color: var(--gallia-black, #0F0F0F);
	font-family: var(--gallia-font);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.gallia-header-login-btn:hover,
.gallia-header-login-btn:focus {
	background: #f5f5f5;
	/* 🔴 Même bug que .gallia-filter-chips-scroll-btn (gallia-filter-chips/
	   chips.css) — `button:hover`/`button:focus` d'Astra (élément + pseudo-
	   classe) dépasse en spécificité une règle de base à une seule classe
	   pour border-color précisément, jamais couvert par cette règle avant
	   ce correctif. */
	border-color: #ccc;
	/*
	 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `color`
	 * ajouté — même bug que ci-dessus pour `border-color`, jamais corrigé
	 * pour `color` jusqu'ici : Astra (`button:hover,button:focus{color:#fff}`)
	 * restait seul sur cette propriété (texte blanc sur fond gris clair,
	 * illisible — exactement le défaut déjà diagnostiqué et corrigé pour
	 * .gallia-header-creator-selector-link plus haut dans ce fichier, jamais
	 * reporté ici jusqu'à cette passe complète).
	 */
	color: var(--gallia-black, #0F0F0F);
}

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

/* "+ Créer" — icône + texte, même gap que le bouton "Se connecter". */
.gallia-header-create-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* ---------- Bascule "Mode sombre" du menu avatar (visuelle uniquement) ---------- */

.gallia-header-dropdown-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.88rem;
	color: #0f0f0f;
	text-align: left;
	cursor: pointer;
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : `color` ajouté
 * (absent, base 1 classe insuffisante face à Astra) ; `:focus`/
 * `:focus-visible` ajoutés, absents jusqu'ici.
 */
.gallia-header-dropdown-toggle:hover,
.gallia-header-dropdown-toggle:focus {
	background: #f7f7f7;
	color: #0f0f0f;
}

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

.gallia-header-dropdown-toggle-pill {
	width: 30px;
	height: 17px;
	border-radius: 999px;
	background: #ccc;
	position: relative;
	flex: 0 0 auto;
	transition: background 0.15s ease-in-out;
}

.gallia-header-dropdown-toggle-pill::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 13px;
	height: 13px;
	border-radius: 999px;
	background: #fff;
	transition: transform 0.15s ease-in-out;
}

.gallia-header-dropdown-toggle.is-checked .gallia-header-dropdown-toggle-pill {
	background: var(--gallia-black, #0F0F0F);
}

.gallia-header-dropdown-toggle.is-checked .gallia-header-dropdown-toggle-pill::after {
	transform: translateX(13px);
}

/*
 * Volontairement PAS de bascule "recherche sur sa propre ligne" façon
 * ancien bandeau local (qui passait par height:auto en dessous de 640px) :
 * ce bandeau est désormais un composant FIXE dont la hauteur
 * (--gallia-header-height) est réutilisée ailleurs (padding-top du body,
 * position du menu latéral — voir gallia-left-sidebar/sidebar.css) pour
 * réserver l'espace exact sous le bandeau. Une hauteur variable selon la
 * largeur d'écran aurait exigé le même genre de mesure JS en direct déjà
 * nécessaire ailleurs pour la bannière de vérification email (voir
 * sidebar.js) — évité ici par un choix de mise en page plus simple : la
 * recherche se contente de RÉTRÉCIR (flex-basis naturel) sur petit écran,
 * toujours sur une seule ligne, hauteur du bandeau constante en toute
 * circonstance.
 */
@media screen and (max-width: 480px) {
	.gallia-global-header {
		padding: 0 0.75rem;
		gap: 0.5rem;
	}

	.gallia-global-header-search {
		min-width: 0;
	}
}

/*
 * 🔴 Bug réel trouvé et corrigé (2026-08-21, session suivante) : à 390px
 * (largeur mobile testée), le sélecteur de créateur (Partie D, ~160px de
 * large avec "Radio Jhesus Maria") poussait le bouton "Se connecter" hors
 * de l'écran — vérifié réellement via getBoundingClientRect() (bord droit
 * du bouton à 406px sur un viewport de 390px, alors même que la recherche
 * était déjà réduite à 0px de large). Masqué sur mobile/tablette étroite :
 * le nom du créateur reste visible juste en dessous (H1/carte de la page),
 * aucune perte d'information réelle, seulement une simplification de
 * densité d'en-tête déjà pratiquée ailleurs sur ce bandeau (recherche qui
 * rétrécit, hamburger qui apparaît).
 */
@media screen and (max-width: 640px) {
	.gallia-header-creator-selector {
		display: none;
	}
}


/* =======================================================================
 * CLOCHE 1 — PANNEAU DE NOTIFICATIONS (chantier 2026-09-03)
 * =====================================================================
 *
 * Le panneau est un menu déroulant sous la cloche. Il n'y a pas de page
 * dédiée : c'est LA surface de notifications.
 *
 * POURQUOI ICI ET PAS DANS gallia-radio-header/header.css : cette dernière
 * porte la coquille partagée par les trois menus (.gallia-header-dropdown,
 * .gallia-header-badge, .gallia-header-icon-btn), réutilisée telle quelle par
 * l'enveloppe et le menu avatar. Y ajouter un habillage propre aux
 * notifications l'aurait alourdie pour ses deux autres usagers. Toutes les
 * règles ci-dessous sont donc NOUVELLES, aucune n'en redéfinit une existante
 * — sauf la largeur du conteneur, traitée juste en dessous.
 * ===================================================================== */

/*
 * Mesuré (gallia-radio-header/header.css:237-249) : .gallia-header-dropdown
 * impose min-width 220px / max-width 320px. Trop étroit pour une ligne faite
 * d'un avatar et de deux lignes de texte.
 *
 * Le sélecteur composé ci-dessous vaut 0-2-0 et l'emporte donc naturellement
 * sur .gallia-header-dropdown (0-1-0) : AUCUN !important n'est nécessaire, et
 * la feuille partagée n'est pas touchée. `max-width` est réécrit explicitement
 * — sans ça, les 320px hérités auraient continué de plafonner la largeur et
 * seul `min-width` aurait bougé, un demi-effet difficile à diagnostiquer.
 */
.gallia-header-dropdown.gallia-notifs-panel {
	width: 380px;
	min-width: 380px;
	max-width: min(92vw, 420px);
	padding: 0;
	overflow: hidden;
}

/*
 * Hauteur d'UNE ligne, en un seul endroit. Le panneau doit faire au MAXIMUM
 * sept lignes et s'adapter en dessous — deux notifications ne doivent pas
 * laisser un grand vide.
 *
 * Pour que « sept lignes » soit une hauteur exacte et non une approximation,
 * la ligne a une hauteur FIXE et ses deux lignes de texte sont tronquées à une
 * ligne chacune. Un seuil en pixels choisi à la main aurait dérivé au premier
 * changement de police ; ici la même variable sert à la ligne et au plafond du
 * conteneur, les deux ne peuvent pas diverger.
 */
.gallia-notifs {
	--gallia-notifs-row-h: 64px;
	display: block;
}

/* ---------- En-tête du panneau ---------- */

.gallia-notifs-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--gallia-border, #e4e4e4);
}

.gallia-notifs-title {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--gallia-black, #0f0f0f);
	margin-right: auto;
}

/*
 * « Tout marquer comme lu » et le bouton de filtre sont des <button> bruts.
 *
 * 🔴 Même piège qu'au chantier 2026-08-23, documenté dans
 * gallia-radio-header/header.css : Astra imprime en <style> inline un reset
 * `button, .ast-button, … { color: #fff }` qui frappe TOUT <button> du site.
 * Un bouton texte sans `color` explicite serait blanc sur blanc — invisible,
 * sans rien pour le signaler. Les deux règles ci-dessous posent donc `color`
 * explicitement, à la spécificité de classe, ce qui l'emporte sur le sélecteur
 * d'élément d'Astra sans aucun !important.
 */
.gallia-notifs-clear,
.gallia-notifs-filter-btn {
	background: none;
	border: none;
	padding: 0.25rem 0.4rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1.2;
	color: var(--gallia-black, #0f0f0f);
}

/*
 * 🔴 Chantier "motif Astra — passe complète" (11/09/2026) : plain `:focus`
 * ajouté ici — la règle `:focus-visible` juste en dessous ne couvre QUE le
 * focus clavier ; un clic laisse ces boutons *focus* sans être forcément
 * *focus-visible* (même cause exacte que le hamburger), Astra restait donc
 * seul sur `background`/`color` dans ce cas précis.
 */
.gallia-notifs-clear:hover,
.gallia-notifs-clear:focus,
.gallia-notifs-filter-btn:hover,
.gallia-notifs-filter-btn:focus {
	background: #f0f0f0;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-notifs-clear:focus-visible,
.gallia-notifs-filter-btn:focus-visible,
.gallia-notifs-filter-item:focus-visible,
.gallia-notifs-link:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: -2px;
}

.gallia-notifs-clear {
	color: #555;
	white-space: nowrap;
}

.gallia-notifs-filter {
	position: relative;
	flex: 0 0 auto;
}

.gallia-notifs-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--gallia-border, #e4e4e4);
	white-space: nowrap;
}

.gallia-notifs-filter-caret {
	font-size: 0.7rem;
	line-height: 1;
}

/*
 * Le menu de filtres sort du panneau, qui est lui-même en overflow:hidden
 * pour que ses coins arrondis rognent la liste. Il est donc positionné en
 * absolu DANS le panneau et le panneau lui laisse la place : c'est pour ça que
 * le plafond de hauteur porte sur la liste (.gallia-notifs-list) et non sur le
 * panneau entier.
 */
.gallia-notifs-filter-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 10;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	min-width: 200px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.gallia-notifs-filter-menu[hidden] {
	display: none;
}

.gallia-notifs-filter-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.45rem 0.8rem;
	font-size: 0.85rem;
	color: var(--gallia-black, #0f0f0f);
}

/* Chantier "motif Astra — passe complète" (11/09/2026) : même correctif que
   .gallia-notifs-clear/.gallia-notifs-filter-btn plus haut (plain :focus
   manquant, seul :focus-visible était couvert plus bas dans ce fichier). */
.gallia-notifs-filter-item:hover,
.gallia-notifs-filter-item:focus {
	background: #f7f7f7;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-notifs-filter-item[aria-current="true"] {
	font-weight: 700;
}

/* ---------- La liste ---------- */

/*
 * Sept lignes au maximum, et pas un pixel de plus. En dessous de sept, la
 * liste prend exactement la hauteur de son contenu : aucun min-height n'est
 * posé, deux notifications occupent donc deux lignes et le panneau se referme
 * juste en dessous.
 *
 * La barre de défilement est à droite, celle du navigateur — pas de barre
 * dessinée à la main, qui aurait dû être re-testée à chaque plateforme.
 */
.gallia-notifs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: calc(7 * var(--gallia-notifs-row-h));
	overflow-y: auto;
	overflow-x: hidden;
}

.gallia-notifs-item {
	border-bottom: 1px solid #f0f0f0;
}

.gallia-notifs-item:last-child {
	border-bottom: none;
}

.gallia-notifs-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: var(--gallia-notifs-row-h);
	box-sizing: border-box;
	padding: 0 0.9rem;
	text-decoration: none;
	color: var(--gallia-black, #0f0f0f);
}

/* Chantier "motif Astra — passe complète" (11/09/2026) : même correctif que
   .gallia-notifs-filter-item ci-dessus (plain :focus manquant). */
.gallia-notifs-link:hover,
.gallia-notifs-link:focus {
	background: #f7f7f7;
	color: var(--gallia-black, #0f0f0f);
}

.gallia-notifs-avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	object-fit: cover;
	display: block;
}

.gallia-notifs-avatar-vide {
	background: #e4e4e4;
}

/*
 * min-width: 0 est indispensable : sans lui, un élément flex refuse de
 * rétrécir en dessous de la largeur de son contenu, et text-overflow n'a
 * jamais l'occasion de s'appliquer — le texte déborderait au lieu d'être
 * coupé. C'est le piège classique de la troncature en flexbox.
 */
.gallia-notifs-body {
	min-width: 0;
	flex: 1 1 auto;
	display: block;
}

/*
 * Une seule ligne pour chacune des deux lignes, coupée par des points de
 * suspension. On utilise text-overflow et JAMAIS -webkit-line-clamp : sur le
 * lot /video/ du 2026-09-02, line-clamp a laissé apparaître ses propres points
 * de suspension natifs par-dessus le rendu voulu, un défaut visible en
 * capture. Ici la hauteur de ligne est fixe, une troncature simple suffit et
 * ne réserve aucune surprise.
 */
.gallia-notifs-line1,
.gallia-notifs-line2 {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gallia-notifs-line1 {
	font-size: 0.85rem;
	line-height: 1.35;
}

.gallia-notifs-nom {
	font-weight: 700;
}

.gallia-notifs-nature {
	color: #555;
}

.gallia-notifs-temps {
	color: #888;
	font-size: 0.78rem;
}

.gallia-notifs-line2 {
	font-size: 0.8rem;
	line-height: 1.35;
	color: #555;
}

@media screen and (max-width: 640px) {
	/*
	 * Le panneau est ancré à droite de la cloche (règle héritée
	 * .gallia-header-dropdown { right: 0 }). À 380px de large sur un écran de
	 * 390px il resterait dans l'écran, mais sans marge : on le laisse suivre
	 * la largeur disponible plutôt que de le fixer.
	 */
	.gallia-header-dropdown.gallia-notifs-panel {
		width: auto;
		min-width: 0;
		max-width: 92vw;
	}
}