:root { /* ici DECLARATION d'une ou +sieurs variables en CSS toujours avec :root {}  */

          --fonce: black;/*on la rappellera + tard au dessous*/
          --hauteur:50px;/*on la rappellera + tard au dessous*/


          }

       
header.container-fluid { /* ici selecteur de +sieurs class en css
           /*width: 100%;*/
            min-height: var(--hauteur);
            background-color: var(--fonce);
            padding-left: var(--bs-gutter-x,.0rem);/* affecter une variable en css*/
            padding-right: var(--bs-gutter-x,.0rem);
            }/* background: pink;équivaut a bg-color: pink;     
            et 7 px correspondent à 75rem*/



.logo{width: 15%;}  

main{background:pink;}

            
article{min-height: 400px;}   
.textcentr{text-align: center;}
.divbleue{
      width: 318px;
      text-transform: uppercase;
      margin-top: 150px;
      margin-left: 0px;}
.degrade-diagonal {
  background: linear-gradient(to bottom right, blue, pink);
}
    


main > section:first-child > article:first-child {
                            background: lightcoral;/* agit ac selecteur de class sur les artciles enfant de la section on ajoute de parent a childs */
                            padding-left: 0;
                            padding-right: 0;
}
                            main > section:first-child > article:nth-child(2) {/* second enfant */
                            background:linear-gradient(to bottom right, turquoise, transparent);
                            transform:rotateX(30deg) rotateY(15deg);
                        
}
main > section:first-child > article:last-child {
                      background:linear-gradient(to bottom, rgb(252, 205, 104), transparent);
                            

}

/* @media screen and (max-width: 576px){  pour cacher le diaporama en version mobile: 
    section#carrousel{display: none;}
    main > section:first-child > article:first-child {background: black;}
    p{font-size:50px;}
}*/
article > header{  min-height:20px;
                   background: rgb(252, 82, 243);
                   text-align:center;
                   font-family: sans-serif;
                    }

article > p/*, artcile > figure > figcaption*/{padding: 0  15px;} 
/*figure > figcaption{text-align: center;margin: 10px 0;color: rgb(201, 47, 124);}*/


article > figure { width: 60%;
                  margin: auto;
                  overflow: hidden;
                  height: 400px;
                  border-bottom-left-radius: 50px;
                  border-top-right-radius: 50px;    /* CF pour faire des formes:on copy le code en bas du dessin online du site
                                                      précodés d'éléments de type shape! https://bennettfeely.com/clippy/  
                                                      on a fait une bulle de dialogue ici par exemple:
                                                      
                  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 51% 61%, 0 60%);*/ 
                  position: relative;} /*overflow hidden est l'équivalent du masque d'écrétage */ 

figure > figcaption {/* on va ici cacher la légende du texte au survol de figure ou y l'img */
                    width: 100%;
                    height: 150px;
                    background: rgba(238, 129, 189, 0.6);
                    position:absolute;/* il se cale par defaut en haut gauche du parent "figure" qui est en position relative*/
                    top: 400px;  /*équivaut à margin-top*/ 
                    left: 0px;
                    text-align: center;
                    padding-top: 20px;
                    transition: top 1s;
}  
figure:hover figcaption{top: 0;}


#div2{ margin-top: 10px; margin-left:3px;}

article > footer { min-height: 20px;
                    background: black ;
                    color: white;
                    text-align: center;}     
 article > footer > a  {  text-decoration: none;color: blueviolet;}  
 
 figure > img { filter: grayscale(1);/* on ajoute un filtre N-Blanc a l'image*/
    transition:1s;
    cursor:pointer/* les filtres grayscale &  sepia fonctionnent de façon binaire seulement 
    d'autres filtres comme blur fonctionne en px ou en pourcentage */
}
 .border {
    
    border-style: ridge;
    box-sizing:border box content-box 100% ;
  
width: 80%;
        }
 figure > img:hover {filter:grayscale(0);}/* ce filter s'enlève au hover*/

/* on a fait ici un zoom sur l'img ds la balise article exemple d'autre filtre qui
 fonctionne pas en binaire:


 article > figure{ width: 80%;
    margin: auto;
    overflow: hidden; 
}

figure > img { transform: scale(1); 
    transition: 1s;
    cursor: pointer;
}
figure > img:hover{ transform: scale(1.5);}

*/



            
            /* les selecteurs CSS + approfondi donné pour les articles avant    :      
            main>section:first-child {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                min-height: 20px;
                background: grey;
            }
            
            section:first-child > article{ 
                height: 200px;
                min-width: 320px;}
            
            section:first-child > article:first-child{background: pink; flex: 1;}
            section:first-child > article:nth-child(2){background:blue; flex: 4;}
            section:first-child > article:last-child{background: green; flex: 2;}

            aside + div{ 
                width: 200px;
                height:20px;
                background: black;
            }*/



/* ------------------------------------------------------------------ Container DERNIER ACORDEoN */
.dernierement {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.textcentr {
    text-align: center;
}
/* Items */
.dernierement .item {
    flex: 1 1 calc(33.333% - 20px);
    overflow: hidden;
    border-radius:2px;;  
    object-fit: cover; 
    display: block;
}
/* VERSION MOBILE */
@media (max-width: 768px) {
    .dernierement {
        flex-direction: column;  /* empile les items */
    }

    .dernierement .item {
        flex: 1 1 100%;          /* prennent toute la largeur */
        height: 180px;           /* hauteur adaptée mobile */
    }
}
/* Images */

/*c'est de la merde chatgpt code.dernierement .item {
    width: 100%;
    aspect-ratio : 4/3; /* ou 1/1 si tu veux carré 
    overflow: hidden;
}

.dernierement .item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 🔥 clé du problème 
    display: block;
}
.dernierement img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dernierement .item {
    width: 100%;
    aspect-ratio: 4/3; /* ou 1/1 si tu veux carré 
    overflow: hidden;
}
.dernierement img {
    width: 100%;
    display: block;
}
.dernierement {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}  FIN DE CHAT GPT CODE*/

               /* pour s'exercer :
              https://flukeout.github.io/
            
            
            https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048
            
            cf cube3D en html ou css ds codepen.io aussi ..
            */
            /* MODAL:*/
            .alert{
                position:fixed;
                background: linear-gradient(to bottom left, violet, transparent);
                top:10%;
                left:30%;
                height:47vh;
                width: 41%;
                z-index: 7;
                color:white;
                font-size: 15px;
                text-align: right;
                border:none;
                clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

            }
            .cm{size:50%;
              text-align:center;
              position: relative;
}            #cm{
             display: flex;
             justify-content: center;
}
            .btn-close{
               /*background: url(assets/img/cross.png) 0 30 px no-repeat;  si on veut changer la croix*/
               color: rgb(fff, fff, 172);/*bg color car la class donnée par Boot est déja précodée avec une svg */
               background-position: 1 1px; /*abcisse et coordonnées x et y cf notes cahier*/
               background-size: 10px;
            }
            p#phone{
                color: #fd0d99;
                text-align: center;
            }
            p#phone > a > span::before{
                content: '06 00 00 00 07';
                color: white;
                font-size: 15px;
            }
            
            p#phone > a {text-decoration: none;}

            .mouse{ width: 30px;
                margin: auto;
                min-height: 50px;
                position: relative}
                
                 .souris{ 
                position: absolute;/*a class indique que sa position prend en compte .mouse*/
                text-decoration: none;
                color: white}
                
                 .souris span{ 
                position: absolute;
                top: 0;
                left: 0;
                width: 30px;
                height: 50px;
                border: 2px solid white;
                border-radius:50px
                }
                
                .souris span::before{/*definit la bille de la souris*/
                position: absolute;
                top: 10px;
                left: 40%;
                content: '';/*car on va entrer la valeur qui est vide là*/
                width: 6px;
                height: 6px;
                background: white;
                border-radius: 50%;
                animation : phone 2s infinite ease-in-out; /* animation de la bille  ici lecture en 2 secondes continues*/
                /*animation : phone 2s 3; si on avait voulu que la bille face 3 fois haut en bas plutot qu'a l'infini*/
            }
/* ANIMATION de la bille  de la mouse du haut vers le bas: */
/*on crée des étapes KEYFRAMES */
@keyframes phone {
0%{ opacity: 0; transform: translate(0,0) ;       }


40%{opacity: 1;}/* valeurs de 0 à 1 pr l'opacity donc 0.1 puis 0.2 etc jusqu'a 1 */


80%{opacity: 0;transform: translate(0,20px) ; }


100%{}


}     /*c'est de la merde chatgpt code .card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
}*/