/* =========================
   RÉGLAGES GÉNÉRAUX
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to bottom, #eef6ff, #f8fbff);
    color: #333;
}

/* =========================
   BANNIÈRE
========================= */

header {
    min-height: 380px;

    background:
        linear-gradient(rgba(0, 62, 120, 0.72), rgba(0, 120, 150, 0.65)),
        url("images/banniere-sti2d.jpg");

    background-size: cover;
    background-position: center;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 40px;
}

header h1 {
    margin: 0;
    font-size: 58px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

header p {
    max-width: 800px;
    font-size: 22px;
    line-height: 1.5;
    font-weight: bold;
}

/* =========================
   MENU
========================= */

nav {
    background-color: #073b68;
    text-align: center;
    padding: 18px;

    position: sticky;
    top: 0;
    z-index: 10;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 25px;
    font-weight: bold;
    font-size: 17px;
    transition: 0.3s;
}

nav a:hover {
    color: #69e6dd;
}

/* =========================
   CONTENU PRINCIPAL
========================= */

main {
    max-width: 1150px;
    margin: auto;
    padding: 20px;
}

section {
    background-color: white;

    margin: 35px 0;
    padding: 35px;

    border-radius: 18px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

h2 {
    color: #075985;
    font-size: 31px;
    margin-top: 0;

    border-left: 7px solid #14b8a6;
    padding-left: 15px;
}

p {
    line-height: 1.7;
}

/* =========================
   PRÉSENTATION
========================= */

.contenu {
    display: flex;
    gap: 35px;
    align-items: center;
}

.contenu img {
    width: 46%;
    height: 300px;

    object-fit: cover;

    border-radius: 18px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

    transition: 0.3s;
}

.contenu img:hover {
    transform: scale(1.03);
}

/* =========================
   CARTES DES SPÉCIALITÉS
========================= */

.cartes {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    margin-top: 30px;
}

article {
    padding: 30px;

    border-radius: 16px;

    color: white;

    transition: 0.3s;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

article:hover {
    transform: translateY(-7px);
}

/* Couleur différente pour chaque spécialité */

article:nth-child(1) {
    background: linear-gradient(135deg, #0284c7, #075985);
}

article:nth-child(2) {
    background: linear-gradient(135deg, #10b981, #047857);
}

article:nth-child(3) {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

article:nth-child(4) {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

article h3 {
    margin-top: 0;

    font-size: 25px;

    color: white;
}

/* =========================
   GALERIE D'IMAGES
========================= */

.galerie {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 25px;
}

.galerie img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    border-radius: 15px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

    transition: 0.3s;
}

.galerie img:hover {
    transform: scale(1.04);
}

/* =========================
   DÉBOUCHÉS
========================= */

#debouches {
    background: linear-gradient(135deg, white, #f0fdfa);
}

#debouches ul {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    padding: 0;

    list-style: none;
}

#debouches li {
    background-color: #e0f2fe;

    padding: 18px;

    border-radius: 10px;

    border-left: 5px solid #0284c7;

    font-weight: bold;
}

/* =========================
   PIED DE PAGE
========================= */

footer {
    margin-top: 50px;

    background: linear-gradient(135deg, #073b68, #075985);

    color: white;

    text-align: center;

    padding: 30px;
}

/* =========================
   RESPONSIVE
========================= */

@media screen and (max-width: 750px) {

    header {
        min-height: 300px;
    }

    header h1 {
        font-size: 38px;
    }

    header p {
        font-size: 18px;
    }

    nav a {
        display: block;
        margin: 12px;
    }

    .contenu {
        flex-direction: column;
    }

    .contenu img {
        width: 100%;
    }

    .cartes {
        grid-template-columns: 1fr;
    }

    .galerie {
        grid-template-columns: 1fr;
    }

    #debouches ul {
        grid-template-columns: 1fr;
    }

}

.bouton-lien {
    display: inline-block;
    padding: 14px 24px;
    background-color: #0d6efd;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
}

.bouton-lien:hover {
    background-color: #084298;
}\n\n/* =========================================\n   BANDEAU HORIZONTAL DES FICHES MÉTIERS\n========================================= */\n\n.carrousel-metiers {\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-top: 30px;\n}\n\n.patchwork {\n    display: flex;\n    gap: 20px;\n    width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scroll-snap-type: x proximity;\n    overscroll-behavior-x: contain;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: thin;\n    scrollbar-color: #0d6efd #e0f2fe;\n    padding: 7px 4px 16px;\n}\n\n.patchwork::-webkit-scrollbar {\n    height: 10px;\n}\n\n.patchwork::-webkit-scrollbar-track {\n    background: #e0f2fe;\n    border-radius: 10px;\n}\n\n.patchwork::-webkit-scrollbar-thumb {\n    background: #0d6efd;\n    border-radius: 10px;\n}\n\n.fiche {\n    position: relative;\n    flex: 0 0 245px;\n    scroll-snap-align: start;\n    background-color: white;\n    border-radius: 14px;\n    overflow: hidden;\n    cursor: pointer;\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);\n    transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.fiche:hover {\n    transform: translateY(-7px);\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);\n}\n\n.fiche img {\n    display: block;\n    width: 100%;\n    height: 260px;\n    object-fit: cover;\n    object-position: top;\n}\n\n.titre-fiche {\n    min-height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 15px 10px;\n    text-align: center;\n    font-size: 16px;\n    font-weight: bold;\n    color: #073b68;\n    background-color: white;\n}\n\n.fiche-generale {\n    flex-basis: 510px;\n    background: linear-gradient(135deg, #073b68, #087f8c);\n}\n\n.fiche-generale img {\n    height: 350px;\n}\n\n.fiche-generale .titre-fiche {\n    min-height: 69px;\n    padding: 20px;\n    font-size: 21px;\n    color: white;\n    background: linear-gradient(135deg, #073b68, #087f8c);\n}\n\n.carrousel-fleche {\n    flex: 0 0 46px;\n    width: 46px;\n    height: 46px;\n    border: none;\n    border-radius: 50%;\n    background-color: #073b68;\n    color: white;\n    font-size: 34px;\n    line-height: 1;\n    cursor: pointer;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);\n    transition: background-color 0.3s, transform 0.3s;\n}\n\n.carrousel-fleche:hover {\n    background-color: #0d6efd;\n    transform: scale(1.06);\n}\n\n/* =========================================\n   FENÊTRE D'AFFICHAGE EN GRAND\n========================================= */\n\n.fenetre-fiche {\n    display: none;\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    padding: 30px;\n    background-color: rgba(0, 0, 0, 0.88);\n    justify-content: center;\n    align-items: flex-start;\n    overflow-y: auto;\n}\n\n.fenetre-fiche img {\n    width: auto;\n    max-width: 95%;\n    height: auto;\n    margin: auto;\n    border-radius: 10px;\n    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);\n}\n\n.fermer {\n    position: fixed;\n    top: 15px;\n    right: 30px;\n    z-index: 1100;\n    width: 55px;\n    height: 55px;\n    border: none;\n    border-radius: 50%;\n    background-color: white;\n    color: #073b68;\n    font-size: 38px;\n    font-weight: bold;\n    cursor: pointer;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);\n}\n\n.fermer:hover {\n    background-color: #e53935;\n    color: white;\n}\n\n/* =========================================\n   TABLETTE ET SMARTPHONE\n========================================= */\n\n@media screen and (max-width: 750px) {\n    .carrousel-metiers {\n        gap: 6px;\n    }\n\n    .fiche {\n        flex-basis: min(78vw, 280px);\n    }\n\n    .fiche-generale {\n        flex-basis: min(88vw, 420px);\n    }\n\n    .fiche img,\n    .fiche-generale img {\n        height: 280px;\n    }\n\n    .carrousel-fleche {\n        flex-basis: 38px;\n        width: 38px;\n        height: 38px;\n        font-size: 29px;\n    }\n\n    .fenetre-fiche {\n        padding: 20px 8px;\n        align-items: center;\n    }\n\n    .fenetre-fiche img {\n        max-width: 100%;\n        max-height: calc(100vh - 40px);\n        object-fit: contain;\n    }\n\n    .fermer {\n        top: max(10px, env(safe-area-inset-top));\n        right: 12px;\n        width: 46px;\n        height: 46px;\n        font-size: 32px;\n    }\n}\n\n@media screen and (max-width: 480px) {\n    main {\n        padding: 12px;\n    }\n\n    section {\n        padding: 24px 18px;\n    }\n\n    h2 {\n        font-size: 26px;\n    }\n\n    .carrousel-fleche {\n        display: none;\n    }\n\n    .patchwork {\n        margin-inline: -4px;\n        padding-inline: 4px;\n    }\n\n    .fiche {\n        flex-basis: 82vw;\n    }\n\n    .fiche-generale {\n        flex-basis: 88vw;\n    }\n}\n