/* ============================================================
   ailvin — site pro · « l'axe & la magnésie »
   Concept : le mât chinois = un axe vertical. Filet laiton qui
   traverse la page, beaucoup de vide, ascension au scroll.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Couleurs */
  --ink:        #161320;   /* encre scénique chaude (la scène) */
  --ink-2:      #211C2E;   /* surface relevée */
  --chalk:      #ECE6DC;   /* magnésie (texte) */
  --chalk-dim:  rgba(236,230,220,.62);
  --chalk-faint:rgba(236,230,220,.40);
  --brass:      #C2925A;   /* le mât / la lumière chaude (accent unique) */
  --brass-lit:  #D8A86E;   /* survol */
  --steel:      #717B8C;   /* acier froid (secondaire) */
  --line:       rgba(236,230,220,.14);

  /* Typo */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Échelle fluide */
  --step--1: clamp(.82rem, .79rem + .15vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  --step-2:  clamp(1.9rem, 1.6rem + 1.4vw, 2.8rem);
  --step-3:  clamp(2.8rem, 2.1rem + 3.4vw, 5rem);
  --step-4:  clamp(3.8rem, 2.4rem + 6.4vw, 8.5rem);

  /* Rythme */
  --gutter: clamp(1.2rem, 4vw, 4rem);
  --axis-x: clamp(1.2rem, 4vw, 4rem);   /* position de l'axe laiton */
  --maxw: 1280px;
  --radius: 3px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}

/* ---------- Utilitaires ---------- */
.shell{ width:min(100% - calc(var(--gutter) * 2), var(--maxw)); margin-inline:auto; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--brass);
  font-weight:500;
}
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:99; background:var(--brass); color:var(--ink); padding:.6rem 1rem; }
:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:3px; }

/* ---------- L'axe laiton (signature) ---------- */
.axis{
  position:fixed;
  top:0; bottom:0;
  left:var(--axis-x);
  width:2px;
  background:linear-gradient(var(--brass), rgba(194,146,90,.15));
  z-index:1;
  pointer-events:none;
  transform-origin:top;
  animation:axis-draw 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes axis-draw{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
@media (prefers-reduced-motion: reduce){ .axis{ animation:none; } }
@media (max-width:680px){ .axis{ left:1rem; } }

/* ---------- En-tête / nav ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:10;
  display:flex; align-items:center; justify-content:flex-end;
  padding:2.2rem var(--gutter) 1.2rem;
  mix-blend-mode:difference;            /* lisible sur le showreel clair ou sombre */
}
.brand{ position:absolute; left:50%; top:1.9rem; transform:translateX(-50%); text-align:center; font-family:var(--font-display); font-weight:800; font-size:var(--step-1); letter-spacing:-.03em; }
.brand small{ display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; font-weight:500; }
.nav{ display:flex; gap:1.6rem; align-items:center; }
.nav a{ font-family:var(--font-mono); font-size:var(--step-0); text-transform:uppercase; letter-spacing:.12em; padding:.3rem 0; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:currentColor; transition:width .25s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:inherit; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; padding:.5rem .8rem; border-radius:var(--radius); cursor:pointer; }
@media (max-width:760px){
  .nav{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:1.5rem; background:var(--ink); transform:translateY(-100%); transition:transform .35s ease; }
  .nav[data-open="true"]{ transform:none; }
  .nav a{ font-size:var(--step-2); font-family:var(--font-display); text-transform:none; letter-spacing:-.02em; }
  .nav-toggle{ display:inline-block; z-index:11; }
  .site-head{ mix-blend-mode:normal; justify-content:space-between; } .brand{ position:static; transform:none; top:auto; text-align:left; }
}

/* ---------- Héros (showreel) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(to top, var(--ink) 4%, rgba(22,19,32,.25) 45%, rgba(22,19,32,.55) 100%); }
.hero__inner{ padding:0 var(--gutter) clamp(3rem,8vh,6rem); padding-left:calc(var(--axis-x) + 1.4rem); }
.hero__title{ font-size:var(--step-4); }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; animation:rise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero__title .line:nth-child(2) > span{ animation-delay:.08s; }
.hero__sub{ margin-top:1.2rem; max-width:46ch; color:var(--chalk-dim); font-size:var(--step-1); font-weight:300; }
.hero__meta{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.hero__meta span{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-faint); }
@keyframes rise{ from{ transform:translateY(110%);} to{ transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .hero__title .line > span{ animation:none; } }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase;
  padding:.95rem 1.5rem; border-radius:var(--radius); border:1px solid var(--brass);
  color:var(--ink); background:var(--brass); transition:background .2s, color .2s, transform .2s;
}
.btn:hover{ background:var(--brass-lit); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--chalk); }
.btn--ghost:hover{ background:transparent; border-color:var(--brass-lit); color:var(--brass-lit); }

/* ---------- Sections ---------- */
.section{ position:relative; padding-block:clamp(4rem,12vh,9rem); }
.section__head{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:clamp(2rem,5vh,4rem); padding-left:calc(var(--axis-x) + 1.4rem); }
.section__head h2{ font-size:var(--step-3); }
.section__lead{ max-width:60ch; color:var(--chalk-dim); }

/* Disciplines (liste verticale, ancrée à l'axe) */
.disciplines{ display:grid; gap:0; padding-left:calc(var(--axis-x) + 1.4rem); }
.discipline{ display:flex; gap:1.5rem; align-items:baseline; padding:1.4rem 0; border-top:1px solid var(--line); }
.discipline:last-child{ border-bottom:1px solid var(--line); }
.discipline__k{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--steel); letter-spacing:.1em; min-width:3.5ch; }
.discipline__t{ font-family:var(--font-display); font-size:var(--step-2); letter-spacing:-.02em; }
.discipline__d{ color:var(--chalk-dim); margin-left:auto; max-width:38ch; }
@media (max-width:760px){ .discipline{ flex-wrap:wrap; } .discipline__d{ margin-left:0; width:100%; } }

/* ---------- Grille de projets (cartes) ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:clamp(1rem,2.5vw,2rem); padding-inline:var(--gutter); }
.card{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, transform .25s; }
.card:hover{ border-color:var(--brass); transform:translateY(-4px); }
.card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__media img{ transform:scale(1.04); }
.card__body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card__meta{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); display:flex; gap:.8rem; flex-wrap:wrap; }
.card__title{ font-family:var(--font-display); font-size:var(--step-1); letter-spacing:-.02em; }
.card__excerpt{ color:var(--chalk-dim); font-size:var(--step--1); }
.card__link{ margin-top:auto; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }
.card__link::after{ content:" \2197"; }

/* ---------- Sélecteur de langue (FR / EN) ---------- */
.lang{ display:inline-flex; align-items:center; gap:.45rem; }
.nav .lang__link{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .1rem; opacity:.55; }
.nav .lang__link[aria-current="true"]{ opacity:1; }
.nav .lang__link[aria-current="true"]::after{ width:100%; }
.lang__link abbr{ text-decoration:none; cursor:inherit; }
.lang__sep{ font-family:var(--font-mono); font-size:.7rem; opacity:.35; }

/* ---------- Sites réalisés : aperçu dans un cadre de navigateur ---------- */
.site{ position:relative; display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .25s, transform .25s; }
.site:hover{ border-color:var(--brass); transform:translateY(-4px); }
.site__preview{ position:relative; display:block; }
.site__bar{ display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; background:#0F0D17; border-bottom:1px solid var(--line); }
.site__bar i{ display:block; width:.5rem; height:.5rem; border-radius:50%; background:rgba(236,230,220,.26); }
.site__bar b{ margin-left:.6rem; font-family:var(--font-mono); font-weight:400; font-size:.68rem; letter-spacing:.06em; color:var(--chalk-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site__shot{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.site__shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s ease; }
.site:hover .site__shot img{ transform:scale(1.03); }
.site__ph{ display:grid; place-items:center; width:100%; height:100%; padding:1rem; text-align:center; font-family:var(--font-display); font-weight:800; font-size:var(--step-1); letter-spacing:-.02em; color:var(--chalk-faint); background:radial-gradient(120% 90% at 30% 10%, #2A2440, var(--ink)); overflow-wrap:anywhere; }
.site__go{ position:absolute; right:.7rem; bottom:.7rem; padding:.4rem .65rem; border-radius:var(--radius); background:var(--brass); color:var(--ink); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; }
.site:hover .site__go,.site__preview:focus-visible .site__go{ opacity:1; transform:none; }
.site__links{ margin:auto 0 0; padding-top:.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.2rem; }
.site__case{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-dim); }
.site__case:hover{ color:var(--chalk); }
.section__more{ padding-inline:var(--gutter); margin:2rem 0 0; }
@media (hover:none){ .site__go{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .site,.site__shot img,.site__go{ transition:none; } .site:hover{ transform:none; } .site:hover .site__shot img{ transform:none; } }
@media (max-width:760px){
  .nav .lang{ margin-top:.5rem; }
  .nav .lang__link{ font-family:var(--font-mono); font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; }
}

/* ---------- Contact (formulaire) ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(2rem,6vw,5rem); align-items:start; padding-left:calc(var(--axis-x) + 1.4rem); padding-inline-end:var(--gutter); margin-top:2.5rem; scroll-margin-top:7rem; }
.form{ display:grid; gap:1.2rem; max-width:680px; }
.form p{ margin:0; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-dim); }
.field input,.field select,.field textarea{ width:100%; background:var(--ink-2); color:var(--chalk); border:1px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem; font:inherit; color-scheme:dark; transition:border-color .2s; }
.field textarea{ min-height:11rem; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--chalk-faint); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--brass-lit); outline-offset:2px; border-color:var(--brass); }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }
.form__note{ font-size:var(--step--1); color:var(--chalk-faint); }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
button.btn{ cursor:pointer; }
.notice{ margin:0 0 1.6rem; max-width:680px; padding:1rem 1.2rem; background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--brass); border-radius:var(--radius); }
.notice--err{ border-left-color:#D9785F; }
.contact__aside{ padding-top:.4rem; }
.contact__list{ list-style:none; margin:1rem 0 1.4rem; padding:0; display:grid; gap:0; }
.contact__list li{ padding:.8rem 0; border-top:1px solid var(--line); color:var(--chalk-dim); }
.contact__list li:last-child{ border-bottom:1px solid var(--line); }
.contact__where{ margin:0; font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-faint); }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } .form__row{ grid-template-columns:1fr; } }

/* ---------- Visualiseur 3D ---------- */
model-viewer,.embed-3d{ width:100%; aspect-ratio:4/3; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); }

/* ---------- Article projet (single) ---------- */
.single{ padding-top:clamp(7rem,14vh,10rem); }
.single__head{ padding-left:calc(var(--axis-x) + 1.4rem); padding-inline-end:var(--gutter); margin-bottom:2.5rem; }
.single__title{ font-size:var(--step-3); margin:.6rem 0; }
.single__specs{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.08em; color:var(--steel); }
.single__specs b{ color:var(--chalk); font-weight:500; }
.prose{ max-width:68ch; padding-left:calc(var(--axis-x) + 1.4rem); padding-inline-end:var(--gutter); }
.prose p{ margin:0 0 1.1em; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:.8rem; padding-inline:var(--gutter); margin-top:2.5rem; }
.gallery img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }

/* ---------- CTA bandeau ---------- */
.cta-band{ text-align:center; padding-block:clamp(4rem,10vh,7rem); }
.cta-band h2{ font-size:var(--step-3); margin-bottom:1.2rem; }
.cta-band p{ color:var(--chalk-dim); max-width:48ch; margin:0 auto 2rem; }

/* ---------- Pied ---------- */
.site-foot{ border-top:1px solid var(--line); padding:clamp(2.5rem,6vh,4rem) var(--gutter); display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:end; }
.site-foot a{ color:var(--chalk-dim); }
.site-foot a:hover{ color:var(--brass); }
.site-foot .legal{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--chalk-faint); text-transform:uppercase; }

/* ---------- Ascension au scroll (signature, discrète) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }