:root {
    /* MENU */
    --menu-bg-color: #000000;
    --menu-text-color: #ffffff;
    --menu-hover-color: #28a745;
--menu-height: 100px;   ; 
    --menu-logo-height: 60px;
    --menu-font-family: Arial, sans-serif;
    --menu-item-padding: 1%;

    
    --menu-item-margin: 0.5%;
    --menu-item-hover-bg: #444444;
    --menu-flex-gap: 1%;

    /* HEADER */
    --header-text-color: #ffffff;
    --header-image-height: 40%;
    --header-overlay-bg: rgba(0,0,0,0.5);
    --header-overlay-padding: 2%;
    --header-overlay-border-radius: 1%;
    --header-overlay-text-color: #ffffff;
    --header-overlay-max-width: 80%;
    --header-overlay-text-align: center;

    /* FOOTER */
    --footer-bg-color: #000000;
    --footer-text-color: #ffffff;
    --footer-padding: 2%;
    --footer-div-padding: 1%;

    /* MODULES */
    --module-card-bg: #ffffff;
    --module-card-text: #000000;
    --module-card-border-radius: 1%;
    --module-card-padding: 2%;
    --module-wrapper-margin: 2%;
    --module-wrapper-padding: 2%;
    --module-flex-gap: 1%;
    --module-image-ratio: 40%;
    --module-image-max-width: 100%;
    --module-text-min-width: 20%;
    --gallery-border-radius: 1%;
    --gallery-spacing: 2%;




    
    /* MAIN */
    --main-bg-color: #ffffff;
    --main-text-color: #333333;
    --main-padding: 2%;

    /* COOKIES */
    --cookie-overlay-bg: rgba(0,0,0,0.5);
    --cookie-banner-bg: #ffffff;
    --cookie-banner-text-color: #000000;
    --cookie-banner-button-bg: #28a745;
    --cookie-banner-button-text: #ffffff;
    --cookie-banner-border-radius: 1%;
}

/* ==================== RESET ==================== */
body {
    padding-top: var(--menu-height);
    margin:0;
}

/* ==================== MENU ==================== */
.menu-bg {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--menu-bg-color);
    color: var(--menu-text-color);
    padding: var(--menu-item-padding);
    font-family: var(--menu-font-family);
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--menu-height);
    z-index: 999;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
      /* ✅ Liseré blond en bas */
    border-bottom: 4px solid #dddddd;
 


}
.menu-bg::-webkit-scrollbar { display: none; }

.menu-bg .logo img {
    height: var(--menu-logo-height);
    width: auto;
}

.menu-bg .menu-items {
    display: flex;
    gap: var(--menu-flex-gap);
    align-items: center;
    flex-wrap: nowrap;
}
.menu-bg .menu-items a {
    color: var(--menu-text-color);
    text-decoration: none;
    padding: var(--menu-item-padding);
    margin: var(--menu-item-margin);
    white-space: nowrap;
    transition:0.3s;
}
.menu-bg .menu-items a:hover {
    background: var(--menu-item-hover-bg);
    color: var(--menu-hover-color);
}

/* Menu burger */
.menu-toggle { display: none; cursor:pointer; font-size:1.5em; padding:0 1%; }







/* ==================== HEADER ==================== */
.site-header {
    position: relative;
    text-align: center;
    height: var(--header-image-height);
    overflow: hidden;
}
.site-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: var(--header-overlay-bg);
    color: var(--header-overlay-text-color);
    padding: var(--header-overlay-padding);
    border-radius: var(--header-overlay-border-radius);
    max-width: var(--header-overlay-max-width);
    width: auto;
    text-align: var(--header-overlay-text-align);
}

/* ==================== MODULES ==================== */
.module-flex { display:flex; flex-wrap:wrap; gap:var(--module-flex-gap); }
.module-card {
    background:var(--module-card-bg);
    color:var(--module-card-text);
    border-radius:var(--module-card-border-radius);
    padding:var(--module-card-padding);
    margin:var(--module-wrapper-margin);
    min-width:var(--module-text-min-width);
}
.module-image {
    flex:0 0 var(--module-image-ratio);
    max-width:var(--module-image-max-width);
    border-radius:var(--gallery-border-radius);
}
.module-image img {
    width:100%;
    border-radius:var(--gallery-border-radius);
    object-fit:cover;
}

/* ==================== FOOTER ==================== */
footer {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:var(--footer-padding);
    background:var(--footer-bg-color);
    color:var(--footer-text-color);
}
footer>div { flex:1 1 30%; min-width:200px; padding:var(--footer-div-padding); }

/* ==================== MAIN ==================== */
main.content {
    padding:var(--main-padding);
    color:var(--main-text-color);
    background:var(--main-bg-color);
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
    .menu-toggle { display: block; }

    .menu-bg .menu-items {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: var(--menu-height);
        left: 0;
        background: var(--menu-bg-color);
        z-index: 998;
    }

    .menu-bg .menu-items.show { display: flex !important; }

    .module-flex { flex-direction: column !important; }
    .module-image { width: 100%; }
    footer { flex-direction: column; }
    .site-header { height:300px; }
    .overlay-text { padding:4%; font-size:14px; }
}
/* ==================== COOKIE ==================== */
#cookie-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--cookie-overlay-bg); display:none; z-index:9998; }
#cookie-banner { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cookie-banner-bg); color:var(--cookie-banner-text-color); padding:2%; border-radius:var(--cookie-banner-border-radius); display:none; z-index:9999; text-align:center; }
#cookie-banner button { background:var(--cookie-banner-button-bg); color:var(--cookie-banner-button-text); padding:1%; border:none; border-radius:var(--cookie-banner-border-radius); cursor:pointer; }

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
    .menu-bg .menu-items { display:none; flex-direction:column; width:100%; }
    .module-flex { flex-direction:column !important; }
    .module-image { width:100%; }
    footer { flex-direction:column; }
    .site-header { height:300px; }
    .overlay-text { padding:4%; font-size:14px; }
}

body {
    padding-top: var(--menu-height); /* espace réservé pour le menu fixe */
    margin: 0;                        /* supprime les marges par défaut du navigateur */
}


.social-media a i {
    transition: transform 0.3s, color 0.3s;
}

.social-media a:hover i {
    color: #28a745; /* couleur au survol */
    transform: scale(1.2);
}


/* Centrer le texte verticalement et horizontalement */
.centered-container {
    display: flex;
    justify-content: center;  /* centre horizontalement */
    align-items: center;      /* centre verticalement */
    text-align: center;
}
.fancy-text {
    font-family: 'Playfair Display', serif; /* police élégante depuis Google Fonts */
    font-size: 2rem;        /* taille plus grande */
    font-weight: 700;       /* gras */
    color: #333;            /* couleur agréable */
    line-height: 1.5;
}

/* ==================== FORMULAIRE ==================== */
.right form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Checkbox RGPD */
.rgpd-checkbox {
    display: flex;
    align-items: flex-start; /* aligne le texte sur le haut de la checkbox */
    gap: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.rgpd-checkbox input[type="checkbox"] {
    margin-top: 3px; /* centre la checkbox verticalement */
    flex-shrink: 0;
}

.rgpd-checkbox span {
    display: inline-block;
}

/* Bouton Envoyer */
.btn-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #28a745;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-send:hover {
    background: #218838;
}

.btn-send i {
    transition: transform 0.3s ease;
}

.btn-send:hover i {
    transform: translateX(4px) rotate(10deg);
}