/* ==========================================================================
   Cave Saint Etienne · Charte web « La Maison » · Composants v1.0 (5 nov. 2026)
   Dépend de cse-tokens.css (WordPress) ou du tokens.css du design system. Préfixe .cse- pour ne pas entrer en conflit avec WordPress.
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
/* Section sombre : les rôles basculent (voir tokens, thème « cave »). */
*,*::before,*::after{box-sizing:border-box}
[data-theme="cave"],.is-style-cave{background:var(--cse-bg); color:var(--cse-text)}
body{margin:0; background:var(--cse-bg); color:var(--cse-text); font:var(--cse-fw-texte) var(--cse-fs-body)/var(--cse-lh-texte) var(--cse-font-texte); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--cse-font-titre); font-weight:var(--cse-fw-titre); line-height:var(--cse-lh-titre); letter-spacing:var(--cse-ls-titre); text-wrap:balance; margin:0}
h1{font-size:var(--cse-fs-h1)} h2{font-size:var(--cse-fs-h2)}
h3{font-size:var(--cse-fs-h3); font-weight:400; line-height:var(--cse-lh-carte); letter-spacing:0}
h4{font-size:var(--cse-fs-h4); font-weight:400; line-height:1.2; letter-spacing:0}
h1 em,h2 em,.cse-display em{font-style:italic; color:var(--cse-accent)}
p{margin:0; text-wrap:pretty; max-width:var(--cse-measure)}
a{color:var(--cse-accent); text-decoration-thickness:1px; text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--cse-focus-ring); outline-offset:var(--cse-focus-offset)}
img{max-width:100%; height:auto; display:block}

.cse-wrap{max-width:var(--cse-content); margin-inline:auto; padding-inline:var(--cse-gutter)}
.cse-section{padding-block:var(--cse-space-section)}
.cse-section--alt{background:var(--cse-bg-alt)}
.cse-display{font:var(--cse-fw-titre) var(--cse-fs-display)/1.03 var(--cse-font-titre); letter-spacing:var(--cse-ls-titre)}
.cse-lead{font-size:var(--cse-fs-lead); color:var(--cse-text-muted)}
.cse-muted{color:var(--cse-text-muted)}

/* ---- Étiquettes (Space Mono) --------------------------------------------- */
.cse-eyebrow,.cse-label{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:var(--cse-ls-label); text-transform:uppercase}
.cse-eyebrow{color:var(--cse-accent)}          /* surtitre : bordeaux sur clair, ambre sur sombre */
.cse-label{color:var(--cse-text-muted)}        /* date, métadonnée */
.cse-tag{display:inline-flex; align-items:center; font:500 var(--cse-fs-label)/1 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-radius:var(--cse-radius-pill); background:var(--cse-bg-alt); color:var(--cse-text)}

/* Univers : carré de couleur du nuancier + mot (jamais l'un sans l'autre) */
.cse-univers{display:inline-flex; align-items:center; gap:8px; font:500 var(--cse-fs-label)/1 var(--cse-font-etiq); letter-spacing:.12em; text-transform:uppercase}
.cse-univers::before{content:""; width:10px; height:10px; background:var(--k, var(--cse-robe-grenat)); flex:none}
.cse-univers--initiations{--k:var(--cse-robe-pourpre)} .cse-univers--vins{--k:var(--cse-robe-grenat)}
.cse-univers--bieres{--k:var(--cse-robe-tuile)} .cse-univers--spiritueux{--k:var(--cse-robe-ambre)}
.cse-univers--champagnes{--k:var(--cse-robe-or)}
.cse-robe-band{display:grid; grid-template-columns:repeat(5,1fr); height:6px}
.cse-robe-band > *{background:var(--k)}

/* ---- Boutons --------------------------------------------------------------
   Un seul bouton plein par écran. Couleurs par rôle : bordeaux sur clair,
   ambre dans une section sombre (data-theme="cave" ou .is-style-cave). */
.cse-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--cse-tap-min); padding:12px 22px; border-radius:var(--cse-radius-pill); border:1px solid transparent; font:var(--cse-fw-fort) .9375rem/1.2 var(--cse-font-texte); text-decoration:none; cursor:pointer; transition:background-color var(--cse-dur-fast) var(--cse-ease), color var(--cse-dur-fast) var(--cse-ease), border-color var(--cse-dur-fast) var(--cse-ease)}
.cse-btn--primary{background:var(--cse-btn-bg); color:var(--cse-btn-fg)}
.cse-btn--primary:hover{background:var(--cse-btn-bg-hover)}
.cse-btn--outline{border-color:var(--cse-btn-outline); color:var(--cse-btn-outline-fg); background:transparent}
.cse-btn--outline:hover{border-color:var(--cse-btn-outline-fg)}
.cse-btn--sm{min-height:36px; padding:8px 16px; font-size:.8125rem}
.cse-btn[disabled],.cse-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed}
.cse-link-arrow{font:500 var(--cse-fs-label)/1 var(--cse-font-etiq); letter-spacing:.12em; text-transform:uppercase; color:var(--cse-accent); text-decoration:none}
.cse-link-arrow::after{content:" →"}

/* ---- Bandeau d'infos + en-tête ------------------------------------------- */
.cse-topbar{display:flex; justify-content:space-between; gap:16px; padding:9px var(--cse-gutter); background:var(--cse-brun); color:var(--cse-creme); font:500 var(--cse-fs-label)/1.2 var(--cse-font-etiq); letter-spacing:.08em; text-transform:uppercase}
.cse-topbar strong{color:var(--cse-ambre); font-weight:400}
.cse-header{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; padding:12px var(--cse-gutter); background:color-mix(in srgb, var(--cse-papier) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--cse-line)}
.cse-header__logo{width:58px; height:58px; flex:none}
.cse-nav{display:flex; gap:24px; list-style:none; margin:0 0 0 auto; padding:0}
.cse-nav a{color:var(--cse-brun); text-decoration:none; font-weight:500; font-size:.875rem; padding-block:6px}
.cse-nav a[aria-current="page"]{color:var(--cse-bordeaux); box-shadow:inset 0 -2px 0 var(--cse-bordeaux)}
.cse-nav a:hover{color:var(--cse-bordeaux)}
.cse-header__tel{white-space:nowrap}          /* .cse-btn.cse-btn--primary, lien tel: */
.cse-menu-toggle{display:none; min-height:var(--cse-tap-min); padding:0 16px; border:1px solid rgba(42,27,23,.4); border-radius:var(--cse-radius-pill); background:none; font:500 var(--cse-fs-label) var(--cse-font-etiq); letter-spacing:.12em; text-transform:uppercase; color:var(--cse-brun)}
@media (max-width: 980px){
  .cse-nav{display:none} .cse-header__tel{margin-left:auto} .cse-menu-toggle{display:inline-flex; align-items:center}
  .cse-header[data-open] .cse-nav{display:grid; position:absolute; inset:100% 0 auto 0; gap:0; padding:8px var(--cse-gutter) 20px; background:var(--cse-papier); border-bottom:1px solid var(--cse-line)}
  .cse-header[data-open] .cse-nav a{display:block; padding:14px 0; font-size:1.0625rem; border-bottom:1px solid var(--cse-line)}
}
@media (max-width: 600px){ .cse-topbar .cse-hide-sm{display:none} .cse-header__logo{width:48px; height:48px} .cse-header{gap:10px} }

/* ---- Hero ------------------------------------------------------------------ */
.cse-hero{position:relative; min-height:min(78vh, 620px); display:grid; align-items:end; color:#fff; background:var(--cse-brun); isolation:isolate}
.cse-hero__media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.cse-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(28,16,12,.9) 0%, rgba(28,16,12,.72) 45%, rgba(28,16,12,.25) 100%), linear-gradient(0deg, rgba(28,16,12,.6), transparent 50%)}
.cse-hero__in{padding:var(--cse-space-8) var(--cse-gutter) var(--cse-space-7); max-width:680px}
.cse-hero .cse-display{margin:16px 0 20px} .cse-hero .cse-display em{color:inherit}
.cse-hero .cse-lead{color:var(--cse-creme)}
.cse-hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.cse-hero__meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font:500 var(--cse-fs-label) var(--cse-font-etiq); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.cse-hero__meta strong{color:var(--cse-ambre); font-weight:400}
@media (max-width: 760px){ .cse-hero{min-height:0} .cse-hero::after{background:linear-gradient(0deg, rgba(28,16,12,.92) 20%, rgba(28,16,12,.55) 100%)} }

/* ---- Bandeau des 4 univers -------------------------------------------------- */
.cse-univers-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid var(--cse-line)}
.cse-univers-strip > a{display:grid; align-content:start; gap:6px; padding:22px 24px; border-right:1px solid var(--cse-line); color:inherit; text-decoration:none}
.cse-univers-strip > a:last-child{border-right:0}
.cse-univers-strip > a:hover{background:var(--cse-lin)}
.cse-univers-strip i{width:14px; height:14px; background:var(--k); margin-bottom:8px}
.cse-univers-strip strong{font:400 1.3125rem/1.1 var(--cse-font-titre)}
.cse-univers-strip span{font-size:var(--cse-fs-small); color:var(--cse-text-muted); line-height:1.4}
@media (max-width: 760px){ .cse-univers-strip{grid-template-columns:1fr 1fr} .cse-univers-strip > a{padding:16px 18px; border-bottom:1px solid var(--cse-line)} .cse-univers-strip > a:nth-child(2n){border-right:0} }

/* ---- Bloc « Sam. » (rendez-vous du samedi) ---------------------------------- */
.cse-samedi{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:22px var(--cse-gutter); background:var(--cse-lin)}
.cse-samedi__day{font:300 2.875rem/1 var(--cse-font-titre); color:var(--cse-bordeaux)}
.cse-samedi strong{display:block; font:400 var(--cse-fs-h4)/1.2 var(--cse-font-titre)}
@media (max-width: 600px){ .cse-samedi{grid-template-columns:auto 1fr} .cse-samedi .cse-link-arrow{grid-column:1/-1} }

/* ---- Cartes (agenda, offres) ------------------------------------------------ */
.cse-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:22px}
.cse-card{position:relative; display:grid; align-content:start; background:var(--cse-surface); border:1px solid rgba(42,27,23,.1); border-radius:var(--cse-radius-m); overflow:hidden; transition:box-shadow var(--cse-dur) var(--cse-ease)}
.cse-card:hover{box-shadow:var(--cse-shadow-card)}
.cse-card__media{aspect-ratio:4/3; width:100%; object-fit:cover}
.cse-card__body{display:grid; gap:9px; padding:18px 20px 20px}
.cse-card__body p{font-size:.9375rem; color:var(--cse-text-muted); line-height:1.5}
.cse-card__foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:6px}
/* Carte entièrement cliquable : le lien du titre couvre la carte */
.cse-card__link{color:inherit; text-decoration:none}
.cse-card__link::after{content:""; position:absolute; inset:0}

/* ---- Section sombre (fûts) : stats, offre, formulaire ----------------------- */
.cse-split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.cse-split__media{min-height:100%; object-fit:cover; width:100%}
.cse-split__in{display:grid; gap:18px; align-content:start; padding:40px var(--cse-gutter)}
@media (max-width: 760px){ .cse-split{grid-template-columns:1fr} .cse-split__media{min-height:200px; max-height:280px} }
.cse-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:16px 0; border-block:1px solid var(--cse-line); margin:0}
.cse-stats > div{display:grid; gap:4px}
.cse-stats dd{margin:0; order:-1; font:300 2.125rem/1 var(--cse-font-titre); color:var(--cse-accent)}
.cse-stats dt{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
@media (max-width: 600px){ .cse-stats{grid-template-columns:1fr} }
.cse-offer{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--cse-ambre) 45%, transparent); border-radius:var(--cse-radius-m)}
.cse-offer strong{font:400 var(--cse-fs-h4)/1.2 var(--cse-font-titre)}
.cse-offer__price{font:300 2rem/1 var(--cse-font-titre); color:var(--cse-accent); white-space:nowrap}

/* ---- Formulaire ------------------------------------------------------------- */
.cse-form{display:grid; gap:14px; padding:20px; border-radius:var(--cse-radius-m); background:var(--cse-surface)}
.cse-form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 600px){ .cse-form__row{grid-template-columns:1fr} }
.cse-field{display:grid; gap:6px}
.cse-field label{font-size:var(--cse-fs-small); font-weight:500}
.cse-field .cse-req{color:var(--cse-accent)}
.cse-input{min-height:var(--cse-tap-min); padding:10px 12px; border:1px solid var(--cse-field-border); border-radius:var(--cse-radius-s); background:transparent; color:inherit; font:inherit; font-size:1rem}
textarea.cse-input{min-height:110px; resize:vertical}
.cse-input::placeholder{color:var(--cse-text-muted); opacity:1}
.cse-input:focus-visible{outline:var(--cse-focus-ring); outline-offset:1px; border-color:var(--cse-focus)}
.cse-input[aria-invalid="true"]{border-color:var(--cse-error); border-width:2px}
.cse-field__error{font-size:var(--cse-fs-small); color:var(--cse-error)}
.cse-field__error::before{content:"⚠ "}
.cse-form__note{font:500 var(--cse-fs-label)/1.5 var(--cse-font-etiq); letter-spacing:.06em; text-transform:uppercase; color:var(--cse-text-muted)}
.cse-notice{padding:12px 16px; border-radius:var(--cse-radius-s); border-left:3px solid var(--cse-success); background:var(--cse-lin); color:var(--cse-brun)}

/* ---- Étapes 1-2-3 ----------------------------------------------------------- */
.cse-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; list-style:none; margin:0; padding:0; counter-reset:s}
.cse-steps li{display:grid; gap:6px; counter-increment:s}
.cse-steps li::before{content:counter(s); font:300 2.5rem/1 var(--cse-font-titre); color:var(--cse-bordeaux)}
.cse-steps strong{font:400 1.1875rem/1.2 var(--cse-font-titre)}
.cse-steps p{font-size:var(--cse-fs-small); color:var(--cse-text-muted)}
@media (max-width: 760px){ .cse-steps{grid-template-columns:1fr} }

/* ---- Avis Google ------------------------------------------------------------ */
.cse-rating{font:400 1.25rem var(--cse-font-titre)} .cse-rating strong{font-weight:400; color:var(--cse-accent)}

/* ---- Pied de page (mention loi Evin obligatoire) ---------------------------- */
.cse-footer{background:var(--cse-brun); color:var(--cse-creme); padding:var(--cse-space-7) var(--cse-gutter) var(--cse-space-5)}
.cse-footer a{color:var(--cse-creme)}
.cse-footer__grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:32px; max-width:var(--cse-content); margin-inline:auto}
.cse-footer h4{font-size:var(--cse-fs-h4); color:#fff; margin-bottom:10px}
.cse-footer__evin{max-width:var(--cse-content); margin:32px auto 0; padding-top:18px; border-top:1px solid rgba(239,228,214,.18); font:500 var(--cse-fs-label)/1.5 var(--cse-font-etiq); letter-spacing:.06em; text-transform:uppercase; color:var(--cse-sable)}

/* ---- Lien d'évitement (accessibilité) --------------------------------------- */
.cse-skip{position:absolute; left:-999px; top:8px; z-index:100; padding:10px 16px; background:var(--cse-brun); color:#fff; border-radius:var(--cse-radius-s)}
.cse-skip:focus{left:8px}