/* =============================================================
   single-proposition — Mise en page principale
   ============================================================= */

#container.single-proposition {
    /* Le header est position:sticky dans le flux : le container commence naturellement
       juste après lui. Pas de padding-top supplémentaire — le titre area a son propre
       padding:2rem qui suffit comme séparation visuelle. */
    padding-top: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* ---- Titre principal (pleine largeur, centré, très gras) ---- */

.proposition-title-area {
    padding: 2rem 0 1.5rem;
    text-align: center;
}

/* ---- Overrides sur <main> pour cette page ---- */

#container.single-proposition #page {
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: transparent;
}

/* =============================================================
   Mise en page deux colonnes
   ============================================================= */

.proposition-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start; /* nécessaire pour que le sticky sidebar fonctionne */
    margin-bottom: 3rem;
}

/* Colonne gauche : 2/3 */
.proposition-left {
    flex: 2 1 0%;
    min-width: 0; /* empêche le débordement flex */
}

/* Colonne droite : 1/3 — toute la sidebar est sticky (extrait + infos + boutons) */
.proposition-sidebar {
    flex: 1 1 0%;
    min-width: 0;
    position: sticky;
    top: calc(var(--ccn-header-height, 90px) + 1rem);
    /* align-self: flex-start : la sidebar garde sa hauteur naturelle (contenu),
       ce qui permet au sticky de se contraindre à la hauteur de .proposition-layout */
    align-self: flex-start;
}

/* =============================================================
   Image mise en avant (gauche, 2:1 paysage)
   ============================================================= */

.proposition-featured-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: #eee; /* fond neutre si l'image tarde à charger */
}

.proposition-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================================
   Barre d'onglets (sticky, gauche)
   ============================================================= */

/* Sur desktop le wrapper est transparent : la ul reste directement
   dans .proposition-left, ce qui preserve son aire sticky (toute la
   hauteur de la colonne). Sur mobile, display:block est explicite. */
.proposition-menu-scroller {
    display: contents;
}

#container.single-proposition .proposition-menu {
    position: sticky;
    top: var(--ccn-header-height, 90px);
    z-index: 10;
    list-style: none;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    border: 1.5px solid #000;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
}

#container.single-proposition .proposition-menu > li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px 10px;
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
    background: transparent;
    color: inherit;
    transition: font-weight 0.1s ease;
    border: none;
}

/* Chevron vers le bas après chaque onglet */
/*
#container.single-proposition .proposition-menu > li::after {
    content: 'v';
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    margin-top: 0px;
    opacity: 0.6;
    flex-shrink: 0;
}
*/

/* Onglet actif : texte en gras, assuré par le css de base qui gère les listes */
/*
#container.single-proposition .proposition-menu > li.active::after {
    opacity: 1;
}
*/
/* Pas de fond coloré au hover, mais police grasse */
#container.single-proposition .proposition-menu > li:hover {
    font-weight: var(--font-weight-desktop-body-bold);
}

/* =============================================================
   Contenu de la proposition (gauche)
   ============================================================= */

#container.single-proposition .proposition-content {
    min-height: 400px;
    padding: 0.5rem 0 2rem;
}

#container.single-proposition .proposition-content h2 {
    font-size: 1.9rem;
    margin-top: 2rem;
    /* espace réservé pour que le H2 ne se retrouve pas sous la barre d'onglets sticky
       lors d'un défilement natif vers une ancre (ex : scroll-into-view) ;
       ~70px ≈ hauteur typique de la barre d'onglets + marge */
    scroll-margin-top: calc(var(--ccn-header-height, 90px) + 70px);
}

#container.single-proposition .proposition-content h3 {
    font-size: 1.4rem;
}

#container.single-proposition .proposition-content h4 {
    font-size: 1.3rem;
}

#container.single-proposition .proposition-content h5 {
    font-size: 1.05rem;
}

/* =============================================================
   Sidebar droite — Extrait (non sticky, défile avec la page)
   ============================================================= */

.prop-sidebar-excerpt {
    margin-bottom: 0px;
}

/* style pour l'extrait dans la sidebar : max 5 lignes */
.prop-sidebar-excerpt h4 {
    margin-top: 0;
    margin-bottom: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================
   Sidebar droite — Bloc info (le sticky est sur .proposition-sidebar)
   ============================================================= */

.prop-sidebar-info {
    /* pas de position:sticky ici : c'est toute la .proposition-sidebar qui est sticky */
}

/* Rangée icône + texte */
.prop-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.prop-info-row > i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    margin-top: 6px;
    color: #444;
    font-size: 1rem;
}

.prop-info-paragraph p {
    margin: 0;
 }

/* ---- Couleurs selon l'état des inscriptions ---- */

/* si on veut colorer le texte en plus du pictogramme, il faut ajouter un selecteur > div > p comme ci-dessous */
/*
.prop-info-state.psi-status--open > i,
.prop-info-state.psi-status--open > div > p  { color: var(--color-for-status-open); }
*/

.prop-info-state.psi-status--open > i  { color: var(--color-for-status-open); }

.prop-info-state.psi-status--preinscr > i { color: var(--color-for-status-preinscr); }

.prop-info-state.psi-status--waiting > i  { color: var(--color-for-status-waiting); }

.prop-info-state.psi-status--closed > i  { color: var(--color-for-status-closed); }

.prop-info-state.psi-status--free > i  { color: var(--color-for-status-free); }

.prop-info-state.psi-status--passed > i  { color: var(--color-for-status-passed); }
/* =============================================================
   Sidebar droite — Boutons (style bloc fill)
   ============================================================= */

.prop-sidebar-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1.5rem;
}



/* =============================================================
   Section "Cela pourrait vous intéresser" (pleine largeur)
   ============================================================= */

.proposition-related {
    padding: 2rem 0 3rem;
    border-top: 1px solid #e8e8e8;
    clear: both;
}

.proposition-related h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #000;
}

/* =============================================================
   Boutons répétés en bas — visibles sur mobile uniquement
   ============================================================= */

/* Sur desktop : masquer le bloc de boutons répété en bas */
.prop-sidebar-buttons--bottom {
    display: none;
}

/* =============================================================
   Responsive — mobile (< 768px) : colonne unique
   ============================================================= */

@media (max-width: 768px) {

    /* Colonne unique */
    .proposition-layout {
        flex-direction: column;
        gap: 0;
    }

    /* Aplatit .proposition-left dans le flex du layout pour permettre
       d'intercaler la sidebar entre l'image et la barre d'onglets
       via la propriété order, sans toucher au DOM.
       Ordre final : image (1) → sidebar (2) → onglets (3) → contenu (4) → boutons-bas (5) */
    .proposition-left {
        display: contents;
    }

    .proposition-featured-img {
        order: 1;
        margin-bottom: 0;
    }

    .proposition-sidebar {
        order: 2;
        position: static;
        align-self: auto;
        padding-bottom: 1.5rem;
    }

    /* Wrapper : display:block (annule display:contents desktop) + sticky.
       SANS overflow : sticky + overflow sur le meme element casse le sticky. */
    .proposition-menu-scroller {
        display: block;
        order: 3;
        position: sticky;
        top: var(--ccn-header-height, 90px);
        z-index: 10;
        width: 100%;
        min-width: 0;
        margin-bottom: 1.5rem;
        background: #fff; /* couvre le contenu qui défile derrière la barre sticky */
    }

    /* La ul = conteneur de défilement horizontal pleine largeur.
       overflow-x: auto sur la ul (pas sur le wrapper) : le scroll est contenu
       dans la ul (width: 100%) et ne provoque pas de défilement horizontal de page.
       overscroll-behavior-x: contain empêche le glissement de propager vers la page. */
    #container.single-proposition .proposition-menu {
        position: static;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* border : 1.5px solid #000, border-radius : 30px, background : #fff
           conservés du CSS desktop */
    }

    #container.single-proposition .proposition-menu::-webkit-scrollbar {
        display: none;
    }

    /* Onglets : largeur naturelle, pas de flex-grow */
    #container.single-proposition .proposition-menu > li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #container.single-proposition .proposition-content {
        order: 4;
    }

    /* Boutons de la sidebar : passage en ligne horizontale défilable */
    .proposition-sidebar .prop-sidebar-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.55rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .proposition-sidebar .prop-sidebar-buttons::-webkit-scrollbar {
        display: none;
    }

    .proposition-sidebar .prop-sidebar-buttons .prop-sidebar-btn {
        flex-shrink: 0;
        width: auto;
        white-space: nowrap;
    }

    /* Boutons répétés en bas — visibles uniquement sur mobile */
    .prop-sidebar-buttons--bottom {
        width: 100%;
        display: flex;
        order: 5;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 0.55rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .prop-sidebar-buttons--bottom::-webkit-scrollbar {
        display: none;
    }

    .prop-sidebar-buttons--bottom .prop-sidebar-btn {
        flex-shrink: 0;
        width: auto;
        white-space: nowrap;
    }

    /* Le bloc info n'est plus sticky sur mobile */
    .prop-sidebar-info {
        position: static;
    }

}