/* =====================================================================
   SYLVAIN STYLE PROPRE — Feuille maîtresse
   Structure :
   0) Variables & reset doux
   1) Header & navigation (lisibilité + spacing)
   2) Hero d’accueil (image ou uni)
   3) Typographie globale & CTA
   4) Menu “Galeries” (sous-menu + anti-doublons)
   5) Accessibilité & systèmes
   6) Helpers / utilitaires
   ===================================================================== */


/* == 0) VARIABLES & RESET DOUX ======================================= */
:root{
  /* Palette signature */
  --sbx-ivory: #F6F3EA;
  --sbx-gold:  #D4AF37;
  --sbx-slate: #2F3541;

  /* Hero : image + cadrage
     -> Change UNIQUEMENT l’URL ci-dessous pour modifier la photo d’accueil. */
  --sbx-hero-url: url("https://sylvain-blanchoud.com/wp-content/uploads/2025/10/paris-sylvain-blanchoud-62-scaled.jpg");
  --sbx-hero-pos: center 42%;

  /* Header overlay (lisibilité menu sur hero) */
  --sbx-header-bg: rgba(10,13,18,.35);     /* fond translucide */
  --sbx-header-bg-sticky: rgba(10,13,18,.55);
  --sbx-header-blur: 8px;                  /* flou de fond */
  --sbx-header-pad: clamp(8px, 1.2vw, 14px);
  --sbx-header-link: #F6F3EA;
  --sbx-header-link-hover: #F6F3EA;
}

/* Reset doux utiles (anti-écarts de thèmes) */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }


/* == 1) HEADER & NAVIGATION (lisibilité + spacing) ==================== */
/* Objectif : menus lisibles, pas collés en haut, overlay discret. */

/* En-tête transparent + superposé au hero */
header.site-header,
.kadence-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: transparent !important;
  box-shadow: none !important;
}

/* Barre interne : padding + overlay fondu (uniquement sur Home) */
body.home .kadence-header .site-header-wrap,
body.home header.site-header .site-header-wrap {
  padding-block: calc(var(--sbx-header-pad) + env(safe-area-inset-top, 0px)) var(--sbx-header-pad);
  background: var(--sbx-header-bg);
  -webkit-backdrop-filter: blur(var(--sbx-header-blur));
  backdrop-filter: blur(var(--sbx-header-blur));
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Version sticky (si activée par le thème) : un peu plus opaque */
.kadence-sticky-header .site-header-wrap {
  background: var(--sbx-header-bg-sticky) !important;
  -webkit-backdrop-filter: blur(var(--sbx-header-blur));
  backdrop-filter: blur(var(--sbx-header-blur));
  border-bottom: 1px solid rgba(255,255,255,.16);
}

/* Liens de menu : couleur, taille, interlignage plus confortable */
.kadence-header .site-header-wrap a,
.main-navigation .menu > li > a {
  color: var(--sbx-header-link);
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(.95rem, .2vw + .9rem, 1.05rem);
  line-height: 1.3;
  padding: .45rem .7rem;
  border-radius: 10px;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus-visible {
  color: var(--sbx-header-link-hover);
  background: rgba(255,255,255,.10);
  outline: 2px solid transparent;
}

/* Annule toute marge/padding top que le thème pourrait ajouter au contenu */
body.home .site-content,
body.home .entry-content,
body.home main#primary,
body.home .content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}


/* == 2) HERO D’ACCUEIL (image plein écran OU fond uni) ================ */
/* Hero conteneur */
.sbx-heroStage{
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: transparent; /* uni ? remplace par #1d232c si tu veux un fond uni */
}

/* Plan image en pseudo-élément (reste même si JS inactif) */
.sbx-heroStage::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--sbx-hero-url);
  background-size: cover;
  background-position: var(--sbx-hero-pos);
  background-repeat: no-repeat;
  transform: translateZ(0);
}
/* Ken Burns doux */
@media (prefers-reduced-motion: no-preference){
  .sbx-heroStage::before { animation: sbxHeroKen 12s ease-in-out both; }
  @keyframes sbxHeroKen { from { transform: scale(1) } to { transform: scale(1.045) } }
}

/* Halo léger (si tu veux un voile, dé-commente) */
/*
.sbx-heroStage::after{
  content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(226,169,106,.10), transparent 70%);
}
*/

/* Panneau texte au-dessus de l’image */
.sbx-heroStage__panel{ position: relative; z-index: 2; display: grid; place-items: center; min-height: 100dvh; text-align: center; padding: clamp(24px, 6vw, 80px); color: var(--sbx-ivory); }
.sbx-heroStage__dots{ display: none !important; } /* pas de bullets */


/* == 3) TYPOGRAPHIE GLOBALE & CTA ===================================== */
body{
  font-family: "Lato", system-ui, sans-serif;
  color: var(--sbx-ivory);
  background-color: var(--sbx-slate);
}
h1,h2,h3,h4,h5{ font-family: "Playfair Display", serif; color: var(--sbx-gold); }

/* H1 d’accueil */
.sbx-heroStage__title{
  font-family:"Playfair Display",serif; font-weight:700; letter-spacing:.01em;
  font-size: clamp(2.4rem, 2.8vw + 1rem, 4rem);
  line-height: 1.1; color: var(--sbx-gold);
  margin: 0 0 .35em; text-wrap: balance;
}

/* Paragraphe d’intro */
.sbx-heroStage__statement{
  max-width: 60ch; margin: 0 auto;
  font: 400 clamp(1.02rem, .5vw + 1rem, 1.28rem)/1.55 "Lato",system-ui,sans-serif;
  letter-spacing: .01em; color: var(--sbx-ivory);
}

/* CTA d’accueil + boutons génériques */
.sbx-heroStage__cta{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top: clamp(12px,1.8vw,18px); }
.sbx-heroStage__cta a,
.wp-block-button__link,
.wp-block-buttons .wp-block-button a,
.kadence-blocks-button,
.kb-button,
a.kadence-blocks-button__link,
a.kb-button-link,
a.button{
  font-family:"Lato",system-ui,sans-serif;
  font-weight:500; font-size:.95rem; line-height:1.2; letter-spacing:.01em;
  color:var(--sbx-ivory); background:#ffffff14;
  border:1px solid color-mix(in oklab, var(--sbx-ivory) 20%, black);
  border-radius:999px; padding:.6rem .9rem;
  transition: transform .15s cubic-bezier(.16,.84,.44,1), background-color .15s cubic-bezier(.16,.84,.44,1), border-color .15s cubic-bezier(.16,.84,.44,1);
}
.sbx-heroStage__cta a:hover,
.wp-block-button__link:hover,
.wp-block-buttons .wp-block-button a:hover,
.kadence-blocks-button:hover,
.kb-button:hover,
a.kadence-blocks-button__link:hover,
a.kb-button-link:hover,
a.button:hover{
  transform: translateY(-1px);
  background: #ffffff1f;
  border-color: color-mix(in oklab, var(--sbx-gold) 40%, var(--sbx-ivory));
}
.sbx-heroStage__cta a:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-buttons .wp-block-button a:focus-visible,
.kadence-blocks-button:focus-visible,
.kb-button:focus-visible,
a.kadence-blocks-button__link:focus-visible,
a.kb-button-link:focus-visible,
a.button:focus-visible{
  outline: 2px solid var(--sbx-gold);
  outline-offset: 2px;
}


/* == 4) MENU “GALERIES” (sous-menu + anti-doublons) =================== */
/* Sous-menu stylé */
.main-navigation .menu li.sbx-galeries { position: relative; }
.main-navigation .menu li.sbx-galeries ul.sub-menu{
  position: absolute; left: 0; top: calc(100% + 6px);
  background: rgba(20,20,24,.92);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; padding: 6px; min-width: 180px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: 99999; display: none;
}
.main-navigation .menu li.sbx-galeries:hover > ul.sub-menu,
.main-navigation .menu li.sbx-galeries:focus-within > ul.sub-menu { display: block; }

.main-navigation .menu li.sbx-galeries ul.sub-menu li a{
  display: block; padding: .5rem .7rem; color: var(--sbx-ivory);
  border-radius: 10px; transition: background-color .15s ease, transform .15s ease;
}
.main-navigation .menu li.sbx-galeries ul.sub-menu li a:hover,
.main-navigation .menu li.sbx-galeries ul.sub-menu li a:focus-visible{
  background: #ffffff18; transform: translateX(2px); outline: 2px solid transparent;
}

/* Anti-doublons (si le script a déjà injecté les mêmes liens) */
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="naples"]:is(:not(:first-child)),
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="neuchatel"]:is(:not(:first-child)),
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="paris"]:is(:not(:first-child)),
.main-navigation .menu li.sbx-galeries ul.sub-menu + ul.sub-menu{
  display: none !important;
}


/* == 5) ACCESSIBILITÉ & SYSTÈMES ====================================== */
:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}


/* == 6) HELPERS / UTILITAIRES ========================================= */
/* Ajuste le cadrage de la photo héro sur mobile si besoin */
@media (max-width: 600px){
  .sbx-heroStage::before{ background-position: center 38%; }
}

/* Classes rapides */
.sbx-hide { display: none !important; }
.sbx-text-center { text-align: center !important; }

/* ===================================================================== */
/* === MENU “Galeries” : masque les doublons éventuels ================== */
/* S’il y a deux Liens “Paris/Naples/Neuchâtel” dans le MÊME sous-menu,
   on cache toutes les occurrences après la première. */
.main-navigation .menu li.sbx-galeries ul.sub-menu
  li:has(> a[href*="paris"]) ~ li:has(> a[href*="paris"]),
.main-navigation .menu li.sbx-galeries ul.sub-menu
  li:has(> a[href*="naples"]) ~ li:has(> a[href*="naples"]),
.main-navigation .menu li.sbx-galeries ul.sub-menu
  li:has(> a[href*="neuchatel"]) ~ li:has(> a[href*="neuchatel"]),
.main-navigation .menu li.sbx-galeries ul.sub-menu
  li:has(> a[href*="neuchâtel"]) ~ li:has(> a[href*="neuchâtel"]) {
  display: none !important;
}

/* Si un second <ul class="sub-menu"> a été généré à la suite, on le masque. */
.main-navigation .menu li.sbx-galeries > ul.sub-menu + ul.sub-menu {
  display: none !important;
}
/* === Correction du double affichage dans le menu "Galeries" ===== */

/* Masque tout doublon de liens identiques dans le même sous-menu */
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="paris"]:not(:first-of-type),
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="naples"]:not(:first-of-type),
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="neuchatel"]:not(:first-of-type),
.main-navigation .menu li.sbx-galeries ul.sub-menu li a[href*="neuchâtel"]:not(:first-of-type) {
	display: none !important;
}

/* S’il y a deux sous-menus "Galeries" à la suite, on cache le second */
.main-navigation .menu li.sbx-galeries ul.sub-menu + ul.sub-menu {
	display: none !important;
}