/* ============================================================================
   Bottega — landing de teasing
   Tokens du design system Bottega (couleurs · typographie · espacements · effets)
   intégrés, puis styles de base et styles de page.
   Les polices sont chargées via <link> dans index.html.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */
:root {
  /* Couleur — strictement encre & papier. La couleur ne vit que dans l'image. */
  --ink-0:#0A0A0A;  --ink-1:#141414;  --ink-2:#1E1E1E;  --ink-3:#2C2C2C;
  --paper-0:#F4F2ED; --paper-1:#E8E5DD; --paper-2:#D9D5CA;

  --text-1:var(--paper-0);
  --text-2:rgba(244,242,237,0.72);
  --text-3:rgba(244,242,237,0.45);

  --line-1:rgba(244,242,237,0.16);
  --line-2:rgba(244,242,237,0.08);

  /* Typographie */
  --font-serif:"EB Garamond",Garamond,Georgia,serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --tracking-label:0.14em;

  /* Mouvement */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}

/* --- Base ------------------------------------------------------------------ */
* { box-sizing:border-box; }

html, body { margin:0; height:100%; }

body {
  background:var(--ink-0);
  color:var(--text-1);
  font-family:var(--font-serif);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection { background:var(--paper-0); color:var(--ink-0); }

a { color:var(--paper-0); text-decoration:none; transition:color .2s ease; }
a:hover { color:rgba(244,242,237,0.6); }

img { display:block; max-width:100%; }

/* --- Grille ---------------------------------------------------------------- */
.lp {
  position:relative;
  min-height:100vh;
  min-height:100svh;
  background:var(--ink-0);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,43%);
  overflow:hidden;
}

.lp__left {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:56px 64px;
  min-height:100vh;
  min-height:100svh;
}

/* Texture ASCII — remplie par ascii.js, posée derrière le contenu */
.lp__ascii {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.lp__left > :not(.lp__ascii) { position:relative; z-index:1; }

.lp__brand {
  display:flex;
  animation:fadeIn 1.2s var(--ease-out) both;
}
.lp__logo { width:200px; height:auto; margin-left:-26px; }

.lp__intro {
  display:flex;
  flex-direction:column;
  gap:32px;
  max-width:56ch;
  animation:riseIn 1.6s var(--ease-out) 0.2s both;
}
.lp__title {
  margin:0;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(34px,3.4vw,52px);
  line-height:1.1;
  color:var(--paper-0);
  text-wrap:pretty;
}
.lp__lead {
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(19px,1.6vw,24px);
  line-height:1.45;
  color:var(--text-2);
  max-width:46ch;
  text-wrap:pretty;
}
.lp__mono {
  margin:0;
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--paper-0);
}

.lp__footer {
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
  align-items:baseline;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:var(--tracking-label);
  color:var(--text-3);
  animation:fadeIn 1.6s var(--ease-out) 0.5s both;
}
.lp__footer a { color:var(--text-3); }
.lp__footer a:hover { color:var(--paper-0); }

.lp__photo {
  position:relative;
  border-left:1px solid var(--line-1);
  min-height:100vh;
  min-height:100svh;
}
.lp__photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  animation:fadeIn 1.8s var(--ease-out) both;
}

/* --- Mouvement ------------------------------------------------------------- */
@keyframes asciiPulse { 0%,100%{opacity:0} 50%{opacity:0.55} }
@keyframes riseIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width:860px) {
  .lp { grid-template-columns:1fr; }
  .lp__left {
    padding:40px 24px 48px;
    gap:36px;
    min-height:0;
    justify-content:flex-start;
  }
  .lp__photo {
    min-height:56vh;
    border-left:none;
    border-top:1px solid var(--line-1);
  }
  .lp__logo { width:180px; margin-left:-23px; }
  .lp__title { font-size:42px; line-height:1.12; }
  .lp__lead { font-size:22px; }
  .lp__mono { font-size:15px; }
  .lp__footer { font-size:14px; line-height:1.7; }
}

/* --- Préférence de mouvement réduit ---------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  .lp__brand, .lp__intro, .lp__footer, .lp__photo img { animation:none; }
}