/* Loustad — page « Bientôt »
   Une salle de projection : écran collant plein cadre, l'image d'abord, le carton ensuite.
   Puis la lumière revient sur une page ivoire où l'on signe. Un seul monde visuel, sans dégradé. */

:root {
  --nuit: #0B0C1A;        /* noir d'encre : la salle */
  --encre: #1B1C3A;       /* encre de marque */
  --ivoire: #F7F3E9;      /* la page */
  --papier: #FFFDF8;      /* carte du formulaire */
  --sable: #EFE9DB;       /* encart discret sur l'ivoire */
  --laiton: #C9A24B;      /* le sceau, le vérifié */
  --cuivre: #B06B3F;      /* ce qui manque */
  --brume: #A3A5BD;       /* texte discret sur la nuit */
  --gris: #55576B;        /* texte discret sur l'ivoire */
  --filet: #DCD6C6;       /* filets sur l'ivoire */
  --bord: #918C80;        /* bord des champs */
  --erreur: #8E4A23;      /* message d'erreur, lisible sur papier */

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --arabe: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  --gouttiere: clamp(16px, 4.5vw, 48px);
  --g-gauche: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  --g-droite: max(var(--gouttiere), env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nuit); color: var(--ivoire); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
[lang="ar"] { font-family: var(--arabe); }

.skip { position: absolute; left: 16px; top: -80px; z-index: 40; background: var(--ivoire); color: var(--encre); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* Barre fixe */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--g-droite) 14px var(--g-gauche); color: var(--ivoire); border-bottom: 1px solid transparent;
  transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
.bar.sur-papier { color: var(--encre); background-color: rgba(247, 243, 233, .92); border-bottom-color: var(--filet); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque-logos { position: relative; display: block; height: 52px; aspect-ratio: 548 / 543; flex: none; }
.marque-logos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.marque .logo-sombre { opacity: 0; }
.bar.sur-papier .logo-clair { opacity: 0; }
.bar.sur-papier .logo-sombre { opacity: 1; }
.bar-droite { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.bientot { color: var(--laiton); }
.bar.sur-papier .bientot { color: var(--gris); }
.bar-cta { text-decoration: none; border: 1px solid currentColor; padding: 7px 12px; }
.bar-cta:hover { background: var(--ivoire); color: var(--encre); }
.bar.sur-papier .bar-cta:hover { background: var(--encre); color: var(--ivoire); }
@media (max-width: 520px) { .bientot { display: none; } .bar-droite { font-size: .66rem; } }

/* La bobine : sa hauteur fait la durée du film */
.reel { position: relative; height: 1200vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--nuit); }
#ecran { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.voile { position: absolute; inset: 0; pointer-events: none; background: var(--nuit); opacity: 0; }

.cartons { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding-inline: var(--g-gauche) var(--g-droite); }
.carton { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; opacity: 0; will-change: opacity, transform; }
.carton.bas { position: relative; top: clamp(70px, 12vh, 120px); }
.ligne { font-family: var(--serif); font-weight: 600; font-size: clamp(2.15rem, 6.4vw, 5rem); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance; max-width: 15ch; color: var(--ivoire); }
.preuve { font-family: var(--mono); font-size: clamp(.66rem, 1.5vw, .78rem); letter-spacing: .16em; text-transform: uppercase; color: var(--laiton); font-variant-numeric: tabular-nums; text-wrap: balance; max-width: 46ch; }

/* Le titre */
.titre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding-inline: var(--g-gauche) var(--g-droite); pointer-events: none; }
.titre-sceau { width: clamp(64px, 11vw, 96px); height: auto; margin-bottom: clamp(20px, 3vw, 30px); overflow: visible; }
.titre-sceau rect { fill: none; stroke: var(--ivoire); stroke-width: 5.6; stroke-dasharray: 100; stroke-dashoffset: 100; }
.titre-sceau circle { fill: var(--laiton); opacity: 0; }
.titre-mot { margin: 0 -.17em 0 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.6rem, 8.4vw, 6rem); letter-spacing: .17em; line-height: 1; opacity: 0; }
.titre-signe { margin: clamp(14px, 2vw, 22px) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.6rem); opacity: 0; }
.titre-ar { margin: 6px 0 0; font-family: var(--arabe); font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: var(--brume); opacity: 0; }
.titre-bientot { margin: clamp(18px, 2.6vw, 28px) -.3em 0 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--laiton); opacity: 0; }
.titre-cta { margin-top: clamp(26px, 4vw, 40px); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(247, 243, 233, .55); color: var(--ivoire); text-decoration: none; font-weight: 500; font-size: .95rem; opacity: 0; pointer-events: none; }
.titre-cta:hover { background: var(--ivoire); color: var(--encre); }
.titre-cta.actif { pointer-events: auto; }

.indice { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); transform: translateX(-50%); margin: 0; display: grid; justify-items: center; gap: 10px; font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brume); white-space: nowrap; }
.indice::after { content: ""; width: 1px; height: 34px; background: var(--brume); transform-origin: top; animation: descente 2.2s ease-in-out infinite; }
@keyframes descente { 0% { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.frise { position: absolute; left: var(--g-gauche); right: var(--g-droite); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); height: 9px; pointer-events: none; }
.frise::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(247, 243, 233, .16); }
.frise i { position: absolute; top: 1px; width: 1px; height: 7px; background: rgba(247, 243, 233, .3); }
.frise b { position: absolute; left: 0; top: 4px; height: 1px; width: 0; background: var(--laiton); }

/* Sans JavaScript, ou mouvement réduit : la bobine devient une suite de cartons fixes */
:is(.fixe, .sans-js) .reel { height: auto; }
:is(.fixe, .sans-js) .stage { position: relative; height: auto; padding-block: 128px 96px; display: grid; gap: 96px; }
:is(.fixe, .sans-js) :is(#ecran, .indice, .frise, .voile) { display: none; }
:is(.fixe, .sans-js) :is(.cartons, .titre) { position: static; display: grid; }
:is(.fixe, .sans-js) .cartons { gap: 80px; }
:is(.fixe, .sans-js) .carton { grid-area: auto; }
:is(.fixe, .sans-js) .carton.bas { top: 0; }
:is(.fixe, .sans-js) :is(.carton, .titre-mot, .titre-signe, .titre-ar, .titre-bientot, .titre-sceau circle) { opacity: 1 !important; transform: none !important; filter: none !important; }
:is(.fixe, .sans-js) .titre-sceau rect { stroke-dashoffset: 0; }
:is(.fixe, .sans-js) .titre-cta { opacity: 1; pointer-events: auto; }
.sans-js .bar { background-color: var(--nuit); }

/* Le cercle des fondateurs : la lumière revient */
.cercle { background: var(--ivoire); color: var(--encre); color-scheme: light; padding-block: clamp(96px, 13vw, 150px) clamp(72px, 10vw, 120px); padding-inline: var(--g-gauche) var(--g-droite); }
.cercle-grille { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 880px) { .cercle-grille { grid-template-columns: minmax(0, 1fr); } }
.pitch { min-width: 0; display: grid; gap: 22px; }
.surtitre { margin: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.pitch h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 4.3vw, 3.25rem); line-height: 1.07; letter-spacing: -.01em; text-wrap: balance; }
.chapo { margin: 0; font-size: 1.06rem; color: var(--gris); max-width: 46ch; }
.termes { margin: 6px 0 0; display: grid; border-top: 1px solid var(--filet); }
.termes div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--filet); }
.termes dt { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.termes dd { margin: 0; }
.garantie { margin: 4px 0 0; display: flex; gap: 12px; align-items: center; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--gris); }
.garantie svg { width: 18px; height: 18px; flex: none; color: var(--encre); }

form { min-width: 0; background: var(--papier); border: 1px solid var(--filet); padding: clamp(20px, 3.4vw, 36px); display: grid; gap: 18px; }
.form-titre { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 560px) { .deux { grid-template-columns: minmax(0, 1fr); } }
.champ { display: grid; gap: 6px; min-width: 0; }
.champ label { font-weight: 500; font-size: .93rem; }
.facultatif { font-weight: 400; color: var(--gris); }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--encre); background: #FFFFFF; border: 1px solid var(--bord); border-radius: 0; padding: 11px 12px; width: 100%; box-sizing: border-box; }
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
[aria-invalid="true"] { border-color: var(--cuivre); box-shadow: inset 3px 0 0 var(--cuivre); }
.erreur { font-size: .84rem; color: var(--erreur); }
.erreur:empty { display: none; }
.compteur { justify-self: end; font-family: var(--mono); font-size: .72rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.accord { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: .88rem; }
.accord input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--encre); }
.note { margin: 0; padding: 10px 12px; background: var(--sable); border: 1px solid var(--filet); font-size: .88rem; color: var(--encre); }
.note-js { display: none; }
.sans-js .note-js { display: block; }
.sans-js .envoyer { display: none; }
.envoyer { justify-self: start; display: inline-flex; align-items: center; gap: 12px; background: var(--encre); color: var(--ivoire); border: 0; padding: 14px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.envoyer svg { width: 16px; height: 16px; }
.envoyer:hover { background: #2A2C55; }
.envoyer:disabled { opacity: .6; cursor: progress; }
.etat { margin: 0; font-size: .9rem; color: var(--encre); }
.etat:empty { display: none; }
.merci { display: grid; gap: 14px; }
.merci h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 2rem; }
.merci p { margin: 0; max-width: 46ch; }

/* Pied de page */
.pied { background: var(--encre); color: var(--brume); padding-block: 40px calc(env(safe-area-inset-bottom, 0px) + 40px); padding-inline: var(--g-gauche) var(--g-droite); font-size: .86rem; }
.pied-grille { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; }
.pied .marque-logos { height: 44px; }
.pied .logo-clair { opacity: 1; }
.pied .logo-sombre { opacity: 0; }
.pied p { margin: 0; }
.pied-note { flex: 1 1 360px; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .indice::after { animation: none; } }