/* CSS Reset */
html, body {
    margin: 0;
    padding: 0;
}

/* Import des polices (assurez-vous que Satoshi est bien chargée via ton thème ou une autre méthode) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
/* Assurez-vous que la police 'Satoshi' est bien importée sur votre site, par exemple via un plugin ou l'en-tête du thème */


/* ---------------------------------------------------- */
/* --- AMÉLIORATIONS GÉNÉRALES DU CONTENU DES PAGES ET ARTICLES --- */
/* ---------------------------------------------------- */

/* 1. Mise en page générale et lisibilité du contenu */
/* Cible le conteneur principal du contenu pour tous les articles/pages */
.site-content .entry-content {
    max-width: 850px; /* Largeur idéale pour la lecture d'articles */
    margin: 40px auto 60px auto; /* Centre le contenu et ajoute de l'espace vertical */
    font-family: 'Satoshi', 'Open Sans', Arial, sans-serif; /* Cohérence de la police */
    padding: 0 15px; /* Ajoute un peu de padding latéral pour mobile */
    box-sizing: border-box; /* S'assure que le padding n'augmente pas la largeur */
}

/* 2. Amélioration de la typographie (paragraphes et liens) */
.site-content .entry-content p,
.site-content .entry-content li {
    font-size: 1.15em; /* Taille de police légèrement plus grande pour le confort */
    line-height: 1.75; /* Interligne aéré */
    color: #3d3d3d; /* Un noir moins dur pour les yeux */
    margin-bottom: 1.5em;
}

.site-content .entry-content a {
    color: #4054b2; /* Couleur de lien raccord avec le header (bleu ALTA) */
    text-decoration: none;
    border-bottom: 1px dotted #4054b2; /* Soulignement discret */
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

.site-content .entry-content a:hover {
    color: #007bff; /* Bleu plus vif au survol */
    border-bottom-style: solid; /* Soulignement plein au survol */
}

/* 3. Refonte des titres pour une hiérarchie claire */
/* Cible le titre principal de la page/article (généralement un H1) */
.site-content .entry-title {
    font-family: 'Montserrat', sans-serif; /* Utilise Montserrat pour les titres pour un look plus moderne */
    font-size: 3em; /* Grande taille pour le titre principal */
    margin-bottom: 1em;
    text-align: center;
    color: #2c3e50; /* Couleur foncée élégante */
}

/* Cible les titres H2 générés par l'éditeur de blocs (souvent avec .wp-block-heading) */
.site-content .entry-content h2.wp-block-heading {
    font-family: 'Montserrat', sans-serif; /* Utilise Montserrat pour les titres H2 */
    font-size: 2.2em;
    color: #2c3e50;
    margin-top: 2.5em;
    margin-bottom: 1.2em;
    padding-bottom: 0.4em;
    border-bottom: 3px solid #4054b2; /* Ligne de séparation élégante et distinctive (bleu ALTA) */
    text-align: left; /* Alignement par défaut à gauche pour la barre */
}

/* ANNULATION des styles de surlignage agressifs sur les titres */
.site-content .entry-content h2.wp-block-heading mark,
.site-content .entry-content h5.wp-block-heading mark {
    background-color: transparent;
    color: inherit; /* Le titre hérite de la couleur définie ci-dessus */
}

.site-content .entry-content h5.wp-block-heading {
    font-family: 'Open Sans', Arial, sans-serif; /* Conserve Open Sans ou Satoshi pour les sous-titres */
    text-align: center;
    font-size: 1.1em;
    font-style: italic;
    color: #555;
    margin-bottom: 0.5em;
}

/* 4. Correction et embellissement de l'intégration Canva (AVEC LARGEUR AUGMENTÉE) */
/* Cible le conteneur DIV de l'iframe Canva */
.site-content .entry-content div[style*="canva.com"] {
    width: 100vw; /* Occupe 100% de la largeur de la fenêtre (viewport width) */
    max-width: 1100px; /* On limite à 1100px pour les très grands écrans */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* Magie CSS pour le centrage en pleine largeur */
    margin-right: -50vw;
    margin-top: 2.5em;
    margin-bottom: 3em;
    padding-top: 0; /* On annule l'ancien padding */
    height: 620px; /* Hauteur fixe. Ajustez si besoin. */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Essentiel pour que le border-radius s'applique à l'iframe */
}

/* Cible l'iframe Canva elle-même */
.site-content .entry-content div[style*="canva.com"] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* L'iframe doit remplir son conteneur */
    height: 100%;
    border: none;
}


/* 5. Amélioration de la lisibilité des listes (Partenaires et Work Packages) */
.site-content .entry-content p strong {
    color: #2c3e50; /* Met en valeur les éléments importants comme "WP1" */
}

/* Style de la liste des partenaires pour la faire ressembler à une vraie liste */
.site-content .entry-content p[class*="font-size"] {
    line-height: 1.8; /* Espacement spécifique pour ces listes */
}


/* 6. Repositionnement et style des images/logos en bas de page */
/* Ces images sont des frères (siblings) du .site-content, on les cible ainsi */
.site-wrapper > img { /* Cible les images directement après .site-wrapper */
    display: block;
    margin: 30px auto 15px auto; /* Centre horizontalement et ajoute de l'espace */
    max-width: 90%; /* S'assure qu'elles ne débordent pas sur les petits écrans */
    height: auto; /* Garde le ratio de l'image */
    opacity: 0.8; /* Les rend un peu plus discrets */
    transition: opacity 0.3s ease;
}

.site-wrapper > img:hover {
    opacity: 1;
}

/* Styles spécifiques pour le bandeau "ALTA - inclure l'élève plurilingue" */
/* Note: Ces styles étaient en ligne, les mettre ici pour plus de propreté */
.site-wrapper > div[style*="linear-gradient"] {
    background:linear-gradient(-45deg, rgba(255, 255, 255, 0.75), rgba(245, 245, 245, 0.75), rgba(250, 250, 250, 0.75), rgba(248, 248, 248, 0.75));
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Satoshi', sans-serif;
    margin-bottom: 20px; /* Ajoute un espace sous le bandeau */
}

.site-wrapper > div[style*="linear-gradient"] span {
    font-size: 2rem;
    color: black;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* ---------------------------------------------------- */
/* --- STYLES DES BOUTONS (Repris de la version préférée) --- */
/* ---------------------------------------------------- */

/* Conteneur des boutons */
.formation-buttons-container-v4 {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    padding: 40px 15px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-top: 40px; /* Ajoute de l'espace au-dessus des boutons */
    margin-bottom: 40px; /* Ajoute de l'espace en-dessous des boutons */
}

/* Style principal du bouton V4 */
.modern-button-v4 {
    /* --- TAILLE ET ASPECT --- */
    font-size: 18px;
    font-weight: 600;
    padding: 18px 35px;
    border: 2px solid #0073e6; /* Couleur de la bordure et du texte initial (bleu vif) */
    border-radius: 50px; /* Boutons très arrondis */
    color: #0073e6; /* Couleur du texte initial */
    background-color: #ffffff; /* Fond blanc initial */

    /* --- PRÉPARATION AUX ANIMATIONS --- */
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: color 0.4s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
}

/* L'effet de remplissage (pseudo-élément) */
.modern-button-v4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0073e6; /* Couleur du fond qui apparaît au survol (bleu) */
    transform: scaleX(0); /* Cache l'élément horizontalement */
    transform-origin: left; /* L'animation part de la gauche */
    transition: transform 0.4s ease-in-out;
    z-index: -1; /* Place le fond derrière le texte */
}

/* --- EFFETS AU SURVOL --- */
.modern-button-v4:hover {
    color: #ffffff; /* Le texte devient blanc au survol */
    transform: translateY(-5px); /* Légère élévation */
    box-shadow: 0 8px 20px rgba(0, 115, 230, 0.25); /* Ombre plus prononcée */
    text-decoration: none; /* S'assurer qu'il n'y a pas de soulignement */
}

/* Déclenche l'animation de remplissage */
.modern-button-v4:hover::before {
    transform: scaleX(1); /* Le fond s'affiche sur toute la largeur */
}

/* Animation de la flèche */
.modern-button-v4 .arrow-v4 {
    margin-left: 15px;
    transition: transform 0.3s ease-in-out;
    display: inline-block; /* Permet la transformation */
}

.modern-button-v4:hover .arrow-v4 {
    transform: translateX(6px); /* La flèche bouge vers la droite */
}

/* ---------------------------------------------------- */
/* --- Styles pour le carrousel (si tu le maintiens) --- */
/* ---------------------------------------------------- */
.alta-carousel {
    max-width: 100%;
    padding: 40px 0;
    background: #f8f9fa; /* Arrière-plan du carrousel */
    margin-top: 2em; /* Espace au-dessus du carrousel */
    margin-bottom: 2em; /* Espace en-dessous du carrousel */
}

.swiper {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 80%; /* Use a percentage for responsiveness */
    max-width: 800px; /* Keep a max-width for large screens */
    
    /* 16:9 Aspect Ratio */
    position: relative;
    height: 0;
    padding-bottom: 45%; /* (9 / 16 * 80%) because width is 80% */

    background: rgba(255, 255, 255, 0.15); /* Semi-transparent base */
    backdrop-filter: blur(10px) saturate(1.1); /* Frosted glass effect */
    border-radius: 12px; /* Slightly softer corners */
    box-shadow: 
        0 6px 20px rgba(0, 0, 50, 0.1), /* Deeper outer shadow */
        inset 0 1px 4px rgba(255, 255, 255, 0.2); /* Subtle inner highlight */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Faint, glowing edge */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.swiper-slide:hover {
    transform: scale(1.02); /* Slight lift on hover */
    box-shadow: 
        0 10px 30px rgba(0, 0, 50, 0.15),
        inset 0 1px 4px rgba(255, 255, 255, 0.25);
}

.swiper-slide img {
    /* Make image fill the container */
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px; /* Match the slide's radius */
}

.swiper-button-next,
.swiper-button-prev {
    color: #2b4c9b; /* Couleur des flèches de navigation */
    transition: color 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #4054b2; /* Couleur des flèches au survol */
}

.swiper-pagination-bullet-active {
    background: #2b4c9b; /* Couleur des points de pagination actifs */
}


/* ---------------------------------------------------- */
/* --- Responsive adjustments for all sections --- */
/* ---------------------------------------------------- */
@media (max-width: 1024px) {
    /* Ajustements pour les tablettes et petits écrans de bureau */
    .site-content .entry-content {
        max-width: 760px;
    }
    .site-content .entry-title {
        font-size: 2.5em;
    }
    .site-content .entry-content h2.wp-block-heading {
        font-size: 1.8em;
    }
    .site-content .entry-content div[style*="canva.com"] {
        max-width: 90%; /* Réduit un peu sur les tablettes pour ne pas être trop large */
        height: 500px; /* Ajuste la hauteur pour les tablettes */
    }
}

@media (max-width: 767px) {
    /* Ajustements pour les mobiles */
    .site-content .entry-content {
        margin: 20px auto 40px auto;
        padding: 0 10px;
    }
    .site-content .entry-content p,
    .site-content .entry-content li {
        font-size: 1em;
        line-height: 1.6;
    }
    .site-content .entry-title {
        font-size: 2em;
        margin-bottom: 0.8em;
    }
    .site-content .entry-content h2.wp-block-heading {
        font-size: 1.6em;
        margin-top: 2em;
        margin-bottom: 1em;
    }
    .site-content .entry-content h5.wp-block-heading {
        font-size: 1em;
    }

    /* Boutons en mode mobile */
    .formation-buttons-container-v4 {
        flex-direction: column;
        align-items: center;
        padding: 30px 10px;
        gap: 15px; /* Réduit l'espace entre les boutons */
    }
    .modern-button-v4 {
        width: 90%; /* Les boutons prennent presque toute la largeur */
        min-width: unset;
        font-size: 1.05em;
        padding: 15px 25px;
    }

    /* Canva sur mobile */
    .site-content .entry-content div[style*="canva.com"] {
        height: 350px; /* Hauteur plus adaptée aux mobiles */
        margin-top: 1.5em;
        margin-bottom: 2em;
    }

    /* Images en bas de page */
    .site-wrapper > img {
        margin: 20px auto 10px auto;
        max-width: 95%;
    }

    /* Carousel sur mobile */
    .swiper-slide {
        width: 90%; /* Les slides prennent plus de place sur mobile */
        padding-bottom: 50.625%; /* 9 / 16 * 90% */
    }
    .swiper-button-next,
    .swiper-button-prev {
        /* On peut réduire la taille des flèches ou les cacher si elles gênent */
        transform: scale(0.8);
    }
}

h2{
	margin-top:0px;
}
/* Suppression des styles dupliqués et inutiles */
body.custom-background { 
    background-color: #ffffff; 
    background-image: url("../images/curved_lines_3.png"); 
    background-position: left top; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
}

/* Styles pour rendre l'iframe Genially responsive */
.genially-responsive-container {
    position: relative;
    width: 100%;
    /* Ajuste cette valeur pour changer le ratio hauteur/largeur */
    /* Pour un ratio 16:9 (vidéo standard): 56.25% */
    /* Pour le ratio de votre Genially (610x343.125): (343.125 / 610) * 100% = 56.25% */
    padding-bottom: 56.25%; /* Ratio hauteur/largeur pour le contenu */
    height: 0;
    overflow: hidden;
    margin: 2.5em auto 3em auto; /* Centre le conteneur et ajoute de l'espace vertical */
    max-width: 1100px; /* Limite la largeur sur les très grands écrans */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background-color: #f7f9fb; /* Ajoute un fond léger si l'iframe a des bords transparents */
}

.genially-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Supprime toute bordure par défaut de l'iframe */
}

/* Ajustements responsives */
@media (max-width: 1024px) {
    .genially-responsive-container {
        max-width: 90%; /* Réduit la largeur sur les tablettes */
        margin-left: auto; /* Re-centre si max-width est appliqué */
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .genially-responsive-container {
        padding-bottom: 75%; /* Un ratio 4:3 peut être préférable sur mobile pour le contenu non-vidéo */
        height: auto;
        margin: 1.5em auto 2em auto; /* Ajuste l'espacement sur mobile */
    }
}

img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

/* --- Styles for Referentiel Page --- */
.referentiel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 25px;
    margin-top: 40px;
    text-align: center;
}

.referentiel-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.referentiel-item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-bottom-style: none; /* remove underline on hover */
}

.referentiel-item .pdf-icon {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
}

/* --- Styles for Rouen Page --- */
.rouen-content {
    max-width: 900px;
    margin: 0 auto;
}

.rouen-intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 2.5em;
}

.rouen-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.rouen-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: #2c3e50;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #4054b2;
}

.rouen-conclusion {
    margin-top: 2.5em;
    padding: 1.5em;
    background-color: #f9f9f9;
    border-left: 4px solid #4054b2;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .rouen-intro {
        grid-template-columns: 1fr;
    }

    .rouen-image {
        order: -1; /* Move image to the top on mobile */
        margin-bottom: 1.5em;
    }
}

/* --- Styles for A Propos Page --- */
.apropos-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.apropos-section {
    margin-bottom: 40px;
}

.apropos-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.apropos-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.apropos-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: #4054b2; /* Primary blue color */
    margin-top: 0;
    margin-bottom: 1em;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5em;
}

.apropos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.apropos-card ul {
    list-style-type: none;
    padding-left: 0;
}

.apropos-card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.apropos-card ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 2px;
    color: #4054b2;
    font-weight: bold;
}

.publications-list p, .projects-list p {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.publications-list p:last-child, .projects-list p:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Responsive adjustments for A Propos */
@media (max-width: 767px) {
    .apropos-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Styles for Formation d'Enseignant Page --- */
.formation-enseignant-content {
    max-width: 900px;
    margin: 0 auto;
}

.formation-enseignant-content .intro-paragraph {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 2.5em;
    text-align: left;
}

.formation-enseignant-content .image-container {
    margin: 30px 0;
}

.formation-enseignant-content .image-container img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- Styles for References Bibliographiques Page --- */
.page-references .entry-content {
    max-width: 900px;
}

/* Style for the section titles */
.page-references .entry-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    color: #2c3e50;
    margin-top: 2.5em;
    margin-bottom: 1.5em;
    padding-bottom: 0.4em;
    border-bottom: 3px solid #4054b2;
    text-align: left;
}

/* Adjust the first title's spacing */
.page-references .entry-content h2:first-of-type {
    margin-top: 1.5em;
}

/* Style for each reference entry */
.page-references .entry-content p {
    font-size: 1em;
    line-height: 1.6;
    padding-left: 20px;
    margin-left: 5px; /* Indent the whole block slightly */
    border-left: 3px solid #e9e9e9;
    margin-bottom: 1.2em;
    transition: all 0.2s ease-in-out;
}

.page-references .entry-content p:hover {
    background-color: #f5f8ff;
    border-left-color: #4054b2;
    transform: translateX(5px);
}

/* Handle long links to prevent overflow */
.page-references .entry-content a {
    overflow-wrap: break-word;
    word-wrap: break-word; /* Fallback for older browsers */
    word-break: break-word;
}

/* Remove styling for empty paragraphs if any */
.page-references .entry-content p:empty {
    display: none;
}

/* --- Styles for Protocole d'Évaluation Page (Creative Version) --- */

/* Overall page styling */
.page-evaluation .entry-content {
    max-width: 950px;
    background-color: #f8f9fa; /* Light background for the content area */
    padding: 20px 0;
    border-radius: 15px;
}

/* Card style for each section */
.page-evaluation .evaluation-section {
    background-color: #ffffff;
    margin: 25px auto;
    padding: 25px 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-evaluation .evaluation-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

/* Main section titles (H2) */
.page-evaluation .entry-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.1em;
    color: #ffffff;
    background: linear-gradient(45deg, #4054b2, #0073e6);
    padding: 15px 25px;
    margin: -25px -35px 25px -35px; /* Extend to the card edges */
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    text-align: left;
}

/* Sub-section titles (H3) */
.page-evaluation .entry-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6em;
    color: #4054b2;
    margin-top: 2em;
    margin-bottom: 1em;
    display: flex;
    align-items: center;
}

.page-evaluation .entry-content h3::before {
    content: '›';
    margin-right: 10px;
    font-size: 1.5em;
    color: #ff6900;
}

/* Fix for the overflowing image */
.page-evaluation .evaluation-section .wp-block-image {
    margin: 2.5em 0;
}
.page-evaluation .evaluation-section .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

/* Cleaned and structured list styles */
.page-evaluation .entry-content ul {
    list-style: none;
    padding-left: 20px;
    border-left: 3px solid #e9ecef;
}

.page-evaluation .entry-content ul li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.8em;
    font-size: 1.05em;
}

.page-evaluation .entry-content ul li::before {
    display: none; /* Remove the custom icon */
}

/* Nested lists */
.page-evaluation .entry-content ul ul {
    margin-left: 0;
    margin-top: 10px;
    padding-left: 20px;
    border-left: 3px solid #ffebd1;
}

/* Static content section (replaces accordion) */
.page-evaluation .static-content {
    margin-top: 2em;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.page-evaluation .static-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    color: #333;
    padding-bottom: 0.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
    border-bottom: 2px solid #e0e0e0;
}

.page-evaluation .static-content h4:first-child {
    margin-top: 0;
}


/* --- Styles for News & Events Page (page-nouvelles) --- */
.page-nouvelles .entry-content {
    max-width: 1200px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.news-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.news-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the content to fill the card */
}

.news-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3em;
    color: #2c3e50;
    margin: 0 0 15px 0;
}

.news-card-excerpt {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.6;
    color: #555;
    flex-grow: 1; /* Pushes the date to the bottom */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


/* --- Styles for Teams Page (page-equipes) --- */
.page-equipes .entry-content {
    max-width: 1400px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.team-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.team-card-header {
    height: 120px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 15px;
    position: relative;
}

.team-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
}

.team-card-header h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 1.4em;
    margin: 0;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.team-card-body {
    padding: 25px;
    position: relative; /* Needed for the indicator */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.team-card-body::after {
    content: '...';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    color: #4054b2;
    background: #ffffff;
    padding: 0 10px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents the indicator from blocking mouse events */
}

.team-card:hover .team-card-body::after {
    opacity: 0;
}

.team-card-body p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    color: #2c3e50;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.team-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px; /* Initial height limit */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.team-card:hover .team-card-body ul {
    max-height: 1000px; /* A large value to reveal all content */
}

.team-card-body ul li {
    font-family: 'Open Sans', sans-serif;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.team-card-body ul li:last-child {
    border-bottom: none;
}

.team-card-body ul li a {
    text-decoration: none;
    color: #4054b2;
    font-weight: 600;
}

.team-card-body ul li a:hover {
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 400px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Styles for Country Page (page-pays) --- */
.page-pays .site-content {
    padding-top: 0;
}

.country-header {
    height: 60vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.country-header-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 2em;
    border-radius: 10px;
}

.country-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4em;
    margin: 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.country-header h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    margin: 0;
    font-weight: 400;
}

.page-pays .entry-content {
    max-width: 1100px;
}

.country-section {
    padding: 3em 0;
    border-bottom: 1px solid #f0f0f0;
}

.country-section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: center;
}

.country-section-content.image-first .country-section-image {
    order: -1;
}

.country-section-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    color: #4054b2;
    margin-bottom: 1em;
}

.country-section-text p {
    font-size: 1.1em;
    line-height: 1.8;
}

.country-section-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.country-section-alt {
    background-color: #f8f9fa;
    padding: 3em 2em;
    text-align: center;
    margin-top: 2em;
    border-radius: 12px;
}

.country-section-alt h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    color: #2c3e50;
    margin-bottom: 1.5em;
}

.master-programs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.program-card {
    background-color: #ffffff;
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.program-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: #ff6900;
    margin-bottom: 0.8em;
}

.country-section-text-full {
    padding: 0 1em;
}

.country-section-text-full h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    color: #4054b2;
    margin-bottom: 1em;
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em;
    margin-top: 2em;
    text-align: left;
}

.policy-card {
    background-color: #ffffff;
    padding: 1.5em;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid #4054b2;
}

.policy-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    color: #2c3e50;
    margin-bottom: 0.8em;
}

/* --- Styles for Amiens Page (page-amiens) --- */
.page-amiens .content-card {
    background-color: #ffffff;
    padding: 2em 2.5em;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    margin-bottom: 2.5em;
}

.page-amiens .content-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    color: #4054b2;
    margin-bottom: 1em;
    border-bottom: 3px solid #f0f0f0;
    padding-bottom: 0.5em;
}

.page-amiens .partner-section {
    margin-bottom: 1.5em;
}

.page-amiens .partner-section h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em;
    color: #ff6900;
}

.page-amiens .image-right {
    float: right;
    margin: 0 0 1em 2em;
    max-width: 300px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.page-amiens .full-width-image {
    margin: 1em 0 2.5em 0;
    text-align: center;
}

.page-amiens .full-width-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.page-amiens .full-width-image figcaption {
    text-align: center;
    font-style: italic;
    color: #555;
    margin-top: 0.5em;
    font-size: 0.9em;
}

/* Responsive adjustments for Amiens page */
@media (max-width: 767px) {
    .page-amiens .image-right {
        float: none;
        max-width: 100%;
        margin: 1em auto;
        display: block;
    }
}

/* --- Styles for Lille Page (page-lille) --- */
.page-lille .logo-image {
    max-width: 320px;
    height: auto;
    margin: 0.5em auto 1.5em 0;
    display: block;
    float: left;
    margin-right: 1.5em;
    margin-bottom: 0.5em;
}
.page-lille .logo-image.small {
    max-width: 150px;
}
.page-lille .content-card p > strong {
    font-weight: 600;
    color: #333;
    display: block;
    margin-top: 1em;
}

/* --- Styles for Canopé Page (page-canope) --- */
.page-canope .site-content {
    padding-top: 0;
}
.hero-gradient-container {
    padding: 7em 2em;
    text-align: center;
    background: linear-gradient(-45deg, #4054b2, #7e57c2, #2c3e50, #4f6a96);
    background-size: 400% 400%;
    animation: gradientBG 18s ease infinite;
    position: relative;
}
.hero-gradient-container h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5em;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 767px) {
    .hero-gradient-container {
        padding: 5em 1em;
    }
    .hero-gradient-container h1 {
        font-size: 2.5em;
    }
}

/* --- Styles for Asprill Page (page-asprill) --- */
.page-asprill .entry-title {
    text-align: center;
    font-size: 3em;
    margin-bottom: 1.5em;
    color: #2c3e50;
}
.asprill-section {
    padding: 2.5em;
    margin-bottom: 2em;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e9ecef;
}
.asprill-section h2 {
    font-family: 'Montserrat', sans-serif;
    color: #4054b2;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #e9ecef;
}
.asprill-intro .logo-image {
    float: left;
    max-width: 120px;
    margin: 0 2em 1em 0;
}
.axes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin: 1.5em 0;
}
.axe-card {
    background-color: #f8f9fa;
    padding: 1.5em;
    border-radius: 6px;
    border-left: 4px solid #4054b2;
}
.axe-card h3 {
    margin-top: 0;
    color: #2c3e50;
}
.asprill-axes .conclusion-text {
    text-align: center;
    font-style: italic;
    color: #555;
    margin-top: 2em;
}
.principes-list {
    list-style: none;
    padding-left: 0;
}
.principes-list li {
    padding: 0.8em 0 0.8em 2em;
    position: relative;
    border-bottom: 1px solid #f1f3f5;
}
.principes-list li:last-child {
    border-bottom: none;
}
.principes-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.8em;
    color: #4054b2;
    font-weight: bold;
}
@media (max-width: 767px) {
    .asprill-intro .logo-image {
        float: none;
        display: block;
        margin: 0 auto 2em;
    }
    .axes-container {
        grid-template-columns: 1fr;
    }
}

/* --- Styles for Index Page Hero Slideshow (Custom) --- */
.hero-slideshow {
    height: 70vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.slides-container {
    width: 100%;
    height: 100%;
    position: relative;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-color: #2c3e50; /* Fallback color */
}
.slide.active {
    opacity: 1;
}
.slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slide-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    opacity: 0.6;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}
.dot.active {
    background-color: #4054b2;
    opacity: 1;
}
.hero-overlay {
    background-color: rgba(44, 62, 80, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.hero-text {
    text-align: center;
    color: #ffffff;
    max-width: 800px;
    padding: 2em;
}
.hero-text h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
.hero-text p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 1.5em;
}
.hero-button {
    background-color: #4054b2;
    color: #ffffff;
    padding: 0.8em 1.8em;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 2px solid transparent;
}
.hero-button:hover {
    background-color: #ffffff;
    color: #4054b2;
    border-color: #4054b2;
    transform: translateY(-3px);
}

@media (max-width: 767px) {
    .hero-slideshow {
        height: 80vh;
    }
    .hero-text h1 {
        font-size: 2.2em;
    }
    .hero-text p {
        font-size: 1em;
    }
}

/* --- Menu ALTA Title --- */
.site-branding {
    display: flex;
    align-items: center;
    gap: 15px; /* Replaces margin-left for better alignment */
}
.site-branding .custom-logo-link {
    flex-shrink: 0; /* Prevents the logo from shrinking */
}
.site-branding .custom-logo {
    max-width: 50px; /* Set max width as requested */
    height: auto; /* Maintain aspect ratio */
}
.site-title-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em; /* Adjusted font size for longer text */
    font-weight: 700;
    color: #3d3d3d; /* Fallback color */
    margin-left: 0; /* Remove margin as gap is used */
    background: linear-gradient(90deg, #ffffff 40%, #ffd700 50%, #ffffff 60%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 10s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    50% {
        background-position: 100% 0;
    }
    75% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* --- Language Switcher (Custom) --- */
.language-switcher {
    position: relative;
    z-index: 100;
}
.lang-switcher-button {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.lang-switcher-button:hover {
    background: #e0e0e0;
}
.current-lang-emoji {
    font-size: 1.2em;
}
.arrow-down {
    font-size: 0.7em;
    color: #555;
}
.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 160px;
    overflow: hidden;
}
.lang-dropdown.show {
    display: block;
}
.lang-option {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
}
.lang-option:hover {
    background-color: #f0f0f0;
}