html, body { margin:0;padding:0; width:100%;height:100%;
  background:#fff8c6;animation: fadeInFast 0.8s ease forwards; }

@keyframes fadeInFast {from { opacity: 0; }to { opacity: 1; }}

#ancre {display: block;position: relative;top: -10px;visibility: hidden;}
* {margin: 0;padding: 0;box-sizing: border-box;}
::selection{background: #f59e30 !important;color: #000c !important;}
::-moz-selection{background: #f59e30 !important;color: #000c !important;}
.spip-admin-bloc, .spip-admin-float{right:1% !important;}.spip-admin-boutons{margin:0;padding:.3em .3em !important;background:#666;border:0;font-weight:normal !important;border-radius:0 0 .2em .2em !important;opacity:.2 !important;
    font-size:12px; z-index:2000;}
ul.spip{list-style-type:square;}
ul.spip{list-style-type:none;padding-left:0;font-family:'wotfardlight';font-size:1.1em; !important;margin-left:0;padding-left:7%;}
.spip-puce::before {color: #000;content:"\2794";margin-right:5px;font-size:0.7em;}
ul.spip li::before{content:"\2794";margin-right:5px;}
strong,b,.b {font-weight: normal !important;}

main{ overflow-x: hidden;}

/* --------------------------------------------------
 TYPO /texte 
 ----------------------------------------------------- */
@font-face {
    font-family: 'cartograph_cfextra_light';
    src: url('../../squelettes/webfont/cartographcf-extralight-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/cartographcf-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'cartograph_cfbold';
    src: url('../../squelettes/webfont/cartographcf-bold-webfont.woff2') format('woff2'),
         url('../../squelettes/webfont/cartographcf-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* -------------------------------------------
Hyperliens 
---------------------------------------------- */
a, a:visited {color:#3e4819; text-decoration:none;  font-family: 'cartograph_cfbold';
  text-transform: uppercase; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } 
a:focus, a:hover, a:active { color:#000 !important; background: none !important;}
a.footer { color:#000000; font-size:12px; float:right; }  
a.footer:hover {color:tomato;}  
a.pdf { padding:10px 10px 10px 10px;color:#000000; text-align:center; text-decoration: none;  
border:1px solid #000000; font-family: 'wotfardbold'; text-transform:uppercase;}
mark {color:#f398b5; background:none;}

a:focus img, a:active img {
  -moz-transform: translateY(0px); -webkit-transform: translateY(0px);
  -o-transform: translateY(0px); -ms-transform: translate(0px); transform: translateY(0px);
}

a.arianne{ color:#71783c; }

.chapo p{ font-size:25px; }
p,.p, .editer-groupe  {margin-bottom: 1em; color:#3f4819; font-size:15px;  font-family: 'cartograph_cfextra_light'; }  
b { color: #00000; font-family: 'cartograph_cfbold';}
strong{ font-family: 'cartograph_cfbold'; color: #00000; }   
small, .small {font-size: 75%;}    
a:after, a:before, a small {font-size: 75%;opacity: 1;}

h1,.h1,h2,.h2,h4,.h4,h5,.h5,h6,.h6 {display: inline; margin: 0;padding: 0;font-size: 100%;color:#00000;}
h1,.h1 {text-transform: uppercase;font-size:2.5em;line-height: 1.2em;margin-bottom: 0; font-family: 'cartograph_cfbold';color:#71783c;}
h2,.h2 {font-size:2em;line-height: 1.2em;margin-bottom:0; font-family: 'cartograph_cfbold'; text-align:left;width: 100%; color:#3f4819; text-transform:uppercase;}
h3,.h3 {display: inline; margin: 0;padding: 0;font-size: 100%; font-size:1em;line-height: 1.3;
margin-bottom: 0; padding: 5px 0 5px 0;   font-family: 'cartograph_cfbold';text-align:left; text-transform:uppercase;}
h3.rubrique_menu {font-size:1.5em; font-family: 'wotfardbold';text-transform: uppercase; line-height:2; }
h4, .h4 { font-size: 20px;line-height: 1.4;margin-bottom: 1.9em;font-family: 'wotfardbold'; color:#000;}
h4.pdf { font-size: 15px;line-height: 1.2;margin-bottom: 0.2em;font-family: 'wotfardbold'; color:#000; text-align: center;}
hr {
    height: 1px;
    margin: 0;
    border: none;
    background-color: #71783c;  /* le trait devient un bloc coloré */
    min-width: 100%;
} 
input,textarea,select,button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color:#000; background:none;  width:auto;  text-transform:uppercase;}
#mc_embed_signup input .button {-webkit-appearance: none;color:#000;}
button{ width:100%;padding:4px 10px 4px 10px;background:#3e4819;border: none;color:#fff8c6; border-radius:30px;font-family: 'cartograph_cfbold'; margin-bottom:1px;}
button a, button a:visited {color:#fff8c6;font-size: 75%;}
button a:hover  {color:#fff8c6 !important;font-size: 75%;}

button:hover { background:#71783c; transition: opacity 0.3s ease;}
blockquote {min-height: 40px;background: none;border: none;padding-left: 3em;}
li {font-family: 'cartograph_cfbold'; color:#3f4819;}
footer {
    width: 100%;
    height: 240px;
    padding: 20px 20px 60px 20px;
    background: #3e4819;
    position: relative;
    display: block;

    background-image: url("../../IMG/footer.svg");
    background-repeat: no-repeat;
    background-size: cover; /* rempli hauteur + largeur, sans déformer */
    background-position: center center; /* toujours centré */
}


footer p  {color:#fff8c6 !important; font-size: 75%; font-family: 'cartograph_cfbold';}
footer a  {color:#fff8c6 !important; font-size: 75%; font-family: 'cartograph_cfextra_light';}
footer a:hover  {text-decoration: underline;color:#fff8c6 !important; font-family: 'cartograph_cfextra_light';}


.logo_footer{position:absolute; bottom:0;width:50%;right:0; height:auto; }
.logo_menu img{width:100%;}
.spip_footer { margin: 0; padding: 0;border: none;float: left;}
.spip_logo {float: left;margin: 0 0 0px 0px;padding: 0;border: none;}

/*-------------------------------------------- 
HEADER
---------------------------------------------- */
header {
  position: fixed; top: 0; left: 0; width: 100%; height: 60px;
  background: #fff8c6; display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px; 
  z-index: 1500; opacity: 0; transform: translateY(-30px);
  animation: fadeDownHeader 0.8s ease forwards; animation-delay: 0.2s;
}

.logo {position: absolute;left: 50%;transform: translateX(-50%);height: 50px;display: flex;align-items: center;z-index: 10000;}
.logo img {height: 50px;width: auto;}
.slogan { display: flex; justify-content: center; align-items: center;     
    gap: 1px; width: 100%; position: fixed; margin-top: 60px;z-index: 900;background:none;   
}

.slogan p { background:#3e4819;color: #fff8c6; line-height: 1em;font-size: 15px;
padding: 4px 10px;margin: 0;font-family: 'cartograph_cfbold'; text-transform: uppercase;opacity: 0;
transform: translateY(-20px);animation: fadeDown 0.8s ease forwards;}
.slogan p:nth-child(1) {animation-delay: 1s; /* "savoureux" */}
.slogan p:nth-child(2) {animation-delay: 1.5s; /* "optimiste" */}
.slogan p:nth-child(3) {animation-delay: 2s; /* "local" */}

@keyframes fadeDown {
  from {opacity: 0;transform: translateY(-50px);}
  to {opacity: 1;transform: translateY(0);}
}

/* bouton toggle ----------------------------- */
.toggle-container {
  display: flex;  align-items: flex-end; /* aligne tout en bas */
  gap: 5px;padding-top:5px;
}

/* chaque bloc image + titre */
.toggle-item {
  display: flex;
  align-items: baseline; /* aligne le texte et l'image sur la baseline du texte */
  gap: 3px;
    padding-bottom:10px;
}

.toggle-item img {
height: 22px; /* ajuste selon ton design */
object-fit: contain;
vertical-align: baseline; /* s'assure que l'image suit la ligne de base du texte */
}

/* style du texte */
.toggle-container p {
 font-family: 'cartograph_cfbold'; 
 text-transform: uppercase;
 font-size: 12px;
 line-height: 1; /* important pour éviter un décalage vertical */
 margin: 0;
}

/* Toggle switch */
.toggle-wrapper {position: relative;}
.checkbox {display: none;}
.label {
  display: inline-block;
  height: 33px;width: 63px;
  background: #fff8c6;
  position: relative;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border:1px solid #71783c;
}

label:after {
  content: "";
  height: 25px;
  width: 25px;
  background: #71783c;
  position: absolute;
  top: 3px;
  left: 3px;
  right:3px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.checkbox:checked + .label { background: #fff8c6;}
.checkbox:checked + .label:after {transform: translateX(30px);}


/* -----------------------------------------  
sommaire  /double site
--------------------------------------------  */
.slider-header {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 700; /* au-dessus du slider */
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDownHeader 0.8s ease forwards;
  animation-delay: 0.2s; 
}

@keyframes fadeDownHeader {
  from {opacity: 0;transform: translateY(-30px);}
  to {opacity: 1;transform: translateY(0);}
}

.slider-header .slider__label {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 8px;
    border: 1px solid #FFF;
    background-color: rgba(0, 0, 0, 0.2);
    color: #FFF;
    height: auto;
    padding: 10px 40px 0px 40px;
    font-size: 1.68em;
    line-height: 1.5em;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.slider-header .slider__label img {
    height: 50px;
    padding-bottom: 13px;
    object-fit: contain;
    transition: opacity 0.3s;
}


.picto-wrap {
    position: relative;
    width: 25px;  
    height: 50px;
}

.picto-normal {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

.picto-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50px;
    object-fit: contain;
    opacity: 0;
}

.slider-header .slider__label:hover .picto-hover {opacity: 1;}
.slider-header .slider__label:hover .picto-normal {opacity: 0;}
.slider-header .slider__label:hover {color: #3f4819; background: #fff8c6; border: 1px solid #3f4819;}

@keyframes fadeDown {
  from {opacity: 0;transform: translateY(-50px);}
  to {opacity: 1;transform: translateY(0);}
}

/* -----------------------------------------
   Slider container
----------------------------------------- */
.slider-container {
  width: 100vw;height: 100vh;
  overflow: hidden;position: relative;
}

.slider {position: relative;width: 100%;height: 100%;}

/* -----------------------------------------
   Images avant / après (plein écran)
----------------------------------------- */
.slider__before,
.slider__after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transition: clip-path 0.6s ease;
}

.slider__before img,
.slider__after img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* -----------------------------------------
   État initial 50/50
----------------------------------------- */
.slider__before {
  z-index: 2;
  clip-path: inset(0 50% 0 0); /* moitié gauche visible */
}

.slider__after {
  z-index: 1;
  clip-path: none; /* toujours visible sous l'image gauche */
}

/* -----------------------------------------
   Hover effets
----------------------------------------- */
.slider.hover-avant .slider__before {clip-path: inset(0 0 0 0); }
.slider.hover-apres .slider__before {clip-path: inset(0 100% 0 0);}
.slider__after {clip-path: none;}

/* -----------------------------------------
   Séparateur
----------------------------------------- */
.slider__separator {
  position: absolute;
  width: 3px;
  top: 0;
  bottom: 0;
  background: black;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  transition: left 0.6s ease;
  left: 50%; /* centre initial */
}
.slider.hover-avant .slider__separator {left: 100%;}
.slider.hover-apres .slider__separator {left: 0%;}

/* -----------------------------------------
   BLOCS INFO - VERSION CENTRÉE
----------------------------------------- */
.slider-info {
  position: absolute;
  bottom: 0;                  /* collé en haut */
  left: 51%;               /* centré horizontalement */
  transform: translateX(-50%); /* corrige le centrage */
  width: 450px;            /* largeur fixe */
  height: auto;            /* hauteur automatique */
  background: #fff8c6;
  color: #000;
  opacity: 0;
  transition: all 0.8s ease;
  z-index: 900;
  text-align: left  ;    /* texte centré */
  padding: 10px 10px 0 10px;
  overflow: visible;       /* pour que le texte ne soit pas coupé */
}

/* visible lors du hover */
.slider-info.visible {
  opacity: 1; transform: translateX(-50%) translateY(0); /* animation verticale conservée */
}

/* -----------------------------------------
   LOGO SOMMAIRE
----------------------------------------- */
.logo_sommaire {
  position: fixed;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%); /* centre horizontalement et verticalement */
  width: 38%;
  max-width: none;
  z-index: 800;
  pointer-events: none;
  overflow: hidden;
}

.logo_sommaire img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;

  opacity: 0;
  transform: translateY(-30px);
  animation: fadeDownHeader 0.7s ease forwards;
  animation-delay: 0.2s; 
}

@keyframes fadeDownHeader {
  from {opacity: 0;transform: translateY(-30px);}
  to {opacity: 1;transform: translateY(0);}
}

/* --------------------------------------------------
rubrique accueil 1 et 2
---------------------------------------------- */
.bandeau_titre {
  position: fixed;
  text-align: left;
  display: block;
  float: left;
  bottom: 0;
  width: 100%;
  z-index: 1500;
  height: 60px;
  background: #fff8c6;
  padding: 10px 0 10px 20px;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
   
}

.bandeau_titre {will-change: opacity, transform;transform: translateZ(0);  }
.bandeau_titre.temporarily-hidden {opacity: 0;pointer-events: none;}
.bandeau_titre.visible {opacity: 1;pointer-events: auto;}

section{background:#fff8c6; width: 100%; height:auto; position:relative; padding:0px 0 0 0; text-align:left;}

#image_sommaire{width:100%; height:100vh; position:relative; } 
#image_sommaire img { width:100%; height: auto; float:right; position:fixed;
width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
#texte_sommaire {width: 100%; height: auto; text-align: left; z-index: 1; padding:100px 20px 20px 20px;}

/* -----------------------------------------
   Effet fade + montée depuis le bas
----------------------------------------- */
.bandeau_titre_sommaire {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 2;
  transform: translateY(40px); 
  animation: fadeUpBandeau 1s ease forwards;
  animation-delay: 0.8s; 
  transition: opacity 0.5s ease;
}

.bandeau_titre_sommaire img.logo_bandeau {width: 100%;height: auto;}

@keyframes fadeUpBandeau {
  from {
    opacity: 0;
    transform: translateY(40px); /* vient du bas */
  }
  to {
    opacity: 0.6; /* opacité finale */
    transform: translateY(0); /* revient à sa place */
  }
}

.conteneur {display: flex;height: auto; flex-wrap: wrap; padding-bottom:70px;margin: 0;padding: 0;}
.colonne-gauche, .colonne-droite {width: 50%;height: 100%;}

.grille-images {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 1px;
  height: 100%; 
}

.grande-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 4; 
}

.petites-images {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
}

.petites-images img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  display: block;
}

.colonne-droite {
  padding: 0 40px 40px 40px;
  display: block;      
  height: auto;         
  text-align: left;
}

.quatre_colonne {
    display: flex; 
    gap: 1px; 
    width: 100%; 
    justify-content: flex-start; 
}

.produit, .produit_hameau {
    width: 25%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    /* Assure que l'élément respecte la largeur de 25% ou 50% */
    min-width: 0;
}

.produit_hameau {width: 50%;}


.image-wrapper {
position: relative; /* Indispensable pour l'image absolue */
    width: 100%;
    padding-bottom: 133.33%; 
    overflow: hidden;
    /* Suppression des anciennes règles aspect-ratio et min-height */
}

.image-wrapper_hameau {
position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
}

/* Styles communs */
.image-wrapper img, .image-wrapper_hameau img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
}

/* Positionnement absolu pour l'image HAMEAU (conservé) */
.image-wrapper_hameau img {
    position: absolute;
    top: 0;
    left: 0;
}

.produit:hover .image-wrapper img,
.produit_hameau:hover .image-wrapper_hameau img {
  transform: scale(1.1);
}

.titre {text-align: left;   margin-top: 5px; padding-left:5px;}
.titre p {margin-bottom: 1.4em; color:#3f4819; font-size:15px; font-family: 'cartograph_cfextra_light'; text-transform: lowercase;}

#rubrique4, #rubrique15 {padding-top:80px; padding-bottom:200px;}


/* --------------------------------------------------
Hameau accueil
---------------------------------------------- */
.colonne-gauche_hameau2 {
  width: auto;   /* au lieu de 60% */
  flex: 1 1 60%; /* prend 60% sans forcer */
}
/* Grille principale : deux colonnes (gauche = grandes, droite = petites) */
.grille-images_hameau2 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 1px 1px;
  width: 100%;             /* OK */
  max-width: 100%;         /* empêche dépassement */
  overflow: hidden;        /* empêche le débordement iOS */
  box-sizing: border-box;
  height: 100%;
  box-sizing: border-box;
}

/* ---------- Grandes images (gauche) ---------- */
.grande-images_hameau2 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
}

.grande-images_hameau2 .hameau-img,
.grande-images_hameau2 img {
  width: 100% !important;
  flex: 1 1 0;        /* prend l'espace disponible, iOS-friendly */
  height: auto !important;
  object-fit: cover;
  display: block;
}

/* ---------- Petites images (droite) ---------- */
/* Conteneur vertical : deux "lignes" */
.petites-images_hameau2 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
  box-sizing: border-box;
    
}

/* Chaque "row" contient deux images côte-à-côte */
.petites-images_row {
  display: flex;
  gap: 1px;
  flex: 1 1 0;   /* chaque row prend 50% de la hauteur disponible */
  min-height: 0; /* important pour éviter overflow sur iOS */
 
}

/* Les images dans une row prennent chacune la moitié de la largeur de la row et toute sa hauteur */
.petites-images_row .hameau-img,
.petites-images_row img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
    
}

/* sécurité pour override des attributs width/height injectés par SPIP */
.hameau-img {
max-width: 100%;
  width: 100%;
  height: auto;
}

/* dans les petites rows on veut explicitement height:100% */
.petites-images_row .hameau-img {
  height: 100% !important;
      background: tomato;
}




/* Colonne droite */
.colonne-droite_hameau2 {
  width: 40%;
  padding: 0 20px;
  height: auto;
  text-align: left;
}

/* --------------------------------------------------
RUBRIQUES nos_produits
---------------------------------------------- */
.nos_produits_section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.nos_produits {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
    
}

.menu-article {
  flex: 0 0 25%; /* chaque bloc prend 25% de largeur */
  height: 100vh; /* pleine hauteur de l’écran */
  position: relative;
  opacity: 0;
  animation: fadeSlideIn 1s ease forwards;
}

.menu-article:nth-of-type(1) {
  animation-delay: 0s;
}

.menu-article:nth-of-type(2) {
  animation-delay: 0.5s;
}

.menu-article:nth-of-type(3) {
  animation-delay: 1s;
}

.menu-article:nth-of-type(4) {
    animation-delay: 1.5s;
}


@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.menu-article_hameau{
  flex: 0 0 33.333%; /* chaque bloc prend 25% de largeur */
  height: 100vh; /* pleine hauteur de l’écran */
  position: relative;
     opacity: 0;         
  animation: fadeSlideIn2 1s ease forwards;
}


 .menu-article_hameau:nth-child(1) {
  animation-delay: 0s;
}

 .menu-article_hameau:nth-child(2) {
  animation-delay: 0.5s;
}

.menu-article_hameau:nth-child(3) {
  animation-delay: 1s;
}
@keyframes fadeSlideIn2 {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Effet zoom au survol */
.menu-article_hameau:hover .logo_container img {
  transform: scale(1.1);
  transition: transform 0.6s ease;
}


/* Effet zoom au survol */
.menu-article:hover .logo_container img {
  transform: scale(1.1);
  transition: transform 0.6s ease;
}

.logo_container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.logo_container img {
width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

/* Centrage du titre sur l’image */
.article-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff8c6;
  font-family: 'cartograph_cfbold'; 
  font-size: 1rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #3e4819; /* optionnel : fond semi-transparent */
  padding: 5px 10px;
}




/* --------------------------------------------------
page article
---------------------------------------------- */
.ligne {display: flex; width: 100%; margin: 0; padding: 0; box-sizing: border-box;}

/* --------SECTION HAUTE — TITRE + CHAPO + IMAGE-------- */
#article_top .ligne-top {height: 100vh;}

.col-texte {
  flex: 1 1 50%;
  padding: 80px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: left;  
  text-align: left;
  overflow-y: auto;
  box-sizing: border-box;
    
        opacity: 0;
  animation: slideFromTop 1s ease forwards;
  animation-delay: 0.2s;
}

.col-texte_tarif{
  flex: 1 1 50%;
  padding: 80px  30px 80px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: left;  
  text-align: left;
  overflow-y: auto;
  box-sizing: border-box;
    
            opacity: 0;
  animation: slideFromTop 1s ease forwards;
  animation-delay: 0.2s;
}


.col-image {
  flex: 1 1 50%;
  height: 100%;
  overflow: hidden;
}

.col-image img,
.col-image object,
.col-image embed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- SECTION BASSE — TEXTE EN 2 COLONNES --------- */
#article_bas .ligne-bot {border-bottom: 1px solid #3e4819;}
.demi-col {flex: 1 1 50%;padding: 60px 10%;box-sizing: border-box;border-right: 1px solid #3e4819;}
.demi-col:last-child {border-right: none;}


/* ------SECTION DOCUMENTS EN QUINCONCE------------ */
#documents_article {
  width: 100%;
  box-sizing: border-box;
}

.ligne-doc {
  display: flex;
  width: 100%;
  min-height: 60vh;
    gap:1px;
}

.ligne-doc .doc-image,
.ligne-doc .doc-texte {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.doc-image {
  width: 100%;
  aspect-ratio: 4 / 3; 
  overflow: hidden;
  position: relative;
}


.doc-image_jardin {
  width: 50%;
  aspect-ratio: 3 / 4; 
  overflow: hidden;
  position: relative;
margin-top:1px;
}

.doc-image img,
.doc-image object,
.doc-image embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;      
  transform: translate(-50%, -50%); 
}

.ligne-doc .doc-texte {
  padding: 60px 8%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  line-height: 1.6;
}

#documents_article .ligne-doc:nth-child(odd) {flex-direction: row;}
#documents_article .ligne-doc:nth-child(even) {flex-direction: row-reverse;   }

/* ------------LES CHAMBRES------------- */
#article_top_chambre .ligne-top {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100%;
}

/* Colonne texte : 50% */
#article_top_chambre .col-texte_chambre {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
    padding: 80px 10%;
    opacity: 0;
  animation: slideFromTop 1s ease forwards;
  animation-delay: 0.2s;
}

/* Colonne des images : 50% */
#article_top_chambre .col-image_chambre {
  width: 50%;
  display: flex;
  flex-direction: row;
  gap: 1px;
}

/* Chaque image doit occuper 50% de la largeur + 100vh */
#article_top_chambre .col-image_chambre img {
  width: calc(50% - 0.5px);
  height: 100vh;
  object-fit: cover;        /* recadrage centré */
  object-position: center;  /* bien centré */
  display: block;
  opacity: 0;
}


/* Première image : glisse depuis la gauche */
#article_top_chambre .col-image_chambre img:nth-of-type(1) {
  animation: slideFromLeft 1.2s ease forwards;
  animation-delay: 0.2s;
}

/* Deuxième image : glisse depuis la droite */
#article_top_chambre .col-image_chambre img:nth-of-type(2) {
  animation: slideFromRight 1.2s ease forwards;
  animation-delay: 0.2s;
}

/* Slide depuis la gauche */
@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide depuis la droite */
@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade + descente du haut */
@keyframes slideFromTop {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ----- Grille globale ----- */
#documents_article_chambre .grid-chambres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 4rem 2rem;
  box-sizing: border-box;
}

/* ----- Carte chambre ----- */
.carte-chambre {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ----- Diptyque ----- */
.carte-chambre .diptyque {
  display: flex;
  flex-direction: row;
  gap: 1px; /* Le gap demandé */
  width: 100%;
  aspect-ratio: 4 / 3; /* ratio final du bloc */
  overflow: hidden;
}

/* Les deux images du diptyque */
.carte-chambre .diptyque img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  aspect-ratio: 3 / 4; /* Format individuel 3/4 */
  transition: transform 0.6s ease;
}

/* Les deux images du diptyque */
.carte-chambre:hover .diptyque img {
 transform: scale(1.1);
  transition: transform 0.6s ease;
    
}

/* ----- Textes ----- */
.carte-chambre .infos-chambre .chapo {
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0.8;
}

.carte-chambre h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.infos-chambre{ width:50%;   }
.infos-chambre p{ font-size: 15px;     margin-bottom: 0em;}

/* ---------------------------------------------
   MENU SUR LA DROITE
--------------------------------------------- */
.menu_article {position: fixed;top: 100px;right: 20px; z-index: 1000;}
.menu_article ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_article li {
  display: flex;
  align-items: center;     
  justify-content: center; 
  height: 30px;           
  padding: 2px 7px 0 7px ;
  background: #fff8c6;
  transition: background 0.2s;
}

.menu_article a {
  text-decoration: none;
  color: #3e4819;
  font-family: 'cartograph_cfbold';
  font-size: 14px;
}

/* Hover */
.menu_article li:hover {background: #3e4819;}
.menu_article li:hover a {color: #fff8c6 !important;}


.menu_article li.on{background: #3e4819;; color: #fff8c6 !important;}
.menu_article a.on{background: #3e4819;; color: #fff8c6 !important;}


/* -----------------------------------------  
espace_pro
--------------------------------------------  */

.editer-label,.formulaire_spip label { width:100%; border:none;   }
span.obligatoire{ font-family: 'cartograph_cfextra_light';}
.editer_email_1, .editer_input_1{ font-family: 'cartograph_cfbold';}



.formulaire_spip input.text, .formulaire_spip select, .formulaire_spip textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .30em;
    border: none;
    border-bottom: solid 1px #71783c;
    border-radius: 0;
}


.ligne-doc_pro {
display: flex;
position: relative;
width: 100%;
height: auto;
gap:1px;
}

.doc-image_pro {
  width: 50%;
  aspect-ratio: 3 / 4; 
  overflow: hidden;
  position: relative;
  margin-top:1px;
  height:auto;   
  margin-bottom:60px;
}

.doc-texte_pro {
    padding:10px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff8c6;
    display:block;
    height:auto;  
    background: #3e4819;
    color:#fff8c6 ; 
    width:70%;  
    
}

.doc-texte_pro p{color:#fff8c6;margin-bottom:0em;}


.formulaire_spip .editer {
    margin: 0.1em 0;
}

/* --------------------------------------------------
contact
---------------------------------------------- */
.texte_contact { z-index:100;
    width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
text-align: center;}

.texte_contact p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #FFF;
  margin: 0;
  z-index:100;
}

.texte_contact a { color: #FFF; text-decoration: none; }
.texte_contact a:hover { text-decoration: underline; }

.logo_contact {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index:1;
    opacity: 0.4;
}

.logo_contact img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------
menu
---------------------------------------------- */
.nav-container {
  position: relative;float: left;display: block;
  height: 60px;width: 160px;padding-top: 20px;
}

/* Logo / titre */
.titre_logo {
  position: relative;width: 100%;height: auto;float: left;
  padding-top: 85px;padding-left: 250px;
  margin-left: -250px;
  transition: transform 1s ease;cursor: pointer;
}

li.picto_hameau {display: flex;align-items: baseline; /* aligne le texte et l'image sur la baseline du texte */}
li.picto_hameau img { height: 24px;object-fit: contain;vertical-align: baseline; /*l'image suit la ligne de base du texte */}

.picto_menu{margin-right:4px;}
.titre_logo:hover {color: #D75014; transform: translateX(20px);}

/* --- NAVBAR COULISSANTE --- */
.sliding-navbar {
  position: fixed;
  top: 0;
  right: -400px; /* Cachée à droite */
  height: 100vh;
  width: 400px; /* largeur fixe */
  background: #fff8c6;
  transition: right 0.5s ease-in-out;
  z-index: 800;
  overflow-y: auto;
  padding-top: 100px;
  text-align: left;
}

.logo_menu{position:absolute; bottom:0;width:100%; height:auto; z-index:1; }
.logo_menu img{width:100%; }

/* Menu ouvert */
.sliding-navbar--open {right: 0; }
.mask {position: absolute;top: 0;left: 0; height: 100vh;width: 1%;z-index: -100; }
.show {z-index: 200;}

.brand {
  text-decoration: none;color: #66121A;display: block;width: 140px;
  margin: 20px auto 0 auto;font-family: sans-serif;transition: color 0.2s ease-in-out;
}

.brand:hover {color: #ccc;}
.navbar--items {list-style-type: none;height: auto;width: 100%;
  display: flex;flex-direction: column;padding: 0;margin: 0;text-align: left;}

ul, ol {
  list-style: none;
  margin-left: 0;
    z-index:1000;
    position:relative;
}

.sliding-navbar li, .sliding-navbar li.article {
  text-align: left;padding: 0;font-size: 1em;font-family: 'cartograph_cfbold';text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease;margin-left:20px;   
  transition: color 0.3s ease,border-color 0.3s ease,transform 0.3s ease;
      z-index: 800;
}

.sliding-navbar li.article{margin-left:40px;   font-size: 1.3em;   z-index: 800;}

.sliding-navbar li:hover, .sliding-navbar li.article:hover  {color: #D75014;}
.sliding-navbar li .on {text-decoration: underline;}

/* Base pour tous les liens */
.sliding-navbar li > a,
.sliding-navbar li.article > a { display: inline-block; transition: transform 0.3s ease, color 0.3s ease;   z-index: 800;}

.sliding-navbar li > a:hover,
.sliding-navbar li.article > a:hover {transform: translateX(10px);color: #71783c; }

.sliding-navbar li,
.sliding-navbar li.article {margin-left: 20px; transition: none; }


.hamburger-menu { z-index: 1510; position: fixed; top: 0px; right: 10px; margin: auto; width: 60px; height:60px; cursor: pointer; border-radius:4px; } 
.hamburger { position: relative; width: 50px; height: 5px; background: #71783c; top:25px; transition: background 0.3s ease-in-out;border-radius:4px; } 
.hamburger::before, .hamburger::after { content: ""; position: absolute; width: 50px; height: 5px; background: #71783c; right:0;border-radius:4px; transition: all 0.3s ease-in-out; }

.hamburger::before {top: -10px;}
.hamburger::after {top: 10px;}
.menu-opened {background: transparent;}
.menu-opened::before { top: 0;transform: rotate(45deg);}
.menu-opened::after {top: 0;transform: rotate(-45deg);}
/* -------------------------------------------------
mentions_legales
----------------------------------------------------- */
.mentions-legales {max-width: 80%;margin: 50px auto;padding: 20px;line-height: 1.6;}

/* -------------------------------------------------
seminaires
----------------------------------------------------- */
.forfaits-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding : 2em;
    font-family: 'cartograph_cfbold';
    color: #5a623a;
}

.forfaits-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom:20px;;
}

.forfaits-table th,
.forfaits-table td {
    padding: 1rem;
    border: 1px solid rgba(0,0,0,0.2);
    text-align: left;
}

.forfaits-table th {
    font-size: 1.1rem;
    font-weight: bold;
}

.forfaits-table .sous-titre {
    display: block;
    font-size: 0.9rem;
    opacity: 0.7;
}

.total-label {
    font-weight: bold;
    font-size: 1.2rem;
}

.total {
    font-weight: bold;
    font-size: 1.3rem;
}

.notes {
    font-size: 0.9rem;
    opacity: 0.75;
}

/* -------------------------------------------------
experience
----------------------------------------------------- */

.bloc-exp {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    height: auto;
    padding:120px 40px 40px 40px;
}

.colone_exp{
    flex: 0 0 33.333%;
    height: auto;
    position: relative;
    margin-top:20px;
    padding:40px;
}

/* -------------------------------------------------
seminaire
----------------------------------------------------- */

.bloc_sem {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    height: auto;
    padding:10px 0px 0px 0px;
}

.colone_sem{
    flex: 0 0 50%;
    padding:10px;
}



/* -------------------------------------------------
responsive
----------------------------------------------------- */

@media (max-width: 1024px) { 
.logo_sommaire {
    left: 54%;
    transform: translate(-50%, -50%);
    width: 70%;
}
}

@media (max-width: 850px) { 
    .toggle-container p {display:none;}
    .bandeau_titre {height: auto;padding: 10px 0 10px 10px;}
    h1, .h1 {font-size: 1em;line-height: 1.2em;}  

/* -------------------------------------------------
accueille des deux sites
----------------------------------------------------- */
.colonne-gauche_hameau2 {width: 100%;}    
.colonne-droite_hameau2 { width: 100%; padding: 20px 0px;} 
.colonne-gauche, .colonne-droite {width: 100%; padding: 20px 0px; }    
#rubrique4, #rubrique15 {padding-top: 0px;padding-bottom: 40px;}
#article_top_chambre .col-texte_chambre, .col-texte {padding: 80px 10px;}
    
    .ligne-doc .doc-texte {
  padding: 80px 10px;
}
    
#article_top_chambre .col-image_chambre { width: 50%;display: block;gap: 0px;}
#article_top_chambre .col-image_chambre img:nth-child(2) {display: none;}
#article_top_chambre .col-image_chambre img:first-child {width: 100% !important; }
    
.ligne-doc {min-height: 40vh;}
.col-texte_tarif {padding: 80px 10px 80px 10px;}
    
.bloc-exp {padding: 120px 10px 10px 10px;}
.colone_exp {
  flex: 0 0 33.333%;
  margin-top: 10px;
  padding: 0px 10px 0px 0px;
}
    
}


@media (max-width: 650px) { 
    
    .logo_menu{width:80%; right:0; height:auto;z-index:1600; }
    
/* -------------------------------------------------
header et menu
----------------------------------------------------- */
header {padding: 0 20px 0 10px; height: 50px;}
.label {width: 53px;}
.checkbox:checked + .label:after {transform: translateX(20px);} 
.sliding-navbar {right: -100%; height: 100vh;width: 100%; padding-top: 60px;}
.sliding-navbar--open {right: 0 !important;}
ul#nav {display:none;}
.sliding-navbar > ul > li { font-size: 1.9em; z-index:1000;  }
.sliding-navbar > ul > li > ul > li {font-size: 1em;}
.toggle-item {padding-bottom: 9px;}
.toggle-item img {height: 28px;}
.logo img {height: 40px;width: auto; z-index:1; }
    
.slogan {  margin-top: 50px; z-index:1400;     }
.slogan p {line-height: 1em;font-size: 11px;padding: 3px 5px;}
.nav-container {padding-top:0;height: 50px;}
    
.hamburger-menu {right:0; top:-3px;width: 60px;height: 50px;}
li.picto_hameau img {height: 40px;}
    
/* -------------------------------------------------
notre histoire
----------------------------------------------------- */
.ligne {
    display: block;
    width: 100%;
}
    
.ligne-doc {
    display: block;min-height: 40vh;
}
    
.col-texte {
    flex: 1 1 100%;
    padding: 90px  10px 10px 10px;
}

/* Forcer l'empilement vertical */
#documents_article .ligne-doc {
    display: flex;
    flex-direction: column !important; /* colonne : élément un sous l'autre */
}

.ligne-doc .doc-texte,
.ligne-doc .doc-image {
    width: 100%;
    flex: none;
}

.ligne-doc .doc-texte {
    order: 0 !important;   /* texte en premier */
}
    
.ligne-doc .doc-image {
    order: 1 !important;   /* image après le texte */
}

.doc-image {
    aspect-ratio: auto;
    height: auto;
    overflow: hidden;
}
    
.doc-image img,
.doc-image object,
.doc-image embed {
   position: relative;
   top: auto;
   left: auto;
   transform: none;
   width: 100%;
   height: auto;
   object-fit: cover;
}

.ligne-doc .doc-texte {
   padding: 30px 10px 0px 10px ;
   text-align: left;
}
    
#article_top .ligne-top {
  height: auto;
}    
    
 .col-image {
 width: 100%;
    height: auto;
}
    
 .col-image img {
    width: 100%;       /* plein écran */
    height: auto;      /* on désactive le 100vh */
    aspect-ratio: 3 / 4;  /* format 3/4 */
    object-fit: cover;
    object-position: center;
}    

    
/* La section passe en colonne */
  #article_top_chambre .ligne-top {
    flex-direction: column;
    height: auto; /* on laisse la hauteur suivre le contenu */
  }

  /* Le texte prend toute la largeur */
  #article_top_chambre .col-texte_chambre {
    width: 100%;
   padding: 80px  10px 10px 10px;
  }

  /* La colonne images passe en bloc 100% */
  #article_top_chambre .col-image_chambre {
    width: 100%;
    height: auto;
  }

  /* Les deux images en mode mobile */
  #article_top_chambre .col-image_chambre img {
    width: 100%;       /* plein écran */
    height: auto;      /* on désactive le 100vh */
    aspect-ratio: 3 / 4;  /* format 3/4 */
    object-fit: cover;
    object-position: center;
  }

/* On masque la 2e image */
#article_top_chambre .col-image_chambre img:nth-child(2) {display: none;}
.carte-chambre {gap: 5px; padding-bottom:20px; }    
.doc-image_jardin {width: 100%;}
    

/* -------------------------------------------------
hameau page
----------------------------------------------------- */
.nos_produits_section, .nos_produits {
width: 100%;
height: auto;
overflow: auto;
padding-top: 20px;
}
     
.menu-article_hameau, .menu-article {
flex: 0 0 100%;
height: auto;
aspect-ratio: 4 / 3;   
}
    
#documents_article_chambre .grid-chambres {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding: 10px ;
}    
    
#texte_sommaire {padding: 100px 10px 10px 10px;}
    
/* -------------------------------------------------
menu article
----------------------------------------------------- */

  /* Le conteneur n'est plus fixe */
  .menu_article {
    position: relative !important;
    top: 0px;
    padding-top:90px;
    height:auto;
    right: 0;
    width: 100%;
      z-index:10;
  }

  /* UL en flex qui peut passer à la ligne */
  .menu_article ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Chaque bouton occupe 50% de la largeur écran */
  .menu_article li {
    width: 49.8%;          /* ESSENTIEL → exactement la moitié */
    min-width: 49.8%;  
    box-sizing: border-box;
    padding: 7px 5px 3px 5px;
    justify-content: center;
    height: auto;    
    border:solid 1px #3e4819;
  }

  /* Version active */
  .menu_article li.on {
    width: 49.8%;            /* ESSENTIEL → exactement la moitié */
    min-width: 49.8%;  
    border:solid 1px #3e4819;
  }

  .menu_article a {
    display: block;
    width: 100%;         /* l’ensemble du bouton cliquable */
    text-align: center;
    padding: 0;
    font-size:11px;
  }

  .menu_article a.on {
    width: 100%;
    padding: 0;
  }
  
    
    
    
/* -------------------------------------------------
sommaire des deux sites
----------------------------------------------------- */

.logo_sommaire {width: 90%;}
    
.slider-header {
    flex-direction: column;      /*  boutons l’un sous l’autre */
    gap: 15px;top: 20px;                 
  }

  .slider-header a {
    width: 90%;                 /* le lien prend toute la largeur */
    display: block;
  }

  .slider-header .slider__label {
    width: 100%;                 /* le bouton  100% */
    justify-content: left;     /* centrer */‡
    font-size: 1.5em;
  }

  .slider-header .slider__label img {
    height: 40px;                /* icône  */
    padding-bottom: 8px;
  } 
    
 .slider-header .slider__label {
    display: flex;
    align-items: center;
    justify-content: center;    /* centre picto + texte ensemble */
    position: relative;
}

/* Contient les deux pictos */
.picto-wrap {
    position: relative;
    width: 25px;   /* largeur fixe = stabilité du centrage */
    height: 50px;
}

.picto-normal {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

.picto-hover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
}

.slider-info {left:50%;width: 100%;padding: 10px 10px 0 10px;}
      
/* -------------------------------------------------
accueille des deux sites
----------------------------------------------------- */
.quatre_colonne {flex-direction: column;}
.produit, .produit_hameau {width: 100%;}
    
    
/* -------------------------------------------------
page reservation
----------------------------------------------------- */
.css-1hppjzv {padding-bottom: 10px;} 
    
/* -------------------------------------------------
page pro
----------------------------------------------------- */
.col-texte_tarif {padding: 80px 10px 0px 10px;}
    
    
.forfaits-wrapper {
max-width: 100%;
margin: 0 auto;
padding :20px 0px;
font-family: 'cartograph_cfbold';
color: #5a623a;
}
    
.forfaits-table th, .forfaits-table td{
    font-size: 11px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: left;
}   
    
.forfaits-table .sous-titre {font-size: 11px;}
    
/* -------------------------------------------------
pageesperience
----------------------------------------------------- */
.bloc-exp {padding: 20px 10px 20px 10px;}
.colone_exp{flex: 0 0 100%;padding:0px;}       
    
.colone_sem{flex: 0 0 100%;padding:10px;}
    
/* -------------------------------------------------
contact
----------------------------------------------------- */

.texte_contact p {background:#71783c;width:auto;}
    
.col-texte_chambre.smartphone,.col-texte.smartphone {padding: 20px 10px 10px 10px !important;}    
.doc-texte.smartphone_reservation {padding: 80px 10px 10px 10px !important;}   
    
}