/*
 * Gallia — Abonnement en un clic : styles de la modale, des boutons CTA
 * (jaune Skool) et de la bannière de vérification email.
 *
 * Portée volontairement limitée : seules les classes .gallia-* sont
 * touchées. Le reste du site (blanc/noir, liens/icônes existants) n'est
 * pas modifié par ce fichier.
 *
 * Chantier identité visuelle (2026-08-21) : --gallia-cta-yellow/-text ne
 * sont plus la source canonique de la couleur — ce sont des ALIAS vers les
 * jetons de marque définis une seule fois dans gallia-brand/brand.css
 * (chargé en dépendance, priorité 5, avant ce fichier). Conservés sous ce
 * nom pour zéro régression : 4 autres fichiers CSS du projet les
 * consomment déjà via var(--gallia-cta-yellow, <repli>) — repli mis à jour
 * vers la nouvelle couleur de marque partout où il subsiste.
 */

:root {
	--gallia-cta-yellow: var(--gallia-yellow, #F8D481);
	--gallia-cta-yellow-hover: var(--gallia-yellow-hover, #F2C561);
	--gallia-cta-text: var(--gallia-black, #0f0f0f);
	--gallia-disabled-bg: #e9e9e9;
	--gallia-disabled-text: #8a8a8a;
}

/* ---------- Widget créateur (nom + compteurs + boutons) ---------- */

.gallia-subscribe-widget {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
}

.gallia-creator-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.gallia-creator-avatar {
	border-radius: 999px;
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
}

.gallia-creator-header-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

/*
 * Chantier "Harmonisation YouTube/Skool" (2026-08-25), point 3 : valeurs
 * RÉELLES mesurées via getComputedStyle() sur le nom de communauté de
 * skool.com/aivideobootcamp dans le widget d'adhésion (le même
 * emplacement que ce composant — avatar + nom + adresse + stats + bouton) :
 * font-size 18px, font-weight 500, line-height 27px (=1.5), color
 * rgb(32,33,36)=#202124. Remplace 1.25rem(20px)/700, jamais mesuré. Couleur
 * NON reprise (#202124) : reste var(--gallia-black)/#0F0F0F, le noir de
 * marque canonique déjà appliqué de façon cohérente à tout le texte du site
 * (brand.css) — écart mineur ASSUMÉ et documenté, pas une omission.
 */
.gallia-creator-name {
	font-weight: 500;
	font-size: 1.125rem; /* 18px */
	line-height: 1.5; /* 27px */
}

/*
 * Chantier "refonte exhaustive page créateur façon Skool" (2026-08-22),
 * point 8 : valeurs mesurées via getComputedStyle() sur
 * "skool.com/aivideobootcamp" (le texte gris sous le nom de la
 * communauté) : font-size 13px, font-weight 700, color rgb(144,144,144).
 */
.gallia-creator-address {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #909090;
	margin-top: 0.15rem;
}

/*
 * Chantier "corrections complémentaires façon Skool" (2026-08-22, 3e
 * session suivante), Partie D : texte de présentation court. Taille/couleur
 * cohérentes avec le corps de texte déjà en place (pas mesuré séparément
 * sur Skool pour cet élément précis — "Master AI Video..." y est un simple
 * paragraphe de carte, sans traitement typographique distinct non plus).
 */
.gallia-creator-tagline {
	font-size: 0.875rem;
	color: var(--gallia-black, #0f0f0f);
	margin: 0.5rem 0 0.75rem;
}

/*
 * Chantier identité visuelle (2026-08-21, session suivante), Partie C :
 * remplace l'ancienne .gallia-creator-stats (texte "X abonnés · Y en
 * ligne" sur une ligne) par 3 cases façon Skool — nombre en gras en haut,
 * libellé discret en dessous, séparateurs verticaux fins entre colonnes.
 * .gallia-subscribe-widget passe alors en colonne pleine largeur : ce
 * bloc a besoin de toute la largeur de la carte pour répartir ses 2-3
 * colonnes, il ne peut plus cohabiter à côté de l'avatar+nom sur une
 * seule ligne comme l'ancien texte compact.
 */
.gallia-subscribe-widget {
	flex-direction: column;
	align-items: stretch;
}

.gallia-stats-bar {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

.gallia-stats-col {
	flex: 1;
	min-width: 0;
	text-align: center;
	padding: 0 0.5rem;
}

.gallia-stats-col + .gallia-stats-col {
	border-left: 1px solid var(--gallia-border, #e0e0e0);
}

/*
 * Chantier "Harmonisation YouTube/Skool" (2026-08-25), point 3 : valeurs
 * RÉELLES mesurées via getComputedStyle() sur les 3 statistiques
 * (Membres/En ligne/Administrateurs) de skool.com/aivideobootcamp :
 *   - nombre : 18px/500/line-height 27px(1.5)/#202124 — remplace 1.3rem
 *     (20.8px)/700/lh 1.2, jamais mesuré.
 *   - libellé : 13px/400/line-height 19.5px(1.5)/#909090(--gallia-border
 *     n'est pas la bonne variable ici, #909090 déjà le jeton "gris discret"
 *     utilisé par .gallia-creator-address et .gallia-sidebar-section-title
 *     sur ce projet), SANS majuscules ni espacement de lettres — Skool
 *     n'applique NI text-transform NI letter-spacing sur ce libellé
 *     (confirmé par getComputedStyle(): textTransform:"none",
 *     letterSpacing:"normal"), contrairement à la règle précédente qui les
 *     ajoutait sans mesure de référence.
 * Couleur du nombre : reste var(--gallia-black)/#0F0F0F (même choix que
 * .gallia-creator-name juste au-dessus, écart assumé documenté).
 */
.gallia-stats-number {
	display: block;
	font-size: 1.125rem; /* 18px */
	font-weight: 500;
	color: var(--gallia-black, #0f0f0f);
	line-height: 1.5; /* 27px */
}

.gallia-stats-label {
	display: block;
	font-size: 0.8125rem; /* 13px */
	font-weight: 400;
	color: #909090;
	line-height: 1.5; /* 19.5px */
	margin-top: 0.15rem;
}

.gallia-subscribe-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.gallia-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.1rem;
	/* Chantier "corrections complémentaires façon Skool" (2026-08-22,
	   session suivante) : référence désormais la variable partagée
	   --gallia-radius-pill (brand.css) au lieu de 999px codé en dur ici —
	   même architecture que les intégrations PMPro/BuddyPress/bbPress/
	   LifterLMS qui la référençaient déjà. Un seul changement de valeur
	   (brand.css) propage maintenant à TOUS les boutons jaunes, y compris
	   ceux-ci (widget d'abonnement État A ET B, "+Créer", badge de statut). */
	border-radius: var(--gallia-radius-pill, 4px);
	font-weight: 700;
	/*
	 * 1rem (16px) : valeur EXACTE mesurée sur le bouton CTA réel de
	 * skool.com/aivideobootcamp (`.eJkdnq { font-size: 16px; }`, règle CSS
	 * lue directement) — élément à taille FIXE (bouton), pas proportionnel
	 * à la largeur de colonne (Partie 3 du chantier "corrections
	 * complémentaires façon Skool", 2026-08-22). Était 0.9rem (14.4px,
	 * jamais mesuré) ; testé réellement à 320px (largeur de la carte
	 * latérale, contexte le plus contraint du site) après ce changement —
	 * toujours 1 ligne, voir rapport de chantier.
	 */
	font-size: 1rem;
	border: none;
	cursor: pointer;
	line-height: 1.2;
	white-space: nowrap;
	/* !important nécessaire seulement pour cette propriété : le thème Astra
	   imprime un <style> inline dans <head> avec le sélecteur
	   ".ast-single-post .entry-content a" (2 classes + 1 type), plus
	   spécifique qu'une simple classe .gallia-btn, qui soulignait les 2
	   boutons payants (des <a>) — repéré sur une capture d'écran réelle de
	   la page, confirmé via getComputedStyle(), corrigé le 2026-08-11. */
	text-decoration: none !important;
}

/*
 * Chantier "refonte exhaustive page créateur façon Skool" (2026-08-22),
 * point 5-6 : box-shadow et transition EXACTS mesurés via
 * getComputedStyle() sur le bouton CTA réel de
 * skool.com/aivideobootcamp (règle CSS `.eJkdnq` lue directement dans sa
 * feuille de style — 3 couches d'ombre, transition 100ms). Le
 * border-radius reste volontairement 999px (pilule) : c'est un choix de
 * marque Gallia déjà confirmé/réitéré sur plusieurs chantiers antérieurs
 * (contrairement au 4px mesuré chez Skool) — voir "constraints" du
 * chantier ("typographie déjà validée... valeurs de base déjà
 * confirmées"), pas une valeur reprise ici.
 */
.gallia-btn-cta {
	background: var(--gallia-cta-yellow);
	color: var(--gallia-cta-text);
	box-shadow: rgba(60, 64, 67, 0.32) 0 1px 2px, rgba(60, 64, 67, 0.15) 0 2px 6px, rgba(0, 0, 0, 0.1) 0 1px 8px;
	transition: background-color 0.1s ease;
}

/*
 * Partie C (chantier identité visuelle, correction post-captures,
 * 2026-08-21) : structure 2 lignes CONTRÔLÉE pour les boutons payants
 * ("Premier Membre — 27€/mois" / "(100 places restantes)"), voir
 * gallia-subscribe-oneclick.php pour le balisage en 2 <span>. Générique
 * (pas scopé à .gallia-sale-sidebar) — le même composant est réutilisé
 * ailleurs (ex. .gallia-subscribe-widget plein-largeur), la coupure de
 * ligne reste cohérente partout où ce bouton apparaît.
 * flex-direction:column SEULEMENT sur .gallia-btn-paid (jamais sur
 * .gallia-btn générique, réutilisé par de nombreux autres boutons à une
 * seule ligne sur tout le site) — empile les 2 <span> au lieu de les
 * mettre côte à côte (héritage de display:inline-flex sur .gallia-btn).
 */
.gallia-btn-paid {
	flex-direction: column;
}

.gallia-btn-label-main {
	display: block;
	/* Coupure PRÉCISE voulue entre le libellé principal et le suffixe
	   "(N places restantes)" — jamais un retour à la ligne naturel/aléatoire
	   à l'intérieur même du libellé principal. `white-space: nowrap` explicite
	   ici (pas seulement hérité de .gallia-btn) car .gallia-sale-sidebar
	   .gallia-btn le repasse à `normal` (voir sale.css) — sans cette
	   redéclaration, ce span hériterait ce `normal` et pourrait s'enrouler
	   lui-même au mauvais endroit. */
	white-space: nowrap;
}

.gallia-btn-label-suffix {
	display: block;
	margin-top: 0.15rem;
}

/*
 * 🔴 Bug réel trouvé en testant le clic réel du bouton "S'abonner
 * gratuitement" (chantier "refonte exhaustive façon Skool", 2026-08-22,
 * pas visible à la seule lecture du code) : Astra imprime une règle
 * globale `button:focus { background: var(--ast-global-color-1); }`
 * (bleu, `rgb(4, 92, 180)`) qui s'applique à CE bouton précis dès qu'il
 * garde le focus après un clic (`<button>`, contrairement aux boutons
 * payants qui sont des `<a>`, jamais concernés) — notre règle `:hover`
 * ci-dessous ne couvrait jamais ce cas (un bouton peut être focus SANS
 * que la souris le survole). Capturé via getComputedStyle() réel après un
 * clic Playwright, pas une capture d'écran interprétée. `:focus` ajouté
 * explicitement au sélecteur pour couvrir les deux cas.
 */
/*
 * 🔴 Ajout du 2026-09-03 : « Premier Membre — 27€/mois » et « Membre
 * Fondateur — 197€ à vie » passaient en bleu au survol sur la page créateur,
 * alors que « S'abonner gratuitement » restait noir (correctif du 2026-08-22
 * documenté juste au-dessus, qui ne portait que sur `background` — l'Astra
 * `button:focus{background:...}` alors en cause ne touchait que des
 * `<button>`, jamais des `<a>`, et n'affectait donc jamais la couleur du
 * texte de toute façon).
 *
 * Cette règle s'applique DÉJÀ aux trois boutons à la fois : "S'abonner
 * gratuitement" (.gallia-btn-free), et les deux payants (.gallia-btn-paid)
 * partagent tous .gallia-btn-cta. Elle ne fixait que `background`, jamais
 * `color` — sur un <a>, un `color` non réaffirmé au survol reste exposé à
 * toute règle de thème ciblant spécifiquement les liens au survol, alors
 * qu'un <button> n'est concerné par aucune règle de ce genre. C'est
 * l'explication cohérente avec "seuls les boutons payants (des <a>)
 * viraient bleu" : la même famille de piège de spécificité que
 * `.ast-single-post .entry-content a` déjà documentée sur ce fichier pour le
 * soulignement (ligne ~201), pas re-mesurée en direct ici (aucun accès
 * DevTools depuis ce siège) — mais l'ajout de `color` ci-dessous, sur CETTE
 * règle dont la spécificité (0,4,0, quatre classes/pseudo-classes empilées)
 * dépasse déjà celle du motif Astra documenté (0,2,1, voire 0,3,1 avec un
 * `:hover` ajouté), devrait suffire sans `!important`. À confirmer en
 * production par une capture ou un getComputedStyle() réel — commande donnée
 * dans le rapport du chantier.
 */
.gallia-btn-cta:hover:not(.is-disabled):not(:disabled),
.gallia-btn-cta:focus:not(.is-disabled):not(:disabled) {
	background: var(--gallia-cta-yellow-hover);
	color: var(--gallia-cta-text);
}

/*
 * Chantier "corrections complémentaires façon Skool" (2026-08-22, session
 * suivante), Partie 9 (anneau de focus clavier cohérent partout) : trouvé
 * en testant la navigation clavier réelle (Tab) — .gallia-btn n'avait AUCUN
 * anneau de focus propre, contrairement à .gallia-modal-tab:focus-visible
 * (même fichier, plus bas), qui établit déjà la convention jaune/2px/
 * offset 2px sur ce projet. Repris ici à l'identique, pas une nouvelle
 * valeur inventée. `:disabled`/`.is-disabled` explicitement exclus (jamais
 * focusables au clavier de toute façon, `pointer-events:none` déjà posé
 * plus bas).
 */
.gallia-btn:focus-visible:not(.is-disabled):not(:disabled) {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 2px;
}

.gallia-btn.is-disabled,
.gallia-btn:disabled {
	background: var(--gallia-disabled-bg);
	color: var(--gallia-disabled-text);
	cursor: default;
	pointer-events: none;
}

/* ---------- Modale ---------- */

.gallia-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.gallia-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, 0.6);
}

.gallia-modal-box {
	position: relative;
	background: #fff;
	color: #0f0f0f;
	width: min(420px, 92vw);
	max-height: 90vh;
	overflow-y: auto;
	/*
	 * border-radius (12px) : composant modale, NON mesurable sur Skool (la
	 * modale de connexion/inscription est derrière l'authentification,
	 * inaccessible sans compte) — signalé explicitement plutôt que deviné,
	 * valeur existante conservée telle quelle.
	 * box-shadow : remplace 0 10px 40px rgba(0,0,0,.25) codé en dur ici —
	 * quasi-doublon de --gallia-shadow-elevated (brand.css, opacité .15),
	 * jamais unifié jusqu'ici. Référencé maintenant, pour une seule source.
	 */
	border-radius: 12px;
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: var(--gallia-shadow-elevated, 0 10px 40px rgba(0, 0, 0, 0.15));
}

.gallia-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #0f0f0f;
}

.gallia-modal-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.gallia-modal-tab {
	flex: 1;
	background: none;
	border: none;
	border-bottom: 2px solid #e0e0e0;
	padding: 0.5rem 0;
	font-weight: 600;
	cursor: pointer;
	color: #8a8a8a;
}

.gallia-modal-tab.is-active {
	border-bottom-color: var(--gallia-cta-yellow);
	color: #0f0f0f;
}

/*
 * Partie A.2 (chantier identité visuelle, correction post-captures,
 * 2026-08-21) : la sous-ligne de l'onglet actif était DÉJÀ jaune en code
 * (border-bottom-color ci-dessus, confirmé via getComputedStyle() —
 * rgb(248, 212, 129) = #F8D481) — le "bleu" signalé sur la capture est
 * l'anneau de focus PAR DÉFAUT du navigateur (Chromium/Edge), qui entoure
 * tout <button> cliqué et n'était pas encore stylé ici (confirmé : aucune
 * règle :focus n'existait dans ce fichier). Repris le même motif déjà
 * établi ailleurs sur le site pour ce cas exact (voir gallia-radio-header/
 * header.css, gallia-creator-application/application.css,
 * gallia-global-header/header.css : `outline: 2px solid
 * var(--gallia-cta-yellow, ...)`), plutôt que de simplement supprimer le
 * focus (mauvais pour l'accessibilité clavier).
 */
.gallia-modal-tab:focus-visible {
	outline: 2px solid var(--gallia-cta-yellow, #F8D481);
	outline-offset: 2px;
}

.gallia-modal-panel {
	display: none;
	flex-direction: column;
	gap: 0.5rem;
}

.gallia-modal-panel.is-active {
	display: flex;
}

.gallia-modal-panel label {
	font-size: 0.8rem;
	font-weight: 600;
	margin-top: 0.4rem;
}

/*
 * 🔴 Bug réel trouvé (chantier "corrections complémentaires façon Skool",
 * 2026-08-22, Partie 4/6 — bordures ailleurs sur la page) : ces champs
 * codaient leur propre bordure (#ccc) et arrondi (6px) au lieu des jetons
 * de marque déjà en place (--gallia-border/#E4E4E4, --gallia-radius-input/
 * 8px, brand.css) — trouvé en cherchant TOUTES les bordures codées en dur
 * du site, pas visible en lisant seulement ce fichier isolément.
 */
.gallia-modal-panel input[type="text"],
.gallia-modal-panel input[type="email"],
.gallia-modal-panel input[type="password"] {
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--gallia-border, #e4e4e4);
	border-radius: var(--gallia-radius-input, 8px);
	font-size: 0.95rem;
}

.gallia-username-feedback {
	font-size: 0.78rem;
	min-height: 1em;
}

.gallia-username-feedback.is-taken {
	color: #c0392b;
}

.gallia-username-feedback.is-available {
	color: #1e7d34;
}

.gallia-password-hint {
	font-size: 0.75rem;
	color: #777;
}

.gallia-lost-password {
	font-size: 0.8rem;
	align-self: flex-end;
	color: #0f0f0f;
}

.gallia-modal-submit {
	margin-top: 1rem;
	width: 100%;
}

.gallia-modal-error {
	background: #fdecea;
	color: #c0392b;
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	margin: 0.5rem 0;
}

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

.gallia-register-existing {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-top: 1px dashed #ddd;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
}

/*
 * 🔴 Bug réel trouvé et corrigé (chantier "Exploration exhaustive
 * authentifiée + refonte posts/popup...", 2026-08-27, en rejouant la suite
 * de régression Playwright — test 1, sans rapport avec les 7 points de ce
 * chantier mais bloquant l'ensemble de la suite en mode "serial") : MÊME
 * bug de spécificité déjà documenté plusieurs fois ailleurs sur ce projet
 * (`.gallia-composer-expanded[hidden]`, `.gallia-homepage-more[hidden]`…) —
 * `[hidden]{display:none}` (règle native du navigateur) et
 * `.gallia-register-existing{display:flex}` ont la MÊME spécificité
 * (0-1-0 chacune) ; chargée après dans la cascade, notre règle l'emportait
 * TOUJOURS, quel que soit l'attribut `hidden` posé par modal.js (confirmé
 * réellement : `hidden` présent dans le DOM, mais `display:flex` calculé
 * malgré tout). Résultat : le champ "mot de passe existant" (normalement
 * réservé au cas d'un email en double) restait visible en permanence,
 * y compris pour une inscription avec un email totalement neuf — un champ
 * additionnel sans libellé contextuel avant "Créer mon compte", jamais
 * rempli, bloquant silencieusement la validation du formulaire natif
 * (`required` implicite via l'attribut `password` du navigateur). Même
 * correctif que les précédents : sélecteur `[hidden]` explicite,
 * spécificité 0-2-0, regagne la priorité.
 */
.gallia-register-existing[hidden] {
	display: none;
}

/*
 * Partie A.1 (correction post-captures, 2026-08-21) : repositionné SOUS le
 * bouton "Créer mon compte" (voir gallia-subscribe-oneclick.php) — simple
 * aide discrète, plus le message principal en gras qu'il était quand il
 * précédait le champ mot de passe. `hidden` par défaut (attribut HTML,
 * synchronisé avec .gallia-register-existing par modal.js).
 */
.gallia-existing-message {
	font-weight: 400;
	font-size: 0.8rem;
	color: #666;
	margin: 0.6rem 0 0;
	text-align: center;
}

/* ---------- Bannière de vérification email ---------- */

.gallia-verify-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: #0f0f0f;
	color: #fff;
	padding: 0.55rem 1rem;
	font-size: 0.85rem;
	text-align: center;
}

.gallia-verify-banner a {
	color: var(--gallia-cta-yellow);
	font-weight: 700;
	text-decoration: underline;
}

.gallia-verify-banner button {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
}