/* ============================================================
   NEY'KRÉA — couche expérience premium
   S'ajoute par-dessus styles.css. Charte inchangée : crème / doré / encre.
   ============================================================ */

/* ---------- 1. LOADER CINÉMA ---------- */
#loader{position:fixed;inset:0;z-index:9999;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px}
#loader .ld-name{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2rem,7vw,4.4rem);color:var(--cream);letter-spacing:.02em;display:flex;overflow:hidden}
#loader .ld-name span{display:inline-block;transform:translateY(110%);white-space:pre}
#loader .ld-count{font-family:'Inter';font-weight:500;font-size:.78rem;letter-spacing:.3em;color:var(--gold-l);opacity:.85}
#loader .ld-bar{width:min(240px,50vw);height:1px;background:rgba(214,169,104,.25);position:relative;overflow:hidden}
#loader .ld-bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
#curtain{position:fixed;inset:0;z-index:9998;background:var(--cream-l);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
body.is-loading{overflow:hidden}

/* ---------- 2. CURSEUR CUSTOM ---------- */
/* le curseur natif doit disparaitre, sinon on en voit DEUX */
@media (hover:hover) and (min-width:861px){html.nk-cursor,html.nk-cursor *{cursor:none!important}}
#cur-dot,#cur-ring{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
#cur-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px}
#cur-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.6);margin:-19px 0 0 -19px;transition:width .3s,height .3s,margin .3s,border-color .3s}
#cur-ring.grow{width:74px;height:74px;margin:-37px 0 0 -37px;border-color:rgba(255,255,255,.95)}
@media (hover:none),(max-width:860px){#cur-dot,#cur-ring{display:none}#grain{display:none}}

/* ---------- 3. GRAIN DE FILM ----------
   En data-URI plutôt qu'en <svg> inline : un SVG remplacé sans viewBox se
   dimensionne à 300x150 et laisse un rectangle parasite en haut à gauche. */
#grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat}

/* ---------- 4. RÉVÉLATIONS ---------- */
/* padding-bottom : la cursive Mea Culpa a des jambages qui dépassent la line-box,
   sans marge le masque les coupe. Le décalage négatif compense visuellement. */
/* ⚠️ ROBUSTESSE : l'état par défaut est VISIBLE. C'est premium.js qui masque
   juste avant d'animer, et seulement si GSAP a bien chargé. Si le JS échoue,
   le contenu reste lisible au lieu de disparaître. */
.line-mask{overflow:hidden;display:block;padding-bottom:.22em;margin-bottom:-.22em}
.line-mask>*{display:block}
h1.line-mask,h2.line-mask{line-height:1.16}
.hero h1 .script,h2 .script{line-height:.9;display:inline-block;vertical-align:baseline}

/* libellé des emplacements photo : discret, en bas, jamais par-dessus le texte */
.ph.img-ph{align-items:flex-end!important;justify-content:flex-start!important}
.hero .ph.img-ph span,.ph.img-ph span{position:absolute;left:16px;bottom:14px;font-size:.6rem;letter-spacing:.14em;background:rgba(0,0,0,.4);padding:5px 10px;border-radius:6px;opacity:.75}
.port-card .ph span{position:absolute;left:14px;bottom:12px;font-size:.58rem;background:rgba(0,0,0,.35);padding:4px 9px;border-radius:6px;opacity:.7}
/* idem : visibles par défaut, masqués par le JS uniquement si GSAP répond */
.fade-up,.stagger>*{opacity:1}

/* ---------- 5. LE TRANSFERT — concept signature ---------- */
/* Un support vierge reçoit son marquage au scroll : c'est le geste du métier. */
#transfert{background:var(--black);color:var(--cream);padding:0;overflow:hidden}
#transfert .tf-stage{height:100vh;padding-top:82px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative}
#transfert .tf-inner{width:min(1180px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
#transfert{--pass:1}
#transfert[data-tech]{}   /* pilote par le JS */   /* valeur par defaut : tout est visible si le JS ne tourne pas */
#transfert .tf-visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
#transfert .tf-shirt{width:min(430px,80%);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
#transfert .tf-shirt .body{fill:#F3EEE7}
#transfert .tf-shirt .fold{stroke:rgba(0,0,0,.09);stroke-width:1.4;fill:none}
/* le marquage : révélé par clip-path piloté au scroll */
#transfert .tf-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* le marquage se devoile SOUS la barre : une seule variable pilote les deux,
   la causalite devient visible (avant : fondu uniforme, sans lien avec la presse) */
#transfert .tf-mark img{width:min(150px,26%);height:auto;opacity:1;
  clip-path:inset(calc(100% - var(--pass) * 100%) 0 0 0)}
/* la barre de chaleur qui balaie */
/* LE PEELING — on decolle le film, le motif reste sur le textile.
   C'est le geste que tout le monde reconnait du DTF, bien plus juste
   qu'une barre lumineuse qui balaie. Une seule variable (--pass) pilote
   le retrait du film ET l'apparition du motif : la causalite est visible. */
#transfert .tf-film{position:absolute;left:50%;top:50%;width:min(230px,40%);height:min(190px,33%);
  transform:translate(-50%,-50%) translateY(-6%);pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(214,169,104,.07) 45%,rgba(255,255,255,.13));
  border:1px solid rgba(255,255,255,.22);border-radius:2px;
  backdrop-filter:blur(.6px) saturate(.72);
  clip-path:inset(0 0 calc(var(--pass,0) * 100%) 0);
  box-shadow:0 4px 16px rgba(0,0,0,.22) inset}
/* le bord qui se souleve : un pli clair, une ombre portee dessous */
#transfert .tf-film i{position:absolute;left:-3%;right:-3%;
  bottom:calc(var(--pass,0) * 100%);height:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,241,214,.55) 45%,transparent);
  border-radius:2px;filter:blur(.3px);
  box-shadow:0 7px 16px rgba(0,0,0,.45);opacity:calc(1 - var(--pass,0) * .15)}
@media(max-width:980px){#transfert .tf-film{display:none}}
  background:linear-gradient(90deg,transparent,#FFD9A0,var(--gold-l),#FFD9A0,transparent);
  box-shadow:0 0 22px 6px rgba(214,169,104,.45);opacity:0;filter:blur(.5px)}
#transfert .tf-copy .eyebrow{color:var(--gold-l)}
#transfert .tf-copy h2{color:var(--white);font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:18px}
#transfert .tf-copy p{color:rgba(241,221,199,.72);max-width:44ch}
#transfert .tf-techs{margin-top:34px;display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(214,169,104,.22)}
#transfert .tf-tech{padding:15px 0;border-bottom:1px solid rgba(214,169,104,.16);display:grid;grid-template-columns:32px 150px 1fr;gap:18px;align-items:baseline;opacity:.55;transition:opacity .45s}
/* seule la description active se deplie : -45% de hauteur, la scene rentre dans l'ecran */
#transfert .tf-tech .t-desc{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .35s}
#transfert .tf-tech.on .t-desc{max-height:130px;opacity:1}
#transfert .tf-tech.on{opacity:1}
#transfert .tf-tech b{font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.22em;color:var(--gold-l);min-width:32px}
#transfert .tf-tech .t-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.12rem;color:var(--white);min-width:150px}
#transfert .tf-tech .t-desc{font-size:.86rem;color:rgba(241,221,199,.6);line-height:1.55}
@media(max-width:980px){
  #transfert .tf-inner{grid-template-columns:1fr;gap:34px}
  #transfert .tf-stage{height:auto;padding:80px 0}
  #transfert .tf-visual{aspect-ratio:4/3}
  /* ⚠️ 29/08 : ce display:flex datait d'avant le passage en chronologie
     (grille 2 colonnes/2 lignes plus bas, ligne ~273). Sans grid-template-
     columns, flex écrasait le titre à quelques pixels de large — titre et
     description se chevauchaient sur mobile. Signalé par Nelly (vidéo). */
  #transfert .tf-tech{opacity:1}
  #transfert .tf-tech .t-desc{max-height:none;opacity:1}
  #transfert .tf-tech .t-name{min-width:0}
}

/* ---------- 6. MARQUEE RÉACTIF ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;background:var(--cream-l)}
.marquee-track{display:inline-flex;gap:46px;will-change:transform}
.marquee-track span{font-family:'Inter';font-weight:600;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:46px}
.marquee-track span::after{content:'◆';font-size:.5rem;color:var(--gold-l)}

/* ---------- 7. RAIL HORIZONTAL — réalisations ---------- */
#rail{background:var(--cream-l);overflow:hidden;padding:0}
#rail .rail-head{padding:104px 0 44px}
#rail .rail-track{display:flex;gap:28px;padding:0 max(28px,calc((100vw - var(--maxw))/2)) 104px}
#rail .rail-card{flex:0 0 clamp(260px,30vw,380px);background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .4s,box-shadow .4s}
#rail .rail-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
#rail .rail-card .rc-img{aspect-ratio:4/3;background:linear-gradient(135deg,var(--cream) 0%,#E4CBAA 100%);position:relative;overflow:hidden}
#rail .rail-card .rc-img img{width:100%;height:100%;object-fit:cover}
#rail .rail-card .rc-body{padding:26px 26px 30px}
#rail .rail-card .rc-loc{font-family:'Inter';font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d)}
#rail .rail-card h3{font-size:1.16rem;margin:9px 0 10px}
#rail .rail-card p{font-size:.9rem;color:var(--muted);line-height:1.6}
@media(max-width:860px){#rail .rail-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}#rail .rail-card{scroll-snap-align:start}}

/* ---------- 8. CARTES D'ENTRÉE (accueil) ---------- */
.ecard{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:38px 32px 34px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.ecard-tag{font-family:'Inter';font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.ecard h3{font-size:1.34rem;margin-bottom:14px}
.ecard p{color:var(--muted);font-size:.94rem;flex:1}
.ecard .lnk{margin-top:24px;font-family:'Inter';font-weight:600;font-size:.86rem;color:var(--gold-d);border-bottom:1px solid var(--line-gold);align-self:flex-start;padding-bottom:3px;transition:.25s}
.ecard .lnk:hover{color:var(--gold-l);border-color:var(--gold)}

/* titre CTA agrandi (demande de Nelly : « écrit un peu plus gros si possible ») */
.cta-xl{font-size:clamp(2.3rem,5.4vw,4rem)!important;line-height:1.06}

/* ---------- 9. BOUTON MAGNÉTIQUE ---------- */
/* pas de will-change permanent : il creait une couche GPU par bouton, sur toutes les pages */

/* ---------- 10. ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .line-mask>*{transform:none!important}
  .fade-up,.stagger>*{opacity:1!important;transform:none!important}
  #loader{display:none}
  #transfert .tf-mark img{opacity:1!important;transform:none!important}
  #transfert .tf-tech{opacity:1}
  #transfert .tf-tech .t-desc{max-height:none;opacity:1}
}

/* ============================================================
   TRANSITIONS ENTRE LES PAGES
   API native View Transitions : aucun script, aucune bibliotheque.
   Les navigateurs qui ne la connaissent pas ignorent simplement le bloc
   et naviguent normalement — aucune degradation.
   ============================================================ */
@view-transition{navigation:auto}

/* L'ancienne page recule et s'efface, la nouvelle se DEVOILE par le bas
   comme un tirage qu'on decouvre. Le fondu simple faisait « page qui
   clignote » ; ici le mouvement a une direction et une matiere. */
::view-transition-old(root){animation:nkSort .34s cubic-bezier(.55,0,.35,1) both;
  transform-origin:50% 50%}
::view-transition-new(root){animation:nkEntre .62s cubic-bezier(.16,1,.3,1) both}
@keyframes nkSort{
  to{opacity:0;transform:scale(.985) translateY(-14px);filter:saturate(.85)}
}
@keyframes nkEntre{
  from{clip-path:inset(100% 0 0 0);transform:translateY(26px)}
  to  {clip-path:inset(0 0 0 0);transform:translateY(0)}
}

/* le rideau : un voile creme balaie l'ecran pendant la bascule */
::view-transition-group(root){z-index:1}
html::view-transition{background:transparent}
.nk-rideau{position:fixed;inset:0;z-index:9996;pointer-events:none;
  background:linear-gradient(180deg,var(--cream-l),var(--cream));
  transform:scaleY(0);transform-origin:bottom}
.nk-rideau i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:auto;opacity:0}

/* la barre de nav et le logo ne bougent pas : ils tiennent les deux pages ensemble */
nav{view-transition-name:nk-nav}
::view-transition-old(nk-nav),::view-transition-new(nk-nav){animation:none;mix-blend-mode:normal}
.brand img.logo{view-transition-name:nk-logo}
::view-transition-old(nk-logo),::view-transition-new(nk-logo){animation:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   ACTUALITÉS — bloc blanc, prêt à recevoir une photo de fond
   Chaque slide a un emplacement `.na-bg` : tant qu'il n'y a pas d'image,
   c'est un aplat crème discret. Le jour où Nelly fournit une photo, il
   suffit de la poser en `background-image` sur ce bloc, rien d'autre à changer.
   ============================================================ */
#actus{background:var(--white);padding:96px 0 76px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.na-viewport{overflow:hidden;max-width:calc(var(--maxw) + 56px);margin:0 auto}
.na-track{display:flex;align-items:stretch;transition:transform .85s cubic-bezier(.16,1,.3,1)}
.na-slide{flex:0 0 100%;min-width:100%;padding:0 28px}

.na-card{position:relative;overflow:hidden;border-radius:3px;height:clamp(320px,42vh,400px);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 50px -28px rgba(0,0,0,.30)}

/* l'emplacement de la photo de fond */
.na-bg{position:relative;background:linear-gradient(150deg,#FAF5EE,var(--cream) 58%,#E3C9A9);
  background-size:cover;background-position:center;overflow:hidden}
.na-bg::after{content:'';position:absolute;right:-14%;bottom:-18%;width:62%;height:62%;
  background:url('img/logo-monogram.png') center/contain no-repeat;opacity:.11}
.na-bg .na-num{position:absolute;left:34px;top:28px;font-family:'Fraunces',serif;
  font-weight:600;font-size:clamp(2.6rem,5vw,4rem);color:var(--gold-d);opacity:.34;
  line-height:.9;letter-spacing:-.03em}

.na-body{padding:46px 46px 42px;display:flex;flex-direction:column;justify-content:center}
.na-tag{font-family:'Inter';font-weight:600;font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-d);display:block;margin-bottom:16px}
.na-slide h3{font-size:clamp(1.6rem,2.9vw,2.2rem);line-height:1.1;margin:0 0 18px;color:var(--black)}
.na-body p{color:var(--muted);font-size:.98rem;line-height:1.72;margin:0}
.na-body .lnk{display:inline-flex;align-items:center;gap:9px;margin-top:26px;align-self:flex-start;
  font-family:'Inter';font-weight:600;font-size:.86rem;color:var(--ink);
  border-bottom:1px solid var(--gold);padding-bottom:4px;transition:.25s}
.na-body .lnk::after{content:'→';color:var(--gold);transition:transform .25s}
.na-body .lnk:hover::after{transform:translateX(5px)}

@media(max-width:900px){
  .na-card{grid-template-columns:1fr;height:auto}
  .na-bg{min-height:190px}
  .na-body{padding:32px 26px 30px}
}
/* ---------- la barre de progression du carrousel ---------- */
.na-bar{max-width:var(--maxw);margin:44px auto 0;padding:0 28px;
  display:flex;align-items:center;gap:30px}
.na-progress{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.na-progress i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:0;
  transition:width .85s cubic-bezier(.16,1,.3,1)}
.na-count{font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.16em;
  color:var(--muted);min-width:52px;text-align:right}
.na-nav{display:flex;gap:10px}
.na-arrow{width:46px;height:46px;border:1px solid var(--line);background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.25s;color:var(--ink);font-size:1rem;border-radius:2px}
.na-arrow:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

@media(max-width:900px){
  .na-inner{grid-template-columns:1fr;gap:22px;min-height:0}
  .na-num{font-size:6rem;right:10px;opacity:.06}
  .na-right{border-left:none;padding-left:0}
  .na-bar{flex-wrap:wrap;gap:18px}
}
@media (prefers-reduced-motion:reduce){.na-track,.na-time i,.na-dot{transition:none}}

/* ============================================================
   SAVOIR-FAIRE — les 5 techniques deviennent une CHRONOLOGIE
   Une ligne verticale se remplit au fil du scroll pendant que le
   marquage se depose sur le textile : les deux avancent ensemble.
   ============================================================ */
#transfert .tf-techs{position:relative;padding-left:38px;border-top:none;margin-top:38px}
/* le rail */
#transfert .tf-techs::before{content:'';position:absolute;left:4px;top:10px;bottom:10px;
  width:1px;background:rgba(187,126,60,.20)}
/* la portion parcourue : meme variable que le peeling, les deux avancent ensemble */
#transfert .tf-techs::after{content:'';position:absolute;left:4px;top:10px;width:1px;
  height:calc(var(--pass,0) * (100% - 20px));background:var(--gold);
  box-shadow:0 0 10px rgba(187,126,60,.5)}

#transfert .tf-tech{position:relative;border-bottom:none;padding:16px 0;
  grid-template-columns:44px 1fr;gap:6px 18px}
/* le jalon */
#transfert .tf-tech::before{content:'';position:absolute;left:-38px;top:24px;
  width:9px;height:9px;border-radius:50%;background:var(--black);
  box-shadow:0 0 0 1px rgba(187,126,60,.45);transition:.5s cubic-bezier(.16,1,.3,1)}
#transfert .tf-tech.on::before{background:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 0 0 6px rgba(187,126,60,.18)}
#transfert .tf-tech.fait::before{background:var(--gold);box-shadow:0 0 0 1px var(--gold)}

#transfert .tf-tech b{grid-column:1;grid-row:1;align-self:baseline}
#transfert .tf-tech .t-name{grid-column:2;grid-row:1;min-width:0}
#transfert .tf-tech .t-desc{grid-column:2;grid-row:2}

@media(max-width:980px){
  #transfert .tf-techs{padding-left:30px}
  #transfert .tf-techs::before,#transfert .tf-techs::after{left:2px}
  #transfert .tf-tech::before{left:-30px;top:20px}
  #transfert .tf-techs::after{height:calc(100% - 20px)}
}

/* ============================================================
   SAVOIR-FAIRE — le bloc ne doit jamais couper son contenu
   Sur un ecran court, forcer 100vh rognait le titre et la 5e technique.
   ============================================================ */
@media (max-height:819px){
  #transfert .tf-stage{height:auto;min-height:0;padding:96px 0 88px}
  #transfert .tf-inner{align-items:center}
  #transfert .tf-visual{aspect-ratio:auto;height:auto}
  #transfert .tf-shirt{width:min(340px,90%)}
  #transfert .tf-copy h2{font-size:clamp(1.6rem,3vw,2.2rem)}
  #transfert .tf-techs{margin-top:26px}
  #transfert .tf-tech{padding:12px 0}
}
/* la description de la technique active ne doit pas etre tronquee */
#transfert .tf-tech.on .t-desc{max-height:220px}

/* ============================================================
   SAVOIR-FAIRE — le marquage CHANGE selon la technique active
   Le film qu'on décolle ne racontait rien de la technique en cours.
   Ici, chaque procédé donne un rendu différent sur le textile :
   c'est la démonstration elle-même qui devient l'animation.
   ============================================================ */
#transfert .tf-mark img{width:min(150px,26%);height:auto;opacity:1;
  clip-path:none;transition:filter .6s ease,transform .6s cubic-bezier(.16,1,.3,1),opacity .5s}

/* 01 DTF — opaque, couleurs franches, léger relief */
#transfert[data-tech="0"] .tf-mark img{filter:saturate(1.15) drop-shadow(0 2px 2px rgba(0,0,0,.3))}
/* 02 DTF UV — marquage brillant sur support rigide */
#transfert[data-tech="1"] .tf-mark img{filter:saturate(1.25) brightness(1.12) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
/* 03 Sublimation — la couleur entre DANS la matière, aucun relief */
#transfert[data-tech="2"] .tf-mark img{filter:saturate(.82) opacity(.86);mix-blend-mode:multiply}
/* 04 Flex textile — la découpe accroche la lumière */
#transfert[data-tech="3"] .tf-mark img{filter:saturate(1.3) contrast(1.15) drop-shadow(0 1px 0 rgba(255,255,255,.5)) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
/* 05 Vinyle adhésif — à plat, mat */
#transfert[data-tech="4"] .tf-mark img{filter:saturate(.95) contrast(1.08)}

/* le textile change de teinte selon le support évoqué */
#transfert .tf-shirt .body{transition:fill .7s ease}
#transfert[data-tech="1"] .tf-shirt .body{fill:#E8E4DC}
#transfert[data-tech="2"] .tf-shirt .body{fill:#EFEDE8}
#transfert[data-tech="4"] .tf-shirt .body{fill:#F6F4F0}

/* le nom de la technique s'inscrit sous le marquage */
#transfert .tf-legende{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  font-family:'Inter';font-weight:600;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .5s;white-space:nowrap}
#transfert .tf-legende.on{opacity:.9}

/* ============================================================
   LE TEXTILE S'ANIME AVEC LA CHRONOLOGIE
   Il dérive doucement pendant que la ligne se remplit, et le marquage
   se ré-imprime à chaque changement de technique.
   ============================================================ */
#transfert .tf-visual{will-change:transform}
#transfert .tf-shirt{transition:none}

/* la ré-impression : le marquage se repose quand la technique change */
@keyframes nkPresse{
  0%  {transform:scale(1.14);opacity:.25;filter:blur(1.5px)}
  55% {transform:scale(.985);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:1;filter:blur(0)}
}
#transfert .tf-mark img.presse{animation:nkPresse .62s cubic-bezier(.16,1,.3,1)}

/* la trace de chaleur qui accompagne la pose */
#transfert .tf-chaleur{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(210px,38%);height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,#FFE0B0,var(--gold),#FFE0B0,transparent);
  box-shadow:0 0 20px 5px rgba(187,126,60,.4);border-radius:2px}
@keyframes nkChaleur{
  0%  {opacity:0;transform:translate(-50%,-50%) translateY(-46px) scaleX(.4)}
  40% {opacity:1;transform:translate(-50%,-50%) translateY(0) scaleX(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translateY(46px) scaleX(.4)}
}
#transfert .tf-chaleur.on{animation:nkChaleur .62s ease-out}
@media (prefers-reduced-motion:reduce){
  #transfert .tf-mark img.presse,#transfert .tf-chaleur.on{animation:none}
}

/* le textile : matiere, plis et coutures plutot qu'un aplat */
#transfert .tf-shirt .body{fill:url(#nkTissu);filter:drop-shadow(0 26px 44px rgba(0,0,0,.5))}
#transfert .tf-shirt .col{fill:#EAE5DC}
#transfert .tf-shirt .colTrait{fill:none;stroke:rgba(0,0,0,.16);stroke-width:1.4}
#transfert .tf-shirt .couture{fill:none;stroke:rgba(0,0,0,.13);stroke-width:1.2;stroke-dasharray:3 3}
#transfert .tf-shirt .pli{fill:none;stroke:rgba(0,0,0,.055);stroke-width:7;stroke-linecap:round}
/* la teinte du support reste pilotable par la technique */
#transfert[data-tech="1"] .tf-shirt .body{fill:#E8E4DC}
#transfert[data-tech="2"] .tf-shirt .body{fill:#EFEDE8}
#transfert[data-tech="4"] .tf-shirt .body{fill:#F6F4F0}

/* ============================================================
   RÉALISATIONS — présentation retravaillée
   Trois cartes égales et centrées, c'est plat. Ici une composition
   décalée : la première pièce plus haute, les libellés hors cadre,
   et l'image qui se dévoile au survol.
   ============================================================ */
#rea{padding:118px 0;background:var(--white)}
.re-head{max-width:var(--maxw);margin:0 auto 60px;padding:0 28px;
  display:grid;grid-template-columns:1fr auto;gap:34px;align-items:end}
.re-head h2{font-size:clamp(1.9rem,4vw,3rem);margin:0}
.re-head p{color:var(--muted);max-width:46ch;margin:16px 0 0}

.re-grid{max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.re-item{position:relative;display:block}

.re-media{position:relative;overflow:hidden;border-radius:3px;
  background:linear-gradient(150deg,#FAF5EE,var(--cream) 58%,#E3C9A9);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 44px -26px rgba(0,0,0,.28);
  aspect-ratio:4/5}
.re-media::after{content:'';position:absolute;right:-12%;bottom:-16%;width:58%;height:58%;
  background:url('img/logo-monogram.png') center/contain no-repeat;opacity:.10;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s}
.re-item:hover .re-media::after{transform:scale(1.08) rotate(-4deg);opacity:.16}
/* le voile qui se leve au survol */
.re-media i{position:absolute;inset:0;background:var(--ink);opacity:0;
  transition:opacity .5s;pointer-events:none}
.re-item:hover .re-media i{opacity:.06}

.re-legende{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.re-legende b{font-family:'Inter';font-weight:600;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-d);flex:0 0 auto}
.re-legende span{font-family:'Fraunces',serif;font-weight:600;font-size:1.12rem;
  color:var(--black);line-height:1.25}
.re-item::after{content:'→';position:absolute;right:0;bottom:-2px;color:var(--gold);
  opacity:0;transform:translateX(-8px);transition:.35s;font-size:1.05rem}
.re-item:hover::after{opacity:1;transform:translateX(0)}

@media(max-width:900px){
  .re-grid{grid-template-columns:1fr;gap:30px}
  .re-head{grid-template-columns:1fr}
}

/* ============================================================
   SAVOIR-FAIRE — une VRAIE pièce à la place du dessin
   Le t-shirt en SVG restera toujours un dessin. Ici un cadre qui
   attend une photo de Nelly : `background-image` sur .tf-piece-photo
   et c'est fini, les animations continuent de fonctionner.
   ============================================================ */
.tf-piece-photo{position:relative;width:min(430px,86%);aspect-ratio:4/5;margin:0;
  border-radius:3px;overflow:hidden;background-size:cover;background-position:center;
  background-image:linear-gradient(155deg,#242019 0%,#171410 55%,#100E0B 100%);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75);
  display:flex;align-items:flex-end;justify-content:center;padding:22px}
/* halo cuivre qui donne du relief tant qu'il n'y a pas d'image */
.tf-piece-photo::before{content:'';position:absolute;inset:0;
  background:radial-gradient(80% 60% at 30% 18%,rgba(187,126,60,.20),transparent 68%)}
/* le monogramme en filigrane occupe le cadre en attendant */
.tf-piece-photo::after{content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:52%;height:52%;background:url('img/logo-monogram.png') center/contain no-repeat;
  opacity:.14;filter:brightness(0) invert(1)}
.tf-piece-attente{position:relative;font-family:'Inter';font-weight:600;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(241,221,199,.5);text-align:center}
/* dès qu'une photo est posée, le filigrane et le libellé s'effacent */
.tf-piece-photo[style*="url"]::after,
.tf-piece-photo[style*="url"] .tf-piece-attente{display:none}

/* le marquage se pose PAR-DESSUS la pièce */
#transfert .tf-mark{z-index:2}
#transfert .tf-mark img{filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}

/* ============================================================
   SAVOIR-FAIRE — passage en beige
   Le noir est réservé au pied de page. Tous les éléments de la section
   sont repris pour un fond clair : titres, textes, chronologie, cadre.
   ============================================================ */
#transfert{background:var(--cream-l);color:var(--ink)}
#transfert .tf-copy h2{color:var(--black)}
#transfert .tf-copy p{color:var(--muted)}
#transfert .eyebrow{color:var(--gold-d)}

/* la chronologie sur fond clair */
#transfert .tf-techs::before{background:rgba(187,126,60,.28)}
#transfert .tf-tech::before{background:var(--cream-l);box-shadow:0 0 0 1px rgba(187,126,60,.45)}
#transfert .tf-tech.on::before{background:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 0 0 6px rgba(187,126,60,.16)}
#transfert .tf-tech.fait::before{background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
#transfert .tf-tech b{color:var(--gold-d)}
#transfert .tf-tech .t-name{color:var(--black)}
#transfert .tf-tech .t-desc{color:var(--muted)}

/* le cadre de la pièce : clair, pour mettre en valeur la future photo */
.tf-piece-photo{background-image:linear-gradient(155deg,#FFFFFF 0%,#F7F3EC 55%,#EADCC8 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 24px 54px -30px rgba(0,0,0,.35)}
.tf-piece-photo::before{background:radial-gradient(80% 60% at 30% 18%,rgba(187,126,60,.16),transparent 68%)}
.tf-piece-photo::after{opacity:.13;filter:none}
.tf-piece-attente{color:var(--gold-d);opacity:.75}
#transfert .tf-legende{color:var(--gold-d)}
#transfert .tf-mark img{filter:drop-shadow(0 3px 10px rgba(0,0,0,.18))}