:root{--forest:#224d38;--dark:#183728;--purple:#694590;--cream:#f8f7f2;--line:#dfdfd8;--ink:#1d2923;--muted:#627069;--focus:#ac7fdf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:white;padding:8px;z-index:30}.skip:focus{left:8px}
.mast{background:linear-gradient(115deg,#173b2b 0%,#29573e 57%,#503e73 100%);color:white;padding:26px max(22px,calc((100vw - 1330px)/2)) 36px}.mast-inner{max-width:1330px;margin:auto;display:flex;align-items:center;gap:25px}.brand{width:110px;height:110px;border-radius:18px;background:white;object-fit:contain;padding:9px;flex:none}.eyebrow{margin:0;color:#cfe7d5;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:800}.mast h1{font-size:clamp(1.75rem,3.6vw,3.1rem);line-height:1.12;margin:5px 0}.mast p:last-child{margin:6px 0 0;color:#e5eee8}
.shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:285px minmax(0,1fr);gap:28px;padding:30px 26px 80px}.shell.detail-mode{display:block;max-width:1100px;padding-top:38px}.sidebar{align-self:start;position:sticky;top:18px;border:1px solid var(--line);background:#fff;border-radius:19px;padding:20px;box-shadow:0 6px 22px #18261b0b}.sidebar h2{font-size:1.1rem;margin:0 0 15px}.search-label{display:block;font-weight:700;font-size:.88rem;margin-bottom:7px}.search{width:100%;border:1px solid #b8c9bf;border-radius:10px;padding:11px 12px;background:#fff;color:var(--ink)}.search::placeholder{color:#68746f}.sidebar-toggle{display:none}
.toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}.toolbar h2{font-size:1.7rem;margin:0}.toolbar p{color:var(--muted);margin:2px 0 0}.sound{border:1px solid #bacbc1;border-radius:100px;background:white;color:var(--dark);font-size:.83rem;font-weight:700;cursor:pointer;padding:9px 14px;white-space:nowrap}.sound:hover,.sound[aria-pressed=true]{background:#ebf4ed;border-color:var(--forest)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.card{border:1px solid var(--line);background:white;border-radius:16px;overflow:hidden;min-height:245px;display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.card:hover{transform:translateY(-3px);box-shadow:0 9px 24px #18261b1c;border-color:#bdabcf}.card a{text-decoration:none;display:flex;flex:1;flex-direction:column;padding:15px}.logo-box{height:145px;width:100%;display:grid;place-items:center;margin-bottom:12px}.logo-box img{display:block;width:100%;height:100%;object-fit:contain}.logo-fallback{display:grid;place-items:center;background:#e8f0e9;color:var(--forest);border-radius:13px;font-weight:800;font-size:1.4rem;width:86px;height:74px}.card h3{font-size:1rem;line-height:1.35;margin:auto 0 5px}.empty{border:1px dashed #b6b2c0;border-radius:14px;padding:32px;background:white;text-align:center}.empty[hidden],.listing[hidden],.detail[hidden]{display:none}
.detail{width:100%;max-width:920px;margin:0 auto}.back{display:inline-flex;align-items:center;gap:6px;color:var(--forest);font-weight:700;margin-bottom:22px;text-decoration:none}.back:hover{text-decoration:underline}.detail-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(25px,5vw,60px);box-shadow:0 8px 25px #18261b0a}.detail-head{text-align:center;border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:29px}.detail-head .detail-logo{min-height:126px;display:grid;place-items:center;margin:0 auto 18px}.detail-head img{display:block;max-width:min(100%,320px);max-height:125px;width:auto;height:auto;object-fit:contain}.detail h2{font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1.22;margin:7px 0;overflow-wrap:anywhere}.website{display:inline-block;margin-top:15px;padding:11px 19px;border-radius:9px;background:var(--forest);color:white;text-decoration:none;font-size:.94rem;font-weight:700}.website:hover{background:var(--dark)}.detail p{white-space:pre-wrap;overflow-wrap:anywhere}.detail .about{max-width:72ch;margin:0 auto;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.detail .desc{max-width:72ch;margin:14px auto 0;line-height:1.8;font-size:1.03rem}
@media(max-width:740px){.mast-inner{align-items:flex-start}.brand{width:77px;height:77px}.shell{display:block;padding:18px 16px 70px}.shell.detail-mode{padding-top:22px}.sidebar{position:static;padding:0;margin-bottom:20px}.sidebar-toggle{display:block;width:100%;padding:13px 17px;border:0;background:white;text-align:left;font-weight:750;color:var(--forest);border-radius:18px;cursor:pointer}.sidebar-toggle::after{content:'▾';float:right}.sidebar-toggle[aria-expanded=false]::after{content:'▸'}.sidebar-body{padding:0 17px 18px}.sidebar-body[hidden]{display:none}.toolbar{align-items:center}.toolbar h2{font-size:1.38rem}.sound{padding:8px 10px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{min-height:213px}.card a{padding:12px}.logo-box{height:115px}.detail-head img{max-width:100%;max-height:110px}.detail .desc{font-size:1rem}}
@media(max-width:390px){.grid{grid-template-columns:1fr}.card{min-height:0}.card a{flex-direction:row;align-items:center;gap:16px}.logo-box{width:85px;height:75px;margin:0;flex:none}.card h3{margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}.card:hover{transform:none}}
/* Réserve une zone fixe au logo : même un fichier aux dimensions extrêmes ne peut pas masquer le titre. */
.card a{min-width:0}
.card .logo-box{display:flex;align-items:center;justify-content:center;flex:0 0 145px;height:145px;min-height:145px;max-height:145px;overflow:hidden}
.card .logo-box img{display:block;flex:0 1 auto;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain}
.card h3{flex:0 0 auto;margin:8px 0 0;overflow-wrap:anywhere}
@media(max-width:740px){.card .logo-box{flex-basis:115px;height:115px;min-height:115px;max-height:115px}}
@media(max-width:390px){.card .logo-box{flex:0 0 85px;width:85px;height:75px;min-height:75px;max-height:75px;margin:0}.card h3{flex:1 1 auto;min-width:0;margin:0}}