/* ═══════════════════════════════════════════════════════════════
   THEME CLIENT — la seule feuille CSS à personnaliser par client.
   (eleman — boat club électrique solaire du Léman : corail/océan,
   Raleway + Inter + Cormorant Garamond)

   Palette RELEVÉE SUR LA MARQUE du client (dégradé du wordmark
   eleman.fr : corail → sable → sauge → océan) et sur ses propres
   tokens : --coral hsl(16 55% 58%), --ocean hsl(196 47% 46%),
   --sand hsl(50 42% 70%), --sage hsl(142 22% 45%),
   --background hsl(40 33% 98%). Rien d'inventé.

   style.css (générique, identique pour tous les clients) consomme
   ces tokens. Le site vitrine et les pages secondaires aussi.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --ink: #1b292c;
  --ink-soft: #6b7d81;
  --ink-faint: #a3b1b4;
  --line: #d8e2e4;

  --accent: #d07b5a;
  --accent-deep: #b0603c;
  --accent-soft: #f6e3d9;
  --accent-ghost: #f7f1ec;

  /* Le dégradé de la marque : corail (soleil) → océan (le lac) */
  --grad-accent: linear-gradient(135deg, #d07b5a, #c06a4a);
  --grad-hero: linear-gradient(165deg, #fbf9f6 0%, #f1ece4 48%, #e2ebee 100%);

  --font-head: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --shadow: 0 1px 2px rgba(27, 41, 44, 0.04), 0 8px 24px rgba(27, 41, 44, 0.08);
  --shadow-accent: 0 10px 28px rgba(176, 96, 60, 0.28);

  /* ── Photo derrière le hero de l'APP (crochet opt-in de style.css) ──
     Même image que la vitrine, en version 800 px : dans l'app elle n'occupe
     qu'une carte, inutile d'y envoyer 1600 px. Servie depuis public/, donc
     joignable par l'app ET par le site. */
  --hero-photo: url("/img/hero-lasai-800.webp");
  --hero-photo-pos: 62% 58%;
  --hero-voile: linear-gradient(to top,
    rgba(9, 30, 36, 0.78) 0%, rgba(9, 30, 36, 0.36) 55%, rgba(9, 30, 36, 0.52) 100%);

  /* halos décoratifs du fond : le corail du soleil, le bleu du lac */
  --halo-1: rgba(208, 123, 90, 0.15);
  --halo-2: rgba(62, 143, 172, 0.10);
  /* « Fermé » ne doit jamais se lire comme « ouvert » (vert) */
  --statut-ferme: #b0603c;
  --statut-ouvert: #5a8c6c;

  /* ── Rythme : l'eau, pas l'institut ──
     Le moule pose ces trois-là avec un défaut au point d'usage ; on les
     rallonge et on les adoucit. La courbe est une GLISSE : départ franc, très
     longue décélération — c'est ce qui donne la sensation d'eau plutôt que de
     ressort. */
  --radius: 26px;
  --ease-spring: cubic-bezier(0.16, 0.68, 0.28, 1);
  --shadow: 0 1px 2px rgba(18, 59, 70, 0.03), 0 14px 40px rgba(18, 59, 70, 0.07);
  --shadow-accent: 0 12px 34px rgba(176, 96, 60, 0.24);
}

/* ── Identité typographique (spécifique client — eleman : le wordmark
      est en bas de casse, très léger ; l'italique Cormorant sert aux
      phrases de manifeste, comme sur le site du client) ── */
.brand-name {
  font-family: var(--font-head);
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: lowercase; line-height: 1.3; text-align: left;
}
.brand-name small {
  display: block; font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.24em; color: var(--ink-soft);
  /* PAS de text-transform : toute la marque eleman est en bas de casse, le
     wordmark comme le slogan « solar electric boat experience ». */
}
.hero-title {
  font-family: var(--font-head);
  font-size: 1.62rem; font-weight: 300; letter-spacing: 0.05em; line-height: 1.25;
}
.hero-title em {
  display: block; font-family: var(--font-script); font-style: italic;
  font-size: 1.9em; line-height: 1.05; font-weight: 300;
  color: var(--accent-deep); margin-top: 4px; letter-spacing: 0;
}
.hero-rating { letter-spacing: 0.06em; }
/* ── Les titres : bas de casse, légers, larges ──
   Le profil dont ce theme.css est parti était celui d'un salon de toilettage :
   TOUS les titres en capitales serrées et semi-gras. C'est exactement ce qui
   faisait « institut » — un panneau qui parle fort. La DA d'eleman fait le
   contraire : du Raleway très léger, en casse de phrase, à grande taille, et
   c'est le blanc autour qui porte le calme. Les petits sur-titres (kickers)
   restent en capitales espacées : chez lui aussi, et c'est éditorial, pas
   commercial.
   ⚠️ style.css est chargé APRÈS : pour la taille et la graisse il faut du
   (0,2,0). Le `text-transform`, lui, ne venait que d'ici — l'enlever suffit. */
.section-title { font-family: var(--font-head); letter-spacing: -0.005em; }
.section-head .section-title { font-size: 1.82rem; font-weight: 300; line-height: 1.16; }

.univers-title { font-family: var(--font-head); letter-spacing: 0.005em; }
.univers .univers-title { font-size: 1.02rem; font-weight: 400; line-height: 1.25; }

.group-title { font-family: var(--font-head); letter-spacing: 0.005em; }
.group-head .group-title { font-size: 1.06rem; font-weight: 400; }

.resa-title { font-family: var(--font-head); letter-spacing: 0.01em; }
.resa-card .resa-title { font-size: 1.08rem; font-weight: 400; }

.infos-card h3 { font-family: var(--font-head); letter-spacing: 0.01em; font-weight: 400; }
.apropos h3 { font-family: var(--font-head); letter-spacing: 0.01em; font-weight: 400; }
.infos-wrap .infos-card h3, .apropos h3 { font-size: 1.06rem; }

/* Le manifeste en italique Cormorant — la seule voix « écrite » de la marque */
.sig-title { font-family: var(--font-script); font-style: italic; font-weight: 300; font-size: 2.15rem; line-height: 1.12; }

/* ── Respiration ──
   Doubler les marges vaut mieux que n'importe quel effet : c'est ce qui sépare
   une app qui vend d'une app qui liste. (0,2,0) pour battre style.css.) */
html body { font-weight: 300; line-height: 1.68; }
.route .section { padding: 30px 20px 14px; }
.route .section-head { margin: 38px 0 18px; }
.route .univers-grid { gap: 14px; }
.univers-grid .univers-photo { min-height: 158px; }
.route .quick-grid { gap: 12px; }

/* ── La carte signature porte une PHOTO, plus un bloc corail plein ──
   Un aplat corail saturé, c'est la promo d'un salon. Sa DA, ce sont des bandes
   photographiques. Le corail reste, mais en accent (boutons, sur-titres). */
.route .signature-card {
  background-image: linear-gradient(to top,
      rgba(9, 30, 36, 0.82) 0%, rgba(9, 30, 36, 0.42) 60%, rgba(9, 30, 36, 0.34) 100%),
    url("/img/bande-signature.jpg");
  background-size: cover, cover;
  background-position: center, 50% 55%;
  padding: 30px 22px 26px;
}
.route .signature-card::after { background: none; }

/* ── L'invitation à laisser un avis : un aplat corail de moins ──
   Le moule la peint en dégradé corail pleine largeur — c'est la promo. Ici :
   fond clair, filet, et le corail réservé au bouton. */
.route .avis-cta {
  background: var(--accent-ghost);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.route .avis-cta .avis-cta-text strong { color: var(--accent-deep); }
.route .avis-cta .btn,
.route .avis-cta .avis-cta-btn {
  background: var(--grad-accent);
  color: #fff;
}

/* ── Titre rotatif du hero de l'app ───────────────────────────────
   Mêmes réglages que la vitrine, relevés dans son site d'origine : 4 s (côté
   app.js), glissement vertical + flou, 0,55 s, cubic-bezier(.25,.1,.25,1).
   L'ordre de déclaration compte : `attente` doit venir après `:first-child`. */
/* Sélecteur en (0,2,0) OBLIGATOIRE ici : style.css est chargé APRÈS theme.css
   et pose `.hero-title { font-size: 2.15rem }`. Un `.hero-title` en (0,1,0) dans
   theme.css ne gagne jamais — la taille ne bougeait pas et la phrase la plus
   longue restait tronquée. */
.hero .hero-title {
  position: relative;
  display: block;
  height: 1.35em;
  overflow: hidden;
  /* Les phrases sont en `nowrap` : la plus longue (« Naviguer en harmonie. »,
     399 px à 2,15 rem) doit tenir dans la carte du hero — ~314 px sur un écran
     de 390, ~244 px sur un 320. D'où un corps piloté par la largeur de la vue. */
  font-size: clamp(1.15rem, 5.4vw, 1.7rem);
  line-height: 1.35em;
  text-shadow: 0 0 20px rgba(62, 143, 172, 0.45), 0 0 40px rgba(62, 143, 172, 0.25),
    0 2px 18px rgba(9, 30, 36, 0.5);
}
.hero .hero-title .rotator-item {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.35em;
  line-height: 1.35em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(50%);
  filter: blur(4px);
  transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero .hero-title .rotator-item:first-child { opacity: 1; transform: none; filter: blur(0); }
.hero .hero-title .rotator-item.entrant { opacity: 1; transform: none; filter: blur(0); }
.hero .hero-title .rotator-item.sortant { opacity: 0; transform: translateY(-50%); filter: blur(4px); }
.hero .hero-title .rotator-item.attente { opacity: 0; transform: translateY(50%); filter: blur(4px); }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-title .rotator-item { transition: none; }
}

/* ── Le hero en PLEIN CADRE, refermé par sa vague ─────────────────
   Le moule pose le hero en carte arrondie flottante (margin + radius) : c'est
   joli, mais c'est une boîte, et l'empilement de boîtes est exactement ce qui
   faisait « institut ». Son site, lui, ouvre sur une photo bord à bord que
   referme une vague blanche. On reprend sa courbe (même chemin SVG, même
   viewBox 1440×80) et on la remplit de la couleur de fond de l'app.
   La vague est en z-index 3 : au-dessus de la photo (0), du voile (1) et du
   contenu (2), puisqu'elle doit mordre sur l'image. */
.route .hero {
  margin: 0;
  border-radius: 0;
  padding: 46px 24px 62px;
  box-shadow: none;
}
.route .hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 44px;
  z-index: 3;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,50 C360,80 720,20 1080,50 C1260,65 1380,55 1440,50 L1440,80 L0,80 Z' fill='%23faf8f5'/></svg>") no-repeat center bottom / 100% 100%;
  pointer-events: none;
}

/* ── Hero de l'app posé sur la photo ──────────────────────────────
   Ces sélecteurs sont en (0,2,0) exprès : ils doivent gagner sur ceux de
   style.css (0,1,0) sans dépendre de l'ordre de chargement des feuilles. */
.hero .hero-kicker { color: rgba(255, 255, 255, 0.92); }
.hero .hero-title { color: #fff; text-shadow: 0 2px 18px rgba(9, 30, 36, 0.5); }
.hero .hero-title em { color: #f8d5bd; }
.hero .hero-rating { color: rgba(255, 255, 255, 0.9); }
.hero .hero-status .open { color: #a6e3bb; }
.hero .hero-status .closed { color: #f9c0a8; }
.hero .btn-ghost {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #fff;
  box-shadow: none;
}