/*
Theme Name: Lamelle
Theme URI: http://jiyong.eu
Author: Jiyong
Author URI: http://jiyong.eu
Version: 0.1.03
Description: Themes en mode lamelle
*/

/* trirong-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 400;
  src: url('assets/polices/trirong-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* trirong-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Trirong';
  font-style: italic;
  font-weight: 400;
  src: url('assets/polices/trirong-v17-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* trirong-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 800;
  src: url('assets/polices/trirong-v17-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* trirong-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 900;
  src: url('assets/polices/trirong-v17-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('assets/polices/source-serif-4-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  src: url('assets/polices/source-serif-4-v14-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  src: url('assets/polices/source-serif-4-v14-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  src: url('assets/polices/source-serif-4-v14-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-serif-4-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 900;
  src: url('assets/polices/source-serif-4-v14-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-family: "ji";
    src: url("assets/polices/ji.woff2") format("woff2"),
        url("assets/polices/ji.ttf") format("truetype"),
        url("assets/polices/ji.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}

html{ 
  font-size: 20px;
}

:root{

    --surface:#F3F3F4;
    --on-surface:#0D1132;
    --on-surface-variant:#4B4F70;
    --surface-stroke:#CED1EF;

    --cover-surface:#0D1132;
    --on-cover-surface:#F3F3F4;
    --on-cover-surface-variant:#CED1EF;

    --cta-surface:#0D1132;
    --on-cta:#F3F3F4;

    --cta-surface-secondary:#F3F3F4;
    --on-cta-secondary: #0D1132;

    --primary-color: #0D1132;
    --secondary-color:#F26C64;
    --on-primary-color: #FFF7EB;

    /* Radius*/
    --section-radius:32px;
    --cards-radius:16px;
    --button-radius:35px;
    --tooltip-radius:4px;
    --textfield-radius:8px;

    /* Succès */
    --alert-box-success: #16A34A;
    --alert-box-success-bg: rgba(22, 163, 74, 0.15);

    /* Erreur */
    --alert-box-error: #DC2626;
    --alert-box-error-bg: rgba(220, 38, 38, 0.15);

    /* Font */
    --font-body:'Source Serif 4', serif;
    --font-title : 'Trirong', 'sans serif';
    --font-button : 'Trirong', 'sans serif';

    /* Dégradé */
    --gradients-primary: radial-gradient(120% 180% at 178% -5%,#f26c64,#0d1132) ;

    /* Transition */
    --animation-classic: all 0.3s;
  
}

body{
    background-color: var(--surface);
    color:var(--on-surface);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
}

::selection{
    background-color: var(--primary-color);
    color:var(--on-primary-color);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}

p a{
    text-decoration: underline;
}

p{
    font-size: var(--font-size-base);
    line-height: 1.5;
}

    p + p{
        margin-top:var(--space-2);
    }

    .bodytitle-01 + p{
        margin-top:var(--space-3);
    }

/*skip links*/

.jump-barre {
  position: absolute;
  top: 0;
  left: 0;
}

.jump-barre a {
  position: absolute;
  left: -9999px;
  padding: 8px 12px;
  background: var(--surface);
  color:var(--on-surface);
  border: 2px solid var(--primary-color);
}

.jump-barre a:focus {
  left: 0;
  top: 0;
}

/* Focus */

:focus-visible {
  outline: 3px dotted var(--primary-color);
  outline-offset: 4px;
}

/* Button */

button{
    border:0;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-base);
}

.button{
    border-radius:var(--button-radius);
    font-family: var(--font-button);
    height: 58px;
    padding:0 var(--space-4);
    display:inline-flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    position: relative;
    gap:16px;
}

        .button-icon-left::before, .button-icon-right::after{
            content:"";
            font-family: "ji" !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            height: 20px;
            width: 20px;
        }

            .fc-next::after{
                content:"";
            }

    .button-icon-only{
        position: relative;
        padding: 0;
        width:58px;
    }

        .button-icon-only[data-tooltip]::before{
            content:attr(data-tooltip);
            position: absolute;
            transform: translateY(8px);
            padding: var(--space-2) var(--space-4);
            background-color: var(--cta-surface-secondary);
            color:var(--on-cta-secondary);
            border-radius: var(--tooltip-radius);
            opacity: 0;
            white-space: nowrap;
            pointer-events: none;
            top: 0;
            transition: var(--animation-classic);
        }


            .button-icon-only[data-tooltip]:hover::before{
                opacity: 1;
                transform: translateY(calc(100% + 16px));
                transition: var(--animation-classic);
            }

        .button-icon-only::after{
            content:"";
            font-family: "ji" !important;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            height: 20px;
            width: 20px;
        }

    .button-primary{
        background-color: var(--cta-surface);
        color:var(--on-cta);
    }

        .button-primary::after, .button-gradients::after{
            color:var(--on-cta);
        }

    .button-secondary{
        background-color: var(--cta-surface-secondary);
        color: var(--on-cta-secondary);
    }

        .button-secondary::after{
            color: var(--on-cta-secondary);
        }

    .button-gradients{
        background: var(--gradients-primary);
        background-size: 100% 200%;
        background-position: 0% 100%;
        color:var(--on-cta);
        transition: var(--animation-classic);
    }

        .button-gradients:hover{
            background-position: 0% 0%;
            transition: var(--animation-classic);
        }

    .button-thried{
        background: var(--secondary-color);
        color: var(--on-cta-secondary);
    }

/* Icon */

.icon{
    font-family: 'Ji';
}

/* Cover */

.cover{
    width: 100%;
    padding:var(--grid-margin);
}

    .cover-content{
        height: 760px;
        margin: auto;
        width: 100%;
        max-width: var(--grid-max-width);
        padding:168px var(--space-14) var(--space-14) var(--space-14);
        overflow: hidden;
        position: relative;
        border-radius: var(--section-radius);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background:var(--on-surface);
        color:var(--on-cover-surface);
        gap:0;
    }

    .home .cover-content{
        align-items: center;
        gap:var(--space-12);
    }

        .cover-content .brand{
            grid-column:1 / -1;
            grid-template-columns: subgrid;
            display: grid;
            position: relative;
            z-index: 2;
        }

            .cover-content .brand .logo{
                position: absolute;
                margin:auto;
                transform: translateY(-48px);
                inset:0;
                width: 185px;
                z-index: 1;
            }

                .cover-content .brand .logo svg{
                    fill: var(--on-cover-surface);
                    width: 185px;
                    height: 230px; 
                }
    
    .cover-content p{
        color:var(--on-cover-surface-variant);
        max-width: 602px;
    }

    
    .cover-content .cover-text{
        position: relative;
        z-index: 2;
        max-width: 538px;
    }
    
        .home .cover-content .cover-text{
            text-align: center;
        }

    .headtitle-01{
        grid-column:1 / -1;
        font-family: var(--font-title);
        display: flex;
        font-size: var(--font-size-4xl);
        color:var(--secondary-color);
        align-items: center;
        justify-content: center;
        font-weight: 900;
        z-index: 2;
    }

        .bodytitle-01{
            grid-column:1 / -1;
            font-family: var(--font-title);
            display: flex;
            font-size: var(--font-size-3xl);
            line-height: var(--font-size-3xl);
            align-items: center;
            justify-content: flex-start;
            font-weight: 900;
            z-index: 2;
        }


        .bodytitle-04{
            grid-column:1 / -1;
            font-family: var(--font-title);
            display: flex;
            font-size: var(--font-size-xl);
            line-height: var(--font-size-xl);
            align-items: center;
            justify-content: flex-start;
            font-weight: 900;
            z-index: 2;
        }

        .bodytitle-05{
            grid-column:1 / -1;
            font-family: var(--font-title);
            display: flex;
            font-size: var(--font-size-lg);
            line-height: var(--font-size-lg);
            align-items: center;
            justify-content: flex-start;
            font-weight: 900;
            z-index: 2;
        }



/* Informations dans les covers, single et page */

.informations-cover{
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap:var(--space-3);
    align-items: flex-start;
}

    .informations-cover .headtitle-01{
        line-height: var(--font-size-4xl);
    }

/* Informations dans les singles */

.informations-folio{
    width: 100%;
    padding:0 var(--grid-margin) var(--grid-margin) var(--grid-margin);
}

    .informations-folio-content{
        margin: auto;
        width: 100%;
        max-width: var(--grid-max-width);
        padding:var(--space-13) var(--space-14);
        overflow: hidden;
        position: relative;
        border-radius: var(--section-radius);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        background:var(--on-surface);
        color:var(--on-cover-surface);
    }

        .informations-folio-content .informations-folio-list{
            width: 100%;
            display: flex;
            flex-direction: column;
            gap:var(--space-3);
        }

            .informations-folio-content .informations-folio-list{
                color:var(--on-cover-surface);
            }


                .informations-folio-content .informations-folio-list ul{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap:0 var(--space-3);
                }

                .informations-folio-content .informations-folio-list ul a{
                    color:var(--on-cover-surface-variant);
                    position: relative;
                    display: block;
                    padding:8px 0;
                }

                        .informations-folio-content .informations-folio-list ul li *{
                            transition: var(--animation-classic);
                        }

                        .informations-folio-content .informations-folio-list ul a:hover{
                            color:var(--secondary-color)
                        }

                        .informations-folio-content .informations-folio-list ul a::after{
                            content: "";
                            position: absolute;
                            height: 2px;
                            bottom:0;
                            display: block;
                            background-color: var(--on-cover-surface);
                            transition: var(--animation-classic);
                            left: 0;
                            right: 100%;
                            
                        }

                        .informations-folio-content .informations-folio-list ul a:hover::after{
                            background-color: var(--secondary-color);
                            left: 0;
                            right: 0;
                        }


/* Section */

section{
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap:var(--grid-gap-vertical) var(--grid-gap);
    margin:var(--grid-margin);
}

/* Header */

header{
    width: 100%;
    padding:0 var(--grid-margin);
    position: fixed;
    top: 0;
    transform: translateY(80px);
    z-index: 999;
    height: 70px;
    
}

    .header-content{
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        gap:var(--grid-gap-vertical) var(--grid-gap);
        justify-content: space-between;
        padding:var(--space-3) var(--space-14);
    }

        .nav-content{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            width: 100%;
            grid-column: 2 / -1;
        }

            .button-contact{
                flex-shrink: 0;
            }

             .button-menu{
                display: none;
                flex-shrink: 0;
                border:1px solid var(--on-cover-surface);
             }

        .header-content .brand{
            width: 56px;
            height: 70px;
            display: flex;
            flex-direction: column;
            fill: var(--on-cover-surface);
            transition: var(--animation-classic);
        }

            .header-content .brand svg{
            width: 57px;
            height: 70px;
            max-width: 100%;
            }

            header.chablagou .header-content .brand .logo{
                fill:var(--primary-color);
                transition: var(--animation-classic);
            }
    
    .header-content nav{
        flex: 1;
        display: flex;
        justify-content: center;
    }

    header .menu-header{
        display: flex;
        background-color: var(--surface);
        flex-direction: row;
        border-radius: 35px;
    }

        header .menu-header a{
            font-family: var(--font-button);
            padding: 0 var(--space-8);
            height: 70px;
            display: flex;
            align-items: center;
            color:var(--on-surface);
            position: relative;
        }

            header .menu-header .current-menu-item a{
                font-weight: 900;
            }

        header .menu-header a::after{
            content: "";
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  height='6' fill='none' viewBox='0 0 12 6'%3E%3Cpath fill='%23000' d='M.247 1.563C.15 1.5.084 1.517 0 1.596c.022.046.034.11.071.128.188.098.217.261.218.45.004.176.087.26.258.313.055.018.115.04.156.078q.24.216.47.442c.35.344.673.715 1.077 1 .11.076.203.176.298.268.324.31.662.595 1.055.813.08.042.15.095.234.13.055.025.127.053.184.04.157-.035.245.028.33.156.068.1.17.204.28.24.177.06.326.125.436.283.061.088.133.082.2-.007a.35.35 0 0 1 .21-.149c.034-.008.082-.027.096-.054.094-.176.282-.216.436-.29.2-.093.405-.169.644-.146.199.017.407-.015.609-.047l.014-.002c.215-.033.444-.082.59-.24.154-.168.35-.248.53-.36.064-.038.133-.07.189-.116.456-.372.871-.786 1.276-1.21.069-.07.096-.177.148-.266.034-.063.064-.133.116-.18.076-.07.165-.126.254-.18.104-.062.148-.128.148-.265 0-.19.022-.392.271-.474.136-.044.29-.138.351-.255.089-.165.213-.255.362-.342q.124-.072.229-.173c.077-.074.136-.17.079-.28-.05-.093-.036-.165.03-.242.027-.032.036-.08.048-.123.028-.114.052-.229.085-.342.046-.152.008-.206-.157-.192q-.704.055-1.403.117c-.089.008-.172.043-.259.065-.1.026-.197.06-.299.074-.133.02-.268.018-.4.038-.07.013-.158.034-.2.082-.14.16-.325.21-.52.232-.486.059-.975.104-1.464.16-.19.02-.38.052-.575.077-.35.044-.7.084-1.057.005a.82.82 0 0 0-.699.151c-.084.065-.213.085-.327.103h-.005c-.158.026-.322.033-.485.045-.042.002-.097.014-.128-.006-.153-.097-.31-.083-.475-.034-.055.017-.117.007-.175.007-.185-.005-.373-.016-.558-.016-.066 0-.148.007-.191.046-.151.136-.315.146-.497.088-.027-.009-.06-.005-.09-.005a1.6 1.6 0 0 0-.736.159l-.003.001c-.141.068-.278.133-.44.04-.08-.044-.157.001-.217.07-.144.155-.209.171-.375.062'/%3E%3C/svg%3E");
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: var(--secondary-color);
            width: 0px;
            height: 6px;
            position: absolute;
            bottom: 11px;
            left: 0;
            right: 0;
            margin: auto;
            overflow: hidden;
            transition: var(--animation-classic);
        }

            header .menu-header .current-menu-item a::after{
                width: 12px;
            }

            header .menu-header a:hover::after{
                width: 12px;
                 height: 6px;
            }

    header .header-content .button-contact{
        width:164px;
        height: 70px;
        border:1px solid var(--on-cover-surface);
    }

/* footer */

footer{
    width: 100%;
    padding:var(--grid-margin);
}

    footer .brand{
        fill:var(--on-cover-surface);
    }

        footer .footer-nav ul li a{
            max-width: 248px;
        }

    footer .footer-content{
        display: flex;
        flex-direction: row;
        padding:var(--space-14);
        margin: auto;
        border-radius: var(--section-radius);
        color: var(--on-cover-surface);
        background-image: url('assets/image-footer.jpg');
        background-color: var(--cover-surface);
        max-width: var(--grid-max-width);
    }

        footer .footer-content .contact{
            margin: auto;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap:var(--space-12);
            justify-content: flex-start;
        }

    footer .social-list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap:var(--space-2);
    }

        footer .menus-footer{
            display: flex;
            flex-direction: row;
            gap:var(--space-14);
            width: 100%;
        }

            footer .menus-footer .footer-nav{
                width: 100%;
                display: flex;
                flex-direction: column;
                gap:16px;
            }
            
            footer .footer-nav .title-footer{
                font-size:var(--font-size-xl);
                font-family: var(--font-title);
                color:var(--on-cover-surface);
                font-weight:800 ;
            }

                footer .footer-nav ul{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap:24px;
                }

                    footer .footer-nav ul li{
                        flex: 1 1 calc(50% - 16px);
                    }

                        footer .footer-nav ul li *{
                            transition: var(--animation-classic);
                        }

                        footer .footer-nav ul li a{
                            display: block;
                            padding:8px 0;
                            position: relative;
                            color:var(--on-cover-surface-variant);
                        }
                        
                         footer .footer-nav ul li a:hover{
                            color:var(--secondary-color)
                        }

                        footer .footer-nav ul li a::after{
                            content: "";
                            position: absolute;
                            height: 2px;
                            bottom:0;
                            display: block;
                            background-color: var(--on-cover-surface);
                            transition: var(--animation-classic);
                            left: 0;
                            right: 100%;
                            
                        }

                         footer .footer-nav ul li a:hover::after{
                            background-color: var(--secondary-color);
                            left: 0;
                            right: 0;
                        }

    .icon-bluesky::after{
       content:""
    }

    .icon-pixelfed::after{
       content:""
    }


    .icon-arrow-right::before{
        content:"";
        font-family: "ji";
    }

    .icon-prev::after{
        content:"";
    }


/* image lamelles */

.img-cover{
    background-color: var(--cover-surface);
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .img-cover .lamelle {
        flex: 1 1 0;
        height: 100%;
        background-repeat: no-repeat;
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
        --start-offset: 100%;
    }

        .img-cover .lamelle.from-bottom { 
            transform: translateY(100%);
        }
        
        .img-cover .lamelle.from-top{ 
            transform: translateY(-100%);
        }

        .img-cover .lamelle.visible {
            transform: translateY(0);
            opacity: 1;
        }

        .img-cover .img-cover-mask{
            position: absolute;
            inset: 0; /* top:0; right:0; bottom:0; left:0; */
            display: flex;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }



/* Content */

.main{
    width: 100%;
    padding:var(--grid-margin);
}

    .main .main-content{
        grid-column: 1 / -1;
        border-radius: var(--section-radius);
        background-image:url(assets/image-lamelle-bg.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        gap:var(--grid-gap-vertical) var(--grid-gap);
        padding: 80px 0;
    }

/* Section intro */

.section-intro{
    grid-column: 1 / -1;
    gap:var(--space-3);
    display: flex;
    flex-direction: column;
}

    .section-intro p{
        max-width: 506px ;
    }

    .portfolio-list-autofinance .portfolio-list-wrap{
        grid-column: 7 / span 5;
        grid-row: 1;
    }

    .portfolio-list-autofinance .portfolio-image-wrap{
        grid-column: 2 / span 4;
         grid-row: 1;
    }


/* Main folio sur la hp*/

.portfolio-home{
    grid-column: 1 / -1;
}

    .portfolio-home .portfolio-image-wrap{
        height: auto;
    }

    .portfolio-home .more-content{
        grid-column: 1 / span 5;
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: center;
    }

/* Folio */

.portfolio-list-wrap{
    grid-column: 2 / span 5;
    display: flex;
}

    .portfolio-list-wrap .portfolio-list{
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .portfolio-list-wrap .portfolio-list a{
            position: relative;
            display: flex;
            flex-direction: row;
            gap:32px;
            color:var(--on-surface-variant);
            padding:var(--space-4) 0;
            width: 100%;
            border-top:1px solid var(--on-surface);
            transition: var(--animation-classic);
        }

            .portfolio-list-wrap .portfolio-list .is-active a{
                transition: var(--animation-classic);
                padding-left: 32px;
            }

            .portfolio-item-content{
                display: flex;
                flex-direction: column;
                flex:1;
                min-width: 0;
            }

            .portfolio-list-wrap .portfolio-list .button-icon-only{
                z-index: 3;
            }

            .portfolio-list-wrap .portfolio-list .button-icon-only::after{
                content: "";
                font-family: 'ji';
                transition: var(--animation-classic);
            }

        .portfolio-list-wrap .portfolio-list .portfolio-title{
            font-family: var(--font-title);
            font-weight: 800;
            font-size: var(--font-size-2xl);
            color:var(--on-surface);
            line-height:var(--font-size-2xl);
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.portfolio-image-wrap{
    grid-column: 8 / span 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: sticky;
    top: 0;
}

    .portfolio-image-wrap .portfolio-image-sticky{
        position: sticky;
        max-width: 600px;
        aspect-ratio: 600 / 360;
        height: 360px;
        overflow: hidden;
        border-radius: var(--cards-radius);
        display: flex;
        flex-direction: row;
        width: 100%;
        background-color: var(--on-surface);
    }

    .portfolio-image-wrap .portfolio-image-sticky .lamelle {
        flex: 1 0 0;
        height: 100%;
        background-repeat: no-repeat;
        transition: var(--animation-classic);
    }

    .portfolio-image-wrap .portfolio-image-sticky .lamelle.from-bottom { 
        transform: translateY(var(--start-offset, 100%)); 
    }
    
    .portfolio-image-wrap .portfolio-image-sticky .lamelle.from-top{ 
        transform: translateY(var(--start-offset, -100%)); 
    }

    .portfolio-image-wrap .portfolio-image-sticky .lamelle.visible{
        transform: translateY(0) !important; 
    }

/* pour les archives */

main.portfolio-archive {
    position: relative;
    clip-path: inset(0);
}

    .portfolio-archive-archived .portfolio-list-wrap{
        grid-column: 7 / span 5;
         grid-row: 1;
    }

    .portfolio-archive-archived .portfolio-image-wrap{
        grid-column: 2 / span 4;
         grid-row: 1;
    }


/* Content folio */

.content-folio{
    display: grid;
    max-width: var(--grid-max-width);
    margin:var(--grid-margin) auto;
    gap:var(--grid-gap-vertical) var(--grid-gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    padding: var(--grid-gap-vertical) 0;
}

    .content-folio .content-article{
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        display: grid;  
        position: relative;
        row-gap:var(--space-16);
    }

/* Mobile list */

.mobile-list {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

    .mobile-list li{
        display: block;
        break-inside: avoid;
        width:calc(25% - var(--space-4));
    }

        .mobile-list li:nth-of-type(even){
            margin-top: var(--space-4);
        }

        .mobile-list li *{
            max-width: 100%;
        }



/* About */

.about-list-wrap{
    grid-column: 1 / -1;
    display: flex;
    padding:0 var(--space-14);
    width: 100%;
    flex-direction: column;
    gap:var(--space-8);
}

    .about-list-informations{
        display: flex;
        flex-direction: column;
    }

        .about-list-item{
            display: flex;
            flex-direction: row;
            gap:16px;
            padding:var(--space-12) 0;
            border-top:1px solid var(--on-surface);
        }

            .about-list-item .about-date{
                width:228px;
            }

                .about-list-item .item-list-entreprise{
                    display: flex;
                    flex-direction: row;
                    gap:16px;
                }

                    .about-list-item .about-society, .about-list-item .about-localisation{
                        opacity: 0.7;
                    }

                    .about-list-item .about-localisation{
                        display: flex;
                        flex-direction: row;
                        gap:4px;
                        align-items: center;
                        justify-items: center;
                    }

                        .about-list-item .about-localisation::before{
                            content:"";
                            font-family: 'ji';
                            color:var(--secondary-color);
                            align-items: center;
                            justify-items: center;
                        }

/* Mise en forme */

    .full-wrap, .full-width{
        grid-template-columns: subgrid;
        display: grid;
        grid-column: 1 / -1;
    }

    .middle-wrap, .middle-width{
        grid-template-columns: subgrid;
        display: grid;
        grid-column: 2 / -2;
        row-gap: var(--space-8);
        max-width: var(--grid-max-width);
        --cols: 10;
    }

    .little-paragraphe{
        grid-column: 5 / span 4;
    }

    .column-left{
        grid-column: span calc(var(--cols) / 2);
    }

    .column-right{
        grid-column: span calc(var(--cols) / 2);
    }

    .img-full{
        grid-column: 1 / -1;
        max-height: 800px;
        overflow: hidden;
        border-radius: var(--section-radius);
    }

        .img-full img{
            object-fit: cover;
            width: 100%;
            height: 100%;
            transition: all 0.2s;
        }

            .img-full:hover img{
            transform:scale(1.10);
            transition: all 0.2s;
            }

        .icon-list{
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
            display: grid;
        }

            .icon-list li{
                grid-column: span 2;
                margin-bottom:var(--space-4);
                display: flex;
                flex-direction: column;
                gap:var(--space-3);
                justify-content: center;
                align-items: center;
                border-radius: var(--cards-radius);
            }

            .icon-list li svg{
                max-width: 100px;
            }

            .icon-list li figure, .icon-list li img{
                max-width: 100%;
            }

                .icon-list li figcaption{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
/* Image list */ 

.list-image {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

    .list-image figure {
        break-inside: avoid;
        width:calc(25% - var(--space-4));
        margin: 0 0 var(--space-4) 0;
    }

        .list-image figure img {
            display: block;
            width: 100%;
            height: auto;
        }

/* bg-sombre */

.bg-sombre{
    background-color: var(--cover-surface);
}

    .bg-sombre figure{
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .middle-wrap .bg-sombre{
        border-radius: var(--section-radius);
    }

/* Message contact*/

.message-contact{
    display: flex;
}

    .message-contact-content{
        display: flex;
        width: 100%;
        flex-direction: row;
        padding:var(--space-16) var(--space-14);
        border-radius: var(--section-radius);
        color: var(--on-cover-surface);
        background-image: url('assets/image-footer.jpg');
        background-color: var(--cover-surface);
        font-family: var(--font-title);
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap:var(--space-8)
    }

        .message-contact-content p{
            font-size: var(--font-size-xl);
            display: flex;
        }

        .message-contact-content .button{
            border: 1px solid var(--on-cover-surface);
            font-size: var(--font-size-lg);
        }

        .message-contact-content .icon{
            width: 40px;
            height: 40px;
            color:var(--on-cover-surface-variant);
            font-size:var(--font-size-2xl);
        }

/* Contact */

.contact-form{
    grid-column: 4 / -4;
    display: flex;
    flex-direction: column;
    gap:var(--space-8);
}

    .contact-form form{
        gap: var(--space-8);
        display: flex;
        flex-direction: column;
        width: 100%;
    }

        .contact-duo{
            display: flex;
            flex-direction: wrap;
            gap:var(--space-14);
        }

.contact-form .contact-group{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap:var(--space-2);
}

/* Alerts */
.contact-form .alert-box {
    opacity: 0;
    height: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

    .contact-form .alert-box.visible {
        opacity: 1;
        height: auto;
        pointer-events: auto;
    }

    .contact-form .alert-box-success{
        background: var(--alert-box-success-bg);
        border:1px solid var(--alert-box-success);
        border-radius: var(--radius-button);
    }

    .contact-form .alert-box-error{
        background: var(--alert-box-error-bg);
        border:1px solid var(--alert-box-error);
        border-radius: var(--radius-button);
    }

    .contact-form .message{
        padding:var(--space-3) var(--space-4);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: var(--font-size-s);
        gap: var(--space-2);
    }

/* Radio groupe*/
.contact-form .radio-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

    .contact-form .radio-option input{
        display: none;
    }

    .contact-form .radio-box {
        display: inline-flex;
        font-size: var(--font-size-s);
        padding: var(--space-1) var(--space-3);
        border:1px solid var(--surface-stroke);
        background: var(--surface);
        border-radius:var(--button-radius);
        cursor: pointer;
        transition: all .2s ease;
        display: flex;
        flex-direction: row;
        gap:var(--space-2);
        justify-content: center;
        align-items: center;
        height: 64px;
    }

        .contact-form .radio-box::before{
            content:"";
            height: 16px;
            width: 16px;
            display:block;
            border:1px solid var(--surface-stroke);
            background: var(--surface);
            border-radius:var(--button-radius);
        }

        .radio-option input:checked + .radio-box {
            background: var(--on-surface);
            color: var(--surface);
        }

            .radio-option input:checked + .radio-box::before{
                background: var(--on-surface);
                outline:3px solid var(--surface-stroke);
                outline-offset: -3px;
            }

/* Radio groupe */

  .contact-form .radio-group.invalid .cf-radio-box {
    border-color: var(--color-error);
  }

.contact-group{
    display: flex;
    flex-direction: column;
    gap: 0;
}

input.input-text, textarea.box-textarea{
    border-radius: var(--textfield-radius);
    border: none;
    padding:var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    background: var(--surface);
    color:var(--on-surface);
    outline:1px solid var(--surface-stroke);
    outline-offset: 1px;
}

    .input-text:focus, .box-textarea:focus{
        outline:2px solid var(--primary-color);
        outline-offset: -2px;
    }

    .input-text.invalid, .box-textarea.invalid{
        outline:2px solid var(--alert-box-error);
        outline-offset: -2px;
        border-radius: var(--textfield-radius) var(--textfield-radius) 0 0;
    }

    
        .field-error{
            display: flex;
            flex-direction: row;
            border: 1 solid var(--alert-box-error);
            background: var(--alert-box-error-bg);
            border-radius: 0 0 var(--textfield-radius) var(--textfield-radius);
            font-size: var(--font-size-lg);
            position: relative;
            padding: 0;
            overflow: hidden;
            height: 0;
            top: -16px;
        }

        .field-error.visible{
            height: auto;
            transition: all 0.2s;
            top: -6px;
        }

    .field-error .message{
        padding:var(--space-2);
        display: flex;
    }

.input-text::placeholder{
    font-style: italic;
    color: var(--on-surface-variant);
}  

.box-textarea::placeholder{
    font-style: italic;
    color: var(--on-surface-variant);
}  

/* Compteur caractères */
.char-count {
  font-size: var(--font-size-xs);
  color: var(--on-surface-variant);
}
.char-count-min {
  font-style: italic;
}

    .button-send-message{
        position: relative;
        width: 218px;
    }

    #cfSubmitBtn .content-button{
        display: flex;
        justify-content: center;
        align-items: center;
        inset: 0;
        transform: translateY(0);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        visibility: visible;
    }

        #cfSubmitBtn .content-spinner{
            position: absolute;
            top: 0;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            visibility: hidden;
        }


    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /* spinner */
    #cfSubmitBtn .content-spinner{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 4px solid transparent;
        border-top-color: currentColor;
        animation: spin 1s linear infinite;
        margin: auto;
    }

        /* État loading */
        #cfSubmitBtn.loading .content-button{ 
            opacity: 0;
            visibility: hidden;
        }

        #cfSubmitBtn.loading .content-spinner{ 
            opacity: 1;
            visibility: visible;
        }

/* Carousel */

.folio-carousel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--grid-gap, 16px);
  position: relative;
}

.folio-carousel-text-nav {
  grid-column: 3 / 5    ;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 4;
  align-self: center;
}

.folio-carousel-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.folio-carousel-text h3,
.folio-carousel-text p {
  margin: 0;
}

.folio-carousel-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.folio-carousel-track-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: subgrid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--grid-gap, 16px);
  background-color: blue;
}

    .folio-carousel-track {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--grid-gap, 16px);
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 480px;
    background-color: yellow;
    }

.folio-carousel-item {
  position: absolute;
  width: calc(2 * (100% / 12) + var(--grid-gap, 16px));
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

    .folio-carousel-item .folio-carousel-text{
        display: none;
    }

.folio-carousel-item figure {
  margin: 0;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: var(--cards-radius, 12px);
}

.folio-carousel-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.folio-carousel-dots {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  height: 32px;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

    .folio-carousel-dots .folio-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: var(--on-surface-variant);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

            .folio-carousel-dots .folio-carousel-dot:hover{
                height: 32px;
                min-width: 32px;
            }

        .folio-carousel-dots .folio-carousel-dot.active{
            opacity: 1;
            background: var(--on-surface);
            width:32px;
        }

              .folio-carousel-dots .folio-carousel-dot.active:hover{
                height: 8px;
                min-width: 32px;
            }

    .folio-carousel-text-panel{
        grid-column: 3 / 5;
        grid-row: 1;
        width: 100%;
        z-index: 4;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 24px;
        background-color: red;
        transition: var(--animation-classic);
    }

/* couleurs spécialisées */

.bubusdex .bg-sombre{
    background-color: #111111;
}

@media (max-width: 960px) {
  .folio-carousel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .folio-carousel-track-wrapper {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .folio-carousel-track {
    grid-template-columns: 1fr;
    height: 60vw;
  }

  .folio-carousel-item {
    width: 70% !important;
  }

  .folio-carousel-text-nav {
    grid-column: 1;
    grid-row: 2;
    z-index: 1;
    padding: 24px 0;
  }

  .folio-carousel-dots {
    grid-row: 2;
    margin-top: 0;
    padding-top: 12px;
  }

  
}


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

    :root{
        --grid-columns: 12;
        --grid-margin: 32px;
        --grid-gap: 16px;
        --grid-gutter: 16px;
        --grid-gap-vertical: 80px;
        --grid-max-width: 1920px;
        
        /* Grids */
        --cover-grid-column: 2 / -2;

        /* Espacement */
        --space-1:   0.25rem;  /*   4px */
        --space-2:   0.5rem;   /*   8px */
        --space-3:   0.8rem;   /*   16px */
        --space-4:   1rem;     /*  20px */
        --space-6:   1.5rem;   /*  24px */
        --space-8:   2rem;     /*  32px */
        --space-12:  2.5rem;   /*  40px */
        --space-13:  3rem;   /*  48px */
        --space-14:  4rem;   /*  64px */
        --space-16:  5rem;     /*  80px */
        --space-20:  9.75rem;  /* 156px */

        /* Font Size */
        --font-size-xs: 0.7rem; /* 14px */
        --font-size-base: 0.8rem;     /* 16px */
        --font-size-lg: 1rem;  /* 20px */
        --font-size-xl: 1.2rem;   /* 24px */
        --font-size-2xl: 2rem;   /* 40px */
        --font-size-3xl: 2.4rem ;/* 48px */
        --font-size-4xl: 3.8rem;     /* 76px */

    }

    header.chablagou{
        transform: translateY(32px);
        transition: var(--animation-classic);
    }

    header.chablagou .header-content{
        background: rgba(255, 255, 255, 0.10);
        backdrop-filter: blur(5px);
        border-radius: var(--section-radius);
    }

}

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

    .content-folio .role-folio{
        grid-column: 5 / span 4;
    }

    .informations-folio-content{
        gap:0 172px
    }

    footer .footer-content{
        gap:176px;
    }

    footer .footer-content .contact{
        max-width:382px ;
    }

    .column-left{
        margin-right: 75px;
    }

    .column-right{
        margin-left: 75px;
    }

}

@media screen and (min-width:961px) and (max-width:1200px){
    
    .content-folio .role-folio{
        grid-column: 3 / -3;
    }

    .little-paragraphe{
        grid-column: 3 / -3;
    }

    .informations-folio-content{
        gap:0 80px
    }

    footer .footer-content{
        gap:80px;
    }

    footer .footer-content .contact{
        max-width:382px ;
    }

    .column-left{
        margin-right: 40px;
    }

    .column-right{
        margin-left: 40px;
    }

    /* Contact */

    .contact-form{
        grid-column: 2 / -2;
    }
  
}

@media screen and (max-width:960px) {

    header{
        transform: translateY(96px); /* état fermé, comme en desktop */
        padding:0 60px;
        transition:var(--animation-classic);
        overflow: hidden;
    }

        header .header-content{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            gap: 16px;
            transition:var(--animation-classic);
        }

        header .header-content .button{
            padding:16px;
        }

            header.menu-open{
                transform: translateY(0);
                height: 100%;
                padding: 96px 60px;
                background: rgba(13, 17, 50, 0.10);
                backdrop-filter: blur(5px)
            }

        header.menu-open .header-content{
            height: 100%;
            align-content: flex-start;
        }


    .header-content .brand{
        max-width: 57px;
        order: 1;
    }

    .button-menu{
        display: inline-flex;
        order: 2;
        z-index: 9999;
    }

    .nav-content{
        order: 3;
        flex-basis: 100%;
        width: 100%;
        height: 0;
        overflow: hidden;
        display: flex;
        padding: 0 var(--space-12);
        gap:var(--space-12);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:var(--on-cover-surface);
        background-image: url('assets/image-footer.jpg');
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
        transition: var(--animation-classic);
        border-radius: var(--cards-radius);
    }

        header .menu-header a{
            color:var(--on-cover-surface);
        }

        header.menu-open .nav-content{
            height: 100%;
            transition: var(--animation-classic);
            display: flex;
        }

    .header-content nav{
        flex: none;
        width: 100%;
        justify-content: center;
    }

        .header-content nav li{
            display: block;
            width: 100%;
        }
        .header-content nav a{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        header .header-content .button-contact{
            width: 100%;
        }

    header .menu-header{
        flex-direction: column;
        align-items: center;
        background-color: transparent;
        border-radius: 0;
        width: 100%;
    }

        header .menu-header a{
            height: auto;
            padding: var(--space-8) 0;
        }



    .list-image figure {
        width:calc(50% - var(--space-4));
    }
 
}

@media screen and (min-width:551px) and (max-width:960px){

    :root{
        --grid-columns: 6;
        --grid-margin:  32px;
        --grid-gap:  16px;
        --grid-gutter:  16px;
        --grid-gap-vertical: 60px;
        --grid-max-width: 960px;
        
        /* Grids */
        --cover-grid-column: 2 / -2;

        /* Espacement */
        --space-1:   0.25rem;  /*   4px */
        --space-2:   0.5rem;   /*   8px */
        --space-3:   0.7rem;   /*  11px */
        --space-4:   0.875rem; /*  14px */
        --space-6:   1.25rem;  /*  20px */
        --space-8:   1.5rem;   /*  24px */
        --space-12:  2rem;     /*  32px */
        --space-13:  2.25rem;  /*  36px */
        --space-14:  3rem;     /*  48px */
        --space-16:  3.5rem;   /*  56px */
        --space-20:  6rem;     /*  96px */

        /* Font-size*/
        --font-size-xs: 0.7rem;   /* 14px */
        --font-size-base: 0.8rem; /* 16px */
        --font-size-lg: 0.9rem;   /* 18px */
        --font-size-xl: 1.1rem;   /* 22px */
        --font-size-2xl: 1.7rem;  /* 34px */
        --font-size-3xl: 1.9rem;  /* 38px */
        --font-size-4xl: 3rem;    /* 60px */
    }

    .content-folio .role-folio{
        grid-column: 1 / -1;
    }

    .informations-folio-content{
        flex-direction: column;
        gap:var(--space-8);
    }

    footer .footer-content{
        flex-direction: column;
        gap: var(--space-8);
    }

    footer .menus-footer{
        flex-direction: column;
    }

    .content-folio .role-folio{
        grid-column: 1 / -1;
        margin:var(--grid-margin);
    }

    .full-wrap{
        margin:var(--grid-margin);
    }

    .middle-wrap{
        grid-column: 1 / -1;
        margin:var(--grid-margin);
    }

    .little-paragraphe{
        grid-column: 1 / -1;
        margin:var(--grid-margin);
    }
    
    .column-left{
        grid-column: 1 / -1;
    }

    .column-right{
        grid-column: 1 / -1;
    }

    /* About list */

    .about-list-item{
        flex-direction: column;
    }

    .portfolio-list-wrap{
        grid-column: 1 / span 3;
        padding:0 var(--space-8);
    }

    .portfolio-image-wrap{
        grid-column: 4 / span 3;
        padding:0 var(--space-8) 0 0;
    }

    .portfolio-archive-archived .portfolio-list-wrap{
        grid-column: 4 / span 3;
        padding:0 var(--space-8);
    }

    .portfolio-archive-archived .portfolio-image-wrap{
        grid-column: 1 / span 3;
        padding:0 0 0 var(--space-8);
    }

    .button-menu{
        width:164px;
    }

    .contact-form{
        grid-column: 1 / -1;
        padding:0 var(--space-8);
    }

            .contact-duo{
                flex-direction: column;
            }

    .portfolio-home .more-content{
        grid-column: 1 / -1;
    }
    
    .message-contact-content{
        flex-direction: column;
    }

}

@media screen and (max-width:550px){

    :root{
        --grid-columns: 4;
        --grid-margin:  32px;
        --grid-gap:  8px;
        --grid-gutter:  16px;
        --grid-gap-vertical: 40px;
        --grid-max-width: 550px;
        
        /* Grids */
        --cover-grid-column: 1 / -1;

        /* Espacements */
        --space-1:   0.25rem;  /*   4px */
        --space-2:   0.5rem;   /*   8px */
        --space-3:   0.6rem;   /*   10px */
        --space-4:   0.75rem;  /*   12px */
        --space-6:   1rem;     /*   16px */
        --space-8:   1.25rem;  /*   20px */
        --space-12:  1.5rem;   /*   24px */
        --space-13:  1.75rem;  /*   28px */
        --space-14:  2rem;     /*   32px */
        --space-16:  2.5rem;   /*   40px */
        --space-20:  4rem;     /*   64px */

        /* Font Size*/
        --font-size-xs: 0.65rem;  /* 13px */
        --font-size-base: 0.75rem;/* 15px */
        --font-size-lg: 0.85rem;  /* 17px */
        --font-size-xl: 1rem;     /* 20px */
        --font-size-2xl: 1.4rem;  /* 28px */
        --font-size-3xl: 1.6em;  /* 32px */
        --font-size-4xl: 2.2rem;  /* 44px */
    }

    .content-folio .role-folio{
        grid-column: 1 / -1;
    }

    .informations-folio-content{
        flex-direction: column;
        gap:var(--space-8);
    }

    .header .header-content .button{
        width: auto;
    }

    footer .footer-content{
        flex-direction: column;
        gap: var(--space-8);
    }

    footer .menus-footer{
        flex-direction: column;
    }

            footer .footer-nav ul{
                flex-direction: column;
                gap:16px;
            }

    .content-folio .role-folio{
        grid-column: 1 / -1;
        margin:var(--grid-margin);
    }

    .portfolio-list-wrap{
        grid-column: 1 / -1;
        padding:0 var(--space-14);
    }

    .portfolio-image-wrap{
        display: none;
    }

    .portfolio-archive-archived .portfolio-list-wrap{
        grid-column: 1 / -1;
        padding:0 var(--space-14);
    }

    .little-paragraphe{
        grid-column: 1 / -1;
    }

    .full-wrap{
        margin:var(--grid-margin);
    }

    .middle-wrap{
        grid-column: 1 / -1;
        margin:var(--grid-margin);
    }

    .icon-list li{
        grid-column: 1 / -1;
    }

    /* About list */

    .about-list-item{
        flex-direction: column;
    }

        .contact-duo{
            flex-direction: column;
        }

    .contact-form{
        grid-column: 1 / -1;
        padding:0 var(--space-8);
    }

    .portfolio-home .more-content{
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
    }


        .list-image{
        flex-direction: column;
    }

    .list-image figure {
        width:100%;
    }


    .message-contact-content{
        flex-direction: column;
    }

    .about-list-item .item-list-entreprise{
        flex-direction: column;
        gap:var(--space-2)
    }


}