/* ══════════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGES — carrousel, infobulle
   ──────────────────────────────────────────────────────────────────
   Les teintes viennent de la charte du site, jamais d'une valeur
   ecrite ici : ces composants doivent suivre la page qui les accueille
   et non imposer la leur.
   ══════════════════════════════════════════════════════════════════ */

/* ─── CARROUSEL ─────────────────────────────────────────────────── */
.mdgc{
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 10px; border-radius:9999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.mdgc-fleche{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--accent, #E4FA5A); color:var(--dark, #0e0e0e);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1), opacity .2s, background .2s;
}
.mdgc-fleche svg{ width:19px; height:19px; display:block }
.mdgc-fleche:hover{ background:var(--accent-press, #CDE24C) }
.mdgc-fleche:active{ transform:scale(.9) }
/* Desactive pour de vrai : le curseur et l'opacite disent la meme
   chose que l'attribut, il n'y a pas d'ecart entre les deux. */
.mdgc-fleche:disabled{ opacity:.32; cursor:default; background:rgba(255,255,255,.22) }
.mdgc-fleche:disabled:active{ transform:none }
.mdgc-fleche:focus-visible{ outline:2px solid var(--accent, #E4FA5A); outline-offset:3px }

.mdgc-piste{ display:flex; align-items:center; gap:7px; padding:0 8px }

/* Le bouton n'est QUE la zone tactile : il ne se voit pas. Le site
   impose 44 px minimum sur pointeur grossier — c'est la taille d'un
   doigt, et c'est juste — mais un repere de position n'a pas a mesurer
   44 px pour autant. D'ou la separation : le bouton prend la place
   qu'il faut au doigt, la marque garde la taille qu'il faut a l'oeil. */
.mdgc-pastille{
  display:flex; align-items:center; justify-content:center;
  width:9px; height:9px; padding:0;
  border:0; background:none; cursor:pointer;
}
.mdgc-marque{
  display:block; position:relative; overflow:hidden;
  width:9px; height:9px; border-radius:9999px;
  background:rgba(255,255,255,.26);
  transition:width .32s cubic-bezier(.34,1.2,.64,1), background .25s;
}
.mdgc-pastille:hover .mdgc-marque{ background:rgba(255,255,255,.45) }
.mdgc-pastille.est-active .mdgc-marque{ width:34px }
.mdgc-pastille:focus-visible{ outline:none }
.mdgc-pastille:focus-visible .mdgc-marque{
  outline:2px solid var(--accent, #E4FA5A); outline-offset:3px;
}

/* Les zones tactiles se touchent deja : l'ecart entre les marques vient
   d'elles, pas d'un espacement supplementaire. */
@media (pointer: coarse){ .mdgc-piste{ gap:0; padding:0 2px } }

.mdgc-barre{
  position:absolute; inset:0;
  transform:scaleX(0); transform-origin:left center;
  border-radius:9999px; background:var(--accent, #E4FA5A);
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .mdgc-fleche, .mdgc-marque{ transition:none }
  .mdgc-barre{ display:none }
}

/* ─── INFOBULLE ─────────────────────────────────────────────────── */
.mdgi{
  position:absolute; left:0;
  pointer-events:none; opacity:0;
  transition:opacity .18s ease;
  z-index:5;
}
.mdgi--haut{ bottom:calc(100% + 10px) }
.mdgi--bas { top:calc(100% + 10px) }
.mdgi.est-ouverte{ opacity:1 }

.mdgi-bande{
  display:inline-flex; align-items:stretch;
  height:30px; white-space:nowrap;
  background:var(--dark, #0e0e0e);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  /* Rogne a rien tant qu'aucune commande n'est designee. */
  clip-path:inset(0 100% 0 0 round 7px);
}
/* Le glissement d'une commande a l'autre n'est anime QUE lorsque
   l'infobulle est deja ouverte : la premiere apparition doit surgir a
   sa place, pas venir de la precedente. */
.mdgi.est-glissante .mdgi-bande{
  transition:clip-path .34s cubic-bezier(.34,1.1,.64,1),
             transform  .34s cubic-bezier(.34,1.1,.64,1);
}

/* La bande de mesure sert a lire des largeurs, jamais a etre vue.
   Elle reste dans le flux pour avoir une mise en page reelle. */
.mdgi-bande--mesure{
  position:absolute; top:0; left:0;
  visibility:hidden; pointer-events:none;
  clip-path:none; transition:none;
}

.mdgi-item{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 10px;
  font-family:var(--font-display, 'Space Grotesk', sans-serif);
  font-size:.72rem; font-weight:600; letter-spacing:.01em;
  color:var(--light, #f0ede8);
}
.mdgi-touche{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; padding:1px 4px;
  font-family:inherit; font-size:.6rem; line-height:1.3;
  color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.2); border-radius:4px;
}

@media (prefers-reduced-motion:reduce) and (min-width:999999px){ /* DESACTIVE */
  .mdgi.est-glissante .mdgi-bande{ transition:none }
}