/**
 * Carrousel de catégories — L'Esprit du Combattant.
 *
 * Deux principes gouvernent cette feuille :
 *
 *  1. Le contenu est cadré comme le reste du site : largeur plafonnée,
 *     centrée, avec une gouttière de 16 px de chaque côté. C'est la règle
 *     .page-width du thème, reprise telle quelle.
 *
 *  2. Le nombre de cartes suit la largeur du CONTENEUR du carrousel, pas celle
 *     de la fenêtre (@container, et non @media). Un carrousel posé dans une
 *     colonne étroite d'un écran large s'adapte donc correctement, ce que des
 *     media queries ne savent pas faire.
 *
 * Tout est préfixé « edc- » et porté par des variables posées sur le
 * conteneur : le plugin ne dépend d'aucun thème et n'écrase aucune de ses
 * règles.
 */

.edc-carousel,
.edc-carousel *,
.edc-carousel *::before,
.edc-carousel *::after {
  /* Les largeurs de carte sont calculées bordures comprises. */
  box-sizing: border-box;
}

.edc-carousel {
  --edc-gold: #d8a83e;
  --edc-gold-light: #f0c55a;
  --edc-gold-dark: #9b762b;
  --edc-text: #f5f5f2;
  --edc-muted: #9a9a93;
  --edc-card-bg: #121417;
  --edc-page-bg: #0b0b0b;
  --edc-gap: 12px;
  --edc-peek: 56px;
  --edc-card-h: 268px;
  --edc-card-min: 128px;

  font-family: var(--edc-font-card, inherit);
  color: var(--edc-text);
}

/* ---------- zone renforcee, ne pas retirer ----------
   Sans cette remise a zero, le style « button » du theme traverse et repeint
   les commandes du composant : la croix de fermeture devient bleue, les
   pastilles prennent un fond clair. Elle pese une classe et un element, donc
   moins que les regles du composant, qui en portent deux. */
.edc-carousel button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
}

.edc-carousel table {
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
  margin: 0;
}

.edc-carousel ul,
.edc-carousel ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ---------- Cadrage ----------
   .page-width du thème : width: min(1180px, calc(100% - 32px)); margin-inline: auto
   C'est aussi le conteneur de requête : les cartes doivent réagir à la largeur
   qui les borne réellement, et non à celle de la section qui, elle, est pleine. */

.edc-carousel .edc-carousel__inner{
  container-type: inline-size;
  width: min(var(--edc-max, 1180px), calc(100% - 32px));
  margin-inline: auto;
}

.edc-carousel.edc-carousel--full .edc-carousel__inner{
  width: 100%;
}

/* ---------- Titre ---------- */

.edc-carousel .edc-carousel__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.edc-carousel .edc-carousel__title{
  font-family: var(--edc-font-title, inherit);
  font-size: clamp(24px, 3cqw, 34px);
  line-height: 1.12;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--edc-text);
}

.edc-carousel .edc-carousel__title--flags::before,
.edc-carousel .edc-carousel__title--flags::after{
  content: '\1F1F9\1F1ED';
  font-family: Arial, sans-serif;
  font-size: .55em;
  margin: 0 12px;
  vertical-align: middle;
}

.edc-carousel .edc-carousel__all{
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--edc-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.edc-carousel .edc-carousel__all:hover,
.edc-carousel .edc-carousel__all:focus-visible{
  border-bottom-color: var(--edc-gold);
  color: var(--edc-gold);
}

/* ---------- Rail ---------- */

.edc-carousel .edc-carousel__viewport{
  position: relative;
  /* « --edc-per » n'est jamais posé en ligne : les container queries
     ci-dessous doivent pouvoir le remplacer, ce qu'un style en ligne
     empêcherait. */
  --edc-per: var(--edc-per-desktop, 6);
}

.edc-carousel .edc-carousel__track{
  display: flex;
  gap: var(--edc-gap);
  overflow-x: auto;
  /* « proximity » plutôt que « mandatory » : l'accrochage obligatoire peut
     interrompre le défilement déclenché par les flèches. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  cursor: grab;
}

.edc-carousel .edc-carousel__track::-webkit-scrollbar{ display: none; }

.edc-carousel .edc-carousel__track.is-dragging{
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Le rail reçoit le focus pour permettre le défilement au clavier. */
.edc-carousel .edc-carousel__track:focus-visible{
  outline: 2px solid var(--edc-gold);
  outline-offset: 4px;
}

/* n cartes + (n-1) gouttières + le dépassement remplissent la largeur.
   Le dépassement est ce qui fait lire la rangée comme un carrousel : sans lui,
   une rangée qui tient pile dans le cadre ressemble à une barre de liens. */
.edc-carousel .edc-carousel__track > .edc-card{
  flex: 0 0 auto;
  width: calc((100% - (var(--edc-per) - 1) * var(--edc-gap) - var(--edc-peek)) / var(--edc-per));
  min-width: var(--edc-card-min);
  scroll-snap-align: start;
}

/* ---------- Dégradés de bord ----------
   Ils indiquent qu'il reste du contenu, et s'effacent au bout du rail. */

.edc-carousel .edc-carousel__viewport::before,
.edc-carousel .edc-carousel__viewport::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s;
}

.edc-carousel .edc-carousel__viewport::before{
  left: 0;
  background: linear-gradient(to right, var(--edc-page-bg), transparent);
}

.edc-carousel .edc-carousel__viewport::after{
  right: 0;
  background: linear-gradient(to left, var(--edc-page-bg), transparent);
}

.edc-carousel .edc-carousel__viewport[data-edc-start="true"]::before,
.edc-carousel .edc-carousel__viewport[data-edc-end="true"]::after,
.edc-carousel.edc-carousel--no-fades .edc-carousel__viewport::before,
.edc-carousel.edc-carousel--no-fades .edc-carousel__viewport::after{
  opacity: 0;
}

/* ---------- Carte ---------- */

.edc-card {
  position: relative;
  display: block;
  height: var(--edc-card-h);
  background: var(--edc-card-bg);
  border: 1px solid #2a2d31;
  overflow: hidden;
  color: var(--edc-text);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.edc-card__media {
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(118% 92% at 50% 16%, #2e3237 0%, #15181b 52%, #0a0b0c 100%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.edc-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* Vignettes qui sont des photos de produit sur fond blanc : le recadrage les
   abîmerait, on les montre entières sur le fond de la carte. */
.edc-carousel.edc-carousel--fit-contain .edc-card__media img{
  object-fit: contain;
  padding: 12px 12px 34%;
}

/* Le dégradé part plus haut que dans la version précédente, pour que le nom
   reste lisible sur une photo claire. */
.edc-card__shade {
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(6, 7, 8, .72) 46%, rgba(6, 7, 8, .97) 100%);
}

.edc-card__content {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 14px 14px 16px;
}

.edc-card__title {
  display: block;
  margin: 0;
  font-family: var(--edc-font-title, inherit);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.edc-card__count {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--edc-muted);
  font-variant-numeric: tabular-nums;
}

.edc-card:hover,
.edc-card:focus-visible {
  border-color: var(--edc-gold);
  transform: translateY(-3px);
  color: var(--edc-text);
}

.edc-card:hover .edc-card__media { transform: scale(1.07); }
.edc-card:focus-visible { outline: 2px solid var(--edc-gold-light); outline-offset: 3px; }

/* ---------- Mention « Voir », trois styles ---------- */

.edc-card__btn {
  display: inline-flex;
  align-items: center;
  margin-top: 11px;
  text-transform: uppercase;
  transition: .2s;
}

/* Discret : une mention avec un chevron, qui avance au survol. */
.edc-card__btn--minimal {
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--edc-gold);
}

.edc-card__arrow { transition: transform .2s; }
.edc-card:hover .edc-card__arrow { transform: translateX(4px); }

/* Contour doré, comme le bouton secondaire du site. */
.edc-card__btn--outline,
.edc-card__btn--gold {
  justify-content: center;
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid var(--edc-gold-dark);
  border-radius: 2px;
  background: transparent;
  color: var(--edc-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

.edc-card:hover .edc-card__btn--outline { border-color: var(--edc-gold); }

/* Or plein, comme le bouton principal du site. */
.edc-card__btn--gold {
  background: linear-gradient(180deg, var(--edc-gold-light), var(--edc-gold));
  border-color: var(--edc-gold-light);
  color: #080808;
}

.edc-card:hover .edc-card__btn--gold { filter: brightness(1.08); }

/* ---------- Flèches ---------- */

.edc-carousel .edc-carousel__nav{
  position: absolute;
  top: calc(var(--edc-card-h) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #3a3e44;
  border-radius: 50%;
  background: rgba(14, 16, 18, .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--edc-text);
  cursor: pointer;
  transition: .2s;
}

.edc-carousel .edc-carousel__nav svg{
  display: block;
  width: 17px;
  height: 17px;
}

/* « display: grid » ci-dessus l'emporte sur la règle navigateur
   [hidden]{display:none} : sans cette ligne, masquer une flèche depuis le
   script la laisse visible mais inerte. */
.edc-carousel .edc-carousel__nav[hidden]{ display: none !important; }

.edc-carousel .edc-carousel__nav:hover{
  background: var(--edc-gold);
  border-color: var(--edc-gold);
  color: #0a0a0a;
}

.edc-carousel .edc-carousel__nav:focus-visible{
  outline: 2px solid var(--edc-gold-light);
  outline-offset: 2px;
}

/* Au bout du rail la flèche s'effface, au lieu de rester grisée. */
.edc-carousel .edc-carousel__nav[disabled]{ opacity: 0; pointer-events: none; }

.edc-carousel .edc-carousel__nav--prev{ left: 10px; }
.edc-carousel .edc-carousel__nav--next{ right: 10px; }

.edc-carousel.edc-carousel--arrows-outside .edc-carousel__nav--prev{ left: -23px; }
.edc-carousel.edc-carousel--arrows-outside .edc-carousel__nav--next{ right: -23px; }

/* ---------- Barre d'avancement ---------- */

.edc-carousel .edc-carousel__progress{
  position: relative;
  height: 2px;
  margin-top: 18px;
  background: #24272b;
  overflow: hidden;
}

.edc-carousel .edc-carousel__progress[hidden]{ display: none !important; }

.edc-carousel .edc-carousel__bar{
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 30%;
  background: linear-gradient(90deg, var(--edc-gold-dark), var(--edc-gold-light));
  transform-origin: left;
}

/* ---------- Variante grille ---------- */

.edc-carousel .edc-carousel__track--grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--edc-card-min), 1fr));
  overflow: visible;
  padding-bottom: 0;
  cursor: default;
}

.edc-carousel .edc-carousel__track--grid > .edc-card{
  width: auto;
  min-width: 0;
}

.edc-carousel.edc-carousel--grid .edc-carousel__viewport::before,
.edc-carousel.edc-carousel--grid .edc-carousel__viewport::after{ opacity: 0; }

/* ================================================================
   Container queries : la largeur du cadre décide, pas la fenêtre.
   ================================================================ */

@container (max-width: 1040px) {
  .edc-carousel .edc-carousel__viewport{ --edc-per: var(--edc-per-tablet, 3); }
}

@container (max-width: 700px) {
  .edc-carousel .edc-carousel__viewport{ --edc-per: var(--edc-per-mobile, 2); }
  .edc-card { height: calc(var(--edc-card-h) - 24px); }
}

@container (max-width: 440px) {
  .edc-carousel .edc-carousel__viewport{
    --edc-per: var(--edc-per-narrow, 1);
    --edc-peek: 40px;
  }
  .edc-card { height: calc(var(--edc-card-h) - 44px); }
  .edc-card__title { font-size: 17px; }
  /* On défile au doigt : les flèches sont superflues. */
  .edc-carousel .edc-carousel__nav{ display: none; }
  .edc-carousel .edc-carousel__viewport::before,
  .edc-carousel .edc-carousel__viewport::after{ width: 28px; }
}

/* Repli pour les navigateurs sans container queries (avant 2023) :
   on retombe sur des media queries, moins justes mais acceptables. */
@supports not (container-type: inline-size) {
  @media (max-width: 1040px) {
    .edc-carousel .edc-carousel__viewport{ --edc-per: var(--edc-per-tablet, 3); }
  }
  @media (max-width: 700px) {
    .edc-carousel .edc-carousel__viewport{ --edc-per: var(--edc-per-mobile, 2); }
  }
  @media (max-width: 440px) {
    .edc-carousel .edc-carousel__viewport{ --edc-per: var(--edc-per-narrow, 1); --edc-peek: 40px; }
    .edc-carousel .edc-carousel__nav{ display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .edc-carousel .edc-carousel__track{ scroll-behavior: auto; }
  .edc-card,
  .edc-card__media,
  .edc-card__btn,
  .edc-carousel .edc-carousel__nav{ transition: none; }
  .edc-card:hover,
  .edc-card:focus-visible { transform: none; }
  .edc-card:hover .edc-card__media { transform: none; }
  .edc-card:hover .edc-card__arrow { transform: none; }
}