/* ===================================================================== MINI-CALENDRIER SECUFER (pages villes) - styles --------------------------------------------------------------------- Chargé dans le de chaque page ville (render-blocking) pour éviter tout flash visuel (FOUC) : sans ce CSS au parsing, l'icône calendrier (SVG sans width/height) s'affichait à sa taille par défaut (surdimensionnée) un instant avant l'application du style. Réutilise les variables de couleur navy/gold du design system de la page. Le rendu dynamique des cartes reste géré par mini-calendrier-secufer.js. ===================================================================== */ .mcs{max-width:1080px;margin:0 auto;text-align:center;} .mcs-title{display:inline-flex;align-items:center;gap:12px;justify-content:center;font-size:clamp(20px,2.5vw,28px);color:var(--navy);letter-spacing:-.02em;margin:0;line-height:1.15;} .mcs-title .mcs-ic{width:36px;height:36px;border-radius:10px;background:var(--gold-soft);border:1px solid rgb(236,213,138);color:var(--gold-2);display:grid;place-items:center;flex-shrink:0;} .mcs-title .mcs-ic svg{width:20px;height:20px;} .mcs-sub{color:var(--muted);font-size:15.5px;line-height:1.6;margin:13px auto 30px;max-width:640px;} .mcs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} .mcs-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:96px;padding:18px 14px;border-radius:14px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-3,#0e163e) 100%);color:#fff;text-decoration:none;overflow:hidden;border:1.5px solid transparent;box-shadow:0 14px 28px -16px rgba(15,22,62,.55);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;animation:mcsIn .45s ease both;} .mcs-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),#e9c45e);} .mcs-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 22px 44px -18px rgba(15,22,62,.65);} .mcs-card:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.45);} .mcs-card .mcs-d{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.1;} .mcs-card .mcs-r{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);} .mcs-card .mcs-r svg{width:13px;height:13px;transition:transform .16s ease;} .mcs-card:hover .mcs-r svg{transform:translateX(3px);} .mcs-more{display:inline-block;margin-top:26px;color:var(--navy);font-weight:700;font-size:14.5px;border-bottom:2px solid var(--gold);padding-bottom:2px;transition:color .15s ease;} .mcs-more:hover{color:var(--gold-2);} .mcs-empty{grid-column:1/-1;background:#f7f8fb;border:1px dashed var(--line-2,#dcdde8);border-radius:14px;padding:24px 20px;color:var(--ink-2,#2a3160);font-size:14.5px;line-height:1.6;} @keyframes mcsIn{from{opacity:0}to{opacity:1}} @media(max-width:900px){.mcs-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:460px){.mcs-grid{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){.mcs-card{animation:none;}.mcs-card,.mcs-card .mcs-r svg{transition:none;}}