/* ########################### */
/* DANS style-fabnum.css */
/* ########################### */

/* --- 1. Conteneur global et configuration de la grille --- */

.fabnum-container {
    max-width: 1300px;
    margin: 40px auto;
    padding: 0 20px;
}

.fabnum {
    display: grid;
    /* Définition des colonnes : 4 colonnes de largeur égale */
    grid-template-columns: repeat(4, 1fr);
    /* Définition des lignes : leur hauteur s'adapte au contenu */
    grid-auto-rows: minmax(min-content, auto);
    gap: 25px;
    padding: 20px 0;
    text-align: left;
}

/* --- 2. Styles des Blocs de Contenu (Générique) --- */

.fabnum>div {
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    font-size: 1.05em;
    color: #333;
    text-align: center;
}

/* Styles spécifiques au texte */
.one,
.seven,
.nine {
    background-color: #f7f7f7;
    text-align: justify;
}

.one h2 {
    color: #007bff;
    margin-top: 0;
    font-size: 1.6em;
}

.fabnum img,
.fabnum video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

/* --- 3. Positionnement des Blocs avec grid-column/grid-row (4 colonnes) --- */

/* LIGNE 1 à 4 (Introduction) */
.one {
    /* Largeur 2 colonnes, Hauteur 4 lignes */
    grid-row: 1 / span 4;
    grid-column: 1 / span 2;
    text-align: left;
}

/* LIGNE 1 & 2 (Machines : Avant le numérique) */
.two {
    /* Largeur 2 colonnes, Hauteur 2 lignes */
    grid-row: 1 / span 2;
    grid-column: 3 / span 2;
}

/* LIGNE 3 (Machines : Plasma et Jet d'eau) */
.three {
    /* Largeur 1 colonne, Hauteur 1 ligne */
    grid-row: 3 / span 1;
    grid-column: 3 / span 1;
}

.four {
    /* Largeur 1 colonne, Hauteur 1 ligne */
    grid-row: 3 / span 1;
    grid-column: 4 / span 1;
}

/* LIGNE 5 (Machines : Routeur, Centre, Fablab Intro, Vidéo) */
.five {
    /* Largeur 1 colonne, Hauteur 1 ligne */
    grid-row: 5 / span 1;
    grid-column: 1 / span 1;
}

.six {
    /* Largeur 1 colonne, Hauteur 1 ligne */
    grid-row: 5 / span 1;
    grid-column: 2 / span 1;
}

.seven {
    /* Largeur 1 colonne, Hauteur 1 ligne */
    grid-row: 5 / span 1;
    grid-column: 3 / span 1;
    background-color: #e0f7fa;
    text-align: justify;
}

.height {
    /* Largeur 1 colonne, Hauteur 1 ligne (Vidéo + Texte) */
    grid-row: 5 / span 1;
    grid-column: 4 / span 1;
    background-color: #e6ffe6;
    text-align: center;
}

/* LIGNE 6 (Titre Chaîne) */
.nine {
    /* Largeur 4 colonnes */
    grid-row: 6 / span 1;
    grid-column: 1 / span 4;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* LIGNE 7 (Chaîne de fabrication 3D) */
.ten {
    /* Largeur 1 colonne */
    grid-row: 7 / span 1;
    grid-column: 1 / span 1;
}

.eleven {
    /* Largeur 2 colonnes, Hauteur 2 lignes */
    grid-row: 7 / span 2;
    grid-column: 2 / span 2;
}

.twelve {
    /* Largeur 1 colonne */
    grid-row: 7 / span 1;
    grid-column: 4 / span 1;
}


/* --- 4. Styles des Pictogrammes (Tooltips) --- */

.ten,
.eleven,
.twelve {
    /* 🔑 CLÉ : Référence de positionnement pour les pictogrammes absolus */
    position: relative;
    padding: 10px;
    background-color: #f0f8ff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.picto-item {
    position: absolute;
    /* Dimensions (x2) */
    width: 48px;
    height: 48px;
    font-size: 28px;

    /* Position de base : Haut à droite */
    top: 5px;
    right: 5px;

    background-color: #ffcc00;
    color: #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: transform 0.2s ease;
}

.picto-item:hover {
    transform: scale(1.1);
}

/* 🔑 CORRECTION DES POSITIONS POUR ÉVITER LA SUPERPOSITION */

/* Picto i1 (⎘) : Décalé vers la gauche par rapport à i0 */
#i1 {
    /* 5px (marge) + 48px (taille picto) + 7px (espace) = 60px */
    right: 220px;
    top: 5px;
}

/* Picto i3 (⎙) : Décalé vers la gauche par rapport à i2 */
#i3 {
    /* 5px (marge) + 48px (taille picto) + 7px (espace) = 60px */
    right: 500px;
    top: 5px;
}

/* 🔑 AFFICHAGE DU TEXTE AU SURVOL (Tooltip) */

.picto-item::after {
    /* Récupère le texte de l'attribut aria-label */
    content: attr(aria-label);
    position: absolute;
    bottom: 100%;
    /* Positionne le texte au-dessus du picto */
    right: 50%;
    transform: translateX(50%);
    /* Centre le texte horizontalement */

    /* Styles visuels */
    width: 250px;
    padding: 10px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    font-size: 0.9em;
    line-height: 1.3;
    text-align: center;

    /* Rendre invisible par défaut */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
    z-index: 100;
}

.picto-item:hover::after {
    /* Rendre visible au survol */
    opacity: 1;
    visibility: visible;
}


/* --- 5. Media Query (Adaptation pour mobile) --- */

@media (max-width: 992px) {
    .fabnum {
        /* Changement à 2 colonnes pour les tablettes */
        grid-template-columns: 1fr 1fr;
    }

    /* Annulation des positions explicites pour les grands blocs */
    .fabnum>div {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    /* Forcer les blocs larges sur toute la largeur (2 colonnes) */
    .one,
    .six,
    .seven,
    .nine,
    .height,
    .eleven,
    .twelve {
        grid-column: 1 / span 2 !important;
    }

    /* Empiler les cartes deux à deux */
    .two {
        grid-column: 1 / span 1;
    }

    .three {
        grid-column: 2 / span 1;
    }

    .four {
        grid-column: 1 / span 1;
    }

    .five {
        grid-column: 2 / span 1;
    }
}

@media (max-width: 576px) {
    .fabnum {
        /* Passage à une seule colonne pour les téléphones */
        grid-template-columns: 1fr;
    }

    /* Tous les éléments doivent s'étendre sur la colonne unique */
    .fabnum>div {
        grid-column: 1 / span 1 !important;
        grid-row: auto !important;
    }
}