: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(--lightColor);
    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(--blanc);
    }
        .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: 1rem;
    }
    .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;
        }
/* LISTE ---------------------------------------------- */    
/* Colonne Formations ------------------------------ */
#liste {
    border-top: var(--border);
}
.column-formations {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
}

.column-formations ol, 
.column-ateliers ul {
    list-style: none;
}

    .column-formations li, 
    .column-ateliers li {
        padding: 1rem 0 var(--padding) 0;
        border-top: 1px solid;
    }  
    .column-formations li:first-of-type,
    .column-ateliers li:first-of-type {
        padding: 0 0 var(--padding) 0;
        border-top: none;
    } 
        .column-formations .column h3:first-of-type,
        .column-ateliers h3:first-of-type {
            margin: 0 0 .5rem 0;
        } 
        .column-formations .column h3 span {
            font-weight: var(--fw-normal);
        }
        .column-formations .column h3+p {
            margin: 0 0 .5rem 0;
        }    
        .column-formations .column a:after,
        .column-ateliers a:after {
            content: "  →";
            white-space: pre;
        } 

/* Colonne ateliers */        
.column-ateliers {
    display: flex;
    flex-wrap: wrap;
    border-top: 4px solid;
    margin-top: var(--padding);
    padding-top: var(--padding);
}
    .column-ateliers h3 + p {
        margin: 0;
    }
/* PLAN ---------------------------------------------- */
#plan {
    color: var(--currentColor);
    padding: 0;

}

    .column-programme,
    .column-formateur {
        padding: var(--padding);
        height: 100%;
    }
    /* Colonne Formateur ------------------------------ */
    .column-formateur {
        display: flex;
        padding: var(--padding);
        height: 100%;
        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 {
    color: var(--lightColor);
    background-color: var(--currentColor);
    /* height: fit-content; */
    height: auto;
}
    .layout {
        /* border: none; */
        padding: var(--padding) 0 calc(var(--padding)* 2) 0;
    }

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

        .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 h2,
#related ul {
    grid-column: 1/-1;
}
#related ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--padding);
}
    #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
        }
/* LISTE ---------------------------------------------- */ 
#liste {
    gap: 0;
    padding: var(--padding) 0;
}
    .column-formations,
    .column-ateliers {
        padding: 0 var(--padding);
        display: block;
    }
    /* Colonne formations */
    .column-formations {
        grid-column: var(--columns);
    }

        .column-formations li,
        .column-ateliers li {
            padding: 1rem 0 var(--padding) 0;
            width: 100%;    
        }  

        .column-formations ol li {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--padding);
        }  
        .column-formations li:first-of-type, 
        .column-ateliers li:first-of-type {
            padding: 0 0 var(--padding) 0;
        }   
            .column-formations .column {
                grid-column: span 1;
                display: flex;
                flex-direction: column;
                height: 100%;
            }
            .column-formations .column h3 {
                margin: 0;
            } 
            .column-formations .column h3 + p {
                margin: auto 0 0 0 ;
            }    
            .column-formations .column a {
                margin: auto 0 0 0 ;
                width: fit-content;
            }     

            .column-formations .column p:not(:first-of-type),
            .column-ateliers p:not(:first-of-type){
                margin-top: 0;
            }
            .column-formations .column p:first-of-type,
            .column-ateliers p:first-of-type{
                margin-top: .5rem;
            }
    /* Colonne ateliers */
    .column-ateliers {
        grid-column: var(--columns);
        border-top: none;
        margin-top: 0;
        border-left: 1px dotted;
    }        
        .column-ateliers h3 {
            margin-bottom: .5rem;
        }
        .column-ateliers p:first-of-type {
            margin-bottom: .5rem ;
        } 
            .column-formations .column a:after,
            .column-ateliers a:after {
                content: "";
            }
                .column-formations .column a:hover:before,
                .column-ateliers a:hover:before {
                    content: "→  ";
                    white-space: pre;
                }

/* 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: 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;
        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 .fperiod,
        #agenda > ul li > a time:first-child {
            width: calc(50% - var(--padding) + 1rem);
        }
        #agenda > ul li > a .fperiod time:first-child {
            width: fit-content;
        }
        #agenda > ul li > a time:first-child
        #agenda > ul li > p {
            flex-grow: 1;
        }

        #agenda > ul li div > time:not(:first-of-type),
        #agenda > ul .fperiod, 
        #agenda > ul li p:not(:last-of-type) {
            margin: 0;
            padding-inline-end: var(--padding);
        }
        #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:"→ ";
            }
            .fperiod time, .fperiod span {
                display: inline-block;
            }

        #agenda > ul li p:last-of-type {
            display: inline-block;
            justify-self: end;
            text-align: right;
            width: 10%;
            margin: 0 0 0 auto;
        }
        #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;
}
/* ---------------------------------------------- */
}