body{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    height: 15%;
}

header{
    position: fixed;
    z-index: 999;
    width: 100%;
}

.navbar{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-transform: uppercase;
}

.navbar a, .navbarTelephone a{
    text-decoration: none;
    outline: none;
    color: #5f5fb8;
    transition: color 0.4s ease;
}

.navbarTelephone span{
    font-size: 1.3rem;
}

.aCategorie{
    display: flex;
    justify-content: center;
    align-items: center;

}

.categorie .submenu li a {
    font-size: 0.95rem;
}

.categorie, .categorieTel{
    list-style-type: none;
    padding: 12px 10px;
    margin: 10px;
    position: relative;
    font-size: 1.2rem;
    transition: background-color 0.6s;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}

.categorieTel div{
    padding: 10Px;
    padding-left: 0px;
}

.categorieTel div span, .categorieTel span {
    padding-left: 10px;
}

.categorieSeul{
    margin-left: 10px;
}

.categorieTel div:active, .categorieTel div:hover, .categorieSeul:hover{
    background-color: #222274;
}

.categorie:hover, .categorie:active{
    background-color: #222274;
}

.categorie:hover a, .categorieTel:hover a{
    color: white;
}

.conteneurValeur{
    width: 105%;
    height: 50%;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ; /* Deux colonnes égales */
    grid-template-rows: 1fr; /* Deux lignes égales */
    gap: 20px;
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; 
}

.conteneurValeur div{
    width: 100%;
    height: 80%;
    background-color:#ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.conteneurValeur div img{
    height: auto;
    width:20%;
}

.conteneurValeur div span{
    color: #111;
    text-align: center;
    font-size: 1rem;
}

.conteneurValeur div h3{
    font-size: 1.2rem;
    color: #ff1515;
    margin: 0;
}



.FlecheSvg{
    transition: transform 0.6s ease;
}

.categorie:hover .FlecheSvg {
    transform: rotate(180deg);
}

.toggle .FlecheSvg:hover, .toggle .FlecheSvg:active{
    transform: rotate(180deg);
}

#checkboxSubMenuD:checked .FlecheSvg{
    transform: rotate(180deg);
}

.submenu{
    display: none;
    position: absolute;
    background-color: rgb(64, 127, 199);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    padding: 0px 10px 0px 10px;
    border-radius: 0px 10px 10px 10px;
    opacity: 0;
    margin-top: 12px;
    padding: 0px;
    list-style-type: none;
    font-size: 0.9rem;
    left: 0;
    transition: opacity 2s;
    cursor: pointer;
    z-index: 999;
    max-height: 240px; 
    overflow-y: auto; 
}

.submenuTel{
    z-index: 999;
    padding: 10px;
    list-style-type: none;
    font-size: 0.9rem;
    background-color: rgb(64, 127, 199);
    position: relative;
    left: 0;
    color: #ffffff;
    border-radius: 0px 0px 10px 10px;
}

.submenuTel li{
    margin-top: 10px;
}

.submenuTel li a span{
    color: #ffffff;
    font-size: 1.2rem;
}

.submenu li{
    height: 25px;
    display: flex;
    align-items: center;
}

.demenagementsubMenu{
    width: 340px;
}

.demenagementsubAgences{
    width: 230px;
    max-height: 200px;
    overflow-y: auto;
}

.demenagementsubServices{
    width: 300px;
}

.demenagementsubAgences li a span{
    text-transform: uppercase;
}

.navbar:last-child{
    margin-right: 30px;
}

nav ul li:hover .submenu {
    display: block;
    animation : test 0.6s ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
} 

.navbarTelephone ul li div{
    display: flex;
    align-items: center;
}

.submenu li{
    padding-bottom: 10px;
    padding: 10px;
    position: relative;
    left: 0;
}

.submenu li:last-child{
    margin-bottom: 0px;
}

.submenu li:hover{
    background-color: #222274;
}

.submenu li:hover:last-child{
    border-radius: 0px 00px 10px 10px;
}

.frontPage{
    height: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.frontPage h1{
    text-transform: uppercase;
    font-size: 2.6rem;
    margin: 0;
    margin-bottom: 10px;
}

.progress-bar {
    width: 600px;
    background-color: #fff; 
    height: 5px; 
    border-radius: 10px;
    background-image: linear-gradient(to right,  #041e42 0%,  #041e42 33%, white 33%, white 67%, red 67%, red 100%);
    border: 1px solid rgb(116, 116, 116)
}

.progress {
    height: 100%;
    transition: width 1s; /* Animation de transition de la largeur */
}

.slogan{
    font-size: 2.1rem;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btnContact {
    background-color: white;
    color:#0000ff;
    border-radius: 10em;
    font-size: 17px;
    font-weight: 600;
    padding: 1em 2em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 1px solid #222274;
    box-shadow: 0 0 0 0 #222274;
}

.btnContact:hover {
    transform: translateY(-4px) translateX(-2px);
    box-shadow: 2px 5px 0 0 #d11c1c;
    color: #d11c1c;
    border-color: #d11c1c;
}
  
.btnContact:active {
    transform: translateY(2px) translateX(1px);
    box-shadow: 0 0 0 0 #222274;
}

.conteneurSpecialites {
    background-color: #fff;
    border-radius: 10px 0px 0px 10px;
    height: 320px;
    width: 850px;
    margin-left: 10px;
    color: #fff;
    border: 1px solid #222274;
    transition: transform 0.5s ease;
    position: relative;
    right: -1000px;
    animation: slideFromRight 2s linear forwards;
}
  
.ombre {
    filter: drop-shadow(5px 0px 5px rgba(8, 8, 8, 0.473));
}

.ombreAvis {
    filter: drop-shadow(10px 10px 10px #ebebffd8);
}

.titreSpecialites{
    background-color: #222274;
    font-size: 1.275rem;
    padding:15px ;
    border-radius: 10px 0px 0px 0px;
}

.lesSpecialites{
    color: black;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 15px;
    height: 71%;
}

.lesSpecialites div img{
    animation: waviy 3s infinite;
    transition-property: all;
    transition-duration: .5s;
    animation-delay: calc(.05s * var(--i));
    height: 60px;
    width: 60px;
}

.divSpe{
    background-color: rgb(216, 228, 238); 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid rgb(159, 181, 199);
    font-size: 1rem;
    border-radius: 5px;
}

.divSpe div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transform: scale(0);
    opacity: 0;
    animation: scaleOpacity 2s ease forwards;
    animation-delay: calc(2s * var(--i));
}

.lesSpecialites h2{
    margin-bottom: 15px;
}

.lesSpecialites span{
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #222274;
}

.infosFrontPage{
    margin-left: 50px;
    height: 320px;
}

.conteneurSousPresentation{
    background-color: #ffffff;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    animation: overflow 5s ease forwards;
}

.conteneurPresentation{
    width: 80%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 15px;
    margin-top: -8%;
    position: relative;
    top: 600px;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 2.9s ease forwards;
    animation-delay: calc(.05s * var(--i));
}

.conteneurPresentation h1{
    text-align: center;
    font-size: 2.4rem;
    margin-top: 15px;
    width: 75%;
}

.conteneurPresentation span{
    font-size: 1.2rem;
    text-align: center;
    margin-top: 25px;
}

.presentation{
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sectionCarteAgences{
    background-color: #222274;
    height: 1860px;
    display: flex;
    justify-content: center;
}

.custom-shape-divider-bottom-1697465949 {
    margin-top: 20px;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1697465949 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 69px;
}

.custom-shape-divider-bottom-1697465949 .shape-fill {
    fill: #222274;
}


.custom-shape-divider-top-1697539089 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1697539089 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20px;
    transform: rotateY(180deg);
    border-radius: 10px 10px 0px 10Px;
}

.custom-shape-divider-top-1697539089 .shape-fill {
    fill: #222274;
}

.custom-shape-divider-bottom-1697538839 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1697538839 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20px;
    transform: rotateY(180deg);
    border-radius: 10px 10px 0px 10Px;
}

.custom-shape-divider-bottom-1697538839 .shape-fill {
    fill: #ff1515;
}

.custom-shape-divider-top-1678718084 {
    overflow: hidden;
    line-height: 0;
    z-index: 999;
}
  
.custom-shape-divider-top-1678718084 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 40px;
}
  
.custom-shape-divider-top-1678718084 .shape-fill {
    fill: url(#gradient);
    background: linear-gradient(90deg, #ffffff, #ffffff);
    background-size: 400% 400%;
}

.custom-shape-divider-top-1697546624 {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1697546624 svg {
    position: relative;
    display: block;
    width: calc(113% + 1.3px);
    height: 99px;
}

.custom-shape-divider-top-1697546624 .shape-fill {
    fill: #222274;
}

.contexteCarte{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: 100px;
}

.contexteCarte h1{
    text-align: center;
    color: #fff;
     font-size: 2.1rem;
}

.conteneurInfosService h1 p{
    margin: 0px;
}

.categorie .aCategorie span{
    text-transform:capitalize;
    font-size: 1.125rem;
    font-weight: bold;
}

.conteneurPartenaire{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr;
    height: 35vh;
    width: 85%;
    place-items: center;
}

.conteneurRef{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 450vh;
    width: 85%;
    margin-top: 20px;
    place-items: center;
}

.btns{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-left: -1vw;
}

.prv, .svt{
    border: none;
    padding: 8px 10px;
    border-radius: 5px;
    font-weight: bold;
    color: #222274;
    cursor: pointer ;
    font-size: 1.125rem;
}

.prv:hover, .svt:hover{
    transform: translateY(2px);
}

.tailleP{

    width: 100%;
    display: flex;
    justify-content: center;
}

.cartePartenaire{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    height: 85%;
    width: 80%;
    border-radius: 15px;
}

.cartePartenaire img{
    height: auto;
    width: 75%;
}

.divImg{
    width: 40%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.cartePartenaire span{
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #222274;
    font-size: 1.1em;
}

.infosCartes{
    text-align: center;
    color: white;
    font-size: 1.2rem;
    margin-top: 20px;
    width: 70%;
}

.imgCarte{
    height: 1000px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.pointCarte{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ec2a2a;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    animation: pulse 2s infinite;
    position: relative;
    cursor: pointer;
}

.pointGeo{
    transition: transform 0.5s ease;
}

.pointCarte:hover .pointGeo{
    transform: rotate(-90deg);
}


.loireAtlantique{
    top: -60%;
    left: -290px;
}

.Vendee{
    top: -56%;
    left: -270px;
}

.IlleEtVilaine{
    top: -73%;
    left: -280px;
}

.Morbihan{
    top: -73%;
    left: -340px;
}

.MaineEtLoire{
    top: -72%;
    left: -220px;
}

.IndreEtLoire{
    top: -73%;
    left: -140px;
}

.LoirEtCher{
    top: -79%;
    left: -90px;
}

.Loiret{
    top: -85%;
    left: -30px;
}

.Rhone1{
    top: -69%;
    left: 125px;
}

.Rhone2{
    top: -69%;
    left: 135px;
}

.Ain2{
    top: -74.5%;
    left: 175px;
}

.Ain3{
    top: -80%;
    left: 205px;
}

.Drome1{
    top: -70%;
    left: 155px;
}

.Drome2{
    top: -70%;
    left: 175px;
}

.Isere1{
    top: -77%;
    left: 205px;
}

.Isere3{
    top: -83%;
    left: 175px;
}

.Savoie1{
    top: -87%;
    left: 235px;
}

.Savoie2{
    top: -87%;
    left: 250px;
}


.hauteSavoie2{
    top: -100%;
    left: 255px;
}

.hauteSavoie3{
    top: -99.5%;
    left: 230px;
}

.Var{
    top: -77.5%;
    left: 240px;
}

.cotesArmor{
    top:-135%;
    left: -360px;
}

.finistere{
    top:-138%;
    left: -435px;
}

.AlpesMaritime{
    top: -85.5%;
    left: 310px;
}

.charenteMaritime{
    top: -107%;
    left: -240px;
}

.subMenuCarte{
    display: none;
    position: absolute;
    left: 30px;
    height: 220px;
    width: 250px;
    border-radius: 10px;
    background-color: #fcfcfc;
    padding: 20px;
    box-shadow: 0 0 100px rgba(0, 0, 1, 0.7);
    padding: 0px 10px 0px 10px;
    list-style-type: none;
    font-size: 0.9rem;
    z-index: 10;
    cursor:default;
    text-align: center;
    font-family:'Times New Roman', Times, serif;
}

.pointCarte:hover .subMenuCarte{
    display: block;
    animation : test 0.6s ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.infosbtnCartes{
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight:bold;
}

.btnCarte {
    width: 8.5em;
    height: 2.3em;
    margin: 0.5em;
    background: #d11c1c;
    color: white;
    border: none;
    border-radius: 0.625em;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnPartenaire {
    width: 8.5em;
    height: 2.3em;
    margin: 0.5em;
    margin-top: 15px;
    background: #d11c1c;
    color: white;
    border: none;
    border-radius: 0.625em;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.flexCentreColumn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flexCentre{
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexCentre2{
    display: flex;
    justify-content: center;
    align-items: center;
}
   
.btnCarte:hover {
    color: rgb(255, 255, 255);
}
   
.btnCarte:after {
    content: "";
    background: #222274;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
}
   
.btnCarte:hover:after {
    transform: skewX(-45deg) scale(1, 1);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.subMenuCarteInfos{
    margin-top: 10px;
}

.titreCategorieDemenagement{
    position: relative;
    top: 7% ;
    height: 100px;
    text-align: center;
    color: #fff;
    font-size: 1.3rem;
}

.card a {
    text-decoration: none
}
  
.content {
    padding: 1.1rem;
    background-color: #deeaf0;
    font-family:'Times New Roman', Times, serif;
}

.content div{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
  
.image {
    max-width: 100%; /* Empêche l'image de dépasser la largeur de la div */
    max-height: 100%;
    display: block;
    border-radius: 10px 10px 0px 0px;
    transition: transform 0.2s;
}

.conteneurImage{
    overflow: hidden;
    border-radius: 10px 10px 0px 0px;
}

.image:hover{
    transform: scale(1.1);
}

.title {
    color: #222274;
    font-size: 1.4rem;
    line-height: 1.75rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.content a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.desc {
    margin-top: 0.5rem;
    color: #1e1f22;
    font-size: 1.1rem;
    line-height: 1.35rem;
    text-align: center;
}
  
.action {
    display: inline-flex;
    margin-top: 1rem;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    align-items: center;
    gap: 0.25rem;
    background-color: #2563EB;
    padding: 4px 8px;
    border-radius: 4px;
}
  
.action span {
    transition: .3s ease;
}
  
.action:hover span {
    transform: translateX(4px);
}

.card {
    width: 340px;
    height: 510px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid transparent;
    z-index: 10;
    position: absolute;
    background-color: #deeaf0;
}

.cardBox {
    width: 350px;
    height: 520px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px 0px,
      rgba(0, 0, 0, 0.5) 0px 2px 25px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.cardBox::before {
    content: "";
    position: absolute;
    width: 60%;
    height: 150%;
    background: #40E0D0;
    background: -webkit-linear-gradient(to right, #222274,#fff ,#ec2a2a);
    background: linear-gradient(to right, #222274, #fff,#ec2a2a);
    transform: rotate(30deg);
}


.iconesCategorie{
    height: 70px;
    width: 70px;
    background-color: #222274;
    z-index: 998;
    border-radius: 50%;
    position: absolute;
    top: -7%;
    left: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconesCategorie svg{
    transition: transform 0.5s ease;
}

.iconesCategorie svg:hover{
    transform: translateY(-6px);
}

.carteCategorie1,   .carteCategorie4{
    position: relative;
    top: -175px;
}

.carteCategorie2, .carteCategorie3{
    position: relative;
    top: -125px;
}

.sectionCategorieDemenagement{
    height: 450px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.carteCategorie1, .carteCategorie2, .carteCategorie3, .carteCategorie4{
    transform: scale(0);
    opacity: 0;
    animation: scaleOpacity 2s ease forwards;
    animation-delay: calc(.05s * var(--i));
}



.conteneur1AccueilLocation{
    background-color: #ffffff;
    height :600px;
    width: 100%;
}

.conteneur1AccueilProtection{
    background-color: #ffffff;
    height :900px;
    width: 100%;
}

.conteneur1AccueilService{
    background-color: #ffffff;
    height :800px;
    width: 100%;
}

.conteneur2AccueilLocation, .conteneur2AccueilService, .conteneur2AccueilProtection{
    height: 800px;
    justify-content: center;
    width: 100%;
}

.custom-shape-divider-top-1697613313 {
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1697613313 svg {
    position: relative;
    display: block;
    width: calc(124% + 1.3px);
    height: 131px;
}

.custom-shape-divider-top-1697613313 .shape-fill {
    fill: #FFFFFF;
}

.conteneurInfosLocation, .conteneurInfosProtection{
    width: 40%;
    margin-right: -150px;
    margin-right: 80px;
}

.infosconteneurSection2Catégorie ul li{
    font-size: 1.2rem;
}

.conteneurInfosLocation h1, .conteneurInfosService h1 , .conteneurInfosProtection h1{
    font-size: 2.1rem;
    font-weight:lighter;
}

.conteneurInfosLocation span, .conteneurInfosService span, .conteneurInfosProtection span{
    margin-bottom: 20px;
    font-size: 1.2rem;
    display: block;
    width: 100%;
}

.conteneurInfosService span{
    font-size: 1.3rem;
}

.conteneurInfosService{
    margin-left: 60px;
    width: 40%;
}

.conteneurImageLocation{
    width: 500px; /* Ajustez la largeur et la hauteur de la div selon vos besoins */
    height: 45%;
    border-radius: 10px 10px 10px 10px;
    transition: transform 0.3s ease;
    background: linear-gradient(45deg, #222274,#d11c1c);
    display: flex;
    justify-content: center;
    animation: gradientAnimation 5s linear infinite;
    background-size: 200% 200%;
}

.conteneurImageProtection{
    width: 550px; /* Ajustez la largeur et la hauteur de la div selon vos besoins */
    height: 50%;
    border-radius: 10px 10px 10px 10px;
    transition: transform 0.3s ease;
    background: linear-gradient(45deg, #222274,#d11c1c);
    display: flex;
    justify-content: center;
    animation: gradientAnimation 5s linear infinite;
    background-size: 200% 200%;
}

.conteneurImageService{
    width: 600px; /* Ajustez la largeur et la hauteur de la div selon vos besoins */
    height: 50%;
    border-radius: 10px 10px 10px 10px;
    transition: transform 0.3s ease;
    background: linear-gradient(45deg, #222274,#d11c1c);
    display: flex;
    justify-content: center;
    animation: gradientAnimation 5s linear infinite;
    background-size: 200% 200%;
}

.imageLocation, .imgService{
    max-width: 100%; /* Empêche l'image de dépasser la largeur de la div */
    max-height: 100%;
    display: block;
    transform: scale(1.08);
    position: relative;
    z-index: 3;
    transition: transform 0.3s ease;
    border-radius: 10px 10px 10px 10px;

}

.imageLocation:hover{
    transform: scale(1.15);
    transform: rotate(10deg); 
}

.imgService:hover{
    transform: scale(1.15);
    transform: rotate(-10deg); 
}

.conteneurInfosService ul li{
    font-size: 1.2rem;
    line-height: 30px;
    width: 100%;
}

.conteneurAvisClient{
    background-color: #ebebffad;
    height: 800px;
    overflow: hidden;
}

.infosAvisClients{
    width: 50%;
}

.infosAvisClients h1{
    color: #222274;
    text-transform: uppercase;
    font-size: 1.9rem;
    margin-bottom: 5px;
}

.infosAvisClients span{
    display: block;
    margin-bottom: 20px;
    color: #222274;
    font-size: 1.2rem;
    text-align: center;
    font-weight: lighter;
    line-height: 25px;

}

.ca1, .ca3{
    margin-bottom: 80px;
    transition: transform 0.7s ease;
}

.carousselClient{
    margin-top: 100px;
    justify-content: space-around;
    width: 90%;
}

.cardAvis {
    --main-color: #000;
    --submain-color: #78858F;
    --bg-color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: relative;
    width: 370px;
    height: 220px;
    top: 400px;
    display: flex;

    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background: var(--bg-color);
    padding: 20px;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 3s ease forwards;
    animation-delay: calc(.05s * var(--i));
}

.ca2, .ca1, .ca3{
    transition: transform 0.7s ease;
}

.ca1:hover{
    transform: rotate(5deg);
}

.ca3:hover{
    transform: rotate(-5deg);
}

.ca2:hover{
    transform: translateY(10px);
}

.cardAvis h3{
    text-decoration: underline;
    color: #222274;
}

.profilCercle{
    width: 70px;
    height: 70px;
    background-color: #ffffff;
    border-radius: 50%;
    position: relative;
    margin-right: 20px;
    border: 2px solid #222274;
}

.stars {
    display: flex;
    grid-gap: 0.125rem;
    gap: 0.125rem;
    color: #d11c1c
}
  
.star {
    height: 1.5rem;
    width: 1.5rem;
    animation: waviy 3s infinite;
    transition-property: all;
    transition-duration: .5s;
    animation-delay: calc(.05s * var(--i));
}

.enteteAvisProfil{
    height: 70px;
    width: 100%;
    text-align: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    margin-top: 10Px;
}

.tilt1Location {
    overflow: hidden;
    line-height: 0;
    transform: rotateY(180deg);
}

.tilt1Location svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 53px;
    transform: rotate(180deg);
}

.tilt1Location .shape-fill {
    fill: #f0f0f0;
}

.tilt2Location {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.tilt2Location svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 53px;
    transform: rotateY(180deg);
}

.tilt2Location .shape-fill {
    fill: #f0f0f0;
}

.svg1Avis{
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}


.conteneurInfosFooter h1, .conteneurInfosFooter h1{
    font-size: 1.7rem;
}

.svg1Avis svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
}

.svg1Avis .shape-fill {
    fill: #ebebffad;
}

.conteneurFooter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 50px ;
    height: 400px;
    background-color: #222274;
    position: relative;
    z-index: 980;
    overflow: hidden;
}

.conteneurFooter:nth-child(){
    width: 30% ;
}

.flexCentreFooter{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
}

.conteneurInfosFooter h1{
    font-size: 1.7rem;
    color: #FFFFFF;
}

.conteneurHoraire h1{
    font-size: 1.7rem;
    color: #FFFFFF;
}

.flexCentreFooter span{
    margin-left: 10px;
    font-size: 1.1rem;
    margin-top: 5px;
    color: #FFFFFF;
    transition: color 0.3s ease;

}

.flexCentreFooter a span:hover{
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    color: #d11c1c;
}

.conteneur9h12h span{
    display: block;
    width: 50%;
    color: #FFFFFF;
}

.conteneur9h12h{
    display: flex;
    justify-content: center;
    align-items: center;
}

.conteneur9h12h{
    font-size: 1.1rem;
}

.conteneur14h18h{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.conteneur14h18h span{
    font-size: 1.1rem;
    color: #FFFFFF;
}

.conteneur14h18h span{
    width: 100%;
    text-align: end;
    font-size: 1.1rem;
    color: #FFFFFF;
}

.Facebook{
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background-color: #3b5998 ;
    transition: transform 0.3s ease;
    margin-right: 10px;
}

.Instagram{
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    transition: transform 0.3s ease;
}

.Linkedin{
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background-color: #0e76a8;
    transition: transform 0.3s ease;
    margin-right: 10px;
}

.conteneurReseauSociaux{
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.Twitter:hover, .Linkedin:hover, .Instagram:hover, .Facebook:hover{
    transform: translateY(5px);
}

.titreResumeFooter{
    height: 15%;
    background-color: #1a1a58;
    display: flex;
    align-items: center;
    border-radius: 10px 0px 0px 0px;
}

.titreResumeFooter span{
    margin-left: 20px;
    display: inline;
    font-size: 1.4rem;
    color: #ffffff;
    letter-spacing: 1px;
}

.conteneurSommaire{
    border: 1px solid #222274;
    border-radius: 10px 0px 0px 10px;
    position: relative;
    right: -1000px;
    animation: slideFromRight 2s linear forwards;
}

.categorieSommaire{
    background-color: rgb(255, 255, 255);
    height: 85%;
    border-radius: 0px 0px 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.categorieSommaire div{
    height: calc(85% / 5);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 90%;
    border-bottom: 1px solid gray;
    margin-bottom: 5px;
    padding-left: 10px;
}

.categorieSommaire span{
    display: block;
    text-transform: uppercase;
    width: 90%;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    color: #222274;
}

.conteneurInfosFooter, .conteneurHoraire{
    width: 25%;
    height: 80%;
}

.conteneurSommaire{
    width: 30%;
    height: 75%;
}

.categorieTel{
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.categorieSommaire span:hover{
    color: #d11c1c;
    transform: translateX(10px);
}

.conteneurDroit{
    background-color: #1a1a58;
    height: 50px;
    position: relative;
    z-index: 980;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40Px;
    display: flex;
    align-items: center;
}

.conteneurDroit div span{
    color: white;
}

.conteneurDroit div a{
    color: white;
    transition: color 0.3s ease;
}

.conteneurDroit div a:hover{
    color: red;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.droitsReserves{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.conteneurEnteteCategorie{
    height: 300px;
}

.conteneurEnteteCategorie div{
    height: 22%;
    width: 73%;
    margin-top: 80Px;
    background-color: #ffffff;
    border-radius: 20px;
}

.titreSection h1{
    color: #d11c1c;
    font-size: 1.8rem;
    width: 90%;

}

.titreSection{
    margin: 20px;
}

.titreSection h1 span{
    font-size: 2.1rem;
    line-height: 40px;
    color: #222274;
}

.conteneurEnteteCategorie .flexCentre h1{
    color: #222274;
    font-size: 1.8rem;
    font-weight: lighter;
}

.conteneurContexteCategorie{
    height: 500px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: overflow 4s ease forwards; 
}

.conteneurContexteCategorieP{
    height: 450px;
}

.conteneurContexteCTransport{
    height: 540px;
}


.logoFranceDem a img{
    width: 110px; 
    height:110px; 
    margin-left: 40px;
}

.transition{
    transition: all 1s;
}


.conteneurCategorie {
    width: 75%;
    height: 95%;
    margin-top: -50px;
    border-radius: 20px 20px 10px 10px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 2s ease forwards;
    z-index: 10;
    top:600px;
    position: relative;
    overflow: hidden;
}

.conteneurCategorieP {
    height: 100%;
}

.contexteCategorie{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.contexteCategorie div{
    width: 60%;
    display: flex;
    justify-content: center;
}

.contexteCategorie button{
    margin-top: 20px;
}

.contexteCategorie span{
    margin-top: 20px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 25px;
    width: 75%;
}

.conteneurSection2Catégorie{
    background-color: #222274;
    display: flex;
    justify-content: center;
}

.conteneurSection2CatégoriePartenaire, .conteneurSection2CatégorieRef{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.conteneurSection2Redirection{
    height: 680px;
}

.conteneurSection2Nettoyage{
    height: 740px;
}

.Montage{
    height: 830px;
}

.infosconteneurSection2Catégorie{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    height: 85%;
    margin-right: 20px;
}

.infosConteneurAPropos{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
}

.infosconteneurSection2Catégorie span{
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-top: 20px;
    width: 85%;
}



.infosconteneurSection2Catégorie h1{
    font-size: 1.9rem;
    color: #FFFFFF;
}

.notreMission{
    height: 100px;
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-top: 40px;
    padding: 10px;
    width: 70%;
}

.notreMission h1, .notreMission span{
    color: red;
    padding: 0Px;
    text-align: center;
}

.notreMission h1{
    font-size: 1.7rem;
    margin: 0;
}

.notreMission span{
    font-size: 1.5rem;
}

.conteneurSection3Catégorie{
    background-color: #FFFFFF;
    height: 750px;
}

.infosconteneurSection3Catégorie{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;

    margin-bottom: 150px;
    margin-left: 50px;
}

.infosConteneurSection3Apropos{
    width: 30%;
}

.infosconteneurSection3Catégorie span{
    color: #0a0a0a;
    font-size: 1.2rem;
    margin-top: 20px;
}

.conteneurSection3Catégorie .Montage2 img{
    height: 550px;
}

.conteneurImageSection3{
    width: 40%;
}

.posteSection3APropos{
    width: 40%;
    background-color: rgba(207,220,233,1);
    height: 60%;
    position: relative;
    top: -20%;
    z-index: 10;
    border-radius: 30Px;
    display: flex;
    padding: 40px;
    align-items: center;
    flex-direction: column;
}

.posteContexte svg{
    padding-right: 20px;
}

.iconeP{
    padding-right: 20px;
}

.posteSection3APropos div{
    display: flex;
    justify-content: center;
    align-items: center;

}

.p2, .p3, .p4, .p5, .p6{
    margin-top: 45px;
}


.posteSection3APropos div div span{
    font-size: 1.4rem;
}

.infosconteneurSection3Catégorie h1, .infosconteneurSection3Catégorie h1 span{
    font-size: 1.9rem;
    color: #222274;
}

.conteneurSection3Catégorie div img{
    width: 600px;
    margin-bottom: 250px;
    position: relative;
    z-index: 989;
    border-radius: 20px;
    height: 600px;
}

.conteneurImageSection2 img{
    width: 700px ;
    height: 700px;
    top: -20%;
    position: relative;
    z-index: 989;
    border-radius: 20px;
}

.conteneurImageSection2{
    width: 700px;
}

.BoutonEntete{
    display: none;
}

.BoutonEntete button{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
    background-color: rgb(241, 45, 45);
    border-radius: 10px;
    border: none;

}

.BoutonEntete button:hover{
    cursor: pointer;
    
}

.conteneurSection4Catégorie{
    background-color: #f0f0f0;
    padding: 20px;
    height: 500px;
    overflow: hidden;
}

.section3Transport{
    height: 650px;
}


.conteneurSection4CatégorieTransport{
    background-color: #f0f0f0;
    padding: 20px;
    height: 500px;
    overflow: hidden;
}

.contexteSection3{
    height: 45%;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    position: relative;
    top: 600px;
    padding: 20px;
    background-color: #FFFFFF;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 2s ease forwards;
    z-index: 10;
    margin-top: 40px;
}

.serviceCourrierConteneur{
    height: 280px;
    border-radius: 15px;
    position: relative;
    top: 600px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 20px;
    background-color: #FFFFFF;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 2s ease forwards;
    z-index: 10;
    margin-top: 40Px;
}

.listeRedirection{
    display: flex;
    justify-content: center;
    align-items: center;
}

.listeRedirection div{
    width: 33%;
}

.listeRedirection div ul li{
    color: #222274;
    font-size: 1.1rem;
}


.contexteSection3 div{
    height: 90%;
    width: 50%;
}

.infosconteneurSection4Catégorie{
    width: 80%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.titreSection4{
    width: 80%;
}

.titreSection4 h1{
    color: #222274;
    font-size: 1.9rem;
    margin: 15px;
}

.contexteSection3 span{
    font-size: 1.2rem;
}

.btnContact a{
    transition: all 0.5s ease;
    color: #222274;
}

.btnContact:hover a{
    color: red;
}

.formuleFooter{
    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.5);
}

.conteneurAgences{
    margin-top: 40px;
    height: 60%;
    width: 95%;
    position: relative;
    top: 1200px;
    transition: left 2s ease; /* Durée de la transition de 1 seconde */
    animation: slideOn 2s ease forwards;
}

.infosconteneurSection3Catégorie ul li{
    font-size: 1.2rem;
}

.conteneurContexteContactAgences{
    height: 110%;
    background-color: #222274;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    border-radius: 10px 10px 0px 0px;
    flex-direction: column;
}

.conteneurContexteContactAgences span{
    text-align: center;
    color: white;
    width: 90%;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.conteneurMail{
    width: 50%;
    background-color: white;
    height: 40%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 10px;
    margin-top: 10Px;
}

.conteneurContactAgences{
    height: 150%;
    background-color: white;
    display: flex;
    justify-content: center;

}

.sousConteneurContactAgences{
    width: 33%;
    border-right: 1px solid gray;
    padding-right:20px;
    padding-bottom: 20px;
}


.conteneurImageAgences{
    height: 300%;
    background-color: white;
    border-radius: 0px 0px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.conteneurImageAgences img{
    height: 250px;
    width: 250px;
    margin-top: 10px;
}



.Ain2C{
    right: 50px;
    top: -230px;
}

.Ain3C{
    right: -90px;
    top: -270px;
}

.AlpesMaritimeC{
    right: -40px;
    top: -150px;
}

.Drome1C{
    right: 50px;
    top: -210px;
}

.Drome2C{
    right: 25px;
    top: -270px;
}

.IlleEtVilaineC{
    right: -10px;
    top: -180px;
}

.IndreEtLoireC{
    right: -10px;
    top: -230px;
}

.titreSection4 h1{
    text-align: center;
}

.Isere1C{
    right: -30px;
    top: -170px;
}


.charenteMaritimeC{
    top: -290px;
    right: 50px;
}

.Isere3C{
    right: 20px;
    top: -270px;
}

.LoirEtCherC{
    right: 20px;
    top: -190px;
}

.FinistereC{
    top: -255px;
    right: 50px;
}

.loireAtlantiqueC{
    right: 0px;
    top: -190px;
}

.cotesArmorC{
    top: -170px;
    right: 5px;
}

.LoiretC{
    right: 30px;
    top: -220px;
}

.MaineEtLoireC{
    right: 10px;
    top: -220px;
}

.MorbihanC{
    right: 0px;
    top: -170px;
}

.Rhone1C{
    right: -20px;
    top: -160px;
}

.Rhone2C{
    right: 0px;
    top: -165px;
}

.Savoie1C{
    right: 60px;
    top: -240px;
}

.Savoie2C{
    right: 30px;
    top: -250px;
}


.hauteSavoie2C{
    right: 50px;
    top: -125px;
}

.hauteSavoie3C{
    right: 20px;
    top: -200px;
}

.VarC{
    right: 60px;
    top: -130px;
}

.VendeeC{
    right: 30px;
    top: -200px;
}

.imgAgencesLoc{
    transition: all 0.5s ease;
}

.imgAgencesLoc:hover{
    transform: rotate(-5deg);
}

.enteteDemandeDeContact{
    padding: 20Px;
    background-color: #222274;
    height: 100px;
    width: 1210px;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enteteDemandeDeContact span{
    color: white;
    text-align: center;
    font-size: 1.2rem;
}

.demandeDeContact{

    background-color: white;
    width: 1250px;
    border-radius: 0px 0px 10Px 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
  
.label {
    display: block;
    margin-bottom: .3rem;
    font-size: 1rem;
    font-weight: bold;
    color: #222274;
    transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
}

.input{
    border-top: 3px solid #222274;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid red ;
    height: 35px;
    width: 320px;
    transition: all 0.1s cubic-bezier(.25,.01,.25,1) ;
}

.input-group:hover .label, .input:focus {
    color: #222274;
  }

  .input:hover, .input:focus, .input-group:hover .input {
    outline: none;
    border-left: 3px solid #222274;
    border-right: 3px solid red;
  }
  
.champsDemandeContact{
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 33%);
    grid-template-rows: repeat(2, 35%);
    width: 100%;
    padding-left: 80px;
    height: 230px;
}

.input option{
    font-size: 0.9rem;
}

.marginT{
    margin-top: 30px;
}

.btnContact input{

    background-color: #fff;
    color: #0000ff;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    transition: color 0.5s ease;
}

.btnContact:hover input{
    cursor: pointer;
    color: red ;
}

.petitCar{
    font-size: 0.8rem;
    width: 1250px;
}

.message-success{
    text-align: center;
    color: #222274;
    font-size: 1.2rem;
    margin-top: 10px;
    text-decoration: underline;
}

.protection{
    height: 400px;
}


.conteneurMentionsLegales{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 890px;
    
}

.mentionsLegales{
    width: 60%;
    padding: 30px;

}

.mentionsLegales h1{
    text-align: center;
    color: #222274;
    font-size: 2.1rem;
}

.mentionsLegales div{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.titreMention{
    font-weight: bold;
    font-size: 1.1rem;
    color: #222274;
}

.textMention{
    font-size: 1.1rem;
    text-align: end;
}

.conteneurCookie, .conteneurViePrivee{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.conteneurCookie{
    height: 2600Px;
}

.conteneurViePrivee{
    height: 3500px;
}

.cookies, .viePrivee{
    width: 75%;
    padding: 20Px;
    font-size: 1.15rem;
}

.Telephone::-webkit-inner-spin-button, .Telephone::-webkit-outer-spin-button {
    -moz-appearance: textfield;
    appearance: textfield;
    -webkit-appearance: none;
}


.cookies h1, .viePrivee h1{
    text-align: center;
    color: #222274;
    font-size: 2.1rem;
}

.cookies h4, .viePrivee h4{
    text-decoration: underline;
}

.cookies span{
    display: block;
    margin-top: 10px;
}

.viePrivee span{
    display: block;
    margin-top: 10px;
}

.viePrivee h4{
    font-size: 1.3rem;
}

.viePrivee h5{
    font-size: 1.2rem;
}

.droitsReserves span{
    margin-bottom: 10px;
}

#checkboxSubMenuD, #checkboxSubMenuA, #checkboxSubMenuP{
    display: none;
}

.conteneurSection4Agences2 {
    height: 1300px;
}

#checkbox {
    display: none;
  }
  
  .toggle {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition-duration: .5s;
  }
  
  .bars {
    width: 100%;
    height: 3px;
    background-color: rgb(0, 0, 0);
    border-radius: 4px;
  }
  
  #bar2 {
    transition-duration: .8s;
  }
  
  #bar1,#bar3 {
    width: 70%;
  }
  
  #checkbox:checked + .toggle .bars {
    position: absolute;
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar2 {
    transform: scaleX(0);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar1 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar3 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle {
    transition-duration: .5s;
    transform: rotate(180deg);
  }

  .SwitchNav{
    margin-right: 40px;
    display: none;
    position: relative;
    z-index: 999;
  }

.hidden-div {
    width: 50%; /* La div cachée prend 20% de la largeur */
    height: 100%;

    float: left;
    position: fixed;
    top: 0;
    right: 0;
    display: none; /* Cachez la div initialement */
    background-color: #ffffff;
    z-index: 998;
    overflow: auto;
}

.conteneurSection2GardeMeuble{
    height: 780px;
}

.conteneurSection2Apropos{
    height: 780px;
}


.submenuTel li{
    font-size: 1.4rem;
}



.conteneurSection4Nettoyage{
    height: 400px;
}

#checkbox:checked + #showDiv {
    display: block;
}

.navbarTelephone{
    position: relative;
    top: 15%;
    height: 80%;
}

.categorie a{
    display: flex;
    align-items: center;
}

.contexteCarte h1{
    font-size: 1.9rem;
}

.section4Redirection{
    height: 500px;
}

.categorieTel div a span{
    font-size: 1.2rem;
}

.categorieTel div{
    border-radius: 10px 10px 0px 0px;
}

.conteneurSection2Transport{
    height: 680px;
}

.conteneurSection4Transport{
    height: 500px;
}

.GardeMeubleSection2 img{
    height: 600px;
}

.conteneurContexteFormule{
    height: 750px;
}

.conteneurSectionFormule{
    height: 2000px;
}

.conteneurSectionFormule img{
    width: 1300px;
    height: auto;
    position: relative;
    top: -5%;
}

.conteneurContexteContact{
    height: 450px;
}

.conteneurSection2Contact{
    height: 700px;
}

.conteneurSection4Contact{
    height: 1300px;
}

.ContactSection3{
    display: flex; 
    justify-content:flex-start;
    width:100%; 
    margin-top: 10px;
    margin-left:90px;


}

.Message{
    margin-left: 220px;
    position: relative;
}

.Message .input{
    width: 730px; 
    min-height: 120px; 
    max-height:360px; 
    position: relative;  
    resize:vertical;              
    overflow: auto;
}

.footerCategorieTel{
    height: 500px;
    background-color: #222274;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sousDeuxAgences, .sousTroisAgences{
    border-right: none;
}

.borderRight{
    border-right: 1px solid gray;
}

.footerTelInfos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.conteneurSection4Agences, .conteneurSection4Agences3{
    height: 1300px;
}

.conteneurSection2Agences{
    height: 930px;
}

.conteneurContactAgences{
    height: 100%;
}

.infosFooterTelConteneur, .horairesFooterTelConteneur{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.horairesFooterTelConteneur span{
    font-size: 1.1rem;
    width: 80%;
}

.horairesFooterTelConteneur .conteneurSamediDimanche, .horairesFooterTelConteneur .conteneurLundiVendredi{
    width: 60%;
}

.horairesFooterTelConteneur .conteneurReseauSociaux{
    justify-content: center;
}

.infosFooterTelConteneur h1{
    text-align: center;
}

.conteneurDroitsTel span{
    font-size: 1.1rem;
}

.conteneurSection2AgenceAin{
    height: 700px;
}

.infosconteneurSection2Catégorie span a{
    color: rgb(253, 253, 253);
    transition: color 0.3s ease;
}

.infosconteneurSection3Catégorie span a , .contexteCategorie span a{
    color: #222274;
    transition: color 0.3s ease;
}

.infosconteneurSection2Catégorie span a:hover, .infosconteneurSection3Catégorie span a:hover, .contexteCategorie span a:hover{
    color: red;
}

.titreDepartement{
    font-size: 1.4rem;
    color: #222274;
    font-weight: lighter;
    padding: 10Px;
    font-family:'Times New Roman', Times, serif;
}

@media screen and (max-width:1500px){

    .conteneurContexteCategorie{
        height: 500px;
    }
}

@media screen and (max-width:1440px){
    .card{
        width: 300px;
        height: 550px;
    }
    .cardBox{
        width: 310px;
        height: 560px;
    }

    .c2 .card, .c3 .card{
        height: 520px;
    }

    .c2 ,.c3{
        height: 530px;
    }
    

    .conteneurSection3Catégorie div img{
        width: 500px;
    }
}

@media screen and (max-width:1400px){
    .carousselClient {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Deux colonnes dans la première ligne */
        grid-template-rows: auto 1fr;
        justify-content: center;
        align-items: center;
    }

    .ca2, .ca1{
        margin-bottom: 40px;
    }

    .grid3{
        grid-row: 2; /* Cette div se trouve dans la deuxième ligne */
        grid-column: 1 / 3;
    }

    .conteneurAvisClient {
        height: 1000px;
    }

    .conteneurImageSection2 img{
        width: 600px;
        height: 600px;
    }

    .conteneurImageSection2 {
        width: 600px;
    }

    .conteneurSection4Transport{
        height: 650px;
    }

    .conteneurSectionFormule img{
        width: 1100px;
        height: auto;
    }

    .conteneurSectionFormule{
        height: 1600px;
    }

    .conteneurViePrivee{
        height: 3300px;
    }
}

@media screen and (max-width:1300px){
    .enteteDemandeDeContact{
        width: 1100px;
    }

    .demandeDeContact{
        width: 1140px;
    }

    .Message .input{
        width: 675px;
    }

    .petitCar{
        width: 1150px;
    }
}

@media screen and (max-width:1260px){
    .card{
        width: 260px;
        height: 580px;
    }
    .cardBox{
        width: 270px;
        height: 590px;
    }

    .c2 .card, .c3 .card{
        height: 510px;
    }

    .c1 .card{
        height: 510px;
    }

    .c1{
        height: 540px;
    }

    .c2 ,.c3{
        height: 530px;
    }

    .conteneurImageSection2{
        width: 40%;

    }

    .conteneurImageSection2 img{
        height: 500px;
    }

    .conteneurImageSection2 img{
        width: 500px;
        height: 500px;
    }

    .conteneurImageSection2 {
        width: 500px;
    }

    .Chargement{
        height: 900px;
    }

    .conteneurSection2Nettoyage{
        height: 650px;
    }

    .GardeMeubleSection2 img{
        height: 400px;
    }
}


@media screen and (max-width:1200px) {
    .imgCarte img{
        height: 800px;
    }

    .sectionCarteAgences{
        height: 1450px;
    }

    .conteneurImageService{
        width: 500px;
    }

    .sectionCategorieDemenagement{
        height: 550px;
    }

    .loireAtlantique{
        top: -49%;
        left: -230px;
    }

    .Vendee{
        top: -46%;
        left: -210px;
    }

    .IlleEtVilaine{
        top: -61%;
        left: -220px;
    }
    
    .Morbihan{
        top: -61%;
        left: -280px;
    }

    .MaineEtLoire{
        top: -60%;
        left: -170px;
    }

    .IndreEtLoire{
        top: -62%;
        left: -110px;
    }

    .LoirEtCher{
        top: -68%;
        left: -80px;
    }

    .Loiret{
        top: -72%;
        left: -30px;
    }
    
    .Rhone1{
        top: -60%;
        left: 100px;
    }

    .Rhone2{
        top: -60%;
        left: 110px;
    }


    .Ain2{
        top: -65.5%;
        left: 140px;
    }

    .Ain3{
        top: -70%;
        left: 170px;
    }

    .charenteMaritime{
        top: -98%;
        left: -190px;
    }

    .Drome1{
        top: -59%;
        left: 130px;
    }

    .Drome2{
        top: -65%;
        left: 125px;
    }
    
    .Isere1{
        top: -69%;
        left: 160px;
    }

    .Isere3{
        top: -75%;
        left: 145px;
    }
    
    .Savoie1{
        top: -77.5%;
        left: 210px;
    }

    .cotesArmor{
        top:-122%;
        left: -300px;
    }

    .Savoie2{
        top: -82.5%;
        left: 180px;
    }

    .hauteSavoie2{
        top: -91%;
        left: 210px;
    }

    .hauteSavoie3{
        top: -91%;
        left: 205px;
    }

    .Var{
        top: -73%;
        left: 190px;
    }

    .AlpesMaritime{
        top: -80.5%;
        left: 245px;
    }

    .finistere {
        top: -124%;
        left: -345px;
    }

    .titreCategorieDemenagement{
        top: -85%;
    }

    .sectionCarteAgences{
        height: 1630px;
    }

    .conteneurSection3Catégorie div img{
        width: 400px;
        height: 400px;
    }

    .conteneurSectionFormule img{
        width: 900px;
        height: auto;
        top: -7%;
    }

    .conteneurSectionFormule{
        height: 1300px;
    }

    .enteteDemandeDeContact{
        width: 1000px;
    }

    .demandeDeContact{
        width: 1040px;
    }

    .input{
        width: 280px;
    }

    .Message .input{
        width: 585px;
    }

    .petitCar{
        width: 1050px;
    }

    .conteneurViePrivee{
        height: 3500px;
    }

    .conteneurCookie{
        height: 2700Px;
    }
    
}
    

@media screen and (max-width:1100px){

    .cardBox {
        width: 350px;
        height: 520px;
    }

    .card {
        width: 340px;
        height: 510px;
    }
    
    .carteCategorie4{
        display: block;
    }

    .carteCategorie3, .carteCategorie1, .carteCategorie4, .carteCategorie2{
        position: relative;
        top: -175px;
        display: flex;
        justify-self: center;
        align-items: center;
    }

    .carteCategorie3, .carteCategorie4{
        top:-100px;
    }

    .carteCategorie1, .carteCategorie3{
        margin-left: 50px;
    }

    .carteCategorie2, .carteCategorie4{
        margin-right: 50px;
    }


    .sectionCategorieDemenagement{
       height: 1000px;
       display: grid;
       grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
       grid-template-rows: 1fr 1fr; /* Deux lignes égales */
  
       align-items: center; /* Centre verticalement le contenu */
       justify-content: center; 
    }

    .conteneur2AccueilProtection{
        flex-direction: column;
    }

    .conteneurInfosProtection{
        width: 90%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .conteneurInfosProtection h1{
        font-size: 2.1rem;
        height: 40px;
    }

    .conteneurInfosProtection span{
        text-align: center;
    }

    .conteneurImageProtection{
        margin-top: 60px;
        width: 450px;
        height: 35%;
    }

    .conteneurSection4CatégorieTransport{
        height: 700px;
    }

    .conteneurContexteTransport{
        height: 860px;
    }

    .conteneurContexteFormule{
        height: 850px;
    }

    .enteteDemandeDeContact{
        width: 900px;
    }

    
    .demandeDeContact{
        width: 940px;
    }

    .input{
        width: 240px;
    }

    .Message .input{
        width: 485px;
    }

    .petitCar{
        width: 950px;
    }

    
    .conteneurContexteCategorieMorbihan{
        height: 740px;
    }
}

@media screen and (max-width:1020px) {
    .navbar{
        display: none;
    }

    .conteneurSection2Contact{
        height: 700px;
    }

    .conteneurSousPresentation{
        height: 600px;
    }

    
    .conteneurContexteCategorie{
        height: 600px;
    }

    .conteneurImageService{
        width: 430px;
    }

    .SwitchNav{
        display: block;
    }

    .infosconteneurSection2Catégorie h1{
        font-size: 1.7rem;
    }

    .conteneurValeur{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100%;
    }

    .conteneurValeur{
        height: 500px;
    }

    .conteneurValeur div    {
        height: 240px;
    }


    .BoutonEntete{
        display: block;
        margin-left: 40px;
    }
    
    .hidden-div{
        display: none;
    }

    .custom-shape-divider-top-1678718084 {
        display: none;
    }

    .frontPage{
        flex-direction: column;
        justify-content: center;
        height: 1000px;
    }

    .conteneurSpecialites{
        width: 75%;
        border-radius: 10Px;
    }

    .titreSpecialites{
        border-radius: 10px 10px 0px 0px;
    }

    .test{
        width: 80%;
    }

    .conteneurImageLocation, .conteneurImageService{
        width: 400px;
    }

    .conteneurImageService{
        height: 320px;
    }

    .conteneurSection2Catégorie{
        flex-direction: column;
        height: 1340px;
        justify-content: center;
        align-items: center;
    }

    .infosconteneurSection2Catégorie{
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40%;
    }

    .infosconteneurSection2Catégorie h1{
        text-align: center;
    }
    

    .infosconteneurSection2Catégorie span{
        text-align: center;
    }

    .conteneurImageSection2{
        width: 600px;
        height: 45%;
    }

    .conteneurImageSection2 img{
        width: 600px ;
        height: 600px;
        top: 0;
    }

    .conteneurSection2Apropos{
        height: 900px;
    }

    .Chargement img{
        width: 100%;
    }

    .Montage{
        height: 1160px;
    }

    .conteneurImageSection3 img{
        height: 420px;
    }

    .conteneurSection3Catégorie div img{
        width: 400px;
    }

    .conteneurInfosRedirection{
        height: 40%;
    }

    .conteneurSection2Redirection, .conteneurSection2Nettoyage, .conteneurSection2Transport, .conteneurSection2GardeMeuble, .conteneurSection2Contact{
        justify-content: flex-start;
        height: 1300px;
    }

    .GardeMeubleSection2 img{
        height: 400px;
    }

    .ContactSection2, .logoFranceDem a img {
        margin:0px;
    }

    .conteneurSection2Loiret{
        height: 1300px;
    }

    .infosconteneurSection2Catégorie {
        margin-right: 0;
    }

    .conteneurPartenaire{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 90vh;
        margin-top: 20px;
    }

    .cartePartenaire{
        height: 85%;
    }

    .conteneurSection2CatégorieRef{
        height: 720vh;
    }

    .conteneurRef{
        height: 600vh;
        width: 100%;
    }

}

@media screen and (max-width:1000px) {
    .section4Redirection{
        height: 600px;
    }

    .section4Redirection .serviceCourrierConteneur{
        height: 400px;
    }

    .enteteDemandeDeContact{
        width: 800px;
    }

    .demandeDeContact{
        width: 840px;
    }

    .champsDemandeContact{
        grid-template-columns : 1fr 1fr;
        grid-template-rows: repeat(3, 45%);
    }

    .ContactSection3{
        margin-top: 170px;
    }

    .input{
        width: 330px;
    }

    .Message .input{
        width: 400px;
    }

    .petitCar{
        width: 850px;
    }

    .conteneurContexteCategorieAgences, .conteneurContexteCategorieDrome, .conteneurContexteCategorieIlleEtVilaine {
        height: 650px;
    }

    .titreDepartement{
        font-size: 1.3rem;
    }

    .infosFrontPage, .conteneurSpecialites{
        margin: 0px;
    }


}

@media screen and (max-width:970px) {

    .conteneurSection3Catégorie .Transport2 img {
        width: 400px;
    }

    .infosconteneurSection3Catégorie h1, .infosconteneurSection3Catégorie h1 span{
        font-size: 1.8rem;
    }

    .conteneurSection3Catégorie div img{
        width: 350px;
    }

    .categorieSommaire span{
        font-size: 1.2rem;
    }
}


@media screen and (max-width:940px) {
    .cardAvis{
        width: 300Px;
        height: 240px;
    }

    .infosAvisClients {
        width: 80%;
    }

    .conteneurSection3Catégorie .Montage2 img{
        width: 350px;
    }

    .contexteCategorieRedirection{
        height: 640px;
    }

    .conteneurSectionFormule img{
        width: 700px;
        height: auto;
        top: -7%;
    }

    .conteneurSectionFormule{
        height: 900px;
    }

    .conteneurViePrivee{
        height: 3900px;
    }
    
}

@media screen and (max-width:900px) {
    .conteneur2AccueilLocation{
        flex-direction: column;
    }

    .conteneur2AccueilService{
        flex-direction: column-reverse;
    }

    .conteneurInfosLocation, .conteneurInfosService{
        width: 90%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .conteneurInfosLocation h1, .conteneurInfosService h1{
        font-size: 2.1rem;

    }

    

    .conteneurContexteCategorie{
        height: 800px;
    }

    .conteneurContexteCTransport{
        height: 570px;
    }

    .conteneurInfosLocation span, .conteneurInfosService span{
        text-align: center;
    }

    .conteneurImageLocation{
        width: 380px;
        height: 30%;
        margin-top: 30px;
    }

    .conteneurImageService{
        margin-top: 60px;
        width: 450px;
        height: 35%;
    }

    .conteneur1AccueilLocation{
        height :700px;
    }

    .conteneur1AccueilService{
        height: 900px;
    }

    .imgCarte img{
        height: 600px;
    }



    .sectionCarteAgences{
        height: 1300px;
    }

    .imgCarte{
        margin-top: 20px;
    }

    .pointCarte{
        display: none;
    }

    .conteneurSection3Catégorie{
        flex-direction: column-reverse;
        height: 950Px;
    }

    .enteteDemandeDeContact{
        height: 200px;
    }

    .conteneurSection4Catégorie {
        height: 1400px;
    }

    .infosconteneurSection3Catégorie h1{
        text-align: center;
    }

    .infosconteneurSection3Catégorie span{
        text-align: center;
    }

    .infosconteneurSection3Catégorie{
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
    }

    .conteneurImageSection3 {
        height: 50%;
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .conteneurSection3Catégorie .Montage2 img{
        height: 400px;
    }

    .conteneurSection3Catégorie div img{
        margin-bottom: 0;
    }

    .enteteDemandeDeContact{
        width: 700px;
    }

    .demandeDeContact{
        width: 740px;
    }

    .ContactSection2{
        margin-top: 70px;
    }

    .input{
        width: 290px;
    }

    .Message .input{
        width: 325px;
    }

    .petitCar{
        width: 750px;
    }

    .mentionsLegales{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .conteneurCookie{
        height: 3000Px;
    }

    .posteSection3APropos{
        top: 0;
        width: 70%;
    }

    .sousTroisAgences {
        border-right: 1px solid gray;
    }

    .conteneurContexteCategorieDrome, .conteneurContexteCategorieIlleEtVilaine{
        height: 750px;
    }
    
    .agenceSeule{
        width: 50%;
        height: 100px;
    }

    .conteneurImageAgences{
        display: none;
    }

    .conteneurSection4Agences{
        height: 750px;
    }

    .conteneurContactAgences{
        height: 300px;
        border-radius: 0px 0px 10px 10px;
    }

    .conteneurMail{
        width: 60%;
    }

    .TroisAgences{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 600px;
        flex-direction: column;
    }



    .TroisAgences .sousConteneurContactAgences{
        width: 90%;
        border-left: 1px solid gray;
        margin-top: 20px;
    }

    .conteneurPresentation h1{
        width: 90%;
        font-size: 2rem;
    }

    .conteneurPresentation{
        top: 800px;
    }


}

@media screen and (max-width:870px) {
    .conteneurPresentation{
        width: 90%;
    }

    .conteneurSousPresentation{
        height: 650px;
    }

    .infosCartes{
        height: 250px;
    }

    .infosCartes span{
        height: 50%;
    }

    .conteneurContexteFormule{
        height: 950px;
    }
}

@media screen and (max-width:825px) and (min-width: 601px){
    .conteneurSommaire{
        display: none;
    }

    .conteneurInfosFooter, .conteneurHoraire{
        width: 90%;
    }

    .conteneurInfosFooter{
        margin-right: 20px;
    }

    .conteneurFooter{
        padding-right: 50px;
        height: 350px;
    }
}


@media screen and (max-width:820px) {
    .hidden-div{
        width: 100%;
    }

    .logoFranceDem{
        margin-top: 10px;
    }

    .header{
        height: 80px;
    }
    
    .logoFranceDem a img{
        height: 70px;
        width: auto;
    }

    .sectionCategorieDemenagement{
        height: 1700px;
        display: grid;
        grid-template-columns: 1fr ; /* Deux colonnes égales */
        grid-template-rows: 1fr 1fr 1fr ; /* Deux lignes égales */
        gap: 60px;
        align-items: center; /* Centre verticalement le contenu */
        justify-content: center; 
     }

     .desc{
        font-size: 0.9rem;
     }

     .carteCategorie3, .carteCategorie1, .carteCategorie4, .carteCategorie2{
        position: relative;
        top: -105px;
        display: flex;
        justify-self: center;
        align-items: center;
        margin: 0px;
    }

    .carteCategorie4{
        display: none;
    }

    .conteneurSection4Catégorie{
        height: 600px;
    }

    .contexteSection3{
        flex-direction: column;
        width: 100%;
    }

    .contexteSection3 div{
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    .conteneurSection4Transport{
        height: 750px;
    }

    .enteteDemandeDeContact{
        width: 600px;
    }

    .conteneurSection4Contact{
        height: 1550px;
    }

    
    .demandeDeContact{
        width: 640px;
    }

    .ContactSection2{
        margin-top: 70px;
    }

    .input{
        width: 250px;
    }

    .Message .input{
        width: 255px;
    }

    .petitCar{
        width: 650px;
    }

    .infosFooterTelConteneur, .horairesFooterTelConteneur{
        width: 70%;
    }

    .infosFooterTelConteneur .progress-bar{
        width: 60%;
    }
 
    .conteneurSection4Agences{
        height: 800px;
    }

    .conteneurSection4Agences2{
        height: 1200px;
    }

    .conteneurSection4Agences3{
        height: 1300px;
    }


    .conteneurContactAgences{
        height: 320px;
    }

    .titresection4Agence h1{
        font-size: 1.6rem;
    }

    .deuxAgences{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 450px;
    }

    .TroisAgences{
        height:600px;
    }

    .deuxAgences .sousConteneurContactAgences{
        border-left: 1px solid grey;
        border-right: 1px solid grey;
    }

    .sousDeuxAgences{
        width: 90%;
        margin-top: 20px;
    }
    
    
    .titreDepartement{
        font-size: 1.2rem;
    }

    .conteneurEnteteCategorie .flexCentre h1{
        font-size: 1.7rem;
    }



}

@media screen and (max-width:780px) {
    .carousselClient{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    
    .categorieSommaire span{
        font-size: 1rem;
    }

    .conteneurEnteteCategorie div{
        width: 80%;
    }

    .titreDepartement{
        font-size: 1.2rem;
    }

    .conteneurSousPresentation{
        height: 700px;
    }

    .sectionCarteAgences{
        height: 1450px;
    }

    .imgCarte img{
        margin-top: 50px;
    }

    .grid3{
        grid-row: 3; /* Cette div se trouve dans la deuxième ligne */
        grid-column: 1 / 3;
    }

    .grid2{
        grid-row: 2; /* Cette div se trouve dans la deuxième ligne */
        grid-column: 1 / 3;
    }

    .grid1{
        grid-row: 1; /* Cette div se trouve dans la deuxième ligne */
        grid-column: 1 / 3;
    }

    .conteneurAvisClient {
        height: 1400px;
    }

    .infosAvisClients {
        margin-top: 50px;
        width: 80%;
    }

    .conteneurSection4Nettoyage{
        height: 550px;
    }

    .conteneurSectionFormule img{
        width: 500px;
        height: auto;
        top: -10%;
    }

    .conteneurSectionFormule, .infosconteneurSection4CatégorieTransport{
        height: 700px;
    }

    .conteneurViePrivee{
        height: 4100px;
    }

    .conteneurSection2Loiret{
        height: 1400px;
    }
    
}

@media screen and (max-width:720px) {
    .conteneurContexteCategorie{
        height: 750px;
    }

    .conteneurContexteCTransport{
        height: 620px;
    }

    .conteneurContexteCategorieMorbihan{
        height: 870px;
    }

    .conteneurContexteTransport{
        height: 850px;
    }

    .conteneurCategorie{
        width: 95%;
    }

    .conteneurEnteteCategorie .flexCentre h1{
        font-size: 1.6rem;
    }

    .presentation h1{
        font-size: 2rem;
    }

    .presentation span{
        font-size: 1rem;
    }

    .presentation{
        width: 95%;
    }

    .conteneurPresentation{
        margin-top: -40%;
    }

    .conteneurImageSection3{
        display: none;
    }

    .infosconteneurSection3Catégorie{
        width: 90%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .infosconteneurSection3Catégorie h1{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px;
    }

    .infosconteneurSection3Catégorie h1 p{
        margin: 0;
    }

    .infosconteneurSection3Catégorie h1 span{
        margin: 0;
        text-align: center;
    }

    .conteneurSection3Catégorie{
        height: 550px;
        justify-content: center;
        align-items: center;
    }

    .section4Redirection{
        height: 700px;
    }

    .section4Redirection .serviceCourrierConteneur{
        height: 460px;
    }

    .conteneurContexteFormule{
        height: 950px;
    }

    .conteneurSection2CatégorieRef{
        height: 700vh;
    }

    .conteneurRef{
        height: 900vh;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

.ContactSection3 .fichier{
    width: 15%;
}

@media screen and (max-width:700px) {
    .imgCarte img{
        height: 400px;
    }

    .contexteSection3 span{
        font-size: 1rem;
    }

    .sectionCarteAgences{
        height: 1200px;
    }

    .contexteCarte{
        width: 85%;
    }

    .infosconteneurSection2Catégorie ul li, .infosconteneurSection3Catégorie ul li  {
        font-size: 1rem;
    }

    .imgCarte{
        margin-top: 70px;
    }

    .conteneur1AccueilProtection{
        height :1100px;
    }

    .conteneurImageProtection, .conteneurImageService{
        margin-top: 60px;
        width: 350px;
        height: 30%;
    }


    .infosconteneurSection2Catégorie h1{
        font-size: 1.7rem;
    }

    .conteneurImageSection2{
        display: none;
    }

    .infosconteneurSection2Catégorie{
        height: 90%;
    }

    .conteneurSection2Catégorie{
        height: 700px;
    }

    .enteteDemandeDeContact{
        width: 500px;
        height: 170px;
    }

    .demandeDeContact{
        width: 540px;
        height: 1300px;
    }

    .conteneurSection4Contact{
        height: 2000px;
    }

    .champsDemandeContact{
        grid-template-columns : 1fr;
        grid-template-rows: repeat(6, 45%);
        padding-left: 0;
    }

    .input-group{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .label{
        text-align: center;
        width: 100%;
    }

    .ContactSection3{
        margin-top: 540px;
        flex-direction: column;
        margin-left: 0;
    }

     .fichier{
        display: none;
    }

    .inputFile{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

    }

    .input{
        width: 330px;
    }

    .Message{
        margin: 0;
    }

    .Message .input{
        width: 400px;

    }

    .petitCar{
        width: 550px;
    }

    .titreMention, .textMention{
        font-size: 1rem;
    }

    .mentionsLegales{
        width: 90%;
    }

    .conteneurViePrivee{
        height: 4400px;
    }

    .viePrivee h1, .conteneurCookie h1{
        font-size: 1.6rem;
    }

    .viePrivee h2, .conteneurCookie h2{
        font-size: 1.4rem;
    }

    .conteneurCookie{
        height: 3550Px;
    }

    .conteneurSection4Agences{
        height: 900px;
    }


    .conteneurSection2Loiret, .conteneurSection4Transport{
        height: 900px;
    }

    .titreDepartement h1{
        font-size: 1.3rem;
    }

    .infosconteneurSection3Catégorie span, .infosconteneurSection2Catégorie span{
        font-size: 1rem;
    }

    .conteneurSection2CatégoriePartenaire{
        height: 1500px;
        justify-content: flex-start;
    }

    .conteneurPartenaire{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        height: 160vh;
        margin-top: 0;
    }

    .contexteP{
        margin-top: 20px;
    }


    .conteneurSection2CatégorieRef{
        height: 1000vh;
    }
}

@media screen and (max-width:680px) {
    .conteneurSpecialites{
        height: 325px;
    }

    .titreSpecialites{
        font-size: 1.3rem;
    }
}

@media screen and (max-width:600px) {
    .conteneurFooter{
        flex-direction: column;
        padding: 0px;
        height: 800px;
    }

    .conteneurContexteAPropos{
        height: 700px;
    }

    .conteneurInfosLocation span, .conteneurInfosService span, .conteneurInfosProtection span,     .conteneurInfosService span, .conteneurInfosService ul li, .infosAvisClients span, .flexCentreFooter span, .conteneur9h12h span, .conteneur14h18h span, .conteneur9h12h span{
        font-size: 1rem;
    }

    .infosAvisClients h1{
        font-size: 1.4rem;
    }

    .notreMission{
        height: 80px;
    }

    .titreSection4 {
        width: 120%;
    }

    .titreTransportSec3, .titreTransportSec3 span{
        font-size: 1.3rem;
    }

    .conteneurSommaire{
        display: block;
    }

    .titresection4Agence {
        width: 135%;
    }

    .conteneurInfosFooter, .conteneurSommaire, .conteneurHoraire{
        width: 90%;
        margin-bottom: 20px;
    }

    .conteneurInfosFooter, .conteneurHoraire {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .conteneurInfosFooter h1, .conteneurInfosFooter h1{
        font-size: 1.4rem;
    }


    .conteneurLundiVendredi, .conteneurSamediDimanche{
        width: 70%;
    }

    .frontPage{
        height: 700px;
    }

    .sectionCarteAgences{
        height: 1300px;
    }

    .conteneurInfosLocation h1, .conteneurInfosService h1 , .conteneurInfosProtection h1{
        font-size: 1.7rem;
    }


    .imgCarte img{
        margin-top: 80px;
    }

    .conteneurReseauSociaux{
        justify-content: center;
    }

    .titreResumeFooter{
        border-radius: 10px 10px 0px 0px;
    }

    .categorieSommaire{
        border-radius: 0px 0px 10px 10px;
    }

    .conteneurDroit{
        flex-direction: column;
        padding-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
        height: 70px;
    }

    .droitsReserves{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;
    }

    .droitsReserves span{
        margin-bottom: 0;
    }

    .SiteMaj{
        display: none;
    }

    .conteneurInfosFooter h1, .conteneurHoraire h1{
        text-align: center;
        font-size: 1.4rem;
    }

    .conteneurSection4CatégorieTransport{
        height: 970px;
    }

    .conteneurSection4Catégorie, .conteneurSectionFormule {
        height: 700px;
    }

    .conteneurSection4Transport{
        height: 900px;
    }

    .conteneurContexteFormule{
        height: 1050px;
    }

    .conteneurSectionFormule img{
        width: 450px;
        height: auto;
        top: -15%;
    }

    .conteneurSection4Contact{
        height: 1300px;
    }

    .conteneurSection4Contact{
        height: 2000px;
    }

    .conteneurViePrivee{
        height: 4900px;
    }

    .conteneurContexteCategorieDrome, .conteneurContexteCategorieIlleEtVilaine{
        height: 850px;
    }

    .conteneurSection4Agences{
        height: 900px;
    }

    .conteneurSection4Agences2{
        height: 1200px;
    }

    .conteneurContactAgences{
        height: 330px;
    }

    .deuxAgences{
        height: 450px;
    }

    .TroisAgences{
        height:600px;
    }

    .conteneurMail{
        width: 80%;
    }

    .conteneurSection4Agences3{
        height: 1400px;
    }

    .conteneurSpecialites{
        display: none;
    }

    .infosFrontPage, .infosFrontPage div, .slogan{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .infosFrontPage{
        margin: 0px;
    }

    .infosFrontPage div, .slogan span{
        text-align: center;
    }   

    .conteneurContexteContactAgences span{
        font-size: 1rem;
    }

    
}

@media screen and (max-width:560px) {
    .conteneurContexteCategorie{
        height: 730px;
    }
    
    .conteneurSection3Catégorie{
        height: 640px;
    }

    .conteneurSection2Catégorie{
        height: 800px;
    }

    .conteneurCategorie{
        width: 95%;
        height: 100%;
    }

    .conteneurEnteteCategorie .flexCentre h1{
        font-size: 1.3rem;
    }

    .contexteCategorie span{
        font-size: 1rem;
    }

    .presentation h1{
        font-size: 1.3rem;
    }

    .presentation span, .infosCartes{
        font-size: 1rem;
    }
    .contexteCarte h1{
        font-size: 1.6rem;
    }

    .Montage{
        height: 850px;
    }

    .conteneurContexteFormule, .conteneurSection2Loiret, .Chargement{
        height: 1050px;
    }

    .conteneurSection4Agences3{
        height: 1300px;
    }

    .TroisAgences{
        height: 670px;
    }

    .conteneurSection2CatégoriePartenaire{
        height: 1500px;
    }

    .conteneurSection2CatégorieRef{
        height: 1000vh;
    }
}

@media screen and (max-width:470px) {


    .frontPage{
        height: 600px;
    }

    .frontPage h1{
        font-size: 1.9rem;
    }

    .imgCarte img{
        height: 270px;
        margin-top: 50px;
    }

    .titreCategorieDemenagement{
        top:25%;
    }

    .sectionCarteAgences{
        height: 1100px;
    }

    .slogan{
        font-size: 1.6rem;
    }

    .titreCategorieDemenagement{
        width: 90%;
    }

    .titreCategorieDemenagement h1{
        font-size: 1.4rem;
    }

    .conteneurInfosLocation h1,     .conteneurInfosRedirection h1{
        font-size: 1.7rem;
    }

    .conteneurInfosService h1, .conteneurInfosProtection h1, .infosconteneurSection2Catégorie h1, .infosconteneurSection3Catégorie h1, .titreSection4 h1{
        font-size: 1.4rem;
        text-align: center;
    }

    .conteneurInfosProtection h1{
        text-align:center;
    }

    .conteneurImageProtection, .conteneurImageService, .conteneurImageLocation {
        width: 300px;
        height: 23%;
    }

    .conteneurInfosRedirection{
        height: 640px;
    }

    .conteneurSousPresentation{
        height: 750px;
    }

    .conteneurSectionFormule, .contexteCategorieRedirection{
        height: 820px;
    }

    .conteneurContexteCategorie{
        height: 820px;
    }

    .conteneurSection4Catégorie{
        height: 900px;
    }

    .notreMission{
        width: 80%;
    }

    .conteneurSection2Catégorie{
        height: 700px;
    }

    .conteneurSection4CatégorieTransport {
        height: 850px;
    }

    .conteneurContexteFormule{
        height: 1050px;
    }

    .conteneurSection4Transport{
        height: 1000px;
    }

    .conteneurSectionFormule img{
        width: 345px;
    }

    .enteteDemandeDeContact{
        width: 320px;
        height: 330px;
    }

    .demandeDeContact{
        width: 360px;
        height: 1300px;
    }

    .Message .input{
        width: 310px;
    }

    .conteneurSection4Contact{
        height: 2260Px;
    }

    .petitCar {
        width: 340px;
    }

    .conteneurSection2Contact{
        height: 570px;
    }

    .protection {
        height: 650px;
    }

    .conteneurContexteContact{
        height: 470px;
    }

    .footerCategorieTel{
        height: 600px;
    }

    .conteneurContexteChargement, .contexteCategorieRedirection, .conteneurContexteGardeMeuble, .conteneurSection4GardeMeuble{
        height: 750px;
    }

    .conteneurContexteMontage{
        height: 770px;
    }

    .conteneurContexteCTransport{
        height: 720px;
    }

    .infosconteneurSection3Catégorie h1, .titreSection4 h1 {
        margin: 25px;
        width: 100%;
    }

    .conteneurSection4Agences3{
        height: 1200px;
    }

    .TroisAgences{
        height: 720px;
    }

    .infosconteneurSection2Catégorie h1,.infosconteneurSection2Catégorie h1 span{
        font-size: 1.2Rem;
    }

    .titresection4Agence h1, .infosconteneurSection3Catégorie h1 span{
        font-size: 1.2rem;
    }

    .infosconteneurSection3Catégorie h1{
        font-size: 1.4rem;
    }

    .conteneurSection4Agences2 {
        height: 1300px;
    }

    .conteneurSection2CatégoriePartenaire{
        height: 1500px;
    }

    .cartePartenaire img{
        width: 60%;
    }

}

@media screen and (max-width:470px) {

    .conteneurSousPresentation{
        height: 600px;
    }

    .conteneur1AccueilProtection{
        height: 1000px;
    }

    .sectionCarteAgences{
        height: 1200px;
    }


    .conteneurSection2Loiret{
        height: 1100px;
    }
    

    .conteneurEnteteCategorie .flexCentre h1{
        font-size: 1rem;
    }

    .contexteCategorie span{
        font-size: 0.9rem;
    }
    
    .conteneurAgences {
        width: 125%;
    }

    .infosConteneurAPropos{
        justify-content: start;
    }
    
    .conteneurSection2Apropos{
        height: 1300px;
    }

    .conteneurValeur{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    
    }

    .conteneurSection2CatégorieRef{
        height: 1000vh;
    }
}

@keyframes overflow {
    from{
        overflow: hidden;
    }
    to{
        overflow:visible;
    }
}

@keyframes slideOn {
    from {
        top: 600; /* Position initiale à gauche de l'écran */
    }
    to {
        top: 0px; /* Position finale à 50px de la gauche */
    }
}

@keyframes slideFromRight {
    0% {
      right: -1000px; /* À droite, en dehors de l'écran */
    }
    100% {
      right: 0; /* À gauche, pleinement visible */
    }
}

@keyframes slideOn {
    from {
        top: 600; /* Position initiale à gauche de l'écran */
    }
    to {
        top: -50px; /* Position finale à 50px de la gauche */
    }
}
        
@keyframes overflow {
    from{
        overflow: hidden;
    }
    to{
        overflow:visible;
    }
}
        
@keyframes waviy {
    0%,40%,100% {
        transform: translateY(0)
    }
    20% {
        transform: translateY(-5px)
    }
}
        
@keyframes slideOn {
    from {
        top: 400px; /* Position initiale à gauche de l'écran */
    }
    to {
        top: 0px; /* Position finale à 50px de la gauche */
    }
}
        
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
        }
    100% {
        background-position: 0% 50%;
    }
}
        
@keyframes scaleOpacity {
    from{
        transform: scale(0);
        opacity: 0;
    }
    to{
        transform: scale(1);
        opacity: 1;
    }
}
        
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 2, 2, 0);
    }
    100% {
        box-shadow: 0 0 0 20 rgba(255, 0, 0, 0.7);
    }
}
        
@keyframes test {
    0%{
        opacity: 0;
    }
    100%{
        opacity:1;
    }
}