/* STYLES POUR ULTIMATO */
/* mise en forme des liens*/
a:link,
a:visited,
a:active
{
	color: black;
	text-decoration: none;}	
 
a:hover { 
	color: #45ffcc ;
  text-shadow:slategray 2px 2px;
} 

a:hover img { 
      transform: scale(1.03);
      filter: brightness(0.88);
      transition: transform 0.2s ease, filter 0.2s ease;
} 

@font-face {
	font-family: typotitre;
	src: url(glacial-indifference.regular.otf);}


h1, h2, h3 {
	text-transform: uppercase;
	font-family: typotitre;
	margin-bottom: 0rem;
  text-align: center;
	}

header{
  margin-top: 35px;
  position: sticky;
  top: 0px;
  background-color: white;
  z-index: 1;
}

body{
	background-color: white;
	margin-right: auto;
	margin-left: auto;
	font-family: typotitre, helvetica;
	font-style: normal;
}

table td {vertical-align: top;}

/* Style conainer Youtube */
.youtube {
  max-width: 720px;
  margin: 0px auto;
}

.youtube > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.youtube iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}



/* mise en page des photos */
.imgtitre{
	width: 100%;
	opacity: 1;
	display: block;
	transition: .5s ease;
	backface-visibility: hidden;
  border-radius: 8px;
}

.imgshow{
	width: 100%;
}

.spectacle{
	font-weight: bold;
	font-style: italic;
}

.citation{
	font-style: oblique;
	margin-bottom: 0rem;
}

.journal{
	margin-top: 0rem;
  margin-bottom: 2rem;
	font-weight: bold;
	text-align: right;
}

.gras{
  font-weight: bold;
}

/* mise en page des tableau CREATIONS à 1 colonne centrée */
.colonne {
	margin-right: auto;
	margin-left: auto;
}

.colonne2 {
  margin-left: auto;
  margin-right: auto;
}

.centre{
  display: flex;
  justify-content: center;
}

.contact{
  text-align: center;
}

.presentation{
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.calendrier{
	border: 0;
	width: 100%;
	padding-bottom: 3rem;
  border-spacing: 0px;

 }

.calendrier th {
	text-align: left;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.calendrier td {
	border-top: 1px grey solid;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.calendrier h3 {
  	color: #45ffcc ;
    text-shadow:slategray 2px 2px;
}

.calendrier a {
    color:slategray;
    text-shadow:#45ffcc 2px 2px;
}

.calendrier a:hover {
  color:#45ffcc;
    text-shadow: slategray 2px 2px;
}

.lena td {
vertical-align: top;
}

.lena table {
table-layout: fixed; width: 15%;
}

.equipe h3 {
  	color: #45ffcc ;
    text-shadow:slategray 2px 2px;
}


div.galerie {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

div.galerie-item {
  margin: 10px;
  width: 300px;
}

div.galerie-item img {
  width: 100%;
  height: auto;
}


/* _______________________MENU DU HAUT___________ */

.menuhaut{
  box-shadow: 0px 1px 10px slategray;
}

.menuhaut ul,
.menuhaut h3,
.menuhaut h1{
  margin-top: 0px;
  margin-bottom: 2px;
}

.tablemenuhaut{
  display: grid;
  width:80vw;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

@media (orientation: landscape){
  .tablemenuhaut{
    grid-template-columns: 150px 1fr 150px;
  }
}

@media (orientation: portrait){
  .tablemenuhaut{
    grid-template-columns: 95px 1fr 95px;
  }
}

.tmh-logo{
  grid-column: 1;
  grid-row: 1;
}

.tmh-cie{
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.tmh-liens{
  grid-row: 2;
  grid-column: 1 / -1;
  text-align: center;
}



.menu li {
    display:inline;
    padding-right: 15px;
    padding-left: 15px;
    }




/* ____________________________Adaptation à la taille de l'écran*/
@media (orientation: landscape){
.colonne {
  width:60vw;
  max-width: 1200px;}
.colonne2{
  width:80vw;
  max-width: 1500px;
}
body{
	font-size: 1.3rem;
	/* max-width: 1500px; */
}
  /* mise en forme des titres */
h1 {font-weight: 400; font-size: 4rem;}
h2 {font-weight: 300; font-size: 2.5rem;}
h3 {font-weight: 300; font-size: 1.5rem;}
/* .colonne2 h1, .colonne2 h2 {text-indent: 150px;} */
}

@media (orientation: portrait){
.colonne {width:90%;}
.colonne2{width:90%;}
body{
	font-size: 4.2vw;
	}
h1 {font-weight: 400; font-size: 7vw;}
h2 {font-weight: 300; font-size: 6vw;}
h3 {font-weight: 300; font-size: 4vw;}
.lightbox-nav { display: none; }
}


/*____________________________________________________LIGHT BOX____________________________________________________*/
/*____________________________________________________Lightbox pour les photos de la galerie____________________________________________________*/    /* ── LIGHTBOX ─────────────────────────────────────────────────── */
 
    /* #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.92);
      align-items: center;
      justify-content: center;
    }
 
    #lightbox.actif {
      display: flex;
    }
 
    #lightbox-img {
      max-width: 90vw;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 2px;
      box-shadow: 0 8px 40px rgba(0,0,0,0.6);
      animation: apparition 0.25s ease;
    }
 
    @keyframes apparition {
      from { opacity: 0; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    } */
 
    /* Légende dans la lightbox
    #lightbox-legende {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.75);
      font-family: typotitre, helvetica;
	  text-transform: uppercase;	
      font-size: 14px;
      text-align: center;
      pointer-events: none;
      white-space: nowrap;
    }
 
    /* Bouton fermer */
    /* #lightbox-fermer {
      position: fixed;
      top: 20px;
      right: 24px;
      background: none;
      border: none;
      color: #fff;
      font-size: 36px;
      cursor: pointer;
      line-height: 1;
      opacity: 0.7;
      transition: opacity 0.2s;
    } */
 
    /* #lightbox-fermer:hover { opacity: 1; } */
 
    /* Boutons précédent / suivant */
    /* .lightbox-nav {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.1);
      border: none;
      color: #fff;
      font-size: 32px;
      cursor: pointer;
      padding: 14px 18px;
      border-radius: 4px;
      opacity: 0.6;
      transition: opacity 0.2s, background 0.2s;
      line-height: 1;
    }
 
    .lightbox-nav:hover {
      opacity: 1;
      background: rgba(255,255,255,0.2);
    } */
 
    /* #lightbox-prev { left: 16px; }
    #lightbox-next { right: 16px; } */
 
    /* Compteur */
    /* #lightbox-compteur {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.5);
      font-family: typotitre, helvetica;
      font-size: 13px;
    } */

    
/* ── CAROUSEL SPECTACLES ─────────────────────────────────────────── */
/*____________________________________________________________________*/
/* Curseur pointer sur les images cliquables */
    .carousel-trigger { 
      cursor:pointer;
      transition: transform 0.2s ease, filter 0.2s ease;
    }
	  .carousel-trigger:hover {
      transform: scale(1.03);
      filter: brightness(0.88);
    }

/* Fond du carousel */
#carousel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.93);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#carousel.actif { display: flex; }

/* Image principale */
#car-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 80px;
  box-sizing: border-box;
}
#car-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.5);
  animation: carApparition 0.2s ease;
}
@keyframes carApparition {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Bouton fermer */
#car-fermer {
  position: fixed;
  top: 18px; right: 22px;
  background: none; border: none;
  color: #fff; font-size: 3rem;
  cursor: pointer; opacity: 0.7;
  transition: opacity 0.2s; line-height: 1;
}
#car-fermer:hover { opacity: 1; }

/* Boutons prev / next */
.car-nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none; color: #fff; font-size: 3rem;
  cursor: pointer; padding: 14px 18px;
  border-radius: 4px; opacity: 0.6;
  transition: opacity 0.2s, background 0.2s;
  line-height: 1;
}
.car-nav:hover { opacity: 1; background: rgba(255,255,255,0.22); }
#car-prev { left: 14px; }
#car-next { right: 14px; }

@media (max-width: 600px) {
  .car-nav { display: none; }
  #car-scene { padding: 50px 10px; }
}