/*
Theme Name:   De la tendre Enéide
Theme URI:    https://www.delatendreeneide.fr 
Author:       Breizh Web Studio
Author URI:   https://www.breizhwebstudio.fr
Description:  Thème custom one page pour la chatterie La tendre Enéide.
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  breizhwebstudio-base
*/

/* ==========================================================================
Theme Styles
========================================================================== */

@font-face {
    font-family: 'passions_conflictregular';
    src:    url('assets/fonts/passionsconflict-regular-webfont.woff2') format('woff2'),
            url('assets/fonts/passionsconflict-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    display: flex;
    flex-direction: column; /* Aligner les enfants (header, content, footer) verticalement */
    width: 100%;
    align-items: stretch; /* Étirer les enfants sur toute la largeur par défaut */
    margin: 0;
    padding: 0;
    font-family: 'Georgia', serif;
    background-color: #f8f2e9;
    color: #333;
    overflow-x:hidden;
}

#hero {
    position: relative;
}

section#hero { width:100vw; height:100vh; overflow:hidden; position:relative; display:flex; }
section#chatterie { height: 100vh; background: #f1e8d6;margin:0; display:flex; position:relative; }
section#engagement { height: 100vh; background: #f9e1ba; display:flex; justify-content: center; position:relative; }
section#nos-chats { padding: 200px 20px 60px; background: #fefaf3; min-height: 100vh; display: block; position: relative; }
section#galerie { padding: 200px 20px 60px; background: #d8cfbc; min-height: 100vh; display: block; position: relative; }
section#contact { padding: 200px 20px 60px; background: #d8cdb5; min-height: 100vh; display: block; position: relative; }
section#content-legale { padding: 200px 20px 60px; background: #d8cdb5; min-height: 100vh; display: block; position: relative; box-sizing:border-box; }

#side-menu {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1000;
}

#side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#side-menu a {
    text-decoration: none;
    color: #333;
    font-family: 'Georgia', serif;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#side-menu a:hover,
#side-menu a.active {
    background-color: #bfae8b;
    color: #fff;
    font-weight: bold;
    border-left: 4px solid #7a674b;
}

#chatteriecontent {
    max-width:1200px;
    height:auto;
    margin:0 auto;
    display:flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

#chatteriecontent .logochatterie {
    width:100%;
    max-height:233px;
    height:auto;
    text-align:center;
}

#chatteriecontent .colonneschatterie {
    width:100%;
    display:flex;
}

#chatteriecontent .colonnechatterie {
    width:50%;
    height:auto;
    padding:20px;
    box-sizing:border-box;
}

h2.titreh2 {
    font-size:20px;
    font-weight:700;
    margin-bottom:4px;
}

span.italic {
    font-style:italic;
}

#engagementcontent {
    max-width:70%;
    height:auto;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

#engagementcontent .imgengagement {
    width:33%;
    height:auto;
    display:flex;
    align-items: flex-start;
}

#engagementcontent .imgengagement img {
    width:100%;
    height:auto;
}

#engagementcontent .txtengagement {
    width:67%;
    height:auto;
    padding:150px 20px 20px 20px;
    box-sizing:border-box;
}

.titre-groupe {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    font-family: 'Georgia', serif;
    color: #7a674b;
}

.chats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.chat-card {
    background: white;
    border: 1px solid #e2d9c8;
    border-radius: 10px;
    overflow: hidden;
    width: calc(33.333% - 20px);
    min-width: 280px;
    max-width: 340px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.chat-card:hover {
    transform: translateY(-5px);
}

.chat-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.chat-info {
    padding: 15px;
    font-family: 'Georgia', serif;
    color: #333;
}

.chat-nom {
    font-size: 20px;
    margin-bottom: 5px;
}

.chat-meta {
    font-size: 14px;
    color: #777;
    margin: 2px 0;
}

.chat-desc {
    margin-top: 10px;
    font-size: 15px;
    color: #444;
}

/* Classe pour rendre un bloc spécifique pleine largeur */
.full-width-block {
    width: 100%;
    max-width: none !important;
}

/* Si le bloc pleine largeur contient du contenu textuel, tu pourrais vouloir le centrer et limiter sa largeur */
.full-width-block > .wp-block-group__inner-container,
.full-width-block > .wp-block-columns {
    max-width: 1200px; /* Largeur maximale du contenu à l'intérieur du bloc pleine largeur */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.fullwidth-carousel {
    width: 100%;
    max-width: none;
}

/* Si tu veux limiter la largeur du contenu à l'intérieur du carrousel pleine largeur */
.fullwidth-carousel .swiper-wrapper {
    max-width: 1200px; /* Ou la largeur que tu souhaites */
    margin: 0 auto;
}

/* *************************************************
    Le CSS du slider appelé sur la page d'accueil 
************************************************** */

.full-width-section {
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    position: relative; /* Pour le positionnement absolu des fonds si nécessaire */
    /* Ajoute des marges ou des paddings verticaux selon tes besoins */
}

.full-width-section .container {
    max-width: 1200px; /* Limite la largeur du contenu interne */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-align: center;
    padding: 20px;
    box-sizing:border-box;
}

.slide-content {
    max-width: 70%; /* Limite la largeur du contenu dans la slide */
    margin: 0 auto; /* Centre le contenu horizontalement */
}

.slide-content h3 {
    font-size: 2em;
    margin-bottom: 15px;
}

.slide-content p {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

.slide-content ul {
    list-style: none;
    padding: 0;
}

.slide-content ul li {
    margin-bottom: 10px;
}

/* Styles de base pour le carrousel */
.swiper {
    width: 100%;
    height: auto; /* La hauteur sera définie inline */
    margin-bottom: 20px;
}

/* Styles pour le carrousel en pleine largeur */
.full-width-section.fullwidth-carousel-wrapper {
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    position: relative; /* Pour un éventuel positionnement absolu du fond */
    left: 0;
    right: 0;
    margin-left: calc(-50vw + 50%); /* Astuce pour centrer le bloc pleine largeur */
    margin-right: calc(-50vw + 50%); /* tout en évitant le scroll horizontal */
    margin-bottom: 0; /* Supprime la marge par défaut du carrousel pleine largeur */
}

.full-width-section.fullwidth-carousel-wrapper .swiper-wrapper {
    width: 100%;
}

.titrepage {
    position:absolute;
    width:60%;
    left:14%;
    top:2%;
}

section#hero .titrepage {
    top:4%;
}

h1 {
    font-family:'passions_conflictregular';
    margin:0;
    font-size:clamp(2rem, 9vw, 11rem);
    width:80%;
    height:auto;
    font-weight:lighter;
    border-bottom:1px solid #7a674b;
    max-height:193px;
    position:relative;
}

h1::after {
    content:"Chatterie";
    font-family: 'Times New Roman', Times, serif;
    font-size:clamp(0.8rem, 2vw, 2rem);
    position:absolute;
    bottom:-30%;
    left:1%;
    text-transform:uppercase;
}

.titrepage h2 {
    font-family:'passions_conflictregular';
    margin:0;
    font-size:clamp(2rem, 9vw, 11rem);
    width:80%;
    height:auto;
    font-weight:lighter;
    max-height:193px;
    position:relative;
}

section#nos-chats .container,
section#galerie .container,
section#contact .container,
section#content-legale .container {
    position:relative;
    width: 60%;
    margin: 0 auto;
    padding-top: 45px;
}

h2.titre-groupe {
    text-transform:uppercase;
    text-align:left;
    border-width: 1px;
    border-style: solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(51, 51, 51, 1), rgba(254, 250, 243, 1));
    border-top:0;
    border-left:0;
    border-right:0;
}

#bws-gallery-wrapper {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.bws-gallery-item {
    position: relative;
}
.bws-gallery-item img {
    border: 1px solid #ddd;
    display: block;
    max-width: 100px;
    height: auto;
}
.bws-gallery-item .remove-media {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
}

.gallery-grid {
    column-count: 7;
    column-gap: 20px;
    max-width: 100%;
    margin: 0 auto;
}

.gallery-grid a {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    break-inside: avoid;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.gdesc-inner {
    position: absolute;
    left: 0px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
}

.glightbox-clean h4.gslide-title{
    font-family: 'passions_conflictregular' !important;
    font-size: 5em;
    font-weight: 300;
    font-family: arial;
    color: #000;
    line-height: 0.9em;
    margin: 0px 0 20px 0;
    text-transform:capitalize;
}

.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc {
    color: white !important;
}

.bloccoordonnees {
    display:flex;
    width:100%;
    height:350px;
}

.infoscontact,
.mapcontact {
    padding:20px;
    box-sizing:border-box;
}

.infoscontact { width:40%; }
.mapcontact { width:60%; }

.infoscontact > div {
    width:100%;
    height:25px;
    line-height:25px;
    padding-left:35px;
    box-sizing:border-box;
    font-size: clamp(0.75rem, 1vw, 1.3rem);
    background-position: top left;
    background-repeat: no-repeat;
    margin-bottom:20px;
}

.infoscontact #mapcontactinfo { background-image: url("../../../wp-content/uploads/2025/07/map-contact.png"); }
.infoscontact #mailcontactinfo { background-image: url("../../../wp-content/uploads/2025/07/mail-contact.png"); }
.infoscontact #telcontactinfo { background-image: url("../../../wp-content/uploads/2025/07/phone-contact.png"); }

.infoscontact #mailcontactinfo a,
.infoscontact #mailcontactinfo a:link,
.infoscontact #mailcontactinfo a:visited,
.infoscontact #telcontactinfo a,
.infoscontact #telcontactinfo a:link,
.infoscontact #telcontactinfo a:visited { color:rgb(51, 51, 51); text-decoration:none; }

.infoscontact #mailcontactinfo a:hover,
.infoscontact #telcontactinfo a:hover { color:#a8917a; text-decoration:underline; }

gmp-map {
    height: 100%;
}

.formcontact {
    width:80%;
    min-height:200px;
    padding:30px;
    box-sizing:border-box;
    background-color:#a8917a;
    color:white;
    margin:40px auto 0 auto;
    border-radius:15px;
}

.forminline {
    display:flex;
    justify-content: space-evenly;
    margin-bottom:15px;
}

.formcontact textarea { 
    width:90%; 
    min-height:150px; 
    border-radius:5px; 
    margin:5px auto 25px; 
}

.formtext {
    display:flex;
    flex-direction: column;
}

.formtext label {
    padding-left:5%;
    box-sizing:border-box;
}

.formcontact button {
    position:relative;
    left:50%;
    transform: translate(-50%);
    padding: 10px 20px;
    background-color: #7a674b;
    color: white;
    border: none;
    cursor: pointer;
}

#contact-form-success {
    color:green;
    height:25px;
    width:100%;
    text-align:center;
    font-size:20px;
    margin:0 auto 15px auto;
    line-height:25px;
    display:none;
}

#contact-form-error {
    color:red;
    height:25px;
    width:100%;
    text-align:center;
    font-size:20px;
    margin:0 auto 15px auto;
    line-height:25px;
    display:none;
}

#colophon .site-info { text-align:center; color:#333; }
#colophon .site-info a,
#colophon .site-info a:link,
#colophon .site-info a:visited,
section#content-legale .container a,
section#content-legale .container a:link,
section#content-legale .container a:visited { color:#333; text-decoration:none; }
#colophon .site-info a:hover,
section#content-legale .container a:hover { text-decoration:underline; }

section#content-legale .titrepage h2 { width:100%; }
section#content-legale .colpolcon {
    columns: 2;
    column-fill:balance;
    width:100%;
    height:auto;
    column-gap: 20px;
}

#burger-menu {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1105;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background: none;
    border: none;
}
#burger-menu span {
    display: block;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ÉTAT ACTIF = CROIX */
.menu-open #burger-menu span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-open #burger-menu span:nth-child(2) {
    opacity: 0;
}
.menu-open #burger-menu span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* OVERLAY */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: none;
}

/* PANEL LATERAL GAUCHE */
#side-panel {
    position: fixed;
    top: 0;
    left: -290px;
    width: 250px;
    height: 100vh;
    background-color: #fff;
    z-index: 1101;
    padding: 40px 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease;
}
#side-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#side-panel li {
    margin-bottom: 20px;
}
#side-panel a {
    text-decoration: none;
    font-size: 18px;
    color: #333;
}

.menu-open #side-panel {
    left: 0;
}
.menu-open #overlay {
    display: block;
}

footer#colophon .site-info {
    background-color:black;
    text-align:center;
    padding:5px 0;
    color:#ece9e3;
}

footer#colophon .site-info a,
footer#colophon .site-info a:link,
footer#colophon .site-info a:visited { color:#ece9e3; text-decoration:none; }
footer#colophon .site-info a:hover { text-decoration:underline; }

.recaptcha-notice {
    font-size: 0.75rem;
    text-align: center;
    opacity: 0.6;
    padding: 20px 10px 10px;
    color: #4d4538;
    font-family: Georgia, serif;
}

.recaptcha-notice a {
    color: #7a674b;
    text-decoration: underline dotted;
    transition: color 0.3s ease;
}

.recaptcha-notice a:hover {
    color: #a5946c;
}

.grecaptcha-badge {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .titrepage {
        width: 80%;
        left: 10%;
        top: 2%;
    }

    h1 {
        text-align: center;
        font-size: clamp(1.5rem, 10vw, 6rem);
    }
}

/* ================================================  DESIGN TABLETTES  ================================================ */

/* ========================
    Tablette (768px à 1024px) au format portrait
======================== */
@media screen and (max-width: 1024px) and (orientation: portrait) {
    #side-menu { top:20%; transform:none; }
    section#hero img { transform: translate(-162px, 0px); width:calc(100% + 162px) !important; }
    section#hero .titrepage { z-index: 999; width: 70%; }
    section#hero .titrepage h1 { font-size: clamp(2rem, 13vw, 11rem); width:100%; }
    #chatteriecontent { padding-top: 100px; }
    #engagementcontent { flex-direction: column; }
    #engagementcontent .txtengagement { padding: 0px 20px 20px 20px; width: 90%; }
    #engagementcontent .imgengagement { width: 55%; }
    section#nos-chats .container { width: 65%; }
    .gallery-grid { column-count: 4; }
    .mapcontact { width:100%; height:350px; }
    .bloccoordonnees { flex-direction: column; }
    .infoscontact { width:100%; }
    .forminline { flex-direction: column; }
    .bloccoordonnees { height:auto; min-height:450px; }
}

/* ========================
    Tablette (768px à 1024px) au format paysage
======================== */
@media screen and (max-width: 1366px) and (orientation: landscape) {
    #engagementcontent { max-width: 95%; }
    section#nos-chats .container,
    section#galerie .container,
    section#contact .container { width: 90%; }
    .gallery-grid { column-count: 5; }
    section#chatterie { padding: 0px 20px 60px; min-height: 100vh; display: block; position: relative; height: auto; }
    #chatteriecontent { position:relative; width: 96%; margin: 0 auto; padding-top: 45px; }
    section#engagement { height: auto; }
    section#nos-chats { padding: 80px 20px 60px; }
    .titre-groupe { font-size: 1.3rem; margin-bottom: 10px; }
    section#nos-chats .container { width:85%; padding-top: 5px; }
    .chats-grid { gap: 15px; }
    .titrepage { top:5px; }
    .glightbox-container .gslide-title { line-height: 0em; font-size: 3em !important; }
    .gdesc-open .gslide-media { opacity: 1; }
    .forminline {flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; align-content: space-around; min-height: 70px; }
    .forminline input { max-width:170px; }
    .forminline input, .forminline label { display:inline-block; }
}

/* ================================================  DESIGN MOBILES  ================================================ */

/* ========================
    Mobile (max 767px) au format portrait
======================== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    .titrepage { left: 70px; }
    h1::after { bottom: -44%; }
    section#hero .titrepage { top:4px; }
    #chatteriecontent .logochatterie img { width:100%; }
    section#hero img { transform: translate(-404px, 0px); width:calc(100% + 404px) !important; }
    #chatteriecontent .colonneschatterie { flex-direction: column; align-items: center; }
    section#chatterie { padding: 0px 20px 60px; min-height: 100vh; display: block; position: relative; }
    #chatteriecontent { position:relative; width: 96%; margin: 0 auto; padding-top: 45px; }
    #chatteriecontent .colonnechatterie { width: 100%; padding: 0px; }
    #engagementcontent { flex-wrap: nowrap; max-width: 96%; justify-content: flex-start; }
    section#engagement { padding-top: 90px; }
    #engagementcontent .txtengagement { padding: 0px 20px 20px 20px; width: 100%; }
    .titrepage h2 { font-size: clamp(2rem, 16vw, 11rem); width: 95%; }
    section#nos-chats,
    section#galerie,
    section#contact,
    section#content-legale { padding: 90px 20px 20px 60px; }
    .glightbox-mobile .glightbox-container .gslide-title { line-height: 0em; font-size: 3em !important; }
    .glightbox-mobile .glightbox-container .gslide-description { padding-bottom:195px !important; left:1%; width:96% !important;  }
    .gdesc-open .gslide-media { opacity: 1; }
    section#galerie .container { width:100%; }
    .gallery-grid { column-count: 2; column-gap: 10px; }
    .gallery-grid a { margin-bottom: 10px; }
    section#contact .container,
    section#content-legale .container { width:100%; }
    section#content-legale .colpolcon { columns: 1; }
    section#content-legale .titrepage h2 { line-height: 40px; }
}

/* ========================
    Mobile (max 767px) au format paysage
======================== */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .forminline { flex-direction: column; }
    section#chatterie { padding: 30px 20px 60px; min-height: 100vh; display: block; position: relative; height:auto; }
    #chatteriecontent .colonneschatterie { flex-direction: column; align-items: center; }
    #chatteriecontent .colonnechatterie { width:94%; }
    #engagementcontent .txtengagement { padding: 100px 20px 20px 20px; }
    section#engagement { height: auto; }
    .titrepage { top:0%; }
    section#nos-chats { padding: 57px 20px 60px; }
    .titre-groupe { font-size: 1.3rem; margin-bottom: 10px; }
    section#nos-chats .container { width:85%; padding-top: 5px; }
    .chats-grid { gap: 15px; }
    .glightbox-mobile .glightbox-container .gslide-title { line-height: 0em; font-size: 3em !important; }
    section#galerie { padding: 50px 20px 60px; }
    .gallery-grid { column-count: 4; column-gap: 10px; }
    .gallery-grid a { margin-bottom: 10px; }
    section#contact { padding: 20px 20px 60px; }
    .glightbox-mobile .glightbox-container .gslide-description { padding-bottom:195px !important; left:1%; width:96% !important;  }
    .gdesc-open .gslide-media { opacity: 1 !important; }
    section#content-legale { padding: 30px 20px 60px }
    section#content-legale .container { width:90%; padding-left:10%; }
    section#content-legale .colpolcon { columns: 1; }
    section#content-legale .titrepage h2 { line-height: 40px; }
    #side-panel ul li { margin-bottom: 10px; }
}

/* ================================================  TOUT SAUF DESKTOP  ================================================ */
@media screen and (max-width: 1366px) {
    #burger-menu { display: flex; }
    #side-menu { display: none; }
    #side-panel { padding: 60px 20px; }
    section#engagement { height: 100vh; }
    section#nos-chats { padding: 140px 20px 60px; }
}