/* ===================================================================
   Le KLUB — le club prive KUST  ·  page /klub  ·  08/09/2026

   ⚠️ LE KLUB N EST PAS L ACADEMIE. C est un CLUB PRIVE d avantages
   pour les coiffeurs, membres ou non de la clientele KUST : formations
   a prix prefere, seminaires, materiel pro au prix fournisseur, visios
   reservees, remise d anniversaire. Les formations sont l un des
   avantages, pas le sujet.

   Identite du KLUB (etude de faisabilite, mai 2026) :
   rouge profond #7A0C14, creme casse, typographie ultra grasse edito.

   LES ANIMATIONS SONT PILOTEES PAR assets/klub.js, PAS par
   animation-timeline : cette propriete CSS ne marche que sur Chrome et
   laissait la page parfaitement immobile sur Safari, donc sur Mac et
   sur iPhone. Ici tout passe par des classes que le script ajoute.

   ⚠️ PIEGES DEJA PAYES, A NE PAS REFAIRE
   1. clamp(1rem,.9rem+1vw,2rem) SANS espaces autour du "+" est
      INVALIDE : la declaration entiere est ignoree, en silence.
   2. Le .scroll-container du site est verrouille en overflow:hidden par
      la cascade compilee. La page defile donc naturellement, et garde
      un .scroll-container FANTOME invisible : sans lui, le script du
      curseur (Menu.astro...js) leve une erreur et le curseur disparait.
   3. `.k-wrap p` (0,1,1) l emporte sur `.k-note` (0,1,0). Toujours
      ecrire `.k-wrap .k-note`.
   4. ⚠️ `overflow:hidden` TUE les animations pilotees par le scroll.
      Un bloc en overflow:hidden est un CONTENEUR DE DEFILEMENT : la
      `view(y)` d un element place dedans se mesure alors par rapport a
      LUI, qui ne defile jamais. La timeline reste inactive
      (`timeline.currentTime === null`) et rien ne bouge, sans la
      moindre erreur nulle part. C est ce qui figeait les trois images
      et tous les titres le 08/09/2026. D ou le `overflow:clip` partout
      dans ce fichier : il rogne exactement pareil MAIS ne cree pas de
      conteneur de defilement. On garde `overflow:hidden` juste avant,
      en repli pour les navigateurs qui ignorent `clip`.
   =================================================================== */

main.k-main{display:block;width:100%;cursor:none}
.k-fantome{position:fixed;top:0;left:0;width:100%;height:100vh;
  visibility:hidden;pointer-events:none;z-index:-1}

.k-wrap{--rouge:#7a0c14;--rouge-clair:#9a1019;--encre:#0b0511;--creme:#f6f2ea;
  --sortie:cubic-bezier(.16,1,.3,1);
  background:var(--creme);color:var(--encre);width:100%;overflow-x:clip;
  font-family:Spectral,Palatino,serif;font-weight:200}

.k-wrap section{position:relative}
.k-dedans{max-width:1560px;margin:0 auto;
  padding-left:clamp(1.5rem, 6vw, 7rem);padding-right:clamp(1.5rem, 6vw, 7rem)}

/* le trait de lecture, en haut de l ecran */
.k-jauge{position:fixed;top:0;left:0;width:100%;height:2px;z-index:9999999;
  pointer-events:none;background:rgba(11,5,17,.06)}
.k-jauge span{display:block;height:100%;background:var(--rouge);
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- typographie ---------- */
.k-wrap .k-sur{font-family:Spectral,Palatino,serif;font-weight:400;
  font-size:clamp(.7rem, .62rem + .3vw, .84rem);letter-spacing:.34em;
  text-transform:uppercase;color:var(--rouge);margin:0 0 1.5rem}
.k-wrap .k-titre{font-family:"Prospectus STD",Baskerville,Georgia,serif;font-weight:600;
  font-size:clamp(3rem, 1rem + 7.4vw, 8rem);line-height:.88em;margin:0 0 1.7rem;
  letter-spacing:-.02em;color:inherit}
.k-wrap .k-titre--moyen{font-size:clamp(2.4rem, 1.1rem + 4.6vw, 5.4rem)}
/* Le volet --gauche a une colonne texte plus etroite : a 4rem, "Les seminaires."
   cassait en deux lignes alors que "Les formations." tenait sur une. On calme d un
   cran le titre des volets et on rend un peu de largeur au texte du volet gauche. */
.k-volet .k-titre--moyen{font-size:clamp(2.1rem, 1rem + 2.8vw, 3.6rem)}
.k-volet .k-titre--moyen{text-wrap:balance}
.k-wrap .k-titre em{font-family:Spectral,Palatino,serif;font-weight:200;font-style:italic;
  font-size:clamp(1.05rem, .8rem + 1vw, 1.9rem);display:block;line-height:1.25em;
  letter-spacing:0;margin-top:.9rem;opacity:.78}
.k-wrap .k-chapo{font-size:clamp(1.05rem, .95rem + .45vw, 1.4rem);line-height:1.68em;
  max-width:33em;opacity:.9;font-weight:200}
.k-wrap p{margin:0 0 1.1rem}

/* =========== LES MOUVEMENTS ========================================
   .k-net = « montre-le tout de suite, sans transition ». Le script la
   pose quand l'onglet est en arriere-plan (Chrome y gele l'horloge des
   animations) ou quand le systeme demande moins de mouvement.
   =================================================================== */
.k-net,.k-net *{transition:none !important;animation:none !important}

/* les mots d un titre montent derriere un masque, l un apres l autre */
.k-masque{display:inline-block;overflow:hidden;overflow:clip;vertical-align:bottom;
  padding-bottom:.06em;margin-bottom:-.06em}
.k-mot{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform 1.05s var(--sortie), opacity .75s ease}
.k-vu .k-mot{transform:translateY(0);opacity:1}

/* un bloc qui se leve doucement */
[data-leve]{opacity:0;transform:translateY(2.6rem);
  transition:opacity .9s ease, transform 1.15s var(--sortie)}
[data-leve].k-vu{opacity:1;transform:none}
[data-leve][data-retard="1"]{transition-delay:.12s}
[data-leve][data-retard="2"]{transition-delay:.24s}
[data-leve][data-retard="3"]{transition-delay:.36s}
[data-leve][data-retard="4"]{transition-delay:.48s}
[data-leve][data-retard="5"]{transition-delay:.6s}

/* une image qui s ouvre : le voile se leve, l image se pose et se colore */
[data-ouvre]{overflow:hidden;overflow:clip;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.5s var(--sortie)}
[data-ouvre].k-vu{clip-path:inset(0 0 0 0)}
[data-ouvre] img{display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.22);filter:grayscale(1) blur(8px);
  transition:transform 1.9s var(--sortie), filter 1.5s ease}
[data-ouvre].k-vu img{transform:scale(1);filter:grayscale(0) blur(0)}

/* la parallaxe : le script pose --py, le CSS s en sert */
[data-parallaxe] img,img[data-parallaxe]{will-change:transform}
.k-para{transform:translate3d(0, var(--py, 0%), 0);transition:transform .18s linear}

/* ---------- 1 · l ouverture ---------- */
/* ⚠️ Mouns a refuse toute photo de coiffure en ouverture (08/09/2026).
   Le hero est le bordeaux du KLUB et son K, comme sur leklub.kust.fr. */
.k-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(4rem, 9vh, 9rem);background:var(--encre);overflow:hidden;overflow:clip}
.k-hero--marque{background:var(--rouge)}
.k-hero--marque:before{background:
  linear-gradient(180deg, rgba(11,5,17,.28) 0%, rgba(122,12,20,0) 38%, rgba(11,5,17,.42) 100%)}
/* la trame diagonale du site du KLUB */
.k-hero--marque:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px,
    transparent 2px 9px)}
.k-hero--k{position:absolute;right:-4vw;top:50%;height:118%;width:auto;z-index:1;
  opacity:.14;pointer-events:none;
  transform:translate3d(0, calc(-50% + var(--py, 0%)), 0);will-change:transform}
.k-hero--viz{position:absolute;inset:-8% 0;margin:0;overflow:hidden;overflow:clip}
.k-hero--viz img{width:100%;height:100%;object-fit:cover;object-position:center 26%;
  filter:grayscale(.55) brightness(.6);transform:translate3d(0, var(--py,0%), 0) scale(1.06);
  will-change:transform}
.k-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(122,12,20,.5) 0%, rgba(11,5,17,.2) 40%, rgba(11,5,17,.94) 100%)}
.k-hero .k-dedans{position:relative;z-index:2;color:#fff;width:100%}
.k-hero .k-sur{color:#fff;opacity:.66}
.k-hero .k-chapo{opacity:.92;max-width:29em}
.k-fleche{margin-top:2.6rem;display:inline-flex;align-items:center;gap:.8rem;
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;opacity:.6;color:#fff}
.k-fleche:after{content:"";width:2.4rem;height:1px;background:currentColor;
  animation:kTire 2.4s ease-in-out infinite}
@keyframes kTire{0%,100%{transform:scaleX(.35);transform-origin:0 50%}
  50%{transform:scaleX(1);transform-origin:0 50%}}

/* ---------- 2 · la promesse, en gros ---------- */
.k-manifeste{padding:clamp(4rem, 8vh, 8.5rem) 0}
.k-manifeste--kit{background:#f0eae0}
.k-manifeste .k-titre{max-width:16em}

/* ---------- 3 · les avantages, en volets qui s emboitent ---------- */
/* L image mange plus de la moitie de la largeur et file jusqu au bord de
   l ecran : c est ce qui fait disparaitre le vide. Le texte reste dans la
   colonne etroite, cale au centre de la hauteur de l image. */
/* ⚠️ Les deux sens n ont PAS la meme grille : la colonne LARGE doit toujours
   etre celle de l image. En --droite l image est en 2e colonne, en --gauche
   elle est en 1re. Une seule grille pour les deux rendait l image du
   seminaire plus petite que les autres (defaut vu par Mouns le 08/09/2026). */
.k-volet{display:grid;align-items:center;gap:clamp(1.6rem, 3.5vw, 4rem);
  padding:clamp(2.5rem, 5vh, 5.5rem) 0;overflow:hidden;overflow:clip}
.k-volet--droite{grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr)}
.k-volet--gauche{grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr)}
.k-volet--viz{margin:0;aspect-ratio:auto;height:clamp(30rem, 94vh, 64rem)}
.k-volet--texte{padding-left:clamp(1.5rem, 6vw, 7rem);padding-right:clamp(1.5rem, 3vw, 3rem)}
.k-volet--droite .k-volet--texte{padding-left:clamp(1.5rem, 5vw, 6rem);
  padding-right:clamp(1.5rem, 2.6vw, 3.2rem);margin-right:auto}
.k-volet--gauche .k-volet--texte{padding-right:clamp(1.5rem, 5vw, 6rem);
  padding-left:clamp(1.5rem, 2.6vw, 3.2rem);margin-left:auto}
.k-volet--droite .k-volet--viz{order:2;clip-path:polygon(7% 0, 100% 4%, 100% 96%, 0 100%)}
.k-volet--gauche .k-volet--viz{order:0;clip-path:polygon(0 4%, 93% 0, 100% 100%, 0 96%)}
.k-volet--droite .k-volet--viz.k-vu{clip-path:polygon(7% 0, 100% 4%, 100% 96%, 0 100%)}
.k-volet--gauche .k-volet--viz.k-vu{clip-path:polygon(0 4%, 93% 0, 100% 100%, 0 96%)}
.k-volet--texte{max-width:31em}
.k-liste{list-style:none;margin:2rem 0 0;padding:0}
.k-liste li{position:relative;padding-left:1.6rem;margin-bottom:.8rem;
  font-size:1.05rem;line-height:1.6em;opacity:.85}
.k-liste li:before{content:"";position:absolute;left:0;top:.66em;width:.7rem;height:1px;
  background:var(--rouge)}

/* ---------- 4 · les chiffres ---------- */
.k-compte{padding:clamp(3rem, 6vh, 6rem) 0 clamp(5rem, 10vh, 10rem)}
.k-chiffres{display:grid;gap:clamp(1.6rem, 3vw, 3rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  border-top:1px solid rgba(11,5,17,.14);padding-top:2.8rem}
.k-chiffre b{display:block;font-family:"Prospectus STD",Baskerville,Georgia,serif;
  font-weight:600;font-size:clamp(2.8rem, 1.4rem + 3.6vw, 5.2rem);line-height:1;
  color:var(--rouge);font-variant-numeric:tabular-nums}
.k-chiffre i{font-style:normal}
.k-chiffre span{display:block;margin-top:.6rem;font-size:.95rem;line-height:1.45em;opacity:.7}
.k-wrap .k-note{margin:3.4rem 0 0;font-size:.94rem;line-height:1.6em;opacity:.62;max-width:52em}

.k-wrap .k-signature{margin-top:2.2rem;font-size:.76rem;letter-spacing:.26em;
  text-transform:uppercase;opacity:.55;display:flex;align-items:center;gap:1rem}
.k-wrap .k-signature:before{content:"";width:2.4rem;height:1px;background:var(--rouge);
  display:inline-block;flex:none}

/* ---------- la citation, seule sur l encre ---------- */
.k-citation{background:var(--encre);color:#fff;
  padding:clamp(5rem, 11vh, 11rem) 0;
  clip-path:polygon(0 0, 100% 3vw, 100% 100%, 0 calc(100% - 3vw))}
.k-citation blockquote{margin:0;max-width:18em;
  font-family:"Prospectus STD",Baskerville,Georgia,serif;font-weight:600;
  font-size:clamp(2rem, 1rem + 4.2vw, 5rem);line-height:1.02em;letter-spacing:-.015em}
.k-citation blockquote:before{content:"";display:block;width:3.5rem;height:2px;
  background:var(--rouge-clair);margin-bottom:2.4rem}
@media (max-width:820px){
  .k-citation{clip-path:polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw))}
}

/* ---------- 6 · la sortie ---------- */
.k-cta{text-align:center;padding:clamp(4rem, 8vh, 8rem) 0 clamp(4.5rem, 9vh, 9rem)}
.k-cta .k-chapo,.k-cta .k-note{margin-left:auto;margin-right:auto}
.k-liens{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.4rem}
.k-lien{display:inline-flex;align-items:center;gap:.9rem;position:relative;overflow:hidden;overflow:clip;
  padding:1.15rem 2.8rem;background:var(--rouge);color:#fff;text-decoration:none;
  font-family:Spectral,Palatino,serif;font-weight:400;font-size:1rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:color .4s ease, transform .4s var(--sortie)}
.k-lien:before{content:"";position:absolute;inset:0;background:var(--encre);
  transform:translateY(101%);transition:transform .5s var(--sortie);z-index:0}
.k-lien:hover:before{transform:translateY(0)}
.k-lien>*,.k-lien{position:relative}
.k-lien span{position:relative;z-index:1}
.k-lien:hover{transform:translateY(-3px)}
.k-lien--ligne{background:none;color:var(--encre);border:1px solid rgba(11,5,17,.28)}
.k-lien--ligne:hover{color:#fff;border-color:var(--encre)}
.k-cta .k-note a{color:inherit}

/* ---------- on respecte le reglage systeme ---------- */
@media (prefers-reduced-motion: reduce){
  .k-mot,[data-leve],[data-ouvre],[data-ouvre] img{
    transition:none !important;transform:none !important;opacity:1 !important;
    clip-path:none !important;filter:none !important}
  .k-hero--viz img{transform:none;filter:grayscale(.5) brightness(.6)}
  .k-fleche:after{animation:none}
}

/* ---------- petits ecrans ---------- */
@media (max-width:820px){
  .k-volet{grid-template-columns:1fr;gap:1.8rem;padding:clamp(2.5rem, 5vh, 4.5rem) 0}
  .k-volet--viz{height:clamp(21rem, 62vh, 34rem)}
  .k-volet--texte,.k-volet--droite .k-volet--texte,.k-volet--gauche .k-volet--texte{
    padding-left:1.4rem;padding-right:1.4rem}
  .k-volet--droite .k-volet--viz,.k-volet--gauche .k-volet--viz{order:0;
    clip-path:polygon(0 2%, 100% 0, 100% 98%, 0 100%)}
  .k-volet--droite .k-volet--viz.k-vu,.k-volet--gauche .k-volet--viz.k-vu{
    clip-path:polygon(0 2%, 100% 0, 100% 98%, 0 100%)}
}

/* ===== ETAGE SCROLL-DRIVEN — les effets avancent AVEC le scroll ======
   Reproche de Mouns, 08/09/2026 : « les effets sont trop rapides, ils
   sont deja finis quand on arrive dessus ». C etait exact : klub.js
   declenche une transition d une seconde des que l element entre dans
   l ecran. Qui defile doucement ne voit jamais rien bouger.

   La parade est celle des developpeurs d origine (home, portfolio,
   formations) : `animation-timeline: view(y)`. L animation n a plus de
   duree en secondes — elle avance AVEC LE DOIGT. Elle ne peut donc plus
   etre « deja finie » : elle se termine quand l element arrive au
   milieu de l ecran, et l image continue de respirer jusqu a sa sortie.

   Calage repris du portfolio : arrivee large et floue en niveaux de
   gris, nette et posee au premier tiers, puis derive lente.

   ⚠️ NE JAMAIS SUPPRIMER klub.js EN CROYANT QUE CE BLOC SUFFIT : il
   n existe que sur Chrome et Edge. Sur Safari (Mac, iPhone) et sur
   Firefox, c est le moteur JS qui anime toute la page — sans lui,
   elle serait parfaitement immobile.
   ⚠️ Le hero est volontairement EXCLU : il est deja a l ecran au
   chargement, sa course de scroll est donc deja consommee et il
   apparaitrait sans le moindre mouvement. Lui reste au JS.
   ⚠️ LES DEUX DERNIERES SECTIONS SONT EXCLUES AUSSI, pour la raison
   inverse : une plage qui se termine a `cover 50%` exige que l element
   atteigne le MILIEU de l ecran. En bas de page le scroll s arrete
   avant — le bloc final se figeait a 24 % de son animation, donc a
   24 % d OPACITE : le bouton bordeaux paraissait rose delave et semblait
   ne plus reagir au survol (defaut vu par Mouns le 08/09/2026, qu il a
   pris pour un probleme de couleur au survol). REGLE GENERALE : ce qui
   vit dans le dernier ecran d une page ne peut JAMAIS completer une
   plage `cover`, et doit rester au moteur JS.
   ==================================================================== */
@supports (animation-timeline: view(y)) and (animation-range: entry 10% cover 55%){

  /* les mots d un titre, l un apres l autre — le decalage se fait par la
     plage de scroll (--i, pose par klub.js), car un animation-delay en
     secondes n a plus aucun sens sur une timeline de scroll. */
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) .k-masque .k-mot{
    transition:none;
    animation:kMot linear both;
    animation-timeline:view(y);
    animation-range:entry calc(10% + var(--i, 0) * 4%) cover calc(46% + var(--i, 0) * 2.5%)}

  /* un bloc qui se leve */
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve]{
    transition:none;
    animation:kLeve linear both;
    animation-timeline:view(y);
    animation-range:entry 12% cover 50%}
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve][data-retard="1"]{animation-range:entry 18% cover 54%}
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve][data-retard="2"]{animation-range:entry 24% cover 58%}
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve][data-retard="3"]{animation-range:entry 30% cover 62%}
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve][data-retard="4"]{animation-range:entry 36% cover 66%}
  .k-wrap section:not(.k-hero):not(.k-citation):not(.k-cta) [data-leve][data-retard="5"]{animation-range:entry 42% cover 70%}

  /* les images des volets : elles ne s arretent jamais tout a fait.
     La plage couvre TOUTE la traversee (cover 0% -> 100%), donc il y a
     encore du mouvement quand l image sort par le haut. */
  .k-volet--viz{transition:none}
  /* ⚠️ PIEGE PAYE LE 08/09/2026 : le raccourci `animation:` REMET
     animation-timeline a `auto`. Ecrit dans une regle plus specifique que
     celle qui pose la timeline, il la balayait : les trois images
     retombaient sur l horloge du document, jouaient leur mouvement en une
     seconde au chargement et restaient figees a l arrivee. On n emploie
     donc ici que des proprietes DETAILLEES, jamais le raccourci. */
  .k-volet--viz img{transition:none;will-change:transform, filter;
    animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;
    animation-timeline:view(y);animation-range:cover 0% cover 100%}
  .k-volet--droite .k-volet--viz img{animation-name:kVizDroite}
  .k-volet--gauche .k-volet--viz img{animation-name:kVizGauche}

  @keyframes kMot{from{transform:translateY(105%);opacity:0}
    to{transform:translateY(0);opacity:1}}
  @keyframes kLeve{from{opacity:0;transform:translateY(2.6rem)}
    to{opacity:1;transform:none}}
  @keyframes kVizDroite{
    0%{transform:translate3d(8%, 0, 0) scale(1.28);filter:blur(14px) grayscale(1)}
    36%{transform:translate3d(0, 0, 0) scale(1.13);filter:blur(0px) grayscale(0)}
    100%{transform:translate3d(-6%, 0, 0) scale(1.02);filter:blur(0px) grayscale(0)}}
  @keyframes kVizGauche{
    0%{transform:translate3d(-8%, 0, 0) scale(1.28);filter:blur(14px) grayscale(1)}
    36%{transform:translate3d(0, 0, 0) scale(1.13);filter:blur(0px) grayscale(0)}
    100%{transform:translate3d(6%, 0, 0) scale(1.02);filter:blur(0px) grayscale(0)}}
}