/* =============================================================
   JASP · fondations de la direction artistique (maquette Roméo)
   Maquette dessinée en 1920 px. Toutes les mesures passent par
   --u (1 px de maquette) : 1:1 à 1920 px, proportionnel en dessous.
   ============================================================= */

/* ZT Nature, Zelowtype, licence libre (usage commercial autorisé) */
@font-face { font-family: 'ZT Nature'; src: url('ZTNature-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ZT Nature'; src: url('ZTNature-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'ZT Nature'; src: url('ZTNature-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --u: calc(min(100vw - var(--sbw, 0px), 1920px) / 1920); /* --sbw : largeur de la barre de défilement (Windows) */

  --j-ink: #0e313e;        /* bleu nuit : titres, bouton principal */
  --j-blue: #2682a4;       /* bleu JASP : labels, accents */
  --j-grey-bg: #f4f4f4;    /* fonds de section, champ de recherche */
  --j-grey-text: #9c9c9c;  /* textes secondaires */
  --j-grey-nav: #7e7e7e;   /* menu inactif */
  --j-black: #000;
  --j-white: #fff;
  --j-alert: #ff0000;      /* pastille du panier */

  --j-font: 'ZT Nature', 'Helvetica Neue', Arial, sans-serif;

  --j-radius-section: calc(60 * var(--u));
  --j-radius-pill: calc(55 * var(--u));
  --j-side: calc(41.29 * var(--u));    /* marge des grands fonds gris */
  --j-gutter: calc(137.09 * var(--u)); /* alignement gauche des contenus */
}

.j-page { font-family: var(--j-font); color: var(--j-black); }
.j-page, .j-page *, .j-page *::before, .j-page *::after { box-sizing: border-box; }
/* Spécificité d'un simple élément : bat les styles de Dawn, jamais nos classes */
:where(.j-page) h1, :where(.j-page) h2, :where(.j-page) h3, :where(.j-page) p, :where(.j-page) ul, :where(.j-page) ol { margin: 0; padding: 0; }
:where(.j-page) a { color: inherit; text-decoration: none; }
:where(.j-page) :is(h1, h2, h3) { font-family: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }

/* Grand fond gris arrondi qui encadre une section */
.j-panel {
  margin-inline: var(--j-side);
  background: var(--j-grey-bg);
  border-radius: var(--j-radius-section);
  position: relative;
  overflow: hidden;
}

/* ---------- Typographie (styles de texte Figma) ---------- */
.j-title-1 { /* « Titre 1 » : 96 / 0.9 / -4 % */
  font-family: var(--j-font); font-weight: 400;
  font-size: max(36px, calc(96 * var(--u)));
  line-height: .9; letter-spacing: -0.04em; color: var(--j-ink);
}
.j-title-2 { /* « Titres 2 » : 72 / 0.9 / -4 % */
  font-family: var(--j-font); font-weight: 400;
  font-size: max(30px, calc(72 * var(--u)));
  line-height: .9; letter-spacing: -0.04em; color: var(--j-ink);
}
.j-subtitle { /* « Sous titres semi bold » : 32 / 1 / -2 % */
  font-family: var(--j-font); font-weight: 600;
  font-size: max(20px, calc(32 * var(--u)));
  line-height: 1; letter-spacing: -0.02em; color: var(--j-ink);
}
.j-text { /* « Text » : 24 / 1.2 */
  font-family: var(--j-font); font-weight: 400;
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.2;
}
.j-text--grey { color: var(--j-grey-text); }
.j-label { /* « Labels » : 24 bold capitales, interlettrage 30 % */
  font-family: var(--j-font); font-weight: 700;
  font-size: max(13px, calc(24 * var(--u)));
  line-height: 1; letter-spacing: .3em; text-transform: uppercase;
  color: var(--j-blue);
}

/* ---------- Boutons pilule ---------- */
.j-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: max(44px, calc(62.565 * var(--u)));
  padding-inline: max(18px, calc(28 * var(--u)));
  border-radius: var(--j-radius-pill);
  font-family: var(--j-font); font-weight: 400;
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.08; letter-spacing: -0.02em; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.j-btn:hover { transform: translateY(-1px); }
.j-btn--dark { background: var(--j-ink); color: var(--j-white); }
.j-btn--dark:hover { background: #164a5d; }
.j-btn--light { background: var(--j-white); color: var(--j-black); }
.j-btn--light:hover { background: #eaeaea; }
.j-btn:focus-visible, .j-page a:focus-visible, .j-page button:focus-visible {
  outline: 2px solid var(--j-blue); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .j-btn { transition: none; }
  .j-btn:hover { transform: none; }
}

/* Dawn masque les blocs vides (div:empty) : nos zones visuelles vides restent affichées */
.j-page .j-keep:empty { display: block; }

/* Pages de règles Shopify (/policies/…) : contenu géré par Shopify, mis en forme JASP */
.shopify-policy__container { max-width: 1000px; margin: 40px auto 80px; padding: 48px 56px; border-radius: 40px; background: var(--j-grey-bg); font-family: var(--j-font); font-size: 17px; line-height: 1.6; color: var(--j-grey-nav); }
.shopify-policy__title h1 { margin: 0 0 24px; font-family: var(--j-font); font-weight: 400; font-size: 48px; line-height: .95; letter-spacing: -0.04em; color: var(--j-ink); }
.shopify-policy__body h2, .shopify-policy__body h3 { font-family: var(--j-font); font-weight: 600; letter-spacing: -0.02em; color: var(--j-ink); }
.shopify-policy__body a { color: var(--j-blue); }
@media (max-width: 989px) { .shopify-policy__container { margin: 16px 12px 40px; padding: 24px 20px; border-radius: 24px; } .shopify-policy__title h1 { font-size: 34px; } }