/* ═══════════════════════════════════════════════════════
   KILVERN · TOKENS
   Palette Terre brûlée
═══════════════════════════════════════════════════════ */
:root{
  --ink:#2C1A0E;        /* brun profond */
  --ink2:#6B3A1F;       /* brun moyen */
  --ink3:#9E6B47;       /* brun clair / texte tertiaire */
  --paper:#FDF8F2;      /* fond */
  --p2:#F5EDE0;         /* crème */
  --p3:#EAD9C4;         /* sable clair */
  --sand:#D6BFA0;       /* sable */
  --gold:#C4722A;       /* cuivre */
  --ocre:#E8A96A;       /* ocre */

  --display:'Playfair Display',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;

  --max:1240px;
  --nav:64px;
  --gut:clamp(1.25rem,5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* repli navigateurs anciens */
  overflow-x:clip;     /* clip ne casse pas position:sticky */
  -webkit-tap-highlight-color:transparent;
}
/* iOS < 16 ne connaît pas clip : hidden y casserait le collage.
   Toutes les sources de débordement horizontal sont déjà confinées
   (marquees, bandeaux, scène d'explosion), on peut donc libérer le body. */
@supports not (overflow-x:clip){ body{overflow-x:visible} }
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--paper)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--p2)}
::-webkit-scrollbar-thumb{background:var(--gold)}

/* ─── Type utilities ─────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-size:.6rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);
}
.eyebrow-i{
  font-family:var(--serif);font-style:italic;font-size:.92rem;
  color:var(--gold);letter-spacing:.01em;
}
.h-xl{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.02em;
}
.h-lg{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.9vw,2.15rem);line-height:1.14;letter-spacing:-.012em;
}
.h-md{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.3;
}
.stmt{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,1.55vw,1.35rem);line-height:1.6;letter-spacing:0;
  color:var(--ink);
}
em,.it{font-family:var(--serif);font-style:italic;font-weight:400}
.gold{color:var(--gold)}

/* ─── Layout ─────────────────────────────────────────── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(3rem,6vw,5.5rem) 0}
.rule{height:1px;background:var(--p3);border:0}

/* ═══════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════ */
nav{
  position:fixed;inset:0 0 auto 0;z-index:300;height:var(--nav);
  display:flex;align-items:center;gap:1.5rem;
  padding:0 var(--gut);
  background:rgba(253,248,242,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(234,217,196,.9);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
nav.hide{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:.55rem;cursor:pointer;text-decoration:none;flex-shrink:0}
.brand-name{
  font-family:var(--display);font-size:1.02rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.brand-sub{
  display:block;font-family:var(--sans);font-size:.5rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:3px;
}
.nav-links{display:flex;gap:.25rem;list-style:none;margin-left:auto}
.nav-links a{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink2);padding:.5rem .85rem;cursor:pointer;
  position:relative;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--gold)}
.lang{display:flex;align-items:center;gap:.3rem;margin-left:1.25rem;flex-shrink:0}
.lang button,.lang a{
  background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:.68rem;letter-spacing:.14em;color:var(--ink3);padding:.2rem;transition:color .2s;
}
.lang button.on,.lang a.on{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.lang span{font-size:.6rem;color:var(--p3)}

.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--ink)}
.burger svg{width:22px;height:22px}
@media(max-width:860px){
  .nav-links{
    position:fixed;inset:var(--nav) 0 auto 0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--p3);
    padding:1rem var(--gut) 2rem;margin:0;
    transform:translateY(-120%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.9rem 0;font-size:.9rem;display:block;border-bottom:1px solid var(--p2)}
  .nav-links a::after{display:none}
  .burger{display:block}
  .lang{margin-left:1rem;order:3}
}

/* ═══════════════════════════════════════════════════════
   MARQUEE (signature Kilvern : bandeau continu)
═══════════════════════════════════════════════════════ */
.marquee{overflow:hidden;position:relative;padding:clamp(1.5rem,3vw,2.75rem) 0}
.marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.025em;
  padding-right:.4em;white-space:nowrap;display:flex;align-items:center;gap:.3em;
}
.marquee-item .dot{
  width:.13em;height:.13em;border-radius:50%;background:var(--gold);
  display:inline-block;flex-shrink:0;
}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee--dark{background:var(--ink);color:var(--p2)}
.marquee--dark .dot{background:var(--ocre)}

/* bandeau images */
.strip{overflow:hidden;padding:0}
.strip-track{display:flex;width:max-content;animation:slide 48s linear infinite;gap:2px}
.strip-cell{width:clamp(220px,26vw,400px);aspect-ratio:4/3;flex-shrink:0}
/* les cases mènent au projet : on suspend le défilement au survol, sinon on
   demande à l'utilisateur de cliquer une cible qui bouge */
.strip:hover .strip-track,
.strip:focus-within .strip-track{animation-play-state:paused}
.strip-cell{cursor:pointer}
.strip-cell:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* ═══════════════════════════════════════════════════════
   PLACEHOLDERS IMAGES
   Dépose tes fichiers dans /images/ avec les noms indiqués
   dans l'attribut data-ph et ils remplacent le placeholder.
═══════════════════════════════════════════════════════ */
.ph{
  position:relative;overflow:hidden;background:var(--p2);
  background-size:cover;background-position:center;
}
/* grain léger par-dessus chaque visuel */
.ph::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.ph:hover img{transform:scale(1.045)}
/* vidéo au-dessus de l'image : si le fichier .mp4 existe il prend la main,
   sinon l'élément se retire et l'image (puis le visuel générique) réapparaît */
.ph video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.ph:hover video{transform:scale(1.045)}
.ph video[data-fallback]{display:none}

/* ── Visuels génériques (remplacés dès qu'un fichier /images/ existe) ── */
.v1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M140 520 A260 260 0 0 1 660 520' fill='none' stroke='%23C4722A' stroke-width='1.5' opacity='.6'/%3E%3Cpath d='M215 520 A185 185 0 0 1 585 520' fill='none' stroke='%23E8A96A' stroke-width='1' opacity='.45'/%3E%3Ccircle cx='400' cy='520' r='7' fill='%23C4722A'/%3E%3C/svg%3E"),linear-gradient(140deg,#2C1A0E 0%,#6B3A1F 100%)}
.v2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23EAD9C4'/%3E%3Cstop offset='1' stop-color='%23D6BFA0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23a)'/%3E%3Cg stroke='%236B3A1F' stroke-width='1' opacity='.3' fill='none'%3E%3Cpath d='M0 150h800M0 300h800M0 450h800'/%3E%3C/g%3E%3Ccircle cx='560' cy='230' r='120' fill='%23C4722A' opacity='.28'/%3E%3C/svg%3E")}
.v3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='b' cx='.35' cy='.3'%3E%3Cstop offset='0' stop-color='%23E8A96A'/%3E%3Cstop offset='1' stop-color='%236B3A1F'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23b)'/%3E%3Cpath d='M0 420 Q200 340 400 420 T800 420 V600 H0Z' fill='%232C1A0E' opacity='.55'/%3E%3C/svg%3E")}
.v4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='800' height='600' fill='%23F5EDE0'/%3E%3Cg fill='none' stroke='%23C4722A' stroke-width='1.2' opacity='.5'%3E%3Cpath d='M100 560 A300 300 0 0 1 700 560'/%3E%3Cpath d='M180 560 A220 220 0 0 1 620 560'/%3E%3Cpath d='M260 560 A140 140 0 0 1 540 560'/%3E%3C/g%3E%3Crect x='0' y='560' width='800' height='40' fill='%232C1A0E'/%3E%3C/svg%3E")}
.v5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232C1A0E'/%3E%3Cstop offset='.55' stop-color='%23C4722A'/%3E%3Cstop offset='1' stop-color='%23EAD9C4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23c)'/%3E%3C/svg%3E")}
.v-band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232C1A0E'/%3E%3Cstop offset='.5' stop-color='%234A2814'/%3E%3Cstop offset='1' stop-color='%232C1A0E'/%3E%3C/linearGradient%3E%3CradialGradient id='ember' cx='.5' cy='.95' r='.55'%3E%3Cstop offset='0' stop-color='%23C4722A' stop-opacity='.32'/%3E%3Cstop offset='.6' stop-color='%236B3A1F' stop-opacity='.14'/%3E%3Cstop offset='1' stop-color='%232C1A0E' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='600' fill='url(%23bg)'/%3E%3Crect width='1600' height='600' fill='url(%23ember)'/%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M280 585 A520 520 0 0 1 1320 585' stroke='%23C4722A' stroke-width='2' opacity='.38'/%3E%3Cpath d='M440 585 A360 360 0 0 1 1160 585' stroke='%23E8A96A' stroke-width='1.5' opacity='.28'/%3E%3Cpath d='M600 585 A200 200 0 0 1 1000 585' stroke='%23C4722A' stroke-width='1.5' opacity='.2'/%3E%3C/g%3E%3Ccircle cx='800' cy='585' r='10' fill='%23E8A96A' opacity='.75'/%3E%3C/svg%3E")}
.v6{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='800' height='600' fill='%236B3A1F'/%3E%3Cg opacity='.4'%3E%3Crect x='60' y='60' width='300' height='480' fill='%23E8A96A'/%3E%3Crect x='400' y='180' width='340' height='240' fill='%23F5EDE0'/%3E%3C/g%3E%3C/svg%3E")}

/* ═══════════════════════════════════════════════════════
   BARRE HORLOGE + CHAPÔ HORIZONTAL (page À propos)
═══════════════════════════════════════════════════════ */
.tz-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
  padding:1.15rem 0;border-top:1px solid var(--p3);border-bottom:1px solid var(--p3);
}
.tz-left{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.tz-sel{
  font-family:var(--sans);font-size:.6rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);
  background:transparent;border:0;border-bottom:1px solid var(--p3);
  padding:.3rem 1.4rem .3rem 0;appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C4722A' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .15rem center;background-size:9px;
  transition:border-color .25s,color .25s;
}
.tz-sel:hover,.tz-sel:focus{border-color:var(--gold);color:var(--ink)}
.tz-clock{display:flex;align-items:baseline;gap:.75rem}
.tz-time{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,3vw,2.1rem);line-height:1;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
}
.tz-time .tz-s{font-size:.55em;color:var(--gold)}
.tz-zone{font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}

.about-lede{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:start;
  padding:clamp(2.25rem,5vw,3.75rem) 0;
}
.about-lede h1{max-width:15ch}
.lede-cols{columns:2;column-gap:clamp(1.5rem,3vw,2.75rem)}
.lede-cols p{
  font-size:.82rem;line-height:1.85;color:var(--ink2);
  margin-bottom:1rem;break-inside:avoid;
}
@media(max-width:820px){
  .about-lede{grid-template-columns:1fr;gap:1.5rem}
  .lede-cols{columns:1}
}

/* ═══════════════════════════════════════════════════════
   PAGE RÉALISATIONS
   Liste au survol + image de prévisualisation suivant le curseur
═══════════════════════════════════════════════════════ */
.work-hero{padding:calc(var(--nav) + 3.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.marquee--rev .marquee-track{animation-direction:reverse}

.work-list{border-bottom:1px solid var(--p3)}
.work-row{
  cursor:pointer;
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:baseline;gap:clamp(.9rem,2.5vw,2.5rem);
  padding:clamp(1rem,2.1vw,1.7rem) clamp(.5rem,1.5vw,1.25rem);
  border-top:1px solid var(--p3);
  text-decoration:none;color:inherit;
  transition:background .4s cubic-bezier(.16,1,.3,1);
}
.work-row::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:var(--p2);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.work-row:hover::before{transform:scaleY(1);transform-origin:top}
.work-row > *{position:relative;z-index:1}
.work-n{
  font-family:var(--serif);font-style:italic;font-size:.8rem;
  color:var(--sand);transition:color .35s;
}
.work-row:hover .work-n{color:var(--gold)}
.work-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,2.5vw,2.05rem);line-height:1.1;letter-spacing:-.015em;
  transition:transform .5s cubic-bezier(.16,1,.3,1),color .35s;
}
.work-row:hover .work-name{transform:translateX(14px);color:var(--gold)}
.work-cat{
  font-family:var(--serif);font-style:italic;font-size:.88rem;
  color:var(--ink3);white-space:nowrap;transition:color .35s;
}
.work-row:hover .work-cat{color:var(--ink2)}
.work-view{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;opacity:0;transform:translateX(-8px);
  transition:opacity .4s,transform .45s cubic-bezier(.16,1,.3,1);
}
.work-row:hover .work-view{opacity:1;transform:none}
@media(max-width:760px){
  .work-row{grid-template-columns:auto minmax(0,1fr);row-gap:.3rem}
  .work-cat{grid-column:2}
  .work-view{display:none}
  .work-row:hover .work-name{transform:none}
}

/* prévisualisation flottante */
.work-preview{
  position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  width:clamp(180px,19vw,300px);aspect-ratio:3/4;
  margin:0 0 0 28px;transform:translate3d(-50%,-50%,0);
  opacity:0;scale:.88;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),scale .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
  box-shadow:0 24px 60px rgba(44,26,14,.22);
}
.work-preview.live{opacity:1;scale:1}
.work-preview .ph{position:absolute;inset:0}
@media(hover:none),(pointer:coarse),(max-width:760px){.work-preview{display:none}}
@media(prefers-reduced-motion:reduce){.work-preview{display:none}}

.work-note{
  /* Volontairement discrete : pas d aplat, pas d encadre. Un filet fin,
     un corps reduit et la couleur de texte tertiaire. Elle informe celui
     qui lit jusqu au bout sans peser sur la page. */
  margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding-top:1.2rem;
  border-top:1px solid var(--trait,rgba(158,107,71,.22));
  font-size:.74rem;line-height:1.75;color:var(--ink3);max-width:72ch;
}

/* ═══════════════════════════════════════════════════════
   PAGE PROJET (étude de cas)
═══════════════════════════════════════════════════════ */
.pj-hero{padding:calc(var(--nav) + 3rem) 0 clamp(2rem,4vw,3.5rem);position:relative}
.pj-scroll{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);
  text-decoration:none;margin-bottom:clamp(2rem,5vw,4rem);transition:color .3s;
}
.pj-scroll:hover{color:var(--gold)}
.pj-scroll span.arw{display:inline-block;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.pj-num{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold);display:block;margin-bottom:.5rem}
.pj-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:1;letter-spacing:-.025em;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.pj-meta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--p3);
}
@media(max-width:760px){.pj-meta{grid-template-columns:1fr;gap:1.5rem}}
.pj-lab{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:.6rem}
.pj-sector{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink)}
.pj-scope{list-style:none;columns:2;column-gap:2.5rem}
@media(max-width:600px){.pj-scope{columns:1}}
.pj-scope li{
  font-size:.8rem;color:var(--ink2);padding:.4rem 0;line-height:1.5;
  border-bottom:1px solid var(--p2);break-inside:avoid;
  display:flex;gap:.6rem;align-items:flex-start;
}
.pj-scope li::before{content:'·';color:var(--gold);flex-shrink:0}

.pj-txt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1.25rem,4vw,3.5rem);
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--p3);
}
@media(max-width:760px){.pj-txt{grid-template-columns:1fr;gap:.75rem}}
.pj-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}
.pj-txt p{font-size:.85rem;color:var(--ink2);line-height:1.85;margin-bottom:1rem;max-width:66ch}
.pj-txt ul{list-style:none}
.pj-txt ul li{
  font-size:.82rem;color:var(--ink2);padding:.45rem 0;line-height:1.6;
  border-bottom:1px solid var(--p2);display:flex;gap:.7rem;align-items:flex-start;
}
.pj-txt ul li::before{content:'·';color:var(--gold);flex-shrink:0}

/* --- Moodboard --------------------------------------- */
.pj-mood{
  padding:clamp(2rem,4vw,3.25rem) 0 clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--p3);
}
.pj-mood-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);
}
.pj-mood-words{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink3)}
.pj-mood-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:var(--p3);border:1px solid var(--p3);
}
@media(max-width:820px){.pj-mood-grid{grid-template-columns:repeat(2,1fr)}}
.pj-mood-tile{aspect-ratio:1/1;overflow:hidden;background:var(--p2)}
.pj-mood-tile .ph{width:100%;height:100%}
.pj-mood-type,.pj-mood-pal{grid-column:span 2}
.pj-mood-type{
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  min-height:clamp(180px,22vw,260px);
}
.pj-mood-sample{line-height:1.05;margin:0}
.pj-mood-sample--display{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.pj-mood-sample--body{font-size:.85rem;line-height:1.75;max-width:44ch}
.pj-mood-cap{
  font-family:var(--sans);font-size:.58rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;opacity:.6;
}
.pj-mood-pal{display:grid;grid-template-columns:repeat(5,1fr)}
.pj-mood-sw{position:relative;min-height:clamp(180px,22vw,260px);display:flex;align-items:flex-end;padding:.7rem .5rem}
.pj-mood-sw span{font-family:var(--sans);font-size:.55rem;letter-spacing:.09em;writing-mode:vertical-rl;transform:rotate(180deg)}
@media(max-width:820px){.pj-mood-sw{min-height:clamp(120px,30vw,180px)}}
/* galerie */
.pj-media{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--p3)}
@media(max-width:700px){.pj-media{grid-template-columns:1fr}}
.pj-shot{overflow:hidden;background:var(--p2)}
.pj-shot--wide{grid-column:1 / -1;aspect-ratio:16/9}
.pj-shot--tall{aspect-ratio:4/5}
.pj-shot--sq{aspect-ratio:1/1}
.pj-shot .ph{width:100%;height:100%;transform:scale(1.1);opacity:0;
  transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.pj-shot.in .ph{transform:scale(1);opacity:1}

/* témoignage */
.pj-testi{
  padding:clamp(2.5rem,6vw,5rem) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
@media(max-width:760px){.pj-testi{grid-template-columns:1fr;gap:1rem}}
.pj-testi-q{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.55;color:var(--ink);max-width:52ch}
.pj-testi-n{font-family:var(--display);font-size:1.1rem;margin-bottom:.2rem}
.pj-testi-r{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}

/* autres réalisations : bandeau défilant de cartes */
.pj-other{overflow:hidden;padding-bottom:clamp(2rem,4vw,3.5rem)}
.pj-other-track{display:flex;gap:2px;width:max-content;animation:slide 46s linear infinite}
.pj-other:hover .pj-other-track{animation-play-state:paused}
.pj-card{
  width:clamp(200px,22vw,300px);flex-shrink:0;cursor:pointer;
  text-decoration:none;color:inherit;background:var(--paper);
}
.pj-card-img{aspect-ratio:4/5;overflow:hidden}
.pj-card-img .ph{width:100%;height:100%;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.pj-card:hover .pj-card-img .ph{transform:scale(1.06)}
.pj-card-n{font-family:var(--display);font-size:1rem;padding:.9rem 1rem .15rem;transition:color .3s}
.pj-card:hover .pj-card-n{color:var(--gold)}
.pj-card-c{font-family:var(--serif);font-style:italic;font-size:.8rem;color:var(--ink3);padding:0 1rem 1.1rem}

/* ═══════════════════════════════════════════════════════
   CHAPÔ HORIZONTAL PLEINE LARGEUR (page Offres)
═══════════════════════════════════════════════════════ */
.lede-wide{
  padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(2rem,4vw,3rem);
  border-top:1px solid var(--p3);
}
.lede-wide p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(.98rem,1.35vw,1.28rem);
  line-height:1.62;letter-spacing:0;color:var(--ink);
  max-width:none;                 /* toute la largeur du conteneur */
  text-wrap:pretty;
}
.lede-wide p .gold{font-family:var(--serif);font-style:italic}

/* ═══════════════════════════════════════════════════════
   EXPLOSION D'IMAGES (scroll-driven, page À propos)
   --p va de 0 (pile centrale) à 1 (images dispersées)
═══════════════════════════════════════════════════════ */
.explode{position:relative;height:260vh;--p:0}
.explode-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);
}
.explode-txt{position:relative;z-index:6;text-align:center;pointer-events:none;padding:0 var(--gut)}
.explode-txt .h-xl{
  font-size:clamp(2.2rem,6vw,5rem);line-height:1.02;
  opacity:calc(.15 + .85*var(--p));transition:opacity .1s linear;
}
.explode-txt .eyebrow{margin-bottom:1rem;opacity:calc(.1 + .9*var(--p))}
.explode-tile{
  position:absolute;top:50%;left:50%;z-index:2;
  width:var(--w);aspect-ratio:var(--ar,4/5);
  transform:
    translate(-50%,-50%)
    translate(calc(var(--x) * var(--p)),calc(var(--y) * var(--p)))
    scale(calc(.26 + .74 * var(--p)))
    rotate(calc(var(--r,0) * 1deg * var(--p)));
  opacity:calc(.3 + .7 * var(--p));
  will-change:transform,opacity;
  box-shadow:0 18px 50px rgba(44,26,14,.14);
}
@media(max-width:700px){
  .explode{height:190vh}
}
@media(prefers-reduced-motion:reduce){
  .explode{height:100vh;--p:1 !important}
}

/* ═══════════════════════════════════════════════════════
   CARROUSEL VERTICAL · cartes empilées (page Offres)
═══════════════════════════════════════════════════════ */
.pk-stack{position:relative;padding-bottom:12vh}
.pk-count{
  font-family:var(--serif);font-style:italic;font-size:.85rem;
  color:var(--sand);letter-spacing:.05em;
}
.pk-count b{font-style:normal;font-weight:400;color:var(--gold)}
.pk-progress{
  position:sticky;top:calc(var(--nav) + .9rem);z-index:30;
  height:2px;background:var(--p3);margin-bottom:1.5rem;
  opacity:0;transition:opacity .35s;
  /* la barre porte sa propre bande de papier : meme si une carte passait
     dessous, le trait ne barrerait plus un titre */
  box-shadow:0 -10px 0 var(--paper),0 8px 0 var(--paper);
}
/* en liste simple les cartes defilent en pleine largeur : une barre collee
   passerait forcement au travers d'un titre. Le rail de chaque carte affiche
   deja 03 / 05, l'information n'est pas perdue. */
.pk-progress.pk-flat{display:none}
.pk-progress.live{opacity:1}
/* aucune transition sur la largeur : la valeur est recalculée à chaque frame,
   une transition la ferait courir en retard sur le scroll */
.pk-progress i{display:block;height:100%;background:var(--gold);width:0}
@media(max-width:800px){.pk-progress{display:none}}

/* ═══════════════════════════════════════════════════════
   CURSEUR PERSONNALISÉ
   Point unique aux couleurs Kilvern : brun sur clair,
   crème sur sombre, cuivre au survol
═══════════════════════════════════════════════════════ */
.cur{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--ink);            /* brun profond sur les fonds clairs */
  opacity:0;will-change:transform;
  transition:
    opacity .25s,
    background-color .3s,
    width .22s cubic-bezier(.16,1,.3,1),
    height .22s cubic-bezier(.16,1,.3,1),
    margin .22s cubic-bezier(.16,1,.3,1);
}
body.cursor-ready .cur{opacity:1}
body.cursor-dark .cur{background:var(--p2)}   /* crème sur les fonds sombres */
/* au-dessus d'un texte non cliquable : le point s'efface pour ne pas gêner la lecture */
body.cursor-ready.cursor-text .cur{opacity:.32}
/* l'état survol reprend toujours la main sur l'état texte */
body.cursor-hot .cur{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--gold)}
body.cursor-ready.cursor-hot .cur{opacity:1}

@media(hover:hover) and (pointer:fine){
  body.cursor-ready,
  body.cursor-ready a,
  body.cursor-ready button,
  body.cursor-ready .chip,
  body.cursor-ready .talk,
  body.cursor-ready .offering,
  body.cursor-ready input,
  body.cursor-ready select,
  body.cursor-ready textarea,
  body.cursor-ready label{cursor:none}
}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* ═══════════════════════════════════════════════════════
   ROUTER
═══════════════════════════════════════════════════════ */
.page{display:none}
.page.on{display:block;animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ─── Reveal on scroll ───────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════
   LIENS & BOUTONS
═══════════════════════════════════════════════════════ */
.link{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);padding-bottom:.35rem;
  border-bottom:1px solid var(--ink);transition:color .25s,border-color .25s,gap .25s;
}
.link:hover{color:var(--gold);border-color:var(--gold);gap:1rem}
.link--light{color:var(--p2);border-color:rgba(245,237,224,.5)}
.link--light:hover{color:var(--ocre);border-color:var(--ocre)}
.btn{
  display:inline-block;cursor:pointer;border:0;
  font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.95rem 2.2rem;background:var(--ink);color:var(--p2);
  transition:background .25s;
}
.btn:hover{background:var(--gold)}

/* ═══════════════════════════════════════════════════════
   HERO MOTION (accueil) · bloc sombre plein écran
   Variables préfixées kv- : aucune collision avec les tokens du site
═══════════════════════════════════════════════════════ */
.kv-hero{
  --kv-ink:#2C1A0E;--kv-copper:#C4722A;--kv-ochre:#E8A96A;--kv-cream:#F5EDE0;--kv-sand:#D6BFA0;
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100svh;display:grid;align-items:center;
  padding:calc(var(--nav) + clamp(2rem,5vh,3.5rem)) 0 clamp(3rem,7vh,5rem);
  background:radial-gradient(60% 70% at 78% 50%,rgba(196,114,42,.16) 0%,transparent 70%),var(--kv-ink);
  color:var(--kv-cream);font-family:var(--sans);
}
.kv-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.kv-hero__in{width:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,80px);align-items:center}
.kv-hero__text{max-width:640px}
.kv-hero h1{margin:0;font-weight:400}
.kv-hero__kicker{display:block;font-family:var(--sans);font-weight:400;font-size:clamp(.9rem,1.1vw,1rem);letter-spacing:.06em;color:var(--kv-ochre);margin-bottom:1.4rem}
.kv-hero__title{display:block;font-family:var(--display);font-size:clamp(2.5rem,5.2vw,4.9rem);line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.kv-hero__for{margin:1.3rem 0 0;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.3;color:var(--kv-sand);display:flex;gap:.35em;align-items:baseline}
.kv-hero__words{position:relative;display:inline-grid;font-style:italic;color:var(--kv-ochre)}
.kv-hero__words span{grid-area:1/1;white-space:nowrap;opacity:0;transform:translateY(.4em);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.kv-hero__words span.is-on{opacity:1;transform:none}
.kv-hero__words span.is-out{opacity:0;transform:translateY(-.4em)}
.kv-hero__lead{margin:1.6rem 0 0;max-width:34em;font-family:var(--serif);font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.55;color:var(--kv-cream);opacity:.88}
.kv-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.2rem}
.kv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:1rem;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.kv-btn--main{background:var(--kv-copper);color:var(--kv-ink)}
.kv-btn--main:hover{background:var(--kv-ochre)}
.kv-btn--ghost{border:1px solid rgba(214,191,160,.5);color:var(--kv-cream)}
.kv-btn--ghost:hover{border-color:var(--kv-cream)}
.kv-btn:focus-visible{outline:2px solid var(--kv-ochre);outline-offset:3px}
.kv-hero__proof{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.92rem;font-weight:300;color:var(--kv-sand)}
.kv-hero__proof li{display:flex;gap:.7em;align-items:baseline}
.kv-hero__proof li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--kv-copper);transform:translateY(-1px)}
.kv-hero__art{position:relative;width:100%;max-width:520px;justify-self:center}
.kv-hero__art svg{display:block;width:100%;height:auto;overflow:visible}
.kv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* le bandeau d'images suit le hero : plus besoin de compenser la nav */
.kv-hero + .hero{padding-top:0}

.kv-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:kvDraw 1.6s .25s cubic-bezier(.65,0,.35,1) forwards}
.kv-draw--in{animation-duration:1.3s;animation-delay:.75s}
.kv-ember{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:kvIgnite .6s 1.8s cubic-bezier(.2,.8,.2,1.2) forwards,kvBreathe 3.2s 2.4s ease-in-out infinite}
.kv-glow{opacity:0;animation:kvGlowIn 1.2s 1.8s ease forwards,kvGlowB 3.2s 3s ease-in-out infinite}
.kv-spark{opacity:0;animation:kvSpark var(--t,4s) var(--d,2s) ease-out infinite}
.kv-rise{opacity:0;transform:translateY(22px);animation:kvRise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--rd,0s)}
@keyframes kvDraw{to{stroke-dashoffset:0}}
@keyframes kvIgnite{to{transform:scale(1)}}
@keyframes kvBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes kvGlowIn{to{opacity:1}}
@keyframes kvGlowB{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes kvSpark{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}100%{opacity:0;transform:translate(var(--x,0px),-200px)}}
@keyframes kvRise{to{opacity:1;transform:none}}

@media (max-width:860px){
  .kv-hero{align-items:start;min-height:auto;padding-top:calc(var(--nav) + 2rem)}
  .kv-hero__in{grid-template-columns:1fr;gap:8px}
  .kv-hero__art{order:-1;max-width:120px;justify-self:start;margin:0 0 18px}
  .kv-hero__lead{font-size:1.12rem;margin-top:1.1rem}
  .kv-hero__for{margin-top:.9rem}
  .kv-hero__kicker{margin-bottom:1rem}
  .kv-hero__cta{margin-top:1.6rem}
  .kv-hero__cta .kv-btn{flex:1 1 220px}
}
@media (prefers-reduced-motion:reduce){
  .kv-draw{animation:none;stroke-dashoffset:0}
  .kv-ember{animation:none;transform:none}
  .kv-glow{animation:none;opacity:1}
  .kv-spark{display:none}
  .kv-rise{animation:none;opacity:1;transform:none}
  .kv-hero__words span{transition:none}
}

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero{padding-top:var(--nav)}
.hero-head{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem)}
.hero-head .h-xl{max-width:15ch}
.hero-meta{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);
}

/* ─── Intro ──────────────────────────────────────────── */
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
@media(max-width:800px){.intro-grid{grid-template-columns:1fr;gap:1.5rem}}

/* ═══════════════════════════════════════════════════════
   OFFERINGS (home) · lignes éditoriales
═══════════════════════════════════════════════════════ */
.offering{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1.25rem,3vw,3rem);align-items:center;
  padding:clamp(1.5rem,3vw,2.5rem) 0;border-top:1px solid var(--p3);
  transition:background .35s;
}
.offering:last-child{border-bottom:1px solid var(--p3)}
.offering:hover{background:rgba(245,237,224,.5)}
.offering-img{aspect-ratio:16/10}
.offering-name{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.15;margin-top:.3rem}
.offering-txt{font-size:.82rem;color:var(--ink2);line-height:1.75}
@media(max-width:860px){
  .offering{grid-template-columns:1fr;gap:1rem}
  .offering-img{order:-1}
}

/* ═══════════════════════════════════════════════════════
   PACKS (page offres)
═══════════════════════════════════════════════════════ */
.pack{
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr);
  gap:clamp(1.25rem,3.5vw,3rem);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3vw,2.25rem);
  background:var(--paper);border:1px solid var(--p3);
  position:sticky;
  /* --top est recalculé en JS pour qu'aucune carte ne dépasse la fenêtre */
  top:var(--top,calc(var(--nav) + 2.25rem + var(--i,0) * 16px));
  margin-bottom:clamp(1rem,2vw,1.75rem);
  box-shadow:0 -1px 0 var(--paper),0 20px 45px rgba(44,26,14,.07);
  transition:box-shadow .4s,transform .4s cubic-bezier(.16,1,.3,1);
}
.pack.tucked{transform:scale(.985)}
@media(max-width:800px){
  .pack{position:relative;top:auto;transform:none;margin-bottom:1rem}
}
/* Empilement tout ou rien. Laisser une seule carte defiler pendant que les
   autres restent collees donne le pire des deux : les cartes se recouvrent en
   plein milieu d'un paragraphe. Des que la plus haute carte ne tient pas entre
   la barre de progression et le bas de la fenetre, le JS pose pk-flat sur la
   pile et toutes les cartes redeviennent une simple liste, entierement
   lisible. C'est le cas des fenetres de navigateur basses. */
.pk-flat .pack{position:relative;top:auto;transform:none}
.pack-rail{display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.pack-name{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.1;margin-bottom:.3rem}
.pack-dur{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--gold);margin-bottom:1rem}
.pack-desc{font-size:.82rem;color:var(--ink2);line-height:1.72;max-width:66ch;margin-bottom:1.15rem}
.pack-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1.75rem;margin-bottom:1.4rem}
@media(max-width:700px){.pack-list{grid-template-columns:1fr}}
.pack-list li{
  font-size:.75rem;color:var(--ink2);padding:.34rem 0;line-height:1.45;
  border-bottom:1px solid var(--p2);display:flex;gap:.7rem;align-items:flex-start;
}
.pack-list li::before{content:'·';color:var(--gold);flex-shrink:0}
.pack-price{
  font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.pack-usd{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;color:var(--ink3)}
@media(max-width:800px){.pack{grid-template-columns:1fr;gap:1rem}}

.note-band{
  background:var(--p2);border-left:2px solid var(--gold);
  padding:1.4rem clamp(1.25rem,3vw,2rem);margin-top:clamp(2rem,4vw,3rem);
  font-size:.82rem;color:var(--ink2);line-height:1.8;max-width:70ch;
}
.note-band strong{font-weight:500;color:var(--ink)}

/* ═══════════════════════════════════════════════════════
   TÉMOIGNAGES (bloc réservé)
═══════════════════════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--p3)}
.testi{
  background:var(--paper);padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;gap:1.25rem;min-height:230px;
}
.testi-q{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.65;color:var(--ink);flex:1}
.testi-a{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.testi--empty .testi-q{color:var(--sand)}
.testi--empty .testi-a{color:var(--p3)}

/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq-item{border-top:1px solid var(--p3)}
.faq-item:last-child{border-bottom:1px solid var(--p3)}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.35rem 0;font-family:var(--display);font-size:clamp(.95rem,1.35vw,1.15rem);
  color:var(--ink);transition:color .25s;
}
.faq-q:hover,.faq-q.open{color:var(--gold)}
.faq-ico{font-size:1.25rem;font-weight:300;color:var(--gold);transition:transform .35s;line-height:1;flex-shrink:0}
.faq-q.open .faq-ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,1,.3,1)}
.faq-a p{font-size:.82rem;color:var(--ink2);line-height:1.85;max-width:74ch;padding-bottom:1.5rem}

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
.founder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:860px){.founder{grid-template-columns:1fr}}
.founder-img{aspect-ratio:4/5}
.founder-body p{font-size:.85rem;color:var(--ink2);line-height:1.9;margin-bottom:1.2rem;max-width:62ch}
.founder-body p:first-of-type{font-family:var(--serif);font-size:1.1rem;color:var(--ink);line-height:1.7}

.ethos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--p3)}
.ethos-cell{background:var(--paper);padding:clamp(1.75rem,3vw,2.5rem)}
.ethos-n{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--gold);margin-bottom:1.4rem;display:block}
.ethos-t{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.25;margin-bottom:.75rem}
.ethos-d{font-size:.8rem;color:var(--ink2);line-height:1.8}

/* ═══════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-side{position:sticky;top:calc(var(--nav) + 2.5rem)}
@media(max-width:900px){.contact-side{position:static}}
.proof{display:flex;gap:.85rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px solid var(--p2);font-size:.8rem;color:var(--ink2)}
.proof::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:.6rem}
.contact-direct{margin-top:2rem}
.contact-direct a{
  font-family:var(--display);font-size:1.05rem;text-decoration:none;
  border-bottom:1px solid var(--p3);padding-bottom:.2rem;transition:border-color .25s,color .25s;
}
.contact-direct a:hover{color:var(--gold);border-color:var(--gold)}

/* form */
.f-group{margin-bottom:1.85rem}
.f-label{
  display:block;font-family:var(--display);font-size:.98rem;
  margin-bottom:.5rem;color:var(--ink);
}
.f-label .req{color:var(--gold);font-family:var(--sans);font-size:.7rem;vertical-align:super}
.f-in,.f-sel,.f-ta{
  width:100%;font-family:var(--sans);font-weight:300;font-size:.88rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--p3);
  padding:.7rem 0;outline:none;transition:border-color .25s;
}
.f-in::placeholder,.f-ta::placeholder{color:var(--sand)}
.f-in:focus,.f-sel:focus,.f-ta:focus{border-color:var(--gold)}
.f-ta{min-height:110px;resize:vertical;line-height:1.8}
.f-sel{appearance:none;cursor:pointer;background:transparent}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:600px){.f-row{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chip{
  cursor:pointer;user-select:none;font-size:.74rem;letter-spacing:.08em;
  padding:.5rem 1.1rem;border:1px solid var(--p3);color:var(--ink2);transition:all .25s;
}
.chip:hover{border-color:var(--ink3)}
.chip.on{background:var(--ink);color:var(--p2);border-color:var(--ink)}
.f-note{font-size:.76rem;color:var(--ink3);line-height:1.7;margin:-.75rem 0 1.75rem}
.f-ok{
  display:none;margin-top:1.5rem;padding:1.25rem 1.5rem;
  background:var(--p2);border-left:2px solid var(--gold);font-size:.92rem;color:var(--ink2);line-height:1.8;
}
.f-ko{display:none;margin-top:1.25rem;padding:1rem 1.15rem;border:1px solid var(--gold);border-left-width:3px;background:rgba(196,114,42,.06);font-size:.86rem;line-height:1.7;color:var(--ink)}
.f-ko a{color:var(--gold);text-decoration:underline}

/* ═══════════════════════════════════════════════════════
   LET'S TALK
═══════════════════════════════════════════════════════ */
.talk{position:relative;min-height:clamp(300px,46vh,480px);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.talk .ph{position:absolute;inset:0}
.talk-veil{position:absolute;inset:0;background:rgba(44,26,14,.45);z-index:3;transition:background .5s}
.talk:hover .talk-veil{background:rgba(44,26,14,.32)}
.talk-txt{position:relative;z-index:4;text-align:center;color:var(--p2)}
.talk-txt .h-xl{color:var(--p2)}
.talk-txt .eyebrow{color:var(--ocre);margin-bottom:1.25rem}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
footer{background:var(--ink);color:var(--p3);padding:clamp(3rem,6vw,5rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(245,237,224,.14)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr;gap:2rem}}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--p2);line-height:1.45}
.foot-h{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:1.1rem}
.foot-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.foot-list a{font-size:.78rem;text-decoration:none;color:var(--p3);cursor:pointer;transition:color .25s}
.foot-list a:hover{color:var(--ocre)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.75rem}
.foot-bot span,.foot-bot a{font-size:.7rem;letter-spacing:.1em;color:var(--ink3);text-decoration:none;cursor:pointer}
.foot-bot a:hover{color:var(--ocre)}
.foot-legal{display:flex;gap:1.25rem;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════
   PAGES LÉGALES
═══════════════════════════════════════════════════════ */
.legal{padding:calc(var(--nav) + 4rem) 0 5rem;min-height:70vh}
.legal .wrap{max-width:760px}
.legal h2{font-family:var(--display);font-size:1.05rem;font-weight:500;margin:2.2rem 0 .6rem}
.legal p,.legal li{font-size:.85rem;color:var(--ink2);line-height:1.85;margin-bottom:.85rem}
.legal ul{padding-left:1.2rem;margin-bottom:1rem}
.legal a{color:var(--gold)}
.legal-date{font-size:.78rem;color:var(--ink3);margin-bottom:2.5rem}

/* ═══════════════════════════════════════════════════════
   LANGUE : on masque la langue inactive
═══════════════════════════════════════════════════════ */
body.fr [data-en]{display:none !important}
body.en [data-fr]{display:none !important}

/* ═══════════════════════════════════════════════════════
   ACCESSIBILITÉ
═══════════════════════════════════════════════════════ */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════
   MOBILE & TACTILE
═══════════════════════════════════════════════════════ */

/* barre de navigation plus basse : --nav pilote tous les décalages collants */
@media(max-width:700px){
  :root{--nav:56px}
}

/* Les états de survol restent collés après un appui sur écran tactile.
   On les neutralise et on les remplace par un retour à l'appui. */
@media(hover:none){
  .offering:hover{background:transparent}
  .ph:hover img,.ph:hover video{transform:none}
  .pj-card:hover .pj-card-img .ph{transform:none}
  .pj-card:hover .pj-card-n{color:inherit}
  .work-row:hover::before{transform:scaleY(0)}
  .work-row:hover .work-name{transform:none;color:inherit}
  .work-row:hover .work-n{color:var(--sand)}
  .work-row:hover .work-cat{color:var(--ink3)}
  .work-row:hover .work-view{opacity:0}
  .talk:hover .talk-veil{background:rgba(44,26,14,.45)}
  .link:hover{color:inherit;border-color:currentColor;gap:.6rem}
  .btn:hover{background:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(0)}
  .faq-q:hover{color:var(--ink)}
  .faq-q.open{color:var(--gold)}
  .chip:hover{border-color:var(--p3)}
  .contact-direct a:hover{color:inherit;border-color:var(--p3)}
  .foot-list a:hover{color:var(--p3)}
  .tz-sel:hover{border-color:var(--p3);color:var(--ink2)}
  .pj-scroll:hover{color:var(--ink3)}
  .marquee:hover .marquee-track,
  .pj-other:hover .pj-other-track{animation-play-state:running}

  /* retour tactile à l'appui */
  .work-row:active::before{transform:scaleY(1);transform-origin:top}
  .work-row:active .work-name{color:var(--gold)}
  .pack:active,.offering:active{background:var(--p2)}
  .btn:active{background:var(--gold)}
  .link:active{color:var(--gold);border-color:var(--gold)}
  .pj-card:active .pj-card-n{color:var(--gold)}
  .talk:active .talk-veil{background:rgba(44,26,14,.3)}
}

/* pas d'attente de double-tap sur les éléments cliquables */
.work-row,.pj-card,.offering,.talk,.chip,.btn,.link,.faq-q,
.nav-links a,.foot-list a,.brand,.lang button,.lang a{touch-action:manipulation}

@media(max-width:760px){
  /* iOS zoome sur un champ dont le texte fait moins de 16px */
  .f-in,.f-sel,.f-ta{font-size:16px}
  .f-label{font-size:1rem}

  /* cibles tactiles d'au moins 44px */
  .chip{padding:.72rem 1.15rem;font-size:.8rem}
  .lang button,.lang a{padding:.7rem .45rem;font-size:.75rem}
  .link{padding-bottom:.5rem;font-size:.68rem}
  .btn{padding:1.05rem 2rem;font-size:.68rem;width:100%;text-align:center}
  .faq-q{padding:1.15rem 0;gap:1rem}
  .work-row{padding:1.05rem .35rem}

  /* la nav mobile : langue avant le bouton menu */
  .lang{order:2;margin-left:auto;margin-right:.35rem}
  .burger{order:3;margin-left:0}

  /* le marquee géant coûte cher en repaint sur mobile */
  .marquee-track{animation-duration:26s}
  .strip-track{animation-duration:34s}
  .pj-other-track{animation-duration:32s}

  /* bandes et blocs de bas de page */
  .talk{min-height:clamp(260px,42svh,380px)}
  .strip-cell{width:clamp(180px,58vw,260px)}
}

@media(max-width:520px){
  .hero-head .h-xl,.pj-title{font-size:clamp(1.9rem,8.5vw,2.4rem)}
  .marquee-item{font-size:clamp(1.9rem,9vw,2.6rem)}
  .explode-txt .h-xl{font-size:clamp(1.8rem,8.5vw,2.4rem)}
  .lede-cols{columns:1}
  .pj-scope{columns:1}
  .testi-grid{grid-template-columns:1fr}
  .ethos{grid-template-columns:1fr}
  .tz-clock{width:100%;justify-content:space-between}
}

/* TELEPHONE · l'explosion est rejouee, pas seulement retrecie.
   Sur un ecran de 390 points, douze vignettes de 20vw autour d'un titre ne se
   lisent pas, et le depart a l'echelle .3 donne un point unique au centre qui
   ressemble a un bug. Trois corrections :
     un visuel par marque, six au lieu de douze, et deux fois plus grands
     des positions propres au telephone, en deux groupes, qui laissent une
       bande libre au milieu pour le titre
     un etat de repos deja ecarte et deja opaque : la composition est lisible
       avant le premier scroll, le defilement l'ouvre au lieu de la reveler */
@media(max-width:760px){
  .explode{height:158vh}

  .explode-tile:nth-child(3),
  .explode-tile:nth-child(5),
  .explode-tile:nth-child(7),
  .explode-tile:nth-child(9),
  .explode-tile:nth-child(10),
  .explode-tile:nth-child(12){display:none}

  .explode-tile{
    --w:clamp(112px,36vw,168px) !important;
    transform:
      translate(-50%,-50%)
      translate(calc(var(--mx) * (.45 + .55 * var(--p))),
                calc(var(--my) * (.45 + .55 * var(--p))))
      scale(calc(.7 + .3 * var(--p)))
      rotate(calc(var(--r,0) * 1deg * var(--p)));
    opacity:calc(.78 + .22 * var(--p));
    /* le filet clair : sans lui les visuels pales de Maison Aubert
       disparaissent dans le papier du fond */
    box-shadow:0 10px 26px rgba(44,26,14,.16),0 0 0 1px rgba(44,26,14,.07);
  }

  .explode-tile:nth-child(1) {--mx:-25vw;--my:-32vh}
  .explode-tile:nth-child(2) {--mx: 18vw;--my:-34vh}
  .explode-tile:nth-child(4) {--mx: -4vw;--my:-22vh}
  .explode-tile:nth-child(6) {--mx: 23vw;--my: 26vh}
  .explode-tile:nth-child(8) {--mx:-25vw;--my: 27vh}
  .explode-tile:nth-child(11){--mx:  2vw;--my: 36vh}

  /* le titre n'arrive qu'une fois les tuiles ecartees : il ne se lit plus au
     travers. opacity borne elle meme les valeurs hors de 0 et 1 */
  .explode-txt .h-xl,
  .explode-txt .eyebrow{opacity:calc((var(--p) - .34) * 2.4)}
}

/* Ecran court (iPhone SE et assimiles) : le titre occupe une part bien plus
   grande de la hauteur, alors que les decalages sont en vh. On ecarte donc
   davantage et on retrecit un peu, sinon une tuile traverse le titre au
   moment ou il apparait. */
@media(max-width:760px) and (max-height:740px){
  .explode-tile{--w:clamp(104px,33vw,150px) !important}
  .explode-tile:nth-child(1) {--my:-34vh}
  .explode-tile:nth-child(2) {--my:-36vh}
  .explode-tile:nth-child(4) {--my:-28vh}
  .explode-tile:nth-child(6) {--my: 30vh}
  .explode-tile:nth-child(8) {--my: 32vh}
  .explode-tile:nth-child(11){--my: 37vh}
}

/* ═══════════════════════════════════════════════════════
   VIDEO DE PRESENTATION
   Un seul projet en porte une pour l'instant : Helin, dont le
   livrable est un site. Elle se place entre le moodboard et la
   galerie, et elle ne se lance pas toute seule : c'est une
   présentation de trois minutes, pas une boucle d'ambiance.
   Bouton dessiné et barre de progression discrète, comme le
   reste du site, plutôt que les contrôles natifs du navigateur.
═══════════════════════════════════════════════════════ */
.pj-film{padding:0 var(--gut) clamp(2rem,4vw,3.5rem)}
.pj-film-in{max-width:1560px;margin:0 auto}
.pj-film-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  margin-bottom:1.2rem;flex-wrap:wrap}
.pj-film-box{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
  cursor:pointer;border-radius:2px;
}
.pj-film-box video,.pj-film-box img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.pj-film-box img{z-index:1}
.pj-film-box video{z-index:2}
/* le voile s'efface pendant la lecture */
.pj-film-veil{
  position:absolute;inset:0;z-index:3;background:rgba(28,20,14,.34);
  transition:opacity .6s cubic-bezier(.16,1,.3,1);
}
.pj-film.on .pj-film-veil{opacity:0}

.pj-film-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:clamp(62px,6.5vw,88px);height:clamp(62px,6.5vw,88px);border-radius:50%;
  background:var(--paper);color:var(--ink);border:0;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s,background .4s;
  box-shadow:0 14px 40px rgba(28,20,14,.3);
}
.pj-film-box:hover .pj-film-btn{transform:translate(-50%,-50%) scale(1.07)}
.pj-film-btn svg{width:38%;height:38%;fill:currentColor}
/* en lecture le bouton s'efface, et revient au survol */
.pj-film.on .pj-film-btn{opacity:0;pointer-events:none}
.pj-film.on .pj-film-box:hover .pj-film-btn{opacity:1;pointer-events:auto}

.pj-film-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:5;height:3px;
  background:rgba(247,243,236,.24);
}
.pj-film-bar i{display:block;height:100%;width:0;background:var(--ocre);
  transition:width .12s linear}
.pj-film-time{
  position:absolute;right:.9rem;bottom:1.1rem;z-index:5;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;
  color:var(--paper);opacity:0;transition:opacity .4s;
  font-variant-numeric:tabular-nums;
}
.pj-film-box:hover .pj-film-time,.pj-film.on .pj-film-time{opacity:.8}

/* le lien vers le site livré */
.pj-live{display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;
  padding-bottom:.22rem;border-bottom:1px solid currentColor;
  transition:gap .4s cubic-bezier(.16,1,.3,1),color .4s}
.pj-live:hover{gap:.95rem;color:var(--ocre)}


/* ── ajouts version multipage ─────────────────────────── */
.lang a:not(.on){text-decoration:none}
.work-name a,.offering-name a{color:inherit;text-decoration:none}
.offering-name a:hover{color:var(--gold)}
.kv-svc .pack{position:relative;top:auto}
.kv-inline a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.kv-more{margin-top:1.25rem}
/* bandeau cookies : Refuser et Accepter ont exactement le même poids */
.kv-cookie{position:fixed;right:var(--gut,1.25rem);bottom:1.25rem;left:var(--gut,1.25rem);z-index:9000;max-width:520px;margin-left:auto;
  background:var(--ink);color:var(--p3);padding:1.25rem 1.4rem 1.3rem;font-size:.8rem;line-height:1.7;
  border:1px solid rgba(214,191,160,.3);box-shadow:0 20px 45px rgba(44,26,14,.28);animation:fade .4s ease both}
.kv-cookie p{margin:0}
.kv-cookie a{color:var(--ocre);text-underline-offset:3px}
.kv-cookie__btns{display:flex;gap:.6rem;margin-top:1rem}
.kv-cookie__btn{flex:1;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1rem;border:1px solid rgba(214,191,160,.55);background:transparent;color:var(--p2);cursor:pointer;transition:border-color .2s,color .2s}
.kv-cookie__btn:hover,.kv-cookie__btn:focus-visible{border-color:var(--ocre);color:var(--ocre);outline:none}
@media(max-width:600px){.kv-cookie{bottom:.75rem;left:.75rem;right:.75rem}}