.u-section-1 .u-sheet-1 {
  min-height: 115px;
}

.u-section-1 .u-text-1 {
  margin: 31px auto;
}.u-section-2 .u-sheet-1 {
  min-height: auto;
}

.u-section-2 .u-layout-wrap-1 {
  margin-top: 0;
  margin-bottom: 56px;
}

.u-section-2 .u-layout-cell-1 {
  min-height: 400px;
  filter: none;
}

.u-section-2 .u-container-layout-1 {
  padding: 0 30px;
}

.u-section-2 .u-video-1 {
  width: 770px;
  height: 433px;
  margin: 0 146px -33px auto;
}

.u-section-2 .embed-responsive-1 {
  position: absolute;
}

@media (max-width: 1199px) {
  .u-section-2 .u-sheet-1 {
    min-height: auto;
  }

  .u-section-2 .u-layout-wrap-1 {
    position: relative;
  }

  .u-section-2 .u-layout-cell-1 {
    min-height: auto;
    background-position: 50% 50%;
  }

  .u-section-2 .u-video-1 {
    margin-right: auto;
  }
}

@media (max-width: 991px) {
  .u-section-2 .u-sheet-1 {
    min-height: 309px;
  }

  .u-section-2 .u-layout-cell-1 {
    min-height: 253px;
  }

  .u-section-2 .u-video-1 {
    width: 660px;
    height: 371px;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .u-section-2 .u-sheet-1 {
    min-height: 540px;
  }

  .u-section-2 .u-layout-cell-1 {
    min-height: 380px;
  }

  .u-section-2 .u-container-layout-1 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .u-section-2 .u-video-1 {
    width: 520px;
    height: 292px;
  }
}

@media (max-width: 575px) {
  .u-section-2 .u-sheet-1 {
    min-height: auto;
  }

  .u-section-2 .u-layout-cell-1 {
    min-height: auto;
  }

  .u-section-2 .u-video-1 {
    width: 320px;
    height: 180px;
  }
}


/* ==========================================================================
   REFONTE COMPLÈTE ET PROPRE DE LA SECTION 3 (SYSTÈME DE GRILLE WEB)
   ========================================================================== */

/* 1. CONFIGURATION DE LA ZONE GLOBALE */
.u-section-3 .u-sheet-1 {
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
}

/* 2. LE GRAND TITRE / TEXTE DU DESSUS (Parfaitement centré) */
.u-section-3 .u-text-1 {
  margin: 0 auto 40px auto !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* 3. LE CONTENEUR DE LA LISTE */
.u-section-3 .u-list-1 {
  width: 100% !important;
  max-width: 1000px !important; /* Ajuste selon la largeur désirée pour ton bloc */
  margin: 0 auto !important;
}

/* 4. LA GRILLE CRUCIALE : 3 COLONNES, 2 LIGNES (Ordinateur) */
.u-section-3 .u-repeater-1 {
  display: grid !important;
  
  /* Crée 3 colonnes égales */
  grid-template-columns: repeat(3, 1fr) !important; 
  
  /* Ligne 1 (images) s'adapte au contenu, Ligne 2 (textes) s'adapte au contenu */
  grid-template-rows: auto auto !important; 
  
  gap: 20px 40px !important; /* 20px d'espace entre les lignes, 40px entre les colonnes */
  width: 100% !important;
  min-height: auto !important;
}

/* 5. DISSOLUTION DES SOUS-CONTAINERS POUR LES PLACER DANS LA GRILLE */
/* 'display: contents' fait ignorer ces divs au navigateur pour aligner directement les img et p */
.u-section-3 .u-list-item,
.u-section-3 .u-container-layout-1,
.u-section-3 .u-container-layout-2,
.u-section-3 .u-container-layout-3 {
  display: contents !important; 
}

/* 6. ALIGNEMENT DES IMAGES SUR LA LIGNE 1 */
.u-section-3 .u-image-1,
.u-section-3 .u-image-2,
.u-section-3 .u-image-3 {
  grid-row: 1 !important;              /* Force la ligne 1 */
  justify-self: center !important;     /* Centre horizontalement dans sa colonne */
  align-self: end !important;          /* Aligne le bas de toutes les images sur la même ligne ligne d'horizon */
  
  /* Bridage strict de la taille des logos */
  width: 106px !important;
  max-width: 106px !important;
  height: 106px !important;
  max-height: 106px !important;
  
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* 7. ALIGNEMENT DES TEXTES SUR LA LIGNE 2 */
.u-section-3 .u-text-2,
.u-section-3 .u-text-3,
.u-section-3 .u-text-4 {
  grid-row: 2 !important;              /* Force la ligne 2 */
  justify-self: center !important;     /* Centre horizontalement sous l'image */
  align-self: start !important;        /* Aligne le haut de tous les textes */
  
  text-align: center !important;
  width: 100% !important;
  max-width: 200px !important;
  white-space: nowrap !important;      /* Anti-lettre par lettre */
  margin: 0 !important;
  
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/* ==========================================================================
   ADAPTATION SMARTPHONE & TABLETTE (Retour en liste propre)
   ========================================================================== */
@media (max-width: 767px) {
  .u-section-3 .u-repeater-1 {
    display: flex !important;
    flex-direction: column !important; /* Rebascule l'un sous l'autre sur mobile */
    align-items: center !important;
    gap: 40px !important;
  }
  
  /* On redonne un affichage classique aux blocs pour le mobile */
  .u-section-3 .u-container-layout-1,
  .u-section-3 .u-container-layout-2,
  .u-section-3 .u-container-layout-3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .u-section-3 .u-image-1,
  .u-section-3 .u-image-2,
  .u-section-3 .u-image-3 {
    margin-bottom: 10px !important;
  }
}

/* ==========================================================================
   HARMONISATION COMPLÈTE DE LA SECTION 4 (COPIE CONFORME DE LA S3)
   ========================================================================== */

/* 1. FORCE LA ZONE GLOBALE */
.u-section-4 .u-sheet-1 {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 20px !important;
  box-sizing: border-box !important;
}

/* 2. LE CONTENEUR UNIQUE (Même taille que le bloc bleu S3, fond jaune, écriture noire) */
.u-section-4 .mon-bloc-experiences {
  background-color: #fdd200 !important; /* Jaune exact */
  color: #000000 !important;            /* Écriture noire absolue */
  width: 100% !important;
  max-width: 1000px !important;         /* Strictement la même taille que le bloc bleu */
  border-radius: 8px !important;        /* Bords arrondis identiques */
  padding: 40px !important;             /* Espace intérieur propre */
  box-sizing: border-box !important;
}

/* 3. LE GRAND TITRE DE LA SECTION */
.u-section-4 .u-text-1 {
  margin: 0 auto 40px auto !important;
  text-align: center !important;
  color: #000000 !important;
  font-weight: bold !important;
  display: block !important;
}

/* 4. NETTOYAGE DES BRIDAGES DE LISTE DE NICEPAGE */
.u-section-4 .u-list-1 {
  width: 100% !important;
  margin: 0 auto !important;
}

/* 5. LE RÉPÉTEUR (Organisation des lignes d'expériences) */
.u-section-4 .u-repeater-1 {
  display: flex !important;
  flex-direction: column !important;     /* Les expériences s'empilent proprement */
  gap: 25px !important;                  /* Espace de 25px entre chaque expérience */
  width: 100% !important;
  min-height: auto !important;
}

/* 6. ENCAPSULATION DE CHAQUE EXPÉRIENCE (Titre + Date) */
.u-section-4 .u-container-layout-1,
.u-section-4 .u-container-layout-2,
.u-section-4 .u-container-layout-3,
.u-section-4 .u-container-layout-4,
.u-section-4 .u-container-layout-5,
.u-section-4 .u-container-layout-6 {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;        /* Centre le texte au milieu */
  text-align: center !important;
}

/* Force les titres des expériences en noir */
.u-section-4 .u-text-2,
.u-section-4 .u-text-4,
.u-section-4 .u-text-6,
.u-section-4 .u-text-8,
.u-section-4 .u-text-10,
.u-section-4 .u-text-12 {
  margin: 0 auto 4px auto !important;
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Force les dates et studios en noir plus soft */
.u-section-4 .u-text-3,
.u-section-4 .u-text-5,
.u-section-4 .u-text-7,
.u-section-4 .u-text-9,
.u-section-4 .u-text-11,
.u-section-4 .u-text-13 {
  margin: 0 auto !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   RESPONSIVE (Ajustement pour les petits écrans)
   ========================================================================== */
@media (max-width: 767px) {
  .u-section-4 .mon-bloc-experiences {
    padding: 25px 15px !important;     /* Moins de marge sur les côtés sur smartphone */
  }
}



/* --- TAILLE DE BASE (PC ET TABLETTE) --- */
h2 {
    font-size: 100px !important; /* Change 46px par la taille voulue sur ordinateur */
}

/* --- TAILLE ADAPTATIVE (TÉLÉPHONE) --- */
@media (max-width: 767px) {
    h2 {
        font-size: 44px !important; /* Change 28px par la taille voulue sur smartphone */
    }
}