/* ================================================================ KROMATIK V2 — Design System One-page · Dark · Chromatic ================================================================ */ /* ── Reset & Variables ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* overflow-x:clip (et non hidden) : empêche le scroll horizontal SANS transformer en conteneur de défilement — indispensable pour que position:sticky (barres d'onglets) fonctionne. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg);transition:background-color .5s ease;overflow-x:clip} body{ background: radial-gradient(62% 52% at 10% -4%, rgba(var(--a1),.07) 0%, transparent 60%), radial-gradient(58% 52% at 102% 104%, rgba(var(--a2),.06) 0%, transparent 60%), var(--bg); background-attachment:fixed; color:var(--text); font-family:'Inter',sans-serif; line-height:1.6; transition:background-color .5s ease,color .5s ease; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{cursor:pointer;font-family:inherit;border:none;background:none} ul,ol{list-style:none} /* ════════════════════════════════════════════════ THÈMES — chaque palette pilote fond, texte & accents. --wash = teinte des surfaces vitrées/bordures (clair sur dark, foncé sur light) --a1/--a2 = accents en "R,G,B" pour les halos rgba() ════════════════════════════════════════════════ */ :root, html[data-theme="dark-pulse"]{ color-scheme:dark; --wash:255,255,255; --a1:255,58,0; --a2:136,0,255; --bg:#080808; --s:#101010; --card:#161616; --b:rgba(var(--wash),.07); --bh:rgba(var(--wash),.16); --text:#F0F0EE; --muted:#8a8a8a; --dim:#4a4a4a; --orange:#FF3A00; --purple:#8800FF; --grad:linear-gradient(135deg,#FF3A00,#8800FF); --grad-t:linear-gradient(135deg,#FF5500,#CC00FF); --r:8px; --rm:16px; --rl:24px; --rx:40px; --fast:0.18s ease; --med:0.35s ease; --sans:'Syne',sans-serif; /* ── Échelle typo fluide ── */ --fs-display:clamp(3rem,9vw,7rem); --fs-h1:clamp(2.1rem,5.2vw,3.9rem); --fs-h2:clamp(1.65rem,3.8vw,2.5rem); --fs-h3:clamp(1.15rem,2.3vw,1.55rem); --fs-body:clamp(.95rem,1.15vw,1.05rem); --fs-sm:.82rem; /* ── Rythme d'espacement ── */ --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4rem; --sp-7:6rem; --sp-8:8rem; /* ── Glows standardisés (suivent la palette) ── */ --glow-a1:0 0 40px rgba(var(--a1),.28); --glow-a2:0 0 40px rgba(var(--a2),.24); --ease-out:cubic-bezier(.2,.7,.2,1); } /* ── DARK · ABYSS (cyan / indigo) ── */ html[data-theme="dark-abyss"]{ color-scheme:dark; --wash:235,243,255; --a1:18,200,230; --a2:91,108,255; --bg:#060A12; --s:#0E1524; --card:#141D30; --b:rgba(var(--wash),.08); --bh:rgba(var(--wash),.18); --text:#EAF2FF; --muted:#8A99B5; --dim:#46556e; --orange:#12C8E6; --purple:#5B6CFF; --grad:linear-gradient(135deg,#12C8E6,#5B6CFF); --grad-t:linear-gradient(135deg,#39E0FF,#7C8CFF); } /* ── DARK · EMBER (ambre / rose) ── */ html[data-theme="dark-ember"]{ color-scheme:dark; --wash:255,248,240; --a1:255,176,32; --a2:255,46,99; --bg:#0C0806; --s:#17110A; --card:#211710; --b:rgba(var(--wash),.08); --bh:rgba(var(--wash),.18); --text:#FBEFE6; --muted:#A38E7E; --dim:#5a4a3c; --orange:#FFB020; --purple:#FF2E63; --grad:linear-gradient(135deg,#FFB020,#FF2E63); --grad-t:linear-gradient(135deg,#FFC247,#FF4D7D); } /* ── LIGHT · DAY (papier crème chaud, doux) ── */ html[data-theme="light-day"]{ color-scheme:light; --wash:28,22,14; --a1:230,58,0; --a2:122,31,255; --bg:#E3DCCD; --s:#EAE3D5; --card:#F0E9DC; --b:rgba(var(--wash),.12); --bh:rgba(var(--wash),.24); --text:#1B1712; --muted:#5F594E; --dim:#9C9486; --orange:#D43500; --purple:#7A1FFF; --grad:linear-gradient(135deg,#D43500,#7A1FFF); --grad-t:linear-gradient(135deg,#E8500F,#9B3DFF); } /* ── LIGHT · MIST (gris-bleu froid, doux) ── */ html[data-theme="light-mist"]{ color-scheme:light; --wash:14,26,44; --a1:0,134,190; --a2:47,84,255; --bg:#D7DFE9; --s:#E0E8F0; --card:#E7EEF5; --b:rgba(var(--wash),.12); --bh:rgba(var(--wash),.24); --text:#101C28; --muted:#4E6276; --dim:#8597AB; --orange:#0088BE; --purple:#2F54FF; --grad:linear-gradient(135deg,#0088BE,#2F54FF); --grad-t:linear-gradient(135deg,#19A6D6,#4F74FF); } /* ── LIGHT · BLUSH (rose poudré chaud, doux) ── */ html[data-theme="light-blush"]{ color-scheme:light; --wash:38,20,16; --a1:240,76,40; --a2:200,29,142; --bg:#EADDD6; --s:#F0E6DF; --card:#F3EBE4; --b:rgba(var(--wash),.12); --bh:rgba(var(--wash),.24); --text:#221610; --muted:#6F5A52; --dim:#B3A096; --orange:#F04C28; --purple:#C81D8E; --grad:linear-gradient(135deg,#F04C28,#C81D8E); --grad-t:linear-gradient(135deg,#FF6845,#E23FA8); } /* ── Noise ── */ .noise{ position:fixed;inset:0;z-index:9999;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); background-size:200px 200px;opacity:.4; } /* ── Typography ── */ .display-xl{font-family:var(--sans);font-size:clamp(4rem,12vw,14rem);font-weight:800;line-height:.85;letter-spacing:-.05em} .display-lg{font-family:var(--sans);font-size:clamp(3rem,8vw,8rem);font-weight:800;line-height:.88;letter-spacing:-.04em} .display-md{font-family:var(--sans);font-size:clamp(2rem,5vw,5rem);font-weight:800;line-height:.95;letter-spacing:-.03em} .display-sm{font-family:var(--sans);font-size:clamp(1.5rem,3.5vw,3rem);font-weight:800;line-height:1;letter-spacing:-.025em} .text-grad{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .text-muted{color:var(--muted)} .label-sm{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* ── Layout ── */ .container{max-width:1280px;margin:0 auto;padding:0 2.5rem} .section{padding:7rem 0;position:relative;isolation:isolate} /* ── Parallax décoratif de section (lueurs qui dérivent au scroll) ── */ #hero{isolation:isolate} /* Pas d'overflow:hidden/contain:paint ici : sinon les halos floutés sont coupés net au bord de chaque section → couture visible. Le scroll horizontal est déjà géré par html{overflow-x:clip}. */ .sec-fx{position:absolute;inset:0;pointer-events:none;z-index:-1;contain:layout} /* Universel : tout conteneur qui héberge un halo décoratif ne doit PAS le découper (sinon couture visible entre hero/sections). Ex. .catalog-hero, .dv-hero (overflow:hidden inline). #hero (accueil) est exclu : il clippe volontairement son canvas/orbes. */ :has(> .sec-fx):not(#hero){overflow:visible!important} .sec-fx-blob{position:absolute;border-radius:50%;filter:blur(96px);will-change:transform;opacity:.32} .sec-fx-blob.b1{width:min(46vw,560px);aspect-ratio:1;background:radial-gradient(circle,rgba(var(--a1),.55),transparent 70%);top:-12%;left:-6%} .sec-fx-blob.b2{width:min(40vw,480px);aspect-ratio:1;background:radial-gradient(circle,rgba(var(--a2),.5),transparent 70%);bottom:-14%;right:-5%} [data-theme^="light"] .sec-fx-blob{opacity:.24} .section-label{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem} .section-label::before{content:'';width:28px;height:2px;background:var(--orange)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} /* ── Buttons — Apple-style ── */ .btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.875rem 1.75rem;border-radius:var(--rx); font-family:var(--sans);font-size:.9rem;font-weight:700; border:none;cursor:pointer;white-space:nowrap; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease,opacity .18s ease; text-decoration:none;position:relative;overflow:hidden; -webkit-font-smoothing:antialiased;letter-spacing:.01em; } .btn:active{transform:scale(.95) !important;box-shadow:none !important} .btn::after{ content:'';position:absolute;inset:0; background:linear-gradient(105deg,transparent 40%,rgba(var(--wash),.11) 50%,transparent 60%); transform:translateX(-100%);transition:transform .5s ease;pointer-events:none; } .btn:hover::after{transform:translateX(100%)} /* Gradient */ .btn-grad{background:var(--grad);color:#fff;box-shadow:0 2px 16px rgba(var(--a1),.25)} .btn-grad:hover{opacity:.9;transform:translateY(-3px) scale(1.02);box-shadow:0 10px 36px rgba(var(--a1),.4)} /* Liquid glass */ .btn-liquid{ background:rgba(var(--wash),.07); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(var(--wash),.14); color:var(--text); box-shadow:0 4px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(var(--wash),.12); } .btn-liquid:hover{ background:rgba(var(--wash),.12);border-color:rgba(var(--wash),.22); transform:translateY(-3px) scale(1.02); box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(var(--wash),.18); } /* Neon */ .btn-neon{ background:transparent;color:var(--text); border:1.5px solid rgba(var(--a1),.55); box-shadow:0 0 10px rgba(var(--a1),.18),inset 0 0 10px rgba(var(--a1),.04); text-shadow:0 0 12px rgba(var(--a1),.3); } .btn-neon:hover{ border-color:var(--orange); box-shadow:0 0 22px rgba(var(--a1),.5),0 0 55px rgba(var(--a1),.12),inset 0 0 16px rgba(var(--a1),.07); transform:translateY(-2px);text-shadow:0 0 16px rgba(var(--a1),.65); } .btn-outline{background:transparent;color:var(--text);border:1px solid var(--b)} .btn-outline:hover{border-color:var(--bh);background:rgba(var(--wash),.04);transform:translateY(-2px)} .btn-ghost{ background:rgba(var(--wash),.05);color:var(--text);border:1px solid var(--b); box-shadow:inset 0 1px 0 rgba(var(--wash),.06); } .btn-ghost:hover{background:rgba(var(--wash),.09);border-color:var(--bh);transform:translateY(-2px)} .btn-sm{padding:.55rem 1.1rem;font-size:.8rem} .badge-new{ display:inline-flex;align-items:center;gap:.35rem; padding:.25rem .75rem;border-radius:var(--rx); background:rgba(var(--a1),.15);border:1px solid rgba(var(--a1),.3); font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange); } /* ── Scroll progress ── */ .scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--grad);z-index:8000;transform-origin:left;transform:scaleX(0);pointer-events:none} /* ── Cursor ── */ .c-dot,.c-ring{position:fixed;pointer-events:none;z-index:9990;display:none;border-radius:50%} .c-dot{width:8px;height:8px;background:#fff;mix-blend-mode:difference;transition:transform .1s} .c-ring{width:40px;height:40px;border:1.5px solid rgba(var(--wash),.22);transition:width .25s,height .25s,border-color .25s} @media(pointer:fine){.c-dot,.c-ring{display:block}} .c-dot.hov{transform:scale(5)} .c-ring.hov{width:66px;height:66px;border-color:rgba(var(--a1),.4)} /* ─══════════════════════════════════════════════ INTRO ANIMATION ════════════════════════════════════════════════ */ #intro{ position:fixed;inset:0;z-index:10000; background:var(--bg); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3rem; } .intro-icon-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .intro-burst{position:absolute;left:50%;top:50%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 0 7px currentColor);animation:intro-fly var(--dur,1.1s) ease-out forwards;line-height:1} .intro-burst svg{width:1em;height:1em;display:block} @keyframes intro-fly{ 0%{transform:translate(-50%,-50%) rotate(0deg) scale(.35);opacity:1} 75%{opacity:.9} 100%{transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) rotate(var(--rot,200deg)) scale(1.25);opacity:0} } /* Même rendu que l'intro de la page Devis : titre texte + sous-titre + halo large */ .intro-logo-wrap{position:relative;text-align:center;z-index:1;opacity:0;will-change:transform,opacity} .intro-title{font-family:'Syne',sans-serif;font-size:clamp(2.2rem,8vw,5rem);font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1;position:relative;z-index:1} .intro-title span{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .intro-sub{font-family:'Syne',sans-serif;font-size:clamp(.6rem,1.8vw,.85rem);font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;position:relative;z-index:1} .intro-glow{ position:absolute;inset:-60%;border-radius:50%; background:radial-gradient(circle,rgba(var(--a1),.18),rgba(var(--a2),.14),transparent 70%); filter:blur(55px); opacity:.55;will-change:transform,opacity; } @keyframes intro-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:1}} .intro-progress{ width:min(280px,50vw);height:2px; background:rgba(var(--wash),.06);border-radius:2px;overflow:hidden; } .intro-bar{height:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;border-radius:2px} /* ─══════════════════════════════════════════════ NAVIGATION ════════════════════════════════════════════════ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:1000; padding:1.25rem 2.5rem; display:flex;align-items:center;justify-content:space-between; transition:background var(--med),backdrop-filter var(--med); } .nav.scrolled{background:var(--s);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--b)} .nav-logo{ font-family:var(--sans);font-size:1.3rem;font-weight:800;letter-spacing:-.04em; display:flex;align-items:center;gap:.1em; } .logo-k{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav-links{display:flex;align-items:center;gap:.15rem;flex-wrap:nowrap;margin-right:1rem} .nav-link{ padding:.5rem .7rem;border-radius:var(--r); font-size:.85rem;font-weight:600;color:var(--muted); white-space:nowrap;line-height:1; transition:all var(--fast); } .nav-link:hover,.nav-link.active{color:var(--text);background:rgba(var(--wash),.06)} /* ── Catalogue de prod — bouton CTA dans la nav ── */ .nav-link.nav-catalogue{ background:linear-gradient(135deg,rgba(var(--a1),.18),rgba(var(--a2),.18)); border:1px solid rgba(255,80,0,.38); color:var(--text);font-weight:700; padding:.4rem .85rem;border-radius:var(--rx); box-shadow:0 0 12px rgba(var(--a1),.1); } .nav-link.nav-catalogue:hover, .nav-link.nav-catalogue.active{ background:linear-gradient(135deg,rgba(var(--a1),.3),rgba(var(--a2),.3)); border-color:rgba(255,80,0,.6); box-shadow:0 0 22px rgba(var(--a1),.25),0 0 10px rgba(var(--a2),.15); color:var(--text); } /* ── Prestations (néon, comme l'ancien bouton supprimé) ── */ .nav-link.nav-presta{ border:1.5px solid rgba(var(--a1),.55); color:var(--text);font-weight:700; padding:.4rem 1.1rem;border-radius:var(--rx); box-shadow:0 0 10px rgba(var(--a1),.18),inset 0 0 10px rgba(var(--a1),.04); text-shadow:0 0 12px rgba(var(--a1),.3); } .nav-link.nav-presta:hover, .nav-link.nav-presta.active{ border-color:var(--orange); box-shadow:0 0 22px rgba(var(--a1),.5),0 0 45px rgba(var(--a1),.12),inset 0 0 16px rgba(var(--a1),.07); color:var(--text);text-shadow:0 0 16px rgba(var(--a1),.6); } /* ── CTA Devis (rempli, le plus visible) ── */ .nav-link.nav-devis{ background:var(--grad); border:1px solid transparent;color:#fff!important;font-weight:800; padding:.45rem 1rem;border-radius:var(--rx); display:inline-flex;align-items:center;gap:.4rem; box-shadow:0 0 18px rgba(var(--a1),.28); animation:nav-devis-pulse 2.6s ease-in-out infinite; } .nav-link.nav-devis::before{content:'✎︎';font-size:.95em;color:#fff} .nav-link.nav-devis:hover, .nav-link.nav-devis.active{ filter:brightness(1.12); box-shadow:0 0 26px rgba(var(--a1),.5),0 0 14px rgba(var(--a2),.35); transform:translateY(-1px); } @keyframes nav-devis-pulse{ 0%,100%{box-shadow:0 0 16px rgba(var(--a1),.25)} 50% {box-shadow:0 0 26px rgba(var(--a1),.45),0 0 14px rgba(var(--a2),.3)} } .nav-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0} /* Nav pleine largeur (modif 14) : logo plus près du bord gauche + assez de place à droite pour que le bouton Compte ne chevauche plus le CTA Devis. */ .nav>div{max-width:none!important;padding-left:0!important;padding-right:0!important} .nav-links{min-width:0} .nav-burger{ display:none;width:32px;height:24px; flex-direction:column;justify-content:space-between;padding:2px 0; } .nav-burger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all var(--fast)} .mobile-nav{ position:fixed;inset:0;z-index:999; background:var(--s);background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity var(--med); } .mobile-nav.open{opacity:1;pointer-events:all} .mobile-links{display:flex;flex-direction:column;align-items:center;gap:2rem} .mobile-link{font-family:var(--sans);font-size:2rem;font-weight:800;color:var(--muted);transition:color var(--fast)} .mobile-link:hover{color:var(--text)} /* ─══════════════════════════════════════════════ HERO ════════════════════════════════════════════════ */ #hero{ min-height:100vh; display:flex;flex-direction:column;justify-content:flex-end; padding-bottom:5rem;position:relative;overflow:hidden; } #hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero-orb{position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none} .hero-orb-a{width:60vw;height:60vw;max-width:800px;max-height:800px;background:var(--orange);opacity:.08;top:-20%;right:-10%;animation:orb 12s ease-in-out infinite} .hero-orb-b{width:50vw;height:50vw;max-width:700px;max-height:700px;background:var(--purple);opacity:.08;bottom:-15%;left:-10%;animation:orb 10s ease-in-out infinite reverse;animation-delay:-5s} @keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-3%) scale(1.08)}} .hero-content{position:relative;z-index:1} .hero-eyebrow{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;opacity:0} .hero-pulse{width:8px;height:8px;background:var(--orange);border-radius:50%;animation:pulse 2s ease-in-out infinite;flex-shrink:0} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}} .hero-title{ font-family:var(--sans);font-weight:800;line-height:.85;letter-spacing:-.05em; margin-bottom:3rem; } .h-line{display:block;overflow:hidden} .h-line-i{display:block;will-change:transform} .h-line-i.chroma{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;opacity:0} .hero-desc{max-width:360px;color:var(--muted);line-height:1.8;font-size:.95rem} .hero-desc strong{color:var(--text)} .hero-btns{display:flex;align-items:center;gap:1rem;flex-shrink:0;flex-wrap:wrap} .scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--muted);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;animation:bob 2.5s ease-in-out infinite} .sh-line{width:1px;height:40px;background:linear-gradient(var(--muted),transparent)} @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}} /* ── Service band ── */ .service-band{overflow:hidden;border-top:1px solid var(--b);border-bottom:1px solid var(--b);padding:1rem 0} .sb-track{display:flex;gap:2rem;animation:sbscroll 24s linear infinite;width:max-content} .sb-track.rev{animation-direction:reverse;animation-duration:30s} .sb-track:hover{animation-play-state:paused} @keyframes sbscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sb-item{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0} .sb-dot{color:var(--orange);flex-shrink:0;font-size:.55rem} /* ─══════════════════════════════════════════════ TALENTS & STARS ════════════════════════════════════════════════ */ .talents-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; margin-bottom:3rem; } .talent-card{ border-radius:var(--rl);overflow:hidden; background:var(--card);border:1px solid var(--b); transition:all var(--med);cursor:pointer; transform-style:preserve-3d; } .talent-card:hover{border-color:var(--bh);transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.4)} .talent-img{ aspect-ratio:3/4;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; } .talent-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.4,0,.2,1)} .talent-card:hover .talent-img img{transform:scale(1.06)} .talent-placeholder{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; } .talent-placeholder-text{ font-family:var(--sans);font-size:1.6rem;font-weight:800; letter-spacing:-.04em;color:rgba(var(--wash),.15);text-align:center; } .talent-info{padding:1.25rem} .talent-name{font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem;color:var(--text)} .talent-socials{display:flex;gap:.5rem;flex-wrap:wrap} .social-link-btn{ display:inline-flex;align-items:center;gap:.35rem; padding:.35rem .65rem;border-radius:var(--r); font-size:.72rem;font-weight:700;border:1px solid var(--b); transition:all var(--fast); color:var(--muted); } .social-link-btn:hover{border-color:var(--bh);color:var(--text);background:rgba(var(--wash),.05)} .social-link-btn.yt:hover{color:#ff0000;border-color:#ff0000} .social-link-btn.tt:hover{color:#fff;border-color:#fff} .social-link-btn.ig:hover{color:#e040fb;border-color:#e040fb} .social-link-btn.sp:hover{color:#1DB954;border-color:#1DB954} .social-link-btn.sc:hover{color:#FF7700;border-color:#FF5500} .social-link-btn svg{width:12px;height:12px;flex-shrink:0} .star-socials{flex-wrap:wrap;margin-top:.2rem} .talent-role{font-size:.72rem;color:var(--muted);margin-bottom:.75rem;letter-spacing:.04em} .voir-plus-wrap{text-align:center;margin-top:1rem} .extra-talents{display:none} .extra-talents.visible{display:contents} /* ─══════════════════════════════════════════════ PRESTATIONS ════════════════════════════════════════════════ */ .presta-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--b)} .presta-tab{ padding:.6rem 1.25rem;border-radius:var(--rx); font-family:var(--sans);font-size:.85rem;font-weight:700; border:1px solid var(--b);color:var(--muted); transition:all var(--fast); } .presta-tab:hover,.presta-tab.active{ background:var(--card);color:var(--text);border-color:var(--bh); } .presta-tab.active{ background:linear-gradient(135deg,rgba(var(--a1),.15),rgba(var(--a2),.15)); border-color:rgba(var(--a1),.35);color:var(--text); } .presta-panel{display:none;animation:fadeIn .35s ease} .presta-panel.active{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .mois-offert-banner{ display:flex;align-items:center;gap:.75rem; padding:1rem 1.5rem;border-radius:var(--rm);margin-bottom:2.5rem; background:linear-gradient(135deg,rgba(var(--a1),.1),rgba(var(--a2),.1)); border:1px solid rgba(var(--a1),.25); font-size:.85rem;color:var(--text); } .mois-offert-banner strong{color:var(--orange)} .presta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.6rem} .presta-item{ --pc:var(--a1);--pc2:var(--a2); position:relative;overflow:hidden;isolation:isolate; background: radial-gradient(130% 85% at 100% 0%,rgba(var(--pc),.12),transparent 55%), linear-gradient(160deg,color-mix(in srgb,var(--card) 72%,transparent),var(--card)); border:1px solid rgba(var(--wash),.08); border-radius:20px;padding:1.9rem 1.7rem 1.65rem 2.2rem; transition:transform .4s var(--ease-out),border-color .4s,box-shadow .4s; } /* Barre d'accent gauche — lumineuse, grandit au survol */ .presta-item::before{ content:'';position:absolute;left:0;top:16%;bottom:16%;width:4px;border-radius:0 4px 4px 0; background:linear-gradient(180deg,rgb(var(--pc)),rgb(var(--pc2))); box-shadow:0 0 16px rgba(var(--pc),.55); transition:top .4s var(--ease-out),bottom .4s var(--ease-out),width .3s; } /* Balayage lumineux au survol */ .presta-item::after{ content:'';position:absolute;top:0;left:-75%;width:55%;height:100%;z-index:2;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent); transform:skewX(-16deg);transition:left .75s var(--ease-out); } .presta-item:hover{ transform:translateY(-6px); border-color:rgba(var(--pc),.5); box-shadow:0 24px 60px -22px rgba(0,0,0,.6),0 0 42px -8px rgba(var(--pc),.38); } .presta-item:hover::before{top:0;bottom:0;width:5px} .presta-item:hover::after{left:135%} /* Accents couleur par panel */ #panel-photo .presta-item{--pc:155,93,229;--pc2:247,37,133} #panel-video .presta-item{--pc:0,180,216;--pc2:0,85,204} #panel-son .presta-item{--pc:255,107,53;--pc2:255,58,0} .presta-item-title{position:relative;z-index:1;font-family:var(--sans);font-size:1.12rem;font-weight:800;margin-bottom:.55rem;color:var(--text);letter-spacing:.01em;transition:color .3s} .presta-price{position:relative;z-index:1;font-family:var(--sans);font-size:2.15rem;font-weight:800;line-height:1;margin-bottom:.35rem;background:linear-gradient(135deg,rgb(var(--pc)),rgb(var(--pc2)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 16px rgba(var(--pc),.4))} .presta-price-note{position:relative;z-index:1;display:inline-block;font-size:.73rem;color:var(--muted);margin-bottom:1rem;letter-spacing:.02em;padding-left:.9rem} .presta-price-note::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:rgb(var(--pc));box-shadow:0 0 8px rgba(var(--pc),.7)} .presta-desc{position:relative;z-index:1;font-size:.88rem;color:var(--muted);line-height:1.75} /* Formule cards */ .formule-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .formule-card{ background:var(--card);border:1px solid var(--b);border-radius:var(--rl);padding:1.85rem 1.5rem; transition:all var(--med);position:relative;overflow:hidden;display:flex;flex-direction:column; } .formule-card .formule-features{flex:1} .formule-card::before{content:'';position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity var(--med)} .formule-card:hover{border-color:var(--bh);transform:translateY(-6px);box-shadow:0 24px 80px rgba(0,0,0,.5)} .formule-card.featured{border-color:rgba(var(--a1),.4)} .formule-badge{ display:inline-flex;align-items:center;gap:.4rem; padding:.28rem .7rem;border-radius:var(--rx); font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; margin-bottom:1.1rem;background:var(--grad);color:#fff;white-space:nowrap; } .formule-name{font-family:var(--sans);font-size:1.45rem;font-weight:800;margin-bottom:.4rem} .formule-duration{font-size:.72rem;color:var(--orange);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem} .formule-price{font-family:var(--sans);font-size:2.35rem;font-weight:800;line-height:1;margin-bottom:.25rem;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .formule-price-note{font-size:.74rem;color:var(--muted);margin-bottom:1.3rem} .formule-features{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem} .formule-feat{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--muted);line-height:1.45} .formule-feat::before{content:'✓';color:var(--orange);font-weight:700;flex-shrink:0;margin-top:.05rem} .formule-guarantee{ background:rgba(var(--a1),.08);border:1px solid rgba(var(--a1),.2); border-radius:var(--rm);padding:.85rem;margin-bottom:1.2rem; font-size:.76rem;color:var(--muted);line-height:1.55; } .formule-guarantee strong{color:var(--orange)} .formule-nogar{background:rgba(var(--wash),.04)!important;border-color:var(--b)!important;text-align:center} /* ── Keyframes particules formule ── */ /* particule de base — toujours visible, monte lentement */ @keyframes formule-particle-base{ 0% {opacity:0; transform:translateY(0) scale(.65)} 6% {opacity:.55;} 88% {opacity:.38;} 100%{opacity:0; transform:translateY(-100px) scale(.3)} } /* particule hover — plus lumineuse, monte plus vite */ @keyframes formule-particle-hover{ 0% {opacity:0; transform:translateY(0) scale(.7) rotate(0deg)} 5% {opacity:.95;} 80% {opacity:.7;} 100%{opacity:0; transform:translateY(-140px) scale(.2) rotate(200deg)} } @keyframes gem-pulse{ 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.7);filter:brightness(1.6)} } /* ── Animation aura partagée — 1 seul keyframe = sync parfaite ── */ @keyframes card-aura{ 0%,100%{box-shadow:0 0 32px rgba(var(--ca),.22),0 0 8px rgba(var(--ca),.12),inset 0 0 35px rgba(var(--ca),.06)} 50% {box-shadow:0 0 68px rgba(var(--ca),.5),0 0 145px rgba(var(--ca),.2),inset 0 0 58px rgba(var(--ca),.11)} } /* ── Formule ARGENT — thème argent neutre ── */ .formule-argent{ --ca:172,172,178; border:1.5px solid rgba(172,172,178,.4); background:linear-gradient(155deg,rgba(190,190,196,.06) 0%,rgba(220,220,226,.02) 30%,var(--card) 55%); animation:card-aura 2.5s ease-in-out infinite; transition:filter .4s ease; } .formule-argent:hover{filter:drop-shadow(0 0 26px rgba(190,190,196,.55)) drop-shadow(0 0 55px rgba(150,150,156,.3))} .formule-argent::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent 3%,#5A5A5E 15%,#9A9A9E 30%,#E8E8EC 45%,#FFFFFF 50%,#E8E8EC 55%,#9A9A9E 70%,#5A5A5E 85%,transparent 97%); border-radius:var(--rl) var(--rl) 0 0;animation:or-shimmer 3.4s ease-in-out infinite; } .formule-argent .formule-badge{background:linear-gradient(135deg,#5E5E62,#A8A8AC,#EDEDF0,#A8A8AC);color:#1a1a1a} .formule-argent .formule-feat::before{color:#E0E0E4;text-shadow:0 0 8px rgba(210,210,214,.5)} .formule-argent .formule-duration{color:#C8C8CE;text-shadow:0 0 10px rgba(200,200,205,.4)} /* ── Formule OR — thème doré amplifié ── */ .formule-or{ --ca:212,175,55; border:1.5px solid rgba(212,175,55,.4); background:linear-gradient(155deg,rgba(212,175,55,.07) 0%,rgba(255,200,0,.03) 30%,var(--card) 55%); animation:card-aura 2.5s ease-in-out infinite; transition:filter .4s ease; } .formule-or:hover{filter:drop-shadow(0 0 28px rgba(212,175,55,.65)) drop-shadow(0 0 60px rgba(212,175,55,.35))} .formule-or::before{ background:radial-gradient(ellipse at top left,rgba(255,215,0,.2) 0%,rgba(212,175,55,.08) 40%,transparent 70%); opacity:1!important; } .formule-or::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent 3%,#6B4C00 15%,#B8860B 30%,#FFD700 45%,#FFFACD 50%,#FFD700 55%,#B8860B 70%,#6B4C00 85%,transparent 97%); border-radius:var(--rl) var(--rl) 0 0; animation:or-shimmer 3s ease-in-out infinite; } @keyframes or-shimmer{ 0%,100%{opacity:.8;filter:brightness(1)} 50%{opacity:1;filter:brightness(1.5) drop-shadow(0 0 6px #FFD700)} } .formule-or .formule-badge{background:linear-gradient(135deg,#7A5200,#D4AF37,#FFD700,#D4AF37)} .formule-or .formule-feat::before{color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.6)} .formule-or .formule-guarantee{background:rgba(212,175,55,.09);border-color:rgba(212,175,55,.3)} .formule-or .formule-guarantee strong{color:#FFD700} .formule-or .formule-duration{color:#FFD700;text-shadow:0 0 10px rgba(255,215,0,.4)} /* ── Formule PLATINE — thème argent amplifié ── */ .formule-platine{ --ca:180,180,230; border:1.5px solid rgba(180,180,210,.4); background:linear-gradient(155deg,rgba(210,210,255,.07) 0%,rgba(180,180,255,.03) 40%,var(--card) 60%); animation:card-aura 2.5s ease-in-out infinite; transition:filter .4s ease; } .formule-platine:hover{filter:drop-shadow(0 0 28px rgba(190,190,255,.65)) drop-shadow(0 0 60px rgba(170,170,240,.35))} .formule-platine::before{ background:radial-gradient(ellipse at top right,rgba(230,230,255,.22) 0%,rgba(190,190,230,.09) 45%,transparent 70%); opacity:1!important; } .formule-platine::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent 3%,#30305A 15%,#8080B8 30%,#C8C8F0 45%,#FFFFFF 50%,#C8C8F0 55%,#8080B8 70%,#30305A 85%,transparent 97%); background-size:200% 100%;border-radius:var(--rl) var(--rl) 0 0; animation:plat-slide 2.4s linear infinite; } @keyframes plat-slide{0%{background-position:200% 0}100%{background-position:-200% 0}} .formule-platine .formule-badge{background:linear-gradient(135deg,#30305A,#8080B8,#D8D8FF,#B0B0E0)} .formule-platine .formule-feat::before{color:#D0D0FF;text-shadow:0 0 8px rgba(200,200,255,.5)} .formule-platine .formule-guarantee{background:rgba(180,180,220,.07);border-color:rgba(180,180,220,.28)} .formule-platine .formule-guarantee strong{color:#D0D0FF} .formule-platine .formule-duration{color:#C0C0E8;text-shadow:0 0 10px rgba(180,180,255,.4)} /* ── Formule DIAMANT — thème cristal amplifié ── */ .formule-diamant{ --ca:0,160,255; border:1.5px solid rgba(0,160,255,.35); background:linear-gradient(155deg,rgba(0,100,255,.08) 0%,rgba(150,0,255,.05) 40%,var(--card) 65%); animation:card-aura 2.5s ease-in-out infinite; transition:filter .4s ease; } .formule-diamant:hover{filter:drop-shadow(0 0 28px rgba(0,200,255,.65)) drop-shadow(0 0 60px rgba(0,140,255,.35))} .formule-diamant::before{ background:radial-gradient(ellipse at bottom right,rgba(0,200,255,.18),rgba(150,0,255,.1),transparent 65%); opacity:1!important; } .formule-diamant::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent 3%,#001A66 15%,#0055CC 28%,#00BFFF 42%,#AAFFFF 50%,#CC00FF 60%,#0055CC 75%,#001A66 88%,transparent 97%); border-radius:var(--rl) var(--rl) 0 0; animation:diamond-glow 2.6s ease-in-out infinite; } @keyframes diamond-glow{ 0%,100%{opacity:.8;filter:brightness(1)} 50%{opacity:1;filter:brightness(1.6) drop-shadow(0 0 8px #00BFFF)} } .formule-diamant .formule-badge{background:linear-gradient(135deg,#001A66,#0055CC,#00BFFF,#8800FF)} .formule-diamant .formule-feat::before{color:#00CCFF;text-shadow:0 0 8px rgba(0,200,255,.55)} .formule-diamant .formule-guarantee{background:rgba(0,160,255,.08);border-color:rgba(0,160,255,.28)} .formule-diamant .formule-guarantee strong{color:#00CCFF} .formule-diamant .formule-duration{color:#00CCFF;text-shadow:0 0 12px rgba(0,200,255,.45)} /* Service additionnel */ .additionnel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem} .additionnel-card{ background:var(--card);border:1px solid rgba(var(--wash),.08); border-radius:var(--rm);padding:2rem; position:relative;overflow:hidden;transition:all var(--med); } .additionnel-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:var(--grad);opacity:0;transition:opacity .4s ease;border-radius:var(--rm) var(--rm) 0 0; } .additionnel-card:hover::after{opacity:1} .additionnel-card:hover{ border-color:rgba(255,80,0,.22);transform:translateY(-5px); box-shadow:0 14px 55px rgba(0,0,0,.45),0 0 28px rgba(255,80,0,.07); } /* Formation Nouveau Née — traitement spécial */ .additionnel-card.special{ border-color:rgba(var(--a2),.5); background:linear-gradient(145deg,rgba(var(--a2),.09) 0%,rgba(var(--a1),.06) 50%,var(--card) 80%); animation:formation-aura 3s ease-in-out infinite; } .additionnel-card.special::after{ background:linear-gradient(90deg,#8800FF,#FF3A00,#FF8C00,#8800FF); background-size:200% 100%;opacity:.9; animation:formation-bar 3s linear infinite; } @keyframes formation-bar{0%{background-position:0% 0}100%{background-position:200% 0}} @keyframes formation-aura{ 0%,100%{box-shadow:0 0 28px rgba(var(--a2),.22),0 0 8px rgba(var(--a1),.12)} 50% {box-shadow:0 0 55px rgba(var(--a2),.42),0 0 28px rgba(var(--a1),.24),0 0 90px rgba(var(--a2),.1)} } .additionnel-card.special:hover{ border-color:rgba(var(--a2),.55); filter:drop-shadow(0 0 22px rgba(var(--a2),.55)) drop-shadow(0 0 45px rgba(var(--a1),.3)); } /* Badge NOUVEAU */ .nouveau-badge{ display:inline-block;padding:.18rem .55rem; background:linear-gradient(90deg,#8800FF,#FF3A00); border-radius:999px;font-family:var(--sans);font-size:.6rem; font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff; animation:nouveau-pulse 2s ease-in-out infinite;vertical-align:middle;margin-left:.4rem; } @keyframes nouveau-pulse{ 0%,100%{box-shadow:0 0 6px rgba(var(--a2),.5)} 50% {box-shadow:0 0 14px rgba(var(--a2),.9),0 0 6px rgba(var(--a1),.5)} } .add-cart-btn{ display:inline-flex;align-items:center;gap:.5rem; margin-top:1.25rem;padding:.7rem 1.5rem;border-radius:var(--rx); background:var(--grad);color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:700; border:none;cursor:pointer;transition:opacity var(--fast); } .add-cart-btn:hover{opacity:.85} /* ─══════════════════════════════════════════════ ÉQUIPE ════════════════════════════════════════════════ */ #equipe .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:900px;margin:0 auto} .team-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem} .team-photo{ width:220px;height:280px;border-radius:var(--rl);overflow:hidden; border:1px solid var(--b);flex-shrink:0;position:relative; } .team-photo img{width:100%;height:100%;object-fit:cover} .team-photo-placeholder{ width:100%;height:100%; display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:2.5rem;font-weight:800; color:rgba(var(--wash),.12); } .team-name{font-family:var(--sans);font-size:1.25rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text)} .team-desc{font-size:.88rem;color:var(--muted);line-height:1.75;max-width:340px} .team-ig-btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.55rem 1.25rem;border-radius:var(--rx); border:1px solid var(--b);font-size:.8rem;font-weight:700;color:var(--muted); transition:all var(--fast); } .team-ig-btn:hover{border-color:#e040fb;color:#e040fb} /* ─══════════════════════════════════════════════ CART UI ════════════════════════════════════════════════ */ #cart-overlay{ position:fixed;inset:0;z-index:3999; background:rgba(0,0,0,.6);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity var(--med); } body.cart-open #cart-overlay{opacity:1;pointer-events:all} #cart-toggle{ position:relative; width:40px;height:40px;border-radius:10px; background:rgba(var(--wash),.06); border:1px solid rgba(var(--wash),.1)!important; cursor:pointer;display:flex;align-items:center;justify-content:center; color:var(--text);padding:0!important; transition:all var(--fast);flex-shrink:0; } #cart-toggle:hover{ background:rgba(var(--a1),.12);border-color:rgba(var(--a1),.4)!important; box-shadow:0 0 16px rgba(var(--a1),.2);transform:translateY(-1px); } .cart-count{ position:absolute;top:-4px;right:-4px; width:20px;height:20px;border-radius:50%; background:var(--text);color:var(--bg); font-size:.65rem;font-weight:800; display:flex;align-items:center;justify-content:center; display:none; } #cart-drawer{ position:fixed;top:0;right:0;bottom:0;z-index:4000; width:min(420px,100vw); background:var(--s);border-left:1px solid var(--b); display:flex;flex-direction:column; transform:translateX(100%);transition:transform var(--med); overflow:hidden; } #cart-drawer.open{transform:translateX(0)} .cart-header{ display:flex;align-items:center;justify-content:space-between; padding:1.5rem 1.75rem;border-bottom:1px solid var(--b);flex-shrink:0; } .cart-title{font-family:var(--sans);font-size:1.1rem;font-weight:800} .cart-close{ width:32px;height:32px;border-radius:50%; background:rgba(var(--wash),.06); display:flex;align-items:center;justify-content:center; font-size:.9rem;color:var(--muted);transition:all var(--fast); } .cart-close:hover{background:rgba(var(--wash),.12);color:var(--text)} #cart-items{flex:1;overflow-y:auto;padding:1.25rem 1.75rem;display:flex;flex-direction:column;gap:1rem} #cart-items::-webkit-scrollbar{width:4px} #cart-items::-webkit-scrollbar-track{background:transparent} #cart-items::-webkit-scrollbar-thumb{background:var(--dim);border-radius:2px} .cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem;color:var(--muted);text-align:center} .cart-empty-icon{font-size:2.5rem;opacity:.4} .cart-item{background:var(--card);border:1px solid var(--b);border-radius:var(--rm);padding:1rem;transition:border-color var(--fast)} .cart-item:hover{border-color:var(--bh)} .cart-item-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.35rem} .cart-item-name{font-family:var(--sans);font-size:.9rem;font-weight:700} .cart-item-extra{font-size:.75rem;color:var(--muted);margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cart-item-remove{width:20px;height:20px;border-radius:50%;background:rgba(var(--wash),.06);font-size:.65rem;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all var(--fast);flex-shrink:0} .cart-item-remove:hover{background:rgba(var(--a1),.2);color:var(--orange)} .cart-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem} .cart-qty-controls{display:flex;align-items:center;gap:.5rem} .cart-qty-btn{ width:26px;height:26px;border-radius:50%; background:rgba(var(--wash),.07);font-size:1rem;color:var(--text); display:flex;align-items:center;justify-content:center; transition:all var(--fast);border:1px solid var(--b); } .cart-qty-btn:hover{background:rgba(var(--wash),.14);border-color:var(--bh)} .cart-qty-val{font-family:var(--sans);font-size:.9rem;font-weight:700;min-width:20px;text-align:center} .cart-item-price{font-family:var(--sans);font-size:1.1rem;font-weight:800;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .cart-promo{padding:0 1.75rem 1rem;flex-shrink:0;border-top:1px solid var(--b);padding-top:1rem} .cart-promo-row{display:flex;gap:.75rem} .cart-promo-row input{ flex:1;padding:.65rem 1rem;background:rgba(var(--wash),.05); border:1px solid var(--b);border-radius:var(--r); color:var(--text);font-size:.85rem;outline:none; transition:border-color var(--fast); } .cart-promo-row input:focus{border-color:var(--bh)} .cart-promo-row input::placeholder{color:var(--dim)} .promo-feedback{margin-top:.5rem;font-size:.8rem;font-weight:600} .promo-feedback.ok{color:#4ade80} .promo-feedback.err{color:var(--orange)} .cart-summary{padding:.75rem 1.75rem;flex-shrink:0;border-top:1px solid var(--b)} .cart-row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;padding:.3rem 0} .cart-row.total{font-family:var(--sans);font-size:1.2rem;font-weight:800;border-top:1px solid var(--b);margin-top:.35rem;padding-top:.75rem} .cart-row.discount{color:#4ade80;font-weight:600} .cart-footer{padding:1.25rem 1.75rem;flex-shrink:0;display:flex;flex-direction:column;gap:.75rem} .cart-checkout-btn{ width:100%;padding:1rem;border-radius:var(--rx); background:var(--grad);color:#fff; font-family:var(--sans);font-size:1rem;font-weight:800; border:none;cursor:pointer;transition:opacity var(--fast); } .cart-checkout-btn:hover{opacity:.85} .cart-checkout-btn:disabled{opacity:.3;cursor:not-allowed} .cart-stripe-note{text-align:center;font-size:.72rem;color:var(--dim)} /* ─══════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════ */ footer{ border-top:1px solid var(--b); padding:5rem 0 3rem; } .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem} .footer-logo{font-family:var(--sans);font-size:1.4rem;font-weight:800;letter-spacing:-.04em;margin-bottom:1rem;display:block} .footer-tagline{font-size:.88rem;color:var(--muted);line-height:1.7;margin-bottom:1.5rem} .footer-socials{display:flex;gap:.75rem;flex-wrap:wrap} .footer-social{ width:36px;height:36px;border-radius:50%; border:1px solid var(--b); display:flex;align-items:center;justify-content:center; color:var(--muted);transition:all var(--fast); } .footer-social:hover{border-color:var(--bh);color:var(--text);background:rgba(var(--wash),.04)} .footer-col-title{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem} .footer-links{display:flex;flex-direction:column;gap:.75rem} .footer-links a{font-size:.88rem;color:var(--muted);transition:color var(--fast)} .footer-links a:hover{color:var(--text)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid var(--b);font-size:.8rem;color:var(--dim)} .footer-legal{color:var(--dim);transition:color var(--fast)} .footer-legal:hover{color:var(--muted)} /* ─══════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════ */ @media(max-width:1024px){ .footer-top{grid-template-columns:1fr 1fr} .talents-grid{grid-template-columns:repeat(2,1fr)} .formule-grid{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:1fr 1fr} } @media(max-width:600px){ .formule-grid{grid-template-columns:1fr} } /* Les boutons de nav (Catalogue de prod / Devis & mise en relation) sont larges, et les pages catalogue/devis ont en plus un bouton « Retour au site » : on bascule sur le menu burger avant que ça ne se chevauche. */ @media(max-width:1200px){ .nav-links{display:none} .nav-burger{display:flex} } @media(max-width:768px){ .nav-links{display:none} .nav-burger{display:flex} .container{padding:0 1.25rem} .section{padding:5rem 0} .talents-grid{grid-template-columns:1fr} .grid-2,.grid-3{grid-template-columns:1fr} #equipe .team-grid{grid-template-columns:1fr;max-width:400px} .footer-top{grid-template-columns:1fr} .hero-bottom{flex-direction:column;align-items:flex-start} .hero-btns{flex-direction:column;align-items:flex-start} .presta-tabs{gap:.35rem} .presta-tab{font-size:.75rem;padding:.5rem .9rem} } @media(max-width:480px){ .talents-grid{gap:1rem} .display-lg{font-size:clamp(2.5rem,10vw,5rem)} #cart-drawer{width:100vw} } @media(max-width:768px){#cart-toggle{width:36px;height:36px}} /* ─══════════════════════════════════════════════ SLIDE GATE ════════════════════════════════════════════════ */ #slide-gate{ position:fixed;inset:0;z-index:11000; display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2rem; background:var(--bg); } .sg-bg{ position:absolute;inset:0; background:radial-gradient(ellipse at 50% 40%,rgba(var(--a2),.18) 0%,rgba(var(--a1),.1) 45%,transparent 70%); pointer-events:none; } .sg-logo{ font-family:var(--sans);font-size:clamp(2.8rem,9vw,7rem);font-weight:800; letter-spacing:-.05em;color:var(--text);position:relative;z-index:1; } .sg-logo span{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sg-tagline{font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1} .sg-track-wrap{position:relative;z-index:1;margin-top:1rem} .sg-track{ position:relative; width:min(340px,78vw);height:56px;border-radius:28px; background:rgba(var(--wash),.06);border:1px solid rgba(var(--wash),.1); overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize; } .sg-fill{ position:absolute;left:0;top:0;bottom:0;width:56px; background:linear-gradient(90deg,rgba(var(--a1),.25),rgba(var(--a2),.15)); transition:width .05s linear;pointer-events:none;border-radius:28px; } .sg-thumb{ position:absolute;top:4px;left:4px;width:48px;height:48px;border-radius:50%; background:var(--grad);display:flex;align-items:center;justify-content:center; color:#fff;box-shadow:0 4px 20px rgba(var(--a1),.4); transition:transform .15s ease,box-shadow .15s ease;will-change:transform; cursor:grab; } .sg-thumb:active{cursor:grabbing;transform:scale(1.1);box-shadow:0 6px 30px rgba(var(--a1),.6)} .sg-label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:rgba(var(--wash),.35);pointer-events:none; padding-left:56px;transition:opacity .2s; } #slide-gate.done .sg-thumb{background:linear-gradient(135deg,#4ade80,#22c55e);box-shadow:0 4px 20px rgba(74,222,128,.4)} #slide-gate.done .sg-label{opacity:0} /* ─══════════════════════════════════════════════ ANIMATED GLOWING SEARCH BAR ════════════════════════════════════════════════ */ .search-glow{ position:relative; display:flex;align-items:center; background:rgba(var(--wash),.05); border:1.5px solid rgba(var(--wash),.1); border-radius:var(--rx);padding:.6rem 1rem; transition:border-color .25s,box-shadow .25s; } .search-glow:focus-within{ border-color:rgba(var(--a1),.5); box-shadow:0 0 0 3px rgba(var(--a1),.12),0 0 30px rgba(var(--a1),.12),0 0 60px rgba(var(--a2),.06); } .search-glow input{ background:none;border:none;outline:none;color:var(--text); font-family:var(--sans);font-size:.88rem;font-weight:600; flex:1;min-width:0; } .search-glow input::placeholder{color:var(--dim)} .search-glow svg{color:var(--muted);flex-shrink:0;transition:color .2s} .search-glow:focus-within svg{color:var(--orange)} /* ─══════════════════════════════════════════════ PARALLAX LAYERS ════════════════════════════════════════════════ */ .parallax-layer{will-change:transform;transform:translateY(0)} /* ─══════════════════════════════════════════════ MUSIC NOTES (catalogue intro) ════════════════════════════════════════════════ */ .music-note{ position:absolute;font-size:1.4rem;opacity:0;pointer-events:none; animation:note-fly 1.6s ease-out forwards; } @keyframes note-fly{ 0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0deg)} 15%{opacity:1} 100%{opacity:0;transform:translate(var(--nx),var(--ny)) scale(1.2) rotate(var(--nr))} } /* ─══════════════════════════════════════════════ SMOOTH SCROLL FLASH ════════════════════════════════════════════════ */ @keyframes slide-in-up{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .section-enter{animation:slide-in-up .55s cubic-bezier(.22,1,.36,1) both} /* ── Formation PDF strip ── */ .formation-strip{ display:inline-flex;align-items:center;gap:.75rem; padding:.6rem 1.1rem;border-radius:var(--rx); background:linear-gradient(135deg,rgba(var(--a1),.08),rgba(var(--a2),.08)); border:1px solid rgba(var(--a1),.3); color:var(--text);cursor:pointer; transition:all .25s ease;position:relative;overflow:hidden; animation:fs-glow 3s ease-in-out infinite; text-decoration:none; } .formation-strip::before{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent,rgba(var(--a1),.06),transparent); transform:translateX(-100%);animation:fs-shine 3s ease-in-out infinite; } @keyframes fs-glow{ 0%,100%{border-color:rgba(var(--a1),.3);box-shadow:0 0 12px rgba(var(--a1),.08)} 50%{border-color:rgba(var(--a1),.55);box-shadow:0 0 24px rgba(var(--a1),.18),0 0 48px rgba(var(--a2),.08)} } @keyframes fs-shine{ 0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)} } .formation-strip:hover{ background:linear-gradient(135deg,rgba(var(--a1),.14),rgba(var(--a2),.12)); border-color:rgba(var(--a1),.6);transform:translateY(-2px); box-shadow:0 8px 30px rgba(var(--a1),.2); } .fs-badge{ font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; padding:.2rem .55rem;border-radius:var(--rx); background:var(--grad);color:#fff;flex-shrink:0; animation:badge-pulse 2s ease-in-out infinite; } @keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.7}} .fs-text{font-size:.82rem;color:var(--muted)} .fs-text strong{color:var(--text)} .fs-price{ font-family:var(--sans);font-size:1rem;font-weight:800; background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; flex-shrink:0; } .fs-arrow{color:var(--orange);font-weight:700;transition:transform .2s} .formation-strip:hover .fs-arrow{transform:translateX(4px)} /* ── Reveal animations ── */ .k-reveal{opacity:0;transform:translateY(42px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)} .k-reveal.visible{opacity:1;transform:none} .k-stagger .talent-card, .k-stagger .formule-card, .k-stagger .presta-item, .k-stagger .additionnel-card, .k-stagger .fmshow-mod{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)} .k-stagger.visible .fmshow-mod{opacity:1;transform:none} .k-stagger.visible .fmshow-mod:nth-child(1){transition-delay:.05s} .k-stagger.visible .fmshow-mod:nth-child(2){transition-delay:.12s} .k-stagger.visible .fmshow-mod:nth-child(3){transition-delay:.19s} .k-stagger.visible .fmshow-mod:nth-child(4){transition-delay:.26s} .k-stagger.visible .fmshow-mod:nth-child(5){transition-delay:.33s} .k-stagger.visible .fmshow-mod:nth-child(6){transition-delay:.4s} .k-stagger.visible .talent-card:nth-child(1), .k-stagger.visible .formule-card:nth-child(1), .k-stagger.visible .presta-item:nth-child(1), .k-stagger.visible .additionnel-card:nth-child(1){opacity:1;transform:none;transition-delay:.05s} .k-stagger.visible .talent-card:nth-child(2), .k-stagger.visible .formule-card:nth-child(2), .k-stagger.visible .presta-item:nth-child(2), .k-stagger.visible .additionnel-card:nth-child(2){opacity:1;transform:none;transition-delay:.12s} .k-stagger.visible .talent-card:nth-child(3), .k-stagger.visible .formule-card:nth-child(3), .k-stagger.visible .presta-item:nth-child(3), .k-stagger.visible .additionnel-card:nth-child(3){opacity:1;transform:none;transition-delay:.19s} .k-stagger.visible .talent-card:nth-child(4), .k-stagger.visible .formule-card:nth-child(4), .k-stagger.visible .presta-item:nth-child(4), .k-stagger.visible .additionnel-card:nth-child(4){opacity:1;transform:none;transition-delay:.26s} .k-stagger.visible .talent-card:nth-child(5), .k-stagger.visible .formule-card:nth-child(5), .k-stagger.visible .presta-item:nth-child(5), .k-stagger.visible .additionnel-card:nth-child(5){opacity:1;transform:none;transition-delay:.33s} .k-stagger.visible .talent-card:nth-child(6), .k-stagger.visible .formule-card:nth-child(6), .k-stagger.visible .presta-item:nth-child(6), .k-stagger.visible .additionnel-card:nth-child(6){opacity:1;transform:none;transition-delay:.4s} /* ════════════════════════════════════════════════ CONTRÔLE DE THÈME (icône discrète + panneau) ════════════════════════════════════════════════ */ .theme-ctrl{position:fixed;left:1.25rem;bottom:1.25rem;z-index:4500;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem} .theme-fab{ width:42px;height:42px;border-radius:14px; display:flex;align-items:center;justify-content:center; background:var(--s);border:1px solid var(--b);color:var(--text); box-shadow:0 6px 22px rgba(0,0,0,.28); transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast),background var(--med),color var(--med); backdrop-filter:blur(8px); } .theme-fab:hover{transform:translateY(-2px);border-color:var(--bh);box-shadow:0 10px 28px rgba(0,0,0,.36)} .theme-fab svg{width:19px;height:19px} .theme-fab-row{display:flex;gap:.55rem} .theme-palette-btn{position:relative} .theme-palette-btn::after{ content:'';position:absolute;inset:-2px;border-radius:16px; background:var(--grad);opacity:0;filter:blur(7px);z-index:-1;transition:opacity var(--med); } .theme-palette-btn:hover::after{opacity:.5} .theme-panel{ position:absolute;left:0;bottom:54px;width:248px; background:var(--s);border:1px solid var(--b);border-radius:18px; padding:1rem;box-shadow:0 18px 50px rgba(0,0,0,.45); opacity:0;transform:translateY(10px) scale(.97);transform-origin:bottom left; pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.25,.46,.45,.94); } .theme-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .tp-title{font-family:var(--sans);font-size:.95rem;font-weight:800;margin-bottom:.15rem;color:var(--text)} .tp-sub{font-size:.7rem;color:var(--muted);margin-bottom:.85rem} .tp-group{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:.7rem 0 .5rem} .tp-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .tp-sw{ position:relative;cursor:pointer;border-radius:12px;overflow:hidden; border:1.5px solid var(--b);background:none;padding:0;height:48px; transition:transform var(--fast),border-color var(--fast); } .tp-sw:hover{transform:translateY(-2px);border-color:var(--bh)} .tp-sw-fill{position:absolute;inset:0} .tp-sw-label{ position:absolute;left:0;right:0;bottom:0;padding:.15rem 0; font-family:var(--sans);font-size:.56rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; text-align:center;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(2px); } .tp-sw.active{border-color:var(--text)} .tp-sw.active::after{ content:'✓';position:absolute;top:3px;right:5px;font-size:.7rem;font-weight:800;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:1; } @media(max-width:768px){ .theme-ctrl{left:1rem;bottom:1rem} .theme-fab{width:38px;height:38px} } /* ════════════════════════════════════════════════ STARS À EN DEVENIR — cartes cliquables + modale profil ════════════════════════════════════════════════ */ .star-card{cursor:pointer;outline:none} .star-card .talent-img{position:relative} .star-hover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.1rem;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%);opacity:0;transition:opacity .35s ease;pointer-events:none} .star-card:hover .star-hover,.star-card:focus-visible .star-hover{opacity:1} .star-hover-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.1rem;border-radius:var(--rx);background:var(--grad);color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.04em;box-shadow:0 6px 22px rgba(var(--a1),.4);transform:translateY(10px);transition:transform .35s cubic-bezier(.2,.7,.2,1)} .star-card:hover .star-hover-pill,.star-card:focus-visible .star-hover-pill{transform:translateY(0)} .star-hover-arrow{transition:transform .3s ease} .star-card:hover .star-hover-arrow{transform:translateX(3px)} .star-card:focus-visible{box-shadow:0 0 0 2px var(--orange);border-radius:var(--rm)} #star-modal{position:fixed;inset:0;z-index:6000;display:none;align-items:center;justify-content:center;padding:1.5rem} #star-modal.open{display:flex} .star-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease} #star-modal.open .star-modal-overlay{opacity:1} .star-modal-card{position:relative;z-index:1;width:min(680px,100%);max-height:90vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);background:var(--card);border:1px solid var(--b);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.55);opacity:0;transform:scale(.94) translateY(14px)} #star-modal.open .star-modal-card{animation:star-pop .5s cubic-bezier(.2,.7,.2,1) forwards} @keyframes star-pop{to{opacity:1;transform:scale(1) translateY(0)}} .star-modal-close{position:absolute;top:.85rem;right:.85rem;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);border:1px solid rgba(var(--wash),.15);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .3s} .star-modal-close:hover{background:rgba(0,0,0,.7);transform:rotate(90deg)} .star-modal-photo{position:relative;min-height:340px;background:#0a0a0a} .star-modal-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .star-modal-photo-fade{position:absolute;inset:0;background:linear-gradient(to right,transparent 58%,var(--card));pointer-events:none} .star-modal-body{padding:2rem 1.85rem;overflow-y:auto;overflow-x:hidden;min-width:0;display:flex;flex-direction:column} .star-modal-eyebrow{font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem} .star-modal-name{font-family:var(--sans);font-size:clamp(1.35rem,2.5vw,1.85rem);font-weight:800;letter-spacing:-.02em;overflow-wrap:break-word;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.9rem;line-height:1.05} .star-modal-desc{color:var(--muted);font-size:.92rem;line-height:1.8;margin-bottom:1.75rem} .star-modal-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto} .star-link{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--rx);background:rgba(var(--wash),.05);border:1px solid var(--b);color:var(--text);font-family:var(--sans);font-size:.8rem;font-weight:700;transition:transform .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease} .star-link svg{width:16px;height:16px} .star-link:hover{transform:translateY(-2px);border-color:var(--bh)} .star-link.sp:hover{border-color:#1DB954;color:#1DB954;box-shadow:0 6px 18px rgba(29,185,84,.18)} .star-link.sc:hover{border-color:#FF5500;color:#FF7700;box-shadow:0 6px 18px rgba(255,85,0,.18)} .star-link.ig:hover{border-color:#E1306C;color:#E1306C;box-shadow:0 6px 18px rgba(225,48,108,.18)} @media(max-width:700px){ .star-modal-card{grid-template-columns:1fr;max-height:92vh} .star-modal-photo{height:180px;min-height:180px} .star-modal-photo-fade{background:linear-gradient(to bottom,transparent 45%,var(--card))} .star-modal-body{padding:1.5rem 1.4rem} } /* ════════════════════════════════════════════════ HOVER fluide & design — Talents · Stars · Équipe ════════════════════════════════════════════════ */ .talent-card:hover{box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 30px rgba(var(--a1),.12);border-color:rgba(var(--a1),.30)} .talent-card:not(.star-card) .talent-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--a2),.20),transparent 60%);opacity:0;transition:opacity .45s ease;pointer-events:none} .talent-card:not(.star-card):hover .talent-img::after{opacity:1} .talent-card .talent-name{transition:color .35s ease} .talent-card:hover .talent-name{background:var(--grad-t);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .team-card .team-photo{transition:transform var(--med),border-color var(--med),box-shadow var(--med)} .team-photo img{transition:transform .7s cubic-bezier(.4,0,.2,1)} .team-card:hover .team-photo{transform:translateY(-6px) scale(1.015);border-color:rgba(var(--a1),.35);box-shadow:0 22px 55px rgba(0,0,0,.45),0 0 30px rgba(var(--a1),.14)} .team-card:hover .team-photo img{transform:scale(1.07)} .team-card .team-name{transition:color .35s ease} .team-card:hover .team-name{background:var(--grad-t);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ════════════════════════════════════════════════ COMPTES — bouton "Mon Compte", menu, modale auth ════════════════════════════════════════════════ */ #account-ctrl{position:relative;display:inline-flex} .account-btn{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 .85rem;border-radius:var(--rx);background:rgba(var(--wash),.06);border:1px solid var(--b);color:var(--text);font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;transition:background var(--fast),border-color var(--fast),transform var(--fast)} .account-btn:hover{border-color:var(--bh);background:rgba(var(--wash),.1);transform:translateY(-1px)} .account-btn.logged{background:linear-gradient(135deg,rgba(var(--a1),.16),rgba(var(--a2),.16));border-color:rgba(var(--a1),.4)} .account-btn svg{width:18px;height:18px;flex-shrink:0} .account-label{max-width:190px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2} @media(max-width:600px){.account-label{display:none}.account-btn{padding:0;width:40px;justify-content:center}} .account-menu{position:absolute;top:48px;right:0;min-width:212px;background:var(--s);border:1px solid var(--b);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.4);padding:.5rem;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:4001} .account-menu.open{opacity:1;transform:translateY(0);pointer-events:auto} .account-menu-head{padding:.55rem .7rem;border-bottom:1px solid var(--b);margin-bottom:.4rem} .account-menu-pseudo{font-family:var(--sans);font-weight:800;font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .account-menu-email{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .account-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.6rem .7rem;border-radius:9px;background:none;border:none;color:var(--text);font-family:var(--sans);font-size:.84rem;font-weight:600;cursor:pointer;transition:background .15s;text-decoration:none} .account-menu-item:hover{background:rgba(var(--wash),.07)} body.auth-lock{overflow:hidden} #auth-modal{position:fixed;inset:0;z-index:7000;display:none;align-items:center;justify-content:center;padding:1.5rem} #auth-modal.open{display:flex} .auth-overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .auth-card{position:relative;z-index:1;width:min(400px,100%);max-height:92vh;overflow-y:auto;background:var(--card);border:1px solid var(--b);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55);padding:2rem 1.85rem;animation:auth-pop .4s cubic-bezier(.2,.7,.2,1)} @keyframes auth-pop{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:none}} .auth-close{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border-radius:50%;background:rgba(var(--wash),.07);border:none;color:var(--muted);font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,transform .3s;display:flex;align-items:center;justify-content:center} .auth-close:hover{background:rgba(var(--wash),.14);color:var(--text);transform:rotate(90deg)} .auth-head{text-align:center;margin-bottom:1.4rem} .auth-klogo{width:48px;height:48px;margin:0 auto .9rem;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:1.5rem;color:#fff;box-shadow:0 6px 22px rgba(var(--a1),.35)} .auth-head h3{font-family:var(--sans);font-size:1.4rem;font-weight:800;margin-bottom:.3rem} .auth-head p{font-size:.82rem;color:var(--muted);line-height:1.5} .auth-google{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.8rem;border-radius:12px;background:#fff;border:1px solid #dadce0;color:#1a1a1a;font-family:var(--sans);font-size:.88rem;font-weight:700;cursor:pointer;transition:box-shadow .2s,transform .2s} .auth-google:hover{box-shadow:0 6px 20px rgba(0,0,0,.2);transform:translateY(-1px)} .auth-or{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--dim);font-size:.72rem;font-weight:700} .auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--b)} .auth-field{margin-bottom:.7rem} .auth-field input{width:100%;box-sizing:border-box;background:rgba(var(--wash),.05);border:1.5px solid var(--b);border-radius:12px;padding:.85rem 1rem;color:var(--text);font-family:var(--sans);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s} .auth-field input:focus{border-color:rgba(var(--a1),.55);box-shadow:0 0 0 3px rgba(var(--a1),.08)} .auth-error{color:#ff6b6b;font-size:.78rem;margin:.2rem 0 .5rem;display:none} .auth-legal{margin-top:1rem;font-size:.72rem;line-height:1.55;color:var(--dim);text-align:center} .auth-submit{width:100%;padding:.9rem;border-radius:12px;background:var(--grad);color:#fff;border:none;font-family:var(--sans);font-size:.92rem;font-weight:800;cursor:pointer;box-shadow:0 6px 22px rgba(var(--a1),.3);transition:transform .2s,box-shadow .2s;margin-top:.3rem} .auth-submit:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(var(--a1),.4)} .auth-switch{text-align:center;margin-top:1.2rem;font-size:.82rem;color:var(--muted)} .auth-switch button{background:none;border:none;color:var(--orange);font-family:var(--sans);font-weight:700;font-size:.82rem;cursor:pointer;text-decoration:underline} /* ════════════════════════════════════════════════ PAIEMENT (mode test) + page Mes achats ════════════════════════════════════════════════ */ #pay-modal{position:fixed;inset:0;z-index:7100;display:none;align-items:center;justify-content:center;padding:1.5rem} #pay-modal.open{display:flex} .pay-overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .pay-card{position:relative;z-index:1;width:min(420px,100%);max-height:92vh;overflow-y:auto;background:var(--card);border:1px solid var(--b);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55);padding:2rem 1.85rem;animation:auth-pop .4s cubic-bezier(.2,.7,.2,1)} .pay-close{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border-radius:50%;background:rgba(var(--wash),.07);border:none;color:var(--muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .3s;z-index:2} .pay-close:hover{background:rgba(var(--wash),.14);color:var(--text);transform:rotate(90deg)} .pay-head{text-align:center;margin-bottom:1.2rem} .pay-lock{font-size:1.6rem;margin-bottom:.4rem} .pay-head h3{font-family:var(--sans);font-size:1.3rem;font-weight:800;margin-bottom:.5rem} .pay-testbadge{display:inline-block;font-size:.66rem;font-weight:700;color:var(--orange);background:rgba(var(--a1),.1);padding:.25rem .7rem;border-radius:999px} .pay-summary{background:rgba(var(--wash),.04);border:1px solid var(--b);border-radius:12px;padding:.9rem 1rem;margin-bottom:1.2rem} .pay-line{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);padding:.2rem 0} .pay-line-disc{color:#4ade80} .pay-line-total{border-top:1px solid var(--b);margin-top:.4rem;padding-top:.5rem;color:var(--text);font-weight:800;font-family:var(--sans);font-size:.95rem} .pay-field{margin-bottom:.7rem} .pay-field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem} .pay-field input{width:100%;box-sizing:border-box;background:rgba(var(--wash),.05);border:1.5px solid var(--b);border-radius:12px;padding:.8rem 1rem;color:var(--text);font-family:var(--sans);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;letter-spacing:.04em} .pay-field input:focus{border-color:rgba(var(--a1),.55);box-shadow:0 0 0 3px rgba(var(--a1),.08)} .pay-row2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .pay-error{color:#ff6b6b;font-size:.78rem;margin:.2rem 0 .5rem;display:none} .pay-submit{width:100%;padding:.9rem;border-radius:12px;background:var(--grad);color:#fff;border:none;font-family:var(--sans);font-size:.95rem;font-weight:800;cursor:pointer;box-shadow:0 6px 22px rgba(var(--a1),.3);transition:transform .2s,box-shadow .2s;margin-top:.4rem} .pay-submit:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(var(--a1),.4)} .pay-submit.loading{opacity:.7;pointer-events:none} .pay-test-note{text-align:center;font-size:.72rem;color:var(--dim);margin-top:.8rem;line-height:1.5} .pay-success-ring{width:64px;height:64px;margin:1rem auto 1.2rem;border-radius:50%;background:rgba(74,222,128,.12);border:2px solid #4ade80;color:#4ade80;display:flex;align-items:center;justify-content:center;font-size:1.8rem;animation:auth-pop .5s} .pay-success-title{text-align:center;font-family:var(--sans);font-size:1.4rem;font-weight:800;margin-bottom:.5rem} .pay-success-msg{text-align:center;color:var(--muted);font-size:.88rem;line-height:1.6;margin-bottom:1.5rem} .pay-success-actions{display:flex;flex-direction:column;gap:.6rem} .pay-success-actions .btn{width:100%;justify-content:center} /* ── Page Mes achats ── */ .compte-wrap{max-width:780px;margin:0 auto;padding:8rem 2rem 6rem} .compte-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem} .compte-hello{font-family:var(--sans);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em} .compte-hello span{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .compte-sub{color:var(--muted);font-size:.88rem;margin-top:.3rem} .order-card{background:var(--card);border:1px solid var(--b);border-radius:var(--rm);padding:1.4rem 1.5rem;margin-bottom:1rem;transition:border-color var(--med)} .order-card:hover{border-color:var(--bh)} .order-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap} .order-date{font-size:.74rem;color:var(--muted);letter-spacing:.04em} .order-total{font-family:var(--sans);font-weight:800;font-size:1.1rem;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .order-item{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.45rem 0;font-size:.88rem;border-top:1px solid var(--b)} .order-item:first-child{border-top:none} .order-item-name{color:var(--text);font-weight:600} .order-item-meta{color:var(--muted);font-size:.78rem} .order-formation{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--b)} .order-formation .btn{width:100%;justify-content:center} .compte-empty{text-align:center;padding:4rem 1rem;color:var(--muted)} .compte-empty-ic{font-size:2.5rem;margin-bottom:1rem;opacity:.7} .badge-formation{display:inline-flex;align-items:center;gap:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--grad);padding:.2rem .6rem;border-radius:999px} /* ════════════════════════════════════════════════ RECRUTEMENT — bouton "ON RECRUTE" + modale ════════════════════════════════════════════════ */ .recrute-btn{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;padding:.6rem 1.2rem;border-radius:var(--rx);background:rgba(var(--wash),.05);border:1px solid rgba(var(--a1),.4);color:var(--text);font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.1em;cursor:pointer;transition:background var(--fast),border-color var(--fast),transform var(--fast),box-shadow var(--fast)} .recrute-btn:hover{background:linear-gradient(135deg,rgba(var(--a1),.18),rgba(var(--a2),.18));border-color:rgba(var(--a1),.75);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--a1),.18)} .recrute-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px rgba(var(--a1),.7);animation:recrute-blink 1.4s ease-in-out infinite;flex-shrink:0} @keyframes recrute-blink{0%,100%{opacity:1}50%{opacity:.4}} #recrute-modal{position:fixed;inset:0;z-index:7050;display:none;align-items:center;justify-content:center;padding:1.5rem} #recrute-modal.open{display:flex} .recrute-overlay{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .recrute-card{position:relative;z-index:1;width:min(440px,100%);max-height:92vh;overflow-y:auto;background:var(--card);border:1px solid var(--b);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.55);padding:2.2rem 2rem;animation:auth-pop .4s cubic-bezier(.2,.7,.2,1)} .recrute-close{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border-radius:50%;background:rgba(var(--wash),.07);border:none;color:var(--muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .3s} .recrute-close:hover{background:rgba(var(--wash),.14);color:var(--text);transform:rotate(90deg)} .recrute-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);background:rgba(var(--a1),.1);padding:.3rem .8rem;border-radius:999px;margin-bottom:1rem} .recrute-title{font-family:var(--sans);font-size:1.5rem;font-weight:800;margin-bottom:.7rem;line-height:1.15} .recrute-p{color:var(--muted);font-size:.88rem;line-height:1.7;margin-bottom:1.2rem} .recrute-list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.6rem} .recrute-list li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--text)} .recrute-list li span{font-size:1.1rem} .recrute-mailwrap{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:1.1rem;border-radius:14px;background:rgba(var(--wash),.04);border:1px solid var(--b)} .recrute-mail-label{font-size:.74rem;color:var(--muted);font-weight:600} .recrute-mail-link{font-family:var(--sans);font-size:1.02rem;font-weight:800;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;word-break:break-all} .recrute-mail-link:hover{filter:brightness(1.15);text-decoration:underline} /* ════════════════════════════════════════════════ MOTION SYSTEM — profondeur au survol (reveals = système .k-reveal/.k-stagger) ════════════════════════════════════════════════ */ .hover-depth{transition:transform .35s var(--ease-out),box-shadow .35s ease} .hover-depth:hover{transform:translateY(-6px)} @media(prefers-reduced-motion:reduce){ .hover-depth:hover{transform:none} } /* ════════════════════════════════════════════════ FORMATION SHOWCASE — section offre phare (homepage) ════════════════════════════════════════════════ */ .fmshow-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3.5rem;align-items:center;margin-top:2rem} .fmshow-title{font-family:var(--sans);font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-bottom:1.2rem} .chroma-text{background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .fmshow-lead{color:var(--muted);line-height:1.8;font-size:var(--fs-body);max-width:520px;margin-bottom:1.8rem} .fmshow-proof{display:flex;gap:2.2rem;margin-bottom:2rem;flex-wrap:wrap} .fmshow-stat{display:flex;flex-direction:column} .fmshow-stat-num{font-family:var(--sans);font-size:2rem;font-weight:800;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1} .fmshow-stat-lbl{font-size:.76rem;color:var(--muted);margin-top:.35rem;max-width:130px;line-height:1.35} .fmshow-cta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap} .fmshow-price{font-family:var(--sans);font-size:2.1rem;font-weight:800;color:var(--text)} .fmshow-modules{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .fmshow-mod{background:var(--card);border:1px solid var(--b);border-radius:var(--rm);padding:1.3rem;transition:transform .35s var(--ease-out),border-color .35s ease,box-shadow .35s ease} .fmshow-mod:hover{transform:translateY(-5px);border-color:rgba(var(--a1),.4);box-shadow:var(--glow-a1)} .fmshow-mod-ic{font-size:1.6rem;display:block;margin-bottom:.5rem} .fmshow-mod-name{font-family:var(--sans);font-weight:800;font-size:1rem;display:block} .fmshow-mod-desc{font-size:.77rem;color:var(--muted);display:block;margin-top:.25rem;line-height:1.4} .fmshow-mod-goat{border-color:rgba(255,190,60,.4);background:linear-gradient(135deg,rgba(255,190,60,.1),rgba(255,80,180,.07))} .fmshow-mod-goat:hover{border-color:rgba(255,190,60,.7);box-shadow:0 0 34px rgba(255,190,60,.22)} @media(max-width:900px){.fmshow-grid{grid-template-columns:1fr;gap:2.2rem}} @media(max-width:560px){.fmshow-modules{grid-template-columns:1fr}.fmshow-proof{gap:1.4rem}} /* modif 10 : plus aucune offre "1er mois offert" */ .mois-offert-banner{display:none!important} /* ════════ Scrollbar design (modif 10) ════════ */ html{scrollbar-width:thin;scrollbar-color:rgba(var(--a1),.55) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--grad);border-radius:999px;border:3px solid var(--bg);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{border-width:2px} /* ════════ Stats KROMATIK — compteurs (modif 10 / restylé modif 12 / redesign modif 14) ════════ */ .kstats{padding-top:2rem;padding-bottom:3rem} .kstats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:880px;margin:0 auto} .kstat{position:relative;overflow:hidden;padding:2rem 1.6rem 1.9rem;border-radius:26px;border:1px solid var(--b);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 82%,transparent),color-mix(in srgb,var(--card) 40%,transparent));backdrop-filter:blur(8px);transition:transform .4s var(--ease-out),box-shadow .4s} /* Liseré dégradé permanent (masque : contour uniquement) — subtil, s'intensifie au survol */ .kstat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.32;transition:opacity .4s;pointer-events:none;z-index:2} .kstat:hover{transform:translateY(-6px);box-shadow:0 22px 55px -20px rgba(var(--a1),.45)} .kstat:hover::before{opacity:.85} .kstat:hover .kstat-glow{opacity:.6;transform:translate(-50%,-50%) scale(1.18)} /* Halo lumineux d'ambiance */ .kstat-glow{position:absolute;top:34%;left:50%;width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--a1),.26),rgba(var(--a2),.12) 45%,transparent 70%);filter:blur(16px);opacity:.38;transition:opacity .5s,transform .6s var(--ease-out);pointer-events:none;z-index:0} /* Ligne du haut : icône en médaillon + puce de catégorie */ .kstat-top{position:relative;z-index:1;display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem} .kstat-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border-radius:13px;background:linear-gradient(135deg,rgba(var(--a1),.18),rgba(var(--a2),.14));border:1px solid rgba(var(--a1),.32);color:var(--orange);box-shadow:0 0 18px rgba(var(--a1),.16)} .kstat-ic svg{width:22px;height:22px} .kstat-chip{font-family:var(--sans);font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:.32rem .7rem;border-radius:999px;background:rgba(var(--wash),.06);border:1px solid var(--b)} .kstat-num{position:relative;z-index:1;display:block;white-space:nowrap;font-family:var(--sans);font-weight:800;font-size:clamp(2.3rem,4.8vw,3.5rem);line-height:1;letter-spacing:-.03em;background:var(--grad-t);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 30px rgba(var(--a1),.3))} /* Brillance qui balaie le chiffre */ .kstat-num::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(var(--wash),.55) 50%,transparent 62%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;background-position:180% 0;animation:kstatShine 5.5s ease-in-out infinite;pointer-events:none} @keyframes kstatShine{0%,72%{background-position:180% 0}100%{background-position:-80% 0}} .kstat-label{position:relative;z-index:1;color:var(--muted);font-size:.95rem;font-weight:600;letter-spacing:.01em;margin-top:.5rem} /* Mini graphique animé (remplace le trait) */ .kstat-spark{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:flex-start;gap:5px;height:34px;margin-top:1.3rem} .kstat-spark i{width:9px;height:8%;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,rgba(var(--a1),.9),rgba(var(--a2),.55));opacity:.85;transition:height .9s var(--ease-out)} .kstat-spark i:last-child{background:var(--grad);opacity:1;box-shadow:0 0 12px rgba(var(--a1),.55)} .k-stagger.visible .kstat-spark i{height:var(--h)} .kstat-spark i:nth-child(2){transition-delay:.07s}.kstat-spark i:nth-child(3){transition-delay:.14s}.kstat-spark i:nth-child(4){transition-delay:.21s}.kstat-spark i:nth-child(5){transition-delay:.28s}.kstat-spark i:nth-child(6){transition-delay:.35s}.kstat-spark i:nth-child(7){transition-delay:.42s} /* Mention "mises à jour" */ .kstats-note{display:flex;align-items:center;justify-content:center;gap:.5rem;max-width:880px;margin:1.6rem auto 0;color:var(--dim);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .kstats-live{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px rgba(var(--a1),.7);animation:kstatPulse 2.2s ease-in-out infinite} @keyframes kstatPulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} @media(prefers-reduced-motion:reduce){.kstat-num::after{animation:none;opacity:0}.kstats-live{animation:none}.kstat-spark i{transition:none;height:var(--h)}} @media(max-width:560px){.kstats-grid{grid-template-columns:1fr;gap:1.1rem}} /* Arguments de vente formation (modif 10) */ .fmshow-sell{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin:0 0 1.8rem} .fmshow-sell li{display:flex;align-items:flex-start;gap:.65rem;font-size:.92rem;color:var(--muted);line-height:1.5} .fmshow-sell li span strong{color:var(--text)} /* ════════ Chèvre d'or — badge « GOAT de KROMATIK » (modif 15) ════════ */ #km-goat{position:fixed;top:92px;right:18px;z-index:950;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;padding:0;text-decoration:none;cursor:pointer;background:radial-gradient(circle at 34% 28%,#fff6c0,#ffd21e 42%,#e6a200 74%,#9c6400);box-shadow:0 0 0 2px rgba(255,214,0,.55),0 8px 26px rgba(255,190,0,.5),inset 0 -3px 7px rgba(120,78,0,.55);animation:km-goat-float 3.6s ease-in-out infinite;transition:transform .3s var(--ease-out)} #km-goat.playing{animation:km-goat-float 3.6s ease-in-out infinite,km-goat-shake .5s ease-in-out infinite} @keyframes km-goat-shake{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} /* Bouton de réglage du son — fondu pendant la lecture */ #km-goat-mute{position:fixed;top:150px;right:24px;z-index:950;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,214,0,.4);cursor:pointer;background:rgba(20,16,6,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.4);font-size:16px;color:#ffe066;opacity:0;transform:translateY(-6px) scale(.85);pointer-events:none;transition:opacity .4s ease,transform .4s var(--ease-out)} #km-goat-mute.show{opacity:1;transform:none;pointer-events:auto} #km-goat-mute.muted{color:#ff6b6b;border-color:rgba(255,107,107,.45)} #km-goat-mute:hover{border-color:rgba(255,214,0,.8)} @media(max-width:600px){#km-goat-mute{top:126px;right:18px;width:34px;height:34px;font-size:14px}} #km-goat:hover{transform:scale(1.12) rotate(-6deg)} .km-goat-emoji{font-size:26px;line-height:1;filter:drop-shadow(0 1px 1px rgba(90,60,0,.5))} .km-goat-ring{position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(255,225,120,.6);opacity:0;animation:km-goat-pulse 2.6s ease-out infinite;pointer-events:none} @keyframes km-goat-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes km-goat-pulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.55);opacity:0}} @media(max-width:600px){#km-goat{top:74px;right:14px;width:44px;height:44px}.km-goat-emoji{font-size:22px}} @media(prefers-reduced-motion:reduce){#km-goat{animation:none}.km-goat-ring{animation:none}} /* ════════════════════════════════════════════════ MOBILE — ajustements ≤768px UNIQUEMENT (7 juillet 2026) ⚠️ 100% des règles sont dans @media (max-width:768px) : au-dessus de 768px (ORDINATEUR), AUCUNE ne s'applique. ════════════════════════════════════════════════ */ @media (max-width:768px){ /* Sécurité : aucune image/vidéo ne dépasse la largeur de l'écran */ img,video,iframe{max-width:100%} /* Écran de chargement / intro : bien centré, sous-titre qui ne déborde pas */ #intro{padding-left:1.1rem;padding-right:1.1rem} .intro-sub{letter-spacing:.16em} /* « Nos stars » : 3 par ligne (au lieu d'une seule carte énorme) */ .stars-grid{grid-template-columns:repeat(3,1fr)!important;gap:.55rem!important} .stars-grid .talent-info{padding:.55rem .3rem!important;text-align:center} .stars-grid .talent-name{font-size:.72rem!important;letter-spacing:0!important;line-height:1.15} .stars-grid .talent-role{display:none!important} /* le rôle reste visible au tap (modale) */ .stars-grid .star-hover{display:none!important} /* pas de survol au tactile */ /* ════ GLOBAL : aucun scroll horizontal sur tout le site ════ */ html{overflow-x:clip} /* ════ Barre du haut : STABLE au scroll (fond permanent) + liens TOUJOURS visibles (plus de menu burger) ════ */ .nav{position:sticky!important;top:0;background:color-mix(in srgb,var(--bg) 96%,transparent)!important;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--b)} .nav-burger{display:none!important} .mobile-nav{display:none!important} .nav>div{flex-wrap:wrap;row-gap:.45rem;padding:0 .9rem!important} .nav-links{display:flex!important;flex-wrap:wrap;justify-content:center;align-content:center;gap:.6rem .32rem;order:3;flex-basis:100%;margin:0;min-width:0} .nav-links li{display:flex} .nav-right{order:2} /* On masque « ← Retour au site » UNIQUEMENT sur les pages qui ont déjà le lien « Accueil » dans la barre (accueil, catalogue, devis) → Compte + Panier y restent à la même place. Sur les pages compte (Mes prods / Mes formations / Tous mes achats), pas de lien Accueil : on GARDE le « Retour au site » pour pouvoir revenir. */ .nav:has(.nav-links) .nav-right a.btn{display:none!important} .nav-link{font-size:.82rem;padding:.5rem .75rem} .nav-link.nav-catalogue,.nav-link.nav-presta,.nav-link.nav-devis{padding:.5rem .8rem} /* ════ Panier PLEIN ÉCRAN (fermeture par la croix en haut à droite) ════ */ #cart-drawer{width:100vw!important;max-width:100vw} /* ════ Boutons thème (bas-gauche) toujours entièrement visibles ════ On les remonte + on respecte la zone de sécurité du téléphone (barre/encoche du bas) pour qu'ils ne soient jamais coupés, quel que soit le modèle. */ .theme-ctrl{left:.7rem!important;bottom:calc(1.1rem + env(safe-area-inset-bottom, 0px))!important;top:auto!important;z-index:6000!important} .tp-panel{width:min(248px,calc(100vw - 1.4rem))} /* ════ Cases CÔTE À CÔTE comme sur PC ════ */ .kstats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.7rem!important} .kstat{padding:1.2rem .7rem 1.3rem!important;overflow:visible!important} .kstat-num{font-size:clamp(1rem,4.6vw,1.9rem)!important} /* Icône + chip (« Audience »/« Réalisations ») sur UNE ligne, chip juste à droite de l'icône, non coupé */ .kstat-top{flex-wrap:nowrap!important;gap:.3rem;align-items:center;justify-content:flex-start} .kstat-ic{width:30px!important;height:30px!important;flex-shrink:0} .kstat-ic svg{width:16px!important;height:16px!important} .kstat-chip{white-space:nowrap!important;overflow:visible;font-size:.5rem;letter-spacing:.02em!important;padding:.22rem .35rem;line-height:1.2;flex-shrink:0} .kstat-label{font-size:.8rem;white-space:normal} .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.3rem 1rem!important} /* ════ Stars + Talents (les 2 sections) : 3 par ligne, nom complet sur UNE ligne ════ */ .talents-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.5rem!important} .talents-grid .talent-info{padding:.5rem .25rem!important;text-align:center} .talents-grid .talent-name{font-size:.66rem!important;letter-spacing:0!important;white-space:nowrap;overflow:visible;line-height:1.15;margin-bottom:.4rem} .talents-grid .talent-role{font-size:.56rem} .talent-socials{gap:.25rem;flex-wrap:wrap;justify-content:center} /* ════ Équipe : photos plus petites, nom sur une ligne ════ */ #equipe .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important;gap:.7rem} .team-photo{max-width:120px;margin-left:auto;margin-right:auto} .team-name{white-space:nowrap;font-size:.85rem;letter-spacing:.02em} /* ════ Formation « de zéro à créateur » : modules 3/ligne (2×3), rétrécis ════ */ .fmshow-modules{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.4rem!important} .fmshow-mod{padding:.55rem .35rem!important} .fmshow-mod-ic{font-size:1.2rem;margin-bottom:.25rem} .fmshow-mod-name{font-size:.62rem} .fmshow-mod-desc{display:none} /* ════ Formules : 2×2, proportions compactes ════ */ .formule-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.6rem!important} .formule-card{padding:1rem .8rem!important;min-width:0} .formule-name{font-size:1.02rem} .formule-price{font-size:1.5rem} .formule-features{gap:.35rem} .formule-feat{font-size:.74rem} /* Boutons « Demander un devis » : même taille de bouton (pleine largeur), police + padding interne réduits pour ne pas être coupés */ .formule-card .btn{font-size:.62rem!important;white-space:nowrap;letter-spacing:0;padding-left:.3rem!important;padding-right:.3rem!important} /* ════ Prestations : 3 par ligne ════ */ .presta-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.45rem!important} .presta-item{padding:.7rem .5rem!important;min-width:0} .presta-item-title{font-size:.72rem} .presta-price{font-size:1.15rem} /* ════ Hero : paragraphe centré + boutons (Formules à gauche / Formation à droite, même ligne) + bandeau 49€ plus petit centré dessous ════ */ .hero-bottom{align-items:center!important;text-align:center} .hero-bottom>div{align-items:center!important;width:100%} .hero-desc{max-width:none!important;text-align:center;margin:0 auto} .hero-btns{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:.5rem} .hero-btns .btn{font-size:.76rem;padding:.55rem .8rem} .hero-btns .btn-neon{order:1} /* Nos formules → à gauche */ .hero-btns .btn-grad{order:2} /* Découvrir la formation → à droite */ .formation-strip{transform:scale(.9);transform-origin:top center;margin:.2rem auto 0} /* ════ Arrivée mobile : le hero tient dans le 1er écran (jusqu'au bandeau formation), collé sous la nav — plus de grand vide au milieu ════ */ #hero{min-height:auto!important;justify-content:flex-start!important;padding-top:1rem!important;padding-bottom:2rem!important} #hero .hero-eyebrow{margin-bottom:.9rem} #hero .hero-title{margin-bottom:1.3rem} #hero .hero-bottom{gap:1.1rem} .scroll-hint{display:none} /* plus besoin de l'indice scroll en mobile */ .fmshow-cta{flex-direction:row!important;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem} /* ════ Divers mobile ════ */ /* Logo footer un peu plus petit (moins collé à la nav) */ .footer-logo{font-size:1.15rem} /* Panier : plein écran, tout contenu, rien qui déborde */ #cart-drawer{box-sizing:border-box} .cart-checkout-btn{white-space:normal;font-size:.9rem;line-height:1.3} .cart-header{padding:1.15rem 1.15rem} /* Bouton d'acceptation (Mes prods) : texte centré dans le bouton */ .rights-btn,#rights-ok{text-align:center;justify-content:center;white-space:normal} /* Bouton « Ouvrir ma formation Nouveau-né » (Tous mes achats) : 1 seule ligne, non coupé */ .order-formation .btn{white-space:nowrap;padding-left:.5rem;padding-right:.5rem;font-size:.8rem} /* Catalogue de prods : nav en flux (sticky) → petit espace en haut suffit */ .catalog-hero{padding-top:1.5rem!important;min-height:auto!important} } /* ════════════════════════════════════════════════ MODALE « Conditions KROMATIK » (avant paiement Stripe) — PC + mobile ════════════════════════════════════════════════ */ #kcond-modal{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:1.4rem} #kcond-modal.open{display:flex} .kcond-overlay{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .kcond-card{position:relative;z-index:1;width:min(600px,100%);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 86%,#000),var(--card));border:1px solid rgba(var(--a1),.35);border-radius:22px;padding:2.1rem 1.85rem 1.6rem;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);animation:auth-pop .4s cubic-bezier(.2,.7,.2,1)} .kcond-x{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border-radius:50%;background:rgba(var(--wash),.08);border:none;color:var(--muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .3s;z-index:2} .kcond-x:hover{background:rgba(var(--wash),.16);color:var(--text);transform:rotate(90deg)} .kcond-title{font-family:var(--sans);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;margin:0 0 1rem;padding-right:2rem} .kcond-body{overflow-y:auto;color:var(--muted);font-size:.84rem;line-height:1.62;padding-right:.4rem} .kcond-body p{margin:.55rem 0} .kcond-body strong{color:var(--text)} .kcond-accept{flex-shrink:0;width:100%;margin-top:1.2rem;padding:.9rem;border:none;border-radius:12px;background:var(--grad);color:#fff;font-family:var(--sans);font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 6px 22px rgba(var(--a1),.3);transition:transform .2s,box-shadow .2s} .kcond-accept:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(var(--a1),.42)} @media(max-width:768px){.kcond-card{padding:1.7rem 1.2rem 1.3rem}.kcond-title{font-size:1.2rem}}