@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}
body .service-sous-menu p{
    position: relative;
    top: 10px;
    cursor: pointer;
    font-family: inter;
}
body{
  background: var(--bg-white);
  color: var(--color-white);
}
@keyframes bounce-zoom {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
 .bouton-principal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 25px;
  box-shadow: var(--shadow-black);
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden; 
  transition: all 0.3s ease;
  color: white;
  background: var(--color-blue);  
  transform: translateY(-6px);
}
 .bouton-principal:before{
  content: '';
  position: absolute;
  width: 150%;
  border-radius: 15px;
  height: 250%;
  background: var(--gradient-mix);
  animation: rotate 4s linear infinite;
  transition: all 0.1s linear;
  z-index: -4;
 }
.bouton-principal:after{
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  background: var(--gradient-orange);
  z-index: -4; 
}

.bouton-principal:hover {
background: var(--color-white);  
transform: translateY(-6px);
box-shadow: var(--shadow-blue);
}

/* Gestion du texte */
.bouton-principal span {
  display: inline-block;
  position: relative;
  line-height: 1em;  /* pour éviter que les deux lignes se voient */
  transition: transform 0.4s ease;
}
.bouton-principal:hover h5 {
  filter: blur(1.2px);
  opacity: 0.6;
}
.bouton-principal span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 800%;                  /* placé en dessous */
  width: 100%;
}

.bouton-principal:hover span {
  transform: translateY(-800%); /* monte et cache le premier texte */
}

/* Icône */
.bouton-principal i {
  transition: transform 0.3s ease, color 0.3s ease;
}

.bouton-principal:hover i {
  transform: translateX(4px);
  color: blue;
}

@media (max-width: 768px) {
  .bouton-principal{
    padding: 15px;
    width: 100%;
    justify-content: center;
  }
}
/***************************************************/
        /*********section  design*****/
.hero-design {
    position: relative;
    height: 90vh;
    display: flex;
    overflow: hidden;
    text-align: center;
background: var(--gradient-hero);
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: dashed 1px var(--color-primary-blue) ;
 box-shadow: var(--shadow-gradient);       
}
.hero-video {
   position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 90vh;
  object-fit: cover; /* pour couvrir toute la carte sans déformer */
  z-index: 0;
  opacity: 0.2;
}
.cyber-overlay {
  position: absolute;
    background: var(--gradient-hero);
  z-index: -5;
}
.hero-design .hero-content-design {
  position: relative;
  top: 50px;
    max-width: 800px; 
    margin: 0 auto;
    padding: 2rem;
    animation: bounce-zoom 0.8s ease-out;
}

.hero-design h2{
  font-size: 40px;
  text-align: justify;
  display: none;
}
.hero-design h2 span{
  color: var(--color-orangered);
}

/*  Paragraphe stylisé */
.hero-design p {
    text-align: justify;          
    text-justify: inter-word;     
    line-height: 1.8;            
    font-size: 1.1rem;
    padding: 20px;              
    background: var(--bg-text-hero); 
    border-left: 4px solid var(--color-accent); 
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/*************************************************/
    /******responsive***************/
@media (max-width: 768px) {
          /**************************/
    /*********section design *****/

.hero-content-design{
  position: relative;
  top: 20px;
  max-width: 100%;
   margin: auto;
   padding: 10px;
  z-index: 100;
}
.hero-video {
   height: 100vh;
}
.hero-content-design h2{
  font-size: 20px;
}
.hero-content-design p {
  font-size: 1rem;
  margin: 0rem 0;               
}
}
@media screen and (min-width: 200px) and (max-width: 320px) {
  .hero-content-design {
    position: relative;
    top: 100px;
  }
}
  
/**********************************************************/
   /* ================= HERO MARKETING ================= */
.marketing-hero {
position: relative;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: var(--color-black);
    text-align: center;
    background-color: var(--color-white-gray);
}

.marketing-hero .card-hero-marketing {
  display:flex ;
  gap: 20px;
  position: relative;
  top: 50px;
   justify-content: center;
    align-items: center;
}

.marketing-hero .hero-content-marketing {
  text-align: justify;
  width: 80%;
}

.marketing-hero .hero-content-marketing h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--color-orangered);
}

.marketing-hero .hero-content-marketing h1 span {
  color: var(--color-blue);
}

.marketing-hero .hero-content-marketing p {
  line-height: 1.5;
  font-size: 1.1rem;
  padding: 25px;
  color: black;
  background: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-left: solid 6px var(--color-accent);
  border-radius: 6px;
}
.btn-cta-marketing{
  position: relative;
  top: 55px;
  display: none;
}
.marketing-hero .btn-card-marketing {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.marketing-hero .btn-cta-marketing h3 span{
  color: var(--color-orangered);
}

.marketing-hero .image-de-presentaion {
  width: 70%;
  position: relative;
  left: 10px;
  top: -10px;
}

.marketing-hero .image-de-presentaion img {
  max-width: 100%;
  animation: floaty 6s ease-in-out infinite;
}

/* animation flottante */
@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* responsive */
@media (max-width: 900px) {
  /* ================= HERO MARKETING ================= */
.marketing-hero .card-hero-marketing {
  display:flex ;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.marketing-hero .image-de-presentaion {
  width: 60%;
  position: relative;
  left: 10px;
  top: 0px;
}
}
@media (max-width: 768px) {
  
  /* ================= HERO MARKETING ================= */
   .marketing-hero{
    height: 120vh;
   }
  .marketing-hero .card-hero-marketing {
  display:flex ;
  flex-direction: column-reverse;
  gap: 0px;
  padding: 0;
  position: relative;
}

.marketing-hero .hero-content-marketing {
  text-align: justify;
  width: 100%;
}

.marketing-hero .hero-content-marketing h1 {
  font-size: 20px;

}
.marketing-hero .hero-content-marketing p {
  font-size: 1rem;
  position: relative;
  top: -50px;
}
.marketing-hero .btn-cta-marketing h3{
  font-size: 15px;
}
.marketing-hero .image-de-presentaion {
  width: 100%;
  position: relative;
  top: 0px;
}
.marketing-hero .image-de-presentaion{
  margin: 0;
  position: relative;
  left: 0;
  top: 0;
}
.marketing-hero .image-de-presentaion img {
  max-width: 120%;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.btn-cta-marketing{
  position: relative;
  top: 0;
  margin: 40px 0;
  text-align: center;
}
}
@media screen and (min-width: 200px) and (max-width: 320px) {
 .marketing-hero .hero-content-marketing {
    font-size: 1.2rem;
    text-align: justify;
  }
  .marketing-hero .hero-content-marketing h1 {
  font-size: 16px;
}
}
/*===============section web=========*/
.hero-web{
  position: relative;
  background:white;  
  color: var(--color-black);
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-web .hero-content-web{
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;
}
.hero-web .hero-content-web .subtile{
 text-align: justify;          
    text-justify: inter-word;     
    line-height: 1.8;            
    font-size: 1.1rem;
    padding: 20px;    
    width: 45%;  
    color:black;        
    background: transparent; 
    border-left: 4px solid var(--color-accent); 
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.hero-web .hero-content-web .image{
  width: 45%;
  overflow: hidden;
}
.hero-web .hero-content-web .image img{
  width: 100%;
  height: 100%;
  animation: floaty 6s ease-in-out infinite;
}
.btn-cta-design h3 {
  font-size: 1.5rem;
  color: var(--color-black);
}
/*======responsive========*/
@media (max-width: 768px) {
  .hero-web{
    height: 110vh;
  }
.hero-web .hero-content-web{
  display: flex;
  flex-direction: column-reverse;
  gap: 0px;
  padding: 0;
}
.hero-web .hero-content-web .subtile{
  padding: 20px;
  width: 100%;
}
.hero-web .hero-content-web .image{
  width: 100%;
}
}
/*==========section hero motion=========*/
.hero-motion{
  background: var(--gradient-hero);
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-content-motion{
 display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;  
  position: relative;
  top: 70px;
  gap: 20px;
}

.hero-motion .hero-content-motion .subtile{
    text-align: justify;          
    text-justify: inter-word;     
    line-height: 1.8;            
    font-size: 1.1rem;
    padding: 20px;    
    width: 50%;          
    background: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    border-left: 4px solid var(--color-accent); 
    border-radius: 6px;
  }
.hero-motion .hero-content-motion .image{
  width: 60%;
  overflow: hidden;
  position: relative;
}
.hero-motion .hero-content-motion .image img{
  width: 110%;
  height: 100%;
    animation: floaty 6s ease-in-out infinite;

}

/*======responsive========*/
@media (max-width: 768px) {
 .hero-motion{
  height: 100vh;
 }
  .hero-content-motion{
 display: flex;
 flex-direction: column-reverse;
  top: 50px;
  gap: 0px;
}
.hero-motion .hero-content-motion .subtile{
   width: 100%;
  }
.hero-motion .hero-content-motion .image{
  width: 100%;
  display: none;
}
}

/**************************************************************/
        /****** design de toutes les services******/
.design-card{
  font-family: "Poppins", sans-serif;
  background:var(--gradient-card-services);
  padding: 40px 0;
  justify-content: center;
  align-items: center;
 border-bottom: dashed 1px rgba(0, 0, 255, 0.346) ;
 box-shadow:
    0 0 0 4px var(--color-orange),   
    0 0 5px 8px var(--color-orangered), 
    0 0 46px 2px rgba(0, 0, 255, 0.55); 
  z-index: 1;
position: relative;
overflow: hidden;
}
.bg-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* pour couvrir toute la carte sans déformer */
  z-index: 0;
  opacity: 0.1;
}
.design-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to top, rgb(1, 1, 40), rgb(3, 3, 100));
  background: none;
  z-index: 0; /* derrière le texte */
}
.design-card .title {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  color: var(--color-orangered);
  margin-bottom: 10px;
  text-shadow: hoff voff blur var(--accent-orange);
}
/* --- gestion du filter --- */
.filter-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
  }
  .filter-btn {
    padding: 12px 30px;
    border: 1px solid var(--color-primary-blue);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.057);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
  }
  .filter-btn.active,
  .filter-btn:hover {
    background: var(--color-orangered);
    border: 1px solid var(--color-orangered);
    color: white;
  }
.card-services-complet h3{
  color: var(--color-orange);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}
.design-card .subtitle {
  color: var(--color-muted);
  margin-bottom: 32px;
  display: non;
}

/* --- Cartes --- */
.card-services-complet .card {
  display: grid;
  grid-template-columns:repeat(2, 1fr);
  gap: 20px;
  align-items: center;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 255, 0.354);
  border-bottom: 4px solid var(--color-orangered);
  background:var(--gradient-card);  
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.154);
  position: relative;
  transition: all 0.4s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateY(0);
  }
.card-services-complet .card:hover {
  transform: translateY(-5px);
box-shadow: 0 0 25px rgba(0, 0, 255, 0.254);
}

/* --- Texte de la carte --- */
.card-services-complet .card-content {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.card-services-complet .card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  margin-bottom: 18px;
}
.card-services-complet .card h3 .ico {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(125, 92, 255, 0.849);
  border: 1px solid rgba(124,92,255,0.4);
  font-size: 18px;
  animation: pulse 2.5s infinite ease-out;
}

/* --- Liste services --- */
.card-services-complet ul.services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.card-services-complet ul.services li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 12px;
  font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  background: rgba(255,255,255,0.02);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.201);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s ease, transform 0.3s ease;
  cursor:grab;
}
.card-services-complet ul.services li:hover {
  background: rgba(124,92,255,0.38);
  transform: translateX(5px);
  border: solid 1px var(--color-orangered);
}
.card-services-complet ul.services li i {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(124,92,255,0.2);
  color: var(--color-accent);
  font-size: 14px;
}

/* --- Badges --- */
.card-services-complet .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: rgba(124,92,255,0.15);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-services-complet .badge i {
  font-size: 12px;
  color: var(--color-accent);
}
.card-services-complet .split {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* --- Image droite --- */
.card-services-complet .card-image {
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.card-services-complet .card-image img {  
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.5s ease, filter 0.5s ease;
  border-left: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
.card-services-complet .card-image:hover img {
  transform: scale(1.02) rotate(-0.5deg);
  filter: brightness(1.1);
}
/* --- Responsive --- */
@media (min-width: 1200px) {
/* --- Grid des sections --- */
.grid-services {
  display: grid;
  grid-template-columns:repeat(2, 1fr);
  gap: 2rem;
}
}

/* --- Responsive --- */
@media (max-width: 700px) {
/******================section service===============****/

/* --- Grid des sections --- */
.grid-services {
   display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.card-services-complet .card {
    grid-template-columns:1fr;
  }
  /* --- gestion du filter --- */
  .card-services-complet .filter-btn {
    padding: 10px;
    font-size: 14px;
  }

  .design-card{
  padding: 30px 0;
}
.design-card .title {
  font-size: 1.5rem;
}

/* --- gestion du filter --- */
.filter-bar {
    display: flex;
    gap: 10px;
    margin: 20px 0;
  }
  .filter-btn {
    padding: 12px 20px;
    font-size: 14px;
  }

.card-services-complet .card-image img { 
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .card-services-complet .card h3 {
  font-size: 18px;
}
}

/***=============fin responsive===================***/
/* --- AOS Animations --- */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}


/* ================= MINI CTA ================= */
.mini-cta {   
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 0;
  border-top: 1px solid var(--color-primary-blue);
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  background: var(--gradient-card);
  background-image: url("https://i.pinimg.com/736x/cb/70/d2/cb70d271f2af2cc5f5c283fd021c8d50.jpg");         
  border-top: dashed 1px var(--color-white);
  position: relative;
  overflow: hidden;
  display: none;
}
.mini-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:var(--gradient-overlay-light);
  z-index: 1; /* derrière le contenu */
}
.mini-cta .content-mini-cta{
  position: relative;
  z-index: 1;
  padding: 40px 20px; 
  text-align: justify;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: solid 1px rgba(0, 0, 255, 0.563);
  background: var(--gradient-card);
  box-shadow: 0 0 15px rgba(0, 0, 255, 0.181) ;
  animation: bounce-zoom 0.8s ease-out;
}

.mini-cta h3 {
  font-size: 1.75rem;
  font-family: inter;
  font-weight: 900;
}
.mini-cta span{
  color: var(--color-orangered);
}
.mini-cta p{
  margin:20px 0 40px 0;
}
.mini-cta .bouton-cta{
  background: var(--bg-white);
  padding: 20px 35px;
  color: orange;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  border-radius: 35px;
  box-shadow: 0 0 15px var(--color-primary-blue);
  transition: 0.4s;
  animation: ombredouce 1s infinite;
}
.mini-cta .bouton-cta:hover{
transform: translateY(-5px);  
  background: var(--color-orange);
  color: white;
  border-right: 4px solid var(--color-orangered);
}
.mini-cta .faq-contact-buttons{
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
.mini-cta .content-mini-cta{
  border-right: solid 1px var(--color-white);
  border-left: solid 1px var(--color-white);
  }
  .mini-cta h3 {
  font-size: 1rem;
}
.mini-cta .bouton-cta{
  display: flex;
  width: 100%;
  padding: 20px 35px;

}
}
/*============section de services ===============*/
/* ===== CONTAINER  ===== */
.branding-section {
  padding: 40px 0px;
  background: #f9f9f9;
  color: black;
}
.branding-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin: 40px auto;
  align-items: center;
}

/* ===== CARDS ===== */
.branding-container .card {
  background: #fff;
  color: black;
  border: 1px solid blue;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-bottom: 4px solid transparent;
  transition: 0.3s ease-in-out;
}
.branding-container h3 i{
  color: blue;
  background: rgba(0, 0, 255, 0.265);
  padding: 10px;
  border-radius: 50%;
}
.branding-container .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}
.branding-container .card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #222;
  font-weight: 600;
}
.branding-container .card ul {
  list-style: none;
  padding: 0;
}
.branding-container .card ul li {
  margin: 10px 0;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.branding-container .card ul li i {
  color: #1abc9c;
  margin-right: 10px;
}

/* ===== LEFT & RIGHT ===== */
.branding-container .left,
.branding-container .right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.branding-container .left .card { border-bottom-color: #e74c3c; }
.branding-container .right .card:first-child { border-bottom-color: #27ae60; }
.branding-container .right .card:last-child { border-bottom-color: #3498db; }

/* ===== CENTER BLOCK ===== */
.branding-container .center {
  text-align: center;
}
.branding-container .center h2 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  color: black;
}
.branding-container .center h2 span {
  color: orange;
}
.branding-container .center img {
  max-width: 100%;
  margin: 45px 0;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);  
}
.branding-container .btn {
  display: inline-block;
  padding: 12px 28px;
  background: #3498db;
  color: #fff;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s;
}
.branding-container .btn:hover {
  background: #216fa1;
}
/* ===== Boutons des cards ===== */
.branding-container .btn-card {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  background: #1abc9c;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.branding-container .btn-card:hover {
  background: #16a085;
  transform: translateY(-3px);
}

/* ===== SCROLL ANIMATION ===== */
.branding-container .scroll-animate {
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.7s ease-out;
}
.branding-container .scroll-up {
  transform: translateY(0);
  opacity: 1;
}

/* ====== RESPONSIVE ====== */
/* Tablette (max 992px) */
@media (max-width: 1024px) {
  .branding-container {
    display: grid;
    grid-template-columns: 1fr; 
  }
  /* ===== LEFT & RIGHT ===== */
.branding-container .left,
.branding-container .right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
}
 .branding-container .center h2{
  margin-bottom: 0;
 }
 .branding-container .center h2 br {
  display: none;
}
.branding-container .center img {
  margin: 25px 0;
  width: 100%;
}

/* ===== Boutons des cards ===== */
.branding-container .btn-card {
  margin-top: 0;
}

}

/* Mobile (max 568px) */
@media (max-width: 568px) {
  .branding-container {
    grid-template-columns: 1fr; /* 1 colonne */
    gap: 20px;
  }
    /* ===== LEFT & RIGHT ===== */
.branding-container .left,
.branding-container .right {
  display: grid;
  grid-template-columns: 1fr;
}
  .branding-container .card {
    padding: 20px;
  }
  .branding-container .center h2 {
    font-size: 20px;
  }
  .branding-container .card h3 {
    font-size: 18px;
  }
  .branding-container .card ul li {
    font-size: 14px;
  }
  .branding-container .btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}

/*************************************************************/
          /********section faq ***********/
/* ===== FAQ SECTION ===== */
.faq-service {
  background:var(--gradient-card);
  padding:40px 20px ;
  color:white;
  font-family: "Poppins", sans-serif;
  justify-content: center;
  align-items: center;
}
.faq-service .faq-header h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--accent-orange); 
  position: relative;
  text-shadow: hoff voff blur #0000007a;
}

.faq-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
}


/* Question bloc */
.faq-question {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px 22px;
  background:rgba(0, 0, 255, 0.005);
  cursor: pointer;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}
/* Container pour FAQ cachées */
.faq-hidden-container {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1.5s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
 opacity: 0;
  transition: max-height 0.6s ease, opacity 0.5s ease;
}

/* Quand affiché */
.faq-hidden-container.active {
 max-height: 3000px; 
  opacity: 1;
}

/* Bouton toggle */
#toggle-faq {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--color-orangered);
  transition: color 0.3s;
}

#toggle-faq i {
  font-size: 20px;
  transition: transform 0.3s ease;
  transform-origin: center;
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color:var(--color-orangered);
}

.faq-question h3 {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-light, var(--color-white));
}

.faq-question i {
  transition: transform 0.3s ease;
  color: var(--accent-orange, var(--color-orangered));
  margin: 0 4px;
  animation: pulse 1.5s infinite ease-out;

}

/* Réponse cachée */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 1.6;
  transition: all 0.4s ease-in-out;
  padding-left: 5px;
  margin-top: 10px;
  transition: ease-in-out 0.3s;
}

/* Réponse visible */
.faq-answer.open {
  max-height: 300px;
  opacity: 1;
  padding-top: 10px;
  border-top: solid 1px rgba(0, 0, 255, 0.242);
  color: black;
}

/* Animation sur l'ouverture */
.faq-question.active {
  border-color: var(--accent-orange, var(--color-orangered));
  background: white;
}
.faq-question:hover i::before, svg{
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(90deg); /* vers le bas */ 
} 
.faq-question.active h3{
  color: var(--color-orangered);
}
.faq-question i{
  display: inline-block;
  transition: transform 0.3s ease;
}

.faq-question.active:hover i::before, svg{
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(-90deg); /* vers le bas */ 
} 
/*****afficher tout les faq*********/
  .faq-toggle {
  text-align: center; /* centre le bouton */
  margin: 20px 0;
}

#toggle-faq {
  background: none;
  border: none;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  flex-direction: column; /* mettre le texte au-dessus et l'icône en dessous */
  align-items: center;
  gap: 5px; /* espace entre texte et flèche */
  color: var(--color-orangered);
  font-weight: 600;
  transition: color 0.3s;
}

#toggle-faq i {
  font-size: 20px;
  transition: transform 0.3s ease;
}
#toggle-faq:hover i{
  transform: translatey(10px);
  color: var(--color-orange);
}
#toggle-faq:hover {
  color: var(--color-accent-orange); /* couleur au survol */
  animation: bounce 2s infinite;

}

#toggle-faq.active i {
  transform: rotate(180deg); /* animation quand on active */
}

 /***************mini cta faq *************************/
.faq-contact {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  justify-content: center;
  align-items: center;
}
.faq-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* derrière le contenu */
}

.faq-contact span{
  color: var(--color-orangered);
}
.content-faq-contact{
  position: relative;
  z-index: 2;
  background: var(--gradient-card);
  background-image: url("https://i.pinimg.com/736x/cb/70/d2/cb70d271f2af2cc5f5c283fd021c8d50.jpg");           
  box-shadow: 0 0 55px rgba(0, 0, 0, 0.408) inset;
   padding: 20px ;
   border-radius:  15px 0;
   border: solid 1px var(--color-primary-blue);
   box-shadow: 0 0 10px rgba(0, 0, 255, 0.242);
}

.content-faq-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius:  15px 0;
  background:var(--gradient-overlay-light);
  z-index: 1; /* derrière le contenu */
}
.grid-faq-contact{
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 100;
}
.faq-contact-left{
  width: 65%;
}
.faq-contact .content-faq-contact h3 {
  font-size: 1.8rem;
  font-family: inter;
  font-weight: 900;
  margin-bottom: 10px;
}
.grid-faq-contact span{
  color: var(--color-orangered);
}
.faq-contact p {
  font-size: 1rem;
  margin-bottom: 20px;
  opacity: 0.9;
}

.faq-contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.btn-contact {
  background: rgb(11, 11, 173);
  color: white;
  padding:15px;
  margin: 10px 0;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.151);
  overflow: hidden;
  position: relative;
    z-index: 10;
}
.btn-contact::before{
  content: '';
  position: absolute;
  width: 180%;
  border-radius: 15px;
  height: 280%;
  background:var(--gradient-mix);
  animation: rotate 4s linear infinite;
  transition: all 0.1s linear;
    z-index: -2;
}
.btn-contact::after{
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  background: var(--gradient-orange);
  z-index: -2;
}
.btn-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.251);
  background: var(--color-primary-blue);
  color: var(--color-white);
}
.faq-contact-right{
  width: 30%;
  background: linear-gradient(135deg, #00e5ff, #0078ff);
  border: 1px dashed white;
  border-radius: 15px;
}
.faq-contact-right img{
  width: 100%;
  animation: scale 3s infinite;
}

@media (max-width: 768px) {
 /* ===== FAQ SECTION ===== */
.faq-service {
  padding: 40px 0;
}
.faq-service .faq-header h2 {
  font-size: 1.5rem;
}

.faq-container {
  padding: 20px 0;
}

  .grid-faq-contact{
  display: flex;
  flex-direction: column-reverse;
}
.faq-contact-left, .faq-contact-right{
  width: 100%;
}
  .faq-service {
  padding:40px 0px ;
}
  .faq-service h2{
  font-size: 1.5rem;
  margin-bottom: 20px;
}
 
.faq-service .faq-question h3 {
  font-size: 1rem;
}
/****faq conact *****/
.faq-contact {
  padding: 40px 0px;
}
.faq-contact .content-faq-contact h3 {
  font-size: 1.1rem;
}
.faq-contact p {
  font-size: 0.8rem;
}
.btn-contact {
  width: 100%;
  display: flex;
  flex-direction: column;
}
}