/* =========================
   styles.css —
   ========================= */

/* === POLICE PERSONNALISÉE BARON NEUE === */
@font-face {
  font-family: "base";
  src: url("0_baron_neue/BaronNeue.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "base";
  src: url("0_baron_neue/Baron Neue Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* === VARIABLES === */
:root{
  --rouge: #b71c1c;
  --bleu: #082e73;
  --fond: #f8f9fb;
  --texte: #222;
}



/* === BACKGROUND (page d'accueil) === */
body.home{
  background: url("illustrations/public.jpg") repeat center top fixed;
				background-size: 100% auto; /* largeur = écran, hauteur proportionnelle */
}
body.home::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(255,255,255,0.35); /* voile léger pour lisibilité */
  z-index:-1;
}

/* === HEADER / BANNIERE === */
header {
  width: 100%;
  text-align: center;
  background-color: #fff; /* optionnel */
  overflow: hidden;
}

header a {
  display: inline-block;
  width: 100%;
}

header img {
  width: 100%;        /* l’image prend toute la largeur du conteneur */
  height: auto;       /* conserve le bon ratio hauteur/largeur */
  display: block;     /* supprime les espaces indésirables sous l’image */
  object-fit: contain;/* garantit que l’image entière reste visible */
  max-width: 100%;    /* empêche le dépassement */
  cursor: pointer;
    max-height: 15vh;          /* <-- limite la hauteur à 25% de la hauteur de la fenêtre */
}
/* Optionnel : sur très petits écrans, réduire encore plus */
@media (max-width: 600px) {
  header img {
    max-height: 20vh;
  }
}

/* === TITRES === */
h1{
  font-family:"base", sans-serif;
  color: var(--rouge);
  text-align:center;
  margin:30px 0;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}
h2{
  font-family:"base", sans-serif;
  color: var(--bleu);
  margin:0 0 12px 0;
  font-size:1.4rem;
}

.h2-like {
  font-family: "base", sans-serif;
  color: var(--bleu);
  font-size: 1.4rem;
  margin: 0 0 12px 0;
  text-align: center;
  text-transform: none; /* pas de majuscules */
}

/* === MAIN LAYOUT === */


* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: "Open Sans", sans-serif;
  color: var(--texte);
  background-color: var(--fond);
  line-height:1.5;
}
/* =================================================================
   SECTION 1 — CONFÉRENCES À VENIR (trois vidéos côte à côte)
   ================================================================= */
.videos-section { margin-bottom: 60px; }

.conferences-a-venir{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 0 30px 0;
}

/* chaque bloc vidéo */
.conferences-a-venir .video-item{
  width: 30%;
  min-width: 260px;
  height: 470px;                 /* hauteur fixe demandée */
  overflow: hidden;
  border-radius: 10px;
  background:#000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  position: relative;
}

/* si <a class="video-item"> (lien), le style reste identique */
.conferences-a-venir a.video-item { display:block; text-decoration:none; color:inherit; }

/* la video remplit la boîte, */
.conferences-a-venir .video-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* affiche toute la vidéo sans la couper */
  object-position: center center; /* centre la vidéo dans le cadre */
  display: block;
  background-color: #000;    /* fond noir pour les bandes éventuelles */
}

/* effet survol subtil */
.conferences-a-venir .video-item:hover{
  transform: scale(1.02);
  transition: transform .25s ease;
}

/* responsive pour section 1 */
@media (max-width:1000px){
  .conferences-a-venir .video-item { width:45%; height:320px; }
}
@media (max-width:700px){
  .conferences-a-venir{ flex-direction:column; align-items:center; }
  .conferences-a-venir .video-item{ width:90%; height:260px; }
}
/* =================================================================
   SECTION 2 — Vidéos exclusives
   ================================================================= */
.videos-youtube{ margin:40px 0; }

.playlist-wrapper{
  display:flex;
  gap:30px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* cartes gauche et droite (fond blanc léger pour lisibilité) */
.youtube-video, .youtube-playlist{
  flex:1 1 460px;
  max-width:560px;
  
  padding:14px;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* h2 alignés à gauche sur desktop */
.youtube-playlist h2, .youtube-video h2 { text-align:left; margin-bottom:12px; }

/* iframes plus petites comme demandé */
.youtube-video iframe, .youtube-playlist iframe{
  width:100%;
  height:350px;
  border:none;
  border-radius:8px;
  display:block;
}

/* responsive : empilement vertical sur petit écran */
@media (max-width:1000px){
  .playlist-wrapper{ flex-direction:column; align-items:center; }
  .youtube-playlist, .youtube-video{ max-width:90%; }
  .youtube-playlist h2, .youtube-video h2{ text-align:center; }
  .youtube-playlist iframe, .youtube-video iframe{ height:250px; }
}


/* =================================================================
   SECTION 3 — Affiches (gauche) et PLAYLIST YOUTUBE (droite)
   ================================================================= */
.videos-youtube{ margin:40px 0; }

.playlist-wrapper{
  display:flex;
  gap:30px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* cartes gauche et droite (fond blanc léger pour lisibilité) */
.diapo_old, .youtube-playlist{
  flex:1 1 460px;
  max-width:560px;
  
  padding:14px;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* h2 alignés à gauche sur desktop */
.youtube-playlist h2, .youtube-video h2 { text-align:left; margin-bottom:12px; }

/* iframes plus petites comme demandé */
.diapo_old iframe, .youtube-playlist iframe{
  width:100%;
  height:350px;
  border:none;
  border-radius:8px;
  display:block;
}

/* responsive : empilement vertical sur petit écran */
@media (max-width:1000px){
  .playlist-wrapper{ flex-direction:column; align-items:center; }
  .youtube-playlist, .youtube-video{ max-width:90%; }
  .youtube-playlist h2, .youtube-video h2{ text-align:center; }
  .youtube-playlist iframe, .youtube-video iframe{ height:250px; }
}

/* ==========================================================
   SECTION 4 — LE PUBLIC (diaporama / images)
   ========================================================== */

/* Conteneur du diaporama */
.public-section {
  text-align: center;
  margin: 100px auto;
  max-width: 1000px;
  position: relative;
}
.social-share-inline {
  margin-top: 70px;
  text-align: center;
}

.social-share-inline p {
  font-weight: 600;
  margin-bottom: 40px;
  color: #333;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
 /* width: 70px;
  height: 70px;
   font-size: 20px;*/
  border-radius: 50%;
  color: white;
 
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.social-btn:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Couleurs de chaque réseau */
.fb   { background: #1877f2; }
.tw   { background: #000000; }
.tg   { background: #0088cc; }
.wa   { background: #25D366; }
.mail { background: #666666; }

/* Titre */
.public-section h1 {
  color: var(--rouge);
  font-family: "base", sans-serif;
  font-size: 2.2rem;
  margin-bottom: 30px;
}

/* Images du diaporama */
.public-section .slideshow {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.public-section img {
  width: auto;                /* garde la taille réelle */
  max-width: 90%;             /* limite la largeur */
  height: auto;               /* garde le ratio */
  object-fit: contain;        /* évite tout rognage */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: opacity 1s ease;
}

/* Ajustement mobile */
@media (max-width: 700px) {
  .public-section img {
    max-width: 100%;
  }
}

/* =================================================================
   FOOTER & SOCIAL
   ================================================================= */
footer{ text-align:center; 
  padding:30px 10px; 
  background:#fff; 
  border-top:3px solid var(--bleu);
  padding: 10px 0;
  width: 100%;
}
footer img{ height:40px; margin-bottom:8px; }

/* petites finitions */
a{ color: var(--bleu); text-decoration:none; }
a:hover{ text-decoration:underline; }

												  /* === spécifique à la page réservation  === */
body.reservation {
  background: url("public_0.jpg") no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* s'assurer que le main occupe toute la largeur disponible */
body.reservation main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* rendre le conteneur de la billetterie transparent et pleine largeur */
body.reservation .ticket {
  background: transparent !important;
  box-shadow: none !important;
  padding: 24px 0;
}

/* iframe Billetweb : pleine largeur et grande hauteur */
body.reservation .ticket iframe {
  display: block;
  width: 100%;
  height: 85vh;
  max-width: 100%;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* titre centré et bleu, sans fond */
body.reservation .ticket h2 {
  font-family: "base", sans-serif;
  color: var(--bleu);
  text-align: center;
  margin: 30px 0 20px 0;
  font-size: 2rem;
  background: none;
}


body.reservation footer{ text-align:center; padding:30px 10px; background:#fff; border-top:3px solid var(--bleu); }
footer img{ height:40px; margin-bottom:8px; }

/* responsive : réduire la hauteur iframe sur petits écrans */
@media (max-width: 900px) {
  body.reservation .ticket iframe {
    height: 70vh;
  }
}
@media (max-width: 480px) {
  body.reservation .ticket iframe {
    height: 60vh;
  }
}
														

.social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: white;
  font-size: 40px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Couleurs des icônes */
.social-btn.fb { background-color: #1877f2; }
.social-btn.tw { background-color: #000000; }
.social-btn.in { background-color: #0a66c2; }
.social-btn.tg { background-color: #0088cc; }
.social-btn.od { background-color: #c4302b; }/* rouge Odysee */
.social-btn.mail {background: #6c757d;} /* gris neutre pour le mail */

/*.social-bar{ position:fixed; left:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:1000; }
.social-btn{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-weight:700; }
.social-btn.fb{ background:#1877f2 } .social-btn.tw{ background:#000 } .social-btn.in{ background:#0a66c2 } .social-btn.tg{ background:#229ED9 }
*/
																		  
/* Effet au survol */
.social-btn:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
/* === FOOTER LINKS === */
.footer-links {
  margin-top: 10px;
}

.footer-links a {
  margin: 0 12px;
  color: var(--bleu);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
  color: var(--rouge);
}


main { max-width:1200px; margin:0 auto; padding:20px; flex: 1; } /*flex: 1;  ousse le footer vers le bas*/

/* === FOOTER collé en bas de la page === */
html, body {
  height: 100%;              /* prend toute la hauteur de la fenêtre */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;    /* empile le contenu verticalement */
}
footer {
  margin-top: auto; /* colle le footer au bas de la page */
}

/* =================================================================
   sympathisant
   ================================================================= */