/* WebApp cliente - mobile-first. Thème appliqué à l'exécution par /theme.js
   (variables CSS inline sur :root), couleurs ET couple typographique.
   Ici, uniquement les jetons partagés et un défaut affiché le temps que le
   thème enregistré s'applique. */
* { box-sizing: border-box; }
/* Une classe qui pose display bat l'attribut hidden du navigateur, et le
   bloc reste visible. La regle vaut pour toute la WebApp, comme cote console. */
[hidden] { display: none !important; }
:root {
  --radius: 14px;
  /* Densité : facteur appliqué aux espacements, posé par la personnalisation.
     1 = aérée, 0.78 = compacte. Les tailles de texte ne bougent pas : une
     carte compacte doit rester lisible, seuls les blancs se resserrent. */
  --densite: 1;
  /* Défaut = Bordeaux, avec les familles de secours seules : les polices du
     thème arrivent avec applyTheme, une fois le thème connu. Le texte reste
     donc lisible dès la première image. */
  --font: Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #F7F3EF; --bg2: #FFFFFF; --ink: #2A1A1D; --muted: #7A6B6E;
  --accent: #6E1F2A; --accent2: #a98289; --line: #E7DDD6; --on-accent: #FFF6F0;
}

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* 100dvh suit la hauteur réellement visible quand la barre d'outils du
   navigateur mobile se rétracte. 100vh reste en repli pour les navigateurs
   qui ne connaissent pas l'unité. */
#app { max-width: 680px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* En-tête - logo dans son format natif, contraint en hauteur, sans cadre */
.wa-header { text-align: center; padding: calc(1.6rem * var(--densite)) 1.2rem calc(.8rem * var(--densite)); }
.wa-logo { height: 48px; width: auto; max-width: 180px; object-fit: contain; display: block; margin: 0 auto .5rem; }
.wa-mono { font-family: var(--font); font-size: 1.6rem; color: var(--accent); margin: 0 auto .4rem; letter-spacing: 1px; }
.wa-name { font-family: var(--font); font-size: 1.7rem; margin: .2rem 0; letter-spacing: .5px; }
.wa-phrase { color: var(--muted); font-style: italic; margin: 0; }

/* Petit trait d'accent qui referme l'en-tête et annonce la couleur du thème. */
.wa-rule { width: 46px; height: 2px; border-radius: 2px; background: var(--accent); margin: 1.3rem auto .4rem; opacity: .9; }

/* Changement d'écran : une montée courte, jamais un effet qui retarde la
   lecture. Neutralisée si le téléphone demande moins d'animation.

   Volontairement SANS animation-fill-mode. Avec « both », l'état de départ
   (opacity 0) s'applique tant que l'animation n'a pas tourné : un onglet
   ouvert en arrière-plan gèle les animations, et la carte s'affichait alors
   entièrement vide. Sans fill-mode, l'état naturel est l'état visible et
   l'animation n'est qu'un agrément par-dessus. */
@keyframes wa-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#app > * { animation: wa-entree .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  #app > * { animation: none; }
  .wa-act { transition: none; }
}

/* ============================== ACCUEIL ==============================
   Deux actions hiérarchisées, pas deux cartes jumelles : l'œil doit savoir
   où aller en premier. Les icônes sont des tracés SVG qui héritent de
   l'accent du thème, plus aucun émoji.

   Les fonds légèrement teintés passent par color-mix, avec une déclaration
   de repli juste avant : un navigateur qui ignore color-mix garde le fond
   uni et l'écran reste correct. */

/* --- Action principale : le sommelier --- */
.wa-actions { display: flex; flex-direction: column; gap: calc(.9rem * var(--densite)); padding: 0 1.2rem; }

.wa-act {
  border-radius: var(--radius);
  color: inherit; text-decoration: none; cursor: pointer; display: block;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.wa-act:active { transform: scale(.985); }
.wa-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wa-act--principal {
  position: relative;
  padding: calc(1.5rem * var(--densite)) 1.4rem;
  background: var(--bg2);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg2));
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.wa-act-haut { display: flex; align-items: center; gap: .9rem; margin-bottom: calc(1rem * var(--densite)); }

/* Pastille pleine : c'est elle qui signale l'action principale au premier coup d'œil. */
.wa-pastille {
  width: 50px; height: 50px; flex: 0 0 50px;
  border-radius: 14px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.wa-pastille svg { width: 26px; height: 26px; }

.wa-surtitre {
  display: block;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: var(--accent);
}
.wa-act-titre { display: block; font-family: var(--font); letter-spacing: -0.01em; }
.wa-act--principal .wa-act-titre { font-size: 1.55rem; margin-top: .1rem; line-height: 1.15; }
.wa-act-desc {
  display: block; color: var(--muted);
  font-size: .92rem; line-height: 1.5; max-width: 88%;
}

/* Pastille flèche en bas à droite, alignée sur la dernière ligne du texte. */
.wa-fleche {
  position: absolute; right: 1.2rem; bottom: 1.3rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.wa-fleche svg { width: 17px; height: 17px; }

/* --- Action secondaire : la carte --- */
.wa-act--secondaire {
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: calc(1.05rem * var(--densite)) 1.1rem;
  display: flex; align-items: center; gap: .95rem;
  min-height: 64px; /* zone tactile confortable au pouce */
}
.wa-act--secondaire:hover { border-color: var(--accent); }
.wa-ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px;
  background: var(--bg);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.wa-ico svg { width: 22px; height: 22px; }
.wa-act-txt { flex: 1; min-width: 0; }
.wa-act--secondaire .wa-act-titre { font-size: 1.18rem; }
.wa-act-sous { display: block; color: var(--muted); font-size: .86rem; margin-top: .1rem; }
.wa-chevron { color: var(--muted); display: flex; flex: 0 0 auto; }
.wa-chevron svg { width: 20px; height: 20px; }

/* --- Compteur discret --- */
.wa-compteur {
  text-align: center; color: var(--muted);
  font-size: .78rem; letter-spacing: .04em;
  margin: 1.3rem 0 0;
}
.wa-compteur b { color: var(--ink); font-weight: 600; }

/* Ressort : pousse le pied de page en bas quand l'écran est plus haut que le
   contenu, sans étirer les actions. Aucune hauteur minimale, sinon un écran
   court se met à déborder de quelques pixels et fait apparaître une barre de
   défilement pour rien. L'espace avant le pied vient de son propre calage. */
.wa-ressort { flex: 1 1 auto; }

/* Barre haut (retour) */
.wa-bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 5; }
.wa-back { background: none; border: 1px solid var(--line); color: inherit; border-radius: 999px; padding: .35rem .8rem; cursor: pointer; font-size: .9rem; }
.wa-bar h2 { font-family: var(--font); font-size: 1.15rem; margin: 0; }

.wa-body { padding: 1rem 1.2rem 3rem; }

/* Sections carte complète */
/* Deux traits, deux rôles. Celui du titre lui appartient : il se pose à côté,
   dans sa couleur, et annonce une section. Celui des produits sépare deux
   lignes, en gris et sur toute la largeur. Les confondre faisait lire un titre
   comme un produit de plus. */
.wa-section-title { display: flex; align-items: center; gap: .6rem;
  font-family: var(--font); font-size: 1.25rem; color: var(--accent); margin: 1.4rem 0 .6rem; }
.wa-section-title::after { content: ''; flex: 1; height: 1px; background: currentColor; }
.wa-item { padding: .6rem 0; border-bottom: 1px solid var(--line); }
/* Le dernier produit d'une section ne porte pas de trait : le titre suivant,
   ou la fin de la carte, ferme déjà le bloc. Un trait de plus flotterait. */
.wa-item:not(:has(+ .wa-item)) { border-bottom: none; }
.wa-item-head { display: flex; align-items: center; gap: .8rem; }
.wa-item-txt { flex: 1; min-width: 0; }
.wa-item-photo { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; background: var(--bg2); }
.wa-item-nom { font-weight: 600; }
.wa-fiche-photo { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--bg2); border-radius: 12px; margin: 0 0 1rem; }
.wa-item-desc { color: var(--muted); font-size: .88rem; }
.wa-prix-list { color: var(--accent); font-size: .9rem; white-space: nowrap; text-align: right; }
.wa-prix-list span { display: block; }

/* Formule (menu) : mise en avant distincte des éléments simples */
.wa-formule { padding: .8rem .9rem; margin: .6rem 0; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg2); }
/* Une formule peut porter une photo, comme un élément de carte. La vignette
   se pose à gauche, le titre et la description gardent leur place à droite. */
.wa-formule-corps { display: flex; align-items: flex-start; gap: .8rem; }
.wa-formule-txt { flex: 1; min-width: 0; }
.wa-formule-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.wa-formule-nom { font-weight: 700; font-size: 1.05rem; }
.wa-formule-prix { color: var(--accent); font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.wa-formule-desc { color: var(--muted); font-style: italic; font-size: .9rem; margin-top: .3rem; white-space: pre-wrap; }

/* Cartes vin */
.wa-vin { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(.9rem * var(--densite)) 1rem; margin-bottom: calc(.7rem * var(--densite)); cursor: pointer; display: flex; gap: .7rem; align-items: flex-start; }
.wa-vin:hover { border-color: var(--accent); }
.wa-dot { width: .8rem; height: .8rem; border-radius: 50%; margin-top: .35rem; flex: none; border: 1px solid rgba(255,255,255,.2); }
.dot-Rouge { background: #7b1e2b; } .dot-Rosé { background: #e8a0b4; } .dot-Blanc { background: #e9dca0; } .dot-Orange { background: #e08a2e; }
/* Sur la carte d'un vin, la pastille de couleur devient un filet vertical le
   long du bord : elle dit la couleur sans occuper de largeur au texte. Ailleurs
   (fiche, vins conseillés), la pastille ronde reste la bonne forme. */
.wa-vin > .wa-dot { width: 4px; height: auto; align-self: stretch; margin-top: 0; border: 0; border-radius: 2px; }
.wa-vin-main { flex: 1; min-width: 0; }
.wa-vin-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
/* Le nom se tronque, jamais le prix : c'est le prix que le client cherche, et
   un téléphone étroit ne doit pas le lui couper. */
.wa-vin-titre { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 0; }
.wa-vin-nom { font-family: var(--font); font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-vin-prix { color: var(--accent); font-size: .92rem; font-weight: 600; white-space: nowrap; flex: none;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.wa-prix-l { display: block; }
.wa-vin-sub { display: block; color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Coup de cœur : une pastille à gauche du nom, à une place stable. Posée après
   le nom, elle se déplaçait avec sa longueur et décalait les prix. */
.wa-coeur {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg2));
  color: #E53E3E; font-size: .68rem;
}

/* Filtres (sommelier) */
.wa-filters { margin-bottom: 1rem; }
.wa-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wa-chip { border: 1px solid var(--line); background: var(--bg2); color: inherit; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font-size: .85rem; }
.wa-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.wa-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.wa-count-inline { color: var(--accent); font-weight: 600; font-size: .9rem; margin-left: auto; }
.wa-chip[disabled] { opacity: .4; cursor: not-allowed; }

/* --- Barre haute des réglages : tri et contenances -------------------
   Deux petits boutons discrets, à part de la rangée de pictos. Ce sont des
   réglages du résultat, pas des étapes du choix. */
.wa-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.wa-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--line); background: var(--bg2); color: inherit;
  border-radius: 999px; padding: .42rem .85rem;
  font: inherit; font-size: .85rem; cursor: pointer;
}
.wa-pill-lbl { color: var(--muted); }
.wa-pill-val { font-weight: 600; }
.wa-pill-chev { font-size: .7rem; color: var(--muted); transition: transform .15s ease; }
.wa-pill.ouvert { border-color: var(--accent); }
.wa-pill.ouvert .wa-pill-chev { transform: rotate(180deg); color: var(--accent); }
/* Un réglage posé se lit sans déplier le bouton : le libellé suffit à le dire,
   la bordure d'accent le confirme du coin de l'œil. */
.wa-pill.actif { border-color: var(--accent); color: var(--accent); }
.wa-pill.actif .wa-pill-lbl { color: var(--accent); }
.wa-pill--reset { color: var(--muted); }
.wa-pill--reset:hover { color: var(--ink); border-color: var(--accent); }

/* --- Rangée de pictos ------------------------------------------------
   L'entonnoir en quatre étapes. Quatre cartes de taille égale, le titre
   dessous. Le cercle bordé a cédé la place à une carte blanche aux coins
   d'icône d'application : plus lisible d'un coup d'œil, et plus grande à
   viser au doigt. */
.wa-pictos { display: flex; gap: .5rem; margin: .2rem 0 .6rem; }
.wa-picto {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .3rem 0;
  color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer;
}
.wa-picto-rond {
  position: relative;
  /* La cible grandit avec l'écran, entre deux bornes. 52 px tient le minimum
     confortable au doigt sur un téléphone étroit ; 64 px évite la vignette
     démesurée sur une tablette. */
  width: clamp(52px, 15vw, 64px); height: clamp(52px, 15vw, 64px); flex: none;
  /* Le rayon suit la taille : c'est ce qui donne la forme d'icône
     d'application à toutes les tailles, plutôt qu'un carré à coins mous. */
  border-radius: 28%;
  background: #FFFFFF;
  /* Une ombre qui se devine, pas qui se voit. Le second calque est le trait
     de contour : sur un fond clair, une ombre seule laisse la carte blanche
     flotter sans bord. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  /* Le dessin porte la couleur du thème, avec un plancher.
     Sur les deux thèmes sombres, l'accent est clair par construction : posé
     tel quel sur une carte blanche, il tombait à 2,35:1 (Ardoise) et 2,25:1
     (Nuit), sous les 3:1 qu'un objet graphique demande. Un cinquième de noir
     doux suffit à passer la barre sans faire virer la teinte : le pire des
     huit thèmes remonte à 3,23:1, et les six thèmes clairs ne bougent
     pratiquement pas (Bordeaux 11,10 -> 12,50). */
  color: color-mix(in srgb, var(--accent) 80%, #1A1A1A);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* Le dessin suit la carte. Les tracés ne sont pas retouchés : seule leur
   taille rendue change, sans quoi une icône de 22 px se perdrait au milieu
   d'une carte de 64. */
.wa-picto-rond .lucide { width: 48%; height: 48%; }
/* Ouvert, ou porteur d'un filtre : la carte se remplit de l'accent du thème.
   Le couple accent / on-accent est celui des pastilles, il tient sur les huit
   thèmes, clairs comme sombres. */
.wa-picto.on .wa-picto-rond {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
.wa-picto.on .wa-picto-nom { color: var(--accent); font-weight: 600; }
.wa-picto-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Compte des filtres posés. Un filtre replié doit rester visible, sinon le
   client cherche pourquoi sa liste est courte. */
.wa-picto-n {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--bg2); color: var(--accent); border: 1px solid var(--accent);
  font-size: .68rem; font-weight: 700; line-height: 16px; text-align: center;
}
.wa-picto:focus-visible { outline: none; }
.wa-picto:focus-visible .wa-picto-rond { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Options du filtre ouvert. Elles se déplient sous le bouton qui les ouvre. */
.wa-panneau { padding: .6rem 0 .2rem; }

/* --- Compteur de vins ------------------------------------------------
   Place fixe, juste au-dessus de la liste, aligné à gauche. Dans la barre de
   filtres, il se déplaçait avec le repliement des boutons. */
.wa-count {
  margin: .2rem 0 .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  color: var(--accent); font-weight: 600; font-size: .9rem;
}

/* Familles repliables */
.wa-fam { border-top: 1px solid var(--line); padding: .5rem 0; }
/* Le filet d'une famille la separe de la precedente. En tete d'un bloc de
   filtres il n'a rien a separer, et il double celui de la barre de titre :
   deux traits identiques a seize pixels d'ecart se lisent comme un defaut. */
.wa-filters > .wa-fam:first-child { border-top: none; padding-top: 0; }
.wa-fam-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: .45rem; display: flex; align-items: center; gap: .5rem; }
.wa-skip { margin-top: .5rem; background: none; border: 1px dashed var(--line); color: var(--muted); border-radius: 999px; padding: .25rem .8rem; cursor: pointer; font-size: .8rem; }
.wa-skip:hover { color: var(--ink); border-color: var(--accent); }

/* Coup de cœur (couleur fixe demandée) */
.wa-heart { color: #E53E3E; }

/* Modale fiche vin - bottom sheet mobile, centrée desktop, sans bordure (ombre seule) */
/* La fenêtre se mesure en « dvh » et non en « vh » : sur téléphone, « vh »
   est figé sur la hauteur SANS la barre d'adresse, si bien que le haut de la
   fiche passait dessous et que la croix devenait inatteignable. « dvh » suit
   la hauteur réellement visible, barre déployée ou rétractée. */
.wa-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.wa-modal { position: relative; background: var(--bg); width: 100%; max-width: 680px; overflow-y: auto;
  max-height: 92vh; max-height: 92dvh;
  border-radius: 18px 18px 0 0; border: none; box-shadow: 0 -10px 50px rgba(0,0,0,.55);
  padding: 0 1.2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  animation: wa-up .25s ease; -webkit-overflow-scrolling: touch; }
@keyframes wa-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* L'en-tête reste collé en haut de la fenêtre pendant le défilement : la croix
   était posée en absolu et partait avec le contenu. Il porte le retrait de
   sécurité du haut, celui de l'encoche et de la barre d'adresse. */
.wa-modal-entete {
  position: sticky; top: 0; z-index: 3;
  display: flex; justify-content: flex-end;
  margin: 0 -1.2rem; padding: calc(.6rem + env(safe-area-inset-top, 0px)) 1.2rem .4rem;
  background: var(--bg);
}
.wa-modal-close { width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--bg2); border: none; color: inherit; font-size: 1rem; cursor: pointer; }
@media (min-width: 560px) { .wa-modal-overlay { align-items: center; } .wa-modal { border-radius: 18px; box-shadow: 0 14px 60px rgba(0,0,0,.5); animation: wa-fade .2s ease; } @keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } } }

/* Tableau de prix dans la fiche */
.wa-prix-table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-size: .9rem; }
.wa-prix-table th { text-align: left; color: var(--muted); font-weight: 400; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.wa-prix-table td { padding: .42rem .4rem; border-bottom: 1px solid var(--line); }
.wa-prix-table td:last-child, .wa-prix-table th:last-child { text-align: right; color: var(--accent); white-space: nowrap; }

/* Bouton "Découvrir nos vins" en bas de La carte - une seule ligne, centré */
.wa-cta { display: block; text-align: center; white-space: nowrap; text-decoration: none;
  background: var(--accent); color: var(--on-accent); font-family: var(--font); font-size: 1.05rem;
  padding: .85rem 1.2rem; border-radius: var(--radius); margin-top: 1.4rem; }
.wa-cta:hover { filter: brightness(.94); }

/* Fiche vin */
.wa-fiche-nom { font-family: var(--font); font-size: 1.6rem; margin: .2rem 0; }
/* « inline-block » est indispensable : un span en flux inline ignore sa largeur
   et sa hauteur. La pastille s'écrasait alors à la largeur de ses bordures, et
   sortait en filet de deux pixels au lieu d'un rond. Ailleurs elle est dans un
   conteneur flex, qui la met en bloc de lui-même. */
.wa-fiche-nom .wa-dot { display: inline-block; width: .95rem; height: .95rem; margin: 0 .45rem 0 0; vertical-align: middle; }
.wa-fiche-sub { color: var(--muted); margin-bottom: .8rem; }
.wa-badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.wa-badge { background: var(--accent2); color: var(--ink); border-radius: 999px; padding: .15rem .7rem; font-size: .78rem; }

/* Sélecteur de millésime : au niveau des pastilles, poussé à droite.
   « margin-left: auto » plutôt qu'un conteneur en plus : sur un écran étroit
   les pastilles passent à la ligne et le sélecteur reste à droite de la
   dernière, sans jamais déborder. */
/* Le libellé se lit à gauche du sélecteur. Sur un téléphone étroit, le couple
   passe à la ligne sous les pastilles plutôt que de déborder : « margin-left:
   auto » le pousse à droite quand la place existe, et rien de plus. */
.wa-mil-choix { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; }
.wa-mil-choix label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.wa-mil-choix select {
  font: inherit; font-size: .82rem; color: var(--ink);
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem 1.6rem .2rem .7rem;
  /* Cible au doigt : 32 px de haut, au-dessus du minimum confortable sur
     smartphone, sans dépasser la hauteur d'une pastille voisine. */
  min-height: 32px;
  appearance: none;
  /* Le chevron est dessiné en fond : un SVG en data-uri ne dépend d'aucune
     police d'icônes, et suit la couleur du texte. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right .75rem center, right .5rem center;
  background-size: .25rem .25rem, .25rem .25rem;
  background-repeat: no-repeat;
}
.wa-mil-choix select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.wa-tag { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: .12rem .65rem; font-size: .78rem; }

/* Une cartouche de famille porte plusieurs accords : « Viandes : blanches,
   volailles ». Elle est donc plus longue qu'une cartouche simple et doit
   pouvoir aller à la ligne au lieu de déborder sur un téléphone de 320 px.
   Les coins s'arrondissent moins fort qu'un rond complet : sur deux lignes,
   un rayon de 999 px creuse les côtés. */
.wa-tag-fam {
  border-radius: var(--radius, 12px);
  max-width: 100%;
  /* Le texte coupe entre deux mots, jamais au milieu d'un accord. */
  overflow-wrap: break-word;
}
.wa-tag-fam b { font-weight: 600; }
.wa-note { font-style: italic; color: var(--ink); background: var(--bg2); border-left: 3px solid var(--accent); padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0; margin: .9rem 0; }
/* Où trouver la bouteille (migration 043). Sous la note, plus discret qu'elle. */
.wa-emplacement { display: flex; gap: .55rem; align-items: baseline; color: var(--ink); margin: .2rem 0 .9rem; }
.wa-emplacement i { color: var(--accent); }
.wa-kv { margin: .25rem 0; }
.wa-kv b { color: var(--muted); font-weight: 400; }

.wa-error { text-align: center; color: var(--muted); padding: 3rem 1.2rem; }
.wa-error h1 { font-family: var(--font); color: var(--ink); }
/* Pas d'opacité ici : elle se multiplierait au contraste de --muted et ferait
   tomber ce texte sous le seuil de lisibilité. --muted est déjà la couleur
   atténuée du thème, elle suffit à rendre le pied discret. */
.wa-foot { margin-top: auto; text-align: center; color: var(--muted); font-size: .72rem; padding: 1.5rem; }
a { color: var(--accent); }

/* Sous-catégories d'accords (lot C6). Un accord ne se lit pas seul : la
   catégorie parente le précède toujours. */
.wa-sous-fam + .wa-sous-fam { margin-top: .6rem; }
.wa-sous-fam-titre {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); margin-bottom: .3rem;
}

/* --- Recherche libre ------------------------------------------------- */
/* En tête du parcours : celui qui sait ce qu'il veut le tape, les autres
   descendent vers les filtres. */
.wa-recherche {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 calc(.7rem * var(--densite));
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Blanc franc, pour que le champ ressorte au lieu de se fondre dans un fond
     de page toujours un peu teinté. Sur Ardoise et Nuit, « --champ » vaut la
     surface sombre : un blanc y rendrait le texte illisible. */
  background: var(--champ, var(--bg2));
  min-height: 48px; /* zone tactile confortable au pouce */
}
.wa-recherche:focus-within { border-color: var(--accent); }
.wa-recherche i { color: var(--muted); font-size: .9rem; }
.wa-recherche input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  color: var(--ink); font: inherit; font-size: .95rem;
  padding: .6rem 0;
}
.wa-recherche input::placeholder { color: var(--muted); }
/* Le navigateur pose sa propre croix sur un champ de type search : elle ne
   suit pas le thème et double la nôtre. */
.wa-recherche input::-webkit-search-cancel-button { display: none; }
.wa-q-vider {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1;
  padding: .5rem; margin-right: -.3rem;
  min-width: 44px; min-height: 44px;
}
.wa-q-vider:hover { color: var(--ink); }

/* --- Aucun résultat --------------------------------------------------- */
/* Une liste vide sans explication laisse le client devant un mur. */
.wa-vide {
  margin: calc(1.4rem * var(--densite)) 1.2rem;
  padding: calc(1.4rem * var(--densite)) 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
}
.wa-vide-titre { color: var(--ink); font-weight: 600; margin-bottom: .4rem; }
.wa-vide p { margin: 0 0 .8rem; font-size: .92rem; }
.wa-vide .wa-chip { margin: 0 auto; }

/* --- Vitrine d'apéritif ---------------------------------------------- */
/* L'entrée reprend le bloc « La carte » : trois blocs empilés cohérents, pas
   trois boutons différents. Rien à ajouter pour elle, le style existe déjà.
   Ne reste que l'écran lui-même. */
.wa-apero-intro {
  margin: calc(.9rem * var(--densite)) 1.2rem;
  color: var(--muted);
  font-size: .95rem;
}
/* Le client garde la main : la vitrine est un point de départ, pas une fin. */
.wa-apero-suite {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: calc(1.4rem * var(--densite)) 1.2rem 0;
}
.wa-apero-suite .wa-cta { flex: 1 1 12rem; margin: 0; }
.wa-cta--doux {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* Agrandir une photo (plats et bouteilles) */
/* La photo devient un bouton : il ne doit rien changer à l'aspect de l'image,
   seulement au curseur et au repère de focus. */
.wa-photo-btn { display: block; padding: 0; border: none; background: none; line-height: 0;
  cursor: zoom-in; border-radius: 10px; }
.wa-photo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Plein écran par-dessus tout, fiche vin comprise : la photo agrandie se
   regarde sans rien d'autre autour. */
.wa-photo-overlay { position: fixed; inset: 0; z-index: 60; padding: 1rem;
  background: rgba(0, 0, 0, .92); display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; }
.wa-photo-plein { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
/* Le plein écran photo partage le dessin de la croix, mais pas son placement :
   il n'a pas d'en-tête collé, la croix y reste posée dans le coin. Le retrait
   du haut évite la barre d'adresse, comme dans la fiche. */
.wa-photo-overlay .wa-modal-close {
  position: absolute; z-index: 2;
  top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem;
}

/* Vins conseillés avec un élément de la carte complète.
   Le repère reste discret : la plupart des éléments n'ont aucun conseil, et
   une carte qui déplierait tout serait illisible. Le détail vient au clic. */
.wa-conseils { margin-top: .35rem; }
.wa-conseil-repere {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: .8rem;
}
.wa-conseil-repere:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Le chevron pivote : l'état ouvert se lit sans avoir à comparer deux écrans. */
.wa-conseil-chevron { display: inline-flex; transition: transform .15s ease; }
.wa-conseil-repere[aria-expanded="true"] .wa-conseil-chevron { transform: rotate(90deg); }

.wa-conseil-panneau {
  display: flex; flex-direction: column;
  margin-top: .3rem; padding-left: .6rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.wa-conseil-vin {
  display: flex; align-items: center; gap: .45rem;
  width: 100%; padding: .35rem 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.wa-conseil-vin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wa-conseil-nom { font-size: .88rem; font-weight: 500; }
/* Le prix se pousse à droite et ne se coupe pas : c'est l'information que le
   client cherche en premier. */
.wa-conseil-prix { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }