/* Sommaire des pages projet, facon koto.com (26/09). Logique et markup :
   js/sommaire.js, injecte par build.js sur les pages projet.

   Choix de Tibo : juste la liste des sections (pas de titre ni de
   "categorie · annee"), fixe a gauche et CENTREE EN HAUTEUR, et le projet
   reste CENTRE dans la page : la place de la liste est reservee des deux
   cotes (padding gauche ET droit du body), le contenu garde son axe.
   Une version facon koto, contenu decale a droite, a ete refusee.

   Le footer reprend toute la largeur (marges negatives). ⚠️ Il est souvent
   DANS section.containproject, qui est en overflow: hidden : le footer y
   etait coupe. Cette section passe donc en overflow visible, et c'est la
   racine (overflow-x: clip) qui empeche tout defilement horizontal.
   Au-dessus de 2000px les marges du site (--espacecote = 17.5 %) laissent
   deja toute la place : pas de reserve, la liste se pose dans la marge.
   Desktop seulement : rien sous 1100px. */

@media (min-width: 1100px) {
    html:has(body.a-sommaire) {
        overflow-x: clip;
    }

    body.a-sommaire {
        --sommaire-l: 200px;
        padding-inline: var(--sommaire-l);
    }

    body.a-sommaire .containproject {
        overflow: visible;
    }

    /* Le footer reprend toute la largeur et passe par-dessus la liste. */
    body.a-sommaire .pied {
        position: relative;
        z-index: 2;
        margin-inline: calc(-1 * var(--sommaire-l));
    }

    .sommaire {
        position: fixed;
        top: 50%;
        left: 40px;
        z-index: 1;
        transform: translateY(-50%);
        max-width: calc(var(--sommaire-l, 200px) - 60px);
        font-family: var(--police);
    }

    .sommaire__nav ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sommaire__nav li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    .sommaire__nav li + li {
        margin-top: 0.5rem;
    }

    .sommaire__nav a {
        font-size: 0.9rem;
        line-height: 1.3;
        text-decoration: none;
        color: #9a9a9a;
        transition: color 0.25s ease;
    }

    .sommaire__nav a:hover,
    .sommaire__nav a:focus-visible,
    .sommaire__nav li.est-active a {
        color: #111111;
    }

    /* Le point de la section en cours, dans la marge a gauche du libelle. */
    .sommaire__nav li::before {
        content: "";
        position: absolute;
        left: -13px;
        top: 0.58em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #111111;
        opacity: 0;
        transform: scale(0.3);
        transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sommaire__nav li.est-active::before {
        opacity: 1;
        transform: scale(1);
    }
}

@media (min-width: 2001px) {
    body.a-sommaire {
        --sommaire-l: 0px;
    }

    .sommaire {
        max-width: 14vw;
    }
}

@media (max-width: 1099px) {
    .sommaire {
        display: none;
    }
}