/* ═══════════════════════════════════════════════════════════════
   LOGICARIX V2 — Pages styles V4 (Sublimation)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── BUNDLE DETAIL (`.bd-`) ─────────────────────────────── */

/* ─────────── MINI HEADER PARTNER (D2c) ──────────────────────────── */
/* Header co-signé des templates partner : "Powered by Logicarix" (merchant,
   gauche = position dominante, règle Klarna) + "Partenaire de {partner}"
   (droite). Minimal en hauteur (52px) : la page produit garde la vedette. */
.partner-header {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.partner-header::after {
  /* liseré gradient brand (rose→violet→turquoise sur le thème VT) */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gradient-brand);
  opacity: .55;
}
.partner-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 52px;
  padding-block: 8px;
}
.partner-header__side {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.partner-header__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.partner-header__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}
.partner-header__side--partner .partner-header__logo { height: 24px; }
.partner-header__name {
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--primary-deep);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .partner-header__inner { min-height: 46px; }
  .partner-header__label { display: none; } /* mobile : logos seuls, gain de place */
  .partner-header__logo { height: 22px; }
  .partner-header__side--partner .partner-header__logo { height: 20px; }
}

/* ─────────── PARTNER MENTION — bandeau avant footer (D2c) ────────── */
.bd-partner-mention {
  background: var(--bg-cool);
  border-top: 1px solid var(--border);
  padding-block: var(--s-8);
}
.bd-partner-mention__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.bd-partner-mention__text {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.bd-partner-mention__logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.bd-partner-mention__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--primary-deep);
}

/* Hero --------------------------------------------------------------- */
.bd-hero {
  /* D2c polish mobile : s-12→s-8 en haut (demande Itshak — le mini header
     47px + s-12 faisait trop d'air avant la galerie sur petit écran) */
  padding-block: var(--s-8) var(--s-16);
  background:
    radial-gradient(ellipse 800px 500px at 75% -10%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(ellipse 600px 400px at 15% 110%, rgba(20,184,166,.08), transparent 60%),
    #FFFFFF;
  position: relative;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .bd-hero { padding-block: var(--s-16) var(--s-20); }
}
.bd-hero__inner {
  display: grid;
  /* D2b itération 2 : 55/45 (avant 1.1fr/1fr ≈ 52/48) + gap resserré s-8 (avant
     s-16=64px) — demande Itshak : la colonne buy était trop étroite (badge CRM
     sur 2 lignes, titre étouffé). min-width:0 sur les enfants : sans lui, les
     thumbs à largeur fixe (flex-shrink:0) poussent la colonne grid et empêchent
     la galerie de rétrécir en responsive (overflow horizontal de page). */
  grid-template-columns: 55fr 45fr;
  gap: var(--s-8);
  align-items: start;
}
.bd-hero__inner > * { min-width: 0; }
@media (max-width: 960px) {
  .bd-hero__inner { grid-template-columns: 1fr; gap: var(--s-8); }
}
/* D2c polish mobile : goutières réduites s-6→s-4 — à 390px on récupère
   16px de largeur utile pour le contenu (demande Itshak). Override local
   du .container (défini dans le CSS core) limité au mobile. */
@media (max-width: 768px) {
  .container { padding-inline: var(--s-4); }
}

/* GALERIE STYLE GROVER : photo principale + dots + flèches + vignettes EN BAS */
.bd-gallery {
  position: relative;
  isolation: isolate;
}
.bd-gallery::before {
  content: '';
  position: absolute;
  inset: 8% 4% 35% 4%;
  background:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(14,165,233,.32), transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 75%, rgba(20,184,166,.22), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  animation: haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-gallery::before { animation: none; }
}
.bd-gallery__main {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(20,184,166,.16), transparent 60%),
    linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 50%, #ECFDF5 100%);
  box-shadow:
    0 30px 60px -20px rgba(15,23,42,.20),
    0 12px 24px -8px rgba(15,23,42,.12),
    -32px -20px 80px -20px rgba(14,165,233,.20),
    32px 20px 80px -20px rgba(20,184,166,.16);
  border: 1px solid rgba(14,165,233,.10);
  transition: transform 350ms cubic-bezier(.2,.7,.3,1), box-shadow 350ms;
  /* Hint pour parallax JS */
  will-change: transform;
}
@media (hover:hover) {
  .bd-gallery__main:hover {
    box-shadow:
      0 40px 70px -20px rgba(15,23,42,.25),
      0 16px 32px -8px rgba(15,23,42,.18),
      -40px -24px 100px -20px rgba(14,165,233,.30),
      40px 24px 100px -20px rgba(20,184,166,.24);
  }
}
.bd-gallery__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
/* D2b itération 2 : les photos produit sont carrées 1:1 (1000×1000) — en 4:3 le
   cover tronquait haut/bas du casque. Le modifier --photos (posé par 01-hero.php
   quand $hasRealImages) force le ratio 1:1, les placeholders icônes gardent 4:3. */
.bd-gallery__main--photos { aspect-ratio: 1 / 1; }
.bd-gallery__placeholder .icon {
  width: 140px; height: 140px;
  color: rgba(14,165,233,.55);
  stroke-width: 1.25;
  filter: drop-shadow(0 8px 24px rgba(14,165,233,.25));
}

/* D2a mécanique minimale — polish Desktop D2b à venir.
   Galerie avec vraies photos produit (offer_photo / image_folder). Les slides
   sont empilées en absolute comme les placeholders ; le masquage is-hidden est
   requis ICI car aucune règle ne le portait avant (les placeholders étant de
   simples icônes décoratives, le switch n'avait pas besoin de masquer). Sans
   ce bloc, toutes les photos s'empileraient et dots/thumbs ne switcheraient
   plus rien. Transitions/zoom/ratio fin = ressort de Desktop en Mode B. */
.bd-gallery__photo {
  position: absolute; inset: 0;
  transition: opacity .45s ease, visibility .45s ease;
}
.bd-gallery__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.bd-gallery__photo.is-hidden { opacity: 0; visibility: hidden; }
.bd-gallery__photo.is-active { opacity: 1; visibility: visible; }
/* D2b : zoom doux au survol de la galerie — donne vie à la photo produit */
@media (hover:hover) {
  .bd-gallery__main:hover .bd-gallery__photo.is-active img { transform: scale(1.04); }
}
.bd-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Reflet sous le casque hero — retiré (decies-bis). Le rendu sur placeholder
   gradient donnait une bavure ovoïde grise (style "ombre" plutôt que "reflet
   produit"). À réactiver quand vraies photos casque (PNG/WEBP fond transparent
   + détourage propre) seront livrées. CSS conservé en commentaire pour ref :
@media (min-width: 1025px) {
  .bd-gallery__reflection {
    margin-top: -2%; height: 80px;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(14,165,233,.20), transparent 70%),
                radial-gradient(ellipse 50% 100% at 50% 0%, rgba(20,184,166,.12), transparent 70%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 100%);
    pointer-events: none; transform: scaleY(-1);
  }
}
*/

.bd-gallery__floating-badge {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  z-index: 2;
  padding: 8px 16px;
  background: #FFFFFF;
  color: var(--primary-deep);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 8px 20px rgba(14,165,233,.20), 0 2px 6px rgba(15,23,42,.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: badgeFloatIn .9s cubic-bezier(.2,.7,.3,1) .3s both,
             badgeFloat 3s ease-in-out 1.2s infinite;
}
.bd-gallery__floating-badge::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,184,166,.20);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes badgeFloatIn {
  from { opacity: 0; transform: translateY(-8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-gallery__floating-badge { animation: badgeFloatIn .4s both; }
}

/* Flèches navigation galerie */
.bd-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* D2c polish : flèches subtiles — fond translucide (blur conservé) +
     flèche à la couleur du thème (rose VT / bleu Logicarix, comme le dot
     actif du slideshow). Avant : pavés blancs opaques trop présents. */
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: var(--primary);
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
  transition: transform .2s, background .2s, box-shadow .2s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bd-gallery__nav:hover {
  background: rgba(255,255,255,.85);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}
.bd-gallery__nav .icon { width: 20px; height: 20px; }
.bd-gallery__nav--prev { left: var(--s-4); }
.bd-gallery__nav--next { right: var(--s-4); }

/* Dots indicateur */
.bd-gallery__dots {
  position: absolute;
  bottom: var(--s-4); left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  border: 1px solid rgba(14,165,233,.10);
}
.bd-gallery__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background .2s, transform .2s, width .25s;
}
.bd-gallery__dot.is-active {
  background: var(--primary);
  width: 18px;
  border-radius: 4px;
}

/* Vignettes EN BAS — scroll horizontal style Grover */
.bd-gallery__thumbs {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 4px; /* fix : place pour ring focus + box-shadow active */
  scroll-snap-type: x mandatory;
}
.bd-gallery__thumbs::-webkit-scrollbar { display: none; }
/* D2b itération 2 : quand les vignettes débordent (classe posée par v2.js),
   fade à droite = indice visuel "il y en a d'autres" + cursor grab (drag-to-
   scroll géré par v2.js, la molette verticale scrolle aussi horizontalement). */
.bd-gallery__thumbs.has-overflow {
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
}
.bd-gallery__thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.bd-gallery__thumb,
.bd-gallery__thumb:focus,
.bd-gallery__thumb:active {
  outline: none;
  box-shadow: none;
  border: 2px solid transparent;
  -webkit-appearance: none;
  appearance: none;
}
.bd-gallery__thumb {
  flex-shrink: 0;
  /* D2b itération 2 : 96 → 76px — 7 vignettes tiennent plus souvent sans scroll,
     et quand ça déborde le drag-to-scroll (v2.js) + fade droit prennent le relais. */
  width: 76px; height: 76px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 100%);
  cursor: pointer;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms, opacity 200ms;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
  scroll-snap-align: start;
}
.bd-gallery__thumb .icon {
  width: 32px; height: 32px;
  color: rgba(14,165,233,.55);
  stroke-width: 1.5;
}
.bd-gallery__thumb:hover {
  opacity: 1;
  transform: scale(1.02);
  border-color: rgba(14, 165, 233, 0.30);
}
.bd-gallery__thumb.is-active {
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
  opacity: 1;
  transform: scale(1.05);
}
/* Focus a11y clavier UNIQUEMENT — utilise outline (sans casser le layout) */
.bd-gallery__thumb:focus-visible:not(:hover) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .bd-gallery__thumbs { gap: var(--s-2); margin-top: var(--s-3); }
  .bd-gallery__thumb { width: 60px; height: 60px; }
  .bd-gallery__thumb .icon { width: 22px; height: 22px; }
  .bd-gallery__thumb.is-active { transform: scale(1.04); }
}

/* Buy block — sticky desktop pendant scroll ------------------------- */
.bd-buy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  box-shadow: var(--shadow-2);
  position: relative;
  z-index: 5;
}
/* D2c polish : densité mobile — à 390px le padding s-8 mangeait ~17% de la
   largeur utile, tout paraissait à l'étroit. */
@media (max-width: 768px) {
  .bd-buy { padding: var(--s-4); }
}
@media (min-width: 1025px) {
  .bd-buy {
    padding: var(--s-10);
    position: sticky;
    top: 96px;
  }
}
.bd-buy > * + * { margin-top: var(--s-4); }

.bd-buy__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #FFFFFF;
  color: var(--primary-deep);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 1.5px solid var(--accent);
  box-shadow: 0 6px 16px rgba(20,184,166,.18);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
@media (max-width: 768px) {
  .bd-buy__badge { padding: 5px 12px; font-size: .6875rem; letter-spacing: .08em; gap: 6px; }
  .bd-buy__badge::before { width: 6px; height: 6px; }
}
.bd-buy__badge::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(20,184,166,.20);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(20,184,166,.20); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(20,184,166,.10); transform: scale(1.08); }
}
@media (hover:hover) {
  .bd-buy__badge:hover { transform: scale(1.04); }
}

.bd-buy__title {
  font-family: var(--font-display);
  /* D2b itération 2 : 44px → 36px max — le titre écrasait la colonne buy.
     Weight 800 + tracking serré = présence sans la taille. */
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.bd-buy__hook {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
  letter-spacing: -0.015em;
  margin-top: var(--s-2);
}
.bd-buy__rating-text {
  font-size: .8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.bd-buy__rating .stars { gap: 1px; }
.bd-buy__rating .icon-star { width: 16px; height: 16px; }
/* D2c polish : rating et titre plus compacts sur petit écran */
@media (max-width: 540px) {
  .bd-buy__rating .icon-star { width: 14px; height: 14px; }
  .bd-buy__rating-text { font-size: .75rem; }
  .bd-buy__title { font-size: 1.5rem; }
}
/* Badge CRM "offre personnalisée" — sticker VIP premium (D2b).
   Gradient rose→violet→orange + sparkles doré + shimmer lent : l'offre
   personnalisée doit se sentir exclusive dès le premier regard (validé
   Itshak, option a). Le dot pulsant du badge générique est retiré :
   l'icône sparkles porte seule la signalétique. */
.bd-buy__badge--crm {
  background: linear-gradient(120deg, #F43F5E 0%, #A855F7 52%, #F97316 125%);
  color: #FFFFFF;
  border: none;
  /* D2b itération 2 : compacté (padding/font/tracking réduits) + nowrap — le
     badge passait sur 2 lignes dans la colonne 45%. L'ellipsis du label
     (.bd-buy__badge-label) protège des noms de clients très longs. */
  padding: 8px 14px;
  font-size: .75rem;
  letter-spacing: .06em;
  white-space: nowrap;
  max-width: 100%;
  box-shadow:
    0 10px 26px rgba(168,85,247,.38),
    0 3px 10px rgba(244,63,94,.28);
  position: relative;
  overflow: hidden;
}
.bd-buy__badge--crm .bd-buy__badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
/* D2c polish : badge CRM en 2 niveaux — kicker discret ("OFFRE PERSONNALISÉE")
   + destinataire lisible ("pour Klarna"). À 390px la ligne unique tronquait
   le prénom, or c'est LUI le levier émotionnel du badge. */
.bd-buy__badge--crm .bd-buy__badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.bd-buy__badge--crm .bd-buy__badge-kicker {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .85;
  line-height: 1.1;
}
.bd-buy__badge--crm .bd-buy__badge-text .bd-buy__badge-label {
  font-size: .8125rem;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.15;
  max-width: 100%;
}
.bd-buy__badge--crm::before { display: none; }
.bd-buy__badge--crm .icon {
  width: 16px; height: 16px;
  color: #FDE68A;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
  position: relative;
  z-index: 1;
}
/* Shimmer : balayage lumineux lent, discret, premium */
.bd-buy__badge--crm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
  transform: translateX(-110%);
  animation: badgeShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShimmer {
  0%, 55%   { transform: translateX(-110%); }
  85%, 100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-buy__badge--crm::after { animation: none; display: none; }
}
.bd-crm-expires {
  font-size: .8125rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-pale);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-top: var(--s-2);
}
.bd-crm-expires .icon { width: 14px; height: 14px; color: var(--accent-dark); }
.bd-urgency {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--coral-soft);
  border: 1px solid rgba(255,107,92,.20);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-top: var(--s-2);
}
.bd-urgency .icon { width: 14px; height: 14px; color: var(--coral); }

/* SCARCITY TIMER (sous CTA buy block) ------------------------------- */
.scarcity-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid rgba(255, 107, 92, .25);
  border-radius: var(--r-md);
  margin-top: var(--s-3);
  font-size: .875rem;
  color: #7C2D12;
  position: relative;
  overflow: hidden;
}
.scarcity-timer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255,107,92,.10), transparent 60%);
  pointer-events: none;
}
.scarcity-timer__icon {
  display: inline-flex;
  width: 20px; height: 20px;
  color: var(--coral);
  flex-shrink: 0;
  position: relative;
}
.scarcity-timer__icon .icon { width: 20px; height: 20px; }
/* D2b : pulsation douce de l'horloge — renforce l'urgence sans agresser */
.scarcity-timer__icon { animation: clockPulse 2s ease-in-out infinite; }
@keyframes clockPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .scarcity-timer__icon { animation: none; }
}
.scarcity-timer__before,
.scarcity-timer__after {
  font-weight: 500;
  position: relative;
}
.scarcity-timer__clock {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--coral);
  letter-spacing: .02em;
  font-feature-settings: "tnum";
  position: relative;
  white-space: nowrap;
}
.scarcity-timer__clock.is-pulsing { animation: scarcityPulse 1s ease-in-out infinite; }
@keyframes scarcityPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}
.scarcity-timer.is-expired {
  background: var(--bg-cool);
  border-color: var(--border);
  color: var(--text-faint);
}
.scarcity-timer.is-expired .scarcity-timer__clock {
  color: var(--text-faint);
  animation: none;
}
@media (hover: hover) {
  .scarcity-timer:hover {
    box-shadow: 0 6px 16px rgba(255,107,92,.18);
  }
}
@media (max-width: 540px) {
  .scarcity-timer { font-size: .8125rem; padding: 10px 12px; }
  .scarcity-timer__clock { font-size: 1rem; }
}

/* CTA bloqué (mode lock à expiration) */
.bd-cta-row .btn--locked {
  background: var(--bg-cool);
  color: var(--text-faint);
  border: 1.5px solid var(--border);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Scarcity toast (mode extend) */
.scarcity-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-deep);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-3);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 9999;
}
.scarcity-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bd-buy__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: .9375rem;
  color: var(--text-muted);
}
.bd-buy__rating .stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.bd-buy__rating .icon-star {
  width: 18px; height: 18px;
  color: var(--gold);
  fill: var(--gold);
  stroke-width: 1.5;
}

/* Prix HERO --------------------------------------------------------- */
/* D2b : hiérarchie verticale — ligne promo (barré + badge) AU-DESSUS,
   prix final XXL en dessous, pill économie verte sous le prix. Le client
   lit : "avant / −25%" → "1 490 €" énorme → "vous économisez 500 €". */
.bd-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block: var(--s-5);
}
.bd-price__top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.bd-price__savings {
  /* D2c polish (épurage) : simple ligne verte, plus de pill fond+bordure —
     le buy block cumulait 4 éléments "badge" (sapin de Noël). L'info reste,
     le chrome disparaît ; les seuls héros couleur : prix gradient + CTA. */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #047857;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: 2px;
}
.bd-price__savings .icon { width: 14px; height: 14px; flex-shrink: 0; }
.bd-price__final {
  font-family: var(--font-display);
  /* D2b itération 2 : 56px noir → 44px max en gradient brand (rose→violet→
     turquoise sur VT, bleu→teal sur Logicarix) : le prix devient LE point
     couleur du buy block au lieu d'un pavé noir. */
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: 3px; /* évite que le clip rogne le € final */
  font-feature-settings: "tnum";
}
.bd-price__original {
  font-size: 1.125rem;
  color: var(--text-faint);
  text-decoration: line-through;
  font-feature-settings: "tnum";
  font-weight: 500;
}
.bd-price__discount {
  background: var(--coral);
  color: #fff;
  /* D2c polish : badge promo compacté (l'info accompagne le prix barré, elle
     ne rivalise plus avec le CTA) */
  padding: 3px 8px;
  border-radius: 5px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  align-self: center;
}

/* D2b : la row Klarna en rose signature (couleur officielle Klarna #FFA8CD).
   D2c polish (épurage) : allégée — fond/bordure moins saturés, texte plus
   petit et plus fin, pill 3× compactée. L'argument 3× reste repérable d'un
   coup d'œil sans rivaliser avec le prix ni le CTA. */
.bd-klarna {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--text-muted);
  background: linear-gradient(135deg, #FFF9FC 0%, #FFF2F8 100%);
  border: 1px solid rgba(255,168,205,.40);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.bd-klarna__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: #FFA8CD;
  color: #1F2937;
  border-radius: 5px;
  font-weight: 700;
  font-size: .6875rem;
  font-family: var(--font-display);
  letter-spacing: .04em;
}

.bd-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.bd-cta-row .btn--xl {
  position: relative;
  padding-block: 22px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-primary);
  transition: transform 200ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms;
}
@media (max-width: 768px) {
  .bd-cta-row .btn--xl {
    padding: 14px 20px;
    font-size: 1rem;
    min-height: 48px;
  }
}
.bd-cta-row .btn--xl .icon {
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
/* D2c : réassurance bien-physique sous le CTA (garantie + retour) —
   lève l'objection risque au moment exact du clic. */
.bd-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
}
.bd-cta-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bd-cta-trust__item .icon {
  width: 15px; height: 15px;
  color: var(--success);
}
.bd-cta-trust__sep { color: var(--text-faint); }
@media (hover:hover) {
  /* D2b : ring hover en color-mix sur --primary (suit le thème : bleu
     Logicarix, rose VirtualTeach) + glow diffus + flèche qui glisse. */
  .bd-cta-row .btn--xl:hover {
    transform: translateY(-3px);
    box-shadow:
      var(--shadow-primary),
      0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent),
      0 0 32px color-mix(in srgb, var(--primary) 30%, transparent);
  }
  .bd-cta-row .btn--xl:hover .icon { transform: translateX(4px); }
}

/* Logos paiement sous CTA ------------------------------------------- */
.bd-pay-strip {
  margin-top: var(--s-4);
  text-align: center;
}
.bd-pay-strip__label {
  font-size: .75rem;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: .02em;
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bd-pay-strip__label .icon {
  width: 14px; height: 14px;
  color: var(--text-faint);
}
.bd-pay-strip__logos {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.bd-pay-pill {
  height: 24px;
  padding: 0 10px;
  background: var(--bg-cool);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.bd-pay-pill--klarna {
  background: #FFA8CD;
  color: #1F2937;
  border-color: transparent;
}

.bd-bullets {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--s-4);
}
.bd-bullet {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: .9375rem;
  color: var(--text);
  font-weight: 500;
}
.bd-bullet .icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.icon--success { color: var(--success); }
.icon--primary { color: var(--primary); }

/* Trust bar — stat counters animés avec gradient fill + barre prog */
.bd-trust {
  background: linear-gradient(180deg, #F0F9FF 0%, #E0F2FE 50%, #F0F9FF 100%);
  border-block: 1px solid rgba(14,165,233,.10);
  padding-block: var(--s-12);
}
.bd-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  text-align: center;
}
@media (max-width: 768px) {
  .bd-trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-4); }
}
.bd-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
/* D2b : icônes plus présentes (52px), bord et ombre color-mix sur --primary
   (suivent le thème : bleu Logicarix, rose VirtualTeach) — la trust bar
   gagne en poids visuel sous le hero. */
.bd-trust__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-2);
  box-shadow:
    var(--shadow-1),
    0 8px 20px color-mix(in srgb, var(--primary) 14%, transparent);
}
.bd-trust__icon .icon {
  width: 26px; height: 26px;
  color: var(--primary);
}

/* Stat counter + barre de progression */
.stat-counter-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.stat-counter-bar {
  width: 64px;
  height: 3px;
  background: rgba(14,165,233,.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.stat-counter-bar__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--gradient-brand);
  border-radius: inherit;
  transition: width 1.6s cubic-bezier(.2,.7,.3,1);
}
.stat-counter-bar.is-active .stat-counter-bar__fill { width: 100%; }

/* Section title ------------------------------------------------------ */
.bd-section { padding-block: var(--s-16); }
@media (min-width: 1025px) { .bd-section { padding-block: var(--s-24); } }
/* D2c mobile : les sections gardaient leur padding desktop (64px) sur petit
   écran — trop aéré, la page paraissait vide et interminable au scroll. */
@media (max-width: 768px) {
  .bd-section { padding-block: var(--s-10); }
  .bd-section__head { margin-bottom: var(--s-8); }
}
.bd-section--cool { background: var(--bg-cool); }
.bd-section--sky  { background: var(--gradient-tint-sky); }
.bd-section--white{ background: #FFFFFF; }

.bd-section__head {
  text-align: center;
  margin-bottom: var(--s-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  max-width: 720px;
  margin-inline: auto;
}

/* Wave SVG dividers entre sections --------------------------------- */
.section-wave {
  display: block;
  width: 100%;
  height: 50px;
  position: relative;
  margin: 0;
}
@media (max-width: 768px) { .section-wave { height: 36px; } }

/* Pourquoi VR change tout — 3 piliers + "3×" massif ---------------- */
.bd-why-claim {
  text-align: center;
  margin-bottom: var(--s-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.bd-claim-3x {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
}
.bd-claim-3x::after {
  content: '';
  position: absolute;
  inset: -10% -8%;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14,165,233,.25), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.bd-claim-3x.is-bumped {
  animation: bumpScale .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bumpScale {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-claim-3x.is-bumped { animation: none; }
}

.bd-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px) {
  .bd-pillars { grid-template-columns: 1fr; }
}
.bd-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-10) var(--s-8);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms, border-color 250ms;
}
.bd-pillar::before {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: 100%; height: 4px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover) {
  .bd-pillar:hover::before { transform: scaleX(1); }
  .bd-pillar:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-3);
    border-color: var(--accent);
  }
}
.bd-pillar__icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  border-radius: var(--r-md);
  margin: 0 auto var(--s-5);
  box-shadow: var(--shadow-primary-soft);
}
.bd-pillar__icon .icon {
  width: 28px; height: 28px;
  color: #fff;
  stroke-width: 1.75;
}
.bd-pillar h3 {
  font-size: 1.375rem;
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.bd-pillar p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* What's in the box -------------------------------------------------- */
.bd-included {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-6);
  align-items: stretch;
}
/* Modifier --3col : force 3 colonnes max desktop, 2 tablet, 1 mobile.
   À utiliser quand le nombre de cards est fixe à 3 (sinon auto-fill par défaut). */
.bd-included--3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .bd-included--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bd-included--3col { grid-template-columns: 1fr; }
}
.bd-included__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms, border-color 250ms;
  /* flex column pour permettre CTA en bas via margin-top:auto */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  /* Cursor halo : custom property mises à jour par JS */
  --mouse-x: 50%;
  --mouse-y: 50%;
}
.bd-included__card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%; height: 4px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms cubic-bezier(.2,.7,.3,1);
  z-index: 1;
}
.bd-included__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 200px at var(--mouse-x) var(--mouse-y), rgba(14,165,233,.10), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 0;
}
.bd-included__card > * { position: relative; z-index: 2; }
@media (hover:hover) {
  .bd-included__card:hover::before { transform: scaleX(1); }
  .bd-included__card:hover::after  { opacity: 1; }
  .bd-included__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: var(--accent);
  }
}
.bd-included__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--gradient-brand);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-primary-soft);
}
.bd-included__icon-wrap .icon {
  width: 24px; height: 24px;
  color: #fff;
}
.bd-included__card h3 { margin-bottom: var(--s-2); letter-spacing: -0.015em; }
.bd-included__card p {
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: var(--s-4);
}
/* CTA "Voir les bundles →" : poussé en bas pour aligner sur toutes les cards
   quel que soit le volume de la description (le span CTA porte margin-top:auto). */
.bd-included__card > span:last-child {
  margin-top: auto;
}

/* 30 langues — grille drapeaux --------------------------------------- */
.bd-flag-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1024px) { .bd-flag-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .bd-flag-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .bd-flag-grid { grid-template-columns: repeat(2, 1fr); } }

.bd-flag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform 200ms cubic-bezier(.2,.7,.3,1), border-color 200ms, box-shadow 200ms;
  position: relative;
}
@media (hover:hover) {
  .bd-flag:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: var(--primary);
    box-shadow: var(--shadow-2);
  }
}
.bd-flag__img {
  width: 32px; height: 24px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15,23,42,.10);
}
.bd-flag__name {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
/* Reveal slide-in horizontal */
.bd-flag.reveal { transform: translateX(-16px); }
.bd-flag.reveal.is-visible { transform: translateX(0); }

/* VIVEZ L'EXPÉRIENCE — Aurora boréale + glassmorphism ---------------- */
.bd-experience {
  padding-block: var(--s-20);
  background:
    radial-gradient(ellipse 800px 500px at 80% 100%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(ellipse 600px 400px at 10% 0%, rgba(20,184,166,.10), transparent 60%),
    linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  color: var(--text-on-deep);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .bd-experience { padding-block: var(--s-24); }
}

/* Aurora floating layers */
.bd-experience::before,
.bd-experience::after {
  content: '';
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
}
.bd-experience::before {
  background:
    radial-gradient(ellipse 40% 40% at 25% 30%, rgba(14,165,233,.30), transparent 60%),
    radial-gradient(ellipse 35% 50% at 75% 20%, rgba(20,184,166,.22), transparent 60%);
  filter: blur(40px);
  animation: auroraSlide1 22s ease-in-out infinite;
}
.bd-experience::after {
  background:
    radial-gradient(ellipse 30% 50% at 60% 70%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(ellipse 30% 40% at 15% 85%, rgba(20,184,166,.18), transparent 60%);
  filter: blur(60px);
  animation: auroraSlide2 28s ease-in-out infinite;
}
@keyframes auroraSlide1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8%, -3%) scale(1.06); }
  66%      { transform: translate(-5%, 4%) scale(.95); }
}
@keyframes auroraSlide2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6%, 5%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bd-experience::before, .bd-experience::after { animation: none; }
}

.bd-experience > .container { position: relative; z-index: 1; }
.bd-experience .h-on-deep, .bd-experience h2 { color: #FFFFFF; }
.eyebrow--on-deep { color: var(--accent); }
.lede--on-deep { color: var(--text-on-deep); opacity: .85; }

.bd-experience__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--s-5);
}
.bd-experience__card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Glassmorphism : verre dépoli */
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform 350ms cubic-bezier(.2,.7,.3,1), box-shadow 350ms, border-color 350ms, background 350ms;
}
.bd-experience__card--feature {
  grid-row: span 2;
  aspect-ratio: 3 / 4;
}
@media (hover:hover) {
  .bd-experience__card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.08);
    border-color: rgba(20,184,166,.40);
    box-shadow:
      0 40px 80px -20px rgba(0,0,0,.6),
      0 0 0 1px rgba(20,184,166,.20),
      0 0 80px -10px rgba(20,184,166,.25),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
}
.bd-experience__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* D3-img : vraies photos des cards expérience — cover plein cadre, la
   caption gradient existante passe par-dessus (elle suit dans le DOM). */
.bd-experience__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover) {
  .bd-experience__card:hover .bd-experience__photo { transform: scale(1.04); }
}
.bd-experience__placeholder .icon {
  width: 80px; height: 80px;
  color: rgba(255,255,255,.55);
  stroke-width: 1.25;
  filter: drop-shadow(0 4px 16px rgba(20,184,166,.4));
}
.bd-experience__caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,.92) 60%);
  padding: var(--s-10) var(--s-6) var(--s-6);
  color: #FFFFFF;
}
.bd-experience__caption .eyebrow { font-size: .6875rem; margin-bottom: 4px; }
.bd-experience__caption h3 {
  color: #FFFFFF;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.bd-experience__card--feature .bd-experience__caption h3 { font-size: 1.5rem; }
.bd-experience__caption p {
  color: var(--text-on-deep);
  opacity: .85;
  font-size: .9375rem;
  margin-top: 6px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .bd-experience__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bd-experience__card--feature { grid-row: auto; aspect-ratio: 4/3; }
}

/* POURQUOI CHOISIR LOGICARIX — 4 piliers avec icônes animées hover -- */
.bd-why-us {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
@media (max-width: 1024px) { .bd-why-us { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .bd-why-us { grid-template-columns: 1fr; } }

.bd-why-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  text-align: center;
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms, border-color 250ms;
  position: relative;
  overflow: hidden;
}
@media (hover:hover) {
  .bd-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: var(--primary);
  }
}
.bd-why-card__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  margin: 0 auto var(--s-4);
  position: relative;
}
.bd-why-card__icon--blue {
  background: var(--primary-soft);
  color: var(--primary-deep);
  box-shadow: 0 6px 14px rgba(14,165,233,.18);
}
.bd-why-card__icon--teal {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: 0 6px 14px rgba(20,184,166,.18);
}
.bd-why-card__icon .icon {
  width: 26px; height: 26px;
  stroke-width: 1.75;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
/* Animations icônes au hover */
@media (hover:hover) {
  .bd-why-card:hover .bd-why-card__icon[data-anim="rocket"] .icon { animation: shake 0.6s ease-in-out; }
  .bd-why-card:hover .bd-why-card__icon[data-anim="brain"] .icon  { animation: pulse 1s ease-in-out; }
  .bd-why-card:hover .bd-why-card__icon[data-anim="globe"] .icon  { animation: spin 1.4s ease-in-out; }
  .bd-why-card:hover .bd-why-card__icon[data-anim="seal"] .icon   { animation: seal 0.7s ease-in-out; }
}
@keyframes shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-3px) rotate(-3deg); }
  40% { transform: translateY(-5px) rotate(2deg); }
  60% { transform: translateY(-2px) rotate(-2deg); }
  80% { transform: translateY(-1px) rotate(1deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes seal {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-4deg); }
  60%  { transform: scale(.98) rotate(2deg); }
  100% { transform: scale(1); }
}
.bd-why-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--s-2);
  letter-spacing: -0.015em;
}
.bd-why-card p {
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.55;
}

/* ILS L'UTILISENT AU QUOTIDIEN — cards review style ForChics --------- */
.bd-customers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px) { .bd-customers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bd-customers { grid-template-columns: 1fr; } }

.bd-customer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms;
  position: relative;
  overflow: hidden;
}
@media (hover:hover) {
  .bd-customer:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
  }
}
.bd-customer__avatar-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.bd-customer__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.bd-customer__avatar--c1 { background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); box-shadow: 0 8px 20px rgba(14,165,233,.30); }
.bd-customer__avatar--c2 { background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%); box-shadow: 0 8px 20px rgba(20,184,166,.30); }
.bd-customer__avatar--c3 { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); box-shadow: 0 8px 20px rgba(245,158,11,.30); }
.bd-customer__avatar--c4 { background: linear-gradient(135deg, #FF6B5C 0%, #FB7185 100%); box-shadow: 0 8px 20px rgba(255,107,92,.30); }
.bd-customer__avatar--c5 { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); box-shadow: 0 8px 20px rgba(99,102,241,.30); }
.bd-customer__avatar--c6 { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); box-shadow: 0 8px 20px rgba(236,72,153,.30); }

.bd-customer__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.bd-customer__rating .icon-star {
  width: 18px; height: 18px;
  color: var(--gold);
  fill: var(--gold);
  stroke-width: 1.5;
}
.bd-customer__rating .icon-star--empty {
  fill: none;
  color: var(--border-strong);
}
.bd-customer__rating .icon-star--half {
  color: var(--gold);
  fill: var(--gold);
  opacity: .55;
}
.bd-customer__quote {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bd-customer__name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
}
.bd-customer__pack {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid var(--accent-pale);
  border-radius: var(--r-pill);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  align-self: flex-start;
}

/* Features grid (illimitées) ---------------------------------------- */
.bd-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-6) var(--s-8);
}
.bd-feature {
  display: flex;
  gap: var(--s-4);
}
.bd-feature__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  border-radius: var(--r-md);
  border: 1px solid rgba(14,165,233,.15);
}
.bd-feature__icon .icon {
  width: 20px; height: 20px;
  color: var(--primary-deep);
}
.bd-feature h4 { margin-bottom: 4px; font-size: 1rem; letter-spacing: -0.01em; }
.bd-feature p {
  font-size: .9375rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Add-ons ------------------------------------------------------------ */
.bd-addons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.bd-addon {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  align-items: center;
}
.bd-addon__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.bd-addon__icon .icon {
  width: 20px; height: 20px;
  color: var(--accent-dark);
}
.bd-addon__body { flex: 1; }
.bd-addon__name { font-weight: 600; font-size: .9375rem; }
.bd-addon__provider {
  font-size: .8125rem;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Description longue ------------------------------------------------- */
.bd-desc { max-width: var(--container-narrow); margin-inline: auto; }
.bd-desc__lede {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: var(--s-6);
  font-weight: 600;
}
.bd-desc p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.bd-desc p + p { margin-top: var(--s-4); }

/* Specs techniques (accordion ouvert par défaut) -------------------- */
.bd-specs {
  max-width: var(--container-narrow);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.bd-specs > details + details { border-top: 1px solid var(--border); }
.bd-specs summary {
  padding: var(--s-5) var(--s-6);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 100ms;
}
.bd-specs summary::-webkit-details-marker { display: none; }
.bd-specs summary:hover { background: var(--bg-cool); }
.bd-specs summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--primary);
  font-weight: 400;
  transition: transform .25s;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.bd-specs details[open] summary::after { transform: rotate(45deg); }
.bd-specs__body {
  padding: 0 var(--s-6) var(--s-6);
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.65;
}
.bd-specs__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.bd-specs__table th, .bd-specs__table td {
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.bd-specs__table tr:last-child th,
.bd-specs__table tr:last-child td { border-bottom: 0; }
.bd-specs__table th { width: 40%; font-weight: 500; color: var(--text-faint); }
.bd-specs__table td {
  font-family: var(--font-mono);
  color: var(--text);
  font-feature-settings: "tnum";
}

/* Comparatif desktop ------------------------------------------------ */
.bd-compare-wrap {
  max-width: var(--container);
  margin-inline: auto;
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.bd-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 720px;
}
.bd-compare th, .bd-compare td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.bd-compare thead th {
  background: var(--bg-cool);
  font-weight: 600;
  color: var(--text);
  position: sticky; top: 0;
}
.bd-compare__pack-name {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.bd-compare__pack-price {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
}
.bd-compare__pack-current { background: var(--primary-soft) !important; }
.bd-compare__pack-current .bd-compare__pack-name { color: var(--primary-deep); }
.bd-compare__pack-current .bd-compare__pack-price { color: var(--primary-deep); }
.bd-compare__feature {
  width: 28%;
  color: var(--text-muted);
  font-weight: 500;
}
.bd-compare__cell--current {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 600;
}
.bd-compare__cta-cell { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.bd-compare__current-tag {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gradient-brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Comparatif mobile — cards empilées (sous 768px) ------------------- */
.bd-compare-cards { display: none; }

@media (max-width: 768px) {
  .bd-compare-wrap { display: none; }
  .bd-compare-cards {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .bd-compare-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    position: relative;
    box-shadow: var(--shadow-1);
  }
  .bd-compare-card--current {
    border-color: var(--primary);
    box-shadow: var(--shadow-primary-soft);
  }
  .bd-compare-card__badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--gradient-brand);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 6px 14px rgba(14,165,233,.30);
  }
  .bd-compare-card__name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .bd-compare-card__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--primary-deep);
    margin-block: var(--s-2) var(--s-4);
  }
  .bd-compare-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding-block: var(--s-4);
    border-block: 1px solid var(--border);
  }
  .bd-compare-card__list li {
    display: flex; align-items: center; gap: var(--s-3);
    font-size: .9375rem;
    color: var(--text);
  }
  .bd-compare-card__list .icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
  }
}

/* FAQ -------------------------------------------------------------- */
.bd-faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.bd-faq__item { border-bottom: 1px solid var(--border); }
.bd-faq__item:last-child { border-bottom: 0; }
.bd-faq__q {
  width: 100%;
  padding: var(--s-5) var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  letter-spacing: -0.01em;
  transition: background 100ms;
}
.bd-faq__q:hover { background: var(--bg-cool); }
.bd-faq__chevron {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--text-faint);
  transition: transform .25s, color .15s;
}
.bd-faq__q[aria-expanded="true"] .bd-faq__chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.bd-faq__a {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.7;
}

/* CTA FINAL ÉCLATANTE — gradient teal/bleu --------------------------- */
.bd-cta-final {
  padding-block: var(--s-20);
  background: linear-gradient(135deg, #0EA5E9 0%, #14B8A6 100%);
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bd-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 30% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(ellipse 500px 300px at 70% 100%, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
}
.bd-cta-final__h {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #FFFFFF;
  position: relative;
  margin-bottom: var(--s-3);
}
.bd-cta-final__sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,.92);
  margin-bottom: var(--s-8);
  position: relative;
  max-width: 56ch;
  margin-inline: auto;
}
.bd-cta-final__actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.bd-cta-final__micro {
  margin-top: var(--s-5);
  font-size: .8125rem;
  color: rgba(255,255,255,.78);
  position: relative;
}
.btn--white {
  background: #FFFFFF;
  color: var(--primary-deep);
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.10);
  font-weight: 700;
}
@media (hover:hover) {
  .btn--white:hover {
    transform: translateY(-3px);
    color: var(--primary-deep);
    background: #FFFFFF;
    box-shadow: 0 24px 48px rgba(0,0,0,.22), 0 8px 16px rgba(0,0,0,.12), 0 0 0 4px rgba(255,255,255,.18);
  }
}

/* Comparatif autonome — 3 cards style Apple/Anthropic ---------------- */
.bd-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  align-items: stretch;
  position: relative;
}
@media (max-width: 1024px) { .bd-pack-grid { grid-template-columns: 1fr; gap: var(--s-5); } }

.bd-pack-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms, border-color 250ms;
  /* Container : overflow:visible pour le badge en negative top */
  overflow: visible;
}
/* Wrapper interne qui contient le visuel décoratif (clipping safe) */
.bd-pack-card__inner {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  padding: var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  flex: 1;
}
@media (hover:hover) {
  .bd-pack-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
  }
}
.bd-pack-card.is-popular {
  border-color: var(--primary);
  box-shadow: var(--shadow-primary-soft);
}
@media (min-width: 1025px) {
  .bd-pack-card.is-popular { transform: translateY(-12px); }
  .bd-pack-card.is-popular .bd-pack-card__inner {
    padding-top: calc(var(--s-8) + 28px); /* place pour le badge en negative top */
  }
  @media (hover:hover) {
    .bd-pack-card.is-popular:hover { transform: translateY(-16px); }
  }
}
/* Barre top gradient — ATTACHÉE au wrapper interne (clip safe) */
.bd-pack-card.is-popular .bd-pack-card__inner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gradient-brand);
}
.bd-pack-card.is-current {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
/* Badge "Le plus choisi" — INSIDE en mobile, ABSOLUTE en desktop */
.bd-pack-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--gradient-brand);
  color: #FFFFFF;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  margin-bottom: var(--s-3);
  box-shadow: 0 4px 12px rgba(14,165,233,.25);
}
@media (min-width: 1025px) {
  .bd-pack-card__badge {
    /* Desktop : déborde en negative top, sortant de la card */
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    padding: 8px 18px;
    font-size: .6875rem;
    letter-spacing: .1em;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(14,165,233,.30);
  }
}
.bd-pack-card__head { text-align: left; }
.bd-pack-card__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 4px;
}
.bd-pack-card__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-feature-settings: "tnum";
  line-height: 1;
}
.bd-pack-card--essential .bd-pack-card__name { color: var(--primary-deep); }
.bd-pack-card--plus .bd-pack-card__name { color: var(--primary-deep); }
.bd-pack-card--ultra .bd-pack-card__name { color: var(--coral); }
.bd-pack-card__tagline {
  margin-top: 6px;
  font-size: .9375rem;
  color: var(--text-muted);
  font-style: italic;
}
.bd-pack-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-block: 1px solid var(--border);
  margin: 0;
}
.bd-pack-card__list li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: .9375rem;
  color: var(--text);
}
.bd-pack-card__list .icon { width: 18px; height: 18px; flex-shrink: 0; }

.bd-pack-card__cta {
  font-weight: 700;
  letter-spacing: -0.005em;
  padding-block: 14px;
}
.bd-pack-card--essential .bd-pack-card__cta {
  background: var(--surface);
  color: var(--primary-deep);
  border: 1.5px solid var(--primary);
}
.bd-pack-card--essential .bd-pack-card__cta:hover {
  background: var(--primary-soft);
  transform: translateY(-1px);
}
.bd-pack-card--plus .bd-pack-card__cta {
  background: var(--gradient-brand);
  color: #FFFFFF;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-primary-soft);
}
.bd-pack-card--plus .bd-pack-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}
.bd-pack-card--ultra .bd-pack-card__cta {
  background: linear-gradient(135deg, #FF6B5C 0%, #FB7185 100%);
  color: #FFFFFF;
  border: 1.5px solid transparent;
  box-shadow: 0 12px 28px rgba(255,107,92,.25);
}
.bd-pack-card--ultra .bd-pack-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(255,107,92,.35);
}
.bd-pack-card__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: .9375rem;
}
.bd-pack-card__current .icon { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .bd-pack-card.is-popular { order: -1; }
  .bd-pack-card { padding: var(--s-6) var(--s-5); }
}

/* COMMENT ÇA MARCHE — 4 étapes avec connecteurs ---------------------- */
.bd-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  position: relative;
  counter-reset: step;
}
@media (max-width: 900px) {
  .bd-steps { grid-template-columns: 1fr; gap: var(--s-4); }
}
.bd-steps::before {
  content: '';
  position: absolute;
  top: 36px; left: 12.5%;
  width: 75%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--border-strong) 5%, var(--border-strong) 95%, transparent 100%);
  z-index: 0;
}
@media (max-width: 900px) { .bd-steps::before { display: none; } }

.bd-step {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  transition: transform 250ms cubic-bezier(.2,.7,.3,1), box-shadow 250ms, border-color 250ms;
}
@media (hover:hover) {
  .bd-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
    border-color: var(--accent);
  }
}
.bd-step__num {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.bd-step__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  border-radius: 50%;
  margin: var(--s-2) 0 var(--s-3);
  box-shadow: var(--shadow-primary-soft);
}
.bd-step__icon .icon {
  width: 24px; height: 24px;
  color: #FFFFFF;
}
.bd-step h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-1);
}
.bd-step p {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* PHOTO LIFESTYLE 16:5 ---------------------------------------------- */
.bd-lifestyle-section {
  padding-block: var(--s-12);
  background: var(--bg-cool);
}
.bd-lifestyle {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 30% 50%, rgba(14,165,233,.30), transparent 70%),
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(20,184,166,.22), transparent 70%),
    linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F766E 100%);
  box-shadow: var(--shadow-3);
}
@media (max-width: 768px) { .bd-lifestyle { aspect-ratio: 4 / 5; } }
.bd-lifestyle__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* D3-img : vraie photo lifestyle 16:5 — cover, caption gradient par-dessus. */
.bd-lifestyle__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bd-lifestyle__placeholder .icon {
  width: 120px; height: 120px;
  color: rgba(255,255,255,.50);
  stroke-width: 1.25;
  filter: drop-shadow(0 8px 24px rgba(20,184,166,.40));
}
.bd-lifestyle__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-10) var(--s-8) var(--s-6);
  background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,.80) 60%);
  color: #FFFFFF;
  text-align: center;
}
.bd-lifestyle__caption .eyebrow { color: var(--accent); font-size: .6875rem; }
.bd-lifestyle__caption p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 6px;
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.4;
}

/* Features grid adaptatif ------------------------------------------- */
.bd-features--few  { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; }
.bd-features--med  { grid-template-columns: repeat(3, 1fr); }
.bd-features--many { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .bd-features--med, .bd-features--many { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bd-features--few, .bd-features--med, .bd-features--many { grid-template-columns: 1fr; }
}

/* BOUTON RETOUR EN HAUT --------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--primary-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s, background .2s;
  z-index: 80;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--primary-soft);
  box-shadow: var(--shadow-3);
  transform: translateY(-3px);
}
.back-to-top .icon {
  width: 22px; height: 22px;
  transform: rotate(180deg);
}
@media (max-width: 900px) {
  .back-to-top {
    bottom: calc(84px + 16px);
    right: 16px;
    width: 44px; height: 44px;
  }
  body.has-sticky-cta .back-to-top { bottom: calc(84px + 16px); }
}

/* ─────────── DÉBLOQUEZ-VOUS À L'ORAL (module 04b, D3) ───────── */
/* Bloc de conversion clé : photo immersive + 4 arguments anti-peur de
   parler. Layout 2 colonnes desktop, empilé mobile (photo d'abord). */
.bd-unlock {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: var(--s-12);
  align-items: center;
}
@media (max-width: 960px) {
  .bd-unlock { grid-template-columns: 1fr; gap: var(--s-6); }
}
.bd-unlock__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 30% 30%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(20,184,166,.14), transparent 60%),
    linear-gradient(135deg, #F0F9FF 0%, #ECFDF5 100%);
  box-shadow: var(--shadow-3);
}
@media (max-width: 960px) {
  .bd-unlock__media { aspect-ratio: 16 / 11; }
}
.bd-unlock__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bd-unlock__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bd-unlock__placeholder .icon {
  width: 90px; height: 90px;
  color: rgba(14,165,233,.50);
  stroke-width: 1.25;
}
.bd-unlock__content .eyebrow { display: inline-block; margin-bottom: var(--s-2); }
.bd-unlock__content h2 { margin-bottom: var(--s-3); }
.bd-unlock__lede {
  margin-bottom: var(--s-6);
  font-weight: 600;
  color: var(--text);
}
.bd-unlock__points {
  list-style: none;
  display: grid;
  gap: var(--s-5);
  margin: 0; padding: 0;
}
.bd-unlock__point {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.bd-unlock__point-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-primary-soft);
}
.bd-unlock__point-icon .icon { width: 20px; height: 20px; color: #fff; }
.bd-unlock__point h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.bd-unlock__point p {
  font-size: .9375rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─────────── FOOTER PARTNER — allégé low-click (D3) ────────── */
/* Réutilise le fond/spacing de .footer-v2 ; supprime toute navigation
   produit. Liens légaux inline discrets : présents (obligation) mais sans
   appel au clic — objectif taux de transfo (demande Itshak). */
.footer-partner { padding-block: var(--s-10) var(--s-6); }
.footer-partner__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.footer-partner__logo { display: block; height: 24px; width: auto; opacity: .95; }
.footer-partner__baseline {
  font-size: .875rem;
  color: var(--text-on-deep);
  opacity: .8;
  margin: 0;
}
.footer-partner__merchant {
  font-size: .8125rem;
  color: var(--text-on-deep-faint);
  margin: 0 0 var(--s-4);
  /* Une seule ligne fluide qui wrappe naturellement — plus de coupure
     artificielle en plein milieu (bug repéré Itshak). */
  max-width: none;
}
.footer-partner__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--text-on-deep-faint);
  margin-bottom: var(--s-6);
}
.footer-partner__links a {
  color: var(--text-on-deep-faint);
  text-decoration: none;
  transition: color .2s;
}
.footer-partner__links a:hover { color: var(--text-on-deep); text-decoration: underline; }
.footer-partner .footer-v2__bottom { margin-top: 0; }

/* ─────────── PAGE MERCI (suite) ─────────────────────── */
.merci-hero {
  position: relative;
  padding-block: var(--s-16) var(--s-12);
  background:
    radial-gradient(ellipse 600px 400px at 50% 0%, rgba(20,184,166,.18), transparent 60%),
    #FFFFFF;
  overflow: hidden;
}
.merci-icon {
  width: 96px; height: 96px;
  /* display:flex (PAS inline-flex) : en inline, l'icône restait sur la même
     ligne que l'eyebrow "Confirmation de commande" (bug repéré Itshak).
     Block flex + margin auto = icône centrée SEULE au-dessus du texte. */
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 50%;
  margin: 0 auto var(--s-5);
  animation: scaleIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.merci-icon .icon {
  width: 56px; height: 56px;
  color: var(--success);
  stroke-width: 2;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Confetti */
.merci-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.merci-confetti__piece {
  position: absolute;
  top: -20px;
  left: calc(5% + var(--i, 0) * 6.5%);
  width: 8px; height: 14px;
  background: var(--c, var(--primary));
  opacity: 0;
  border-radius: 2px;
  animation: confetti 3.2s ease-out calc(var(--i, 0) * 0.12s) forwards;
}
@keyframes confetti {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(80vh) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .merci-confetti__piece { display: none; }
}

.merci-recap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  box-shadow: var(--shadow-1);
}
.merci-recap h2 {
  font-size: 1.25rem;
  margin-bottom: var(--s-5);
  letter-spacing: -0.02em;
}
.merci-recap__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 540px) { .merci-recap__list { grid-template-columns: 1fr; } }
.merci-recap__list > div {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.merci-recap__list dt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.merci-recap__list dd { font-size: 1rem; font-weight: 600; color: var(--text); }
/* D2c bis : mention discrète du moyen de paiement sous le total ("Réglé via
   Klarna") — rassure sans détailler l'échéancier. */
.merci-recap__pm {
  display: block;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 2px;
}

.merci-stepper {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 768px) { .merci-stepper { grid-template-columns: 1fr; } }
.merci-stepper::before {
  content: '';
  position: absolute;
  top: 18px; left: 12.5%;
  width: 75%; height: 2px;
  background: var(--border-strong);
  z-index: 0;
}
@media (max-width: 768px) { .merci-stepper::before { display: none; } }
.merci-stepper__step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.merci-stepper__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.merci-stepper__step.is-active .merci-stepper__dot {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: var(--shadow-primary-soft);
}
.merci-stepper__step.is-active .merci-stepper__dot .icon { width: 18px; height: 18px; }
.merci-stepper__step span {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
}
.merci-stepper__step.is-active span { color: var(--text); font-weight: 600; }

.merci-next {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px) { .merci-next { grid-template-columns: 1fr; } }
.merci-next__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.merci-next__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft);
  border-radius: var(--r-md);
}
.merci-next__icon .icon { width: 22px; height: 22px; color: var(--primary-deep); }
.merci-next__card h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }
.merci-next__card p { font-size: .9375rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.merci-next__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary-deep);
  margin-top: var(--s-2);
}
.merci-next__cta .icon { width: 16px; height: 16px; transition: transform .2s; }
.merci-next__cta:hover .icon { transform: translateX(3px); }
.merci-next__cta--soon {
  color: var(--text-faint);
  font-style: italic;
}

/* ────── ORDER CONFIRMATION (D2c — refonte page merci) ──────────── */
.merci-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: var(--s-3);
  color: var(--text);
}
.merci-lede {
  margin: var(--s-3) auto 0;
  max-width: 56ch;
}

/* Callout message clé : appel conseiller (partner) ou email (Logicarix).
   C'est LE message de la page — card gradient doux themé, icône ronde. */
.merci-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  max-width: 560px;
  margin: var(--s-8) auto 0;
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 7%, #FFFFFF) 0%,
    color-mix(in srgb, var(--accent) 7%, #FFFFFF) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 10%, transparent);
  text-align: left;
}
.merci-callout__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  border-radius: 50%;
  box-shadow: var(--shadow-primary-soft);
}
.merci-callout__icon .icon {
  width: 22px; height: 22px;
  color: #FFFFFF;
}
.merci-callout p {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--text);
  margin: 0;
}
@media (max-width: 540px) {
  .merci-callout {
    flex-direction: column;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-4);
  }
}

.merci-recap-section {
  background: var(--bg-cool);
  padding-block: var(--s-10) var(--s-12);
}

.merci-back {
  text-align: center;
  margin-top: var(--s-6);
}
.merci-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .2s;
}
.merci-back a:hover { color: var(--primary-deep); }
.merci-back .icon-flip { transform: rotate(180deg); width: 16px; height: 16px; }

/* Footer dédié confirmation : sobre, légal, sans navigation (funnel fermé
   post-paiement). Le © Logicarix Ltd reste le merchant légal (Klarna). */
.confirmation-footer {
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  padding-block: var(--s-8);
  position: relative;
}
.confirmation-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--gradient-brand);
  opacity: .45;
}
.confirmation-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.confirmation-footer__logo {
  display: block;
  height: 22px;
  width: auto;
  opacity: .9;
}
.confirmation-footer__legal {
  font-size: .8125rem;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.confirmation-footer__legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.confirmation-footer__legal a:hover { color: var(--primary-deep); text-decoration: underline; }
.confirmation-footer__sep { color: var(--border-strong); }

/* Sticky bottom CTA mobile — enrichi (rating + slide-up + glow) ---- */
.bd-sticky {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
  display: none;
  align-items: center;
  gap: var(--s-3);
  z-index: 90;
  box-shadow: 0 -8px 24px rgba(15,23,42,.06);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.bd-sticky.is-visible { transform: translateY(0); }
.bd-sticky__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bd-sticky__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text-muted);
}
.bd-sticky__top .icon-star {
  width: 12px; height: 12px;
  color: var(--gold);
  fill: var(--gold);
}
.bd-sticky__name { font-weight: 600; letter-spacing: .01em; }
.bd-sticky__price {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  font-feature-settings: "tnum";
  display: inline-flex;
  /* D2c : colonne — prix barré en petit AU-DESSUS du prix final (rappel
     de la promo dans le sticky mobile, demande Itshak). */
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.bd-sticky__price-original {
  font-size: .6875rem;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: line-through;
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.bd-sticky__price-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}
.bd-sticky__klarna {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.bd-sticky__cta {
  white-space: nowrap;
  padding: 12px 18px;
  font-size: .875rem;
  min-height: 44px;
  position: relative;
  animation: stickyPulse 5s ease-in-out 3s infinite;
}
@keyframes stickyPulse {
  0%, 92%, 100% { box-shadow: var(--shadow-primary-soft); }
  96% { box-shadow: var(--shadow-primary), 0 0 0 6px rgba(14,165,233,.18); }
}

@media (max-width: 900px) {
  .bd-sticky { display: flex; }
  body.has-sticky-cta { padding-bottom: 84px; }
}

/* CONTACT PAGE ------------------------------------------------------ */
.contact-hero {
  padding-block: var(--s-12) var(--s-12);
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(14,165,233,.12), transparent 60%),
    #FFFFFF;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.contact-hero::after {
  content: '';
  position: absolute;
  inset: auto 50% 20% auto;
  width: 280px; height: 100px;
  transform: translateX(50%);
  background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(20,184,166,.20), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact-hero > * { position: relative; z-index: 1; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-10);
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (min-width: 1025px) { .contact-form { padding: var(--s-10); } }
.form-row { display: grid; gap: var(--s-4); }
.form-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row--2 { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.form-field select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
}
.contact-form .btn--xl .icon {
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover) {
  .contact-form .btn--xl:hover .icon { transform: translateX(4px); }
}
.contact-form__sub {
  font-size: .8125rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 4px;
}
.hp-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-alert {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.20);
  color: #B91C1C;
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: .9375rem;
  margin-bottom: var(--s-5);
}
.contact-success {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-12) var(--s-8);
  text-align: center;
  box-shadow: var(--shadow-1);
}
.contact-success__icon {
  width: 80px; height: 80px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 50%;
  margin-bottom: var(--s-5);
}
.contact-success__icon .icon {
  width: 56px; height: 56px;
  color: var(--success);
  stroke-width: 2;
}
.contact-success h2 { font-size: 1.75rem; margin-bottom: var(--s-3); letter-spacing: -0.025em; }
.contact-success p {
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 48ch;
  margin: 0 auto var(--s-6);
  line-height: 1.6;
}

/* Cards réassurance latérales contact */
.contact-reassure {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.contact-reassure__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  transition: transform .2s, box-shadow .2s;
}
@media (hover:hover) {
  .contact-reassure__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
}
.contact-reassure__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--primary-soft);
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-reassure__icon .icon {
  width: 22px; height: 22px;
  color: var(--primary-deep);
}
.contact-reassure h3 { font-size: 1rem; margin-bottom: 4px; letter-spacing: -0.015em; }
.contact-reassure p {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
}