/*
Theme Name: Tinora — Bientôt disponible
Theme URI: https://tinora.ch
Author: Tinora
Description: Page de pré-lancement pour TINORA, marque de boissons (thés glacés, boissons énergisantes, eaux minérales — non fermentées). Thème mono-page, léger, sans dépendance à un page builder.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: tinora
*/

/* ===== TOKENS (identité visuelle conservée du logo) ===== */
:root{
  --color-charcoal:     #11100F;
  --color-warm-black:   #181614;
  --color-copper:       #B86B42;
  --color-copper-light: #D08A60;
  --color-cream:        #F2E9DD;
  --color-sand:         #D8C7B3;
  --color-earth:        #38251C;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100svh; min-height:100vh;
  background:var(--color-charcoal); color:var(--color-cream);
  font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1{ font-family:var(--font-display); font-weight:500; margin:0; line-height:1.08; }
p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:20; background:var(--color-copper); color:#fff;
  padding:0.9em 1.4em; font-weight:600;
}
.skip-link:focus{ left:1rem; top:1rem; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--color-copper-light); outline-offset:3px;
}

/* ===== FOND — lueur cuivrée douce, évoque le feu sans l'illustrer littéralement ===== */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 8%, rgba(184,107,66,0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(56,37,28,0.5), transparent 70%),
    var(--color-charcoal);
}

/* ===== MISE EN PAGE PRINCIPALE ===== */
.launch{
  position:relative; z-index:1; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:3.5rem 1.5rem; min-height:100svh;
}
.launch-logo{ width:min(180px, 34vw); height:auto; margin-bottom:2rem; }

.eyebrow{
  font-size:0.78rem; letter-spacing:0.24em; text-transform:uppercase; font-weight:600;
  color:var(--color-copper-light); margin-bottom:1rem;
}
.launch h1{
  font-size:clamp(2rem, 1.5rem + 3.2vw, 3.6rem);
  max-width:32ch;
}
.launch .lead{
  margin-top:1.1rem; font-size:clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color:rgba(242,233,221,0.72); max-width:46ch;
}

/* ===== FORMULAIRE D'INSCRIPTION ===== */
.signup{
  margin-top:2.5rem; width:100%; max-width:440px;
}
.signup-row{
  display:flex; flex-direction:column; align-items:center; gap:0.85rem;
}
.signup-row input[type="email"]{
  width:100%; min-width:0;
  background:rgba(242,233,221,0.06); border:1px solid rgba(242,233,221,0.22);
  color:var(--color-cream); padding:0.95em 1.1em; border-radius:2px; font-size:0.95rem;
  text-align:center;
  transition:border-color var(--ease) .2s;
}
.signup-row input[type="email"]::placeholder{ color:rgba(242,233,221,0.45); }
.signup-row input[type="email"]:focus{ border-color:var(--color-copper); }
.signup-row button{
  background:var(--color-copper); color:#fff; border:1px solid var(--color-copper);
  padding:0.95em 2.4em; font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:2px; cursor:pointer; transition:background var(--ease) .2s;
  white-space:nowrap;
}
.signup-row button:hover{ background:var(--color-copper-light); border-color:var(--color-copper-light); }
.signup-row button[disabled]{ opacity:0.55; cursor:not-allowed; }
.signup-note{ margin-top:0.7rem; font-size:0.76rem; color:rgba(242,233,221,0.45); }
.signup-message{
  margin-top:0.9rem; font-size:0.88rem; display:none; padding:0.6em 0;
}
.signup-message.is-visible{ display:block; }
.signup-message.is-success{ color:#8fb37d; }
.signup-message.is-error{ color:#e08a78; }
.honeypot-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ===== PIED DE PAGE ===== */
.launch-footer{
  position:relative; z-index:1; text-align:center; padding:1.5rem 1rem 2rem;
  font-size:0.76rem; color:rgba(242,233,221,0.4);
}
.launch-footer a{ color:rgba(242,233,221,0.55); }
.launch-footer a:hover{ color:var(--color-copper-light); }

/* ===== ANIMATION D'ENTRÉE (sobre, unique, non répétitive) ===== */
.fade-in{ opacity:0; transform:translateY(10px); animation:tinoraFadeIn .8s var(--ease) forwards; }
.fade-in.d1{ animation-delay:.08s; }
.fade-in.d2{ animation-delay:.16s; }
.fade-in.d3{ animation-delay:.24s; }
.fade-in.d4{ animation-delay:.32s; }
@keyframes tinoraFadeIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .fade-in{ opacity:1; transform:none; animation:none; } }

@media (max-width:480px){
  .launch{ padding:2.5rem 1.25rem; }
  .signup-row button{ width:100%; }
}