@font-face {
    font-family:"Mont";
    src:url('fonts/Montserrat-Regular.ttf');
}
@font-face{
    font-family:"Mont-Bold";
    src:url('fonts/Montserrat-Bold.ttf');
}

@font-face {
    font-family:"Ranchers";
    src: url('fonts/Ranchers-Regular.ttf');
}

*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

html{
    font-family: Mont, Arial, sans-serif;
    scroll-behavior: smooth;
}

#logo-header{
    width:180px;
}

#nav a{
    font-family: Mont-Bold;
    font-size: 12pt;
    color: #2C2C2C;
    text-decoration: none;
    padding: 1em;
    margin: 0.3em;
}

#nav a:hover{
    /* border-bottom:solid 3px #184985;
    border-top:solid 3px #184985; */
    border: solid 3px #184985;
    border-radius: 10px;
    transition: 100ms;
}

header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:1em 10%;
    
}

#nav-contact{
    display:flex;
    align-items: center;
}

#nav-contact a{
    padding: 0.5em;
}


#nav-contact a img {
    width: 44px;
}


a#contact{
    color:#184985;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 13pt;
    border:solid 3px #184985;
    border-radius: 30px;
    padding:0.8em;
}

#contact:hover{
    color: #ffffff;
    background-color: #184985;
    transition: 500ms;
}


/* Page index */

h1{
    display:none;
}

#visibilite{
    background-image: url("img/fond_visibilite.webp");
    background-repeat: no-repeat;
    background-size: 1920px; /* affiche l’image entière */
    background-position: center; 
}

#visibilite h2{
    font-family: Ranchers;
    color:#ffffff;
    font-size: 110pt;
    text-align: center;
    padding-top: 2.1em;
}

#visibilite h3{
    text-align: center;
    color: #ffffff;
    font-size: 21pt;
}

#visibilite div{
    display: flex;
    justify-content: center;
}

#visibilite div a{
    color:#ffffff;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 18pt;
    border:solid 4px #ffffff;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 1em 3em 1em;
    text-align: center;
}

#visibilite div a:hover{
    background-color: #ffffff;
    color: #184985;
    transition: 500ms;
}

.bleu{
    color: #184985;
}

#cherchez{
    margin: 0 10%;
}

#cherchez h2{
    font-family: Mont-Bold;
    font-size: 35pt;
    color: #F05C00;
    text-align: center;
    margin: 1em auto;
}

#cherchez a{
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 10pt;
    border:solid 3px #F05C00;
    border-radius: 60px;
    padding:1em 1.3em;
}

#cherchez a:hover{
    color: #ffffff;
    background-color: #F05C00;
    transition: 500ms;
}



.sous-cat-4{
    font-size: 20pt;
    font-family: Mont-Bold;
    color: #184985;
    padding: 0.5em 0;
}

.texte-courant{
    color: #2C2C2C;
    margin: 0.5em 1.5em 3em 1.5em;
}

#cherchez-4{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#cherchez-4 div{
    width: 25%;
    text-align: center;
    margin-bottom: 5em;
}

#cherchez-4 div img{
    max-width: 95%;
    border-radius: 15px;
}

#moi{
    background-color: #184985;
    padding: 0 3%;
}

#moi h2{
    font-family: Mont-Bold;
    font-size: 35pt;
    color: #ffffff;
    text-align: center;
    padding: 0.5em;
}

.orange{
    color: #F05C00;
}

#moi{
    margin:0 3% ;
    border-radius: 22px;
    display: flex;
    align-items: center;
}

#moi img{
    max-width: 30%;
    border-radius: 22px;
    margin: 5em 7em 5em 0;
}

#moi div{
    display: flex;
    flex-direction: column;
}

#moi div p{
    margin:1em 0;
    color:#ffffff;
    font-size: 19pt;
    text-align: center;
}

#index-portfolio h2{
    font-family: Mont-Bold;
    font-size: 35pt;
    color: #F05C00;
    text-align: center;
    margin: 1em auto;
}


.logos-slide img{
    height: 400px;
    border-radius: 15px;
    margin: 0.5em;
}

.logos{
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.logos:before,
.logos:after{
    position: absolute;
    top: 0;
    width:100px;
    height:100%;
    content: "";
    z-index: 2;
}


.logos:before{
    left: 0;
    /* background: linear-gradient(to left, transparent,#ffffff); */
}

.logos:after{
    right: 0;
    /* background: linear-gradient(to right, transparent,#ffffff); */
}


.logos:hover .logos-slide{
    animation-play-state: paused;
}

.logos-slide{
    display: inline-block;
    animation:30s slide infinite linear;
}

@keyframes slide {
    from{
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


#et-si{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#et-si h2{
    font-family: Mont-Bold;
    font-size: 40pt;
    color: #F05C00;
    margin: 1em auto 0.2em auto;
    text-align: center;
}

#et-si p{
    color: #2C2C2C;
    font-size: 20pt;
    text-align: center;
}

#et-si a{
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 15pt;
    border:solid 4px #F05C00;
    border-radius: 60px;
    padding:1em 2.5em;
    margin: 2em auto;
}

#et-si a:hover{
    color: #ffffff;
    background-color: #F05C00;
    transition: 500ms;
}


/* footer */

#footer-orange{
    background-color: #F05C00;
    display: flex;
    padding: 2em 10%;
    justify-content: space-between;
    flex-wrap: wrap;
}

#footer-orange-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#footer-orange-nav div{
    display: flex;
    flex-direction: column;
    margin: 0 1em;
}

#footer-orange-nav div a{
    text-decoration: none;
    color: #ffffff;
    font-size: 13pt;
}

#footer-orange-nav div a:hover{
    text-decoration: underline;
}

#footer-reseau{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

#footer-reseau a{
    width: 100%;
    margin: 1em;
}

#footer-blanc h2{
    text-align: center;
    color: #2C2C2C;
    font-size: 15pt;
    font-family: Mont;
    margin: 1em auto;
}

.mobile-menu{
    display: none;
}

#footer-orange-nav a img{
    width: 250px;
    margin:1em;
}


/* Page portfolio */




#portfolio-description h2{
    font-family: Mont-Bold;
    font-size: 50pt;
    color: #F05C00;
    text-align: center;
    margin: 1em 10%;
}

#portfolio-description p{
    font-family: Mont;
    font-size: 14pt;
    color: #2C2C2C;
    text-align: center;
    margin: 0 10%;
}

#portfolio-description div{
    display: flex;
    justify-content: center;
}

#portfolio-description div a{
    color:#184985;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 15pt;
    border:solid 4px #184985;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 1em 3em 1em;
    text-align: center;
}

#portfolio-description div a:hover{
    background-color: #184985;
    color: #ffffff;
    transition: 500ms;
}

#portfolio-contenu{
    margin: 3em 10%;
}

#portfolio-contenu h2{
    font-size: 35pt;
    color: #F05C00;
    text-align: center;
    font-family: Mont-Bold;
    margin:1em auto
}

#portfolio-contenu div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

#portfolio-contenu a{
    width:32%;
    padding: 0.5em;
    
}

#portfolio-contenu a img{
    width: 100%;
    border-radius: 15px;
}


/* Page identite visuelle */



#identite-description div a{
    color:#184985;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 15pt;
    border:solid 4px #184985;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 1em 3em 1em;
    text-align: center;
}

#identite-description div a:hover{
    background-color: #184985;
    color: #ffffff;
    transition: 500ms;
}

#identite-description div{
    display: flex;
    justify-content: center;
}

#identite-description h2{
    font-family: Mont-Bold;
    font-size: 50pt;
    color: #F05C00;
    text-align: center;
    margin: 1em 10%;
}

#identite-description p{
    font-family: Mont;
    font-size: 14pt;
    color: #2C2C2C;
    text-align: center;
    margin: 0 10%;
}

#identite-contenu h2{
    font-family: Mont-Bold;
    font-size: 35pt;
    color: #F05C00;
    text-align: center;
    margin: 1em 10%;
}

#identite-contenu{
    margin:0 10%;
}

.choisir{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:1em 0;
}

.choisir div{
    width: 47%;
    text-align: center;
}

.choisir img{
    width: 100%;
    border-radius: 11px;
}

.text-identite{
    font-size: 28pt;
    font-family: Mont-Bold;
    color: #184985;
    padding: 0.5em 0;
}

.text-courant-identite{
    font-family: Mont;
    font-size: 14pt;
    color: #2C2C2C;
    text-align: center;
}

.btn-identite{
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 12pt;
    border:solid 4px #F05C00;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 0em;
    text-align: center;
    display: inline-block;
}

.btn-identite:hover{
    color: #ffffff;
    background-color: #F05C00;
    transition: 500ms;
}

.taff {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4em 10%;
}

.taff div{
    margin:3em;
    text-align: center;
}

.taff div h2{
    font-size: 40pt;
    font-family: Mont-Bold;
    color: #F05C00;
}

.taff div p{
    color: #2C2C2C;
    font-size: 20pt;
    margin:1em;
}

.taff div a{
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 12pt;
    border:solid 4px #F05C00;
    border-radius: 60px;
    padding:1.3em;
    text-align: center;
    display: inline-block;
}

.taff div a:hover{
    background-color: #F05C00;
    color: #ffffff;
    transition: 500ms;
}

.taff img{
    width:25%;
    border-radius: 22px;
    margin: 3em;
}

/* Page site web */


#siteweb-description h2{
    font-size: 50pt;
    color: #F05C00;
    text-align: center;
    font-family: Mont-Bold;
    margin: 1em 10%;
}

#siteweb-description p{
    color: #2C2C2C;
    font-size: 14pt;
    font-family: Mont;
    text-align: center;
    margin:0 10%;
}

#siteweb-description div a{
    color:#184985;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 15pt;
    border:solid 4px #184985;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 1em 3em 1em;
    text-align: center;
}

#siteweb-description div{
    display: flex;
    justify-content: center;
    align-items: center;
}

#siteweb-description div a:hover{
    background-color: #184985;
    color: #ffffff;
    transition: 500ms;
}

.siteweb-choix{
    display: flex;
    margin: 5em 10%;
}

#siteweb-contenu h2{
    color: #F05C00;
    font-family: Mont-Bold;
    font-size: 35pt;
    text-align: center;
    margin: 1em auto;
}

.siteweb-choix img{
    width: 50%;
    border-radius: 22px;
}

.siteweb-choix div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 3em;
}

.site-titre{
    font-size: 25pt;
    color: #184985;
    margin: 1em auto;
    font-family: Mont-Bold;
}

.text-site{
    font-size: 14pt;
    color: #2C2C2C;
    font-family: Mont;
}


.siteweb-choix div a {
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 12pt;
    border:solid 4px #F05C00;
    border-radius: 60px;
    padding:1.3em;
    margin:2em auto
}

.siteweb-choix div a:hover{
    color: #ffffff;
    background-color: #F05C00;
    transition: 500ms;
}

#reverse{
    flex-direction: row-reverse;
}

#coup-pouce{
    text-align:center;
    color: #ffffff;
    background-color: #184985;
    margin: 0 3%;
    border-radius:22px;
}

#coup-pouce h2{
    font-size: 35pt;
    padding: 1.5em;
    font-family: Mont-Bold;
}

#coup-pouce{
    font-size: 14pt;
    font-family: Mont;
    padding: 0 10%;
}

#coup-pouce a{
    color:#ffffff;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 15pt;
    border:solid 4px #ffffff;
    border-radius: 60px;
    padding:1.3em;
    margin: 2em 1em 3em 1em;
    display: inline-block;
}

#coup-pouce a:hover{
    color: #184985;
    background-color: #ffffff;
    transition: 500ms;
}

#badges-persos{
    margin: 0 10%;
}

#badges-persos h2{
    font-family: Mont-Bold;
    font-size: 35pt;
    color: #F05C00;
    text-align: center;
    margin: 1em auto;
}

#badges-persos a{
    color:#F05C00;
    font-family: Mont-Bold;
    text-decoration: none;
    font-size: 10pt;
    border:solid 3px #F05C00;
    border-radius: 60px;
    padding:1em 1.3em;
}

#badges-persos a:hover{
    color: #ffffff;
    background-color: #F05C00;
    transition: 500ms;
}

a#bientot{
    color:#ffffff;
    background-color: #F05C00;
    border:solid 3px #F05C00;
}

a#bientot:hover{
    color: #F05C00;
    background-color: #ffffff;
    transition: 500ms;
}

.badges-perso-tab h2{
    font-family: Mont-Bold;
    font-size: 25pt;
    color: #F05C00;
    text-align: center;
    margin: 1.5em auto;
}

.badges-perso-tab div{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.5em 10%;
}

.badges-perso-tab div div{
    margin: 1em;
    width: 45%;
}

.badges-perso-tab div div img{
    width:85%;
    border-radius: 22px;
}

.badges-perso-tab div div table{
    text-align: center;
    font-size: 15pt;
    font-family: Mont;
    color: #184985;
    width: 85%;
}

.badges-perso-tab div div table tbody{
    font-size: 25pt;
}

.badges-perso-tab div div table tfoot a {
    color: #F05C00;
    
}

.commande a{
    text-decoration: none;
    border: solid 3px #F05C00;
    padding: 0.7em;
    border-radius: 60px;
    transition: 500ms;
}

.commande a:hover{
    color: #ffffff;
    background-color: #F05C00;
    
}

.commande{
    text-align: right;
}

.badges-perso-tab div div table th{
    font-family: Mont-Bold;
}

.honeypot { 
    display: none;
 }

.form-contact{
    margin:3em auto;
    text-align: center;
    width:40%;
}

.form-contact h2{
    color: #F05C00;
    font-family: Mont-Bold;
    font-size: 30pt;
    margin: 1.5em;
}

.form-contact form { 
    width:100%; display: flex; flex-direction: column; gap: 15px; justify-content: center;
}

input, textarea { 
     padding: 10px; border: 1px solid #F05C00; border-radius: 6px; 
}

label{
    color: #184985;
    font-family: Mont-Bold;
    font-size: 17pt;
}

textarea { 
    resize: vertical; min-height: 120px; 
}

button { 
    color: #F05C00;
    background-color: #ffffff;
     border: solid 3px #F05C00; padding: 12px; border-radius: 60px; font-family: Mont-Bold; font-size: 20pt; 
     text-align: center;
}

button:hover { 
    background-color: #F05C00; color: #ffffff; transition: 500ms; 
}

.message { 
    text-align: center; padding: 15px; border-radius: 6px; 
}

.success { 
     color: #155724; 
}

.error { 
     color: #721c24; 
}


@media screen and (max-width: 1175px){
    #cherchez-4 div{
    width: 50%;    
    }

    #visibilite h2{
        font-size: 70pt;
    }

    #nav a{
        font-size: 10pt;
    }

    #logo-header{
        width: 150px;
    }
}

@media (max-width: 810px){
    
    #identite-description h2 {
        font-size: 20pt;
    }
    
    #identite-description p{
        font-size: 11pt;
    }
    
    .texte-courant{
        padding:0.5em 0 0 0;
        margin: 0.5em 0 2em 0;
    }


    #identite-description div a{
        font-size: 12pt;
    }
    
    #identite-contenu h2{
        font-size: 20pt;
    }

    .choisir div {
        width: 100%;
    }

    .text-identite{
        font-size: 20pt;
    }

    .text-courant-identite{
        font-size: 11pt;
    }

    .choisir div a{
        font-size: 12pt;
    }

    .taff{
        flex-direction: column-reverse;
    }

    .taff img{
        width:90%;
        margin:1em 0;
    }

    .taff div{
        margin:0;
    }

    .taff div h2{
        font-size: 25pt;
    }

    .taff div p{
        font-size:11pt;
        margin: 1em 0;
    }
    
    #siteweb-description h2{
        font-size: 20pt;
    }

    #siteweb-description p{
        font-size: 11pt;
    }
   
    #siteweb-description div a{
        font-size: 12pt;
    }
   
   .siteweb-choix{
    flex-direction: column;
   }
   
   .siteweb-choix img{
    width:100%;
   }
   
   .siteweb-choix div {
    margin:0;
   }
   
   .site-titre{
    font-size: 20pt;
   }

   .text-site{
    font-size: 11pt;
   }

   #reverse{
   flex-direction: column

    }

    .siteweb-choix {
        margin:1em 10%;
    }

   #coup-pouce h2{
    padding:1em 0.6em;
    font-size: 20pt;
   }

    #coup-pouce{
        padding: 0 3%;
        font-size: 11pt;
    }

    #coup-pouce a{
        font-size: 12pt;
    }

    #siteweb-contenu h2 {
        font-size: 20pt;
    }

   
    #portfolio-description p{
        font-size: 11pt;
    }
    
    #portfolio-description h2{
        font-size: 20pt;
    }

    #portfolio-description div a{
        font-size: 12pt;
    }

    #portfolio-contenu a{
        width:100%;
    }
    
    
#portfolio-contenu h2{
    font-size: 20pt;
}

     .logos:hover .logos-slide {
    animation-play-state: running;
  }
    
    header{
        margin:0;
        justify-content: space-between;
        position: sticky;
        top:0;
        z-index: 9998;
        background-color: #ffffff;
    }

    #scroll{
        overflow: hidden;
    }

    .menu{
        display: none;
        position: absolute;
        z-index: 99999;
        transform: translateX(-145px);

    }

    .mobile-menu{
        display: flex;
        justify-content: flex-end;
    }

    #toggler{
        padding: 0.5em;
        color: #fff;
        background-color: #184985;
        border-radius: 6px;
        margin: 0.5em;
    }


    .menu-container{
        width:100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }

    .menu-listing{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        
    }

   #nav a{
        font-size: 10pt;
        padding: 1em;
        color: #ffffff;
        background-color: #F05C00;
        border-radius: 11px;
        white-space: nowrap;
        margin:0.2em 0;
    }

    #nav-contact{
        display: none;
    }
    
    
    #logo-header{
    width:130px;
    margin:1em;
    }

    #cherchez-4 div{
        width:100%;
    }

    #cherchez h2{
        font-size: 20pt;
    }


    #badges-persos h2{
        font-size: 20pt;
    }


    #visibilite{
        background-size: 810px;;
    }

    #visibilite h2{
        padding-top:0.2em;
        font-size: 45pt;
    }

    #visibilite h3{
        margin: 0.5em auto;
        font-size: 12pt;
    }

    #visibilite div a{
        font-size: 12pt;
        margin:1em auto
    }

    #moi{
        flex-direction: column;
    }

    #moi img{
    max-width: 50%;
    border-radius: 15px;
    margin:1em;
    }

    #moi h2{
        font-size: 20pt;
        padding: 0;
    }

    #moi div p{
        font-size: 12pt;
    }

    #index-portfolio h2{
        font-size: 20pt;
    }

    #et-si h2{
        font-size: 20pt;
    }

    #et-si p{
        font-size: 13pt;
    }
    
    #et-si a {
        font-size: 11pt;
    }

    #footer-orange{
        justify-content: center;
        padding:1em;
    }

    #footer-orange-nav div a {
        font-size: 8pt;
        padding: 0.2em;
    }

    #footer-orange-nav img{
        width: 75%;
    }

    #footer-blanc h2{
        font-size: 8pt;
    }

    .logos-slide img{
    height: 200px;
}

.badges-perso-tab h2{
    font-size: 20pt;
    margin:0.7em;
}

.badges-perso-tab div{
    margin: 1em ;
}

.badges-perso-tab div div{
    margin:0.5em;
    width: 100%;
}

.badges-perso-tab div div img{
    width:85%;
    border-radius: 22px;
}

.badges-perso-tab div div table{
    text-align: center;
    font-size: 11pt;
    font-family: Mont;
    color: #184985;
    width: 85%;
}

.badges-perso-tab div div table tbody{
    font-size: 17pt;
}

.form-contact{
    margin:1em auto;
    width:90%;
}

}