body{
	margin-left:70px;
	overflow-X:hidden;
	 background-color:rgb(31, 31, 31);
	 
		
		background-repeat: no-repeat;
		
	font-family: "Monospace", Verdana, Sans-serif;}
h1{
		border:1px solid black;
		border-radius:50px;
		font-size: 80px;
		color: lime;
		text-align:center;
		background:-webkit-linear-gradient(left, #D8FAE1, #FF5B1D, teal);
		background:linear-gradient(to right, #D8FAE1,black, teal);
		font-family: 'Shojumaru', cursive;
		transition: all 0.2s;
		}
h1:hover 
		{ border-color: #333;
		transform: scaleX(0.7);
		border-radius: 50%; filter: saturate(150%);
		}

@media screen and (max-width: 680px){
body{
		background-image: url("bureaufond.jpg");
		background-color:white;
		margin: 10px;
		padding: 10px;
		border: 20px solid #C1FF33;
		font-family: "Verdana", Sans-serif, Century Gothic;
		background:-webkit-linear-gradient(left, #D8FAE1, white, #D8FAE1);
		background:linear-gradient(to right, #D8FAE1, white, #D8FAE1);
		
	}
img{width: 100%;
		
	}
h1{
		border:1px solid black;
		margin: 10px;
		font-size: 80px;
		padding: 5px;
		border-radius:10px;
		font-size: 15px;
		height : 200%;
		color: red;
		text-align:center;
		background:-webkit-linear-gradient(left, #D8FAE1, black, #D8FAE1);
		background:linear-gradient(to right, #D8FAE1, black, #D8FAE1);
		transition: all 2s;
		}
h1:hover 
		{ border-color: #333;font-size: 200%;
		transform: rotate(360deg);
		border-radius: 20%;transition: all 0.5s;
	}
body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
}

#fusio3{background-image: none;}
#fusio4{background-image: none;}
p{
	color:blue;
font-weight: bold;
}
h3{color:blue; font-family: 'Comic Sans MS'}
.p1{color: rgb(193, 148, 148); font-weight: italic;}
/*Un commenTaire*/

.div-para3{background-image: none;
		background-color: #76FF9B; color: #3a14a7;
		font-family: 'Special Elite', cursive;
}
@media screen and (max-width: 680px){
.div-para3{
		background-color: #76FF9B; color: #3a14a7;
		font-family: 'VT323', monospace;
		font-size: 20px;}
}
a{color: yellow}
a:hover		{color: lime;	}


.tableau{font-family: 'VT323', monospace;}					
h4{
	font-size: 50px;
	color: grey;
	font-style: italic;
	font-family: 'Special Elite', cursive; 
	font-weight: normal;
	text-shadow: 10px 1px 40px #00FF00;
	text-align: center;
	z-index: 3;
	}
@media screen and (max-width: 680px){
h4{font-family: 'Special Elite', cursive;}}
	
.lancement{opacity:1; filter: sepia(100%);width: 100%; transform: scaleY(0.2); border: 5px solid; border-radius:15px 50px;overflow:hidden; color :#3a14a7
	text-align: center;
	background-image: url("bureaufond3.jpeg"); background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}
  .lancement p{color: red; text-align: center;}
  .lancement h2{transition; all 5s; text-align: center;}
  .lancement:hover{text-align: center; opacity:1; filter: invert(100%);color:#06fe48; width: 100%; transform: scaleY(1); transition: all 0.2s;}
.fichecolor{color: red;
}


.boite{background-image: none;
		background-color: #69D6C5;
		padding: 0px;
		border: 2px solid #0C0;
}
		





@media screen and (max-width: 680px){
.boiteimput2{ width: 100%; padding: 0px;
		border: 1px solid #0F0;
		margin: 0px; }
		input[type="submit"]{float:inline-start;padding 10px; width: 100%; height: 100px; font-size:200%; color:#fff;
}}

td{ border: 1px solid black;padding: 10px; }
table{border: 1px solid red; text-align:center;}	
td:hover{	background-color: lime;border-radius: 10%;}
tr:nth-child(even){background-color:#45B418}	
tr:nth-child(odd){background-color:green}	
th.comm{width: 25%;border: 1px dashed grey;padding: 5px;font-style:oblique;font-weight:200;}
td.comm{text-align: left;}
td.comm:hover{background-color:black;color:#D8FAE1;font-style:oblique; text-align: left;}
tfoot th{
		font-family: 'Permanent Marker', cursive;
		font-weight: normal;
		text-shadow: 10px 1px 40px #00FF00;
		background-color: #EDFF0C;
		text-align: center;
		}
@media screen and (max-width: 680px){
	td{width: 25%; border: 1px solid black;padding: 1px; }
table{border: 1px solid red; text-align:center;}	
td:hover{	background-color: lime;border-radius: 10%;}
tr:nth-child(even){background-color:#45B418}	
tr:nth-child(odd){background-color:green}	
th.comm{width: 20%; border: 1px dashed grey;padding: 1px;font-style:oblique;font-weight:20;}
td.comm{text-align: left;}
td.comm:hover{background-color:black;color:#D8FAE1;font-style:oblique; text-align: left;}
tfoot th{
		width: 100%
		font-family: 'Permanent Marker', cursive;
		font-weight: normal;
		text-shadow: 10px 1px 40px #00FF00;
		background-color: #EDFF0C;
		text-align: center;
}}
	
p.maj::first-letter{font-size:30px;color: #A02;}
p.maj::-moz-selection{background-color:orange;}
p.maj::selection{background-color:orange;}
.maj{ clear: both; font-size: 100%; width: 25%;height: 75px; background: linear-gradient(90deg,lime 0%, #D8FAE1 40%);
}
/* Classe de base pour les boutons d'ancre */
.ancre-btn {
    width: 200px; /* Réduit la largeur pour un look plus moderne, ajuste si besoin */
    padding: 15px 0; /* Ajoute du padding pour un meilleur espacement vertical */
    text-align: center;
    text-transform: uppercase;
    position: fixed; /* Maintient le bouton fixe au scroll */
    right: 20px; /* Marge par rapport au bord droit */
    border: 3px solid #666; /* Bordure plus simple et moderne */
    border-radius: 30px; /* Bordures arrondies, ajuste si tu préfères plus ou moins */
    font-size: 18px; /* Taille de police légèrement ajustée */
    font-weight: bold; /* Pour que le texte ressorte bien */
    color: #fff; /* Couleur du texte blanc */
    cursor: pointer; /* Indique que le bouton est cliquable */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
    transition: all 0.2s ease; /* Transition douce pour les effets hover/active */

    /* Dégradé de fond modernisé */
    background: linear-gradient(to bottom, #808080, #008080, #ffffff); /* gris, teal, blanc */
    -webkit-appearance: none; /* Pour les navigateurs Webkit, assure un rendu cohérent des boutons */
    -moz-appearance: none;
    appearance: none;
}

/* Styles spécifiques pour chaque position */
.ancre-basse {
    bottom: 50px; /* Positionnement par rapport au bas */;
}

.ancre-media {
    bottom: 120px; /* Positionnement intermédiaire */
    /* On inverse le dégradé pour le bouton du milieu si tu veux un contraste */
    background: linear-gradient(to top, #808080, #008080, #ffffff);
}

.ancre-tableau {
    bottom: 190px; /* Positionnement supérieur */
    /* On peut garder le même dégradé que ancre-basse ou le personnaliser */
    background: linear-gradient(to bottom, #808080, #008080, #ffffff);
}

/* Effet au survol (hover) */
.ancre-btn:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
    transform: translateY(-2px); /* Léger soulèvement */
}

/* Effet de pression au clic (active) */
.ancre-btn:active {
    border-style: ridge; /* Change le style de la bordure */
    transform: translateY(2px); /* S'enfonce de 2px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre réduite pour simuler l'enfoncement */
    background: linear-gradient(to top, #666, #006666, #e0e0e0); /* Dégradé légèrement inversé/assombri */
}
	
@media screen and (max-width: 680px){
.ancrebasse{
		float: none;
		width: 25%; height: 10%;
		text-align: left;
		text-transform:uppercase;
		position: fixed;
		right: 69%;
		bottom:25px;
		border:5px groove;
		border-radius:30px;
		font-size: 15px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom, grey, teal, white);
		overflow:hidden;
		z-index:100;
		}
.ancremedia{
		float:none;
		width: 25%; height: 10%;
		text-align: left;
		text-transform:uppercase;
		position: fixed;
		right: 37%;
		bottom:25px;
		border:5px groove;
		border-radius:30px;
		font-size: 15px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to top, grey, teal, white);
		overflow:hidden;
		z-index:102;
		}
.ancretableau{
		float: none;
		text-align: left;
		width: 25%; height: 10%;
		text-transform:uppercase;
		position: fixed;
		right: 5%;
		bottom: 25px;
		border:5px groove;
		border-radius:30px;
		font-size: 15px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom; grey, teal, white);
		overflow:hidden;
		z-index:102;
		}
.ancretableau:active {border:2px ridge;
					border-radius:400px;
					}
}
.ancreporte{z-index:1; text-align: center; border:5px groove;
		border-radius:50px;
		font-size: 300%; width: 100px;height: 100px;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: repeating-linear-gradient(-45deg, black, white 5px, black 5px, white 10px);
		
		overflow:hidden;font-size: 150%; left: 47%; transition: width 1s, height 1s, background-color 10s, border-radius 1s, transform 1s; position: absolute;}
.ancreporte:hover{ background-color:black; transform: translateX(0px) rotate(2880deg) translateY(0px);
		border-radius:2000px;
		background: repeating-linear-gradient(90deg, black, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        red 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, black 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, black 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, black 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, black, black 5px,
        lime 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, black, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
		font-size: 100%;
		text-align:center;
		transition: all 10s;}
@media screen and (max-width: 680px){ 
.ancreporte{z-index:1; text-align: center; border:5px groove;
		border-radius:50px;
		font-size: 300%; width: 100px;height: 100px;
		background: repeating-linear-gradient(-45deg, black, white 5px, black 5px, white 10px);
		overflow:hidden;font-size: 150%; left: 40%; position: absolute;}
.ancreporte:hover{ background-color:none; transform: translateX(0px) rotate(2880deg) translateY(0px);
		border-radius:2000px;
		font-size: 100%;
		background: repeating-linear-gradient(90deg, , transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        red 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        lime 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
		text-align:center;
transition: all 1s;}}
.ancresecret{z-index:4; border:5px groove;
		border-radius:500px;
		font-size: 200px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom, grey, teal, white);
		overflow:hidden;font-size: 150%; margin: auto; position: absolute;}
.ancresecret:hover{ background-color:black; transform: translateX(1px) rotate(100deg) translateY(1px);
		border-radius:2000px;
		font-size: 120%;
		transition: all 1s;}
.ancresecret{z-index:1; width: 300px;height: 200px;
    margin-right: -150px; right: 50%; text-align: center;
		border-radius:500px;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        white,
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
		overflow:hidden;font-size: 150%; position: absolute;transition: width 1s, height 1s, background-color 1s, border-radius 1s, transform 1s;}
.ancresecret:hover{ width: 200px;height: 300px;background-color:black; transform: translateX(1px) rotate3d(0, 1, 0.5, 3.142rad) translateY(1px);
		border-radius:2000px;
		margin-right: -100px; right: 50%;
		font-size: 10%;
		transition: all 1s;}
@media screen and (max-width: 680px){ 
.ancresecret{z-index:4; text-align: center; border:5px groove;
		border-radius:500px; width: 150px; height: 100px; margin-right: -75px; right: 50%;
		font-size: 200px;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: linear-gradient(to bottom, grey, teal, white);
		overflow:hidden;font-size: 50%; position: absolute;}
.ancresecret:hover{ background-color:black; transform: translateX(1px) rotate(100deg) translateY(1px);
		border-radius:2000px;
		font-size: 50%;
		text-align:center;
		transition: all 1s;}
.ancresecret{z-index:1; text-align: center;
		border-radius:500px;
		text-align:center;
		background:-webkit-linear-gradient(top, grey, teal, white);
		background: radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        white,
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
		overflow:hidden;font-size: 50%; position: absolute; transition: width 1s, height 1s, background-color 1s, border-radius 1s, transform 1s;}
.ancresecret:hover{ width: 100px; height: 150px;background-color:black; transform: translateX(1px) rotate3d(0, 1, 0.5, 3.142rad) translateY(1px);
		border-radius:2000px;
		font-size: 10%;
		margin-right: -50px; right: 50%;
		text-align:center;
		transition: all 1s;}
}
.secret{background-image:none}
.element {
	margin-left: 50%; border: 2px solid black; text-align:center;
	width: 50px;
	height: 45px;
	display: inline-block;
	background: #ff0000;
	margin: auto 20px;
	cursor: pointer; transition: all 1s;
	}
.fusion{display: block; overflow: hidden;
    margin-left: auto;transform:translateY(-19%);
    margin-right: auto; }
.transition-width {	
    /* Syntaxe standard */
    transition-property: width, background;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s; transition: all 1s;
    
    /* Hack Safari */
    -webkit-transition-property: width, background;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 1s;    
}
.transition9 { width: 50%; height: 40%; filter: saturate(4);transition: all 5s;}
.transition9:hover{width:100%; height: 50%; font-size: 300%; filter: saturate(1);transition: all 5s;}
.transition-width:hover {
	width: 50px;
	background: #8500ff; transition: all 1s;
}

.transition{width: 200px;height: 200px; text-align: center;background-color: red;transition: all 5s, width 2s, background-color 5s;}
.transition:hover{margin-left: 60%; width:30%;height: 200px; background-color:blue;}
<br>
.transition2{width: 200px;height: 200px; text-align: center;background-color: red; transition:width 2s;}
.transition2{width: 200px;height: 200px; transition:background-color 5s;text-align: center;}
.transition2:hover{width:200px;height: 200px; background-color:blue;}

<br>

		
.transition5{float: left;text-align: center;transition:width 2s}
.transition5{width: 300px;height: 300px; transition: width 5s, background-color 10s, border-radius 5s, transform 5s;text-align: center;}
.transition5:hover{ background-color:none; transform: translateX(5px) skew(45deg,45deg) translateY(15px);
		border-radius:2000px;
		font-size: 120%;
		text-align:center;
		transition: all 10s;}
.transition6>p{color: yellow}
.transition6{font-family: 'Special Elite', cursive; margin-left: 10%; border: 3px solid grey;
	outline: 0.2rem solid rgb(83, 83, 83);
border-style: groove;
  background-image: none; 
  background-color:black; text-indent: 50%;transition:width 2s;  color: yellow}
.transition6{width: 350px;height: 600px; border-radius:20px; transition: width 3s, background-color 3s, text-indent 2s, transform 1s;background-color:black; color: yellow}
.transition6:hover{ font-family: 'Special Elite', cursive; background-color: rgb(0, 181, 181); transform: skew(20deg,-18deg); cursor:grabbing;
		border-radius:20px; 
		font-size: 100%;
		text-indent: 10px;
		transition: all 1s   ease-in-out 0.2s;}	
		.transition6:hover>a{font-family: 'Special Elite', cursive;}
.transition7{ position: absolute; z-index: 2; left: 0%; background-image: url("tonnog.png"); text-indent: 15%; background-size: 100% 100%; font-size: 100%;
 border: 1px solid #D8FAE1;background-color:white; transition:width 2s;}
.transition7{width: 50%; height: 450px; border-radius:2px;
 transition: width 15s, background-color 10s, text-indent 2s, transform 55s;
}
.transition7:hover{ background-color:white; transform: skew(60deg,30deg);
		border-radius:2px;
		transform-style: preserve-3d;
  transform: perspective(17.5cm) rotateX(-15deg) rotateY(75deg);
		font-size: 100%;
		text-indent: 180px;
		transition: all 10s;}
@media screen and (max-width: 680px){ 		
.transition7{ background-image: url("tonnog.png"); background-size: 100% 100%; font-size: 100%; text-indent: 15%; border: 1px solid #D8FAE1;background-color:none; transition:width 2s;}
.transition7{width: 50%; height: 280px; border-radius:2px; transition: width 5s, background-color 10s, text-indent 2s, transform 55s;}
.transition7:hover{ background-color:white; transform: skew(60deg,30deg);
		border-radius:2px;
		transform-style: preserve-3d;
  transform: perspective(7.5cm) rotateX(-1deg) rotateY(55deg);
		font-size: 100%;
		text-indent: 30px;
		transition: all 5s;}}		
.transition8{ position: absolute; z-index: 2;font-size: 100%;right: 0%; background-image:url("tonnod.png"); background-size: 100% 100%; text-indent: 15%; border: 1px solid #D8FAE1;background-color:white; text-align: center;transition:width 2s;}
.transition8{width: 50%;height: 450px; border-radius:2px; transition: width 5s, background-color 10s, text-indent 2s, transform 55s;}
.transition8:hover{  z-index: 2; transform: skew(60deg,30deg);
		border-radius:2px;
		transform-style: preserve-3d;
  transform: perspective(17.5cm) rotateX(-15deg) rotateY(-75deg);
		font-size: 100%;
		text-indent: 50px;
		text-align: center;
		transition: all 10s;}
@media screen and (max-width: 680px){ 		
.transition8{ float: right;  z-index: 2;font-size: 100%; background-image:url("tonnod.png"); background-size: 100% 100%;border: 1px solid #D8FAE1;background-color:none; text-align: center;transition:width 2s;}
.transition8{width: 50%;height: 280px; border-radius:2px; transition: width 5s, background-color 10s, text-indent 2s, transform 55s;}
.transition8:hover{ background-color:none; transform: skew(60deg,30deg);
		border-radius:2px;
		text-indent: 10px;
		transform-style: preserve-3d;
		transform: perspective(7.5cm) rotateX(-1deg) rotateY(-55deg);
		font-size: 100%;
		text-align: center;
transition: all 5s;}}		
.foot{background-image:none; background-color: black;border:1 px solid grey;}
<br>
.idrobot{background-image: none;}
.idrobot:hover{background-image: url(accueil3.gif);cursor: default;}		
<br>
.drapeau2{width:1%; transition: 10s;}
.drapeau2:hover{width:10 %; transition: 10s;}
.carre{ text-align: center;border:0px solid black;
		border-radius:0px; filter: blur(1px); width: 2%;
height: auto; transition: all 0.1s;}
.carre:hover{ border-radius:0px; filter: blur(0); transform: translateY(-25%); transition: all 15s; width: 100%;height: auto; transition: all 0.5s;}
.carre2{ border:0px solid black;
		border-radius:50px;
		color: lime;
		text-align:center;
		transition: all 2s;
		}
.carre2:hover{ border-color: #333;
		transform: rotate(-90deg) scale(2); width:5%;
		border-radius: 0%;
		}