@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

:root {
  /* Couleurs */
  --bg: #fcf9f4;
  --surface: #ffffff;
  --text: #2a2a2a;
  --muted: #6d6a67;
  --accent: #c79a6b;
  --accent-strong: #b07e4b;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* RFX */
  --radius: 18px;
  --radius-sm: 12px;
  --gap: clamp(16px, 2vw, 28px);
  --container: min(1120px, 92vw);
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; 
  color: var(--text); 
  background: var(--bg);
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6; 
  text-rendering: optimizeLegibility;
}

/* Lissage typographique pour un rendu plus fin et net */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


h1,h2,h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; }
h1 { font-size: clamp(2rem, 2.8rem + 1vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); margin: 0 0 .6rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }

p { margin: .5rem 0 1rem; }
.muted { color: var(--muted); }

/* Utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.container { width: var(--container); margin: 0 auto; padding: 0 0; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section.alt { background: var(--surface); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; transition: all .3s ease; background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid rgba(0,0,0,.04); }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.site-header .brand { text-decoration: none; color: inherit; display: grid; }
.brand-title { color: var(--accent); font-weight: 600; letter-spacing: .5px; }
.brand-sub { font-size: .9rem; color: var(--muted); }
.main-nav { display: flex; gap: 8px; padding: 6px; border-radius: 999px; }
.main-nav a { text-decoration: none; color: var(--text); font-weight: 600; padding: 8px 12px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.main-nav a:hover { background: rgba(0,0,0,.05); }
.site-header.scrolled { background: rgba(20,20,20,.82); backdrop-filter: blur(12px); box-shadow: var(--shadow); border-bottom-color: transparent; }
.site-header.scrolled .main-nav a { color: #f5f5f5; }
.site-header.scrolled .brand-title, .site-header.scrolled .brand-sub { color: #f5f5f5; }

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: linear-gradient(to right, rgba(0,0,0,.04), transparent);
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width .1s linear;
}

/* Hero DISPLAY=GRID*/
.hero {
  position: relative;
  min-height: auto;
  padding: clamp(80px, 12vh, 160px) 0; /* hauteur souple selon écran */
  text-align: center;
  background: var(--bg);
}

.hero-img {
  position: relative;
  display: block;
  max-width: 820px;      /* image large sur desktop */
  width: 85%;            /* image adaptative */
  height: auto;
  margin: 0 auto 2.5rem; /* centrée + espace sous l’image */
  border-radius: 20px;   /* angles doux */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* ombre élégante */
  object-fit: contain;
  z-index: 1;
}

.hero-content {
  position: relative;
  color: var(--text);
  padding: 0;
  z-index: 2;
}

.hero-content h1 {
  margin-top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  color: var(--text);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15));
  z-index: 1;
}
.hero h1 { margin: 0 0 30px; }
.hero p { max-width: 720px; margin: 0 auto 22px; }
.hero-cta { display: flex; color:#c79a6b59;  gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Ancien style Countdown (remplacé pour lisibilité)
.countdown { margin-top: 16px; color:#dd862859;  font-weight: 600; opacity: .95; }
.countdown-bar { width: min(720px, 90vw); height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); margin: 10px auto 0; overflow: hidden; }
.countdown-bar__fill { height: 100%; width: 0%; background: #b99d8a; opacity: .9; transition: width .6s ease; }
*/

/* ===== Countdown – lisibilité améliorée ===== */
.countdown {
  /* tailles + rythme */
  font-size: clamp(1rem, 0.95rem + .4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums; /* chiffres alignés, plus stables */
  
  /* contraste + fond pill discret */
  color: var(--text);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(3px);
  padding: .35rem .7rem;
  border-radius: 999px;
  
  /* disposition */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  
  /* relief subtil */
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* mettre les nombres en valeur */
.countdown [data-days],
.countdown [data-hours],
.countdown [data-mins] {
  color: var(--accent-strong);
}

/* barre de progression plus visible */
.countdown-bar {
  width: min(640px, 92vw);
  height: 8px; /* + haute */
  border-radius: 999px;
  background: rgba(0,0,0,.08); /* visible sur fond clair */
  margin: 10px auto 0;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px rgba(0,0,0,.06);
}

.countdown-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width .6s ease;
}

/* mode sombre : contraste adapté */
body.dark .countdown {
  background: rgba(0,0,0,.55);
  color: #f5f5f5;
}
body.dark .countdown [data-days],
body.dark .countdown [data-hours],
body.dark .countdown [data-mins] {
  color: var(--accent);
}
body.dark .countdown-bar {
  background: rgba(255,255,255,.15);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.35);
}

/* petit écran : garder le “pill” compact */
@media (max-width: 600px) {
  .countdown { font-size: 1rem; padding: .3rem .6rem; }
  .countdown-bar { height: 7px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 1px solid transparent; transition: transform .06s ease, background .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(199,154,107,0.35); }
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(199,154,107,0.45); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }

/* Bouton Maps lisible (clair & sombre) */
.btn-map {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 8px 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #e6e1db;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: background .2s, box-shadow .2s, transform .06s;
}
.btn-map:hover { background: #f7f4ef; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.btn-map:active { transform: translateY(1px); }

/* Cards / utilities */
.card { background: var(--surface); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }
.card.soft { background: #fff6ed; }
.sep { border: 0; border-top: 1px solid #ecdccd; margin: 12px 0; }

.grid-2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1.1fr .9fr; } }

/* Map embed */
.map-embed { margin-top: 18px; overflow: hidden; }
.map-embed iframe { border: 0; width: 100%; height: 360px; border-radius: var(--radius-sm); box-shadow: 0 4px 18px rgba(0,0,0,.06); }

/* Form */
.form { margin-top: 14px; }
.form-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 820px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; }
.field.mt-8 { margin-top: 8px; }
.field.col-span-2 { grid-column: 1 / -1; }
label { font-weight: 600; margin-bottom: 6px; }
input, select, textarea { border: 1px solid #e6e1db; background: #fff; border-radius: var(--radius-sm); padding: 12px 14px; font: inherit; transition: box-shadow .2s ease, border-color .2s ease; }
input:focus, select:focus, textarea:focus { outline: 2px solid transparent; box-shadow: 0 0 0 3px rgba(199,154,107,.35); }
.hidden { display: none !important; }
.check { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px; }
.error { color: #b42318; min-height: 1em; font-size: .9rem; }
.form-status { margin-top: 10px; color: var(--muted); }

/* Validation states */
.is-invalid { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229,72,77,.15) !important; }
.is-valid { border-color: #2ecc71 !important; box-shadow: 0 0 0 3px rgba(46,204,113,.18) !important; background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22><path fill=%22%232ecc71%22 d=%22M7.8 14.3L3.5 10l1.4-1.4 2.9 2.9 7.3-7.3 1.4 1.4z%22/></svg>'); background-repeat: no-repeat; background-position: right .6rem center; background-size: 18px; padding-right: 2.2rem; }

::placeholder { font-style: italic; color: #8e8a86; }

/* Lists */
.list { padding-left: 1.1rem; margin: .5rem 0 0; }
.list li { margin: .25rem 0; }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Footer */
.site-footer { padding: 36px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Improve hero text visibility */
.hero-overlay { display: none; }
.hero-content h1,
.hero-content p { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }

/* --- Hébergements compacts --- */
.hebergements-compact details {
  border: 1px solid #eee4d7;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: .6rem .8rem;
  margin: .6rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hebergements-compact details.toggling { transform: scale(1.01); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.hebergements-compact summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.hebergements-compact summary::-webkit-details-marker { display: none; }
.hotel-list {
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
}
.hotel-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .4rem .2rem;
}
.hotel-list li span { color: var(--text); }
@media (min-width: 700px) {
  .hotel-list { grid-template-columns: 1fr 1fr; }
}

/* --- Dark mode --- */
body.dark {
  --bg: #1b1b1b; 
  --surface: #2a2a2a; 
  --text: #f5f5f5; 
  --muted: #dddddd; 
  --accent: #d2a679; 
  --accent-strong: #c68c53;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
}
body.dark .card,
body.dark .section.alt { background-color: #2f2f2f; }
body.dark .muted { color: #dddddd; }
body.dark .list li { color: var(--text); }
body.dark .hero-content h1,
body.dark .hero-content p { text-shadow: none; }
body.dark .btn-ghost { border-color: rgba(255,255,255,.25); }
body.dark .btn-map {
  background: #f1f1f1;
  color: #1a1a1a;
  border-color: #d8d8d8;
}
body.dark .site-header { background: rgba(20,20,20,.90) !important; }
body.dark .site-header.scrolled { background: rgba(10,10,10,.85) !important; }
body.dark .site-header .main-nav a,
body.dark .site-header .brand-title,
body.dark .site-header .brand-sub { color: #f5f5f5 !important; }

/* Event lines */
.event-line { display:flex; align-items:flex-start; gap:.8rem; }
.date-badge{
  flex:none; font-weight:700; font-size:.9rem; line-height:1;
  background:#fff; color:#1f1f1f; border:1px solid #e6e1db;
  border-radius:999px; padding:.45rem .6rem; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.event-block{ display:flex; flex-direction:column; gap:.25rem; }
.event-title{ margin:.1rem 0 0; font-size:1.05rem; }
.event-place{ margin:0 0 .4rem; }

body.dark .date-badge{ background:#f1f1f1; color:#1a1a1a; border-color:#d8d8d8; }
body.dark .event-place,
body.dark .event-place a,
body.dark .hotel-list li span,
body.dark .hotel-list a { color: var(--text) !important; }

.event-address{ text-decoration:none; border-bottom:1px dotted currentColor; }
.event-address:hover{ text-decoration:underline; }

@media (max-width: 600px) {
  .site-header,
  .main-nav {
    height: auto;
    overflow: hidden;
  }

  .main-nav a {
    padding: 8px 10px;
    font-size: 0.85rem; /* un peu plus petit pour tout faire tenir */
  }
}

/* === Liens en mode clair – neutres et élégants === */
a {
  color: var(--text);                   /* même couleur que le texte */
  text-decoration: none;                /* supprime le soulignement bleu */
  border-bottom: 1px dotted rgba(0,0,0,0.2); /* fine ligne discrète */
  transition: color .2s, border-color .2s;
}

a:hover {
  color: var(--accent);                 /* doré au survol */
  border-bottom-color: var(--accent);
}


/* === Dark mode — lisibilité section Hébergements === */
body.dark .hebergements-compact details {
  background: #2a2a2a;              /* fond sombre lisible */
  border-color: #3a3a3a;             /* bordure assombrie */
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
body.dark .hebergements-compact details[open] {
  background: #262626;               /* léger contraste à l'ouverture */
}
body.dark .hebergements-compact summary {
  color: var(--text);                /* garde le texte clair en dark */
}
body.dark .hotel-list li span,
body.dark .hotel-list a {
  color: var(--text) !important;     /* garantit le contraste des lignes & liens */
}
/* séparateurs plus visibles en dark */
body.dark .sep {
  border-top-color: rgba(255,255,255,.18);
}
/* badges de date déjà adaptés, on renforce juste la bordure */
body.dark .date-badge {
  background: #2f2f2f;
  color: #f1f1f1;
  border-color: #4a4a4a;
}

/* === Dark mode – amélioration contraste des liens et boutons === */

/* 1️⃣ Boutons de liens externes (Booking / Abritel / Gîtes.fr) */
body.dark .hotel-list a {
  background: #3a3a3a;             /* fond gris foncé */
  color: #f5f5f5 !important;       /* texte clair */
  border: 1px solid #555;
  padding: .35rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: background .2s, color .2s;
}
body.dark .hotel-list a:hover {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(199,154,107,.4);
}

/* 2️⃣ Liens dans la section "Infos" (ex : Essarois, Voulaines-les-Templiers) */
body.dark .section a,
body.dark .event-place a,
body.dark .event-address {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
}
body.dark .section a:hover,
body.dark .event-place a:hover,
body.dark .event-address:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
}