/**

 * ==============================================================================

 * LES CHEMINS DE GÉGÈNE - NAVIGATION

 * ==============================================================================

 * Fichier    : /travail/css/navigation.css

 * Version    : 1.1

 * Date MAJ   : 16/03/2026

 * Contenu    : Header, Navigation, Sous-menu, Breadcrumb

 *

 * HISTORIQUE :

 * V1.0 - Création

 * V1.1 - Espacement uniforme 15px

 * ==============================================================================

 */



/* ==========================================================================

   HEADER

   ========================================================================== */

.main-header { text-align: center; padding: 15px; border-bottom: 2px solid #e0ddd5; }

.main-logo { width: 160px; height: auto; display: block; margin: 0 auto 10px; }

@media (min-width: 992px) { .main-logo { width: 260px; } }



/* Recherche dans la barre breadcrumb */

.breadcrumb-search-form { display: flex; align-items: center; flex-shrink: 0; padding-right: 10px; }

.breadcrumb-search-input { background: var(--bg-grey); border: 1px solid #e0ddd5; border-right: none; border-radius: 20px 0 0 20px; padding: 5px 12px; font-family: var(--font-corps); font-size: 0.85rem; color: var(--color-text); width: 160px; outline: none; transition: width 0.3s ease; }

.breadcrumb-search-input:focus { width: 220px; border-color: var(--color-orange); }

.breadcrumb-search-btn { background: var(--color-orange); border: none; border-radius: 0 20px 20px 0; padding: 5px 11px; cursor: pointer; color: white; font-size: 0.9rem; transition: background 0.3s ease; line-height: 1; }

.breadcrumb-search-btn:hover { background: var(--color-green); }

@media (max-width: 600px) {

    .breadcrumb-search-input { width: 100px; font-size: 0.8rem; }

    .breadcrumb-search-input:focus { width: 140px; }

}



/* ==========================================================================

   NAVIGATION PRINCIPALE

   ========================================================================== */

.main-nav { position: sticky; top: 0; z-index: 9999; padding: 10px 0; background: var(--bg-site); border-bottom: 1px solid #e0ddd5; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.nav-toggle { display: none; }

.nav-toggle-label { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 10px; }

.menu-text { font-family: var(--font-titre); font-size: 1.4rem; color: var(--color-text); }

.hamburger, .hamburger::before, .hamburger::after { display: block; background: var(--color-text); height: 3px; width: 25px; position: relative; transition: all 0.3s; }

.hamburger::before { content: ""; top: -8px; position: absolute; left: 0; }

.hamburger::after { content: ""; top: 8px; position: absolute; left: 0; }

.nav-toggle:checked ~ .nav-list { display: block; }

.nav-list { display: none; list-style: none; width: 100%; text-align: center; padding: 15px 0; }

.nav-list li { margin: 15px 0; }

.nav-link { text-decoration: none; color: var(--color-text); font-weight: 700; font-family: var(--font-titre); font-size: 1.8rem; transition: all 0.3s ease; display: inline-block; }

.nav-link:hover { color: var(--color-orange); transform: translateY(-3px); }

.nav-link.active { color: var(--color-green); }

@media (min-width: 992px) { .nav-toggle-label { display: none; } .nav-list { display: flex; justify-content: center; gap: 40px; padding: 10px 0; } .nav-link { font-size: 1.5rem; } }



/* ==========================================================================

   SOUS-NAVIGATION

   ========================================================================== */

.sub-nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }

.sub-nav-link { text-decoration: none; color: var(--color-text); background: #ffffff; padding: 8px 15px; border-radius: 8px; border: 1px solid var(--color-border-dark); font-size: 0.9rem; font-weight: 700; transition: all 0.3s ease; }

.sub-nav-link:hover, .sub-nav-link.active { background: var(--color-orange); color: #ffffff; border-color: var(--color-orange); transform: translateY(-2px); }



/* ==========================================================================

   SOUS-MENU DÉROULANT

   ========================================================================== */

.nav-item-dropdown { position: relative; }

.nav-link-dropdown { cursor: pointer; }

.nav-dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-site); border: 1px solid #e0ddd5; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); min-width: 180px; z-index: 9998; list-style: none; padding: 10px 0; }

.nav-item-dropdown:hover .nav-dropdown { display: block; }

.nav-dropdown-link { display: block; padding: 10px 20px; text-decoration: none; color: var(--color-text); font-family: var(--font-titre); font-weight: 700; font-size: 1.3rem; transition: all 0.3s ease; white-space: nowrap; }

.nav-dropdown-link:hover, .nav-dropdown-link.active { color: var(--color-orange); background: var(--bg-grey); }

@media (max-width: 992px) {

    .nav-dropdown { display: block; position: static; transform: none; box-shadow: none; border: none; background: var(--bg-grey); border-radius: 8px; margin: 5px 0; padding: 5px 0; }

    .nav-dropdown-link { font-family: var(--font-titre); font-size: 1.5rem; padding: 8px 20px; }

}



/* ==========================================================================

   BREADCRUMB STICKY

   ========================================================================== */

.breadcrumb-container { position: sticky; top: 105px; z-index: 998; background: var(--bg-site); border-bottom: 1px solid #e0ddd5; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.breadcrumb-container:not(:has(nav)):not(:has(.breadcrumb-search-form)) { display: none; }

.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; font-size: 0.9rem; }

.breadcrumb-link { color: var(--color-orange); text-decoration: none; font-weight: 700; transition: color 0.3s ease; }

.breadcrumb-link:hover { color: var(--color-green); }

.breadcrumb-sep { color: #999; }

.breadcrumb-current { color: var(--color-text); font-weight: 700; }