/* ============================================================
   SculptLab — En-tête commun (chrome)
   Aligne signature + menu + bascule FR/EN + footer + cookies + titre
   sur la page d'accueil, pour toutes les pages du site.
   Chargée APRÈS le <style> de chaque page : !important sur les
   propriétés porteuses pour neutraliser les anciennes règles.
   ============================================================ */


:root{
  --turquoise-500:#64eecd;
  --pink-hot:#ff007f;
  --pink-500:#ff66a3;
  --pink-600:#f23d86;
  --ink-900:#1a1a1a;
  --ink-800:#222222;
  --ink-700:#333333;
  --line-300:rgba(0,0,0,.15);
  --gold-500:#ffdd00;
  --gold-600:#ffd700;
  --orange-500:#ff6a00;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --fw-bold:700;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --radius-sm:5px;
  --radius-pill:999px;
  --gutter-page-sm:20px;
  --ease-soft:cubic-bezier(.25,.1,.25,1);
  --dur-base:.3s;
}

/* ---- Signature (marque) : blanche, comme l'accueil ---- */
.signature{
  position:absolute !important;
  top:24px !important;
  left:clamp(20px,4vw,56px) !important;
  z-index:20 !important;
  height:54px !important;
  width:auto !important;
  filter:brightness(0) invert(1) !important;
}

/* ---- Navigation desktop ---- */
.header-menu{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  z-index:20 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:clamp(16px,2.2vw,34px) !important;
  padding:28px clamp(20px,4vw,56px) !important;
  flex-wrap:wrap !important;
  color:#fff !important;
}
.header-menu > a{
  display:inline !important;
  color:#fff !important;
  text-decoration:none !important;
  font-family:var(--font-body) !important;
  font-weight:var(--fw-bold) !important;
  font-size:var(--fs-18) !important;
  white-space:nowrap !important;
}
.header-menu > a:hover{ text-decoration:underline !important; }
.header-menu > .lang-toggle{ display:inline-flex !important; }

/* ---- Bouton hamburger (mobile) ---- */
.mobile-menu-toggle{
  display:none !important;
  position:absolute !important;
  top:16px !important;
  right:clamp(16px,4vw,40px) !important;
  z-index:40 !important;
  align-items:center; justify-content:center;
  background:transparent !important;
  border:none !important;
  color:#fff !important;
  font-size:32px !important;
  line-height:1 !important;
  cursor:pointer;
  padding:6px !important;
  -webkit-tap-highlight-color:transparent !important;  /* pas de bloc bleu au tap (mobile) */
}
/* Pas de halo de focus à la souris/au tap ; on garde un repère pour le clavier */
.mobile-menu-toggle:focus{ outline:none !important; }
.mobile-menu-toggle:focus-visible{ outline:2px solid #fff !important; outline-offset:2px !important; border-radius:6px !important; }

/* ---- Menu mobile déroulant ---- */
.mobile-menu{
  display:none !important;            /* masqué par défaut ; affiché via .active */
  position:absolute !important;
  top:62px !important;
  right:clamp(16px,4vw,40px) !important;
  left:auto !important;
  z-index:40 !important;
  flex-direction:column !important;
  align-items:stretch !important;   /* alignement identique sur toutes les pages */
  text-align:left !important;
  gap:16px !important;
  background:#fff !important;
  border:none !important;
  border-radius:12px !important;
  padding:20px 22px !important;
  box-shadow:0 10px 34px rgba(0,0,0,.22) !important;
  min-width:210px !important;
}
.mobile-menu a{
  color:var(--ink-900) !important;
  text-decoration:none !important;
  border:none !important;
  padding:0 !important;
  text-align:left !important;
  font-family:var(--font-body) !important;
  font-weight:var(--fw-bold) !important;
  font-size:var(--fs-18) !important;
}
.mobile-menu a:hover{ color:var(--pink-hot) !important; }
.mobile-menu.active{ display:flex !important; }

/* ---- Bascule de langue (pilule FR · EN) ---- */
.lang-toggle{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1px solid var(--line-300) !important;
  border-radius:var(--radius-pill) !important;
  background:rgba(255,255,255,.75) !important;
  padding:4px 8px !important;
  font-family:var(--font-body) !important;
  font-weight:var(--fw-bold) !important;
}
.lang-toggle span{ opacity:.5; }
.lang-toggle button{
  border:none !important;
  background:transparent;
  font:inherit;
  color:var(--ink-900);
  padding:2px 10px !important;
  cursor:pointer;
  opacity:.6;
  border-radius:var(--radius-pill) !important;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.lang-toggle button:hover{ opacity:.85; }
.lang-toggle button.active{ opacity:1 !important; background:var(--ink-900) !important; color:#fff !important; }

/* ---- Footer ---- */
footer{
  background:var(--ink-700) !important;
  color:#fff !important;
  text-align:center !important;
  font-family:var(--font-body) !important;
}
footer a{
  color:var(--gold-500) !important;
  text-decoration:none !important;
  transition:color var(--dur-base) var(--ease-soft);
}
footer a:hover{ color:var(--orange-500) !important; }

/* ---- Bannière cookies ---- */
#cookie-banner{
  background:var(--ink-800) !important;
  color:#fff !important;
  font-family:var(--font-body) !important;
}
#cookie-banner a{ color:var(--gold-600) !important; text-decoration:underline !important; }
#close-cookie-banner,
#cookie-banner button{
  background:var(--gold-600) !important;
  color:var(--ink-800) !important;
  border:none !important;
  padding:8px 18px !important;
  cursor:pointer;
  font-weight:var(--fw-bold) !important;
  border-radius:var(--radius-sm) !important;
  font-family:inherit !important;
}
#cookie-banner{ gap:12px !important; flex-wrap:wrap !important; }
#cookie-banner #refuse-cookie-banner{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.6) !important;
}
#cookie-banner #refuse-cookie-banner:hover{ background:rgba(255,255,255,.12) !important; }

/* ---- Accessibilité / SEO : visible uniquement pour lecteurs d'écran et robots ---- */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ---- Titre de page : Jost blanc, en bas à gauche du banneau ---- */
.main-title{
  font-family:'Jost','Futura','Century Gothic',sans-serif !important;
  font-weight:var(--fw-bold) !important;
  color:#fff !important;
  font-size:2em !important;
  line-height:1.1 !important;
  letter-spacing:-.01em !important;
  margin:0 0 0.3cm clamp(20px,4vw,56px) !important;
  position:relative;
  z-index:10;
}

/* ---- Banneau (hors page d'accueil) : source unique, identique partout ---- */
.section-turquoise{
  background:linear-gradient(135deg,#64eecd 50%,#64f0e5 100%) !important;
  height:5cm !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  position:relative !important;
  margin-bottom:20px !important;
  overflow:visible !important;   /* ne jamais rogner le menu burger */
}

/* ---- Boutons d'action : style unique, identique à l'accueil (.artwork-order) ----
   couvre les fiches (.buy-button), récapitulatifs (.payment-button) et Acquérir (.acq-order).
   Le bouton doré de l'accueil (.cta-button, bloc 1) n'est pas concerné. ---- */
.buy-button, .payment-button, .acq-order{
  display:inline-block !important;
  align-self:flex-start;
  background:var(--pink-500) !important;
  color:#fff !important;
  font-family:var(--font-body) !important;
  font-weight:var(--fw-bold) !important;
  font-size:var(--fs-18) !important;
  min-width:180px;
  text-align:center !important;
  padding:14px 34px !important;
  border:none !important;
  border-radius:var(--radius-pill) !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:transform .12s var(--ease-soft), background .15s var(--ease-soft);
}
.buy-button:hover, .payment-button:hover, .acq-order:hover{
  transform:translateY(-2px) !important;
  background:var(--pink-600) !important;
}

/* ---- Accessibilité : focus ---- */
/* Pas de rectangle de focus (souris). Repère clavier discret = soulignement. */
.header-menu a:focus, .header-menu a:focus-visible,
.mobile-menu a:focus, .mobile-menu a:focus-visible,
.lang-toggle button:focus, .lang-toggle button:focus-visible{ outline:none !important; }
.header-menu a:focus-visible,
.mobile-menu a:focus-visible{ text-decoration:underline !important; }

/* ============================================================
   Responsive — un seul point de rupture chrome (640px), comme l'accueil
   ============================================================ */
@media (max-width:640px){
  .header-menu{ display:none !important; }
  .mobile-menu-toggle{ display:flex !important; }
  .signature{ height:40px !important; top:18px !important; }
  .main-title{ font-size:1.5em !important; }
}
/* Banneau responsive — identique sur toutes les pages */
@media (max-width:768px){
  .section-turquoise{ height:auto !important; min-height:4cm !important; padding:20px !important; }
}
@media (max-width:480px){
  .section-turquoise{ padding:15px !important; margin-bottom:15px !important; }
}

/* --- Pastille d'édition avant la ligne d'édition (doré = limitée, gris = unique) --- */
body[data-sl-edition="limited"] .ed-num::before,
body[data-sl-edition="limited"] #sl-ed-note::before,
body[data-sl-edition="unique"] .ed-num::before,
body[data-sl-edition="unique"] #sl-ed-note::before{
  content:"";
  display:inline-block;
  width:1.1em;height:1.1em;border-radius:50%;
  margin-right:.4em;vertical-align:middle;position:relative;top:-0.08em;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpolygon%20points='12.00,1.00%2014.59,8.44%2022.46,8.60%2016.18,13.36%2018.47,20.90%2012.00,16.40%205.53,20.90%207.82,13.36%201.54,8.60%209.41,8.44'%20fill='white'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:62%;
}
body[data-sl-edition="limited"] .ed-num::before,
body[data-sl-edition="limited"] #sl-ed-note::before{ background-color:#b9982f; }
body[data-sl-edition="unique"] .ed-num::before,
body[data-sl-edition="unique"] #sl-ed-note::before{ background-color:#333333; }