/* ============================================================
   MARIEZ-VOUS EN CALÈCHE — thème rose poudré & or
   Surcharge les tokens du design system « Les Écuries du Vieux
   Château » (_ds/evc) pour le site dédié aux mariages.
   Ne contient que ce qui ne peut pas être en style inline :
   variables, @keyframes, états (:hover/::placeholder) et
   comportements responsive.
   ============================================================ */
:root {
  /* ---- Échelle rose (poudré → prune) ---- */
  --rose-900: #33101C;
  --rose-800: #4E1729;
  --rose-700: #7A2A43;
  --rose-600: #9B3B57;
  --rose-500: #BE5F7B;   /* ROSE de marque */
  --rose-400: #D2879C;
  --rose-300: #E6B3C0;
  --rose-200: #F2D6DD;
  --rose-100: #FAECEF;

  /* ---- Neutres ivoire / albâtre ---- */
  --ivory-100: #FFFCFA;
  --ivory-200: #FBF5F1;
  --ivory-300: #F4E9E4;
  --ink-900: #241A1E;
  --ink-700: #4A3A40;
  --ink-500: #6F5F64;
  --ink-400: #9A8A8F;
  --line-300: #E4D5D3;
  --line-200: #EFE4E1;

  /* ---- Alias sémantiques (surcharge du DS) ---- */
  --brand:           var(--rose-500);
  --brand-strong:    var(--rose-700);
  --brand-deep:      var(--rose-800);
  --accent:          var(--gold-500);
  --accent-strong:   var(--gold-600);
  --accent-ink:      var(--gold-700);

  --bg-page:         var(--ivory-200);
  --bg-alt:          var(--ivory-300);
  --bg-tint:         var(--rose-100);
  --bg-champagne:    var(--gold-100);
  --surface-card:    var(--ivory-100);
  --surface-dark:    var(--rose-800);
  --surface-darkest: var(--rose-900);

  --text-strong:     var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-500);
  --text-faint:      var(--ink-400);
  --text-on-dark:    #F8EFF1;

  --border:          var(--line-300);
  --border-faint:    var(--line-200);
  --focus-ring:      var(--rose-400);

  --shadow-md: 0 10px 28px -10px rgba(51, 16, 28, 0.20);
  --shadow-lg: 0 24px 60px -22px rgba(51, 16, 28, 0.34);
  --shadow-rose: 0 14px 34px -14px rgba(190, 95, 123, 0.45);
}

html { scroll-behavior: smooth; }
body { background: var(--bg-page); overflow-x: hidden; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { color: var(--rose-600); }
::selection { background: var(--rose-200); color: var(--rose-900); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* ---- Entrée en scène (translation seule : jamais de contenu invisible) ---- */
@keyframes settle { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: settle .7s var(--ease-out) both; }
  .reveal.d1 { animation-delay: .04s; }
  .reveal.d2 { animation-delay: .12s; }
  .reveal.d3 { animation-delay: .22s; }
  .reveal.d4 { animation-delay: .32s; }
}

/* ---- Liens de navigation ---- */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink[aria-current="page"] { color: var(--brand-strong); }
.drawerlink:hover { background: var(--rose-100); color: var(--brand-strong); }
.foot-link { color: rgba(248,239,241,.62); display: inline-flex; align-items: center; gap: 9px; line-height: 1.5; }
.foot-link:hover { color: #fff; }
.social-chip:hover { border-color: var(--gold-400) !important; color: #fff !important; transform: translateY(-2px); }

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-sans);
  font-weight: 600; letter-spacing: var(--ls-button); line-height: 1; border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none; padding: 13px 26px; font-size: 15.5px;
  transition: transform var(--dur) var(--ease-out), background var(--dur), box-shadow var(--dur), color var(--dur); }
.btn:hover { transform: translateY(-2px); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-gold { background: var(--gold-500); color: var(--rose-900); box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--gold-400); color: var(--rose-900); }
.btn-rose { background: var(--brand); color: #fff; box-shadow: var(--shadow-rose); }
.btn-rose:hover { background: var(--rose-600); color: #fff; }
.btn-outline { background: transparent; color: var(--brand-strong); border: 1.5px solid var(--rose-400); }
.btn-outline:hover { background: var(--rose-100); color: var(--brand-strong); }
.btn-ondark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ondark:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---- Barre compacte au scroll ---- */
.compactbar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: rgba(251,245,241,.9);
  backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border-faint);
  transform: translateY(-100%); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur); }
.compactbar.show { transform: translateY(0); opacity: 1; }

/* ---- Barre de progression de lecture (sous la barre compacte) ---- */
.scrollprog { height: 3px; width: 100%; background: rgba(122,42,67,.10); overflow: hidden; }
.scrollprog-fill { display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--rose-500) 0%, var(--rose-400) 45%, var(--gold-400) 100%);
  box-shadow: 0 0 10px rgba(190,95,123,.55); transition: width .12s linear; }
@media (prefers-reduced-motion: reduce) { .scrollprog-fill { transition: none; } }

/* ---- Tiroir mobile ---- */
.drawer-root { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.drawer-root.open { pointer-events: auto; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(51,16,28,.45); opacity: 0; transition: opacity var(--dur); }
.drawer-root.open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 370px); background: var(--surface-card);
  box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--dur) var(--ease-out);
  padding: 24px 22px; overflow-y: auto; }
.drawer-root.open .drawer-panel { transform: translateX(0); }

/* ---- Pastilles de formulaire (radios stylées) ---- */
.pill-wrap { position: relative; display: inline-flex; cursor: pointer; }
.pill-wrap input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 14px;
  font-weight: 500; padding: 10px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: transparent; color: var(--text-body); transition: all var(--dur); white-space: nowrap; }
.pill-wrap:hover .pill { border-color: var(--rose-300); }
.pill-wrap input:checked + .pill { border-color: var(--rose-400); background: var(--rose-100); color: var(--rose-700); box-shadow: var(--shadow-sm); }
.pill-wrap input:focus-visible + .pill { outline: 2px solid var(--rose-400); outline-offset: 2px; }

/* ---- Champs de formulaire ---- */
.field { font-family: var(--font-sans); font-size: 15.5px; color: var(--text-strong); background: #fff;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; outline: none;
  width: 100%; box-sizing: border-box; transition: border-color var(--dur), box-shadow var(--dur); }
.field:focus { border-color: var(--rose-400); box-shadow: 0 0 0 4px rgba(190,95,123,.16); }
.field-label { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* ---- Assistant conversationnel (chatbot mariage) ---- */
@keyframes chatPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chatPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246,197,61,.5); } 50% { box-shadow: 0 0 0 12px rgba(246,197,61,0); } }
.chat-launcher { position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 300;
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-400); cursor: pointer; padding: 0;
  background: linear-gradient(150deg, var(--rose-600), var(--rose-900)); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center; transition: transform var(--dur) var(--ease-out);
  animation: chatPulse 2.8s ease-in-out infinite; }
.chat-launcher:hover { transform: translateY(-3px); }
.chat-teaser { position: fixed; right: calc(clamp(16px,3vw,28px) + 78px); bottom: clamp(28px,3.6vw,40px); z-index: 300;
  max-width: 250px; text-align: left; background: var(--surface-card); border: 1px solid var(--border-faint);
  border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow-lg); padding: 11px 14px;
  display: flex; flex-direction: column; gap: 3px; animation: chatPop .32s var(--ease-out) both; }
.chat-panel { position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 301;
  width: min(382px, calc(100vw - 32px)); height: min(576px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-faint); overflow: hidden; animation: chatPop .32s var(--ease-out) both; }
@media (max-width: 480px) { .chat-panel { right: 8px; left: 8px; width: auto; bottom: 8px; } }
@media (max-width: 1024px) { .chat-teaser { display: none; } .chat-launcher { width: 52px; height: 52px; } .chat-launcher img { width: 29px; height: 29px; } }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 16px 6px; background: var(--bg-page); }
.chat-body::-webkit-scrollbar { width: 7px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chat-row { display: flex; margin-bottom: 10px; }
.chat-row.bot { justify-content: flex-start; }
.chat-row.user { justify-content: flex-end; }
.chat-bubble { max-width: 85%; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; padding: 10px 13px; box-shadow: var(--shadow-sm); }
.chat-bubble.bot { border-radius: 4px 14px 14px 14px; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-faint); }
.chat-bubble.user { border-radius: 14px 4px 14px 14px; background: var(--rose-700); color: #fff; }
.chat-chip { display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-strong); padding: 12px 14px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-card);
  transition: all var(--dur) var(--ease-out); }
.chat-chip:hover { background: var(--rose-100); border-color: var(--rose-300); transform: translateX(2px); }
.chat-q { display: block; width: 100%; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: 13.5px;
  color: var(--text-body); padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-faint);
  background: var(--surface-card); transition: background var(--dur); }
.chat-q:hover { background: var(--rose-100); }
.chat-act { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12.5px;
  font-weight: 600; padding: 8px 13px; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform var(--dur); border: 1px solid var(--border); background: transparent; color: var(--brand-strong); }
.chat-act:hover { transform: translateY(-2px); color: var(--brand-strong); }
.chat-act.gold { background: var(--accent); color: var(--rose-900); border-color: transparent; }
.chat-act.gold:hover { background: var(--gold-400); color: var(--rose-900); }

/* ---- Cartes qui se soulèvent + pastilles d'icône (animations communes à toutes les pages) ---- */
@media (prefers-reduced-motion: no-preference) {
  .lift, .care-card, .tip-card, .mount-row, .logo-tile {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur); }
  .lift:hover, .care-card:hover, .tip-card:hover, .mount-row:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-300); }
  .ic-badge { transition: transform var(--dur) var(--ease-out), background var(--dur), color var(--dur); }
  .lift:hover .ic-badge, .care-card:hover .ic-badge, .mount-row:hover .ic-badge, .tip-card:hover .ic-badge {
    transform: scale(1.1) rotate(-6deg); background: var(--gold-100); color: var(--gold-700); }
  .logo-tile:hover { transform: translateY(-4px) scale(1.04); box-shadow: var(--shadow-lg); }
  .logo-tile img { transition: transform var(--dur) var(--ease-out); }
  .logo-tile:hover img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .lift, .care-card, .tip-card, .mount-row, .logo-tile, .ic-badge { transition: none; }
}

/* ---- Sélecteur « Nos 3 univers » ---- */
.nb3-mini { display: none; }
@media (max-width: 680px) { .nb3-pills { display: none !important; } .nb3-mini { display: inline-flex !important; } }

/* ---- Responsive du masthead ---- */
.mast-nav, .mast-utility-right { display: flex; }
.util-phone-mobile, .burger { display: none; }
@media (max-width: 1180px) {
  .mast-nav, .mast-utility-right { display: none !important; }
  .util-eyebrow { display: none; }
  .util-phone-mobile { display: inline-flex !important; }
  .burger { display: inline-flex !important; }
}

/* ---- Héro : fondu enchaîné + panoramique doux ---- */
.hero-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 42px; opacity: 0;
  transition: opacity 1.05s var(--ease-in-out); will-change: opacity; }
.hero-slide:first-child { opacity: 1; }
.hero-slide.active { opacity: 1; }
.hero-slide.dim { opacity: 0; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--ox, 52%) var(--oy, 50%); }
@keyframes heroPan {
  from { object-position: calc(var(--ox, 52%) - 4%) var(--oy, 50%); }
  to { object-position: calc(var(--ox, 52%) + 4%) var(--oy, 50%); }
}
.hero-slide.active img { animation: heroPan 4.2s var(--ease-in-out) both; }
@media (max-width: 760px) {
  .hero-slide img, .hero-slide.active img { animation: heroPanM 14s linear infinite alternate; }
  .hero-slide:nth-child(even) img { animation-name: heroPanMRev; }
}
@keyframes heroPanM { from { object-position: 18% var(--oy, 50%); } to { object-position: 82% var(--oy, 50%); } }
@keyframes heroPanMRev { from { object-position: 82% var(--oy, 50%); } to { object-position: 18% var(--oy, 50%); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide img, .hero-slide.active img { animation: none; }
}
/* ---- Héro : voile et bloc de texte alternés (impaires en haut à gauche, paires en bas à droite) ---- */
.hero-scrim { position: absolute; top: 0; left: 0; right: 0; bottom: 42px; pointer-events: none; z-index: 5;
  transition: background .95s var(--ease-in-out); }
.hero-scrim.tl { background: linear-gradient(148deg, rgba(30,9,16,.84) 0%, rgba(30,9,16,.52) 26%, rgba(30,9,16,.08) 55%, rgba(30,9,16,0) 74%),
  linear-gradient(180deg, rgba(30,9,16,0) 62%, rgba(30,9,16,.34) 100%); }
.hero-scrim.br { background: linear-gradient(328deg, rgba(30,9,16,.84) 0%, rgba(30,9,16,.52) 26%, rgba(30,9,16,.08) 55%, rgba(30,9,16,0) 74%),
  linear-gradient(180deg, rgba(30,9,16,.26) 0%, rgba(30,9,16,0) 34%); }
.hero-copy { position: absolute; z-index: 8; display: flex; flex-direction: column;
  gap: clamp(14px,2.2vh,22px); max-width: min(620px, 64%); will-change: opacity, transform; }
.hero-copy.tl { top: 0; left: 0; align-items: flex-start; text-align: left;
  padding: clamp(26px,5vh,54px) clamp(28px,5vw,72px) 0;
  animation: copyFadeL .72s var(--ease-out) both; }
.hero-copy.br { bottom: 42px; right: 0; align-items: flex-end; text-align: right;
  padding: 0 clamp(28px,5vw,72px) clamp(56px,6.4vh,74px) clamp(20px,4vw,40px);
  animation: copyFadeR .72s var(--ease-out) both; }
@keyframes copyFadeL {
  from { opacity: 0; transform: translate3d(-22px, 0, 0); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes copyFadeR {
  from { opacity: 0; transform: translate3d(22px, 0, 0); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes copyOutL {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translate3d(-14px, 0, 0); filter: blur(3px); }
}
@keyframes copyOutR {
  from { opacity: 1; transform: none; filter: blur(0); }
  to { opacity: 0; transform: translate3d(14px, 0, 0); filter: blur(3px); }
}
.hero-copy.tl.out { animation: copyOutL .46s cubic-bezier(.4,0,.7,1) both; }
.hero-copy.br.out { animation: copyOutR .46s cubic-bezier(.4,0,.7,1) both; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy.tl, .hero-copy.br { animation: none; }
}
.hero-copy.br .hero-eyebrow { flex-direction: row-reverse; }
.hero-copy.br .hero-cta { justify-content: flex-end; }

.hero-ctrl { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(56px,6.4vh,74px); z-index: 9;
  display: flex; align-items: center; gap: clamp(10px,1.4vw,18px);
  padding: 7px 10px; border-radius: var(--radius-pill);
  background: rgba(30,9,16,.34); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.hero-arrow { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex: none;
  background: rgba(255,252,250,.14); border: 1px solid rgba(255,255,255,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background var(--dur); }
.hero-arrow:hover { background: rgba(255,252,250,.34); }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; cursor: pointer; padding: 0; border: none;
  background: rgba(255,255,255,.45); transition: background var(--dur), width var(--dur); }
.hero-dot.active { background: var(--gold-400); width: 26px; border-radius: 999px; }
@media (max-width: 700px) { .hero-arrow { width: 36px; height: 36px; } }
@media (max-width: 760px) {
  .hero-copy, .hero-copy.tl, .hero-copy.br { top: auto; bottom: 42px; left: 0; right: 0; max-width: 100%;
    align-items: center; text-align: center; padding: 0 clamp(20px,5vw,32px) clamp(96px,14vh,130px); }
  .hero-copy.br .hero-eyebrow { flex-direction: row; }
  .hero-copy .hero-cta { justify-content: center; }
  .hero-scrim.tl, .hero-scrim.br { background: linear-gradient(180deg, rgba(30,9,16,.34) 0%, rgba(30,9,16,.05) 34%, rgba(30,9,16,.62) 78%, rgba(30,9,16,.8) 100%); }
  .hero-ctrl { left: 50%; right: auto !important; }
}

/* ---- Bandeau défilant ---- */
.marquee-track { display: flex; white-space: nowrap; will-change: transform; animation: marquee 44s linear infinite; }
.marquee-item { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-on-dark); }
.marquee-sep { flex: none; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-400); margin: 0 26px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Ruban de galerie + liseuse ---- */
.gal-ribbon { position: relative; overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.gal-track { display: flex; gap: 22px; width: max-content; align-items: center;
  animation: galScroll 78s linear infinite; will-change: transform; }
.gal-ribbon:hover .gal-track { animation-play-state: paused; }
@keyframes galScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gal-track { animation: none; } }
.gal-item { flex: none; width: clamp(250px, 26vw, 360px); border-radius: var(--radius-lg); overflow: hidden;
  position: relative; cursor: zoom-in; box-shadow: var(--shadow-md); border: 1px solid rgba(246,197,61,.4);
  background: var(--rose-100); margin: 0; transition: box-shadow var(--dur); }
.gal-item:nth-child(odd) { height: 300px; transform: translateY(-18px); }
.gal-item:nth-child(even) { height: 356px; transform: translateY(18px); }
.gal-item:nth-child(3n) { height: 330px; transform: translateY(0); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-out); }
.gal-item:hover { box-shadow: var(--shadow-lg); }
.gal-item:hover img { transform: scale(1.07); }
.gal-loupe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: linear-gradient(180deg, rgba(51,16,28,0) 55%, rgba(51,16,28,.42) 100%); }
.gal-item:hover .gal-loupe { opacity: 1; }
.gal-loupe span { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(255,252,250,.92); color: var(--brand-strong); box-shadow: var(--shadow-md); }

/* ---- Vignettes « toutes traditions » ---- */
.trad-tile { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.trad-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.trad-tile img { transition: transform .7s var(--ease-out); }
.trad-tile:hover img { transform: scale(1.05); }
.trad-tile:hover .gal-loupe { opacity: 1; }

.lb-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(30,9,16,.94); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; }
.lb-stage { position: relative; width: 90vw; height: 84vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lb-btn { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(246,197,61,.45);
  background: rgba(51,16,28,.55); color: #fff; cursor: pointer; transition: background var(--dur); }
.lb-btn:hover { background: rgba(51,16,28,.9); }
@media (max-width: 640px) { .lb-btn { width: 44px; height: 44px; } }

/* ---- Colonne défilante verticale (aperçu de prestations) ---- */
.proj-window { position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border-faint);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.proj-track { display: flex; flex-direction: column; animation: vscroll 30s linear infinite; will-change: transform; }
.proj-window:hover .proj-track { animation-play-state: paused; }
@keyframes vscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .proj-track { animation: none; } }

/* ---- Cartes « nos autres univers » ---- */
.duo-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-xl);
  min-height: clamp(320px, 42vh, 460px); text-decoration: none; box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur), transform var(--dur); }
.duo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.duo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1s var(--ease-out); }
.duo-card:hover .duo-bg { transform: scale(1.07); }
.duo-card::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(51,16,28,.10) 0%, rgba(51,16,28,.48) 52%, rgba(51,16,28,.85) 100%); }
.duo-cta svg { transition: transform var(--dur) var(--ease-out); }
.duo-card:hover .duo-cta svg { transform: translateX(6px); }

/* ---- Pastilles de villes ---- */
.prox-chip { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-card);
  box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--rose-800); white-space: nowrap;
  transition: transform .26s var(--ease-out), box-shadow .26s, border-color .26s, color .26s, background .26s; }
.prox-chip:hover { transform: translateY(-3px); color: #fff; background: var(--rose-700);
  border-color: var(--gold-400); box-shadow: 0 12px 26px rgba(51,16,28,.24); }
.prox-chip:hover .prox-chip-ic { color: var(--gold-400); }
.prox-chip-ic { display: inline-flex; color: var(--rose-500); transition: color .26s; }

/* ---- Grilles responsives ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.25rem); }
.footer-grid { display: flex; justify-content: center; gap: clamp(32px, 6vw, 88px); flex-wrap: wrap; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Crédit Web Pixie ---- */
.wp-credit { display: inline-flex; align-items: center; gap: 10px; padding: 12px clamp(14px, 4vw, 26px);
  border-radius: var(--radius-pill); background: var(--gold-400); color: #33101C; font-family: var(--font-sans);
  font-size: clamp(10.5px, 2.9vw, 13.5px); font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  animation: wpGlow 2.6s ease-in-out infinite; transition: transform var(--dur) var(--ease-out), background var(--dur); }
.wp-credit:hover { transform: translateY(-2px); background: var(--gold-300); color: #33101C; }
.wp-chev { flex: none; animation: wpChev 1.6s ease-in-out infinite; }
@keyframes wpGlow { 0%, 100% { box-shadow: 0 6px 18px rgba(240,176,0,.28); } 50% { box-shadow: 0 8px 30px rgba(240,176,0,.55); } }
@keyframes wpChev { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(5px); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .wp-credit, .wp-chev { animation: none; } }

/* ---- Cœurs flottants (ambiance nuptiale, discrète) ---- */
.amb { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.amb-heart { position: absolute; opacity: 0; color: rgba(246,197,61,.34); }
@keyframes ambFloat {
  0% { transform: translate3d(0, 30px, 0) rotate(-14deg) scale(.8); opacity: 0; }
  18% { opacity: .85; } 82% { opacity: .85; }
  100% { transform: translate3d(var(--dx, 0px), -230px, 0) rotate(16deg) scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) { .amb-heart { animation: ambFloat linear infinite; } }


/* ---- Rubans pilotés en JS (flèches de saut rapide) ---- */
.gal-track.js-drive, .proj-track.js-drive { animation: none !important; }
.snav { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; border: 1px solid var(--accent); background: var(--surface-card);
  color: var(--brand-strong); box-shadow: var(--shadow-sm);
  transition: background .24s var(--ease-out), color .24s, transform .24s var(--ease-out), box-shadow .24s; }
.snav:hover { background: var(--brand-strong); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.snav:active { transform: translateY(0) scale(.94); }
.snav-over { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; width: 42px; height: 42px;
  background: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
.snav-over:hover { transform: translateX(-50%) translateY(-2px); }
.snav-over:active { transform: translateX(-50%) scale(.94); }
.snav-up { top: 12px; }
.snav-down { bottom: 12px; }


/* ---- Galerie filtrable « Nos voitures » (parité avec louerunecaleche) ---- */
.vf-bar { display: flex; flex-direction: column; gap: 18px; margin-bottom: 38px; }
.vf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vf-label { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.vchip { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; padding: 9px 17px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent;
  color: var(--text-body); cursor: pointer; transition: all var(--dur) var(--ease-out); white-space: nowrap; }
.vchip:hover { border-color: var(--brand); color: var(--brand-strong); transform: translateY(-1px); }
.vchip.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.vseg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill);
  overflow: hidden; background: var(--surface-card); }
.vseg button { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; padding: 7px 14px;
  border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--dur); white-space: nowrap; }
.vseg button + button { border-left: 1px solid var(--border); }
.vseg button.on { background: var(--rose-100); color: var(--brand-strong); font-weight: 600; }
.vf-count { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin-left: auto; }
.vf-count b { color: var(--text-strong); font-weight: 600; }
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .v-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v-grid { grid-template-columns: 1fr; } }
@keyframes fleetIn { from { transform: translateY(16px) scale(.985); } to { transform: none; } }
.v-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.v-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: no-preference) { .v-anim .v-card { animation: fleetIn .5s var(--ease-out) both; } }
.v-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; font-family: var(--font-display);
  font-style: italic; font-size: 22px; color: var(--text-faint); }
.v-meta { display: flex; align-items: center; gap: 16px; }
.v-meta span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-size: 13px; color: var(--text-muted); }
.v-photo-wrap { position: relative; }
.v-see { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px; opacity: 0; transition: opacity var(--dur) var(--ease-out);
  background: linear-gradient(180deg, rgba(51,16,28,0) 40%, rgba(51,16,28,.42) 100%); }
.v-card:hover .v-see { opacity: 1; }
.v-see span { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: #fff; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(51,16,28,.55); backdrop-filter: blur(4px); padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(246,197,61,.5); }
.v-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12.5px;
  font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--rose-100); color: var(--rose-700); }
.v-badge.gold { background: var(--gold-100); color: var(--gold-700); }

/* ---- Fiche modale d'une voiture ---- */
@keyframes ficheRise { from { transform: translateY(24px); } to { transform: none; } }
.fiche-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(51,16,28,.62);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 28px; }
.fiche-panel { position: relative; background: var(--surface-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); width: min(960px, 100%); max-height: 90vh; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1fr; animation: ficheRise .4s var(--ease-out) both; }
.fiche-gallery { background: var(--rose-100); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fiche-main { flex: 1; min-height: 280px; }
.fiche-thumbs { display: flex; gap: 10px; }
.fiche-thumb { flex: 1; cursor: pointer; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid transparent; transition: border-color var(--dur); }
.fiche-thumb.on { border-color: var(--brand); }
.fiche-body { padding: 34px 34px 30px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.fiche-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--border); background: rgba(255,252,250,.9); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text-strong);
  transition: background var(--dur), transform var(--dur); }
.fiche-close:hover { background: #fff; transform: rotate(90deg); }
@media (max-width: 760px) {
  .fiche-panel { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .fiche-main { min-height: 220px; }
}


/* ---- Mur de logos défilant (Nos références) ---- */
.logo-marquee { display: flex; flex-direction: column; gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.logo-track { display: flex; width: max-content; animation: logoScroll 38s linear infinite; }
.logo-track.logo-rev { animation-direction: reverse; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-group { display: flex; }
.logo-plate { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 84px; min-width: 150px;
  margin: 0 10px; padding: 0 30px; border-radius: var(--radius-md); background: #fff;
  border: 1px solid var(--border-faint); box-shadow: var(--shadow-md); }
.logo-plate .logo-img { width: 150px; height: auto; object-fit: contain; display: block; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* ---- Annuaire de références ---- */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .dir-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .dir-grid { grid-template-columns: 1fr; } }
.dir-feat { background: linear-gradient(155deg, var(--rose-100) 0%, var(--surface-card) 68%) !important;
  border-color: var(--gold-300) !important; box-shadow: 0 14px 34px rgba(122,42,67,.14) !important;
  position: relative; overflow: hidden; }
.dir-feat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold-400) 100%); }
.dir-feat .ic-badge { background: var(--gold-100) !important; color: var(--gold-700) !important; }
.dir-flag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-bottom: 12px;
  padding: 5px 12px; border-radius: var(--radius-pill); background: var(--brand); color: #fff;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }


/* ---- Photo encadrée (Nos références) ---- */
.photo-frame { position: relative; width: min(100%, 900px); margin: 0 auto; padding: 14px;
  background: linear-gradient(140deg, var(--gold-400), var(--rose-300) 48%, var(--gold-300));
  border-radius: 6px; box-shadow: var(--shadow-lg); }
.photo-frame::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.55);
  border-radius: 3px; pointer-events: none; }
.photo-frame img { display: block; width: 100%; height: auto; border-radius: 2px;
  border: 1px solid rgba(51,16,28,.18); }


/* ---- Formulaire de devis : une seule colonne sur mobile ---- */
@media (max-width: 700px) { .devis-form { grid-template-columns: 1fr !important; } }


/* ---- Qui sommes-nous : diaporamas, CV, agréments ---- */
.about-shots { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 5 / 4; background: var(--rose-100); }
.about-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.about-shot.on { opacity: 1; }
.about-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.about-dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.65);
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: all var(--dur) var(--ease-out); }
.about-dot.on { width: 20px; background: var(--gold-400); }
@media (prefers-reduced-motion: reduce) { .about-shot { transition: none; } }

.pres-grid { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (max-width: 860px) { .pres-grid { grid-template-columns: 1fr; } .pres-sticky { position: static !important; max-width: 320px; } }
.pres-shot { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; background: var(--rose-100); }
.cv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; list-style: none; margin: 0; padding: 0 22px 20px; }
@media (max-width: 700px) { .cv-list { grid-template-columns: 1fr; } }
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .cred-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cred-grid { grid-template-columns: 1fr; } }
.labels-band { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 720px; margin: 0 auto; }
@media (max-width: 560px) { .labels-band { grid-template-columns: 1fr; } }
.assoc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .assoc-grid { grid-template-columns: 1fr; } }
.cv-panel { overflow: hidden; transition: max-height var(--dur) var(--ease-out); }


/* ---- Diaporama cliquable (événements privés) ---- */
.slidebox { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid rgba(246,197,61,.35);
  aspect-ratio: 3 / 2; background: var(--rose-100); cursor: zoom-in; }
.slidebox .slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease-in-out); }

.slidebox-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(246,197,61,.5);
  background: rgba(51,16,28,.5); backdrop-filter: blur(3px); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur); }
.slidebox-nav:hover { background: rgba(51,16,28,.85); }
.slidebox-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 8px; }
.slidebox-dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.6);
  box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; transition: all var(--dur) var(--ease-out); }
.slidebox-dot.on { width: 22px; background: var(--gold-400); }
@media (prefers-reduced-motion: reduce) { .slidebox .slide-img { transition: none; } }

/* ---- Flotte : filtres et fiches pilotés par classes (contenu en HTML source) ---- */
.v-card.v-hide { display: none !important; }
.fiche-scrim:not(.open) { display: none !important; }
.fiche-shot { display: none; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.fiche-shot.on { display: block; }