/* ============================================================
   CUSTOM — Ô Fil de l'Eau, Pointe-Noire
   Project-specific styles that extend the base style.css
   ============================================================ */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ── Brand token overrides (authoritative for this project) ─
   CDC WEB-1382: teal naturel + ambre foncé, tropical tamisé  */
:root {
  --color-primary: #3D2B1C;
  --color-secondary: #D97706;
  --color-accent: #EA580C;
  --color-bg: #FAFAF9;
  --color-text: #1C1917;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Source Sans 3", "Inter", system-ui, sans-serif;
}

/* ── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--color-primary);
  color: var(--color-bg);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; }

/* ── Section alternate background ─────────────────────── */
.section--alt {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
}

/* ── Eyebrow / section label (alias) ──────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-secondary);
  display: block;
  margin-bottom: 0.75rem;
}

/* ── Feature cards (homepage atouts) ─────────────────── */
.feature-card {
  padding: 2rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.feature-card:hover {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: translateY(-4px);
}
.feature-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}
.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* ── Gîte cards ──────────────────────────────────────── */
.gite-card {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.gite-card:hover {
  box-shadow: 0 10px 32px color-mix(in srgb, var(--color-primary) 16%, transparent);
  transform: translateY(-4px);
}
.gite-card__body { padding: 1.75rem; }
.gite-card__body h3 { margin-bottom: 0.75rem; }
.gite-card__body p {
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin-bottom: 1.25rem;
}
.gite-card__amenities { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gite-card__tag {
  display: inline-block;
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-bg));
  color: color-mix(in srgb, var(--color-secondary) 90%, #000);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 35%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.gite-card__cta { margin-top: 1.5rem; }

/* ── Gite highlight (full-width on nos-gites page) ────── */
.gite-highlight {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 8%, transparent);
  margin-bottom: 2.5rem;
}
.gite-highlight__inner {
  display: grid;
  gap: 0;
}
.gite-highlight__media .visual-placeholder {
  border-radius: 0;
}
.gite-highlight__body { padding: 2rem 1.75rem; }
.gite-highlight__body h2 { margin-bottom: 0.5rem; }
.gite-highlight__sub {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.gite-highlight__amenities { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.25rem; }

/* ── OTA / booking links ──────────────────────────────── */
.ota-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.ota-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.25rem;
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-primary));
  color: var(--color-primary);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.ota-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  text-decoration: none;
}
/* OTA on dark backgrounds */
.ota-btn--light {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.3);
}
.ota-btn--light:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ── CTA block (dark bg) ─────────────────────────────── */
.cta-block {
  background: var(--color-primary);
  text-align: center;
  padding-block: 5rem;
  color: var(--color-bg);
}
.cta-block h2 { color: var(--color-bg); margin-bottom: 0.75rem; }
.cta-block p { color: color-mix(in srgb, var(--color-bg) 78%, transparent); max-width: 540px; margin-inline: auto; margin-bottom: 2rem; }
.cta-block .cta-phone {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-bg);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.cta-block .cta-phone:hover { color: var(--color-secondary); }

/* ── Activities / destination cards ─────────────────── */
.activity-card {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 6%, transparent);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.activity-card:hover {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: translateY(-3px);
}
.activity-card__body { padding: 1.5rem; }
.activity-card__badge {
  display: inline-block;
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  color: color-mix(in srgb, var(--color-accent) 80%, #000);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

/* ── Reservation — booking options ─────────────────── */
.booking-direct {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
  border: 2px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 10px;
  padding: 2rem;
}
.booking-direct h2 { margin-bottom: 1rem; }
.booking-ota {
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 10px;
  padding: 2rem;
  background: var(--color-bg);
}
.booking-ota h2 { margin-bottom: 0.75rem; }

/* ── Info strip ─────────────────────────────────────── */
.info-strip {
  background: var(--color-secondary);
  color: var(--color-bg);
  padding-block: 2.5rem;
  text-align: center;
}
.info-strip h2 { color: var(--color-bg); margin-bottom: 0.5rem; }
.info-strip p { color: rgba(255,255,255,0.85); max-width: 600px; margin-inline: auto; }

/* ── Detail list ─────────────────────────────────────── */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.detail-list dt {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
  margin-top: 0.25rem;
}
.detail-list dd { margin-inline-start: 0; }

/* ── Reservation form ─────────────────────────────────── */
.form-row-2 { display: grid; gap: 1rem; }
@media (min-width: 480px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

/* ── FAQ ────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 1.25rem; }
details.faq-item {
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
details.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-bg));
  transition: background 0.15s;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--color-secondary);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item summary:hover { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg)); }
details.faq-item .faq-body { padding: 1rem 1.25rem 1.25rem; }

/* ── Map ────────────────────────────────────────────── */
.map-embed {
  border-radius: 8px;
  overflow: hidden;
}
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ============================================================
   ANIMATION PASS — WEB-1475 · AnimationDesigner
   CSS-only, no external lib. Tout est encapsulé dans
   prefers-reduced-motion: no-preference.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Hero entrance — fade-up séquentiel ─────────────── */
  @keyframes ofdl-fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-content .section-label { animation: ofdl-fade-up 0.55s ease-out 0.15s both; }
  .hero-content h1              { animation: ofdl-fade-up 0.65s ease-out 0.35s both; }
  .hero-content .hero-intro     { animation: ofdl-fade-up 0.55s ease-out 0.55s both; }
  .hero-content .hero-cta       { animation: ofdl-fade-up 0.55s ease-out 0.72s both; }

  /* ── 2. Stagger 130 ms pour les enfants de [data-stagger] ─ */
  [data-stagger] > *:nth-child(1) { --s: 0; }
  [data-stagger] > *:nth-child(2) { --s: 1; }
  [data-stagger] > *:nth-child(3) { --s: 2; }
  [data-stagger] > *:nth-child(4) { --s: 3; }
  [data-stagger] > *:nth-child(5) { --s: 4; }
  [data-stagger] > *.reveal       { transition-delay: calc(var(--s, 0) * 130ms); }

  /* ── 3. Visual placeholders — dégradé en dérive douce ──── */
  @keyframes ofdl-gradient-drift {
    0%, 100% { background-position: 0%   50%; }
    50%       { background-position: 100% 50%; }
  }

  .visual-placeholder {
    background-size: 220% 220%;
    animation: ofdl-gradient-drift 9s ease infinite;
  }

  /* ── 4. Nav underline slide (desktop ≥ 1024 px) ────────── */
  @media (min-width: 1024px) {
    #nav-menu a {
      position: relative;
      transition: color 0.2s ease, background-color 0.2s ease;
    }
    #nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 0.6rem;
      right: 0.6rem;
      height: 2px;
      background: var(--color-secondary);
      border-radius: 1px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.22s ease;
    }
    #nav-menu a:hover::after,
    #nav-menu a[aria-current="page"]::after { transform: scaleX(1); }
  }

  /* ── 5. CTA section — shimmer sweep sur .btn-primary ────── */
  @keyframes ofdl-shimmer {
    0%        { transform: translateX(-150%); }
    45%, 100% { transform: translateX(250%); }
  }

  .section-cta .btn-primary {
    position: relative;
    overflow: hidden;
  }
  .section-cta .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 20%,
      rgba(255,255,255,0.28) 50%,
      transparent 80%
    );
    transform: translateX(-150%);
    animation: ofdl-shimmer 2.8s ease-in-out infinite;
    pointer-events: none;
  }

  /* ── 6. Boutons — scale micro-interaction 1.05 ──────────── */
  .btn-primary:hover,
  .btn-outline:hover { transform: translateY(-2px) scale(1.03); }

  /* ── 7. Focus-visible ring personnalisé ─────────────────── */
  :focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 2px;
    transition: outline-offset 0.15s ease;
  }

  /* ── 8. Parallax scroll-driven CSS natif (Chromium 115+) ── */
  @supports (animation-timeline: scroll()) {
    @keyframes ofdl-hero-parallax {
      from { transform: translateY(-12%); }
      to   { transform: translateY(12%); }
    }
    .hero-bg {
      animation: ofdl-hero-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }

}

/* ── Filet de sécurité prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}