/*
 * 52-hub.css  (news-IA, Eve 2026-10-15) — hub page body for the four type hubs
 * (Actualites / Tutoriels / Ressources / Etudes de cas), FR and EN mirror.
 * Enqueued by inc/hooks/60-hub.php on hub pages only, dep 'maccus-patterns'.
 * All classes are namespaced `mcn-` so nothing collides with the existing
 * theme/plugin CSS. Tokens are the live 00-tokens.css --mc-* set (no redecl).
 * Ported from mockups/hub-*-fr.html. No em dashes.
 */

.mcn{--mcn-gap:12px}
.mcn-wrap{max-width:calc(var(--mc-content-max) + 32px);margin-inline:auto;padding-inline:16px}
.mcn *,.mcn *::before,.mcn *::after{box-sizing:border-box}
.mcn ul,.mcn ol{margin:0;padding:0;list-style:none}

/* breadcrumb */
.mcn-crumbs{font-size:var(--mc-fs-100);color:var(--mc-text-muted);margin:20px 0 10px}
.mcn-crumbs a{color:inherit}
.mcn-crumbs span.sep{margin:0 .45em}

/* heading + standfirst */
.mcn-h1{font-family:var(--mc-font-display);font-weight:700;color:var(--mc-color-heading);font-size:var(--mc-fs-700);line-height:var(--mc-lh-tight);letter-spacing:var(--mc-tracking-display);margin:0 0 12px;text-wrap:balance}
.mcn-stand{font-size:var(--mc-fs-300);color:var(--mc-text-muted);max-width:62ch;line-height:1.5;margin:0 0 20px}

/* filter pills */
.mcn-pills{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.mcn-pills::-webkit-scrollbar{display:none}
.mcn-pills+.mcn-pills{margin-top:8px}
.mcn-pill{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--mc-border);background:#fff;color:var(--mc-ink-text);font-size:var(--mc-fs-100);font-weight:600;white-space:nowrap}
.mcn-pill[aria-current]{background:var(--mc-ink-800);border-color:var(--mc-ink-800);color:#fff}
.mcn-pills--fmt .mcn-pill{border-radius:var(--mc-radius-md);background:var(--mc-surface-1);padding:0 14px}
.mcn-pills__lbl{flex:none;font-size:var(--mc-fs-100);color:var(--mc-text-muted);font-weight:600;margin-right:2px;align-self:center}

.mcn-count{font-size:var(--mc-fs-100);color:var(--mc-text-muted);margin:10px 0 0}

/* "En ce moment" live strip */
.mcn-now-wrap{margin-top:24px}
.mcn-now{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--mc-blue-050);border-left:3px solid var(--mc-color-accent);border-radius:0 var(--mc-radius-sm) var(--mc-radius-sm) 0;padding:12px 16px}
.mcn-now__lbl{display:inline-flex;align-items:center;gap:8px;font-size:var(--mc-fs-100);font-weight:700;text-transform:uppercase;letter-spacing:var(--mc-tracking-overline);color:var(--mc-blue-650);white-space:nowrap}
.mcn-dot{width:10px;height:10px;border-radius:50%;background:var(--mc-blue-600);box-shadow:0 0 0 0 rgba(30,115,190,.5);animation:mcn-pulse 1.8s ease-in-out infinite}
@keyframes mcn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(30,115,190,.5)}50%{box-shadow:0 0 0 7px rgba(30,115,190,0)}}
.mcn-now__t{flex:1 1 280px;font-weight:600;color:var(--mc-ink-text);line-height:1.4;text-decoration:underline;text-decoration-color:rgba(30,115,190,.35);text-underline-offset:3px}
.mcn-now__n{font-size:var(--mc-fs-100);color:var(--mc-text-muted);white-space:nowrap}

/* section headings + eyebrow */
.mcn-sec-h{font-family:var(--mc-font-display);font-weight:700;font-size:var(--mc-fs-500);color:var(--mc-ink-text);letter-spacing:var(--mc-tracking-heading);line-height:1.2;margin:44px 0 16px}
.mcn-eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--mc-fs-100);font-weight:600;letter-spacing:var(--mc-tracking-overline);text-transform:uppercase;color:var(--mc-blue-650);margin:32px 0 12px}
.mcn-eyebrow::before{content:"";width:1.6em;height:2px;border-radius:2px;background:var(--mc-gradient-accent-rule)}

/* image + placeholder */
.mcn-img{display:block;width:100%;height:100%;object-fit:cover}
.mcn-ph{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E3E8F0,#C8D1DE);color:#4F5868;font-size:14px;overflow:hidden}
.mcn-ph--b{background:linear-gradient(135deg,#DCE8F7,#B8CDE8)}
.mcn-ph--s{background:linear-gradient(135deg,#EEF1F5,#D5DBE4)}
.mcn-ph::after{content:"";width:40px;height:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7485' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A2.5 2.5 0 0 1 5.5 6h1.8l1.4-2h6.6l1.4 2h1.8A2.5 2.5 0 0 1 21 8.5v9a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat}

/* pills on cards */
.mcn-tags{display:flex;flex-wrap:wrap;gap:6px}
.mcn-tag{display:inline-flex;align-items:center;font-size:var(--mc-fs-100);font-weight:600;line-height:1.2;padding:4px 10px;border-radius:999px;background:var(--mc-blue-050);color:var(--mc-blue-650);white-space:nowrap}
.mcn-tag--o{background:#fff;box-shadow:inset 0 0 0 1px var(--mc-ink-800);color:var(--mc-ink-800)}
.mcn-tag--g{background:var(--mc-surface-2);color:var(--mc-ink-text)}

.mcn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:var(--mc-fs-100);color:var(--mc-text-muted);line-height:1.4}
.mcn-meta .mcn-s::before{content:"\00B7";margin:0 8px}
.mcn-av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--mc-ink-800);color:#fff;display:inline-grid;place-items:center;font-family:var(--mc-font-display);font-weight:700;font-size:14px;margin-right:10px;letter-spacing:.02em}
.mcn-by{color:var(--mc-ink-text);font-weight:600}
.mcn-mby{display:flex;align-items:center}
.mcn-mby .mcn-by{display:block;font-size:var(--mc-fs-100);line-height:1.4}

/* featured ("A la une") */
.mcn-feat{position:relative;display:block;background:#fff;border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);box-shadow:var(--mc-shadow-2);overflow:hidden}
.mcn-feat .mcn-ph{aspect-ratio:16/9}
.mcn-feat .mcn-ph::after{width:56px;height:56px}
.mcn-feat__b{padding:18px 16px 20px}
.mcn-feat h2{font-family:var(--mc-font-display);font-weight:700;color:var(--mc-color-heading);letter-spacing:var(--mc-tracking-heading);font-size:var(--mc-fs-600);margin:12px 0 10px;line-height:1.12;text-wrap:balance}
.mcn-feat h2 a{color:inherit}
.mcn-feat h2 a::after{content:"";position:absolute;inset:0}
.mcn-feat p{color:var(--mc-text-body);margin:0 0 14px}

/* card grid (Actualites + Tutoriels) */
.mcn-grid{display:grid;gap:12px;margin:0}
.mcn-card{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);box-shadow:var(--mc-shadow-1);padding:12px}
.mcn-card>.mcn-ph,.mcn-card>.mcn-thumb{width:96px;height:96px;border-radius:var(--mc-radius-md);overflow:hidden}
.mcn-card>.mcn-ph::after{width:28px;height:28px}
.mcn-card__b{min-width:0}
.mcn-card h2{font-family:var(--mc-font-display);font-weight:700;color:var(--mc-color-heading);letter-spacing:var(--mc-tracking-heading);font-size:var(--mc-fs-300);line-height:1.28;margin:8px 0 6px;text-wrap:balance}
.mcn-card h2 a{color:inherit}
.mcn-card h2 a::after{content:"";position:absolute;inset:0}
.mcn-card .mcn-sf{display:none;font-size:var(--mc-fs-100);color:var(--mc-text-muted);line-height:1.5;margin:0 0 10px}
.mcn-card .mcn-k{font-size:var(--mc-fs-100);font-weight:600;color:var(--mc-ink-text);margin:0 0 2px;line-height:1.4}
.mcn-thumb{display:block;position:relative}

/* pagination */
.mcn-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:32px 0 0}
.mcn-pager>a,.mcn-pager>span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--mc-border);border-radius:var(--mc-radius-md);font-size:var(--mc-fs-100);font-weight:600;color:var(--mc-ink-text);background:#fff;padding:0 12px}
.mcn-pager>[aria-current]{background:var(--mc-ink-800);border-color:var(--mc-ink-800);color:#fff}
.mcn-pager .mcn-dis{color:#8A93A3;background:var(--mc-surface-1)}
.mcn-pager .mcn-lbl{display:none}

/* bridge links */
.mcn-bridge{display:grid;gap:10px}
.mcn-bridge a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--mc-border);border-radius:var(--mc-radius-md);background:var(--mc-surface-1);color:var(--mc-ink-text);font-family:var(--mc-font-display);font-weight:600;font-size:var(--mc-fs-200);line-height:1.35;letter-spacing:-.01em}

/* tutoriels: start-here + bar/sort */
.mcn-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:10px}
.mcn-bar .mcn-count{margin:0}
.mcn-start{display:grid;gap:12px;background:linear-gradient(135deg,var(--mc-blue-050),#fff 80%);border:1px solid #CFE0F7;border-radius:var(--mc-radius-lg);padding:20px 18px;margin-top:24px}
.mcn-start .mcn-eyebrow{margin:0}
.mcn-start h2{font-family:var(--mc-font-display);font-weight:700;font-size:var(--mc-fs-500);margin:0;letter-spacing:var(--mc-tracking-heading)}
.mcn-start h2 a{color:var(--mc-ink-text)}
.mcn-start p{margin:0;color:var(--mc-text-body)}
.mcn-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--mc-color-link);font-size:var(--mc-fs-200)}
.mcn-go::after{content:"\2192"}

/* ressources cards */
.mcn-rgrid{display:grid;gap:12px}
.mcn-rcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;border:1px solid var(--mc-border);border-radius:var(--mc-radius-lg);box-shadow:var(--mc-shadow-1)}
.mcn-rcard__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mcn-upd{font-size:var(--mc-fs-100);font-weight:600;color:var(--mc-ink-text)}
.mcn-rcard h2{font-family:var(--mc-font-display);font-weight:700;color:var(--mc-color-heading);letter-spacing:var(--mc-tracking-heading);font-size:var(--mc-fs-300);line-height:1.3;margin:0}
.mcn-rcard h2 a{color:inherit}
.mcn-rcard h2 a::after{content:"";position:absolute;inset:0}
.mcn-rcard p{font-size:var(--mc-fs-100);color:var(--mc-text-muted);margin:0;line-height:1.5}

/* dark CTA band (single, full width of content) */
.mcn-cta{position:relative;overflow:hidden;background:var(--mc-gradient-dark);color:rgba(255,255,255,.8);text-align:center;padding:56px 0;margin-top:56px}
.mcn-cta::before{content:"";position:absolute;inset:-30% 0 auto 0;height:120%;background:radial-gradient(60% 80% at 50% 0%,rgba(45,143,212,.25),transparent 70%)}
.mcn-cta .mcn-wrap{position:relative}
.mcn-cta h2{color:#fff;font-family:var(--mc-font-display);font-weight:700;font-size:var(--mc-fs-700);line-height:1.08;letter-spacing:var(--mc-tracking-display);max-width:18ch;margin:0 auto 14px}
.mcn-cta p{max-width:46ch;margin:0 auto 26px;color:rgba(255,255,255,.8)}
.mcn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--mc-font-body);font-weight:600;font-size:var(--mc-fs-200);line-height:1.3;min-height:48px;padding:var(--mc-cta-pad);border-radius:var(--mc-cta-radius);background:var(--mc-gradient-cta);color:#fff;box-shadow:var(--mc-shadow-cta);text-align:center}

@media(min-width:480px){.mcn-card .mcn-sf{display:block}}
@media(min-width:768px){
 .mcn-wrap{max-width:calc(var(--mc-content-max) + 48px);padding-inline:24px}
 .mcn-pills{margin:0;padding:2px 0 4px;flex-wrap:wrap}
 .mcn-pager .mcn-lbl{display:inline}
 .mcn-start{grid-template-columns:1fr auto;align-items:center;padding:26px 28px}
 .mcn-start .mcn-go{grid-column:2;grid-row:1/span 4;align-self:center;padding:0 20px;border:1px solid var(--mc-color-link);border-radius:var(--mc-radius-md)}
}
@media(min-width:1024px){
 .mcn-crumbs{margin-top:32px}
 .mcn-feat{display:grid;grid-template-columns:60% 40%}
 .mcn-feat .mcn-ph{width:100%;height:auto;aspect-ratio:auto;min-height:405px}
 .mcn-feat .mcn-thumb{min-height:405px}
 .mcn-feat__b{padding:32px 36px;display:flex;flex-direction:column;justify-content:center}
 .mcn-grid{grid-template-columns:repeat(3,1fr);gap:32px}
 .mcn-card{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden}
 .mcn-card>.mcn-ph,.mcn-card>.mcn-thumb{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
 .mcn-card>.mcn-ph::after{width:40px;height:40px}
 .mcn-card__b{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
 .mcn-card h2{font-size:var(--mc-fs-400);margin:12px 0 8px}
 .mcn-card .mcn-meta,.mcn-card .mcn-k{margin-top:auto}
 .mcn-card .mcn-k+.mcn-meta{margin-top:0}
 .mcn-bridge{grid-template-columns:repeat(3,1fr);gap:32px}
 .mcn-rgrid{grid-template-columns:repeat(3,1fr);gap:32px}
 .mcn-rcard{padding:24px}
 .mcn-rcard h2{font-size:var(--mc-fs-400)}
 .mcn-cta{padding:80px 0}
}