/*------------------------------------ ensemble du site ----------------------------------------------*/
/* charte graphique : cyan et salmon (et dérivées)
/* cyan pour tout ce  qui est lien et boutons de navigation + les éléments principaux de la galerie
/* Salmon pour certains titres, pour la mise en valeur de texte, pour les éléments secondaires de la galeries et boutons de nav de la galerie */
*{
    box-sizing:     border-box;
}

#site{
    margin:         auto;
    padding:        auto;
    min-width:      320px;
    max-width:      1400px;
    font-family:    ABeeZee, Candara, Arial, Helvetica, sans-serif;             /***** voir comment lier une police au site sans qu'elle dépende du poste de travail *****/
    /* background-color: rgb(228, 228, 228);                                    au départ le fond était grisé */
    background-color: white;
    color:          darkslategray;
}
/* ------------------------------------------- commun :  header main et footer--------------------------------*/
header, main, footer{
    width:          100%;
    display:        flex;
}
/*------------------------------------------- navigation dans le header ---------------------------------------*/
header .active{
    background-color:   darkcyan !important;                        /* force l'élément "actif" dans la barre de navigation Bootstrap avec la couleur du site (bouton darkcyan) */
}
/*-------------------------------------------- couleur et taille du texte, des titres, des liens -----------------------*/
/* il n'y a pas de H1 */
h2{                                                                     /* utilisé un peu partout, surtout dans la FAQ, les mentions légales, et le processus créatif dans la présentation */
    font-size:      1.2rem;                                           
    margin-bottom:  5px;                                                /* sépare le titre du texte qui le suit */
}
#pres_p5 h2{
    text-align: center;
}
h3{                                                                     /* utilisé partout */
    width:          100%;
    font-size:      1.4rem;
    color:          rgb(173, 91, 82);
    text-align:     center;
    margin-bottom:  5px;                                                /* sépare le titre du texte qui le suit */
}
main p,main li,button{
    font-size:      0.8rem;
}
main p{
    color           :black;
    line-height:    1.8rem;
}
#aufil h2, #aufil p{                                                                
    margin-left:    15px;                                               /* decale le texte introductif sous "au fil de mes explorations" dans la page d'accueil */
}
#aufil h2, #adopter h2{
    color:          rgb(173, 91, 82);
}
/*--------------------------------------- les logos -------------------------------------------------------------*/
.logo{                                              /* logos FBook, Insta, TikTok */
    width:              40px !important;                                                        /***** voir pourquoi besoin du IMPORTANT ? trouver autre solution ? *****/
    margin:             5px;
}
.logo_over{                                         /* logo "overblog" (rectangulaire alors que les autres sont carrés) */
    width:              100px;
    margin:             5px 10px;
}
.logo_faq{                                          /* logos LA POSTE et MONDIAL RELAY */
    width:              70px !important;
    margin-right:       30px;
}
/*--------------------------------------------------------------- header --------------------------------------------------------*/
header{
    flex-direction:     column;                      /* mettre en colonnes le bandeau, la barre de navigation et l'accès FB (+ une image pour l'accueil) */
    justify-content:    space-between;
}
header img{
    display:            block;
    width:              100%;
    height:             auto;
}
header div:last-child{                              /* Accès à l'espace de vente Fbook */
    width:              100%;
    display:            flex;
    flex-direction:     row;
    justify-content:    flex-end;                   /* cadrage à droite */
    align-items:        center;
}
header .nav{                                        /* mettre le menu étendu EN COLONNE pour les téléphones */
    flex-direction: column !important;              /* necessité de mettre !IMPORTANT car on surcharge une classe Boostrap */
    align-items:flex-start;
    margin: 20px 0;
}
a.nav-link{                                         /* barre de navigation principale, aussi bien en PHONE depuis le Burger, qu'en DESK */
    color:               darkcyan;
}
#accesfb2{                                          /* accès FB en mode DESK */
    display:            none;                       /* en mode phone le lien vers FB est sur la même ligne que le menu burger */
    flex-direction:     row;
}
#accesfb1 p, #accesfb2 p{                           /* accès FB en mode DESK et en mode PHONE */
    color:              darkcyan;
}
#accesfb1{
    display:            flex;                       /* en mode phone le lien vers FB est sur la même ligne que le menu burger */
    flex-direction:     row;
    align-items:        center;

}
/*----------------------------------------------------------------------- main --------------------------------------------------------------------------------------*/
main{
    flex-direction:     column;
}
/*--------------------------------------------- pour les images et les vidéos ---------------------------------------------*/
.arrondi img, .arrondi iframe{    
    width:              100%;
    border:             3px solid white;          /* bordurées de blanc (plus joli pour les supperpositions */
    border-radius:      15px;                       /* coins arrondis */
}
/*-------------------------------- partie présentation dans la page d'accueil ---------------------------*/
#presentation{
    width:              100%;
    height:             auto;
    display:            flex;
    flex-direction:     row;
    justify-content:    space-around;
    align-items:        flex-start;
    margin-top:         45px;
}
#presentation img{
    width:100%;
}
#presentation #pile img:last-child, #presentation #face img:nth-child(2){
    border:             3px solid white;          /* bordurées de blanc (plus joli pour les supperpositions */
    border-radius:      15px;                       /* coins arrondis */
    margin:             10px 0;                     /* les éloigner un peu des titres sur fond aquarelle */
}
#pile, #face, #milieu{                              /* la partie PRESENTATION de la page d'accueil est divisée en 3 parties, column en PHONE, row en DESK */
    height:             auto;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-evenly;
    align-items:        center;
}
#pile, #face{
    width:              100%;
}
#milieu{                                            /* taille de la photo "visage couturé"*/
    width:              70%;
}
#milieu button{                                     /* bouton lien vers la page de présentation */
    margin:             10% 0 0 0;                  /* décoller de la photo au dessus */
}
/*-------------------------------- partie explorations techniques ---------------------------*/

#aufil{                         /* disposition en colonnes */
    width:              100%;
    display:            flex;
    flex-direction:     column;
}
#aufil>img:first-child{         /* espacer le titre (image titre "au fil de mes explorations") et le texte */
    margin:             30px 0;
}
#explo_photos{                  /* trois blocs  en colonnes, composés de 2 photos ou une photo et du texte, en ligne */
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    align-items:        center;
    margin-top:         30px;
}
#explo_photos>div{              /* mise en ligne des 2 éléments de chaque div (2 photos, ou une photo et le texte) */
    width:              100%;
    display:            flex;
    flex-direction:     row;
    justify-content:    space-around;
    align-items:        center;
}
.texte p{                       /* espacement des phrases dans le texte introductif */
    padding:            3px;
}
#explo_photos>div:nth-child(4){     /* pour remonter un peu le dernier bloc, les zones transparentes se chevauchent et harmonisent la composition */
    align-items:        flex-end;
   /* margin-top:         -10%; */
}
#explo_photos div:nth-child(2) img,#explo_photos div:last-child img:last-child{   /* certaines images pivotent de façon à créer une présentation dynamique moins rigide */
    transform:          rotate(-30deg);
}
#explo_photos div:nth-child(2) img{
    align-self:         flex-start;     /* remonte l'image 3 sur l'image 1*/
}
#explo_photos div img{          /* les images prennent une petite moitié de la largeur d'écran */
    width               :40%;
}
#explo_photos div:first-child img:last-child{
    width:              55%;    /* la photo du papillon MONARQUE prend plus de la moitié de la largeur, pour la mettre en valeur et aussi aligner sa hauteur avec 
                                l'image de gauche qui est carrée */
}
#explo_photos div:nth-child(3){
    margin-top:-15%;
}
#explo_photos div:nth-child(4) img{         /* travail sur la disposition des images */
    width:              30%;    
}
#explo_photos div:last-child img:first-child{   /* travail sur la disposition des images */
    width:              35%;
}
#explo_photos div:last-child img:last-child{    /* travail sur la disposition des images */
    width:              25%;
    margin-top:         -25%;
    margin-left:        -50%;
}
#explo_photos div ul{
    padding-left:       20px;       /* cadrage des listes de compétences */
}
#explo_photos div ul li{
    list-style:         none;       /* au départ on avait prévu des liste avec puce de type "circle", mais l'équilibre est plus joli et plus pro sans puces */
    padding:            5px 0px;    /* espacement de chaque compétence pour casser l'effet de bloc */
}
#explo_photos div ul:last-of-type{
    padding-bottom:     15px;
}
#explo_photos button{               /***** à voir, semble ne pas servir ni en phone ni en desktop *****/
    margin-top:         -20%;
}
/*-------------------------------- partie galerie --------------------------*/
#galerie{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between; 
    align-items:        center;
    margin-top:         40px;
}
#galerie img{
    width:              100%;
}
#acc_gal_entete{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    align-items:        center;
}
#acc_gal_entete>div a{
    text-decoration:    underline;
}
#acc_gal_entete button{
    text-align:         center;
    align-self:         center;
}
#gal_photos{
    display:            flex;        
    flex-direction:     column;
    justify-items:      space-between;
    align-items:        flex-end; 
}
#gal_gauche, #gal_droite{
    width:              90%;
    display:            flex;        
    flex-direction:     row;
    justify-items:      space-around;
    align-items:        flex-start; 
}
#gal_photo img{
    width:              50%;
    margin:             15px;
}
#gal_photos h3{
    color:              darkcyan;
}
.carte a{
    text-decoration:    none;
}
/*-------------------------------- bloc "suivez-moi" ----------------*/
#acc_trait{
    width:              60%;
    border-top:         1px solid darkcyan;
    margin-top:         30px;
}

#suivez p{
    color:              darkslategrey; 
}
#suivez{
    display:            flex;
    flex-direction:     row;                
    align-items:        center;
    justify-content:    space-evenly;
}
#suivez_gauche{
    display:            flex;
    flex-direction:     column;                 /* passe en row en tablette 768  *****/               
    align-items:        center;
    justify-content:    space-around;
}
/*-------------------------------- footer ---------------------------*/
footer{
    flex-direction:     column;
    justify-content:    space-between;
    align-items:        center;
    margin:             10px 0;
}
.boutons{
    background-color:   darkcyan;
    border:             3px solid white;
    padding:            10px 5px;
    border-radius:      10px;
    display:            flex;
    justify-content:    space-around;
    align-items:        center;
    margin-left:        10px;
    color:              white;
}
#explo_photos .boutons{
    margin-top:         15px;
}
.desc_detail>.boutons{
    padding:            15px;
}
.boutons a{   
    background-color:   darkcyan;
    color :             white;
    text-decoration:    none;
}
#gal_general button{
    background-color:   rgb(242, 195, 190);
    border:             3px solid white;
    padding:            5px;
    border-radius:      10px;
    display:            flex;
    margin-left:        10px;
    color:              black;
}
#gal_general button a{   
    background-color:   rgb(242, 195, 190);
    color:              black;
    text-decoration:    none;
    font-weight:        bold;
    padding:            5px;
}

 /* page accueil, section "où adopter" */
#adopter{
    margin-top:         20px;
}
 #adopter, #acc_adopt>div, #acc_adopt, #text_adopt div{   
    width:              100%;
    display:            flex;   
    flex-direction:     column;     
    justify-items:      space-around;
    align-items:        center;
}  
#acc_adopt div:first-child{
    margin-top:      20px;                                         /* sépare le bloc "vente à l'atelier" du bas de page */
}
#acc_adopt div:last-child{
    margin-bottom:      35px;                                         /* sépare le bloc "vente à l'atelier" du bas de page */
}
#adopter>img{
    width:              100%;
}
#text_adopt div{       
    padding-bottom:     20px;
}
#text_adopt p{       
    line-height: 2rem;
}
#text_adopt div:first-child p:nth-child(2){
    font-size:          1.6rem;
}
#text_adopt :nth-child(2) p:last-child, #text_adopt div:first-child p:nth-child(2), #text_adopt :nth-child(3) p{
    font-weight:        bolder;
    color:              #3b5998;                                    /* couleur de FaceBook */
}
#text_adopt div:last-child p{
    font-style:         italic;
}

#acc_adopt div:first-child img,  #acc_adopt div:last-child img{
    width:              80%;
}

#reste{
    width:              100%;
    height:             auto;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}
#reste button{
    margin-bottom:     20px;
}
#cathy{
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}
#cathy p{
    color:              darkslategray;
    text-align:         center;
}
#mentions {
    margin-bottom:      15px;
}
#mentions a{
    text-decoration:    none;
    /*color:darkslategrey;    */
    color:          darkcyan;
}
footer span{
    font-weight:    bolder;
    font-size:      larger;
}
/* enlevé pour prendre toute la largeur du bloc
#faq{
    align-self:     flex-start;
}*/
.desk{
    display:        none;
}
.tabl700{
    display:        none;
}
.up{
    width:          10%;
    height:         auto;
    align-self:     flex-end;
    margin-top:     10px;
}

/*------------------------ fin du MOBILE FIRST ----------------------------------------*/


/*--------------------------- adapations digfférents screens (responsive) --------------*/

/****************************************************************************************/
/*      adaptations breakpoints personnalisés  PHONE    (avant 576px)                   */
/****************************************************************************************/
@media screen and (min-width:450px) { 
    #explo_photos div:nth-child(3){
        margin-top:0;                               /* la robe n'a plus besoin de remonter sur l'image 1 */
    }
   
}
/****************************************************************************************/
/*      adaptations breakpoints Fablet                                                  */
/****************************************************************************************/
@media screen and (min-width:576px) {
    main p,main li,button{
        font-size:      0.9rem;
    }  

    h2{
        font-size:      1.3rem;
    }



}
/****************************************************************************************/
/*      adaptations breakpoints spécifique pour photos de 600px de large                */   /***** voir images robes à mettre en 700px *****/
/****************************************************************************************/
@media screen and (min-width:600px) {
    .tabl700{
        display:        flex;
    }

}
/****************************************************************************************/
/*      adaptations breakpoints Tablet                                                  */
/****************************************************************************************/
@media screen and (min-width:768px) {
    #suivez_gauche{
        flex-direction:     row;
    }
    main p,main li,button{
        font-size:          1rem;
    } 
    h2{
        font-size:          1.4rem;
    } 
    /* page accueil, section galerie */
    #acc_gal_entete{
        justify-content:    space-between;
        align-items:        flex-end;
        margin-right:       30px;
    }
    #acc_gal_entete div{
        margin-top:         -30px;
    }
    /* page accueil, section "adopter" */
    
   
}
/****************************************************************************************/
/*      adaptations breakpoints  Desktop                                                */
/****************************************************************************************/
@media screen and (min-width:992px) {
    header .nav{                                        /* la barre de menu étendue revient en row */
        flex-direction:     row !important;             /* necessité du IMPORTANT car on surcharge la classe Bootstrap */
    }
    #suivez_gauche{
        width:              70%;
    }
    #accesfb1{
        display:            none;                       /* en mode phone le lien vers FB est sur la même ligne que le menu burger */
    }
    #accesfb2{
        display:            flex;                        /* en mode desk le lien vers FB est seul sur la ligne */
    }
    main p,main li,button{
        font-size:          1.1rem;
    }  
    h2{
        font-size:          1.5rem;
    }
    .desk,#grand{
        display:            flex;
    }
    .phone,#petit{
        display:            none !important;
    }
    /* page accueil, section presentation */
    #pile, #face{
        width:              40%;
    }
    #milieu{
        width:              30%;
    }
    /* page accueil, section exploration */
    #explo_photos{
        flex-direction:     row;
    }
    #explo_photos div{
        width:              100%;
        flex-direction:     column;
        align-items:        flex-start;
    }
    #explo_photos>div img{
        width:              100%;
    }
    #explo_photos div:nth-child(2) ul{
        padding-top:        20%;
        padding-left:       40px;
    }
    #explo_photos div:nth-child(4) ul{
        padding-left:       40px;
    }
    #explo_photos div:first-child img:last-child{
        width:              100%;
    }
    #explo_photos div:last-child img:last-child{
        width:              60%;
        margin-left:        -20%;
    }
    #explo_photos div:last-child img:first-child, #explo_photos div:nth-child(4) img{
        width:              80%;
    }
    #explo_photos div:nth-child(4) img{
        margin-left:        20px;
    }
    #explo_photos button{
        margin-top:         0;
        align-self:         center;
    }
    #explo_photos div:nth-child(4){
        margin-top:         0;
    }
    #explo_photos div:nth-child(2){
        margin-top:         5%;
    }
    #gal_photos{   
        flex-direction:     row;
    }
    #gal_gauche{
        display:            flex;        
        flex-direction:     row;
        justify-items:      space-between;
        align-items:        flex-end;
        margin-top:         -50px;         /* remonter le bloc photos pour réduire l'espace avec le bouton et les liens vers les albums photo blog et FB */
    }
    #gal_droite{
        display:            flex;
        flex-direction:     row;
        justify-items:      space-between;
        align-items:        flex-end;
    }
    /* page accueil, section "où adopter" */
  
    #acc_adopt{     
        display:            flex;  
        flex-direction:     row;                         
    }
    #acc_ad1{                               /* en mode PHONE, l'affiche "je ne prends pas de commande" vient en seconde position. En mode DESKTOP, il est sur la gauche */
        order:              -1;
    }
    #acc_trait{
        display:            none;
    }
    #text_adopt div{       
        padding-bottom:     30px;
    }
    .desc_detail>.boutons{
        font-size:1.2rem !important;
    }

}
/****************************************************************************************/
/*      adaptations breakpoints   personnalisé                                       */
/****************************************************************************************/
@media screen and (min-width:1100px) {
    #acc_gal_entete button{
        width:              19%;
    }

}
/****************************************************************************************/
/*      adaptations breakpoints   large Desktop                                         */
/****************************************************************************************/
@media screen and (min-width:1200px) {
    #suivez_gauche{
        width:              55%;
    }
    main p,main li,button{
        font-size:          1.2rem;
    }  
    h2{
        font-size:          1.6rem;
    }
}


/*--------------------------------------------------------------------------------*/
/*------------------------------------ pages secondaires -------------------------*/
/*--------------------------------------------------------------------------------*/
/*-------------------------Présentation faisons connaissance----------------------*/
#page_pres{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}
#page_pres p{
    padding:            5px 10px;
    text-align:         justify;
}
#mit{
    width:              50%;
}
#pres_p2{
    width:              100%;
    display:            flex;
    justify-content:    space-around;
    align-items:        center;  
    flex-direction:     column;     
}
#page_pres img{
    margin:             15px 0;
}
@media screen and (min-width:992px) {
        #pres_p4{
            display:            none;
        }
        #pres_p1, #pres_p2,#pres_p3,#pres_p5,#pres_p6,#pres_p7,#pres_p8{
            width:              100%;
            display:            flex;
            justify-content:    space-around;
            align-items:        center;   
        }
        #pres_p1, #pres_p2,#pres_p3,#pres_p6,#pres_p7,#pres_p8{
            flex-direction:     row;
        }
        #pres_p5{
            flex-direction:     column; 
        }
        #pres_p2 img:nth-of-type(3){
            width:              20%;
            margin:             100px 20px 0 0;
            
        }
        #pres_p2 img:nth-of-type(4){
            margin-top:         -10%;
        }
        #pres_p3 img{
            transform:          rotate(-20deg);
            margin-top:         -8%;
        }
        #pres_p3 img:nth-of-type(2){
            width:              35%;
        }
        #pres_p5_photos{
            width:              100%;
            display:            flex;
            flex-direction:     row;
            align-items:        center;  
        }
        #pres_p6 div:first-child img:nth-of-type(2){
            width:              100%;
        }
        #pres_p6 div:last-child img:nth-of-type(2){
            width:              54%;
            margin-left:20%;
        }
        /* #pres_p6, #pres_p7{
            flex-direction:     row-reverse;
        }
                                                                devient inutile ave  2 photos  (avant c'etait texte et photo 
                                                                inversées selon smartphone ou desktop*/
        #pres_p6 div,#pres_p7 div{
            width:              100%;
        }
        #pres_p8 div{
            width:              100%;
            margin-top         :30px;
        }
        #pres_p7_photos{
            width:              100%;
            display:            flex;
            flex-direction:     row;
            align-items:        center;  
        }
        #pres_p8 p{
            color :             grey;
            font-style:         italic;

        }
}
/*------------------------- Le processus créatif----------------------*/
 #processus h2{
    margin-top:             10px;

    padding:                20px 0 5px 15px;
    color:                  black;
    text-shadow:            3px 5px lightgray;
 }
 #processus p{
    padding:                 0 40px; 
    text-align:             justify;
 }
 #processus span{
    font-weight:            bold;
 }
 #page_pres span{
    font-weight:            bold;
 }
 #processus p:first-child{
    font-style:             italic;
    color:                  gray;
 }
 #processus p:last-child{
    font-style:             italic;
    color:                  gray;
    padding-top:            50px;
 }
 /*------------------------- Les techniques----------------------*/
#tech_general{
    width:                  100%;
    display:                flex;
    flex-direction:         column;
    justify-content:        space_between;
    align-items:            center;
}
#tech_aside{
    width:                  100%;
    display:                flex;
    flex-direction:         column;
    justify-content:        space_between;
    align-items:            center;
}
#tech_p1,#tech_p2,#tech_p3,#tech_p4 {
    width:                  80%;
    display:                flex;
    flex-direction:         column;
    justify-content:        space-between;
    align-items:            center;
    margin-top:             15px;
    text-align:             left;
}
#tech_p2 img, #tech_p3 img{
    margin-bottom:          15px;
}
#tech_p4{
    padding:                20px 0;
    border-top:             1px solid darkslategray;
    border-bottom:          1px solid darkslategray;
}
#tech_p4_img {
    flex-direction:         column;
}
#tech_aside img{
width:                      100%;
}
#tech_aside {
    padding:                0 10px;
    text-align:             center;
}
h5{
    font-weight:            1.4rem;
}
#tech_p5,#tech_p6,#tech_p7,#tech_p8,#tech_p9,#tech_p10,#tech_p11,#tech_p12,#tech_p13,#tech_p14{
    width:                  100%;
    display:                flex;
    flex-direction:         column;    
    justify-content:        space-around;
    align-items:            center;
    margin-bottom:          40px;
}
.texte_carte{
    padding:                15px 0;
    text-align:             center;
}
#tech_p5 img,#tech_p6 img,#tech_p7 img,#tech_p7 img,#tech_p9 img,#tech_p10 img,#tech_p11 img,#tech_p12 img#tech_p13 iframe,#tech_p14 iframe{
    width:                  100%;
    margin:                 5px 0;
}
 @media screen and (min-width:992px) {
    #tech_general{
        flex-direction:     row;
        align-items:        flex-start;
     }
    #tech_aside{
        width:              25%;
    }
    #tech_aside img{
        margin-top:         30px;
    }
 
    #tech_section{
        width:              100%;
        border-left:        1px solid darkcyan;
    }
    #tech_p5,#tech_p6,#tech_p7,#tech_p8,#tech_p9,#tech_p10,#tech_p11,#tech_p12,#tech_p13,#tech_p14{
        width:              95%;
        margin-left:        30px;
        flex-direction:     row; 
        align-items:        flex-start;  
    } 
    #tech_p9{
        align-items:        flex-end;
        margin-top:         -70px;
    }
    #tech_p9 div:nth-of-type(2) img, #tech_p7 div:nth-of-type(2) img,
    #tech_p11 div:nth-of-type(3) img{
        transform:          rotate(-15deg);
    }
    #tech_p7 div:nth-of-type(3) img,#tech_p9 div:nth-of-type(3) img{
        transform:          rotate(0.01deg);                 /* permet à l'image 3 de passer au dessus de la 2ème */
    }
    #tech_p9 div:nth-of-type(2) h3,#tech_p11 div:nth-of-type(3) h3{
        text-align:         right;
    }
    #tech_p7 div:nth-of-type(2) img{
        margin-top:         -20px;
        margin-bottom:      30px;
    }
    #tech_p6 div:nth-of-type(3) img,#tech_p10 div:nth-of-type(1) img{
        transform:          rotate(15deg);
        margin-bottom:      30px;
    }
    #tech_p6 div:nth-of-type(3) h3{
        text-align:         left;
        margin-top:         -20px;
    }
}
 /*------------------------- La galerie----------------------*/
#gal_general{
    width:              100%;
    display:            flex;
    flex-direction:     column;    
    justify-content:    space-around;
    align-items:        center;
}
#gal_p5,#gal_p6,#gal_p7,#gal_p8,#gal_p9{
    width:              100%;
    display:            flex;
    flex-direction:     column;    
    justify-content:    space-around;
    align-items:        center;

}
#gal_p5 img,#gal_p6 img,#gal_p7 img,#gal_p8 img,#gal_p9 img{
    width:              80%;
    margin:             5px 0;
}
.carte{
    width:              100%;
    display:            flex;
    flex-direction:     column;    
    justify-content:    space-around;
    align-items:        center;
    margin:             15px;
}
.carte a{
    width:              100%;
    display:            flex;
    flex-direction:     column;    
    justify-content:    space-around;
    align-items:        center;
}
.gal_illustrp{
    display:            flex;
    flex-direction:     row; 
    justify-content:    space-between;
    align-items:        center;
}
.gal_illustrp img{
    width:              100%;
}
/*--------------- structure verticale de la galerie -------------------------------*/
.boutons_galerie{
    align-self:         0  flex-start;
    margin:             0 0 15px;
}
.offcanvas-header h5{
    font-style:         italic;
}
h6{
    color:              darkcyan;
    font-weight:        bold;
    padding:            10px 0;
}
h7{
    color:              salmon;
    font-weight:        bold;
    margin-left:        10px;
    line-height: 1.6rem;;
    text-decoration:    none;
}
.offcanvas {
        width:          260px !important;     /* réduire la largeur de "se repérer dans la galerie IMPORTANT car on surcharge une classe Bootstrap */
}
.offcanvas-body ul{
    margin-left:        20px;
}
.offcanvas-body ul li{
    list-style:         none;
    margin-left:        20px;
    color:              black;
    font-size:          smaller;
    line-height: 1.5rem;
}
.gal_famille a{
    text-decoration:    none;
}
.gal_famille{
    margin-bottom:      10px;
}
.gal_type{
    margin-top:         0;
}
.tit_gal{
    margin-top:         -40px;  /***** voir si fonctionne car "tait mal syntaxé. j'ai corrigé mais il faudra voir l'impact *****/
}
#gal_section .texte_carte{
    margin-top:         -40px;
}
/*----------------------------------------------------adaptations -----------------*/
@media screen and (min-width:992px) {
    #gal_general{
        width:              100%;
        display:            flex;
        flex-direction:     row;
        align-items:        flex-start;
     }
    #gal_section{
        width:              100%;
        display:            flex;
        flex-direction:     column;
        align-items:        center;
    }
    #gal_p5,#gal_p6,#gal_p7,#gal_p8,#gal_p9{
        width:              95%;
        margin-left:        30px;
        flex-direction:     row; 
        align-items:        flex-start;  
    } 
    .gal_illustrp{
        display:            none;
    }

    #gal_illustr{
        display:            flex;
        flex-direction:     row-reverse;             /* pour que les cartes soient bien empilées, les dernières dessous */
        justify-content:    space-between;
        align-items:        flex-start;
    }
    #gal_illustr a:first-child{
        width:              15%;
        margin-top:         50px;
        margin-left:        -5px;
    }
    #gal_illustr a:nth-child(2){
        width:              15%;
        margin-left:        -20px;
        margin-top:         50px;
    }
    #gal_illustr a:nth-child(3){
        width:              15%;
        margin-top:         50px;
    }
    #gal_illustr a:nth-child(4){
        width:              20%;
        margin-top:         50px;
    }
    #gal_illustr a:nth-child(5){
        width:              25%;
        margin-left:        -30px;
    }
    #gal_illustr a:last-child{
        width:              30%;
    }
    #gal_illustr a:first-child img{
        transform:          rotate(-25deg);
    }
    #gal_illustr a:nth-child(2) img{
        transform:          rotate(-15deg);
    }
    #gal_illustr a:nth-child(3) img{
        transform:          rotate(-10deg);
    }
    #gal_illustr a:nth-child(4) img{
        transform:          rotate(15deg);
    }
    #gal_illustr a:nth-child(5) img{
        transform:          rotate(8deg);
        margin-top:         30px;
    }
    #gal_illustr a:last-child img{
        transform:          rotate(-15deg);
    }
    .boutons_galerie_princ{                 
        margin:             -15px 0 0 15px;
    }
    .tit_gal{
        margin-top:         -0px ;
    }
    #gal_p6 .card-img-top{
        width:              60%;
    }
    #gal_p6 .carte:first-child{
        margin-left:        10%;
    }
    #gal_p6 .carte:last-child{
        margin-right:       10%;
    }
    #gal_p7 .carte:nth-child(2){                            /* remonter l'image "trousses" vers le haut, seulement pour la page générale de la
                                                                galerie  (...) */
        margin-top:         -8%;
    }
    #gal_p7 .carte:nth-child(2).sans{                       /* (...) mais pas pour la page "accessoires" de la galerie */
        margin-top:         0;
    }
    #gal_p8 .carte:first-child{
        width:              100%;
        margin-left:        10%;
    }
    #gal_p8 .carte:nth-child(2){
        width:              100%;
    }

    .ligne_fil_gal{
        margin-top:         -40px;
    }
 .position{
        margin-top:         -25px;
        padding:            20px;
    }
}

/*------------------------- les pages secondaires de la galerie ----------------------*/
.mep_px{
    width:                  100%;
    display:                flex;
    flex-direction:         column;
    justify-content:        space-between;
    align-items:            center;
}
.nom_bloc{
    font-size:              larger;
    font-family:            'Shadows Into Light Two', cursive;
    display:                flex;
    justify-content:        space-around;
    font-size:               3rem;

}
#rob_section p, #dec_section p, #zoo_section p{
    padding:                0 15px;
}
.type_crea{
    width:                  100%;
}
.mep_px .type_crea{
    margin-top:             30px;
}
.type_crea h3{
    background-color:       rgb(248, 230, 228);
    line-height:            200%;
    border-top:             1px solid rgb(219, 202, 202);
    border-bottom:          4px solid rgb(219, 202, 202);
}
.photos_crea, .photos_crea_ill{
    width:                  100%;
    display:                flex;
    flex-direction:         row;
    justify-content:        space-between;
    align-items:            center;
    margin:                 50px 0;
}
.desc_detail{
    display:                flex;
    flex-direction:         row;
    justify-content:        flex-end;
    margin-right:           5px;
    color:                  darkslategray;
}

.desc_detail .boutons{
    background-color:       rgb(242, 195, 190);
    color:                  darkslategray;
    font-size:              smaller;
    font-style:             italic;
    margin-top:             -15px;
}
.modal-header{
    background-color:       rgb(248, 230, 228);
    color:                  black;
    font-style:             italic;
}
.modal-body ul, .modal-body p{
    list-style:             circle;
    padding-left:           10px;
    font-style:             italic;
}
.modal-body a{
    text-decoration:        none;
}





/* adaptations -------------------------------------------*/

@media screen and (min-width:700px) {        /* faire apparaître les deux photos fixes */ 
    .photos_crea>img{
        width:                  30%;
        border-radius:          60%;
        border:                  0.5px solid darkslategray;
        padding:                5px;
        margin:                 10px;
    }
    #rob_section .photos_crea>img{
        width:                  26%;
    }
    .carousel-inner{
        border:                 0.5px solid darkslategray;
        border-radius:          15px;
    }
    .nom_bloc{
        font-size:               3rem;
    }
}

/*------------------------- contacts ----------------------*/
#contacts{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}

/*------------------------- actualité ----------------------*/
#page_actu{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}
#pave_actu{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
    margin-top :        30px;
    padding:            10px;
    background-color:   antiquewhite;
    border-radius:      15px;
}
#contenu_pave{
    width:              100%;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    align-items:        center;
}
#page_actu p{
    padding:            5px 10px;
    text-align:         justify;
}#page_actu H2{
    padding:            5px 10px;
    text-align:         justify;
    align-self:         flex-start;
    color:cadetblue;
}
#actu_gauche{
    display:            flex;
    justify-content:    space-around;
    align-items:        center;  
    flex-direction:     column;  
    margin:             0  5%  ;
}
#actu_droite{
    display:            flex;
    justify-content:    flex-start;
    align-items:        flex-start;  
    flex-direction:     column;  
    margin:             0  5%  ;   
}
#actu_centre p{
    text-align:         center;
    font-size:          1.5em;
    margin:             20px 0;
}
.conteneur_defilant{
    display:            flex;
    align-items:        flex-start;
    justify-content:    left;
    border:             10px solid F0F0FF;
    overflow:           hidden;
    box-shadow:         0.25em .5em #CCC, inset 0 0 1em .25em #CCC;
    margin:             10px;
}
.texte_defilant{
    white-space:        nowrap;
    animation:          defilement-rtl 10s infinite linear;
    margin:             10px;
    color:              blueviolet;
    text-align:         left;
}
@keyframes defilement-rtl{
    0%{
        transform:     translate3d(100%,0,0);       /* position intiale à droite */
    }
    100%{
        transform:     translate3d(-100%,0,0)    /* position finale à gauche */
    }
}
/* fonctionne en test et pas en prod : conteneur-_defilant_phone avec texte court, et conteneur_defilant_desk avec texte long
.conteneur_defilant_desk{
    display:none;
} */


/* adaptations -------------------------------------------*/

@media screen and (min-width:700px) {        /* xxxxxxxx */ 
    #page_actu{
        flex-direction:     column;
    }
    #pave_actu{
        flex-direction:     column;
    }
    #contenu_pave{
        flex-direction:     raw;
    }
    #actu_gauche{
        width:              30%;
    }
    #actu_droite{
        width:              25%;   
    }
    #actu_centre p{
        font-size: 0.9em;
    }
}

@media screen and (min-width:992px) {        /* xxxxxxxx */ 
    #page_actu{
        flex-direction:     column;
    }
    #pave_actu{
        flex-direction:     column;
    }
    #contenu_pave{
        flex-direction:     row;
    }
        #actu_gauche{
            width:              25%;
        }
        #actu_droite{
            width:              25%;   
        }
        #actu_centre p{
            font-size: 1em;
        }
        /* fonctionne en test mais pas en prod *****
        .conteneur_defilant_desk{
            display:inline;
        }
        .texte_defilant_desk{
            white-space:        nowrap;
            animation:          defilement-rtl 15s infinite linear;
            margin:             10px;
            color:              red;
        }
        @keyframes defilement-rtl{
            0%{
                transform:     translate3d(70%,0,0);      
            }
            100%{
                transform:     translate3d(-100%,0,0)   
            }
        }
        .conteneur_defilant_phone{
            display:none;
        } */

    }

/*------------------------------- FAQ -----------------------*/

.accordion-button, .accordion h2{
    color:              darkslategrey;
    margin:             10px 0;
}
.accordion-collapse ul{
    list-style:         none;
    padding-left:       40px;
}
.accordion-collapse ul li{
    font-size:          1rem;
}
#faq h3{
    color:              black;
    text-shadow:        3px 5px lightgray;
    margin:             20px 0;
}
#faq h3:not(:first-child){
    margin-top:         40px;
}
/***** à remettre au niveau du main : *****/

.lien_inactif a{
    text-decoration:    none;
}

#fil ol a{                 
    color:              darkcyan;
    font-style:         italic;
}
#fil ol {                 
    margin-left:        30px;
}
#fil .active{
    background-color:   white !important;
}
.accordion-body img{
    width:              100%; 
}
.accordion-body{
    font-size:          medium;
}
#ligne_fil{
    width:              100%;
    display:            flex;
    flex-direction:     row;
    justify-content:    space-between;
    align-items:        center;
}
#fil{
    width:              100%;
}
.accordion-button:not(.collapsed){
    background-color:   rgb(221, 243, 243);
    color:              darkcyan;
}

/* par inspecter, vu que la variable est "--bs-accordion-btn-focus-box-shadow" sur la classe .accordion */
.accordion-button:focus{
    box-shadow:         0 0 5px darkcyan !important;
}

.carousel-control-prev, .carousel-control-next{
    /* background-color:rgb(121, 146, 146); darkcyan plus clair */
    background-color:   darkslategray;
    width:              30px !important;
    border-radius:      15px;
    height:             8%;
    margin-top:         45%;
    opacity:            0.5;
    border:             0.25px solid white;
}


/* mentions légales*/
   #men_section{
    width:              100%;
    background-image:   url(../img/mentions_f2.jpg);
    background-size:    contain;
    padding-top:        50px;

   }
        
   #men_section>h2:first-child{
    background-color:       rgb(88, 67, 52);
    color:                  chartreuse;
    box-shadow:             4px 4px      rgb(240, 142, 235);
    border:                 1px solid   rgb(210, 252, 168);
    border-radius:          10px;
    line-height:            200%;
    padding:                10px;
    opacity:                0.7;
    font-style:             normal;
 
    }
    #men_section h2{
        background-color:   rgb(210, 252, 168); 
        color:              rgb(85, 50, 25);
        font-style:         italic;
        text-align:         center;
        margin:             20px;
        border:             1px solid darkcyan;
        line-height:        30px;
        box-shadow:         4px 4px  rgb(240, 198, 238);
        border-radius:      10px;
        line-height:        200%;
        opacity:            0.7;
    }     

    #men_section h3{
        text-align:         left;
        margin-top:         10px;
        padding-left:       15px;
        box-shadow:         -2px 2px 2px rgb(210, 252, 168);
    
    }
    #men_section p{
        padding-left:       20px;
    }
    #men_section span{
        color :             red;
        background-color:   rgb(255, 252, 77);
    }
    #men_section h4{
        text-align:         center;
        font-weight:        bold;
        font-size:          1.6rem
    }

    @media screen and (min-width:700px) {  
        #men_section>h2:first-child{
            margin:         0 50px;
        }
    }
    @media screen and (min-width:992px) {  
        #men_section>h2:first-child{
            margin:         0 120px;
        }
    }
    @media screen and (min-width:1200px) {  
        #men_section>h2:first-child{
            margin:         0 150px;
        }
    }

#saa_section a{
    color:                  darkcyan;
}

/***** mise à jour avant examen : à reporter à un niveau logique une fois le site re-testé *****/
.modal-body>p:first-child{
    margin-bottom:15px;
}
.modal-body ul li{
    margin-left:30px;
}