body
{
/* La Base */                                       background-image:    url(../images/hiro.png), linear-gradient(#AD6C28, #D19E5F, #DCB572);
/* Safari 4+, Chrome 1-9 */                         background-image:   url(../images/hiro.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD6C28), to(#DCB572));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   url(../images/hiro.png), -webkit-linear-gradient(top, #AD6C28, #D19E5F, #DCB572);
/* Firefox 3.6+ */                                  background-image:   url(../images/hiro.png), -moz-linear-gradient(top, #AD6C28, #D19E5F, #DCB572);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#AD6C28', endColorStr='#DCB572', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#AD6C28', endColorStr='#DCB572', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #AD6C28, #D19E5F, #DCB572);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #AD6C28, #D19E5F, #DCB572);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   grey;









/*   background-image: -webkit-linear-gradient(top, #484848, grey, white); 
  background-image:    -moz-linear-gradient(top, #484848, grey, white); 
  background-image:     -ms-linear-gradient(top, #484848, grey, white); 
  background-image:      -o-linear-gradient(top, #484848, grey, white); 
  background-image:         linear-gradient(top, #484848, grey, white); */



text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 1024px ;
}

a img {
border: none;
}


/*---Nav---*/
nav
{
margin-top: -8px;
text-align:center;
width:1024px;
  margin-left: 40px;
margin-bottom: 80px;

}

nav ul
{
margin:0;
padding:0;
line-height:25px;

}

nav li
{
list-style:none;
float:left;
position:relative;

}

nav ul li a
{
font-size:16px;
color: white;
text-decoration:none;
width:180px;
height:35px;
display:block;
text-align:center;
border:4px inset red;

}
 #alpha, #beta, #gama
{

/* background-image:linear-gradient( black , #484848); */

/* La Base */                                       background-image: linear-gradient( #000000, #484848);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#484848));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #000000, #484848);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #000000, #484848);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #000000, #484848);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #000000, #484848);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   black;
}



nav ul li #end
{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/* background-image:linear-gradient( black , #484848); */

/* La Base */                                       background-image: linear-gradient( #000000, #484848);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#484848));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #000000, #484848);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #000000, #484848);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #000000, #484848);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #000000, #484848);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   black;



}

nav ul li #deb
{
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
/* background-image:linear-gradient( black , #484848); */

/* La Base */                                       background-image: linear-gradient( #000000, #484848);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#484848));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #000000, #484848);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #000000, #484848);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#484848', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #000000, #484848);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #000000, #484848);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   black;

}

 #alpha:hover, #beta:hover, #gama:hover, #deb:hover, #end:hover
{

/* background-image:linear-gradient( grey , #484848); */

/* La Base */                                       background-image: linear-gradient( #808080, #484848);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#808080), to(#484848));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #808080, #484848);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #808080, #484848);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#808080', endColorStr='#484848', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#808080', endColorStr='#484848', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #808080, #484848);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #808080, #484848);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   grey;
}




/*Section     #646464 */

section {
width: 945px;
background-image:-moz-linear-gradient(right, #D0D0D0, #313131);
background-image:linear-gradient(to left, #D0D0D0, #313131);


/* La Base */                                       background-image: linear-gradient(to left, #D0D0D0, #313131);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, right top, left top, from(#D0D0D0), to(#313131));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(right, #D0D0D0, #313131);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(right, #D0D0D0, #313131);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#D0D0D0', endColorStr='#313131', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#D0D0D0', endColorStr='#313131', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(right, #D0D0D0, #313131);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(right, #D0D0D0, #313131);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   grey;

Background-repeat: no-repeat;
Background-size: cover;




-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px inset red;
margin-left: 30px;
}



#contact  p{
padding-left: 320px;

}


 #contact  form{
padding-left: 0px;
}

#article_y
{
padding-left:110px;
}
/***article***/
section p a{
color: red;
text-decoration:none;
}

section p a:hover{
color: grey;
}

section p {
font-weight: bold;
text-align: left;
font-size: 20px;
margin-top: 42px;
margin-left: 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 2px inset grey;
padding: 30px;
margin-left: 30px;
background-color: white;
width: 300px;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
}

h1 {
background-image: linear-gradient(to left, #676767, #2A2A2A);
font-size: 50px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 4px inset red;
width: 575px;
margin-left: 170px;
color: #e0c511;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
}

h2 {
	
font-size: 42px;
font-style: italic;
padding: 30px;
}

h3{

background-image: linear-gradient(to left, #525252, #101010);
font-size: 35px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 4px inset red;
width: 375px;
margin-left: 270px;
color: white;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
}

h5 {
padding: 15px;
background-image: linear-gradient(to left, #525252, #101010);
font-size: 35px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 4px inset red;
width: 375px;
margin-left: 270px;
color: #e0c511;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
}

h5 a {
color: red;
text-decoration:none;
}

h5:hover
{

/* background-image:linear-gradient( grey , #484848); */

/* La Base */                                       background-image: linear-gradient( #484848, #808080);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#484848), to(#808080));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #484848, #808080);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #484848, #808080);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#484848', endColorStr='#808080', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#484848', endColorStr='#808080', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #484848, #808080);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #484848, #808080);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   grey;
}

.playlist {
float: right;	
}

.playlist iframe
{
width: 480px;
height: 270px;
margin-right: 30px;
margin-top: 10px;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 2px inset grey;

-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
	
}

.perso {
float: right;	
}

.perso img
{
width: 200px;
margin-right: 130px;
margin-top: 20px;
	
}

/* CARDS */

.cardimage img
{
background-size: cover;
width: 200px;
height: 200px;
	
}

.cardimage img:hover
{
margin: -10px;
width: 220px;
height: 220px;
	
}

.ygocard img
{

margin: 5px;
background-size: cover;
width: 200px;
height: 292px;
transition: all 0.25s ease;


	
}

.ygocard img:hover
{

/* width: 210px;
height: 307px; */

  transform: scale(1.05);
  filter: brightness(120%);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); /* glow doré */
	
}


.grayscale {
  filter: grayscale(100%);
}
.sepia {
  filter: sepia(75%);
}




.card {
  cursor: pointer;
  transition: filter 0.15s ease;
}

.card.grayscale:hover {
  filter: grayscale(100%) brightness(120%);
}

.card.sepia:hover {
  filter: sepia(75%) brightness(120%);
}

.card.invert:hover {
  filter: invert(100%) brightness(120%);
}

/* Cas normal (aucun filtre de base) */
.card:hover {
  filter: brightness(120%);
}


.radio-group {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  gap: 25px;                 /* espace entre les options */
  margin: 20px auto;         /* espace autour + centrage auto */
  width: fit-content;        /* la largeur s’adapte aux éléments */
}

/* Labels stylisés */
.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Georgia', serif;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #222;
  padding: 6px 12px;
  border: 2px solid #b00;
  border-radius: 10px;
  background: #f5f5f5;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.radio-group label:hover {
  background: #ffd;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.6);
}

/* Boutons radios customisés */
.radio-group input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #b00;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.radio-group input[type="radio"]:checked {
  background: radial-gradient(circle, #b00 50%, #fff 55%);
}




/* SUPPRIME  */

.switch-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  gap: 15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #444;   /* gris foncé éteint */
  border: 2px solid #b30000; /* rouge contour */
  transition: .4s;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 4px; bottom: 3px;
  background-color: #eee;  /* boule claire */
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Quand activé */
.switch input:checked + .slider {
  background-color: #b30000; /* rouge activé */
}

.switch input:checked + .slider:before {
  transform: translateX(28px);
  background-color: gold; /* boule dorée pour rappeler ton thème */
}

/* Texte à côté */
.switch-label {
  font-weight: bold;
  font-style: italic;
  color: black;
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}



/*  */



.logoimage img
{
background-size: cover;
width: 150px;
height: 150px;
	
}

.logoimage img:hover
{
margin: -10px;
width: 170px;
height: 170px;
	
}

/*
#team p {
height: 250px;
} */

input {
padding: 5px;
background-image: linear-gradient(to left, #525252, #101010);
font-size: 35px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 4px inset red;
width: 420px;
color: red;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
}

input:hover {
/* background-image:linear-gradient( grey , #484848); */
                                                    Color: #e0c511;
/* La Base */                                       background-image: linear-gradient( #484848, #808080);
/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#484848), to(#808080));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */        background-image:   -webkit-linear-gradient(top, #484848, #808080);
/* Firefox 3.6+ */                                  background-image:   -moz-linear-gradient(top, #484848, #808080);
/* IE 7-*/                                          filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#484848', endColorStr='#808080', GradientType=0);
/* IE 8+*/                                          -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#484848', endColorStr='#808080', GradientType=0)";
/* IE 10+ */                                        background-image:   -ms-linear-gradient(top, #484848, #808080);
/* Opera 11.10+ */                                  background-image:   -o-linear-gradient(top, #484848, #808080);
/* fallback image                                   background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   grey;
	
}



#img01 {
 width: 800px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px inset red;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
}

#img99 {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px inset red;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
}

#img98 {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 5px inset red;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
}

#who h2 a{
color: red;
text-decoration:none;
}

#who h2 a:hover{
color: white;
}

#project h2 a{
color: red;
text-decoration:none;
}

#project h2 a:hover{
color: white;
}


#accueil {
/*background-image: url("../images/tablet2.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
color: white;
font-weight: bold;
font-size: 30px;

}

#error404 {
/*background-image: url("../images/tablet2.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center; */
color: white;
font-weight: bold;
font-size: 30px;

}

#site-partenaire {

background-image: url("../images/tablet2.png");
background-repeat: no-repeat;
background-position: center;
color: white;
font-weight: bold;
font-size: 30px;

}

/* 
#site, #mobile, #pc, #contact {
margin-top: 42px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 2px inset grey;
padding-left: 50px;
margin-left: 30px;
background-color: white;
width: 805px;
-moz-box-shadow: 10px 10px 5px #404040;
-webkit-box-shadow: 10px 10px 5px #404040;
box-shadow: 10px 10px 5px #404040;
behavior: url("doc/pie/PIE.php");
} 
*/

footer {
color: black;
font-weight: bold;
background-color:grey;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px inset red;
}

footer a {
text-decoration: none;
color: white;
}

footer a:hover {
color: black;
}

#site_p li{
list-style:none;
font-weight: bold;
}

#site_p li a{
text-decoration: none;
color: white;
}

#site_p li a:hover{

color: red;
}



/* Nouveaux Bouttons de filtre */

#filter-icons {
    margin-top: 15px;
    text-align: center;
}

.filter-btn {
    width: 32px;
    height: 32px;
    margin: 0 10px;
    filter: brightness(60%);
    cursor: pointer;
    transition: 0.2s ease;
}

.filter-btn:hover {
    filter: brightness(120%);
}

.filter-btn.active {
    filter: brightness(200%) drop-shadow(0 0 5px red);
}