/* ============================================================================ Couche commune de l'espace client : « cinéma nocturne », mouvement calme ---------------------------------------------------------------------------- Posée par private/client_ui.php (client_ui_assets()) et par la coque de la boutique (private/shop_layout.php), avec assets/js/akame-client.js. Elle ne REMPLACE rien : aucun sélecteur d'élément, aucun reset, aucune règle sur une classe de page (.btn, .card, .item, .pill…). Tout est préfixé « ak- » (ou « vf- » pour le viseur) : une page qui n'emploie pas ces classes est strictement inchangée. Ne se charge pas avec akame-ui.css (site vitrine) : quelques noms (.ak-btn, .ak-fld…) sont volontairement les mêmes. Mouvement : seules transform, opacity et clip-path s'animent. Distances de 12 px au plus, aucune rotation, aucun rebond, aucune inclinaison 3D, aucun flou animé, aucune boucle hors point REC et filet de veille (et eux seulement pendant une attente réelle). Sans JavaScript tout est visible (la règle d'attente .ak-anim .ak-rv:not(.ak-in) n'existe qu'une fois que le script a posé .ak-anim sur ). prefers-reduced-motion : tout s'efface, l'information reste. Survols : (hover:hover) and (pointer:fine). ── LES GESTES ET LEURS CLASSES ──────────────────────────────────────────── Poser (chargement) .ak-rise style="--i:3" = rang (plafonné à 6, 60 ms par rang) Poser (défilement) .ak-rv le script pose .ak-in à l'arrivée à l'écran Rideau (image) .ak-curtain pose un rideau de haut en bas (sur un cadre, pas sur ) Filet (progression) .ak-fil > i style="--v:.4" (0 à 1) ; .ak-fil-ok / .ak-fil-warn ; se tend à l'arrivée Filet de page .ak-pbar en tête de Viseur .vf .vf-c quatre coins qui se referment (parent en position:relative) .vf-lock / .vf-bad verrouillé en cyan / désigne une erreur REC .ak-rec-dot point REC ; .ak-rec-dot.is-ok = point vert fixe Veille .ak-veille filet d'attente sans durée connue .ak-wait ligne « point REC + texte » (statut en cours) [data-ak-busy] bouton en attente : voir le script (classe .ak-busy posée par lui) Roulé .ak-roll > .ak-roll-v fenêtre + valeur qui monte (script : AkameClient.roll) Désigner .ak-fld.is-err .ak-msg [data-ak-desig] erreur de champ, message qui monte, viseur Trace .ak-trace coche qui se dessine (sur un + texte). Jamais animées. Tuiles .ak-tiles > a.ak-tile > .ak-tile-ico + .ak-tile-t + .ak-tile-s (+ .ak-tile-n = nombre à traiter) Champs .ak-fld > label.ak-label + .ak-input (+ .ak-hint, + .ak-msg) ; .ak-chk (case) ; select.ak-input Messages .ak-al + -info | -ok | -err | -warn ; .ak-toast (script : AkameClient.toast) Divers .ak-eb (surtitre à filet) ; .ak-cap ; .ak-mut ; .ak-dim ; .ak-num ; .ak-sr (lecteurs d'écran) ── ZONES SANS MOUVEMENT ─────────────────────────────────────────────────── Le champ du code à 6 chiffres, les iframes Stripe/PayPal, le texte de la case d'accord, les prix, « À régler » / « En retard » : aucune classe de mouvement sur eux ni sur leurs parents. Marquer le conteneur avec data-ak-still ; la feuille et le script retirent alors d'eux-mêmes le Poser, le Survol et la Veille de cet élément et de ses ancêtres. ========================================================================== */ /* ───────── Jetons (mêmes valeurs que shop_layout.php et client_ui_css()) ───────── */ :root { --ak-bg: #06080a; --ak-bg2: #0a0e11; --ak-bg3: #10161a; --ak-ink: #f2f4f5; --ak-mute: rgba(242, 244, 245, .68); --ak-dim: rgba(242, 244, 245, .58); --ak-line: rgba(242, 244, 245, .12); --ak-line2: rgba(242, 244, 245, .22); --ak-acc: #18bfef; --ak-acc-hi: #83e8ff; --ak-acc-ink: #04141b; --ak-acc-soft: rgba(24, 191, 239, .12); --ak-ok: #5fe3b4; --ak-warn: #ffb85c; --ak-bad: #ff8174; --ak-rec: #ff4b3e; --ak-ease: cubic-bezier(.16, 1, .3, 1); --ak-ease-io: cubic-bezier(.65, 0, .35, 1); --ak-dist: 12px; } /* Les composants dimensionnent leurs bordures et marges internes dans leur largeur, quelle que soit la page */ .ak-btn, .ak-btn *, .ak-card, .ak-tiles, .ak-tile, .ak-fld, .ak-input, .ak-al, .ak-toast, .ak-pill, .ak-chk, .ak-fil, .ak-veille { box-sizing: border-box; } /* ───────── Mots-clés d'accessibilité et de texte ───────── */ .ak-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ak-eb { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ak-acc); } .ak-eb::before { content: ''; width: 32px; height: 1px; background: currentColor; transform-origin: left; animation: akc-line 1s var(--ak-ease) .1s backwards; } .ak-cap { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ak-dim); font-weight: 500; } .ak-mut { color: var(--ak-mute); } .ak-dim { color: var(--ak-dim); } .ak-num { font-variant-numeric: tabular-nums; } /* ───────── Keyframes (transform, opacity, clip-path seulement) ───────── */ @keyframes akc-rise { from { opacity: 0; transform: translate3d(0, var(--ak-dist), 0); } } @keyframes akc-fade { from { opacity: 0; } } @keyframes akc-line { from { transform: scaleX(0); } } @keyframes akc-ring { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.7); opacity: 0; } } @keyframes akc-vf { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } } @keyframes akc-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes akc-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes akc-in { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 14px), 0, 0); } to { opacity: 1; transform: none; } } @keyframes akc-out { to { opacity: 0; transform: translate3d(calc(var(--dir, 1) * -10px), 0, 0); } } @keyframes akc-roll { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } } @keyframes akc-veil-a { from { transform: translateX(-100%); } to { transform: translateX(220%); } } @keyframes akc-veil-b { 0% { clip-path: inset(0 100% 0 0); } 50% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } } @keyframes akc-pbar { 0% { transform: scaleX(0); opacity: 1; } 58% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } @keyframes akc-here { from { opacity: .6; } to { opacity: 0; } } @keyframes akc-here-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes akc-toast { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } /* ───────── Poser : un bloc se met en place ───────── */ .ak-rise { animation: akc-rise .7s var(--ak-ease) calc(min(var(--i, 0), 6) * 60ms) backwards; } /* Au défilement : visible sans JavaScript ; le script pose .ak-anim sur , puis .ak-in à l'arrivée à l'écran */ .ak-anim .ak-rv:not(.ak-in) { opacity: 0; } .ak-rv.ak-in { animation: akc-rise .8s var(--ak-ease) calc(min(var(--i, 0), 6) * 60ms) backwards; } /* Rideau : une image ou une vignette se révèle de haut en bas (le script observe le PARENT : un élément découpé n'est plus « visible ») */ .ak-anim .ak-curtain:not(.ak-in) { clip-path: inset(0 0 100% 0); } .ak-curtain.ak-in { animation: akc-curtain 1s var(--ak-ease) calc(min(var(--i, 0), 6) * 60ms) backwards; } /* ───────── Filet : progression et quantité (jamais animée en width) ───────── */ .ak-fil { position: relative; height: 3px; border-radius: 3px; background: rgba(242, 244, 245, .12); overflow: hidden; } .ak-fil > i { position: absolute; inset: 0; border-radius: inherit; background: var(--ak-acc); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform .9s var(--ak-ease); } .ak-fil-warn > i { background: var(--ak-warn); } .ak-fil-ok > i { background: var(--ak-ok); } /* À l'arrivée le filet part de 0 et se tend jusqu'à sa valeur (le script pose .ak-in) */ .ak-anim .ak-fil:not(.ak-in) > i { transform: scaleX(0); } /* Filet de veille : attente d'un résultat sans durée connue (remplace le disque qui tourne) */ .ak-veille { position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(242, 244, 245, .12); } .ak-veille::after { content: ''; position: absolute; inset: 0; width: 46%; background: linear-gradient(90deg, transparent, var(--ak-acc), transparent); animation: akc-veil-a 1.7s var(--ak-ease-io) infinite; } .ak-wait { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ak-mute); } /* Point REC : « il se passe quelque chose » (opacité et échelle seulement) */ .ak-rec-dot { position: relative; display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ak-rec); } .ak-rec-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--ak-rec); animation: akc-ring 2.4s var(--ak-ease) infinite; } .ak-rec-dot.is-ok { background: var(--ak-ok); } .ak-rec-dot.is-ok::after { animation: none; opacity: 0; } /* ───────── Filet de page : se tend quand on change de page ───────── */ .ak-pbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9000; background: var(--ak-acc); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; } /* (au chargement : il se tend, puis s'efface) */ .ak-pbar { animation: akc-pbar 1.5s var(--ak-ease) both; } /* Pendant un changement de page (le script pose .ak-go sur le filet) : il avance sans jamais bloquer le lien */ .ak-pbar.ak-go { animation: none; opacity: 1; transform: scaleX(.78); transition: transform 8s cubic-bezier(.1, .6, .2, 1); } /* ───────── Viseur : quatre coins tracés par dégradés ───────── */ .vf { position: absolute; pointer-events: none; --c: rgba(242, 244, 245, .55); --l: 20px; --t: 1.5px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l) no-repeat; } .vf-c { animation: akc-vf .8s var(--ak-ease) backwards; } .vf-lock { --c: var(--ak-acc); --t: 2px; animation: akc-vf .7s var(--ak-ease) backwards; } .vf-bad { --c: var(--ak-bad); --t: 2px; animation: akc-vf .7s var(--ak-ease) backwards; } /* ───────── Boutons ───────── */ .ak-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; isolation: isolate; transition: transform .5s var(--ak-ease), box-shadow .5s var(--ak-ease), background-color .3s, border-color .3s, opacity .3s; } .ak-btn svg { width: 18px; height: 18px; flex: none; } .ak-btn-p { background: var(--ak-acc); color: var(--ak-acc-ink); } .ak-btn-g { border-color: var(--ak-line2); background: rgba(242, 244, 245, .05); color: var(--ak-ink); } .ak-btn-s { min-height: 44px; padding: 0 20px; font-size: 14px; } .ak-btn-w { width: 100%; } .ak-btn:active { transform: scale(.99); } .ak-btn:disabled, .ak-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .ak-btn:focus-visible, .ak-lift:focus-visible, .ak-tile:focus-visible, .ak-card-lk:focus-visible { outline: 2px solid var(--ak-acc-hi); outline-offset: 3px; } /* Bouton en attente (état posé par le script sur un bouton [data-ak-busy]) : le libellé change, un filet court sous le libellé, l'envoi n'est jamais retardé ni bloqué */ .ak-busy { cursor: progress; pointer-events: none; } .ak-pos { position: relative; } .ak-bveil { position: absolute; left: 22px; right: 22px; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; pointer-events: none; animation: akc-veil-b 1.5s var(--ak-ease-io) infinite; } .ak-busy-bare .ak-bveil { left: 0; right: 0; bottom: -4px; } /* Libellé qui change (Roulé) : la nouvelle valeur monte de 60 % de sa hauteur, valeur exacte dès la première image */ .ak-roll { display: inline-flex; overflow: hidden; vertical-align: bottom; max-width: 100%; padding: .14em 0; margin: -.14em 0; } .ak-roll-v { display: inline-block; } .ak-rolled { animation: akc-roll .45s var(--ak-ease) backwards; } /* Liens : le filet se trace sous le lien */ .ak-lnk { color: var(--ak-acc-hi); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size .5s var(--ak-ease); overflow-wrap: anywhere; } /* ───────── Survol : seulement souris et pointeur précis, jamais collant au toucher ───────── */ @media (hover: hover) and (pointer: fine) { .ak-btn-p:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--ak-acc) 60%, transparent); } .ak-btn-g:hover { background: rgba(242, 244, 245, .12); border-color: rgba(242, 244, 245, .42); } .ak-btn:active { transform: scale(.99); } .ak-lnk:hover { background-size: 0 1px; background-position: 100% 100%; } .ak-lift, .ak-card-lk, .ak-tile { transition: transform .5s var(--ak-ease), border-color .4s, background-color .4s; } .ak-lift:hover, .ak-card-lk:hover, .ak-tile:hover { transform: translateY(-2px); border-color: rgba(24, 191, 239, .45); background-color: var(--ak-bg3); } } /* ───────── Pastilles d'état (jamais animées : « À régler » et « En retard » ne clignotent pas) ───────── */ .ak-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px; border: 1px solid var(--ak-line2); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ak-mute); white-space: nowrap; } .ak-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .ak-pill-todo { color: var(--ak-acc-hi); border-color: rgba(24, 191, 239, .45); background: var(--ak-acc-soft); } .ak-pill-ok { color: var(--ak-ok); border-color: rgba(95, 227, 180, .4); background: rgba(95, 227, 180, .08); } .ak-pill-warn { color: var(--ak-warn); border-color: rgba(255, 184, 92, .42); background: rgba(255, 184, 92, .08); } .ak-pill-bad { color: var(--ak-bad); border-color: rgba(255, 129, 116, .42); background: rgba(255, 129, 116, .08); } /* ───────── Cartes et tuiles ───────── */ .ak-card { position: relative; border: 1px solid var(--ak-line); border-radius: 18px; background: var(--ak-bg2); padding: clamp(18px, 2.2vw, 26px); } .ak-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ak-card-lk { display: block; color: inherit; text-decoration: none; } .ak-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; } .ak-tile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 19px; border: 1px solid var(--ak-line); border-radius: 18px; background: var(--ak-bg2); color: inherit; text-decoration: none; } .ak-tile-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: var(--ak-acc-soft); color: var(--ak-acc); } .ak-tile-ico svg { width: 20px; height: 20px; } .ak-tile-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; } .ak-tile-s { font-size: 13px; line-height: 1.4; color: var(--ak-mute); } .ak-tile-n { position: absolute; top: 14px; right: 14px; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--ak-acc); color: var(--ak-acc-ink); font-size: 12px; font-weight: 700; line-height: 1; } /* ───────── Champs et états de formulaire ───────── */ .ak-fld { display: flex; flex-direction: column; gap: 8px; } .ak-label { font-size: 13px; font-weight: 500; color: var(--ak-mute); } .ak-hint { font-size: 12.5px; line-height: 1.5; color: var(--ak-dim); } .ak-input { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--ak-line2); border-radius: 14px; background: rgba(242, 244, 245, .04); color: var(--ak-ink); font: inherit; font-size: 16px; color-scheme: dark; transition: border-color .3s, background-color .3s, box-shadow .3s; } textarea.ak-input { padding: 14px 16px; min-height: 104px; resize: vertical; } select.ak-input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f4f5' stroke-opacity='.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; } select.ak-input option { background: #0a0e11; color: var(--ak-ink); } .ak-input::placeholder { color: rgba(242, 244, 245, .42); } .ak-input:focus { outline: none; border-color: var(--ak-acc); background-color: rgba(24, 191, 239, .05); box-shadow: 0 0 0 3px rgba(24, 191, 239, .14); } .ak-input:disabled { opacity: .55; cursor: not-allowed; } /* Désigner : le champ prend la bordure d'erreur, son message monte de 6 px. Pas de secousse. La couleur n'est jamais le seul signal : le texte dit quoi faire. */ .ak-fld.is-err .ak-input { border-color: var(--ak-bad); background-color: rgba(255, 129, 116, .05); } .ak-fld.is-err .ak-input:focus { box-shadow: 0 0 0 3px rgba(255, 129, 116, .16); } .ak-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ak-bad); animation: akc-rise .5s var(--ak-ease) backwards; --ak-dist: 6px; } .ak-msg svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } /* Pour les champs de la page qui portent déjà leurs propres classes : [data-ak-desig] ou aria-invalid reçoivent le même état */ [aria-invalid="true"]:not(.ak-input) { border-color: var(--ak-bad); } .ak-desig-wrap { position: relative; } /* Case à cocher : la coche se trace (Trace) */ .ak-chk { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ak-mute); cursor: pointer; } .ak-chk input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--ak-line2); border-radius: 7px; background: rgba(242, 244, 245, .04); cursor: pointer; transition: background-color .25s, border-color .25s; } .ak-chk input::after { content: ''; width: 11px; height: 6px; border-left: 2px solid var(--ak-acc-ink); border-bottom: 2px solid var(--ak-acc-ink); transform: translateY(-1px) rotate(-45deg); clip-path: inset(0 100% 0 0); } .ak-chk input:checked { background: var(--ak-acc); border-color: var(--ak-acc); } .ak-chk input:checked::after { animation: akc-trace .35s var(--ak-ease) forwards; } .ak-chk input:focus-visible { outline: 2px solid var(--ak-acc-hi); outline-offset: 3px; } /* Trace : une coche qui se dessine de gauche à droite (sur un