:root{
  --ink:#15130f;
  --ink-2:#1c1a15;
  --bone:#ece4d3;
  --bone-dim:#a8a091;
  --olive:#7c8c56;
  --olive-dim:#4a5636;
  --clay:#b9825a;
  --gold-dark:#8a6a3f;
  --gold-light:#d9b98a;
  --rule: rgba(236,228,211,0.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}

/* Accessibilité — focus clavier visible (manquait, signalé par l'audit) */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:3px;
}

/* Lien d'évitement clavier — invisible sauf au focus */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--olive); color:var(--ink);
  padding:10px 18px; font-family:'IBM Plex Mono', monospace;
  font-size:12px; text-decoration:none;
}
.skip-link:focus{ left:16px; top:16px; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:0.05; mix-blend-mode:overlay;
}

.wrap{max-width:1040px; margin:0 auto; padding:0 32px;}

header.nav{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(var(--ink) 70%, transparent);
  padding:28px 0 20px;
}
.nav-inner{
  max-width:1040px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.mark{display:flex; align-items:center; gap:12px; text-decoration:none;}
.mark img{height:46px; width:auto; flex-shrink:0; display:block;}
.mark-text{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bone);
}
nav.links{display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end;}
nav.links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bone-dim); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
nav.links a:hover, nav.links a.active{color:var(--olive); border-color:var(--olive);}

/* ---- HERO (accueil uniquement) ---- */
.hero{
  min-height:auto;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding-top:8vh; padding-bottom:5vh;
}
.hero-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--olive); margin-bottom:26px;
  display:flex; align-items:center; gap:12px;
}
.hero-eyebrow::before{ content:''; width:26px; height:1px; background:var(--olive); }
h1.hero-title{
  font-family:'Newsreader', serif;
  font-weight:400; font-style:italic;
  font-size:clamp(30px, 4.6vw, 54px);
  line-height:1.2; color:var(--bone); max-width:20ch; letter-spacing:-0.01em;
}
.hero-sub{ margin-top:28px; max-width:48ch; font-size:16.5px; color:var(--bone-dim); font-weight:300; }
.hero-tagline{
  margin-top:18px; font-family:'Newsreader', serif; font-style:italic;
  font-size:15px; color:var(--olive); opacity:0.85;
}
.hero-meta{
  margin-top:52px; font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; color:var(--bone-dim);
  display:flex; gap:10px; align-items:center;
}
.hero-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--olive);}
.hero-actions{ margin-top:40px; display:flex; gap:18px; flex-wrap:wrap; }
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; padding:14px 24px; border-radius:2px;
  transition:all .25s ease; display:inline-block;
}
.btn-solid{ background:var(--olive); color:var(--ink); }
.btn-solid:hover{ background:var(--bone); }
.btn-outline{ border:1px solid var(--olive-dim); color:var(--olive); }
.btn-outline:hover{ color:var(--bone); border-color:var(--bone-dim); }

.hero-eyebrow, h1.hero-title, .hero-sub, .hero-tagline, .hero-meta, .hero-actions{
  opacity:0; transform:translateY(14px);
  animation:hero-in .9s ease forwards;
}
.hero-eyebrow{animation-delay:.05s;}
h1.hero-title{animation-delay:.18s;}
.hero-sub{animation-delay:.32s;}
.hero-tagline{animation-delay:.42s;}
.hero-meta{animation-delay:.5s;}
.hero-actions{animation-delay:.6s;}
@keyframes hero-in{ to{opacity:1; transform:translateY(0);} }

.branch{
  position:absolute; right:0; top:6%;
  width:min(34vw, 340px); opacity:0.95; pointer-events:none;
  transform-origin:55% 50%;
  animation:sway 11s ease-in-out infinite alternate;
}
@keyframes sway{
  0%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(-6px) rotate(1deg); }
}
@media (max-width: 780px){ .branch{display:none;} }

/* tracé progressif de la tige, façon dessin à la main */
.branch .vine{
  stroke-dasharray:700;
  stroke-dashoffset:700;
  animation:vine-draw 1.5s ease forwards .1s;
}
@keyframes vine-draw{ to{ stroke-dashoffset:0; } }

/* apparition des feuilles et olives une à une, en fondu */
.branch .leaf-anim, .branch .fruit-anim{
  opacity:0;
  animation:leaf-in .5s ease forwards;
}
@keyframes leaf-in{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .branch .vine{ animation:none; stroke-dashoffset:0; }
  .branch .leaf-anim, .branch .fruit-anim{ animation:none; opacity:1; }
}

/* ---- PAGE HEADER (pages intérieures) ---- */
.page-header{ padding-top:14vh; padding-bottom:2vh; }
.page-title{
  font-family:'Newsreader', serif; font-weight:400; font-style:italic;
  font-size:clamp(30px, 4.6vw, 48px); color:var(--bone); max-width:18ch;
}
.page-sub{ margin-top:18px; max-width:56ch; font-size:16px; color:var(--bone-dim); }

hr.rule{border:none; border-top:1px solid var(--rule); margin:0;}

section{padding:96px 0;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--olive); margin-bottom:22px;
}

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .hero-eyebrow, h1.hero-title, .hero-sub, .hero-tagline, .hero-meta, .hero-actions{
    opacity:1; transform:none; animation:none;
  }
  .branch{animation:none;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---- FILMS ---- */
.film-card{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  align-items:start; padding:30px 0; border-top:1px solid var(--rule);
}
.film-card:last-child{border-bottom:1px solid var(--rule);}
.film-title{
  font-family:'Newsreader', serif; font-style:italic; font-weight:400;
  font-size:clamp(24px, 3vw, 32px); color:var(--bone);
}
.film-desc{ margin-top:10px; font-size:14.5px; color:var(--bone-dim); max-width:52ch; }
.film-meta{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  letter-spacing:0.06em; color:var(--clay); white-space:nowrap; text-align:right;
}
.film-meta span{display:block; margin-bottom:6px;}
.film-meta span:last-child{margin-bottom:0; color:var(--bone-dim);}

.premiere-cta{
  margin-top:20px; display:inline-flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  background:var(--olive); padding:14px 22px; border-radius:2px;
  transition:background .25s ease;
}
.premiere-cta:hover{background:var(--bone);}
.premiere-cta svg{width:14px; height:14px; flex-shrink:0;}
.premiere-note{
  margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  color:var(--bone-dim); letter-spacing:0.04em;
}

.film-embed{
  margin-top:20px; position:relative; width:100%; max-width:560px;
  aspect-ratio:16/9; background:#000; overflow:hidden; border:1px solid var(--rule);
}
.film-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---- MUSIQUE ---- */
.track-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 0; border-top:1px solid var(--rule);
}
.track-row:last-child{border-bottom:1px solid var(--rule);}
.track-title{ font-family:'Newsreader', serif; font-style:italic; font-weight:400; font-size:19px; color:var(--bone); }
.track-sub{ margin-top:4px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; color:var(--bone-dim); }
.track-links{display:flex; gap:16px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; max-width:60%;}
.track-links a{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--clay); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease;
}
.track-links a:hover{color:var(--bone); border-color:var(--bone-dim);}
@media (max-width:560px){ .track-row{flex-direction:column; align-items:flex-start; gap:10px;} }

/* ---- DIGITAL ---- */
.discipline-row{
  display:flex; flex-wrap:wrap; gap:24px; padding:20px 0;
  border-top:1px solid var(--rule); align-items:baseline;
}
.discipline-row:last-child{border-bottom:1px solid var(--rule);}
.discipline-name{
  font-family:'Newsreader', serif; font-style:italic; font-weight:400;
  font-size:19px; color:var(--bone); min-width:240px; flex-shrink:0;
}
.discipline-desc{ font-size:14.5px; color:var(--bone-dim); max-width:48ch; }
@media (max-width:640px){ .discipline-row{flex-direction:column; gap:6px;} }

/* ---- ABOUT / MÉTHODE ---- */
.about-text{ font-size:17px; color:var(--bone); max-width:58ch; font-weight:300; }
.about-text + .about-text{margin-top:18px; color:var(--bone-dim); font-size:15px;}
.method-eyebrow{
  margin-top:48px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--olive); margin-bottom:8px;
}
.method-item{ font-size:14.5px; color:var(--bone-dim); max-width:56ch; padding:16px 0; border-top:1px solid var(--rule); }
.method-item:last-child{border-bottom:1px solid var(--rule);}
.founder{ margin-top:34px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.06em; color:var(--bone-dim); }
.founder strong{color:var(--olive); font-weight:500;}

/* ---- CONTACT ---- */
.contact-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:24px; }
.contact-link{
  font-family:'Newsreader', serif; font-style:italic; font-size:clamp(22px,3vw,30px);
  color:var(--bone); text-decoration:none; border-bottom:1px solid var(--olive-dim);
  transition:color .25s ease, border-color .25s ease;
}
.contact-link:hover{color:var(--olive); border-color:var(--olive);}
.contact-loc{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--bone-dim);
  letter-spacing:0.06em; max-width:38ch; text-align:right;
}
@media (max-width:640px){ .contact-loc{text-align:left;} }

/* ---- LEGAL ---- */
.legal-block{ max-width:60ch; }
.legal-block h2{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--olive); margin:36px 0 12px;
}
.legal-block p, .legal-block li{ font-size:14.5px; color:var(--bone-dim); margin-bottom:8px; }
.legal-block ul{ padding-left:18px; }
.legal-block .placeholder{ color:var(--clay); }

footer{
  padding:40px 0 60px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--rule); flex-wrap:wrap; gap:16px;
}
footer .mark-text{color:var(--bone-dim);}
footer .foot-links{display:flex; gap:18px; flex-wrap:wrap;}
footer .foot-links a, footer .social a{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--bone-dim); text-decoration:none; transition:color .25s ease;
}
footer .foot-links a:hover, footer .social a:hover{color:var(--olive);}
footer .social{display:flex; gap:20px;}
footer .copy{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--bone-dim); letter-spacing:0.04em; width:100%; margin-top:12px; }

@media (max-width:640px){
  section{padding:64px 0;}
  .film-card{grid-template-columns:1fr;}
  .film-meta{text-align:left;}
  footer{flex-direction:column; gap:16px; align-items:flex-start;}
}

/* Header compact sur très petits écrans — évite qu'il occupe ~1/4 de l'écran (audit) */
@media (max-width:480px){
  header.nav{ padding:18px 0 14px; }
  .nav-inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .mark img{ height:36px; }
  nav.links{ gap:16px; justify-content:flex-start; width:100%; }
  nav.links a{ font-size:10.5px; }
}