/* =========================================================
   Château de la Roulerie — thème commun (relooking 2026)
   Direction "Nature & bio" : vert forêt + or + crème
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --forest:#2f3d27;
  --forest-soft:#3c4d31;
  --olive:#7a9a4f;
  --olive-dark:#62803f;
  --gold:#c9a14a;
  --cream:#f4f1e9;
  --cream-2:#ece7db;
  --ink:#26221c;
  --muted:#4a463d;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --maxw:1180px;
  --header-h:74px;
}

*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  padding:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  overflow-y:scroll;
}

img{max-width:100%;}

/* ---------- scrollbar ---------- */
*{
  scrollbar-width:thin;
  scrollbar-color:var(--olive) var(--cream-2);
}
*::-webkit-scrollbar{width:10px;}
*::-webkit-scrollbar-track{border-radius:5px;background-color:var(--cream-2);}
*::-webkit-scrollbar-track:hover{background-color:#ded7c7;}
*::-webkit-scrollbar-thumb{border-radius:5px;background-color:var(--olive);}
*::-webkit-scrollbar-thumb:hover{background-color:var(--olive-dark);}

/* ---------- animations d'apparition ---------- */
.scroll-fade{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.scroll-fade.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;
  top:0;left:0;
  width:100%;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 34px;
  background:rgba(244,241,233,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-2);
}
.headcontainer1{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}
.headcontainer1 .centered-images{display:flex;align-items:center;}
.headcontainer1 .centered-images img{
  height:58px;
  margin-right:10px;
  transition:transform .3s ease;
}
.headcontainer1 .centered-images:hover img{transform:scale(1.04);}

.headcontainer2{
  flex:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.headcontainer2 a{
  position:relative;
  display:inline-block;
  margin:8px 16px;
  padding:4px 2px;
  color:var(--forest);
  text-decoration:none;
  font-family:var(--sans);
  font-weight:500;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.headcontainer2 a::after{
  content:"";
  position:absolute;
  left:0;bottom:-3px;
  height:2px;width:0;
  background-color:var(--olive);
  transition:width .3s ease;
}
.headcontainer2 a:hover::after{width:100%;}

.headcontainer3{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}
.headcontainer3 img.l3{
  height:48px;
  margin:0;
}

/* sélecteur de langue */
.language-switcher{display:inline-flex;align-items:center;margin:0;}
.language-button{
  background:none;
  border:1px solid var(--cream-2);
  border-radius:50%;
  padding:4px;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .25s ease, transform .25s ease;
}
.language-button:hover{border-color:var(--olive);transform:translateY(-1px);}
.language-button img{width:22px;height:22px;border-radius:50%;object-fit:cover;}

/* ---------- burger (CSS pur, aucune dépendance JS) ---------- */
.nav-toggle{display:none;}
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;height:42px;
  padding:9px;
  cursor:pointer;
  border-radius:8px;
}
.burger span{
  display:block;
  height:2px;width:100%;
  background:var(--forest);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--ink);
  color:#cfc8ba;
  padding:48px 24px 30px;
  text-align:center;
}
.footcontainer1{display:flex;justify-content:center;}
.footcontainer1 .f1{height:54px;filter:brightness(0) invert(1);opacity:.9;}
.footcontainer2{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 4px;
  margin-top:22px;
}
.footcontainer2 a{
  position:relative;
  display:inline-block;
  margin:0 14px;
  color:#cfc8ba;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.footcontainer2 a::after{
  content:"";
  position:absolute;
  left:0;bottom:-4px;
  height:2px;width:0;
  background-color:var(--gold);
  transition:width .3s ease;
}
.footcontainer2 a:hover::after{width:100%;}
.footcontainer3 p{
  margin-top:26px;
  color:#8d877b;
  font-size:12px;
  letter-spacing:.5px;
}

/* =========================================================
   RESPONSIVE — header / burger
   ========================================================= */
@media (max-width:880px){
  .header{padding:8px 18px;}
  .headcontainer1{flex:1;}
  .headcontainer1 .centered-images img{height:46px;}
  .headcontainer3 img.l3{height:40px;}

  .burger{display:flex;order:3;}

  /* le menu devient un panneau déroulant */
  .headcontainer2{
    order:4;
    position:absolute;
    top:100%;left:0;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(244,241,233,.98);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--cream-2);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .nav-toggle:checked ~ .headcontainer2{max-height:340px;}
  .headcontainer2 a{
    margin:0;
    padding:16px 22px;
    text-align:center;
    border-top:1px solid var(--cream-2);
    font-size:15px;
  }
  .headcontainer2 a::after{display:none;}
  .headcontainer2 a:hover{background:var(--cream-2);}

  /* animation de la croix */
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

@media (max-width:480px){
  .headcontainer1 .centered-images img{height:40px;margin-right:6px;}
  .headcontainer3 img.l3{height:34px;}
  .language-button{width:30px;height:30px;}
}