/* =====================================================================
   S84 (sub-plan B-S84) — Palette Nemba Onyumbe Vitrine Phase 1.5 RDC.
   Source unique de vérité pour toutes les couleurs Vitrine. Toute modification
   ultérieure se fait à un seul endroit (anti-spaghetti, user preferences Thierry).
   80 codes HEX exacts validés Stitch ("Catalogue - Stitch + Accent RDC (Desktop)").
   Cf. ADR-0027 Charte graphique Vitrine Phase 1.5 RDC.
   ===================================================================== */
:root {
    /* ── Couleurs structurelles globales (Stitch palette) ─────────────── */
    --nemba-bg-page:               #f8f9fa;    /* body background */
    --nemba-hero-bg:               #0f172a;    /* S130 - fond hero sombre slate-900 (= bg-slate-900 Stitch), tranche avec l'appbar bleu */
    --nemba-section-alt-bg:        #f1f5f9;    /* S130 - gris clair slate-100 : bandes de sections alternees (Nouveautes / Editions Limitees) */
    --nemba-text-primary:          #0f172a;    /* titres + texte principal slate-900 */
    --nemba-text-secondary:        #64748b;    /* paragraphes, méta slate-500 */
    --nemba-text-tertiary:         #94a3b8;    /* icônes inline + texte tertiaire slate-400 */

    /* ── Palette Primary (Stitch bleu profond RDC) ────────────────────── */
    --nemba-primary:               #003d9b;    /* primary partout (header, prix, CTA bordure) */
    --nemba-primary-dark:          #002d72;    /* hover variante (bouton Apply Filters) */
    --nemba-primary-light:         #eff6ff;    /* fond bouton taille sélectionné M (blue-50) */

    /* ── Accents RDC (drapeau jaune + rouge subliminal) ───────────────── */
    --nemba-accent-amber:          #fbbf24;    /* pastille panier + étoiles + soulignement nav actif */
    --nemba-accent-amber-progress: #f59e0b;    /* progress bar 50-89% (mi-chemin) amber-500 */
    --nemba-accent-emerald:        #10b981;    /* "Almost confirmed!" + état succès emerald-500 */

    /* ── S154 (ADR-0038 Volet 4) — Palette badges par TOKEN (9 tokens fermés, D-S152-E) ──
       Chaque token = quartet bg (tint clair) / text (lisible) / border / active (saturé). Alignés sur
       Badge.AllowedColorTokens (Domain) + BadgePresentation.ColorPalette (Backoffice). Consommés par
       .nemba-badge-marker--{token} et .nemba-chip-filter--{token}. Ajouter une couleur = 1 token
       Domain + 1 entrée Backoffice + 1 quartet ici + 2 classes ci-dessous. */
    --nemba-badge-emerald-bg:  #d1fae5;  --nemba-badge-emerald-text:  #047857;  --nemba-badge-emerald-border:  #a7f3d0;  --nemba-badge-emerald-active:  #10b981;
    --nemba-badge-amber-bg:    #fef3c7;  --nemba-badge-amber-text:    #b45309;  --nemba-badge-amber-border:    #fde68a;  --nemba-badge-amber-active:    #f59e0b;
    --nemba-badge-blue-bg:     #dbeafe;  --nemba-badge-blue-text:     #1d4ed8;  --nemba-badge-blue-border:     #bfdbfe;  --nemba-badge-blue-active:     #3b82f6;
    --nemba-badge-rose-bg:     #ffe4e6;  --nemba-badge-rose-text:     #be123c;  --nemba-badge-rose-border:     #fecdd3;  --nemba-badge-rose-active:     #f43f5e;
    --nemba-badge-slate-bg:    #f1f5f9;  --nemba-badge-slate-text:    #334155;  --nemba-badge-slate-border:    #e2e8f0;  --nemba-badge-slate-active:    #64748b;
    --nemba-badge-violet-bg:   #ede9fe;  --nemba-badge-violet-text:   #6d28d9;  --nemba-badge-violet-border:   #ddd6fe;  --nemba-badge-violet-active:   #8b5cf6;
    --nemba-badge-sky-bg:      #e0f2fe;  --nemba-badge-sky-text:      #0369a1;  --nemba-badge-sky-border:      #bae6fd;  --nemba-badge-sky-active:      #0ea5e9;
    --nemba-badge-gold-bg:     #fef9c3;  --nemba-badge-gold-text:     #a16207;  --nemba-badge-gold-border:     #fef08a;  --nemba-badge-gold-active:     #eab308;
    --nemba-badge-red-bg:      #fee2e2;  --nemba-badge-red-text:      #b91c1c;  --nemba-badge-red-border:      #fecaca;  --nemba-badge-red-active:      #ef4444;

    /* ── Surface (cartes, sidebar, dropdown) ──────────────────────────── */
    --nemba-surface-card:          #ffffff;
    --nemba-surface-border:        #e2e8f0;
    --nemba-surface-image-fallback:#f1f5f9;
    --nemba-surface-shadow-hover:  rgba(0, 0, 0, 0.05);

    /* ── Wishlist heart (cœur top-right card) ────────────────────────── */
    --nemba-heart-bg:        rgba(255, 255, 255, 0.8);
    --nemba-heart-rest:      #94a3b8;
    --nemba-heart-hover:     #ef4444;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* S130 - garde-fou full-bleed hero : empeche la mini scrollbar horizontale parasite
       induite par margin: calc(50% - 50vw) (largeur de l'ascenseur vertical). */
    overflow-x: hidden;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Form loading spinner — utilisé par js/form-loading.js
   Ajoute un mini-spinner blanc qui tourne au centre du bouton submit pendant
   la soumission d'un <form method="post">. Compatible MudButton et MudIconButton
   car MudBlazor rend un <button> standard sous le capot.
   ───────────────────────────────────────────────────────────────────────────── */

.is-loading {
    position: relative !important;
    /* Le contenu original (texte, icône) devient invisible mais conserve sa place
       pour que la taille du bouton ne change pas pendant le chargement. */
    color: transparent !important;
    pointer-events: none;
    opacity: 0.85;
}

.is-loading > * {
    visibility: hidden;
}

.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1em;
    height: 1.1em;
    margin-top: -0.55em;
    margin-left: -0.55em;
    border: 2px solid currentColor;
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    visibility: visible;
    animation: nemba-spin 0.7s linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   SweetAlert2 toast positioning — décale les toasts en dessous du MudAppBar
   pour qu'ils ne soient plus masqués par la barre du haut (hauteur ~64px sur
   desktop, 56px sur mobile). z-index relevé à 1300 pour passer au-dessus du
   MudAppBar (z-index par défaut MudBlazor: ~1100, AppBar: ~1300, mais SA2
   container par défaut: 1060 → d'où le masquage observé en S33).
   ───────────────────────────────────────────────────────────────────────────── */

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top {
    /* Pousse les toasts sous le MudAppBar fixé (~64px) + marge confort 16px. */
    top: 80px !important;
    z-index: 2000 !important;
}

@media (max-width: 600px) {
    .swal2-container.swal2-top-end,
    .swal2-container.swal2-top-start,
    .swal2-container.swal2-top {
        /* AppBar mobile MudBlazor mesure ~56px en small viewport. */
        top: 72px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer Vitrine — utilisé par Components/Layout/Footer.razor
   Bandeau gris clair en bas de toutes les pages, séparé du contenu principal
   par une fine bordure supérieure. Pas de sticky bottom Phase 1 — le footer
   suit naturellement le contenu (remonte si la page est courte).
   ───────────────────────────────────────────────────────────────────────────── */

.nemba-footer {
    /* S84 (sub-plan B-S84 P3d) — Migration #f5f5f5/#e0e0e0 → palette Stitch RDC. */
    background-color: var(--nemba-bg-page);
    border-top: 1px solid var(--nemba-surface-border);
    margin-top: 4rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Boutons d'action panier (+/-, supprimer)
   Micro-interaction au survol — grossit légèrement + ombre douce. Donne
   un retour tactile satisfaisant et signale clairement la cliquabilité.
   ───────────────────────────────────────────────────────────────────────────── */

.nemba-cart-action {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out !important;
}

.nemba-cart-action:hover:not(:disabled) {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.nemba-cart-action:active:not(:disabled) {
    transform: scale(0.95) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bouton CTA principal "Ajouter au panier" (page détail produit)
   Pulse subtil au repos pour attirer l'œil. Au hover, l'animation s'arrête
   et le bouton se lève légèrement — signal qu'il est cliquable. Désactivé
   pour les utilisateurs qui préfèrent les animations réduites (a11y).
   ───────────────────────────────────────────────────────────────────────────── */

.nemba-cta-pulse {
    animation: nemba-pulse 2.4s ease-in-out infinite;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out !important;
}

.nemba-cta-pulse:hover:not(:disabled) {
    animation: none;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.nemba-cta-pulse:disabled {
    animation: none;
}

@keyframes nemba-pulse {
    /* S84 — migration #594ae2 (violet MudBlazor) → #003d9b (bleu Stitch RDC). */
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 61, 155, 0.45);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 61, 155, 0);
    }
}

/* Respecte la préférence système "réduire les animations" — a11y */
@media (prefers-reduced-motion: reduce) {
    .nemba-cart-action,
    .nemba-cta-pulse {
        animation: none !important;
        transition: none !important;
    }

    .nemba-cart-action:hover:not(:disabled),
    .nemba-cta-pulse:hover:not(:disabled) {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Countdown chip dynamique (S43 — Q-S42-3)
   Utilisé par js/countdown.js sur la page MyReservations.razor (statut Pending).
   Le span data-countdown porte la classe .nemba-countdown-chip qui lui donne
   l'apparence d'un MudChip Medium (padding + border-radius). countdown.js ajoute
   ensuite dynamiquement la classe color-coded selon le temps restant :
     - .nemba-countdown-green       (>2h restant)         "tu as le temps"
     - .nemba-countdown-orange      (30min..2h)           "anticipe"
     - .nemba-countdown-red         (5min..30min)         "presse-toi"
     - .nemba-countdown-red-pulse   (<5min)               "urgent" + animation
   Les couleurs utilisent les variables CSS MudBlazor pour rester cohérentes
   avec le thème global (palette Success/Warning/Error). Fallback hex au cas
   où les variables ne sont pas chargées (rendu hors MudThemeProvider).
   A11y : animation pulse désactivée si prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────────── */

.nemba-countdown-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: var(--mud-palette-action-disabled, #9e9e9e);
    transition: background-color 0.3s ease;
}

.nemba-countdown-chip.nemba-countdown-green {
    background-color: var(--mud-palette-success, #4caf50);
}

.nemba-countdown-chip.nemba-countdown-orange {
    background-color: var(--mud-palette-warning, #ff9800);
}

.nemba-countdown-chip.nemba-countdown-red,
.nemba-countdown-chip.nemba-countdown-red-pulse {
    background-color: var(--mud-palette-error, #f44336);
}

.nemba-countdown-chip.nemba-countdown-red-pulse {
    animation: nemba-countdown-pulse 1s ease-in-out infinite;
}

@keyframes nemba-countdown-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nemba-countdown-chip {
        transition: none !important;
    }
    .nemba-countdown-chip.nemba-countdown-red-pulse {
        animation: none !important;
    }
}

/* ────────────────────────────────────────────────────────────────
   S62b (Vague D ADR-0024) — MarketSelector composant Static SSR.
   Pattern AliExpress : bouton compact + popup form avec 3 selects.
   Style discret, cohabitation MudBlazor MainLayout.
   ────────────────────────────────────────────────────────────────── */

.market-selector {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.market-selector-trigger {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: inherit;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: background 120ms ease;
}

.market-selector-trigger:hover,
.market-selector-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.market-selector-flag {
    font-size: 1.1em;
}

.market-selector-summary {
    font-size: 0.9em;
}

.market-selector-chevron {
    font-size: 0.7em;
    opacity: 0.7;
}

.market-selector-popup {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 16px;
    min-width: 260px;
    z-index: 1300;
}

.market-selector-popup-title {
    margin: 0 0 12px 0;
    font-size: 1em;
    font-weight: 600;
}

.market-selector-popup label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.market-selector-popup select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.market-selector-submit {
    margin-top: 16px;
    width: 100%;
    padding: 10px;
    background: var(--nemba-primary);   /* S84 — bleu Stitch RDC (était #000 noir anti-pattern brand) */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
}

.market-selector-submit:hover,
.market-selector-submit:focus-visible {
    background: var(--nemba-primary-dark);
    outline: none;
}

/* ────────────────────────────────────────────────────────────────
   S62b (Vague D ADR-0024 — pivot 🅲) — PreferencesPanel Static SSR.
   3 selects HTML natifs + bouton Enregistrer dans une carte MudPaper.
   Style discret aligné sur le thème MudBlazor sans dépendre des composants
   MudSelect (qui nécessitent un PopoverProvider Interactive Server).
   ──────────────────────────────────────────────────────────────── */

.preferences-panel-form {
    display: flex;
    flex-direction: column;
}

.preferences-panel-label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 0.85em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
}

.preferences-panel-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: #fff;
    font: inherit;
    color: rgba(0, 0, 0, 0.87);
    margin-bottom: 4px;
    transition: border-color 120ms ease;
}

.preferences-panel-select:hover {
    border-color: rgba(0, 0, 0, 0.5);
}

.preferences-panel-select:focus,
.preferences-panel-select:focus-visible {
    border-color: var(--nemba-primary);   /* S84 — bleu Stitch RDC */
    outline: 2px solid rgba(0, 61, 155, 0.2);
    outline-offset: 0;
}

.preferences-panel-submit {
    margin-top: 24px;
    padding: 12px;
    background: var(--nemba-primary);   /* S84 — bleu Stitch RDC */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 120ms ease;
}

.preferences-panel-submit:hover,
.preferences-panel-submit:focus-visible {
    background: var(--nemba-primary-dark);
    outline: none;
}

.preferences-panel-error {
    border: 1px solid #f44336;
    background: #ffebee;
    color: #b71c1c;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.preferences-panel-error p {
    margin: 4px 0 0 0;
}

.preferences-panel-error a {
    color: #b71c1c;
    font-weight: 500;
    text-decoration: underline;
}

/* =====================================================================
   S66 A2 — Carrousel CSS-only Vitrine OfferingDetail
   Pattern radio buttons + labels + :checked, sans aucun JS.
   Compatible Static SSR ADR-0011, indexable Google.
   ===================================================================== */

/* Inputs radio cachés (servent uniquement de toggle d'état) */
/* S274 - Galerie plafonnee a 540px de large : la grande image faisait 100% de la colonne (jusqu'a
   ~580px selon l'ecran) x 500px, donc trop grande, elle repoussait les miniatures hors ecran. Le
   wrapper est plafonne a 540px et le stage passe en CARRE (aspect-ratio 1/1) => 540x540 sur desktop,
   retrecit proportionnellement en restant carre sur mobile. Miniatures (100% du wrapper) alignees. */
.nemba-carousel {
    max-width: 540px;
}
.nemba-carousel-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Conteneur des slides : remplit le carrousel */
.nemba-carousel-slides {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* Slides : empilées en absolute, invisibles par défaut */
.nemba-carousel-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 350ms ease;
    pointer-events: none;
}

/* Quand un input radio est :checked, on affiche la slide à l'index correspondant.
   Pattern : .nemba-carousel-input:nth-of-type(N):checked ~ .slides .slide:nth-child(N) */
.nemba-carousel-input:nth-of-type(1):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(1),
.nemba-carousel-input:nth-of-type(2):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(2),
.nemba-carousel-input:nth-of-type(3):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(3),
.nemba-carousel-input:nth-of-type(4):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(4),
.nemba-carousel-input:nth-of-type(5):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(5),
.nemba-carousel-input:nth-of-type(6):checked ~ .nemba-carousel-stage .nemba-carousel-slides .nemba-carousel-slide:nth-child(6) {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* S274 — Galerie style Stitch : les fleches + bullets sont remplacees par des miniatures cliquables
   sous la grande photo. On neutralise l'ancien markup fleches/bullets (a retirer proprement au cadenas). */
.nemba-carousel-arrow,
.nemba-carousel-bullets { display: none !important; }

/* Rangee de miniatures : vignettes CARREES calibrees pour que 4 tiennent EXACTEMENT sur la largeur
   de la grande photo (bord a bord), separees par un espacement egal. Formule S274 (Thierry) :
   4*X + 3*gap = largeur  =>  X = (largeur - 3*gap) / 4. Ecrit en relatif (100%) pour rester juste
   sur tous les ecrans (pas de largeur en dur). aspect-ratio 1/1 => hauteur = largeur (carre).
   Meme espacement (24px) entre la grande photo et la rangee ET entre les vignettes.
   Au-dela de 4 photos : passage a la ligne (wrap), les vignettes gardent la meme taille.
   NB : si on change le gap 24px, mettre a jour le 72px du calc (= 3 x gap). */
.nemba-carousel-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}
.nemba-carousel-thumb {
    flex: 0 0 calc((100% - 72px) / 4);   /* 4 par ligne : (100% - 3 gaps de 24px) / 4 */
    max-width: calc((100% - 72px) / 4);
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px #e2e8f0;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nemba-carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Miniature de la photo active (radio :checked) = cadre bleu. */
.nemba-carousel-input:nth-of-type(1):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(1),
.nemba-carousel-input:nth-of-type(2):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(2),
.nemba-carousel-input:nth-of-type(3):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(3),
.nemba-carousel-input:nth-of-type(4):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(4),
.nemba-carousel-input:nth-of-type(5):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(5),
.nemba-carousel-input:nth-of-type(6):checked ~ .nemba-carousel-thumbs .nemba-carousel-thumb:nth-child(6) {
    border-color: var(--nemba-primary, #003d9b);
    box-shadow: 0 0 0 1px var(--nemba-primary, #003d9b);
}

/* S274 — Cadre image = fin du "polaroid" : fond transparent (suit le background de page) + pas
   d'ombre, comme Stitch. Le MudPaper blanc + Elevation faisait un cadre blanc autour des photos. */
.nemba-detail-media {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* S274 - Titre produit (desktop/tablette) : plus gras (700) et 32px pour une hierarchie visuelle
   forte des l'ouverture. !important car app.css charge avant MudBlazor.min.css (override typo Mud). */
.nemba-detail-title {
    font-size: 2rem !important;      /* 32px */
    font-weight: 700 !important;
}
/* S274 - Prix fiche : 48px extra-bold, element le plus contraste de la zone d'achat. Passe du bleu
   primary (charte ADR-0027) au noir slate-900 sur demande Thierry => contraste transactionnel max. */
.nemba-detail-price {
    font-size: 3rem !important;      /* 48px */
    font-weight: 800 !important;
    color: var(--nemba-text-primary, #0f172a) !important;
    line-height: 1.1 !important;
}

/* S274 - Textes de la zone d'achat agrandis a 16px (lisibilite, ref Amazon). Les Typo MudBlazor
   body2 (14px) et caption (12px) etaient trop petits. !important : app.css charge avant Mud.min.css. */
.nemba-detail-info {
    font-size: 1rem !important;      /* 16px */
}
/* Sections en accordeon de la FICHE PRODUIT uniquement (wrapper .nemba-desc-accordions) : summary +
   corps a 16px. Ne touche PAS la FAQ de la page Contact (meme .nemba-faq-item, autre wrapper). */
.nemba-desc-accordions .nemba-faq-item > summary {
    font-size: 1rem !important;      /* 16px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--nemba-text-primary) !important;   /* S274 - REPLIE : titre noir gras */
    font-weight: 700 !important;
}
.nemba-desc-accordions .nemba-faq-item[open] > summary {
    color: var(--nemba-primary) !important;        /* S274 - DEPLIE : titre bleu gras */
}
/* S274 - Chevron a l'EXTREME DROITE du summary (marque le bord droit = largeur de la section). Le
   ::before herite de la FAQ Contact est annule ici ; on remet le triangle en ::after, pousse a droite
   par le justify-content: space-between du summary. Fiche produit uniquement (.nemba-desc-accordions). */
.nemba-desc-accordions .nemba-faq-item > summary::before {
    content: none !important;
}
.nemba-desc-accordions .nemba-faq-item > summary::after {
    content: "\25B8";   /* triangle ferme */
}
.nemba-desc-accordions .nemba-faq-item[open] > summary::after {
    content: "\25BE";   /* triangle ouvert */
}
/* Convention D-S274 : section SANS titre => paragraphe de description libre (hors accordeon). */
.nemba-desc-libre {
    font-size: 1rem;
    white-space: pre-wrap;
    margin: 0 0 16px;
    color: var(--nemba-text-primary);
}
/* Section AVEC titre : lignes du contenu (cle:valeur ou texte simple) a 16px, cle en gras. */
.nemba-section-specs {
    font-size: 1rem;
    margin-top: 12px;
}
.nemba-spec-row,
.nemba-spec-text {
    padding: 3px 0;
}
/* S274 - Ligne cle:valeur en 2 colonnes (flex) : la valeur a sa propre colonne, donc son retour a la
   ligne reste aligne SOUS elle-meme et non sous la cle. min-width:0 autorise le wrap du flex item. */
.nemba-spec-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.nemba-spec-key {
    flex: 0 0 auto;                 /* la cle ne retrecit pas, reste sur une ligne */
    white-space: nowrap;
    color: #64748b;                 /* S274 - cle facon fiche technique : gris slate-500 */
    font-size: 0.8125rem;           /* 13px : plus petit que le titre (16px) et que la valeur -> equilibre */
    font-weight: 600;               /* semibold */
    text-transform: uppercase;      /* majuscules */
    letter-spacing: 0.05em;         /* tracking-wider : aspect technique haut de gamme */
}
.nemba-spec-key::after {
    content: ":";                   /* separateur, espace avant via margin-left (style FR) */
    margin-left: 4px;
}
.nemba-spec-value {
    flex: 1;
    min-width: 0;
}
/* S274 - Sections de la FICHE PRODUIT : plus de fond blanc, plus de bordures laterales ni d'arrondi.
   Seules restent les bordures HAUT + BAS => rendu "liste" epure (facon Stitch), pas des cartes. Le
   margin-bottom negatif fait chevaucher la bordure basse d'une section avec la bordure haute de la
   suivante => une seule ligne de separation (pas de double trait). Cible le wrapper .nemba-desc-
   accordions uniquement : la FAQ de la page Contact conserve son style carte. */
.nemba-desc-accordions .nemba-faq-item {
    background-color: transparent;
    border: none;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 14px 0;
    margin-bottom: -1px;
}

/* S274 - Fil d'Ariane facon Stitch : les parents cliquables passent en GRIS discret, la page
   courante (dernier item, non cliquable) est mise en avant en FONCE + semi-gras. Inverse le defaut
   MudBreadcrumbs (liens colores + courant gris). Cible positionnelle (a / li:last-child) pour ne pas
   dependre des classes internes MudBlazor. !important : app.css charge avant MudBlazor.min.css. */
.nemba-breadcrumbs a {
    color: #64748b !important;                 /* slate-500 : parents discrets */
    font-weight: 400 !important;
}
.nemba-breadcrumbs a:hover {
    color: var(--nemba-primary) !important;    /* survol : rappel de cliquabilite */
    text-decoration: underline;
}
.nemba-breadcrumbs li:last-child,
.nemba-breadcrumbs li:last-child a,
.nemba-breadcrumbs li:last-child span {
    color: var(--nemba-text-primary, #0f172a) !important;   /* page courante mise en avant */
    font-weight: 600 !important;
}

/* Flèches gauche / droite : cachées par défaut, affichées uniquement quand
   l'input correspondant (data-active-when) est :checked */
.nemba-carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    line-height: 40px;
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    z-index: 2;
    transition: background 150ms ease;
}

.nemba-carousel-arrow:hover,
.nemba-carousel-arrow:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    outline: none;
}

.nemba-carousel-arrow-prev { left: 16px; }
.nemba-carousel-arrow-next { right: 16px; }

/* Affichage des flèches selon la slide active : la paire flèches data-active-when="N"
   est visible uniquement quand l'input nth-of-type(N+1) est checked */
.nemba-carousel-input:nth-of-type(1):checked ~ .nemba-carousel-arrow[data-active-when="0"],
.nemba-carousel-input:nth-of-type(2):checked ~ .nemba-carousel-arrow[data-active-when="1"],
.nemba-carousel-input:nth-of-type(3):checked ~ .nemba-carousel-arrow[data-active-when="2"],
.nemba-carousel-input:nth-of-type(4):checked ~ .nemba-carousel-arrow[data-active-when="3"],
.nemba-carousel-input:nth-of-type(5):checked ~ .nemba-carousel-arrow[data-active-when="4"],
.nemba-carousel-input:nth-of-type(6):checked ~ .nemba-carousel-arrow[data-active-when="5"] {
    display: block;
}

/* Bullets en bas : tous visibles, le bullet actif a un style différent */
.nemba-carousel-bullets {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.nemba-carousel-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.nemba-carousel-bullet:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* Bullet actif (= input correspondant :checked) : plein, plus gros */
.nemba-carousel-input:nth-of-type(1):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="0"],
.nemba-carousel-input:nth-of-type(2):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="1"],
.nemba-carousel-input:nth-of-type(3):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="2"],
.nemba-carousel-input:nth-of-type(4):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="3"],
.nemba-carousel-input:nth-of-type(5):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="4"],
.nemba-carousel-input:nth-of-type(6):checked ~ .nemba-carousel-bullets .nemba-carousel-bullet[data-bullet-index="5"] {
    background: var(--nemba-primary);   /* S84 — bleu Stitch RDC */
    border-color: #fff;
    transform: scale(1.25);
}

/* =====================================================================
   S84 (sub-plan B-S84) — Classes utilitaires Nemba Vitrine Phase 1.5 RDC.
   Pattern outlined hover-fill Stitch + badges marker + chips filtres +
   pastille compteur panier RDC. Anti-spaghetti : consommer ces classes via
   Class="nemba-..." sur MudButton/MudBadge/etc.
   ===================================================================== */

/* ── .nemba-btn-cta : outlined hover-fill (11 boutons CTA Vitrine) ────── */
.nemba-btn-cta {
    border: 1px solid var(--nemba-primary) !important;
    color: var(--nemba-primary) !important;
    background-color: var(--nemba-surface-card) !important;
    transition: background-color 200ms ease, color 200ms ease, transform 100ms ease !important;
}
.nemba-btn-cta:hover:not(:disabled) {
    background-color: var(--nemba-primary) !important;
    color: var(--nemba-surface-card) !important;
}
.nemba-btn-cta:active:not(:disabled) {
    transform: scale(0.95);
}

/* ── .nemba-btn-cta-pulse : outlined hover-fill + pulse glow au repos ─── */
/* Appliqué uniquement sur "Ajouter au panier" OfferingDetail (différenciation CTA premium). */
.nemba-btn-cta-pulse {
    border: 1px solid var(--nemba-primary) !important;
    color: var(--nemba-primary) !important;
    background-color: var(--nemba-surface-card) !important;
    transition: background-color 200ms ease, color 200ms ease, transform 100ms ease, box-shadow 200ms ease !important;
    animation: nemba-cta-pulse-glow 2.4s ease-in-out infinite;
}
.nemba-btn-cta-pulse:hover:not(:disabled) {
    background-color: var(--nemba-primary) !important;
    color: var(--nemba-surface-card) !important;
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 61, 155, 0.2) !important;
}
.nemba-btn-cta-pulse:active:not(:disabled) {
    transform: scale(0.95);
}
.nemba-btn-cta-pulse:disabled {
    animation: none;
}
@keyframes nemba-cta-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 61, 155, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 61, 155, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .nemba-btn-cta-pulse { animation: none !important; }
    .nemba-btn-cta-pulse:hover:not(:disabled) { transform: none; }
}

/* ── .nemba-btn-cta-filled : CTA bleu plein / texte blanc (S160) ─────────────
   Variante "remplie" du CTA (vs .nemba-btn-cta outlined). Au repos = fond bleu Stitch
   + texte blanc. Hover = bleu foncé. Bouton « Voir le détail » de la carte catalogue
   épurée (test S160 ; réversible vers outlined). !important = bat le défaut MudButton Filled. */
.nemba-btn-cta-filled {
    background-color: var(--nemba-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--nemba-primary) !important;
    transition: background-color 200ms ease, transform 100ms ease !important;
}
.nemba-btn-cta-filled:hover:not(:disabled) {
    background-color: var(--nemba-primary-dark) !important;
}
.nemba-btn-cta-filled:active:not(:disabled) {
    transform: scale(0.95);
}

/* ── .nemba-badge-marker : badges produits top-left ArticleCard ───────── */
.nemba-badge-marker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 2px;             /* Quasi rectangulaire (était pilule 12px avant S84) */
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* S154 (ADR-0038 Volet 4) — une classe marker par token (data-driven, remplace les 3 classes
   nommées nouveau/coupcoeur/edition-limitee). Le badge porte son ColorToken → classe --{token}. */
.nemba-badge-marker--emerald { background-color: var(--nemba-badge-emerald-bg); color: var(--nemba-badge-emerald-text); border-color: var(--nemba-badge-emerald-border); }
.nemba-badge-marker--amber   { background-color: var(--nemba-badge-amber-bg);   color: var(--nemba-badge-amber-text);   border-color: var(--nemba-badge-amber-border); }
.nemba-badge-marker--blue    { background-color: var(--nemba-badge-blue-bg);    color: var(--nemba-badge-blue-text);    border-color: var(--nemba-badge-blue-border); }
.nemba-badge-marker--rose    { background-color: var(--nemba-badge-rose-bg);    color: var(--nemba-badge-rose-text);    border-color: var(--nemba-badge-rose-border); }
.nemba-badge-marker--slate   { background-color: var(--nemba-badge-slate-bg);   color: var(--nemba-badge-slate-text);   border-color: var(--nemba-badge-slate-border); }
.nemba-badge-marker--violet  { background-color: var(--nemba-badge-violet-bg);  color: var(--nemba-badge-violet-text);  border-color: var(--nemba-badge-violet-border); }
.nemba-badge-marker--sky     { background-color: var(--nemba-badge-sky-bg);     color: var(--nemba-badge-sky-text);     border-color: var(--nemba-badge-sky-border); }
.nemba-badge-marker--gold    { background-color: var(--nemba-badge-gold-bg);    color: var(--nemba-badge-gold-text);    border-color: var(--nemba-badge-gold-border); }
.nemba-badge-marker--red     { background-color: var(--nemba-badge-red-bg);     color: var(--nemba-badge-red-text);     border-color: var(--nemba-badge-red-border); }

/* ── .nemba-chip-filter : chips filtres Home cliquables (3 variantes) ── */
.nemba-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 2px;             /* Quasi rectangulaire (était pilule 20px avant S84) */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    transition: background-color 150ms ease, color 150ms ease;
}
/* État inactif = même tint que la pastille marker (cohérence visuelle). S154 : 1 classe par token. */
.nemba-chip-filter--emerald { background-color: var(--nemba-badge-emerald-bg); color: var(--nemba-badge-emerald-text); border-color: var(--nemba-badge-emerald-border); }
.nemba-chip-filter--amber   { background-color: var(--nemba-badge-amber-bg);   color: var(--nemba-badge-amber-text);   border-color: var(--nemba-badge-amber-border); }
.nemba-chip-filter--blue    { background-color: var(--nemba-badge-blue-bg);    color: var(--nemba-badge-blue-text);    border-color: var(--nemba-badge-blue-border); }
.nemba-chip-filter--rose    { background-color: var(--nemba-badge-rose-bg);    color: var(--nemba-badge-rose-text);    border-color: var(--nemba-badge-rose-border); }
.nemba-chip-filter--slate   { background-color: var(--nemba-badge-slate-bg);   color: var(--nemba-badge-slate-text);   border-color: var(--nemba-badge-slate-border); }
.nemba-chip-filter--violet  { background-color: var(--nemba-badge-violet-bg);  color: var(--nemba-badge-violet-text);  border-color: var(--nemba-badge-violet-border); }
.nemba-chip-filter--sky     { background-color: var(--nemba-badge-sky-bg);     color: var(--nemba-badge-sky-text);     border-color: var(--nemba-badge-sky-border); }
.nemba-chip-filter--gold    { background-color: var(--nemba-badge-gold-bg);    color: var(--nemba-badge-gold-text);    border-color: var(--nemba-badge-gold-border); }
.nemba-chip-filter--red     { background-color: var(--nemba-badge-red-bg);     color: var(--nemba-badge-red-text);     border-color: var(--nemba-badge-red-border); }
/* État actif = fond plein saturé + texte blanc (règle générique partagée par tous les tokens). */
.nemba-chip-filter.is-active {
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* État actif = fond saturé (var --active). S154 : 1 variante par token. */
.nemba-chip-filter--emerald.is-active { background-color: var(--nemba-badge-emerald-active) !important; border-color: var(--nemba-badge-emerald-active); }
.nemba-chip-filter--amber.is-active   { background-color: var(--nemba-badge-amber-active) !important;   border-color: var(--nemba-badge-amber-active); }
.nemba-chip-filter--blue.is-active    { background-color: var(--nemba-badge-blue-active) !important;    border-color: var(--nemba-badge-blue-active); }
.nemba-chip-filter--rose.is-active    { background-color: var(--nemba-badge-rose-active) !important;    border-color: var(--nemba-badge-rose-active); }
.nemba-chip-filter--slate.is-active   { background-color: var(--nemba-badge-slate-active) !important;   border-color: var(--nemba-badge-slate-active); }
.nemba-chip-filter--violet.is-active  { background-color: var(--nemba-badge-violet-active) !important;  border-color: var(--nemba-badge-violet-active); }
.nemba-chip-filter--sky.is-active     { background-color: var(--nemba-badge-sky-active) !important;     border-color: var(--nemba-badge-sky-active); }
.nemba-chip-filter--gold.is-active    { background-color: var(--nemba-badge-gold-active) !important;    border-color: var(--nemba-badge-gold-active); }
.nemba-chip-filter--red.is-active     { background-color: var(--nemba-badge-red-active) !important;     border-color: var(--nemba-badge-red-active); }

/* ── .nemba-cart-counter : pastille compteur panier jaune RDC ─────────── */
/* Wrapper sur MudBadge Color="Warning" pour forcer texte bleu sur fond amber. */
.nemba-cart-counter .mud-badge.mud-badge-warning,
.nemba-cart-counter .mud-badge.mud-theme-warning {
    background-color: var(--nemba-accent-amber) !important;
    color: var(--nemba-primary) !important;
    font-weight: 700 !important;
}

/* ── .nemba-form-input + .nemba-form-submit : Reviews SubmitForm HTML pur */
/* Migration des styles inline #ccc/#1976d2 vers palette Stitch (D-S84-J). */
.nemba-form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--nemba-surface-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 120ms ease, outline 120ms ease;
}
.nemba-form-input:focus,
.nemba-form-input:focus-visible {
    border-color: var(--nemba-primary);
    outline: 2px solid rgba(0, 61, 155, 0.2);
    outline-offset: 0;
}
.nemba-form-submit {
    width: 100%;
    padding: 12px;
    background-color: var(--nemba-primary);   /* S84 — bleu Stitch (était #1976d2 Material UI default) */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.nemba-form-submit:hover:not(:disabled),
.nemba-form-submit:focus-visible {
    background-color: var(--nemba-primary-dark);
    outline: none;
}
.nemba-form-submit:active:not(:disabled) {
    transform: scale(0.98);
}

/* ── .nemba-hero : bandeau d'accueil editorial Home (S129) ───────────── */
/* Static SSR strict (D-S77-F) : simple <div> coloré, aucun rendermode.
   Fond sombre slate-900 Stitch + CTA amber = clin d'oeil drapeau RDC (ADR-0027). */
.nemba-hero {
    background: var(--nemba-hero-bg);   /* S130 - slate-900 Stitch (etait un degrade bleu primary, qui se confondait avec l'appbar) */
    color: #ffffff;
    /* S130 - Full-bleed : la bande deborde son MudContainer parent jusqu'aux bords de la
       fenetre via margin: calc(50% - 50vw) (technique standard, cf. Q-S35-1). Le contenu
       reste cadre par .nemba-hero-inner. border-radius retire (bord a bord). */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -24px;       /* S130 - colle le hero sous l'appbar : annule le mt-6 (~24px) du MudContainer du MainLayout (le mt-6 du container Home a ete retire). */
    border-radius: 0;
    padding: 0;
}

/* .nemba-hero-inner : recadre le contenu a la largeur MaxWidth.Large + grille 2 colonnes
   desktop (texte gauche un peu plus large, image droite, facon Stitch). */
.nemba-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}
.nemba-hero-text {
    text-align: left;
}
.nemba-hero-media {
    display: flex;
    justify-content: center;
}
.nemba-hero-img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Mobile (<= 768px, 4G RDC) : empilement vertical, texte puis image en dessous. */
@media (max-width: 768px) {
    .nemba-hero-inner {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 24px;
    }
    .nemba-hero-img {
        max-height: 220px;
        /* S155 — image hero pleine largeur sur mobile : coins droits (bord à bord), sans ombre latérale. */
        border-radius: 0;
        box-shadow: none;
    }
    /* S155 — la zone image déborde le padding horizontal (20px) du .nemba-hero-inner jusqu'aux deux
       bords de l'écran → la photo touche les bords du téléphone (bannière pleine largeur). Hauteur
       inchangée. Desktop non affecté (hors media query). */
    .nemba-hero-media {
        margin-left: -20px;
        margin-right: -20px;
    }
}
.nemba-hero-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}
.nemba-hero-tagline {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    margin: 0 0 24px 0;
}
.nemba-hero-cta {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--nemba-accent-amber);
    color: var(--nemba-primary);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 150ms ease, transform 100ms ease;
}
.nemba-hero-cta:hover {
    background-color: var(--nemba-accent-amber-progress);
    transform: translateY(-1px);
}

/* S155 — titre + tagline réduits sur mobile (40px / 18px = trop gros sur 360px). Placé APRÈS
   les règles de base .nemba-hero-title / .nemba-hero-tagline (définies plus haut sans media query)
   pour gagner la cascade à spécificité égale ; un override mobile placé AVANT la base serait écrasé. */
@media (max-width: 768px) {
    .nemba-hero-title {
        font-size: 28px;
    }
    .nemba-hero-tagline {
        font-size: 15px;
    }
}

/* ── .nemba-shelf-seeall : lien « Voir tout » des etageres Home (S129) ── */
.nemba-shelf-seeall {
    font-size: 13px;
    font-weight: 600;
    color: var(--nemba-primary);
    text-decoration: none;
    white-space: nowrap;
}
.nemba-shelf-seeall:hover {
    text-decoration: underline;
}

/* .nemba-shelf : respiration verticale de chaque etagere editoriale (S130). */
.nemba-shelf {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* .nemba-section-alt : bande de fond gris clair pleine largeur, alternance facon Stitch (S130).
   Le fond deborde jusqu'aux bords via margin: calc(50% - 50vw), puis padding: calc(50vw - 50%)
   RECOMPENSE le contenu a sa position d'origine (texte + cartes ne bougent pas). Pas de scrollbar
   parasite : le debordement horizontal est compense, et overflow-x:hidden (garde-fou hero) couvre
   la largeur de l'ascenseur. */
.nemba-section-alt {
    background-color: var(--nemba-section-alt-bg);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* ── .nemba-cat-card : carte catégorie « Parcourir par catégories » (Home, S132) ──────
   Effet zoom + légère rotation au survol, inspiré du bloc .product-offer du template
   eShopper (img/offer-*.jpg). 100% CSS (:hover) → aucun JS/SignalR, compatible Static SSR
   strict (D-S77-F). overflow:hidden coupe le débordement du zoom/rotation ; le dégradé + nom
   en bas ne bougent pas (seule l'image sous-jacente s'anime). Sur mobile/tactile (4G RDC),
   :hover ne s'applique pas — aucun surcoût. */
/* ── .nemba-cat-scroll : bande horizontale « rayon » des catégories (Home, S155 Q-S151-C) ──
   Remplace l'ancienne grille MudGrid qui empilait verticalement. Bande qui glisse au doigt
   (overflow-x), cartes portrait en flex non-wrap. 100% CSS → aucun JS/SignalR, Static SSR
   strict (D-S77-F). scroll-snap = accroche douce au relâché ; la dernière carte coupée au
   bord = indice visuel « ça défile ». padding-bottom = place pour la barre native. */
.nemba-cat-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-bottom: 32px;   /* remplace le mb-8 de l'ancien MudGrid */
    /* S155 (Q-S151-C affiné 2) — full-bleed bord à bord : la bande déborde son MudContainer
       (gutters) jusqu'aux bords de la fenêtre (même technique que .nemba-hero / .nemba-section-alt).
       Le padding-left compense pour aligner la 1ère carte sur le titre ; à droite la carte coupée
       touche le bord de l'écran → plus de bande blanche latérale. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 10px);   /* S155 — +10px : petit jour à gauche (la carte ne colle pas au bord) */
    padding-right: calc(50vw - 50%);
    /* S155 — IMPORTANT : sans ce scroll-padding-left, le scroll-snap (align:start) « mange » le
       padding-left au relâché et recolle la 1ère carte au bord gauche. Le scroll-padding cale
       l'accroche APRÈS le jour → la marge survit au snap. Doit égaler le padding-left. */
    scroll-padding-left: calc(50vw - 50% + 10px);
}

.nemba-cat-card {
    position: relative;
    display: block;
    flex: 0 0 auto;            /* S155 — ne rétrécit pas dans la bande flex (chaque carte garde sa largeur) */
    width: 80vw;              /* S161 (Q-S160-D) — compromis categories mobile : grandes mais on voit une tranche de la 2e tuile (indice scroll preserve). REGLAGE largeur tuile categorie mobile. */
    max-width: 400px;         /* borne avant bascule desktop (etait 325px) */
    scroll-snap-align: start; /* S155 — accroche douce au bord gauche */
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 4;      /* S155 (Q-S151-C) — portrait (était 3 / 2 paysage) */
    text-decoration: none;
}
.nemba-cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;   /* même tempo que le template (0.5s) */
}
.nemba-cat-card:hover img {
    /* Zoom + légère rotation. Valeurs exactes du template eShopper / rdcmarket.com
       (.product-offer:hover img). Le scale 1.2 « remplit » largement le cadre malgré la
       rotation 5deg → aucun coin vide. Réglages : 1.2 = zoom, 5deg = inclinaison. */
    transform: scale(1.2) rotate(5deg);
}

/* S155 (Q-S151-C) — sur desktop, largeur fixe (le 60vw deviendrait trop grand sur grand écran). */
@media (min-width: 600px) {
    .nemba-cat-card {
        width: 200px;
    }
}

/* ── .nemba-mini-card : carte produit épurée pour rangées qui défilent (S155 Q-S151-D/F) ──
   Photo + titre + prix, toute la carte cliquable (lien fiche détail). Static SSR strict :
   <a> + <img> + CSS, aucun JS. Distincte de la carte riche MudCard (.nemba-article-card).
   Vit dans une bande .nemba-shelf-scroll qui glisse horizontalement. */
.nemba-mini-card {
    flex: 0 0 auto;
    width: 56vw;              /* S161 (Q-S160-D) — +25% mobile (etait 45vw) : mini-cartes etageres plus grandes (idem tuiles categories). */
    max-width: 240px;         /* etait 190px */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--nemba-text-primary);
}
/* S181bis — la mini-carte n'est plus un <a> plein : conteneur <div> (position:relative inline,
   ancre du cœur WishlistButton absolute) + lien interne .nemba-mini-card-link qui porte la pile
   verticale photo/titre/prix et la déco lien. Un <button> dans un <a> est invalide HTML. */
.nemba-mini-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--nemba-text-primary);
}
@media (min-width: 600px) {
    .nemba-mini-card {
        width: 180px;         /* largeur fixe sur desktop (le 45vw deviendrait trop grand) */
    }
}
.nemba-mini-card-media {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;      /* S161 (Q-S160-D) — portrait (essai ; était 1/1 carré) pour harmoniser avec les cartes catégories 3/4 */
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--nemba-surface-image-fallback);
}
.nemba-mini-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.nemba-mini-card:hover .nemba-mini-card-media img {
    transform: scale(1.06);   /* zoom doux au survol (desktop ; pas de :hover tactile) */
}
.nemba-mini-card-title {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--nemba-text-primary);
    /* tronque proprement à 2 lignes */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nemba-mini-card-price {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nemba-primary);
}

/* ── prix compact « centimes en exposant » (Amazon-like), via <PriceDisplay Compact="true"> (S155) ──
   Activé seulement sur les vitrines d'accroche (mini-cards / étagères). Les centimes et l'ISO
   devise sont réduits ; les centimes sont surélevés. La partie entière garde la taille du
   conteneur. Les pages sérieuses (fiche, panier, checkout) gardent le prix plein « 41,80 USD »
   (param Compact absent → rendu inchangé). */
.nemba-price-compact {
    white-space: nowrap;
}
.nemba-price-frac {
    font-size: 0.6em;
    vertical-align: top;
    margin-left: 1px;
    font-weight: inherit;
}
.nemba-price-cur {
    font-size: 0.8em;   /* S160 — était 0.6em : le « $ » paraissait trop petit face au prix */
    margin-left: 4px;
    font-weight: 500;
    vertical-align: baseline;
}

/* ── .nemba-shelf-scroll : bande horizontale des mini-cards d'une étagère badge (S155) ──
   Même mécanique que .nemba-cat-scroll, full-bleed INCLUS : la bande déborde jusqu'aux bords de
   l'écran (margin négative) puis recompense (padding) pour aligner la 1ère carte sous le titre ;
   la carte coupée touche le bord droit → plus de liséré blanc. Fonctionne aussi dans une étagère
   grise (.nemba-section-alt) : la section recentre déjà son contenu, donc le containing-block de
   la bande = largeur container d'origine, et le calc bleed atteint le bord identiquement.
   NOTE (Règle 25) : .nemba-cat-scroll et .nemba-shelf-scroll ont CONVERGÉ (quasi identiques, seul
   le margin-bottom diffère) ; au 3ᵉ usage d'une bande horizontale, factoriser en .nemba-hscroll. */
.nemba-shelf-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 10px);   /* S155 — +10px : petit jour à gauche (la carte ne colle pas au bord) */
    padding-right: calc(50vw - 50%);
    /* S155 — même correctif que .nemba-cat-scroll : scroll-padding-left = padding-left, sinon le
       scroll-snap recolle la 1ère carte au bord gauche au relâché. */
    scroll-padding-left: calc(50vw - 50% + 10px);
}

/* ── .nemba-article-card : zoom au survol de la photo produit (S132) ──────────────
   Même esprit que .nemba-cat-card, mais SANS rotation (zoom seul — plus sobre sur une photo
   produit). 100% CSS (:hover) → Static SSR strict OK (D-S77-F). MudBlazor rend la photo via
   MudCardMedia (une div à background-image, classe interne .mud-card-media), pas une <img> :
   on enveloppe donc la zone image dans .nemba-article-media (overflow:hidden) pour CLIPPER le
   zoom → il ne déborde jamais sur le titre / prix en dessous. Mobile/tactile : pas de :hover. */
/* S161 (Q-S160-D / Q-S155-B) — DESKTOP : les rangées « catégories » et « étagères badge » de la
   Home cessent de défiler et ÉTALENT leurs cartes pour remplir toute la largeur du conteneur (façon
   grille catalogue), au lieu de cartes à largeur fixe tassées à gauche avec un grand vide à droite.
   On annule le full-bleed (margin/padding négatifs) et le scroll ; chaque carte prend une part égale
   (flex: 1). Sur mobile (<600px) : INCHANGÉ, ça reste un rayon qui défile. NB : nowrap, calé pour
   ≤ 4 items par rangée (catégories seedées + étagères .Take(4)). Au-delà, prévoir flex-wrap. */
@media (min-width: 600px) {
    .nemba-cat-scroll,
    .nemba-shelf-scroll {
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 20px;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .nemba-cat-card,
    .nemba-mini-card {
        /* S181bis — slot FIXE de 1/4 de rangée (était flex:1 1 0 = parts égales de TOUTE la largeur :
           1 seul article s'étalait sur les 4 slots, 2 articles sur la moitié chacun). Base = 25% moins
           la part de gouttière (3 gaps de 20px répartis sur 4 cartes = 15px). S'il y a moins de 4
           articles, les slots restants restent VIDES. */
        flex: 0 0 calc(25% - 15px);
        width: auto;
        max-width: calc(25% - 15px);
    }
}

/* S161 (Q-S160-D) — MOBILE : on divise par 2 l'espace VERTICAL des sections Home (étagères +
   bande catégories). Le cumul margin-bottom catégories (32) + padding-top étagère (32) = 64px
   de vide entre deux sections sur petit écran → réduit à 16+16. Desktop inchangé (garde 32px). */
@media (max-width: 599.98px) {
    .nemba-shelf {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .nemba-cat-scroll {
        margin-bottom: 16px;
    }
}

/* S161 — Carte catalogue style Zalando : la carte prend la COULEUR DE FOND DE LA PAGE (transparent),
   plus d'ombre, plus de bordure. La photo devient le seul élément visuel ; titre/prix/bouton reposent
   directement sur le fond de page (plus de boîte blanche qui tranche sur le fond grisé #f8f9fa).
   MudCard Elevation 0. S'applique aux 3 pages (composant ArticleCard unique). Pour un lisere discret
   facon Amazon à la place : mettre 'border: 1px solid var(--nemba-surface-border)' et retirer le transparent. */
.nemba-article-card {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.nemba-article-media {
    overflow: hidden;
    position: relative;   /* S160 — ancre les pastilles badges en bas de la photo (bottom/left), pas en bas de la carte */
}
.nemba-article-media .mud-card-media {
    width: 100% !important;
    aspect-ratio: var(--nemba-card-ratio, 1 / 1);   /* S160 (fix) — le ratio est porté par l'élément image lui-même. Robuste, contrairement à height:100% sur un parent en aspect-ratio (que le navigateur n'honore pas → image figée + vide blanc en 3/4). */
    height: auto !important;            /* la hauteur découle du ratio ; bat un éventuel défaut MudBlazor */
    transition: transform 0.5s ease;   /* même tempo que les cartes catégories */
    /* S132 — pré-promotion en couche GPU. La photo produit est un background-image (MudCardMedia) :
       le navigateur ne la « prépare » pour l'animation qu'au 1er survol (d'où la latence initiale,
       puis fluide). will-change demande de préparer la couche dès le départ → fluide dès le 1er
       survol. Inutile sur les cartes catégories (vraie <img>, déjà fluide). */
    will-change: transform;
}
.nemba-article-card:hover .mud-card-media {
    transform: scale(1.08);   /* zoom doux ; monter à 1.2 pour matcher exactement les cartes catégories */
}

/* ── S169 — Bouton « Agrandir » (loupe) en coin de la photo des cartes catalogue ──────
   Ouvre la photo en grand via le voile lightbox partagé (#nemba-lightbox-overlay +
   wwwroot/js/lightbox.js, branché par data-lightbox-src). Static SSR strict (D-S77-F) :
   simple <button> HTML, aucun rendermode. Coin bas-DROITE (diagonale des badges bas-gauche
   et du cœur haut-droite). Toujours visible (utilisable au tactile mobile, pas de :hover requis).
   Fond blanc translucide cohérent avec le cœur wishlist. */
.nemba-card-zoom {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--nemba-heart-bg, rgba(255, 255, 255, 0.8));
    color: var(--nemba-text-primary, #0f172a);
    cursor: zoom-in;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 150ms ease, transform 100ms ease;
}
.nemba-card-zoom:hover {
    background-color: #ffffff;
    transform: scale(1.08);
}
.nemba-card-zoom:active {
    transform: scale(0.95);
}
.nemba-card-zoom .mud-icon-root {
    font-size: 20px;
}

/* ── S160 — Hiérarchie typo de la carte listing épurée ────────────────────────
   Titre discret tronqué à 2 lignes (évite les titres à 3 lignes qui déséquilibrent la grille)
   + prix net (weight 400, bleu, ~18px, validé S160). Le contraste titre/prix fait ressortir
   le prix sans qu'il soit énorme. min-height titre = 2 lignes réservées → prix alignés entre
   cartes d'une même rangée. */
.nemba-card-title {
    font-size: 1rem !important;   /* S160 — libellé carte (cran au-dessus de subtitle2 14px) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25 !important;   /* S161 — resserre l'interligne du titre 2 lignes ; !important pour battre MudBlazor subtitle2 (~1.57) qui ecrasait le 1.35 (app.css charge AVANT MudBlazor.min.css) */
    min-height: 2.5em;              /* 2 lignes a 1.25 (etait 2.7em) */
}
.nemba-card-price {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
}

/* S161 (Q-S160-C) — Photo de la carte listing = lien plein vers la fiche détail (pattern
   Amazon/Zalando, 0 JS, Static SSR strict D-S77-F). display:block pour que le <a> épouse
   la zone image ; la hauteur découle du ratio porté par .mud-card-media. */
.nemba-article-media-link {
    display: block;
}

/* ── S232 (Q-S231-A, ADR-0046 D-S231-E) — Article BLOQUE mais VISIBLE (« Indisponible ») ──────
   Carte vignette : la photo est ternie (grayscale + opacity reduite) et un bandeau gris
   « Indisponible » se pose en coin haut-gauche. Le bandeau est SIBLING du lien media (pas dedans)
   -> non grise par le filtre, qui ne cible QUE .nemba-article-media-link. La carte reste cliquable
   (fiche detail) et le cœur wishlist actif ; seul le CTA panier est coupe (cf. ArticleCard.razor).
   Coin haut-gauche = libre (badges marketing en bas-gauche, cœur en haut-droite). Static SSR strict. */
.nemba-article-media--unavailable .nemba-article-media-link {
    filter: grayscale(1);
    opacity: 0.55;
}
.nemba-badge-unavailable {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 2px;
    color: #ffffff;
    background-color: var(--nemba-badge-slate-active, #64748b);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* ── S232 (Q-S231-A, ADR-0046 axe Visible) — Pastille couleur d'une declinaison BLOQUEE ───────
   Sur la fiche detail, une couleur soeur bloquee a la vente reste affichee dans le selecteur
   (coherent carte catalogue A7) mais grisee + libelle « Indisponible » au lieu du prix. Reste
   cliquable : mene a sa fiche, qui coupe l'achat (bandeau S176). Miroir du grisage carte A7. */
.nemba-color-swatch-cell--unavailable .nemba-color-swatch img {
    filter: grayscale(1);
    opacity: 0.5;
}
.nemba-color-swatch-price--unavailable {
    color: var(--nemba-badge-slate-active, #64748b);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

/* S161 (Q-S160-C) — Mobile 2 colonnes (xs=6) : on masque le bouton « Voir le détail » sous 600px
   (la carte est trop étroite — la photo cliquable suffit pour ouvrir la fiche). Tablette/PC (>=600px,
   breakpoint sm MudBlazor) : bouton conservé. */
@media (max-width: 600px) {
    .nemba-card-actions {
        display: none !important;
    }
}

/* S161 (Q-S160-C) — Page catalogue « pleine largeur » sur mobile, SANS vw (donc pas de
   décalage parasite dû à l'ascenseur — c'était la cause du côté droit trop large). Sous 600px,
   on annule la gouttière (16px, valeur source MudBlazor 9.4.0 .mud-container--gutters) du
   MudContainer PARENT (layout) via une marge négative fixe, puis un padding symétrique fin
   laisse les cartes respirer. Borné <600px : desktop garde son centrage ExtraLarge.

   ▶ 3 RÉGLAGES (un seul chiffre chacun) :
     1. espace à GAUCHE   = padding-left  ci-dessous
     2. espace à DROITE   = padding-right ci-dessous
     3. espace ENTRE les 2 cartes = le trio 8px plus bas (width +8 / margin -8 / item padding 8) */
@media (max-width: 599.98px) {
    .nemba-page-narrow {
        /* .mud-container a une largeur FIXE width:100% : des marges négatives seules ne font que
           DÉCALER le bloc vers la gauche sans l'élargir (d'où le bord droit large). On élargit donc
           explicitement de 2×16px pour compenser les deux gouttières annulées → le bloc occupe toute
           la largeur de l'écran, et le padding ci-dessous redonne un jour symétrique. */
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;   /* annule la gouttière du conteneur parent (NE PAS toucher) */
        margin-right: -16px !important;  /* idem côté droit (NE PAS toucher) */
        padding-left: 8px !important;     /* RÉGLAGE 1 — espace à GAUCHE (S277 : 12 → 8, harmonisation bordure unique avec .nemba-page-mobile-8) */
        padding-right: 8px !important;    /* RÉGLAGE 2 — espace à DROITE (S277 : idem) */
    }
    /* RÉGLAGE 3 — espace ENTRE les 2 cartes (ici 12px ; remonter ces 3 valeurs ensemble pour
       élargir, descendre pour resserrer). Le gap vertical entre rangées reste à 24px (non touché). */
    .nemba-page-narrow .mud-grid {
        width: calc(100% + 12px) !important;
        margin-left: -12px !important;
    }
    .nemba-page-narrow .mud-grid > .mud-grid-item {
        padding-left: 12px !important;
    }
}

/* ── .nemba-faq-item : accordéon FAQ natif <details>/<summary> page Contact (S134) ──────
   Static SSR strict (D-S77-F) : aucun JS, le navigateur gère nativement l'ouverture/fermeture
   du <details>. Pas de MudExpansionPanels (qui exigerait un render mode interactif + SignalR).
   Style minimal cohérent charte : carte blanche, coin arrondi, summary cliquable, chevron CSS. */
.nemba-faq-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.nemba-faq-item > summary {
    cursor: pointer;
    color: var(--nemba-primary);
    list-style: none;
}
.nemba-faq-item > summary::-webkit-details-marker {
    display: none;
}
.nemba-faq-item > summary::before {
    content: "\25B8  ";   /* triangle ▸ ferme */
}
.nemba-faq-item[open] > summary::before {
    content: "\25BE  ";   /* triangle ▾ ouvert */
}
.nemba-faq-item > p {
    margin-bottom: 0;
}

/* ── Lightbox voile plein ecran (S149 Q-S148-B) ─────────────────────────────
   Static SSR strict (D-S77-F) : pilote par wwwroot/js/lightbox.js (ajout/retrait de la
   classe .nemba-lightbox-open). Aucune dependance MudBlazor interactive. */
.nemba-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.nemba-lightbox-overlay.nemba-lightbox-open {
    display: flex;
}
.nemba-lightbox-img {
    max-width: 90vw;
    max-height: 95vh;   /* S169 — était 80vh ; +18,75 % de hauteur pour les photos portrait sur écran paysage (essai Thierry) */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.nemba-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.nemba-lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* S156 (Q-S151-G) — Pagination Static SSR de la page /catalogue (liens Préc/Suiv + statut). */
.nemba-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}
.nemba-pagination-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--nemba-primary);
    border-radius: 6px;
    color: var(--nemba-primary);
    background: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.nemba-pagination-link:hover {
    background: var(--nemba-primary);
    color: #ffffff;
}
.nemba-pagination-link.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}
.nemba-pagination-status {
    font-size: 14px;
    color: var(--nemba-text-secondary);
}

/* S156 (Q-S151-G) — Menu de tri Static SSR de /catalogue (<details>, vraies icônes Material,
   remplace le <select> natif à emojis). Replié par défaut, s'ouvre au clic, se referme via
   navigation SSR au choix d'un item. */
.nemba-sort {
    position: relative;
    display: inline-block;
}
.nemba-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    color: var(--nemba-text-primary, #0f172a);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nemba-sort-trigger::-webkit-details-marker {
    display: none;
}
.nemba-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
}
.nemba-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--nemba-text-primary, #0f172a);
    text-decoration: none;
}
.nemba-sort-item:hover {
    background: #f1f5f9;
}
.nemba-sort-item.is-active {
    color: var(--nemba-primary);
    font-weight: 600;
    background: rgba(0, 61, 155, 0.06);
}

/* S158 (ADR-0039 Volet 2) — Description article structurée en sections empilées (fiche détail).
   Static SSR strict (D-S77-F) : 100 % HTML/CSS, aucun rendu interactif. */
.nemba-desc-section { margin-bottom: 1rem; }
.nemba-desc-titre   { font-weight: 700; font-size: 1.05rem; margin: 0 0 .25rem; }
.nemba-desc-contenu { margin: 0; white-space: pre-line; }   /* respecte les sauts de ligne saisis */

/* ===================================================================
   S162 (Q-S161-A) — AppBar responsive : desktop icones + menu mobile burger.
   Static SSR strict (D-S77-F) : 100% HTML/CSS, case a cocher cachee pour le
   tiroir mobile. Aucun JS, aucun rendu interactif Blazor.
   =================================================================== */

/* Logo : jamais sur 2 lignes ; un peu plus petit en mobile. */
.nemba-appbar-logo { white-space: nowrap; }
@media (max-width: 599px) {
    .nemba-appbar-logo { font-size: 1rem; }
}

/* Selecteur marche compact : on masque le resume texte long
   ("Republique Democratique du Congo - fr - USD") -> drapeau + chevron seuls.
   Le popup complet (au clic) reste inchange. */
.market-selector-summary { display: none !important; }

/* Rangee d'icones desktop : visible >= 600px, masquee en mobile. */
.nemba-nav-desktop { display: none; align-items: center; }
@media (min-width: 600px) {
    .nemba-nav-desktop { display: inline-flex; }
}

/* Ecart d'une largeur d'icone (48px) entre le bloc compte/session et le couple
   selecteur marche + panier (S162 retouche Thierry : separation geometrique). */
.nemba-nav-gap { display: none; }
@media (min-width: 600px) {
    .nemba-nav-gap { display: inline-block; width: 48px; }
}

/* Bouton burger : visible en mobile uniquement. */
.nemba-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
    padding: 6px 8px;
    margin-left: 4px;
    user-select: none;
}
@media (min-width: 600px) {
    .nemba-nav-burger { display: none; }
}

/* Case a cocher cachee qui pilote l'ouverture du tiroir (0 JS). */
.nemba-nav-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Voile sombre derriere le tiroir : masque par defaut, affiche a l'ouverture. */
.nemba-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1400;
}
.nemba-nav-toggle-input:checked ~ .nemba-nav-overlay { display: block; }

/* Tiroir mobile : masque (display:none) par defaut -> aucun risque de scroll
   horizontal hors ecran. A l'ouverture : display:flex + animation de glissement. */
.nemba-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 80%;
    max-width: 320px;
    background: #ffffff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    z-index: 1401;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
}
.nemba-nav-toggle-input:checked ~ .nemba-mobile-drawer {
    display: flex;
    animation: nemba-drawer-in 0.25s ease;
}
@keyframes nemba-drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Lignes du tiroir. */
.nemba-drawer-close {
    align-self: flex-end;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    color: var(--nemba-text-secondary, #64748b);
    user-select: none;
}
.nemba-drawer-user {
    font-size: 14px;
    font-weight: 600;
    color: var(--nemba-text-primary, #0f172a);
    padding: 8px 4px 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
    word-break: break-word;
}
.nemba-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    font-size: 15px;
    color: var(--nemba-text-primary, #0f172a);
    text-decoration: none;
    border-radius: 8px;
}
.nemba-drawer-link:hover { background: #f1f5f9; }

/* Ligne separatrice au-dessus de "Se deconnecter" dans le tiroir mobile (S162 retouche Thierry). */
.nemba-drawer-sep {
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
    padding-top: 16px;
}

/* Accents couleur RDC (rappel drapeau : barre bleue + jaune + rouge) — S162 retouche Thierry.
   app.css charge avant MudBlazor -> !important pour ecraser la couleur d'icone par defaut. */
.nemba-icon-catalogue,
.nemba-icon-catalogue .mud-icon-root { color: var(--nemba-accent-amber, #f59e0b) !important; }  /* jaune RDC */
.nemba-icon-globe { color: #ce1021 !important; }   /* rouge drapeau RDC */
.market-selector-flag .mud-icon-root { vertical-align: middle; }

/* Securite : tiroir + voile jamais affiches en desktop, quoi qu'il arrive. */
@media (min-width: 600px) {
    .nemba-mobile-drawer,
    .nemba-nav-overlay { display: none !important; }
}

/* S162 retouche Thierry — popup du selecteur marche/devise en mobile.
   Le trigger est etroit (globe + chevron) : le popup ancre en absolute debordait a
   gauche (libelles coupes). On le bascule en panneau fixe sous la barre, largeur viewport. */
@media (max-width: 599px) {
    .market-selector-popup {
        position: fixed !important;
        top: 64px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        z-index: 1450 !important;
    }
}

/* S163 (Q-S161-A retouche) — Salutation utilisateur + lien "Se connecter" dans la barre du haut.
   Remplace l'icone compte morte (connecte) et l'icone Login trompeuse (deconnecte).
   "petit" : texte reduit + ellipse pour ne pas deborder sur viewports etroits. */
.nemba-nav-greeting {
    align-self: center;
    margin: 0 6px;
    font-size: 0.8125rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}
.nemba-nav-login {
    align-self: center;
    margin: 0 6px;
    font-size: 0.875rem;
    color: #ffffff !important;
    white-space: nowrap;
}

/* ── S163 (Q-S161-C) — Popup panier des cartes listing (jumeau du voile lightbox) ──────
   Static SSR strict (D-S77-F) : piloté par wwwroot/js/cart-popup.js (ajout/retrait de la
   classe .nemba-cartpopup-open). Aucune dépendance MudBlazor interactive. Desktop only
   (le déclencheur .nemba-card-actions est masqué en mobile). */
.nemba-cartpopup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.nemba-cartpopup-overlay.nemba-cartpopup-open {
    display: flex;
}
.nemba-cartpopup-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    padding: 24px 20px 20px;
}
.nemba-cartpopup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--nemba-text-secondary, #64748b);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.nemba-cartpopup-close:hover { background: #f1f5f9; }
.nemba-cartpopup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.nemba-cartpopup-photo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: #f1f5f9;
}
.nemba-cartpopup-libelle {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nemba-text-primary, #0f172a);
    line-height: 1.3;
}
.nemba-cartpopup-form { margin: 0; }
.nemba-cartpopup-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.nemba-cartpopup-qty-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: var(--nemba-primary, #003d9b);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.nemba-cartpopup-qty-btn:first-child { border-radius: 8px 0 0 8px; }
.nemba-cartpopup-qty-btn:last-child { border-radius: 0 8px 8px 0; }
.nemba-cartpopup-qty-btn:hover { background: #f1f5f9; }
.nemba-cartpopup-qty-input {
    width: 56px;
    height: 40px;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-left: none;
    border-right: none;
    font-size: 1rem;
    color: var(--nemba-text-primary, #0f172a);
    background: #ffffff;
}
.nemba-cartpopup-qty-input::-webkit-outer-spin-button,
.nemba-cartpopup-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nemba-cartpopup-qty-input { -moz-appearance: textfield; appearance: textfield; }
.nemba-cartpopup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nemba-cartpopup-btn {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 150ms ease;
}
.nemba-cartpopup-btn--primary {
    background: var(--nemba-primary, #003d9b);
    color: #ffffff;
    border-color: var(--nemba-primary, #003d9b);
}
.nemba-cartpopup-btn--primary:hover { background: var(--nemba-primary-dark, #002d73); }
.nemba-cartpopup-btn--secondary {
    background: #ffffff;
    color: var(--nemba-primary, #003d9b);
    border-color: var(--nemba-primary, #003d9b);
}
.nemba-cartpopup-btn--secondary:hover { background: #eef3fb; }
.nemba-cartpopup-btn--ghost {
    background: transparent;
    color: var(--nemba-text-secondary, #64748b);
    border-color: transparent;
    font-weight: 500;
}
.nemba-cartpopup-btn--ghost:hover { background: #f1f5f9; }

/* S163 (Q-S160-B) — Etat désactivé du CTA bleu plein (ex. « Lot complet » sur la fiche détail,
   ou checkout indisponible Phase 2+). Sans cette règle, le !important du fond bleu garderait
   le bouton bleu même désactivé -> on force un gris explicite (spécificité :disabled > base). */
.nemba-btn-cta-filled:disabled,
.nemba-btn-cta-filled.mud-disabled {
    background-color: #cbd5e1 !important;
    color: #ffffff !important;
    border-color: #cbd5e1 !important;
    cursor: default;
}

/* S163 (Q-S161-B) — Fiche détail /offerings en mobile (phone < 600px).
   Photo pleine largeur bord à bord. Methode robuste independante de la largeur de la
   MudGrid : largeur forcee a 100vw + recentrage par translation (margin-left:50% place
   le bord gauche au centre du parent, translateX(-50%) le ramene de 50vw -> centre ecran).
   Ne depend PAS du gutter de grille (l'ancienne methode calc(50%-50vw) tombait a ~0 a cause
   des marges negatives de la MudGrid -> photo decalee). Tablette/desktop (>= 600px) inchanges.
   Media query en fin de fichier = apres les regles de base (piege cascade fiche Full-Bleed §4). */
@media (max-width: 599px) {
    /* S277 - selecteur renforce (.mud-paper.nemba-detail-media) : le padding:0 !important ci-dessous
       perdait contre le pa-2 !important de MudBlazor (charge APRES app.css, meme specificite ->
       l'ordre gagnait). Specificite superieure = le padding est desormais PILOTE ici : 8px de
       respiration laterale voulue (le bord a bord strict, teste S277, etait trop dur a l'ecran).
       La rangee couleurs (meme 100vw + meme padding 8px) s'aligne pile sur les miniatures photo. */
    .mud-paper.nemba-detail-media {
        width: 100vw;
        max-width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 0 8px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: var(--nemba-bg-page) !important;
    }
}

@media (max-width: 599px) {
    /* S277 - Recette COMMUNE << bordure mobile 8px >> (Regle 23 : 3e cas concret -> factorisation ;
       cas 1 fiche detail, cas 2 Home, cas 3 panier). Le layout (MainLayout) enveloppe chaque page
       dans un MudContainer a gouttiere 16px, et la page en ajoute un 2e (16px aussi) : marges
       negatives -16px pour annuler la gouttiere du layout (meme principe que .nemba-page-narrow
       S161), width +32px car .mud-container a width:100% fixe (des marges negatives seules
       decalent sans elargir), puis padding 8px = LA marge unique de la page en mobile.
       Usage : ajouter nemba-page-mobile-8 sur le MudContainer racine de la page. Les reglages
       specifiques d'une page (grille fiche, bandes Home) restent sous sa classe dediee. */
    .nemba-page-mobile-8.mud-container {
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 599px) {
    /* S277 - Marge unique 8px de la fiche detail en mobile (demande Thierry) : titre, etoiles,
       prix, libelles Couleur/Taille, boutons taille, stock, avis clients se calent sur la meme
       respiration 8px que les photos et la rangee couleurs. Le container est traite par la
       recette commune .nemba-page-mobile-8 ci-dessus ; ici on annule le padding HORIZONTAL des
       colonnes MudGrid (24px) ; le padding-top des items (rythme vertical) n'est pas touche.
       Les rangees full-bleed (photos, couleurs) restent centrees par construction (100vw +
       translateX independants des gouttieres). */
    .nemba-detail-page .mud-grid {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .nemba-detail-page .mud-grid > .mud-grid-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 599px) {
    /* S277 - Home mobile : bordure commune 8px (container traite par .nemba-page-mobile-8).
       Effet collateral vertueux : le container passe de largeur viewport-64 a viewport-16, donc
       les full-bleed calc(50% - 50vw) existants (hero, .nemba-section-alt) valent exactement -8px
       et retombent pile sur la bordure commune. */
    /* Bandes defilantes : decalages FIXES au lieu du calc(50vw - 50% + 10px) (base de calcul
       instable selon le contexte blanc/gris, cf. note S161 ; donnait une 1ere carte a ~10px en
       multi-cartes et ~43px a 1 carte). 1ere carte calee a 8px = la bordure commune ; la bande
       file toujours sous le bord droit de l'ecran au defilement. */
    .nemba-home-page .nemba-cat-scroll,
    .nemba-home-page .nemba-shelf-scroll {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
        scroll-padding-left: 8px;
    }
}

/* B-S182e (ADR-0045 D-S182-G/H) — Pastilles couleur (declinaisons soeurs) + boutons taille
   (variantes) sur la fiche produit. Static SSR strict D-S77-F : liens classiques, etats via
   classes (--current = actif non cliquable, --disabled = grise/epuise non cliquable). Aucun JS. */
.nemba-color-swatches,
.nemba-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
/* S275 (dette S274, audit D-S72-1) - Plafonne la rangee de couleurs a 540px pour l'aligner sur la
   largeur des photos (.nemba-carousel max-width:540px). Sans ce plafond, la largeur des cellules
   .nemba-color-swatch-cell = calc((100% - 72px)/4) suit la colonne de droite NON plafonnee -> les
   vignettes couleur deviennent plus larges que les photos sur grand ecran. Les pastilles de taille
   (.nemba-size-options) ne sont pas concernees (petites pastilles min-width:44px). */
.nemba-color-swatches {
    max-width: 540px;
    /* S277 - gap aligne sur la rangee de miniatures photo (24px au lieu du 14px partage avec
       .nemba-size-options) : le calc (100% - 72px)/4 des cellules suppose 3 gaps de 24px. Avec 14px
       il restait 30px de vide a droite et les colonnes couleur ne tombaient plus sous les photos. */
    gap: 24px;
}
/* S277 - Mobile (<600px) : la rangee de couleurs passe en pleine largeur avec respiration 8px, meme astuce
   que .nemba-detail-media (100vw + recentrage par translation ; piege cascade full-bleed : APRES
   la regle de base). Le max-width:540px de base reste actif -> entre 540 et 599px la rangee reste
   calee sur le carrousel. Resultat : cellules couleur = memes largeurs et memes colonnes que les
   miniatures photo (calc (100% - 72px)/4 sur un conteneur identique 100vw). */
@media (max-width: 599px) {
    .nemba-color-swatches {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        padding: 0 8px;   /* S277 - meme respiration 8px que .mud-paper.nemba-detail-media -> geometries identiques */
    }
}
.nemba-color-swatch {
    position: relative;   /* S274 — ancre le rond de teinte en overlay */
    display: inline-flex;
    width: 100%;                 /* S274 - remplit la cellule ; largeur pilotee par -cell (calc) */
    aspect-ratio: 104 / 139;     /* S274 - garde le ratio portrait d'origine (hauteur suit largeur) */
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px #e2e8f0;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nemba-color-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* S274 — Rond de teinte en OVERLAY coin bas-droite SUR la vignette (style Stitch). Liesere blanc
   + ombre pour ressortir sur n'importe quelle photo. Ancre par .nemba-color-swatch (position:relative). */
.nemba-color-dot {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* S200 — Cellule de pastille couleur : image portrait 3/4 + prix « dès X » dessous, le tout dans un
   cadre. Le lien/span englobe l'image ET le prix ; sur la couleur courante (--current) le cadre bleu
   entoure photo + prix. Bordure transparente par défaut = aucun saut de mise en page à la sélection.
   Static SSR pur (CSS + markup). */
.nemba-color-swatch-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    /* S274 - meme largeur que les vignettes photo du carrousel : calc identique (100% - 72px)/4.
       padding 0 => la photo remplit tout le cadre (plus de bord transparent). gap 0 : le prix sous
       la vignette est masque en S274. Espacement des couleurs gere par .nemba-color-swatches
       (gap 24px depuis S277, aligne photos). Si le gap photos change, aligner le 72px ET ce gap. */
    flex: 0 0 calc((100% - 72px) / 4);
    gap: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.nemba-color-swatch-cell:hover {
    border-color: var(--nemba-primary, #003d9b);
}
.nemba-color-swatch-cell--current {
    border-color: var(--nemba-primary, #003d9b);
    background: #eef3fb;
    cursor: default;
}
.nemba-color-swatch-price {
    font-size: 0.8rem;
    color: var(--nemba-primary, #003d9b);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.nemba-size-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: var(--nemba-text, #1e293b);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.nemba-size-option:hover {
    border-color: var(--nemba-primary, #003d9b);
    background: #eef3fb;
}
.nemba-size-option--current {
    border-color: var(--nemba-primary, #003d9b);
    background: var(--nemba-primary, #003d9b);
    color: #ffffff;
    cursor: default;
}
.nemba-size-option--disabled {
    color: #94a3b8;
    background: #f1f5f9;
    border-color: #e2e8f0;
    cursor: not-allowed;
    text-decoration: line-through;
    pointer-events: none;
}

/* =====================================================================
   S278 - Page confirmation reservation facon Stitch (/me/reservations/{id})
   - Grille 2 colonnes desktop (contenu large + sidebar 320px), empilee mobile.
   - Sidebar : recap financier bleu fonce (palette ADR-0027 --nemba-primary-dark)
     + mini-carte PE (iframe Google embed loading=lazy, 0 cle API, Q-S35-1 :
     tuiles telechargees seulement si visibles) + actions.
   - QR code : popover HTML natif (attributs popover/popovertarget, 0 JS ecrit,
     D-S77-F intact ; le navigateur gere ouverture/fermeture/backdrop).
   - Impression : bloc bon de retrait dedie .nemba-print-bon, invisible a
     l'ecran, seul visible a l'impression (technique visibility standard).
   ===================================================================== */

/* -- Grille 2 colonnes ------------------------------------------------- */
.nemba-resa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (min-width: 960px) {
    .nemba-resa-grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
    /* Sidebar sticky : reste visible pendant le scroll du detail commande. */
    .nemba-resa-side {
        position: sticky;
        top: 88px;
    }
}
.nemba-resa-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* -- Card recap financier (bleu fonce Stitch) -------------------------- */
.nemba-resa-fin {
    background: var(--nemba-primary-dark, #002d72);
    color: #ffffff;
    border-radius: 8px;
    padding: 20px;
}
.nemba-resa-fin-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 14px 0;
}
.nemba-resa-fin-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}
.nemba-resa-fin-row b {
    color: #ffffff;
}
.nemba-resa-fin-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin: 12px 0;
}
.nemba-resa-fin-total-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.nemba-resa-fin-total-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.nemba-resa-fin-total {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
}
.nemba-resa-fin-date {
    text-align: right;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}
.nemba-resa-fin-date b {
    display: block;
    color: #ffffff;
    font-size: 0.85rem;
}
.nemba-resa-fin-caption {
    margin-top: 12px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* -- Card mini-carte PE ------------------------------------------------- */
.nemba-resa-map {
    border: 1px solid var(--nemba-surface-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--nemba-surface-card, #ffffff);
}
.nemba-resa-map iframe {
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
}
.nemba-resa-map-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.8rem;
    color: var(--nemba-text-secondary, #64748b);
}
.nemba-resa-map-caption a {
    color: var(--nemba-primary, #003d9b);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nemba-resa-map-caption a:hover {
    text-decoration: underline;
}

/* -- Boutons sidebar (HTML natif : pas de MudButton pour porter
      popovertarget / onclick en Static SSR sans splatting hasardeux) ---- */
.nemba-side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nemba-side-btn--solid {
    background: var(--nemba-primary, #003d9b);
    color: #ffffff;
    border: 1px solid var(--nemba-primary, #003d9b);
}
.nemba-side-btn--solid:hover {
    background: var(--nemba-primary-dark, #002d72);
}
.nemba-side-btn--outlined {
    background: #ffffff;
    color: var(--nemba-primary, #003d9b);
    border: 1px solid #cbd5e1;
}
.nemba-side-btn--outlined:hover {
    border-color: var(--nemba-primary, #003d9b);
    background: #eef3fb;
}

/* -- Bouton d'ouverture du QR (dans la card code de retrait) ------------ */
.nemba-qr-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid var(--nemba-primary, #003d9b);
    background: #ffffff;
    color: var(--nemba-primary, #003d9b);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.nemba-qr-open-btn:hover {
    background: var(--nemba-primary, #003d9b);
    color: #ffffff;
}

/* -- Popover QR natif ---------------------------------------------------
   [popover] est masque par le navigateur tant qu'il n'est pas ouvert.
   ::backdrop assombrit la page derriere (gere nativement, 0 JS). */
.nemba-qr-popover {
    /* S278 fix centrage : le UA stylesheet centre un [popover] via margin:auto,
       mais un reset MudBlazor (margin:0) l'ecrase -> popover colle en haut a
       gauche. On repose explicitement le trio fixed + inset:0 + margin:auto
       qui centre horizontalement ET verticalement quel que soit le reset. */
    position: fixed;
    inset: 0;
    margin: auto;
    border: 1px solid var(--nemba-surface-border, #e2e8f0);
    border-radius: 12px;
    padding: 24px;
    width: min(340px, calc(100vw - 32px));
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.nemba-qr-popover::backdrop {
    background: rgba(15, 23, 42, 0.5);
}
.nemba-qr-popover img {
    width: 220px;
    height: 220px;
    max-width: 100%;
}
.nemba-qr-popover-help {
    font-size: 0.8rem;
    color: var(--nemba-text-secondary, #64748b);
    margin-bottom: 16px;
}

/* -- Bon de retrait imprimable ------------------------------------------
   Invisible a l'ecran. A l'impression : tout le reste passe en
   visibility:hidden, seul le bon est visible et repositionne en haut. */
.nemba-print-bon {
    display: none;
}
@media print {
    body * {
        visibility: hidden;
    }
    /* S278 fix 2 feuilles : visibility:hidden conserve la hauteur du flux et
       genere une 2e page vide. On retire du flux (display:none) les gros blocs
       connus ; le reste (marges, breadcrumb) tient sur la premiere page. */
    .mud-appbar,
    .nemba-footer,
    .nemba-resa-grid,
    .nemba-print-hide {
        display: none !important;
    }
    .nemba-print-bon {
        display: block !important;
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 24px;
        color: #000000;
    }
    .nemba-print-bon * {
        visibility: visible;
    }
    .nemba-print-bon .nemba-print-code {
        font-family: 'Courier New', monospace;
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        margin: 12px 0;
    }
    .nemba-print-bon table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
    }
    .nemba-print-bon th,
    .nemba-print-bon td {
        text-align: left;
        padding: 6px 4px;
        border-bottom: 1px solid #cccccc;
        font-size: 0.9rem;
    }
    .nemba-print-bon td:last-child,
    .nemba-print-bon th:last-child {
        text-align: right;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   S280 — Mini-carte Google Maps par carte point de retrait (/contact)
   Miroir .nemba-resa-map (S278, sidebar confirmation) — duplication assumee
   Regle 23 (2e cas concret, factorisation au 3e). Hauteur 180px adaptee aux
   cards de la grille /contact. iframe loading=lazy cote markup (4G RDC).
   ═════════════════════════════════════════════════════════════════════ */
.nemba-pe-map {
    border: 1px solid var(--nemba-surface-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--nemba-surface-card, #ffffff);
    margin-top: 12px;
}
.nemba-pe-map iframe {
    display: block;
    width: 100%;
    height: 180px;
    border: 0;
}
.nemba-pe-map-caption {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    font-size: 0.8rem;
}
.nemba-pe-map-caption a {
    color: var(--nemba-primary, #003d9b);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nemba-pe-map-caption a:hover {
    text-decoration: underline;
}