@font-face {
    font-family: 'Luciole';
    src: url('Luciole-BoldItalic.woff2') format('woff2'),
        url('Luciole-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('Luciole-Bold.woff2') format('woff2'),
        url('Luciole-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('Luciole-Italic.woff2') format('woff2'),
        url('Luciole-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Luciole';
    src: url('Luciole-Regular.woff2') format('woff2'),
        url('Luciole-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Trade Gothic LT Std';
    src: url('TradeGothicLTStd.woff2') format('woff2'),
        url('TradeGothicLTStd.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


.no-padding {padding:0 !important; margin: 0!important;}

a, ul a {  text-decoration: none !important; transition: all 0.3s ease; color:inherit !important; cursor:pointer; }
a:visited {	color: inherit !important; }

.container—infos {background-color: #aeadf0; height: 12vh;}
.nom {font-family: 'Trade Gothic LT Std'; font-weight: 500; font-style: normal; font-size: 5vh}

.luciole-bold {font-family: 'Luciole'; font-weight: bold;}
.luciole {font-family: 'Luciole'; font-weight: normal;}
.white {color:white;}
.yellow {color: #ffed00;}

.legendes span {font-size: 2vmin;   display: inline-block; margin: 1px 3px 0px 0px; padding-left:12vmin;}
.legendes span:first-child {padding-left:0vmin !important;}
.legendes span:before {  content: "";  display: inline-block;  width: 15px;  height: 15px; margin-right: 5px;}
.audio:before {  background: #e74010;}
.trad:before {  background: #92dce5;}
.sous:before {background: #190b28;}

.gris {background-color: #e3e3e3;}
.boutton:hover {color:white; transition: all 0.3s ease; cursor: pointer;}
.boutton {font-family: 'Luciole'; font-weight: normal;}
.btn1 {font-size: 2vmin} 
.btn2 {font-size: 3vmin}
.btn3 {font-size: 4vmin}

.theme {font-size: 2vh;}

.intro {font-style: italic; font-family: 'Luciole'; font-size: 2.8vh; padding-top: 2vh; width: 95%}
/*.container-d .projet, .container-d .intro { background-color: #e6007e;}*/
.intro img {height: 4vh;}
.intro p {font-style: normal;}
.projet span.cat-trad {content: "";  display: inline-block;  width: 4vh;  height: 4vh; margin-right: 1vh; background: #92dce5; }
.projet span.cat-sous {content: "";  display: inline-block;  width: 4vh;  height: 4vh; margin-right: 1vh; background: #190b28 }
.projet span.cat-audio {content: "";  display: inline-block;  width: 4vh;  height: 4vh; margin-right: 1vh; background: #e74010 }
.projet .titre {    font-size: 2.8vh;    font-family: 'Luciole';    display: flex;    align-items: center; /* Centre verticalement les éléments */}
.projet .titre p {    margin: 0; /* Supprime les marges par défaut de <p> */}
.projet .titre p:hover {color: black; transition: all 0.3s ease; cursor: pointer;}
.projet .txt p {font-size: 2.8vh;  margin-bottom:0 !important;  font-family: 'Luciole';}
.txt p a {color: #e74010 !important; }
.txt.audio p a {color: #e3e3e3 !important; }
.txt p a:hover {color: black !important; }
.bio p {font-size: 2.8vh;  font-family: 'Luciole';}
.bio p a {color: #aeadf0 !important;}
.bio p a:hover {color: #e74010 !important;}

.container-g .projet .titre p:hover {color: #e6007e; transition: all 0.3s ease; cursor: pointer; }
hr {margin: 0px;    opacity: 1;}
.container-g hr {color: #e74010;}
.container-g {background-color: #ffed00;}
.container-d hr {color:white; transition: all 0.3s ease; cursor: pointer;}
.container-d p.legende {color: #e3e3e3 !important;}
.txt img:hover {border: 1px solid #e74010;}
.description p {color: #e6007e}

.contact {background-color: #e74010; font-size: 2.8vh; }
.contact a:hover {color:black !important;}

.divider {height:10vmin !important;}

.div-flou {  position: relative;  background-color: #e6007e; z-index: 100}
.div-flou::before {
  content: "";
  position: absolute;
  top: 0;
  left: -40px; /* On fait dépasser l’effet vers la gauche */
  width: 40px; /* Largeur de la zone floue */
  height: 100%;
  background: linear-gradient(to right, #ffed00 0%, #e6007e 100%);
  z-index: -1; /* L'effet passe sous le div */
  
}

.ensavoirplus {color:#aeadf0 !important;}
.trad_description p, .description p {padding-top: 3vmin;}


/*.container-d {    align-self: flex-start;}*/
/*.container-d, .container-g {height: 100vh}*/
.projet {    display: none;}

.fadein-object {
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {    from {        opacity:0;    }    to {        opacity:1;    }
}
@-moz-keyframes fadein { /* Firefox */    from {        opacity:0;    }    to {        opacity:1;    }}
@-webkit-keyframes fadein { /* Safari and Chrome */    from {        opacity:0;    }    to {        opacity:1;    }}
@-o-keyframes fadein { /* Opera */    from {        opacity:0;    }    to {        opacity: 1;    }}


/*!!!!!!! SOMBRE !!!!!!!*/
.sombre .container—infos {background-color: #bdbdbd; height: 12vh;}
.sombre .projet span.cat-trad, .sombre .trad:before  {background: white; }
.sombre .projet span.cat-sous, .sombre .sous:before  {background: grey; }
.sombre .projet span.cat-audio, .sombre .audio:before  { background: black; }
.sombre .legendes span {color:black !important;}
.sombre .div-flou {background-color: black;}
.sombre .div-flou::before {  background: linear-gradient(to right, white 0%, black 100%);}
.sombre .yellow {color:white !important;}
.sombre .container-g {background-color: white !important}
.sombre .container-g hr {color: black;}
.sombre .contact {background-color: #bdbdbd; }
.sombre .ensavoirplus {color: grey !important;}
.sombre .projet .titre p:hover {color: grey !important; transition: all 0.3s ease; cursor: pointer;}
.sombre .projet .txt a {color:grey !important;}

h1, h2 {font-style: normal !important;}
.intro h1, .intro h2 {font-style: normal !important;}
.container-g .projet .img-fluid {width: 88%}

/*!!!!!!!!!!!!  MOBILE  !!!!!!!!!!!!*/

@media (max-width: 991.98px) { 

.nom {font-size:4.5vh; }
.legendes span, .legendes span:first-child  {font-size: 2vh; display: block; padding-left: 1.5vh !important;}
.container—infos {height: 20vh !important; padding-bottom: 3vmin;}
.theme {padding: 1vh;}
.contact, .projet .titre, .projet .txt p, .bio p {font-size: 2vh !important;}
.divider {display: block; }
.container-d {height: auto; padding-bottom: 30vmin;}
.container-g {height: auto;}

}