/* Sandjiry Shop — la clarté : blanc, gris très doux, texte presque noir, une seule couleur d'accent.
   On garde les polices magazine (Gloock, Noto Serif Display, Jost). Se charge en dernier. */

:root {
  --fond: #fff;
  --gris: #f5f5f7;
  --tuile: #f5f5f7;
  --texte: #1d1d1f;
  --secondaire: #6e6e73;
  --noir: #1d1d1f;
  --accent: #8a6418;           /* l'or bruni de la fleur de lys, réservé aux liens */
  --or: #8a6418;
  --or-texte: #8a6418;
  --rose: #8a6418;
  --rose-fonce: #8a6418;
  --trait: #d2d2d7;
  --rayon: 18px;
  --hauteur-nav: 86px;
}
body { background: var(--fond); color: var(--texte); -webkit-font-smoothing: antialiased; }
::selection { background: #e8dcc2; }

/* ---------- Texte : plus de capitales espacées, des petites tailles nettes ---------- */
.eyebrow, .hero-sur { font: 500 .95rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--secondaire); }
h2 em, h1 em, .hero h1 em, .rituel h2 em, .officiel h2 em { color: var(--secondaire); }
.section-note, .lead { color: var(--secondaire); font-weight: 400; }

/* ---------- Boutons : la pastille pleine et le lien fléché ---------- */
.btn {
  font: 500 1rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  min-height: 46px; padding: 0 1.4rem; border-radius: 999px; box-shadow: none;
}
.btn-blanc, .btn-noir, .footer .btn-blanc { background: var(--noir); color: #fff; border: 0; }
.btn-blanc:hover, .btn-noir:hover, .footer .btn-blanc:hover { background: #000; color: #fff; }
.btn-verre, .btn-contour, .footer .btn-verre {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-verre:hover, .btn-contour:hover, .footer .btn-verre:hover { background: var(--accent); color: #fff; }
.lien-fleche { font: 400 1rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--accent); border: 0; padding: 0; }
.lien-fleche:hover { text-decoration: underline; }
.lien { color: var(--accent); }

/* ---------- Verre : blanc dépoli, plus de verre fumé ---------- */
.verre, .verre-sombre { background: rgba(255, 255, 255, .72); border-color: rgba(0, 0, 0, .06); color: var(--texte); }

/* ---------- En-tête : fine barre blanche dépolie ---------- */
.nav .annonce { background: var(--gris); color: var(--secondaire); font: 400 .78rem/1 var(--sans); letter-spacing: 0; padding: .6rem var(--gouttiere); }
.nav .annonce a { color: var(--accent); font-weight: 400; text-decoration: none; }
.nav-barre, .nav.sur-media .nav-barre {
  height: 52px; background: rgba(255, 255, 255, .8); color: var(--texte);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.nav .logo, .nav.sur-media .logo { color: var(--texte); font-size: 1rem; }
.nav .logo-lys, .nav:not(.sur-media) .logo-lys { color: var(--accent); }
.nav-links a, .nav.sur-media .nav-links a {
  font: 400 .82rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texte); opacity: .8; border: 0;
}
.nav-links a:hover { opacity: 1; border: 0; }
.nav-panier, .nav.sur-media .nav-panier { color: var(--texte); }
.nav-panier:hover, .nav.sur-media .nav-panier:hover { background: rgba(0, 0, 0, .05); }
.nav-panier-n { background: var(--noir); color: #fff; }
.nav-wa, .nav.sur-media .nav-wa {
  background: var(--noir); color: #fff; font: 500 .8rem/1 var(--sans); letter-spacing: 0; text-transform: none;
  min-height: 32px; padding: 0 .95rem; border-radius: 999px;
}
.nav-wa:hover { background: #000; color: #fff; }
.burger span { background: var(--texte); }

/* ---------- Accueil : le titre au centre, l'image dessous, comme une page produit ---------- */
.hero {
  height: auto; min-height: 0; overflow: visible; background: var(--fond); color: var(--texte);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--hauteur-nav) + clamp(3rem, 7vw, 5.5rem)) var(--gouttiere) 0;
}
.hero-texte { order: -1; color: var(--texte); max-width: 900px; justify-items: center; text-align: center; gap: .9rem; }
.hero h1 { font-size: clamp(3.2rem, 7.4vw, 6.6rem); line-height: .98; }
.hero h1 em { color: var(--secondaire); }
.hero .lead { display: block; max-width: 32em; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; opacity: 1; }
.hero .actions { justify-content: center; align-items: center; gap: 1rem 1.6rem; margin-top: .6rem; }
.hero .actions .btn-verre { border: 0; padding: 0; min-height: 0; color: var(--accent); }
.hero .actions .btn-verre:hover { background: none; color: var(--accent); text-decoration: underline; }
.hero .actions .btn-verre svg { display: none; }
.hero .actions .btn-verre::after { content: " ›"; white-space: pre; }
.hero-media {
  position: relative; inset: auto; width: 100%; max-width: var(--large); margin-top: clamp(2.6rem, 5vw, 4rem);
  height: min(78vh, 760px); gap: 12px; background: none;
}
.hero-media img, .hero-media video { border-radius: 24px; }
.hero-side { filter: none; }
.hero-voile, .hero-tag { display: none; }

/* ---------- Engagements : quatre phrases calmes sur fond gris ---------- */
.engagements {
  background: none; color: var(--texte); border: 0; max-width: var(--large); margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 var(--gouttiere); gap: 12px;
}
.engagements li, .engagements li:first-child { border: 0; background: var(--gris); border-radius: var(--rayon); padding: 1.4rem 1.5rem; }
.engagements strong { color: var(--texte); font-size: 1.3rem; }
.engagements span { color: var(--secondaire); opacity: 1; font-size: .9rem; }

/* ---------- Rayons et rangée ---------- */
.tuiles { gap: 12px; }
.tuile { border-radius: var(--rayon); background: var(--gris); }
.tuile::after { background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%); }
.tuile-texte span { color: rgba(255, 255, 255, .85); font: 400 .9rem/1 var(--sans); letter-spacing: 0; text-transform: none; }
.rail { gap: 16px; }
.rail-carte img { border-radius: var(--rayon); }
.rail-num { display: none; }
.rail-cat { color: var(--secondaire); }
.rail-fleche { border: 0; background: var(--gris); color: var(--texte); }
.rail-fleche:hover { background: #e8e8ed; color: var(--texte); }

/* ---------- Collection : pastilles grises, la choisie en noir ---------- */
.filters-bar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.filters { gap: .5rem; padding: .7rem 0; }
.chip, .chip:hover {
  font: 400 .9rem/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--texte);
  background: var(--gris); border: 0; border-radius: 999px; padding: .65rem 1.05rem;
}
.chip:hover { background: #e8e8ed; }
.chip[aria-pressed="true"] { background: var(--noir); color: #fff; border: 0; font-weight: 400; }
.chip-coeur, .chip-coeur[aria-pressed="true"] { color: inherit; }
.recherche, .select-pill { background: var(--gris); border: 0; }
.card-media { border-radius: var(--rayon); }
.card-prix { background: rgba(255, 255, 255, .92) !important; color: var(--texte) !important; font: 500 .74rem/1 var(--sans); letter-spacing: 0; text-transform: none; }
.card-badge-nouveau, .sheet-badge-nouveau { background: var(--noir); }

/* ---------- Conseillère ---------- */
.rituel { max-width: none; padding: clamp(4.5rem, 9vw, 7rem) var(--gouttiere); background: var(--gris); }
.rituel > * { max-width: 1000px; margin-inline: auto; }
.rituel-carte { background: #fff; border: 0; box-shadow: none; border-radius: 28px; }
.rituel-n { background: var(--gris); color: var(--texte); }
.rituel-choix-btn { background: var(--gris); border: 1px solid transparent; }
.rituel-choix-btn:hover { border-color: var(--trait); }
.rituel-choix-btn[aria-pressed="true"] { background: var(--noir); color: #fff; }
.rituel-piece { background: var(--gris); }
.rituel-piece[aria-pressed="true"] { border-color: var(--noir); box-shadow: none; }
.rituel-liste li { background: var(--gris); }

/* ---------- Numéros officiels : sur blanc, sans photo de fond ---------- */
.officiel { color: var(--texte); margin-top: 0; background: var(--fond); }
.officiel .fond-image, .officiel .fond-voile { display: none; }
.officiel .titre-clair, .titre-clair { color: var(--texte); }
.officiel .section-note { color: var(--secondaire); }
.officiel-carte, .vigilance li, .verif { background: var(--gris); border: 0; color: var(--texte); -webkit-backdrop-filter: none; backdrop-filter: none; }
.officiel-bloc h3 { color: var(--secondaire); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.numero { color: var(--texte); background: #fff; border: 1px solid transparent; }
.numero:hover { background: #fff; border-color: var(--trait); }
.numero-tel svg { color: var(--secondaire); }
.officiel-note { color: var(--secondaire); }
.vigilance h3, .verif h3 { color: var(--texte); }
.vigilance p, .verif > p { color: var(--secondaire); opacity: 1; }
.verif-form input { background: #fff; color: var(--texte); border: 1px solid var(--trait); }
.verif-form input::placeholder { color: #86868b; }
.verif-resultat .lien { color: var(--accent); }
.verif-ok { background: #e9f7ee; border-color: #b7e3c6; }
.verif-ok strong::before { color: #1a7f3c; }
.verif-danger { background: #fdecee; border-color: #f4bcc2; }
.verif-danger strong::before { color: #c0283a; }
.verif-attention, .verif-invalide { background: #f7f1e6; border-color: #e6d6b6; }

/* ---------- Pied de page : gris clair, petit texte ---------- */
.footer { background: var(--gris); color: var(--secondaire); font-size: .82rem; }
.footer a:hover { color: var(--texte); }
.footer-haut, .footer-bas { border-color: var(--trait); }
.footer .eyebrow { color: var(--secondaire); }
.footer-phrase { color: var(--texte); }
.footer-cols h3, .footer h3 { color: var(--texte); font: 500 .82rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.footer-cols a[href^="tel:"] { color: var(--texte); }
.footer-lien { color: var(--accent) !important; }
.footer-marque, .footer-marque:hover .logo-lys { color: var(--texte) !important; }
.footer-marque .logo-lys { color: var(--accent); }
.footer-bas { color: #86868b; }

/* ---------- Bouton WhatsApp flottant : sobre ---------- */
.wa-float { background: var(--noir); border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* ---------- Cabine, panier, pages pièces ---------- */
.size, .size:hover { background: var(--gris); border-color: transparent; color: var(--texte); }
.size[aria-pressed="true"] { background: var(--noir); color: #fff; border-color: var(--noir); }
.atelier-piece { border: 0; background: var(--gris); }
.atelier-apercu { background: #fff; }

@media (max-width: 1240px) and (min-width: 821px) {
  .nav-wa, .nav.sur-media .nav-wa { width: 36px; height: 36px; min-height: 36px; padding: 0; }
}
@media (max-width: 820px) {
  :root { --hauteur-nav: 82px; }
  .nav-barre { height: 52px; }
  .nav-wa, .nav.sur-media .nav-wa { width: 36px; height: 36px; min-height: 36px; padding: 0; }
  .hero { padding-top: calc(var(--hauteur-nav) + 2.6rem); }
  .hero h1 { font-size: clamp(2.9rem, 13.5vw, 4.2rem); }
  .hero .lead { font-size: 1.05rem; }
  .hero .actions { display: flex; width: auto; flex-direction: column; }
  .hero .actions .btn { width: auto; }
  .hero-media { height: 72svh; grid-template-columns: 1fr; margin-top: 2.2rem; }
  .hero-media .hero-side { display: none; }
  .engagements { grid-template-columns: 1fr 1fr; gap: 10px; }
  .engagements li, .engagements li:first-child { padding: 1.1rem 1.1rem; border: 0; }
  .nav-links, .nav-links.ouvert { background: #fff; }
  .nav-links.ouvert li { border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .nav-links.ouvert a { color: var(--texte); opacity: 1; }
  .nav-links.ouvert .nav-lien-extra a { color: var(--accent); text-transform: none; letter-spacing: 0; }
  .nav.menu-ouvert .nav-wa { background: var(--noir); color: #fff; }
}

/* Retouches : pas d'ombre sous le verre, sur-titres lisibles partout */
.verre, .verre-sombre, .officiel-carte, .vigilance li, .verif { box-shadow: none; }
.officiel .eyebrow, .rituel .eyebrow, .titre-clair .eyebrow { color: var(--secondaire); }
.nav-wa { flex: none; justify-content: center; }
@media (max-width: 1240px) { .nav-wa, .nav.sur-media .nav-wa { border-radius: 50%; } }