/* ============================================================
   ORMÉRA — main.css
   Design system : DESIGN.md (jarvis-starter-kit), version alpha
   Dark par défaut (écrin fermé), light mode (écrin ouvert)
   Aucune couleur hors tokens. Angles droits. Or chirurgical.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Marque & accent */
  --gold: #B8972E;
  --gold-active: #9A7A22;
  --gold-light: #D4AF5A;
  --gold-disabled: #4A3E1A;

  /* Surfaces sombres */
  --charcoal: #1C1A17;
  --charcoal-elevated: #252320;
  --charcoal-soft: #201E1B;
  --obsidian: #0E0D0B;

  /* Surfaces claires */
  --ivoire: #F5F2EC;
  --parchemin: #F0E6C8;

  /* Texte */
  --ink: #F5F2EC;
  --body-col: #E8DFC8;
  --body-strong: #F0E6C8;
  --muted: #8A8070;
  --muted-soft: #6A6058;

  /* Bordures */
  --hairline: #2E2C28;
  --hairline-soft: #252320;

  /* États */
  --success: #6B9E6B;
  --error: #B04040;

  /* Thème actif (dark par défaut) */
  --surface: var(--charcoal);
  --surface-elevated: var(--charcoal-elevated);
  --surface-soft: var(--charcoal-soft);
  --surface-deep: var(--obsidian);
  --t-ink: var(--ink);
  --t-body: var(--body-col);
  --t-body-strong: var(--body-strong);
  --t-muted: var(--muted);
  --t-muted-soft: var(--muted-soft);
  --t-hairline: var(--hairline);
  --t-hairline-soft: var(--hairline-soft);
  --t-gold-text: var(--gold);
  --t-gold-num: rgba(184, 151, 46, 0.4);
  --nav-bg: rgba(14, 13, 11, 0.94);

  /* Typo */
  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans: 'Montserrat', 'DM Sans', Inter, sans-serif;

  /* Rythme */
  --sp-xxs: 4px;  --sp-xs: 8px;  --sp-sm: 16px;  --sp-md: 24px;
  --sp-lg: 40px;  --sp-xl: 64px; --sp-xxl: 96px; --sp-section: 128px;
  --maxw: 1280px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: all 300ms var(--ease);
}

/* Light mode — « écrin ouvert ». Palette calibrée DESIGN.md (WCAG vérifié) */
:root[data-theme="light"] {
  --surface: #F5F2EC;            /* surface-light */
  --surface-elevated: #F0E6C8;   /* surface-light-elevated */
  --surface-soft: #F2ECDF;       /* surface-light-soft */
  --surface-deep: #F0E6C8;
  --t-ink: #1C1A17;              /* on-light */
  --t-body: #3A352C;
  --t-body-strong: #1C1A17;
  --t-muted: #6A6058;            /* on-light-soft, AA */
  --t-muted-soft: #8A8070;
  --t-hairline: #E4DAC2;         /* hairline-light */
  --t-hairline-soft: #F0E6C8;
  --t-gold-text: #7C631C;        /* primary-on-light — or texte sur clair */
  --t-gold-num: rgba(124, 99, 28, 0.45);
  --nav-bg: rgba(245, 242, 236, 0.94);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--t-body);
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color 600ms var(--ease), color 600ms var(--ease);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-sans); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 300; color: var(--t-ink); margin: 0; }
.display-xl { font-size: clamp(38px, 6vw, 72px); letter-spacing: 6px; line-height: 1.02; }
.display-lg { font-size: clamp(32px, 4.5vw, 52px); letter-spacing: 4px; line-height: 1.05; }
.display-md { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: 3px; line-height: 1.1; }
.display-sm { font-size: 28px; letter-spacing: 2px; line-height: 1.2; }

.eyebrow {
  font-family: var(--font-sans); font-size: 10px; font-weight: 300;
  letter-spacing: 3px; text-transform: uppercase; color: var(--t-muted);
}
.eyebrow--gold { color: var(--t-gold-text); }
.lead { font-size: 15px; line-height: 1.9; color: var(--t-body); margin: 0; }
.note { font-size: 13px; color: var(--t-muted); margin: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.section { padding: 112px 0; }
.section--deep { background: var(--surface-deep); }
.center { text-align: center; }

/* Filet or signature */
.divider-gold { height: 1px; background: var(--gold); opacity: 0.3; border: none; margin: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 14px 36px; cursor: pointer;
  font-size: 12px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase;
  border-radius: 0; transition: var(--transition); border: none;
}
.btn--primary { background: var(--gold); color: var(--obsidian); }
.btn--primary:hover { background: var(--gold-active); }
.btn--ghost { background: transparent; color: var(--t-ink); border: 1px solid var(--t-hairline); }
.btn--ghost:hover { border-color: var(--t-gold-text); color: var(--t-gold-text); }
.btn--ghost-gold { background: transparent; color: var(--t-gold-text); border: 1px solid var(--t-gold-text); }
.btn--ghost-gold:hover { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

/* ---------- Badges ---------- */
.badge-gamme {
  display: inline-flex; align-items: center; padding: 4px 14px;
  border-radius: 9999px; background: var(--surface-elevated);
  border: 1px solid var(--gold-disabled); color: var(--t-gold-text);
  font-size: 10px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase;
}
:root[data-theme="light"] .badge-gamme { border-color: rgba(124, 99, 28, 0.35); }

/* ---------- Annonce + Nav ---------- */
.annonce {
  background: var(--surface-deep); border-bottom: 1px solid var(--t-hairline-soft);
  text-align: center; padding: 9px 20px;
  font-size: 10px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-light);
}
:root[data-theme="light"] .annonce { color: var(--t-gold-text); }

.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-hairline);
  height: 74px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  transition: background-color 600ms var(--ease);
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__wordmark {
  font-family: var(--font-serif); font-weight: 300; font-size: 22px;
  letter-spacing: 0.32em; text-indent: 0.32em; color: var(--t-gold-text);
}
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__link {
  font-size: 10px; font-weight: 200; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--t-body); transition: var(--transition); position: relative;
  height: 74px; display: inline-flex; align-items: center;
}
.nav__link:hover, .nav__link.is-active { color: var(--t-gold-text); }
.nav__actions { display: flex; align-items: center; gap: 18px; }

/* Sous-menu boutique */
.nav__drop { position: relative; }
.nav__panel {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  width: 460px; background: var(--surface-deep); border: 1px solid var(--t-hairline);
  padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity 260ms var(--ease), visibility 260ms, translate 260ms var(--ease);
}
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel {
  opacity: 1; visibility: visible; translate: 0 0;
}
.nav__panel-col { display: flex; flex-direction: column; gap: 14px; }
.nav__panel-title {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-gold-text);
}
.nav__panel a { font-size: 13px; font-weight: 200; color: var(--t-body); height: auto; }
.nav__panel a:hover { color: var(--t-gold-text); }

/* Sélection (compteur) */
.nav__selection {
  font-size: 13px; color: var(--t-ink); opacity: 0.85; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 0;
  font-family: var(--font-sans); font-weight: 200; letter-spacing: 1px;
}
.nav__selection:hover { opacity: 1; }
.nav__selection-count { color: var(--t-gold-text); font-family: var(--font-serif); font-size: 17px; }

/* Toggle thème */
.theme-toggle {
  width: 40px; height: 40px; border: 1px solid var(--t-hairline); background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--t-gold-text); transition: var(--transition); padding: 0;
}
.theme-toggle:hover { border-color: var(--t-gold-text); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Flash or au changement de thème (lunettes de soudure) */
.theme-flash {
  position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--flash-x, 90%) var(--flash-y, 40px),
    rgba(212, 175, 90, 0.55), rgba(184, 151, 46, 0.25) 35%, transparent 70%);
}

/* Burger mobile */
.nav__burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--t-hairline);
  background: transparent; cursor: pointer; color: var(--t-ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.nav__burger span { display: block; width: 16px; height: 1px; background: currentColor; transition: var(--transition); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; border-bottom: 1px solid var(--t-hairline);
  background: var(--obsidian);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,13,11,0.86) 0%, rgba(14,13,11,0.55) 48%, rgba(14,13,11,0.20) 100%);
}
.hero__content { position: relative; z-index: 2; width: 100%; }
.hero__inner { max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.hero__kicker { display: flex; align-items: center; gap: 16px; }
.hero__kicker-line { width: 44px; height: 1px; background: var(--gold); }
.hero .display-xl, .hero .lead { color: var(--ink); }
.hero .lead { color: var(--body-strong); max-width: 500px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__scroll-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.hero__scroll-line { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); }

/* Hero centré (bijou permanent) */
.hero--center { justify-content: center; text-align: center; height: 88vh; min-height: 0; }
.hero--center .hero__inner { max-width: 900px; align-items: center; margin: 0 auto; }
.hero__scrim--full { background: rgba(14, 13, 11, 0.5); }

/* ---------- Cartes / grilles ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.card {
  background: var(--surface); border: 1px solid var(--t-hairline);
  overflow: hidden; transition: var(--transition);
}
.card:hover { border-color: var(--gold); }
.card__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.card__title { font-family: var(--font-sans); font-weight: 300; font-size: 18px; letter-spacing: 2px; color: var(--t-ink); }

.quote-card {
  background: var(--surface-elevated); border: 1px solid var(--t-hairline);
  padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.quote-card__stars { color: var(--t-gold-text); letter-spacing: 3px; }
.quote-card__text {
  font-family: var(--font-serif); font-weight: 300; font-size: 21px; line-height: 1.4;
  color: var(--t-body-strong); margin: 0;
}
.quote-card__author { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--t-muted); }

/* ---------- Prix ---------- */
.price { font-family: var(--font-serif); font-weight: 300; font-size: 32px; letter-spacing: 1px; color: var(--t-gold-text); }
.price--sm { font-size: 22px; }

/* ---------- Boutique : panneaux chaînes (scrollytelling) ---------- */
.chaines { position: relative; }
.chaine-panel { padding: 64px 0; scroll-margin-top: 90px; }
.chaine-panel__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.chaine-panel__media { position: relative; padding: 26px; }
.chaine-panel__halo {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(184,151,46,0.14), transparent 68%);
}
:root[data-theme="light"] .chaine-panel__halo {
  background: radial-gradient(ellipse at center, rgba(184,151,46,0.20), transparent 68%);
}
.chaine-panel__img {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto;
  aspect-ratio: 1; object-fit: cover; background: var(--surface-deep);
  border: 1px solid var(--t-hairline);
}
.chaine-panel__thumbs { display: flex; gap: 12px; justify-content: center; margin-top: 16px; position: relative; }
.chaine-panel__thumb {
  width: 64px; height: 64px; object-fit: cover; cursor: pointer;
  border: 1px solid var(--t-hairline); opacity: 0.7; transition: var(--transition);
  background: var(--surface-deep); padding: 0;
}
.chaine-panel__thumb.is-active, .chaine-panel__thumb:hover { border-color: var(--gold); opacity: 1; }
.chaine-panel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.chaine-panel__info { display: flex; flex-direction: column; gap: 20px; }
.chaine-panel__name { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: 3px; }
.chaine-panel__desc { max-width: 420px; font-size: 15px; line-height: 1.9; color: var(--t-body); margin: 0; }
.chaine-panel__label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-muted); margin-top: 6px; }
.poses { display: flex; flex-wrap: wrap; gap: 10px; }
.pose-btn {
  font-size: 12px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
  padding: 11px 18px; cursor: pointer; transition: var(--transition);
  background: transparent; color: var(--t-body); border: 1px solid var(--t-hairline);
}
.pose-btn:hover { border-color: var(--t-gold-text); color: var(--t-gold-text); }
.pose-btn.is-active { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }
.chaine-panel__buy { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; }

/* Sommaire de gamme (vignettes) */
.gamme-index { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.gamme-index a {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 10px; border: 1px solid transparent; transition: var(--transition);
}
.gamme-index a:hover { border-color: var(--t-hairline); }
.gamme-index img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--t-hairline); }
.gamme-index span { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--t-muted); }
.gamme-index a:hover span { color: var(--t-gold-text); }

/* ---------- Luxe (or massif) ---------- */
.luxe-list { display: flex; flex-direction: column; border: 1px solid var(--t-hairline); }
.luxe-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 28px 36px; border-bottom: 1px solid var(--t-hairline);
}
.luxe-row:last-child { border-bottom: none; }
.luxe-row__name { font-family: var(--font-serif); font-weight: 300; font-size: 26px; letter-spacing: 2px; color: var(--t-ink); }
.luxe-row__dots { flex: 1; border-bottom: 1px dotted var(--t-hairline); transform: translateY(-6px); }

/* ---------- Étapes 01/02/03 ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.step { padding: 72px 48px; border-right: 1px solid var(--t-hairline); display: flex; flex-direction: column; gap: 14px; }
.step:last-child { border-right: none; }
.step__num { font-family: var(--font-serif); font-weight: 300; font-size: 38px; letter-spacing: 3px; color: var(--t-gold-num); }
.step__title { font-family: var(--font-sans); font-weight: 300; font-size: 18px; letter-spacing: 2px; color: var(--t-ink); }
.step p { color: var(--t-muted); margin: 0; line-height: 1.8; }

/* ---------- Split éditorial ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split__media { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--t-hairline); }
.split__content { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Valeurs ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.value { display: flex; flex-direction: column; gap: 14px; text-align: center; align-items: center; }
.value__glyph { color: var(--t-gold-text); font-size: 22px; }
.value__title { font-family: var(--font-sans); font-weight: 300; font-size: 18px; letter-spacing: 2px; color: var(--t-ink); }
.value p { font-size: 13px; color: var(--t-muted); margin: 0; line-height: 1.8; }

/* ---------- Fil d'or au scroll (La Maison / Bijou permanent) ---------- */
.follow-chain { position: fixed; top: 74px; bottom: 0; left: 44px; width: 26px; z-index: 40; pointer-events: none; }
.follow-chain__track {
  position: absolute; left: 12px; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(var(--surface) 0 6px, rgba(184,151,46,0.32) 6px 13px);
}
.follow-chain__fill {
  position: absolute; left: 12px; top: 0; bottom: 0; width: 1px;
  transform-origin: top; transform: scaleY(0); background: var(--gold); opacity: 0.55;
}
.follow-chain__bead { position: absolute; left: 1px; top: 0; width: 24px; height: 24px; color: var(--gold); }

/* Le fil d'or est en position fixed et occupe la bande 44px → 70px. Le contenu, lui,
   est centré dans un conteneur de 1280px max avec 40px de marge : tant que la fenêtre
   n'est pas assez large, cette marge vaut exactement 40px et le texte passe SOUS le fil.
   La gouttière naturelle — (100vw - 1280px) / 2 + 40px — ne dégage les 70px du fil qu'à
   partir de ~1392px ; en dessous, il faut la réserver à la main, sinon le fil chevauche
   le texte sur tous les écrans de portable.
   La marge est mise des deux côtés pour que les blocs centrés de la page le restent. */
@media (min-width: 769px) and (max-width: 1391px) {
  body[data-page="maison"] .container { padding-left: 96px; padding-right: 96px; }
}

/* ---------- Réservation ---------- */
.rdv-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--t-hairline); }
.rdv-col { padding: 44px; display: flex; flex-direction: column; gap: 32px; }
.rdv-col--left { border-right: 1px solid var(--t-hairline); }
.rdv-field { display: flex; flex-direction: column; gap: 16px; }
.rdv-field__label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-muted); }
.mode-btn {
  text-align: left; padding: 16px 18px; cursor: pointer; transition: var(--transition);
  display: flex; flex-direction: column; gap: 4px;
  background: transparent; border: 1px solid var(--t-hairline); width: 100%;
}
.mode-btn__title { font-size: 15px; font-weight: 300; letter-spacing: 1px; color: var(--t-ink); }
.mode-btn__desc { font-size: 13px; color: var(--t-muted); }
.mode-btn:hover { border-color: var(--t-gold-text); }
.mode-btn.is-active { background: var(--surface-elevated); border-color: var(--gold); }
.mode-btn.is-active .mode-btn__title { color: var(--t-gold-text); }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__wd { text-align: center; font-size: 11px; letter-spacing: 2px; color: var(--t-muted-soft); text-transform: uppercase; padding-bottom: 4px; }
.cal__day {
  aspect-ratio: 1; border: 1px solid var(--t-hairline); background: transparent;
  color: var(--t-body); cursor: pointer; font-family: var(--font-serif); font-size: 16px;
  transition: var(--transition); padding: 0;
}
.cal__day:hover:not(:disabled) { border-color: var(--t-gold-text); color: var(--t-gold-text); }
.cal__day.is-active { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }
.cal__day:disabled { opacity: 0.25; cursor: default; }
.cal__day--empty { visibility: hidden; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; }
.cal__month { font-family: var(--font-serif); font-size: 18px; letter-spacing: 1px; color: var(--t-ink); }
.cal__arrow {
  width: 34px; height: 34px; border: 1px solid var(--t-hairline); background: transparent;
  color: var(--t-ink); cursor: pointer; transition: var(--transition); padding: 0;
}
.cal__arrow:hover:not(:disabled) { border-color: var(--t-gold-text); color: var(--t-gold-text); }
.cal__arrow:disabled { opacity: 0.25; cursor: default; }

.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-btn {
  padding: 9px 16px; cursor: pointer; font-size: 13px; letter-spacing: 1px;
  transition: var(--transition); background: transparent; color: var(--t-body);
  border: 1px solid var(--t-hairline);
}
.slot-btn:hover { border-color: var(--t-gold-text); color: var(--t-gold-text); }
.slot-btn.is-active { background: var(--gold); color: var(--obsidian); border-color: var(--gold); }

.rdv-confirm {
  max-width: 520px; margin: 0 auto; background: var(--surface-elevated);
  border: 1px solid var(--gold); padding: 56px; text-align: center;
  display: none; flex-direction: column; align-items: center; gap: 24px;
}
.rdv-confirm.is-visible { display: flex; }

.selection-recap { border: 1px solid var(--t-hairline); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.selection-recap__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--t-body); }
.selection-recap__remove { background: none; border: none; color: var(--t-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.selection-recap__remove:hover { color: var(--error); }

/* ---------- Formulaires ---------- */
.input, .textarea {
  width: 100%; background: var(--surface-elevated); color: var(--t-ink);
  font-family: var(--font-sans); font-weight: 200; font-size: 14px; letter-spacing: 0.5px;
  padding: 12px 16px; border: 1px solid var(--t-hairline); outline: none;
  transition: var(--transition); border-radius: 0;
}
.input { height: 44px; }
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .textarea:focus { border-color: var(--gold); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-muted); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--surface-deep); padding: 96px 40px; text-align: center; border-top: 1px solid var(--t-hairline); }
.cta-band__inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-deep); border-top: 1px solid var(--t-hairline); padding: 72px 40px 40px; }
.footer__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__title { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-gold-text); }
.footer a, .footer__text { font-size: 13px; color: var(--t-muted); line-height: 1.8; }
.footer a:hover { color: var(--t-gold-text); }
.footer__bottom {
  max-width: var(--maxw); margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--t-hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--t-muted-soft);
}

/* ---------- Journal ---------- */
.article { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.article p { font-size: 15px; line-height: 2; color: var(--t-body); margin: 0; }
.article h2 { font-size: 28px; letter-spacing: 2px; margin-top: 16px; }

/* ---------- Révélations (GSAP prend le relais) ---------- */
.js [data-reveal], .js [data-hero] { opacity: 0; }
.no-js [data-reveal], .no-js [data-hero] { opacity: 1; }

/* ---------- Teaser Journal (accueil) ---------- */
.journal-teaser {
  max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid var(--t-hairline);
}
.journal-teaser > img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.journal-teaser__body {
  padding: 56px; display: flex; flex-direction: column; gap: 22px;
  justify-content: center; background: var(--surface-elevated);
}
@media (max-width: 768px) {
  .journal-teaser { grid-template-columns: 1fr; }
  .journal-teaser > img { min-height: 240px; }
  .journal-teaser__body { padding: 32px 24px; }
}

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--obsidian); padding: 12px 20px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .gamme-index { grid-template-columns: repeat(4, 1fr); }
  .nav__links { gap: 22px; }
}
/* Menu burger dès 1100px, et non 768px : entre les deux, les cinq libellés de la nav
   ne tiennent plus sur une ligne. Ils se repliaient sur deux lignes et venaient coller
   au mot ORMÉRA (0px d'écart à 1024px) — c'est-à-dire sur la plupart des portables. */
@media (max-width: 1100px) {
  .nav__links {
    display: none; position: fixed; inset: 74px 0 auto 0; z-index: 70;
    background: var(--surface-deep); border-bottom: 1px solid var(--t-hairline);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 24px 24px;
    /* Avec le sous-menu boutique déplié, le menu dépasse l'écran d'un petit téléphone
       (805px de haut pour 667px de viewport) : en position fixed et sans scroll, les
       derniers liens devenaient inatteignables. */
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { height: 52px; font-size: 12px; }
  .nav__burger { display: inline-flex; }

  /* Le sous-menu boutique était purement masqué sur mobile : les gammes Or laminé et
     Or massif devenaient introuvables depuis le menu, il fallait dérouler toute la
     page Essentiel pour tomber sur le lien vers la suivante. On le déplie ici, à même
     le menu, au lieu de le supprimer. */
  .nav__drop { width: 100%; }
  .nav__drop .nav__panel {
    position: static; transform: none; translate: none;
    opacity: 1; visibility: visible; width: 100%;
    background: transparent; border: none;
    grid-template-columns: 1fr; gap: 22px;
    padding: 4px 0 20px 14px;
    border-left: 1px solid var(--t-hairline);
    margin-left: 2px;
  }
  .nav__panel a { height: auto; padding: 7px 0; font-size: 13px; }
  /* Déplié dans le menu, le sous-menu répétait deux liens déjà présents juste en
     dessous en tant qu'entrées principales. On masque les doublons, pas la colonne :
     « Le Journal » n'a pas d'autre point d'entrée dans la navigation. */
  .nav__panel-col--exp a[href="/bijou-permanent"],
  .nav__panel-col--exp a[href="/rendez-vous"] { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav { padding: 0 20px; }
  /* Sur 390 px, la marque très espacée (183 px) plus les actions (198 px) dépassaient
     les 350 px disponibles : la page entière scrollait de 10 px sur le côté. */
  .nav__wordmark { font-size: 17px; letter-spacing: 0.18em; text-indent: 0.18em; }
  .nav__actions { gap: 10px; }
  .hero { min-height: 78vh; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--t-hairline); padding: 40px 20px; }
  .step:last-child { border-bottom: none; }
  .split, .chaine-panel__grid { grid-template-columns: 1fr; gap: 32px; }
  .rdv-grid { grid-template-columns: 1fr; }
  .rdv-col--left { border-right: none; border-bottom: 1px solid var(--t-hairline); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Le fil d'or était simplement supprimé sur mobile. Il est la signature de la page :
     on le garde, resserré contre le bord (4px → 30px), et on réserve la gouttière du
     contenu en conséquence — sinon il repasserait sous le texte, comme sur desktop. */
  .follow-chain { left: 4px; }
  body[data-page="maison"] .container { padding-left: 52px; padding-right: 20px; }
  .gamme-index { grid-template-columns: repeat(4, 1fr); }
  .values { grid-template-columns: 1fr 1fr; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gamme-index { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; border: 1px solid var(--t-hairline); }
.contact-form { padding: 44px; border-right: 1px solid var(--t-hairline); display: flex; flex-direction: column; gap: 20px; }
.contact-info { padding: 44px; background: var(--surface-deep); display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 768px) {
  .contact-form { border-right: none; border-bottom: 1px solid var(--t-hairline); }
}

/* ---------- Pages légales ---------- */
.legal { line-height: 1.9; }
.legal__block { margin-bottom: 44px; }
.legal__block h2 {
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 1px; color: var(--t-ink); margin-bottom: 16px;
}
.legal__block p, .legal__block li { color: var(--t-body); font-size: 15px; line-height: 1.9; }
.legal__block p { margin-bottom: 14px; }
.legal__block ul { padding-left: 20px; margin-bottom: 14px; }
.legal__block li { margin-bottom: 10px; }
.legal__block a { color: var(--t-gold-text); text-decoration: underline; text-underline-offset: 3px; }
.legal__block strong { color: var(--t-body-strong); font-weight: 400; }

/* ---------- Panier ---------- */
.panier-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.panier-items { display: flex; flex-direction: column; gap: 16px; }
.panier-item {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 20px; align-items: center;
  border: 1px solid var(--t-hairline); padding: 16px; background: var(--surface-elevated);
}
.panier-item__img { width: 88px; height: 88px; object-fit: cover; }
.panier-item__name { font-family: var(--font-serif); font-weight: 300; font-size: 20px; letter-spacing: 1px; color: var(--t-ink); }
.panier-item__meta { font-size: 12px; color: var(--t-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.panier-item__remove {
  background: none; border: none; color: var(--t-muted); cursor: pointer;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 8px;
}
.panier-item__remove:hover { color: var(--t-gold-text); }
.panier-summary { border: 1px solid var(--t-hairline); background: var(--surface-deep); padding: 32px; }
.panier-summary__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 14px; color: var(--t-body); }
.panier-summary__row--accent { color: var(--t-ink); font-size: 15px; }
@media (max-width: 768px) {
  .panier-grid { grid-template-columns: 1fr; }
}

/* ---------- Bandeau cookies ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--surface-deep); border-top: 1px solid var(--gold);
}
.cookie-banner__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.cookie-banner__title {
  font-family: var(--font-serif); font-weight: 300; font-size: 18px;
  letter-spacing: 1px; color: var(--t-ink); display: block; margin-bottom: 8px;
}
.cookie-banner__text p { font-size: 13px; line-height: 1.7; color: var(--t-body); max-width: 720px; }
.cookie-banner__text a { color: var(--t-gold-text); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__prefs { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.cookie-pref { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--t-body); line-height: 1.5; }
.cookie-pref strong { color: var(--t-body-strong); font-weight: 400; }
.cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-banner__actions .btn { font-size: 11px; padding: 12px 20px; }
.footer__cookie-link {
  background: none; border: none; color: var(--t-muted); cursor: pointer;
  font-size: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.footer__cookie-link:hover { color: var(--t-gold-text); }
@media (min-width: 769px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookie-banner__actions { flex-shrink: 0; }
}

/* ============================================================
   Administration (page privée /admin)
   ============================================================ */
/* L'attribut hidden pose display:none, mais une règle de classe qui redéfinit
   display l'écrase silencieusement : sans ceci, l'écran de connexion resterait
   affiché par-dessus l'application même une fois connectée. */
.admin-login[hidden], .admin[hidden], .js-panel[hidden] { display: none; }

.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.admin-login__card {
  width: 100%; max-width: 380px; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  border: 1px solid var(--t-hairline); background: var(--surface-deep); padding: 40px 32px;
}
.admin-login__card .field { width: 100%; text-align: left; }

.admin__bar {
  position: sticky; top: 0; z-index: 60; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; background: var(--nav-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--t-hairline);
}
.admin__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--t-hairline); padding: 0 32px; overflow-x: auto; }
.admin__tab {
  background: transparent; border: none; cursor: pointer;
  padding: 18px 24px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--t-muted); border-bottom: 1px solid transparent; transition: var(--transition);
  white-space: nowrap;
}
.admin__tab:hover { color: var(--t-body); }
.admin__tab.is-active { color: var(--t-gold-text); border-bottom-color: var(--gold); }
.admin__body { padding: 40px 32px 96px; }

/* Le tableau déborde sur mobile : il scrolle dans son propre cadre, jamais la page. */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--t-hairline); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.admin-table th {
  text-align: left; padding: 14px 16px; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--t-muted); font-weight: 300;
  border-bottom: 1px solid var(--t-hairline); white-space: nowrap;
}
.admin-table td { padding: 16px; border-bottom: 1px solid var(--t-hairline); color: var(--t-body); }
.admin-table tr:last-child td { border-bottom: none; }

.statut {
  display: inline-block; padding: 4px 10px; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor;
}
.statut--en_attente_paiement { color: #b08a3e; }
.statut--acompte_paye { color: var(--t-gold-text); }
.statut--rdv_pris { color: #6a9fb5; }
.statut--honore { color: #6ba368; }
.statut--annule { color: #a06060; }

.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--t-hairline); border: 1px solid var(--t-hairline); }
.admin-kpi { background: var(--surface); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.admin-kpi__label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-muted); }
.admin-kpi__value { font-family: var(--font-serif); font-size: 32px; font-weight: 300; color: var(--t-gold-text); }
.admin-stat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--t-hairline); }
.admin-stat strong { font-family: var(--font-serif); font-size: 20px; font-weight: 300; color: var(--t-ink); }

@media (max-width: 900px) {
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .admin__bar, .admin__tabs { padding: 0 20px; }
  .admin__body { padding: 32px 20px 80px; }
  .admin__tab { padding: 16px 16px; }
  /* La marque + l'e-mail + le bouton débordaient de 73px sur un écran de 390px.
     L'e-mail est déjà connu de la personne connectée : on le masque en premier. */
  .admin__bar .js-admin-compte { display: none; }
  .admin__bar .nav__wordmark { font-size: 14px; letter-spacing: 0.2em; text-indent: 0.2em; }
}
@media (max-width: 480px) {
  .admin-kpis { grid-template-columns: 1fr; }
}

/* Onglet Compte : cartes côte à côte */
.admin-compte { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.admin-carte { border: 1px solid var(--t-hairline); background: var(--surface-deep); padding: 32px; }
.admin-alerte {
  border: 1px solid var(--error); color: var(--error);
  padding: 16px 20px; margin-bottom: 24px; font-size: 13px; line-height: 1.7;
}