/* ── Charte graphique Secret de Lila ───────────────────────── */
:root {
    --color-espresso: #4C2B08;
    --color-coffee:   #6D3914;
    --color-caramel:  #AB7743;
    --color-almond:   #B7957F;
    --color-vanilla:  #D7BDA6;

    --font-heading: 'Optima', 'Didot', 'Bodoni MT', Georgia, serif;
    --font-body:    'Georgia', 'Times New Roman', serif;

    --color-white:   #FFFFFF;
    --color-bg:      /*#FDF9F5;*/ #ffffff;
    --color-text:    var(--color-espresso);
    --color-text-light: var(--color-coffee);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-caramel);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-coffee);
}

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

/* ── Bandeau spirituel — Verset du jour ────────────────────── */
/* Bande étroite affichée au-dessus de la navigation, présente
   sur toutes les pages du site. Fond Vanilla très doux, texte
   Espresso en Optima italique pour un rendu "maison de luxe".
   Le verset est fixe pour la journée (session Django). */
.top-verse-banner {
    background-color: #EDE3D6;           /* Vanilla adouci — plus lumineux que #D7BDA6 */
    color: var(--color-espresso);
    text-align: center;
    padding: 0.45rem 1.5rem;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-vanilla);
}

/* Référence biblique — style normal (non italique) pour
   distinguer la source du texte du verset */
.top-verse-banner span {
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    opacity: 0.8;
}

/* ── Responsive : bandeau plus compact sur mobile ──────────── */
@media (max-width: 600px) {
    .top-verse-banner {
        font-size: 0.75rem;
        padding: 0.4rem 1rem;
        letter-spacing: 0.01em;
    }

    .top-verse-banner span {
        font-size: 0.7rem;
    }
}

/* ── Header & Navigation ──────────────────────────────────── */
.site-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-vanilla);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo {
    height: 80px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--color-coffee);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.nav-links a:hover {
    color: var(--color-caramel);
}

/* ── Main Content ─────────────────────────────────────────── */
.main-content {
    flex: 1;
}

/* ── Carrousel Hero ──────────────────────────────────────── */
/* Conteneur principal du carrousel plein écran.
   Position relative pour servir de référent aux slides en position:absolute.
   Hauteur de viewport complète (100vh) pour un impact visuel maximal. */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
}

/* Conteneur des slides — empile tous les slides au même endroit */
.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Chaque slide est positionné en absolu, empilé sur les autres.
   Par défaut invisible (opacity:0). Seul le slide actif
   (hero-slide--active) est visible (opacity:1).
   La transition CSS crée le fondu entre les deux états. */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide--active {
    opacity: 1;
}

/* Image de fond du slide — couvre tout l'espace disponible */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-vanilla) 0%, var(--color-almond) 100%);
}

.hero-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenu texte superposé sur l'image de fond.
   Centré verticalement et horizontalement avec un dégradé sombre
   en arrière-plan pour garantir la lisibilité du texte clair
   quelle que soit l'image derrière. */
.hero-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 2rem;
    /* Dégradé sombre du centre vers les bords pour la lisibilité */
    background: radial-gradient(ellipse at center, rgba(76,43,8,0.3) 0%, rgba(76,43,8,0.6) 100%);
}

.hero-slide-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-vanilla);
    margin-bottom: 0.75rem;
}

.hero-slide-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-white);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-slide-tagline {
    font-size: 1.1rem;
    color: var(--color-vanilla);
    max-width: 550px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Indicateurs de navigation (dots) en bas du carrousel */
.hero-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 3;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-vanilla);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

/* Dot actif — rempli en Caramel */
.hero-dot--active {
    background-color: var(--color-caramel);
    border-color: var(--color-caramel);
    transform: scale(1.2);
}

.hero-dot:hover {
    border-color: var(--color-caramel);
}

/* ── Section Parallaxe ───────────────────────────────────── */
/* Effet de parallaxe CSS pur — aucun JavaScript requis.

   Principe : background-attachment: fixed maintient l'image de fond
   fixe par rapport à la fenêtre du navigateur. Quand l'utilisateur
   fait défiler la page, le contenu avance mais l'image reste immobile,
   créant l'illusion d'une couche "plus lointaine" = effet de profondeur.

   Avantage performance : le navigateur gère l'effet nativement via
   le compositeur GPU, pas de reflow/repaint, pas de saccade.

   Limitation mobile : background-attachment: fixed ne fonctionne pas
   sur iOS Safari et certains navigateurs mobiles. On utilise la media
   query @supports pour basculer vers background-attachment: scroll
   (pas de parallaxe mais pas de bug non plus). */
.parallax-section {
    position: relative;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%234C2B08;stop-opacity:1'/%3E%3Cstop offset='50%25' style='stop-color:%236D3914;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%234C2B08;stop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23g)' width='1200' height='400'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Overlay sombre semi-transparent pour la lisibilité du texte */
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(76, 43, 8, 0.5);
}

/* Contenu texte de la section parallaxe */
.parallax-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
}

.parallax-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    color: var(--color-white);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.parallax-text {
    font-size: 1.05rem;
    color: var(--color-vanilla);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ── Icônes SVG dans la Navbar ──────────────────────────── */
/* Lien icône — conteneur pour l'icône SVG et le badge compteur.
   currentColor hérite de la couleur du parent, ce qui permet
   de changer la couleur de l'icône via la propriété CSS color. */
.nav-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-espresso);
    padding: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

/* Icône Espresso par défaut, Caramel au survol */
.nav-icon-link:hover {
    color: var(--color-caramel);
}

/* Icône panier : position relative pour le badge compteur */
.nav-cart-icon {
    position: relative;
}

/* Le compteur de panier est positionné en absolu sur le coin
   supérieur droit de l'icône du sac */
.nav-cart-icon .cart-counter {
    position: absolute;
    top: -6px;
    right: -10px;
}

/* ── Menu déroulant du profil ────────────────────────────── */
/* Conteneur wrapper — nécessaire pour le déclenchement au survol.
   Le dropdown est masqué par défaut et apparaît au :hover du wrapper. */
.nav-profile-wrapper {
    position: relative;
}

.nav-profile-icon {
    background: none;
    border: none;
    font-family: inherit;
}

.nav-profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 0.75rem 0;
    box-shadow: 0 8px 24px rgba(76, 43, 8, 0.12);
    /* Masqué par défaut — apparaît au survol du wrapper */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 200;
}

/* Affichage du dropdown au survol du conteneur parent */
.nav-profile-wrapper:hover .nav-profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-profile-name {
    display: block;
    padding: 0.5rem 1rem 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--color-espresso);
    border-bottom: 1px solid var(--color-vanilla);
    margin-bottom: 0.25rem;
}

.nav-profile-link {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--color-coffee);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nav-profile-link:hover {
    background-color: var(--color-vanilla);
    color: var(--color-espresso);
}

.nav-profile-link--logout {
    color: #c62828;
    border-top: 1px solid var(--color-vanilla);
    margin-top: 0.25rem;
    padding-top: 0.75rem;
}

.nav-profile-link--logout:hover {
    background-color: #fbe9e7;
}

/* ── Sélecteur de pays dans la navbar ────────────────────── */
/* Menu déroulant discret permettant de choisir entre France
   et Côte d'Ivoire. Même mécanisme que le dropdown profil :
   masqué par défaut, visible au survol du conteneur parent. */
.nav-country-wrapper {
    position: relative;
}

.nav-country-btn {
    background: none;
    border: 1px solid var(--color-vanilla);
    border-radius: 4px;
    padding: 0.3rem 0.55rem 0.3rem 0.45rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-coffee);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-country-btn:hover {
    border-color: var(--color-caramel);
    color: var(--color-espresso);
}

/* Chevron : rotation au survol pour indiquer l'ouverture */
.nav-country-btn svg {
    transition: transform 0.2s ease;
}

.nav-country-wrapper:hover .nav-country-btn svg {
    transform: rotate(180deg);
}

/* Dropdown : positionné sous le bouton, masqué par défaut */
.nav-country-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 185px;
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 0.4rem 0;
    box-shadow: 0 8px 24px rgba(76, 43, 8, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 200;
    margin-top: 4px;
}

/* Affichage au survol du conteneur parent */
.nav-country-wrapper:hover .nav-country-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Option de pays dans le dropdown */
.nav-country-option {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    color: var(--color-coffee);
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-country-option:hover {
    background-color: var(--color-vanilla);
    color: var(--color-espresso);
}

/* Pays actif : fond Vanilla léger + texte Espresso */
.nav-country-option--active {
    background-color: #f5efe8;
    color: var(--color-espresso);
    font-weight: 600;
}

/* ── Hero Section (original — conservé pour les autres pages) ── */
.hero {
    background: linear-gradient(135deg, var(--color-vanilla) 0%, var(--color-almond) 100%);
    text-align: center;
    padding: 6rem 1.5rem;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-espresso);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.hero p {
    font-size: 1.2rem;
    color: var(--color-coffee);
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

.btn {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    border: 2px solid var(--color-caramel);
    background-color: var(--color-caramel);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: transparent;
    color: var(--color-caramel);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-caramel);
}

.btn-outline:hover {
    background-color: var(--color-caramel);
    color: var(--color-white);
}

/* ── Section Titles ───────────────────────────────────────── */
.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-espresso);
    text-align: center;
    margin-bottom: 2.5rem;
    letter-spacing: 0.04em;
}

/* ── Values / Features Section ────────────────────────────── */
.values-section {
    padding: 5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
}

.value-card {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(76, 43, 8, 0.08);
}

.value-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-espresso);
    margin-bottom: 0.75rem;
}

.value-card p {
    color: var(--color-coffee);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-espresso);
    color: var(--color-vanilla);
    padding: 3rem 1.5rem 1rem;
    margin-top: auto;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-coffee);
}

.footer-brand .logo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-vanilla);
    display: block;
    margin-bottom: 0.75rem;
    letter-spacing: 0.04em;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-almond);
}

.footer-links h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--color-vanilla);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--color-almond);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--color-vanilla);
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--color-almond);
}

/* ── Nouveautés (Home) ────────────────────────────────────── */
.new-products-section {
    padding: 5rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ── Grille Produits ──────────────────────────────────────── */
/* Grille responsive pour les cartes produits.
   3 colonnes sur grand écran, 2 sur tablette, 1 sur mobile. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/* ── Carte Produit ────────────────────────────────────────── */
/* Chaque carte est un lien cliquable vers le détail du produit.
   Fond blanc, bordure Vanilla, effet de survol subtil.
   L'ensemble est en display:flex colonne pour que le body
   pousse le prix vers le bas. */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(76, 43, 8, 0.08);
}

/* Zone image : ratio 4/3 pour un rendu homogène */
.product-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-vanilla);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

/* Placeholder quand aucune image n'est disponible */
.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-vanilla), var(--color-almond));
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-coffee);
    opacity: 0.6;
}

.product-placeholder--large {
    font-size: 3rem;
}

/* Corps de la carte : padding, typographie */
.product-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-caramel);
    margin-bottom: 0.4rem;
}

.product-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-espresso);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.product-card-volume {
    font-size: 0.85rem;
    color: var(--color-almond);
    margin-bottom: 0.75rem;
}

.product-card-price {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-espresso);
    margin-top: auto;
}

/* ── Layout Catalogue (filtres + produits) ────────────────── */
.catalog-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
}

/* Barre latérale de filtres */
.catalog-filters {
    position: sticky;
    top: 100px;
    align-self: start;
}

.filter-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-espresso);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-vanilla);
}

.filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--color-coffee);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.filter-link:hover {
    background-color: var(--color-vanilla);
    color: var(--color-espresso);
}

/* Lien de filtre actif : fond Caramel, texte blanc */
.filter-link--active {
    background-color: var(--color-caramel);
    color: var(--color-white);
}

.filter-link--active:hover {
    background-color: var(--color-coffee);
    color: var(--color-white);
}

/* Zone produits */
.catalog-products {
    min-height: 300px;
}

/* Message quand aucun produit ne correspond au filtre */
.empty-catalog {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-coffee);
}

.empty-catalog p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-vanilla);
}

.pagination-link {
    color: var(--color-caramel);
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.pagination-link:hover {
    color: var(--color-coffee);
}

.pagination-info {
    font-size: 0.9rem;
    color: var(--color-almond);
}

/* ── Fiche Produit (Détail) ───────────────────────────────── */
/* Fil d'Ariane */
.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    color: var(--color-almond);
}

.breadcrumb a {
    color: var(--color-caramel);
}

.breadcrumb a:hover {
    color: var(--color-coffee);
}

.breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--color-vanilla);
}

.breadcrumb-current {
    color: var(--color-espresso);
}

/* Layout deux colonnes : galerie + infos */
.product-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

/* Galerie d'images */
.product-gallery-main {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-vanilla);
    margin-bottom: 1rem;
}

.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-thumbs {
    display: flex;
    gap: 0.75rem;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.gallery-thumb:hover {
    border-color: var(--color-caramel);
}

/* Informations produit */
.product-info-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-caramel);
    margin-bottom: 0.5rem;
    display: inline-block;
}

.product-info-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-espresso);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.product-info-volume {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-almond);
    margin-bottom: 1.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-vanilla);
    border-radius: 20px;
}

.product-info-price {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    color: var(--color-espresso);
    margin-bottom: 0.75rem;
}

/* Indicateur de stock */
.product-info-stock {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    display: inline-block;
}

.in-stock {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.out-of-stock {
    background-color: #fbe9e7;
    color: #c62828;
}

/* Sections d'information (description, ingrédients) */
.product-info-section {
    margin-bottom: 1.75rem;
}

.product-info-heading {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-espresso);
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-vanilla);
}

.product-info-description {
    color: var(--color-coffee);
    font-size: 0.95rem;
    line-height: 1.8;
}

.product-info-ingredients {
    color: var(--color-almond);
    font-size: 0.85rem;
    line-height: 1.8;
    font-style: italic;
}

/* Bouton Ajouter au panier */
.product-info-actions {
    margin-top: 1.5rem;
}

.btn-add-to-cart {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.05rem;
    text-align: center;
}

.btn-add-to-cart--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--color-almond);
    background-color: var(--color-almond);
}

.btn-add-to-cart--disabled:hover {
    background-color: var(--color-almond);
    color: var(--color-white);
}

/* Lien retour vers le catalogue */
.back-to-catalog {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}

/* Hero compact (utilisé sur la page catalogue) */
.hero--compact {
    padding: 3.5rem 1.5rem;
}

/* ── Compteur panier dans la navbar ───────────────────────── */
/* Badge arrondi en Caramel qui affiche le nombre d'articles */
.nav-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cart-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    background-color: var(--color-caramel);
    color: var(--color-white);
    font-size: 0.7rem;
    font-family: var(--font-body);
    font-weight: bold;
    border-radius: 10px;
    line-height: 1;
}

/* Animation "pulse" déclenchée par le JS à chaque ajout */
.cart-counter--pulse {
    animation: counterPulse 0.4s ease;
}

@keyframes counterPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.5); background-color: var(--color-coffee); }
    100% { transform: scale(1); }
}

/* ── Feedback bouton "Ajouté !" ──────────────────────────── */
.btn-add-to-cart--added {
    background-color: #2e7d32 !important;
    border-color: #2e7d32 !important;
    color: var(--color-white) !important;
}

/* ── Page Panier ─────────────────────────────────────────── */
.cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Layout deux colonnes : articles + récapitulatif */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}

/* ── Liste des articles ──────────────────────────────────── */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Chaque ligne d'article dans le panier */
.cart-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    gap: 1.25rem;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Image miniature du produit */
.cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--color-vanilla);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-image .product-placeholder {
    font-size: 1.2rem;
    width: 80px;
    height: 80px;
}

/* Informations produit (nom, catégorie, volume) */
.cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cart-item-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-espresso);
    text-decoration: none;
    line-height: 1.3;
}

.cart-item-name:hover {
    color: var(--color-caramel);
}

.cart-item-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-caramel);
}

.cart-item-volume {
    font-size: 0.8rem;
    color: var(--color-almond);
}

/* Contrôles de quantité (boutons + / -) */
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    background-color: var(--color-white);
    color: var(--color-espresso);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cart-qty-btn:hover {
    background-color: var(--color-vanilla);
    border-color: var(--color-caramel);
}

.cart-qty-input {
    width: 40px;
    text-align: center;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    padding: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-espresso);
    background: var(--color-bg);
}

/* Prix total de la ligne */
.cart-item-price {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-espresso);
    min-width: 80px;
    text-align: right;
}

/* Bouton de suppression (×) */
.cart-remove-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-almond);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cart-remove-btn:hover {
    background-color: #fbe9e7;
    color: #c62828;
}

/* ── Récapitulatif du panier ─────────────────────────────── */
.cart-summary {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 2rem;
    position: sticky;
    top: 100px;
}

.cart-summary-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-espresso);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-vanilla);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--color-coffee);
}

.cart-summary-total {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-espresso);
    border-top: 2px solid var(--color-vanilla);
    margin-top: 0.75rem;
    padding-top: 1rem;
}

.cart-summary-note {
    font-size: 0.8rem;
    color: var(--color-almond);
    margin: 1rem 0 1.5rem;
    font-style: italic;
}

.cart-continue-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-caramel);
}

.cart-continue-link:hover {
    color: var(--color-coffee);
}

/* Panier vide */
.cart-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-coffee);
}

.cart-empty p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* ── Formulaire de commande (Checkout) ───────────────────── */
.checkout-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}

.checkout-subtitle {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-espresso);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-vanilla);
}

/* Formulaire d'adresse */
.checkout-form-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 2rem;
}

.checkout-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.25rem;
}

/* Labels et inputs — Charte Vanilla/Espresso */
.form-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--color-espresso);
    margin-bottom: 0.4rem;
    letter-spacing: 0.03em;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    background-color: var(--color-vanilla);
    color: var(--color-espresso);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.form-input:focus {
    border-color: var(--color-caramel);
    box-shadow: 0 0 0 3px rgba(171, 119, 67, 0.15);
}

.form-input::placeholder {
    color: var(--color-almond);
}

/* Erreurs de validation */
.form-error {
    font-size: 0.8rem;
    color: #c62828;
    margin-top: 0.3rem;
}

.form-error-banner {
    grid-column: 1 / -1;
    padding: 0.75rem 1rem;
    background-color: #fbe9e7;
    color: #c62828;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Bouton de soumission du checkout — même style que btn-add-to-cart
   mais avec une classe distincte pour ne pas être intercepté par cart.js */
.btn-checkout-submit {
    display: inline-block;
    padding: 1rem 2rem;
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
}

/* Note de sécurité sous le bouton */
.checkout-security-note {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--color-almond);
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}

/* Bouton de soumission du checkout */
.checkout-form .btn-add-to-cart {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
}

/* Récapitulatif de commande (colonne droite) */
.checkout-summary {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 2rem;
    position: sticky;
    top: 100px;
}

.checkout-items {
    margin-bottom: 1rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-vanilla);
}

.checkout-item:last-child {
    border-bottom: none;
}

.checkout-item-info {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.checkout-item-name {
    font-size: 0.9rem;
    color: var(--color-espresso);
}

.checkout-item-qty {
    font-size: 0.8rem;
    color: var(--color-almond);
}

.checkout-item-price {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-espresso);
}

.checkout-subtotal {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-vanilla);
    font-size: 0.9rem;
    color: var(--color-coffee);
}

.checkout-discount {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #2e7d32;
    font-weight: 600;
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 2px solid var(--color-vanilla);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-espresso);
}

.checkout-summary-note {
    font-size: 0.8rem;
    color: var(--color-almond);
    margin-top: 0.75rem;
    font-style: italic;
    text-align: center;
}

/* ── Pages de résultat de paiement ────────────────────────── */
.payment-result {
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.payment-result-card {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    text-align: center;
}

.payment-result-card--success {
    border-top: 4px solid #2e7d32;
}

.payment-result-card--cancel {
    border-top: 4px solid #c62828;
}

.payment-result-icon {
    margin-bottom: 1.5rem;
}

.payment-result-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-espresso);
    margin-bottom: 1rem;
}

.payment-result-text {
    color: var(--color-coffee);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
}

.payment-result-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Tableau de bord utilisateur ─────────────────────────── */
.dashboard-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.dashboard-header {
    margin-bottom: 2.5rem;
}

.dashboard-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-espresso);
    margin-bottom: 0.5rem;
}

.dashboard-welcome {
    color: var(--color-coffee);
    font-size: 1rem;
}

.dashboard-section-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-espresso);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-vanilla);
}

/* Liste des commandes */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Carte de commande */
.order-card {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.order-card:hover {
    box-shadow: 0 4px 16px rgba(76, 43, 8, 0.08);
}

/* Bordure latérale colorée selon le statut */
.order-card--paid {
    border-left: 4px solid var(--color-caramel);
}

.order-card--pending {
    border-left: 4px solid var(--color-almond);
}

/* En-tête de la carte */
.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(to right, var(--color-bg), var(--color-white));
}

.order-card-info {
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
}

.order-card-id {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-espresso);
    font-weight: 600;
}

.order-card-date {
    font-size: 0.85rem;
    color: var(--color-almond);
}

/* Badge de statut */
.order-card-status {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.status-paid {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-pending {
    background: #fff3e0;
    color: #e65100;
}

/* Détail des articles */
.order-card-items {
    padding: 0 1.5rem;
}

.order-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-bg);
    font-size: 0.9rem;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item-name {
    flex: 1;
    color: var(--color-espresso);
}

.order-item-detail {
    color: var(--color-almond);
    font-size: 0.85rem;
    margin-right: 1.5rem;
}

.order-item-cost {
    font-family: var(--font-heading);
    color: var(--color-coffee);
    min-width: 70px;
    text-align: right;
}

/* Pied de la carte : total + bouton facture */
.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-vanilla);
}

.order-card-total {
    font-size: 1.05rem;
    color: var(--color-espresso);
}

.order-card-total strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-caramel);
}

/* Bouton de téléchargement de la facture PDF */
.btn-invoice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--color-caramel);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.15s ease;
}

.btn-invoice:hover {
    background: var(--color-espresso);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-invoice svg {
    flex-shrink: 0;
}

/* Message quand la facture n'est pas encore disponible */
.order-card-no-invoice {
    font-size: 0.8rem;
    color: var(--color-almond);
    font-style: italic;
}

/* État vide : aucune commande */
.dashboard-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-white);
    border: 1px dashed var(--color-vanilla);
    border-radius: 10px;
}

.dashboard-empty p {
    color: var(--color-coffee);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* ── Page de connexion ────────────────────────────────────── */
.login-section {
    max-width: 460px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* Variante large du formulaire d'inscription (plus de champs) */
.login-card--wide {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.login-card {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 12px;
    padding: 2.5rem 2rem;
}

.login-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-espresso);
    text-align: center;
    margin-bottom: 0.25rem;
}

.login-subtitle {
    text-align: center;
    color: var(--color-almond);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Message d'erreur de connexion */
.login-error {
    background: #fde8e8;
    border: 1px solid #e8a0a0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    color: #b71c1c;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Formulaire de connexion */
.login-form .form-group {
    margin-bottom: 1.25rem;
}

.login-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-espresso);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

/* Astérisque rouge pour les champs obligatoires */
.login-form label .required {
    color: #c0392b;
    font-weight: 700;
    margin-left: 1px;
}

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"],
.login-form input[type="tel"],
.login-form input[type="date"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-espresso);
    background: var(--color-bg);
    transition: border-color 0.3s ease;
}

.login-form input:focus {
    outline: none;
    border-color: var(--color-caramel);
    box-shadow: 0 0 0 3px rgba(171, 119, 67, 0.15);
}

.btn-login {
    display: block;
    width: 100%;
    padding: 0.85rem;
    margin-top: 0.5rem;
    font-size: 1rem;
}

/* Lien entre connexion et inscription */
.login-switch {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-almond);
}

.login-switch a {
    color: var(--color-caramel);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-switch a:hover {
    color: var(--color-espresso);
}

/* Erreur de champ individuel dans le formulaire d'inscription */
.form-field-error {
    display: block;
    color: #b71c1c;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* ── Rangée de deux champs côte à côte (prénom + nom) ──────── */
.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

/* ── Label de groupe (ex: Genre) ───────────────────────────── */
.form-group-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-espresso);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* ── Boutons radio (Genre) ─────────────────────────────────── */
.radio-group {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-espresso);
}

.radio-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-almond);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked {
    border-color: var(--color-caramel);
}

.radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--color-caramel);
    border-radius: 50%;
}

.radio-label {
    line-height: 1;
}

/* ── Bloc consentements marketing ──────────────────────────── */
.consent-block {
    background: var(--color-bg);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.consent-intro {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-espresso);
    margin-bottom: 0.75rem;
}

.consent-channels {
    display: flex;
    gap: 1.5rem;
    padding-left: 1.75rem;
}

/* ── Cases à cocher personnalisées ─────────────────────────── */
.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-almond);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    transition: border-color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.checkbox-option input[type="checkbox"]:checked {
    background: var(--color-caramel);
    border-color: var(--color-caramel);
}

.checkbox-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    font-size: 0.9rem;
    color: var(--color-espresso);
    line-height: 1.4;
}

/* ── Mentions légales RGPD ─────────────────────────────────── */
.legal-notice {
    font-size: 0.72rem;
    color: var(--color-almond);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.legal-notice a {
    color: var(--color-caramel);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-notice a:hover {
    color: var(--color-espresso);
}

/* Lien "Mot de passe oublié" sous le champ mot de passe */
.login-forgot {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-almond);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.login-forgot:hover {
    color: var(--color-caramel);
}

/* ── Blocs info et succès — Réinitialisation mot de passe ── */
.password-reset-info {
    background: #f5efe8;
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--color-espresso);
    font-size: 0.92rem;
}

.password-reset-info p + p {
    margin-top: 0.75rem;
}

.password-reset-success {
    text-align: center;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--color-espresso);
    font-size: 0.95rem;
}

.password-reset-success p + p {
    margin-top: 0.5rem;
}

/* ── Formulaire de déconnexion dans le dropdown ───────────── */
/* Le form ne doit ajouter aucune marge ni padding pour que
   le bouton déconnexion s'aligne parfaitement avec les liens */
.nav-logout-form {
    margin: 0;
    padding: 0;
    border: 0;
}

/* ── Wishlist : coeurs sur les cartes produit ─────────────── */
.product-card-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    /* Pas de fond par défaut : le coeur flotte directement
       sur l'image sans cercle blanc disgracieux */
    background: none;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    padding: 0;
    /* Coeur invisible par défaut, apparaît au survol de la carte */
    opacity: 0;
}

/* Afficher le coeur au survol de la carte produit */
.product-card:hover .product-card-heart,
.product-card-heart--active {
    opacity: 1;
}

/* Fond translucide au survol du bouton coeur lui-même */
.product-card-heart:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.15);
}

.product-card-heart--active:hover {
    background: rgba(171, 119, 67, 0.1);
}

/* SVG du coeur — transition douce sur fill et stroke */
.heart-svg {
    transition: fill 0.25s ease, stroke 0.25s ease;
}

/* Au survol du bouton coeur (carte produit), le contour passe au Caramel */
.product-card-heart:hover .heart-svg {
    stroke: #AB7743;
}

/* Coeur actif : toujours visible (rempli Caramel) */
.product-card-heart--active {
    opacity: 1;
}

/* Animation bounce du coeur */
.heart-bounce {
    animation: heartBounce 0.4s ease;
}

@keyframes heartBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Coeur sur la fiche produit (plus grand, toujours visible) */
.wishlist-heart-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s ease;
    flex-shrink: 0;
    color: #4C2B08;
}

.wishlist-heart-btn:hover {
    transform: scale(1.2);
    color: #AB7743;
}

.wishlist-heart-btn:hover .heart-svg {
    stroke: #AB7743;
}

/* Coeur actif sur la fiche produit */
.wishlist-heart-btn--active .heart-svg {
    fill: #AB7743;
    stroke: #AB7743;
}

.product-info-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Section Avis clients ─────────────────────────────────── */
.reviews-section {
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.review-card {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-author-name {
    font-weight: 600;
    color: var(--color-espresso);
    font-size: 0.95rem;
}

/* Badge "Achat vérifié" */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: #2e7d32;
    background: #e8f5e9;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.verified-badge svg {
    flex-shrink: 0;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-date {
    font-size: 0.8rem;
    color: var(--color-almond);
}

.review-comment {
    color: var(--color-coffee);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-top: 0.25rem;
}

.reviews-empty {
    text-align: center;
    color: var(--color-almond);
    font-style: italic;
    padding: 2rem 0;
}

/* ── Étoiles d'affichage ──────────────────────────────────── */
.stars-display {
    display: inline-flex;
    gap: 1px;
}

.star {
    font-size: 1rem;
    line-height: 1;
}

.star--filled {
    color: var(--color-caramel);
}

.star--empty {
    color: var(--color-vanilla);
}

.stars-display--small .star {
    font-size: 0.85rem;
}

/* Note moyenne sur la fiche produit */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
}

.rating-text {
    font-size: 0.85rem;
    color: var(--color-almond);
}

/* ── Formulaire d'avis ────────────────────────────────────── */
.review-form-section {
    background: var(--color-white);
    border: 1px solid var(--color-vanilla);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 1.5rem;
}

.review-form-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-espresso);
    margin-bottom: 1.25rem;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.review-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-espresso);
    margin-bottom: 0.35rem;
}

.review-form-rating {
    /* Pas de style particulier, le contenu est géré ci-dessous */
}

/* Sélection d'étoiles interactive */
/* ── Étoiles interactives — Formulaire d'avis ────────────── */
/* Technique CSS pure avec sélecteur ~ (sibling) :
   Les inputs et labels sont frères directs, ordonnés 5→1 dans
   le HTML. flex-direction: row-reverse les affiche 1→5.
   Au survol du label N, le sélecteur ~ sélectionne tous les
   labels suivants (N-1, N-2... = les étoiles de gauche).
   Résultat : survol de l'étoile 3 allume 1, 2 et 3 en Caramel. */
.star-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;   /* Affiche 1→5 visuellement */
    justify-content: flex-end;
    gap: 2px;
}

/* Les radio buttons sont masqués — les labels servent d'interface */
.star-rating-input input[type="radio"] {
    display: none;
}

/* Label-étoile : taille, curseur, couleur par défaut (gris clair) */
.star-label {
    font-size: 1.75rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.15s ease;
    padding: 2px;
    line-height: 1;
}

/* ── Survol : l'étoile survolée + toutes les suivantes (à gauche) ── */
.star-label:hover,
.star-label:hover ~ .star-label {
    color: var(--color-caramel);
}

/* ── Sélection (checked) : l'étoile cochée + toutes les suivantes ── */
.star-rating-input input[type="radio"]:checked ~ .star-label {
    color: var(--color-caramel);
}

/* ── Maintien du survol même au-dessus d'une sélection ──
   Le survol doit primer sur la sélection pour l'aperçu visuel.
   On réapplique la règle hover APRES la règle checked pour
   qu'elle ait la priorité (spécificité égale, ordre CSS). */
.star-label:hover ~ .star-label,
.star-label:hover {
    color: var(--color-caramel) !important;
}

.review-comment-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-espresso);
    background: var(--color-bg);
    resize: vertical;
    transition: border-color 0.3s ease;
}

.review-comment-input:focus {
    outline: none;
    border-color: var(--color-caramel);
    box-shadow: 0 0 0 3px rgba(171, 119, 67, 0.15);
}

.review-form-error {
    display: block;
    color: #c62828;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.btn-review-submit {
    align-self: flex-start;
}

.review-already-posted,
.review-login-prompt {
    text-align: center;
    color: var(--color-almond);
    padding: 1rem 0;
}

.review-login-prompt a {
    color: var(--color-caramel);
    font-weight: 600;
    text-decoration: underline;
}

.review-login-prompt a:hover {
    color: var(--color-espresso);
}

/* ── Code promo dans le panier ────────────────────────────── */
.coupon-section {
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-vanilla);
}

.coupon-form {
    display: flex;
    gap: 0.5rem;
}

.coupon-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-vanilla);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-espresso);
    background: var(--color-bg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color 0.3s ease;
}

.coupon-input:focus {
    outline: none;
    border-color: var(--color-caramel);
}

.coupon-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
}

.coupon-submit {
    padding: 0.6rem 1.1rem;
    background: var(--color-almond);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.coupon-submit:hover {
    background: var(--color-caramel);
}

/* Ligne de réduction dans le récapitulatif */
.cart-summary-discount {
    color: #2e7d32;
    font-weight: 600;
}

.coupon-remove-form {
    display: inline;
}

.coupon-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #c62828;
    font-size: 1.1rem;
    padding: 0 0.25rem;
    vertical-align: middle;
    line-height: 1;
}

.coupon-remove-btn:hover {
    color: #b71c1c;
}

/* Messages Django dans le panier */
.cart-messages {
    max-width: 900px;
    margin: 1rem auto 0;
    padding: 0 1.5rem;
}

.cart-message {
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.cart-message-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.cart-message-error {
    background: #fde8e8;
    color: #c62828;
    border: 1px solid #e8a0a0;
}

.cart-message-info {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* ── Stepper de suivi de colis ────────────────────────────── */
.order-stepper {
    padding: 1.25rem 1.5rem;
    position: relative;
}

.stepper-track {
    position: relative;
    height: 4px;
    background: var(--color-vanilla);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.stepper-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-caramel);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.stepper-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-vanilla);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.step-completed .step-circle {
    background: var(--color-caramel);
}

.step-active .step-circle {
    background: var(--color-espresso);
    transform: scale(1.15);
}

.step-check {
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: bold;
}

.step-label {
    font-size: 0.72rem;
    color: var(--color-almond);
    text-align: center;
    max-width: 80px;
}

.step-completed .step-label {
    color: var(--color-caramel);
    font-weight: 600;
}

.step-active .step-label {
    color: var(--color-espresso);
    font-weight: 700;
}

.order-tracking-number {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-coffee);
}

.order-tracking-number strong {
    color: var(--color-espresso);
    letter-spacing: 0.05em;
}

/* Badge statut de suivi dans l'en-tête de commande */
.order-card-tracking-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    white-space: nowrap;
}

.status-preparation {
    background: #fff3e0;
    color: #e65100;
}

.status-shipped {
    background: #e3f2fd;
    color: #1565c0;
}

.status-delivering {
    background: #f3e5f5;
    color: #7b1fa2;
}

.status-delivered {
    background: #e8f5e9;
    color: #2e7d32;
}

/* En-tête de commande : badges côte à côte */
.order-card-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.order-card-totals {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.order-card-discount {
    font-size: 0.8rem;
    color: #2e7d32;
}

/* ── Section Wishlist dans le dashboard ───────────────────── */
.dashboard-wishlist {
    margin-top: 3rem;
}

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

.wishlist-card {
    position: relative;
}

.wishlist-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #c62828;
    transition: background 0.2s ease, transform 0.15s ease;
    padding: 0;
}

.wishlist-remove-btn:hover {
    background: #fde8e8;
    transform: scale(1.15);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .nav-logo {
        height: 32px;
        max-width: 140px;
    }

    .nav-links {
        gap: 1.25rem;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Catalogue : filtres au-dessus des produits sur mobile */
    .catalog-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .catalog-filters {
        position: static;
    }

    .filter-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-link {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Fiche produit : une seule colonne sur mobile */
    .product-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .product-info-title {
        font-size: 1.5rem;
    }

    .product-info-price {
        font-size: 1.75rem;
    }

    /* Panier : une seule colonne sur mobile */
    .cart-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cart-item {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto auto;
        gap: 0.75rem;
    }

    .cart-item-image {
        grid-row: 1 / 3;
    }

    .cart-item-qty,
    .cart-item-price,
    .cart-remove-btn {
        grid-column: 2;
    }

    .cart-summary {
        position: static;
    }

    /* Checkout : une seule colonne sur mobile */
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .checkout-form {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .payment-result-card {
        padding: 2rem 1.5rem;
    }

    /* Carrousel hero mobile */
    .hero-carousel {
        height: 80vh;
        min-height: 400px;
    }

    .hero-slide-title {
        font-size: 1.75rem;
    }

    .hero-slide-tagline {
        font-size: 0.95rem;
        max-width: 90%;
    }

    /* Parallaxe : désactivation sur mobile (problèmes de rendu) */
    .parallax-section {
        background-attachment: scroll;
        height: 300px;
    }

    .parallax-title {
        font-size: 1.5rem;
    }

    .parallax-text {
        font-size: 0.95rem;
    }

    /* Dropdown profil : clic plutôt que survol sur tactile */
    .nav-profile-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
    }

    .nav-profile-wrapper:hover .nav-profile-dropdown {
        transform: none;
    }

    .nav-profile-name {
        border-bottom: none;
        padding: 0.5rem 0;
    }

    .nav-profile-link {
        padding: 0.4rem 0;
    }

    /* Dashboard mobile */
    .order-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .order-card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .btn-invoice {
        width: 100%;
        justify-content: center;
    }

    .order-item {
        flex-wrap: wrap;
    }

    .order-item-detail {
        margin-right: 0;
        width: 100%;
        margin-top: 0.15rem;
    }

    .order-card-info {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Connexion mobile */
    .login-card {
        padding: 2rem 1.5rem;
    }

    /* Inscription mobile : champs empilés */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .consent-channels {
        padding-left: 1.5rem;
    }

    /* Stepper mobile : labels plus petits */
    .step-label {
        font-size: 0.65rem;
        max-width: 60px;
    }

    .step-circle {
        width: 24px;
        height: 24px;
    }

    /* Wishlist dashboard mobile : 2 colonnes */
    .wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Code promo mobile : champ pleine largeur */
    .coupon-form {
        flex-direction: column;
    }

    .coupon-submit {
        width: 100%;
    }

    /* Avis mobile */
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .review-form-section {
        padding: 1.5rem;
    }

    .star-label {
        font-size: 1.5rem;
    }

    /* Badges commande mobile */
    .order-card-badges {
        flex-wrap: wrap;
    }
}