/* ==============================================================
   Cave Landw — Feuille de style minimale
   --------------------------------------------------------------
   Cette feuille pose la PALETTE et le squelette mais reste
   volontairement sobre. L'esthétique sera retravaillée ensemble.
   ============================================================== */

/* ---------- Palette & variables ---------- */
:root {
    --c-bordeaux:        #6b1d2c;
    --c-bordeaux-dark:   #4a1320;
    --c-bordeaux-light:  #8a3344;

    --c-champagne:       #f1e4c6;
    --c-champagne-soft:  #f8f1de;

    --c-gris-900:        #1f1f1f;
    --c-gris-700:        #4a4a4a;
    --c-gris-500:        #888;
    --c-gris-300:        #d6d6d6;
    --c-gris-100:        #f4f4f4;
    --c-blanc:           #fff;

    --c-text:            var(--c-gris-900);
    --c-text-muted:      var(--c-gris-700);
    --c-bg:              var(--c-blanc);
    --c-bg-soft:         var(--c-gris-100);
    --c-accent:          var(--c-bordeaux);

    --radius:            4px;
    --shadow-soft:       0 1px 3px rgba(0, 0, 0, 0.08);

    /* B4 polish — Durées de transition harmonisées.
       Les composants récents (B3, B2.5.4*) utilisent ces variables ;
       les composants legacy gardent leurs valeurs en dur tant qu'on
       n'y touche pas, pour éviter toute régression involontaire. */
    --t-fast:            0.12s;   /* Hovers fins (boutons icône, pastilles) */
    --t-base:            0.15s;   /* Standard (boutons, liens, focus) */
    --t-slow:            0.22s;   /* Apparitions/disparitions (panneaux) */
    --t-easing:          ease;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.5;
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Header ---------- */
.site-header {
    border-bottom: 1px solid var(--c-gris-300);
    background: var(--c-bg);
}
.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}
.site-brand__logo {
    height: 48px;
    width: auto;
    display: block;
}
.site-brand__name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--c-bordeaux);
    font-weight: bold;
}
.site-nav { display: flex; gap: 1.25rem; flex: 1; }
.site-nav a { color: var(--c-text); }
.site-nav a.is-active { color: var(--c-bordeaux); font-weight: 600; }
.site-lang {
    border: 1px solid var(--c-gris-300);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
}

/* ---------- Main ----------
   Le layout--introduction libère le main de toute contrainte
   (max-width et padding sont gérés par chaque zone enfant).
   ---------------------------------------------- */
.site-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.layout--introduction .site-main {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-block;
    background: var(--c-bordeaux);
    color: var(--c-blanc);
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--c-bordeaux);
    border-radius: var(--radius);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--c-bordeaux-dark); text-decoration: none; }
.btn--ghost {
    background: transparent;
    color: var(--c-bordeaux);
}
.btn--ghost:hover { background: var(--c-champagne-soft); }

/* ---------- Hero (home) ---------- */
.hero { padding: 2rem 0 3rem; text-align: center; }
.hero__title { font-family: var(--font-serif); font-size: 2.4rem; color: var(--c-bordeaux); margin: 0 0 0.5rem; }
.hero__lead { color: var(--c-text-muted); font-size: 1.1rem; }
.hero__quote {
    margin: 2rem auto;
    max-width: 600px;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-text-muted);
}
.hero__quote cite { display: block; margin-top: 0.5rem; font-size: 0.9rem; }
.hero__actions { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Featured / Catalogue grid ---------- */
.featured__title,
.catalogue__title {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    margin: 2rem 0 1rem;
}

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

.wine-card {
    background: var(--c-bg);
    border: 1px solid var(--c-gris-300);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.15s;
    /* B2.5.4c — Structure flex column. Position relative pour servir
       d'ancre au bouton "Recommander" qui sera positionné en absolu
       au bas de la vignette (cf. .wine-card__cave-recommander). */
    display: flex;
    flex-direction: column;
    position: relative;
}
.wine-card:hover { box-shadow: var(--shadow-soft); }
/* B2.5.4c — Le lien principal s'étire pour combler l'espace disponible.
   Toutes les vignettes d'une rangée font la même hauteur (grille stretch),
   donc tous les <a> ont la même hauteur, donc tous les boutons "Recommander"
   qui suivent (en pied d'article) sont alignés exactement en bas. */
.wine-card__link {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: var(--c-text);
    flex: 1 1 auto;
}
.wine-card__link:hover { text-decoration: none; }
.wine-card__location {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
    margin: 0 0 0.6rem;
    line-height: 1.25;
    min-height: 3em;   /* alignement vertical des étiquettes en grille */
}
.wine-card__region {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: #555;                   /* gris soutenu */
    text-transform: lowercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.wine-card__appellation-tag {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--c-bordeaux);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.wine-card__img {
    height: 180px;
    width: 100%;
    object-fit: contain;
    margin: 0 auto 0.75rem;
    /* Empêche flex shrink de réduire l'image quand la vignette est
       compactée par un commentaire long ou un grand bandeau cave. */
    flex-shrink: 0;
}
.wine-card__img--placeholder {
    background: var(--c-champagne-soft);
    width: 100%;
}
/* B2.5.4c — min-height pour aligner les titres entre vignettes voisines.
   ~2 lignes pour absorber les crus longs ("Château Cheval Blanc Premier
   Grand Cru Classé A") sans bouger l'alignement des vignettes courtes. */
.wine-card__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    min-height: 2.6em;
    line-height: 1.3;
}
.wine-card__contenance { color: var(--c-text-muted); font-size: 0.8rem; margin: 0.15rem 0 0; }
.wine-card__appellation { color: var(--c-text-muted); font-size: 0.85rem; margin: 0; }
.wine-card__vintage { color: var(--c-text-muted); font-size: 0.85rem; margin: 0.25rem 0; }
/* B2.5.4c — Le prix garde son flux naturel. C'est désormais le bouton
   "Recommander" en pied de vignette qui consomme l'espace résiduel
   pour s'aligner avec le bas (cf. margin-top: auto plus bas). */
.wine-card__price {
    color: var(--c-bordeaux);
    font-weight: 600;
    margin: 0.5rem 0 0;
}
.wine-card__badge {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius);
}
.wine-card__badge--low { background: var(--c-champagne); color: var(--c-bordeaux); }
.wine-card__badge--out { background: var(--c-gris-300); color: var(--c-gris-700); }

/* ---------- Filtres ---------- */
.filter-bar {
    background: var(--c-bg-soft);
    padding: 1rem;
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.5rem;
}
.filter-bar__group { display: flex; flex-direction: column; min-width: 160px; }
.filter-bar__group label { font-size: 0.85rem; margin-bottom: 0.25rem; color: var(--c-text-muted); }
.filter-bar__group input,
.filter-bar__group select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--c-gris-300);
    border-radius: var(--radius);
    font: inherit;
    background: var(--c-bg);
}
.filter-bar__group--check { flex-direction: row; align-items: center; gap: 0.4rem; }
.filter-bar__actions { display: flex; gap: 0.5rem; align-items: center; }

.catalogue__count { color: var(--c-text-muted); font-size: 0.9rem; }
.catalogue__empty { padding: 2rem; text-align: center; color: var(--c-text-muted); }

/* ---------- Fiche vin ---------- */
.wine-detail__back { margin-bottom: 1rem; }
.wine-detail__hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-gris-300);
}
.wine-detail__img { max-height: 320px; object-fit: contain; }
.wine-detail__appellation { color: var(--c-bordeaux); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; margin: 0 0 0.5rem; }
.wine-detail__title { font-family: var(--font-serif); margin: 0 0 0.5rem; }
.wine-detail__couleur { color: var(--c-text-muted); margin: 0; }

.wine-detail__stock { margin: 2rem 0; }
.stock-table { width: 100%; border-collapse: collapse; }
.stock-table th, .stock-table td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--c-gris-300);
}
.stock-table th { background: var(--c-bg-soft); font-weight: 600; }
.stock-table tr.is-empty { color: var(--c-gris-500); }

.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--radius);
    margin-left: 0.5rem;
}
.tag--low { background: var(--c-champagne); color: var(--c-bordeaux); }
.tag--out { background: var(--c-gris-300); color: var(--c-gris-700); }

.sommelier-block { margin: 2rem 0; }
.sommelier-block h2 {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.5rem;
}

/* ---------- Sélection ---------- */
.selection__title { font-family: var(--font-serif); color: var(--c-bordeaux); }
.selection__header { color: var(--c-text-muted); margin-bottom: 2rem; }
.selection__date { color: var(--c-text-muted); margin: 0.25rem 0 0; font-size: 0.9rem; }
.selection__section-title {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
}
.selection-list { list-style: none; padding: 0; margin: 0; }
.selection-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px dotted var(--c-gris-300);
    gap: 1rem;
}
.selection-item__location {
    margin: 0 0 0.2rem;
    color: var(--c-bordeaux);
    font-family: var(--font-serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.selection-item__name { margin: 0; font-weight: 500; }
.selection-item__vintage { color: var(--c-text-muted); margin-left: 0.4rem; font-weight: normal; }
.selection-item__appellation { margin: 0.15rem 0 0; color: var(--c-text-muted); font-size: 0.9rem; }
.selection-item__price { margin: 0; color: var(--c-bordeaux); font-weight: 600; text-align: right; }
.selection-item__link { margin: 0.25rem 0 0; font-size: 0.85rem; text-align: right; }

/* Groupement par couleur (anciennement par terroir → couleur) */
.selection-couleur { margin-top: 2.5rem; }
.selection-couleur:first-of-type { margin-top: 1.5rem; }
.selection-couleur__titre {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-bordeaux);
    letter-spacing: 0.01em;
    font-weight: 500;
}

/* ==============================================================
   Bandeau d'introduction (3 portes d'entrée sommelier)
   --------------------------------------------------------------
   Trois BLOCS côte-à-côte (pas trois lignes) — chaque bloc est
   une porte d'entrée dans un parcours.
   ============================================================== */
.bandeau {
    margin: 1.5rem 0;
    padding: 0;
}

/* Bandeau en haut de page : sobre, discret, replié par défaut */
.layout--introduction .site-main > .bandeau:first-child {
    padding: 1.25rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--c-champagne);
    margin-top: 0;
    margin-bottom: 0;
}

/* Bandeau en pied de page : plus généreux, marque le "et après ?" */
.layout--introduction .site-main > .bandeau:last-child {
    margin-top: 3rem;
    padding: 2rem 1.5rem 2.5rem;
    border-top: 1px solid var(--c-champagne);
    background: var(--c-bg-soft);
}

/* En-tête éditoriale du bandeau */
/* Grille des 3 tiroirs côte-à-côte */
.bandeau__tiroirs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* ----- Un tiroir = un bouton qui s'ouvre en panneau ----- */
.tiroir {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(107, 29, 44, 0.04);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.tiroir:hover { border-color: var(--c-bordeaux-light); }
.tiroir[open] {
    border-color: var(--c-bordeaux-light);
    box-shadow: 0 4px 16px rgba(107, 29, 44, 0.10);
}

/* Le bouton (summary) */
.tiroir__bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    cursor: pointer;
    list-style: none;        /* retirer la flèche native par défaut */
    font-family: var(--font-serif);
    color: var(--c-bordeaux-dark);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    user-select: none;
}
.tiroir__bouton::-webkit-details-marker { display: none; }   /* idem Safari/Chrome */
.tiroir__libelle { flex: 1; }
.tiroir__chevron {
    color: var(--c-bordeaux);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}
.tiroir[open] .tiroir__chevron { transform: rotate(180deg); }

/* Filet identitaire visible quand ouvert */
.tiroir[open] .tiroir__bouton {
    border-bottom: 1px solid var(--c-champagne);
    background: var(--c-champagne-soft);
}

/* Le contenu (visible uniquement quand details est ouvert) */
.tiroir__contenu {
    padding: 1rem 1.1rem 1.1rem;
}
.tiroir__sous-titre {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.83rem;
    color: var(--c-text-muted);
    margin: 0 0 0.85rem;
    line-height: 1.4;
}

.bloc-entree__pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Bloc Arômes : sous-rubriques par famille */
.famille-arome {
    margin-bottom: 0.85rem;
}
.famille-arome:last-child { margin-bottom: 0; }

.famille-arome__titre {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-bordeaux);
    text-decoration: none;
    margin-bottom: 0.35rem;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.famille-arome__titre:hover {
    border-bottom-color: var(--c-bordeaux);
    color: var(--c-bordeaux-dark);
    text-decoration: none;
}
.famille-arome__pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* ----- Pastilles soignées ----- */
.pastille {
    display: inline-block;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--c-champagne);
    border-radius: 999px;
    color: var(--c-bordeaux-dark);
    background: var(--c-champagne-soft);
    font-family: var(--font-serif);
    font-size: 0.83rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.025);
}
/* Variante plus petite pour les listes denses (arômes individuels) */
.pastille--petite {
    padding: 0.22rem 0.6rem;
    font-size: 0.76rem;
}
.pastille:hover,
.pastille:focus {
    background: var(--c-bordeaux);
    color: var(--c-bg);
    border-color: var(--c-bordeaux);
    box-shadow: 0 2px 6px rgba(107, 29, 44, 0.22);
    text-decoration: none;
    transform: translateY(-1px);
}

/* Lien "affiner la recherche" sous le bandeau */
.bandeau__lien-affiner {
    text-align: center;
    margin: 1.5rem 0 0;
}
.bandeau__lien-affiner a {
    color: var(--c-text-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 2px;
}
.bandeau__lien-affiner a:hover {
    color: var(--c-bordeaux);
    border-bottom-color: var(--c-bordeaux);
}

/* Footer du site */
.site-footer {
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--c-gris-300);
    text-align: center;
    background: var(--c-gris-100);
}
.site-footer__quote {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-text-muted);
    max-width: 600px;
    margin: 0 auto 1rem;
}
.site-footer__quote cite {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.site-footer__legal {
    font-size: 0.8rem;
    color: var(--c-gris-500);
    margin: 0;
}

.zone-contenu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
/* Pleine largeur pour vitrine et résultats (les sections internes gèrent leur propre cadrage) */
.page--home .zone-contenu,
.page--resultats .zone-contenu {
    max-width: none;
    padding: 0;
}

/* ==============================================================
   Page d'accueil — vitrine pleine largeur
   ============================================================== */
.vitrine {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.vitrine__entete {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-champagne);
}
.vitrine__titre {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.4rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.vitrine__sous-titre {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.vitrine-couleur { margin-top: 2.5rem; }
.vitrine-couleur:first-of-type { margin-top: 0.5rem; }
.vitrine-couleur__titre {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-bordeaux);
    letter-spacing: 0.01em;
    font-weight: 500;
}

/* Cartes de vin non cliquables (sans fiche) — discret */
.wine-card__link--static {
    display: block;
    cursor: default;
    color: inherit;
    text-decoration: none;
}
.wine-card__vintage {
    color: var(--c-text-muted);
    font-weight: normal;
    margin-left: 0.4rem;
    font-size: 0.95em;
}

/* ==============================================================
   Page résultats (parcours bandeau)
   ============================================================== */
.resultats {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.resultats__retour {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.resultats__retour a {
    color: var(--c-text-muted);
    text-decoration: none;
}
.resultats__retour a:hover {
    color: var(--c-bordeaux);
    text-decoration: underline;
}
.resultats__titre {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.5rem;
    font-weight: 400;
}
.resultats__compte {
    color: var(--c-text-muted);
    margin: 0 0 2rem;
    font-style: italic;
}

/* ---------- Recherche avancée ---------- */
.recherche__title { font-family: var(--font-serif); color: var(--c-bordeaux); }
.recherche__intro { color: var(--c-text-muted); margin-bottom: 1.5rem; }
.recherche__count { color: var(--c-text-muted); font-size: 0.9rem; margin: 1.5rem 0 1rem; }

.rech-form {
    background: var(--c-bg-soft);
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.rech-form__row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: end;
}
.rech-form__row--actions { justify-content: space-between; align-items: end; margin-top: 1rem; }

.rech-form__group { display: flex; flex-direction: column; min-width: 180px; flex: 1; }
.rech-form__group--wide { flex-basis: 100%; }
.rech-form__group--check { flex-direction: row; align-items: center; gap: 0.5rem; min-width: auto; }
.rech-form__label {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin-bottom: 0.25rem;
}
.rech-form__group input,
.rech-form__group select {
    padding: 0.5rem;
    border: 1px solid var(--c-gris-300);
    border-radius: var(--radius);
    font: inherit;
    background: var(--c-bg);
}

.rech-form__fieldset {
    border: 1px solid var(--c-gris-300);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--c-bg);
}
.rech-form__fieldset legend {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    padding: 0 0.5rem;
    font-weight: 600;
}

.rech-form__radios {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.rech-form__radio,
.rech-form__check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.rech-form__exception {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--c-bordeaux);
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
    font-size: 0.95rem;
}
.rech-form__exception strong { color: var(--c-bordeaux-dark); }

.rech-form__columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}
.rech-form__column { display: flex; flex-direction: column; gap: 0.35rem; }
.rech-form__sublabel {
    font-size: 0.85rem;
    color: var(--c-bordeaux);
    margin: 0 0 0.4rem;
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.25rem;
}

.rech-form__buttons { display: flex; gap: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--c-gris-300);
    background: var(--c-champagne-soft);
    padding: 2rem 1.5rem;
    text-align: center;
}
.site-footer__quote {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-text-muted);
    max-width: 600px;
    margin: 0 auto 1rem;
}
.site-footer__copy { color: var(--c-text-muted); font-size: 0.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    .site-header__inner { flex-wrap: wrap; gap: 1rem; }
    .wine-detail__hero { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
}

/* ==============================================================
   Barre de tri (commune index, selection, resultats, catalogue)
   --------------------------------------------------------------
   Une simple ligne sous le titre, au-dessus du listing.
   Format : "Trier : [select ▾]" — discret, pas de bordure lourde.
   ============================================================== */
.barre-tri {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-champagne);
}
.barre-tri__label {
    font-family: var(--font-serif);
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin: 0;
}
.barre-tri__select {
    border: 1px solid var(--c-champagne);
    background: var(--c-bg);
    color: var(--c-bordeaux);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
}
.barre-tri__select:hover { border-color: var(--c-bordeaux); }
.barre-tri__select:focus {
    outline: none;
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 2px var(--c-champagne);
}

/* ==============================================================
   Catalogue — hero, menu gammes
   ============================================================== */
.catalogue__hero {
    text-align: center;
    margin: 1rem 0 2rem;
    padding: 1.5rem 1rem 1rem;
    border-bottom: 1px solid var(--c-champagne);
}
.catalogue__hero .catalogue__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--c-bordeaux-dark);
    font-weight: 500;
}
.catalogue__lede {
    margin: 0;
    color: var(--c-text-muted);
    font-style: italic;
    font-size: 1rem;
}

/* ==============================================================
   Menu gammes — barre d'onglets horizontale
   --------------------------------------------------------------
   Présentation type "tabs" : visuellement claire qu'il s'agit d'un
   menu de filtrage avec un seul item actif à la fois. L'option
   active est marquée par un fond bordeaux + indicateur sous l'onglet.
   ============================================================== */
.gammes-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 1.75rem 0 1.25rem;
    padding: 0;
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
    border: 1px solid var(--c-champagne);
    overflow: hidden;
}
.gammes-nav__label {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-right: 1px solid var(--c-champagne);
    flex-shrink: 0;
}
.gammes-nav__item {
    flex: 1;
    min-width: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    background: transparent;
    color: var(--c-bordeaux);
    border: none;
    border-right: 1px solid var(--c-champagne);
    border-radius: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.gammes-nav__item:last-child { border-right: none; }
.gammes-nav__item:hover {
    background: var(--c-bg);
    text-decoration: none;
}
.gammes-nav__item.is-active {
    background: var(--c-bordeaux);
    color: #fff;
    font-weight: 500;
}
.gammes-nav__item.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--c-bordeaux);
}
.gammes-nav__item--all {
    color: var(--c-text-muted);
    font-style: italic;
    font-size: 0.92rem;
}
.gammes-nav__item--all.is-active {
    color: #fff;
    font-style: normal;
}

@media (max-width: 700px) {
    .gammes-nav { flex-direction: column; }
    .gammes-nav__label { border-right: none; border-bottom: 1px solid var(--c-champagne); justify-content: center; }
    .gammes-nav__item { border-right: none; border-bottom: 1px solid var(--c-champagne); }
    .gammes-nav__item:last-child { border-bottom: none; }
    .gammes-nav__item.is-active::after { display: none; }
}

/* ==============================================================
   Zone compte dans le header (auth)
   ============================================================== */
.site-auth {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding-right: 0.75rem;
}
.site-auth__link {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: var(--c-bordeaux);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}
.site-auth__link:hover {
    background: var(--c-champagne-soft);
    text-decoration: none;
}
.site-auth__link--ghost {
    color: var(--c-text-muted);
    font-size: 0.85rem;
}
.site-auth__link--cta {
    background: var(--c-bordeaux);
    color: #fff;
}
.site-auth__link--cta:hover {
    background: var(--c-bordeaux-dark);
    color: #fff;
}

/* ==============================================================
   Pages d'authentification (inscription, connexion, reset…)
   ============================================================== */
.auth-page {
    max-width: 520px;
    margin: 2rem auto;
    padding: 1rem;
}
.auth-page__title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1rem;
    font-weight: 500;
    text-align: center;
}
.auth-page__lede {
    text-align: center;
    color: var(--c-text-muted);
    font-style: italic;
    margin: 0 0 2rem;
}
.auth-page__success,
.auth-page__success-msg {
    background: var(--c-champagne-soft);
    border-left: 3px solid var(--c-bordeaux);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}
.auth-page__warning {
    color: #8a6500;
    background: #fff8e1;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}
.auth-page__altcta {
    text-align: center;
    margin: 2rem 0 0;
    font-size: 0.95rem;
    color: var(--c-text-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.auth-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.auth-form__row label {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--c-bordeaux);
}
.auth-form__row input[type="text"],
.auth-form__row input[type="email"],
.auth-form__row input[type="tel"],
.auth-form__row input[type="password"] {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    background: var(--c-bg);
    font-size: 1rem;
}
.auth-form__row input:focus {
    outline: none;
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 2px var(--c-champagne);
}
.auth-form__opt {
    color: var(--c-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}
.auth-form__hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--c-text-muted);
}
.auth-form__radios {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.auth-form__radios label {
    font-family: var(--font-body, inherit);
    font-size: 0.95rem;
    color: var(--c-text);
    cursor: pointer;
    font-weight: normal;
}
.auth-form__row--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
}
.auth-form__row--check label {
    cursor: pointer;
    font-family: inherit;
    color: var(--c-text);
    font-weight: normal;
    font-size: 0.95rem;
    line-height: 1.4;
}
.auth-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    align-items: center;
}
.btn--primary {
    background: var(--c-bordeaux);
    color: #fff;
    border: none;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius);
    font-family: var(--font-serif);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn--primary:hover {
    background: var(--c-bordeaux-dark);
    color: #fff;
}

.form-error {
    color: #b3261e;
    font-size: 0.85rem;
    margin: 0;
}

/* Espace client (mon compte) */
.account-page {
    max-width: 720px;
    margin: 2rem auto;
    padding: 1rem;
}
.account-page__title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1.5rem;
    font-weight: 500;
}
.account-card {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.account-card h2 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--c-bordeaux);
    margin: 0 0 0.8rem;
    font-weight: 500;
}
.account-card--placeholder {
    background: var(--c-champagne-soft);
    color: var(--c-text-muted);
    font-style: italic;
}
.account-card__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
}
.account-card__list dt {
    color: var(--c-text-muted);
    font-size: 0.9rem;
}
.account-card__list dd {
    margin: 0;
    color: var(--c-text);
}
.account-page__logout {
    margin-top: 2rem;
    text-align: center;
    color: var(--c-text-muted);
}

@media (max-width: 700px) {
    .site-auth { flex-wrap: wrap; gap: 0.3rem; }
    .auth-form__actions { flex-direction: column; align-items: stretch; }
    .auth-form__actions .btn { width: 100%; text-align: center; }
}

/* ==============================================================
   Panier — bouton dans le header (badge) + page panier
   ============================================================== */
.site-auth__panier {
    position: relative;
    font-size: 1.1rem;
    padding: 0.4rem 0.75rem;
    text-decoration: none;
}
.site-auth__panier-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--c-bordeaux);
    color: #fff;
    font-size: 0.7rem;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* ==============================================================
   Bloc Ajouter au panier sur la fiche vin
   ============================================================== */
.wine-detail__buy {
    background: var(--c-champagne-soft);
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    margin: 1.75rem 0;
    border: 1px solid var(--c-champagne);
}
.wine-detail__buy h2 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--c-bordeaux);
    margin: 0 0 1rem;
    font-weight: 500;
}
.wine-detail__buy-loginhint {
    margin: 0 0 1rem;
    font-style: italic;
    color: var(--c-text-muted);
}

.wine-buy-form {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    gap: 1rem 1.25rem;
    align-items: end;
}
.wine-buy-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.wine-buy-form__row label {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--c-bordeaux);
}
.wine-buy-form__row select,
.wine-buy-form__row input[type="number"] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    background: var(--c-bg);
    font-size: 0.95rem;
    font-family: inherit;
}
.wine-buy-form__row select:disabled {
    background: #f0e9e2;
    color: var(--c-text-muted);
    cursor: not-allowed;
}
.wine-buy-form__row--info {
    grid-column: 1 / -1;
}
.wine-buy-form__prix-info {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--c-bordeaux);
    font-weight: 500;
}
.wine-buy-form__actions {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}
.wine-buy-form__actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .wine-buy-form { grid-template-columns: 1fr; }
}

/* ==============================================================
   Page panier
   ============================================================== */
.panier-page {
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 1rem;
}
.panier-page__title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.panier-page__empty {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
    border: 1px solid var(--c-champagne);
}
.panier-page__hint {
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: #fff8e1;
    border-left: 3px solid #d4a017;
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: #8a6500;
}
.panier-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

/* Tableau panier */
.panier-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg);
}
.panier-table th {
    text-align: left;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.5rem;
    border-bottom: 2px solid var(--c-champagne);
    font-weight: 500;
}
.panier-table td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--c-champagne);
    vertical-align: middle;
}
.panier-table__cell-vin {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.panier-table__img {
    width: 50px; height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}
.panier-table__cru { margin: 0; font-weight: 500; }
.panier-table__cru a { color: var(--c-text); text-decoration: none; }
.panier-table__cru a:hover { color: var(--c-bordeaux); }
.panier-table__location { margin: 0.2rem 0 0; font-size: 0.78rem; }
.panier-table__region { color: #555; text-transform: lowercase; }
.panier-table__appellation { color: var(--c-bordeaux); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 0.4rem; }
.panier-table__cl { display: block; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.2rem; }
.panier-table__nv { color: var(--c-text-muted); font-style: italic; }
.panier-table__cell-prix { text-align: right; font-family: var(--font-serif); }
.panier-table__cell-st { text-align: right; font-family: var(--font-serif); font-weight: 500; color: var(--c-bordeaux); }
.panier-table__prix-change { display: block; font-size: 0.75rem; color: #b3261e; font-style: italic; margin-top: 0.2rem; }

.panier-qte-form { display: inline-flex; gap: 0.3rem; align-items: center; }
.panier-qte-input {
    width: 60px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    text-align: center;
    font-size: 0.95rem;
}
.panier-qte-btn {
    background: var(--c-champagne);
    color: var(--c-bordeaux);
    border: none;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
}
.panier-qte-btn:hover { background: var(--c-bordeaux); color: #fff; }
.panier-table__stock-max { font-size: 0.75rem; color: #b3261e; margin: 0.25rem 0 0; }

.panier-supprimer-btn {
    background: transparent;
    color: var(--c-text-muted);
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 0.4rem;
    line-height: 1;
}
.panier-supprimer-btn:hover { color: #b3261e; }

.panier-table__total-label {
    text-align: right;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 1rem;
}
.panier-table__total {
    text-align: right;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--c-bordeaux);
    padding-top: 1rem;
}

.panier-vider-form { display: inline; }
.link {
    background: none;
    border: none;
    color: var(--c-text-muted);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.link--muted:hover { color: var(--c-bordeaux); }

/* Flash messages (succès / erreur après action panier) */
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin: 0 0 1rem;
}
.flash--success { background: #e6f4ea; color: #1e6e3a; border-left: 3px solid #1e6e3a; }
.flash--error   { background: #fce8e6; color: #b3261e; border-left: 3px solid #b3261e; }

@media (max-width: 700px) {
    .panier-table thead { display: none; }
    .panier-table, .panier-table tbody, .panier-table tr, .panier-table td {
        display: block;
        width: 100%;
    }
    .panier-table tr {
        border-bottom: 2px solid var(--c-champagne);
        padding: 0.75rem 0;
    }
    .panier-table td {
        text-align: left;
        padding: 0.4rem 0.5rem;
        border: none;
    }
    .panier-table__cell-prix, .panier-table__cell-st { text-align: left; }
}

/* ==============================================================
   Lot 4 — Adresses, tunnel commande, mes commandes
   ============================================================== */

/* Cartes d'adresses (liste) */
.adr-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}
.adr-card {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.adr-card--default {
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 1px var(--c-bordeaux);
}
.adr-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.6rem;
}
.adr-card__libelle {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--c-bordeaux-dark);
    font-weight: 500;
    flex-grow: 1;
}
.adr-card__type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-serif);
    font-weight: 500;
}
.adr-card__type--fbo,
.adr-card__type--societe {
    background: var(--c-bordeaux);
    color: #fff;
}
.adr-card__type--domicile,
.adr-card__type--independant {
    background: var(--c-champagne-soft);
    color: var(--c-bordeaux);
    border: 1px solid var(--c-champagne);
}
.adr-card__default {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1e6e3a;
    font-weight: 500;
}
.adr-card__body {
    margin: 0.5rem 0;
    font-family: inherit;
    font-size: 0.9rem;
    white-space: pre-wrap;
    color: var(--c-text);
}
.adr-card__foot {
    display: flex;
    gap: 1rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--c-champagne);
    font-size: 0.85rem;
}
.link--danger { color: #b3261e; }
.link--danger:hover { color: #8a1d18; }

.account-page__back {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.account-page__back a {
    color: var(--c-text-muted);
    text-decoration: none;
}
.account-page__back a:hover { color: var(--c-bordeaux); }
.account-page__cta {
    margin: 0 0 1rem;
}
.account-page__empty {
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    color: var(--c-text-muted);
    font-style: italic;
    margin: 1rem 0;
}

/* Tunnel de commande */
.commande-page {
    max-width: 900px;
    margin: 1.5rem auto;
    padding: 1rem;
}
.commande-page__title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 1.25rem;
    font-weight: 500;
}
.commande-step {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.25rem;
}
.commande-step__title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--c-bordeaux);
    margin: 0 0 1rem;
    font-weight: 500;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-champagne);
}
.commande-step__hint {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    font-style: italic;
}
.commande-step textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    background: var(--c-bg);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.commande-step--confirm {
    background: var(--c-champagne-soft);
}

/* Récap commande (table) */
.commande-recap {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
.commande-recap th {
    text-align: left;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid var(--c-champagne);
    font-weight: 500;
}
.commande-recap td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--c-champagne);
    vertical-align: top;
    font-size: 0.92rem;
}
.commande-recap tfoot td {
    border-bottom: none;
    padding-top: 1rem;
    font-size: 1rem;
}
.commande-recap .num {
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-serif);
}
.commande-recap__sub {
    display: block;
    color: var(--c-text-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.commande-recap__hint {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    font-style: italic;
    text-align: right;
}
.commande-recap__addr {
    margin: 0.5rem 0;
    background: var(--c-champagne-soft);
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9rem;
    white-space: pre-wrap;
    line-height: 1.45;
}

/* Choix d'adresses (cards radio) */
.commande-adr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.commande-adr-card {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    background: var(--c-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.commande-adr-card:hover {
    border-color: var(--c-bordeaux);
}
.commande-adr-card.is-selected {
    border-color: var(--c-bordeaux);
    background: var(--c-champagne-soft);
    box-shadow: 0 0 0 1px var(--c-bordeaux);
}
.commande-adr-card input[type="radio"] {
    margin-top: 0.2rem;
}
.commande-adr-card__head {
    margin: 0 0 0.4rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.commande-adr-card__body {
    margin: 0;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--c-text);
    white-space: pre-wrap;
    line-height: 1.4;
}
.commande-empty-adr {
    background: #fff8e1;
    border-left: 3px solid #d4a017;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
}

/* Bandeau de confirmation après commande */
.commande-confirm-banner {
    background: linear-gradient(135deg, var(--c-champagne-soft), var(--c-bg));
    border: 1px solid var(--c-bordeaux);
    border-radius: var(--radius);
    padding: 2rem 2.25rem;
    text-align: center;
    margin: 0 0 1.5rem;
}
.commande-confirm-banner__title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.commande-confirm-banner__numero {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--c-bordeaux);
}
.commande-confirm-banner__msg {
    margin: 0;
    font-size: 0.95rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}

/* Mes commandes */
.commandes-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: var(--c-bg);
}
.commandes-table th {
    text-align: left;
    background: var(--c-champagne-soft);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--c-bordeaux);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--c-champagne);
    font-weight: 500;
}
.commandes-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--c-champagne);
    font-size: 0.92rem;
}
.commandes-table .num { text-align: right; font-family: var(--font-serif); white-space: nowrap; }
.commande-statut {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: var(--font-serif);
    font-weight: 500;
}
.commande-statut--en_attente        { background: #fff8e1; color: #8a6500; }
.commande-statut--confirmee         { background: #e3f2fd; color: #0d47a1; }
.commande-statut--paiement_en_cours { background: #f3e5f5; color: #6a1b9a; }
.commande-statut--payee             { background: #e8f5e9; color: #1b5e20; }
.commande-statut--expediee          { background: #e8eaf6; color: #283593; }
.commande-statut--livree            { background: #e6f4ea; color: #1e6e3a; }
.commande-statut--annulee           { background: #fce8e6; color: #b3261e; }

@media (max-width: 700px) {
    .commande-step { padding: 1rem; }
    .commande-adr-grid { grid-template-columns: 1fr; }
}

/* Bouton "Annuler" + lien "Détail" sur mes-commandes */
.commandes-table__actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    white-space: nowrap;
}
.commandes-table__actions form { margin: 0; }
/* ==============================================================
   Lot A1 — Fiche vin compactée et hiérarchisée
   À ajouter à la fin de public/css/style.css
   ============================================================== */

/* ----- En-tête compact 3 colonnes : photo / info / prix ----- */
.wine-hero {
    display: grid;
    grid-template-columns: 200px 1fr 220px;
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--c-gris-300);
}

.wine-hero__visual {
    text-align: center;
}
.wine-hero__img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
}
.wine-hero__img--placeholder {
    display: block;
    width: 100%;
    height: 280px;
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
}

.wine-hero__info {
    min-width: 0;
}
.wine-hero__appellation {
    color: var(--c-bordeaux);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}
.wine-hero__title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    line-height: 1.15;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.6rem;
}
.wine-hero__meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}
.wine-hero__region {
    color: var(--c-text-muted);
    font-size: 0.88rem;
    text-transform: lowercase;
}

/* Pastille couleur (rouge/blanc/rosé/effervescent/liquoreux) */
.couleur-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.couleur-pill--rouge        { background: #6b1d2c; color: #fff; }
.couleur-pill--blanc        { background: #f1e4c6; color: #6b1d2c; border-color: #d6c79e; }
.couleur-pill--ros          { background: #f5c4cc; color: #6b1d2c; border-color: #e89aaa; }
.couleur-pill--effervescent { background: #fff8d6; color: #6b1d2c; border-color: #e8d878; }
.couleur-pill--liquoreux    { background: #d4a85f; color: #fff; }

/* ----- Pastilles arômes / accords cliquables ----- */
.wine-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
}
.wine-tags__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    margin-right: 0.3rem;
    flex-basis: 70px;
}
.wine-tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    text-decoration: none;
    background: var(--c-champagne-soft);
    color: var(--c-bordeaux);
    border: 1px solid var(--c-champagne);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.wine-tag:hover {
    background: var(--c-bordeaux);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(107, 29, 44, 0.18);
}
/* Variantes par catégorie d'arôme (subtiles, pour lecture rapide) */
.wine-tag--fruits_rouges  { border-left: 3px solid #b3324a; }
.wine-tag--fruits_noirs   { border-left: 3px solid #4a1320; }
.wine-tag--fruits_blancs  { border-left: 3px solid #d4a85f; }
.wine-tag--floral         { border-left: 3px solid #e89aaa; }
.wine-tag--epices         { border-left: 3px solid #8b4513; }
.wine-tag--boise          { border-left: 3px solid #6f4424; }
.wine-tag--mineral        { border-left: 3px solid #5a7a8a; }
.wine-tag--sousbois       { border-left: 3px solid #4a5a3a; }
.wine-tag--doux           { border-left: 3px solid #d4a85f; }
/* Catégories mets */
.wine-tag--viande         { border-left: 3px solid #6b1d2c; }
.wine-tag--volaille       { border-left: 3px solid #b8794a; }
.wine-tag--mer            { border-left: 3px solid #5a7a8a; }
.wine-tag--fromage        { border-left: 3px solid #d4b870; }
.wine-tag--charcuterie    { border-left: 3px solid #8b4513; }
.wine-tag--plat           { border-left: 3px solid #6f4424; }
.wine-tag--special        { border-left: 3px solid #b3324a; }

/* ----- Bloc prix & contenances en colonne 3 ----- */
.wine-hero__buy {
    text-align: right;
    padding: 1rem 0;
    border-left: 1px solid var(--c-gris-300);
    padding-left: 1.5rem;
}
.wine-hero__prix-label {
    margin: 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wine-hero__prix {
    margin: 0.2rem 0 0.4rem;
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--c-bordeaux-dark);
    font-weight: 600;
}
.wine-hero__formats {
    margin: 0;
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.wine-hero__epuise {
    color: var(--c-gris-500);
    font-style: italic;
}

/* ----- Section ajout au panier ----- */
.wine-buy {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--c-champagne-soft);
    border-radius: var(--radius);
}
.wine-buy h2 {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.wine-buy__login p { margin: 0.4rem 0; }

/* ----- Disponibilités ----- */
.wine-stock {
    margin: 1.5rem 0;
}
.wine-stock h2 {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.stock-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ----- Contenu sommelier en grille 2 colonnes ----- */
.wine-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
    margin: 2rem 0;
}
.wine-block {
    min-width: 0;
}
.wine-block h2 {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.4rem;
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

/* Bloc millésime : tag puis texte */
.wine-millesime {
    margin: 0.5rem 0 0.8rem;
}
.wine-millesime__tag {
    display: inline-block;
    background: var(--c-champagne);
    color: var(--c-bordeaux);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: 1px;
    letter-spacing: 0.03em;
}
.wine-millesime__texte {
    display: inline;
    margin: 0;
    line-height: 1.55;
    color: var(--c-text);
}
/* Quand le bloc n'a pas de tag (texte simple), le texte n'est plus inline */
.wine-millesime:has(.wine-millesime__tag) + .wine-millesime__texte,
.wine-millesime__tag + .wine-millesime__texte {
    display: inline;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
    .wine-hero {
        grid-template-columns: 140px 1fr;
    }
    .wine-hero__buy {
        grid-column: 1 / -1;
        text-align: left;
        border-left: none;
        border-top: 1px solid var(--c-gris-300);
        padding: 1rem 0 0;
        margin-top: 0.5rem;
    }
    .wine-hero__prix {
        font-size: 1.8rem;
    }
    .wine-content {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .wine-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .wine-hero__visual {
        margin: 0 auto;
        max-width: 160px;
    }
    .wine-hero__meta {
        justify-content: center;
    }
    .wine-tags {
        justify-content: center;
    }
    .wine-tags__label {
        flex-basis: 100%;
        text-align: center;
        margin: 0;
    }
}

/* ==============================================================
   Lot A1.5 — Sélecteur de millésime synchronisé global
   ============================================================== */

.wine-millesimes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
    border-left: 3px solid var(--c-bordeaux);
}
.wine-millesimes__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    font-weight: 600;
    margin-right: 0.5rem;
}

.wine-millesime-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--c-bordeaux);
    background: #fff;
    border: 1px solid var(--c-champagne);
    transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wine-millesime-pill:hover {
    background: var(--c-champagne-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(107, 29, 44, 0.10);
}
.wine-millesime-pill.is-active {
    background: var(--c-bordeaux);
    color: #fff;
    border-color: var(--c-bordeaux);
    box-shadow: 0 2px 8px rgba(107, 29, 44, 0.25);
}
.wine-millesime-pill.is-active:hover {
    background: var(--c-bordeaux-dark);
    color: #fff;
}
.wine-millesime-pill.is-out {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: var(--c-gris-500);
}
.wine-millesime-pill.is-out.is-active {
    opacity: 1;
    text-decoration: none;
    background: var(--c-bordeaux-light);
}
.wine-millesime-pill__out {
    display: none;   /* on garde le marquage sémantique mais on n'affiche pas le · */
}

/* Ligne de stock surlignée pour le millésime actif */
.stock-table tr.is-active {
    background: var(--c-champagne-soft);
}
.stock-table tr.is-active td {
    font-weight: 500;
}

/* Mention discrète "Information valable pour..." quand le bloc texte
   d'une section ne correspond pas exactement au millésime actif
   (cas : factorisation 2015–2018 affichée alors que l'actif est 2017) */
.wine-block__source {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    font-style: italic;
}
.wine-block__texte {
    margin: 0;
    line-height: 1.6;
}

/* Responsive : le sélecteur s'adapte sur mobile */
@media (max-width: 600px) {
    .wine-millesimes {
        padding: 0.6rem 0.75rem;
    }
    .wine-millesimes__label {
        flex-basis: 100%;
        margin: 0 0 0.4rem;
    }
}

/* ==============================================================
   Lot A1.6 — Bouton + et popover quantité dans le tableau Disponibilités
   ============================================================== */

.stock-table--actionable .stock-table__action-cell {
    width: 60px;
    text-align: right;
    padding-right: 0.5rem;
    position: relative;
}

/* Bouton + circulaire compact */
.stock-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--c-bordeaux);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stock-add-btn:hover:not(:disabled) {
    background: var(--c-bordeaux-dark);
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(107, 29, 44, 0.3);
}
.stock-add-btn:active:not(:disabled) {
    transform: scale(0.96);
}
.stock-add-btn:disabled {
    background: var(--c-gris-300);
    color: var(--c-gris-500);
    cursor: not-allowed;
}

/* Wrapper relatif pour positionner le popover */
.stock-add {
    position: relative;
    display: inline-block;
}

/* Popover de quantité : à droite du bouton + */
.stock-add-popover {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5rem);
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid var(--c-champagne);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.85rem 1rem;
    z-index: 10;
    white-space: nowrap;
}
.stock-add-popover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #fff;
}
.stock-add-popover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--c-champagne);
    z-index: -1;
}

.stock-add-form {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}

/* Stepper [−] [N] [+] : boutons généreux, signes très lisibles */
.stock-add-popover__qte {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--c-gris-300);
    border-radius: 6px;
    overflow: hidden;
    height: 48px;
}
.stock-add-step {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--c-champagne);
    color: var(--c-bordeaux-dark);
    font-size: 1.75rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s, transform 0.08s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Police système pour un rendu plus solide des signes − et + */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Marge optique : le caractère "respire" dans son carré */
    letter-spacing: 0;
}
.stock-add-step:hover {
    background: var(--c-bordeaux);
    color: #fff;
}
.stock-add-step:active {
    background: var(--c-bordeaux-dark);
    color: #fff;
    transform: scale(0.95);
}
.stock-add-popover__input {
    width: 56px;
    height: 48px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--c-gris-300);
    border-right: 1px solid var(--c-gris-300);
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: #fff;
    color: var(--c-text);
    -moz-appearance: textfield;
    padding: 0;
}
.stock-add-popover__input::-webkit-outer-spin-button,
.stock-add-popover__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stock-add-popover__input:focus {
    outline: none;
    background: var(--c-champagne-soft);
}

/* Bouton « Ajouter » dans le popover */
.stock-add-popover__submit {
    padding: 0 1.1rem;
    height: 48px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1;
}

/* Hint discret « N dispo » sous le formulaire */
.stock-add-popover__hint {
    margin: 0.4rem 0 0;
    font-size: 0.72rem;
    color: var(--c-text-muted);
    text-align: center;
    width: 100%;
    flex-basis: 100%;
}

/* Responsive : sur mobile, le popover passe en haut du bouton plutôt qu'à
   gauche pour éviter de sortir de l'écran */
@media (max-width: 600px) {
    .stock-add-popover {
        top: auto;
        bottom: calc(100% + 0.5rem);
        right: 0;
        transform: none;
    }
    .stock-add-popover::after,
    .stock-add-popover::before {
        top: 100%;
        left: 75%;
        transform: none;
        border: 6px solid transparent;
        border-top-color: #fff;
    }
    .stock-add-popover::before {
        border-top-color: var(--c-champagne);
    }
}

/* ==============================================================
   Lot A2 — Enrichissement éditorial : argumentaire / FAQ / citation
   ============================================================== */

/* ----- Argumentaire « à présenter au passager » ----- */
.wine-pitch {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--c-champagne-soft) 0%, #fff 100%);
    border-left: 4px solid var(--c-bordeaux);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(107, 29, 44, 0.08);
}
.wine-pitch__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--c-bordeaux);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
    font-weight: 600;
}
.wine-pitch__title::before {
    content: '“';
    font-size: 1.6rem;
    line-height: 0.5;
    margin-right: 0.4rem;
    color: var(--c-bordeaux);
    vertical-align: -0.2em;
    font-family: var(--font-serif);
    opacity: 0.6;
}
.wine-pitch__body {
    font-family: var(--font-serif);
    color: var(--c-text);
    font-size: 1.02rem;
    line-height: 1.55;
}
.wine-pitch__phrase {
    margin: 0 0 0.5rem;
}
.wine-pitch__phrase:last-child {
    margin-bottom: 0;
}

/* ----- FAQ rattachée (accordéon HTML natif) ----- */
.wine-faq {
    margin: 2rem 0;
    padding: 0;
}
.wine-faq__title {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 0.4rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.wine-faq__count {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.78rem;
    background: var(--c-champagne);
    color: var(--c-bordeaux);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.wine-faq__item {
    border: 1px solid var(--c-gris-300);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.wine-faq__item[open] {
    box-shadow: 0 2px 8px rgba(107, 29, 44, 0.08);
    border-color: var(--c-champagne);
}
.wine-faq__question {
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    color: var(--c-text);
    transition: background 0.15s;
}
.wine-faq__question::-webkit-details-marker { display: none; }
.wine-faq__question::before {
    content: '+';
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--c-bordeaux);
    font-weight: 700;
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}
.wine-faq__item[open] .wine-faq__question::before {
    transform: rotate(45deg);
}
.wine-faq__question:hover {
    background: var(--c-champagne-soft);
}
.wine-faq__question-text {
    flex: 1;
    line-height: 1.4;
}
.wine-faq__appellation {
    font-size: 0.72rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--c-bg-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.wine-faq__reponse {
    padding: 0.6rem 1rem 1rem;
    color: var(--c-text);
    line-height: 1.55;
    border-top: 1px dashed var(--c-gris-300);
    background: var(--c-bg-soft);
}

/* ----- Citation contextualisée ----- */
.wine-quote {
    margin: 2.5rem 0 1rem;
    padding: 1.5rem 2rem;
    text-align: center;
    background: var(--c-bg-soft);
    border-radius: var(--radius);
    border-top: 1px solid var(--c-champagne);
    border-bottom: 1px solid var(--c-champagne);
}
.wine-quote__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.6rem;
    quotes: none;
}
.wine-quote__author {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ----- Responsive ----- */
@media (max-width: 600px) {
    .wine-pitch {
        padding: 1rem 1.1rem;
    }
    .wine-faq__question {
        padding: 0.7rem 0.85rem;
    }
    .wine-faq__appellation {
        display: none;   /* cache la pastille appellation sur mobile pour gagner de la place */
    }
    .wine-quote {
        padding: 1.2rem 1rem;
    }
    .wine-quote__text {
        font-size: 1rem;
    }
}

/* ==============================================================
   Lot A3 — Vins similaires (3 colonnes, carte minimaliste)
   ============================================================== */

.wine-similaires {
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-champagne);
}
.wine-similaires__title {
    font-family: var(--font-serif);
    color: var(--c-bordeaux);
    text-align: center;
    margin: 0 0 1.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.wine-similaires__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.wine-sim-col {
    min-width: 0;
}
.wine-sim-col__title {
    font-family: var(--font-serif);
    color: var(--c-bordeaux-dark);
    font-size: 1rem;
    margin: 0 0 0.2rem;
    font-weight: 600;
}
.wine-sim-col__sub {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin: 0 0 0.9rem;
    font-style: italic;
}

.wine-sim-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wine-sim-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--c-gris-300);
}
.wine-sim-item:last-child {
    border-bottom: none;
}
.wine-sim-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "prix cru"
        "prix app";
    gap: 0.1rem 0.7rem;
    padding: 0.7rem 0.4rem;
    text-decoration: none;
    color: var(--c-text);
    transition: background 0.12s, transform 0.12s;
    align-items: center;
}
.wine-sim-link:hover {
    background: var(--c-champagne-soft);
    transform: translateX(2px);
}
.wine-sim-prix {
    grid-area: prix;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-bordeaux-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    /* Le prix sert de point d'ancrage visuel : badge subtil */
    padding: 0.15rem 0.5rem;
    background: var(--c-bg-soft);
    border-radius: 3px;
}
.wine-sim-cru {
    grid-area: cru;
    font-weight: 500;
    line-height: 1.3;
    font-size: 0.92rem;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.wine-sim-app {
    grid-area: app;
    font-size: 0.74rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive : 2 colonnes en moyen, 1 seule en mobile */
@media (max-width: 900px) {
    .wine-similaires__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .wine-sim-col:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
    }
}
@media (max-width: 600px) {
    .wine-similaires__grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .wine-sim-col:nth-child(3) {
        max-width: none;
    }
}

/* ==============================================================
   Assistant hôtesse (Lot B)
   --------------------------------------------------------------
   Parcours guidé en trois étapes pour aider l'hôtesse à proposer
   un vin quand le passager n'a pas exprimé de critère précis.

   - Étape 1 : 6 tuiles d'occasion (apéritif, repas, fromage,
               dessert, plateau, cadeau).
   - Étape 2 : sous-choix du moment retenu (3 à 6 items).
   - Étape 3 : recommandations + chips d'affinage (B2).
   ============================================================== */

/* ---------- 4e entrée du bandeau d'introduction (lien direct) ---------- */
.tiroir--assistant {
    text-decoration: none;
    color: inherit;
    display: block;
}
.tiroir--assistant:hover { text-decoration: none; }
.tiroir--assistant .tiroir__bouton--lien {
    /* Le lien adopte le style du <summary> mais sans flèche rotatable */
    border-bottom: 0;
}
.tiroir__chevron--lien {
    transition: transform 0.18s ease;
    transform: none;       /* annule la rotation possible héritée */
    font-size: 1rem;
    line-height: 1;
}
.tiroir--assistant:hover .tiroir__chevron--lien {
    transform: translateX(3px);
}
.tiroir--assistant:hover .tiroir__bouton--lien {
    background: var(--c-champagne-soft);
}

/* ---------- Conteneur global des étapes assistant ---------- */
.assistant {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 3rem;
}
.assistant__entete {
    text-align: center;
    margin-bottom: 2rem;
}
.assistant__titre {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.5rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.assistant__sous-titre {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-text-muted);
    font-size: 1rem;
    margin: 0;
}

/* ---------- Fil d'Ariane (étapes 2 et 3) ---------- */
.assistant__fil-ariane {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin: 0 0 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.assistant__fil-ariane a {
    color: var(--c-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.assistant__fil-ariane a:hover {
    color: var(--c-bordeaux);
    border-bottom-color: var(--c-bordeaux);
    text-decoration: none;
}
.assistant__fil-sep {
    color: var(--c-gris-300);
}
.assistant__fil-courant {
    color: var(--c-bordeaux-dark);
    font-weight: 500;
}

/* ============================================================
   Étape 1 — Six tuiles d'occasion
   ============================================================ */
.assistant__tuiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto;
}
.assistant-tuile {
    aspect-ratio: 1.05;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--c-bordeaux-dark);
    box-shadow: 0 1px 2px rgba(107, 29, 44, 0.04);
    transition: all 0.18s ease;
    padding: 1rem;
}
.assistant-tuile:hover,
.assistant-tuile:focus {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux-light);
    box-shadow: 0 4px 14px rgba(107, 29, 44, 0.12);
    text-decoration: none;
    transform: translateY(-1px);
}
.assistant-tuile__icone {
    color: var(--c-bordeaux);
    line-height: 0;        /* évite de l'espace parasite sous le SVG */
    display: inline-block;
}
.assistant-tuile__icone svg {
    width: 30px;
    height: 30px;
}
.assistant-tuile__libelle {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@media (max-width: 600px) {
    .assistant__tuiles {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .assistant-tuile { aspect-ratio: 1.15; }
    .assistant-tuile__icone svg { width: 26px; height: 26px; }
    .assistant-tuile__libelle { font-size: 0.95rem; }
}

/* ============================================================
   Étape 2 — Liste des sous-choix
   ============================================================ */
.assistant__sous-choix {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 560px;
    margin: 0 auto;
}
.assistant-sous-choix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    text-decoration: none;
    color: var(--c-text);
    transition: all 0.15s ease;
}
.assistant-sous-choix:hover,
.assistant-sous-choix:focus {
    border-color: var(--c-bordeaux);
    background: var(--c-champagne-soft);
    box-shadow: 0 2px 8px rgba(107, 29, 44, 0.10);
    text-decoration: none;
}
.assistant-sous-choix__corps {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.assistant-sous-choix__libelle {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    color: var(--c-bordeaux-dark);
    font-weight: 500;
}
.assistant-sous-choix__indication {
    font-size: 0.8rem;
    color: var(--c-text-muted);
    font-style: italic;
}
.assistant-sous-choix__chevron {
    font-size: 1.2rem;
    color: var(--c-bordeaux);
    line-height: 1;
    transition: transform 0.15s ease;
}
.assistant-sous-choix:hover .assistant-sous-choix__chevron {
    transform: translateX(3px);
}

/* ============================================================
   Étape 3 — Chips d'affinage + Recommandations
   ============================================================ */

/* Chips d'affinage — décoratifs au B1 */
.assistant__affinage {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
}
.assistant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    background: var(--c-bg);
    border: 1px solid var(--c-gris-300);
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 0.83rem;
    color: var(--c-text-muted);
    cursor: not-allowed;
    transition: all 0.15s ease;
}
.assistant-chip:not(:disabled) {
    cursor: pointer;
    color: var(--c-bordeaux-dark);
    border-color: var(--c-champagne);
}
.assistant-chip:not(:disabled):hover {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux);
}
.assistant-chip__plus {
    font-weight: 500;
    color: var(--c-bordeaux);
}

/* ------ Menu de gammes (fonctionnel dès le B1) ------
   Variante compacte du composant .gammes-nav du catalogue : on garde
   la sémantique visuelle (pastille active en bordeaux) mais en plus
   discret, plus en phase avec l'esprit "outil de cabine" rapide.
*/
.assistant-gammes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 2rem;
    padding: 0;
}
.assistant-gammes__label {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: 0.25rem;
}
.assistant-gammes__item {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--c-champagne);
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--c-bordeaux-dark);
    background: var(--c-bg);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.assistant-gammes__item:hover {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux);
    text-decoration: none;
}
.assistant-gammes__item.is-active {
    background: var(--c-bordeaux);
    color: var(--c-bg);
    border-color: var(--c-bordeaux);
    font-weight: 500;
}
.assistant-gammes__item.is-active:hover {
    background: var(--c-bordeaux-dark);
    color: var(--c-bg);
}
.assistant-gammes__item--all {
    color: var(--c-text-muted);
    font-style: italic;
    font-size: 0.82rem;
}
.assistant-gammes__item--all.is-active {
    font-style: normal;
}

@media (max-width: 600px) {
    .assistant-gammes {
        gap: 0.3rem;
    }
    .assistant-gammes__label {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 0.25rem;
        margin-right: 0;
    }
    .assistant-gammes__item {
        font-size: 0.8rem;
        padding: 0.32rem 0.7rem;
    }
}

/* ------ Onglets de bascule classique ↔ sentiers battus ------
   Présentés au même niveau que le titre (remplacent le H1). Deux
   propositions de lecture, l'active soulignée par un trait bordeaux,
   l'autre dépouillée mais cliquable.
*/
.assistant-onglets {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 0.5rem 0 0;
    flex-wrap: wrap;
}
.assistant-onglets__item {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--c-text-muted);
    text-decoration: none;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
    line-height: 1.2;
}
.assistant-onglets__item:hover {
    color: var(--c-bordeaux);
    text-decoration: none;
}
.assistant-onglets__item.is-active {
    color: var(--c-bordeaux-dark);
    font-weight: 500;
    border-bottom-color: var(--c-bordeaux);
}

/* ------ Message de contexte en mode sentiers (remplace le menu gammes) ------ */
.assistant__contexte-sentiers {
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-text-muted);
    margin: 0 0 2rem;
    padding: 0.5rem 1rem;
}

/* ------ Vitrine en grille de vignettes carrées ------
   La grille s'adapte au nombre de vignettes (4 en classique, 6 en sentiers)
   et à la largeur disponible.
*/
.assistant-vitrine {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 700px) {
    .assistant-vitrine--4 { grid-template-columns: repeat(4, 1fr); }
    .assistant-vitrine--5 { grid-template-columns: repeat(5, 1fr); }
    .assistant-vitrine--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
    .assistant-vitrine--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ------ Vignette carrée ------
   Aspect 1:1, image étiquette en haut, texte structuré en bas.
*/
.assistant-vignette {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    overflow: hidden;
    /* B3 — flex column pour que l'article englobe naturellement
       tout son contenu (bandeau cave + lien + argumentaire + bouton +
       panneau). Sans align-self:start : on laisse la grille faire le
       stretch des cellules pour que toutes les vignettes d'une rangée
       aient la même hauteur. C'est le flex:1 du lien qui absorbe les
       écarts dus aux bandeaux cave présents/absents. */
    display: flex;
    flex-direction: column;
    transition: all 0.18s ease;
}
.assistant-vignette:hover {
    border-color: var(--c-bordeaux-light);
    box-shadow: 0 4px 14px rgba(107, 29, 44, 0.10);
    transform: translateY(-2px);
}
.assistant-vignette__lien {
    display: flex;
    flex-direction: column;
    /* B3 — height: 100% retiré, remplacé par flex 1 pour combler la cellule
       grille tant que l'argumentaire/bouton ne sont pas ajoutés en dessous. */
    flex: 1 1 auto;
    text-decoration: none;
    color: inherit;
}
.assistant-vignette__lien:hover { text-decoration: none; }

/* Zone média : ratio fixe portrait, image étiquette centrée */
.assistant-vignette__media {
    aspect-ratio: 1 / 1;
    background: var(--c-champagne-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.5rem;
}
.assistant-vignette__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.assistant-vignette__img-placeholder {
    width: 60%;
    height: 80%;
    background: var(--c-gris-100);
    border-radius: 3px;
}

/* Corps texte sous l'image */
.assistant-vignette__corps {
    padding: 0.75rem 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

/* Étoiles d'accord — affichées en haut du corps, juste au-dessus du nom */
.assistant-vignette__etoiles {
    margin: 0 0 0.25rem;
    line-height: 1;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}
.assistant-vignette__etoile {
    display: inline-block;
    transition: color 0.15s ease;
}
.assistant-vignette__etoile.is-pleine { color: var(--c-bordeaux); }
.assistant-vignette__etoile.is-vide   { color: var(--c-gris-300); }

.assistant-vignette__titre {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--c-bordeaux-dark);
    margin: 0;
    font-weight: 500;
    line-height: 1.25;
    /* Coupe à 2 lignes max pour préserver la grille */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.assistant-vignette__meta {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.3;
    /* 1 ligne */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assistant-vignette__prix {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-text);
    margin: 0.3rem 0 0;
}

/* ============================================================
   B2.5.4b' — Mini-bandeau cave en tête de vignette assistant
   ============================================================
   Affiché UNIQUEMENT quand le vin est déjà commandé livré par le
   client connecté. Pas d'étoiles 5★ ici (pour ne pas concurrencer
   les étoiles d'accord 3★ déjà présentes dans la vignette) — on
   montre les pastilles des profils ayant noté, avec une médaille
   ★ sur celles qui ont mis 4 ou 5 étoiles.

   Quand le vin est dans la cave mais non noté → un texte sobre
   "Dans votre cave". Sert de repère pour l'hôtesse qui reconnaît
   un vin qu'elle a déjà servi.
*/
.assistant-vignette__cave {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    background: var(--c-champagne-soft);
    border-bottom: 1px solid var(--c-champagne);
    /* Hauteur fixe pour que toutes les vignettes "cave" aient le même
       bandeau, qu'il contienne des pastilles ou juste un texte court. */
    min-height: 2.6rem;
    box-sizing: border-box;
}
.assistant-vignette__cave-libelle {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.assistant-vignette__cave-rappel {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--c-text-muted);
}

.assistant-vignette__cave-pastilles {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.assistant-vignette__cave-pastille {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 50%;
    color: var(--c-bordeaux);
    transition: transform var(--t-fast) var(--t-easing), border-color var(--t-fast) var(--t-easing);
}
.assistant-vignette__cave-pastille:hover {
    transform: scale(1.1);
    border-color: var(--c-bordeaux);
}
.assistant-vignette__cave-pastille svg {
    width: 13px;
    height: 13px;
}
.assistant-vignette__cave-pastille.is-favori {
    border-color: var(--c-bordeaux);
}
.assistant-vignette__cave-medaille {
    position: absolute;
    top: -3px;
    right: -4px;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--c-bordeaux);
    background: var(--c-bg);
    border-radius: 50%;
    padding: 1px 2px;
    text-shadow: 0 0 1px var(--c-bg);
}

/* ============================================================
   B3 — Argumentaire dynamique sous la vignette assistant
   ============================================================
   L'argumentaire (1-2 phrases) est rendu HORS du <a> qui couvre
   l'image et le bloc d'info. Volontairement compact et lisible
   en cabine. Texte gris foncé pour ne pas concurrencer le titre
   du vin.
*/
.assistant-vignette__argumentaire {
    padding: 0.6rem 0.85rem 0.4rem;
    border-top: 1px solid var(--c-champagne);
    background: rgba(255, 251, 244, 0.5); /* crème très léger */
    /* Hauteur min pour 2 lignes, pour que les vignettes restent alignées
       même quand le sommelier est vide (1 phrase) vs riche (2 phrases). */
    min-height: 4rem;
    box-sizing: border-box;
}
.assistant-vignette__argumentaire p {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--c-text);
}
.assistant-vignette__argumentaire p:first-child {
    /* Phrase d'accroche : un peu plus présente */
    font-weight: 500;
}
.assistant-vignette__argumentaire p:last-child {
    margin-bottom: 0;
    color: var(--c-text-muted);
    font-style: italic;
}

/* ============================================================
   B3 — Bouton "La petite histoire" (toggle accordéon)
   ============================================================ */
.assistant-vignette__petite-histoire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: none;
    border-top: 1px solid var(--c-champagne);
    color: var(--c-bordeaux);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--t-base) var(--t-easing), color var(--t-base) var(--t-easing);
}
.assistant-vignette__petite-histoire:hover,
.assistant-vignette__petite-histoire:focus-visible {
    background: rgba(122, 30, 30, 0.06);
    outline: none;
}
.assistant-vignette__petite-histoire[aria-expanded="true"] {
    background: rgba(122, 30, 30, 0.08);
    color: var(--c-bordeaux);
}
.assistant-vignette__petite-histoire[aria-expanded="true"] .assistant-vignette__petite-histoire-libelle::after {
    content: " ▴";
    font-size: 0.7em;
}
.assistant-vignette__petite-histoire[aria-expanded="false"] .assistant-vignette__petite-histoire-libelle::after {
    content: " ▾";
    font-size: 0.7em;
}
.assistant-vignette__petite-histoire-icone {
    font-size: 1em;
    /* L'emoji garde sa colorimétrie native, pas d'override de couleur */
}

/* ============================================================
   B3 — Panneau "histoire" dévoilé
   ============================================================
   Anecdote (FAQ) ou citation déterministe par vin. Le hidden
   natif HTML5 gère la visibilité. JS toggle juste cet attribut.
*/
.assistant-vignette__histoire {
    padding: 0.85rem 1rem 1rem;
    background: var(--c-bg-soft, #fdfaf3);
    border-top: 1px solid var(--c-champagne);
    animation: assistantHistoireOuverture 0.2s ease-out;
}
.assistant-vignette__histoire[hidden] {
    display: none;
}
@keyframes assistantHistoireOuverture {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.assistant-vignette__histoire-titre {
    margin: 0 0 0.45rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-bordeaux);
    line-height: 1.3;
}
.assistant-vignette__histoire-citation {
    margin: 0 0 0.4rem;
    padding: 0;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--c-text);
    line-height: 1.45;
    border: none;
}
.assistant-vignette__histoire-source {
    margin: 0;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--c-text-muted);
}
.assistant-vignette__histoire-corps {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.86rem;
    color: var(--c-text);
    line-height: 1.5;
}

/* État vide (étape 3) */
.assistant__vide {
    text-align: center;
    color: var(--c-text-muted);
    font-style: italic;
    padding: 2rem 0;
}

/* Lien recherche avancée en pied (inchangé) */
.assistant__lien-recherche {
    text-align: center;
    margin: 2.5rem 0 0;
}
.assistant__lien-recherche a {
    color: var(--c-text-muted);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 2px;
    transition: all var(--t-base) var(--t-easing);
}
.assistant__lien-recherche a:hover {
    color: var(--c-bordeaux);
    border-bottom-color: var(--c-bordeaux);
}

@media (max-width: 600px) {
    .assistant { padding: 1rem 1rem 2rem; }
    .assistant__titre { font-size: 1.5rem; }
    .assistant-onglets { gap: 1rem; }
    .assistant-onglets__item { font-size: 1.2rem; }
    .assistant-vignette__titre { font-size: 0.95rem; }
    .assistant-vignette__corps { padding: 0.6rem 0.7rem 0.75rem; }
}

/* ============================================================
   Bouton flottant — visible uniquement sur layout "nu"
   (typiquement la page recherche.php)
   ============================================================ */
.assistant-flottant {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--c-bordeaux);
    color: var(--c-bg);
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(107, 29, 44, 0.30);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
    transition: transform var(--t-slow) var(--t-easing), box-shadow var(--t-slow) var(--t-easing), background var(--t-slow) var(--t-easing);
}
.assistant-flottant:hover {
    text-decoration: none;
    background: var(--c-bordeaux-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(107, 29, 44, 0.40);
    color: var(--c-bg);
}
.assistant-flottant__icone {
    font-size: 1.2rem;
    line-height: 1;
}

/* Sur mobile : pastille ronde, le libellé disparaît */
@media (max-width: 600px) {
    .assistant-flottant {
        bottom: 1rem;
        right: 1rem;
        padding: 0;
        width: 52px;
        height: 52px;
        justify-content: center;
    }
    .assistant-flottant__libelle { display: none; }
    .assistant-flottant__icone { font-size: 1.5rem; }
}

/* ==============================================================
   Profils passagers (Lot B2.5)
   --------------------------------------------------------------
   Pages mes-profils-passagers.php et profil-passager-edit.php
   accessibles depuis mon-compte.php. Permettent à un client de
   créer jusqu'à 5 profils anonymisés (pseudo + icône) pour
   personnaliser les recommandations de l'Assistant.
   ============================================================== */

/* ---------- Liste des profils (mes-profils-passagers.php) ---------- */
.profils-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.profil-carte {
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 8px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all var(--t-slow) var(--t-easing);
}
.profil-carte:hover {
    border-color: var(--c-bordeaux-light);
    box-shadow: 0 4px 14px rgba(107, 29, 44, 0.08);
}
.profil-carte__icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-champagne-soft);
    color: var(--c-bordeaux);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.profil-carte__icone svg { width: 26px; height: 26px; }
.profil-carte__corps { flex: 1; }
.profil-carte__pseudo {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.3rem;
}
.profil-carte__meta {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    margin: 0 0 0.2rem;
}
.profil-carte__compteurs {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    margin: 0;
    font-style: italic;
}
.profil-carte__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.profil-carte__actions form { margin: 0; }

/* Carte "+ Nouveau profil" — visuel d'invitation */
.profil-carte--ajout {
    background: var(--c-champagne-soft);
    border: 2px dashed var(--c-champagne);
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--c-bordeaux);
    min-height: 180px;
    transition: all var(--t-base) var(--t-easing);
}
.profil-carte--ajout:hover {
    background: var(--c-bg);
    border-color: var(--c-bordeaux-light);
    border-style: solid;
    text-decoration: none;
    color: var(--c-bordeaux-dark);
}
.profil-carte__plus {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 300;
    color: var(--c-bordeaux);
}
.profil-carte__ajout-libelle {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
}
.profil-carte__ajout-aide {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    font-style: italic;
}

.profils-grille__plein {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--c-text-muted);
    font-style: italic;
    padding: 1.5rem;
    background: var(--c-champagne-soft);
    border-radius: 6px;
}

/* Bouton ghost rouge pour "Supprimer" */
.btn--danger-ghost {
    background: transparent;
    color: #b3261e;
    border: 1px solid #f3c8c5;
    cursor: pointer;
}
.btn--danger-ghost:hover {
    background: #fce8e6;
    border-color: #b3261e;
}
.btn--small {
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
}

/* ---------- Formulaire d'édition (profil-passager-edit.php) ---------- */
.profil-form {
    max-width: 800px;
    margin: 0 auto;
}
.profil-form fieldset.account-card {
    border: 1px solid var(--c-champagne);
    margin-bottom: 1.5rem;
    padding: 1.2rem;
}
.profil-form fieldset.account-card legend {
    padding: 0;
}
.profil-form fieldset.account-card legend h2 {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
    padding: 0 0.5rem;
    background: var(--c-bg);
    color: var(--c-bordeaux-dark);
    font-family: var(--font-serif);
    font-weight: 500;
}

.profil-form__row {
    margin-bottom: 1.2rem;
}
.profil-form__row:last-child { margin-bottom: 0; }
.profil-form__row label,
.profil-form__row .profil-form__label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--c-text);
}
.profil-form__row input[type="text"],
.profil-form__row select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--c-champagne);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--c-bg);
}
.profil-form__row input[type="text"]:focus,
.profil-form__row select:focus {
    outline: none;
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 2px var(--c-champagne-soft);
}
.profil-form__row input.is-error {
    border-color: #b3261e;
    background: #fef5f4;
}
.profil-form__erreur {
    color: #b3261e;
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}
.profil-form__hint {
    font-size: 0.86rem;
    color: var(--c-text-muted);
    margin: 0 0 0.8rem;
    font-style: italic;
}

/* Disclaimer chaleureux à côté du pseudo */
.profil-form__disclaimer {
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem;
    background: var(--c-champagne-soft);
    border-left: 3px solid var(--c-bordeaux);
    border-radius: 0 4px 4px 0;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--c-text);
}
.profil-form__disclaimer em { font-style: italic; }
.profil-form__disclaimer strong {
    color: var(--c-bordeaux-dark);
    font-weight: 500;
}

/* Engagement — case à cocher obligatoire à la création */
.profil-form__engagement {
    margin-top: 1rem;
    padding: 0.9rem;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 4px;
}
.profil-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    margin: 0;
    font-weight: normal !important;
    line-height: 1.5;
}
.profil-form__check input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--c-bordeaux);
    cursor: pointer;
}
.profil-form__check.is-error {
    border: 1px solid #b3261e;
    padding: 0.6rem;
    border-radius: 4px;
    background: #fef5f4;
}

/* ---------- Picker d'icônes ---------- */
.picker-icones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.picker-icones__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem;
    border: 1.5px solid var(--c-champagne);
    border-radius: 6px;
    background: var(--c-bg);
    cursor: pointer;
    transition: all var(--t-base) var(--t-easing);
}
.picker-icones__item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.picker-icones__item:hover {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux-light);
}
.picker-icones__item.is-active {
    background: var(--c-bordeaux);
    border-color: var(--c-bordeaux-dark);
    color: var(--c-bg);
}
.picker-icones__svg {
    color: var(--c-bordeaux);
    line-height: 0;
}
.picker-icones__svg svg {
    width: 28px;
    height: 28px;
}
.picker-icones__item.is-active .picker-icones__svg { color: var(--c-bg); }
.picker-icones__libelle {
    font-size: 0.78rem;
    font-family: var(--font-serif);
    text-align: center;
}

/* ---------- Préférences générales — 3 colonnes côte à côte ---------- */
.profil-form__triple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.profil-form__triple .profil-form__row { margin-bottom: 0; }

/* ---------- Régions — 2 colonnes (aimées / évitées) ---------- */
.profil-form__double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.profil-form__col h3 {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--c-champagne);
}
.profil-form__regions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.4rem;
}
.profil-form__region-item,
.profil-form__choix-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--t-fast) var(--t-easing);
}
.profil-form__region-item:hover,
.profil-form__choix-item:hover {
    background: var(--c-champagne-soft);
}
.profil-form__region-item input[type="checkbox"],
.profil-form__choix-item input[type="checkbox"] {
    accent-color: var(--c-bordeaux);
    cursor: pointer;
    flex-shrink: 0;
}
.profil-form__region-item span,
.profil-form__choix-libelle {
    font-size: 0.92rem;
}

/* ---------- Plats / snacks — un <details> par moment ---------- */
.profil-form__moment-group {
    margin-bottom: 0.5rem;
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    overflow: hidden;
}
.profil-form__moment-group summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--c-champagne-soft);
    cursor: pointer;
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--c-bordeaux-dark);
    list-style: none;
}
.profil-form__moment-group summary::-webkit-details-marker { display: none; }
.profil-form__moment-group summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform var(--t-slow) var(--t-easing);
    color: var(--c-text-muted);
}
.profil-form__moment-group[open] summary::after { transform: rotate(180deg); }
.profil-form__moment-icone {
    color: var(--c-bordeaux);
    line-height: 0;
}
.profil-form__moment-icone svg { width: 20px; height: 20px; }
.profil-form__choix-grille {
    padding: 0.6rem 0.9rem 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.2rem;
}
.profil-form__choix-indic {
    display: block;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    font-style: italic;
}

/* ---------- Actions ---------- */
.profil-form__actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--c-champagne);
}

/* ---------- Flash warning (pour pseudo suspect) ---------- */
.flash--warning {
    background: #fff7ed;
    color: #9a3412;
    border-left: 3px solid #ea7c25;
}

/* ---------- Responsive mobile ---------- */
@media (max-width: 700px) {
    .profil-form__double {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .profils-grille { grid-template-columns: 1fr; }
    .picker-icones { grid-template-columns: repeat(3, 1fr); }
    .profil-form__choix-grille { grid-template-columns: 1fr; }
}

/* ---------- Avertissement pseudo suspect (niveau 1, soft block) ---------
   S'affiche entre le champ pseudo et le disclaimer chaleureux quand le
   pseudo détecté ressemble à un vrai nom. Force une re-confirmation
   explicite avant de pouvoir sauvegarder. */
.profil-form__suspect {
    margin: 0.6rem 0 0;
    padding: 0.85rem 1rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 3px solid #ea7c25;
    border-radius: 0 4px 4px 0;
}
.profil-form__suspect-msg {
    font-size: 0.92rem;
    color: #9a3412;
    line-height: 1.5;
    margin: 0 0 0.7rem;
}
.profil-form__suspect .profil-form__check {
    background: var(--c-bg);
    border: 1px solid #fed7aa;
    border-radius: 4px;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
}
.profil-form__suspect .profil-form__check span strong {
    color: #9a3412;
    font-weight: 500;
}

/* ---------- Frise d'icônes des profils dans mon-compte.php ----------
   Aperçu visuel des 5 slots de profil directement depuis le tableau
   de bord. Les profils existants sont des pastilles bordeaux cliquables
   menant à l'édition. Le premier slot vide est cliquable (création
   d'un nouveau profil). Les slots vides suivants sont décoratifs. */
.account-card__profils {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0.8rem 0;
}
.account-card__profil {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-base) var(--t-easing);
}
.account-card__profil:hover {
    text-decoration: none;
    transform: translateY(-2px);
}
.account-card__profil:hover .account-card__profil-icone {
    background: var(--c-bordeaux-dark);
    box-shadow: 0 3px 10px rgba(107, 29, 44, 0.20);
}
.account-card__profil-icone {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-bordeaux);
    color: var(--c-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-base) var(--t-easing);
}
.account-card__profil-icone svg {
    width: 22px;
    height: 22px;
}
.account-card__profil-pseudo {
    font-size: 0.78rem;
    color: var(--c-bordeaux-dark);
    max-width: 70px;
    text-align: center;
    line-height: 1.2;
    /* Tronque les pseudos longs proprement */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-serif);
}

/* Slot vide cliquable (création) — pastille pointillée */
.account-card__profil--vide .account-card__profil-icone--vide {
    background: var(--c-bg);
    border: 2px dashed var(--c-champagne);
    color: var(--c-bordeaux);
    font-size: 1.4rem;
    font-weight: 300;
}
.account-card__profil--vide:hover .account-card__profil-icone--vide {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux);
    border-style: solid;
    color: var(--c-bordeaux-dark);
    box-shadow: none;
}

/* Slots vides inactifs (juste pour visualiser les 5 emplacements) */
.account-card__profil--inactif {
    opacity: 0.4;
    cursor: default;
}
.account-card__profil--inactif:hover {
    transform: none;
}
.account-card__profil--inactif .account-card__profil-icone--vide {
    background: transparent;
    border: 1px dashed var(--c-gris-300);
    color: var(--c-gris-300);
    font-size: 1.4rem;
}

.account-card__profils-compteur {
    font-size: 0.82rem;
    color: var(--c-text-muted);
    margin: 0.3rem 0 0.7rem;
    font-style: italic;
}

/* ==============================================================
   Profil actif dans l'Assistant (Lot B2.5.3)
   --------------------------------------------------------------
   Bandeau visible sur les 3 étapes de l'assistant. Affiche le
   profil actif (pastille + pseudo) ou un état "aucun profil".
   Dépliable en picker pour basculer entre les profils.
   ============================================================== */

.assistant-profil-bar {
    max-width: 720px;
    margin: 0 auto 1.2rem;
    background: var(--c-champagne-soft);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
    overflow: hidden;
}

.assistant-profil-bar__summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    list-style: none;
    transition: background var(--t-base) var(--t-easing);
}
.assistant-profil-bar__summary::-webkit-details-marker { display: none; }
.assistant-profil-bar__summary:hover {
    background: var(--c-bg);
}

/* Pastille de profil — réutilise les conventions de mon-compte.php */
.assistant-profil-bar__pastille {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-bordeaux);
    color: var(--c-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.assistant-profil-bar__pastille svg {
    width: 18px;
    height: 18px;
}
.assistant-profil-bar__pastille--vide {
    background: var(--c-bg);
    border: 1.5px dashed var(--c-champagne);
    color: var(--c-text-muted);
}

.assistant-profil-bar__pseudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
}
.assistant-profil-bar__hint {
    font-size: 0.72rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.assistant-profil-bar__pseudo strong {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--c-bordeaux-dark);
    font-weight: 500;
}

.assistant-profil-bar__changer {
    font-size: 0.78rem;
    color: var(--c-bordeaux);
    font-family: var(--font-serif);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}
.assistant-profil-bar__chevron {
    transition: transform var(--t-slow) var(--t-easing);
    color: var(--c-text-muted);
}
.assistant-profil-bar[open] .assistant-profil-bar__chevron {
    transform: rotate(180deg);
}

/* ---- Picker (corps déplié) ---- */
.assistant-profil-bar__picker {
    padding: 0.9rem 1rem 1rem;
    border-top: 1px solid var(--c-champagne);
    background: var(--c-bg);
}
.assistant-profil-bar__picker-titre {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.7rem;
    font-style: italic;
    text-align: center;
}
.assistant-profil-bar__choix {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.assistant-profil-bar__form { margin: 0; }
.assistant-profil-bar__option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    color: var(--c-text);
    transition: all var(--t-base) var(--t-easing);
}
.assistant-profil-bar__option:hover {
    background: var(--c-champagne-soft);
    border-color: var(--c-bordeaux);
}
.assistant-profil-bar__option.is-active {
    background: var(--c-bordeaux);
    border-color: var(--c-bordeaux-dark);
    color: var(--c-bg);
    font-weight: 500;
}
.assistant-profil-bar__option-icone {
    width: 22px;
    height: 22px;
    color: var(--c-bordeaux);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.assistant-profil-bar__option.is-active .assistant-profil-bar__option-icone {
    color: var(--c-bg);
}
.assistant-profil-bar__option-icone svg {
    width: 18px;
    height: 18px;
}
.assistant-profil-bar__option-pseudo {
    font-size: 0.88rem;
    font-family: var(--font-serif);
}
.assistant-profil-bar__option--clear {
    background: transparent;
    border-style: dashed;
    color: var(--c-text-muted);
}
.assistant-profil-bar__option--clear .assistant-profil-bar__option-icone {
    background: transparent;
    color: var(--c-text-muted);
    font-size: 1.1rem;
}
.assistant-profil-bar__picker-aide {
    text-align: center;
    margin: 0.9rem 0 0;
    font-size: 0.82rem;
}
.assistant-profil-bar__picker-aide a {
    color: var(--c-text-muted);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--c-champagne);
    padding-bottom: 1px;
}
.assistant-profil-bar__picker-aide a:hover {
    color: var(--c-bordeaux);
    border-bottom-color: var(--c-bordeaux);
}

/* ==============================================================
   Raccourcis "goûts connus" sur l'écran d'accueil (étape 1)
   --------------------------------------------------------------
   Cards horizontales menant directement à l'étape 3 pour les
   sous-choix favoris du profil actif. Visibles uniquement si
   le profil a des préférences déclarées.
   ============================================================== */

.assistant__raccourcis-profil {
    max-width: 720px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 6px;
}
.assistant__raccourcis-titre {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--c-bordeaux-dark);
    margin: 0 0 0.7rem;
    text-align: center;
}
.assistant__raccourcis-titre strong {
    font-style: normal;
    font-weight: 500;
}
.assistant__raccourcis-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}
.assistant__raccourci {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: var(--c-champagne-soft);
    border: 1px solid var(--c-champagne);
    border-radius: 4px;
    text-decoration: none;
    color: var(--c-text);
    transition: all var(--t-base) var(--t-easing);
}
.assistant__raccourci:hover {
    background: var(--c-bg);
    border-color: var(--c-bordeaux);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(107, 29, 44, 0.10);
}
.assistant__raccourci-moment-icone {
    width: 28px;
    height: 28px;
    color: var(--c-bordeaux);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.assistant__raccourci-moment-icone svg {
    width: 22px;
    height: 22px;
}
.assistant__raccourci-corps {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.assistant__raccourci-choix {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--c-bordeaux-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assistant__raccourci-moment {
    font-size: 0.72rem;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 600px) {
    .assistant-profil-bar__summary { padding: 0.5rem 0.7rem; }
    .assistant-profil-bar__pastille { width: 32px; height: 32px; }
    .assistant-profil-bar__pseudo strong { font-size: 0.95rem; }
    .assistant-profil-bar__changer { font-size: 0.72rem; }
    .assistant__raccourcis-grille { grid-template-columns: 1fr; }
}

/* ==============================================================
   B2.5.4 — Ma cave & bandeau de notation sur les vignettes
   --------------------------------------------------------------
   Le bandeau de tête s'affiche au-dessus de chaque .wine-card qui
   est dans la cave du client (wine-card--cave). Il est rendu HORS
   du <a> de la vignette pour que les étoiles soient cliquables
   sans déclencher la navigation vers la fiche vin.
   ============================================================== */

.wine-card--cave .wine-card__cave {
    background: var(--c-champagne-soft);
    border-bottom: 1px solid var(--c-champagne);
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    /* B2.5.4c — flex-shrink:0 pour que le bandeau ne se compacte pas
       quand la vignette grandit (titre long, etc.). Garantit que la
       zone d'étiquette commence toujours à la même hauteur. */
    flex-shrink: 0;
}

/* --- Ligne 1 : étoiles + bouton ✎ + moyenne --- */
.wine-card__cave-etoiles {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    line-height: 1;
    /* Hauteur fixe pour aligner cette ligne entre toutes les vignettes */
    min-height: 1.3rem;
}
.wine-card__cave-etoile {
    font-size: 1.05rem;
    color: var(--c-gris-300);
    user-select: none;
    transition: color var(--t-fast) var(--t-easing), transform var(--t-fast) var(--t-easing);
}
.wine-card__cave-etoile.is-pleine { color: var(--c-bordeaux); }
.wine-card__cave-etoile.is-vide   { color: var(--c-gris-300); }
.wine-card__cave-etoile.is-cliquable {
    cursor: pointer;
    padding: 0 1px;
}
.wine-card__cave-etoile.is-cliquable:hover,
.wine-card__cave-etoile.is-cliquable:focus {
    color: var(--c-bordeaux-light);
    outline: none;
    transform: scale(1.15);
}
.wine-card__cave-etoile.is-cliquable:focus-visible {
    outline: 2px solid var(--c-bordeaux);
    outline-offset: 1px;
    border-radius: 2px;
}
.wine-card__cave-moy {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: var(--c-text-muted);
    font-weight: 500;
}

/* --- Ligne 2 : pastilles de profils ayant noté --- */
.wine-card__cave-profils {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    min-height: 1.4rem;
}
.wine-card__cave-profil {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-300);
    color: var(--c-bordeaux);
    transition: border-color var(--t-fast) var(--t-easing), transform var(--t-fast) var(--t-easing);
}
.wine-card__cave-profil svg {
    width: 14px;
    height: 14px;
    display: block;
}
.wine-card__cave-profil[role="button"] {
    cursor: pointer;
}
.wine-card__cave-profil[role="button"]:hover,
.wine-card__cave-profil[role="button"]:focus {
    border-color: var(--c-bordeaux-light);
    outline: none;
    transform: scale(1.1);
}
.wine-card__cave-profil.is-actif {
    border: 2px solid var(--c-bordeaux);
    background: var(--c-champagne);
}
.wine-card__cave-profils-vide {
    font-size: 0.74rem;
    color: var(--c-text-muted);
    font-style: italic;
}

/* État de chargement pendant l'AJAX */
.wine-card.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
.wine-card.is-loading .wine-card__cave {
    background: var(--c-gris-100);
}

/* ==============================================================
   Page Ma cave
   ============================================================== */

.ma-cave__intro {
    color: var(--c-text-muted);
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.ma-cave__vide {
    background: var(--c-champagne-soft);
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    text-align: center;
}
.ma-cave__vide p { margin: 0 0 1rem; }
.ma-cave__vide p:last-child { margin: 0; }

/* --- Bandeau profil actif (mêmes mécanismes que l'Assistant) --- */
.ma-cave__profil-bandeau {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--c-champagne-soft);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    margin: 0 0 1rem;
}
.ma-cave__profil-label {
    font-weight: 500;
    color: var(--c-text);
    font-size: 0.92rem;
}
.ma-cave__profil-vide {
    color: var(--c-text-muted);
    font-size: 0.92rem;
}
.ma-cave__profil-vide a {
    color: var(--c-bordeaux);
    text-decoration: underline;
}

.ma-cave__profil-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ma-cave__profil-pastille {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    background: var(--c-blanc);
    border: 1px solid var(--c-gris-300);
    border-radius: 999px;
    color: var(--c-text);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    transition: border-color var(--t-fast) var(--t-easing), background var(--t-fast) var(--t-easing);
}
.ma-cave__profil-pastille:hover,
.ma-cave__profil-pastille:focus {
    border-color: var(--c-bordeaux-light);
    outline: none;
}
.ma-cave__profil-pastille.is-actif {
    border-color: var(--c-bordeaux);
    background: var(--c-champagne);
    color: var(--c-bordeaux);
    font-weight: 500;
}
.ma-cave__profil-icone {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-bordeaux);
}
.ma-cave__profil-icone svg {
    width: 16px;
    height: 16px;
    display: block;
}
.ma-cave__profil-pseudo { line-height: 1; }

/* --- Sélecteur de tri --- */
.ma-cave__tris {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--c-gris-300);
}
.ma-cave__tri {
    padding: 0.5rem 1rem;
    color: var(--c-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.92rem;
    transition: color var(--t-fast) var(--t-easing), border-color var(--t-fast) var(--t-easing);
}
.ma-cave__tri:hover {
    color: var(--c-bordeaux);
    text-decoration: none;
}
.ma-cave__tri.is-actif {
    color: var(--c-bordeaux);
    border-bottom-color: var(--c-bordeaux);
    font-weight: 500;
}

/* Petit ajustement de la grille sur Ma cave */
.ma-cave__grille {
    margin-top: 0.5rem;
    /* B2.5.4c — Grille plus dense que la grille catalogue.
       Sur 720px (max-width parent), donne 3 colonnes au lieu de 2-3,
       chaque vignette prend ~200-220px max au lieu de prendre toute
       la page. */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    /* B2.5.4c — Stretch explicite pour que toutes les vignettes d'une
       rangée fassent exactement la même hauteur (alignement du bouton
       "Recommander" en pied). */
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* B2.5.4c — Élargir Ma cave par rapport aux autres pages "Mon compte"
   (qui sont plutôt des formulaires et restent à 720px). On donne plus
   de place pour afficher 3-4 vignettes par rangée sur écran large. */
.account-page.ma-cave {
    max-width: 1200px;
}

/* Bouton "Recommander" en pied de vignette de cave */
/* Bouton "Recommander" : position absolue en bas de la vignette pour
   garantir un alignement parfait sur le bottom de la cellule grille,
   indépendamment de la hauteur du contenu. La grille fait du stretch
   (align-items: stretch par défaut), donc toutes les vignettes ont la
   même hauteur, donc tous les boutons s'alignent strictement.

   Padding-bottom prévu sur la wine-card pour réserver l'espace du
   bouton, et le contenu ne se cache plus dessous. */
.wine-card--cave {
    padding-bottom: 2.4rem;
}
.wine-card__cave-recommander {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: var(--c-bordeaux);
    color: var(--c-blanc);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    transition: background var(--t-fast) var(--t-easing);
}
.wine-card__cave-recommander:hover {
    background: var(--c-bordeaux-dark);
    color: var(--c-blanc);
    text-decoration: none;
}

/* ============================================================
   B2.5.4c — Édition du commentaire dans la vignette cave
   ============================================================
   - Bouton ✎ à droite des étoiles (visible si le profil actif a noté)
   - Commentaire en lecture seule sous les étoiles, cliquable
   - Zone d'édition (textarea + boutons) dévoilée au clic du ✎
*/
.wine-card__cave-edit-btn {
    margin-left: auto;
    padding: 0.15rem 0.4rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--c-text-muted);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--t-fast) var(--t-easing), background var(--t-fast) var(--t-easing), border-color var(--t-fast) var(--t-easing);
}
.wine-card__cave-edit-btn:hover,
.wine-card__cave-edit-btn:focus-visible {
    color: var(--c-bordeaux);
    background: rgba(122, 30, 30, 0.06);
    border-color: var(--c-champagne);
    outline: none;
}
.wine-card__cave-edit-btn[aria-expanded="true"] {
    color: var(--c-bordeaux);
    background: rgba(122, 30, 30, 0.10);
    border-color: var(--c-champagne);
}

.wine-card__cave-commentaire {
    margin: 0;
    padding: 0.5rem 0.75rem 0.6rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
    color: var(--c-text);
    line-height: 1.45;
    background: rgba(255, 251, 244, 0.6);
    border-top: 1px dashed var(--c-champagne);
    cursor: pointer;
    transition: color var(--t-fast) var(--t-easing), background var(--t-fast) var(--t-easing);
    /* B2.5.4c — Affichage simple et fiable.
       line-clamp standard (Firefox 68+, Safari 14.1+, Chromium tous récents)
       avec fallback overflow pour les anciens navigateurs.
       PAS de display: -webkit-box qui interagissait mal avec le flex parent. */
    display: block;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    /* Box-orient nécessaire si un navigateur ancien tente le clamp */
    -webkit-box-orient: vertical;
    flex-shrink: 0;
}
.wine-card__cave-commentaire:hover,
.wine-card__cave-commentaire:focus-visible {
    color: var(--c-bordeaux);
    background: rgba(122, 30, 30, 0.04);
    outline: none;
}

.wine-card__cave-edit-zone {
    padding: 0.5rem 0.75rem 0.6rem;
    background: var(--c-bg-soft, #fdfaf3);
    border-top: 1px solid var(--c-champagne);
    animation: caveEditOuverture 0.18s ease-out;
}
.wine-card__cave-edit-zone[hidden] { display: none; }
@keyframes caveEditOuverture {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wine-card__cave-edit-label {
    display: block;
    margin: 0 0 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wine-card__cave-edit-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-champagne);
    border-radius: 4px;
    resize: vertical;
    min-height: 2.6rem;
    transition: border-color var(--t-fast) var(--t-easing), box-shadow var(--t-fast) var(--t-easing);
}
.wine-card__cave-edit-textarea:focus {
    outline: none;
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 2px rgba(122, 30, 30, 0.10);
}

.wine-card__cave-edit-compteur {
    margin: 0.25rem 0 0;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    color: var(--c-text-muted);
}

.wine-card__cave-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.wine-card__cave-edit-annuler,
.wine-card__cave-edit-enregistrer {
    padding: 0.3rem 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--t-fast) var(--t-easing), color var(--t-fast) var(--t-easing), border-color var(--t-fast) var(--t-easing);
}
.wine-card__cave-edit-annuler {
    background: transparent;
    color: var(--c-text-muted);
    border-color: var(--c-champagne);
}
.wine-card__cave-edit-annuler:hover {
    color: var(--c-text);
    background: rgba(0, 0, 0, 0.03);
}
.wine-card__cave-edit-enregistrer {
    background: var(--c-bordeaux);
    color: var(--c-blanc);
}
.wine-card__cave-edit-enregistrer:hover {
    background: var(--c-bordeaux-dark);
}

/* ============================================================
   B4 polish — Mobile fine-tuning sur Ma cave
   ============================================================
   Sur smartphone portrait (< 540px), la grille tombe en colonne
   unique. Les contraintes `align-items: stretch` et `grid-auto-rows: 1fr`
   héritées du desktop forcent alors toutes les vignettes à la hauteur
   de la plus longue, ce qui crée des espaces blancs sous les vignettes
   à commentaire court. On les neutralise pour que chaque vignette
   prenne sa hauteur naturelle.

   Le bandeau "Profil actif" est aussi un peu plus compact pour gagner
   de la verticalité sur les petits écrans.
*/
@media (max-width: 540px) {
    .ma-cave__grille {
        grid-template-columns: 1fr;
        align-items: start;
        grid-auto-rows: auto;
        gap: 0.85rem;
    }

    /* Bandeau profil actif : padding réduit + label moins emphatique. */
    .ma-cave__profil-bandeau {
        padding: 0.5rem 0.7rem;
        gap: 0.5rem;
    }
    .ma-cave__profil-label {
        font-size: 0.88rem;
    }

    /* Onglets de tri plus serrés (Tous / Notés / Non notés). */
    .ma-cave__tri {
        padding: 0.45rem 0.7rem;
        font-size: 0.88rem;
    }

    /* Vignette en colonne unique : on relâche le padding-bottom destiné
       à réserver l'espace du bouton "Recommander" en absolute. */
    .wine-card--cave {
        padding-bottom: 2.2rem;
    }
    .wine-card__cave-recommander {
        font-size: 0.9rem;
        padding: 0.55rem 0.75rem;
    }
}

/* ============================================================
   B3 — Tooltip d'argumentaire au survol des vignettes catalogue
   ============================================================
   Remplace l'attribut title= natif (illisible, dépendant du système)
   par un tooltip CSS-only stylé aux couleurs du site. S'affiche
   sous la vignette au survol, avec une petite flèche pointant vers
   la vignette. Pas de JS, gestion 100% via :hover et :focus-within
   pour rester accessible au clavier.

   Activé uniquement quand l'attribut data-tooltip est présent sur
   l'article, c'est-à-dire pour les vins ayant une description
   sommelier (cf. argumentaire_court_par_vin en PHP).
*/
.wine-card[data-tooltip] {
    position: relative;
    /* Override de l'overflow:hidden de la règle .wine-card de base.
       Sans ça, le tooltip positionné en absolu sous l'article serait
       clippé par le parent et resterait invisible (bug rapporté le 3 mai). */
    overflow: visible;
}
/* Pendant le survol, la vignette passe par-dessus ses voisines pour que
   son tooltip ne soit pas masqué par la rangée du dessous. */
.wine-card[data-tooltip]:hover,
.wine-card[data-tooltip]:focus-within {
    z-index: 60;
}
.wine-card[data-tooltip]::after,
.wine-card[data-tooltip]::before {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-slow) var(--t-easing), visibility var(--t-slow) var(--t-easing);
    z-index: 50;
}

/* Flèche (triangle bordeaux pointant vers la vignette) */
.wine-card[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--c-bordeaux);
    z-index: 51;
}

/* Bulle */
.wine-card[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translate(-50%, 100%);
    width: max-content;
    max-width: min(280px, 90vw);
    padding: 0.6rem 0.85rem;
    background: var(--c-bordeaux);
    color: var(--c-blanc);
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.4;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    white-space: normal;
}

/* Apparition au survol ou au focus clavier */
.wine-card[data-tooltip]:hover::after,
.wine-card[data-tooltip]:hover::before,
.wine-card[data-tooltip]:focus-within::after,
.wine-card[data-tooltip]:focus-within::before {
    opacity: 1;
    visibility: visible;
}

/* Variante : si la vignette est en haut d'une grille très haute,
   on bascule le tooltip au-dessus pour éviter qu'il sorte hors-écran.
   On utilise une classe que l'on pourra appliquer côté JS si besoin
   ultérieurement (B4 polish). Par défaut, position basse. */

/* Mobile : pas de hover → on désactive proprement le tooltip pour ne
   pas interférer avec le tap. Les utilisateurs mobiles iront voir la
   fiche vin pour le détail. */
@media (hover: none) {
    .wine-card[data-tooltip]::after,
    .wine-card[data-tooltip]::before {
        display: none;
    }
}


/* ===========================================================================
   L3 — Régime TVA d'avitaillement (mon-compte-tva.php)
   ===========================================================================
   Réutilise les couleurs des pastilles statuts commande pour cohérence
   visuelle (cf. .cmd-statut--* dans admin.css). */

.tva-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
}
.tva-pill--attente { background: #fff8e1; color: #8a6500; }
.tva-pill--livree  { background: #e6f4ea; color: #1e6e3a; }
.tva-pill--annulee { background: #fce8e6; color: #b3261e; }
.tva-pill--inconnu { background: #f1f1f1; color: #555; }

/* Formulaire TVA — pattern simple label / input vertical */
.tva-form__row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    max-width: 480px;
}
.tva-form__row label {
    font-weight: 500;
    color: var(--c-bordeaux, #6b1320);
    font-size: 0.92rem;
}
.tva-form__row input[type="text"],
.tva-form__row input[type="file"],
.tva-form__row select {
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.tva-form__row input[type="text"]:focus,
.tva-form__row select:focus {
    outline: none;
    border-color: var(--c-bordeaux, #6b1320);
    box-shadow: 0 0 0 2px rgba(107, 19, 32, 0.12);
}
.tva-form__row input[disabled],
.tva-form__row select[disabled] {
    background: #f7f7f7;
    color: #666;
    cursor: not-allowed;
}

/* Bloc d'upload — carte légèrement contrastée */
.tva-upload-bloc {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin: 0.9rem 0;
}
.tva-upload-bloc h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--c-bordeaux, #6b1320);
}

/* ============================================================
   Lot N — « Donnez-nous le menu » (menu.php)
   Réutilise au max le pattern existant : .rech-form pour la saisie,
   .wine-grid + wine_card.php pour les vignettes. Chaque vignette est
   wrappée dans .menu-vignette pour porter un badge de bucket
   (Exclusif / Haut de gamme / Cave / Sentiers battus).
   ============================================================ */
.menu-page { max-width: 1600px; margin: 0 auto; padding: 0 1rem; }

.menu-page__header { text-align: center; margin: 1rem 0 1rem; }
.menu-page__titre {
    font-family: var(--font-serif);
    color: var(--c-bordeaux-dark);
    font-size: 1.8rem;
    margin: 0 0 0.4rem;
    font-weight: 500;
}
.menu-page__sous-titre {
    color: var(--c-text-muted);
    margin: 0;
    font-size: 0.95rem;
}

/* Le formulaire emprunte les styles .rech-form. */
.menu-page .rech-form { margin-bottom: 1.5rem; }
.menu-page .rech-form textarea {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-line);
    border-radius: 4px;
    background: #fff;
    resize: vertical;
    min-height: 2.6rem;
    width: 100%;
    box-sizing: border-box;
}
.menu-page .rech-form textarea:focus {
    outline: none;
    border-color: var(--c-bordeaux);
    box-shadow: 0 0 0 2px var(--c-champagne-soft);
}

/* Onglets de plat */
.menu-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--c-bordeaux);
    margin: 0.5rem 0 1rem;
}
.menu-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.55rem 1rem;
    font: inherit;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-family: var(--font-serif);
    font-size: 1rem;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-tab:hover { color: var(--c-bordeaux); }
.menu-tab.is-active {
    color: var(--c-bordeaux-dark);
    border-bottom-color: var(--c-bordeaux);
    font-weight: 500;
}

.menu-panel { animation: menu-fade 0.18s ease-out; }
.menu-panel[hidden] { display: none; }
.menu-panel__vide {
    color: var(--c-text-muted);
    font-style: italic;
    padding: 1.5rem 0;
}

/* Grille de vignettes : 4 colonnes par défaut, 6 sur large écran. */
.menu-page .wine-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 1400px) {
    .menu-page .wine-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .menu-page .wine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .menu-page .wine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .menu-page .wine-grid { grid-template-columns: 1fr; }
}

/* Wrapper de chaque vignette : porte le badge bucket en en-tête. */
.menu-vignette {
    position: relative;
    display: flex;
    flex-direction: column;
}
.menu-vignette > .wine-card { flex: 1; }

/* Badge bucket : en-tête au-dessus de la wine-card (pas en overlay,
   pour ne pas chevaucher la zone region/appellation de la card). */
.menu-vignette__badge {
    align-self: flex-start;
    background: var(--c-bordeaux);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}
.menu-vignette--exclusif        .menu-vignette__badge { background: var(--c-bordeaux-dark); }
.menu-vignette--haut_gamme      .menu-vignette__badge { background: var(--c-bordeaux); }
.menu-vignette--cave            .menu-vignette__badge { background: #8a6e3a; }
.menu-vignette--sentiers_battus .menu-vignette__badge { background: #5d4a6e; }

/* Récap après soumission : bouton Recommencer aligné à droite. */
.menu-recap {
    display: flex;
    justify-content: flex-end;
    margin: 0.25rem 0 0.75rem;
}

@keyframes menu-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .menu-page__titre { font-size: 1.5rem; }
    .menu-tab { padding: 0.45rem 0.7rem; font-size: 0.92rem; max-width: 180px; }
    .menu-vignette__badge { font-size: 0.65rem; padding: 0.15rem 0.45rem; }
}

/* ---------- Page demande de parrainage ---------- */
.parrainage-page { padding: 3rem 1.5rem; }
.parrainage-page__inner {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--c-line, #e8dfce);
    border-radius: 6px;
    padding: 2.5rem 2rem;
}
.parrainage-page__header { text-align: center; margin-bottom: 2rem; }
.parrainage-page__title {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--c-bordeaux-dark, #5b1924);
    font-size: 1.9rem;
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.parrainage-page__sub { color: var(--c-text-muted, #7c6259); margin: 0; }

.parrainage-page__errors {
    background: #fdecec;
    color: #8c2424;
    padding: 1rem 1.2rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}
.parrainage-page__errors ul { margin: 0; padding-left: 1.2rem; }

.parrainage-page__success {
    text-align: center;
    padding: 1rem 0;
}
.parrainage-page__success h2 {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--c-bordeaux-dark, #5b1924);
    margin: 0 0 0.6rem;
}

.parrainage-form { display: flex; flex-direction: column; gap: 1rem; }
.parrainage-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.parrainage-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.parrainage-form__field--wide { grid-column: 1 / -1; }
.parrainage-form__field span {
    font-size: 0.85rem;
    color: var(--c-text-muted, #7c6259);
    font-weight: 500;
}
.parrainage-form__field input,
.parrainage-form__field select,
.parrainage-form__field textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-line, #e8dfce);
    border-radius: 4px;
    background: #fff;
    font: inherit;
}
.parrainage-form__field input:focus,
.parrainage-form__field select:focus,
.parrainage-form__field textarea:focus {
    outline: none;
    border-color: var(--c-bordeaux, #7a2532);
    box-shadow: 0 0 0 2px rgba(122, 37, 50, 0.12);
}
.parrainage-form__hint {
    font-size: 0.8rem;
    color: var(--c-text-muted, #7c6259);
    font-style: normal;
}
.parrainage-form__actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ---------- Inscription : code parrain validé ---------- */
.auth-form__code-ok {
    background: #e8f3ea;
    color: #1f5d2c;
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
.auth-form__code-ok strong { font-family: monospace; letter-spacing: 0.05em; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .parrainage-form__row { grid-template-columns: 1fr; }
}
/* ============================================================
   Lot O — Home connectée : 4 portes d'entrée (cartes)
   index.php quand auth_est_connecte() — sous le bandeau d'introduction.
   ============================================================ */
.home-portes {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.home-portes__header {
    text-align: center;
    margin: 1rem 0 2.5rem;
}
.home-portes__titre {
    font-family: var(--font-serif);
    color: var(--c-bordeaux-dark);
    font-size: 2rem;
    margin: 0 0 0.6rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.home-portes__sub {
    color: var(--c-text-muted);
    margin: 0 auto;
    max-width: 36em;
    font-size: 1rem;
    line-height: 1.5;
}

.home-portes__grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.porte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.4rem 2rem;
    background: #fff;
    border: 1px solid var(--c-line, #e8dfce);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    position: relative;
}
.porte:hover,
.porte:focus-visible {
    border-color: var(--c-bordeaux);
    box-shadow: 0 6px 22px rgba(107, 29, 44, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}
.porte:focus-visible {
    outline: 2px solid var(--c-bordeaux);
    outline-offset: 2px;
}

.porte__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.2rem;
    color: var(--c-bordeaux);
    transition: color 0.18s;
}
.porte__icone svg {
    width: 100%;
    height: 100%;
}
.porte:hover .porte__icone {
    color: var(--c-bordeaux-dark);
}

.porte__titre {
    font-family: var(--font-serif);
    color: var(--c-bordeaux-dark);
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
    font-weight: 500;
    line-height: 1.25;
}
.porte__sub {
    color: var(--c-text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .home-portes__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .home-portes__grille { grid-template-columns: 1fr; gap: 1rem; }
    .home-portes__titre  { font-size: 1.6rem; }
    .porte               { padding: 2rem 1.2rem 1.6rem; }
    .porte__icone        { width: 48px; height: 48px; margin-bottom: 1rem; }
}

/* ============================================================
   Lot B2 — Refonte assistant.php sur le moteur de scoring (Mbis)
   En rendu moteur, l'étape 3 réutilise la grille + badges du Lot N
   (.menu-vignette + .menu-vignette__badge). On étend les règles de
   grille à .assistant-recos pour avoir le même comportement responsive,
   et on ajoute un max-width container (comme .menu-page) pour empêcher
   les vignettes de s'étirer démesurément quand un bucket est vide.
   ============================================================ */
.assistant-recos {
    max-width: 1600px;
    margin: 1.5rem auto 2rem;
    padding: 0 1rem;
}

.assistant-recos .wine-grid {
    /* auto-fill + minmax : si peu de vignettes, elles gardent leur
       largeur naturelle au lieu de s'étirer.  Plafond à 280px pour
       préserver le ratio portrait des étiquettes. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
    gap: 1rem;
    justify-content: center;
}
@media (max-width: 700px) {
    .assistant-recos .wine-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
@media (max-width: 480px) {
    .assistant-recos .wine-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Page mentions légales ---------- */
.legal-page { padding: 3rem 1.5rem; }
.legal-page__inner {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--c-line, #e8dfce);
    border-radius: 6px;
    padding: 2.5rem 2.2rem;
}
.legal-page__header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-line, #e8dfce);
}
.legal-page__title {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--c-bordeaux-dark, #5b1924);
    font-size: 1.9rem;
    margin: 0 0 0.5rem;
    font-weight: 500;
}
.legal-page__sub {
    color: var(--c-text-muted, #7c6259);
    margin: 0;
    font-style: italic;
}
.legal-page__article h2 {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--c-bordeaux-dark, #5b1924);
    font-size: 1.25rem;
    font-weight: 500;
    margin: 1.8rem 0 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--c-line, #e8dfce);
}
.legal-page__article h2:first-child { margin-top: 0; }
.legal-page__article p,
.legal-page__article ul {
    margin: 0.6rem 0;
    line-height: 1.55;
    color: var(--c-text, #2c1810);
}
.legal-page__article ul { padding-left: 1.4rem; }
.legal-page__article li { margin: 0.25rem 0; }
.legal-page__article a {
    color: var(--c-bordeaux, #7a2231);
    text-decoration: underline;
}
.legal-page__warning {
    background: #fdf6e3;
    border-left: 4px solid #c9a227;
    padding: 0.8rem 1rem;
    margin: 1rem 0;
    font-weight: 500;
    color: #6b4f12 !important;
}

/* Lien mentions légales discret dans le footer site */
.site-footer__sep {
    margin: 0 0.4rem;
    color: var(--c-text-muted, #7c6259);
}
.site-footer__legal a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.2);
}
.site-footer__legal a:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 600px) {
    .legal-page { padding: 1.5rem 0.8rem; }
    .legal-page__inner { padding: 1.6rem 1.2rem; }
    .legal-page__title { font-size: 1.5rem; }
}