/* Configurateur de maillots — snipe-sport.fr
   Les couleurs reprennent celles du site : navy #1a2a4f, orange #e8622a. */

/* Le panneau occupe toute la largeur sous la fiche : cent vignettes de maillot et un
   tableau d'effectif seraient illisibles dans une demi-colonne. `clear` le dégage des
   flottants que le thème pose sur la galerie et le résumé. */
#gbm-panneau { clear: both; width: 100%; margin: 2rem 0 1.5rem; }
#gbm-panneau:empty { display: none; }

/* Couleur de texte par défaut du panneau. Le thème colore largement, et un élément qui
   hérite d'un blanc se retrouve invisible sur nos fonds clairs — c'est ce qui avait fait
   disparaître le libellé d'un bouton de filtre. */
#gbm-panneau, #gbm-panneau p, #gbm-panneau span, #gbm-panneau label,
#gbm-panneau th, #gbm-panneau td, #gbm-panneau li { color: #1f2937; }

/* Le thème et WooCommerce stylent les `button` très largement — couleur de fond,
   couleur de texte, bordure, ombre. Nos boutons repartent donc de zéro et fixent
   *toutes* les propriétés concernées, sous un sélecteur assez spécifique pour l'emporter.
   Sans cela, un bouton à fond blanc héritait d'un texte blanc : le libellé était bien
   envoyé, mais invisible. */
#gbm-panneau .gbm-bouton-principal,
#gbm-panneau .gbm-bouton-secondaire,
#gbm-panneau .gbm-retirer {
	display: inline-block; border: 1px solid transparent; border-radius: 4px;
	font-family: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2;
	text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal;
	cursor: pointer; box-shadow: none; text-shadow: none; background-image: none;
	transition: background-color .15s ease;
}

#gbm-panneau .gbm-bouton-principal {
	padding: .7rem 1.4rem; background-color: #e8622a; color: #fff; border-color: #e8622a;
}
#gbm-panneau .gbm-bouton-principal:hover {
	background-color: #d4541f; border-color: #d4541f; color: #fff;
}
#gbm-panneau .gbm-bouton-principal[disabled] {
	background-color: #c9ccd2; border-color: #c9ccd2; color: #fff; cursor: not-allowed;
}

#gbm-panneau .gbm-bouton-secondaire {
	padding: .7rem 1.4rem; background-color: #eef0f4; color: #1a2a4f; border-color: #eef0f4;
}
#gbm-panneau .gbm-bouton-secondaire:hover {
	background-color: #dfe3ea; border-color: #dfe3ea; color: #1a2a4f;
}

.gbm-panneau {
	border: 1px solid #dde1e7; border-radius: 6px; padding: 1.2rem; background: #fff;
}
.gbm-chargement { padding: 2rem; text-align: center; color: #6b7280; }

/* Fil des étapes */
.gbm-etapes {
	display: flex; flex-wrap: wrap; gap: .4rem; list-style: none;
	margin: 0 0 1.2rem; padding: 0; counter-reset: gbm;
}
#gbm-panneau .gbm-etapes li {
	flex: 1 1 auto; padding: .45rem .8rem; border-radius: 3px; background: #f3f4f7;
	color: #6b7280; font-size: .82rem; font-weight: 600; counter-increment: gbm;
	white-space: nowrap;
}
/* Le numéro est porté par le libellé, pas par l'onglet : un seul bloc de texte, qui se
   centre d'un tenant quand il passe sur deux lignes. */
#gbm-panneau .gbm-etapes .gbm-etape-libelle::before { content: counter(gbm) ". "; }
#gbm-panneau .gbm-etapes li.actif { background: #1a2a4f; color: #fff; }
#gbm-panneau .gbm-etapes li.fait { background: #e8f0e8; color: #2d6a3e; cursor: pointer; }
/* Le libellé prend la couleur de son onglet : la règle de repli sur `#gbm-panneau span`
   l'écrirait sinon en sombre, et l'étape en cours disparaîtrait sur son fond bleu nuit. */
#gbm-panneau .gbm-etapes .gbm-etape-libelle { color: inherit; }

/* Choix du modèle */
/* Pleine largeur : on peut aligner bien plus de modèles par rangée qu'en colonne. */
.gbm-modeles {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: .8rem; max-height: 62vh; overflow-y: auto; padding: 2px;
}
#gbm-panneau .gbm-modele {
	border: 2px solid #e6e9ee; border-radius: 5px; background-color: #fff;
	background-image: none; padding: .4rem; cursor: pointer; text-align: center;
	box-shadow: none; text-shadow: none; color: #1a2a4f; font-weight: 400;
	display: block; width: 100%;
}
#gbm-panneau .gbm-modele:hover { border-color: #b9c0cc; background-color: #fff; }
#gbm-panneau .gbm-modele.actif { border-color: #e8622a; background-color: #fff; }
.gbm-vignette svg { width: 100%; height: auto; display: block; }
.gbm-nom { display: block; font-size: .72rem; color: #4b5563; margin-top: .25rem; }

/* Aperçu et couleurs : côte à côte dès qu'il y a la place, l'aperçu restant lisible. */
.gbm-apercu { margin-bottom: 1rem; max-width: 900px; }
.gbm-apercu svg { width: 100%; height: auto; display: block; }
.gbm-pastilles { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (min-width: 900px) {
	.gbm-couleurs-zone { display: grid; grid-template-columns: 1fr 260px; gap: 2rem;
		align-items: start; }
	.gbm-couleurs-zone .gbm-apercu { margin-bottom: 0; }
	.gbm-couleurs-zone .gbm-pastilles { flex-direction: column; gap: .8rem; }
	.gbm-recap { display: grid; grid-template-columns: 1fr 340px; gap: 2rem;
		align-items: start; }
}
.gbm-recap-visuels { min-width: 0; }
.gbm-recap-visuels .gbm-apercu { margin: 0; }
.gbm-pastille { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.gbm-pastille input[type="color"] {
	width: 38px; height: 38px; padding: 0; border: 1px solid #c9ccd2;
	border-radius: 4px; cursor: pointer; background: none;
}

/* Effectif */
.gbm-roster { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.gbm-roster th {
	text-align: left; font-size: .78rem; color: #6b7280; padding: .3rem .4rem;
	border-bottom: 1px solid #e6e9ee; font-weight: 600;
}
.gbm-roster td { padding: .25rem .4rem; }
.gbm-roster input, .gbm-roster select {
	width: 100%; padding: .4rem .5rem; border: 1px solid #dde1e7; border-radius: 3px;
	font-size: .88rem;
}
.gbm-roster td:nth-child(2) { width: 5.5rem; }
.gbm-roster td:nth-child(3) { width: 7.5rem; }
.gbm-roster td:last-child { width: 2.2rem; }
#gbm-panneau .gbm-retirer {
	background-color: transparent; border-color: transparent; color: #b32d2e;
	font-size: 1.3rem; padding: 0 .4rem; font-weight: 400;
}
#gbm-panneau .gbm-retirer:hover { background-color: #fdeaea; color: #8f2424; }
.gbm-actions-effectif { display: flex; gap: .6rem; flex-wrap: wrap; }
.gbm-vide { color: #6b7280; padding: 1.2rem 0; }

/* Récapitulatif */
.gbm-repartition { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex;
	flex-wrap: wrap; gap: .5rem; }
.gbm-repartition li {
	background: #f3f4f7; border-radius: 3px; padding: .25rem .7rem; font-size: .85rem;
}
.gbm-total { font-size: 1.15rem; font-weight: 700; color: #1a2a4f; margin: .3rem 0 1rem; }
.gbm-demande-libelle { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.gbm-demande {
	width: 100%; padding: .6rem; border: 1px solid #dde1e7; border-radius: 4px;
	font-size: .9rem; margin-bottom: 1rem; font-family: inherit;
}
.gbm-alerte {
	background: #fdf1ec; border-left: 3px solid #e8622a; padding: .6rem .8rem;
	margin-bottom: 1rem; font-size: .88rem;
}

.gbm-navigation {
	display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.2rem;
	padding-top: 1rem; border-top: 1px solid #eef0f4;
}
.gbm-navigation:empty { display: none; }
.gbm-navigation .gbm-bouton-principal:only-child { margin-left: auto; }

/* --- Mobile -----------------------------------------------------------------------
   Sur un écran de 390 px, le configurateur n'en gardait que 253 : quatre marges s'empilent
   de chaque côté — le conteneur d'Astra, le bloc WooCommerce, la fiche produit, puis le
   cadre du panneau. Le panneau sort donc des trois premières et occupe toute la largeur de
   l'écran, et son propre cadre se réduit à une marge de lecture.

   Le débord se calcule sur le centre du parent, qui est celui de l'écran : les marges du
   thème sont symétriques. Réservé au mobile, où `100vw` ne compte pas de barre de
   défilement ; sur un écran de bureau, il ferait défiler la page de côté. */
@media (max-width: 767px) {
	#gbm-panneau {
		width: 100vw; max-width: 100vw;
		margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	}
	.gbm-panneau {
		border-left: 0; border-right: 0; border-radius: 0; padding: 1rem .75rem;
	}

	/* Les sept onglets, en toutes lettres, sur deux lignes de quatre colonnes. Laissés
	   libres, ils s'étalaient sur trois lignes. Deux essais écartés : une seule ligne qui
	   défilait de côté (coupée au bord, elle se lisait comme un débordement) et des onglets
	   réduits à leur numéro (on ne savait plus où menait chaque étape). Un libellé trop long
	   pour sa colonne passe à la ligne dans son onglet plutôt que de déborder. */
	.gbm-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin-bottom: 1rem; }
	#gbm-panneau .gbm-etapes li {
		display: flex; align-items: center; justify-content: center;
		min-width: 0; padding: .45rem .25rem; text-align: center; font-size: .72rem; line-height: 1.2;
		white-space: normal;
	}

	/* Deux modèles par rangée : un seul, c'était cent écrans à faire défiler. */
	.gbm-modeles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-height: 70vh; }
	#gbm-panneau .gbm-modele { padding: .3rem; }

	.gbm-calques-zone { gap: 1rem; }
	.gbm-apercu { margin-bottom: .6rem; }
}

/* --- Calques : logos et textes --------------------------------------------------
   Les règles de couleur passent par `#gbm-panneau` : la règle de repli posée plus haut
   cible `#gbm-panneau li`, `span` et `label`, et un identifiant l'emporte sur deux
   classes. Sans cela, l'étape en cours s'affichait en bleu nuit sur bleu nuit. */

.gbm-calques-zone { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
	.gbm-calques-zone { grid-template-columns: 1fr 360px; align-items: start; }
	.gbm-calques-zone .gbm-apercu { margin-bottom: 0; }
}

#gbm-panneau .gbm-calques-panneau h3 {
	margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; color: #1a2a4f;
}
#gbm-panneau .gbm-aide {
	font-size: .85rem; color: #4b5563; margin: 0 0 .9rem; line-height: 1.5;
}
#gbm-panneau .gbm-vide { font-style: italic; margin-top: .8rem; }

.gbm-fichier-logo { display: none; }

#gbm-panneau .gbm-ajouter {
	display: block; width: 100%; padding: .5rem .9rem; font-size: .85rem; font-weight: 600;
	margin: 0 0 .9rem;
}

/* La liste des calques */
.gbm-calques { list-style: none; margin: 0; padding: 0; }
#gbm-panneau .gbm-calque {
	position: relative; padding: .6rem .7rem; margin-bottom: .5rem;
	border: 1px solid #e6e9ee; border-radius: 5px; background: #fff; cursor: pointer;
	font-size: .85rem; color: #1f2937;
}
#gbm-panneau .gbm-calque:hover { border-color: #b9c0cc; }
#gbm-panneau .gbm-calque.actif { border-color: #e8622a; background: #fdf6f3; }

#gbm-panneau .gbm-logo { display: flex; align-items: flex-start; gap: .6rem; }
.gbm-vignette-logo {
	width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain;
	border: 1px solid #e6e9ee; border-radius: 4px; background: #f7f8fa;
}
.gbm-attente { display: block; }
.gbm-calque-corps { flex: 1; min-width: 0; }
#gbm-panneau .gbm-calque-nom {
	display: block; font-weight: 600; margin-bottom: .3rem;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937;
}

.gbm-calque-tete {
	display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem;
}
#gbm-panneau .gbm-calque-num {
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #6b7280;
}

/* Le bouton de retrait : en haut à droite pour un logo, dans l'en-tête pour un texte. */
#gbm-panneau .gbm-retirer {
	padding: 0; width: 22px; height: 22px; line-height: 1; flex: 0 0 22px;
	background-color: transparent; background-image: none; border: 0; box-shadow: none;
	color: #9aa1ad; font-size: .9rem; cursor: pointer; border-radius: 3px;
}
#gbm-panneau .gbm-retirer:hover { background-color: #fdecec; color: #b32d2e; }

/* Le rôle du texte : trois boutons solidaires, un seul actif. */
.gbm-roles { display: flex; margin-bottom: .45rem; }
#gbm-panneau .gbm-role {
	flex: 1; padding: .3rem .2rem; font-size: .74rem; font-weight: 600;
	background-color: #f3f4f7; background-image: none; color: #4b5563;
	border: 1px solid #dde1e7; border-radius: 0; box-shadow: none; text-shadow: none;
	cursor: pointer; margin: 0;
}
#gbm-panneau .gbm-role:first-child { border-radius: 4px 0 0 4px; }
#gbm-panneau .gbm-role:last-child { border-radius: 0 4px 4px 0; }
#gbm-panneau .gbm-role + .gbm-role { border-left: 0; }
#gbm-panneau .gbm-role:hover { background-color: #e9ebf0; color: #1a2a4f; }
#gbm-panneau .gbm-role.actif {
	background-color: #1a2a4f; color: #fff; border-color: #1a2a4f;
}
#gbm-panneau .gbm-role-aide {
	font-size: .75rem; line-height: 1.4; color: #6b7280; margin: 0 0 .45rem;
}

#gbm-panneau .gbm-valeur {
	width: 100%; padding: .35rem .5rem; margin-bottom: .5rem;
	border: 1px solid #dde1e7; border-radius: 3px; font-size: .85rem; color: #1f2937;
}

/* Les réglages : police, couleur, taille, rotation */
.gbm-reglages { display: grid; gap: .35rem; }
#gbm-panneau .gbm-reglage {
	display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center;
	gap: .5rem; font-size: .78rem; color: #4b5563; margin: 0;
}
#gbm-panneau .gbm-reglage > span:first-child { color: #6b7280; }
.gbm-reglage input[type="range"] { width: 100%; margin: 0; }
.gbm-reglage input[type="color"] {
	width: 38px; height: 26px; padding: 0; border: 1px solid #c9ccd2; border-radius: 3px;
	cursor: pointer; background: none; justify-self: start;
}
#gbm-panneau .gbm-curseur output {
	font-variant-numeric: tabular-nums; font-size: .72rem; color: #6b7280;
	min-width: 2.8rem; text-align: right;
}

/* Le sélecteur de police : chaque option dans sa police, sur le texte saisi. */
.gbm-selecteur-police { position: relative; }
#gbm-panneau .gbm-police-courante {
	display: block; width: 100%; padding: .3rem .5rem; text-align: left;
	background-color: #fff; background-image: none; color: #1f2937;
	border: 1px solid #dde1e7; border-radius: 3px; box-shadow: none; text-shadow: none;
	font-size: 1rem; line-height: 1.4; cursor: pointer;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#gbm-panneau .gbm-police-courante:hover { background-color: #f7f8fa; color: #1f2937; }
.gbm-polices {
	display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
	max-height: 260px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none;
	background: #fff; border: 1px solid #dde1e7; border-radius: 4px;
	box-shadow: 0 6px 18px rgba(17, 24, 32, .12);
}
.gbm-selecteur-police.ouvert .gbm-polices { display: block; }
#gbm-panneau .gbm-police {
	padding: .35rem .6rem; cursor: pointer; font-size: 1.05rem; line-height: 1.5;
	color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#gbm-panneau .gbm-police:hover { background: #f3f4f7; }
#gbm-panneau .gbm-police.actif { background: #fdf6f3; }

/* --- Finitions IA --------------------------------------------------------------- */

/* Les deux champs de demande libre — finitions et récapitulatif. Une demande de finition
   se décrit en plusieurs phrases ; un champ de trois lignes poussait à abréger. La hauteur
   minimale tient même si le thème réécrit l'attribut `rows`. */
#gbm-panneau .gbm-demande {
	width: 100%; min-height: 9.5rem; padding: .6rem .7rem; margin-bottom: .8rem;
	border: 1px solid #dde1e7; border-radius: 4px; box-sizing: border-box;
	font-family: inherit; font-size: .88rem; line-height: 1.45; color: #1f2937;
	resize: vertical;
}

.gbm-finitions-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#gbm-panneau .gbm-finitions-actions .gbm-bouton-principal,
#gbm-panneau .gbm-finitions-actions .gbm-bouton-secondaire {
	flex: 1 1 auto; padding: .6rem 1rem; font-size: .88rem;
}

/* L'attente : une ligne qui respire doucement, pour dire que rien n'est figé pendant la
   trentaine de secondes de génération. Même souffle qu'à l'origine — une inspiration toutes
   les 1,6 s —, mais aux deux couleurs de Snipe : chaque souffle passe de l'orange au bleu.
   Un clignotement franc a été essayé, plus agressif à l'œil. */
#gbm-panneau .gbm-chargement {
	font-size: .85rem; font-weight: 600; color: #e8622a; margin: 0 0 .8rem;
	animation: gbm-respire 3.2s ease-in-out infinite;
}
@keyframes gbm-respire {
	0%, 100% { color: #e8622a; opacity: 1; }
	25%      { color: #e8622a; opacity: .45; }
	50%      { color: #1a2a4f; opacity: 1; }
	75%      { color: #1a2a4f; opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
	#gbm-panneau .gbm-chargement { animation: none; }
}

/* La remise du logo de la marque : sous le logo, et dans le récapitulatif. */
#gbm-panneau .gbm-remise-aide {
	margin: 0 0 .35rem; font-size: .75rem; line-height: 1.4; font-weight: 600; color: #2d6a3e;
}
.gbm-remise {
	display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
	margin: 0 0 .3rem; font-size: .9rem;
}
#gbm-panneau .gbm-remise dt { margin: 0; font-weight: 400; color: #4b5563; }
#gbm-panneau .gbm-remise dd { margin: 0; text-align: right; color: #1f2937; }
#gbm-panneau .gbm-remise dt:nth-of-type(2),
#gbm-panneau .gbm-remise dd:nth-of-type(2) { color: #2d6a3e; font-weight: 600; }

/* --- Mise en situation ----------------------------------------------------------- */

.gbm-mannequin { margin: 0 0 1.6rem; }
#gbm-panneau .gbm-mannequin h3 {
	margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 700; color: #1a2a4f;
}
.gbm-mannequin-image {
	display: block; width: 100%; height: auto;
	border: 1px solid #e6e9ee; border-radius: 6px; background: #f7f8fa;
}
#gbm-panneau .gbm-mannequin .gbm-aide { margin: .5rem 0 0; font-size: .78rem; }

/* La maquette à plat passe sous la photo : elle devient la référence, pas l'accroche. */
.gbm-recap-visuels .gbm-apercu {
	border-top: 1px solid #eef0f4; padding-top: 1.2rem;
}

/* La bascule d'affichage du calque engendré. */
#gbm-panneau .gbm-bascule {
	display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem;
	font-size: .85rem; font-weight: 600; color: #1f2937; cursor: pointer;
}
.gbm-bascule input[type="checkbox"] {
	width: 16px; height: 16px; margin: 0; accent-color: #e8622a; cursor: pointer;
}