/************ my css ***************/

/* ==========================================================================
   HERO BACKGROUND (Correction pour voir l'image ENTIÈRE sans coupure)
   ========================================================================== */

/* ==========================================================================
   HERO BACKGROUND (Art Direction avec images multiples)
   ========================================================================== */

/* 1. PAR DÉFAUT (Pour les très grands écrans > 1920px) */
.hero-soluce-bg {
  background-image: url('../img/logo/hero_soluce_2560.png') !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
  position: relative;
  width: 100%;
}

/* 2. PC STANDARDS (Entre 1201px et 1920px) */
@media (max-width: 1920px) {
  .hero-soluce-bg {
    background-image: url('../img/logo/hero_soluce_1920.png') !important;
  }
}

/* 3. TABLETTES ET PETITS PC (Entre 768px et 1200px) */
@media (max-width: 1200px) {
  .hero-soluce-bg {
    background-image: url('../img/logo/hero_soluce_1200.png') !important;
  }
}

/* 4. SMARTPHONES (En dessous de 767px) */
@media (max-width: 767px) {
  .hero-soluce-bg {
    background-image: url('../img/logo/hero_soluce_mobile.png') !important;
    background-position: top center; /* Souvent mieux sur mobile de centrer en haut */
  }
}


/* Svgs qui sommes nous size */
.choose-icon-img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: inline-block;
}
.it-choose-5-list-content .title{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ✅ CTA GRID 2x2 */
.cta-text-boxes{
  margin: 18px 0 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* your items currently are .col-lg-6 inside .cta-text-boxes
   make each column behave like a grid item */
.cta-text-boxes > .col-lg-6,
.cta-text-boxes > .col-md-6{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ✅ make the actual "card" white */
.cta-text-boxes .it-choose-2-item{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  text-align: left !important;   /* remove text-center */
  height: 100%;                  /* equal height cards */
}

/* icon */
.cta-text-boxes .it-choose-2-icon{
  margin-bottom: 10px;
}
.cta-text-boxes .it-choose-2-icon svg{
  width: 48px;
  height: 48px;
}

/* title */
.cta-text-boxes .it-choose-2-title{
  font-family:'Spartan-Bold', sans-serif;
  font-size: 15px;
  margin-bottom: 6px;
}

/* paragraph */
.cta-text-boxes p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #222;
}

/* ✅ responsive */
@media (max-width: 767px){
  .cta-text-boxes{
    grid-template-columns: 1fr;
  }
}

/* ✅ old notes still available (if you still use cta-note somewhere) */
.cta-note{
  background: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 12px;
  color: #222;
  font-size: 15px;
  line-height: 1.55;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* yellow underline highlight */
.hl-yellow{
  display: inline;
  background: linear-gradient(to bottom, transparent 80%, #F8C62F 80%);
  padding: 0 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* only for our highlighted text */
.it-choose-5-list-content .title .hl-yellow{
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: inline;
}

/* section 1 */

/* ==========================================================================
   Section 1 - Pourquoi Choisir Soluce (MODIFIÉE)
   ========================================================================== */

.results-soluce-area {
  background: #f8f8f6;
}

.results-soluce-area .container {
  max-width: 1300px;
}

/* Le conteneur blanc principal (Preservé) */
.results-soluce-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 42px 45px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

/* --- En-tête (Header) maintenant dans la colonne --- */
.results-soluce-header {
  margin-bottom: 30px;
}

.results-soluce-subtitle {
  font-size: 28px;
  line-height: 1;
  font-family: 'Spartan-Bold', sans-serif;
  color: #0d1b1e;
  margin-bottom: 12px;
}

.results-soluce-title {
  font-size: 44px;
  line-height: 1.05;
  font-weight: 400;
  color: #0d1b1e;
  margin-bottom: 16px;
}

.results-soluce-intro {
  font-size: 18px;
  line-height: 1.5;
  color: #111;
  margin: 0;
}

/* --- Conteneur Flexbox (MODIFIÉ pour 2 colonnes équilibrées) --- */
.results-soluce-content {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Aligne verticalement le texte et l'image au centre */
  gap: 30px; /* Espace entre les colonnes */
}

/* Colonne Gauche - Texte complet (MODIFIÉE pour 50%) */
.results-soluce-left {
  flex: 0 0 50%;
  max-width: 50%;
}

/* Colonne Droite - Image (MODIFIÉE pour 50%) */
.results-soluce-right {
  flex: 0 0 50%; 
  max-width: 50%;
  text-align: right;
}

.results-soluce-right img {
  max-width: 80%;
  height: auto;
  display: inline-block;
}

/* --- Liste des résultats (Preservée) --- */
.results-soluce-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.results-soluce-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.results-check {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  max-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.results-check img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.results-soluce-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #111;
  white-space: normal;
}

.results-soluce-list strong {
  font-family: 'Spartan-Bold', sans-serif;
  font-weight: 700;
}

/* --- Citation (MODIFIÉE pour s'intégrer dans la colonne) --- */
.results-soluce-quote {
  max-width: 500px;
  background: #f3ebbf;
  padding: 18px 22px;
  border-radius: 6px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  margin: 10px 0 24px 0; /* Marge gauche de 90px retirée */
}

.results-soluce-quote p {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.35;
  color: #1a1a1a;
  font-family: "Satisfy", cursive;
  font-style: normal;
}

.results-soluce-quote span {
  display: block;
  text-align: right;
  font-size: 18px;
  line-height: 1.4;
  color: #1a1a1a;
  font-family: "Satisfy", cursive;
  font-style: normal;
}

/* --- Bouton (Preservé) --- */
.results-soluce-btn-wrap {
  margin-top: 10px;
}

.results-soluce-btn {
  display: inline-block;
  background: var(--it-theme-2);
  color: #0b1a1d;
  font-family: 'Spartan-Bold', sans-serif;
  font-size: 16px;
  line-height: 1.3;
  padding: 16px 26px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}

.results-soluce-btn:hover {
  color: #0b1a1d;
  transform: translateY(-2px);
}

.results-soluce-btn:hover {
  background-color: #FFEB39; /* Votre nouvelle couleur bleue */
  color: #000000;            /* On passe le texte en blanc pour qu'il soit bien lisible sur le bleu */
  transform: translateY(-2px);
}

/* ==========================================================================
   Responsive - Media Queries (AJUSTÉES pour la nouvelle structure)
   ========================================================================== */

/* --- Correction pour les grands écrans (adaptation de vos styles existants) --- */
@media (max-width: 1920px) {
  .results-soluce-area .container {
    max-width: 1250px;
  }

  .results-soluce-wrap {
    padding: 30px 32px;
    border-radius: 20px;
  }

  /* Ajustements de l'en-tête dans la colonne */
  .results-soluce-header {
    margin-bottom: 22px;
    text-align: left; /* Aligne le texte à gauche */
  }

  .results-soluce-subtitle {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .results-soluce-title {
    font-size: 42px;
  }

  .results-soluce-intro {
    font-size: 15px;
  }

  /* Maintient les colonnes équilibrées à 50% */
  .results-soluce-content {
    gap: 18px;
    align-items: center;
  }

  .results-soluce-left {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .results-soluce-right {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Styles de liste préservés ... */

  /* Marge de la citation ajustée pour cette taille */
  .results-soluce-quote {
    max-width: 390px;
    margin: 8px 0 18px 0; /* Marge gauche de 45px retirée */
    padding: 12px 16px;
  }
}

/* --- Tablettes (Ajustements généraux de taille) --- */
@media (max-width: 1199px) {
  .results-soluce-area .container {
    max-width: 960px;
  }

  .results-soluce-title {
    font-size: 46px;
  }
}

/* --- Passage en Colonne Unique (Pile verticalement) --- */
@media (max-width: 991px) {
  .results-soluce-wrap {
    padding: 35px 28px;
  }

  /* Empile les colonnes verticalement */
  .results-soluce-content {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  /* Les deux colonnes prennent toute la largeur */
  .results-soluce-left,
  .results-soluce-right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Centre l'image quand elle est empilée */
  .results-soluce-right {
    text-align: center;
    margin-top: 20px;
  }

  .results-soluce-title {
    font-size: 40px;
  }

  /* Centre la citation quand elle est empilée */
  .results-soluce-quote {
    margin: 20px auto 25px;
    transform: rotate(-2deg);
  }
}

/* --- Mobiles (Optimisation finale) --- */
@media (max-width: 767px) {
  .results-soluce-wrap {
    padding: 30px 18px;
    border-radius: 16px;
  }

  .results-soluce-subtitle {
    font-size: 22px;
  }

  .results-soluce-title {
    font-size: 32px;
  }

  .results-soluce-check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .results-soluce-btn {
    width: 100%;
    text-align: center;
  }
}


/* ==========================================================================
   COURS SECTION (Restructurée en 2 boîtes larges avec textes adaptés)
   ========================================================================== */

.cours-soluce-area {
  background: #f8f8f6;
}

/* NOUVEAU : Gère la largeur de la section sur grand écran */
.wide-container {
  max-width: 1400px !important;
  width: 100%;
  margin: 0 auto;
}

.cours-soluce-wrap {
  background: #fffdf8;
  border-radius: 26px;
  padding: 55px 40px 45px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

/* NOUVEAU : Espacement entre les deux boîtes blanches */
.cours-soluce-wrap.mb-50 {
  margin-bottom: 50px;
}

.cours-soluce-header {
  margin-bottom: 28px;
}

.cours-soluce-logo {
  margin-bottom: 30px;
}

.cours-soluce-logo img {
  width: auto;
  border-radius: 20px;
}

.cours-soluce-title {
  font-size: 68px;
  line-height: 1.05;
  font-weight: 400;
  color: #111;
  margin-bottom: 10px;
}

.cours-soluce-subtitle {
  font-size: 24px;
  line-height: 1.4;
  color: #222;
  margin: 0;
  font-family: 'Spartan-Bold', sans-serif;
}

/* Ajoutez position et display à votre classe existante */
.cours-soluce-subtitle {
  position: relative;
  display: inline-block; /* Important : pour que la ligne s'arrête à la fin du texte */
  z-index: 1;
  /* (Gardez ici vos autres styles comme font-size, color, etc.) */
}

/* NOUVEAU : La ligne dessinée à la main sous le texte */
.cours-soluce-subtitle::after {
  content: "";
  position: absolute;
  left: -2%;       /* Fait légèrement déborder le trait à gauche pour un effet naturel */
  bottom: -6px;    /* Décale la ligne sous le texte (ajustez selon votre préférence) */
  width: 104%;     /* Le trait est très légèrement plus long que le texte */
  height: 10px;    /* L'épaisseur de la zone de dessin */
  
  /* Ligne courbée générée en SVG avec votre couleur #F8C62F */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 1 98 8' stroke='%23F8C62F' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  z-index: -1; /* Place la ligne en arrière-plan */
  pointer-events: none;
}

/* ==========================================================================
   COURS FEATURES CARDS (Matches the Image Design)
   ========================================================================== */

.cours-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px; /* Slightly larger gap to let the cards breathe */
  margin: 40px 0 35px;
}

/* The Card Structure */
.cours-feature-card {
  display: flex;
  flex-direction: column; /* Stacks icon, title, and text vertically */
  align-items: center;    /* Centers items horizontally */
  justify-content: center;
  border: none;           /* Removes the old grey border */
  border-radius: 30px;    /* Large, smooth rounded corners */
  padding: 50px 30px;     /* Generous padding for a square-like shape */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); /* Very soft, diffused shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cours-feature-card:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
}

/* The Icon Circle */
.cours-feature-icon {
  flex: 0 0 75px; 
  width: 75px;
  height: 75px;
  border-radius: 50%;     /* Perfect circle */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px 0;    /* Space between icon and title */
}

.cours-feature-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* The Text Content */
.cours-feature-text.text-center {
  text-align: center;     /* Centers the text lines */
}

.cours-feature-text h4 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  font-family: 'Spartan-Bold', sans-serif;
}

.cours-feature-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555;            /* Softer grey for paragraph text */
}

/* ==========================================================================
   CARD THEME COLORS (Backgrounds, Circles, and Titles)
   ========================================================================== */

/* 1. Blue Theme */
.theme-blue {
  background-color: #F5F8FF; /* Very light pastel blue */
}
.theme-blue .cours-feature-icon {
  background-color: #E2EBFF; /* Slightly darker circle */
}
.theme-blue h4 {
  color: #3B71CA; /* Bold blue title */
}

/* 2. Green Theme */
.theme-green {
  background-color: #F2FCF7; /* Very light pastel green */
}
.theme-green .cours-feature-icon {
  background-color: #DCF5E9; /* Slightly darker circle */
}
.theme-green h4 {
  color: #2E9E6B; /* Bold green title */
}

/* 3. Orange Theme */
.theme-orange {
  background-color: #FFF9F4; /* Very light pastel orange */
}
.theme-orange .cours-feature-icon {
  background-color: #FBEBDC; /* Slightly darker circle */
}
.theme-orange h4 {
  color: #D97843; /* Bold orange title */
}

/* ==========================================================================
   REST OF THE SECTION (Slider, Buttons, etc.)
   ========================================================================== */

.cours-teachers-title {
  font-size: 34px;
  line-height: 1.2;
  color: #111;
  margin: 10px 0 28px;
  font-family: 'Spartan-Bold', sans-serif;
}

.cours-teacher-card {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 20px;
  padding: 0 20px 20px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}

.cours-teacher-topline {
  height: 7px;
  background: var(--it-theme-2);
  border-radius: 20px 20px 0 0;
  margin: 0 -20px 18px;
}

.cours-teacher-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.cours-teacher-avatar {
  flex: 0 0 95px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--it-theme-2);
  background: #f6f6f6;
}

.cours-teacher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cours-teacher-meta h4 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.1;
  color: #111;
  font-family: 'Spartan-Bold', sans-serif;
}

.cours-stars {
  color: #efc248;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.cours-reviews {
  font-size: 16px;
  color: #222;
  margin-bottom: 8px;
}

.cours-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: #123a67;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-family: 'Spartan-Bold', sans-serif;
}

.cours-teacher-desc {
  font-size: 16px;
  line-height: 1.45;
  color: #222;
  margin: 0 0 18px;
}

.cours-teacher-btn {
  display: inline-block;
  background: var(--it-theme-2);
  color: #111;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.2;
  font-family: 'Spartan-Bold', sans-serif;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(239,194,72,0.35);
}

.cours-teacher-btn:hover {
  color: #111;
  transform: translateY(-1px);
}

.cours-teacher-btn:hover {
  background-color: #FFEB39; 
  color: #000000;            
  transform: translateY(-2px);
}

.cours-bottom-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.cours-main-btn {
  display: inline-block;
  min-width: auto;
  width: auto;
  text-align: center;
  background: #ffc107;
  color: #111;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.2;
  font-family: 'Spartan-Bold', sans-serif;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(213,166,58,0.25);
}

.cours-main-btn:hover {
  color: #111;
}

.cours-main-btn:hover {
  background-color: #FFEB39; 
  color: #000000;            
  transform: translateY(-2px);
}

.cours-side-image {
  flex: 0 0 33%;
  max-width: 33%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.cours-side-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* slider */
.cours-teachers-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cours-teachers-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 14px;
  margin-bottom: 34px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cours-teachers-grid::-webkit-scrollbar {
  display: none;
}

.cours-teacher-card {
  flex: 0 0 calc(33.333% - 15px);
  min-width: calc(33.333% - 15px);
  scroll-snap-align: start;
}

.cours-slider-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--it-theme-2);
  color: #111;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
}

.cours-slider-btn:hover {
  transform: translateY(-1px);
  background: #e2b63f;
}

/* ==========================================================================
   MEDIA QUERIES (CORRIGÉES POUR LES GRANDS ÉCRANS)
   ========================================================================== */

/* 1920px fix - DESIGN LARGE ET TEXTES ADAPTÉS */
@media (max-width: 1920px) {
  
  .cours-soluce-area .wide-container {
    max-width: 1400px !important;
  }

  .cours-soluce-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 50px 45px 40px; 
    border-radius: 20px;
    width: 100%;
  }

  .cours-soluce-header {
    margin-bottom: 24px;
  }

 /* .cours-soluce-logo img {
    max-height: 75px; 
  } */

  .cours-soluce-title {
    font-size: 52px; 
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .cours-soluce-subtitle {
    font-size: 20px;
    line-height: 1.3;
  }

  /* Les 3 Grids (Features) : Plus aérées */
  .cours-features {
    gap: 24px;
    margin: 30px 0 20px;
  }

  /* The Card Structure overrides for 1920px */
  .cours-feature-card {
    gap: 20px;
    padding: 50px 30px;
    min-height: 130px;
    border-radius: 30px;
  }

  .cours-feature-icon {
    flex: 0 0 75px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
  }

  .cours-feature-icon img {
    width: 32px;
    height: 32px;
  }

  .cours-feature-text h4 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .cours-feature-text p {
    font-size: 15px; 
    line-height: 1.5;
  }

  /* Le Slider des Professeurs */
  .cours-teachers-title {
    font-size: 30px; 
    margin: 10px 0 24px;
  }

  .cours-teachers-slider-wrap {
    gap: 15px;
  }

  .cours-teachers-grid {
    gap: 20px;
    padding: 8px 4px 15px;
    margin-bottom: 25px;
  }

  .cours-teacher-card {
    flex: 0 0 calc(33.333% - 14px);
    min-width: calc(33.333% - 14px);
    border-radius: 18px;
    padding: 0 18px 18px;
  }

  .cours-teacher-topline {
    height: 6px;
    margin: 0 -18px 15px;
    border-radius: 18px 18px 0 0;
  }

  .cours-teacher-head {
    gap: 12px;
    margin-bottom: 12px;
  }

  .cours-teacher-avatar {
    flex: 0 0 80px; 
    width: 80px;
    height: 80px;
    border-width: 4px;
  }

  .cours-teacher-meta h4 {
    font-size: 20px; 
    margin-bottom: 4px;
  }

  .cours-stars {
    font-size: 18px;
    margin-bottom: 4px;
  }

  .cours-reviews {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .cours-badge {
    font-size: 12px;
    padding: 6px 12px;
  }

  .cours-teacher-desc {
    font-size: 15px; 
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .cours-teacher-btn {
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 10px;
  }

  .cours-slider-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  /* Bouton Principal du bas */
  .cours-bottom-row {
    margin-top: 15px;
  }

  .cours-main-btn {
    font-size: 16px;
    padding: 16px 24px;
  }
}

/* Tablette */
@media (max-width: 1199px) {
  .cours-soluce-wrap {
    padding: 45px 28px 38px;
  }

  .cours-soluce-title {
    font-size: 48px;
  }

  .cours-soluce-subtitle {
    font-size: 20px;
  }

  .cours-features {
    grid-template-columns: 1fr;
  }

  .cours-teacher-card {
    flex: 0 0 calc(50% - 11px);
    min-width: calc(50% - 11px);
  }

  .cours-bottom-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cours-main-btn {
    min-width: 100%;
    font-size: 22px;
  }

  .cours-side-image {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cours-soluce-wrap {
    padding: 34px 18px 28px;
    border-radius: 18px;
  }
  
  /* Désactive la marge de 50px sur mobile pour éviter trop d'espace vide */
  .cours-soluce-wrap.mb-50 {
    margin-bottom: 25px; 
  }

  .cours-soluce-logo img {
    max-height: 62px;
  }

  .cours-soluce-title {
    font-size: 34px;
  }

  .cours-soluce-subtitle {
    font-size: 17px;
  }

  .cours-feature-card {
    padding: 30px 20px;
    border-radius: 20px;
    min-height: auto;
  }

  .cours-feature-icon {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  .cours-feature-icon img {
    width: 26px;
    height: 26px;
  }

  .cours-feature-text h4 {
    font-size: 20px;
  }

  .cours-feature-text p {
    font-size: 14px;
  }

  .cours-teachers-title {
    font-size: 24px;
  }

  .cours-teachers-slider-wrap {
    gap: 8px;
  }

  .cours-slider-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .cours-teacher-card {
    flex: 0 0 100%;
    min-width: 100%;
  }

  .cours-teacher-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cours-teacher-avatar {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
  }

  .cours-teacher-meta h4 {
    font-size: 22px;
  }

  .cours-stars {
    font-size: 18px;
  }

  .cours-teacher-desc {
    font-size: 15px;
  }

  .cours-main-btn {
    font-size: 18px;
    padding: 18px 20px;
  }
}



/* digital section */

.digital-feature-list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.digital-feature-list ul li{
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px;
  margin-bottom: 22px;
  padding: 0 !important;
  color: #000;
}

.digital-feature-icon{
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #F8C62F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.digital-feature-icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.digital-feature-text{
  flex: 1;
  color: #000;
}

.digital-feature-text span{
  display: inline;
  font-family: 'Spartan-Bold', sans-serif;
  font-weight: 700;
  color: #000;
  font-size: 16px;
  line-height: 1.45;
}

.digital-feature-text p{
  display: inline;
  margin: 0;
  color: #000;
  font-size: 16px;
  line-height: 1.45;
}

@media (max-width: 767px){
  .digital-feature-list ul li{
    gap: 10px;
    margin-bottom: 18px;
  }

  .digital-feature-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .digital-feature-icon img{
    width: 18px;
    height: 18px;
  }

  .digital-feature-text span,
  .digital-feature-text p{
    font-size: 14px;
  }
}

.digital-why-box{
  background: #f8f3e7;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.digital-why-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.digital-why-head h4{
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  color: #111;
  font-family: 'Spartan-Bold', sans-serif;
}

.digital-rating-box{
  flex: 0 0 auto;
  min-width: 92px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.digital-rating-top{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 2px;
}

.digital-rating-stars{
  color: #f3c623;
  font-size: 16px;
  line-height: 1;
}

.digital-rating-top strong{
  font-size: 18px;
  line-height: 1;
  color: #111;
  font-family: 'Spartan-Bold', sans-serif;
}

.digital-rating-note{
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #555;
}

.digital-rating-text span{
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #555;
}

.digital-why-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.digital-why-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  color: #111;
  font-size: 16px;
  line-height: 1.45;
}

.digital-why-list li:last-child{
  margin-bottom: 0;
}

.digital-why-list li img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  margin-top: 3px;
  flex: 0 0 18px;
}

.digital-why-list li span{
  font-family: 'Spartan-Bold', sans-serif;
  font-weight: 700;
  color: #111;
}

@media (max-width: 767px){
  .digital-why-box{
    padding: 18px 16px;
  }

  .digital-why-head{
    flex-direction: column;
    align-items: flex-start;
  }

  .digital-why-head h4{
    font-size: 22px;
  }

  .digital-why-list li{
    font-size: 14px;
  }
}

@media (max-width: 1920px){
  .it-blog-details-area.pt-130.pb-80{
    padding-top: 90px;
    padding-bottom: 60px;
  }

  .it-blog-details-area .container{
    max-width: 1080px;
  }

  .it-blog-details-area .postbox-details-wrapper{
    max-width: 1000px;
    margin: 0 auto;
  }

  .it-blog-details-area .postbox-thumb-box{
    margin-bottom: 35px !important;
  }

  .it-blog-details-area .postbox-content-box{
    max-width: 980px;
    margin: 0 auto;
  }

  .it-blog-details-area .it-section-title{
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .it-blog-details-area .postbox-dsc p{
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px !important;
  }

  .it-blog-details-area .mb-50{
    margin-bottom: 30px !important;
  }

  .it-blog-details-area .row.align-items-center{
    align-items: center !important;
  }

  .it-blog-details-area .postbox-banner{
    max-width: 320px;
    margin: 0 auto;
  }

  .it-blog-details-area .postbox-banner img{
    width: 100%;
    height: auto;
    display: block;
  }

  .it-blog-details-area .postbox-list-wrap{
    padding-left: 10px;
  }

  .it-blog-details-area .it-details-title-sm{
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .it-blog-details-area .it-btn-yellow{
    font-size: 14px;
    padding: 14px 24px;
    min-height: auto;
  }

  .it-blog-details-area .it-btn-yellow span .text-1,
  .it-blog-details-area .it-btn-yellow span .text-2{
    font-size: 14px;
  }

  .it-blog-details-area .it-btn-yellow i svg{
    width: 14px;
    height: 14px;
  }

  .digital-feature-list{
    padding-top: 25px !important;
    margin-bottom: 18px !important;
  }

  .digital-feature-list ul li{
    gap: 12px;
    margin-bottom: 16px;
  }

  .digital-feature-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .digital-feature-icon img{
    width: 18px;
    height: 18px;
  }

  .digital-feature-text span,
  .digital-feature-text p{
    font-size: 14px;
    line-height: 1.4;
  }

  .digital-why-box{
    border-radius: 14px;
    padding: 18px 18px;
    margin-bottom: 25px !important;
  }

  .digital-why-head{
    gap: 12px;
    margin-bottom: 14px;
  }

  .digital-why-head h4{
    font-size: 22px;
    line-height: 1.2;
  }

  .digital-rating-box{
    min-width: 78px;
    padding: 6px 8px;
  }

  .digital-rating-top{
    gap: 3px;
  }

  .digital-rating-stars{
    font-size: 14px;
  }

  .digital-rating-top strong{
    font-size: 15px;
  }

  .digital-rating-note{
    font-size: 10px;
  }

  .digital-why-list li{
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .digital-why-list li img{
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 3px;
  }

  .digital-why-list li span{
    font-size: 14px;
  }
}

/* ==========================================================================
   BOUTON WHATSAPP FLOTTANT (Animation d'expansion au survol)
   ========================================================================== */

/* ÉTAT NORMAL (Capsule Orange Verticale) */
.whatsapp-float {
  position: fixed;
  right: 38px;      /* Modifié : Aligné en bas à DROITE */
  left: auto;       /* Modifié : Désactive l'alignement à gauche */
  bottom: 50px;
  
  width: 65px;      /* Largeur initiale */
  height: 95px;     /* Hauteur initiale */
  background: #e77f1a; /* orange Soluce */
  border-radius: 40px;
  border: 3px solid transparent; /* Bordure transparente prête pour le hover */
  
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: flex-start;
  
  overflow: hidden; /* Cache le texte qui dépasse */
  z-index: 9999;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  /* L'animation magique avec le point d'origine en bas à DROITE */
  transform-origin: bottom right; 
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-sizing: border-box;
}

/* NOUVEAU : État quand le bouton est cliqué (il disparaît) */
.whatsapp-float.is-hidden {
  opacity: 0;
  transform: scale(0.5); /* Se rétrécit vers le coin */
  pointer-events: none;  /* Inactivé */
}

/* Conteneur de l'Avatar et de la Flèche */
.wa-icon-wrapper {
  min-width: 65px; /* Réserve l'espace */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.4s ease;
}

.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  transition: all 0.4s ease;
}

.wa-arrow {
  color: #111;
  font-size: 14px;
  line-height: 1;
  font-style: normal;
  transition: all 0.3s ease;
}

/* Conteneur du Texte et Logo (Caché au départ) */
.wa-text-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  opacity: 0;          /* Invisible par défaut */
  transform: translateX(15px); /* Décalé légèrement vers la droite */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wa-logo {
  width: 36px;
  height: 36px;
}

.wa-text {
  color: #F8C62F; /* Texte en Jaune */
  font-family: 'Spartan-Bold', sans-serif;
  font-size: 20px;
  font-weight: 700;
  padding-right: 25px; /* Espace à droite pour que le texte respire */
}

/* ==========================================================================
   ÉTAT AU SURVOL (Hover Manuel + Auto-Hover JS)
   ========================================================================== */

.whatsapp-float:hover,
.whatsapp-float.auto-hover {
  width: 310px;        
  height: 75px;        
  background: #0D47A1; 
  border: 3px solid #F8C62F; 
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* La flèche disparaît doucement */
.whatsapp-float:hover .wa-arrow,
.whatsapp-float.auto-hover .wa-arrow {
  opacity: 0;
  height: 0;
  margin: 0;
  transform: scale(0);
}

/* L'avatar grandit un tout petit peu et sa bordure devient jaune */
.whatsapp-float:hover .wa-avatar,
.whatsapp-float.auto-hover .wa-avatar {
  width: 52px;
  height: 52px;
  border-color: #F8C62F; 
}

/* Le texte et le logo apparaissent */
.whatsapp-float:hover .wa-text-wrapper,
.whatsapp-float.auto-hover .wa-text-wrapper {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   MENU POPUP D'ASSISTANCE (Positionné en bas à DROITE et animé)
   ========================================================================== */

.soluce-popup-container {
  position: fixed;
  bottom: 20px;    
  right: 20px;      /* Modifié : S'affiche en bas à DROITE */
  left: auto;       /* Modifié : Annule l'alignement à gauche */
  width: 380px;
  max-width: calc(100vw - 40px); /* Pour que ça passe bien sur mobile */
  background: #EBEAE4; /* Fond gris/beige clair de l'image */
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  z-index: 10000;
  overflow: hidden;
  font-family: 'Spartan-Bold', sans-serif;
  
  /* Modifié : L'animation part du coin en bas à DROITE */
  transform-origin: bottom right; 
  opacity: 0;
  transform: scale(0.5); /* Rétréci et caché par défaut */
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Classe ajoutée en JS pour afficher le popup */
.soluce-popup-container.active {
  opacity: 1;
  transform: scale(1); /* Taille normale */
  pointer-events: auto;
}

/* --- En-tête --- */
.soluce-popup-header {
  background: #F8C62F; /* Jaune */
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #111;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #111;
  padding: 0;
}

/* --- Corps --- */
.soluce-popup-body {
  padding: 24px 20px;
}

.soluce-popup-intro {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.popup-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
}

.soluce-popup-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #111;
  font-family: sans-serif; /* Police système plus lisible pour les textes longs */
}

.soluce-popup-question {
  text-align: center;
  font-size: 18px;
  margin: 0 0 20px 0;
  color: #111;
}

/* --- Les Cartes d'options --- */
.soluce-popup-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.soluce-option-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #123a67; /* Bordure bleue fine */
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: #111;
  transition: all 0.2s ease;
}

.soluce-option-card:hover {
  background: #f9f9f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.soluce-option-card svg {
  flex: 0 0 24px;
  color: #111;
}

.option-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-text strong {
  font-size: 14.5px;
  line-height: 1.2;
}

.option-text span {
  font-size: 13px;
  color: #444;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #25D366; /* Vert WhatsApp */
  border-radius: 50%;
  display: inline-block;
}


/* ==========================================================================
   NOUVELLE BARRE SUPÉRIEURE (HEADER TOP) - FOND NOIR
   ========================================================================== */

.it-header-top-area.black-bg {
  background-color: #0b1a1d; /* Fond noir/très sombre */
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Ligne de séparation très discrète */
}

/* Conteneur Flexbox pour aligner tout sur la droite */
.soluce-topbar-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Pousse les éléments vers la droite */
  gap: 28px;                 /* Espace entre chaque bloc */
  font-family: 'Spartan-Bold', sans-serif;
}

/* Style de base pour un élément de la barre */
.topbar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14.5px;
}

/* Liens simples (Connexion, Recrute) */
.topbar-link {
  transition: color 0.3s ease;
}
.topbar-link:hover {
  color: #F8C62F; /* Devient jaune au survol */
}

/* La barre verticale de séparation (|) */
.topbar-divider {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Bloc Localisation (Centres Soluce) */
.topbar-location {
  gap: 12px;
}

.loc-content {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.loc-title {
  font-size: 14px;
  color: #ffffff;
}

/* Le surlignage jaune façon marqueur */
.highlight-yellow {
  background-color: #F8C62F;
  color: #111111;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.loc-subtitle {
  font-size: 12px;
  color: #aaaaaa;
  font-family: sans-serif; /* Police plus neutre pour le sous-titre */
  margin-top: 3px;
  font-weight: normal;
}

/* Le Téléphone (Bleu clair pour ressortir sur le noir) */
.topbar-phone {
  color: #ffc107; 
  font-size: 18px;
  font-weight: 700;
  transition: color 0.3s ease;
}
.topbar-phone:hover {
  color: #ffffff;
}

/* Le Bouton Pilule (Noir sur blanc pour le contraste) */
.topbar-btn {
  background-color: #ffffff;
  color: #111111;
  padding: 12px 24px;
  border-radius: 99px; /* Forme de pilule */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.topbar-btn:hover {
  background-color: #F8C62F; /* Devient jaune au survol */
  color: #111111;
  transform: translateY(-2px);
}

/* ==========================================================================
   OPTIMISATION DU FOOTER (PC Standards, Laptops et Tablettes)
   ========================================================================== */

/* --- 1. PC Standards et Laptops (Entre 1201px et 1920px) --- */
@media (max-width: 1920px) {
  .it-footer-area {
    padding-top: 50px !important;
    padding-bottom: 25px !important;
  }
  
  .it-footer-widget-logo img {
    max-width: 160px !important; /* On réduit un peu le logo */
  }
  
  .it-footer-widget-title {
    font-size: 18px !important; /* Titres un peu plus petits */
    margin-bottom: 16px !important;
  }
  
  .it-footer-widget-text p,
  .it-footer-widget-menu ul li a,
  .it-footer-widget-contact ul li,
  .it-footer-widget-contact ul li a,
  .it-footer-widget-contact ul li span {
    font-size: 15px !important; /* Textes un peu plus petits */
  }
}

/* --- 2. Tablettes et Petits PC (Entre 768px et 1200px) --- */
@media (max-width: 1200px) {
  .it-footer-area {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }
  
  .it-footer-widget-logo img {
    max-width: 145px !important; /* On réduit encore le logo */
  }
  
  .it-footer-widget-title {
    font-size: 17px !important;
    margin-bottom: 14px !important;
  }
  
  .it-footer-widget-text p,
  .it-footer-widget-menu ul li a,
  .it-footer-widget-contact ul li,
  .it-footer-widget-contact ul li a,
  .it-footer-widget-contact ul li span {
    font-size: 14px !important; /* Taille standard pour la lisibilité */
  }
  
  .it-footer-widget-menu ul,
  .it-footer-widget-contact ul {
    gap: 8px !important; /* On resserre les lignes */
  }
  
  .it-footer-widget-btn .it-btn-yellow {
    padding: 14px 24px !important; /* Bouton légèrement réduit */
  }
  
  .it-footer-widget-btn .it-btn-yellow span {
    font-size: 14px !important;
  }
}

.has a {
    font-family: 'Satisfy', cursive !important;
}

/* ==========================================================================
   TITRE MANUSCRIT + FLÈCHE (Côte à côte)
   ========================================================================== */

/* Conteneur Flexbox pour aligner horizontalement */
.handwritten-title-wrap {
  display: flex;
  justify-content: center; /* Centre l'ensemble au milieu de la page */
  align-items: center;     /* Aligne la flèche et le texte sur la même hauteur */
  gap: 15px;               /* Espace exact entre la pointe de la flèche et le texte */
  margin-bottom: 30px;
  width: 100%;
}

/* Style de la police manuscrite */
.handwritten-text {
  font-family: "Satisfy", cursive !important;
  font-size: 32px !important;
  color: #000000 !important;
  text-transform: none !important;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

/* Style de la flèche */
.handwritten-arrow {
  width: 60px;       /* Largeur de la flèche */
  height: auto;
  flex-shrink: 0;    /* Empêche la flèche de s'écraser si le texte est long */
  transform: translateY(5px); /* Ajustement subtil pour que la pointe vise le milieu des lettres */
}

/* Ajustement pour les écrans de téléphone */
@media (max-width: 767px) {
  .handwritten-title-wrap {
    gap: 10px; /* On réduit un peu l'espace sur mobile */
  }
  .handwritten-text {
    font-size: 24px !important; /* Texte un peu plus petit */
    text-align: left;
  }
  .handwritten-arrow {
    width: 45px; /* Flèche un peu plus petite */
  }
}

/* ==========================================================================
   SOULIGNEMENT MANUSCRIT POUR LE MENU (Page active)
   ========================================================================== */

/* On s'assure que le lien lui-même est le point de repère */
.it-header-menu ul li a.active-handwritten {
  position: relative !important;
  display: inline-block !important; 
}

/* Le pseudo-élément qui dessine la ligne */
.it-header-menu ul li a.active-handwritten::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;       /* On l'aligne pile sur le bord gauche du texte */
  width: 100% !important;   /* On prend la largeur exacte du texte */
  height: 8px !important;   /* Épaisseur du trait jaune */
  
  /* La ligne jaune SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 1 98 8' stroke='%23F8C62F' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  
  z-index: 1 !important; 
  pointer-events: none;
  
  /* Ajustement vertical : 25px est généralement idéal pour les menus, 
     mais vous pouvez réduire (ex: 15px) si la ligne est trop basse */
  bottom: 25px !important; 
}

/* ==========================================================================
   CORRECTIONS DESIGN : SECTION ENVIRONNEMENT & RESSOURCES
   ========================================================================== */

/* 1. Forcer les cartes à avoir la même hauteur */
.it-blog-area .it-choose-2-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-bottom: 30px !important; /* Ajoute un peu d'espace sous le bouton */
}

.it-blog-area .it-choose-2-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Centre le contenu horizontalement */
  width: 100%;
}

/* 2. Désactiver les <br> invisibles qui cassent la mise en page */
.it-blog-area .it-choose-2-content br {
  display: none !important;
}

/* 3. Titres : hauteur fixe ET alignement en bas pour toucher le trait jaune */
.it-blog-area .it-choose-2-title {
  display: flex !important;
  align-items: flex-end !important; /* Pousse les titres courts vers le bas */
  justify-content: center !important; 
  min-height: 55px !important; /* Réserve l'espace exact pour 2 lignes de texte */
  padding-bottom: 5px !important; /* Espace exact entre les lettres et le trait jaune */
  margin-bottom: 15px !important;
  font-size: 19px !important; 
  font-family: 'Spartan-Bold', sans-serif !important;
  color: #111111 !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  width: 100%;
}

/* Ligne jaune dessinée à la main */
.it-blog-area .it-choose-2-title::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important; 
  width: 75% !important; 
  height: 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 50 1 98 8' stroke='%23F8C62F' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* 4. Paragraphes : Hauteur fixe pour aligner les boutons juste en dessous */
.it-blog-area .it-choose-2-content p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #444444 !important;
  margin-bottom: 15px !important; 
  text-align: center !important;
  min-height: 65px !important; /* Force la zone de texte à faire 3 lignes partout */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 5. Boutons : Rapprochés du texte (On a retiré margin-top: auto) */
.it-blog-area .it-course-btn {
  margin-top: 0 !important; 
}

/* 6. Uniformiser la zone de l'image */
.it-blog-area .it-choose-2-icon {
  margin-bottom: 25px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.it-blog-area .it-choose-2-icon img {
  max-width: 160px !important; /* Empêche l'image de devenir géante */
  height: auto !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   HERO SECTION - MODE COMPACT (Pour tous les écrans PC > 1400px)
   ========================================================================== */

@media (min-width: 1400px) {
  
  /* 1. Réduire massivement la hauteur de la section entière */
  .it-hero-4-ptb {
    padding-top: 130px !important;
    padding-bottom: 120px !important;
  }

  /* 2. Réduire la taille de la grande zone de couleur sur la droite */
  .it-hero-4-ptb::after {
    width: 350px !important;
  }

  /* 3. Titre principal beaucoup plus petit */
  .it-hero-4-ptb .it-hero-title {
    font-size: 42px !important; /* Très lisible, mais sans effet géant */
    line-height: 1.2 !important;
  }

  /* 4. Réduire le trait jaune sous "Depuis 2016" pour qu'il suive la taille du texte */
  .it-title-shape-2 svg {
    width: 220px !important;
    height: auto !important;
  }

  /* 5. Réduire le texte du paragraphe */
  .it-hero-4-ptb .it-hero-text p {
    font-size: 16px !important;
    margin-bottom: 25px !important;
  }

  /* 6. Réduire fortement l'image principale (Personnes) */
  .it-hero-4-thumb-box {
    width: 40% !important; /* Limite la boîte à 40% de l'écran */
    right: 5% !important;
    bottom: 5% !important;
  }
  
  .it-hero-4-thumb img {
    max-width: 500px !important; /* Empêche l'image de dépasser 500px */
    width: 100% !important;
    height: auto !important;
  }

  /* 7. Réduire les petits éléments flottants (crayons, chapeaux) de 40% */
  .it-hero-4-shape-1 img,
  .it-hero-4-shape-3 img,
  .it-hero-4-shape-8 img {
    transform: scale(0.6) !important;
  }

  /* 8. Aplatir un peu la vague SVG tout en bas */
  .it-hero-4-shape-7 {
    bottom: -1% !important;
  }
  
  .it-hero-4-shape-7 svg {
    height: 120px !important; /* Rend la vague moins haute */
  }
}

/* ==========================================================================
   ANIMATION : TRAIT SURLIGNEUR 100% CSS (Répétition en boucle)
   ========================================================================== */

.soluce-css-highlighter {
  position: absolute;
  left: 0;
  bottom: -3px; /* Monte ou descend le trait par rapport au texte */
  height: 7px; /* L'épaisseur du trait jaune */
  background-color: #F8C62F; /* Votre jaune Soluce */
  z-index: -1; /* Le place juste derrière le texte noir */
  border-radius: 10px; /* Arrondit légèrement les bords */
  
  width: 0; 
  
  /* L'animation dure 4 secondes en tout, et se répète à l'infini (infinite) */
  animation: drawMarkerLoop 5s ease-out infinite;
}

/* Le cycle de l'animation pour un effet hyper naturel */
@keyframes drawMarkerLoop {
  0% {
    width: 0;
    opacity: 1;
  }
  15% {
    width: 100%; /* Le trait est tracé rapidement (environ 0.7s) */
  }
  80% {
    width: 100%; /* Le trait reste visible et fixe pendant longtemps */
    opacity: 1;
  }
  90% {
    width: 100%;
    opacity: 0; /* Le trait disparaît en douceur (fondu) */
  }
  100% {
    width: 0;
    opacity: 0; /* Il retourne à 0, invisible, prêt à recommencer ! */
  }
}

/* ==========================================================================
   POLICES PERSONNALISÉES - SECTION HERO
   ========================================================================== */

/* TEXTE 1 : "La réussite de votre enfant commence ici" */
.it-hero-4-content .it-hero-title {
  /* Vous pouvez remplacer 'Petit Formal Script' par 'Send Flowers' si vous préférez */
  font-family: 'Great Vibes', cursive !important;
  font-weight: 400 !important; /* Les polices manuscrites rendent mieux sans être en gras */
}

/* TEXTE 2 : "Depuis 2016" (Cible le span directement à l'intérieur du titre) */
.it-hero-4-content .it-hero-title > span {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 400 !important;
  /* Astuce : Great Vibes taille très petit, on l'agrandit un peu pour qu'il soit lisible */
  font-size: 1em !important; 
}

/* TEXTE 3 : Le paragraphe "Du Primaire au Lycée..." */
.it-hero-4-content .it-hero-text p {
  font-family: 'Instrument Serif', serif !important;
  /* Instrument Serif est particulièrement élégant en italique, décommentez la ligne du dessous si vous voulez tester : */
  /* font-style: italic !important; */
  font-size: 22px !important; /* On augmente un peu la taille pour le confort de lecture */
  font-weight: 400 !important;
}

/* ==========================================================================
   TYPOGRAPHIE : CARTES COURS (Titres et Paragraphes)
   ========================================================================== */

/* Pour les titres (Cours individuels, Mini-groupes, Réservation facile) */
.cours-features .cours-feature-text h4 {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important; /* Maintient le texte en gras pour un titre */
  margin-bottom: 12px !important; /* Petit espace sous le titre */
}

/* Pour les paragraphes (Un enseignant dédié...) */
.cours-features .cours-feature-text p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important; /* 1rem correspond généralement à 16px */
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   DESIGN SUR-MESURE : PAGE CONTACT (Haut de page)
   ========================================================================== */

/* --- 1. Partie Supérieure (Fond Crème) --- */
.soluce-contact-intro {
  background-color: #FFFDF8; /* Couleur crème très légère */
  padding: 80px 0 0 0; /* Pas de padding en bas pour coller à l'image */
}

.soluce-contact-text-col {
  padding-right: 40px;
  padding-bottom: 60px;
}

.contact-main-title {
  font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
  font-weight: 800 !important;
  font-size: 46px;
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.contact-title-line {
  width: 55px;
  height: 6px;
  background-color: #111111;
  margin-bottom: 35px;
}

.contact-question {
  font-size: 18px;
  color: #111111;
  margin-bottom: 20px;
}

.contact-desc {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Texte manuscrit bleu et flèche */
.contact-handwritten-note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 30px;
}

.handwritten-arrow-down {
  width: 25px;
  height: 40px;
  margin-top: 5px;
}

.handwritten-blue-text {
  font-family: 'Petit Formal Script', cursive; /* Utilise la police déjà importée */
  color: #2B72A4; /* Bleu stylo */
  font-size: 24px;
  line-height: 1.2;
}

.soluce-contact-img-col {
  height: 100%;
  display: flex;
  align-items: flex-end; /* Colle l'image en bas */
}

.contact-students-img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   DESIGN SUR-MESURE : PAGE CONTACT (Nouvelle Section Intro & Cartes)
   ========================================================================== */

/* --- 1. Partie Supérieure (Fond Crème) --- */
.soluce-contact-intro {
  background-color: #FFFDF8; /* Couleur crème très légère */
  padding: 80px 0 0 0; /* Pas de padding en bas pour coller à l'image */
}

.soluce-contact-text-col {
  padding-right: 40px;
  padding-bottom: 60px;
}

.contact-main-title {
  font-family: 'Oswald', 'Montserrat', Arial, sans-serif;
  font-weight: 800 !important;
  font-size: 46px;
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: -1px;
}

.contact-title-line {
  width: 55px;
  height: 6px;
  background-color: #111111;
  margin-bottom: 35px;
}

.contact-question {
  font-size: 18px;
  color: #111111;
  margin-bottom: 20px;
}

.contact-desc {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
  line-height: 1.6;
}

/* Texte manuscrit bleu et flèche */
.contact-handwritten-note {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 30px;
}

.handwritten-arrow-down {
  width: 25px;
  height: 40px;
  margin-top: 5px;
}

.handwritten-blue-text {
  font-family: 'Petit Formal Script', cursive; /* Utilise la police déjà importée */
  color: #2B72A4; /* Bleu stylo */
  font-size: 24px;
  line-height: 1.2;
}

.soluce-contact-img-col {
  height: 100%;
  display: flex;
  align-items: flex-end; /* Colle l'image en bas */
}

.contact-students-img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  display: block;
}

/* --- 2. Partie Inférieure (Fond Jaune et Cartes Cliquables) --- */
.soluce-contact-cards-bg {
  background-color: #FAD76C; /* Jaune Soluce */
  padding: 60px 0;
}

/* Classes pour rendre les cartes cliquables avec effet au survol */
.clickable-card {
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.clickable-card:hover {
  transform: translateY(-5px); /* Soulève la carte quand on passe la souris */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Augmente l'ombre */
}

.soluce-white-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 40px 20px;
  height: 100%;
  width: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Ajustement du padding pour la carte avec la map */
.card-map-padding {
  padding: 25px 20px; 
  justify-content: space-between;
}

.card-text-top {
  margin-bottom: 15px;
}

.card-subtitle {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 17px;
  color: #111111;
  margin-bottom: 12px;
  font-weight: 500;
}

.card-phone {
  margin-bottom: 15px;
}

/* Le surlignage du numéro */
.highlight-contact {
  background-color: #FAD76C; /* Fond Jaune */
  color: #111111; /* Texte noir pour être lisible sur le jaune */
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}

.card-hours {
  font-size: 14px;
  color: #444444;
  margin-bottom: 5px;
}

.card-small {
  font-size: 11px;
  color: #777777;
  margin: 0;
}

/* Conteneur de la carte Google Maps */
.card-map-wrapper {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  /* TRÈS IMPORTANT : Empêche la souris de bloquer sur l'Iframe, 
     ce qui permet à la balise <a> de cliquer sur le lien global ! */
  pointer-events: none; 
}

/* --- 3. Responsive (Mobiles et Tablettes) --- */
@media (max-width: 991px) {
  .contact-main-title {
    font-size: 36px;
  }
  .soluce-contact-text-col {
    padding-right: 15px;
    padding-bottom: 40px;
  }
  .contact-students-img {
    max-height: 300px;
  }
  .soluce-contact-cards-bg {
    padding: 40px 0;
  }
  .soluce-white-card {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   CORRECTION 1920px : PAGE CONTACT (Anti-Zoom pour grands écrans)
   ========================================================================== */

@media (min-width: 1400px) {
  
  /* 1. On bloque la largeur des conteneurs pour éviter l'étirement infini */
  .soluce-contact-intro .container,
  .soluce-contact-cards-bg .container,
  .it-contact-3-area .container {
    max-width: 1250px !important; /* Garde le contenu bien centré et resserré */
    margin: 0 auto !important;
  }

  /* 2. On réduit les espaces vides (paddings) en haut et en bas */
  .soluce-contact-intro {
    padding-top: 60px !important;
  }
  .soluce-contact-cards-bg {
    padding: 50px 0 !important;
  }
  .it-contact-3-area {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  /* 3. On réduit la taille des très gros textes */
  .contact-main-title {
    font-size: 38px !important; /* Plus petit, plus élégant sur grand écran */
  }
  .contact-desc {
    font-size: 16px !important; /* Taille de lecture standard */
  }
  .handwritten-blue-text {
    font-size: 20px !important;
  }

  /* 4. On empêche l'image de droite de devenir un poster géant */
  .soluce-contact-img-col {
    justify-content: flex-end; /* Pousse l'image vers la droite */
  }
  .contact-students-img {
    max-width: 500px !important; /* Bloque la largeur max */
    max-height: 380px !important; /* Bloque la hauteur max */
    object-fit: cover;
  }

  /* 5. On rend les cartes de contact moins épaisses */
  .soluce-white-card {
    padding: 30px 20px !important;
  }
  .card-map-padding {
    padding: 15px 20px !important; 
  }
  .highlight-contact {
    font-size: 22px !important; /* Numéro de téléphone un peu plus discret */
    padding: 4px 10px !important;
  }
}

/* ==========================================================================
   MODE ULTRA-COMPACT 1920px : FORMULAIRE DE CONTACT
   ========================================================================== */

@media (min-width: 1400px) {
  
  /* 1. La boîte du formulaire (Encore plus fine) */
  .it-contact-3-form-box {
    max-width: 650px !important; /* Boîte très compacte */
    margin: 0 auto !important;
    padding: 35px 40px !important; /* Réduit l'espace vide autour */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  }

  /* Suppression de la forme bleue (arrière-plan) par défaut du thème */
.it-contact-3-right::after {
  display: none !important;
}

  /* 2. Titre principal du formulaire */
  .it-contact-3-form-box .it-section-title {
    font-size: 26px !important; /* Titre beaucoup plus petit */
    text-align: center !important;
    margin-bottom: 25px !important;
  }

  /* 3. Réduction drastique des énormes espaces entre les champs (écrase le mb-40) */
  .it-contact-3-form-box .mb-40 {
    margin-bottom: 15px !important; 
  }

  /* 4. Les étiquettes (Labels : Prénom, E-mail...) */
  .it-contact-3-form-box label {
    font-size: 13px !important; /* Texte discret */
    font-weight: 600 !important;
    margin-bottom: 6px !important;
  }

  /* 5. Hauteur et texte des cases de saisie (Inputs, Select) */
  .it-contact-3-form-box input,
  .it-contact-3-form-box select {
    height: 45px !important; /* Cases fines comme sur les sites modernes */
    font-size: 14px !important;
    padding: 0 15px !important;
  }
  
  /* 6. Zone de texte (Message) */
  .it-contact-3-form-box textarea {
    height: 110px !important; /* Hauteur divisée par deux */
    font-size: 14px !important;
    padding: 12px 15px !important;
  }

  /* 7. Le texte gris à l'intérieur des cases (Placeholders) */
  .it-contact-3-form-box input::placeholder,
  .it-contact-3-form-box textarea::placeholder {
    font-size: 13px !important;
  }

  /* 8. Réduction du Bouton Jaune */
  .it-signup-input-wrap .col-12:last-child {
    display: flex;
    justify-content: center; /* Centre le bouton */
    margin-top: 10px !important;
  }

  .it-contact-3-form-box .it-btn-yellow {
    padding: 12px 30px !important; /* Bouton moins gonflé */
    height: auto !important;
  }
  
  .it-contact-3-form-box .it-btn-yellow .text-1,
  .it-contact-3-form-box .it-btn-yellow .text-2 {
    font-size: 15px !important; /* Texte du bouton plus petit */
  }

  .it-contact-3-form-box .it-btn-yellow i svg {
    width: 18px !important; /* Icône réduite */
    height: 18px !important;
  }
}

/* ==========================================================================
   TYPOGRAPHIE : SECTION "POURQUOI CHOISIR SOLUCE"
   ========================================================================== */

/* 1. Texte d'introduction ("Depuis 2016...") */
.results-soluce-intro {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important; 
  font-weight: 400 !important;
  line-height: 1.6 !important; /* Améliore l'espacement entre les lignes */
}

/* 2. Textes de la liste ("Tous nos élèves...") */
.results-soluce-list p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* 2b. On force le texte en gras pour les balises <strong> ("100% de réussite...") */
.results-soluce-list p strong {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important; /* 700 est la valeur exacte pour le texte en gras (Bold) */
  color: #111111 !important; /* Assure un noir bien profond pour faire ressortir l'argument */
}

/* Description des enseignants ("Accompagnement du Primaire aux Concours...") */
.cours-teacher-desc {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important; /* Espacement optimal pour la lecture */
  color: #333333 !important; /* Gris foncé pour une bonne lisibilité */
}

/* Descriptions des 4 avantages (Vidéoprojecteur, Fibre optique...) */
.it-cta-4-content .it-choose-2-content p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important; /* Environ 16px */
  font-weight: 400 !important;
  line-height: 1.6 !important; /* Aère le texte */
  color: #333333 !important; /* Assure un gris sombre pour contraster avec la boîte jaune si besoin */
}

/* 1. Sous-titre centré ("Profitez de la méthode...") */
.postbox-dsc p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important; /* Environ 16px */
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* 2. Liste des fonctionnalités (Vidéos, PDF, Live) */
.digital-feature-text p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #555555 !important; /* Gris un peu plus doux pour la lecture */
}

/* 3. Liste "Pourquoi choisir l'abonnement" (Contenu Exclusif, etc.) */
.digital-why-list li div {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #333333 !important;
}

/* 3b. Met en gras les titres de la liste "Pourquoi choisir" */
.digital-why-list li div span {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important; /* Titres en gras */
  color: #111111 !important; /* Noir profond */
  display: block; /* S'assure que le titre est sur sa propre ligne si nécessaire */
  margin-bottom: 5px !important;
}

/* 1. Texte d'introduction sous le titre ("Des services et des espaces...") */
.it-choose-2-section-title-box p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important; /* Environ 16px */
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #555555 !important; /* Un gris moyen pour adoucir la lecture */
}

/* 2. Textes descriptifs à l'intérieur des 4 cartes ("Cours collectifs...", etc.) */
.it-choose-2-item .it-choose-2-content p {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #333333 !important; /* Gris foncé pour contraster avec le fond blanc des cartes */
}