/* ==========================================================
   COMMUN.CSS : éléments partagés par toutes les pages (Archives, Brouillon, Technique, Contact)
   À charger APRÈS la feuille de la page, dans le <head> :
       <link rel="stylesheet" href="commun.css">
       <script src="fader.js" data-depart=".onde" defer></script>
   • le fader : une petite jauge de console posée au milieu de la marge de droite, qui apparaît pendant le défilement
   • l'en-tête mobile : onglets, flèche de retour, petit faust et rond de thème alignés sur le même retrait
   Rien ici ne modifie les marges ni la mise en page des pages : tout s'appuie sur --marge et --respiration.
   ========================================================== */


/* ==========================================================
   FADER DISCRET
   Fixé au milieu de la marge de droite (la petite colonne à droite de la trame), à mi-hauteur de la fenêtre.
   Il n'apparaît que pendant le défilement et s'efface quand on s'arrête ; il ne démarre qu'une fois
   passé l'élément indiqué par data-depart (la ligne de l'onde), et reste caché si la page est trop courte.
   Le script (fader.js) crée l'élément .fader et met à jour --p (progression de 0 à 1).
   ========================================================== */
.fader {
    --p: 0;
    position: fixed;
    z-index: 3;
    right: calc(var(--marge) / 2);      /* centré dans la marge de droite, la « petite colonne » à côté de la trame */
    top: 50%;
    width: 0;
    height: min(34vh, 20rem);
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s ease;      /* disparition lente… */
}

.fader.present.actif {
    opacity: 1;
    transition-duration: 0.25s;         /* …apparition rapide */
}

/* échelle d'une tranche de console : graduations tous les 10 %, plus longues tous les 20 %, filet de glissière.
   Elles sont centrées sur la glissière ; les repères en dB sont à sa droite. */
.fader::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -6px;
    width: 12px;
    background:
        linear-gradient(var(--trait-fort), var(--trait-fort)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(var(--encre-douce), var(--encre-douce)) 50% 100% / 12px 1px no-repeat,
        linear-gradient(to bottom, var(--encre-douce) 1px, transparent 1px) 50% 0 / 12px 20% repeat-y,
        linear-gradient(to bottom, var(--encre-douce) 1px, transparent 1px) 50% 0 / 6px 10% repeat-y;
    opacity: 0.7;
}

/* partie déjà parcourue : la glissière s'allume jusqu'à la tête */
.fader-fill {
    position: absolute;
    left: -1.5px;
    top: 0;
    width: 3px;
    height: calc(var(--p) * 100%);
    background: linear-gradient(to bottom, transparent, var(--braise));
    opacity: 0.75;
    box-shadow: 0 0 8px -1px var(--braise);
}

/* la tête : un capuchon de potentiomètre rectiligne, avec ses stries et son trait lumineux */
.fader-cap {
    position: absolute;
    left: 0;
    top: calc(var(--p) * 100%);
    width: 18px;
    height: 11px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--encre-douce);
    border-radius: 1px;
    background:
        linear-gradient(var(--braise), var(--braise)) 50% 50% / 100% 1px no-repeat,
        repeating-linear-gradient(to bottom, transparent 0 2px, var(--trait-fort) 2px 3px),
        var(--fond);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 10px -3px var(--braise);
}

/* repères en dB, à droite de la glissière, dans la marge (à partir de 1280 px) */
.fader-echelle { display: none; }

@media (min-width: 1280px) {
    .fader-echelle {
        display: block;
        position: absolute;
        left: 11px;
        top: 0;
        height: 100%;
        font: 0.5rem/1 "Space Mono", monospace;
        letter-spacing: 0.04em;
        color: var(--encre-douce);
        opacity: 0.8;
    }
    .fader-echelle b {
        position: absolute;
        left: 0;
        font-weight: 400;
        transform: translateY(-50%);
        white-space: nowrap;
    }
    .fader-echelle b:nth-child(1) { top: 0; }
    .fader-echelle b:nth-child(2) { top: 20%; }
    .fader-echelle b:nth-child(3) { top: 40%; }
    .fader-echelle b:nth-child(4) { top: 60%; }
    .fader-echelle b:nth-child(5) { top: 80%; }
    .fader-echelle b:nth-child(6) { top: 100%; }
}

@media (max-width: 760px) {
    .fader { height: min(28vh, 14rem); }
}

@media (prefers-reduced-motion: reduce) {
    .fader { transition: none; }
}


/* ==========================================================
   EN-TÊTE MOBILE (écrans de 760 px et moins)
   Rangée 1 : les 4 onglets, avec le rond de thème au bout de la même ligne (même hauteur de texte).
   Rangée 2 : flèche de retour à gauche, petit faust au centre.
   Tout est calé sur le même retrait que le contenu (--respiration) : le bord gauche de la flèche
   tombe sous le « A » d'Archives, le bord droit du rond dans l'alignement du « t » de Contact.
   Flèche et rond ont une zone de toucher de 44 px, sans que le dessin grossisse.
   ========================================================== */
@media (max-width: 760px) {
    .entete {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: normal;
        row-gap: 0.35rem;
        column-gap: 0;
        padding-top: calc(clamp(0.9rem, 3vh, 1.5rem) - 0.55rem);
    }

    /* les onglets laissent la place du rond à droite */
    .nav-bar {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: stretch;
        width: auto;
        margin: 0;
        padding: 0 calc(var(--respiration) + 2.6rem) 0 var(--respiration);
        display: flex;
        justify-content: space-between;
        gap: 0;
    }

    .nav-bar a {
        padding-top: 0.55rem;
        font-size: 0.64rem;
        letter-spacing: 0.06em;
    }

    .retour {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 1.25rem 0 var(--respiration);
        font-size: 1.15rem;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .retour .txt { display: none; }

    .mini-embleme {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        margin: 0;
    }

    /* le rond reste sur la rangée des onglets, à leur droite, centré sur leur texte */
    .theme-toggle {
        position: relative;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: end;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0 calc(var(--respiration) - 12px) -0.55rem 0;
        padding: 0;
        z-index: 2;
    }

    .theme-toggle svg {
        width: 1.15rem;
        height: 1.15rem;
        opacity: 0.9;
    }

    /* petit filet vertical, comme une séparation de tranche : il rattache le rond à la ligne des onglets */
    .theme-toggle::before {
        content: "";
        position: absolute;
        left: 3px;
        top: calc(50% - 0.55rem - 0.3rem);
        height: 1rem;
        width: 1px;
        background: var(--trait-fort);
    }
}

/* très petits écrans : onglets un peu plus fins pour garder de l'air entre eux */
@media (max-width: 380px) {
    .nav-bar a {
        font-size: 0.6rem;
        letter-spacing: 0.03em;
    }
}