@import url('reset.css');
@import url('variable.css');
@import url('color.css');
@import url('police.css');


body{
    margin: 0;
    font-family: 'poppins';
}

main{
    background:
    radial-gradient(ellipse at 10% 35%, #cfeeff 0%, transparent 30%),   
    radial-gradient(ellipse at 25% 65%, #d0f0ff 0%, transparent 30%),  
    #ffffff;
    background-attachment: fixed;
}

/* HEADER */
.atterissage{
    background:
    radial-gradient(ellipse at 75% 35%, #cfeeff 0%, transparent 30%),   
    radial-gradient(ellipse at 20% 70%, #d0f0ff 0%, transparent 30%),  
    #ffffff;    
}

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

.titre-cta h1{
    font-size: 70px;
    font-weight: 600;
    line-height: 110%;
    text-align: center;
    margin-bottom: 40px;
}

.titre-cta h2{
    color: #6B7280;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    width: 60%;
    margin-top: 0;
    margin-bottom: 40px;
}

/* BARRE DU BAS dans 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: 40px 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 */


/* EXPERTISES */

.expertises{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 3px solid #6B7280;
    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;
    margin: 20px 0;
}

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

.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;
    margin: 20px 0;
}

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

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

.shape-to{
    visibility: hidden;
}

/* FIN EXPERTISES */

/* .carouselle{
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-bottom: 60px;
    
}

.carousel-infini{
    display: flex;
    align-items: center;
    width: 100%;
    overflow-x: auto;
}

.carousel-infini::-webkit-scrollbar{
    display: none;
}

.group-infini{
    display: flex;
    gap: 4em;
    animation: spin 15s infinite linear;
    padding-right: 4em;
}

.group-infini2{
    display: flex;
    gap: 4em;
    animation: spin 15s infinite linear;
    animation-direction: reverse;
    padding-right: 4em;
}

.logos-technos{
    display: flex;
    flex: 0 0 5em;
    align-items: center;
    justify-content: center;
    height: 80px;
    background-color: white;
    border: 0.8px solid #F3F4F6;
    border-radius: 16px;
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

@keyframes spin{
    from {translate: 0;}
    to {translate: -100%;}
} */

.carouselle{
  display:flex;
  flex-direction:column;
  gap:3em;
  margin-bottom:60px;
}

.carousel-infini{
  width:100%;
  overflow:hidden;       
}

.carousel-track{
  display:flex;
  flex-wrap:nowrap;          
  width:max-content;          
  will-change:transform;
  transform:translate3d(0,0,0);
  animation: marquee 15s linear infinite;
}

.group-infini{
  display:flex;
  flex-wrap:nowrap;    
  gap:4em;
  padding-right:4em;
  flex-shrink:0;
  animation:none !important;  
}

.group-infini2{
  display:flex;
  flex-wrap:nowrap;       
  gap:4em;
  padding-right:4em;
  flex-shrink:0;
  animation:none !important;  
}

.logos-technos{
  display:flex;
  align-items:center;
  justify-content:center;
  height:80px;
  width:80px;                
  flex:0 0 auto;          
  background:#fff;
  border:0.8px solid #F3F4F6;
  border-radius:16px;
  box-shadow:0px 1px 2px -1px rgba(0,0,0,.1),
             0px 1px 3px 0px rgba(0,0,0,.1);
}

@keyframes marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}


.carousel-infini.reverse .carousel-track{
  animation-direction: reverse;
}




.cards-stack{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 0;
}

.cards-stack-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: -100px;
}

.card-wrapper {
    min-height: 40vh;
    height: 40vh;
    padding-top: 15vh;
    position: relative;
    width: 100%;
    margin: auto;
    
}

/* Last card wrapper gets extra bottom padding and increased height */
.card-wrapper:last-of-type {
    height: 85vh; /* 70vh + 15vh extra to account for bottom padding */
    /* padding-bottom: 15vh; */
}

/* The card fills the wrapper's width and remaining height in normal wrappers */
.card-s {
    display: flex;
    flex-direction: row;
    max-width: 70%;
    height: calc(65vh - 15vh); /* 55vh */
    margin: 0 auto;
    background: white;
    border: 2px solid #F3F4F6;
    border-radius: 10px;
    padding: 50px 0px 0px 50px;
    box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.10);
    box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.10);
    overflow: hidden;
    transition: none !important;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* In the last wrapper, adjust card height to account for extra bottom padding */
.card-wrapper:last-of-type .card {
    height: calc(85vh - 30vh); /* 85 - (15+15) = 55vh */
}

.right-card-s{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    width: 50%;
}

.titre-card-s{
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-end;
   gap: 20px; 
}

.titre-card-s h3{
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 600;
    color: #0F268B;
    padding: 0;
    margin: 0;
}

.right-card-s p{
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    margin: 0;
}

.p-card-s{
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: 0;
}

.btn-card-s{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 400;
    background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.30);
    box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.30);
    border-radius: 100px;
    width: 275px;
    height: 35px;
    position: relative;
    z-index: 0;
    transition: transform 0.3s ease;
}

.btn-card-s::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
  left: 0;
  top: 0;
  border-radius: 15px;
}

.btn-card-s::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;}
}

.btn-card-s:hover::before {
  opacity: 1;
}

.btn-card-s:hover{
    transform: translateY(-6px);
}

.btn-card-s1{
        display: none;
}

.left-card-s{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 50%;
    height: 100%;
}

.photo-card-s{
    width: 400px;
    height: 330px;
    overflow: hidden;
}

.photo-card-s img{
    width: 400px;
    height: 400px;
    border-top-left-radius: 20px;
    z-index: 1;
}

.numero-card-s{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 600;
    background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
    box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.30);
    box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.30);
    width: 80px;
    height: 80px;
    border-radius: 15px;
    z-index: 2;
    position: relative;
    top: 5vh;
    right: 3vw;
}

.numero-card-s1{
    display: none;
}

.svg-card-s{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    background-color: rgb(0, 163, 255, 0.1);
    border-radius: 10px;
}

.background-bleu{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: 
    linear-gradient(180deg, #00a2ffa4 0%, #00a3ff 100%);
}

.titre-propos{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.titre-propos p{
    text-align: center;
    width: 60%;
    color: white;
    font-size: 18px;
    font-weight: 400;
}

.group-cards-blanc{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 40px 0 40px 0
}

.cards-blanc1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 50%;
}

.cards-blanc2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 50%;
}

.cards-blanc{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 230px;
    height: 240px;
    gap: 10px;
    border: 1px solid #F3F4F6;
    border-radius: 15px;
    box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.10);
    box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.10);
    transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cards-blanc:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.cards-blanc p{
    text-align: center;
    color: #6B7280;
    font-size: 16px;
    margin: 0;
}

.titre-p{
    font-size: 30px;
    font-weight: 600;
    color: #0F268B;
}

.logo-back-bleu{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
    border-radius: 100px;
}

.avis{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.group-cards-avis{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));     
    align-items: stretch;   /* toutes les cartes ont la même hauteur par ligne */
    gap: 50px;
    width: 100%;
    margin-top: 60px;
}

.cards-avis{
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
    "stars"
    "text"
    "client";
    gap: 50px;
    align-items: stretch;
    background-color: white;
    border: 1px solid #F3F4F6;
    border-radius: 15px;
    padding: 30px;
    min-width: 200px;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease;
    transform: scale(1);
}

.cards-avis::before {
  content: "";
  position: absolute;
  inset: 0;                  
  border-radius: inherit;
  background: repeating-conic-gradient(
    from var(--a),
    #00A3FF 0%,
    #00A3FF 5%,
    transparent 5%,
    transparent 40%,
    #00A3FF 50%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  animation: animate 4s linear infinite;
  z-index: 0;
}

.cards-avis::after {
  content: "";
  position: absolute;
  inset: 2px;                 
  border-radius: inherit;
  background: #ffffff;
  z-index: 1;
}

.cards-avis > * {
  position: relative;
  z-index: 2;
}

.cards-avis:hover::before {
  opacity: 1;
}

@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes animate {
  0%   { --a: 0deg; }
  100% { --a: 360deg; }
}

.cards-avis:hover{
    transform: scale(1.04);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.texte-avis{
    grid-area: text;
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

.etoile-plein{
    grid-area: stars;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nom-client{
    display: flex;
    flex-direction: column;
}

.nom-client p{
    margin: 0;
}

.nom-client span{
    font-size: 16px;
    font-weight: 600;
    color: #0F268B;
}

.client{
    grid-area: client;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.logo-client{
    width: 50px;
    height: 50px;
}

.logo-client img{
    width: 50px;
    height: 50px;
}




/* Section "Nos derniers articles" */

.articles{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
}

.group-cards-articles{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; /* espace entre les cartes */
    padding: 0 50px 0 50px;
    margin-bottom: 40px;
}

.cards-articles{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: white;
    border: 2px solid #BCBCBC;
    border-radius: 15px;
    width: 100%;
    min-height: 550px;
    overflow: hidden;
}

.articles-haut{
    flex: 0 0 35%; /* 35% de la hauteur de la carte */
    position: relative;
    width: 105%;
    height: 35%;
}

.articles-bas{
    max-width: 100%;
    height: 65%;
    flex: 0 0 65%; /* 65% de la hauteur de la carte */
    display: flex;
    flex-direction: column;
    margin: 0 20px 20px 20px;
    gap: 20px;
}

.articles-bas h3{
    font-size: 28px;
    font-weight: 600;
    color: #0F268B;
    max-width: 80%;
    line-height: 1.2;
    margin: 0;
}

.articles-bas p{
    
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    margin: 0;
}

.date{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    gap: 5px;
    margin: 10px 0 0 0;
}

.date p{
    font-size: 14px;
    color: #6B7280;
    font-weight: 400;
    text-align: center;
}

.photo-articles{
    overflow: hidden;
    width: 105%;
    height: 100%;
}

.photo-articles img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.photo-articles img:hover{
    transform: scale(1.08);
}

.articles-bas a {
    display: flex;
    align-items: center;
    margin-top: auto;
    margin-bottom: 40px; 
    font-weight: 500;
    color: #00A3FF;
    text-decoration: none;
    font-size: 14px;
    gap: 5px;
    transition: 0.3s ease;
}

.articles-bas a:hover{
    transform: translateY(-8px);
    opacity: 0.9
}

/* Fin section "Nos derniers articles" */

/* Section Contact */

.contact{ 
    padding-top: 40px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formulaire-contact{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2%;
}

.titre-texte-contact{
    margin-bottom: 60px;
    max-width: 80%;
}

.titre-texte-contact h2{
    font-size: 50px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0;
    text-align: center;
}

.titre-texte-contact p{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin: 0;
}

.cln-left{
    display: flex;
    flex-direction: column;
    width: 40%;
}

.cln-left form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);      
    border: 1px solid rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    padding: 30px 20px 30px 20px;
    gap: 20px;
}

.boite{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.boite label{
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.boite input{
    font-family: 'poppins';
    font-size: 14px;
    color: #fff;
    padding-left: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);      
    border: 1px solid rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 5vh;
}

.boite textarea{
    font-family: 'poppins';
    font-size: 14px;
    color: #fff;
    padding-left: 10px;
    padding-top: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);      
    border: 1px solid rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 5vh;
}

#charCount{
    font-size: 12px;
    margin: 0;
    align-self: flex-end;
    color: gray;
}

.btn-form{
    background-color: var(--color-white);
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    color: #000 !important;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: none;
    gap: 20px;
    cursor: pointer;
    overflow: hidden;    
    position: relative;
    transition: 0.3s ease;
}

.btn-form:hover{
    transform: translateY(-4px);
    opacity: 0.9;
}

.btn-check {
    width: 20px;
    height: 20px;
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-form.sending .btn-check {
    opacity: 1;
    transition-delay: 1s; 
    transform: none;
}

.btn-form.reset .btn-check {
    opacity: 0;
}


.btn-form .icon-wrap {
    display: flex;
    transition: transform 2s ease, opacity 2s ease;
}

.btn-form svg {
    transition: transform 0.35s ease;
}

.btn-form .btn-text {
  transition: opacity 0.3s ease;
}

.btn-form.sending .btn-text {
  opacity: 0; 
}

.btn-form.sending .svg-plane {
  transform: rotate(45deg);
}

.btn-form.sending .icon-wrap {
  transform: translateX(500px); 
  opacity: 0;                   
}

.btn-form.returning .icon-wrap {
  transform: translateX(-30000px); 
  opacity: 0;
}

.btn-form.reset .icon-wrap {
  transform: translateX(0);
  opacity: 1;
}

.cln-right{
    display: flex;
    flex-direction: column;
    width: 40%;
    gap: 30px;
}

.cube{
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);      
    border: 1px solid rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 30px 35px 30px;
    gap: 20px;
}

.cube ul{
    display: flex;
    flex-direction: column;
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.cube li{
    font-size: 16px;
    font-weight: 400;
    color: white;
}

.qr-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  border-radius: 15px;              
  align-items:center;
  justify-content:center;
  z-index: 9;
}

.qr-box{
  position:relative;
  width:360px;
  background:#fff;
  border-radius:14px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}

.qr-img{
  width:220px;
  margin:0 auto;
  height:auto;
}

.qr-number{
  font-weight:600;
  margin-top:6px;
  color: black;
}

.qr-close{
  position:absolute;
  top:10px;
  right:12px;
  background:transparent;
  border:0;
  font-size:26px;
  cursor:pointer;
}

.texte-blanc{
    text-align: center;
    color: white;
    font-size: 14px;
    font-weight: 400;
}

.texte-blanc-r{
    color: white;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.cards-title {
    font-size: 24px;
    font-weight: 400;
    color: white;
}

/* Fin section contact */

/* FOOTER */

footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    background:
    /* radial-gradient(ellipse 50% 50% at 75% 35%, #ffffff20 0%, transparent 200%),   
    radial-gradient(ellipse 50% 50% at 20% 70%, #ffffff20 0%, transparent 150%), */
    linear-gradient(180deg, #0F268B 0%, #042DE4 100%); 
}









/* .navigation-footer li{
    
} */
























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

@media (max-width: 1220px) {
    .group-cards-articles{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .articles-bas a{
        margin-bottom: 0;
    }

    .cards-articles{
        max-width: 80%;
        min-height: auto;
    }

    .surlignage{
        background-position: 1 100%;
        background-size: 100% 10px;
    }

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

    .cards-stack-container{
        margin-top: 0;
    }
    
    .card-wrapper {
    width: 95vw;       
    padding-top: 8vh;   /* profondeur de l'animation */
    
    }

    .card-wrapper:last-of-type {
        height: 100vh;
        /* padding-bottom: 10vh;  espace en bas */
    }

    .card-s {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 70%;
        height: 80vh;        /* (55vh → 80vh) */
        padding: 30px 0 0 0;
        
    }

    .card-wrapper:last-of-type .card {
        height: 80vh;
    }

    .right-card-s{
        align-items: center;
        gap: 20px;
    }

    .right-card-s p{
        text-align: center;
    }

    .left-card-s{
        align-items: center;
        width: 100%;
    }

    .photo-card-s{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500px;
        height: 250px;
        border-radius: 20px 20px 0 0 ;
    }

    .photo-card-s img{
        width: 500px;
        height: 500px;
    }

    .numero-card-s{
        display: none;
    }

    .numero-card-s1{
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        font-weight: 600;
        background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
        box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.30);
        box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.30);
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        border-radius: 15px;
        z-index: 2;
    }

    .logo-card-s{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .svg-card-s{
        width: 40px;
        height: 40px;
    }

    .group-cards-blanc{
        flex-direction: column;
        gap: 50px;
        width: 100%;
        justify-content: center;
    }

    .cards-blanc1{
        gap: 50px;
        width: 100%;
        justify-content: center;
    }

    .cards-blanc2{
        gap: 50px;
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 900px) {
    

    

    

    
    

    .cube li{
        font-size: 14px;
    }
    
    .texte-blanc-r{
        font-size: 14px;
    }

    .cards-title{
        font-size: 20px;
    }

    .titre-texte-contact h2{
        font-size: 32px;
    }

    .titre-texte-contact p{
        font-size: 16px;
    }

    .articles-bas h3{
        font-size: 22px;
    }

    .articles-bas p{
        font-size: 14px;
    }

    .surlignage{
        background-position: 1 100%;
        background-size: 100% 8px;
    }

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

    .titre-cta h2{
        font-size: 16px;
        width: 70%;
    }

    .barre-bas{
        flex-direction: column;
    }

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

    .retour{
        font-size: 18px;
    }

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

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

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

    .titre-propos p{
        font-size: 16px;
    }

    .group-cards-avis{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cards-avis{
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 0;
    }
}

@media (max-width: 800px) {
    .photo-card-s{
        width: 100%;
        height: 200px;
    }

    .photo-card-s img{
        width: 500px;
        height: 500px;
    }

    .photo-card-s{
        border-radius: 0;
    }

}

@media (max-width: 700px) {
    .qr-modal{ 
        display:none !important; 
    }

    .cln-right{
        width: 80%;
    }

    .cln-left{
        width: 80%;   
    }

    .formulaire-contact{
        flex-direction: column;
        align-items: center;
    }

    .surlignage{
        background-position: 1 100%;
        background-size: 100% 6px;
    }

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

    .card-s{
        max-width: 80%;
    }

    .right-card-s{
        width: 70%;
        gap: 30px;
    }

    .photo-card-s img{
        width: 390px;
        height: 390px;
    }

    .titre-card-s h3{
        font-size: 20px;
    }

    .cards-blanc1{
        flex-direction: column;
    }

    .cards-blanc2{
        flex-direction: column;
    }
}

@media (max-width: 500px) {
    .titre-texte-contact{
        font-size: 28px;
    }

    .articles-bas h3{
        font-size: 18px;
    }

    .cards-articles{
        max-width: 100%;
    }

    .surlignage{
        background-position: 1 100%;
        background-size: 100% 5px;
    }

    .repartition{
        flex-direction: column;
    }

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

    .btn-cta-noir{
        font-size: 14px;
    }

    .btn-cta-trans{
        font-size: 14px;
    }

    .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%;;
    }

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

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

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

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

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

    .logos-technos{
        /* width: 50px; */
        max-height: 50px;
    }

    .logos-technos svg{
        max-height: 35px;

    }

    .group-infini{
        gap: 2em;
        padding-right: 2em;
    }

    .group-infini2{
        gap: 2em;
        padding-right: 2em;
    }

    .carouselle{
        gap: 2em;
    }

    .titre-card-s h3{
        font-size: 16px;
    }

    .p-card-s p{
        font-size: 14px;
    }

    .card-s{
        padding: 40px 0 0 0;
    }

    .right-card-s{
        gap: 35px;
    }

    .btn-card-s{
        display: none;
    }

    .btn-card-s1{
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: white;
        background: linear-gradient(180deg, #00A3FF 0%, #47C2FF 100%);
        box-shadow: 0px 4px 6px -4px rgba(0, 163, 255, 0.30);
        box-shadow: 0px 10px 15px -3px rgba(0, 163, 255, 0.30);
        border-radius: 100px;
        font-size: 13px;
        font-weight: 400;
        padding: 8px 16px 8px 16px;
        width: fit-content;
        height: fit-content;
        margin-bottom: 50px;
    }

    .photo-card-s img{
        width: 370px;
        height: 370px;
    }

    .cards-blanc{
        width: 200px;
        height: 210px;
    }

    .logo-back-bleu{
        width: 44px;
        height: 44px;
    }

    .logo-back-bleu svg{
        width: 25px;
    }

    .cards-blanc p{
        font-size: 14px;
    }
    
}

@media (max-width: 450px){
    .photo-card-s img{
        width: 330px;
        height: 330px;
    }

}

@media (max-width: 400px){
    .photo-card-s img{
        width: 300px;
        height: 300px;
    }

}