/* ==================================================
   CARION MINÉRAUX
   STYLE.CSS
================================================== */

/* ==================================================
   RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#000;
    color:#fff;

    font-family:"Times New Roman", serif;

    line-height:1.4;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:#fff;

    text-decoration:none;

}



/* ==================================================
   HEADER
================================================== */

.header{

    background:#000;

    text-align:center;

}

.header img{

    width:100%;

    max-width:930px;

    margin:auto;

}



/* ==================================================
   MENU
================================================== */

.navbar{

    background:#444;

    padding:5px;

    position:sticky;

    top:0;

    z-index:1000;

}

#menu-toggle{

    display:none;

}

.hamburger{

    display:none;

    padding:14px 20px;

    font-size:24px;

    cursor:pointer;

    user-select:none;

}

.menu{

    display:flex;

    justify-content:center;

    list-style:none;

}

.menu a{

    display:block;

    padding:16px 22px;

    font-size:22px;

    color:white;

    border-radius:10px;

    transition:
        transform .25s,
        background .25s,
        box-shadow .25s;

}

.menu a:hover{

    background:#777;

    transform:scale(1.05);

    box-shadow:
        0 0 10px rgba(255,255,255,.25);

}


/* ==================================================
   CONTENU
================================================== */

.main{

    width:min(1600px,96%);

    margin:auto;

    padding:25px 0;

}



/* ==================================================
   GALERIE DU CATALOGUE
================================================== */

.galerie{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:25px;

    align-items:stretch;

}



/* ==================================================
   BLOC D'UN MINÉRAL
================================================== */

.galerie-mineral{

    display:flex;

    flex-direction:column;

}



/* ==================================================
   CARTE
================================================== */

.mineral{

    display:flex;
    flex-direction:column;

    background:#111;

    border:1px solid #666;

    border-radius:12px;

    overflow:hidden;

    height:100%;

    box-shadow:
        0 0 0 1px #333 inset,
        0 2px 8px rgba(0,0,0,.8),
        0 0 12px rgba(255,255,255,.08);

}


/* ==================================================
   PHOTO
================================================== */

.mineral a{

    display:block;

    overflow:hidden;

}

.mineral img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:contain;

    background:#000;

    transition:.25s;

}

.mineral:hover img{

    transform:scale(1.03);

}

.mineral{

    transition:
        transform .25s,
        box-shadow .25s;

}

.mineral:hover{

    transform:translateY(-4px);

    box-shadow:
        0 6px 18px rgba(0,0,0,.8),
        0 0 15px rgba(255,255,255,.15);

}



/* ==================================================
   FICHE
================================================== */

.fiche{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;

    text-align:center;

}

.fiche h2{

    font-size:22px;

    margin-bottom:15px;

    line-height:1.2;

}

.fiche p{

    margin-bottom:15px;
    font-size:20px;
    line-height:1.5;


}

.prix{

    margin-top:auto;

    font-size:28px;

    font-weight:bold;

}

/* ==================================================
   GALERIE MODALE
================================================== */

.modal{

    display:none;

}


.modal:target{

    display:block;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.90);

    z-index:5000;

}



/* ==================================================
   FENÊTRE
================================================== */

.fenetre{

    position:relative;

    width:min(1400px,95%);
    height:min(90vh,900px);

    margin:3vh auto;

    background:#111;

    border:1px solid #666;

    border-radius:14px;

    box-shadow:
        0 0 25px rgba(0,0,0,.9),
        0 0 18px rgba(255,255,255,.08);

    padding:20px;

    display:grid;

    grid-template-columns:110px 1fr 340px;

    gap:20px;

}


/* ==================================================
   FERMER
================================================== */

.fermer{

    position:absolute;

    top:10px;

    right:15px;

    font-size:36px;

    line-height:1;

    z-index:100;

}



/* ==================================================
   BOUTONS RADIO
================================================== */

input[type="radio"]{

    display:none;

}



/* ==================================================
   MINIATURES
================================================== */

.miniatures{

    display:flex;

    flex-direction:column;

    gap:12px;

    overflow-y:auto;

    overflow-x:hidden;

}



.miniatures label{

    cursor:pointer;

}



.miniatures img{

    width:100%;

    border:2px solid transparent;

    transition:.20s;

}



.miniatures img:hover{

    border-color:#fff;

}

.miniatures img{

    border:2px solid #444;

    border-radius:8px;

    transition:.25s;

}

.miniatures img:hover{

    border-color:#ddd;

    box-shadow:0 0 10px rgba(255,255,255,.35);

}



/* ==================================================
   GRANDE PHOTO
================================================== */

.grandes-images{

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



.galerie-photo{

    display:none;

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}



/* ==================================================
   AFFICHAGE DES PHOTOS
================================================== */

.photo1:checked ~ .modal .img1{

    display:block;

}

.photo2:checked ~ .modal .img2{

    display:block;

}

.photo3:checked ~ .modal .img3{

    display:block;

}

.photo4:checked ~ .modal .img4{

    display:block;

}

.photo5:checked ~ .modal .img5{
    display:block;
}

.photo6:checked ~ .modal .img6{
    display:block;
}

.photo7:checked ~ .modal .img7{
    display:block;
}



/* ==================================================
   DESCRIPTION
================================================== */

.description{

    overflow-y:auto;

    padding-right:8px;

}



.description h2{

    font-size:28px;

    margin-bottom:18px;

}



.description p{

    margin-bottom:18px;

    line-height:1.5;

    font-size:23px;

}



.description .prix{

    margin:20px 0;

    font-size:32px;

}

/* ==================================================
   TABLETTE
================================================== */

@media (max-width:1200px){

    .galerie{

        grid-template-columns:repeat(3,1fr);

    }

    .fenetre{

        grid-template-columns:90px 1fr 300px;

    }

}



/* ==================================================
   PETITE TABLETTE
================================================== */

@media (max-width:900px){

    .galerie{

        grid-template-columns:repeat(2,1fr);

    }

}



/* ==================================================
   TELEPHONE
================================================== */

@media (max-width:700px){

    /* ---------- Catalogue ---------- */

    .galerie{

        grid-template-columns:1fr;

        gap:20px;

    }

    .fiche{

        padding:15px;

    }

    .fiche h2{

        font-size:22px;

    }

    .prix{

        font-size:26px;

    }



    /* ---------- Fenêtre ---------- */

    .fenetre{

        width:100%;

        height:100vh;

        margin:0;

        padding:12px;

        display:flex;

        flex-direction:column;

        gap:15px;

        overflow:hidden;

    }



    /* ---------- Ordre des blocs ---------- */

    .miniatures{

        order:1;

    }

    .grandes-images{

        order:2;

    }

    .description{

        order:3;

    }



    /* ---------- Miniatures ---------- */

    .miniatures{

        display:flex;

        flex-direction:row;

        align-items:center;

        gap:10px;

        overflow-x:auto;

        overflow-y:hidden;

        flex:none;

        width:100%;

        padding-bottom:5px;

    }

    .miniatures label{

        flex:0 0 auto;

    }

    .miniatures img{

        width:75px;

        height:75px;

        object-fit:contain;

        background:#000;

    }



    /* ---------- Grande photo ---------- */

    .grandes-images{

        flex:1;

        min-height:0;

        display:flex;

        justify-content:center;

        align-items:center;

        overflow:hidden;

    }

    .grandes-images img{

        max-width:100%;

        max-height:100%;

        width:auto;

        height:auto;

        object-fit:contain;

    }



    /* ---------- Description ---------- */

    .description{

        flex:none;

        max-height:30vh;

        overflow-y:auto;

        padding-right:0;

        font-size:17px;

    }

    .description h2{

        font-size:24px;

    }



    /* ---------- Bouton fermer ---------- */

    .fermer{

        position:absolute;

        top:8px;

        right:10px;

        font-size:34px;

    }

}

/* ==================================================
   MENU RESPONSIVE
================================================== */

@media (max-width:700px){

    .hamburger{

        display:block;

        color:#fff;

        background:#666;

    }

    .menu{

        display:none;

        flex-direction:column;

        width:100%;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        text-align:center;

        border-top:1px solid #777;

        font-size:20px;

    }

    #menu-toggle:checked + .hamburger + .menu{

        display:flex;

    }

}

/* ==================================================
   PAGE ACCUEIL - CARTES DES RUBRIQUES
================================================== */


.galerie-accueil{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:25px;

    align-items:stretch;

}


/* ==================================================
   CARTE ACCUEIL
================================================== */


.carte-accueil{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#111;

    border:1px solid #666;

    border-radius:12px;

    overflow:hidden;

    box-shadow:

        0 0 0 1px #333 inset,

        0 4px 12px rgba(0,0,0,.8),

        0 0 15px rgba(255,255,255,.08);

    transition:

        transform .25s,

        box-shadow .25s;

}




.carte-accueil:hover{

    transform:translateY(-5px);

    box-shadow:

        0 8px 20px rgba(0,0,0,.9),

        0 0 18px rgba(255,255,255,.18);

}




.carte-accueil a{

    display:block;

    color:white;

}




/* ==================================================
   PHOTO
================================================== */


.carte-accueil img{

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:contain;

    background:#000;

}



/* ==================================================
   TEXTE
================================================== */


.carte-accueil .fiche{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    text-align:center;

    padding:18px;

}




.carte-accueil h2{

    font-size:24px;

    margin-bottom:15px;

    line-height:1.2;

}




.carte-accueil p{

    font-size:18px;

    line-height:1.5;

    margin:0;

}




/* ==================================================
   FOOTER
================================================== */


.footer{

    width:min(1200px,90%);

    margin:70px auto 40px;

    text-align:center;

    color:white;

    font-size:20px;

}




.footer-separation{

    width:250px;

    height:2px;

    background:#777;

    margin:0 auto 40px;

}




.footer h2{

    font-size:36px;

    margin-bottom:15px;

}




.footer p{

    margin:15px 0;

}




.footer a{

    color:white;

}




.footer a:hover{

    text-decoration:underline;

}




.footer .horaires{

    font-size:24px;

    margin-top:30px;

}




/* ==================================================
   RESPONSIVE ACCUEIL
================================================== */



@media(max-width:1200px){

    .galerie-accueil{

        grid-template-columns:repeat(3,minmax(0,1fr));

    }

}


@media(max-width:850px){

    .galerie-accueil{

        grid-template-columns:repeat(2,260px);

        justify-content:center;

    }

}


@media(max-width:600px){

    .galerie-accueil{

        grid-template-columns:1fr;

    }


    .carte-accueil h2{

        font-size:24px;

    }


    .footer h2{

        font-size:30px;

    }


    .footer .horaires{

        font-size:20px;

    }

}

.button {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

.button:hover {
  background-color: RoyalBlue;
}

/* ==================================================
   RECHERCHE
================================================== */

.menu-recherche{

    position:relative;

    display:flex;

    align-items:center;

}

.search-toggle{

    background:none;

    border:none;

    color:#fff;

    padding:16px 20px;

    cursor:pointer;

    display:flex;

    align-items:center;

}

.search-toggle:hover{

    color:#bbb;

}

.search-toggle svg{

    display:block;

}

.search-box{

    display:none;

    position:absolute;

    top:100%;

    right:0;

    width:min(420px, 92vw);

    background:#111;

    border:1px solid #666;

    border-radius:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.6);

    padding:14px;

    z-index:2000;

}

.search-box.ouvert{

    display:block;

}

#search-input{

    width:100%;

    padding:10px 12px;

    border-radius:8px;

    border:1px solid #666;

    background:#000;

    color:#fff;

    font-size:16px;

    font-family:"Times New Roman", serif;

}

.search-resultats{

    max-height:60vh;

    overflow-y:auto;

    margin-top:10px;

}

.search-resultat{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px;

    border-radius:8px;

    color:#fff;

}

.search-resultat:hover{

    background:#222;

}

.search-resultat img{

    width:50px;

    height:50px;

    object-fit:contain;

    background:#000;

    border-radius:6px;

    flex:none;

}

.search-resultat-texte{

    display:flex;

    flex-direction:column;

    font-size:14px;

    line-height:1.3;

}

.search-resultat-texte em{

    font-style:normal;

    color:#aaa;

    font-size:13px;

}

.search-resultat-texte b{

    color:#fff;

}

.search-vide{

    color:#aaa;

    font-size:14px;

    padding:8px;

}


/* Décalage pour que le menu sticky ne cache pas la fiche visée
   depuis un résultat de recherche, + petit halo pour la repérer */

.galerie-mineral{

    scroll-margin-top:90px;

}

.galerie-mineral:target .mineral{

    animation:rechercheHighlight 2s ease;

}

@keyframes rechercheHighlight{

    0%{

        box-shadow:0 0 0 4px rgba(255,255,255,.9);

    }

    100%{

        box-shadow:

            0 0 0 1px #333 inset,

            0 2px 8px rgba(0,0,0,.8),

            0 0 12px rgba(255,255,255,.08);

    }

}


/* Idem pour les fiches météorites/tectites (structure .mineral identique) */

.section-title{

    scroll-margin-top:90px;

}


@media (max-width:700px){

    .search-box{

        right:-10px;

    }

}