/* Sandjiry Shop — la douceur : on garde la structure « grande marque » (sport.css),
   mais l'écriture devient celle de la beauté. Grands titres en drifriz (police d'Hervé, hampes en volute),
   titres et prix en Fraunces douce, texte en Jost. Se charge après sport.css. */

@font-face {
  font-family: "drifriz";
  src: url("fonts/drifriz-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --doux: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --volute: "drifriz", "Jost", sans-serif;
}
/* Fraunces dans sa version la plus ronde (axe SOFT) et ses grands corps (opsz) */
h1, h2, h3, .doux, .card-name, .rail-nom, .tuile-texte strong, .sheet-price, .engagements strong,
.rituel-q legend, .rituel-titre, .vigilance h3, .verif h3, .footer-phrase, .card-prix, .hero-tag-prix {
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
body { font-family: var(--sans); font-weight: 400; letter-spacing: .005em; }

/* ---------- Titres : plus de capitales, de la courbe ---------- */
h1, h2, h3 { font-family: var(--doux); font-weight: 350; text-transform: none; letter-spacing: -.01em; }
h2 { font-family: var(--volute); font-weight: 250; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; letter-spacing: 0; }
h2 em, h1 em { font-family: var(--doux); font-style: italic; font-weight: 300; color: var(--or-texte); }
.eyebrow { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .22em; }

/* ---------- Accueil ---------- */
.hero h1 { font: 250 clamp(3.4rem, 8.4vw, 7.6rem)/1 var(--volute); text-transform: none; letter-spacing: 0; }
.hero h1 em { font-family: var(--doux); font-style: italic; font-weight: 300; color: var(--or); letter-spacing: -.01em; }
.hero-sur { font: 500 .8rem/1 var(--sans); letter-spacing: .26em; }
.hero .lead { font-weight: 300; font-size: 1.08rem; }
.hero-tag-prix { font: 400 1.25rem/1.1 var(--doux); text-transform: none; }

/* ---------- Boutons, liens, navigation : la retenue d'une maison de beauté ---------- */
.btn { font: 500 .86rem/1 var(--sans); letter-spacing: .16em; border-radius: 999px; min-height: 52px; }
.nav-wa, .nav.sur-media .nav-wa { font: 500 .78rem/1 var(--sans); letter-spacing: .14em; border-radius: 999px; }
.nav-links a { font: 400 .84rem/1 var(--sans); letter-spacing: .12em; }
.nav .annonce { font: 400 .76rem/1 var(--sans); letter-spacing: .08em; }
.lien-fleche { font: 500 .8rem/1 var(--sans); letter-spacing: .18em; border-bottom-width: 1px; }
.rail-fleche { border-radius: 999px; border-width: 1px; }

/* ---------- Engagements, rayons, rangée ---------- */
.engagements strong { font: 400 1.25rem/1.15 var(--doux); text-transform: none; letter-spacing: 0; }
.tuile-texte strong { font: 300 clamp(1.6rem, 2.6vw, 2.4rem)/1 var(--doux); text-transform: none; }
.tuile:first-child .tuile-texte strong { font: 250 clamp(2.6rem, 5vw, 4.6rem)/1 var(--volute); }
.tuile-texte span { font: 500 .74rem/1 var(--sans); letter-spacing: .2em; }
.rail-num { font: 250 3rem/1 var(--volute); }
.rail-nom { font: 400 1.12rem/1.2 var(--doux); text-transform: none; letter-spacing: 0; }

/* ---------- Collection ---------- */
.chip { font: 400 .86rem/1 var(--sans); letter-spacing: .1em; border-bottom-width: 2px; }
.chip[aria-pressed="true"] { font-weight: 500; }
.card-name { font: 400 1.12rem/1.2 var(--doux); text-transform: none; letter-spacing: 0; }
.card-prix { font: 500 .72rem/1 var(--sans); letter-spacing: .1em; border-radius: 999px; }
.card-coeur, .card-badge, .card-play { border-radius: 999px; }
.recherche, .select-pill { border-radius: 999px; }

/* ---------- Conseillère, numéros, pied de page ---------- */
.rituel-q legend { font: 400 1.55rem/1.1 var(--doux); text-transform: none; }
.rituel-n { border-radius: 50%; font-family: var(--sans); }
.rituel-choix-btn { font: 400 .9rem/1 var(--sans); letter-spacing: .02em; text-transform: none; border-radius: 999px; }
.rituel-titre { font: 300 2.1rem/1.1 var(--doux); text-transform: none; }
.rituel-piece span { font: 400 .88rem/1.2 var(--doux); text-transform: none; }
.vigilance h3, .verif h3 { font: 400 1.5rem/1.15 var(--doux); text-transform: none; }
.officiel-bloc h3 { font-family: var(--sans); font-weight: 500; }
.numero { border-radius: 999px; }
.verif-form input { border-radius: 999px; }
.footer-phrase { font: 250 clamp(2.4rem, 5vw, 4rem)/1.05 var(--volute); text-transform: none; }
.footer h3 { font-family: var(--sans); font-weight: 500; }

/* ---------- Cabine et pages pièces ---------- */
#sheet-title, .piece-info h1 { font: 300 clamp(2rem, 3.4vw, 2.9rem)/1.05 var(--doux); text-transform: none; }
.sheet-price { font: 400 1.4rem/1 var(--doux); text-transform: none; letter-spacing: 0; }
.size { font: 400 .86rem/1 var(--sans); text-transform: none; letter-spacing: .02em; border-radius: 999px; }
.atelier h1 { font: 250 clamp(2.8rem, 6vw, 4.6rem)/1 var(--volute); }

@media (max-width: 820px) {
  .hero h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .nav-links.ouvert a { font: 300 2rem/1.1 var(--doux); }
  .nav-links.ouvert .nav-lien-extra a { font: 400 1.1rem/1 var(--sans); letter-spacing: .12em; }
  .entete-section h2 { font-size: 2.6rem; }
}

/* En-tête : chaque rayon sur une ligne */
.nav-links { gap: 1.5rem; }
.nav-links a { white-space: nowrap; letter-spacing: .07em; font-size: .8rem; }
@media (max-width: 1240px) and (min-width: 821px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .72rem; letter-spacing: .04em; }
  .nav .logo { font-size: .95rem; }
}
@media (max-width: 820px) {
  .nav-links.ouvert a { text-transform: none; white-space: normal; }
  .nav-links.ouvert .nav-lien-extra a { text-transform: uppercase; }
}
@media (max-width: 1240px) and (min-width: 821px) {
  .nav-wa span { display: none; }
  .nav-wa, .nav.sur-media .nav-wa { padding: 0; width: 44px; height: 44px; justify-content: center; }
}
/* Écrans moyens : les rayons passent dans les tuiles de l'accueil, l'en-tête garde l'essentiel */
@media (max-width: 1080px) and (min-width: 821px) {
  .nav nav { display: none; }
  .nav-panier { margin-left: auto; }
}