/* Globale */

*{
box-sizing:border-box;
}

body{
font-family:Arial, sans-serif;
margin:0;
background:#031d38;
}

.licence-btn{
display:none;
}

.container{
max-width:800px;
margin:auto;
padding:16px;
}

/* card de le licence */

.card{
background:#fff;
padding:15px;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
margin-top:20px;
width:100%;
} 

/* Entrées  */

input[type="email"]{
width:200px;
padding:10px;
margin-top:10px;
border-radius:8px;
border:1px solid #ddd;
font-size:16px;   /* important pour iPhone */
}

/* Bouton */

button{
padding:10px 15px;
border:none;
border-radius:8px;
cursor:pointer;
background:#007bff;
color:#fff;
position:relative;
overflow:hidden;
} 

button:disabled{
opacity:0.5;
}

/* Modal */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:999;
pointer-events:none;
} 

.modal:not(.hidden){
pointer-events:auto;
}

.modal.hidden{
display:none !important;
}

.modal-box{
background:#fff;
padding:20px;
border-radius:10px;
max-width:400px;
}

/* Utilitaire  */

.hidden{
display:none !important;
}

/* Mise en Page */

#inscriptionRow{
display:flex;
gap:20px;
align-items:flex-start;
flex-wrap:wrap;
}

/* mise en page de saisie du mail et du code */
#licenceCard,
#inscriptionCard{
flex:1 1 350px;
min-width:280px;
}

/* Info Box */

.infoBox{
margin-top:16px;
padding:14px;
background:#eef6ff;
border-left:4px solid #ea5f8b;
border-radius:10px;
font-size:14px;
}

/* Tableaux */

#tableauxContainer{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-top:15px;
}

/* defini le carré de chaque tableau */

.tableau-row{
position:relative;
display:flex;
flex-direction:column;
gap:3px;
padding:10px;
min-height:65px;
border-radius:12px;
background:white;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
transition:transform 0.2s, box-shadow 0.2s, filter 0.2s;
border:none;
cursor:pointer;
width:100%;
}

/* Vérif Box */

#tableauxContainer input[type="checkbox"]{
appearance:none;
width:22px;
height:22px;
border:2px solid #bdbdbd;
border-radius:6px;
position:absolute;
top:12px;
right:12px;
background:white;
cursor:pointer;
}

#tableauxContainer input[type="checkbox"]:checked{
background:#007bff;
border-color:#007bff;
}

#tableauxContainer input[type="checkbox"]:checked::after{
content:"✓";
color:white;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-55%);
}

/* Tableau Interdit */

.tableau-interdit{
opacity:0.55;
}

.tableau-interdit input[type="checkbox"]{
background:#f3f3f3;
border-color:#ccc;
}

.tableau-interdit input[type="checkbox"]::after{
content:"⛔";
font-size:14px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

/* INFOS TABLEAU */

.jour {
    color:#211e1c;
    font-weight:600;
    font-size:18px;
    font-family: 'Roboto', sans-serif;
}

.tableau-ligne {
    font-size:14px;
    color: #102318;
}

.col-tranche{
    font-size:14px;
    color: #0b0c0c;
    font-weight: bold;
}

.col-prix{
    width: 70px;
    font-weight: bold;
    color: #f39c12;
}

.small-jour{
    font-size:14px;
}
/* STATS TABLEAU en globale puis pas libelle */

.stat-inscrit {
    color: #2ecc71;
    font-size:14px;
}

.stat-attente {
    color: #2ecc71;
    font-size:14px;
}

/* Couleur Airzone 
/* Tableaux style moderne */

/* Base */

.tableau-row{
background:#2a2f35;
color:#fff;
border:none;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.25);
transition:all 0.2s ease;
}

/* Flotter */

.tableau-row:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.35);
filter:brightness(1.05);
}

/* couleur des carrés pour choix des tableaux */
/* Vert (Ok) */

.tableau-row.green{
background:linear-gradient(135deg, #0f766e, #1fa982);
color:#e6fffa;
}

/* Rouge (Alerte) */

.tableau-row.red{
background:linear-gradient(135deg, #ff0000, #cc0000);
color:#fff;}

/* Orange (Attente) */

.tableau-row.orange{
background:linear-gradient(135deg, #ffb300, #ff7a00);
color:#fff7ed;
}

/* Gris (Desactivé) */

.tableau-row.grey{
background:linear-gradient(135deg, #babfd7, #b3bbc9);
color:#e5e7eb;
}

/* Fermer deja inscrit */

.tableau-row.locked{
    opacity:0.7;
    filter:grayscale(0.5) brightness(0.9);
    pointer-events:none;
}

/* Interdit */

.tableau-interdit{
opacity:0.5;
filter:grayscale(0.4);
}

/* un petit effet */

.tableau-row.green{
box-shadow:0 4px 12px rgba(16,185,129,0.3);
}
.tableau-row.orange{
box-shadow:0 4px 12px rgba(255,140,0,0.3);
}
.tableau-row.red{
box-shadow:0 4px 12px rgba(255,0,0,0.3);
}

/* On positionne le bouton Valider */

#btnValider{
display:block;
margin:25px auto 0;
} 

/* Titres */

h2{
font-size:1.1rem;
}

/* Licence */

#licenceCard{
max-width:340px;
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
border:1px solid #e8e8e8;
text-align:center;
}

#licenceCard h2{
font-size:18px;
margin-bottom:10px;
}

#licence{
width:150px;
max-width:200px;;
font-size:15px;
text-align:center;
font-weight:700;
padding:4px;
border-radius:10px;
border:2px solid #d6d6d6;
background:#fafafa;
letter-spacing:2px;
transition:all 0.2s;
}

#licence:focus{
outline:none;
border-color:#007bff;
box-shadow:0 4px 12px rgba(0,123,255,0.25);
background:white;
}

/* Résultat Joueur  */

#result{
margin-top:20px;
padding-top:14px;
border-top:1px solid #eee;
font-size:14px;
line-height:1.6;
}

/* Logo */

.logo{
position:fixed;
top:130px;
right:40px;
width:60px;
}

/* Mobile */ 

@media screen and (max-width:600px){

button[onclick="loginAdmin()"],
#logoutBtn{
display:none !important;
}

body{
font-size:14px;
}

.container{
max-width:340px;
margin:auto;
padding:10px;
}

.card{
padding:12px;
margin-top:12px;
}

#inscriptionRow{
display:block;
}

#licenceCard,
#inscriptionCard{
width:100%;
max-width:340px;
margin:auto;
}

.licence-input{
display:flex;
gap:8px;
justify-content:center;
align-items:center;
}

.licence-btn{
display:inline-block;
margin-top:3px;
padding:8px 14px;
font-size:14px;
background:#007bff;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
width:auto;
}

h2{
font-size:16px;
margin-bottom:8px;
}

#licence{
    width:100%;
    max-width:150px;
}

.licence-input{
    display:flex;
    align-items:center; /* important */
}

#licence,
.licence-btn{
    height:42px; /* même hauteur */
}

#licence{
    flex:1;
}

input[type="email"]{
width:100%;
}

#result{
font-size:13px;
line-height:1.4;
}

#tableauxContainer{
grid-template-columns:1fr;
gap:8px;
max-width:240px;
margin:auto;
}

.tableau-row{
max-width:240px;
width:100%;
padding:10px;
min-height:auto;
margin:auto;
}

.col-tableau{
font-size:15px;
}

.col-tranche{
font-size:11px;
}

.stat-inscrit{
font-size:12px;
}

.stat-attente{
font-size:11px;
}
.col-prix{
    width: 70px;
    font-weight: bold;
    color: #f39c12;
}

#tableauxContainer input[type="checkbox"]{
width:18px;
height:18px;
top:10px;
right:10px;
}

button{
width:100%;
font-size:15px;
padding:12px;
}

.logo{
position:static;
display:block;
margin:auto;
margin-bottom:10px;
width:45px;
}

/* Email  avec Code de vérification */

.email-row{
    flex-direction: column;
}

.email-row input{
    width:100%;
}

.email-row button{
    width:100%;
    margin-top:6px;
}

.code-row button{
margin-left:auto;
}

/* Bouton valider code dessous zone de saisie du code */
/* Force affichage vertical du code */

.code-row{
    display:flex;
    flex-direction:column !important;
    align-items:stretch;
    width:100%;
}

.code-row input{
    width:100% !important;
}

.code-row button{
    width:100% !important;
    margin-top:8px;
    margin-left:0 !important;
}
}
/* Fin Mobile */

/* Email code de vérification */

.email-row,
.code-row{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
}

/* champ email */

.email-row input{
flex:1;
}

.email-row button,
.code-row button{
margin-left:auto;
}

/* Code vérification */
 
#verificationCode{
width:240px;
padding:6px;
border-radius:6px;
border:2px solid #ff4d71;
background:#eaf4ff;
text-align:center;
font-family: monospace;
font-size:18px;
font-weight:700;
letter-spacing:12px;
}

/* Emplacement Code */

#verificationCode::placeholder{
font-size:16px;
color:#999;
letter-spacing:1px;
}

/* Gestion Code */

#sendCodeBtn {
  background-color: #007bff;
  color: white;
}

#sendCodeBtn:disabled {
  background-color: #13752a;
}

/* Bouton flash   */
/* bouton qui clignote */

@keyframes blinkSoft {
0% { opacity:1; }
50% { opacity:0.6; }
100% { opacity:1; }
}

.blink{
animation:blinkSoft 1.5s infinite;
}

@media screen and (max-width:600px){

    #adminBtn,
    #logoutBtn{
        display:none !important;
    }

}