/* ── Château La Calisse — boutique ──
   Charte graphique du site du domaine, www.chateau-la-calisse.fr (référence : son /styleguide, section « Boutique »).
   Bootstrap 3 reste chargé pour la grille et les composants du thème d'origine ;
   ce fichier remplace son apparence.

   Organisation :
   1. CHARTE COMMUNE — copie du design system du site du domaine
   2. ADAPTATIONS DU THÈME (Bootstrap, classes Vinosoft)
   3. COMPOSANTS DE LA BOUTIQUE */


/* ════════════════════════════════════════════════════════════════════════════
   1. CHARTE COMMUNE — copie du design system du site du domaine (src/index.css de son dépôt)
   Ne rien modifier ici directement : la charte se modifie sur le site, puis est recopiée ici.
   Différences volontaires : chemins des polices (asset_url), pas de reset ni de .container.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Polices (licence SIL OFL) ── */
@font-face {
  font-family: 'Nyght Serif';
  src: url("/theme-assets/NyghtSerif-Light-7eddff43b0a60bad61fdf2e39b2c2162.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nyght Serif';
  src: url("/theme-assets/NyghtSerif-Regular-7424c1d63c50364fb0cc3acdf8596e2e.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url("/theme-assets/WorkSans-Variable-latin-4890688e64367257c794ab3ad38ce580.woff2") format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ── Jetons ── */
:root {
  --clr-bg:           #EDE8DF;
  --clr-bg-light:     #F5F1EB;
  --clr-white:        #FFFFFF;
  --clr-navy:         #0C1020;
  --clr-bordeaux:     #9A0C07;
  --clr-gold:         #B09060;
  --clr-gold-light:   #D4B882;
  --clr-text:         #1A1614;
  --clr-text-muted:   #6B655D;
  --clr-border:       #D8D2C8;
  --clr-text-body:    #4A4A4A;
  --clr-black:        #0A0A0A;
  --clr-disabled:      #E4E4E4;
  --clr-disabled-text: #8C8C8C;

  --font-heading: 'Nyght Serif', Georgia, serif;
  --font-body:    'Work Sans', system-ui, sans-serif;

  --fs-display: 42px;
  --fs-h2:      clamp(26px, 3vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-h5:      15px;
  --fs-lead:    clamp(16px, 1.5vw, 18px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-label:   11px;

  --text-display: 400 var(--fs-display)/1.2  var(--font-heading);
  --text-h2:      400 var(--fs-h2)/1.2       var(--font-heading);
  --text-h3:      400 var(--fs-h3)/1.25      var(--font-heading);
  --text-h4:      400 var(--fs-h4)/1.3       var(--font-heading);
  --text-h5:      400 var(--fs-h5)/1.3       var(--font-heading);
  --text-lead:    300 var(--fs-lead)/1.7     var(--font-body);
  --text-body:    400 var(--fs-body)/1.75    var(--font-body);
  --text-small:   400 var(--fs-small)/1.6    var(--font-body);
  --text-caption: 400 var(--fs-caption)/1.6  var(--font-body);
  --text-eyebrow: 400 var(--fs-label)/1.6    var(--font-body);
  --text-label:   500 var(--fs-label)/1.6    var(--font-body);
  --text-caps:    500 var(--fs-caption)/1.4  var(--font-body);

  --ls-caps:    0.1em;
  --ls-eyebrow: 0.22em;
}
@media (max-width: 900px) { :root { --fs-display: 34px; } }
@media (max-width: 640px) { :root { --fs-display: 28px; } }

/* ── Contour de focus : aucun au clic, doré au clavier (navigation avec Tab) ── */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; }

/* ── Boutons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 32px;
  border: 1px solid transparent;
  border-radius: 999px; /* boutons en pilule */
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, filter 0.2s;
}
.btn--sm    { padding: 9px 22px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-white);
}
.btn--primary:hover {
  background: transparent;
  color: var(--clr-text);
}

.btn--accent {
  background: var(--clr-bordeaux);
  border-color: var(--clr-bordeaux);
  color: var(--clr-white);
}
.btn--accent:hover { filter: brightness(0.85); }

.btn--outline {
  background: transparent;
  border-color: var(--clr-border);
  color: var(--clr-text);
}
.btn--outline:hover {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-white);
}

.btn--light {
  background: transparent;
  border-color: var(--clr-gold-light);
  color: var(--clr-gold-light);
}
.btn--light:hover {
  background: var(--clr-gold-light);
  color: var(--clr-navy);
}

/* Bouton inactif : gris, quelle que soit la variante.
   aria-disabled="true" plutôt que disabled quand le clic doit encore expliquer pourquoi (popin). */
.btn:disabled, .btn:disabled:hover,
.btn[aria-disabled='true'], .btn[aria-disabled='true']:hover {
  background: var(--clr-disabled);
  border-color: var(--clr-disabled);
  color: var(--clr-disabled-text);
  filter: none;
  cursor: not-allowed;
}

/* ── Styles de texte ── */
.t-display { font: var(--text-display); }
.t-h2      { font: var(--text-h2); }
.t-h3      { font: var(--text-h3); }
.t-h4      { font: var(--text-h4); }
.t-h5      { font: var(--text-h5); }
.t-lead    { font: var(--text-lead); }
.t-body    { font: var(--text-body); }
.t-small   { font: var(--text-small); }
.t-caption { font: var(--text-caption); }
.t-label   { font: var(--text-label);   letter-spacing: var(--ls-caps);   text-transform: uppercase; }
.t-caps    { font: var(--text-caps);    letter-spacing: var(--ls-caps);   text-transform: uppercase; }

/* ── Sur-titre ── */
.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.7); }

/* ── Lien d'appel à l'action « … → » ── */
.link-cta {
  display: inline-block;
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-bordeaux);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.link-cta:hover { opacity: 0.65; }

/* ── Texte lu uniquement par les lecteurs d'écran ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Lien souligné ── */
.text-link {
  color: var(--clr-text);
  text-decoration: underline;
  text-decoration-color: var(--clr-gold);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.text-link:hover {
  color: var(--clr-bordeaux);
  text-decoration-color: var(--clr-bordeaux);
}
button.text-link {
  padding: 0;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. ADAPTATIONS DU THÈME — Bootstrap 3 et classes du thème Vinosoft d'origine
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base (remplace la typo et les couleurs de Bootstrap) ── */
body {
  font: var(--text-body);
  color: var(--clr-text-body);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--clr-text);
}
h1, .h1 { font: var(--text-display); }
h2, .h2 { font: var(--text-h2); }
h3, .h3 { font: var(--text-h3); }
h4, .h4 { font: var(--text-h4); }
a { color: var(--clr-text); transition: color 0.2s; }
a:hover, a:focus { color: var(--clr-bordeaux); text-decoration: none; }
small, .small { font: var(--text-caption); }
.text-muted { color: var(--clr-text-muted); }
hr { border-top-color: var(--clr-border); }

/* Bootstrap met un contour bleu au focus de chaque lien et bouton : on garde la règle du site */
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible) { outline: none; }
a:focus-visible,
.btn:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; }

/* ── Boutons Bootstrap du thème alignés sur ceux du site ──
   .btn-primary = .btn--primary (noir) · .btn-default = .btn--outline */
.btn { box-shadow: none; }
.btn:active, .btn.active { box-shadow: none; }
.btn-primary {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-white);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus {
  background: transparent;
  border-color: var(--clr-text);
  color: var(--clr-text);
}
.btn-default {
  background: transparent;
  border-color: var(--clr-border);
  color: var(--clr-text);
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active:focus {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-white);
}
/* Le a:focus de la base ne doit pas changer la couleur des boutons-liens */
.btn--primary:focus { color: var(--clr-white); }
.btn--accent:focus, .btn--accent:hover { color: var(--clr-white); }
.btn--outline:focus { color: var(--clr-text); }
.btn--primary:hover { color: var(--clr-text); }
.link-cta:hover, .link-cta:focus { color: var(--clr-bordeaux); }
/* Le bouton inactif l'emporte sur les états de survol ci-dessus */
.btn[disabled], .btn[disabled]:focus,
.btn[aria-disabled='true']:focus {
  color: var(--clr-disabled-text);
  background: var(--clr-disabled);
  border-color: var(--clr-disabled);
  opacity: 1;
}

/* Liens soulignés dans les textes saisis dans Vinosoft (descriptions, pages) */
.product-description a,
.product-vintage-description a,
.page a {
  color: var(--clr-text);
  text-decoration: underline;
  text-decoration-color: var(--clr-gold);
  text-underline-offset: 3px;
}
.product-description a:hover,
.product-vintage-description a:hover,
.page a:hover {
  color: var(--clr-bordeaux);
  text-decoration-color: var(--clr-bordeaux);
}

/* ── Champs de formulaire (gabarit du champ de recherche du site) ── */
.form-control {
  height: 46px;
  padding: 0 16px;
  font: var(--text-small);
  color: var(--clr-text);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  box-shadow: none;
  transition: border-color 0.2s;
}
.form-control:hover { border-color: var(--clr-gold); }
.form-control:focus { border-color: var(--clr-gold); box-shadow: none; }
.form-control::placeholder { color: var(--clr-text-muted); }
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B655D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
label {
  font: var(--text-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}

/* ── Messages ── */
.alert {
  padding: 16px 20px;
  font: var(--text-small);
  color: var(--clr-text-body);
  background: var(--clr-bg-light);
  border: none;
  border-left: 2px solid var(--clr-gold);
  border-radius: 0;
}
.alert p { margin: 0; }
.alert-warning, .alert-danger { border-left-color: var(--clr-bordeaux); }
.alert-success { border-left-color: var(--clr-gold); }
.text-success { color: var(--clr-text); }



/* ════════════════════════════════════════════════════════════════════════════
   3. COMPOSANTS DE LA BOUTIQUE — documentés sur le /styleguide du site du domaine, section « Boutique »
   ════════════════════════════════════════════════════════════════════════════ */

/* Boutons d'achat (Ajouter, Ajouter au panier) : bordeaux au survol.
   « Procéder au paiement » est déjà bordeaux (.btn--accent) : il fonce au survol. */
.btn-to-cart:hover, .btn-to-cart:focus-visible,
#AddToCart:hover, #AddToCart:focus-visible {
  background: var(--clr-bordeaux);
  border-color: var(--clr-bordeaux);
  color: var(--clr-white);
}

/* Lien de retour avec picto flèche */
.link-back { display: inline-flex; align-items: center; gap: 8px; }
.link-back svg { flex: none; transition: transform 0.2s; }
.link-back:hover svg { transform: translateX(-3px); }

.cart-empty { margin: 24px 0 20px; font: var(--text-lead); color: var(--clr-text-body); }

/* ── Mise en page (grille du site : 1440px, marges 64px / 16px) ── */
.container {
  width: 100%;
  max-width: 1440px;
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
}
:root { --layout-margin: 64px; --header-h: 72px; }
@media (max-width: 900px) { :root { --layout-margin: 16px; --header-h: 60px; } }

/* ── Header (même gabarit que le site : 72px, 60px sous 900px) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--clr-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo · menu centré dans l'espace libre · sélecteur + panier */
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.site-header__inner::before,
.site-header__inner::after { display: none; } /* clearfix Bootstrap du .container */

/* Logo à gauche, vers l'accueil de la boutique */
.site-header__logo { flex-shrink: 0; justify-self: start; }

/* À droite : sélecteur de plateforme puis panier */
.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-header__logo img { display: block; height: 40px; width: auto; transition: opacity 0.2s; }
.site-header__logo:hover img { opacity: 0.75; }

/* Menu au centre */
.site-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.site-nav__link {
  position: relative;
  padding: 8px 0;
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--clr-text);
  transition: opacity 0.2s;
}
.site-nav__link:hover, .site-nav__link:focus { color: var(--clr-text); opacity: 0.6; }
.site-nav__link--active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
}

/* Sélecteur de plateforme (Le domaine | La boutique) : même composant que .sh-switch du site, garder les deux alignés */
/* Piste grise, segment actif en pastille noire, texte en gras ; noir et blanc, sans ombre */
.site-switch {
  flex-shrink: 0;
  display: inline-flex;
  padding: 2px;
  background: rgba(26, 22, 20, 0.07);
  border-radius: 999px;
  transition: background-color 0.2s;
}
.site-switch__opt {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  font: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--clr-text-muted);
  border-radius: 999px;
  transition: color 0.2s, background-color 0.2s;
}
.site-switch__opt:hover, .site-switch__opt:focus { color: var(--clr-text); text-decoration: none; }
.site-switch__opt--active,
.site-switch__opt--active:hover,
.site-switch__opt--active:focus { color: var(--clr-white); background: var(--clr-text); }
.site-switch__short { display: none; }

/* Panier : icône + pastille du nombre d'articles */
.site-header__cart {
  display: flex;
  align-items: center;
  gap: 10px; /* pastille à 2 chiffres comprise */
  height: 44px;
  color: var(--clr-text);
}
.site-header__cart-icon {
  position: relative;
  display: flex;
}
.site-header__cart-label {
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.site-header__cart:hover, .site-header__cart:focus { color: var(--clr-text); opacity: 0.6; }
.site-header__cart-count {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--text-label);
  line-height: 1;
  color: var(--clr-white);
  background: var(--clr-bordeaux);
  border-radius: 9px;
}
.site-header__cart-count[hidden] { display: none; }
.site-header__cart--bump .site-header__cart-count { animation: cart-bump 0.4s ease; }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__cart--bump .site-header__cart-count { animation: none; }
}

/* Écrans moyens : logo + sélecteur + menu ne tiennent plus sur une ligne → menu sur une 2e ligne
   (réglages mobiles affinés sous 900px) */
@media (max-width: 1240px) {
  :root { --header-h: 116px; }
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 72px 44px;
    row-gap: 0;
  }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    padding: 0 var(--layout-margin);
    margin: 0 calc(-1 * var(--layout-margin));
    border-top: 1px solid var(--clr-border);
  }
}

/* Bandeau livraison : pleine largeur, collé sous le header */
.shop-livraison {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  padding: 10px var(--layout-margin);
  text-align: center;
  background: var(--clr-black);
}
.shop-livraison__icon { flex: none; color: var(--clr-gold-light); }
.shop-livraison__title {
  margin: 0;
  font: var(--text-small);
  font-weight: 500;
  color: var(--clr-white);
}
.shop-livraison__note {
  margin: 0;
  font: var(--text-caption);
  color: rgba(255, 255, 255, 0.7);
}
.shop-livraison__note::before { content: '·'; margin-right: 14px; }
.shop-livraison__court { display: none; }
.shop-livraison__note .text-link { color: rgba(255, 255, 255, 0.7); text-decoration-color: var(--clr-gold-light); }
.shop-livraison__note .text-link:hover { color: var(--clr-white); text-decoration-color: var(--clr-white); }

/* Pastilles : même style que les filtres du site (Nous trouver) */
.shop-chip {
  padding: 6px 16px;
  font: var(--text-caption);
  color: var(--clr-text-muted);
  background: transparent;
  border: 1px solid var(--clr-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.shop-chip:hover,
.shop-chip--active {
  color: var(--clr-white);
  background: var(--clr-text);
  border-color: var(--clr-text);
}


/* ── Accueil : collections en cards (comme la page Nos vins du site) ── */

.shop-collection { padding-top: 40px; } /* titre de section à 40px du bandeau livraison */
.shop-collection[hidden] { display: none; }
.shop-collection__title {
  margin: 0 0 40px;
  font: var(--text-h2);
  color: var(--clr-text);
}

.shop-collection__note {
  max-width: 720px;
  margin: -24px 0 40px;
  font: var(--text-small);
  color: var(--clr-text-body);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
}

/* Sous-grille : visuel, sur-titre, nom, détail et achat alignés d'une card à l'autre */
.shop-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-bottom: 56px;
}

/* Cadre de hauteur fixe : la bouteille est contenue dedans */
.shop-card__visuel {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 24px;
  background: var(--clr-bg-light);
  overflow: hidden;
}
.shop-card__visuel img {
  position: absolute;
  inset: 10% 0;
  width: 100%;
  height: 80%;
  object-fit: contain;
  mix-blend-mode: multiply; /* le fond blanc des photos se fond dans le cadre */
  transition: transform 0.6s ease;
}
.shop-card:hover .shop-card__visuel img { transform: scale(1.03); }
.shop-card__visuel-link { position: absolute; inset: 0; }

/* « Voir le détail » au survol de la photo (écrans avec souris) */
.shop-card__voir {
  position: absolute;
  left: 50%;
  bottom: 24px;
  padding: 10px 20px;
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--clr-text);
  background: var(--clr-white);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
@media (hover: hover) {
  .shop-card__visuel:hover .shop-card__voir { opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none) { .shop-card__voir { display: none; } }

/* « Plus de détails » : mobile seulement (voir plus bas) */
.shop-card__more { display: none; }

.shop-card__eyebrow { margin: 0 0 6px; }
.shop-card__nom { margin: 0; font: var(--text-h3); }
.shop-card__nom a { color: var(--clr-text); }
.shop-card__nom a:hover { color: var(--clr-bordeaux); }
.shop-card__detail {
  margin: 8px 0 20px;
  font: var(--text-small);
  color: var(--clr-text-body);
}
.shop-card__format {
  display: block;
  font: var(--text-caption);
  color: var(--clr-text-muted);
}

.shop-card__achat {
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--clr-border);
}
.shop-card__prix {
  font: var(--text-h4);
  color: var(--clr-text);
  white-space: nowrap;
}
.shop-card--added .btn-to-cart,
.shop-card--added .btn-to-cart:hover {
  background: var(--clr-text);
  border-color: var(--clr-text);
  color: var(--clr-white);
}

/* ── Fiche vin (inspirée des fiches Minuty) ── */
.vin-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--header-h) - 42px); /* header + bandeau livraison */
  background: var(--clr-bg-light);
}
.vin-hero__retour {
  position: absolute;
  z-index: 1;
  top: 32px;
  /* aligné sur le contenu du header (.container : 1440px max, centré) */
  left: max(var(--layout-margin), calc((100% - 1440px) / 2 + var(--layout-margin)));
}

.vin-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px var(--layout-margin);
  text-align: center;
}
.vin-hero__panel > * { width: 100%; max-width: 420px; }
.vin-hero__eyebrow { margin: 0 0 12px; }
.vin-hero__nom {
  margin: 0;
  font: var(--text-h2);
  color: var(--clr-text);
  text-wrap: balance;
}

.vin-hero__visuel {
  position: relative;
  min-height: 480px;
}
.vin-hero__visuel img {
  position: absolute;
  inset: 12% 8%;
  width: 84%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: multiply; /* fond blanc des photos Vinosoft fondu dans le fond beige */
}

.vin-hero__prix {
  margin: 24px 0 0;
  font: var(--text-h3);
  color: var(--clr-text);
}
.vin-hero__format { font: var(--text-small); color: var(--clr-text-muted); }
#ComparePrice { font: var(--text-small); color: var(--clr-text-muted); text-decoration: line-through; }

.vin-hero__millesimes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
a.shop-chip { text-decoration: none; }
a.shop-chip:hover, a.shop-chip:focus { color: var(--clr-white); }
.shop-chip--active { cursor: default; }
.shop-chip--off { text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
.shop-chip--off:hover { color: var(--clr-text-muted); background: transparent; border-color: var(--clr-border); }

.vin-hero__achat {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
}
.vin-hero__achat .input-group { width: 140px; flex: none; }
.vin-hero__achat #AddToCart { flex: 1; }
.vin-hero__confirmation {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 46px;
  font: var(--text-small);
  color: var(--clr-text);
}

/* Sélecteur de quantité : − [ 6 ] + dans une même pilule */
.input-group {
  display: flex;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-white);
  overflow: hidden;
}
.input-group .input-group-btn { width: auto; display: block; }
.input-group .form-control {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  text-align: center;
  border: none;
  border-radius: 0;
  -moz-appearance: textfield;
}
.input-group .form-control::-webkit-inner-spin-button,
.input-group .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-button,
.qty-button:focus {
  width: 44px;
  height: 44px;
  padding: 0;
  font: var(--text-body);
  color: var(--clr-text);
  background: transparent;
  border: none;
  border-radius: 0 !important;
}
.qty-button:hover, .qty-button:active, .qty-button:active:focus {
  color: var(--clr-text);
  background: var(--clr-bg-light);
  border: none;
}

/* Onglets d'informations */
.vin-tabs { margin-top: 32px; }
.vin-tabs__list {
  display: flex;
  justify-content: center;
  gap: 24px;
  border-bottom: 1px solid var(--clr-border);
}
.vin-tabs__tab {
  margin-bottom: -1px;
  padding: 0 0 10px;
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.vin-tabs__tab:hover { color: var(--clr-text); }
.vin-tabs__tab[aria-selected='true'] { color: var(--clr-text); border-bottom-color: var(--clr-text); }
.vin-tabs__panel {
  min-height: 72px;
  padding-top: 16px;
  font: var(--text-small);
  color: var(--clr-text-body);
}
.vin-tabs__panel p { margin: 0 0 4px; }
.vin-tabs__panel strong { font-weight: 500; color: var(--clr-text); }

.legal-note {
  margin: 24px 0 0;
  font: var(--text-caption);
  color: var(--clr-text-muted);
}

/* Notes de dégustation + fiche technique */
.vin-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 96px;
  padding-top: 96px;
  padding-bottom: 32px;
}
.vin-details::before, .vin-details::after { display: none; }
.vin-details__titre,
.vin-details__fiche dt {
  margin: 0 0 12px;
  font: var(--text-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text);
}
.vin-details__notes {
  font: var(--text-lead);
  color: var(--clr-text-body);
}
.vin-details__notes p { margin: 0 0 16px; }
.vin-details__description { margin-top: 24px; font: var(--text-body); }

.vin-details__fiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin: 0;
}
.vin-details__fiche dt { margin-bottom: 4px; }
.vin-details__fiche dd {
  margin: 0;
  font: var(--text-small);
  color: var(--clr-text-body);
}

/* Vous aimerez aussi */
.vin-related { padding-top: 96px; }
.vin-related::before, .vin-related::after { display: none; }
.vin-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.vin-related__titre { margin: 0; font: var(--text-h2); color: var(--clr-text); }

/* Fil d'Ariane */
.vin-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  border-top: 1px solid var(--clr-border);
}
.vin-breadcrumb::before, .vin-breadcrumb::after { display: none; } /* clearfix Bootstrap du .container */
.vin-breadcrumb a { color: var(--clr-text); }
.vin-breadcrumb a:hover { color: var(--clr-bordeaux); }
.vin-breadcrumb + .footer { margin-top: 0; }

/* ── Panier ── */
/* Titre des pages panier, recherche… : à 40px du header, comme les autres pages */
.container > h2:first-child,
#search { margin-top: 40px; }
/* Règle des 6 bouteilles, sous le titre */
.cart-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
}
.cart-rule__icon { flex: none; margin-top: 1px; color: var(--clr-bordeaux); }

/* Popin « Il manque X bouteilles » */
.cart-dialog {
  width: calc(100% - 32px);
  max-width: 460px;
  padding: 40px 32px 32px;
  text-align: center;
  color: var(--clr-text-body);
  background: var(--clr-white);
  border: 0;
  box-shadow: 0 16px 48px rgba(10, 10, 10, 0.2);
}
.cart-dialog::backdrop { background: rgba(10, 10, 10, 0.45); }
.cart-dialog__icon { color: var(--clr-bordeaux); margin-bottom: 16px; }
.cart-dialog__title { margin: 0 0 12px; font: var(--text-h3); color: var(--clr-text); }
.cart-dialog__text { margin: 0 0 28px; font: var(--text-small); }
.cart-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.cart-dialog__actions .btn { flex: 1 1 100%; }
.btn--primary:focus { color: var(--clr-white); }
.btn--primary:hover { color: var(--clr-text); }

form.cart { margin-top: 32px; }
form.cart .table { background: transparent; }
form.cart .table > tbody > tr > td {
  padding: 20px 12px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid var(--clr-border);
}
form.cart .table-bordered,
form.cart .table-bordered > thead > tr > th,
form.cart .table-bordered > tbody > tr > td { border-left: none; border-right: none; border-top: none; }
form.cart .table-bordered > thead > th,
form.cart thead th {
  padding: 0 12px 12px;
  font: var(--text-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
  border-bottom: 1px solid var(--clr-text);
}
form.cart .table-bordered { border: none; }
form.cart .h4 { font: var(--text-h4); color: var(--clr-text); }
form.cart .h4:hover { color: var(--clr-bordeaux); }
form.cart span.h3 { font: var(--text-body); color: var(--clr-text); }
form.cart .cart__image img { max-height: 80px; width: auto; margin: 0 auto; }
form.cart small { color: var(--clr-text-muted); }
/* Colonne de suppression */
form.cart .cart__remove-col { width: 56px; padding-left: 0; padding-right: 0; text-align: right; }
.cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--clr-text-muted);
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.cart__remove:hover, .cart__remove:focus-visible { color: var(--clr-bordeaux); background: var(--clr-bg-light); }
.cart-qty { width: 132px; margin-left: auto; }
.cart-page { transition: opacity 0.2s; }
.cart-page--loading { opacity: 0.6; pointer-events: none; }

.cart__subtotal-title {
  margin-right: 16px;
  font: var(--text-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
form.cart span.h3.cart__subtotal { font: var(--text-h3); }
form.cart .text-muted { font: var(--text-small); }
form.cart .text-muted em, form.cart .text-muted strong { font-style: normal; font-weight: 400; }
form.cart .alert { text-align: left; }
form.cart .retour {
  font: var(--text-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--clr-bordeaux);
}
form.cart .retour:hover { color: var(--clr-bordeaux); opacity: 0.65; }
.cart__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* ── Pages, recherche ── */
.page h1.page-title { margin-bottom: 24px; }
.results { padding: 16px 0; }
.search-result h3 a { color: var(--clr-text); }
.highlight { font-weight: 500; color: var(--clr-text); }
.search.form-inline { display: flex; gap: 12px; }
.search.form-inline .form-control { flex: 1; }

ul.no-bullets { list-style: none outside; margin-left: 0; padding: 0; }
.visually-hidden { display: none; }

/* ── Pied de page ── */
.footer {
  margin-top: 96px;
  padding: 64px 0;
  font: var(--text-small);
  color: rgba(255, 255, 255, 0.7);
  background: var(--clr-black);
}
.footer h3 {
  margin: 0 0 16px;
  font: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.footer a { color: var(--clr-white); }
.footer a:hover { color: var(--clr-gold-light); }

/* ── Écrans moyens et mobile ── */
@media (max-width: 640px) {
  /* Cards : sans cépages / description sous le titre */
  .shop-card { grid-row: span 5; }
  .shop-card__detail { display: none; }
  .shop-card__more { display: inline-block; justify-self: start; margin: 8px 0 16px; }

  /* Fiche vin : « Vous aimerez aussi » en slider horizontal (glisser au doigt) */
  .vin-related .shop-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    column-gap: 16px;
    margin: 0 calc(-1 * var(--layout-margin));
    padding: 0 var(--layout-margin);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--layout-margin);
    scrollbar-width: none;
  }
  .vin-related .shop-grid::-webkit-scrollbar { display: none; }
  .vin-related .shop-card { scroll-snap-align: start; }

  /* Panier : une ligne par vin, photo à gauche, quantité et total en dessous */
  form.cart thead { display: none; }
  form.cart table, form.cart tbody { display: block; }
  form.cart tr.cart__row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "img info remove" "img price price" "img qty total";
    gap: 8px 16px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--clr-border);
  }
  form.cart .table > tbody > tr > td { display: block; padding: 0; border: 0; text-align: left; }
  form.cart td:nth-child(1) { grid-area: img; align-self: start; }
  form.cart td:nth-child(2) { grid-area: info; }
  form.cart td:nth-child(3) { grid-area: price; }
  form.cart td:nth-child(3) span.h3 { font: var(--text-caption); color: var(--clr-text-muted); }
  form.cart td:nth-child(4) { grid-area: qty; }
  form.cart td:nth-child(5) { grid-area: total; }
  form.cart td:nth-child(6) { grid-area: remove; align-self: start; justify-self: end; width: auto; margin: -8px -10px 0 0; }
  form.cart .cart-qty { margin-left: 0; }
  form.cart .cart__image img { max-height: 72px; }
  form.cart .h4 { font: var(--text-h5); font-size: var(--fs-body); }

  /* Lien de retour plus compact pour laisser la place au logo centré */
}
@media (max-width: 1100px) {
  .shop-collection__note {
  max-width: 720px;
  margin: -24px 0 40px;
  font: var(--text-small);
  color: var(--clr-text-body);
}

.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}

@media (max-width: 900px) {
  .site-header__logo img { height: 32px; }
  .site-header__inner { gap: 8px; }
  /* Menu sur une seconde ligne du header */
  :root { --header-h: 104px; }
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: 60px 44px;
    row-gap: 0;
  }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-between;
    gap: 8px;
    padding: 0 var(--layout-margin);
    border-top: 1px solid var(--clr-border);
    margin: 0 calc(-1 * var(--layout-margin));
    align-items: center;
    overflow-x: auto; /* 5 entrées : défilement latéral sur les petits écrans */
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__link { flex: none; font: var(--text-label); letter-spacing: 0.06em; }
  .site-nav__link { padding: 12px 0; }
  /* Logo, sélecteur et panier sur la 1re ligne : libellé « Panier » masqué (gardé pour les lecteurs d'écran) */
  .site-header__cart-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  .shop-livraison { flex-direction: column; gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .shop-livraison__long { display: none; }
  .shop-livraison__court { display: inline; }
  .shop-livraison__icon { display: none; }
  .shop-livraison__note::before { display: none; }
  .shop-collection { padding-top: 40px; }
  .shop-collection__note {
  max-width: 720px;
  margin: -24px 0 40px;
  font: var(--text-small);
  color: var(--clr-text-body);
}

.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .shop-card { padding-bottom: 40px; }
  .shop-card__nom { font: var(--text-h4); }
  .shop-card__achat { flex-wrap: wrap; gap: 12px; }
  .shop-card__form, .shop-card__achat .btn { width: 100%; }

  .vin-hero { grid-template-columns: 1fr; min-height: 0; }
  .vin-hero__panel { padding: 0 var(--layout-margin) 48px; }
  .vin-hero__visuel { min-height: 300px; }
  .vin-hero__retour { position: static; margin: 24px var(--layout-margin) 0; justify-self: start; }
  .vin-hero__achat .input-group { width: 120px; }
  .vin-hero__achat #AddToCart { padding-left: 16px; padding-right: 16px; }
  .vin-details { grid-template-columns: 1fr; padding-top: 56px; }
  .vin-related { padding-top: 56px; }
  .vin-related__head { flex-direction: column; gap: 8px; }

  /* Paiement en pleine largeur, « Retour à la liste » centré dessous */
  .cart__actions { flex-direction: column-reverse; align-items: stretch; gap: 20px; }
  .cart__actions .btn { width: 100%; }
  form.cart .retour { margin: 0; text-align: center; }
}

/* Petits écrans, comme le site : logo entier, sélecteur resserré avec libellés courts ;
   monogramme « C » (début du logo, recadré) seulement sous 360px */
@media (max-width: 640px) {
  .site-header__actions { gap: 14px; }
  .site-header__logo img { height: 26px; }
  .site-switch__opt { padding: 0 8px; letter-spacing: 0.04em; }
  .site-switch__long { display: none; }
  .site-switch__short { display: inline; }
}
@media (max-width: 359px) {
  .site-header__logo img { width: 23px; height: 36px; object-fit: cover; object-position: left; }
}