/* Cave Saint Etienne · Page Fûts & tireuses (patterns/futs-*.php), d'après maquettes/futs-tireuses.html. Uniquement des variables --cse-… ; fil d'Ariane, en-tête et pastilles viennent de cse-degustations.css. */
/* Cave Saint Etienne · Page Fûts & tireuses · maquette lot 3 (5 nov. 2026)
   Complète cse-tokens.css + components.css + commun.css. Aucun nouveau token.
   Les blocs fil d'Ariane, en-tête de page, filtres, déroulé, FAQ, case à cocher et barre mobile reprennent degustations.css. */

/* Carte « en bref » (même dessin que la carte du samedi sur Dégustations) */
.bref{position:relative; display:grid; gap:16px; padding:26px 28px 24px; border-radius:var(--cse-radius-m); background:var(--cse-blanc); border:1px solid rgba(42,27,23,.1); box-shadow:var(--cse-shadow-card); overflow:hidden}
.bref .cse-robe-band{position:absolute; inset:0 0 auto}
.bref__top{display:grid; gap:6px; padding-top:6px}
.bref__from{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.bref__price{font:300 4rem/.9 var(--cse-font-titre); color:var(--cse-bordeaux); letter-spacing:-.02em; font-variant-numeric:lining-nums}
.bref dl{margin:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--cse-line)}
.bref dl > div{display:grid; gap:2px; padding:12px 0; border-bottom:1px solid var(--cse-line); min-width:0}
.bref dl > div:nth-child(odd){padding-right:12px; border-right:1px solid var(--cse-line)}
.bref dl > div:nth-child(even){padding-left:16px}
.bref dt{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.bref dd{margin:0; font:400 1.125rem/1.25 var(--cse-font-titre)}
.bref__note{font-size:.875rem; color:var(--cse-text-muted)}
.bref__cta{justify-self:start; margin-inline-start:9px} /* le dessin du bouton contour déborde de 9 px */
@media (max-width: 860px){ .p-head__grid{grid-template-columns:1fr; align-items:start} }
@media (max-width: 420px){ .bref{padding:22px 18px 20px} .bref__price{font-size:3.25rem} .bref dl > div:nth-child(even){padding-left:12px} .bref dd{font-size:1rem} }

/* ---- Pack événement : composant OffreFuts (cse-split + cse-offer), posé en carte claire ---- */
.pack{background:var(--cse-blanc); border:1px solid rgba(42,27,23,.1); border-radius:var(--cse-radius-m); overflow:hidden; box-shadow:var(--cse-shadow-card)}
.pack__visuel{position:relative; display:grid; place-items:center; height:auto; max-height:none; padding:clamp(28px, 4vw, 48px); background:var(--cse-bg); color:var(--cse-ambre); min-height:280px}
.pack__visuel svg{width:100%; max-width:320px; height:auto}
/* Photo de la tireuse (5 nov. 2026) : remplit la colonne du visuel, recadrée sur la tireuse. */
.pack__visuel:has(.pack__photo){display:block; padding:0; min-height:280px; background:none}
.pack__visuel .pack__photo{width:100%; max-width:none; margin:0; height:100%}
.pack__visuel .pack__photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%}
@media (max-width: 760px){ .pack__visuel:has(.pack__photo){min-height:0; height:280px} }
.pack__txt h2{margin:0; font:var(--cse-fw-titre) var(--cse-fs-h2)/1.08 var(--cse-font-titre); letter-spacing:var(--cse-ls-titre)}
.pack__txt h2 em{display:block}
.pack__list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); padding-left:0; border-top:1px solid var(--cse-line)}
.pack__list li{display:grid; align-content:start; gap:4px; padding:14px 16px 14px 0; border-bottom:1px solid var(--cse-line); min-width:0}
.pack__list li:nth-child(even){padding-left:16px; border-left:1px solid var(--cse-line)}
.pack__list b{font:400 1.125rem/1.25 var(--cse-font-titre)}
.pack__list span{font-size:.875rem; color:var(--cse-text-muted); line-height:1.45}
.pack .cse-offer__price{font-variant-numeric:lining-nums}
/* Fiche du pack (5 nov. 2026) : mini fiche produit. La photo ne fixe plus la hauteur (elle couvre sa colonne) :
   c'est la fiche qui la donne, en colonne flexible, le prix et la demande calés en pied. */
.pack__visuel:has(.pack__photo){position:relative}
.pack__visuel .pack__photo{position:absolute; inset:0}
.pack__txt{display:flex; flex-direction:column; gap:18px; padding:clamp(24px, 4vw, 44px)}
.pack__txt > *{margin:0; max-width:none}
.pack__tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
.pack__badge{margin:0; padding:6px 12px; border-radius:var(--cse-radius-pill); background:color-mix(in srgb, var(--cse-robe-tuile) 12%, transparent); font:500 .8125rem/1.2 var(--cse-font-texte); font-variant-numeric:lining-nums; white-space:nowrap}
.pack__intro{font-size:.9375rem; color:var(--cse-text-muted)}
.pack__titre{margin-top:4px}
.pack__txt .pack__list{margin:-10px 0 0; gap:0 20px}
.pack__txt .pack__list li:nth-child(n){position:relative; padding:12px 0 12px 20px}
.pack__txt .pack__list li::before{content:""; position:absolute; left:0; top:17px; width:9px; height:12px; background:var(--cse-robe-tuile); -webkit-mask:url("../images/goutte.svg") center/contain no-repeat; mask:url("../images/goutte.svg") center/contain no-repeat}
.pack__specs{margin:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 16px; padding:14px 16px; border-radius:var(--cse-radius-m); background:var(--cse-lin)}
.pack__specs > div{display:grid; gap:2px; align-content:start; min-width:0}
.pack__specs dt{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.pack__specs dd{margin:0; font:400 1rem/1.3 var(--cse-font-titre); font-variant-numeric:lining-nums}
.pack__achat{margin-top:auto; display:grid; gap:16px; padding-top:6px}
.pack__achat > *{margin:0}
.pack .cse-offer__price small{margin-left:4px; font:500 var(--cse-fs-label)/1 var(--cse-font-etiq); letter-spacing:.1em; color:var(--cse-text-muted)}
.pack__ctas{display:flex; flex-wrap:wrap; align-items:center; gap:var(--cse-gap-ctas); max-width:none}
.pack__ctas span{font-size:.9375rem; color:var(--cse-text-muted)}
.pack__ctas span a{display:inline-flex; align-items:center; min-height:var(--cse-tap-min); color:var(--cse-accent); font-weight:600; white-space:nowrap; font-variant-numeric:lining-nums}
@media (max-width: 560px){ .pack__specs{grid-template-columns:1fr} .pack__specs > div{grid-template-columns:96px minmax(0,1fr); align-items:baseline; gap:12px} .pack__ctas .cse-btn{flex:1 1 100%} .pack__ctas span{flex:1 1 100%; text-align:center} }
/* Sur mobile, le dessin devient un bandeau : le contenu du pack arrive tout de suite */
@media (max-width: 760px){ .pack__visuel{min-height:0; max-height:none; padding:20px} .pack__visuel svg{width:auto; height:128px; max-width:100%} }
@media (max-width: 560px){ .pack__list{grid-template-columns:1fr} .pack__list li:nth-child(even){padding-left:0; border-left:0} .pack__txt > .cse-btn{justify-self:stretch} }

/* ---- Filtres (repris de l'agenda Dégustations) ---- */
.filtres{display:flex; flex-wrap:wrap; gap:8px}
.filtres button{min-height:var(--cse-tap-min); padding:0 16px; border:1px solid var(--cse-btn-outline); border-radius:var(--cse-radius-pill); background:none; color:var(--cse-text); font:500 .875rem var(--cse-font-texte); cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.filtres button[aria-pressed="true"]{background:var(--cse-brun); border-color:var(--cse-brun); color:var(--cse-papier)}
.filtres button:focus-visible{outline:var(--cse-focus-ring); outline-offset:var(--cse-focus-offset)}

/* ---- Tableau des bières ---- */
.b-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px 32px; margin-bottom:22px}
.b-head h2{margin:0 0 10px}
.b-head__intro{max-width:56ch}
.bt{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.bt caption{caption-side:top; text-align:left; padding:14px 0; border-top:1px solid var(--cse-text)}
.bt thead th{padding:10px 12px; text-align:left; font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted); border-bottom:1px solid var(--cse-line)}
.bt thead th:first-child{padding-left:0}
.bt thead th:last-child, .bt td:last-child{text-align:right; padding-right:0}
.bt tbody th{padding:16px 12px 16px 0; text-align:left; font:400 1.25rem/1.25 var(--cse-font-titre)}
.bt tbody th .cse-tag{margin-left:10px; vertical-align:3px; background:var(--cse-lin); color:var(--cse-bordeaux)}
.bt td{padding:16px 12px; color:var(--cse-text-muted); border:0}
.bt tbody tr{border-bottom:1px solid var(--cse-line)}
.bt tbody tr[hidden]{display:none}
.bt td:last-child{font:400 1.25rem/1 var(--cse-font-titre); color:var(--cse-text); white-space:nowrap}
.bt tr.is-pack{background:linear-gradient(90deg, color-mix(in srgb, var(--cse-robe-or) 10%, transparent), transparent 60%)}
.bt__note{margin-top:18px; max-width:80ch; font-size:.875rem; color:var(--cse-text-muted)}
/* Survol d'une ligne (5 nov. 2026) : toute la ligne prend le fond lin, débordant de 12 px aux deux bouts pour
   ne pas coller au texte, et ses données passent en couleur de texte pleine. Souris seulement, tableau en colonnes. */
@media (hover: hover) and (min-width: 761px){
  .bt tbody :is(th, td){transition:background-color var(--cse-dur-fast) var(--cse-ease), box-shadow var(--cse-dur-fast) var(--cse-ease), color var(--cse-dur-fast) var(--cse-ease)}
  /* Fond posé sur les cellules ; l'ombre de 1 px à droite recouvre la jointure lissée entre deux cellules
     de largeur non entière (sinon un fin trait clair sépare les cellules). */
  .bt tbody tr:hover :is(th, td){background-color:var(--cse-lin); color:var(--cse-text); box-shadow:1px 0 0 var(--cse-lin)}
  .bt tbody tr:hover th{border-radius:var(--cse-radius-s) 0 0 var(--cse-radius-s); box-shadow:-12px 0 0 var(--cse-lin), 1px 0 0 var(--cse-lin)}
  .bt tbody tr:hover td:last-child{border-radius:0 var(--cse-radius-s) var(--cse-radius-s) 0; box-shadow:12px 0 0 var(--cse-lin)}
  .bt tbody tr:hover th .cse-tag{background:var(--cse-blanc)}
}
@media (max-width: 760px){
  .bt thead{display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .bt, .bt tbody, .bt caption{display:block}
  .bt tbody tr{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0; padding:14px 0}
  .bt tbody th{flex:1 1 0; min-width:0; padding:0 12px 0 0; font-size:1.1875rem}
  .bt tbody th .cse-tag{margin-left:8px; vertical-align:2px}
  .bt td{padding:0}
  .bt td:last-child{order:1; flex:none; padding:0}
  .bt td:not(:last-child){order:2; font:500 var(--cse-fs-label)/1.5 var(--cse-font-etiq); letter-spacing:.06em; text-transform:uppercase}
  .bt tbody tr::after{content:""; order:1; flex-basis:100%; height:0}
  .bt td:nth-child(2)::after, .bt td:nth-child(3)::after, .bt td:nth-child(4)::after{content:"·"; margin:0 8px; opacity:.6}
}

/* ---- Estimation ---- */
.calc{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.calc__txt{display:grid; gap:14px; justify-items:start}
.calc__txt h2{margin:6px 0 0}
.calc__box{display:grid; gap:20px; padding:clamp(20px, 3vw, 32px); border-radius:var(--cse-radius-m); background:var(--cse-blanc); border:1px solid rgba(42,27,23,.1); min-width:0}
.pas{display:grid; grid-template-columns:var(--cse-tap-min) minmax(0,1fr) var(--cse-tap-min); gap:8px; max-width:280px}
.pas .cse-input{text-align:center; font:400 1.375rem/1 var(--cse-font-titre); -moz-appearance:textfield}
.pas .cse-input::-webkit-inner-spin-button, .pas .cse-input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.pas__btn{min-height:var(--cse-tap-min); border:1px solid var(--cse-field-border); border-radius:var(--cse-radius-s); background:none; color:var(--cse-text); font:300 1.5rem/1 var(--cse-font-texte); cursor:pointer}
.pas__btn:hover{background:var(--cse-lin)}
.pas__btn:focus-visible{outline:var(--cse-focus-ring); outline-offset:2px}
.calc__type{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0; padding:0; border:0; min-width:0}
.calc__type legend{margin-bottom:8px; padding:0; font-size:var(--cse-fs-small); font-weight:500}
.calc__type label{position:relative; display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--cse-line); border-radius:var(--cse-radius-m); cursor:pointer; min-width:0}
.calc__type label:has(input:checked){border-color:var(--cse-bordeaux); box-shadow:inset 0 0 0 1px var(--cse-bordeaux)}
.calc__type input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--cse-bordeaux)}
.calc__type span{display:grid; gap:4px; font-size:.8125rem; color:var(--cse-text-muted); line-height:1.4; min-width:0}
.calc__type b{font:400 1.0625rem/1.2 var(--cse-font-titre); color:var(--cse-text)}
.calc__res{display:grid; gap:6px; padding:18px 20px; border-radius:var(--cse-radius-m); background:var(--cse-lin); border-left:3px solid var(--cse-robe-tuile)}
.calc__big{font:300 1.75rem/1.1 var(--cse-font-titre)}
.calc__big b{font-weight:300; font-size:2.75rem; color:var(--cse-bordeaux); margin-right:4px; font-variant-numeric:lining-nums}
.calc__res > #r-detail{font-size:.875rem; color:var(--cse-text-muted)}
#r-pack{font-weight:500}
/* Lien d'estimation : la flèche suit le texte quand il passe sur deux lignes */
#calc-go{display:block; min-height:var(--cse-tap-min); padding-block:14px; text-wrap:balance}
@media (max-width: 860px){ .calc{grid-template-columns:1fr} }
@media (max-width: 640px){ .calc__type{grid-template-columns:minmax(0,1fr)} .pas{max-width:none} }

/* ---- Déroulé (conditions comprises) ---- */
.futs-deroule{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.futs-deroule h2{margin:0}
.futs-deroule .cse-steps li{padding-top:18px; border-top:1px solid var(--cse-line)}
.etapes4{grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 32px}
.etapes4 li{align-content:start}
.futs-deroule .cse-steps p{font-size:var(--cse-fs-body)}  /* paragraphe : corps de texte de la charte (16 px) */
@media (max-width: 860px){ .futs-deroule{grid-template-columns:1fr} }
@media (max-width: 560px){ .etapes4{grid-template-columns:1fr} }

/* ---- Occasions ---- */
.occ{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.occ__txt h2{margin:0 0 22px}
.occ__list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 28px; border-top:1px solid var(--cse-line)}
.occ__list li{display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--cse-line); min-width:0}
.occ__list b{font:400 1.25rem/1.2 var(--cse-font-titre)}
.occ__list span{font-size:.9375rem; color:var(--cse-text-muted)}
.occ__side{display:grid; gap:24px}
.occ__quote{display:grid; gap:8px; padding-left:18px; border-left:2px solid var(--cse-bordeaux)}
.occ__quote p{font:italic 300 1.375rem/1.35 var(--cse-font-titre)}
.occ__plus{display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; align-items:center; padding:14px; border-radius:var(--cse-radius-m); background:var(--cse-papier)}
.occ__plus img{width:120px; height:120px; object-fit:cover; border-radius:var(--cse-radius-s)}
.occ__plus div{display:grid; gap:6px; justify-items:start}
.occ__plus strong{font:400 1.1875rem/1.2 var(--cse-font-titre)}
.occ__plus p{font-size:.875rem; color:var(--cse-text-muted)}
@media (max-width: 860px){ .occ{grid-template-columns:1fr} }
@media (max-width: 560px){ .occ__list{grid-template-columns:1fr} .occ__list li{gap:2px; padding:12px 0} .occ__side{gap:20px} .occ__quote p{font-size:1.1875rem} .occ__plus{grid-template-columns:72px minmax(0,1fr); gap:14px; padding:12px; align-items:start} .occ__plus img{width:72px; height:72px} }

/* ---- Demande de devis (section sombre, comme l'accueil) ---- */
.devis{color-scheme:dark}
.devis__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px, 5vw, 64px); align-items:start}
.devis__txt{display:grid; gap:20px}
.devis__txt h2{margin:0}
.devis .cse-lead{color:var(--cse-text-muted)}
.devis__avis{color:var(--cse-text-muted); margin-top:-6px}
.devis__avis b{font:400 1.25rem/1 var(--cse-font-titre); color:var(--cse-text); font-variant-numeric:lining-nums}
.devis__tel{display:grid; gap:4px; padding-left:18px; border-left:2px solid var(--cse-ambre)}
.devis__tel a{font:300 2rem/1.1 var(--cse-font-titre); color:var(--cse-text); text-decoration:none; font-variant-numeric:lining-nums}
.devis__tel a:hover{color:var(--cse-accent)}
.devis__heures{font-size:.875rem; color:var(--cse-text-muted)}
.devis__form{padding:clamp(20px, 3vw, 32px)}
.devis__form .cse-btn{justify-self:start}
.devis .cse-notice{background:var(--cse-lin)}
@media (max-width: 600px){ .devis .cse-stats{grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px} .devis .cse-stats dd{font-size:1.75rem} }
@media (max-width: 860px){ .devis__grid{grid-template-columns:1fr} .devis__form .cse-btn{justify-self:stretch} }

/* ---- Case à cocher (lettre, facultative) ---- */
.cse-check{display:flex; gap:10px; align-items:flex-start; font-size:.875rem; line-height:1.45; cursor:pointer}
.cse-check input{flex:none; width:20px; height:20px; margin:0; accent-color:var(--cse-accent)}
.cse-check span{color:var(--cse-text-muted)}

[data-theme="cave"] .cse-univers::before{box-shadow:0 0 0 1px rgba(239,228,214,.45)}

/* Finitions */
.etapes4 li::before, .bref__price{font-variant-numeric:lining-nums}
.occ__txt h2 em{display:block}
a[href^="tel:"]{white-space:nowrap}
/* Cibles de 44 px : liens fléchés, menu, téléphone du devis (comme cse-accueil.css et cse-wp.css du thème) */
.cse-link-arrow{display:inline-flex; align-items:center; min-height:var(--cse-tap-min)}
.cse-link-arrow::after{white-space:pre}
.cse-nav a{position:relative}
.cse-nav a::before{content:""; position:absolute; inset:50% 0 auto; height:var(--cse-tap-min); transform:translateY(-50%)}
.devis__tel a{display:inline-flex; align-items:center; min-height:var(--cse-tap-min)}
@media (max-width: 380px){ .bt tbody th .cse-tag{display:none} }
/* ---- Questions fréquentes (dans la section sombre) ---- */
.devis__faq{display:grid; gap:4px; margin-top:4px}
.devis__faq h3{margin:0}
.futs-faq .faq__list{border-top:1px solid var(--cse-line)}
.futs-faq details{border-bottom:1px solid var(--cse-line)}
.futs-faq summary{display:flex; justify-content:space-between; align-items:center; gap:18px; min-height:var(--cse-tap-min); padding:18px 0; cursor:pointer; list-style:none; font:400 1.125rem/1.3 var(--cse-font-titre)}
.futs-faq summary::-webkit-details-marker{display:none}
.futs-faq summary::after{content:"+"; flex:none; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--cse-btn-outline); border-radius:50%; font:300 1.25rem/1 var(--cse-font-texte); color:var(--cse-accent)}
.futs-faq details[open] summary::after{content:"–"}
.futs-faq details > :not(summary){padding-right:48px; margin:0}
.futs-faq details > :last-child:not(summary){padding-bottom:20px}
.futs-faq details p{color:var(--cse-text-muted)}

/* ---- Confirmation de la demande (après envoi) ---- */
.devis__ok{padding:clamp(20px, 3vw, 32px)}
.devis__ok[hidden], .devis__form[hidden]{display:none}
.devis__recap{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; border-top:1px solid var(--cse-line)}
.devis__recap > div{display:grid; gap:2px; padding:10px 0; border-bottom:1px solid var(--cse-line)}
.devis__recap dt{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.devis__recap dd{margin:0}
.devis__ok-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px}
.devis__pre{font-size:.8125rem; color:var(--cse-text-muted)}
.devis__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.devis__echec{margin:0}

/* ---- Raccords blocs WordPress ---- */
.p-head-band + .cse-section, .cse-section :where(.pack__txt, .calc__txt, .devis__txt, .occ__side, .occ__plus) > *{margin-block:0}
.cse-section :where(.occ__list, .futs-deroule .cse-steps){list-style:none; margin:0; padding:0}
.occ__quote blockquote{margin:0; padding:0; border:0}
.occ__quote p{margin:0}
.occ__plus .wp-block-image{margin:0}
.occ__plus-t strong{font:400 1.1875rem/1.2 var(--cse-font-titre)}
.devis__tel-n{margin:0}
.pack__visuel{margin:0}
.cse-section :where(.b-head, .b-head > div) > *{margin-block:0}
.b-head h2{margin:0 0 10px}
.bt__note{margin-block:18px 0}

/* Montserrat, plus large : les listes déroulantes du devis ne doivent pas élargir la grille sur mobile. */
.devis__grid > *{min-width:0}
.devis__form .cse-input{min-width:0; max-width:100%}