/*
Theme Name:   L'Éveil — Divi Child
Theme URI:    https://leveil.app
Description:  Thème enfant Divi pour L'Éveil. Design system Édition 2.0.
Author:       Louarn
Template:     Divi
Version:      1.0.0
Text Domain:  leveil-child
*/

/* ==========================================================================
   TOKENS — Charte graphique L'Éveil v2.0
   ========================================================================== */
:root {
  /* Fonds */
  --lv-bg-base:        #1A0904;
  --lv-bg-raised:      #241610;
  --lv-bg-raised-2:    #2E1D15;
  --lv-bg-inverse:     #FFF0E4;
  --lv-bg-inverse-2:   #FCEADB;

  /* Accents */
  --lv-primary:        #B95225;
  --lv-primary-press:  #93401C;
  --lv-warm:           #DF935B;
  --lv-gold:           #D4A853;
  --lv-gold-soft:      #F5C9A0;

  /* Textes — seuil */
  --lv-text:           #F5E6D8;
  --lv-text-strong:    #FFFDF8;
  --lv-text-muted:     #9D8374;

  /* Textes — lumière */
  --lv-text-inv:       #2F0C08;
  --lv-text-inv-body:  #4A1A08;
  --lv-text-inv-muted: #6B4A3A;

  /* Feedback */
  --lv-alert:          #E07856;
  --lv-alert-inv:      #A83A1F;

  /* Bordures */
  --lv-border:         #3A241A;
  --lv-border-inv:     rgba(47,12,8,0.10);

  /* Espace — base 8 */
  --lv-s1: 4px;  --lv-s2: 8px;  --lv-s3: 16px; --lv-s4: 24px;
  --lv-s5: 32px; --lv-s6: 48px; --lv-s7: 64px; --lv-s8: 96px;

  /* Rayons */
  --lv-r-s: 8px; --lv-r-m: 12px; --lv-r-l: 20px; --lv-r-full: 999px;

  /* Motion */
  --lv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lv-t-breve: 300ms;
  --lv-t-douce: 600ms;
  --lv-t-aube:  1200ms;

  /* Type — ratio 1.25, base 16 */
  --lv-display: 50px;
  --lv-h1: 40px;
  --lv-h2: 32px;
  --lv-h3: 25px;
  --lv-lead: 20px;
  --lv-body: 16px;
  --lv-caption: 13px;
  --lv-overline: 12px;

  --lv-serif: 'Lora', Georgia, serif;
  --lv-sans:  'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --lv-max: 1200px;
}

/* ==========================================================================
   RESET DIVI — on neutralise ce qui gêne
   ========================================================================== */
#page-container { background: var(--lv-bg-base); }
body { background: var(--lv-bg-base); }

.lv * { box-sizing: border-box; }

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */
.lv {
  font-family: var(--lv-sans);
  font-size: var(--lv-body);
  line-height: 1.65;
  color: var(--lv-text);
  -webkit-font-smoothing: antialiased;
}

.lv h1, .lv h2, .lv h3, .lv .lv-display {
  font-family: var(--lv-serif);
  color: var(--lv-text-strong);
  margin: 0;
  padding: 0;
}

.lv .lv-display {
  font-size: var(--lv-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.lv h1 { font-size: var(--lv-h1); font-weight: 500; line-height: 1.2; }
.lv h2 { font-size: var(--lv-h2); font-weight: 500; line-height: 1.25; }
.lv h3 { font-size: var(--lv-h3); font-weight: 400; line-height: 1.4; }

.lv .lv-lead {
  font-size: var(--lv-lead);
  line-height: 1.5;
  color: var(--lv-text);
}
.lv .lv-caption {
  font-size: var(--lv-caption);
  color: var(--lv-text-muted);
  line-height: 1.5;
}
.lv .lv-overline {
  font-family: var(--lv-sans);
  font-size: var(--lv-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--lv-gold);
}
.lv .lv-quote {
  font-family: var(--lv-serif);
  font-style: italic;
  font-size: var(--lv-h3);
  line-height: 1.4;
  color: var(--lv-text-strong);
}
.lv .lv-wordmark {
  font-family: var(--lv-sans);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 7px;
  color: var(--lv-text);
}

.lv p { max-width: 70ch; margin: 0; }

/* ==========================================================================
   L'HORIZON — le motif récurrent
   ========================================================================== */
.lv-horizon {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--lv-gold-soft) 25%,
    var(--lv-gold-soft) 75%,
    transparent 100%
  );
  opacity: 0.7;
}
.lv-horizon--short { max-width: 120px; }
.lv-horizon--inv {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--lv-primary) 25%,
    var(--lv-primary) 75%,
    transparent 100%
  );
  opacity: 0.4;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--lv-s5);
  font-family: var(--lv-sans);
  font-size: var(--lv-body);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--lv-r-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--lv-t-breve) var(--lv-ease),
              background-color var(--lv-t-breve) var(--lv-ease);
}

/* Primaire — le survol allume une lueur, n'éclaircit pas le fond */
.lv-btn--primary {
  background: var(--lv-primary);
  color: #FFFDF8;
}
.lv-btn--primary:hover {
  background: var(--lv-primary);
  color: #FFFDF8;
  box-shadow: 0 0 0 1px rgba(245,201,160,0.35),
              0 0 24px rgba(185,82,37,0.55),
              0 0 48px rgba(223,147,91,0.25);
}
.lv-btn--primary:active { background: var(--lv-primary-press); }

/* Secondaire — outline crème */
.lv-btn--secondary {
  background: transparent;
  color: var(--lv-text);
  border-color: rgba(245,230,216,0.35);
}
.lv-btn--secondary:hover {
  color: var(--lv-text-strong);
  border-color: var(--lv-gold-soft);
  box-shadow: 0 0 20px rgba(212,168,83,0.18);
}

/* Tertiaire — texte doré */
.lv-btn--tertiary {
  background: transparent;
  color: var(--lv-gold);
  min-height: 44px;
  padding: 0 var(--lv-s2);
}
.lv-btn--tertiary:hover { color: var(--lv-gold-soft); }

.lv-btn:disabled, .lv-btn--disabled { opacity: 0.35; pointer-events: none; }

/* Focus — anneau doré 2px, décalé 3px. Jamais supprimé. */
.lv a:focus-visible,
.lv button:focus-visible,
.lv input:focus-visible,
.lv textarea:focus-visible {
  outline: 2px solid var(--lv-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   CHAMPS
   ========================================================================== */
.lv-field {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--lv-s4);
  background: var(--lv-bg-raised);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-r-s);
  color: var(--lv-text);
  font-family: var(--lv-sans);
  font-size: var(--lv-body);
  transition: border-color var(--lv-t-breve) var(--lv-ease),
              box-shadow var(--lv-t-breve) var(--lv-ease);
}
.lv-field::placeholder { color: var(--lv-text-muted); }
.lv-field:focus {
  border-color: var(--lv-gold);
  box-shadow: 0 0 16px rgba(212,168,83,0.20);
  outline: none;
}
.lv-help {
  font-size: var(--lv-caption);
  color: var(--lv-text-muted);
  margin-top: var(--lv-s2);
}

/* ==========================================================================
   CARTES
   ========================================================================== */
.lv-card {
  background: var(--lv-bg-raised);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-r-l);
  padding: var(--lv-s5);
}
.lv-card--inv {
  background: var(--lv-bg-inverse-2);
  border-color: var(--lv-border-inv);
  box-shadow: 0 12px 32px rgba(47,12,8,0.12);
}

/* ==========================================================================
   SECTIONS — seuil / clairière
   ========================================================================== */
.lv-section { padding: var(--lv-s8) var(--lv-s4); }
.lv-section--seuil    { background: var(--lv-bg-base); }
.lv-section--clairiere{ background: var(--lv-bg-inverse); }

.lv-section--clairiere,
.lv-section--clairiere p { color: var(--lv-text-inv-body); }
.lv-section--clairiere h1,
.lv-section--clairiere h2,
.lv-section--clairiere h3 { color: var(--lv-text-inv); }
.lv-section--clairiere .lv-overline { color: var(--lv-primary); }
.lv-section--clairiere .lv-caption  { color: var(--lv-text-inv-muted); }

.lv-wrap {
  max-width: var(--lv-max);
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   LE HALO — un seul point focal lumineux, tiers supérieur
   ========================================================================== */
.lv-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 50% 100%,
      rgba(255,253,248,0.85) 0%,
      rgba(245,201,160,0.45) 12%,
      rgba(223,147,91,0.22) 30%,
      rgba(185,82,37,0.10) 52%,
      transparent 72%);
  animation: lv-breathe 4s ease-in-out infinite alternate;
}
@keyframes lv-breathe {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}

/* ==========================================================================
   MOTION — rien ne bouge, tout apparaît
   ========================================================================== */
.lv-rise {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--lv-t-douce) var(--lv-ease),
              transform var(--lv-t-douce) var(--lv-ease);
}
.lv-rise.is-in { opacity: 1; transform: none; }

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

/* ==========================================================================
   GRILLE
   ========================================================================== */
.lv-grid { display: grid; gap: var(--lv-s4); }
.lv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lv-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px) {
  .lv-grid--3, .lv-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root {
    --lv-display: 36px;
    --lv-h1: 30px;
    --lv-h2: 26px;
    --lv-h3: 21px;
    --lv-lead: 18px;
  }
  .lv-section { padding: var(--lv-s7) var(--lv-s4); }
  .lv-glow { width: 560px; height: 300px; }
}