/*
 * =============================================================
 * CSS FINAL ET COMPLET pour les sections "Core Values" & "Team"
 * =============================================================
 * Préfixe : ext-
 * Inclut toutes les animations (point et texte) et styles responsives.
 */

/* === Variables (utilisées par les sections) === */
:root {
    --size--1-5rem: 1.5rem; --size--2rem: 2rem; --size--2-5rem: 2.5rem; --size--3rem: 3rem; --size--3-5rem: 3.5rem;
    --size--5rem: 5rem; --size--6rem: 6rem; --size--11rem: 11rem; --size--14rem: 14rem; --size--15rem: 15rem;
    --space--1: 0.25rem; --space--3: 0.75rem; --space--6: 2rem; --space--8: 3rem; --space--10: 4rem;
    --radius--large: 2rem; --radius--main: 1.5rem;
    --_color---swatch--white: #fff; --_color---swatch--white-80: rgba(255, 255, 255, 0.8);
    --_color---swatch--black: #000; --_color---neutral--100: #f5f5f5; --_color---neutral--900: #292828;
    --_color---brand--dark-blue: #02076c; --_color---swatch--text: #666c75;
    --_typography---font-family--primary: 'Urbanist', sans-serif;
    --_typography---font-weight--medium: 500; --_typography---font-weight--normal: 400;
    --font-size--h2: 4rem; --font-size--h3: 3rem; --font-size--h5: 2rem; --font-size--text-medium: 1.125rem;
    --_typography---line-height--1-2: 1.2;
}

/* === Styles Généraux & Classes Utilitaires === */
h2, p { margin: 0; }
img { max-width: 100%; display: inline-block; }
.ext-u-radius-large { border-radius: var(--radius--large); }
.ext-u-overflow-hidden { overflow: hidden; }
.ext-u-position-relative { position: relative; }
.ext-u-container { max-width: 1128px; margin-left: auto; margin-right: auto; padding-right: 2rem; padding-left: 2rem; position: relative; }
.ext-u-zindex-1 { z-index: 1; }
.ext-u-text-style-h2 { font-family: var(--_typography---font-family--primary); font-size: var(--font-size--h2); line-height: var(--_typography---line-height--1-2); font-weight: var(--_typography---font-weight--medium); }
.ext-u-text-style-h3 { font-family: var(--_typography---font-family--primary); font-size: var(--font-size--h3); line-height: var(--_typography---line-height--1-2); font-weight: var(--_typography---font-weight--normal); }
.ext-u-text-style-h5 { font-family: var(--_typography---font-family--primary); font-size: var(--font-size--h5); line-height: 1.4; font-weight: var(--_typography---font-weight--medium); }
.ext-u-text-style-medium { font-size: var(--font-size--text-medium); line-height: 1.5; font-family: var(--_typography---font-family--primary); }
.ext-u-mb-8 { margin-bottom: var(--space--8); }
.ext-u-mt-6 { margin-top: var(--space--6); }
.ext-u-mt-3 { margin-top: var(--space--3); }
.ext-u-vflex-left-top { display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; }
.ext-u-hflex-left-center { display: flex; align-items: center; justify-content: flex-start; }
.ext-u-gap-10 { gap: var(--space--10); }
.ext-u-theme-dark { color: var(--_color---swatch--white); }
.ext-u-text-align-center { text-align: center; }
.ext-u-vflex-center-top { display: flex; flex-flow: column; align-items: center; justify-content: flex-start; }
.ext-u-gap-1 { gap: var(--space--1); }
.ext-u-radius-main { border-radius: var(--radius--main); }
.ext-u-hflex-right-bottom { display: flex; align-items: flex-end; justify-content: flex-end; }
.ext-u-color-secondary { color: var(--_color---swatch--text); }
.ext-u-color-brand { color: var(--_color---brand--dark-blue); }
.ext-u-weight-medium { font-weight: var(--_typography---font-weight--medium); }
.ext-u-hflex-left-top { display: flex; align-items: flex-start; justify-content: flex-start; }

/* === Section 1: Academy / Core Values === */
.ext-academy_section { margin-top: var(--size--5rem); margin-bottom: var(--size--5rem); padding: 0 var(--size--1-5rem); max-width: 1904px; margin-left: auto; margin-right: auto; }
.ext-academy_wrap { padding: 7.5rem 2rem 14rem; background-image: linear-gradient(45deg, #010777, #010039 99%, #fff); }
.ext-heading_wrap { width: 55%; }
.ext-academy_heading { color: var(--_color---swatch--white); }
.ext-academy_p { color: var(--_color---swatch--white-80); text-wrap: balance; }
.ext-core_hover_wrap { margin-top: var(--size--6rem); }
.ext-core_single_wrap { height: 72px; cursor: pointer; gap: 0rem; }

.ext-core_dot {
    background-color: var(--_color---swatch--white);
    border-radius: 1rem;
    width: 1rem;
    height: 1rem;
    transform: scale(0);
    transition: transform 0.3s ease;
}
.ext-core_single_wrap:hover .ext-core_dot {
    transform: scale(1);
}

.ext-core_heading {
    color: var(--_color---swatch--white); /* Couleur de base blanche */
    opacity: 0.2; /* Opacité faible par défaut */
    transform: translateX(0px); /* Position initiale */
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ext-core_single_wrap:hover .ext-core_heading {
    opacity: 1; /* Opacité complète au survol */
    transform: translateX(24px); /* Décalage vers la droite */
}

.ext-academy_circle-top { z-index: 0; filter: blur(200px); background-color: #2369ff99; border-radius: 10000px; width: 70%; height: 700px; position: absolute; inset: -25% 0% auto auto; }
.ext-academy_circle-bot { filter: blur(220px); background-color: #2369ff99; border-radius: 1000px; width: 50%; height: 600px; position: absolute; inset: auto -10% -20% auto; }
.ext-dna_image { mix-blend-mode: lighten; width: auto; height: 100%; position: absolute; inset: 0 0 0 auto; }

/* === Section 2: Team Carousel === */
.ext-team_section { margin-top: var(--size--14rem); padding-bottom: var(--size--11rem); overflow: hidden; }
.ext-centered_heading.ext-u-text-style-h2 { text-wrap: balance; }
.ext-centered_text_block { max-width: 600px; margin-left: auto; margin-right: auto; color: var(--_color---swatch--text); }
.ext-team_carousel { margin-top: var(--size--5rem); height: 780px; position: relative; }
.ext-marque_track { display: flex; position: absolute; white-space: nowrap; will-change: transform; animation: ext-marquee-horizontal 65s linear infinite; }
.ext-marque_wrap { display: flex; }
.ext-team_single_wrap { flex: 0 0 auto; margin-right: var(--size--2-5rem); }
.ext-team_image_wrap { background-color: var(--_color---neutral--100); width: 480px; height: 600px; }
.ext-team_image { width: 100%; height: 100%; object-fit: cover; }
.ext-team_title { white-space: normal; }
@keyframes ext-marquee-horizontal { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ext-marque_track:hover { animation-play-state: paused; }

/* === Styles Responsives === */
@media screen and (max-width: 991px) {
    :root { --font-size--h2: 3.125rem; --font-size--h3: 2.75rem; --font-size--h5: 1.75rem; --size--11rem: 5rem; --size--14rem: 5rem; --size--15rem: 5rem; }
    .ext-u-text-style-h2, .ext-academy_p { text-align: center; }
    .ext-heading_wrap { width: 100%; }
    .ext-academy_section, .ext-team_section { padding-right: 1rem; padding-left: 1rem; }
    .ext-dna_image { display: none; }
    .ext-team_image_wrap { width: 400px; height: 500px; }
    .ext-team_carousel { height: 700px; }
}
@media screen and (max-width: 767px) {
    :root { --font-size--h2: 3rem; --font-size--h3: 2.5rem; --font-size--h5: 1.5rem; --size--11rem: 4rem; --size--14rem: 4rem; }
    .ext-team_image_wrap { width: 300px; height: 400px; }
    .ext-team_carousel { height: 560px; }
}
@media screen and (max-width: 479px) {
    :root { --font-size--h2: 2.25rem; --font-size--h3: 2rem; --font-size--h5: 1.5rem; }
    .ext-academy_wrap { padding: 2.5rem 1.5rem 3rem; }
    .ext-core_hover_wrap { gap: var(--space--6); }
}
/* Ajout optionnel pour l'effet de zoom sur les images de l'équipe */
.ext-team_image {
    transition: transform 0.4s ease;
}

.ext-team_single_wrap:hover .ext-team_image {
    transform: scale(1.1);
}

/*
 * =========================================================================
 * CORRECTIONS pour le texte caché et l'alignement dans "Core Values"
 * =========================================================================
 */

/* Le conteneur du texte doit être `position: relative` pour que le texte caché puisse se positionner par rapport à lui. */
.ext-core_text-wrapper {
    position: relative;
}

/* Style et état initial du texte caché */
.ext-core_hidden-text {
    /* Positionnement absolu pour ne pas affecter la mise en page */
    position: absolute;
    top: 100%; /* Se place juste en dessous de son parent (le wrapper) */
    left: 24px; /* Aligné avec le titre h2 lorsqu'il est décalé */
    padding-top: 8px; /* Ajoute un petit espace vertical */
    width: 350px; /* Limite la largeur du texte pour qu'il ne soit pas trop long */

    /* Style du texte */
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;

    /* Animation d'apparition */
    opacity: 0; /* Invisible par défaut */
    transform: translateY(10px); /* Légèrement décalé vers le bas pour un effet de "montée" */
    pointer-events: none; /* Ne peut pas être cliqué lorsqu'il est invisible */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* État au survol du conteneur principal */
.ext-core_single_wrap:hover .ext-core_hidden-text {
    opacity: 1; /* Devient visible */
    transform: translateY(0); /* Revient à sa position finale */
    pointer-events: auto; /* Peut être interagi */
}

/* Assure que le conteneur principal garde son alignement centré */
.ext-core_single_wrap {
    align-items: center !important; /* Force l'alignement vertical au centre */
}
/*
 * =========================================================================
 * AJOUT - CSS pour la section "Learn Skills / Courses Grid" (Corrigé)
 * =========================================================================
 */

/* === Disposition Générale === */
.ext-all_section {
    padding-top: var(--size--12rem);
    position: relative;
}
.ext-about_us_content {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
}
.ext-about_us_content_text {
    max-width: 995px;
}
.ext-about_section_heading {
    text-wrap: balance;
}
.ext-about_us_paragraph {
    max-width: 712px;
}
.ext-w-inline-block {
    display: inline-block;
    max-width: 100%;
}

/* === Grille des Cartes de Cours === */
.ext-courses_c_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.ext-courses_c_card {
    display: flex;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-decoration: none;
    background-position: 50%, 50%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    color: var(--_color---swatch--white);
}

/* Images de fond pour chaque carte */
.ext-c_card1 { background-image: linear-gradient(rgba(2, 7, 108, 0) 40%, rgba(2, 7, 108, 0.8)), url(../../images/card1.webp); }
.ext-c_card2 { background-image: linear-gradient(rgba(2, 7, 108, 0) 40%, rgba(2, 7, 108, 0.8)), url(../../images/card2.webp); }
.ext-c_card3 { background-image: linear-gradient(rgba(2, 7, 108, 0) 40%, rgba(2, 7, 108, 0.8)), url(../../images/card3.webp); }
.ext-c_card4 { background-image: linear-gradient(rgba(2, 7, 108, 0) 40%, rgba(2, 7, 108, 0.8)), url(../../images/card4.webp); }
.ext-c_card5 { background-image: linear-gradient(rgba(2, 7, 108, 0) 40%, rgba(2, 7, 108, 0.8)), url(../../images/card5.webp); }

.ext-courses_c_card_text_wrap { z-index: 1; position: relative; }
.ext-courses_card_heading { font-size: var(--size--2rem); color: var(--_color---swatch--white); }
.ext-courses_card_p { color: var(--_color---swatch--text); }

/* === Carte "More Courses" === */
.ext-courses_c_more_wrap {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #e1edfb;
    border-radius: 1.5rem;
    gap: 2rem;
    padding: 6rem 0;
}
.ext-card_more_text { width: 80%; }
.ext-courses_card_heading.ext-is-dark { color: var(--_color---swatch--black); }

/* === Animation au survol (Hover) === */
.ext-courses_card_overlay {
    z-index: 0;
    background-image: linear-gradient(transparent, #02076c 85%);
    position: absolute;
    inset: 0%;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ext-courses_card_text.ext-white-body-text {
    color: var(--_color---swatch--white);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease 0.1s;
}
.ext-courses_card_btn {
    position: absolute;
    inset: 5% 5% auto auto;
    width: 56px;
    height: 56px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.ext-courses_c_card:hover .ext-courses_card_overlay { opacity: 1; }
.ext-courses_c_card:hover .ext-courses_card_text.ext-white-body-text { max-height: 100px; opacity: 1; }
.ext-courses_c_card:hover .ext-courses_card_btn { opacity: 1; transform: translateY(0px); }

/* === Styles des boutons (Corrigé) === */
.ext-u-button {
    display: inline-block;
    position: relative;
    border-radius: var(--radius--round);
    background-image: linear-gradient(135deg, #0e105a, #1643c0);
    box-shadow: inset 0 -12px 32px rgba(255,255,255,0.2);
    color: var(--_color---swatch--white);
    line-height: 1;
    text-align: center;
    transition: all 0.4s;
    text-decoration: none;
}
.ext-u-button:hover {
    background-image: linear-gradient(135deg, #02076c, #02076c);
    box-shadow: none;
}
.ext-u-button-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--_typography---font-weight--semibold);
}
.ext-u-button-layout[data-wf--button-layout--variant="small"] {
    width: 200px;
    height: 56px;
}
.ext-u-button_text { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; }

/* Styles pour la structure du lien cliquable du bouton */
.ext-g_clickable_wrap {
    position: absolute;
    inset: 0%;
    z-index: 3;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.ext-g_clickable_link {
    display: block;
    position: absolute;
    inset: 0%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.ext-g_clickable_button { display: none; }
.ext-g_clickable_text.ext-u-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    border: 0 !important;
}

/* Autres classes utilitaires nécessaires */
.ext-u-mb-4 { margin-bottom: 1rem; }
.ext-u-mb-6 { margin-bottom: 1.5rem; }
.ext-u-zindex-1 { z-index: 1; }

/* === Styles Responsives pour cette section === */
@media screen and (max-width: 991px) {
    .ext-all_section { padding-top: 4rem; }
    .ext-about_us_paragraph { text-align: center; }
    .ext-courses_c_grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
}
@media screen and (max-width: 767px) {
    .ext-all_section { padding-top: 3rem; }
    .ext-courses_c_grid { grid-template-columns: 1fr; }
    .ext-courses_c_card { aspect-ratio: 3 / 3.5; }
    .ext-courses_c_more_wrap { padding: 4rem 0; }
}