/* Gingerbeard Team Maker — front-end (parcours de composition + partage) */

/* Filet de sécurité indispensable : un sélecteur de classe (ex. .gtm-btn
   { display: inline-flex }) a exactement la même spécificité que la règle
   par défaut du navigateur "[hidden] { display: none }", et comme notre
   feuille de style est chargée après celle du navigateur, c'est NOTRE
   "display" qui l'emportait -- l'attribut hidden posé en JS n'avait plus
   aucun effet visuel (déjà rencontré une fois sur la modale de recadrage
   du backoffice). Cette règle, plus spécifique, garantit que "hidden"
   fonctionne toujours, quelle que soit la classe posée sur l'élément. */
.gtm-widget [hidden] {
	display: none !important;
}

.gtm-widget {
	/* Élargi de 720px à 960px (retour utilisateur explicite) : le
	   conteneur d'article du site est bien plus large que ça en desktop
	   (voir capture fournie), il y avait donc de la place inutilisée --
	   sous 780px de large, .gtm-field-layout repasse de toute façon en une
	   seule colonne (voir media query plus bas), donc ça n'affecte pas le
	   rendu mobile. */
	max-width: 960px;
	margin: 0 auto;
	/* Police du site (héritée du thème), pour que l'outil se fonde dans
	   la page et que l'image générée utilise la même. */
	font-family: inherit;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
	/* Le fond de la carte (dégradé navy, ou fond de stade uploadé sous un
	   voile de teinte) est posé ici en style inline par PHP
	   (render_builder(), $card_style) : il couvre l'en-tête ET le bloc
	   terrain, désormais transparents, comme le stade flou derrière le
	   visuel de référence. */
	border-radius: 12px;
	/* Les panneaux blancs pleine largeur (effectif, partage) sont rognés
	   par ces coins arrondis : plus de navy qui dépasse dans les coins bas
	   (retour utilisateur). */
	overflow: hidden;
	background-color: var(--gtm-bg, #0b1e3f);
	/* Pas d'"overflow: hidden" ici : ça casserait le positionnement "sticky"
	   de la pop-in de sélection par-dessus le terrain (voir plus bas). Les
	   coins arrondis sont donc appliqués directement au bandeau du haut et
	   du bas plutôt qu'en les découpant via le conteneur. */
}

/* Une fois l'image générée, le module de composition (en-tête + terrain)
   laisse la place au résultat -- on évite d'avoir les deux affichés en
   même temps, ce qui faisait double emploi et était confus. */
.gtm-widget-generated .gtm-header,
.gtm-widget-generated .gtm-squad-step,
.gtm-widget-generated .gtm-compose-block {
	display: none;
}

/* Sélecteur de formation : le visiteur choisit sa propre disposition avant
   de composer -- changer de formation reconstruit le terrain et repart
   d'une sélection vierge (voir rebuildPitch() dans gtm-frontend.js). */
.gtm-formation-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #fff;
	border-top: 1px solid #eee;
}

.gtm-formation-label {
	font-size: 13px;
	font-weight: 700;
	color: #555;
	margin-right: 4px;
}

.gtm-formation-option {
	border: 1px solid #ddd;
	background: #fafafa !important;
	color: #111;
	font-size: 13px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 20px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.gtm-formation-option:hover,
.gtm-formation-option:focus-visible {
	border-color: var(--gtm-accent, #ffd200);
}

.gtm-formation-option.gtm-formation-active {
	background: var(--gtm-accent, #ffd200);
	border-color: var(--gtm-accent, #ffd200);
	color: #111;
}

/* -----------------------------------------------------------------
 * En-tête façon visuel de référence "Équipe de France" : fond navy (la
 * couleur de fond de la carte, --gtm-bg), logo PNG détouré à gauche (plus
 * de forme fanion), titre en capitales blanches + sous-titre "Sélectionneur :
 * [nom en accent]" centrés, photo PNG détourée du sélectionneur calée en
 * bas à droite, les pieds coupés par le bas du bandeau.
 * ------------------------------------------------------------- */
.gtm-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 124px;
	padding: 14px 16px;
	background: transparent;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.gtm-header-logo {
	flex: 0 0 auto;
	width: 76px;
	height: 91px;
	display: block;
	overflow: visible;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.gtm-header-text {
	flex: 1 1 auto;
	min-width: 0;
	/* Centré entre le fanion et la photo du sélectionneur (retour
	   utilisateur). Le titre peut passer sous le bord fondu de la photo
	   (z-index). */
	position: relative;
	z-index: 1;
	text-align: center;
	padding-right: 110px;
}

/* Photo du sélectionneur : carré collé en haut à droite, bords gauche et
   bas fondus dans le fond (mask), coupé par le bas de l'en-tête. Pas de
   détourage nécessaire. */
.gtm-header-coach {
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: 190px;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%), linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%), linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	mask-composite: intersect;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.gtm-header-title {
	margin: 0;
	font-size: 28px;
	line-height: 1;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	/* Police du SITE (celle des titres du thème), pas une police
	   d'affichage imposée -- retour utilisateur : Impact était illisible.
	   Le canvas de l'image générée relit cette police calculée
	   (getComputedStyle) pour rester identique. */
	font-family: inherit;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.gtm-title-mobile {
	display: none;
}

.gtm-header-subtitle {
	margin: 6px 0 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	font-family: inherit;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.gtm-header-subtitle-value {
	color: var(--gtm-accent, #ffd200);
}

/* "avec [Molotov]" : toujours affiché, bien visible (branding). */
.gtm-header-with {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.gtm-header-with img {
	height: 38px;
	width: auto;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* Pied du terrain : ligne de diffusion à gauche, logo de chaîne à droite. */
.gtm-pitch-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 10px 12px 0;
	color: #fff;
}

.gtm-broadcast-line {
	font-size: 14px;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
	text-align: right;
}

.gtm-channel-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	background: #fff;
	border-radius: 8px;
}

.gtm-channel-badge img {
	height: 22px;
	width: auto;
	display: block;
}

/* Bouton "Modifier ma sélection" à droite de la barre des formations. */
.gtm-edit-squad-btn {
	margin-left: auto;
}

.gtm-btn-small {
	padding: 6px 12px;
	font-size: 13px;
}

/* Quota atteint : le bouton Suivant/Valider pulse une fois pour attirer
   l'œil (en plus du défilement jusqu'à lui). */
@keyframes gtm-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.gtm-pulse {
	animation: gtm-pulse 0.6s ease 2;
}

/* -----------------------------------------------------------------
 * Assistant de sélection de joueur ("wizard") : depuis la refonte v0.7.0,
 * un bloc EN FLUX NORMAL placé juste au-dessus du terrain, au lieu de
 * l'ancien panneau position:absolute qui pouvait chevaucher les rangées de
 * joueurs selon la formation choisie (bug remonté par l'utilisateur, quel
 * que soit le système de jeu). Étant toujours au même endroit du flux, un
 * simple scrollIntoView() (voir scrollWizardIntoView() dans
 * gtm-frontend.js), déclenché seulement si l'assistant n'est pas déjà
 * visible à l'écran, suffit à garder le visiteur au bon endroit -- plus
 * besoin de calcul pixel par ligne lié à l'ancien terrain retourné
 * (scaleY(-1), abandonné : le terrain garde désormais la même orientation
 * pendant la composition et sur l'image générée).
 * ------------------------------------------------------------- */

.gtm-wizard {
	width: 100%;
	/* Deux rangées de joueurs visibles sans scroller (titre + 2 × ~165px)
	   -- retour utilisateur ; au-delà (défense à 22 joueurs) le bloc scrolle. */
	max-height: 440px;
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	padding: 14px 16px 16px;
	margin: 0 0 14px;
	box-sizing: border-box;
	/* Desktop : glisse au-dessus de la rangée en cours (transform posé en
	   JS, positionWizard()), par-dessus le terrain. */
	position: relative;
	z-index: 5;
	transition: transform 0.45s ease;
	will-change: transform;
}

.gtm-wizard.gtm-picker-done {
	display: none;
}

/* Terrain + banc de remplaçants côte à côte en desktop, empilés en mobile
   (contrainte : une seule colonne dans le template d'article WordPress/
   GeneratePress -- voir la media query tout en bas). Le banc n'existe qu'en
   mode "squad" (voir .gtm-bench-panel plus bas). */
.gtm-field-layout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.gtm-pitch-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	/* Retour utilisateur : plus de marge latérale autour du terrain, il
	   occupe toute la largeur du bloc (le trapèze laisse voir le fond navy
	   dans les deux coins du haut seulement) -- une marge en haut pour les
	   plaques/têtes de la ligne d'attaque, une en bas pour celles du
	   gardien. */
	padding: 22px 0 16px;
	/* Transparent : le fond de la carte (.gtm-widget) est visible dans les
	   coins hauts découpés par le trapèze du terrain. */
	background: transparent;
}

.gtm-pitch {
	position: relative;
	width: 100%;
	padding-top: 150%;
	background-size: cover;
	background-position: center;
	/* Terrain en trapèze (perspective "caméra derrière le but du bas") :
	   les 4 coins sont calculés avec la même fonction que perspective_x()
	   côté PHP/JS (PERSPECTIVE_TOP_SCALE = 0.68), pour que le tracé du
	   clip-path corresponde exactement à la position des lignes du terrain
	   (.gtm-pitch-lines, en SVG déformé) et des postes cliquables. */
	/* Le clip-path trapézoïdal est posé en style inline par PHP
	   (GTM_Shortcode::clip_path_css()), calculé depuis la même constante
	   PERSPECTIVE_TOP_SCALE que les lignes et les postes -- plus de valeur
	   codée en dur ici qui pourrait diverger. */
	/* Retour utilisateur explicite (dernier retour en date) : composition et
	   image générée ont maintenant des orientations DIFFÉRENTES, exprès --
	   en composition, le gardien est en haut, puis défenseurs/milieux/
	   attaquants en descendant (ordre de lecture naturel pour construire le
	   11 type) ; sur l'image générée, l'orientation reste inversée
	   (attaquants en haut, gardien en bas, comme une affiche de composition
	   classique). Techniquement, aucun "flip" CSS ici : chaque poste
	   applique directement une position verticale recalculée
	   (100 - y) en PHP/JS pour la composition (voir render_builder() /
	   rebuildPitch()), pendant que l'image générée (canvas) continue
	   d'utiliser la coordonnée y d'origine sans recalage. Le fond du
	   terrain (lignes, trapèze) étant symétrique, ce recalage n'affecte que
	   la position des postes, jamais le tracé.
	   Le clip-path recadre déjà la zone visible en trapèze : plus besoin
	   du commentaire "pas d'overflow:hidden" d'une version précédente. */
}

.gtm-pitch-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Chaque poste est un vrai bouton cliquable sur le terrain : cliquer dessus
   (rempli ou non) ouvre directement sa sélection dans la pop-in. */
/* !important sur le fond ici (et sur .gtm-slot-mask juste après) : trouvé
   via l'inspecteur du navigateur que le thème du site charge une règle
   globale "button, input, select, textarea { background-color: #55555e; }"
   qui s'applique à CE bouton (c'est un vrai <button>) et gagnait la cascade
   -- c'était la véritable cause du carré sombre au survol/à la sélection,
   pas un bug de rendu. On la neutralise catégoriquement ici plutôt que de
   dépendre de la spécificité CSS face aux styles globaux du thème. */
.gtm-slot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 156px;
	background: none !important;
	background-color: transparent !important;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	z-index: 2;
}

/* -----------------------------------------------------------------
 * Médaillon d'un poste sur le terrain : séparé en deux éléments depuis la
 * v0.5.5 (masque circulaire + contenu) pour une piste de bug de rendu qui
 * s'est révélée fausse -- la vraie cause du fond sombre au survol était un
 * reset de bouton du thème du site (voir plus bas, "!important"), pas un
 * conflit lié aux transforms. On garde la séparation (utile pour la
 * bordure/le fond du cercle), mais le zoom s'applique maintenant au
 * MASQUE lui-même (cercle + bordure + photo ensemble), pas seulement à la
 * photo à l'intérieur -- demande explicite : c'est tout le médaillon qui
 * doit s'agrandir vers l'écran, pas juste la photo qu'il contient.
 * ------------------------------------------------------------- */
.gtm-slot-mask {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18) !important;
	border: 3px dashed rgba(255, 255, 255, 0.7);
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	color-scheme: light;
	transition: transform 0.15s ease;
}

.gtm-slot-medallion {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
}

/* Au survol : zoom sur le cercle ENTIER (bordure + photo), aucun fond/halo/
   ombre d'aucune sorte -- demande explicite et répétée de l'utilisateur. */
.gtm-slot:hover .gtm-slot-mask {
	transform: scale(1.12);
}

/* État "actif" (poste en cours de sélection dans la pop-in) : reste
   zoomé (comme au survol) tant que la sélection est ouverte, plus un
   anneau de contour (outline) -- aucun fond. */
.gtm-slot.gtm-slot-active .gtm-slot-mask {
	transform: scale(1.12);
	outline: 3px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
}

/* Poste VIDE en cours de sélection : rempli de jaune translucide en plus
   du zoom, pour qu'on voie tout de suite quel poste on remplit (retour
   utilisateur). Un poste déjà rempli garde sa photo. */
.gtm-slot.gtm-slot-active:not(.gtm-slot-filled) .gtm-slot-mask {
	background: color-mix(in srgb, var(--gtm-accent, #ffd200) 45%, transparent) !important;
	border-color: var(--gtm-accent, #ffd200);
	border-style: solid;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.gtm-slot.gtm-slot-active:not(.gtm-slot-filled) .gtm-slot-mask {
		background: rgba(255, 210, 0, 0.45) !important;
	}
}

.gtm-slot.gtm-slot-filled .gtm-slot-mask {
	border-style: solid;
	border-color: var(--gtm-accent, #ffd200);
	background: #fff !important;
}

.gtm-slot-medallion img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Empêche le "fantôme" de glisser-déposer natif du navigateur sur les
	   images (un rectangle sombre semi-transparent apparaît sinon autour
	   de la photo dès qu'on la survole/clique, avant même un vrai drag --
	   c'est ce carré gris/noir qui persistait malgré les ajustements de
	   box-shadow). */
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.gtm-slot-initials {
	font-weight: 700;
	color: #fff;
	font-size: 30px;
}

/* Plaque nom + poste sous le médaillon, façon "10 | MBAPPÉ" du visuel de
   référence : fond blanc, cellule de gauche en couleur d'accent avec le
   code du poste (à la place du numéro), nom en capitales navy. Poste vide :
   seule la cellule du poste est visible. */
.gtm-slot-plate {
	display: inline-flex;
	align-items: stretch;
	margin-top: 6px;
	max-width: 156px;
	height: 24px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	font-family: "Arial Narrow", "Helvetica Neue", Arial, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hauteur fixe + centrage vertical strict du code et du nom (retour
   utilisateur : noms mal centrés / qui dépassaient). line-height 1 pour
   neutraliser les réglages du thème. */
.gtm-slot-code {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 7px;
	font-size: 11px;
	line-height: 1;
	font-weight: 800;
	color: var(--gtm-bg, #0b1e3f);
	background: var(--gtm-accent, #ffd200);
}

.gtm-slot-name {
	flex: 0 1 auto;
	min-width: 0;
	display: block;
	height: 100%;
	line-height: 24px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--gtm-bg, #0b1e3f);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gtm-slot-name:empty {
	display: none;
}

/* Glisser-déposer entre postes : le poste d'origine s'estompe, la cible
   se surligne, le fantôme (copie du médaillon) suit le pointeur. */
.gtm-slot {
	touch-action: none;
}

.gtm-slot.gtm-slot-dragging .gtm-slot-mask {
	opacity: 0.35;
}

.gtm-slot.gtm-slot-drop-target .gtm-slot-mask {
	transform: scale(1.12);
	box-shadow: 0 0 0 4px var(--gtm-accent, #ffd200), 0 0 18px rgba(255, 210, 0, 0.6);
	border-radius: 50%;
}

.gtm-slot.gtm-slot-refused .gtm-slot-mask {
	animation: gtm-shake 0.4s ease;
}

@keyframes gtm-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.gtm-slot-ghost {
	position: fixed;
	z-index: 99999;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(1.05);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	opacity: 0.95;
}

.gtm-slot-ghost .gtm-slot-medallion {
	width: 100%;
	height: 100%;
}

/* Mention "Cap." sous la plaque du capitaine : blanc, sans fond (retour
   utilisateur explicite). */
.gtm-slot-captain {
	display: none;
	/* Hors flux (absolu, sous la plaque) : le "Cap." ne doit pas faire
	   remonter le médaillon et la plaque, centrés verticalement sur leur
	   point d'ancrage (retour utilisateur). */
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 2px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	font-family: "Arial Narrow", "Helvetica Neue", Arial, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.gtm-slot.gtm-slot-is-captain .gtm-slot-captain {
	display: block;
}

/* -----------------------------------------------------------------
 * Étape capitaine : une fois les 11 postes remplis, on demande qui est le
 * capitaine (retour utilisateur 0.13.0). Réutilise les cartes joueur du
 * sélecteur (.gtm-player-choice) pour rester cohérent.
 * ------------------------------------------------------------- */
.gtm-captain-step {
	margin: 14px 0 0;
	padding: 16px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	text-align: center;
}

.gtm-captain-title {
	margin: 0 0 12px;
	font-size: 16px;
	color: #111;
}

.gtm-captain-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.gtm-choice-code {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 800;
	color: #0b1e3f;
	background: var(--gtm-accent, #ffd200);
	padding: 1px 6px;
	border-radius: 4px;
}

/* -----------------------------------------------------------------
 * Banc de remplaçants (mode "squad" uniquement) : tout joueur de
 * l'effectif confirmé non affecté à une case du terrain, groupé par
 * catégorie de poste -- voir renderBench() dans gtm-frontend.js.
 * ------------------------------------------------------------- */

.gtm-bench-panel {
	/* Un peu plus large depuis l'élargissement du widget (720px → 960px) :
	   les vignettes agrandies (44px) ont davantage de place pour respirer. */
	flex: 0 0 210px;
	width: 210px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	padding: 12px;
	box-sizing: border-box;
	/* Le plafond de 640px déclenchait un ascenseur interne bien avant
	   d'avoir utilisé tout l'espace réellement disponible sous le terrain
	   (retour utilisateur explicite) -- gardé ici seulement comme filet de
	   sécurité pour un effectif très nombreux ; en usage normal, JS
	   (syncBenchHeight() dans gtm-frontend.js) fixe une hauteur exacte,
	   alignée sur celle du terrain, via une valeur inline qui prime sur ce
	   plafond. */
	max-height: 1400px;
	overflow-y: auto;
}

.gtm-bench-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: #111;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.gtm-bench-category {
	margin-bottom: 16px;
}

.gtm-bench-category-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	color: #777;
	text-transform: uppercase;
}

.gtm-bench-player {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
}

/* Vignettes agrandies (retour utilisateur : vu la place désormais
   disponible grâce à syncBenchHeight(), autant en profiter), le nom
   passant sur 2 lignes si besoin plutôt que d'être tronqué. */
.gtm-bench-player-photo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gtm-bench-player-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.gtm-bench-player-initials {
	font-weight: 700;
	color: #555;
	font-size: 14px;
}

.gtm-bench-player-name {
	font-size: 13px;
	font-weight: 600;
	color: #111;
	word-break: break-word;
	line-height: 1.2;
}

/* -----------------------------------------------------------------
 * Étape de sélection d'effectif (mode "squad") : réutilise la même
 * apparence de carte que .gtm-player-choice pour rester cohérente avec le
 * reste du parcours -- voir renderSquadStep() dans gtm-frontend.js.
 * ------------------------------------------------------------- */

.gtm-squad-step {
	background: #fff;
	/* Dernier bloc visible pendant la sélection d'effectif : pleine
	   largeur, sans coins arrondis ni marge basse, pour que le navy de la
	   carte ne dépasse pas dans les coins (retour utilisateur). */
	border-radius: 0;
	padding: 16px;
	margin-bottom: 0;
	text-align: center;
}

.gtm-squad-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	text-align: left;
}

.gtm-squad-title {
	margin: 0;
	font-size: 16px;
	color: #111;
}

.gtm-squad-quota-count {
	font-size: 13px;
	font-weight: 700;
	color: #555;
	background: #f2f2f2;
	padding: 4px 10px;
	border-radius: 20px;
}

.gtm-squad-grid {
	display: flex;
	flex-wrap: wrap;
	/* Toutes les vignettes d'une même rangée à la même hauteur. */
	align-items: stretch;
	gap: 12px;
	justify-content: center;
	margin-bottom: 16px;
}

/* Espace de la mention "Aussi disponible comme ..." toujours réservé
   (deux lignes), même vide : vignettes uniformes. */
/* Nom sur une hauteur fixe de deux lignes (centré dedans), puis la
   mention à distance constante : même écart nom/mention pour tous, qu'il
   y ait un ou deux mots au nom (retour utilisateur). */
.gtm-squad-choice .gtm-choice-name {
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gtm-squad-choice .gtm-choice-also {
	min-height: 24px;
	margin-top: 2px;
	padding-top: 0;
}

.gtm-squad-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 120px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fafafa !important;
	padding: 10px 6px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.gtm-squad-choice:hover,
.gtm-squad-choice:focus-visible {
	border-color: var(--gtm-accent, #ffd200);
	background: var(--gtm-accent, #ffd200) !important;
}

.gtm-squad-choice.gtm-selected,
.gtm-squad-choice.gtm-selected:hover {
	border-color: var(--gtm-accent, #ffd200);
	background: var(--gtm-accent, #ffd200) !important;
}

.gtm-squad-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.gtm-squad-next {
	font-size: 14px;
}

.gtm-squad-prev {
	font-size: 14px;
}

/* Joueur déjà retenu dans une AUTRE catégorie pendant la sélection
   d'effectif (certaines catégories se chevauchent sur les mêmes postes,
   ex. "Milieux offensifs" et "Attaquants" partagent les ailiers) : affiché
   grisé plutôt que masqué, pour que le visiteur comprenne qu'il existe mais
   n'est plus disponible ici. */
.gtm-squad-choice.gtm-used-elsewhere {
	opacity: 0.35;
	cursor: not-allowed;
}

.gtm-picker-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.gtm-step-chip {
	border: 1px solid #ddd;
	background: #fafafa;
	color: #444;
	font-size: 11px;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 20px;
	cursor: pointer;
}

.gtm-step-chip.gtm-step-done {
	background: var(--gtm-accent, #ffd200);
	border-color: var(--gtm-accent, #ffd200);
	color: #111;
}

.gtm-step-chip.gtm-step-active {
	outline: 2px solid #111;
	outline-offset: 1px;
}

.gtm-picker-head h3.gtm-picker-title {
	margin: 0 0 10px;
	font-size: 15px;
	color: #111;
}

.gtm-position-section.gtm-hidden {
	display: none;
}

.gtm-player-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gtm-player-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fafafa !important;
	padding: 10px 6px;
	cursor: pointer;
	/* Ce bouton n'avait pas les mêmes resets que .gtm-slot : le surlignage
	   tactile par défaut du navigateur (un rectangle gris/noir semi-
	   transparent au tap/clic) et l'anneau de focus par défaut pouvaient
	   apparaître ici même si le fond CSS lui-même était déjà jaune.
	   Le !important sur "background" ici (et sur ses états hover/selected
	   plus bas) neutralise un reset de bouton global du thème du site
	   (button, input, select, textarea { background-color: #55555e }) qui
	   gagnait sinon la cascade sur ce <button>. */
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

/* Au survol d'une carte joueur (avant même de cliquer), le fond passe au
   jaune Molotov -- le même jaune que les pastilles de poste (GB, DC...) --
   au lieu de rester blanc/gris. */
.gtm-player-choice:hover,
.gtm-player-choice:focus-visible {
	border-color: var(--gtm-accent, #ffd200);
	background: var(--gtm-accent, #ffd200);
}

.gtm-player-choice:hover .gtm-choice-name,
.gtm-player-choice:focus-visible .gtm-choice-name {
	color: #111;
	font-weight: 700;
}

/* Le cercle grossit légèrement au survol -- aucune ombre/halo, pour rester
   cohérent avec le terrain (uniquement l'effet de zoom). */
.gtm-player-choice:hover .gtm-choice-photo {
	transform: scale(1.1);
}

/* !important nécessaire ici : sur certains navigateurs, le style natif
   "pressed/active" d'un <button> peut s'appliquer après notre feuille de
   style et regriser le fond au clic malgré une spécificité CSS identique --
   on force donc explicitement le jaune Molotov, y compris pendant l'état
   actif juste après le clic. */
.gtm-player-choice.gtm-selected,
.gtm-player-choice.gtm-selected:hover,
.gtm-player-choice.gtm-selected:focus,
.gtm-player-choice.gtm-selected:focus-visible,
.gtm-player-choice.gtm-selected:active {
	border-color: var(--gtm-accent, #ffd200) !important;
	background: var(--gtm-accent, #ffd200) !important;
}

/* Ne pas repasser en gris pendant l'appui (juste avant que gtm-selected ne
   soit posé par le JS) -- le survol/l'appui doivent rester jaune en continu. */
.gtm-player-choice:active {
	background: var(--gtm-accent, #ffd200);
	border-color: var(--gtm-accent, #ffd200);
}

.gtm-player-choice.gtm-selected .gtm-choice-name {
	color: #111 !important;
	font-weight: 700;
}

.gtm-player-choice.gtm-used-elsewhere {
	opacity: 0.35;
	cursor: not-allowed;
}

.gtm-choice-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: #eee;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gtm-choice-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.gtm-choice-initials {
	font-weight: 700;
	color: #555;
	font-size: 24px;
}

.gtm-choice-name {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	line-height: 1.25;
	color: #111;
	word-break: break-word;
}

.gtm-choice-also {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	line-height: 1.2;
	font-weight: 500;
	color: #666;
	text-align: center;
}

.gtm-player-choice.gtm-selected .gtm-choice-also,
.gtm-squad-choice.gtm-selected .gtm-choice-also {
	color: rgba(0, 0, 0, 0.7);
}

.gtm-no-players {
	color: #a00;
	font-size: 13px;
}

/* -----------------------------------------------------------------
 * Panneau de partage.
 * ------------------------------------------------------------- */

.gtm-share-panel {
	padding: 20px 16px;
	text-align: center;
	background: #fff;
	border-radius: 0 0 12px 12px;
}

.gtm-share-result {
	margin-top: 16px;
	/* Ordre explicite : lien, boutons de partage, boutons de reprise, puis
	   le visuel généré nettement détaché en dessous (retour utilisateur). */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gtm-share-result .gtm-share-url {
	order: 2;
	width: 100%;
}

.gtm-share-result .gtm-share-buttons {
	order: 3;
}

.gtm-share-result .gtm-reset-buttons {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.gtm-share-preview-link {
	order: 1;
	display: block;
	max-width: 100%;
	margin: 0 0 24px;
	cursor: pointer;
}

.gtm-share-preview {
	display: block;
	max-width: 100%;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.gtm-share-url {
	margin: 0 0 14px;
	text-align: left;
}

.gtm-share-url-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #555;
	margin-bottom: 4px;
}

.gtm-share-url-input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	font-size: 13px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #f7f7f7;
	color: #222;
}

.gtm-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 14px;
}

/* -----------------------------------------------------------------
 * Boutons : même convention que Gingerbeard Top Maker -- centrés,
 * icône + libellé, forme pilule.
 * ------------------------------------------------------------- */

.gtm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	padding: 12px 22px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.gtm-btn-icon {
	font-size: 15px;
	line-height: 1;
}

.gtm-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Même convention que Gingerbeard Top Maker : tous les boutons de partage
   sont jaunes (couleur d'accent), sans distinction de couleur par réseau,
   et passent en noir au survol. */
.gtm-btn,
.gtm-btn-accent,
.gtm-btn-dark,
.gtm-btn-facebook,
.gtm-btn-outline {
	background: var(--gtm-accent, #ffd200);
	color: #111;
	border: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.gtm-btn:hover,
.gtm-btn:focus-visible {
	background: #000;
	color: #fff;
}

.gtm-btn:disabled,
.gtm-btn:disabled:hover {
	background: var(--gtm-accent, #ffd200);
	color: #111;
}

.gtm-generate-btn {
	font-size: 15px;
	padding: 13px 26px;
}

.gtm-change-captain-btn {
	margin-right: 10px;
	margin-bottom: 8px;
}

.gtm-widget-generated .gtm-change-captain-btn {
	display: none;
}

.gtm-regenerate-btn {
	margin-top: 0;
}

/* Couleurs de réseau sur les deux boutons de partage (retour utilisateur) :
   X en noir, Facebook en bleu -- les autres boutons restent jaunes. */
.gtm-share-result .gtm-share-x {
	background: #000;
	color: #fff;
}

.gtm-share-result .gtm-share-x:hover,
.gtm-share-result .gtm-share-x:focus-visible {
	background: #333;
	color: #fff;
}

.gtm-share-result .gtm-share-fb {
	background: #1877f2;
	color: #fff;
}

.gtm-share-result .gtm-share-fb:hover,
.gtm-share-result .gtm-share-fb:focus-visible {
	background: #0f5fcc;
	color: #fff;
}

.gtm-share-result .gtm-share-wa {
	background: #25d366;
	color: #fff;
}

.gtm-share-result .gtm-share-wa:hover {
	background: #1da851;
	color: #fff;
}

.gtm-share-result .gtm-btn-instagram {
	background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af);
	color: #fff;
}

.gtm-share-result .gtm-btn-tiktok {
	background: #000;
	color: #fff;
	box-shadow: inset 0 0 0 2px #69c9d0;
}

.gtm-share-result .gtm-btn-snapchat {
	background: #fffc00;
	color: #000;
}

.gtm-share-toast {
	display: block;
	width: 100%;
	margin-top: 8px;
	font-size: 13px;
	color: #333;
	text-align: center;
}

.gtm-result-page {
	text-align: center;
	padding: 16px;
	box-shadow: none;
}

.gtm-result-image {
	max-width: 100%;
	border-radius: 12px;
}

.gtm-result-cta {
	margin-top: 16px;
}

/* Contrainte explicite du projet : l'outil doit rester utilisable en une
   seule colonne (gabarit d'article WordPress/GeneratePress) -- le terrain
   et le banc de remplaçants, côte à côte en desktop, sont donc empilés ici
   plutôt que compressés l'un contre l'autre. */
@media ( max-width: 780px ) {
	.gtm-field-layout {
		flex-direction: column;
	}

	.gtm-bench-panel {
		width: 100%;
		flex: 1 1 auto;
		max-height: none;
	}
}

@media ( max-width: 600px ) {
	.gtm-wizard {
		max-height: 50vh;
	}

	.gtm-header-logo {
		width: 50px;
		height: 60px;
	}

	.gtm-header-coach {
		width: 130px;
		height: 130px;
		right: -6px;
	}

	.gtm-header-text {
		padding-right: 84px;
	}

	/* Titre court mobile à la place du titre desktop (BO). */
	.gtm-has-mobile-title .gtm-title-desktop {
		display: none;
	}

	.gtm-has-mobile-title .gtm-title-mobile {
		display: inline;
	}

	/* "(effectif compris)" sur sa propre ligne, centré. */
	.gtm-restart-squad-btn .gtm-btn-label {
		display: inline-block;
		text-align: center;
	}

	.gtm-restart-squad-btn .gtm-btn-sub {
		display: block;
		font-size: 12px;
		font-weight: 600;
	}

	.gtm-header-title {
		font-size: 20px;
	}

	.gtm-header-subtitle {
		font-size: 15px;
	}

	.gtm-header-with img {
		height: 26px;
	}

	.gtm-broadcast-line {
		font-size: 12px;
	}

	.gtm-slot-plate {
		max-width: 126px;
	}

	.gtm-slot-mask {
		width: 87px;
		height: 87px;
	}

	.gtm-slot {
		width: 126px;
	}

	.gtm-choice-photo {
		width: 80px;
		height: 80px;
	}

	.gtm-player-choice {
		width: 118px;
	}

	.gtm-squad-choice {
		width: 100px;
	}
}