/* ======================================================
   Moteur de recherche Toquata
====================================================== */

.search-home{
    width:100%;
    margin:10px auto;
}


/* ==========================
   Introduction
========================== */

.search-intro{
    margin-bottom:20px;
}

.search-intro h3 {
    margin: 0 auto;
    padding: 10px 12px;
    max-width: 80%;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    
    color: #ffffff; /* Text en blanc */
    background: rgba(255, 255, 255, 0.1); /* Fond blanc semi-transparent (10% opacité) */
    backdrop-filter: blur(5px); /* Optionnel : effet de flou élégant sur l'image derrière */

    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ==========================
   Formulaire
========================== */

.search-home form{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    margin-bottom:35px;

}

.search-home input[type="search"]{

    flex:1;
    max-width:650px;

    padding:12px 18px;

    font-size:16px;

    border:1px solid #c8c8c8;
    border-radius:10px;

    outline:none;

    transition:.2s;

    box-sizing:border-box;

}

.search-home input[type="search"]:focus{

    border-color:#2F6F73;

    box-shadow:0 0 6px rgba(47,111,115,.20);

}

.search-home button{

    padding:12px 22px;

    font-size:16px;
    font-weight:600;

   /* color:#fff;

    background:#2F6F73; */

    border:none;
    border-radius:10px;

    cursor:pointer;

    transition:.2s;

}

.search-home button:hover{

    background:#D97706;

}


/* ==========================
   Résultats
========================== */

.search-home .grid{

    display:grid;

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

    gap:20px;

}

.search-home .box{

    background:#fff;

    border:1px solid #d8d8d8;

    border-radius:10px;

    padding:16px;

    box-shadow:0 2px 6px rgba(0,0,0,.05);

}

.search-home .box h3{

    margin:0 0 5px;

    color:#8B4513;

    font-size:12px;

}

.search-home .item{

    margin-bottom:5px;

}

.search-home .item:last-child{

    margin-bottom:0;

}

.search-home .item h4{

    margin:0 0 6px;

    font-size:12px;

    line-height:1.35;

}

.search-home .item h4 a{

    color:#2F6F73;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.search-home .item h4 a:hover{

    color:#D97706;

    text-decoration:underline;

}

.search-home .item div{

    color:#555;

    font-size:14px;

    line-height:1.45;

}

.search-home em{

    color:#777;

}

.see-all{

    margin-top:15px;

    padding-top:12px;

    border-top:1px solid #eee;

}

.see-all a{

    color:#2F6F73;

    font-weight:600;

    text-decoration:none;

}

.see-all a:hover{

    color:#D97706;

    text-decoration:underline;

}


/* ==========================
   Accessibilité
========================== */

.visually-hidden{

    position:absolute;

    width:1px;
    height:1px;

    margin:-1px;
    padding:0;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


/* ==========================
   Tablettes
========================== */

@media (max-width:1024px){

    .search-home{

        width:92%;

    }

    .search-home .grid{

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

    }

}


/* ==========================
   Mobile
========================== */

@media (max-width:768px){

    .search-home{

        width:100%;

        margin:15px auto;

    }

    .search-home form{

        flex-direction:column;

    }

    .search-home input[type="search"]{

        width:100%;
        max-width:100%;

    }

    .search-home button{

        width:100%;

    }

    .search-home .grid{

        grid-template-columns:1fr;

    }

}