/* Transitions entre pages, sans une ligne de JavaScript.
   Ignoré par les navigateurs qui ne le gèrent pas encore. */
@view-transition { navigation: auto; }

/* ═══════════════════════════════════════════════════════════════
   AXIVIZ — système de design
   Une seule feuille pour tout le site : mise en cache une fois,
   réutilisée sur chaque page.
   ═══════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées ──────────────────────────────────────
   Deux fichiers variables sous-ensemblés au latin : 68 ko au total
   couvrent toutes les graisses. Aucune requête vers Google.        */
@font-face{
  font-family:'Raleway';
  src:url('fonts/raleway-var.woff2') format('woff2-variations');
  font-weight:100 400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cormorant';
  src:url('fonts/cormorant-italic-var.woff2') format('woff2-variations');
  font-weight:300 400;
  font-style:italic;
  font-display:swap;
}

:root{
  --bg-0:#0D0D10; --bg-1:#141417; --bg-2:#1C1C1F;
  --ink:#EAEAED;  --ink-2:#9A9AA2; --ink-3:#5A5A60;
  --gold:#C8A96A; --gold-dim:#9A7C45; --line:#2E2E33;
  --fd:'Raleway',system-ui,sans-serif;
  --fs:'Cormorant',Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Fondu enchaîné : courbe symétrique, sans à-coup au départ. */
  --fondu:cubic-bezier(.45,0,.55,1);
  --gut:80px; --maxw:1380px; --nav:76px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg-0);color:var(--ink);font-family:var(--fd);font-weight:300;
  font-size:14px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold);color:var(--bg-0)}
:focus-visible{outline:.5px solid var(--gold);outline-offset:4px}

/* Sections hors écran : le navigateur n'en calcule pas la mise en page. */
.defer{content-visibility:auto;contain-intrinsic-size:auto 800px}

/* ── Mise en page ── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.band{padding:130px 0}
.band--alt{background:var(--bg-1)}
.hr{border:none;border-top:.5px solid var(--line)}

/* ── Typographie ── */
.lbl{font-size:9px;font-weight:400;letter-spacing:.45em;text-transform:uppercase;color:var(--gold)}
.cap{font-size:9px;font-weight:300;letter-spacing:.45em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow{display:flex;align-items:center;gap:18px;margin-bottom:36px}
.eyebrow::before{content:'';width:34px;height:.5px;background:var(--gold-dim);flex:none}
.h1{font-weight:100;font-size:clamp(32px,5.2vw,66px);line-height:1.1;letter-spacing:.17em;text-transform:uppercase}
.h1--mark{font-size:clamp(44px,9vw,132px);letter-spacing:.30em}
.h2{font-weight:200;font-size:clamp(22px,2.8vw,36px);line-height:1.3;letter-spacing:.12em;text-transform:uppercase}
.h3{font-weight:300;font-size:12px;letter-spacing:.25em;text-transform:uppercase}
.serif{font-family:var(--fs);font-weight:300;font-style:italic;
  font-size:clamp(20px,2.4vw,32px);line-height:1.45;letter-spacing:0;text-transform:none}
.lede{font-size:15px;color:var(--ink-2);max-width:58ch}
p.body{color:var(--ink-2);max-width:62ch}
p.body+p.body{margin-top:20px}

/* ── Flèche dessinée ──────────────────────────────────────────────
   Raleway ne contient pas le caractère →. On le trace en CSS pour
   éviter un remplacement par une police système.                    */
.arw{position:relative;display:inline-block;width:22px;height:.5px;background:currentColor;
  transition:width .8s var(--ease)}
.arw::after{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;
  border-top:.5px solid currentColor;border-right:.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
a:hover>.arw,button:hover>.arw{width:32px}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;gap:16px;font-size:10px;font-weight:300;
  letter-spacing:.45em;text-transform:uppercase;padding:18px 36px;
  transition:background .8s var(--ease),color .8s var(--ease),border-color .8s var(--ease)}
.btn--solid{background:var(--ink);color:var(--bg-0)}
.btn--solid:hover{background:var(--gold);color:var(--bg-0)}
.btn--ghost{border:.5px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--text{padding:0;color:var(--ink-2)}
.btn--text:hover{color:var(--gold)}

/* ── Navigation ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav);display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--gut);background:transparent;
  border-bottom:.5px solid transparent;
  transition:background .6s var(--ease),border-color .6s var(--ease)}
.nav.on{background:rgba(13,13,16,.90);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
/* Un élément doté de backdrop-filter devient le repère des enfants
   en position fixe : le panneau de menu se serait replié sur la
   hauteur de la barre au lieu de couvrir l'écran. */
.nav.open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent}
/* Le logo est un élément flex : sans flex:none, il se laisse écraser
   quand la barre manque de place — c'est ce qui le faisait disparaître
   sur téléphone. */
.brand{display:flex;align-items:center;flex:none;position:relative;z-index:110;line-height:0}
/* max-width:none annule la règle globale img{max-width:100%}, qui
   pouvait comprimer le logo quand la barre manquait de place. */
.nav__logo{height:26px;width:auto;max-width:none;min-width:1px;display:block}
/* Repli si le fichier ne se charge pas : le nom en toutes lettres. */
.brand__mot{display:none;font-weight:200;font-size:15px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.brand--repli .nav__logo{display:none}
.brand--repli .brand__mot{display:block}

/* Bouton de menu, affiché sur petit écran seulement. */
.burger{display:none;flex:none;width:34px;height:34px;position:relative;z-index:110}
.burger i{position:absolute;left:5px;right:5px;height:.5px;background:var(--ink);
  transition:transform .5s var(--ease),opacity .4s var(--ease)}
.burger i:nth-child(1){top:12px}
.burger i:nth-child(2){top:17px}
.burger i:nth-child(3){top:22px}
.nav.open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav__links{display:flex;align-items:center;gap:38px}
.nav__links a{font-size:10px;font-weight:300;letter-spacing:.30em;text-transform:uppercase;
  color:var(--ink-2);transition:color .6s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current]{color:var(--gold)}

/* ── Bandeaux d'ouverture ── */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.hero--short{height:74vh;height:74svh;min-height:460px}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--bg-2)}
/* Les images du bandeau se superposent en fondu. La hauteur dépasse
   de 10 % pour laisser jouer le parallaxe. */
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media>img{position:absolute;top:-5%;left:0;width:100%;height:110%;object-fit:cover;
  opacity:0;transform-origin:50% 50%;
  transition:opacity 1.6s var(--fondu);
  will-change:opacity,transform}
.hero__media>img.on{opacity:1}
.hero__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(13,13,16,.62) 0%,rgba(13,13,16,.25) 40%,rgba(13,13,16,.94) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding-bottom:86px}
.hero .serif{margin-top:26px;max-width:24ch}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}
.scroll{position:absolute;right:var(--gut);bottom:44px;z-index:2;display:flex;align-items:center;gap:16px}
.scroll i{display:block;width:64px;height:.5px;background:var(--gold-dim);
  animation:sc 3.4s var(--ease) infinite;transform-origin:left}
@keyframes sc{0%,100%{transform:scaleX(.15);opacity:.5}50%{transform:scaleX(1);opacity:1}}

/* ── Bloc bilingue ── */
.bi{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding:120px 0}
.bi h2{font-weight:200;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.bi .serif{color:var(--ink-2);font-size:clamp(19px,2.1vw,27px)}

/* ── Dérive lente des images de bandeau ─────────────────────────
   Une ANIMATION, et non une transition : le fondu d'opacité et le
   mouvement deviennent deux mécanismes séparés, qui ne peuvent plus
   s'annuler l'un l'autre. Les quatre valeurs sont posées en CSS par
   le script, ce qui rend chaque passage différent.               */
@keyframes axDerive{
  from{transform:scale(var(--z0,1))    translate(0%,0%)}
  to  {transform:scale(var(--z1,1.09)) translate(var(--dx,0%),var(--dy,0%))}
}
.axDerive{animation:axDerive var(--dur,7s) linear forwards}
@media (prefers-reduced-motion:reduce){ .axDerive{animation:none} }

/* ── Images ── */
.frame{position:relative;overflow:hidden;background:var(--bg-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.par{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--bg-2)}
/* Superposées, pour permettre le fondu enchaîné. La hauteur dépasse
   de 12 % : c'est la marge dans laquelle joue le parallaxe. */
.par>img{position:absolute;top:-6%;left:0;width:100%;height:112%;object-fit:cover;
  opacity:0;transform-origin:50% 50%;
  transition:opacity 1.6s var(--fondu);
  will-change:opacity,transform}
.par>img.on{opacity:.8}
.figcap{margin-top:14px}

/* ── Mosaïque d'images ── */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.mosaic figure{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);cursor:pointer}
.mosaic img{width:100%;height:100%;object-fit:cover;opacity:.8;
  transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.mosaic figure:hover img{opacity:1;transform:scale(1.04)}

/* ── Cartes de rubrique ── */
.routes{display:grid;grid-template-columns:repeat(4,1fr);border-top:.5px solid var(--line)}
.route{padding:44px 36px 44px 0;border-right:.5px solid var(--line);border-bottom:.5px solid var(--line);
  display:flex;flex-direction:column;gap:14px;transition:background .8s var(--ease)}
.route:last-child{border-right:none;padding-right:0}
.route:not(:first-child){padding-left:36px}
.route:hover{background:var(--bg-1)}
.route h3{font-weight:200;font-size:17px;letter-spacing:.16em;text-transform:uppercase}
.route p{color:var(--ink-2);font-size:13.5px;flex:1}
.route .arw{color:var(--gold)}

/* ── Lignes numérotées ── */
.rows{border-top:.5px solid var(--line)}
.row{display:grid;grid-template-columns:96px 1fr 1.2fr;gap:40px;padding:40px 0;
  border-bottom:.5px solid var(--line);align-items:baseline;transition:background .8s var(--ease)}
.row:hover{background:rgba(200,169,106,.03)}
.row .i{font-size:9px;letter-spacing:.45em;text-transform:uppercase;color:var(--gold-dim)}
.row p{color:var(--ink-2);font-size:13.5px;max-width:54ch}

/* ── Bloc contact et pied ── */
.contact{padding:0 var(--gut) 60px}
.contact__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:.5px solid var(--line)}
.contact__in>div{display:grid;gap:10px;padding:26px 40px;border-right:.5px solid var(--line)}
.contact__in>div:first-child{padding-left:0}
.contact__in>div:last-child{border-right:none;padding-right:0}
.contact__in a{font-weight:300;font-size:14px;letter-spacing:.04em;transition:color .6s var(--ease)}
.contact__in a:hover{color:var(--gold)}
.foot{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:.5px solid var(--line);
  display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.foot nav{display:flex;gap:28px}

/* ── Visualiseur ── */
.lb{position:fixed;inset:0;z-index:300;background:rgba(13,13,16,.985);display:flex;flex-direction:column;
  opacity:0;transition:opacity .45s var(--ease)}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:20px var(--gut);border-bottom:.5px solid var(--line)}
.lb__id{display:flex;align-items:baseline;gap:20px;min-width:0}
.lb__ttl{font-size:13px;font-weight:200;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb__ctrl{display:flex;align-items:center;gap:6px;flex:none}
.lb__ctrl a{padding:0 20px 0 4px;transition:color .6s var(--ease)}
.lb__ctrl a:hover{color:var(--gold)}
.lb__ctrl button{width:44px;height:44px;font-size:22px;font-weight:200;line-height:1;color:var(--ink-2);
  border:.5px solid transparent;transition:color .6s var(--ease),border-color .6s var(--ease)}
.lb__ctrl button:hover{color:var(--gold);border-color:var(--line)}
.lb__stage{flex:1;display:flex;align-items:center;justify-content:center;padding:28px var(--gut);min-height:0}
.lb__stage img{width:auto;height:100%;max-width:100%;object-fit:contain;opacity:0;
  transition:opacity .4s var(--ease)}
.lb__stage img.ready{opacity:1}
.lb__strip{display:flex;gap:2px;padding:0 var(--gut) 22px;overflow-x:auto;flex:none;scrollbar-width:thin}
.lb__strip img{width:104px;height:60px;flex:none;opacity:.36;cursor:pointer;object-fit:cover;
  transition:opacity .5s var(--ease)}
.lb__strip img:hover{opacity:.75}
.lb__strip img.on{opacity:1;outline:.5px solid var(--gold);outline-offset:-1px}

/* ── Révélation ── */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ── Responsive ── */
@media (max-width:1200px){ :root{--gut:44px} .mosaic{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){
  :root{--gut:22px}
  .band{padding:88px 0}
  /* Toutes les pages sont accessibles, dans un panneau plein écran. */
  .burger{display:block}
  .nav__logo{height:22px}
  .brand__mot{font-size:13px;letter-spacing:.34em}
  .nav__links{position:fixed;inset:0;z-index:105;
    background:rgba(13,13,16,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0;padding:0 var(--gut);
    opacity:0;visibility:hidden;
    transition:opacity .5s var(--ease),visibility .5s var(--ease)}
  .nav.open .nav__links{opacity:1;visibility:visible}
  .nav__links a{width:100%;padding:20px 0;font-size:14px;letter-spacing:.34em;
    border-bottom:.5px solid var(--line)}
  .nav__links a:last-child{border-bottom:none}
  .nav__links a[aria-current]{color:var(--gold)}
  .bi{grid-template-columns:1fr;gap:48px;padding:80px 0}
  .routes{grid-template-columns:1fr}
  .route{border-right:none;padding:34px 0 !important}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .par{aspect-ratio:4/3}
  .hero__in{padding-bottom:64px}
  .scroll{display:none}
  .contact__in{grid-template-columns:1fr}
  .contact__in>div{padding:22px 0 !important;border-right:none;border-bottom:.5px solid var(--line)}
  .contact__in>div:last-child{border-bottom:none}
  .lb__bar{padding:14px 22px}
  .lb__ctrl a{display:none}
  .lb__stage{padding:14px}
  .lb__strip{padding:0 22px 16px}
  .lb__strip img{width:76px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  html{scroll-behavior:auto}
}