/* =====================================================
   Bibliothèque Unicode RaspiPhil V2
   Feuille de style principale
===================================================== */


/* RESET */

* {
    box-sizing: border-box;
}


body {

    margin:0;
    padding:0;

    font-family: Arial, Helvetica, sans-serif;

    background:#101820;

    color:white;
}



.container {

    width:95%;
    max-width:1200px;

    margin:auto;

    padding:20px;

}



/* CARTES */

.card {

    background:#1b2735;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 4px 12px rgba(0,0,0,0.35);

}



/* HEADER */

.header {

    text-align:center;

    border-top:4px solid #2196f3;

}


.header h1 {

    color:#00bfff;

    font-size:32px;

}


.header h2 {

    color:#ff9800;

}




h2 {

    color:#ffb300;

}




.hr-blue {

    height:3px;

    border:0;

    background:#2196f3;

    margin:25px 0;

}





/* RECHERCHE */

input {

    width:100%;

    padding:14px;

    font-size:18px;

    border-radius:8px;

    border:2px solid #2196f3;

    background:#0d1117;

    color:white;

}



input:focus {

    outline:none;

    border-color:#00e676;

}





/* MENU */

.menu {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:15px;

}


.menu a {

    text-decoration:none;

    text-align:center;

    background:#1565c0;

    color:white;

    padding:15px;

    border-radius:10px;

    font-size:18px;

    transition:0.3s;

}


.menu a:hover {

    background:#2196f3;

    transform:translateY(-3px);

}





/* TABLEAU */

.table-responsive {

    overflow-x:auto;

}



table {

    width:100%;

    border-collapse:collapse;

}



th {

    background:#1565c0;

    padding:12px;

}



td {

    padding:12px;

    text-align:center;

    border-bottom:1px solid #37474f;

}



tr:hover {

    background:#263238;

}





/* EMOJI */

.emoji {

    font-size:38px;

}





/* BOUTON COPIER */

.copy-btn {

    border:0;

    padding:8px 14px;

    margin:3px;

    border-radius:8px;

    cursor:pointer;

    background:#00897b;

    color:white;

    font-size:16px;

}



.copy-btn:hover {

    background:#00bfa5;

}





/* ⭐ BOUTON FAVORI CORRIGE */

.fav-btn {

    background:#ff9800;

    color:#ffffff;

    font-size:18px;

}



.fav-btn:hover {

    background:#f57c00;

}





/* MESSAGE */

#message {

    position:fixed;

    bottom:20px;

    right:20px;

    background:#00c853;

    padding:15px;

    border-radius:10px;

    display:none;

    color:white;

}





/* FOOTER */

.footer {

    text-align:center;

    background:#0d1117;

    padding:20px;

    margin-top:30px;

    border-radius:10px;

    color:#cccccc;

}





/* MOBILE */

@media(max-width:700px){


.container {

    width:100%;

    padding:10px;

}


.header h1 {

    font-size:24px;

}


.menu {

    grid-template-columns:1fr;

}


table {

    font-size:14px;

}


.emoji {

    font-size:30px;

}


}
/* Bouton Favori ⭐ */

button.fav-btn {

    background-color:#1565c0 !important;

    border:2px solid #ffb300;

    color:white;

}


button.fav-btn:hover {

    background-color: #666666 !important;

}

/* RETOUR */

.btn-back{
    display:inline-block;
    margin-bottom:20px;
    padding:10px 18px;
    background:#98cd1d;
    color:#180d0d;
    text-decoration:none;
    border-radius:8px;
}

.btn-back:hover{
    background:#a55d10;
    color:white;
}

.infos-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px 20px;
    margin-top:15px;
}

.infos-grid p{
    margin:0;
    padding:4px 0;
    font-size:15px;
}

@media (max-width:900px){
    .infos-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){
    .infos-grid{
        grid-template-columns:1fr;
    }
}