/* =============================================================================
   header.css
   CSS extrait tel quel des blocs <style> de includes/header.php.
   Les blocs sont concatenes DANS LEUR ORDRE D'APPARITION : a specificite
   egale c'est la derniere regle qui gagne, l'ordre ne doit jamais changer.
   Rien n'a ete reecrit, dedoublonne ni reordonne.
   ============================================================================= */

/* ===== bloc 1, ex-ligne 39 de includes/header.php ===== */

.nav-hover-ring {
    position: relative;
    padding: 4px 8px;
    border-radius: 9999px;
    transition: color 0.3s, background 0.3s;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}
.nav-hover-ring:hover {
    color: #8cc63f;
    background: rgba(140,198,63,0.1);
}
nav a, nav button, nav span, .sticky a {
    user-select: none;
    -webkit-user-select: none;
}

/* ============================================
   MOBILE NAV — couleurs alignées desktop
   #8cc63f (vert brand) · #0f2b46 (navy) · gray-900 (fond)
   ============================================ */
.mobile-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    color: #fff;
    font-weight: 500;
    transition: background 0.25s, color 0.25s, transform 0.15s;
    min-height: 48px;
    text-decoration: none;
}
.mobile-link:hover, .mobile-link:focus-visible {
    background: rgba(140, 198, 63, 0.12);
    color: #8cc63f;
}
.mobile-link:active { transform: scale(0.98); }
.mobile-link i.mobile-icon {
    width: 1.5rem;
    text-align: center;
    color: #8cc63f;
    font-size: 1rem;
    flex-shrink: 0;
}
.mobile-link.is-active {
    background: rgba(140, 198, 63, 0.15);
    color: #8cc63f;
}
.mobile-link.is-active i.mobile-icon { color: #8cc63f; }

.mobile-section-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: #6b7280;
    font-weight: 700;
    padding: 0.5rem 1rem 0.25rem;
}

/* Dropdown produits dans mobile menu */
details.mobile-collapse > summary {
    list-style: none;
    cursor: pointer;
}
details.mobile-collapse > summary::-webkit-details-marker { display: none; }
details.mobile-collapse[open] > summary {
    background: rgba(140, 198, 63, 0.08);
    color: #8cc63f;
}
details.mobile-collapse[open] > summary i.mobile-icon { color: #8cc63f; }
details.mobile-collapse[open] .chevron-toggle { transform: rotate(180deg); }
.chevron-toggle { transition: transform 0.25s; }

.mobile-product-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.5rem;
    color: #d1d5db;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.mobile-product-link:hover {
    background: rgba(140, 198, 63, 0.1);
    color: #8cc63f;
}
.mobile-product-link i { color: #6b7280; font-size: 0.65rem; }
.mobile-product-link:hover i { color: #8cc63f; }

/* CTA principal mobile (compte / shop) */
.mobile-cta-primary {
    display: block;
    background: #8cc63f;
    color: #0f2b46;
    font-weight: 700;
    text-align: center;
    padding: 0.95rem 1.5rem;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(140, 198, 63, 0.3);
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
}
.mobile-cta-primary:hover { background: #7ab62f; }
.mobile-cta-primary:active { transform: scale(0.98); }

.mobile-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(140, 198, 63, 0.1);
    color: #8cc63f;
    font-weight: 600;
    border: 1px solid rgba(140, 198, 63, 0.3);
    padding: 0.75rem 1rem;
    border-radius: 9999px;
    transition: background 0.2s;
    text-decoration: none;
}
.mobile-cta-secondary:hover { background: rgba(140, 198, 63, 0.18); }

/* Sélecteur de langue mobile */
.mobile-lang-pill {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    font-weight: 700; font-size: 0.85rem;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s;
}
.mobile-lang-pill:hover { color: #8cc63f; border-color: rgba(140, 198, 63, 0.4); }
.mobile-lang-pill.is-active {
    background: #8cc63f;
    color: #0f2b46;
    border-color: #8cc63f;
}

/* ============================================
   TIROIR MOBILE
   Le menu s'ouvrait en accordeon sous la barre : il poussait la page vers
   le bas, se faisait couper par la hauteur de l'ecran, et le bouton de
   compte finissait hors de portee du pouce. C'est maintenant un panneau
   fixe avec sa propre barre de titre et un pied colle : le contenu defile,
   les actions restent visibles.
   Le fond est le meme #111827 que la barre du PC, et le mode clair garde
   ce bloc sombre via la regle #mobile-menu de theme-home.css.
   ============================================ */
.pp-mnav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(4, 12, 22, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
}
.pp-mnav-backdrop.is-open { opacity: 1; pointer-events: auto; }

#mobile-menu.pp-mnav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* 274px : assez large pour « Parcours d'examen » sur une ligne, assez
       etroit pour laisser voir la page derriere et garder le pouce en
       course. 78vw prend le relais sur les tres petits ecrans. */
    width: min(78vw, 274px);
    z-index: 65;
    display: flex;
    flex-direction: column;
    background: #111827;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
    /* 102% et pas 100% : la bordure gauche depassait d'un pixel au repos. */
    transform: translateX(102%);
    visibility: hidden;
    overscroll-behavior: contain;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}
#mobile-menu.pp-mnav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    #mobile-menu.pp-mnav, .pp-mnav-backdrop { transition: none; }
}
/* Sur PC le tiroir n'existe pas. La classe utilitaire lg:hidden ne suffit
   PAS ici : #mobile-menu.pp-mnav (id + classe) l'emporte sur elle et le
   panneau serait reste affiche a droite de l'ecran. */
@media (min-width: 1024px) {
    #mobile-menu.pp-mnav, .pp-mnav-backdrop { display: none !important; }
}
/* Empeche la page de defiler derriere le tiroir. */
body.pp-mnav-lock { overflow: hidden; }

.pp-mnav-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pp-mnav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
}
.pp-mnav-close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: #d1d5db;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pp-mnav-close:hover { color: #8cc63f; border-color: rgba(140, 198, 63, 0.4); }
.pp-mnav-close:active { transform: scale(0.94); }

.pp-mnav-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 18px;
}
.pp-mnav-body .mobile-link + .mobile-link { margin-top: 2px; }
#mobile-menu .mobile-link.is-active { box-shadow: inset 3px 0 0 #8cc63f; }
/* Panneau etroit : le libelle doit pouvoir se retrecir. Sans min-width:0
   un enfant de flex refuse de passer sous sa largeur de contenu et pousse
   le chevron hors du panneau. */
#mobile-menu .mobile-link { padding-left: 0.8rem; padding-right: 0.8rem; gap: 0.7rem; }
#mobile-menu .mobile-link > span { min-width: 0; }

.pp-mnav-foot {
    flex: 0 0 auto;
    padding: 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}
.pp-mnav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.pp-mnav-rowlabel {
    flex: 1 1 auto;
    min-width: 0;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Burger icône — légère scale au toggle */
#mobile-menu-btn i { transition: transform 0.2s; }
#mobile-menu-btn:active i { transform: scale(0.85); }
#mobile-menu-btn:hover { color: #8cc63f; }

/* ============================================
   DESKTOP DROPDOWN ITINÉRAIRES — CSS pur
   (n'utilise pas group-hover:block qui peut ne pas être
    compilé dans tailwind.min.css statique)
   ============================================ */
#nav-routes-dropdown .nav-routes-panel {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 50;
}
#nav-routes-dropdown:hover .nav-routes-panel,
#nav-routes-dropdown:focus-within .nav-routes-panel {
    display: block;
    animation: fadeDownPanel 0.18s ease-out;
}
@keyframes fadeDownPanel {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#nav-routes-dropdown .nav-routes-chevron {
    transition: transform 0.2s;
    display: inline-block;
}
#nav-routes-dropdown:hover .nav-routes-chevron {
    transform: rotate(180deg);
}

/* CARTE intérieure du dropdown (largeur garantie en CSS pur) */
.nav-routes-card {
    width: 760px;
    max-width: 92vw;
    background: rgba(17, 24, 39, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid #374151;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    padding: 20px;
    box-sizing: border-box;
}

/* Header du dropdown */
.nav-routes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1f2937;
}
.nav-routes-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.nav-routes-count {
    color: #6b7280;
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
}
.nav-routes-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(140, 198, 63, 0.1);
    border: 1px solid rgba(140, 198, 63, 0.3);
    color: #8cc63f;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 9999px;
    transition: background 0.2s;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-routes-cta:hover { background: rgba(140, 198, 63, 0.2); }

/* Groupes par région */
.nav-routes-groups { display: flex; flex-direction: column; gap: 16px; }
.nav-routes-grouplabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.nav-routes-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nav-routes-region {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.nav-routes-regioncount {
    color: #4b5563;
    font-size: 10px;
}

/* Grille 4 colonnes des villes */
.nav-routes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 12px;
}
.nav-routes-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    min-width: 0;
}
.nav-routes-item:hover {
    color: #8cc63f;
    background: rgba(140, 198, 63, 0.1);
}
.nav-routes-item i {
    color: #4b5563;
    font-size: 9px;
    flex-shrink: 0;
}
.nav-routes-item:hover i { color: #8cc63f; }
.nav-routes-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ============================================
   DROPDOWN THÉORIE — même base que routes
   ============================================ */
#nav-theorie-dropdown .nav-theorie-panel {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 50;
}
#nav-theorie-dropdown:hover .nav-theorie-panel,
#nav-theorie-dropdown:focus-within .nav-theorie-panel {
    display: block;
    animation: fadeDownPanel 0.18s ease-out;
}
#nav-theorie-dropdown .nav-theorie-chevron {
    transition: transform 0.2s;
    display: inline-block;
}
#nav-theorie-dropdown:hover .nav-theorie-chevron { transform: rotate(180deg); }

/* Badge "GRATUIT" sur le test gratuit */
.nav-theorie-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8cc63f, #7ab62f);
    color: #0f2b46;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 9999px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-left: auto;
}

/* Wrapper des cours (grille à 2 colonnes de groupes pour gain de hauteur) */
.nav-theorie-cours-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #1f2937;
}
.nav-theorie-cours-wrap .nav-routes-grid {
    grid-template-columns: 1fr 1fr;
}

/* Menu théorie : panneau compact + liste 1 colonne lisible (libellés entiers) */
#nav-theorie-dropdown .nav-routes-card {
    width: 340px;
}
#nav-theorie-dropdown .nav-routes-header { flex-wrap: wrap; }
#nav-theorie-dropdown .nav-routes-grid {
    grid-template-columns: 1fr;
    gap: 4px;
}
#nav-theorie-dropdown .nav-routes-item {
    font-size: 14px;
    padding: 11px 12px;
}
#nav-theorie-dropdown .nav-routes-item i {
    font-size: 13px;
    color: #9ca3af;
    width: 16px;
    text-align: center;
}
#nav-theorie-dropdown .nav-routes-item:hover i { color: #8cc63f; }
#nav-theorie-dropdown .nav-routes-item span { white-space: nowrap; }

/* État DISPONIBLE des cours */
.nav-cours-item.is-available i.fa-circle-check {
    color: #8cc63f !important;
    font-size: 10px;
}
.nav-cours-item.is-available:hover { color: #8cc63f; }

/* État COMING SOON des cours */
.nav-cours-item.is-coming {
    color: #6b7280;
    cursor: pointer;
}
.nav-cours-item.is-coming i.fa-clock {
    color: #4b5563 !important;
    font-size: 10px;
}
.nav-cours-item.is-coming:hover {
    color: #d1d5db;
    background: rgba(107, 114, 128, 0.1);
}
.nav-cours-item.is-coming:hover i.fa-clock {
    color: #9ca3af !important;
}
.nav-cours-soon {
    display: inline-block;
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-left: auto;
    text-transform: lowercase;
}

/* Footer légende du dropdown théorie */
.nav-theorie-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #1f2937;
    font-size: 11px;
    color: #6b7280;
}
.nav-theorie-roadmap {
    color: #8cc63f;
    font-weight: 700;
    text-decoration: none;
    font-size: 11px;
}
.nav-theorie-roadmap:hover { color: #a3d958; }

/* ===== bloc 2, ex-ligne 601 de includes/header.php ===== */

@keyframes driveRight { 0% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 100% { transform: translateX(-8px); } }
@keyframes wheelSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes roadDash { 0% { transform: translateX(0); opacity: 0.6; } 100% { transform: translateX(-20px); opacity: 0; } }
.car-anim { animation: driveRight 2s ease-in-out infinite; display: inline-block; }
.car-anim i { position: relative; }
.road-lines { display: inline-flex; gap: 3px; margin-right: 4px; }
.road-lines span { display: inline-block; width: 6px; height: 2px; background: #0f2b46; opacity: 0.3; border-radius: 1px; animation: roadDash 0.8s linear infinite; }
.road-lines span:nth-child(2) { animation-delay: 0.2s; }
.road-lines span:nth-child(3) { animation-delay: 0.4s; }

/* ===== bloc 3, ex-ligne 937 de includes/header.php ===== */

                    #lang-dropdown:hover > #lang-menu,
                    #lang-dropdown:focus-within > #lang-menu { display: block; }