/*
 * Fichier : abs-charpente.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Charpente commune des fiches : deux colonnes et une bande, ou une pile.
 *
 * Le placement ne touche pas au balisage :
 *   Chaque bloc est enveloppé dans l'ordre du balisage d'origine. La grille
 *   assigne sa colonne à chaque enveloppe selon sa zone, et le remplissage
 *   dense comble les rangées laissées libres : une colonne se lit donc de
 *   haut en bas, sans trou, quel que soit l'ordre des blocs dans la source.
 *
 *   Le placement de grille ne change que le visuel : la lecture vocale et le
 *   clavier suivent le balisage.
 *
 * Ce que la grille garantit :
 *   La bande occupe toute la largeur, sous les deux colonnes. Une zone qui
 *   grandit ne pousse que ce qui la suit : déplier un onglet allonge la bande,
 *   les colonnes gardent leur hauteur.
 *
 *   Les colonnes s'alignent en haut et ne s'étirent pas. Une colonne courte
 *   garde sa hauteur au lieu de traîner un vide jusqu'en bas de l'autre.
 *
 * Aucune valeur en dur :
 *   Espacements et bordures viennent des variables du thème, avec une valeur
 *   de repli. Le thème redéfinit ses variables pour prefers-contrast: more, et
 *   une valeur codée ici crève ce mécanisme en silence.
 */

.abs-charpente {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abs-espace-large, 2rem);
    align-items: start;
}

.abs-charpente-groupe,
.abs-charpente-bloc {
    min-inline-size: 0;
}

/*
 * Les blocs d'un groupe se suivent, avec l'air qu'il faut entre eux.
 */

.abs-charpente-groupe {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace, 1.5rem);
}

/*
 * Une enveloppe vide ne laisse pas de trou : un bloc dont le contenu ne paraît
 * pas, faute de réglage ou de donnée, s'efface avec elle.
 */

.abs-charpente-bloc:empty,
.abs-charpente-groupe:empty {
    display: none;
}

@media (min-width: 768px) {

    .abs-charpente-colonnes {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
        column-gap: var(--abs-espace-large, 2rem);
        row-gap: var(--abs-espace, 1.5rem);
    }

    .abs-charpente-colonnes > .abs-charpente-zone-tete {
        grid-column: 1;
    }

    .abs-charpente-colonnes > .abs-charpente-zone-suite {
        grid-column: 2;
    }

    .abs-charpente-colonnes > .abs-charpente-zone-bande {
        grid-column: 1 / -1;
    }

    /*
     * Rupture avant la bande : elle sépare ce qui se lit d'un coup de ce qui se
     * déplie. Seule la première enveloppe de la bande la porte, pour qu'une
     * bande de plusieurs blocs ne montre qu'un seul filet.
     */

    .abs-charpente-colonnes > .abs-charpente-zone-bande:first-of-type {
        margin-block-start: var(--abs-espace-large, 2rem);
        padding-block-start: var(--abs-espace-large, 2rem);
        border-block-start: 1px solid var(--abs-bordure, #767676);
    }
}