/* ==========================================================================
   Blocs de page
   ========================================================================== */

/* --- Hero d'accueil ------------------------------------------------------
   Vidéo de fond (Cervin), reprise de wibo-consult.ch. Le poster suffit à
   lire la page : la vidéo est un supplément, jamais une dépendance.
   Empilement : vidéo 0 · voile 1 · grille or 2 · contenu 3 · bouton 4
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--navy-dark);
  padding: calc(var(--nav-h) + var(--s-7)) 0 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

/* Voile : sans lui, le blanc du titre se perd dans la neige. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0, transparent 0, rgba(var(--navy-dark-rgb), 0.45) 70%),
    linear-gradient(180deg,
      rgba(var(--navy-dark-rgb), 0.62) 0,
      rgba(var(--navy-dark-rgb), 0.72) 45%,
      rgba(var(--navy-dark-rgb), 0.94) 100%);
}

/* Bouton lecture/pause — exigence d'accessibilité pour tout média animé */
.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-6);
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--white-rgb), 0.28);
  background: rgba(var(--navy-dark-rgb), 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(var(--white-rgb), 0.8);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}

.hero__video-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(var(--navy-dark-rgb), 0.7);
}

.hero__video-toggle svg { width: 14px; height: 14px; }
.hero__video-toggle .icon-pause { display: none; }
.hero__video-toggle .icon-play { display: block; }
.hero__video-toggle[data-playing='true'] .icon-pause { display: block; }
.hero__video-toggle[data-playing='true'] .icon-play { display: none; }

.hero__inner { position: relative; z-index: var(--z-base); }

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: end;
  padding-bottom: var(--s-7);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: var(--s-5);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
}

.hero__eyebrow i { width: 4px; height: 4px; background: rgba(var(--gold-rgb), 0.6); flex-shrink: 0; }

.hero__title {
  /* Les retours sont posés à la main : pas d'équilibrage automatique */
  text-wrap: initial;
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: var(--track-display);
  color: var(--white);
}

.hero__title em { font-style: normal; color: var(--gold); }

.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.75;
  color: rgba(var(--white-rgb), 0.72);
  max-width: 44ch;
  margin-bottom: var(--s-5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__link { margin-top: var(--s-4); }
.hero__link .btn-link { color: var(--gold-light); border-color: rgba(var(--gold-rgb), 0.45); }
.hero__link .btn-link:hover { border-color: var(--gold); }

/* Bandeau de chiffres, collé au bas du hero */
.hero__figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(var(--gold-rgb), 0.3);
}

.hero__figure {
  padding: var(--s-5) var(--s-4) var(--s-6) 0;
  border-right: 1px solid rgba(var(--white-rgb), 0.1);
}

.hero__figure:last-child { border-right: 0; }
.hero__figure:not(:first-child) { padding-left: var(--s-4); }

.hero__figure b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: 9px;
}

.hero__figure:first-child b { color: var(--gold); }

.hero__figure span {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--white-rgb), 0.5);
  line-height: 1.4;
  display: block;
}

/* --- Hero de page intérieure --------------------------------------------- */

.page-hero {
  position: relative;
  background: var(--navy-dark);
  padding: calc(var(--nav-h) + var(--s-7)) 0 var(--s-7);
  overflow: hidden;
}

.page-hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: end;
}

.page-hero h1 { color: var(--white); }

.page-hero p {
  font-size: var(--t-lead);
  line-height: 1.75;
  color: rgba(var(--white-rgb), 0.72);
  margin-bottom: var(--s-5);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--white-rgb), 0.42);
}

.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span[aria-current] { color: var(--gold); }
.breadcrumb__sep { color: rgba(var(--white-rgb), 0.25); }

/* --- Manifeste ----------------------------------------------------------- */

.manifesto {
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.manifesto__title { grid-column: 2; }
.manifesto__title > h2 { max-width: 16ch; }

.manifesto__body { grid-column: 3; display: flex; flex-direction: column; gap: var(--s-4); }

.manifesto__body p { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.manifesto__body strong { color: var(--navy); font-weight: 600; }

.section--navy .manifesto__body p,
.section--navy-dark .manifesto__body p { color: rgba(var(--white-rgb), 0.72); }
.section--navy .manifesto__body strong,
.section--navy-dark .manifesto__body strong { color: var(--gold-light); font-weight: 500; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-5); }

.tags a {
  padding: 8px 15px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--gold-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tags a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }

/* --- À propos : le récit ------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.story__aside { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }

.story__year {
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--gold-text);
  margin-bottom: 8px;
}

.story__year-label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

.story__body { display: flex; flex-direction: column; gap: var(--s-4); max-width: 68ch; }
.story__body p { font-size: 1.0313rem; line-height: 1.85; color: var(--muted); }

.story__body p:first-child {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* --- Prix : tarifs à la prestation --------------------------------------- */

.tariffs { border-top: var(--hair); }

.tariff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: var(--col-gap);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: var(--hair);
}

.tariff h2 { font-size: var(--t-h3); }

.tariff__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  justify-content: flex-end;
  white-space: nowrap;
}

.tariff__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold-text);
}

.tariff__unit {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Simulateur de forfait ----------------------------------------------- */

.estimator {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1px;
  background: rgba(var(--navy-rgb), 0.14);
  border: 1px solid rgba(var(--navy-rgb), 0.14);
}

.estimator__inputs { background: var(--white); padding: var(--s-6); }
.estimator__result { background: var(--navy-dark); padding: var(--s-6); display: flex; flex-direction: column; }

.estimator__field + .estimator__field { margin-top: var(--s-5); }

.estimator__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 11px;
}

.estimator__field-label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--navy);
}

.estimator__field-value {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--gold-text);
  text-align: right;
}

.estimator input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(var(--navy-rgb), 0.16);
  outline: none;
  cursor: pointer;
}

.estimator input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--gold);
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}

.estimator input[type='range']::-webkit-slider-thumb:hover { transform: scale(1.2); }

.estimator input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--gold);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.estimator input[type='range']::-moz-range-track { height: 2px; background: rgba(var(--navy-rgb), 0.16); }

.estimator__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--t-label);
  color: var(--muted);
}

.estimator__total-label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.estimator__total {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.4vw, 3.9rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--white);
}

.estimator__total-unit {
  font-size: var(--t-small);
  color: rgba(var(--white-rgb), 0.5);
  margin: 8px 0 var(--s-5);
}

.estimator__included {
  padding-top: var(--s-4);
  border-top: 1px solid rgba(var(--gold-rgb), 0.3);
  margin-bottom: var(--s-5);
  flex-grow: 1;
}

.estimator__included .label { margin-bottom: var(--s-3); }
.estimator__included .checklist-item { color: rgba(var(--white-rgb), 0.82); font-size: 0.9063rem; }

.estimator__footnote { margin-top: var(--s-3); font-size: var(--t-label); color: rgba(var(--white-rgb), 0.42); }

/* --- Contact -------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s-7);
  align-items: start;
}

.contact-methods { margin-top: var(--s-5); border-top: var(--hair); }

.contact-method {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: var(--hair);
  transition: padding-left var(--dur) var(--ease);
}

.contact-method:hover { padding-left: 10px; }

.contact-method__icon {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: var(--gold-pale);
  color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.contact-method:hover .contact-method__icon { background: var(--gold); color: var(--navy-dark); }
.contact-method__icon svg { width: 17px; height: 17px; }

.contact-method__label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.contact-method__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.contact-method__arrow { width: 15px; height: 15px; color: var(--gold); }

.booking { border: var(--hair); border-top: 2px solid var(--gold); }

.booking__placeholder {
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6) var(--s-5);
  background: var(--cream);
}

.booking__placeholder p {
  max-width: 42ch;
  margin: 11px auto var(--s-5);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq-layout {
  display: grid;
  grid-template-columns: var(--index-w) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.faq-nav { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
.faq-nav__list { display: flex; flex-direction: column; border-top: var(--hair); }

.faq-nav__link {
  display: block;
  padding: 13px 0;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  border-bottom: var(--hair);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}

.faq-nav__link:hover, .faq-nav__link.is-active { color: var(--gold-text); padding-left: 9px; }

.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group__title { font-size: var(--t-h3); margin-bottom: 7px; }
.faq-group__intro { font-size: 0.9375rem; color: var(--muted); margin-bottom: var(--s-5); }

/* --- Texte courant -------------------------------------------------------- */

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--s-4); }
.prose p { font-size: 1rem; line-height: 1.85; color: var(--muted); }
.prose h2 { margin-top: var(--s-4); }
.prose ul { display: flex; flex-direction: column; gap: 9px; }

.prose li {
  position: relative;
  padding-left: 22px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}

.prose li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.72em;
  width: 10px; height: 1px;
  background: var(--gold);
}

.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero__top { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
  .page-hero__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .manifesto { grid-template-columns: 1fr; gap: var(--s-5); }
  .manifesto__title, .manifesto__body { grid-column: 1; max-width: none; }
  .story { grid-template-columns: 1fr; gap: var(--s-4); }
  .story__aside { position: static; display: flex; align-items: baseline; gap: var(--s-3); }
  .story__year { font-size: 2.6rem; margin-bottom: 0; }
  .estimator { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .faq-layout { grid-template-columns: 1fr; gap: var(--s-5); }
  .faq-nav { position: static; }
  .faq-nav__list { flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .faq-nav__link { border: 1px solid rgba(var(--navy-rgb), 0.16); padding: 9px 16px; }
  .faq-nav__link:hover, .faq-nav__link.is-active { padding-left: 16px; border-color: var(--gold); }
  .hero__figures { grid-template-columns: repeat(2, 1fr); }
  .hero__figure { border-bottom: 1px solid rgba(var(--white-rgb), 0.1); padding-bottom: var(--s-4); }
  .hero__figure:nth-child(2) { border-right: 0; }
  .hero__figure:nth-child(odd) { padding-left: 0; }
  .hero__figure:nth-child(even) { padding-left: var(--s-4); }
}

@media (max-width: 767px) {
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + var(--s-6)); }
  /* Un séparateur ne doit pas terminer une ligne : l'écart flex suffit */
  .hero__eyebrow i { display: none; }
  .hero__eyebrow { gap: 6px 18px; }
  .hero__top { padding-bottom: var(--s-5); }
  .tariff { grid-template-columns: 1fr; gap: var(--s-3); }
  .tariff__price { justify-content: flex-start; }
  .estimator__inputs, .estimator__result { padding: var(--s-5) var(--s-4); }
}