/* RESPONSIVE SAFT */
.bouton_retour_portefolio.responsive_it{
    width: -webkit-fill-available !important;
}
.icn_btn.responsive_it{
    display: none;
}
.icn_btn.responsive_it.responsive_it_icn_btn{
    display: block;
    margin : 0 !important;
}
#text_btn_retour.responsive_it{
    display : none;
}
#plus_real.responsive_it.responsive_it_plus{
    display : block;
    margin : 0;
    transform : translateX(0px)
}
.bouton a.responsive_it, #bouton_dirige_contact.responsive_it{
    padding: 0 1vw 0 1vw;
    display: flex;
    justify-content : center;
    width: auto;
}
.responsive_it .wt_content{
    width: -webkit-min-content;
    line-height: 1.2em;
}
.wt_content.responsive_it{
    display : none
}
.wt_content.responsive_it_wt{
    width: -webkit-min-content;
}
/*
@media only screen and (max-width: 1266px) {
    .icn_btn{
        display: none;
    }
}
@media only screen and (max-width: 1176px) {
    #text_btn_retour{
        display : none;
    }
    #plus_real{
        display : block;
        margin : 0;
        background-position: center;
        transform: translateX(0px);
        min-width : 24px
    }
}
*/

/* PETITE TABLETTE IPAD MINI */
@media only screen and (max-width: 1180px) {
    .limit_section{
        padding : 2vw;
    }
    #visualisation{
        min-width: 58%;
    }
    #info_visualisation {
        width: calc(42% - 6vw);
    }
    .wrap_cercle{
        width: 20%;
    }
    :root {
        --taille_cercle_texte : 190px;
    }
    .cercle-texte span {
        /* Espacement debut fin, largeur cercle, espacement lettre */
        transform:  rotate(calc(var(--i) * 9.5deg)) translateX(calc(48px * cos(calc(var(--i)   / 180)) + 28px)) rotate(90deg);
        font-size: 1.1em;
    }
}

@media only screen and (max-width: 1014px) {
    .wrap_cercle{
        transform: scale(1) !important;
        position: relative;
        margin: 50px auto;
        margin-bottom: 30px;
        right : 0 !important;
        width : auto !important;
    }
    .wrap_p_quijesuis{
        display: block !important;
        width: auto;
        max-width: 390px;
        padding : 15px 10px 15px 26px;
        position: relative;
    }
    .wrap_p_quijesuis .click_voir_plus{
        display: block;
    }

    :root {
        --taille_cercle_texte : 220px !important;
    }
    .cercle-texte span {
        /* Espacement debut fin, largeur cercle, espacement lettre */
        transform:  rotate(calc(var(--i) * 9.5deg)) translateX(calc(63px * cos(calc(var(--i)   / 180)) + 28px)) rotate(90deg) !important;
        font-size: 1.3em !important;
    }
}
@media only screen and (max-width: 768px) {
    .wt_content {
        width: auto;
    }
    #dessinlier{
        display : none;
    }
    :root {
        --paddingright_description : 3vw;
        --paddingleft_description : 2vw;
        --width_description : calc(var(--paddingright_description) + var(--paddingleft_description));
    }
    #englob_visuel{
        display : block
    }
    #visualisation{
       position : relative
    }
    #info_visualisation{
        flex-direction: row;
        width: calc(100% - 3vw);
        margin-top : 0px
    }
    #englob_visuel{
        padding : 5px 0 0 0
    }
    #englob_image_logiciel{
        justify-content : space-between;
    }
    #wrap_visuel{
        width: 100% !important;
        bottom : auto;
        top : 0;
        max-width: calc(100% - 3px);
        height: 0.000001%;
    }
    #englob_repere_tri{
        margin-top : 10px;
    }
    #info_visualisation h2{
        margin-top : 10px
    }
}

@media only screen and (max-width: 629px) {
    .wt_content {
        width: min-content;
        line-height: 1.2em !important;
    }
}
@media only screen and (max-width: 534px) {
    #plus_contact, #plus_real_autres_visuels{
        display : none
    }
    .bouton a, .bouton_retour_portefolio {
        padding: 0 3vw 0 3vw;

    }
}
@media only screen and (max-width: 526px) {
    section#portefolio h1{
        font-size: 12vw;
    }
    #section_contact h1 {
        font-size: 3em;
    }
    #wrap_form{
        max-width : calc(100% - 6vw);
    }
}
@media only screen and (max-width: 454px) {
    .bouton{
        width: 100%;
    }
}

@media only screen and (max-width: 440px) {
    section#portefolio h3 {
        font-size: 6vw !important;
    }

    .signal_clique{
        display : none !important;
    }
    #visualisation{
        background: linear-gradient(0deg, rgba(202, 89, 143, 1),rgba(240, 149, 90, 1),rgba(186, 230, 125, 1));
        background-repeat: no-repeat;
        background-size: 100vw 100vh;
        background-attachment: fixed;
        z-index : 9;
        position: sticky;
        width: calc(100% - 2vw);
        transform: translate(-2vw, -8px);
    }
    #pagecoucou{
        height: 100% !important;
    }
    header{
        position: relative ;
        width: 100% !important;
        height: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    header.fixit{
        transform : translateY(-7px);
        padding : 0
    }
    
    .controlscroll{
        overflow: hidden !important;
    }
    header nav {
        z-index : 99 !important;
        top : 0 !important;
        position: relative !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        background-color: rgba(248, 248, 228, 0.7);
        padding: 0 !important;
        width: 0 ;
        height: 0 ;
        /* 1. coin en haut à gauche */
        /* 2. coin en haut à droite */
        /* 3. coin en bas à droite  */
        /* 4. coin en bas à gauche  */
        border-radius: 0 0 100% 0;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;

    }
    #menu_burger{
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    header nav ul {
        display : flex !important;
        flex-direction: column !important;
        gap : 3vh !important;
        top : 0 !important;
        left : 0 !important;
        width: 100% !important;
        height: max-content !important;
        align-items: center !important;
    }
    header nav ul li {
        width: min-content !important;
    }
    header nav ul li a{
        font-size : 1.2em !important
    }
    nav ul li a span:not(span.icn){
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    #presentation .place_texte ul{
        padding-left: 7px !important;
    }
    html {
        scroll-snap-type: none !important; /* Activer le snap scrolling */
    }
    h1.poste{
        font-size: 10vw;
    }
    #nom_designer{
        font-size: 8vw;
    }
    .star{
        width: 3vw;
        height:3vw;
    }
    .star:nth-child(1){
        left : -3vw;
        top : -3vw;
    }
    .star:nth-child(2){
        right : -3vw;
        top : -3vw;
    }
    .star:nth-child(3){
        right : -3vw;
        bottom : -3vw;
    }
    .star:nth-child(4){
        left : -3vw;
        bottom : -3vw;
    }
    #englobpagecoucou{
        position: relative;
        transform: translateY(-30%);
        border-radius : 4px;
    }
    section#portefolio h1{
        font-size: 12vw;
        margin-bottom : 0.3em
    }
    #info_visualisation{
        flex-direction: column !important;
        padding: 10px 1vw;
        width: calc(100% - 2vw) !important;
    }

    #englob_slid_visuel{
        max-height : auto;
    }
    #recup_visuel img{
        max-height: calc(100% - 20px);
    }
    #groupe_img_mini{
        gap : 10px;
    }
    :root {
        --hauteur_slide_realisation : 170px;
    }
    #info_visualisation h2{
        font-size: 7.5vw;
        
    }
    #description{
        width: calc(100% - 10px);
    }
    #visuel{
        /*height: 100%;*/
    }
    .feuillage{
        width: 35vw;
        height: 35vw;
    }
    #englobscroll{
        bottom: 21vh;
    }
    #englobbouton_autre {
        width: calc(calc(100% + 2vw) + 1px);
        height : 63px
    }
    .w{
        max-width: 100%;
    }
    .cotacot {
        flex-direction: column;
        gap : 0
    }
    #wrap_sp_page_contact{
        position :relative;
        height : 870px;
    }

    #englob_image_logiciel{
        justify-content : space-between !important;
    }
    .wrap_cercle{
        width : calc(100% - 9vw) !important;
    }
    #englob_visuel_miniature{
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    nav ul{
        gap : 3.5vw;
    }
    .bouton {
        padding-left : 2vw;
        padding-right : 2vw;
        
    }
    #redirige_presentation{
        margin-right : 0;
    }
    #plus_real{
        display: block !important;;
        margin : 0 !important;
    }
    #text_btn_retour{
        display : none;
    }

    .bouton{
        flex : 4
    }
    .bouton:not(.bouton:nth-of-type(2), .bouton:nth-of-type(3)){
        flex : 1
    }
    #sticky_titre_et_pentagone.fixe_sticky{
        position : sticky;
        background-color: #f9f9f9;
        animation : anime_top 0.3s forwards;
    }
    @keyframes anime_top{
        to {
            padding-top : 75px;
        }
    }

}
/* FIN 440 */

/* PETITE SMARTPHONE */
@media only screen and (max-width: 375px) {
    :root {
        --hauteur_slide_realisation : 210px;
    }
    nav ul li a{
        padding: 4px 4px 0 4px;
    }
    nav ul{
        gap : 2vw;
    }
}
@media only screen and (max-width: 375px) {
    .bouton {
        padding-left: 1vw;
        padding-right: 1vw;
    }

    .bouton{
        flex : 3
    }
    .bouton:not(.bouton:nth-of-type(2), .bouton:nth-of-type(3)){
        flex : 1
    }
}
@media only screen and (max-width: 347px) {
    #calibre_chat h1{
        font-size : 13vw;
    }
}
@media only screen and (max-width: 360px) {
    .icn_btn{
        display : block !important;
    }
    .wt_content{
        display : none !important
    }
    .bouton{
        flex : 1 !important
    }
}
@media only screen and (max-width: 320px) {
    #visualisation{
        background: none;
        z-index : 1;
        position: relative;
        width: calc(100% - 7vw);
        transform: translate(0px, 0px) !important;
    }
    #englobbouton_autre {
        width: calc(calc(100% + 2vw) + 4px);
    }
}