/* ACCUEIL PAGES */ 

	.container-caroussel {
	margin:0 auto;
	width :60%;  
	padding: 30px 0 0 0;
	}

	.caroussel {
	width:1000px; 
	height:400px;
	overflow:scroll;
	padding: 30px 0 0 0;
	}

	.caroussel-img img{
	width : 180px; 
	height: auto;
	}

	/* --- BLOCS UNIVERS DE LA PAGE D'ACCUEIL --- */
.pageCadre_catalogue {
    display: flex; /* On passe en flex pour mieux aligner */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 95%; 
    margin: 0 auto;
    padding: 20px;
}
  
.description_univers {
    width : 220px;
    text-align: center;
    vertical-align: top;
}

.contour_univers {
    border: 5px #171d49 solid;
    border-radius: 18px;
    width : 220px;
    height : 220px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image_catalogue {
    width: 90%;
    margin: 0 auto;
}

.description_univers ul {
    font-family: Arial, sans-serif;
    font-size: 13px; /* Équivalent à 70% pour plus de clarté */
    font-weight : bold;
    color: black;
    margin-top: 10px;
    padding-left: 20px;
    text-align: left;
    list-style-type: disc;
}
/* ============================================================
   CORRECTIFS MOBILE (Écrans inférieurs à 768px)
   ============================================================ */
   @media (max-width: 768px) {

    /* 1. On réduit la police globale */
    html, body {
        font-size: 16px; 
        overflow-x: hidden; 
    }

    /* 2. Le Carrousel : Correction majeure */
    .container-caroussel {
        width: 100% !important;
        padding: 0 !important; /* On enlève le padding top de 30px */
        margin: 0 !important;
    }

    #carousel1 {
        width: 100% !important;
        /* On réduit la hauteur car on a remonté les images avec yPos: 10 */
        height: 250px !important; 
        margin-top: 0 !important; /* On colle au titre */
        overflow: visible !important; 
    }

    /* On cible les images du carrousel spécifiquement */
    .cloudcarousel {
        width: 130px !important; 
        height: auto !important;
    }

    /* On cache les reflets sur mobile (ils mangent de l'espace pour rien) */
    .reflection {
        display: none !important;
    }

    /* 3. Les Blocs Univers (2 par ligne) */
    .pageCadre_catalogue {
        width: 100% !important;
        gap: 10px;
        padding: 10px;
        justify-content: space-around;
    }

    .description_univers {
        width: 45% !important; 
        min-width: 140px;
        margin-bottom: 20px;
    }

    .contour_univers {
        width: 100% !important; 
        height: auto;
        aspect-ratio: 1 / 1; 
        border: 3px #171d49 solid !important;
    }

    .description_univers ul {
        display: none; /* Cache les listes sur mobile pour épurer */
    }

    /* 4. Le texte de description (ENFIN LARGE) */
    .descontact {
        display: block !important;
        width: 100% !important;
        padding: 20px 15px !important; 
        text-align: center !important; 
        box-sizing: border-box !important;
        flex-shrink: 0 !important; /* Empêche l'écrasement flex */
    }

    /* 5. Correction du Header */
    .navigation img {
        max-width: 130px !important;
    }
}

/* Optionnel : Très petits mobiles (moins de 400px) */
@media (max-width: 400px) {
    .description_univers {
        width: 90% !important; /* 1 seul bloc par ligne sur petit tel */
    }
}