@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700;800&display=swap");

:root {
    --bg: #f9f8f4;
    --paper: #fffcf7;
    --ink: #0d0d0d;
    --muted: #555555;
    --blue: #0047ab;
    --red: #d32f2f;
    --yellow: #ffc107;
    --line: #0d0d0d;
    --header-h: 68px;
    --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --max: 1220px;
    --border: 3px solid var(--line);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--ink);
    background:
        radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
        var(--bg);
    background-size: 4px 4px, auto;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }

.preview-banner {
    position: sticky; top: 0; z-index: 100;
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
    padding: .65rem 1.1rem;
    background: var(--ink); color: #fff; font-weight: 700; font-size: .88rem;
    border-bottom: 3px solid var(--yellow);
}
.preview-banner a { margin-left: auto; color: var(--yellow); text-decoration: underline; }

/* ===== HEADER ===== */
.cb-header {
    position: sticky; top: 0; z-index: 80;
    height: var(--header-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem);
    background: var(--paper);
    border-bottom: var(--border);
}
.cb-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 1.35rem;
}
.cb-brand-mark {
    width: 34px; height: 34px;
    border: 3px solid var(--line);
    background:
        linear-gradient(135deg, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%),
        linear-gradient(45deg, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%),
        #fff;
}
.cb-nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .35rem;
    list-style: none; margin: 0; padding: 0;
}
.cb-nav a {
    padding: .35rem .65rem;
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cb-nav a:hover, .cb-nav a.is-active {
    background: var(--yellow);
    outline: 2px solid var(--line);
}
.cb-tools { display: flex; align-items: center; gap: .45rem; }
.cb-search {
    display: flex; align-items: center; gap: .4rem;
    border: 2px solid var(--line);
    background: #fff;
    padding: .4rem .65rem;
    min-width: 190px;
}
.cb-search input {
    width: 100%; border: 0; outline: none; background: transparent; color: var(--ink);
}
.mobile-toggle {
    display: none;
    width: 38px; height: 38px;
    border: 2px solid var(--line);
    background: #fff;
    cursor: pointer; font-weight: 900;
}

.cb-main {
    width: min(var(--max), calc(100% - 1.25rem));
    margin: 0 auto;
    padding: .85rem 0 2.5rem;
}

/* Ribbons */
.ribbon {
    display: inline-block;
    padding: .35rem .9rem .35rem .75rem;
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border: 2px solid var(--line);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
    line-height: 1;
}
.ribbon-blue { background: var(--blue); }
.ribbon-red { background: var(--red); }
.ribbon-yellow { background: var(--yellow); color: var(--ink); }

.panel {
    background: var(--paper);
    border: var(--border);
}
.panel-head {
    display: flex; align-items: center;
    padding: .55rem .7rem;
    border-bottom: var(--border);
    background: #fff;
}

.meta {
    display: flex; flex-wrap: wrap; gap: .55rem 1rem;
    align-items: center;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink);
}
.meta i {
    display: inline-block;
    width: .9rem; height: .9rem;
    margin-right: .28rem;
    vertical-align: -1px;
    background: var(--blue);
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}
.meta .ico-star {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.9L22 10l-5 4.6L18.2 22 12 18.2 5.8 22 7 14.6 2 10l7.1-1.1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l2.9 6.9L22 10l-5 4.6L18.2 22 12 18.2 5.8 22 7 14.6 2 10l7.1-1.1z'/%3E%3C/svg%3E");
}
.meta .ico-clock {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.6l3.2 1.9-.9 1.5L11 13.5V7h2v5.6z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 10.6l3.2 1.9-.9 1.5L11 13.5V7h2v5.6z'/%3E%3C/svg%3E");
}
.meta .ico-cal {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H6v10h14V10z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3v18H4V4h3V2zm13 8H6v10h14V10z'/%3E%3C/svg%3E");
}
.meta.red i { background: var(--red); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--line);
    background: var(--blue);
    color: #fff;
    padding: .55rem 1rem;
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }

.cover-fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: #1a1a1a; color: #fff;
    font-family: var(--display); font-size: 1.4rem; letter-spacing: .1em;
}

/* ===== TOP GRID: HERO + FLASH ===== */
.top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, .85fr);
    gap: .75rem;
    margin-bottom: .75rem;
    align-items: stretch;
}

/* Hero: image LEFT full, text RIGHT */
.hero {
    display: grid;
    grid-template-columns: 1.15fr .95fr;
    min-height: 480px;
    overflow: hidden;
    position: relative;
}
.hero-visual {
    position: relative;
    min-height: 480px;
    border-right: var(--border);
    background: #111;
    overflow: hidden;
}
.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-visual .cover-fallback { min-height: 480px; }
.hero-ribbon {
    position: absolute;
    top: .85rem; left: 0;
    z-index: 2;
}
.hero-copy {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
    background: var(--paper);
}
.hero-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: .9;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.hero-banner {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: .45rem .7rem;
    background: var(--yellow);
    border: 2px solid var(--line);
    font-family: var(--display);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.05;
}
.hero-excerpt {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    text-align: justify;
    color: #222;
    max-width: 40ch;
}

/* Flash */
.flash { display: flex; flex-direction: column; min-height: 100%; }
.flash-list { flex: 1; }
.flash-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: .7rem;
    padding: .75rem;
    border-bottom: var(--border);
    position: relative;
}
.flash-item:last-child { border-bottom: 0; }
.flash-thumb {
    width: 92px; height: 68px;
    border: 2px solid var(--line);
    background: #ddd;
    overflow: hidden;
}
.flash-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.flash-ago {
    position: absolute;
    top: .55rem; right: .55rem;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--line);
    padding: .18rem .4rem;
    font-family: var(--display);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.flash-item h3 {
    margin: 0 0 .3rem;
    padding-right: 5.5rem;
    font-family: var(--display);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.flash-item p {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== BOTTOM: 4 TILTED POSTERS + TENDANCES ===== */
.bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, .85fr);
    gap: .75rem;
    align-items: start;
}

.cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.cat-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: visible;
}
.cat-card .panel-head {
    padding: 0;
    border-bottom: var(--border);
}
.cat-card .ribbon {
    display: block;
    width: 100%;
    text-align: center;
    clip-path: none;
    padding: .45rem .5rem;
    border: 0;
    border-bottom: 0;
}

/* Zone affiche de travers — photo entière visible */
.cat-stage {
    position: relative;
    flex: 1;
    min-height: 210px;
    padding: 1.35rem 1rem 1.1rem;
    background:
        repeating-linear-gradient(45deg, #efece4 0 8px, #f7f4ec 8px 16px);
    border-bottom: var(--border);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.cat-poster {
    width: min(78%, 150px);
    aspect-ratio: 2 / 3;
    background: #fff;
    border: 3px solid var(--line);
    box-shadow:
        6px 8px 0 rgba(0,0,0,.18),
        0 10px 22px rgba(0,0,0,.12);
    transform: rotate(-8deg);
    overflow: hidden;
    transition: transform .25s ease;
}
.cat-card:nth-child(2) .cat-poster { transform: rotate(6deg); }
.cat-card:nth-child(3) .cat-poster { transform: rotate(-5deg); }
.cat-card:nth-child(4) .cat-poster { transform: rotate(7deg); }
.cat-card:hover .cat-poster { transform: rotate(0deg) scale(1.03); }

.cat-poster img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* toute la photo visible */
    object-position: center;
    background: #111;
}
.cat-body {
    padding: .7rem .75rem .85rem;
    background: #fff;
}
.cat-body h3 {
    margin: 0 0 .35rem;
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.cat-body p {
    margin: 0 0 .55rem;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tendances */
.trends { overflow: hidden; }
.trend-item {
    display: grid;
    grid-template-columns: 40px 52px 1fr;
    gap: .65rem;
    align-items: center;
    padding: .7rem .75rem;
    border-bottom: var(--border);
}
.trend-item:last-child { border-bottom: 0; }
.trend-rank {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--ink);
    color: #fff;
    border: 2px solid var(--line);
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1;
}
.trend-thumb {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--line);
    background: #ddd;
}
.trend-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.trend-item h3 {
    margin: 0 0 .25rem;
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Category / article pages */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .85rem;
}
.card { overflow: hidden; }
.card-media {
    aspect-ratio: 16 / 10;
    border-bottom: var(--border);
    background: #111;
    overflow: hidden;
}
.card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.card-body { padding: .8rem; background: #fff; }
.card-title {
    margin: .35rem 0 .4rem;
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1;
    text-transform: uppercase;
}

.article-cover {
    width: min(var(--max), calc(100% - 1.25rem));
    margin: 0 auto .85rem;
    border: var(--border);
    background: #111;
    overflow: hidden;
}
.article-cover img {
    width: 100%;
    max-height: 480px;
    object-fit: contain; /* toute la photo */
    margin: 0 auto;
    background: #111;
}
.article-wrap {
    width: min(740px, calc(100% - 1.25rem));
    margin: 0 auto 2rem;
    background: var(--paper);
    border: var(--border);
    padding: 1.25rem 1.4rem 1.75rem;
}
.breadcrumb {
    display: flex; flex-wrap: wrap; gap: .35rem;
    color: var(--muted); font-size: .85rem; margin-bottom: .75rem; font-weight: 700;
}
.breadcrumb a:hover { color: var(--blue); }
.article-wrap h1 {
    margin: .4rem 0 .7rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: .95;
    text-transform: uppercase;
}
.article-content {
    margin-top: 1.2rem;
    line-height: 1.75;
    font-size: 1.05rem;
}
.article-content a { color: var(--blue); text-decoration: underline; }
.article-content h2, .article-content h3 {
    font-family: var(--display);
    text-transform: uppercase;
}
.article-content blockquote {
    margin: 1.4rem 0;
    padding: .9rem 1rem;
    border: 2px solid var(--line);
    background: var(--yellow);
    font-family: var(--display);
    font-size: 1.35rem;
    text-transform: uppercase;
}
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.related { margin-top: 1.25rem; }
.empty {
    padding: 1.4rem;
    border: 2px dashed var(--line);
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    background: #fff;
}

.cb-footer {
    border-top: 4px solid var(--line);
    background: var(--ink);
    color: rgba(255,255,255,.75);
}
.cb-footer-inner {
    width: min(var(--max), calc(100% - 1.25rem));
    margin: 0 auto;
    padding: 1.4rem 0;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    align-items: center;
}
.cb-footer a:hover { color: var(--yellow); }

@media (max-width: 1100px) {
    .cats { grid-template-columns: repeat(2, 1fr); }
    .top-grid, .bottom-grid { grid-template-columns: 1fr; }
    .hero { min-height: 0; }
    .hero-visual, .hero-visual .cover-fallback { min-height: 320px; }
}
@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; }
    .hero-visual { border-right: 0; border-bottom: var(--border); min-height: 260px; }
    .cb-search { display: none; }
    .cb-nav {
        display: none; position: absolute; left: .75rem; right: .75rem;
        top: calc(var(--header-h) + .35rem);
        flex-direction: column;
        background: var(--paper);
        border: var(--border);
        padding: .6rem; z-index: 50;
    }
    .cb-nav.is-open { display: flex; }
    .mobile-toggle { display: inline-grid; }
    .cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .cats { grid-template-columns: 1fr; }
    .flash-item { grid-template-columns: 76px 1fr; }
}