/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --primary: #2563eb;
    --text: #1e293b;
    --muted: #64748b;
    --bg: #f8fafc;
    --border: #e2e8f0;
    --radius: 8px;
    --max-w: 1100px;
    --content-w: 740px;
}
body { font-family: system-ui, -apple-system, sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; }
a { color: var(--primary); }
img { max-width: 100%; height: auto; }

/* ── Nav ── */
.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 510; /* > overlay (490) pour que le tiroir reste cliquable */
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.logo-qcms-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px; display: block; }
.logo-name { font-weight: 700; font-size: 1.05rem; color: var(--text); }

/* Hamburger — caché sur desktop */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: .45rem;
    background: none;
    border: none;
    flex-shrink: 0;
    z-index: 520;
    position: relative;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .3s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sub-toggle — caché sur desktop */
.sub-toggle { display: none; }

/* Menu principal (desktop : flex horizontal) */
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-left: auto; /* pousse le menu vers la droite */
    flex-wrap: wrap;
}
.nav-menu > li { position: relative; list-style: none; }
.nav-menu > li > a {
    display: block;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .45rem .8rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.nav-menu > li > a:hover,
.nav-menu > li.active > a { background: #f1f5f9; color: var(--primary); }
.nav-menu > li.active > a { font-weight: 600; }

/* Flèche ▾ sur les parents desktop */
.nav-menu > li.has-children > a::after {
    content: '▾';
    font-size: .6rem;
    margin-left: .3rem;
    opacity: .5;
    vertical-align: middle;
}

/* Dropdown desktop — niveau 2 (apparaît sous le top-nav) */
.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: .35rem 0;
    min-width: 210px;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    list-style: none;
    z-index: 100;
}
.nav-menu > li:hover > .sub-menu { display: block; }
.sub-menu li { list-style: none; position: relative; }
.sub-menu a {
    display: block;
    padding: .55rem 1rem;
    color: var(--text);
    font-size: .875rem;
    text-decoration: none;
    transition: background .12s;
    border-bottom: 1px solid var(--border);
}
.sub-menu li:last-child > a { border-bottom: none; }
.sub-menu a:hover { background: #f1f5f9; color: var(--primary); }

/* Flèche › sur les items parents dans les sous-menus */
.sub-menu li.has-children > a::after {
    content: '›';
    float: right;
    margin-left: .5rem;
    opacity: .5;
    font-size: 1rem;
    line-height: 1;
}

/* Flyout niveau 3+ : apparaît à droite du parent */
.sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: -3px;         /* aligne avec la bordure top */
    left: 100%;
    border-top: 2px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    box-shadow: 4px 4px 20px rgba(0,0,0,.10);
}
.sub-menu li:hover > .sub-menu { display: block; }

/* Flyout ouvert par JS (desktop hover fiable + débordement viewport) */
.sub-menu .sub-menu.js-open { display: block; }
.sub-menu li.flyout-left > .sub-menu {
    left: auto;
    right: 100%;
    border-radius: var(--radius) 0 var(--radius) var(--radius);
}

/* Overlay (drawer backdrop) */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 490;
}
.nav-overlay.open { display: block; animation: navFadeIn .22s ease; }
@keyframes navFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Main ── */
#main { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem 1.5rem; min-height: 60vh; }

/* ── Hero ── */
.hero { text-align: center; padding: 3rem 1rem; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .75rem; }
.hero .subtitle { color: var(--muted); font-size: 1.1rem; }

/* ── Page content ── */
.page-content, .single-post { max-width: var(--content-w); margin: 0 auto; }
.page-header h1, .post-header h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .75rem; }
.content-body, .post-body { margin-top: 1.5rem; }
.content-body h2, .post-body h2 { font-size: 1.4rem; margin: 1.75rem 0 .75rem; }
.content-body h3, .post-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.content-body p, .post-body p { margin-bottom: 1rem; }
.content-body ul, .post-body ul, .content-body ol, .post-body ol { margin: .75rem 0 1rem 1.5rem; }

/* ── Blog listing ── */
.blog-listing .page-header { margin-bottom: 1.5rem; }
.category-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.category-nav a { background: #e2e8f0; padding: .3rem .75rem; border-radius: 999px; color: var(--text); text-decoration: none; font-size: .85rem; }
.category-nav a:hover { background: var(--primary); color: #fff; }
.posts-list { display: grid; gap: 1.25rem; }
.post-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.post-card h2, .post-card h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.post-card h2 a, .post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--primary); }
.post-meta { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; display: flex; gap: .75rem; }
.cat-link { color: var(--primary); }
.excerpt { color: var(--muted); font-size: .9rem; margin: .4rem 0; }
.read-more { font-size: .85rem; color: var(--primary); text-decoration: none; }
.read-more:hover { text-decoration: underline; }

/* ── Latest posts grid ── */
.latest-posts { margin-top: 3rem; }
.latest-posts h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* ── Post ── */
.post-meta time { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.post-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* ── Buttons ── */
.btn { display: inline-block; padding: .6rem 1.2rem; border-radius: 6px; text-decoration: none; font-size: .9rem; font-weight: 500; }
a.btn, button.btn { background: var(--primary); color: #fff; border: none; cursor: pointer; }
a.btn:hover, button.btn:hover { opacity: .9; }

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--border); background: #fff; margin-top: 4rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem; color: var(--muted); font-size: .875rem; }

/* ── Error page ── */
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 2rem; margin-bottom: 1rem; }

/* ── Pagination ── */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 2rem 0; }
.page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none; font-size: .875rem; transition: background .15s; }
.page-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; pointer-events: none; }
/* ── Category editorial blocks ── */
.cat-content { background: var(--bg); border-radius: 8px; padding: 1.5rem 1.75rem; margin: 1.5rem 0; line-height: 1.75; }
.cat-content h2, .cat-content h3 { color: var(--primary); }

/* ══ Layouts avec barre latérale ═══════════════════════════════════════════ */

/* Conteneur avec sidebar — remplace #main pour les pages qui en ont une */
#main.with-sidebar {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    min-height: 60vh;
    display: grid;
    gap: 2.5rem;
    align-items: start;
}
#main.with-sidebar.layout-sidebar-right { grid-template-columns: 1fr 300px; }
#main.with-sidebar.layout-sidebar-left  { grid-template-columns: 300px 1fr; }
#main.with-sidebar.layout-sidebar-left  .main-content { order: 2; }
#main.with-sidebar.layout-sidebar-left  .sidebar       { order: 1; }

/* Reset padding/max-width quand le contenu est dans .main-content */
#main.with-sidebar .main-content > .page-content,
#main.with-sidebar .main-content > .single-post,
#main.with-sidebar .main-content > .blog-listing { max-width: none; }

@media (max-width: 820px) {
    #main.with-sidebar { display: block; }
    #main.with-sidebar .main-content { order: 1 !important; }
    #main.with-sidebar .sidebar      { order: 2 !important; margin-top: 2rem; }
}

/* ── Sidebar styles ─────────────────────────────────────────────────────── */
.sidebar { min-width: 0; }

.sidebar-widget {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.sidebar-widget-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--primary);
}

.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li {
    padding: .4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a { color: var(--text); text-decoration: none; transition: color .12s; }
.sidebar-list a:hover { color: var(--primary); }

.sidebar-search {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
}
.sidebar-search:focus-within { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.sidebar-search input {
    flex: 1; border: none !important; outline: none !important;
    padding: .5rem .75rem; font-size: .875rem; color: var(--text);
    min-width: 0;
}
.sidebar-search button {
    padding: .5rem .7rem;
    background: var(--primary); color: #fff;
    border: none; cursor: pointer;
    font-size: .85rem; transition: opacity .12s;
}
.sidebar-search button:hover { opacity: .88; }

/* ══ Homepage template ══════════════════════════════════════════════════════ */

/* Reset du main sur la home : les sections gèrent leur propre layout */
body.page-home #main { max-width: none; margin: 0; padding: 0; min-height: 0; }

/* ── Héro ─────────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; text-align: center;
    background: #1e293b; /* fallback sans image */
}
.hp-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transform: scale(1.02); /* léger zoom évite le bord blanc au resize */
}
.hp-hero-overlay { position: absolute; inset: 0; }
.hp-hero-content {
    position: relative; z-index: 1;
    max-width: 820px; padding: 3.5rem 1.5rem; width: 100%;
}
.hp-hero-h1 {
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    font-weight: 800; color: #fff; margin-bottom: 1rem;
    line-height: 1.12;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
    letter-spacing: -.01em;
}
.hp-hero-sub {
    font-size: clamp(.95rem, 2vw, 1.2rem);
    color: rgba(255,255,255,.88); margin-bottom: 2rem;
    line-height: 1.65; text-shadow: 0 1px 8px rgba(0,0,0,.3);
    max-width: 620px; margin-left: auto; margin-right: auto;
}
.hp-hero-cta {
    display: inline-block; padding: .85rem 2.25rem;
    background: var(--primary); color: #fff;
    border-radius: 8px; font-weight: 700; font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(0,0,0,.28);
    transition: opacity .15s, transform .15s;
}
.hp-hero-cta:hover { opacity: .9; transform: translateY(-2px); }

/* ── Sections communes ────────────────────────────────────────────────────── */
.hp-inner { max-width: var(--max-w); margin: 0 auto; padding: 4rem 1.5rem; }
.hp-section-hd {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: 1rem;
    margin-bottom: 1.75rem; flex-wrap: wrap;
}
.hp-section-title { font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 800; color: var(--text); }
.hp-section-cta { font-size: .875rem; color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.hp-section-cta:hover { text-decoration: underline; }

/* ── Section contenu ─────────────────────────────────────────────────────── */
.hp-section-content { background: #fff; }
.hp-content-body { max-width: var(--content-w); margin: 0 auto; }
.hp-content-body h2 { font-size: 1.4rem; margin: 1.75rem 0 .75rem; }
.hp-content-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.hp-content-body p  { margin-bottom: 1rem; }
.hp-content-body ul,
.hp-content-body ol { margin: .75rem 0 1rem 1.5rem; }

/* ── Section articles ────────────────────────────────────────────────────── */
.hp-section-posts { background: var(--bg); }
.hp-posts-grid {
    display: grid;
    grid-template-columns: repeat(var(--hp-cols, 3), 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) { .hp-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp-posts-grid { grid-template-columns: 1fr; } }

.hp-post-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .18s, transform .18s;
}
.hp-post-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.09); transform: translateY(-2px); }
.hp-post-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg); }
.hp-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hp-post-card:hover .hp-post-thumb img { transform: scale(1.04); }
.hp-post-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; gap: .45rem; }
.hp-post-meta { display: flex; align-items: center; gap: .5rem; font-size: .77rem; color: var(--muted); flex-wrap: wrap; }
.hp-post-cat { color: var(--primary); text-decoration: none; font-weight: 600; }
.hp-post-cat:hover { text-decoration: underline; }
.hp-post-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.hp-post-title a { color: var(--text); text-decoration: none; }
.hp-post-title a:hover { color: var(--primary); }
.hp-post-excerpt { font-size: .875rem; color: var(--muted); line-height: 1.6; flex: 1; }
.hp-post-read { font-size: .82rem; color: var(--primary); text-decoration: none; font-weight: 600; margin-top: auto; }
.hp-post-read:hover { text-decoration: underline; }

/* ── Section catégories ──────────────────────────────────────────────────── */
.hp-section-cats { background: #fff; }
.hp-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.hp-cat-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1.5rem 1rem; border: 1.5px solid var(--border); border-radius: 12px;
    text-decoration: none; color: var(--text); background: #fff;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.hp-cat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 18px rgba(37,99,235,.1);
    transform: translateY(-3px);
}
.hp-cat-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; margin-bottom: .85rem; }
.hp-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-cat-icon { font-size: 2.2rem; margin-bottom: .75rem; }
.hp-cat-name { font-weight: 700; font-size: .93rem; color: var(--text); }
.hp-cat-desc { font-size: .77rem; color: var(--muted); line-height: 1.5; margin-top: .3rem; }

/* ── Bandeau CTA ─────────────────────────────────────────────────────────── */
.hp-cta-inner { text-align: center; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hp-cta-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: .75rem; }
.hp-cta-text {
    font-size: 1rem; opacity: .88; margin-bottom: 1.75rem;
    max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.7;
}
.hp-cta-btn {
    display: inline-block; padding: .8rem 2.1rem;
    border: 2px solid; border-radius: 8px;
    font-weight: 700; font-size: 1rem; text-decoration: none;
    transition: opacity .15s, transform .15s;
}
.hp-cta-btn:hover { opacity: .85; transform: translateY(-2px); }

/* ── Cache bust : version générée automatiquement ─────────────────────── */

/* ══ NAV RESPONSIVE (mobile ≤ 900px) ═══════════════════════════════════════ */
@media (max-width: 900px) {

    /* Hauteur header mobile */
    .nav-inner { padding: 0 .85rem; }

    /* Hamburger visible */
    .nav-toggle { display: flex; }

    /* Sub-toggle visible (accordéon) */
    .sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 46px;
        background: rgba(0,0,0,.04);
        border: none;
        border-left: 1px solid var(--border);
        cursor: pointer;
        color: var(--muted);
        font-size: .95rem;
        flex-shrink: 0;
        transition: background .15s, color .15s;
        padding: 0;
    }
    .sub-toggle:hover,
    .sub-toggle[aria-expanded="true"] { background: rgba(0,0,0,.08); color: var(--primary); }

    /* ══ Tiroir coulissant (drawer) ══ */
    .nav-menu {
        /* Toujours dans le DOM, décalé hors écran par défaut */
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(290px, 82vw);
        background: #fff;
        flex-direction: column;
        padding-top: 60px; /* hauteur header */
        padding-bottom: 2rem;
        z-index: 500;
        box-shadow: 6px 0 32px rgba(0,0,0,.15);
        border-right: 1px solid var(--border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        gap: 0;
        flex-wrap: nowrap;
        margin-left: 0;
    }
    .nav-menu.open { transform: translateX(0); }

    /* Items de premier niveau */
    .nav-menu > li {
        border-bottom: 1px solid var(--border);
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .nav-menu > li > a {
        flex: 1;
        padding: .85rem 1.25rem;
        font-size: .95rem;
        border-radius: 0;
        background: none;
    }
    .nav-menu > li.active > a {
        color: var(--primary);
        background: #eff6ff;
        border-left: 3px solid var(--primary);
        padding-left: calc(1.25rem - 3px);
    }
    /* Pas de flèche ▾ sur mobile (remplacée par le bouton sub-toggle) */
    .nav-menu > li.has-children > a::after { display: none; }

    /* Sous-menus → accordéon (fermés par défaut) */
    .nav-menu .sub-menu {
        position: static;
        display: none;
        flex-direction: column;
        flex-basis: 100%;
        width: 100%;
        border: none;
        border-top: 1px solid var(--border);
        box-shadow: none;
        border-radius: 0;
        background: #f8fafc;
        padding: 0;
        min-width: 0;
    }
    .nav-menu .sub-menu.open { display: flex; }
    .nav-menu .sub-menu li {
        border-bottom: 1px solid var(--border);
        list-style: none;
    }
    .nav-menu .sub-menu li:last-child { border-bottom: none; }
    .nav-menu .sub-menu a {
        padding: .65rem 1.25rem .65rem 2rem;
        color: var(--muted);
        font-size: .875rem;
        border-bottom: none;
    }
    .nav-menu .sub-menu a:hover { background: #e0e7ff; color: var(--primary); }

    /* Sous-menus profonds (niveau 3+) : indentation progressive */
    .nav-menu .sub-menu .sub-menu li a { padding-left: 3.25rem; }
    .nav-menu .sub-menu .sub-menu .sub-menu li a { padding-left: 4.25rem; }

    /* Flex pour les items parents au sein des sous-menus (sub-toggle aligné) */
    .nav-menu .sub-menu li.has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .nav-menu .sub-menu li.has-children > a { flex: 1; }
    .nav-menu .sub-menu li.has-children > .sub-menu { flex-basis: 100%; width: 100%; }

    /* Cacher la flèche › sur mobile (remplacée par le bouton sub-toggle) */
    .sub-menu li.has-children > a::after { display: none; }

    /* ══ Hamburger à DROITE ══ */
    .hamburger-right .nav-inner { flex-direction: row-reverse; }
    .hamburger-right .site-logo { margin-right: auto; }
    .hamburger-right .nav-toggle { margin-left: .3rem; }
    .hamburger-right .nav-menu {
        left: auto;
        right: 0;
        transform: translateX(100%);
        box-shadow: -6px 0 32px rgba(0,0,0,.15);
        border-right: none;
        border-left: 1px solid var(--border);
    }
    .hamburger-right .nav-menu.open { transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   THÈME « matrimonial » — monagencematrimoniale.fr
   Palette romantique : framboise / prune / or, titres serif élégants.
   (Surcharge appliquée après les styles de base du thème default.)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --primary:#1f9bd1;          /* bleu tech */
  --primary-dark:#1671a0;
  --plum:#0b1626;             /* navy tres fonce (header/footer) */
  --gold:#2dd4bf;             /* accent cyan/menthe */
  --gold-soft:#9beedd;
  --text:#1b2733;
  --muted:#5b6b7a;
  --bg:#f2f6fb;
  --card:#ffffff;
  --border:#d8e3ee;
  --radius:14px;
  --max-w:1200px;
  --content-w:920px;
  --serif:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
h1,h2,h3,.logo-name,.hero h1{font-family:var(--serif);color:var(--plum);letter-spacing:.2px}
a{color:var(--primary)}
a:hover{color:var(--primary-dark)}

/* En-tête */
/* En-tête foncé (la vraie classe est .site-nav) */
.site-nav{background:var(--plum)!important;border-bottom:3px solid var(--gold)}
.site-nav .logo-name{color:#fff!important}
.site-nav .site-logo img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.site-nav .nav-toggle span{background:#fff!important}
.nav-menu{background:var(--plum)}           /* panneau mobile foncé aussi */
.nav-menu>li>a{color:#ffffff!important;font-weight:600;letter-spacing:.2px}
.nav-menu>li>a:hover,.nav-menu>li.active>a{background:rgba(255,255,255,.18)!important;color:#f4d98a!important;border-radius:999px}
.nav-menu .sub-menu{background:var(--plum)}
.nav-menu .sub-menu a{color:#fbeef3!important}
.nav-menu .sub-menu a:hover{color:#f4d98a!important}
.logo-qcms-icon{display:none}

/* Héro */
.hero{position:relative;text-align:center;padding:3.5rem 1.25rem;border-radius:var(--radius);
  background:linear-gradient(135deg,#e6f4f8 0%,#d3e9f4 55%,#cfe3f2 100%);margin-bottom:2.5rem;
  border:1px solid var(--border)}
.hero::after{content:'🛡';position:absolute;top:14px;right:22px;font-size:1.4rem;color:var(--primary);opacity:.35}
.hero h1{font-size:clamp(2rem,4.5vw,3rem);margin:0 0 .5rem;color:var(--plum)}
.hero .subtitle{color:var(--primary-dark);font-size:1.15rem;font-style:italic;max-width:640px;margin:0 auto}
.hero .btn,.hero a.btn{margin-top:1.4rem;background:var(--primary);border-radius:999px;padding:.7rem 1.6rem;font-weight:600;box-shadow:0 8px 22px -10px rgba(47,111,176,.5)}
.hero .btn:hover{background:var(--primary-dark)}

/* Boutons */
a.btn,button.btn{background:var(--primary);border-radius:999px}
a.btn:hover,button.btn:hover{background:var(--primary-dark)}

/* Cartes d'articles / grille */
.post-card,.card,.post-grid-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 10px 30px -22px rgba(94,31,58,.45);transition:transform .18s,box-shadow .18s;overflow:hidden}
.post-card:hover,.post-grid-item:hover{transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(94,31,58,.5)}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--primary)}
.read-more,.cat-link{color:var(--primary)}

/* Titres de section */
#main .hp-section-title,.section-title,h2.section-title{position:relative;text-align:center}
.hp-section h2,.section-heading{color:var(--plum)}

/* Catégorie : intro + cartes */
.cat-description{font-size:1.05rem;color:var(--primary-dark);font-style:italic;max-width:760px;margin:.4rem auto 1.5rem;text-align:center}
.cat-content{background:#fff;border:1px solid var(--border);border-left:4px solid var(--gold)}
.cat-content h2,.cat-content h3{color:var(--primary)}

/* Contenu article */
.single-post h2{margin-top:2rem;padding-bottom:.3rem;border-bottom:2px solid var(--gold-soft)}
.single-post h3{color:var(--primary-dark)}
.single-post img,.page-content img{border-radius:var(--radius)}
.single-post figure{margin:1.75rem 0}
.single-post blockquote{border-left:4px solid var(--primary);background:#eaf2fb;padding:1rem 1.25rem;border-radius:0 var(--radius) var(--radius) 0;color:var(--plum)}
.single-post a{text-decoration:underline;text-underline-offset:2px}

/* Pied de page */
.site-footer{background:var(--plum);color:#f3dfe8;border-top:3px solid var(--gold);margin-top:4rem}
.site-footer a{color:#f6d3e0}
.site-footer a:hover{color:#fff}
.footer-inner,.footer-col,.footer-about{color:#e9cdd9}
.site-footer h3,.site-footer .footer-col-title{color:#fff;font-family:var(--serif)}

/* Pagination */
.page-btn:hover,.page-btn.active{background:var(--primary);border-color:var(--primary)}

/* Fil d'Ariane */
.breadcrumb,.breadcrumbs{color:var(--muted)}
.breadcrumb a{color:var(--primary)}

/* ═══════════════ COMPOSANTS ÉDITORIAUX « matrimonial » (home, catégories, contact) ═══════════════ */
.mam-section{max-width:var(--max-w);margin:0 auto;padding:2.6rem 0}
.mam-section>h2,.mam-section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--plum);margin:0 0 .6rem}
.mam-section-head{text-align:center;max-width:760px;margin:0 auto 1.8rem}
.mam-kicker{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:#e5f0fa;padding:.3rem .8rem;border-radius:999px;margin-bottom:.7rem}
.mam-lead{font-size:1.12rem;color:var(--primary-dark);line-height:1.7}
.mam-section p{line-height:1.8;margin:0 0 1.05rem}
.mam-two{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:800px){.mam-two{grid-template-columns:1fr}}

.mam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin:1.4rem 0}
.mam-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 12px 30px -24px rgba(94,31,58,.5);transition:transform .2s,box-shadow .2s}
.mam-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(94,31,58,.55)}
.mam-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e2f5f2,#cfeae8);margin-bottom:.9rem}
.mam-ico svg{width:28px;height:28px;stroke:var(--primary);fill:none;stroke-width:1.8}
.mam-card h3{color:var(--plum);margin:.2rem 0 .5rem;font-size:1.15rem}

.mam-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:1.4rem 0;counter-reset:st}
.mam-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.3rem 1.3rem}
.mam-step::before{counter-increment:st;content:counter(st);position:absolute;top:-16px;left:1.3rem;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px var(--primary)}
.mam-step h3{margin:.4rem 0 .4rem;color:var(--plum);font-size:1.08rem}

.mam-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1.6rem 0}
.mam-stat{text-align:center;background:linear-gradient(135deg,#fff,#eaf2fb);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem 1rem}
.mam-stat .num{font-family:var(--serif);font-size:2rem;color:var(--primary);font-weight:800;line-height:1}
.mam-stat .lab{font-size:.85rem;color:var(--muted);margin-top:.4rem}

.mam-figure{margin:1.8rem 0;text-align:center}
.mam-figure svg{width:100%;height:auto;max-width:920px;border-radius:var(--radius)}
.mam-figure figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem;font-style:italic}

.mam-box{border-radius:var(--radius);padding:1.2rem 1.4rem;margin:1.5rem 0;border:1px solid var(--border);background:#fff;border-left:4px solid var(--gold)}
.mam-box.love{background:#eaf2fb;border-left-color:var(--primary)}
.mam-box.tip{background:#fff8ec;border-left-color:var(--gold)}
.mam-box-t{font-weight:700;color:var(--plum);margin-bottom:.35rem}

.mam-check{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.6rem}
.mam-check li{position:relative;padding-left:2rem;line-height:1.65}
.mam-check li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--gold);font-weight:700;font-size:1rem}

.mam-section table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px -22px rgba(94,31,58,.5)}
.mam-section th{background:var(--plum);color:#fff;text-align:left;padding:.8rem 1rem;font-family:var(--serif)}
.mam-section td{padding:.75rem 1rem;border-top:1px solid var(--border)}
.mam-section tr:nth-child(even) td{background:#fdf3f7}

.mam-faq{margin:1.4rem 0;display:grid;gap:.6rem}
.mam-faq details{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.2rem .4rem}
.mam-faq summary{cursor:pointer;font-weight:700;color:var(--plum);padding:.9rem 1rem;list-style:none}
.mam-faq summary::-webkit-details-marker{display:none}
.mam-faq summary::after{content:'+';float:right;color:var(--primary);font-weight:800}
.mam-faq details[open] summary::after{content:'−'}
.mam-faq details>div{padding:0 1rem 1rem}

.mam-cta{text-align:center;background:linear-gradient(135deg,var(--plum),var(--primary-dark));color:#fff;border-radius:calc(var(--radius) + 6px);padding:2.6rem 1.5rem;margin:2.4rem auto;max-width:var(--max-w)}
.mam-cta h2{color:#fff}
.mam-cta p{color:#f3d9e4;max-width:620px;margin:.4rem auto 1.3rem}
.mam-cta .mam-btn{display:inline-block;background:#fff;color:var(--primary-dark);padding:.8rem 1.8rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .15s}
.mam-cta .mam-btn:hover{transform:translatey(-2px)}

/* ── Dessins animés ── */
@keyframes mam-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mam-draw{to{stroke-dashoffset:0}}
@keyframes mam-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mam-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.mam-float{animation:mam-float 5s ease-in-out infinite}
.mam-pulse{animation:mam-pulse 3.2s ease-in-out infinite;transform-origin:center}
.mam-draw path,.mam-draw circle,.mam-draw line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:mam-draw 2.4s ease forwards}
/* Apparition au défilement (progressive enhancement, sans JS) */
.mam-reveal{animation:mam-fade-up .8s both}
@supports (animation-timeline: view()){
  .mam-reveal{animation:mam-fade-up linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@media (prefers-reduced-motion: reduce){
  .mam-float,.mam-pulse,.mam-draw path,.mam-draw circle,.mam-draw line,.mam-reveal{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
}

/* ═══════════════ RENDU MOINS « BOXED » — plus aéré / éditorial ═══════════════
   Surcharge finale : on retire bordures, ombres et fonds des composants pour
   laisser respirer le texte. On garde de fins filets et des accents de couleur. */

/* Cartes : à plat, sans encadré */
.mam-card{background:transparent;border:none;box-shadow:none;padding:0 0 .2rem}
.mam-card:hover{transform:none;box-shadow:none}
.mam-grid{gap:2rem 2.4rem}
.mam-ico{background:none;width:44px;height:44px;margin-bottom:.5rem}
.mam-ico svg{width:30px;height:30px;stroke:var(--primary)}
.mam-card h3{border-bottom:1px solid var(--border);padding-bottom:.4rem}

/* Encadrés : simple filet à gauche, sans fond marqué */
.mam-box,.mam-box.love,.mam-box.tip{background:transparent;border:none;border-left:3px solid var(--gold);border-radius:0;padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0}
.mam-box.love{border-left-color:var(--primary)}

/* Étapes : sans cadre, juste le numéro et un filet supérieur */
.mam-step{background:transparent;border:none;border-top:2px solid var(--border);border-radius:0;padding:1.4rem 0 0}
.mam-step::before{position:static;display:inline-flex;margin-bottom:.5rem;box-shadow:none}
.mam-steps{gap:1.8rem 2.2rem}

/* Stats : chiffre + libellé, sans boîte */
.mam-stat{background:none;border:none;border-radius:0;padding:.4rem 0}
.mam-stats{gap:1.4rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.4rem 0}

/* Blocs de contenu de catégorie : plus d'encadré, juste du texte */
.cat-content,.cat-content-top,.cat-content-bottom{background:transparent;border:none;border-left:none;padding:0;margin:1.4rem 0}
.cat-description{font-style:italic}

/* Tableaux : épurés, filets fins, pas d'ombre ni de fond */
.mam-section table{box-shadow:none;border-radius:0;background:transparent}
.mam-section th{background:transparent;color:var(--plum);border-bottom:2px solid var(--primary);font-family:var(--serif)}
.mam-section td{border-top:1px solid var(--border)}
.mam-section tr:nth-child(even) td{background:transparent}

/* FAQ : accordéon sans cadre, séparé par des filets */
.mam-faq details{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0}
.mam-faq summary{padding:.9rem 0}
.mam-faq details>div{padding:0 0 1rem}

/* Cartes d'articles (listes de catégorie + home) : à plat, séparées par un filet */
.post-card,.post-list-item,.post-grid-item,.card{background:transparent!important;border:none!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;padding:1.4rem 0!important}
.post-card:hover,.post-list-item:hover,.post-grid-item:hover{transform:none!important;box-shadow:none!important}
.post-list-item img,.post-card img,.post-grid-item img{border-radius:10px}

/* Article : contenu fluide, images et citations moins « encadrées » */
.single-post,.page-content{max-width:820px}
.single-post blockquote{background:transparent;border-radius:0;border-left:3px solid var(--primary);padding:.2rem 0 .2rem 1.2rem}
.single-post figure{margin:1.6rem 0}

/* Sommaire (plugin) : le rendre discret plutôt qu'une grosse boîte, si présent */
.qcms-toc,.sommaire,#sommaire{background:transparent!important;border:none!important;border-left:3px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;padding:.4rem 0 .4rem 1rem!important}

/* Tiroir mobile foncé : séparateurs et sous-menus lisibles */
@media (max-width: 900px){
  .nav-menu{background:var(--plum)!important}
  .nav-menu>li{border-bottom:1px solid rgba(255,255,255,.14)!important}
  .nav-menu .sub-menu{background:rgba(0,0,0,.18)!important;border:none!important;box-shadow:none!important}
  .nav-menu .sub-menu a{color:#fbeef3!important}
  .sub-toggle{background:rgba(255,255,255,.10)!important;border-left:1px solid rgba(255,255,255,.14)!important;color:#fff!important}
  .sub-toggle:hover,.sub-toggle[aria-expanded="true"]{background:rgba(255,255,255,.2)!important;color:#f4d98a!important}
}

/* ── Correctif menu déroulant : supprimer l'espace de survol (liens cliquables) ── */
.nav-menu>li>.sub-menu{top:100%!important;padding-top:.4rem;margin-top:0;z-index:600!important}
.nav-menu .sub-menu{border-top:2px solid var(--gold)}
.nav-menu .sub-menu a{color:#eaf2fb!important}
.nav-menu .sub-menu a:hover{color:#9beedd!important;background:rgba(255,255,255,.12)!important}

/* Pied de page : présentation + liens légaux */
.site-footer .footer-inner{display:flex;flex-direction:column;gap:.7rem;align-items:center;text-align:center;padding:2rem 1.5rem}
.footer-about{max-width:640px;color:#cfe0f4;margin:0}
.footer-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;justify-content:center}
.footer-legal a{color:#9beedd;text-decoration:none;font-weight:600;font-size:.9rem}
.footer-legal a:hover{color:#fff;text-decoration:underline}
.footer-copy{color:#9fb6cf;font-size:.85rem;margin:.3rem 0 0}

/* ── Largeur desktop élargie (moins « boxed »), texte et contenus plus larges ── */
:root{--max-w:1200px}
#main{max-width:var(--max-w)}
.page-content{max-width:var(--max-w)!important}     /* pages : pleine largeur */
.content-body{max-width:none!important}
.single-post{max-width:920px!important}             /* articles : large mais lisible */
.mam-section{max-width:var(--max-w)}
/* les blocs de contenu de catégorie et le corps d'article occupent toute la largeur */
.cat-content,.cat-content-top,.cat-content-bottom{max-width:none}
.category-page,.blog-listing{max-width:var(--max-w);margin:0 auto}

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME CYBER ANIMÉ (v3) — identité plus marquée, animations CSS/SMIL pures
   (aucun JavaScript, compatible CSP). Respecte prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --cy:#2dd4bf; --cy2:#1f9bd1; --ink:#0b1626; --ink2:#12233a;
  --glow:0 0 0 1px rgba(45,212,191,.35),0 10px 40px -12px rgba(45,212,191,.45);
}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(1200px 500px at 85% -10%,rgba(31,155,209,.07),transparent 60%),
  radial-gradient(900px 420px at -5% 30%,rgba(45,212,191,.06),transparent 60%),
  var(--bg)}
::selection{background:var(--cy);color:var(--ink)}

/* ── Barre de lecture (CSS pur, scroll-driven) ── */
@supports (animation-timeline: scroll()){
  body::before{content:'';position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;
    background:linear-gradient(90deg,var(--cy),var(--cy2),#7c5cff);transform-origin:0 50%;transform:scaleX(0);
    animation:v3-read linear both;animation-timeline:scroll(root)}
  @keyframes v3-read{to{transform:scaleX(1)}}
}

/* ── Navigation : filet lumineux animé + soulignement glissant ── */
.site-nav{background:rgba(11,22,38,.92)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:0!important;position:sticky}
.site-nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cy),var(--cy2),var(--cy),transparent);
  background-size:200% 100%;animation:v3-flow 6s linear infinite}
@keyframes v3-flow{to{background-position:-200% 0}}
.nav-menu>li>a{position:relative;background:none!important;border-radius:0!important}
.nav-menu>li>a::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
  background:var(--cy);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease}
.nav-menu>li>a:hover::after,.nav-menu>li.active>a::after{transform:scaleX(1)}
.nav-menu>li>a:hover,.nav-menu>li.active>a{color:var(--cy)!important}
.nav-menu .sub-menu{border-top:2px solid var(--cy);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);animation:v3-drop .22s ease both}
@keyframes v3-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── HÉRO d'accueil : couches animées ── */
.hp-hero{isolation:isolate;background:radial-gradient(900px 500px at 70% 20%,#12304d 0%,#0b1626 60%,#060d18 100%)}
.hp-hero-bg{animation:v3-ken 32s ease-in-out infinite alternate;will-change:transform}
@keyframes v3-ken{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-2.2%,-1.6%,0)}}
.hp-hero-overlay{background:linear-gradient(180deg,rgba(6,13,24,.55) 0%,rgba(8,18,32,.78) 70%,rgba(8,18,32,.95) 100%)!important}
.hp-hero-grid,.hp-hero-scan,.hp-hero-net,.hp-hero-glow{position:absolute;inset:0;pointer-events:none}
/* grille en perspective qui défile */
.hp-hero-grid{top:auto;height:62%;bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%)}
.hp-hero-grid::before{content:'';position:absolute;left:-50%;right:-50%;top:0;bottom:-40%;
  background-image:linear-gradient(rgba(45,212,191,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.28) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 0;
  animation:v3-grid 5s linear infinite}
@keyframes v3-grid{to{background-position:0 64px,0 0}}
/* faisceau de balayage */
.hp-hero-scan::before{content:'';position:absolute;top:0;bottom:0;width:34%;left:-40%;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.14) 45%,rgba(45,212,191,.32) 50%,rgba(45,212,191,.14) 55%,transparent);
  animation:v3-sweep 9s ease-in-out infinite}
@keyframes v3-sweep{0%{left:-40%}55%,100%{left:110%}}
.hp-hero-scan::after{content:'';position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.7),transparent);box-shadow:0 0 24px 4px rgba(45,212,191,.35);
  animation:v3-line 7s linear infinite}
@keyframes v3-line{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
/* halos dérivants */
.hp-hero-glow::before,.hp-hero-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.hp-hero-glow::before{width:420px;height:420px;left:6%;top:10%;background:rgba(31,155,209,.55);animation:v3-drift 16s ease-in-out infinite alternate}
.hp-hero-glow::after{width:380px;height:380px;right:4%;bottom:0;background:rgba(45,212,191,.40);animation:v3-drift 19s ease-in-out infinite alternate-reverse}
@keyframes v3-drift{to{transform:translate3d(60px,-40px,0) scale(1.15)}}
.hp-hero-net svg{width:100%;height:100%;opacity:.85}
.hp-hero-net .ln{stroke:rgba(45,212,191,.35);stroke-width:1;stroke-dasharray:6 8;animation:v3-dash 3.5s linear infinite}
@keyframes v3-dash{to{stroke-dashoffset:-56}}
.hp-hero-content{z-index:3}
.hp-hero-h1{background:linear-gradient(100deg,#fff 0%,#fff 35%,var(--cy) 50%,#fff 65%,#fff 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;animation:v3-up .9s ease both,v3-shine 7s ease-in-out 1.2s infinite}
@keyframes v3-shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes v3-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hp-hero-sub{animation:v3-up .9s .15s ease both}
.hp-hero-cta{position:relative;background:linear-gradient(135deg,var(--cy2),var(--cy))!important;color:var(--ink)!important;
  animation:v3-up .9s .3s ease both;overflow:hidden;box-shadow:var(--glow)!important}
.hp-hero-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:v3-shimmer 3.6s ease-in-out 1.6s infinite}
@keyframes v3-shimmer{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.hp-hero-cta::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--cy);opacity:0;animation:v3-ring 2.8s ease-out 1s infinite}
@keyframes v3-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.hp-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--cy),var(--cy2),transparent);background-size:200% 100%;animation:v3-flow 5s linear infinite}

/* ── Apparition au défilement des sections ── */
@supports (animation-timeline: view()){
  .hp-section-hd,.hp-post-card,.mam-card,.mam-step,.mam-stat,.mam-box,.mam-faq details,.mam-figure,.mam-photo{
    animation:v3-in linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  @keyframes v3-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* ── Titres : trait animé ── */
.hp-section-title,.mam-section-head h2{position:relative;display:inline-block}
.hp-section-title::after,.mam-section-head h2::after{content:'';display:block;height:3px;width:56px;margin:.5rem auto 0;border-radius:3px;
  background:linear-gradient(90deg,var(--cy),var(--cy2));animation:v3-bar 3.2s ease-in-out infinite alternate}
@keyframes v3-bar{from{width:36px}to{width:120px}}
.single-post h2{border-bottom:0;position:relative;padding:0 0 .5rem}
.single-post h2::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:64px;border-radius:3px;
  background:linear-gradient(90deg,var(--cy),var(--cy2));transition:width .5s ease}
.single-post h2:hover::after{width:100%}
.mam-kicker{background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(31,155,209,.16));color:var(--primary-dark);border:1px solid rgba(45,212,191,.35)}

/* ── Cartes d'articles ── */
.hp-post-card,.post-card,.post-list-item,.post-grid-item{position:relative;transition:transform .3s ease}
.hp-post-card:hover,.post-card:hover,.post-list-item:hover,.post-grid-item:hover{transform:translateY(-4px)!important}
.hp-post-thumb{overflow:hidden;border-radius:12px}
.hp-post-thumb img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hp-post-card:hover .hp-post-thumb img{transform:scale(1.08)}
.hp-post-read{display:inline-block;transition:transform .25s}
.hp-post-card:hover .hp-post-read{transform:translateX(6px);color:var(--cy2)}

/* ── Composants éditoriaux ── */
.mam-ico svg{stroke:var(--cy2);transition:transform .5s ease,stroke .3s}
.mam-card:hover .mam-ico svg{transform:rotate(-8deg) scale(1.15);stroke:var(--cy)}
.mam-card{position:relative;padding:1.2rem 1.3rem 1.2rem!important;border-radius:14px;transition:transform .3s,background .3s,box-shadow .3s}
.mam-card:hover{background:rgba(255,255,255,.75)!important;box-shadow:var(--glow)!important;transform:translateY(-5px)!important}
.mam-step{position:relative;border-top:0!important;padding:1.4rem 0 0 0}
.mam-step::after{content:'';position:absolute;top:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--cy),var(--cy2) 60%,transparent);transform-origin:0 50%}
.mam-stat .num{background:linear-gradient(120deg,var(--cy2),var(--cy),var(--cy2));background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:v3-shine 6s ease-in-out infinite}
.mam-box,.mam-box.tip,.mam-box.love{border-left:3px solid var(--cy)!important;background:linear-gradient(90deg,rgba(45,212,191,.09),transparent 70%)!important;
  padding:.9rem 1.2rem!important;border-radius:0 12px 12px 0}
.mam-figure{position:relative}
.mam-figure svg{box-shadow:0 20px 50px -30px rgba(11,22,38,.5);border:1px solid rgba(31,155,209,.18)}
.mam-photo img{width:100%;max-width:920px;height:auto;border-radius:16px;box-shadow:0 26px 60px -34px rgba(11,22,38,.7);
  transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.mam-photo:hover img{transform:scale(1.015);box-shadow:0 34px 70px -30px rgba(31,155,209,.55)}
.post-featured-image{position:relative;border-radius:16px!important;box-shadow:0 28px 70px -36px rgba(11,22,38,.75)}
.post-featured-image img{animation:v3-ken2 22s ease-in-out infinite alternate}
@keyframes v3-ken2{from{transform:scale(1)}to{transform:scale(1.06)}}
.mam-faq summary{position:relative;list-style:none;cursor:pointer;transition:color .25s}
.mam-faq summary::-webkit-details-marker{display:none}
.mam-faq summary::after{content:'+';position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--cy2);transition:transform .35s}
.mam-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.mam-faq summary:hover{color:var(--cy2)}

/* ── CTA : dégradé mouvant + halo ── */
.mam-cta{position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(120deg,#0b1626,#12304d,#0f4c6b,#0b1626)!important;background-size:300% 100%;animation:v3-bg 14s ease-in-out infinite alternate;
  box-shadow:0 30px 70px -36px rgba(31,155,209,.7)}
@keyframes v3-bg{to{background-position:100% 0}}
.mam-cta::before{content:'';position:absolute;width:320px;height:320px;right:-80px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(45,212,191,.45),transparent 65%);animation:v3-drift 9s ease-in-out infinite alternate}
.mam-cta .mam-btn{position:relative;background:linear-gradient(135deg,var(--cy),#8cf2e4)!important;color:var(--ink)!important;box-shadow:var(--glow);transition:transform .25s,box-shadow .25s}
.mam-cta .mam-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 1px rgba(45,212,191,.6),0 18px 40px -10px rgba(45,212,191,.7)}

/* ── Pied de page ── */
.site-footer{position:relative;border-top:0;background:linear-gradient(180deg,#0b1626,#060d18)}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cy),var(--cy2),transparent);background-size:200% 100%;animation:v3-flow 7s linear infinite}

/* ── Mobile : on allège ── */
@media(max-width:760px){
  .hp-hero-grid,.hp-hero-scan::before{display:none}
  .hp-hero-glow::before,.hp-hero-glow::after{width:240px;height:240px}
  .mam-photo img{border-radius:12px}
}
/* ── Accessibilité : mouvement réduit ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hp-hero-h1{-webkit-text-fill-color:#fff;color:#fff;background:none}
  .mam-stat .num{-webkit-text-fill-color:currentColor;background:none;color:var(--cy2)}
}

@media(min-width:901px){.nav-menu{background:transparent!important}}

/* Tiroir mobile : pas de backdrop-filter (il rendrait le menu fixe relatif à la barre) */
@media(max-width:900px){.site-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0b1626!important}}

.nav-menu>li.active>a,.nav-menu>li>a:hover{background:none!important}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO ANIMÉ COMMUN (pages, blog, rubriques, articles) + cartes d'extraits
   ═══════════════════════════════════════════════════════════════════════════ */
body{overflow-x:clip}
.ph-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;width:100vw;margin-left:calc(50% - 50vw);margin-top:0;margin-bottom:2.4rem;
  background:radial-gradient(900px 500px at 75% 15%,#12304d 0%,#0b1626 60%,#060d18 100%)}
.ph-hero .ph-bg{background-size:cover;background-position:center;opacity:.9}
.ph-hero .ph-overlay{background:linear-gradient(100deg,rgba(6,13,24,.88) 0%,rgba(8,18,32,.72) 55%,rgba(8,18,32,.55) 100%)!important}
.ph-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:linear-gradient(90deg,transparent,var(--cy),var(--cy2),transparent);background-size:200% 100%;animation:v3-flow 5s linear infinite}
.ph-hero .hp-hero-grid{height:55%}
.ph-inner{position:relative;z-index:3;max-width:var(--max-w);margin:0 auto;padding:3.6rem 1.5rem 3.9rem;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2.6rem;align-items:center}
.ph-noconsole .ph-inner{grid-template-columns:minmax(0,1fr)}
.ph-compact .ph-inner{padding:2.4rem 1.5rem 2.6rem}
.ph-text{animation:v3-up .8s ease both}
.ph-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .55rem;margin:0 0 1rem;padding:0;font-size:.8rem;color:#9fb6cf}
.ph-crumbs li:not(:last-child)::after{content:'›';margin-left:.55rem;color:var(--cy)}
.ph-crumbs a{color:#cfe0f4;text-decoration:none}.ph-crumbs a:hover{color:var(--cy);text-decoration:underline}
.ph-kicker{display:inline-block;margin-bottom:.9rem;padding:.28rem .85rem;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#9beedd;background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.4)}
.ph-h1{margin:0 0 .9rem;color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.12;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.4);border:0;padding:0}
.ph-compact .ph-h1{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.ph-lead{margin:0 0 1.5rem;max-width:660px;color:#d7e6f5;font-size:clamp(.98rem,1.7vw,1.15rem);line-height:1.65}
.ph-meta{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:0 0 .4rem;font-size:.82rem;color:#cfe0f4}
.ph-meta span,.ph-meta a{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#e6f0fb;text-decoration:none}
.ph-meta a:hover{border-color:var(--cy);color:#fff}
.ph-cta{margin-top:.2rem}
/* console décorative */
.ph-console{background:rgba(8,18,32,.78);border:1px solid rgba(45,212,191,.35);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(31,155,209,.15),var(--glow);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;animation:v3-up .9s .2s ease both;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ph-console-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .95rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.ph-console-bar i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.ph-console-bar i:nth-child(2){background:#ffd166}.ph-console-bar i:nth-child(3){background:var(--cy)}
.ph-console-bar span{margin-left:auto;font-size:.72rem;color:#8fa9c4}
.ph-console-body{padding:.7rem .4rem .9rem}
.ph-row{display:grid;grid-template-columns:14px minmax(0,1fr) 84px;gap:.7rem;align-items:center;padding:.5rem .95rem}
.ph-row .led{width:9px;height:9px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:ph-led 1.8s ease-in-out infinite;animation-delay:calc(var(--i)*.35s)}
.ph-row b{font-weight:600;font-size:.82rem;color:#d7e6f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .bar{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.ph-row .bar u{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--cy));animation:ph-fill 7s ease-in-out infinite;animation-delay:calc(var(--i)*.8s)}
.ph-status{position:relative;height:1.5rem;margin:.55rem .95rem 0;padding-top:.55rem;border-top:1px dashed rgba(255,255,255,.14);font-size:.76rem;color:var(--cy)}
.ph-status span{position:absolute;left:0;top:.55rem;opacity:0}
.ph-status .s1{animation:ph-st 9s infinite}.ph-status .s2{animation:ph-st 9s 3s infinite}.ph-status .s3{animation:ph-st 9s 6s infinite;color:#fff}
.ph-status span::after{content:'▍';margin-left:2px;animation:ph-caret 1s steps(2) infinite}
@keyframes ph-led{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ph-fill{0%{width:4%}45%{width:92%}60%{width:92%}100%{width:4%}}
@keyframes ph-st{0%{opacity:0}4%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes ph-caret{to{visibility:hidden}}
@media(max-width:900px){
  .ph-inner{grid-template-columns:minmax(0,1fr);padding:2.4rem 1.2rem 2.7rem}
  .ph-console{display:none}
}
/* ═════ Cartes d'extraits ═════ */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.7rem;margin:1.6rem 0 2.2rem}
.ex-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(11,22,38,.04),0 18px 36px -26px rgba(11,22,38,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.ex-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--cy),var(--cy2));transform:scaleX(0);transform-origin:0 50%;transition:transform .45s ease}
.ex-card:hover{transform:translateY(-7px);border-color:rgba(45,212,191,.55);box-shadow:0 2px 4px rgba(11,22,38,.05),0 34px 60px -28px rgba(31,155,209,.55)}
.ex-card:hover::before{transform:scaleX(1)}
.ex-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;line-height:0;background:linear-gradient(135deg,#12304d,#0b1626)}
.ex-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ex-card:hover .ex-thumb img{transform:scale(1.07)}
.ex-thumb::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(6,13,24,.55));pointer-events:none}
.cat-tag{position:absolute;left:.85rem;top:.85rem;z-index:2;padding:.22rem .7rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  color:#9beedd;background:rgba(11,22,38,.82);border:1px solid rgba(45,212,191,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cat-tag-flat{position:static;display:inline-block;margin:1.1rem 1.25rem 0;align-self:flex-start}
.ex-body{display:flex;flex-direction:column;flex:1;gap:.6rem;padding:1.15rem 1.3rem 1.2rem}
.ex-card h2{margin:0;font-size:1.1rem;line-height:1.32;font-weight:800;border:0;padding:0}
.ex-card h2 a{color:var(--ink,#0b1626);text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-card h2 a::after{content:'';position:absolute;inset:0;z-index:2}
.ex-card:hover h2 a{color:var(--primary-dark)}
.ex-card .excerpt{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:.85rem;border-top:1px dashed var(--border)}
.ex-meta{font-size:.76rem;color:var(--muted)}
.ex-card .read-more{position:relative;z-index:3;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .95rem;border-radius:999px;font-weight:700;font-size:.8rem;text-decoration:none;
  color:var(--ink,#0b1626);background:linear-gradient(135deg,rgba(45,212,191,.2),rgba(31,155,209,.18));border:1px solid rgba(45,212,191,.4);transition:background .3s,color .3s,gap .3s}
.ex-card .read-more i{font-style:normal;transition:transform .3s}
.ex-card:hover .read-more{background:linear-gradient(135deg,var(--cy),#8cf2e4);gap:.65rem}
.ex-card:hover .read-more i{transform:translateX(3px)}
@media(min-width:1000px){
  .ex-grid>.ex-card:first-child{grid-column:1/-1;flex-direction:row}
  .ex-grid>.ex-card:first-child .ex-thumb{flex:0 0 54%;aspect-ratio:auto;min-height:300px}
  .ex-grid>.ex-card:first-child .ex-body{justify-content:center;padding:2rem 2.2rem;gap:.9rem}
  .ex-grid>.ex-card:first-child h2{font-size:1.65rem}
  .ex-grid>.ex-card:first-child .excerpt{font-size:1rem;-webkit-line-clamp:5}
}
.blog-listing .category-nav,.category-page .category-nav{gap:.55rem;margin-bottom:1.2rem}
.category-nav a{background:#fff;border:1px solid var(--border);font-weight:600;transition:all .25s}
.category-nav a:hover{background:var(--ink,#0b1626);color:var(--cy);border-color:var(--ink,#0b1626);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.ph-row .bar u{width:70%}.ph-status .s3{opacity:1}}

/* ── Hero avec formulaire (page contact) ── */
.ph-withaside .ph-inner{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start;padding-top:3rem;padding-bottom:3.2rem}
.ph-aside{background:#fff;color:var(--text);border-radius:22px;padding:1.5rem 1.5rem 1.3rem;box-shadow:0 40px 80px -36px rgba(0,0,0,.85),0 0 0 1px rgba(45,212,191,.35);animation:v3-up .9s .2s ease both;position:relative}
.ph-aside::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,var(--cy),var(--cy2))}
.ph-aside-t{margin:.1rem 0 .2rem;font-size:1.3rem;color:var(--ink);border:0;padding:0}
.ph-aside-s{margin:0 0 .8rem;color:var(--muted);font-size:.9rem}
.ph-aside .qcms-form-wrap{margin:0}
.ph-aside .qcms-input{border-radius:10px;padding:.62rem .8rem;border-color:var(--border)}
.ph-aside .qcms-input:focus{border-color:var(--cy2);box-shadow:0 0 0 4px rgba(31,155,209,.15)}
.ph-aside .qcms-label{color:var(--ink);font-size:.82rem}
.ph-aside .qcms-form .qcms-row{margin-bottom:.65rem;gap:.6rem}
.ph-aside .qcms-submit{width:100%;justify-content:center;padding:.85rem 1.4rem;border-radius:999px;background:linear-gradient(135deg,var(--cy2),var(--cy));color:var(--ink);font-weight:800;box-shadow:0 14px 30px -12px rgba(45,212,191,.7);transition:transform .25s,box-shadow .25s}
.ph-aside .qcms-submit:hover{background:linear-gradient(135deg,var(--cy2),var(--cy));transform:translateY(-2px);box-shadow:0 20px 38px -12px rgba(45,212,191,.85)}
@media(max-width:900px){.ph-withaside .ph-inner{grid-template-columns:minmax(0,1fr)}.ph-aside{padding:1.2rem}}

/* ── Home : cartes de rubriques en photo ── */
.hp-cats-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.3rem}
.hp-cat-card{position:relative;align-items:stretch;justify-content:flex-end;text-align:left;min-height:230px;padding:1.2rem 1.3rem!important;overflow:hidden;border:1px solid rgba(11,22,38,.12)!important;border-radius:20px!important;
  background:linear-gradient(135deg,#12304d,#0b1626)!important;box-shadow:0 20px 44px -28px rgba(11,22,38,.7);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.hp-cat-card:hover{transform:translateY(-7px)!important;box-shadow:0 34px 60px -26px rgba(31,155,209,.65)!important;border-color:rgba(45,212,191,.7)!important}
.hp-cat-img{position:absolute!important;inset:0;width:auto!important;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;z-index:0}
.hp-cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hp-cat-card:hover .hp-cat-img img{transform:scale(1.09)}
.hp-cat-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,24,.05) 20%,rgba(6,13,24,.88) 100%)}
.hp-cat-card::after{content:'→';position:absolute;right:1rem;top:1rem;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(11,22,38,.7);color:var(--cy);font-weight:800;border:1px solid rgba(45,212,191,.5);transition:transform .3s,background .3s,color .3s}
.hp-cat-card:hover::after{transform:translateX(3px);background:var(--cy);color:var(--ink)}
.hp-cat-name{position:relative;z-index:2;color:#fff!important;font-size:1.15rem!important;line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hp-cat-name::after{content:'';display:block;width:34px;height:3px;margin-top:.5rem;border-radius:3px;background:linear-gradient(90deg,var(--cy),var(--cy2));transition:width .4s}
.hp-cat-card:hover .hp-cat-name::after{width:72px}
.hp-cat-desc{position:relative;z-index:2;color:#d7e6f5!important;font-size:.82rem!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-cat-icon{position:relative;z-index:2;color:#fff}
@media(max-width:760px){.cat-content table,.content-body table,.post-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}

#main:has(.ph-hero){padding-top:0}
@media(max-width:600px){.ph-crumbs li[aria-current]{display:none}.ph-crumbs li:nth-last-child(2)::after{content:''}}

/* ===== Plan du site (plugin plan-du-site) ===== */
.qpds{--_accent:var(--primary,#1f9bd1);--_text:var(--text,#1e293b);--_muted:var(--muted,#64748b);--_border:var(--border,#e2e8f0);max-width:980px;margin:1.5rem auto;box-sizing:border-box}
.qpds *{box-sizing:border-box}
.qpds-intro,.qpds-outro,.qpds-sec-text{color:var(--_text);font-size:1.04rem;line-height:1.85}
.qpds-intro p,.qpds-outro p,.qpds-sec-text p{margin:0 0 1.05rem}
.qpds-sec-text h2,.qpds-outro h2{font-size:1.45rem;line-height:1.3;margin:2.4rem 0 .9rem;padding-bottom:.35rem;border-bottom:2px solid var(--_accent)}
.qpds-sec-text h3,.qpds-outro h3{font-size:1.12rem;line-height:1.35;margin:1.6rem 0 .6rem;color:var(--_accent)}
.qpds-sec-text a,.qpds-intro a,.qpds-outro a{color:var(--_accent);text-decoration:underline;text-underline-offset:2px}
.qpds-sec{margin:0 0 1.2rem}
.qpds-list{list-style:none!important;margin:0;padding:0}
.qpds-sec>.qpds-list{background:#f4f8fc;border:1px solid var(--_border);border-radius:12px;padding:.9rem 1.2rem;margin:.6rem 0 1.6rem}
.qpds-list .qpds-list{margin:.15rem 0 .25rem .9rem;padding-left:.8rem;border-left:2px solid #cfe3f1}
.qpds-item{margin:.18rem 0;padding:0}
.qpds-item::before{content:none!important}
.qpds-item a{color:var(--_muted);text-decoration:none;font-size:.97rem;line-height:1.65;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.qpds-item a:hover{color:var(--_accent);border-bottom-color:var(--_accent)}
.qpds-cat>a{color:var(--_text);font-weight:700}
.qpds-count{color:var(--_muted);font-size:.8rem}
.qpds-posts .qpds-item a{font-size:.92rem}

/* Blog : cartes de rubriques (mode catégories) */
@media(min-width:1000px){.ex-grid.ex-cats{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-grid.ex-cats>.ex-card:first-child{grid-column:auto;flex-direction:column}.ex-grid.ex-cats>.ex-card:first-child .ex-thumb{flex:none;aspect-ratio:16/9;min-height:0}.ex-grid.ex-cats>.ex-card:first-child .ex-body{padding:1.3rem 1.4rem;justify-content:flex-start;gap:.7rem}.ex-grid.ex-cats>.ex-card:first-child h2{font-size:1.1rem}.ex-grid.ex-cats>.ex-card:first-child .excerpt{font-size:.9rem;-webkit-line-clamp:3}}
.ex-cat h2{font-size:1.2rem}

/* Un seul lien par carte (titre) : zone cliquable étendue à toute la carte */
.hp-post-card{position:relative}
.hp-post-title a::after{content:'';position:absolute;inset:0;z-index:2}
.ex-card .read-more,.hp-post-read{pointer-events:none}

.nav-parent{cursor:pointer}
@media(min-width:901px){.nav-menu>li:focus-within>.sub-menu{display:block}}

/* Accueil : rubriques en grille harmonieuse 3 x 2, cartes de même hauteur */
.hp-section-cats .hp-cats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.hp-section-cats .hp-cat-card{min-height:300px;justify-content:flex-end;gap:.15rem}
.hp-section-cats .hp-cat-name{font-size:1.25rem!important}
.hp-section-cats .hp-cat-desc{margin-top:.55rem;-webkit-line-clamp:3;font-size:.86rem!important;line-height:1.5}
.hp-section-cats .hp-cat-count{position:relative;z-index:2;margin-top:.7rem;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cy)}
@media(max-width:999px){.hp-section-cats .hp-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hp-section-cats .hp-cats-grid{grid-template-columns:1fr}.hp-section-cats .hp-cat-card{min-height:240px}}
/* ── Home : tuile infographie animée (rubriques) ───────────────────── */
.hp-section-cats .hp-cats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-section-cats .hp-cat-info{grid-column:span 2;position:relative;display:flex;align-items:center;gap:1rem;min-height:300px;padding:1.4rem 1.6rem;border-radius:20px;overflow:hidden;color:#fff;border:1px solid rgba(45,212,191,.28);
background:radial-gradient(ellipse at 78% 50%,rgba(31,155,209,.28),transparent 62%),linear-gradient(135deg,#0b1626 0%,#12233a 62%,#0e3a56 100%);box-shadow:0 26px 50px -30px rgba(11,22,38,.85)}
.hp-cat-info::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(45,212,191,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,191,.07) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 72%);mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 72%)}
.hp-info-text{position:relative;z-index:2;flex:0 0 42%;max-width:42%}
.hp-info-kicker{margin:0 0 .55rem;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cy,#2dd4bf)}
.hp-info-title{margin:0 0 1.1rem;font-size:1.28rem;line-height:1.28;font-weight:800;color:#fff}
.hp-info-steps{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.hp-info-steps li{display:flex;align-items:center;gap:.65rem;font-size:.95rem;font-weight:600;color:#9fb6cf;opacity:.55;animation:hpiStep 10s ease-in-out infinite}
.hp-info-steps li span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.72rem;font-weight:800;border:1.5px solid rgba(45,212,191,.55);color:#2dd4bf;animation:hpiDot 10s ease-in-out infinite}
.hp-info-steps li:nth-child(2),.hp-info-steps li:nth-child(2) span{animation-delay:2.5s}
.hp-info-steps li:nth-child(3),.hp-info-steps li:nth-child(3) span{animation-delay:5s}
.hp-info-steps li:nth-child(4),.hp-info-steps li:nth-child(4) span{animation-delay:7.5s}
@keyframes hpiStep{0%{opacity:.5;color:#9fb6cf;transform:translateX(0)}4%,22%{opacity:1;color:#fff;transform:translateX(6px)}28%,100%{opacity:.5;color:#9fb6cf;transform:translateX(0)}}
@keyframes hpiDot{0%{background:transparent;color:#2dd4bf;box-shadow:none}4%,22%{background:#2dd4bf;color:#0b1626;box-shadow:0 0 0 5px rgba(45,212,191,.22)}28%,100%{background:transparent;color:#2dd4bf;box-shadow:none}}
.hp-info-svg{position:relative;z-index:1;flex:1 1 auto;min-width:0;height:100%;max-height:300px;align-self:stretch;overflow:visible}
.hp-info-svg .ring,.hp-info-svg .sweep{transform-origin:160px 150px}
.hp-info-svg .sweep{animation:hpiSpin 6s linear infinite}
.hp-info-svg .r1{animation:hpiSpin 14s linear infinite reverse}
.hp-info-svg .r2{animation:hpiSpin 22s linear infinite}
.hp-info-svg .r3{animation:hpiSpin 34s linear infinite reverse}
.hp-info-svg .rg-r1{fill:none;stroke:#2dd4bf;stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:2 7;stroke-linecap:round}
.hp-info-svg .rg-r2{fill:none;stroke:#1f9bd1;stroke-opacity:.7;stroke-width:1.3;stroke-dasharray:16 7}
.hp-info-svg .rg-r3{fill:none;stroke:#2dd4bf;stroke-opacity:.5;stroke-width:1.5}
.hp-info-svg .nd{fill:#2dd4bf;animation:hpiBlink 2.6s ease-in-out infinite}
.hp-info-svg .nd1{fill:#7dd3fc;animation-delay:.9s}
.hp-info-svg .nd2{fill:#fff;animation-delay:1.7s}
.hp-info-svg .halo{fill:none;stroke:#2dd4bf;stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:hpiHalo 3.2s ease-out infinite}
.hp-info-svg .halo.h2{animation-delay:1.6s}
.hp-info-svg .shield{transform-box:fill-box;transform-origin:center;animation:hpiBeat 3.2s ease-in-out infinite}
.hp-info-svg .chk{stroke-dasharray:44;stroke-dashoffset:0;animation:hpiCheck 4s ease-in-out infinite}
.hp-info-svg .st{fill:#cfeaff;animation:hpiBlink 3s ease-in-out infinite}
.hp-info-svg .thr{opacity:0;animation:hpiThreat 5.6s linear infinite}
.hp-info-svg .th{fill:#fb923c}
.hp-info-svg .th-halo{fill:#fb923c;opacity:.28}
.hp-info-svg .burst{fill:none;stroke:#fb923c;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:hpiBurst 5.6s linear infinite}
@keyframes hpiSpin{to{transform:rotate(360deg)}}
@keyframes hpiBlink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hpiHalo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
@keyframes hpiBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hpiCheck{0%{stroke-dashoffset:44}30%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}
@keyframes hpiThreat{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}22%{opacity:1;transform:translate(var(--dx),var(--dy))}23%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes hpiBurst{0%,21%{opacity:0;transform:scale(.3)}23%{opacity:.95;transform:scale(.6)}40%,100%{opacity:0;transform:scale(3.2)}}
@media(max-width:1099px){.hp-section-cats .hp-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hp-section-cats .hp-cats-grid{grid-template-columns:1fr}.hp-section-cats .hp-cat-info{grid-column:auto;flex-direction:column-reverse;align-items:stretch;min-height:0;padding:1.3rem}.hp-info-text{flex:none;max-width:none}.hp-info-svg{height:auto;max-height:260px;aspect-ratio:320/300;align-self:center;width:100%}}
@media(prefers-reduced-motion:reduce){.hp-cat-info *{animation:none!important}.hp-info-svg .thr,.hp-info-svg .burst{display:none}.hp-info-steps li{opacity:1;color:#fff}}