/* =========================================================
   🎨 directory.css — Styles globaux pour DetailSubject
   ========================================================= */

/* =========================================================
   🎨 VARIABLES GLOBALES (Design Tokens)
   ========================================================= */
:root {
    /* Couleurs principales */
    --color-primary: #278FE2;          /* Bleu principal utilisé pour titres/links */
    --color-primary-dark: #1e3d7b;     /* Bleu foncé au survol */
    --color-dark-blue: #092851;        /* Bleu foncé pour boutons non-actifs */
    --color-orange: #f28c00;           /* Orange accent / département */
    --color-accent: #f57c00;           /* autre orange (breadcrumbs) */
    --color-light-blue: #288FE2;

    /* Textes et fonds */
    --color-text-dark: #333;
    --color-text-medium: #444;
    --color-text-light: #999;
    --color-background-light: #e0e0e0;
    --color-background-off-white: #F8F6F2;
    --color-row-even: #ffffff;
    --color-row-odd: #eeeeee;
    --color-row-hover: #d7dff2;

    /* Espacement */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Rayons */
    --radius-sm: 5px;
    --radius-lg: 25px;

    /* Typographie */
    --font-family: 'Raleway', sans-serif;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 1.8rem;
}

/* =========================================================
   🧱 STRUCTURE GLOBALE
   ========================================================= */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding-top: 0 !important;
    font-family: var(--font-family);
    color: var(--color-text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.subjectlist-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: min(90%, 1600px);
    margin: var(--spacing-md) auto;
    padding: 0 var(--spacing-lg);
    box-sizing: border-box;
    background-color: #fff;
}

.content-align-logo {
    margin-top: var(--spacing-xl);
}

.subject-card {
    display: flex;
    flex-direction: row;
    /* ❌ Suppression de la "box" englobante */
    border: none;
    border-radius: 0;
    box-shadow: none;

    background-color: transparent; /* Retirer le fond de la carte */
    font-family: var(--font-family, Arial, sans-serif);

    /* 💥 AJOUT du GAP de 20px entre les colonnes */
    gap: 20px;
    padding: 0; /* Pas de padding externe si on ne veut pas de box */
}

/* Colonne gauche (Vignette & Encadrants) */
.subject-card-left {
    flex: 0 0 280px; /* Laissez une largeur fixe pour la vignette */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* S'assurer que les enfants s'alignent au début */
    /* Et surtout, forcer l'ajustement vertical au début */
    justify-content: flex-start;
    padding: 0;
    /* Ajoutez une petite bordure/fond pour délimiter visuellement */
    border: none;
    background-color: transparent;
}

/* S'assurer que le titre et l'image prennent 100% de la largeur du .subject-card-left pour éviter les trous */
.subject-card-left > * {
    width: 100%;
}

.subject-card-left img {
    width: 100%;
    height: auto;
    margin-bottom: 0;
}

.theme-item {
    margin-bottom: 5px;
    font-size: 14px;
    text-align: center;
}

.subject-title {
    background-color: #092851;
    color: white;
    font-weight: bold;
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
}
    /* Colonne centrale (Titre & Description) */
    .subject-card-center {
        flex: 1; /* Prend tout l'espace restant */
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        /* Ajoutez une petite bordure/fond pour délimiter visuellement */
        border: none;
        background-color: #ffffff;
        border-radius: var(--radius-sm);
    }

    .subject-card-center-description {
        background-color: #288FE2;
        color: white;
        font-weight: 600;
        padding: 5px;
        text-transform: uppercase;
    }

/* =========================================================
SIDEBAR DETAILLÉE (Colonne Gauche)
========================================================= */

/* 1. Conteneur principal des détails */
.details-box {
    /* Fond gris clair, en utilisant une de vos variables */
    background-color: var(--color-background-off-white);
    padding: var(--spacing-md); /* Marge intérieure autour du contenu */
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-lg); /* Pour décaler la boîte de l'image/thèmes */
    width: 100%; /* S'assurer qu'il prend toute la largeur du subject-card-left */
    border-radius: 0 0 30px 0;
}

/* 2. Style des lignes d'information */
.details-box .info-row {
    font-size: var(--font-size-md);
    padding: var(--spacing-sm) 0; /* Espacement vertical pour chaque ligne */
    color: var(--color-text-medium);
}

/* 3. Style pour les étiquettes (Date, Encadrant, Co-encadrant) */
/* Nous avons ajouté la balise <strong> dans le PHP */
.details-box .info-row strong {
    color: var(--color-light-blue);
    font-weight: 700;
    display: block; /* Pour mettre l'étiquette sur une ligne, puis la valeur en dessous */
    margin-bottom: 2px;
}


/* 4. Style des séparateurs horizontaux */
.detail-separator {
    border: 0;
    height: 1px;
    background-color: #ccc; /* Couleur de la barre horizontale */
    margin: 0; /* Supprimer les marges par défaut des <hr> */
    opacity: 0.5; /* Rendre la barre plus discrète */
}

.info-row {
    display: block;
    align-items: flex-start;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.subject-description {
    margin-top: 10px;
    line-height: 1.8;
    text-align: justify;
}

.director-section {
    flex-direction: column;
    gap: 12px;
}

.director-mail {
    color: #288FE2;
    line-height: 1.6rem;
    text-decoration: none;
    word-break: break-word;
}

.director-mail:hover {
    text-decoration: underline;
}
/* Colonne droite (Mots-clés & Financement) */
.subject-card-right {
    flex: 0 0 220px; /* Laissez une largeur fixe pour les détails */
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Ajoutez une petite bordure/fond pour délimiter visuellement */
    border: none;
    background-color: transparent;
    border-radius: 0;
}

    .section-title {
        background-color: #288FE2;
        color: white;
        font-weight: 600;
        padding: 5px;
        margin-bottom: 4px;
        text-transform: uppercase;
    }

/* =========================================================
🔑 STYLES POUR LA LISTE DE MOTS-CLÉS
========================================================= */

.subject-card-right .keyword-list {
    list-style: disc !important; /* Supprime les puces par défaut */
    padding-left: 20px !important; /* Supprime l'indentation par défaut de l'<ul> */
    margin: 0 !important;

    /* Optionnel : pour afficher les mots-clés sur la même ligne */
    display: flex;
    flex-wrap: wrap; /* Permet aux mots-clés de passer à la ligne */
    gap: 8px; /* Espace entre les jetons de mots-clés */
}

.subject-card-right .keyword-list li {
    /* 💥 LE CHANGEMENT CLÉ : Forcer le comportement d'élément de liste */
    display: list-item !important;

    /* Hériter le style de la puce du parent UL */
    list-style: inherit !important;
    color: #288FE2;
    padding: 2px 0 !important;
    margin: 0 !important;
    font-size: var(--font-size-md);
    font-weight: 800;
}

/* Style de chaque ligne de condition (Durée, Profil, etc.) */
.condition-item {
    /* 💥 AJOUT DE L'ESPACE VERTICAL AUTOUR DU TEXTE */
    padding-top: 10px;    /* Espace au-dessus du contenu */
    padding-bottom: 10px; /* Espace en dessous du contenu */

    font-size: var(--font-size-md);
    line-height: 1.4;
    color: gray;
}

/* S'assurer que le premier élément n'a pas de padding-top et que le dernier n'a pas de padding-bottom */
.conditions-box .condition-item:first-child {
    padding-top: 0;
}
.conditions-box .condition-item:last-child {
    padding-bottom: 0;
}

    /* Style des séparateurs horizontaux */
.detail-separator {
    border: 0;
    height: 1px;
    background-color: #ccc;
    /* 💥 AJOUT D'UNE PETITE MARGE AUTOUR DU SÉPARATEUR */
    margin: 5px 0 !important; /* 5px en haut et en bas, 0 à gauche et à droite */
    opacity: 0.5;
    }

/* =========================================================
   📱 MODE RESPONSIVE (Tablettes et Mobiles)
   ========================================================= */

@media (max-width: 1024px) {
    /* Sur tablette, on passe la colonne de droite en dessous de la centrale */
    .subject-card {
        flex-wrap: wrap;
        gap: 20px;
    }

    .subject-card-left {
        flex: 0 0 250px; /* On réduit un peu la vignette */
    }

    .subject-card-right {
        flex: 1 1 100%; /* La colonne droite prend toute la largeur en bas */
        flex-direction: row; /* On met Mots-clés et Financement côte à côte */
        gap: 20px;
    }

    .subject-card-right > div {
        flex: 1; /* Chaque bloc prend 50% */
    }
}

@media (max-width: 768px) {
    /* SUR MOBILE : TOUT EN UNE SEULE COLONNE */

    .subjectlist-layout {
        padding: 0 10px;
        max-width: 100%;
    }

    .subject-card {
        flex-direction: column; /* Empilement vertical complet */
        gap: 15px;
        border-bottom: 2px solid var(--color-primary); /* Séparateur plus marqué */
        padding-bottom: 30px;
    }

    .subject-card-left,
    .subject-card-center,
    .subject-card-right {
        flex: none;
        width: 100%;
        padding: 0;
    }

    .subject-card-right .keyword-list li {
        font-weight: 600;
    }

    /* Ajustement Image et Details */
    .subject-card-left img {
        max-width: 100%;
        height: auto;
    }

    .details-box {
        border-radius: var(--radius-sm); /* On retire l'arrondi spécifique pour un look plus "fiche" */
        margin-top: 10px;
    }

    /* La description n'est plus justifiée sur mobile pour éviter les trous */
    .subject-description {
        text-align: left;
        font-size: 14px;
        text-align: justify;
    }

    /* Les colonnes de droite (mots-clés) repassent en vertical sur petit écran */
    .subject-card-right {
        flex-direction: column;
    }

    /* Optimisation des titres pour mobile */
    .subject-title,
    .subject-card-center-description,
    .section-title {
        font-size: 12px;
        padding: 10px;
    }

    /* Mots-clés en mode "tags" plus compacts */
    .subject-card-right .keyword-list {
        gap: 5px;
    }
}

/* Styles utilitaires pour les listes */
.keyword-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-list li {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 13px;
}