/* PLASMAKULT, page d'attente. Une seule encre, comme le kit d'identité. */

@font-face {
  font-family: "Readex Pro";
  src: url("fonts/readex-pro.woff2") format("woff2-variations"), url("fonts/readex-pro.woff2") format("woff2");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --noir: #0B0D10;       /* fond, l'encre sombre du kit */
  --blanc: #FFFFFF;      /* le symbole et le mot */
  --os: #ECEAE4;         /* le texte courant */
  --cendre: #9A9EA6;     /* le texte secondaire */
  --trait: #2A2F37;      /* filets et bordures */
  --champ: #3B414B;      /* bord du champ e-mail */
  --marge: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

html {
  background: var(--noir);
  color: var(--os);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.6;
  font-variation-settings: "HEXP" 0;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blanc); }

:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

.evitement {
  position: absolute; left: var(--marge); top: -100px;
  background: var(--blanc); color: var(--noir); padding: 0.5rem 1rem; border-radius: 999px; z-index: 10;
}
.evitement:focus { top: 16px; }

/* ---------------------------------------------------------------- en-tête */
.entete {
  display: flex; justify-content: flex-end;
  padding: 20px var(--marge) 0;
}
.langues { display: flex; gap: 4px; }
.langues button {
  font: inherit; font-size: 0.875rem; letter-spacing: 0.04em;
  color: var(--cendre); background: none; border: 0; border-radius: 999px;
  padding: 0.35rem 0.7rem; cursor: pointer;
}
.langues button[aria-pressed="true"] { color: var(--blanc); box-shadow: inset 0 0 0 1px var(--champ); }
.langues button:hover { color: var(--blanc); }

/* ---------------------------------------------------------------- ouverture */
.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  min-height: calc(100svh - 60px);
  padding: 24px var(--marge) 72px;
}

.texte { max-width: 33rem; }

.mot { margin: 0; line-height: 0; }
.mot svg { display: block; width: min(100%, 31rem); height: auto; color: var(--blanc); }

.accroche {
  margin: 1.6rem 0 1.2rem;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 260;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-variation-settings: "HEXP" 45;
  color: var(--blanc);
  text-wrap: balance;
}

.intro { margin: 0 0 2.2rem; color: var(--os); max-width: 31rem; }

/* ---------------------------------------------------------------- le sigil */
.sigil {
  justify-self: center;
  width: min(100%, 700px);
  color: var(--blanc);
}
.sigil svg { display: block; width: 100%; height: auto; overflow: visible; }

.sigil .anneau, .sigil .fil { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* La séquence d'ouverture : le cercle se trace, le réseau se tisse, puis la décharge frappe le verre. */
.js .sigil .anneau { animation: trace 1.2s cubic-bezier(.65, 0, .25, 1) both; }
.js .sigil .fil { animation: trace 0.95s cubic-bezier(.65, 0, .25, 1) both; animation-delay: calc(0.35s + var(--i, 0) * 70ms); }
.js .sigil .noeud { animation: apparait 0.4s ease-out both 1.15s; }
.js .sigil .noyau { animation: apparait 0.3s ease-out both 0.2s; }
.js .sigil .trace { animation: trace 0.32s cubic-bezier(.8, 0, .4, 1) both 1.55s; }
.js .sigil .verre { animation: impact 0.55s cubic-bezier(.2, .9, .3, 1.3) both 1.83s; }
.js .sigil .reseau { animation: eclair 0.42s steps(1, end) both 1.83s; }

/* Rejouée quand l'inscription est enregistrée */
/* (noms d'animation distincts : un navigateur ne relance une animation que si son nom change) */
.js .sigil.frappe .trace { animation: trace-bis 0.3s cubic-bezier(.8, 0, .4, 1) both 0s; }
.js .sigil.frappe .verre { animation: impact-bis 0.55s cubic-bezier(.2, .9, .3, 1.3) both 0.26s; }
.js .sigil.frappe .reseau { animation: eclair-bis 0.42s steps(1, end) both 0.26s; }

.sigil .verre { transform-box: fill-box; transform-origin: center; }

@keyframes trace {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes trace-bis {
  0% { stroke-dashoffset: 1; opacity: 0; }
  2% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes impact { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes impact-bis { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes eclair { 0% { opacity: 1; } 20% { opacity: 0.35; } 45% { opacity: 1; } 65% { opacity: 0.6; } 85% { opacity: 1; } }
@keyframes eclair-bis { 0% { opacity: 1; } 20% { opacity: 0.35; } 45% { opacity: 1; } 65% { opacity: 0.6; } 85% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .sigil *, .js .sigil.frappe * { animation: none !important; }
}

/* ---------------------------------------------------------------- inscription */
.inscription label { display: block; font-weight: 500; margin-bottom: 0.6rem; color: var(--blanc); }

.champ { display: flex; gap: 8px; max-width: 31rem; }
.champ input {
  flex: 1; min-width: 0;
  font: inherit; color: var(--blanc);
  background: transparent;
  border: 1px solid var(--champ); border-radius: 999px;
  padding: 0.8rem 1.15rem;
}
.champ input::placeholder { color: #6E737B; }
.champ input:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; border-color: transparent; }
.champ input[aria-invalid="true"] { border-color: var(--blanc); }
.champ button {
  font: inherit; font-weight: 500;
  color: var(--noir); background: var(--blanc);
  border: 0; border-radius: 999px;
  padding: 0.8rem 1.4rem; cursor: pointer; white-space: nowrap;
}
.champ button:hover { background: var(--os); }
.champ button[disabled] { opacity: 0.6; cursor: progress; }

.pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.statut { min-height: 1.6em; margin: 0.8rem 0 0.3rem; color: var(--blanc); font-weight: 500; }
.statut:empty { margin: 0.4rem 0 0; min-height: 0; }

.note { margin: 0.4rem 0 0; color: var(--cendre); font-size: 0.875rem; line-height: 1.55; max-width: 31rem; }

/* ---------------------------------------------------------------- en préparation */
.preparation {
  border-top: 1px solid var(--trait);
  padding: 64px var(--marge) 80px;
}
.preparation h2 {
  margin: 0 0 2.4rem;
  font-size: 1.5rem; font-weight: 300; line-height: 1.2;
  font-variation-settings: "HEXP" 45;
  color: var(--blanc);
}
.outils {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 48px;
}
.outils li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.outils img { display: block; width: 72px; height: 72px; }
.outils h3 { margin: 0 0 0.15rem; font-size: 1rem; font-weight: 500; color: var(--blanc); }
.outils p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--cendre); max-width: 26rem; }

/* ---------------------------------------------------------------- pied de page */
.pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  border-top: 1px solid var(--trait);
  padding: 28px var(--marge) 36px;
  font-size: 0.875rem; color: var(--cendre);
}
.pied p { margin: 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }

/* ---------------------------------------------------------------- mentions légales */
.page { max-width: 46rem; padding: 32px var(--marge) 80px; }
.page h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 300; font-variation-settings: "HEXP" 45; color: var(--blanc); margin: 1.5rem 0 2rem; line-height: 1.15; }
.page h2 { font-size: 1.125rem; font-weight: 500; color: var(--blanc); margin: 2.4rem 0 0.6rem; }
.page p, .page li { color: var(--os); }
.page ul { padding-left: 1.2rem; }
.retour { color: var(--cendre); font-size: 0.9375rem; }
.a-completer { outline: 1px dashed var(--cendre); outline-offset: 2px; padding: 0 0.2em; color: var(--blanc); }

/* ---------------------------------------------------------------- petits écrans */
@media (max-width: 1080px) {
  .outils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ouverture { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; padding-top: 8px; }
  .sigil { order: -1; width: min(72vw, 340px); }
  .texte { max-width: none; }
}
@media (max-width: 600px) {
  .outils { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .outils li { grid-template-columns: 60px minmax(0, 1fr); }
  .outils img { width: 60px; height: 60px; }
}
@media (max-width: 440px) {
  .champ { flex-direction: column; }
  .champ button { padding: 0.85rem 1.4rem; }
}

/* ---------------------------------------------------------------- version sans formulaire : tout tient sur un écran */
.seule { min-height: 100svh; display: flex; flex-direction: column; }
.seule main { flex: 1; display: flex; }
.seule .ouverture { flex: 1; min-height: 0; }
.seule .intro { margin-bottom: 0; }
.sigil[data-frappe] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (max-width: 860px) {
  .seule .ouverture { align-content: center; padding-bottom: 48px; }
}