/* =========================================================
   Maison Coeurdacier — feuille de style principale
   Toutes les pages partagent ce fichier unique.
   ========================================================= */

:root {
  --color-bg: #FBF7F1;
  --color-bg-alt: #F1E8DA;
  --color-surface: #FFFFFF;
  --color-text: #2E2A26;
  --color-text-muted: #6B6259;
  --color-primary: #6B4A34;
  --color-primary-dark: #4E3527;
  --color-accent: #46C1F9;
  --color-accent-dark: #1B7FAD;
  --color-gold: #B68A35;
  --color-border: #E5DACB;
  --shadow-soft: 0 10px 30px rgba(46, 42, 38, 0.08);
  --shadow-card: 0 4px 16px rgba(46, 42, 38, 0.10);
  --radius: 14px;
  --radius-sm: 8px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", Arial, sans-serif;
  --container-w: 1180px;
}

/* Pas de mode sombre : les pages WordPress (réservation, hébergements,
   paiement) restent toujours claires, donc le site statique garde
   volontairement la même apparence quel que soit le réglage du visiteur,
   pour une continuité visuelle sans rupture entre les deux. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary-dark);
  overflow-wrap: break-word;
  /* PAS de césure automatique (hyphens: auto) : elle coupait « Coeurdacier » en « Coeur-dacier »
     (lu « cœur d'acier »). Pour un mot allemand trop long, mettre ­ à la main dans le HTML. */
  hyphens: manual;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

p { margin: 0 0 1em; }

a { color: var(--color-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Liens vers la page "Histoire de la Maison" insérés dans un texte :
   toujours bien visibles comme des liens, où qu'ils apparaissent. */
.link-history {
  text-decoration: underline;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.link-history:hover { color: var(--color-primary); }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 0.6em;
}

.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-alt { background: var(--color-bg-alt); }

.section-head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-head p { color: var(--color-text-muted); }

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color .15s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-sm { padding: 0.6em 1.3em; font-size: 0.85rem; }

/* =========================
   Header / navigation
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 241, 0.98);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
}
.site-header .container { max-width: 1480px; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
}
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
  text-decoration: none;
}

@media (min-width: 1350.02px) and (max-width: 1520px) {
  .main-nav { gap: 0; }
  .main-nav a { padding: 8px 9px; font-size: 0.9rem; }
  .brand small { display: none; }
}

/* Grands écrans (≥ 1521 px) : en-tête élargi (logo plus près du bord) et menu plus lisible.
   Taille des liens = place disponible (le français est la langue la plus large), de 15,2 px à 19,2 px. */
@media (min-width: 1520.02px) {
  .site-header .container { max-width: 1760px; }
  .main-nav a { font-size: clamp(15.2px, calc((min(100vw, 1760px) - 735px) / 52.5), 19.2px); }
  .header-actions .btn-sm { font-size: 0.95rem; }
}

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Sélecteur de langue */
.lang-switcher { position: relative; }
.lang-current {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  min-width: 200px;
  padding: 6px;
  display: none;
  list-style: none;
  margin: 0;
}
.lang-switcher.open .lang-menu { display: block; }
.lang-menu li a, .lang-menu li span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text);
}
.lang-menu li a:hover { background: var(--color-bg-alt); text-decoration: none; }
.lang-menu li[aria-disabled="true"] span {
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.lang-menu .lang-soon {
  margin-left: auto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-bg-alt);
  padding: 2px 7px;
  border-radius: 999px;
}
.flag { font-size: 1.1rem; line-height: 1; }
.lang-caret { font-size: 0.65rem; opacity: 0.7; }

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

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: 0.2s;
}
.nav-toggle span::before { position: absolute; top: -7px; width: 24px; background: var(--color-text); }
.nav-toggle span::after { position: absolute; top: 7px; width: 24px; background: var(--color-text); }

@media (max-width: 1350px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: 66px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
    gap: 4px;
    display: none;
    overflow-y: auto;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 16px; font-size: 1.05rem; }
}
@media (max-width: 600px) {
  .header-inner { padding: 10px 14px; gap: 8px; }
  .brand { font-size: 1rem; gap: 8px; min-width: 0; }
  .brand img { width: 36px; height: 36px; }
  .brand small { display: none; }
  .nav-toggle { padding: 6px; }
  .header-actions { gap: 6px; }
  .lang-current { padding: 6px 9px; }
  .header-actions .btn-sm { padding: 0.55em 1em; }
}
@media (max-width: 360px) {
  .brand span { display: none; }
}

/* =========================
   Hero
   ========================= */
.hero {
  position: relative;
  padding: 70px 0 90px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(70,193,249,0.10), transparent 55%),
              radial-gradient(circle at 85% 80%, rgba(182,138,53,0.10), transparent 55%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.hero-lead { font-size: 1.1rem; color: var(--color-text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6em; }

/* =========================
   Cartes chambres / hébergements
   ========================= */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card-img { aspect-ratio: 4/3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-price strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--color-gold);
  letter-spacing: 0;
}
.card ul { margin: 0 0 8px; padding-left: 1.1em; color: var(--color-text-muted); font-size: 0.95rem; }
.card-cta { margin-top: auto; padding-top: 6px; }

/* =========================
   Bloc texte + image alterné
   ========================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}
.split-media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.split-media.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.split-media.gallery img { aspect-ratio: 1; }
.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  margin: clamp(28px, 5vw, 44px) auto 0;
}
.photo-pair img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  aspect-ratio: 3/2;
  object-fit: cover;
}
.photo-pair figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}
@media (max-width: 600px) {
  .photo-pair { grid-template-columns: 1fr; }
}

/* =========================
   Citation / à propos
   ========================= */
.quote-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-style: italic;
  color: var(--color-primary-dark);
  margin: 0;
}

/* =========================
   Footer
   ========================= */
.site-footer {
  background: var(--color-primary-dark);
  color: #EFE6D8;
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9em;
}
.site-footer a { color: #EFE6D8; }
.site-footer a:hover { color: #fff; }
.site-footer a[href*="google.com/maps"],
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"] {
  color: var(--color-accent);
  text-decoration: underline;
}
.site-footer a[href*="google.com/maps"]:hover,
.site-footer a[href^="tel:"]:hover,
.site-footer a[href^="mailto:"]:hover { color: #fff; }
.site-footer .quote { font-style: italic; color: #D9CEBC; }
.footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #C9BFAE;
}
.footer-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* =========================
   Pages simples (légal, contact)
   ========================= */
.page-hero {
  padding: 48px 0 20px;
  text-align: center;
}
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }

.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 26px;
}

.feature-photo {
  max-width: 860px;
  margin: 0 auto clamp(32px, 6vw, 56px);
}
.feature-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 16/10;
  object-fit: cover;
}
.feature-photo figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 10px;
  font-style: italic;
}

/* =========================
   Frise chronologique (page Histoire de la Maison)
   ========================= */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 860px;
  margin: 0 auto;
}
.timeline-item {
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}
.timeline-item h3 { margin-bottom: 0.4em; }
.timeline-item p:last-child { margin-bottom: 0; }
.timeline-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 1.2em;
}
.timeline-photos img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.timeline-photos figcaption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 6px;
}

/* Formulaire */
.form-grid { display: grid; gap: 18px; max-width: 560px; }
label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 6px; }
input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}
input:focus, textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.form-note { font-size: 0.85rem; color: var(--color-text-muted); }
.form-status { font-weight: 600; }
.form-status.ok { color: var(--color-accent-dark); }
.form-status.error { color: #A33; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-grid > * { min-width: 0; }
input, textarea { min-width: 0; max-width: 100%; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Carte Google Maps (page Contact) */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin: 18px 0;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Table des tarifs (rappel visuel simple, la vraie réservation reste sur WordPress) */
.notice-banner {
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* Bandeau « Nederlandse versie » (pages françaises, navigateur en néerlandais) */
.lang-banner {
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
}
.lang-banner-inner {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 48px 10px 20px;
  text-align: center;
}
.lang-banner a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.lang-banner a:hover { color: var(--color-accent); }
.lang-banner-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.lang-banner-close:hover { color: var(--color-accent); }
@media (max-width: 600px) {
  .lang-banner { font-size: 0.85rem; }
  .lang-banner-inner { padding: 8px 40px 8px 14px; }
  .lang-banner-close { right: 6px; }
}

/* =========================
   Avis des hôtes (accueils, 2026-10-15)
   ========================= */
.reviews-summary { text-align: center; color: var(--color-text-muted); margin: 0 0 1.8em; }
.reviews-summary strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-gold); }
.review-card { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.review-card blockquote { margin: 0; font-style: italic; color: var(--color-text); }
.review-card .review-source { margin-top: auto; font-size: 0.85rem; color: var(--color-text-muted); }
.reviews-more { text-align: center; margin-top: 1.8em; }

/* Vidéo des accueils : gros bouton de lecture sur l'image (créé par main.js ; sans JS, les commandes natives restent) */
.video-wrap { position: relative; }
.video-wrap video { display: block; }
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: rgba(46, 42, 38, 0.22);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}
.video-play:hover { background: rgba(46, 42, 38, 0.12); }
.video-play:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.video-play-icon {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.video-play-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-36%, -50%);
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--color-primary);
}
.video-play:hover .video-play-icon { transform: scale(1.07); }
.video-play-label {
  background: var(--color-primary);
  color: #fff;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
}
.video-wrap.is-playing .video-play { display: none; }
@media (max-width: 600px) {
  .video-play { gap: 10px; }
  .video-play-icon { width: 60px; height: 60px; }
  .video-play-icon::after { border-width: 12px 0 12px 19px; }
  .video-play-label { font-size: 0.85rem; }
}