/* Plenova — page d'attente et pages légales.
   Tout tient dans ce fichier : aucune dépendance, aucun outil de build. */

:root {
  --cream: #fbfaf4;
  --mint: #eef5ea;
  --sage: #a3bf99;
  --sage-soft: #cfe0c6;
  --cta: #2d6b5e;
  --cta-dark: #235449;
  --title: #174238;
  --ink: #3a463a;
  --ink-soft: #6b7a68;
  --radius: 1.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  min-block-size: 100svh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--cta); text-underline-offset: 0.2em; }
a:hover { color: var(--cta-dark); }
img { max-inline-size: 100%; display: block; }

.wrap { inline-size: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* ---------- Fond vivant ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--mint), var(--cream) 55%); }
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: drift 26s var(--ease) infinite alternate;
}
.aurora i:nth-child(1) { inline-size: 42rem; block-size: 42rem; inset-block-start: -16rem; inset-inline-start: -12rem; background: #bfe0b2; }
.aurora i:nth-child(2) { inline-size: 34rem; block-size: 34rem; inset-block-end: -14rem; inset-inline-end: -10rem; background: #d8ecd0; animation-delay: -9s; }
.aurora i:nth-child(3) { inline-size: 22rem; block-size: 22rem; inset-block-start: 38%; inset-inline-start: 58%; background: #e9dfc4; opacity: 0.4; animation-delay: -16s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3rem, 2.5rem, 0) scale(1.12); }
}

/* ---------- En-tête ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--title); }
.brand img { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 0.75rem; box-shadow: 0 6px 16px -8px rgb(23 66 56 / 0.5); }
.brand b { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }

.langs { display: inline-flex; gap: 0.15rem; padding: 0.22rem; border-radius: 9999px; background: rgb(255 255 255 / 0.75); box-shadow: inset 0 0 0 1px rgb(23 66 56 / 0.08); }
.langs a {
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
}
.langs a[aria-current='true'] { background: var(--cta); color: #fff; }

/* ---------- Scène d'Eve ---------- */
.hero { text-align: center; padding-block: 1rem 3.5rem; }

.scene { position: relative; inline-size: 18rem; block-size: 18rem; margin: 0 auto 2rem; }
@media (max-width: 30rem) { .scene { inline-size: 15rem; block-size: 15rem; } }

.scene .halo {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgb(226 243 223 / 0.9) 48%, rgb(226 243 223 / 0) 72%);
  box-shadow: 0 30px 70px -40px rgb(23 66 56 / 0.75);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.045); } }

.scene .rings { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.scene .rings circle { fill: none; stroke: var(--sage); }
.scene .rings .r1 { stroke-width: 1.5; stroke-dasharray: 2 10; opacity: 0.7; animation: spin 34s linear infinite; transform-origin: 50% 50%; }
.scene .rings .r2 { stroke-width: 1.5; stroke-dasharray: 18 14; opacity: 0.35; animation: spin 48s linear infinite reverse; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Eve flotte, et son ombre respire avec elle. */
.scene .eve {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 9.5rem;
  margin: -4.75rem 0 0 -4.75rem;
  animation: float 5.5s ease-in-out infinite;
  filter: drop-shadow(0 18px 22px rgb(23 66 56 / 0.28));
}
@media (max-width: 30rem) { .scene .eve { inline-size: 8rem; margin: -4rem 0 0 -4rem; } }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-0.85rem) rotate(1.5deg); }
}

/* Trois feuilles en orbite, chacune décalée sur le même cercle. */
.scene .orbit { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.scene .orbit i {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;
  border-radius: 9999px 0 9999px 0;
  background: var(--sage);
  transform: rotate(var(--a)) translateY(-8.4rem);
}
@media (max-width: 30rem) { .scene .orbit i { transform: rotate(var(--a)) translateY(-7rem); } }
.scene .orbit i:nth-child(2) { background: #c9b98a; }
.scene .orbit i:nth-child(3) { background: var(--sage-soft); }

/* Quelques étincelles, pour l'idée du travail en cours. */
.scene .spark {
  position: absolute;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(143 168 114 / 0.5);
  opacity: 0;
  animation: twinkle 4.5s ease-in-out infinite;
}
.scene .spark:nth-of-type(1) { inset-block-start: 14%; inset-inline-start: 20%; animation-delay: 0.2s; }
.scene .spark:nth-of-type(2) { inset-block-start: 26%; inset-inline-end: 12%; animation-delay: 1.4s; }
.scene .spark:nth-of-type(3) { inset-block-end: 18%; inset-inline-start: 14%; animation-delay: 2.6s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }

/* ---------- Texte ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.8);
  box-shadow: inset 0 0 0 1px rgb(143 168 114 / 0.28);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--title);
}
.badge .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--cta); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(45 107 94 / 0.45); } 50% { opacity: 0.75; box-shadow: 0 0 0 0.35rem rgb(45 107 94 / 0); } }

h1 {
  margin-block-start: 1.4rem;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--title);
}
h1 .em {
  /* Sur sa propre ligne : la coupure du titre ne depend plus de la largeur. */
  display: block;
  background: linear-gradient(100deg, var(--cta), #6f9a5f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede { margin-block-start: 1.1rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--ink); max-inline-size: 34rem; margin-inline: auto; }

/* ---------- Barre de pousse ---------- */
.grow { margin: 2.2rem auto 0; max-inline-size: 22rem; }
.grow-track { position: relative; block-size: 0.55rem; border-radius: 9999px; background: rgb(143 168 114 / 0.22); overflow: hidden; }
.grow-track::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cta), #8fa872, transparent);
  animation: slide 2.4s var(--ease) infinite;
}
@keyframes slide { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.grow-label { margin-block-start: 0.7rem; font-size: 0.82rem; color: var(--ink-soft); }
.grow-label i { font-style: normal; animation: dots 1.6s steps(4) infinite; }
@keyframes dots { 0% { opacity: 0; } 20%, 100% { opacity: 1; } }

/* ---------- Boutons des stores ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-block-start: 2.2rem; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.3rem;
  border-radius: 1rem;
  background: #1d2f1b;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background-color 0.2s ease;
}
.store:hover { background: var(--title); color: #fff; transform: translateY(-2px); }
.store svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
.store span { display: block; text-align: start; line-height: 1.15; }
.store small { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.75; }
.store b { font-size: 0.98rem; font-weight: 700; }

/* ---------- Contact ---------- */
.contact {
  margin: 2.5rem auto 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.3rem;
  border-radius: 1.1rem;
  background: rgb(255 255 255 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(143 168 114 / 0.25);
  font-size: 0.92rem;
}
.contact a { font-weight: 600; }

/* ---------- Pied de page ---------- */
footer { padding-block: 2.5rem 3rem; border-block-start: 1px solid rgb(143 168 114 / 0.22); margin-block-start: 3rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: center; font-size: 0.88rem; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { color: var(--cta); text-decoration: underline; }
.foot-legal { margin-block-start: 1.1rem; text-align: center; font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- Pages légales ---------- */
.doc { padding-block: 1rem 3rem; }
.back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.doc article { margin-block-start: 1.5rem; background: rgb(255 255 255 / 0.78); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 2vw, 3rem); box-shadow: inset 0 0 0 1px rgb(143 168 114 / 0.22), 0 24px 60px -50px rgb(23 66 56 / 0.8); }
.doc h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-block-end: 0.3rem; }
.doc h2 { margin-block: 2.2rem 0.7rem; font-size: 1.22rem; font-weight: 700; color: var(--title); letter-spacing: -0.01em; }
.doc h3 { margin-block: 1.5rem 0.5rem; font-size: 1.02rem; font-weight: 700; color: var(--title); }
.doc p, .doc li { font-size: 0.97rem; }
.doc p + p { margin-block-start: 0.9rem; }
.doc ul, .doc ol { margin-block: 0.8rem; padding-inline-start: 1.3rem; display: grid; gap: 0.45rem; }
.doc li::marker { color: var(--sage); }
.doc table { inline-size: 100%; border-collapse: collapse; margin-block: 1.2rem; font-size: 0.9rem; }
.doc th, .doc td { text-align: start; padding: 0.6rem 0.8rem; border-block-end: 1px solid rgb(143 168 114 / 0.25); }
.doc th { color: var(--title); font-weight: 700; }
.doc strong { color: var(--title); }
.doc hr { border: 0; border-block-start: 1px solid rgb(143 168 114 / 0.25); margin-block: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .scene .halo, .scene .rings circle, .scene .eve, .scene .orbit,
  .scene .spark, .grow-track::after, .badge .dot, .grow-label i { animation: none; }
  .scene .spark { opacity: 0.8; }
}