/* ============================================================
   davylheureux.fr — Page Livre (/livre)
   Hérite de site.css (shell : header smart-hide + footer 4 colonnes
   + fond WebGL, injectés par site.js). Hero REPRIS du podcast : photo
   16:9 plein largeur sous le header translucide, titre R.A.F / LE LIVRE
   superposé. Sous le hero : storytelling dans une colonne de lecture sur fond
   sombre + WebGL (.livre-read, voile très léger pour la lisibilité, pas de
   cartouche), intertitres en cyan. La capsule blanche est gardée pour la zone
   d'inscription (.livre-signup), à brancher plus tard. Typo : Inter.
   ============================================================ */

/* ---- Hero (repris du podcast, ajusté taille + position) --------
   La photo n'est PLUS collée tout en haut : main a déjà padding-top:80px
   (header fixe ~62px desktop / ~54px mobile) et on ajoute un margin-top
   pour la décoller franchement du header → elle commence toujours SOUS le
   header (jamais recouverte), y compris en mobile. Largeur réduite (~78 %,
   centrée) au lieu de plein écran ; ratio 16:9 préservé, jamais rognée.
   Le margin-top est hors de la boîte du hero : la hauteur du hero reste
   celle de la photo, donc le titre (bottom:11 %) ne bouge pas par rapport
   à la photo. La photo est déjà un fondu rectangulaire translucide
   (transparence dans le fichier) : posée sur le fond WebGL sans fond opaque,
   le WebGL animé transparaît à travers. Aucune opacité / masque / cadre /
   bordure ajoutés en CSS. */
.livre-hero {
  position: relative;
  width: 100%;
  margin-top: 40px;
  line-height: 0; /* supprime l'espace sous l'img inline */
}
.livre-hero img {
  display: block;
  width: 78%;
  max-width: 78%;
  height: auto;
  margin: 0 auto; /* centrée */
}
/* Bloc titre superposé, centré, dans le tiers bas de la photo (sur le torse) */
.livre-hero-title {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}
/* « R.A.F » : reprend le style du titre hero (Inter 800), agrandi */
.livre-hero-raf {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(72px, 16vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #FAFAFA;
  margin: 0;
}
/* « LE LIVRE » : label cyan sous le titre */
.livre-hero-label {
  margin-top: clamp(6px, 1vw, 14px);
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #00E5FF;
}

/* ---- Mobile : marge haute généreuse pour que le header fixe (~54px) ne
   recouvre jamais la photo ni le titre — la photo commence bien sous le menu. */
@media (max-width: 980px) {
  .livre-hero { margin-top: 48px; }
}

/* ---- Storytelling : colonne de lecture sur fond sombre + WebGL ----------
   Pas de cartouche : le récit s'écrit directement sur le fond du site, avec
   un voile sombre TRÈS léger en ::before (fade haut/bas, pas de bord visible)
   pour calmer les pulsations du WebGL sous une longue lecture et garantir une
   lisibilité stable. Texte en blanc cassé, intertitres en cyan #00E5FF.
   La capsule blanche est gardée plus tard pour la zone d'inscription
   (.livre-signup), pas pour le récit. */
.livre-read {
  position: relative;
  isolation: isolate;
  max-width: 760px;
  width: 90%;
  margin: clamp(56px, 8vw, 96px) auto clamp(72px, 10vw, 120px);
  padding: clamp(36px, 4.5vw, 64px) clamp(8px, 2vw, 32px);
  color: var(--ink);
}
.livre-read::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(5,5,5,0)    0%,
    rgba(5,5,5,0.30) 6%,
    rgba(5,5,5,0.30) 94%,
    rgba(5,5,5,0)    100%);
  pointer-events: none;
}
/* Chaque segment séparé par une ligne vide dans le manuscrit = un <p>.
   Espacement vertical généreux entre segments pour préserver le rythme. */
.livre-read p {
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 1.5em;
}
.livre-read p:last-child { margin-bottom: 0; }
/* Accroche en exergue : un peu plus grande que le corps, plus claire. */
.livre-lead {
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 clamp(48px, 6vw, 64px);
}
/* Espacement vertical généreux entre blocs (avant chaque intertitre). */
.livre-block { margin-top: clamp(56px, 7vw, 80px); }
/* Intertitres : label cyan (accent #00E5FF) sur fond sombre, cohérent
   avec le surtitre cyan du blog (.tertiary en context dark). */
.livre-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
/* Spécificité bumpée pour battre .livre-read p (0,1,1) qui écrasait la couleur
   de l'eyebrow (single class, 0,1,0). Ne touche QUE la couleur — taille/graisse
   gardées à leur rendu actuel. */
.livre-read .livre-eyebrow { color: var(--accent); }

/* Mockup du livre : objet détouré (bords fondus dans le fichier), posé sobre
   sur le fond WebGL ; aucun cadre/bordure/ombre CSS. Espace vertical généreux
   pour la séparation avec le récit (au-dessus) et la future zone d'inscription
   (en-dessous). Largeur ~340-420px desktop, réduction propre en mobile. */
.livre-mockup {
  margin: clamp(72px, 10vw, 120px) auto;
  padding: 0;
  text-align: center;
}
.livre-mockup img {
  display: inline-block;
  width: clamp(300px, 32vw, 420px);
  height: auto;
}

/* ---- Inscription au cercle : SEULE capsule blanche de la page ----------
   Bloc d'action isolé, posé sur le fond WebGL. Texte sombre, surtitre cyan
   foncé (#00788A) cohérent avec la version fond clair des labels du site.
   Form simple (email obligatoire, prénom et thème optionnels), bouton dark
   pill, mention discrète, message d'erreur et message de confirmation. */
.livre-signup {
  display: flex;
  justify-content: center;
  padding: 0 24px;
  margin: clamp(80px, 12vw, 140px) auto clamp(96px, 14vw, 160px);
}
.livre-signup-card {
  background: var(--card);
  color: var(--ink-dark);
  width: 100%;
  max-width: 760px;
  padding: clamp(40px, 5vw, 76px) clamp(28px, 6vw, 80px);
  border-radius: 14px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.livre-signup-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 18px;
}
.livre-signup-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-dark);
  margin: 0 0 28px;
  max-width: none;
}
.livre-signup-card > p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ink-dark-soft);
  margin: 0 0 1.2em;
}

/* Formulaire */
.livre-signup-form {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.livre-field { display: flex; flex-direction: column; gap: 8px; }
.livre-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dark);
  line-height: 1.4;
}
.livre-field input {
  font: inherit;
  font-size: 16px;
  color: var(--ink-dark);
  background: #FFFFFF;
  border: 1px solid rgba(10,10,10,0.18);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.livre-field input::placeholder { color: var(--ink-dark-mut); }
.livre-field input:focus {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(0,120,138,0.18);
}

/* Bouton primaire (pill cyan-foncé, cohérent avec l'accent fond clair) */
.livre-signup-submit {
  align-self: flex-start;
  margin-top: 10px;
  padding: 14px 32px;
  border: none;
  border-radius: 100px;
  background: var(--accent-dark);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.livre-signup-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px -10px rgba(0,120,138,0.45);
}
.livre-signup-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.livre-signup-mention {
  font-size: 13px;
  color: var(--ink-dark-mut);
  margin: 6px 0 0;
  line-height: 1.5;
}
.form-error {
  font-size: 14px;
  color: #B22B30;
  margin: 4px 0 0;
  line-height: 1.4;
  min-height: 1em;
}
.form-error:empty { display: none; }

/* Message de confirmation qui remplace le formulaire */
.livre-signup-ok {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-dark);
  margin: 32px 0 0;
  padding: 20px 24px;
  background: rgba(0,120,138,0.08);
  border: 1px solid rgba(0,120,138,0.28);
  border-radius: 10px;
}

@media (max-width: 760px) {
  .livre-read {
    padding: 28px 0;
    margin: clamp(40px, 8vw, 64px) auto clamp(56px, 10vw, 80px);
  }
  .livre-read p { font-size: 17px; }
  .livre-lead { font-size: 21px; }
  .livre-mockup { margin: clamp(48px, 10vw, 72px) auto; }
  .livre-mockup img { width: min(78%, 320px); }
  .livre-signup { padding: 0 16px; margin: clamp(56px, 12vw, 96px) auto clamp(64px, 12vw, 96px); }
  .livre-signup-card { padding: 32px 22px; border-radius: 12px; }
  .livre-signup-submit { align-self: stretch; }
}