/* ==========================================================================
   PAPETERIE SÉNÉGAL — COMPOSANTS
   Boutons · badges · cartes · carte produit · formulaires · alertes ·
   états (vide / chargement / erreur) · pagination · toasts · fil d'Ariane ·
   sélecteur de quantité · pastilles de filtre.
   Chaque composant est autonome et réutilisable sur toutes les pages.
   ========================================================================== */

/* ══ BOUTONS ═══════════════════════════════════════════════════════════════
   Un seul socle `.btn-ue` + variantes. Tailles : sm / (défaut) / lg / block. */

.btn-ue {
    --btn-bg: var(--primary);
    --btn-fg: #fff;
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.6875rem var(--sp-5);
    min-height: 44px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease);
}
.btn-ue:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn-ue:active { transform: translateY(0); }

/* Variantes */
.btn-ue--primary { --btn-bg: var(--primary); box-shadow: var(--shadow-xs); }
.btn-ue--primary:hover { --btn-bg: var(--primary-dark); box-shadow: var(--shadow-md); }

.btn-ue--dark { --btn-bg: var(--secondary); }
.btn-ue--dark:hover { --btn-bg: var(--secondary-soft); box-shadow: var(--shadow-md); }

.btn-ue--outline {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
}
.btn-ue--outline:hover {
    --btn-bg: var(--surface);
    --btn-fg: var(--primary);
    --btn-bd: var(--primary);
}

.btn-ue--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text-secondary);
    --btn-bd: transparent;
}
.btn-ue--ghost:hover { --btn-bg: var(--surface-alt); --btn-fg: var(--text); }

.btn-ue--light {
    --btn-bg: #fff;
    --btn-fg: var(--primary-dark);
}
.btn-ue--light:hover { --btn-bg: var(--primary-50); --btn-fg: var(--primary-dark); }

.btn-ue--on-dark {
    --btn-bg: transparent;
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.45);
}
.btn-ue--on-dark:hover {
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.7);
}

.btn-ue--whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #06371c; }
.btn-ue--whatsapp:hover {
    --btn-bg: var(--whatsapp-dark);
    --btn-fg: #fff;
    box-shadow: var(--shadow-md);
}

.btn-ue--danger-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--danger);
    --btn-bd: var(--border);
}
.btn-ue--danger-ghost:hover {
    --btn-bg: var(--danger-soft);
    --btn-fg: var(--danger);
    --btn-bd: var(--danger);
}

/* Tailles */
.btn-ue--sm { padding: 0.5rem var(--sp-3); min-height: 38px; font-size: var(--fs-xs); }
.btn-ue--lg { padding: 0.9375rem var(--sp-6); min-height: 52px; font-size: 1rem; }
.btn-ue--block { width: 100%; }
.btn-ue--pill { border-radius: var(--r-full); }

/* États */
.btn-ue:disabled,
.btn-ue.is-disabled,
.btn-ue[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
    pointer-events: none;
}
.btn-ue.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn-ue.is-loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ue-spin 700ms linear infinite;
}
.btn-ue.is-success { --btn-bg: var(--success) !important; --btn-fg: #fff !important; }

@keyframes ue-spin { to { transform: rotate(360deg); } }

/* Bouton icône seule (fermeture, favoris, actions de ligne) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.icon-btn--danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Harmonisation des boutons Bootstrap résiduels (contenus éditoriaux) */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-font-weight: var(--fw-semi);
}
.btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-alt);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--border-strong);
}

/* ══ BADGES & PASTILLES ════════════════════════════════════════════════════ */

.badge-ue {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--r-full);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    line-height: 1.4;
    white-space: nowrap;
}
.badge-ue--primary { background: var(--primary-50);   color: var(--primary-dark); }
.badge-ue--accent  { background: var(--accent-soft);  color: var(--accent-dark); }
.badge-ue--success { background: var(--success-soft); color: var(--success); }
.badge-ue--warning { background: var(--warning-soft); color: var(--warning); }
.badge-ue--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-ue--info    { background: var(--info-soft);    color: var(--info); }
.badge-ue--neutral { background: var(--surface-alt);  color: var(--text-secondary); }
.badge-ue--glass {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Pastille de filtre actif, retirable */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--r-full);
    color: var(--primary-dark);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}
.filter-chip__label { color: var(--primary-dark); }
.filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-200);
    color: var(--primary-900);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}
.filter-chip__remove:hover { background: var(--primary); color: #fff; }

/* ══ CARTES ════════════════════════════════════════════════════════════════ */

.card-ue {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.card-ue--flat { box-shadow: none; }
.card-ue--raised { box-shadow: var(--shadow-md); }
.card-ue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.card-ue__title {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--fw-semi);
    font-family: var(--font-display);
}
.card-ue__body { padding: var(--sp-5); }
.card-ue__foot {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    border-radius: 0 0 var(--r-md) var(--r-md);
}

/* Élément collant (récapitulatif panier, encart d'achat, filtres) */
.sticky-panel { position: sticky; top: var(--header-offset); }
@media (max-width: 991.98px) { .sticky-panel { position: static; } }

/* ══ CARTE PRODUIT ═════════════════════════════════════════════════════════
   Structure figée pour un alignement parfait en grille :
   média (ratio constant) → catégorie → titre (2 lignes) → prix → action. */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--sp-4);
}
@media (min-width: 576px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 1200px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
}
.product-grid--wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (min-width: 992px) {
    .product-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-base) var(--ease);
}
.pcard:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}
.pcard:focus-within {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* Média : ratio constant, l'image ne déborde et ne se déforme jamais. */
.pcard__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.pcard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--sp-4);
    transition: transform var(--t-slow) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }

/* Repli visuel professionnel quand aucune image n'est disponible — y compris
   lorsqu'une URL distante renvoie une erreur (l'attribut `hidden` est levé par
   le gestionnaire onerror de l'image). */
.pcard__placeholder[hidden] { display: none; }
.pcard__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
    background:
        linear-gradient(135deg, var(--surface-alt) 0%, var(--surface-sunken) 100%);
    color: var(--border-strong);
    font-size: 2.5rem;
}
.pcard__placeholder-logo {
    width: 45%;
    height: 45%;
    object-fit: contain;
    border-radius: var(--r-sm);
    opacity: 0.85;
}
.pcard__badges {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    right: var(--sp-3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    pointer-events: none;
    z-index: 2;
}

.pcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--sp-2);
    padding: var(--sp-4);
}
.pcard__cat {
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pcard__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: 0;
    color: var(--text);
    /* Deux lignes garanties : toutes les cartes gardent la même hauteur. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.pcard__title a { color: inherit; }
.pcard:hover .pcard__title a { color: var(--primary); }

.pcard__meta {
    font-size: var(--fs-label);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
}
.pcard__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pcard__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--sp-2);
}
.pcard__price {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--fw-bold);
    color: var(--text);
    letter-spacing: -0.02em;
}
.pcard__price-note {
    font-size: var(--fs-label);
    color: var(--text-muted);
}
/* Produit sans prix en base : on l'annonce clairement au lieu d'un « 0 ». */
.pcard__quote {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--info);
}

.pcard__cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 42px;
    margin-top: var(--sp-3);
    padding: 0.625rem var(--sp-3);
    border: 1px solid var(--primary);
    border-radius: var(--r-sm);
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.pcard__cart:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.pcard__cart.is-success { background: var(--success); border-color: var(--success); }

/* Variante compacte (produits similaires, colonnes étroites) */
.pcard--compact .pcard__body { padding: var(--sp-3); gap: var(--sp-1); }
.pcard--compact .pcard__title { font-size: var(--fs-xs); }
.pcard--compact .pcard__price { font-size: var(--fs-sm); }
.pcard--compact .pcard__cart { min-height: 38px; margin-top: var(--sp-2); }

/* ══ FORMULAIRES ═══════════════════════════════════════════════════════════ */

.field { margin-bottom: var(--sp-4); }
.field__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    color: var(--text-secondary);
}
.field__req { color: var(--danger); margin-left: 2px; }
.field__opt { color: var(--text-muted); font-weight: var(--fw-normal); }
.field__hint {
    margin-top: 0.375rem;
    font-size: var(--fs-label);
    color: var(--text-muted);
}
.field__error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--danger);
}

.input-ue,
.select-ue,
.textarea-ue {
    display: block;
    width: 100%;
    padding: 0.6875rem var(--sp-4);
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.4;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
    appearance: none;
    -webkit-appearance: none;
}
.textarea-ue { min-height: 96px; resize: vertical; }
.input-ue::placeholder, .textarea-ue::placeholder { color: var(--text-muted); }
.input-ue:hover, .select-ue:hover, .textarea-ue:hover { border-color: var(--text-muted); }
.input-ue:focus, .select-ue:focus, .textarea-ue:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
.input-ue[aria-invalid="true"], .is-invalid-ue {
    border-color: var(--danger);
    background: var(--danger-soft);
}
.input-ue:disabled, .select-ue:disabled, .textarea-ue:disabled {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Flèche du select dessinée en CSS (pas d'image, pas de dépendance) */
.select-ue {
    padding-right: var(--sp-10);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 2px),
        calc(100% - 14px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Champ avec icône préfixée (recherche, téléphone) */
.input-group-ue { position: relative; display: flex; align-items: center; }
.input-group-ue > .input-ue { padding-left: var(--sp-10); }
.input-group-ue__icon {
    position: absolute;
    left: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    pointer-events: none;
}

/* Radios / cases personnalisées, cible tactile confortable */
.choice {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.4375rem var(--sp-2);
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.choice:hover { background: var(--surface-alt); color: var(--text); }
.choice input { accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.choice__count { margin-left: auto; font-size: var(--fs-label); color: var(--text-muted); }
.choice input:checked ~ .choice__text { color: var(--primary-dark); font-weight: var(--fw-semi); }

/* Harmonisation des contrôles Bootstrap résiduels */
.form-control, .form-select {
    border-color: var(--border-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring);
}

/* ══ SÉLECTEUR DE QUANTITÉ ═════════════════════════════════════════════════ */

.qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
}
.qty:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 42px;
    border: 0;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.qty__btn:hover:not(:disabled) { background: var(--primary-50); color: var(--primary); }
.qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qty__input {
    width: 48px;
    border: 0;
    border-inline: 1px solid var(--border);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text);
    background: var(--surface);
    -moz-appearance: textfield;
    appearance: textfield;
}
.qty__input:focus { outline: none; }
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ══ ALERTES ═══════════════════════════════════════════════════════════════ */

.alert-ue {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}
.alert-ue i { flex-shrink: 0; margin-top: 2px; font-size: 1rem; }
.alert-ue__title { font-weight: var(--fw-semi); margin-bottom: 2px; }
.alert-ue--info    { background: var(--info-soft);    border-color: #BAE6FD; color: #0C4A6E; }
.alert-ue--success { background: var(--success-soft); border-color: #A7F3D0; color: #065F46; }
.alert-ue--warning { background: var(--warning-soft); border-color: #FDE68A; color: #78350F; }
.alert-ue--danger  { background: var(--danger-soft);  border-color: #FECACA; color: #991B1B; }
.alert-ue--neutral { background: var(--surface-alt);  border-color: var(--border); color: var(--text-secondary); }
.alert-ue--whatsapp { background: var(--whatsapp-soft); border-color: #A7F3D0; color: #065F46; }
.alert-ue i.text-whatsapp { color: var(--whatsapp-dark); }

/* ══ ÉTAT VIDE ═════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-12) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px; height: 76px;
    margin-bottom: var(--sp-5);
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--border-strong);
    font-size: 2rem;
}
.empty-state__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.empty-state__text {
    max-width: 46ch;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
}
.empty-state__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* ══ CHARGEMENT (SKELETON) ═════════════════════════════════════════════════ */

.skeleton {
    background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-sunken) 50%, var(--surface-alt) 75%);
    background-size: 200% 100%;
    animation: ue-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-xs);
}
@keyframes ue-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--surface-alt); }
}
.skel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}
.skel-card__media { aspect-ratio: 1 / 1; }
.skel-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.skel-line { height: 11px; }
.skel-line--sm { width: 40%; }
.skel-line--md { width: 85%; }
.skel-line--lg { width: 60%; height: 15px; }
.skel-line--btn { height: 42px; border-radius: var(--r-sm); margin-top: var(--sp-2); }

/* ══ PAGINATION ════════════════════════════════════════════════════════════ */

.pager { margin-top: var(--sp-8); }
.pager__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0;
    margin: 0 0 var(--sp-3);
    list-style: none;
}
.pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    transition: all var(--t-fast) var(--ease);
}
.pager__link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-50);
}
.pager__link[aria-current="page"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    cursor: default;
}
.pager__gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 28px; height: 42px;
    color: var(--text-muted);
}
.pager__status {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
}

/* ══ FIL D'ARIANE ══════════════════════════════════════════════════════════ */

.crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0;
    margin: 0 0 var(--sp-4);
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.crumbs li { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.crumbs li + li::before {
    content: '\f105';               /* chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--border-strong);
    font-size: 0.6875rem;
}
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current="page"] {
    color: var(--text);
    font-weight: var(--fw-medium);
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══ TOASTS ════════════════════════════════════════════════════════════════ */

.toast-stack {
    position: fixed;
    top: calc(var(--header-offset) + 8px);
    right: var(--sp-4);
    left: auto;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(360px, calc(100vw - 2 * var(--sp-4)));
    pointer-events: none;
}
.toast-ue {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
    color: var(--text);
    pointer-events: auto;
    animation: ue-toast-in var(--t-base) var(--ease);
}
.toast-ue.is-leaving { animation: ue-toast-out var(--t-base) var(--ease) forwards; }
.toast-ue__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--success-soft);
    color: var(--success);
    font-size: var(--fs-xs);
}
.toast-ue__body { flex: 1; min-width: 0; line-height: var(--lh-snug); }
.toast-ue__close {
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--sp-1);
    line-height: 1;
}
.toast-ue__close:hover { color: var(--text); }
.toast-ue--error { border-left-color: var(--danger); }
.toast-ue--error .toast-ue__icon { background: var(--danger-soft); color: var(--danger); }

@keyframes ue-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ue-toast-out {
    to { opacity: 0; transform: translateX(16px); }
}

/* ══ ARGUMENTS DE CONFIANCE ════════════════════════════════════════════════ */

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-4);
}
.trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.trust-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.trust-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--primary-50);
    color: var(--primary);
    font-size: 1.0625rem;
}
.trust-item__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--text);
    margin-bottom: 2px;
}
.trust-item__text { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.trust-item--accent .trust-item__icon { background: var(--accent-soft); color: var(--accent-dark); }
.trust-item--success .trust-item__icon { background: var(--success-soft); color: var(--success); }
.trust-item--whatsapp .trust-item__icon { background: var(--whatsapp-soft); color: var(--whatsapp-dark); }

/* Version compacte en ligne (bandeau sous l'en-tête) */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.trust-strip__item i { color: var(--primary); font-size: var(--fs-sm); }
.trust-strip__item strong { color: var(--text); font-weight: var(--fw-semi); }

/* ══ BANDE MARQUES ═════════════════════════════════════════════════════════ */

.brand-strip { }
.brand-logos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.375rem var(--sp-3) 0.375rem 0.375rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    transition: border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.brand-chip:hover {
    color: var(--primary);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-sm);
}
.brand-chip img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border);
    padding: 2px;
}