/* ==========================================================================
   Carrousel en scène, sur mobile seulement.
   Toute grille marquée data-caro devient, sous 760 px, une piste qui défile
   au doigt : la carte active au centre, ses deux voisines qui dépassent sur
   les bords, reculées et floutées (le script règle le recul selon la
   distance au centre), deux flèches vertes posées sur elles, des points
   dessous. Au-dessus de 760 px, la grille reste une grille.
   ========================================================================== */
.caro-cadre{position:relative}
.caro-cadre > .caro__f,.caro-cadre > .caro__n{display:none}

@media (max-width:760px){
  .caro-cadre{margin-inline:calc(var(--gout, 16px) * -1)}
  .caro-cadre > [data-caro]{
    display:flex!important;align-items:flex-start;gap:10px;margin:0!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    /* La carte mesure 49 % de l'écran (sa taille d'origine) ; la marge de chaque côté vaut la moitié du reste,
       pour que la première et la dernière carte arrivent elles aussi au centre, nettes. Avant, la largeur en %
       se calculait sur la piste sans ses marges : 191 px de carte pour 58 px de marge, et les deux cartes des
       bouts restaient décalées, floutées et réduites comme des voisines. */
    padding:8px calc((100% - 49vw) / 2) 12px;scroll-padding-inline:calc((100% - 49vw) / 2);
  }
  .caro-cadre > [data-caro]::-webkit-scrollbar{display:none}
  .caro-cadre > [data-caro] > *{
    flex:0 0 49vw;margin:0!important;scroll-snap-align:center;
    transition:transform .25s ease-out,filter .25s ease-out,opacity .25s ease-out;will-change:transform;
  }
  .caro-cadre > [data-caro] > .is-hors{display:none}

  .caro-cadre > .caro__f{
    display:grid;place-items:center;position:absolute;z-index:5;top:var(--caro-milieu, 40%);
    width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;transform:translateY(-50%);
    background:var(--bouton);color:var(--encre-vert);box-shadow:var(--lueur),var(--reflet);
    transition:opacity .2s;
  }
  .caro-cadre > .caro__f[disabled]{opacity:0;pointer-events:none}
  .caro-cadre > .caro__f svg{width:20px;height:20px}
  .caro-cadre > .caro__f--g{left:8px}
  .caro-cadre > .caro__f--d{right:8px}
  .caro-cadre > .caro__f:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .caro-cadre > .caro__n{display:flex;justify-content:center;gap:6px;margin-top:14px;position:relative;z-index:4}
  .caro__n i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.25);transition:width .3s,background .3s}
  .caro__n i.on{width:20px;background:var(--vert)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .caro-cadre > [data-caro] > *{transition:none}
}

/* ==========================================================================
   Défilement libre, sur mobile seulement : les cartes glissent au doigt,
   la suivante dépasse à droite, une bande en dessous montre où l'on est.
   Pas de flèches. Toute grille marquée data-defile.
   ========================================================================== */
.defile-bande{display:none}
@media (max-width:760px){
  [data-defile]{
    display:flex!important;gap:12px;padding-bottom:6px!important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gout, 16px) * -1);padding-inline:var(--gout, 16px);
    scroll-padding-inline:var(--gout, 16px);
  }
  [data-defile]::-webkit-scrollbar{display:none}
  [data-defile] > *{flex:0 0 82%;scroll-snap-align:start}
  .defile-bande{
    display:block!important;position:relative;z-index:4;height:5px;width:110px;margin:20px auto 0;border-radius:99px;
    background:rgba(128,255,0,.22);box-shadow:inset 0 0 0 1px rgba(128,255,0,.18);overflow:hidden;
  }
  .defile-bande i{
    position:absolute;top:0;left:0;height:100%;min-width:22px;border-radius:99px;
    background:#80FF00;box-shadow:0 0 12px rgba(128,255,0,.8);
  }
}

/* Variante data-caro-bas : pour les cartes longues (les fuites). Une carte
   pleine largeur, rien sur les côtés, flèches discrètes en bas avec les points. */
.caro-cadre .caro__bas{display:none}
@media (max-width:760px){
  .caro-cadre--bas > [data-caro]{padding:8px var(--gout, 16px) 4px;scroll-padding-inline:var(--gout, 16px);gap:12px}
  .caro-cadre--bas > [data-caro] > *{flex:0 0 100%}
  .caro-cadre .caro__bas{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
  .caro__bas .caro__f{
    display:grid;place-items:center;position:static;transform:none;
    width:32px;height:32px;border-radius:50%;cursor:pointer;padding:0;
    background:none;border:1px solid rgba(128,255,0,.45);color:var(--vert);box-shadow:none;
    transition:opacity .2s,border-color .2s,background .2s;
  }
  .caro__bas .caro__f:hover{background:rgba(128,255,0,.10);border-color:var(--vert)}
  .caro__bas .caro__f[disabled]{opacity:.25;pointer-events:none}
  .caro__bas .caro__f svg{width:16px;height:16px}
  .caro__bas .caro__n{display:flex;margin:0}
}
@media (max-width:760px){
  .caro__bas .caro__ligne{
    position:relative;display:block!important;flex:none;width:110px;height:5px;border-radius:99px;overflow:hidden;
    background:rgba(128,255,0,.22);box-shadow:inset 0 0 0 1px rgba(128,255,0,.18);
  }
  .caro__bas .caro__ligne i{
    position:absolute;top:0;left:0;height:100%;min-width:22px;border-radius:99px;
    background:#80FF00;box-shadow:0 0 12px rgba(128,255,0,.8);transition:left .15s linear;
  }
}


/* ==========================================================================
   data-ligne : un conteneur qui garde sa mise en page mais défile de côté
   sur mobile, avec la même bande verte dessous (voir le mur des blocs et
   les pastilles de mécaniques de la fiche produit).
   ========================================================================== */
@media (max-width:760px){
  [data-ligne]{
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gout, 16px) * -1)!important;padding-inline:var(--gout, 16px)!important;
  }
  [data-ligne]::-webkit-scrollbar{display:none}
}