/* ---------------------------------------------------------
   0) VARIABLES
   --------------------------------------------------------- */
:root{
  --bg:#000000;
  --text:rgba(255,255,255,.88);
  --text-soft:rgba(255,255,255,.72);

  --gold:#d6b56b;
  --gold-soft:rgba(214,181,107,.45);
  --gold-faint:rgba(214,181,107,.18);

  --panel:rgba(255,255,255,.04);
  --panel-border:rgba(255,255,255,.10);

  --r-lg:18px;
  --r-md:14px;
}

/* ---------------------------------------------------------
   1) FOND NOIR INTÉGRAL + FULL HEIGHT
   --------------------------------------------------------- */
html, body{
  background: var(--bg) !important;
  min-height: 100%;
}

body{
  min-height: 100dvh;
  color: var(--text);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* wrappers Cassiopeia/Bootstrap transparents */
.site{ flex: 1 0 auto; background: transparent !important; }

.site-grid,
.wrapper,
main,
.container-component,
.component,
.blog,
.item-page{
  background: transparent !important;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  background: transparent !important;
  max-width: 100% !important;
}


footer{ flex-shrink: 0; background: transparent !important; }

/* SP Page Builder : pas de fond blanc parasite */
.sppb-section,
.sppb-row,
.sppb-column,
.sppb-addon,
.sppb-addon-content,
.sppb-row-container{
  background: transparent !important;
  max-width: 100% !important;
}
.sp-page-builder .page-content #section-id-1771313897670 {
    display: none;
}
/* ---------------------------------------------------------
   2) TYPO / LIENS
   --------------------------------------------------------- */
p, li{ color: var(--text-soft); }
h1,h2,h3,h4,h5,h6{ color: rgba(255,255,255,.95); }

a{
  color: rgba(255,255,255,.92);
  text-decoration-color: rgba(214,181,107,.28);
  text-underline-offset: 3px;
}
a:hover, a:focus{
  color: #fff;
  text-decoration-color: rgba(214,181,107,.55);
}

/* Bloc réseaux */
.social-hero{
    bottom: 28px;
  right: 34px;
  z-index: 5;
  justify-content: center;
  display: flex;
  gap: 12px;
}

/* Icônes */
.social-hero a{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  color: #fff;
  font-size: 16px;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);

  transition: all .25s ease;
}

/* Hover */
.social-hero a:hover{
  transform: translateY(-3px);
  border-color: rgba(214,181,107,.65);
  box-shadow:
    0 0 0 2px rgba(214,181,107,.14),
    0 0 18px rgba(214,181,107,.35);
}

/* Actif = glow or */
.social-hero a.active{
  border-color: #d6b56b;
  background: rgba(214,181,107,.18);
  box-shadow:
    0 0 0 2px rgba(214,181,107,.18),
    0 0 22px rgba(214,181,107,.45);
}


@media (min-width: 768px) and (max-width: 991px) {
    .sp-page-builder .page-content #section-id-1534501276010 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;

    }
}


@media (max-width: 767px) {
    .sp-page-builder .page-content #section-id-1534501276010 {
        padding-top: 0px !important;
      padding-bottom: 0px !important;
    }
}
/* réseaux centrés + zones de tap */
  .social-header{
    justify-content:center !important;
    margin: 10px 0 0 0 !important;
    gap: 12px !important;
  }
  .social-header a{
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }


@media (max-width:991px){

  .sppb-section:first-of-type{
    min-height:78vh !important;
    background-attachment:scroll !important;
    padding-top:140px !important;
  }

}

.fb-video-wrap{
  position: relative;
  width: 100%;            /* % */
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.fb-video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.spotify-wrap {
  position: relative;
  width: 100%;     /* largeur 100% */
  max-width: 100%;
  height: 380px;   /* hauteur player album */
}

.spotify-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Bouton */
.btn-contact{
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* Par défaut : image en fond avec largeur maximale de 1200px */
.container-header {
background-image: url('https://yoannfreejay.com/images/2026/02/17/capture-decran-2026-02-17-a-08.29.49.png')!important;
  background-size: cover; /* L'image couvre toute la largeur de l'élément */
  background-position: top; /* L'image reste en haut du header */
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
  width: 100%; /* L'élément occupe toute la largeur de l'écran */
  max-width: 1300px; /* Limite la largeur à 1300px */
  margin: 0 auto; /* Centre le header horizontalement */
  min-height: 342px !important; /* Hauteur minimale du header */
}

/* Quand l'écran est plus petit que 1200px */
@media (max-width: 1200px) {
.container-header {
    background-size: cover; /* L'image continue à couvrir tout le header */
    width: 100%; /* Utilise 100% de la largeur de l'écran */
    max-width: 100%; /* Supprime la limite de 1200px */
    margin: 0 auto; /* Centre le header horizontalement */
  }
}

/* Quand l'écran est plus petit que 768px (écrans mobiles) */
@media (max-width: 768px) {
    .title {
        display: block !important;
    }
}
@media (max-width: 1200px) {
    .navbar-brand {
        display: block !important;
    }
}
@media (max-width: 768px) {
    .container-header {
            background-image: url('https://yoannfreejay.com/images/2026/hero.png') !important;
        background-size: cover;
        background-position: left;
    }
    

}

/* titres hero */
.sppb-section:first-of-type h1,
.sppb-section:first-of-type .sppb-addon-title{
  font-family: "Playfair Display","Georgia",serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.05;
  color: #fff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* texte hero */
.sppb-section:first-of-type p,
.sppb-section:first-of-type .sppb-addon-text{
  color: rgba(255,255,255,.80) !important;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}
.navbar-brand {
    padding-top: var(--navbar-brand-padding-y);
    padding-bottom: var(--navbar-brand-padding-y);
    margin-right: var(--navbar-brand-margin-end);
    font-size: var(--navbar-brand-font-size);
    color: var(--navbar-brand-color);
    white-space: nowrap;
    text-decoration: none;
    display: none !important;
}
.social-icons {
  display: flex;
  justify-content: center; /* Centrer les icônes horizontalement */
  gap: 20px; /* Espacement entre les icônes */
}

.social-icon {
  text-decoration: none;
  font-size: 24px; /* Taille des icônes */
  color: #333; /* Couleur des icônes */
  transition: color 0.3s;
}

.social-icon:hover {
  color: #007bff; /* Changer la couleur au survol */
}

@media (max-width: 768px) {
  .social-icons {
    flex-direction: column; /* Aligner verticalement sur les petits écrans */
  }

  .social-icon {
    font-size: 18px; /* Réduire la taille des icônes sur petits écrans */
  }
}