/* Pages « Découvrir » de la version verticale : une grille de carrés collés, chacun avec sa police, sa couleur, sa forme et son mouvement.
   Partagé par vertical-audit, vertical-fidelite, vertical-caisse, vertical-automatisation, vertical-crm, vertical-ambassadeurs. */
:root{
  --noir:#0E0E0C; --creme:#EFE8D8; --vert:#25402F; --terre:#C45A3A; --bleu:#2B3FD6; --citron:#F2D43D; --rose:#EDA9BA; --nuit:#14172F; --violet:#6A4FE0; --menthe:#1FBF8F;
  --f-serif:"Instrument Serif",serif; --f-wide:"Archivo",sans-serif; --f-mono:"Geist Mono",monospace; --f-texte:"Geist",sans-serif;
  --n:12; --g:3px; --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:#000}
body{margin:0;background:#000;color:var(--creme);font-family:var(--f-texte);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0;padding:0}ol,ul{list-style:none}
a{color:inherit}
::selection{background:var(--citron);color:var(--noir)}

.haut{position:fixed;z-index:60;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;mix-blend-mode:difference;color:#fff;font:500 .66rem var(--f-mono);letter-spacing:.28em;text-transform:uppercase;pointer-events:none}
.haut a{pointer-events:auto;text-decoration:none}

.grille{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));--gw:min(100vw,var(--gmax,880px));grid-auto-rows:calc((var(--gw) - (var(--n) - 1) * var(--g)) / var(--n));gap:var(--g);background:#000;max-width:var(--gmax,880px);margin:50px auto 0}
.t{position:relative;overflow:hidden;grid-column:span var(--c);grid-row:span var(--r);transform:translate(var(--dx,0),var(--dy,0));transition:transform 1.4s cubic-bezier(.22,.8,.3,1);text-decoration:none}
.t.in{opacity:1;transform:none}
.t .tag{position:absolute;left:18px;top:16px;z-index:3;font:500 .62rem var(--f-mono);letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.t .lbl{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;font:500 .62rem var(--f-mono);letter-spacing:.22em;text-transform:uppercase;opacity:.8}

/* emplacements : la même trame sur chaque page */
.a1{--c:8;--r:5;--rm:7}.a2{--c:4;--r:5}
.b1,.b2,.b3{--c:4;--r:5}
.c1,.c2{--c:6;--r:4}
.d1,.d2{--c:3;--r:4;--cm:3;--rm:4}.d3{--c:6;--r:4;--rm:4}
.g1{--c:6;--r:8;--cm:6;--rm:6}
.k-video{background:var(--creme);padding:0}
.k-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.k-video .tag{z-index:3;color:#17142A}
.e2{--c:6;--r:4;--rm:5}.e3{--c:6;--r:4;--rm:4}
.f1{--c:8;--r:4;--rm:5}.f2{--c:4;--r:4;--rm:3}
.h1{--c:6;--r:4;--cm:6;--rm:4}
.m1{--c:4;--r:6;--cm:6;--rm:8}
.p1{--c:4;--r:6;--cm:6;--rm:8}
.n1{--c:4;--r:6;--cm:6;--rm:8}
.i2{--c:4;--r:6;--cm:6;--rm:6}
.j1{--c:4;--r:6;--cm:6;--rm:6}
.k1{--c:6;--r:4;--cm:6;--rm:4}
.k-image{padding:0;background:var(--nuit)}
.k-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* couleurs */
.bg-creme{background:var(--creme);color:var(--noir)}.bg-noir{background:var(--noir);color:var(--creme)}.bg-vert{background:var(--vert);color:var(--creme)}
.bg-terre{background:var(--terre);color:#fff}.bg-bleu{background:var(--bleu);color:#fff}.bg-citron{background:var(--citron);color:var(--noir)}
.bg-rose{background:var(--rose);color:#2B0F1A}.bg-nuit{background:var(--nuit);color:var(--creme)}.bg-violet{background:var(--violet);color:#fff}.bg-menthe{background:var(--menthe);color:var(--noir)}

/* titre */
.k-titre{display:grid;align-content:end;padding:clamp(20px,3.4vw,52px)}
.k-titre h1{font:400 clamp(1.43rem,min(14.4cqi,21.6cqb),14.76rem)/.94 var(--f-serif);letter-spacing:-.03em;max-width:12ch}
.k-titre h1 em{display:block;font-style:italic;color:var(--acc,var(--terre))}
.k-titre .mini{position:absolute;right:clamp(16px,2.4vw,34px);top:clamp(16px,2.4vw,34px);display:grid;grid-template-columns:repeat(3,18px);gap:3px}
.k-titre .mini i{width:18px;height:18px;background:currentColor;animation:flip 4.8s steps(1) infinite}
.k-titre .mini i:nth-child(2n){animation-delay:-1.2s}.k-titre .mini i:nth-child(3n){animation-delay:-2.4s}.k-titre .mini i:nth-child(5n){animation-delay:-3.6s}
@keyframes flip{0%{background:var(--noir)}25%{background:var(--terre)}50%{background:var(--vert)}75%{background:var(--citron)}}

/* phrase */
.k-phrase{display:grid;align-content:center;padding:clamp(20px,3vw,48px)}
.k-phrase p{font:italic 400 clamp(1.04rem,min(7.4cqi,11.1cqb),7.38rem)/1.02 var(--f-serif);letter-spacing:-.02em;max-width:14ch}

/* grand signe */
.k-grand{display:grid;place-items:center}
.k-grand .g{font:900 clamp(2.75rem,min(24cqi,36cqb),23.4rem)/.85 var(--f-wide);font-stretch:125%;letter-spacing:-.06em;animation:respire 5s ease-in-out infinite}
.k-grand .g.serif{font:italic 400 clamp(2.42rem,min(20cqi,30cqb),19.8rem)/.9 var(--f-serif);letter-spacing:-.03em}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.06) rotate(-2deg)}}

/* photo */
.k-photo{background:var(--noir)}
.k-photo img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;animation:zoom 14s ease-in-out infinite alternate}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.12) translateY(-2%)}}
.k-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,12,.8),rgba(14,14,12,0) 58%)}
.k-photo .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:3;font:400 clamp(0.83rem,min(6cqi,9cqb),5.76rem)/1 var(--f-serif);letter-spacing:-.02em;color:#fff}
.k-photo .tag{color:#fff}

/* texte qui change (police, couleur, mots) */
.k-cycle{display:grid;align-content:center;padding:clamp(20px,3vw,44px);transition:background .6s,color .6s}
.k-cycle .cy-t{font-size:clamp(1.16rem,min(8.8cqi,13.2cqb),9rem);line-height:.98;letter-spacing:-.02em;transition:opacity .25s}
.k-cycle .cy-x{margin-top:14px;font-size:clamp(0.48rem,min(2.2cqi,3.3cqb),1.89rem);line-height:1.5;max-width:32ch;opacity:.8;transition:opacity .25s}
.k-cycle.out .cy-t,.k-cycle.out .cy-x{opacity:0}

/* liste qui s'allume ligne à ligne */
.k-liste{display:grid;align-content:center;padding:clamp(20px,3vw,44px) clamp(20px,3vw,44px)}
.k-liste h3{font:400 clamp(0.77rem,min(4.4cqi,6.6cqb),4.14rem)/1.05 var(--f-serif);letter-spacing:-.02em;margin-bottom:18px;max-width:20ch}
.k-liste li{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-top:1px solid currentColor;font:600 clamp(0.52rem,min(2.5cqi,3.75cqb),2.16rem)/1.2 var(--f-texte);opacity:.32;transition:opacity .4s,padding-left .5s var(--ease)}
.k-liste li small{font:500 .6rem var(--f-mono);letter-spacing:.2em;opacity:.7}
.k-liste li.on{opacity:1;padding-left:10px}

/* défilé vertical */
.k-rail .rail{position:absolute;left:0;right:0;top:0;animation:monte 14s linear infinite}
.k-rail .rail span{display:block;padding:10px 18px;font:900 clamp(0.77rem,min(5.2cqi,7.8cqb),5.04rem)/1 var(--f-wide);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase}
@keyframes monte{to{transform:translateY(-50%)}}

/* formes */
.k-formes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--g)}
.k-formes i{display:block;animation:forme 8s cubic-bezier(.45,0,.55,1) infinite}
.k-formes i:nth-child(1){border-radius:50%;background:var(--terre)}
.k-formes i:nth-child(2){border-radius:100% 0 0 0;background:var(--bleu);animation-delay:-.6s}
.k-formes i:nth-child(3){clip-path:polygon(0 100%,50% 0,100% 100%);background:var(--citron);animation-delay:-1.2s}
.k-formes i:nth-child(4){border-radius:50% 50% 0 0;background:var(--vert);animation-delay:-1.8s}
.k-formes i:nth-child(5){background:var(--noir);animation-delay:-2.4s}
.k-formes i:nth-child(6){border-radius:0 100% 0 0;background:var(--rose);animation-delay:-3s}
.k-formes i:nth-child(7){border-radius:0 0 100% 0;background:var(--violet);animation-delay:-3.6s}
.k-formes i:nth-child(8){clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--terre);animation-delay:-4.2s}
.k-formes i:nth-child(9){border-radius:50%;background:var(--menthe);animation-delay:-4.8s}
@keyframes forme{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(.8)}50%{transform:rotate(180deg) scale(1.04)}75%{transform:rotate(270deg) scale(.8)}100%{transform:rotate(360deg) scale(1)}}


/* étapes : un point qui avance de case en case */
.k-etapes{display:grid;place-items:center}
.etapes{position:relative;width:84%;display:grid;grid-template-columns:repeat(var(--ne),1fr)}
.etapes::before{content:"";position:absolute;left:calc(50% / var(--ne));right:calc(50% / var(--ne));top:21px;height:2px;background:currentColor;opacity:.25}
.etapes .pt{position:absolute;top:15px;width:14px;height:14px;margin-left:-7px;background:var(--citron);transition:left .9s var(--ease)}
.etapes div{position:relative;text-align:center;padding-top:56px;font:400 clamp(0.55rem,min(3.2cqi,4.8cqb),2.88rem)/1.1 var(--f-serif);opacity:.45;transition:opacity .5s}
.etapes div::before{content:"";position:absolute;left:calc(50% - 22px);top:0;width:44px;height:44px;border:2px solid currentColor;opacity:.4;transition:background .5s,opacity .5s}
.etapes div.on{opacity:1}.etapes div.on::before{opacity:1;background:currentColor}

/* appel et retour */
.k-cta{display:grid;align-content:end;padding:clamp(20px,3vw,48px)}
.k-cta::before{content:"";position:absolute;inset:0;background:var(--sweep,var(--rose));transform:translateY(101%);transition:transform .6s var(--ease)}
.k-cta:hover::before{transform:none}
.k-cta span{position:relative;font:400 clamp(1.43rem,min(14cqi,21cqb),14.4rem)/.92 var(--f-serif);letter-spacing:-.03em;transition:color .4s}
.k-cta span em{display:block;font-style:italic}
.k-cta:hover span,.k-cta:hover .fl{color:var(--noir)}
.k-cta .fl{position:absolute;right:clamp(20px,3vw,48px);top:clamp(20px,3vw,48px);font:500 .7rem var(--f-mono);letter-spacing:.24em;text-transform:uppercase;z-index:2;transition:color .4s}
.k-retour{display:grid;align-content:end;padding:clamp(20px,3vw,48px)}
.k-retour span{font:900 clamp(1.1rem,min(8cqi,12cqb),7.92rem)/.9 var(--f-wide);font-stretch:125%;letter-spacing:-.05em;text-transform:uppercase;transition:transform .4s var(--ease)}
.k-retour:hover span{transform:translateY(-10px)}

/* ---------- carrés propres à un service ---------- */

/* loupe qui balaie une page (audit) */
.k-loupe .page{position:absolute;inset:16% 14%;display:grid;align-content:start;gap:12px}
.k-loupe .page i{height:9px;background:currentColor;opacity:.55}
.k-loupe .page i:nth-child(3n){width:62%}.k-loupe .page i:nth-child(4n){width:80%}.k-loupe .page i:nth-child(1){height:22px;width:50%;opacity:.9}
.k-loupe .lp{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;border:3px solid var(--citron);background:var(--citron);mix-blend-mode:difference;animation:scan 9s ease-in-out infinite}
.k-loupe .lp::after{content:"";position:absolute;right:-26%;bottom:-26%;width:34%;height:6px;background:var(--citron);transform:rotate(45deg)}
@keyframes scan{0%,100%{left:12%;top:14%}25%{left:52%;top:20%}50%{left:44%;top:56%}75%{left:14%;top:50%}}

/* feuille de rapport (audit) */
.k-rapport{display:grid;place-items:center}
.rapport{width:84%;background:#fff;color:var(--noir);padding:14px 16px 8px;box-shadow:0 30px 40px -24px rgba(0,0,0,.45);transform:rotate(-3deg)}
.rapport b{display:block;font:400 1.25rem/1 var(--f-serif);margin-bottom:6px}
.rapport li{display:flex;gap:10px;align-items:center;padding:5px 0;border-top:1px solid rgba(14,14,12,.15);font:500 .7rem/1.25 var(--f-texte);opacity:0;animation:ligne 6s infinite}
.rapport li:nth-child(2){animation-delay:.6s}.rapport li:nth-child(3){animation-delay:1.2s}.rapport li:nth-child(4){animation-delay:1.8s}
.rapport li span{flex:none;width:18px;height:18px;display:grid;place-items:center;background:var(--terre);color:#fff;font:600 .66rem var(--f-mono)}
@keyframes ligne{0%,8%{opacity:0;transform:translateX(-8px)}16%,88%{opacity:1;transform:none}100%{opacity:0}}

/* carte à tampons (fidélité) */
.k-tampons{display:grid;place-items:center}
.carte{width:78%;padding:18px;background:var(--creme);color:var(--noir);box-shadow:0 30px 40px -24px rgba(0,0,0,.45)}
.carte b{display:block;font:400 1.4rem/1 var(--f-serif);margin-bottom:12px}
.tampons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tampons i{aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(14,14,12,.3);animation:tampon 8s steps(1) infinite}
.tampons i:nth-child(1){animation-delay:0s}.tampons i:nth-child(2){animation-delay:.5s}.tampons i:nth-child(3){animation-delay:1s}.tampons i:nth-child(4){animation-delay:1.5s}.tampons i:nth-child(5){animation-delay:2s}
.tampons i:nth-child(6){animation-delay:2.5s}.tampons i:nth-child(7){animation-delay:3s}.tampons i:nth-child(8){animation-delay:3.5s}.tampons i:nth-child(9){animation-delay:4s}.tampons i:nth-child(10){animation-delay:4.5s}
@keyframes tampon{0%{background:transparent}6%,90%{background:var(--terre);box-shadow:none}100%{background:transparent}}
.tampons i:nth-child(10){animation-name:tampon10}
@keyframes tampon10{0%{background:transparent}6%,90%{background:var(--citron);box-shadow:0 0 0 4px rgba(242,212,61,.35)}100%{background:transparent}}

/* message (fidélité) */
.k-sms{display:grid;place-items:center}
.sms{position:relative;width:76%;min-height:74px}
.sms .dots,.sms p{position:absolute;left:0;top:0;padding:16px 18px;background:#fff;color:var(--noir);border-radius:18px 18px 18px 4px;box-shadow:0 20px 30px -20px rgba(0,0,0,.5)}
.sms .dots{display:flex;gap:5px;animation:dots 7s infinite}
.sms .dots i{width:8px;height:8px;border-radius:50%;background:rgba(14,14,12,.45);animation:saute 1s infinite}
.sms .dots i:nth-child(2){animation-delay:.15s}.sms .dots i:nth-child(3){animation-delay:.3s}
.sms p{font:500 1rem/1.35 var(--f-texte);animation:msg 7s infinite}
@keyframes saute{50%{transform:translateY(-4px)}}
@keyframes dots{0%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes msg{0%,32%{opacity:0;transform:translateY(8px) scale(.96)}38%,92%{opacity:1;transform:none}100%{opacity:0}}

/* ticket qui s'imprime (caisse) */
.k-ticket{display:grid;place-items:center}
.ticket{width:56%;background:#fff;color:var(--noir);padding:16px 16px 22px;display:grid;gap:8px;animation:imprime 6s steps(18) infinite;clip-path:polygon(0 0,100% 0,100% 100%,92% 97%,84% 100%,76% 97%,68% 100%,60% 97%,52% 100%,44% 97%,36% 100%,28% 97%,20% 100%,12% 97%,4% 100%,0 97%)}
.ticket b{font:600 .9rem var(--f-mono)}.ticket i{height:6px;background:rgba(14,14,12,.6)}.ticket i:nth-child(3){width:70%}.ticket i:nth-child(4){width:52%}
.ticket span{font:500 .72rem var(--f-mono);letter-spacing:.06em}
@keyframes imprime{0%{transform:translateY(-110%)}55%,100%{transform:none}}
.ding{position:absolute;right:14%;top:16%;font:italic 400 clamp(0.99rem,min(6cqi,9cqb),5.4rem)/1 var(--f-serif);color:var(--citron);animation:ding 6s infinite}
@keyframes ding{0%,52%{opacity:0;transform:scale(.6) rotate(-10deg)}58%{opacity:1;transform:scale(1.15) rotate(6deg)}64%,92%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0}}

/* trois colonnes (caisse) */
.k-colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);padding:44px 12px 12px}
.k-colonnes > div{position:relative;border-top:2px solid currentColor;padding-top:8px;font:500 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.k-colonnes .cmd{position:absolute;left:12px;top:42%;width:calc((100% - 24px - 6px) / 3);padding:12px;background:var(--terre);color:#fff;font:600 .8rem/1.3 var(--f-texte);animation:colonne 7.5s cubic-bezier(.7,0,.3,1) infinite}
.k-colonnes .cmd small{display:block;font:500 .6rem var(--f-mono);opacity:.8}
@keyframes colonne{0%,22%{transform:translateX(0)}33%,55%{transform:translateX(calc(100% + 3px))}66%,90%{transform:translateX(calc(200% + 6px))}100%{transform:translateX(calc(200% + 6px));opacity:0}}

/* bouton « C'est prêt » */
.k-bouton{display:grid;place-items:center}
.bt{position:relative;padding:18px 30px;background:var(--creme);color:var(--noir);font:600 1rem var(--f-texte);animation:appui 3.4s cubic-bezier(.7,0,.3,1) infinite}
.bt::after{content:"";position:absolute;right:-14px;bottom:-22px;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.5 1.5L9 19z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes appui{0%,40%{transform:none;background:var(--creme);color:var(--noir)}46%{transform:scale(.93)}52%,90%{transform:none;background:var(--noir);color:var(--creme)}100%{background:var(--creme);color:var(--noir)}}

/* cloche (caisse) */
.k-cloche{display:grid;place-items:center}
.k-cloche svg{width:44%;fill:currentColor;transform-origin:50% 8%;animation:sonne 3s ease-in-out infinite}
@keyframes sonne{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(16deg)}72%{transform:rotate(-14deg)}79%{transform:rotate(9deg)}86%{transform:rotate(-5deg)}}

/* boucle (automatisation) */
.k-boucle{display:grid;place-items:center}
.k-boucle svg{position:absolute;width:74%;aspect-ratio:1;animation:tourne 9s linear infinite;fill:none;stroke:currentColor;stroke-width:1.4}
@keyframes tourne{to{transform:rotate(360deg)}}
.k-boucle .cy-t{position:relative;font:900 clamp(0.77rem,min(5.2cqi,7.8cqb),5.04rem)/1 var(--f-wide);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase;transition:opacity .25s}
.k-boucle.out .cy-t{opacity:0}

/* flux : un mail qui file vers le tableau (automatisation) */
.k-flux .env{position:absolute;left:12%;top:24%;width:56px;height:40px;background:var(--creme);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:vole 5s cubic-bezier(.7,0,.3,1) infinite}
.k-flux .env::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,var(--noir) 50%,transparent 51%),linear-gradient(to bottom left,transparent 49%,var(--noir) 50%,transparent 51%);background-size:100% 70%;background-repeat:no-repeat;opacity:.6}
@keyframes vole{0%,10%{transform:none;opacity:1}45%{transform:translate(160%,150%) scale(.5);opacity:1}50%,100%{transform:translate(160%,150%) scale(.2);opacity:0}}
.k-flux .feuille{position:absolute;right:12%;bottom:14%;width:52%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.k-flux .feuille i{height:18px;background:rgba(14,14,12,.18);animation:remplit 5s steps(1) infinite}
.k-flux .feuille i:nth-child(n+5){animation-delay:.2s}.k-flux .feuille i:nth-child(n+9){animation-delay:.4s}
@keyframes remplit{0%,48%{background:rgba(14,14,12,.18)}50%,96%{background:var(--noir)}}

/* cases cochées */
.k-coche{display:grid;align-content:center;padding:clamp(18px,2.4vw,34px)}
.k-coche li{display:flex;gap:12px;align-items:center;padding:8px 0;font:600 clamp(0.47rem,min(2.2cqi,3.3cqb),1.89rem)/1.2 var(--f-texte)}
.k-coche li i{position:relative;flex:none;width:22px;height:22px;border:2px solid currentColor}
.k-coche li i::after{content:"";position:absolute;left:5px;top:1px;width:7px;height:12px;border:solid currentColor;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);animation:coche 6s infinite}
.k-coche li:nth-child(2) i::after{animation-delay:.7s}.k-coche li:nth-child(3) i::after{animation-delay:1.4s}.k-coche li:nth-child(4) i::after{animation-delay:2.1s}
@keyframes coche{0%,8%{transform:rotate(45deg) scale(0)}14%,90%{transform:rotate(45deg) scale(1)}100%{transform:rotate(45deg) scale(0)}}

/* fiche client qui se remplit (CRM) */
.k-fiche{display:grid;place-items:center}
.fiche{width:76%;background:#fff;color:var(--noir);padding:18px;box-shadow:0 30px 40px -24px rgba(0,0,0,.45);display:grid;gap:10px}
.fiche b{font:400 1.4rem/1 var(--f-serif)}
.fiche div{display:grid;grid-template-columns:6.5em 1fr;gap:10px;align-items:center;font:500 .6rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(14,14,12,.55)}
.fiche div i{height:12px;background:var(--violet);transform-origin:left;animation:champ 6s var(--ease) infinite}
.fiche div:nth-of-type(2) i{animation-delay:.5s;width:70%}.fiche div:nth-of-type(3) i{animation-delay:1s}.fiche div:nth-of-type(4) i{animation-delay:1.5s;width:56%}
@keyframes champ{0%,6%{transform:scaleX(0)}22%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* agenda (CRM) */
.k-agenda{display:grid;grid-template-rows:auto 1fr;padding:44px 14px 14px;gap:8px}
.k-agenda .jours{display:grid;grid-template-columns:repeat(7,1fr);font:500 .58rem var(--f-mono);letter-spacing:.1em;text-align:center;opacity:.6}
.k-agenda .cases{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:3px}
.k-agenda .cases i{box-shadow:inset 0 0 0 1px rgba(14,14,12,.2);transition:background .5s}
.k-agenda .cases i.on{background:var(--violet)}.k-agenda .cases i.r{background:var(--citron)}

/* lien entre deux personnes (ambassadeurs) */
.k-lien{display:grid;place-items:center}
.k-lien svg{width:80%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2}
.k-lien .trait{stroke-dasharray:260;stroke-dashoffset:260;animation:trait 5s ease-in-out infinite}
.k-lien .rond{fill:currentColor;animation:rond 5s ease-in-out infinite}
.k-lien .rond2{animation-delay:.4s}
.k-lien .coeur{fill:var(--rose);stroke:none;transform-box:fill-box;transform-origin:center;animation:coeur 5s ease-in-out infinite}
@keyframes trait{0%,10%{stroke-dashoffset:260}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:260}}
@keyframes rond{0%,100%{opacity:.5}20%,90%{opacity:1}}
@keyframes coeur{0%,44%{transform:scale(0)}52%{transform:scale(1.3)}58%,90%{transform:scale(1)}100%{transform:scale(0)}}

/* paliers 1 à 5 (ambassadeurs) */
.k-paliers{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:6px;padding:46px 16px 16px}
.k-paliers div{position:relative;background:currentColor;transform-origin:bottom;animation:monte-palier 7s var(--ease) infinite}
.k-paliers div:nth-of-type(1){height:20%}.k-paliers div:nth-of-type(2){height:36%;animation-delay:.3s}.k-paliers div:nth-of-type(3){height:52%;animation-delay:.6s}.k-paliers div:nth-of-type(4){height:68%;animation-delay:.9s}.k-paliers div:nth-of-type(5){height:86%;animation-delay:1.2s}
.k-paliers div span{position:absolute;left:0;right:0;top:-24px;text-align:center;font:500 .7rem var(--f-mono);color:inherit;mix-blend-mode:normal}
@keyframes monte-palier{0%,4%{transform:scaleY(0)}24%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}

.pied{padding:22px;text-align:center;font:500 .6rem var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:#777;background:#000}

@media (max-width:820px){
  :root{--n:6}
  .t{grid-column:span var(--cm,6);grid-row:span var(--rm,6)}
  .k-titre .mini{grid-template-columns:repeat(3,13px)}.k-titre .mini i{width:13px;height:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.t{opacity:1;transform:none}}

/* six points + score global */
.k-score{padding:0}
.ks-body{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(10px,4cqi,36px);padding:clamp(34px,8cqb,58px) clamp(16px,4.5cqi,44px) clamp(14px,5cqb,34px)}
.ks-list{list-style:none;margin:0;padding:0;display:grid}
.ks-list li{display:grid;grid-template-columns:auto minmax(0,1fr) 24% auto;align-items:center;gap:clamp(6px,1.6cqi,14px);padding:clamp(5px,1.7cqb,11px) 0;border-top:1px solid currentColor;opacity:1;transition:opacity .45s}
.k-score.anim .ks-list li{opacity:.3}
.k-score.anim .ks-list li.on{opacity:1}
.ks-list small{font:500 .58rem var(--f-mono);letter-spacing:.18em;opacity:.7}
.ks-list span{font:700 clamp(0.7rem,min(3.1cqi,5.4cqb),1.7rem)/1.1 var(--f-texte);letter-spacing:-.01em}
.ks-list .bar{display:block;height:4px;background:rgba(14,14,12,.16)}
.ks-list .bar b{display:block;height:100%;width:var(--v,0%);background:var(--terre);transition:width .8s var(--ease)}
.k-score.anim .ks-list .bar b{width:0}
.k-score.anim .ks-list li.on .bar b{width:var(--v)}
.ks-list em{font:500 .68rem var(--f-mono);font-style:normal;min-width:2ch;text-align:right}
.ks-gauge{display:grid;justify-items:center;align-content:center;gap:clamp(6px,2cqb,16px)}
.ks-gauge .ring{position:relative;width:min(100%,60cqb)}
.ks-gauge svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.ks-gauge circle{fill:none;stroke-width:9}
.ks-gauge .tr{stroke:rgba(14,14,12,.14)}
.ks-gauge .pr{stroke:var(--terre);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:59}
.ks-gauge .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ks-gauge .num b{font:400 clamp(1.5rem,min(11cqi,17cqb),5.4rem)/.9 var(--f-serif);letter-spacing:-.03em}
.ks-gauge .num span{font:500 .58rem var(--f-mono);letter-spacing:.2em;opacity:.6}
.ks-gauge .lab{font:500 .6rem var(--f-mono);letter-spacing:.2em;text-transform:uppercase;text-align:center;display:grid;gap:2px}
.ks-gauge .lab strong{color:var(--terre);font-weight:700;opacity:1;transition:opacity .5s,transform .5s}
.k-score.anim:not(.fini) .lab strong{opacity:0;transform:translateY(4px)}
@container (max-width:430px){.ks-body{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:10px;padding:36px 14px 14px}.ks-list .bar{display:none}.ks-list li{grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:clamp(4px,1.4cqb,9px) 0}.ks-list span{font-size:clamp(.66rem,3.7cqi,.95rem)}.ks-gauge .ring{width:min(100%,42cqb)}.ks-gauge .num b{font-size:clamp(1.3rem,9cqi,2.4rem)}}
@container (max-width:310px){.ks-list .bar,.ks-list em,.ks-gauge .lab{display:none}.ks-list li{grid-template-columns:auto minmax(0,1fr)}}

/* tuile « Fait » (automatisation) : cases vides, elles se cochent au survol ou au toucher */
.k-coche.survol li{cursor:pointer}
.k-coche.survol li i::after{animation:none;transform:rotate(45deg) scale(0);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.k-coche.survol li:hover i::after,.k-coche.survol li.on i::after{transform:rotate(45deg) scale(1)}

/* tuile calendrier (CRM) : un vrai mois ; un rappel s'ajoute tout seul, point rouge puis commentaire à droite */
.k-cal{display:grid;grid-template-rows:auto auto 1fr;gap:6px;padding:16px 12px 12px;color:var(--creme)}
.k-cal .cal-t{font:400 clamp(.95rem,min(5.4cqi,6cqb),1.6rem)/1 var(--f-serif);letter-spacing:-.01em;padding-left:2px}
.k-cal .cal-j{display:grid;grid-template-columns:repeat(7,1fr);font:500 .56rem var(--f-mono);letter-spacing:.1em;text-align:center;color:rgba(239,232,216,.55)}
.k-cal .cal-g{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:2px}
.k-cal .cal-g>i{position:relative;display:block;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(239,232,216,.12);font-style:normal}
.k-cal .cal-g>i b{position:absolute;left:5px;top:3px;font:500 clamp(.5rem,min(2.6cqi,2.8cqb),.7rem)/1 var(--f-mono);font-variant-numeric:tabular-nums}
.k-cal .cal-g>i.h{box-shadow:none;color:rgba(239,232,216,.28)}
.k-cal .cal-g>i.auj{background:var(--creme);color:var(--noir)}
.k-cal .cal-g>i u{position:absolute;left:50%;bottom:20%;width:6px;height:6px;margin-left:-3px;border-radius:50%;text-decoration:none;background:var(--violet)}
.k-cal .cal-g>i u.c{background:var(--citron)}
.k-cal .cal-g>i u.rg{background:#ff3b30;box-shadow:0 0 0 0 rgba(255,59,48,.55);transform:scale(0);opacity:0;animation:cal-point 8s cubic-bezier(.34,1.56,.64,1) infinite}
.k-cal .cal-g>i.nv{animation:cal-jour 8s ease-in-out infinite}
.k-cal .cal-bulle{position:absolute;left:calc(200% / 7 + 8px);top:calc(80% + 100% / 10);transform:translate(-8px,-50%);display:flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:9px;background:#fff;color:var(--noir);font:600 clamp(.52rem,min(2.8cqi,3cqb),.74rem)/1.15 var(--f-texte);white-space:nowrap;box-shadow:0 10px 18px -8px rgba(0,0,0,.6);opacity:0;animation:cal-bulle 8s cubic-bezier(.16,1,.3,1) infinite}
.k-cal .cal-bulle em{flex:none;width:7px;height:7px;border-radius:50%;background:#ff3b30}
.k-cal .cal-bulle::before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;transform:rotate(45deg);border-radius:2px}
@keyframes cal-jour{0%,10%{background:transparent}16%,80%{background:rgba(255,59,48,.18);box-shadow:inset 0 0 0 1px rgba(255,59,48,.8)}90%,100%{background:transparent}}
@keyframes cal-point{0%,10%{opacity:0;transform:scale(0)}16%{opacity:1;transform:scale(1.5)}20%,78%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,.55)}50%{box-shadow:0 0 0 7px rgba(255,59,48,0)}88%,100%{opacity:0;transform:scale(0)}}
@keyframes cal-bulle{0%,22%{opacity:0;transform:translate(-8px,-50%)}30%,78%{opacity:1;transform:translate(0,-50%)}88%,100%{opacity:0;transform:translate(0,-50%)}}
@media (prefers-reduced-motion:reduce){
  .k-cal .cal-g>i u.rg,.k-cal .cal-bulle{animation:none;opacity:1;transform:none}
  .k-cal .cal-bulle{transform:translate(0,-50%)}
  .k-cal .cal-g>i.nv{animation:none;background:rgba(255,59,48,.18);box-shadow:inset 0 0 0 1px rgba(255,59,48,.8)}
}

/* citation : texte seul, grande serif italique */
.k-citation{display:grid;place-items:center;text-align:center;padding:clamp(22px,4vw,56px)}
.k-citation p{font:400 clamp(1.4rem,min(12cqi,19cqb),4.6rem)/1.02 var(--f-serif);letter-spacing:-.025em;max-width:13ch;text-wrap:balance}
.k-citation em{display:block;font-style:italic;color:var(--rose)}
/* paliers : la 5e barre prend la couleur du grade Diamond */
.k-paliers div:nth-of-type(5){background:#7FE7FF;box-shadow:inset 0 0 0 2px var(--noir),0 0 22px rgba(127,231,255,.55)}

/* « Votre satisfaction, votre recommandation, notre fierté » : trois lignes qui se révèlent, reliées par un fil, un point qui pulse à la fin */
.k-trio{display:grid;align-content:center;padding:clamp(20px,5cqi,52px)}
.k-trio ol{position:relative;display:grid;gap:clamp(10px,4cqb,30px);list-style:none;margin:0;padding:0 0 0 clamp(30px,8cqi,56px)}
.k-trio ol::before{content:"";position:absolute;left:8px;top:.7em;bottom:.7em;width:2px;background:currentColor;opacity:.55;transform:scaleY(0);transform-origin:top;animation:trio-fil 12s linear infinite}
.k-trio li{position:relative;overflow:hidden;padding:.04em 0 .14em;font:400 clamp(1.25rem,2.3vw,2.5rem)/1.04 var(--f-serif);letter-spacing:-.02em}
.k-trio li span{display:block;transform:translateY(112%)}
.k-trio li em{font-style:italic;opacity:.6}
.k-trio li:nth-child(3){overflow:visible}
.k-trio li:nth-child(3) span{font-size:1.18em;font-style:italic;color:var(--terre)}
.k-trio li:nth-child(3) em{color:inherit;opacity:.85}
.k-trio li::before{content:"";position:absolute;left:calc(-1 * clamp(30px,8cqi,56px) + 2px);top:.5em;width:14px;height:14px;border-radius:50%;background:currentColor;transform:scale(0)}
.k-trio li:nth-child(3)::before{background:var(--terre)}
.k-trio li:nth-child(3)::after{content:"";position:absolute;left:calc(-1 * clamp(30px,8cqi,56px) + 2px);top:.5em;width:14px;height:14px;border-radius:50%;border:2px solid var(--terre);opacity:0;animation:trio-onde 12s ease-out infinite}
.k-trio li:nth-child(1) span{animation:trio-a 12s cubic-bezier(.16,1,.3,1) infinite}.k-trio li:nth-child(1)::before{animation:trio-pa 12s cubic-bezier(.34,1.56,.64,1) infinite}
.k-trio li:nth-child(2) span{animation:trio-b 12s cubic-bezier(.16,1,.3,1) infinite}.k-trio li:nth-child(2)::before{animation:trio-pb 12s cubic-bezier(.34,1.56,.64,1) infinite}
.k-trio li:nth-child(3) span{animation:trio-c 12s cubic-bezier(.16,1,.3,1) infinite}.k-trio li:nth-child(3)::before{animation:trio-pc 12s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes trio-a{0%,2.5%{transform:translateY(112%)}9%,62%{transform:none}68%,100%{transform:translateY(-112%)}}
@keyframes trio-b{0%,13.5%{transform:translateY(112%)}20%,62%{transform:none}68%,100%{transform:translateY(-112%)}}
@keyframes trio-c{0%,24%{transform:translateY(80%);opacity:0}31%,93%{transform:none;opacity:1}99%,100%{transform:translateY(-80%);opacity:0}}
@keyframes trio-pa{0%,2.5%{transform:scale(0)}8%,62%{transform:scale(1)}68%,100%{transform:scale(0)}}
@keyframes trio-pb{0%,13.5%{transform:scale(0)}19%,62%{transform:scale(1)}68%,100%{transform:scale(0)}}
@keyframes trio-pc{0%,24%{transform:scale(0)}30%,93%{transform:scale(1)}99%,100%{transform:scale(0)}}
@keyframes trio-fil{0%,2.5%{transform:scaleY(0);opacity:.55}27%,62%{transform:scaleY(1);opacity:.55}68%,100%{transform:scaleY(1);opacity:0}}
@keyframes trio-onde{0%,30%{opacity:0;transform:scale(1)}31%{opacity:.9;transform:scale(1)}43%{opacity:0;transform:scale(3.2)}46%{opacity:.9;transform:scale(1)}58%{opacity:0;transform:scale(3.2)}61%{opacity:.9;transform:scale(1)}73%{opacity:0;transform:scale(3.2)}76%{opacity:.9;transform:scale(1)}88%{opacity:0;transform:scale(3.2)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .k-trio li span{animation:none;transform:none}.k-trio li::before{animation:none;transform:scale(1)}.k-trio ol::before{animation:none;transform:none}.k-trio li:nth-child(3)::after{animation:none}
}

/* CRM : tuiles claires */
.bg-creme .etapes .pt{background:var(--violet)}
.k-cal.clair{color:var(--noir)}
.k-cal.clair .cal-j{color:rgba(14,14,12,.5)}
.k-cal.clair .cal-g>i{box-shadow:inset 0 0 0 1px rgba(14,14,12,.14)}
.k-cal.clair .cal-g>i.h{color:rgba(14,14,12,.28)}
.k-cal.clair .cal-g>i.auj{background:var(--noir);color:var(--creme)}
.k-cal.clair .cal-bulle{background:var(--noir);color:#fff}
.k-cal.clair .cal-bulle::before{background:var(--noir)}