/* ============================================================
   PROF-MPK - Renaissance
   Feuille de style principale

   Palette volontairement sobre et chaleureuse,
   inspirée du bois, du papier et de l'atelier.

   Patrick Marcel
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --fond-page:        #f4f1eb;
    --fond-section:     #ffffff;

    --texte:            #303030;
    --texte-clair:      #666666;

    --accent:           #6f4e37;
    --accent-clair:     #a67c52;

    --bordure:          #dddddd;

    --ombre:            0 4px 12px rgba(0,0,0,0.10);

}


/* ============================================================
   REMISE A ZERO
   ============================================================ */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


/* ============================================================
   PAGE
   ============================================================ */

html {

    scroll-behavior: smooth;

}


body {

    background: var(--fond-page);

    color: var(--texte);

    font-family: Georgia, "Times New Roman", serif;

    line-height: 1.7;

}


/* ============================================================
   LIENS
   ============================================================ */

a {

    color: var(--accent);

    text-decoration: none;

    transition: 0.3s;

}


a:hover {

    color: var(--accent-clair);

}


/* ============================================================
   IMAGES
   ============================================================ */

img {

    display: block;

    max-width: 100%;

}


/* ======================= Partie 2 ========================  */


/* ============================================================
   TYPOGRAPHIE
   ============================================================ */

/*
    Les polices ont été choisies pour privilégier
    le confort de lecture et une ambiance chaleureuse.

    Rien n'est figé :
    cette partie pourra évoluer au fil du temps.
*/


body {

    font-family:
        "Trebuchet MS",
        Verdana,
        Arial,
        sans-serif;

    font-size: 1rem;

    line-height: 1.7;

    color: var(--texte);

}


h1,
h2,
h3,
h4 {

    font-family:
        "Palatino Linotype",
        Palatino,
        Georgia,
        "Times New Roman",
        serif;

    font-weight: normal;

    color: #3f2d1d;

}


h1 {

    font-size: 3rem;

    letter-spacing: 0.08em;

}


h2 {

    font-size: 2rem;

    margin-bottom: 0.80em;

}


h3 {

    font-size: 1.40rem;

    margin-bottom: 0.60em;

}


p {

    margin-bottom: 1em;

}



/* ======================= Partie 3 ========================  */

/* ============================================================
   HERO
   ============================================================ */

.hero {

    position: relative;

    width: 100%;

    height: 75vh;

    min-height: 500px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ============================================================
   DIAPORAMA
   ============================================================ */

.slideshow {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}

/*


*/


/* ======================================================
   DIAPORAMA
   ====================================================== */

.slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    opacity: 0;

    transition: opacity 2s ease;

}

.slide.active {

    opacity: 1;

}

/* Photo verticale */

.slide.portrait {

    object-fit: contain;

}














.slide-blur {

    position: absolute;

    inset: -40px;

    background-size: cover;

    background-position: center;

    filter: blur(30px);

   transform: translateY(-6px) scale(1.1);

    opacity: 0.55;

}




.slide-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: contain;

}











/* ============================================================
   VOILE LEGER SUR LES IMAGES
   ============================================================ */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.35)
        );

    z-index: 1;

}


/* ============================================================
   TEXTE CENTRAL
   ============================================================ */

.hero-overlay {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: auto;

    padding: 2rem;

    text-align: center;

    color: white;

}


.hero-overlay h1 {

    color: white;

    font-size: 3.4rem;

    letter-spacing: 0.20em;

    margin-bottom: 0.30em;

}



.hero-ligne {

    width: 120px;

    height: 1px;

    margin: 25px auto 35px auto;

    background: rgba(255,255,255,0.7);

}













.hero-sous-titre {

    font-family:
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif;



/* ============================================================
   ============================================================ */


    letter-spacing: 0.15em;
    text-transform: uppercase;

/* ============================================================
   ============================================================ */




    font-size: 1.8rem;

    font-style: italic;

    margin-bottom: 1.20em;

    color: white;

}


.hero-texte {

    font-family:
        "Trebuchet MS",
        Verdana,
        sans-serif;

    font-size: 1.30rem;

    max-width: 700px;

    margin: auto;

    line-height: 1.8;

}

/* ==============================Partie 4=============================== */

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

.main-nav {

    background: #ffffff;

    border-top: 1px solid #d8d8d8;

    border-bottom: 1px solid #d8d8d8;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}


.main-nav ul {

    list-style: none;

    max-width: 1400px;

    margin: auto;

    padding: 0;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

}


.main-nav li {

    margin: 0;

}


.main-nav a {

    display: block;

    padding: 18px 28px;

    font-family:
        "Trebuchet MS",
        Verdana,
        sans-serif;

    font-size: 1rem;

    color: #444;

    transition: 0.30s;

}


.main-nav a:hover {

    background: #f3efe8;

    color: var(--accent);

}


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

main {

    max-width: 1400px;

    margin: 0 auto;

    padding: 50px 25px;

}


/* ============================================================
   PRESENTATION
   ============================================================ */

.presentation {

    max-width: 900px;

    margin: 0 auto 70px auto;

    text-align: center;

}


.presentation h2 {

    margin-bottom: 35px;

}


.presentation p {

    font-size: 1.10rem;

    margin-bottom: 22px;

    color: #444;

}


/* ================================== Partie 5 =========================*/

/* ============================================================
   CARTES
   ============================================================ */

.carte {

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


.carte:hover {

    transform: translateY(-6px);

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

}


.carte a {

    display: block;

    color: inherit;

}

/* =============================Partie 6 ========================================= */

/* ============================================================
   IMAGE DE LA CARTE
   ============================================================ */






.carte img {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform 0.8s ease;

}

















.carte:hover img {

    transform: scale(1.05);

}


/* =============================Partie 7 ==================================*/

/* ============================================================
   TEXTE DE LA CARTE
   ============================================================ */

.carte h3 {

    margin: 25px 25px 15px 25px;

    text-align: center;

    color: #50351f;

}


.carte p {

    margin: 0 25px 25px 25px;

    text-align: center;

    color: #555;

    line-height: 1.6;

}


.carte-principale {

    grid-column: span 2;

}



.carte {
    position: relative;
    overflow: hidden;
}

.carte::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.55),
        rgba(0,0,0,0)
    );
    pointer-events: none;
}

















/* ===============================Partie 8 =============================*/















.decouvrir {

    margin-top: 20px;

    font-size: 0.95rem;

    letter-spacing: 0.08em;

    color: var(--accent);

    transition: 0.30s;

}


.carte:hover .decouvrir {

    letter-spacing: 0.15em;

}


/* ===============================Partie 9 =============================*/



/* ============================================================
   RUBRIQUES
   ============================================================ */


.rubriques {

    display: grid;

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

    gap: 35px;

    margin-top: 40px;

    margin-bottom: 80px;

}


/* ============================================================
   VERSION TABLETTE
   ============================================================ */

@media (max-width: 1100px) {

    .rubriques {

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

    }

}


/* ============================================================
   VERSION SMARTPHONE
   ============================================================ */

@media (max-width: 700px) {

    .rubriques {

        grid-template-columns: 1fr;

    }

}



/* ============================================================
   EFFET PORTE
   ============================================================ */

.carte {

    cursor: pointer;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;

}

.carte:hover {

    transform: scale(1.02);

    box-shadow: 0 15px 35px rgba(0,0,0,0.20);

}

.carte img {

    transition:
        transform 0.8s ease;

}

.carte:hover img {

    transform: scale(1.08);

}



/* =======================================================
   PORTE PROF-MPK
======================================================= */

.carte {

    position: relative;

    overflow: hidden;

    cursor: pointer;

}

/* image */

.carte img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;

}

/* léger zoom */

.carte:hover img {

    transform: scale(1.04);

}

/* texte Entrer */

.entrer {

    display: inline-block;

    margin-top: 15px;

    opacity: 0;

    transition:
        opacity 0.6s ease;

}

.carte:hover .entrer {

    opacity: 1;

}






/* ===========================
   PORTE BOIS & ATELIER
   =========================== */




.carte {

    position: relative;
    overflow: hidden;

    border-radius: 12px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}

.carte img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.carte::before {

    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,0.20);

    transition: background 0.35s ease;

    pointer-events: none;

}

.carte:hover {

    transform: translateY(-6px);

    box-shadow: 0 12px 30px rgba(0,0,0,.25);

}

.carte:hover img {

    transform: scale(1.05);

}

.carte:hover::before {

    background: rgba(0,0,0,0.08);

}



.carte .entrer {

    opacity: 0;
    transform: translateY(8px);

    transition: all .35s ease;

}

.carte:hover .entrer {

    opacity: 1;
    transform: translateY(0);

}


/* ============================================================
   PORTE BOIS & ATELIER
   ============================================================ */

.carte-principale {

    position: relative;

    overflow: hidden;

}

.carte-principale img {

    transition: transform 0.8s ease;

}

.carte-principale:hover img {

    transform: scale(1.06);

}

.carte-principale::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.15);

    transition: background 0.4s ease;

    pointer-events: none;

}

.carte-principale:hover::before {

    background: rgba(0,0,0,0.05);

}

.carte-principale .decouvrir {

    opacity: 0.7;

    transition: all 0.4s ease;

}

.carte-principale:hover .decouvrir {

    opacity: 1;

    letter-spacing: 0.12em;

}



/* ============================================================
   TEXTE D'ENTRÉE DE LA PORTE
   ============================================================ */

.entrer {

    text-align: center;

    color: #ffffff;

    font-size: 0.95rem;

    letter-spacing: 0.08em;

    opacity: 0;

    transform: translateY(10px);

    transition: all 0.4s ease;

}

.carte-principale:hover .entrer {

    opacity: 1;

    transform: translateY(0);

}


/* ============================================================
   TEXTE D'ENTRÉE
   ============================================================ */

.entrer {

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;

    margin-top: 8px;

    font-style: italic;

}

.carte-principale:hover .entrer {

    opacity: 1;

    transform: translateY(0);

}




.galerie {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 20px;

}

.galerie img {

    width: 100%;

    height: auto;

    border-radius: 10px;

}


footer {

    padding: 60px 40px;

}

.footer-contenu {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


.footer-contenu p {

    max-width: 800px;

    margin: 20px auto;

}











               /* ==               == */