/**
 * HelloPrint Sync - Complement du configurateur.
 *
 * Cette feuille est un COMPLEMENT, toujours charge APRES 'inkside-front' (le vrai
 * configurateur InkSide), jamais un fallback complet. Le rendu des composants
 * (cartes, swatches, upload, recapitulatif, barre sticky) vient deja de
 * 'inkside-front' via les classes .inkside-* partagees ; on ne reproduit rien ici.
 *
 * On se limite a deux ajouts, scopes a .helloprint-configurator :
 *   1. pastilles IMAGE plus grandes, disposees en grille propre et alignee ;
 *   2. accordeon etape par etape (stepper vertical, une seule etape ouverte).
 *
 * Les tokens --ink-* sont fournis par .inkside-configurator (meme conteneur).
 * Contraintes : aucun caractere em dash, aucun accent de bord gauche.
 */

/* ==========================================================================
   1. Pastilles IMAGE : plus grandes, en grille, libelle sous l'image
   On ne touche QUE les swatches image ; les swatches texte restent inchanges.
   ========================================================================== */

/* La rangee de swatches d'un attribut a IMAGES passe en grille reguliere.
   Plafonnee a ~4 colonnes desktop ; les pastilles texte gardent leur flex auto. */
.helloprint-configurator .inkside-swatches-row:has(.inkside-var-swatch-image) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    /* Toutes les rangees a la meme hauteur : les tuiles (image + libelle 1 ou
       2 lignes) restent identiques quel que soit le nombre de lignes du libelle. */
    grid-auto-rows: 1fr;
}

/* Repli pour les navigateurs sans :has() : grille appliquee a la rangee entiere
   des qu'elle contient au moins une image (cible large, sans casser le texte). */
@supports not (selector(:has(*))) {
    .helloprint-configurator .inkside-swatches-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 14px;
        grid-auto-rows: 1fr;
    }
}

/* Plafond a ~4 colonnes en desktop large : evite les pastilles minuscules. */
@media (min-width: 768px) {
    .helloprint-configurator .inkside-swatches-row:has(.inkside-var-swatch-image) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* La pastille image devient une tuile : image ~76px + libelle dessous. La tuile
   remplit sa cellule (height 100% + grid-auto-rows: 1fr) -> hauteurs egales. */
.helloprint-configurator .inkside-var-swatch-image {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
    border: 2px solid var(--ink-border);
    border-radius: var(--ink-radius-lg);
    background: var(--ink-bg);
    text-align: center;
}

.helloprint-configurator .inkside-var-swatch-image img {
    display: block;
    width: 100%;
    max-width: 96px;
    height: 76px;
    /* contain : l'image entiere est visible, jamais rognee (les visuels HelloPrint
       sont carres avec marge blanche, ils s'inserent proprement). */
    object-fit: contain;
    border-radius: var(--ink-radius-md);
    background: var(--ink-bg);
}

/* Libelle sous l'image (le clip d'accessibilite de l'InkSide est neutralise ici).
   min-height = 2 lignes reservees : un libelle sur 1 ligne (« 300 g ») occupe la
   meme hauteur qu'un libelle sur 2 lignes, tuiles alignees. */
.helloprint-configurator .inkside-var-swatch-image .inkside-var-swatch-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5em;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink-text);
    overflow-wrap: anywhere;
}

/* Survol : on garde un retour discret, sans agrandir la tuile (la grille reste alignee). */
.helloprint-configurator .inkside-var-swatch-image:hover {
    transform: none;
    border-color: var(--ink-border-hover);
    box-shadow: var(--ink-shadow-sm);
}

.helloprint-configurator .inkside-var-swatch-image.active {
    border-color: var(--ink-primary);
    background: var(--ink-primary-bg);
    box-shadow: 0 2px 8px rgba(48, 73, 97, 0.12);
}

.helloprint-configurator .inkside-var-swatch-image.active .inkside-var-swatch-caption {
    color: var(--ink-primary);
}

/* Rangee mixte (des valeurs avec image, d'autres sans) : les pastilles TEXTE remplissent
   aussi leur cellule de grille -> meme hauteur que les tuiles image, libelle centre.
   Toutes les cartes d'un attribut ont ainsi la meme taille, avec ou sans image. */
.helloprint-configurator .inkside-swatches-row:has(.inkside-var-swatch-image) .inkside-var-swatch-label {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-width: 2px;
    border-radius: var(--ink-radius-lg);
}

/* Repli sans :has() : la rangee entiere est deja en grille (bloc @supports plus haut),
   on aligne donc les pastilles texte de la meme facon. */
@supports not (selector(:has(*))) {
    .helloprint-configurator .inkside-swatches-row .inkside-var-swatch-label {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-width: 2px;
        border-radius: var(--ink-radius-lg);
    }
}

/* Le grisage dynamique (.disabled) reste celui de l'InkSide : on ne le redefinit pas. */

/* Mobile : ~3 colonnes, images un peu plus basses. */
@media (max-width: 600px) {
    .helloprint-configurator .inkside-swatches-row:has(.inkside-var-swatch-image),
    .helloprint-configurator .inkside-swatches-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .helloprint-configurator .inkside-var-swatch-image img {
        height: 64px;
    }

    .helloprint-configurator .inkside-var-swatch-image .inkside-var-swatch-caption {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   2. Cartes d'etapes progressives
   Chaque etape est une carte .inkside-section-card toujours ouverte : la carte
   suivante (puis le recapitulatif) n'apparait qu'une fois l'etape courante
   completee, avec une animation d'entree sobre.
   ========================================================================== */

.helloprint-configurator .helloprint-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* La carte d'etape ne garde plus la marge basse de .inkside-section-card
   (l'espacement vient du gap de la pile) et son padding interne est porte par
   l'en-tete et le corps, pas par la carte. */
.helloprint-configurator .helloprint-step.inkside-section-card {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

/* En-tete : pastille d'index a gauche, titre, badge de valeur a droite. */
.helloprint-configurator .helloprint-step-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
}

/* Pastille d'index (1, 2, 3...) ; devient verte avec coche une fois l'etape complete. */
.helloprint-configurator .helloprint-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.helloprint-configurator .helloprint-step.is-complete .helloprint-step-index {
    background: var(--ink-accent);
}

.helloprint-configurator .helloprint-step-check {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

/* Groupe titre + valeur : occupe l'espace central, le badge flotte a droite
   (desktop / tablette). Sur petit mobile ce groupe passe en colonne. */
.helloprint-configurator .helloprint-step-heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Titre : reprend la typo des titres de section InkSide, centre sur la pastille. */
.helloprint-configurator .helloprint-step-title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-text);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

/* Badge de la valeur choisie, a droite de l'en-tete. */
.helloprint-configurator .helloprint-step-badge {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    max-width: 180px;
    padding: 5px 12px;
    border-radius: var(--ink-radius-pill, 999px);
    background: var(--ink-primary-bg);
    color: var(--ink-primary);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.helloprint-configurator .helloprint-step-body-inner {
    padding: 0 24px 22px;
}

/* Chevron de repli : cache sur desktop (les cartes restent ouvertes), affiche
   seulement en mobile / tablette sur les etapes completees repliables. */
.helloprint-configurator .helloprint-step-chevron {
    display: none;
    flex: 0 0 auto;
    margin-left: 4px;
    color: var(--ink-text-faint, #94a3b8);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   3. Responsive mobile / tablette (<= 1024px)
   Une etape COMPLETEE se replie en une ligne recap (pastille + titre + valeur) ;
   l'etape active reste ouverte. Taper une ligne repliee la rouvre pour rectifier.
   Objectif : ne pas transformer la page en scroll infernal quand il y a beaucoup
   de choix. Desktop (> 1024px) : tout reste ouvert, inchange.
   ========================================================================== */
@media (max-width: 1024px) {
    .helloprint-configurator .helloprint-step.is-collapsible .helloprint-step-head {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .helloprint-configurator .helloprint-step.is-collapsible .helloprint-step-chevron {
        display: inline-flex;
    }

    .helloprint-configurator .helloprint-step.is-collapsible.is-open .helloprint-step-chevron {
        transform: rotate(180deg);
        color: var(--ink-primary, #304961);
    }

    /* Corps masque tant que l'etape completee n'est pas rouverte. */
    .helloprint-configurator .helloprint-step.is-collapsible:not(.is-open) .helloprint-step-body-inner {
        display: none;
    }

    /* Le badge de valeur peut prendre plus de place une fois le corps replie. */
    .helloprint-configurator .helloprint-step-badge {
        max-width: 55%;
    }
}

/* Petit mobile : titre et valeur s'empilent dans l'en-tete (titre au-dessus,
   valeur en dessous) pour ne jamais se chevaucher quand les deux sont longs. */
@media (max-width: 600px) {
    .helloprint-configurator .helloprint-step-head {
        padding: 16px 18px;
        gap: 12px;
    }

    .helloprint-configurator .helloprint-step-body-inner {
        padding: 0 18px 18px;
    }

    .helloprint-configurator .helloprint-step-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .helloprint-configurator .helloprint-step-badge {
        margin-left: 0;
        max-width: 100%;
    }
}

/* Etat d'attente des paliers de quantite (le temps de resoudre le variant). */
.helloprint-configurator .helloprint-qty-loading {
    margin: 0;
    color: var(--ink-text-muted);
    font-size: 13.5px;
}

/* Prix HTVA affiche a cote de chaque palier de quantite : total en avant, prix
   unitaire discret en dessous, pour comparer les paliers d'un coup d'oeil. */
.helloprint-configurator .helloprint-qty-price {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink-text);
}

.helloprint-configurator .helloprint-qty-card.active .helloprint-qty-price {
    color: var(--ink-primary);
}

.helloprint-configurator .helloprint-qty-unit {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-text-muted);
}

.helloprint-configurator .helloprint-qty-price-loading {
    color: var(--ink-text-faint, #94a3b8);
    font-weight: 700;
}

/* Le total HTVA et le prix unitaire tiennent TOUJOURS sur une seule ligne (jamais
   coupes sur deux), sans reduction de taille. */
.helloprint-configurator .helloprint-qty-price,
.helloprint-configurator .helloprint-qty-unit {
    white-space: nowrap;
}

/* Pour que le total tienne sur 1 ligne sans rogner, les cartes de quantite sont un
   peu plus larges que les cartes de livraison (montants a 3-4 chiffres + « € HTVA »). */
.helloprint-configurator .inkside-delivery-grid:has(.helloprint-qty-card) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* « Choisir une autre quantite » : bouton discret (pilule pointillee centree)
   sous la grille de paliers, pour ne pas concurrencer le CTA panier. Reutilise
   .inkside-cal-toggle (whiteliste, echappe au reset de boutons) mais on neutralise
   son look « gros bouton fonce ». */
.helloprint-configurator .helloprint-qty-more {
    display: block !important;
    width: fit-content !important;
    margin: 14px auto 0 !important;
    padding: 8px 18px !important;
    background: transparent !important;
    border: 1.5px dashed var(--ink-border, #dfe3e8) !important;
    border-radius: var(--ink-radius-pill, 999px) !important;
    color: var(--ink-primary, #304961) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color var(--ink-transition, 0.2s ease), background var(--ink-transition, 0.2s ease);
}

.helloprint-configurator .helloprint-qty-more:hover {
    border-color: var(--ink-primary, #304961) !important;
    background: var(--ink-primary-bg, rgba(48, 73, 97, 0.04)) !important;
}

/* Panneau de saisie d'une autre quantite. */
.helloprint-configurator .helloprint-qty-custom {
    margin-top: 12px;
}

.helloprint-configurator .helloprint-qty-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ink-text-muted, #5b6b7d);
}

.helloprint-configurator .helloprint-qty-custom-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: var(--ink-radius-md, 10px);
    background: var(--ink-primary-bg, rgba(48, 73, 97, 0.04));
    font-size: 13.5px;
    color: var(--ink-text-muted, #5b6b7d);
}

.helloprint-configurator .helloprint-qty-custom-price strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink-primary, #304961);
}

/* Impact prix d'un niveau de livraison : ligne dediee (pas de badge flottant qui
   chevaucherait le nom). « + X € » pour les plus rapides, « Inclus » pour le base. */
.helloprint-configurator .helloprint-deliv-surcharge {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink-primary, #304961);
}

/* Recalcul du prix en cours : l'ancien montant reste lisible, juste estompe
   (recapitulatif et barre sticky, cette derniere vit hors du configurateur). */
.helloprint-configurator .is-refreshing,
#helloprint-sticky-bar .is-refreshing {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* La modal de confirmation reutilise le composant du Configurator InkSide
   (classes .inkside-modal-*, deja stylees et chargees via 'inkside-front').
   On n'ajoute que la liste des ajustements : une ligne par option touchee,
   libelle en petit puis « ancienne -> nouvelle » (ancienne barree), scannable
   au premier regard. Montee sur <body>, donc styles globaux (prefixe hp-reco). */
/* Modal d'ajustement plus large que le confirm standard : les couples
   « ancienne -> nouvelle valeur » tiennent sur une seule ligne (jamais l'arrow
   orpheline en bas). Cible uniquement notre overlay, jamais le composant partage.
   Bornee au viewport pour rester correcte sur mobile. */
.hp-reco-overlay .inkside-modal {
    max-width: min(500px, calc(100vw - 28px));
}

.hp-reco-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    text-align: left;
}

.hp-reco-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-radius: var(--ink-radius-md, 10px);
    background: var(--ink-bg-subtle, #eef1f7);
}

.hp-reco-attr {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-text-muted, #5b6b7d);
}

.hp-reco-change {
    display: flex;
    align-items: baseline;
    gap: 4px 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
    line-height: 1.35;
}

/* Arrow + nouvelle valeur = un bloc indivisible : l'arrow ne se retrouve
   jamais seule en fin de ligne. */
.hp-reco-newval {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.hp-reco-from {
    color: var(--ink-text-muted, #5b6b7d);
    text-decoration: line-through;
}

.hp-reco-arrow {
    color: var(--ink-primary, #304961);
    font-weight: 800;
    flex-shrink: 0;
}

.hp-reco-to {
    color: var(--ink-text, #1a2535);
    font-weight: 700;
}

.hp-reco-to.hp-reco-muted {
    color: var(--ink-text-muted, #5b6b7d);
    font-weight: 600;
    font-style: italic;
}

/* Apparition d'une nouvelle carte : fondu + legere montee. */
@keyframes helloprint-step-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.helloprint-configurator .helloprint-step.is-new {
    animation: helloprint-step-in 0.35s ease both;
}

/* Le corps reutilise des blocs InkSide qui portent leur propre marge basse ;
   on la neutralise pour ne pas doubler l'espacement sous le dernier element. */
.helloprint-configurator .helloprint-step-body-inner > .inkside-variation-swatches:last-child,
.helloprint-configurator .helloprint-step-body-inner > .inkside-option-field-front:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .helloprint-configurator .helloprint-step.is-new {
        animation: none;
    }
}

/* Formats standard (produits a la surface / baches) : grille de boutons de format
   pre-rempli + bouton « sur mesure ». Les cartes reutilisent .inkside-delivery-card. */
.helloprint-configurator .helloprint-dim-presets {
    margin-bottom: 14px;
}

.helloprint-configurator .helloprint-dim-presets-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-text-muted, #5b6b7d);
    margin-bottom: 8px;
}

.helloprint-configurator .helloprint-dim-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

/* Carte de format autonome (ne depend ni du reset de boutons du theme ni de inkside-front).
   Toutes les cartes ont la MEME taille et le texte centre, pour une grille propre. */
.helloprint-configurator .helloprint-dim-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 12px 14px;
    min-height: 66px;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid var(--ink-border, #d7dde6);
    border-radius: var(--ink-radius-md, 10px);
    background: var(--ink-surface, #fff);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.helloprint-configurator .helloprint-dim-preset:hover {
    border-color: var(--ink-primary, #304961);
}

.helloprint-configurator .helloprint-dim-preset:focus-visible {
    outline: 2px solid var(--ink-primary, #304961);
    outline-offset: 2px;
}

.helloprint-configurator .helloprint-dim-preset.active {
    border-color: var(--ink-primary, #304961);
    background: var(--ink-bg-subtle, #eef1f7);
    box-shadow: inset 0 0 0 1px var(--ink-primary, #304961);
}

.helloprint-configurator .helloprint-dim-preset-label {
    font-weight: 700;
    color: var(--ink-text, #1a2535);
    line-height: 1.25;
}

.helloprint-configurator .helloprint-dim-preset-size {
    font-size: 12.5px;
    color: var(--ink-text-muted, #5b6b7d);
}

/* Format avec image : vignette au-dessus du libelle, carte un peu plus haute. */
.helloprint-configurator .helloprint-dim-preset.has-img {
    min-height: 100px;
}

.helloprint-configurator .helloprint-dim-preset-img {
    width: 100%;
    max-width: 92px;
    height: 46px;
    object-fit: contain;
    margin-bottom: 2px;
}

/* La coche (pastille verte + ✓ blanc, bas-droite sur .active) est stylee par inkside-front
   (.inkside-delivery-card .inkside-tech-check), identique aux cartes textile/objets promo :
   on ne la surcharge PAS ici (sinon ✓ vert sur pastille verte = invisible). */

.helloprint-configurator .helloprint-dim-custom {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    font-weight: 600;
}

/* ----------------------------------------------------------------------
 * Indice de pre-selection : petit onglet (facon onglet de dossier) pose sur le bord
 * haut de la barre sticky. Discret ; signale un prereglage + invite a defiler. Suit
 * la visibilite de la barre et disparait definitivement une fois decouvert/modifie.
 * -------------------------------------------------------------------- */
.helloprint-sticky-tab {
    position: absolute;
    left: 20px;
    bottom: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 40px);
    padding: 6px 13px 9px;
    background: var(--ink-primary, #304961);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, .14);
}
.helloprint-sticky-tab-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ink-accent, #61ce70);
}
.helloprint-sticky-tab-chevron {
    display: inline-flex;
    flex-shrink: 0;
    opacity: .85;
    animation: hp-tab-bounce 1.6s ease-in-out infinite;
}
@keyframes hp-tab-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .helloprint-sticky-tab-chevron {
        animation: none;
    }
}
/* La barre doit laisser deborder l'onglet au-dessus d'elle (sinon clip par le radius). */
.inkside-sticky-bar {
    overflow: visible;
}

/* Valeur recommandee (= valeur par defaut du produit) : SEUL le badge la marque, pas de bordure
   (sinon deux cartes surlignees : la selection en bleu + la recommandee en vert = confusion). */
.helloprint-configurator .helloprint-reco-badge {
    display: block;
    margin-top: 8px;
    padding: 3px 6px;
    background: var(--ink-accent, #61ce70);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.3;
    border-radius: 4px;
    text-align: center;
}

/* ----------------------------------------------------------------------
 * Gabarits d'impression : liste telechargeable rendue sous la galerie produit.
 * Rendu serveur, HORS .helloprint-configurator : styles autonomes (tokens en repli).
 * -------------------------------------------------------------------- */
.helloprint-templates {
    margin: 22px 0 8px;
    font-family: inherit;
    clear: both;
    position: relative;
    z-index: 2;
    width: 100%;
}
/* Rattache dans la galerie (colonne gauche) : se cale sous la photo, largeur de la colonne. */
.woocommerce-product-gallery > .helloprint-templates,
.ast-single-product-thumbnails > .helloprint-templates {
    margin-top: 18px;
}
.helloprint-templates-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-primary, #304961);
    margin-bottom: 12px;
}
.helloprint-templates-head .helloprint-template-head-icon {
    display: inline-flex;
    color: var(--ink-accent, #61ce70);
}
.helloprint-templates-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.helloprint-template-item {
    margin: 0;
    padding: 0;
}
.helloprint-template-item::before {
    content: none; /* neutralise les puces de theme sur les <li> */
}
.helloprint-template-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ink-border-light, #e6e8ec);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-primary, #304961);
    text-decoration: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.helloprint-template-item > a:hover,
.helloprint-template-item > a:focus-visible {
    border-color: var(--ink-accent, #61ce70);
    box-shadow: 0 4px 14px rgba(48, 73, 97, .1);
}
.helloprint-template-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #d0362f; /* rappel PDF, discret */
}
.helloprint-template-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.helloprint-template-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.helloprint-template-meta {
    font-size: 12px;
    color: var(--ink-text-muted, #7a8290);
    margin-top: 2px;
}
.helloprint-template-dl {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ink-text-muted, #7a8290);
    transition: color .18s ease, transform .18s ease;
}
.helloprint-template-item > a:hover .helloprint-template-dl {
    color: var(--ink-accent, #61ce70);
    transform: translateY(1px);
}
/* Mini-pagination des gabarits (5 par page), dans la DA InkSide. */
.helloprint-templates-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}
.helloprint-templates-prev,
.helloprint-templates-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--ink-border-light, #e6e8ec);
    border-radius: 8px;
    background: #fff;
    color: var(--ink-primary, #304961);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.helloprint-templates-prev:hover:not(:disabled),
.helloprint-templates-next:hover:not(:disabled) {
    border-color: var(--ink-accent, #61ce70);
    color: var(--ink-accent, #61ce70);
    background: #fff;
}
.helloprint-templates-prev:disabled,
.helloprint-templates-next:disabled {
    opacity: .4;
    cursor: default;
}
.helloprint-templates-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-text-muted, #7a8290);
    min-width: 46px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}