/* Composants libres en verre liquide : exactement ceux du croquis L
(localhost:59247), copiés tels quels. */
/* police de Secunary (carte d'abonnement du haut de page, logos des clients) */
@font-face { font-family: 'Hello Bride'; src: url(fonts/hello-bride-script.ttf) format('truetype'); font-weight: 400; font-display: swap; }
/* =========== COMPOSANTS EN VERRE LIQUIDE =========== */
.cmp { position: relative; border-radius: 22px; padding: 15px; color: #fff; font-family: 'Inter Tight', system-ui, sans-serif;
background: linear-gradient(140deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.045) 38%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.08) 100%);
-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.05),
inset 0 0 26px rgba(255,255,255,.05), 0 26px 60px rgba(0,0,0,.42); }
/* reflet spéculaire en haut à gauche */
.cmp::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(120% 70% at 12% -10%, rgba(255,255,255,.22), transparent 55%); }
/* liseré qui accroche la lumière (blanc en haut à gauche, lavande en bas à droite) */
.cmp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 60%, rgba(170,160,255,.55));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cmp > * { position: relative; z-index: 1; }
.cmp .lb { font-size: 11px; color: rgba(255,255,255,.55); }
.cmp-back { position: absolute; inset: 0; border-radius: 22px;
background: linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(255,255,255,.07));
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
.cmp-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 18px; transform: translate(-50%, -50%); opacity: .45;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.gl { background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.08); }
/* notification */
.c-notif { width: 272px; display: flex; gap: 11px; align-items: center; padding: 12px 13px; border-radius: 24px; }
.c-notif .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(120,140,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 rgba(130,150,255,0); animation: icpulse 3s ease-in-out infinite; }
.c-notif .ic { color: #fff; }
.c-notif .ic svg { width: 21px; height: 14px; }
.c-notif .tx { flex: 1; min-width: 0; }
.c-notif b { display: block; font-size: 12.5px; font-weight: 600; }
.c-notif span { display: block; font-size: 12px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-notif em { font-style: normal; font-size: 10.5px; opacity: .5; align-self: flex-start; }
@keyframes icpulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 rgba(130,150,255,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 20px rgba(130,150,255,.7); } }
/* chiffre clé */
.c-kpi { width: 212px; }
.c-kpi .v { font-size: 27px; font-weight: 600; letter-spacing: -.03em; margin-top: 4px; }
.c-kpi .bd { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; vertical-align: middle; color: #c8ffe4; background: rgba(120,255,190,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.c-kpi svg { display: block; width: 100%; height: 44px; margin-top: 8px; overflow: visible; }
.c-kpi .sp { stroke-dasharray: 100; animation: draw 6s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(200,210,255,.8)); }
.c-kpi .sa { animation: areaIn 6s ease-in-out infinite; }
/* barres */
.c-chart { width: 252px; }
.c-chart .hd { display: flex; justify-content: space-between; align-items: baseline; }
.c-chart .hd b { font-size: 13px; font-weight: 600; }
.c-chart .bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; margin-top: 14px; border-bottom: 1px solid rgba(255,255,255,.14); }
.c-chart .bars i { flex: 1; border-radius: 7px 7px 3px 3px; height: var(--h); transform-origin: bottom; animation: barUp 6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--k) * .12s);
background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.c-chart .bars i:nth-child(5) { background: linear-gradient(rgba(170,180,255,.9), rgba(120,110,255,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 18px rgba(140,130,255,.6); }
@keyframes barUp { 0% { transform: scaleY(0); } 18%, 86% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
.c-chart .ax { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: rgba(255,255,255,.45); }
/* fiche produit */
.c-prod { width: 180px; padding: 10px; }
.c-prod .im { height: 128px; border-radius: 15px; position: relative; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); }
.c-prod .im::before { content: ''; position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(190,200,255,.35) 35%, rgba(120,110,255,.15) 65%, transparent 72%);
box-shadow: 0 0 30px rgba(140,150,255,.35); animation: orb 6s ease-in-out infinite alternate; }
@keyframes orb { to { transform: translate(-50%, -56%) scale(1.06); } }
.c-prod .im::after { content: ''; position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.c-prod b { display: block; font-size: 13px; font-weight: 600; margin-top: 10px; }
.c-prod .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.c-prod .pr { font-size: 13px; opacity: .75; }
.c-prod .add { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; animation: addp 3.5s ease-in-out infinite; }
@keyframes addp { 0%, 70%, 100% { transform: scale(1); background: rgba(255,255,255,.14); } 78% { transform: scale(.86); } 86% { transform: scale(1.12); background: rgba(140,150,255,.55); } }
/* interrupteurs */
.c-tog { width: 232px; padding: 8px 15px; }
.c-tog .r { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12.5px; }
.c-tog .r:last-child { border-bottom: 0; }
.c-tog .sw { width: 38px; height: 22px; border-radius: 99px; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.1); animation: swTrack 6s infinite; animation-delay: calc(var(--k) * 1.3s); }
.c-tog .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 1px 4px rgba(0,0,0,.4); animation: swKnob 6s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: inherit; }
@keyframes swTrack { 0%, 45% { background: rgba(255,255,255,.12); } 50%, 95% { background: rgba(130,150,255,.6); } 100% { background: rgba(255,255,255,.12); } }
@keyframes swKnob { 0%, 45% { transform: translateX(0); } 50%, 95% { transform: translateX(16px); } 100% { transform: translateX(0); } }
/* conversation */
.c-chat { width: 244px; display: flex; flex-direction: column; gap: 8px; }
.c-chat .m { max-width: 84%; padding: 8px 12px; border-radius: 16px; font-size: 12px; line-height: 1.35; animation: msgIn 8s ease-out infinite; }
.c-chat .m.in { align-self: flex-start; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); border-bottom-left-radius: 5px; }
.c-chat .m.out { align-self: flex-end; background: rgba(120,135,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px rgba(120,130,255,.3); border-bottom-right-radius: 5px; animation-name: msgIn2; }
.c-chat .ty { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); animation: tyIn 8s infinite; }
.c-chat .ty i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75); animation: dot 1.2s ease-in-out infinite; }
.c-chat .ty i:nth-child(2) { animation-delay: .15s; } .c-chat .ty i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msgIn { 0% { opacity: 0; transform: translateY(6px); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes msgIn2 { 0%, 22% { opacity: 0; transform: translateY(6px) scale(.95); } 28%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes tyIn { 0%, 40% { opacity: 0; } 45%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* déploiement */
.c-dep { width: 252px; }
.c-dep .hd { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.c-dep .st { position: relative; font-size: 11px; font-weight: 600; }
.c-dep .st span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 2px 9px; border-radius: 99px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.c-dep .st .a { color: #fff1d6; background: rgba(255,210,140,.16); animation: stA 7s infinite; }
.c-dep .st .b { color: #d4ffe9; background: rgba(120,255,190,.16); animation: stB 7s infinite; }
@keyframes stA { 0%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes stB { 0%, 70% { opacity: 0; } 72%, 96% { opacity: 1; } 100% { opacity: 0; } }
.c-dep .tr { height: 8px; border-radius: 99px; margin-top: 14px; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.c-dep .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(200,205,255,.95)); box-shadow: 0 0 12px rgba(180,190,255,.8); animation: fill 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes fill { 0% { width: 0; } 70%, 96% { width: 100%; } 100% { width: 0; } }
.c-dep .lg { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font: 10.5px/1.2 ui-monospace, Menlo, monospace; color: rgba(255,255,255,.55); }
.c-dep .lg span { animation: msgIn 7s infinite; }
.c-dep .lg span:nth-child(2) { animation-name: lg2; } .c-dep .lg span:nth-child(3) { animation-name: lg3; color: #d4ffe9; }
@keyframes lg2 { 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes lg3 { 0%, 70% { opacity: 0; } 73%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* bouton en verre : un reflet le traverse et un halo respire (pas de curseur) */
.c-btn { padding: 13px 24px; border-radius: 99px; overflow: hidden; }
.c-btn .bt { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.c-btn .sh { position: absolute; inset: 0; border-radius: 99px; z-index: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 48%, rgba(255,255,255,.05) 56%, transparent 66%);
background-size: 260% 100%; animation: btnSheen 5s ease-in-out infinite; }
@keyframes btnSheen { 0%, 45% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
.c-btn.glow { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 1px 0 0 rgba(255,255,255,.14), 0 0 0 rgba(140,150,255,0), 0 26px 60px rgba(0,0,0,.42); animation: btnGlow 5s ease-in-out infinite; }
@keyframes btnGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 1px 0 0 rgba(255,255,255,.14), 0 0 0 rgba(140,150,255,0), 0 26px 60px rgba(0,0,0,.42); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 1px 0 0 rgba(255,255,255,.14), 0 0 34px rgba(140,150,255,.45), 0 26px 60px rgba(0,0,0,.42); } }
/* calendrier */
.c-cal { width: 204px; }
.c-cal .hd { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; }
.c-cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; font-size: 10px; text-align: center; color: rgba(255,255,255,.6); }
.c-cal .g span { height: 20px; display: grid; place-items: center; border-radius: 7px; }
.c-cal .g span.on { animation: dayOn 6s steps(1) infinite; animation-delay: calc(var(--k) * 2s); }
@keyframes dayOn { 0% { background: rgba(140,150,255,.5); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } 33.3%, 100% { background: transparent; color: rgba(255,255,255,.6); box-shadow: none; } }
/* fiche produit avec une photo de paysage (à la place de la sphère) */
.c-prod .im.ph { background: #1a1c28 center / cover no-repeat; }
.c-prod .im.ph::before { display: none; }
/* =========== composants ajoutés (même verre liquide que ceux du croquis L) =========== */
/* carte membre : palier, points qui se remplissent, avantages, reflet qui passe */
.c-mem { width: 252px; overflow: hidden; }
.c-mem .hd { display: flex; align-items: center; gap: 9px; }
/* logo inventé : monogramme « H » doré à empattements, sur un carré sombre liseré d'or */
.c-mem .hd .hc { flex: none; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.4); }
/* nom Secunary dans sa police */
.c-mem .hd .nm { font-family: 'Hello Bride', cursive; font-weight: 400; font-size: 24px; line-height: 1; margin: 2px 0 0 7px; }
.c-mem .hd b { font-size: 13px; font-weight: 600; }
.c-mem .hd em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #0a0a0a; padding: 3px 9px; border-radius: 99px; background: linear-gradient(90deg, #ffffff, #c9cbd1); }
.c-mem .price { margin-top: 14px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.c-mem .price small { font-size: 12px; font-weight: 500; opacity: .55; margin-left: 3px; }
.c-mem .bar { height: 7px; margin-top: 12px; border-radius: 99px; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); overflow: hidden; }
.c-mem .bar i { display: block; height: 100%; width: 70%; border-radius: 99px; background: linear-gradient(90deg, #ffffff, #b9bcc6); box-shadow: 0 0 12px rgba(255,255,255,.45); transform-origin: left; animation: memFill 7s cubic-bezier(.3,.8,.2,1) infinite; }
@keyframes memFill { 0% { transform: scaleX(0); } 35%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.c-mem .ft { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: rgba(255,255,255,.55); }
.c-mem .pk { display: flex; flex-direction: column; gap: 6px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }
.c-mem .pk span { display: flex; align-items: center; gap: 8px; opacity: 0; animation: perk 7s infinite; }
.c-mem .pk span::before { content: '✓'; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: rgba(120,255,190,.18); color: #c8ffe4; }
.c-mem .pk span:nth-child(2) { animation-delay: .35s; } .c-mem .pk span:nth-child(3) { animation-delay: .7s; }
@keyframes perk { 0%, 30% { opacity: 0; transform: translateY(4px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.c-mem .gl2 { position: absolute; inset: 0; z-index: 2 !important; pointer-events: none; border-radius: inherit;
background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.18) 48%, transparent 58%); background-size: 260% 100%; animation: btnSheen 6s ease-in-out infinite; }
/* mots animés : un reflet lumineux traverse le texte (effet « en train de créer ») */
@keyframes shim { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.shim { background: linear-gradient(90deg, rgba(255,255,255,.42) 0 38%, #fff 50%, rgba(255,255,255,.42) 62% 100%); background-size: 250% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: shim 1.8s linear infinite; }
/* points de suspension qui s'allument un à un */
.ell i { display: inline-block; width: 3.5px; height: 3.5px; margin-left: 2px; border-radius: 50%; background: currentColor; opacity: .25; animation: ell 1.2s infinite; vertical-align: 1px; }
.ell i:nth-child(2) { animation-delay: .2s; } .ell i:nth-child(3) { animation-delay: .4s; }
@keyframes ell { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
/* compteur animé (chiffres qui montent) */
@property --n { syntax: ''; initial-value: 0; inherits: false; }
/* =========== groupes d'éléments libres, sans fond ===========
Un groupe = plusieurs petits éléments posés côte à côte, sans bloc de verre
autour ; ils vont ensemble parce qu'ils font le même mouvement. */
.clu { position: relative; color: #fff; font-family: 'Inter Tight', system-ui, sans-serif; }
.clu > * { position: absolute; }
.clu .chip { padding: 6px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.35); }
.clu .tile { border-radius: 16px; overflow: hidden; background: #1a1c28 center / cover; box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); }
/* Claude : le logo se resserre d'un coup puis se réétire ; à côté, les morceaux
d'une app arrivent en place un à un, un cadre de sélection passe de l'un à l'autre */
.k-claude { width: 320px; height: 262px; }
.k-claude .cl { left: 18px; top: 74px; width: 50px; height: 50px; animation: clPulse 1.8s cubic-bezier(.6,0,.3,1) infinite; filter: drop-shadow(0 0 10px rgba(217,119,87,.5)); }
@keyframes clPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 45%, 60% { transform: scale(.38) rotate(28deg); } }
.k-claude .tx { left: 0; top: 138px; width: 110px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.k-claude .im { left: 122px; top: 0; width: 196px; height: 110px; animation: kZoom 8s infinite; }
.k-claude .cd { left: 122px; width: 196px; height: 46px; display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 13px; background: rgba(20,22,31,.92); box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08); }
.k-claude .cd i { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #1a1c28 center / cover; }
.k-claude .cd u { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.22); }
.k-claude .cd u + u { width: 60%; margin-top: 6px; background: rgba(255,255,255,.12); }
.k-claude .cd span { flex: 1; }
.k-claude .c1 { top: 120px; animation: kRight 8s infinite; }
.k-claude .c2 { top: 174px; left: 150px; width: 168px; animation: kRight2 8s infinite; }
.k-claude .bt { left: 122px; top: 230px; padding: 7px 18px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: linear-gradient(90deg, #5b8cff, #a46bff); box-shadow: 0 8px 20px rgba(110,110,255,.4); animation: kPop 8s cubic-bezier(.3,1.6,.5,1) infinite; }
.k-claude .sel { border: 1.5px solid #6f8cff; border-radius: 6px; box-shadow: 0 0 0 4px rgba(111,140,255,.12); animation: kSel 8s ease-in-out infinite; }
.k-claude .sel::before, .k-claude .sel::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 1.5px; background: #fff; border: 1.5px solid #6f8cff; }
.k-claude .sel::before { left: -4px; top: -4px; } .k-claude .sel::after { right: -4px; bottom: -4px; }
@keyframes kZoom { 0%, 4% { opacity: 0; transform: scale(.8); } 12%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes kRight { 0%, 18% { opacity: 0; transform: translateX(50px); } 26%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes kRight2 { 0%, 30% { opacity: 0; transform: translateX(50px); } 38%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes kPop { 0%, 44% { opacity: 0; transform: scale(.3); } 52%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes kSel { 0%, 6% { left: 118px; top: -4px; width: 204px; height: 118px; opacity: 0; } 10%, 18% { left: 118px; top: -4px; width: 204px; height: 118px; opacity: 1; }
26%, 32% { left: 118px; top: 116px; width: 204px; height: 54px; opacity: 1; } 40%, 46% { left: 146px; top: 170px; width: 176px; height: 54px; opacity: 1; }
54%, 62% { left: 118px; top: 226px; width: 120px; height: 36px; opacity: 1; } 70%, 100% { left: 118px; top: 226px; width: 120px; height: 36px; opacity: 0; } }
/* vidéo de motion design : une vidéo virale de promo d'app en train d'être
montée. Plan vertical détaillé (photo qui zoome, logo Aria Studio, texte
qui s'écrit, icônes façon Reels, note, bouton), vues, timeline, sans fond */
.k-video { width: 344px; height: 272px; }
.k-video .vt { left: 0; top: 0; width: 148px; height: 268px; border-radius: 20px; overflow: hidden; background: #120f2a;
box-shadow: 0 18px 44px rgba(120,100,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.k-video .vt > * { position: absolute; }
/* fond : photo qui zoome lentement, dégradé coloré par-dessus */
.k-video .bg { inset: -10%; background: center / cover; animation: vidKen 6s ease-in-out infinite alternate; }
@keyframes vidKen { from { transform: scale(1); } to { transform: scale(1.14) translate(-3%, 2%); } }
.k-video .tn { inset: 0; background: linear-gradient(180deg, rgba(20,16,60,.42) 0%, rgba(91,80,255,.08) 38%, rgba(120,90,255,.3) 66%, rgba(255,111,177,.7) 100%); }
/* barres de progression façon « stories » */
.k-video .pg { left: 10px; right: 10px; top: 9px; display: flex; gap: 3px; }
.k-video .pg i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.k-video .pg i::after { content: ''; display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); animation: vidPg 6s linear infinite; animation-delay: calc(var(--k) * -2s); }
.k-video .pg i:nth-child(1)::after { animation-name: vidPg1; } .k-video .pg i:nth-child(2)::after { animation-name: vidPg2; } .k-video .pg i:nth-child(3)::after { animation-name: vidPg3; }
@keyframes vidPg1 { 0% { transform: scaleX(0); } 33%, 100% { transform: scaleX(1); } }
@keyframes vidPg2 { 0%, 33% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); } }
@keyframes vidPg3 { 0%, 66% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
/* logo Aria Studio en haut */
.k-video .br { left: 10px; top: 20px; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.k-video .br svg { width: 16px; height: 10.5px; }
.k-video .br em { font-style: normal; font-weight: 500; opacity: .75; font-size: 9px; }
/* icône de l'app qui rebondit, texte qui s'écrit ligne par ligne */
.k-video .ic { left: 50%; top: 56px; width: 52px; height: 52px; margin-left: -26px; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 10px 24px rgba(40,20,120,.45); animation: vidIco 6s cubic-bezier(.3,1.6,.5,1) infinite; }
.k-video .ic svg { position: absolute; left: 10px; top: 16px; width: 32px; height: 21px; }
@keyframes vidIco { 0%, 4% { transform: scale(0) rotate(-20deg); } 14%, 88% { transform: scale(1) rotate(0); } 96%, 100% { transform: scale(0); } }
.k-video .ln1, .k-video .ln2, .k-video .ln3 { left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: -.03em; line-height: 1; text-shadow: 0 2px 12px rgba(40,20,120,.5); opacity: 0; }
.k-video .ln1 { top: 120px; font-size: 13px; font-weight: 600; animation: vidL1 6s ease-out infinite; }
.k-video .ln2 { top: 136px; font-size: 21px; animation: vidL2 6s cubic-bezier(.3,1.5,.5,1) infinite; }
.k-video .ln3 { top: 158px; font-size: 21px; animation: vidL3 6s cubic-bezier(.3,1.5,.5,1) infinite; background: linear-gradient(90deg, #fff, #ffd6ec); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes vidL1 { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes vidL2 { 0%, 24% { opacity: 0; transform: scale(.5); } 31%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes vidL3 { 0%, 32% { opacity: 0; transform: scale(.5); } 39%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
/* icônes façon Reels, à droite */
.k-video .rl { right: 8px; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 7.5px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.k-video .rl span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.k-video .rl b { font-size: 13px; line-height: 1; }
.k-video .rl span:first-child b { color: #ff5d8f; animation: vidLike 6s infinite; }
@keyframes vidLike { 0%, 48%, 60%, 100% { transform: scale(1); } 54% { transform: scale(1.45); } }
/* note et bouton */
.k-video .rt { left: 0; right: 0; top: 196px; text-align: center; font-size: 9.5px; font-weight: 600; opacity: 0; animation: vidRt 6s ease-out infinite; }
.k-video .rt b { color: #ffd76a; }
@keyframes vidRt { 0%, 44% { opacity: 0; } 50%, 88% { opacity: .95; } 96%, 100% { opacity: 0; } }
.k-video .cta { left: 20px; right: 20px; bottom: 22px; padding: 8px 0; border-radius: 99px; text-align: center; font-size: 11px; font-weight: 800; color: #2a1d6b; background: #fff; opacity: 0; box-shadow: 0 6px 18px rgba(40,20,120,.35); animation: vidCta 6s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes vidCta { 0%, 50% { opacity: 0; transform: translateY(14px); } 58%, 88% { opacity: 1; transform: none; } 72% { transform: scale(1.06); } 96%, 100% { opacity: 0; } }
.k-video .rec { left: 10px; bottom: 6px; display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.k-video .rec::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ff4d5e; animation: ell 1s infinite; }
/* à côté du plan : vues, rendu, timeline */
.k-video .v1 { left: 164px; top: 24px; } .k-video .v2 { left: 164px; top: 64px; color: #ffd0e2; }
.k-video .gn { left: 164px; top: 114px; font-size: 13px; font-weight: 600; }
.k-video .tl { left: 164px; top: 150px; width: 180px; height: 70px; }
.k-video .tl i { position: absolute; height: 13px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.k-video .tl .v { top: 0; background: linear-gradient(90deg, rgba(91,140,255,.9), rgba(164,107,255,.9)); }
.k-video .tl .t { top: 20px; background: rgba(255,181,71,.85); }
.k-video .tl .a { position: absolute; top: 40px; left: 0; right: 0; height: 18px; display: flex; align-items: center; gap: 2px; background: none; box-shadow: none; }
.k-video .tl .a b { flex: 1; height: var(--h); border-radius: 2px; background: rgba(53,208,186,.85); }
.k-video .tl .ph { position: absolute; top: -6px; bottom: 4px; left: 0; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.9); animation: vidHead 6s linear infinite; }
@keyframes vidHead { from { left: 0; } to { left: calc(100% - 2px); } }
/* ElevenLabs : les deux barres du logo vibrent comme un VU-mètre, onde de la voix */
.k-el { width: 300px; height: 132px; }
.k-el .lg { left: 0; top: 0; width: 38px; height: 38px; color: #fff; }
.k-el .lg path { transform-box: fill-box; transform-origin: 50% 100%; animation: elBar 1.1s ease-in-out infinite; }
.k-el .lg path:nth-child(2) { animation-duration: .9s; animation-delay: -.35s; }
@keyframes elBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.k-el .nm { left: 50px; top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.k-el .wv { left: 0; top: 56px; width: 300px; height: 44px; display: flex; align-items: center; gap: 3px; }
.k-el .wv i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(#fff, rgba(255,255,255,.45)); animation: elWave 1.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.07s); }
@keyframes elWave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.k-el .gv { left: 0; top: 112px; font-size: 13px; font-weight: 600; }
.k-el .tm { right: 0; top: 112px; font: 12px ui-monospace, Menlo, monospace; opacity: .6; }
/* sécurité : trois anneaux façon Apple Watch se referment l'un après l'autre
(SSL / TLS, DDoS shield, GDPR) ; au centre, le cadenas se ferme d'un coup
quand tout est validé ; légende à côté, « Scanning… » puis « All systems
secure », sans fond */
.k-sec { width: 300px; height: 176px; }
.k-sec .rg { left: 0; top: 0; width: 150px; height: 150px; transform: rotate(-90deg); overflow: visible; }
.k-sec .rg circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.k-sec .rg .tk { stroke: rgba(255,255,255,.08); }
.k-sec .rg .pr { stroke-dasharray: 100; stroke-dashoffset: 100; animation: secRing 7s cubic-bezier(.5,0,.2,1) infinite; animation-delay: calc(var(--k) * .45s); }
.k-sec .rg .r0 { stroke: url(#secG0); filter: drop-shadow(0 0 6px rgba(91,140,255,.8)); }
.k-sec .rg .r1 { stroke: url(#secG1); filter: drop-shadow(0 0 6px rgba(164,107,255,.8)); }
.k-sec .rg .r2 { stroke: url(#secG2); filter: drop-shadow(0 0 6px rgba(53,208,186,.8)); }
@keyframes secRing { 0%, 4% { stroke-dashoffset: 100; } 32%, 88% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 100; } }
.k-sec .lk { left: 53px; top: 50px; width: 44px; height: 50px; overflow: visible; }
/* le cadenas ne bouge pas : il passe seulement de gris à blanc, avec un léger
halo, quand les trois anneaux sont refermés */
.k-sec .lk { animation: secLock 7s ease-in-out infinite; }
@keyframes secLock { 0%, 40% { opacity: .55; filter: none; } 48%, 90% { opacity: 1; filter: drop-shadow(0 0 10px rgba(160,180,255,.8)); } 100% { opacity: .55; filter: none; } }
.k-sec .lg { left: 168px; top: 14px; display: flex; flex-direction: column; gap: 13px; }
.k-sec .lg span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: .35;
animation: secRow 7s infinite; animation-delay: calc(var(--k) * .45s); }
.k-sec .lg span i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.k-sec .lg span small { font-size: 10.5px; font-weight: 500; opacity: .65; }
@keyframes secRow { 0%, 26% { opacity: .35; } 32%, 88% { opacity: 1; } 97%, 100% { opacity: .35; } }
.k-sec .cf { left: 168px; top: 120px; width: 40px; height: 18px; opacity: .9; }
.k-sec .st { left: 0; top: 160px; width: 300px; height: 18px; }
.k-sec .st span { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.k-sec .st .a { animation: secA 7s infinite, shim 1.8s linear infinite; }
.k-sec .st .b { opacity: 0; color: #7ff0c4; animation: secB 7s infinite; }
@keyframes secA { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes secB { 0%, 46% { opacity: 0; transform: translateY(4px); } 50%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
/* notifications façon iPhone (vue « pile » de l'écran verrouillé) : chaque
nouvelle notification monte depuis le bas et passe devant ; les plus
anciennes reculent derrière elle, en dessous, plus petites et plus pâles,
puis disparaissent. Cinq notifications tournent en boucle (une nouvelle toutes les 3,5 s). */
.k-ntf { width: 330px; height: 128px; }
.k-ntf .n { left: 0; top: 0; width: 330px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 22px;
background: rgba(40,42,54,.9); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.45);
transform-origin: 50% 0; opacity: 0; animation: ntfStack 17.5s cubic-bezier(.2,.7,.2,1) infinite; animation-delay: calc(var(--k) * 3.5s - 17.5s); }
/* rythme d'iPhone : environ une seconde pour monter, plusieurs secondes affichée */
@keyframes ntfStack {
0% { transform: translateY(96px) scale(.97); opacity: 0; z-index: 4; }
6.3%, 20% { transform: none; opacity: 1; z-index: 4; }
25%, 40% { transform: translateY(15px) scale(.94); opacity: .62; z-index: 3; }
45%, 60% { transform: translateY(28px) scale(.88); opacity: .38; z-index: 2; }
65%, 100% { transform: translateY(36px) scale(.82); opacity: 0; z-index: 1; }
}
.k-ntf .ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.k-ntf .ic svg { width: 22px; height: 22px; }
.k-ntf .ga { background: #fff; }
.k-ntf .sp { background: linear-gradient(135deg, #5b8cff, #a46bff); }
.k-ntf .pay { background: linear-gradient(135deg, #35d0ba, #2a9df4); font-size: 17px; font-weight: 800; }
.k-ntf .av { border-radius: 50%; background: linear-gradient(135deg, #ffb547, #ff6fb1); font-size: 13px; font-weight: 700; }
.k-ntf .pr { background: linear-gradient(135deg, #a46bff, #ff6fb1); }
.k-ntf .pr svg { width: 20px; height: 20px; }
/* avis Google : titre et étoiles jaunes */
.k-ntf .tx b u { text-decoration: none; }
.k-ntf .tx b u i { font-style: normal; color: #fbbc05; margin-left: 5px; letter-spacing: .5px; }
.k-ntf .tx { flex: 1; min-width: 0; }
.k-ntf .tx b { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.k-ntf .tx b em { font-style: normal; font-weight: 500; font-size: 11.5px; opacity: .6; }
.k-ntf .tx span { display: block; margin-top: 2px; font-size: 12.5px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* icône d'application seule, en verre liquide façon Apple : un fin cadre de
verre (flou), un liseré de lumière qui s'allume sur deux coins opposés,
un léger reflet en haut à gauche, une ombre douce ; flotte doucement */
.k-app { width: 90px; height: 90px; }
.k-app .ap { top: 0; left: 0; padding: 4px; border-radius: 24px; animation: apFloat 5s ease-in-out infinite;
background: rgba(255,255,255,.06);
-webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
box-shadow: 0 18px 34px -12px rgba(0,0,0,.65), 0 0 0 .5px rgba(255,255,255,.1); }
.k-app .ic { position: relative; display: block; width: 82px; height: 82px; border-radius: 20px; overflow: hidden; }
.k-app .ic img { display: block; width: 100%; height: 100%; }
/* liseré de lumière (cadre et icône) : clair aux coins haut-gauche et bas-droite, effacé ailleurs */
.k-app .ap::before, .k-app .ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.k-app .ap::before { padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,.06) 72%, rgba(255,255,255,.35)); }
.k-app .ic::before { padding: 1.25px; background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 74%, rgba(255,255,255,.45)); }
/* reflet : une lueur douce en haut à gauche, comme une lumière posée sur le verre */
.k-app .ic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(85% 55% at 22% 0%, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,0) 75%);
box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18), inset 0 -10px 18px -12px rgba(0,0,0,.35); }
@keyframes apFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* les petits points de Google qui chargent, et un mot animé, sans fond */
.k-gd { width: 200px; height: 34px; }
.k-gd .dots { left: 0; top: 10px; display: flex; gap: 8px; }
.k-gd .dots i { width: 13px; height: 13px; border-radius: 50%; animation: gdot 1.2s ease-in-out infinite; }
.k-gd .dots i:nth-child(1) { background: #4285f4; } .k-gd .dots i:nth-child(2) { background: #ea4335; animation-delay: .12s; }
.k-gd .dots i:nth-child(3) { background: #fbbc05; animation-delay: .24s; } .k-gd .dots i:nth-child(4) { background: #34a853; animation-delay: .36s; }
@keyframes gdot { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } }
.k-gd .wd span { position: absolute; left: 88px; top: 6px; font-size: 18px; font-weight: 600; white-space: nowrap; opacity: 0;
animation: gdWord 6s infinite, shim 1.8s linear infinite; animation-delay: calc(var(--k) * 2s), 0s; }
@keyframes gdWord { 0% { opacity: 0; transform: translateY(6px); } 6%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-6px); } }
/* Anthropic : logo, des mots qui s'enchaînent, ligne de progression, sans fond */
.k-ai { width: 260px; height: 104px; }
.k-ai .lg { left: 0; top: 0; width: 30px; height: 30px; color: #fff; }
.k-ai .nm { left: 42px; top: 7px; font-size: 14px; font-weight: 600; letter-spacing: .24em; }
.k-ai .wd span { position: absolute; left: 0; top: 46px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; opacity: 0;
animation: aiWord 10s infinite, shim 1.8s linear infinite; animation-delay: calc(var(--k) * 2s), 0s; }
@keyframes aiWord { 0% { opacity: 0; transform: translateY(8px); } 4%, 17% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; transform: translateY(-8px); } }
.k-ai .ln { left: 0; top: 96px; width: 220px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.k-ai .ln i { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff, transparent); animation: aiLine 2s ease-in-out infinite; }
@keyframes aiLine { from { transform: translateX(-100%); } to { transform: translateX(250%); } }