/* ═══════════════════════════════════════════════════════════════
   Jamodio — pages de la liste d'attente (FR + EN) :
   /liste-attente, /liste-attente/confirmer, /liste-attente/desinscription
   /en/waitlist,   /en/waitlist/confirm,     /en/waitlist/unsubscribe
   et /beta, /en/beta (« beta complète », renvoie vers la liste d'attente).
   Un état (erreur, succès) se lit par une icône ET un texte, jamais par la
   couleur seule. Les icônes (.jico, 1em) prennent la taille du texte parent.
   ═══════════════════════════════════════════════════════════════ */

.wl-hero { text-align: center; padding: var(--page-top) 28px 20px; max-width: 760px; margin: 0 auto; position: relative; }
.wl-hero::before { content: ''; position: absolute; inset: -40px 0 0; background: radial-gradient(ellipse at 50% 0%, rgba(232, 255, 58, .10), transparent 58%); pointer-events: none; z-index: 0; }
.wl-hero > * { position: relative; z-index: 1; }
.wl-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 7vw, 64px); letter-spacing: 1.5px; line-height: 1.02; margin: 10px 0 14px; }
.wl-hero h1 .accent { color: var(--accent); }
.wl-hero .sub { font-size: 16px; color: var(--muted); line-height: 1.65; max-width: 540px; margin: 0 auto; }

.wl-wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px 56px; }
.wl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 34px; }
@media (max-width: 560px) { .wl-card { padding: 24px 20px; } }

.wl-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.wl-field label { font-size: 14px; font-weight: 600; color: var(--text); }
.wl-field .opt { color: var(--muted); font-weight: 400; }
.wl-field input[type="email"], .wl-field input[type="text"] {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-md); padding: 12px 14px; font-family: 'DM Sans', sans-serif; font-size: 16px; outline: none;
  transition: border-color .15s, background .15s; width: 100%;
}
.wl-field input:focus { border-color: var(--accent); background: rgba(255, 255, 255, .06); }
.wl-field.invalid input { border-color: var(--red); }
.wl-field-error { font-size: 13px; color: var(--red); min-height: 16px; line-height: 1.4; }
.wl-field.invalid .wl-field-error::before { content: '! '; font-weight: 700; }

.wl-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.wl-check:hover { border-color: rgba(232, 255, 58, .35); }
.wl-check input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.wl-check span { font-size: 14px; line-height: 1.55; color: var(--text); }
.wl-check a { color: var(--accent); text-underline-offset: 2px; }
.wl-field.invalid .wl-check { border-color: var(--red); }

.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius-md); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform .1s, opacity .15s; }
.wl-btn:hover { transform: translateY(-1px); }
.wl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.wl-note { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 14px; text-align: center; }

.wl-alert { display: none; gap: 10px; align-items: flex-start; border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px; line-height: 1.6; margin-top: 18px; background: rgba(255, 95, 95, .08); border: 1px solid rgba(255, 95, 95, .32); color: var(--text); }
.wl-alert.show { display: flex; }
.wl-alert [data-icon] { color: var(--red); flex-shrink: 0; line-height: 0; margin-top: 3px; font-size: 18px; }

.wl-panel { text-align: center; }
.wl-panel[hidden] { display: none; }
.wl-panel .ico { display: inline-flex; color: var(--accent); margin-bottom: 14px; line-height: 0; font-size: 44px; }
.wl-panel h2 { font-family: 'Bebas Neue', sans-serif; font-size: 34px; letter-spacing: 1.5px; margin-bottom: 10px; }
.wl-panel h2 .accent { color: var(--accent); }
.wl-panel p { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 440px; margin: 0 auto 12px; }
.wl-panel p strong { color: var(--text); word-break: break-word; }
.wl-panel a:not(.wl-btn) { color: var(--accent); text-underline-offset: 2px; font-weight: 600; }

.wl-insta { display: flex; align-items: center; gap: 14px; text-align: left; margin-top: 22px; padding: 16px 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.wl-insta:hover { border-color: rgba(232, 255, 58, .35); }
.wl-insta [data-icon] { color: var(--accent); line-height: 0; flex-shrink: 0; font-size: 28px; }
.wl-insta span { font-size: 14px; line-height: 1.5; }
.wl-insta strong { display: block; color: var(--text); }
.wl-insta small { color: var(--muted); font-size: 13px; }

/* En attendant l'ouverture : liens vers le reste du site, sous le formulaire. */
.wl-more { max-width: 760px; margin: 0 auto; padding: 0 16px 96px; text-align: center; }
.wl-more h2 { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 1.5px; margin-bottom: 6px; }
.wl-more-sub { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.wl-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
@media (max-width: 560px) { .wl-more-grid { grid-template-columns: 1fr; } }
.wl-more-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); text-decoration: none; transition: border-color .15s; }
.wl-more-card:hover, .wl-more-card:focus-visible { border-color: rgba(232, 255, 58, .45); }
.wl-more-card > [data-icon] { color: var(--accent); font-size: 24px; line-height: 0; flex-shrink: 0; }
.wl-more-card strong { display: block; font-size: 15px; }
.wl-more-card small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }