/*
 * MOD-IA 2026-09-02 : blocs déplacés tel quels depuis assets/css/style.css
 * dans le cadre du découpage CSS de la charte graphique. Aucune valeur n'a
 * changé ; des renvois restent aux anciens emplacements dans style.css.
 *
 * Famille « Navigation » : tout ce qui sert à se déplacer, filtrer ou dérouler —
 * .tdb-pagination, .tdb-carousel-nav, .tdb-accordion.
 * Voir le tableau de routage dans la charte graphique (page-charte.php).
 *
 * N'a PAS été déplacé ici : .site-header__cart, dont les règles
 * mobiles vivent au milieu d'un @media partagé avec tout l'en-tête ;
 * l'en sortir couperait ce media en deux. Et .tdb-vignette-bon, qui
 * doit rester APRÈS .tdb-accordion__panel (même spécificité) — voir
 * le commentaire resté sur place dans style.css.
 */
/* ---------- Pagination numérotée ---------- */
/* "pagination" (2443:3625) : alignée à DROITE de la colonne de cartes, 40px
   sous la dernière rangée — pas centrée. */
.tdb-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.tdb-pagination ul {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tdb-pagination a,
.tdb-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    font-size: var( --text-button-size );
}

.tdb-pagination .current {
    border: 1px solid var( --color-text-muted );
}

/* MOD-IA 2026-09-02 : ajout des états survol/focus et de la couleur des
   points de suspension, jusqu'ici absents — un numéro de page ne donnait
   aucun retour au passage de la souris, et les « … » se lisaient comme un
   numéro cliquable. Écart relevé en comparant la charte graphique (qui les
   montrait déjà) au thème (qui ne les avait pas). Aucune frame Figma ne
   couvre ces états : dérivés dans l'esprit de la charte (fond gris box, même
   traitement que .btn--ghost), comme l'a été .btn:disabled. La règle
   « cinq états, toujours » de la charte les rendait de toute façon
   obligatoires. */
.tdb-pagination a:hover,
.tdb-pagination a:focus-visible {
    background: var( --color-surface-muted );
}

.tdb-pagination .dots {
    color: var( --color-text-muted );
}
/* MOD-IA 2026-09-02 : au-delà d'une poignée de pages, la liste de numéros
   dépassait la largeur de l'écran en mobile (aucun retour à la ligne prévu) —
   défaut repéré en vérifiant les appelants de tdb_pagination() lors du
   découpage CSS de la charte graphique. Le rayon (5px) et la taille (34px)
   ne changent pas : simple retour à la ligne, rien d'autre. */
@media ( max-width: 767px ) {
    .tdb-pagination ul {
        flex-wrap: wrap;
    }
}


/* ---------- Flèches de carrousel ---------- */
/* MOD-IA 2026-09-08 : mise en conformité avec le composant Figma
   « BTN defilement galerie » (2282:3710, relevé sur « Frame 602 » 2282:3746,
   en-tête « Acheter une prestation » de la page détail commerçant).

   Trois écarts corrigés :
   - la pastille était un CERCLE (border-radius: 50%) alors que le composant
     est un carré de 34px aux coins arrondis de 4,7px, soit le rayon de badge
     de la charte (--radius-badge, 5px) ;
   - le chevron était NOIR alors qu'il est blanc dans la maquette ;
   - l'écart entre les deux boutons était de --space-sm (12px) au lieu des 5px
     du design.
   Le tracé du chevron vient du composant lui-même — voir
   template-parts/ui/carousel-nav.php, qui ne produit plus les caractères
   ‹ / ›. Les propriétés de texte (font-size, line-height) n'ont
   donc plus d'objet et disparaissent.

   ANCIEN CODE :
   .tdb-carousel-nav {
       display: flex;
       gap: var( --space-sm );
   }
   .tdb-carousel-nav__btn {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 34px;
       height: 34px;
       border: none;
       border-radius: 50%;
       background: var( --color-primary );
       color: #000;
       font-size: 20px;
       line-height: 1;
       cursor: pointer;
       transition: background-color var( --duration-tdb ) var( --ease-tdb );
   }
*/
.tdb-carousel-nav {
    display: flex;
    gap: 5px;
}
.tdb-carousel-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var( --radius-badge );
    background: var( --color-primary );
    color: #fff;
    cursor: pointer;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), color var( --duration-tdb ) var( --ease-tdb );
}

/* Le chevron occupe tout le bouton : c'est le tracé Figma qui porte lui-même
   sa marge intérieure (34 × 34, chevron dessiné entre x=13 et x=20). */
.tdb-carousel-nav__chevron {
    display: block;
    width: 100%;
    height: 100%;
}

.tdb-carousel-nav__btn:hover {
    background: var( --color-ink-strong );
    color: #fff;
}

/* MOD-IA 2026-09-02 : état désactivé en bout de piste — voir main.js,
   tdbInitCarousels(). Absent de la maquette Figma (aucune frame ne montre le
   carrousel en butée) : dessiné dans l'esprit de la charte, même traitement
   que l'état désactivé des boutons (.btn:disabled). */
.tdb-carousel-nav__btn:disabled {
    background: var( --color-status-depleted );
    color: #fff;
    cursor: not-allowed;
}

.tdb-carousel-nav__btn:disabled:hover {
    background: var( --color-status-depleted );
    color: #fff;
}

/* ---------- Accordéon (FAQ, filtres, vignettes de bon) ---------- */
.tdb-accordion__item {
    margin-bottom: var( --space-sm );
    border-radius: var( --radius-sm );
    overflow: hidden;
}

.tdb-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var( --color-surface-muted );
    padding: 15px 20px;
    text-align: left;
    font-size: var( --text-kicker-size );
    font-weight: var( --weight-semibold );
}

.tdb-accordion__item.is-open .tdb-accordion__trigger {
    background: var( --color-primary );
}

/* MOD-IA 2026-09-01 : sens des chevrons inversé. Le fichier
   chevron-accordion-open.svg dessine une flèche vers le HAUT (c'est l'état
   « ouvert », d'où son nom) : sans rotation au repos, un panneau replié
   affichait donc un chevron vers le haut et un panneau déplié un chevron vers
   le bas — l'inverse de la maquette. On tourne désormais l'état REPLIÉ. */
/* ANCIEN CODE :
.tdb-accordion__chevron {
    transition: transform .15s ease;
}
.tdb-accordion__item.is-open .tdb-accordion__chevron {
    transform: rotate(180deg);
}
*/
.tdb-accordion__chevron {
    transition: transform .15s ease;
    transform: rotate(180deg); /* replié : chevron vers le bas */
}

.tdb-accordion__item.is-open .tdb-accordion__chevron {
    transform: rotate(0deg);   /* déplié : chevron vers le haut */
}

.tdb-accordion__panel {
    display: none;
    padding: var( --space-md ) 20px var( --space-xl );
    font-size: var( --text-body-size );
    line-height: var( --text-body-lh );
}

.tdb-accordion__item.is-open .tdb-accordion__panel {
    display: block;
}