/* Reset des marges et paddings */
* {
  margin: 0;
  padding: 0;
}
/* Box-sizing pour tous les éléments */
* {
  box-sizing: border-box;
}
/* Évite les problèmes de bordure/dimension */
html, body {
  height: 100%;
  width: 100%;
}

body {
    /* Le téléphone utilisera sa propre police système (Roboto sur Android, San Francisco sur iOS) */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-display: swap; /* Indique au navigateur d'afficher le texte immédiatement */
}
/*******************************************/
/* Média Query                             */
/* 📱 CONFIGURATION MOBILE (PAR DÉFAUT)   */
/******************************************/
:root {

  /* On définit la taille globale du bloc de jeu en vmin */
  --taille-globale-jeu: 92vmin; 
  
  /* Les cases et les murs s'expriment en POURCENTAGE du tableau */
  --taille-espace:calc(var(--taille-globale-jeu) * 0.02);
  --taille-case: calc(var(--taille-globale-jeu) * 0.090);
  --taille-mur: calc(var(--taille-globale-jeu) * 0.02);
  --taille-pion:calc(var(--taille-case) * 0.9);
}

#bouton-valider {
  display: inline-block;
}
#bouton-annuler {
  display: none;
}
.container-val{
	display: block;
	order: 2;
}
.header{
	width: var(--taille-globale-jeu);
	margin: 0 auto;
}
  .container-jeu{
	display: flex;
	flex-direction: column; /* Alignement vertical */
	gap: 5px;
  }
/* 1. LE CONTENEUR DE JEU */
#jeu {
	order: 1;
  	width: var(--taille-globale-jeu);
  	height: var(--taille-globale-jeu); /* 👈 CRUCIAL : Force une hauteur stricte */
  	margin: 0 auto;
/*	border: red solid 2px;   */
}
  .container-gauche{
	order: 3;
  }
  .container-nb-murs{
	display: flex;
	flex-direction: row;
	gap: 10px;
	width: var(--taille-globale-jeu);
  }
  .cadre-musique{
	width: var(--taille-globale-jeu);
	margin: 0 auto;
	padding: 5px 5px 5px 5px;
	display: flex;
	flex-direction: row;  
/*	border: #15cd46 solid 2px;   */
}
.footer{
	width: var(--taille-globale-jeu);
	padding: 10px 10px 50px 10px;
/*	border: #e46c17 solid 2px;  */
}
#pionB{
	width: var(--taille-pion);
	height: var(--taille-pion);
	margin-left: 3px;
	margin-top: 2px;

}
#pionR{
	width: var(--taille-pion);
	height: var(--taille-pion);
	margin-left: 3px;
	margin-top: 2px;
}

/*===========================================
	Si le client utilise une souris
  =========================================== */

@media (pointer: fine) {
    .container-val {
        display: none; /* On cache le bouton, car le clic direct à la souris suffit */
    }
}
/*===========================================
	 pour les tactiles 
=============================================*/
@media (pointer: coarse) {
	.algorithm-ai-page{
		display: none;
	}
	.beta{
		display: none;
	}
}

/* ==========================================
   1. CONFIGURATION ecrans larges
   ========================================== */
@media (min-width: 768px) {
  :root {
    /* 💻 CONFIGURATION ORDINATEUR (ÉCRANS LARGES) */
    /* On fige le conteneur en pixels pour éviter qu'il devienne géant */
    --taille-globale-jeu: 460px;
	
  }
/* 
	#bouton-valider {
	margin-top: 200px;
    display: none; 
  }
*/
    #bouton-annuler {
    display: none ;
  }
 
  .container-val{
	width: 170px;
	height: 460px;
	border: rgba(11, 99, 224, 0.1) solid 5px;  
/*	background-color: rgba(11, 99, 224, 0.3);   */
	border-radius: 5px;
	margin-left: auto;
	order: 3;
  }
  .header{
	width: 655px;
/*	border: rgba(11, 99, 224, 0.5) solid 2px;  */
	border-radius: 5px;
}
  .container-jeu{
	width: 700px;
	margin: 0 auto;
	padding-bottom: 10px;
	display: flex;
	flex-direction: row; /* Alignement vertical */
/*	border: #e46c17 solid 5px; */
  }
    #jeu{
	order: 2;
  }
  .container-gauche{
	width: 170px;
	border: rgba(11, 99, 224, 0.1) solid 5px;  
/*	background-color: rgba(11, 99, 224, 0.3);   */
	border-radius: 5px;
	margin-left: auto;
	order: 1;
  }
   .container-nb-murs{
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 150px;
  }
  .mur_rouge {
	margin-left: 10px;
  }
	.cadre-musique{
	width: 150px;
	margin: 0 auto;
	padding: 25px 5px 5px 5px;
	display: flex;
	flex-direction: column;  
	gap: 10px;
	margin-left: auto;
/*	border: #15cd46 solid 2px; */
}

  .footer{
	width: 655px;
	margin: 0 auto;
	text-align: center;
	padding: 10px 10px 50px 10px;
/*	border: rgba(11, 99, 224, 0.5) solid 2px;  */
/*	background-color: rgba(11, 99, 224, 0.3);   */
	border-radius: 5px;
/*	border: #e46c17 solid 2px;   */
}
#pionB{
	width: var(--taille-pion);
	height: var(--taille-pion);
	margin-left: 3px;
	margin-top: 2px;

}
#pionR{
	width: var(--taille-pion);
	height: var(--taille-pion);
	margin-left: 3px;
	margin-top: 2px;
}
body {
    /* Le téléphone utilisera sa propre police système (Roboto sur Android, San Francisco sur iOS) */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-display: swap; /* Indique au navigateur d'afficher le texte immédiatement */
}
}
/***********************************************************/
/*            Fin CSS LapTop                               */
/***********************************************************/


/******************************************************/
/*           Règles CSS Générales                     */
/******************************************************/


body{
/*	background-image: url("/images/fond-pion-rouge-transparent2.png");   */
	background-color: rgba(252, 210, 0, 0.1);
/*	background-repeat: no-repeat;
	background-clip: var(--taille-espace);
	background-position: 10% 100%;    */
}

.container{
	width: 100%;
}


.header{
	background: no-repeat url("/images/titre-quoridorB.png") center , no-repeat url("/images/vainqueur-rouge.gif") ;
/*	background-color: rgba(243, 235, 7, 0.1);   */
	background-size: 170px 40px, 40px 40px;
	background-position: center, 20px 5px;
	margin: 0 auto;
	padding-right: 10px;
	height: 50px;
	display: flex;
	flex-direction: row;
	gap: 10px;
/*	border: orange solid 1px;  */
}
div.beta {
	font-size: 10px;
	font-style: italic;
	padding: 2px 2px 2px 5px;
	width: 45px;
	height: 15px;
	margin-left:2px;
	margin-top: 2px;
	background-color: #dddddd;
	border-radius: 5px;
}
/* couleurs liens beta */	
	a.beta-link:link { 
	color: rgb(0, 34, 255);
	text-decoration:none; 
	}
	a.beta-link:visited { 
		color: rgb(0, 34, 255);
		text-decoration:none; 
	}
	a.beta-link:hover { 
		color: rgb(157, 0, 255);
		text-decoration:none; 
		font-weight: bold;
	}

.regle{
	width: 70px;
	height: 34px;
	padding-top: 4px;
	margin-top: 5px;
	margin-left: auto;
	text-align: center;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	text-decoration: none; 
	background-color: #eeeeee;
	border: 1px solid #eeeeee;
	border-radius: 8px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	z-index : 2;
}
	a.titre:link { 
		color: rgb(0, 34, 255);
		text-decoration:none; 
	}
	a.titre:visited { 
		color: rgb(0, 34, 255);
		text-decoration:none; 
	}
	a.titre:hover { 
		color: rgb(157, 0, 255);
		text-decoration:none; 
		font-weight: bold;
	}



.tableau-jeu {
/*	background-color: #333;  */
	width: 100%;
  	height: 100%;
	table-layout: fixed;
	border-collapse: collapse; 
  	padding: 0;
}


/* 3. LES CASES (Éléments TD standard) */
.case {
  width: var(--taille-case);
  aspect-ratio: 1 / 1;
  border-radius:4px;
  filter : alpha(opacity=80);
  opacity : 0.8;
  z-index:-10;
  background:#FF893A;
  box-sizing: border-box;
  padding: 0;
}

.mur_vertical {
  width: var(--taille-mur);
  height: var(--taille-case);
}

.mur_horizontal {
  height: var(--taille-mur);
  width: var(--taille-case);
}
.espace{
	width: var(--taille-espace);
	height: var(--taille-espace);
}


#bouton-valider{
	margin: 0 auto;
	width: 100%;
}
#bouton-annuler{
	margin-left: 15px;
}

.container-val{
	width: var(--taille-globale-jeu);
/*	height: 50px;   */
	margin: 0 auto;
	padding: 10px 10px 10px 10px;
/*	gap: 5px;  
	border: green solid 1px;   */
}

.container-nb-murs{
	margin: 0 auto;
/*	height: 90px;  */
	padding: 5px 5px 5px 5px;
	margin-top: 5px;
/*	border: #1570cd solid 2px;  */
}
div.mur_bleu {
	width: 120px;
	height: 60px;
	margin-left: 10px;
	color: blue;
	font-weight: bold;
	background-color: #eeeeee;
	border-radius: 5px;
	padding: 5px 5px 5px 5px;
}
div.mur_rouge {
	width: 120px;
	height: 60px;
	margin-right: auto;
	color: red;
	font-weight: bold;
	background-color: #eeeeee;
	border-radius: 5px;
	padding: 5px 5px 5px 5px;
}
#couleur-tour{
	width: 30px;
	height: 30px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: 10px;
	border-radius: 30px; 
	background-color: blue;
}

.on-off-music {
	margin: 0px 5px 5px 5px;
/*	background-color: #99CCFF;  */
}
.on-off-son {
	margin: 0px 5px 5px 5px;
/*	background-color: #99CCFF;  */
}
.soundMusic{
	padding: 5px 5px 5px 5px;
}
.soundMusic input{
	margin-top: 5px;
	margin-left: 5px;
	width: 100px;
}
.musicBox{
	width: 120px;
	height: 60px;
	margin-left: 10px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none; 
	background-color: #eeeeee;
	color: darkgray;
	border-radius: 5px;
}
.footer{
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	gap: 15px;
/*	border: #e46c17 solid 2px;   */
}


.algorithm-ai-page{
	width: 170px; 
	margin-left: 10px;
	font-family: "Roboto",sans-serif;
	background: no-repeat url("/images/engrenage.svg");
	background-position: 3px 5px;
	background-color: #eeeeee;
	background-size: 30px 20px;
    vertical-align: middle;
	padding: 5px 15px 5px 35px;
	border-radius: 5px;

	}
	/* couleurs liens algo Ia */	
	a.algorithm-link:link { 
	color: rgb(0, 34, 255);
	text-decoration:none; 
	}
	a.algorithm-link:visited { 
		color: rgb(0, 34, 255);
		text-decoration:none; 
	}
	a.algorithm-link:hover { 
		color: rgb(157, 0, 255);
		text-decoration:none; 
		font-weight: bold;
	}

.langue{
    width: 30px; 
    height: 20px; 
	margin-top: 3px;
	margin-right: 10px;
	margin-left: 10px;
    background-image: url("/images/Flag_of_France.svg");
	background-size: 30px 20px;
    border: 1px solid #eaeaea; /* Petite bordure pour détacher le blanc du fond */
    vertical-align: middle;
}





/* murs et pions          */

.mur_bleu{
	margin-left: 5%;
	width: 30%;
	height: 50px;
	font-family: roboto;
	font-weight: bold;
	color: blue;
}
.mur_rouge{
	width: 30%;
	height: 50px;
	font-family: roboto;
	font-weight: bold;
	color: red;
}
.moinsUnB{
	position: absolute;
	color: blue;
	font-weight: bold;
	font-family: Roboto;
	font-size: 15px;
	top: -40px;
	left: 10px;
	display: inline;
	width: 25px;
	height: 20px;
	z-index: 50;
	padding: 5px 5px 5px 5px;

}
.moinsUnR{
	position: absolute;
	color: red;
	font-weight: bold;
	font-family: Roboto;
	font-size: 15px;
	top: -40px;
	left: 10px;
	display: inline;
	width: 25px;
	height: 20px;
	z-index: 50;
	padding: 5px 5px 5px 5px;

}
.croix{
	position: absolute ;
	top: -30px;
	left: 10px;
	display: inline;
	width: 25px;
	height: 20px;
	z-index: 50;
	padding: 5px 5px 5px 5px;
}

img.pion_mur_bleu{
	width: var(--taille-pion);
	height: var(--taille-pion);
}
img.pion_mur_rouge{
	width: var(--taille-pion);
	height: var(--taille-pion);
}


/* fenetre de fin */

.fond_bravo {
	position: fixed;
	width: 100%;
	height: 100vh;
	margin-top: 0px;
	padding-top: 50px;
	z-index: 5;
	background: url('/images/fond_bravo.png');
	background-repeat: repeat;
}
.bravo {
	width:var(--taille-globale-jeu);
	height: 300px;
	margin: 0 auto ;
	border-radius: 5px;
	border: solid gray 2px;
	padding-top: 150px;
	font-size: 35px;
	font-weight: bold;
	font-family: Roboto;
	color: rgb(255, 255, 0);
	text-align:center;
}
.vainqueur-rouge{
	background: #ccaaaa url('/images/vainqueur-rouge.gif') no-repeat;
	background-size: 150px;
}
.vainqueur-bleu{
	background: #aaaacc url('/images/vainqueur-bleu.gif') no-repeat;
	background-size: 150px;
}

/**********************************************/
/*                    Boutons                 */
/*********************************************/

.butSound {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:5px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:10px;
	font-weight:bold;
	padding:2px 2px 2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
}
.myButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.boutonValider {
	box-shadow:inset 0px 1px 0px 0px #a4e271;
	background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	background-color:#89c403;
	border-radius:6px;
	border:1px solid #74b807;
	display:inline-block;
	margin-left: 15px;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528009;
}
.boutonValider:hover {
	background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	background-color:#77a809;
}
.boutonValider:active {
	position:relative;
	top:1px;
}


.boutonAnnuler {
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	background-color:#3d94f6;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
}
.boutonAnnuler:hover {
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	background-color:#1e62d0;
}
.boutonAnnuler:active {
	position:relative;
	top:1px;
}