/*
 * Ajouts à la section 16 de site.css (Intro 3D), en attente : chargés par intro-3d.php et intro-3d-triton.php, après
 * site.css. Exception à « une seule feuille » : ces deux pages ont été mises en ligne seules le 10/10/2026, alors que
 * site.css contenait en local des changements pas encore en ligne. À verser dans site.css, section 16, à la prochaine
 * mise en ligne groupée, puis retirer le <link> des deux pages et supprimer ce fichier.
 *
 * 1. Les deux vues de intro-3d.php sous l'en-tête fixe du téléphone.
 * 2. La page du triton (intro-3d-triton.php) : le triton du Doc « Modéliser le triton », fait de zéro le 09/10/2026.
 *    Elle s'appuie sur la section 16 : cadre .intro3d, .intro3d--choix, grand titre .intro3d__titre, .intro3d__consigne,
 *    .intro3d__note, bouton .intro3d__version--retour.
 */

/* ------------------------------------------------------------------
 * 1. En-tête fixe du téléphone (48 px, --nav-h ; 0 sur ordinateur) : le haut des pages ne passe plus dessous,
 *    comme le demande la section 1. Avant le 10/10, il cachait le titre de la vue de lecture (entier) et le haut
 *    du titre de la vue de choix.
 * ------------------------------------------------------------------ */
.intro3d--choix {
    padding-top: calc(40px + var(--nav-h));
}

.intro3d--lecture {
    padding-top: var(--nav-h);
}

@media (max-width: 800px) {
    .intro3d--choix {
        padding-top: calc(32px + var(--nav-h));
    }
}

/* ------------------------------------------------------------------
 * 2. Page du triton
 * ------------------------------------------------------------------ */
.triton__retour {
    margin-bottom: 32px;
}

.triton__retour--bas {
    margin: 56px 0 0;
}

/* Sections : un titre en bloc brun et jaune, comme les libellés des cartes de intro-3d.php */
.triton__section {
    margin-top: 56px;
}

.triton__titre {
    display: inline-block;
    padding: 0.08em 0.2em 0.14em;
    background: var(--brun);
    color: var(--jaune);
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 36px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
}

.triton__texte,
.triton__liste {
    max-width: 72ch;
    margin-top: 12px;
    font-size: var(--t-corps);
    line-height: 1.45;
}

.triton__liste {
    padding-left: 1.2em;
    list-style: disc;
}

.triton__liste li + li {
    margin-top: 8px;
}

/* Fichiers à télécharger : boutons jaunes, comme le bouton de lecture de intro-3d.php */
.triton-fichiers {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-top: 20px;
}

.triton-fichiers__item {
    max-width: 36ch;
    font-size: var(--t-corps);
    line-height: 1.45;
}

.triton-fichiers__lien {
    display: inline-block;
    margin-bottom: 6px;
    padding: 10px 16px;
    background: var(--jaune);
    color: var(--brun);
    font-weight: 500;
    text-decoration: underline transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--duree) var(--courbe);
}

.triton-fichiers__lien:focus-visible {
    outline: 3px solid var(--brun);
    outline-offset: 3px;
    text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
    .triton-fichiers__lien:hover {
        text-decoration: underline;
    }
}

/* Galeries : une carte par image ou vidéo (média, libellé, détail) */
.triton-galerie {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    max-width: 1400px;
    margin-top: 24px;
}

.triton-galerie--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Les deux vidéos carrées tiennent côte à côte dans la hauteur de l'écran */
.triton-galerie--videos {
    max-width: max(640px, calc((100vh - 220px) * 2 + 24px));
    max-width: max(640px, calc((100svh - 220px) * 2 + 24px));
}

.triton-carte {
    display: block;
    border: 1px solid var(--bordure);
    background: var(--creme);
}

/* Une image très large (les poids) prend toute la ligne */
.triton-galerie__large {
    grid-column: 1 / -1;
}

/* Une carte d'image est un lien vers l'image en grand : cadre brun au survol, comme les cartes de intro-3d.php */
a.triton-carte {
    text-decoration: none;
    outline: 3px solid transparent;
    outline-offset: -3px;
    transition: border-color var(--duree) var(--courbe), outline-color var(--duree) var(--courbe);
}

a.triton-carte:focus-visible {
    border-color: var(--brun);
    outline: 3px solid var(--brun);
    outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
    a.triton-carte:hover {
        border-color: var(--brun);
        outline-color: var(--brun);
    }
}

.triton-carte__media {
    display: block;
    width: 100%;
    height: auto;
    background: #b7b3a4; /* le gris des rendus : rien ne saute pendant le chargement */
}

.triton-carte__libelle {
    display: block;
    margin: 14px 16px 0;
    font-size: var(--t-corps);
    font-weight: 700;
    line-height: 1.3;
}

.triton-carte__detail {
    display: block;
    margin: 4px 16px 16px;
    font-size: var(--t-corps);
    line-height: 1.45;
}

.triton-carte__libelle:last-child {
    margin-bottom: 14px;
}

@media (max-width: 800px) {
    .triton__section {
        margin-top: 40px;
    }

    .triton-galerie,
    .triton-galerie--videos {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .triton-galerie--trois {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .triton-galerie__large {
        grid-column: auto;
    }

    .triton-carte__libelle {
        margin: 10px 10px 0;
    }

    .triton-carte__detail {
        margin: 4px 10px 12px;
    }

    .triton-carte__libelle:last-child {
        margin-bottom: 10px;
    }
}