/* msp : gabarit « p- » des pages filles du silo Services informatiques, repris de services-manages-msp.html */
.p-tete{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:36px}
.p-tete h2{margin:0}
.p-tete p{margin:0;color:var(--gris)}
/* Hero en écran partagé : texte sur blanc, contrat sur bandeau nuit jusqu'au bord droit */
.p-hero{position:relative;overflow:hidden;isolation:isolate;min-height:100svh;box-sizing:border-box;display:grid;align-items:center;padding:calc(var(--entete) + clamp(16px,3svh,36px)) 0 clamp(20px,3.4svh,40px);background:#fff}
.p-hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;width:calc(50vw - 40px);background:radial-gradient(80% 60% at 60% 40%,rgba(0,144,192,.35),transparent 70%),linear-gradient(170deg,var(--marine-2),var(--nuit));border-bottom-left-radius:48px}
.p-hero::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;width:calc(50vw - 40px);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:20px 20px;border-bottom-left-radius:48px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.p-hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,96px);align-items:center}
.p-retour{display:flex;width:fit-content;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px 6px 8px;border-radius:8px;font:600 .86rem/1.2 var(--titre);color:var(--bleu);background:var(--glace);border:1px solid var(--filet);text-decoration:none;transition:background .2s}
.p-retour svg{width:16px;height:16px;transition:transform .25s}
.p-retour:hover{background:#fff}
.p-retour:hover svg{transform:translateX(-3px)}
.p-hero h1{font-size:clamp(1.85rem,2.5vw,2.45rem);font-weight:800;line-height:1.1;color:var(--encre);margin:0 0 14px}
.p-hero-texte > p{color:var(--gris);font-size:1.02rem;line-height:1.6;margin:0 0 20px}
.p-boutons{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.p-garanties{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.p-garanties li{display:flex;align-items:center;gap:10px;font:600 .92rem/1.3 var(--titre);color:var(--encre)}
.p-hero-visuel{display:grid;justify-items:center}
.p-tableau-contrat{width:min(100%,460px);display:grid;justify-items:center;gap:14px;color:#fff}
.p-contrat-titre{font:700 .8rem/1.2 var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-clair)}
.p-anneaux{width:min(100%,300px);height:auto;transform:rotate(-90deg);overflow:visible}
.p-piste{fill:none;stroke:rgba(255,255,255,.08);stroke-width:18}
.p-arc{fill:none;stroke-width:18;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:p-remplit 1.6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.3s + var(--i) * .35s);filter:drop-shadow(0 0 6px rgba(79,195,234,.45))}
@keyframes p-remplit{to{stroke-dashoffset:0}}
.p-anneaux-sigle{transform:rotate(90deg);transform-origin:130px 130px;font:800 34px Archivo,sans-serif;fill:#fff;letter-spacing:.04em}
.p-anneaux-sous{transform:rotate(90deg);transform-origin:130px 130px;font:700 9px Archivo,sans-serif;fill:#9fb6cb;letter-spacing:.2em}
.p-legende{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%}
.p-legende li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.p-pastille{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 25%,transparent)}
.p-legende b{font:700 .92rem/1.3 var(--titre)}
.p-legende small{font-size:.8rem;color:#9fb6cb}
/* Définition : monogramme MSP */
.p-definition{background:var(--glace);padding-block:clamp(64px,8vw,104px)!important}
.p-def-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,80px);align-items:center}
.p-monogramme{position:sticky;top:calc(var(--entete) + 40px);display:grid;gap:12px}
.p-lettres{display:flex;gap:6px}
.p-lettres b{font:900 clamp(5rem,10vw,8.5rem)/.85 var(--titre);color:transparent;-webkit-text-stroke:2px var(--bleu);transition:color .5s}
.p-lettres b:nth-child(2){-webkit-text-stroke-color:var(--cyan)}
.p-monogramme.vu .p-lettres b{animation:p-plein 2.4s ease-in-out forwards;animation-delay:calc(var(--n,0) * .3s)}
.p-lettres b:nth-child(1){--n:0}.p-lettres b:nth-child(2){--n:1}.p-lettres b:nth-child(3){--n:2}
@keyframes p-plein{0%{color:transparent}60%,100%{color:var(--marine)}}
.p-lettres b:nth-child(2){animation-name:p-plein-c!important}
@keyframes p-plein-c{0%{color:transparent}60%,100%{color:var(--cyan)}}
.p-developpe{font:700 1.15rem/1.3 var(--titre);color:var(--encre)}
.p-developpe i{font-style:normal}
.p-developpe i::first-letter{color:var(--cyan);font-weight:900}
.p-traduction{font-size:.95rem;color:var(--gris)}
.p-definition h2{margin-bottom:18px}
.p-definition p{color:var(--gris);line-height:1.7}
.p-bref{margin:22px 0 0;padding:22px 24px;border-radius:8px;background:#fff;border:1px solid var(--filet);box-shadow:0 30px 60px -44px rgba(10,34,64,.6)}
.p-bref > p:first-child{display:inline-block;margin-bottom:10px;padding:5px 10px;border-radius:8px;background:var(--marine);color:#fff;font:700 .78rem/1.2 var(--titre)}
.p-bref > p + p{margin:0;color:var(--encre)}
.p-bref strong{font-style:normal;font-weight:700;color:var(--bleu)}
/* Bascule sans contrat / avec services managés */
.p-bascule-sec{background:#fff;padding-block:clamp(64px,8vw,104px)!important}
.p-tete-droite{display:grid;gap:16px}
.p-interrupteur{display:inline-flex;align-items:center;gap:12px;width:fit-content;padding:8px 12px;border-radius:8px;border:1px solid var(--filet);background:var(--glace);cursor:pointer;font:700 .9rem/1.2 var(--titre)}
.p-interrupteur:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.p-int-txt{color:var(--gris);transition:color .25s}
.p-int-rail{position:relative;width:52px;height:28px;border-radius:14px;background:#d98a83;transition:background .3s}
.p-int-rail i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.p-interrupteur[aria-checked="true"] .p-int-rail{background:linear-gradient(90deg,var(--cyan),var(--bleu))}
.p-interrupteur[aria-checked="true"] .p-int-rail i{transform:translateX(24px)}
.p-interrupteur[aria-checked="true"] .p-int-avec,.p-interrupteur[aria-checked="false"] .p-int-sans{color:var(--encre)}
.p-duos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;perspective:1400px}
.p-duo{position:relative;display:grid;min-height:230px}
.p-duo.revele{transition-delay:calc(var(--i) * .06s)}
.p-face{grid-area:1 / 1;display:flex;flex-direction:column;padding:24px;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s cubic-bezier(.4,.2,.2,1);transition-delay:calc(var(--i) * .07s)}
.p-face--sans{background:#fbf6f5;border:1px solid #f1dedb;transform:rotateY(180deg)}
.p-face--avec{background:linear-gradient(160deg,#fff,var(--glace));border:1px solid rgba(0,144,192,.3);box-shadow:0 30px 60px -44px rgba(0,144,192,.8);transform:rotateY(0)}
.p-duos:not(.avec) .p-face--sans{transform:rotateY(0)}
.p-duos:not(.avec) .p-face--avec{transform:rotateY(-180deg)}
.p-duo-etat{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-bottom:14px;padding:4px 10px;border-radius:8px;font:700 .74rem/1.2 var(--titre)}
.p-duo-etat svg{width:13px;height:13px}
.p-face--sans .p-duo-etat{color:#a3362f;background:rgba(229,83,75,.1)}
.p-face--avec .p-duo-etat{color:var(--bleu);background:rgba(0,144,192,.1)}
.p-duo-pi{width:50px;height:50px;border-radius:8px;display:grid;place-items:center;margin-bottom:12px;background:#fff;border:1px solid var(--filet)}
.p-face--sans .p-duo-pi{color:#b9645d;filter:grayscale(.6)}
.p-face--avec .p-duo-pi{color:var(--bleu)}
.p-duo-pi svg{width:30px;height:30px}
.p-duo h3{letter-spacing:normal;margin-top:0;font:700 1.08rem/1.3 var(--titre);color:var(--encre);margin-bottom:6px}
.p-duo p{margin:0;font-size:.94rem;line-height:1.6;color:var(--gris)}
/* Pourquoi E-Concept */
.p-pourquoi{color:#fff;background:radial-gradient(70% 90% at 0% 0%,rgba(0,144,192,.28),transparent 60%),linear-gradient(160deg,var(--marine),var(--nuit));padding-block:clamp(64px,8vw,104px)!important}
.p-pourquoi-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,80px);align-items:start}
.p-pourquoi-cote{position:sticky;top:calc(var(--entete) + 32px)}
.p-pourquoi h2{color:#fff;margin-bottom:18px}
.p-pourquoi-cote > p{color:#c3d6e7;line-height:1.7}
.p-chiffres{margin:24px 0 0;display:grid;gap:10px}
.p-chiffres > .p-chiffre{display:flex;align-items:baseline;gap:14px;padding:14px 18px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.p-chiffre > p:first-child{margin:0;flex:none;min-width:110px;font:800 1.6rem/1 var(--titre);color:var(--cyan-clair)}
.p-chiffre > p + p{margin:0;font-size:.9rem;color:#c3d6e7}
.p-raisons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.p-raisons li{position:relative;display:grid;grid-template-columns:auto auto 1fr;gap:18px;align-items:center;padding:20px 22px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:background .25s,border-color .25s,transform .25s}
.p-raisons li.revele{transition-delay:calc(var(--i) * .06s)}
.p-raisons li:hover{background:rgba(79,195,234,.08);border-color:rgba(79,195,234,.35);transform:translateX(4px)}
.p-raison-num{font:800 1.4rem/1 var(--titre);color:transparent;-webkit-text-stroke:1.5px rgba(79,195,234,.6)}
.p-raison-pi{width:52px;height:52px;border-radius:8px;display:grid;place-items:center;color:var(--cyan-clair);background:linear-gradient(150deg,rgba(79,195,234,.16),rgba(16,80,143,.25));border:1px solid rgba(79,195,234,.3)}
.p-raison-pi svg{width:30px;height:30px}
.p-raisons h3{letter-spacing:normal;margin-top:0;display:block;font:700 1.08rem/1.3 var(--titre);margin-bottom:4px}
.p-raisons p{margin:0;font-size:.93rem;line-height:1.6;color:#c3d6e7}
.p-raisons li:hover .pd .epingle{animation:monte .8s ease-in-out infinite}
.p-raisons li:hover .pd .noeud{animation:pulse-n .9s ease-in-out infinite}
.p-raisons li:hover .pd .sceau{animation:tampon 1s cubic-bezier(.3,1.6,.5,1) infinite}
.p-raisons li:hover .pd-formation .gland{transform-origin:50% 0;animation:balance 1.2s ease-in-out infinite}
.p-raisons li:hover .pd .liens{animation:trace-boucle 1.2s ease-in-out infinite}
/* Quand : signaux étiquetés */
.p-quand{background:var(--glace);padding-block:clamp(64px,8vw,104px)!important}
.p-signaux{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.p-signal{--t:var(--cyan);position:relative;padding:24px;border-radius:8px;background:#fff;border:1px solid var(--filet);box-shadow:0 24px 50px -40px rgba(10,34,64,.6);transition:transform .3s,border-color .3s,box-shadow .3s}
.p-signal.revele{transition-delay:calc(var(--i) * .07s)}
.p-signal:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--t) 50%,transparent);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--t) 70%,transparent)}
.p-signal--sat{--t:#f2b450}.p-signal--chg{--t:#7aa7ff}.p-signal--prev{--t:#35c4a6}.p-signal--urg{--t:#e5534b}.p-signal--cro{--t:#a98bff}.p-signal--sec{--t:#0090c0}
.p-signal > p:first-child{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 10px;border-radius:8px;font:700 .76rem/1.2 var(--titre);color:color-mix(in srgb,var(--t) 70%,#0a2240);background:color-mix(in srgb,var(--t) 14%,transparent)}
.p-signal > p:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t);box-shadow:0 0 0 0 color-mix(in srgb,var(--t) 60%,transparent);animation:p-signal 2.2s ease-out infinite}
@keyframes p-signal{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.p-signal h3{letter-spacing:normal;margin-top:0;display:block;font:700 1.1rem/1.3 var(--titre);color:var(--encre);margin-bottom:6px}
.p-signal > p:not(:first-child){margin:0;font-size:.94rem;line-height:1.6;color:var(--gris)}
/* Parcours en zigzag, fil rempli au défilement */
.p-parcours-sec{background:#fff;padding-block:clamp(64px,8vw,104px)!important}
.p-parcours{position:relative;list-style:none;margin:0 0 40px;padding:0;display:grid;gap:18px}
.p-fil{position:absolute;left:50%;top:10px;bottom:10px;width:4px;margin-left:-2px;border-radius:4px;background:var(--glace-2)}
.p-fil i{position:absolute;left:0;right:0;top:0;height:var(--p,0%);border-radius:4px;background:linear-gradient(180deg,var(--cyan),var(--bleu));transition:height .2s linear}
.p-jalon{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center}
.p-noeud{grid-column:2;justify-self:center;z-index:1;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 1rem/1 var(--titre);color:var(--bleu);background:#fff;border:3px solid var(--glace-2);transition:background .4s,color .4s,border-color .4s,box-shadow .4s}
.p-jalon.atteint .p-noeud{color:#fff;background:linear-gradient(140deg,var(--cyan),var(--bleu));border-color:#fff;box-shadow:0 0 0 6px rgba(0,144,192,.15)}
.p-jalon-carte{grid-row:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;padding:18px 20px;border-radius:8px;background:var(--glace);border:1px solid var(--filet);transition:transform .3s,border-color .3s,background .3s}
.p-jalon:nth-child(odd) .p-jalon-carte{grid-column:3}
.p-jalon:nth-child(even) .p-jalon-carte{grid-column:1}
.p-jalon.atteint .p-jalon-carte{background:#fff;border-color:rgba(0,144,192,.35);box-shadow:0 24px 50px -40px rgba(0,144,192,.7)}
.p-jalon-pi{grid-row:1 / span 2;width:48px;height:48px;border-radius:8px;display:grid;place-items:center;color:var(--bleu);background:#fff;border:1px solid var(--filet)}
.p-jalon-pi svg{width:30px;height:30px}
.p-jalon-carte h3{letter-spacing:normal;margin:0;font:700 1.05rem/1.3 var(--titre);color:var(--encre)}
.p-jalon-carte p{margin:4px 0 0;font-size:.92rem;line-height:1.55;color:var(--gris)}
.p-appel{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(24px,3vw,36px);border-radius:8px;color:#fff;background:radial-gradient(80% 120% at 100% 0%,rgba(0,144,192,.5),transparent 60%),linear-gradient(150deg,var(--marine-2),var(--nuit))}
.p-appel::after{content:"";position:absolute;z-index:-1;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(79,195,234,.25);box-shadow:0 0 0 34px rgba(79,195,234,.05)}
.p-appel > div:first-child{flex:1 1 420px}
.p-appel > div:first-child > p:first-child{color:#fff;display:block;font:700 1.4rem/1.25 var(--titre);margin-bottom:6px}
.p-appel p{margin:0;color:#c3d6e7}
.p-appel-actions{display:flex;flex-wrap:wrap;gap:12px}
.p-silo{background:linear-gradient(160deg,var(--marine),var(--nuit))}
.p-faq{background:var(--glace)}
@media (max-width:1100px){.p-duos,.p-signaux{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.p-hero{min-height:0}.p-hero::before,.p-hero::after{width:100%;top:auto;height:56%;border-bottom-left-radius:0}.p-hero-grille,.p-def-grille,.p-pourquoi-grille,.p-tete{grid-template-columns:1fr}.p-monogramme,.p-pourquoi-cote{position:static}
  .p-fil{left:23px}.p-jalon{grid-template-columns:46px 1fr;gap:14px}.p-noeud{grid-column:1}.p-jalon:nth-child(odd) .p-jalon-carte,.p-jalon:nth-child(even) .p-jalon-carte{grid-column:2}}
@media (max-width:760px){.p-duos,.p-signaux{grid-template-columns:1fr}.p-appel-actions .wp-block-button__link{width:100%;justify-content:center}.p-raisons li{grid-template-columns:auto 1fr}.p-raison-num{display:none}.p-interrupteur{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.p-arc{animation:none;stroke-dashoffset:0}.p-face{transition:none}.p-lettres b{animation:none!important;color:var(--marine)}.p-signal > p:first-child::before{animation:none}}
/* Silo à quatre services : une seule rangée de quatre cartes */
.p-silo .f-silo-grille{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-silo .f-silo-carte,.p-silo .f-silo-carte:nth-child(n+4),.p-silo .f-silo-carte:last-child{grid-column:auto}
@media (max-width:1100px){.p-silo .f-silo-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.p-silo .f-silo-grille{grid-template-columns:1fr}}

/* Monogramme en deux mots (infogérance) */
.p-monogramme--mot .p-lettres{flex-direction:column;gap:0}
.p-monogramme--mot .p-lettres b{font-size:clamp(3.2rem,6.4vw,5.6rem);line-height:.95;letter-spacing:-.01em}
/* Cinq signaux : le dernier occupe deux colonnes pour ne pas laisser de case vide */
.p-signal:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:760px){.p-signal:last-child:nth-child(3n+2){grid-column:auto}}

/* Ajouts WordPress */
.p-hero-texte h1{margin-top:0}
.p-boutons,.p-appel-actions{margin-top:0}
.p-boutons .wp-block-button__link::after,.p-appel-actions .wp-block-button__link::after{width:18px;height:18px}
.p-retour svg{flex:none}
.p-garanties li::before{content:"";flex:none;width:22px;height:22px;border-radius:6px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(140deg,var(--cyan),var(--bleu))}
.p-bref > p{margin-top:0}
.p-appel > div:first-child > p:first-child strong{font-weight:inherit}
.p-face > h3,.p-face > p{position:relative}
.p-duos > .p-duo:nth-child(1){--i:0}.p-duos > .p-duo:nth-child(2){--i:1}.p-duos > .p-duo:nth-child(3){--i:2}.p-duos > .p-duo:nth-child(4){--i:3}.p-duos > .p-duo:nth-child(5){--i:4}.p-duos > .p-duo:nth-child(6){--i:5}
.p-raisons > li:nth-child(1){--i:0}.p-raisons > li:nth-child(2){--i:1}.p-raisons > li:nth-child(3){--i:2}.p-raisons > li:nth-child(4){--i:3}.p-raisons > li:nth-child(5){--i:4}.p-raisons > li:nth-child(6){--i:5}
.p-raisons > li > div > h3{margin:0 0 4px}
.p-signaux > .p-signal:nth-child(3n+1){--i:0}.p-signaux > .p-signal:nth-child(3n+2){--i:1}.p-signaux > .p-signal:nth-child(3n){--i:2}
.p-parcours > li:nth-child(2){--i:0}.p-parcours > li:nth-child(3){--i:1}.p-parcours > li:nth-child(4){--i:2}.p-parcours > li:nth-child(5){--i:3}.p-parcours > li:nth-child(6){--i:4}.p-parcours > li:nth-child(7){--i:5}
/* Mobile (écart volontaire à la maquette) : « .page-fille section{padding-block:0} » annule le padding du hero, le titre passait
   sous l'en-tête fixe ; le bandeau sombre (56 % de la hauteur) recouvrait les boutons et les garanties. Il suit désormais le visuel. */
/* Même cause entre 981 et 1199 px : un titre long remontait sous l'en-tête (63 px à 1000 px) ; padding prévu par la maquette rétabli. */
@media (min-width:981px) and (max-width:1199px){
section.p-hero{padding:calc(var(--entete) + clamp(16px,3svh,36px)) 0 clamp(20px,3.4svh,40px)}
}
@media (max-width:980px){
section.p-hero{padding:calc(var(--entete) + 24px) 0 0}
.p-hero::before,.p-hero::after{display:none}
.p-hero-visuel{position:relative;isolation:isolate;padding:0 0 36px}
.p-hero-visuel::before,.p-hero-visuel::after{content:"";position:absolute;z-index:-1;top:-28px;bottom:0;left:-50vw;right:-50vw}
.p-hero-visuel::before{background:radial-gradient(80% 60% at 60% 40%,rgba(0,144,192,.35),transparent 70%),linear-gradient(170deg,var(--marine-2),var(--nuit))}
.p-hero-visuel::after{background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px);background-size:20px 20px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
}