/* L'Oeil du Condroz — relooking v2 */
:root{--cream:#f4f0e7;--paper:#faf8f2;--ink:#20261f;--olive:#586443;--olive-dark:#30382b;--line:rgba(32,38,31,.18);--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans)}a{color:inherit;text-decoration:none}.container{width:min(1380px,calc(100% - 120px));margin:auto}
.site-header{min-height:112px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;padding:8px 4vw;background:rgba(250,248,242,.98);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(0,0,0,.07)}
.brand-centered{grid-column:2;grid-row:1;justify-self:center}.brand-centered img{display:block;width:310px;height:auto;max-height:76px;object-fit:contain}
.main-nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;align-items:center;gap:28px;padding-top:6px;font-size:13px}.main-nav a:not(.btn){position:relative}.main-nav a:not(.btn):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--ink);transition:.25s}.main-nav a:not(.btn):hover:after{right:0}
.btn{display:inline-flex;align-items:center;gap:15px;padding:13px 23px;border:1px solid currentColor;border-radius:999px;font-size:13px}.btn-solid{background:var(--olive);border-color:var(--olive);color:#fff}.btn-outline{background:transparent;color:#fff}.btn-outline.dark{color:var(--ink)}.menu-toggle{display:none}
.hero{height:min(740px,calc(100vh - 112px));min-height:620px;position:relative;display:flex;align-items:center;color:#fff;overflow:hidden}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,17,11,.82),rgba(12,17,11,.30) 55%,rgba(12,17,11,.12))}.hero-content{position:relative;z-index:1}.eyebrow{text-transform:uppercase;letter-spacing:.34em;font-size:10px;margin:0 0 18px}.hero h1{font:400 clamp(45px,5.2vw,82px)/1.02 var(--serif);max-width:780px;margin:0 0 25px}.hero-copy{font-size:16px;max-width:540px;margin-bottom:30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.section{padding:105px 0}.section-small{padding:0 0 90px}.intro{background:var(--cream)}.intro-grid{display:grid;grid-template-columns:1.15fr repeat(3,1fr)}.intro-title{padding-right:60px}.intro h2,.story h2{font:400 clamp(34px,3.5vw,54px)/1.08 var(--serif);margin:0}.reason{padding:5px 35px 10px;border-left:1px solid var(--line)}.reason .icon{font-size:35px;color:var(--olive);height:55px}.reason h3{font:400 25px var(--serif);margin:0 0 6px}.reason p{color:#555d53;max-width:280px;min-height:75px;margin:0 0 12px}.reason a{font-size:12px}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.image-card{position:relative;min-height:360px;overflow:hidden;color:#fff}.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}.card-shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}.card-content{position:absolute;left:24px;right:18px;bottom:23px}.card-content h3{font:400 22px var(--serif);margin:0}.card-content p{margin:2px 0 0;font-size:12px}
.story{display:grid;grid-template-columns:1fr 1fr;padding:0;background:var(--cream)}.story-image{min-height:620px;overflow:hidden}.story-photo{width:100%;height:100%;background:linear-gradient(135deg,#6c7459,#d6c7a8 48%,#536044)}.story-copy{padding:100px clamp(45px,8vw,130px);display:flex;flex-direction:column;justify-content:center}.story-copy>p:not(.eyebrow){max-width:500px;color:#5a6057}
.events{
  background:linear-gradient(135deg,#594534 0%,#6b5540 50%,#4f3d30 100%);
  color:#fff
}.events-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.events h2{font:400 clamp(38px,4vw,55px) var(--serif);margin:0}.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.event{background:var(--paper);color:var(--ink)}.event-image{display:block;width:100%;height:240px;object-fit:cover;object-position:center}.event-1{background:linear-gradient(135deg,#3e3a30,#9c8560)}.event-2{background:linear-gradient(135deg,#b9aa8a,#544735)}.event-3{background:linear-gradient(135deg,#84936e,#d7c38d)}.event-body{padding:20px 22px 24px}.event time{font-size:10px;letter-spacing:.16em}.event h3{font:400 23px var(--serif);margin:5px 0 0}
.reservation{position:relative;min-height:240px;color:#fff;display:flex;align-items:center;background:linear-gradient(90deg,#66724f,#8e7651 55%,#38432f)}.reservation-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:30px}.reservation h2{font:400 36px/1.1 var(--serif);margin:0}.reservation-actions{display:flex;gap:10px;flex-wrap:wrap}
.footer{background:var(--paper);padding:55px 0 25px}.footer-main{display:grid;grid-template-columns:1.3fr 2fr auto;align-items:center;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}.footer-brand img{width:270px;max-height:70px;object-fit:contain}.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:11px}.socials{display:flex;gap:8px}.socials a{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.footer-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#6b7169}
@media(max-width:1100px){.container{width:min(100% - 50px,1380px)}.main-nav{gap:15px}.intro-grid{grid-template-columns:1fr 1fr}.intro-title{grid-column:1/-1;padding:0 0 45px}.cards-grid{grid-template-columns:repeat(2,1fr)}.footer-main{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}
@media(max-width:800px){.site-header{min-height:68px;display:flex;padding:8px 20px}.brand-centered{margin:auto}.brand-centered img{width:205px;max-height:52px}.menu-toggle{display:flex;flex-direction:column;gap:4px;padding:8px;margin-left:auto;background:none;border:0}.menu-toggle span:not(.sr-only){display:block;width:25px;height:1px;background:var(--ink)}.main-nav{position:absolute;top:68px;left:0;right:0;background:var(--paper);padding:22px 24px;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.hero{min-height:680px;height:calc(100vh - 68px)}.hero h1{font-size:48px}.intro-grid{grid-template-columns:1fr}.intro-title{padding-bottom:35px}.reason{border-left:0;border-top:1px solid var(--line);padding:25px 0}.reason p{min-height:auto}.story{grid-template-columns:1fr}.story-image{min-height:400px}.story-copy{padding:70px 25px;min-height:480px}.events-head{display:block}.events-grid{grid-template-columns:1fr}.reservation-inner{display:block;padding:55px 0}.reservation h2{margin-bottom:28px}.footer-bottom{flex-direction:column}}
@media(max-width:500px){.container{width:calc(100% - 36px)}.hero h1{font-size:42px}.cards-grid{grid-template-columns:1fr}.image-card{min-height:330px}.hero-actions .btn,.reservation-actions .btn{width:100%;justify-content:center}}

/* v3 — logo à gauche + wordmark éditorial */
.site-header{
  min-height:92px;
  display:grid;
  grid-template-columns:minmax(250px,1fr) auto;
  grid-template-rows:1fr;
  align-items:center;
  padding:10px 4vw;
}
.brand-left{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-eye-wrap{
  width:68px;
  height:48px;
  overflow:hidden;
  position:relative;
  flex:0 0 68px;
}
.brand-eye-wrap img{
  position:absolute;
  width:270px;
  max-width:none;
  height:auto;
  left:0;
  top:50%;
  transform:translateY(-50%);
  object-fit:contain;
  object-position:left center;
}
.brand-wordmark{
  display:flex;
  flex-direction:column;
  line-height:1;
  white-space:nowrap;
}
.brand-name{
  font-family:"Cormorant Garamond", "Bodoni 72", "Didot", Georgia, serif;
  font-size:24px;
  font-weight:500;
  letter-spacing:.055em;
}
.brand-name em{
  font-style:normal;
  font-size:.62em;
  letter-spacing:.12em;
  margin:0 .08em;
}
.brand-subtitle{
  margin-top:6px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:12px;
  letter-spacing:.055em;
  color:#666b62;
}
.main-nav{
  grid-column:2;
  grid-row:1;
  padding-top:0;
  justify-content:flex-end;
}
@media(max-width:800px){
  .site-header{
    min-height:70px;
    display:flex;
    padding:8px 18px;
  }
  .brand-left{
    margin:0;
    gap:8px;
  }
  .brand-eye-wrap{
    width:50px;
    height:36px;
    flex-basis:50px;
  }
  .brand-eye-wrap img{width:205px}
  .brand-name{font-size:17px;letter-spacing:.045em}
  .brand-subtitle{font-size:9px;margin-top:4px}
  .main-nav{
    grid-column:auto;
    grid-row:auto;
  }
}

/* v4 — photo de Noémie & Quentin */
.story-photo-real{
  display:block;
  width:100%;
  height:100%;
  min-height:620px;
  object-fit:cover;
  object-position:center center;
}
@media(max-width:800px){
  .story-photo-real{min-height:400px}
}

/* v5 — retour au logo original + photo d'accueil ODC */
.site-header{
  min-height:92px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:10px 4vw;
}
.brand-left.original-logo{
  grid-column:1;
  justify-self:start;
  display:block;
}
.brand-left.original-logo img{
  display:block;
  width:280px;
  height:auto;
  max-height:70px;
  object-fit:contain;
}
.main-nav{
  grid-column:2;
  grid-row:1;
  justify-content:flex-end;
  padding-top:0;
}
.hero-bg{
  object-position:center center;
}
@media(max-width:800px){
  .site-header{
    min-height:70px;
    display:flex;
    padding:8px 18px;
  }
  .brand-left.original-logo{
    margin:0;
    max-width:220px;
  }
  .brand-left.original-logo img{
    width:205px;
    max-height:52px;
  }
}
.hand-note {
  position: relative;
  display: inline-block;
  align-self: flex-start;

  margin-top: 42px;
  margin-left: 55px;
  padding: 8px 18px 12px 8px;

  font-family: "Caveat", cursive;
  font-size: clamp(27px, 2.3vw, 38px);
  font-weight: 400;
  line-height: 1.02;

  color: var(--olive);
  transform: rotate(-3deg);
}

/* Petit trait façon coup de crayon */
.hand-note::after {
  content: "";
  position: absolute;
  width: 75%;
  height: 1px;
  left: 5%;
  bottom: -5px;

  background: var(--olive);
  opacity: .45;

  transform: rotate(-2deg);
  transform-origin: left;
}

/* Adaptation mobile */
@media (max-width: 800px) {
  .hand-note {
    margin-top: 35px;
    margin-left: 20px;
    font-size: 30px;
    transform: rotate(-2deg);
  }
}

/* Icône personnalisée — Se ressourcer (option 2 : jeune pousse) */
.icon-sprout{
  display:flex;
  align-items:center;
  height:55px;
}

.icon-sprout svg{
  width:42px;
  height:42px;
  overflow:visible;
}

.icon-sprout svg path{
  fill:none;
  stroke:var(--olive);
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:800px){
  .icon-sprout svg{
    width:40px;
    height:40px;
  }
}

/* v7 — pictogrammes Séjourner + Vivre la culture */
.icon-house,
.icon-guitar{
  display:flex;
  align-items:center;
  height:55px;
}

.icon-house svg{
  width:44px;
  height:44px;
}

.icon-guitar svg{
  width:50px;
  height:45px;
  overflow:visible;
}

.icon-house svg path,
.icon-guitar svg path,
.icon-guitar svg circle{
  fill:none;
  stroke:var(--olive);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:800px){
  .icon-house svg{width:42px;height:42px}
  .icon-guitar svg{width:47px;height:42px}
}

/* v8 — guitare option 2 */
.icon-guitar-option2 svg{
  width:38px;
  height:48px;
  overflow:visible;
}
.icon-guitar-option2 svg path,
.icon-guitar-option2 svg circle{
  fill:none;
  stroke:var(--olive);
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* v8 — Journal de bord */
.journal{background:var(--cream)}
.journal-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:35px;
}
.journal h2{
  font:400 clamp(38px,4vw,55px) var(--serif);
  margin:0;
}
.journal-intro{
  max-width:520px;
  margin:0;
  color:#5a6057;
}
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.journal-card{
  background:var(--paper);
  color:var(--ink);
  border:1px solid rgba(32,38,31,.08);
}
.journal-visual{
  height:190px;
  display:flex;
  align-items:flex-end;
  padding:18px 22px;
  overflow:hidden;
}
.journal-visual span{
  font:400 52px/1 var(--serif);
  color:rgba(255,255,255,.72);
}
.journal-1{background:linear-gradient(135deg,#4e5944,#b6a989)}
.journal-2{background:linear-gradient(135deg,#8b7a5f,#3f4938)}
.journal-3{background:linear-gradient(135deg,#657054,#c6b998)}
.journal-body{padding:20px 22px 24px}
.journal-meta{
  margin:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  color:#777d74;
}
.journal-card h3{
  font:400 23px var(--serif);
  margin:5px 0 8px;
}
.journal-card p:not(.journal-meta){
  color:#5a6057;
  margin:0 0 14px;
}
.journal-card a{font-size:12px}

@media(max-width:800px){
  .icon-guitar-option2 svg{width:36px;height:45px}
  .journal-head{display:block}
  .journal-intro{margin-top:18px}
  .journal-grid{grid-template-columns:1fr}
}



/* v9b — guitare option 2 corrigée : SVG transparent, sans fond */
.icon-guitar-option2-clean{
  display:flex;
  align-items:center;
  height:55px;
}

.icon-guitar-option2-clean svg{
  width:46px;
  height:50px;
  overflow:visible;
}

.icon-guitar-option2-clean svg path,
.icon-guitar-option2-clean svg circle{
  fill:none;
  stroke:var(--olive);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:800px){
  .icon-guitar-option2-clean svg{
    width:43px;
    height:47px;
  }
}

/* Boutons "En savoir plus" assortis au fond de la section événements */
.event-body a{
  display:inline-flex;
  align-items:center;
  margin-top:10px;
  padding:10px 18px;
  background:linear-gradient(135deg,#594534 0%,#6b5540 50%,#4f3d30 100%);
  color:#fff;
  border:1px solid transparent;
  border-radius:999px;
  font-size:12px;
  transition:opacity .2s ease, transform .2s ease;
}

.event-body a:hover{
  opacity:.88;
  transform:translateY(-1px);
}



/* v10 — direction artistique claire / fond blanc */
:root{
  --cream:#f7f6f1;
  --paper:#ffffff;
  --ink:#20261f;
  --olive:#586443;
  --olive-dark:#30382b;
  --line:rgba(32,38,31,.12);
}
body{background:#fff}
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(32,38,31,.09)}

/* Le blanc devient la toile principale ; le beige n'est plus qu'un accent. */
.intro,.story,.journal{background:#fff}
.section{padding-top:112px;padding-bottom:112px}

/* Hero plus lumineux, photo conservée mais voile moins lourd. */
.hero-overlay{background:linear-gradient(90deg,rgba(17,22,16,.62),rgba(17,22,16,.20) 58%,rgba(17,22,16,.05))}
.hero-content{max-width:1320px}
.hero h1{text-shadow:0 2px 20px rgba(0,0,0,.12)}

/* Intro : trois cartes aérées sur blanc. */
.intro-grid{gap:18px;align-items:stretch}
.intro-title{padding-right:70px}
.reason{border:1px solid var(--line);padding:34px 30px 30px;border-radius:3px;background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.reason:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(32,38,31,.07);border-color:rgba(88,100,67,.28)}
.reason p{min-height:95px}

/* Galerie : respiration blanche autour des images. */
.cards.section-small{padding:0 0 112px;background:#fff}
.cards-grid{gap:18px}
.image-card{border-radius:3px;min-height:390px}
.card-shade{background:linear-gradient(transparent 42%,rgba(15,18,14,.72))}

/* Histoire : photo encadrée et texte sur blanc plutôt qu'un grand aplat beige. */
.story{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);padding:0 max(24px,4vw) 112px;gap:0;background:#fff}
.story-image{min-height:620px}
.story-photo-real{border-radius:3px}
.story-copy{background:#f7f6f1;padding:80px clamp(42px,6vw,100px);margin:42px 0 42px -28px;position:relative;z-index:2}

/* Événements : suppression du grand fond brun, accent brun limité aux boutons/détails. */
.events{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
.events .btn-outline{color:var(--ink)}
.events-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.event{border:1px solid var(--line);background:#fff;border-radius:3px;overflow:hidden}
.event-image{height:290px}
.event-body{padding:26px 28px 30px}
.event h3{font-size:26px}

/* Journal très éditorial : cartes blanches, bord fin, visuels moins saturés. */
.journal{border-top:1px solid var(--line)}
.journal-card{background:#fff;border-color:var(--line);border-radius:3px;overflow:hidden}
.journal-visual{height:165px;filter:saturate(.72) brightness(1.08)}

/* CTA final : bande claire au lieu d'un bandeau sombre. */
.reservation{background:#f3f1e9;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reservation .btn-outline{color:var(--ink)}
.reservation h2{font-size:40px}

.footer{background:#fff}

@media(max-width:1100px){
  .intro-grid{gap:14px}
  .reason{padding:28px 24px}
  .story{padding-left:25px;padding-right:25px}
}
@media(max-width:800px){
  .section{padding-top:78px;padding-bottom:78px}
  .intro-grid{gap:0}
  .reason{border:0;border-top:1px solid var(--line);border-radius:0;padding:28px 0}
  .reason:hover{transform:none;box-shadow:none}
  .reason p{min-height:auto}
  .cards.section-small{padding-bottom:78px}
  .cards-grid{gap:12px}
  .story{display:block;padding:0 18px 78px}
  .story-copy{margin:-20px 16px 0;padding:55px 28px}
  .events-grid{grid-template-columns:1fr}
  .event-image{height:240px}
}


/* v11 — Journal de bord : photos réelles + cadrage */
.journal-visual{
  position:relative;
  height:230px;
  padding:0;
  overflow:hidden;
  background:#eeeae1;
  filter:none;
}

.journal-visual img{
  display:block;
  width:100%;
  height:100%;
}

/* 01 — Festival Guitares du Monde :
   afficher toute la photo, sans aucun recadrage. */
.journal-1 img{
  object-fit:contain;
  object-position:center;
  background:#171512;
}

/* 02 — Verger :
   remplir naturellement l'encart. */
.journal-2 img{
  object-fit:cover;
  object-position:center;
}

/* Numérotation lisible par-dessus les photos */
.journal-visual span{
  position:absolute;
  left:20px;
  bottom:16px;
  z-index:2;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.journal-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.28));
  pointer-events:none;
}

@media(max-width:800px){
  .journal-visual{height:220px}
}


/* v12 — Notre histoire : encart Noémie & Quentin plus compact */
.story{
  align-items:center;
}

.story-image{
  min-height:0;
  height:500px;
}

.story-photo-real{
  width:100%;
  height:500px;
  min-height:0;
  object-fit:cover;
  object-position:center center;
}

.story-copy{
  padding-top:62px;
  padding-bottom:62px;
  margin-top:28px;
  margin-bottom:28px;
}

@media(max-width:1100px){
  .story-image,
  .story-photo-real{
    height:460px;
  }
}

@media(max-width:800px){
  .story-image{
    height:auto;
    min-height:0;
  }

  .story-photo-real{
    height:auto;
    min-height:0;
    aspect-ratio:4 / 3;
    object-fit:cover;
  }

  .story-copy{
    margin:-20px 16px 0;
    padding:55px 28px;
  }
}


/* v-mobile — optimisation téléphones */
html, body{max-width:100%;overflow-x:hidden}
img,svg,video,iframe{max-width:100%}
a,button,input,textarea,select{touch-action:manipulation}
p,h1,h2,h3,a,span{overflow-wrap:break-word}
.menu-toggle{min-width:44px;min-height:44px;justify-content:center;align-items:center;cursor:pointer}
@media(max-width:800px){
  .site-header{width:100%}
  .main-nav{
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:50;
  }
  .main-nav a{min-height:44px;display:flex;align-items:center}
  .main-nav .btn{justify-content:center}
  .footer-links{gap:8px 18px}
  .footer-links a{min-height:36px;display:flex;align-items:center}
}
@media(max-width:500px){
  body{font-size:16px}
  .container{width:calc(100% - 32px)}
  .btn{min-height:46px}
  .hero{height:calc(100svh - 68px);min-height:560px}
  .hero h1{font-size:clamp(38px,11vw,46px)}
  .hero-copy{font-size:15px;line-height:1.6}
  .story-copy{margin:-14px 8px 0;padding:46px 22px}
  .event-body{padding:22px 20px 25px}
  .footer{padding-left:0;padding-right:0}
}
@media(max-width:380px){
  .container{width:calc(100% - 26px)}
  .brand img,.brand-centered img{max-width:185px}
  .hero h1{font-size:36px}
}