/* ════════════════════════════════════════════════════════════
   SIMPERIC — page d'accueil « Nébuleuse Marée »
   Page unique : scène canvas plein écran + composition centrée.
   Les tokens de marque (couleurs, familles) viennent de tokens.css.
   ════════════════════════════════════════════════════════════ */

/* ——— Fontes auto-hébergées (aucune requête tierce) ——— */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight:300 500;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* ——— Base ——— */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:linear-gradient(to bottom, var(--forest-950, #0E1A14) 0%, var(--forest-900, #15281E) 100%);
  color:var(--cream-50, #FBF8F1);
  font-family:var(--font-body, "Inter", system-ui, sans-serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(194,165,94,0.35); }

.hero{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

/* ——— Canvas : soie + nébuleuse + scrim + vignette + grain,
       tout est composité dans cette seule couche ——— */
#silk{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
}

/* La nébuleuse est composée dans le canvas (screen) par le moteur ;
   scrim et vignette restent des calques DOM statiques, sans blend. */

/* Assombrissement radial derrière le bloc de texte — la copie reste
   parfaitement lisible même à la crête d'une marée */
.scrim{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 64% 52% at 50% 44%,
    rgba(14,26,20,0.72) 0%,
    rgba(14,26,20,0.42) 50%,
    rgba(14,26,20,0.00) 78%);
}

/* Vignette cinématographique douce */
.vignette{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:radial-gradient(ellipse 118% 96% at 50% 50%,
    rgba(0,0,0,0) 52%,
    rgba(9,16,12,0.30) 80%,
    rgba(7,13,10,0.55) 100%);
}

/* ——— Grain argentique : tuile générée par le moteur (backgroundImage),
       jitter step-end façon pellicule, au-dessus du texte comme la démo ——— */
.grain{
  position:absolute;
  inset:-50%;
  width:200%; height:200%;
  z-index:4;
  pointer-events:none;
  opacity:.55;                 /* tuile ~10 % d'alpha → ~5,5 % effectif */
  mix-blend-mode:overlay;
  background-repeat:repeat;
  animation:grainShift 1.3s infinite;
  animation-timing-function:step-end;
  will-change:transform;
}
@keyframes grainShift{
  0%   { transform:translate3d(0,0,0); }
  10%  { transform:translate3d(-2.1%, 1.4%, 0); }
  20%  { transform:translate3d(1.6%, -2.3%, 0); }
  30%  { transform:translate3d(-1.2%, -1.8%, 0); }
  40%  { transform:translate3d(2.4%, 1.1%, 0); }
  50%  { transform:translate3d(-1.8%, 2.2%, 0); }
  60%  { transform:translate3d(1.1%, -1.2%, 0); }
  70%  { transform:translate3d(-2.3%, -0.7%, 0); }
  80%  { transform:translate3d(1.9%, 1.9%, 0); }
  90%  { transform:translate3d(-0.8%, 2.4%, 0); }
  100% { transform:translate3d(0,0,0); }
}

/* ——— Lockup ——— */
.lockup{
  position:absolute;
  top:34px; left:38px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
}
.cachet{
  width:32px; height:32px;
  background:var(--brass-600, #A68842);
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-size:21px;
  color:var(--forest-900, #15281E);
  line-height:1;
}
.wordmark{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:22px;
  color:var(--cream-50, #FBF8F1);
  letter-spacing:0.005em;
}

/* ——— Composition centrée ——— */
.content{
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 24px 9vh;   /* légèrement au-dessus du centre optique */
}
h1{
  font-family:var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-weight:400;
  font-size:clamp(44px, 6vw, 76px);
  line-height:1.05;
  letter-spacing:normal;
  color:var(--cream-50, #FBF8F1);
  max-width:min(92vw, 980px);
  text-wrap:balance;
}
.cta-group{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.cta{
  display:inline-block;
  background:var(--cream-50, #FBF8F1);
  color:var(--forest-900, #15281E);
  padding:16px 32px;
  border-radius:var(--radius-md, 6px);
  font-family:var(--font-body, "Inter", system-ui, sans-serif);
  font-weight:500;
  font-size:15px;
  text-decoration:none;
  transition:background-color .35s ease, transform .35s ease, box-shadow .35s ease;
  box-shadow:0 10px 34px rgba(0,0,0,0.28);
}
.cta:hover{
  background:var(--cream-100, #F5EFE2);
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(0,0,0,0.34);
}
.cta-note{
  font-family:var(--font-body, "Inter", system-ui, sans-serif);
  font-size:12px;
  color:rgba(251,248,241,0.55);
}

/* Anneau de focus visible — lisible sur fond sombre */
.cta:focus-visible,
.corner:focus-visible{
  outline:2px solid var(--brass-500, #C2A55E);
  outline-offset:2px;
  border-radius:var(--radius-sm, 4px);
}
.cta:focus-visible{ border-radius:var(--radius-md, 6px); }

/* ——— Légendes de coin, murmurées ——— */
.corner{
  position:absolute;
  bottom:8px;
  z-index:3;
  font-family:var(--font-body, "Inter", system-ui, sans-serif);
  font-size:12px;
  line-height:1.4;
  color:rgba(251,248,241,0.45);
  letter-spacing:0.01em;
  padding:15px 16px;   /* cible tactile ≥ 44 px pour le lien mail */
}
.corner-left{ left:22px; }
.corner-right{ right:22px; }
a.corner{
  text-decoration:none;
  transition:color .25s ease;
}
a.corner:hover{
  color:rgba(251,248,241,0.78);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ——— Entrée du texte en deux temps (h1 puis CTA, ~900 ms) ———
   L'état masqué n'existe que si JS est présent (html.js) et tant que
   .text-in n'est pas posé — sans JS le texte est visible d'emblée. */
.fx{
  transition:opacity .62s ease-out, transform .62s cubic-bezier(.22,.61,.36,1);
}
.fx-2{ transition-delay:.28s; }
.js:not(.text-in) .fx{
  opacity:0;
  transform:translateY(12px);
}

/* ——— Écrans étroits ——— */
@media (max-width:600px){
  .lockup{ top:22px; left:22px; }
  .content{ padding:0 20px 9vh; }
  .corner-left{ left:4px; }
  .corner-right{ right:4px; }
}
@media (max-width:400px){
  .corner-left{ display:none; }   /* on garde le lien mail, fonctionnel */
}

/* ——— Mouvement réduit : aucune animation, texte immédiat ——— */
@media (prefers-reduced-motion: reduce){
  .fx{ transition:none; }
  .js:not(.text-in) .fx{ opacity:1; transform:none; }
  .cta{ transition:none; }
  .cta:hover{ transform:none; }
  a.corner{ transition:none; }
  .grain{ animation:none; }
}

/* ——— Impression : papier blanc, encre, pas de scène ——— */
@media print{
  html, body{
    background:#fff !important;
    color:var(--ink-900, #1A1A17);
    overflow:visible;
    height:auto;
  }
  #silk, .scrim, .vignette, .grain{ display:none !important; }
  .hero{ height:auto; overflow:visible; }
  .fx{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lockup{ position:static; padding:24px 0 0; }
  .cachet{
    background:#fff;
    color:var(--ink-900, #1A1A17);
    border:1px solid var(--ink-900, #1A1A17);
  }
  .wordmark{ color:var(--ink-900, #1A1A17); }
  .content{
    height:auto;
    padding:64px 0;
    align-items:flex-start;
    text-align:left;
  }
  h1{ color:var(--ink-900, #1A1A17); }
  .cta{
    background:none;
    color:var(--ink-900, #1A1A17);
    border:1px solid var(--ink-900, #1A1A17);
    box-shadow:none;
  }
  .cta-note{ color:var(--ink-500, #6B6B63); }
  .corner{
    position:static;
    display:block;
    padding:0 0 4px;
    color:var(--ink-500, #6B6B63);
  }
}