/* ==========================================================================
   Way-Up - Bandeau de navigation partage (.nav-simple)
   --------------------------------------------------------------------------
   Source unique du bandeau utilise par les pages de presentation et de
   decouverte. La reference visuelle est presentation/harmonisation/index.html :
   ces regles en sont l'extraction, deplacees depuis presentation/category.css
   pour qu'aucune page n'en garde une copie.

   Deux principes :
   - la geometrie est ecrite en valeurs litterales, pour que le bandeau soit
     rigoureusement identique quel que soit le jeu de variables charge par la
     page (certaines chargent css/variables.css, d'autres non) ;
   - les couleurs passent par des jetons definis sur .nav-simple elle-meme,
     avec une variante [data-theme="light"], pour que le bandeau suive le
     theme meme sur une page qui n'a pas de palette claire.

   A charger EN DERNIER, apres css/components.css et presentation/category.css.
   ========================================================================== */

.nav-simple {
    /* Jetons du bandeau, theme sombre (defaut). */
    --nav-surface: rgba(255, 255, 255, 0.03);
    --nav-surface-hover: rgba(255, 255, 255, 0.06);
    --nav-border: rgba(255, 255, 255, 0.06);
    --nav-border-default: rgba(255, 255, 255, 0.1);
    --nav-border-hover: rgba(168, 85, 247, 0.5);
    --nav-scrolled: rgba(9, 9, 11, 0.9);
    --nav-text: #fafafa;
    --nav-text-soft: #a1a1aa;
    --nav-text-dim: #71717a;
    --nav-accent: #a855f7;

    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 1200px;
    z-index: 100;
    background: var(--nav-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--nav-border);
    border-radius: 9999px;
    /* La reference n'a pas de remplissage propre : sa declaration d'origine
       etait `var(--space-3) var(--space-6)` et --space-3 n'est defini sur
       aucune de ces pages, donc la declaration entiere tombait. La hauteur du
       bandeau vient du remplissage vertical du fil d'Ariane ci-dessous. Valeur
       figee ici pour rester identique a la reference ; une seule ligne a
       changer si le remplissage doit revenir. */
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    /* Certaines pages heritent d'un `nav { height: 100%; margin: 0 auto }`
       (style.css, feuille historique) : on le neutralise ici. */
    height: auto;
    min-height: 0;
    margin: 0;
}

[data-theme="light"] .nav-simple {
    --nav-border: rgba(0, 0, 0, 0.08);
    --nav-border-default: rgba(0, 0, 0, 0.12);
    --nav-scrolled: rgba(255, 255, 255, 0.9);
    --nav-text: #18181b;
    --nav-text-soft: #52525b;
    --nav-text-dim: #71717a;
}

.nav-simple.scrolled {
    background: var(--nav-scrolled);
    border-color: var(--nav-border-default);
}

/* Logo ---------------------------------------------------------------- */
.nav-simple .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.nav-simple .nav-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* Le mot-image est sombre a l'origine : on ne l'inverse qu'en theme sombre,
   sinon il devient blanc sur blanc en theme clair. */
.nav-simple .nav-logo img.logo-invert {
    filter: brightness(0) invert(1);
}

[data-theme="light"] .nav-simple .nav-logo img.logo-invert {
    filter: none;
}

/* Fil d'Ariane -------------------------------------------------------- */
.nav-simple .breadcrumb {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--nav-text-dim);
    min-width: 0;
    height: auto;
    max-width: none;
    margin: 0;
}

/* `inherit` neutralise les `nav a { font-size; font-weight; letter-spacing }`
   de style.css, la feuille historique encore chargee par quelques pages. */
.nav-simple .breadcrumb a {
    color: var(--nav-text-soft);
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    transition: color 0.2s ease;
}

.nav-simple .breadcrumb a:hover {
    color: var(--nav-accent);
}

.nav-simple .breadcrumb-separator {
    color: var(--nav-text-dim);
}

.nav-simple .breadcrumb-current {
    color: var(--nav-text);
    font-weight: 500;
}

/* Actions -------------------------------------------------------------- */
.nav-simple .nav-actions-simple {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.nav-simple .theme-toggle {
    background: transparent;
    border: none;
    color: var(--nav-text-soft);
    cursor: pointer;
    padding: 0.5rem;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nav-simple .theme-toggle:hover {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.05);
}

.nav-simple .theme-toggle svg {
    width: 20px;
    height: 20px;
}

.nav-simple .sun-icon {
    display: none;
}

.nav-simple .moon-icon {
    display: block;
}

[data-theme="light"] .nav-simple .sun-icon {
    display: block;
}

[data-theme="light"] .nav-simple .moon-icon {
    display: none;
}

.nav-simple .nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--nav-surface);
    border: 1px solid var(--nav-border-default);
    border-radius: 9999px;
    color: var(--nav-text-soft);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: normal;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.nav-simple .nav-back:hover {
    background: var(--nav-surface-hover);
    color: var(--nav-text);
    border-color: var(--nav-border-hover);
}

.nav-simple .nav-back svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Decalage du contenu
   Les pages qui ouvrent sur un heros pleine hauteur (.hero-simple, .hero,
   .section) n'ont besoin de rien : le bandeau flotte au-dessus. Les pages de
   contenu qui commencent par leur titre ajoutent cette classe sur <body> pour
   que le bandeau ne recouvre pas le premier titre.
   ========================================================================== */
body.nav-simple-offset {
    padding-top: 7.5rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .nav-simple {
        padding: 0.5rem 1rem;
    }

    .nav-simple .breadcrumb {
        display: none;
    }

    body.nav-simple-offset {
        padding-top: 6rem;
    }
}