@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap')

/* <uniquifier>: Use a unique and descriptive class name
 <weight>: Use a value from 400 to 900
 */

html { scroll-behavior: smooth; }

.Instrument{font-family: 'Instrument';}
body,
.Instrument
{
  font-family: 'Instrument';
  font-style: normal;
  font-weight: bold;
}

a:any-link { text-decoration:none; }
.bck2Top { margin-top:18vh; }
.* { font-family: 'Instrument'; }

body
{
    color:white ! important;
    margin:0;
    padding:0;
}
.Pages { width:100%; }


body a:hover ,
.Toper ul li a:hover { color:yellow; }

.FlexDiv
{
    display: flex;
    padding: 0;
}
.FlexDiv > div { flex: 1; /*grow*/ }
#InPanier { display:none }

.headlogo img { height:20vh ! important; max-width:96%; margin-top:0.41rem }
.baslogo img { max-height:35vh ! important; max-width: 70%; margin-top:10px;}
/**************************          Header     ***************/
.Header { text-align: center; }
.Header img
{
    width:100%;
    max-height:50vh;
}
.Header ul {
  list-style: none;
  z-index:100 ! important
}

.Header li {
  display: inline-block;
  margin-right: 1vw; /* add spacing between items */
}

.HeaderTxt
{
    position:absolute;
    top:1vh;
    left:80vw;
    z-index:2;
    font-size:1rem;
    color:white ! important; 
}

/****************  Footer.css     *****************/

.Footer
{
  content: "";
  clear: both;
  width:99%;
  margin-left:0.5%;
  margin-top:18vh ! important
}

.Fd1, .Fd2, .Fd3 { float:left; width: 33%;}

.Footer ul { list-style-type: none; }

.Footer ul li
{
    position: relative;
    margin-top:10px;
}

.Fd2 img
{
    max-width: 45% ! important;
    margin-bottom:2rem;
}

.Screen, .Show
{
    margin :2% 0% 1% 0;
    padding-bottom:8vh! important; 
    margin-top:9vh ! important;
}
.Ed { margin-top:-16vh ! important}

/*******************  Vitrine & articles ***********************/
.Vitrines
{
    clear: both;
    width:98%;
    margin-top:30px;
    margin-bottom:2% ! important;
    height:55vh;
}

.FootOfArt { paddin:0 ! important }

/*******************  FlipCard ***********************/

.flip-card {
  background-color: transparent;
  width: 18% ! important;
  perspective: 1000px;
  margin-left:2%;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: transform 1.5s; /* Vitesse de flip */
}

.flip-card-back { transform: rotateY(180deg); }
.flip-card-front img { width:100%; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.HeadOfArt , .FootOfArt { min-height:12% ! important }

.vh55
{
    height:55vh ! important;
}

.BodyOfFlip
{
    height:38vh ! important;
}

.FootOfFlip img
{
    max-width:2vw ! important;
    margin-left:40%;
}

.horaire caption { caption-side: top; text-align:center; font-size:2rem }
.horaire{border-collapse:collapse;border-spacing:0;width:90%;margin-left:5%; display:table}

.Listes li
{
    display: block;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-right: 100px ! important;
    z-index:0 ! important
}

.Listes ul { list-style-type: none; }

.Listes ul li
{
    position: relative;
    margin-top:10px;
    text-align:center
}

/* ShadowBas */
.flip-card, .ShadowBas
{ box-shadow: rgba(0, 0, 0, 0.45) 0px 52px 20px -20px; }
.Ombres { box-shadow: rgba(0, 0, 0, 0.45) 0px 52px 20px -20px; }

.Toper
{ box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

/* ShadowIn */
.ShadowIn { box-shadow: rgba(177, 229, 179, 0.8) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; }

.Shadow{
box-shadow: 15px 15px 19px 0px rgba(0,0,0,0.41);
-webkit-box-shadow: 15px 15px 19px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 15px 15px 19px 0px rgba(0,0,0,0.41);
}

.Face2card
{
    position: absolute;
    max-width:23vw;
    height:55vh;
    padding:1rem;
}

.Fils2card
{
    min-height:100%;
    width:100%;
}

.Fils2card p { text-align:center }

.Face2card img
{
    min-height:100%;
    width:100%;
}

/*********   Message  ********/

.Marq { text-align:center; }

.Msg2Jour
{
    height:100%;
    min-width:100%;
    padding:3%;
    text-align:center;
}

.Msg2Jour p
{
    text-align:center;
    font-size:1rem;
    margin-top:0.3rem;
}

/*****   Paper et textes **************/
.paper {
  position: relative;
  height: auto;
  padding:3% ! important;
}


/****************** Slider*******************************/
.Tarifs h2
{
    font-size:1.3 rem;
    margin-top:2vh;
}
.Tarifs t { float:left; }
.Tarifs li { float:left; }

.Frame { width: 65vw ! important; }

.carousel {
    position: relative;
    overflow: hidden;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.thumbnails {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 8vw;
    min-width:18% ! important;
}

.thumbnails img {
	display: block;
	position: relative;
	z-index: 10;
	width: 10vw;
	height: 16.3vh;
	border: none;
	vertical-align: bottom;
	cursor: pointer;
	-webkit-transform: translateZ(0); /* bug fix for chrome */
	-webkit-transition: 0.4s;
	transition: 0.4s;
        margin-left:2px
}

.carousel img {
	display: block;
	width: 100%;
	height: 68vh;
	border: none;
	vertical-align: bottom;
}

/****************** Video*******************************/

video
{
    height:66vh;
    padding:0! important;
    max-width:45vw;
    background-color:none ! important;
    margin-top:-6vh
}

.VideoImages
{
    background-color:none;
    max-width:44vw;
    height:50vh;
}

.VideoText
{
    margin-top: -50%;
    color:white;
}

/*************   Carossel  **************************/
.carossel
{
  width:80%;
  display: flex;
  padding: 0;
  margin: 3%;
  padding:0;
  height:27vh;
}

.carossel > div { flex: 1; /*grow*/ }

/*  top right bottom left */


.carossel img
{
  width:99%;
  height:11rem ! important;
}

.triangleRight , .triangleLeft {
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-bottom: 95px solid transparent;
}
.triangleRight {
margin-left:2px
}

.rotate {
    transform: rotate(270deg);
    transform: rotate(90deg);
    transform: rotate(180deg);
}
.CaroDir{ max-width:35px ! important; }

/**************************      Ihms   **********************************/
.Jours { padding:1%;}

.fa-eye-slash { color:grey ! important}
.InputHolder
{
    width:70% ! important;
    margin-left:15%;
    margin-bottom:30px ! important;
}

.home
{
  width:15%;
  margin-left:43%;
  text-align:center;
}

.home img { width:18%; }
.home p
{
  text-align:center;
  font-size: 18px;
}

.p-viewer  /* Eye Password */
{
  z-index: 1;
  cursor:pointer;
  margin-top:0.5%;
  margin-left:-9%;
  padding:5px;
  padding-left:18px
}

/****************************   Boutons **************************/
.btn
{
    text-decoration: none;
    padding: 0.5em;
    margin: none;
    transform: perspective(1px) translateZ(0);
    position: relative;
}

.btn
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

.btn:before
{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn:before { background: #E6E6FA}

.hoverBtn:hover:before
{
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

.btn:hover { color: green ! important; }

.zoomBtn
{
  border:none;
  width: 100% ! important;
  height: 7vh;
  margin-top:20%;
  font-size:1.2em;
  border-radius: none ! important;
  border-radius: 0 0 0 0 ;
  color:black ! important;

}

.ZoomBot
{
    min-width:83.3%;
    margin-top:-3%;
    height: 4rem;
}
.artBtn:hover:before
{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.artBtn { width:100%; height:3em; border:none ! important; color:yellow }
.ConBtn { min-width:100%; min-height:5rem; }
.zBtn
{
    border:none;
    width:70% ! important;
    height:7vh;
    font-size:1rem;
    color:grey ! important;
    margin-left:3vw ! important
}

/**************   Gestion de Session **********/
.timer
{
    position:fixed;
    margin-top:1rem;
    margin-left:2rem;
    z-index:10000 ! important;
}

/**************   Zoome**********/

.z_bandeau
{
    clear:both;
    padding:2vw;
    width:35vw;
    margin-left:30vw
}

#z_txt
{
    clear:all;
    clear:both;
    margin-top:2vh;
    padding:2%
}
#z_txt p { padding:5px; }

#z_txt ul
{
  padding:0;
  margin:0;
  margin-top:5px;
}
#z_txt li
{
  padding:0;
  margin:0;
  width: auto;
  margin-left:51px;
}
/*****************************   Css  par defaut              ***************/

#backToTop,
.flip-card-back, .flip-card,
.menu-wrapper ul > li:hover >ul >li,
.sticky,
.Messages
{
    -webkit-box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    -moz-box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    box-shadow: inset 2.5px 6.5px 32px -6.5px #dddddd;
    background-color:#3A7A78;
}

/**************************          Header     ***************/
/****************  Toper.css     *****************/
/*******************  Vitrine & articles ***********************/
/*******************  FlipCard ***********************/

.flip-card { box-shadow: rgba(0, 0, 0, 0.45) 0px 52px 20px -20px; }
.btn:hover { color: #800000 }

/*******************  Avator.css ***********************/

.avatar:focus .avatar-dropdown { opacity:1; visibility:visible; }

.avatar-dropdown {
  width: auto;
  margin:3px 0 0 0;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s;
  text-align:center;
  box-shadow: 6px 5px 5px grey;

}

.avatar-dropdown a {
  background:transparent;
  border:none;
  outline:0;
  display:block;
  text-decoration:none;
  width:160px;
  padding:5px;
}

.avatar
{
  position:relative;
  display:inline-block;
  z-index:2; 
  padding:0;
  outline:0;
  text-align:left;
  cursor: pointer;
}

.avatarimg , .avatar img
{
  margin-right:10px;
  width:28px;
  padding:3%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  margin-right:3px;
}

.avatar-dropdown a:hover 
{
  display: block;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  color:green;
}

.arrondie
{
  -moz-border-radius:19px;
  -webkit-border-radius:19px;
  border-radius:19px;
}

.dot {
  margin: 0 2px;
  border-radius: 50%;
  display: inline-block;
}

/****************************   Forms  **************************/

input[type=text] {
    font-size:1rem ! important;
    color:grey ! important;
}

.Forms li
{
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
    float: left;
    margin-left:10%;
}

.HeadOfForm { text-align:center; }
.HeadForm img { margin-left:95%; width:25px; }

.ContactForm
{
  max-width:80%;
  margin:5% 15% 1% 15% ;
  padding:2%;
}
.ContactForm .home { margin-left:90%! important }

.ScreenEr
{
  width:50%;
  margin:5% 15% 1% 25% ;
  max-height: 40vh;
  padding:2%;
}
.ScreenEr img { margin-left:50%; max-width:5vw; }

.D50par100
{
    max-width:50%;
    margin: 5% 5% 5% 25%;
}
.ErForm img { margin-left:20vh; width:10vh; margin-bottom:5vh}
.ErForm p{ text-align:center }

.PassBtn { min-width:93%; min-height:3rem; margin-left:4%; margin-top:3vh}
.LogBtn { min-width:70%; min-height:3rem; }

.backchar
{
  margin-left:175px;
  position:absolute;
  display:none;
}

.DotPose
{
    margin-top:2vh; 
    margin-left:21px;
}

.Bigdot:hover
{
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
color:yellow ! important;
}

.Passdot{
  margin-top:5px;
  border: 2px solid grey;
  display: inline-block;
  border-radius: 50%;
  padding:3px ;
  cursor: pointer;
  max-width:23px;
  height:25px;
  background:black;
  padding-left:5px;
  padding-bottom:7px ! important;
  font-size:13px;
}

#userpass
{
    position: absolute;
    margin-left:560px;
   /*  display:none; */
}

.PaveNumerique { margin-left:2vw; margin-top:-1vh }

.DotPose { margin-top:2vh; }

.Msg2Screen
{
  max-width:35vw;
  margin-left:33vw ;
  padding:1%;
  padding-top:2vh ! important;
  text-align:center ! important;
}

.Msg2Screen p,  .Home p 
{ text-align:center ! important; }

.chp_img
{
    float:left;
    margin-right:20px;
}
.chp_img img
{
    max-width:65vw ! important;
    max-height:35vh ! important
}

.Book
{
    width:88vw;
    padding:10px ! important;
    margin:2rem ! important;
    margin-left:6vw ! important;
}

.Book img
{
    min-width:100%;
    max-height:100%;
}

.Paging
{
    position:absolute;
    width:auto;
    height:auto;
    margin:auto;
    text-align:justify;
    margin-left:43vw;
    display:none;
}

.Article
{
    min-height:90%;
    width:100%;
    text-align:justify;
    overflow:hidden;
    padding:5px;
}

/*****************   Enregistrer article ******************/

.Balise
{
    max-width:7vw;
    min-height:10vh;
    margin-left:0.8vw ! important;
    margin-right:9vw ! important;
    margin-bottom:2vh ! important
}

.ImgName
{
    margin-left:3vw ! important;
    margin-right:11vw ! important;
    margin-top:-3vh ! important;
}

.Pointer { margin-right:5vw }
.backchar, .Pointer,
.pointer { cursor: pointer; }
.pointer:hover { color: yellow }

/****************   Saisie d'article Upload ********************/
.Saisie2Art
{
    max-width:40%;
    margin-left:30%;
}

.UploadForm
{
  max-width:80%;
  margin:5% 15% 1% 15% ;
  padding:2%;
}
.UploadForm .home { margin-left:90%! important }

/****************   Clavier Pass2Login  ********************/
.BtnRond{
    width: 33px; /* Taille du bouton rond */
    height:33px; /* Taille du bouton rond */
    border-radius: 50%; /* Rendre le bouton rond */
    background-color: none; /* Fond orange pour le bouton */
    border: none; /* Supprime la bordure */
    color: white; /* Texte blanc */
    cursor: pointer; /* Changer le curseur pour indiquer que c'est cliquable */
    display: flex; /* Pour centrer le contenu */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    margin: 0 10px; /* Espacement entre les boutons */
    font-size: 18px; /* Taille de la police */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour le bouton */
    transition: box-shadow 0.3s ease; /* Transition pour un effet doux */
}
.BtnRond:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Ombre plus forte au survol */
}

/****************   Pseudo  ********************/
.PsdBtn { min-width:100%; min-height:3rem; }
.close 
{
    display: flex; /* Utiliser flex pour centrer le contenu */
    border: none; /* Pas de bordure */
    outline: none; /* Pas d'outline */
    cursor: pointer; /* Changer le curseur au survol */
    margin-right: 3% ! important; /* Pousse le bouton vers la droite */

}
.close span 
{
    color: white; /* Couleur rouge pour le symbole */
    font-size: 42px; /* Taille du symbole */
}
.close span:hover{
    color: red; /* Couleur rouge pour le symbole */
}

.icon-preview {
    width: 50px; /* Ajustez la taille de l'icône ici */
    height: 50px;
    margin-bottom: 15px;
}

.avatar { min-width:80hw ! important; margin-left:10%; }
.Rex { background-color:red}
.Gr { background-color:yellow}

.icon-container 
{
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si l'espace est insuffisant */
    justify-content: space-around; /* Équilibre l'espace entre les éléments */
    max-width:93% ! important;
    margin-left:2%;
}

.XL { max-width:50%; margin-left:25%; min-height:100px ! important; padding:2%}
.Centre { text-align:center }
.InstBtn { min-width:50%; margin-left:25%; color:black }
.error {
    color: red; /* Couleur du message d'erreur */
    visibility: hidden; /* Masquer le message par défaut */
    margin-left:33%
}

/************  Interfaces ******************/

.MailForm
{
  max-width:30%;
  margin:5% 15% 1% 35% ;
  padding:2%;
  margin-top:-10%;
}

.PassForm
{
    width:33%;
    margin-left:33%;
    margin-top:-8%;
}
.PassForm img { width:80%; }

/***************  Hello, GoodBy ************/
.Messages
{
    width:25%;
    position: fixed;
    top:10%;
    left:40%;
    padding:1%;
    box-shadow: 5px 5px 5px grey;
    text-align:center;
    font-size:1rem ! important;
    z-index:999;
    display:none;
}

.Messages img { max-width:10%; }

/*   BackTopTop *************/
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    color: white;
    padding: 3px 13px;
    border-radius: 50%;
    font-size: 27px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
    user-select: none;
  }
  #backToTop.show {
    opacity: 1;
    pointer-events: auto;
  }

/*************         Verified ************/

.separator {
  min-height: 3vh;
  width: 100%; /* ou une largeur spécifique */
  background-color: none; /* couleur de votre choix */
  clear:all;
  clear:both;
}