/* --- Grille --- */
svg {
    border: 1px solid #444;
}
.cell {
    fill: white;
    stroke: black;
}
.black {
    fill: black;
}
.num {
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-anchor: middle;
    dominant-baseline: central;
    fill: black;
}
.user {
    fill: blue;
    font-weight: bold;
}
.error {
    fill: red;
    font-weight: bold;
}
.active {
    fill: #e0f7fa;
    stroke: red;
    stroke-width: 2px;
}
text {
    pointer-events: none;
}

/* --- Zone du puzzle --- */
#zone {
    margin-top: 20px;
    text-align: center; /* centrer le SVG */
}

/* --- Boutons et infos --- */
#boutons, #choixTaille, #infos, #intro {
    text-align: center;
    margin-bottom: 15px;
}
button {
    margin: 5px;
    padding: 8px 15px;
    font-size: 16px;
}
#ligneInfos {
    font-weight: bold;
    margin-bottom: 6px;
}


/*---zone choix----*/

/* Conteneur des deux sélecteurs */
#zoneChoix {
    display: flex;
    justify-content: center;   /* centre horizontalement */
    align-items: center;        /* aligne verticalement */
    gap: 20px;                  /* espace entre les deux */
    margin-bottom: 15px;
}

/* Chaque bloc (label + select) */
#choixSerie,
#choixTaille {
    display: flex;
    align-items: center;        /* aligne label + select */
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* Neutralise les marges implicites */
#choixSerie label,
#choixTaille label,
#choixSerie select,
#choixTaille select {
    margin: 0;
    padding: 0;
}



/* --- Popup --- */
.msg-box {
    position: fixed;
    top: 35%;
    left: 50%;
 
 transform: translate(-50%, -50%);
 
  background: #f0f7ff;      /* bleu légèrement plus froid */
    border: 1px solid #a8c8e8;
 
  padding: 15px;
    border-radius: 6px;
  
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
    min-width: 260px;
}

.msg-header {
    display: flex;
    justify-content: flex-end; /* pousse l’icône à droite */
    align-items: center;
   
}


.msg-icon {
    width: 32px;
    height: 32px;
}

.msg-footer {
    text-align: center;
    margin-top: 12px;
}


#msgClose {
    margin-top: 12px;
    padding: 6px 18px;
    font-size: 15px;
}