/* =========================
RESET GLOBAL
========================= */

* {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0 0 40px 0;
overflow-x: visible;
background: #ffffff;
}

/* =========================
CONTAINER
========================= */
#container {
width: 1450px;
max-width: 1450px;
margin: 40px auto 0 auto;
background: #ffffff;
border: none;
box-shadow: 0 0 85px rgba(60,60,60,0.78);
padding-top: 0;
overflow: visible;
position: relative;
}

/* =========================
BANDEAUX
========================= */
.auto-style1 {
width: 100%;
height: 150px;
background: url('../images/masthead00BanSup1450x150pxEw4.jpg') no-repeat center;
background-size: cover;
border-bottom: 8px solid #666;
border-radius: 12px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

/* =========================
TITRE PRINCIPAL
========================= */
.titre-site {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
line-height: 1.05;
font-family: "Times New Roman", serif;
font-style: italic;
font-weight: 500;
font-size: 50px;
color: #f5c04a;
text-shadow:
1px 1px 0 #ffd66b,
3px 3px 0 rgba(0,0,0,0.85),
5px 5px 8px rgba(0,0,0,0.60);
animation: pulsar 2.5s infinite ease-in-out;
}

.titre-site span {
display: block;
margin-top: 2px;
font-size: 28px;
font-weight: 400;
}

/* =========================
BANDEAU ROUGE
========================= */
.auto-style2 {
width: 1000px;
height: 50px;
margin: 0 auto;
background: url('../images/masthead01CorRou1450x050px.jpg') no-repeat center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border-radius: 14px;
overflow: hidden;
}

.auto-style2 em {
font-size: 15px;
font-style: italic;
font-weight: bold;
color: #ffffff;
margin: 0;
}

.auto-style3 {
width: 900px;
margin: 0 auto;
text-align: center;
line-height: 1.6;
}

.auto-style3 a {
color: #000;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-decoration: none;
}

/* =========================
MENU
========================= */
.main-nav {
width: 100%;
min-height: 80px;
padding: 8px 0;
background: url('../images/SiteBandeauSousTitre%20(014)(1450x100)AneBle.jpg') no-repeat center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 6px 12px rgba(90,60,30,0.5);
border-radius: 12px;
overflow: hidden;
}

.nav-row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5px;
margin: 2px 0;
flex-wrap: wrap;
text-align: center;

}
.nav-row a {
text-decoration: none;
color: #e0c36a;
font-family: "Lucida Handwriting";
font-size: 17px;
font-weight: bold;
text-shadow:
1px 1px 0 rgba(255,235,160,0.75),
2px 2px 2px rgba(0,0,0,0.75),
4px 4px 10px rgba(0,0,0,0.65),
0 0 14px rgba(0,0,0,0.45),
6px 6px 14px rgba(0,0,0,0.35);
padding: 6px 2px;
background: transparent;
border: none;
box-shadow: none;
border-radius: 6px;
transition: all 0.2s ease;
}

/* =========================
SEPARATORS
========================= */
.sep-1 { height: 2px; }
.sep-2 { height: 8px; }
.sep-3 { height: 10px; }
.sep-menu { height: 20px; }
.sep-onglets { height: 8px; }

/* =========================
BG BAND
========================= */
.bg-band {
width: 100%;
background: transparent;
padding: 15px 0;
}

/* =========================
MENU 900
========================= */
.menu-900 {
width: 900px;
margin: 0 auto;
padding: 12px 0;
background: url('../images/FondSable1450x070px.jpg') no-repeat center;
background-size: 100% 100%;
box-shadow: 0 0 40px rgba(255,0,0,0.8);
border-radius: 16px;
overflow: hidden;
}

/* =========================
CONTENT
========================= */
#content {
width: 1280px;
margin-top: -5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
text-align: center;
border-radius: 0;
background: rgba(255,255,255,0.94);
padding: 25px;
box-shadow:
0 0 20px rgba(80,80,80,0.20),
0 0 45px rgba(0,0,0,0.14);
}

/* =========================
FOOTER
========================= */
.footer {
width: 100%;
height: 60px;
background: url('../images/04-SiteBandeauFooter1450x062.jpg') no-repeat center;
background-size: 100% 100%;
box-shadow:
0 0 18px rgba(80,80,80,0.22),
0 0 40px rgba(0,0,0,0.12);
border-radius: 12px;
overflow: visible;
position: relative;
}

/* =========================
IMAGES
========================= */
#content img {
max-width: 100%;
height: auto;
display: inline-block;
}

.image-centree {
display: block;
margin: 0 auto;
}

.bloc-image {
text-align: center;
}

/* =========================
OMBRE IMAGE
========================= */
.image-ombre {
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
border-radius: 6px;
}

/* =========================
GALERIE
========================= */
.galerie {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
text-align: center;
}

.galerie img {
display: inline-block;
width: 100px;
margin: 25px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* =========================
UTILES
========================= */
.center-block {
width: 650px;
margin: 20px auto;
text-align: center;
}

/* =========================
ANIMATION
========================= */
@keyframes pulsar {
0%, 25%, 50%, 75%, 100% {
text-shadow:
1px 1px 0 #ffd66b,
3px 3px 0 rgba(0,0,0,0.85),
5px 5px 8px rgba(0,0,0,0.60);
}

12%, 37%, 62%, 87% {
text-shadow:
1px 1px 0 #ffe08a,
3px 3px 0 rgba(0,0,0,0.85),
5px 5px 8px rgba(0,0,0,0.60),
0 0 18px #ffd66b,
0 0 35px #f5c04a,
0 0 60px rgba(255,200,80,0.7);
}

}
.photo-demo {
    display: block;
    margin: 30px auto;
    border-radius: 12px;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.3),
        0 0 25px rgba(150,150,150,0.4);
    padding: 6px;
    background: #f0f0f0;
}

#content img.photo-demo {
    box-shadow: 0 0 25px rgba(0,0,0,0.6) !important;
    border-radius: 12px !important;
    background: #f0f0f0 !important;
    padding: 6px !important;
}

.image-ombre {
    border-radius: 10px;

    box-shadow:
        0 10px 18px rgba(0,0,0,0.6),
        0 0 12px rgba(0,0,0,0.45);
}

.galerie {
    text-align: center;
}

.galerie a {
    display: inline-block;
    margin: 25px; /* = 50px entre images */
}

.footer {
    width: 100%;
    height: 60px;
    background:
    url('../images/04-SiteBandeauFooter1450x062.jpg')
    no-repeat center;
    background-size: 100% 100%;
    box-shadow:
        0 12px 25px rgba(120,120,120,0.45);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-copy {
    color: #ffffff;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    text-shadow:
        1px 1px 3px rgba(0,0,0,0.85);
}

.auto-style2::before {

    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 30%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0) 100%);

    transform: skewX(-20deg);
}

.compteur-site {
width: 100%;
text-align: center;
margin-bottom: 8px;
font-style: italic;
}

.cv-label {
font-size: 15px;
font-weight: bold;
color: #666666;
}

.cv-nombre {
font-size: 18px;
font-weight: bold;
color: #444444;
margin-left: 6px;
font-style: normal;
}

.sep {
margin: 0 0.1px;
font-weight: bold;
color: #e0c36a;
}

/* =========================
CONTENT + BANDEAUX
========================= */

.content-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 10px;
padding-top: 15px;
align-items: stretch;
}

/* =========================
BANDEAUX LATERAUX
========================= */

.side-left,
.side-right {
top: -70px;
width: 60px;
min-height: 810px;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 0 18px rgba(80,80,80,0.22),
0 0 40px rgba(0,0,0,0.12);
background-size: 60px auto;
background-repeat: repeat-y;
background-position: center top;
flex-shrink: 0;
position: relative;
margin-top: 65px;
margin-bottom: -12px;
}

.side-left {
background-image: url("../images/SiteBandeauGauche060x810px.jpg");
}
.side-right {
background-image: url("../images/SiteBandeauDroit060x810px.jpg");
}

/* =========================
ZONE LOGO / HEADER
========================= */

.header-zone {
height: 5px;
}

/* =========================
ZONES MEDIA
========================= */

.media-left,
.media-right {
width: 180px;
height: 140px;
border-radius: 22px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(255,255,255,0.55);
box-shadow:
0 8px 24px rgba(0,0,0,0.18),
inset 0 0 12px rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
margin-top: -5px;
flex-shrink: 0;

}

/* =========================
ZONES MEDIA FLOTTANTES
========================= */

.media-left,
.media-right {
position: absolute;
top: 343px;
width: 230px;
height: 125px;
border-radius: 22px;
background: rgba(255,255,255,0.58);
border: 1px solid rgba(255,255,255,0.55);
box-shadow:
0 10px 22px rgba(0,0,0,0.28),
0 0 25px rgba(0,0,0,0.12),
inset 0 0 14px rgba(255,255,255,0.20);
backdrop-filter: blur(4px);
z-index: 5;
}

.media-left {
left: 15px;
}
.media-right {
right: 15px;
}