/* =======================================
   VARIABLES DE COULEUR PERSONNALISÉES
   (Facile à ajuster)
   ======================================= */
:root {
    /* Couleurs du Logo (Violet/Lavande et Gris/Turquoise) */
    --color-logo-primary: #574CAE;   /* Violet foncé (Titres, accents) */
    --color-logo-secondary: #DDEAED; /* Bleu-Gris très pâle (Fonds légers) */

    /* Couleurs Thème : Pastel, Water, Ambre */
    --color-pastel-water: #BFE3E8;   /* Bleu ciel/Eau très doux */
    --color-pastel-amber: #FBEFBC;   /* Jaune Ambre très clair */
    --color-pastel-accent: #E5C3E5;  /* Rose-Lavande doux (Accentué) */

    /* Couleurs de base */
    --color-text-main: #2E2A4D;   /* Texte principal */
    --color-text-light: #555555;  /* Texte secondaire */
    --color-white: #FFFFFF;

    /* Niveaux d'Opacité */
    --opacity-light: 0.1;
    --opacity-medium: 0.4;
    --opacity-strong: 0.8;
}

/* =======================================
   STYLES BARRE SUPÉRIEURE (Top Bar)
   Cible : .theme-header-topbar
   ======================================= */

.theme-header-topbar {
    /* Fond Water Pastel semi-transparent */
    background-color: rgba(191, 227, 232, var(--opacity-medium));
    border-bottom: 1px solid rgba(87, 76, 174, var(--opacity-light)); /* Ligne subtile */
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Liens du Portail (Connectez-vous, Inscrivez-vous, etc.) */
.theme-header-topbar a {
    color: var(--color-logo-primary); /* Texte en violet du logo */
    font-size: 14px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* Effet au survol des liens du Portail (Ambre Pastel) */
.theme-header-topbar a:hover {
    background-color: var(--color-pastel-amber);
    color: var(--color-text-main);
    text-decoration: none;
}


/* =======================================
   MENU PRINCIPAL (Navigation)
   Cible : .theme-menu
   ======================================= */

/* Conteneur de l'en-tête principal (Logo et Menu) */
.theme-header {
    /* NOUVEAU FOND : Ambre Pastel très léger et semi-transparent */
    background-color: rgba(251, 239, 188, 0.5) !important; 
    box-shadow: 0 2px 4px rgba(46, 42, 77, var(--opacity-light));
}

/* Liens du Menu Principal (Accueil, L'école, etc.) */
[data-zp-theme-menu] > ul > li > a {
    color: var(--color-text-main) !important;
    padding: 10px 18px !important;
    border-radius: 6px;
    margin: 0 4px; /* Espace entre les éléments de menu */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Retirer l'opacité sur le texte pour la lisibilité */
    opacity: 1 !important; 
}

/* 1. Élément ACTIF (Menu sélectionné) */
[data-zp-menu-top] > li.theme-menu-selected > a,
[data-zp-menu-top] > li.theme-menu-selected > a:hover {
    /* Fond en couleur Accent (Rose-Lavande) pour l'élément actif */
    background-color: var(--color-pastel-accent) !important;
    color: var(--color-white) !important;
    font-weight: 600;
}

/* 2. Effet au SURVOL (Bleu Water) */
[data-zp-menu-top] > li:not(.theme-menu-selected) > a:hover {
    background-color: var(--color-pastel-water) !important;
    color: var(--color-logo-primary) !important; /* Texte Violet sur fond Water */
}

/* 3. Sous-Menus (Dropdowns) */
.theme-sub-menu {
    /* Fond presque blanc avec un léger Water pour l'opacité */
    background-color: rgba(255, 255, 255, 0.95); 
    border: 1px solid var(--color-pastel-water);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, var(--opacity-light));
}
.theme-sub-menu a {
    color: var(--color-text-main) !important;
    padding: 8px 15px !important;
}

/* Survol des éléments dans le sous-menu (Ambre subtil) */
.theme-sub-menu a:hover {
    background-color: var(--color-pastel-amber) !important;
    color: var(--color-text-main) !important;
}

/* =======================================
   STYLES GÉNÉRAUX ET DE FOND
   (Réutilisation des styles précédents)
   ======================================= */

/* Titres */
h1, h2, h3, h4, h5, h6, .site-title {
    color: var(--color-logo-primary);
    font-weight: 700;
}

/* Liens */
a {
    color: var(--color-logo-primary);
    transition: color 0.3s ease, opacity 0.3s ease;
}
a:hover {
    color: var(--color-pastel-accent);
    opacity: 0.8;
}

/* Cartes et Conteneurs légers */
.z-card, .z-element-container {
    background-color: var(--color-logo-secondary);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, var(--opacity-light));
}

/* Cibler le cadre conteneur du carrousel */
[data-element-id="elm_sH0uRgTvRJiawtFE7j8wbQ"].zpelem-box {
    /* Remplacer le background-color par un RGBA pour l'opacité */
    /* 255, 255, 255 = Blanc pur */
    /* 0.8 = 80% d'opacité (vous laissez passer 20% de l'image derrière) */
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Vous pouvez aussi utiliser une de vos couleurs pastel pour le fond */
/* Si vous préférez l'ambre pastel à 80% :
[data-element-id="elm_sH0uRgTvRJiawtFE7j8wbQ"].zpelem-box {
    background-color: rgba(251, 239, 188, 0.8) !important;
}
*/

/* =======================================
   BOUTONS PRIMAIRES & SECONDAIRES
   Rend les boutons plus conséquents et réactifs.
   ======================================= */

/* Style de base pour tous les boutons */
.zpbutton-wrapper a.zpbutton, 
.zpbutton-wrapper a.zpbutton-type-primary {
    /* Taille et Padding pour les rendre 'conséquents' */
    font-size: 16px;
    font-weight: 700;
    padding: 12px 28px;
    
    /* Coins arrondis (Oval) */
    border-radius: 30px; 
    
    /* Animation de transition */
    transition: all 0.3s ease;
    text-decoration: none; /* Assurez-vous qu'il n'y ait pas de soulignement */
    display: inline-block; /* Pour que le padding fonctionne bien */
}


/* 1. Bouton Primaire (Couleur Ambre pour le fond) */
.zpbutton-wrapper a.zpbutton-type-primary {
    background-color: var(--color-pastel-amber); /* Ambre Pastel */
    color: var(--color-logo-primary) !important; /* Texte Violet du logo */
    border: 2px solid var(--color-logo-primary); /* Bordure Violette */
    box-shadow: 0 4px 6px rgba(0, 0, 0, var(--opacity-light)); /* Ombre légère */
}

/* 2. Bouton Primaire au SURVOL (Couleur Accent/Lavande) */
.zpbutton-wrapper a.zpbutton-type-primary:hover {
    background-color: var(--color-pastel-accent); /* Rose-Lavande Doux (Accent) */
    color: var(--color-white) !important; /* Texte Blanc */
    border-color: var(--color-pastel-accent); /* Bordure assortie */
    box-shadow: 0 6px 10px rgba(0, 0, 0, var(--opacity-medium)); /* Ombre plus forte */
    transform: translateY(-2px); /* Léger soulèvement */
}


/* 3. Bouton Secondaire (Si vous en utilisez) */
.zpbutton-wrapper a.zpbutton-type-secondary {
    background-color: transparent;
    color: var(--color-logo-primary) !important;
    border: 2px solid var(--color-logo-primary);
}

/* 4. Bouton Secondaire au SURVOL */
.zpbutton-wrapper a.zpbutton-type-secondary:hover {
    background-color: var(--color-pastel-water); /* Fond Water Pastel */
    color: var(--color-text-main) !important;
    border-color: var(--color-pastel-water);
}