/* =========================================================
   NEKO — Section 01 : Hero
   NEKO = robotique + IA dans les objets du quotidien.
   Pas un projet de tirelire : OINK n'est qu'un objet parmi d'autres.

   DA : noir encre / blanc casse.
   Le ROUGE ne ment jamais — il ne signale QU'UNE DETTE.
   Donc : aucun rouge sur cette page, il n'y a rien a devoir ici.
   ========================================================= */

:root{
  --ink:        #08090b;   /* noir encre — fond */
  --ink-soft:   #14161a;
  --paper:      #f4f2ed;   /* blanc casse */
  --paper-dim:  rgba(244,242,237,.66);
  --paper-mute: rgba(244,242,237,.40);
  --line:       rgba(244,242,237,.14);

  --debt:       #ff3b23;   /* reserve : dette. inutilise ici. */
  --settled:    #35c46b;   /* reserve : payé. inutilise ici. */
  --warm:       #f0c48a;   /* la lumiere chaude des objets — sur fond sombre */
  --amber:      #a8620d;   /* la meme chaleur, lisible sur fond clair.
                              C'est l'accent neutre de la marque : il permet
                              de garder le rouge et le vert intacts. */

  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --hdr-h: 84px;
  --gut: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, PAS hidden : overflow-x:hidden cree un contexte de defilement
     qui empeche ScrollTrigger de poser ses pins. */
  overflow-x:clip;
}
img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* =========================================================
   01 — HERO (portage du composant Prisma)
   Video de fond, pastille de nav centree, titre geant en bas.
   Meme courbe que framer-motion : cubic-bezier(.16,1,.3,1).
   ========================================================= */

.ph{ height:100vh; height:100svh; width:100%; }

.ph__frame{
  position:relative; height:100%; width:100%;
  overflow:hidden;
  border-radius:16px;
}
@media (min-width:768px){ .ph__frame{ border-radius:32px; } }

.ph__video{
  position:absolute; inset:0;
  height:100%; width:100%; object-fit:cover;
}

/* grain : turbulence SVG, en overlay, comme le noise-overlay du composant */
.ph__noise{
  position:absolute; inset:0; pointer-events:none;
  opacity:.7; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.ph__grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.30) 0%, transparent 45%, rgba(0,0,0,.60) 100%);
}

/* --- nav --- */
.ph__nav{ position:absolute; left:50%; top:0; z-index:20; transform:translateX(-50%); }
.ph__navpill{
  display:flex; align-items:center; gap:12px;
  background:#000;
  /* la hauteur du lien porte la hauteur de la pastille : le rembourrage
     vertical vit sur le lien, pas sur la pastille, sinon la cible tactile
     ne fait que la hauteur du texte — 16px, invisible au doigt. */
  padding:0 16px;
  border-radius:0 0 16px 16px;
}
.ph__navpill a{
  display:inline-flex; align-items:center;
  min-height:32px;   /* = 8px + 16px + 8px : la pastille ne change pas de taille */
  font-size:10px; color:var(--paper-dim);
  transition:color .25s var(--ease);
  white-space:nowrap;
}
.ph__navpill a:hover{ color:var(--paper); }
@media (min-width:640px){ .ph__navpill{ gap:24px; } .ph__navpill a{ font-size:12px; } }

/* --- repli mobile : la pastille devient un bouton Menu ---
   Cinq liens a 10px dans une pastille de 340px ne se lisent pas et ne se
   visent pas au doigt. Sous 640px on garde exactement la meme forme, mais
   elle ne contient plus qu'une cible de 44px de haut. */
.ph__burger{
  display:none;
  align-items:center; gap:10px;
  background:none; border:0; padding:6px 2px;
  min-height:40px;   /* cible tactile : la pastille fait 44px de haut */
  color:var(--paper);
  font:inherit; font-size:13px; letter-spacing:.01em;
  cursor:pointer;
}
.ph__burgerBars{ display:block; width:18px; }
.ph__burgerBars i{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s var(--ease);
}
.ph__burgerBars i:first-child{ margin-bottom:5px; }
.ph__burger[aria-expanded="true"] .ph__burgerBars i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.ph__burger[aria-expanded="true"] .ph__burgerBars i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

@media (max-width:639px){
  .ph__navpill a{ display:none; }
  .ph__burger{ display:inline-flex; }
  .ph__navpill{ padding:2px 20px; border-radius:0 0 18px 18px; }
}

/* --- panneau plein ecran --- */
.navp{
  position:fixed; inset:0; z-index:60;
  display:grid; align-content:center;
  padding:0 var(--gut);
  background:var(--ink);
  opacity:0; visibility:hidden;
  transition:opacity .34s var(--ease), visibility .34s;
}
.navp.is-open{ opacity:1; visibility:visible; }

/* le bouton de fermeture reprend exactement la pastille du hero, a la
   meme place : rien ne saute a l'ouverture */
.navp__close{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px;
  background:#000; border:0;
  padding:8px 20px; min-height:44px;
  border-radius:0 0 18px 18px;
  color:var(--paper);
  font:inherit; font-size:13px;
  cursor:pointer;
}
.navp__close .ph__burgerBars i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.navp__close .ph__burgerBars i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.navp__list{ margin:0; padding:0; list-style:none; }
.navp__list li{ overflow:hidden; }
.navp__list a{
  display:block;
  padding:.16em 0;
  font-size:clamp(30px,9vw,44px);
  font-weight:600; letter-spacing:-.04em;
  color:var(--paper);
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.navp.is-open .navp__list a{ transform:none; }
.navp.is-open .navp__list li:nth-child(1) a{ transition-delay:.06s; }
.navp.is-open .navp__list li:nth-child(2) a{ transition-delay:.10s; }
.navp.is-open .navp__list li:nth-child(3) a{ transition-delay:.14s; }
.navp.is-open .navp__list li:nth-child(4) a{ transition-delay:.18s; }
.navp.is-open .navp__list li:nth-child(5) a{ transition-delay:.22s; }

/* au-dela de 640px le panneau n'a plus de raison d'exister */
@media (min-width:640px){ .navp{ display:none; } }

@media (min-width:768px){
  .ph__navpill{ gap:48px; padding:0 32px; border-radius:0 0 24px 24px; }
  .ph__navpill a{ min-height:34px; font-size:14px; }
}
@media (min-width:1024px){ .ph__navpill{ gap:56px; } }

/* Sans survol possible, la pastille est visee au doigt : entre 640px et
   le bureau (tablette, portable tactile) les liens passent a 44px. La
   pastille grandit avec eux, c'est le seul endroit ou elle le fait. */
@media (hover:none) and (min-width:640px){
  .ph__navpill a{ min-height:44px; }
}

/* --- contenu bas --- */
.ph__content{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 16px 8px;
}
@media (min-width:640px){ .ph__content{ padding-inline:24px; } }
@media (min-width:768px){ .ph__content{ padding-inline:40px; } }

.ph__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  align-items:end; gap:16px;
}

/* --- titre --- */
.ph__title{
  grid-column:span 12;
  margin:0;
  display:flex; flex-wrap:wrap;
  font-weight:500;
  line-height:.85;
  letter-spacing:-.07em;
  color:var(--paper);
  font-size:26vw;
}
@media (min-width:640px){ .ph__title{ font-size:25vw; } }
@media (min-width:1024px){ .ph__title{ grid-column:span 8; font-size:23vw; } }
@media (min-width:1536px){ .ph__title{ font-size:24vw; } }

/* chaque lettre monte separement : equivalent de WordsPullUp */
.ph__title .pull{
  display:inline-block; position:relative;
  will-change:transform,opacity;
}
.ph__last{ position:relative; }
.ph__ast{
  position:absolute; top:.65em; right:-.3em;
  font-size:.31em; font-style:normal;
}

/* --- colonne droite --- */
.ph__side{
  grid-column:span 12;
  display:flex; flex-direction:column; gap:20px;
  padding-bottom:24px;
}
@media (min-width:1024px){ .ph__side{ grid-column:span 4; padding-bottom:40px; } }

.ph__lede{
  margin:0;
  font-size:12px; line-height:1.2;
  color:var(--paper-dim);
}
@media (min-width:640px){ .ph__lede{ font-size:14px; } }
@media (min-width:768px){ .ph__lede{ font-size:16px; } }

.ph__btn{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper); color:#000;
  border-radius:999px;
  padding:4px 4px 4px 20px;
  font-size:14px; font-weight:500;
  transition:gap .3s var(--ease);
}
.ph__btn:hover{ gap:12px; }
@media (min-width:640px){ .ph__btn{ font-size:16px; } }

.ph__btnCircle{
  display:flex; align-items:center; justify-content:center;
  height:36px; width:36px; border-radius:999px;
  background:#000; color:var(--paper);
  transition:transform .3s var(--ease);
}
.ph__btn:hover .ph__btnCircle{ transform:scale(1.1); }
.ph__btnCircle svg{ height:16px; width:16px; }
@media (min-width:640px){ .ph__btnCircle{ height:40px; width:40px; } }

/* reveal : l'etat cache n'existe que si le JS l'a demande */
.bento.js-reveal .bento__h,
.bento.js-reveal .bento__sub,
.bento.js-reveal .bcard{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.bento.js-reveal .bento__h.is-in,
.bento.js-reveal .bento__sub.is-in,
.bento.js-reveal .bcard.is-in{
  opacity:1; transform:none;
}


/* ============ RESPONSIVE ============ */
/* ============ ACCESSIBILITE ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   02 — OBJECTS (portage du Bento Grid)
   Grille 6 colonnes x 2 rangees. Le bloc de texte remonte
   sur l'image et la floute derriere lui (backdrop-filter).
   ========================================================= */

.bento{
  background:var(--ink);
  padding:clamp(72px,12vh,128px) 0 clamp(48px,8vh,80px);
}
.bento__inner{
  max-width:1280px; margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  display:flex; flex-direction:column;
}

.bento__h{
  margin:0;
  font-family:var(--mono);
  font-size:clamp(28px,4vw,48px);
  font-weight:500; letter-spacing:-.03em;
  color:var(--paper);
}
/* le sous-titre se degrade du blanc vers le transparent, comme l'original */
.bento__sub{
  margin:8px 0 0;
  max-width:48rem;
  font-size:clamp(19px,2vw,24px); line-height:2rem;
  font-weight:500; letter-spacing:-.03em;
  background:linear-gradient(to bottom right, var(--paper), rgba(244,242,237,.40));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.bento__grid{
  margin-top:clamp(32px,5vh,64px);
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:1024px){
  .bento__grid{ grid-template-columns:repeat(6,1fr); grid-template-rows:auto auto; }
}

/* --- carte --- */
.bcard{
  position:relative;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-radius:8px;
  background:#000;
  border:1px solid rgba(255,255,255,.1);
  /* l'original a une lueur interne bleutee ; ici c'est l'ambre de la marque */
  box-shadow:0 -20px 80px -20px rgba(240,196,138,.13) inset,
             0 0 0 1px rgba(255,255,255,.06);
  transform:translateZ(0);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.bcard:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 -20px 90px -20px rgba(240,196,138,.28) inset,
             0 0 0 1px rgba(255,255,255,.10);
}

@media (min-width:1024px){
  .bcard{ grid-column:span 2; }
  .bcard--w{ grid-column:span 3; }
  .bcard--tl{ border-top-left-radius:32px; }
  .bcard--tr{ border-top-right-radius:32px; }
  .bcard--bl{ border-bottom-left-radius:32px; }
  .bcard--br{ border-bottom-right-radius:32px; }
}
@media (max-width:1023px){
  .bcard:first-child{ border-radius:32px 32px 8px 8px; }
  .bcard:last-child{ border-radius:8px 8px 32px 32px; }
}

.bcard__media{
  position:relative; height:30rem; flex:none;
  overflow:hidden;
}
.bcard__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transition:transform .9s var(--ease);
  will-change:transform;
}
.bcard:hover .bcard__media img{ transform:scale(1.045); }

/* le texte remonte sur l'image et la floute derriere lui */
.bcard__body{
  position:relative; z-index:20; isolation:isolate;
  margin-top:-110px; min-height:14rem;
  padding:40px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:linear-gradient(to top, rgba(0,0,0,.72) 30%, rgba(0,0,0,.34));
  color:var(--paper);
}
.bcard__eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--warm);
}
.bcard__title{
  margin:6px 0 0;
  font-size:clamp(20px,1.8vw,24px); line-height:2rem;
  font-weight:500; letter-spacing:-.03em;
  color:var(--paper);
}
.bcard__desc{
  margin:8px 0 0; max-width:600px;
  font-size:14px; line-height:1.6;
  color:rgba(244,242,237,.66);
}

@media (max-width:640px){
  .bcard__media{ height:22rem; }
  .bcard__body{ padding:24px; margin-top:-90px; min-height:12rem; }
}

/* reveal : l'etat cache n'existe que si le JS l'a demande */
.bento.js-reveal .bento__h,
.bento.js-reveal .bento__sub,
.bento.js-reveal .bcard{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.bento.js-reveal .bento__h.is-in,
.bento.js-reveal .bento__sub.is-in,
.bento.js-reveal .bcard.is-in{
  opacity:1; transform:none;
}


/* =========================================================
   04 — LAB
   Carte sombre, spotlight qui suit le curseur, scene Spline a droite.
   Le spotlight ne pose que --x / --y / --o : tout le rendu reste CSS,
   donc pas de layout recalcule au mousemove.
   ========================================================= */

.lab{
  padding:clamp(56px,10vh,140px) var(--gut);
  background:var(--ink);
}
.lab__inner{ max-width:1240px; margin:0 auto; }

.lab__card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:stretch;
  min-height:500px;
  border:1px solid var(--line); border-radius:16px;
  background:#000;
}
@media (min-width:768px){ .lab__card{ border-radius:32px; } }

/* --- spotlight --- */
.lab__spot{
  position:absolute; z-index:0; pointer-events:none;
  left:var(--x,50%); top:var(--y,0px);
  height:520px; width:520px; margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle at center,
              rgba(244,242,237,.22) 0%,
              rgba(240,196,138,.11) 42%,
              transparent 72%);
  filter:blur(26px);
  opacity:var(--o,0);
  transition:opacity .35s var(--ease);
}
/* sans survol possible (tactile), le halo reste pose en haut a gauche */
@media (hover:none){
  .lab__spot{ left:28%; top:0px; opacity:.85; }
}

/* --- colonne gauche --- */
.lab__text{
  position:relative; z-index:2;
  flex:1 1 50%; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:16px;
  padding:clamp(28px,4vw,52px);
}
.lab__eyebrow{
  margin:0;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm);
}
.lab__title{
  margin:0;
  font-size:clamp(30px,4.4vw,52px); line-height:1.04;
  font-weight:700; letter-spacing:-.02em;
  background:linear-gradient(180deg, #fbfaf7 0%, rgba(244,242,237,.42) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lab__desc{
  margin:0; max-width:46ch;
  font-size:clamp(14px,1.15vw,16px); line-height:1.55;
  color:var(--paper-dim);
}
.lab__cta{ margin-top:8px; }

/* --- colonne droite : la scene --- */
.lab__scene{
  position:relative; z-index:1;
  flex:1 1 50%; min-width:0; min-height:320px;
}
.lab__canvas{
  position:absolute; inset:0;
  height:100%; width:100%;
  opacity:0; transition:opacity .6s var(--ease);
}
.lab__scene.is-loaded .lab__canvas{ opacity:1; }

/* reduced-motion ou viewer injoignable : la scene disparait, le texte
   reprend toute la carte plutot que de garder un trou noir. */
.lab__scene.is-off,
.lab__scene.is-failed{ display:none; }

.lab__loader{
  position:absolute; left:50%; top:50%;
  height:28px; width:28px; margin:-14px 0 0 -14px;
  border-radius:50%;
  border:1.5px solid var(--line);
  border-top-color:var(--paper-mute);
  animation:labSpin 1s linear infinite;
}
.lab__scene.is-loaded .lab__loader{ display:none; }
@keyframes labSpin{ to{ transform:rotate(360deg); } }

@media (max-width:860px){
  .lab__card{ flex-direction:column; min-height:0; }
  .lab__scene{ min-height:min(62vw,340px); }
}

/* =========================================================
   05 — FOOTER (rideau)
   .ftr occupe une hauteur d'ecran dans le flux et porte le clip-path.
   .ftr__panel est fixe au viewport : il ne bouge pas, c'est la fenetre
   qui descend dessus. Le clip-path ne creant pas de bloc conteneur pour
   un descendant fixed, le panneau se decouvre par le bas.

   Rappel DA : aucun rouge ici. Le coeur du composant d'origine passe
   sur l'asterisque ambre du hero — le rouge ne signale QU'UNE DETTE.
   ========================================================= */

.ftr{
  position:relative;
  height:100vh; height:100svh; width:100%;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.ftr__panel{
  position:fixed; bottom:0; left:0;
  display:flex; flex-direction:column; justify-content:space-between;
  height:100vh; height:100svh; width:100%;
  overflow:hidden;
  background:var(--ink); color:var(--paper);
}

/* --- fonds --- */
.ftr__aurora{
  position:absolute; left:50%; top:50%; z-index:0;
  height:60vh; width:80vw;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
              rgba(240,196,138,.16) 0%,
              rgba(244,242,237,.07) 40%,
              transparent 70%);
  filter:blur(80px);
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:ftrBreathe 8s ease-in-out infinite alternate;
}
@keyframes ftrBreathe{
  from{ transform:translate(-50%,-50%) scale(1);   opacity:.6; }
  to  { transform:translate(-50%,-50%) scale(1.1); opacity:1;  }
}

.ftr__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right,  rgba(244,242,237,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,242,237,.045) 1px, transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.ftr__giant{
  position:absolute; left:50%; bottom:-5vh; z-index:0;
  transform:translateX(-50%);
  font-size:26vw; line-height:.75; font-weight:800;
  letter-spacing:-.05em; white-space:nowrap;
  user-select:none; pointer-events:none;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,242,237,.07);
  background:linear-gradient(180deg, rgba(244,242,237,.12) 0%, transparent 60%);
  -webkit-background-clip:text; background-clip:text;
}

/* --- bandeau defilant --- */
.ftr__marquee{
  position:absolute; left:0; top:clamp(40px,7vh,88px); z-index:10;
  width:100%; overflow:hidden;
  padding:14px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(8,9,11,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8);
  transform:rotate(-2deg) scale(1.1);
}
.ftr__track{ display:flex; width:max-content; animation:ftrScroll 40s linear infinite; }
@keyframes ftrScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.ftr__set{
  display:flex; align-items:center; gap:clamp(20px,3vw,48px);
  padding:0 clamp(10px,1.5vw,24px);
  font-family:var(--mono);
  font-size:clamp(10px,.85vw,13px); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper-mute); white-space:nowrap;
}
.ftr__set i{ font-style:normal; color:var(--warm); opacity:.6; }

/* --- centre --- */
.ftr__center{
  position:relative; z-index:10;
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(28px,5vh,52px);
  width:100%; max-width:1000px; margin:0 auto;
  padding:clamp(96px,16vh,180px) var(--gut) 0;
}

.ftr__h{
  margin:0; text-align:center;
  font-size:clamp(34px,7.4vw,84px); line-height:1;
  font-weight:800; letter-spacing:-.035em;
  background:linear-gradient(180deg, var(--paper) 0%, rgba(244,242,237,.38) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 22px rgba(244,242,237,.12));
}

.ftr__links{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.ftr__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.ftr__row--sm{ gap:10px; margin-top:4px; }

/* --- pastilles de verre --- */
.ftr__pill,
.ftr__badge,
.ftr__top{
  border:1px solid rgba(244,242,237,.09);
  border-radius:999px;
  background:linear-gradient(145deg, rgba(244,242,237,.035) 0%, rgba(244,242,237,.012) 100%);
  box-shadow:
    0 10px 30px -10px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(244,242,237,.10),
    inset 0 -1px 2px rgba(8,9,11,.8);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}

.ftr__pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px;
  font-size:13px; font-weight:500;
  color:var(--paper-dim);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), color .4s var(--ease);
}
.ftr__pill--lg{ padding:18px 36px; font-size:15px; font-weight:600; color:var(--paper); }
.ftr__pill svg{ height:20px; width:20px; color:var(--paper-mute); transition:color .4s var(--ease); }

.ftr__pill:hover{
  color:var(--paper);
  border-color:rgba(244,242,237,.22);
  background:linear-gradient(145deg, rgba(244,242,237,.085) 0%, rgba(244,242,237,.022) 100%);
  box-shadow:0 20px 40px -10px rgba(0,0,0,.7), inset 0 1px 1px rgba(244,242,237,.20);
}
.ftr__pill:hover svg{ color:var(--warm); }

/* --- barre basse --- */
.ftr__bottom{
  position:relative; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px;
  width:100%;
  padding:0 var(--gut) clamp(20px,4vh,36px);
}
.ftr__copy{
  margin:0; order:2;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mute);
}
.ftr__badge{
  order:1;
  display:inline-flex; align-items:center; gap:7px;
  margin:0; padding:11px 22px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mute); cursor:default;
}
.ftr__badge b{ color:var(--paper); font-weight:700; letter-spacing:.04em; }

/* l'asterisque du hero, en lieu et place du coeur rouge du composant */
.ftr__ast{
  font-style:normal; font-size:15px; line-height:0; color:var(--warm);
  animation:ftrPulse 2s cubic-bezier(.25,1,.5,1) infinite;
}
@keyframes ftrPulse{
  0%,100%{ transform:scale(1);   filter:drop-shadow(0 0 5px rgba(240,196,138,.5)); }
  15%,45%{ transform:scale(1.25); filter:drop-shadow(0 0 10px rgba(240,196,138,.8)); }
  30%    { transform:scale(1); }
}

.ftr__top{
  order:3;
  display:flex; align-items:center; justify-content:center;
  height:48px; width:48px;
  color:var(--paper-mute);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.ftr__top:hover{ color:var(--paper); border-color:rgba(244,242,237,.22); }
.ftr__top svg{ height:20px; width:20px; transition:transform .3s var(--ease); }
.ftr__top:hover svg{ transform:translateY(-5px); }

@media (min-width:768px){
  .ftr__copy{ order:1; font-size:11px; }
  .ftr__badge{ order:2; font-size:11px; }
}
@media (max-width:640px){
  .ftr__bottom{ justify-content:center; text-align:center; }
  .ftr__giant{ font-size:40vw; }
  .ftr__pill--lg{ padding:15px 26px; font-size:14px; }
}

/* --- reveal GSAP : l'etat cache n'existe que si le JS l'a arme --- */
.ftr.js-reveal .ftr__giant,
.ftr.js-reveal .ftr__h,
.ftr.js-reveal .ftr__links{ opacity:0; }

/* ============ ACCESSIBILITE ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =========================================================
   03 — BECOMING
   Sequence d'images scrubee au scroll : le texte s'allume mot
   a mot, l'objet arrive par-dessus, le texte s'efface et la
   sequence continue pendant que le fond passe du noir a
   l'ambre. Tout est pilote par le JS, donc l'etat de repos
   ci-dessous reste celui d'une page lisible si le script ne
   part jamais.
   ========================================================= */

.mp{ background:var(--ink); }

.mp__stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--ink);
  color:var(--paper);
}

/* halo ambre derriere l'objet, il n'existe que sur le fond sombre */
.mp__glow{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(42% 42% at 50% 50%,
              rgba(240,162,74,.34) 0%, rgba(240,162,74,0) 70%);
}

/* ---- la phrase qui accompagne l'objet ---- */
.mp__line{
  /* gauche et droite calees : sans ca la phrase prend sa largeur
     naturelle et deborde du cadre sur les petits ecrans */
  position:absolute; left:0; right:0;
  z-index:3;
  margin:0 auto;
  box-sizing:border-box;
  width:min(1040px,100%);
  padding:0 var(--gut);
  text-align:center;
  letter-spacing:-.035em;
  line-height:1.12;
  font-weight:600;
  pointer-events:none;
}
.mp__line--b{
  /* en bas de cadre : l'objet occupe le centre et la mangerait */
  bottom:clamp(40px,9vh,96px);
  font-size:clamp(21px,2.5vw,36px);
  color:var(--ink);
  opacity:0;
}

/* ---- l'objet ---- */
.mp__object{
  position:relative;
  /* plafond releve : sur un tres grand ecran l'objet paraissait perdu */
  width:min(76vmin,820px);
  aspect-ratio:1;
  display:grid; place-items:center;
}
.mp__canvas{
  position:relative; z-index:2;
  width:100%; height:100%;
  display:block;
  opacity:0;
}
/* Le cercle est cale sur son centre, pas sur ses quatre cotes : avec
   inset plus width/height, la largeur et la hauteur ne se resolvent pas
   de la meme facon et le cercle sort ovale et decale. L'echelle passe
   par une variable pour laisser la place a la rotation dans transform. */
.mp__ring{
  position:absolute;
  left:50%; top:50%;
  z-index:1;
  width:118%; height:118%;
  max-width:none;                 /* le reset global clampe les svg a 100% */
  color:rgba(8,9,11,.34);
  opacity:0;
  transform:translate(-50%,-50%) scale(var(--ring-s,.88));
}
.mp__ring circle{
  transform-box:view-box;
  transform-origin:50% 50%;
  animation:mpRingSpin 48s linear infinite;
}
@keyframes mpRingSpin{ to{ transform:rotate(360deg); } }

/* ---- les quatre mentions ---- */
.mp__labels{
  position:absolute; inset:0;
  z-index:3;
  margin:0; padding:clamp(22px,5vh,64px) var(--gut);
  list-style:none;
  pointer-events:none;
}
.mp__lab{
  position:absolute;
  width:min(280px,31vw);
  opacity:0;
  transform:translateY(10px);
  color:var(--ink);
}
/* au-dela de 1500px, les mentions se tiennent dans une bande centree :
   collees aux bords d'un tres grand ecran, elles n'appartiennent plus a
   la meme image que l'objet */
.mp__lab{ --side:max(var(--gut), calc((100vw - 1500px) / 2)); }
.mp__lab--tl{ top:19%;  left:var(--side); }
.mp__lab--tr{ top:19%;  right:var(--side); text-align:right; }
.mp__lab--bl{ bottom:19%; left:var(--side); }
.mp__lab--br{ bottom:19%; right:var(--side); text-align:right; }

.mp__labN{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em;
  opacity:.45;
}
.mp__labT{
  margin:0 0 6px;
  font-size:clamp(17px,1.5vw,21px);
  font-weight:600; letter-spacing:-.02em;
}
.mp__labD{
  margin:0;
  font-size:clamp(13px,1.1vw,16px);
  line-height:1.5;
  opacity:.66;
}

/* Sous 900px l'objet et les quatre mentions ne tiennent plus sur la
   meme hauteur : on reserve le bas du cadre aux mentions et on remonte
   l'objet en jouant sur le padding de la zone centree. */
@media (max-width:900px){
  .mp__stage{ padding-bottom:42vh; }
  .mp__object{ width:min(70vmin,360px); }

  .mp__line--b{ bottom:44vh; }

  .mp__labels{
    inset:auto 0 0 0;
    height:42vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-content:end;
    gap:clamp(14px,2.5vh,22px) var(--gut);
    padding:0 var(--gut) clamp(20px,4vh,40px);
  }
  .mp__lab{
    position:static;
    width:auto; text-align:left;
    margin:0;
  }
  .mp__lab--tr, .mp__lab--br{ text-align:left; }
  .mp__labN{ margin-bottom:6px; }
}

/* sans JS, sans GSAP, ou en mouvement reduit : tout est lisible d'emblee */
.no-anim .mp__stage,
.mp__stage.is-static{
  background:var(--paper); color:var(--ink);
}
.no-anim .mp__line--b, .mp__stage.is-static .mp__line--b{ position:static; opacity:1; }
.no-anim .mp__canvas, .mp__stage.is-static .mp__canvas{ opacity:1; }
.no-anim .mp__lab,    .mp__stage.is-static .mp__lab{ opacity:1; transform:none; }

/* le texte de vision vit maintenant dans la 03 fusionnee : il s'allume
   mot a mot, puis l'objet lui passe par-dessus et il s'efface */
.mp__vision{
  position:absolute; left:0; right:0;
  z-index:1;
  margin:0 auto;
  box-sizing:border-box;
  width:min(1150px,100%);
  padding:0 var(--gut);
  text-align:center;
  font-size:clamp(30px,4.6vw,66px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.12;
  color:rgba(244,242,237,.20);
  pointer-events:none;
}
.mp__vision em{ font-style:normal; }
.mp__vision .w{
  display:inline-block;
  color:rgba(244,242,237,.20);
  will-change:color;
}

@media (max-width:900px){
  .mp__vision{ top:12vh; font-size:clamp(24px,5.6vw,40px); }
}

/* sans JS ou en mouvement reduit, le texte reste lisible d'emblee */
.no-anim .mp__vision, .no-anim .mp__vision .w,
.mp__stage.is-static .mp__vision, .mp__stage.is-static .mp__vision .w{
  position:static; color:var(--ink);
}
.no-anim .mp__vision em, .mp__stage.is-static .mp__vision em{ color:var(--amber); }

/* Ecran court et large, typiquement un telephone couche : la reserve de
   42vh pour les mentions ne laisse plus de place a l'objet. On repasse
   les mentions sur les cotes et on reduit l'objet. */
@media (max-width:900px) and (max-height:560px){
  .mp__stage{ padding-bottom:0; }
  .mp__object{ width:min(76vmin,260px); }
  .mp__vision{ top:auto; font-size:clamp(19px,3.4vw,28px); }
  .mp__line--b{ bottom:clamp(12px,4vh,28px); font-size:clamp(15px,2.2vw,20px); }
  .mp__labels{
    inset:0; height:auto;
    display:block;
    padding:clamp(12px,3vh,24px) var(--gut);
  }
  .mp__lab{
    position:absolute;
    width:min(230px,27vw);
  }
  .mp__lab--tl{ top:12%;  left:var(--gut); text-align:left; }
  .mp__lab--tr{ top:12%;  right:var(--gut); text-align:right; }
  .mp__lab--bl{ bottom:12%; left:var(--gut); text-align:left; }
  .mp__lab--br{ bottom:12%; right:var(--gut); text-align:right; }
  .mp__labN{ margin-bottom:3px; font-size:10px; }
  .mp__labT{ margin-bottom:3px; font-size:14px; }
  .mp__labD{ font-size:11px; line-height:1.4; }
}