/*
 * Gallia – Page de visionnage /video/
 * Chantier B, 2026-08-31.
 *
 * Registre visuel repris de l'onglet Contenu du Studio (chantier A) :
 * cartes à fond blanc et filet fin, boutons rectangulaires à rayon 4px,
 * accent jaune #F8D481, noir #0F0F0F, rouge #DC2626 réservé au destructif.
 * Aucune valeur inventée : les mêmes que celles mesurées sur les captures.
 */

.gallia-watch {
	--gw-noir: #0f0f0f;
	--gw-jaune: #f8d481;
	--gw-filet: #e0e0e0;
	--gw-gris: #606060;
	--gw-gris-clair: #f2f2f2;
	--gw-rouge: #dc2626;
	/*
	 * Bleu de lien (lot V4). Ce n'est PAS une couleur nouvelle : c'est celle
	 * que les <a> de la page adoptent déjà au survol, relevée le 01/09/2026
	 * (rgb(4,92,180)) et dont la lisibilité a été constatée sur fond clair.
	 * Nommée ici pour cesser d'être une valeur implicite héritée du thème.
	 */
	--gw-lien: rgb(4, 92, 180);

	/*
	 * Largeur de la colonne de suggestions. MESURÉE sur la capture YouTube du
	 * 01/09/2026 (fenêtre 1920 px, menu replié) : colonne de x≈1370 à x≈1900,
	 * soit ≈530 px. L'ancienne valeur de 360 px n'avait pas été mesurée.
	 */
	--gw-colonne: 500px;
	--gw-gouttiere: 24px;

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gw-gouttiere);
	align-items: start;
	/*
	 * Plus de max-width ici. Elle ne servait à rien : le conteneur du thème
	 * (`.ast-container`, max-width 1240px) plafonnait déjà la grille bien
	 * avant les 1400 px déclarés — mesuré sur la capture, la grille entière
	 * occupait ≈1197 px. La contrainte est levée en amont (voir le bloc
	 * « conteneur du thème » plus bas), pas ici.
	 */
	margin: 0 auto;

	/*
	 * Marge haute (écart E20) — POSÉE SUR LE CONTENEUR DE LA GRILLE.
	 *
	 * 🔴 Régression réelle du lot V2b, corrigée ici le 01/09/2026 : les 24 px
	 * avaient été posés sur `.gallia-video-embed`, c'est-à-dire sur UN SEUL
	 * enfant de la grille. Le lecteur descendait de 24 px, la colonne de
	 * suggestions restait en place, et l'alignement — parfait à 0 px après V1 —
	 * se retrouvait décalé de 24 px, la colonne démarrant PLUS HAUT que le
	 * lecteur. Soit l'inverse de la référence, où les deux commencent au même
	 * niveau. Mesuré : colonne y=60, lecteur y=84.
	 *
	 * La leçon : un espacement qui doit valoir pour TOUTE une grille se pose
	 * sur la grille, jamais sur l'un de ses enfants — sinon les colonnes
	 * cessent de descendre ensemble.
	 *
	 * PADDING ET NON MARGIN, délibérément : une marge haute sur cet élément
	 * pourrait fusionner avec celle de son parent (fusion des marges
	 * adjacentes), et l'espace se retrouverait posé sur `.entry-content` au
	 * lieu de la grille. Le résultat visuel serait proche mais le mécanisme
	 * incertain, donc invérifiable. Un padding ne fusionne jamais : les 24 px
	 * sont là, à cet endroit, quoi qu'il arrive au-dessus.
	 */
	padding-top: 24px;
}

@media (min-width: 1000px) {
	.gallia-watch {
		grid-template-columns: minmax(0, 1fr) var(--gw-colonne);
	}
}

.gallia-watch-primary {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * CONTENEUR DU THÈME — neutralisation de la colonne de lecture
 * ---------------------------------------------------------------------------
 * Même motif, aux mêmes sélecteurs, que celui déjà employé DEUX FOIS sur ce
 * projet : `body.gallia-platform-fullwidth` (homepage.css:50-63) et
 * `body.gallia-studio-page` (studio.css:29-30). Rien de nouveau n'est
 * inventé ici, c'est le troisième usage du même motif éprouvé.
 *
 * Deux ancêtres rétrécissent la grille, tous deux mesurés à l'époque du
 * chantier d'accueil et redocumentés dans homepage.css :
 *   1. `.entry-content[data-ast-blocks-layout] > *` — règle Astra de mise en
 *      page bloc, ≈1200 px, plus spécifique qu'un sélecteur de classe simple.
 *   2. `.site-content > .ast-container` — conteneur de mise en page du thème,
 *      max-width 1240px, centré par `margin:auto`.
 *
 * Scopé à `body.gallia-watch-page` (posée par gallia-video-watch.php) : la
 * colonne de lecture classique reste intacte partout ailleurs.
 */
body.gallia-watch-page .site-content > .ast-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.entry-content[data-ast-blocks-layout] > .gallia-watch {
	max-width: none;
}

/* ---------- lecteur ---------- */

/*
 * 🔴 CAUSE RACINE DU LECTEUR À 300×150 (mesuré le 01/09/2026, corrigé le
 * jour même).
 *
 * `.gallia-video-embed` est rendu par gallia_video_watch_player(), qui
 * délègue au shortcode [gallia_video] (gallia-peertube-embed.php). Or les
 * règles qui DIMENSIONNENT ce bloc — width:100% et aspect-ratio:16/9 — sont
 * injectées par gallia_video_embed_enqueue_style(), dont la garde est :
 *
 *     has_shortcode( $post->post_content, 'gallia_video' )
 *
 * Le contenu de la page /video/ est `[gallia_video_watch]`, PAS
 * `[gallia_video]`. La garde échoue, la feuille inline n'est jamais chargée,
 * et l'iframe retombe sur sa taille INTRINSÈQUE par défaut : 300×150 px.
 * C'est exactement ce que mesurait la capture (299×147). Aucune erreur, aucun
 * symptôme pointant vers la cause — la même famille de panne que l'entrée 3
 * de GOTCHAS.md.
 *
 * POURQUOI ON NE TOUCHE PAS À LA GARDE de gallia-peertube-embed.php : ce
 * fichier sert les LEÇONS LifterLMS. Élargir sa condition ferait porter à la
 * page de leçon le risque d'une régression pour un besoin qui n'est pas le
 * sien. Les règles sont donc posées ICI, scopées à `.gallia-watch`, sans
 * aucun effet hors de la page de visionnage.
 */
.gallia-watch .gallia-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	/*
	 * Aucune marge haute ici : elle appartient au conteneur de la grille
	 * (`.gallia-watch`, padding-top), pour que le lecteur et la colonne de
	 * suggestions descendent ENSEMBLE. La poser ici avait décalé les deux
	 * colonnes de 24 px l'une par rapport à l'autre — voir l'explication
	 * complète en tête de fichier.
	 *
	 * Valeur retenue pour cet espace : 24 px. Sur la capture de référence
	 * (1920 px de large), l'espace apparent entre le bas de l'en-tête et le
	 * haut du lecteur est d'environ 25 px, avec une incertitude estimée à
	 * ±5 px — la capture est redimensionnée et la limite basse de l'en-tête
	 * n'y est pas franchement lisible. 24 px tombe dans cette fourchette ET
	 * appartient à l'échelle d'espacement déjà employée dans cette feuille
	 * (16 / 24 / 32), ce qui vaut mieux qu'un 25 px isolé tiré d'une mesure
	 * approximative.
	 */
	margin: 0 0 16px;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.gallia-watch .gallia-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- titre ---------- */

/*
 * 🔴 Écart corrigé le 2026-09-03 : alignement de la typographie de /video/
 * sur celle de la page créateur (gallia-radio-sale-page/sale.css). MESURÉ des
 * deux côtés avant de changer quoi que ce soit — .gallia-sale-main h1
 * (sale.css:486-492) : 22px/700/line-height 1.3. Ici : 20px/700/line-height
 * 1.3 — seule la taille divergeait, graisse et hauteur de ligne déjà
 * identiques. Couleur INCHANGÉE (var(--gw-noir), déjà égal à
 * var(--gallia-black) en valeur hexadécimale) : la consigne porte sur
 * famille/tailles/graisses/hauteurs de ligne, pas sur la couleur. Aucune
 * font-family déclarée ici NI dans sale.css : les deux héritent déjà de la
 * même police de thème, rien à aligner sur ce point.
 */
.gallia-watch-title {
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--gw-noir);
	margin: 0 0 12px;
}

/* ---------- barre créateur + actions ---------- */

/*
 * Rang unique créateur + actions (lot V2, écart E3c).
 *
 * La structure était déjà correcte — flex, space-between. Ce qui la faisait
 * déborder sur trois rangs, ce n'était pas la mise en page mais son CONTENU :
 * la barre « Membres / En ligne / Admins » et les trois pavés d'adhésion sur
 * deux lignes. Les deux disparaissent avec variant="compact" (E3a, E3b), et
 * le rang unique s'obtient alors sans forcer quoi que ce soit.
 *
 * Le flex-wrap est CONSERVÉ volontairement : sous une certaine largeur, deux
 * rangs valent mieux qu'un rang illisible. On ne l'interdit pas, on fait
 * simplement en sorte qu'il ne se déclenche plus sur un écran de bureau.
 */
.gallia-watch-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
}

.gallia-watch-creator {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	/* Prend la place restante et cède la première en cas de manque — les
	   actions, elles, ne se compriment jamais. */
	flex: 1 1 auto;
}

.gallia-watch-actions {
	flex: 0 0 auto;
}

.gallia-watch-creator-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.gallia-watch-creator-identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * Nom du créateur (lot V2, écart E11).
 *
 * Deux défauts corrigés, tous deux visibles sur la capture d'avant V2 :
 *   - il s'affichait SOULIGNÉ en permanence, à cause de la même règle Astra
 *     `.ast-single-post .entry-content a` documentée plus bas pour les
 *     boutons. Le soulignement est désormais réservé au survol, comme sur la
 *     référence ;
 *   - il se repliait sur DEUX LIGNES (« Radio Jhesus / Maria »), faute de
 *     place. Le rang unique de V2 lui en rend, et la troncature par points de
 *     suspension garantit qu'un nom très long ne cassera plus la ligne — c'est
 *     aussi le comportement de la référence.
 */
.gallia-watch-creator-name {
	font-weight: 600;
	color: var(--gw-noir);
	text-decoration: none;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/*
 * 🔴 CORRECTIF DE SPÉCIFICITÉ (lot V2b, écart E11) — mon premier essai avait
 * échoué, et l'arithmétique dit exactement pourquoi.
 *
 *   Astra    : .ast-single-post .entry-content a   → 0-2-1
 *              (2 classes + 1 SÉLECTEUR D'ÉLÉMENT)
 *   V2 (moi) : .entry-content .gallia-watch-creator-name → 0-2-0
 *              (2 classes, pas d'élément)
 *
 * 0-2-1 l'emporte sur 0-2-0 quel que soit l'ordre de chargement des
 * feuilles. J'avais compté les classes et oublié le `a`. Mesuré ensuite en
 * production : text-decoration-line calculé = « underline ».
 *
 * Correctif : 0-3-1, strictement supérieur — une classe de <body>, une classe
 * de conteneur, une classe de composant, et le sélecteur d'élément `a`.
 * L'ordre de chargement ne joue plus aucun rôle, le résultat est déterministe.
 *
 * PAS DE !important, et c'est délibéré : ce fichier en contient zéro
 * aujourd'hui, et une spécificité suffisante règle le problème sans amorcer
 * la surenchère qui rend les feuilles impossibles à corriger ensuite. Le jour
 * où un !important deviendrait vraiment inévitable ici, il faudra le dire et
 * l'expliquer, pas le poser en silence.
 */
body.gallia-watch-page .entry-content a.gallia-watch-creator-name,
body.gallia-watch-page .entry-content a.gallia-watch-btn {
	text-decoration: none;
}

/*
 * ---------------------------------------------------------------------------
 * RÈGLE TRANSVERSALE (lot V4) : AUCUN SOULIGNEMENT SUR /video/, JAMAIS
 * ---------------------------------------------------------------------------
 * Ni au repos, ni au survol, ni au focus, ni au clic, ni après visite.
 * Aucune exception.
 *
 * Le soulignement n'existe sur ce site que sur les ONGLETS de la page
 * créateur, où il marque l'onglet actif. La page de visionnage n'a pas
 * d'onglets : il n'y a donc rien à y marquer.
 *
 * Les correctifs précédents (V2b) ne couvraient que le repos et le survol.
 * Le relevé du 01/09/2026 a montré qu'il restait un cas — le nom du créateur,
 * souligné au survol — et que :active et :visited n'avaient jamais été
 * traités.
 *
 * Spécificité (0,3,1) : une classe de <body>, une de conteneur, une de
 * composant, plus l'élément `a`. Elle bat la règle d'Astra
 * `.ast-single-post .entry-content a` (0,2,1) quel que soit l'ordre de
 * chargement. Aucun !important.
 *
 * `:where()` sur la liste d'états ne change pas la spécificité du sélecteur
 * — elle reste celle de la partie de gauche.
 */
body.gallia-watch-page .entry-content a,
body.gallia-watch-page .entry-content a:hover,
body.gallia-watch-page .entry-content a:focus,
body.gallia-watch-page .entry-content a:focus-visible,
body.gallia-watch-page .entry-content a:active,
body.gallia-watch-page .entry-content a:visited,
body.gallia-watch-page .gallia-watch a,
body.gallia-watch-page .gallia-watch a:hover,
body.gallia-watch-page .gallia-watch a:focus,
body.gallia-watch-page .gallia-watch a:active,
body.gallia-watch-page .gallia-watch a:visited,
body.gallia-watch-page .gallia-comments a,
body.gallia-watch-page .gallia-comments a:hover,
body.gallia-watch-page .gallia-comments a:focus,
body.gallia-watch-page .gallia-comments a:active,
body.gallia-watch-page .gallia-comments a:visited,
body.gallia-watch-page .gallia-share-modal a,
body.gallia-watch-page .gallia-share-modal a:hover,
body.gallia-watch-page .gallia-share-modal a:focus,
body.gallia-watch-page .gallia-share-modal a:active {
	text-decoration: none;
}

/*
 * NOM DU CRÉATEUR (écart B4) : bleu au survol et au clic, JAMAIS souligné.
 * Le soulignement est déjà supprimé par la règle transversale ci-dessus ;
 * ici on ne fixe que la couleur, et pour tous les états — c'est :active qui
 * restait bleu ET souligné avant ce lot.
 */
body.gallia-watch-page .entry-content a.gallia-watch-creator-name:hover,
body.gallia-watch-page .entry-content a.gallia-watch-creator-name:focus,
body.gallia-watch-page .entry-content a.gallia-watch-creator-name:focus-visible,
body.gallia-watch-page .entry-content a.gallia-watch-creator-name:active {
	color: var(--gw-lien);
}

.gallia-watch-creator-subs {
	font-size: 12px;
	color: var(--gw-gris);
}

.gallia-watch-subscribe {
	margin-left: 4px;
	flex: 0 0 auto;
}

/*
 * Forme compacte du widget d'abonnement (lot V2, écart E3a).
 *
 * ⚠️ ÉCART DÉLIBÉRÉ ET ARBITRÉ (01/09/2026) : la référence emploie un bouton
 * NOIR PLEIN pour « S'abonner ». Gallia garde le JAUNE DE MARQUE #F8D481,
 * porté par la classe partagée .gallia-btn-cta — exactement le même bouton
 * que sur la page créateur.
 *
 * Raison, identique à celle de l'arbitrage sur le rayon des boutons : LA
 * COHÉRENCE DE PLATEFORME L'EMPORTE SUR LA FIDÉLITÉ À LA RÉFÉRENCE. Un
 * visiteur qui passe de la page créateur à la page de visionnage doit
 * reconnaître le même bouton pour la même action.
 *
 * Ce n'est donc PAS une approximation en attente de correction. Ne pas le
 * passer en noir en croyant améliorer la fidélité — pas plus qu'on ne
 * rétablira la pilule sur la ligne d'actions.
 *
 * Ci-dessous, on ne règle que la mise en page : un seul bouton, sur une seule
 * ligne, sans l'empilement vertical de la page créateur.
 */
.gallia-subscribe-buttons-compact {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.gallia-subscribe-buttons-compact .gallia-btn {
	margin: 0;
	white-space: nowrap;
	width: auto;
}

/* Mention « Abonné » : un état, pas un bouton — donc aucun signe cliquable. */
.gallia-subscribe-state {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gw-gris);
	background: var(--gw-gris-clair);
	border-radius: 4px;
}

/* ---------- actions sur la vidéo ---------- */

.gallia-watch-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/*
 * Groupe de notation (lot V2, écart E6).
 *
 * ⚠️ ÉCART DÉLIBÉRÉ ET ASSUMÉ PAR RAPPORT À LA RÉFÉRENCE : YouTube emploie
 * une PILULE (rayon ≈18px) pour ce groupe et pour tous les boutons de la
 * ligne d'actions. La charte du projet impose 4px, et l'arbitrage du
 * 01/09/2026 a tranché en faveur de la charte, pour rester cohérent avec la
 * page créateur et le reste du site. Ce n'est donc PAS une approximation à
 * corriger un jour : c'est une décision. Ne pas « rétablir » la pilule en
 * croyant améliorer la fidélité.
 *
 * Ce qui EST repris de la référence : le fond gris plein d'un seul tenant,
 * l'absence de contour extérieur, et le filet vertical unique séparant les
 * deux moitiés.
 */
.gallia-watch-rate {
	display: flex;
	align-items: stretch;
	background: var(--gw-gris-clair);
	border: 0;
	border-radius: 4px;
	overflow: hidden;
}

.gallia-watch-rate .gallia-watch-btn {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.gallia-watch-rate .gallia-watch-like {
	border-right: 1px solid #d9d9d9;
}

.gallia-watch-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gw-noir);
	/* Fond gris plein, sans contour, comme la référence. Rayon 4px, comme la
	   charte. Voir l'avertissement ci-dessus. */
	background: var(--gw-gris-clair);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .12s ease;
}

/*
 * SURVOL DE LA LIGNE D'ACTIONS (lot V4, écart B3).
 *
 * 🔴 Défaut mesuré le 01/09/2026 : au survol, les trois <button> — like,
 * dislike, Partager — passaient en BLANC sur fond clair, donc illisibles.
 * Les deux <a> voisins — Enregistrer, Télécharger — se comportaient bien.
 * L'ASYMÉTRIE entre <button> et <a> désignait la cause : une règle d'Astra
 * qui vise l'ÉLÉMENT `button`, imprimée en <style> dans le <head>.
 *
 * Notre règle ne déclarait AUCUNE `color` au survol : rien ne s'opposait à
 * Astra, donc Astra passait. Il a suffi de la déclarer —
 * `.gallia-watch-btn:hover` pèse (0,2,0) et bat `button:hover` (0,1,1).
 * Aucun !important : un bloc <style> dans le <head> reste une feuille
 * ordinaire, la spécificité s'y applique normalement.
 *
 * VALEUR : le bleu déjà en usage sur le site, celui que les <a> adoptent
 * naturellement au survol et dont la lisibilité a été constatée au relevé.
 * Le fond reste gris clair. Aucune couleur nouvelle n'est introduite.
 *
 * LES QUATRE ÉTATS sont couverts, pas seulement :hover — c'est :active qui
 * échappait au correctif de V2b.
 */
.gallia-watch-btn:hover,
.gallia-watch-btn:focus,
.gallia-watch-btn:focus-visible,
.gallia-watch-btn:active {
	background: var(--gw-gris-clair);
	color: var(--gw-lien);
}

/*
 * L'état ACTIF reste blanc sur noir dans tous les cas : c'est un état plein
 * et volontaire, pas un survol. Déclaré après la règle ci-dessus, et pour
 * chaque état, afin qu'elle ne le repeigne pas en bleu.
 */
.gallia-watch-btn.is-active,
.gallia-watch-btn.is-active:hover,
.gallia-watch-btn.is-active:focus,
.gallia-watch-btn.is-active:focus-visible,
.gallia-watch-btn.is-active:active {
	background: var(--gw-noir);
	color: #fff;
}

.gallia-watch-btn[disabled] {
	opacity: .55;
	cursor: default;
}

/*
 * Astra impose `.ast-single-post .entry-content a { text-decoration:
 * underline }` — spécificité 0-2-1, qui bat le `text-decoration: none`
 * ci-dessus (0-1-0). C'est la collision déjà documentée plusieurs fois sur ce
 * projet (homepage.css, community.css, shorts.css). Le sélecteur composé
 * ci-dessous repasse devant sans recourir à !important.
 *
 * Sans cette règle, « Enregistrer » et « Télécharger » s'affichent soulignés
 * comme du texte de lien — écart E12, visible sur la capture d'avant V2.
 */
.entry-content .gallia-watch-btn,
.entry-content .gallia-watch-btn:hover,
.entry-content .gallia-watch-btn:focus {
	text-decoration: none;
}

/* Icônes vectorielles (écart E13) — elles remplacent les émojis, dont le
   rendu, la couleur et l'alignement dépendaient de la police système. */
.gallia-watch-btn .gallia-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.gallia-watch-btn .gallia-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/*
 * Règle d'affichage validée : à zéro, icône seule, aucun chiffre. Le nombre
 * reste dans le DOM pour que le script n'ait qu'à le mettre à jour — c'est
 * la classe qui décide de sa visibilité, jamais une recomposition du
 * balisage. La largeur du bouton change donc au premier vote : c'est voulu
 * et cohérent avec YouTube.
 */
.gallia-count.is-zero {
	display: none;
}

.gallia-watch-share {
	display: inline-flex;
	align-items: center;
}

.gallia-watch-share .heateor_sss_sharing_container {
	margin: 0 !important;
}

/* ---------- description ---------- */

/*
 * 🔴 Écart corrigé le 2026-09-03 : même alignement que .gallia-watch-title
 * ci-dessus, pour le corps de texte cette fois. MESURÉ — .gallia-sale-main >
 * p, li (sale.css:470-474) : 16px/400 (implicite)/line-height 1.5. Ici :
 * 14px, hérité par .gallia-watch-desc-body qui pose déjà line-height:1.5
 * (:610) et aucune graisse (donc 400 par défaut, déjà identique) — seule la
 * taille divergeait. Couleur et famille inchangées, mêmes raisons que ci-
 * dessus.
 */
/*
 * 🔴 DÉFAUT 3 — 2026-09-03, comparaison directe de deux captures (YouTube,
 * Gallia). Sur Gallia ce bloc s'étirait sur toute la largeur du lecteur ;
 * sur YouTube il s'arrête nettement avant, laissant un espace vide à
 * droite sur toute sa hauteur. [NON MESURÉ] aucun relevé chiffré du
 * ratio exact largeur-description/largeur-lecteur sur la référence
 * YouTube n'existe dans ce projet — 65% posé au milieu de la fourchette
 * demandée (60-70%), à confirmer par capture après déploiement, pas figé
 * arbitrairement sans le dire. Seule la largeur change : rognage,
 * libellés afficher plus/moins et ligne de métadonnées, tous non touchés.
 */
.gallia-watch-desc {
	background: var(--gw-gris-clair);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 24px;
	max-width: 65%;
	font-size: 16px;
	color: var(--gw-noir);
}

.gallia-watch-desc-meta {
	margin: 0;
	font-weight: 600;
	font-size: 13px;
}

/*
 * LES DEUX ÉTATS DE LA LIGNE DE MÉTADONNÉES.
 *
 * Les deux couples — « 24 k vues il y a 7 mois » et « 24 767 vues
 * 12 janvier 2026 » — sont écrits par PHP dans le balisage, côte à côte. Le
 * CSS en montre un seul. Le JavaScript ne touche à aucun texte : il bascule
 * `data-etat` sur le conteneur, et tout suit.
 *
 * Aucun séparateur entre les vues et la date : un espace seul, comme la
 * référence. Le « &middot; » a été retiré du PHP le 03/09/2026.
 */
.gallia-watch-desc[data-etat="replie"] .gallia-watch-desc-meta-deplie,
.gallia-watch-desc[data-etat="deplie"] .gallia-watch-desc-meta-replie {
	display: none;
}

/*
 * Regroupe le texte et son déplieur, et porte l'espacement qui les sépare de
 * la ligne de métadonnées.
 *
 * Ce conteneur a d'abord servi de repère de positionnement, quand le déplieur
 * était sorti du flux et posé en fin de dernière ligne visible. Ce n'est plus
 * le cas depuis le 03/09/2026 : `position: relative` a été retiré avec le
 * reste du dispositif, plutôt que laissé en place « au cas où ». Une propriété
 * qui ne sert plus rien finit par être prise pour une intention.
 */
.gallia-watch-desc-zone {
	margin-top: 8px;
}

.gallia-watch-desc-body {
	line-height: 1.5;
	white-space: normal;
}

/*
 * ROGNAGE À TROIS LIGNES, SANS ELLIPSE.
 *
 * 🔴 CORRIGÉ le 03/09/2026. Ce bloc employait `-webkit-line-clamp: 3`, qui
 * dessine SA PROPRE ellipse à la troncature. Tant que le déplieur était posé
 * hors flux par-dessus la fin du texte, son fond la recouvrait et personne ne
 * la voyait. Le déplieur passé en bloc à gauche, elle est apparue : deux
 * séries de points à l'écran, celle du moteur puis celle du libellé.
 *
 * La cause est retirée, pas masquée. `max-height` + `overflow: hidden` coupe
 * exactement au même endroit sans rien dessiner. Trois lignes = 3 × la hauteur
 * de ligne, exprimée en `em` pour suivre la taille de police plutôt qu'un
 * nombre de pixels qui se périmerait au premier changement d'échelle.
 *
 * La détection de débordement du JavaScript n'est pas affectée : elle compare
 * `scrollHeight` à `clientHeight`, ce qui vaut pour un bloc rogné en hauteur
 * comme pour une boîte `-webkit-box`.
 */
.gallia-watch-desc[data-etat="replie"] .gallia-watch-desc-body {
	max-height: calc(3 * 1.5em);
	overflow: hidden;
}

/*
 * LE DÉPLIEUR — BLOC ALIGNÉ À GAUCHE, SOUS LE TEXTE, DANS LES DEUX ÉTATS.
 *
 * 🔵 ÉCART DÉLIBÉRÉ N° 3, ne pas « corriger ». La référence pose
 * « ...afficher plus » EN FIN DE DERNIÈRE LIGNE VISIBLE du texte, à droite.
 * Gallia le pose en bloc, à gauche, sous le texte. Décision d'Alexandre du
 * 03/09/2026, prise en voyant les deux à l'écran.
 *
 * Ce qu'elle achète : les deux libellés occupent désormais LE MÊME
 * EMPLACEMENT. Le contrôle ne saute plus d'un coin à l'autre quand on
 * déplie — il ne bouge pas du tout, seul son texte change.
 *
 * Ce qu'elle a supprimé, et qui ne doit pas revenir en pièces détachées : le
 * positionnement hors flux, le `bottom: 0`, et le dégradé qui masquait les
 * glyphes passant sous le bouton. Ce dégradé n'avait de sens que superposé au
 * texte ; en bloc, il n'aurait rien à masquer. Les deux règles d'état qui
 * annulaient l'une l'autre disparaissent avec lui : une seule déclaration
 * suffit maintenant pour les deux états.
 *
 * 🔵 ÉCART DÉLIBÉRÉ N° 2, rappelé ici parce que c'est là qu'on le lit : la
 * référence écrit « Moins » au repli ; Gallia écrit « afficher moins », par
 * symétrie. Les deux libellés vivent dans `data-more` et `data-less` côté
 * PHP, jamais dans cette feuille.
 */
.gallia-watch-desc-toggle {
	display: block;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--gw-noir);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

/*
 * Les trois points ne figurent que dans l'état replié, et viennent d'ici
 * plutôt que du libellé : la chaîne à traduire reste « afficher plus », sans
 * ponctuation parasite, et le déplieur n'en porte aucune une fois déplié.
 */
.gallia-watch-desc[data-etat="replie"] .gallia-watch-desc-toggle::before {
	content: "...";
}

/*
 * ===========================================================================
 * LE FOND BLEU D'ASTRA AU SURVOL — QUATRIÈME OCCURRENCE DU MÊME PIÈGE
 * ===========================================================================
 *
 * Astra impose ses couleurs sur les états interactifs des boutons. Le déplieur
 * prenait un fond bleu au premier survol.
 *
 * PAS DE !important, et la parade est la même que celle de l'écart E11 plus
 * haut dans ce fichier : un sélecteur composé de spécificité suffisante. Un
 * bloc `<style>` dans le `<head>` reste une feuille ordinaire — la spécificité
 * s'y applique normalement, et une règle assez forte passe devant sans avoir à
 * forcer.
 *
 * SPÉCIFICITÉ : `body` + quatre classes = 0-4-1. La règle d'Astra corrigée le
 * 01/09 pesait 0-2-1 ; celle-ci passe devant avec de la marge. Le chemin
 * n'emprunte PAS `.entry-content`, contrairement au correctif E11 : cette
 * classe vient du thème, et parier dessus rendrait la parade dépendante d'un
 * balisage qu'on ne maîtrise pas. `.gallia-watch` et `.gallia-watch-desc`
 * viennent de notre PHP.
 *
 * ⚠️ LES QUATRE ÉTATS, ET PAS SEULEMENT LE SURVOL. Un défaut identique sur la
 * page créateur donnait du texte BLANC sur fond clair au focus — illisible, et
 * personne ne l'avait vu parce que seul le survol avait été regardé. La
 * couleur du texte est donc réaffirmée dans les quatre états, pas seulement le
 * fond.
 *
 * L'indication de focus n'est pas supprimée pour autant : elle est portée par
 * `.gallia-watch :focus-visible`, qui pose un contour. Neutraliser le fond et
 * l'ombre d'Astra ne rend donc pas le focus invisible au clavier.
 */
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle,
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle:hover,
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle:focus,
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle:focus-visible,
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--gw-noir);
}

/*
 * Le soulignement au survol reste la seule affordance du déplieur, et il doit
 * lui aussi passer devant Astra — d'où le même chemin composé.
 */
body.gallia-watch-page .gallia-watch .gallia-watch-desc .gallia-watch-desc-toggle:hover {
	text-decoration: underline;
}

/*
 * Le déplieur est masqué tant que le JavaScript n'a pas constaté un
 * débordement réel.
 *
 * `[hidden]` seul ne suffirait pas : la règle qui pose `display: block` sur ce
 * bouton l'emporterait sur la feuille du navigateur. Une classe plus un
 * attribut pèsent 0-2-0 contre 0-1-0 — la spécificité suffit, aucun
 * `!important` n'est nécessaire ici.
 */
.gallia-watch-desc-toggle[hidden] {
	display: none;
}

.gallia-watch-desc.is-bare {
	background: none;
	padding: 0;
}

/* ---------- suggestions ---------- */

.gallia-watch-secondary {
	min-width: 0;
}

.gallia-watch-secondary-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--gw-noir);
	margin: 0 0 12px;
}

.gallia-watch-suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gallia-watch-suggestion a {
	display: grid;
	/*
	 * 160px → 168px (chantier 2026-09-03, demande explicite). Aucune mesure
	 * de référence associée à ce changement — valeur donnée telle quelle.
	 */
	grid-template-columns: 168px minmax(0, 1fr);
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.gallia-watch-suggestion-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gw-gris-clair);
	border-radius: 6px;
	overflow: hidden;
}

.gallia-watch-suggestion-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallia-watch-suggestion-duration {
	position: absolute;
	right: 4px;
	bottom: 4px;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 3px 4px;
	border-radius: 3px;
}

.gallia-watch-suggestion-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gallia-watch-suggestion-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gw-noir);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gallia-watch-suggestion-views {
	font-size: 12px;
	color: var(--gw-gris);
}

/* ---------- états vides et repli ---------- */

.gallia-watch-empty,
.gallia-watch-empty-page {
	color: var(--gw-gris);
	font-size: 14px;
}

.gallia-watch-soon {
	max-width: 640px;
	margin: 40px auto;
	padding: 24px;
	border: 1px solid var(--gw-filet);
	border-radius: 8px;
	background: #fff;
	text-align: center;
	color: var(--gw-noir);
}

/* ---------- accessibilité ---------- */

.gallia-watch .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gallia-watch :focus-visible {
	outline: 2px solid var(--gw-noir);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gallia-watch-btn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * MODALE DE PARTAGE (lot V3, écart E4)
 * ---------------------------------------------------------------------------
 * ⚠️ ÉCART DÉLIBÉRÉ : la référence arrondit sa carte à ≈12 px. La charte du
 * projet impose 4 px, et l'arbitrage du 01/09/2026 a tranché en faveur de la
 * charte — comme pour la pilule de notation et le bouton d'abonnement. Ce
 * n'est pas une approximation à corriger un jour.
 *
 * Largeur 470 px : mesurée sur la capture de référence.
 * --------------------------------------------------------------------------- */

.gallia-share-modal {
	position: fixed;
	inset: 0;
	/* Au-dessus du menu latéral (9200) et de son voile (9150), valeurs déjà
	   en vigueur dans sidebar.css. Aucune valeur inventée. */
	z-index: 9300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.gallia-share-modal[hidden] {
	display: none;
}

.gallia-share-voile {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.gallia-share-carte {
	position: relative;
	width: 100%;
	max-width: 470px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

.gallia-share-fermer {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	font-family: inherit;
	color: var(--gw-noir);
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.gallia-share-fermer:hover,
.gallia-share-fermer:focus-visible {
	background: var(--gw-gris-clair);
}

.gallia-share-titre {
	margin: 0 32px 16px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--gw-noir);
	text-align: center;
}

.gallia-share-separateur {
	border: 0;
	border-top: 1px solid var(--gw-filet);
	margin: 16px 0;
}

.gallia-share-libelle {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gw-noir);
}

/* ---------- rangée d'icônes défilante ---------- */

.gallia-share-rangee-zone {
	position: relative;
}

.gallia-share-rangee {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	/* Barre de défilement masquée : le chevron sert d'affordance, comme sur
	   la référence. Le défilement tactile et à la molette reste possible. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gallia-share-rangee::-webkit-scrollbar {
	display: none;
}

/*
 * Le balisage interne vient de l'extension de partage : on ne le réécrit pas,
 * on le contraint à tenir sur une seule ligne. Les !important sont ici
 * nécessaires et je le dis plutôt que de les poser en silence : l'extension
 * imprime ses propres règles en <style> inline dans le <head>, donc APRÈS
 * cette feuille et à spécificité au moins égale. Aucune spécificité de
 * sélecteur ne peut battre une déclaration inline de l'extension ; seul
 * !important le peut. C'est le seul endroit de ce fichier qui en contient.
 */
.gallia-share-rangee .heateor_sss_sharing_container,
.gallia-share-rangee .heateor_sss_sharing_ul {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.gallia-share-rangee .heateor_sss_sharing_ul li {
	float: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

.gallia-share-chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	font-family: inherit;
	color: var(--gw-noir);
	background: #fff;
	border: 1px solid var(--gw-filet);
	border-radius: 4px;
	cursor: pointer;
	box-shadow: -8px 0 12px rgba(255, 255, 255, .9);
}

.gallia-share-chevron[hidden] {
	display: none;
}

/* ---------- champ URL + Copier ---------- */

.gallia-share-lien {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.gallia-share-champ {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	color: var(--gw-noir);
	background: var(--gw-gris-clair);
	border: 1px solid var(--gw-filet);
	border-radius: 4px;
}

.gallia-share-copier {
	flex: 0 0 auto;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	color: var(--gw-noir);
	background: var(--gw-jaune);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.gallia-share-copier.is-copie {
	background: var(--gw-gris-clair);
}

/* ---------------------------------------------------------------------------
 * PIED DE PAGE — retiré de la page de visionnage (lot V2, écart E19)
 * ---------------------------------------------------------------------------
 * La page affichait « Copyright © 2026 Gallia | Propulsé par Thème WordPress
 * Astra ». Deux raisons de le retirer ICI :
 *   1. la référence n'a aucun pied de page sur sa page de visionnage — la
 *      colonne de suggestions y court jusqu'au bas de l'écran ;
 *   2. la mention du thème est une divulgation d'infrastructure, visible de
 *      tous les visiteurs, sur une plateforme qui revendique sa souveraineté.
 *
 * ⚠️ PORTÉE VOLONTAIREMENT LIMITÉE À CETTE PAGE. Ce pied de page est rendu
 * par le thème sur TOUTES les pages du site : le retirer partout est une
 * décision à portée globale, qui n'appartient pas à ce lot et qui a été
 * signalée pour arbitrage. Cette feuille n'étant chargée que sur /video/, la
 * règle ne peut pas déborder ; le sélecteur de classe <body> le dit en plus
 * explicitement.
 *
 * Masquage CSS et non suppression du balisage : réversible d'une ligne, et
 * sans toucher au thème dont je n'ai pas les sources.
 */
body.gallia-watch-page .site-footer,
body.gallia-watch-page footer.site-footer {
	display: none;
}

/* =======================================================================
 * CLOCHE 2 — RÉGLAGE DES NOTIFICATIONS DE LA CHAÎNE (chantier 2026-09-03)
 * =====================================================================
 *
 * Elle se pose à droite du widget d'abonnement, sur la ligne créateur, et
 * n'apparaît que pour un abonné. Ni compteur, ni pastille : ce n'est pas un
 * affichage de notifications, c'est un réglage. La seule cloche qui compte
 * quelque chose est celle du bandeau, en haut à droite.
 * ===================================================================== */

/*
 * La zone d'abonnement contient désormais deux éléments (le widget et la
 * cloche) au lieu d'un. Elle devient une rangée. `flex: 0 0 auto` et la marge
 * de gauche héritées plus haut ne changent pas : elle continue de ne jamais se
 * comprimer, contrairement à l'identité du créateur qui, elle, cède la place.
 */
.gallia-watch-subscribe {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gallia-watch-bell {
	position: relative;
	flex: 0 0 auto;
}

/*
 * 🔴 Même piège qu'au bandeau (gallia-radio-header/header.css, bug du
 * 2026-08-23) : Astra impose en <style> inline un `button, .ast-button, … {
 * color: #fff }` qui frappe TOUT <button> du site. Une icône dessinée en
 * `stroke="currentColor"` hériterait de ce blanc et deviendrait invisible sur
 * fond clair, sans la moindre erreur pour le signaler. `color` est donc posé
 * explicitement ici, à la spécificité de classe — elle l'emporte naturellement
 * sur le sélecteur d'élément d'Astra, aucun !important n'est nécessaire.
 */
/*
 * 🔴 Refonte du 2026-09-03 — référence image fournie par Alexandre. Trois
 * écarts réels avec cette référence, tous corrigés ici :
 *
 *   1. FORME — `border-radius: 4px` rendait un rectangle à peine arrondi,
 *      pas une pilule. Repris sur `var(--gallia-radius-pill)`, le MÊME jeton
 *      que `.gallia-btn` (modal.css) — le bouton "Abonné" juste à côté est
 *      déjà une vraie pilule avec ce jeton ; le réutiliser ici les rend
 *      visuellement de la même famille, plutôt qu'une valeur pilule inventée
 *      à part qui pourrait diverger si le jeton de marque change un jour.
 *      Repli à 999px (jamais 4px) si le jeton venait à manquer : un repli
 *      doit représenter l'intention (une pilule), pas une forme différente.
 *
 *   2. ESPACEMENT ICÔNE/CHEVRON — `gap: 2px` collait les deux, alors que la
 *      référence montre "un espace net". Porté à 8px.
 *
 *   3. FOND — DÉJÀ CONFORME, non touché : `var(--gw-gris-clair)` vaut #f2f2f2
 *      (déclaré tout en haut de ce fichier), très proche du #f0f0f0 cité en
 *      référence — aucun changement nécessaire ici.
 *
 * La cloche et le chevron restent dans le MÊME bouton (un seul élément
 * `<button>`, jamais deux zones) — c'était déjà le cas dans le balisage PHP,
 * rien à changer de ce côté.
 */
/*
 * 🔴 PADDING corrigé le 2026-09-03, sur mesure RÉELLE cette fois — deux
 * captures d'un vrai bouton de cloche YouTube (menu ouvert), lues en pixels
 * et calibrées sur l'avatar de la chaîne (40px, convention YouTube stable) :
 * hauteur totale du bouton fermé ≈35px, icône ≈22px. Padding vertical ramené
 * à 7px (22 + 7×2 = 36, à 1px de la cible) — 8px donnait 40px, cohérent avec
 * le calcul mais visiblement pas avec ce que montre la vraie référence.
 */
/*
 * 🔴 GAP 8px→10px (2026-09-03) : conséquence du chevron agrandi (voir le cas
 * 'chevron' de gallia_video_watch_bell_icon()) — à 8px, l'écart paraissait
 * trop serré entre une cloche à 24px et un chevron nettement plus grand
 * qu'elle. INCHANGÉ depuis, les passes suivantes n'ont touché que la taille
 * du chevron et le padding vertical ci-dessous.
 *
 * 🔴 PADDING VERTICAL 7px→8px (même date, passe suivante) : le chevron est
 * d'abord passé à 42px, CONFIRMÉ TROP GRAND par capture — dominait la
 * cloche et débordait légèrement du bouton, avec 7px de padding inchangé.
 * Ramené ensuite à 28px (toujours plus grand que la cloche, 24px, comme
 * demandé — voir le SVG), avec cette fois 1px de padding vertical en plus,
 * demandé explicitement pour que le chevron ne touche pas les bords du
 * bouton. Hauteur résultante attendue : 28 (chevron) + 2×8 (padding) = 44px
 * — au-dessus des 40px mesurés avant l'agrandissement du chevron, toujours
 * pour la même raison mécanique déjà signalée (le chevron, maintenant le
 * plus grand enfant du bouton flex, en dicte la hauteur) ; à reconfirmer
 * par mesure réelle après déploiement, comme les 92×40 l'ont été.
 *
 * Aucun décalage vertical entre la cloche et le chevron à corriger :
 * `align-items: center`, déjà en place sur ce conteneur ET sur les deux
 * spans qu'il contient (.gallia-watch-bell-icon, .gallia-watch-bell-caret),
 * les centre déjà l'un par rapport à l'autre quelle que soit leur taille.
 */
.gallia-watch-bell-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--gw-gris-clair);
	border: none;
	/*
	 * 🔴 2026-09-03, troisième passe. `var(--gallia-radius-pill, 999px)`
	 * seul n'a produit AUCUN changement visible en production malgré un
	 * fichier transféré et vérifié (empreinte, php -l, suite verte) — signe
	 * d'un écrasement, pas d'une erreur d'écriture. Ce bouton porte déjà,
	 * juste au-dessus, le combat documenté contre le reset global de
	 * bouton d'Astra (`button, .ast-button, … { color: #fff }`) : un reset
	 * de thème qui bat un bouton natif regroupe très souvent plusieurs
	 * propriétés dans la même règle, `border-radius` inclus. `!important`
	 * ici n'est donc pas un premier réflexe : c'est la réponse à un échec
	 * CONFIRMÉ deux fois sur cette seule propriété, après qu'une
	 * spécificité de classe (0,1,0) s'est révélée insuffisante à s'imposer
	 * — exactement la situation où ce projet réserve `!important`.
	 * `999px` fixé en dur plutôt que le jeton `--gallia-radius-pill` : si
	 * CE token lui-même est la cause (une valeur autre que celle supposée),
	 * le corriger ici tranche la question sans dépendre de lui.
	 */
	border-radius: 999px !important;
	cursor: pointer;
	line-height: 1;
	color: var(--gw-noir);
}

.gallia-watch-bell-btn:hover {
	background: var(--gw-filet);
	color: var(--gw-noir);
}

.gallia-watch-bell-btn:focus-visible,
.gallia-watch-bell-item:focus-visible {
	outline: 2px solid var(--gw-jaune);
	outline-offset: -2px;
}

.gallia-watch-bell-icon {
	display: inline-flex;
	align-items: center;
}

/*
 * Icône de la cloche PRINCIPALE (ce sélecteur-ci, .gallia-watch-bell-icon,
 * PAS le menu) — REPRISE le 2026-09-03 sur mesure RÉELLE de deux captures
 * d'un vrai bouton YouTube (menu ouvert), calibrées sur l'avatar de chaîne
 * (40px, référence connue) : icône du bouton fermé ≈21-23px. 24px, choisi la
 * fois précédente pour un rapport d'échelle 1:1 avec le viewBox du SVG
 * (0 0 24 24), tombe exactement dans cette fourchette mesurée — CONSERVÉ tel
 * quel, la mesure confirme le choix au lieu de le contredire. Le rapport 1:1
 * (aucune mise à l'échelle, trait à sa pleine épaisseur 1,8px) reste donc
 * valable pour les mêmes raisons qu'avant.
 */
.gallia-watch-bell-icon svg {
	width: 24px;
	height: 24px;
}

/*
 * 🔴 DÉFAUT 1 — CORRIGÉ le 2026-09-03 sur mesure RÉELLE, en remplacement du
 * ×3 (54px) posé la fois précédente sur une hypothèse, faute de capture.
 *
 * Deux captures d'un vrai menu de cloche YouTube ouvert, mesurées en pixels
 * et calibrées sur l'avatar de chaîne (40px, référence connue) : icône du
 * menu ≈20-22px, icône du bouton fermé ≈21-23px — un rapport d'échelle
 * proche de 1:1, PAS ×3. Le débordement massif du menu vers la gauche,
 * signalé par capture, n'était pas un défaut de position : c'était la
 * conséquence directe d'icônes 2,4 fois trop grandes par rapport à la
 * vraie référence.
 *
 * 22px retenu, alignée sur .gallia-watch-bell-icon svg (24px, ci-dessus) à
 * 2px près : les deux icônes du composant restent proches en taille, comme
 * la mesure le montre, sans être identiques au pixel près.
 *
 * `body.gallia-watch-page` en ancre CONSERVÉ : la spécificité renforcée
 * contre un conflit externe reste une précaution valable indépendamment de
 * la taille choisie.
 */
body.gallia-watch-page .gallia-watch-bell .gallia-watch-bell-item-icon svg {
	width: 22px;
	height: 22px;
}

/*
 * Les DEUX icônes sont dans la page, rendues par le serveur ; le CSS choisit
 * laquelle se voit. Le JavaScript ne fabrique donc aucun SVG, il ne fait que
 * poser ou retirer la classe `is-muet` sur le bouton.
 */
.gallia-watch-bell-btn .gallia-watch-bell-icon-aucune,
.gallia-watch-bell-btn.is-muet .gallia-watch-bell-icon-toutes {
	display: none;
}

.gallia-watch-bell-btn.is-muet .gallia-watch-bell-icon-aucune {
	display: inline-flex;
}

/*
 * 🔴 Corrigé le 2026-09-03 (1/2), capture zoomée à l'appui : ce chevron
 * était le caractère Unicode ▾ (triangle PLEIN) posé en texte brut — seul
 * élément du bouton hors de la convention « trait, jamais rempli » suivie
 * par les trois autres icônes (gallia_video_watch_bell_icon()). Remplacé
 * par un vrai SVG en trait fin (voir le cas 'chevron' dans cette fonction,
 * gallia-video-watch.php). `font-size`/`line-height` retirés : ils
 * stylaient le caractère texte, sans effet sur un SVG — code mort, pas
 * laissé derrière.
 *
 * 🔴 (2/2) — RENVERSEMENT ASSUMÉ, demande explicite ultérieure d'Alexandre.
 * Ce commentaire affirmait que le chevron « NE GRANDIT PAS avec le reste »,
 * en cohérence avec la référence YouTube mesurée (chevron nettement plus
 * petit que la cloche). Ce n'est PLUS le cas : le SVG est passé à 42px,
 * délibérément PLUS GRAND que la cloche (24px) — voir le docblock complet
 * du cas 'chevron'. Ne pas revenir à un chevron plus petit en croyant
 * réaligner sur la référence : c'est un choix produit assumé, pas une
 * dérive à corriger. Aucune taille fixée ICI (cette règle ne gère que
 * l'alignement du span) : elle vit dans le SVG lui-même, seule source.
 */
.gallia-watch-bell-caret {
	display: inline-flex;
	align-items: center;
}

.gallia-watch-bell-caret svg {
	display: block;
}

/*
 * 🔴 DÉFAUT 2 — CORRIGÉ le 2026-09-03 sur mesure RÉELLE, sens INVERSÉ par
 * rapport à ce qui était codé. L'ancien commentaire ici affirmait un
 * alignement à DROITE par raisonnement (« la cloche est en bout de ligne »),
 * jamais vérifié sur une vraie capture — et le raisonnement, comme la
 * mise en œuvre (`right: 0`), étaient faux : deux captures d'un vrai menu
 * YouTube ouvert montrent le bord GAUCHE du menu coïncidant avec le bord
 * gauche du bouton fermé, confirmé deux fois par lecture directe. Le menu
 * s'ouvre donc vers la DROITE depuis le bord gauche du bouton, pas
 * l'inverse.
 *
 * `right: auto` explicite pour la même raison que l'ancien `left: auto` —
 * lever toute ambiguïté si une règle externe fixait aussi `right`.
 * `body.gallia-watch-page` en ancre CONSERVÉ, précaution de spécificité
 * indépendante du sens choisi.
 *
 * [NON MESURÉ] sur écran étroit (mobile) : un menu de ≈194px ouvert vers la
 * droite depuis un bouton qui n'est pas en tout début de ligne peut, selon
 * la largeur disponible, déborder du viewport à droite — l'ancien
 * raisonnement (jamais vérifié, mais pas absurde) portait sur ce cas
 * précis. Aucune capture mobile fournie à ce jour ; à surveiller plutôt
 * qu'à corriger par anticipation sans mesure.
 */
body.gallia-watch-page .gallia-watch-bell-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: auto;
	z-index: 30;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	/*
	 * 240px → 194px (2026-09-03) : conséquence directe des icônes de ligne
	 * ramenées de 54px à 22px (défaut 1, ci-dessus) — largeur mesurée
	 * directement sur les mêmes captures YouTube, pas recalculée depuis les
	 * seules icônes.
	 */
	min-width: 194px;
	background: #fff;
	border: 1px solid var(--gw-filet);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.gallia-watch-bell-menu[hidden] {
	display: none;
}

.gallia-watch-bell-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--gw-noir);
	white-space: nowrap;
}

.gallia-watch-bell-item:hover {
	background: var(--gw-gris-clair);
	color: var(--gw-noir);
}

.gallia-watch-bell-item[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* Le réglage actif est marqué, pas seulement suggéré par l'icône du bouton. */
.gallia-watch-bell-item[aria-current="true"] {
	font-weight: 700;
}

/*
 * 🔴 Contradiction corrigée le 2026-09-03 : ces icônes rendaient en gris
 * (var(--gw-gris)) alors que la consigne demande explicitement un « trait
 * noir simple ». Seule cette règle divergeait — le bouton de la cloche
 * lui-même (.gallia-watch-bell-btn, plus haut) était déjà en var(--gw-noir).
 */
.gallia-watch-bell-item-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--gw-noir);
}

/*
 * « Se désabonner » n'est proposé qu'aux abonnés gratuits (le payant passe par
 * Mon compte). Il reste dans le même menu, sans couleur d'alerte : c'est une
 * action ordinaire et réversible en un clic, pas une suppression.
 */
.gallia-watch-bell-unsub {
	border-top: 1px solid var(--gw-filet);
	margin-top: 4px;
	padding-top: 10px;
}

@media (max-width: 600px) {
	/*
	 * Sur mobile la ligne créateur est déjà dense. Chiffre de hauteur retiré
	 * de ce commentaire le 2026-09-03 : il datait d'avant le chevron à 42px
	 * et n'était plus juste ni pour l'état desktop ni pour celui-ci (le
	 * chevron masqué ici fait retomber la hauteur sur la cloche, 24px) — pas
	 * remesuré, donc pas réaffirmé à l'aveugle. La cloche garde sa surface
	 * tactile mais perd son chevron, dont
	 * le menu déroulant se signale déjà par lui-même à l'ouverture.
	 */
	.gallia-watch-bell-caret {
		display: none;
	}
}


/* =======================================================================
 * FENÊTRE DE CONFIRMATION DU DÉSABONNEMENT (chantier 2026-09-03, après-midi)
 * =====================================================================
 *
 * La coquille (.gallia-modal / .gallia-modal-overlay / .gallia-modal-box /
 * .gallia-modal-close) vient ENTIÈREMENT de gallia-subscribe-oneclick/
 * modal.css, déjà chargée sur cette page — voir le docblock PHP de
 * gallia_video_watch_render_bell(). Rien n'est redéfini ici : les seules
 * règles ci-dessous sont propres au CONTENU de cette fenêtre précise
 * (question + deux boutons), pas à son habillage.
 * ===================================================================== */

.gallia-watch-unsub-question {
	margin: 0.25rem 1.75rem 0 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gw-noir);
}

.gallia-watch-unsub-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

/*
 * « Annuler » réutilise .gallia-btn SEUL (sans -cta) — déjà défini dans
 * modal.css comme un bouton pilule sans fond ni bordure, texte noir. Aucune
 * règle propre à ajouter ici : c'est exactement l'aspect voulu pour l'action
 * secondaire, obtenu par simple absence de la classe -cta plutôt que par une
 * nouvelle classe « gallia-btn-secondaire » qui aurait dupliqué ce que
 * .gallia-btn fait déjà.
 */