/* Style pour le logo accueil */
#block-logo-accueil-mobil {
    position: relative; /* Nécessaire pour z-index */
    z-index: 10; /* Plus élevé pour passer au-dessus de la vidéo */
  padding-top : 15px;
}

/* Style pour la vidéo accueil */
#block-video-mobil {
    margin-top: -50px; /* Remonte la vidéo */
  margin-right : 8px;
  margin-left : 10px;
    position: relative; /* Important pour le z-index */
    z-index: 1; /* Plus bas que le logo */
}

/* Bords ronds images */
.roundimg {
  border-radius: 12px;  /* arrondi moyen */
  overflow: hidden;     /* évite que l’image dépasse des coins */
  display: inline-block;
}

#block-top-accueil-desktop h1 {
  text-align: center;   /* centré */
font-size: 1.8rem;         /* taille personnalisable */
  color: #ffffff;          /* texte blanc */
}

#block-top-accueil-desktop h2 {
  font-size: 1.5rem;         /* taille personnalisable */
  color: #fff;          /* blanc */
}


/* ===========================
   Onglets Mobile - Accordéon
=========================== */
.tabs-mobile {
  width: 100%;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

/* Onglets (boutons) */
.tabs-mobile .tab-btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #560062;              /* fond violet foncé */
  border: none;
  border-bottom: 2px solid #EF90FF; /* ligne principale */
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Onglet actif */
.tabs-mobile .tab-btn.active {
  border-color: #560062;            /* ligne prend la couleur du fond onglet actif */
}

/* Supprime le laser sur onglet actif */
.tabs-mobile .tab-btn.active::after {
  display: none;
}

/* Contenus */
.tabs-mobile .tab-panel {
  display: none;                     /* fermés par défaut */
  padding: 15px;

  border-bottom: 1px solid #EF90FF; 
  box-sizing: border-box;
  transition: all 0.3s ease;
  border-radius: 0;                  /* suppression des coins arrondis */
}

/* ===========================
   Effet laser sur la ligne
=========================== */
.tabs-mobile .tab-btn::after {
  content: "";
  position: absolute;
  bottom: 0;                        /* au niveau de la ligne */
  left: -50%;                        /* commence hors de la ligne */
  width: 50%;                        /* largeur du laser */
  height: 2px;                       /* même hauteur que la ligne */
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent);
  pointer-events: none;              /* ne gêne pas le clic */
  animation: laserFade 6s linear infinite; /* 2x plus lent */
}

/* Animation laser avec fondu aux extrémités */
@keyframes laserFade {
  0% { left: -50%; }
  50% { left: 100%; }
  100% { left: -50%; }
}



/* =========================
   Onglets Desktop uniquement
========================= */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative; /* pour la ligne soulignée */
}

.tab-btn {
  position: relative;
  padding: 10px 20px;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: color 0.3s ease;
}

/* Supprime tout fond au survol / actif */
.tab-btn:hover,
.tab-btn:focus,
.tab-btn.active {
  background: none !important;
  color: #fff !important;
}

/* ligne soulignée */
.tabs-underline {
  position: absolute;
  height: 2px;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 0;
  transition: all 0.3s ease;
}

/* Panels */
.tab-panel {
  display: none;
  padding: 20px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  border-radius: 20px;
  transition: all 0.3s ease;
}


/* logo accueil desktop */

/* ================================
   Conteneur global
================================= */
.center-container {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement si besoin */
  padding: 20px 0;         /* petit espace haut et bas */
  height: auto;            /* hauteur automatique */
  box-sizing: border-box;
}

/* ================================
   Conteneur image + texte
================================= */
.image-text {
  display: flex;
  align-items: center;     /* aligne image et texte verticalement sur desktop */
  gap: 20px;               /* espace entre l'image et le texte */
  flex-wrap: wrap;         /* permet de passer en colonne sur mobile */
  justify-content: center; /* centre le contenu si wrap */
}

/* ================================
   Image ronde (PNG déjà ronde)
================================= */
.image-text img {
  width: 100px;            /* ajustable selon besoin */
  height: auto;            /* conserve proportions */
}

/* ================================
   Texte H1
================================= */
.image-text h1 {
  margin: 0;
  font-family: 'Inter', sans-serif;   /* Google Font Inter */
  font-size: 2rem;         /* taille personnalisable */
  color: #ffffff;          /* texte blanc */
  text-align: left;        /* alignement desktop */
}

/* ================================
   Responsive : mobile
================================= */
@media (max-width: 600px) {
  .image-text {
    flex-direction: column;   /* image au-dessus du texte */
    align-items: center;      /* centre horizontalement */
  }

  .image-text h1 {
    text-align: center;       /* texte centré sous l'image */
    font-size: 1.5rem;        /* optionnel : réduire légèrement sur mobile */
  }

  .image-text img {
    width: 80px;              /* optionnel : réduire image sur mobile */
  }
}

/* Titre Service Familial mobile */
#block-titre-accueil-mobil h1 {
  font-size: 1.5rem;         /* taille personnalisable */
  color: #ffffff !important;  /* texte blanc forcé */
  text-align: center;
  padding: 15px 10px 10px 10px !important; /* top 15px, autres 10px */
}


#block-service h2,
#block-af h2,
#block-faq h2 {
  font-family: 'Inter', sans-serif;   /* Google Font Inter */
  font-size: 2rem;                     /* taille augmentée */
  font-weight: 500;                    /* bold600 */
  line-height: 1.1;                    /* espacement entre les lignes */
  color: #ffffff;                      /* texte blanc */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* ombre noire adoucie */
  margin-bottom: 20px;                 /* espace sous le titre */
}
#block-service {
  font-size : 20px;
  font-weight: bold;
  color : #560062;
}





/* frames */

.w-frame { 
	background-color: #ffffff;
	color : #000000;
	border-radius: 25px;
	padding: 10px;
    margin-bottom: 15px;
}

.v-frame { 
text-align: center;
  border: 2px solid #C58BFF;
  border-radius: 20px; padding: 15px 8px 8px 8px;
  margin-bottom: 30px;
}

.b-frame { 
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #BDEFFF;
  margin-bottom: 15px;
}

.r-frame { 
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #F06179;
  margin-bottom: 15px;
}

.g-frame { 
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #839959;
  margin-bottom: 15px;
}

.clearpurple {
  background-color: #f0e3ff;
  border-radius: 25px;
  padding: 10px;
}


.middlepurple {
  background-color: #7C3DB3;
  border-radius: 25px;
  padding: 10px;
  color: #FFFFFF;
}


/* ============================
   Boutons
============================ */

/* Style commun pour tous les boutons */
.btn-common {
  display: block;                  
  margin: 30px auto;               
  width: 75%;                      
  max-width: 400px;                
  padding: 15px 25px;
  color: #fff;                     
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 12px;             
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Violet */
.btn-violet { background-color: #560062; }
.btn-violet:hover { background-color: #730078; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-violet:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Bleu */
.btn-bleu { background-color: #0054A8; }
.btn-bleu:hover { background-color: #0066CC; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-bleu:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Orange */
.btn-orange { background-color: #FF602A; }
.btn-orange:hover { background-color: #FF7A50; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-orange:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Vert */
.btn-vert {
  display: block;                   
  margin: 30px auto;                
  width: 75%;                       
  max-width: 400px;                
  padding: 15px 25px;              
  background-color: #00B22D;       
  color: #fff;                      
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;           /* empêche le souligné */
  border: none;
  border-radius: 12px;             
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Survol */
.btn-vert:hover {
  background-color: #0066CC;       
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  text-decoration: none;           /* empêche le souligné sur hover */
  color: #fff;                     /* empêche le texte de devenir bleu */
}

/* Clic : effet "s’enfonce" */
.btn-vert:active {
  transform: scale(0.95);          
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #fff;                     /* garantit la couleur texte */
  text-decoration: none;           
}

/* ====== GRILLE PERSO 3 colonnes ====== */
.custom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes desktop/tablette */
  gap: 20px; /* espace entre colonnes */
}

/* Par défaut chaque item occupe son "slot" */
.custom-grid .custom-col {
  background: transparent; /* tu peux mettre une couleur si besoin */
  min-height: 50px; /* évite l’écrasement, optionnel */
}

/* En responsive (mobile < 768px) → 2 colonnes */
@media (max-width: 767px) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Masquer automatiquement une colonne vide sur mobile */
  .custom-grid .custom-col:empty {
    display: none;
  }
}