/* =========================================================
   🎨 directory.css — Styles globaux pour Les Plates-Formes
   ========================================================= */

/* =========================================================
   🎨 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) */

    /* Textes et fonds */
    --color-text-dark: #333;
    --color-text-medium: #444;
    --color-text-light: #999;
    --color-background-light: #e0e0e0;
    --color-background-off-white: #f1f1f1;
    --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;
}

html {
    scroll-behavior: smooth;
}

/* --- TITRE PRINCIPAL EN HAUT --- */
.content .page-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(40, 143, 226, 1);
    margin: 10px auto 10px 20px;
    max-width: 1800px;
    position: relative;
    padding-top: 15px;
    display: block;
    text-align: left;
}

/* La ligne décorative */
.page-title::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 150px;      /* Longueur limitée de la ligne */
    height: 2px;      /* Épaisseur de la ligne */
    background-color: rgba(40, 143, 226, 1); /* Même couleur que le titre */
    /*margin-left: 20px;*/
}

.page-title2 {
    font-family: 'Raleway', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    color: rgba(40, 143, 226, 1);
    margin: 10px auto 10px auto;
    max-width: 1200px;
    padding: 0 20px 0 10px;
    text-align: left;
}

h3.page-title2 {
    text-transform: none;
}

.plateformedetail-layout {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: auto;
    padding: 0 var(--spacing-lg);
    box-sizing: border-box;
    background-color: #fff;
}

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

.sidebar-title {
    font-size: 1.8em;
    font-weight: 800;
    color: rgba(40, 143, 226, 1);
    margin-bottom: 40px;
    letter-spacing: 1px;
}

/*.sidebar-menu {*/
/*    width: 100%;*/
/*    text-align: left;*/
/*}*/

/* --- MENU --- */
.sidebar-menu {
    width: 100%;
    display: block;
}

nav.sidebar-menu {
    padding: 0; /* Réinitialise le padding */
    margin-top: 10px;
}

.plateformedetail-sidebar {
    flex: 0 0 250px;
    position: sticky;
    /* Aligne cette valeur sur la marge du contenu pour éviter le "saut" */
    top: 100px;

    display: flex;
    flex-direction: column;
    align-self: flex-start;
    height: fit-content;

    /* Supprime ou réduit la marge haute si tu veux qu'elle soit plus haute au départ */
    margin-top: 40px;
    gap: 20px;
}

/* MENU LISTE */
.sidebar-menu ul {
    list-style: none;            /* supprime les puces */
    margin: 0;
    padding: 0px;         /* 🔸 retrait du contenu */
    width: 100%;
}

.sidebar-menu li {
    display: block;
    width: 100%;
    text-transform: none;
}

.sidebar-menu a {
    color: gray;
    text-decoration: none;
    font-size: 1.1em;
    padding: 0px 0;
    transition: color 0.3s ease;
    text-align: left;
    display: block;
    text-transform: none;       /* ✅ casse normale */
    position: relative;         /* nécessaire pour le ::before */
}

.sidebar-menu a:hover {
    color: orange;
}

/* --- IMAGE EN HAUT DE LA SIDEBAR --- */

.sidebar-image {
    width: 100%;
    display: block; /* Force l'occupation de l'espace */
    margin-bottom: 10px; /* Sécurité supplémentaire */
}

.sidebar-image img {
    width: 100%;
    height: auto;
    display: block;
}

p{
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin-bottom: 5px !important;
    text-align: justify !important;
}
#description {
    scroll-margin-top: 150px;
}

/* --- COLONNE DROITE --- */

.plateformedetail-content {
    width: 100%;
    padding: 20px 60px;
    box-sizing: border-box;
}
.plateformedetail .two-columns {
    column-count: 2;
    column-gap: 3rem;
}

/* === BLOCS INFO INTRO === */

/* === UNE LIGNE === */
.info-line {
    display: flex;
    align-items: stretch;
    margin: 15px 0 0 20px;
}

/* === CARRÉ BLEU === */
.info-square {
    width: 90px;
    min-width: 90px;
    background-color: #268FE2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding: 10px;
}

/* Icône dans le carré bleu */
.info-square i {
    font-size: 2.4rem;   /* 🔥 augmente ici (2.8rem si tu veux encore plus) */
    line-height: 1;
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Variante TEXTE (département) */
.info-square.text {
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* === CONTENU À DROITE === */
.info-box {
    flex: 1;
    background-color: #fff;
    padding: 16px 22px;
    border-radius: 0 0 25px 0; /* bottom-right only */
    background-color: #f8f6f2;
    color: #707070;
}

.info-box h4 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 800;
    color: #268FE2;
    /*text-transform: uppercase;*/
    letter-spacing: .5px;
}

.info-box p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
}

.platform-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.plateforme-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-left: 20px;
}

.gallery-item {
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gallery-item img {
    width: 100%;
    height: auto; /* adapte la hauteur à l'image */
    object-fit: contain; /* conserve le ratio sans couper */
    max-height: 250px;  /* optionnel : limite la hauteur */
}

.gallery-item p {
    padding: 12px 0;
    font-size: .9rem;
    flex-grow: 1;
    color: gray;
}


.section-image {
    max-width: 100%;   /* ne dépasse pas la largeur du conteneur info-box */
    margin-top: 10px;
}

.section-image img {
    max-width: 100%;   /* s’adapte à la largeur du conteneur */
    height: auto;      /* garde les proportions */
    display: block;
    border-radius: 4px; /* coins arrondis, optionnel */
}

@media (max-width: 768px) {
    .layout-flex {
        max-width: 100% !important;
        margin: 0px !important;
    }
    /* 1. On fait disparaître la sidebar complètement */
    .plateformedetail-sidebar {
        display: none !important;
    }

    /* 2. Le contenu prend toute la place */
    .plateformedetail-content, .content {
        width: 100% !important;
        display: block !important;
        padding: 10px !important;
    }

    /* 3. On centre les titres pour faire "propre" */
    .page-title, .page-title2 {
        text-align: center;
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

    /* 4. On s'occupe de tes icônes (au-dessus du texte) */
    .info-line {
        display: flex;
        flex-direction: column; /* Icône en haut */
        align-items: flex-start; /* Aligné à gauche, plus lisible */
        gap: 5px;
        margin-bottom: 25px;
        border-bottom: 1px dashed #ddd; /* Séparateur léger */
        padding-bottom: 15px;
    }

    /* 5. On réduit la taille des icônes pour qu'elles ne soient pas trop grandes */
    .info-square {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        font-size: 1rem !important;
        line-height: 35px;
        text-align: center;
        /* Ici pas de background ou radius ajouté, ça garde ton style actuel */
    }

    .info-box h4 {
        margin: 0 0 5px 0;
        font-size: 1.1rem;
        font-weight: bold;
    }

    .info-box p {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.4;
    }
}