/**
 * Styles du sélecteur de packs d'emballage - fiche produit.
 *
 * Fichier autonome : aucune dépendance à des variables CSS externes, pour
 * rester fiable quel que soit le thème actif. Palette cohérente avec la
 * charte anthracite / bronze déjà utilisée sur le site.
 */

/* Palette centralisée en variables CSS plutôt qu'en couleurs codées en dur à
 * chaque règle (retour de la revue de code : c'est ce qui a rendu les deux
 * précédents correctifs plus risqués qu'il ne fallait — un ajustement de
 * teinte devient un changement à un seul endroit au lieu d'un
 * find-and-replace dispersé sur tout le fichier).
 *
 * Déclarées sur :root et non sur .tkpkg-packaging-selector : les fenêtres
 * modales (.tkpkg-pack-modal) sont déplacées vers la fin de <body> par le JS
 * dès le chargement de la page (tkpkg-frontend.js, correctif v1.1.1 "portail"
 * — nécessaire pour échapper à un conteneur du thème qui les coupait sinon).
 * Une fois déplacées, elles ne sont plus descendantes de
 * .tkpkg-packaging-selector : des variables scopées dessus auraient rendu
 * invalide tout var(--tkpkg-*) utilisé dans la modale, avec un risque concret
 * — le bouton "Choisir cette option" (fond bronze plein) aurait perdu son
 * fond et serait devenu un bouton transparent avec du texte blanc dessus,
 * donc invisible mais toujours cliquable. D'où :root, seule échelle qui reste
 * valide quel que soit l'endroit du DOM où un élément atterrit.
 *
 * v1.1.5 : ce point reste inchangé (toujours :root) malgré la refonte
 * ci-dessous — voir HERMES-deploiement-v1.1.5, le bouton "Choisir cette
 * option" a été revérifié visible (fond bronze plein, texte blanc). */
:root {
    --tkpkg-bronze: #a67c52;
    --tkpkg-bronze-dark: #8a6640;
    --tkpkg-anthracite: #2c363f;
    --tkpkg-anthracite-light: #5b6570;
    --tkpkg-border: #d8d2c9;
    --tkpkg-surface: #faf9f7;
    --tkpkg-placeholder-bg: #f4efe8;
}

/* ---------------------------------------------------------------------
 * v1.1.5 — Blocage du scroll d'arrière-plan pendant qu'une modale de détail
 * est ouverte (bug prioritaire remonté par jp : la page derrière la modale
 * continuait de défiler).
 *
 * Approche retenue : position:fixed sur <body> (plutôt qu'un simple
 * `overflow:hidden`), appliquée dans TOUS les cas (desktop et mobile), pas
 * seulement en contournement iOS détecté par sniffing de user-agent. Pourquoi
 * ne pas se contenter d'overflow:hidden seul : c'est la technique la plus
 * simple, mais elle est connue pour être insuffisante sur iOS Safari — le
 * body peut continuer à "rebondir"/défiler au toucher (élastique du viewport
 * iOS) même avec overflow:hidden posé dessus. Figer le body en position:fixed
 * (top décalé de la position de scroll au moment de l'ouverture, restaurée à
 * la fermeture) est le contournement robuste et largement utilisé pour ce cas
 * précis, sans avoir besoin de détecter le navigateur : il fonctionne aussi
 * bien sur desktop que sur iOS Safari. Le décalage `top` exact est posé par
 * le JS (tkpkg-frontend.js, lockBodyScroll()) au moment de l'ouverture ; ce
 * bloc CSS ne fixe que les propriétés qui ne dépendent pas de la position de
 * scroll courante. */
body.tkpkg-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.tkpkg-packaging-selector {
    /* v1.2.2 (retouche jp) : plus de bloc encadré ni de fond — le sélecteur se
     * fond dans la page et s'aligne naturellement avec le bouton d'achat du
     * thème qui le suit (même largeur de colonne). */
    width: 100%;
    max-width: none;
    margin: 1.25em 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tkpkg-packaging-selector__label {
    margin: 0 0 0.6em;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--tkpkg-anthracite);
}

.tkpkg-packaging-selector__options {
    /* v1.1.5 : grille à 2 colonnes fixes plutôt qu'un flex-wrap qui laissait
     * les cartes s'étaler en largeur (160px chacune, autant que la colonne
     * pouvait en contenir sur une ligne). Une grille à 2 colonnes garde le
     * bloc compact quel que soit le nombre de packs (les cartes suivantes
     * passent simplement à la ligne du dessous) et applique nativement
     * align-items:stretch par ligne — plus besoin de le déclarer à la main
     * comme avec l'ancien flex-wrap, cf. .tkpkg-pack-option ci-dessous qui
     * n'a donc plus de largeur fixe : c'est la grille qui la détermine. */
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 0.5rem;
    margin: 0 0 0.85em;
    padding: 0;
    list-style: none;
}

/* v1.2.0 — Réglage "Disposition" (tkpkg-settings.php, layout) : "list" passe
 * la grille à une seule colonne pleine largeur (une carte par ligne) et
 * réoriente chaque carte en ligne (vignette à gauche, texte à droite) plutôt
 * qu'empilée verticalement — sinon une carte pleine largeur laisserait un
 * grand vide à droite de son contenu resté centré/étroit. */
.tkpkg-packaging-selector--layout-list .tkpkg-packaging-selector__options {
    grid-template-columns: minmax( 0, 1fr );
}

/* Grille interne (plutôt que flex-direction:row) : la carte a 4 enfants
 * directs au même niveau (vignette, nom, teaser, lien détail/puce) sans
 * conteneur de texte dédié dans le HTML — une grille à placement explicite
 * (grid-column/grid-row ci-dessous) positionne chacun correctement (vignette
 * à gauche sur toute la hauteur, texte empilé à droite) sans dépendre de
 * l'ordre des enfants ni avoir besoin de modifier le balisage. */
.tkpkg-packaging-selector--layout-list .tkpkg-pack-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    justify-items: start;
    text-align: left;
    column-gap: 0.75em;
    row-gap: 0.2em;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__thumb,
.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__thumb--standard,
.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__thumb-trigger {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-bottom: 0;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__name {
    grid-column: 2;
    grid-row: 1;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__teaser {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    text-align: left;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__detail-link,
.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__status-chip {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.3em;
}

.tkpkg-pack-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0.55em 0.45em;
    /* v1.2.1 (retouche jp) : suppression de la bordure transparente réservée
     * (elle ne servait qu'à l'état sélectionné, désormais indiqué par la coche). */
    border: 0;
    border-radius: 8px;
    /* v1.2.2 (retouche jp) : plus de fond blanc — fond transparent, se fond
     * dans la page (les vignettes photo restent bien visibles). */
    background: transparent;
    cursor: pointer;
    text-align: center;
    box-shadow: none;
    transition: transform 0.15s ease;
}

.tkpkg-pack-option:hover {
    transform: translateY( -1px );
    box-shadow: none;
}

/* Petit écran : la grille à 2 colonnes (déjà appliquée par défaut ci-dessus,
 * desktop ET mobile — exigence #4 du brief) resserre encore un peu l'espace
 * et le padding interne pour rester bien compacte, sans jamais faire des
 * cartes démesurées sur un petit écran. */
@media ( max-width: 480px ) {
    .tkpkg-packaging-selector {
        max-width: 100%;
    }

    .tkpkg-packaging-selector__options {
        gap: 0.4rem;
    }

    .tkpkg-pack-option {
        padding: 0.5em 0.35em;
    }
}

.tkpkg-pack-option--selected {
    /* v1.2.1 (retouche jp) : plus de cadre marron autour de l'option sélectionnée —
     * la coche ✓ en coin (::after) suffit à indiquer la sélection. */
    border-color: transparent;
    box-shadow: none;
}

/* Pastille de confirmation en coin, en plus de la bordure : un simple
 * changement de couleur de bordure est trop discret pour se voir comme un
 * état "sélectionné" sans ambiguïté (retour de la revue UI/UX — comparé à
 * des sélecteurs d'options établis qui utilisent tous un badge similaire).
 * v1.1.5 : réduite (16px au lieu de 20px, ombre 1px au lieu de 2px) pour
 * rester discrète sur les cartes plus compactes — la coche reste le même
 * pattern, juste moins imposante (retour jp : "moins dominant sur la page"). */
.tkpkg-pack-option--selected::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tkpkg-bronze);
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 1px #ffffff;
}

/* Masqué visuellement mais toujours présent, focusable et lisible par les
 * lecteurs d'écran : ne jamais utiliser display:none ici. */
.tkpkg-pack-option__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

/* Anneau de focus visible au clavier, sur toute la vignette englobante. */
.tkpkg-pack-option__radio:focus-visible ~ .tkpkg-pack-option__thumb,
.tkpkg-pack-option__radio:focus-visible ~ .tkpkg-pack-option__thumb--standard,
.tkpkg-pack-option__radio:focus-visible ~ .tkpkg-pack-option__name {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * v1.2.0 — Taille des vignettes, pilotée par le réglage global "Taille des
 * vignettes" (tkpkg-settings.php, thumb_size) plutôt que codée en dur :
 * "large" (76px, nouveau défaut, façon swatch de la maquette approuvée) ou
 * "compact" (44px, taille v1.1.5). Les DEUX modifications de classe
 * ci-dessous s'appliquent aussi bien en mode 'modal' qu'en mode 'panel' (le
 * wrapper .tkpkg-packaging-selector porte toujours l'une des deux classes,
 * cf. tkpkg-frontend.php) : la taille de vignette est un réglage
 * transversal, pas propre à un seul mode d'affichage.
 *
 * Les propriétés communes aux deux tailles (radius, object-fit, fond, marge)
 * restent sur la classe de base ; seules width/height/la taille du SVG
 * changent selon le modificateur porté par le wrapper parent. */
.tkpkg-pack-option__thumb {
    margin-bottom: 0.35em;
    border-radius: 6px;
    object-fit: cover;
    /* v1.2.2 (retouche jp) : plus de fond teinté derrière les vignettes. */
    background: transparent;
}

/* Vignette "placeholder" (pas de photo) : une icône intentionnelle sur fond
 * teinté, jamais un cadre pointillé vide — un cadre pointillé vide est le
 * code visuel universel de "image manquante/cassée", ce qu'aucun plugin
 * sérieux n'affiche à un client (retour explicite de la revue UI/UX). Le SVG
 * lui-même est rendu par tkpkg_render_thumb_placeholder() côté PHP.
 * v1.2.2 : fond retiré (retouche jp) — l'icône se détache sur la page sans
 * carré teinté ; l'opacité passe à 1 et la teinte s'assombrit pour garder
 * un bon contraste sur fond clair. */
.tkpkg-pack-option__thumb--standard {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35em;
    border-radius: 6px;
    background: transparent;
}

.tkpkg-pack-option__thumb--standard svg {
    color: var(--tkpkg-bronze-dark);
    opacity: 1;
}

/* "compact" = ancienne taille v1.1.5 (44px). */
.tkpkg-packaging-selector--thumb-compact .tkpkg-pack-option__thumb,
.tkpkg-packaging-selector--thumb-compact .tkpkg-pack-option__thumb--standard {
    width: 44px;
    height: 44px;
}

.tkpkg-packaging-selector--thumb-compact .tkpkg-pack-option__thumb--standard svg {
    width: 18px;
    height: 18px;
}

/* "large" = nouveau défaut v1.2.0 (76px, façon swatch de la maquette). */
.tkpkg-packaging-selector--thumb-large .tkpkg-pack-option__thumb,
.tkpkg-packaging-selector--thumb-large .tkpkg-pack-option__thumb--standard {
    width: 76px;
    height: 76px;
}

.tkpkg-packaging-selector--thumb-large .tkpkg-pack-option__thumb--standard svg {
    width: 26px;
    height: 26px;
}

.tkpkg-pack-option__name {
    font-size: 0.82em;
    line-height: 1.3;
    color: var(--tkpkg-anthracite);
}

.tkpkg-packaging-selector__total {
    /* v1.1.5 : typographie rapprochée de celle d'un prix produit (le montant
     * en plus gros/gras, le libellé "Total :" en retrait) plutôt qu'une seule
     * ligne tout en gras de même taille — sans connaître le CSS exact du
     * thème pour le prix natif (hors périmètre de ce plugin), ce réglage
     * générique se rapproche du pattern standard label discret + montant mis
     * en avant. */
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em;
    margin: 0;
    padding-top: 0.6em;
    /* v1.2.2 (retouche jp) : séparateur retiré — le total est une ligne de
     * texte simple, pas un élément "encadré" par le plugin. */
    border-top: 0;
    font-size: 0.92em;
    font-weight: 500;
    color: var(--tkpkg-anthracite-light);
}

.tkpkg-packaging-selector__total #tkpkg-total-price {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--tkpkg-anthracite);
}

/* ---------------------------------------------------------------------
 * Accroche (teaser) + déclencheurs de la fiche détaillée d'un pack.
 * ------------------------------------------------------------------- */

.tkpkg-pack-option__teaser {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em; /* réservée même vide (span toujours rendu, cf. tkpkg-frontend.php) :
                           garantit que toutes les cartes d'une même ligne ont la même hauteur
                           de bloc "accroche", qu'un pack ait un teaser court, long, ou aucun. */
    margin-top: 0.3em;
    font-size: 0.76em;
    line-height: 1.3;
    color: var(--tkpkg-anthracite-light); /* discret, ne concurrence pas le nom du pack. */
}

/* Reset bouton natif : la vignette-bouton doit visuellement se comporter
 * exactement comme l'ancienne <img> statique, seul le curseur/l'action changent. */
.tkpkg-pack-option__thumb-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.tkpkg-pack-option__thumb-trigger:hover {
    box-shadow: 0 0 0 2px var(--tkpkg-bronze);
}

.tkpkg-pack-option__thumb-trigger:focus-visible {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: 2px;
}

/* "Voir le détail" habillé en petite pastille (pill), pas en simple lien
 * souligné : un lien texte nu au milieu d'une carte à bordures/ombres/coins
 * arrondis se voit comme un endroit resté au stade brouillon (retour de la
 * revue UI/UX). Même logique de calage bas (margin-top:auto) qu'avant. */
.tkpkg-pack-option__detail-link {
    display: inline-flex;
    align-items: center;
    margin-top: auto; /* calé en bas de la carte (la grille applique align-items:stretch
                          par ligne, cf. .tkpkg-packaging-selector__options) : "Voir le
                          détail" s'aligne sur la même ligne d'une carte à l'autre, quelle
                          que soit la longueur du nom/teaser au-dessus. */
    padding: 0.25em 0.6em;
    border: 1px solid #d9cfc2;
    border-radius: 999px;
    background: #faf7f2;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--tkpkg-bronze);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tkpkg-pack-option__detail-link:hover {
    background: var(--tkpkg-bronze);
    border-color: var(--tkpkg-bronze);
    color: #ffffff;
}

.tkpkg-pack-option__detail-link:focus-visible {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: 2px;
}

/* Puce non interactive affichée sous l'emballage standard, pour que cette
 * carte se termine elle aussi sur un élément visible en bas — comme les
 * cartes premium se terminent sur "Voir le détail" — plutôt que sur du vide
 * (retour de la revue UI/UX : une carte qui "s'arrête" sans rien en bas se
 * voit comme inachevée à côté d'une carte qui se termine sur une pastille).
 * v1.1.5 : c'est maintenant la SEULE mention du statut "Inclus" de cette
 * carte (le nom et la ligne de texte séparée en répétaient le principe —
 * retour jp sur la redondance), avec le même padding que la pastille "Voir
 * le détail" ci-dessus pour rester visuellement cohérente en bas de carte. */
.tkpkg-pack-option__status-chip {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    /* v1.2.2 (retouche jp) : pastille sans fond teinté — texte simple. */
    background: transparent;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--tkpkg-bronze-dark);
}

/* ---------------------------------------------------------------------
 * v1.2.0 — Mode 'panel' : rangée de vignettes "swatch" + panneau "légende"
 * déplié, cf. la maquette approuvée par jp (tokeiwabi-options-mockup.html).
 * ------------------------------------------------------------------- */

.tkpkg-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 0.85em;
}

/* Disposition "liste" : un swatch par ligne pleine largeur (vignette à
 * gauche, nom/prix à droite) plutôt que la rangée façon échantillonnier. */
.tkpkg-packaging-selector--layout-list .tkpkg-swatch-row {
    flex-direction: column;
}

/* La vignette swatch réutilise .tkpkg-pack-option/__radio/__thumb (même
 * anneau de focus, même pastille "sélectionné" ::after, cf. plus haut) :
 * seul l'agencement interne change via ce modificateur --swatch, pour ne
 * jamais dupliquer la logique de sélection/accessibilité déjà en place. */
.tkpkg-pack-option--swatch {
    flex-direction: column;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    gap: 0.35em;
}

.tkpkg-pack-option--swatch:hover {
    border-color: transparent;
    box-shadow: none;
}

.tkpkg-pack-option--swatch .tkpkg-pack-option__thumb,
.tkpkg-pack-option--swatch .tkpkg-pack-option__thumb--standard {
    margin-bottom: 0;
    /* v1.2.1 (retouche jp) : vignettes sans ombre ni réserve de bordure. */
    box-shadow: none;
    border: 0;
    transition: transform 0.12s ease;
}

.tkpkg-pack-option--swatch:hover .tkpkg-pack-option__thumb,
.tkpkg-pack-option--swatch:hover .tkpkg-pack-option__thumb--standard {
    transform: translateY( -2px );
}

.tkpkg-pack-option--swatch.tkpkg-pack-option--selected .tkpkg-pack-option__thumb,
.tkpkg-pack-option--swatch.tkpkg-pack-option--selected .tkpkg-pack-option__thumb--standard {
    /* v1.2.1 (retouche jp) : plus de liseré bronze sur la vignette sélectionnée. */
    border-color: transparent;
}

/* Pastille "sélectionné" repositionnée sur le coin de la vignette elle-même
 * (comme dans la maquette) plutôt que sur le coin de toute la carte : une
 * carte swatch n'a plus de "coin" propre puisqu'elle n'a plus de fond/bordure. */
.tkpkg-pack-option--swatch.tkpkg-pack-option--selected::after {
    top: -6px;
    right: -6px;
}

.tkpkg-pack-option__swatch-name {
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tkpkg-anthracite);
    text-align: center;
}

.tkpkg-pack-option__swatch-price {
    font-size: 0.72em;
    color: var(--tkpkg-anthracite-light);
    font-variant-numeric: tabular-nums;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option--swatch {
    flex-direction: row;
    align-items: center;
    gap: 0.65em;
}

.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__swatch-name,
.tkpkg-packaging-selector--layout-list .tkpkg-pack-option__swatch-price {
    text-align: left;
}

/* Panneau "légende" : toujours visible sous la rangée de swatches, affiche
 * le nom/prix du pack sélectionné et, pour un pack ayant une fiche détaillée
 * (has_detail), un bouton "en savoir plus" qui déplie le détail sur place. */
.tkpkg-caption {
    /* v1.2.1+ (retouche jp) : suppression du cadre ET du fond teinté du bandeau
     * de confirmation — texte simple aligné à gauche, sans bloc apparent. */
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

/* Explicite plutôt que de compter sur le style navigateur par défaut de
 * [hidden] (display:none) : même précaution défensive déjà prise pour
 * .tkpkg-pack-modal[hidden] plus bas dans ce fichier, au cas où un thème
 * réinitialiserait globalement ce comportement natif. */
.tkpkg-caption__entry[hidden] {
    display: none;
}

.tkpkg-caption__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* v1.2.2 (retouche jp) : padding latéral retiré pour aligner le bandeau de
     * confirmation avec les vignettes et le reste de la colonne produit. */
    padding: 0.5em 0;
    cursor: pointer;
    user-select: none;
}

/* Emballage standard (et tout pack sans fiche détaillée) : rien à déplier,
 * donc pas d'affordance cliquable trompeuse — voir le rapport de livraison
 * pour le détail de cette décision produit. */
.tkpkg-caption__head--static {
    cursor: default;
}

.tkpkg-caption__head:focus-visible {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: -2px;
}

.tkpkg-caption__thumb-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 6px;
    overflow: hidden;
    /* v1.2.2 (retouche jp) : fond transparent. */
    background: transparent;
}

.tkpkg-caption__thumb-mini-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tkpkg-caption__thumb-mini-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tkpkg-caption__thumb-mini-icon svg {
    width: 16px;
    height: 16px;
    color: var(--tkpkg-bronze);
    opacity: 0.6;
}

.tkpkg-caption__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tkpkg-caption__name {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--tkpkg-anthracite);
}

.tkpkg-caption__price {
    font-size: 0.76em;
    color: var(--tkpkg-anthracite-light);
}

/* v1.5.0 — Quantité restante d'un pack (« Plus que 3 »).
 * Affichée par tkpkg_render_stock_hint() UNIQUEMENT sous le seuil réglé en
 * admin : au-dessus, aucun compteur (un « 18 restants » qui stagne des mois
 * décourage plus qu'il n'incite). Jamais de cadre ni de fond coloré — une
 * simple mention discrète sous le prix, dans l'esprit épuré de la charte. */
.tkpkg-stock-hint {
    display: block;
    margin-top: 0.15em;
    font-size: 0.95em;
    color: var(--tkpkg-bronze, #a67c52);
    font-variant-numeric: tabular-nums;
}

/* v1.5.0 — Description courte de l'emballage standard (réglage global
 * « Description de l'emballage standard »). Même esprit : du texte, jamais un
 * encadré. Masquée d'office tant que le réglage est vide (aucun bloc vide). */
.tkpkg-caption__desc {
    display: block;
    margin-top: 0.2em;
    font-size: 0.94em;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tkpkg-anthracite-light);
}

.tkpkg-caption__chevron {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex: none;
    font-size: 0.76em;
    font-weight: 600;
    color: var(--tkpkg-bronze-dark);
}

.tkpkg-caption__chevron svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.tkpkg-caption__head[aria-expanded="true"] .tkpkg-caption__chevron svg {
    transform: rotate( 180deg );
}

/* Accordéon max-height : transition posée ici, la valeur cible (hauteur
 * réelle du contenu) est calculée et appliquée par le JS (tkpkg-frontend.js)
 * au clic, exactement comme dans la maquette approuvée — une simple
 * transition sur "auto" n'est pas animable en CSS. */
.tkpkg-caption__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

.tkpkg-caption__body-inner {
    padding: 0 0.8em 0.9em;
    font-size: 0.8em;
    color: var(--tkpkg-anthracite-light);
    line-height: 1.55;
}

.tkpkg-caption__story-block {
    margin: 0 0 0.6em;
}

.tkpkg-caption__story-block strong {
    color: var(--tkpkg-anthracite);
}

.tkpkg-caption__gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0.6em 0 0.8em;
}

.tkpkg-caption__gallery-thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    background: #ece7e0;
}

/* v1.5.1 — Galerie cliquable.
 * Chaque vignette est désormais un BOUTON (accessibilité clavier + lecteurs
 * d'écran). Aucun cadre, aucun fond, aucune bordure : le bouton se fond dans
 * la vignette, seul le curseur change. Et les vignettes passent de 44 à 60 px :
 * une miniature de 44 px ne donne envie de cliquer sur rien (recommandation de
 * l'agent Visuel — la vignette doit tenter, la popup doit prouver). */
.tkpkg-zoom {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
    border-radius: 6px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tkpkg-zoom .tkpkg-caption__gallery-thumb {
    display: block;
}

.tkpkg-zoom:hover,
.tkpkg-zoom:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px -6px rgba(44, 54, 63, 0.45);
}

.tkpkg-zoom:focus-visible {
    outline: 2px solid #a67c52;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * v1.5.1 — Popup d'agrandissement des photos de pack.
 *
 * Verrou de défilement posé sur <html> et non <body> : même leçon que le
 * défilement du tiroir panier — un `overflow` posé sur html empêche celui du
 * body de se propager à la fenêtre. Le fond sombre ne détonne pas avec la
 * charte (anthracite #2c363f plutôt qu'un noir pur), et aucune photo n'est
 * recadrée : object-fit: contain, jamais cover.
 * --------------------------------------------------------------------- */
html.tkpkg-zoom-open {
    overflow: hidden;
}

.tkpkg-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(34, 42, 49, 0.93);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3.5rem 1rem 4.5rem;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior: contain;
}

.tkpkg-lightbox--open {
    display: flex;
}

.tkpkg-lightbox__img {
    max-width: min(1024px, 92vw);
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    background: #f4f1eb;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

.tkpkg-lightbox__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    padding: 0 1rem;
    text-align: center;
    color: #f4f1eb;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.tkpkg-lightbox__caption {
    display: block;
    font-weight: 600;
}

.tkpkg-lightbox__counter {
    display: block;
    margin-top: 0.15em;
    font-size: 0.85em;
    opacity: 0.65;
}

.tkpkg-lightbox__close,
.tkpkg-lightbox__nav {
    position: absolute;
    border: 0;
    background: rgba(244, 241, 235, 0.14);
    color: #f4f1eb;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.tkpkg-lightbox__close:hover,
.tkpkg-lightbox__close:focus-visible,
.tkpkg-lightbox__nav:hover,
.tkpkg-lightbox__nav:focus-visible {
    background: rgba(244, 241, 235, 0.3);
    outline: none;
}

.tkpkg-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.7rem;
}

.tkpkg-lightbox__nav {
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    font-size: 2rem;
}

.tkpkg-lightbox__nav--prev {
    left: 0.8rem;
}

.tkpkg-lightbox__nav--next {
    right: 0.8rem;
}

/* Une seule photo : ni flèches ni compteur. */
.tkpkg-lightbox--single .tkpkg-lightbox__nav,
.tkpkg-lightbox--single .tkpkg-lightbox__counter {
    display: none;
}

@media (max-width: 480px) {
    .tkpkg-lightbox {
        padding: 3rem 0.5rem 4.5rem;
    }

    .tkpkg-lightbox__nav {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.7rem;
    }

    .tkpkg-lightbox__nav--prev {
        left: 0.3rem;
    }

    .tkpkg-lightbox__nav--next {
        right: 0.3rem;
    }
}

.tkpkg-caption__closing {
    margin: 0.6em 0 0;
    color: var(--tkpkg-bronze-dark);
    font-style: italic;
}

/* ---------------------------------------------------------------------
 * Modales "fiche détaillée" d'un pack.
 * ------------------------------------------------------------------- */

/* Simple conteneur : aucun style propre, seulement un point d'ancrage DOM
 * pour regrouper les modales en dehors du flux visuel du sélecteur. */
.tkpkg-pack-modals {
    margin: 0;
}

/* Cachée par défaut via l'attribut natif [hidden] ; dès qu'elle n'est plus
 * hidden (voir tkpkg-frontend.js), on la fait flotter par-dessus la page. */
.tkpkg-pack-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.tkpkg-pack-modal[hidden] {
    display: none;
}

.tkpkg-pack-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba( 44, 54, 63, 0.6 );
}

.tkpkg-pack-modal__dialog {
    /* v1.1.5 : max-width resserrée de 640px à 520px (fourchette demandée :
     * ~480-560px) — la modale reste centrée (cf. align-items/justify-content
     * sur .tkpkg-pack-modal ci-dessus, inchangé) mais moins large qu'avant.
     * max-height + overflow-y:auto inchangés : le contenu long (galerie +
     * texte storytelling) continue de défiler À L'INTÉRIEUR de la boîte de
     * dialogue, jamais dans la page derrière (indépendant du scroll-lock du
     * body ci-dessus, qui bloque uniquement le scroll d'arrière-plan). */
    position: relative;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75em;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba( 44, 54, 63, 0.25 );
}

.tkpkg-pack-modal__close {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    width: 32px;
    height: 32px;
    border: 1px solid var(--tkpkg-border);
    border-radius: 50%;
    background: var(--tkpkg-surface);
    color: var(--tkpkg-anthracite);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}

.tkpkg-pack-modal__close:hover {
    border-color: var(--tkpkg-bronze);
    color: var(--tkpkg-bronze);
}

.tkpkg-pack-modal__close:focus-visible {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: 2px;
}

.tkpkg-pack-modal__title {
    margin: 0 1.75em 0.75em 0;
    color: var(--tkpkg-anthracite);
    font-size: 1.25em;
}

.tkpkg-pack-modal__gallery {
    margin: 0 0 1.25em;
}

/* Ratio 4:3 (padding-top 75%) : les images (large) restent stables
 * visuellement quelle que soit leur taille d'origine ; position:relative
 * pour empiler les slides. */
.tkpkg-pack-modal__gallery-main {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    border-radius: 6px;
    background: #ece7e0;
}

.tkpkg-pack-modal__gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tkpkg-pack-modal__gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.75em 0 0;
    padding: 0;
    list-style: none;
}

.tkpkg-pack-modal__gallery-thumb {
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: none;
    cursor: pointer;
}

.tkpkg-pack-modal__gallery-thumb:hover {
    border-color: #cbb79a;
}

.tkpkg-pack-modal__gallery-thumb:focus-visible {
    outline: 2px solid var(--tkpkg-bronze);
    outline-offset: 2px;
}

.tkpkg-pack-modal__gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tkpkg-pack-modal__story {
    margin: 0 0 1.25em;
}

.tkpkg-pack-modal__story-block {
    margin: 0 0 0.85em;
    color: var(--tkpkg-anthracite);
    line-height: 1.6;
}

.tkpkg-pack-modal__closing {
    margin: 0;
    color: var(--tkpkg-bronze);
    font-style: italic;
    line-height: 1.5;
}

/* Bouton primaire, cohérent avec le CTA "Ajouter au panier" du site : plein
 * bronze, texte blanc, occupe toute la largeur de la boîte de dialogue.
 * v1.1.5 : styles inchangés (fond bronze plein / texte blanc) — c'était une
 * régression corrigée en v1.1.3, revérifiée visible après la refonte de ce
 * fichier (cf. commentaire :root en haut de fichier). */
.tkpkg-pack-modal__select {
    display: block;
    width: 100%;
    margin-top: 0.5em;
    padding: 0.85em 1.5em;
    border: 0;
    border-radius: 4px;
    background: var(--tkpkg-bronze);
    color: #ffffff;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tkpkg-pack-modal__select:hover {
    background: var(--tkpkg-bronze-dark);
}

.tkpkg-pack-modal__select:focus-visible {
    outline: 2px solid var(--tkpkg-anthracite);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * v1.3.0 — Badge « Boîte d'origine fournie » (réglage produit OUI, cf.
 * tkpkg-product-box.php). Rendu épuré cohérent avec les retouches jp
 * (pas de cadre, pas de fond marron) : une coche + deux lignes de texte.
 * ------------------------------------------------------------------- */
.tkpkg-original-box-notice {
    margin: 0.75em 0;
}

.tkpkg-original-box-notice__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin: 0 0 0.3em;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    background: #eef2ec; /* vert très pâle, discret — valide/rassurant */
    font-size: 0.85em;
    font-weight: 700;
    color: var(--tkpkg-anthracite);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tkpkg-original-box-notice__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5a7d5a;
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
}

.tkpkg-original-box-notice__detail {
    margin: 0;
    font-size: 0.82em;
    line-height: 1.45;
    color: var(--tkpkg-anthracite-light);
}