/* ============================================================
   cdixvins.fr — reproduction fidèle
   Tokens + chrome partagé + template Accueil
   Valeurs issues de build/app.0436183f.css et du BRIEF-COMPLET
   ============================================================ */

/* ---------- FONTS (auto-hébergées) ---------- */
@font-face{font-display:swap;font-family:"Astronoma";font-style:normal;font-weight:700;src:url(fonts/Astronoma.woff2) format("woff2"),url(fonts/Astronoma.woff) format("woff")}
@font-face{font-display:swap;font-family:"CentITC Bk BT";font-style:normal;font-weight:400;src:url(fonts/CenturyITCbyBT-Book.woff2) format("woff2"),url(fonts/CenturyITCbyBT-Book.woff) format("woff")}
@font-face{font-family:"BebasNeue-Regular";font-style:normal;font-weight:400;src:url(fonts/BebasNeue-Regular.ttf) format("truetype")}
@font-face{font-family:"iconfont";font-display:block;src:url(fonts/iconfont.woff2) format("woff2"),url(fonts/iconfont.woff) format("woff"),url(fonts/iconfont.ttf) format("truetype")}

/* ---------- TOKENS ---------- */
:root{
  --c-primary:#ab3433; --c-primary-dark:#942424; --c-primary-alt1:#a22a3d; --c-primary-alt2:#b33b3f;
  --c-wine-rose:#a83957;
  --c-accent:#ff374d; --c-accent-2:#e62347; --c-accent-3:#ff7a5a;
  --c-text:#1a051d; --c-black:#000; --c-white:#fff;
  --c-grey-bg:#eff1f6; --c-grey-bg-2:#e6e9ef;
  /* --c-sparkling-bg réaligné sur --c-sparkling (2026-08-10, audit
     accessibilité RGAA 3.2) : #a59140 sous du texte blanc ne fait que
     3,12:1 (seuil 4,5:1) — actuellement sans usage actif dans ce fichier
     (l'ancien fond de footer effervescent qui l'utilisait a été retiré une
     session précédente), mais gardé aligné au cas où un futur usage
     réapparaisse, pour ne jamais réintroduire cet échec par surprise. */
  --c-sparkling:#836d21; --c-sparkling-bg:#836d21; --c-catalog:#c25007; --c-catalog-bg:#eb6109;
  --c-region-purple:#591a42;
  --c-rose-deep:#be4f69;        /* aplat rosé des cartes sélection */
  --c-rose-pale:#f7e9ee;        /* fond photo des cartes vin */
  --c-cream:#fbf4f4;            /* fond crème (blocs éditoriaux) */
  --c-cream-2:#efe6e6;
  --c-muted:#6b5d5d;            /* texte secondaire sur fond clair */
  --c-muted-2:#7a6a6a;
  --c-success:#1c8a5a;
  --c-field-border:#8795b2;     /* bordure de champ, ratio 3:1 (RGAA 3.3) */
  --c-focus-ring:#14141e;       /* anneau de focus extérieur (RGAA 10.7) */
  --c-focus-halo:#fff;          /* anneau de focus intérieur */
  --c-contrast-red:#8a0f0f;     /* rouge renforcé, mode contraste élevé */

  --font-display:"Astronoma",sans-serif;
  --font-body:"Heebo",sans-serif;
  --font-serif:"CentITC Bk BT",serif;
  --font-cond:"BebasNeue-Regular",sans-serif;
  --font-icon:"iconfont";

  --wrapper-max:1366px; --wrapper-padx:20px;
  /* Marge gauche du contenu normal (bord du .wrapper), pour les bandeaux
     "plein écran à droite seulement" façon cdixvins.fr (repéré 2026-08-07 :
     bandeau des régions/effervescents collé au bord droit mais PAS au bord
     gauche, qui garde le même alignement que le reste du contenu). */
  --bleed-inset:max(var(--wrapper-padx), calc((100vw - var(--wrapper-max)) / 2 + var(--wrapper-padx)));
  --section-py:50px;            /* <1024 ; passe à 72 ≥1024 */
  --intro-h:280px;              /* <768 ; passe à 440 ≥768 */
  --topbar-h:70px;              /* <1296 ; passe à 76 ≥1296 */
  --radius-pill:32px;
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;font-variant-ligatures:none}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-white);color:var(--c-text);font-family:var(--font-body);font-size:17px;line-height:1.55;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--c-primary);text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}
.section-title,.section-title span,.card_title,.card-selection_title,.card_discovery_title,.card-macave h3,.subtitle{font-variant-ligatures:none;-webkit-font-feature-settings:"liga" 0,"calt" 0,"dlig" 0;font-feature-settings:"liga" 0,"calt" 0,"dlig" 0}

/* ---------- ICONFONT ---------- */
.icon{font-family:var(--font-icon);font-style:normal;font-weight:400;line-height:1;display:inline-block;speak:none;-webkit-font-smoothing:antialiased}
.icon-pin::before{content:"\ea33"}
.icon-search::before{content:"\ea39"}
.icon-x::before{content:"\ea45"}
.icon-heart::before{content:"\ea26"}
.icon-heart-empty::before{content:"\ea25"}
.icon-arrow-up-right::before{content:"\ea06"}
.icon-arrow-long-left::before{content:"\ea03"}
.icon-arrow-long-right::before{content:"\ea04"}
.icon-arrow-long-up::before{content:"\ea05"}
.icon-facebook-f::before{content:"\ea19"}
.icon-chevron-down::before{content:"\ea0d"}
.icon-filter::before{content:"\ea20"}
.icon-info-circle::before{content:"\ea27"}

/* ---------- LAYOUT ---------- */
.wrapper{max-width:var(--wrapper-max);margin:0 auto;padding-left:var(--wrapper-padx);padding-right:var(--wrapper-padx)}
.wrapper-medium{max-width:1024px;margin:0 auto;padding-left:var(--wrapper-padx);padding-right:var(--wrapper-padx)}
.section{position:relative;padding-top:var(--section-py);padding-bottom:var(--section-py)}
.bg-grey{background:var(--c-grey-bg)}
.text-center{text-align:center}
/* Contenu réservé aux lecteurs d'écran. Manquait en tant que règle CSS
   réelle (2026-08-10, audit accessibilité) — chaque usage compensait avec
   un style="" inline dupliquant cette même technique (chrome.php,
   wines.php, stores.php), sauf tricks.php (statut de la galerie astuce) qui
   n'avait aucun style inline et s'affichait donc en clair à l'écran au lieu
   d'être masqué. clip-path (moderne) + clip (repli navigateurs anciens). */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.marg-top-50{margin-top:50px}

/* ---------- HERO ---------- */
.intro{position:relative;background:var(--c-black);color:var(--c-white)}
.intro.bg-with-glasses{background:var(--c-black) url(img/hero-mobile.png) no-repeat center bottom/cover}
.intro.bg-with-glasses::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));pointer-events:none;z-index:1}
.intro_wrapper{position:relative;z-index:2;max-width:1920px;margin:0 auto;min-height:var(--intro-h);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:calc(var(--topbar-h) + 24px) var(--wrapper-padx) 40px}
.intro_catchphrase{color:var(--c-white);font-family:var(--font-body);font-weight:600;font-size:20px;line-height:1.5;margin:0}
.intro_catchphrase .subtitle{display:block;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.3;margin-top:8px}
/* Le mot "secondaire" (ex. "Les" de "Les vins") héritait sinon la police du
   corps de texte (--font-body) au lieu de la police empattée dédiée : les 2
   typographies étaient bien 2 valeurs différentes en CSS, mais l'écart
   visuel entre Heebo et Astronoma était trop subtil pour se voir vraiment —
   contrairement à cdixvins.fr, qui utilise la police empattée ici. */
.intro_catchphrase .font-heading-secondary{font-family:var(--font-serif);font-weight:400}

/* ---------- HEADER ---------- */
#header{position:absolute;top:0;left:0;width:100%;z-index:101;color:var(--c-white)}
.header_topbar{min-height:var(--topbar-h);padding-top:16px}
.topbar_wrapper{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--wrapper-max);margin:0 auto;padding:0 var(--wrapper-padx)}
.topbar_logo{display:block;flex-shrink:0}
.topbar_logo img{display:block;width:180px;height:58px}
.topbar_right{display:inline-flex;align-items:center;gap:8px}
/* Sur les téléphones étroits (iPhone SE 375px, iPhone 12/13 390px), le logo
   (180px) + les icônes de droite ne rentrent plus dans la largeur
   disponible ; comme la ligne est calée à droite (justify-content:flex-end
   plus haut dans le HTML) et que le logo a flex-shrink:0, le débordement
   poussait le logo hors de l'écran à gauche au lieu de le réduire
   (constaté 2026-08-11, capture iPhone SE/12). On réduit sa taille fixe en
   dessous de ce seuil pour que tout rentre. */
@media (max-width:400px){
  .topbar_logo img{width:120px;height:39px}
}
.btn-icon-white{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--c-white);cursor:pointer;transition:background .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)ckground .3s}
.btn-icon-white:hover{background:rgba(255,255,255,.15);transform:translateY(-1px) scale(1.06)}
.btn-icon-white:active{transform:scale(.94)}
.btn-icon-white .icon{font-size:22px}
.bookmarks_link svg{width:19px;height:19px;fill:currentColor}
.navburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:70px;border:0;background:transparent;color:var(--c-white);cursor:pointer}
.navburger .navsteak,.navburger .navsteak::before,.navburger .navsteak::after{display:block;width:28px;height:2px;background:var(--c-white);content:""}
.navburger .navsteak{position:relative}
.navburger .navsteak::before{position:absolute;top:-8px}
.navburger .navsteak::after{position:absolute;top:8px}

/* select magasin */
.select-container{position:relative;display:none}
.select-container select{appearance:none;background:transparent;border:1px solid var(--c-white);color:var(--c-white);height:44px;width:330px;max-width:100%;padding:0 40px 0 16px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:14px;cursor:pointer}
.select-container select option{color:var(--c-text)}
.select-container .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none}
.select-container label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* select magasin custom (listbox) */
.cselect{position:relative;width:330px;max-width:100%}
.cselect.is-enhanced>select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cselect_btn{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 14px;border:1px solid var(--c-white);border-radius:var(--radius-pill);background:transparent;color:var(--c-white);font-family:var(--font-body);font-size:15px;cursor:pointer;text-align:left;transition:background .3s ease,border-color .3s ease}
.cselect_btn:hover{background:rgba(255,255,255,.12)}
.cselect_btn:focus-visible{outline:2px solid var(--c-white);outline-offset:2px}
.cselect_btn .cselect_val{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cselect_btn .cselect_caret{flex:0 0 auto;position:static;top:auto;right:auto;width:16px;text-align:center;font-size:15px;transform:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cselect_clear{flex:0 0 auto;position:static;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:9px;line-height:1;color:var(--c-white);background:rgba(255,255,255,.18);cursor:pointer;transition:background .25s ease,transform .25s ease}
.cselect_clear .icon{display:block;line-height:1}
.cselect_clear:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}
.cselect_clear:focus-visible{outline:2px solid var(--c-white);outline-offset:2px}
.cselect.is-open .cselect_caret{transform:rotate(180deg)}
.cselect_clear[hidden]{display:none}
.cselect_clear .icon{position:static;top:auto;right:auto;transform:none}
.cselect_panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:180;background:#fff;border:1px solid var(--c-grey-bg-2);border-radius:12px;box-shadow:0 14px 34px rgba(26,5,29,.18);max-height:320px;overflow-y:auto;padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility .22s}
.cselect.is-open .cselect_panel{opacity:1;visibility:visible;transform:none}
.cselect_opt{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--c-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .18s ease,color .18s ease}
.cselect_opt[aria-selected="true"]{font-weight:700;color:var(--c-primary)}
.cselect_opt.is-active,.cselect_opt:hover{background:var(--c-grey-bg)}
html.a11y-contrast .cselect_panel{border-color:#000}
html.a11y-contrast .cselect_opt.is-active,html.a11y-contrast .cselect_opt:hover{background:#000;color:#fff}

/* menu desktop (caché < 1296) */
.menu_wrapper{display:none}
.header_wrapper{max-width:var(--wrapper-max);margin:0 auto;padding:0 var(--wrapper-padx)}
.nav_logo{display:none}
.menu{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.menu>li>a{display:block;color:var(--c-white);font-size:14px;text-transform:uppercase;padding:10px 12px 16px;position:relative}
.menu>li>a::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--c-white);opacity:0;transition:opacity .3s}
.menu>li>a:hover::after,.menu>li>a.is-active::after{opacity:1}

/* ---------- BOUTONS ---------- */
.btn-border-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:16px;padding:9px 18px;min-height:44px;background:transparent;border:1px solid var(--c-primary);border-radius:var(--radius-pill);color:var(--c-primary);cursor:pointer;transition:background .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);text-align:center}
.btn-border-primary:hover{background:var(--c-primary);color:var(--c-white);transform:translateY(-2px);box-shadow:0 8px 20px rgba(171,52,51,.28)}
.btn-border-primary:active{transform:translateY(0);box-shadow:0 3px 10px rgba(171,52,51,.2)}
.btn-border-primary .icon{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.btn-border-primary:hover .icon{transform:translateX(3px)}
.btn-border-primary .icon{font-size:1.35em}
.btn-scrolltop{position:fixed;bottom:24px;right:24px;z-index:150;width:48px;height:48px;border-radius:50%;border:0;background:var(--c-primary);color:var(--c-white);cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.btn-scrolltop.is-visible{display:inline-flex}
.btn-scrolltop:hover{background:var(--c-primary-dark)}
.btn-scrolltop .icon{font-size:20px}
/* invert quand le bouton passe devant un fond rouge : blanc + icône rouge */
.btn-scrolltop.is-on-red{background:var(--c-white);color:var(--c-primary)}
.btn-scrolltop.is-on-red:hover{background:#f2e6e6}

/* ---------- FOOTER ---------- */
#footer{position:relative;background:var(--c-primary-dark);color:var(--c-white);font-size:14px;text-align:center;padding-bottom:50px;overflow:hidden}
#footer a{color:var(--c-white)}
#footer .pad{padding:20px}
#footer .bg-primary{background:rgba(0,0,0,.1)}
.footer_socials a{font-size:22px;display:inline-block}
.fbcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:max-content;max-width:100%;margin:0 auto;padding:16px 18px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.08);text-align:left}
.fbcard_icon{position:relative;flex-shrink:0;width:48px;height:48px;border-radius:50%;background:#000;overflow:visible}
.fbcard_icon>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.9)}
.fbcard_icon>svg{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;padding:2px;border-radius:50%;background:#fff;fill:#1877f2;display:block}
.fbcard_txt{display:flex;flex-direction:column;gap:2px;line-height:1.35;min-width:0}
.fbcard_name{font-size:14px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbcard_name:hover{text-decoration:underline}
.fbcard_meta{font-size:12px;color:rgba(255,255,255,.72)}
.fbcard_btn{display:inline-flex;align-items:center;justify-content:center;align-self:center;height:38px;padding:0 20px;border-radius:8px;background:#fff;white-space:nowrap;color:var(--c-primary);font-family:var(--font-body);font-size:13px;font-weight:600;text-decoration:none;transition:background .2s ease,color .2s ease}
.fbcard_btn:hover{background:var(--c-primary-dark);color:#fff}
#footer .fbcard .fbcard_btn{color:var(--c-primary)}
#footer .fbcard .fbcard_btn:hover{color:#fff}
@media(max-width:480px){
  .fbcard{grid-template-columns:minmax(0,1fr);justify-items:center;width:auto;padding:18px;gap:12px;text-align:center}
  .fbcard_txt{align-items:center}
  .fbcard_name{white-space:normal}
  .fbcard_btn{width:100%}
}
.footer_wrapper{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:40px 20px 0}
.footer_wrapper img.footer-logo{width:220px;height:52px;margin-bottom:20px}
.footer_wrapper p{margin:0 0 16px;line-height:1.7}
.footer_wrapper p a{text-decoration:none}
.footer_copyrights{margin-bottom:0}
.footer-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;max-width:840px;margin:0 auto 14px;padding:0;list-style:none;font-size:12px;line-height:1.4;opacity:.92}
.footer-legend li{position:relative}
.footer-legend li:not(:last-child)::after{content:"";position:absolute;right:-15px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.8}
/* Sous 640px, chaque item passe seul sur sa ligne (flex-wrap) : le point
   séparateur ne sépare alors plus rien et retombe en fin de chaque ligne. */
@media(max-width:640px){.footer-legend li::after{display:none}}
.footer_wrapper p.footer-legend-note{font-size:12px;max-width:640px;margin:0 auto 16px;opacity:.92;text-align:center}
.footer_branche{position:absolute;bottom:0;z-index:0;opacity:.9;pointer-events:none}
.footer_branche.left{left:0;max-width:22vw}
.footer_branche.right{right:0;max-width:22vw}

/* ============================================================
   TEMPLATE ACCUEIL
   ============================================================ */

/* Titre de section composé (serif + display) */
.section-title{text-align:center;margin-bottom:40px;font-weight:400}
.section-title .font-heading-secondary{font-family:var(--font-serif);font-weight:400;font-size:40px;color:var(--c-primary)}
.section-title .font-heading-primary{font-family:var(--font-display);font-weight:600;font-size:40px;text-transform:uppercase;color:var(--c-primary);letter-spacing:.02em}
.section-title.solo{font-family:var(--font-display);font-weight:600;font-size:40px;text-transform:uppercase;color:var(--c-primary)}
html.a11y-contrast .section-title.solo,html.a11y-enhanced .section-title.solo{color:var(--c-contrast-red) !important}

/* La Sélection */
.grid-selection{display:flex;flex-wrap:wrap;margin:0 -12px}
.grid-selection>*{padding:12px;flex:1 1 100%;max-width:100%}
.card-selection{position:relative;display:flex;flex-direction:column;height:100%;border:1px solid var(--c-grey-bg-2);border-radius:8px;overflow:hidden;color:var(--c-primary);transition:box-shadow .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.card-selection:hover{box-shadow:0 12px 26px rgba(26,5,29,.14);transform:translateY(-4px)}
.card-selection_bottles img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.card-selection:hover .card-selection_bottles img{transform:translateY(-4px) scale(1.03)}
.card-selection_container{display:block;position:relative;height:200px}
.card-selection_bg{display:block;width:100%;height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover}
.card-selection_content{display:block;padding:20px 120px 20px 24px;min-height:20px}
.card-selection_title{display:block;font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;text-transform:uppercase}
.card-selection_bottles{position:absolute;right:20px;bottom:16px;z-index:2;width:100px;text-align:center}
.card-selection_bottles img{display:block;width:auto;max-height:259px;margin:0 auto}
.img-adapt{display:block;width:100%;height:100%;object-fit:cover}
.section-blog{background:var(--c-primary-dark)}
.section-blog .section-title span{color:#fff}
.section-blog .card-selection{background:#fff;border:0}
.section-blog .btn-border-primary{background:transparent;border-color:#fff;color:#fff}
.section-blog .btn-border-primary:hover{background:#fff;border-color:#fff;color:var(--c-primary-dark);box-shadow:0 8px 20px rgba(0,0,0,.28)}

/* Nos conseils (carrousel) */
.advices-slider{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:24px;padding-bottom:8px}
.advices-slider .card{flex:1 1 280px;max-width:320px}
.card{display:flex;flex-direction:column;border:1px solid var(--c-grey-bg-2);border-radius:8px;overflow:hidden;background:var(--c-white);transition:box-shadow .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.card_media{position:relative;height:200px;background-color:var(--c-grey-bg);background-position:50%;background-repeat:no-repeat;background-size:cover}
.card_media::after{content:"";position:absolute;inset:0;background:var(--c-primary);opacity:0;transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.card:hover .card_media::after{opacity:.45}
.card:hover{box-shadow:0 12px 26px rgba(26,5,29,.14);transform:translateY(-4px)}
.card_content{padding:24px}
.card_title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.3;text-transform:uppercase;color:var(--c-primary)}

/* À découvrir */
.discovery-grid{display:flex;flex-wrap:wrap;gap:24px}
.discovery-grid>.col{flex:1 1 100%}
.card-macave{height:100%;border-radius:16px;overflow:hidden;background:var(--c-region-purple);color:var(--c-white);padding:24px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.card-macave h3{font-size:20px;font-weight:600;text-transform:uppercase;line-height:1.3;margin-bottom:16px}
.card-macave p{font-size:15px;line-height:1.55;margin:0}
.macave-logo{width:201px;max-width:100%;height:auto;align-self:center}
.macave-apps{display:flex;gap:16px;flex-wrap:wrap}
.macave-apps img{height:52px;width:auto}
.discovery-stack{display:flex;flex-direction:column;gap:24px}
.card_discovery{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:150px;border-radius:16px;padding:24px;color:var(--c-white);transition:filter .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);overflow:hidden}
.card_discovery.is-catalogue{overflow:visible}
.card_discovery.is-catalogue>div{max-width:calc(100% - 230px)}
.card_discovery .catalogue-visual{position:absolute;right:64px;bottom:-24px;height:200px;width:auto;transform:rotate(8deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));pointer-events:none;z-index:1}
@media (max-width:666px){.card_discovery.is-catalogue>div{max-width:100%}.card_discovery .catalogue-visual{display:none}}
.card_discovery:hover{filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,5,29,.2)}
.card_discovery .cta-arrow{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.card_discovery:hover .cta-arrow{transform:translateX(4px)}
.card_discovery.is-primary{background:var(--c-primary)}
.card_discovery.is-effervescents{background:#A59140}
.card_discovery.is-secondary{background:var(--c-catalog-bg)}
.card_discovery_title{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1;text-transform:uppercase;color:var(--c-white);margin-bottom:6px;display:flex;align-items:center;gap:9px}
.card_discovery p{color:var(--c-white);font-size:15px}
.card_discovery .cta-arrow{width:44px;height:44px;flex-shrink:0}

/* ---------- SEARCH OVERLAY ---------- */
.search_container{position:fixed;inset:0;z-index:200;background:rgba(18,18,18,.96);display:none;align-items:center;justify-content:center;padding:24px}
.search_container.is-open{display:flex}
.search-close{position:absolute;top:28px;right:28px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--c-white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.search-close:hover{background:rgba(255,255,255,.12);border-color:var(--c-white)}
.search_inner{width:min(680px,92vw);text-align:center}
.search_inner::before{content:"Que recherchez-vous ?";display:block;color:var(--c-white);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:24px;margin:0 0 30px}
.search_inner form{display:flex;align-items:center;gap:14px;width:100%;border-bottom:2px solid rgba(255,255,255,.4);padding:0 0 10px;transition:border-color .2s}
.search_inner form:focus-within{border-color:var(--c-white)}
.search-input{flex:1;background:transparent;border:0;border-radius:0;color:var(--c-white);font-size:24px;padding:8px 4px;outline:none}
.search-input::placeholder{color:rgba(255,255,255,.5)}
.search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat;cursor:pointer}
.search-input::-webkit-search-cancel-button:hover{background-color:rgba(255,255,255,.32)}
.search-input:focus{box-shadow:none;outline:none}
/* Pas de contour carré sur le champ lui-même : le soulignement du formulaire
   (.search_inner form:focus-within, ligne au-dessus) sert déjà d'indicateur
   de focus visible, sans ce carré blanc qui tranchait trop avec le reste du
   design épuré de l'overlay. */
.search-input:focus-visible{outline:none}
.search_inner .btn-submit{width:52px;height:52px;border-radius:50%;border:0;background:var(--c-white);color:var(--c-primary);cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0;transition:background .2s,color .2s,transform .2s}
.search_inner .btn-submit:hover{background:var(--c-primary);color:var(--c-white);transform:scale(1.06)}
html.a11y-contrast .search_inner .btn-submit,html.a11y-enhanced .search_inner .btn-submit{color:var(--c-contrast-red) !important;border:2px solid #000}
html.a11y-contrast .search_inner .btn-submit:hover,html.a11y-enhanced .search_inner .btn-submit:hover{background:var(--c-contrast-red) !important;color:#fff !important}

/* ---------- MENU OVERLAY (burger) ---------- */
.menu-overlay{position:fixed;inset:0;z-index:200;background:var(--c-black);padding:80px 24px 40px;overflow-y:auto;display:none}
.menu-overlay.is-open{display:block}
.menu-overlay .menu-close{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;border:2px solid var(--c-white);background:transparent;color:var(--c-white);cursor:pointer}
.menu-overlay ul{text-align:center;display:flex;flex-direction:column;gap:6px}
.menu-overlay a{display:block;color:var(--c-white);font-size:20px;text-transform:uppercase;padding:12px}

/* ---------- COOKIE BAR ---------- */
.cookie_bar{position:fixed;bottom:0;left:0;right:0;z-index:180;background:var(--c-white);box-shadow:0 -4px 20px rgba(0,0,0,.15);padding:20px 24px}
.cookie_bar.is-hidden{display:none}
.cookie_bar .inner{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.cookie_bar p{font-size:13px;line-height:1.5;color:var(--c-text)}
.cookie_bar .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-cookies-refuse{border:1px solid var(--c-primary);background:transparent;color:var(--c-primary);border-radius:var(--radius-pill);padding:10px 24px;cursor:pointer;font-size:14px}
.btn-cookies{border:0;background:var(--c-primary);color:var(--c-white);border-radius:var(--radius-pill);padding:10px 24px;cursor:pointer;font-size:14px}
/* Retour utilisateur, 2026-08-14 : bandeau cookies jamais traité en mode
   contraste/renforcé (même trou que .btn-border-primary, déjà traité). */
html.a11y-contrast .btn-cookies-refuse,html.a11y-enhanced .btn-cookies-refuse{border-color:var(--c-contrast-red) !important;color:var(--c-contrast-red) !important}
html.a11y-contrast .btn-cookies,html.a11y-enhanced .btn-cookies{background:var(--c-contrast-red) !important}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--c-primary);color:var(--c-white);padding:12px 20px;border-radius:0 0 6px 0;font-weight:600}
.skip-link:focus{left:0}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:666px){
  .grid-selection>*{flex:1 1 50%;max-width:50%}
  .wine-slider .wcard{flex:0 0 calc((100% - 24px)/2)}
}
@media (min-width:768px){
  :root{--intro-h:440px}
  /* 2026-08-07 (retour utilisateur, référence cdixvins.fr) : "contain" avec
     une image 1920x440 rétrécit toute la scène (donc les verres) dès que le
     viewport est plus étroit que 1920px, laissant un vide en haut — les
     verres ne remplissent plus la hauteur du bandeau. cdixvins.fr utilise en
     réalité "cover" ancré en bas à droite (100% 100%), pas "contain" : les
     verres (placés à droite dans l'image source) restent pleine hauteur et
     collés au bord droit ; seul le rideau vide à gauche est rogné, ce qui ne
     se voit pas. Vérifié en inspectant les styles calculés de cdixvins.fr.
     Deuxième correction le même jour (retour utilisateur, testé à 3000px) :
     l'image doit être posée sur .intro_wrapper (capé à 1920px, centré), pas
     sur .intro.bg-with-glasses qui s'étire sur toute la largeur de l'écran —
     sinon sur un écran très large l'image s'étire bien au-delà de sa taille
     prévue. C'est exactement ce que fait cdixvins.fr (vérifié : leur image
     est appliquée sur ce même conteneur limité à 1920px, pas sur le fond
     noir plein écran). z-index:-1 (au lieu de 1) car le degradé est
     maintenant un pseudo-élément DANS .intro_wrapper (qui est en
     display:flex) : il doit passer derrière le texte (positionnement
     normal, catégorie "in-flow"), pas devant comme lorsqu'il rivalisait par
     z-index avec .intro_wrapper depuis l'extérieur. */
  .intro.bg-with-glasses{background:var(--c-black)}
  .intro.bg-with-glasses .intro_wrapper{background:url(img/hero-verres.png) no-repeat right bottom/cover}
  .intro.bg-with-glasses .intro_wrapper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,1) 100%)}
  .intro_catchphrase{font-size:46px;line-height:1.45}
  .intro_catchphrase .subtitle{font-size:26px}
  .section-title .font-heading-secondary{font-size:40px}
  .section-title .font-heading-primary{font-size:40px}
  .discovery-grid>.col{flex:1 1 calc(50% - 12px)}
}
@media (min-width:1024px){
  :root{--section-py:72px}
  .section-title.solo{font-size:40px}
  .section-title .font-heading-secondary,.section-title .font-heading-primary{font-size:40px}
  .card-selection_container{height:360px}
  .card-selection_content{min-height:112px;padding-right:200px}
  .card-selection_title{font-size:24px}
  .card-selection_bottles{right:24px;bottom:24px;width:168px}
  .card-selection_bottles img{max-height:434px}
}
@media (min-width:1296px){
  :root{--topbar-h:76px}
  .header_topbar{padding:24px 0 8px}
  .topbar_logo,.navburger{display:none}
  .header_topbar .select-container{display:inline-block}
  .menu_wrapper{display:block;height:44px}
  .nav_logo{display:block;position:absolute;top:0;left:0}
  .nav_logo img{width:180px;height:191px}
  .header_wrapper{position:relative}
  .header_wrapper>nav{display:flex;justify-content:flex-end;align-items:flex-start;padding-top:8px}
}
@media (max-width:1295px){
  .header_topbar .select-container{display:none}
}

/* ===================== ACCESSIBILITÉ ===================== */
.fab{position:fixed;right:24px;z-index:161;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.btn-a11y{bottom:24px;background:var(--c-focus-ring);color:#fff}
.btn-a11y:hover{background:#175a96;transform:translateY(-2px) scale(1.05)}
.btn-a11y:active{transform:scale(.95)}
.btn-a11y svg{width:30px;height:30px;fill:currentColor}
.btn-scrolltop{position:fixed;right:24px;bottom:88px;z-index:161;width:52px;height:52px;border-radius:50%;border:0;background:var(--c-primary);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.btn-scrolltop.is-visible{display:flex}
.btn-scrolltop:hover{background:var(--c-primary-dark);transform:translateY(-2px) scale(1.05)}
.btn-scrolltop:active{transform:scale(.95)}
.btn-scrolltop .icon{font-size:20px}

.a11y-overlay{position:fixed;inset:0;background:rgba(0,0,0,.12);z-index:199;opacity:0;visibility:hidden;transition:opacity .25s}
.a11y-overlay.is-open{opacity:1;visibility:visible}
.a11y-panel{position:fixed;right:24px;bottom:88px;width:min(400px,92vw);max-height:82vh;background:#fff;z-index:200;box-shadow:0 20px 50px rgba(0,0,0,.3);border-radius:22px;overflow-y:auto;padding:22px 22px 24px;transform:translateY(16px) scale(.98);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s}
.a11y-panel.is-open{transform:none;opacity:1;visibility:visible}
.a11y-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.a11y-head h2{font-family:var(--font-display);color:#1a1a1a;font-size:26px;font-weight:600;text-transform:none;margin:0;font-variant-ligatures:none}
.a11y-close{width:44px;height:44px;flex-shrink:0;border-radius:12px;border:0;background:#f4f4f5;color:var(--c-primary);cursor:pointer;font-family:var(--font-icon);font-size:18px;display:flex;align-items:center;justify-content:center;outline:none}
.a11y-close:focus-visible{outline:2px solid var(--c-focus-ring);outline-offset:2px}
.a11y-desc{color:#555;font-size:14px;line-height:1.45;margin-bottom:14px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;border:1px solid var(--c-grey-bg-2);border-radius:12px;padding:11px 16px;margin-bottom:9px;background:#fff;cursor:pointer;font-size:15px;font-weight:600;color:var(--c-text);text-align:left}
.a11y-row.master{border-color:var(--c-primary)}
.a11y-row .state{font-weight:700;color:#9a9aa2;white-space:nowrap}
.a11y-row[aria-pressed="true"] .state{color:var(--c-success)}
.switch{width:60px;height:30px;border-radius:15px;background:#b9410f;position:relative;flex-shrink:0;transition:background .2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.switch::before{content:"OFF";position:absolute;top:0;right:9px;height:30px;display:flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;font-family:var(--font-body)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
[aria-pressed="true"]>.switch{background:var(--c-success)}
[aria-pressed="true"]>.switch::before{content:"ON";right:auto;left:9px}
[aria-pressed="true"]>.switch::after{transform:translateX(30px)}
.a11y-label{font-weight:700;font-size:13px;text-transform:uppercase;color:var(--c-text);margin:12px 0 8px;letter-spacing:.02em}
.a11y-sizes{display:flex;gap:10px;margin-bottom:9px}
.a11y-size{flex:1;border:1px solid var(--c-grey-bg-2);border-radius:12px;padding:11px 8px;background:#fff;cursor:pointer;font-weight:700;color:var(--c-text)}
.a11y-size[aria-pressed="true"]{background:#fdecec;border-color:var(--c-primary)}
.a11y-reset{width:100%;border:0;background:#f1f1f3;color:var(--c-text);border-radius:12px;padding:12px;cursor:pointer;font-weight:600;margin-top:6px}
.a11y-reset:hover{background:#e8e8ec}
.a11y-decl{display:block;text-align:center;color:var(--c-primary);text-decoration:underline;margin-top:12px;font-size:14px}
.a11y-row,.a11y-size,.a11y-close,.a11y-reset,.a11y-decl{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .2s ease,transform .15s ease}
.a11y-row:hover{border-color:var(--c-primary);background:var(--c-cream)}
.a11y-size:hover{border-color:var(--c-primary);background:var(--c-cream)}
.a11y-close:hover{background:#ececf0}
.a11y-reset:hover{background:#e8e8ec}
.a11y-decl:hover{color:var(--c-primary-dark)}
html.a11y-contrast .a11y-close,html.a11y-contrast .a11y-decl,html.a11y-enhanced .a11y-close,html.a11y-enhanced .a11y-decl{color:var(--c-contrast-red) !important}
html.a11y-contrast .a11y-row.master,html.a11y-contrast .a11y-row:hover,html.a11y-contrast .a11y-size:hover,html.a11y-enhanced .a11y-row.master,html.a11y-enhanced .a11y-row:hover,html.a11y-enhanced .a11y-size:hover{border-color:#000 !important}
.switch,.switch::after{transition:background .25s ease,transform .25s ease}

/* modes appliqués sur <html> */
html.a11y-line body,html.a11y-line p,html.a11y-line li{line-height:2 !important}
html.a11y-font *,html.a11y-font *::before,html.a11y-font *::after{font-family:Verdana,Tahoma,Arial,sans-serif !important}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast .section.bg-grey{background:#fff}
html.a11y-contrast main a,html.a11y-contrast .card_title,html.a11y-contrast .card-selection_title,html.a11y-contrast .section-title *{color:var(--c-contrast-red) !important}
html.a11y-contrast .card,html.a11y-contrast .card-selection,html.a11y-contrast .astuce-cell a,html.a11y-contrast .wine-slider .wcard{border:3px solid #000 !important}
html.a11y-contrast #header a,html.a11y-contrast .menu>li>a,html.a11y-contrast .intro_catchphrase,html.a11y-contrast .intro_catchphrase *,html.a11y-enhanced #header a,html.a11y-enhanced .menu>li>a,html.a11y-enhanced .intro_catchphrase,html.a11y-enhanced .intro_catchphrase *{color:#fff !important}
html.a11y-contrast #footer,html.a11y-contrast #footer a,html.a11y-enhanced #footer,html.a11y-enhanced #footer a{color:#fff !important}
/* .btn-primary est un lien (ex. "Découvrir ce vin") : la règle "main a"
   ci-dessus lui imposait --c-contrast-red par-dessus son fond déjà rouge
   (var(--c-primary)), donnant un texte quasi invisible (rouge sur rouge). */
html.a11y-contrast .btn-primary,html.a11y-enhanced .btn-primary{color:#fff !important}
/* Même bug que .btn-primary ci-dessus : .fbcard_btn ("Suivre") est un lien à
   fond blanc — la règle "#footer a" ci-dessus lui imposait du blanc sur
   blanc. Retour utilisateur 2026-08-17 : la tentative précédente ne
   fonctionnait pas car "html.a11y-contrast #footer a" contient un sélecteur
   d'ID (#footer), qui l'emporte en spécificité sur ".fbcard_btn" même à
   !important égal — il faut égaler la spécificité en réincluant #footer. */
html.a11y-contrast #footer .fbcard_btn,html.a11y-enhanced #footer .fbcard_btn{color:var(--c-primary) !important}
html.a11y-contrast #footer .fbcard_btn:hover,html.a11y-enhanced #footer .fbcard_btn:hover{color:#fff !important}
/* Hero : voile noir léger pour renforcer le contraste du texte blanc */
html.a11y-contrast .intro.bg-with-glasses,html.a11y-enhanced .intro.bg-with-glasses{position:relative}
html.a11y-contrast .intro.bg-with-glasses::before,html.a11y-enhanced .intro.bg-with-glasses::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none;z-index:1}
html.a11y-contrast .intro_wrapper,html.a11y-enhanced .intro_wrapper{position:relative;z-index:2}
/* Slider Sélection : aplats plus foncés en mode contraste pour faire ressortir le texte */
html.a11y-contrast .wcard_app,html.a11y-contrast .wcard_name,html.a11y-enhanced .wcard_app,html.a11y-enhanced .wcard_name{color:var(--c-contrast-red) !important}
html.a11y-contrast .wcard.is-active,html.a11y-contrast .wcard.is-active .wcard_media,html.a11y-enhanced .wcard.is-active,html.a11y-enhanced .wcard.is-active .wcard_media{background:#7a1f38 !important}
html.a11y-contrast .wcard.is-active .wcard_app,html.a11y-contrast .wcard.is-active .wcard_name,html.a11y-enhanced .wcard.is-active .wcard_app,html.a11y-enhanced .wcard.is-active .wcard_name{color:#fff !important}
/* Au survol/focus, le fond de .wcard_body passe à la couleur du type de vin
   (--wc, cf. règle plus bas) : le rouge foncé du mode contraste devient
   illisible sur ce fond coloré — priorité au blanc dans cet état précis. */
html.a11y-contrast .wine-slider .wcard:hover .wcard_app,html.a11y-contrast .wine-slider .wcard:focus-within .wcard_app,html.a11y-contrast .wine-slider .wcard:hover .wcard_name,html.a11y-contrast .wine-slider .wcard:focus-within .wcard_name,html.a11y-enhanced .wine-slider .wcard:hover .wcard_app,html.a11y-enhanced .wine-slider .wcard:focus-within .wcard_app,html.a11y-enhanced .wine-slider .wcard:hover .wcard_name,html.a11y-enhanced .wine-slider .wcard:focus-within .wcard_name{color:#fff !important}
/* Boutons : garder le texte blanc lisible au survol (sinon rouge foncé sur rouge) */
html.a11y-contrast .btn-border-primary:hover,html.a11y-enhanced .btn-border-primary:hover{background:var(--c-contrast-red) !important;color:#fff !important;border-color:var(--c-contrast-red) !important}
html.a11y-contrast .btn-border-primary:hover *,html.a11y-enhanced .btn-border-primary:hover *{color:#fff !important}
/* .is-primary manquait à côté de ses deux voisines .is-effervescents/
   .is-secondary ci-dessous (retour utilisateur, 2026-08-14). */
html.a11y-contrast .card_discovery.is-primary,html.a11y-enhanced .card_discovery.is-primary{background:var(--c-contrast-red) !important}
html.a11y-contrast .card_discovery.is-effervescents,html.a11y-enhanced .card_discovery.is-effervescents{background:#574b1c !important}
html.a11y-contrast .card_discovery.is-secondary,html.a11y-enhanced .card_discovery.is-secondary{background:#9a4408 !important}
html.a11y-contrast .card_discovery p,html.a11y-contrast .card_discovery_title,html.a11y-enhanced .card_discovery p,html.a11y-enhanced .card_discovery_title{color:#fff !important}
:focus-visible{outline:3px solid var(--c-focus-ring);outline-offset:2px}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5/files/opendyslexic-latin-400-normal.woff2) format('woff2')}
html.a11y-dys .icon,html.a11y-font .icon,html.a11y-enhanced .icon{font-family:'iconfont' !important}
/* Retour utilisateur 2026-08-17 : en étendant les polices d'accessibilité
   aux pseudo-éléments (*::before/*::after, cf. plus bas) pour corriger
   "Que recherchez-vous ?", la police d'icônes elle-même s'est fait écraser
   sur .icon-xxx::before (où vit le glyphe réel) — tous les boutons avec
   icône affichaient "no glyph" en mode accessible. Il faut restaurer
   'iconfont' explicitement sur .icon::before, avec plus de spécificité
   (2 classes) que les règles génériques *::before (1 classe) pour gagner. */
html.a11y-dys .icon::before,html.a11y-font .icon::before,html.a11y-enhanced .icon::before{font-family:'iconfont' !important}
/* Retour utilisateur 2026-08-17 : le sélecteur universel "*" ne matche pas
   les pseudo-éléments ::before/::after. Les animations au survol des
   .wine_card (favoris, résultats de recherche "vins") sont portées par
   .wine_card_media::before, donc "Désactiver les animations" ne les
   arrêtait pas — il faut cibler explicitement ::before/::after aussi. */
html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}

/* ---- Révélation au scroll ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.reveal-stagger.is-in>*{opacity:1;transform:none}
.reveal-stagger.is-in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-in>*:nth-child(2){transition-delay:.12s}
.reveal-stagger.is-in>*:nth-child(3){transition-delay:.19s}
.reveal-stagger.is-in>*:nth-child(4){transition-delay:.26s}
.reveal-stagger.is-in>*:nth-child(5){transition-delay:.33s}
.reveal-stagger.is-in>*:nth-child(6){transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-stagger>*{opacity:1 !important;transform:none !important;transition:none !important}}
html.a11y-noanim .reveal,html.a11y-noanim .reveal-stagger>*{opacity:1 !important;transform:none !important;transition:none !important}
html.a11y-t1 #header,html.a11y-t1 main,html.a11y-t1 #footer{zoom:1.09}
html.a11y-t2 #header,html.a11y-t2 main,html.a11y-t2 #footer{zoom:1.2}
html.a11y-enhanced body,html.a11y-enhanced p,html.a11y-enhanced li{line-height:1.95 !important}
html.a11y-enhanced body{font-size:18px}
html.a11y-enhanced *,html.a11y-enhanced *::before,html.a11y-enhanced *::after{font-family:Verdana,Tahoma,Arial,sans-serif !important}
/* Déclarée après .a11y-font/.a11y-contrast/.a11y-enhanced (même spécificité
   html.CLASSE *) pour gagner systématiquement la priorité en cas de cumul :
   sinon, la règle la plus basse dans ce fichier l'emportait au hasard des
   futures modifications, et "Mode accessibilité renforcé" (qui active aussi
   .a11y-dys) affichait Verdana au lieu de la police dyslexique. */
html.a11y-dys *,html.a11y-dys *::before,html.a11y-dys *::after{font-family:'OpenDyslexic',Verdana,Tahoma,sans-serif !important}
html.a11y-enhanced main a,html.a11y-enhanced .card_title,html.a11y-enhanced .card-selection_title,html.a11y-enhanced .section-title *{color:var(--c-contrast-red) !important}
html.a11y-enhanced .card,html.a11y-enhanced .card-selection,html.a11y-enhanced .astuce-cell a,html.a11y-enhanced .wine-slider .wcard{border:3px solid #000 !important}
html.a11y-enhanced :focus-visible{outline:3px solid var(--c-focus-ring) !important;outline-offset:2px}
/* "Le Blog" : fond rouge -> blanc en mode contraste, sinon titre rouge sur rouge */
html.a11y-contrast .section-blog,html.a11y-enhanced .section-blog{background:#fff !important}
/* Le bouton "Découvrir le blog" est prévu en blanc sur blanc (pour se voir
   sur le fond bordeaux normal de .section-blog) : une fois ce fond repassé
   en blanc ci-dessus, son contour blanc devenait invisible. */
html.a11y-contrast .section-blog .btn-border-primary:not(:hover),html.a11y-enhanced .section-blog .btn-border-primary:not(:hover){border-color:var(--c-contrast-red) !important;color:var(--c-contrast-red) !important}

.wine-slider-wrap{position:relative;padding:0 68px}
.wine-slider{display:flex;justify-content:space-evenly;gap:24.5px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:30px 24px 54px;margin:0 -24px;scrollbar-width:none;-ms-overflow-style:none}
/* Retour utilisateur, 2026-08-19 : trop d'espace blanc entre le titre "La
   Sélection <mois>", le slider et le bouton "Voir tous les vins" en mobile.
   Le slider garde son padding vertical d'origine (desktop) — utile pour la
   place de l'ombre portée des cartes au défilement — mais sur un écran
   étroit, cumulé aux marges du titre (40px) et du bouton (marg-top-50), ça
   fait beaucoup de vide. Resserré ici, seulement en mobile. */
@media(max-width:767px){
  .section-selection .section-title{margin-bottom:20px}
  .section-selection .wine-slider{padding-top:16px;padding-bottom:30px}
  .section-selection .marg-top-50{margin-top:24px}
}
.wine-slider::-webkit-scrollbar{display:none;width:0;height:0}
.wine-nav{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:5;width:56px;height:56px;border-radius:50%;border:1px solid var(--c-grey-bg-2);background:#fff;color:var(--c-primary);transition:background .35s cubic-bezier(.16,1,.3,1),color .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1));cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-icon);font-size:20px;box-shadow:0 8px 22px rgba(26,5,29,.16);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.wine-nav:hover{background:var(--c-primary);color:#fff;box-shadow:0 10px 26px rgba(26,5,29,.28)}
html.a11y-contrast .wine-nav:hover,html.a11y-enhanced .wine-nav:hover{background:var(--c-contrast-red) !important}
.wine-prev{left:4px}
.wine-next{right:4px}
.wine-nav:focus-visible{outline:3px solid var(--c-focus-ring);outline-offset:2px}
.wcard{--wc:var(--c-rose-deep)}
.wcard[data-type="rouge"]{--wc:#a83957}
.wcard[data-type="blanc"]{--wc:#46831e}
.wcard[data-type="rose"]{--wc:#be4f69}
.wcard[data-type="effervescent"]{--wc:#a59140}
/* Le fond coloré au survol vit UNIQUEMENT sur .wcard (le conteneur), pas sur
   .wcard_media et .wcard_body séparément : deux transitions indépendantes
   sur deux éléments voisins, même identiques (durée/easing), ne sont pas
   garanties image par image sur tous les navigateurs — un décalage d'une
   frame pendant le fondu suffit à révéler un liseré à leur jonction (retour
   utilisateur, persistant après plusieurs correctifs ciblant .wcard_media/
   .wcard_hover individuellement, 2026-08-13 puis 14). .wcard_media et
   .wcard_body restent transparents et laissent voir le fond de .wcard : un
   seul calque, une seule transition, aucune jonction possible entre deux
   couleurs qui pourraient diverger d'une frame à l'autre.
   .wcard.is-active existe dans la maquette V2 (carte "active" du carrousel)
   mais n'est câblée par aucun JS de ce site — retiré, il n'a jamais eu
   d'effet réel ; le garder aurait pu laisser croire, à tort, qu'il expliquait
   ce bug. */
.wine-slider .wcard{scroll-snap-align:start;flex:0 0 100%;display:flex;flex-direction:column;border:1px solid var(--c-grey-bg-2);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;transition:box-shadow .3s,transform .3s,background .3s ease}
.wine-slider .wcard:hover,.wine-slider .wcard:focus-within{box-shadow:0 14px 30px rgba(26,5,29,.14);transform:translateY(-4px);background:var(--wc)}
.wcard_media img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.wine-slider .wcard:hover .wcard_media>img{transform:scale(1.05)}
/* Aligné sur la maquette de référence (Maquette design Cdixvins/homepage/
   site.css) — retour utilisateur, 2026-08-14 : l'essai précédent (cover
   seulement sur une photo dédiée au slider, contain sinon — pour ne pas
   tronquer les détourages de bouteille "hauts/étroits" utilisés en repli)
   n'a pas réglé le cas signalé. La maquette d'origine est en cover sans
   condition : à vérifier sur le vrai catalogue si ça tronque des bouteilles
   en repli, mais on suit la référence telle quelle pour l'instant. */
.wine-slider .wcard:hover .wcard_media.has-vignette>img{transform:none}
.wcard_media{height:260px;background:transparent;display:flex;align-items:center;justify-content:center;padding:16px}
.wcard_media img{max-height:210px;width:auto}
.wcard_media.has-vignette{padding:0;background:transparent;overflow:hidden;position:relative}
.wcard_media.has-vignette img{width:100%;height:100%;max-height:none;object-fit:cover;transition:opacity .3s ease}
.wcard_hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;opacity:0;transition:opacity .35s ease;pointer-events:none}
.wcard_media.has-vignette .wcard_hover img,.wcard_hover img{display:block;width:auto;height:100%;max-width:100%;max-height:100%;margin:0 auto;object-fit:contain;object-position:center center}
.wine-slider .wcard:hover .wcard_hover,.wine-slider .wcard:focus-within .wcard_hover{opacity:1}
/* .has-hover (pas seulement .has-vignette) : sans lui, une carte avec une
   photo de slider mais SANS photo bouteille de repli (has-vignette posé,
   pas de <span class="wcard_hover">, cf. wine_card_home()) verrait sa seule
   image s'effacer au survol sans rien derrière — un carré vide. */
.wine-slider .wcard:hover .wcard_media.has-vignette.has-hover>img,.wine-slider .wcard:focus-within .wcard_media.has-vignette.has-hover>img{opacity:0}
.wcard_body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:22px 20px 26px;text-align:center;background:transparent}
.wcard_app,.wcard_name{transition:color .3s ease}
.wine-slider .wcard:hover .wcard_app,.wine-slider .wcard:hover .wcard_name,
.wine-slider .wcard:focus-within .wcard_app,.wine-slider .wcard:focus-within .wcard_name{color:#fff}
.wcard_app{display:block;font-family:var(--font-display);font-size:14px;letter-spacing:.02em;color:var(--c-wine-rose);text-transform:uppercase;margin-bottom:8px;font-variant-ligatures:none}
.wcard_name{display:block;font-family:var(--font-display);font-size:21px;color:var(--c-wine-rose);text-transform:uppercase;line-height:1.25;font-variant-ligatures:none}
@media(min-width:1024px){.wine-slider .wcard{flex:0 0 calc((100% - 72px)/4)}}
.macave-split{display:flex;flex-direction:column;gap:24px;height:100%}
.macave-split .card-macave{flex:1 1 auto;min-height:0}
/* .card_discovery fournit déjà la mise en page + l'animation au survol
   (transform, box-shadow, flèche qui glisse) — cf. plus haut. .card-cc
   n'apporte plus que sa propre couleur de fond, pour avoir la même animation
   que "Les régions"/"Les effervescents"/"Notre catalogue" au lieu d'un
   simple brightness(1.12) plus terne. */
.card-cc{background:#6d2247}
.card-cc p{color:#fff;font-size:15px;margin-top:6px}
.card-cc_logo{width:64px;height:64px;flex-shrink:0;align-self:center}
@media(max-width:559px){.card-cc_logo{width:52px;height:52px}}

/* ========== LISTING VINS / FILTRE ========== */
.hero-foire-bottle{position:absolute;right:6%;bottom:0;width:70px;height:220px;background:url(img/catalogue-bottle.png) no-repeat center bottom/contain;display:none}
@media(min-width:768px){.hero-foire-bottle{display:block}}
.listing-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:1024px){.listing-layout{grid-template-columns:280px 1fr;gap:32px}}
.filter_card{background:#fff;border-radius:8px;box-shadow:0 4px 24px rgba(37,38,94,.1);margin-bottom:0;overflow:hidden}
/* Retour utilisateur, 2026-08-14 : même trou que .wine_card — la barre de
   filtres du catalogue n'avait aucun traitement contraste élevé/renforcé. */
html.a11y-contrast .filter_card,html.a11y-enhanced .filter_card{border:2px solid #000}
html.a11y-contrast .fcat-toggle,html.a11y-contrast .price-euro,html.a11y-enhanced .fcat-toggle,html.a11y-enhanced .price-euro{color:var(--c-contrast-red) !important}
/* overscroll-behavior:auto (pas "contain") : une fois le panneau de filtre
   arrivé en bout de course (haut ou bas), la molette doit continuer à faire
   défiler la page — avec "contain", le défilement restait piégé dans le
   panneau dès que la souris s'y trouvait, sans jamais rendre la main à la
   page (bug remonté : impossible de scroller la page depuis cette zone). */
.filter_content.is-open{max-height:70vh;overflow-y:auto;padding-bottom:56px;overscroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}
.filter_content.is-open::-webkit-scrollbar{display:none;width:0;height:0}
@media(min-width:1024px){.filter_content.is-open{max-height:none;overflow:visible;padding-bottom:0;overscroll-behavior:auto}
.filter_card{box-shadow:none;position:sticky;top:88px;max-height:calc(100vh - 120px);overflow-y:auto;padding-bottom:56px;overscroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}.filter_card::-webkit-scrollbar{display:none;width:0;height:0}.filter_card_ignore::-webkit-scrollbar{display:none;width:0;height:0}}
.filter_category_name{cursor:pointer;user-select:none}
.filter_category_name .fcat-toggle{margin-left:auto;transition:transform .3s ease;font-size:17px;color:var(--c-primary)}
.filter_category.is-collapsed .fcat-toggle{transform:rotate(-90deg)}
.filter_category.is-collapsed .filter_list,.filter_category.is-collapsed .filter_search{display:none}
.fcat-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:10px;background:var(--c-primary);color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}
html.a11y-contrast .fcat-badge,html.a11y-enhanced .fcat-badge{background:var(--c-contrast-red) !important}
.filter_button{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--c-text);padding:15px 14px;margin:0;font-family:var(--font-body);font-weight:600;font-size:24px;cursor:pointer;position:relative}
.filter_button .icon-filter{margin-left:8px;transition:transform .3s ease}
.filter_button.is-active .icon-filter{transform:rotate(180deg)}
@media(min-width:1024px){.filter_button{cursor:default;border-bottom:1px solid var(--c-grey-bg-2)}.filter_button .icon-filter{display:none}}
.filter_content{display:none;padding:14px 6px 18px}
.filter_content.is-open{display:block}
@media(min-width:1024px){.filter_content{display:block;max-height:none;overflow:visible}}
.filter_category{margin:0 0 28px}
.filter_category:last-of-type{margin-bottom:8px}
.filter_category_name{border-bottom:1px solid var(--c-grey-bg-2);font-weight:300;padding:0 4px 8px;margin:0 0 16px;text-transform:uppercase;font-size:15px;letter-spacing:.03em;display:flex;justify-content:space-between;align-items:center;float:none}
.filter_category_name+.filter_list,.filter_category_name+.filter_search{margin-top:6px}
.filter_category_name .btn-info,.wine-feature_price .btn-info{background:transparent;border:0;color:var(--c-primary);cursor:pointer;padding:0;font-size:16px;line-height:1}
.filter_search{position:relative;padding:0 4px}
.filter_search input{width:100%;border:1px solid var(--c-grey-bg-2);border-radius:6px;padding:10px 38px 10px 12px;font:inherit;font-size:15px;color:var(--c-text)}
.filter_search input:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px}
.filter_search .icon{position:absolute;right:16px;top:12px;color:#666;pointer-events:none}
.filter_list{padding:0 6px}
.filter_list li{display:flex;align-items:center;margin-bottom:12px;font-size:15px}
.filter_list li:last-child{margin-bottom:0}
.filter_list.inline{flex-direction:row;flex-wrap:wrap;gap:10px 22px}
.filter_list.inline li{margin-bottom:6px}
.filter_list label{display:inline-flex;align-items:center;gap:12px;cursor:pointer;line-height:1.2}
.filter_list input[type=checkbox]{width:16px;height:16px;accent-color:var(--c-primary);cursor:pointer;flex-shrink:0;margin:0}
.filter_list label img{width:12px;height:auto}
.filter_list label img.type-glass{width:auto;height:34px}
.filter_list label.region-tag{gap:12px}
.filter_list .region-dot{display:none}
.price-euro{min-width:34px;font-weight:700;color:var(--c-primary)}
.filter_category_name .btn-info,.wine-feature_price .btn-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;padding:0;box-sizing:border-box;border:1.5px solid var(--c-primary);border-radius:50%;font-size:0;font-weight:700;margin-left:6px;transition:background .2s ease,color .2s ease}
.filter_category_name .btn-info:hover,.filter_category_name .btn-info:focus-visible,.wine-feature_price .btn-info:hover,.wine-feature_price .btn-info:focus-visible{background:var(--c-primary);color:#fff}
.price-tip{position:fixed;z-index:120;display:none;flex-direction:column;gap:4px;background:#1a051d;color:#fff;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.4;text-transform:none;letter-spacing:0;font-weight:400;box-shadow:0 6px 20px rgba(0,0,0,.25);width:max-content;max-width:240px}
.filter_category_name{position:relative}

.filter_buttons{text-align:center;padding:12px 10px 4px}
.filter_reset{display:block;color:var(--c-text);font-size:14px;margin-top:16px;opacity:.55;transition:opacity .3s}
.filter_reset:hover{opacity:1}

/* Grille de vins */
.wine-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:560px){.wine-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.wine-grid{grid-template-columns:repeat(3,1fr)}}
.wine_card{position:relative;background:#fff;border:1px solid var(--c-grey-bg-2);border-radius:8px;overflow:hidden;text-decoration:none;transition:box-shadow .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.wine_card:hover{box-shadow:0 12px 26px rgba(26,5,29,.14);transform:translateY(-4px)}
.wine_card_media{position:relative;background:var(--c-grey-bg);padding:20px;overflow:hidden;transition:background-color .6s ease}
.wine_card:hover .wine_card_media{background:transparent}
.wine_card_media::before{content:"";position:absolute;inset:0;background:no-repeat center/cover;opacity:0;transition:opacity .5s ease}
.wine_card.is-rouge .wine_card_media::before{background-image:url(img/bg-vin-rouge.png)}
.wine_card.is-rose .wine_card_media::before,.wine_card.is-blanc .wine_card_media::before{background-image:url(img/bg-vin-black.png)}
.wine_card.is-effervescent .wine_card_media::before{background-image:url(img/bg-vin-default.png)}
.wine_card:hover .wine_card_media::before{opacity:1}
/* 2026-08-19, retour utilisateur : "des images n'apparaissent pas au scroll"
   sur le listing des vins. Cause identifiée en testant en direct : avant son
   premier chargement, une image n'a pas de dimensions intrinsèques connues du
   navigateur — `width:auto` ne peut donc rien calculer et la boîte de l'image
   fait 0px de large (vérifié : `getBoundingClientRect().width` retourne 0),
   alors que `height:300px` est bien appliqué. `loading="lazy"` s'appuie sur la
   géométrie de l'élément pour décider quand déclencher le téléchargement :
   une boîte de largeur nulle n'est jamais considérée comme "à approcher", et
   l'image ne se charge donc JAMAIS — vérifié qu'elle ne charge pas non plus
   si elle est visible dès l'arrivée sur la page, sans le moindre scroll.
   `width:100%` donne une largeur non nulle dès le rendu initial (dérivée du
   conteneur, pas de l'image elle-même) : `object-fit:contain` continue de
   centrer la photo sans la déformer ni la recadrer à l'intérieur de cette
   boîte, résultat visuel identique une fois chargée. */
.wine_card_media img{position:relative;display:block;height:300px;width:100%;object-fit:contain;z-index:1}
.wine_bookmark{position:absolute;right:16px;top:16px;z-index:3;opacity:0;transition:opacity .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease;background:rgba(0,0,0,.28);border:1.5px solid rgba(255,255,255,.85);border-radius:50%;cursor:pointer;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.wine_card:hover .wine_bookmark{opacity:1}
.wine_card:focus-within .wine_bookmark,.wine_bookmark:focus-visible{opacity:1}
.wine_bookmark:focus-visible{outline:3px solid var(--c-focus-ring);outline-offset:2px}
.wine_bookmark:hover{background:rgba(0,0,0,.42);transform:scale(1.08)}
.wine_bookmark svg{display:block;width:19px;height:17px;fill:transparent;stroke:#fff;stroke-width:2px;transition:transform .3s ease,fill .3s ease,stroke .3s ease}
.wine_bookmark:hover svg{fill:#fff;transform:scale(1.12)}
.wine_bookmark.is-active{opacity:1;background:rgba(171,52,51,.2);border-color:transparent}
.wine_bookmark.is-active svg{fill:#AB3433;stroke:#AB3433;transform:scale(1.1)}
.wine_bookmark.is-active:hover{background:rgba(255,255,255,.2)}
.wine_bookmark.is-active:hover svg{fill:#fff;stroke:#fff}
.wine_card:hover .wine_bookmark.is-active{background:rgba(255,255,255,.2)}
.wine_card:hover .wine_bookmark.is-active svg{fill:#fff;stroke:#fff}
.wine_card:hover .wine_bookmark.is-active:hover{background:rgba(255,255,255,.2)}
.wine_card .wine_bookmark.is-active{opacity:1}
.bookmarks_link{position:relative}
.fav-count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:700;line-height:17px;text-align:center;pointer-events:none}
html.a11y-contrast .fav-count{background:#fff;color:#000;border:1px solid #000}
/* ---- Page Favoris ---- */
.fav-summary{margin:0;font-size:15px;font-weight:600;color:var(--c-primary);letter-spacing:.01em}
html.a11y-contrast .fav-summary,html.a11y-enhanced .fav-summary{color:var(--c-contrast-red) !important}
.fav-clear{cursor:pointer}
.wine_card.is-removing{opacity:0;transform:scale(.92) translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.fav-empty{max-width:520px;margin:24px auto 40px;text-align:center;padding:16px}
.fav-empty-heart{display:block;width:64px;height:60px;margin:0 auto 22px;fill:none;stroke:var(--c-primary);stroke-width:1.6px;opacity:.55}
.fav-empty h2{font-family:var(--font-body);font-weight:700;font-size:24px;letter-spacing:.01em;margin:0 0 12px}
.fav-empty p{font-size:16px;line-height:1.6;color:#555;margin:0 0 26px}
html.a11y-contrast .fav-empty p{color:#000}
html.a11y-contrast .fav-empty-heart{stroke:#000;opacity:1}
/* ---- Page Nos magasins (carte) ---- */
.stores-lead{max-width:760px;margin:0 auto 30px;text-align:center;font-size:17px;line-height:1.6;color:#444}
html.a11y-contrast .stores-lead{color:#000}
.stores-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:stretch}
.stores-layout>*{min-width:0}
.stores-panel{display:flex;flex-direction:column;min-height:0}
.stores-search{position:relative;margin-bottom:14px}
.stores-search .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--c-primary);font-size:16px;pointer-events:none}
.stores-search input{width:100%;border:1.5px solid #e2d6d6;border-radius:999px;padding:12px 18px 12px 44px;font-family:var(--font-body);font-size:15px;background:#fff;transition:border-color .25s ease,box-shadow .25s ease}
.stores-search input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(171,52,51,.14)}
.stores-count{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--c-primary)}
html.a11y-contrast .stores-count,html.a11y-enhanced .stores-count{color:var(--c-contrast-red) !important}
.stores-list{list-style:none;margin:0;padding:5px 16px 5px 5px;overflow-y:auto;max-height:588px;display:flex;flex-direction:column;gap:6px}
.stores-list::-webkit-scrollbar{width:8px}
.stores-list::-webkit-scrollbar-thumb{background:#e0d2d2;border-radius:8px}
.store-item{margin:0}
.store-item_btn,.store-item_btn *{color:var(--c-text);-webkit-text-fill-color:currentColor}
.store-item_btn strong,.store-item_btn b{color:var(--c-primary)}
html.a11y-contrast .store-item_btn strong,html.a11y-contrast .store-item_btn b,html.a11y-enhanced .store-item_btn strong,html.a11y-enhanced .store-item_btn b{color:var(--c-contrast-red) !important}
.store-item_btn{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1.5px solid var(--c-cream-2);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .2s ease}
.store-item_btn:hover{border-color:#e0c9c9;background:#fdfaf9;transform:translateX(2px)}
.store-item.is-active .store-item_btn{border-color:var(--c-primary);background:#fdf3f2;box-shadow:0 4px 14px rgba(171,52,51,.12)}
html.a11y-contrast .store-item.is-active .store-item_btn,html.a11y-enhanced .store-item.is-active .store-item_btn{border-color:#000 !important;border-width:2px !important}
/* Retour utilisateur 2026-08-17 : seul le magasin actif recevait une bordure
   renforcée — tout le reste de la liste /nos-magasins/ gardait sa bordure
   fine d'origine (1.5px solid var(--c-cream-2)), sans contraste élevé. */
html.a11y-contrast .store-item_btn,html.a11y-enhanced .store-item_btn{border-color:#000 !important;border-width:2px !important}
.store-pin{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(171,52,51,.1);color:var(--c-primary);font-size:15px}
.store-item.is-active .store-pin,.store-item.is-chosen .store-pin{background:var(--c-primary);color:#fff}
.store-item_txt{display:flex;flex-direction:column;min-width:0;flex:1}
.store-name{font-family:var(--font-body);font-weight:700;font-size:14.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-adr{font-size:12px;color:#8a7a7a;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.a11y-contrast .store-adr{color:#000}
.store-dep{font-size:12.5px;color:var(--c-muted-2)}
html.a11y-contrast .store-dep{color:#000}
.store-item_tag{flex-shrink:0}
.store-item.is-chosen .store-item_tag::after{content:'\2713';display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--c-primary);color:#fff;font-size:12px;font-weight:700}
html.a11y-contrast .store-item.is-chosen .store-item_tag::after,html.a11y-enhanced .store-item.is-chosen .store-item_tag::after{background:var(--c-contrast-red) !important}
.stores-map-wrap{position:relative;z-index:0;width:100%;max-width:100%;min-width:0;border-radius:16px;overflow:hidden;border:1.5px solid var(--c-cream-2);min-height:640px;display:flex}
.stores-map{width:100%;max-width:100%;height:100%;flex:1 1 auto;min-width:0;min-height:640px}
.map-dot{display:block;width:22px;height:22px;border-radius:50%;background:#AB3433;border:2px solid #fff;box-shadow:0 0 0 5px rgba(171,52,51,.2),0 2px 5px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.map-dot:hover{transform:scale(1.18);box-shadow:0 0 0 7px rgba(171,52,51,.28),0 2px 6px rgba(0,0,0,.3)}
.map-dot.is-active{background:var(--c-primary);border-color:#fff;box-shadow:0 0 0 5px rgba(171,52,51,.3);transform:scale(1.2)}
.map-cluster{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#AB3433;border:2.5px solid #fff;box-shadow:0 0 0 7px rgba(171,52,51,.22),0 3px 8px rgba(0,0,0,.28);color:#fff;font-family:'Heebo',sans-serif;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}
.map-cluster:hover{transform:scale(1.1);box-shadow:0 0 0 9px rgba(171,52,51,.3),0 3px 9px rgba(0,0,0,.32)}
.map-cluster b{font-size:15px;font-weight:700;line-height:1}
.map-layers{position:absolute;top:12px;right:12px;z-index:500;display:flex;gap:4px;background:#fff;padding:4px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.map-layer-btn{font-family:inherit;font-size:13px;font-weight:600;padding:7px 12px;border:0;border-radius:5px;background:transparent;color:var(--c-text);cursor:pointer;transition:background .2s ease,color .2s ease}
.map-layer-btn:hover{background:#eff1f6}
.map-layer-btn.is-active{background:var(--c-primary);color:#fff}
/* Retour utilisateur, 2026-08-14 : cohérence avec les autres états actifs
   du site (ex. .btn-border-primary:hover), déjà rehaussés en mode
   contraste/renforcé. */
html.a11y-contrast .map-layer-btn.is-active,html.a11y-enhanced .map-layer-btn.is-active{background:var(--c-contrast-red) !important}
.leaflet-popup-content-wrapper{border-radius:12px;padding:0;overflow:hidden;box-shadow:0 8px 28px rgba(26,5,29,.2);border:0;background:#fff}
.leaflet-popup-content{margin:0;width:236px!important;text-align:left}
.leaflet-popup-tip{background:#fff;box-shadow:none}
.leaflet-container a.leaflet-popup-close-button{color:#b9a9a9;font-size:19px;width:26px;height:26px;line-height:24px;padding:0;right:2px;top:2px;transition:color .2s ease}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--c-primary);background:transparent}
.map-popup{font-family:'Heebo',sans-serif;padding:14px 16px 15px;display:flex;flex-direction:column;gap:7px;border-left:4px solid var(--c-primary)}
.map-popup_name{display:block;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--c-primary);padding-right:16px}
.leaflet-popup-content p.map-popup_adr{font-size:13px;line-height:1.45;color:var(--c-muted);margin:0}
.map-popup_dep{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);background:#f6eeee;border-radius:20px;padding:4px 9px;margin-top:1px}
.stores-none{text-align:center;color:var(--c-muted-2);font-size:15px;padding:20px 0}
.map-pin{display:block;color:#AB3433;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));transition:transform .2s ease}
.map-pin svg{width:30px;height:38px;display:block}
.map-pin svg path{fill:currentColor}
.map-pin.is-active{color:#7a1f24;transform:scale(1.28);z-index:5}
@media(max-width:860px){
  .stores-layout{grid-template-columns:minmax(0,1fr)}
  .stores-list{max-height:280px}
  .stores-map-wrap{min-height:420px;order:-1}
  .stores-map{height:420px}
}
.wine_card_title{padding:18px;text-align:center;text-transform:uppercase}
.wine_card_title h3{font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:.02em}
.wine_card_title p{font-size:15px;font-weight:400;margin-top:5px;color:var(--c-text)}
.wine_card.is-rouge .wine_card_title h3,.wine_card.is-rouge .wine_card_title p{color:#a83957}
.wine_card.is-rose .wine_card_title h3,.wine_card.is-rose .wine_card_title p{color:var(--c-rose-deep)}
.wine_card.is-blanc .wine_card_title h3,.wine_card.is-blanc .wine_card_title p{color:#46831e}
.wine_card.is-effervescent .wine_card_title h3,.wine_card.is-effervescent .wine_card_title p{color:var(--c-sparkling)}
/* Retour utilisateur, 2026-08-14 : le catalogue des vins (page la plus
   visitée du site) n'avait aucun traitement contraste élevé/renforcé —
   bordure et couleurs de titre (par type de vin) jamais rehaussées,
   contrairement à .card/.wcard/.card-selection déjà traités ailleurs. */
html.a11y-contrast .wine_card,html.a11y-enhanced .wine_card{border:3px solid #000 !important}
html.a11y-contrast .wine_card_title h3,html.a11y-contrast .wine_card_title p,html.a11y-enhanced .wine_card_title h3,html.a11y-enhanced .wine_card_title p{color:var(--c-contrast-red) !important}
.card_link{position:absolute;inset:0;z-index:2;text-indent:-99999px;overflow:hidden}
.card_link:focus-visible{outline:none}
.wine_card:has(.card_link:focus-visible){outline:3px solid var(--c-focus-ring);outline-offset:2px}

/* ===== Listing Régions ===== */
.regions-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:640px){.regions-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.regions-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.region-card{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--c-grey-bg-2);text-decoration:none;transition:box-shadow .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.region-card:hover{box-shadow:0 14px 30px rgba(26,5,29,.14);transform:translateY(-4px)}
.region-card_map{position:relative;background:#eef0f4;aspect-ratio:16/9;overflow:hidden}
.region-card_map>img{position:absolute;inset:22px 26px;margin:auto;width:auto;height:auto;max-width:calc(100% - 52px);max-height:calc(100% - 44px);object-fit:contain;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.region-card_photo{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.region-card_photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.region-card:hover .region-card_map>img{opacity:0;transform:scale(1.04)}
.region-card:hover .region-card_photo{opacity:1}
.region-card:hover .region-card_photo img{transform:scale(1.08)}
.region-card:focus-visible .region-card_photo{opacity:1}
.region-card_name{padding:22px 20px;text-align:center;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-primary)}
.region-card.is-alsace .region-card_name{color:#1a1a1a}
.region-card.is-beaujolais .region-card_name{color:#5a8226}
.region-card.is-bordeaux .region-card_name{color:#A5232A}
.region-card.is-bourgogne .region-card_name{color:#64802c}
.region-card.is-languedoc .region-card_name{color:#C13B34}
.region-card.is-loire .region-card_name{color:#2C7F88}
.region-card.is-provence .region-card_name{color:#5E3B93}
.region-card.is-rhone .region-card_name{color:#8A6D4B}
.region-card.is-sudouest .region-card_name{color:#8b7520}
html.a11y-contrast .region-card_name,html.a11y-enhanced .region-card_name{color:#1a1a1a !important}
/* Retour utilisateur 2026-08-17 : le texte de .region-card_name était déjà
   traité, mais la carte elle-même gardait sa bordure fine d'origine
   (1px solid var(--c-grey-bg-2)) — contrairement à .wine_card/.card/etc. */
html.a11y-contrast .region-card,html.a11y-enhanced .region-card{border:2px solid #000 !important}

/* Pagination */
/* Pagination compacte (maquette V2) : premier/précédent/[1 … 7 [8] 9 …
   60]/suivant/dernier, "…" cliquable pour aller à une page précise. */
.cdx-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin:44px 0 10px}
.cdx-pager_btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 6px;border:0;border-radius:50%;background:transparent;color:var(--c-primary);font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1;text-decoration:none;cursor:pointer;transition:background .25s ease,color .25s ease}
a.cdx-pager_btn:hover{background:var(--c-cream-2)}
.cdx-pager_btn.is-active{background:var(--c-primary);color:#fff;cursor:default}
.cdx-pager_btn.is-disabled{opacity:.28;cursor:default}
.cdx-pager_btn.is-arrow{min-width:40px}
.cdx-pager_btn.is-arrow svg{width:19px;height:19px;display:block}
.cdx-pager_ellipsis{letter-spacing:.06em;font-size:19px;list-style:none}
.cdx-pager_ellipsis::-webkit-details-marker{display:none}
details.cdx-pager_gap[open]>.cdx-pager_ellipsis{background:var(--c-primary);color:#fff}
.cdx-pager_gap{position:relative;display:inline-flex}
.cdx-pager_jump{position:absolute;z-index:20;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--c-field-border);border-radius:12px;padding:13px 15px;box-shadow:0 14px 34px rgba(26,5,29,.16);white-space:nowrap}
.cdx-pager_jump label{font-size:12.5px;font-weight:600;color:var(--c-muted);text-align:left}
.cdx-pager_row{display:flex;align-items:center;gap:8px}
.cdx-pager_jump input{width:78px;height:40px;border:1px solid var(--c-field-border);border-radius:9px;padding:0 10px;font-family:var(--font-body);font-size:15px;color:var(--c-text);background:#fff}
.cdx-pager_hint{font-size:13px;color:var(--c-muted)}
.cdx-pager_ok{height:40px;padding:0 15px;border:0;border-radius:9px;background:var(--c-primary);color:#fff;font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer;transition:background .25s ease}
.cdx-pager_ok:hover{background:var(--c-primary-dark)}
@media(max-width:480px){
  .cdx-pager{gap:3px}
  .cdx-pager_btn{min-width:40px;height:40px;font-size:16px}
  .cdx-pager_btn.is-arrow{min-width:36px}
}
.listing-back{margin-top:32px}
.wf-store-banner{background:var(--c-grey-bg);border-radius:6px;padding:12px 16px;margin:0 0 20px;font-size:15px;color:var(--c-text)}
.wf-store-banner a{color:var(--c-primary);font-weight:600;text-decoration:underline}
html.a11y-contrast .wf-store-banner a,html.a11y-enhanced .wf-store-banner a{color:var(--c-contrast-red) !important}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--c-primary);color:#fff;border-radius:2em;padding:10px 22px;min-height:44px;font-size:16px;transition:background .3s,transform .3s}
.btn-primary:hover{background:var(--c-primary-dark);transform:translateY(-2px)}

/* Modal (prix) */
.modal{display:none}
.modal.is-open{display:block}
.modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal__container{position:relative;background:#fff;border-radius:6px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;padding:32px}
.modal__close{position:absolute;right:12px;top:12px;background:transparent;border:0;color:var(--c-accent);cursor:pointer;font-size:20px;line-height:1;padding:6px}
.modal__title{font-weight:600;font-size:1.25rem;color:var(--c-text)}
.modal__content{margin-top:18px}
.price-legend{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;text-align:left;margin-top:14px}
.price-legend strong{color:var(--c-primary)}

/* ---------- ICÔNES : agrandies dans boutons & formulaires ---------- */
.btn-border-primary .icon,.btn-cookies .icon,.btn-cookies-refuse .icon{font-size:20px}
.filter_search .icon{font-size:18px}
.filter_category_name .btn-info .icon,.wine-feature_price .btn-info .icon{font-family:Georgia,serif;font-size:14px;font-style:italic;font-weight:700;line-height:1;display:block;transform:translateY(0.5px)}
.search_inner .btn-submit .icon,.btn-submit .icon{font-size:24px}
.wine-nav .icon{font-size:24px}


/* ---------- Bloc « Le vin » (article de blog) ---------- */
.wine-feature{margin:44px 0;border-radius:18px;overflow:hidden;line-height:0;background:linear-gradient(135deg,#fbf7f7,#f3ecec);border:0}
.wine-feature_inner{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;align-items:stretch}
/* Retour utilisateur 2026-08-21 : réduire la bouteille et lui ajouter un
   présentoir dessous — même technique que .fiche_socle/.bhero_socle (un
   seul visuel de socle, bottle-socle.png, posé en fond et révélé sous la
   bouteille). La bouteille passe de 100% à 78% de la hauteur du bloc,
   ancrée en bas de sa propre boîte (object-position:center bottom) pour
   que sa base retombe pile sur le socle. Règle dupliquée plus bas
   (.wine-feature_media img, ~ligne 1456, ajoutée le 2026-08-14 pour un
   bug d'object-fit) : c'est CETTE seconde règle qui gagne à l'ordre du
   fichier et doit donc porter le même changement.
   background-size repassé de 56% à 30% (retour utilisateur 2026-08-21 :
   "le présentoir est trop gros") — à 56% le socle dépassait largement la
   silhouette de la bouteille de part et d'autre ; 30% de 340px ≈ 100px,
   du même ordre que la largeur réelle d'une bouteille détourée à 78% de
   hauteur, cohérent avec le ratio de .fiche_socle (socle ≈ largeur de la
   bouteille, pas de la carte entière).
   Position Y repassée de "94%" à "calc(100% - 36px)" (même retour) : en
   rétrécissant le socle (56%→30%), sa hauteur a rétréci d'autant (même
   ratio d'image), mais un ancrage en "94%" positionne un élément plus
   PETIT plus BAS dans l'espace disponible — la base de la bouteille
   (fixée à 84% de la hauteur du bloc par .wine-feature_media img) se
   retrouvait donc au-dessus du sommet du socle, un vide visible entre les
   deux ("la bouteille vole au-dessus du présentoir", retour utilisateur).
   Un décalage fixe en pixels depuis le bas du bloc n'a pas ce défaut : il
   ne dépend pas de la hauteur du socle, seulement de la hauteur du bloc
   (elle-même dictée par le contenu du texte, cf. min-height ci-dessus) —
   36px calé pour un léger recouvrement (~6px) entre la base de la
   bouteille et le sommet du socle, vérifié en conditions réelles. */
.wine-feature_media{position:relative;display:block;align-self:stretch;min-height:340px;overflow:hidden;line-height:0;font-size:0;background:url(img/bottle-socle.png) no-repeat 50% calc(100% - 36px);background-size:30% auto}
.wine-feature_media img{position:absolute;left:0;right:0;top:6%;bottom:16%;display:block;width:100%;height:78%;max-width:none;max-height:none;object-fit:contain;object-position:center bottom;border-radius:0;transform:none}
.wine-feature_body{padding:26px 30px;line-height:normal}
.wine-feature_kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary);margin:0 0 12px}
.wine-feature_app{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-wine-rose);margin-bottom:5px;font-variant-ligatures:none}
.wine-feature_name{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.15;text-transform:uppercase;color:var(--c-primary);margin:0 0 12px;font-variant-ligatures:none}
.wine-feature_desc{font-size:15px;line-height:1.6;color:#4a3c3c;margin:0 0 18px}
.wine-feature_specs{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;padding:0;margin:0 0 22px}
.wine-feature_specs li{display:flex;align-items:center;gap:8px;background:var(--c-white);border:1px solid rgba(171,52,51,.16);border-radius:30px;padding:7px 15px 7px 11px;font-size:13px;font-weight:600;color:#5a4747}
/* .wine-feature_specs img (1 classe+type) est à égalité de spécificité avec
   .barticle img (1 classe+type) plus bas dans le fichier, qui gagne à l'ordre
   et repasse height à auto + ajoute 28px de marge — les pastilles gonflaient
   d'autant (retour utilisateur, 2026-08-14). Sélecteur plus spécifique
   (2 classes+type) pour ne plus dépendre de l'ordre des règles. */
.wine-feature_specs li img{width:20px;height:20px;margin:0;flex-shrink:0}
.wine-feature_foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.barticle .wine-feature_price,.wine-feature_price{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:24px;line-height:1;color:var(--c-primary);font-variant-ligatures:none;margin:0}
/* Retour utilisateur, 2026-08-14 : le bloc "Le vin" (articles de blog)
   n'avait aucun traitement contraste élevé/renforcé — même trou que
   .wine_card, sur des éléments visuellement équivalents à .wcard_app/
   .wcard_name qui, eux, sont déjà rehaussés (cf. plus bas dans ce fichier). */
html.a11y-contrast .wine-feature_kicker,html.a11y-contrast .wine-feature_app,html.a11y-contrast .wine-feature_name,html.a11y-contrast .wine-feature_price,html.a11y-enhanced .wine-feature_kicker,html.a11y-enhanced .wine-feature_app,html.a11y-enhanced .wine-feature_name,html.a11y-enhanced .wine-feature_price{color:var(--c-contrast-red) !important}
@media(max-width:767px){
  .wine-feature_inner{grid-template-columns:1fr;gap:0;text-align:center}
  .wine-feature_body{padding:22px 20px 24px}
  .wine-feature_media{min-height:0;height:300px}
  .wine-feature_kicker,.wine-feature_specs,.wine-feature_foot{justify-content:center}
  .wine-feature_name{font-size:23px}
}

/* ---------- Tactile : pas d'état survol (évite le double-tap sur iOS) ---------- */
@media (hover:none){
  .card:hover,.card-selection:hover,.wine_card:hover,.wine-slider .wcard:hover,
  .card_discovery:hover,.card-cc:hover,.region-card:hover,.blog-cell:hover,
  .btn-border-primary:hover,.btn-primary:hover,.btn-icon-white:hover{
    transform:none;box-shadow:none;filter:none;background-color:initial}
  .card:hover .card_media::after{opacity:0}
  .wine_card:hover .wine_card_media{background:var(--c-grey-bg)}
  .wine_card:hover .wine_card_media::before{opacity:0}
  .wine-slider .wcard:hover .wcard_body{background:#fff}
  .wine-slider .wcard:hover .wcard_app,.wine-slider .wcard:hover .wcard_name{color:var(--c-wine-rose)}
  .wine-slider .wcard:hover .wcard_media img,
  .card-selection:hover .card-selection_bottles img,
  .region-card:hover .region-card_photo img{transform:none}
  .card_discovery:hover .cta-arrow,.btn-border-primary:hover .icon{transform:none}
  .btn-border-primary:hover{background:transparent;color:var(--c-primary)}
  .btn-icon-white:hover{background:transparent}
}

/* Aucune bande blanche sous le footer (barre d'URL mobile, overscroll, safe-area) */
html{background:var(--c-primary);min-height:100%}
body{background:var(--c-white);min-height:100%}
footer{padding-bottom:env(safe-area-inset-bottom,0px)}

/* ===== Accessibilité — contrastes (RGAA 3.2 / 3.3 / 10.7) ===== */
/* 4. Bordures de champ perceptibles : 3:1 minimum */
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="number"],select,textarea,
.cselect_btn,.filter_search input,.search_form input{border-color:var(--c-field-border)}
.filter_checkbox .box,.filter_check span:first-child{border-color:var(--c-field-border)}

/* 5. Anneau de focus bichrome : lisible sur fond clair, or, orange, bordeaux et noir */
:focus-visible,
html.a11y-enhanced :focus-visible,
.wine-nav:focus-visible,.wine_bookmark:focus-visible,.a11y-close:focus-visible,
.wine_card:has(.card_link:focus-visible){
  outline:3px solid #14141e;
  outline-offset:3px;
  box-shadow:0 0 0 3px #fff;
}
/* Suppressions volontaires : l'anneau est porté par l'élément parent */
.card_link:focus-visible,.search-input[data-prog]:focus-visible,
html.a11y-enhanced .card_link:focus-visible{outline:none;box-shadow:none}

/* 7. Étoiles de notation : contour perceptible (3:1) */
.stars-display .off,.stars-input button{-webkit-text-stroke-color:#a08c60 !important}
.stars-display,.stars-input button.on{-webkit-text-stroke-color:#96791a !important}

/* ---- Bulle « Indication ordre de prix » ---- */
/* position:fixed sans top/left ne centre rien : l'élément reste ancré à sa
   position dans le flux normal du document, donc invisible (hors écran) sur
   toute page assez longue pour que ce point tombe après le viewport. */
.price-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;display:none;max-width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;background:#fff;border:1px solid var(--c-grey-bg-2);border-radius:6px;box-shadow:0 14px 40px rgba(37,38,94,.22);padding:18px 20px 16px;text-align:left}
.price-modal.is-open{display:block}
.price-modal_close{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--c-text);border-radius:50%;cursor:pointer;font-size:19px;line-height:1;transition:background .18s ease}
.price-modal_close:hover{background:var(--c-grey-bg)}
.price-modal_title{font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.2;text-transform:uppercase;color:var(--c-text);margin:0 0 12px;padding:0 30px 10px 0;border-bottom:1px solid var(--c-grey-bg-2);font-variant-ligatures:none;letter-spacing:.02em}
.price-modal_row{display:grid;grid-template-columns:34px repeat(3,minmax(0,1fr));gap:10px 14px;align-items:center;margin-bottom:14px}
.price-modal_row img{display:block;width:24px;height:24px;margin:0 auto}
/* Tranches de prix en <ul><li> plutôt qu'en <p> juxtaposés (2026-08-10,
   audit accessibilité, RGAA 9.3 — une vraie liste, pas un texte visuel qui
   ressemble à une liste). display:contents efface la boîte du <ul> : ses
   <li> deviennent directement les éléments de la grille .price-modal_row,
   exactement comme les <p> avant — aucune autre règle à dupliquer. */
.price-modal_list{display:contents;list-style:none;margin:0;padding:0}
.price-modal_cell{text-align:center;margin:0}
.price-modal_cell b{display:block;font-weight:700;font-size:14px;color:var(--c-primary);margin-bottom:3px;letter-spacing:.02em}
/* Retour utilisateur, 2026-08-14 : modale d'info prix jamais traitée. */
html.a11y-contrast .price-modal_cell b,html.a11y-enhanced .price-modal_cell b{color:var(--c-contrast-red) !important}
.price-modal_cell span{display:block;font-size:12.5px;line-height:1.4;color:var(--c-text)}
.price-modal_note{margin:0;padding-top:10px;border-top:1px solid var(--c-grey-bg-2);font-size:12px;line-height:1.5;color:var(--c-muted);text-align:center}
@media(max-width:640px){
  .price-modal_row{grid-template-columns:28px repeat(3,minmax(0,1fr));gap:8px}
  .price-modal_cell span{font-size:11.5px}
}

/* Le footer reste rouge partout, y compris sur la page Effervescents — la
   variante or (ci-dessous, retirée le 2026-08-07 à la demande explicite,
   cdixvins.fr ne le fait pas non plus) ne s'applique donc plus. */
#footer,#footer .pad.bg-primary{transition:background-color .35s ease}

/* Retour utilisateur 2026-08-17 : sur la page de détail d'un vin, le footer
   doit reprendre la couleur du type de vin consulté, comme sur guide1920
   (classe "is-{type}" sur <body>, cf. templates/main/wine.html.twig +
   assets/scss/modules/_theme.scss — même palette reprise ici : rouge
   #A83957, blanc #46831E, rosé #BE4F69, effervescent). Seul le fond change ;
   le texte/liens du footer restent blancs (#footer a{color:var(--c-white)}
   plus haut) exactement comme sur l'ancien site. Distinct de la variante
   "or" de la page Effervescents retirée le 2026-08-07 (voir commentaire
   ci-dessus) : ceci ne concerne que la fiche vin individuelle, pas les
   pages de catégorie.
   Couleurs relevées sur cdixvins.fr en production (2026-08-18) : rouge
   #A83957, blanc #46831E, rosé #BE4F69, effervescent #A59140 — c'est bien
   le #A59140 brut, pas --c-sparkling (#836d21) qui avait été substitué par
   erreur lors d'une session précédente.
   Accessibilité : #A59140 sous du texte blanc ne fait que 3,12:1 (RGAA/WCAG
   AA exige 4,5:1), d'où l'override qui le neutralise en mode accessible
   juste en dessous. Les trois autres couleurs passent le seuil sans
   retouche (6,2:1 / 4,64:1 / 4,66:1) : pas de neutralisation pour elles,
   les couleurs par type de vin restent donc visibles partout, contrairement
   à une première version de ce correctif qui les redevenait toutes rouges
   en mode accessible (retour utilisateur). */
body.is-rouge #footer{background-color:#A83957}
body.is-blanc #footer{background-color:#46831E}
body.is-rose #footer{background-color:#BE4F69}
body.is-effervescent #footer{background-color:#A59140}
html.a11y-contrast body.is-effervescent #footer,html.a11y-enhanced body.is-effervescent #footer{background-color:var(--c-primary-dark) !important}

/* Bande "Suivre sur Facebook" (div.pad.bg-primary, jusqu'ici figée par un
   style inline #AB3433 = --c-primary — cf. chrome.php).
   Vérifié sur cdixvins.fr (2026-08-18) : cette bande n'a PAS de couleur
   propre par type de vin. Les 4 teintes assombries déclinées ici lors d'une
   session précédente (#7A2940 / #2E5713 / #8A3A4C / #5C4C17) étaient
   inventées et ont été supprimées. C'est #footer .bg-primary{background:
   rgba(0,0,0,.1)} plus haut qui fait le travail : un voile noir à 10% qui
   assombrit automatiquement le fond du footer en dessous, quel que soit son
   type. La règle par défaut ci-dessous ne concerne donc plus que les pages
   sans type de vin, où ce voile générique sur --c-primary-dark ne
   reproduisait pas l'aplat #AB3433 attendu ; elle est explicitement exclue
   des fiches vin (:not) pour ne pas l'emporter, par spécificité, sur le
   voile générique. */
body:not(.is-rouge):not(.is-blanc):not(.is-rose):not(.is-effervescent) #footer .pad.bg-primary{background-color:#AB3433}

/* ===== Règles récupérées des maquettes (style inline jamais fusionné dans site.css) ===== */

/* --- catalogue.html --- */
.cat-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.cat-hero_title{color:var(--c-white);margin:0;line-height:1.1;font-weight:400}
.cat-hero_title .lead{font-family:var(--font-serif);font-size:30px}
.cat-hero_title .name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:34px;margin-left:.18em}
@media(min-width:768px){.cat-hero_title .lead{font-size:48px}.cat-hero_title .name{font-size:56px}}
.cat-section{padding:60px 0 80px}
.cat-heading{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:26px;margin:0 0 20px}
@media(min-width:768px){.cat-heading{font-size:34px}}
.cat-lead{font-size:17px;line-height:1.7;color:var(--c-text);margin:0 0 34px;max-width:none;white-space:nowrap}
@media(max-width:640px){.cat-lead{white-space:normal}}
.cat-store{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0 26px}
.cat-store_label{font-size:15px;color:var(--c-primary);font-weight:600}
.cat-store_select{min-width:290px}
.cat-store_select .cselect{width:330px;max-width:100%}
.cat-store_select .cselect_btn{border-color:var(--c-primary);color:var(--c-primary);background:#fff;font-weight:600}
.cat-store_select .cselect_btn:hover{background:rgba(171,52,51,.08)}
.cat-store_select .cselect_btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.cat-store_select .cselect_clear{color:var(--c-primary);background:rgba(171,52,51,.12)}
.cat-store_select .cselect_clear:hover{background:rgba(171,52,51,.24)}
html.a11y-contrast .cat-heading,html.a11y-contrast .cat-store_label,html.a11y-contrast .cat-store_select .cselect_btn,html.a11y-contrast .cat-store_select .cselect_clear,html.a11y-enhanced .cat-heading,html.a11y-enhanced .cat-store_label,html.a11y-enhanced .cat-store_select .cselect_btn,html.a11y-enhanced .cat-store_select .cselect_clear{color:var(--c-contrast-red) !important}
html.a11y-contrast .cat-store_select .cselect_btn,html.a11y-enhanced .cat-store_select .cselect_btn{border-color:#000 !important}
.cat-embed{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;box-shadow:0 18px 46px rgba(26,5,29,.12);background:#2b2f33}
.cat-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(min-width:768px){.cat-embed{aspect-ratio:16/9}}
.cat-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-size:15px}
.cat-links a{color:var(--c-primary);font-weight:600}

/* --- effervescents.html --- */
.efferv-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover;padding-bottom:130px}
.efferv-title{color:var(--c-white);margin:0;font-weight:400;line-height:1.15;font-size:30px}
.efferv-title .lead{font-family:var(--font-serif);font-weight:400}
.efferv-title .strong{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
/* Bandeau agrandi le 2026-08-07 (retour utilisateur, référence cdixvins.fr) :
   3 images côte à côte dès le mobile (plus de 1fr empilé en dessous de
   700px), ratio 3/2 partout (au lieu de 4/3 -> 1/1 -> 5/4 selon la largeur,
   qui rendait chaque image trop carrée/petite). Sur desktop, bandeau collé
   au bord droit SEULEMENT (pas un plein-écran symétrique) : la marge
   gauche reste alignée sur le reste du contenu (.wrapper), exactement
   comme sur cdixvins.fr (vérifié via capture d'écran le 2026-08-07 :
   petit vide à gauche, bord droit collé à la fenêtre). */
.efferv-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:-70px;position:relative;z-index:2}
@media(min-width:768px){.efferv-band{margin-top:-100px}}
@media(min-width:1024px){.efferv-band{width:calc(100vw - var(--bleed-inset))}}
.efferv-band figure{margin:0;overflow:hidden}
.efferv-band img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.efferv-card{border:1px solid #e6d9d9;border-radius:14px;background:#fff;padding:40px 44px;box-shadow:0 10px 30px rgba(26,5,29,.06)}
/* Retour utilisateur, 2026-08-14 : même trou que .wine_card/.res-card. */
html.a11y-contrast .efferv-card,html.a11y-enhanced .efferv-card{border:2px solid #000}
.efferv-card p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--c-text)}
.efferv-card_cta{display:flex;justify-content:center;margin-top:30px}
@media(min-width:768px){.efferv-title{font-size:52px}}

/* --- mentions-legales.html --- */
/* Retour utilisateur 2026-08-17 : ce fichier duplique les styles propres à
   chaque page (voir aussi les blocs GEN_LEGAL_STYLE/GEN_SEARCH_STYLE dans
   les générateurs PHP correspondants) — le premier correctif n'avait été
   appliqué que là-bas, or CETTE copie-ci gagne la cascade (elle est chargée
   après le <style> inline de la page), donc rien ne changeait visuellement.
   Même correctif ici : le padding:70px 0 s'ajoutait à la min-height déjà
   gérée par .intro_wrapper. */
.legal-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.legal-hero_title{color:var(--c-white);margin:0;text-align:center;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;font-size:26px}
@media(min-width:768px){.legal-hero_title{font-size:44px}}
.legal{padding:48px 0 20px}
.legal_wrapper{max-width:860px;margin:0 auto}
.legal_intro{font-size:16px;color:var(--c-black);margin:0 0 34px}
.legal h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-black);font-size:22px;line-height:1.2;margin:40px 0 14px}
.legal h3{font-weight:700;color:var(--c-black);font-size:17px;margin:26px 0 8px}
.legal p{font-size:15.5px;line-height:1.7;color:#2b2b2b;margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{font-size:15.5px;line-height:1.7;color:#2b2b2b;margin:0 0 8px}
.legal a{word-break:break-word}
.legal-term{text-decoration:underline;font-weight:600}

/* --- recherche.html --- */
/* Retour utilisateur 2026-08-17 : même souci de duplication que .legal-hero
   ci-dessus — cette copie gagnait la cascade et annulait le correctif fait
   dans GEN_SEARCH_STYLE (search.php) et recherche.html. */
.search-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.search-hero_title{color:var(--c-white);margin:0;text-align:center;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;font-size:26px}
@media(min-width:768px){.search-hero_title{font-size:46px}}
.search-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid #e2d7d7;margin:8px 0 40px}
.search-tab{appearance:none;border:0;background:transparent;font-family:var(--font-body);font-size:16px;font-weight:600;color:#7a6f6f;padding:16px 22px;cursor:pointer;position:relative;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .2s}
.search-tab:hover{color:var(--c-primary)}
html.a11y-contrast .search-tab:hover,html.a11y-enhanced .search-tab:hover{color:var(--c-contrast-red) !important}
.search-tab[aria-selected="true"]{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.search-tab:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.search-panel{display:none}
.search-panel.is-active{display:block}
.res-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:600px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.res-grid{grid-template-columns:repeat(3,1fr)}}
.res-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ece2e2;text-decoration:none;transition:box-shadow .35s ease,transform .35s ease}
.res-card:hover{box-shadow:0 16px 34px rgba(26,5,29,.12);transform:translateY(-4px)}
.res-card_media{aspect-ratio:16/11;overflow:hidden;background:#eee}
.res-card_media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.res-card:hover .res-card_media img{transform:scale(1.06)}
.res-card_body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.res-tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px}
.res-tag.is-conseil{background:#2C7F88}
.res-tag.is-recette{background:#C13B34}
.res-card_date{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-primary);text-transform:uppercase;letter-spacing:.02em}
.res-card_title{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.25;color:var(--c-primary);margin:0;font-variant-ligatures:none;font-feature-settings:"liga" 0,"dlig" 0,"clig" 0,"calt" 0}
/* Retour utilisateur, 2026-08-14 : la page de recherche n'avait aucun
   traitement contraste élevé/renforcé — même trou que .wine_card. */
html.a11y-contrast .search-tab[aria-selected="true"],html.a11y-contrast .res-card_date,html.a11y-contrast .res-card_title,html.a11y-enhanced .search-tab[aria-selected="true"],html.a11y-enhanced .res-card_date,html.a11y-enhanced .res-card_title{color:var(--c-contrast-red) !important}
html.a11y-contrast .search-tab[aria-selected="true"],html.a11y-enhanced .search-tab[aria-selected="true"]{border-bottom-color:var(--c-contrast-red) !important}
html.a11y-contrast .res-card,html.a11y-enhanced .res-card{border:2px solid #000}
.res-card_excerpt{font-size:15px;line-height:1.55;color:var(--c-text);margin:0}
.res-count{color:#7a6f6f;font-size:15px;margin:0 0 26px}
.res-empty{color:#7a6f6f;font-size:16px;padding:40px 0}

/* --- astuces/comment-utiliser-le-rose-en-cuisine.html --- */
.article-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.article-hero_title{color:var(--c-white);margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.12;font-size:28px;text-align:center}
@media(min-width:768px){.article-hero_title{font-size:46px}}

/* Galerie en tête de fiche astuce (trick_image -> media) — ajoutée le
   2026-08-07, reprend la place du carrousel Swiper de cdixvins.fr. Défilement
   natif (scroll-snap) plutôt qu'une dépendance JS externe. */
.trick-gallery{position:relative;margin:0 0 30px;border-radius:12px;overflow:hidden}
.trick-gallery.is-single img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:12px}
.trick-gallery_track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin:0;padding:0;list-style:none;scrollbar-width:none}
.trick-gallery_track::-webkit-scrollbar{display:none}
.trick-gallery_slide{flex:0 0 100%;scroll-snap-align:start}
.trick-gallery_slide img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.trick-gallery_nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(26,5,29,.55);color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}
.trick-gallery_nav:hover{background:rgba(26,5,29,.8)}
.trick-gallery_nav.prev{left:14px}
.trick-gallery_nav.next{right:14px}
@media(max-width:640px){.trick-gallery_slide img,.trick-gallery.is-single img{aspect-ratio:4/3}}
.article .wrapper{max-width:1000px}
.article{padding:44px 0 20px}
.article-figure{margin:0 0 26px;border-radius:6px;overflow:hidden}
.article-figure img{display:block;width:100%;height:auto}
.article-share{display:flex;justify-content:flex-end;margin:0 0 4px}
.article-share a{width:40px;height:40px;border-radius:50%;border:1px solid #e2d7d7;display:inline-flex;align-items:center;justify-content:center;color:var(--c-primary);font-size:16px}
.article-share a:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.article-lead{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:20px;margin:0 0 18px}
html.a11y-contrast .article-share a,html.a11y-enhanced .article-share a{color:var(--c-contrast-red) !important;border:2px solid #000}
html.a11y-contrast .article-share a:hover,html.a11y-enhanced .article-share a:hover{background:var(--c-contrast-red) !important;color:#fff !important;border-color:var(--c-contrast-red) !important}
html.a11y-contrast .article-lead,html.a11y-enhanced .article-lead{color:var(--c-contrast-red) !important}
.article p{font-size:17px;line-height:1.72;color:var(--c-text);margin:0 0 16px}
.article p a{color:var(--c-primary);text-decoration:underline}
.article-highlight{background:#f1eef1;border-radius:6px;padding:30px 36px;margin:30px 0}
.article-highlight h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:20px;margin:0 0 16px}
.article-highlight ul{margin:0;padding:0;list-style:none}
.article-highlight li{position:relative;padding-left:20px;font-size:16px;line-height:1.75;color:var(--c-text)}
.article-highlight li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
.article-highlight .cols{display:grid;grid-template-columns:1fr;gap:18px 48px}
@media(min-width:640px){.article-highlight .cols{grid-template-columns:1fr 1fr}}
.article-highlight .col strong{display:block;font-size:16px;color:var(--c-text);margin:0 0 8px}
.article-steps{padding-left:22px;margin:8px 0 20px}
.article-steps li{font-size:17px;line-height:1.72;color:var(--c-text);margin:0 0 18px;padding-left:6px}
.article-steps li::marker{font-weight:700;color:var(--c-text)}
.article-imggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0 8px;max-width:780px}
.article-imggrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.article-substep{font-size:17px;line-height:1.72;color:var(--c-text);margin:16px 0 4px;counter-increment:sub}
.article-video{display:flex;justify-content:center;margin:22px 0 32px}
.article-video_inner{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;border-radius:6px;overflow:hidden;cursor:pointer;background:#000;border:0;padding:0}
.article-video_inner img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .3s,transform .5s}
.article-video_inner:hover img{opacity:1;transform:scale(1.03)}
.article-video_play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.article-video_play span{width:76px;height:76px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18)}
.article-video_play span::before{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.article-video-embed{position:relative;padding-top:56.25%;margin:14px 0;border-radius:10px;overflow:hidden;background:#000}
.article-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Vidéo envoyée en médiathèque (par opposition à un lien YouTube/Vimeo) :
   même gabarit 16/9 que l'iframe ci-dessus. */
.article-video-embed video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.article .recette_wrapper,.barticle .recette_wrapper{background:#f1eef1;border-radius:6px;padding:30px 36px;margin:30px 0}
.article .recette_wrapper h3,.barticle .recette_wrapper h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:20px;margin:0 0 16px}
.article .recette_wrapper .grid,.barticle .recette_wrapper .grid{display:grid;grid-template-columns:1fr;gap:18px 48px}
@media(min-width:640px){.article .recette_wrapper .grid,.barticle .recette_wrapper .grid{grid-template-columns:1fr 1fr}}
.article .recette_wrapper ul,.barticle .recette_wrapper ul{margin:0;padding:0;list-style:none}
.article .recette_wrapper li,.barticle .recette_wrapper li{position:relative;padding-left:20px;font-size:16px;line-height:1.75;color:var(--c-text)}
.article .recette_wrapper li::before,.barticle .recette_wrapper li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
.article blockquote:not([class]),.barticle blockquote:not([class]){border:0;margin:30px 0;padding:0 0 0 26px;border-left:4px solid #e2d7d7}
.article blockquote:not([class]) p,.barticle blockquote:not([class]) p{font-family:var(--font-serif);font-size:22px;line-height:1.5;color:var(--c-primary);margin:0}
.article-related{margin:46px 0 70px;padding-top:30px;border-top:1px solid #e6dede}
.article-related_title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--c-primary);font-size:17px;margin:0 0 18px}
.article-related_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.article-related_card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6dede;text-decoration:none;color:inherit;padding:10px;transition:box-shadow .28s ease,border-color .28s ease}
.article-related_card:hover{box-shadow:0 8px 18px rgba(26,5,29,.1);border-color:#d9c9c9}
.article-related_media{position:relative;width:84px;height:84px;flex-shrink:0;background:transparent;border-radius:50%;overflow:hidden}
.article-related_media img{width:100%;height:100%;object-fit:cover;display:block}
.article-related_media::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c-primary);opacity:0;transition:opacity .3s ease}
.article-related_card:hover .article-related_media::after{opacity:.22}
.article-related_body{display:flex;flex-direction:column;gap:5px;min-width:0}
.article-related_tag{font-family:var(--font-body);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8a7b7b;margin:0}
.article-related_name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:14.5px;line-height:1.25;margin:0}
.article-related_more{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--c-text);display:inline-flex;align-items:center;gap:6px}
.article-related_card:hover .article-related_more{color:var(--c-primary)}
html.a11y-contrast .article-related_title,html.a11y-contrast .article-related_name,html.a11y-contrast .article-related_card:hover .article-related_more,html.a11y-enhanced .article-related_title,html.a11y-enhanced .article-related_name,html.a11y-enhanced .article-related_card:hover .article-related_more{color:var(--c-contrast-red) !important}
html.a11y-contrast .article-related_media::after,html.a11y-enhanced .article-related_media::after{background:var(--c-contrast-red) !important}
html.a11y-contrast .article-related_card,html.a11y-enhanced .article-related_card{border:2px solid #000}
@media (max-width:1000px){.article-related_grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.article-related_grid{grid-template-columns:1fr}}
.article-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:44px 0 6px}
.article-nav .spacer{flex:1}
.article-figure-inline{margin:26px auto;max-width:760px}
.article-figure-inline img{display:block;width:100%;border-radius:6px}
.article-figure-inline figcaption{font-size:14px;color:#7a6f6f;text-align:center;margin-top:10px;font-style:italic}
.article-note{position:relative;margin:40px 0;padding:0}
.article-note_eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--c-primary);margin:0 0 32px}
.article-note_badge{display:none}
.article-note_body{font-family:var(--font-serif);font-size:22px;line-height:1.6;color:var(--c-text);margin:0;padding-left:14px;border-left:3px solid var(--c-primary)}
.article-note_body strong{font-weight:400;color:var(--c-primary)}
.article-note .icon{color:var(--c-primary);font-size:22px;flex-shrink:0;line-height:1.5}
.article-note p.article-note_eyebrow{margin:0 0 16px}
.article-note p{margin:0}
.article-quote{border:0;margin:30px 0;padding:0 0 0 26px;border-left:4px solid #e2d7d7}
.article-quote p{font-family:var(--font-serif);font-size:22px;line-height:1.5;color:var(--c-primary);margin:0}
.article-quote cite{display:block;font-style:normal;font-size:14px;color:#7a6f6f;margin-top:10px}
.article-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 22px}
.article-share-link{width:40px;height:40px;border-radius:50%;border:1px solid #e2d7d7;display:inline-flex;align-items:center;justify-content:center;color:var(--c-primary);font-size:16px;flex-shrink:0}
.article-share-link:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
html.a11y-contrast .article-quote p,html.a11y-enhanced .article-quote p{color:var(--c-contrast-red) !important}
html.a11y-contrast .article-share-link,html.a11y-enhanced .article-share-link{color:var(--c-contrast-red) !important;border:2px solid #000}
html.a11y-contrast .article-share-link:hover,html.a11y-enhanced .article-share-link:hover{background:var(--c-contrast-red) !important;color:#fff !important;border-color:var(--c-contrast-red) !important}

/* --- astuces/diy-photophore-de-saint-valentin.html --- */
.article-related_item{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.article-related_item img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.article-related_item a{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:16px;text-decoration:underline}
html.a11y-contrast .article-related_item a,html.a11y-enhanced .article-related_item a{color:var(--c-contrast-red) !important}

/* --- astuces/index.html --- */
.astuce-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.astuce-hero_title{color:var(--c-white);margin:0;font-weight:400;line-height:1.15;font-size:30px}
.astuce-hero_title .lead{font-family:var(--font-serif);font-weight:400}
.astuce-hero_title .strong{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
@media(min-width:768px){.astuce-hero_title{font-size:52px}}
.astuce-section{padding:56px 0 30px}
.astuce-grid{display:grid;grid-template-columns:1fr;gap:30px 24px}
@media(min-width:560px){.astuce-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.astuce-grid{grid-template-columns:repeat(4,1fr)}}
.astuce-cell a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border:1px solid #e2d7d7;border-radius:6px;overflow:hidden;background:#fff;transition:box-shadow .3s,transform .3s}
.astuce-cell a:hover{box-shadow:0 12px 26px rgba(26,5,29,.12);transform:translateY(-4px)}
.astuce-cell_media{aspect-ratio:420/260;overflow:hidden;background:#f2e9e9;display:block}
.astuce-cell_media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.astuce-cell a:hover .astuce-cell_media img{transform:scale(1.05)}
.astuce-cell_title{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:20px;line-height:1.28;padding:16px 18px 20px}
/* Retour utilisateur, 2026-08-14 : balayage systématique (toutes les
   règles utilisant var(--c-primary)) — les astuces n'avaient aucun
   traitement contraste élevé/renforcé. */
html.a11y-contrast .astuce-cell_title,html.a11y-enhanced .astuce-cell_title{color:var(--c-contrast-red) !important}
.astuce-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:44px 0 10px}
.astuce-pager button{min-width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--c-primary);font-family:var(--font-body);font-weight:600;font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;line-height:1}
.astuce-pager button.is-active{background:#ab3433;color:#fff}
.astuce-pager button:disabled{opacity:.3;cursor:default}
.astuce-pager button:hover:not(.is-active):not(:disabled){background:#f2e9e9}
.astuce-pager button:focus-visible{outline:2px solid #1e6fb8;outline-offset:2px}

/* --- evenements/escapade-a-velo-au-coeur-de-la-haute-garonne.html --- */
.bhero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover;overflow:hidden}
.bhero .intro_wrapper{max-width:var(--wrapper-max);padding-left:var(--wrapper-padx);padding-right:var(--wrapper-padx)}
.bhero_grid{width:100%;display:grid;grid-template-columns:1fr;gap:26px;align-items:center;min-height:auto;padding:40px 0}
@media(min-width:860px){.bhero_grid{grid-template-columns:1.05fr .95fr;gap:44px;min-height:520px;padding:50px 0}}
.bhero_date{color:#fff;opacity:.9;font-size:17px;margin:0 0 26px;text-align:left;padding-top:40px;display:flex;align-items:center;gap:14px}
@media(min-width:860px){.bhero_date{padding-top:110px}}
.bhero_title{color:#fff;margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;font-size:24px;text-align:left}
@media(min-width:860px){.bhero_title{font-size:30px}}
.bhero_media{position:relative;justify-self:center;width:100%;max-width:520px;margin-top:24px}
/* 2026-08-07 (retour utilisateur) : marge horizontale ajoutée en mobile
   autour de la photo héro — sans elle, .bhero_bottle (positionnée à
   left:-10%, cf. ci-dessous) débordait du bord gauche de l'écran (bhero a
   overflow:hidden, donc la bouteille était partiellement rognée au lieu de
   simplement chevaucher la photo comme prévu sur la maquette desktop). */
@media(max-width:859px){.bhero_media{width:calc(100% - 48px);margin-left:auto;margin-right:auto}}
@media(min-width:860px){.bhero_media{margin-top:110px}}
.bhero_photo{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
/* Même disposition que cdixvins.fr (retour utilisateur, 2026-08-14, mesuré
   directement sur 2 articles réels du site) : le produit est dimensionné par
   la HAUTEUR (pas la largeur) — une bouteille ET un carton BIB y occupent
   tous deux ~80% de la hauteur de la photo, la largeur suit naturellement le
   ratio propre à chaque photo produit (une règle par largeur, l'ancienne
   version, rendait les BIB — larges/bas — anormalement petits par rapport
   aux bouteilles — hautes/étroites — pour une même largeur cible). Le bas du
   produit est exactement au ras du bas de la photo (bottom:0, pas de
   débordement) — seul le présentoir (padding-bottom, sous la bouteille
   uniquement) dépasse sous la photo, comme .fiche_socle sur la fiche vin. */
/* Hauteur relevée de 80% à 92%, puis à 120% (retour utilisateur, 2026-08-14 :
   "agrandir les images bouteille des blogs" — 92% jugé encore trop petit).
   Une bouteille est intrinsèquement étroite (ratio ~1:3.6 sur les visuels
   catalogue) : au-delà d'une certaine hauteur, la seule façon de l'agrandir
   encore est de la laisser dépasser du cadre plutôt que d'élargir la photo —
   .bhero a overflow:hidden mais sa hauteur totale (grid min-height:520px)
   laisse largement la place, le dépassement ne peut pas être rogné. Le bas
   du produit reste au ras du bas de la photo (bottom:0 inchangé), seul le
   haut dépasse davantage. */
.bhero_socle{position:absolute;left:-10%;bottom:0;height:120%;min-height:200px;padding-bottom:14px;background:url(img/bottle-socle.png) no-repeat 50% 100%;background-size:92% auto;text-align:center}
.bhero_bottle{display:inline-block;width:auto;height:100%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
/* .is-standalone : la photo produit porte déjà son propre présentoir — carton
   BIB (pose à plat, pas de socle rond) OU photo dédiée ("shooting") uploadée
   pour l'article, toujours livrée avec son présentoir intégré (vérifié :
   aucune des photos "bouteille-article-*.png" utilisées en prod n'est un
   simple détourage). Ajouter .bhero_socle par-dessus créait un double
   présentoir (retour utilisateur, 2026-08-14, capture à l'appui) — seule la
   bouteille catalogue de repli (détourage nu, même image que la fiche vin)
   a réellement besoin du présentoir CSS ci-dessus. */
.bhero_bottle.is-standalone{position:absolute;left:-10%;bottom:0;height:120%;min-height:200px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.barticle{padding:38px 0 22px}
.barticle_back{margin:0 0 32px}
.barticle_top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.blog-tag{display:inline-block;padding:7px 20px;border-radius:22px;font-size:16px;font-weight:700;color:#fff;background:#ab3433}
.blog-tag.is-conseil{background:#2C7F88}
/* var(--c-catalog), pas --c-catalog-bg : #eb6109 (bg) ne tient pas le 4.5:1
   RGAA/WCAG AA en texte blanc 16px/700 (~3.36:1, calculé) ; #c25007 si (~4.73:1). */
.blog-tag.is-astuce{background:var(--c-catalog)}
.barticle_rate{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.stars-display{display:inline-flex;gap:4px;font-size:20px;line-height:1;color:#e6c34a;-webkit-text-stroke:1px #c19f28}
.stars-display .off{color:#fff;-webkit-text-stroke:1.6px #c9bda0}
.rating_meta{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--c-muted);white-space:nowrap}
.rating_meta b{font-size:16px;font-weight:700;color:var(--c-text)}
.rating{display:inline-flex;align-items:center;gap:10px}
.rating_cta{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 17px;border:1px solid var(--c-primary);border-radius:2em;background:transparent;color:var(--c-primary);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:background .25s ease,color .25s ease}
/* Retour utilisateur, 2026-08-14 : bouton "Donner mon avis" (même style que
   .btn-border-primary, déjà traité) jamais rehaussé, ni les étoiles ni la
   modale de vote qui s'ouvre depuis ce bouton. */
html.a11y-contrast .rating_cta,html.a11y-enhanced .rating_cta{border-color:var(--c-contrast-red) !important;color:var(--c-contrast-red) !important}
html.a11y-contrast .rating_cta:hover,html.a11y-enhanced .rating_cta:hover{background:var(--c-contrast-red) !important;color:#fff !important}
html.a11y-contrast .stars-display,html.a11y-contrast .stars-input button.on,html.a11y-enhanced .stars-display,html.a11y-enhanced .stars-input button.on{-webkit-text-stroke-color:#000 !important;color:#000 !important}
html.a11y-contrast .stars-display .off,html.a11y-contrast .stars-input button,html.a11y-enhanced .stars-display .off,html.a11y-enhanced .stars-input button{-webkit-text-stroke-color:#000 !important}
.rating_cta:hover{background:var(--c-primary);color:#fff}
.rating_done{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#1c8a5a;white-space:nowrap}
/* Modale de vote (maquette V2) */
.vote-ov{position:fixed;inset:0;background:rgba(26,5,29,.55);z-index:120;opacity:0;pointer-events:none;transition:opacity .2s ease}
.vote-ov.is-open{opacity:1;pointer-events:auto}
.vote-modal{position:fixed;z-index:121;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:min(430px,calc(100vw - 32px));background:#fff;border-radius:14px;padding:30px 32px 26px;box-shadow:0 24px 64px rgba(26,5,29,.3);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.vote-modal.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.vote-modal_close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--c-muted);font-size:24px;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease}
.vote-modal_close:hover{background:var(--c-cream-2);color:var(--c-primary)}
html.a11y-contrast .vote-modal_close:hover,html.a11y-enhanced .vote-modal_close:hover{color:var(--c-contrast-red) !important}
.vote-modal h2{margin:0 0 6px;font-family:var(--font-display);font-size:21px;text-transform:uppercase;color:var(--c-primary);font-variant-ligatures:none}
/* Retour utilisateur, 2026-08-14 : modale de vote jamais traitée. */
html.a11y-contrast .vote-modal h2,html.a11y-enhanced .vote-modal h2{color:var(--c-contrast-red) !important}
.vote-modal p{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--c-muted)}
.vote-stars{display:flex;justify-content:center;gap:8px;margin:0 0 8px}
.vote-stars button{background:none;border:0;cursor:pointer;font-size:38px;line-height:1;padding:2px 4px;color:#efe7d8;-webkit-text-stroke:1.4px #a08c60;transition:color .15s ease,-webkit-text-stroke-color .15s ease,transform .15s ease}
.vote-stars button.on{color:#e0a020;-webkit-text-stroke-color:#a8761a}
.vote-stars button:hover{transform:translateY(-2px)}
.vote-label{display:block;text-align:center;min-height:22px;font-size:14px;font-weight:600;color:var(--c-primary);margin-bottom:18px}
.vote-send{display:block;width:100%;height:46px;border:0;border-radius:2em;background:var(--c-primary);color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:background .25s ease}
.vote-send:hover:not(:disabled){background:var(--c-primary-dark)}
html.a11y-contrast .vote-label,html.a11y-enhanced .vote-label{color:var(--c-contrast-red) !important}
html.a11y-contrast .vote-send,html.a11y-enhanced .vote-send{background:var(--c-contrast-red) !important}
.vote-send:disabled{opacity:.4;cursor:default}
.rating_sep{color:#c9bcbc}
.barticle_fb{width:38px;height:38px;border-radius:50%;border:1px solid #e2d7d7;display:inline-flex;align-items:center;justify-content:center;color:var(--c-primary);font-size:15px}
.barticle_fb:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.barticle p{font-size:17px;line-height:1.72;color:var(--c-text);margin:0 0 16px}
.barticle .wrapper{max-width:1000px}
.barticle p a,.barticle a.inline{color:var(--c-primary);text-decoration:underline}
html.a11y-contrast .barticle_fb,html.a11y-enhanced .barticle_fb{color:var(--c-contrast-red) !important;border:2px solid #000}
html.a11y-contrast .barticle_fb:hover,html.a11y-enhanced .barticle_fb:hover{background:var(--c-contrast-red) !important;color:#fff !important;border-color:var(--c-contrast-red) !important}
html.a11y-contrast .barticle p a,html.a11y-contrast .barticle a.inline,html.a11y-enhanced .barticle p a,html.a11y-enhanced .barticle a.inline{color:var(--c-contrast-red) !important}
/* Images insérées dans le corps de l'article (éditeur riche) : sans marge
   jusqu'ici, collées au texte voisin (retour utilisateur du 2026-08-07). */
.barticle img{display:block;max-width:100%;height:auto;margin:28px auto;border-radius:10px}
/* Anciennes mini-cartes "à lire aussi" (image+lien côte à côte dans un même
   paragraphe) : la règle générale ci-dessus (display:block + margin:auto)
   casse ce motif en isolant l'image sur sa propre ligne, loin du lien
   suivant. Restaure un flux inline uniquement quand l'image est elle-même
   un lien — les images autonomes du corps de texte gardent le traitement
   large/centré voulu au-dessus. */
.barticle a img,.article a img{display:inline-block;margin:0;vertical-align:middle}
/* Répétée ici (identique à la déclaration plus haut) : même spécificité que
   .barticle img ci-dessus (1 classe + 1 type des deux côtés), donc c'est la
   dernière déclaration dans le fichier qui gagne — sans ce doublon, le
   fond photo du bloc "Le vin de l'article" perdait son object-fit:cover
   (height écrasé par le height:auto du texte de l'article) et n'affichait
   que le haut de la bouteille. Valeurs 2026-08-21 alignées sur la
   déclaration de base plus haut (bouteille réduite + présentoir dessous) —
   c'est CELLE-CI qui s'applique réellement, ne modifier que l'une sans
   l'autre les ferait diverger silencieusement. */
.wine-feature_media img{position:absolute;left:0;right:0;top:6%;bottom:16%;display:block;width:100%;height:78%;margin:0;max-width:none;max-height:none;object-fit:contain;object-position:center bottom;border-radius:0;transform:none}
:where(.article,.barticle) h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:18px;margin:38px 0 16px}
:where(.article,.barticle) h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:17px;margin:32px 0 14px}
:where(.article,.barticle) h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--c-primary);font-size:15px;margin:26px 0 12px}
/* Retour utilisateur, 2026-08-14 : le corps des articles de blog n'avait
   aucun traitement contraste élevé/renforcé — sous-titres, encadrés
   ("Le matériel"/recette), citations et "Le conseil du sommelier" restaient
   tous en var(--c-primary), jamais rehaussés vers var(--c-contrast-red)
   comme le reste du site (cf. main a, .card_title, .section-title, déjà
   traités plus haut dans ce fichier — .barticle/.article vivent dans
   <main>, donc leurs liens (<a>) sont déjà couverts par cette règle
   générique ; seuls les éléments non-lien ci-dessous ne l'étaient pas). */
html.a11y-contrast :where(.article,.barticle) h2,
html.a11y-contrast :where(.article,.barticle) h3,
html.a11y-contrast :where(.article,.barticle) h4,
html.a11y-contrast .article-highlight h3,
html.a11y-contrast .recette_wrapper h3,
html.a11y-contrast .article blockquote:not([class]) p,
html.a11y-contrast .barticle blockquote:not([class]) p,
html.a11y-contrast .article-note_eyebrow,
html.a11y-contrast .article-note_body strong,
html.a11y-contrast .article-note .icon,
html.a11y-enhanced :where(.article,.barticle) h2,
html.a11y-enhanced :where(.article,.barticle) h3,
html.a11y-enhanced :where(.article,.barticle) h4,
html.a11y-enhanced .article-highlight h3,
html.a11y-enhanced .recette_wrapper h3,
html.a11y-enhanced .article blockquote:not([class]) p,
html.a11y-enhanced .barticle blockquote:not([class]) p,
html.a11y-enhanced .article-note_eyebrow,
html.a11y-enhanced .article-note_body strong,
html.a11y-enhanced .article-note .icon{color:var(--c-contrast-red) !important}
html.a11y-contrast .article-note_body,html.a11y-enhanced .article-note_body{border-left-color:var(--c-contrast-red) !important}
html.a11y-contrast .article-highlight li::before,html.a11y-contrast .recette_wrapper li::before,html.a11y-enhanced .article-highlight li::before,html.a11y-enhanced .recette_wrapper li::before{background:var(--c-contrast-red) !important}
.article-list{margin:6px 0 18px;padding-left:22px}
.article-list li{font-size:17px;line-height:1.7;color:var(--c-text);margin:0 0 8px}
.barticle_review{border:1px solid #e2d7d7;border-radius:6px;padding:22px 26px;margin:34px 0 0}
.barticle_review h2{margin:0 0 12px;font-size:16px}
.stars-input{display:inline-flex;gap:8px}
.blog-more{background:#f1eef1;padding:54px 0 60px;margin-top:42px}
.blog-more_head{text-align:center;margin:0 0 32px}
/* Retour utilisateur 2026-08-17 : .article-related_title est prévu pour un
   sous-titre compact en bas d'article (17px) — trop petit dans ce bloc-ci
   (astuces liées), une section aussi large/proéminente que "Vous allez
   aussi adorer nos recettes" (.blog-more_t, 30px) ailleurs sur le site. */
.blog-more_head .article-related_title{font-size:30px}
.blog-more_t{font-size:30px;font-weight:400;line-height:1.1;color:var(--c-primary)}
.blog-more_t .lead{font-family:var(--font-serif)}
.blog-more_t .strong{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary)}
.blog-more_sub{color:var(--c-text);font-size:15px;margin:6px 0 0}
html.a11y-contrast .blog-more_t,html.a11y-contrast .blog-more_t .strong,html.a11y-enhanced .blog-more_t,html.a11y-enhanced .blog-more_t .strong{color:var(--c-contrast-red) !important}
.blog-more_grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:34px}
@media(min-width:760px){.blog-more_grid{grid-template-columns:repeat(3,1fr)}}
.blog-cell a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border:1px solid #e2d7d7;border-radius:6px;overflow:hidden;background:#fff;transition:box-shadow .3s,transform .3s}
.blog-cell a:hover{box-shadow:0 12px 26px rgba(26,5,29,.12);transform:translateY(-4px)}
.blog-cell_media{aspect-ratio:420/240;overflow:hidden;background:#f2e9e9;display:block}
.blog-cell_media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.blog-cell a:hover .blog-cell_media img{transform:scale(1.05)}
.blog-cell_body{padding:16px 18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-cell_tags{display:flex;flex-wrap:wrap;gap:6px}
.blog-cell .blog-tag{align-self:flex-start;padding:6px 16px;font-size:14px}
.blog-cell_date{font-size:13px;color:#7a6f6f;margin:2px 0 -2px}
.blog-cell_title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--c-primary);font-size:17px;line-height:1.28;margin:0}
html.a11y-contrast .blog-cell_title,html.a11y-enhanced .blog-cell_title{color:var(--c-contrast-red) !important}
html.a11y-contrast .blog-cell a,html.a11y-enhanced .blog-cell a{border:2px solid #000}
.blog-cell_desc{font-size:14px;line-height:1.5;color:var(--c-text);margin:0}
.blog-more_cta{text-align:center}

/* --- evenements/index.html --- */
.blog-hero{background:var(--c-black) url(img/hero-curtain.png) no-repeat center center/cover}
.blog-hero_title{color:var(--c-white);margin:0;font-weight:400;line-height:1.1;font-size:30px;text-align:center}
.blog-hero_title .lead{font-family:var(--font-serif)}
.blog-hero_title .strong{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
@media(min-width:768px){.blog-hero_title{font-size:52px}}
.blog-section{padding:56px 0 30px}
.blog-grid{display:grid;grid-template-columns:1fr;gap:30px 26px}
@media(min-width:560px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:44px 0 10px}
.blog-pager button{min-width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--c-primary);font-family:var(--font-body);font-weight:600;font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.blog-pager button.is-active{background:#ab3433;color:#fff}
.blog-pager button:disabled{opacity:.3;cursor:default}
.blog-pager button:hover:not(.is-active):not(:disabled){background:#f2e9e9}
.blog-pager button:focus-visible{outline:2px solid #1e6fb8;outline-offset:2px}

/* --- regions/detail.html ---
   2026-08-07 (retour utilisateur : l'espacement doit être EXACTEMENT le
   même que sur la page effervescents, ordi ET mobile). Deux tentatives de
   réglage manuel (.region-hero_inner/.region-hero_row avec leurs propres
   padding) ont chacune dérivé dans un sens différent de celui
   d'.efferv-hero. Plutôt que d'ajuster une troisième fois des chiffres à la
   main, ce bloc réutilise directement .intro + .intro_wrapper (le même
   composant partagé qu'.efferv-hero) : mêmes classes, donc plus aucun
   risque de désynchronisation future. Seule différence volontaire
   conservée : la texture "rideau" en dégradé ci-dessous (au lieu de
   l'image hero-curtain.png), propre aux pages région depuis l'origine. */
.region-hero{background:#0b0b0b;background-image:repeating-linear-gradient(90deg,#040404 0,#191919 26px,#2a2a2a 40px,#191919 54px,#040404 80px);overflow:hidden;padding-bottom:130px}
.region-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);pointer-events:none}
.region-hero_title{margin:0;color:var(--c-white);line-height:1.1;font-weight:400}
.region-hero_title .lead{font-family:var(--font-serif);font-size:30px;letter-spacing:.01em}
.region-hero_title .name{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:.02em;margin-left:.18em}
@media(min-width:768px){.region-hero_title .lead{font-size:44px}.region-hero_title .name{font-size:50px}}
/* Même agrandissement que .efferv-band (2026-08-07, référence cdixvins.fr) :
   3 images côte à côte dès le mobile, ratio 3/2 partout. Sur desktop, collé
   au bord droit seulement (même technique --bleed-inset que .efferv-band) ;
   ce bloc n'est pas dans un .wrapper (il gère lui-même son centrage en
   dessous de 1024px), donc contrairement à .efferv-band il lui faut aussi
   un margin-left explicite pour garder l'alignement gauche du contenu.
   margin-top aligné sur .efferv-band (-70px/-100px, au lieu de -120px) le
   même jour, pour un écart titre → images identique aux deux pages. */
.region-triptych{max-width:var(--wrapper-max);margin:-70px auto 0;padding:0 var(--wrapper-padx);position:relative;z-index:2}
@media(min-width:768px){.region-triptych{margin-top:-100px}}
@media(min-width:1024px){.region-triptych{max-width:none;width:calc(100vw - var(--bleed-inset));margin-left:var(--bleed-inset);padding:0}}
.region-triptych_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.region-triptych_grid figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:#e6e9ef}
.region-triptych_grid img{width:100%;height:100%;object-fit:cover;display:block}
.region-panel{max-width:var(--wrapper-max);margin:56px auto 90px;padding:0 var(--wrapper-padx)}
.region-panel_card{border:1px solid var(--c-grey-bg-2);border-radius:12px;background:#fff;padding:32px 26px;display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
/* Retour utilisateur, 2026-08-14 : même trou que .wine_card/.res-card/
   .efferv-card. */
html.a11y-contrast .region-panel_card,html.a11y-enhanced .region-panel_card{border:2px solid #000}
@media(min-width:900px){.region-panel_card{grid-template-columns:1fr 1fr;gap:48px;padding:56px 60px}}
.region-panel_map{display:flex;align-items:center;justify-content:center;min-height:280px}
.region-panel_map img{max-width:100%;height:auto;max-height:560px}
.region-panel_desc p{margin:0 0 26px;font-size:17px;line-height:1.7;color:var(--c-text)}
.region-cta{display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border:1px solid var(--c-primary);border-radius:var(--radius-pill);color:var(--c-primary);font-weight:600;font-size:16px;background:#fff;transition:background .3s,color .3s}
.region-cta .icon{font-size:15px}
.region-cta:hover,.region-cta:focus-visible{background:var(--c-primary);color:#fff}
.region-back{max-width:var(--wrapper-max);margin:0 auto;padding:22px var(--wrapper-padx) 4px}
@media(min-width:1024px){.region-back{max-width:none;margin:0;padding:22px 0 4px 25vw}}
.region-back a{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:1px solid var(--c-primary);border-radius:var(--radius-pill);color:var(--c-primary);font-weight:600;font-size:15px;background:#fff;transition:background .3s,color .3s}
.region-back a:hover,.region-back a:focus-visible{background:var(--c-primary);color:#fff}
html.a11y-contrast .region-cta,html.a11y-contrast .region-back a,html.a11y-enhanced .region-cta,html.a11y-enhanced .region-back a{color:var(--c-contrast-red) !important;border-color:#000 !important}
html.a11y-contrast .region-cta:hover,html.a11y-contrast .region-cta:focus-visible,html.a11y-contrast .region-back a:hover,html.a11y-contrast .region-back a:focus-visible,html.a11y-enhanced .region-cta:hover,html.a11y-enhanced .region-cta:focus-visible,html.a11y-enhanced .region-back a:hover,html.a11y-enhanced .region-back a:focus-visible{background:var(--c-contrast-red) !important;color:#fff !important;border-color:var(--c-contrast-red) !important}
.region-back.region-back--after{max-width:none;margin:0;padding:26px 0 0}
html.a11y-contrast .region-hero_title,html.a11y-enhanced .region-hero_title{color:#fff !important}

/* --- vins/aop-1-vin-rouge-buzet-lexcellence.html --- */
.fiche{--accent:#a83957;--fiche-bg:#faf1f2;background:var(--fiche-bg)}
.fiche[data-type="blanc"]{--accent:#46831e;--fiche-bg:#f4f8ef}
.fiche[data-type="rose"]{--accent:#be4f69;--fiche-bg:#fdf2f4}
.fiche[data-type="effervescent"]{--accent:#a59140;--fiche-bg:#faf7ec}
.fiche_head{max-width:var(--wrapper-max);margin:0 auto;padding:72px var(--wrapper-padx) 0;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;text-align:center}
@media(min-width:860px){.fiche_head{grid-template-columns:1fr auto 1fr;gap:16px;text-align:left}}
.fiche_back{justify-self:start}
.fiche_back a{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border:1px solid var(--accent);border-radius:var(--radius-pill);color:var(--accent);font-weight:600;font-size:15px;background:transparent;transition:background .3s,color .3s}
.fiche_back a:hover,.fiche_back a:focus-visible{background:var(--accent);color:#fff}
.fiche_back .icon{font-size:1.35em;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fiche_back a:hover .icon{transform:translateX(-3px)}
.fiche_selection{margin:0;font-weight:400;line-height:1.15;text-align:center}
.fiche_selection .lead{font-family:var(--font-serif);font-size:26px;color:var(--accent)}
.fiche_selection .name{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.02em;color:var(--accent);margin-left:.14em;text-transform:uppercase}
@media(min-width:860px){.fiche_selection .lead{font-size:30px}.fiche_selection .name{font-size:30px}}
.fiche_store{justify-self:center;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:15px;font-weight:500}
@media(min-width:860px){.fiche_store{justify-self:end}}
.fiche_store .icon{font-size:18px}
.fiche_stores{margin:14px 0 26px;font-size:15px;color:var(--c-text)}
.fiche_stores a{color:var(--accent);text-decoration:underline;font-weight:600}
.fiche_stores a:hover{text-decoration:none}
.fiche_stores_btn{all:unset;color:var(--accent);text-decoration:underline;font-weight:600;font-size:inherit;font-family:inherit;cursor:pointer}
.fiche_stores_btn:hover{text-decoration:none}
.stores-modal_list{margin:0;font-size:14px;line-height:1.6;color:var(--c-text)}
.fiche_card{max-width:var(--wrapper-max);margin:48px auto 0;padding:0 var(--wrapper-padx)}
.fiche_card_inner{background:#fff;border-radius:16px;padding:36px 26px;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;box-shadow:0 24px 60px rgba(26,5,29,.07)}
@media(min-width:860px){.fiche_card_inner{grid-template-columns:1.08fr .92fr;padding:56px 62px;gap:44px}}
.fiche_appellation{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--accent);text-transform:uppercase;margin:0 0 6px}
.fiche_name{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.04;letter-spacing:.01em;color:var(--accent);text-transform:uppercase;margin:0}
@media(min-width:860px){.fiche_name{font-size:46px}}
.fiche_volume{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--accent);margin:14px 0 0;text-transform:uppercase}
.fiche_infos-title{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--accent);text-transform:uppercase;margin:30px 0 20px}
.fiche_price{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:17px;color:var(--c-text)}
.fiche_price b{color:var(--accent);font-weight:700;font-size:20px;letter-spacing:2px}
.fiche_price_desc{color:var(--c-text)}
.fiche_info{width:22px;height:22px;flex-shrink:0;border:0;background:transparent;color:var(--accent);cursor:help;padding:0;display:inline-flex;align-items:center;justify-content:center}
.fiche_info .icon{font-size:19px}
.fiche_specs{display:flex;flex-direction:column;gap:18px;margin:0}
.fiche_spec{display:flex;align-items:center;gap:16px;font-size:17px;color:var(--c-text);line-height:1.45}
.fiche_spec img{width:50px;height:50px;flex-shrink:0}
.fiche_actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:36px}
.fiche_fav{display:inline-flex;align-items:center;gap:12px;padding:13px 26px;border:1px solid var(--accent);border-radius:var(--radius-pill);background:transparent;color:var(--accent);font-weight:600;font-size:16px;font-family:var(--font-body);cursor:pointer;transition:background .3s,color .3s}
.fiche_fav:hover{background:var(--accent);color:#fff}
.fiche_fav.is-active{background:var(--accent);color:#fff}
.fiche_fav .heart{width:19px;height:18px;fill:currentColor;flex-shrink:0}
.fiche_share{display:flex;align-items:center;gap:10px}
.fiche_share a,.fiche_share button{width:46px;height:46px;border-radius:50%;border:1px solid var(--c-grey-bg-2);background:#fff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.fiche_share a:hover,.fiche_share button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Retour utilisateur 2026-08-17 : "html.a11y-contrast main a{color:...
   !important}" (plus haut dans ce fichier) force le texte/icône de TOUT
   lien de <main> en rouge fixe, y compris au survol — ce survol-ci n'avait
   pas son propre !important pour reprendre la main, d'où icône/texte
   restés rouge sur fond rouge foncé (var(--accent)) au survol. Même bug
   que .btn-border-primary/.fbcard_btn déjà corrigés plus haut. */
html.a11y-contrast .fiche_share a:hover,html.a11y-contrast .fiche_share button:hover,html.a11y-enhanced .fiche_share a:hover,html.a11y-enhanced .fiche_share button:hover{color:#fff !important}
.fiche_share .icon{font-size:17px}
.fiche_share svg{width:19px;height:19px;fill:currentColor}
.fiche_media{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:480px;padding-bottom:8px;order:-1}
.fiche_media img{position:relative;z-index:1;max-height:480px;width:auto}
@media(min-width:860px){.fiche_media{order:0;min-height:540px}.fiche_media img{max-height:680px}}
/* Présentoir sous la bouteille : même technique que cdixvins.fr — un seul
   visuel de socle réutilisé pour tous les vins (assets/img/bottle-socle.png),
   posé en fond du conteneur et révélé dans le padding-bottom réservé sous la
   photo, plutôt qu'une photo dédiée par vin. */
.fiche_socle{display:block;flex:0 0 auto;width:172px;padding-bottom:22px;background:url(img/bottle-socle.png) no-repeat 50% 100%;background-size:92% auto;text-align:center}
@media(min-width:860px){.fiche_socle{width:220px;padding-bottom:30px}}
/* Logos de labels (Nouveau, Marque Repère, Bio, HVE) : liste vide si aucun
   n'est coché en admin, cf. :empty ci-dessous. */
.fiche_labels{position:absolute;top:18px;right:18px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;padding:0;list-style:none}
.fiche_labels:empty{display:none}
.fiche_labels li{display:block}
.fiche_labels img{width:84px;height:84px;object-fit:contain;display:block}
@media(min-width:860px){.fiche_labels{top:26px;right:26px;gap:22px}.fiche_labels img{width:106px;height:106px}}
.fiche_nav{max-width:var(--wrapper-max);margin:0 auto;padding:38px var(--wrapper-padx) 84px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.fiche_nav a{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1px solid var(--accent);border-radius:var(--radius-pill);color:var(--accent);font-weight:600;font-size:15px;transition:background .3s,color .3s}
.fiche_nav a:hover{background:var(--accent);color:#fff}
/* Retour utilisateur 2026-08-17 : même bug que .fiche_share ci-dessus. */
html.a11y-contrast .fiche_nav a:hover,html.a11y-enhanced .fiche_nav a:hover{color:#fff !important}
.fiche_nav .icon{font-size:1.35em;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fiche_nav .prev:hover .icon{transform:translateX(-3px)}
.fiche_nav .next:hover .icon{transform:translateX(3px)}
.fiche_nav .next{margin-left:auto}
html.a11y-contrast .fiche,html.a11y-enhanced .fiche{--accent:#8a1f3c}