/*pour toutes les pages*/

 p{ font-family: 'Rajdhani', sans-serif; 
    font-weight: 400; 
}

.fictif{ scroll-margin-top: 30px; }

.conteneur_agenceaccueil, .conteneur_prestations, .conteneur_valeurs_ac, .realisations, .arrangementvaleurs, .conteneur_offresaccueil, .contenu_etvous_accueil, .conteneur_partenaires, .presentation_blog_accueil, .conteneur_real {  
    display: flex;
    flex-direction: column;
    padding:2%;
    width:85%;
    align-items: center;
    max-width:1000px;
    margin: 0 auto;
}
.conteneur_prestations, .arrangementvaleurs{
    flex-direction: row;  
}
.arrangementvaleurs{
  width:auto;
}

.prestationsaccueil,   .partenairesaccueil{ 
    background-image: radial-gradient(circle at 84% 82%, rgba(233, 222, 222, 0.131) 0%, rgba(217, 217, 217,0.03) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 75% 56%, rgba(3, 3, 3,0.03) 0%, rgba(31, 30, 30, 0.31) 30%,transparent 30%, transparent 100%),radial-gradient(circle at 74% 53%, rgba(206, 200, 200, 0.379) 0%, rgba(153, 153, 153,0.03) 95%,transparent 95%, transparent 100%),radial-gradient(circle at 86% 43%, rgba(209, 209, 209,0.03) 0%, rgba(209, 209, 209,0.03) 83%,transparent 83%, transparent 100%),radial-gradient(circle at 64% 88%, rgba(192, 192, 192,0.03) 0%, rgba(192, 192, 192,0.03) 2%,transparent 2%, transparent 100%),radial-gradient(circle at 73% 77%, rgba(205, 205, 205,0.03) 0%, rgba(205, 205, 205,0.03) 18%,transparent 18%, transparent 100%),radial-gradient(circle at 57% 51%, rgba(161, 161, 161,0.03) 0%, rgba(161, 161, 161,0.03) 64%,transparent 64%, transparent 100%),radial-gradient(circle at 40% 84%, rgba(115, 115, 115,0.03) 0%, rgba(115, 115, 115,0.03) 14%,transparent 14%, transparent 100%),linear-gradient(135deg, #000000,rgb(22, 34, 59));
    color:#f1f1f1;
}
.offresaccueil{
    background-color:#959191 ;
}

/*agence accueil*/

.bandeau{
    background-image: url(/images/fondnature_bandeau.webp) ;
    width:100%;
    height:200px;
    background-repeat: repeat;
    background-size: cover;
    background-position:center; 
}

.agenceaccueil{
    padding: 0%;
}

/*Prestations accueil*/

.prestationsaccueil{
    padding :2% 0;
}
.contenu_prestations{
    width:33%;
    display: flex;
    flex-direction: column;
    margin-right: 4%;
    text-align: left;
}
.contenu_prestations:nth-child(3){
    margin-right: 0;
}
.texte_prestations h2{
    color: #dda15e;
    font-size:calc(1vmin + 12px);
}
.texte_prestations ul{
    padding-inline-start:15px;
}

/*valeurs accueil*/

.côte_gauche{
    display: grid;
    justify-content: center;
    align-items:center;
}
.imggauche:nth-child(1){
    grid-row: 1/2 ;
    grid-column: 1/3;
    z-index: 1;
}
.imggauche:nth-child(2){
    grid-row: 2/3;
    grid-column: 2/4; 
    transform: translateY(-20px);
}

/*Page offres*/

.conteneur_offresaccueil p,.offresaccueil h1{
    color: #F1F1F1; 
}
.liste_offres{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;   
    top:0;
    max-width: 1100px;
    margin:0 auto;
    height:auto ;
}
.carre_offres{
    place-items: center;
    margin: 3% 3% 5% 2%;
    padding: 2%;
    background:#F1F1F1;
    border: 1px solid #f1f1f1;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.carre_offres:hover{
   background-color:#3a6070;
   color: #F1F1F1;
}
.carre_offres:hover h2{
      color: #F1F1F1;
}
.carre_offres h3{
    font-size:15px;
    padding:0 8%;
    min-height: 60px;
}
.carre_offres ul{
    min-height: 160px;
}

/*Et vous accueil*/

.etvousaccueil h1 {
    opacity: 0;
    transform: translateX(50px);
    animation: apparition 1.2s 0.8s ease-out forwards; 
}
.texte_etvousaccueil{
    display: flex;
    flex-direction: column;
    opacity: 0;
    text-align: justify;
    transform: translate(100px);
    animation: apparition 1.4s 01s  ease-out forwards; 
}
.img_etvousaccueil{
   width:500px;
   height: auto; 
   opacity: 0;
   transform: translateX(-80px);
   animation: apparition 1.2s 0.9s ease-out forwards; 
}
@keyframes apparition {  25% {opacity: 0.2;}
                         50% {opacity: 0.5;}
                         100%{transform: none; opacity: 1;}
}

 /*partenaires accueil*/

 .partenairesaccueil h2{
    color: #F1F1F1;
 }
.titrelogo_part{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:4%;
}
.sous_section_partenaires{
    padding: 3% 0;
}
.sous_section_partenaires p a, .sous_section_partenaires h2{
    color:#dda15e ;
}
.ttneutral{
    display: inline-block;
    height:50px;
    width:250px;
    transform:translateX(-15px);
    background-color: #F0F0F1;
}
.ttnn1, .ttnn2{
    color: rgb(123, 115, 99);
    font-weight: 500;
    font-size: 2em;
}
.ttnn2 {
    color: rgb(195, 181, 159);
    padding-left: 2%;
}
.logo_partenaire{
    text-align: center;
}
.lamelee{
    width:250px;
}

/*Blog accueil*/
.triptyqueblog_accueil{
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    margin: 2% auto;
    gap:1%
}
.img_date{
    text-align: center;
    background-color: #959191;
    color: #f2f8f4;
    padding: 4% 0 0 0;
}
.titre_summary{
    padding: 0 8%;
    text-align: justify;
    min-height:150px ;
    font-size: 14px;
}

/*realisations*/

.conteneur_real{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    top: 0;
    max-width: 1000px;
    margin: 0 auto;
    place-items: center;
    gap:1%
}
.hovered {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 300px;
    height: 300px;
    opacity: 0; 
    transition: all .3s;
    background-image: radial-gradient(circle at 84% 82%, rgba(217, 217, 217,0.03) 0%, rgba(217, 217, 217,0.03) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 75% 56%, rgba(3, 3, 3,0.03) 0%, rgba(3, 3, 3,0.03) 30%,transparent 30%, transparent 100%),radial-gradient(circle at 74% 53%, rgba(153, 153, 153,0.03) 0%, rgba(153, 153, 153,0.03) 95%,transparent 95%, transparent 100%),radial-gradient(circle at 86% 43%, rgba(209, 209, 209,0.03) 0%, rgba(209, 209, 209,0.03) 83%,transparent 83%, transparent 100%),radial-gradient(circle at 64% 88%, rgba(192, 192, 192,0.03) 0%, rgba(192, 192, 192,0.03) 2%,transparent 2%, transparent 100%),radial-gradient(circle at 73% 77%, rgba(205, 205, 205,0.03) 0%, rgba(205, 205, 205,0.03) 18%,transparent 18%, transparent 100%),radial-gradient(circle at 57% 51%, rgba(161, 161, 161,0.03) 0%, rgba(161, 161, 161,0.03) 64%,transparent 64%, transparent 100%),radial-gradient(circle at 40% 84%, rgba(115, 115, 115,0.03) 0%, rgba(115, 115, 115,0.03) 14%,transparent 14%, transparent 100%),linear-gradient(135deg, #000000,rgb(22, 34, 59));
}
.realisation_ex:hover .hovered {
    opacity: 1;
}
.realisation_ex{
    position: relative;
    width: 300px;
    height: 300px;
}
.hovered span {
    color: white;
    position: absolute;
    top: 40%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.real{
    background-color: #F0F0F1;
    
    position: absolute;
    top:70%;
     left: 30%;
}