/* ============================================================================
   home.css — FRONTON Soleil Lune (chargé UNIQUEMENT sur la page d'accueil).
   Hero + médaillon + bloc « deux univers ». Le chrome (bandeau/marque/nav/footer)
   est dans chrome.css (site-wide). Tokens & polices : ../../style.css
   ============================================================================ */

/* reset local du fronton */
.sl-home,
.sl-home *{box-sizing:border-box;}
.sl-home{margin:0;font-family:var(--sl-serif-text);color:var(--sl-texte);
  background:var(--sl-ivoire);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;}
.sl-home img{max-width:100%;display:block;}
.sl-home a{color:inherit;text-decoration:none;}

/* ---- HERO : split 50/50, les 2 univers à égalité ---- */
.sl-hero{display:flex;position:relative;min-height:78vh;}
.sl-hero__side{flex:1 1 50%;position:relative;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:4rem 2.5rem;color:var(--sl-texte-clair);overflow:hidden;}
.sl-hero__side::before{content:"";position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;transform:scale(1.04);
  transition:transform 1.2s ease;}
.sl-hero__side:hover::before{transform:scale(1.09);}
.sl-hero__side::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,20,16,.44),rgba(26,20,16,.66));}
/* ambiances NEUTRES (vérifiées : aucun symbole de rite) — self-hosted.
   WebP (1600px, ~100 Ko) pour les navigateurs récents, fallback PNG sinon. */
.sl-hero__side--maco::before{
  background-image:url('../img/hero-maconnique.png');
  background-image:image-set(url('../img/hero-maconnique.webp') type('image/webp'), url('../img/hero-maconnique.png') type('image/png'));}
.sl-hero__side--litho::before{
  background-image:url('../img/hero-litho.png');
  background-image:image-set(url('../img/hero-litho.webp') type('image/webp'), url('../img/hero-litho.png') type('image/png'));}
.sl-hero__inner{position:relative;z-index:2;max-width:30rem;animation:slFade .9s ease both;}
.sl-hero__side--litho .sl-hero__inner{animation-delay:.12s;}
.sl-hero__kicker{font-family:var(--sl-serif-text);font-weight:600;font-size:.76rem;
  letter-spacing:.26em;text-transform:uppercase;color:#E0BE7E;
  text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:1rem;}
/* couleur explicite (classe) pour battre le `h1{color:...}` de Kadence */
.sl-home .sl-hero__title{font-family:var(--sl-serif-display);font-weight:600;
  font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:1.05;margin:0 0 1.1rem;
  color:var(--sl-texte-clair);text-shadow:0 2px 10px rgba(0,0,0,.45);}
.sl-hero__desc{font-size:1.06rem;opacity:.96;margin:0 0 1.8rem;}
.sl-btn{display:inline-block;font-family:var(--sl-serif-text);font-weight:500;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sl-texte-clair);
  border:1px solid rgba(255,255,255,.8);padding:.75rem 2.4rem;
  transition:background .25s ease,color .25s ease,border-color .25s ease;}
.sl-btn:hover{background:#fff;color:var(--sl-chocolat);border-color:#fff;}

/* médaillon central unificateur */
.sl-medallion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:128px;height:128px;border-radius:50%;background:var(--sl-ivoire);
  border:1px solid var(--sl-taupe);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.22);}
.sl-medallion .sl-tri{width:26px;height:23px;margin-bottom:6px;}
.sl-medallion .sl-m-name{font-family:var(--sl-serif-text);font-weight:600;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sl-texte);}

/* ---- BLOC « DEUX UNIVERS » : identité duale assumée ouvertement ---- */
.sl-about{text-align:center;padding:6rem 1.5rem;background:var(--sl-ivoire);}
.sl-about .sl-tri{width:32px;height:28px;margin:0 auto 1.6rem;}
.sl-about h2{font-family:var(--sl-serif-display);font-weight:500;
  font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.2;margin:0 0 1.4rem;color:var(--sl-texte);}
.sl-about p{max-width:46rem;margin:0 auto 1rem;font-size:1.08rem;color:#4a3f37;}
.sl-about .sl-tagline{font-style:italic;color:var(--sl-or);font-size:1.2rem;margin-top:1.4rem;}

/* ---- animation d'entrée sobre ---- */
@keyframes slFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---- RESPONSIVE : le split passe en pile propre sur mobile ---- */
@media (max-width:860px){
  .sl-hero{flex-direction:column;}
  .sl-hero__side{min-height:60vh;}
  .sl-medallion{position:relative;left:auto;top:auto;transform:none;margin:-64px auto 0;}
}

/* ---- accessibilité : respect du « réduire les animations » ---- */
@media (prefers-reduced-motion:reduce){
  .sl-hero__inner{animation:none;}
  .sl-hero__side::before,
  .sl-hero__side:hover::before{transition:none;transform:scale(1.04);}
}