/* HERO SECTION */
html{
    overflow-x: hidden;
}

.atterissage{
    background:
    radial-gradient(ellipse 90% 140% at 20% 40%, #cfeeff 0%, transparent 30%),   
    radial-gradient(ellipse 90% 100% at 75% 65%, #d0f0ff 0%, transparent 30%),  
    #ffffff; 
}

.surlignage{
    text-transform: uppercase;
}

.titre-cta{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    
}

.titre-cta h1{
    font-size: 65px;
    font-weight: 600;
    line-height: 110%;
    text-align: center;
    margin: 0;
    max-width: 90%;
}

.titre-cta h2{
    font-size: 42px;
    font-weight: 500;
    text-align: center;
    color: black;
    margin: 20px 0 0 0;
    line-height: 1.1;
    max-width: 70%;
}

.titre-cta p{
    color: #6B7280;
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    width: 60%;
    margin: 26px 0 26px 0;
}

.slide-processus{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
    margin: 10px;
}

.smallBlue{
    text-transform: uppercase;
    color: #00A3FF;
    font-size: 20px;
    width: fit-content;
}



/* FIN HERO SECTION */



/* BARRE DU BAS en dessous de la hero section */

.barre-bas{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 70px;
    margin: 0 40px 0px 40px;
    flex-wrap: wrap;
    background-color: #1A3A9E;
    border-radius: 50px 50px 0 0;
    gap: 120px;
}

.barre-bas-sep{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: 120px;
}

.repartition{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

}

.retour{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 400;
}

.retour p{
    margin: 0;
}

/* FIN BARRE DU BAS */

.lineAbsolute{
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: rgba(0, 163, 255, 1);

}


/* NOTRE PROCESSUS */


/* ETAPE TEXTE */

.notre-processus{
    display: flex;
    flex-direction: row;
    gap: 150px;
    background:
    radial-gradient(ellipse 130% 130% at 75% 35%, #cfeeff 0%, transparent 30%),   
    radial-gradient(ellipse 130% 130% at 20% 65%, #d0f0ff 0%, transparent 30%),  
    #ffffff;
    background-attachment: fixed;
    padding: 0 0 70px 0;
}

.container-etape{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 300px 0 340px 0;
    width: 60%;   
}

.etape4{
    margin: 0 0 50px 0;
}

.etape h3{
    font-family: 'Karla';
    font-size: 50px;
    font-weight: 400;
    color: #0F268B;
    margin: 0 0 10px 0;
}

.etape p{
    font-family: 'Karla';
    font-size: 25px;
    font-weight: 400;
    color: #364153;
    text-transform: uppercase;
    margin: 0;
}

/* FIN ETAPE TEXTE */

/* SVG DESKTOP */
/* .svgProcessus{
    width: 30%;
} */

.svgProcessus svg{
    width: 100%;
    overflow: visible;
}

.stepIcon1, 
.stepIcon2, 
.stepIcon3, 
.stepIcon4, 
.stepIcon5,
.stepIcon21,
.stepIcon22,
.stepIcon23,
.stepIcon24,
.stepIcon25,
.ball
 {
    visibility: hidden;
}

/* FIN SVG DESKTOP */

/* SVG MOBILE */

.svgProcessusMobile{
    display: none;
}

/* SVG MOBILE */

/* FIN NOTRE PROCESSUS */

.faq-agence-web{
    background: linear-gradient(180deg, #2AB3FF, #87D4FF);
    padding: 0 0 50px 0;
}


/* EXPERTISES */

.expertises{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
}

.cards-expertises{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px; 
}

.cards-haut-expertises{
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.cards-bas-expertises{
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.blanche-expertises{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0px 0px 30px;
    background-color: white;
    border: 1.6px solid #D1D5DC;
    border-radius: 15px;
    box-shadow: 0px 10px 26px 0px rgba(0, 163, 255, 0.10);
    max-width: 360px;
    min-height: 330px;
    text-decoration: none;
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease;
}

.blanche-expertises h3{
    font-size: 20px;
    font-weight: 600;
    color: #0F268B;
}

.blanche-expertises p{
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    max-width: 90%;
}

.gris-expertises{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0px 0px 30px;
    background-color: #f6f6f6;
    border: 1.6px solid #D1D5DC;
    border-radius: 15px;
    box-shadow: 0px 10px 26px 0px rgba(0, 163, 255, 0.10);
    max-width: 360px;
    min-height: 330px;
    text-decoration: none;
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease;
}

.gris-expertises::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  left: 0;
  top: 0;
  border-radius: 15px;
}

.gris-expertises::before {
  content: "";
  background: linear-gradient(
    45deg,
    #60c5ff, #abedff, #60c5ff, #cdefff,
    #60c5ff, #b6f0ff, #60c5ff, #b8f1ff
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 40s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

.gris-expertises:hover::before {
  opacity: 1;
}

.gris-expertises:hover{
    transform: translateY(-6px);
}

.blanche-expertises::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  left: 0;
  top: 0;
  border-radius: 15px;
}

.blanche-expertises::before {
  content: "";
  background: linear-gradient(
    45deg,
    #60c5ff, #abedff, #60c5ff, #cdefff,
    #60c5ff, #b6f0ff, #60c5ff, #b8f1ff
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 40s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

.blanche-expertises:hover::before {
  opacity: 1;
}

.blanche-expertises:hover{
    transform: translateY(-6px);
}

.gris-expertises h3{
    font-size: 20px;
    font-weight: 600;
    color: #0F268B;
}

.gris-expertises p{
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    max-width: 90%;
}

.current-expertise {
    border: 2px solid #2AB3FF;
    animation: pulseBorder 2s infinite ease-in-out;
}

@keyframes pulseBorder {
    0% { border-color: rgba(42,179,255,0.2); }
    50% { border-color: rgba(42,179,255,1); }
    100% { border-color: rgba(42,179,255,0.2); }
}

.pointerLoc{
    width: 24px;
    position: absolute;
    bottom: 5px;
    right: 15px;
}

.pointerChange{
    width: 24px;
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.pin {
  transform-box: fill-box;                 /* important pour SVG */
  transform-origin: 50% 100%;             /* centre-bas = la pointe */
  transition: transform 0.2s ease;
}

@keyframes pinWiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(6deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.shape-to{
    visibility: hidden;
}

/* FIN EXPERTISES */





@media (max-width: 1290px){
    .barre-bas{
        gap: 40px;
        padding: 20px;
    }

    .container-etape{
        padding: 300px 0 250px 0;
    }

    .etape4{
        padding: 0 0 0px 0;
    }

}

@media (max-width: 1220px){
    .titre-cta h1{
        font-size: 52px;
    }

    .titre-cta h2{
        font-size: 42px;
    }

    .container-etape{
        width: 65%;
        padding: 300px 0 280px 0;
    }

}

@media (max-width: 1180px){
    .container-etape{
        width: 67%;
        padding: 300px 0 250px 0;
    }

}

@media (max-width: 1130px){
    .container-etape{
        width: 65%;
        padding: 300px 0 180px 0;
    }

    .etape5{
        margin: 0 0 40px 0;
    }

}

@media (max-width: 1030px){
    .container-etape{
        max-width: 60%;
        padding: 300px 0 130px 0;
    }

    .svgProcessus{
        max-width: 30%;
    }

    .etape1{
        width: 95%;
    }

    .etape4{
        margin: 0 0 0px 0;
    }

    .etape5{
        margin: 0 0 80px 0;
    }

}

@media (max-width: 900px){
    .barre-bas{
        flex-direction: column;
    }

    .barre-bas-sep{
        flex-direction: column;
        gap: 40px;
    }

    .retour{
        font-size: 18px;
    }

    .repartition svg{
        width: 42px;
        height: 42px;
    }

    .titre-cta p{
        width: 70%;
    }

    .etape h3{
        font-size: 43px;
    }

    .etape p{
        font-size: 20px;
    }

    .container-etape{
        max-width: 50%;
        padding: 300px 0 210px 0;
    }

    .etape1{
        width: 100%;
    }

    .cards-haut-expertises {
        flex-direction: column;
    }

    .cards-bas-expertises {
        flex-direction: column-reverse;
    }

}

@media (max-width: 875px){
    .container-etape{
        max-width: 50%;
        padding: 300px 0 190px 0;
    }

    .etape1{
        width: 100.5%;
    }  
    
    .etape5{
        width: 95%;
    }
}

@media (max-width: 836px){
    .container-etape{
        padding: 300px 0 180px 0;
    }
    .etape1{
        width: 100%;
    }

    .etape2{
        width: 100%;
    }

    .etape3{
        width: 100%;
    }

    .etape4{
        width: 90%;
        margin: -50px 0 0 0;
    }

    .etape5{
        width: 105%;
        margin: 0 0 50px 0;
    }
}

@media (max-width: 800px){
    .etape p{
        font-size: 19px;
    }

    .etape4{
        width: 90%;
    }
}

@media (max-width: 800px){
    .etape p{
        font-size: 18px;
    }

    .etape4{
        width: 90%;
    }
}

@media (max-width: 700px){
    .notre-processus{
        gap: 15%;
    }

    .svgProcessus{
        display: none;
    }

    .svgProcessusMobile{
        display: block;
    }

    .svgProcessusMobile svg{
        position: relative;
        left: -15px;
        overflow: visible;
    }

    .container-etape{
        min-width: 100%;
        gap: 170px;
        padding: 200px 0 300px 0;
    }

    .etape{
        width: 60%;
    }

    .etape h3{
        font-size: 28px;
    }

    .etape p{
        font-size: 16px;
    }

    .titre-cta h1{
        font-size: 38px;
    }

    .titre-cta h2{
        font-size: 30px;
    }

    .titre-cta p{
        font-size: 14px;
        width: 70%;
    }

    .etape2{
        margin: 10px 0 0 0;
    }

    .etape3{
        margin: 0px 0 0px 0;
    }

    .etape4{
        margin: 0 0 20px 0;
    }

    .etape5{
        margin: 0 0 60px 0;
    }

}

@media (max-width: 630px){
    .etape2{
        margin: 20px 0 0 0;
    }

    .etape3{
        margin: 0 0 -10px 0;
    }

    .etape4{
        margin: 0 0 0px 0;
    }

    .etape5{
        margin: 0 0 10px 0;
    }

}

@media (max-width: 500px){
    .repartition{
        flex-direction: column;
    }

    .container-etape{
        padding: 200px 0 300px 0;
    }

    .titre-cta p{
        font-size: 14px;
        width: 70%;
        margin: 20px 0 20px 0;
    }

    .cards-haut-expertises {
        flex-direction: column;
        align-items: center;
    }

    .cards-bas-expertises {
        flex-direction: column-reverse;
        align-items: center;
    }

    .blanche-expertises {
        max-width: 250px;
        height: 100%;;
    }

    .blanche-expertises h3{
        font-size: 16px;
    }

    .blanche-expertises p{
        font-size: 14px;
    }

    .gris-expertises {
        max-width: 250px;
        height: 100%;
    }

    .gris-expertises h3{
        font-size: 16px;
    }

    .gris-expertises p{
        font-size: 14px;
    }

    .container-etape{
        padding: 200px 0 250px 0;
    }

    .etape3{
        margin: 0 0 -50px 0;
    }

    .etape4{
        margin: 0 0 30px 0;
    }

    .etape5{
        margin: 0 0 50px 0;
    }

}

@media (max-width: 440px){
    .container-etape{
        padding: 200px 0 260px 0;
    }

    .etape2{
        margin: 0px 0 0 0;
    }

    .etape3{
        margin: 0 0 -40px 0;
    }

    .etape4{
        margin: 0 0 20px 0;
    }

    .etape5{
        margin: 0 0 40px 0;
    }

    .etape5 h3{
        width: 105%;
    }
    
}

@media (max-width: 400px){
    .container-etape{
        padding: 200px 0 280px 0;
    }

    .etape2{
        margin: -10px 0 0 0;
    }

    .etape3{
        margin: 0 0 -30px 0;
    }

    .etape4{
        margin: 0 0 0px 0;
    }

    .etape5{
        margin: 0 0 0px 0;
        width: 65%;
    }

    .etape5 p{
        width: 95%;
    }

    
}