/* ═══════════════════════════════════════════════════════════════════════════
   VITRINE — le socle partagé « Noir joaillier » (14 sept. 2026)

   POURQUOI. Le tableau de bord a été refondu (or profond, titres Fraunces,
   icônes en traits fins, matière) et la vitrine vendait encore avec un jaune
   vif, Inter partout et des émojis en guise d'illustrations. Un prospect qui
   signait découvrait un produit plus haut de gamme que la promesse. Ce fichier
   porte LES MÊMES JETONS que `body.refonte` dans dashboard.html — même or,
   mêmes surfaces, même police de titres — pour que le site et le produit
   parlent d'une seule voix.

   COMMENT ÇA S'ACCROCHE. Une page vitrine l'active en trois gestes :
     <link rel="stylesheet" href="vitrine.css">   ← APRÈS son propre <style>
     <script src="vitrine.js" defer></script>       ← icônes en traits fins
     <body data-vitrine-entete data-vitrine-pied>   ← menu.js injecte nav + pied
   Ses jetons portent les MÊMES noms que ceux que chaque page déclare dans son
   :root (--bg, --gold, --border…) : chargé après, il les remplace, et toute
   la page prend la teinte du dashboard sans qu'on retouche chaque règle.
   Une page qui ne le charge pas ne change pas d'un pixel.

   Il vit dans la liste blanche de pages.yml — sans cette ligne, il ne part
   pas en ligne et la page retombe sur ses anciens jetons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* PAS DE ZOOM AU DOUBLE-TOUCHER (23 sept. 2026). Sur iPhone, deux touchers
   rapides sur le « + » des personnes (ou d'une quantité) faisaient ZOOMER la
   page : Safari y lit un double-toucher. `manipulation` coupe ce geste-là et
   rien d'autre — le pincement à deux doigts reste permis (c'est l'accessibilité
   des malvoyants, on n'y touche jamais : pas de `user-scalable=no`). Et plus de
   délai de 300 ms au toucher. Un élément qui dit `touch-action:none` (le plan
   3D de la salle) garde son réglage : le plus strict gagne. Posé AUSSI sur
   les boutons et liens eux-mêmes : dans une zone qui défile à part (une
   fenêtre, un tiroir de panier), le réglage du `html` ne descend pas. */
html,button,a,input,select,label,[role=button],[onclick]{touch-action:manipulation}

/* La même police de titres que le dashboard : auto-hébergée, même fichier. */
@font-face{font-family:'Fraunces Refonte';font-weight:500 700;font-style:normal;font-display:swap;src:url('media/polices/fraunces-500-700.woff2') format('woff2')}

:root{
  /* Fonds et surfaces — copiés de body.refonte (dashboard.html) */
  --bg:#0a0b0f;--bg-deep:#050507;--surface:#111319;--surface2:#161a22;--surface3:#1c2129;
  --border:#2b303d;--border-soft:#1e2330;
  /* L'or : un seul accent, précis — plus de jaune moutarde plat. */
  --gold:#d9a94c;--gold2:#b8862f;--gold-soft:rgba(217,169,76,.14);--metal-1:#f3dfa8;--metal-2:#c4922f;
  --green:#27c281;--red:#ff5468;--orange:#ffa53d;--blue:#5b8dff;--purple:#8b5cf6;
  --text:#e9ebf1;--text-strong:#ffffff;--text-dim:#b6bccb;--muted:#8a92a3;--muted2:#565c6b;
  --serif:'Fraunces Refonte','Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r-sm:8px;--r:10px;--r-lg:14px;--r-xl:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* Trois retouches du 14 sept. 2026, décidées sur le portable (sans filtre d'écran) : le texte
   secondaire un cran plus clair, le bouton principal un peu plus lumineux (métal-2, luminosité
   et non saturation), et un halo or très discret en haut de page pour donner de la profondeur
   au noir — sans virer au bleu. La palette « Noir joaillier » reste celle-là. */
body{background:radial-gradient(1100px 620px at 50% -12%,rgba(217,169,76,.075),transparent 62%),var(--bg);color:var(--text);font-family:var(--sans)}

/* ── Typographie de titre : Fraunces, comme les grands chiffres du dashboard ── */
.vt-serif{font-family:var(--serif);font-weight:600;letter-spacing:-.6px;line-height:1.06}
.vt-serif em{font-style:normal;background:linear-gradient(120deg,var(--metal-1),var(--gold) 55%,var(--metal-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Surtitre, grand chiffre, note d'origine : les briques que chaque page réutilise ── */
.vt-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);background:var(--gold-soft);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);border-radius:99px;padding:7px 14px 7px 10px}
.vt-eyebrow .vt-ic{width:20px;height:20px;border-radius:6px;background:color-mix(in srgb, var(--gold) 18%, transparent);border:0}
.vt-eyebrow .vt-ic svg{width:13px;height:13px;stroke-width:1.8}
.vt-num{font-family:var(--serif);font-weight:600;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.vt-note{font-size:12px;color:var(--muted);line-height:1.5}
.vt-hairline{height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--gold) 45%, transparent),transparent)}

/* ── Boutons ── */
.btn-or{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;font-weight:800;font-size:15px;padding:14px 30px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;box-shadow:0 12px 26px -12px rgba(217,169,76,.7),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-or:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(217,169,76,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-contour{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--text);font-weight:600;font-size:15px;padding:13px 28px;border-radius:12px;border:1px solid var(--border);cursor:pointer;text-decoration:none;font-family:inherit;transition:border-color .2s,color .2s,background .2s}
.btn-contour:hover{border-color:color-mix(in srgb, var(--gold) 45%, transparent);color:var(--gold);background:color-mix(in srgb, var(--gold) 6%, transparent)}

/* ── Icône en traits fins (vitrine.js remplit [data-icone]) ── */
.vt-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:color-mix(in srgb, var(--gold) 12%, transparent);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);color:var(--gold);flex-shrink:0}
.vt-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vt-ic.sm{width:32px;height:32px;border-radius:10px}.vt-ic.sm svg{width:16px;height:16px}
.vt-ic.vert{background:color-mix(in srgb, var(--green) 12%, transparent);border-color:color-mix(in srgb, var(--green) 30%, transparent);color:var(--green)}
.vt-ic.rouge{background:color-mix(in srgb, var(--red) 12%, transparent);border-color:color-mix(in srgb, var(--red) 30%, transparent);color:var(--red)}

/* ── Carte « tuile » : filet fin, reflet en haut, ombre en couches ── */
.vt-carte{position:relative;background:linear-gradient(165deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.4);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.vt-carte::before{content:'';position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--gold) 45%, transparent),transparent);pointer-events:none}
.vt-carte:hover{border-color:color-mix(in srgb, var(--gold) 30%, var(--border));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.5),0 14px 34px -12px rgba(0,0,0,.65)}

/* ── Pastille de statut (même vocabulaire que le dashboard) ── */
.vt-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:5px 11px;border-radius:99px;border:1px solid var(--border);color:var(--text-dim);background:var(--surface2)}
.vt-pill.or{color:var(--gold);border-color:color-mix(in srgb, var(--gold) 40%, transparent);background:var(--gold-soft)}
.vt-pill.vert{color:var(--green);border-color:color-mix(in srgb, var(--green) 40%, transparent);background:color-mix(in srgb, var(--green) 12%, transparent)}
.vt-pill.rouge{color:var(--red);border-color:color-mix(in srgb, var(--red) 40%, transparent);background:color-mix(in srgb, var(--red) 12%, transparent)}

/* ═══ L'EN-TÊTE PARTAGÉ (injecté par menu.js quand <body data-vitrine-entete>) ═══ */
.vt-nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;padding:0 40px;display:flex;align-items:center;gap:14px;transition:background .3s,border-color .3s,box-shadow .3s}
.vt-nav.solid{background:color-mix(in srgb, var(--bg) 82%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border-soft);box-shadow:0 2px 20px rgba(0,0,0,.35)}
.vt-nav .logo{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:-.3px}
.vt-nav .logo img{width:30px;height:30px;border-radius:9px;box-shadow:0 6px 16px -6px rgba(0,0,0,.9),0 0 0 1px var(--border)}
.vt-nav .logo .nom,.vt-pied-marque .nom{font-weight:inherit;white-space:nowrap}
.vt-nav .logo span{color:var(--gold)}
.vt-nav-liens{display:flex;align-items:center;gap:22px;margin-left:auto}
.vt-nav-liens>a{color:var(--text-dim);text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .2s}
.vt-nav-liens>a:hover{color:#fff}
.vt-nav .vt-login{color:var(--text-dim);border:1px solid var(--border);padding:8px 16px;border-radius:9px;transition:border-color .2s,color .2s}
.vt-nav .vt-login:hover{border-color:color-mix(in srgb, var(--gold) 45%, transparent);color:#fff}
.vt-nav .vt-cta{background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;font-weight:800;padding:9px 18px;border-radius:9px;box-shadow:0 10px 22px -10px rgba(217,169,76,.7),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s var(--ease)}
.vt-nav .vt-cta:hover{transform:translateY(-1px);color:#1a1305}
.vt-lang{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:3px}
.vt-lang button{font-size:11.5px;font-weight:800;padding:5px 9px;border-radius:6px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;letter-spacing:.4px;transition:background .2s,color .2s}
.vt-lang button.active{background:var(--gold);color:#1a1305}
.vt-lang button:hover:not(.active){color:#fff}
.vt-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:#fff;cursor:pointer;flex-shrink:0;transition:border-color .2s}
.vt-burger:hover{border-color:color-mix(in srgb, var(--gold) 45%, transparent)}
/* Le ☰ se pose lui-même quand la page garde sa propre barre et n'a demandé
   que le tiroir (data-vitrine-tiroir) : presentation.html, un document
   imprimable. Le fond est opaque — il flotte au-dessus du texte. */
.vt-burger-flottant{position:fixed;top:16px;right:16px;z-index:1000;background:var(--surface2);box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
.vt-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
/* Le bouton retour (14 sept. 2026) : sur toute page sauf l'accueil, un petit rond discret avant le logo, qui s'allume or au survol. */
.vt-retour{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);flex-shrink:0;text-decoration:none;transition:border-color .2s,color .2s,transform .2s,box-shadow .2s}
.vt-retour svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg)}
.vt-retour:hover{border-color:color-mix(in srgb, var(--gold) 55%, transparent);color:var(--gold);transform:translateX(-2px);box-shadow:0 8px 18px -10px rgba(217,169,76,.6)}
/* Le panneau ☰ : le même tiroir sur toutes les pages */
.vt-menu{position:fixed;top:72px;right:20px;width:296px;max-height:calc(100vh - 92px);overflow:auto;background:linear-gradient(165deg,var(--surface2),var(--surface));border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);z-index:999;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.vt-menu.open{opacity:1;transform:none;pointer-events:all}
.vt-menu-inner{padding:10px 8px 14px;display:flex;flex-direction:column}
.vt-menu .lbl{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted2);padding:10px 12px 6px}
.vt-menu a{display:flex;align-items:center;gap:10px;color:var(--text-dim);text-decoration:none;font-size:13.5px;font-weight:500;padding:9px 12px;border-radius:9px;transition:background .2s,color .2s;background:transparent;border:0;box-shadow:none;margin:0;width:auto}
.vt-menu a .ico{display:inline-flex;width:22px;justify-content:center;color:var(--muted)}
.vt-menu a .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vt-menu a:hover{background:rgba(255,255,255,.05);color:#fff}
.vt-menu a.actif{background:var(--gold-soft);color:var(--gold)}
.vt-menu a.actif .ico{color:var(--gold)}
.vt-menu .sep{height:1px;background:var(--border-soft);margin:6px 8px}
.vt-menu .lang-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px;font-size:12px;color:var(--muted)}
.vt-menu .cta-wrap{padding:8px 8px 4px}
.vt-menu .cta-wrap a{display:block;text-align:center;background:linear-gradient(155deg,var(--metal-1),var(--metal-2));color:#1a1305;font-weight:800;border-radius:10px;padding:11px;justify-content:center}
.vt-menu .cta-wrap a:hover{color:#1a1305;background:linear-gradient(155deg,var(--metal-1),var(--metal-2))}
@media (max-width:900px){
  .vt-nav{padding:0 18px;height:60px}
  .vt-nav-liens{display:none}
  .vt-burger{margin-left:auto}
  .vt-menu{top:68px;right:12px;left:12px;width:auto}
}

/* ═══ LE PIED DE PAGE PARTAGÉ (injecté par menu.js quand <body data-vitrine-pied>) ═══ */
.vt-pied{border-top:1px solid var(--border-soft);position:relative;background:linear-gradient(180deg,var(--bg),var(--bg-deep))}
.vt-pied::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:min(600px,70%);height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--gold) 45%, transparent),transparent)}
.vt-pied-main{max-width:1060px;margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.vt-pied-marque{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:800;color:#fff}
.vt-pied-marque img{width:30px;height:30px;border-radius:9px;box-shadow:0 0 0 1px var(--border)}
.vt-pied-marque span{color:var(--gold)}
.vt-pied p{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.65;max-width:240px}
.vt-pied .col-t{font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px}
.vt-pied .col a{display:block;font-size:13px;color:var(--text-dim);text-decoration:none;margin-bottom:9px;transition:color .2s;background:transparent;border:0;box-shadow:none;width:auto;padding:0}
.vt-pied .col a:hover{color:var(--gold)}
.vt-pied-bas{max-width:1060px;margin:0 auto;padding:18px 24px;border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted)}
.vt-pied-bas span{color:var(--gold)}
@media (max-width:900px){.vt-pied-main{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:580px){.vt-pied-main{grid-template-columns:1fr}}
