/* =====================================================
   VARIABLES CSS (THEME SWITCHER)
===================================================== */
:root { /* Racine du document : permet de définir des variables globales */
    
    /* Couleurs principales */
    --color-bg: #f5f5f5;           /* Couleur de fond générale de la page */
    --color-text: #333;            /* Couleur du texte principal */
    --color-primary: #0d6efd;      /* Couleur principale (boutons, liens) */
    --color-secondary: #198754;    /* Couleur secondaire (boutons alternatifs) */
    --color-accent: #fd7e14;       /* Couleur d’accent (ex : orange) */
    --color-header-bg: #F5F5DC;    /* Couleur de fond du header */
    --color-footer-bg: #000;       /* Couleur de fond du footer */
    --color-footer-text: #fff;     /* Couleur du texte du footer */
    --color-footer-title: #f44336; /* Couleur des titres h3 du footer */
    
    /* Tailles textes */
    --font-size-base: 14px;        /* Taille de texte par défaut */
    --font-size-title: 2rem;       /* Taille des titres principaux */
    --font-size-subtitle: 1.2rem;  /* Taille des sous-titres */
    --font-size-button: 14px;      /* Taille du texte des boutons */

    /* Largeur conteneurs */
    --container-max-width: 1200px; /* Largeur maximale du contenu */
    --program-card-min-width: 280px; /* Largeur minimale des cards programmes */
}

/* =====================================================
   RESET & BASE
===================================================== */
* { /* Sélecteur universel */
    box-sizing: border-box; /* Inclut padding et border dans la taille */
    margin: 0;              /* Supprime les marges par défaut */
    padding: 0;             /* Supprime les paddings par défaut */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police globale */
}

body { /* Corps de la page */
    background:#7FFFD4; /* Applique la couleur de fond */
    color:  #000000;    /* Applique la couleur du texte */
    line-height: 1.6;            /* Hauteur de ligne pour lisibilité */
    transition: background 0.3s, color 0.3s; /* Animation lors du changement de thème */
}

a { /* Liens */
    text-decoration: none; /* Supprime le soulignement */
    color: inherit;        /* Hérite la couleur du parent */
}

h1,h2,h3,h4,h5,h6 { /* Tous les titres */
    margin-bottom: 0.5rem; /* Marge basse sous les titres */
}

/*/* =====================================================
   TOP BAR
===================================================== */

/* Barre supérieure principale */
.top-bar {
    background-color: #FFE4C4;   /* Couleur de fond (beige) */
    color: #000000;              /* Couleur du texte */
    height: 90px;                /* Hauteur totale de la top bar */
    padding: 0px 20px ; /* Espacement Espace partout (haut, droite, bas, gauche) */
    display: flex;               /* Active Flexbox */
    align-items: center;         /* Centre verticalement le contenu */
    font-size: 0.9rem;           /* Taille du texte */
}

/* Conteneur interne */
.top-bar-container {
    width: 100%;                 /* Prend toute la largeur */
    max-width: 1200px;           /* Largeur max (optionnel) */
    margin: 0 auto;              /* Centre horizontalement */
    display: flex;               /* Mise en page flexible */
    justify-content: space-between; /* Logo à gauche / contenu à droite */
    align-items: center;         /* Alignement vertical */
    flex-wrap: wrap;             /* Passe à la ligne si nécessaire */
}

/* Zone du logo */
.top-bar-logo {
    display: flex;
    align-items: center;
}

/* Logo */
.top-bar-logo img {
    max-height: 120px;            /* Hauteur du logo */
    width: auto;                 /* Conserve les proportions */
    max-width: 220px;            /* Largeur max */
    object-fit: contain;         /* Évite la déformation */
}

/* Zone texte / infos (si utilisée) */
.top-bar-info {
    display: flex;
    align-items: center;
    gap: 15px;                   /* Espace entre les éléments */
}

/* Liens dans la top bar */
.top-bar a {
    color: #000000;              /* Couleur des liens */
    text-decoration: none;       /* Supprime le soulignement */
    font-weight: 500;
}

.top-bar a:hover {
    color: #1a73e8;              /* Couleur au survol */
}

/* =====================================================
   RESPONSIVE (MOBILE)
===================================================== */
@media (max-width: 768px) {

    .top-bar {
        height: auto;            /* Hauteur automatique */
        padding: 10px 15px;
    }

    .top-bar-container {
        flex-direction: column;  /* Empile les éléments */
        text-align: center;
        gap: 10px;
    }

    .top-bar-logo img {
        max-height: 55px;        /* Logo plus petit sur mobile */
        max-width: 180px;
    }
}

/* =====================================================
   HEADER & NAVBAR
===================================================== */
.site-header { /* En-tête principal */
    background: #000000; /* Fond du header */
    border-bottom: 1px solid #ddd;       /* Ligne de séparation */
    display: flex;                       /* Mise en page flex */
    justify-content: space-between;      /* Logo à gauche, menu à droite */
    align-items: center;                 /* Alignement vertical */
    padding: 10px 15px;                  /* Espacement intérieur */
    position: sticky;                    /* Header collant */
    top: 0;                              /* Collé en haut */
    z-index: 1000;                       /* Priorité d’affichage */
}

.site-header .logo img { 
    height: 50px; /* Taille du logo */
}

.main-navbar { 
    display: flex;        /* Menu horizontal */
    align-items: center;  /* Alignement vertical */
}

.nav-list { 
    display: flex;        /* Liste en ligne */
    gap: 20px;            /* Espacement entre liens */
    list-style: none;     /* Supprime les puces */
}

.nav-list li a { 
    padding: 8px 12px;            /* Zone cliquable */
    border-radius: 5px;           /* Coins arrondis */
    transition: background 0.3s, color 0.3s; /* Animation hover */
    color: #fff;                  /* Couleur du texte */
    font-size: 16px;              /* Taille du texte */
    font-weight: 500;             /* Épaisseur */
    text-transform: uppercase;    /* Texte en majuscules */
}

.nav-list li a:hover { 
    background: var(--color-primary); /* Fond au survol */
    color: #fff;                      /* Texte blanc */
}

/* =====================================================
   CONTAINER & TITRES
===================================================== */
.container { 
    max-width: var(--container-max-width); /* Largeur max */
    margin: 20px auto;                     /* Centrage horizontal */
    padding: 0 15px;                      /* Padding latéral */
}

.page-title { 
    text-align: center;                  /* Titre centré */
    margin-bottom: 25px;                 /* Espace sous le titre */
    font-size: var(--font-size-title);   /* Taille du titre */
    font-weight: 700;                    /* Texte en gras */
}
/* =====================================================
   FORMULAIRE
===================================================== */
form.ui.form { /* Style général du formulaire */
    background: #fff;                 /* Fond blanc */
    padding: 20px;                    /* Espacement intérieur */
    border-radius: 10px;              /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Ombre légère */
    margin-bottom: 30px;              /* Espace sous le formulaire */
}

form.ui.form input,
form.ui.form select { /* Champs input et select */
    width: 100%;            /* Largeur totale */
    padding: 10px 12px;     /* Espacement interne */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px;     /* Coins arrondis */
}

/* =====================================================
   FILTRES DIPLÔME / LANGUE
===================================================== */
.filter-row { /* Ligne de filtres */
    display: flex;          /* Alignement horizontal */
    align-items: center;    /* Centrage vertical */
    gap: 15px;              /* Espacement entre éléments */
    flex-wrap: wrap;        /* Passage à la ligne */
}

.filter-row strong { /* Libellé des filtres */
    min-width: 90px;        /* Largeur minimale */
    white-space: nowrap;    /* Empêche le retour à la ligne */
}

.filter-row label { /* Label radio */
    display: inline-flex;       /* Alignement inline */
    align-items: center;        /* Centrage vertical */
    flex-direction: row-reverse;/* Texte avant bouton */
    gap: 6px;                   /* Espacement texte/bouton */
    white-space: nowrap;        /* Pas de retour à la ligne */
    cursor: pointer;            /* Curseur cliquable */
}

.filter-row input[type="radio"] { /* Boutons radio */
    margin: 0;                          /* Supprime marges */
    width: 18px;                        /* Largeur */
    height: 18px;                       /* Hauteur */
    accent-color: var(--color-primary); /* Couleur du radio */
}

/* =====================================================
   VILLE / ÉCOLE / MOT-CLÉ
===================================================== */
.filter-grid { /* Grille des champs */
    display: grid;                        /* Mise en grille */
    grid-template-columns: repeat(3,1fr);/* 3 colonnes égales */
    gap: 10px;                            /* Espacement */
}

/* =====================================================
   BOUTONS FORMULAIRE
===================================================== */
.buttons-row { /* Ligne de boutons */
    display: flex;       /* Alignement horizontal */
    gap: 10px;           /* Espacement */
    flex-wrap: wrap;     /* Retour à la ligne */
}

.ui.button { /* Boutons génériques */
    padding: 10px 20px;                 /* Espacement interne */
    border-radius: 5px;                 /* Coins arrondis */
    border: none;                       /* Pas de bordure */
    cursor: pointer;                    /* Curseur clic */
    font-weight: 600;                   /* Texte semi-gras */
    font-size: var(--font-size-button); /* Taille du texte */
    transition: background 0.3s, transform 0.2s; /* Animation */
}

.ui.button:hover { 
    transform: translateY(-2px); /* Effet de surélévation */
}

.ui.button.blue { 
    background: var(--color-primary); /* Bouton bleu */
    color: #fff;                      /* Texte blanc */
}

.ui.button.green { 
    background: var(--color-secondary); /* Bouton vert */
    color: #fff;                        /* Texte blanc */
}

.ui.button.orange { 
    background: var(--color-accent); /* Bouton orange */
    color: #fff;                     /* Texte blanc */
}

/* =====================================================
   PROGRAMMES / CARDS
===================================================== */
.programs-grid { /* Grille des programmes */
    display: grid; /* Mise en grille */
    grid-template-columns: repeat(auto-fit, minmax(var(--program-card-min-width), 1fr)); /* Colonnes adaptatives */
    gap: 20px; /* Espacement */
}

.program-card { /* Carte programme */
    background: #fff;             /* Fond blanc */
    border-radius: 10px;           /* Coins arrondis */
    border: 1px solid #ddd;        /* Bordure grise */
    padding: 15px;                 /* Espacement interne */
    transition: transform 0.3s, box-shadow 0.3s; /* Animation */
}

.program-card:hover { /* Effet au survol */
    transform: translateY(-5px); /* Carte qui monte */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* Ombre accentuée */
}

.program-card img { /* Image du programme */
    width: 100%;          /* Largeur complète */
    max-height: 120px;    /* Hauteur maximale */
    object-fit: contain;  /* Image sans déformation */
    margin-bottom: 10px;  /* Espace sous l’image */
}

.program-card h3 { /* Titre programme */
    font-size: var(--font-size-subtitle); /* Taille du sous-titre */
    margin-bottom: 10px;                  /* Marge basse */
}

.program-card p { /* Texte descriptif */
    font-size: var(--font-size-base); /* Taille du texte */
    margin-bottom: 6px;               /* Espacement */
}

/* =====================================================
   PAGINATION
===================================================== */
.pagination { /* Conteneur pagination */
    display: flex;            /* Alignement horizontal */
    justify-content: center;  /* Centrage */
    gap: 8px;                 /* Espacement */
    margin-top: 20px;         /* Espace au-dessus */
}

.pagination a { /* Lien pagination */
    display: inline-block;           /* Bloc cliquable */
    padding: 8px 12px;               /* Espacement */
    background: #eee;                /* Fond gris */
    border-radius: 5px;              /* Coins arrondis */
    color: var(--color-text);        /* Couleur texte */
    font-size: var(--font-size-base);/* Taille texte */
    transition: background 0.3s;     /* Animation */
}

.pagination a:hover,
.pagination a.active { /* Hover et page active */
    background: var(--color-primary); /* Fond bleu */
    color: #fff;                      /* Texte blanc */
}

/* =====================================================
   FOOTER
===================================================== */
.site-footer { /* Footer principal */
    background: var(--color-footer-bg); /* Fond footer */
    color: var(--color-footer-text);    /* Texte footer */
    padding: 40px 20px 60px;            /* Padding (bas plus grand) */
    position: relative;                 /* Référence pour footer-bottom */
}

.footer-container { /* Conteneur footer */
    display: flex;               /* Alignement horizontal */
    justify-content: space-between; /* Espacement colonnes */
    gap: 30px;                   /* Espacement */
    max-width: var(--container-max-width); /* Largeur max */
    margin: auto;                /* Centrage */
    flex-wrap: wrap;             /* Passage à la ligne */
}

.footer-col { /* Colonne footer */
    flex: 1;              /* Largeur flexible */
    min-width: 250px;     /* Largeur minimale */
}

.footer-col h3 { /* Titre colonne */
    margin-bottom: 15px;                 /* Espacement */
    font-size: 18px;                     /* Taille */
    color: var(--color-footer-title);    /* Couleur */
}

.footer-col p,
.footer-col a { /* Texte et liens footer */
    font-size: 14px;               /* Taille texte */
    line-height: 1.6;              /* Hauteur de ligne */
    color: var(--color-footer-text); /* Couleur texte */
    text-decoration: none;         /* Pas de soulignement */
}

/* TEXTE CENTRÉ EN BAS DU FOOTER */
.footer-bottom { /* Texte bas du footer */
    text-align: center;      /* Centrage horizontal */
    width: 100%;             /* Pleine largeur */
    position: absolute;      /* Position absolue */
    bottom: 10px;            /* Distance du bas */
    left: 0;                 /* Aligné à gauche */
    font-size: 14px;         /* Taille texte */
    color: var(--color-footer-text); /* Couleur texte */
}

/* =====================================================
   ACCESSIBILITÉ
===================================================== */
a:focus,
button:focus,
input:focus { /* Éléments focus clavier */
    outline: 2px dashed var(--color-primary); /* Contour visible */
    outline-offset: 4px;                      /* Distance du contour */
}

/* =====================================================
   MENU MOBILE
===================================================== */
.menu-toggle { /* Bouton hamburger */
    display: none;     /* Caché sur desktop */
    width: 30px;       /* Largeur */
    height: 22px;      /* Hauteur */
    background: #FFE4C4;  /* Fond Bisque */
    border: none;      /* Pas de bordure */
    cursor: pointer;   /* Curseur clic */
}

.menu-toggle span { /* Barres du hamburger */
    display: block;      /* Élément bloc */
    height: 3px;         /* Épaisseur */
    background: #fff;    /* Couleur blanche */
    margin: 4px 0;       /* Espacement */
    border-radius: 2px;  /* Coins arrondis */
}

/* =====================================================
   RESPONSIVE MOBILE
===================================================== */
@media (max-width: 768px) { /* Écrans mobiles */

    .menu-toggle { 
        display: block; /* Affiche le bouton hamburger */
    }

    .main-navbar { 
        position: fixed;        /* Menu fixe */
        top: 0;                 /* En haut */
        left: -250px;           /* Caché hors écran */
        width: 250px;           /* Largeur menu */
        height: 100%;           /* Pleine hauteur */
        background: #DEB887;       /* Fond BurlyWood*/
        transition: left 0.3s ease; /* Animation ouverture */
    }

    .main-navbar.active { 
        left: 0; /* Menu visible */
    }

    .nav-list { 
        flex-direction: column; /* Menu vertical */
        padding: 20px;          /* Espacement */
    }

    .filter-grid { 
        grid-template-columns: 1fr; /* Une colonne */
    }

    .footer-container { 
        flex-direction: column; /* Colonnes empilées */
        text-align: center;     /* Texte centré */
    }

    .footer-bottom { 
        position: relative; /* Position normale */
        bottom: auto;       /* Annule position bas */
        margin-top: 20px;   /* Espace au-dessus */
    }
}

/* =====================================================
   TRANSITION DYNAMIQUE POUR CHANGEMENT DE THEME
===================================================== */
body { /* Transition globale */
    transition: background 0.3s, color 0.3s, font-size 0.3s; /* Animation fluide */
}

.ui.button { /* Transition boutons */
    transition: background 0.3s, transform 0.2s, color 0.3s;
}

.program-card { /* Transition cartes */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}

.site-footer,
.footer-bottom { /* Transition footer */
    transition: background 0.3s, color 0.3s;
}