/* ==========================================================================
   Rail-Thermix — feuille de style
   Design tokens en variables CSS : couleurs, typographie et espacements
   se règlent tous depuis le bloc :root ci-dessous.

   Police : "Geist" (Vercel, open source, licence SIL Open Font — libre de
   droits), chargée via Google Fonts.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap");

:root {
  --color-bg: #ffffff;
  --color-bg-soft: #f1f7fa;
  --color-bg-muted: #dceaf1;
  --color-accent: #1476a8;
  --color-accent-dark: #0b3d53;
  --color-accent-light: #7fbcd9;
  --color-text: #0d1b22;
  --color-text-muted: #4a5c66;
  --color-border: #d9e6ed;

  --font-family: "Geist", "Inter", sans-serif;

  --max-width: 1108px;
  /* Largeur de contenu façon original : conteneur plafonné à 2000px, centré,
     avec un padding gauche de 3.125% et droite de 20% (le contenu grandit
     ~77% de la largeur jusqu'au plafond). */
  --content-max: 2000px;
  --pad-left: 3.125%;
  --pad-right: 20%;
  --section-padding-y: clamp(3rem, 6vw, 6rem);
  --section-padding-x: clamp(1.25rem, 3.2vw, 2.75rem);
  --header-height: 93px;
  /* Le logo (image) et le bouton Contact partagent la même hauteur. */
  --logo-height: 48px;

  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: var(--header-height);
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-family);
  font-weight: 500;
  margin: 0;
}

/* Révélation au scroll — calée sur l'original : fondu + glissement de 60px
   vers le haut, ease-out (~0.8s). */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

.section {
  padding: var(--section-padding-y) 0;
}

.section-inner {
  /* Large par défaut (images / galerie pleine largeur, comme l'original) :
     marges gauche/droite ~3.125%. Les sections de texte resserrent à droite. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--pad-left);
  padding-right: var(--pad-left);
}

/* Titre de section (H2) — style unique pour toutes les sections,
   calé sur l'original (~34px, Medium, capitales, noir). */
.eyebrow {
  /* Échelle de l'original : 72 × (largeur/3000) avec un plancher à 22px,
     soit max(22px, 2.4vw). Grandit avec l'écran. */
  font-size: max(22px, 2.4vw);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}

/* Paragraphe courant (p) — style unique, calé sur le paragraphe de la
   section Explication de l'original (~17.8px, interligne 1.5, noir). */
.body-text {
  font-size: 1.11rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text);
  margin: 0;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Logo aligné sur le bord gauche du contenu ; bouton Contact près du bord droit. */
  padding: 0 var(--pad-left);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Le logo + la nav + le sélecteur de langue glissent vers le haut et sont
   masqués au scroll ; le bouton Contact, lui, ne bouge jamais : seul le
   bouton Menu apparaît, en sortant de derrière Contact. Le conteneur de
   masquage occupe toute la hauteur du header pour que le glissement se
   termine pile au bord de la fenêtre. */

.site-header__slide-wrap {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.site-header__slide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header.is-scrolled .site-header__slide {
  transform: translateY(calc(-1 * var(--header-height)));
}

.site-header__actions {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.logo__img {
  height: var(--logo-height);
  width: auto;
  display: block;
}

.logo__text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-accent-dark);
}

.logo__text[hidden],
.logo__img[hidden] {
  display: none;
}

.main-nav {
  display: flex;
  gap: 1.75rem;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  border-color: var(--color-accent-dark);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--solid {
  background: var(--color-bg-soft);
  color: var(--color-accent-dark);
}
.btn--solid:hover { background: var(--color-bg-muted); }

.btn--dark {
  background: var(--color-accent-dark);
  color: #fff;
}
.btn--dark:hover { background: var(--color-accent); }
.btn--dark:disabled { opacity: 0.6; cursor: default; }

.js-contact-btn {
  position: relative;
  z-index: 2;
}

/* Boutons du header à la même hauteur que le logo (comme l'original). */
.site-header__actions .btn {
  height: var(--logo-height);
  padding-top: 0;
  padding-bottom: 0;
}

/* Icône du bouton Contact plus grande (16px, comme l'original). */
.js-contact-btn svg {
  width: 16px;
  height: 16px;
}

#menu-toggle {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateX(120%);
  pointer-events: none;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.site-header.is-scrolled #menu-toggle {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Menu désactivé (voir HEADER_NAV dans js/config.js) : la nav et le bouton
   Menu sont masqués, le reste du header garde son comportement. */

.site-header--no-nav .main-nav,
.site-header--no-nav #menu-toggle {
  display: none;
}

.lang-switch-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.3rem;
}

.lang-switch {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.lang-switch button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font: inherit;
  padding: 0.2rem 0.35rem;
}

.lang-switch button[aria-current="true"] {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ---------- Overlay de navigation plein écran ---------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--section-padding-x) 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease-in-out, visibility 0s linear 0.35s;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease-in-out, visibility 0s linear 0s;
}

.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0 1rem;
}

.nav-overlay__close {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.nav-overlay__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.nav-overlay__nav a {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  line-height: 1.15;
}

.nav-overlay__nav a:hover {
  text-decoration: underline;
}

.nav-overlay__bottom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--color-text);
}

/* ---------- Hero ---------- */

.hero {
  /* Marge au-dessus du titre calée sur l'original (grandit avec l'écran). */
  padding-top: clamp(4.5rem, 9vw, 12rem);
}

.hero h1 {
  /* Style d'origine du hero-titre Sun-Ways : sobre, poids Medium, noir,
     interligne aéré (1.3), sans resserrement de lettres — 25px (mobile)
     jusqu'à 30px (desktop). */
  font-size: clamp(1.5625rem, 1.34rem + 0.91vw, 1.875rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  max-width: 83%; /* texte ~77% du viewport ; l'image hero reste pleine largeur */
  margin-bottom: 1.75rem;
  color: var(--color-text);
}

.hero__intro {
  max-width: 83%;
  margin: 0 0 2.5rem;
}

.media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #cfe3ee 0%, #7fa9c2 45%, #2c566e 100%);
  position: relative;
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 2px,
    transparent 2px,
    transparent 34px
  );
}

.hero .media { aspect-ratio: 21 / 9; }

/* ---------- Sections 2 colonnes ----------
   Titre à gauche (~1/3), contenu à droite (~2/3) — mise en page de
   l'original. Utilisé par Explication, Ferrovoltaïque et En chiffres. */

.section--split .section-inner {
  display: grid;
  grid-template-columns: 2fr 3fr; /* ~40/60 comme l'original */
  gap: 2.5rem;
  align-items: start;
  /* Le texte s'arrête à ~80% (marge droite 20%), comme l'original. */
  padding-right: var(--pad-right);
}

.section--split .eyebrow {
  margin-bottom: 0;
}

/* Colonne de droite : paragraphes empilés */
.split__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---------- Ferrovoltaïque : image sous le texte ---------- */
.ferro__media {
  margin-top: 1.75rem;
  aspect-ratio: 8 / 3;
}

/* ---------- En chiffres ---------- */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2.5rem;
}

.stats__value {
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
}

/* ---------- Galerie ---------- */

.gallery {
  background: var(--color-bg-soft);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.gallery__item {
  margin: 0;
}

.gallery__caption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ---------- Inscription newsletter ---------- */

.signup {
  background: var(--color-accent-dark);
  color: #fff;
}

/* La section inscription reste centrée (pas la mise en page asymétrique). */
.signup .section-inner {
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.signup__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.signup .eyebrow {
  color: #fff;
  text-transform: none; /* pas de capitales forcées + retours à la ligne gérés via <br> */
  margin-bottom: 0.75rem;
}

.signup__subtitle {
  color: var(--color-accent-light);
  margin: 0 0 2rem;
}

.signup__form {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.signup__form input[type="email"] {
  flex: 1;
  min-width: 260px;
  font-family: var(--font-family);
  font-size: 1rem;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.signup__form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.signup__form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-accent-light);
  background: rgba(255, 255, 255, 0.14);
}

.signup__form .btn--dark {
  background: #fff;
  color: var(--color-accent-dark);
}
.signup__form .btn--dark:hover { background: var(--color-accent-light); }

.signup__message {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  font-size: 0.9rem;
}

.signup__message.is-success { color: #9ee6b4; }
.signup__message.is-error { color: #ffb4a8; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
}

.footer__grid > div {
  min-width: 180px;
}

.footer__grid h4 {
  font-size: 1.3125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: normal;
  margin: 0 0 1rem;
  color: var(--color-text);
}

.footer__grid a,
.footer__grid p {
  font-size: 1.1125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}

.footer__grid a:hover {
  text-decoration: underline;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.11rem;
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

.footer__bottom {
  max-width: var(--content-max);
  margin: 2.5rem auto 0;
  padding: 1.5rem var(--pad-left) 2.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.975rem;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

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

@media (max-width: 900px) {
  /* Marges symétriques en mobile (pas de padding droit à 20%). */
  .section-inner {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
  }
  .section--split .section-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-right: var(--section-padding-x);
  }
  .stats__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero h1,
  .hero__intro { max-width: none; }
  .site-header__inner {
    height: auto;
    padding: 1.25rem 1.25rem;
    gap: 0.6rem;
  }
  .site-header__slide-wrap { height: auto; }
  .site-header__actions { height: auto; }
  .site-header__slide { transform: none !important; }
  .main-nav { display: none; }
  /* Le sélecteur de langue reste accessible sur mobile (site bilingue). */
  .lang-switch-group { display: flex; }
  .site-header__actions .js-contact-btn { display: none; }
  #menu-toggle {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* Sans menu, c'est Contact qui reste visible sur mobile. */
  .site-header--no-nav .site-header__actions .js-contact-btn {
    display: inline-flex;
  }
  .nav-overlay { padding: 1rem 1.25rem 2rem; }
  .signup__form { flex-direction: column; }
  .signup__form input[type="email"] { min-width: 0; }
}

@media (max-width: 560px) {
  .site-header__inner { padding: 1rem 1.25rem; height: auto; }
}