/* ============================================================
   ÉCRIN D'AVENTURES — Styles communs aux pages intérieures
   styles/pages.css
   ============================================================ */

/* Page hero compact */
.page-hero {
  position: relative;
  background: var(--ea-green);
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  border-bottom: var(--border-gold);
  overflow: hidden;
}

/* Pages avec sous-nav : compenser la hauteur du subnav (~50px)
   pour que la zone de contenu reste identique à celle sans subnav */
.page-hero:has(.page-subnav) {
  min-height: 530px;
}

.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.38;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26, 61, 43, 0.72) 0%,
    rgba(26, 61, 43, 0.45) 50%,
    rgba(26, 61, 43, 0.75) 100%
  );
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page-hero__inner .t-eyebrow { display: block; margin-bottom: var(--space-4); }
.page-hero__inner .separator { margin-bottom: var(--space-5); }
.page-hero__title { color: var(--ea-white); font-size: clamp(32px, 4.5vw, 58px); margin-bottom: var(--space-4); text-shadow: 0 2px 40px rgba(0,0,0,0.18); }
.page-hero__title em { color: var(--ea-gold); font-style: italic; }
.page-hero__sub { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-sm); letter-spacing: var(--ls-base); color: var(--ea-gold-pale); opacity: 0.85; max-width: 520px; margin: 0 auto; line-height: 1.8; }

/* Sous-nav */
.page-subnav { position: relative; z-index: 2; border-top: 1px solid rgba(181,151,74,0.3); margin-top: var(--space-6); }
.page-subnav__list { display: flex; align-items: center; justify-content: center; }
.page-subnav__link { display: block; padding: var(--space-4) var(--space-6); font-family: var(--font-display); font-size: 10px; font-weight: 400; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ea-gold-pale); opacity: 0.65; text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--duration-base), opacity var(--duration-base), border-color var(--duration-base); }
.page-subnav__link:hover { color: var(--ea-gold); opacity: 1; }
.page-subnav__link.is-active { color: var(--ea-gold); opacity: 1; border-bottom-color: var(--ea-gold); }

/* Section principale */
.page-section { padding: var(--space-9) 0; }
.page-section--cream { background: var(--ea-offwhite); }
.page-section--white { background: var(--ea-white); }
.page-section--green { background: var(--ea-green); border-top: var(--border-gold); border-bottom: var(--border-gold); }

/* En-tête de section */
.section-header { margin-bottom: var(--space-8); }
.section-header .t-eyebrow { display: block; margin-bottom: var(--space-4); }
.section-header .separator { margin: var(--space-4) auto; }
.section-intro { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-sm); letter-spacing: var(--ls-base); color: var(--ea-charcoal); opacity: 0.7; max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* Cartes de service (réutilisé) */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .services-grid { grid-template-columns: 1fr; } }

/* Bloc texte + image côte à côte */
.split-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
.split-block--reverse { direction: rtl; }
.split-block--reverse > * { direction: ltr; }
.split-block__text { display: flex; flex-direction: column; gap: var(--space-5); }
.split-block__text .t-eyebrow { color: var(--ea-gold); }
.split-block__text p { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--ea-charcoal); opacity: 0.8; }
.split-block__visual { aspect-ratio: 4/3; background: var(--ea-cream); border-top: var(--border-gold-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.split-block__visual svg { opacity: 0.2; }
.split-block__visual img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-gold); }
.split-block:hover .split-block__visual img { transform: scale(1.04); }
@media (max-width: 768px) { .split-block { grid-template-columns: 1fr; } .split-block--reverse { direction: ltr; } }

/* Separator left-aligned */
.separator--left { justify-content: flex-start; }

/* Service card icon */
.service-card__icon { color: var(--ea-gold); margin-bottom: var(--space-2); }

/* City Tour — liste monuments */
.citytour-monuments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.citytour-monuments li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--ea-charcoal);
  letter-spacing: var(--ls-base);
}
.citytour-monuments li svg { color: var(--ea-gold); flex-shrink: 0; }

/* City Tour — ce qui est inclus */
.citytour-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-8);
}
.citytour-include-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.citytour-include-item svg { color: var(--ea-gold); flex-shrink: 0; margin-top: 2px; }
.citytour-include-item div { display: flex; flex-direction: column; gap: 2px; }
.citytour-include-item strong {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ea-green);
}
.citytour-include-item span {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 300;
  color: var(--ea-charcoal);
  opacity: 0.7;
}
@media (max-width: 640px) { .citytour-includes { grid-template-columns: 1fr; } }

/* Strip photo plein-largeur */
.photo-strip {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-top: var(--border-gold);
  border-bottom: var(--border-gold);
}

.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.photo-strip__caption {
  position: absolute;
  inset: 0;
  background: rgba(26, 61, 43, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-strip__caption .t-eyebrow {
  color: var(--ea-gold-pale);
  letter-spacing: var(--ls-widest);
}

@media (max-width: 600px) { .photo-strip { height: 220px; } }

/* Formulaire de devis générique */
.devis-form-wrapper { background: var(--ea-white); border-top: var(--border-gold-2); padding: var(--space-7); max-width: 680px; margin: 0 auto; }
.devis-form__submit { padding-top: var(--space-5); border-top: 1px solid rgba(181,151,74,0.2); }

/* Narration (réutilisée) */
.narration-wrap { background: var(--ea-green); border-top: var(--border-gold); border-bottom: var(--border-gold); padding: var(--space-9) 0; }
.narration-wrap .separator::before, .narration-wrap .separator::after { background: rgba(181,151,74,0.4); }

/* Accordion page */
.page-accordions { max-width: 760px; margin: 0 auto; border-top: var(--border-gold); }
.accordion-item { border-bottom: var(--border-gold); }
.accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ea-green); cursor: pointer; background: none; border: none; text-align: left; }
.accordion-trigger .accordion-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ea-gold); transition: transform var(--duration-base) var(--ease-gold); }
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-gold); }
.accordion-item.is-open .accordion-body { max-height: 800px; }
.accordion-content { padding-bottom: var(--space-6); font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--ea-charcoal); opacity: 0.8; }

/* Bloc tarif */
.tarif-block { background: var(--ea-cream); border-left: var(--border-gold-2); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.tarif-block__label { font-family: var(--font-display); font-size: 9px; font-weight: 600; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ea-gold); margin-bottom: var(--space-2); }
.tarif-block__price { font-family: var(--font-editorial); font-size: var(--fs-3xl); font-weight: 300; color: var(--ea-green); line-height: 1; }
.tarif-block__note { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ea-charcoal); opacity: 0.55; margin-top: var(--space-2); }

/* Grille formulaire 2 colonnes responsive */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 580px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Chatbot (commun) */
.chatbot-trigger { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 990; width: 52px; height: 52px; background: var(--ea-white); color: var(--ea-green); border: var(--border-gold); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-base), transform var(--duration-fast); box-shadow: 0 4px 20px rgba(0,0,0,0.22); }
.chatbot-trigger:hover { background: var(--ea-offwhite); transform: scale(1.05); }
.chatbot-window { position: fixed; bottom: calc(var(--space-6) + 64px); right: var(--space-6); z-index: 991; width: 360px; max-height: 520px; background: var(--ea-offwhite); border: var(--border-gold); display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.chatbot-window[hidden] { display: none; }
.chatbot-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: var(--ea-cream); border-bottom: var(--border-gold); }
.chatbot-header__identity { display: flex; align-items: center; gap: var(--space-3); }
.chatbot-close { color: var(--ea-charcoal); opacity: 0.5; transition: opacity var(--duration-fast); }
.chatbot-close:hover { opacity: 1; }
.chatbot-messages { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); scroll-behavior: smooth; }
.chatbot-msg { max-width: 85%; padding: var(--space-3) var(--space-4); }
.chatbot-msg p { font-family: var(--font-ui); font-weight: 300; font-size: var(--fs-xs); line-height: var(--lh-base); margin: 0; }
.chatbot-msg--assistant { background: var(--ea-white); border-left: 2px solid var(--ea-gold); align-self: flex-start; }
.chatbot-msg--user { background: var(--ea-green); align-self: flex-end; }
.chatbot-msg--user p { color: var(--ea-gold-pale); }
.chatbot-form { display: flex; border-top: var(--border-gold); }
.chatbot-input { flex: 1; padding: var(--space-4); background: transparent; border: none; outline: none; font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ea-charcoal); }
.chatbot-input::placeholder { opacity: 0.4; }
.chatbot-send { padding: var(--space-4); color: var(--ea-gold); border-left: var(--border-gold); transition: background var(--duration-fast); }
.chatbot-send:hover { background: var(--ea-cream); }

/* ── Breadcrumb ── */
.breadcrumb {
  background: var(--ea-green);
  border-bottom: 1px solid rgba(181,151,74,0.2);
  padding: 10px 0;
  margin-top: 76px;
}
.breadcrumb + .page-hero {
  padding-top: 0;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ea-gold-pale);
  opacity: 0.6;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: '·';
  margin: 0 8px;
  color: var(--ea-gold);
  opacity: 0.6;
}
.breadcrumb__link {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-fast);
}
.breadcrumb__link:hover { opacity: 1; color: var(--ea-gold); }
.breadcrumb__item--current { opacity: 1; color: var(--ea-gold); }

@media (max-width: 768px) {
  .breadcrumb { margin-top: 68px; } /* header mobile: 1+12+42+12+1 = 68px */
}

/* ── Responsive mobile ── */
@media (max-width: 600px) {
  /* Sous-nav conciergerie : wrap sur 2 lignes */
  .page-subnav__list { flex-wrap: wrap; justify-content: center; }
  .page-subnav__link { padding: var(--space-3) var(--space-3); font-size: 9px; letter-spacing: 0.06em; }

  /* Chatbot : pleine largeur sur mobile */
  .chatbot-window { width: auto; left: var(--space-3); right: var(--space-3); }
  .chatbot-trigger { bottom: var(--space-4); right: var(--space-4); }

  /* Formulaires de devis : padding réduit */
  .devis-form-wrapper { padding: var(--space-5) var(--space-4); }

  /* Hero sous-titre tronqué */
  .page-hero__sub { font-size: var(--fs-xs); }
}