index-website-static/assets/css/template/_page-enquete.scss

.page-enquete{

    header{
        max-width: var(--max-w-content);
        margin: calc(var(--spacing)*2) auto;
        .page-type{
            text-transform: uppercase;
            color: var(--color-txt-light);
            margin-bottom: calc(var(--spacing)*0.5);
        }
        h2{
            font-size: var(--fs-xbig);
        } 
    }

    .section__article{
        max-width: var(--max-w-content);
        margin: calc(var(--spacing)*3) auto;
        a:hover{
            color: var(--grey-200);
        }


        .section__title{
            font-weight: normal;
            text-transform: uppercase;
            font-size: var(--fs-medium);
            margin-bottom: calc(var(--spacing)*1)
        }
    }



    // HER0 ----------------------------------------------------

    .hero{
        width: 100vw;
        position: relative;
        left: calc(var(--padding-body)*-1);

        margin: calc(var(--spacing)*3) 0;

        figcaption{
            color: var(--color-txt-light);
            font-size: var(--fs-small);
            max-width: var(--max-w-content);
            margin: 0 auto;
            padding-top: calc(var(--spacing)*0.5);
        }

        &.hero-video{
            figure{
                width: 100%;

                img{
                    width: 100%;
                    aspect-ratio: 16/9;
                    object-fit: cover;
                }

                
            }
        }
    }




    // banner-page -------------------------------------------------

    #banner--page{
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        margin-bottom: calc((100vh - var(--header-h))*-1);
        margin-bottom: calc((100dvh - var(--header-h))*-1);
        padding-bottom: var(--padding-body);
        padding-right: var(--padding-body);
        position: sticky;
        top: var(--header-h);
        width: calc((100% - var(--max-w-content))/2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .btn--group{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(var(--spacing)*0.25);
            
            button{
                width: 100%;
                max-width: 28ch;
            }
            
        }
   
    }

    #nav--page{
        ul{
            list-style: none;
            
            li{
                text-align: center;
                color: var(--color-txt-light);
                // text-transform: uppercase;
                
                a{
                    display: block;
                    padding: 0.3em 0;
                    text-decoration: none;
                }
            }
        }
    }



    // DL -------------------------------------------------

    .short{
        font-size: var(--fs-medium);
        margin: auto;
        max-width: var(--max-w-content);
    }

    #section__dl{
        margin-top: calc(var(--spacing)*1.5);
        border-bottom: var(--border-light);

        .dl__group{
            display: grid;
            grid-template-columns: 40% 1fr;
            border-top: var(--border-light);
            padding: calc(var(--spacing)*0.5) 0;
        }

        dt{
            color: var(--color-txt-light);
        }

        ul:not(.keywords){
            list-style: none;
            li{
                padding-bottom: 0.2em;
            }
            
        }
    }


   





    // SYNTHESE ----------------------------------------------

 

    #section__synthese{
        font-size: var(--fs-medium);

        p + p{
            margin-top: 0.5em;
        }

        h4{
            margin-top: 2em;
            margin-bottom: 1em;
            font-size: var(--fs-normal);
            font-weight: normal;
            text-decoration: 1px underline var(--color-txt-light);
            text-underline-offset: 3px;
            
        }
        
    }



}