/* Fenêtres sauvages pour les lieux — style « Cinéma » (choix d'Edouard, 17/09).
   Noir profond, respiration large, sur-titres monospace, serif géant.
   Pile de polices système, aucune dépendance, aucune ressource externe. */

:root {
  --encre: #0a0c0b;
  --encre-profonde: #060807;
  --papier: #ece9e1;
  --papier-doux: rgba(236, 233, 225, 0.66);
  --filet: rgba(236, 233, 225, 0.22);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--encre);
  color: var(--papier);
  line-height: 1.7;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--papier); color: var(--encre); }

a { color: inherit; }

/* Pleines pages projetées : les images portent, l'UI s'efface (constitution III) */

.hero, .usage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}

.pleine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(4, 6, 5, 0.26) 0%, rgba(4, 6, 5, 0) 52%),
    linear-gradient(to top, rgba(4, 6, 5, 0.6) 0%, rgba(4, 6, 5, 0.16) 38%, rgba(4, 6, 5, 0.02) 100%);
}

/* Kickers monospace, signature du style */

.sur-titre {
  display: flex;
  align-items: center;
  gap: 1.1em;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.7rem;
  color: var(--papier-doux);
}

.sur-titre::before {
  content: "";
  width: 3em;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.2vw, 4.9rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.7em;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0.6em 0 0.5em;
}

p { text-wrap: pretty; }

/* Hero : pitch et promesse au-dessus de la flottaison (constitution IV) */

.hero__texte {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  padding: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

.promesse {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--papier-doux);
  max-width: 33rem;
  margin: 1.3em 0 2em;
}

.assurance {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papier-doux);
  margin-top: 1.1em;
}

/* Contact en un clic, sans formulaire (FR-002) : capsule sobre */

.contact {
  display: inline-block;
  border: 1px solid rgba(236, 233, 225, 0.55);
  padding: 0.9em 1.8em;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.contact:hover,
.contact:focus-visible {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--papier);
}

.contact:focus-visible { outline: 1px solid var(--papier); outline-offset: 3px; }

/* Sections d'usage : chaque bloc une série différente (FR-003) */

.usage__texte {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  padding: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.25rem, 9vh, 5.5rem);
}

.usage__texte > p:not(.serie) { max-width: 30rem; }

.serie {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 1.8em;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.7rem;
  color: var(--papier-doux);
}

.serie::before {
  content: "";
  width: 2.6em;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* Déroulé de l'offre : blocs éditoriaux empilés, sans grille de tableau.
   Numéro serif au-dessus, titre clair, description adoucie (FR-008, FR-009) */

.deroule {
  background: var(--encre-profonde);
  border-top: 1px solid var(--filet);
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 8vw, 8rem);
}

.deroule > * {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.deroule h2 { margin-left: auto; margin-right: auto; }

.etapes { list-style: none; counter-reset: etape; margin: 2.4em auto 3em; }

.etapes li {
  counter-increment: etape;
  display: block;
  margin-bottom: 2.4em;
  color: var(--papier-doux);
}

.etapes li::before {
  content: "0" counter(etape);
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--papier);
  opacity: 0.45;
  margin-bottom: 0.55em;
}

.etapes strong {
  display: block;
  color: var(--papier);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.35em;
}

.etapes li:last-child { margin-bottom: 0; }

.garanties {
  display: grid;
  gap: 1.3rem;
  margin-bottom: 2.8rem;
  padding-left: 1.6rem;
  border-left: 1px solid var(--filet);
}

.garanties p { color: var(--papier-doux); font-size: 0.98rem; }

.garanties strong { color: var(--papier); font-weight: 600; }

.deroule .contact { margin-top: 0.75rem; }

/* Pied de page minimal */

.pied {
  background: var(--encre-profonde);
  border-top: 1px solid var(--filet);
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 8vw, 8rem);
  text-align: center;
}

.pied p {
  font-family: var(--mono);
  margin-top: 1.3em;
  color: var(--papier-doux);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.pied a[href="#haut"] { text-underline-offset: 0.25em; }

/* Écrans étroits : le pitch reste au-dessus de la flottaison (FR-001) */

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero__texte, .usage__texte { padding: 1.25rem; padding-bottom: 2.25rem; }
  .etapes li::before { font-size: 0.9rem; }
  .sur-titre { letter-spacing: 0.24em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .contact { transition: none; }
}