@charset "ISO-8859-1";


/* =========================
   STYLE GENERAL
========================= */


* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    background:
    linear-gradient(
        rgba(245,235,210,.88),
        rgba(245,235,210,.88)
    ),
    url("Fond_choco.jpg");

    background-attachment:fixed;

    color:#3b2415;

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

}




/* =========================
   EN-TETE
========================= */


.entete {

    max-width:1100px;

    margin:35px auto 20px;

    text-align:center;

    background:
    #f8f0df;

    padding:35px;

    border:

    1px solid #c6a45c;

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

}



.banniere {

    max-width:393px;

    width:100%;

}



.entete h1 {

    margin-top:30px;

    font-size:34px;

    letter-spacing:3px;

    font-weight:normal;

    color:#5a3218;

}



.entete p {

    font-size:18px;

    color:#8b6330;

    font-style:italic;

}




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


.navigation {

    position:sticky;

    top:0;

    z-index:10;

    text-align:center;

    padding:15px;

    background:

    rgba(70,35,12,.95);

}



.navigation a {

    color:#f7e7bf;

    text-decoration:none;

    margin:0 12px;

    font-size:16px;

}



.navigation a:hover {

    color:#fff;

    text-decoration:underline;

}





/* =========================
   LIVRE CENTRAL
========================= */


.ouvrage {

    max-width:1200px;

    margin:35px auto;

    background:#faf4e6;

    padding:45px;

    box-shadow:

    0 0 35px rgba(0,0,0,.45);

    border:

    1px solid #d0ad63;

}





/* =========================
   TITRES DE PERIODES
========================= */


section {

    margin-bottom:70px;

}



section h2 {

    text-align:center;

    font-size:28px;

    font-weight:normal;

    color:#6b3818;

    margin-bottom:40px;

}



section h2:after {

    content:"";

    display:block;

    width:150px;

    height:2px;

    background:#bd9650;

    margin:15px auto;

}





/* =========================
   PREMIER AGENDA
========================= */


.premier-agenda {

    text-align:center;

}



.premier-agenda img {

    width:250px;

    background:white;

    padding:12px;

    border:

    1px solid #c8b07a;

    box-shadow:

    8px 12px 20px rgba(0,0,0,.35);

}





/* =========================
   GALERIE
========================= */


.galerie {

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(170px,1fr));

    gap:45px;

    align-items:start;

}




/* =========================
   CARTE AGENDA
========================= */


article {

    text-align:center;

    background:

    linear-gradient(
        135deg,
        #fffdf7,
        #f2e6ce
    );

    padding:18px;

    border:

    1px solid #d4bd88;

    box-shadow:

    0 12px 22px rgba(0,0,0,.25);

    transition:

    transform .35s,
    box-shadow .35s;

}




article:nth-child(even) {

    transform:rotate(-1deg);

}



article:nth-child(odd) {

    transform:rotate(1deg);

}



article:hover {

    transform:

    translateY(-12px)
    rotate(0deg)
    scale(1.04);


    box-shadow:

    0 20px 35px rgba(0,0,0,.45);

}





article img {

    width:150px;

    height:250px;

    object-fit:contain;

    background:white;

}



article img.large {

    width:250px;

    height:157px;

}




article h3 {

    margin:15px 0 0;

    font-size:20px;

    color:#5b3016;

    font-weight:normal;

}





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


footer {

    text-align:center;

    color:white;

    padding:35px;

    font-style:italic;

}



footer img {

    width:85px;

    opacity:.9;

}




/* =========================
   MOBILE
========================= */


@media(max-width:700px){


.entete {

    margin:10px;

    padding:20px;

}


.entete h1 {

    font-size:23px;

}



.navigation a {

    display:inline-block;

    margin:5px;

}



.ouvrage {

    margin:10px;

    padding:20px;

}



.galerie {

    grid-template-columns:

    repeat(2,1fr);

    gap:20px;

}



article img {

    width:100%;

    height:auto;

}


}