/* ==========================================================================
   Style de liste : vertical_stack
   Deux sections : la première carte à gauche et les cartes empilées à droite.
   Dans la section gauche, A gauche de la liste, l'image de la première carte est affichée en grand. Format carré 480px de côté. bords arrondis 16px.
   La section gauche contient uniquement l'image de la première carte et rien d'autre. Sa largeur est celle de l'image (480px)..
   Dans la section droite, les cartes sont empilées verticalement avec le titre de la liste affiché en haut en H1.
   Cartes empilées verticalement, sans espace entre elles.
   Une ligne de 1px de bordure sépare les cartes les unes des autres, mais pas de bordure avant la première carte et après la dernière carte.
   Toutes les cartes sont étirées à la même largeur (100 % de la deuxième section).
   L'ensemble des 2 sections (image de la première carte à gauche et cartes empilées à droite) occupe toute la largeur du conteneur.
   Un gap de 64px entre les 2 sections.
   Le haut de la photo de la première carte est aligné avec le haut du titre de la liste. Il faut ajouter une marge en haut de l'image de gauche pour compenser la hauteur du titre.
   La marge en haut de l'image de gauche doit être égale à la hauteur du titre de la liste.
   Le conteneur de la liste de carte a une hauteur maximal de 700px et cache ce qui dépasse.
   L'internaute doit pouvoir faire défiler les cartes empilées à droite si leur hauteur totale dépasse 1000px.
   Le titre reste fixe en haut de la section droite : seul le div.card-list défile, pas le titre.
   Le fond de l'ensemble des 2 sections est blanc. Y compris à gauche et à droite du conteneur global, en forçant  le fond blanc de bord à bord de l'écran.
   Le fond blanc doit s'étendre de bord à bord de l'écran, même si le conteneur est centré et a des marges.

   ========================================================================== */


 .vertical_stack_container {
     width: 100%;
     position: relative;
     isolation: isolate;
     padding-top: 40px; /* 80 px souhaités moins les 40 px de décalage de l'image */
     padding-bottom: 80px;
 }

 /* Fond blanc étendu de bord à bord de l'écran, sans changer la largeur du conteneur :
    pseudo-élément hors flux, positionné derrière le contenu (isolation ci-dessus
    confine son z-index négatif à ce bloc, sans affecter le reste de la page). */
 .vertical_stack_container::before {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
     background-color: #fff;
     z-index: -1;
 }

 .vertical_stack_container .vertical_stack_inner {
     width: 100%;
     display: flex;
     flex-direction: row;
     gap: 64px;
     max-height: 700px;
     overflow: hidden;
 }

 .vertical_stack_container .first-card-image {
     width: 480px;
     height: 480px; 
     margin-top: 40px;
     border-radius: 16px;
 }

 .vertical_stack_container .cards-container.vertical_stack {
    width: calc(100% - 544px); /* 480 + 64px gap */
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 700px;
    overflow: hidden;
 }

 .vertical_stack_container .cards-container.vertical_stack h1 {
     flex-shrink: 0;
 }

 .vertical_stack_container .cards-container.vertical_stack .card-list {
     overflow-y: auto;
     flex: 1 1 auto;
     min-height: 0; /* laisse le flex-item se réduire en dessous du contenu pour permettre le scroll interne */
 }

 .vertical_stack_container .cards-container.vertical_stack .card {
     width: 100%;
     border-top: 1px solid #000;
     box-sizing: border-box;
 }

 .vertical_stack_container .cards-container.vertical_stack .card:first-child {
     border-top: none;
 }

/* ==========================================================================
   Mobile / tablette (≤ 1280px)
   Une seule colonne : titre, puis image d'introduction (carrée, pleine largeur,
   bords arrondis), puis cartes les unes sous les autres, sans défilement interne.
   .cards-container est « aplati » (display: contents) pour que le titre et
   la liste de cartes deviennent des éléments de la grille de .vertical_stack_inner
   et puissent ainsi passer avant l'image.
   Le style desktop (> 1280px) n'est pas modifié.
   ========================================================================== */

@media (max-width: 1280px) {
    .vertical_stack_container {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .vertical_stack_container .vertical_stack_inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "image"
            "list";
        gap: 24px;
        max-height: none;
        overflow: visible;
    }

    .vertical_stack_container .cards-container.vertical_stack {
        display: contents;
    }

    .vertical_stack_container .vertical_stack_title {
        grid-area: title;
        margin: 0;
    }

    .vertical_stack_container .first-card-image {
        grid-area: image;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-top: 0;
    }

    .vertical_stack_container .cards-container.vertical_stack .card-list {
        grid-area: list;
        min-width: 0;
        overflow: visible;
    }
}