@font-face {
    font-family: 'bebas';
    src: url('BebasNeue.woff') format('woff'),
         url('BebasNeue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 14px Arial, Helvetica, sans-serif; color: #333; background: #f5f5f5; }
a { color: #3a6479; text-decoration: none; transition: color 0.15s ease-out; }
a:hover { color: #fc627b; text-decoration: underline; }
img { max-width: 100%; height: auto; }

.wrapper { width: 980px; margin: auto; }
.rose { color: #fc627b; }

/* Header */
#header { height: 202px; display: flex; align-items: stretch; }
#headerPink { width: 235px; min-width: 235px; height: 202px; background-color: #fc627b; }
#header a { display: block; }
#header > img, .header-tagline { display: block; }

/* Nav */
nav { background-color: #53555e; text-align: right; margin: 10px 0; padding: 0 10px; }
nav a { color: #fff; text-decoration: none; font: 1.7em/1 bebas, 'Bebas Neue', Impact, sans-serif; font-weight: bold; text-transform: uppercase; display: inline-block; margin: 20px 15px; transition: color 0.15s ease-out; }
nav a:hover, nav a.active { color: #2fd6d1; text-decoration: none; }
nav .hamburger { display: none; }

/* Mascot */
.mascot { display: inline-block; vertical-align: top; margin: -240px 0 0 -65px; width: 349px; position: relative; z-index: 10; }
.mascot img { width: 349px; }

/* Content layout */
.home-layout, .page-layout { display: flex; align-items: flex-start; }
#contentWrapper { display: inline-block; width: 692px; vertical-align: top; }

/* Slider */
#sliderWrapper { background-color: #cbcbcb; padding: 20px 15px; margin-bottom: 15px; border-radius: 4px; }
#sliderWrapper h1 { font: 55px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #53555e; margin-bottom: 10px; }
#slideshow { position: relative; padding: 0 50px; overflow: hidden; }
.slides-container { display: flex; transition: transform 0.5s ease; }
.slide { min-width: 100%; padding: 15px 10px; }
.slide h3 { font: 28px/1.2 bebas, 'Bebas Neue', Impact, sans-serif; color: #3a6479; margin-bottom: 10px; }
.slide .subText { font: 13px Arial, Helvetica, sans-serif; line-height: 1.5; min-height: 50px; }
.slide-prev, .slide-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(58,100,121,0.7); color: #fff; border: none; width: 40px; height: 40px; cursor: pointer; font-size: 20px; border-radius: 50%; transition: background 0.2s; }
.slide-prev:hover, .slide-next:hover { background: rgba(58,100,121,1); }
.slide-prev { left: 0; }
.slide-next { right: 0; }

/* Home bottom */
.home-bottom { display: flex; gap: 12px; margin-top: 0; }

/* Facebook */
#homeFacebook { background-color: #3a6479; padding: 15px 10px; width: 340px; text-align: center; border-radius: 4px; flex-shrink: 0; }
#homeFacebook h2 { font: 34px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #fff; text-align: right; margin-bottom: 10px; }
.fb-placeholder { background: #fff; padding: 20px; margin: 15px auto; border-radius: 4px; }
.fb-placeholder p { color: #666; margin-bottom: 10px; }
.fb-link { display: inline-flex; align-items: center; gap: 8px; color: #1877f2; font-weight: bold; font-size: 14px; }
.fb-link:hover { color: #145cb3; text-decoration: none; }
.fb-link svg { fill: #1877f2; }

/* Hours */
#heureOuvert { background-color: #fc627b; padding: 15px 10px 30px 20px; width: 340px; border-radius: 4px; flex-shrink: 0; }
#heureOuvert h2 { text-align: right; font: 34px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #fff; margin-bottom: 10px; }
#heureOuvert ul { list-style: none; }
#heureOuvert ul li { margin-top: 12px; font: 18px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #fff; display: flex; justify-content: space-between; padding-right: 10px; }
#heureOuvert ul li span { text-align: right; }

/* Page headings */
#contentWrapper h1 { font: 50px/1.1 bebas, 'Bebas Neue', Impact, sans-serif; color: #3a6479; margin-bottom: 15px; }
#contentWrapper h2 { font: 38px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #fff; }
#contentWrapper h3 { font: 28px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #3a6479; }
#contentWrapper article p { font: 14px/1.5 Arial, Helvetica, sans-serif; }

/* Boutique categories */
.catBout { background-color: #cbcbcb; margin: 20px 0; padding: 20px; border-radius: 4px; }
.catBout h3 { margin-bottom: 10px; }
.catBout .boutCont { display: inline-block; width: 33%; vertical-align: top; padding: 0 10px; margin: 5px 0; }
.catBout .boutCont a { color: #191c26; font-weight: bold; font-size: 14px; }
.catBout .boutCont a:hover { color: #3a6479; }

/* Boutique detail */
.boutique-detail { background: #cbcbcb; padding: 30px 20px; border-radius: 4px; }
.boutique-detail h1 { text-align: center; }
.boutique-detail .boutCat { text-align: center; color: #666; font-style: italic; margin-bottom: 20px; }
.boutique-detail .boutImg { text-align: center; margin: 20px 0; }
.boutique-detail .boutImg img { max-width: 500px; max-height: 333px; border-radius: 4px; }
.boutique-detail .boutTel, .boutique-detail .boutSite { margin: 10px 15px; font-size: 14px; }
.boutique-detail .boutTel strong, .boutique-detail .boutSite strong { color: #3a6479; }
.boutique-detail .boutBack { margin-top: 25px; }
.boutique-detail .boutBack a { font-weight: bold; color: #53555e; }

/* Espaces à louer */
.aLouer { background: #cbcbcb; padding: 20px 15px; margin: 25px 0; border-radius: 4px; }
.aLouer h2 { font: 40px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #3a6479; margin-bottom: 10px; }
.aLouer h3 { margin: 5px 0 10px; }
.aLouer .desc { margin: 15px 10px; }
.aLouer .desc p { margin: 8px 0; line-height: 1.5; }
.aLouer .rentContact { margin: 10px 5px; padding-top: 10px; border-top: 2px solid #b0b0b0; }
.aLouer .rentContact h3 { margin-bottom: 8px; }
.aLouer .rentContact p { margin: 5px 0; }

/* Plan */
#planFaubourg { margin-bottom: 20px; }
#planFaubourg img { width: 100%; border-radius: 4px; }

/* Contact page */
#contactWrap { width: 100%; }
.map-large { margin-bottom: 20px; }
.map-large iframe { width: 100%; border-radius: 4px; }
.contact-info-block { display: flex; gap: 20px; flex-wrap: wrap; }
.contact-info-block #heureOuvert { flex: 1; min-width: 280px; }
.contact-details { background: #3a6479; padding: 20px; border-radius: 4px; flex: 1; min-width: 280px; }
.contact-details h2 { font: 34px/1 bebas, 'Bebas Neue', Impact, sans-serif; color: #fff; margin-bottom: 15px; }
.contact-details p { color: #fff; margin: 8px 0; font-size: 14px; line-height: 1.5; }
.contact-details strong { color: #2fd6d1; }
.contact-details a { color: #fff; text-decoration: underline; }

/* Footer */
footer { margin-top: 20px; padding: 20px 0; display: flex; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
.footer-logo { display: block; flex-shrink: 0; }
.footer-logo img { border-radius: 4px; }
#carte_footer { flex-shrink: 0; }
#carte_footer iframe { border-radius: 4px; }
#contact-footer { font-family: bebas, 'Bebas Neue', Impact, sans-serif; color: #3a6479; text-align: right; margin-left: auto; }
#contact-footer h3 { font-size: 50px; color: #191c26; margin-bottom: 15px; }
#contact-footer p { font-size: 22px; line-height: 1.4; }
#contact-footer a { color: #3a6479; text-decoration: none; }
#contact-footer a:hover { color: #fc627b; }

/* Hamburger */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 10px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.hamburger span { display: block; width: 28px; height: 3px; background: #fff; margin: 5px 0; transition: 0.3s; border-radius: 2px; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Responsive */
@media (max-width: 1000px) {
    .wrapper { width: 100%; padding: 0 15px; }
    #header { height: auto; flex-wrap: wrap; justify-content: center; }
    #headerPink { display: none; }
    #header a { text-align: center; }
    .header-tagline { display: none !important; }

    nav { text-align: center; position: relative; padding: 15px 10px; }
    nav .hamburger { display: block; }
    nav a { display: none; font-size: 1.3em; margin: 10px; }
    nav.open a { display: block; }

    .mascot { display: none; }
    .home-layout, .page-layout { display: block; }
    #contentWrapper { width: 100%; display: block; }

    .home-bottom { flex-direction: column; }
    #homeFacebook, #heureOuvert { width: 100%; }

    .catBout .boutCont { width: 50%; }

    .contact-info-block { flex-direction: column; }

    footer { justify-content: center; text-align: center; }
    #contact-footer { text-align: center; margin-left: 0; width: 100%; }
}

@media (max-width: 600px) {
    #sliderWrapper h1 { font-size: 36px; }
    #contentWrapper h1 { font-size: 36px; }
    .catBout .boutCont { width: 100%; }
    .aLouer h2 { font-size: 30px; }
    #contact-footer h3 { font-size: 36px; }
    #contact-footer p { font-size: 18px; }
    #slideshow { padding: 0 35px; }
    .slide-prev, .slide-next { width: 30px; height: 30px; font-size: 16px; }
}