/* importation des styles de police */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paprika&display=swap');

/* importation Normalize */
@import url(normalize.css);

/* importation utilitaires */
@import url(utilitaires.css);

/* importation typo */
@import url(typo.css);

/* Utilitaire */

img {
    max-width: 100%;
}

@font-face {
    font-family: bodonitown;
    src: url('../polices/bodonitown.woff2') format('woff2'),
    url('../polices/bodonitown.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*** Classe conteneur pour le centrage et l'affichage de la grille en arrière-plan ***/
@media (min-width: 500px) {
    .conteneur {
        margin: 0 auto;
        max-width: 1000px;
        padding: 0;
        /* Grille 12 colonnes en arrière-plan - Mettre en commentaires après usage */
        /* background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="url(%23susy-svg-gradient)" width="100%" %3E%3Cdefs%3E%3ClinearGradient spreadMethod="pad" id="susy-svg-gradient" x1="0%" y1="0%" x2="100%" y2="0%"%3E%3Cstop offset="0%" style="stop-color:rgba(64, 191, 64, 0.5);" /%3E%3Cstop offset="100%" style="stop-color:rgba(159, 223, 159, 0.5);" /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x="0" width="6.7796610169%" height="100%"/%3E%3Crect x="8.4745762712%" width="6.7796610169%" height="100%"/%3E%3Crect x="16.9491525424%" width="6.7796610169%" height="100%"/%3E%3Crect x="25.4237288136%" width="6.7796610169%" height="100%"/%3E%3Crect x="33.8983050847%" width="6.7796610169%" height="100%"/%3E%3Crect x="42.3728813559%" width="6.7796610169%" height="100%"/%3E%3Crect x="50.8474576271%" width="6.7796610169%" height="100%"/%3E%3Crect x="59.3220338983%" width="6.7796610169%" height="100%"/%3E%3Crect x="67.7966101695%" width="6.7796610169%" height="100%"/%3E%3Crect x="76.2711864407%" width="6.7796610169%" height="100%"/%3E%3Crect x="84.7457627119%" width="6.7796610169%" height="100%"/%3E%3Crect x="93.2203389831%" width="6.7796610169%" height="100%"/%3E%3C/svg%3E') no-repeat scroll; */
    }
}


/* section entete */
.header {
    background-color: black;
}

.logo_head {
    display: flex;
    justify-content: center;
}

.entete_titre {
    background-color: black;
    color: #FF83BC;
    margin: 50px;
    padding-bottom: 60px;
    text-align: center;
   
}

@media (min-width: 800px) {

    .logo {
        text-align: center;

    }

    .entete {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        background-color: black;
    }

    .entete_picture,
    .entete_titre {
        max-width: 50%;

    }

}

@media (min-width: 500px) {
    .header {
        background-color: black;
    }

    .logo {
        text-align: center;

    }

    .entete {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        background-color: black;
    }

    .entete_picture,
    .entete_titre {
        max-width: 50%;
    }

}


figcaption {
    font-size: 20px;

}

.avocat{
    color: white;
}

p {
    font-size: 20px;
}





/* pictures */


/* section 1  */


.accroche {
    margin: 30px;
}

.p {
    color: black;
    margin: 50px;
}

.img_insta {
    margin: 0;
}

.img_insta_2 {
    margin: 0;
}

h2 {
    text-align: center;
    padding-top: 50px;

}

figcaption{
    text-align: center;
}


@media (min-width: 500px) {
    .img_insta {
        margin: 0;
        text-align: center;
    }

    .img_insta_2 {
        margin: 0;
        text-align: center;
    }
}


@media (min-width: 800px) {
    .blanc_1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
    
       "titre ."
       "a     b"
       ".     c";


    }

    .blanc_1 .sous-titre {
        grid-area: titre;
    }

    .blanc_1 .a {
        grid-area: a;
    }

    .blanc_1 .b {
        grid-area: b;
    }

    .img_insta {
        /* position: relative;
        z-index: 1; */
        position: relative;
        bottom: -3em;

        margin: 0;
    }

    .img_insta_2 {
       
        margin: 20px;
    }

    .sous_titre {
        font-family: 'Cinzel', serif;
        text-align: center;
    }
}


/* section 2 */
.noir_1 {
    background-color: #212121;
}

.noir_1 .p {
    color: white;
}

.noir_1 h3 {
    color: white;
}

.fig_blanc {
    color: white;
}

.noir_1 .sous_titre {
    color: #FF83BC;

}

.domination {
    text-align: center;
}

.img_tutelle {
    text-align: center;
}

@media (min-width: 500px) {
    .fig_blanc {
        color: white;
    }

    .sous_sous_titre_blanc {
        color: white;

    }
}

@media (min-width: 800px) {
    .noir_1 h2 {
        margin-top: 100px;
        margin-bottom: 1px;

    }

    p {
        font-size: 1.25rem;
    }

    .noir_1 .b {
        margin-left: 15px;
    }

    .noir_1 .conteneur {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 8fr 2fr;
        grid-template-areas:
        ".     ."
        "titre ."
        "a     b"
    }

    .noir_1 .sous-titre {
        grid-area: titre;
    }

    .noir_1 .a {
        grid-area: a;
    }

    .noir_1 .b {
        grid-area: b;
    }

    .domination {
        margin: 0px;
    }

    .sous_titre_rose {
        grid-area: titre;
        color: #FF83BC;
        font-family: cinzel, serif;
    }

    .p_blanc {
        color: white;

    }

    .p_blanc_2 {
        color: white;
        margin: 50px;
    }

    .sous_sous_titre_blanc {
        color: white;
        margin-left: 50px;
    }

    .fig_blanc {
        color: white
    }


    .flex_noir_1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

    }

    .flex_noir_1 p {
        margin: 20px;
    }

    .img_tutelle {
        margin: 20px;
    }

}


/* citation */
.noir_1 .c {
    background-color: black;
    align-items: center;
}


.citation {
    background-color: black;
    color: #EEBB0B;
    margin-left: 50px;
    margin-right: 50px;
    padding-top: 50px;


}

.signature {
    background-color: black;
    color: #EEBB0B;
    margin-top: 20px;
    text-align: end;
    margin-right: 50px;


}

h3 {
    text-align: center;
}

@media (min-width: 500px) {
    .noir_1 .c {
        display: flex;
        flex-direction: row;
    }

    .signature {
        font-size: 30px;
    }

    .citation {
        font-size: 30px;
    }
}

    @media (min-width: 800px) {
        .noir_1 .c {
            display: flex;
            flex-direction: row;
        }

        .signature {
            font-size: 40px;
        }

        .citation {
            font-size: 40px;
        }
    }

    /* section 3 */
    .sous_titre_free {
        text-align: center;
        font-family: 'Cinzel', serif;
    }

    .fig_b_2 {
        text-align: center;
        

    }

    .fig_b_2 picture {
        display: inline-block;

    }
.fig_b_2  img{
    width: 100%;

}

.framing{
    text-align: center;
}
    @media (min-width: 800px) {
        .blanc_2 .conteneur {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
   
      "titre ."
      "a     b"
        }

    .blanc_2 .a {
        grid-area: a;
    }

    .blanc_2 .b {
        grid-area: b;
    }

    .sous_titre_free {
        grid-area: titre;
    }
}


/* section carriere */
.noir_2 {
    background-color: #212121;
    padding-bottom: 70px;
}

.noir_2  li{
    color: white;
}

.sous_titre_carriere {
    color: #FF83BC;
    font-family: cinzel;
    text-align: center;

}

.noir_2 h3 {
    text-align: start;
    color: white;
}

.img_carriere {
    text-align: center;
    /* padding-bottom: 50px; */
}

.div_acomplissement div {
    padding-bottom: 50px;
}


.noir_2 h3 {
    margin-left: 20px;
}

ul {
    list-style-type: square;
}


@media (min-width: 800px) {
    .noir_2 .conteneur {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /*grid-template-rows: repeat(12, 20px minmax(auto, 1fr) 20px);*/
        grid-template-rows: auto repeat(12, 5em auto 5em);
        /*gap: 30px 30px; */
        /* grid-column-gap: 30px; */
        grid-template-areas:
                        "titre titre"  /* auto */
                         "a     ."     /* 5em */
                         "a     ."
                         "a     b"    /* 5em */
                         ".     b"    /* 5em */
                         ".     b"
                         "c     b"    /* 5em */
                         "c     ."    /* 5em */
                         "c     ."
                         "c     d"    /* 5em */
                         ".     d"    /* 5em */
                         ".     d"
                         "e     d"    /* 5em */
                         "e     ."    /* 5em */
                         "e     ."
                         "e     f"    /* 5em */
                         ".     f"    /* 5em */
                         ".     f"
                         "g     f"    /* 5em */
                         "g     ."    /* 5em */
                         "g     ."
                         "g     h"    /* 5em */
                         ".     h"    /* 5em */
                         ".     h"
                         "i     h"    /* 5em */
                         "i     ."    /* 5em */
                         "i     ."
                         "i     j"    /* 5em */
                         ".     j"    /* 5em */
                         ".     j"
                         "k     j"
                         "k     ."
                         "k     ."
                         "k     l"
                         ".     l"
                         ".     l"
                         ".     l"

    }

    .sous_titre_carriere {
        grid-area: titre;
    }

    .a {
        grid-area: a;
    }

    .b {
        grid-area: b;
    }

    .c {
        grid-area: c;
    }

    .d {
        grid-area: d;
    }

    .e {
        grid-area: e;
    }

    .f {
        grid-area: f;
    }

    .g {
        grid-area: g;
    }

    .h {
        grid-area: h;
    }

    .i {
        grid-area: i;
    }

    .j {
        grid-area: j;
    }

    .k {
        grid-area: k;
    }

    .l{
        grid-area: l;
    }

    /* ajouter j, k, l et décommenter les div j, k, l dans le html */
}

/* footer */


.logo_footer{
    display: flex;
    justify-content: center;
}

h4{
    margin: 10px;
    text-decoration: underline;
}

.sources{
    text-align: center;
   
}

.sources ul{
    list-style: none;
}




.sources_lien{
    text-align: center;
     list-style: none;
}
.source_item .sources_lien{
    font-size: 1em
}

.credit p{  text-align: center;

}
.sources_lien :hover,
.sources_lien :active{
     color:#FFC90B ;
     text-decoration: none;
 }

 a{text-decoration: none}

 .social_media{
     list-style: none;
     display: flex;
     flex-direction: row;
     justify-content: center ;
    
    
 }
.reseaux{
    text-align: center;
    padding-top: 60px;
}
.reseaux_sociaux:nth-child(1) .rs{
    margin-right: 20px;
}
.reseaux_sociaux:nth-child(2) .rs{
    margin-right: 20px;
}
.reseaux_sociaux:nth-child(3) .rs{
    margin-right: 20px;
}
 .reseaux_sociaux:nth-child(4) .rs{
     margin-right: 20px;
 }

.facebook:hover{
    background-color: #FFC90B;
    border-radius: 2.5rem;
}



.twitter:hover{
    background-color: #FFC90B;
    border-radius: 2.5rem;
}
.instagram:hover{
    background-color: #FFC90B;
    border-radius: 2.5rem;
}
.linkedin:hover{
    background-color: #FFC90B;
    border-radius: 2.5rem;
}

/* .rs:focus{ 
    background-color: #FFC90B;
    border-radius:1rem;
    /* outline:#FFC90B auto 3rem ; */
   
    


.credit{
    text-align: center; 
}



/* focus liens */
.rs:focus{
    background-color: #FFC90B;
    border-radius: 2.5rem;
}