.cmd-cats{--gap:14px;--rad:34px;--tile-rad:26px;--txt:#fff;--txt2:rgba(255,255,255,.72);--fill1:rgba(255,255,255,.20);--fill2:rgba(255,255,255,.05);--rim:rgba(255,255,255,.85);--rim2:rgba(255,255,255,.35);--edge:rgba(255,255,255,.22);--shadow:0 18px 40px -18px rgba(0,0,0,.55);--ico-bg:rgba(255,255,255,.12);--accent:#9fe0a8;--brand:#507E64;
position:relative;isolation:isolate;overflow:hidden;border-radius:var(--rad);padding:clamp(22px,4vw,46px);background:#0c1812;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);box-sizing:border-box;width:100%;margin:0}
.cmd-cats *,.cmd-cats *::before,.cmd-cats *::after{box-sizing:border-box}
.cmd-cats--clair{--txt:#212121;--txt2:rgba(33,33,33,.62);--fill1:rgba(255,255,255,.62);--fill2:rgba(255,255,255,.28);--rim:#fff;--rim2:rgba(255,255,255,.7);--edge:rgba(255,255,255,.6);--shadow:0 18px 40px -20px rgba(30,60,45,.35);--ico-bg:rgba(255,255,255,.55);--accent:#3B5E4A;background:#e9f0eb}

/* Fond : taches de couleur floues qui dérivent (c'est ce que le verre « réfracte ») */
.cmd-cats__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cmd-cats__bg span{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.9;animation:cmdCatsDrift 22s ease-in-out infinite alternate}
.cmd-cats__bg span:nth-child(1){background:#507E64;left:-8%;top:-30%}
.cmd-cats__bg span:nth-child(2){background:#8fd39a;left:30%;top:35%;width:34%;animation-duration:26s;animation-delay:-6s;opacity:.55}
.cmd-cats__bg span:nth-child(3){background:#2f7a8c;right:-10%;top:-25%;animation-duration:30s;animation-delay:-12s;opacity:.75}
.cmd-cats__bg span:nth-child(4){background:#d99a52;right:12%;bottom:-45%;width:30%;animation-duration:24s;animation-delay:-3s;opacity:.4}
.cmd-cats--clair .cmd-cats__bg span{opacity:.5}
.cmd-cats--clair .cmd-cats__bg span:nth-child(2){opacity:.45}
.cmd-cats--clair .cmd-cats__bg span:nth-child(4){opacity:.3}
@keyframes cmdCatsDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12%,10%) scale(1.15)}100%{transform:translate(-8%,18%) scale(.9)}}
.cmd-cats.is-off .cmd-cats__bg span{animation-play-state:paused}

/* En-tête */
.cmd-cats__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin:0 0 clamp(18px,2.6vw,28px)}
.cmd-cats__title{margin:0!important;padding:0;font:900 clamp(24px,3vw,36px)/1.05 Inter,system-ui,sans-serif!important;letter-spacing:-.02em;color:var(--txt)!important;text-transform:none}
.cmd-cats__sub{margin:0!important;font-size:15px;font-weight:500;color:var(--txt2)}

/* Grille */
.cmd-cats__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}

/* Tuile en verre */
.cmd-cats__tile{--mx:50%;--my:0%;position:relative;flex:1 1 calc((100% - 6 * var(--gap)) / 7);max-width:calc((100% - 6 * var(--gap)) / 7);min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 12px 44px;border-radius:var(--tile-rad);text-decoration:none!important;color:var(--txt)!important;
background:linear-gradient(150deg,var(--fill1),var(--fill2));
-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -8px 18px -10px rgba(255,255,255,.25),inset 0 0 0 1px var(--edge),var(--shadow);
transition:transform .55s cubic-bezier(.2,.9,.25,1.25),box-shadow .4s ease,background .4s ease;will-change:transform;-webkit-tap-highlight-color:transparent}
/* Liseré spéculaire (reflet sur les bords) */
.cmd-cats__tile::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
background:linear-gradient(155deg,var(--rim) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,var(--rim2) 100%);
-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,linear-gradient(#000 0 0);mask-composite:exclude}
/* Reflet qui suit la souris */
.cmd-cats__tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
background:radial-gradient(160px circle at var(--mx) var(--my),rgba(255,255,255,.38),rgba(255,255,255,0) 70%)}
.cmd-cats__tile:hover,.cmd-cats__tile:focus-visible{transform:translateY(-6px) scale(1.03);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -8px 18px -10px rgba(255,255,255,.35),inset 0 0 0 1px var(--edge),0 26px 50px -20px rgba(0,0,0,.6)}
.cmd-cats--clair .cmd-cats__tile:hover,.cmd-cats--clair .cmd-cats__tile:focus-visible{box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px var(--edge),0 26px 50px -22px rgba(30,60,45,.45)}
.cmd-cats__tile:hover::before,.cmd-cats__tile:focus-visible::before{opacity:1}
.cmd-cats__tile:active{transform:translateY(-2px) scale(.98);transition-duration:.15s}
.cmd-cats__tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Bulle d'icône */
.cmd-cats__ico{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 0 8px;border-radius:50%;background:var(--ico-bg);
box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -6px 12px -6px rgba(255,255,255,.25),inset 0 0 0 1px var(--edge);transition:background .4s ease,transform .55s cubic-bezier(.2,.9,.25,1.4)}
.cmd-cats__ico svg{width:44px;height:44px;display:block;overflow:visible;transition:transform .55s cubic-bezier(.2,.9,.25,1.4)}
.cmd-cats__ico .cmd-ico-accent{stroke:var(--accent)}
.cmd-cats__ico .cmd-ico-dots{stroke-dasharray:.5 4.5;stroke-width:2.4}
.cmd-cats__tile:hover .cmd-cats__ico{background:var(--brand);transform:scale(1.06)}
.cmd-cats__tile:hover .cmd-cats__ico svg{transform:translateX(3px)}
.cmd-cats--clair .cmd-cats__tile:hover .cmd-cats__ico{color:#fff}
.cmd-cats--clair .cmd-cats__tile:hover .cmd-ico-accent{stroke:#c9f5cf}

.cmd-cats__name{font-weight:800;font-size:15.5px;line-height:1.15;letter-spacing:-.005em}
.cmd-cats__desc{font-size:12px;line-height:1.3;font-weight:500;color:var(--txt2)}
.cmd-cats__arrow{position:absolute;left:50%;bottom:12px;width:24px;height:24px;margin-left:-12px;display:grid;place-items:center;border-radius:50%;opacity:.45;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.9,.25,1.4),background .3s}
.cmd-cats__arrow svg{width:15px;height:15px}
.cmd-cats__tile:hover .cmd-cats__arrow{opacity:1;transform:translateX(4px);background:var(--ico-bg)}

/* Tablette : 4 + 3 centrées */
@media (max-width:1100px){
.cmd-cats__tile{flex-basis:calc((100% - 3 * var(--gap)) / 4);max-width:calc((100% - 3 * var(--gap)) / 4)}
}
/* Mobile : rangée qui défile façon dock */
@media (max-width:640px){
.cmd-cats{--gap:10px;--rad:26px;--tile-rad:22px;padding:20px 0 18px}
.cmd-cats__head{padding:0 20px}
.cmd-cats__grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:8px 20px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cmd-cats__grid::-webkit-scrollbar{display:none}
.cmd-cats__tile{flex:0 0 136px;max-width:none;scroll-snap-align:start;padding:18px 10px 40px}
.cmd-cats__ico{width:62px;height:62px}
.cmd-cats__ico svg{width:38px;height:38px}
.cmd-cats__name{font-size:14.5px}
}
/* Sans backdrop-filter (vieux navigateurs) : verre plus opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.cmd-cats__tile{background:rgba(255,255,255,.16)}
.cmd-cats--clair .cmd-cats__tile{background:rgba(255,255,255,.8)}
}
/* Rond rempli par l'image de la catégorie, avec anneau et reflet de verre */
.cmd-cats__ico--img{width:88px;height:88px;padding:3px;overflow:hidden;background:rgba(255,255,255,.55)}
.cmd-cats__ico--img img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;border-radius:50%;margin:0!important;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.cmd-cats__ico--img::after{content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;
background:linear-gradient(160deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.22) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -6px 14px -6px rgba(0,0,0,.25)}
.cmd-cats--sombre .cmd-cats__ico--img{background:rgba(255,255,255,.18)}
.cmd-cats__tile:hover .cmd-cats__ico--img{background:rgba(255,255,255,.85)}
.cmd-cats--sombre .cmd-cats__tile:hover .cmd-cats__ico--img{background:rgba(255,255,255,.4)}
.cmd-cats__tile:hover .cmd-cats__ico--img img{transform:scale(1.12)}
@media (max-width:640px){.cmd-cats__ico--img{width:74px;height:74px}}

/* Halo coloré propre à chaque tuile (sert de « matière » au verre quand il n'y a pas de fond) */
.cmd-cats__glow{display:none}
.cmd-cats__tile:nth-child(1){--glow:#4fae7a}
.cmd-cats__tile:nth-child(2){--glow:#507E64}
.cmd-cats__tile:nth-child(3){--glow:#c99a55}
.cmd-cats__tile:nth-child(4){--glow:#4f8fd0}
.cmd-cats__tile:nth-child(5){--glow:#f0a640}
.cmd-cats__tile:nth-child(6){--glow:#8b62cf}
.cmd-cats__tile:nth-child(7){--glow:#2f9aa8}

/* ===== Variante SANS FOND : tuiles seules posées sur la page ===== */
.cmd-cats--nofond{background:transparent!important;padding:0;border-radius:0;overflow:visible}
.cmd-cats--nofond .cmd-cats__head{align-items:center}
.cmd-cats--nofond .cmd-cats__title{font-weight:600!important;font-size:25.6px!important;line-height:1.1!important;letter-spacing:-.01em}
.cmd-cats--nofond .cmd-cats__tile{isolation:isolate;overflow:hidden}
.cmd-cats--nofond .cmd-cats__glow{display:block;position:absolute;z-index:-1;left:50%;top:-18%;width:150%;height:85%;transform:translateX(-50%);border-radius:50%;
background:radial-gradient(closest-side,var(--glow,#507E64),transparent);opacity:.26;filter:blur(8px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.25,1.2);pointer-events:none}
.cmd-cats--nofond .cmd-cats__tile:hover .cmd-cats__glow{opacity:.5;transform:translateX(-50%) scale(1.15)}
.cmd-cats--nofond .cmd-cats__ico{-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%)}
/* clair */
.cmd-cats--nofond.cmd-cats--clair{--fill1:rgba(255,255,255,.96);--fill2:rgba(246,248,247,.9);--rim:rgba(80,126,100,.38);--rim2:rgba(80,126,100,.16);--edge:rgba(33,33,33,.06);--ico-bg:rgba(255,255,255,.6);--shadow:0 1px 2px rgba(20,40,30,.05),0 14px 30px -16px rgba(20,50,35,.28)}
.cmd-cats--nofond.cmd-cats--clair .cmd-cats__title{color:#000!important}
/* sombre */
.cmd-cats--nofond.cmd-cats--sombre{--fill1:#1f2b25;--fill2:#121915;--rim:rgba(255,255,255,.55);--rim2:rgba(255,255,255,.14);--edge:rgba(255,255,255,.06);--ico-bg:rgba(255,255,255,.1);--shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.cmd-cats--nofond.cmd-cats--sombre .cmd-cats__head{--txt:#000;--txt2:rgba(33,33,33,.62)}
.cmd-cats--nofond.cmd-cats--sombre .cmd-cats__glow{opacity:.42}
.cmd-cats--nofond.cmd-cats--sombre .cmd-cats__tile:hover .cmd-cats__glow{opacity:.7}
@media (max-width:640px){
.cmd-cats--nofond{padding:0}
.cmd-cats--nofond .cmd-cats__head{padding:0}
.cmd-cats--nofond .cmd-cats__title{font-size:22px!important}
.cmd-cats--nofond .cmd-cats__grid{margin:0 -10px;padding:6px 10px 18px;scroll-padding:0 10px}
}
/* ===== Style iOS : photo nette de la catégorie + étiquette en verre liquide ===== */
.cmd-cats--ios .cmd-cats__glow,.cmd-cats--ios .cmd-cats__arrow,.cmd-cats--ios .cmd-cats__ico{display:none!important}
.cmd-cats--ios .cmd-cats__tile{isolation:isolate;overflow:hidden;aspect-ratio:4/5;justify-content:flex-end;align-items:stretch;text-align:left;gap:0;padding:8px;border-radius:30px;background:#cfd6d2;
-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 18px 34px -20px rgba(0,0,0,.45)}
.cmd-cats--ios .cmd-cats__tile:hover,.cmd-cats--ios .cmd-cats__tile:focus-visible{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 28px 48px -22px rgba(0,0,0,.5)}
.cmd-cats--ios .cmd-cats__tile::after{z-index:2;--rim:rgba(255,255,255,.85);--rim2:rgba(255,255,255,.4)}
.cmd-cats--ios .cmd-cats__tile::before{z-index:1;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
/* Photo */
.cmd-cats__photo{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.cmd-cats__photo img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;margin:0!important;transform:scale(1.02);transition:transform 1s cubic-bezier(.2,.9,.25,1)}
.cmd-cats__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)}
.cmd-cats--ios .cmd-cats__tile:hover .cmd-cats__photo img{transform:scale(1.1)}
/* Étiquette en verre */
.cmd-cats__label{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;border-radius:22px;
-webkit-backdrop-filter:blur(16px) saturate(180%) brightness(1.05);backdrop-filter:blur(16px) saturate(180%) brightness(1.05);
transition:transform .55s cubic-bezier(.2,.9,.25,1.25),background .4s ease}
.cmd-cats__label::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.5));
-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,linear-gradient(#000 0 0);mask-composite:exclude}
.cmd-cats__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cmd-cats--ios .cmd-cats__name{font-weight:700;font-size:15.5px;line-height:1.15}
.cmd-cats--ios .cmd-cats__desc{font-size:11.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-cats__go{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:transform .45s cubic-bezier(.2,.9,.25,1.4),background .3s}
.cmd-cats__go svg{width:15px;height:15px}
.cmd-cats--ios .cmd-cats__tile:hover .cmd-cats__label{transform:translateY(-3px)}
.cmd-cats--ios .cmd-cats__tile:hover .cmd-cats__go{transform:translateX(3px)}
/* sombre : verre transparent, texte blanc */
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__label{background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));color:#fff;
box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -6px 14px -8px rgba(255,255,255,.3),0 6px 18px -8px rgba(0,0,0,.35)}
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__name,.cmd-cats--ios.cmd-cats--sombre .cmd-cats__desc{text-shadow:0 1px 6px rgba(0,0,0,.35)}
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__desc{color:rgba(255,255,255,.88)}
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__go{background:rgba(255,255,255,.22);box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__tile:hover .cmd-cats__go{background:#507E64}
/* clair : verre laiteux, texte foncé */
.cmd-cats--ios.cmd-cats--clair .cmd-cats__label{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.55));color:#212121;
box-shadow:inset 0 1px 1px #fff,0 6px 18px -8px rgba(0,0,0,.3)}
.cmd-cats--ios.cmd-cats--clair .cmd-cats__desc{color:rgba(33,33,33,.68)}
.cmd-cats--ios.cmd-cats--clair .cmd-cats__go{background:#507E64;color:#fff}
.cmd-cats--ios.cmd-cats--clair .cmd-cats__tile:hover .cmd-cats__go{background:#3B5E4A}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.cmd-cats--ios.cmd-cats--sombre .cmd-cats__label{background:rgba(30,40,35,.7)}
.cmd-cats--ios.cmd-cats--clair .cmd-cats__label{background:rgba(255,255,255,.9)}
}
@media (max-width:1100px){.cmd-cats--ios .cmd-cats__tile{aspect-ratio:4/4.6}}
@media (max-width:640px){
.cmd-cats--ios .cmd-cats__tile{flex:0 0 150px;aspect-ratio:4/5.2;border-radius:26px;padding:6px}
.cmd-cats__label{padding:8px 8px 8px 11px;border-radius:20px}
.cmd-cats--ios .cmd-cats__name{font-size:14px}
.cmd-cats--ios .cmd-cats__desc{font-size:10.5px}
.cmd-cats__go{flex-basis:26px;width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
.cmd-cats__bg span{animation:none}
.cmd-cats__tile,.cmd-cats__ico,.cmd-cats__ico svg,.cmd-cats__arrow,.cmd-cats__photo img,.cmd-cats__label{transition:none}
}
/* Elementor : pas de marge parasite autour du widget */
.elementor-widget-shortcode:has(.cmd-cats) .elementor-shortcode{line-height:normal}