/* Page d'attente d'elantec-asso.fr, 24/09/2026. Couleurs et polices de la charte ELANTEC (assets/tokens.css, assets/fonts.css). */
:root{
  --fond:#FAFAF7; --fond-2:#F1F2F5; --encre:#0F0F1F; --encre-2:#3D3D52; --encre-3:#6B7080;
  --nuit:#253569; --cyan:#3F7E97; --chaud:#D98B3F; --filet:#E2E5EA;
  --m1:#923293; --m2:#EB3230; --m3:#F4802F; --m4:#F4E532; --m5:#9AC341; --m6:#253569; --m7:#3DA1D3;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fond);color:var(--encre);font:17px/1.6 "Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.cadre{width:100%;max-width:1120px;margin:0 auto;padding-inline:20px}

/* En-tête */
.haut{padding-block:22px}
.haut img{height:44px;width:auto;display:block}

/* Scène principale */
.scene{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:24px 56px}
.statut{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--nuit);background:#fff;border:1px solid var(--filet);border-radius:99px;padding:9px 14px}
.statut .points{display:inline-flex;gap:4px}
.statut .points i{width:6px;height:6px;border-radius:50%;background:var(--chaud);animation:clignote 1.4s infinite ease-in-out}
.statut .points i:nth-child(2){animation-delay:.2s}
.statut .points i:nth-child(3){animation-delay:.4s}
h1{margin:22px 0 16px;font-size:clamp(38px,6.4vw,68px);line-height:1.02;letter-spacing:-.02em;font-weight:700;color:var(--nuit);text-wrap:balance}
h1 .souligne{background:linear-gradient(90deg,var(--m1),var(--m2),var(--m3),var(--m4),var(--m5),var(--m7)) no-repeat 0 92%/100% .14em}
.accroche{margin:0;font-size:clamp(18px,2.1vw,21px);color:var(--encre-2);max-width:34ch}

/* Chiffres */
.chiffres{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.chiffres li{flex:1 1 150px;background:#fff;border:1px solid var(--filet);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.chiffres b{font:700 26px/1.1 "Space Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.chiffres li:nth-child(1) b{color:var(--m1)}
.chiffres li:nth-child(2) b{color:var(--m3)}
.chiffres li:nth-child(3) b{color:var(--cyan)}
.chiffres span{font-size:14px;color:var(--encre-2);line-height:1.35}

/* Symbole animé */
.symbole{position:relative;display:grid;place-items:center}
.symbole svg{width:min(100%,420px);height:auto;overflow:visible}
.symbole .arc{fill:var(--encre)}
.symbole circle{transform-box:fill-box;transform-origin:center;animation:arrivee .9s cubic-bezier(.34,1.56,.64,1) both, vague 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .14s), calc(1.2s + var(--i) * .18s)}
.symbole .ombre{position:absolute;inset:12% 6% 6% 14%;border-radius:50%;background:radial-gradient(circle at 60% 55%,rgba(244,128,47,.16),rgba(146,50,147,.08) 45%,transparent 70%);filter:blur(10px);z-index:-1}

/* Bloc contact */
.contact{background:var(--nuit);color:#FAFAF7}
.contact .cadre{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding-block:36px}
.contact h2{margin:0 0 6px;font-size:clamp(22px,2.8vw,28px);line-height:1.2;text-wrap:balance}
.contact p{margin:0;color:#C9CEE3;max-width:56ch}
.boutons{display:flex;flex-wrap:wrap;gap:12px}
.bouton{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;border-radius:10px;padding:12px 18px;border:1.5px solid rgba(250,250,247,.35)}
.bouton.plein{background:#FAFAF7;color:var(--nuit);border-color:#FAFAF7}
.bouton:hover{border-color:#FAFAF7}
.bouton:focus-visible,.bas a:focus-visible{outline:2px solid var(--m4);outline-offset:3px}

/* Pied de page légal */
.bas{background:#1B2750;color:#AEB5CF;font:13px/1.6 "Space Mono",ui-monospace,monospace}
.bas .cadre{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:18px}
.bas nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.bas a{color:#DDE1EF}
.bas .credit{opacity:.6;flex-basis:100%}

@keyframes arrivee{0%{opacity:0;transform:translateY(-140%) scale(.4)}100%{opacity:1;transform:none}}
@keyframes vague{0%,100%{transform:translateY(0)}50%{transform:translateY(-9%)}}
@keyframes clignote{0%,100%{opacity:.25}50%{opacity:1}}

@media (max-width:860px){
  .scene{grid-template-columns:1fr;gap:8px;padding-block:8px 44px}
  .symbole{order:-1}
  .symbole svg{width:min(62%,260px)}
  .contact .cadre{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .symbole circle,.statut .points i{animation:none}
}