/* Variables de thème GestDéveloppement */
:root{
  --jaune:#F0DB00;
  --noir:#000000;
  --gris-fonce:#1e1f22;
  --gris-texte:#dddddd;
  --rouge:#ff5555;
}

/* Reset simple */
*{
  box-sizing:border-box;
}

/* Corps de page */
body{
  margin:0;
  padding:0;
  font-family:'Segoe UI', Roboto, sans-serif;
  background:#000;
  color:#fff;
}

/* En-tête générique */
header{
  background:#000;
  border-bottom:2px solid var(--jaune);
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Logo / titre du site (barre noire du haut) */
.logo-site{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:22px;
  color:var(--jaune);
}
.logo-site span.small{
  font-size:13px;
  color:#fff;
  font-weight:400;
  opacity:.8;
}

/* Titre principal dans les pages type CGV / Mentions (h1 dans le header) */
header h1{
  margin:0;
  font-size:26px;
  color:var(--jaune);
}


/* Titre principal de page (hero, intro, etc.) */
.page-title{
  margin:0 0 10px;
  font-size:26px;         /* même taille partout */
  color:var(--jaune);
}

/* Barre de navigation */
nav{
  background:#111;
  border-bottom:1px solid #333;
  padding:10px 24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* --- ÉTAT ACTIF : CADRE JAUNE --- */
#site-nav .nav-item a.actif {
  border: 3px solid var(--jaune);
  border-radius: 10px;
  padding: 6px 10px;
  background: none !important;
  color: var(--jaune);
}

/* Texte de l’onglet actif */
#site-nav .nav-item a.actif span {
  color: var(--jaune);
}

/* Logo de l’onglet actif : léger éclat */
#site-nav .nav-item a.actif img {
  filter: brightness(1.25);
}


/* --- HOVER : même effet que actif --- */
#site-nav .nav-item a:hover {
  border: 3px solid var(--jaune);
  border-radius: 10px;
  padding: 6px 10px;
  background: none !important;
  color: var(--jaune);
}

/* Texte au survol */
#site-nav .nav-item a:hover span {
  color: var(--jaune);
}

/* Logo au survol */
#site-nav .nav-item a:hover img {
  filter: brightness(1.25);
}

/* Lien de la page active (classe ajoutée par le script) */
nav a.actif{
  background:var(--jaune);
  color:#000;
}

/* Contenu principal par défaut (pages type CGV / Mentions) */
main{
  max-width:2200px;
  margin:24px auto 40px;
  padding:0 24px;
}

/* Sections génériques (CGV, Mentions, etc.) */
section{
  margin-bottom:24px;
  padding:16px 18px;
  background:var(--gris-fonce);
  border-radius:10px;
  border:2px solid var(--jaune);
}


section h2{
  margin:0 0 10px;
  font-size:20px;
  color:var(--jaune);
}

section p{
  margin:0 0 8px;
  color:var(--gris-texte);
  line-height:1.5;
  font-size:14px;
}

section ul{
  margin:0 0 8px 20px;
  padding:0;
  color:var(--gris-texte);
  font-size:14px;
}

/*  HERO GESTSCÈNE  */
#hero{
  background:linear-gradient(135deg,#111,#222);
  border:2px solid var(--jaune);
  border-radius:14px;
  padding:28px 24px;
  margin-bottom:28px;

  position:relative;      /* nécessaire pour les ::before / ::after */
  overflow:hidden;        /* pour éviter que ça déborde trop */
}

/* Projecteur + texte éclairé */
#hero h1{
  margin:0 0 10px;
  font-size:28px;
  color:var(--jaune);
  position:relative;
  z-index:2;              /* passe devant le faisceau */
}
#hero p.sous-titre{
  margin:0 0 18px;
  color:var(--gris-texte);
  position:relative;
  z-index:2;              /* passe devant le faisceau */
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
  position:relative;
  z-index:2;
}



/*  BOUTONS GESTSCÈNE  */
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.btn-principal{
  background:var(--jaune);
  color:#000;
}
.btn-secondaire{
  background:#222;
  color:#fff;
  border:1px solid #444;
}

/*  GRILLE ET BLOCS (CUBES) GESTSCÈNE  */
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.bloc{
  background:var(--gris-fonce);
  border-radius:12px;
  padding:18px 16px;
  border:2px solid var(--jaune);
}

.bloc h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--jaune);
}
.bloc ul{
  margin:0 0 6px 18px;
  padding:0;
  color:var(--gris-texte);
  font-size:14px;
}

/*  PETITS TAGS GESTSCÈNE  */
.tag{
  display:inline-block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #555;
  margin-bottom:6px;
  color:#ccc;
}
/* Ajustements listes spécifiques GestScène */
#technique ul,
#tarifs ul{
  margin:0 0 8px 18px;
  padding:0;
}
/* Images dans le hero (anciens visuels "Pour qui ?") */
.hero-illustrations{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.hero-col{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hero-col img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

/* Sur écrans étroits : les colonnes passent l'une sous l'autre */
@media (max-width:900px){
  .hero-illustrations{
    flex-direction:column;
  }
}


/* Liens généraux (emails, sites, etc.) */
a{
  color:var(--jaune);
  text-decoration:none;
}


a:hover{
  text-decoration:underline;
}

/* --- NAVIGATION AVEC LOGOS --- */
#site-nav {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.nav-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.nav-item span {
  color: #fff;
  margin-top: 4px;
  font-weight: 600;
}

.nav-logo {
  height: 26px;
  margin-bottom: 4px;
  transition: transform 0.15s ease;
}

.nav-logo:hover {
  transform: scale(1.15);
}

/* Pied de page */
footer{
  border-top:1px solid #333;
  padding:12px 24px 20px;
  text-align:center;
  font-size:13px;
  color:#aaa;
}

footer a{
  color:var(--jaune);
  text-decoration:none;
}

/* Responsive minimal */
@media (max-width:700px){
  header h1{
    font-size:22px;
  }
}
/* -------- HEADER AVEC LOGOS -------- */
#site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:2px solid var(--jaune);
  background:#000;
}

.header-left{
  display:flex;
  align-items:center;
}

.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-site{
  font-weight:700;
  font-size:22px;
  color:var(--jaune);
}

.logo-mini{
  height:32px;
  display:block;
  cursor:pointer;
  opacity:0.9;
  transition:opacity .15s ease;
}

.logo-mini:hover{
  opacity:1;
}


/* Projecteur + faisceau dans le hero */
.hero-spot{
  position:relative;
  padding-top:10px;         /* plus besoin de grosse marge */
}

/* Projecteur (petit, coin haut-gauche) */
.hero-projecteur{
  position:absolute;
  top:-35px;
  left:30px;
  width:90px;
  z-index:4;
  pointer-events:none;

  transform:rotate(25deg);   /* rotation énorme, bien visible */
}

/* Faisceau de lumière (par-dessus le texte) */
.hero-faisceau{
  position:absolute;
  top:80px;                 /* point de départ plus proche de la lentille */
  left:-5px;
  width:320px;              /* faisceau un peu plus large / long */
  height:320px;

  background:radial-gradient(circle at 0 0,
              rgba(255,255,220,0.75) 0,
              rgba(255,255,220,0.0) 70%);
  /* Base élargie : forme en cône moins pointue */
  clip-path:polygon(
    0 0,        /* sommet près du projecteur */
    100% 40%,   /* bord droit, plus bas */
    85% 100%,   /* coin bas droit (base large) */
    0 100%      /* coin bas gauche */
  );
  transform:rotate(22deg);  /* même angle que le projecteur */
  opacity:0.45;
  filter:blur(6px);
  z-index:3;                /* au-dessus du texte, sous le projecteur */
}


/* Texte sous le faisceau mais toujours lisible */
.hero-contenu{
  position:relative;
  z-index:2;

  /* largeur raisonnable + centré + un peu de marge latérale */
  max-width:1500px;
  margin:0 auto;
  padding:0 16px;
}

/*  Blocs texte + image dans le hero  */
.hero-block{
  display:flex;
  flex-direction:row;      /* <<< toujours côte à côte par défaut */
  align-items:flex-start;
  gap:24px;
  margin-top:24px;
}

.hero-text{
  flex:1;
}

.hero-image{
  flex:0 0 260px;          /* largeur de base sur grands écrans */
  max-width:320px;
}

.hero-image img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}

#hero h1 {
    padding-left: 50px;  /* si tu veux garder aussi le décalage horizontal */
}
																																						
@media (max-width: 900px) {
  #hero h1 {
    padding-top: 60px;
  }
}

/* Écrans plus petits : on empile image + texte */
@media (max-width:1000px){
  .hero-block{
    flex-direction:column;
  }
  .hero-image{
    flex:none;
    max-width:420px;
    margin:0 auto;         /* image centrée au-dessus du texte */
  }
}