/* ── 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); }
}

/* ══════════════════════════════════════════════════════════════════════════
   COURSE.DIETLAET.FR — couche de design
   Reprise fidèle du thème Divi d'origine. Toutes les valeurs ci-dessous sont
   celles relevées dans l'option « et_divi » et le CSS additionnel du site :

     accent          #30cbd4   turquoise (titres, filets, pastilles)
     lien / bouton   #1fdbd0   turquoise vif
     survol bouton   #ffd670   jaune pâle
     marine          #405d8c   bandeaux, pied de page
     orange          #f79e2a / #f29500   badges de durée
     jaune           #ffc70f
     texte           #576372   ardoise
     corps           Nunito
     titres          Caveat Brush (manuscrit, comme le logo)
     boutons         pilule, gras, sans fond, bordure blanche
     images          coins arrondis de 10 px
     pas de colonne latérale, contenu pleine largeur, en-tête sans ombre

   Chargée après la base « default » : ces règles font autorité.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --primary:      #30cbd4;
    --primary-vif:  #1fdbd0;
    --primary-dark: #1a9aa2;
    --primary-pale: #e6f9fa;
    --primary-line: #a9e8ec;

    --marine:  #405d8c;
    --marine-dark: #2f4569;
    --orange:  #f79e2a;
    --orange-fonce: #f29500;
    --jaune:   #ffc70f;
    --jaune-doux: #ffd670;

    --text:    #576372;
    --ink:     #3a4453;
    --muted:   #8794a3;
    --border:  #e3e8ed;
    --rule:    #eef2f5;
    --bg:      #f7fafb;
    --white:   #ffffff;

    --radius:    10px;          /* le site d'origine arrondit toutes les images */
    --radius-pill: 40px;
    --max-w:     1100px;
    --content-w: 800px;         /* pas de colonne latérale : le texte respire */

    /* Caveat Brush et Nunito sont des polices Google. Elles sont déclarées en
       tête de pile avec un repli système propre ; installez-les en un clic
       depuis Réglages → Polices pour retrouver le rendu exact du site. */
    --titre: "Caveat Brush", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
    --sous-titre: "Varela Round", "Nunito", system-ui, sans-serif;
    --corps: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--corps);
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text);
    background: var(--white);
}
a { color: var(--primary-vif); }
a:hover { color: var(--primary-dark); }
img { border-radius: var(--radius); }

h1, h2, h3 { font-family: var(--titre); color: var(--primary); font-weight: 400; line-height: 1.15; }
h4, h5, h6 { font-family: var(--sous-titre); color: var(--ink); font-weight: 700; }

/* ── Navigation : en-tête blanc, sans ombre (comme à l'origine) ─────────── */
.site-nav {
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: none !important;
}
.site-nav::after {
    content: ""; display: block; height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-vif) 45%, var(--marine) 100%);
}
.nav-inner a { color: var(--ink); font-family: var(--corps); font-weight: 600; }
.nav-inner a:hover, .nav-inner .active > a { color: var(--primary); }
.site-logo img, .nav-inner img { border-radius: 0; max-height: 46px; width: auto; }

/* ── Héros ─────────────────────────────────────────────────────────────── */
.page-hero, .hp-hero {
    background:
        radial-gradient(900px 380px at 15% -25%, var(--primary-pale) 0%, transparent 62%),
        var(--white);
    border-bottom: 1px solid var(--rule);
}
.page-hero h1, .hp-hero h1, .hp-hero-h1 {
    font-family: var(--titre);
    color: var(--primary) !important;
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    font-weight: 400;
    text-shadow: none !important;
}
.page-hero p, .hp-hero p, .hp-hero-sub {
    color: var(--text) !important; font-family: var(--corps); font-size: 1.08rem;
}

/* ── Boutons : pilule turquoise, survol jaune (repris du CSS d'origine) ─── */
.btn, .btn-primary, .hp-hero-cta, .btn-cta, button[type="submit"], input[type="submit"] {
    display: inline-block;
    background: var(--primary-vif);
    border: 0;
    border-radius: var(--radius-pill);
    color: #fff !important;
    font-family: var(--corps);
    font-weight: 700;
    font-size: 1.05rem;
    padding: .8rem 2.6rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease;
}
.btn:hover, .btn-primary:hover, .hp-hero-cta:hover, .btn-cta:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background: var(--jaune-doux);
    color: var(--ink) !important;
}

/* ── Cartes d'articles ─────────────────────────────────────────────────── */
.post-card, .hp-post-card, article.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.post-card:hover, .hp-post-card:hover {
    box-shadow: 0 10px 28px rgba(64,93,140,.12); transform: translateY(-3px);
}
.post-card h2, .post-card h3, .hp-post-title {
    font-family: var(--sous-titre); font-size: 1.05rem; font-weight: 700; line-height: 1.35;
}
.post-card h2 a, .post-card h3 a, .hp-post-title a { color: var(--ink); text-decoration: none; }
.post-card:hover h2 a, .hp-post-card:hover .hp-post-title a { color: var(--primary); }
.post-card p, .hp-post-excerpt { color: var(--muted); font-size: .93rem; }
.post-cat, .hp-post-cat, .cat-badge {
    background: var(--primary); color: #fff; border-radius: var(--radius-pill);
    font-family: var(--corps); font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; padding: .2rem .8rem; text-decoration: none;
}

/* ── Corps d'article ───────────────────────────────────────────────────── */
.post-content, .page-content, .content-body { font-size: 1.05rem; line-height: 1.85; }
.post-content h2, .page-content h2, .content-body h2 {
    font-family: var(--titre); color: var(--primary);
    font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 400;
    margin: 2.6rem 0 .8rem;
}
.post-content h3, .page-content h3, .content-body h3 {
    font-family: var(--sous-titre); color: var(--ink);
    font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .65rem;
}
.post-content a, .page-content a, .content-body a {
    color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px;
}
.post-content ul li::marker, .content-body ul li::marker { color: var(--primary); }
.post-content blockquote, .content-body blockquote {
    background: var(--primary-pale); border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 1.9rem 0;
}
.post-content table, .content-body table {
    width: 100%; border-collapse: collapse; margin: 1.9rem 0; font-size: .93rem;
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.post-content th, .content-body th {
    background: var(--marine); color: #fff; text-align: left; padding: .7rem .9rem;
    font-family: var(--corps); font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
}
.post-content td, .content-body td { padding: .7rem .9rem; border-top: 1px solid var(--border); }
.post-content tbody tr:nth-child(even) td { background: var(--bg); }

/* ── Fil d'Ariane ──────────────────────────────────────────────────────── */
.breadcrumb, .breadcrumb-wrap { font-family: var(--corps); font-size: .82rem; color: var(--muted); }
.breadcrumb a, .breadcrumb-list a { color: var(--primary-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   Gabarit « cours » — présentation d'un atelier
   ══════════════════════════════════════════════════════════════════════════ */
.cours-header { margin-bottom: 1.5rem; }
.cours-eyebrow {
    display: inline-block; background: var(--primary-pale); color: var(--primary-dark);
    font-family: var(--corps); font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .25rem .85rem; border-radius: var(--radius-pill); margin-bottom: .8rem;
}
.cours-page h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0; }
.cours-visuel { margin: 0 0 1.8rem; }
.cours-visuel img { width: 100%; max-height: 420px; object-fit: cover; display: block; }

.cours-accroche {
    font-size: 1.14rem; line-height: 1.7; color: var(--ink);
    padding-left: 1rem; border-left: 4px solid var(--primary); margin-bottom: 1.8rem;
}

.cours-meta {
    list-style: none; margin: 0 0 2.4rem; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem;
}
.cours-meta li {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem;
}
.cours-meta span {
    font-family: var(--corps); font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.cours-meta strong { font-family: var(--sous-titre); font-size: 1.02rem; color: var(--ink); font-weight: 700; }

.cours-section { margin-bottom: 1.6rem; }
.cours-section h3 { margin-top: 0; }
.cours-chapitres { list-style: none; counter-reset: chap; margin: 0; padding: 0; }
.cours-chapitres li {
    counter-increment: chap; position: relative;
    padding: .8rem 1rem .8rem 3.2rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: .5rem; background: var(--white);
    font-family: var(--corps); font-size: .97rem; line-height: 1.5; color: var(--ink);
}
.cours-chapitres li::before {
    content: counter(chap);
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}

.cours-cta {
    background: var(--marine); color: #fff;
    border-radius: var(--radius); padding: 1.8rem 1.9rem; margin-top: 2.6rem;
}
.cours-cta p { color: rgba(255,255,255,.86); margin: 0 0 1rem; }
.cours-cta p:last-child { margin: 0; }
.cours-cta strong { color: #fff; }
.cours-cta a { text-decoration: none; }

.cours-autres { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.cours-autres h2 { font-size: 1.9rem; margin-top: 0; }
.cours-autres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cours-vignette {
    display: block; text-decoration: none;
    background: var(--white); border: 1px solid var(--border);
    border-top: 3px solid var(--primary); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; transition: box-shadow .2s, transform .2s;
}
.cours-vignette:hover { box-shadow: 0 10px 28px rgba(64,93,140,.12); transform: translateY(-3px); }
.cours-vignette-titre {
    display: block; font-family: var(--sous-titre); font-weight: 700;
    font-size: 1rem; color: var(--ink); margin-bottom: .4rem; line-height: 1.35;
}
.cours-vignette-desc { display: block; font-size: .88rem; line-height: 1.55; color: var(--muted); }

/* ── Colonne latérale : masquée, comme sur le site d'origine ────────────── */
#sidebar, .sidebar { display: none !important; }
.with-sidebar, .page-wrapper.with-sidebar { grid-template-columns: 1fr !important; }

/* ── Pied de page ──────────────────────────────────────────────────────── */
.site-footer { background: var(--marine); color: rgba(255,255,255,.82); font-family: var(--corps); }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer h3, .site-footer h4 {
    font-family: var(--sous-titre); color: #fff;
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center;
              font-size: .87rem; margin-bottom: 1.1rem; }

@media (max-width: 720px) {
    .cours-meta { grid-template-columns: 1fr 1fr; }
    .post-content table, .content-body table { display: block; overflow-x: auto; }
}
@media print {
    .site-nav, .site-footer, .breadcrumb, .cours-cta, .cours-autres { display: none !important; }
}

/* ── Fil d'Ariane : le gabarit « page » embarque son style en ligne, pas les
   autres. On le pose ici pour qu'il vaille sur tous les gabarits. ────────── */
.breadcrumb-list {
    list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem;
    padding: 0; margin: 0 0 1rem; font-size: .82rem; color: var(--muted);
}
.breadcrumb-list li:not(:last-child)::after { content: '›'; margin-left: .5rem; color: var(--muted); }
.breadcrumb-list a { color: var(--muted); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb-list [aria-current] { color: var(--ink); font-weight: 600; }

/* ── Énumérations extraites du contenu Divi ────────────────────────────── */
.cours-points { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.cours-points li {
    position: relative; padding: .45rem 0 .45rem 1.5rem;
    border-bottom: 1px solid var(--rule); line-height: 1.6;
}
.cours-points li:last-child { border-bottom: none; }
.cours-points li::before {
    content: "›"; position: absolute; left: .3rem; top: .45rem;
    color: var(--primary); font-weight: 700;
}
.cours-points strong { color: var(--ink); }

/* Les vignettes sont des liens : leur texte ne doit pas être souligné. */
.cours-vignette, .cours-vignette:hover { text-decoration: none; }
.cours-vignette-titre, .cours-vignette-desc { text-decoration: none; }
.cours-vignette-desc { color: var(--muted); }

/* Le thème de base souligne tous les liens : les vignettes sont des blocs
   cliquables, pas des liens dans du texte. */
.cours-vignette, .cours-vignette *, .cours-autres a { text-decoration: none !important; }

/* ── Vignettes d'atelier illustrées ────────────────────────────────────── */
.cours-grille-img .cours-vignette { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cours-vignette-img { display: block; background: var(--bg); line-height: 0; }
.cours-vignette-img img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0;
}
.cours-vignette-corps { display: block; padding: 1rem 1.15rem 1.2rem; }
.cours-grille-img .cours-vignette-titre { margin-bottom: .35rem; }

/* ── Héros avec photo : le voile est rétabli, le titre passe en blanc ───── */
.hp-hero:has(.hp-hero-bg) .hp-hero-overlay { background: rgba(20,40,58,.52) !important; }
.hp-hero:has(.hp-hero-bg) .hp-hero-h1,
.hp-hero:has(.hp-hero-bg) h1 {
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
}
.hp-hero:has(.hp-hero-bg) .hp-hero-sub,
.hp-hero:has(.hp-hero-bg) p { color: rgba(255,255,255,.92) !important; }
.hp-hero-bg { border-radius: 0; }