/* ================================================================
   =============  BASE GÉNÉRALE DES PAGES PROJETS  =================
   ================================================================ */

.page-projet {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #222;
    color: #fff;
    font-family: "Montserrat", Arial, sans-serif;
}

/* Intro */
.page-projet .intro-projet {
    width: 100%;
    max-width: 1300px;
    padding: 60px 20px 30px;
    margin: 0 auto;
}

.page-projet .intro-projet h1 {
    font-size: 2rem;
    margin-bottom: 18px;
}

/* --------- Base commune pour TOUTES les images projets --------- */


/* ================================================================
   ===============  LOGO DU HEADER — PAGES PROJETS  ===============
   ================================================================ */

.head_logo img {
    display: block;
    margin: 0 auto;
    max-width: 350px;   /* taille du logo en desktop */
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .head_logo img {
        max-width: 220px;   /* taille réduite en mobile */
    }
}




.projet-images {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Images individuelles */
.projet-images .img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;         /* Border radius global */
    object-fit: contain;
}

/* Paires (2 images côte à côte) */
.projet-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Responsive */
@media (max-width: 768px) {
    .projet-images {
        gap: 28px;
        padding: 0 16px;
    }
    .projet-row-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ================================================================
   ===============  LAYOUT SPÉCIFIQUE — FNAC  ======================
   ================================================================ */

.page-projet-fnac * {
    box-sizing: border-box;
}

/* Conteneur global Fnac */
.page-projet-fnac .fnac-layout {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
}

/* Bloc magazine 2x2 */
.fnac_magazine {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.fnac_magazine img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Bloc Disney 33/67 */
.fnac_disney {
    display: grid;
    grid-template-columns: 33% 67%;
    gap: 20px;
}

.fnac_disney img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Bloc Bannières (66 / 34), sans crop */
.fnac_banniere {
    display: grid;
    grid-template-columns: 66% 34%;
    gap: 20px;
    grid-auto-rows: 1fr;
}

.fnac_banniere .img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222;
    border-radius: 12px;
}

.fnac_banniere img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    border-radius: 12px;
}

/* Responsive FNAC */
@media (max-width: 1024px) {
    .fnac_disney {
        grid-template-columns: 1fr;
    }
    .fnac_banniere {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}


/* ================================================================
   ===============  LAYOUT SPÉCIFIQUE — OSCARO  ===================
   ================================================================ */

.page-projet-oscaro .projet-images {
    /* on garde les règles globales, donc rien à changer */
}

/* Paires Oscaro */
.page-projet-oscaro .projet-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.page-projet-oscaro .projet-row-2 img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .page-projet-oscaro .projet-row-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}