:root{
  --ink: #122A26;
  --river: #1F5E63;
  --river-light: #3B8791;
  --stone: #EFE7D8;
  --stone-dark: #E2D8C3;
  --moss: #5B7A52;
  --amber: #D98B2B;
  --foam: #FBFAF6;

  --display: "Fraunces", serif;
  --body: "Work Sans", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --max: 1180px;
  --edge: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--foam);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding-inline: var(--edge); }
.eyebrow{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--river);
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--amber);
  display:inline-block;
}

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* ---------- NAV ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(251,250,246,0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(18,42,38,0.08);
}
.nav .wrap{
  display:flex; align-items:center; justify-content: space-between;
  height: 76px;
}
.brand{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration:none;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand span{ color: var(--river); }
.brand-with-logo{ display:flex; align-items:center; gap:12px; }
.logo-img{
  width:42px; height:42px; border-radius:50%;
  object-fit: cover; flex:none;
  box-shadow: 0 0 0 1px rgba(18,42,38,0.08);
}
.brand-text{ line-height:1.1; }
@media (max-width: 520px){
  .brand-text{ display:none; }
}
.site-footer .logo-img{ width:52px; height:52px; }
.nav-links{
  display:flex; gap: 34px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  position:relative;
  padding-bottom: 4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--river); }
.nav-cta{
  background: var(--river);
  color: var(--foam) !important;
  padding: 10px 20px;
  border-radius: 3px;
  text-decoration:none;
  font-size: 0.88rem;
  font-weight: 600;
}
.nav-cta:hover{ background: var(--ink); }
.nav-cta::after{ display:none !important; }
.lang-switch{ display:flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 0.78rem; color: rgba(18,42,38,0.4); }
.lang-btn{
  background:none; border:none; cursor:pointer; padding:4px 2px;
  font-family: var(--mono); font-size: 0.78rem; color: rgba(18,42,38,0.45);
  font-weight: 500; letter-spacing: 0.03em;
}
.lang-btn:hover{ color: var(--ink); }
.lang-btn.active{ color: var(--river); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px){
  .lang-switch{ padding: 16px var(--edge); border-top: 1px solid rgba(18,42,38,0.06); justify-content:flex-start; }
}
.burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.burger span{ display:block; width:24px; height:2px; background: var(--ink); margin:5px 0; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    background: var(--foam);
    flex-direction:column; gap:0;
    border-bottom: 1px solid rgba(18,42,38,0.08);
    max-height:0; overflow:hidden; transition: max-height .35s ease;
  }
  /* Assez haut pour contenir tous les liens + bouton Réserver + sélecteur
     de langue, avec une marge de sécurité ; overflow-y en filet de sécurité
     si le contenu venait à dépasser sur un très petit écran. */
  .nav-links.open{ max-height: min(600px, calc(100vh - 76px)); overflow-y: auto; }
  .nav-links li{ border-top: 1px solid rgba(18,42,38,0.06); }
  .nav-links a{ display:block; padding: 16px var(--edge); }
  .nav-links a::after{ display:none; }
  .nav-cta{ margin: 12px var(--edge) 20px; text-align:center; display:block; }
  .burger{ display:block; }
}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  padding-top: 170px;
  padding-bottom: 64px;
  background: var(--ink);
  color: var(--foam);
  position: relative;
  overflow: hidden;
}
.page-hero .wrap{ position: relative; z-index: 1; }
.page-hero .eyebrow{ color: var(--amber); }
.page-hero .eyebrow::before{ background: var(--foam); }
.page-hero h1{
  color: var(--foam);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  max-width: 22ch;
}
.page-hero p{
  margin-top: 18px;
  max-width: 56ch;
  color: rgba(251,250,246,0.78);
  font-size: 1.05rem;
}
.contours-bg{ position:absolute; inset:0; z-index:0; opacity:0.3; }
.contours-bg svg{ width:100%; height:100%; }

.page-hero.has-hero-image{
  background-size: cover;
  background-position: center;
  padding-top: 210px;
  padding-bottom: 90px;
}
.page-hero.has-hero-image::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(15,35,32,0.82), rgba(15,35,32,0.68));
}
.page-hero.has-hero-image .eyebrow,
.page-hero.has-hero-image h1,
.page-hero.has-hero-image p{
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

/* ---------- HOME HERO ---------- */
.hero{
  position: relative;
  padding-top: 170px;
  padding-bottom: 110px;
  overflow: hidden;
  background: var(--ink);
  color: var(--foam);
}
.hero .wrap{ position:relative; z-index:2; }
.hero .eyebrow{ color: var(--amber); }
.hero .eyebrow::before{ background: var(--foam); }
.hero h1{
  color: var(--foam);
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  max-width: 15ch;
  letter-spacing: -0.01em;
}
.hero h1 em{ font-style: italic; color: var(--river-light); }
.hero-sub{ margin-top: 26px; max-width: 46ch; font-size: 1.08rem; color: rgba(251,250,246,0.82); }
.hero-actions{ margin-top: 40px; display:flex; gap:16px; flex-wrap:wrap; }

/* Hero avec photo de fond + effet de parallaxe (voir js/home.js) */
.hero.has-hero-image{
  min-height: 92vh;
  display:flex;
  align-items:center;
  padding-top: 140px;
  background: var(--ink); /* couleur de secours pendant le chargement de la photo */
}
.hero-bg-layer{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-bg-layer img{
  position:absolute; top:-18%; left:0;
  width:100%; height:136%;
  object-fit:cover;
  will-change: transform;
}
/* Superposition sombre renforcée pour garantir la lisibilité du texte,
   peu importe la photo choisie. Plus foncée en haut (où se trouve le
   texte) et en bas (transition vers la section suivante). */
.hero.has-hero-image::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(15,35,32,0.82) 0%, rgba(15,35,32,0.6) 42%, rgba(15,35,32,0.88) 100%);
}
.hero.has-hero-image .eyebrow,
.hero.has-hero-image h1,
.hero.has-hero-image .hero-sub{
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}

/* ---------- CARROUSEL PHOTO D'ACCUEIL ---------- */
.home-carousel{
  position:relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}
.home-carousel-track{
  display:flex;
  height:100%;
  transition: transform 0.55s cubic-bezier(0.65,0,0.35,1);
}
.home-carousel-slide{
  flex: 0 0 100%;
  position:relative;
  height:100%;
}
.home-carousel-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.home-carousel-slide .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 22px 26px;
  background: linear-gradient(0deg, rgba(18,42,38,0.82), transparent);
  color: var(--foam);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(18,42,38,0.55); color: var(--foam);
  border: none; cursor:pointer; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.carousel-arrow:hover{ background: rgba(18,42,38,0.8); }
.carousel-arrow.prev{ left:14px; }
.carousel-arrow.next{ right:14px; }
.carousel-dots{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.carousel-dot{
  width:8px; height:8px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background: rgba(251,250,246,0.45); transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active{ background: var(--amber); transform: scale(1.25); }
@media (max-width: 640px){
  .home-carousel{ aspect-ratio: 4/3; border-radius:4px; }
  .carousel-arrow{ width:36px; height:36px; font-size:1.2rem; }
}


.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px;
  border-radius: 3px;
  text-decoration:none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--amber); color: var(--ink); }
.btn-primary:hover{ background: #ECA855; }
.btn-ghost{ border-color: rgba(251,250,246,0.4); color: var(--foam); }
.btn-ghost:hover{ background: rgba(251,250,246,0.1); }
.btn-dark{ background: var(--ink); color: var(--foam); }
.btn-dark:hover{ background: var(--river); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

/* ---------- SECTION SHARED ---------- */
section{ padding: 108px 0; }
section.tight{ padding: 72px 0; }
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head p{ margin-top: 18px; color: rgba(18,42,38,0.72); font-size: 1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ---------- A PROPOS ---------- */
.about{ background: var(--stone); }
.about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items:start; }
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; } }

.portrait{
  aspect-ratio: 4/5;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 20%, rgba(59,135,145,0.5), transparent 60%),
    linear-gradient(160deg, var(--river) 0%, var(--ink) 100%);
  position:relative;
  overflow:hidden;
}
.portrait svg{ position:absolute; inset:0; width:100%; height:100%; }

.badge{
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--foam);
  border: 1px solid var(--stone-dark);
  padding: 12px 18px;
  border-radius: 3px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--amber); flex: none; }

.credentials{ list-style:none; margin: 32px 0 0; padding:0; display:grid; gap: 14px; }
.credentials li{
  display:grid; grid-template-columns: 90px 1fr; gap: 18px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(18,42,38,0.1);
  font-size: 0.95rem;
}
.credentials .yr{ font-family: var(--mono); color: var(--river); font-size: 0.85rem; }

/* ---------- TEASER CARDS (accueil) ---------- */
.teaser-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 24px;
}
.teaser-card{
  border: 1px solid rgba(18,42,38,0.12);
  border-radius: 4px;
  padding: 30px;
  background: var(--foam);
  transition: border-color .2s ease, transform .2s ease;
}
.teaser-card:hover{ border-color: var(--river-light); transform: translateY(-3px); }
.teaser-card h3{ font-size: 1.25rem; margin-top: 10px; }
.teaser-card p{ margin-top: 10px; color: rgba(18,42,38,0.72); font-size: 0.95rem; }
.teaser-card a{ display:inline-block; margin-top:16px; font-family: var(--mono); font-size:0.82rem; color: var(--river); text-decoration:none; }
.teaser-card a:hover{ text-decoration: underline; }

/* ---------- AVENTURES / CARNET ---------- */
.log{ background: var(--foam); }
.log-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.log-card{
  border: 1px solid rgba(18,42,38,0.12);
  border-radius: 4px;
  padding: 28px;
  background: var(--foam);
  position: relative;
  transition: border-color .2s ease, transform .2s ease;
}
.log-card:hover{ border-color: var(--river-light); transform: translateY(-3px); }
.log-card .coords{ font-family: var(--mono); font-size: 0.72rem; color: var(--moss); letter-spacing: 0.03em; }
.log-card h3{ font-size: 1.3rem; margin-top: 10px; }
.log-card .meta{ display:flex; gap: 16px; flex-wrap:wrap; margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; color: rgba(18,42,38,0.6); }
.log-card .divider{ margin: 18px 0; height: 1px; background: repeating-linear-gradient(to right, rgba(18,42,38,0.25) 0 6px, transparent 6px 11px); }
.log-card p.story{ font-size: 0.95rem; color: rgba(18,42,38,0.78); }
.tag{
  display:inline-block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--stone); color: var(--ink); padding: 4px 10px;
  border-radius: 2px; margin-top: 16px;
}
.empty-note{
  font-family: var(--mono); font-size: 0.9rem; color: rgba(18,42,38,0.55);
  border: 1px dashed rgba(18,42,38,0.25); border-radius: 4px; padding: 24px;
}

/* ---------- COURS ---------- */
.courses{ background: var(--ink); color: var(--foam); }
.courses .section-head p{ color: rgba(251,250,246,0.72); }
.courses .eyebrow{ color: var(--amber); }
.courses .eyebrow::before{ background: var(--foam); }

.course-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.course-card{ border: 1px solid rgba(251,250,246,0.16); border-radius: 4px; padding: 30px 26px; }
.course-card-link{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.course-card-link:hover{ border-color: var(--river-light); transform: translateY(-3px); }
.course-card-more{
  display:block; margin-top:18px; font-family: var(--mono); font-size:0.8rem; color: var(--amber);
}
.course-card .lvl{ font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--river-light); letter-spacing: 0.05em; }
.course-card h3{ color: var(--foam); margin-top: 10px; font-size: 1.25rem; }
.course-card p{ color: rgba(251,250,246,0.68); font-size: 0.92rem; margin-top: 10px; }
.course-card .price{ margin-top: 20px; font-family: var(--display); font-size: 1.6rem; color: var(--amber); }
.course-card .price small{ font-family: var(--body); font-size: 0.7rem; color: rgba(251,250,246,0.55); }

/* ---------- RESERVATION ---------- */
.booking-section{ background: var(--ink); color: var(--foam); }
.booking{
  background: rgba(251,250,246,0.04);
  border: 1px solid rgba(251,250,246,0.14);
  border-radius: 6px;
  padding: clamp(24px, 4vw, 48px);
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px){ .booking{ grid-template-columns: 1fr; } }

.booking h3{ color: var(--foam); font-size: 1.4rem; margin-bottom: 6px; }
.booking .hint{ color: rgba(251,250,246,0.6); font-size: 0.9rem; margin-bottom: 26px; }

/* ---------- LISTE DE CRÉNEAUX DISPONIBLES (remplace le calendrier) ---------- */
.slots-list-panel{
  max-height: 460px; overflow-y: auto;
  border: 1px solid rgba(251,250,246,0.14); border-radius: 6px;
  padding: 6px;
}
.slots-loading, .slots-empty{
  font-family: var(--mono); font-size: 0.85rem; color: rgba(251,250,246,0.55);
  padding: 20px 14px;
}
.slots-date-group + .slots-date-group{ margin-top: 4px; }
.slots-date-header{
  font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--amber);
  padding: 14px 12px 6px;
}
.slot-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 13px 14px; border-radius: 4px; cursor:pointer;
  transition: background .15s ease;
}
.slot-list-item:hover{ background: rgba(251,250,246,0.07); }
.slot-list-item.selected{ background: var(--amber); }
.slot-list-item .slot-time{
  font-family: var(--mono); font-weight:600; font-size: 0.92rem; color: var(--foam);
}
.slot-list-item.selected .slot-time{ color: var(--ink); }
.slot-list-item .slot-remaining{
  font-family: var(--mono); font-size: 0.76rem; color: rgba(251,250,246,0.6);
}
.slot-list-item.selected .slot-remaining{ color: rgba(18,42,38,0.75); }
.slot-list-item .slot-check{
  width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(251,250,246,0.35);
  flex:none; display:flex; align-items:center; justify-content:center;
}
.slot-list-item.selected .slot-check{ border-color: var(--ink); background: var(--ink); }
.slot-list-item.selected .slot-check::after{ content:"✓"; color: var(--amber); font-size:0.7rem; }

.booking-form{ display:flex; flex-direction:column; gap: 16px; }
.field label{
  display:block; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgba(251,250,246,0.6); margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width:100%; background: rgba(251,250,246,0.06); border: 1px solid rgba(251,250,246,0.2);
  border-radius: 3px; padding: 12px 14px; color: var(--foam);
  font-family: var(--body); font-size: 0.95rem;
}
/* Les <select> natifs affichent leur liste déroulante via l'OS, qui ne gère
   pas bien un fond semi-transparent (rgba) — ça produit un effet de texte
   dédoublé/fantôme dans la liste sur Chrome. On force donc un fond opaque
   pour le select et ses options, tout en gardant le même rendu visuel. */
.field select{ background: #17322D; }
.field select option{ background: #17322D; color: var(--foam); }
.field textarea{ resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder{ color: rgba(251,250,246,0.35); }
.field input:focus, .field select:focus, .field textarea:focus{ outline: 2px solid var(--amber); outline-offset: 2px; }

.summary{
  margin-top: 4px; background: rgba(251,250,246,0.06); border: 1px dashed rgba(251,250,246,0.25);
  border-radius: 3px; padding: 14px 16px; font-family: var(--mono); font-size: 0.8rem; color: rgba(251,250,246,0.75);
}
.form-msg{ margin-top: 14px; font-size: 0.88rem; display:none; }
.form-msg.show{ display:block; }
.form-msg.ok{ color: var(--river-light); }
.form-msg.err{ color: #E27D5B; }

/* ---------- CONTACT ---------- */
.contact{ background: var(--stone); }
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-list{ list-style:none; margin: 24px 0 0; padding:0; display:grid; gap:14px; }
.contact-list a{ text-decoration:none; }
.contact-list .k{ font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--river); display:block; margin-bottom: 3px; }
.contact-list .v{ font-size: 1rem; }

.map-frame{
  border-radius: 4px; overflow:hidden; border: 1px solid var(--stone-dark);
  aspect-ratio: 4/3; background: linear-gradient(160deg, var(--river) 0%, var(--ink) 100%); position:relative;
}
.map-frame svg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
.map-frame .pin{
  position:absolute; top:44%; left:52%; width: 14px; height:14px; border-radius:50% 50% 50% 0;
  background: var(--amber); transform: rotate(-45deg) translate(-50%,-50%);
}

.contact-form{ margin-top: 32px; display:flex; flex-direction:column; gap:16px; max-width: 480px; }
.contact-form .field label{ color: rgba(18,42,38,0.6); }
.contact-form .field input, .contact-form .field textarea{
  background: var(--foam); border: 1px solid var(--stone-dark); color: var(--ink);
}
.contact-form .field input:focus, .contact-form .field textarea:focus{ outline: 2px solid var(--river); outline-offset: 2px; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--stone); padding-top: 80px;}
.site-footer-grid{ display:grid; grid-template-columns: 1.1fr 0.8fr 0.9fr 1.1fr; gap: 40px; }
@media (max-width: 900px){ .site-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .site-footer-grid{ grid-template-columns: 1fr; } }
.foot-tagline{ margin-top: 12px; color: rgba(18,42,38,0.65); font-size: 0.92rem; max-width: 32ch; }
.foot-links{ list-style:none; margin: 12px 0 0; padding:0; display:grid; gap:10px; font-size: 0.92rem; }
.foot-links a{ text-decoration:none; }
.foot-links a:hover{ text-decoration: underline; }
.site-footer .k{ font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--river); }
.foot-bottom{
  margin-top: 60px; border-top: 1px solid var(--stone-dark); padding: 26px var(--edge);
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px;
  font-family: var(--mono); font-size: 0.75rem; color: rgba(18,42,38,0.55);
}

/* ---------- INFOLETTRE (pied de page) ---------- */
.foot-newsletter-text{ margin: 12px 0 14px; font-size: 0.9rem; color: rgba(18,42,38,0.65); max-width: 30ch; }
.foot-newsletter-form{ display:flex; gap:8px; flex-wrap:wrap; }
.foot-newsletter-form input{
  flex:1; min-width: 140px; padding: 10px 12px; border: 1px solid var(--stone-dark); border-radius: 3px;
  font-family: var(--body); font-size: 0.88rem; background: var(--foam); color: var(--ink);
}
.foot-newsletter-form button{
  padding: 10px 16px; border-radius: 3px; border: none; background: var(--river); color: var(--foam);
  font-family: var(--body); font-weight: 600; font-size: 0.86rem; cursor: pointer; white-space: nowrap;
}
.foot-newsletter-form button:hover{ background: var(--ink); }

/* ---------- WIDGET CONTACT FLOTTANT ---------- */
.contact-widget-btn{
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  background: var(--amber); color: var(--ink);
  border: none; border-radius: 30px;
  padding: 14px 22px;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  display:flex; align-items:center; gap:8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(18,42,38,0.25);
  transition: transform .18s ease, background .18s ease;
}
.contact-widget-btn::before{ content:"💬"; font-size:1rem; }
.contact-widget-btn:hover{ background:#ECA855; transform: translateY(-2px); }
@media (max-width: 520px){
  .contact-widget-btn{ right:16px; bottom:16px; padding:12px 18px; font-size:0.85rem; }
}

.contact-widget-overlay{
  display:none;
  position: fixed; inset:0; z-index: 600;
  background: rgba(18,42,38,0.65);
  align-items:center; justify-content:center;
  padding: 20px;
}
.contact-widget-overlay.open{ display:flex; }
.contact-widget-modal{
  position:relative;
  background: var(--ink); color: var(--foam);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 40px);
  max-width: 440px; width:100%;
  max-height: 90vh; overflow-y:auto;
}
.contact-widget-modal h3{ color: var(--foam); font-size: 1.3rem; margin-bottom:6px; }
.contact-widget-modal .hint{ color: rgba(251,250,246,0.65); font-size:0.9rem; margin-bottom:20px; }
.contact-widget-modal .field{ margin-bottom:14px; }
.contact-widget-modal .field label{
  display:block; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgba(251,250,246,0.6); margin-bottom: 6px;
}
.contact-widget-modal .field input, .contact-widget-modal .field textarea{
  width:100%; background: rgba(251,250,246,0.06); border: 1px solid rgba(251,250,246,0.2);
  border-radius: 3px; padding: 10px 12px; color: var(--foam); font-family: var(--body); font-size: 0.92rem;
}
.contact-widget-modal .field textarea{ resize:vertical; min-height:80px; }
.contact-widget-close{
  position:absolute; top:14px; right:14px;
  background:none; border:none; color: rgba(251,250,246,0.6);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:4px;
}
.contact-widget-close:hover{ color: var(--foam); }

/* ---------- ADMIN ---------- */
.admin-body{ background: var(--stone); min-height: 100vh; }

/* Les pages admin sont sur fond clair — on surcharge les styles de .field
   (pensés à l'origine pour les sections sombres du site public) pour que
   les étiquettes et le texte saisi restent lisibles. */
.admin-body .field label{ color: rgba(18,42,38,0.65); }
.admin-body .field input,
.admin-body .field select,
.admin-body .field textarea{
  background: var(--foam);
  border: 1px solid var(--stone-dark);
  color: var(--ink);
}
.admin-body .field input::placeholder,
.admin-body .field textarea::placeholder{ color: rgba(18,42,38,0.35); }
.admin-body .field input:focus,
.admin-body .field select:focus,
.admin-body .field textarea:focus{ outline: 2px solid var(--river); outline-offset: 2px; }
.admin-wrap{ max-width: 960px; margin: 0 auto; padding: 60px var(--edge); }

/* ---------- ADMIN — disposition avec barre latérale ---------- */
.admin-layout{ display:flex; min-height:100vh; align-items:flex-start; }

.admin-sidebar{
  width: 250px; flex: none;
  background: var(--ink); color: var(--foam);
  padding: 32px 22px;
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 36px; text-decoration:none; }
.admin-sidebar-brand .logo-img{ width:38px; height:38px; }
.admin-sidebar-brand .brand-text{ font-size:0.98rem; color:var(--foam); }
.admin-sidebar-brand .brand-text span{ color: var(--river-light); }

.admin-sidebar-nav{ display:flex; flex-direction:column; gap:4px; }
.admin-sidebar-nav a{
  color: rgba(251,250,246,0.72); text-decoration:none;
  padding: 11px 14px; border-radius:4px; font-size:0.9rem;
  transition: background .15s ease, color .15s ease;
}
.admin-sidebar-nav a:hover{ background: rgba(251,250,246,0.08); color: var(--foam); }
.admin-sidebar-nav a.active{ background: var(--river); color: var(--foam); font-weight:600; }

.admin-sidebar-footer{ margin-top:auto; padding-top:20px; border-top:1px solid rgba(251,250,246,0.15); }
.admin-sidebar-footer a{ color: rgba(251,250,246,0.6); text-decoration:none; font-size:0.85rem; }
.admin-sidebar-footer a:hover{ color: var(--foam); }

.admin-main{ flex:1; padding: 48px var(--edge); max-width: 980px; }

@media (max-width: 860px){
  .admin-layout{ flex-direction: column; }
  .admin-sidebar{
    width:100%; height:auto; position:relative;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px;
    padding:18px 20px;
  }
  .admin-sidebar-brand{ margin-bottom:0; }
  .admin-sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .admin-sidebar-footer{ margin-top:0; margin-left:auto; border-top:none; padding-top:0; }
  .admin-main{ padding: 28px var(--edge); }
}
.admin-card{ background: var(--foam); border: 1px solid var(--stone-dark); border-radius: 6px; padding: 32px; margin-bottom: 28px; }
.admin-login-card{ max-width: 380px; margin: 90px auto; }
.admin-table{ width:100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td{ text-align:left; padding: 10px 12px; border-bottom: 1px solid var(--stone-dark); }
.admin-table th{ font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--river); }
.admin-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; }
.admin-bar .brand{ font-size: 1.05rem; }
.pill{ font-family: var(--mono); font-size: 0.7rem; padding: 3px 9px; border-radius: 20px; background: var(--stone); }
.pill.ok{ background: rgba(91,122,82,0.15); color: var(--moss); }
.pill.closed{ background: rgba(18,42,38,0.1); color: rgba(18,42,38,0.55); }
.pill.booked{ background: rgba(217,139,43,0.18); color: #A6641B; }

.time-chip{
  font-family: var(--mono); font-size: 0.82rem; padding: 9px 16px;
  border: 1px solid var(--stone-dark); border-radius: 20px;
  background: var(--foam); color: var(--ink); cursor: pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.time-chip.selected{ background: var(--river); border-color: var(--river); color: var(--foam); }
.time-chip .remove{ font-weight:700; }

.slot-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0; border-bottom: 1px solid var(--stone-dark); gap: 16px; flex-wrap: wrap;
}
.slot-row:last-child{ border-bottom:none; }
.slot-row .time{ font-family: var(--mono); font-size: 0.95rem; min-width: 60px; }
.slot-row .actions{ display:flex; gap:10px; align-items:center; }
.slot-row .actions button, .slot-row .actions a{
  font-family: var(--mono); font-size: 0.78rem; background:none; border:none; cursor:pointer;
  color: var(--river); text-decoration:none;
}
.slot-row .actions button:disabled{ color: rgba(18,42,38,0.3); cursor:not-allowed; }

.home-image-row{
  display:flex; align-items:center; gap:16px;
  padding: 14px 0; border-bottom: 1px solid var(--stone-dark);
}
.home-image-row:last-child{ border-bottom:none; }
.home-image-row img{
  width:100px; height:70px; object-fit:cover; border-radius:3px; border:1px solid var(--stone-dark); flex:none;
}
.home-image-row .caption-input{
  flex:1; padding:8px 10px; border:1px solid var(--stone-dark); border-radius:3px; font-family:var(--body); font-size:0.88rem;
}
.home-image-row .row-actions{ display:flex; gap:6px; align-items:center; flex:none; }
.home-image-row .row-actions button{
  background:none; border:1px solid var(--stone-dark); border-radius:3px; width:30px; height:30px;
  cursor:pointer; font-size:0.9rem; color:var(--ink);
}
.home-image-row .row-actions button:disabled{ opacity:0.3; cursor:not-allowed; }
.home-image-row .row-actions .del-btn{ color:#B5482F; border-color:var(--stone-dark); }
.home-image-row .hero-tag{
  font-family:var(--mono); font-size:0.65rem; text-transform:uppercase; background:var(--amber); color:var(--ink);
  padding:2px 6px; border-radius:2px; flex:none;
}
.link-del{ color:#B5482F; text-decoration:none; font-family: var(--mono); font-size: 0.78rem; }
.link-del:hover{ text-decoration: underline; }

.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- MEDIA (photos/vidéos d'aventures) ---------- */
.log-card .media-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; margin: 16px 0;
}
.log-card .media-gallery img{
  width:100%; height:80px; object-fit:cover; border-radius:3px; cursor:pointer;
  border: 1px solid rgba(18,42,38,0.1);
}
.log-card .media-gallery video{
  width:100%; height:80px; object-fit:cover; border-radius:3px; background:#000;
}
.log-card .media-video-embed{
  grid-column: 1 / -1; aspect-ratio: 16/9; border-radius:4px; overflow:hidden;
}
.log-card .media-video-embed iframe{ width:100%; height:100%; border:0; }

.media-lightbox{
  position:fixed; inset:0; background:rgba(18,42,38,0.92); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
}
.media-lightbox img{ max-width:100%; max-height:100%; border-radius:4px; }

.admin-media-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.admin-media-item{ position:relative; }
.admin-media-item img, .admin-media-item video{
  width:100%; height:90px; object-fit:cover; border-radius:3px; border:1px solid var(--stone-dark); background:#000;
}
.admin-media-item .media-del{
  position:absolute; top:4px; right:4px; background:rgba(18,42,38,0.75); color:var(--foam);
  border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:0.85rem; line-height:1;
}
.admin-media-item .media-badge{
  position:absolute; bottom:4px; left:4px; background:rgba(18,42,38,0.75); color:var(--foam);
  font-family:var(--mono); font-size:0.62rem; padding:2px 6px; border-radius:2px; text-transform:uppercase;
}