:root { --currentColor: var(--violet); }

/* SECTION MENU PRINCIPAL ---------------------------------------------- */
#navbar.ssmenuactif {
    top: calc(-1*(var(--hauteurMenu)));
}

/* MAIN ---------------------------------------------- */        
h2 { padding-bottom: 1rem; }
h3 { min-height: auto; }
   
/* NAV RETOUR ---------------------------------------------- */
#retour{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hauteurMenu);
    padding: 0 var(--padding);
    border-bottom: 1px solid;
    background-color: var(--blanc);
} 
    #retour a {
        border-bottom: none;
        font-weight: var(--fw-normal);
    }
        #retour a[href="#top"]{
            position: fixed;
            top: 0.691rem; 
            right: var(--padding);
        }
            #retour a span {
                display: none;
            }

/* SECTION INTRO ------------------------------------- */
#intro {
    display: block;
    background-color: var(--blanc);
    padding: 0;
}
    #intro > .grid {
        min-height: inherit;
        gap: 0;
    }
    .intro-ftitre,
    .intro-fresume {
        display: flex;
        flex-direction: column;
        padding: calc(var(--padding) - 1rem) var(--padding) var(--padding) var(--padding);
        height: 100%;
    }
    /* BLOC 1 : Titre ----------------------- */
        .intro-ftitre h1 {
            padding-bottom: 0;
        }
        .intro-ftitre .categories-cloud {
            display: inline-flex;
            height: fit-content;
            width: 100%;
            flex-wrap: wrap;
        }
            .categories-cloud span {
                font-size: var(--fs-s);
                font-weight: var(--fw-normal);
                border: 1px solid var(--currentColor);
                border-radius: 1rem;
                padding: .25rem .5rem;
                margin: .25rem;
                text-transform: lowercase;
            }
                .categories-cloud span.certifiante {
                    border-color: transparent;
                    color: var(--blanc);
                    background-color: var(--currentColor);
                }
        .intro-ftitre .description {
            margin-top: auto;
            margin-bottom: 0;
            font-size: var(--fs-l);
        }    
    /* BLOC 2 : Resume ---------------------- */
    .intro-fresume {
        background-color: var(--lightColor);
    }
        .intro-fresume h4 {
            font-size: var(--fs-m);
            min-height: 1rem;
            margin-bottom: .5rem;
        }

        /* Bloc 2 - Ligne 1 */
            .intro-r1 > div {
                padding-top: 1rem;
                border-top: 1px solid;
            }
            .intro-r1 div:last-of-type {
                border-bottom: 1px solid;
            }
            .intro-r1 p:last-child {
                margin: 0 0 1rem 0;
            }
            .intro-r1 .fdetails-duree, 
            .intro-r1 .fdetails-modalites {
                display: inline-flex; 
                border-top: none;
                padding-top: .6rem;   
            }
                .fdetails-duree span,
                .fdetails-modalites span {
                    display: flex;
                    flex-wrap: wrap;
                }
                .fdetails-duree strong,
                .fdetails-modalites strong,
                .fdetails-tarifs strong {
                    font-size: var(--fs-xl);
                    line-height: 1;
                }
            /* Durée  */
            .fdetails-duree {
                padding-right: var(--padding);  
            }
            /* Modalités */
                .fdetails-modalites strong{
                    font-weight: var(--fw-normal);
                }
                .fdetails-modalites strong:not(:last-of-type):after {
                    content:", ";
                    white-space: pre;
                }
                .fdetails-modalites strong:last-of-type:before {
                    content:"ou ";
                    white-space: pre;
                }
                .fdetails-modalites strong:first-of-type:before {
                    content:"";
                }
            /* Prérequis */  
                .fdetails-prerequis p:not(:last-of-type) {
                margin: 0 0 .5rem 0;
                }

        /* Bloc 2 - Ligne 2 : Tarifs */
        .intro-r2 {
            margin-top: auto;
        }
            .fdetails-tarifs ul {
                list-style: none;
            }
                .fdetails-tarifs li {
                    display: inline-flex;
                    width: 100%;
                    border-bottom: 1px solid;
                    padding: 1rem 0;
                    margin: 0;
                }
                .fdetails-tarifs li:last-of-type {
                    border-bottom: none;
                    padding-bottom: 0;
                }                    
                    .fdetails-tarifs li span {
                        padding-inline-end: .5rem;
                    }
                    .fdetails-tarifs li span:nth-child(2),
                    .fdetails-tarifs li strong {
                        margin-left: auto;
                    }
/* SECTION OBJECTIFS ---------------------------------------------- */
#objectifs {
    color: var(--lightColor);
    background-color: var(--currentColor);

}

    #objectifs .column-objectifs,
    #objectifs .column-competences{
        grid-column: 1/-1;

    }
    #objectifs .column-competences {
        border-left: none;
        border-top: 1px solid;
        padding: calc(var(--padding) + 1rem) 0 0 0;
    }

    #objectifs .column-competences h4 {
        margin-bottom: var(--padding);
    }

    .fdetails-objectifs {
        list-style-position: inside;
        padding-bottom: var(--padding);
    }
    .fdetails-objectifs li, 
    .fdetails-competences li {
        margin-bottom: .5rem;
    }
    .fdetails-objectifs li {
        font-size: var(--fs-l);
        font-weight: var(--fw-normal);
    }

    .fdetails-competences {
        list-style: none;
        padding-left: 0;
    }
        .fdetails-competences li:before {
            content:"→ ";
            white-space: pre;
            
        }
    
/* PLAN ---------------------------------------------- */
#plan {
    color: var(--currentColor);
    padding: 0;
    min-height: fit-content;
}
    .column-programme,
    .column-formateur {
        padding: var(--padding);
        height: 100%;
    }
    /* Colonne Formateur ------------------------------ */
    .column-formateur {
        display: flex;
        flex-direction: column;
        background-color: var(--blanc);

    }
        .column-formateur + h4 {
            margin-bottom: var(--padding);
        }
        .column-formateur .formateur {
            border-top: 1px solid;
            margin-bottom: var(--padding);
            padding-top: 1rem;
        }
            .column-formateur .formateur:first-of-type{
                border-top: none;
                padding-top: 0;
            }   

            .formateur > h5 {
                font-size: var(--t3);
                font-weight: var(--fw-normal);
                padding-top: 1rem;
                margin-bottom: 0;
                margin-top: var(--padding);
                width: 100%;
            }
                .formateur > h5:first-of-type {
                    margin-top: 0;
                    padding-top: 0;
                    border-top: none;
                }
            .formateur h5 + p {
                margin-top: 0;
            }
            .formateur a {
                font-weight: var(--fw-normal);
                margin-bottom: 1rem;
                display: inline-block;
            }
                .formateur a:hover {
                    font-weight: var(--fw-gras);
                }

    /* Colonne Programme ------------------------------ */
    .column-programme {
        background-color: var(--lightColor);
        height: fit-content;
    }
        .layout {
            border: none;
            padding-bottom: var(--padding);
        }

            .layout .column {
                border-top: 4px solid;
                padding-bottom: calc(var(--padding)* 2);
            }
                .layout .column:first-of-type {
                    border-top: none;
                }

            .column h3 {
                font-size: var(--t2);
            }
            .column h4 {
                margin-top: 1rem;
            }

/* PÉDAGOGIE ------------------------------------------------- */
    #pedagogie {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        gap: var(--padding);
        color: var(--lightColor);
        background-color: var(--currentColor);
        min-height: fit-content;
        border-top: var(--border);
        }    

    #pedagogie div h4 {
        margin: 0 0 1rem 0;
    }

/* AGENDA ---------------------------------------------- */
#agenda {
    display: flex;
    flex-direction: column;
}
    #agenda ul {
        list-style: none;
        padding-left: 0;
    }
        #agenda > ul li {
            padding: 0;
            border-top: 1px solid;
            margin: 0;
        }
            #agenda > ul li:last-of-type {
                border-bottom: 1px solid;
            }

                #agenda > ul li > a, 
                #agenda > ul li > div {
                    display: block;
                    width: 100%;
                    font-size: var(--fs-l);
                    font-weight: var(--fw-normal);
                    padding: 1rem 0;
                } 
                #agenda > ul li > a {
                    border: none;
                }
                     
                    #agenda time {
                        font-size: var(--t3);
                        font-weight: var(--fw-gras);
                    }
                    #agenda .fperiod span {
                        margin: 0 .5rem;
                        padding-top: .2rem;
                    }
                    
                #agenda > ul li .bouton {
                    color: currentColor;
                    background-color: transparent;
                    border: 1px solid currentColor;
                    font-weight: var(--fw-gras);
                    font-size: var(--fs-l);
                    width: fit-content;
                    padding: 0 1rem;
                }

    .finscription {
        font-size: var(--fs-s);
        padding: var(--padding) 0;
    }
        .finscription h5 {
            font-size: var(--t5);
            font-weight: var(--fw-gras);
            margin: 1rem 0;
        }

/* RELATADED ---------------------------------------------- */
#related {
    border-top: var(--border);
}
#related h2,
#related ul {
    grid-column: 1/-1;
}
#related ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}    
    #related ul li:not(:first-of-type) {
        border-top: 1px dashed;
        padding-top: 1rem;
    }
    #related ul li {
        font-size: var(--fs-l);

    }
        #related ul li a span {
            font-size: var(--fs-m);
            font-weight: var(--fw-normal);
        }

        
@media screen and (min-width: 1024px) {

/* CACHER MENU-DÉROULANT ---------------------------------------------- */
.menulink.subnav.active .subnav-content {
    height: 0;
    border-bottom: none;
}
    .menulink.subnav:hover .subnav-content {
        height: calc(var(--hauteurSubMenu) + var(--bordermenu));
        border-bottom: var(--bordermenu) solid var(--lightColor);
    } 

#navbar.ssmenuactif .menulink.subnav.active .subnavbtn:after {
content: "  ˇ";
white-space: pre;
}
#navbar.ssmenuactif .menulink.subnav.active:hover .subnavbtn:after,
#navbar.ssmenuactif .menulink.subnav.active:hover input[id$="Toggle"]:checked + .subnavbtn::after {
    content: " ↓";
    white-space: pre;
}

/* MAIN ---------------------------------------------- */
#navbar.ssmenuactif + main, 
#navbar.ssmenuactif + div.scroller main {
    padding-top: 0;
}

/* NAV RETOUR ---------------------------------------------- */
#retour {
    grid-column: 1/-1;
}
#retour a span {
    display: contents;
}

/* SECTION INTRO ---------------------------------------------- */
    .intro-ftitre{
        grid-column: span 8;
    }
    .intro-fresume {
        grid-column: span 4;
    }

/* OBJECTIFS ---------------------------------------------- */
#objectifs{ 
    gap: 0;
    padding: var(--padding) 0;
}
    #objectifs .column-objectifs{
        grid-column: span 8;
        padding: 0 var(--padding);
        margin-right: 0;
    }
        .fdetails-objectifs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap:  calc(var(--padding)/2) var(--padding);
        }
    #objectifs .column-competences{
        grid-column: span 4;
        padding: 1rem var(--padding) 0 var(--padding);
        border-left: 1px dotted;
        border-top: none
    }

/* PLAN ---------------------------------------------- */
#plan {
    gap: 0;
    color: var(--currentColor);
    background-color: var(--blanc);
}

.layout h3 u, 
.layout h4 u {
    border-bottom: 3px solid;
}

    .column-formateur {
        grid-column: span 4;
        grid-row: 1/2;
        height: 100%;
    }

    .column-programme {
        grid-column: span 8;
        grid-row: 1/2;
    }
        .column-programme .column {
            border-top: none;
            padding-bottom: 0;
        }
            .column-programme h3:not(:first-child), 
            .column-programme h4:not(:first-child) {
                margin: var(--padding) 0 1rem 0;
            }


/* PÉDAGOGIE ---------------------------------------- */
 #pedagogie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding);
    min-height: fit-content;
 }
 


/* AGENDA ---------------------------------------------- */
#agenda {
    min-height: fit-content;
}

    #agenda > ul li > a, 
    #agenda > ul li > div {
        display: flex;
        flex-grow: 1;
        min-height: 3rem;
        align-items: center;
    } 
        #agenda > ul li > a:hover {
            background-color: var(--blanc) ;
        }

        #agenda > ul li a > time, 
        #agenda > ul + div > time,
        #agenda > ul .fperiod {
            min-width: max-content;
        }

        #agenda > ul li a > time, 
        #agenda > ul li div > time,
        #agenda > ul .fperiod, 
        #agenda > ul li p:not(:last-of-type) {
            width: 30%;
            margin: 0;
            padding-inline-end: 1rem;
        }
        #agenda > ul time:first-child:before {
            content:"• ";
            white-space: pre;
            font-weight: var(--fw-normal);
        }
            #agenda > ul li > a:hover time:first-child:before {
                content:"→ ";
            }
            #agenda > ul .fperiod time:first-of-type{
                padding-inline-end: 0;
            }

        #agenda > ul li p:last-of-type {
            display: inline-block;
            text-align: right;
            width: 10%;
            margin: 0;
        }
        #agenda > ul li > a:hover p:last-of-type {
            font-weight: var(--fw-gras);
            padding-inline-end: 1rem;
        }


        #agenda > ul li .bouton {
            font-size: inherit;
            font-weight: initial;
            line-height: inherit;
            height: fit-content;
            padding: 0;
            border: none;
            color: currentColor;
            background-color: transparent;
        }

    .finscription {
        display: flex;
        gap: var(--padding);
    }

/* RELATED ---------------------------------------------- */
    #related h2,
    #related ul {
        grid-column: span 6;
    }
        #related ul li a:hover:before {
            content: "→ ";
            white-space: pre;
        }

/* ---------------------------------------------- */
}