/* ============================================================
   css/style.css — SmartHome Suisse
   Design moderne, sobre, responsive — palette bleu / blanc / gris
   ============================================================ */


/* === VARIABLES & RESET === */

:root {
    /* Couleurs principales */
    --bleu:          #2563eb;
    --bleu-survol:   #1d4ed8;
    --bleu-clair:    #eff6ff;
    --bleu-leger:    #dbeafe;

    /* Neutres */
    --noir:          #0f172a;
    --gris-fonce:    #334155;
    --gris:          #64748b;
    --gris-clair:    #cbd5e1;
    --gris-leger:    #f1f5f9;
    --blanc:         #ffffff;

    /* Feedback */
    --vert:          #16a34a;
    --rouge:         #dc2626;

    /* Typographie */
    --police:        'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Espacements */
    --rayon:         10px;
    --rayon-lg:      16px;

    /* Ombres */
    --ombre-xs:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --ombre-sm:      0 4px 12px rgba(0,0,0,0.08);
    --ombre-md:      0 8px 24px rgba(0,0,0,0.12);
    --ombre-lg:      0 16px 40px rgba(0,0,0,0.14);

    /* Transitions */
    --transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);

    --largeur-max:   1200px;
    --navbar-h:      68px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--police);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gris-fonce);
    background-color: var(--gris-leger);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

a {
    color: var(--bleu);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--bleu-survol); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul { list-style: none; }

button { cursor: pointer; font-family: var(--police); }


/* === TYPOGRAPHIE === */

h1, h2, h3, h4 {
    color: var(--noir);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.1rem; }


/* === UTILITAIRES === */

.conteneur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section__titre {
    text-align: center;
    margin-bottom: 0.5rem;
}

.section__sous-titre {
    text-align: center;
    color: var(--gris);
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

.message-vide {
    text-align: center;
    color: var(--gris);
    padding: 4rem;
    grid-column: 1 / -1;
    font-size: 1.05rem;
}


/* === ANIMATIONS === */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* Ripple des boutons */
@keyframes ripple {
    from { transform: scale(0); opacity: 0.5; }
    to   { transform: scale(4); opacity: 0; }
}

/* Toast notifications */
@keyframes toastEntree {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastSortie {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.95); }
}

/* Check animé (succès) */
@keyframes checkDraw {
    from { stroke-dashoffset: 50; }
    to   { stroke-dashoffset: 0; }
}
@keyframes popIn {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}

/* Spinner chargement */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Entrance des pages ── */
main {
    animation: fadeIn 0.35s ease-out both;
}

/* ── Scroll animations ── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Délais en cascade dans les grilles */
.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.2s; }

/* ── Bouton : ripple ── */
.bouton {
    position: relative;
    overflow: hidden;
}
.bouton .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    pointer-events: none;
    animation: ripple 0.55s linear;
}
.bouton--outline .ripple,
.bouton--secondaire .ripple {
    background: rgba(37, 99, 235, 0.15);
}

/* ── Bouton : pression ── */
.bouton:active:not(:disabled) {
    transform: scale(0.97) !important;
    box-shadow: none !important;
}

/* ── Bouton en chargement ── */
.bouton.chargement {
    pointer-events: none;
    opacity: 0.78;
}
.bouton.chargement .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
.bouton:not(.chargement) .btn-spinner { display: none; }

/* ── Toast notifications ── */
.toast-conteneur {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--noir);
    color: var(--blanc);
    padding: 0.9rem 1.25rem;
    border-radius: var(--rayon-lg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 340px;
    pointer-events: all;
    animation: toastEntree 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.toast.sortie {
    animation: toastSortie 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.toast__icone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.toast--succes .toast__icone  { background: var(--vert); }
.toast--erreur .toast__icone  { background: var(--rouge); }
.toast--info   .toast__icone  { background: var(--bleu); }

.toast__texte { flex: 1; line-height: 1.4; }

/* ── Icône succès animée ── */
.succes-icone-animee {
    animation: popIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.succes-check {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkDraw 0.4s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Messages succès enrichis ── */
.contact-succes,
.commande-succes {
    animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Inputs : focus doux ── */
input:focus,
textarea:focus,
select:focus {
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* ── Cartes : hover lift ── */
.carte-produit {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-produit:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-md);
}


/* === BOUTONS === */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: var(--rayon);
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.bouton--primaire {
    background-color: var(--bleu);
    color: var(--blanc);
    border-color: var(--bleu);
}
.bouton--primaire:hover {
    background-color: var(--bleu-survol);
    border-color: var(--bleu-survol);
    color: var(--blanc);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    text-decoration: none;
}

.bouton--secondaire {
    background-color: transparent;
    color: var(--blanc);
    border-color: rgba(255,255,255,0.7);
}
.bouton--secondaire:hover {
    background-color: var(--blanc);
    color: var(--bleu);
    border-color: var(--blanc);
    transform: translateY(-2px);
    text-decoration: none;
}

.bouton--outline {
    background-color: transparent;
    color: var(--bleu);
    border-color: var(--bleu);
}
.bouton--outline:hover {
    background-color: var(--bleu);
    color: var(--blanc);
    transform: translateY(-2px);
    text-decoration: none;
}

.bouton--danger {
    background-color: var(--rouge);
    color: var(--blanc);
    border-color: var(--rouge);
}
.bouton--danger:hover {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: var(--blanc);
    text-decoration: none;
}

.bouton--petit {
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
}

.bouton--large {
    padding: 0.9rem 2.2rem;
    font-size: 1.05rem;
}

.bouton--bloc {
    display: flex;
    width: 100%;
}

.bouton--contour-blanc {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.85);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.bouton--contour-blanc:hover {
    border-color: var(--blanc);
    color: var(--blanc);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
}


/* === BADGES & ALERTES === */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge--rupture {
    background-color: var(--gris-leger);
    color: var(--gris);
    border: 1px solid var(--gris-clair);
}

.badge--succes {
    background-color: #dcfce7;
    color: var(--vert);
}

.badge--erreur {
    background-color: #fee2e2;
    color: var(--rouge);
}

.alerte {
    padding: 1rem 1.25rem;
    border-radius: var(--rayon);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    border-left: 4px solid transparent;
}

.alerte--succes {
    background-color: #f0fdf4;
    color: #15803d;
    border-color: var(--vert);
}

.alerte--erreur {
    background-color: #fef2f2;
    color: #b91c1c;
    border-color: var(--rouge);
}

.alerte--info {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    border-color: var(--bleu);
}


/* === NAVBAR === */

.navbar {
    background-color: var(--blanc);
    border-bottom: 1px solid var(--gris-clair);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--navbar-h);
    transition: box-shadow var(--transition);
}

.navbar.scrolled {
    box-shadow: var(--ombre-sm);
}

.navbar__container {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.navbar__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--noir);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.navbar__logo span { color: var(--bleu); }
.navbar__logo-icone {
    display: flex;
    align-items: center;
    color: var(--bleu);
}
.navbar__logo:hover { text-decoration: none; color: var(--noir); }

/* Menu (desktop) */
.navbar__menu {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
}

.navbar__lien {
    padding: 0.45rem 0.9rem;
    border-radius: var(--rayon);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gris-fonce);
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
    position: relative;
}
.navbar__lien::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0.9rem;
    right: 0.9rem;
    height: 2px;
    background-color: var(--bleu);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform var(--transition);
}
.navbar__lien:hover {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    text-decoration: none;
}
.navbar__lien--actif {
    color: var(--bleu);
    font-weight: 600;
    background-color: var(--bleu-clair);
}
.navbar__lien--actif::after {
    transform: scaleX(1);
}

/* Actions droite (panier + burger groupés) */
.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Icône panier */
.navbar__panier {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--rayon);
    color: var(--gris-fonce);
    transition: background-color var(--transition), color var(--transition);
    text-decoration: none;
}
.navbar__panier:hover {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    text-decoration: none;
}
.navbar__panier-compteur {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: var(--bleu);
    color: var(--blanc);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--blanc);
}

/* Bouton burger */
.navbar__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    border-radius: var(--rayon);
    padding: 0;
    transition: background-color var(--transition);
}
.navbar__burger:hover {
    background-color: var(--gris-leger);
}

.burger__barre {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--gris-fonce);
    border-radius: 2px;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        width 0.3s ease;
    transform-origin: center;
}

/* Burger → X quand menu ouvert */
.navbar__burger.actif .burger__barre--1 {
    transform: translateY(7px) rotate(45deg);
}
.navbar__burger.actif .burger__barre--2 {
    opacity: 0;
    width: 0;
}
.navbar__burger.actif .burger__barre--3 {
    transform: translateY(-7px) rotate(-45deg);
}


/* === HERO === */

.hero {
    background-image:
        linear-gradient(to bottom, rgba(10, 20, 40, 0.55) 0%, rgba(10, 20, 40, 0.38) 100%),
        url('/images/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--blanc);
    padding: 7rem 1.5rem 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero__contenu {
    max-width: 680px;
    margin: 0 auto;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero__badge {
    display: inline-block;
    background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--blanc);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.hero__titre {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.18;
    margin-bottom: 1.25rem;
    color: var(--blanc);
    letter-spacing: -0.02em;
}

.hero__titre span {
    color: #93c5fd;
}

.hero__sous-titre {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2.25rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
}

.hero__boutons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* === SECTION PRODUITS === */

.produits-section {
    padding: 5rem 0 4rem;
}

.produits-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.75rem;
}

.produits-voir-plus {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* Carte produit */
.carte-produit {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        box-shadow var(--transition),
        transform var(--transition),
        border-color var(--transition);
}
.carte-produit:hover {
    box-shadow: var(--ombre-md);
    transform: translateY(-5px);
    border-color: var(--bleu-leger);
}

.carte-produit__image-lien {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--gris-leger);
}

.carte-produit__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.carte-produit:hover .carte-produit__image {
    transform: scale(1.07);
}

.carte-produit__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris);
    font-size: 0.88rem;
}

.carte-produit__corps {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.55rem;
}

.carte-produit__categorie {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bleu);
    background-color: var(--bleu-clair);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
}

.carte-produit__nom {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--noir);
}
.carte-produit__nom a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}
.carte-produit__nom a:hover {
    color: var(--bleu);
}

.carte-produit__description {
    font-size: 0.88rem;
    color: var(--gris);
    line-height: 1.6;
    flex: 1;
}

.carte-produit__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gris-leger);
}

.carte-produit__prix {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.02em;
}

.carte-produit__prix-devise {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gris);
    margin-right: 0.1rem;
}

/* Promotion : badge + prix barré */
.badge--promo {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: var(--blanc);
}

.carte-produit__meta-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.carte-produit__prix-bloc {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.1;
}

.carte-produit__prix--promo {
    color: var(--rouge) !important;
}

.carte-produit__prix-barre {
    font-size: 0.8rem;
    color: var(--gris);
    text-decoration: line-through;
    font-weight: 500;
}


/* === SECTION AVANTAGES === */

.avantages-section {
    background: linear-gradient(135deg, var(--noir) 0%, #1e3a5f 100%);
    padding: 5rem 0;
}

.avantages-section .section__titre {
    color: var(--blanc);
    margin-bottom: 0.5rem;
}

.avantages-section .section__sous-titre {
    color: rgba(255,255,255,0.65);
    margin-bottom: 3.5rem;
}

.avantages-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

.avantage {
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--rayon-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.avantage:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-4px);
}

.avantage__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--bleu);
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    color: var(--blanc);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.avantage:hover .avantage__icone {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

.avantage__titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blanc);
    margin-bottom: 0.5rem;
}

.avantage__texte {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
}


/* === SECTION ENGAGEMENT (bleu nuit transparent sur body) === */

.engagement-section {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.07) 0%, rgba(37, 99, 235, 0.04) 100%);
    padding: 5rem 0 0;
}

.engagement-entete {
    text-align: center;
    margin-bottom: 3.5rem;
}

.engagement-badge {
    display: inline-flex;
    align-items: center;
    background: var(--bleu-clair);
    color: var(--bleu);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--bleu-leger);
    margin-bottom: 1rem;
}

.engagement-titre {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 0.875rem;
}

.engagement-sous-titre {
    color: var(--gris);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 500px;
    margin: 0 auto;
}

.engagement-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5rem;
}

.engagement-carte {
    background: var(--blanc);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: var(--rayon-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.engagement-carte:hover {
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.14);
    border-color: var(--bleu-leger);
    transform: translateY(-4px);
}

.engagement-carte__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--bleu);
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    color: var(--blanc);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    transition: transform var(--transition), box-shadow var(--transition);
}
.engagement-carte:hover .engagement-carte__icone {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

.engagement-carte__titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

.engagement-carte__texte {
    font-size: 0.88rem;
    color: var(--gris);
    line-height: 1.65;
}

/* Barre stats — bleu nuit légèrement plus opaque */
.engagement-stats {
    background: rgba(30, 58, 95, 0.1);
    border-top: 1px solid rgba(30, 58, 95, 0.1);
    margin-top: 3.5rem;
    padding: 2rem 0;
}

.engagement-stats__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.engagement-stat {
    text-align: center;
    padding: 0.75rem 1rem;
    border-right: 1px solid rgba(30, 58, 95, 0.12);
}
.engagement-stat:last-child { border-right: none; }

.engagement-stat__valeur {
    display: block;
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.engagement-stat__valeur span { color: var(--bleu); }

.engagement-stat__label {
    font-size: 0.8rem;
    color: var(--gris-fonce);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .engagement-grille          { grid-template-columns: repeat(2, 1fr); }
    .engagement-stats__grille   { grid-template-columns: repeat(2, 1fr); }
    .engagement-stat:nth-child(2) { border-right: none; }
    .engagement-stat:nth-child(3) {
        border-right: 1px solid rgba(30,58,95,0.12);
        border-top: 1px solid rgba(30,58,95,0.12);
    }
    .engagement-stat:nth-child(4) { border-top: 1px solid rgba(30,58,95,0.12); }
}

@media (max-width: 480px) {
    .engagement-grille  { grid-template-columns: 1fr; }
    .engagement-titre   { font-size: 1.5rem; }
}


/* === SECTION AVIS CLIENTS === */

.avis-section {
    background: var(--blanc);
    padding: 5rem 0;
}

/* Résumé : score global + barres distribution */
.avis-resume {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: var(--gris-leger);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-lg);
    padding: 2rem 2.5rem;
    max-width: 680px;
    margin: 0 auto 3.5rem;
}

.avis-score {
    text-align: center;
    flex-shrink: 0;
}

.avis-score__note {
    font-size: 3.75rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.avis-score__etoiles {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.avis-score__base {
    font-size: 0.78rem;
    color: var(--gris);
}

.avis-barres {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.avis-barre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
}

.avis-barre__label {
    color: var(--gris);
    min-width: 8px;
    text-align: right;
}

.avis-barre__piste {
    flex: 1;
    height: 6px;
    background: var(--gris-clair);
    border-radius: 999px;
    overflow: hidden;
}

.avis-barre__remplissage {
    height: 100%;
    background: #f59e0b;
    border-radius: 999px;
}

.avis-barre__pct {
    color: var(--gris);
    min-width: 28px;
    font-size: 0.72rem;
}

/* Grille 3 cartes */
.avis-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.avis-carte {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-lg);
    padding: 1.5rem;
    box-shadow: var(--ombre-xs);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: box-shadow var(--transition), border-color var(--transition);
}
.avis-carte:hover {
    box-shadow: var(--ombre-sm);
    border-color: var(--bleu-leger);
}

.avis-carte__haut {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.avis-carte__etoiles {
    display: flex;
    gap: 2px;
}

.avis-carte__guillemet {
    font-size: 2.75rem;
    line-height: 0.8;
    color: var(--bleu-leger);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    user-select: none;
}

.avis-carte__texte {
    font-size: 0.9rem;
    color: var(--gris-fonce);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
}

.avis-carte__produit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bleu);
    background: var(--bleu-clair);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    align-self: flex-start;
}
.avis-carte__produit::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bleu);
    flex-shrink: 0;
}

.avis-carte__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.875rem;
    border-top: 1px solid var(--gris-leger);
    margin-top: auto;
}

.avis-carte__auteur {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.avis-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avis-carte__nom {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--noir);
    line-height: 1.2;
}

.avis-carte__lieu {
    font-size: 0.73rem;
    color: var(--gris);
}

.avis-carte__verifie {
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--vert);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.avis-vide {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gris);
    font-size: 0.95rem;
}

/* Wrapper carrousel */
.avis-carrousel-wrapper {
    position: relative;
}

/* Dots de navigation (cachés sur desktop) */
.avis-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.avis-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--gris-clair);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.avis-dot--actif {
    background: var(--bleu);
    width: 24px;
}

/* Desktop : grille 3 colonnes */
@media (max-width: 900px) {
    .avis-resume { flex-direction: column; gap: 1.5rem; }
}

/* Mobile : carrousel horizontal avec snap */
@media (max-width: 768px) {

    .avis-grille {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0.25rem 0 1rem;
        scrollbar-width: none;
        /* Déborde légèrement du conteneur pour que le prochain avis soit visible */
        margin: 0 -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .avis-grille::-webkit-scrollbar { display: none; }

    .avis-carte {
        flex: 0 0 82%;
        min-width: 260px;
        scroll-snap-align: start;
        /* Animation douce au snap */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow  0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Indice visuel : légère opacité sur les cartes hors vue */
    .avis-grille .avis-carte:not(:first-child) {
        opacity: 0.92;
    }

    /* Fade hint à droite — montre qu'il y a du contenu à glisser */
    .avis-carrousel-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 1rem;
        width: 48px;
        background: linear-gradient(to left, var(--blanc), transparent);
        pointer-events: none;
        z-index: 1;
    }

    .avis-dots { display: flex; }

    .avis-resume { padding: 1.5rem; }
}


/* === FORMULAIRES === */

.formulaire {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 2.25rem;
    max-width: 500px;
    margin: 0 auto;
}

.formulaire__titre {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    text-align: center;
    color: var(--noir);
}

.champ {
    margin-bottom: 1.25rem;
}

.champ label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--gris-fonce);
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--gris-clair);
    border-radius: var(--rayon);
    font-size: 0.95rem;
    font-family: var(--police);
    color: var(--noir);
    background-color: var(--blanc);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    appearance: none;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.champ textarea {
    resize: vertical;
    min-height: 130px;
}


/* === FOOTER === */

.footer {
    background-color: #0f172a;
    color: #94a3b8;
    font-family: var(--police);
}

/* -- Section haute : marque + contacts -- */
.footer__haut {
    border-bottom: 1px solid #1e293b;
    padding: 2.75rem 0 2.25rem;
}

.footer__haut-interieur {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
}

.footer__marque {
    max-width: 440px;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blanc);
    text-decoration: none;
    margin-bottom: 0.85rem;
    letter-spacing: -0.02em;
}
.footer__logo-puce {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #22c55e;
    flex-shrink: 0;
}
.footer__logo span { color: #93c5fd; }

.footer__slogan {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

.footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: rgba(34,197,94,0.08);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* -- Bloc contacts -- */
.footer__contact-bloc {
    min-width: 240px;
}

.footer__titre {
    color: var(--blanc);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.footer__contact-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer__contact-liste li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.footer__icone-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #1e293b;
    color: #94a3b8;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.footer__contact-liste a {
    color: #94a3b8;
    text-decoration: none;
    transition: color var(--transition);
}
.footer__contact-liste a:hover { color: var(--blanc); }

/* -- Corps : 4 colonnes de navigation -- */
.footer__corps {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.footer__col {}

.footer__liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer__liste a {
    color: #94a3b8;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition);
}
.footer__liste a:hover { color: var(--blanc); }

/* -- Réseaux sociaux -- */
.footer__reseaux {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.footer__reseau {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.1rem 0.55rem 0.65rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--blanc);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition), transform var(--transition);
}
.footer__reseau:hover { opacity: 0.85; transform: translateX(3px); color: var(--blanc); }

.footer__reseau-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background-color: rgba(255,255,255,0.18);
    flex-shrink: 0;
}

.footer__reseau--fb  { background-color: #1877f2; }
.footer__reseau--ig  { background: linear-gradient(135deg, #833ab4, #fd1d1d, #f77737); }
.footer__reseau--tw  { background-color: #1da1f2; }

/* -- Bouton retour en haut -- */
.footer__retour-conteneur {
    text-align: center;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #1e293b;
}

.footer__retour-btn {
    background: transparent;
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 0.55rem 2rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: var(--police);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.footer__retour-btn:hover {
    border-color: #94a3b8;
    color: var(--blanc);
}

/* -- Barre paiements -- */
.footer__paiements-barre {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #1e293b;
    gap: 1rem;
}

.footer__paiements-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.footer__paiements-logos {
    display: flex;
    gap: 0.5rem;
}

.footer__paiement-tag {
    background-color: #1e293b;
    color: var(--blanc);
    border-radius: 6px;
    padding: 0.28rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.footer__paiement-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
    background-color: var(--blanc);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
}

/* -- Barre basse : copyright + liens légaux -- */
.footer__bas {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #1e293b;
    font-size: 0.84rem;
    color: #475569;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer__liens-legaux {
    display: flex;
    gap: 1.25rem;
}

.footer__liens-legaux a {
    color: #475569;
    text-decoration: none;
    font-size: 0.84rem;
    transition: color var(--transition);
}
.footer__liens-legaux a:hover { color: var(--blanc); }

/* -- Responsive footer -- */
@media (max-width: 900px) {
    .footer__haut-interieur {
        flex-direction: column;
        gap: 2rem;
    }
    .footer__corps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer__corps {
        grid-template-columns: 1fr;
    }
    .footer__badges {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer__bas {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer__paiements-barre {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* === ADMIN — NAVBAR === */

.navbar-admin {
    background-color: var(--noir);
    color: #94a3b8;
    height: var(--navbar-h);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.navbar-admin__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
}

.navbar-admin__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--blanc);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar-admin__logo strong { color: #93c5fd; }
.navbar-admin__logo:hover { color: var(--blanc); text-decoration: none; }

.navbar-admin__logo-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: var(--bleu);
    border-radius: 8px;
    color: var(--blanc);
    flex-shrink: 0;
}

.navbar-admin__menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1;
}

.navbar-admin__lien {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.65rem;
    border-radius: var(--rayon);
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
    white-space: nowrap;
}
.navbar-admin__lien:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--blanc);
    text-decoration: none;
}
.navbar-admin__lien--actif {
    background-color: var(--bleu);
    color: var(--blanc);
}
.navbar-admin__lien--actif:hover {
    background-color: var(--bleu-survol);
}

.navbar-admin__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.navbar-admin__utilisateur {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
}

.navbar-admin__deconnexion {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background-color: rgba(220, 38, 38, 0.12);
    color: #fca5a5;
    border-radius: var(--rayon);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
    white-space: nowrap;
}
.navbar-admin__deconnexion:hover {
    background-color: var(--rouge);
    color: var(--blanc);
    text-decoration: none;
}

.navbar-admin__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: var(--rayon);
    padding: 0;
    transition: background-color var(--transition);
}
.navbar-admin__burger:hover { background: rgba(255,255,255,0.14); }
.navbar-admin__burger .burger__barre { background-color: #94a3b8; }


/* === ADMIN — LAYOUT GÉNÉRAL === */

.page-admin-layout {
    background-color: #f0f4f8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.admin-main {
    flex: 1;
    padding: 2rem 0 3rem;
}

.admin-conteneur {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* En-tête de page admin */
.admin-page-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.admin-page-titre {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--noir);
    margin-bottom: 0.2rem;
}

.admin-page-sous-titre {
    font-size: 0.9rem;
    color: var(--gris);
}

.bouton--secondaire-admin {
    background-color: var(--blanc);
    color: var(--gris-fonce);
    border: 1.5px solid var(--gris-clair);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--rayon);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.bouton--secondaire-admin:hover {
    border-color: var(--bleu);
    color: var(--bleu);
    text-decoration: none;
    box-shadow: var(--ombre-xs);
}


/* === ADMIN — CARTES STATISTIQUES === */

.admin-stats-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.admin-stat-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.05);
    transition: box-shadow var(--transition), transform var(--transition);
}
.admin-stat-carte:hover {
    box-shadow: var(--ombre-sm);
    transform: translateY(-2px);
}

.admin-stat-carte__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    color: var(--blanc);
}

.admin-stat-carte--bleu   .admin-stat-carte__icone { background-color: var(--bleu); }
.admin-stat-carte--orange .admin-stat-carte__icone { background-color: #f59e0b; }
.admin-stat-carte--vert   .admin-stat-carte__icone { background-color: var(--vert); }
.admin-stat-carte--violet .admin-stat-carte__icone { background-color: #7c3aed; }

.admin-stat-carte__corps {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-stat-carte__valeur {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--noir);
    line-height: 1.2;
    white-space: nowrap;
}

.admin-stat-carte__label {
    font-size: 0.8rem;
    color: var(--gris);
    margin-top: 0.2rem;
    white-space: nowrap;
}


/* === ADMIN — GRILLE PRINCIPALE (tableau + accès rapides) === */

.admin-grille-principale {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

.admin-bloc {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

.admin-bloc__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gris-leger);
}

.admin-bloc__titre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
}

.admin-bloc__lien-tout {
    font-size: 0.83rem;
    color: var(--bleu);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
}
.admin-bloc__lien-tout:hover { color: var(--bleu-survol); }


/* === ADMIN — TABLEAU === */

.admin-tableau-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-tableau th {
    text-align: left;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    background-color: var(--gris-leger);
    white-space: nowrap;
}

.admin-tableau td {
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--gris-leger);
    color: var(--gris-fonce);
    vertical-align: middle;
}

.admin-tableau tbody tr:last-child td { border-bottom: none; }
.admin-tableau tbody tr:hover td { background-color: #f8fafc; }

.admin-tableau__id {
    font-weight: 700;
    color: var(--gris) !important;
    font-size: 0.82rem;
}

/* Badges statuts commandes */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.admin-badge--vert   { background: #dcfce7; color: #15803d; }
.admin-badge--orange { background: #fef3c7; color: #b45309; }
.admin-badge--bleu   { background: var(--bleu-leger); color: var(--bleu); }
.admin-badge--rouge  { background: #fee2e2; color: #b91c1c; }
.admin-badge--gris   { background: var(--gris-leger); color: var(--gris); }


/* === ADMIN — ACCÈS RAPIDES === */

.admin-acces-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.admin-acces-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--gris-fonce);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--gris-leger);
    transition: background-color var(--transition), color var(--transition);
    position: relative;
}
.admin-acces-carte:hover {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    text-decoration: none;
}
.admin-acces-carte svg { color: var(--gris); transition: color var(--transition); }
.admin-acces-carte:hover svg { color: var(--bleu); }

.admin-acces-carte__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rouge);
    color: var(--blanc);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    font-style: normal;
    margin-left: 0.3rem;
}

.admin-vide {
    padding: 2.5rem;
    text-align: center;
    color: var(--gris);
    font-size: 0.9rem;
}


/* === ADMIN — PRODUITS (liste) === */

/* Tableau desktop */
.admin-produits-tableau-wrapper {
    overflow-x: auto;
}

.admin-produit-miniature {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gris-clair);
    display: block;
}

.admin-produit-miniature--vide {
    background-color: var(--gris-leger);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gris-clair);
}

.admin-produit-nom {
    font-weight: 600;
    color: var(--noir);
    display: block;
    font-size: 0.9rem;
}

.admin-produit-id {
    font-size: 0.75rem;
    color: var(--gris);
    display: block;
    margin-top: 0.1rem;
}

.admin-cell-gris {
    color: var(--gris);
    font-size: 0.88rem;
}

.admin-stock {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--noir);
}

.admin-stock--bas {
    color: var(--rouge);
}

/* Boutons d'action dans le tableau */
.admin-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-actions--carte {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gris-leger);
}

.admin-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
    white-space: nowrap;
    font-family: var(--police);
}

.admin-btn-action--modifier {
    background-color: var(--bleu-clair);
    color: var(--bleu);
}
.admin-btn-action--modifier:hover {
    background-color: var(--bleu);
    color: var(--blanc);
    text-decoration: none;
}

.admin-btn-action--supprimer {
    background-color: #fee2e2;
    color: var(--rouge);
}
.admin-btn-action--supprimer:hover {
    background-color: var(--rouge);
    color: var(--blanc);
}

.admin-btn-action--bloque {
    background-color: var(--gris-leger);
    color: var(--gris-clair);
    cursor: not-allowed;
}

.admin-ligne-active td {
    background-color: var(--bleu-clair) !important;
}

/* Version cartes mobile (masquée sur desktop) */
.admin-produits-cartes {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.admin-produit-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}

.admin-produit-carte__entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.admin-produit-carte__image {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gris-clair);
    flex-shrink: 0;
}

.admin-produit-carte__image--vide {
    background-color: var(--gris-leger);
}

.admin-produit-carte__info {
    flex: 1;
    min-width: 0;
}

.admin-produit-carte__meta {
    display: flex;
    gap: 1.5rem;
    padding: 0.6rem 1.25rem;
    background-color: var(--gris-leger);
    font-size: 0.88rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}


/* === ADMIN — FORMULAIRE PRODUIT === */

.admin-formulaire__grille {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}

.admin-formulaire__col--droite {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-formulaire__section-titre {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gris);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gris-leger);
}

.admin-formulaire__deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.champ-requis {
    color: var(--rouge);
    margin-left: 2px;
}

/* Zone d'upload */
.admin-upload-zone {
    position: relative;
    border: 2px dashed var(--gris-clair);
    border-radius: var(--rayon);
    background-color: var(--gris-leger);
    transition: border-color var(--transition), background-color var(--transition);
    overflow: hidden;
    min-height: 140px;
    cursor: pointer;
}

.admin-upload-zone:hover {
    border-color: var(--bleu);
    background-color: var(--bleu-clair);
}

.admin-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.admin-upload-contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--gris);
    cursor: pointer;
    width: 100%;
}

.admin-upload-contenu svg { color: var(--gris-clair); margin-bottom: 0.25rem; }
.admin-upload-contenu p  { font-size: 0.88rem; line-height: 1.5; }
.admin-upload-contenu strong { color: var(--bleu); }

.admin-upload-info {
    font-size: 0.78rem !important;
    color: var(--gris-clair) !important;
}

.admin-upload-apercu {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

/* Aperçu image actuelle */
.admin-apercu-image {
    margin-bottom: 1rem;
}

.admin-apercu-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--rayon);
    border: 1px solid var(--gris-clair);
}

.admin-apercu-image__legende {
    font-size: 0.78rem;
    color: var(--gris);
    text-align: center;
    margin-top: 0.4rem;
}

/* Boutons formulaire */
.admin-formulaire__boutons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}


/* === ADMIN — COMMANDES === */

/* Badge dans la navbar admin */
.navbar-admin__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f59e0b;
    color: var(--blanc);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
    margin-left: 0.25rem;
}

/* Filtres par statut */
.admin-filtres-statut {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.admin-filtre-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--gris-clair);
    color: var(--gris-fonce);
    background-color: var(--blanc);
    transition: all var(--transition);
    white-space: nowrap;
}
.admin-filtre-btn:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.admin-filtre-btn--actif { background-color: var(--noir); color: var(--blanc); border-color: var(--noir); }

.admin-filtre-btn--orange { border-color: #fde68a; color: #b45309; background: #fef3c7; }
.admin-filtre-btn--orange.admin-filtre-btn--actif { background: #f59e0b; color: var(--blanc); border-color: #f59e0b; }
.admin-filtre-btn--bleu   { border-color: var(--bleu-leger); color: var(--bleu); background: var(--bleu-clair); }
.admin-filtre-btn--bleu.admin-filtre-btn--actif { background: var(--bleu); color: var(--blanc); }
.admin-filtre-btn--vert   { border-color: #bbf7d0; color: #15803d; background: #f0fdf4; }
.admin-filtre-btn--vert.admin-filtre-btn--actif { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.admin-filtre-btn--violet { border-color: #ddd6fe; color: #7c3aed; background: #f5f3ff; }
.admin-filtre-btn--violet.admin-filtre-btn--actif { background: #7c3aed; color: var(--blanc); border-color: #7c3aed; }
.admin-filtre-btn--rouge  { border-color: #fecaca; color: var(--rouge); background: #fef2f2; }
.admin-filtre-btn--rouge.admin-filtre-btn--actif { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

.admin-filtre-btn__nb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
    border-radius: 999px;
    font-size: 0.72rem;
    min-width: 18px;
    height: 18px;
    padding: 0 0.3rem;
}
.admin-filtre-btn--actif .admin-filtre-btn__nb { background-color: rgba(255,255,255,0.25); }

/* Ligne surlignée en verification */
.admin-ligne-alerte td { background-color: #fffbeb !important; }
.admin-ligne-alerte:hover td { background-color: #fef3c7 !important; }

/* Tableau commandes desktop */
.admin-commandes-tableau-wrapper { overflow-x: auto; }
.admin-commandes-cartes { display: none; flex-direction: column; gap: 1rem; }

.admin-commande-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}
.admin-commande-carte--alerte { border-color: #f59e0b; background-color: #fffbeb; }

.admin-commande-carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--gris-leger);
}
.admin-commande-carte__client {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem 1.25rem;
}
.admin-commande-carte__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--gris-leger);
    font-size: 0.88rem;
}

/* Actions admin (boutons groupés) */
.admin-detail-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--gris-clair);
    box-shadow: var(--ombre-xs);
}

/* Grille de détail (3 blocs) */
.admin-detail-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.admin-detail-bloc { padding: 0; }

.admin-detail-infos {
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.admin-detail-ligne {
    display: flex;
    gap: 1rem;
    font-size: 0.88rem;
    align-items: baseline;
}

.admin-detail-label {
    font-weight: 600;
    color: var(--gris);
    min-width: 80px;
    flex-shrink: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Total tableau commande */
.admin-tableau-total td {
    background-color: var(--gris-leger) !important;
    border-top: 2px solid var(--gris-clair) !important;
}

/* Violet pour badge */
.admin-badge--violet { background: #f5f3ff; color: #7c3aed; }


/* === ADMIN — RESPONSIVE LARGE (≤ 1280px) — collapse navbar en burger === */

@media (max-width: 1280px) {

    .navbar-admin__utilisateur { display: none; }
    .navbar-admin__deconnexion span { display: none; }
    .navbar-admin__deconnexion { padding: 0.4rem; border-radius: var(--rayon); }

    .navbar-admin__burger { display: flex; }

    .navbar-admin__menu {
        display: none;
        position: absolute;
        top: var(--navbar-h);
        left: 0;
        right: 0;
        background-color: #1e293b;
        border-top: 1px solid rgba(255,255,255,0.08);
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem 1rem;
        gap: 0.2rem;
        box-shadow: var(--ombre-sm);
        animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
        z-index: 999;
    }

    .navbar-admin__menu.ouvert { display: flex; }

    .navbar-admin__lien {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}


/* === ADMIN — RESPONSIVE TABLETTE (≤ 1024px) === */

@media (max-width: 1024px) {

    .admin-stats-grille {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-grille-principale {
        grid-template-columns: 1fr;
    }

    .admin-formulaire__grille {
        grid-template-columns: 1fr;
    }
    .admin-formulaire__col--droite {
        order: -1;
    }
}


/* === ADMIN — RESPONSIVE MOBILE (≤ 768px) === */

@media (max-width: 768px) {

    .admin-page-entete {
        flex-direction: column;
        gap: 0.75rem;
    }

    .admin-stats-grille {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }

    .admin-stat-carte {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 0.75rem;
        gap: 0.75rem;
    }

    .admin-stat-carte__valeur { font-size: 1.3rem; }

    .admin-tableau th,
    .admin-tableau td { padding: 0.7rem 1rem; }

    /* Passer du tableau aux cartes sur mobile */
    .admin-produits-tableau-wrapper  { display: none; }
    .admin-produits-cartes           { display: flex; }
    .admin-commandes-tableau-wrapper { display: none; }
    .admin-commandes-cartes          { display: flex; }

    /* Grille détail commande : 1 colonne */
    .admin-detail-grille { grid-template-columns: 1fr; }
    .admin-detail-actions { flex-direction: column; align-items: stretch; }
    .admin-detail-actions .bouton,
    .admin-detail-actions .admin-btn-action { width: 100%; justify-content: center; }

    .admin-formulaire__deux-colonnes {
        grid-template-columns: 1fr;
    }
    .admin-formulaire__boutons {
        flex-direction: column-reverse;
    }
    .admin-formulaire__boutons .bouton {
        width: 100%;
        justify-content: center;
    }
}


/* === ADMIN — RESPONSIVE PETIT MOBILE (≤ 480px) === */

@media (max-width: 480px) {

    .admin-stats-grille {
        grid-template-columns: 1fr;
    }

    .admin-stat-carte {
        flex-direction: row;
        text-align: left;
    }
}


/* === AUTHENTIFICATION CLIENT === */

/* Fond de page pour les pages connexion/inscription */
.page-auth-fond {
    background-color: var(--gris-leger);
    min-height: calc(100vh - var(--navbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

/* Wrapper centré — version large pour inscription (2 colonnes) */
.auth-wrapper--large {
    max-width: 540px;
}

/* Deux colonnes dans le formulaire (prénom / nom) */
.auth-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Label optionnel */
.champ-optionnel {
    font-size: 0.78rem;
    color: var(--gris);
    font-weight: 400;
}

/* Aide sous un champ */
.champ-aide {
    font-size: 0.78rem;
    color: var(--gris);
    margin-top: 0.3rem;
}

/* Navbar : "Bonjour, Prénom" */
.navbar__client-bonjour {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--noir);
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
}

/* Lien "Créer un compte" — léger accent */
.navbar__lien--inscription {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    font-weight: 600;
}
.navbar__lien--inscription:hover {
    background-color: var(--bleu);
    color: var(--blanc);
}

/* Recherche dans le menu déroulant mobile — cachée sur desktop */
.navbar__menu-recherche {
    display: none;
}

/* Barre de recherche dans la navbar — entre le logo et le menu */
.navbar__recherche {
    display: flex;
    align-items: center;
    background: var(--gris-leger);
    border: 1.5px solid var(--gris-clair);
    border-radius: 999px;
    padding: 0 0.35rem 0 0.85rem;
    gap: 0.3rem;
    transition: border-color var(--transition);
    width: 220px;
    flex-shrink: 1;
    min-width: 0;
}
.navbar__recherche:focus-within {
    border-color: var(--bleu);
}
.navbar__recherche-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: var(--noir);
    padding: 0.45rem 0;
}
.navbar__recherche-input::placeholder { color: var(--gris); }
.navbar__recherche-input::-webkit-search-cancel-button { display: none; }
.navbar__recherche-btn {
    background: var(--bleu);
    color: var(--blanc);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition);
}
.navbar__recherche-btn:hover { background: var(--bleu-survol); }

/* Admin : case à cocher promotion */
.champ-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}
.champ-checkbox__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gris-fonce);
    user-select: none;
}
.champ-checkbox__label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bleu);
    cursor: pointer;
    flex-shrink: 0;
}

/* Responsive auth */
@media (max-width: 480px) {
    .auth-deux-colonnes {
        grid-template-columns: 1fr;
    }
    .page-auth-fond {
        align-items: flex-start;
        padding: 1.5rem 1rem;
    }
}


/* === PAGES ADMIN AUTH (connexion) === */

.page-admin-auth {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-wrapper {
    width: 100%;
    max-width: 420px;
}

.auth-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-lg);
    padding: 2.5rem 2.25rem;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.auth-carte__entete {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-carte__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background-color: var(--bleu-clair);
    color: var(--bleu);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.auth-carte__titre {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--noir);
    margin-bottom: 0.25rem;
}

.auth-carte__sous-titre {
    font-size: 0.9rem;
    color: var(--gris);
}

/* Champ mot de passe avec bouton œil */
.champ-mdp {
    position: relative;
}

.champ-mdp input {
    padding-right: 2.8rem;
}

.champ-mdp__oeil {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gris);
    padding: 0;
    display: flex;
    align-items: center;
    transition: color var(--transition);
}
.champ-mdp__oeil:hover { color: var(--bleu); }

.auth-carte__retour {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: var(--gris);
}
.auth-carte__retour a {
    color: var(--gris);
    transition: color var(--transition);
}
.auth-carte__retour a:hover { color: var(--bleu); }

/* === PAGE ADMIN DASHBOARD === */

.page-admin {
    background-color: var(--gris-leger);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.admin-placeholder {
    width: 100%;
    max-width: 480px;
}

.admin-placeholder__carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    padding: 3rem 2.5rem;
    text-align: center;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.admin-placeholder__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background-color: var(--bleu-clair);
    color: var(--bleu);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.admin-placeholder__titre {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--noir);
    margin-bottom: 0.75rem;
}

.admin-placeholder__texte {
    color: var(--gris);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 2rem;
}


/* === CATALOGUE === */

.catalogue-entete {
    background: linear-gradient(135deg, var(--noir) 0%, #1e3a5f 100%);
    padding: 3.5rem 1.5rem 2.75rem;
    text-align: center;
}

.catalogue-entete__badge {
    display: inline-block;
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.catalogue-entete__titre {
    color: var(--blanc);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: 0.5rem;
}

.catalogue-entete__sous-titre {
    color: rgba(255,255,255,0.65);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.catalogue-entete__garanties {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.catalogue-garantie {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.8);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 500;
}

/* En-tête de grille produits */
.catalogue-grille-entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.catalogue-grille-titre {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.02em;
}

.catalogue-grille-compteur {
    font-size: 0.9rem;
    color: var(--gris);
    white-space: nowrap;
}

/* Tag recherche active dans les filtres */
.catalogue-recherche-active {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bleu-clair);
    color: var(--bleu);
    border: 1.5px solid var(--bleu-leger);
    border-radius: 999px;
    padding: 0.35rem 0.75rem 0.35rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.catalogue-recherche-effacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 0.65rem;
    text-decoration: none;
    line-height: 1;
    font-weight: 700;
}

/* État vide enrichi */
.catalogue-vide__titre {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

/* Bande avantages bas de catalogue */
.catalogue-avantages {
    background: var(--gris-leger);
    border-top: 1px solid var(--gris-clair);
    padding: 2rem 0;
    margin-top: 3rem;
}

.catalogue-avantages__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.catalogue-avantage {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-right: 1px solid var(--gris-clair);
}
.catalogue-avantage:last-child { border-right: none; }

.catalogue-avantage svg {
    flex-shrink: 0;
    color: var(--bleu);
}

.catalogue-avantage div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.catalogue-avantage strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--noir);
}

.catalogue-avantage span {
    font-size: 0.78rem;
    color: var(--gris);
}

@media (max-width: 900px) {
    .catalogue-avantages__grille { grid-template-columns: repeat(2, 1fr); }
    .catalogue-avantage:nth-child(2) { border-right: none; }
    .catalogue-avantage:nth-child(3) { border-top: 1px solid var(--gris-clair); }
    .catalogue-avantage:nth-child(4) { border-top: 1px solid var(--gris-clair); }
}

@media (max-width: 540px) {
    .catalogue-avantages__grille { grid-template-columns: 1fr; }
    .catalogue-avantage { border-right: none; border-top: 1px solid var(--gris-clair); }
    .catalogue-avantage:first-child { border-top: none; }
    .catalogue-grille-entete { flex-direction: column; align-items: flex-start; }
}

/* Filtres catégorie */
.catalogue-filtres-section {
    background-color: var(--blanc);
    border-bottom: 1px solid var(--gris-clair);
    padding: 1rem 0;
    position: sticky;
    top: var(--navbar-h);
    z-index: 50;
}

.catalogue-filtres {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.catalogue-filtre-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--gris-fonce);
    background-color: var(--gris-leger);
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.catalogue-filtre-btn:hover {
    background-color: var(--bleu-clair);
    color: var(--bleu);
    text-decoration: none;
}
.catalogue-filtre-btn--actif {
    background-color: var(--bleu);
    color: var(--blanc);
    border-color: var(--bleu);
}
.catalogue-filtre-btn--actif:hover {
    background-color: var(--bleu-survol);
    color: var(--blanc);
}

/* Carte produit cliquable (stretched link) */
.carte-produit {
    position: relative;
}
.carte-produit__lien-global {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.carte-produit__bouton,
.carte-produit__nom a {
    position: relative;
    z-index: 2;
}

/* Zone vide catalogue */
.catalogue-vide {
    text-align: center;
    padding: 5rem 1.5rem;
    color: var(--gris);
}
.catalogue-vide svg {
    display: block;
    margin: 0 auto 1.25rem;
    color: var(--gris-clair);
}


/* === DÉTAIL PRODUIT === */

/* Miniature vidéo dans la galerie */
.produit-galerie__miniature--video {
    background: var(--noir);
    border: 2px solid var(--gris-clair);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.produit-video-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0.3rem;
    color: var(--blanc);
}

.produit-video-thumb span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.85);
}

.produit-galerie__miniature--video:hover,
.produit-galerie__miniature--video.produit-galerie__miniature--active {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Conteneur vidéo (remplace l'image dans la zone principale) */
.produit-video-conteneur {
    width: 100%;
    height: 100%;
    min-height: 340px;
    background: #000;
    border-radius: var(--rayon-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.produit-video-conteneur iframe,
.produit-video-conteneur video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Zone principale : position relative pour superposer image / vidéo */
.produit-galerie__principale {
    position: relative;
}

/* CSS admin : aperçu vidéo enregistrée */
.admin-video-apercu {
    background: var(--gris-leger);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.admin-video-apercu__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vert);
}

.admin-video-apercu__lien {
    font-size: 0.8rem;
    color: var(--bleu);
    text-decoration: none;
    word-break: break-all;
    line-height: 1.4;
}
.admin-video-apercu__lien:hover { text-decoration: underline; }

/* Fil d'Ariane */
.fil-ariane {
    background-color: var(--blanc);
    border-bottom: 1px solid var(--gris-clair);
}
.fil-ariane__liste {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    list-style: none;
    font-size: 0.85rem;
    color: var(--gris);
}
.fil-ariane__liste li + li::before {
    content: '/';
    margin-right: 0.4rem;
    color: var(--gris-clair);
}
.fil-ariane__liste a {
    color: var(--gris);
    text-decoration: none;
    transition: color var(--transition);
}
.fil-ariane__liste a:hover { color: var(--bleu); }
.fil-ariane__liste [aria-current] { color: var(--noir); font-weight: 500; }

/* Layout détail */
.produit-detail-section {
    padding: 3rem 0 4rem;
}

.produit-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

/* Galerie */
.produit-galerie__principale {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--gris-clair);
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.produit-galerie__img-active {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.produit-galerie__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--gris-clair);
    background-color: var(--gris-leger);
}

.produit-galerie__miniatures {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}
.produit-galerie__miniature {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    border: 2px solid var(--gris-clair);
    overflow: hidden;
    cursor: pointer;
    background: none;
    padding: 0;
    transition: border-color var(--transition);
    flex-shrink: 0;
}
.produit-galerie__miniature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.produit-galerie__miniature:hover { border-color: var(--bleu); }
.produit-galerie__miniature--active {
    border-color: var(--bleu);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* Infos produit */
.produit-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.produit-info__nom {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--noir);
    line-height: 1.25;
}

/* Note étoiles */
:root { --etoile-couleur: #f59e0b; }
.etoiles {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.produit-info__note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.produit-info__note-texte {
    font-size: 0.92rem;
    color: var(--gris-fonce);
    font-weight: 600;
}
.produit-info__note-nb { color: var(--gris); font-weight: 400; }
.produit-info__note--aucun { color: var(--gris); font-size: 0.9rem; margin: 0; }

/* Prix */
.produit-info__prix {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.produit-info__prix-devise {
    font-size: 1.1rem;
    color: var(--gris);
    font-weight: 500;
}
.produit-info__prix-valeur {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.02em;
}

/* Disponibilité */
.produit-info__dispo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.produit-info__dispo-badge--dispo  { background: #f0fdf4; color: var(--vert); }
.produit-info__dispo-badge--bas    { background: #fef3c7; color: #b45309; }
.produit-info__dispo-badge--rupture { background: #fef2f2; color: var(--rouge); }

/* Description */
.produit-info__description {
    color: var(--gris-fonce);
    font-size: 0.95rem;
    line-height: 1.75;
    padding: 1.25rem;
    background-color: var(--gris-leger);
    border-radius: var(--rayon);
    border-left: 3px solid var(--bleu-leger);
}

/* Sélecteur de quantité */
.produit-info__panier {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--gris-clair);
    box-shadow: var(--ombre-xs);
}
.produit-info__quantite {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.produit-info__quantite-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gris-fonce);
    white-space: nowrap;
}
.quantite-controle {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--gris-clair);
    border-radius: var(--rayon);
    overflow: hidden;
}
.quantite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--gris-leger);
    border: none;
    color: var(--gris-fonce);
    cursor: pointer;
    transition: background-color var(--transition);
}
.quantite-btn:hover { background: var(--bleu-clair); color: var(--bleu); }
.quantite-input {
    width: 60px;
    height: 38px;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--gris-clair);
    border-right: 1.5px solid var(--gris-clair);
    font-size: 1rem;
    font-weight: 600;
    color: var(--noir);
    background: var(--blanc);
    outline: none;
    -moz-appearance: textfield;
}
.quantite-input::-webkit-outer-spin-button,
.quantite-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.produit-info__indispo {
    padding: 1rem 1.25rem;
    background: #fef2f2;
    color: var(--rouge);
    border-radius: var(--rayon);
    font-size: 0.9rem;
    border-left: 3px solid var(--rouge);
}

/* Garanties */
.produit-info__garanties {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gris-leger);
}
.garantie {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--gris);
}
.garantie svg { color: var(--bleu); flex-shrink: 0; }


/* === AVIS CLIENTS === */

.avis-section {
    background-color: var(--blanc);
    padding: 4rem 0 5rem;
    border-top: 1px solid var(--gris-clair);
}

.avis-section__compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bleu);
    color: var(--blanc);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.1rem 0.6rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.avis-resume {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0 2.5rem;
    padding: 1.5rem;
    background-color: var(--gris-leger);
    border-radius: var(--rayon-lg);
}

.avis-resume__note {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.avis-resume__valeur {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--noir);
    line-height: 1;
    letter-spacing: -0.03em;
}

.avis-resume__total {
    font-size: 0.88rem;
    color: var(--gris);
    margin-left: 0.25rem;
}

.avis-liste {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.avis-carte {
    background-color: var(--gris-leger);
    border-radius: var(--rayon-lg);
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,0.04);
}

.avis-carte__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.avis-carte__auteur {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avis-carte__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bleu);
    color: var(--blanc);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avis-carte__date {
    display: block;
    font-size: 0.78rem;
    color: var(--gris);
    margin-top: 0.15rem;
}

.avis-carte__commentaire {
    font-size: 0.93rem;
    color: var(--gris-fonce);
    line-height: 1.7;
}

.avis-vide {
    text-align: center;
    padding: 3rem;
    color: var(--gris);
}
.avis-vide svg { margin: 0 auto 1rem; display: block; }


/* === PANIER === */

.panier-conteneur {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* Panier vide */
.panier-vide {
    text-align: center;
    padding: 5rem 1.5rem;
    max-width: 420px;
    margin: 0 auto;
}
.panier-vide__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--gris-leger);
    color: var(--gris-clair);
    margin-bottom: 1.5rem;
}
.panier-vide__titre {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--noir);
}
.panier-vide__texte {
    color: var(--gris);
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

/* Layout desktop : articles + récap côte à côte */
.panier-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

/* Bloc articles */
.panier-articles {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--ombre-xs);
    overflow: hidden;
}

.panier-articles__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gris-leger);
}

.panier-articles__titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
}

.panier-btn-vider {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gris);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: color var(--transition), background-color var(--transition);
    font-family: var(--police);
}
.panier-btn-vider:hover { color: var(--rouge); background-color: #fee2e2; }

/* Tableau desktop */
.panier-tableau-wrapper { overflow-x: auto; }

.panier-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.panier-tableau th {
    text-align: left;
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris);
    background-color: var(--gris-leger);
}
.panier-tableau td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--gris-leger);
    vertical-align: middle;
}
.panier-tableau tbody tr:last-child td { border-bottom: none; }
.panier-tableau tbody tr:hover td { background-color: #f8fafc; }

.panier-miniature {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--gris-clair);
    display: block;
}
.panier-miniature--vide {
    background-color: var(--gris-leger);
}

.panier-produit-nom {
    font-weight: 600;
    color: var(--noir);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color var(--transition);
    display: block;
}
.panier-produit-nom:hover { color: var(--bleu); }

.panier-cell-prix { color: var(--gris-fonce); font-weight: 500; }
.panier-cell-sous-total { color: var(--noir); font-size: 0.95rem; }

/* Quantité dans le tableau (version affichage seul) */
.panier-qte-form { display: inline-flex; }
.quantite-affichage {
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-left: 1.5px solid var(--gris-clair);
    border-right: 1.5px solid var(--gris-clair);
    background-color: var(--blanc);
}

.panier-btn-retirer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--gris-leger);
    border: none;
    color: var(--gris);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}
.panier-btn-retirer:hover { background-color: #fee2e2; color: var(--rouge); }

/* Cartes mobile (masquées sur desktop) */
.panier-cartes { display: none; flex-direction: column; }

.panier-carte {
    border-top: 1px solid var(--gris-leger);
}
.panier-carte:first-child { border-top: none; }

.panier-carte__entete {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
}
.panier-carte__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.panier-carte__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem 1rem;
    background-color: var(--gris-leger);
}

/* Récapitulatif */
.panier-recapitulatif {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: calc(var(--navbar-h) + 1rem);
}

.panier-recap__bloc {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--ombre-xs);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.panier-recap__titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gris-leger);
}

.panier-recap__lignes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panier-recap__ligne {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--gris);
}

.panier-recap__livraison {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--gris-clair);
}
.panier-recap__livraison-gratuite {
    color: var(--vert);
    font-weight: 600;
}

.panier-recap__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.75rem;
    border-top: 2px solid var(--noir);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--noir);
}

.panier-recap__continuer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gris);
    text-decoration: none;
    transition: color var(--transition);
}
.panier-recap__continuer:hover { color: var(--bleu); }

.panier-recap__garanties {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Responsive panier */
@media (max-width: 900px) {
    .panier-layout {
        grid-template-columns: 1fr;
    }
    .panier-articles {
        order: 1;
    }
    .panier-recapitulatif {
        position: static;
        order: 2;
    }
}

@media (max-width: 768px) {
    .panier-tableau-wrapper { display: none; }
    .panier-cartes          { display: flex; }
}


/* === AVIS CLIENTS FORMULAIRE === */

.avis-formulaire-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gris-clair);
}

.avis-formulaire-titre {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 1.25rem;
}

.avis-formulaire-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background-color: var(--gris-leger);
    border-radius: var(--rayon);
    font-size: 0.9rem;
    color: var(--gris-fonce);
    border: 1px solid var(--gris-clair);
}
.avis-formulaire-message--info {
    background-color: var(--bleu-clair);
    border-color: var(--bleu-leger);
    color: var(--bleu);
}

.avis-formulaire {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 540px;
}

/* Sélecteur étoiles CSS pur (RTL trick) */
.avis-etoiles-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.2rem;
}
.avis-etoiles-input input[type="radio"] { display: none; }
.avis-etoiles-input label {
    color: var(--gris-clair);
    cursor: pointer;
    transition: color 0.15s ease;
}
.avis-etoiles-input label:hover,
.avis-etoiles-input label:hover ~ label,
.avis-etoiles-input input:checked ~ label {
    color: #f59e0b;
}


/* === MES COMMANDES === */

/* CTA création de compte pour les invités */
.mes-commandes-invite-cta {
    background: linear-gradient(135deg, var(--noir) 0%, #1e3a5f 100%);
    border-radius: var(--rayon-lg);
    padding: 2.25rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.mes-commandes-invite-cta__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--blanc);
    flex-shrink: 0;
}

.mes-commandes-invite-cta__texte {
    flex: 1;
    min-width: 220px;
}

.mes-commandes-invite-cta__titre {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--blanc);
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}

.mes-commandes-invite-cta__sous-titre {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
}

.mes-commandes-invite-cta__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .mes-commandes-invite-cta {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .mes-commandes-invite-cta__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

.mes-commandes-conteneur {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.mes-commandes-liste {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 860px;
    margin: 0 auto;
}

.mes-commandes-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--ombre-xs);
    overflow: hidden;
}

.mes-commandes-carte__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    gap: 1rem;
    text-align: left;
    font-family: var(--police);
    transition: background-color var(--transition);
}
.mes-commandes-carte__toggle:hover { background-color: var(--gris-leger); }

.mes-commandes-carte__gauche {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mes-commandes-carte__num {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--noir);
}
.mes-commandes-carte__date {
    font-size: 0.8rem;
    color: var(--gris);
}
.mes-commandes-carte__droite {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.mes-commandes-carte__total {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--noir);
    white-space: nowrap;
}
.mes-commandes-carte__chevron {
    color: var(--gris);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.mes-commandes-carte__detail {
    border-top: 1px solid var(--gris-leger);
}

.mes-commandes-detail-paiement {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    background-color: var(--gris-leger);
    flex-wrap: wrap;
    font-size: 0.88rem;
}
.mes-commandes-detail-label { color: var(--gris); }

.mes-commandes-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.mes-commandes-tableau th {
    text-align: left;
    padding: 0.6rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gris);
    background-color: #f8fafc;
}
.mes-commandes-tableau td {
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid var(--gris-leger);
    color: var(--gris-fonce);
}
.mes-commandes-tableau td a { color: var(--bleu); font-weight: 500; }
.mes-commandes-tableau tfoot td {
    background-color: var(--gris-leger);
    border-bottom: none;
    font-weight: 700;
}

/* Badges réutilisables page client */
.badge-cmde {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-cmde--gris   { background: var(--gris-leger); color: var(--gris); }
.badge-cmde--orange { background: #fef3c7; color: #b45309; }
.badge-cmde--vert   { background: #dcfce7; color: #15803d; }
.badge-cmde--bleu   { background: var(--bleu-clair); color: var(--bleu); }
.badge-cmde--rouge  { background: #fee2e2; color: var(--rouge); }


/* === CONTACT === */

.formulaire-carte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-xs);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 2rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
    padding-top: 3rem;
    padding-bottom: 0;
}

.contact-formulaire-col { display: flex; flex-direction: column; gap: 1.5rem; }

/* Titre au-dessus du formulaire */
.contact-form-entete { margin-bottom: 0.25rem; }
.contact-form-titre {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--noir);
    margin: 0.5rem 0 0.4rem;
    letter-spacing: -0.02em;
}
.contact-form-sous-titre { font-size: 0.9rem; color: var(--gris); line-height: 1.6; }

/* Succès enrichi */
.contact-succes {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid #bbf7d0;
    padding: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}
.contact-succes__icone {
    width: 72px;
    height: 72px;
    background-color: #dcfce7;
    color: var(--vert);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-succes__titre { font-size: 1.5rem; font-weight: 800; color: var(--noir); }
.contact-succes__texte { color: var(--gris); line-height: 1.65; max-width: 380px; }
.contact-succes__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Sidebar */
.contact-infos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: calc(var(--navbar-h) + 1rem);
}

.contact-infos__entete { margin-bottom: 0.25rem; }
.contact-infos__titre {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--noir);
    margin: 0.5rem 0 0;
    letter-spacing: -0.02em;
}

/* Cartes sidebar */
.contact-sidebar-cartes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contact-sidebar-carte {
    background: var(--blanc);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: var(--rayon-lg);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
    padding: 1rem 1.1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: box-shadow var(--transition), transform var(--transition);
}
.contact-sidebar-carte:hover {
    box-shadow: var(--ombre-sm);
    transform: translateX(3px);
}

.contact-sidebar-carte__badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
    flex-shrink: 0;
}

.contact-sidebar-carte__titre {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.2rem;
}

.contact-sidebar-carte__texte {
    font-size: 0.8rem;
    color: var(--gris);
    line-height: 1.55;
}

/* Liens rapides sidebar */
.contact-liens-rapides {
    background: var(--gris-leger);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--gris-clair);
    padding: 1.1rem 1.25rem;
}

.contact-liens-rapides__titre {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.contact-lien-rapide {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bleu);
    text-decoration: none;
    border-bottom: 1px solid var(--gris-clair);
    transition: color var(--transition), gap var(--transition);
}
.contact-lien-rapide:last-child { border-bottom: none; }
.contact-lien-rapide:hover { color: var(--bleu-survol); gap: 0.75rem; }

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 0;
    }
    .contact-infos {
        position: static;
    }
    .contact-sidebar-cartes {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}
@media (max-width: 540px) {
    .contact-sidebar-cartes { grid-template-columns: 1fr; }
    .contact-succes__actions { flex-direction: column; align-items: stretch; }
    .mes-commandes-carte__toggle { padding: 0.85rem 1rem; }
    .mes-commandes-tableau th,
    .mes-commandes-tableau td { padding: 0.6rem 0.85rem; }
}


/* === ADMIN MESSAGES === */

.admin-messages-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
    align-items: start;
    min-height: 500px;
}

.admin-messages-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--ombre-xs);
    overflow: hidden;
}

.admin-message-item {
    display: block;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gris-leger);
    transition: background-color var(--transition);
}
.admin-message-item:last-child { border-bottom: none; }
.admin-message-item:hover { background-color: var(--gris-leger); }
.admin-message-item--actif { background-color: var(--bleu-clair) !important; }
.admin-message-item--nonlu { border-left: 3px solid var(--bleu); }

.admin-message-item__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.admin-message-item__expediteur {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--noir);
    min-width: 0;
}
.admin-message-nonlu-dot {
    width: 8px;
    height: 8px;
    background-color: var(--bleu);
    border-radius: 50%;
    flex-shrink: 0;
}
.admin-message-item__date { font-size: 0.75rem; color: var(--gris); white-space: nowrap; }
.admin-message-item__sujet {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gris-fonce);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-message-item__apercu {
    font-size: 0.78rem;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-message-meta {
    background-color: var(--gris-leger);
    border-radius: var(--rayon);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-message-contenu {
    font-size: 0.95rem;
    color: var(--gris-fonce);
    line-height: 1.75;
    white-space: pre-wrap;
    background-color: var(--gris-leger);
    border-radius: var(--rayon);
    padding: 1.25rem;
    border-left: 3px solid var(--bleu-leger);
}

.admin-messages-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 300px;
    color: var(--gris);
    font-size: 0.9rem;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 900px) {
    .admin-messages-layout {
        grid-template-columns: 1fr;
    }
}


/* === ADMIN — CLIENTS === */

.admin-clients-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
    min-height: 500px;
}

.admin-clients-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--ombre-xs);
    overflow: hidden;
}

.admin-client-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--gris-leger);
    transition: background-color var(--transition);
    color: var(--gris-fonce);
}
.admin-client-item:last-child { border-bottom: none; }
.admin-client-item:hover { background-color: var(--gris-leger); }
.admin-client-item--actif { background-color: var(--bleu-clair) !important; }

.admin-client-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bleu-leger);
    color: var(--bleu);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.admin-client-avatar--lg {
    width: 30px;
    height: 30px;
    font-size: 0.7rem;
}

.admin-client-item__info {
    flex: 1;
    min-width: 0;
}
.admin-client-item__nom {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--noir);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-client-item__email {
    font-size: 0.75rem;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-client-item__badge {
    flex-shrink: 0;
}

.admin-client-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-clients-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 300px;
    color: var(--gris);
    font-size: 0.9rem;
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 900px) {
    .admin-clients-layout {
        grid-template-columns: 1fr;
    }
}


/* === RESPONSIVE — CATALOGUE & PRODUIT === */

@media (max-width: 900px) {
    .produit-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .produit-galerie__principale {
        aspect-ratio: 4/3;
    }
}

@media (max-width: 768px) {
    .catalogue-filtres {
        gap: 0.4rem;
    }
    .catalogue-filtres-section {
        top: var(--navbar-h);
    }
    .produit-info__prix-valeur { font-size: 1.8rem; }

    .avis-resume {
        padding: 1rem;
    }
    .avis-resume__valeur { font-size: 2rem; }
}

@media (max-width: 480px) {
    .produit-galerie__miniature {
        width: 54px;
        height: 54px;
    }
    .produit-info__garanties {
        flex-direction: column;
        gap: 0.65rem;
    }
    .produit-info__panier {
        padding: 1rem;
    }
}


/* === COMMANDE (tunnel) === */

.commande-confirmation-conteneur {
    max-width: 680px;
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.commande-succes-conteneur {
    max-width: 600px;
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
}

/* Layout principal : formulaire + sidebar */
.commande-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* Sidebar recap (réutilise les classes panier) */
.commande-recap {
    position: sticky;
    top: calc(var(--navbar-h) + 1rem);
}

/* Formulaire principal */
.commande-formulaire {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Bloc choix auth (invité vs connecté) */
.commande-choix-auth {
    border-radius: var(--rayon-lg);
    overflow: hidden;
    border: 1px solid var(--gris-clair);
}

.commande-choix-auth__principal {
    background-color: var(--blanc);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gris-clair);
}

.commande-choix-auth__titre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.4rem;
}

.commande-badge-rapide {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    background-color: var(--vert);
    color: var(--blanc);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.commande-choix-auth__texte {
    font-size: 0.88rem;
    color: var(--gris);
    line-height: 1.5;
}

.commande-choix-auth__secondaire {
    background-color: var(--gris-leger);
    padding: 0.9rem 1.5rem;
    font-size: 0.85rem;
    color: var(--gris);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Sections numérotées */
.commande-section {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.5rem;
    box-shadow: var(--ombre-xs);
}

.commande-section__titre {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 1.25rem;
}

.commande-section__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--bleu);
    color: var(--blanc);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Grilles formulaire */
.commande-deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.commande-trois-colonnes {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: 1rem;
}

/* Client connecté badge */
.commande-client-connecte {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background-color: var(--bleu-clair);
    border-radius: var(--rayon);
    font-size: 0.9rem;
    color: var(--gris-fonce);
    flex-wrap: wrap;
}
.commande-client-connecte__changer {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--rouge);
}

/* Adresses existantes (radio) */
.commande-adresses-sauvegardees {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.commande-adresse-radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    border: 1.5px solid var(--gris-clair);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}
.commande-adresse-radio:has(input:checked) {
    border-color: var(--bleu);
    background-color: var(--bleu-clair);
}
.commande-adresse-radio input[type="radio"] { accent-color: var(--bleu); }
.commande-adresse-radio__texte { font-size: 0.88rem; color: var(--gris-fonce); }
.commande-adresse-radio__texte--nouvelle { color: var(--bleu); font-weight: 600; }

/* Bouton soumettre + lien retour */
.commande-soumettre {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}
.commande-retour-lien {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gris);
    text-decoration: none;
    transition: color var(--transition);
}
.commande-retour-lien:hover { color: var(--bleu); }

/* Étapes de progression commande */
.commande-etapes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 3rem;
    position: relative;
}

.commande-etapes::before {
    content: '';
    position: absolute;
    top: 22px;
    left: calc(100% / 6 + 22px);
    right: calc(100% / 6 + 22px);
    height: 2px;
    background: var(--gris-clair);
    z-index: 0;
}

.commande-etape {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 0.5rem;
}

.commande-etape__cercle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gris-leger);
    border: 2px solid var(--gris-clair);
    color: var(--gris);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
    transition: background var(--transition), border-color var(--transition);
}

.commande-etape__label {
    font-size: 0.8rem;
    color: var(--gris);
    font-weight: 500;
    line-height: 1.3;
}

.commande-etape--actif .commande-etape__cercle {
    background: var(--bleu);
    border-color: var(--bleu);
    color: var(--blanc);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}
.commande-etape--actif .commande-etape__label {
    color: var(--bleu);
    font-weight: 700;
}

.commande-etape--fait .commande-etape__cercle {
    background: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
}
.commande-etape--fait .commande-etape__label {
    color: var(--vert);
    font-weight: 600;
}

/* En-tête section paiement */
.commande-paiement-entete {
    margin-bottom: 1.5rem;
}
.commande-paiement-titre {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--noir);
    margin: 0.5rem 0 0.35rem;
    letter-spacing: -0.02em;
}
.commande-paiement-sous-titre {
    font-size: 0.9rem;
    color: var(--gris);
    line-height: 1.55;
}

/* Modes de paiement */
.commande-paiement-form { max-width: 580px; }

.commande-modes-paiement {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.commande-mode-carte {
    display: block;
    border: 2px solid var(--gris-clair);
    border-radius: var(--rayon-lg);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}
.commande-mode-carte:has(.commande-mode-radio:checked) {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.commande-mode-radio { display: none; }

.commande-mode-carte__contenu { padding: 1.25rem; }

.commande-mode-carte__entete {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0;
}
.commande-mode-carte:has(.commande-mode-radio:checked) .commande-mode-carte__entete {
    margin-bottom: 1rem;
}

.commande-mode-carte__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.commande-mode-carte__icone--twint    { background-color: #ff0066; color: var(--blanc); }
.commande-mode-carte__icone--virement { background-color: var(--bleu-clair); color: var(--bleu); }

.commande-mode-carte__logo {
    width: 64px;
    height: 42px;
    object-fit: contain;
    border-radius: 8px;
    background-color: var(--blanc);
    border: 1px solid var(--gris-clair);
    padding: 4px 8px;
    flex-shrink: 0;
}

.commande-mode-carte__nom {
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
}

.commande-mode-info { display: block; }
.commande-mode-info__label { font-size: 0.78rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
.commande-mode-info__valeur { font-size: 1.05rem; font-weight: 700; color: var(--noir); margin-bottom: 0.1rem; }
.commande-iban { font-family: 'Courier New', monospace; font-size: 0.95rem; letter-spacing: 0.05em; }
.commande-mode-info__texte { font-size: 0.85rem; color: var(--gris); line-height: 1.5; margin-top: 0.5rem; }

/* Succès final */
.commande-succes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.commande-succes__icone {
    width: 80px;
    height: 80px;
    background-color: #dcfce7;
    color: var(--vert);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.commande-succes__titre { font-size: 1.8rem; font-weight: 800; color: var(--noir); }
.commande-succes__texte { color: var(--gris); font-size: 1rem; line-height: 1.65; max-width: 440px; }

/* Prochaines étapes succès */
.commande-succes__prochaines {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 460px;
    margin: 0.5rem 0;
    text-align: left;
}

.commande-succes__prochaine {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--gris-leger);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-lg);
    padding: 1rem 1.25rem;
}

.commande-succes__prochaine-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
}

.commande-succes__prochaine strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.2rem;
}

.commande-succes__prochaine p {
    font-size: 0.82rem;
    color: var(--gris);
    line-height: 1.5;
    margin: 0;
}

/* === MES COMMANDES — MESSAGE STATUT CLIENT === */
.mes-commandes-statut-texte {
    padding: 0.6rem 1.25rem;
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.45;
    border-top: 1px solid var(--bordure);
}
.mes-commandes-statut-texte--orange { color: #92400e; background: #fffbeb; }
.mes-commandes-statut-texte--bleu   { color: #1e40af; background: #eff6ff; }
.mes-commandes-statut-texte--vert   { color: #166534; background: #f0fdf4; }
.mes-commandes-statut-texte--violet { color: #5b21b6; background: #f5f3ff; }
.mes-commandes-statut-texte--rouge  { color: #991b1b; background: #fef2f2; }
.mes-commandes-statut-texte--gris   { color: #4b5563; background: #f9fafb; }

/* === ADMIN — APERÇU MULTI-IMAGES === */
.admin-upload-apercu-grille {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
    padding: 0.85rem;
    width: 100%;
    align-items: start;
}
.admin-upload-apercu-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.admin-upload-apercu-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.admin-upload-apercu-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--bleu);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    line-height: 1.3;
    pointer-events: none;
}
.admin-upload-apercu-suppr {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.admin-upload-apercu-item:hover .admin-upload-apercu-suppr { opacity: 1; }
.admin-upload-btn-plus {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 2px dashed var(--bordure);
    background: #f8fafc;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    min-height: 80px;
}
.admin-upload-btn-plus:hover {
    border-color: var(--bleu);
    color: var(--bleu);
    background: #eff6ff;
}

/* === TRANSITION SUCCÈS === */
@keyframes succes-pop {
    from { transform: scale(0) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
@keyframes succes-carte {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.succes-conteneur {
    padding: 3rem 1rem 4rem;
    display: flex;
    justify-content: center;
}

.succes-carte {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
    border: 1px solid var(--bordure);
    padding: 2.5rem 2rem 2rem;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    animation: succes-carte 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.succes-carte__cercle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(34,197,94,0.3);
    animation: succes-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

.succes-carte__info {
    font-size: 0.88rem;
    color: var(--gris);
    margin: 0;
}

.succes-transition__barre-fond {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}

.succes-transition__barre-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--bleu), #22c55e);
    border-radius: 99px;
}

.succes-transition__compteur {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 480px) {
    .succes-carte { padding: 2rem 1.25rem 1.5rem; }
}

/* === PAIEMENT — LIGNES AVEC BOUTON COPIER === */
.paiement-lignes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.75rem 0 0.5rem;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    overflow: hidden;
}
.paiement-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #fff;
    border-bottom: 1px solid var(--bordure);
}
.paiement-ligne:last-child { border-bottom: none; }
.paiement-ligne__label {
    font-size: 0.76rem;
    color: var(--gris);
    min-width: 150px;
    flex-shrink: 0;
}
.paiement-ligne__valeur {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--noir);
    flex: 1;
    word-break: break-all;
}
.paiement-ligne__valeur--mono {
    font-family: 'Courier New', monospace;
    font-size: 0.83rem;
    letter-spacing: 0.03em;
}
.paiement-copier-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    border: 1px solid var(--bordure);
    background: #f8fafc;
    border-radius: 6px;
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.paiement-copier-btn:hover {
    border-color: var(--bleu);
    color: var(--bleu);
    background: #eff6ff;
}
.paiement-copier-btn--copie {
    border-color: #16a34a !important;
    color: #16a34a !important;
    background: #f0fdf4 !important;
}
.paiement-copier-tout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.6rem 1rem;
    border: 1.5px dashed var(--bordure);
    border-radius: 8px;
    background: none;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.paiement-copier-tout:hover {
    border-color: var(--bleu);
    color: var(--bleu);
    background: #eff6ff;
}
.paiement-copier-tout--copie {
    border-color: #16a34a !important;
    color: #16a34a !important;
    background: #f0fdf4 !important;
}
@media (max-width: 480px) {
    .paiement-ligne { flex-wrap: wrap; gap: 0.35rem; }
    .paiement-ligne__label { min-width: 100%; }
    .paiement-ligne__valeur { flex: none; }
}

/* === ADMIN — SÉLECTEUR STATUT COMMANDE === */
.select-statut {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 0.3rem 1.8rem 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    transition: border-color 0.15s;
    max-width: 175px;
}
.select-statut:hover  { border-color: rgba(0,0,0,0.15); }
.select-statut:focus  { border-color: var(--bleu); }

.select-statut--en_attente      { background-color: #f3f4f6; color: #374151; }
.select-statut--en_verification { background-color: #dbeafe; color: #1e40af; }
.select-statut--confirmee       { background-color: #dcfce7; color: #166534; }
.select-statut--expediee        { background-color: #ede9fe; color: #5b21b6; }
.select-statut--livree          { background-color: #d1fae5; color: #065f46; }
.select-statut--annulee         { background-color: #fee2e2; color: #991b1b; }

.admin-statut-select-wrapper {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-statut-select-label {
    font-size: 0.8rem;
    color: var(--gris);
    white-space: nowrap;
}

/* Boutons d'action succès */
.commande-succes__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Encart optionnel création de compte invité */
.commande-creer-compte {
    background-color: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px dashed var(--gris-clair);
    padding: 1.75rem;
    text-align: left;
    max-width: 480px;
    margin: 1rem auto 0;
}
.commande-creer-compte__titre {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}
.commande-creer-compte__texte {
    font-size: 0.88rem;
    color: var(--gris);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}
.commande-creer-compte__form { display: flex; flex-direction: column; gap: 0.85rem; }


/* === RESPONSIVE COMMANDE === */

@media (max-width: 900px) {
    .commande-layout {
        grid-template-columns: 1fr;
    }
    .commande-recap {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .commande-deux-colonnes,
    .commande-trois-colonnes {
        grid-template-columns: 1fr;
    }
    .commande-etape__label { font-size: 0.72rem; }
    .commande-etapes::before { left: calc(100% / 6 + 22px); right: calc(100% / 6 + 22px); }
    .commande-succes__actions { flex-direction: column; align-items: stretch; }
    .commande-choix-auth__secondaire {
        flex-wrap: wrap;
    }
}


/* === PAGE INTÉRIEURE === */

.page-interieure {
    max-width: var(--largeur-max);
    margin: 2.5rem auto;
    padding: 0 1.5rem;
}

.page-interieure__titre {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--noir);
}


/* === PAGE À PROPOS === */

.apropos-mission-section {
    background-color: var(--blanc);
    padding: 5rem 0;
    border-bottom: 1px solid var(--gris-clair);
}

.apropos-mission {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 4rem;
    align-items: center;
    margin-top: 2.5rem;
}

.apropos-mission__texte p {
    color: var(--gris-fonce);
    line-height: 1.85;
    font-size: 1rem;
    margin-bottom: 1.1rem;
}
.apropos-mission__texte p:last-child { margin-bottom: 0; }

.apropos-mission__visuels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.apropos-stat-mini {
    background: var(--gris-leger);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon-lg);
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: box-shadow var(--transition), transform var(--transition);
}
.apropos-stat-mini:hover {
    box-shadow: var(--ombre-sm);
    transform: translateY(-3px);
}

.apropos-stat-mini__val {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--noir);
    letter-spacing: -0.04em;
    line-height: 1;
}
.apropos-stat-mini__val span { color: var(--bleu); }

.apropos-stat-mini__label {
    font-size: 0.78rem;
    color: var(--gris);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .apropos-mission {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .apropos-mission__visuels {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .apropos-mission__visuels {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* === PAGE CGV === */

.cgv-section {
    background-color: var(--blanc);
    padding: 5rem 0;
}

.cgv-liste {
    display: grid;
    gap: 1rem;
    max-width: 860px;
    margin: 0 auto;
}

.cgv-article {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--gris-leger);
    border-radius: var(--rayon-lg);
    border: 1px solid var(--gris-clair);
    padding: 1.75rem;
    transition: box-shadow var(--transition), transform var(--transition);
}
.cgv-article:hover {
    box-shadow: var(--ombre-sm);
    transform: translateX(4px);
}

.cgv-article__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cgv-article__titre {
    font-size: 1rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

.cgv-article__texte {
    font-size: 0.9rem;
    color: var(--gris-fonce);
    line-height: 1.8;
}

/* Grille paiements 2×2 sur confidentialité */
.livraison-paiements--quatre {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
    .cgv-article { flex-direction: column; }
    .livraison-paiements--quatre { grid-template-columns: 1fr; }
}


/* === PAGE LIVRAISON === */

.livraison-processus-section {
    background-color: var(--blanc);
    padding: 5rem 0;
}

.livraison-processus {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    counter-reset: etape;
}

.livraison-processus::before {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(12.5% + 24px);
    right: calc(12.5% + 24px);
    height: 2px;
    background: linear-gradient(90deg, var(--bleu-leger), var(--bleu), var(--bleu-leger));
    z-index: 0;
}

.livraison-etape {
    text-align: center;
    padding: 0 1.25rem;
    position: relative;
    z-index: 1;
}

.livraison-etape__num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bleu);
    color: var(--blanc);
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    border: 3px solid var(--blanc);
    outline: 2px solid var(--bleu-leger);
}

.livraison-etape__titre {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

.livraison-etape__texte {
    font-size: 0.85rem;
    color: var(--gris);
    line-height: 1.65;
}

.livraison-note {
    text-align: center;
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--gris);
}
.livraison-note a {
    color: var(--bleu);
    font-weight: 600;
    text-decoration: none;
}
.livraison-note a:hover { text-decoration: underline; }

/* Section paiements */
.livraison-paiement-section {
    background-color: var(--gris-leger);
    padding: 5rem 0;
}

.livraison-paiements {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.livraison-paiement-carte {
    background: var(--blanc);
    border-radius: var(--rayon-lg);
    border: 1px solid rgba(30, 58, 95, 0.1);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
    padding: 2rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: box-shadow var(--transition), transform var(--transition);
}
.livraison-paiement-carte:hover {
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.12);
    transform: translateY(-3px);
}

.livraison-paiement-carte__badge {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc);
    font-size: 1.3rem;
    font-weight: 900;
    flex-shrink: 0;
}
.livraison-paiement-carte__badge--twint   { background: #ff0000; }
.livraison-paiement-carte__badge--virement { background: var(--bleu); }

.livraison-paiement-carte__titre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.45rem;
}

.livraison-paiement-carte__texte {
    font-size: 0.88rem;
    color: var(--gris);
    line-height: 1.65;
}

/* CTA livraison */
.livraison-cta-wrapper {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.livraison-cta {
    background: linear-gradient(135deg, var(--noir) 0%, #1e3a5f 100%);
    border-radius: var(--rayon-lg);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.livraison-cta__titre {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--blanc);
    margin-bottom: 0.4rem;
}

.livraison-cta__sous-titre {
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
}

.livraison-cta__boutons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .livraison-cta__boutons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
}

/* Responsive livraison */
@media (max-width: 900px) {
    .livraison-processus {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .livraison-processus::before { display: none; }
    .livraison-paiements { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .livraison-processus { grid-template-columns: 1fr; }
    .livraison-cta {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .livraison-paiement-carte {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


/* === PAGES D'INFORMATION (à propos, livraison) === */

.page-info {
    padding: 3rem 0 5rem;
}

.page-info__section {
    margin-bottom: 3rem;
}

.page-info__titre-section {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 1.25rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--bleu-leger);
}

.page-info__texte {
    color: var(--gris-fonce);
    line-height: 1.8;
    margin-bottom: 0.75rem;
}
.page-info__texte:last-child { margin-bottom: 0; }

.info-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.info-carte {
    background: var(--blanc);
    border-radius: var(--rayon-lg);
    padding: 1.5rem;
    box-shadow: var(--ombre-xs);
    border: 1px solid var(--gris-clair);
}

.info-carte__icone {
    width: 44px;
    height: 44px;
    background: var(--bleu-clair);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bleu);
    margin-bottom: 0.875rem;
    flex-shrink: 0;
}

.info-carte__titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--noir);
    margin-bottom: 0.4rem;
}

.info-carte__texte {
    font-size: 0.9rem;
    color: var(--gris);
    line-height: 1.65;
}

.info-cta {
    background: var(--blanc);
    border-radius: var(--rayon-lg);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--bleu-leger);
    margin-top: 3rem;
}

.info-cta__titre {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.5rem;
}

.info-cta__texte {
    color: var(--gris);
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .info-grille {
        grid-template-columns: 1fr;
    }
    .page-info {
        padding: 2rem 0 3.5rem;
    }
}


/* === RESPONSIVE TABLETTE (≤ 1024px) === */



/* === RESPONSIVE MOBILE (≤ 768px) === */

/* ═══════════════════════════════════════════════════════════════════════
   NAVBAR — collapse à 1024px (indépendant du reste du responsive)
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* Conteneur : position relative pour le menu absolu */
    .navbar__container {
        position: relative;
    }

    /* Cacher les liens + recherche desktop */
    .navbar__menu {
        display: none;
        position: absolute;
        top: var(--navbar-h);
        left: 0;
        right: 0;
        background-color: var(--blanc);
        border-top: 1px solid var(--gris-clair);
        border-bottom: 1px solid var(--gris-clair);
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem 1.25rem;
        gap: 0.15rem;
        box-shadow: var(--ombre-sm);
        z-index: 999;
    }

    .navbar__menu.ouvert {
        display: flex;
        animation: slideDown 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

    .navbar__recherche {
        display: none;
    }

    /* Afficher le burger */
    .navbar__burger {
        display: flex;
        flex-shrink: 0;
    }

    .navbar__actions {
        margin-left: auto;
        flex-shrink: 0;
        gap: 0.25rem;
    }

    /* Recherche dans le menu déroulant */
    .navbar__menu-recherche {
        display: flex;
        align-items: center;
        background: var(--gris-leger);
        border: 1.5px solid var(--gris-clair);
        border-radius: var(--rayon);
        overflow: hidden;
        margin-bottom: 0.5rem;
    }

    .navbar__menu-recherche input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0.65rem 0.9rem;
        font-size: 0.95rem;
        color: var(--noir);
        outline: none;
        font-family: var(--police);
    }

    .navbar__menu-recherche input::placeholder { color: var(--gris); }

    .navbar__menu-recherche button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        background: var(--bleu);
        color: var(--blanc);
        cursor: pointer;
        flex-shrink: 0;
        transition: background var(--transition);
    }

    .navbar__menu-recherche button:hover { background: var(--bleu-survol); }

    /* Liens dans le menu déroulant */
    .navbar__lien {
        padding: 0.72rem 1rem;
        font-size: 1rem;
        border-radius: var(--rayon);
    }

    .navbar__lien::after { display: none; }

    /* Séparateur avant le compte */
    .navbar__client-bonjour {
        padding: 0.6rem 1rem 0.2rem;
        border-top: 1px solid var(--gris-clair);
        margin-top: 0.25rem;
        font-size: 0.85rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRÈS PETIT MOBILE — logo compact
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
    .navbar__logo {
        font-size: 1rem;
        gap: 0.35rem;
    }
    .navbar__container {
        padding: 0 1rem;
    }
}

@media (max-width: 350px) {
    .navbar__logo span { display: none; } /* Cache "Suisse" sur très petits écrans */
}


@media (max-width: 768px) {

    /* Hero mobile */
    .hero {
        padding: 4.5rem 1.25rem 4rem;
        background-attachment: scroll;
    }

    .hero__titre {
        font-size: 2rem;
    }

    .hero__sous-titre {
        font-size: 1rem;
    }

    /* Produits mobile */
    .produits-grille {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
    }

    /* Avantages mobile */
    .avantages-grille {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

}


/* === RESPONSIVE PETIT MOBILE (≤ 480px) === */

@media (max-width: 480px) {

    .produits-grille {
        grid-template-columns: 1fr;
    }

    .avantages-grille {
        grid-template-columns: 1fr;
    }

    .hero__boutons {
        flex-direction: column;
        align-items: center;
    }

    .bouton--large {
        width: 100%;
        max-width: 300px;
    }

    .footer__container {
        grid-template-columns: 1fr;
    }

    .carte-produit__pied {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .carte-produit__pied .bouton {
        width: 100%;
    }
}


/* === RESPONSIVE TRÈS PETIT MOBILE (≤ 360px) — logo compact === */

@media (max-width: 360px) {
    /* Sur très petits écrans, cacher "Suisse" pour gagner de la place */
    .navbar__logo span {
        display: none;
    }
    .navbar__container {
        padding: 0 1rem;
    }
}