/* ════════════════════════════════════════════════════════
   portail.css — Styles complets portail Signature
   Le Cathédral · chargé en async
   ════════════════════════════════════════════════════════ */

/* ── Onglet Carte ─────────────────────────────────────── */
.menu-intro {
  padding: 32px 20px 24px;
  text-align: center;
}

.menu-intro-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
}

.menu-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  gap: 8px;
}

.menu-divider-line {
  width: 48px;
  height: 1px;
  background: var(--secondary-2);
  opacity: 0.5;
}

/* ── Catégorie ────────────────────────────────────────── */
.category-section {
  padding: 0 0 48px;
}

.category-header {
  text-align: center;
  padding: 32px 20px 20px;
}

.category-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.category-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0;
}

.category-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary-2), transparent);
  margin: 10px auto 0;
}

/* ── Card plat ────────────────────────────────────────── */
.plat-card {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.plat-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.plat-card.unavailable {
  opacity: 0.5;
}

.plat-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
/* Vignette cliquable (avec lightbox) */
.plat-thumb[data-lb-src] {
  cursor: zoom-in;
}
.plat-thumb[data-lb-src]:hover,
.plat-thumb[data-lb-src]:focus-visible {
  opacity: 0.88;
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.plat-thumb-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--secondary-2);
}

.plat-info {
  flex: 1;
  min-width: 0;
}

.plat-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.plat-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.plat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Allergènes */
.allergenes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.allergen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Work Sans', sans-serif;
  cursor: help;
  position: relative;
  color: #fff;
  flex-shrink: 0;
}

.allergen-badge::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--bg);
  font-size: 10px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.allergen-badge:hover::after,
.allergen-badge.show-tooltip::after {
  opacity: 1;
}

/* Prix */
.plat-price {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  border: 1px solid var(--secondary);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badge indisponible */
.badge-unavailable {
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--cta);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  transform: rotate(-8deg);
  transform-origin: center;
  flex-shrink: 0;
}

/* ── CTA avis sticky (onglet carte) ───────────────────── */
#carte-avis-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 80;
  display: none;
  padding: 12px 20px 20px;
  background: #2D2620;
  border-top: 1px solid var(--secondary);
  box-shadow: 0 -4px 16px rgba(26, 20, 16, 0.15);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#carte-avis-cta.show {
  display: flex;
}

.cta-avis-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--bg);
  flex: 1;
}

.cta-avis-btn {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: var(--secondary-2);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}

.cta-avis-btn:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* ── Onglet Galerie ───────────────────────────────────── */
.gallery-header {
  padding: 32px 20px 8px;
  text-align: center;
}

.gallery-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}

.gallery-invite {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

/* Bloc upload */
.upload-zone {
  margin: 20px 16px;
  border: 2px dashed var(--secondary-2);
  border-radius: 12px;
  background: rgba(201, 168, 106, 0.05);
  padding: 24px 20px;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.25s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.25s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  min-height: 48px;
}

.upload-zone:hover,
.upload-zone:focus-within {
  background: rgba(201, 168, 106, 0.1);
  border-color: var(--secondary);
}

.upload-zone.uploading {
  opacity: 0.5;
  pointer-events: none;
}

.upload-camera-icon {
  color: var(--secondary-2);
  margin: 0 auto 12px;
}

.upload-btn-text {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 4px;
}

.upload-sub-text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}

.upload-spinner {
  display: none;
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--secondary-2);
  border-radius: 50%;
  margin: 0 auto 8px;
  animation: spin 0.8s linear infinite;
}

.upload-zone.uploading .upload-spinner { display: block; }
.upload-zone.uploading .upload-camera-icon { display: none; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Toast */
#upload-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--primary);
  color: var(--bg);
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 300;
  max-width: calc(100% - 32px);
  text-align: center;
}

#upload-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Galerie polaroid */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 16px 120px;
}

@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.polaroid-item {
  background: var(--surface);
  padding: 8px 8px 28px;
  box-shadow: 0 4px 12px rgba(26, 20, 16, 0.12);
  cursor: pointer;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.polaroid-item:hover {
  transform: rotate(0deg) scale(1.03) !important;
}

.polaroid-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.polaroid-badge-heart {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--cta);
}

.gallery-load-more {
  display: block;
  width: calc(100% - 32px);
  margin: 8px 16px 32px;
  padding: 14px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--secondary);
  border: 1.5px solid var(--secondary);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.gallery-load-more:hover {
  background: var(--secondary);
  color: var(--bg);
}

/* ── Onglet Avis ──────────────────────────────────────── */
.avis-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px 120px;
  text-align: center;
  min-height: 60vh;
  justify-content: center;
}

.avis-star-container {
  position: relative;
  margin-bottom: 28px;
}

.avis-star-big {
  color: var(--secondary-2);
  filter: drop-shadow(0 0 12px rgba(201, 168, 106, 0.4));
  animation:
    starAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    starBreathe 3s ease-in-out 1s infinite;
}

@keyframes starAppear {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes starBreathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.avis-stars-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.avis-star-small {
  color: var(--secondary-2);
  opacity: 0;
  animation: starSmallIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes starSmallIn {
  from { opacity: 0; transform: scale(0.5) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.avis-text-main {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: var(--primary);
  line-height: 1.4;
  max-width: 320px;
  margin-bottom: 12px;
}

.avis-text-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 36px;
}

/* Bouton avis Google — le clou du spectacle */
.avis-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-2) 100%);
  /* Bordure double effet médaille */
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border: 2px solid var(--bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(139, 107, 61, 0.4);
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--bg);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s cubic-bezier(0.65, 0, 0.35, 1);
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
}

.avis-google-btn:hover,
.avis-google-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139, 107, 61, 0.5);
  outline: none;
}

.avis-google-btn:active {
  animation: btnPulse 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btnPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Page merci overlay ───────────────────────────────── */
#merci-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

#merci-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.merci-rosace {
  width: 140px;
  height: 140px;
  margin-bottom: 28px;
  color: var(--secondary-2);
}

.merci-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: 0.1em;
  color: var(--secondary-2);
  line-height: 1;
  margin-bottom: 12px;
}

.merci-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--bg);
  margin-bottom: 32px;
}

.merci-countdown {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.merci-countdown span {
  color: var(--secondary-2);
  font-weight: 600;
}

.merci-fallback {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: rgba(244, 237, 224, 0.5);
  text-decoration: underline;
  display: none;
  cursor: pointer;
  min-height: 44px;
  padding: 10px;
  -webkit-tap-highlight-color: transparent;
}

.merci-fallback.show { display: inline-block; }

.merci-footer {
  position: absolute;
  bottom: 32px;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(107, 93, 79, 0.5);
  text-transform: lowercase;
}

/* ── Popup langue (header) ────────────────────────────── */
#lang-popup {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 20, 16, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

#lang-popup.show {
  opacity: 1;
  pointer-events: auto;
}

.lang-popup-card {
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--secondary-2);
  padding: 24px 24px 28px;
  width: calc(100% - 48px);
  max-width: 320px;
  box-shadow: 0 16px 48px rgba(26, 20, 16, 0.3);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

#lang-popup.show .lang-popup-card {
  transform: scale(1) translateY(0);
}

.lang-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.lang-popup-close:hover {
  border-color: var(--secondary);
  color: var(--primary);
}

.lang-popup-title-block {
  text-align: center;
  margin-bottom: 16px;
}

.lang-popup-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--primary);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.8;
  display: block;
}

.lang-popup-ornement {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.lang-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lang-popup-flag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-alt);
  cursor: pointer;
  transition:
    border-color 0.2s cubic-bezier(0.65, 0, 0.35, 1),
    background 0.2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.lang-popup-flag:hover {
  border-color: var(--secondary);
  background: rgba(139, 107, 61, 0.08);
}

.lang-popup-flag.active {
  border: 3px solid var(--secondary);
  background: rgba(139, 107, 61, 0.08);
}

.lang-popup-flag.active::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}

.lang-popup-flag .flag-svg {
  width: 36px;
  height: 24px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.lang-popup-flag .flag-code {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.lang-popup-flag.active .flag-code {
  color: var(--secondary);
}

/* ── Lightbox ─────────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(26, 20, 16, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

#lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 80dvh;
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#lightbox.show .lightbox-img-wrap {
  transform: scale(1);
}

.lightbox-img {
  max-width: 90vw;
  max-height: 80dvh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.lightbox-img.crossfade {
  opacity: 0;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 237, 224, 0.7);
  cursor: pointer;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.5);
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}

.lightbox-close:hover { background: rgba(26, 20, 16, 0.8); color: var(--bg); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 237, 224, 0.7);
  cursor: pointer;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.5);
  transition: background 0.2s, color 0.2s;
}

.lightbox-nav:hover { background: rgba(26, 20, 16, 0.8); color: var(--bg); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* ── Losange ornement ─────────────────────────────────── */
.ornament-losange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--secondary-2);
  opacity: 0.7;
}

.ornament-line {
  width: 40px;
  height: 1px;
  background: var(--secondary-2);
  opacity: 0.5;
}

/* ── Responsive desktop ───────────────────────────────── */
@media (min-width: 480px) {
  body {
    background: var(--primary);
  }

  #splash-screen {
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 480px;
  }

  #portal-wrapper {
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
  }
}

/* ═══ AVIS INTERNE ══════════════════════════════════════ */
.avis-screen { min-height: 100%; }

.avis-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.avis-card:active { transform: scale(0.98); }
.avis-card.selected {
  border-color: var(--secondary);
  background: rgba(139,107,61,0.06);
}
.avis-card-none { border-style: dashed; }
.avis-card-none.selected { border-style: dashed; }
.avis-card-nom {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
}
.avis-card-prix {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--secondary);
  margin-top: 2px;
}
.avis-card-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  color: transparent;
}
.avis-card.selected .avis-card-check {
  background: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

/* ── Boutons "suite" — hiérarchie intermédiaire ──────────── */
.btn-suite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 32px;
  margin: 0 auto;
  background: transparent;
  border: 1.5px solid var(--secondary);
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-suite::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--secondary) 0%, #C9A86A 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn-suite:hover:not(:disabled)::before {
  transform: scaleX(1);
}
.btn-suite:hover:not(:disabled) {
  color: white;
  border-color: #C9A86A;
  box-shadow: 0 8px 20px rgba(139, 107, 61, 0.25);
  transform: translateY(-2px);
}
.btn-suite:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.btn-suite:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-suite-arrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}
.btn-suite:hover:not(:disabled) .btn-suite-arrow {
  transform: translateX(4px);
}

.avis-stars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.avis-pulse {
  animation: avis-shake 0.4s ease;
}
@keyframes avis-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   ÉCRAN MERCI — Animations cinématiques
   ═══════════════════════════════════════════════════════════ */

/* ── Conteneur principal ─────────────────────────────────── */
.avis-merci {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 116px);
  padding: 40px 24px 80px;
  overflow: hidden;
  background: var(--bg);
  text-align: center;
}

/* ── Particules dorées flottantes ────────────────────────── */
.particules {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.particule {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A86A;
  opacity: 0;
}
.particule-1 { left: 12%; top: 70%; animation: floatUp 5s ease-out 0.2s infinite; }
.particule-2 { left: 28%; top: 80%; animation: floatUp 6s ease-out 0.8s infinite; width:4px; height:4px; }
.particule-3 { left: 55%; top: 75%; animation: floatUp 4.5s ease-out 1.4s infinite; width:8px; height:8px; background:#B08A54; }
.particule-4 { left: 72%; top: 65%; animation: floatUp 5.5s ease-out 0.5s infinite; width:5px; height:5px; }
.particule-5 { left: 88%; top: 78%; animation: floatUp 6.5s ease-out 1.1s infinite; width:3px; height:3px; }

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  80%  { opacity: 0.4; }
  100% { transform: translateY(-140px) scale(0.3); opacity: 0; }
}

/* ── Rosace SVG animée ───────────────────────────────────── */
.merci-rosace {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  animation: rosaceAppear 0.8s cubic-bezier(0.34,1.56,0.64,1) both;
}
.rosace-circle {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: drawCircle 1.2s ease-out forwards;
}
.rosace-circle:nth-child(2) {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation-delay: 0.4s;
}
.rosace-rayons line {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawLine 0.5s ease-out forwards;
}
.rosace-rayons line:nth-child(1) { animation-delay: 0.9s; }
.rosace-rayons line:nth-child(2) { animation-delay: 1.0s; }
.rosace-rayons line:nth-child(3) { animation-delay: 1.05s; }
.rosace-rayons line:nth-child(4) { animation-delay: 1.1s; }
.rosace-rayons line:nth-child(5) { animation-delay: 1.15s; }
.rosace-rayons line:nth-child(6) { animation-delay: 1.2s; }
.rosace-rayons line:nth-child(7) { animation-delay: 1.25s; }
.rosace-rayons line:nth-child(8) { animation-delay: 1.3s; }
.rosace-losanges path {
  opacity: 0;
  animation: fadeScale 0.4s ease-out forwards;
}
.rosace-losanges path:nth-child(1) { animation-delay: 1.35s; }
.rosace-losanges path:nth-child(2) { animation-delay: 1.45s; }
.rosace-losanges path:nth-child(3) { animation-delay: 1.4s; }
.rosace-losanges path:nth-child(4) { animation-delay: 1.5s; }
.rosace-center {
  opacity: 0;
  animation: fadeScale 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.6s forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rosaceAppear {
  from { opacity: 0; transform: scale(0.6) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Respiration lente continue après apparition */
.merci-rosace svg {
  animation: rosaBreath 8s ease-in-out 2s infinite alternate;
  transform-origin: center;
}
@keyframes rosaBreath {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.04) rotate(6deg); }
  100% { transform: scale(1) rotate(-6deg); }
}

/* ── Étoiles décoratives ─────────────────────────────────── */
.merci-etoiles {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.merci-etoiles .etoile {
  color: #C9A86A;
  font-size: 14px;
  opacity: 0;
  animation: fadeScale 0.4s ease-out forwards;
}
.merci-etoiles .etoile:nth-child(1) { animation-delay: 1.7s; }
.merci-etoiles .etoile:nth-child(2) { animation-delay: 1.85s; }
.merci-etoiles .etoile:nth-child(3) { animation-delay: 2.0s; }

/* ── MERCI lettre par lettre ─────────────────────────────── */
.merci-titre {
  position: relative;
  z-index: 1;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(52px, 16vw, 72px);
  letter-spacing: 0.25em;
  color: var(--primary);
  margin: 0 0 8px;
  line-height: 1;
}
.merci-titre .lettre {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  animation: lettreAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.merci-titre .lettre:nth-child(1) { animation-delay: 2.0s; }
.merci-titre .lettre:nth-child(2) { animation-delay: 2.1s; }
.merci-titre .lettre:nth-child(3) { animation-delay: 2.2s; }
.merci-titre .lettre:nth-child(4) { animation-delay: 2.3s; }
.merci-titre .lettre:nth-child(5) { animation-delay: 2.4s; }

@keyframes lettreAppear {
  from { opacity: 0; transform: translateY(40px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Divider ornement ────────────────────────────────────── */
.merci-divider {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeScale 0.5s ease-out 2.7s forwards;
  margin-bottom: 16px;
}

/* ── Phrase poétique ─────────────────────────────────────── */
.merci-phrase {
  position: relative;
  z-index: 1;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 0 28px;
  min-height: 26px;
  opacity: 0;
  animation: phraseAppear 0.5s ease-out 2.9s forwards;
}
@keyframes phraseAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cartouche Google ────────────────────────────────────── */
.merci-cartouche {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(139,107,61,0.12);
  opacity: 0;
  animation: cartoucheAppear 0.7s cubic-bezier(0.34,1.56,0.64,1) 3.2s forwards;
  overflow: hidden;
}
.merci-cartouche::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(201,168,106,0.15) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: cartShine 3s ease-in-out 4s infinite;
  pointer-events: none;
}
@keyframes cartoucheAppear {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cartShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.cartouche-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}
.cartouche-stars span {
  color: #C9A86A;
  font-size: 18px;
  opacity: 0;
  animation: fadeScale 0.3s ease-out forwards;
}
.cartouche-stars span:nth-child(1) { animation-delay: 3.4s; }
.cartouche-stars span:nth-child(2) { animation-delay: 3.5s; }
.cartouche-stars span:nth-child(3) { animation-delay: 3.6s; }
.cartouche-stars span:nth-child(4) { animation-delay: 3.7s; }
.cartouche-stars span:nth-child(5) { animation-delay: 3.8s; }

.cartouche-titre {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--secondary);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.cartouche-desc {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}
.cartouche-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--secondary) 0%, #C9A86A 50%, var(--secondary) 100%);
  background-size: 200% 200%;
  color: white;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(139,107,61,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: cartStarPulse 2s ease-in-out 4s infinite alternate;
}
.cartouche-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139,107,61,0.45);
}
.cartouche-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: btnShine 2.5s ease-in-out 5s infinite;
  pointer-events: none;
}
@keyframes cartStarPulse {
  from { box-shadow: 0 4px 16px rgba(139,107,61,0.3); }
  to   { box-shadow: 0 6px 24px rgba(139,107,61,0.55); }
}
@keyframes btnShine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.cartouche-btn-star {
  font-size: 14px;
  animation: starPulse 2s ease-in-out infinite;
}
@keyframes starPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}
.cartouche-btn-arrow {
  font-size: 16px;
  transition: transform 0.2s;
}
.cartouche-btn:hover .cartouche-btn-arrow {
  transform: translateX(3px);
}

/* ── Bouton retour discret ───────────────────────────────── */
.merci-retour {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  background: none;
  border: none;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  animation: phraseAppear 0.4s ease-out 3.8s forwards;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.merci-retour:hover { color: var(--secondary); }

/* ── Écran choix (état initial) ──────────────────────────── */
.avis-choix-card {
  width: 100%;
  max-width: 300px;
  padding: 24px 20px;
  border-radius: 16px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  background: var(--surface);
  text-align: left;
}
.avis-choix-card:hover {
  border-color: var(--secondary);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(139,107,61,0.15);
}
.avis-choix-card.gold {
  background: linear-gradient(135deg, var(--secondary) 0%, #A07840 100%);
  border-color: var(--secondary);
  color: white;
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .particule,
  .rosace-circle,
  .rosace-rayons line,
  .rosace-losanges path,
  .rosace-center,
  .merci-rosace,
  .merci-rosace svg,
  .merci-etoiles .etoile,
  .merci-titre .lettre,
  .merci-divider,
  .merci-phrase,
  .merci-cartouche,
  .merci-cartouche::before,
  .cartouche-stars span,
  .cartouche-btn,
  .cartouche-btn::after,
  .cartouche-btn-star,
  .merci-retour {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ── Bouton envoyer — étoile pulsante ─────────────────── */
@keyframes starPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ═══ AVIS MERCI — Écran cinématique ════════════════════ */
.avis-merci {
  position: relative;
  min-height: calc(100vh - 116px);
  background: #1A1410;
  color: var(--bg);
  padding: 48px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Particules dorées */
.particules { position:absolute; inset:0; pointer-events:none; z-index:0; }
.particule {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--secondary-2); opacity: 0;
  animation: floatUp 8s linear infinite;
}
.particule-1 { left:15%; animation-delay:0s; }
.particule-2 { left:35%; animation-delay:1.5s; }
.particule-3 { left:60%; animation-delay:3s; }
.particule-4 { left:80%; animation-delay:4.5s; }
.particule-5 { left:50%; animation-delay:6s; }

@keyframes floatUp {
  0%   { bottom:-5%; opacity:0; transform:translateX(0) scale(0.5); }
  10%  { opacity:0.4; }
  50%  { transform:translateX(15px) scale(1); opacity:0.3; }
  90%  { opacity:0.2; }
  100% { bottom:105%; opacity:0; transform:translateX(-10px) scale(0.5); }
}

/* Rosace */
.merci-rosace {
  position:relative; z-index:1; margin-bottom:20px;
  opacity:0;
  animation: rosaceAppear 1.2s cubic-bezier(0.65,0,0.35,1) 0.3s forwards;
  filter: drop-shadow(0 0 16px rgba(201,168,106,0.3));
}
.merci-rosace::after {
  content:''; position:absolute; inset:-20%; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,106,0.15) 0%, transparent 70%);
  opacity:0; animation:breathe 4s ease-in-out 2.5s infinite;
}
.rosace-circle {
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:drawCircle 1.5s cubic-bezier(0.65,0,0.35,1) 0.5s forwards;
}
.rosace-rayons line {
  stroke-dasharray:30; stroke-dashoffset:30;
  animation:drawLine 0.6s ease-out forwards;
}
.rosace-rayons line:nth-child(1){animation-delay:0.8s}
.rosace-rayons line:nth-child(2){animation-delay:0.9s}
.rosace-rayons line:nth-child(3){animation-delay:1.0s}
.rosace-rayons line:nth-child(4){animation-delay:1.1s}
.rosace-rayons line:nth-child(5){animation-delay:1.2s}
.rosace-rayons line:nth-child(6){animation-delay:1.3s}
.rosace-rayons line:nth-child(7){animation-delay:1.4s}
.rosace-rayons line:nth-child(8){animation-delay:1.5s}
.rosace-losanges path {
  opacity:0; animation:fadeScale 0.4s ease-out forwards;
}
.rosace-losanges path:nth-child(1){animation-delay:1.6s}
.rosace-losanges path:nth-child(2){animation-delay:1.7s}
.rosace-losanges path:nth-child(3){animation-delay:1.8s}
.rosace-losanges path:nth-child(4){animation-delay:1.9s}
.rosace-center { opacity:0; animation:fadeScale 0.4s ease-out 2.0s forwards; }

@keyframes drawCircle { to { stroke-dashoffset:0; } }
@keyframes drawLine   { to { stroke-dashoffset:0; } }
@keyframes fadeScale  { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }
@keyframes rosaceAppear { to { opacity:1; } }
@keyframes breathe {
  0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.1)}
}

/* 3 étoiles décoratives */
.merci-etoiles {
  display:flex; gap:12px; margin-bottom:14px; z-index:1;
  opacity:0; animation:merciShow 0.5s ease-out 2.2s forwards;
}
.etoile {
  font-size:14px; color:var(--secondary-2);
  opacity:0; animation:starAppear 0.3s ease-out forwards;
}
.etoile:nth-child(1){animation-delay:2.3s}
.etoile:nth-child(2){animation-delay:2.4s}
.etoile:nth-child(3){animation-delay:2.5s}
@keyframes starAppear {
  from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)}
}

/* MERCI lettre par lettre */
.merci-titre {
  display:flex; gap:6px; z-index:1;
  font-family:'Cinzel',serif; font-weight:900;
  font-size:clamp(52px,13vw,80px);
  color:var(--secondary-2);
  letter-spacing:0.1em; margin:0 0 18px;
  text-shadow:0 4px 24px rgba(201,168,106,0.3);
}
.merci-titre .lettre {
  display:inline-block; opacity:0;
  transform:translateY(20px) scale(0.5);
  animation:lettreAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.merci-titre .lettre:nth-child(1){animation-delay:2.6s}
.merci-titre .lettre:nth-child(2){animation-delay:2.7s}
.merci-titre .lettre:nth-child(3){animation-delay:2.8s}
.merci-titre .lettre:nth-child(4){animation-delay:2.9s}
.merci-titre .lettre:nth-child(5){animation-delay:3.0s}
@keyframes lettreAppear {
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Ornement divider */
.merci-divider {
  margin:0 0 20px; z-index:1;
  opacity:0; animation:merciShow 0.5s ease-out 3.3s forwards;
}

/* Phrase poétique */
.merci-phrase {
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:20px; color:var(--bg); text-align:center;
  max-width:300px; line-height:1.4; margin:0 0 40px; z-index:1;
  opacity:0; animation:merciShow 0.5s ease-out 3.6s forwards;
  min-height:28px;
}

/* Cartouche Google premium */
.merci-cartouche {
  position:relative; z-index:1;
  background:linear-gradient(135deg, rgba(244,237,224,0.06) 0%, rgba(244,237,224,0.12) 100%);
  border:1px solid var(--secondary); border-radius:20px;
  padding:28px 24px; max-width:340px; width:100%; text-align:center;
  margin-bottom:28px; backdrop-filter:blur(10px);
  opacity:0; transform:translateY(20px);
  animation:cartoucheAppear 0.8s cubic-bezier(0.34,1.56,0.64,1) 4.0s forwards;
  box-shadow:0 16px 48px rgba(0,0,0,0.3);
}
@keyframes cartoucheAppear { to{opacity:1;transform:translateY(0)} }

.cartouche-stars {
  display:flex; justify-content:center; gap:6px; margin-bottom:14px;
  font-size:18px; color:var(--secondary-2);
}
.cartouche-stars span { animation:cartStarPulse 2s ease-in-out infinite; }
.cartouche-stars span:nth-child(1){animation-delay:0s}
.cartouche-stars span:nth-child(2){animation-delay:0.15s}
.cartouche-stars span:nth-child(3){animation-delay:0.30s}
.cartouche-stars span:nth-child(4){animation-delay:0.45s}
.cartouche-stars span:nth-child(5){animation-delay:0.60s}
@keyframes cartStarPulse {
  0%,100%{transform:scale(1)} 50%{transform:scale(1.2)}
}

.cartouche-titre {
  font-family:'Cinzel',serif; font-weight:700; font-size:14px;
  letter-spacing:0.16em; color:var(--bg); margin:0 0 10px; line-height:1.4;
}
.cartouche-desc {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; color:rgba(244,237,224,0.85); line-height:1.5; margin:0 0 20px;
}
.cartouche-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px; background:var(--secondary-2); color:var(--primary);
  text-decoration:none; font-family:'Cinzel',serif; font-weight:700;
  font-size:13px; letter-spacing:0.14em; border-radius:10px;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 6px 16px rgba(201,168,106,0.35);
  position:relative; overflow:hidden;
}
.cartouche-btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,168,106,0.5); }
.cartouche-btn:active { transform:scale(0.97); }
.cartouche-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  animation:btnShine 5s ease-in-out 4s infinite;
}
@keyframes btnShine {
  0%,90%,100%{left:-100%} 10%,20%{left:150%}
}
.cartouche-btn-star { font-size:11px; }
.cartouche-btn-arrow { font-size:16px; font-weight:900; }

/* Retour discret */
.merci-retour {
  background:none; border:none; color:rgba(244,237,224,0.45);
  font-family:'Work Sans',sans-serif; font-size:13px; cursor:pointer;
  padding:12px 24px; transition:color 0.3s ease; z-index:1;
  opacity:0; animation:merciShow 0.5s ease-out 4.5s forwards;
}
.merci-retour:hover { color:var(--secondary-2); text-decoration:underline; text-underline-offset:4px; }

@keyframes merciShow { to { opacity:1; } }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .particules, .merci-rosace::after { display:none; }
  .merci-rosace, .merci-etoiles, .etoile, .merci-titre .lettre,
  .merci-divider, .merci-phrase, .merci-cartouche, .merci-retour,
  .rosace-circle, .rosace-rayons line, .rosace-losanges path, .rosace-center {
    animation:none !important; opacity:1 !important;
    transform:none !important; stroke-dashoffset:0 !important;
  }
  .cartouche-stars span, .cartouche-btn::before { animation:none !important; }
}

/* ════════════════════════════════════════════════════════
   ONGLET BOISSONS — refonte design v2
   ════════════════════════════════════════════════════════ */

/* 4 onglets : réduire légèrement la taille de police */
#portal-tabs .tab-btn {
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ── Category section ────────────────────────────────── */
.boisson-category-section { padding: 0 0 32px; }

/* Alternance fond très subtile */
.boisson-category-section:nth-child(odd) {
  background: color-mix(in srgb, var(--primary) 3%, var(--bg));
}

/* Note de catégorie */
.boisson-cat-note {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
  padding: 0 20px;
  line-height: 1.5;
}

/* ── Sous-catégorie (vins rosés, vins blancs…) ───────── */
.boisson-subcat-section { margin-bottom: 4px; }

.boisson-subcat-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 17px;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--secondary);
  text-align: center;
  padding: 12px 20px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--secondary) 25%, transparent);
  margin: 0 20px;
}

.boisson-empty {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text-muted);
  padding: 16px 0;
}

/* ── Card boisson — base ─────────────────────────────── */
.boisson-card {
  padding: 13px 20px 14px;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.boisson-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mise en avant produits locaux ──────────────────── */
.boisson-card--local {
  background: color-mix(in srgb, var(--secondary) 8%, var(--bg));
  border-left: 3px solid var(--secondary);
  padding-left: 17px; /* 20px - 3px border */
}

/* ── Éléments texte partagés ─────────────────────────── */
.boisson-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.boisson-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--primary);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

/* Producteur · Millésime en or italique */
.boisson-origine {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--secondary);
  margin-top: 1px;
  line-height: 1.4;
}

/* Description / composition */
.boisson-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

/* Texte local (provenance, note) en or italique */
.boisson-local-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--secondary);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── Badge "Local / Regional / Lokaal" ────────────────── */
.boisson-badge-local {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 20px;
  border: 1px solid var(--secondary);
  font-family: 'Work Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 10%, var(--bg));
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 4px;
}

/* ── Prix en ligne espacée ───────────────────────────── */
/* Format : « Verre 12,5 cl 7,00 € · Pichet 25 cl 14,00 € » */
.boisson-prix-liste {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.7;
  flex-wrap: wrap;
}

.boisson-prix-liste .bois-label {
  color: var(--text-muted);
}

.boisson-prix-liste strong {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
}

.boisson-prix-liste .bois-sep {
  color: var(--border);
  padding: 0 1px;
}

/* ── Layout éditorial VIN ─────────────────────────────── */
.boisson-card--vin { padding: 14px 20px 16px; }

.boisson-card--vin .boisson-name { font-size: 15px; }

.boisson-vin-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .boisson-vin-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .boisson-vin-info {
    flex: 1;
    padding-right: 20px;
    border-right: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  }
  .boisson-vin-prix {
    padding-left: 20px;
    padding-top: 2px;
    display: flex;
    align-items: flex-start;
  }
}

/* ── Bière hero (est_local = 1 dans catégorie bieres) ─── */
.boisson-card--hero {
  background: color-mix(in srgb, var(--secondary) 10%, var(--bg));
  border-left: 3px solid var(--secondary);
  padding: 16px 20px 16px 17px;
  margin-bottom: 2px;
}

.boisson-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.boisson-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--secondary) 18%, var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.boisson-hero-heading { flex: 1; min-width: 0; }

.boisson-card--hero .boisson-name { font-size: 16px; }

.boisson-hero-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ── Compact (sans-alcool, eaux, chaudes, alcools, digestifs) */
.boisson-compact-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .boisson-compact-grid { grid-template-columns: 1fr 1fr; }
  .boisson-compact-grid .boisson-card--compact:nth-child(2n+1) {
    border-right: 1px solid var(--border);
  }
}

.boisson-card--compact { padding: 9px 20px; }

/* Boisson multi-formats : pleine largeur pour ne pas tronquer */
@media (min-width: 640px) {
  .boisson-card--compact.boisson-compact-full { grid-column: 1 / -1; }
}

.boisson-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}

.boisson-compact-nom {
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--primary);
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.boisson-compact-prix {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.boisson-compact-cl {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  color: var(--secondary);
  letter-spacing: 0.02em;
}

/* Prix compact en primary (sombre, gras) */
.boisson-compact-prix strong {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

/* ── prefers-reduced-motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .boisson-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   FORMULES — Cards + Éligibilité
   ══════════════════════════════════════════════════════════ */

.formules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 600px) {
  .formules-grid { grid-template-columns: repeat(3, 1fr); }
}

.formule-card {
  border: 1px solid var(--secondary);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  background: var(--surface);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.formule-card.visible {
  opacity: 1;
  transform: none;
}

.formule-prix {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 6px;
}

.formule-nom {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.formule-desc {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Éligibilité formules — accordéon */
.formules-elig-bloc {
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.formules-elig-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.formules-elig-toggle:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

.formules-elig-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--secondary);
}

.formules-elig-content {
  padding-bottom: 16px;
}

.formules-elig-group {
  margin-bottom: 12px;
}

.formules-elig-group:last-child { margin-bottom: 0; }

.formules-elig-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--secondary);
  margin-bottom: 6px;
}

.formules-elig-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.formule-elig-pill {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   COUPES GLACÉES — En-tête de groupe
   ══════════════════════════════════════════════════════════ */

.coupes-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 4px;
}

.coupes-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--secondary), transparent);
  opacity: 0.4;
}

.coupes-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--secondary);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   COMPOSEZ VOTRE COUPE — Bloc interactif
   ══════════════════════════════════════════════════════════ */

.composez-coupe-bloc {
  border: 1px solid var(--secondary);
  border-radius: 16px;
  padding: 24px 20px;
  background: var(--surface);
  margin-bottom: 8px;
}

/* Sélecteur 1 / 2 / 3 boules */
.composez-selector {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.composez-boule-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  min-width: 72px;
}

.composez-boule-btn:hover,
.composez-boule-btn:focus-visible {
  border-color: var(--secondary);
  color: var(--secondary);
  outline: none;
}

.composez-boule-btn.active {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 10%, var(--surface));
  color: var(--secondary);
}

.composez-boule-btn svg {
  stroke: currentColor;
}

.composez-boule-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Prix affiché */
.composez-prix-display {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

/* Palette de parfums */
.composez-parfums {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.composez-group { }

.composez-group-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--secondary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.composez-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.composez-pill {
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1.4;
}

.composez-pill:hover,
.composez-pill:focus-visible {
  border-color: var(--secondary);
  color: var(--secondary);
  outline: none;
}

.composez-pill.active {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, var(--surface));
  color: var(--secondary);
  font-weight: 500;
}

/* ── prefers-reduced-motion pour les nouveaux éléments ─── */
@media (prefers-reduced-motion: reduce) {
  .formule-card,
  .composez-boule-btn,
  .composez-pill,
  .formules-elig-chevron {
    transition: none !important;
  }
  .formule-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   CATÉGORIE — En-tête redesigné avec filets flanquants
   ══════════════════════════════════════════════════════════ */

/* Override : l'ornement est maintenant au-dessus (margin bottom, pas top) */
.category-ornament {
  margin: 0 0 10px;
}

/* Titre en ligne avec filets flanquants */
.category-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
  opacity: 0.45;
}

/* Override : titre en or, plus lisible, letter-spacing généreux */
.category-title {
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sous-en-tête pour les coupes (dans le groupe coupes glacées) */
.category-header--sub {
  padding: 10px 20px 8px;
}

.category-header--sub .category-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  opacity: 0.8;
}

.category-header--sub .category-rule-line {
  opacity: 0.25;
}

/* ══════════════════════════════════════════════════════════
   SECTION DESSERTS & GLACES — séparateur de partie
   ══════════════════════════════════════════════════════════ */

.desserts-glaces-header {
  padding: 36px 20px 4px;
  text-align: center;
}

.desserts-glaces-ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.desserts-glaces-rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.desserts-glaces-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8B6B3D, transparent);
}

.desserts-glaces-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8B6B3D;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   BADGE "DISPONIBLE EN FORMULE" — rectangle doré
   ══════════════════════════════════════════════════════════ */

.plat-formule-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Work Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F4EDE0;             /* parchemin */
  background: var(--secondary);  /* or */
  border-radius: 3px;
  padding: 3px 8px 2px;
  margin-top: 5px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   LÉGENDE FORMULES — sous les cards formules
   ══════════════════════════════════════════════════════════ */

.formule-elig-legend {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 20px 8px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   FORMULES — liste verticale avec titre+prix sur même ligne
   ══════════════════════════════════════════════════════════ */

/* Remplace .formules-grid sur mobile */
.formules-liste {
  padding: 0 20px;
  margin-bottom: 12px;
}

/* formule-card — centré (overridé plus loin dans le fichier) */
.formule-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.formule-card:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   SOUS-BLOC "EN FORMULE UNIQUEMENT" — panneau bordeaux
   ══════════════════════════════════════════════════════════ */

.formule-only-bloc {
  margin: 20px 20px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #8B1A1A;
  border: none;
  padding-top: 0;
}

.formule-only-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 9px;
  border-bottom: 1px solid rgba(201, 168, 106, 0.25);
}

.formule-only-titre {
  font-family: 'Cinzel', serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A86A;           /* or */
  margin: 0;
  text-align: center;
}

.formule-only-list {
  padding: 4px 0;
  margin: 0;
  list-style: none;
}

.formule-only-item {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(244, 237, 224, 0.08);
}

.formule-only-item:last-child { border-bottom: none; }

.formule-only-nom {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: #F4EDE0;           /* parchemin */
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.formule-only-desc {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 237, 224, 0.7);
  margin-top: 2px;
  line-height: 1.45;
}

/* ══════════════════════════════════════════════════════════
   COMPOSEZ VOTRE COUPE — intro distinctif
   ══════════════════════════════════════════════════════════ */

.composez-coupe-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  color: var(--secondary);
}

.composez-coupe-intro-icon {
  opacity: 0.65;
}

.composez-coupe-invite {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  max-width: 260px;
  margin: 0;
}

/* prefers-reduced-motion pour les nouveaux éléments */
@media (prefers-reduced-motion: reduce) {
  .formule-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   COMPOSANT COMPOSEZ VOTRE COUPE v2 — .lc-cvc
   ══════════════════════════════════════════════════════════ */
.lc-cvc {
  font-family: 'Work Sans', sans-serif;
  color: var(--primary);
  padding: 0 4px 24px;
}

/* En-tête intégré */
.lc-cvc .hd {
  text-align: center;
  margin-bottom: 4px;
}
.lc-cvc .hd h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: .12em;
  font-size: 18px;
  color: var(--primary);
  margin: 6px 0 0;
}
.lc-cvc .rule {
  width: 58px;
  height: 1px;
  background: var(--secondary);
  opacity: .6;
  margin: 8px auto 0;
}

/* Sous-titre */
.lc-cvc .sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
  text-align: center;
  max-width: 300px;
  margin: 12px auto 4px;
  line-height: 1.4;
}

/* Sélecteur coupes */
.lc-cvc .coupes {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin: 10px 0 2px;
}
.lc-cvc .opt {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 8px 2px 10px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background .2s, border-color .2s;
}
.lc-cvc .opt:hover {
  background: color-mix(in srgb, var(--secondary) 6%, var(--bg));
}
.lc-cvc .opt.sel {
  background: color-mix(in srgb, var(--secondary) 10%, var(--bg));
  border-color: var(--secondary);
}
.lc-cvc .opt .price {
  font-weight: 600;
  color: var(--cta);
  font-size: 15px;
  margin-top: 4px;
}
.lc-cvc .opt .lbl {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Animation boules SVG */
.lc-cvc .scoop {
  transform-box: fill-box;
  transform-origin: center;
}
.lc-cvc .opt.sel .scoop {
  animation: lc-pop .45s cubic-bezier(.2,.9,.3,1.35) both;
}
@keyframes lc-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* Résumé sélection */
.lc-cvc .sumln {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--cta);
  font-size: 17px;
  margin: 6px 0 2px;
  min-height: 1.4em;
}

/* Groupes parfums */
.lc-cvc .grp {
  margin-top: 20px;
}
.lc-cvc .grp-l {
  font-family: 'Cinzel', serif;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--secondary);
  margin-bottom: 9px;
  text-transform: uppercase;
}
.lc-cvc .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Pastilles parfums — texte noir, bordure dorée au hover uniquement */
.lc-cvc .pill {
  font-size: 12.5px;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  background: transparent;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, background .18s;
}
.lc-cvc .pill:hover {
  border-color: var(--secondary);
  background: transparent;
}
.lc-cvc .pill.on {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 8%, var(--bg));
  color: var(--primary);
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lc-cvc .scoop { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   5 ONGLETS — réduire encore la taille de police + padding
   ══════════════════════════════════════════════════════════ */
#portal-tabs .tab-btn {
  font-size: 10px;
  letter-spacing: 0.06em;
  padding-left: 6px;
  padding-right: 6px;
}

/* ══════════════════════════════════════════════════════════
   BADGE « DISPONIBLE EN FORMULE » — encadré doré visible
   ══════════════════════════════════════════════════════════ */
.badge-formule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, #8B6B3D 8%, #F4EDE0);
  border: 1px solid #8B6B3D;
  color: #1A1410;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 5px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   FORMULES — présentation centrée par card
   ══════════════════════════════════════════════════════════ */

/* Override : centré au lieu de flex espace-entre */
.formule-card {
  text-align: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.formule-card:last-child { border-bottom: none; }

/* Titre de formule — centré */
.formule-nom {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* Prix — centré, couleur or, grand */
.formule-prix {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 6px;
}

/* Description — centrée, italique Cormorant */
.formule-desc {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Note d'info formule — phrase inline centrée */
.formule-info-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  margin: 16px 20px 4px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--secondary) 6%, var(--bg));
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--secondary) 20%, transparent);
}
.formule-info-note .badge-formule {
  margin-top: 0; /* annule le margin-top du badge standalone */
}
.formule-info-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Sous-texte discret sous le séparateur "En formule uniquement" */
.formule-only-sub-text {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 20px 16px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   « EN FORMULE UNIQUEMENT » — séparateur + cartes
   ══════════════════════════════════════════════════════════ */

/* Séparateur centré — ◇ En formule uniquement ◇ */
.formule-only-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 20px 12px;
}
.formule-only-sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--secondary), transparent);
  opacity: 0.35;
}
.formule-only-sep-content {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.formule-only-sep-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Carte plat "en formule uniquement" — même base que plat-card, sans prix */
.plat-card--formule-only .plat-meta {
  display: none; /* masquer la zone prix/allergènes */
}

/* ══════════════════════════════════════════════════════════
   ONGLET DESSERTS — panel
   ══════════════════════════════════════════════════════════ */
#panel-desserts .desserts-glaces-header {
  padding-top: 32px;
}

/* ══════════════════════════════════════════════════════════
   COMPOSEZ — padding horizontal de section
   ══════════════════════════════════════════════════════════ */
.lc-cvc {
  padding: 0 20px 32px;
}

/* prefers-reduced-motion global complémentaire */
@media (prefers-reduced-motion: reduce) {
  .badge-formule, .formule-info-note, .formule-only-sep { transition: none !important; }
}