/* ==========================================================================
   Tatiana Kačan — site auteur
   Palette et ambiance dérivées de la vidéo de fond (sous-bois, ciel, lumière).
   Police Atkinson Hyperlegible : conçue pour une lisibilité maximale,
   y compris pour les lecteurs et lectrices dyslexiques ou malvoyants.
   ========================================================================== */

:root{
  --bg:            #071309;
  --bg-soft:       #0c1e10;
  --bg-card:       #112719;
  --bg-card-rgb:   17, 39, 25;
  --line:          rgba(232, 240, 228, 0.14);
  --cream:         #f0f4ee;
  --sage:          #b7cab8;
  --sage-dim:      #839886;
  --sky:           #6fb3c9;
  --sky-soft:      #b7dde6;
  --sun:           #f4f1e4;

  --font-scale: 1;
  --ls-extra: 0em;
  --ws-extra: 0em;
  --lh-extra: 0;

  --serif: 'Atkinson Hyperlegible', sans-serif;
  --sans:  'Atkinson Hyperlegible', sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; font-size:calc(100% * var(--font-scale)); }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  line-height:calc(1.6 + var(--lh-extra));
  letter-spacing:var(--ls-extra);
  word-spacing:var(--ws-extra);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.15;
  letter-spacing:var(--ls-extra);
}

.accent{ color:var(--sky-soft); font-style:normal; }

section{ position:relative; padding:min(14vw,140px) 6vw; }

/* ==========================================================================
   BACKGROUND VIDEO — scrubbed by scroll position across the whole page
   ========================================================================== */
.bg-video-wrap{
  position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--bg);
}
.bg-video{
  position:absolute; top:50%; left:50%; min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%,-50%);
  object-fit:cover;
}
.bg-video-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,19,9,.22) 0%, rgba(7,19,9,.32) 45%, rgba(7,19,9,.42) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(7,19,9,.02), rgba(7,19,9,.4) 85%);
}

/* ---------- texture / grain ---------- */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--sky),var(--sun));
  z-index:1001; transition:width .1s linear;
}

/* ==========================================================================
   ACCESSIBILITY CONTROLS
   ========================================================================== */
.a11y-panel{
  position:fixed; right:18px; bottom:18px; z-index:1000;
  display:flex; flex-direction:column; gap:8px;
}
.a11y-btn{
  width:46px; height:46px; border-radius:50%;
  background:rgba(7,19,9,.72); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--cream); font-family:var(--sans); font-weight:700; font-size:.9rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.a11y-btn:hover{ transform:scale(1.08); border-color:var(--sky); }
.a11y-btn[aria-pressed="true"]{ background:var(--sky); color:#04120a; border-color:var(--sky); }

/* reading-comfort mode: extra breathing room for dyslexic-friendly reading */
html.reading-comfort{ --ls-extra:.02em; --ws-extra:.08em; --lh-extra:.25; }
html.reading-comfort .about-text p,
html.reading-comfort .hero-sub,
html.reading-comfort .section-sub,
html.reading-comfort .book-info p,
html.reading-comfort .press-desc,
html.reading-comfort .agenda-info p{
  max-width:62ch;
}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:opacity .4s linear; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:center;
  padding:18px 6vw;
}

.nav{
  width:100%; max-width:1200px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 10px 22px;
  border-radius:999px;
  background:rgba(7,19,9,.6);
  border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

.nav-logo{
  font-family:var(--serif); font-weight:700; font-size:1.05rem; letter-spacing:.01em;
  color:var(--cream);
}

.nav-right{ display:flex; align-items:center; gap:10px; position:relative; }

.lang-toggle{
  width:42px; height:36px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--sky-soft);
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.03em;
  cursor:pointer; transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.lang-toggle:hover{ border-color:var(--sky); background:rgba(111,179,201,.1); transform:translateY(-2px); }

.nav-links{ display:flex; align-items:center; gap:6px; }

.nav-link{
  font-size:.9rem; font-weight:600; padding:9px 16px; border-radius:999px;
  color:var(--sage); transition:color .3s var(--ease), background .3s var(--ease);
  white-space:nowrap;
}
.nav-link:hover{ color:var(--cream); background:rgba(255,255,255,.06); }
.nav-link.is-active{ color:var(--bg); background:var(--sky); }

.nav-cta{ border:1px solid var(--sky); color:var(--sky-soft); }
.nav-cta:hover{ background:var(--sky); color:var(--bg); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
  padding:8px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--cream); border-radius:2px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  padding:15px 30px; border-radius:999px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  cursor:pointer; border:1px solid transparent;
}
.btn-solid{
  background:var(--sky); color:#04120a;
  box-shadow:0 0 0 0 rgba(111,179,201,.5);
}
.btn-solid:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 34px -6px rgba(111,179,201,.55);
}
.btn-outline{
  background:rgba(7,19,9,.35); color:var(--cream); border-color:var(--line);
}
.btn-outline:hover{
  border-color:var(--sky-soft); color:var(--sky-soft);
  transform:translateY(-3px);
  background:rgba(111,179,201,.1);
}
.btn-sm{ padding:11px 22px; font-size:.85rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px;
}

.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(62% 65% at 22% 48%, rgba(7,19,9,.72) 0%, rgba(7,19,9,.4) 55%, rgba(7,19,9,0) 80%);
}

.hero-content{ position:relative; z-index:1; max-width:900px; }

.eyebrow{
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky-soft); margin-bottom:18px; font-weight:700;
}

.hero-title{
  font-size:calc(clamp(2.6rem, 6vw, 5rem) * 1);
  margin-bottom:28px;
  max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}

.hero-sub{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:var(--sage);
  max-width:48ch;
  margin-bottom:44px;
}

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.scroll-hint{
  position:absolute; bottom:40px; left:6vw; z-index:1;
  width:30px; height:48px; border:1.5px solid var(--line); border-radius:20px;
}
.scroll-hint span{
  position:absolute; top:8px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--sky-soft); border-radius:3px;
  animation:hint 1.8s ease-in-out infinite;
}
@keyframes hint{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(14px); opacity:0; }
  100%{ opacity:0; }
}

/* ==========================================================================
   SECTION HEAD (shared)
   ========================================================================== */
.section-head{ max-width:620px; margin-bottom:60px; }
.section-head h2{ font-size:clamp(2rem,4vw,3rem); margin-bottom:14px; }
.section-sub{ color:var(--sage); font-size:1.05rem; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:min(8vw,100px);
  align-items:center;
  background:rgba(12,30,16,.55);
  backdrop-filter:blur(6px);
}

.about-portrait{ position:relative; justify-self:center; }
.portrait-frame{
  width:min(360px,80vw); aspect-ratio:4/5; border-radius:32px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
}
.portrait-frame img{ width:100%; height:112%; object-fit:cover; will-change:transform; }

.portrait-orbit{
  position:absolute; top:50%; left:50%; width:120%; height:120%;
  transform:translate(-50%,-50%);
  animation:spin 40s linear infinite; z-index:-1;
}
.portrait-orbit circle{
  fill:none; stroke:var(--sky); stroke-opacity:.3; stroke-width:1;
  stroke-dasharray:2 14;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.about-text h2{ font-size:clamp(2.2rem,4.5vw,3.2rem); margin-bottom:20px; }
.about-lead{ font-size:1.2rem; color:var(--sky-soft); margin-bottom:18px; font-weight:700; }
.about-text p{ color:var(--sage); max-width:56ch; }
.about-text p strong{ color:var(--cream); font-weight:700; }
.about-text p a{
  color:var(--sky-soft); text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:4px; text-decoration-color:rgba(111,179,201,.55);
  transition:color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.about-text p a strong{ color:inherit; }
.about-text p a:hover{ color:var(--sky); text-decoration-color:var(--sky); }

.about-stats{ display:flex; gap:min(6vw,56px); margin-top:40px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--serif); font-weight:700; font-size:2.4rem; color:var(--sky); }
.stat-label{ font-size:.85rem; color:var(--sage-dim); text-transform:uppercase; letter-spacing:.06em; }

/* ==========================================================================
   BOOKS
   ========================================================================== */
.book-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}

.book-card{
  background:rgba(var(--bg-card-rgb),.72); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:26px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.book-card:hover{ transform:translateY(-8px); border-color:rgba(111,179,201,.4); }

.book-cover{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; }
.book-cover img{ width:100%; height:112%; object-fit:cover; will-change:transform; transition:transform .7s var(--ease); }
.book-card:hover .book-cover img{ transform:scale(1.06); }

.book-cover-cta{
  position:absolute; inset:auto 16px 16px 16px;
  background:rgba(7,19,9,.78); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:999px;
  text-align:center; padding:12px 16px; font-size:.85rem; font-weight:700;
  color:var(--sky-soft);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.book-card:hover .book-cover-cta{ opacity:1; transform:translateY(0); }

.book-info{ padding:28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.book-info h3{ font-size:1.3rem; }
.book-meta{ color:var(--sky-soft); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.book-info p{ color:var(--sage); font-size:.96rem; flex:1; }
.book-info .btn{ align-self:flex-start; margin-top:6px; }

/* ==========================================================================
   PRESS
   ========================================================================== */
.press{ background:rgba(10,25,14,.55); backdrop-filter:blur(6px); }

.press-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.press-card{
  background:rgba(var(--bg-card-rgb),.72); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:22px;
  padding:34px 26px; display:flex; flex-direction:column; gap:14px; min-height:190px;
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.press-card:hover{
  transform:translateY(-6px); border-color:rgba(111,179,201,.4);
  background:linear-gradient(160deg, rgba(var(--bg-card-rgb),.85), rgba(111,179,201,.1));
}
.press-name{ font-family:var(--serif); font-weight:700; font-size:1.35rem; }
.press-desc{ color:var(--sage); font-size:.9rem; flex:1; }
.press-link{ color:var(--sky-soft); font-size:.87rem; font-weight:700; }

/* ==========================================================================
   AGENDA
   ========================================================================== */
.agenda-list{ display:flex; flex-direction:column; gap:16px; max-width:900px; }

.agenda-item{
  display:flex; align-items:center; gap:28px;
  padding:26px 30px; border-radius:20px;
  border:1px solid var(--line);
  background:rgba(var(--bg-card-rgb),.72); backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.agenda-item:hover{
  transform:translateX(8px); border-color:rgba(111,179,201,.4);
  background:linear-gradient(160deg, rgba(var(--bg-card-rgb),.85), rgba(111,179,201,.1));
}

.agenda-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:16px; flex-shrink:0;
  background:rgba(111,179,201,.14); border:1px solid rgba(111,179,201,.3);
}
.agenda-day{ font-family:var(--serif); font-weight:700; font-size:1.4rem; color:var(--sky); line-height:1; }
.agenda-month{ font-size:.74rem; text-transform:uppercase; color:var(--sky-soft); letter-spacing:.06em; font-weight:700; }

.agenda-info{ flex:1; }
.agenda-info h3{ font-size:1.2rem; margin-bottom:4px; }
.agenda-info p{ color:var(--sage); font-size:.92rem; }

.agenda-cta{
  flex-shrink:0; white-space:nowrap;
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line); color:var(--sky-soft);
  font-size:.85rem; font-weight:700;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.agenda-item:hover .agenda-cta{ background:var(--sky); color:#04120a; border-color:var(--sky); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  background:rgba(7,19,9,.55); backdrop-filter:blur(6px);
  text-align:center;
}
.contact-inner{ max-width:700px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.contact h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:34px; }
.contact-email{
  font-family:var(--serif); font-weight:700; font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--sky); border-bottom:1px solid rgba(111,179,201,.45);
  padding-bottom:6px; margin-bottom:32px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.contact-email:hover{ color:var(--sky-soft); border-color:var(--sky-soft); }
.contact-socials{ display:flex; gap:14px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  padding:30px 6vw 40px; color:var(--sage-dim); font-size:.85rem;
  border-top:1px solid var(--line);
  background:rgba(7,19,9,.7);
}
.back-to-top{ color:var(--sage); font-weight:600; transition:color .3s var(--ease); }
.back-to-top:hover{ color:var(--sky-soft); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .about{ grid-template-columns:1fr; text-align:center; }
  .about-text p{ margin-inline:auto; }
  .about-stats{ justify-content:center; }
  .book-grid{ grid-template-columns:repeat(2,1fr); }
  .press-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:calc(100% + 12px); right:0; left:auto; min-width:220px;
    flex-direction:column; align-items:stretch; gap:4px;
    background:rgba(7,19,9,.94); backdrop-filter:blur(16px);
    border:1px solid var(--line); border-radius:20px; padding:10px;
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s var(--ease);
  }
  .nav-links.is-open{ transform:scaleY(1); opacity:1; pointer-events:auto; }
  .nav-link{ text-align:center; }

  .book-grid{ grid-template-columns:1fr; }
  .press-grid{ grid-template-columns:1fr; }
  .agenda-item{ padding:20px; gap:18px; }
  .agenda-cta{ padding:10px 14px; }
  .agenda-cta span{ display:none; }
  .site-footer{ flex-direction:column; gap:14px; text-align:center; }
  .a11y-panel{ right:12px; bottom:12px; }
}