/* Gamification Gigi — composant partagé entre l'espace membre et l'aperçu admin. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.famille-lagree { --gamif-famille: #B95C3C; --gamif-famille-clair: #F4DDD5; }
.famille-reformer { --gamif-famille: #B7832E; --gamif-famille-clair: #F6E8C9; }
.famille-hiit { --gamif-famille: #7D6422; --gamif-famille-clair: #EEE5C7; }
.famille-autre { --gamif-famille: #71645E; --gamif-famille-clair: #EAE4E1; }

.badge-gamif {
  --gamif-famille: #B95C3C; --gamif-famille-clair: #F4DDD5;
  --metal-1: #E7A889; --metal-2: #C87855;
  min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: .65rem; padding: .9rem .65rem .8rem; text-align: center;
  background: #fff; border: 1px solid #ead9d1;
  border-color: color-mix(in srgb, var(--gamif-famille) 22%, #ead9d1);
  border-radius: 18px; box-shadow: 0 8px 22px rgba(43, 36, 34, .07);
  position: relative; overflow: hidden; opacity: 1; filter: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge-gamif::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--gamif-famille);
}
.badge-gamif.niveau-2 { --metal-1: #D88C65; --metal-2: #A95539; }
.badge-gamif.niveau-3 { --metal-1: #E8C56B; --metal-2: #B7832E; }
.badge-gamif.niveau-4 { --metal-1: #5A4B46; --metal-2: #241F1D; }
.badge-gamif:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43, 36, 34, .12); }

.badge-medaille {
  width: 5.6rem; aspect-ratio: 1; flex: none; position: relative;
  display: grid; place-items: center; border-radius: 50%; padding: 6px;
  color: #fff;
  background: conic-gradient(var(--gamif-famille) var(--progression, 0%), #E9E2DE 0);
  box-shadow: 0 5px 12px rgba(43, 36, 34, .15);
}
.badge-medaille::before {
  content: ""; position: absolute; inset: 6px; border-radius: inherit;
  background: linear-gradient(145deg, var(--metal-1), var(--metal-2));
  border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2px rgba(43, 36, 34, .08);
}
.badge-medaille::after {
  content: ""; position: absolute; inset: 12px; border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, .5);
}
.badge-icone {
  position: absolute; z-index: 1; width: 2rem; height: 2rem; top: .95rem;
  opacity: .92; filter: drop-shadow(0 1px 1px rgba(43, 36, 34, .18));
}
.badge-seuil {
  position: absolute; z-index: 2; bottom: .85rem; font-size: 1.1rem;
  line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(43, 36, 34, .3);
}
.badge-cadenas {
  position: absolute; z-index: 3; right: -.05rem; bottom: .1rem;
  width: 1.55rem; height: 1.55rem; padding: .3rem; border-radius: 50%;
  color: #514742; background: #fff; box-shadow: 0 2px 7px rgba(43, 36, 34, .2);
}
.badge-gamif.verrouille .badge-medaille { color: #7D716B; box-shadow: none; }
.badge-gamif.verrouille { opacity: 1; filter: none; }
.badge-gamif.verrouille .badge-medaille::before {
  background: linear-gradient(145deg, #EFEAE7, #CFC6C1); border-color: rgba(255, 255, 255, .7);
}
.badge-gamif.verrouille .badge-medaille::after { border-color: rgba(81, 71, 66, .22); }
.badge-libelles { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; }
.badge-libelles > strong { font-size: .88rem; color: var(--encre, #2B2422); }
.badge-libelles small { min-height: 1.1rem; color: #7A6C66; font-size: .7rem; line-height: 1.25; }
.badge-points {
  display: inline-flex; margin-top: .2rem; padding: .16rem .48rem;
  border-radius: 99px; color: color-mix(in srgb, var(--gamif-famille) 78%, #2B2422);
  background: var(--gamif-famille-clair); font-size: .67rem; font-weight: 700;
}

/* Espace membre --------------------------------------------------------- */
.page-suivi { display: grid; gap: 1.5rem; }
.page-suivi h2 { margin: 0; text-transform: none; letter-spacing: -.01em; color: inherit; font-size: 1.1rem; }
.gamif-rang {
  display: flex; align-items: center; gap: 1.05rem; position: relative; overflow: hidden;
  padding: 1.25rem; color: #fff; border-radius: 22px;
  background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 35%),
              linear-gradient(135deg, #2B2422, #57423A);
  box-shadow: 0 14px 32px rgba(43, 36, 34, .18);
}
.gamif-rang::after {
  content: "G"; position: absolute; right: -.3rem; bottom: -2.5rem;
  font: 700 9rem/1 Georgia, serif; color: rgba(255,255,255,.045); pointer-events: none;
}
.rang-embleme {
  width: 5rem; height: 5rem; flex: none; display: grid; place-items: center;
  color: #F1C579; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.035);
}
.rang-embleme svg { width: 2.8rem; height: 2.8rem; }
.rang-contenu { flex: 1; min-width: 0; position: relative; z-index: 1; }
.rang-contenu > small:first-child { text-transform: uppercase; letter-spacing: .1em; opacity: .72; font-size: .65rem; }
.rang-contenu h2 { margin: .12rem 0; color: #fff; font-size: 1.55rem; }
.rang-contenu p { margin: 0 0 .55rem; }
.rang-contenu p strong { font-size: 1.2rem; }
.rang-contenu > small:last-child { opacity: .8; font-size: .72rem; }
.page-suivi .barre-rang { height: .55rem; overflow: hidden; border: 0; border-radius: 99px; background: rgba(255,255,255,.16); margin-bottom: .35rem; }
.page-suivi .barre-rang span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E6A15F, #F1C579); transition: width .35s ease; }
.titre-section-suivi { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .7rem; }
.titre-section-suivi > div > small { color: #8A7F7A; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.titre-section-suivi > span { color: #8A4A38; background: #F4DDD5; border-radius: 99px; padding: .25rem .6rem; font-size: .75rem; font-weight: 700; }
.objectifs-gamif { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.objectif-gamif {
  --gamif-famille: #B95C3C; display: flex; align-items: center; gap: .8rem;
  padding: .85rem; background: #fff; border: 1px solid #EAD9D1; border-radius: 16px;
  box-shadow: 0 5px 14px rgba(43,36,34,.055);
}
.objectif-gamif > div { flex: 1; min-width: 0; }
.objectif-gamif small { display: block; color: #7A6C66; font-size: .7rem; }
.objectif-gamif strong { display: block; margin: .08rem 0 .45rem; font-size: .88rem; }
.objectif-picto {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; flex: none;
  border-radius: 13px; color: var(--gamif-famille); background: var(--gamif-famille-clair, #F4DDD5);
  font-size: 1.2rem;
}
.objectif-cadeau { --gamif-famille: #8A6B22; --gamif-famille-clair: #F6EBCF; }
.mini-progression { height: .32rem; margin-bottom: .3rem; border-radius: 99px; background: #EEE7E3; overflow: hidden; }
.mini-progression span { display: block; height: 100%; border-radius: inherit; background: var(--gamif-famille); }
.compteurs-suivi { margin: 0; }
.recap-suivi { margin: 0 !important; }
.collection-gamif, .cadeaux-gamif { min-width: 0; }
.serie-badges {
  --gamif-famille: #71645E; --gamif-famille-clair: #EAE4E1;
  margin: 0 0 .9rem; padding: .9rem; background: rgba(255,255,255,.55);
  border: 1px solid #EAD9D1; border-radius: 18px;
}
.serie-badges > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .8rem; }
.serie-badges > header > div { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.serie-badges h3 { margin: 0; font-size: .95rem; }
.serie-badges > header small { color: #7A6C66; font-size: .7rem; text-align: right; }
.pastille-famille { width: .65rem; height: .65rem; flex: none; border-radius: 50%; background: var(--gamif-famille); box-shadow: 0 0 0 4px var(--gamif-famille-clair); }
.grille-badges {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.6rem, 42%);
  grid-template-columns: none; gap: .65rem; overflow-x: auto; padding: .1rem .05rem .55rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.grille-badges .badge-gamif { scroll-snap-align: start; }
.palier-cadeau {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  margin-bottom: .55rem; padding: .8rem; background: #fff; border: 1px solid #EAD9D1;
  border-radius: 15px; opacity: 1;
}
.palier-cadeau:not(.atteint) { opacity: 1; background: rgba(255,255,255,.58); }
.cadeau-icone { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: #F6EBCF; color: #8A6B22; }
.palier-cadeau .infos strong, .palier-cadeau .infos small { display: block; }
.palier-cadeau .infos strong { font-size: .86rem; }
.palier-cadeau .infos small { color: #7A6C66; font-size: .7rem; margin-top: .12rem; }
.statut-cadeau { display: inline-flex; padding: .25rem .5rem; border-radius: 99px; font-size: .67rem; font-weight: 700; text-align: center; }
.statut-cadeau.disponible { color: #8A4A38; background: #F9E4D8; }
.statut-cadeau.recupere { color: #326447; background: #E4F1E8; }
.statut-cadeau.verrouille { color: #71645E; background: #EEE8E5; }

@media (min-width: 560px) {
  .objectifs-gamif { grid-template-columns: 1fr 1fr; }
  .grille-badges { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr)); overflow: visible; padding-bottom: .1rem; }
}
@media (max-width: 430px) {
  .gamif-rang { align-items: flex-start; padding: 1rem; }
  .rang-embleme { width: 3.8rem; height: 3.8rem; }
  .rang-embleme svg { width: 2.1rem; height: 2.1rem; }
  .palier-cadeau { grid-template-columns: auto 1fr; }
  .palier-cadeau .etat-palier { grid-column: 2; }
}

/* Configurateur admin --------------------------------------------------- */
.page-gamification-admin { padding-bottom: 5rem; }
.sur-titre { display: block; margin-bottom: .2rem; color: #8A4A38; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.entete-gamification { align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.entete-gamification h1 { margin: 0; }
.entete-gamification p { margin: .2rem 0 0; }
.statut-module { display: inline-flex; align-items: center; gap: .42rem; padding: .38rem .7rem; border-radius: 99px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.statut-module > span { width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; }
.statut-module.actif { color: #326447; background: #E4F1E8; }
.statut-module.inactif { color: #71645E; background: #EEE8E5; }
.alerte-config { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; padding: .7rem .85rem; border: 1px solid; border-radius: 10px; }
.alerte-config strong { font-size: .84rem; }
.alerte-config span { font-size: .8rem; }
.alerte-config.succes { color: #326447; background: #E8F3EC; border-color: #BCD9C8; }
.form-gamification { max-width: none; }
.activation-gamif {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid #EAD9D1;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(43,36,34,.05);
}
.activation-gamif strong, .activation-gamif small { display: block; }
.activation-gamif small { margin-top: .15rem; color: #7A6C66; }
.interrupteur-gamif { position: relative; flex: none; cursor: pointer; }
.interrupteur-gamif input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur-gamif > span:not(.sr-only) { display: block; width: 3.2rem; height: 1.8rem; border-radius: 99px; background: #CFC6C1; transition: background .15s; }
.interrupteur-gamif > span:not(.sr-only)::after { content: ""; display: block; width: 1.4rem; height: 1.4rem; margin: .2rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(43,36,34,.25); transition: transform .15s; }
.interrupteur-gamif input:checked + span { background: #B95C3C; }
.interrupteur-gamif input:checked + span::after { transform: translateX(1.4rem); }
.interrupteur-gamif input:focus-visible + span { outline: 2px solid #B95C3C; outline-offset: 3px; }
.configurateur-gamif { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.sections-config-gamif { display: grid; gap: 1rem; min-width: 0; }
.section-config-gamif { padding: 1rem; background: #fff; border: 1px solid #EAD9D1; border-radius: 12px; box-shadow: 0 5px 16px rgba(43,36,34,.055); }
.section-config-gamif > header { display: flex; gap: .7rem; margin-bottom: .9rem; }
.section-config-gamif h2 { margin: 0; font-size: 1rem; }
.section-config-gamif header p { margin: .15rem 0 0; color: #7A6C66; font-size: .78rem; }
.numero-config { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: none; border-radius: 50%; color: #8A4A38; background: #EBD3CC; font-size: .76rem; font-weight: 700; }
.lignes-config { display: grid; gap: .55rem; }
.ligne-config { display: grid; grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr) auto; gap: .55rem; align-items: end; padding: .65rem; background: #FBF7F3; border: 1px solid #EAD9D1; border-radius: 10px; }
.ligne-palier { grid-template-columns: auto minmax(95px, .55fr) minmax(150px, 1.4fr) minmax(135px, .8fr) auto; }
.ligne-config label { display: grid; gap: .25rem; color: #6E5F58; font-size: .7rem; font-weight: 700; }
.ligne-config input, .ligne-config select, .filtres-bons input, .filtres-bons select { width: 100%; min-width: 0; padding: .48rem .55rem; color: #2B2422; background: #fff; border: 1.5px solid #E2D3CC; border-radius: 8px; font: inherit; font-size: .84rem; }
.ligne-config input:focus, .ligne-config select:focus, .filtres-bons input:focus, .filtres-bons select:focus { border-color: #B95C3C; outline: 2px solid rgba(185,92,60,.13); }
.poignee-config { align-self: center; color: #B8AAA3; letter-spacing: -3px; cursor: default; }
.actions-ligne-config { display: flex; align-items: center; gap: .2rem; padding-bottom: .05rem; }
button.bouton-icone { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; color: #6E5F58; background: #fff; border: 1px solid #E2D3CC; border-radius: 7px; }
button.bouton-icone:hover { color: #8A4A38; background: #F4E4DE; }
button.bouton-icone.retirer:hover { color: #A73D32; background: #FBE7E4; }
button.bouton-icone:disabled { opacity: .32; cursor: default; }
button.ajouter-ligne { display: inline-flex; align-items: center; gap: .35rem; margin-top: .65rem; padding: .4rem .6rem; color: #8A4A38; background: none; border: 1.5px dashed #DABDB1; }
button.ajouter-ligne:hover { background: #F8ECE8; }
button.ajouter-ligne span { font-size: 1.05rem; }
.apercu-gamif { position: sticky; top: 4.5rem; display: grid; gap: .8rem; padding: 1rem; background: #fff; border: 1px solid #EAD9D1; border-radius: 14px; box-shadow: 0 8px 24px rgba(43,36,34,.08); }
.apercu-entete { display: flex; justify-content: space-between; align-items: start; }
.apercu-entete small { color: #8A4A38; text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; font-weight: 700; }
.apercu-entete h2 { margin: .1rem 0 0; font-size: .98rem; }
.pastille-direct { padding: .2rem .45rem; color: #326447; background: #E4F1E8; border-radius: 99px; font-size: .62rem; font-weight: 700; }
.apercu-carte-rang { padding: .8rem; color: #fff; background: linear-gradient(135deg, #2B2422, #57423A); border-radius: 13px; }
.apercu-carte-rang small, .apercu-carte-rang strong, .apercu-carte-rang span { display: block; }
.apercu-carte-rang small { opacity: .72; font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.apercu-carte-rang strong { margin: .15rem 0; font-size: 1.15rem; }
.apercu-carte-rang > span { opacity: .72; font-size: .68rem; }
.apercu-barre { height: .35rem; margin-top: .55rem; background: rgba(255,255,255,.16); border-radius: 99px; overflow: hidden; }
.apercu-barre i { display: block; width: 42%; height: 100%; background: #F1C579; }
.apercu-badge { display: flex; justify-content: center; padding: .3rem 1.6rem; }
.apercu-badge .badge-gamif { width: 9.5rem; }
.apercu-prochain-cadeau { display: flex; align-items: center; gap: .55rem; padding: .65rem; background: #FBF7F3; border-radius: 10px; }
.apercu-prochain-cadeau > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: #F6EBCF; border-radius: 9px; }
.apercu-prochain-cadeau small, .apercu-prochain-cadeau strong { display: block; }
.apercu-prochain-cadeau small { color: #7A6C66; font-size: .62rem; }
.apercu-prochain-cadeau strong { font-size: .75rem; }
.note-retroactive { margin: 0; padding: .65rem; color: #735514; background: #FFF5DD; border-radius: 9px; font-size: .7rem; line-height: 1.4; }
.note-retroactive strong { display: block; }
.impact-gamif { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding-top: .7rem; border-top: 1px solid #EAD9D1; }
.impact-gamif h3 { grid-column: 1 / -1; margin: 0 0 .2rem; font-size: .78rem; }
.impact-gamif div { padding: .5rem; background: #FBF7F3; border-radius: 8px; }
.impact-gamif strong, .impact-gamif small { display: block; }
.impact-gamif strong { font-size: 1rem; color: #8A4A38; }
.impact-gamif small { color: #7A6C66; font-size: .6rem; line-height: 1.25; }
.actions-config-gamif { position: sticky; bottom: .6rem; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding: .65rem .8rem; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border: 1px solid #EAD9D1; border-radius: 12px; box-shadow: 0 8px 25px rgba(43,36,34,.13); }
.actions-config-gamif > span { color: #7A6C66; font-size: .75rem; }
.actions-config-gamif > span.modifie { color: #8A4A38; font-weight: 700; }
.actions-config-gamif > div { display: flex; gap: .45rem; }
.actions-config-gamif button { min-height: 40px; }

.gestion-bons { margin-top: 2.2rem; }
.entete-bons { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.entete-bons h2 { margin: 0; }
.compteurs-bons { display: flex; gap: .4rem; }
.compteurs-bons span { padding: .35rem .55rem; color: #6E5F58; background: #fff; border: 1px solid #EAD9D1; border-radius: 9px; font-size: .7rem; }
.compteurs-bons strong { color: #8A4A38; }
.filtres-bons { display: grid; grid-template-columns: minmax(180px, 1fr) 180px auto; gap: .45rem; margin: .8rem 0; max-width: 620px; }
.filtres-bons button { min-height: 38px; }
.liste-bons-gamif { display: grid; gap: .55rem; }
.carte-bon-gamif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem .85rem; background: #fff; border: 1px solid #EAD9D1; border-left: 4px solid #D99A3C; border-radius: 11px; box-shadow: 0 3px 11px rgba(43,36,34,.045); }
.carte-bon-gamif.recupere { border-left-color: #8DB59C; opacity: .82; }
.icone-bon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; color: #8A6B22; background: #F6EBCF; }
.infos-bon { min-width: 0; }
.infos-bon strong, .infos-bon small { display: block; }
.infos-bon strong { margin: .08rem 0; font-size: .86rem; }
.infos-bon small { color: #7A6C66; font-size: .7rem; }
button.nom-membre-bon { display: block; max-width: 100%; padding: 0; overflow: hidden; color: #8A4A38; background: none; border: 0; font-size: .72rem; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
button.nom-membre-bon:hover { color: #B95C3C; background: none; text-decoration: underline; }
.etat-bon { text-align: right; }
.etat-bon small { display: block; margin-top: .25rem; color: #7A6C66; font-size: .65rem; }
.etiquette-bon { display: inline-flex; padding: .22rem .48rem; border-radius: 99px; font-size: .65rem; font-weight: 700; }
.etiquette-bon.a-remettre { color: #8A5B16; background: #FFF0D1; }
.etiquette-bon.recupere { color: #326447; background: #E4F1E8; }
button.ouvrir-fiche-bon { display: block; margin: .28rem 0 0 auto; padding: .25rem .5rem; color: #8A4A38; background: none; border: 1px solid #DABDB1; font-size: .68rem; }
button.ouvrir-fiche-bon:hover { background: #F8ECE8; }
.vide-bons { display: grid; justify-items: center; padding: 2rem; color: #7A6C66; background: #fff; border: 1.5px dashed #DABDB1; border-radius: 12px; text-align: center; }
.vide-bons > span { font-size: 1.7rem; }
.vide-bons strong { margin-top: .3rem; color: #2B2422; }
.vide-bons p { margin: .2rem 0 0; font-size: .8rem; }

@media (max-width: 1050px) {
  .configurateur-gamif { grid-template-columns: 1fr; }
  .apercu-gamif { position: static; grid-template-columns: repeat(3, 1fr); align-items: center; }
  .apercu-entete, .note-retroactive, .impact-gamif { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ligne-config, .ligne-palier { grid-template-columns: auto 1fr 1fr; }
  .ligne-palier .champ-cadeau { grid-column: 2 / -1; grid-row: 2; }
  .ligne-palier .actions-ligne-config { grid-column: 3; grid-row: 3; justify-self: end; }
  .apercu-gamif { grid-template-columns: 1fr; }
  .apercu-entete, .note-retroactive, .impact-gamif { grid-column: auto; }
}
@media (max-width: 620px) {
  .entete-gamification, .entete-bons, .actions-config-gamif { align-items: stretch; flex-direction: column; }
  .statut-module { align-self: flex-start; }
  .activation-gamif { align-items: flex-start; }
  .ligne-config, .ligne-palier { grid-template-columns: 1fr 1fr; }
  .poignee-config { display: none; }
  .ligne-config .actions-ligne-config, .ligne-palier .actions-ligne-config { grid-column: 1 / -1; grid-row: auto; justify-self: end; }
  .ligne-palier .champ-cadeau { grid-column: 1 / -1; grid-row: auto; }
  .actions-config-gamif > div, .actions-config-gamif button { width: 100%; }
  .actions-config-gamif > div { flex-direction: column-reverse; }
  .filtres-bons { grid-template-columns: 1fr; max-width: none; }
  .carte-bon-gamif { grid-template-columns: auto 1fr; }
  .etat-bon { grid-column: 2; text-align: left; }
  button.ouvrir-fiche-bon { margin-left: 0; }
  .compteurs-bons { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .badge-gamif, .interrupteur-gamif > span, .interrupteur-gamif > span::after { transition: none; }
}