:root {
  --brown: #caba9c;
}
.static-label {
    position: static !important;
}
.radio-container {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.label-element {
    display: flex;
    align-items: center;
    position: relative;
}

.label-element input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.label-element label {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    margin-left: 8px;
    position: relative;
    padding-left: 18px;
}

.label-element label::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #938770;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.label-element input[type="radio"]:checked + label::before {
    background-color: #938770;
}

.label-element input[type="radio"]:checked + label::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}
.map-container {
    position: relative;
}

.spot {ccursor: pointer;}
.box {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -30px; /* Ajuste la position verticale */
    left: 20px; /* Ajuste la position horizontale */
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    list-style: none;
    width: 175px;
    font-size: 13px;
    transition:  0.3s all ease;
}

.spot:hover .box , .spot .box.show {
    opacity: 1;
    display: block;
    left: 30px; 
    transition:  0.5s all ease;
}

.line-container {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.line-container line {
    stroke: black;
    stroke-width: 1;
}
.help-block.with-errors li {
    color: red;
    font-size: 11px;
}
.spot {
    position: absolute;
    width: 12px;
    height: 25px;
    background: url(images/pin.png) no-repeat center;
    background-size: contain;
    border-radius: 30px;
    cursor:pointer;
    margin-top: -12px;
    margin-left: -5px;
}
#spot1{
    top: 67%;
    left: 39%;  
}

#spot1b{
    top: 71%;
    left: 44%;
}
#spot2{
    top: 67%;
    left: 55%;
}
#spot3{
    top: 59%;
    left: 56%;
}
#spot4{
    top: 54%;
    left: 62%;
}
#spot5{
    top: 46%;
    left: 56%;
}
#spot6{
    top: 38%;
    left: 50%;
}
#spot7{
    top: 37%;
    left: 45%;
}
#spot8{
    top: 41%;
    left: 39%;
}
#spot9{
    top: 50%;
    left: 38%;
}
#spot10{
    top: 51%;
    left: 44%;
}
#spot11{
    top: 53%;
    left: 50%;
}
#spot12{
    top: 51%;
    left: 28%;
}
#spot13{
    top: 42%;
    left: 27%;
}
#spot14{
    top: 30%;
    left: 30%;
}
#spot15{
    top: 25%;
    left: 36%;
}
#spot16{
    top: 21%;
    left: 41%;
}
#spot16b {
    top: 19%;
    left: 47%;
}
#spot17{
    top: 20%;
    left: 52%;
}
#spot18{
    top: 24%;
    left: 57%;
}
#spot19{
    top: 29%;
    left: 62%;
}
#spot20{
    top: 37%;
    left: 65%;
}
#spot21{
    top: 43%;
    left: 69%;
}
#spot22{
    top: 50%;
    left: 73%; 
}
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: black;
    color: white;
    height: 50px;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.top-item {
    margin-left: 20px;
    font-size: 14px;
}
.top-item i {
    margin-right: 8px;
}
.top-item a {
    color: white !important;
    text-decoration:none;
}
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 100%;
    width: 1650px;
}
.boxed .container {
  width: 1200px;
}
.contact-btn {
    background-color: var(--brown);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.contact-btn:hover {
    background-color: #4f4025;
    color: black;
}

.banner {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    overflow: hidden;
    margin-top: 50px;
}

.banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; /* Ajustez selon la visibilité désirée */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    z-index:2;
    pointer-events: none;
}

.banner h2, .banner img, .banner p {
    position: relative;
    z-index: 2;
}
.banner h2 {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}
.banner h2, .banner img {
    margin: 0 !important;
}
body:not(.home) .banner .col-family img {
    height: 50vh;
}

.banner .exceptionnel {
position:absolute;
bottom:0;
    left: -15%;
}
.en .banner .exceptionnel {
    position: relative;
    bottom: 0;
    left: -40px;
}
.banner img.top-logo {
    position: absolute;
    right: -15%;
}
.banner img.top-logo + div {
    margin-top:200px;
    position: relative;
    padding-bottom:85px;
}
.en .banner img.top-logo + div {
    padding-bottom: 0px;
}
.banner .text-content{
    position: relative;
    z-index: 5;
}
.text-beige {
    color:  var(--brown);
}

.beige-hr {
    width: 50%;
    border-top: 2px solid  var(--brown);
    margin-left: 0;
}

.text-left {
    text-align: left;
}

.form-container {
    background-color: #f2f7d9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}
.form-container h3 {
    color: #938770;
    font-size: 23px;
}
.form-container h3 strong {
    text-transform: uppercase;
    font-size: 20px;
}
.form-control {
    transition: all 0.3s ease;
    background: transparent;
    border: none;
    font-size: 13px;
    border-bottom: 1px solid black;
    border-radius: 0;
}
.form-control:focus + label {
    transform: translateY(-15px);
    font-size: 80%;
}
.form-group{
    position: relative;
}
.form-group label {
    color: black;
    font-size: 13px;
    position: absolute;
    top: 6px;
}
.submit-btn {
    background-color: #d6c6a8;
    color: white;
    transition: background-color 0.3s;
    width: 100%;
}

.btn.submit-btn {
    text-transform: uppercase;
    font-size: 12px;
    background:  #978a71;
    border: none !important;
    white-space: pre-wrap;
}
.submit-btn:hover {
    background-color: #c4b1a0;
}

/* Section après la bannière */
.after-banner {
    padding: 50px 0;
    overflow: hidden;
}

.full-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.art-svg {
    transform: translateX(-45%);
    margin-top: 20px;
    width: 500px;
    max-width: 75%;
}
.en .art-svg {
    max-width: 100%;
}
.beige-hr-small {
    width: 40px;
    height: 2px;
    border: none;
    background-color:  var(--brown);
    margin: 20px 0;
}

.ghost-btn {
    background-color: transparent;
    border: 2px solid black;
    color: black;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 20px;
}

.ghost-btn:hover {
    background-color: black;
    color: white;
}

.btn-light {
	border-color: #fff;
	color: #fff;
}

/* Nouvelle section avec image centrée */
.image-centered-section {
   position: relative;
    margin-top: -275px;
    padding: 0;
}

.centered-image {
    max-width: 100%;
    height: auto;
    transform: translateX(130px);
}

/* Ajustement de padding pour la deuxième colonne de la section précédente */
.after-banner .col-md-6.bg-white {
    padding-bottom: 15% !important;
    padding-right: 20vw !important;
}

/* Section des 4 colonnes */
.four-columns-section {
   padding: 0px 5%;
   position: relative;
   z-index:3;
}
.column-item  span.num {
    position: absolute;
    top: 30px;
    right: 35px;
    font-size: 40px;
    font-weight: 700;
    color: white;
}
.column-item {
    min-height: 445px;
    padding: 160px 40px 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bloc-title {
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.bloc-subtitle {    
    font-size: 23px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
}
.four-columns-section p.text-muted {
    font-size: 14px;
}
.text-white {
    color: white;
}

.text-dark {
    color: #1e1e1e;
}

.text-muted {
    color: #5a5a5a;
}

/* Backgrounds pour chaque colonne */
.bg-dark-grey {
    background-color: #262626;
}

.bg-light-beige {
    background-color: #e6e1d5;
}

.bg-grey {
    background-color: #d4cec1;
}

.bg-beige {
    background-color: #ccbea5;
}

/* Section avec background image */
.section-background {
    background: url(images/tree-bg.jpg) no-repeat center 100%;
    background-size: inherit;
    padding: 160px 30px 375px 30px;
    margin-top: -7%;
    position: relative;
    z-index: 1;
    box-shadow: 2px 50px 30px 10px #00000059;
}

/* Première colonne */
.content-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* hr blanc */
.white-hr {
    width: 50px;
    height: 2px;
    background-color: white;
    border: none;
    margin: 20px 0;
}

/* Texte blanc */
.text-white {
    color: white;
}

/* Bouton Ghost */
.ghost-btn.brown {
    background: transparent;
    border: 1px solid white;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s;
}

.ghost-btn.brown:hover {
    background: rgba(255, 255, 255, 0.1);
}
.section-background .btn.ghost-btn {
    background: #817764;
    font-size: 13px;    
    margin: 0;
}
/* Image arrondie */
.rounded-img {
    border-radius: 60px;
    border: 1px solid white;
}

/* Deuxième colonne - Image calée en bas à droite */
.img-column {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.col-decal {
        transform: translateY(45px);
}
.col-decal p {
    font-size: 13px;
}
.col-decal .img-svg{
    margin-bottom: 20px;
}
.en .col-decal .img-svg {
    margin-bottom: 20px;
    left: -35px;
    position: relative;
}
.darkgrey-section .rounded-img {
    position: absolute;
    top:-80px;
    left:0;
    transform: translateY(-100%);
    max-width: 90%;
}
.couple-img {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: -81px;
    transform: translateY(-100%);
    right: 0;
}
.darkgrey-section {
    background: #2a2a2a;
    margin-top: 100px;
    padding: 30px 30px 0px;
    position: relative;
    z-index: 2;
}

.darkgrey-section:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 25%;
    height: 30px;
    background: #2a2a2a;
}
.darkgrey-section p {
color : #8b8b8b;
font-size: 14px;
}
.darkgrey-section .container {
    padding-top: 80px;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-radius: 0 50px 0 0;
}
.darkgrey-section h3, .darkgrey-section h4 {
    color: white;
}
.darkgrey-section h3 {
    text-transform: uppercase;
    font-size: 12px;
    color: #e6e1d5;
}
.darkgrey-section .logo-3 {
    width: 75%;
}
.encadre-container h4 {
    display: inline-block;
    padding: 20px 30px;
    border: 1px solid #f2f7d9;
    color: #f2f7d9;
    margin-top: 15px;
    font-size: 33.5px;
}
.encadre-container {
    display: inline-block;
    position: relative;
}

.col-form .col-md-12.mt-5.mb-5 {
    position: relative;
    z-index: 3;
}

.encadre-container:before {
    content: "";
    width: 80%;
    height: 7px;
    background: #2a2a2a;
    position: absolute;
    top: 12px;
    left: 10%;
}
.encadre-container:after {
    content: "";
    width: 80%;
    height: 8px;
    background: #2a2a2a;
    position: absolute;
    bottom: 4px;
    left: 10%;
}
a.btn-black {
    background: black;
    padding: 10px 20px;
    margin: 15px 0;
    display: inline-block;
    border-radius: 10px;
    border: 1px solid #ffffff73;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none !important;
}
.darkgrey-section .col-md-7 {
    padding-right: 5%;
}
a.btn-black:hover{
    background: var(--brown);
}
/* Section de la galerie */
section#section-galerie {
    overflow: hidden;
}
#section-galerie .col-left {
    padding: 60px 30px;
    padding-left: 8%;
    display: flex;
    gap: 40px;
    background: #ccbea5;
    background: #ccbea5;
}
.logo-6-colinnes {
    padding-top: 90px;
}
.titre-4-collinnes p {
    color: white;
    font-size: 20px;
    margin: 0;
}
.titre-4-collinnes h2 {
    color: #2a2a2a;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 20px;
}
.encadre-container h4 + span {
    position: absolute;
    color: #f2f7d9;
    width: 100%;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    text-align: center;
}
hr.white-100 {
    border-color: white;
    width: 25%;
    margin-left: 0;
    margin-bottom: 30px;
    margin-top: 30px;
}
.gallery-section {
    padding: 0px;
}

/* Grille de la galerie */
.grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "item-1 item-2 item-3"
        "item-1 item-4 item-5"
        "item-6 item-6 item-6";
    width: 100%;
    height: 100%;
}

.gallery-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Assignation des images aux zones spécifiques */
.item-1 {
    grid-area: item-1;
}

.item-2 {
    grid-area: item-2;
}

.item-3 {
    grid-area: item-3;
}

.item-4 {
    grid-area: item-4;
}

.item-5 {
    grid-area: item-5;
}

.item-6 {
    grid-area: item-6;
}
/*footer 1: #e6e1d5 , 2 #d4cec1, 3 #ccbea5*/
footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
footer .foot-2 {
    background-color: #e6e1d5;
}
footer .foot-3 {
    background-color: #d4cec1;
}
footer .foot-4 {
    background-color: #ccbea5;
}
footer span.icon {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 7px 10px;
    border: 2px solid black;
    box-sizing: border-box;
}
footer .icon img {
    width: auto;
    max-width: 20px;
}
#map {
    height: 350px;
    width: 100%;
}
footer .item:not(.foot-1) {
    padding: 30% 30px 30px;
    position: relative;
}
footer p {
    font-size:14px;
}
.top-item h1 {
    font-size: 14px;
    margin: 0;
}
.top-item.first-item {
    margin-right: auto;
    margin-left: 0;
}
@media (max-width: 1536px) {
        .section-background {
        background: url(images/tree-bg.jpg) no-repeat center 100%;
        padding-bottom: 300px;
    }

    .after-banner .col-md-6.bg-white {
        padding-right: 10vw !important;
    }
    .encadre-container h4 {
        font-size: 23px;
    }
}

@media (max-width: 1400px) {
    .top-item, .top-item h1 {
        font-size: 13px;
    }
}

@media (min-width: 1281px) {
    .col-md-6.col-family {
        width: 45%;
        flex: 0 0 45%;
        max-width: 45%;
    }
    .col-md-6.col-form {
        width: 55%;
        flex: 0 0 55%;
        max-width: 55%;
    }
}
@media (max-width: 1280px) {
    .form-container h3 {
        color: #938770;
        font-size: 17px;
    }
    .banner .col-form {
        width: 100%;
        flex: 0 0 100%;
        max-width: 90%;
        margin: auto;
    }
    .banner .row .col-family {
        position: absolute;
        bottom: 0;
        left: 50px;
    }
    .image-centered-section {
        margin-top: -200px;
    }
    .section-background {
        padding-bottom: 200px;
    }
}
@media (max-width: 1024px) {
    .logo-6-colinnes {
        padding-top: 0;
    }
    .logo-6-colinnes img {
        width: 80px;
    }
    #section-galerie .col-left {
        padding-left: 40px;
    }
     .collines-col {
        display: flex;
        flex-direction: column;
     }
    .col-decal {
        transform: translateY(45px);
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .section-background {
        padding-bottom: 200px;
    }
    
}
@media (max-width: 992px) {
    .rounded-img {
        border-radius: 25px;
    }

    .col-decal {
        transform: translateY(45px);
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .column-item {
        min-height: 315px;
        padding: 100px 40px 30px 40px;
    }
    footer {
        grid-template-columns: 1fr 1fr;
    }
    .image-centered-section {
        margin-top: -110px;
    }
    .btn-container-left {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-start !important;
    }
    .section-background button.btn.ghost-btn + span {
        text-align: center;
    }
    .banner img.top-logo {
        position: absolute;
        right: -30px;
        width: 70%;
    }
    .banner img.top-logo + div {
        margin-top: 95px;
        position: relative;
        padding-bottom: 85px;
    }
    .mobile-hidden {
        display: none;
    }
}
/* Responsive design pour les petits écrans */
@media (max-width: 767px) {
    .after-banner .col-md-6.bg-white {
        padding: 20px !important;
    }    
    .h2, h2 {
        font-size: 1.5rem;
    }    
    .image-centered-section {
        margin-top: -30px;
    }
    .top-item {
        margin-left: 0;
        font-size: 12px;
    }
    .top-bar {
        padding: 0 15px 0;
        gap: 4px;
    }
    .titre-4-collinnes p {
        font-size: 17px;
    }
    .section-background button.btn.ghost-btn {
        font-size: 12px;
    }
    footer {
        grid-template-columns: 1fr;
    }
    .centered-image {
        transform: translateX(0);
    }
    .couple-img {
        display: none;
    }
    .art-svg {
        transform: translateX(0);
    }
    .grid-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "item-1 item-1"
            "item-2 item-3"
            "item-4 item-5"
            "item-6 item-6";
    }
}

@media (max-width: 480px) {
    .ghost-btn {
        font-size: 12px;
    }
    .darkgrey-section .col-md-7, .darkgrey-section .col-md-5 {
        padding-left: 0%;
    }
    .encadre-container h4 {
        font-size: 21px;
    }
    .col-decal span.ml-3.text-white {
        font-size: 14px;
        margin-left: 0 !important;
    }
    .banner .exceptionnel {
        width: 150%;
        max-width: none;
        left: -15px;
    }
    .en .col-decal .img-svg {
        left: -15px;
    }
    .en .banner .exceptionnel {
        width: 120%;
        max-width: none;
    }
    .section-background {
        padding: 50px 15px;
    }
    .grid-gallery {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "item-1"
            "item-2"
            "item-3"
            "item-4"
            "item-5"
            "item-6";
    }
}