/** Shopify CDN: Minification failed

Line 2630:0 Unexpected "}"

**/
/* ============================================================================
   SECTION « Composez votre pack » — Guinguette Club
   ============================================================================
   Guilhem, 01/09/2026 : « ne reprend pas l'interface que pour illustrator ça
   n'a rien à voir ça c'est pour les clients », puis « c'est pour cette page
   exactement /pages/nos-offre-pour-les-clubs », puis « ça doit etre une section
   pas une page ».

   L'HABILLAGE EST RELEVE, PAS INVENTE. Mesure du 01/09/2026 sur la page cible :
   fond blanc, `Outfit` partout (909 elements sur l'accueil), `Sour Gummy` 700
   pour les titres (42 et 56 px), noir rgb(20, 23, 28), accent orange
   rgb(255, 107, 0), rayons de 14 et 16 px, boutons en pilule.

   TOUT EST PORTE PAR `.gg-config`. Une section s'insere dans un theme qu'elle
   ne connait pas : aucune regle ne vise `body`, `h1` ou `section` — le theme
   les utilise deja pour autre chose. Les noms de classes sont prefixes pour la
   meme raison.
   ========================================================================= */
.gg-config {
  --gg-blanc: #ffffff;
  --gg-noir: #14171c;
  --gg-texte: rgba(0, 0, 0, .78);
  --gg-doux: rgba(0, 0, 0, .5);
  --gg-ligne: rgba(0, 0, 0, .12);
  --gg-gris: #f5f5f5;
  --gg-orange: #ff6b00;
  --gg-vert: #30a187;
  --gg-rayon: 16px;

  font-family: "Outfit", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gg-texte);
  box-sizing: border-box;
}
.gg-config *, .gg-config *::before, .gg-config *::after { box-sizing: inherit; }

.gg-config .gg-aide { color: var(--gg-doux); font-size: 14px; margin: 0; }

/* ── LE QUESTIONNAIRE ────────────────────────────────────────────────────────
   Une question occupe l'ecran, on repond, on avance. C'est ce que Guilhem
   demande : « question par question style type form ». La jauge dit ou l'on en
   est — sans elle, un questionnaire donne l'impression de ne pas finir. */
.gg-config .gg-jauge {
  height: 4px; background: var(--gg-gris);
  border-radius: 999px; overflow: hidden; margin-bottom: 34px;
}
.gg-config .gg-jauge-barre {
  height: 100%; width: 0; background: var(--gg-orange);
  border-radius: 999px; transition: width .3s ease;
}
.gg-config .gg-etape { max-width: 760px; }
.gg-config .gg-rang {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gg-orange); margin-bottom: 10px;
}
.gg-config .gg-question {
  font-family: "Sour Gummy", "Outfit", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--gg-noir);
  margin: 0 0 8px;
}
.gg-config .gg-reponse { margin: 24px 0 30px; }

.gg-config .gg-nav { display: flex; align-items: center; gap: 16px; }
.gg-config .gg-cta {
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--gg-noir); color: var(--gg-blanc);
  border: 1px solid var(--gg-noir); border-radius: 999px;
  padding: 15px 34px; cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .gg-config .gg-cta:hover { background: var(--gg-orange); border-color: var(--gg-orange); } }
.gg-config .gg-cta[disabled] {
  background: var(--gg-gris); border-color: var(--gg-gris);
  color: var(--gg-doux); cursor: not-allowed;
}
.gg-config .gg-lien {
  font-family: inherit; font-size: 14px; background: none; border: 0;
  color: var(--gg-doux); cursor: pointer; padding: 6px 2px;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .gg-config .gg-lien:hover { color: var(--gg-noir); } }
.gg-config .gg-lien[hidden] { display: none; }

/* ── LA REMISE A ZERO SE VOIT, SANS SE PROPOSER ────────────────────────────
   Guilhem, 07/09/2026 : « il faut un bouton pour reset ». Il est a l'oppose du
   bouton d'avancement — le pouce qui vise « Continuer » ne peut pas l'effleurer
   — et discret tant qu'on ne le survole pas : c'est une sortie de secours, pas
   une invitation. Il rougit au survol, seul endroit de la section ou une action
   annonce qu'elle detruit. */
.gg-config .gg-raz { margin-left: auto; font-size: 13px; opacity: .75; }
@media (hover: hover) { .gg-config .gg-raz:hover { color: #c0392b; opacity: 1; } }

/* les reponses en cartes : une cible large se clique du pouce */
.gg-config .gg-cartes {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.gg-config .gg-carte {
  border: 1.5px solid var(--gg-ligne); border-radius: var(--gg-rayon);
  padding: 20px 18px; cursor: pointer; background: var(--gg-blanc);
  font-size: 17px; font-weight: 500; color: var(--gg-noir);
  transition: border-color .15s, box-shadow .15s;
}
@media (hover: hover) { .gg-config .gg-carte:hover { border-color: var(--gg-noir); } }
.gg-config .gg-carte.gg-actif {
  border-color: var(--gg-orange); box-shadow: inset 0 0 0 1px var(--gg-orange);
  font-weight: 700;
}

/* le nuancier : 31 pastilles rondes, comme les pastilles produit du site */
.gg-config .gg-nuancier {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
}
.gg-config .gg-teinte {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: center; color: var(--gg-doux);
  font-size: 11px; line-height: 1.25;
}
.gg-config .gg-teinte i {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  margin-bottom: 6px; transition: transform .12s, box-shadow .12s;
}
@media (hover: hover) { .gg-config .gg-teinte:hover i { transform: scale(1.08); } }
.gg-config .gg-teinte.gg-actif i {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--gg-orange);
}
.gg-config .gg-teinte.gg-actif { color: var(--gg-noir); font-weight: 700; }

/* le depot du logo */
.gg-config .gg-depot {
  display: block; border: 1.5px dashed var(--gg-ligne);
  border-radius: var(--gg-rayon); padding: 34px 20px; text-align: center;
  cursor: pointer; color: var(--gg-doux); background: var(--gg-gris);
  transition: border-color .15s, color .15s, background .15s;
}
@media (hover: hover) { .gg-config .gg-depot:hover { border-color: var(--gg-orange); color: var(--gg-noir); } }
.gg-config .gg-depot.gg-charge {
  border-style: solid; border-color: var(--gg-vert); color: var(--gg-vert);
  background: var(--gg-blanc); font-weight: 700;
}
/* ── L'APERCU DU LOGO ───────────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « logo déformé quand on l'upload ».
   `width: auto; height: auto` explicites : beaucoup de thèmes posent un
   `img { width: 100% }` général, et une largeur imposée avec une hauteur
   plafonnée écrase l'image. `object-fit: contain` verrouille le rapport quoi
   qu'il arrive.

   ── ET LE DAMIER DIT LA TRANSPARENCE ────────────────────────────────────────
   « fais en sorte qu'on voie quand le logo a un fond et quand le fond est
   transparent ». Sur du blanc, un fond blanc et une transparence se ressemblent
   trait pour trait. Le damier — la convention de tous les logiciels d'image —
   les sépare d'un coup d'œil, sans une phrase à lire. */
.gg-config .gg-depot img {
  width: auto; height: auto;
  max-height: 110px; max-width: 240px;
  object-fit: contain;
  display: block; margin: 0 auto 10px;
  /* ── LE DAMIER CONTRASTE, ET LE CADRE DIT L'EMPRISE ───────────────────────
     Guilhem, 07/09/2026 : « là le fond n'est pas retiré mais on dirait qu'il
     n'y en a pas car c'est blanc sur blanc, fais en sorte qu'il y ait un
     contraste ».
     Le damier était trop pâle, et surtout il ne servait qu'au cas transparent :
     un logo sur fond BLANC le recouvre entièrement — c'est normal, c'est même
     ce qu'on veut montrer — mais le rectangle blanc obtenu se confondait alors
     avec la carte, blanche elle aussi. On ne voyait donc rien du tout.
     Deux corrections qui se complètent :
       * le damier passe en gris franc, pour qu'un blanc opaque s'en détache ;
       * un LISERÉ ceint l'image, toujours. C'est lui qui dit l'emprise réelle
         du fichier — avec un fond, on voit le rectangle ; sans fond, le liseré
         épouse le damier et l'on voit tout de suite qu'il n'y a rien dedans.
     `outline` et non `border` : il ne rentre pas dans le calcul de la boîte, et
     ne peut donc pas décaler l'aperçu d'un pixel. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ccd2d8 25%, transparent 25%, transparent 75%, #ccd2d8 75%),
    linear-gradient(45deg, #ccd2d8 25%, transparent 25%, transparent 75%, #ccd2d8 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  outline: 1px solid rgba(0, 0, 0, .28);
  outline-offset: 0;
}
/* le verdict de la mesure, sous l'aperçu */
.gg-config .gg-depot-fond {
  margin: 10px 0 0; font-size: 13px; font-weight: 600;
}
.gg-config .gg-depot-fond[hidden] { display: none; }
.gg-config .gg-fond-net { color: var(--gg-vert); }
.gg-config .gg-fond-plein { color: var(--gg-orange); }
.gg-config input[type="file"] { display: none; }

/* ── LE PACK ─────────────────────────────────────────────────────────────── */
.gg-config .gg-entete { margin-bottom: 26px; }
/* dans l'entete du pack, les deux liens se suivent : « Modifier mes reponses »
   d'abord, la remise a zero apres, separee par un point median */
.gg-config .gg-entete .gg-raz { margin-left: 14px; }
.gg-config .gg-entete .gg-raz::before {
  content: "·"; margin-right: 14px; text-decoration: none;
  display: inline-block; color: var(--gg-doux);
}
.gg-config .gg-titre {
  font-family: "Sour Gummy", "Outfit", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(26px, 3.6vw, 42px);
  color: var(--gg-noir); margin: 0 0 6px;
}
/* TROIS COLONNES, ET UNE SECTION PLUS LARGE.
   Guilhem, 01/09/2026 : « fais juste la section plus large et on peut voir les
   images individuellement ». J'avais empile les pieces sur toute la largeur
   pour les agrandir — il prefere garder la vue d'ensemble et ouvrir chaque
   visuel a la demande. La section s'etale donc au-dela de la colonne de texte
   du theme, et le clic fait le reste. */
/* ── DE L'AIR AU-DESSUS ────────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « mets de la margin, c'est collé au header là ».
   La section commencait a 71 px du haut de la page, c'est-a-dire PILE sous
   l'en-tete du theme, sans un pixel entre les deux. Elle n'en avait jamais eu
   besoin : le bandeau photo du theme lui servait de respiration, et je l'ai
   retire ce matin.
   `padding` et non `margin` : la reserve du bas est deja un `padding-bottom`
   pose en JavaScript pour la barre collante, et melanger les deux rendrait la
   somme illisible. */
.gg-config { max-width: 1600px; margin-inline: auto; padding-top: 48px; }
@media (max-width: 720px) { .gg-config { padding-top: 26px; } }
/* ── UNE MARGE AUSSI ENTRE LE TELEPHONE ET 1600 PX ─────────────────────────
   Mesure le 23/09/2026 a 1440 px : le titre, le champ et « Continuer »
   commencaient a x = 0, colles au bord. Le theme ne pose aucune marge ; seule
   la largeur mobile (<= 720 px) en avait une. Au-dela de 1600 + 2 x 32 px, le
   centrage suffit. */
@media (min-width: 721px) and (max-width: 1663px) { .gg-config { padding-inline: 32px; } }
/* LE CONTENEUR N'EST PLUS UNE GRILLE. Il l'etait quand il n'y avait qu'un pack ;
   maintenant il empile des bandeaux et des grilles, un jeu par pack. L'oublier
   rangeait le titre du pack club dans une colonne a cote des pieces du pack
   saison — mesure a l'ecran le 02/09/2026. */
.gg-config .gg-pieces { display: block; }
.gg-config .gg-piece {
  border: 1px solid var(--gg-ligne); border-radius: var(--gg-rayon);
  padding: 16px 16px 18px; background: var(--gg-blanc);
  display: flex; flex-direction: column;
}
.gg-config .gg-piece h3 {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 13px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gg-noir); margin: 0 0 12px;
}
.gg-config .gg-piece .gg-vue { cursor: zoom-in; flex: 1 1 auto; }
.gg-config .gg-piece .gg-designs { margin-top: 14px; }

.gg-config .gg-vue { min-height: 150px; }
.gg-config .gg-vue svg { display: block; width: 100%; height: auto; }
.gg-config .gg-designs { display: flex; gap: 8px; flex-wrap: wrap; }
.gg-config .gg-puce {
  border: 1px solid var(--gg-ligne); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; font-size: 13px; font-weight: 500;
  background: var(--gg-blanc); color: var(--gg-texte); font-family: inherit;
}
@media (hover: hover) { .gg-config .gg-puce:hover { border-color: var(--gg-noir); color: var(--gg-noir); } }
.gg-config .gg-puce.gg-actif {
  background: var(--gg-noir); border-color: var(--gg-noir);
  color: var(--gg-blanc); font-weight: 700;
}

.gg-config .gg-pied { margin-top: 30px; text-align: center; }
.gg-config .gg-pied .gg-aide { margin-top: 12px; }

.gg-config .gg-controle {
  margin-top: 30px; border-top: 1px solid var(--gg-ligne); padding-top: 14px;
}
.gg-config .gg-controle summary {
  cursor: pointer; font-size: 12px; color: var(--gg-doux);
  text-transform: uppercase; letter-spacing: .08em;
}
.gg-config .gg-controle .gg-aide { margin-top: 10px; font-size: 12.5px; }
.gg-config .gg-controle b { color: var(--gg-noir); }

/* LE CHOIX DU DESIGN SE FAIT SUR IMAGE, pas sur un numero. Les apercus portent
   deja les couleurs repondues aux questions precedentes — c'est ce qui permet
   de choisir vraiment. */
.gg-config .gg-apercus {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gg-config .gg-apercu {
  border: 1.5px solid var(--gg-ligne); border-radius: var(--gg-rayon);
  background: var(--gg-blanc); cursor: pointer; padding: 14px 14px 12px;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--gg-noir);
  transition: border-color .15s, box-shadow .15s;
}
@media (hover: hover) { .gg-config .gg-apercu:hover { border-color: var(--gg-noir); } }
.gg-config .gg-apercu.gg-actif {
  border-color: var(--gg-orange); box-shadow: inset 0 0 0 1px var(--gg-orange);
  font-weight: 700;
}
.gg-config .gg-apercu .gg-vue { min-height: 90px; margin-bottom: 8px; }
.gg-config .gg-apercu span { display: block; }

/* ── LA LOUPE ─────────────────────────────────────────────────────────────── */
.gg-config .gg-loupe {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gg-config .gg-loupe[hidden] { display: none; }
/* LA LOUPE TIENT DANS L'ECRAN, ENTIEREMENT.
   Guilhem, 02/09/2026 : « pas de scroll on doit pouvoir voir tout le visuel ».
   La boite etait `overflow: auto` : un vetement plus haut que 92 vh se coupait
   et demandait de faire defiler — c'est-a-dire de ne jamais le voir en entier.
   On borne desormais la HAUTEUR DU VISUEL, et c'est lui qui se met a l'echelle. */
.gg-config .gg-loupe-boite {
  background: var(--gg-blanc); border-radius: var(--gg-rayon);
  padding: 18px 22px 22px; width: min(1180px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
/* UNE HAUTEUR FIXE, PAS UNE HAUTEUR LIBRE.
   Guilhem, 03/09/2026 : « refais bien toutes les dimensions [...] chaque
   produit doit avoir la meme dimension ». La boite etait `flex: 1 1 auto` :
   sa hauteur venait donc du RAPPORT du dessin, et les trois designs du meme
   sac a dos s'affichaient a trois tailles differentes — la fenetre elle-meme
   changeait de taille d'un design a l'autre.
   On borne la boite ; c'est le dessin qui se cale dedans. */
.gg-config .gg-loupe-boite .gg-vue {
  flex: 0 0 auto; position: relative; height: 68vh; min-height: 0;
  overflow: hidden;
}
/* `height: 100%` sur le SVG et non `auto` : sans hauteur bornee, un SVG prend
   celle que son rapport lui donne, et deborde. `preserveAspectRatio` fait le
   reste — le dessin se cale, il ne se deforme pas. */
.gg-config .gg-loupe-boite .gg-vue svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.gg-config .gg-loupe-tete {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.gg-config .gg-loupe-tete h3 {
  font-size: 15px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gg-noir); margin: 0; flex: 1 1 auto;
}
.gg-config .gg-fermer {
  border: 0; background: none; font-size: 30px; line-height: 1;
  cursor: pointer; color: var(--gg-doux); padding: 0 4px;
}
@media (hover: hover) { .gg-config .gg-fermer:hover { color: var(--gg-noir); } }

/* LE BANDEAU DE VERSION — a retirer avant la mise en ligne.
   Il ne sert qu'a la mise au point : savoir d'un coup d'oeil si la page
   affiche le dernier script, sans avoir a ouvrir quoi que ce soit. */
.gg-config .gg-version {
  background: var(--gg-orange); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; text-align: center;
  padding: 7px 12px; border-radius: 999px; margin-bottom: 18px;
}

/* La note sous la vignette du logo : ce que le detourage a fait du fichier
   depose. Discrete quand tout va bien, orangee quand on a refuse d'agir. */
.gg-config .gg-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0, 0, 0, .5);
}
.gg-config .gg-alerte { color: #C25400; }

/* Le champ de saisie du nom du club — un seul mot a taper, on lui donne la
   place et la taille d'une reponse, pas d'un formulaire administratif. */
.gg-config .gg-champ {
  width: 100%;
  max-width: 460px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  color: inherit;
  box-sizing: border-box;
}
/* ── L'EXEMPLE NE DOIT PAS PASSER POUR UNE REPONSE ─────────────────────────
   Guilhem, 07/09/2026 : « le texte placeholder, baisse l'opacité, là on dirait
   que c'est déjà écrit dans le champ texte ».
   Le champ est grand et sa police est celle d'une reponse : « Rugby Club des
   Monts » s'y lisait comme un nom deja saisi, et l'on pouvait passer a la
   suite en croyant avoir repondu. L'exemple descend donc a la teinte des
   textes secondaires de la section, et l'italique acheve de le distinguer —
   deux signaux valent mieux qu'un, un contraste faible seul se lit encore
   comme du texte normal sur un ecran en plein soleil.
   `::placeholder` n'herite pas de la couleur du champ : il faut l'ecrire. */
.gg-config .gg-champ::placeholder {
  color: rgba(0, 0, 0, .34);
  font-style: italic;
  opacity: 1;              /* Firefox l'attenue encore de lui-meme sans cela */
}
.gg-config .gg-champ:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .07);
}

/* ── LES CARTES DE PACK, COTE A COTE ────────────────────────────────────────
   C'est le pack qu'on vend : il a droit a une carte, un prix lisible de loin et
   ses produits ranges dedans. Les cartes tiennent sur une rangee tant que la
   place le permet, et passent l'une sous l'autre en dessous de 900 px — au-dela
   de deux packs elles se repartissent d'elles-memes. */
/* ── LE VISUEL QUI ARRIVE ───────────────────────────────────────────────────
   Guilhem, 03/09/2026 : « fais lazy loading quand on change entre les
   designs ». Le visuel precedent RESTE en place le temps du chargement — on ne
   vide jamais la boite, c'est la regle « pas de clignotement » du 01/09 — et un
   battement discret dit qu'il se passe quelque chose. Deux secondes sans rien
   se lisent comme une panne ; les memes deux secondes avec un signe se lisent
   comme une attente. */
/* Le visuel en place s'estompe un peu — il est encore juste, il n'est plus
   d'actualite — et un petit rond tourne par-dessus. */
.gg-config .gg-vue.gg-attente > svg { opacity: .35; transition: opacity .15s; }

/* ── L'ATELIER OU LES VISUELS SE PREPARENT ─────────────────────────────────
   Hors de la vue, et surtout hors de la mise en page : `contain: strict` dit au
   navigateur que rien de ce qui se passe la-dedans ne peut changer le reste de
   la page. Sans cela, chaque lecture de style pendant la preparation forcait un
   recalcul de la page entiere — 5 403 ms pour le seul sweat coton sur la
   boutique, contre 30 ms sur la page d'essai.
   La taille est FIXE et non nulle : les mesures de geometrie ont besoin d'un
   repere, un conteneur plat rendrait des boites degenerees. */
.gg-atelier {
  position: fixed; top: 0; left: -99999px;
  width: 600px; height: 400px;
  contain: strict;
  visibility: hidden; pointer-events: none;
}

@keyframes gg-tourne { to { transform: rotate(360deg); } }
.gg-config .gg-loader {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2.5px solid rgba(0, 0, 0, .14);
  border-top-color: var(--gg-noir);
  border-radius: 50%;
  pointer-events: none;
  /* LE DELAI EST EN JAVASCRIPT, PAS ICI : les animations CSS sont suspendues
     quand l'onglet n'est pas affiche, et un `animation-delay` ne se verifie
     pas. Le rond n'est ajoute au document qu'apres 150 ms d'attente reelle. */
  animation: gg-tourne .7s linear infinite;
}
/* Dans une vignette de 118 px, le meme rond serait envahissant. */
.gg-config .gg-pack-produits .gg-loader {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-width: 2px;
}

/* ── LE CARROUSEL DES PACKS ─────────────────────────────────────────────────
   Guilhem, 03/09/2026 : « fais un carousel pour presenter les packs ».

   Cinq packs cote a cote au rugby, c'etait cinq cartes ecrasees ou une colonne
   interminable. Une carte a la fois, et l'on passe a la suivante.

   LES CARTES SONT TOUTES DE LA MEME HAUTEUR. Dans une grille `align-items:
   start`, chacune prenait celle de son contenu : un pack de quatre pieces
   depassait un pack de trois, et le carrousel sautait a chaque glissement. En
   ligne flex, `stretch` par defaut, elles s'alignent sur la plus haute. */
/* ── DE LA PLACE POUR LES FLECHES, HORS DES CARTES ─────────────────────────
   Guilhem, 04/09/2026 : « fais en sorte que les flèches du carrousel soient
   bien à l'extérieur des cartes ». Elles etaient posees a 6 px des bords, donc
   PAR-DESSUS la premiere et la derniere carte.
   On ne les sort pas de la section pour autant : une note du fichier rappelle
   qu'a -18 px elles depassaient du cadre et se faisaient rogner par le bord de
   la page. On creuse donc une gouttiere DANS le carrousel — la rangee de cartes
   se retrecit d'autant, les fleches s'y logent, et rien ne deborde. */
.gg-config .gg-carrousel { position: relative; padding: 0 68px; }
@media (max-width: 720px) {
  .gg-config .gg-carrousel { padding: 0; }
}
.gg-config .gg-packs {
  /* Guilhem, 04/09/2026 : « mets un peu plus de marges horizontales entre les
     cartes du carrousel ». 22 -> 34 px. Les trois `calc` ci-dessous comptent
     les gouttieres : 2 x 34 a trois cartes, 1 x 34 a deux. Changer l'un sans
     les autres decale la derniere carte hors de son cran. */
  display: flex; gap: 34px;
  cursor: grab;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* PAS DE `scroll-behavior: smooth` ICI. Mesure du 03/09/2026 : avec cette
     regle, ecrire `scrollLeft` ne bougeait pas d'un pixel sur ce conteneur, et
     `scrollTo({behavior:"smooth"})` non plus — le defilement par cran et
     l'animation se neutralisent. Sans elle, l'ecriture prend immediatement.
     Le glissement au doigt et la molette gardent leur inertie native. */
  scrollbar-width: none;
  /* de quoi loger la moitie de pastille qui deborde de chaque carte : 29 px de
     rayon, arrondis a 32. Sans cela, un conteneur a defilement la couperait. */
  padding: 32px 32px 4px 0;
}
.gg-config .gg-packs::-webkit-scrollbar { display: none; }
/* TROIS CARTES PAR ECRAN. Guilhem, 03/09/2026 : « 3 cartes de large pour le
   carrousel ». La gouttiere se retire du calcul, sinon la troisieme carte
   deborde et le cran tombe a cote. */
.gg-config .gg-packs > .gg-pack-carte {
  flex: 0 0 calc((100% - 68px) / 3);
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .gg-config .gg-packs > .gg-pack-carte { flex: 0 0 calc((100% - 34px) / 2); }
}
@media (max-width: 720px) {
  .gg-config .gg-packs > .gg-pack-carte { flex: 0 0 100%; }
}
/* Les fleches se posent SUR les bords de la carte, pas au-dessus du dessin. */
/* ── ON DOIT VOIR QUE ÇA DÉFILE ────────────────────────────────────────────
   Guilhem, 09/09/2026 : « met plus en valeur le fait que ce soit un carrousel,
   là on comprend pas, plus grandes flèches ».

   Elles étaient blanches, cerclées d'un gris à 12 % et posées sur un fond
   blanc : à 40 px, elles se lisaient comme un ornement de bord de page, pas
   comme une commande. Elles passent à 56 px, en noir plein — la même écriture
   que les boutons de la section — et le chevron y est franc.

   ET LE FONDU DIT QU'IL Y A UNE SUITE. C'est le signal le plus fort, et le
   seul qui vaille aussi au doigt sur un téléphone, où les flèches sont
   masquées : une carte tranchée net au bord de l'écran ressemble à une carte
   coupée, une carte qui s'estompe donne envie de tirer dessus. Il ne paraît
   que du côté où il reste quelque chose — `gg-encore` / `gg-avant`, posés par
   `majEtat` en même temps que l'état des flèches, pour qu'un seul calcul serve
   aux deux. */
.gg-config .gg-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--gg-noir);
  color: var(--gg-blanc); font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 3px;   /* les chevrons ‹ › portent haut dans leur cadratin */
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: transform .14s, background-color .14s, opacity .14s;
}
@media (hover: hover) {
  .gg-config .gg-fleche:hover:not(:disabled) {
    background: var(--gg-orange); transform: translateY(-50%) scale(1.06);
  }
}
.gg-config .gg-fleche:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
/* AU BOUT, ELLE S'EFFACE VRAIMENT. A 28 % d'opacite elle restait cliquable a
   l'oeil et ne repondait pas : on la retire du chemin. */
.gg-config .gg-fleche:disabled { opacity: 0; pointer-events: none; }

/* le fondu — sous les fleches (z-index 4), au-dessus des cartes */
.gg-config .gg-carrousel::before,
.gg-config .gg-carrousel::after {
  content: ""; position: absolute; top: 32px; bottom: 4px; width: 68px;
  z-index: 2; pointer-events: none; opacity: 0; transition: opacity .18s;
}
.gg-config .gg-carrousel::before {
  left: 0; background: linear-gradient(to right, var(--gg-blanc), rgba(255,255,255,0));
}
.gg-config .gg-carrousel::after {
  right: 0; background: linear-gradient(to left, var(--gg-blanc), rgba(255,255,255,0));
}
.gg-config .gg-carrousel.gg-avant::before,
.gg-config .gg-carrousel.gg-encore::after { opacity: 1; }
/* LES FLECHES RESTENT DANS LA SECTION. A -18 px elles depassaient du cadre et
   se faisaient rogner par le bord de la page. */
.gg-config .gg-fleche-prec { left: 0; }
.gg-config .gg-fleche-suiv { right: 0; }

/* ── LA REGLE MOBILE VIENT APRES CELLE QU'ELLE ANNULE ──────────────────────
   Elle etait plus haut dans la feuille, ou elle suffisait tant que `.gg-fleche`
   n'avait pas de `display`. En passant les fleches en `display: flex` pour
   centrer le chevron, je lui ai donne une declaration concurrente de MEME
   specificite — et a specificite egale, c'est la derniere ecrite qui gagne :
   les fleches revenaient sur telephone, mesure a 375 px de large.
   Une media-query ne l'emporte pas parce qu'elle est une media-query.

   ET IL N'Y A PAS DE CARROUSEL SUR TELEPHONE. Verifie a 375 px : `.gg-packs`
   y passe en `display: block`, les cinq cartes s'empilent, et la rangee ne
   defile plus (scrollWidth = clientWidth = 303 px). Ni fleche ni fondu n'ont
   donc rien a y faire — le fondu ne s'allume de toute facon jamais, faute de
   `gg-encore`. */
@media (max-width: 720px) {
  .gg-config .gg-fleche { display: none; }
}
.gg-config .gg-points {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.gg-config .gg-point {
  width: 10px; height: 10px; border-radius: 50%; padding: 0;
  border: 0; background: rgba(0, 0, 0, .26); cursor: pointer;
  transition: background-color .14s;
}
/* TOUS DE LA MEME TAILLE. Le point actif s'allongeait a 22 px : la rangee
   changeait de largeur a chaque glissement et se recentrait en sautant.
   Seule la couleur dit lequel est actif. */
.gg-config .gg-point.gg-actif { background: var(--gg-noir); }
@media (hover: hover) { .gg-config .gg-point:hover { background: rgba(0, 0, 0, .4); } }
.gg-config .gg-pack-carte {
  border: 1px solid var(--gg-ligne); border-radius: var(--gg-rayon);
  background: var(--gg-blanc);
  padding: 20px 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.gg-config .gg-pack-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  /* LA PASTILLE EST EN ABSOLU : elle ne pousse rien, donc elle RECOUVRAIT le
     prix, aligne a droite du meme en-tete. On lui reserve sa place ici plutot
     que de la deplacer. Centree sur le coin, elle ne mord que sur sa moitie
     interne — 29 px — plus une respiration. */
  padding-right: 44px;
}
.gg-config .gg-nom-pack {
  margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.015em;
  color: var(--gg-noir);
}
/* LE PRIX SE LIT AVANT LE RESTE. */
.gg-config .gg-prix-pack {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1;
}
.gg-config .gg-prix-montant {
  font-size: 34px; font-weight: 900; letter-spacing: -.02em;
  color: var(--gg-noir);
}
.gg-config .gg-prix-mention {
  margin-top: 4px; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(0, 0, 0, .45);
}
/* Sans tarif fixe, on l'ecrit — un vide se lit comme un oubli. */
.gg-config .gg-sans-prix .gg-prix-montant {
  font-size: 17px; font-weight: 700; color: rgba(0, 0, 0, .5);
}
.gg-config .gg-pack-carte > .gg-aide { margin: 0; }
/* QUATRE COLONNES FIXES, ET NON « autant que la place le permet ».
   Avec `auto-fit`, un pack de trois pieces etalait trois colonnes larges et un
   pack de quatre en faisait deux rangees : aucune vignette n'avait la meme
   taille d'un pack a l'autre. Quatre colonnes tiennent tous les packs sur une
   rangee, et la case vide d'un pack de trois ne se voit pas. */
/* DEUX COLONNES, TOUJOURS. Avec `auto-fit`, un pack de trois pieces etalait
   trois colonnes larges et un pack de quatre en faisait deux rangees : aucune
   vignette n'avait la meme taille d'un pack a l'autre. Et une carte au tiers de
   la largeur ne peut pas en aligner quatre — elles tomberaient a 80 px.
   Deux colonnes donnent la meme boite partout, et la case vide d'un pack de
   trois ne se voit pas. */
.gg-config .gg-pack-produits {
  display: grid; gap: 14px; margin-top: 4px;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
/* Dans une carte de pack, un produit n'a plus besoin de son propre encadre :
   deux boites imbriquees pour un seul objet alourdissent la lecture. */
.gg-config .gg-pack-produits .gg-piece {
  border: 0; padding: 0; background: none;
}
/* CENTRE SOUS LE VISUEL. Guilhem, 09/09/2026 : « centre les textes en dessous
   des visuels ». Le vetement est centre dans sa case ; son nom cale a gauche
   donnait deux axes pour un seul objet, et la derniere ligne d'une grille a
   deux colonnes — le bas de survetement, seul sur sa rangee — accentuait le
   decalage. */
.gg-config .gg-pack-produits .gg-tete {
  margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
  align-items: center; text-align: center;
}
.gg-config .gg-pack-produits .gg-tete h4 {
  font-size: 11px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gg-noir); margin: 0;
}
.gg-config .gg-pack-produits .gg-designs { gap: 4px; }
.gg-config .gg-pack-produits .gg-puce { font-size: 11px; padding: 3px 9px; }


/* UNE HAUTEUR COMMUNE POUR LES PRODUITS D'UN PACK.
   Les planches n'ont pas le meme rapport : un pantalon est haut, un maillot
   large. Laissees libres, les vignettes se decalaient et la rangee partait en
   escalier. On fixe la hauteur, le dessin se cale dedans sans se deformer. */
/* LA BOITE EST BORNEE PAR LE CADRE, PAS PAR LE DESSIN. Mesure du 03/09/2026 :
   deux vignettes sur douze sortaient a 134,5 px au lieu de 118 — le SVG
   imposait sa hauteur au conteneur. On le sort du flux : le cadre fait la
   dimension, le dessin s'y cale. */
.gg-config .gg-pack-produits .gg-vue {
  /* `flex: 0 0 auto` EST LE VRAI CORRECTIF. La hauteur de 118 px etait bien
     appliquee — mais `.gg-piece` est une colonne flex et `.gg-vue` y porte
     `flex: 1 1 auto` : dans la carte la plus haute du carrousel, la vignette
     GRANDISSAIT pour combler le vide, et sortait a 134,5 px. Deux sur douze,
     assez peu pour passer pour du bruit. */
  flex: 0 0 auto;
  position: relative; height: 118px; min-height: 0; overflow: hidden;
}
.gg-config .gg-pack-produits .gg-vue svg,
.gg-config .gg-pack-produits .gg-vue .gg-vignette {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* la vignette rasterisee remplace le vecteur une fois le dessin fini : elle
   doit occuper exactement sa place, et garder ses proportions */
.gg-config .gg-vue .gg-vignette { display: block; object-fit: contain; }
/* les puces de design tiennent sur une ligne, en dessous du nom */
.gg-config .gg-pack-produits .gg-designs { flex-wrap: wrap; }

/* ── LE PACK EN DETAIL ──────────────────────────────────────────────────────
   L'apercu montre l'offre, le detail est l'endroit ou l'on choisit. Les pieces
   y sont plus grandes, chacune avec ses designs et, le cas echeant, la note sur
   la troisieme couleur. */
.gg-config .gg-cta-pack {
  margin-top: auto; align-self: flex-start;
  font-size: 13px; padding: 11px 20px;
}
/* LE DETAIL EST L'ENDROIT OU L'ON CHOISIT — il a droit a la place.
   Guilhem, 03/09/2026 : « le popup quand on clique sur voir en detail doit
   etre bien plus grand ». A 980 px les vetements tenaient dans 190 px de
   haut : on regardait des vignettes pour prendre une decision. */
.gg-config .gg-detail-boite {
  width: min(1600px, 96vw);
  max-height: 94vh;
  padding: 22px 26px 26px;
}
/* AUCUN DEFILEMENT DANS LE DETAIL. Guilhem, 03/09/2026 : « on doit pas pouvoir
   scroll ici ». C'est la meme regle que pour la loupe, du 02/09 : « pas de
   scroll on doit pouvoir voir tout le visuel ». Quatre pieces en trois colonnes
   debordaient et demandaient de faire defiler — donc de ne jamais voir le pack
   en entier. On borne la hauteur des visuels en unites d'ecran : deux rangees
   tiennent, quelle que soit la taille de la fenetre. */
.gg-config .gg-detail-liste {
  overflow: hidden; min-height: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-content: start;
}
.gg-config .gg-detail-piece .gg-vue {
  flex: 0 0 auto;
  position: relative; height: min(300px, 27vh); min-height: 0; overflow: hidden;
}
.gg-config .gg-detail-piece .gg-vue svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.gg-config .gg-detail-piece .gg-tete {
  margin-top: 8px; display: flex; flex-direction: column; gap: 7px;
  align-items: flex-start;
}
.gg-config .gg-detail-piece .gg-tete h4 {
  font-size: 12px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gg-noir); margin: 0;
}
.gg-config #ggDetailPrix { font-size: 30px; }

/* ── LES PRODUITS A L'UNITE ──────────────────────────────────────────────────
   Guilhem, 04/09/2026 : « rajoute les produits individuellement en dessous des
   packs ». Une grille, pas un carrousel : le carrousel sert a comparer trois
   offres, la liste a parcourir un catalogue. Elle ne defile donc pas, et le
   nombre de colonnes suit la largeur. */
.gg-config .gg-unites { margin-top: 34px; }
.gg-config .gg-unites-tete { margin-bottom: 14px; }
.gg-config .gg-unites-tete .gg-aide { margin: 4px 0 0; }
.gg-config .gg-unites-grille {
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .gg-config .gg-unites-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gg-config .gg-unites-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* meme cadre que dans une carte de pack : le vetement doit sortir a la MEME
   taille ici et la-bas, sinon la page paraît faite de deux catalogues */
.gg-config .gg-unite {
  border: 1px solid var(--gg-ligne); border-radius: 12px;
  padding: 12px; background: var(--gg-blanc);
  display: flex; flex-direction: column;
}

/* ── TOUTES LES CARTES A LA MEME HAUTEUR, CALEE SUR LE MAILLOT DE RUGBY ─────
   Guilhem, 04/09/2026 : « en hauteur des cartes ne prends pas exemple sur le
   bas de survetement, fais en fonction du maillot de rugby et mets toutes les
   autres cartes a la meme hauteur ».

   Mesure des rapports largeur/hauteur des visuels :
       short de match  3,64   casquette 2,69   short training 2,65
       maillot de rugby 1,82  <- la reference
       doudoune 1,09          bas de survetement 0,93  <- le plus haut
   Sans cadre commun, chaque RANGEE se calait sur sa piece la plus haute :
   391 px, 347, 302, 275 selon la ligne. Le pantalon, deux fois plus haut que
   large, tirait toute sa rangee.

   On impose donc le rapport du maillot de rugby a tous. Un vetement plus haut
   se reduit pour tenir, un plus large se centre : les cartes sont enfin
   alignees, et c'est le vetement le plus courant qui donne l'echelle. */
.gg-config .gg-unite .gg-vue {
  aspect-ratio: 1.82;
  flex: 0 0 auto; height: auto;
  display: flex; align-items: center; justify-content: center;
}
.gg-config .gg-unite .gg-vue > svg,
.gg-config .gg-unite .gg-vue > img { width: 100%; height: 100%; }

/* le prix sous le nom, comme sur les cartes de pack */
.gg-config .gg-prix-unite {
  margin-top: 2px; font-size: 13px; color: var(--gg-noir);
}
.gg-config .gg-prix-unite .gg-des { font-weight: 600; }
.gg-config .gg-prix-unite .gg-mention {
  display: block; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6;
}

/* ── LA PASTILLE DE REMISE ───────────────────────────────────────────────────
   Guilhem, 04/09/2026 : « mets une pastille de la réduction par rapport au prix
   unitaire sur les cartes pack ». Elle se lit d'un coup d'œil — le pourcentage
   en gros, la somme à l'unité en petit dessous, pour que le chiffre soit
   vérifiable et pas seulement affirmé. */
.gg-config .gg-pack-carte { position: relative; }
.gg-config .gg-pastille {
  /* ── CENTREE SUR LE COIN ───────────────────────────────────────────────
     Guilhem, 04/09/2026 : « point d'ancrage au centre sur le coin ». Elle est
     donc a cheval : moitie dedans, moitie dehors.
     Consequence a ne pas manquer — la rangee des packs est un conteneur a
     defilement (`overflow-x: auto`), et un tel conteneur ROGNE AUSSI EN
     HAUTEUR. Sans la marge ajoutee plus bas sur `.gg-packs`, la moitie haute
     de la pastille disparaissait purement et simplement. */
  position: absolute; top: 0; right: 0; z-index: 3;
  transform: translate(50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gg-noir); color: var(--gg-blanc);
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  /* le liseré la detache du bord qu'elle chevauche */
  border: 3px solid var(--gg-blanc);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
/* dans le detail du pack, la carte n'existe pas : la pastille reprend le flux */
.gg-config #ggDetailPrix ~ .gg-pastille,
.gg-config .gg-detail .gg-pastille {
  position: static; width: auto; height: auto; border-radius: 999px;
  padding: 6px 12px; margin-top: 8px; display: inline-flex; border: 0;
  box-shadow: none; font-size: 14px;
}

/* le seuil de commande, dit une seule fois entre les packs et les pièces */
.gg-config .gg-seuil {
  margin: 14px 0 0; font-size: 12px; letter-spacing: .03em;
  text-align: center; opacity: .65;
}

/* ── LE NOM ET LE PRIX D'UNE PIECE ───────────────────────────────────────────
   Guilhem, 04/09/2026 : « trop de marge entre nom du produit et prix, mets une
   hiérarchie typographique entre les deux ».

   L'écart mesuré était de 21 px, et il ne venait d'aucune règle du projet : le
   `<h4>` porte les marges PAR DEFAUT du navigateur — 21,28 px en haut comme en
   bas. Un titre sans style explicite en hérite toujours.

   La hiérarchie : le nom identifie, le prix qualifie. Le nom garde le corps et
   la graisse d'un titre ; le prix descend d'un cran, passe en capitales et
   s'espace — la même écriture que « PAR PERSONNE » sur les cartes de pack, pour
   que la page n'ait qu'un seul vocabulaire. */
/* ── TROIS NIVEAUX, PAS TROIS LIGNES EQUIVALENTES ──────────────────────────
   Le visuel identifie, le nom nomme, le prix chiffre, le bouton agit. Avant,
   les trois textes se suivaient au meme poids et la carte se lisait comme une
   liste. Le nom et le prix passent donc sur UNE ligne — nom a gauche, prix a
   droite, alignes sur la meme ligne de base — ce qui laisse au bouton tout le
   bas de la carte et rend l'action evidente.
   Le montant reprend Outfit 800, comme les prix des packs : la page n'a qu'une
   seule maniere d'ecrire un prix. */
.gg-config .gg-unite .gg-tete {
  margin-top: 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.gg-config .gg-unite .gg-tete h4 {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--gg-noir); min-width: 0;
}
.gg-config .gg-unite .gg-prix-unite {
  margin: 0; flex: 0 0 auto; white-space: nowrap;
  display: flex; align-items: baseline; gap: 4px;
}
.gg-config .gg-unite .gg-des-mot {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gg-doux);
}
.gg-config .gg-unite .gg-des-montant {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  color: var(--gg-noir); font-variant-numeric: tabular-nums;
}

/* ── LA BARRE DE SELECTION ───────────────────────────────────────────────────
   Guilhem, 04/09/2026 : « une barre sticky en bas de la page qui résume nos
   choix avec un bouton valider », puis « reprends bien les assets du thème
   natif qu'on utilise ».

   Donc AUCUNE couleur, AUCUNE police, AUCUN bouton inventés ici : les mêmes
   variables `--gg-*` que le reste du fichier, et la classe `.gg-cta` du thème
   pour le bouton. Une barre qui aurait son propre noir et son propre bouton se
   verrait immédiatement comme une pièce rapportée.

   Elle est `fixed` mais ne touche pas à `body` : la réserve de hauteur est
   posée sur `.gg-config` en JS. */
.gg-config .gg-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  background: var(--gg-blanc);
  border-top: 1px solid var(--gg-ligne);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
}
.gg-config .gg-barre[hidden] { display: none; }
.gg-config .gg-barre-dedans {
  max-width: 1240px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.gg-config .gg-barre-choix {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-width: 0; font-size: 14px;
}
.gg-config .gg-barre-liste {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.gg-config .gg-barre-puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  border: 1px solid var(--gg-ligne); background: var(--gg-gris);
  font-size: 12px; color: var(--gg-texte);
}
.gg-config .gg-barre-oter {
  font-family: inherit; border: 0; background: none; cursor: pointer;
  color: var(--gg-doux); font-size: 15px; line-height: 1; padding: 0 4px;
}
@media (hover: hover) { .gg-config .gg-barre-oter:hover { color: var(--gg-noir); } }
.gg-config .gg-barre-droite { display: flex; align-items: center; gap: 18px; }
.gg-config .gg-barre-total { text-align: right; line-height: 1.1; }
/* ── LE TOTAL EST UN PRIX, DONC EN OUTFIT ────────────────────────────────
   Guilhem, 04/09/2026 : « c'est quoi cette typo de prix ? mets juste Outfit
   extrabold ». J'avais pris « Sour Gummy », qui sert aux TITRES de la page —
   la question du questionnaire, le titre du pack. Un prix n'est pas un titre :
   il se lit dans la police courante, comme les 69 € des cartes.
   La graisse 800 a ete AJOUTEE au chargement de la police (index.html) : elle
   n'y etait pas, et la demander sans la charger fait retomber le navigateur
   sur la graisse voisine sans rien signaler. */
.gg-config .gg-barre-total > span:first-child {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em;
  font-size: 26px; display: block;
}
@media (max-width: 720px) {
  .gg-config .gg-barre-dedans { flex-direction: column; align-items: stretch; gap: 12px; }
  .gg-config .gg-barre-droite { justify-content: space-between; }
  .gg-config .gg-barre-liste { display: none; }   /* le compte suffit sur mobile */
}

/* le bouton « Ajouter » : c'est le CTA du thème, en plus petit */
.gg-config .gg-cta-ajout { padding: 10px 22px; font-size: 12px; }
.gg-config .gg-cta-creux {
  background: none; color: var(--gg-noir); border-color: var(--gg-ligne);
}
@media (hover: hover) { .gg-config .gg-cta-creux:hover { background: var(--gg-noir); color: var(--gg-blanc); } }
.gg-config .gg-cta-dedans { background: var(--gg-vert); border-color: var(--gg-vert); }
.gg-config .gg-unite .gg-cta-ajout { margin-top: 10px; width: 100%; }
.gg-config .gg-pack-pied { display: flex; gap: 10px; flex-wrap: wrap; }
.gg-config .gg-pack-pied .gg-cta { flex: 1 1 auto; }

/* ── LE FORMULAIRE DE DEMANDE ────────────────────────────────────────────────
   Il reprend la boîte de la loupe — même calque, même fermeture, même rayon —
   plutôt qu'une fenêtre d'un autre genre. */
.gg-config .gg-demande-boite { max-width: 720px; width: 100%; }
.gg-config .gg-demande-corps { padding: 4px 4px 8px; overflow: auto; max-height: 72vh; }
.gg-config .gg-recap-ligne {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--gg-ligne); font-size: 14px;
}
.gg-config .gg-recap-total { font-weight: 700; border-bottom: 0; }
.gg-config .gg-recap-prix { white-space: nowrap; }
.gg-config .gg-demande-merci {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 800; font-size: 22px; margin: 8px 0 4px;
}
.gg-config .gg-demande-champs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px;
}
.gg-config .gg-demande-champs label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gg-doux);
}
.gg-config .gg-demande-champs input,
.gg-config .gg-demande-champs textarea {
  font-family: inherit; font-size: 15px; text-transform: none; letter-spacing: normal;
  color: var(--gg-noir); background: var(--gg-blanc);
  border: 1px solid var(--gg-ligne); border-radius: 10px; padding: 11px 13px;
}
.gg-config .gg-demande-champs input:focus,
.gg-config .gg-demande-champs textarea:focus {
  outline: none; border-color: var(--gg-noir);
}
.gg-config .gg-demande-large { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .gg-config .gg-demande-champs { grid-template-columns: 1fr; }
}

/* `display` L'EMPORTE SUR L'ATTRIBUT `hidden`. Mesure du 04/09/2026 : le
   formulaire restait affiché sous le message de confirmation, parce que
   `.gg-demande-champs` est en `display: grid` — la règle d'affichage bat
   `[hidden]`, qui n'est qu'un `display: none` de la feuille par défaut.
   Tout élément à qui l'on donne un `display` doit reprendre son cas caché. */
.gg-config .gg-demande-champs[hidden] { display: none; }
.gg-config .gg-barre-dedans[hidden],
.gg-config .gg-pack-pied[hidden] { display: none; }

/* ── LES BOUTONS SE COLLENT AU BAS DE LA CARTE ───────────────────────────────
   Guilhem, 04/09/2026 : « les boutons voir le détail et ajouter doivent tous
   être fixés en bas de la carte ». Les cartes ont déjà la même hauteur — la
   rangée est en flex, les enfants s'étirent — mais leur contenu ne fait pas la
   même longueur : le pack match n'a que deux pièces, le pack saison trois sur
   deux rangs. Les boutons flottaient donc à trois hauteurs différentes.

   `margin-top: auto` dans un conteneur en colonne pousse l'élément aussi bas
   que possible : les pieds s'alignent sans qu'aucune hauteur ne soit fixée à
   la main — et ils resteront alignés si un pack gagne une pièce demain. */
.gg-config .gg-pack-carte > .gg-pack-pied { margin-top: auto; padding-top: 8px; }
/* ── DE L'AIR AU-DESSUS DU BOUTON ──────────────────────────────────────────
   Guilhem, 04/09/2026 : « mets un peu plus de marge en haut du bouton ajouter ».
   La marge ne peut PAS aller sur le bouton : son `margin-top: auto` est ce qui
   le colle au bas de la carte, et une valeur chiffree l'annulerait. On l'ecarte
   donc par le bas du bloc nom + prix, juste au-dessus.
   Au passage : le `padding-top: 10px` que j'avais mis la deformait le bouton —
   un rembourrage asymetrique decale le libelle vers le bas. */
.gg-config .gg-unite .gg-cta-ajout { margin-top: auto; }
.gg-config .gg-unite .gg-tete { margin-bottom: 16px; }

/* ── LES ANIMATIONS ──────────────────────────────────────────────────────────
   Guilhem, 04/09/2026 : « rajoute des smooth animations UX ».

   Elles servent toutes à EXPLIQUER un changement, jamais à décorer : la barre
   qui monte annonce qu'elle existe, la pastille qui entre montre d'où vient
   l'article, le total qui pulse dit qu'il vient de changer. Une animation qui
   n'apprend rien ne fait que retarder le clic suivant — d'où des durées
   courtes, 150 à 260 ms, et aucune sur ce qui se lit (les prix, les noms).

   ET ELLES SE TAISENT SI ON LE DEMANDE. `prefers-reduced-motion` n'est pas une
   coquetterie : ces mouvements déclenchent des malaises chez une partie des
   visiteurs, et le réglage existe dans tous les systèmes. */
@keyframes gg-monte {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes gg-puce-entre {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes gg-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.gg-config .gg-barre { animation: gg-monte .32s cubic-bezier(.22, .8, .3, 1); }
.gg-config .gg-barre-puce { animation: gg-puce-entre .22s cubic-bezier(.22, .8, .3, 1); }
.gg-config .gg-pulse { animation: gg-pulse .26s ease-out; }

/* la barre vide s'efface d'un ton : présente, mais elle n'appelle pas l'œil */
.gg-config .gg-barre-vide { box-shadow: 0 -2px 12px rgba(0, 0, 0, .06); }
.gg-config .gg-barre-vide .gg-barre-compte,
.gg-config .gg-barre-invite { color: var(--gg-doux); }
.gg-config .gg-barre-invite { font-size: 13px; }
.gg-config .gg-barre-total,
.gg-config .gg-barre-choix { transition: opacity .2s; }
.gg-config .gg-barre-vide .gg-barre-total { opacity: .45; }

/* les boutons et les cartes répondent au geste */
.gg-config .gg-cta { transition: background .15s, color .15s, border-color .15s, transform .12s; }
/* l'enfoncement est joue par l'animation `gg-presse`, declenchee au
   pointerdown : un `:active` seul ne rebondit pas au relachement */
.gg-config .gg-pack-carte,
.gg-config .gg-unite { transition: box-shadow .2s, transform .2s; }
@media (hover: hover) { .gg-config .gg-unite:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .07); } }
.gg-config .gg-pastille { transition: transform .2s; }
@media (hover: hover) { .gg-config .gg-pack-carte:hover .gg-pastille { transform: translate(50%, -50%) scale(1.06); } }

/* le calque de la demande, et sa boîte, arrivent en douceur */
@keyframes gg-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes gg-boite {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.gg-config .gg-loupe { animation: gg-fondu .18s ease-out; }
.gg-config .gg-loupe-boite { animation: gg-boite .24s cubic-bezier(.22, .8, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .gg-config .gg-barre,
  .gg-config .gg-barre-puce,
  .gg-config .gg-pulse,
  .gg-config .gg-loupe,
  .gg-config .gg-loupe-boite { animation: none; }
  .gg-config .gg-cta,
  .gg-config .gg-pack-carte,
  .gg-config .gg-unite,
  .gg-config .gg-pastille { transition: none; }
  .gg-config .gg-unite:hover,
  .gg-config .gg-cta:active { transform: none; }
}

/* ── LE COMPTEUR A ROULEAUX ──────────────────────────────────────────────────
   Guilhem, 04/09/2026 : « une animation style slot machine avec les chiffres
   qui changent verticalement ».

   Une colonne = une fenêtre d'UNE case de haut, et dedans une bande de dix
   chiffres. On translate la bande de −N em pour montrer le chiffre N : c'est
   pour ça que tout est en `em` et que l'interligne vaut exactement 1 — si la
   case ne fait pas la hauteur d'un chiffre, la bande s'arrête entre deux
   valeurs et le compteur affiche une moitié de 3 sur une moitié de 4.

   `tabular-nums` : sans lui, un 1 est plus étroit qu'un 8 et le total tressaute
   en largeur à chaque changement. */
.gg-config .gg-barre-total > span:first-child {
  display: flex; justify-content: flex-end; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.gg-config .gg-rouleau {
  display: inline-block; height: 1em; line-height: 1;
  overflow: hidden; vertical-align: baseline;
}
.gg-config .gg-bande { display: block; }
.gg-config .gg-bande > span { display: block; height: 1em; line-height: 1; }
.gg-config .gg-fixe { display: inline-block; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .gg-config .gg-bande { transition: none; }
}

/* la rangée se saisit à la souris — voir `glissementSouris` dans section.js */
/* ── LE CARROUSEL EN MOUVEMENT ────────────────────────────────────────────
   Les cartes portent 4 534 noeuds SVG a elles cinq (compte fait sur la page en
   ligne le 09/09/2026). Repeindre ce vecteur a chaque image de defilement est
   ce qui rendait le glissement saccade — la mesure a d'abord innocente le
   calcul : 0,02 ms par image pour toute la geometrie lue.
   `will-change` fait rasteriser chaque carte une fois, puis le navigateur ne
   deplace plus qu'une texture. La classe n'est posee QUE pendant le mouvement
   (voir `bouge()`) : une carte promue occupe de la memoire graphique, et les
   machines des clubs la paieraient en permanence pour rien. */
.gg-config .gg-packs.gg-bouge > .gg-pack-carte { will-change: transform; }

.gg-config .gg-packs.gg-saisi { cursor: grabbing; user-select: none; }
.gg-config .gg-packs.gg-saisi * { pointer-events: none; }

/* ── LE PACK EN DÉTAIL : QUATRE ÉTAGES ───────────────────────────────────────
   Guilhem, 04/09/2026 : « améliore la structure du popup voir en détail ».
   Identité en haut, économie expliquée, pièces au milieu, action en bas. La
   partie qui défile est la liste des pièces, jamais l'en-tête ni le pied :
   le prix et le bouton restent lisibles quel que soit le nombre de pièces. */
.gg-config .gg-detail-boite { display: flex; flex-direction: column; }
.gg-config .gg-detail-tete {
  display: flex; align-items: flex-start; gap: 24px;
  padding-bottom: 14px; border-bottom: 1px solid var(--gg-ligne);
}
.gg-config .gg-detail-titre { flex: 1 1 auto; min-width: 0; }
.gg-config .gg-detail-titre h3 { margin: 0; }
.gg-config .gg-detail-titre .gg-aide { margin: 4px 0 0; }
.gg-config .gg-detail-prix { text-align: right; flex: 0 0 auto; padding-right: 34px; }
.gg-config .gg-detail-prix .gg-prix-montant { display: block; line-height: 1; }

/* l'économie : le calcul, pas seulement son résultat */
.gg-config .gg-detail-economie {
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--gg-gris); border-radius: 12px;
}
.gg-config .gg-detail-economie[hidden] { display: none; }
.gg-config .gg-eco-detail { display: grid; gap: 4px; }
.gg-config .gg-eco-ligne {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; color: var(--gg-texte);
}
.gg-config .gg-eco-somme {
  border-top: 1px solid var(--gg-ligne); margin-top: 6px; padding-top: 6px;
  font-weight: 700; color: var(--gg-noir);
}
.gg-config .gg-eco-prix { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gg-config .gg-eco-gain { margin: 10px 0 0; font-size: 14px; color: var(--gg-noir); }
.gg-config .gg-eco-pc {
  display: inline-block; margin-right: 8px; padding: 3px 10px;
  border-radius: 999px; background: var(--gg-noir); color: var(--gg-blanc);
  font-size: 13px;
}

.gg-config .gg-detail-liste { flex: 1 1 auto; min-height: 0; overflow: auto; }
.gg-config .gg-detail-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--gg-ligne);
}
.gg-config .gg-detail-pied .gg-aide { margin: 0; }
.gg-config .gg-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .gg-config .gg-detail-tete { flex-direction: column; gap: 8px; }
  .gg-config .gg-detail-prix { text-align: left; padding-right: 0; }
  .gg-config .gg-detail-actions { width: 100%; }
  .gg-config .gg-detail-actions .gg-cta { flex: 1 1 auto; }
}

/* ── L'ONDE ET L'ENFONCEMENT ─────────────────────────────────────────────────
   Voir `retourAuClic` dans section.js. L'onde est détourée par le bouton :
   `overflow: hidden` sur une pilule de rayon 999 px la découpe exactement à sa
   forme, sans masque supplémentaire. */
.gg-config .gg-cta { position: relative; overflow: hidden; }
.gg-config .gg-cta.gg-presse::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--gg-x, 50%); top: var(--gg-y, 50%);
  width: var(--gg-d, 120px); height: var(--gg-d, 120px);
  margin: 0; border-radius: 50%; background: currentColor;
  transform: translate(-50%, -50%) scale(0); opacity: .3;
  animation: gg-onde .6s cubic-bezier(.22, .8, .3, 1) forwards;
}
@keyframes gg-onde {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@keyframes gg-presse {
  0%   { transform: scale(1); }
  28%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
.gg-config .gg-cta.gg-presse {
  animation: gg-presse .34s cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .gg-config .gg-cta.gg-presse { animation: none; }
  .gg-config .gg-cta.gg-presse::after { display: none; }
}

/* le libellé passe devant l'onde, qui reste en fond */
.gg-config .gg-libelle { position: relative; z-index: 1; }

/* le message de regroupement : il explique une baisse de prix, il doit se voir */
.gg-config .gg-barre-note {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--gg-vert); color: var(--gg-blanc);
  font-size: 12px; animation: gg-puce-entre .22s cubic-bezier(.22, .8, .3, 1);
}

/* ── LES CARTES ILLUSTRÉES DU SPORT ──────────────────────────────────────────
   Guilhem, 04/09/2026 : « 5 cartes alignées horizontalement avec une image dans
   chaque ». Cinq colonnes égales, donc — et non un enroulement libre qui
   renvoyait la pétanque seule à la ligne. En dessous de 900 px l'écran ne tient
   plus cinq vêtements lisibles : on passe à trois, puis à deux. */
/* SIX COLONNES, PAS CINQ. Guilhem, 07/09/2026 : « 6 de large en desktop ».
   La grille etait calee sur les cinq sports d'origine ; « Autre », ajoute il y
   a un quart d'heure, tombait donc seul sur une deuxieme rangee — une case
   isolee sous cinq autres se lit comme un oubli, pas comme un choix. */
.gg-config .gg-cartes-image {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 900px) {
  .gg-config .gg-cartes-image { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gg-config .gg-cartes-image { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gg-config .gg-cartes-image .gg-carte {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 12px 12px; height: auto; text-align: center;
}
/* le vêtement occupe une fenêtre de même proportion partout : sans cadre
   commun, un short large et un maillot haut donnent deux cartes de hauteurs
   différentes — le même défaut que sur les produits à l'unité */
/* Guilhem, 04/09/2026 : « cartes plus hautes ». La fenetre etait au rapport
   1,6 — plus large que haute — alors que les vetements presentes sont debout :
   un maillot y tenait sur 80 px de haut dans une carte de 130. On passe a 1,1,
   ce qui rend la hauteur au dessin sans changer la largeur des colonnes.
   `object-fit: contain` garantit qu'aucun vetement n'est rogne : les proportions
   different d'un sport a l'autre — un polo n'a pas la silhouette d'un debardeur
   de basket — et c'est la fenetre qui s'adapte, jamais l'image. */
.gg-config .gg-cartes-image .gg-carte img {
  width: 100%; aspect-ratio: 1.1; object-fit: contain; display: block;
}
.gg-config .gg-cartes-image .gg-carte-nom { font-weight: 600; }

/* ── LE NUANCIER PREND LA LARGEUR ────────────────────────────────────────────
   Guilhem, 04/09/2026 : « ça peut prendre plus de place sur la page ». Les
   pastilles faisaient 58 px dans une grille qui s'arrêtait avant le bord : une
   couleur se juge à sa surface, pas à sa vignette. On passe à 84 px, et la
   grille occupe toute la largeur disponible.
   `auto-fill` et non `auto-fit` : avec `auto-fit`, la dernière rangée
   incomplète étire ses pastilles et l'on compare alors des disques de tailles
   différentes. */
.gg-config .gg-nuancier {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px 12px;
}
.gg-config .gg-nuancier .gg-pastille-teinte,
.gg-config .gg-teinte > span:first-child { width: 100%; }

/* ── LES APERÇUS DE DESIGN, PLEINE LARGEUR ───────────────────────────────────
   Guilhem, 04/09/2026 : « carte toute la largeur ». Trois designs tenaient dans
   trois cartes de 220 px collées à gauche, le reste de la page vide. Trois
   colonnes égales sur toute la largeur : le vêtement y est deux fois plus grand,
   et c'est lui qu'on choisit. */
.gg-config .gg-apercus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .gg-config .gg-apercus { grid-template-columns: 1fr; }
}

/* le dépôt du logo et son action, côte à côte */
.gg-config .gg-depot-zone { display: grid; gap: 12px; }
.gg-config .gg-depot-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.gg-config .gg-depot-actions .gg-note { margin: 0; }

/* ── LES ÉTAPES VISUELLES DÉBORDENT LES 760 PX DE TEXTE ──────────────────────
   `.gg-etape` est plafonnée à 760 px, et c'est juste : une question et sa
   précision se lisent mal sur une ligne plus longue. Mais ce plafond bridait
   aussi ce qui n'est PAS du texte — les vêtements, les pastilles de couleur —
   et laissait la moitié droite de la page vide.

   La question garde donc sa largeur de lecture ; seule la zone de réponse
   s'élargit, et uniquement quand elle porte des images. */
.gg-config .gg-etape:has(.gg-apercus),
.gg-config .gg-etape:has(.gg-nuancier),
.gg-config .gg-etape:has(.gg-cartes-image) { max-width: none; }
.gg-config .gg-etape:has(.gg-apercus) .gg-question,
.gg-config .gg-etape:has(.gg-nuancier) .gg-question,
.gg-config .gg-etape:has(.gg-cartes-image) .gg-question,
.gg-config .gg-etape:has(.gg-apercus) .gg-precision,
.gg-config .gg-etape:has(.gg-nuancier) .gg-precision,
.gg-config .gg-etape:has(.gg-cartes-image) .gg-precision { max-width: 760px; }

/* l'exemple de design : même fenêtre que les cartes de sport, pour que les
   deux questions se ressemblent */
.gg-config .gg-cartes-embleme {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.gg-config .gg-cartes-embleme .gg-carte {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px 14px; height: auto; text-align: center;
}
.gg-config .gg-embleme { width: 100%; aspect-ratio: 1.6; }
.gg-config .gg-embleme svg { width: 100%; height: 100%; display: block; }

/* le rendez-vous vient après le remerciement, sans l'écraser */
.gg-config .gg-cta-rdv { margin-top: 14px; }

/* ── LE LIEN « IGNORER ET PASSER AU CONTENU » DU THÈME ───────────────────────
   Guilhem, 04/09/2026 : « pitié enlève le bouton Ignorer et passer au contenu ».

   Il n'est PAS à moi — vérifié en désactivant cette feuille : il reste
   `position: static`, 144 px de haut, avec ou sans elle. C'est le lien
   d'accessibilité d'Horizon, qui devrait rester hors écran tant qu'il n'a pas
   le focus, et qui chez nous s'affiche en permanence.

   C'est la SEULE règle de ce fichier qui sorte de `.gg-config` : elle corrige
   un défaut du thème, et je l'assume ici plutôt que de modifier un fichier du
   thème — comme ça, retirer la section retire aussi le correctif.

   ON NE LE SUPPRIME PAS, ON LE RANGE. `display: none` le retirerait aussi au
   clavier, alors que c'est précisément là qu'il sert : une personne qui navigue
   sans souris s'en sert pour sauter le menu. Il redevient donc visible dès
   qu'il reçoit le focus. */
.skip-to-content-link:not(:focus):not(:focus-visible) {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ══ MOBILE ═════════════════════════════════════════════════════════════════
   Guilhem, 07/09/2026 : « optimise à fond pour mobile ».
   Tout est mesuré sur la boutique en 375 × 812, densité 2. */

/* ── 1. NE PAS PEINDRE CE QU'ON NE VOIT PAS ────────────────────────────────
   Un vêtement fini pèse de 145 à 626 éléments, et il y en a jusqu'à trente sur
   la page — près de dix mille formes à remettre en page et à repeindre à
   chaque défilement. Un ordinateur l'encaisse, un téléphone d'entrée de gamme
   accroche.

   `content-visibility: auto` laisse le navigateur SAUTER la mise en page et le
   dessin de ce qui est hors écran, et les reprendre à l'approche. Rien à
   piloter, rien à recharger : c'est le navigateur qui décide, image par image.

   `contain-intrinsic-size: auto <hauteur>` est indispensable avec : sans lui,
   une boîte non peinte compte pour zéro et la page sauterait au défilement. Le
   mot-clé `auto` fait retenir la dernière hauteur réellement mesurée ; la
   valeur qui suit ne sert qu'avant le premier affichage, et reprend le
   `min-height` déjà posé sur chaque variante. */
.gg-config .gg-vue { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.gg-config .gg-apercu .gg-vue { contain-intrinsic-size: auto 90px; }
.gg-config .gg-pack-produits .gg-vue { contain-intrinsic-size: auto 118px; }
/* JAMAIS DANS LA LOUPE : c'est le seul endroit où le visuel est regardé de
   près, et où sauter son dessin se verrait. */
.gg-config .gg-loupe-boite .gg-vue { content-visibility: visible; }

/* ── 2. CE QU'ON TOUCHE FAIT 44 px ─────────────────────────────────────────
   Mesuré sur la page : « Ajouter » 37 px de haut, les liens 28, les points du
   carrousel 8. La cible confortable d'un pouce est de 44 px (Apple) à 48
   (Android) ; en dessous, on tape à côté.
   Le DESSIN ne change pas, seule la zone sensible grandit — un point de 8 px
   reste un point de 8 px, avec 44 px de zone autour. */
@media (max-width: 720px) {
  .gg-config .gg-cta-ajout { padding: 14px 22px; }
  .gg-config .gg-cta-pack { padding: 14px 20px; }
  .gg-config .gg-lien { padding: 14px 6px; }
  /* LA ZONE SENSIBLE EST UN PSEUDO-ELEMENT, LE POINT NE BOUGE PAS.
     Premiere version : un bouton de 44 px avec `padding: 18px` et
     `background-clip: content-box`. Guilhem, 07/09/2026 : « mais wtf les
     ronds » — le point actif sortait en disque noir de 44 px.
     La cause : `.gg-point.gg-actif { background: ... }` est une PROPRIETE
     RACCOURCIE, et une raccourcie remet a leur valeur initiale toutes les
     sous-proprietes qu'elle ne nomme pas — `background-clip` repassait donc a
     `border-box` sur le seul point actif.
     On ne touche donc plus au fond du bouton : le point garde ses 8 px, et
     c'est un `::after` transparent qui offre les 44 px au pouce. */
  .gg-config .gg-points { gap: 16px; margin-top: 10px; }
  .gg-config .gg-point { position: relative; }
  .gg-config .gg-point::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .gg-config .gg-barre-oter { padding: 10px; margin: -10px -4px -10px 0; }

  /* ── 3. LA BARRE PREND MOINS DE HAUTEUR ─────────────────────────────────
     Mesurée à 130 px sur un écran de 812, plus 154 px de réserve : un sixième
     de l'écran pour un compte et un bouton. La mention sous le total est un
     détail de lecture, pas une information de décision — elle passe sur la
     même ligne que le total. */
  .gg-config .gg-barre-total .gg-prix-mention { display: none; }
  .gg-config .gg-barre-dedans { gap: 8px; }

  /* ── 4. PAS DE DELAI AU TOUCHER ─────────────────────────────────────────
     Sans `touch-action: manipulation`, certains navigateurs attendent de voir
     si le doigt enchaîne un double-tap avant de valider le clic. C'est le
     « petit délai » classique du mobile, et il n'a rien à voir avec le code. */
  .gg-config button, .gg-config .gg-cta, .gg-config a { touch-action: manipulation; }
}

/* ══ LA STRUCTURE MOBILE ════════════════════════════════════════════════════
   Guilhem, 07/09/2026 : « refais toute la structure sur mobile ».

   Ce qui marche sur un écran large ne se contente pas de rétrécir. Trois
   décisions, prises pour le pouce et non pour la souris. */
@media (max-width: 720px) {

  /* ── 1. LES PACKS S'EMPILENT, PLUS DE CARROUSEL ──────────────────────────
     Un carrousel horizontal est le mauvais geste sur un téléphone : il se bat
     avec le défilement vertical de la page, et surtout il CACHE l'offre — on
     ne voit qu'un pack, sans savoir combien il y en a derrière. Cinq packs,
     cinq cartes, les unes sous les autres : on descend, c'est tout.
     Les flèches étaient déjà masquées à cette largeur ; les points ne servent
     plus à rien et partent avec elles. */
  /* ── LA SECTION A DES MARGES, ET LE TITRE AUSSI ──────────────────────────
     Capture du 07/09 : « Nos packs pour TEST », le resume et les liens
     commencaient a zero, le N a moitie coupe. Le theme ne pose aucune marge
     laterale a cette largeur, et je n'avais donne de l'air qu'aux CARTES —
     elles etaient donc les seules a en avoir. La marge appartient a la
     section, pas a l'un de ses morceaux. */
  .gg-config { padding-inline: 16px; }
  /* ── ET LA SECTION NE FAIT JAMAIS DEFILER LA PAGE DE TRAVERS ────────────
     Garde-fou, pas correctif : quoi qu'il arrive plus bas — une marge negative
     oubliee, un visuel plus large que prevu, un mot qui ne se coupe pas — rien
     de cette section ne peut faire apparaitre une barre horizontale sur la
     page. `clip` et non `hidden` : `hidden` ferait de la section un conteneur
     a defilement, ce qui casserait le collant de la barre du bas. */
  .gg-config { overflow-x: clip; }
  .gg-config .gg-packs {
    display: block; overflow: visible; cursor: auto;
    scroll-snap-type: none;
    padding: 14px 0 4px;
  }
  .gg-config .gg-packs > .gg-pack-carte { width: 100%; margin-bottom: 20px; }
  .gg-config .gg-packs > .gg-pack-carte:last-child { margin-bottom: 0; }
  .gg-config .gg-points { display: none; }

  /* LA PASTILLE RENTRE DANS LA CARTE. À cheval sur le coin, elle dépassait du
     côté droit de l'écran — sur un conteneur qui ne défile plus, ce
     débordement devient celui de la PAGE. */
  .gg-config .gg-pastille { top: 10px; right: 10px; transform: none; }
  @media (hover: hover) { .gg-config .gg-pack-carte:hover .gg-pastille { transform: scale(1.06); } }
  /* ET ELLE RECLAME SA PLACE. Les 44 px reserves dans l'en-tete valaient pour
     une pastille a cheval sur le coin, dont la moitie seulement mordait sur la
     carte. Rentree en entier, elle recouvrait le prix — vu sur la capture,
     « -14 % » posee sur « 69 € ». 58 px de pastille, 10 de bord, 12 d'air. */
  .gg-config .gg-pack-tete { padding-right: 80px; }

  /* ── LE PRIX EST FERRE A GAUCHE, ET TOUJOURS AU MEME ENDROIT ─────────────
     Guilhem, 07/09/2026 : « les prix des cartes ferrés à gauche sur mobile ».

     Deux defauts, et le second explique le premier. L'en-tete est une ligne
     flex qui passe a la ligne quand ca ne tient plus : mesure sur les cinq
     cartes, le prix tombait a x = 37 quand le nom du pack etait long, et
     restait a x = 167 quand il etait court. Il changeait donc de place d'une
     carte a l'autre, au gre de la longueur d'un titre.
     Et dans sa propre boite il etait ferre a DROITE — un heritage de la mise
     en page large, ou il s'aligne sur le bord droit de la carte.

     Sur mobile, une colonne : le nom, puis le prix, tous deux au meme fer a
     gauche, sur les cinq cartes. */
  .gg-config .gg-pack-tete { flex-direction: column; align-items: flex-start; gap: 6px; }
  .gg-config .gg-prix-pack { align-items: flex-start; text-align: left; }

  /* ── 2. LES PIÈCES DÉFILENT, ELLES NE S'ENTASSENT PAS ────────────────────
     Deux colonnes dans une carte de 343 px, c'est un vêtement de 150 px : on
     ne distingue plus ni le col ni le motif. Une rangée qui défile au doigt
     leur rend leur taille, et le débordement sous le bord de la carte dit
     qu'il y en a d'autres à côté.
     Le défilement horizontal est ici un DÉTAIL de la carte, pas l'axe
     principal de la page — c'est ce qui le rend acceptable là où le carrousel
     des packs ne l'était pas. */
  /* ── LA RANGEE RESTE DANS LA CARTE ──────────────────────────────────────
     Guilhem, 07/09/2026 : « on peut faire un scroll horizontal et les produits
     à l'unité sortent des cartes ».
     Je la faisais deborder de 20 px de chaque cote (`margin: 0 -20px`) pour
     qu'un vetement touche le bord de la carte et annonce ainsi qu'il y en a
     d'autres a cote. Mais cette marge negative suppose que le parent a
     exactement 20 px de rembourrage : partout ou ce n'est pas le cas, la
     rangee sort de sa carte — et si elle sort de la DERNIERE boite fermee,
     c'est la page entiere qui se met a defiler de travers.
     Elle reste donc dans la carte. Le signal « ca continue » est rendu par un
     fondu sur le bord droit, qui ne coute aucun pixel de mise en page. */
  .gg-config .gg-pack-produits {
    display: flex; gap: 14px;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin: 0; padding: 0 0 2px;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  /* le fondu ne se justifie que s'il reste quelque chose a voir : quand tout
     tient, la rangee ne defile pas et le degrade rognerait pour rien */
  .gg-config .gg-pack-produits:not([data-defile="1"]) {
    -webkit-mask-image: none; mask-image: none;
  }
  .gg-config .gg-pack-produits::-webkit-scrollbar { display: none; }
  .gg-config .gg-pack-produits > .gg-piece {
    flex: 0 0 62%; scroll-snap-align: start;
  }
  .gg-config .gg-pack-produits .gg-vue { min-height: 168px; }

  /* ── 3. L'ACTION EN PREMIER, ET SUR TOUTE LA LARGEUR ─────────────────────
     Deux boutons côte à côte dans 343 px donnent deux cibles étroites, et le
     secondaire (« Voir le détail ») y pèse autant que le principal.
     `column-reverse` remet « Ajouter » au-dessus sans toucher au HTML — donc
     sans rien changer à l'ordre de lecture d'un lecteur d'écran ni à celui du
     clavier, où « Voir le détail » reste le premier. */
  .gg-config .gg-pack-pied { flex-direction: column-reverse; gap: 10px; }
  .gg-config .gg-pack-pied .gg-cta { width: 100%; }
}

/* ── LA PASTILLE WHATSAPP DU THEME, SUR MOBILE ──────────────────────────────
   Guilhem, 07/09/2026 : « enlève l'icône whatsapp sur mobile pour cette page ».
   Elle etait posee SUR la barre de selection (`a.gc-whatsapp-btn`, 56 × 56,
   fixe a 20 px du coin bas-droit), a l'endroit ou le pouce vise le bouton.

   01/10/2026 (lot 2 — point 10) : ELLE REVIENT. Un club qui prefere ecrire
   sur WhatsApp ne doit pas perdre ce chemin sur cette page. La regle qui la
   cachait est retiree ; pour ne pas recreer le defaut du 07/09, elle se
   SOULEVE au-dessus de la barre quand celle-ci est affichee (hauteur mesuree
   par le script, `--gg-barre-h`) — a toutes les largeurs : sur un ecran de
   1280 px, la barre (1240 px de contenu) arrive elle aussi sous la pastille,
   qui mordait sur « Demander mon devis ». Sur telephone, elle s'efface en
   plus le temps d'une fenetre de la section (demande, detail d'un pack,
   loupe, calcul de la remise) : la fenetre y prend tout l'ecran, et la
   pastille recouvrait le bas du formulaire, donc « Envoyer ma demande ».
   Ces regles sortent de `.gg-config`, comme l'ancienne, et pour la meme
   raison : cette feuille n'est chargee QUE par les pages qui portent la
   section. Sans `:has()` (navigateurs anciens), la pastille reste a sa place. */
body:has(#ggPack:not([hidden]) .gg-barre:not([hidden])) a.gc-whatsapp-btn {
  bottom: calc(var(--gg-barre-h, 112px) + 12px);
}
@media (max-width: 720px) {
  body:has(#ggPack:not([hidden]) .gg-loupe:not([hidden])) a.gc-whatsapp-btn,
  body:has(#ggPack:not([hidden]) .gg-eco-couche:not([hidden])) a.gc-whatsapp-btn {
    display: none;
  }
}

/* ══ LE DÉTAIL D'UN PACK, SUR MOBILE ════════════════════════════════════════
   Guilhem, 07/09/2026 : « sur mobile c'est pas du tout propre quand on fait
   voir les détails ». Deux défauts, mesurés dans la fenêtre ouverte. */
@media (max-width: 640px) {

  /* ── 1. LA LISTE NE DÉFILE PLUS DE TRAVERS ────────────────────────────────
     `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))` réclame
     300 px par colonne. Dans une fenêtre qui n'en offre que 327, la grille
     déborde de peu — et `overflow: auto` en faisait un conteneur à défilement
     horizontal. Relevé : `scrollLeft = 25`, ce qui coupait le titre de la
     pièce (« ORT TRAINING ») et la première puce (« esign 1 ») sur leur bord
     gauche. Rien n'était cassé : la liste était simplement décalée de 25 px,
     et rien ne la ramenait.
     Une seule colonne, et plus rien à déborder. */
  .gg-config .gg-detail-liste {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }

  /* ── 2. LA CROIX REVIENT DANS LE COIN ─────────────────────────────────────
     L'en-tête passe en colonne à cette largeur — le titre, le prix, puis la
     croix, posée comme un troisième paragraphe sous le prix. Une croix de
     fermeture se cherche dans le coin, pas dans le fil du texte.
     Elle est donc sortie du flux et ancrée en haut à droite, avec 44 px de
     zone sensible. La boîte devient son repère (`position: relative`), et
     l'en-tête lui réserve sa place pour que le titre ne passe pas dessous. */
  .gg-config .gg-detail-boite { position: relative; }
  .gg-config .gg-detail-tete { padding-right: 40px; }
  .gg-config .gg-detail-tete .gg-fermer {
    position: absolute; top: 10px; right: 12px;
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
  }

  /* ── 3. L'ACTION PREND TOUTE LA LARGEUR ───────────────────────────────────
     Comme sur les cartes : dans 327 px, un bouton centré et rétréci se vise
     moins bien qu'un bouton pleine largeur. */
  .gg-config .gg-detail-pied { flex-direction: column; align-items: stretch; gap: 12px; }
  .gg-config .gg-detail-actions .gg-cta { width: 100%; }
}

/* ── LA FENÊTRE DU CALCUL DE LA REMISE ──────────────────────────────────────
   Guilhem, 07/09/2026 : « cette section prend trop de place, fais en sorte que
   ça s'affiche en popup en cliquant sur un bouton détails ».

   Elle se pose PAR-DESSUS le détail sans le fermer — on y jette un œil et l'on
   revient à l'endroit exact où l'on était. Même calque, même voile, même
   arrondi que la loupe : trois fenêtres qui se ressemblent se comprennent
   d'un coup, trois fenêtres différentes se réapprennent à chaque fois.
   Un cran AU-DESSUS du détail dans l'empilement (9100 contre 9000), sinon le
   voile du détail passerait devant elle. */
.gg-config .gg-eco-couche {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: gg-fondu .16s ease-out;
}
.gg-config .gg-eco-couche[hidden] { display: none; }
.gg-config .gg-eco-boite {
  position: relative;
  width: min(420px, 100%); max-height: 86vh; overflow: auto;
  background: var(--gg-blanc); border-radius: var(--gg-rayon);
  padding: 22px 24px 24px;
  animation: gg-boite .22s cubic-bezier(.22, .8, .3, 1);
}
.gg-config .gg-eco-titre {
  margin: 0 40px 14px 0; font-size: 17px; font-weight: 800;
  color: var(--gg-noir);
}
.gg-config .gg-eco-boite .gg-fermer {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
/* le résumé qui reste dans le détail : une ligne, et le bouton qui ouvre le reste */
.gg-config .gg-eco-plus {
  display: inline; margin-left: 8px; padding: 0; font-size: 13px;
  white-space: nowrap;
}
/* le bandeau du resume se resserre : il ne porte plus qu'une ligne */
.gg-config .gg-detail-economie { padding: 10px 14px; margin: 10px 0 2px; }
.gg-config .gg-eco-gain { margin: 0; line-height: 1.5; }

/* ── LE NUANCIER SUR MOBILE ─────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « pour les questions couleurs les pastilles sont
   beaucoup trop grosses sur mobile ».

   Le 04/09 il demandait l'inverse — « ça peut prendre plus de place sur la
   page » — et j'étais passé de 58 à 84 px. Les deux consignes sont justes :
   elles ne parlent pas du même écran. Sur 1 280 px, 84 px de minimum donnent
   une quinzaine de pastilles par rangée ; sur 375 px, ils n'en laissent
   entrer que TROIS, larges de 106 px chacune. Une grille en `1fr` étire ce
   qu'elle ne peut pas multiplier.

   62 px de minimum rendent cinq colonnes sur un écran de 375 (pastilles de
   59 px, la taille d'origine) et quatre sur un 320. Le nuancier redevient un
   nuancier — on compare des couleurs d'un coup d'œil — au lieu d'une colonne
   de gros disques qu'il faut faire défiler. */
@media (max-width: 720px) {
  .gg-config .gg-nuancier {
    /* 56 et non 62 : mesure sur la page, 62 ne laissait entrer que QUATRE
       colonnes de 78 px — moins gros que 106, mais toujours pas un nuancier.
       Il reste 343 px utiles sur un ecran de 375 ; cinq colonnes separees de
       10 px demandent un minimum de 60. On descend a 56 pour garder la marge,
       et les pastilles sortent a 59 px : la taille d'origine. */
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 12px 10px;
  }
}

/* ── LE SURVOL N'EXISTE PAS SOUS UN DOIGT ───────────────────────────────────
   Guilhem, 07/09/2026 : « quand on ajoute puis on retire un item sur mobile le
   bouton reste orange ».

   Ce n'est pas un état oublié dans le code : sur un écran tactile, `:hover`
   COLLE. Le navigateur considère que le doigt survole encore le dernier
   élément touché, et il le garde ainsi jusqu'à ce qu'on touche ailleurs. Le
   bouton restait donc à sa couleur de survol après le tap — l'orange — et
   contredisait l'état qu'il venait d'afficher.

   Toutes les règles de survol de ce fichier sont donc désormais enfermées dans
   `@media (hover: hover)` : elles ne s'appliquent qu'aux appareils qui ont un
   vrai pointeur. Le retour au doigt, lui, est déjà assuré par l'animation
   d'enfoncement et par l'onde, qui répondent au `pointerdown` et s'éteignent
   toutes seules.
   (La règle du bloc `prefers-reduced-motion` est laissée telle quelle : elle
   ANNULE un survol, elle n'en pose pas.) */

/* ── UNE QUESTION TIENT DANS L'ÉCRAN ────────────────────────────────────────
   Guilhem, 07/09/2026 : « il faut que les options et le bouton valider soient
   visibles dans l'écran sans qu'on ait à scroller ».

   Le nuancier compte trente et une couleurs : cinq colonnes, sept rangées,
   630 px rien que pour les options. Avec l'énoncé au-dessus et le bouton en
   dessous, « Continuer » tombait sous la ligne de flottaison — on répondait à
   une question sans voir comment la valider.

   AUCUNE TAILLE DE PASTILLE NE RÉSOUT ÇA : les réduire assez pour tout faire
   tenir les rendrait illisibles, et la question du design montre des vêtements
   qui, eux, ne se réduisent pas. La structure doit donc porter la contrainte,
   pas le contenu.

   L'étape devient une colonne haute d'un écran : l'énoncé en haut, le bouton
   en bas, TOUS DEUX FIXES, et seules les options défilent entre les deux. Le
   bouton est visible en permanence, quelle que soit la question.

   `svh` et non `vh` : sur mobile, `100vh` compte la barre d'adresse du
   navigateur comme si elle n'était pas là — le bouton se retrouve caché
   dessous, exactement le défaut qu'on corrige. `svh` prend la hauteur la plus
   petite, celle qui reste toujours vraie. Le repli en `vh` sert aux
   navigateurs qui ne connaissent pas encore l'unité. */
@media (max-width: 720px) {
  .gg-config .gg-jauge { margin-bottom: 18px; }
  .gg-config .gg-etape {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 110px);
    max-height: calc(100svh - 110px);
  }
  .gg-config .gg-reponse {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    /* ── DE LA PLACE POUR L'ANNEAU DE SELECTION ───────────────────────────
       Guilhem, 07/09/2026 : « le contour des cercles sélectionnés est
       cropped ». La pastille active porte un anneau orange de 3 px DEHORS
       d'elle (`box-shadow: 0 0 0 3px`). Entre deux colonnes il tombe dans la
       gouttière et ne gêne personne ; sur la première colonne et la première
       rangée, il sort de la zone de réponse — devenue un conteneur à
       défilement pour que le bouton reste visible, et un conteneur à
       défilement ROGNE dans les deux sens.
       Cinq pixels de rembourrage lui rendent sa place, et une marge négative
       de même valeur remet la grille exactement où elle était : rien ne bouge
       à l'écran, l'anneau cesse d'être coupé. */
    padding: 5px 5px 0;
    margin: 16px -5px 14px;
    /* un fondu en bas dit qu'il reste des options en dessous */
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  }
  .gg-config .gg-reponse:not([data-defile="1"]) {
    -webkit-mask-image: none; mask-image: none;
  }
  .gg-config .gg-nav {
    flex: 0 0 auto;
    padding-top: 12px; border-top: 1px solid var(--gg-ligne);
  }
}

/* ── « VOIR MES PACKS » SUR UNE SEULE LIGNE (01/10/2026) ──────────────────────
   À 375 px, le bouton de la dernière question passait sur deux lignes, serré
   entre « Retour » et « Tout recommencer ». Il garde sa largeur, ses marges se
   resserrent, et c'est le lien secondaire qui passe à la ligne. Sous 360 px,
   rien ne change : la place manquerait. */
@media (min-width: 360px) and (max-width: 420px) {
  .gg-config .gg-nav { gap: 8px; }
  .gg-config .gg-nav #ggSuivant {
    flex: 0 0 auto; white-space: nowrap;
    padding-left: 16px; padding-right: 16px;
  }
  .gg-config .gg-nav .gg-raz { text-align: right; }
}

/* ── LES TROIS DESIGNS TIENNENT DANS L'ÉCRAN ────────────────────────────────
   Guilhem, 07/09/2026 : « il faudrait ne pas avoir à scroller les 3 designs ».

   Mesure : trois cartes de 223 px, soit 697 px de contenu dans 490 px
   visibles. On en voyait deux, et le troisième — celui qu'on n'a pas encore
   regardé — restait caché. Comparer trois designs suppose de les voir
   ensemble ; sinon on ne compare pas, on se souvient.

   LES GARDER L'UN SOUS L'AUTRE, ET NON CÔTE À CÔTE : trois colonnes sur
   343 px donneraient 105 px par vêtement, et le motif — la seule chose qui les
   distingue — n'y serait plus lisible. On garde donc la pleine largeur et l'on
   coupe dans la HAUTEUR : la planche est large (deux vêtements côte à côte,
   rapport 2,7), elle a de la marge à perdre en hauteur avant de gêner.

   Le compte : (490 − 2 × 10 de gouttière) ÷ 3 = 156 px par carte, dont 54 px
   d'encadrement et de nom. Reste 100 px de visuel, et `xMidYMid meet` cale le
   dessin dedans sans le déformer. */
@media (max-width: 720px) {
  .gg-config .gg-apercus { gap: 10px; }
  .gg-config .gg-apercu { padding: 10px 12px 8px; }
  .gg-config .gg-apercu .gg-vue {
    min-height: 0; height: 100px; margin-bottom: 4px;
    contain-intrinsic-size: auto 100px;
  }
  .gg-config .gg-apercu .gg-vue svg { width: 100%; height: 100%; }
  .gg-config .gg-apercu { font-size: 13px; }
}

/* ── DEUX QUESTIONS DANS UNE ÉTAPE ──────────────────────────────────────────
   Guilhem, 07/09/2026 : « il faudrait que le nom du club et le choix du sport
   soient faits en même temps ».
   Chaque sous-question garde son intitulé : un champ de saisie suivi d'une
   rangée d'images ne dirait plus ce qu'il demande. Les intitulés sont plus
   discrets que l'énoncé de l'étape — c'est lui qui reste le titre. */
.gg-config .gg-sous + .gg-sous { margin-top: 22px; }
/* Guilhem, 07/09/2026 : « agrandir l'écriture "Le nom de votre club" et
   "Votre sport" ». À 15 px elles se lisaient comme des étiquettes de
   formulaire ; ce sont les deux QUESTIONS de l'étape, et l'énoncé au-dessus
   n'est qu'un titre de regroupement. 20 px les remet à leur rang — juste en
   dessous de « Votre club », nettement au-dessus du texte courant. */
.gg-config .gg-sous-titre {
  margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  color: var(--gg-noir);
}
@media (max-width: 720px) {
  .gg-config .gg-sous-titre { font-size: 18px; }
}
.gg-config .gg-sous-aide {
  margin: 0 0 10px; font-size: 13px; color: var(--gg-doux);
}

/* ── LES CINQ SPORTS TIENNENT DANS L'ÉCRAN ──────────────────────────────────
   Guilhem, 07/09/2026 : « pareil, faut pas avoir à scroller, mets 3 cards de
   large pour les sports ».

   La règle des 560 px repassait à DEUX colonnes : cinq sports faisaient alors
   trois rangées, et la pétanque restait sous la ligne — comme les designs tout
   à l'heure. Trois colonnes, deux rangées, tout est là.

   Et la fenêtre du vêtement redescend au rapport 1,1 → 0,95 sur cette
   largeur : dans une carte de 107 px, une fenêtre plus haute que large
   pousserait la seconde rangée hors de l'écran. Le dessin, lui, ne change pas
   de proportion — `object-fit: contain` le cale dans la fenêtre quelle qu'elle
   soit. */
@media (max-width: 560px) {
  .gg-config .gg-cartes-image {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .gg-config .gg-cartes-image .gg-carte {
    padding: 10px 8px 10px; gap: 6px; font-size: 13px;
  }
  .gg-config .gg-cartes-image .gg-carte img { aspect-ratio: .95; }
}

/* ── L'INTRODUCTION ─────────────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « quand le visiteur arrive ici il ne comprend pas
   l'objectif et ce qu'il doit faire ».
   Elle porte le titre de la page depuis que le bandeau du thème est retiré :
   c'est donc elle, et non l'énoncé de la question, qui doit accrocher l'œil en
   premier. Les trois repères sont volontairement discrets — ils rassurent sur
   la longueur du parcours, ils ne se lisent pas comme un mode d'emploi. */
.gg-config .gg-intro { margin-bottom: 26px; }
.gg-config .gg-intro[hidden] { display: none; }
.gg-config .gg-intro-titre {
  margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -.02em;
  line-height: 1.1; color: var(--gg-noir);
  /* 01/10/2026 : ce titre est passe de H1 a H2 (le H1 vit dans l'en-tete). Le
     theme donne aux H2 une autre police qu'aux H1 ; on garde celle qu'il
     avait, la meme que les questions et la vitrine. */
  font-family: "Sour Gummy", "Outfit", system-ui, sans-serif;
}
.gg-config .gg-intro-pas {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.gg-config .gg-intro-pas li {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; color: var(--gg-texte);
}
.gg-config .gg-intro-pas span {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gg-noir); color: var(--gg-blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

/* Sur mobile, l'introduction pousse la première question hors de l'écran si on
   la laisse à sa taille de bureau. Elle dit la même chose en deux fois moins
   de hauteur : le titre descend d'un cran, et les trois repères s'empilent en
   une colonne serrée plutôt qu'en trois lignes espacées. */
@media (max-width: 720px) {
  .gg-config .gg-intro { margin-bottom: 18px; }
  .gg-config .gg-intro-titre { font-size: 26px; }
  /* en colonne serree : sur 343 px, trois etapes cote a cote se couperaient
     en six lignes ferrees n'importe ou */
  .gg-config .gg-intro-pas { margin-top: 10px; gap: 6px; flex-direction: column; }
  .gg-config .gg-intro-pas li { font-size: 14px; }
  .gg-config .gg-intro-pas span { width: 20px; height: 20px; font-size: 11px; }
}

/* ── MOINS DE TEXTE ─────────────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « enlève tous les textes superflus, y'a trop d'infos »,
   en citant « Deux réponses, et nous vous montrons vos packs », « Il
   s'affichera sur les pièces qui portent une écriture » et « Il ne change que
   le pack match ». Les trois disaient vrai, et les trois répétaient ce que
   l'écran montrait déjà : on lit une phrase de moins, on comprend aussi vite.
   Le surtitre « ÉQUIPEMENT DE CLUB » et les trois repères numérotés sont
   partis avec — leurs règles n'ont plus d'objet.
   Ce qui reste : le titre, une phrase, et les précisions qui apprennent
   quelque chose (ce que fait une couleur, le format d'un logo).
   Et une précision vide se RETIRE au lieu de se vider : un paragraphe vide
   garde sa marge et creuse un trou sous le titre — le piège de `[hidden]`
   déjà payé sur le formulaire de demande. */
.gg-config .gg-aide[hidden] { display: none !important; }

/* Une carte de sport sans vêtement — « Autre » : le nom prend la place que
   l'image occupe sur les autres, pour que la rangée garde une hauteur unique.
   Sans cela, la carte se tasserait et la grille se déformerait autour d'elle. */
.gg-config .gg-cartes-image .gg-carte-sans-image { justify-content: center; }
.gg-config .gg-cartes-image .gg-carte-sans-image .gg-carte-nom {
  padding: 26px 0;
}

/* ── LE SPORT ÉCRIT À LA MAIN ───────────────────────────────────────────────
   Le champ prend la place qu'occupaient les six cartes, et le retour vers la
   liste est là, sous lui : sans lui, cocher « Autre » serait un aller sans
   retour — il faudrait recommencer tout le questionnaire pour revenir à
   « Rugby ». */
.gg-config .gg-sport-libre { display: flex; flex-direction: column; align-items: flex-start; }
.gg-config .gg-sport-retour { margin-top: 10px; padding-left: 0; }

/* ── LE FORMULAIRE DE DEMANDE DOIT SE VOIR EN ENTIER ────────────────────────
   Guilhem, 07/09/2026 : « j'ai fait valider et j'ai que ça » — la fenêtre ne
   montrait que le récapitulatif.

   MESURE sur son écran (1727 × 810) : boîte 665 px, formulaire 489 px, bas du
   formulaire à 739 px pour une boîte qui s'arrête à 738. Le bouton « Envoyer
   ma demande » était donc coupé au pixel près, et 32 px du corps restaient
   hors champ.

   La cause vient de la loupe : `.gg-loupe-boite` est en `overflow: hidden`,
   règle écrite le 02/09 pour qu'un VÊTEMENT ne se regarde jamais en défilant
   — « pas de scroll, on doit pouvoir voir tout le visuel ». La fenêtre de
   demande reprend cette boîte, mais ce n'est pas un vêtement : c'est un
   formulaire de six champs, qui a le droit de défiler.

   Deux corrections, celles déjà appliquées au questionnaire ce matin :
     * le corps prend toute la hauteur restante et défile lui-même — sans
       `min-height: 0`, un enfant de conteneur flex refuse de se réduire
       au-dessous de son contenu, et déborde au lieu de défiler ;
     * le bouton d'envoi est COLLANT au bas de la zone : quoi qu'on fasse
       défiler, l'action reste sous les yeux. C'est la même règle que
       « Continuer » dans le questionnaire. */
.gg-config .gg-demande-corps {
  flex: 1 1 auto; min-height: 0; max-height: none;
}
.gg-config .gg-demande-champs button[type="submit"] {
  position: sticky; bottom: 0; z-index: 1;
  margin-top: 4px;
  /* le fond évite que les champs défilent en transparence sous le bouton */
  box-shadow: 0 -10px 12px 10px var(--gg-blanc);
}

/* (01/10/2026 : le cadre cache `#ggPuits`, qui recevait la fiche client, est
   retire avec elle — sa regle aussi.) */

/* ── L'ÉCRAN DE CONFIRMATION ────────────────────────────────────────────────
   Guilhem, 07/09/2026 : « refais proprement ce popup ».
   Une hiérarchie, et une seule : la coche et « c'est envoyé » d'abord, la trace
   de ce qui est parti ensuite, l'action facultative en dernier et en creux. */
.gg-config .gg-merci-tete {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.gg-config .gg-merci-coche {
  flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: 50%; padding: 7px; box-sizing: border-box;
  background: var(--gg-vert); color: var(--gg-blanc);
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gg-config .gg-merci-titre {
  margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.01em;
  color: var(--gg-noir);
}
.gg-config .gg-merci-texte {
  margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--gg-texte);
}
/* la trace de l'envoi : même mise en page que le récapitulatif d'avant, dans
   un cadre gris pour qu'on la lise comme une pièce jointe et non comme une
   étape à refaire */
.gg-config .gg-merci-envoi {
  background: var(--gg-gris); border-radius: 12px; padding: 12px 16px;
}
.gg-config .gg-merci-etiquette {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gg-doux);
}
.gg-config .gg-merci-envoi .gg-recap-ligne:last-child { border-bottom: 0; }
.gg-config .gg-merci-logo {
  margin: 14px 0 0; padding: 10px 14px;
  border-left: 3px solid var(--gg-orange); background: rgba(255, 107, 0, .06);
  font-size: 14px; line-height: 1.45; color: var(--gg-noir);
}
.gg-config .gg-merci-pied {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px;
}
.gg-config .gg-merci-note { margin: 8px 0 0; font-size: 13px; }
@media (max-width: 640px) {
  .gg-config .gg-merci-pied { flex-direction: column; align-items: stretch; }
  .gg-config .gg-merci-pied .gg-cta { width: 100%; }
}

/* ── LES CHAMPS OUBLIÉS ─────────────────────────────────────────────────────
   Guilhem, 08/09/2026 : « il faut surligner en rouge les champs oubliés par le
   visiteur ». Le rouge est sur le CHAMP, là où il faut agir — pas seulement
   dans un message qu'il faudrait mémoriser. Il s'efface à la première frappe. */
.gg-config .gg-demande-champs .gg-manque {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .13);
}
.gg-config .gg-demande-champs .gg-manque:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .22);
}
.gg-config .gg-demande-erreur-champs {
  margin: 14px 0 0; padding: 10px 14px;
  border-left: 3px solid #c0392b; background: rgba(192, 57, 43, .07);
  color: #8e2a20; font-size: 14px; font-weight: 600;
}
.gg-config .gg-demande-erreur-champs[hidden] { display: none; }

/* ── CE QUI MANQUE DANS LE QUESTIONNAIRE ────────────────────────────────────
   Guilhem, 08/09/2026 : « ici aussi il faut quand on a oublié un champ ».
   Même langage que le formulaire de demande : le rouge se pose sur l'endroit
   où il faut agir, et le message se lit entre les réponses et le bouton —
   c'est le chemin de l'œil quand on vient de cliquer. */
.gg-config .gg-champ.gg-manque,
.gg-config .gg-champ.gg-manque:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .13);
}
/* sur une rangée de cartes ou un nuancier, c'est la zone qui se cerne */
.gg-config .gg-sous-zone.gg-manque,
.gg-config .gg-reponse.gg-manque {
  border-radius: var(--gg-rayon);
  box-shadow: 0 0 0 2px #c0392b;
}
.gg-config .gg-etape-erreur {
  margin: 12px 0 0; padding: 10px 14px;
  border-left: 3px solid #c0392b; background: rgba(192, 57, 43, .07);
  color: #8e2a20; font-size: 14px; font-weight: 600;
}
.gg-config .gg-etape-erreur[hidden] { display: none; }

/* ── LE BANDEAU DES VISUELS ────────────────────────────────────────────────
   Il n'apparait que sur le lien du mail. Il est volontairement sobre et
   distinct du reste : ce n'est pas une piece du parcours client, c'est un
   outil de travail. */
.gg-visuels{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:14px 16px;margin:0 0 18px;border-radius:10px;
  background:#111;color:#fff}
.gg-visuels-txt{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.gg-visuels-txt strong{font-size:15px}
.gg-visuels-txt span{font-size:12.5px;opacity:.72;line-height:1.35}
.gg-visuels .gg-cta{flex:0 0 auto}
.gg-visuels-etat{flex:1 1 100%;font-size:12px;opacity:.72}
@media (max-width:640px){.gg-visuels{padding:12px}.gg-visuels .gg-cta{width:100%}}
/* le telechargement offert au club, sur l'ecran de confirmation */
.gg-merci-zip{display:flex;flex-direction:column;gap:6px;margin:16px 0 0}
.gg-merci-zip .gg-visuels-etat{font-size:12px;opacity:.7}

/* ── LE NOMBRE D'ARTICLES ──────────────────────────────────────────────────
   Guilhem, 09/09/2026 : « rajoute choix de nombres d'articles avec ces
   tranches là », puis « refais bien les boutons ».

   La premiere version était molle, et pour deux raisons qui se voyaient à
   l'écran : mes règles n'étaient pas préfixées `.gg-config` comme le reste de
   cette feuille, et `.gg-demande-champs label` — qui les attrapait — impose
   12 px, capitales et gris clair à TOUT libellé de champ. Mes pastilles
   héritaient donc de l'allure d'une étiquette, pas d'un bouton.

   Ils reprennent maintenant l'habillage des champs de saisie voisins : même
   bordure, même rayon, même noir. Un formulaire où chaque contrôle a son
   propre style se lit comme un assemblage ; ici, la rangée doit se lire comme
   la suite du champ juste au-dessus.

   Colonnes égales et repliables : cinq boutons de largeurs disparates font une
   ligne en dents de scie, et « 200 – 1000 » est deux fois plus large que
   « 1000+ ». `auto-fit` les égalise et les replie tout seul — 5 par ligne au
   large, 3 sur un téléphone. */
.gg-config .gg-volume { border: 0; padding: 0; margin: 0; min-width: 0; }
.gg-config .gg-volume legend {
  padding: 0; margin: 0 0 8px;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gg-doux);
}
.gg-config .gg-volume-choix {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 10px;
}
/* -- LE STYLE VA SUR LE `span`, PAS SUR LE `label` ------------------------
   Premiere version : `label:has(input:checked)`. Mesure du 09/09 sur la page
   d'essai — le radio etait bien coche, `:has()` etait supporte, le label
   REPONDAIT `true` a `.matches(":has(input:checked)")`, et le fond restait
   blanc. Le style ne suivait pas l'etat.
   Plutot que de traquer ce decalage, on s'en passe : le `span` est le frere
   qui suit le radio, et `input:checked ~ span` est un selecteur de 2001. Il
   marche sur tout ce qui affiche la page, y compris les machines lentes des
   clubs — c'etait deja la regle pour le reste de cette section.
   Le `label` n'est plus qu'un cadre de positionnement. */
.gg-config .gg-volume-choix label {
  position: relative; display: block; min-width: 0;
  font-size: 0; letter-spacing: normal; text-transform: none;
}
.gg-config .gg-volume-choix span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 10px;
  font-family: inherit; font-size: 14px; line-height: 1;
  letter-spacing: normal; text-transform: none;
  color: var(--gg-noir); background: var(--gg-blanc);
  border: 1px solid var(--gg-ligne); border-radius: 10px;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
}
/* LE VRAI BOUTON RADIO RESTE LA, invisible mais focalisable : c'est lui qui
   porte l'etat, le clavier et le lecteur d'ecran. Le masquer par
   `display: none` le sortirait de l'ordre de tabulation. */
.gg-config .gg-volume-choix input[type="radio"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: 10px;
  opacity: 0; cursor: pointer; z-index: 1;
  appearance: none; -webkit-appearance: none;
}
@media (hover: hover) {
  .gg-config .gg-volume-choix label:hover span { border-color: var(--gg-noir); }
}
.gg-config .gg-volume-choix input:checked ~ span {
  background: var(--gg-noir); border-color: var(--gg-noir); color: var(--gg-blanc);
  font-weight: 600;
}
.gg-config .gg-volume-choix input:focus-visible ~ span {
  outline: 2px solid var(--gg-noir); outline-offset: 3px;
}
/* SUR UN TELEPHONE, TROIS COLONNES IMPOSEES. Laisse a lui-meme, `auto-fit`
   n'en tenait que deux dans les 276 px du popup : cinq tranches sur TROIS
   lignes, dans un formulaire deja long. A 13 px la plus large — « 200 – 1000 »
   — mesure 75 px et tient dans les 84 px d'une colonne sur trois. */
@media (max-width: 640px) {
  .gg-config .gg-volume-choix { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gg-config .gg-volume-choix span { font-size: 13px; padding: 0 6px; }
}
.gg-config .gg-volume.gg-manque { outline: none; }
.gg-config .gg-volume.gg-manque .gg-volume-choix span { border-color: #d3222a; }

/* le téléchargement offert au club, sur l'écran de confirmation */
.gg-merci-zip{display:flex;flex-direction:column;gap:6px;margin:16px 0 0}
.gg-merci-zip .gg-visuels-etat{font-size:12px;opacity:.7}

/* ══ LA BARRE DE SÉLECTION ═════════════════════════════════════════════════
   Guilhem, 09/09/2026 : « la sticky bar en bas il faudrait qu'elle soit plus
   voyante, couleur principale orange ». Puis, devant le résultat : « c'est un
   peu abusé en orange non ? en fait l'objectif est juste que la barre soit
   plus visible ».

   Il a raison, et la première version confondait le but et le moyen. Blanche
   sur fond blanc, la barre se lisait comme la fin de la page ; en orange plein,
   elle devenait l'élément le plus fort de l'écran — devant les vêtements, qui
   sont pourtant la seule chose à regarder ici. Un aplat de 100 px de large
   comme la page ne peut pas être discret.

   LE SOMBRE SÉPARE SANS CRIER. Sur une page blanche, un socle presque noir se
   détache immédiatement — c'est le contraste qui rend visible, pas la
   saturation — et il ne prend aucune couleur aux maillots.
   L'ORANGE RESTE, mais sur le seul bouton : la couleur va à l'action, pas au
   décor. C'est le rôle qu'il a déjà dans le thème, sur « Espace club ».

   Le texte du bouton est NOIR, et c'est mesuré : sur #ff6b00, le blanc donne
   2,9:1 — sous le minimum lisible de 4,5:1 — quand le noir donne 6,2:1. */
.gg-config .gg-barre {
  background: var(--gg-noir);
  border-top: 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .28);
}
.gg-config .gg-barre,
.gg-config .gg-barre-choix,
.gg-config .gg-barre-total { color: var(--gg-blanc); }

/* les pastilles se lisent sur le sombre : un voile clair, pas un fond plein */
.gg-config .gg-barre-puce {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: var(--gg-blanc);
}
.gg-config .gg-barre-oter { color: rgba(255, 255, 255, .6); }
@media (hover: hover) { .gg-config .gg-barre-oter:hover { color: var(--gg-blanc); } }

/* LES GRIS SONT DES GRIS POUR FOND BLANC. `--gg-doux` disparaît sur le sombre :
   les mentions secondaires deviennent des blancs translucides. */
.gg-config .gg-barre-vide .gg-barre-compte,
.gg-config .gg-barre-invite,
.gg-config .gg-barre-total .gg-prix-mention { color: rgba(255, 255, 255, .62); }
.gg-config .gg-barre-vide { box-shadow: 0 -8px 24px rgba(0, 0, 0, .22); }
.gg-config .gg-barre-vide .gg-barre-total { opacity: .5; }

/* LE BOUTON PORTE LA COULEUR. Ailleurs `.gg-cta` est noir et vire à l'orange
   au survol ; ici il est orange d'emblée — sur un fond noir, un bouton noir
   n'existerait pas — et fonce au survol au lieu de changer de teinte. */
/* ── L'ECRITURE DES BOUTONS « VALIDER » EST BLANCHE ────────────────────────
   Guilhem, 09/09/2026 : « sur boutons valider passe l'écriture en blanc ».
   J'avais mis du noir sur une mesure de contraste — blanc sur #ff6b00 donne
   2,9:1 quand le noir donne 6,2:1. C'est son choix graphique, et il l'a fait en
   connaissance de cause : la note reste ici pour qui relira, pas pour revenir
   dessus. La graisse 800 et les capitales compensent en partie ce que le
   contraste perd. */
.gg-config .gg-barre .gg-cta {
  background: var(--gg-orange); border-color: var(--gg-orange); color: var(--gg-blanc);
}
@media (hover: hover) {
  .gg-config .gg-barre .gg-cta:hover { background: #e85f00; border-color: #e85f00; }
}

/* ══ LES SECTIONS DÉPLIABLES DU TEXTE DE LA PAGE ═══════════════════════════
   Guilhem, 09/09/2026 : « on comprend pas que c'est des sections dépliables ».

   Ce sont de vrais `<details>` — le corps de la page, pas cette section — et le
   thème leur retire le marqueur natif (`list-style: none`). Il restait donc
   quatre titres alignés sous des filets, sans rien qui dise qu'ils s'ouvrent :
   un titre gras ressemble à un intertitre, pas à un bouton.

   POURQUOI CE STYLE VIT ICI, hors du préfixe `.gg-config` qui protège tout le
   reste du fichier : la feuille est appelée par `gg-configurateur.liquid`, donc
   chargée UNIQUEMENT sur les pages qui portent la section. Écrire la règle dans
   la feuille du thème la ferait tomber sur toutes les pages du site, ce que
   Guilhem n'a pas demandé.

   LE CHEVRON EST DESSINÉ EN CSS, pas en police ni en SVG : deux traits et une
   rotation. Rien à charger, et il tourne avec l'état — c'est le mouvement qui
   apprend au visiteur que le bloc s'ouvre, plus sûrement qu'un signe fixe. */
.shopify-block.rte details > summary {
  position: relative;
  padding-right: 34px;                     /* la place du chevron */
  min-height: 44px;                        /* la cible au doigt */
  align-items: center;
  transition: color .14s;
}
.shopify-block.rte details > summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
  opacity: .55;
}
.shopify-block.rte details[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
  opacity: .9;
}
@media (hover: hover) {
  .shopify-block.rte details > summary:hover { color: #ff6b00; }
  .shopify-block.rte details > summary:hover::after { opacity: 1; }
}
/* le focus clavier doit se voir : ces titres sont des commandes */
.shopify-block.rte details > summary:focus-visible {
  outline: 2px solid #ff6b00; outline-offset: 3px; border-radius: 4px;
}

/* ── « DESIGN 1 SUR 3 · CHANGER » ──────────────────────────────────────────
   Guilhem, 09/09/2026 : « on comprend pas qu'on peut changer de design sur
   chaque vêtement ».

   Le mot « changer » est souligné comme un lien : c'est ce qui, dans une carte
   pleine de titres, distingue une commande d'une étiquette. Le rang, lui, reste
   en gris — il informe, il n'appelle pas au clic.

   Discret par construction : 11 px, sous le nom, sans cadre. La carte montre
   d'abord des vêtements ; cette ligne répond à une question qu'on se pose en
   les regardant, elle ne doit pas leur voler la vedette. */
.gg-config .gg-choix-design {
  display: inline-flex; align-items: baseline; gap: 6px;
  margin: 2px 0 0; padding: 2px 0;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; letter-spacing: .02em;
  text-transform: none; text-align: left;
  color: rgba(0, 0, 0, .5);
}
.gg-config .gg-choix-verbe {
  color: var(--gg-noir); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.gg-config .gg-choix-rang::after { content: " ·"; }
@media (hover: hover) {
  .gg-config .gg-choix-design:hover .gg-choix-verbe { color: var(--gg-orange); }
}
.gg-config .gg-choix-design:focus-visible {
  outline: 2px solid var(--gg-noir); outline-offset: 2px; border-radius: 4px;
}
/* au doigt, la ligne mérite sa cible : on l'étend sans grossir le texte */
@media (max-width: 720px) {
  .gg-config .gg-choix-design { padding: 8px 0; }
}

/* ── LE PIED DE LA LOUPE : CHOISIR À GAUCHE, CONCLURE À DROITE ─────────────
   Guilhem, 09/09/2026 : « refais la structure de ça ».

   La version empilée posait « Design 2 » — pastille noire, cochée — juste
   au-dessus de « Valider le design » — pastille noire, bouton. Deux formes
   identiques, deux natures différentes : rien ne disait laquelle décidait quoi.

   Le pied se lit maintenant en deux temps, de gauche à droite : le CHOIX
   (consigne + puces), puis L'ACTION qui clôt le geste. Le bouton passe à
   l'orange, la couleur que la boutique réserve déjà à l'action principale — la
   barre du bas, « Espace club ». Le noir marque ce qui est sélectionné,
   l'orange ce qui fait avancer : deux rôles, deux couleurs, plus de confusion.

   Le filet sépare la zone d'action du vêtement : ce qui est en dessous se
   manipule, ce qui est au-dessus se regarde. */
.gg-config .gg-loupe-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--gg-ligne);
}
.gg-config .gg-loupe-pied[hidden] { display: none; }
.gg-config .gg-loupe-choix {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-width: 0;
}
.gg-config .gg-loupe-consigne {
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gg-doux); white-space: nowrap;
}
.gg-config .gg-loupe-pied .gg-designs { gap: 8px; }
.gg-config .gg-loupe-pied .gg-puce {
  min-height: 40px; padding: 0 18px; font-size: 14px;
  display: inline-flex; align-items: center;
}
/* L'ACTION SE DISTINGUE DU CHOIX. Ailleurs `.gg-cta` est noir et vire à
   l'orange au survol ; ici il est orange d'emblée, pour ne ressembler à aucune
   des puces qu'il jouxte. Texte noir : sur #ff6b00 le blanc tombe à 2,9:1,
   sous le minimum lisible, quand le noir donne 6,2:1. */
.gg-config .gg-loupe-valider {
  flex: 0 0 auto;
  background: var(--gg-orange); border-color: var(--gg-orange);
  color: var(--gg-blanc);
}
@media (hover: hover) {
  .gg-config .gg-loupe-valider:hover { background: #e85f00; border-color: #e85f00; }
}
/* le compteur ne sert que sur petit écran, où les puces s'effacent */
.gg-config .gg-loupe-compteur { display: none; }

@media (max-width: 640px) {
  /* LES PUCES CÈDENT LA PLACE AUX FLÈCHES. Mesuré à 375 px : « Design 1 »,
     « Design 2 », « Design 3 » ne tiennent pas sur une ligne de 283 px — la
     troisième passait dessous et poussait « Valider le design » hors du
     panneau, donc hors de vue. Les flèches font déjà la navigation ; il ne
     manquait que de savoir où l'on en est. */
  .gg-config .gg-loupe-pied {
    flex-direction: column; align-items: stretch; gap: 12px;
    margin-top: 12px; padding-top: 12px;
  }
  .gg-config .gg-loupe-choix { justify-content: center; gap: 8px; }
  .gg-config .gg-loupe-pied .gg-designs { display: none; }
  .gg-config .gg-loupe-compteur {
    display: block; font-size: 15px; font-weight: 700; color: var(--gg-noir);
  }
  .gg-config .gg-loupe-valider { width: 100%; }
}

/* ── LES FLÈCHES DE LA LOUPE ───────────────────────────────────────────────
   Guilhem, 09/09/2026 : « met des flèches de part et d'autre et un bouton
   valider le design ».

   Elles encadrent le vêtement plutôt que de le surmonter : le geste se fait à
   l'endroit où l'on regarde, sans quitter l'image des yeux. Classes propres à
   la loupe — celles du carrousel sont masquées sous 720 px, or c'est justement
   sur un téléphone qu'une flèche vaut mieux qu'une puce à lire. */
.gg-config .gg-loupe-scene {
  position: relative; display: flex; align-items: center; gap: 8px;
}
.gg-config .gg-loupe-scene > .gg-vue { flex: 1 1 auto; min-width: 0; }
.gg-config .gg-loupe-fleche {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--gg-noir); color: var(--gg-blanc);
  font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 3px;   /* les chevrons ‹ › portent haut dans leur cadratin */
  box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
  transition: transform .14s, background-color .14s;
}
.gg-config .gg-loupe-fleche[hidden] { display: none; }
@media (hover: hover) {
  /* PAS D'ORANGE ICI. Depuis que « Valider » le porte, l'orange designe
     l'action qui clot le geste ; une fleche qui vire a la meme teinte au
     survol brouillerait ce partage. Elle fonce, elle ne change pas de role. */
  .gg-config .gg-loupe-fleche:hover { background: #000; transform: scale(1.06); }
}
.gg-config .gg-loupe-fleche:active { transform: scale(.95); }
.gg-config .gg-loupe-fleche:focus-visible {
  outline: 2px solid var(--gg-noir); outline-offset: 3px;
}
@media (max-width: 640px) {
  /* sur un téléphone les flèches se posent SUR le vêtement : lui retirer
     104 px de large le rendrait illisible */
  .gg-config .gg-loupe-fleche {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; font-size: 22px;
  }
  .gg-config .gg-loupe-prec { left: 0; }
  .gg-config .gg-loupe-suiv { right: 0; }
  .gg-config .gg-loupe-fleche:active { transform: translateY(-50%) scale(.95); }
}

/* ── LES TROIS PAS DE L'ÉTAPE FINALE ───────────────────────────────────────
   Ils reprennent l'habillage de l'introduction — pastille noire, texte courant
   — parce que c'est la même promesse tenue deux fois : on annonce le parcours
   au début, on rappelle ce qu'il reste à faire à l'arrivée.
   Ils se posent entre l'en-tête et les cartes : à cet endroit on vient de lire
   « Nos packs pour <club> », on regarde les vêtements, et la question « et
   maintenant ? » se pose là, pas plus bas. */
.gg-config .gg-pack-pas { margin: 16px 0 22px; }
@media (max-width: 720px) {
  /* en colonne serrée : trois lignes de texte à la file valent mieux qu'un
     paragraphe replié en six */
  .gg-config .gg-pack-pas { flex-direction: column; gap: 8px; margin: 12px 0 18px; }
  .gg-config .gg-pack-pas li { font-size: 14px; }
}

/* ── LA PLANCHE DE VÉRIFICATION ────────────────────────────────────────────
   Guilhem, 09/09/2026 : « avant d'arriver sur le formulaire il faudrait qu'on
   ait une sorte de présentation de tous les designs et packs/produits
   choisis ».

   Elle occupe seule le panneau : le récapitulatif des prix et le formulaire
   attendent leur tour. Un écran, une question — « est-ce bien ça ? » — puis un
   autre écran pour y répondre. Mélanger les deux ferait relire les prix au
   moment de regarder les dessins.

   Les vignettes sont plus grandes que dans les cartes de pack : c'est le
   dernier regard avant l'envoi, il doit porter sur le dessin, pas sur une
   miniature. */
.gg-config .gg-verif[hidden] { display: none; }
.gg-config .gg-verif-intro {
  margin: 0 0 14px; font-size: 14px; color: var(--gg-texte); line-height: 1.4;
}
.gg-config .gg-verif-grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.gg-config .gg-verif-piece { min-width: 0; text-align: center; }
/* ── LA HAUTEUR VIENT DE LA LOUPE, IL FAUT LA DEFAIRE ─────────────────────
   Guilhem, 09/09/2026 : « structure pas du tout optimisée, on doit même
   scroller pour aller chercher le bouton ».

   Le panneau de demande reutilise `.gg-loupe-boite`, et cette classe porte
   `.gg-vue { height: 68vh }` — la loupe montre UN vetement en grand, c'est
   voulu la-bas. Mais la regle attrape TOUTES les vues du panneau : chacune des
   vignettes de la planche faisait donc 68 % de la hauteur d'ecran, soit plus de
   600 px pour un maillot dessine en 200. D'ou une planche interminable et un
   bouton repousse hors de vue.
   `height: auto` la rend a son rapport de forme. */
.gg-config .gg-verif-piece .gg-vue {
  position: relative; width: 100%; height: auto; min-height: 0;
  aspect-ratio: 4 / 3;
  background: var(--gg-gris); border-radius: 10px; overflow: hidden;
}
.gg-config .gg-verif-piece .gg-vue svg,
.gg-config .gg-verif-piece .gg-vue img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.gg-config .gg-verif-piece h4 {
  margin: 10px 0 2px; font-size: 12px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gg-noir);
}
.gg-config .gg-verif-design { font-size: 12px; color: var(--gg-doux); }

/* Le pied reprend la règle du panneau de design : ce qui modifie à gauche,
   ce qui fait avancer à droite. */
/* ── LE PIED RESTE SOUS LA MAIN ───────────────────────────────────────────
   Meme avec des vignettes a leur taille, six pieces font defiler : le bouton
   qui fait avancer ne doit pas se meriter. Il colle au bas du panneau, sur un
   fond plein pour que les visuels ne transparaissent pas dessous. */
.gg-config .gg-verif-pied {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  /* ── LA BARRE VA JUSQU'AU BORD ────────────────────────────────────────
     Guilhem, 09/09/2026 : « la barre en bas est pas placée tout en bas ».
     Un element collant se cale sur la BOITE DE CONTENU du conteneur, donc
     au-dessus de son padding bas : il restait une bande ou les vignettes
     defilaient, et l'on voyait passer des morceaux de vetement sous le bouton.
     J'ai d'abord compense par une marge negative de 8 px — la valeur du
     padding sur ordinateur. En ligne, sur un ecran etroit, le padding n'est
     pas le meme et l'ecart revenait : une correction calee sur une mesure d'UN
     format se trompe sur les autres.
     C'est donc le conteneur qui rend son padding bas le temps de la planche
     (`gg-corps-verif`), et la barre porte l'air a sa place. */
  margin: 22px -4px 0;
  padding: 16px 4px 14px;
  border-top: 1px solid var(--gg-ligne);
  background: var(--gg-blanc);
}
.gg-config .gg-verif-ok {
  flex: 0 0 auto;
  background: var(--gg-orange); border-color: var(--gg-orange); color: var(--gg-blanc);
}
@media (hover: hover) {
  .gg-config .gg-verif-ok:hover { background: #e85f00; border-color: #e85f00; }
}
@media (max-width: 640px) {
  /* DEUX COLONNES A NOUVEAU. Elles avaient cede la place a une seule quand
     les vignettes portaient des fleches : deux boutons de 30 px sur 131 px de
     large couvraient le vetement. Le lien « changer » vit sous la vignette et
     ne lui prend rien — on peut donc en montrer deux de front. */
  .gg-config .gg-verif-grille { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gg-config .gg-verif-pied { flex-direction: column-reverse; align-items: stretch; }
  .gg-config .gg-verif-ok { width: 100%; }
}

/* ── LES GROUPES DE LA PLANCHE ─────────────────────────────────────────────
   Guilhem, 09/09/2026 : « il faut grouper les packs ».
   Cinq vêtements en vrac ne disent pas ce qu'on achète : le club a choisi DEUX
   packs, pas cinq pièces. Chaque groupe porte donc son nom et son prix, et ses
   pièces se rangent dessous — la même composition que sur les cartes, pour
   qu'il retrouve exactement ce qu'on lui a montré. */
/* LE CONTENEUR N'EST PAS UNE GRILLE. Il l'etait, et les groupes — des
   <section> — sont devenus ses cellules : « Pack saison », « Pack match » et
   « Casquette » se rangeaient COTE A COTE en trois colonnes, chacun empilant
   ses pieces en hauteur. La grille appartient aux pieces d'un groupe, pas aux
   groupes entre eux : ceux-ci se lisent l'un sous l'autre, comme une facture. */
.gg-config .gg-verif-corps { display: block; }

.gg-config .gg-verif-groupe + .gg-verif-groupe {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gg-ligne);
}
.gg-config .gg-verif-groupe-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.gg-config .gg-verif-groupe-nom {
  margin: 0; font-size: 14px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gg-noir);
}
.gg-config .gg-verif-groupe-prix {
  font-size: 13px; font-weight: 700; color: var(--gg-doux); white-space: nowrap;
}

/* LA LOUPE PASSE AU-DESSUS DE LA PLANCHE. Les deux sont des calques `.gg-loupe`
   de meme rang, et la planche est declaree APRES dans le document : sans cela
   elle recouvrirait la loupe qu'elle vient d'ouvrir. */
.gg-config .gg-loupe#ggLoupe { z-index: 9500; }

/* ── LE PIED RESTE SOUS LA MAIN ───────────────────────────────────────────
   Meme avec des vignettes a leur taille, six pieces font defiler : le bouton
   qui fait avancer ne doit pas se meriter. Il colle au bas du panneau, sur un
   fond plein pour que les visuels ne transparaissent pas dessous. */
.gg-config .gg-verif-pied {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  /* ── LA BARRE VA JUSQU'AU BORD ────────────────────────────────────────
     Guilhem, 09/09/2026 : « la barre en bas est pas placée tout en bas ».
     Un element collant se cale sur la BOITE DE CONTENU du conteneur, donc
     au-dessus de son padding bas : il restait une bande ou les vignettes
     defilaient, et l'on voyait passer des morceaux de vetement sous le bouton.
     J'ai d'abord compense par une marge negative de 8 px — la valeur du
     padding sur ordinateur. En ligne, sur un ecran etroit, le padding n'est
     pas le meme et l'ecart revenait : une correction calee sur une mesure d'UN
     format se trompe sur les autres.
     C'est donc le conteneur qui rend son padding bas le temps de la planche
     (`gg-corps-verif`), et la barre porte l'air a sa place. */
  margin: 22px -4px 0;
  padding: 16px 4px 14px;
  border-top: 1px solid var(--gg-ligne);
  background: var(--gg-blanc);
}
.gg-config .gg-verif-ok {
  flex: 0 0 auto;
  background: var(--gg-orange); border-color: var(--gg-orange); color: var(--gg-blanc);
}
@media (hover: hover) {
  .gg-config .gg-verif-ok:hover { background: #e85f00; border-color: #e85f00; }
}
@media (max-width: 640px) {
  /* UNE SEULE COLONNE, DEPUIS QUE LES VIGNETTES PORTENT DES FLECHES. A deux
     colonnes la vignette fait 131 px : deux boutons de 30 px y occupent 46 %
     de la largeur et couvrent le vetement — or c'est lui qu'on est venu
     verifier. En pleine largeur elle passe a 271 px, et les fleches n'en
     prennent plus que 22 %. Le defilement s'allonge, mais le pied est collant :
     le bouton reste sous la main. */
  .gg-config .gg-verif-grille { grid-template-columns: 1fr; gap: 18px; }
  .gg-config .gg-verif-pied { flex-direction: column-reverse; align-items: stretch; }
  .gg-config .gg-verif-ok { width: 100%; }
}

/* ── LES GROUPES DE LA PLANCHE ─────────────────────────────────────────────
   Guilhem, 09/09/2026 : « il faut grouper les packs ».
   Cinq vêtements en vrac ne disent pas ce qu'on achète : le club a choisi DEUX
   packs, pas cinq pièces. Chaque groupe porte donc son nom et son prix, et ses
   pièces se rangent dessous — la même composition que sur les cartes, pour
   qu'il retrouve exactement ce qu'on lui a montré. */
/* LE CONTENEUR N'EST PAS UNE GRILLE. Il l'etait, et les groupes — des
   <section> — sont devenus ses cellules : « Pack saison », « Pack match » et
   « Casquette » se rangeaient COTE A COTE en trois colonnes, chacun empilant
   ses pieces en hauteur. La grille appartient aux pieces d'un groupe, pas aux
   groupes entre eux : ceux-ci se lisent l'un sous l'autre, comme une facture. */
.gg-config .gg-verif-corps { display: block; }

.gg-config .gg-verif-groupe + .gg-verif-groupe {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--gg-ligne);
}
.gg-config .gg-verif-groupe-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.gg-config .gg-verif-groupe-nom {
  margin: 0; font-size: 14px; font-weight: 900; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gg-noir);
}
.gg-config .gg-verif-groupe-prix {
  font-size: 13px; font-weight: 700; color: var(--gg-doux); white-space: nowrap;
}

/* ── CHANGER DE DESSIN DEPUIS LA PLANCHE ───────────────────────────────────
   Guilhem, 09/09/2026 : « on doit pouvoir changer le design des produits
   depuis ici ».

   Deux chevrons plutôt que trois puces nommées : sur une vignette de 209 px,
   trois boutons ne tiennent pas, et ce sont les mêmes chevrons que dans la
   loupe — un geste appris une fois sert partout.

   Ils sont visibles en permanence, pas au survol : au doigt, le survol
   n'existe pas, et une commande qui ne se montre qu'à la souris n'existe pas
   sur un téléphone. */
}

/* le conteneur ne garde pas de marge basse tant que la planche est affichée :
   c'est la barre collante qui doit toucher le bord */
.gg-config .gg-demande-corps.gg-corps-verif { padding-bottom: 0; }

/* ══ 01/10/2026 — LOTS 1 ET 2 : CE QUE LE SCRIPT ET LA SECTION AJOUTENT ═══════
   Une regle par element nouveau, dans le vocabulaire existant : les memes
   gris, le meme orange, le meme filet rouge que les erreurs deja en place. */

/* ── « au lieu de 80 € », sous le prix de chaque carte de pack ──────────────
   La reference ne vivait que dans l'infobulle de la pastille. Elle s'ecrit en
   bas-de-casse, plus petite que « TTC PAR PERSONNE » : c'est un repere, pas un
   second prix. Le montant est barre, d'un trait assez epais pour se lire. */
.gg-config .gg-prix-ref {
  margin-top: 6px; font-size: 13px; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: rgba(0, 0, 0, .55);
}
.gg-config .gg-prix-ref s {
  text-decoration-thickness: 1.5px; color: rgba(0, 0, 0, .55);
}

/* ── « dès 25 € TTC » : sur un telephone, deux cartes par rangee laissent peu
   de place au nom ; le prix passe dessous plutot que d'ecraser le nom. */
@media (max-width: 720px) {
  .gg-config .gg-unite .gg-tete { flex-wrap: wrap; row-gap: 4px; }
}

/* ── LE LOGO PAR MAIL : sous le depot, et sur l'ecran de confirmation ────── */
.gg-config .gg-logo-mail { margin: 0; line-height: 1.45; }
.gg-config .gg-logo-mail a,
.gg-config .gg-merci-logo a {
  color: var(--gg-noir); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .gg-config .gg-logo-mail a:hover,
  .gg-config .gg-merci-logo a:hover { color: var(--gg-orange); }
}

/* ── LES CHAMPS OBLIGATOIRES, ET L'ADRESSE MAL FORMEE ───────────────────────
   L'asterisque prend le rouge des erreurs : c'est la meme information, dite
   avant plutot qu'apres. L'erreur de l'adresse s'ecrit SOUS le champ, en
   phrase normale — pas dans les petites capitales de l'intitule. */
.gg-config .gg-requis { color: #c0392b; font-weight: 700; }
.gg-config .gg-demande-requis { margin: 0; font-size: 12px; }
.gg-config .gg-champ-erreur {
  display: block; margin-top: 2px;
  font-size: 13px; line-height: 1.4; font-weight: 600;
  letter-spacing: normal; text-transform: none; color: #8e2a20;
}
.gg-config .gg-champ-erreur[hidden] { display: none; }

/* ── MOINS DE 10 TENUES : la note qui previent, sans bloquer ──────────────── */
.gg-config .gg-volume-note {
  margin: 10px 0 0; padding: 8px 12px;
  border-left: 3px solid var(--gg-orange); background: rgba(255, 107, 0, .06);
  font-size: 13px; line-height: 1.45; color: var(--gg-noir);
}
.gg-config .gg-volume-note[hidden] { display: none; }

/* ── « Vous préférez en parler ? » sous le bouton d'envoi ────────────────── */
.gg-config .gg-demande-appel { margin: 2px 0 0; text-align: center; font-size: 14px; }
.gg-config .gg-demande-appel a {
  color: var(--gg-noir); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) { .gg-config .gg-demande-appel a:hover { color: var(--gg-orange); } }

/* ── L'ENVOI QUI TARDE (20 s) : une information, pas une erreur ───────────
   L'orange des notes, pas le rouge des erreurs : rien ne dit encore que
   l'envoi a echoue — c'est bien ce qu'on ne veut plus laisser croire. */
.gg-config .gg-demande-lent {
  margin: 14px 0 0; padding: 10px 14px;
  border-left: 3px solid var(--gg-orange); background: rgba(255, 107, 0, .06);
  font-size: 14px; line-height: 1.45; color: var(--gg-noir);
}
.gg-config .gg-demande-lent a {
  color: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}

/* ══ 01/10/2026 — LA CRÉATION EN TROIS ÉTAPES : PACKS ET RÉGLAGES EN DIRECT ═══
   Izidine : « que même les plus nuls comprennent directement », « des trucs
   bien visibles ou des dessins », « même le bouton recommencer n'est pas bien
   vu ». Les étapes 2 et 3 portent la même pastille orange numérotée que les
   trois étapes de l'en-tête ; les boutons ont un dessin et une vraie surface. */

/* les pictogrammes en trait, à la couleur du texte */
.gg-config .gg-ico {
  flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* la pastille numérotée d'une étape */
.gg-config .gg-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gg-orange); color: #fff; font-weight: 800; font-size: 18px; line-height: 1;
}

/* ── L'EN-TÊTE DES PACKS : le titre, puis deux vrais boutons ───────────────── */
.gg-config .gg-entete { margin-bottom: 18px; }
.gg-config .gg-entete-haut {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px;
}
.gg-config .gg-entete-haut .gg-titre { margin: 0; }
.gg-config .gg-entete-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-config .gg-bouton-second {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--gg-noir); background: var(--gg-blanc); color: var(--gg-noir);
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
@media (hover: hover) {
  .gg-config .gg-bouton-second:hover { background: var(--gg-noir); color: var(--gg-blanc); }
  .gg-config .gg-bouton-raz:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
}
.gg-config .gg-bouton-second:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 3px; }
/* l'ancien lien « Tout recommencer » avait un point médian devant lui */
.gg-config .gg-entete .gg-bouton-raz { margin-left: 0; opacity: 1; font-size: 15px; }
.gg-config .gg-entete .gg-bouton-raz::before { content: none; }

/* ── ÉTAPE 2 : LA BARRE DE RÉGLAGES ─────────────────────────────────────────── */
.gg-config .gg-reglages {
  margin: 0 0 22px; padding: 20px;
  border: 2px solid var(--gg-orange); border-radius: 20px; background: #fff7f0;
}
.gg-config .gg-reglages[hidden] { display: none; }
.gg-config .gg-reglages-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gg-config .gg-reglages-titre { display: flex; flex-direction: column; gap: 2px; }
.gg-config .gg-reglages-titre strong { font-size: 20px; line-height: 1.2; color: var(--gg-noir); }
.gg-config .gg-reglages-titre span { font-size: 14px; color: var(--gg-doux); }
.gg-config .gg-reglages-corps {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .gg-config .gg-reglages-corps { grid-template-columns: minmax(0, 1fr); } }
.gg-config .gg-reglage {
  display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--gg-ligne); border-radius: 16px; background: var(--gg-blanc);
}
.gg-config .gg-reglage-nom {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--gg-noir);
}
.gg-config .gg-reglage-nom small { font-size: 13px; font-weight: 500; color: var(--gg-doux); }

/* 2 ou 3 couleurs : deux gros boutons */
.gg-config .gg-nb-couleurs {
  display: inline-flex; gap: 6px; padding: 5px; justify-self: start;
  border-radius: 14px; background: var(--gg-gris);
}
.gg-config .gg-nb {
  padding: 10px 18px; border: 0; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--gg-noir); cursor: pointer;
}
.gg-config .gg-nb.gg-actif { background: var(--gg-noir); color: #fff; }
.gg-config .gg-nb:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }

/* une pastille par couleur : le disque, son rôle, son nom, et « Changer » */
.gg-config .gg-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-config .gg-pastille-couleur {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  border: 1.5px solid var(--gg-ligne); border-radius: 999px; background: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.gg-config .gg-pastille-couleur i {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.gg-config .gg-pastille-txt { display: flex; flex-direction: column; line-height: 1.2; }
.gg-config .gg-pastille-txt small { font-size: 12px; color: var(--gg-doux); }
.gg-config .gg-pastille-txt strong { font-size: 15px; color: var(--gg-noir); }
.gg-config .gg-pastille-changer {
  margin-left: 6px; font-size: 13px; font-weight: 700; color: #d45500;
  text-decoration: underline; text-underline-offset: 3px;
}
.gg-config .gg-pastille-couleur.gg-actif { border-color: var(--gg-orange); box-shadow: 0 0 0 3px rgba(255, 107, 0, .18); }
@media (hover: hover) { .gg-config .gg-pastille-couleur:hover { border-color: var(--gg-orange); } }
.gg-config .gg-pastille-couleur:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }

/* le nuancier s'ouvre sous les pastilles */
.gg-config .gg-nuancier-volet { padding: 14px; border-radius: 14px; background: var(--gg-gris); }
.gg-config .gg-volet-titre { margin: 0 0 10px; font-weight: 700; color: var(--gg-noir); }
.gg-config .gg-nuancier-volet .gg-nuancier {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px;
}

/* le logo, dans la barre : une zone de dépôt plus compacte */
.gg-config .gg-reglage-logo .gg-depot {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px;
}
.gg-config .gg-reglage-logo .gg-depot > span { font-size: 16px; font-weight: 700; color: var(--gg-noir); }
.gg-config .gg-reglage-logo .gg-depot > small { font-size: 13px; }
.gg-config .gg-reglage-logo .gg-depot img { max-height: 90px; }

/* ── ÉTAPE 3 : CHOISIR SES PACKS ─────────────────────────────────────────────── */
.gg-config .gg-etape-trois {
  display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 14px 16px;
  border-radius: 16px; background: var(--gg-gris);
}
.gg-config .gg-etape-trois-txt { display: flex; flex-direction: column; gap: 3px; }
.gg-config .gg-etape-trois-txt strong { font-size: 18px; line-height: 1.25; color: var(--gg-noir); }
.gg-config .gg-etape-trois-txt span { font-size: 14px; line-height: 1.45; color: var(--gg-texte); }

@media (max-width: 640px) {
  .gg-config .gg-reglages { padding: 14px; }
  .gg-config .gg-pastille-couleur { flex: 1 1 100%; }
  .gg-config .gg-entete-actions { width: 100%; }
  .gg-config .gg-bouton-second { flex: 1 1 0; padding: 10px 12px; font-size: 14px; }
}

/* ce que le script masque sur la question du sport (jauge, « Continuer ») et
   le résumé en mots des packs : leurs règles d'affichage passaient devant
   l'attribut `hidden` */
.gg-config .gg-nav[hidden],
.gg-config .gg-jauge[hidden],
.gg-config #ggResume[hidden] { display: none !important; }

/* ══ 01/10/2026 — LES RÉGLAGES À CÔTÉ DES PACKS, ET « CHANGER LE DESIGN » EN RONDS ══
   Izidine : « mettre à côté des packs pour voir et modifier en direct », « la
   partie changer design doit être intuitive […] un rond où on voit l'aperçu
   des autres designs », « écrire explicitement changer design ». */

/* ── ORDINATEUR : deux colonnes, la barre de réglages collante à gauche ────── */
.gg-config .gg-reglages-mini { display: none; }
.gg-config .gg-reglages-termine { display: none; }
@media (min-width: 1100px) {
  .gg-config .gg-pack-corps {
    display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start;
  }
  /* collée sous l'en-tête du site (71 px), et elle défile seule si le
     nuancier ouvert la rend plus haute que l'écran — la barre « Demander mon
     devis », en bas, garde ses 120 px */
  .gg-config .gg-pack-cote {
    position: sticky; top: 86px;
    max-height: calc(100vh - 86px - 130px); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 20px;
  }
  .gg-config .gg-pack-cote .gg-reglages { margin: 0; }
  .gg-config .gg-pack-cote .gg-reglages-corps { grid-template-columns: minmax(0, 1fr); }
  .gg-config .gg-pack-cote .gg-pastille-couleur { flex: 1 1 100%; }
  .gg-config .gg-pack-cote .gg-nuancier-volet .gg-nuancier { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ── TÉLÉPHONE ET TABLETTE : une bande résumée, qui ouvre un panneau en bas ── */
@media (max-width: 1099px) {
  .gg-config .gg-pack-cote {
    position: sticky; top: 71px; z-index: 40;
    margin: 0 -16px 16px; padding: 8px 16px; background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  }
  .gg-config .gg-pack-cote .gg-reglages { margin: 0; padding: 0; border: 0; background: none; }
  .gg-config .gg-reglages-mini {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 54px; padding: 6px 12px 6px 6px; border: 2px solid var(--gg-orange); border-radius: 999px;
    background: #fff7f0; font-family: inherit; text-align: left; cursor: pointer;
  }
  .gg-config .gg-reglages-mini .gg-num { width: 34px; height: 34px; font-size: 16px; }
  .gg-config .gg-mini-ronds { display: inline-flex; align-items: center; }
  .gg-config .gg-mini-ronds i {
    width: 26px; height: 26px; margin-right: -6px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  }
  .gg-config .gg-mini-ronds img {
    width: 28px; height: 28px; margin-left: 12px; object-fit: contain;
    border-radius: 6px; background: #fff;
  }
  .gg-config .gg-mini-txt { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--gg-noir); padding-left: 6px; }
  .gg-config .gg-mini-action {
    flex: none; padding: 8px 14px; border-radius: 999px; background: var(--gg-noir); color: #fff;
    font-size: 14px; font-weight: 700;
  }
  /* le panneau complet : fermé, il n'existe pas ; ouvert, il monte du bas */
  .gg-config .gg-reglages-plein { display: none; }
  .gg-config .gg-reglages.gg-ouvert .gg-reglages-plein {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
    max-height: 72vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; border-top: 3px solid var(--gg-orange); background: #fff7f0;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .22);
  }
  .gg-config .gg-reglages.gg-ouvert .gg-reglages-tete { position: sticky; top: -16px; z-index: 1; margin: -16px -16px 12px; padding: 14px 16px; background: #fff7f0; }
  .gg-config .gg-reglages-termine {
    display: inline-flex; margin-left: auto; padding: 10px 18px; border: 0; border-radius: 999px;
    background: var(--gg-noir); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
}

/* ── « CHANGER LE DESIGN » : un rond par design ─────────────────────────────── */
.gg-config .gg-designs { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.gg-config .gg-designs-titre {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #d45500;
}
.gg-config .gg-designs-ronds { display: flex; justify-content: center; gap: 8px; }
.gg-config .gg-design-rond {
  position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
}
.gg-config .gg-design-vue {
  position: relative; display: block; width: 54px; height: 54px; overflow: hidden;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: box-shadow .15s, transform .12s;
}
/* le rendu montre le devant ET le dos : deux fois la largeur du rond, calé à
   gauche — le devant tombe au centre */
.gg-config .gg-design-vue > svg,
.gg-config .gg-design-vue > img {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 200% !important; height: auto !important; max-width: none !important; min-height: 0 !important;
}
.gg-config .gg-design-num {
  position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--gg-noir);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); font-size: 11px; font-weight: 800; line-height: 1;
}
.gg-config .gg-design-rond.gg-actif .gg-design-vue { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 3px var(--gg-orange); }
.gg-config .gg-design-rond.gg-actif .gg-design-num { background: var(--gg-orange); color: #fff; box-shadow: none; }
@media (hover: hover) { .gg-config .gg-design-rond:hover .gg-design-vue { transform: scale(1.08); } }
.gg-config .gg-design-rond:focus-visible { outline: 2px solid var(--gg-noir); outline-offset: 3px; }
@media (max-width: 640px) {
  .gg-config .gg-design-vue { width: 46px; height: 46px; }
  .gg-config .gg-designs-ronds { gap: 6px; }
}
/* panneau ouvert sur téléphone : au-dessus de la barre de sélection (8000),
   sous les fenêtres du questionnaire (9000 et plus) */
.gg-config .gg-pack-cote.gg-cote-ouvert { z-index: 8500; }

/* l'en-tête du site se cache quand on descend (classe gc-header--hidden) et
   revient quand on remonte : la colonne et la bande des réglages le suivent,
   sans laisser de vide au-dessus d'elles */
.gg-config .gg-pack-cote { transition: top .25s ease; }
@media (min-width: 1100px) {
  body:has(.gc-header--hidden) .gg-config .gg-pack-cote { top: 16px; max-height: calc(100vh - 16px - 130px); }
}
@media (max-width: 1099px) {
  body:has(.gc-header--hidden) .gg-config .gg-pack-cote { top: 0; }
  /* le bouton WhatsApp passait par-dessus le panneau ouvert */
  body:has(.gg-reglages.gg-ouvert) .gc-whatsapp-btn { display: none !important; }
}
/* « Changer le design » tient sur une ligne dans les colonnes étroites */
.gg-config .gg-designs-titre { font-size: 11px; letter-spacing: .02em; text-align: center; }

/* « Changer le design » dans une carte à l'unité : sur sa propre ligne, sous
   le nom et le prix — dans la même rangée, il écrasait le nom lettre par lettre */
.gg-config .gg-unite .gg-tete { flex-wrap: wrap; }
.gg-config .gg-unite .gg-tete h4 { flex: 1 1 auto; }
.gg-config .gg-unite .gg-designs { order: 3; flex: 1 1 100%; margin-top: 8px; }

/* ══ 01/10/2026 — DES COULEURS QUI DISENT OÙ ELLES VONT, ET LE NOM DU CLUB ══
   Izidine : « couleur principale, secondaire, troisième couleur ? on le
   comprend ? », puis « rajoute le nom du club ». Chaque pastille porte un
   petit maillot dont la zone concernée est à la couleur choisie. */
.gg-config .gg-pastille-couleur { gap: 12px; padding: 6px 14px 6px 6px; border-radius: 16px; }
.gg-config .gg-picto-maillot {
  flex: none; display: block; width: 46px; height: 46px; padding: 3px;
  border-radius: 12px; background: #fff; box-sizing: border-box;
}
.gg-config .gg-picto-zone { stroke: rgba(20, 23, 28, .55); stroke-width: .9; }
.gg-config .gg-picto-bord { fill: none; stroke: #14171c; stroke-width: 1.6; stroke-linejoin: round; }
.gg-config .gg-pastille-txt { flex: 1 1 auto; min-width: 0; gap: 2px; }
.gg-config .gg-pastille-txt small { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--gg-texte, #3a3f47); }
.gg-config .gg-pastille-txt strong { display: inline-flex; align-items: center; gap: 8px; }
.gg-config .gg-pastille-point {
  flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.gg-config .gg-pastille-changer { flex: none; }

/* le nom du club : un champ simple, à la largeur du bloc */
.gg-config .gg-reglage-club .gg-champ { max-width: none; padding: 12px 14px; font-size: 16px; }
.gg-config .gg-reglage-club .gg-champ:focus { border-color: var(--gg-orange); box-shadow: 0 0 0 3px rgba(255, 107, 0, .18); }
.gg-config .gg-reglage-aide { font-size: 13px; line-height: 1.4; color: var(--gg-doux); }

/* la colonne des réglages (ordinateur) tient sur un écran de 900 px de haut
   avec le nom du club : marges un peu resserrées */
@media (min-width: 1100px) {
  .gg-config .gg-pack-cote .gg-reglages { padding: 16px; }
  .gg-config .gg-pack-cote .gg-reglages-tete { margin-bottom: 12px; }
  .gg-config .gg-pack-cote .gg-reglages-corps { gap: 12px; }
  .gg-config .gg-pack-cote .gg-reglage { padding: 14px; gap: 10px; }
  .gg-config .gg-pack-cote .gg-pastilles { gap: 8px; }
  .gg-config .gg-pack-cote .gg-reglage-logo .gg-depot { padding: 12px; }
}

/* ══ 02/10/2026 — « AGRANDIR » : LE PACK EN GRAND, À LA PLACE DES CARTES ══════
   Izidine : « un truc qui peut agrandir un pack et tout est bien disposé
   ensuite, on peut les modifier qu'on veut, tu ne touches pas à la colonne de
   gauche ». Le détail n'est plus une fenêtre par-dessus la page : il s'ouvre
   dans la colonne de droite, la colonne des réglages reste à côté. */
.gg-config .gg-cta-agrandir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gg-config .gg-cta-agrandir .gg-ico { width: 18px; height: 18px; }
.gg-config .gg-detail-retour { display: none; }

.gg-config #ggDetail.gg-detail-en-place {
  position: static; inset: auto; z-index: auto;
  display: block; padding: 0; margin: 0 0 18px;
  background: none; animation: none;
}
.gg-config #ggDetail.gg-detail-en-place[hidden] { display: none; }
.gg-config #ggDetail.gg-detail-en-place .gg-detail-boite {
  width: auto; max-width: none; max-height: none; overflow: visible;
  padding: 20px 24px 24px;
  border: 1px solid var(--gg-ligne); border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
.gg-config #ggDetail.gg-detail-en-place .gg-fermer { display: none; }
.gg-config #ggDetail.gg-detail-en-place .gg-detail-retour {
  display: inline-flex; align-self: flex-start; margin: 0 0 16px;
}
.gg-config #ggDetail.gg-detail-en-place .gg-detail-prix { padding-right: 0; }
.gg-config #ggDetail.gg-detail-en-place .gg-detail-tete { padding-right: 0; }

/* les pièces en grand : deux par ligne, chacune sur son fond gris */
.gg-config #ggDetail.gg-detail-en-place .gg-detail-liste {
  overflow: visible; min-height: 0; margin-top: 18px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.gg-config #ggDetail.gg-detail-en-place .gg-detail-piece {
  display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: var(--gg-gris);
}
.gg-config #ggDetail.gg-detail-en-place .gg-detail-piece .gg-vue {
  height: clamp(220px, 20vw, 300px); cursor: zoom-in;
}
.gg-config #ggDetail.gg-detail-en-place .gg-detail-piece .gg-tete { align-items: center; text-align: center; gap: 10px; }
.gg-config #ggDetail.gg-detail-en-place .gg-detail-piece .gg-tete h4 { font-size: 13px; }
.gg-config #ggDetail.gg-detail-en-place .gg-designs-titre { font-size: 12px; }
.gg-config #ggDetail.gg-detail-en-place .gg-designs-ronds { gap: 10px; }
.gg-config #ggDetail.gg-detail-en-place .gg-design-vue { width: 64px; height: 64px; }
.gg-config #ggDetail.gg-detail-en-place .gg-detail-pied { margin-top: 18px; }

@media (max-width: 749px) {
  .gg-config #ggDetail.gg-detail-en-place .gg-detail-boite { padding: 16px; }
  .gg-config #ggDetail.gg-detail-en-place .gg-detail-liste { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gg-config #ggDetail.gg-detail-en-place .gg-detail-piece .gg-vue { height: 250px; }
  .gg-config #ggDetail.gg-detail-en-place .gg-design-vue { width: 56px; height: 56px; }
}

/* ══ 02/10/2026 — LE CONFIGURATEUR 3D, POUR CEUX QUI NE VEULENT PAS DE PACK ══
   Izidine : « un bouton pour nous renvoyer vers le config 3D pour ceux qui ne
   veulent pas ça ». Un bouton en haut des packs, une phrase sous les sports. */
.gg-config a.gg-bouton-second { text-decoration: none; }
.gg-config .gg-bouton-3d .gg-ico-sortie { width: 16px; height: 16px; margin-left: -2px; }
.gg-config .gg-sortie-3d {
  margin: 22px 0 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--gg-texte);
}
.gg-config .gg-sortie-3d a {
  font-weight: 700; color: #d45500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
@media (hover: hover) { .gg-config .gg-sortie-3d a:hover { color: var(--gg-noir); } }
@media (max-width: 640px) {
  .gg-config .gg-entete-actions .gg-bouton-3d { flex: 1 1 100%; }
}

/* ══ 02/10/2026 — LE PARCOURS EN QUATRE ÉTAPES ═══════════════════════════════
   Izidine : « les gens ne comprennent toujours pas ». 1 le sport, 2 le pack,
   3 les options (facultatives), 4 la personnalisation. */

/* ── LA BARRE D'ÉTAPES ── */
.gg-config .gg-parcours { margin: 0 0 26px; }
.gg-config .gg-parcours[hidden] { display: none; }
.gg-config .gg-parcours-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.gg-config .gg-parcours-bouton {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  min-height: 54px; padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--gg-ligne); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--gg-doux); text-align: left;
}
.gg-config button.gg-parcours-bouton { cursor: pointer; }
.gg-config .gg-parcours-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--gg-gris); color: var(--gg-doux);
  font-weight: 800; font-size: 16px;
}
.gg-config .gg-parcours-bouton .gg-ico { flex: none; width: 20px; height: 20px; }
.gg-config .gg-parcours-nom { min-width: 0; }
.gg-config .gg-parcours-fait .gg-parcours-bouton { color: var(--gg-noir); background: #fff7f0; border-color: #ffd2b0; }
.gg-config .gg-parcours-fait .gg-parcours-num { background: #1f9d55; color: #fff; }
@media (hover: hover) {
  .gg-config button.gg-parcours-bouton:hover { border-color: var(--gg-orange); }
  .gg-config button.gg-parcours-bouton:hover .gg-parcours-nom { text-decoration: underline; text-underline-offset: 3px; }
}
.gg-config button.gg-parcours-bouton:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }
.gg-config .gg-parcours-encours .gg-parcours-bouton {
  color: #fff; background: var(--gg-orange); border-color: var(--gg-orange);
  box-shadow: 0 6px 16px rgba(255, 107, 0, .25);
}
.gg-config .gg-parcours-encours .gg-parcours-num { background: #fff; color: #d45500; }
@media (max-width: 749px) {
  .gg-config .gg-parcours { margin-bottom: 18px; }
  .gg-config .gg-parcours-liste { gap: 4px; }
  .gg-config .gg-parcours-bouton {
    flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 0; height: 100%;
    padding: 8px 2px; border-radius: 14px; font-size: 11.5px; text-align: center;
  }
  .gg-config .gg-parcours-bouton .gg-ico { display: none; }
  .gg-config .gg-parcours-num { width: 28px; height: 28px; font-size: 14px; }
}

/* ── LES ÉTAPES 2 ET 3 ── */
.gg-config .gg-choix[hidden] { display: none; }
.gg-config .gg-choix-tete { margin: 0 0 18px; }
.gg-config .gg-choix-tete .gg-titre { margin: 0 0 6px; }
.gg-config .gg-choix-tete .gg-aide { margin: 0; font-size: 15px; }

/* étape 2 : une carte par pack */
.gg-config .gg-choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.gg-config .gg-choix-carte {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border: 1.5px solid var(--gg-ligne); border-radius: 20px; background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover: hover) {
  .gg-config .gg-choix-carte:hover { border-color: var(--gg-orange); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
}
.gg-config .gg-choix-carte.gg-choisi { border: 2px solid var(--gg-orange); box-shadow: 0 0 0 3px rgba(255, 107, 0, .15); }
.gg-config .gg-choix-carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gg-config .gg-choix-carte-titre { min-width: 0; }
.gg-config .gg-choix-carte-titre .gg-nom-pack { margin: 0; }
.gg-config .gg-choix-carte-titre .gg-aide { margin: 4px 0 0; font-size: 14px; }
.gg-config .gg-choix-prix { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.gg-config .gg-choix-prix .gg-prix-montant { font-size: 30px; line-height: 1; }
.gg-config .gg-choix-prix .gg-prix-mention { margin-top: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-doux); }
.gg-config .gg-choix-remise { margin: 0; font-size: 14px; color: var(--gg-texte); }
.gg-config .gg-pastille-remise {
  display: inline-block; margin-right: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--gg-noir); color: #fff; font-size: 13px; font-weight: 800;
}
.gg-config .gg-choix-pieces { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; align-content: start; }
.gg-config .gg-choix-piece { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: var(--gg-gris); }
.gg-config .gg-choix-piece .gg-vue,
.gg-config .gg-option .gg-vue { position: relative; width: 100%; height: 110px; min-height: 0; content-visibility: visible; }
.gg-config .gg-choix-piece .gg-vue > svg, .gg-config .gg-choix-piece .gg-vue > img,
.gg-config .gg-option .gg-vue > svg, .gg-config .gg-option .gg-vue > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.gg-config .gg-choix-piece-nom { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--gg-noir); }
.gg-config .gg-choix-bouton { width: 100%; }

/* étape 3 : les options à cocher, et le total par personne */
.gg-config .gg-options-total {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid #ffd2b0; background: #fff7f0; font-size: 15px; line-height: 1.45; color: var(--gg-noir);
}
.gg-config .gg-options-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gg-config .gg-option {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px;
  border: 1.5px solid var(--gg-ligne); border-radius: 16px; background: #fff;
}
.gg-config .gg-option.gg-choisi { border-color: var(--gg-orange); background: #fff7f0; }
.gg-config .gg-option .gg-vue { height: 120px; }
.gg-config .gg-option-nom { font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--gg-noir); }
.gg-config .gg-option-prix { font-size: 13px; color: var(--gg-doux); }
.gg-config .gg-option-bouton { width: 100%; margin-top: auto; }
.gg-config .gg-options-pied {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gg-ligne);
}
.gg-config .gg-options-continuer { min-width: 280px; }
@media (max-width: 749px) {
  .gg-config .gg-choix-grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gg-config .gg-choix-carte { padding: 16px; }
  .gg-config .gg-options-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gg-config .gg-option .gg-vue { height: 96px; }
  /* le bouton « Continuer » reste sous le pouce */
  .gg-config .gg-options-pied {
    position: sticky; bottom: 0; z-index: 30; gap: 8px;
    margin: 22px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 0; background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 16px rgba(0, 0, 0, .08);
  }
  .gg-config .gg-options-continuer { order: -1; flex: 1 1 100%; min-width: 0; }
  .gg-config .gg-options-pied .gg-bouton-second { flex: 1 1 100%; min-height: 40px; padding: 6px 12px; font-size: 14px; }
  body:has(#ggChoixOptions:not([hidden])) .gc-whatsapp-btn { display: none !important; }
}

/* ── ÉTAPE 4 : LA TENUE CHOISIE, EN GRAND ── */
.gg-config .gg-etape-trois { align-items: center; }
.gg-config .gg-tenue-pack { margin: 0 0 22px; padding: 20px; border: 1px solid var(--gg-ligne); border-radius: 20px; background: #fff; }
.gg-config .gg-tenue-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.gg-config .gg-tenue-titre { flex: 1 1 240px; min-width: 0; }
.gg-config .gg-tenue-titre .gg-nom-pack { margin: 0; }
.gg-config .gg-tenue-titre .gg-aide { margin: 4px 0 0; }
.gg-config .gg-tenue-prix { display: flex; flex-direction: column; align-items: flex-end; }
.gg-config .gg-tenue-prix .gg-prix-montant { font-size: 30px; line-height: 1; }
.gg-config .gg-tenue-prix .gg-prix-mention { margin-top: 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-doux); }
.gg-config .gg-tenue-changer { align-self: center; font-weight: 700; }
.gg-config .gg-tenue-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gg-config .gg-tenue-piece { padding: 14px; border: 0; border-radius: 16px; background: var(--gg-gris); }
.gg-config .gg-tenue-piece .gg-vue { position: relative; height: clamp(200px, 19vw, 280px); min-height: 0; content-visibility: visible; }
.gg-config .gg-tenue-piece .gg-vue > svg, .gg-config .gg-tenue-piece .gg-vue > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gg-config .gg-tenue-piece .gg-tete { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; text-align: center; }
.gg-config .gg-tenue-piece .gg-tete h4 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-noir); }
.gg-config .gg-tenue-piece .gg-designs { margin-top: 2px; }
.gg-config .gg-tenue-piece .gg-design-vue { width: 58px; height: 58px; }
.gg-config .gg-tenue-option { display: flex; align-items: center; gap: 12px; }
@media (max-width: 749px) {
  .gg-config .gg-tenue-pack { padding: 14px; }
  .gg-config .gg-tenue-pieces { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gg-config .gg-tenue-piece .gg-vue { height: 240px; }
  .gg-config .gg-tenue-piece .gg-design-vue { width: 50px; height: 50px; }
}

/* ── LE LOGO : UN VRAI BOUTON « ENVOYER MON LOGO » ── */
.gg-config .gg-depot-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: 999px;
  background: var(--gg-orange); color: #fff; font-size: 16px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 6px 14px rgba(255, 107, 0, .25);
}
.gg-config .gg-depot-bouton .gg-ico { width: 20px; height: 20px; }
.gg-config .gg-depot-bouton-creux { margin-top: 8px; background: #fff; color: var(--gg-noir); border: 1.5px solid var(--gg-noir); box-shadow: none; font-size: 14px; min-height: 40px; }
.gg-config .gg-reglage-logo .gg-depot { gap: 8px; }
.gg-config .gg-depot-ok { display: block; font-size: 14px; font-weight: 700; color: #1f9d55; }
@media (hover: hover) { .gg-config .gg-depot:hover .gg-depot-bouton:not(.gg-depot-bouton-creux) { background: #e85f00; } }

/* téléphone : « + Ajouter » sur une ligne */
@media (max-width: 749px) {
  .gg-config .gg-option-bouton { min-height: 40px; padding: 8px 10px; font-size: 13px; white-space: nowrap; }
  .gg-config .gg-parcours-nom { hyphens: manual; overflow-wrap: anywhere; }
}


/* ══ 06/10/2026 — LE PANNEAU DES ÉTAPES, À CÔTÉ DES VÊTEMENTS ════════════════
   Izidine : « mettre à côté des maillots et faire les étapes directement
   là-bas, il y a juste cette section qui change en fonction des étapes ».
   Ordinateur : la tenue à gauche, le panneau collant à droite.
   Téléphone : la tenue en haut, le panneau en tiroir en bas de l'écran. */
.gg-config .gg-panneau { display: flex; flex-direction: column; }
.gg-config .gg-panneau-tete { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #ffd2b0; }
.gg-config .gg-panneau-titre { display: block; margin-bottom: 10px; font-size: 20px; line-height: 1.2; color: var(--gg-noir); }
.gg-config .gg-panneau-pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gg-config .gg-panneau-pas-bouton {
  display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 6px 8px;
  border: 1.5px solid var(--gg-ligne); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--gg-doux); text-align: left; cursor: pointer;
}
.gg-config .gg-panneau-pas-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gg-gris); font-size: 12px; font-weight: 800;
}
.gg-config .gg-panneau-pas-etape.gg-actif .gg-panneau-pas-bouton { background: var(--gg-orange); border-color: var(--gg-orange); color: #fff; }
.gg-config .gg-panneau-pas-etape.gg-actif .gg-panneau-pas-num { background: #fff; color: #d45500; }
.gg-config .gg-panneau-pas-etape.gg-fait .gg-panneau-pas-bouton { color: var(--gg-noir); border-color: #ffd2b0; }
.gg-config .gg-panneau-pas-etape.gg-fait .gg-panneau-pas-num { background: #1f9d55; color: #fff; }
.gg-config .gg-panneau-pas-bouton:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }
.gg-config .gg-panneau-corps { display: grid; gap: 14px; align-content: start; }
.gg-config .gg-panneau-pied { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffd2b0; }
.gg-config .gg-panneau-total { display: none; margin: 0 0 8px; font-size: 14px; color: var(--gg-noir); }
.gg-config .gg-panneau-boutons { display: flex; gap: 8px; }
.gg-config .gg-panneau-suivant { flex: 1 1 auto; }
.gg-config .gg-panneau-retour { flex: none; padding-left: 12px; padding-right: 14px; }
.gg-config .gg-panneau .gg-pastille-couleur { flex: 1 1 100%; }
.gg-config .gg-panneau .gg-nuancier-volet { flex: 1 1 100%; }
.gg-config .gg-panneau .gg-nuancier-volet .gg-nuancier { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

/* les couleurs toutes prêtes */
.gg-config .gg-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gg-config .gg-preset {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  border: 1.5px solid var(--gg-ligne); border-radius: 14px; background: #fff; font-family: inherit; cursor: pointer;
}
.gg-config .gg-preset .gg-picto-maillot { width: 44px; height: 44px; padding: 0; background: none; }
.gg-config .gg-preset-nom { font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--gg-noir); }
.gg-config .gg-preset.gg-actif { border-color: var(--gg-orange); background: #fff7f0; box-shadow: 0 0 0 3px rgba(255, 107, 0, .18); }
@media (hover: hover) { .gg-config .gg-preset:hover { border-color: var(--gg-orange); } }
.gg-config .gg-preset:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }

/* les dessins, pièce par pièce */
.gg-config .gg-dessin-piece { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; border-top: 1px solid var(--gg-ligne); }
.gg-config .gg-dessin-piece h4 { margin: 0; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-noir); }
.gg-config .gg-dessin-piece .gg-designs { margin-top: 0; }
.gg-config .gg-dessin-piece .gg-designs-titre { display: none; }
.gg-config .gg-dessin-piece .gg-design-vue { width: 60px; height: 60px; }

/* l'atelier (lien du mail) n'a pas de panneau : la tenue prend la place */
.gg-config .gg-pack-corps:has(> .gg-pack-cote[hidden]) { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1100px) {
  .gg-config .gg-pack-corps { grid-template-columns: minmax(0, 1fr) 380px; }
  .gg-config .gg-pack-cote { order: 2; overflow: visible; max-height: none; }
  .gg-config .gg-pack-cote .gg-panneau { margin: 0; max-height: calc(100vh - 86px - 110px); }
  body:has(.gc-header--hidden) .gg-config .gg-pack-cote { max-height: none; }
  body:has(.gc-header--hidden) .gg-config .gg-pack-cote .gg-panneau { max-height: calc(100vh - 16px - 110px); }
  .gg-config .gg-panneau-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
}
@media (max-width: 1099px) {
  .gg-config .gg-pack-cote {
    position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0; z-index: 8500;
    margin: 0; padding: 0; background: none; box-shadow: none;
  }
  .gg-config .gg-pack-cote .gg-panneau {
    max-height: 56vh; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border: 0; border-top: 3px solid var(--gg-orange); border-radius: 20px 20px 0 0;
    background: #fff7f0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  }
  .gg-config .gg-panneau-tete { padding-bottom: 8px; margin-bottom: 10px; }
  .gg-config .gg-panneau-titre { margin-bottom: 8px; font-size: 16px; }
  .gg-config .gg-panneau-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .gg-config .gg-panneau-pied { margin-top: 8px; padding-top: 8px; }
  .gg-config .gg-panneau-total { display: block; }
  .gg-config .gg-pack-principal { padding-bottom: 58vh; }
  .gg-config .gg-etape-trois { display: none; }
  body:has(#ggPack:not([hidden])) .gg-config .gg-barre { display: none !important; }
  body:has(#ggPack:not([hidden])) .gc-whatsapp-btn { display: none !important; }
}


/* ══ 06/10/2026 — LE PANNEAU À GAUCHE, DANS LA CARTE DU PACK ══════════════════
   Izidine : « je le voulais à gauche, dans la case pack ». */
.gg-config .gg-pack-cote[hidden] { display: none !important; }
.gg-config .gg-pack-corps:has(> .gg-pack-cote[hidden]) { display: block; }
.gg-config .gg-tenue-corps { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.gg-config .gg-tenue-reglages .gg-reglages { margin: 0; }
@media (min-width: 1100px) {
  .gg-config .gg-tenue-reglages { position: sticky; top: 86px; transition: top .25s ease; }
  body:has(.gc-header--hidden) .gg-config .gg-tenue-reglages { top: 16px; }
  .gg-config .gg-tenue-reglages .gg-panneau { max-height: calc(100vh - 86px - 110px); }
  body:has(.gc-header--hidden) .gg-config .gg-tenue-reglages .gg-panneau { max-height: calc(100vh - 16px - 110px); }
  .gg-config .gg-tenue-corps .gg-tenue-pieces { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 1099px) {
  /* téléphone : le tiroir reste en bas de l'écran, où que soit le panneau */
  .gg-config .gg-tenue-corps { display: block; }
  .gg-config .gg-tenue-reglages .gg-panneau {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8500;
    max-height: 56vh; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border: 0; border-top: 3px solid var(--gg-orange); border-radius: 20px 20px 0 0;
    background: #fff7f0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  }
}

/* ══ 06/10/2026 — PLUS D'ESPACE VIDE DANS LA CARTE DU PACK ═══════════════════
   Izidine : « l'espace en bas me gêne, c'est pas une bonne UI ». Le panneau
   était plus haut que les deux vêtements posés côte à côte. Les vêtements
   passent l'un sous l'autre, en plus grand, et le panneau se resserre (plus
   de cadres dans le cadre) pour tenir sans barre de défilement. */
@media (min-width: 1100px) {
  .gg-config .gg-tenue-corps .gg-tenue-pieces { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gg-config .gg-tenue-corps .gg-tenue-piece .gg-vue { height: clamp(260px, 23vw, 350px); }
}
.gg-config .gg-panneau .gg-panneau-corps > .gg-reglage { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.gg-config .gg-panneau .gg-panneau-corps > .gg-reglage + .gg-reglage { padding-top: 14px; border-top: 1px solid #ffd2b0; }
.gg-config .gg-panneau .gg-nb-couleurs { padding: 3px; }
.gg-config .gg-panneau .gg-nb { padding: 7px 12px; font-size: 13px; }
.gg-config .gg-panneau .gg-presets { gap: 6px; }
.gg-config .gg-panneau .gg-preset { gap: 3px; padding: 6px 2px; }
.gg-config .gg-panneau .gg-preset .gg-picto-maillot { width: 36px; height: 36px; }
.gg-config .gg-panneau .gg-preset-nom { font-size: 10.5px; }
.gg-config .gg-panneau .gg-pastilles { gap: 8px; }
.gg-config .gg-panneau .gg-pastille-couleur { gap: 10px; padding: 4px 12px 4px 4px; }
.gg-config .gg-panneau .gg-pastille-couleur .gg-picto-maillot { width: 40px; height: 40px; }


/* ══ 06/10/2026 — SOUS « 4 PERSONNALISATION » : LA FLÈCHE ET SES 3 ÉTAPES ═══
   Izidine : « une flèche en bas qui pointe vers Couleurs, ensuite vers Nom et
   logo ». La flèche part du milieu de l'étape 4 ; les sous-étapes s'alignent
   à droite, sous elle. */
.gg-config .gg-parcours { position: relative; }
.gg-config .gg-parcours-detail { display: flex; flex-direction: column; align-items: flex-end; margin-top: 4px; }
.gg-config .gg-parcours-fleche {
  align-self: flex-end; width: calc((100% - 24px) / 4); text-align: center;
  font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--gg-orange);
}
.gg-config .gg-parcours-sous { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.gg-config .gg-parcours-sep { color: var(--gg-doux); font-weight: 800; }
.gg-config .gg-parcours-sous-bouton {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--gg-ligne); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--gg-doux); cursor: pointer;
}
.gg-config .gg-parcours-sous-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gg-gris); font-size: 12px; font-weight: 800;
}
.gg-config .gg-parcours-sous-bouton.gg-actif { background: var(--gg-orange); border-color: var(--gg-orange); color: #fff; box-shadow: 0 4px 12px rgba(255, 107, 0, .25); }
.gg-config .gg-parcours-sous-bouton.gg-actif .gg-parcours-sous-num { background: #fff; color: #d45500; }
.gg-config .gg-parcours-sous-bouton.gg-fait { color: var(--gg-noir); border-color: #ffd2b0; background: #fff7f0; }
.gg-config .gg-parcours-sous-bouton.gg-fait .gg-parcours-sous-num { background: #1f9d55; color: #fff; }
@media (hover: hover) { .gg-config .gg-parcours-sous-bouton:hover { border-color: var(--gg-orange); } }
.gg-config .gg-parcours-sous-bouton:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }
.gg-config .gg-panneau-rang { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #d45500; }
.gg-config .gg-panneau .gg-panneau-titre { margin-bottom: 0; }
@media (max-width: 749px) {
  .gg-config .gg-parcours-fleche { font-size: 18px; }
  .gg-config .gg-parcours-sous { justify-content: center; align-self: stretch; }
  .gg-config .gg-parcours-sous-bouton { font-size: 12px; padding: 4px 10px 4px 4px; }
  .gg-config .gg-parcours-sous-num { width: 20px; height: 20px; font-size: 11px; }
}

/* ══ 06/10/2026 — LES VÊTEMENTS CÔTE À CÔTE, LES CASES JUSQU'EN BAS ═════════
   Izidine : « trop bizarre de les superposer ». Côte à côte comme avant ; les
   cases grises s'allongent jusqu'en bas du panneau et les vêtements y
   grandissent : plus de vide blanc sous eux. */
@media (min-width: 1100px) {
  .gg-config .gg-tenue-corps { align-items: stretch; }
  .gg-config .gg-tenue-reglages { align-self: start; }
  .gg-config .gg-tenue-corps .gg-tenue-pieces {
    align-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px;
  }
  .gg-config .gg-tenue-corps .gg-tenue-piece { display: flex; flex-direction: column; }
  .gg-config .gg-tenue-corps .gg-tenue-piece .gg-vue { flex: 1 1 auto; height: auto; min-height: 240px; }
}


/* 06/10/2026 — à l'étape 4, la barre d'étapes sous le texte, au-dessus du pack */
.gg-config .gg-pack-principal > .gg-parcours { margin: 4px 0 20px; }


/* ══ 06/10/2026 — LA LONGUE FLÈCHE, DE « 4 PERSONNALISATION » À L'ÉTAPE EN COURS ══
   Izidine : « un truc stylé, dynamique, avec des flèches qui changent sur
   chaque étape », « remplacer cette petite flèche par la longue ». Elle se
   trace, puis sa pointe apparaît et bat doucement. (Classe « gg-guide » :
   « gg-fleche » est celle des boutons ronds du carrousel.) */
.gg-config .gg-pack-principal { position: relative; }
.gg-config .gg-guide { position: absolute; top: 0; left: 0; z-index: 6; overflow: visible; pointer-events: none; }
.gg-config .gg-guide path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gg-config .gg-guide-halo { stroke: #fff; stroke-width: 10; opacity: .92; }
.gg-config .gg-guide-trait { stroke: var(--gg-orange); stroke-width: 3.5; }
.gg-config .gg-guide-tete { stroke: var(--gg-orange); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; }
.gg-config .gg-guide.gg-anime .gg-guide-halo,
.gg-config .gg-guide.gg-anime .gg-guide-trait { animation: gg-guide-trace .9s cubic-bezier(.4, 0, .2, 1) forwards; }
.gg-config .gg-guide.gg-anime .gg-guide-tete { opacity: 0; animation: gg-guide-pointe .25s ease-out .8s forwards, gg-guide-bat 1.6s ease-in-out 1.1s infinite; }
@keyframes gg-guide-trace { to { stroke-dashoffset: 0; } }
@keyframes gg-guide-pointe { to { opacity: 1; } }
@keyframes gg-guide-bat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .gg-config .gg-guide.gg-anime .gg-guide-halo,
  .gg-config .gg-guide.gg-anime .gg-guide-trait { animation: none; stroke-dashoffset: 0 !important; }
  .gg-config .gg-guide.gg-anime .gg-guide-tete { animation: none; opacity: 1; }
}
@media (max-width: 1099px) { .gg-config .gg-guide { display: none; } }

/* les trois étapes, dans le panneau, à la place de « Étape .. sur .. » */
.gg-config .gg-panneau-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; }
.gg-config .gg-panneau-etapes .gg-parcours-sous-bouton { padding: 4px 10px 4px 4px; font-size: 12.5px; }
.gg-config .gg-panneau-etapes .gg-parcours-sous-num { width: 22px; height: 22px; font-size: 11px; }


/* 06/10/2026 — les trois étapes du panneau tiennent sur une ligne */
.gg-config .gg-panneau-etapes { gap: 3px; flex-wrap: nowrap; }
.gg-config .gg-panneau-etapes .gg-parcours-sous-bouton { gap: 5px; padding: 4px 9px 4px 4px; font-size: 12px; white-space: nowrap; }
.gg-config .gg-panneau-etapes .gg-parcours-sous-num { width: 19px; height: 19px; font-size: 10.5px; }
.gg-config .gg-panneau-etapes .gg-parcours-sep { font-size: 12px; }
@media (max-width: 380px) { .gg-config .gg-panneau-etapes { flex-wrap: wrap; } }

/* 06/10/2026 — étape « Dessins » : des ronds plus grands, pour bien voir chaque design */
.gg-config .gg-dessin-piece .gg-designs-ronds { gap: 12px; }
.gg-config .gg-dessin-piece .gg-design-vue { width: 84px; height: 84px; }
.gg-config .gg-dessin-piece .gg-design-num { width: 22px; height: 22px; font-size: 12px; }

/* 06/10/2026 — pied du panneau. Izidine : « pourquoi les boutons sont gros comme cela ».
   « Demander mon devis → » (majuscules espacées, marges du gros bouton) passait sur
   deux lignes, 69 px de haut, et « Retour » s'étirait à la même hauteur.
   Une seule ligne, 46 px, comme les autres boutons de la page. */
.gg-config .gg-panneau-boutons { align-items: center; }
.gg-config .gg-panneau-boutons .gg-panneau-retour,
.gg-config .gg-panneau-boutons .gg-panneau-suivant { min-height: 46px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.gg-config .gg-panneau-boutons .gg-panneau-retour { flex: none; padding-left: 10px; padding-right: 14px; font-size: 14px; }
.gg-config .gg-panneau-boutons .gg-panneau-suivant { min-width: 0; padding-left: 16px; padding-right: 16px; font-size: 13px; letter-spacing: .04em; }
@media (max-width: 359px) {
  .gg-config .gg-panneau-boutons .gg-panneau-suivant { padding-left: 12px; padding-right: 12px; font-size: 12px; letter-spacing: .02em; }
}

/* 06/10/2026 — Izidine : « recadre les shorts ». Les shorts ont trois vues (face,
   dos, côté) : leur rond se cale sur la face, mesurée au pixel (`cadrerLaFace`
   pose la classe et les trois réglages). Les autres pièces ne changent pas. */
.gg-config .gg-design-vue.gg-rond-face > svg,
.gg-config .gg-design-vue.gg-rond-face > img {
  left: 50%; top: 50%;
  width: var(--gg-face-l, 200%) !important;
  transform: translate(var(--gg-face-x, -25%), var(--gg-face-y, -50%));
}

/* 06/10/2026 — Izidine : « diminue les trois boutons du haut » (Changer de sport,
   Recommencer, Configurateur 3D) : 46 → 38 px de haut, texte 15 → 14 px. */
.gg-config .gg-entete-actions { gap: 8px; }
.gg-config .gg-entete-actions .gg-bouton-second { min-height: 38px; padding: 6px 14px; gap: 6px; font-size: 14px; }
.gg-config .gg-entete-actions .gg-ico { width: 17px; height: 17px; }
.gg-config .gg-entete-actions .gg-bouton-3d .gg-ico-sortie { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .gg-config .gg-entete-actions .gg-bouton-second { padding: 6px 10px; font-size: 13px; }
}

/* 06/10/2026 — Izidine : « le ou dans le choix de couleurs doit se démarquer ».
   Une pastille orange « OU » posée au milieu du trait entre les couleurs toutes
   prêtes et « Choisissez vos couleurs ». */
.gg-config .gg-panneau .gg-panneau-corps > .gg-reglage-couleurs { position: relative; padding-top: 24px; }
.gg-config .gg-reglage-ou {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 5px 16px; border-radius: 999px; background: var(--gg-orange); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
}

/* 06/10/2026 — Izidine : « diminue la taille de ça aussi » (la barre d'étapes
   Votre sport / Votre pack / Options / Personnalisation) : 54 → 40 px de haut,
   rond 36 → 28 px, texte 15 → 14 px. Téléphone : rond 28 → 22 px, cases plus basses. */
.gg-config .gg-parcours-liste { gap: 6px; }
.gg-config .gg-parcours-bouton { min-height: 40px; gap: 8px; padding: 5px 12px 5px 5px; font-size: 14px; }
.gg-config .gg-parcours-num { width: 28px; height: 28px; font-size: 13px; }
.gg-config .gg-parcours-bouton .gg-ico { width: 17px; height: 17px; }
.gg-config .gg-parcours-encours .gg-parcours-bouton { box-shadow: 0 4px 12px rgba(255, 107, 0, .22); }
@media (max-width: 749px) {
  .gg-config .gg-parcours-liste { gap: 4px; }
  .gg-config .gg-parcours-bouton { min-height: 0; gap: 3px; padding: 6px 2px; font-size: 11px; }
  .gg-config .gg-parcours-num { width: 22px; height: 22px; font-size: 12px; }
}

/* 07/10/2026 — Izidine : « pour le pack pétanque, un carré qui prend la colonne de
   droite et un ou qu'on voit bien au milieu ». La place au choix (polo OU maillot
   d'entraînement) : deux cases côte à côte sur toute une ligne, un « OU » orange
   posé au milieu, à cheval sur l'espace qui les sépare. */
.gg-config .gg-choix-pieces.gg-avec-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gg-config .gg-choix-au-choix {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.gg-config .gg-choix-ou {
  position: absolute; left: 50%; top: 42%; z-index: 2; transform: translate(-50%, -50%);
  padding: 5px 12px; border-radius: 999px; background: var(--gg-orange); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 0 3px #fff;
}

/* 07/10/2026 — plan 1 : Dessins › Couleurs › Nom et logo ; sous le titre de chaque
   étape, la suite annoncée (« Ensuite : vos couleurs… ») */
.gg-config .gg-panneau-ensuite { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--gg-doux); }
@media (max-width: 1099px) { .gg-config .gg-panneau-ensuite { font-size: 12px; } }

/* 07/10/2026 — le polo et la veste zip passent à 6 designs : les ronds vont à la ligne
   (3 par ligne dans le panneau « Dessins ») au lieu de déborder */
.gg-config .gg-designs-ronds { flex-wrap: wrap; }

/* 07/10/2026 (suite) — Izidine : « qu'on puisse faire le choix quand on choisit le
   pack pétanque ». Les deux cases se choisissent : la retenue cernée d'orange
   (« ✓ Choisi »), l'autre plus pâle (« Choisir ») ; un clic la prend à la place. */
.gg-config .gg-choix-option { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.gg-config .gg-choix-option .gg-vue { display: block; transition: opacity .15s; }
.gg-config .gg-choix-option:not(.gg-actif) .gg-vue { opacity: .5; }
.gg-config .gg-choix-option.gg-actif { background: #fff7f0; box-shadow: inset 0 0 0 2px var(--gg-orange); }
.gg-config .gg-choix-etat { font-size: 12px; font-weight: 800; line-height: 1.2; color: #d45500; }
.gg-config .gg-choix-option:not(.gg-actif) .gg-choix-etat { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
  .gg-config .gg-choix-option:not(.gg-actif):hover { box-shadow: inset 0 0 0 2px #ffd2b0; }
  .gg-config .gg-choix-option:not(.gg-actif):hover .gg-vue { opacity: .85; }
}
.gg-config .gg-choix-option:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }

/* … et à la personnalisation (étape 4) : la pièce retenue et l'autre, côte à côte
   sur toute une ligne, le même « OU » au milieu */
.gg-config .gg-tenue-au-choix {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: inherit;
}
.gg-config .gg-tenue-choisie { box-shadow: inset 0 0 0 2px var(--gg-orange); }
.gg-config .gg-tenue-etat {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--gg-orange); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.2;
}
.gg-config .gg-tenue-autre { width: 100%; border: 0; font-family: inherit; cursor: pointer; text-align: center; }
.gg-config .gg-tenue-autre .gg-vue { display: block; opacity: .5; transition: opacity .15s; }
.gg-config .gg-tenue-autre .gg-tete { display: flex; }
.gg-config .gg-tenue-autre-nom { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--gg-doux); }
.gg-config .gg-tenue-etat-autre { background: #fff; color: #d45500; box-shadow: inset 0 0 0 1.5px var(--gg-orange); }
@media (hover: hover) {
  .gg-config .gg-tenue-autre:hover { box-shadow: inset 0 0 0 2px #ffd2b0; }
  .gg-config .gg-tenue-autre:hover .gg-vue { opacity: .85; }
}
.gg-config .gg-tenue-autre:focus-visible { outline: 2px solid var(--gg-orange); outline-offset: 2px; }
@media (max-width: 749px) {
  .gg-config .gg-tenue-au-choix .gg-tenue-piece { padding: 10px; }
  .gg-config .gg-tenue-au-choix .gg-tenue-piece .gg-vue { height: 170px; }
}

/* ══ 07/10/2026 — TOUTE LA CARTE DU PACK SE CLIQUE ═══════════════════════════
   Izidine : « il faut qu'on puisse cliquer sur les packs ». */
.gg-config .gg-choix-carte.gg-carte-cliquable { cursor: pointer; }

/* ══ 07/10/2026 — LES OPTIONS AUSSI : TOUTE LA CARTE SE CLIQUE ═══════════════
   Izidine : « pareil sur ça, et après ajouté normalement c'est retiré ». Un clic
   sur la carte ajoute l'option, un second la retire ; une fois prise, le bouton
   dit « Retirer » et la carte reste cernée d'orange. */
.gg-config .gg-option { transition: border-color .15s, box-shadow .15s, transform .15s; }
.gg-config .gg-option.gg-carte-cliquable { cursor: pointer; }
@media (hover: hover) {
  .gg-config .gg-option.gg-carte-cliquable:hover { border-color: var(--gg-orange); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); transform: translateY(-2px); }
}
.gg-config .gg-option.gg-choisi { box-shadow: 0 0 0 3px rgba(255, 107, 0, .15); }
/* Izidine (07/10) : « retirer en rouge » */
.gg-config .gg-option-bouton.gg-option-retirer { background: #fff; color: #d3222a; border-color: #d3222a; }
@media (hover: hover) { .gg-config .gg-option-bouton.gg-option-retirer:hover { background: #d3222a; color: #fff; border-color: #d3222a; } }
.gg-config .gg-option-bouton.gg-option-retirer:focus-visible { outline: 2px solid #d3222a; outline-offset: 2px; }

/* LA MATIERE SOUS LE NOM DES PIECES DU PACK PETANQUE (08/10/2026)
   Izidine : « sur tous les noms tu mets polyester et sur polo tu mets
   polyester ou coton ». Petite ligne grise, sous le nom : etape 2 (cartes des
   packs), personnalisation, et carte du pack sur la page des prix. */
.gg-config .gg-choix-piece-matiere { margin-top: -3px; font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--gg-doux); }
.gg-config .gg-tenue-matiere { margin-top: -4px; font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: none; color: var(--gg-doux); }
.gg-config .gg-pack-produits .gg-tete .gg-matiere { margin: -3px 0 0; font-size: 11px; font-weight: 500; line-height: 1.2; color: var(--gg-doux); }