/* Mundo Revés — design system (extrait de la démo v4). Front public. */
@font-face{font-family:'Montserrat';font-weight:100 900;font-style:normal;
  src:url(fonts/montserrat.woff2) format('woff2');font-display:swap}

:root{
  /* Gris éclaircis (Quentin 06/08 : « un gris un peu plus léger sur les fonds »).
     Le WordPress est à #E2E2E2 ; on passe un cran au-dessus. */
  --bg:#FFFFFF; --page:#EDEDED; --panel:#F3F3F3; --ink:#1D1D1F; --body:#4A4E57; --muted:#5F656E;
  --cyan:#4DC6E2; --cyan-deep:#166877; --cyan-ink:#08181D;   /* Pantone 14-4530 TN Bluefish (04/09, 2e envoi, sRGB officiel — voir bloc Pantone en fin de feuille) ; ex pastel #7CCFDF, ex WP #54C3D6 */
  --cyan-wp:#4DC6E2; /* lettrines, sous-titres, titres empilés — ex cyan clair du WordPress #7EC9DE, aligné sur Bluefish */
  /* Jaune de marque. Relevé sur les boutons du WordPress (#f4ce4f), puis éclairci le
     28/08/2026 à la demande de Quentin (« un jaune un peu plus pastel, plus vif,
     chaleureux — celui-là est un peu terne ») : #FFDB6E, encre #231F14 dessus = 12:1 —
     Quentin 06/08 : « le même jaune qu'on a », l'esthétique Instagram.
     04/09 matin : Pantone 910 C = #FDF38A (WhatsApp Quentin). 04/09 midi, 2e envoi via
     Vivien (nuancier textile) : 12-0645 TN Lemon Tonic — voir le bloc « Pantone » en fin
     de feuille, sRGB officiel #FCF951. Encre dessus = 14,7:1. */
  --yellow:#FCF951; --yellow-ink:#231F14;
  --line:#E3E3E3; --img-bg:#F4F3F0;
  --shadow:0 30px 60px -30px rgba(0,0,0,.25);
  --logo-filter:none;
  /* Encre FIXE, jamais inversée par le mode sombre. Certains blocs sont des
     bandes sombres par CHOIX de design — pied de page, bande « cantidad » — et
     non par thème. En leur donnant `var(--ink)`, le mode sombre les repeignait
     en blanc cassé alors que leur texte reste blanc en dur : illisibles.
     Constaté sur téléphone, là où passe la majorité du trafic. */
  --ink-fixed:#1D1D1F;
  --sans:'Montserrat',-apple-system,'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  --maxw:1240px;
  /* Hauteur du header AU REPOS (celle du WordPress). Les titres de vue s'y calent :
     une valeur en dur recopiée à quatre endroits finissait toujours par diverger,
     et le header recouvrait le titre. Le header réduit (défilement) ne pose pas de
     problème : la page a déjà défilé. */
  --hdr-h:142px;
}
/* 78 px = la hauteur RÉELLE mesurée (logo 46 + 2×16 de marges), pas les 64 px de
   `min-height` — celle-ci n'est qu'un plancher, le contenu la dépasse. Le tiroir
   mobile s'ouvre à cette même variable : avec 64 px en dur, ses 14 premiers pixels
   passaient sous le header (z-index 60) et le premier lien y était mort au tap. */
@media (max-width:1080px){:root{--hdr-h:78px}}
@media (prefers-color-scheme:dark){
  :root{
    /* --page et --body manquaient : le fond restait CLAIR (#E2E2E2) alors que
       --ink passait à #EDF0F2, donc tous les titres tombaient à 1,12:1 — illisibles
       pour la majorité du trafic mobile, celui des pubs. */
    --bg:#101417; --page:#0C1013; --panel:#1A2024; --ink:#EDF0F2; --body:#C3CBD1; --muted:#9AA4AA;
    --cyan:#4DC6E2; --cyan-deep:#4DC6E2; --cyan-ink:#08181D;   /* Bluefish : sur fond sombre, la teinte pleine sert aussi de texte */
    --yellow:#FCF951; --yellow-ink:#231F14;
    --line:#2A3238; --img-bg:#E9E6E0;
    --shadow:0 30px 60px -30px rgba(0,0,0,.8);
    --logo-filter:invert(1) brightness(.95);
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --page:#EDEDED; --panel:#F3F3F3; --ink:#1D1D1F; --body:#4A4E57; --muted:#5F656E;
  --cyan:#4DC6E2; --cyan-deep:#166877; --cyan-ink:#08181D;   /* Pantone 14-4530 TN Bluefish (04/09, 2e envoi, sRGB officiel — voir bloc Pantone en fin de feuille) ; ex pastel #7CCFDF, ex WP #54C3D6 */
  --yellow:#FCF951; --yellow-ink:#231F14;
  --line:#E3E3E3; --img-bg:#F4F3F0;
  --shadow:0 30px 60px -30px rgba(0,0,0,.25);
  --logo-filter:none;
}
/* Fond de page relevé sur le WordPress (#E2E2E2) : le blanc est réservé aux
   blocs de contenu, ce qui donne au site sa respiration d'origine. */
body{background:var(--bg);color:var(--body)}
.band,.page-head,footer .wrap,.nl-band{background:transparent}
.band-paper{background:var(--panel)}

:root[data-theme="dark"]{
  /* --page et --body doivent suivre : même classe de défaut que le bloc
     prefers-color-scheme (un thème sombre forcé gardait le fond clair). */
  --bg:#101417; --page:#0C1013; --panel:#1A2024; --ink:#EDF0F2; --body:#C3CBD1; --muted:#9AA4AA;
  --cyan:#4DC6E2; --cyan-deep:#4DC6E2; --cyan-ink:#08181D;   /* Bluefish : sur fond sombre, la teinte pleine sert aussi de texte */
  --yellow:#FCF951; --yellow-ink:#231F14;
  --line:#2A3238; --img-bg:#E9E6E0;
  --shadow:0 30px 60px -30px rgba(0,0,0,.8);
  --logo-filter:invert(1) brightness(.95);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.15}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:3px}

/* ══ Signature : mot retourné ══ */
.flip{display:block;transform:rotate(180deg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ══ Motifs typographiques du WordPress (relevés au getComputedStyle) ══
   — cyan clair #7EC9DE : lettrines, sous-titres, mot fort des titres empilés ;
   — lettrine : première lettre géante 140 px / graisse 100, en drop cap ;
   — titre empilé : ligne 1 fine (100), ligne 2 grasse (600), souvent retournée. */
.lead-cap{font-size:clamp(20px,2.15vw,30px);font-weight:600;color:var(--ink);
  line-height:1.25;letter-spacing:.01em;max-width:none}
.lead-cap::first-letter{float:left;font-size:clamp(84px,10vw,140px);line-height:.68;
  font-weight:100;color:var(--cyan-wp);padding-right:12px;margin-top:4px}
.stack-title{text-align:center;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.stack-title .w1{display:block;font-size:clamp(32px,4vw,56px);font-weight:100;color:var(--ink)}
.stack-title .w2{display:block;font-size:clamp(30px,3.6vw,50px);font-weight:600;color:var(--cyan-wp)}
.stack-title .w2.flip{transform:rotate(180deg)}
.manifesto-cyan{max-width:992px;margin:22px auto 0;text-align:center;color:var(--cyan-wp);
  font-weight:600;font-size:clamp(14px,1.45vw,19.6px);line-height:1.55}
.manifesto-cyan em{font-style:normal;font-weight:600}
/* Weight 200 : le WordPress compose ses H1 en Montserrat 100 — on s'en approche
   sans descendre à 100, illisible aux tailles mobiles (30 px). */
.title-xl{font-size:clamp(44px,7vw,96px);font-weight:200;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.04;color:var(--ink)}
.title-xl .l1{display:block;font-weight:200;color:var(--muted)}
.title-xl .flip{font-weight:500}
.kicker{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan-deep)}


/* ══ En-tête — calqué sur le WordPress de la bodega ══
   Relevé sur mundoreveswines.com : hauteur 142 px, logo 137×80 à 30 px du bord,
   navigation alignée à droite, séparateur avant TIENDA ONLINE. */
#hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  transition:background .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}
/* En défilant, la barre passe CYAN, logo et liens BLANCS — l'effet sticky du
   WordPress, réclamé par Vivien (07/08, captures à l'appui). En haut de page le
   header reste transparent avec le logo sombre, comme sur leur site.
   ⚠️ Blanc sur cyan ≈ 2:1 — c'est LEUR design (le WP fait pareil), assumé. */
#hdr.solid{background:var(--cyan);box-shadow:0 1px 0 rgba(0,0,0,.08)}
/* La hauteur DOIT être dans la transition : sans elle le header sautait de 142 à
   66 px d'un coup pendant que le fond, lui, se dégradait — c'est ce décalage qui
   faisait « sec ». `min-height` est animable, `height:auto` ne l'aurait pas été. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:31px 0;min-height:142px;
  transition:padding .4s cubic-bezier(.4,0,.2,1),min-height .4s cubic-bezier(.4,0,.2,1)}
/* Le header rétrécit AU DÉFILEMENT, sur toutes les vues — comme le WordPress, où
   le grand logo d'entrée de page laisse place à une barre compacte (Vivien 07/08 :
   « le Mundo Revés du menu change de position aussi »). Les titres de vue se calent
   sur --hdr-h, la hauteur au repos, donc rien n'est jamais recouvert. */
/* 66 px : la hauteur mesurée sur leur barre sticky (logo 36 px à 15 px du haut).
   Notre 100 px d'avant faisait une bande deux fois trop épaisse à côté. */
#hdr.solid .nav{padding:15px 0;min-height:66px}

/* ── Les deux compositions de logo se CROISENT en fondu ──────────────────────
   Un `display:none/block` ne s'anime pas : la marque changeait d'un coup au
   franchissement du seuil. Les deux images sont donc superposées (absolues,
   centrées verticalement) et on joue sur l'opacité ; la BOÎTE .brand, elle,
   transitionne en largeur et en hauteur pour que le header suive le mouvement.
   Le fichier « wide » est déjà blanc (celui du WP) : aucun filtre à lui poser. */
.brand{position:relative;display:block;width:136px;height:80px;
  transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1)}
.brand img{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:auto;display:block;
  transition:opacity .3s ease,height .4s cubic-bezier(.4,0,.2,1)}
.brand .logo-stack{height:80px;filter:var(--logo-filter)}
.brand .logo-wide{height:36px;opacity:0;filter:none}
#hdr.solid .brand{width:274px;height:36px}
#hdr.solid .brand .logo-stack{height:36px;opacity:0}
#hdr.solid .brand .logo-wide{opacity:1}
/* ⚠️ `.sub-parent` est un <button>, pas un <a> : les sélecteurs en `> a` ne
   l'atteignent pas et « VINOS » restait ENCRE sur la barre cyan pendant que tout
   le reste du menu blanchissait (relevé par Vivien, mesuré : rgb(74,78,87) contre
   #fff partout ailleurs). Même cause que le bouton de langue plus tôt aujourd'hui.
   Toute entrée de menu qui n'est pas un lien doit être citée explicitement ici. */
#hdr.solid .nav-links > a,#hdr.solid .has-sub > a,#hdr.solid .nav-lang,
#hdr.solid .sub-parent,
#hdr.solid .shop-link,#hdr.solid .cart-ico,#hdr.solid .volver-sitio,#hdr.solid #burger{color:#fff}
#hdr.solid .nav-links > a:hover,#hdr.solid .has-sub > a:hover,#hdr.solid .nav-lang:hover,
#hdr.solid .sub-parent:hover,
#hdr.solid .shop-link:hover,#hdr.solid .cart-ico:hover{color:var(--cyan-ink)}
#hdr.solid .nav-links a.active,#hdr.solid .has-sub > a.active{color:#fff;border-bottom-color:#fff}
#hdr.solid .cart-ico b{color:#fff}
#hdr.solid .shop-link::before{background:rgba(255,255,255,.55)}
/* Le bouton « Armá tu caja » (header boutique) est cyan : sur barre cyan il
   devient blanc, texte cyan profond.
   ⚠️ Sélecteur `.nav-links > a.nav-cta` obligatoire : le bouton EST un enfant
   direct de .nav-links, donc la règle « liens blancs » ci-dessus (1,2,1) battait
   un simple `.nav-cta` (1,2,0) et peignait le texte en blanc sur fond blanc —
   bouton illisible, constaté en capture. */
#hdr.solid .nav-links > a.nav-cta{background:#fff;color:var(--cyan-deep);border-color:#fff}
#hdr.solid .lang-switch{border-color:rgba(255,255,255,.55)}
#hdr.solid .lang-switch button{color:rgba(255,255,255,.85)}
#hdr.solid .lang-switch button.on{background:#fff;color:var(--cyan-deep)}

.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
/* .4s comme le reste du header : à .2s, les libellés viraient au blanc avant que
   la barre cyan soit posée — un éclair illisible à chaque défilement. */
.nav-links > a,.has-sub > a,.nav-lang{font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body);white-space:nowrap;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:6px 0;
  border-bottom:2px solid transparent;transition:color .4s ease,border-color .4s ease}
.nav-links > a:hover,.has-sub > a:hover,.nav-lang:hover{color:var(--cyan-deep)}
.nav-links a.active,.has-sub > a.active{color:var(--cyan);border-bottom-color:var(--cyan)}

/* Sous-menus : au survol sur grand écran, au clic sur mobile (voir plus bas) */
.has-sub{position:relative}
.has-sub > a::after{content:'';display:inline-block;width:5px;height:5px;margin-left:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.submenu{position:absolute;top:100%;left:-14px;min-width:230px;background:var(--bg);
  border:1px solid var(--line);box-shadow:var(--shadow);padding:14px 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.has-sub:hover .submenu,.has-sub:focus-within .submenu,.has-sub.open .submenu{
  opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:8px 20px;font-size:12.5px;letter-spacing:.03em;
  text-transform:none;font-weight:400;color:var(--body)}
.submenu a:hover{color:var(--cyan-deep);background:var(--panel)}
.submenu .sub-h{display:block;padding:12px 20px 5px;font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.submenu .sub-h:first-child{padding-top:2px}
.submenu-wide{columns:2;column-gap:0;min-width:430px}

.nav-right{display:flex;align-items:center;gap:16px}
.cart-ico{display:flex;align-items:center;gap:6px;color:var(--body);transition:color .4s ease}
.cart-ico b{font-size:11px;font-weight:700;color:var(--cyan-deep);transition:color .4s ease}
.cart-ico:hover{color:var(--cyan-deep)}
/* `white-space:nowrap` : au défilement le logo passe en version large (274 px) et
   la barre se resserre — « TIENDA ONLINE » se coupait alors en deux lignes. */
.shop-link{position:relative;padding-left:17px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--body);transition:color .4s ease;
  white-space:nowrap}
.shop-link::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:18px;background:var(--line)}
.shop-link:hover{color:var(--cyan)}
#burger{display:none;background:none;border:0;font-size:22px;color:var(--body);cursor:pointer;
  padding:4px 6px;line-height:1}

/* Bascule de langue en texte, comme le « ENGLISH » du WordPress */
.lang-switch{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang-switch button{background:none;border:0;padding:5px 9px;font:inherit;font-size:10.5px;
  font-weight:600;letter-spacing:.1em;color:var(--muted);cursor:pointer}
.lang-switch button.on{background:var(--cyan);color:#08181D}

/* ── Téléphone : le menu du WordPress est mauvais ici (survol + cibles minuscules),
      donc on ne le copie pas : tiroir plein écran, accordéon, cibles ≥ 44 px. ── */

/* Les titres de vue étaient bloqués à 44px + 6,16px d'interlettrage sous 629px, dans
   248px utiles : « ESCRIBINOS » débordait de 73px et était COUPÉ (body a
   overflow-x:hidden, donc pas même un scroll pour le rattraper). */
@media (max-width:430px){
  .title-xl{font-size:30px;letter-spacing:.08em}
  .legal-title{font-size:26px}
  .title-xl,.legal-title,h1,h2,h3{overflow-wrap:anywhere}
}

@media (max-width:1080px){
  /* `#hdr.solid .nav` (spécificité 1,1,1) battait `.nav` (0,1,0) : une media query
     n'ajoute AUCUN poids. Quand la barre est en état .solid (défilement, depuis le
     07/08), le header mobile faisait 100 px au lieu de 64, et comme le tiroir
     démarre à `inset:64px` sous un header en z-index 60, les 26 premiers pixels du
     premier lien étaient recouverts et morts au tap. On répète le préfixe pour
     gagner la cascade au lieu de recourir à !important. */
  .nav,#hdr.solid .nav{padding:16px 0;min-height:64px}
  /* Sur téléphone la barre ne rétrécit pas : la marque reste empilée dans les deux
     états (la version large déborderait à côté du burger), donc on remet le logo
     dans le flux et on annule le fondu croisé du bureau. */
  .brand,#hdr.solid .brand{width:auto;height:46px}
  .brand img{position:static;transform:none}
  .brand .logo-stack,#hdr.solid .brand .logo-stack{height:46px;opacity:1}
  #hdr.solid .brand .logo-stack{filter:brightness(0) invert(1)}
  .brand .logo-wide,#hdr.solid .brand .logo-wide{display:none}
  #burger{display:block}
  .shop-link{display:none}

  .nav-links{position:fixed;inset:var(--hdr-h) 0 0;background:var(--bg);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .28s ease;margin:0}
  .nav-links.open{transform:translateX(0)}
  .nav-links > a,.has-sub > a,.nav-lang{display:block;padding:16px 2px;font-size:13px;
    border-bottom:1px solid var(--line);text-align:left;width:100%}
  .has-sub > a::after{float:right;margin-top:6px;transition:transform .2s}
  .has-sub.open > a::after{transform:translateY(-2px) rotate(225deg)}

  /* Accordéon : le sous-menu pousse le contenu au lieu de flotter */
  /* visibility:hidden quand replié : sinon les ~19 liens du sous-menu restent
     focusables au clavier tout en étant écrêtés à 0 px — autant d'arrêts invisibles. */
  .submenu{position:static;min-width:0;border:0;box-shadow:none;padding:0;
    max-height:0;overflow:hidden;opacity:1;visibility:hidden;transform:none;
    transition:max-height .3s ease,visibility .3s}
  .has-sub.open .submenu{max-height:1400px;visibility:visible}
  .submenu-wide{columns:1;min-width:0}
  .submenu a{padding:13px 14px;border-bottom:1px solid var(--line)}
  .submenu .sub-h{padding:14px 14px 6px}

  /* Le TIROIR est un panneau BLANC : sous la barre cyan (.solid), ses liens
     doivent repasser sombres — même astuce de cascade que plus haut (répéter le
     préfixe pour gagner par l'ordre, pas par !important). */
  #hdr.solid .nav-links > a,#hdr.solid .has-sub > a,#hdr.solid .nav-lang{color:var(--body)}
  #hdr.solid .nav-links > a:hover,#hdr.solid .has-sub > a:hover{color:var(--cyan-deep)}
  #hdr.solid .nav-links a.active,#hdr.solid .has-sub > a.active{color:var(--cyan);border-bottom-color:var(--cyan)}
  #hdr.solid .nav-links > a.nav-cta{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
}


/* ══ Age gate — la porte d'entrée du site, pas un écran administratif ══ */
/* ⚠️ z-index AU-DESSUS du bandeau cookies (audit 26/08). Il valait 100 quand
   `#mpc-consent` est à 9999 : en PAYSAGE sur un téléphone (740×360), le bandeau
   recouvrait 84 des 126 points de la surface du bouton « Soy mayor » — mesuré,
   `elementFromPoint` renvoyait le bandeau et le tap laissait le voile en place.
   Première visite en paysage = site inaccessible, purement et simplement. */
#gate{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:28px;transition:opacity .5s;overflow:hidden;background:#0E1416}
/* visibility:hidden EN PLUS de pointer-events : sans elle, les boutons du voile
   restaient tabulables sur toutes les pages suivantes et « Sí, ingresar » était
   encore activable au clavier sous un écran invisible. */
/* `display:none` et pas seulement `visibility:hidden` (audit perf 26/08) : en
   `visibility:hidden` l'élément reste RENDU, donc son fond `.gate-bg` — soit
   `home-1.webp`, 221 Ko — était téléchargé sur CHAQUE page, voile déjà franchi.
   Mesuré : 221 Ko sur les 470 Ko de ressources lourdes de l'accueil, soit 47 % du
   poids utile, pour quelque chose d'invisible ; et ce téléchargement se disputait
   le tuyau avec `home-1-900.webp`, l'image qui fait justement le LCP.
   La transition d'ouverture est conservée : la classe n'est posée qu'APRÈS le clic. */
#gate.hide{opacity:0;pointer-events:none;visibility:hidden;display:none}
/* Posée dans le <head> pour un visiteur qui a déjà confirmé ses 18 ans : le voile n'est
   jamais peint, son fond jamais téléchargé (audit 27/09). */
html.mr-mayor #gate{display:none}

/* Photo du hero (déjà préchargée) + voile pour garder le texte lisible.
   L'animation ne touche que transform : elle reste sur le compositeur. */
.gate-bg{position:absolute;inset:0;
  background:linear-gradient(rgba(8,14,16,.62),rgba(8,14,16,.78)),
             url('img/home-1.webp') center/cover no-repeat;
  transform:scale(1.06);animation:gateDrift 26s ease-in-out infinite alternate}
@keyframes gateDrift{from{transform:scale(1.06) translate3d(0,0,0)}
                     to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@media (prefers-reduced-motion:reduce){.gate-bg{animation:none}html{scroll-behavior:auto}}

.gate-lang{position:absolute;top:22px;right:24px;z-index:2}
.gate-lang button{background:transparent;color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.28)}
.gate-lang button.on{background:var(--cyan);color:#08181D;border-color:var(--cyan)}

.gate-box{position:relative;z-index:1;max-width:520px;text-align:center;color:#fff}
.gate-box img{height:76px;width:auto;margin:0 auto 26px;display:block;
  filter:brightness(0) invert(1)}
.gate-kicker{display:block;font-size:10.5px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.gate-box h2{font-size:clamp(1.5rem,1.1rem+1.6vw,2.15rem);font-weight:300;line-height:1.15;
  letter-spacing:.01em;text-transform:none;margin:0 0 16px;color:#fff}
.gate-box p{color:rgba(255,255,255,.74);font-size:14px;line-height:1.75;margin:0 auto 30px;max-width:400px}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gate-actions .btn-line{border-color:rgba(255,255,255,.4);color:#fff}
.gate-actions .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
#gateDeny{font-size:13.5px;color:#FFD9D2;margin-top:22px;display:none}
.gate-legal{font-size:10.5px;letter-spacing:.04em;color:rgba(255,255,255,.5);
  margin:34px auto 0;max-width:420px}

@media (max-width:560px){
  .gate-box img{height:60px;margin-bottom:20px}
  .gate-legal{margin-top:26px}
}

/* ══ Buttons ══ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid transparent;transition:.22s ease;border-radius:0}
.btn-cyan{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
.btn-cyan:hover{background:transparent;color:var(--cyan-deep);border-color:var(--cyan)}
.btn-dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
/* Jaune de marque (#FFDB6E sur texte sombre : 11:1). Hover inversé, comme .btn-cyan. */
.btn-yellow{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)}
.btn-yellow:hover{background:transparent;color:var(--ink);border-color:var(--yellow)}

/* ── Géo (Vivien 07/08) : hors Argentine, les portes d'entrée de la tienda
   disparaissent — le visiteur étranger ne peut pas acheter (envíos solo AR).
   Détection par fuseau horaire (inline dans le <head>), qui pose .mr-ext sur
   <html>. Les liens restent dans le HTML servi : Google les suit toujours. ── */
html.mr-ext .geo-tienda{display:none!important}
.geo-solo-ext{display:none}
html.mr-ext .geo-solo-ext{display:block}
/* Aviso sur la tienda même, pour qui y atterrit depuis Google ou une pub */
.tienda-aviso{background:var(--panel);border-left:3px solid var(--yellow);
  padding:14px 20px;margin:0 auto;max-width:var(--maxw);font-size:12.5px;color:var(--body)}
.btn-white{background:#fff;color:#1D1D1F;border-color:#fff}
/* Bouton « Conocé nuestro proyecto » répété sous l'intro de la home (Quentin 21/09) */
.band-cta{margin:clamp(22px,3vw,36px) 0 0;text-align:center}
.btn-white:hover{background:transparent;color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}


/* ══ Views / router ══ */
.view{display:none}
.view.active{display:block;animation:viewIn .55s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
main{padding-top:0}

/* ══ Reveal ══ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  /* !important : une redéclaration plus loin dans la feuille (.reveal{opacity:0}
     ~l.1381) gagnait sinon la cascade et laissait le contenu invisible pour un
     utilisateur reduced-motion sans/avant JS. L'accessibilité doit l'emporter. */
  .reveal{opacity:1!important;transform:none!important}
}

/* ══ HERO inicio — couverture PLEINE LARGEUR (Vivien 10/08 : « la photo prend
   toute la largeur »). Le WordPress encadre son slider et pose un bloc gris à
   droite ; retiré, il ne portait aucun contenu. Le texte « THE FRENCH WINEMAKERS »
   reste centré sur l'image — c'est leur slide, en anglais dans les 3 langues. ══ */
.hero{position:relative;background:var(--bg);padding:var(--hdr-h) 0 0}
.hero .bg{position:relative;width:100%;aspect-ratio:2/1;max-height:76vh;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#fff;padding:0 24px;pointer-events:none}
.hero-title{font-size:clamp(30px,6.4vw,88px);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.05;color:#fff;
  text-shadow:0 2px 22px rgba(10,14,18,.3)}
.hero-title .flip{font-weight:600}
/* Quentin 15/09 : le titre mène à Nuestro proyecto, un bouton le dit dessous. Le voile
   .hero-content laisse passer les clics (pointer-events) uniquement sur ces deux liens. */
.hero-title a{color:inherit;text-decoration:none;pointer-events:auto;
  text-underline-offset:.12em;text-decoration-thickness:2px}
.hero-title a:hover,.hero-title a:focus-visible{text-decoration:underline}
.hero-cta{pointer-events:auto;margin-top:clamp(16px,2.4vw,30px);text-shadow:none}

/* ══ Panel title layout (à la WP) ══ */
.page-head{display:grid;grid-template-columns:.9fr 1.1fr;min-height:64vh;align-items:stretch;
  margin-top:var(--hdr-h)}
.page-head .side{background:var(--panel);display:flex;flex-direction:column-reverse;  /* column-reverse : comme sur le WordPress, le surtitre se lit SOUS le titre.
     L'ordre du DOM reste titre-après-surtitre, donc la lecture d'écran garde son sens. */
  justify-content:flex-end;padding:clamp(36px,6vw,80px)}
.page-head .side .kicker{margin-top:20px;margin-bottom:0;color:var(--muted)}
.page-head .body{padding:clamp(48px,7vw,110px) clamp(28px,6vw,90px);position:relative;display:flex;flex-direction:column;justify-content:center}
.lead{font-size:clamp(19px,2.2vw,27px);font-weight:600;line-height:1.5;letter-spacing:.01em;max-width:34ch}
.lead em{font-style:italic;font-weight:600}
.watermark{position:absolute;top:-10px;left:8px;font-size:clamp(160px,24vw,330px);
  font-weight:300;color:var(--cyan);opacity:.28;line-height:1;pointer-events:none;user-select:none}
@media(max-width:880px){.page-head{grid-template-columns:1fr}.page-head .side{min-height:38vh}}

/* ══ Tête « igual WordPress » (proyecto / terroir / contacto — 10/08) : PAS de
   photo. Colonne GRISE étroite à gauche, titre 70 px fin/gras retourné centré,
   surtitre dessous ; corps sur BLANC à droite avec lettrine + deux colonnes. ══ */
.wp-head{grid-template-columns:.58fr 1.42fr;min-height:0}
.wp-head .side{background:var(--page);justify-content:center;align-items:center;text-align:center;
  min-height:clamp(380px,58vh,620px);padding:clamp(36px,5vw,64px) clamp(20px,3vw,44px)}
.wp-head .side .kicker{color:#4A4E57;letter-spacing:.3em;margin-top:22px}
.wp-head .title-xl{font-size:clamp(36px,5vw,70px);font-weight:100;letter-spacing:.06em;line-height:1.05;color:#444}
.wp-head .title-xl .l1{font-weight:100;color:#444}
.wp-head .title-xl .flip{font-weight:600;color:#444}
.wp-head .body{background:var(--bg);justify-content:flex-start;padding:clamp(40px,6vw,88px) clamp(28px,5vw,80px)}
.wp-head .head-cols{grid-template-columns:1fr 1fr;padding:clamp(22px,3vw,38px) 0 0}
@media(max-width:880px){.wp-head{grid-template-columns:1fr}.wp-head .side{min-height:34vh}}

/* Section barriques (proyecto) : manifeste cyan étroit à gauche, photo large à droite.
   ⚠️ FLUIDE, sans max-width (10/08) : chez eux la photo occupe ~58 % de la largeur
   de l'écran (825 px sur 1400, 1 120 px sur 1920). Enfermée dans le .wrap de
   1 240 px, la nôtre restait à 735 px et paraissait deux fois plus petite sur un
   grand écran — c'est l'écart de taille relevé par Vivien. */
.barrels{display:grid;grid-template-columns:.85fr 1.65fr;gap:clamp(28px,5vw,70px);
  align-items:center;max-width:none;padding:0 30px}
.barrels .manifesto-cyan{font-size:clamp(13px,1.25vw,16.5px);max-width:46ch;margin:0 auto;line-height:1.7}
.barrels-img{width:100%;height:auto;display:block}
@media(max-width:880px){.barrels{grid-template-columns:1fr;padding:0 22px}}

/* ══ 2-col text ══ */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);
  padding:clamp(40px,6vw,80px) 0}
.cols p{color:var(--muted);font-size:14.5px;margin:0 0 18px;line-height:1.85}
.cols p em{font-style:italic}
@media(max-width:820px){.cols{grid-template-columns:1fr}}

/* ══ Split fondateurs ══ */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:96vh}
.split .photo{overflow:hidden}
.split .photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.split .cpanel{background:var(--cyan);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(48px,7vw,100px) clamp(28px,5vw,80px);color:#fff}
.split .cpanel .ghost{position:absolute;inset:0;opacity:.3}
.split .cpanel .ghost img{width:100%;height:100%;object-fit:cover}
.split .cpanel>*{position:relative;z-index:2}
/* Tailles du WordPress : prénom 56 px graisse 100, nom 49 px graisse 600 retourné,
   intro 19,6 px grasse et paragraphe 14 px, tous centrés sur ~508 px. */
.split-name{font-size:clamp(34px,4vw,56px);font-weight:100;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.04;color:#fff;margin-bottom:30px}
.split-name .flip{font-weight:600;font-size:.875em}
.split .intro{font-size:clamp(15px,1.5vw,19.6px);font-weight:600;line-height:1.55;max-width:508px;margin:0 0 24px}
.split .rest{font-size:14px;line-height:1.85;max-width:508px;margin:0;color:rgba(255,255,255,.96)}
@media(max-width:880px){.split{grid-template-columns:1fr}.split .photo{height:64vh}}

/* ══ Bandes ══ */
section.band{padding:clamp(56px,8vw,110px) 0}
.band-head{text-align:center;max-width:680px;margin:0 auto clamp(36px,5vw,64px)}
.band-head .kicker{display:block;margin-bottom:18px}
.band-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.band-head p{color:var(--muted);font-size:14px;margin:16px 0 0}

/* ══ Lignes (inicio) ══
   Comme le WordPress : les trois colonnes sont JOINTIVES, pleine largeur, et
   assez hautes pour porter la bouteille ET la liste des vins dessous. */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
/* Ratio du canevas d'origine (639×1007) : les trois calques retrouvent exactement
   la composition du WordPress, quelle que soit la largeur d'écran. */
.line-card{position:relative;background:var(--panel);overflow:hidden;
  aspect-ratio:639/1007;min-height:460px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:30px;transition:.3s ease}
/* Pas de soulèvement au survol : les colonnes sont jointives chez eux, un panneau
   qui monte ouvrirait une fente blanche entre les trois. */
.line-card:hover{transform:none;box-shadow:none}
.line-card .lc-img{position:absolute;inset:0}
.line-card .lc-img img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.line-card:hover .lc-img img{transform:scale(1.05)}
.line-card .lc-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,12,16,.78))}
.line-card>div:last-child{position:relative;z-index:2;color:#fff}
.line-card h3{font-size:22px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.line-card p{font-size:12.5px;color:#D8EFF4;margin:8px 0 16px;letter-spacing:.04em}
.line-card .go{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#9FE2EE}
@media(max-width:880px){.lines{grid-template-columns:1fr}.line-card{min-height:320px}}

/* ══ Scores ══ */
.scores{background:var(--panel)}
.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.score{text-align:center;padding:10px}
.score .pts{font-size:clamp(48px,5.6vw,72px);font-weight:300;color:var(--cyan-deep);
  line-height:1;font-variant-numeric:tabular-nums}
.score .pts sup{font-size:.3em;font-weight:600;letter-spacing:.12em}
.score .who{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.score .src{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:820px){.score-grid{grid-template-columns:1fr 1fr;gap:34px 10px}}

/* ══ Tienda ══ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.strip-item{padding:20px;border-left:1px solid var(--line)}
.strip-item:first-child{border-left:0}
.strip-item .k{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-deep);display:block}
.strip-item .v{font-size:12.5px;color:var(--muted)}
@media(max-width:768px){.strip-grid{grid-template-columns:1fr 1fr}
  .strip-item:nth-child(3){border-left:0}
  .strip-item{border-top:1px solid var(--line)}
  .strip-item:nth-child(-n+2){border-top:0}}

.range{margin-bottom:60px}
.range-label{display:flex;align-items:baseline;gap:18px;margin:0 0 26px}
.range-label h3{font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.range-label span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.range-label .ln{flex:1;height:1px;background:var(--line);align-self:center}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:22px}
.card{background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
/* ── Boîte de la bouteille ────────────────────────────────────────────────────
   PIÈGE (corrigé le 04/09, Vivien : « les bouteilles sont coupées ») : `height:100%`
   sur l'image NE SE RÉSOUT PAS ici. La hauteur du parent vient d'`aspect-ratio`, que
   le navigateur traite comme indéfinie pour les pourcentages d'un enfant — l'image
   retombait donc sur `height:auto`, se calait sur `max-width:100%` (233 px de large
   → 299 px de haut dans une boîte de 233), et `overflow:hidden` lui rognait 11 px en
   haut ET en bas : la capsule et le culot. Le remède est de la positionner en absolu
   sur la boîte de padding, dont la hauteur, elle, est définie.
   Et le cadre passe de 1/1 à 4/5 : une bouteille fait 0,29 de large pour 1 de haut,
   dans un carré elle rétrécissait de 22 % une fois entière. */
.card-img{background:var(--img-bg);aspect-ratio:4/5;position:relative;display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
.card-img img{position:absolute;left:22px;top:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain;mix-blend-mode:multiply;transition:.4s ease}
.card:hover .card-img img{transform:scale(1.06)}
.card-body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.wtype{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.card h4{font-size:15px;font-weight:600;letter-spacing:.04em;line-height:1.3}
.card .sub{font-size:11.5px;color:var(--muted);margin-top:-3px;letter-spacing:.04em}
.card .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:8px}
.price{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* Prix plein barré, affiché à gauche du prix remisé quand un « Descuento % » est posé
   dans le panneau. Plus petit et atténué : c'est le prix remisé qui doit être lu. */
.was{font-size:.72em;font-weight:500;color:var(--muted);text-decoration-thickness:1px}
.price small{display:block;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;margin-top:2px}
.add{border:1px solid var(--line);background:transparent;color:var(--ink);width:40px;height:40px;font-size:20px;line-height:1;transition:.2s}
.add:hover{background:var(--cyan);border-color:var(--cyan);color:#fff}

/* ══ Cuvées ══ */
.cuvees{background:var(--panel)}
.cuv-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:center}
.cuv-copy h2{font-size:clamp(22px,3vw,34px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:14px 0 18px}
.cuv-copy p{color:var(--muted);font-size:13.5px;margin:0 0 14px;line-height:1.8}
/* Le nombre de colonnes est posé par renderCuvees() : quatre en dur laissait une
   rangée bancale dès que la vitrine a dépassé quatre vins (six → 4 + 2). */
.cuv-bottles{display:grid;grid-template-columns:repeat(var(--cuv-cols,4),1fr);gap:14px}
.cuv{background:var(--bg);border:1px solid var(--line);padding:14px 10px;text-align:center;transition:.25s ease}
.cuv:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Même piège `aspect-ratio` + `height:100%` que sur .card-img (voir le commentaire
   là-bas) : ici la boîte est plus haute que large, l'image n'était pas rognée mais
   restait bien trop petite, perdue dans son cadre gris. */
.cuv .cimg{background:var(--img-bg);aspect-ratio:.55;position:relative;display:flex;align-items:center;justify-content:center;padding:10px;margin-bottom:12px}
.cuv .cimg img{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;mix-blend-mode:multiply}
.cuv h4{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cuv .cs{font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin-top:5px}
.cuv .cs b{color:var(--cyan-deep)}
@media(max-width:920px){.cuv-grid{grid-template-columns:1fr}}
@media(max-width:560px){.cuv-bottles{grid-template-columns:1fr 1fr}}

/* ══ Builder ══ */
.builder{border-top:1px solid var(--line)}
.build-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);padding:10px}
.pick .th{width:44px;height:56px;background:var(--img-bg);flex:none;display:flex;align-items:center;justify-content:center;padding:4px}
.pick .th img{height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.pick .info{flex:1;min-width:0}
/* Audit 02/09 (A-19) : les noms longs (« Cabernet Franc Les Calcaires 2023 ») étaient coupés
   en « … » ; deux lignes maximum, jamais tronqué en une. */
.pick .nm{font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick .pr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stepper{display:flex;align-items:center;gap:2px;flex:none}
.stepper button{width:28px;height:28px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:15px;display:flex;align-items:center;justify-content:center}
.stepper button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan-deep)}
.stepper .q{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
@media(max-width:920px){.build-grid{grid-template-columns:1fr}.picker{order:2}}
@media(max-width:520px){.picker{grid-template-columns:1fr}}
.caja{position:sticky;top:106px;background:var(--panel);padding:28px}
.caja h3{font-size:17px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.caja .cap{font-size:11.5px;color:var(--muted);margin-bottom:20px;letter-spacing:.06em}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:22px}
/* Idem .card-img : sans position absolue, les bouteilles des 6 cases restaient
   minuscules au lieu de remplir la hauteur voulue. */
.slot{aspect-ratio:.62;background:var(--img-bg);position:relative;display:flex;align-items:center;justify-content:center;padding:3px;overflow:hidden}
.slot.empty{background:transparent;border:1px dashed var(--line)}
.slot img{position:absolute;left:3px;top:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;mix-blend-mode:multiply}
.count-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.count-row .big{font-size:38px;font-weight:300;font-variant-numeric:tabular-nums}
.count-row .of{color:var(--muted);font-size:12px;letter-spacing:.08em}
.progress{height:3px;background:var(--line);overflow:hidden;margin-bottom:20px}
.progress i{display:block;height:100%;background:var(--cyan);width:0;transition:width .35s ease}
.total-row{display:flex;align-items:baseline;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line);margin-bottom:18px}
.total-row .lab{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.total-row .amt{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.caja .btn{width:100%;justify-content:center}
.hint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;min-height:16px}

/* ══ Terroir ══ */
.thero{position:relative;overflow:hidden}
.thero img{width:100%;height:64vh;object-fit:cover}
.thero .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,4vw,44px);
  background:linear-gradient(180deg,transparent,rgba(8,12,16,.72));color:#fff}
.thero .cap h3{font-size:clamp(20px,3vw,34px);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.tstats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:44px 0}
.tstat{padding:24px;border-left:1px solid var(--line);text-align:center}
.tstat:first-child{border-left:0}
.tstat .n{font-size:clamp(24px,3vw,36px);font-weight:300;color:var(--cyan-deep);font-variant-numeric:tabular-nums}
.tstat .l{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:768px){.tstats{grid-template-columns:1fr 1fr}.tstat:nth-child(3){border-left:0}.tstat{border-top:1px solid var(--line)}.tstat:nth-child(-n+2){border-top:0}}
.ig-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.ig-card{background:var(--panel);padding:30px 26px}
.ig-card .alt{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-deep)}
.ig-card h4{font-size:19px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:10px 0 12px}
.ig-card p{color:var(--muted);font-size:12.5px;margin:0;line-height:1.75}
@media(max-width:820px){.ig-grid{grid-template-columns:1fr}}
.terroir-figs{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:44px}
.tfig{position:relative;overflow:hidden;margin:0}
.tfig img{width:100%;height:100%;object-fit:cover}
.tfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:11px;
  letter-spacing:.06em;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,12,16,.8))}
@media(max-width:768px){.terroir-figs{grid-template-columns:1fr}}

/* ══ Cine ══ */
.cine{background:var(--panel)}
.cine-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,60px);align-items:center}
.cine-copy h2{font-size:clamp(22px,3.2vw,36px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:14px 0 20px}
.cine-copy p{color:var(--muted);font-size:14px;margin:0 0 16px;line-height:1.8}
.cine-copy .film{font-style:italic}
.video-frame{box-shadow:var(--shadow);background:#000}
.video-frame video{display:block;width:100%;height:auto}
@media(max-width:880px){.cine-grid{grid-template-columns:1fr}}

/* ══ Sustain ══ */
.sustain-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center}
.sustain-grid .big-n{font-size:clamp(64px,8vw,110px);font-weight:200;color:var(--cyan-deep);line-height:1}
.sustain-grid p{color:var(--muted);font-size:14px;max-width:52ch;line-height:1.8;margin:14px 0 0}
.sustain-grid b{color:var(--ink);font-weight:600}
.sustain-fig{height:300px;overflow:hidden;margin:0}
.sustain-fig img{width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.sustain-grid{grid-template-columns:1fr}}

/* ══ Contact ══ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:center}
.contact-card{background:var(--cyan);color:#fff;padding:40px;display:flex;flex-direction:column;gap:18px}
.c-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:14px}
.c-row:last-child{border-bottom:0;padding-bottom:0}
.c-row .k{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.c-row .v{font-size:14px;font-weight:600}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ══ Big CTA band ══ */
/* Passée en CLAIR (Vivien 07/08, après le « moins de sombre » de Quentin) :
   bande blanche bordée, le bouton cyan porte le contraste. */
.cta-band{background:var(--bg);color:var(--ink);text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band h2{font-size:clamp(26px,4.4vw,52px);font-weight:300;letter-spacing:.16em;text-transform:uppercase}
.cta-band h2 .flip{font-weight:600}
.cta-band p{color:var(--muted);font-size:13px;letter-spacing:.1em;margin:18px 0 32px}
/* « que armás vos » : l'argument qui distingue la boutique doit ressortir */
.cta-band p b{color:var(--cyan-deep);font-weight:600}

/* ══ Footer ══ */
.preview-tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-deep);border:1px solid var(--line);padding:5px 11px}


/* ══ Footer — BLANC, comme le pied du WordPress (Quentin 06/08), avec le fil
   Instagram. Tokens de thème : blanc en clair, il suit --bg en sombre. ══ */
footer{background:var(--bg);color:var(--body);padding:0 0 30px;margin-top:0;
  border-top:1px solid var(--line)}

/* Rappel de l'offre, dernière chose lue avant de partir */
.foot-promise{border-bottom:1px solid var(--line)}
.foot-promise .wrap{display:flex;gap:14px 44px;flex-wrap:wrap;justify-content:center;
  padding:20px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.foot-promise span{position:relative}
.foot-promise span:first-child{color:var(--cyan-deep)}

/* Rangée façon WordPress : marque + email | 3 photos IG | carte dernier post */
.foot-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:44px;padding:52px 0 40px;align-items:start}
.foot-brand img{height:52px;width:auto;margin-bottom:18px;filter:var(--logo-filter)}
.foot-mail{display:block;font-size:14px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin:2px 0 24px}
.foot-mail:hover{color:var(--cyan-deep)}
.foot-sep{border:0;border-top:2px solid var(--line);margin:0 0 16px}
.foot-copy-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;font-size:12px;color:var(--muted)}
.foot-icons{display:flex;gap:14px}
.foot-icons a{color:var(--body);display:inline-flex;transition:color .18s}
.foot-icons a:hover{color:var(--cyan-deep)}

/* Carte « dernier post » (colonne de droite du WP) */
.foot-igpost{display:block;background:var(--panel);padding:18px 20px;
  color:var(--body);font-size:12.5px;line-height:1.75}
.foot-igpost:hover .fp-head b{text-decoration:underline}
.foot-igpost p{margin:0}
.fp-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fp-head img{width:42px;height:42px;border-radius:50%;object-fit:contain;
  background:#fff;border:1px solid var(--line);padding:4px}
.fp-head b{display:block;color:var(--cyan-deep);font-size:12px;letter-spacing:.06em}
.fp-head i{font-style:normal;color:var(--muted);font-size:11px}

.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;
  padding:0 0 40px;border-top:1px solid var(--line);padding-top:34px}
.foot-col h5{font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
.foot-col a,.foot-col span{display:block;color:var(--body);font-size:12.5px;
  margin-bottom:11px;letter-spacing:.02em;transition:color .18s}
.foot-col a:hover{color:var(--cyan-deep)}
.foot-col span{color:var(--muted)}

/* Fil Instagram du pied de page : 3 photos en rangée, comme le WordPress.
   Photos locales de la bodega en attendant la connexion Meta ; loadIgFeed()
   les remplace par le vrai fil dès que l'API répond. */
.foot-ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.foot-ig-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--panel)}
.foot-ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.foot-ig-grid a:hover img{transform:scale(1.05)}

/* Rail social flottant du WordPress (bloc « soci ») — grands écrans seulement,
   sinon il chevauche le contenu (maxw 1240 + marges). */
.soc-rail{position:fixed;left:18px;top:46%;transform:translateY(-50%);
  display:none;flex-direction:column;gap:16px;z-index:40}
.soc-rail a{color:var(--muted);transition:color .18s}
.soc-rail a:hover{color:var(--cyan-deep)}
@media (min-width:1380px){.soc-rail{display:flex}}

/* Ligne légale : obligations visibles, mais pas au centre de l'attention */
.foot-legalbar{border-top:1px solid var(--line);padding:22px 0;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot-legal-links{display:flex;gap:26px;flex-wrap:wrap}
.foot-legal-links a{font-size:11.5px;color:var(--body);
  text-decoration:underline;text-underline-offset:3px}
.foot-legal-links a:hover{color:var(--ink)}
.foot-arrep{border:1px solid var(--line);border-radius:2px;padding:7px 14px;
  text-decoration:none!important;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.foot-arrep:hover{border-color:var(--cyan-deep);color:var(--cyan-deep)!important}
.foot-ley{margin:0;font-size:11px;color:var(--muted);letter-spacing:.03em}
.foot-ley strong{color:var(--ink);font-weight:600}

.foot-bottom{border-top:1px solid var(--line);padding-top:20px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.05em;color:var(--muted)}
.foot-fiscal{display:block;font-size:10.5px;color:var(--muted)}

@media (max-width:1080px){
  .foot-top{grid-template-columns:1fr;gap:34px;padding:40px 0 34px}
}
@media (max-width:860px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .foot-ig-grid{gap:8px}
  .foot-promise .wrap{gap:10px 26px;font-size:10px;padding:16px 0}
  .foot-legalbar{padding:18px 0}
}

/* ══ Toast ══ */
/* Sans max-width le message le plus long faisait ~303px sur un ecran de 320, coupe
   des deux cotes ; sans safe-area il passait sous la barre d outils iOS, invisible
   au moment precis de l ajout au panier. */
#toast{max-width:calc(100vw - 32px);position:fixed;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,20px);
  background:var(--ink);color:var(--bg);padding:13px 24px;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.3s ease;z-index:80}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ══ Pages légales (terminos/privacidad/devoluciones/envios) ══ */
.legal-main{max-width:820px;margin:0 auto;padding:150px 28px 80px}
.legal-main .kicker{display:block;margin-bottom:18px}
.legal-title{font-size:clamp(34px,5.5vw,58px);font-weight:300;letter-spacing:.12em;text-transform:uppercase;line-height:1.05;margin-bottom:8px}
.legal-title .flip{font-weight:500}
.legal-updated{font-size:12px;color:var(--muted);margin:14px 0 44px}
.legal-main h2{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line)}
.legal-main h2 .n{color:var(--cyan-deep);margin-right:10px}
.legal-main p,.legal-main li{font-size:14px;color:var(--muted);line-height:1.85;margin:0 0 12px}
.legal-main li{margin-bottom:6px}
.legal-main strong{color:var(--ink);font-weight:600}
.legal-main a{color:var(--cyan-deep);border-bottom:1px solid transparent}
.legal-main a:hover{border-bottom-color:var(--cyan-deep)}
.legal-note{background:var(--panel);border-left:3px solid var(--cyan);padding:16px 20px;font-size:13.5px;margin:20px 0}
.legal-note p{margin:0}
/* Botón de arrepentimiento (Res. 424/2020 : visible, directo, sin registro) */
.btn-arrepentimiento{display:block;max-width:460px;margin:30px auto;background:var(--ink);color:var(--bg);text-align:center;padding:18px 30px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);transition:.2s}
.btn-arrepentimiento:hover{background:transparent;color:var(--ink)}
button.btn-arrepentimiento{width:100%;cursor:pointer;font-family:inherit}
button.btn-arrepentimiento:disabled{opacity:.55;cursor:default}

/* Formulaire de révocation (Res. 424/2020). Sobre à dessein : c'est une démarche
   administrative, pas une vente — rien ne doit décourager ni ralentir. */
.arr-form{max-width:620px;margin:26px auto 8px;padding:24px;background:var(--panel);border:1px solid var(--line)}
.arr-form label{display:block;margin:0 0 14px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.arr-form .req{color:#B0413A}
.arr-form .opt{font-weight:400;text-transform:none;letter-spacing:.02em;font-size:11px;opacity:.8}
.arr-form input,.arr-form textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;
  font:inherit;font-size:14px;letter-spacing:normal;text-transform:none;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:2px}
.arr-form input:focus,.arr-form textarea:focus{outline:2px solid var(--cyan-deep);outline-offset:1px;border-color:transparent}
.arr-form textarea{resize:vertical;min-height:74px}
.arr-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:620px){ .arr-row{grid-template-columns:1fr} }
.arr-msg{margin:12px 0 0;font-size:13px;line-height:1.65;text-align:center;min-height:1.2em}
.arr-msg.ok{color:var(--cyan-deep);font-weight:600}
.arr-msg.err{color:#B0413A}
/* Switch de langue. Les blocs [data-lang] n'existent qu'en ES et EN (checkout,
   pages légales — la tienda reste bilingue, décision Quentin 04/08) : en « fr »
   on montre l'espagnol, sinon les deux versions s'empileraient. */
html[lang="es"] [data-lang="en"]{display:none!important}
html[lang="en"] [data-lang="es"]{display:none!important}
html[lang="fr"] [data-lang="en"]{display:none!important}
/* Header léger des pages légales */
.legal-hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.legal-hdr .in{max-width:820px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:78px;padding:0 28px}
.legal-hdr img{height:38px;width:auto;filter:var(--logo-filter)}
.legal-foot{border-top:1px solid var(--line);padding:34px 28px;text-align:center;font-size:11.5px;color:var(--muted);line-height:2}

/* ══ Footer légal (index) ══ */

/* ══ Produit agotado ══ */
.card.out .card-img{opacity:.45;filter:grayscale(.6)}
.card.out .add{opacity:.35;cursor:not-allowed}

/* ══ Bandeau « registrate y obtené descuento » ══ */
.nl-band{background:var(--panel);border-top:1px solid var(--line)}
.nl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center;padding:clamp(40px,6vw,70px) 0}
@media(max-width:820px){.nl-grid{grid-template-columns:1fr}}
.nl-grid h2{font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:.02em;margin:10px 0 8px}
.nl-grid h2 b{color:var(--cyan-deep);font-weight:600}
.nl-grid p{color:var(--muted);font-size:13.5px;margin:0;max-width:48ch}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input[type=email]{flex:1;min-width:220px;border:1px solid var(--line);background:var(--bg);padding:14px 15px;font:inherit;font-size:16px;color:var(--ink)}
.nl-form input[type=email]:focus{outline:2px solid var(--cyan-deep)}
.nl-msg{width:100%;font-size:13px;min-height:18px;margin:4px 0 0}
.nl-msg.ok{color:var(--cyan-deep);font-weight:500}
.nl-msg.err{color:#B3372F}

/* ═══════════ FICHE D'UN VIN (router.php → vue « vino ») ═══════════ */
.vino-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.vino-img{background:var(--paper,#F7F6F3);border:1px solid var(--line,#E6E4DF);padding:26px}
.vino-img img{width:100%;height:auto;display:block;object-fit:contain}
.vino-specs{margin:0 0 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px 26px}
.vino-specs .vspec{border-top:1px solid var(--line,#E6E4DF);padding-top:11px}
.vino-specs dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.vino-specs dd{margin:0;font-size:1.02rem;font-weight:500}
.vino-price{font-size:clamp(1.5rem,1.1rem+1.2vw,2rem);margin-bottom:24px}
.vino-price small{display:block;font-size:.76rem;font-weight:400;color:var(--muted);letter-spacing:.03em;margin-top:5px}
.vino-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:16px}
.vino-note{font-size:.84rem;color:var(--muted);margin:0}
@media (max-width:820px){
  .vino-grid{grid-template-columns:1fr}
  .vino-img{max-width:330px;margin:0 auto}
}

/* Cibles tactiles — au téléphone, tout ce qui se touche fait au moins 44 px.
   L'audit relevait des cibles de 19 à 30 px (panier, langue, menu, steppers) :
   c'est exactement le défaut du WordPress qu'on nous demande de corriger. */
@media (max-width:1080px){
  #burger{min-width:44px;min-height:44px;font-size:24px;display:flex;align-items:center;justify-content:center}
  .cart-ico{min-width:44px;min-height:44px;justify-content:flex-end}
  .lang-switch button,.gate-lang button{min-height:44px;padding:0 14px}
  .nav-lang{min-height:44px}
  .foot-social a,.foot-col a,.foot-legal-links a{display:inline-flex;align-items:center;min-height:44px}
  .stepper button{min-width:44px;min-height:44px;font-size:17px}
  .card .add{min-width:44px;min-height:44px}
  .submenu a{min-height:44px;display:flex;align-items:center}
}

/* Tiroir fermé : neutralisé */
@media (max-width:1080px){
  /* Fermé : invisible, intouchable, et sans influence sur la largeur du document */
  /* Fermé : RETIRÉ DU FLUX. visibility seule laissait une emprise qui élargissait
     la page (le navigateur dézoomait pour compenser : 445 px au lieu de 390).
     L ancien code faisait display:none pour cette raison, on la retrouve. */
  .nav-links{display:none;overflow-x:hidden}
  .nav-links.open{display:flex;transform:none}
  /* Le min-width de 430 px du sous-menu large est une contrainte de BUREAU */
  .submenu,.submenu-wide{min-width:0;width:100%;columns:1;box-sizing:border-box}
  .submenu a,.submenu .sub-h{max-width:100%;box-sizing:border-box}
}

/* Constructeur au telephone */
@media (max-width:1080px){
  /* min-width:auto empechait les lignes de se comprimer : la page passait a 417 px
     et le navigateur dezoomait tout le site pour compenser. */
  .build-grid{grid-template-columns:1fr!important;gap:26px}
  .picker,.pick,.caja{min-width:0}
  .pick{flex-wrap:wrap;row-gap:8px;padding:12px 10px}
  .pick .info{min-width:0}
  .pick .stepper{margin-left:auto}
  .caja{position:static!important;width:auto}
}

/* Le lien de gestion des cookies est injecte par consent.js : il doit respecter
   la meme cible tactile de 44 px que le reste du footer. */
#mpc-manage-cookies{display:inline-flex;align-items:center;min-height:44px}

/* ══ Telephone etroit — place EN FIN DE FICHIER a dessein ══
   Une media query n ajoute aucun poids de specificite : place plus haut, ce bloc
   etait battu par les regles de base declarees plus bas (.cards ligne ~361). C est
   le meme piege de cascade qui avait rendu le menu mobile incliquable et une passe
   de tokens inerte. Ordre = decision.
   Le dernier breakpoint du fichier etait a 520px : entre 320 et 520 aucune regle ne
   changeait, donc toutes les clamp() restaient sur leur plancher, calibre pour ~600px
   — un iPhone SE recevait la typographie d un ecran de 600px. */
@media (max-width:547px){
  /* La grille auto-fill tombait a UNE colonne (il faut 492px utiles pour deux) :
     15 cartes de 456px = ~7 540px, soit 58 % de la longueur de la page tienda. */
  /* minmax(0,…) — sans lui, le min-content d'une carte (170 px) imposait 352 px à la
     grille et 408 px au conteneur : à 320 px, Chromium dézoomait toute la page, le
     bouton du menu se retrouvait hors écran [336→380] et 8 boutons « + » sur 18
     n'avaient plus que 3 px touchables (mesuré 26/08). Même correctif que les pages
     terroir (voir .ig-head plus bas) — il n'avait pas été propagé ici. */
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card h4{font-size:14px}
  .card .sub{font-size:11px}
  .price{font-size:15px}
  .price small{display:block;font-size:9.5px}
  /* Le nom du vin etait tronque a ~9 caracteres : deux « Malbec » devenaient
     indistinguables dans le constructeur de caisse. */
  .pick .nm{white-space:normal;line-height:1.3}
}
@media (max-width:430px){
  .title-xl{font-size:30px;letter-spacing:.08em}
  .legal-title{font-size:26px}
  .title-xl,.legal-title,h1,h2,h3{overflow-wrap:anywhere}
}

/* Formulaire de contact — champs a 16px pour ne pas declencher le zoom iOS. */
.hpx{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, puis posé en haut à
   gauche par-dessus tout — y compris le voile d'âge (z-index 100) et l'en-tête. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--cyan-deep);color:#fff;padding:12px 20px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none}
.skip-link:focus{left:8px;top:8px}

/* L'adresse de contact se coupait en « info@mundoreveswines.co » + « m » orphelin :
   il lui faut 168 px et la colonne en fait 159. break-word coupait au caractère
   près, n'importe où. On interdit la coupure arbitraire ; le <wbr> posé après le
   « @ » dans le HTML donne au navigateur le seul point de coupure acceptable. */
.foot-col a[href^="mailto:"]{overflow-wrap:normal;word-break:normal}
/* Formulaire façon WordPress : libellé fin au-dessus, champ bordé fin pleine
   largeur, bouton jaune. Chez eux la colonne fait ~740 px sur 1400. */
.co-head .side{min-height:clamp(420px,64vh,720px);justify-content:flex-end;align-items:flex-start;
  text-align:left;padding-bottom:clamp(40px,8vh,90px)}
.co-head .title-xl{font-weight:100;letter-spacing:.02em;color:#8B8F95;
  font-size:clamp(40px,5.2vw,72px)}
.contact-body{padding-top:clamp(56px,9vw,120px)}
.cf-wp{max-width:740px}
.cf-wp .cf-row label{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--body);margin-bottom:7px}
.cf-wp .cf-row input,.cf-wp .cf-row textarea{border:1px solid #D6D6D6;border-radius:2px;
  padding:11px 14px;font-size:14px;background:var(--bg)}
.cf-wp .btn-amar{margin-top:8px}
.co-direct{margin:30px 0 0;max-width:740px;font-size:13.5px;line-height:1.8;color:var(--muted)}
.co-direct a{color:var(--cyan-deep)}
.cf-row{margin-bottom:14px}
.cf-row label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cf-row input,.cf-row textarea{width:100%;border:1px solid var(--line);background:var(--bg);
  padding:12px 13px;font:inherit;font-size:16px;color:var(--ink);border-radius:0;
  box-sizing:border-box;resize:vertical}
.cf-row input:focus,.cf-row textarea:focus{outline:2px solid var(--cyan-deep)}
#cf-send{min-height:44px}

/* ══ Apercu du vin au survol / au tap (constructeur de caisse) ══
   La vignette du constructeur fait 44 px : impossible d y lire l etiquette, le cepage
   ou le millesime, qui sont pourtant ce sur quoi on choisit une bouteille. */
.pick[data-peek]{cursor:pointer}
.pick[data-peek]:hover,.pick[data-peek]:focus-visible{border-color:var(--cyan-deep)}
#winePeek{position:fixed;z-index:80;width:300px;background:var(--bg);
  border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
#winePeek.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#winePeek .pk-img{background:var(--img-bg);padding:18px 0;text-align:center}
#winePeek .pk-img img{height:260px;width:auto;margin:0 auto;object-fit:contain}
#winePeek .pk-body{padding:16px 18px 18px}
#winePeek .pk-range{font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan-deep)}
#winePeek h4{font-size:16px;font-weight:500;margin:6px 0 12px;color:var(--ink);line-height:1.25}
#winePeek .pk-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 12px}
#winePeek .pk-spec dt{font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0}
#winePeek .pk-spec dd{margin:2px 0 0;font-size:12.5px;color:var(--body)}
#winePeek .pk-desc{font-size:12.5px;line-height:1.65;color:var(--body);margin:0 0 12px}
#winePeek .pk-price{font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
#winePeek .pk-price s{font-size:.7em;font-weight:500;color:var(--muted)}
#winePeek .pk-price small{font-size:11px;font-weight:400;color:var(--muted)}
#winePeek .pk-more{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-deep);
  border-bottom:1px solid currentColor;padding-bottom:2px}
/* Bouton de fermeture : au doigt il n existe pas de « sortie de survol ». */
#winePeek .pk-x{position:absolute;top:6px;right:6px;width:40px;height:40px;
  background:none;border:0;font-size:24px;line-height:1;color:var(--muted);display:none}
/* Telephone : feuille centree plutot qu une bulle flottante. */
#winePeek.is-sheet{left:50%!important;top:50%!important;
  transform:translate(-50%,-46%);width:min(320px,calc(100vw - 32px));
  max-height:86vh;overflow:auto}
#winePeek.is-sheet.on{transform:translate(-50%,-50%)}
#winePeek.is-sheet .pk-x{display:block}
#winePeek.is-sheet .pk-img img{height:200px}
@media (prefers-reduced-motion:reduce){#winePeek{transition:none}}

/* ══ Fenetre « caja agregada » : propose pagar ou seguir comprando ══ */
#cartGo{position:fixed;inset:0;z-index:90;background:rgba(29,29,31,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
#cartGo.on{opacity:1;visibility:visible}
#cartGo .cg-card{position:relative;background:var(--bg);max-width:420px;width:100%;
  border:1px solid var(--line);box-shadow:var(--shadow);
  padding:38px 32px 30px;text-align:center;
  transform:translateY(14px);transition:transform .22s ease}
#cartGo.on .cg-card{transform:none}
#cartGo .cg-check{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:var(--cyan);color:var(--cyan-ink);font-size:24px;line-height:52px}
#cartGo h4{font-size:19px;font-weight:500;color:var(--ink);margin:0 0 6px}
#cartGo .cg-sum{font-size:13px;color:var(--body);margin:0 0 22px;font-variant-numeric:tabular-nums}
#cartGo .cg-actions{display:grid;gap:10px}
#cartGo .cg-actions .btn{width:100%;justify-content:center}
#cartGo .cg-x{position:absolute;top:6px;right:6px;width:40px;height:40px;
  background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
@media (prefers-reduced-motion:reduce){#cartGo,#cartGo .cg-card{transition:none}}

/* ══ Pop-up « Registrate y obtené 20 % » (Quentin 25/08 ; 20 % confirmé 26/08) ══
   Même famille que #cartGo : voile, carte, fermeture ×/Échap/fond. z-index sous
   #cartGo (90) : si les deux se croisent, c'est l'achat qui passe devant. */
/* `flex-start` + défilement (audit 26/08) : centrée, la carte de 497 px débordait de
   110 px en haut ET en bas dès que le clavier virtuel s'ouvrait à 320/360 px — le
   bouton « Quiero mi descuento » passait 3 px sous le bord et la croix 103 px
   au-dessus, sans rien pour défiler (le verrou de défilement du fond fige aussi la
   modale). Résultat : ni envoyer, ni fermer. `margin:auto` garde le centrage quand
   il y a la place. */
#nlPop{position:fixed;inset:0;z-index:89;background:rgba(29,29,31,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
#nlPop.on{opacity:1;visibility:visible}
#nlPop .np-card{position:relative;background:var(--bg);max-width:480px;width:100%;
  margin:auto;   /* recentre quand il y a la place ; sinon la carte défile (voir #nlPop) */
  border:1px solid var(--line);box-shadow:var(--shadow);padding:40px 34px 24px;
  transform:translateY(14px);transition:transform .22s ease}
#nlPop.on .np-card{transform:none}
#nlPop h3{font-size:clamp(20px,2.6vw,26px);font-weight:500;letter-spacing:.02em;margin:10px 0 8px;color:var(--ink)}
#nlPop h3 b{color:var(--cyan-deep);font-weight:600}
#nlPop p{color:var(--muted);font-size:13.5px;margin:0 0 18px}
#nlPop .nl-form{position:relative}
#nlPop .nl-form .nl-msg{margin-bottom:0}
#nlPop .np-x{position:absolute;top:6px;right:6px;width:44px;height:44px;
  background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
#nlPop .np-later{display:block;margin:10px auto 0;padding:10px 14px;min-height:44px;
  background:none;border:0;font:inherit;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);cursor:pointer}
#nlPop .np-later:hover,#nlPop .np-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){#nlPop,#nlPop .np-card{transition:none}}

/* ══ Zoom leger au survol des panneaux — repris du WordPress ══
   Sur le WP, survoler le bloc cyan agrandit doucement la photo en filigrane. On
   applique le meme geste aux deux moities du split, pour que la page reste vivante
   sans distraire. transform seul : c est compositeur-friendly, aucun recalcul de
   mise en page. En fin de fichier, sinon les regles .split declarees plus haut
   gagneraient la cascade. */
.split .cpanel .ghost img,
.split .photo img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.split .cpanel:hover .ghost img,
.split .photo:hover img{transform:scale(1.06)}
/* Le filigrane s eclaircit un peu : le WP fait ressortir la photo au survol. */
.split .cpanel .ghost{transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.split .cpanel:hover .ghost{opacity:.42}
/* Meme geste sur les cartes de gamme de l accueil et les figures de terroir. */
.line-card .lc-img img,.tfig img,.cuv .cimg img{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.line-card:hover .lc-img img,.tfig:hover img,.cuv:hover .cimg img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .split .cpanel .ghost img,.split .photo img,.line-card .lc-img img,.tfig img,
  .cuv .cimg img,.split .cpanel .ghost{transition:none}
  .split .cpanel:hover .ghost img,.split .photo:hover img,
  .line-card:hover .lc-img img,.tfig:hover img,.cuv:hover .cimg img{transform:none}
}

/* Phrase-manifeste : traitée comme sur le WordPress — grande, cyan, centrée,
   la partie forte en évidence. C'est le positionnement de la maison. */
.manifesto{max-width:38ch;margin:0 auto;text-align:center;
  font-size:clamp(18px,2.1vw,26px);font-weight:300;line-height:1.6;
  color:var(--cyan-deep);letter-spacing:.005em}
.manifesto em{font-style:normal;font-weight:600;color:var(--ink)}
.manifesto-inline{max-width:none;text-align:left;margin:26px 0 0;
  font-size:clamp(16px,1.6vw,20px);padding-left:18px;
  border-left:2px solid var(--cyan)}
/* Logo de gamme du WordPress, au-dessus du nom sur les cartes de l'accueil. */
.lc-logo{height:64px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.95}
@media (max-width:430px){.manifesto{font-size:17px}.lc-logo{height:52px}}

/* L email info@mundoreveswines.com (25 caracteres insecables) debordait sur la
   colonne « Legales » d a cote : rien dans le pied de page n autorisait la coupure.
   min-width:0 est indispensable sur une cellule de grille, sinon sa largeur minimale
   reste celle de son contenu le plus long et la colonne refuse de se comprimer. */
.foot-col,.foot-cols>*{min-width:0}
.foot-col a,.foot-col p,.foot-col span{overflow-wrap:anywhere;word-break:break-word}

/* Fiche technique PDF : discrete mais reperable — c est le lien que cherche un
   caviste ou un importateur. */
.vino-ficha{display:inline-block;margin:6px 0 18px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-deep);
  border-bottom:1px solid currentColor;padding-bottom:3px;min-height:24px}
.vino-ficha:hover{color:var(--ink)}

/* ══ Bascule de langue ══
   Le WordPress met un lien texte « ENGLISH » au milieu du menu. Sorti de la nav :
   une pastille ES|EN dans le bloc de droite, ou la langue courante est en evidence
   et l autre attend. Cible de 44 px conservee. */
.lang-pill{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:0 4px;min-height:44px;cursor:pointer;font:inherit;
  font-size:10.5px;font-weight:600;letter-spacing:.14em}
.lang-pill .lp-on{color:var(--ink)}
.lang-pill .lp-off{color:var(--muted);transition:color .2s}
.lang-pill .lp-sep{width:1px;height:11px;background:var(--line)}
.lang-pill:hover .lp-off{color:var(--cyan-deep)}
/* Sur une page anglaise, on inverse : la langue courante est toujours a gauche. */
html[lang="en"] .lang-pill .lp-on{color:var(--muted)}
html[lang="en"] .lang-pill .lp-off{color:var(--ink)}
html[lang="en"] .lang-pill:hover .lp-on{color:var(--cyan-deep)}
html[lang="en"] .lang-pill:hover .lp-off{color:var(--ink)}
@media (max-width:1080px){.lang-pill{order:-1;margin-right:2px}}

/* Panier : cabas au trait fin plutot que le caddie en aplat, et le compteur devient
   une pastille cyan lisible au lieu d un chiffre flottant. */
.cart-ico svg{transition:transform .2s ease}
.cart-ico:hover svg{transform:translateY(-1px)}
.cart-ico b{min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--cyan);color:#08181D;font-size:10px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cart-ico b:empty,.cart-ico b[data-zero="1"]{background:none;color:var(--muted);font-weight:600}

/* ══ Tienda commerciale ══
   Avant : un intitule de gamme en petit gris, puis une grille plate. Rien ne
   hierarchisait, et les logos de gamme du WordPress ne servaient nulle part. */
/* Quentin 28/08 : « que el logo ocupe todo el espacio de la barra, o al menos el mismo
   espacio que las dos líneas de texto ». La barre prend une hauteur fixe et le logo
   (fichier détouré, cf. RANGE_LOGO dans index.html) la remplit à 8 px près ; le bloc
   texte, plus bas que lui, se centre à côté. Hauteur par gamme : les logos n'ont pas
   les mêmes proportions (ANM est vertical). */
/* Quentin 15/09 : « rellenar únicamente el fondo detrás del logo (rectángulo) ; para el
   resto del bandeau, un marco discreto en azul, amarillo o rojo sin rellenar el fondo ».
   La barre n'a donc plus de fond : un filet de 2 px à la couleur de la gamme (--rh, posé
   par .range-mr/.range-lpv/.range-anm plus bas), et seul le logo garde son rectangle
   plein. Le texte passe en encre, lisible sur le fond de page. */
/* Quentin 21/09 : « fond du cadre blanc blanc, non crème » — le cadre ne prend plus la
   couleur de la page derrière lui, il est blanc, pour les trois gammes. */
.range-hd{--rh:var(--cyan);display:flex;align-items:center;gap:26px;background:#fff;
  color:var(--ink);padding:0 26px 0 0;min-height:104px;margin:0 0 22px;position:relative;overflow:hidden;
  border:2px solid var(--rh)}
/* Quentin 28/08 (« Modif ») : le logo doit occuper toute la hauteur de la barre — le
   rectangle (.rh-logo-box) s'étire sur les 100 px (104 − 2 × 2 px de filet) et le
   lettrage fait 84 px. Le rectangle est un span séparé : un `filter` sur l'img
   noircirait aussi son fond. */
/* Quentin 21/09 : « que la longueur du cadre rouge soit équivalente aux deux autres » — le
   rectangle a une largeur fixe pour les trois gammes (avant : la largeur du logo, et le
   lettrage ANM, étroit, donnait un rectangle rouge plus court). Le logo est centré dedans. */
.rh-logo-box{flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;
  width:214px;padding:8px 14px;background:var(--rh);position:relative;z-index:1}
.rh-logo{height:84px;width:auto;max-width:100%;object-fit:contain;flex:none;filter:brightness(0) invert(1);display:block}
.rh-logo--lpv{height:80px}
.rh-logo--anm{height:84px}
.rh-txt{flex:1;min-width:0;position:relative;z-index:1}
.rh-txt h3{font-size:clamp(16px,2vw,21px);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);margin:0}
.rh-txt p{margin:4px 0 0;font-size:12.5px;color:var(--body);line-height:1.5}
.rh-count{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);position:relative;z-index:1}

/* Filtre par couleur : les 5 types etaient dans les donnees et inexploites. */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;
  border:1px solid var(--line);background:var(--bg);font:inherit;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--body);
  cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.chip:hover{border-color:var(--cyan-deep);color:var(--cyan-deep)}
.chip.on{background:var(--cyan-ink);border-color:var(--cyan-ink);color:#fff}
.chip .dot{width:7px;height:7px;border-radius:50%}
.cat-empty{color:var(--muted);font-size:14px;padding:30px 0}

/* Badges (Quentin 04/09 : « badge plus voyant » + badge Novedad). Empilés en haut à gauche
   de la photo : Novedad (rouge Pantone, blanc), −X % (jaune sur encre) et le badge éditorial
   du panneau (jaune Pantone, encre). Avant : 9,5 px blanc sur encre, un timbre-poste. */
.card-img{position:relative}
.card-badges{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px;pointer-events:none}
.card-badge{display:inline-block;background:var(--yellow);color:var(--yellow-ink);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:7px 10px;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.card-badge--nov{background:var(--g-anm);color:#fff}
.card-badge--off{background:var(--ink);color:var(--yellow)}
.card-save{display:inline-block;margin:2px 0 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#B0413A}

@media (max-width:547px){
  .range-hd{gap:16px;padding:0 16px 0 0;min-height:78px}
  .rh-logo-box{width:150px;padding:6px 10px}
  .rh-logo{height:62px}
  .rh-logo--lpv{height:58px}
  .rh-logo--anm{height:62px}
  /* Au téléphone, le logo porte déjà le nom et la baseline enflait la barre à 128 px
     (4 lignes) : on ne garde que le titre. */
  .rh-txt p{display:none}
  .rh-count{display:none}
  .chip{min-height:36px;padding:0 12px;font-size:10px}
}

/* ══ Pages I.G. ══ Contenu integral du WordPress + carte de l abanico. */
.ig-alt{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-deep);margin:14px 0 0}
.ig-map{margin:0 0 34px;background:var(--img-bg)}
.ig-map img{width:100%;height:auto;display:block}
.ig-text{max-width:62ch;margin:0 auto}
.ig-text p{font-size:15px;line-height:1.9;color:var(--body);margin:0 0 18px}
.ig-h2{max-width:62ch;margin:44px auto 20px;font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.ig-wines{max-width:62ch;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.ig-wine{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);background:var(--bg);min-height:64px;
  transition:border-color .18s}
.ig-wine:hover{border-color:var(--cyan-deep)}
.ig-wine img{width:26px;height:52px;object-fit:contain;flex:none}
.ig-wine span{font-size:12px;line-height:1.4;color:var(--body)}
.ig-cta{max-width:62ch;margin:40px auto 0;display:flex;align-items:center;
  gap:22px;flex-wrap:wrap}
.ig-back{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.ig-back:hover{color:var(--cyan-deep)}

/* ══ Caisses pretes a acheter, en tete de boutique ══
   Composer un panachage de 6 parmi 15 etiquettes inconnues est une demande lourde
   pour un premier achat. Les caisses fermees passent devant. */
.packs{margin:0 0 46px}
.packs-hd{margin:0 0 20px}
.packs-hd h3{font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);margin:0}
.packs-hd p{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* ══ Bloc Instagram ══ */
.ig-band{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.igb-head h2{font-size:clamp(22px,2.6vw,32px);font-weight:300;margin:8px 0 10px;color:var(--ink)}
.igb-head p{font-size:14px;color:var(--body);margin:0 0 22px;max-width:34ch;line-height:1.7}
.igb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.igb-grid a{display:block;aspect-ratio:1;overflow:hidden;background:var(--img-bg)}
.igb-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.igb-grid a:hover img{transform:scale(1.06)}
.igb-empty{grid-column:1/-1;font-size:13px;color:var(--muted);padding:22px 0}
@media(max-width:820px){.ig-band{grid-template-columns:1fr}}

/* Le parent « Vinos » n est plus un lien : il ouvre le sous-menu. */
.sub-parent{background:none;border:0;font:inherit;cursor:pointer;padding:6px 0;
  border-bottom:2px solid transparent;color:var(--body);font-size:11.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  /* même .4s que les autres entrées : sans elle « VINOS » changeait de couleur
     d'un coup pendant que ses voisines se dégradaient en douceur */
  transition:color .4s ease,border-color .4s ease}
.sub-parent:hover{color:var(--cyan-deep)}
@media (max-width:1080px){.sub-parent{display:block;width:100%;text-align:left;
  padding:16px 2px;font-size:13px;min-height:44px}}

/* ══ Bandeau de tête illustré ══
   Il était un aplat gris occupant un demi-écran, sans rien dedans. Photo +
   voile sombre + titre blanc : la page de vente commence enfin par une image.
   En fin de fichier, sinon les règles .page-head déclarées plus haut gagnent. */
.page-head .side.has-img{position:relative;background:var(--cyan-ink);overflow:hidden}
.page-head .side.has-img::before{content:"";position:absolute;inset:0;
  background-image:var(--head-img);background-size:cover;background-position:center;
  transform:scale(1.02);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
/* Audit perf 02/09 (PERF-08) : cette image EST le LCP de /tienda/ sur téléphone (2 744 ms).
   Sous 900 px la colonne ne dépasse jamais 900 px de large : la variante 800 (30 Ko au lieu
   de 78) suffit. `--head-img-sm` est posé à côté de `--head-img` dans le HTML. */
@media (max-width:900px){
  .page-head .side.has-img::before{background-image:var(--head-img-sm,var(--head-img))}
}
.page-head .side.has-img:hover::before{transform:scale(1.06)}
/* Voile : le titre est en 44 px thin, il lui faut un fond franc pour rester
   lisible — le contraste avait déjà coûté cher sur ce site. */
.page-head .side.has-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,24,29,.28),rgba(8,24,29,.72))}
.page-head .side.has-img > *{position:relative;z-index:2}
.page-head .side.has-img .title-xl{color:#fff}
.page-head .side.has-img .title-xl .l1{color:rgba(255,255,255,.62)}
.page-head .side.has-img .kicker{color:var(--cyan)}

/* Bandeau de réassurance : en cyan plutôt qu'entre deux filets gris. Ce sont
   les arguments qui lèvent les objections d'un achat de vin en ligne. */
.strip{border:0;background:var(--cyan);color:#fff}
.strip-item{border-left:1px solid rgba(255,255,255,.28);padding:22px 20px}
.strip-item .k{color:#fff}
.strip-item .v{color:rgba(255,255,255,.88)}
@media (max-width:768px){.strip-item:nth-child(3){border-left:0}}
@media (max-width:430px){.strip-item{padding:16px 14px}}

/* ══ Bascule de langue, hors navigation ══
   Pied de page et tiroir mobile. Le bouton liste les DEUX AUTRES langues
   (syncLangBtn) : chaque mot est cliquable et s'éclaire au survol. */
.foot-lang,.drawer-lang{background:none;border:0;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;padding:0;min-height:44px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.foot-lang{margin-top:18px;color:var(--muted)}
.foot-lang [data-set-lang]:hover{color:var(--cyan-deep)}
.drawer-lang{display:none;color:var(--muted);width:100%;justify-content:flex-start;
  padding:16px 2px;border-top:1px solid var(--line);margin-top:8px}
.drawer-lang [data-set-lang]:hover{color:var(--cyan-deep)}
.fl-sep{opacity:.45}
@media (max-width:1080px){.drawer-lang{display:inline-flex}}
/* Bascule de langue DANS le menu (desktop), comme le WordPress. Elle se fond
   dans la barre : mêmes taille, graisse et espacement que les autres entrées.
   ⚠️ Enfant direct de .nav-links → les règles `#hdr.solid .nav-links > a` ne
   l'atteignent pas (c'est un <button>) : la couleur au défilement est déclarée
   ici explicitement, sinon le libellé restait sombre sur la barre cyan. */
.nav-lang-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  padding:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--body);
  transition:color .4s cubic-bezier(.4,0,.2,1)}
.nav-lang-btn:hover{color:var(--cyan-deep)}
.nav-lang-btn .fl-sep{opacity:.45}
#hdr.solid .nav-lang-btn{color:#fff}
#hdr.solid .nav-lang-btn:hover{color:var(--cyan-ink)}
@media (max-width:1080px){.nav-lang-btn{display:none}}

/* ══ Mega-menu « Vinos » ══
   Avant : deux colonnes CSS qui coupaient les gammes en plein milieu, avec des
   intitules de 9,5 px. On ne distinguait plus trois MARQUES. Une colonne par gamme,
   avec son logo, sa baseline, et les vins dessous. */
.submenu-wide{columns:auto;min-width:0;width:auto;display:grid;
  grid-template-columns:repeat(3,minmax(190px,1fr));gap:0;padding:0;left:auto;right:-24px}
/* right plutôt que left : à 1366 px la colonne Asa Nisi Masa se dessinait entre x=1357
   et 1547 — HORS ÉCRAN (bug « Vinos no muestra ANM », Quentin 25/08, mesuré Playwright). */
.sub-col{padding:22px 22px 18px;border-left:1px solid var(--line)}
.sub-col:first-child{border-left:0}
.sub-hd{display:flex;align-items:center;gap:11px;padding:0 0 12px;margin-bottom:8px;
  border-bottom:1px solid var(--line)}
.sub-hd img{height:44px;width:auto;flex:none;opacity:.9}
.sub-name{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);line-height:1.25}
.sub-base{display:block;margin-top:3px;font-size:10.5px;letter-spacing:.04em;
  text-transform:none;font-weight:400;color:var(--cyan-deep)}
.sub-col a{display:block;padding:7px 0;font-size:12.5px;color:var(--body);
  border-bottom:0;transition:color .16s,padding-left .16s}
.sub-col a:hover{color:var(--cyan-deep);padding-left:5px;background:none}
/* Quentin 21/09 puis 28/09 : « Les Quartz n'apparaissent pas dans Vinos, ni Liger ». Ils y
   étaient, mais sous le bord de l'écran : le header est fixe, et la colonne Mundo Revés
   (10 vins, 7 noms coupés sur deux lignes à 190 px) descendait jusqu'à 689 px, alors
   qu'un portable en affiche ~650. Noms sur une ligne (la colonne s'élargit à son plus
   long nom) et, en dernier recours, le menu défile au lieu de sortir de l'écran. */
@media (min-width:1081px){
  /* Seule la 1ʳᵉ colonne (Mundo Revés, l'ordre de WINES dans routes.php) s'élargit à son
     plus long nom : élargir les trois faisait 786 px, hors écran à gauche sous 1280 px.
     width:max-content obligatoire : en absolu, ancré à droite d'un parent de 70 px, la
     largeur « auto » retombait sur le minimum des pistes et les noms débordaient sur la
     colonne voisine. */
  .submenu-wide{width:max-content;grid-template-columns:max-content 190px 190px;
    max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
  .sub-col:first-child a{white-space:nowrap}
}
/* Telephone : le tiroir est etroit, on repasse en liste simple. */
@media (max-width:1080px){
  .submenu-wide{grid-template-columns:1fr;left:0}
  .sub-col{border-left:0;border-top:1px solid var(--line);padding:16px 14px}
  .sub-col:first-child{border-top:0}
  .sub-hd img{height:36px}
  .sub-col a{min-height:44px;display:flex;align-items:center;font-size:13px}
}

/* ══ Pages I.G. — mise en page relevee sur le WordPress ══ */
.ig-head{min-height:56vh}
.ig-head .side{background:var(--panel);align-items:flex-end;text-align:right}
.ig-head .side .kicker{letter-spacing:.3em}
.ig-head .body{padding-top:clamp(60px,8vw,120px)}
/* Chapo : gros, fin, avec le filet cyan du WordPress. */
.ig-lead{font-size:clamp(19px,2.3vw,30px);font-weight:400;line-height:1.42;
  color:var(--ink);border-left:2px solid var(--cyan);padding-left:22px;margin:0 0 30px;
  max-width:30ch}
.ig-cols{columns:2;column-gap:38px;max-width:62ch}
.ig-cols p{font-size:13px;line-height:1.85;color:var(--body);margin:0 0 14px;
  break-inside:avoid}
@media(max-width:880px){.ig-cols{columns:1}.ig-head .side{align-items:flex-start;text-align:left}}
/* Carte de l abanico + phrase de synthese en cyan a cote. */
.ig-mapa{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
.ig-pull{font-size:clamp(15px,1.6vw,19px);line-height:1.6;color:var(--cyan-deep);
  text-align:right;margin:0}
.ig-mapa figure{margin:0}
.ig-mapa img{width:100%;height:auto;display:block}
figcaption{margin-top:9px;font-size:11.5px;font-style:italic;color:var(--muted)}
@media(max-width:880px){.ig-mapa{grid-template-columns:1fr}.ig-pull{text-align:left}}
/* ── Carrousel de photos du terroir (Vivien 05/09) ──────────────────────────────
   Pellicule, pas diaporama : le rail a une HAUTEUR fixe et chaque diapo prend la
   largeur que son ratio demande (--ar, posé en ligne par router.php). C'est ce qui
   permet de mêler paysage 960×748 et portrait 960×1008 sans rien rogner — et il ne
   faut rien rogner : la légende de la bodega est incrustée en bas de la photo.
   Le débord de la photo suivante dit qu'il y a une suite, mieux qu'une flèche. */
/* Hauteur exacte du bloc de pastilles. UN seul nombre : les pastilles s'en servent
   pour leur boîte, les flèches pour se recentrer sur le RAIL et non sur l'ensemble
   rail + pastilles (sinon elles descendent d'une demi-hauteur de pastilles). */
.ig-carrusel{position:relative;--cr-dots:21px}
.ig-cr-rail{display:flex;gap:clamp(10px,1.4vw,18px);list-style:none;margin:0;padding:0;
  height:clamp(240px,38vw,520px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.ig-cr-rail::-webkit-scrollbar{display:none}
/* Le rail est focalisable au clavier : il lui faut un anneau visible, pas l'anneau
   par défaut du navigateur qui passe sous les photos. */
.ig-cr-rail:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:4px}
.ig-cr-slide{flex:0 0 auto;height:100%;aspect-ratio:var(--ar);scroll-snap-align:start;
  overflow:hidden;background:var(--panel,#E4E4E4)}
/* Même ratio sur la boîte et sur l'image : `cover` ne rogne donc rien, il ne sert
   qu'à absorber l'arrondi au sous-pixel (sinon un liseré du fond apparaît). */
.ig-cr-slide img{width:100%;height:100%;display:block;object-fit:cover}

/* Flèches : posées SUR les bords du rail, encre sur blanc laiteux. Elles disparaissent
   au bout — un bouton qui ne fait rien vaut moins que pas de bouton. */
.ig-cr-nav{position:absolute;top:calc((100% - var(--cr-dots)) / 2 - 22px);width:44px;height:44px;border:0;padding:0;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  box-shadow:0 2px 14px rgba(0,0,0,.18);
  transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.ig-cr-nav.prev{left:-14px}
.ig-cr-nav.next{right:-14px}
.ig-cr-nav::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;
  border-top:2px solid currentColor;border-right:2px solid currentColor}
.ig-cr-nav.prev::before{transform:translateX(2px) rotate(-135deg)}
.ig-cr-nav.next::before{transform:translateX(-2px) rotate(45deg)}
.ig-cr-nav:hover{background:#fff;transform:scale(1.08)}
.ig-cr-nav:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:3px}
.ig-cr-nav[disabled]{opacity:0;pointer-events:none}

/* Pastilles : un trait par photo, pas un rond — ça se lit comme une pellicule. */
.ig-cr-dots{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:var(--cr-dots)}
.ig-cr-dot{position:relative;width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:var(--line,#C9C9C9);transition:background .25s var(--ease),width .25s var(--ease)}
.ig-cr-dot:hover{background:var(--muted,#8A8A8A)}
.ig-cr-dot[aria-current]{width:44px;background:var(--line,#C9C9C9)}
.ig-cr-dot:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:3px}
/* La pastille active se remplit pendant que le minuteur tourne : le visiteur voit que
   ça va changer tout seul, au lieu de se demander pourquoi la page a bougé. La durée
   sort du même --cr-int que le minuteur du script (posé par router.php), donc régler la
   cadence ne peut pas désynchroniser les deux. */
.ig-cr-dot[aria-current]::after{content:"";position:absolute;inset:0;width:100%;
  border-radius:inherit;background:var(--cyan-deep);transform-origin:left center;transform:scaleX(1)}
.ig-carrusel.en-marche .ig-cr-dot[aria-current]::after{animation:ig-cr-prog var(--cr-int,6000ms) linear forwards}
@keyframes ig-cr-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Lecture / pause : posé DANS la rangée de pastilles, à leur gauche, pour ne pas ajouter
   une couche de plus. Deux barres verticales, qui deviennent un triangle en pause.
   Obligatoire dès qu'un contenu bouge seul plus de 5 s (WCAG 2.2.2) — le survol ne
   couvre ni le tactile ni le lecteur d'écran. */
.ig-cr-play{position:relative;width:22px;height:22px;padding:0;border:0;margin-bottom:-9px;
  background:none;color:var(--muted,#8A8A8A);cursor:pointer;transition:color .25s var(--ease)}
.ig-cr-play:hover{color:var(--ink)}
.ig-cr-play:focus-visible{outline:2px solid var(--cyan-deep);outline-offset:2px;border-radius:3px}
.ig-cr-play::before,.ig-cr-play::after{content:"";position:absolute;top:6px;width:3px;height:10px;
  background:currentColor;transition:all .25s var(--ease)}
.ig-cr-play::before{left:7px}
.ig-cr-play::after{left:12px}
/* En pause : les deux barres se referment en triangle « lecture ». */
.ig-cr-play.en-pause::before{left:7px;width:0;height:0;top:5px;background:none;
  border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.ig-cr-play.en-pause::after{opacity:0}
/* Contrepoids du bouton lecture — voir mr_ig_carrusel() : il garde les pastilles dans
   l'axe du carrousel. Même largeur que le bouton, et il suit son `hidden`. */
.ig-cr-equi{width:22px;flex:0 0 auto}

/* Une seule photo : pas de rail à faire défiler, on la pose simplement. */
.ig-carrusel.seule .ig-cr-rail{justify-content:center;overflow:visible}
/* Rien à faire défiler (les photos tiennent toutes à l'écran, cas de Paraje Altamira
   sur grand écran) : le pilotage disparaît. Un bouton qui ne fait rien fait douter du
   reste de la page. Le JS remet la classe au redimensionnement. */
.ig-carrusel.sans-defilement .ig-cr-dots,
.ig-carrusel.sans-defilement .ig-cr-nav{display:none}

@media(max-width:768px){
  /* Au doigt, les flèches ne servent pas et mordraient sur la photo. */
  .ig-cr-nav{display:none}
  .ig-cr-rail{height:clamp(230px,64vw,380px)}
}
/* Bouteilles de l I.G. */
.ig-h2{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 26px;text-align:center}
.ig-bots{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,54px)}
.ig-bot{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:150px;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ig-bot:hover{transform:translateY(-6px)}
.ig-bot img{height:230px;width:auto;object-fit:contain}
.ig-bot span{font-size:11.5px;text-align:center;color:var(--body);line-height:1.4}
.ig-cta{text-align:center;margin:38px 0 0}
/* Liens vers les deux autres I.G., comme les boutons jaunes du WordPress. */
.ig-others{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap}
.ig-other{display:inline-flex;align-items:center;gap:14px;background:var(--panel);
  padding:0 0 0 22px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);min-height:48px;
  transition:background .18s}
.ig-other b{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:var(--cyan);color:#fff;font-size:19px;font-weight:400}
.ig-other:hover{background:var(--cyan-soft,#E7F3F5)}
@media(max-width:430px){.ig-bot img{height:170px}}

/* Le parent « Vinos » est devenu un <button> : la fleche etait posee sur
    et ne le visait plus — un sous-menu avec fleche, l autre
   sans. Et un bouton n herite ni de la police ni de l alignement d un lien, d ou le
   menu de travers. */
.has-sub > .sub-parent::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.nav-links{align-items:center}
.sub-parent{line-height:inherit;vertical-align:baseline;font-family:inherit}
.has-sub > .sub-parent.active{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ══ Pied de page resserre ══
   Il faisait pres de 900 px : quatre blocs empiles avec des respirations de 50 px,
   la bascule de langue isolee au milieu du vide, et trois lignes legales separees
   les unes sous les autres. On compacte sans rien retirer. */
.foot-top{padding:38px 0 30px;gap:36px}
.foot-promise .wrap{padding:14px 0}
.foot-brand img{height:44px;margin-bottom:14px}
.foot-brand p{font-size:12px;line-height:1.7;max-width:34ch}
.foot-social{margin-top:16px;gap:18px;align-items:center;flex-wrap:wrap}
.foot-col h5{margin:0 0 12px}
.foot-col a,.foot-col span{margin-bottom:8px;font-size:12px}
.foot-cols{gap:24px}

/* La bascule de langue rejoint Instagram et WhatsApp au lieu de flotter seule
   trente pixels plus bas. */
.foot-lang{margin-top:0;font-size:10.5px;letter-spacing:.14em}
.foot-social .foot-lang{margin-left:4px}

/* L email cassait EN PLEIN MILIEU du mot (« mundoreveswine / s.com ») : mon
   overflow-wrap:anywhere du matin, pose pour empecher un debordement, allait trop
   loin. On coupe a l arobase, pas n importe ou, et on reduit un peu le corps. */
.foot-col a,.foot-col p,.foot-col span{overflow-wrap:break-word;word-break:normal}
.foot-col a[href^="mailto"]{font-size:11.5px;letter-spacing:0}

/* Une seule ligne legale au lieu de trois blocs empiles. */
.foot-legalbar{padding:16px 0;gap:14px 26px}
/* ⚠️ Couleur corrigée le 26/08 (audit) : cette règle figeait `rgba(255,255,255,.55)`
   en `!important` — écrite du temps où le pied de page était sombre. Il est BLANC
   depuis la refonte : le lien tombait à 1,00:1, littéralement invisible, et son
   `!important` battait même le style posé en JS. Or c'est le SEUL moyen de retirer
   son consentement (obligation LPDP / RGPD). Mesuré après correctif : 5,66:1. */
#mpc-manage-cookies{font-size:11px;color:var(--cyan-deep)!important;text-decoration:underline;
  margin:0!important;padding:0!important;border:0!important;min-height:0!important}
.foot-bottom{padding-top:14px!important;font-size:11.5px}
footer{padding-bottom:20px}

@media (max-width:860px){
  .foot-top{padding:30px 0 22px;gap:26px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:18px}
  .foot-brand p{max-width:none}
}

/* ══ Page Valle de Uco ══ Reprise de la mise en page du WordPress. */
/* Disposition WordPress : carte de la province (petite, à gauche) + photo de
   grappe (grande, à droite) ; puis abanicos à gauche / I.G. à droite. */
.uco-mapa{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(24px,4vw,56px);align-items:center}
.uco-mapa .uco-mapa-fig,.uco-mapa .uco-suelo-fig{margin:0}
.uco-abanicos{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:start}
.uco-geo{font-size:14px;line-height:1.85;color:var(--body);margin:22px 0 0;text-align:center}
.ig-others{display:flex;justify-content:center;gap:clamp(16px,4vw,60px);flex-wrap:wrap}
.ig-others .btn-amar{justify-content:space-between;min-width:min(280px,80vw);gap:26px}
.ig-others .btn-amar b{display:grid;place-items:center;width:26px;height:26px;
  background:rgba(255,255,255,.28);font-weight:400;font-size:15px}
@media(max-width:880px){.uco-abanicos{grid-template-columns:1fr}}
.uco-txt p{font-size:14px;line-height:1.85;color:var(--body);margin:0 0 16px;max-width:56ch}
.uco-mapa figure{margin:0}
.uco-mapa img{width:100%;height:auto;display:block}
.uco-aban{margin:0 0 34px}
.uco-aban img{width:100%;height:auto;display:block}
/* Colonne de droite du WordPress : le texte des trois départements EN HAUT, la
   carte des I.G. dessous en pleine largeur de colonne (côte à côte, la carte
   tombait à ~140 px et ses toponymes devenaient illisibles). */
.uco-igs{display:block}
.uco-igs>p{margin:0 0 clamp(18px,2.5vw,30px);text-align:center}
.uco-igs p{font-size:14px;line-height:1.85;color:var(--body);margin:0}
.uco-igs figure{margin:0}
.uco-igs img{width:100%;height:auto;display:block}
/* Bande Clima / Altitud — comme le WordPress : fond JAUNE de marque qui se fond
   vers le bas dans la photo de cordillère (alti-scaled), titres blancs 30 px gras.
   Chez eux le dégradé jaune→photo occupe la moitié haute ; d'où le padding-bottom
   généreux : la montagne doit rester visible sous le texte. */
.uco-clima{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(200px,26vw,380px);
  color:#fff;
  /* Repli si color-mix() n'est pas connu : la déclaration suivante est alors ignorée
     en entier et il reste le jaune plein — jamais un bloc sans fond. */
  background:var(--yellow);
  /* 🪤 Ce dégradé portait encore `rgba(255,219,110,…)` = #FFDB6E, le jaune du 28/08 :
     le passage aux Pantone du 04/09 avait changé le jeton --yellow et la couche du
     dessous, mais pas ces trois arrêts écrits à la main — le bloc « Clima y altitud »
     servait donc l'ANCIEN jaune par-dessus le nouveau. Une couleur codée en dur ne se
     voit pas : elle ne casse rien, elle ment. Depuis, les trois arrêts sortent du même
     jeton que tout le reste. */
  background:
    linear-gradient(color-mix(in srgb,var(--yellow) 94%,transparent) 0%,
                    color-mix(in srgb,var(--yellow) 88%,transparent) 38%,
                    color-mix(in srgb,var(--yellow) 0%,transparent) 82%),
    url(img/wp-alti.webp) center bottom/cover no-repeat,var(--yellow)}
.uco-clima-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.uco-clima h2{font-size:clamp(21px,2.5vw,30px);font-weight:600;letter-spacing:.02em;
  text-transform:none;color:#fff;margin:0 0 18px}
.uco-clima p{font-size:14px;line-height:1.85;color:#fff;margin:0 0 14px}
@media(max-width:880px){.uco-mapa,.uco-igs,.uco-clima-grid{grid-template-columns:1fr}}

/* ══ Couche de mouvement ══
   Une seule courbe et une seule duree pour tout le site : sans ca chaque effet a son
   propre rythme et l ensemble parait bricole. Uniquement transform et opacity, qui
   sont traites par le compositeur — aucun recalcul de mise en page, donc aucun cout
   sur telephone. Tout est neutralise en prefers-reduced-motion. */
:root{--ease:cubic-bezier(.16,1,.3,1);--dur:.6s}

/* Apparition au defilement, decalee par element. .reveal existe deja : on lui donne
   un mouvement plus franc et un leger retard en cascade. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ── Entrées DIRECTIONNELLES du WordPress ─────────────────────────────────────
   Relevées sur leur site (attributs Avada data-animationtype/duration) :
     /nuestro-proyecto/  titre + manifeste fadeInLeft 1,2 s · photo fadeInRight 1,5 s
     /valle-de-uco/      titre + 2 cartes fadeInLeft 1,2 s · carte I.G. fadeInRight 1 s
     accueil             bouteilles zoomIn 2,7 s · marques fadeInDown 1 s
   Nos blocs entraient tous par le bas, à la même vitesse : c'est ce qui manquait.
   Modificateurs de .reveal (spécificité 0,2,0 > 0,1,0) : l'état final `.in`
   reste commun, seul le point de départ et la durée changent. */
.reveal.fx-left  {transform:translateX(-48px);transition-duration:1.2s}
.reveal.fx-right {transform:translateX(48px); transition-duration:1.5s}
.reveal.fx-right-fast{transform:translateX(48px);transition-duration:1s}
.reveal.fx-down  {transform:translateY(-30px);transition-duration:1s}
/* ⚠️ L'état final DOIT être plus spécifique que le point de départ : `.reveal.in`
   et `.reveal.fx-right` pèsent pareil (0,2,0) et, ces règles venant après, elles
   gagnaient — l'opacité montait mais le bloc ne bougeait jamais de ses 48 px.
   Invisible à l'œil (un fondu seul paraît normal), attrapé par le test qui exige
   des valeurs intermédiaires. 7ᵉ piège de cascade sur ce projet. */
.reveal.fx-left.in,.reveal.fx-right.in,
.reveal.fx-right-fast.in,.reveal.fx-down.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal.fx-left,.reveal.fx-right,.reveal.fx-right-fast,.reveal.fx-down{transform:none}
}
.reveal.in .card:nth-child(1),.reveal.in .ig-bot:nth-child(1){transition-delay:.05s}
.reveal.in .card:nth-child(2),.reveal.in .ig-bot:nth-child(2){transition-delay:.10s}
.reveal.in .card:nth-child(3),.reveal.in .ig-bot:nth-child(3){transition-delay:.15s}
.reveal.in .card:nth-child(4){transition-delay:.20s}

/* Images : leger zoom au survol partout ou il y a un cadre qui coupe. */
.uco-mapa figure,.uco-aban,.uco-igs figure,.ig-mapa figure,
.card-img,.igb-grid a{overflow:hidden}
.uco-mapa img,.uco-aban img,.uco-igs img,.ig-mapa img{transition:transform .8s var(--ease)}
.uco-mapa figure:hover img,.uco-aban:hover img,.uco-igs figure:hover img,
.ig-mapa figure:hover img{transform:scale(1.04)}
.card-img img{transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}

/* Cartes produit : elles se soulevent au lieu de rester plates. */
.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -26px rgba(0,0,0,.42)}
.card .add{transition:transform .25s var(--ease),background .2s}
.card:hover .add{transform:scale(1.08)}

/* Liens de navigation : le filet se deploie du centre plutot que d apparaitre sec. */
.nav-links > a,.has-sub > a,.sub-parent{position:relative;border-bottom-color:transparent!important}
.nav-links > a::before,.has-sub > a::before,.sub-parent::before{content:"";position:absolute;
  left:50%;right:50%;bottom:0;height:2px;background:var(--cyan);
  transition:left .3s var(--ease),right .3s var(--ease)}
.nav-links > a:hover::before,.has-sub > a:hover::before,.sub-parent:hover::before,
.nav-links > a.active::before,.has-sub > a.active::before{left:0;right:0}

/* Boutons : une lueur qui traverse, une seule fois, au survol. */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease)}
.btn:hover::after{left:140%}

/* Chapo a filet cyan : le filet se remplit de haut en bas a l apparition. */
.ig-lead{position:relative;border-left-color:transparent}
.ig-lead::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;
  background:var(--cyan);transition:height .9s var(--ease) .2s}
.reveal.in .ig-lead::before,.ig-lead::before{height:100%}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  /* `transform:none` ne vise que ces ÉLÉMENTS : les chevrons des flèches et les barres
     du bouton pause sont dessinés dans des ::before/::after, qui ne sont pas touchés. */
  .card,.card:hover,.card-img img,.uco-mapa img,.uco-aban img,.uco-igs img,
  .ig-mapa img,.ig-cr-nav,.ig-cr-dot,.ig-cr-play,.btn::after,.ig-lead::before{transition:none;transform:none}
  /* Le script ne lance pas le défilement automatique dans ce cas et cache le bouton
     pause ; on coupe aussi la barre de progression, qui n'aurait plus rien à décrire. */
  .ig-carrusel.en-marche .ig-cr-dot[aria-current]::after{animation:none}
  .btn::after{display:none}
  .ig-lead{border-left-color:var(--cyan)}
}

/* ══ Alignement du menu ══
   Trois natures d elements cohabitent dans la barre : des <a> directs, des <a>
   enfermes dans un .has-sub, et un <button>. Chacun a sa hauteur de ligne et sa
   facon de se caler, d ou les entrees a sous-menu qui retombaient plus bas.
   On leur impose la MEME boite plutot que de corriger cas par cas. */
.nav-links{align-items:stretch}
.has-sub{display:flex;align-items:stretch}
.nav-links > a,.has-sub > a,.sub-parent{
  display:inline-flex;align-items:center;height:38px;padding:0;line-height:1;
  border-bottom:2px solid transparent}
/* Le filet anime se cale sur cette hauteur commune. */
.nav-links > a::before,.has-sub > a::before,.sub-parent::before{bottom:-2px}
/* Le sous-menu part du BAS de la boite, plus du bas du texte. */
.submenu{top:calc(100% + 2px)}
@media (max-width:1080px){
  .nav-links{align-items:stretch}
  .nav-links > a,.has-sub > a,.sub-parent{height:auto;min-height:44px;padding:16px 2px}
  .has-sub{display:block}
}

/* ══ Taille uniforme des bouteilles ══
   Les photos du catalogue n ont pas la meme hauteur : 4 flacons font 1600 a 1776 px
   (Qvevri, L Ecume, Les Calcaires, Torrontes) quand les 11 autres en font 612. Sans
   contrainte, la fiche de L Ecume affichait une bouteille trois fois plus grande que
   celle d a cote. On borne la HAUTEUR et on laisse object-fit gerer : aucune image
   n est deformee, aucune n est recadree. */
.vino-img{display:flex;align-items:center;justify-content:center;min-height:420px}
.vino-img img{max-height:520px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
@media(max-width:820px){.vino-img{min-height:0}.vino-img img{max-height:380px}}
@media(max-width:430px){.vino-img img{max-height:300px}}
/* Vivien 11/09 — À L'ESSAI : cadre de la bouteille dans la couleur de sa cire (champ lacre,
   posé en --lacre par router.php). Pour revenir au cadre papier : supprimer cette ligne. */
.vino-img[style*="--lacre"]{background:var(--lacre);border-color:var(--lacre);padding:8px}   /* Quentin 15/09 : validé, mais 26 px = « demasiado grueso » → 8 px */

/* ══ Fiche technique sur la page du vin ══
   C est ce que lisent cavistes, restaurateurs et importateurs avant d acheter. */
/* Puntajes de la critique (Excel de Quentin 28/08) : l'añada en vente en grand, les
   autres millésimes sur une ligne. Le chiffre prend la couleur de la gamme. */
.vino-puntajes{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.vino-puntajes h2{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.punt-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.punt-list li{display:grid;grid-template-columns:auto 1fr;grid-auto-rows:auto;column-gap:14px;
  align-items:center;padding:12px 18px 12px 14px;border:1px solid var(--line);background:var(--panel);
  min-width:210px}
.punt-list b{grid-row:1/span 2;font-size:36px;font-weight:300;line-height:1;color:var(--cyan-deep)}
.punt-list span{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);align-self:end}
.punt-list small{font-size:11.5px;color:var(--muted);line-height:1.4;align-self:start}
.punt-list li:not(:has(small)) span{grid-row:1/span 2;align-self:center}
.punt-otras{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.9}
.punt-otras b{display:block;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:10.5px;color:var(--ink);margin:0 0 2px}
.punt-otras span{display:inline-block;margin-right:16px}
#v-vino.gama-lpv .punt-list b{color:var(--g-lpv-ink)}
#v-vino.gama-anm .punt-list b{color:var(--g-anm)}
.vino-ficha-bloc{margin:38px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.vino-ficha-bloc h2{font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-deep);margin:0 0 18px}
.fspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px 26px;margin:0}
.fspec dt{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.fspec dd{margin:0;font-size:13px;line-height:1.6;color:var(--body)}
/* La vinification est un paragraphe : pleine largeur, sinon la grille explose. */
.fspec.wide{grid-column:1/-1;padding-top:8px;border-top:1px solid var(--line)}
.fspec.wide dd{font-size:13px;line-height:1.85;max-width:68ch}

/* ══ Fiche technique — mise en page revue ══
   Avant : trois colonnes de hauteurs tres inegales, un paragraphe de 500 signes
   coince dans une colonne etroite, et deux champs orphelins dessous. On separe ce
   qui est une VALEUR de ce qui est un TEXTE. */
.fspecs{display:block}
/* Valeurs courtes : une ligne de reperes, comme sur une contre-etiquette. */
.fspecs-cortos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:18px 26px;margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.fspecs-cortos .fspec dt{font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.fspecs-cortos .fspec dd{margin:0;font-size:14px;font-weight:500;color:var(--ink);line-height:1.4}
/* Textes : pleine largeur, en colonne, avec une vraie mesure de lecture. */
.fspecs-largos .fspec{margin:0 0 20px;max-width:70ch}
.fspecs-largos .fspec:last-child{margin-bottom:0}
.fspecs-largos dt{font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cyan-deep);margin:0 0 6px}
.fspecs-largos dd{margin:0;font-size:13.5px;line-height:1.85;color:var(--body)}
.vino-ficha-bloc{margin-bottom:34px}
@media(max-width:560px){.fspecs-cortos{grid-template-columns:1fr 1fr;gap:14px 18px}}

/* ══ Pied du tunnel de paiement ═══════════════════════════════════════════════
   Le checkout n'avait qu'une ligne de mentions légales. Sur une page où l'on
   sort sa carte, ce qui manque n'est pas la navigation du site — ce serait une
   sortie — mais de quoi se rassurer et de quoi joindre quelqu'un : c'est
   exactement là que se perdent les paniers, et un numéro de WhatsApp visible
   récupère une commande qu'une hésitation aurait annulée.
   Ajouté en fin de fichier : une règle placée avant les règles de base serait
   inerte, et les media queries n'ajoutent aucune spécificité. */
/* Celui-ci suit le thème : son texte est en jetons, pas en blanc figé.
   `--bg-soft` n'existait pas — le repli #faf8f4 restait clair en mode sombre
   sous un texte devenu clair lui aussi. */
.pay-foot{border-top:1px solid var(--line);margin-top:56px;background:var(--panel)}
.pf-wrap{max-width:1080px;margin:0 auto;padding:40px 28px 8px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px 40px}
.pf-col h5{margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink,#1b1b1b);font-weight:700}
.pf-col a{display:block;font-size:13px;color:var(--muted);text-decoration:none;
  padding:3px 0;transition:color .18s ease}
.pf-col a:hover,.pf-col a:focus-visible{color:var(--cyan,#2aa6b8)}
.pf-note{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* Le numéro de WhatsApp est la seule chose de ce pied qu'on veut voir de loin. */
.pf-strong{font-size:16px!important;font-weight:700;color:var(--ink,#1b1b1b)!important;
  letter-spacing:.01em;padding-bottom:6px!important}
.pf-strong:hover{color:var(--cyan,#2aa6b8)!important}
/* Mention obligatoire en Argentine : elle doit rester repérable, pas noyée. */
.pf-arrep{font-weight:600;color:var(--ink,#1b1b1b)!important}
.pf-legal{max-width:1080px;margin:0 auto;padding:20px 28px 34px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);text-align:center;line-height:2}
@media (max-width:760px){
  .pf-wrap{grid-template-columns:1fr;gap:26px;padding:32px 22px 6px}
  .pf-legal{padding:18px 22px 28px}
}

/* ══ Survol des trois lignes : la bouteille se soulève ════════════════════════
   Repris du WordPress, où le visuel de la gamme monte légèrement au passage de
   la souris. Jusqu'ici seuls la carte et sa photo de fond bougeaient : le logo
   restait figé au milieu, et c'est justement lui que l'œil suit.
   Deux transformations composées (fond qui zoome, bouteille qui monte) donnent
   la profondeur — c'est ce qui distingue l'effet d'un simple survol.
   Uniquement transform et opacity : rien qui déclenche un recalcul de mise en
   page. Placé en fin de fichier pour passer après la règle .lc-logo d'origine. */
.lc-logo{transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.line-card:hover .lc-logo,
.line-card:focus-visible .lc-logo{transform:translateY(-14px) scale(1.06);opacity:1}
/* Le texte suit d'un cran, plus discrètement : sans ça la bouteille a l'air de
   se détacher de sa carte au lieu d'entraîner l'ensemble. */
.line-card>div:last-child h3,
.line-card>div:last-child p,
.line-card>div:last-child .go{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.line-card:hover>div:last-child h3,
.line-card:hover>div:last-child p,
.line-card:hover>div:last-child .go{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .line-card:hover .lc-logo,
  .line-card:hover>div:last-child h3,
  .line-card:hover>div:last-child p,
  .line-card:hover>div:last-child .go{transform:none}
}

/* ══ Demandes de devis : bande boutique, encart Patagonie, formulaire ═════════
   Trois surfaces pour un même mécanisme (assets/cotizacion.js + api/cotizacion.php).
   Ajouté en fin de fichier : les media queries n'ajoutent aucune spécificité, une
   règle placée avant les règles de base resterait inerte. */

/* ── Bande « ¿Necesitás cantidad? » (bas de la boutique) ── */
.quote-band{background:var(--ink-fixed);color:#fff}
.qb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.qb-copy .kicker{color:var(--cyan,#4DC6E2)}
.qb-copy h2{color:#fff;margin:6px 0 14px}
.qb-copy p{color:#D8EFF4;font-size:14.5px;line-height:1.75;max-width:46ch;margin:0 0 22px}
.qb-note{font-size:11.5px!important;color:#8FA3AD!important;margin:14px 0 0!important;letter-spacing:.04em}
.qb-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.14)}
.qb-list li{background:var(--ink-fixed);padding:18px 20px;font-size:13.5px;color:#E8F4F7;
  letter-spacing:.02em;display:flex;align-items:center;gap:12px}
/* Le tiret cyan tient lieu de puce : une liste à points ferait « formulaire »,
   là où cette bande doit se lire comme une offre. */
.qb-list li::before{content:"";flex:0 0 18px;height:1px;background:var(--cyan,#4DC6E2)}
@media (max-width:880px){
  .qb-grid{grid-template-columns:1fr;gap:28px}
  .qb-list li{padding:15px 16px;font-size:13px}
}

/* ── Note Patagonie dans le tunnel de paiement ──
   Discrète à dessein. Un encart coloré à cet endroit se lit comme une alerte : la
   personne croit avoir fait une erreur alors qu'on lui rend service. Une ligne de
   texte au même gabarit que les autres notes du formulaire, avec un lien, suffit.
   ⚠️ La règle [hidden] est OBLIGATOIRE : une règle d'auteur `display:…` l'emporte
   sur le display:none que le navigateur applique à l'attribut hidden. Sans elle, la
   note s'affichait en permanence, même sans province choisie. */
.pat-box[hidden]{display:none}
.pat-box{margin:12px 0 2px;padding:10px 0 0;border-top:1px solid var(--line)}
.pat-box p{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.pat-link{border:0;background:none;padding:0;font:inherit;color:var(--cyan,#2aa6b8);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pat-link:hover{color:var(--ink,#1D1D1F)}

/* ── Formulaire de devis (construit par cotizacion.js) ── */
.cot-back{position:fixed;inset:0;z-index:2147482000;background:rgba(12,16,20,.62);
  display:flex;align-items:center;justify-content:center;padding:20px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cot-box{position:relative;background:#fff;width:100%;max-width:560px;max-height:90vh;
  overflow:auto;padding:34px 32px 28px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.cot-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;
  line-height:1;color:#9AA0A6;cursor:pointer;padding:6px}
.cot-x:hover{color:#1D1D1F}
.cot-box h3{font-size:20px;letter-spacing:.02em;margin:0 0 8px;color:#1D1D1F}
.cot-sub{font-size:13px;line-height:1.65;color:#6B7078;margin:0 0 18px}
.cot-cart{background:#F7F6F3;border:1px solid #E3E1DC;padding:12px 14px;margin:0 0 18px;font-size:12.5px}
.cot-cart strong{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#6B7078}
.cot-cart ul{margin:0;padding-left:18px;color:#1D1D1F;line-height:1.7}
.cot-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cot-f{display:flex;flex-direction:column;gap:5px}
.cot-f.cot-wide,.cot-actions,.cot-msg{grid-column:1/-1}
.cot-f span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6B7078;font-weight:600}
.cot-f input,.cot-f select,.cot-f textarea{border:1px solid #D9D6D0;background:#fff;
  padding:11px 12px;font-size:14px;font-family:inherit;color:#1D1D1F;border-radius:0;
  transition:border-color .18s ease}
.cot-f input:focus,.cot-f select:focus,.cot-f textarea:focus{outline:none;border-color:var(--cyan,#4DC6E2)}
.cot-f textarea{resize:vertical;min-height:70px}
.cot-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:6px}
.cot-cancel{border:1px solid #D9D6D0;background:none;padding:12px 18px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:#6B7078;font-family:inherit}
.cot-cancel:hover{border-color:#1D1D1F;color:#1D1D1F}
.cot-send{border:0;background:var(--cyan,#4DC6E2);color:#0B2027;padding:12px 24px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;cursor:pointer;font-family:inherit}
.cot-send:hover{filter:brightness(1.06)}
.cot-send:disabled{opacity:.55;cursor:default}
.cot-msg{margin:10px 0 0;font-size:12.5px;min-height:1em;color:#6B7078}
.cot-msg.cot-err{color:#B3261E}
.cot-ok{text-align:center;padding:14px 0 6px}
.cot-tick{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--cyan,#4DC6E2);
  color:#0B2027;font-size:26px;line-height:52px;font-weight:700}
.cot-ok h3{font-size:17px;line-height:1.5}
@media (max-width:560px){
  .cot-box{padding:28px 20px 22px;max-height:94vh}
  .cot-grid{grid-template-columns:1fr}
  .cot-actions{flex-direction:column-reverse}
  .cot-actions button{width:100%}
}

/* ══ Carrousel d'accueil ══════════════════════════════════════════════════════
   Trois photos en fondu enchaîné. Toutes empilées au même endroit, seule celle qui
   porte .is-on est visible — pas de translation horizontale, donc rien qui puisse
   déborder ni provoquer un défilement latéral sur téléphone.
   Le zoom lent (kb) reste, mais UNIQUEMENT sur la photo affichée : l'animer sur les
   trois en permanence, c'est trois fois le travail du compositeur pour rien. */
.hero-slides{position:absolute;inset:0;overflow:hidden}
/* Rail qui glisse. Un fondu enchaîné avait été essayé d'abord : entre trois photos
   de vignoble aux tonalités proches, le changement passe inaperçu et on croit le
   carrousel en panne. Le glissement latéral, lui, ne laisse aucun doute.
   La largeur du rail et celle des photos sont posées en JavaScript : elles dépendent
   du nombre de photos, que la bodega pourra faire varier depuis le panneau. */
.hero-track{display:flex;height:100%;
  transition:transform .85s cubic-bezier(.16,1,.3,1);will-change:transform}
.hero-slides .hs{flex:0 0 auto;height:100%;object-fit:cover;
  position:static;inset:auto;opacity:1}
/* Le zoom lent ne tourne que sur la photo visible : trois animations permanentes,
   c'est trois fois le travail du compositeur pour deux images qu'on ne voit pas. */
.hero .hero-track img{animation:none}
.hero .hero-track img.is-on{animation:kb 22s ease-in-out infinite alternate}

/* Commandes. z-index 3 : AU-DESSUS du voile (.veil, z-index auto dans le flux) —
   un voile qui passe devant rend les flèches mortes au doigt, panne déjà vue. */
/* Façon WordPress : deux carrés gris clair posés dans la MARGE BLANCHE à gauche
   du slider, au tiers bas — pas de pastilles sur la photo. */
.hero-arrow{position:absolute;top:auto;bottom:26%;transform:none;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;border:0;
  background:var(--page);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--cyan);color:#fff}
.hero-arrow.prev{left:26px}
.hero-arrow.next{left:76px}
/* Repères de position. Trois pastilles rondes posées sur une photo font « widget
   de gabarit » — c'est exactement ce que Vivien a relevé. Trois traits fins, alignés
   sur la typographie du site, disent la même chose sans se faire remarquer. */
.hero-dots{display:none}
.hero-dots-off{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:10px}
.hero-dot{width:34px;height:2px;padding:0;border:0;background:rgba(255,255,255,.42);
  cursor:pointer;transition:background .3s ease,width .3s ease;position:relative}
/* Le trait fait 2 px de haut : c'est le parti pris graphique, et il est juste.
   Mais 2 px, c'est aussi la hauteur de la zone cliquable — impossible à viser au
   doigt. On étend la cible à 40 px de haut par un pseudo-élément transparent :
   le visuel ne bouge pas d'un pixel, la puce devient atteignable au pouce.
   (WCAG 2.5.8 demande 24×24 px minimum ; on est à 34×40.) */
.hero-dot::after{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:40px}
.hero-dot:hover{background:rgba(255,255,255,.75)}
.hero-dot.is-on{background:#fff;width:52px}
@media (max-width:760px){
  /* Au doigt, le balayage suffit : deux pastilles de 48 px posées sur la photo
     mangent le visuel et se confondent avec le menu. On garde les puces. */
  .hero-arrow{display:none}
  .hero-dots{bottom:58px}
}
@media (prefers-reduced-motion:reduce){
  /* Le glissement disparaît, le changement de photo reste : ce que demande ce
     réglage, c'est d'éviter le mouvement, pas de figer le carrousel. */
  .hero-track{transition:none}
  .hero .hero-track img.is-on{animation:none}
}

/* ══ Trois lignes : la bouteille devient le sujet ═════════════════════════════
   Reprise de la composition du WordPress — fond propre à la gamme, bouteille au
   centre, marque au-dessus. Remplace la photo de vignoble + logo blanc, qui ne
   montrait pas le produit. */
.line-card{display:block}
.line-card.lc-mr{background:#EFEFEF}        /* gris clair uni, comme le WordPress */
.line-card.lc-anm{background:#0E0E10}
.line-card.lc-lpv{background:#BBD9EC}
/* ── Bouteilles : entrée en zoom, et rotation au survol pour Mundo Revés ──
   Le WordPress déclare `zoomIn` sur 2,7 s à l'entrée dans le champ de vision, et
   pour la seule colonne du milieu :
       .rota .giro       { transition: all 1s ease; }
       .rota:hover .giro { transform: rotate(180deg); }
   La rotation ne vaut QUE pour Mundo Revés : c'est le nom de la maison qui se joue
   là — le monde à l'envers. L'étendre aux trois ferait perdre le trait.

   Deux éléments distincts À DESSEIN : l'enveloppe porte l'entrée (translate + scale),
   l'image porte la rotation. Sur un seul élément, la seconde transformation écraserait
   la première et la bouteille reviendrait brutalement à sa taille de départ. */
/* La bouteille est un CALQUE PLEIN CADRE, au même titre que le fond et la marque.
   Elle était d'abord posée à 62 % de hauteur, centrée : comme le fichier est un
   canevas 639×1007 où la bouteille n'occupe qu'une partie, elle se retrouvait deux
   fois trop petite et paraissait étirée par rapport aux autres calques. À pleine
   taille et en `contain`, les trois calques retrouvent les proportions d'origine. */
/* Les trois calques s'arrêtent au-dessus du tiers bas : c'est là que le WordPress
   pose la liste des vins. Sans cette réserve, les noms se lisaient PAR-DESSUS la
   bouteille (fond chargé + texte = illisible sur deux colonnes sur trois). */
.line-card{--lc-list-h:34%}
.lc-bot{position:absolute;inset:0 0 var(--lc-list-h) 0;z-index:2;pointer-events:none;
  transform:scale(.34);opacity:0;
  transition:transform 2.7s cubic-bezier(.16,1,.3,1),opacity 1.6s ease}
.lc-bot.in{transform:scale(1);opacity:1}
.lc-bot img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.34))}
.lc-marca{inset:0 0 var(--lc-list-h) 0;height:auto}
.lc-rota .lc-giro{transition:transform 1s ease}
.lc-rota:hover .lc-giro,
.lc-rota:focus-visible .lc-giro{transform:rotate(180deg)}
/* Liste des vins de la gamme, en pied de colonne — capitales espacées blanches
   (encre sur la colonne grise Mundo Revés), chaque nom mène à sa fiche. */
/* height:auto + min-height : la zone grandit avec la liste au lieu de la rogner.
   Mesuré (celu 412 px, cartes 4/5) : 7 vins = 16 px COUPÉS sous le bord bas par
   l'overflow:hidden de la carte. En grandissant, la liste mord de quelques px sur
   la zone bouteille (l'ombre portée), jamais l'inverse. */
.lc-list{position:absolute;left:0;right:0;bottom:0;z-index:4;
  height:auto;min-height:var(--lc-list-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.1vh,14px);text-align:center;padding:10px 14px 16px}
.lc-list a{color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;text-shadow:0 1px 10px rgba(8,12,16,.35);
  transition:color .2s ease;position:relative}
/* Le nom fait 21 px de haut : c'est le parti graphique du WordPress, mais aussi la
   hauteur cliquable. On étend la cible au doigt par un pseudo-élément transparent —
   le rendu ne bouge pas d'un pixel (même parade que les puces du carrousel). */
.lc-list a::after{content:'';position:absolute;left:-14px;right:-14px;top:50%;
  transform:translateY(-50%);height:40px}
.lc-mr .lc-list a{color:#212934;text-shadow:none}
/* Même traitement pour Le Petit Voyage (audit 26/08) : son fond est le bleu pâle
   #BBD9EC, sur lequel le blanc tombait à 1,47:1 — mesuré. « LPV MALBEC » et
   « LPV CRIOLLA » se posent en plus sur les zones crème de l'illustration aux
   oiseaux, où ils disparaissaient purement et simplement. Ce sont des liens de
   navigation vers les fiches vin : ils doivent se lire. Les cartes Mundo Revés
   (12,76:1) et Asa Nisi Masa (19,28:1) étaient déjà correctes, on n'y touche pas. */
.lc-lpv .lc-list a{color:#212934;text-shadow:none}
.lc-list a:hover,.lc-list a:focus-visible{color:var(--yellow)}
/* Bouton jaune du WordPress : capitales espacées BLANCHES sur le jaune de marque.
   ⚠️ Blanc sur #FFDB6E ≈ 1,9:1 — c'est LEUR design (bouton « Valle de Uco » et
   boutons I.G. du WP en ligne), assumé comme le blanc-sur-cyan du header. */
/* ⚠️ Encre, PAS blanc (audit 26/08) : le blanc sur ce jaune donne 1,52:1 — mesuré —
   et ce bouton porte le « Enviar » du formulaire de contact, c'est-à-dire l'unique
   action de la page. C'était en plus une incohérence interne : la boutique écrit
   déjà en encre sur ce même jaune (bande « Pago seguro »). Le survol éclaircit le
   jaune, ce qui améliore encore le contraste avec de l'encre — il l'aggravait avec
   du blanc. */
.btn-amar{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);
  color:var(--yellow-ink);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:13px 24px;text-decoration:none;border:0;cursor:pointer;
  transition:filter .2s ease}
.btn-amar:hover,.btn-amar:focus-visible{filter:brightness(1.06)}
/* Le voile ne doit assombrir que le BAS, là où se pose le texte : étalé sur toute
   la carte il ternit la bouteille, qui est justement ce qu'on veut montrer. */
.line-card .lc-veil{background:linear-gradient(180deg,transparent 46%,rgba(8,12,16,.86))}
.lc-txt{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 24px 28px}
.line-card>div:last-child{position:static}
/* Mundo Revés : fond clair, donc encre foncée et pas de voile. */
.line-card.lc-light .lc-logo{filter:brightness(0);opacity:.9}
.line-card.lc-light h3,.line-card.lc-light p{color:#1D1D1F}
.line-card.lc-light .go{color:#0E7A8C}
.line-card.lc-light .lc-txt{background:linear-gradient(180deg,rgba(239,239,239,0),rgba(239,239,239,.96) 38%)}
.line-card{min-height:560px}
@media(max-width:880px){
  .line-card{min-height:440px}
  .lc-bottle{height:56%;bottom:30%}
}
@media (prefers-reduced-motion:reduce){
  .line-card:hover .lc-bottle{transform:translateX(-50%)}
}

/* ══ Trois lignes en pleine largeur + section Mendoza ═════════════════════════ */

/* Pleine largeur, sans gouttière : sur le WordPress les trois panneaux sont
   jointifs et vont d'un bord à l'autre. Le `gap:22px` d'origine les faisait
   flotter au milieu de la page comme trois vignettes. */
.lines{gap:0;max-width:none}

/* Le panneau EST le canevas des images (639 × 1007). En lui donnant ce rapport,
   les trois calques se superposent au pixel près, sans rognage ni bande vide —
   c'est ce qui reproduit la composition d'origine plutôt que de la réinterpréter. */
.line-card{aspect-ratio:639/1007;min-height:0}
.lc-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* La marque est un dessin posé sur un canevas transparent, pas une vignette :
   `contain` la laisse à sa place et à son échelle d'origine. */
.lc-marca{object-fit:contain;z-index:3;pointer-events:none}
@media(max-width:880px){
  .lines{grid-template-columns:1fr}
  /* Empilés sur toute la largeur, trois panneaux au rapport 0,63 donneraient une
     page interminable : on les raccourcit et on recadre. */
  .line-card{aspect-ratio:4/5}
}

/* La section « Nuestros vinos » colle au bloc Mendoza (padding-top:0, voulu sur
   grand écran comme le WordPress) — mais au téléphone le titre en line-height:1
   touchait le bord sombre et semblait à cheval dessus (capture Vivien 18/08). */
.band-vinos{padding-top:0}
@media(max-width:880px){.band-vinos{padding-top:34px}}

/* ── Mendoza ──
   Photo pleine largeur, texte posé en bas à droite comme sur le WordPress. Le
   dégradé n'assombrit que le coin du texte : la cordillère est le sujet, la voiler
   entièrement pour gagner du contraste reviendrait à la cacher. */
.mendoza{position:relative;overflow:hidden;background:#0B1116}
.mz-bg{display:block;width:100%;height:auto;object-fit:cover}
.mz-txt{position:absolute;right:0;bottom:0;z-index:2;max-width:min(560px,52vw);
  padding:120px 40px 46px 60px;color:#fff;
  background:linear-gradient(to top left,rgba(8,14,18,.78) 30%,transparent 72%)}
.mz-txt p{font-size:clamp(14px,1.35vw,17px);line-height:1.75;letter-spacing:.02em;
  margin:0 0 22px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.mz-txt .btn{margin:0}
@media(max-width:880px){
  /* Sur téléphone le texte par-dessus la photo devient illisible : on le passe
     dessous, sur le fond sombre de la section. */
  .mz-txt{position:static;max-width:none;background:none;padding:22px 22px 34px}
  .mz-txt p{text-shadow:none}
}

/* ══ Bandes de texte : plus larges, donc plus basses ══════════════════════════
   Relevé par Vivien : les blocs de texte formaient de hautes colonnes étroites
   qu'il fallait dérouler longuement avant d'atteindre la photo suivante. Le
   WordPress répartit le même texte sur toute la largeur, ce qui divise la hauteur
   par deux sans rien retirer. On élargit le conteneur et les colonnes plutôt que
   de couper du contenu. */
/* Une classe explicite, et non un sélecteur `:has()` : celui-ci ne visait que les
   conteneurs placés dans une `section.band`, ce qui laissait de côté la page
   Nuestro Proyecto — dont le conteneur est un `.wrap` seul — et il reste ignoré
   par les Safari antérieurs à 2022. */
.wrap.wide{max-width:1560px}
.cols{grid-template-columns:1fr 1.25fr;gap:clamp(28px,4vw,64px)}
.lead{max-width:46ch}
.cols p{font-size:15px;line-height:1.8}
/* Une découpe en colonnes CSS avait été tentée sur la seconde cellule pour aplatir
   davantage. Elle cassait la page Proyecto : la citation-manifeste qui s'y trouve
   partait seule dans une troisième colonne, son filet cyan pendant dans le vide.
   L'élargissement du conteneur suffit ; le reste ajoutait du désordre pour peu. */
.manifesto{max-width:none}
/* La citation conclut le texte : pleine largeur, sous les deux colonnes. */
.manifesto-inline{margin:clamp(28px,4vw,52px) 0 0;max-width:none}
@media (max-width:880px){ .cols{grid-template-columns:1fr} }

/* ── Mendoza : retour au PLACEMENT WORDPRESS (10/08, « igual ») — bloc de texte
   dans l'angle bas-DROIT, ~450 px, 22 px, avec le bouton JAUNE « Valle de Uco ».
   L'ancien bandeau pleine largeur redéfinissait .mz-txt plus bas dans la feuille
   et écrasait la version d'origine : cascade, 6e occurrence sur ce projet. */
.mz-txt{position:absolute;left:auto;right:clamp(28px,10vw,150px);bottom:clamp(28px,7vh,72px);
  max-width:min(460px,44vw);display:block;padding:0;background:none}
.mz-txt p{max-width:none;margin:0 0 22px;
  font-size:clamp(15px,1.6vw,22px);line-height:1.5;font-weight:400;color:#fff;
  text-shadow:0 1px 14px rgba(8,14,18,.55)}
@media(max-width:880px){
  .mz-txt{position:static;max-width:none;padding:22px 22px 34px}
  .mz-txt p{text-shadow:none;color:var(--body)}
}

/* ── Logo de gamme sur la fiche vin ──
   Remplace l'intitulé en petites capitales. Les trois lignes sont trois marques :
   les afficher toutes dans la même police du site efface ce qui les distingue.
   Hauteur calée sur le kicker qu'il remplace, pour ne pas déplacer le titre. */
/* Les trois marques n'ont pas la même forme : « ASA NISI MASA » est un bloc de
   deux lignes presque carré, « LE PETIT VOYAGE » une bande large. À hauteur égale
   la première paraîtrait deux fois plus petite — d'où une hauteur par gamme.
   Le lettrage d'origine est blanc : `brightness(0)` le passe en encre, l'en-tête
   de la fiche étant sur fond clair. */
/* ⚠️ align-self OBLIGATOIRE : `.page-head .side` est un conteneur flex en colonne,
   et un flex-item s'étire par défaut sur toute la largeur disponible. Le logo était
   tiré à ~650 px tout en gardant sa hauteur imposée — les lettres s'écrasaient à
   l'horizontale. `width:auto` n'y peut rien : c'est l'étirement du conteneur qui
   décide, pas la largeur intrinsèque. */
.vino-gama{display:block;align-self:flex-start;width:auto;margin:0 0 16px;
  filter:brightness(0);opacity:.9;
  /* Le conteneur est en `column-reverse` : l'axe va du bas vers le haut, donc
     l'ordre le plus élevé se retrouve EN HAUT. C'est là que se lisait « ASA NISI
     MASA » avant, au début du titre — le logo prend sa place. */
  order:99}
.vino-gama--mr{height:74px}
.vino-gama--lpv{height:64px}
.vino-gama--anm{height:112px}
.vino-tipo{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px}
@media (max-width:640px){.vino-gama{height:38px}}

/* Équilibre entre la marque et le nom du vin sur la fiche.
   Le titre y est plus court qu'ailleurs — « GRAND VIN 2019 » contre « NUESTRO
   PROYECTO » — et il écrasait le logo posé juste au-dessus. On réduit d'un cran
   ICI SEULEMENT : `.title-xl` sert aussi aux en-têtes de section, où sa taille
   d'origine est juste. */
#v-vino .title-xl{font-size:clamp(38px,5.2vw,68px);letter-spacing:.12em}
@media (max-width:640px){
  .vino-gama--mr{height:56px}
  .vino-gama--lpv{height:48px}
  .vino-gama--anm{height:84px}
}

/* ── Tienda séparée du site (04/08) ──
   Sur /tienda/ ET les fiches vin, le routeur remplace le menu du site par un menu
   d'achat ; la seule sortie est « Volver al sitio », volontairement en retrait :
   tout le reste de la nav pousse vers la vente. */
.nav-links > a.volver-sitio{color:var(--muted)}
.nav-links > a.volver-sitio:hover{color:var(--cyan-deep)}

/* « Armá tu caja » = LE geste commercial → bouton cyan permanent dans le header
   de la boutique. Même spécificité que « .nav-links > a » + ::before neutralisé :
   le filet animé des liens n'a rien à faire sous un bouton plein. */
.nav-links > a.nav-cta{background:var(--cyan);color:#08181D;padding:0 16px;
  border-radius:2px;border-bottom:0}
.nav-links > a.nav-cta:hover{background:var(--cyan-deep);color:#fff}
.nav-links > a.nav-cta::before{display:none}
@media (max-width:1080px){
  /* Dans le tiroir : CTA pleine largeur, comme l'accès boutique du site */
  .nav-links > a.nav-cta{display:block;margin:0 0 10px;padding:15px 18px;
    text-align:center;height:auto}
}

/* ── Passe conversion de la tienda (04/08) ── */
/* Hero compact : le titre géant repoussait tout produit sous la ligne de
   flottaison — la page doit montrer de quoi acheter dès le premier écran. */
.tienda-head .title-xl{font-size:clamp(34px,4.6vw,58px)}
.tienda-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
/* Preuve par la critique : bande sombre, silencieuse, juste après la réassurance */
.tienda-critica{background:#101315}
.tienda-critica .wrap{display:flex;gap:14px 36px;flex-wrap:wrap;justify-content:center;
  padding:13px 28px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.tienda-critica b{color:var(--cyan);font-weight:700}

/* ── Accès à la boutique dans le tiroir mobile ──
   Masqué sur grand écran : le lien « Tienda online » de l'en-tête y est déjà.
   Sous 980 px, ce lien-là est masqué (.shop-link{display:none}) et rien ne le
   remplaçait — la boutique n'était atteignable par aucun menu sur téléphone.
   Traité en appel à l'action plutôt qu'en simple ligne : c'est la destination
   qui fait vivre le site, elle n'a pas à se fondre dans la liste. */
/* ⚠️ Sélecteur AUSSI spécifique que « .nav-links > a » (ligne ~1194) : ce dernier
   pose display:inline-flex et battait « .drawer-shop{display:none} » — le lien
   tiroir s'affichait donc EN DOUBLE dans l'en-tête desktop (« Tienda online »
   deux fois), sur toutes les pages. Même piège de cascade que le menu mobile. */
.nav-links > a.drawer-shop{display:none}
@media(max-width:980px){
  .nav-links > a.drawer-shop{display:block;margin:0 0 10px;padding:15px 18px;
    background:var(--cyan);color:var(--cyan-ink);text-align:center;
    font-size:12px;font-weight:700;letter-spacing:.18em;border-bottom:0}
  .nav-links > a.drawer-shop:hover,
  .nav-links > a.drawer-shop.active{background:var(--cyan-deep);color:#fff}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODIFICACIONES QUENTIN 25/08/2026 — code couleur par gamme et par terroir,
   header pastel, barre de bénéfices, sélecteur de langue déroulant, bouteilles.
   En fin de feuille À DESSEIN : la position dans la cascade décide (leçon 30/07).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── PANTONE DE LA MARQUE — 2e envoi du 04/09 (nuancier textile transmis par Vivien,
   « à utiliser pour tout le site ») : il REMPLACE le 1er envoi du matin (910 C / 2347 C).
       rouge  17-1564 TCX Fiesta       → #DD4132   (« Fiery Red » sur le nuancier)
       jaune  12-0645 TN  Lemon Tonic  → #FCF951
       bleu   14-4530 TN  Bluefish     → #4DC6E2
   Valeurs sRGB OFFICIELLES (relevées le 04/09 18h50 — encycolorpedia, colorswall,
   icolorpalette concordent). Les mesures faites plus tôt sur l'image du nuancier
   (#DD4132 / #FCF951 / #4DC6E2) étaient justes pour le rouge et le bleu ; le jaune y
   était assombri par l'éclairage de l'image.
   ⚠️ Le nuancier nomme le rouge « Fiery Red », mais 17-1564 TCX s'appelle « Fiesta » ;
   « Fiery Red » est le 18-1664 TCX (#D01C1F, plus profond). Le CODE et la COULEUR du
   chip désignent Fiesta : c'est lui qui est appliqué, signalé à Vivien/Quentin.
   Contrastes : blanc sur Fiesta 4,3:1 (AA en gras/grand seulement) · encre sur Lemon
   Tonic 14,7:1 · encre sur Bluefish 9:1 · Bluefish sur blanc 2:1 (jamais en texte
   courant : pour ça, --cyan-deep #166877 reste, 6,4:1). Le jaune « encre » des titres
   est un olive #7E8018 (4,2:1 sur blanc ; l'ancien #B8901F faisait 2,98:1). */
:root{
  --g-mr:#4DC6E2;      /* Mundo Revés = celeste — Pantone Bluefish */
  --g-lpv:#FCF951;     /* Le Petit Voyage = amarillo — Pantone Lemon Tonic */
  --g-anm:#DD4132;     /* Asa Nisi Masa = rojo — Pantone 17-1564 TCX Fiesta */
  --g-lpv-ink:#7E8018; /* jaune « encre » : lisible en titre sur fond clair */
  --t-chacayes:#7E8018; --t-altamira:#C75B39; --t-gualtallary:#166877;
}

/* ── Header défilé : le fond passe au celeste pastel (token --cyan). Sur ce pastel,
   le blanc ne se lit plus (≈1,7:1) : les liens passent en encre foncée, le logo
   blanc reste (c'est un dessin, l'alt porte le texte). ── */
#hdr.solid .nav-links > a,#hdr.solid .has-sub > a,#hdr.solid .sub-parent,
#hdr.solid .shop-link,#hdr.solid .cart-ico,#hdr.solid .cart-ico b,
#hdr.solid .volver-sitio,#hdr.solid #burger,#hdr.solid .nav-lang-btn{color:var(--cyan-ink)}
#hdr.solid .nav-links > a:hover,#hdr.solid .has-sub > a:hover,#hdr.solid .sub-parent:hover,
#hdr.solid .shop-link:hover,#hdr.solid .cart-ico:hover,#hdr.solid .nav-lang-btn:hover{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:5px}   /* audit 02/09 : le blanc au survol tombait à 1,77:1 sur le pastel ; 04/09 : sur Bluefish, --cyan-deep tombe à 3,2:1 → encre (9:1) + soulignement pour dire le survol */
#hdr.solid .nav-links a.active,#hdr.solid .has-sub > a.active{color:var(--cyan-ink);border-bottom-color:var(--cyan-ink)}
#hdr.solid .nav-links > a.nav-cta{background:var(--cyan-ink);color:#fff;border-color:var(--cyan-ink)}
#hdr.solid .shop-link::before{background:rgba(8,24,29,.35)}

/* ── Sélecteur de langue : « English ▾ », au survol Français / Español ── */
.nav-lang-dd{position:relative}
.nav-lang-dd .nav-lang-btn{gap:6px;cursor:pointer}
.nl-caret{display:none;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:1px;
  transition:transform .2s ease}
.nav-lang-dd:hover .nl-caret,.nav-lang-dd:focus-within .nl-caret{transform:rotate(180deg)}
.nav-lang-sub{left:auto;right:-8px;min-width:150px;padding:8px 0}
.nav-lang-sub button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:9px 18px;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);cursor:pointer}
.nav-lang-sub button:hover,.nav-lang-sub button:focus-visible{color:var(--cyan-deep);background:var(--panel)}
@media (max-width:1080px){.nav-lang-dd{display:none}}   /* le tiroir a sa propre bascule */

/* ── Tienda : barre de bénéfices, une couleur par item (teintes légères + filet) ── */
.strip{border:0;background:var(--bg);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-item{border-left:1px solid var(--line);border-top:3px solid var(--c,var(--cyan));background:var(--cbg,transparent);padding:20px}
.strip-item:first-child{border-left:0}
.strip-item:nth-child(1){--c:var(--g-mr);--cbg:rgba(77,198,226,.18)}
.strip-item:nth-child(2){--c:var(--g-lpv);--cbg:rgba(252,249,81,.38)}
.strip-item:nth-child(3){--c:var(--g-anm);--cbg:rgba(221,65,50,.07)}
.strip-item:nth-child(4){--c:#E9A6B4;--cbg:rgba(233,166,180,.2)}   /* rosado clarito */
.strip-item .k{color:var(--ink)}
.strip-item .v{color:var(--muted)}

/* ── Catalogue : en-tête de gamme à la couleur de la gamme (filet + rectangle du logo,
   cf. .range-hd). Lettrage noir sur celeste et jaune, blanc sur rouge. ── */
.range-mr .range-hd{--rh:var(--g-mr)}
.range-mr .rh-logo{filter:brightness(0)}
.range-lpv .range-hd{--rh:var(--g-lpv)}
.range-lpv .rh-logo{filter:brightness(0)}
.range-anm .range-hd{--rh:var(--g-anm)}
.range-anm .rh-logo{filter:brightness(0) invert(1)}

/* ── Fiche vin : le nom prend la couleur de sa gamme (« toque de color » aligné sur la
   F.T.) ; un champ `color` sur le produit l'emporte, vin par vin ── */
#v-vino.gama-mr .title-xl{color:var(--cyan-deep)}
#v-vino.gama-lpv .title-xl{color:var(--g-lpv-ink)}
#v-vino.gama-anm .title-xl{color:var(--g-anm)}
#v-vino[style*="--wine-color"] .title-xl{color:var(--wine-color)}
.vino-badge{display:inline-block;margin:16px 0 0;padding:7px 13px;border:1px solid currentColor;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-deep)}
#v-vino.gama-lpv .vino-badge{color:var(--g-lpv-ink)}
#v-vino.gama-anm .vino-badge{color:var(--g-anm)}
.vino-shot{margin-left:18px}

/* ── Pages terroir : couleur par terroir (Chacayes amarillo · Altamira terracota ·
   Gualtallary celeste), et les vins en une ligne de liens texte ── */
#v-ig.t-chacayes{--t:var(--t-chacayes)}
#v-ig.t-altamira{--t:var(--t-altamira)}
#v-ig.t-gualtallary{--t:var(--t-gualtallary)}
#v-ig .title-xl .flip{color:var(--t,var(--cyan-deep))}
#v-ig .ig-lead{border-color:var(--t,var(--cyan))}
#v-ig .ig-pull{border-color:var(--t,var(--cyan))}
.ig-wines-line{margin:0 0 22px;font-size:13px;color:var(--body);text-align:center;line-height:2.1}
.ig-wines-line .lab{display:inline-block;margin-right:12px;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ig-wines-line a{color:var(--cyan-deep);border-bottom:1px solid currentColor;text-decoration:none;white-space:nowrap}
.ig-wines-line a:hover{color:var(--ink)}
.ig-wines-line .sep{margin:0 10px;color:var(--muted)}

/* ── Clima y Altitud — Quentin 21/09 : « cette photo avec le filtre jaune je ne l'aime pas ;
   mettre le texte dans le ciel et la photo en fond ». Photo DSC_0899 (cordillère enneigée,
   rangs de vigne au premier plan), plein cadre, calée en haut pour que le ciel reste sous le
   texte ; un voile sombre dégressif depuis le haut garde le blanc lisible sur les nuages.
   Le padding-bottom laisse apparaître les piquets de vigne sous le texte. ── */
/* 28/09, Quentin : « darle un poco más de luminosidad ». Photo retraitée (ombres relevées,
   gamma 0,78 : luminance moyenne 77 → 101) ; le voile reste derrière le texte (blanc à
   4,5:1 au pire, mesuré) mais s'arrête plus tôt : le bas de la photo s'affiche sans filtre.
   Téléphone : voile inchangé, le texte y descend jusqu'au chemin de gravier. */
.uco-clima{padding:clamp(56px,8vw,110px) 0 clamp(240px,30vw,440px);
  background:
    linear-gradient(rgba(12,24,36,.55) 0%,rgba(12,24,36,.45) 50%,rgba(12,24,36,.1) 64%,rgba(12,24,36,0) 76%),
    url(img/clima-andes.webp) center top/cover no-repeat,#2E4A63}
.uco-clima h2{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.uco-clima p{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
@media(max-width:880px){
  .uco-clima{padding-bottom:clamp(180px,42vw,260px);
    background:
      linear-gradient(rgba(12,24,36,.62) 0%,rgba(12,24,36,.5) 55%,rgba(12,24,36,.1) 85%),
      url(img/clima-andes-1000.webp) center top/cover no-repeat,#2E4A63}
}

/* ── Nuestros vinos (accueil) : bouteilles plus grandes, entières, zoom au survol,
   fond au survol dans le ton du lacre ; la liste descend (« bajar Malbec y Criolla ») ── */
.line-card{--lc-list-h:28%;transition:background .6s ease}
.lc-bot.in{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.line-card:hover .lc-bot.in,.line-card:focus-within .lc-bot.in{transform:scale(1.07)}
.line-card.lc-anm:hover{background:#5A1216}   /* lacre rouge ANM — à caler sur la vraie capsule */
.line-card.lc-mr:hover{background:#DCE1E4}    /* capsule gris/noir du Grand Vin */
.line-card.lc-lpv:hover{background:#9DC6DE}   /* à confirmer avec la capsule LPV */
.lc-list{justify-content:flex-end;padding-bottom:24px}
/* 04/09 (photo de Quentin, écran plus petit que celui de Vivien) : avec la réserve à 28 %,
   la liste des 7 vins Le Petit Voyage (242 px) ne tient plus dès que la colonne est plus
   basse que ~860 px — la liste grandit (min-height) vers le HAUT et « LPV Malbec »,
   « LPV Criolla » se posent sur le dessin de l'étiquette, illisibles. Mesuré : 91 px de
   chevauchement à 1024, 54 à 1280, 41 à 1366, 30 à 1440, 16 à 1536, 0 à 1920. Un
   pourcentage fixe ne peut pas savoir combien de noms il abrite : la réserve devient
   « 28 %, ou la hauteur réelle de la liste si elle est plus grande » — nombre de vins par
   colonne, 21 px par nom, le même gap que la liste, 40 px de marges. La bouteille cède
   quelques pixels sur les petits écrans ; les noms se lisent partout. */
.line-card{--lc-n:7;--lc-pad-top:10px;
  --lc-list-h:max(28%, calc(var(--lc-n)*21px + (var(--lc-n) - 1)*clamp(8px,1.1vh,14px) + 30px + var(--lc-pad-top)))}
.line-card.lc-anm{--lc-n:4}
.line-card.lc-mr{--lc-n:10}   /* 15/09 : + Liger et Les Quartz (Quentin) */
.line-card.lc-lpv{--lc-n:7}
/* Même correctif, second temps : sur un écran plus petit, la liste commence là où le dessin
   de l'étiquette est le plus dense (feuilles sombres), et des lettres sombres sur des
   feuilles sombres se « coupent » — sondé : l'empilement est bon, le lien est bien
   l'élément du dessus, c'est un problème de FOND, pas de calque. Le dessin s'efface donc
   sous les noms : dégradé de la couleur de la colonne, transparent en haut de la liste,
   plein 36 px plus bas, sous une marge haute de 40 px pour que le PREMIER nom soit déjà sur
   fond calme (à 1366 px il tombait dans le fondu) — la colonne Asa Nisi Masa a déjà son
   voile (.lc-veil), Mundo Revés est unie. Le voile suit la teinte du survol. */
.line-card.lc-lpv{--lc-pad-top:40px}
.line-card.lc-lpv .lc-list{padding-top:var(--lc-pad-top);background:linear-gradient(180deg,rgba(187,217,236,0) 0,rgba(187,217,236,.97) 36px,#BBD9EC 100%)}
.line-card.lc-lpv:hover .lc-list,.line-card.lc-lpv:focus-within .lc-list{background:linear-gradient(180deg,rgba(157,198,222,0) 0,rgba(157,198,222,.97) 36px,#9DC6DE 100%)}
@media (prefers-reduced-motion:reduce){
  .line-card:hover .lc-bot.in,.line-card:focus-within .lc-bot.in{transform:none}
}

/* ── Pied de page allégé : la ligne légale porte aussi les pages légales ── */
.foot-legal-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.foot-legal-links a{font-size:11px;letter-spacing:.06em;color:var(--body)}
.foot-legal-links a:hover{color:var(--cyan-deep)}

/* ── Pages terroir : la colonne de gauche s'élargissait jusqu'à 74 % de l'écran (à
   1366 px : 1012 px contre 370 px pour le texte, mesuré Playwright 25/08). Cause :
   « GUALTALLARY » en 96 px + interlettrage .14em est un mot insécable de ~1 000 px, et une
   colonne `fr` ne descend jamais sous son contenu minimal. Bornée avec minmax(0, …) et
   titre réduit pour tenir dans sa colonne — défaut antérieur à la refonte du 25/08. ── */
.ig-head{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.ig-head .side{min-width:0}
.ig-head .title-xl{font-size:clamp(34px,4.2vw,72px);letter-spacing:.11em}

/* ── Fanfare ANM dans le bandeau de la tienda (Quentin 25/08, assets 26/08) ──
   Reprend le plan de leur film « Mundo reves.mp4 » : les quatre musiciens de
   l'étiquette traversent le bas de l'image de gauche à droite en dodelinant, et
   l'homme à lunettes jette un œil depuis le bord. Tout en CSS sur des WebP
   détourés (≈ 52 Ko en tout) : pas de vidéo, pas de son — un autoplay sonore est
   bloqué par les navigateurs et pénible de toute façon.
   Deux animations composées : la file avance (translateX sur .anm-fila), chaque
   musicien fait son pas (translateY/rotate sur l'img) avec un décalage — c'est le
   décalage qui donne l'effet de marche ; en phase ils glisseraient comme sur un tapis.
   `container-type:inline-size` sur la piste : la course est en cqw, donc la file
   part hors cadre à gauche et sort hors cadre à droite quelle que soit la largeur
   de la colonne — sans JS pour la mesurer. */
.tienda-head .body{overflow:hidden;padding-bottom:150px}
.anm-banda{position:absolute;left:0;right:0;bottom:0;height:128px;pointer-events:none;
  overflow:hidden;container-type:inline-size}
.anm-fila{position:absolute;left:0;bottom:4px;display:flex;align-items:flex-end;gap:14px;
  animation:anmMarch 28s linear infinite;will-change:transform}
.anm-fila img{display:block;width:auto;transform-origin:50% 100%;
  animation:anmStep .56s ease-in-out infinite alternate}
.anm-fila img:nth-child(1){height:94px;animation-delay:0s}
.anm-fila img:nth-child(2){height:92px;animation-delay:-.21s}
.anm-fila img:nth-child(3){height:96px;animation-delay:-.38s}
.anm-fila img:nth-child(4){height:118px;animation-delay:-.13s}
@keyframes anmMarch{from{transform:translateX(-100%)}to{transform:translateX(100cqw)}}
@keyframes anmStep{from{transform:translateY(0) rotate(-2.2deg)}to{transform:translateY(-5px) rotate(2.2deg)}}
/* Le curieux : caché derrière le bord de la photo (translateX(-100 %) + overflow
   hidden du .body), il sort la tête. Sur téléphone la photo est AU-DESSUS de la
   colonne, il n'a plus de bord d'où surgir → masqué.
   Quentin 04/09 (« faire sortir le dernier personnage plus tôt ») : il ne sortait
   qu'à 8,7 s (62 % de 14 s), quand toute la fanfare était déjà passée — mesuré sur
   la préversion. Il sort maintenant à 2,2 s, reste 4,5 s et revient toutes les 11 s. */
.anm-miron{position:absolute;left:0;top:34px;height:124px;width:auto;pointer-events:none;
  transform:translateX(-100%);transform-origin:0 100%;animation:anmPeek 11s ease-in-out infinite}
@keyframes anmPeek{0%,14%{transform:translateX(-100%) rotate(0)}
  20%,61%{transform:translateX(-14%) rotate(-7deg)}
  68%,100%{transform:translateX(-100%) rotate(0)}}
@media (max-width:880px){
  .anm-miron{display:none}
  .tienda-head .body{padding-bottom:130px}
  .anm-banda{height:108px}
  .anm-fila img:nth-child(1){height:78px}
  .anm-fila img:nth-child(2){height:76px}
  .anm-fila img:nth-child(3){height:80px}
  .anm-fila img:nth-child(4){height:98px}
}
@media (prefers-reduced-motion:reduce){
  /* Sans mouvement : la fanfare posée en bas à droite, le curieux qui regarde. */
  .anm-fila,.anm-fila img,.anm-miron{animation:none}
  .anm-fila{left:auto;right:24px;transform:none}
  .anm-miron{transform:translateX(-14%) rotate(-7deg)}
}

/* ── Champs de saisie : 16 px minimum sur téléphone (audit 26/08) ──────────────
   Sous 16 px, iOS Safari ZOOME la page à la mise au point d'un champ — le site
   part en gros plan, la cliente doit pincer pour revenir, et sur un checkout ça
   se paie en abandons. Étaient concernés : les quatre champs de /contacto/
   (14 px), le code promo du checkout (13 px) et l'inscription newsletter du pied
   (13,33 px). Le champ du pop-up était déjà à 16 px.
   Règle volontairement large : tout nouveau champ hérite du bon comportement. */
@media (max-width:880px){
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=search],input[type=password],select,textarea{font-size:16px}
  /* Spécificité : .cf-wp .cf-row input (0,2,1) battait le sélecteur d élément. */
  .cf-wp .cf-row input,.cf-wp .cf-row textarea{font-size:16px}
}

/* ══ Audit 02/09/2026 — accessibilité, mobile, impression ══════════════════════ */
/* Fanfare ANM en pause hors écran (FJ-08) : 6 animations infinies tournaient en permanence. */
.is-off .anm-fila,.is-off .anm-fila img,.is-off .anm-miron{animation-play-state:paused!important}
/* Cibles tactiles ≥ 44 px sur écran tactile seulement (A-16) : le desktop garde ses proportions. */
@media (pointer:coarse){
  .stepper button{width:40px;height:40px}
  .add{width:44px;height:44px}
  .chip{min-height:44px}
  #burger,.cart-ico{min-height:44px;min-width:44px;justify-content:center}
  .lang-switch button{min-height:40px;padding:8px 10px}
  .foot-legal-links a{padding:8px 0;display:inline-block}
}
/* Anneau de focus visible sur les fonds sombres (A-15). */
#gate :focus-visible,.tienda-critica :focus-visible,#mpc-consent :focus-visible{outline-color:#fff}
/* Ancres sous le header fixe (FJ-19). */
#caja,#catalog,#cuvees,#arrepentimiento{scroll-margin-top:calc(var(--hdr-h,68px) + 12px)}
/* Mode sombre : titres de page en couleur fixe #444 devenaient invisibles (A-03) + contrôles natifs (A-20). */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark}
  .wp-head .title-xl,.wp-head .title-xl .l1,.wp-head .title-xl .flip{color:var(--ink)}
  .wp-head .side .kicker{color:var(--muted)}
}
/* Impression (A-22) : sans ça le header fixe se superposait en haut de chaque page (CGV, succès de commande). */
@media print{
  #hdr,.legal-hdr,#mpc-consent,.soc-rail,.nl-band,.anm-banda,.anm-miron,#gate,#mr-preview-bar,#nlPop,#cartGo,#winePeek{display:none!important}
  .co-main,.legal-main,main{padding-top:0!important}
  .co-side{position:static!important}
  body{background:#fff;color:#000}
}

/* Audit perf 02/09 (PERF-03) : révélé sans transition quand l’élément est déjà à l’écran. */
.reveal.no-anim,.zin.no-anim{transition:none!important;animation:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   QUENTIN 04/09/2026 (WhatsApp) — Novedades, lacres, musique, remise sur la fiche.
   En fin de feuille à dessein : la position dans la cascade décide.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Novedades : carrousel en tête de tienda, masqué s'il est vide (renderNovedades) ── */
.novedades{padding:clamp(30px,4vw,48px) 0 6px;border-bottom:1px solid var(--line)}
.novedades[hidden]{display:none!important}
/* Vivien 04/09 : la phrase se lit SOUS le titre (elle était calée à droite, en face du titre,
   et flottait loin de lui sur un grand écran). */
.nov-hd{margin:0 0 22px}
.nov-hd .kicker{display:block}
.nov-hd h2{font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:8px 0 0}
.nov-hd p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);letter-spacing:.02em;max-width:56ch}
.nov-wrap{position:relative}
.nov-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px 2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nov-track::-webkit-scrollbar{display:none}
.nov-track .card{flex:0 0 clamp(210px,23vw,250px);scroll-snap-align:start}
.nov-arrow{position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--yellow);color:var(--yellow-ink);font:inherit;font-size:24px;line-height:1;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;transition:.2s}
.nov-arrow:hover{background:var(--ink);color:var(--yellow)}
.nov-arrow.prev{left:-16px}
.nov-arrow.next{right:-16px}
.nov-wrap.no-scroll .nov-arrow{display:none}
@media (max-width:880px){
  .nov-arrow{display:none}
  .nov-track .card{flex-basis:min(62vw,240px)}
}
@media (prefers-reduced-motion:reduce){.nov-track{scroll-behavior:auto}}

/* ── Lacre : les + / − et le cadre de chaque vin prennent la couleur de la capsule de cire
   de SA bouteille (champ « Color del lacre » du panneau). Le JS pose --lacre, --lacre-ink
   (encre lisible SUR la teinte) et --lacre-txt (la teinte pour du texte, ou l'encre si elle
   est trop claire). Sans champ : gris neutre d'origine.
   Vivien 04/09 : « que la couleur s'active uniquement quand tu passes la souris sur le vin » —
   21 cadres colorés en permanence, c'était brouillon. Au repos la carte et la ligne du
   constructeur gardent le gris neutre ; la teinte n'apparaît qu'au survol du vin (ou au
   focus clavier, :focus-within, pour ne pas priver qui navigue au Tab). Le cadre ne change
   pas d'épaisseur (1 px de bordure + 1 px d'anneau intérieur = le 2 px d'avant, sans que la
   carte bouge). ── */
.card[style*="--lacre"]:hover,.card[style*="--lacre"]:focus-within{border-color:var(--lacre);
  box-shadow:0 22px 40px -26px rgba(0,0,0,.42),inset 0 0 0 1px var(--lacre)}
.card[style*="--lacre"]:hover .add,.card[style*="--lacre"]:focus-within .add{border-color:var(--lacre);color:var(--lacre-txt)}
.card[style*="--lacre"] .add:hover:not(:disabled){background:var(--lacre);border-color:var(--lacre);color:var(--lacre-ink)}
.pick[style*="--lacre"]:hover,.pick[style*="--lacre"]:focus-within{border-color:var(--lacre);box-shadow:inset 3px 0 0 var(--lacre)}
.pick[style*="--lacre"]:hover .stepper button,.pick[style*="--lacre"]:focus-within .stepper button{border-color:var(--lacre);color:var(--lacre-txt)}
.pick[style*="--lacre"] .stepper button:hover:not(:disabled){background:var(--lacre);border-color:var(--lacre);color:var(--lacre-ink)}
.pick[style*="--lacre"] .stepper button:disabled{opacity:.35}
.pick .pr .pk-off{color:#B0413A;font-weight:700;margin-left:4px}

/* ── Remise sur la fiche vin (elle ignorait le « Descuento % ») + badge Novedad ── */
.vino-price .was{margin-right:6px}
.vino-off{color:#B0413A;font-weight:700}
#v-vino .vino-badge--nov{background:var(--g-anm);border-color:var(--g-anm);color:#fff;margin-right:8px}

/* ── Música : la fanfare d'Asa Nisi Masa, en option et sans peser — l'audio
   (assets/audio/anm-fanfarria.m4a, 268 Ko) n'est demandé qu'au premier clic. ── */
.btn-music{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;border:1px solid var(--line);
  background:transparent;font:inherit;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--body);cursor:pointer;transition:.2s}
.btn-music:hover{border-color:var(--ink);color:var(--ink)}
.btn-music[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
.btn-music .eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.btn-music .eq i{display:block;width:3px;height:12px;background:currentColor;transform:scaleY(.3);transform-origin:bottom}
.btn-music[aria-pressed=true] .eq i{animation:mrEq .7s ease-in-out infinite alternate}
.btn-music .eq i:nth-child(2){animation-delay:-.25s}
.btn-music .eq i:nth-child(3){animation-delay:-.5s}
@keyframes mrEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.btn-music[aria-pressed=true] .eq i{animation:none;transform:scaleY(.7)}}

/* ══ Audit mobile 27/09 — EN FIN DE FICHIER à dessein (l'ordre décide la cascade) ══ */
/* Étiquettes de la fiche technique et « Caja x6 · …/botella » à 9,5 px : illisibles sur
   un téléphone. 11 px reste dans le parti des capitales espacées du WordPress. */
.fspec dt,.fspecs-cortos .fspec dt,.fspecs-largos dt{font-size:11px}
@media (max-width:547px){.price small{font-size:11px}}
/* Pastilles du carrousel I.G. : 3 px de haut sous le doigt. Zone étendue par un
   pseudo-élément transparent, le dessin ne bouge pas (même parade que .lc-list a). */
.ig-cr-dot::before{content:"";position:absolute;left:-4px;right:-4px;top:-18px;bottom:-18px}
@media (pointer:coarse){
  /* La règle « min-height:0!important » plus haut annulait les 44 px de ce lien, seul
     moyen de retirer son consentement. */
  #mpc-manage-cookies{display:inline-flex!important;align-items:center;min-height:44px!important}
  /* Icônes Facebook / Instagram du pied de page : 17 px touchables → 31 px, sans
     déplacer le dessin (marge négative = rembourrage). */
  .foot-icons a{padding:7px;margin:-7px}
}
/* Pages I.G. sur téléphone (le bug mobile le plus visible) : `.ig-head` en deux colonnes,
   écrit plus haut SANS media query, battait la règle mobile une colonne de `.page-head`
   (même poids, écrite avant). Résultat mesuré à 390 px : titre « GUALTALLARY » coupé en
   quatre morceaux dans une colonne de 144 px, texte à deux mots par ligne, et à 320 px
   la page s'élargissait jusqu'à pousser le bouton du menu hors de l'écran. */
@media (max-width:880px){
  .page-head,.ig-head{grid-template-columns:minmax(0,1fr)}
  .ig-head .side{align-items:flex-start;text-align:left}
}
/* Un mot plus large que sa colonne (GEWURZTRAMINER) poussait la colonne de texte hors
   de l'écran à 1024 px, et se cassait sans tiret sur téléphone (« GEWURZTRA / MINER »).
   Césure du dictionnaire de la langue de la page, coupe franche seulement en dernier
   recours. */
.page-head > .side{min-width:0}
#v-vino .title-xl,.ig-head .title-xl{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
#v-vino .page-head .side .vino-tipo{margin-top:12px}
/* Flèches du carrousel I.G. posées à -14 px du bord : entre 769 et 1100 px le rail
   touche l'écran et la flèche « suivante » sortait de 14 px (page élargie). */
@media (min-width:769px) and (max-width:1100px){
  .ig-cr-nav.prev{left:8px}
  .ig-cr-nav.next{right:8px}
}
/* Les apparitions « depuis la droite » (.reveal.fx-right, translateX 48 px) élargissaient
   la page tant qu'elles n'étaient pas révélées : à 320 px Chromium dézoomait jusqu'à
   347 px au chargement. `clip` coupe sans créer de conteneur de défilement (le sticky
   reste intact) ; un navigateur qui ne le connaît pas garde le comportement d'avant. */
main{overflow-x:clip}
/* En une colonne, le bloc gris de tête des pages I.G. gardait ses 56 vh de haut pour un
   titre d'une ligne : 300 px de gris vide avant le texte sur téléphone. */
@media (max-width:880px){
  .ig-head{min-height:0}
  .ig-head .side{min-height:0;padding-top:56px;padding-bottom:44px}
}
/* Tienda sur petit téléphone (≤ 400 px, capture à 320) :
   - le nom de gamme du bandeau se cassait en « MUND / O / REVÉS » (le coupe-mot des titres
     mobiles s'appliquait à ce h3 de 78 px de large) : logo un peu plus petit, coupe aux espaces ;
   - dans les cartes de 126 px, prix + bouton « + » ne tenaient pas côte à côte : le bouton
     sortait de sa carte et mordait la voisine ou le bord de l'écran. Il passe sous le prix,
     pleine largeur : plus facile à viser au pouce. */
@media (max-width:400px){
  .range-hd{gap:12px}
  .rh-logo-box{width:118px}
  .rh-logo,.rh-logo--anm{height:50px}
  .rh-logo--lpv{height:46px}
  .rh-txt h3{font-size:13.5px;letter-spacing:.12em;overflow-wrap:normal;word-break:normal}
  .card .foot{flex-direction:column;align-items:stretch;gap:10px}
  .card .foot .add{width:100%;height:40px}
}
/* Fond du voile +18 sur téléphone : il chargeait la photo de 1600 px (221 Ko) même sur un
   écran de 390 px, alors que la version 900 px (80 Ko) existe et que le hero l'utilise déjà.
   Premier visiteur mobile = −140 Ko sur la page d'entrée, quelle qu'elle soit (Lighthouse
   mobile du 27/09). */
@media (max-width:900px){
  .gate-bg{background-image:linear-gradient(rgba(8,14,16,.62),rgba(8,14,16,.78)),url('img/home-1-900.webp')}
}

/* ══ Revue visuelle du 27/09 (captures 320 → 1440) — en fin de feuille à dessein ══ */
@media (max-width:880px){
  /* « Nuestro proyecto » : l'intro restait en deux colonnes de 115-150 px (2 mots par
     ligne) — `.wp-head .head-cols` (0,2,0) battait la règle mobile `.cols`. */
  .wp-head .head-cols{grid-template-columns:minmax(0,1fr)}
  /* Contacto : 540 px de gris vide avant le formulaire. */
  .co-head .side{min-height:0;padding-top:44px;padding-bottom:36px}
  /* Section Mendoza de l'accueil : texte gris (--body) sur fond presque noir, 2,3:1. */
  .mz-txt p{color:rgba(255,255,255,.9)}
  /* Valle de Uco : deux longs paragraphes centrés, carte des I.G. collée au texte. */
  .uco-geo,.uco-igs p{text-align:left}
  .uco-igs figure{margin-top:34px}
  /* Fiches vin : ~300 px de vide avant l'accroche et la bouteille sur le premier écran. */
  #v-vino .page-head .side{min-height:0;padding-top:40px;padding-bottom:30px}
  #v-vino .page-head .body{padding-top:30px;padding-bottom:30px}
}
@media (max-width:1080px){
  /* Logo du header collé au bord de l'écran (le « M » rogné, déjà vu dans un reel). */
  #hdr .nav{padding-left:16px;padding-right:6px}
  /* Chevron de « Vinos » (un bouton) : il ne se retournait pas à l'ouverture, celui de
     « Nuestras uvas » (un lien) si. */
  .has-sub.open > .sub-parent::after{transform:translateY(2px) rotate(225deg)}
  /* Tiroir ouvert : l'icône devient une croix, on voit comment le refermer. */
  #burger[aria-expanded="true"]{font-size:0}
  #burger[aria-expanded="true"]::before{content:"✕";font-size:22px;line-height:1}
}
/* Logos de gamme du sous-menu « Vinos » : PNG blancs sur fond clair, invisibles (un blanc
   inexpliqué de 34 px devant chaque gamme). Passés à l'encre ; tels quels en mode sombre. */
.sub-hd img{filter:brightness(0);opacity:.72}
@media (prefers-color-scheme:dark){.sub-hd img{filter:none;opacity:.85}}
:root[data-theme="dark"] .sub-hd img{filter:none;opacity:.85}
/* Voile +18 sur petit écran (320 × 568) : le sélecteur ES/EN/FR recouvrait le logo. */
@media (max-height:640px){
  #gate{align-items:flex-start;padding-top:78px;overflow-y:auto}
}
/* Pages I.G. à 320 px : « GUALTALLA / RY » coupé en plein mot. Le nom tient sur une ligne. */
@media (max-width:400px){
  .ig-head .title-xl{font-size:clamp(22px,7.4vw,30px);letter-spacing:.06em}
}
/* Accueil, carte Mundo Revés sur téléphone : ses 10 vins occupaient toute la carte, le logo
   recouvrait la bouteille et touchait « GRAND VIN ». Deux colonnes de 5. */
@media (max-width:600px){
  .line-card.lc-mr{--lc-n:5}
  .line-card.lc-mr .lc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;align-content:end;column-gap:8px}
  .line-card.lc-mr .lc-list a{letter-spacing:.14em;font-size:12px}
}
/* Pages légales à 320 px : « ARREPENTIMIE / NTO » (mot retourné coupé) et « Y » seul. */
@media (max-width:360px){
  .legal-title{font-size:22px;letter-spacing:.06em}
  .legal-title .flip{white-space:nowrap}
}
/* Badge « NEW / NOUVEAUTÉ » des Le Petit Voyage : texte olive de la gamme sur fond rouge,
   1:1. La règle de gamme (1,2,0) battait celle du badge. */
#v-vino .vino-badge.vino-badge--nov{color:#fff}
/* Fiches EN/FR : deux boutons empilés de largeurs et hauteurs différentes. */
@media (max-width:547px){
  .vino-cta .btn{flex:1 1 100%;justify-content:center;text-align:center}
}
/* Textes de fiche technique commençant par une minuscule (données collées telles quelles). */
.fspec dd::first-letter{text-transform:uppercase}
@media (pointer:coarse){
  /* Bouton légal « Botón de arrepentimiento » : sans marge intérieure, texte collé au cadre
     (la règle tactile des liens légaux écrasait son padding). */
  .foot-legal-links a.foot-arrep{padding:8px 14px}
}
/* Pages I.G. : le premier lien « autres terroirs » était collé à la bande grise « Vinos de… »
   (padding-top:0 en ligne). Respiration rétablie. */
.ig-others-band{padding-top:clamp(28px,5vw,48px)}
/* Tiroir mobile : à 36 px de haut le logo de gamme n'est qu'une tache ; le nom de la gamme
   suffit, aligné sur les vins. */
@media (max-width:1080px){.sub-hd img{display:none}}
/* « Nuestro proyecto » en grand écran : le mot retourné « PROYECTO » débordait de la colonne
   grise et sa première lettre était coupée au bord gauche de l'écran (10 px à 1024 et 1440). */
@media (min-width:881px){
  .wp-head .title-xl{font-size:clamp(34px,3.9vw,64px)}
}
/* Valle de Uco sur téléphone : l'intro du WordPress coupe UNE phrase entre ses deux colonnes
   (« …en una dirección » | « sur-oeste y norte-este »). Empilées, elles laissaient un faux
   saut de paragraphe au milieu de la phrase : on les fait couler comme un seul texte. */
@media (max-width:880px){
  #v-terroir .head-cols{display:block}
  #v-terroir .head-cols > div,#v-terroir .head-cols > div > p{display:inline}
}

/* ══ Revue visuelle « boutique » du 27/09 (captures du site corrigé) ══ */
/* Bande newsletter : son padding vertical en raccourci remettait les côtés à 0 ; titre, champ et
   bouton démarraient collés au bord gauche de l'écran. */
.wrap.nl-grid{padding-left:28px;padding-right:28px}
/* Badges des cartes : « 93 PTS DESCORCHADO » coupé à 320 px, sur deux lignes par-dessus le goulot. */
.card-badges{right:10px}
@media (max-width:420px){
  .card-badge{font-size:10px;letter-spacing:.05em;padding:6px 7px;line-height:1.15}
}
/* « Armá tu caja » à 320 px : la colonne du nom faisait 60 px, noms tronqués et millésime perdu.
   Le stepper passe sous le nom, le nom s'écrit en entier. */
@media (max-width:400px){
  .pick{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px}
  .pick .stepper{grid-column:1 / -1;justify-self:end}
  .pick .nm{-webkit-line-clamp:unset;display:block;overflow:visible}
  /* Cartes pleine largeur du bouton : « + » seul ajoutait une caja de 6 alors que le « + » du
     constructeur ajoute UNE bouteille. Le bouton dit ce qu'il fait. */
  .card .foot .add{font-size:12px;font-weight:600;letter-spacing:.16em}
  .card .foot .add::after{content:" Caja"}
}
/* La critique de la tienda : entrées centrées sur une ligne, alignées à gauche sur deux :
   bord gauche en escalier sur téléphone. */
@media (max-width:600px){.tienda-critica .wrap{justify-content:flex-start}}
/* Fiches vin : badges « NOVEDAD » / « 95 PTS » étirés en barres pleine largeur dans l'en-tête. */
.vino-badge{align-self:flex-start;width:max-content;max-width:100%}
/* Lien « bottle shot » décalé de 18 px sous « Ficha técnica » sur téléphone. */
@media (max-width:547px){.vino-shot{margin-left:0}}
/* Titres de fiche sur téléphone : « CHARDO / NNAY » à 320 px. Le corps suit la largeur pour
   qu'un cépage de 10 lettres tienne sur une ligne ; les plus longs gardent leur césure. */
@media (max-width:420px){
  #v-vino .title-xl{font-size:clamp(26px,8.4vw,38px);letter-spacing:.08em}
}
/* Quentin 28/09 : titres coupés en plein mot (« LPV PEDR / O », « SAUVIGNO / N ») à toutes
   les largeurs d'ordinateur. Le corps devient le plus petit de : la taille voulue, et la
   taille à laquelle le plus long mot (--mot lettres, posé par router.php) remplit la
   colonne. 0,9 = largeur d'une lettre de ce Montserrat 200 majuscule, espacement .12em
   compris, mesurée à 0,87 au pire (CHARDONNAY, PEDRO). Plus de coupure « n'importe où » :
   elle faisait aussi rétrécir la colonne (contribution min-content nulle). */
#v-vino .page-head > .side{container-type:inline-size}
#v-vino .title-xl{font-size:min(clamp(38px,5.2vw,68px),calc(100cqi / (var(--mot,8) * .9)));
  overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:420px){
  #v-vino .title-xl{font-size:min(clamp(26px,8.4vw,38px),calc(100cqi / (var(--mot,8) * .86)))}
}
/* Notes empilées de largeurs différentes (bord droit en escalier) ; « Envío gratis » collé. */
@media (max-width:547px){.punt-list{flex-direction:column;align-items:stretch}}
.vino-note{margin-top:22px}
/* Boutons de l'intro de la tienda de largeurs différentes sur téléphone. */
@media (max-width:600px){.tienda-cta .btn{width:100%;justify-content:center}}
/* Survol collé au doigt : après un tap, le bouton jaune devenait blanc à liseré jaune (il
   paraissait désactivé). Sur écran tactile, on garde l'état normal. */
@media (hover:none){
  .btn-cyan:hover{background:var(--cyan);color:var(--cyan-ink);border-color:var(--cyan)}
  .btn-yellow:hover{background:var(--yellow);color:var(--yellow-ink);border-color:var(--yellow)}
  .btn-dark:hover{background:var(--ink);color:var(--bg)}
  .btn-line:hover{border-color:var(--line)}
}
/* En-tête défilé (barre cyan) : le logo se recollait au bord gauche — la règle « .solid »
   (plus spécifique) remettait la marge à 0. */
@media (max-width:1080px){#hdr.solid .nav{padding-left:16px;padding-right:6px}}
/* CUIT coupé au tiret sur deux lignes. */
.cuit{white-space:nowrap}
/* iPad à l'horizontale (981 à 1080 px) : le menu passe en tiroir dès 1080 px et masque le lien
   « Tienda online » du header, mais l'entrée tienda du tiroir n'apparaissait que sous 980 px :
   la boutique n'était joignable par aucun menu. Le masquage hors Argentine (!important) reste. */
@media (min-width:981px) and (max-width:1080px){
  .nav-links > a.drawer-shop{display:block;margin:0 0 10px;padding:15px 18px;
    background:var(--cyan);color:var(--cyan-ink);text-align:center;
    font-size:12px;font-weight:700;letter-spacing:.18em;border-bottom:0}
}