/* ==========================================================================
   RUHI COLLECTION — Design system (blanc & or, luxe, moderne)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --black: #0a0a0a;
  --black-soft: #141210;
  --white: #ffffff;
  --cream: #faf7f2;
  --cream-dark: #f1eadd;
  --gold: #c6a15b;
  --gold-light: #e6cd94;
  --gold-dark: #9c7c3d;
  --ink: #221f1a;
  --ink-soft: #55504a;
  --line: #e7ddc9;
  --success: #4b7f52;
  --error: #a83a3a;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  --container: 1280px;
  --radius: 2px;
  --shadow-soft: 0 10px 30px rgba(10, 10, 10, 0.06);
  --shadow-card: 0 6px 24px rgba(10, 10, 10, 0.08);
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}
/* Arabic : ni Playfair Display ni Jost ne couvrent les glyphes arabes —
   police dédiée chargée dynamiquement par i18n.js uniquement si nécessaire. */
html[dir="rtl"] {
  --font-display: 'Cairo', Georgia, serif;
  --font-body: 'Cairo', 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a {
  color: inherit; text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
ul { list-style: none; margin: 0; padding: 0; }
button {
  font-family: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--black);
  margin: 0 0 0.6em;
  letter-spacing: 0.01em;
}
p { margin: 0 0 1em; }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .container { padding: 0 18px; }
}

/* ---------- Utility ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.9em;
}
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
/* Bandeaux plein écran avec photo de fond (promo d'ouverture, teaser Ruhi
   Journey) — même recette que .hero (dégradé sombre + photo), en plus
   compact : ces bandeaux n'ont qu'un titre court + une ligne à porter,
   les traiter comme un gros pavé plein-couleur les faisait paraître vides
   et disproportionnés par rapport à leur contenu. */
.photo-banner {
  position: relative; display: flex; align-items: center;
  min-height: 300px; padding: 46px 0;
  background-color: var(--black); background-size: cover; background-repeat: no-repeat;
}
.photo-banner__inner { position: relative; max-width: 460px; }
.photo-banner .eyebrow { color: var(--gold-light); }
.photo-banner h2 { color: var(--white); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; margin: 0 0 0.45em; }
.photo-banner p { color: var(--cream-dark); font-size: 0.98rem; margin: 0 0 1.4em; }

.promo-banner {
  background-image:
    linear-gradient(100deg, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.72) 42%, rgba(10,10,10,0.22) 72%, rgba(10,10,10,0.06) 100%),
    url('/assets/img/categories/burkinis.jpg');
  /* Le visage du modèle est situé assez bas dans la photo source (portrait
     plein cadre) — un pourcentage trop faible coupait la tête. */
  background-position: center 30%;
}
.promo-banner__code {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--white); border-radius: 999px; padding: 8px 8px 8px 24px;
}
.promo-banner__code span {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--black);
}
.promo-banner__code button {
  background: var(--gold); color: var(--black); border: none; border-radius: 999px;
  padding: 10px 22px; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; font-weight: 600; transition: background 200ms ease, color 200ms ease;
}
.promo-banner__code button:hover { background: var(--gold-dark); color: var(--white); }

.journey-teaser {
  background-image:
    linear-gradient(100deg, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.72) 42%, rgba(10,10,10,0.22) 72%, rgba(10,10,10,0.06) 100%),
    url('/assets/img/categories/hijabs-voiles.jpg');
  /* Le visage du modèle est centré assez bas dans la photo source — un
     pourcentage trop faible coupait la tête au niveau du front/des yeux. */
  background-position: center 38%;
}

@media (max-width: 700px) {
  .photo-banner { min-height: 0; padding: 42px 0; text-align: center; }
  .photo-banner__inner { max-width: 100%; }
  .promo-banner {
    background-image: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.82) 100%), url('/assets/img/categories/burkinis.jpg');
    background-position: center 30%;
  }
  .journey-teaser {
    background-image: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.82) 100%), url('/assets/img/categories/hijabs-voiles.jpg');
    background-position: center 38%;
  }
  .promo-banner__code { flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius); margin: 0 auto; }
}

.section--cream { background: var(--cream); }
.section--black { background: var(--black); color: var(--cream); }
.section--black h1, .section--black h2, .section--black h3 { color: var(--white); }
.text-center { text-align: center; }
.divider-orn {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 22px auto;
  position: relative;
}
.divider-orn::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--black); color: var(--gold-light);
  padding: 10px 16px; z-index: 999; transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 34px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--gold {
  background: var(--black);
  color: var(--gold-light);
  border-color: var(--black);
}
.btn--outline {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--outline-light {
  background: transparent;
  color: var(--gold-light);
  border-color: var(--gold-light);
}
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
  .btn--outline:hover { background: var(--black); color: var(--gold-light); }
  .btn--outline-light:hover { background: var(--gold-light); color: var(--black); }
}
.btn--gold:active { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--outline:active { background: var(--black); color: var(--gold-light); }
.btn--outline-light:active { background: var(--gold-light); color: var(--black); }
/* Or plein — même couleur que le bouton "Copier le code" des bandeaux
   photo (.btn--gold, malgré son nom, est noir/texte doré ; celui-ci est le
   vrai bouton doré plein utilisé pour les CTA sur fond sombre). */
.btn--gold-solid { background: var(--gold); color: var(--black); border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .btn--gold-solid:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
}
.btn--gold-solid:active { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--sm { padding: 10px 20px; font-size: 0.7rem; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--black);
  color: var(--cream-dark);
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
}
.topbar strong { color: var(--gold-light); }

/* ---------- Header ---------- */
.site-header {
  background: var(--black);
  color: var(--cream);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 18px rgba(0,0,0,0.18);
}
.header-logo-row {
  display: flex;
  justify-content: center;
  padding: 18px 0 10px;
}
.header-logo-row img { height: 58px; width: auto; }
.header-nav-row {
  border-top: 1px solid rgba(230, 205, 148, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  gap: 16px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  position: relative;
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.82);
  padding: 9px 15px;
  transition: color 220ms ease;
  white-space: nowrap;
}
/* Séparateurs fins entre les liens plutôt qu'un simple espacement — lecture
   plus structurée façon menu de maison de mode — et soulignement animé
   (se déploie depuis le centre) au lieu d'un trait qui apparaît/disparaît
   d'un coup, pour une interaction plus soignée. */
.nav-links a:not(:last-child)::before {
  content: '';
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: rgba(230, 205, 148, 0.18);
}
.nav-links a::after {
  content: '';
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 0; height: 1px; background: var(--gold);
  transition: width 280ms cubic-bezier(.4,0,.2,1);
}
.nav-links a.active { color: var(--gold-light); }
.nav-links a.active::after { width: calc(100% - 30px); }
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--gold-light); }
  .nav-links a:hover::after { width: calc(100% - 30px); }
}
.header-icons { display: flex; align-items: center; gap: 6px; }
.lang-switcher { position: relative; }
.js-lang-toggle {
  background: none; border: none; color: var(--cream);
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; height: 44px; padding: 0 6px; font-size: 0.72rem; letter-spacing: 0.04em;
}
@media (hover: hover) and (pointer: fine) {
  .js-lang-toggle:hover { color: var(--gold-light); }
}
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
  background: var(--white); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease; z-index: 300;
}
.lang-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Spécificité ".lang-menu .js-lang-option" nécessaire : ces boutons sont
   imbriqués dans .header-icons, dont la règle ".header-icons button" (plus
   spécifique qu'une simple classe) forçait un texte crème quasi invisible
   sur le fond blanc du menu déroulant — Anglais/Arabe étaient présents mais
   illisibles, seul le français (via .is-active, encore plus spécifique)
   restait visible. */
.lang-menu .js-lang-option {
  background: none; border: none; text-align: left; padding: 9px 12px; border-radius: 4px;
  font-size: 0.86rem; color: var(--ink); width: 100%;
}
.lang-menu .js-lang-option.is-active { background: var(--cream); color: var(--gold-dark); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .lang-menu .js-lang-option:hover { background: var(--cream); }
}
html[dir="rtl"] .lang-menu { right: auto; left: 0; text-align: right; }
html[dir="rtl"] .js-lang-option { text-align: right; }
.header-icons button, .header-icons a {
  background: none; border: none; color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  transition: color var(--transition);
  width: 44px; height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .header-icons button:hover, .header-icons a:hover { color: var(--gold-light); }
}
.header-icons svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 2px; right: 2px;
  background: var(--gold); color: var(--black);
  font-size: 0.62rem; font-weight: 600;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-toggle {
  display: none; background: none; border: none; color: var(--cream);
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 860px) {
  .header-logo-row img { height: 46px; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
    background: var(--black); flex-direction: column; justify-content: flex-start;
    align-items: flex-start;
    padding: max(28px, env(safe-area-inset-top)) 32px max(32px, env(safe-area-inset-bottom));
    gap: 22px;
    transform: translateX(100%); transition: transform var(--transition);
    z-index: 250;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .nav-links a { padding: 8px 2px; font-size: 0.92rem; }
  .nav-links a::before { display: none; } /* séparateur pensé pour une rangée horizontale, pas pour le tiroir mobile empilé verticalement */
  .nav-links a::after { bottom: -2px; }
  .nav-links.is-open { transform: translateX(0); }
  html[dir="rtl"] .nav-links { inset: 0 auto 0 0; align-items: flex-end; transform: translateX(-100%); }
  html[dir="rtl"] .nav-links.is-open { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
    /* Doit rester SOUS 200 (z-index de .site-header) : .site-header a son
       propre position+z-index, donc crée un contexte d'empilement — tout ce
       qui est à l'intérieur (dont .nav-links à 250) reste plafonné à ce
       niveau face à un élément extérieur comme celui-ci. Une valeur ici
       supérieure à 200 passerait par-dessus tout le header, y compris le
       menu, et intercepterait tous les clics sur les liens malgré leur
       propre z-index plus élevé. */
    z-index: 150;
  }
  .nav-overlay.is-open { opacity: 1; pointer-events: auto; }
  .nav-close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: -10px -10px 10px auto;
    background: none; border: none; color: var(--gold-light);
  }
}

/* ---------- Habillage du contenu qui suit le splash ---------- */
.site-content-wrap {
  position: relative;
  z-index: 2;
  background: var(--white);
}

/* ---------- Splash intro (page d'accueil uniquement) ---------- */
/* Section héro normale (pas de position:sticky) : voir splash.js pour le
   pourquoi — un ancien verrouillage JS du scroll combiné à sticky causait un
   clignotement visible sur PC/iPad. */
.splash {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--black);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 22%;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.32) 42%, rgba(10,10,10,0.35) 65%, rgba(10,10,10,0.82) 100%),
    url('/assets/img/photos/splash-bg-mobile.webp');
}
/* 100svh (small viewport height) reste constant pendant que la barre d'outils
   de Safari iOS apparaît/disparaît au scroll — contrairement à 100dvh qui
   change en direct et provoque un redimensionnement saccadé du splash au
   moment précis où l'utilisateur commence à faire défiler la page. */
@supports (height: 100svh) {
  .splash { height: 100svh; }
}
@media (min-width: 700px) {
  .splash {
    background-image:
      linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.28) 42%, rgba(10,10,10,0.32) 65%, rgba(10,10,10,0.78) 100%),
      url('/assets/img/photos/splash-bg-tablet.webp');
  }
}
@media (min-width: 1200px) {
  .splash {
    background-position: center 14%;
    background-image:
      linear-gradient(100deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.32) 45%, rgba(10,10,10,0.2) 65%, rgba(10,10,10,0.6) 100%),
      url('/assets/img/photos/splash-bg.webp');
  }
}
.splash-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
}
.splash-logo {
  width: min(230px, 56vw);
  height: auto;
  margin-bottom: 30px;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,0.45));
  opacity: 0;
  animation: splashFadeUp 0.9s cubic-bezier(.16,1,.3,1) 0.1s forwards;
}
.splash-eyebrow {
  display: block;
  color: var(--gold-light);
  font-size: 0.76rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: splashFadeUp 0.9s cubic-bezier(.16,1,.3,1) 0.3s forwards;
}
.splash-slogan {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--white);
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  line-height: 1.22;
  margin-bottom: 24px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
  opacity: 0;
  animation: splashFadeUp 0.9s cubic-bezier(.16,1,.3,1) 0.42s forwards;
}
.splash-quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream-dark);
  font-size: clamp(0.92rem, 1.8vw, 1.15rem);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
  opacity: 0;
  animation: splashFadeUp 0.9s cubic-bezier(.16,1,.3,1) 0.56s forwards;
}
.splash-scroll {
  position: absolute;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 50%;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  animation:
    splashScrollFadeIn 0.8s ease 0.85s forwards,
    splashBounce 2.4s ease-in-out 0.85s infinite;
}
.splash-scroll span {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes splashScrollFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes splashBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-scroll, .splash-logo, .splash-eyebrow, .splash-slogan, .splash-quote {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .splash-scroll { transform: translateX(-50%); }
}

/* Écrans bas (iPad, petits laptops, iPhone en paysage) : resserre les
   espacements verticaux pour que le logo + le slogan + la citation tiennent
   toujours entièrement, sans jamais être rognés. Placé après les règles de
   base ci-dessus pour bien les surcharger dans la cascade (même spécificité,
   donc l'ordre dans le fichier compte). */
@media (max-height: 860px) {
  .splash-logo { width: min(170px, 42vw); margin-bottom: 16px; }
  .splash-eyebrow { margin-bottom: 12px; }
  .splash-slogan { font-size: clamp(1.5rem, 4.4vw, 2.5rem); margin-bottom: 14px; }
  .splash-quote { font-size: clamp(0.82rem, 1.6vw, 0.98rem); line-height: 1.55; }
  .splash-scroll { bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (max-height: 620px) {
  .splash-content { padding-top: 60px; padding-bottom: 50px; }
  .splash-logo { width: min(120px, 34vw); margin-bottom: 10px; }
  .splash-eyebrow { margin-bottom: 8px; font-size: 0.66rem; }
  .splash-slogan { font-size: clamp(1.25rem, 4vw, 1.9rem); margin-bottom: 10px; }
  .splash-scroll { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.82) 34%, rgba(10,10,10,0.35) 60%, rgba(10,10,10,0.12) 100%),
    url('/assets/img/hero-bg.jpg') center 18% / cover no-repeat,
    linear-gradient(155deg, var(--black) 0%, #241d12 60%, var(--gold-dark) 150%);
  color: var(--white);
  padding: 130px 0 120px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 30%, rgba(230,205,148,0.12), transparent 55%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 640px; }
.hero h1, .hero h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--white); line-height: 1.15; }
.hero p { color: var(--cream-dark); font-size: 1.05rem; max-width: 480px; }
.hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .hero-actions { justify-content: center; }
}

/* ---------- Category strip ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex; align-items: flex-end;
}
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover img { transform: scale(1.06); }
}
.cat-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.75), rgba(10,10,10,0.05) 55%);
}
.cat-card span {
  position: relative; color: var(--white);
  font-family: var(--font-display); font-size: 1.2rem;
  padding: 22px; letter-spacing: 0.02em;
}

/* ---------- Product grid & card ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 32px;
}
.filter-pills {
  display: flex; gap: 10px; flex-wrap: wrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills--sub {
  margin: -6px 0 26px;
  padding-top: 2px;
  flex-wrap: nowrap;
}
@media (min-width: 700px) { .filter-pills--sub { flex-wrap: wrap; } }
.filter-pill {
  padding: 9px 18px; border: 1px solid var(--line);
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px; background: var(--white); transition: all var(--transition);
  white-space: nowrap; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.filter-pill--sub {
  padding: 7px 15px; font-size: 0.68rem; color: var(--ink-soft); border-color: transparent; background: var(--cream);
}
@media (hover: hover) and (pointer: fine) {
  .filter-pill:hover { border-color: var(--gold); }
}
.filter-pill:active { border-color: var(--gold); }
.filter-pill.active { background: var(--black); color: var(--gold-light); border-color: var(--black); }
.result-count { font-size: 0.82rem; color: var(--ink-soft); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
}
/* Cartes plus compactes sur grand écran : une colonne de plus pour mieux
   voir l'ensemble de la boutique d'un coup d'œil, sans sacrifier la
   lisibilité (le nom/prix restent en dessous de l'image, pas dedans). */
@media (min-width: 1400px) { .product-grid { grid-template-columns: repeat(5, 1fr); gap: 24px 20px; } }
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } }

.product-card { position: relative; }
.product-card__media {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: var(--cream-dark); border-radius: var(--radius); margin-bottom: 14px;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 500ms ease; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__media img { transform: scale(1.05); }
}
.badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--black); color: var(--gold-light);
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.badge--sale { background: var(--error); color: var(--white); }
.wishlist-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.88); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.wishlist-btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; transition: fill var(--transition); }
.wishlist-btn.is-active { color: var(--gold-dark); }
.wishlist-btn.is-active svg { fill: var(--gold); stroke: var(--gold-dark); }
@media (hover: hover) and (pointer: fine) {
  .wishlist-btn:hover { background: var(--white); transform: scale(1.08); }
}
.wishlist-btn--pd {
  position: static; width: 48px; height: 48px; flex: none;
  background: var(--cream-dark); color: var(--ink);
}
.wishlist-btn--pd svg { width: 20px; height: 20px; }
.quick-add {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  opacity: 0; transform: translateY(8px);
  transition: all var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px), (hover: none) { .quick-add { opacity: 1; transform: none; position: static; margin-top: 10px; } }
.product-card__cat { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); }
.product-card__name { font-family: var(--font-display); font-size: 1.02rem; margin: 4px 0 6px; }
.product-card__name a { transition: color var(--transition); }
@media (hover: hover) and (pointer: fine) {
  .product-card__name a:hover { color: var(--gold-dark); }
}
.price { font-size: 0.92rem; }
.price__original { text-decoration: line-through; color: var(--ink-soft); margin-right: 8px; font-size: 0.84rem; }
.price__current { color: var(--black); font-weight: 500; }
.price__current--sale { color: var(--error); }

/* Indicateur de stock — carte produit + fiche produit. Urgence uniquement
   quand elle est réelle (seuil bas, voir products.js LOW_STOCK_THRESHOLD) :
   jamais de faux compte à rebours ni de chiffre inventé. */
.stock-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; letter-spacing: 0.03em; margin-top: 6px; }
.stock-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.stock-badge--in { color: var(--success); }
.stock-badge--in::before { background: var(--success); }
.stock-badge--low { color: #b5762a; font-weight: 600; }
.stock-badge--low::before { background: #b5762a; }
.stock-badge--out { color: var(--error); }
.stock-badge--out::before { background: var(--error); }

/* ---------- Product detail ---------- */
.product-detail {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
}
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: 30px; } }

/* Mobile/iPad : la fiche produit accumulait trop de hauteur avant d'arriver
   au bouton "Ajouter au panier" (catégorie + titre + prix + stock +
   description + coloris + taille + quantité, tous avec l'espacement
   desktop) — on resserre le rythme vertical pour que la photo ET le CTA
   restent visibles avec peu de défilement, sans rien retirer. */
@media (max-width: 640px) {
  .product-info h1 { font-size: 1.5rem; margin: 6px 0 8px; }
  .product-info__price { font-size: 1.15rem; margin-bottom: 12px; }
  .product-info__desc { margin-bottom: 16px; }
  .option-group { margin-bottom: 16px; }
  .qty-row { margin-bottom: 14px; }
  .product-actions { margin-bottom: 16px; }
  .trust-list { padding: 14px 0; gap: 8px; }
}

/* Barre d'achat collante — mobile/iPad uniquement (même seuil que le
   passage en une colonne ci-dessus) : sur desktop, le bouton d'origine
   reste visible sans qu'il faille de doublon. */
.product-sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
  background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(10,10,10,0.08);
  opacity: 0; transform: translateY(100%); transition: opacity var(--transition), transform var(--transition);
}
.product-sticky-bar.is-visible { opacity: 1; transform: translateY(0); }
.product-sticky-bar__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--black); flex-shrink: 0; }
.product-sticky-bar .btn { flex: 1; max-width: 220px; }
@media (max-width: 900px) {
  .product-sticky-bar { display: flex; }
}
.product-gallery__main {
  aspect-ratio: 3/4; max-height: 620px; overflow: hidden; background: var(--cream-dark); border-radius: var(--radius);
  position: relative; cursor: zoom-in;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 260ms ease; }
@media (hover: hover) and (pointer: fine) {
  /* Loupe qui suit le curseur (transform-origin mis à jour en JS au
     mousemove) — desktop uniquement : sur tactile le hover n'a pas de sens,
     le zoom s'y fait via le plein écran + pincer-zoomer natif. */
  .product-gallery__main:hover img { transform: scale(1.7); }
}
.product-gallery__zoom-hint {
  position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,10,10,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
@media (max-width: 900px) {
  .product-gallery__main { max-height: 56vh; cursor: default; }
}

/* Plein écran zoom produit (clic/tap sur la photo). object-fit:contain
   garantit qu'aucune partie de l'image ne déborde du cadre, quel que soit
   son ratio ; le pincer-zoomer natif du navigateur reste disponible dedans. */
.pd-lightbox {
  display: none; position: fixed; inset: 0; z-index: 500; background: rgba(10,10,10,0.94);
  align-items: center; justify-content: center; padding: 20px; overflow: auto;
  touch-action: pinch-zoom;
}
.pd-lightbox.is-open { display: flex; }
.pd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-lightbox__close {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.pd-lightbox__close:hover { background: rgba(255,255,255,0.22); }

.share-wrap { position: relative; }
.share-popover {
  display: none; position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 50;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); min-width: 190px; padding: 6px;
}
.share-popover.is-open { display: block; }
.share-popover__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: none; text-align: left; font-size: 0.82rem; border-radius: var(--radius);
  color: var(--ink);
}
.share-popover__item:hover { background: var(--cream); }

.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-gallery__thumbs img {
  width: 74px; height: 92px; object-fit: cover; object-position: center top; border-radius: var(--radius);
  border: 1px solid var(--line); cursor: pointer; opacity: 0.7; transition: all var(--transition);
}
.product-gallery__thumbs img.active { opacity: 1; border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .product-gallery__thumbs img:hover { opacity: 1; border-color: var(--gold); }
}
.product-info__cat { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); }
.product-info h1 { font-size: 2rem; margin: 8px 0 10px; }
.product-info__price { font-size: 1.3rem; margin-bottom: 18px; }
.product-info__desc { color: var(--ink-soft); margin-bottom: 22px; }
.option-group { margin-bottom: 22px; }
.option-label { display: flex; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; }
.option-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  border: 1px solid var(--line); background: var(--white); padding: 10px 16px;
  font-size: 0.82rem; border-radius: var(--radius); transition: all var(--transition);
  min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .swatch:hover { border-color: var(--gold); }
}
.swatch.selected { background: var(--black); color: var(--gold-light); border-color: var(--black); }
.qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); }
.qty-control button { background: none; border: none; width: 44px; height: 44px; font-size: 1.1rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.qty-control input { width: 42px; border: none; text-align: center; -moz-appearance: textfield; }
.product-actions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
.product-actions .btn { flex: 1; min-width: 200px; min-height: 52px; }
/* CTA principal : le bouton d'ajout au panier doit rester le geste le plus
   évident de la fiche produit — taille de clic confortable, poids visuel
   renforcé. */
#addToCartBtn, #stickyAddToCartBtn { font-weight: 600; letter-spacing: 0.16em; }
.trust-list { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--ink-soft); }
.trust-list li { display: flex; gap: 10px; align-items: center; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%; background: none; border: none; padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition); color: var(--ink-soft); font-size: 0.92rem; }
.accordion-item.open .accordion-panel { max-height: 320px; padding-bottom: 16px; }
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform var(--transition); }

/* ---------- Cart page & drawer ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-line {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center;
}
/* Barre "plus que X€ pour la livraison offerte" — panier + tiroir panier. */
.shipping-progress { padding: 14px 0 18px; }
.shipping-progress__label { margin: 0 0 8px; font-size: 0.82rem; color: var(--ink-soft); }
.shipping-progress__track { height: 4px; background: var(--cream-dark); border-radius: 999px; overflow: hidden; }
.shipping-progress__fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width var(--transition); }

.cart-line img { width: 90px; height: 112px; object-fit: cover; border-radius: var(--radius); background: var(--cream-dark); }
.cart-line__name { font-family: var(--font-display); font-size: 1rem; margin-bottom: 4px; }
.cart-line__meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.cart-line__remove { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--error); background: none; border: none; margin-top: 8px; padding: 8px 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.cart-line__price { font-size: 0.95rem; font-weight: 500; white-space: nowrap; align-self: start; padding-top: 4px; }
.cart-summary { background: var(--cream); padding: 30px; border-radius: var(--radius); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.92rem; }
.summary-row--total { font-size: 1.15rem; font-weight: 500; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.empty-state { text-align: center; padding: 90px 20px; }
.payment-icons { display: flex; gap: 8px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
.payment-icons__secure {
  display: flex; align-items: center; gap: 6px; font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-right: 4px;
}
.payment-icons__secure svg { color: var(--gold-dark); flex-shrink: 0; }

.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw); background: var(--white);
  transform: translateX(100%); transition: transform var(--transition); z-index: 300;
  display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.2);
}
.cart-drawer.is-open { transform: translateX(0); }
html[dir="rtl"] .cart-drawer { inset: 0 auto 0 0; box-shadow: 10px 0 40px rgba(0,0,0,0.2); transform: translateX(-100%); }
html[dir="rtl"] .cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: max(22px, env(safe-area-inset-top)) 26px 22px; border-bottom: 1px solid var(--line);
}
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 10px 26px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cart-drawer__footer { padding: 22px 26px max(22px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.5); z-index: 290;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--ink-soft); }
.alert { padding: 14px 18px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 18px; }
.alert--success { background: #ecf4ec; color: var(--success); border: 1px solid #c9e0ca; }
.alert--error { background: #f8ecec; color: var(--error); border: 1px solid #edc9c9; }

/* ---------- Trust / features band ---------- */
.feature-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
@media (max-width: 800px) { .feature-band { grid-template-columns: repeat(2, 1fr); } }
.feature-band svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: 12px; }
.feature-band h4 { font-size: 0.95rem; }
.feature-band p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: var(--white); padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); }
.stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-card p { color: var(--ink-soft); font-style: italic; }
.testimonial-card__author { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--black); }

/* ---------- Newsletter ---------- */
.newsletter { display: flex; gap: 12px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.newsletter input { flex: 1; min-width: 200px; padding: 14px 16px; border: 1px solid var(--gold-light); background: transparent; color: var(--white); border-radius: var(--radius); }
.newsletter input::placeholder { color: rgba(250,247,242,0.6); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--cream-dark); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(230,205,148,0.14); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand img { margin-left: auto; margin-right: auto; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
}
.footer-brand img { height: 48px; width: auto; max-width: 100%; margin-bottom: 16px; }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--gold-light); font-size: 1rem; margin-bottom: 10px; }
.footer-brand p { font-size: 0.86rem; color: rgba(250,247,242,0.65); max-width: 280px; }
.footer-col h5 { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.88rem; color: rgba(250,247,242,0.75); transition: color var(--transition); display: inline-block; padding: 3px 0; }
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--gold-light); }
}
.footer-social { display: flex; gap: 14px; margin-top: 16px; justify-content: flex-start; }
@media (max-width: 560px) { .footer-social { justify-content: center; } }
.footer-social a { width: 36px; height: 36px; border: 1px solid rgba(230,205,148,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 0.76rem; color: rgba(250,247,242,0.5); flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: rgba(250,247,242,0.5); }

.footer-secure {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; padding: 22px 0; margin-top: 6px;
  border-top: 1px solid rgba(230,205,148,0.14);
  color: rgba(250,247,242,0.75); font-size: 0.78rem; letter-spacing: 0.03em;
}
.footer-secure svg { color: var(--gold-light); flex-shrink: 0; }
.footer-payments { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-badge { display: flex; line-height: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(230,205,148,0.2); }
@media (max-width: 560px) {
  .footer-secure { flex-direction: column; gap: 10px; text-align: center; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 26px; }
@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover { color: var(--gold-dark); }
}
.breadcrumb span { margin: 0 6px; }

/* ---------- Legal pages ---------- */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-content ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.legal-content li { margin-bottom: 0.5em; }
.legal-content p { color: var(--ink-soft); }
.legal-updated { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 40px; }

/* ---------- À propos ---------- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-split__media img { border-radius: 2px; aspect-ratio: 4/5; object-fit: cover; object-position: center top; width: 100%; display: block; }
.about-split__text h2 { margin-top: 6px; }
.about-split__text p, .about-split__text li { line-height: 1.7; }
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .about-split--reverse .about-split__media { order: -1; }
  .about-split__media img { aspect-ratio: 3/2; max-width: 420px; margin: 0 auto; }
  .about-split__text ul { text-align: left; max-width: 340px; margin: 0 auto; }
}

/* ---------- Misc pages ---------- */
.page-header { background: var(--cream); padding: 60px 0 40px; text-align: center; }
.page-header h1 { font-size: 2.1rem; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.info-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list svg { width: 20px; height: 20px; color: var(--gold-dark); flex-shrink: 0; margin-top: 2px; }

.toast {
  position: fixed; bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--black); color: var(--gold-light); padding: 14px 26px; border-radius: 999px;
  font-size: 0.84rem; opacity: 0; pointer-events: none; transition: all var(--transition);
  z-index: 400;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Comptes clients (inscription / connexion / mon compte) ---------- */
.auth-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 42px 36px;
  border-radius: var(--radius);
}
.auth-card h1 { font-size: 1.5rem; text-align: center; }
.auth-card .eyebrow { text-align: center; }
.auth-switch { text-align: center; margin-top: 22px; font-size: 0.88rem; color: var(--ink-soft); }
.auth-forgot { display: block; text-align: right; font-size: 0.8rem; color: var(--ink-soft); margin: -10px 0 18px; }
@media (hover: hover) and (pointer: fine) {
  .auth-switch a:hover, .auth-forgot:hover { color: var(--gold-dark); }
}

/* Le titre doit rester centré comme sur les autres pages (.page-header a
   text-align:center) même quand le bouton "Se déconnecter" est masqué
   (non connectée) — un simple justify-content:space-between pousse alors
   le titre, seul élément flex restant, contre le bord gauche. Le bouton est
   donc positionné en absolu à droite plutôt que rangé dans le flux flex, ce
   qui laisse le bloc titre toujours parfaitement centré sur la largeur de
   la page, qu'il soit visible ou non. */
.account-header { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
.account-header #logoutBtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .account-header { flex-direction: column; }
  .account-header #logoutBtn { position: static; transform: none; margin-top: 14px; }
  .account-title-row { justify-content: center; }
}
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
@media (max-width: 700px) { .account-grid { grid-template-columns: 1fr; } }
.account-stat {
  background: var(--cream); border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 3px solid var(--gold); transition: transform var(--transition), box-shadow var(--transition);
}
.account-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,10,10,0.08); }
.account-stat__value { font-family: var(--font-display); font-size: 2.4rem; color: var(--black); }
.account-stat__label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Ruhi Journey (programme de niveaux) ----------
   Vocabulaire visuel volontairement repris du reste du site plutôt
   qu'inventé : médaillon doré en radial-gradient (identique aux pièces de
   .sale-toast__coin), halo pulsé façon .saleToastPulse, ornement losange de
   .divider-orn — pour que "Ruhi Journey" ressemble à une extension du
   programme de fidélité de la maison, pas à un mini-jeu greffé dessus. */
.journey-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius);
  padding: 36px 26px; margin-bottom: 44px; box-shadow: 0 4px 26px rgba(10,10,10,0.06);
}
.journey-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(198,161,91,0.09), transparent 45%),
              radial-gradient(circle at 100% 100%, rgba(198,161,91,0.07), transparent 50%);
}
.journey-card > * { position: relative; }
.journey-card__head { text-align: center; margin-bottom: 8px; }
.journey-card__eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.7em; }
.journey-card__title { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.journey-card__head .divider-orn { margin: 16px auto 30px; }

/* Chemin de progression : médaillons reliés par un trait, le trait se
   "remplit" d'or entre deux niveaux tous deux atteints — la progression se
   lit d'un coup d'œil sans avoir besoin d'une barre séparée. */
.journey-path { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 20px; }
.journey-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 88px; flex-shrink: 0; }
.journey-node__medallion {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cream); border: 1.5px solid var(--line); color: var(--ink-soft); position: relative; z-index: 2;
  transition: all 320ms cubic-bezier(.32,.9,.36,1.1);
}
.journey-node__medallion svg { width: 22px; height: 22px; position: relative; z-index: 1; }
.journey-node__name { font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.02em; margin-top: 12px; }
.journey-node__req { font-size: 0.62rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.journey-node--locked .journey-node__medallion { opacity: 0.5; }
.journey-node--locked .journey-node__name { color: var(--ink-soft); }
.journey-node--done .journey-node__medallion,
.journey-node--current .journey-node__medallion {
  border-color: transparent; color: var(--gold-dark);
  background: radial-gradient(circle at 32% 28%, #fff6d8 0%, var(--gold-light) 35%, var(--gold) 65%, var(--gold-dark) 100%);
  box-shadow: 0 5px 16px rgba(198,161,91,0.4), inset 0 0 0 3px rgba(255,255,255,0.3);
}
.journey-node--current .journey-node__medallion { animation: journeyGlow 2.6s ease-in-out infinite; }
.journey-node--current .journey-node__name { color: var(--gold-dark); font-weight: 700; }
.journey-node--just-reached .journey-node__medallion { animation: journeyGlow 2.6s ease-in-out infinite, journeyBounceIn 700ms cubic-bezier(.32,.9,.36,1.25); }

.journey-path__connector { flex: 1; height: 2px; min-width: 10px; background: var(--line); margin-top: 27px; }
.journey-path__connector--filled { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }

@keyframes journeyGlow {
  0%, 100% { box-shadow: 0 5px 16px rgba(198,161,91,0.4), inset 0 0 0 3px rgba(255,255,255,0.3), 0 0 0 0 rgba(198,161,91,0.45); }
  50% { box-shadow: 0 5px 16px rgba(198,161,91,0.4), inset 0 0 0 3px rgba(255,255,255,0.3), 0 0 0 9px rgba(198,161,91,0); }
}
@keyframes journeyBounceIn {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (max-width: 640px) {
  .journey-node { width: 66px; }
  .journey-node__medallion { width: 42px; height: 42px; }
  .journey-node__medallion svg { width: 18px; height: 18px; }
  .journey-node__name { font-size: 0.72rem; margin-top: 8px; }
  .journey-node__req { font-size: 0.56rem; }
  .journey-path__connector { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-node__medallion { animation: none !important; }
}

.journey-progress__bar { height: 6px; background: var(--cream-dark); border-radius: 999px; overflow: hidden; position: relative; }
.journey-progress__fill {
  height: 100%; border-radius: 999px; transition: width 700ms ease; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}
.journey-progress__fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
  background-size: 200% 100%; animation: journeyShimmer 2.6s ease-in-out infinite;
}
@keyframes journeyShimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.journey-progress__text { margin: 12px 0 0; font-size: 0.84rem; color: var(--ink-soft); text-align: center; }

.journey-gift { margin-top: 30px; }
.journey-gift__box {
  position: relative; background: var(--black); border-radius: var(--radius); padding: 34px 26px; text-align: center;
  border: 1px solid var(--gold); box-shadow: 0 10px 34px rgba(10,10,10,0.28), inset 0 0 0 1px rgba(230,205,148,0.12);
}
.journey-gift__box--claimed { background: var(--cream); border-color: var(--gold-light); box-shadow: none; }
.journey-gift__eyebrow { display: block; color: var(--gold-light); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 12px; }
.journey-gift__box--claimed .journey-gift__eyebrow { color: var(--gold-dark); }
.journey-gift__box h3 { color: var(--white); font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 0.5em; }
.journey-gift__box--claimed h3 { color: var(--black); }
.journey-gift__box p { color: var(--cream-dark); margin: 0 0 1.2em; }
.journey-gift__box--claimed p { color: var(--ink-soft); }

.journey-details { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }
.journey-details summary { cursor: pointer; font-size: 0.8rem; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.08em; }
.journey-details summary:hover { color: var(--gold); }
.journey-sub-title { font-family: var(--font-display); font-size: 0.98rem; margin: 22px 0 14px; }
.journey-timeline__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.journey-timeline__list li { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; padding: 8px 0; position: relative; }
.journey-timeline__list li:not(:last-child)::before {
  content: ''; position: absolute; left: 11px; top: 30px; bottom: -8px; width: 1px; background: var(--line);
}
.journey-timeline__list li.is-done:not(:last-child)::before { background: var(--gold-light); }
.journey-timeline__mark {
  width: 23px; height: 23px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; background: var(--cream-dark); position: relative; z-index: 1;
}
.journey-timeline__list li.is-done .journey-timeline__mark {
  background: radial-gradient(circle at 32% 28%, #fff6d8 0%, var(--gold-light) 35%, var(--gold) 65%, var(--gold-dark) 100%);
  color: var(--black); box-shadow: 0 2px 8px rgba(198,161,91,0.4);
}
.journey-timeline__list li.is-locked { color: var(--ink-soft); }
.journey-notif-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.journey-notif-list li { border-left: 2px solid var(--gold-light); padding-left: 12px; }
.journey-notif-list li strong { display: block; font-size: 0.86rem; }
.journey-notif-list li p { margin: 2px 0; font-size: 0.8rem; color: var(--ink-soft); }
.journey-notif-list__date { font-size: 0.7rem; color: var(--ink-soft); }

.product-journey-teaser {
  display: block; margin: 14px 0 0; font-size: 0.78rem; letter-spacing: 0.02em;
  color: var(--gold-dark); text-decoration: none;
}
.product-journey-teaser:hover { text-decoration: underline; }

.cart-journey-box {
  background: var(--cream); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px;
  border-left: 3px solid var(--gold);
}
.cart-journey-box__title { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.cart-journey-box__level { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.cart-journey-box .journey-progress__bar { height: 5px; }
.cart-journey-box .journey-progress__text { text-align: left; margin-top: 8px; font-size: 0.78rem; }

/* Section de l'espace client : encart uniforme (titre + eyebrow doré) pour
   que "Mes commandes", "Fidélité", "Confidentialité", "Adresses" partagent
   la même hiérarchie visuelle au lieu de simples <h2> flottants. */
.account-section { margin-bottom: 40px; }
.account-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.account-section__eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 4px; }
.account-section__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }

.order-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; transition: box-shadow var(--transition), border-color var(--transition); }
.order-card:hover { border-color: var(--gold); box-shadow: 0 10px 26px rgba(10,10,10,0.06); }
a.order-card:hover .order-card__number { color: var(--gold-dark); }
.order-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.order-card__number { font-family: var(--font-display); font-size: 1.05rem; }
.order-card__date { font-size: 0.82rem; color: var(--ink-soft); }
.order-card__items { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 10px; }
.order-card__footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-card__total { font-weight: 500; }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cream); color: var(--ink-soft);
}
.status-badge--pending { background: #fbf3e0; color: #96701c; }
.status-badge--paid { background: #eef3ee; color: var(--success); }
.status-badge--processing { background: #fbf3e0; color: #96701c; }
.status-badge--shipped { background: #e7eef6; color: #2b5f96; }
.status-badge--delivered { background: #eef3ee; color: var(--success); }
.status-badge--cancelled, .status-badge--refunded, .status-badge--error { background: #f8ecec; color: var(--error); }

.coupon-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px dashed var(--gold); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 12px; background: var(--cream);
  flex-wrap: wrap;
}
.coupon-card__code { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; }
.coupon-card__value { font-size: 0.85rem; color: var(--ink-soft); }
.coupon-card.is-used { opacity: 0.5; }

.tier-option {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-size: 0.84rem; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tier-option input { width: auto; margin: 0; }
.tier-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.tier-option.is-selected { border-color: var(--gold); background: var(--cream); }

.order-tracker { display: flex; margin: 30px 0 40px; }
.order-tracker__step { flex: 1; text-align: center; position: relative; }
.order-tracker__step::before {
  content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.order-tracker__step:first-child::before { display: none; }
.order-tracker__dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--white);
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px; position: relative; z-index: 1; color: var(--ink-soft);
}
.order-tracker__step.is-done .order-tracker__dot { background: var(--black); border-color: var(--black); color: var(--gold-light); }
.order-tracker__step.is-done::before { background: var(--black); }
.order-tracker__label { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-soft); }
.order-tracker__step.is-done .order-tracker__label { color: var(--ink); }
.order-tracker--cancelled .order-tracker__dot { border-color: var(--error); }

/* Suivi de colis : emplacement toujours visible dans le détail de commande,
   même avant que CJ ne fournisse un numéro — se remplit automatiquement
   (voir mon-compte/commande.html) dès que le tracking arrive, sans qu'il
   faille deviner où regarder. */
.order-tracking-panel { display: flex; align-items: center; gap: 14px; padding: 18px 22px; margin-bottom: 30px; border-radius: var(--radius); }
.order-tracking-panel--pending { background: var(--cream); color: var(--ink-soft); border: 1px dashed var(--line); }
.order-tracking-panel--ready { background: var(--black); color: var(--cream); }
.order-tracking-panel--ready .order-tracking-panel__label { color: var(--gold-light); }
.order-tracking-panel__icon { font-size: 1.3rem; flex-shrink: 0; }
.order-tracking-panel__label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; color: var(--gold-dark); }
.order-tracking-panel__value { font-family: var(--font-display); font-size: 1.05rem; }
.order-tracking-panel a { color: inherit; text-decoration: underline; }

/* ---------- Administration (/admin) ---------- */
.admin-shell { display: flex; min-height: 100vh; background: var(--cream); }
.admin-sidebar {
  width: 230px; flex-shrink: 0; color: var(--cream-dark);
  background: linear-gradient(180deg, var(--black) 0%, #1a1712 100%);
  padding: 28px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar__logo { display: block; margin-bottom: 18px; }
.admin-sidebar__logo img { height: 34px; }
.admin-sidebar__site-link {
  display: flex; align-items: center; gap: 6px; font-size: 0.76rem;
  color: rgba(250,247,242,0.55); margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(230,205,148,0.15); transition: color var(--transition);
}
.admin-sidebar__site-link:hover { color: var(--gold-light); }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav a {
  padding: 10px 12px; border-radius: var(--radius); font-size: 0.86rem;
  color: rgba(250,247,242,0.75); transition: background var(--transition), color var(--transition), border-color var(--transition);
  border-left: 2px solid transparent;
}
.admin-nav a:hover { background: rgba(230,205,148,0.1); color: var(--gold-light); }
.admin-nav a.active { background: rgba(230,205,148,0.14); color: var(--gold-light); border-left-color: var(--gold); }
.admin-nav__signout { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(230,205,148,0.15); }
.admin-main { flex: 1; padding: 40px 44px; max-width: 1200px; }
@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; padding: 18px 16px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .admin-nav a { padding: 9px 12px; min-height: 40px; display: flex; align-items: center; }
  .admin-main { padding: 24px 16px; }
  .admin-h1 { font-size: 1.28rem; }
  .admin-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .admin-card { padding: 16px; }
  .admin-card__value { font-size: 1.5rem; }
  .admin-panel { padding: 18px; }
  /* Table admin : scroll horizontal contenu (pas de débordement de page),
     avec un indice visuel discret pour signaler qu'il y a plus à voir. */
  .admin-table-wrap { -webkit-overflow-scrolling: touch; }
  .admin-table { font-size: 0.8rem; }
  .admin-table th, .admin-table td { padding: 9px 10px; }
}
@media (max-width: 420px) {
  .admin-cards { grid-template-columns: 1fr; }
}
.admin-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.admin-h1 { font-size: 1.5rem; margin: 0; }

/* Bandeau du tableau de bord : chiffres-clés incrustés dans une photo
   d'ambiance, à l'emplacement exact du cadre doré déjà présent dans
   l'image (repéré au pixel près par analyse de l'image source, voir
   commit). Positionnement en % à l'intérieur d'un conteneur qui garde le
   ratio de l'image (width:100% + height:auto) : le texte reste calé sur
   le cadre à TOUTE taille d'écran et ne peut jamais s'en détacher au
   scroll, puisqu'il fait partie du même bloc que l'image, pas un élément
   fixe séparé. */
.admin-hero { position: relative; width: 100%; margin-bottom: 36px; border-radius: var(--radius); overflow: hidden; line-height: 1; }
.admin-hero__img { display: block; width: 100%; height: auto; }
.admin-hero__value {
  position: absolute; left: 19.35%; width: 25.28%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--gold-light);
  letter-spacing: 0.02em; text-shadow: 0 0 12px rgba(198,161,91,0.6);
  white-space: nowrap; overflow: hidden;
}
.admin-hero__value--revenue { top: 55.3%; height: 5.1%; }

/* Visites totales : sorti de l'écran du mockup (moins beau à cet endroit
   une fois testé) — repositionné en badge flottant en bas à droite de la
   photo, sur un fond opaque propre plutôt qu'incrusté "dans" la scène, donc
   lisible quel que soit ce qu'il y a derrière, à toute taille d'écran. */
.admin-hero__visits-badge {
  position: absolute; right: 3%; bottom: 3.5%;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,10,0.72); backdrop-filter: blur(2px);
  border: 1px solid rgba(230,205,148,0.6); border-radius: 999px;
  padding: 0.5em 0.9em; white-space: nowrap;
}
.admin-hero__visits-badge__label { font-size: 0.62em; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(250,247,242,0.75); }
.admin-hero__visits-badge__value { font-family: var(--font-display); font-weight: 700; font-size: 1em; color: var(--gold-light); }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 36px; }
.admin-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
  border-top: 3px solid var(--gold); transition: transform var(--transition), box-shadow var(--transition);
}
.admin-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,10,10,0.07); }
.admin-card__value { font-family: var(--font-display); font-size: 1.9rem; color: var(--black); }
.admin-card__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }

.admin-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 28px; box-shadow: 0 2px 10px rgba(10,10,10,0.03); }
.admin-panel h2 { font-size: 1.05rem; margin-top: 0; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.admin-table th { text-align: left; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table-wrap { overflow-x: auto; }
.admin-table select, .admin-table input[type="text"], .admin-table input[type="number"] {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; font-size: 0.82rem; width: 100%;
}
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-link-btn { font-size: 0.78rem; color: var(--gold-dark); background: none; border: none; padding: 4px 0; }
.admin-link-btn--danger { color: var(--error); }

.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .admin-form-grid { grid-template-columns: 1fr; } }
.admin-form-grid .field--full { grid-column: 1 / -1; }

/* ---------- Notification admin : nouvelle vente ----------
   Doit être immanquable sur desktop, tablette et mobile, sur TOUTE page du
   site (boutique publique incluse — voir account-nav.js) tant qu'un compte
   administrateur est connecté : grand format, contraste fort, pièces
   dorées animées, empilement propre + défilement si plusieurs ventes
   arrivent en même temps, cliquable/activable au clavier vers le détail
   exact de la commande. */
.sale-toast-container {
  position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right));
  left: auto;
  z-index: 4000; display: flex; flex-direction: column; gap: 18px; width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 36px); overflow-y: auto; overflow-x: visible;
  scrollbar-width: none; padding: 6px 4px; margin: -6px -4px;
}
.sale-toast-container::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .sale-toast-container {
    left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
    width: auto; top: max(14px, env(safe-area-inset-top));
  }
}
.sale-toast {
  position: relative; background: linear-gradient(135deg, var(--black) 0%, #241d12 100%); color: var(--cream);
  border: 2px solid var(--gold); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(10,10,10,0.55), 0 0 0 4px rgba(198,161,91,0.15);
  cursor: pointer; opacity: 0; transform: translateX(80px) scale(0.78) rotate(5deg);
  transition: opacity 520ms cubic-bezier(.22,1.61,.36,1), transform 520ms cubic-bezier(.22,1.61,.36,1);
}
.sale-toast.is-visible {
  opacity: 1; transform: translateX(0) scale(1) rotate(0deg);
  animation: saleToastPulse 1.8s ease-in-out 1, saleToastFlash 650ms ease-out 1;
}
@keyframes saleToastPulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(10,10,10,0.55), 0 0 0 4px rgba(198,161,91,0.15); }
  50% { box-shadow: 0 20px 60px rgba(10,10,10,0.55), 0 0 0 11px rgba(198,161,91,0.05); }
}
@keyframes saleToastFlash {
  0% { filter: brightness(2.4) saturate(1.4); }
  100% { filter: brightness(1) saturate(1); }
}
.sale-toast__congrats { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--gold-light); margin-bottom: 10px; line-height: 1.3; }
.sale-toast__total { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; color: var(--gold); margin-bottom: 10px; }
.sale-toast__items { font-size: 0.92rem; line-height: 1.4; margin-bottom: 10px; color: var(--cream-dark); }
.sale-toast__hint { font-size: 0.76rem; color: rgba(250,247,242,0.65); text-decoration: underline; }

/* Pièces dorées décoratives : tombent en tournant à l'apparition de la
   bulle, façon gain de machine à sous — purement CSS, pas d'image. */
.sale-toast__coin {
  position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6d8 0%, var(--gold-light) 35%, var(--gold) 65%, var(--gold-dark) 100%);
  border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 5px 12px rgba(0,0,0,0.4), inset 0 0 0 3px rgba(255,255,255,0.25);
  opacity: 0; pointer-events: none; z-index: 2;
  animation: coinDrop 950ms cubic-bezier(.32,.9,.36,1.25) forwards;
}
.sale-toast__coin::after {
  content: "€"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--gold-dark); text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.sale-toast__coin--1 { left: -13px; animation-delay: 70ms; }
.sale-toast__coin--2 { left: 24px; width: 20px; height: 20px; animation-delay: 240ms; }
.sale-toast__coin--2::after { font-size: 0.68rem; }
.sale-toast__coin--3 { right: -11px; animation-delay: 150ms; }
.sale-toast__coin--4 { right: 30px; width: 17px; height: 17px; animation-delay: 360ms; }
.sale-toast__coin--4::after { font-size: 0.58rem; }
@keyframes coinDrop {
  0% { opacity: 0; top: -34px; transform: rotate(0deg) scale(0.6); }
  55% { opacity: 1; }
  72% { top: -8px; transform: rotate(230deg) scale(1.08); }
  100% { opacity: 1; top: 8px; transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sale-toast { transition: opacity 200ms linear; transform: none !important; }
  .sale-toast.is-visible { animation: none; }
  .sale-toast__coin { animation: none; opacity: 1; top: 8px; }
}

/* ---------- Bandeau cookies ---------- */
/* Carte flottante compacte (pas une barre pleine largeur) : occupe beaucoup
   moins d'espace visuel, lecture plus premium, cohérent avec le reste des
   composants (radius, ombre douce). Repasse en bandeau bas pleine largeur
   sur mobile où une carte flottante serait trop étroite pour le texte. */
.cookie-banner {
  position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 950;
  max-width: 380px;
  background: var(--black); color: var(--cream-dark);
  border-radius: var(--radius-lg, 10px);
  padding: 16px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  transform: translateY(calc(100% + 24px)); transition: transform 320ms ease;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: rgba(250,247,242,0.85); }
.cookie-banner p a { color: var(--gold-light); }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; align-self: stretch; }
.cookie-banner__actions .btn { flex: 1; }
@media (max-width: 640px) {
  .cookie-banner {
    left: 0; right: 0; bottom: 0; max-width: none;
    border-radius: 0;
    padding: 14px max(16px, env(safe-area-inset-right)) max(14px, calc(env(safe-area-inset-bottom) + 10px)) max(16px, env(safe-area-inset-left));
  }
}

/* ---------- Badge administrateur (sitewide) ---------- */
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--black); color: var(--gold-light);
  border: 1px solid rgba(230,205,148,0.4);
  border-radius: 999px; padding: 4px 11px;
  font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.admin-badge::before { content: '★'; font-size: 0.8em; }
.header-icons .admin-badge { margin-right: 4px; }
.account-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Recherche fournisseur CJ (admin) ---------- */
.cj-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cj-result-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; background: var(--white); transition: border-color var(--transition);
}
.cj-result-card:hover { border-color: var(--gold); }
.cj-result-card.is-primary { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(198,161,91,0.35); }
.cj-result-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: var(--cream); }
.cj-result-card__body { padding: 10px; }
.cj-result-card__name { font-size: 0.78rem; line-height: 1.35; height: 2.7em; overflow: hidden; margin-bottom: 4px; }
.cj-result-card__price { font-size: 0.82rem; color: var(--gold-dark); font-weight: 600; }
.cj-variant-list { font-size: 0.8rem; color: var(--ink-soft); max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.cj-variant-edit-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cj-variant-edit-row:last-child { border-bottom: none; }
.cj-variant-edit-row__sku { flex: 1 1 140px; font-size: 0.72rem; color: var(--ink-soft); min-width: 120px; }
.cj-variant-edit-row__color, .cj-variant-edit-row__size { flex: 1 1 110px; font-size: 0.8rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); min-width: 90px; }
.cj-detail-images { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cj-gallery-item {
  position: relative; width: 84px; height: 100px; border-radius: 4px; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; opacity: 0.75; transition: opacity var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.cj-gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cj-gallery-item:hover { opacity: 1; }
.cj-gallery-item.is-primary { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(198,161,91,0.35); }
.cj-gallery-item.is-excluded { opacity: 0.3; }
.cj-gallery-item.is-excluded img { filter: grayscale(1); }
.cj-gallery-item__check {
  position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cj-gallery-item__check input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold-dark); cursor: pointer; }

.cj-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cj-chip {
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-size: 0.78rem; color: var(--ink); cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.cj-chip:hover { border-color: var(--gold); }
.cj-chip.is-active { background: var(--black); color: var(--gold-light); border-color: var(--black); }

.cj-price-compare {
  display: flex; align-items: center; gap: 14px; background: var(--cream);
  border-radius: var(--radius); padding: 14px 18px; margin: 16px 0; flex-wrap: wrap;
}
.cj-price-compare__label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 3px; }

.admin-draft-status { display: none; font-size: 0.75rem; color: var(--ink-soft); margin-left: 10px; vertical-align: middle; }
.admin-draft-status.is-saving { color: var(--ink-soft); }
.admin-draft-status.is-saving::before { content: "⏳ "; }
.admin-draft-status.is-saved { color: var(--success, #2e7d4f); }
.admin-draft-status.is-error { color: var(--error, #b3312c); }
.admin-draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--cream); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 16px; font-size: 0.85rem;
}
.admin-draft-banner__text strong { display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 2px; }
.admin-draft-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-draft-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px;
}
.admin-draft-list-item__name { font-weight: 600; }
.admin-draft-list-item__meta { font-size: 0.75rem; color: var(--ink-soft); }

.admin-gallery-item {
  position: relative; width: 84px; height: 100px; border-radius: 4px; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; transition: border-color var(--transition);
  flex-shrink: 0; background: var(--cream);
}
.admin-gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.admin-gallery-item.is-primary { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(198,161,91,0.35); }
.admin-gallery-item__remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(10,10,10,0.72); color: #fff; border: none; font-size: 13px; line-height: 20px;
  text-align: center; cursor: pointer; padding: 0;
}
.admin-gallery-item__move { position: absolute; bottom: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(10,10,10,0.6); color: #fff; border: none; font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; padding: 0; }
.admin-gallery-item__move--left { left: 3px; }
.admin-gallery-item__move--right { right: 3px; }
.admin-gallery-item--add {
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem; text-align: center;
  color: var(--ink-soft); border-style: dashed;
}
.admin-gallery-item--add:hover { border-color: var(--gold); color: var(--gold-dark); }
.cj-price-compare__value { font-family: var(--font-display); font-size: 1.15rem; }
.cj-price-compare__value--gold { color: var(--gold-dark); }
.cj-price-compare__arrow { color: var(--ink-soft); font-size: 1.2rem; }

/* Barre d'outils de mise en forme (gras/italique/etc.) au-dessus des
   descriptions produit */
.rt-toolbar { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.rt-toolbar__btn {
  border: 1px solid var(--line); background: #fff; border-radius: 4px;
  padding: 4px 11px; font-size: 0.78rem; cursor: pointer; line-height: 1.3;
  color: var(--ink); transition: border-color var(--transition), color var(--transition);
}
.rt-toolbar__btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.rt-toolbar__hint { font-size: 0.72rem; color: var(--ink-soft); margin: 4px 0 0; }

/* Bloc de calcul du coût de revient / prix conseillé à l'import */
.cost-calc {
  background: var(--cream); border-radius: var(--radius); padding: 14px 18px;
  margin: 4px 0 16px; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end;
}
.cost-calc__line { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 3px; }
.cost-calc__value { font-family: var(--font-display); font-size: 1.15rem; }
.cost-calc__value--gold { color: var(--gold-dark); }

/* ---------- Modal détail commande (admin) ---------- */
.admin-spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold); vertical-align: -3px;
  margin-right: 8px; animation: admin-spin 700ms linear infinite;
}
@keyframes admin-spin { to { transform: rotate(360deg); } }
.admin-loading { color: var(--ink-soft); font-size: 0.85rem; padding: 10px 0; }

.cj-search-bar {
  width: 100%; padding: 15px 18px; font-size: 1rem; border: 1.5px solid var(--line);
  border-radius: 6px; transition: border-color var(--transition);
}
.cj-search-bar:focus { outline: none; border-color: var(--gold); }
@media (max-width: 700px) {
  .admin-modal { padding: 20px; max-height: 90vh; }
  .admin-modal-overlay { padding: 10px; }
}

.admin-modal-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.55); z-index: 700;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.admin-modal { background: var(--white); border-radius: var(--radius); width: min(640px, 100%); max-height: 86vh; overflow-y: auto; padding: 28px; }
.admin-modal h2 { margin-top: 0; }
.admin-modal__close { float: right; background: none; border: none; font-size: 1.3rem; color: var(--ink-soft); line-height: 1; }

/* ---------- FAQ (bouton flottant + popup) ---------- */
.faq-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  z-index: 150;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--black);
  color: var(--gold-light);
  border: 1px solid rgba(230,205,148,0.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(10,10,10,0.35);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, background var(--transition), color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .faq-fab:hover { background: var(--gold-dark); color: var(--white); }
}
.faq-fab:active { transform: scale(0.93); }

.faq-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.55);
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.faq-overlay.is-open { opacity: 1; pointer-events: auto; }

.faq-modal {
  position: fixed;
  z-index: 510;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  width: min(560px, 92vw);
  max-height: 82vh;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.faq-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.faq-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.faq-modal__header h2 { margin: 0; font-size: 1.15rem; }
.faq-modal__close {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-soft);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.faq-modal__body { flex: 1; overflow-y: auto; padding: 4px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.faq-modal__body .accordion-trigger { text-transform: none; letter-spacing: 0.01em; font-size: 0.92rem; text-align: left; gap: 14px; }
.faq-modal__footer {
  padding: 16px 24px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.faq-modal__footer p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .faq-modal {
    left: 0; right: 0; top: auto; bottom: 0;
    transform: translateY(100%);
    width: 100%; max-width: none; max-height: 86vh;
    border-radius: 16px 16px 0 0;
  }
  .faq-modal.is-open { transform: translateY(0); }
}

/* ---------- Assistante IA (service client) — même pattern que .faq-modal ---------- */
.ai-chat-overlay {
  position: fixed; inset: 0; background: rgba(10,10,10,0.55);
  z-index: 600; opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.ai-chat-overlay.is-open { opacity: 1; pointer-events: auto; }
.ai-chat-panel {
  position: fixed; z-index: 610;
  left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.97);
  width: min(420px, 92vw); max-height: 78vh;
  background: var(--white); border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.ai-chat-panel.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.ai-chat-panel__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.ai-chat-panel__header h2 { margin: 0 0 4px; font-size: 1.05rem; font-family: var(--font-display); }
.ai-chat-panel__subtitle { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.ai-chat-panel__close {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink-soft);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ai-chat-panel__body {
  flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.ai-chat-bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 0.86rem; line-height: 1.45;
}
.ai-chat-bubble--assistant { align-self: flex-start; background: var(--cream); border-bottom-left-radius: 4px; }
.ai-chat-bubble--user { align-self: flex-end; background: var(--black); color: var(--cream); border-bottom-right-radius: 4px; }
.ai-chat-bubble--typing { display: flex; gap: 4px; padding: 14px; }
.ai-chat-bubble--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft);
  animation: aiTypingDot 1.1s ease-in-out infinite;
}
.ai-chat-bubble--typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-bubble--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiTypingDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ai-chat-panel__form {
  display: flex; gap: 8px; padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.ai-chat-panel__form input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.86rem;
}
.ai-chat-panel__form button { border-radius: 999px; flex-shrink: 0; }
@media (max-width: 640px) {
  .ai-chat-panel {
    left: 0; right: 0; top: auto; bottom: 0;
    transform: translateY(100%);
    width: 100%; max-width: none; max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
  .ai-chat-panel.is-open { transform: translateY(0); }
}

/* ---------- Carte assistante — espace client ---------- */
.ai-chat-card {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-align: left; width: 100%; transition: border-color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
  .ai-chat-card:hover { border-color: var(--gold); }
}
.ai-chat-card__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: var(--black); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
}
.ai-chat-card__title { font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; }
.ai-chat-card__desc { font-size: 0.8rem; color: var(--ink-soft); }

.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--gold-light); border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }