/* ============================================================================= VALKYRIA — la boutique. Elle n'a plus de charte à elle : couleurs, polices, barre, pied, boutons et modules viennent de valkyria.css. Ce fichier ne décrit QUE ce que la boutique est seule à posséder : le bandeau de tête, le panneau du pseudo, la bascule de facturation, les cartes de palier et de pack. La grammaire est celle du reste du site : un œil, un titre, un trait, puis des surfaces en dégradé sombre bordées de fer. ========================================================================== */ /* Chaque page pose sa couleur d'accent sur . Le violet est celui du palier Valkyrie, l'or celui des Runes. */ body{--or:#b9a3ee;--or-2:#7850d6;--or-reflet:#e6dcff} body.b-or{--or:#ffe9a8;--or-2:#f0d78a;--or-reflet:#fff6d5} /* ========================================================================= 1. BANDEAU DE TÊTE ========================================================================= */ /* Le même dispositif que le héros de l'accueil, en plus court : une image, un voile qui fond vers le noir de la page, et le titre aligné à gauche comme partout ailleurs. Un titre centré ici et aligné à gauche sur le blog, c'est ce qui faisait lire deux sites différents. */ .tete-boutique{ position:relative;isolation:isolate;overflow:hidden; display:flex;align-items:flex-end; min-height:clamp(220px,32vh,330px); padding-block:clamp(38px,6vw,64px) clamp(26px,4vw,40px); } .tete-boutique-fond{position:absolute;inset:0;z-index:-2} .tete-boutique-fond img{width:100%;height:100%;object-fit:cover;object-position:center 46%} .tete-boutique::before{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(90deg,rgba(6,8,11,.9) 0%,rgba(6,8,11,.55) 55%,rgba(6,8,11,.35) 100%), linear-gradient(180deg,rgba(6,8,11,.55) 0%,rgba(11,13,18,.8) 70%,var(--nuit) 100%); } .tete-boutique h1{margin-top:12px} /* Archivo n'a pas d'italique : sans cette ligne, le navigateur penche la lettre lui-meme et le mot mis en valeur devient sale. Il se distingue par la couleur, pas par l'inclinaison. */ .tete-boutique h1 em{ font-style:normal; background:linear-gradient(100deg,var(--aurore-300) 0%,var(--glace-300) 45%,var(--or) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .tete-boutique .chapeau{margin-top:14px;max-width:58ch;text-shadow:0 1px 14px rgba(0,0,0,.6)} /* ========================================================================= 2. PANNEAU DU PSEUDO ========================================================================= */ /* Il remplace la console flottante : même surface que les modules du site, posé dans le flux, aligné sur le contenu. */ .panneau-pseudo{ margin-top:calc(var(--pas) * -.42); position:relative;z-index:2; background:linear-gradient(180deg,rgba(25,29,38,.94),rgba(18,21,28,.97)); border:1px solid rgba(38,44,57,.95); border-radius:var(--rayon); padding:18px; box-shadow:0 28px 60px -34px rgba(0,0,0,.95); transition:border-color .2s,box-shadow .2s; } .panneau-pseudo:focus-within{ border-color:color-mix(in srgb,var(--glace-500) 55%,var(--fer)); box-shadow:0 28px 60px -34px rgba(0,0,0,.95),0 0 26px -8px rgba(127,193,234,.3); } .panneau-pseudo.tremble{animation:tremble .4s} @keyframes tremble{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}40%{transform:translateX(6px)} 60%{transform:translateX(-4px)}80%{transform:translateX(3px)} } .pseudo-ligne{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tete{ flex:none;width:46px;height:46px;border-radius:10px;overflow:hidden; background:var(--abysse);border:1px solid var(--fer); display:grid;place-items:center; } .tete canvas{width:100%;height:100%;image-rendering:pixelated;display:block} .pseudo-champ{flex:1;min-width:190px;display:flex;flex-direction:column;gap:5px} .pseudo-champ label{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--brume); } .pseudo-champ input{ width:100%;background:transparent;border:none;outline:none; font-family:var(--f-mono);font-size:17px;color:var(--blanc);padding:0; } .pseudo-champ input::placeholder{color:var(--brume)} .statut{ display:flex;align-items:center;gap:8px; margin-top:14px;padding-top:13px;min-height:20px; border-top:1px solid rgba(38,44,57,.6); font-family:var(--f-mono);font-size:12px;color:var(--brume); } .statut svg{flex:none} .statut.ok{color:var(--aurore-400)} .statut.err{color:var(--ambre-400)} .statut.attente{color:var(--glace-400)} .statut .pts::after{content:"…";display:inline-block;animation:pts 1.2s steps(4) infinite} @keyframes pts{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"…"}} /* ========================================================================= 3. EN-TÊTE DE SECTION AVEC COMMANDE À DROITE ========================================================================= */ .entete-rang{ display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,32px); } .entete-rang .entete-section{margin-bottom:0} /* --- bascule mensuel / trimestriel --- */ .seg{ position:relative;display:grid;grid-template-columns:1fr 1fr; background:rgba(6,8,11,.7);border:1px solid var(--fer);border-radius:999px; padding:4px;isolation:isolate;flex:none; } .seg .pouce{ position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px); background:var(--acier);border:1px solid var(--fer-clair); border-radius:999px;z-index:-1; transition:transform .28s cubic-bezier(.3,.8,.3,1); box-shadow:0 2px 10px rgba(0,0,0,.5); } .seg[data-periode="tri"] .pouce{transform:translateX(100%)} .seg button{ display:flex;align-items:center;justify-content:center;gap:8px; font-size:13.5px;font-weight:600;color:var(--brume); padding:9px 20px;border-radius:999px;white-space:nowrap;transition:color .2s; } .seg button[aria-pressed="true"]{color:var(--blanc)} .seg .promo{ font-family:var(--f-mono);font-size:10.5px;font-weight:400; color:#052033;background:linear-gradient(180deg,var(--aurore-300),var(--aurore-500)); padding:2px 7px;border-radius:999px; } /* ========================================================================= 4. GRILLE ET CARTES ========================================================================= */ .grille{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px; align-items:stretch; } @media (max-width:1279px){.grille{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:899px){.grille{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:559px){.grille{grid-template-columns:minmax(0,1fr)}} .carte{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb,var(--c) 8%,rgba(25,29,38,.85)), rgba(18,21,28,.94) 42%); border:1px solid color-mix(in srgb,var(--c) 20%,rgba(38,44,57,.95)); border-radius:var(--rayon); transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s; } .carte:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 42%,var(--fer)); box-shadow:0 28px 50px -26px color-mix(in srgb,var(--c) 32%,transparent); } /* Le liseré de couleur en haut de carte : c'est lui qui dit le palier avant même qu'on ait lu le nom. */ .lueur{ position:absolute;inset-inline:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent 0%,var(--c) 18%,var(--c) 82%,transparent 100%); box-shadow:0 0 14px 1px color-mix(in srgb,var(--c) 55%,transparent); pointer-events:none; } /* --- zone d'illustration --- */ .art{ position:relative;margin:10px 10px 0;border-radius:var(--rayon-s);overflow:hidden; aspect-ratio:4/3; background:radial-gradient(130% 95% at 50% 108%, color-mix(in srgb,var(--c) 20%,var(--abysse)),var(--abysse) 74%); border:1px solid color-mix(in srgb,var(--c) 14%,var(--fer)); } .art .halo{ position:absolute;left:50%;top:58%;width:72%;aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 20%,transparent),transparent 74%); filter:blur(12px); } /* L'emblème est un carré : on le cale sur la HAUTEUR du cadre, sinon il déborde d'un cadre en 4/3. Les dessins vectoriels, eux, gardent leur largeur. */ .art .embleme{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); height:98%;width:auto;max-width:94%;object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.55)); } .art svg.embleme{height:auto;width:58%;color:var(--c); filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--c) 45%,transparent))} .art .sol{ position:absolute;left:50%;bottom:9%;width:52%;height:7%; transform:translateX(-50%);border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent 75%); } .art .mention{ position:absolute;left:50%;bottom:7%;transform:translateX(-50%); font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em; color:color-mix(in srgb,var(--c) 70%,var(--blanc));white-space:nowrap; } .etincelle{position:absolute;color:var(--c);opacity:.85} .flotte1{animation:flotter 4.2s ease-in-out infinite alternate} .flotte2{animation:flotter 5.1s .8s ease-in-out infinite alternate} .flotte3{animation:flotter 3.6s 1.4s ease-in-out infinite alternate} @keyframes flotter{from{transform:translateY(0)}to{transform:translateY(-9px)}} .respire .embleme{animation:respirer 4.5s ease-in-out infinite alternate} @keyframes respirer{ from{transform:translate(-50%,-50%) scale(1)} to{transform:translate(-50%,-50%) scale(1.035)} } .braise{ position:absolute;bottom:12%;width:4px;height:4px;border-radius:50%; background:var(--c);filter:blur(.5px);opacity:0; animation:monter 4s linear infinite; } @keyframes monter{ 0%{opacity:0;transform:translateY(0) scale(1)} 12%{opacity:.9} 100%{opacity:0;transform:translateY(-96px) scale(.4)} } /* --- corps de carte --- */ .corps{display:flex;flex-direction:column;flex:1;padding:18px 16px 16px} .nom{ font-family:var(--f-titre);font-variation-settings:"wdth" 112;font-weight:800; font-size:25px;line-height:1.05;color:var(--blanc);text-transform:uppercase; } .chatline{ margin-top:10px;align-self:flex-start;max-width:100%; display:flex;align-items:center;gap:7px; background:rgba(6,8,11,.75);border:1px solid rgba(38,44,57,.9);border-radius:8px; padding:5px 9px; font-family:var(--f-mono);font-size:12px;white-space:nowrap;overflow:hidden; } .chatline .tag{color:var(--c);font-weight:600; text-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent)} .chatline .joueur{overflow:hidden;text-overflow:ellipsis;color:var(--givre)} .tag-img{height:1.15em;width:auto;vertical-align:-.22em;image-rendering:pixelated} .prix{display:flex;align-items:baseline;gap:7px;margin-top:16px;flex-wrap:wrap} .prix .num{ font-family:var(--f-mono);font-weight:600;font-size:37px;line-height:1; color:var(--blanc);font-variant-numeric:tabular-nums;letter-spacing:-.02em; } .prix .num.flip{animation:flip .32s cubic-bezier(.2,.7,.2,1)} @keyframes flip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .prix .par{font-family:var(--f-mono);font-size:12px;color:var(--brume)} .econo{ margin-top:9px;align-self:flex-start; font-family:var(--f-mono);font-size:11px; border-radius:999px;padding:3px 9px; border:1px dashed var(--fer);color:var(--brume); } .tri .econo{ border:1px solid color-mix(in srgb,var(--c) 40%,transparent); background:color-mix(in srgb,var(--c) 12%,transparent); color:color-mix(in srgb,var(--c) 80%,var(--blanc)); } .econo.bonus{ border:1px solid color-mix(in srgb,var(--c) 40%,transparent); background:color-mix(in srgb,var(--c) 12%,transparent); color:color-mix(in srgb,var(--c) 80%,var(--blanc)); } .econo b{font-weight:600} .econo.bonus b{color:color-mix(in srgb,var(--c) 55%,var(--blanc))} .par .e-tri,.econo .e-tri{display:none} .tri .par .e-mois,.tri .econo .e-mois{display:none} .tri .par .e-tri,.tri .econo .e-tri{display:inline} /* --- prix des packs (paiement unique) --- */ .tarif{ margin-top:15px;padding-top:14px;border-top:1px solid rgba(38,44,57,.65); display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; } .tarif .somme{ font-family:var(--f-mono);font-weight:600;font-size:21px;color:var(--blanc); font-variant-numeric:tabular-nums; } .tarif .ttc{font-family:var(--f-mono);font-size:11px;color:var(--brume)} .runeic{width:15px;height:15px;flex:none;color:var(--c)} .cumul{ margin-top:15px;padding-top:13px;border-top:1px solid rgba(38,44,57,.65); font-size:12.5px;font-style:italic;color:var(--cendre); } .cumul .ref{font-style:normal;font-weight:600;color:var(--cref)} .avantages{list-style:none;margin-top:5px} .avantages li{ display:flex;align-items:flex-start;gap:10px; font-size:13.5px;line-height:1.42;color:var(--givre);padding-block:6.5px; } .avantages li+li{border-top:1px solid rgba(38,44,57,.45)} .avantages .ic{ flex:none;width:17px;height:17px;margin-top:1.5px; color:color-mix(in srgb,var(--c) 78%,var(--givre)); } .avantages b{font-weight:600;color:var(--blanc)} .avantages .code{ font-family:var(--f-mono);font-size:12px;color:var(--c); background:color-mix(in srgb,var(--c) 9%,transparent);border-radius:5px;padding:1px 5px; } .avantages .rune-n{font-family:var(--f-mono);font-weight:600;color:var(--blanc)} .usages{list-style:none;margin-top:12px} .usages li{ display:flex;align-items:flex-start;gap:9px; font-size:13px;line-height:1.45;color:var(--cendre);padding-block:5px; } .usages svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--c)} /* --- bouton d'achat --- */ .acheter{margin-top:auto;padding-top:16px} .acheter button{ width:100%;display:flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:14px;color:#07090d; background:linear-gradient(180deg,var(--c),var(--c2)); border-radius:11px;padding:12px; box-shadow:0 8px 22px -10px color-mix(in srgb,var(--c) 60%,transparent); transition:transform .16s,box-shadow .2s,filter .2s; } .acheter button:hover{transform:translateY(-2px); box-shadow:0 14px 28px -10px color-mix(in srgb,var(--c) 75%,transparent)} .acheter button:active{transform:translateY(0)} .acheter button .off-l,.acheter button .ko-l{display:none;align-items:center;gap:8px} .verrouille .acheter button,.manque .acheter button{ background:linear-gradient(180deg,var(--fer),var(--acier)); color:var(--brume);box-shadow:none;cursor:not-allowed; } .verrouille .acheter button:hover,.manque .acheter button:hover{transform:none;box-shadow:none} .verrouille .acheter button .on-l,.manque .acheter button .on-l{display:none} .verrouille .acheter button .off-l{display:flex} .manque:not(.verrouille) .acheter button .ko-l{display:flex} .carte.cache{display:none} /* ========================================================================= 5. LE PALIER LE PLUS HAUT ========================================================================= */ @property --ang{syntax:"";initial-value:0deg;inherits:false} .valk{ border-color:transparent; background:linear-gradient(180deg, color-mix(in srgb,var(--or) 10%,rgba(25,29,38,.85)), color-mix(in srgb,var(--or) 3%,rgba(18,21,28,.94)) 42%); box-shadow:0 0 44px -8px color-mix(in srgb,var(--or-2) 22%,transparent); animation:lueur-or 5s 1.4s ease-in-out infinite alternate; } @keyframes lueur-or{ from{box-shadow:0 0 44px -8px color-mix(in srgb,var(--or-2) 20%,transparent)} to{box-shadow:0 0 60px -6px color-mix(in srgb,var(--or-2) 34%,transparent)} } .valk::before{ content:"";position:absolute;inset:-1px;border-radius:calc(var(--rayon) + 1px); padding:1.5px; background:conic-gradient(from var(--ang), var(--or-2),var(--or-reflet),var(--or),color-mix(in srgb,var(--or-2) 70%,#000),var(--or-2)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:tourner 6.5s linear infinite;pointer-events:none;z-index:1; } @keyframes tourner{to{--ang:360deg}} .valk:hover{transform:translateY(-4px); box-shadow:0 0 70px -4px color-mix(in srgb,var(--or-2) 40%,transparent), 0 30px 50px -20px rgba(0,0,0,.6)} .valk .banniere{ position:absolute;top:-1px;left:50%;transform:translateX(-50%);z-index:3; font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:#0b0d12;font-weight:600;white-space:nowrap; background:linear-gradient(180deg,var(--or-reflet),var(--or-2)); border-radius:0 0 8px 8px;padding:4px 13px; box-shadow:0 4px 16px -4px color-mix(in srgb,var(--or-2) 60%,transparent); } .valk .art::after{ content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 42%, color-mix(in srgb,var(--or-reflet) 14%,transparent) 50%,transparent 58%); transform:translateX(-130%); animation:reflet 5.5s ease-in-out 2s infinite; } @keyframes reflet{0%{transform:translateX(-130%)}42%{transform:translateX(130%)}100%{transform:translateX(130%)}} .valk .nom{ background:linear-gradient(180deg,var(--or-reflet) 20%,var(--or-2)); -webkit-background-clip:text;background-clip:text;color:transparent; } .rayons{transform-box:view-box;transform-origin:32px 30px; animation:tourner-rayons 26s linear infinite} @keyframes tourner-rayons{to{transform:rotate(360deg)}} /* ========================================================================= 6. FILTRES ET SOLDE (cosmétiques) ========================================================================= */ .filtre{display:flex;gap:6px;flex-wrap:wrap;flex:none} .filtre button{ padding:8px 15px;border-radius:999px;white-space:nowrap; font-size:13px;color:var(--brume);border:1px solid transparent; transition:color .18s,background .18s,border-color .18s; } .filtre button:hover{color:var(--blanc);background:var(--acier)} .filtre button[aria-pressed="true"]{ color:var(--glace-200);background:rgba(90,169,220,.12); border-color:rgba(90,169,220,.34); } .filtre .fnb{font-family:var(--f-mono);font-size:11px;opacity:.75;margin-left:5px} .solde{ display:none;align-items:center;gap:9px;flex:none; font-family:var(--f-mono);font-size:13px;color:var(--glace-300); background:rgba(90,169,220,.09);border:1px solid rgba(90,169,220,.26); border-radius:999px;padding:7px 14px; } .solde.vu{display:flex} .solde b{color:var(--blanc);font-weight:600} .recharge{ display:inline-flex;align-items:center;gap:7px;margin-top:10px; font-family:var(--f-mono);font-size:11.5px;color:var(--ambre-300); } .recharge a{text-decoration:underline;text-underline-offset:3px} .recharge a:hover{color:var(--ambre-400)} /* ========================================================================= 7. BLOCS DE TEXTE ANNEXES ========================================================================= */ .regle{ display:flex;align-items:flex-start;gap:10px; font-size:13.5px;color:var(--cendre);max-width:74ch; } .regle svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--glace-500)} .regle b{color:var(--blanc);font-weight:600} /* Le bloc « déjà inclus dans les grades » : deux colonnes, texte et tableau. */ .croix{ display:grid;gap:clamp(24px,4vw,44px);align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:clamp(26px,4vw,44px); border-radius:20px; border:1px solid rgba(90,169,220,.2); background: radial-gradient(90% 130% at 15% 0%,rgba(90,169,220,.12),transparent 62%), linear-gradient(180deg,rgba(25,29,38,.9),rgba(6,8,11,.94)); } @media (max-width:860px){.croix{grid-template-columns:1fr}} .croix h2{font-size:clamp(24px,3.2vw,34px)} .croix h2 em{ font-style:normal; background:linear-gradient(100deg,var(--aurore-300) 0%,var(--glace-300) 45%,var(--or) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .croix .texte{margin-top:14px;color:var(--cendre);max-width:52ch} .croix .texte b{color:var(--blanc);font-weight:600} .dotations{ background:rgba(6,8,11,.66);border:1px solid rgba(38,44,57,.9); border-radius:var(--rayon);padding:18px 20px; } .dotations .entete{ font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--brume);margin-bottom:12px; } .dot-ligne{ display:flex;align-items:center;gap:12px;padding-block:9px; font-family:var(--f-mono);font-size:13px; } .dot-ligne+.dot-ligne{border-top:1px solid rgba(38,44,57,.55)} .dot-ligne .n{margin-left:auto;color:var(--blanc);font-weight:600; font-variant-numeric:tabular-nums} .dot-ligne .u{color:var(--brume);font-size:11px} /* ========================================================================= 8. GARANTIES, AVANT LE PIED ========================================================================= */ .garanties-boutique{margin-top:clamp(40px,6vw,64px)} .garanties{ display:flex;justify-content:center;align-items:center;gap:12px 28px;flex-wrap:wrap; padding-block:24px;border-top:1px solid rgba(38,44,57,.6); font-family:var(--f-mono);font-size:12px;color:var(--cendre); } .garanties span{display:flex;align-items:center;gap:8px} .garanties svg{color:var(--aurore-400)} /* ========================================================================= 9. PAGES GÉRER ET MERCI ========================================================================= */ .champ{margin-bottom:14px} .champ label{ display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--brume);margin-bottom:7px; } .champ input{ width:100%;background:var(--abysse);border:1px solid var(--fer); border-radius:9px;color:var(--givre);font-size:15px;padding:12px 14px; font-family:inherit; } .champ input:focus{outline:2px solid var(--glace-400);outline-offset:1px;border-color:transparent} .champ input.code{ font-family:var(--f-mono);letter-spacing:.32em;text-transform:uppercase; font-size:19px;text-align:center; } .go{ width:100%;border-radius:10px; background:linear-gradient(180deg,var(--glace-300),var(--glace-500)); color:#052033;font-weight:700;font-size:15px;padding:13px; transition:filter .15s,transform .15s; } .go:hover{filter:brightness(1.06);transform:translateY(-1px)} .go:disabled{opacity:.45;cursor:not-allowed;transform:none} .msg{margin-top:14px;font-size:14px;line-height:1.6;min-height:1.2em} .msg.err{color:var(--ambre-400)} .msg.ok{color:var(--aurore-400)} .sceau{ width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:rgba(123,211,162,.12);border:1px solid rgba(123,211,162,.34); color:var(--aurore-400);margin-bottom:22px; } .recu{ margin-top:20px;background:rgba(6,8,11,.6);border:1px solid rgba(38,44,57,.9); border-radius:var(--rayon);padding:18px 20px; font-family:var(--f-mono);font-size:13px;color:var(--cendre); } .recu b{color:var(--blanc)} .attente{display:flex;align-items:center;gap:9px;margin-top:14px; font-family:var(--f-mono);font-size:12px;color:var(--brume)} .suite{margin-top:22px;color:var(--cendre)} .apres-achat{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} /* ========================================================================= 10. MOUVEMENT RÉDUIT ========================================================================= */ @media (prefers-reduced-motion:reduce){ .valk,.valk::before,.valk .art::after,.respire .embleme, .braise,.flotte1,.flotte2,.flotte3,.rayons{animation:none!important} }