/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
    max-width: 100%;
}

@media (max-width: 1400px) {
    * {
        box-sizing: border-box;
    }

    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */
    body {
        width  : auto;
        margin : 0;
        padding: 0;
    }

    /* conserver le ratio des images */
    img {
        height: auto;
    }

    /* gestion des mots longs */
    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto;
        /* césure propre */
        -moz-hyphens   : auto;
        hyphens        : auto;
        word-wrap      : break-word;
        /* passage à la ligne forcé */
    }

    code,
    pre,
    samp {
        white-space: pre-wrap;
        /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }

    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
    .element1,
    .element2 {
        float: none;
        width: auto;
    }

    /* masquer les éléments superflus */
    .hide_mobile {
        display: none !important;
    }

    /* Un message personnalisé */
    body:before {
        display   : block;
        text-align: center;
        font-style: italic;
        color     : #777;
    }

    /* quand l'écran est trop petit, on affiche pas l'image.*/
    .imageAPropos {
        display: none;
    }

    #contact{
        padding-bottom: 50px;
    }

    .suivezNous {
        font-size   : 40px;
        font-weight : 900;
        line-height : 90%;
    }
}

@media (min-width:1400px) {
    .imageAPropos {
        height: 100vh;
    }

    .textAPropos {
        margin-left: 15px;
        top        : 100px;
        left       : 100px;
    }
        
    .suivezNous {
        font-size   : 85px;
        font-weight : 900;
        line-height : 90%;
    }

    .siPetit{
        display:none;
    }
}

@media(max-width:1600px) {
    .nav-item {
        padding-left : 10px;
        padding-right: 10px;
    }
}

@media(min-width:1600px) {
    .nav-item {
        padding-left : 45px;
        padding-right: 45px;
    }
}

/* partie barre de navigation */
#mainNav {
    background    : rgba(6, 3, 36, 0.6);
    margin-bottom : 0;
    padding-bottom: 0;
    border-bottom : 0;
    font-size:15px;
}

/* Partie  vidéo*/
.boutonPortfolio {
    font-weight:700;
    border:solid 2px white;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:75px;
    padding-right:75px;
    margin-top:10px;
}
.boutonPortfolio:hover {
    background-color: rgba(6, 3, 36, 0.7);
}

/* partie nos experiences */
#nosExperiences {
    min-height: 75vh;
}

/* partie mosaique */
#image-mosaic {
    display              : grid;
    gap                  : 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows       : 240px;
    background           : rgba(6, 3, 36, 1);
    color                : rgb(255, 255, 255);
    padding-top:15px;
}

.clickableImage {
    border: solid rgba(244, 237, 26, 1);
}

.clickableImage:hover {
    margin-top : 5px;
    margin-left: 5px;
    cursor     : pointer;
}

.clickMeImage {
    position: absolute;
    top     : 80%;
    width   : 50%;
}

.imageContainer {
    text-align: center;
}

.imagesExperience {
    width: 150px;
    margin-bottom: 75px;
}

.m6Gulli{
    width:100px;
    margin-top:20px;
}

.card {
    display            : flex;
    flex-direction     : column;
    justify-content    : center;
    align-items        : center;
    background         : #353535;
    font-size          : 3rem;
    color              : #fff;
    box-shadow         : rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height             : 100%;
    width              : 100%;
    border-radius      : 4px;
    transition         : all 500ms;
    overflow           : hidden;
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
    padding            : 0;
    margin             : 0;
}

.card-tall {
    grid-row: span 2 / auto;
}

.card-wide {
    grid-column: span 2 / auto;
}

/* partie nos méthode */
#nosMethodes {
    background: white;
    color     : black;
}

/* partie contacte */

#contact {
    background: rgb(255, 255, 255);
    color     : rgba(6, 3, 36, 1);
}

.priseDeContacte {
    display     : block;
    margin-left : auto;
    margin-right: auto;
    margin-top  : 20px;
}

.interieurContact{
    /* padding-top : 10%;
    padding-left: 10%; */
}

.boutonEnvoieMail{
    font-weight:700;
    border: solid 2px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:75px;
    padding-right:75px;
    margin-top:10px;
    transition: 0.5s;
    white-space:nowrap;
}

.boutonEnvoieMail:hover{
    cursor: pointer;
    background-color: rgba(244, 237, 26, 1);
    color: white;
    border: solid 2px black;
}

.boutonEnvoieMail a{
    color:black;
    text-decoration: none;
}

.envoieMail{
    font-size:22px;
}

.lesReseaux img{
    margin-left:25px;
    margin-right:25px;
    transition: 0.3s;
}

.lesReseaux img:hover{
    margin-top: 15px;
}

/* partie bas de page */
#basDePage {
    background-color: rgba(244, 237, 26, 1);
    color           : rgba(6, 3, 36, 1);
}

#basDePage.container {
    text-align: center;
}

/* Divers */
.textAbout,
.textCollab {
    padding-top: 5%;
    margin-left: 5%;
}
.important{
    font-weight: 900;
}
.importantCouleurBoite{
    font-weight: 900;
    color:rgba(244, 237, 26, 1);
}

.moinsImportant{
    font-weight: 500;
}

#buttonGoTop {
    display         : none;
    /* Hidden by default */
    position        : fixed;
    /* Fixed/sticky position */
    bottom          : 20px;
    /* Place the button at the bottom of the page */
    right           : 30px;
    /* Place the button 30px from the right */
    z-index         : 99;
    /* Make sure it does not overlap */
    border          : none;
    /* Remove borders */
    outline         : none;
    /* Remove outline */
    background-color: rgba(244, 237, 26, 1);
    /* Set a background color */
    color           : black;
    /* Text color */
    cursor          : pointer;
    /* Add a mouse pointer on hover */
    padding         : 10px;
    /* Some padding */
    border-radius   : 10px;
    /* Rounded corners */
    font-size       : 18px;
    /* Increase font size */
    font-weight     : bold;
}

#buttonGoTop:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

header {
    padding: 156px 0 100px;
}

.titre {
    color      : rgb(255, 255, 255);
    font-weight: bold;
    font-size  : larger;
}

section {
    min-height: 100vh;
    min-width : 100%;
}

#about,
#nosExperiences,
#collaborations {
    background: rgba(6, 3, 36, 1);
    color     : rgb(255, 255, 255);
}

.leLogo {
    width: 150px;
}


body {
    font-size: 25px;
}

.row {
    width: 100%;
}

.carreJaune{
    margin-right:10px;
}

.sousTitre{
    font-style: italic;
}

.centrer{
    text-align:center;
}

.citation{
    font-style: italic;
}


@media (max-width: 1400px) {
    .paragrapheLegale{
        text-align:left;
    }

    .titreMentionsLegales{
        color:rgb(5, 18, 89);
        text-align:center;
        font-weight: bolder;
    }
}
@media (min-width: 1400px) {
    .paragrapheLegale{
        text-align:left;
        width:60%;
        margin-left:20%;
    }

    .titreMentionsLegales{
        color:rgb(5, 18, 89);
        text-align:center;
        padding-top:20px;
        font-weight: bolder;
    }
}

.buttonGoBack{
    position        : fixed;
    /* Fixed/sticky position */
    bottom          : 20px;
    /* Place the button at the bottom of the page */
    right           : 30px;
    /* Place the button 30px from the right */
    z-index         : 99;
    /* Make sure it does not overlap */
    border          : none;
    /* Remove borders */
    outline         : none;
    /* Remove outline */
    background-color: rgba(244, 237, 26, 1);
    /* Set a background color */
    color           : black;
    /* Text color */
    cursor          : pointer;
    /* Add a mouse pointer on hover */
    padding         : 10px;
    /* Some padding */
    border-radius   : 10px;
    /* Rounded corners */
    font-size       : 18px;
    /* Increase font size */
    font-weight     : bold;   
}