/* NAVBAR PLUS CLAIRE 

.navbar {

padding: 20px 60px;

}



/* LOGO */
.logo{width: 10%;}
.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
}




/* MENU ESPACÉ 
j'ai enlevé ce ette ligne: .navbar-brand img {

height: 60px;

}

.navbar-brand img {
  max-height: 60px;
  height: auto;
  width: auto;
}


.navbar-nav {

margin-left: auto; /* pousse le menu à droite 

}

.nav-link {

font-size: 1.1rem;

margin-left: 25px;

color: #222 !important;

transition: 0.2s;

}

.nav-link:hover {

color: #6C63FF !important;

}*/
html {
  scroll-behavior: smooth;
}

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



.logo{width: 15%;}  

main{background:pink;}


.services-section {
  background: #ffffff;
  padding: 60px 15px;/* réduit les marges */
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* important pour mobile */

}@media (max-width: 768px) {

 
  .services-container {
    padding: 0 15px;
  }

  .services-quote {
    max-width: 100%;
    padding: 0 10px;
  }


}

.services-title {
  text-align: center;
  margin-bottom: 30px;
}

.services-btn {
  border-radius: 20px;
  text-decoration: none;
  /* background: transparent;*/
   background-color: #fff3e8;
  border: 1px solid #000;
  padding: 12px 30px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.services-btn-link {
  color: #000;           /* ou la couleur de ton design */
  text-decoration: none;
}
.services-btn2 {
  display: inline-block;
  justify-content: center;
  border-radius: 20px;
  text-decoration: none;
  /* background: transparent;*/
  text-align: center;
   background-color: #fff3e8;
  border: 1px solid #000;
  padding: 10px 16px;
  margin-top:15px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.services-intro {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px auto;
  font-size: 32px;
  line-height: 1.5;
  font-style: italic;
  font-weight: 600;
  font-family: 'Playfair Display', serif;
}
/* GROS GUILLEMETS */
.services-intro::before {
  content: "“";
  position: absolute; 
  left: -20px;
  top: -30px;
  font-size: 80px;
  opacity: 0.2;
}
.services-intro::after {
  content: "”";
  position: absolute;
  right: -15px;
  bottom: -30px;
  font-size: 80px;
  opacity: 0.2;
}
@media (max-width: 768px) {
  .services-intro {
    font-size: 22px;
  }
   .quote::before {
    left: 0 !important;
  }

  .quote::after {
    right: 0 !important;
  }
  .quote::before,
  .quote::after {
    font-size: 40px; /* adapte */
  }
  .services-intro::before,
  .services-intro::after {
    font-size: 50px;
  }
}

.services-btn:hover {
  background: #000;
  color: #fff;
}



 .centrer {  text-align:center ;
               display: flex;
               justify-content: center;
              margin: 4px auto; /* 👈 centre horizontalement */}


  
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);
}
    
 .fondeg {
    background: linear-gradient(#fbb8a0, white);
    
  }

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;
}
.textleft {
    text-align: left;
}
/* 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) {
  /* logo+menu centré */
    .navbar .container,
  .navbar .container-fluid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 4. IMPORTANT : reset Bootstrap qui force à gauche */
  .navbar-header,
  .navbar > .container {
    width: 100%;
    text-align: center;
  }
  .navbar-brand {
    text-align: center;
    margin: 0 auto;
  }

  .navbar-toggler {
    text-align: center;
    align-items: center;
    margin-top: 4px; /* espace sous le logo */
  }


    .dernierement {
        flex-direction: column;  /* empile les items */
    }

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



 /* 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 de la page CONTACT:*/
            .alert{
                position:fixed;
                margin-top: 80px;
              margin-left:100px;
                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*/
            }
/* dans page contact 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);
}*/

.menukpubook {
  display: flex; 
  justify-content: center;/* Transformation en flexbox */
 display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* espace entre les projets */
    padding: 10px;
                /*    padding-left: 2%;  marges internes */
  background: linear-gradient(to bottom, #b04451, #D3D3D3);    /* Couleur d'arrière-plan */
  border-radius: 4px;           /* Arrondis des bordures */
  height:60px;
  width:1000px;
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* élégant et moderne */
     font-size: 18px;       /* lisible sur desktop */
    font-weight: 500;      /* semi-bold pour visibilité */
    text-transform: uppercase; /* optionnel : effet premium */
    letter-spacing: 1px;   /* espace entre lettres pour aérer */
             /* couleur lisible */
     /* espace autour du texte */
 /* Sur tous types d'écrans orientés verticalement 
 @media all and (orientation: portrait)width:1000px;*/  
  

}
#coli a:hover { color: #55f2db;
}
/* #coli a { color: #fff;
 font:18px "Lucida Grande";
 text-decoration: none;
  text-align: center;
}
*/


.menukpubook li {
 list-style-type: none ;       /* Suppression des puces */
display:flex;
  height:57px;
 border-radius: 4px;           /* Arrondis des bordures */
 color: #0000 ;
 font-size: 18px;
  display: flex; 
 justify-content:space-between 50px;
 
 text-align: center;
 
}


.menukpubook a {
   display:inline block;                /* Transformation en block */
   min-width: 18px;             /* Largeur minimale des liens */
   margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
   padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
   text-align: center;           /* Centrage du texte */   
   
   color: #FFFFFF ;                  /* Couleur du texte */
   text-decoration: none;        /* Suppression du soulignement */
   /* border: 1px solid #fff;        Ajout d'une bordure */
   border-radius: 4px;           /* Arrondis des bordures */

}
.div{
   width: 1000px;
   text-align:center;
  }
/* =============================
   VERSION MOBILE
============================= */
@media (max-width: 768px) {
    header menukpubook ul {
        flex-direction: column;   /* empile verticalement */
        align-items: center;      /* centre les items */
        gap: 15px;                /* espace vertical entre items */
    }

    header menukpubook ul li {
        margin: 0;
    }

    header menukpubook ul li a {
        font-size: 18px;          /* lisible sur mobile */
    }
}
/*OLD style pour le reste */
menu {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   
   list-style-image: none;
 }
 a:link {
   color: #000000;
   text-decoration: none;
 }
 a:visited {
   color: #000000;
   text-decoration: none;
 }
 a:hover {
   color: red;
   text-decoration: none;
 }
 a:active {
   color: #000066;
   text-decoration: none;
 }
 
     
   
   #top {display:flex;
      justify-content:space-around;
    width:1000px;
    height:45px;
 
   background-image: url(calque.png);
   padding-top: 0px;
 }
    #contenair {
   position:absolute;
   left:20px;
      margin-top:2px;
 border:1px;
   width:1195px;
   z-index:5;
   
 }
       #polyg{clip-path: inset(0 79% 91% 0);
         width:100px;
         margin-top:0px;
         margin left:90px,
          border: 0px;}

    #kart{ display: flex;            
  justify-content:left;
  align-items:space-around;
    }
 .Style3 { padding-top:10px;
           padding-left:50px;
         font-size: 19px;
   
 }
 .Style4 {   text-align:center;
             margin-left: 40px;
             font-size: 18px;
             font-style: italic;
 }
 .Style5 {  text-align:center ;
                 font-size: 18px;
                 font-style: italic;}
 .chap{ 
   display: flex;              /* Transformation en flexbox */
  justify-content: space-around;
  align-items: center;height: 320px;
         width:1200px;
 }
       
       
     </style>