/* global */
* {font-family: Arial, sans-serif; font-size: 14px; font-weight:normal; font-style:normal; color:#454550; padding:0; margin:0; box-sizing: border-box;}
body {background:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; height:100vh;}
p {padding: 8px 0;}
a { text-decoration:none; color:#ff9600; transition: color 0.3s; }
a:hover {color:#00378B;}
ol { margin:0px 28px; padding:0;}
li { margin:4px 4px 8px; }
b, strong {font-weight:bold;}
i, em {font-style:italic;}
blockquote { margin:8px 20px; }
input, textarea, select { border:none; padding:0; background:#fdea91; color:#5A5A5A; font-weight:bold; font-size:12px; border-radius:4px;}
input, textarea, option { padding:4px 4px; font-weight:bold; color:#5A5A5A; font-size:12px;}
textarea {resize: none;}
.inputs {width:200px;}
.linputs {width:400px;}
.sinputs {width:150px;}
.vsinputs {width:75px;}
.vlinputs {width:100%;}
form {margin:0;}
.img {font-size:0}
sup, sub {font-size:9px; color:inherit;}
img {border:0; max-width:100%; height:auto;}

/* titre */
h1 {font-size:20px; color:#0005c2;}

/* page */
.page {font-size:0;text-align:center;width: 80%;}
.page .game { display:inline-block; text-align:center; vertical-align:top;}
.page .options { display:inline-block;text-align:center; vertical-align:top;}
 .game, .options, .result {margin-bottom: 20px;}

/* menu */
.menus .menu {
    padding: 4px 25px;
    margin: 8px;
    background: #4366b4;
    color: white;
    cursor: pointer;
    width: 200px;
    border-radius: 10px; /* Arrondit les coins */
 /*   transition: background-color 0.3s, color 0.3s, font-size 0.3s;  Ajoute une transition pour un effet lisse */
}
.menus .menu:hover {
    background: #0a40b4; /* Change la couleur de fond au survol */   
    color: white; /* Change la couleur du texte au survol */
 /*   font-size: larger;  Augmente la taille de la police au survol */
}


/* result */
.result {text-align:center; font-size:30px;}

/* mine field */
.field {background: #888888; }
.field .cell {width:30px; height:30px; background:#33CC33; cursor:pointer; border-left:solid 1px #666666; border-top:solid 1px #666666; border-right:solid 1px #aaaaaa; border-bottom:solid 1px #aaaaaa;}
.field .cell:hover { background:#338833;}
.field .cell.bomb {background:#cc3333; cursor:default;}
.field .cell.bomb:hover {background:#cc3333;}
.field .cell.clear {background:none; cursor:default; color:white; font-weight:bold; text-align:center;}
.field .cell.clear:hover {background:none;}
.field .cell.marked {background:#3333cc; color:white; font-weight:bold; text-align:center; content:"!";}
.field .cell.marked:hover {background:#333388;}