:root{color-scheme:dark;--background:#050505;--panel:rgba(0,0,0,.69);--card:rgba(24,24,30,.88);--border:rgba(255,255,255,.10);--text:#fff;--muted:#b8b8c4;--purple:#8a43eb;--purple-light:#b681ff;--cyan:#00bfff;--green:#17edbd;--orange:#ff7a00}*{box-sizing:border-box}html{min-height:100%;background:var(--background);scroll-behavior:smooth}body{min-height:100vh;margin:0;padding:0 10px 10px;color:var(--text);font:14px/1.5 Arial,Helvetica,sans-serif;background:linear-gradient(to bottom,rgba(0,0,0,.75) 0%,rgba(0,0,0,.86) 42%,rgba(0,0,0,.96) 100%),url("https://i.ytimg.com/vi/7ufkMTshjz8/hqdefault.jpg");background-position:top center;background-attachment:fixed;background-repeat:no-repeat;background-size:cover}#common-menu{margin:0 -10px 10px}main{width:min(100%,440px);margin:0 auto;padding:8px 10px;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 4px 8px rgba(0,0,0,.3),inset 0 1px 3px rgba(255,255,255,.1);backdrop-filter:blur(8px)}.page-header{position:relative;overflow:hidden;margin-bottom:18px;padding:24px 20px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:radial-gradient(circle at top right,rgba(138,67,235,.24),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}.page-header:after{content:"";position:absolute;top:-70px;right:-60px;width:190px;height:190px;border-radius:50%;background:rgba(118,215,255,.07);filter:blur(12px)}.page-title{position:relative;z-index:1;margin:0;color:var(--cyan);text-align:center;text-shadow:0 0 12px var(--cyan);font-size:clamp(24px,7vw,30px);line-height:1.12}.page-title span{color:var(--purple-light)}.summary{position:relative;z-index:1;margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.6}.catalogue-section>h2{margin:28px 0 12px;padding:0 2px 8px;color:#f1f1f1;border-bottom:1px solid #343434;font-size:14px;text-transform:uppercase;letter-spacing:.4px}.catalogue-section>h2 small{color:var(--purple-light)}.empty{color:var(--muted)}.grid{display:grid;gap:18px}.card{display:flex;min-width:0;gap:12px;padding:12px;overflow:hidden;border:1px solid #222;border-radius:12px;background:radial-gradient(circle at center,#232323ab,#0a0a0a61);box-shadow:0 0 12px rgba(255,255,255,.15);transition:transform .25s,box-shadow .25s}.card:hover{transform:scale(1.018);box-shadow:0 0 12px rgba(182,129,255,.28)}.card>div{width:55%;min-width:0}.card>a{flex:0 0 42%;width:42%;overflow:hidden;border-radius:10px;box-shadow:0 0 8px rgba(255,255,255,.2)}.card[hidden],.keyword-item[hidden]{display:none}.card img{display:block;width:100%;height:100%;min-height:145px;object-fit:cover;transition:opacity .3s,transform .3s}.card img:hover{opacity:.86;transform:scale(1.025)}.card-title{display:block;width:100%;margin:5px 0 7px;overflow:hidden;color:var(--green);text-shadow:0 0 6px rgba(23,237,189,.65);font-size:17px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.card a,.keyword-item a{color:inherit;text-decoration:none}.card-description{display:-webkit-box;margin:8px 0;overflow:hidden;color:#ddd;font-size:12px;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:3}.card time{display:block;overflow:hidden;color:#999;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-block;padding:3px 7px;border:1px solid rgba(182,129,255,.35);border-radius:999px;color:#e5d1ff;background:rgba(138,67,235,.2);font-size:9px;font-weight:900;text-transform:uppercase}.keyword-grid{display:grid;gap:7px}.keyword-item{padding:9px 12px;border:1px solid #333;border-radius:7px;background:#1b1b1b;transition:.18s}.keyword-item:hover{background:#242424;border-color:#555;transform:translateX(2px)}.keyword-item h1{margin:0;overflow:hidden;color:#d8d8d8;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.keyword-item h1:before{content:"›";margin-right:8px;color:#8f8f8f;font-size:18px}.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:22px auto 30px}.pagination:empty{display:none}.pagination button{min-width:34px;height:34px;padding:4px 9px;border:1px solid rgba(0,234,255,.35);border-radius:6px;color:#00eaff;background:#0b1114;font-size:12px;cursor:pointer;transition:.2s}.pagination button:hover{background:rgba(0,234,255,.13);box-shadow:0 0 6px #00eaff}.pagination button.active{color:#000;background:#00eaff;font-weight:900;box-shadow:0 0 8px #00eaff}#common-footer{width:min(100%,440px);margin:24px auto 0}@media(max-width:600px){body{padding:0 7px 7px;background-attachment:scroll}#common-menu{margin:0 -7px 8px}main{padding:8px}.page-header{padding:20px 15px}.card{gap:10px;padding:10px}.card>a{flex-basis:43%;width:43%}.card>div{width:57%}.card img{min-height:135px}.card-title{font-size:15px}.card-description{font-size:11px}} 


/* =========================================================
   CONTENU : IMAGES CENTRÉES — MAXIMUM 420 PX
   ========================================================= */

.content .separator {
    display: block;
    width: 100%;
    margin: 24px auto;
    text-align: center !important;
    clear: both;
}

.content .separator > a,
.content a:has(> img) {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
    text-align: center;
}

.content img {
    display: block;
    width: auto;
    max-width: min(420px, 100%);
    height: auto;
    margin: 0 auto !important;
    float: none !important;

    border-radius: 12px;
    border: 1px solid #29354a;
    background: #0c111a;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   IFRAMES : KIT SOMBRE RESPONSIVE
   ========================================================= */

.content iframe {
    display: block;
    width: min(100%, 1100px);
    max-width: 100%;
    min-height: 420px;
    margin: 28px auto;

    overflow: auto;
    color-scheme: dark;

    border: 1px solid #29354a;
    border-radius: 14px;
    background: #080b11;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(56, 189, 248, 0.05);
}

/* Conteneur facultatif autour des frames */

.content .iframe-container {
    width: min(100%, 4400px);
    max-height: 760px;
    margin: 28px auto;
    overflow: auto;

    color-scheme: dark;
    border: 1px solid #29354a;
    border-radius: 14px;
    background: #080b11;

    scrollbar-width: thin;
    scrollbar-color: #475569 #0c111a;
}

.content .iframe-container iframe {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Ascenseurs Chromium, Chrome, Edge et Safari */

.content .iframe-container::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.content .iframe-container::-webkit-scrollbar-track {
    background: #0c111a;
    border-radius: 10px;
}

.content .iframe-container::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid #0c111a;
    border-radius: 10px;
    background: linear-gradient(180deg, #475569, #29354a);
}

.content .iframe-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #38bdf8, #2563eb);
}

/* Mobile */

@media (max-width: 600px) {
    .content img {
        max-width: 100%;
        border-radius: 9px;
    }

    .content iframe {
        min-height: 360px;
        border-radius: 10px;
    }

    .content .iframe-container {
        max-height: 620px;
        border-radius: 10px;
    }
}
/* =========================================================
   LABELS / MOTS-CLÉS
   ========================================================= */

.content .labels,
nav.labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: min(100%, 900px);
    margin: 24px auto;
    padding: 15px;

    border: 1px solid #29354a;
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(18, 24, 36, 0.96),
            rgba(7, 9, 13, 0.98)
        );

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Boutons des labels */

.content .labels a,
nav.labels a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 36px;
    padding: 7px 13px;

    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    border: 1px solid #334155;
    border-radius: 999px;
    background: #121824;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Survol et navigation clavier */

.content .labels a:hover,
.content .labels a:focus-visible,
nav.labels a:hover,
nav.labels a:focus-visible {
    color: #071018;
    border-color: #38bdf8;
    background: #38bdf8;

    box-shadow:
        0 5px 18px rgba(56, 189, 248, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transform: translateY(-2px);
    outline: none;
}

/* Clic */

.content .labels a:active,
nav.labels a:active {
    transform: translateY(0);
}

/* Affichage mobile */

@media (max-width: 600px) {
    .content .labels,
    nav.labels {
        gap: 7px;
        margin: 18px auto;
        padding: 12px 9px;
        border-radius: 11px;
    }

    .content .labels a,
    nav.labels a {
        min-height: 34px;
        padding: 7px 11px;
        font-size: 12px;
    }
}
.engine-navigation-title {
    width: 100%;
    margin: 14px 0 8px;
    padding: 8px 10px;
    color: #38bdf8;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    border-top: 1px solid #29354a;
    border-bottom: 1px solid #29354a;
    background: rgba(56, 189, 248, 0.07);
}

.engine-navigation-title:first-child {
    margin-top: 0;
}