/*
   Notes de version : la frise et ses groupes de puces.

   Cette feuille vient EN PLUS de style.css, jamais a sa place. Elle n'a donc
   ni palette, ni en-tete, ni pied, ni bascule de theme : tout cela vit une
   seule fois dans style.css, et le dupliquer ici serait le genre de copie que
   ce depot a deja vue diverger.

   ! Fichier SEPARE plutot que quelques regles ajoutees a style.css, et ce
   ! n'est pas du rangement : les feuilles sont en cache une semaine
   ! (.htaccess). Quelqu'un qui a lu /confidentialite hier garde son style.css,
   ! et une regle ajoutee la-bas ne lui parviendrait pas avant l'expiration -
   ! il verrait cette page sans sa mise en forme. Un NOM NEUF est la seule
   ! livraison sure (cf. site/README.md).

   ! AUCUNE COULEUR NOUVELLE, et c'est deliberé. Les trois niveaux de groupe
   ! se distinguent par le REMPLISSAGE (plein, contour, discret) et non par
   ! trois teintes qu'il faudrait redefinir dans les deux chemins de theme.
   ! C'est « deriver, pas choisir » (CLAUDE.md §7) : la paire --bleu /
   ! --sur-bleu est deja mesuree, on s'en sert au lieu d'en inventer une.
*/

/* ------------------------------- La frise ------------------------------- */

.versions {
    margin: 2.5rem 0 3rem;
}

.version {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 2.6rem;
}

.version:last-child { margin-bottom: 0; }

/* La pastille. Creuse par defaut, remplie sur la version courante : le fond
   est --fond et non transparent, pour que le trait de la frise ne traverse
   pas le disque. */
.version::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 13px;
    height: 13px;
    border: 2px solid var(--bord);
    border-radius: 50%;
    background: var(--fond);
    box-sizing: border-box;
}

.version-actuelle::before {
    border-color: var(--bleu);
    background: var(--bleu);
}

/* Le trait, porte par CHAQUE entree plutot que par le conteneur : il court de
   sa propre pastille jusqu'a la suivante, donc il s'arrete net sur la
   derniere. Un trait pose sur le conteneur descendrait jusqu'en bas de la
   page, sous la derniere pastille, et pendrait dans le vide. */
.version::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 1.55rem;
    bottom: -2.6rem;
    width: 2px;
    background: var(--bord);
}

.version:last-child::after { display: none; }

/* ---------------------------- L'en-tete d'une version ------------------- */

.version-tete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.9rem;
}

/* ! Les trois remises a zero comptent : style.css donne aux h2 un filet
   ! superieur et de grosses marges, qui couperaient la frise en tranches. */
.version-num {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.version-date {
    color: var(--muet);
    font-size: 0.94rem;
}

.version-actuelle-pastille {
    background: var(--bleu);
    color: var(--sur-bleu);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ------------------------------- Les groupes ---------------------------- */

.groupe { margin-bottom: 1.2rem; }
.groupe:last-child { margin-bottom: 0; }

.groupe-nom {
    display: inline-block;
    margin-bottom: 0.55rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

/* Trois niveaux d'emphase, une seule teinte. */
.groupe-neuf { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.groupe-mieux { border-color: var(--bleu); color: var(--bleu); }
.groupe-repare { border-color: var(--bord); color: var(--muet); }

/* Puces posees a la main : la puce native ne se colore pas separement du
   texte sans `::marker`, inegalement suivi. */
.groupe ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.groupe li {
    position: relative;
    padding-left: 1.15rem;
    margin-bottom: 0.55rem;
}

.groupe li:last-child { margin-bottom: 0; }

.groupe li::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bleu-clair);
}

/* -------------------------------- Etroit -------------------------------- */

@media (max-width: 26rem) {
    .version { padding-left: 1.7rem; }
    .version-num { font-size: 1.25rem; }
}