/* ===== layout.css Layout DUO (corrigé) ===== */
.layout-duo{
    /* Ajustables */
    --ld-max-w: 1180px;   /* largeur max du container */
    --ld-gap: 16px;       /* écart entre colonnes */
    --ld-main-max: 680px; /* largeur max du bloc contenu */
    --ld-side-min: 280px; /* largeur mini du panneau latéral */
    --ld-break: 900px;    /* breakpoint deux colonnes */

    box-sizing: border-box;
    width: 100%;
    max-width: var(--ld-max-w);
    margin: 0 auto;
    padding: 12px;

    display: grid;
    grid-template-columns: 1fr; /* mobile = une colonne */
    gap: var(--ld-gap);
}

/* Desktop/tablette large : 2 colonnes
    - gauche: max 680px (mais peut être plus petite si écran étroit)
    - droite: prend le reste (min 280px)
*/
@media (min-width: 900px){
    .layout-duo{
        grid-template-columns:
            minmax(320px, var(--ld-main-max))
            minmax(var(--ld-side-min), 1fr);
        align-items: start;
    }
}

/* Blocs */
.layout-duo__main,
.layout-duo__side{
    background: var(--card-2, #111);
    border: 1px solid var(--ring, #2a2a2a);
    border-radius: 12px;
    padding: 16px;
}

/* Option: rendre le panneau latéral sticky sur desktop */
@media (min-width: 900px){
    .layout-duo__side.is-sticky{
        position: sticky;
        top: 12px;
    }
}

/* (facultatif) Modif rapide si tu veux un container plus étroit ailleurs
    .layout-duo--wide   { --ld-max-w: 1280px; }
   .layout-duo--narrow { --ld-max-w: 720px; }  // EVITE ICI !
*/