/* ==========================================================================
   Talia — Carrousel d'outils
   --------------------------------------------------------------------------
   Markup : parts/tools-carousel.php et parts/tool-card.php
   Comportement : assets/js/tools-carousel.js

   SEUL FICHIER DE STYLE DU COMPOSANT. Les 33 règles historiques
   (`.tools-carousel`, `.carousel-nav`, `.carousel-indicator`…) ont quitté
   `main.css`, qui passe de 9 943 à 9 821 lignes. N'y reste que la règle
   générique de typographie de contenu qui mentionne `.tools-carousel-section`
   parmi huit sections : elle n'appartient pas à ce composant.

   LA PISTE PORTE AUSSI LA CLASSE `tools-catalog`, posée dans le markup : toutes
   les règles de la carte de catalogue sont préfixées par elle. Sans cette
   classe, la carte a le bon markup et aucun style — c'est le défaut constaté
   en QA à la première tentative.

   LES BLOCS `@media` SONT DANS LEUR ORDRE D'ORIGINE, y compris deux paires de
   requêtes identiques. Les regrouper ferait remonter des règles au-dessus de
   paliers qui les recouvrent (`max-width: 1023.98px` et `min-width: 768px` se
   chevauchent) : l'ordre porte ici du sens, la redite n'en coûte pas.

   Les règles d'accord avec le catalogue, plus bas, sont écrites en spécificité
   (0,2,0) ou (0,3,0) : elles l'emportent sur les règles à une seule classe
   qu'elles corrigent, sans dépendre de l'ordre de chargement des feuilles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La carte d'outil est désormais une carte de catalogue

   `parts/tool-card.php` produit le markup `.catalog-card`, stylé par le thème
   dans main.css et plugin-integration.css. La carte garde en plus la classe
   `.tool-card`, dont dépendent les filtres et le calcul de défilement en
   JavaScript — mais son ANCIEN habillage, lui, doit céder la place.

   On neutralise ici les seules déclarations qui se contredisent. Le reste de
   l'apparence vient du catalogue, et suivra ses évolutions sans qu'on y touche.
   -------------------------------------------------------------------------- */

.tool-card.catalog-card {
  /* `.tool-card` posait un padding de section : l'image du catalogue doit
     affleurer le haut de la carte, c'est son corps qui est en retrait. */
  padding: 0;
}

/* --------------------------------------------------------------------------
   Le défilement

   Largeur fixe, et la carte suivante dépasse volontairement : c'est ce
   débordement qui dit qu'il y a autre chose à droite. Une grille qui tomberait
   juste ne le dirait pas.

   La borne haute est celle du catalogue (326px), pour que les deux se
   ressemblent sur grand écran ; la borne basse garde une amorce lisible sur
   téléphone.
   -------------------------------------------------------------------------- */

/* Spécificité (0,3,0) : la piste porte `tools-carousel` ET `tools-catalog`, et
   les règles du catalogue ciblent `.tools-catalog .catalog-card` en (0,2,0).
   Sans ce troisième niveau, la largeur dépendrait de l'ordre des feuilles. */
.tools-carousel.tools-catalog .catalog-card:not(.catalog-card--favorite):not(.catalog-card--toolbox) {
  flex: 0 0 clamp(280px, 82vw, 326px);
  width: clamp(280px, 82vw, 326px);
  min-width: 0;
  /* `max-width` fait partie du réglage : sans elle, un plafond hérité
     rognait la largeur sans contredire la base flex. */
  max-width: clamp(280px, 82vw, 326px);

  /*
    HAUTEUR EN `auto`, ET C'EST CE QUI ALIGNE LES CARTES.

    La règle du catalogue pose `height: 100%`. Or une hauteur qui n'est pas
    `auto` DÉSACTIVE l'étirement d'un élément flex : chaque carte prenait la
    hauteur de son contenu, et la ligne partait en dents de scie — 463 à 657px
    sur l'accueil. En `auto`, l'étirement par défaut reprend la main et toutes
    les cartes s'alignent sur la plus haute.

    Le sélecteur reprend les deux `:not()` du catalogue pour passer devant lui
    en spécificité : (0,5,0) contre (0,4,0). Les copier est laid, mais c'est le
    seul moyen de le contredire sans `!important`.
  */
  height: auto;
}


/* --------------------------------------------------------------------------
   Le carrousel lui-même — piste, flèches, pastilles

   28 règles rapatriées de `main.css` (FRT-3). Le fichier est désormais le seul
   style du composant : plus rien à chercher ailleurs.
   -------------------------------------------------------------------------- */

.tools-carousel-section {
  padding: var(--spacing-3xl) 0;
  border-top: none;
}

.tools-carousel-section .section-header {
  border-top: none;
}

.tools-carousel-wrapper.tools-carousel-wrapper--static .carousel-nav,
.tools-carousel-wrapper.tools-carousel-wrapper--static .carousel-indicators {
  display: none;
}

.tools-carousel {
  display: flex;
  gap: var(--spacing-xl);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Empêcher le retour à la ligne */
  flex-wrap: nowrap;
  /* Forcer le scroll horizontal uniquement */
  width: 100%;
}

/* La taille des cartes est réglée plus haut, en un seul endroit. Cette règle
   ne garde que ce qui lui est propre : interdire le rétrécissement. Elle
   posait aussi `width`, `min-width` et surtout `max-width: 280px`, qui
   plafonnait la largeur voulue à 326px sans qu'on le voie — la carte sortait
   à 280 alors que sa base flex annonçait 326. */
.tools-carousel .tool-card {
  flex-shrink: 0;
}

.tools-carousel::-webkit-scrollbar {
  display: none;
}

.tools-carousel-wrapper {
  position: relative;
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
}

.tools-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Padding interne pour voir le début/fin */
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.tools-carousel .tool-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Animation d'apparition */
  animation: cardFadeIn 0.4s ease-out;
  animation-fill-mode: both;
}

.tools-carousel .tool-card:nth-child(1) { animation-delay: 0s; }

.tools-carousel .tool-card:nth-child(2) { animation-delay: 0.05s; }

.tools-carousel .tool-card:nth-child(3) { animation-delay: 0.1s; }

.tools-carousel .tool-card:nth-child(4) { animation-delay: 0.15s; }

.tools-carousel .tool-card:nth-child(5) { animation-delay: 0.2s; }

.tools-carousel .tool-card:nth-child(6) { animation-delay: 0.25s; }

.tools-carousel .tool-card:nth-child(7) { animation-delay: 0.3s; }

.tools-carousel .tool-card:nth-child(8) { animation-delay: 0.35s; }

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--text-primary);
}

.carousel-nav:hover {
  background: var(--primary-color);
  color: var(--text-inverse);
  border-color: var(--primary-color);
}

.carousel-prev {
  left: var(--spacing-md);
}

.carousel-next {
  right: var(--spacing-md);
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.carousel-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.carousel-indicator.active {
  background: var(--primary-color);
  width: 24px;
  border-radius: 4px;
}

@media (min-width: 1024px) {
  .tools-carousel-wrapper::before {
      left: 0;
      background: linear-gradient(to right, var(--bg-primary) 0%, transparent 100%);
    }

  .tools-carousel-wrapper::after {
      right: 0;
      background: linear-gradient(to left, var(--bg-primary) 0%, transparent 100%);
    }
}

@media (max-width: 1023.98px) {
  .carousel-prev {
      left: calc(var(--spacing-md) + var(--spacing-sm));
    }

  .carousel-next {
      right: calc(var(--spacing-md) + var(--spacing-sm));
    }
}

@media (min-width: 768px) {
  .tools-carousel-wrapper.tools-carousel-wrapper--static .tools-carousel {
      justify-content: center;
      overflow-x: hidden;
      padding-left: 0;
      padding-right: 0;
    }
}

@media (max-width: 767.98px) {
  .tools-carousel {
      /* Sur mobile, on garde le flex mais on peut permettre le scroll vertical si nécessaire */
      flex-wrap: nowrap;
    }

  .carousel-nav {
      display: none;
    }
}

@media (max-width: 1023.98px) {
  .tools-carousel-wrapper {
      padding: 0 var(--spacing-md);
    }
}

@media (min-width: 1024px) {
  .tools-carousel-wrapper::before,
    .tools-carousel-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 60px;
      z-index: 5;
      pointer-events: none;
    }
}