/* ============================================================
   PIERRE MACALUSO — BLOG
   Direction artistique 2026
   Racine / Design Vital / Boutique
   ============================================================ */

:root {
    --night: #07121d;
    --night-2: #0b1d2d;
    --night-3: #10283b;

    --cyan: #58c9d8;
    --cyan-soft: rgba(88,201,216,.14);

    --gold: #c58a49;
    --gold-light: #e1b77d;
    --gold-soft: rgba(197,138,73,.14);

    --white: #fff;
    --text: #26313a;
    --muted: #69747d;
    --paper: #f7f4ee;

    --line-dark: rgba(255,255,255,.11);
    --line-light: rgba(20,35,45,.12);

    --shadow-dark: 0 30px 90px rgba(0,0,0,.32);
    --shadow-light: 0 25px 70px rgba(28,38,44,.12);

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 16px;
}

/* ============================================================
   BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(88,201,216,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(197,138,73,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--night),
            var(--night-2) 52%,
            #061019
        );

    color: var(--white);

    font-family:
        Raleway,
        Inter,
        system-ui,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

/* ============================================================
   HEADER
   ============================================================ */

.blog-header {
    position: sticky;
    top: 0;
    z-index: 100;

    width: min(1380px, calc(100% - 40px));
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 0;

    background: rgba(7,18,29,.76);
    backdrop-filter: blur(22px);

    border-bottom: 1px solid var(--line-dark);
}

.blog-logo {
    display: flex;
    flex-direction: column;

    text-decoration: none;

    font-size: 9px;
    letter-spacing: .28em;

    color: rgba(255,255,255,.55);

    transition: opacity .25s ease;
}

.blog-logo strong {
    margin-top: 3px;

    color: #fff;

    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;

    letter-spacing: .10em;
}

.blog-logo:hover {
    opacity: .78;
}

.blog-main-nav {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 5px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;

    background: rgba(255,255,255,.035);
}

.blog-main-nav a {
    padding: 9px 16px;

    border-radius: 999px;

    color: rgba(255,255,255,.58);

    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.blog-main-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
    transform: translateY(-1px);
}

.blog-main-nav a.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(88,201,216,.18),
            rgba(197,138,73,.15)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 5px 20px rgba(0,0,0,.16);
}

/* ============================================================
   APPLICATION
   ============================================================ */

#blogApp {
    width: min(1380px, calc(100% - 40px));
    margin: auto;

    padding: 0 0 110px;
}

/* ============================================================
   HERO
   ============================================================ */

.blog-hero {
    position: relative;

    min-height: 470px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px clamp(25px, 6vw, 90px) 80px;

    overflow: hidden;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        radial-gradient(
            circle at 78% 38%,
            rgba(88,201,216,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 22% 80%,
            rgba(197,138,73,.09),
            transparent 28%
        );
}

/* Orbites discrètes façon Design Vital */

.blog-hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -80px;
    top: -150px;

    border-radius: 50%;

    border:
        1px solid rgba(88,201,216,.10);

    box-shadow:
        0 0 80px rgba(88,201,216,.06);

    pointer-events: none;
}

.blog-hero::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: 15px;
    top: -60px;

    border-radius: 50%;

    border:
        1px solid rgba(197,138,73,.10);

    pointer-events: none;
}

.eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--cyan);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";

    width: 30px;
    height: 1px;

    background: currentColor;
}

.article-category {
    position: relative;
    z-index: 2;

    margin-top: 18px;

    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.blog-hero h1 {
    position: relative;
    z-index: 2;

    max-width: 1050px;

    margin: 17px 0 0;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size:
        clamp(48px, 7.5vw, 104px);

    font-weight: 400;
    line-height: .94;

    letter-spacing: -.048em;
}

.hero-subtitle {
    position: relative;
    z-index: 2;

    max-width: 760px;

    margin: 26px 0 0;

    color: rgba(255,255,255,.64);

    font-family: Georgia, serif;

    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.7;
}

/* ============================================================
   CONTROLS
   ============================================================ */

.blog-controls {
    position: sticky;
    top: 78px;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin: 22px 0 35px;
    padding: 8px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 20px;

    background:
        rgba(7,18,29,.78);

    backdrop-filter: blur(22px);

    box-shadow:
        0 18px 50px rgba(0,0,0,.18);
}

.category-scroll {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;

    overflow-x: auto;

    scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
    display: none;
}

.category-scroll a {
    flex: 0 0 auto;

    padding: 9px 15px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius: 999px;

    color: rgba(255,255,255,.58);

    font-size: 10px;
    letter-spacing: .04em;

    text-decoration: none;

    transition: .22s ease;
}

.category-scroll a:hover {
    color: #fff;

    background:
        rgba(255,255,255,.06);

    border-color:
        rgba(255,255,255,.15);
}

.category-scroll a.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(88,201,216,.17),
            rgba(197,138,73,.13)
        );

    border-color:
        rgba(88,201,216,.34);

    box-shadow:
        0 5px 20px rgba(0,0,0,.12);
}

.category-scroll a.child {
    opacity: .72;
}

.blog-search {
    flex: 0 0 auto;
}

.blog-search input {
    width: 260px;
    height: 39px;

    padding: 0 16px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 999px;

    outline: none;

    background:
        rgba(255,255,255,.045);

    color: #fff;

    font-size: 11px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.blog-search input::placeholder {
    color: rgba(255,255,255,.34);
}

.blog-search input:focus {
    border-color:
        rgba(88,201,216,.45);

    box-shadow:
        0 0 0 4px rgba(88,201,216,.07);
}

/* ============================================================
   ARTICLE GRID
   ============================================================ */

.article-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 18px;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.article-grid.loading {
    opacity: .42;
    transform: translateY(5px);
}

/* ============================================================
   ARTICLE CARD
   ============================================================ */

.article-card {
    grid-column: span 4;

    min-width: 0;
    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 18px 55px rgba(0,0,0,.22);

    transition:
        transform .38s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.article-card:first-child {
    grid-column: span 8;
}

.article-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(88,201,216,.27);

    box-shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 0 40px rgba(88,201,216,.04);
}

.article-card-link {
    display: block;

    height: 100%;

    text-decoration: none;
}

/* ---------- IMAGE ---------- */

.article-image {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #10283b,
            #07121d
        );
}

.article-card:first-child .article-image {
    aspect-ratio: 16 / 8.8;
}

.article-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4,12,19,.62),
            transparent 55%
        );

    pointer-events: none;
}

.article-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.045);
    filter: saturate(1.04);
}

.article-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    color:
        rgba(255,255,255,.20);

    font-family: Georgia, serif;
    font-size: 48px;
}

/* ---------- CARD CONTENT ---------- */

.article-card-body {
    padding: 24px 25px 27px;
}

.article-meta {
    color:
        var(--gold-light);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.article-card h2 {
    margin: 11px 0 8px;

    font-family:
        Georgia,
        serif;

    font-size: 27px;
    font-weight: 400;

    line-height: 1.08;
    letter-spacing: -.025em;
}

.article-card:first-child h2 {
    font-size:
        clamp(30px, 3.3vw, 43px);
}

.article-card h3 {
    margin: 0 0 10px;

    color:
        rgba(255,255,255,.66);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.article-card p {
    margin: 0 0 19px;

    color:
        rgba(255,255,255,.54);

    font-family: Georgia, serif;

    font-size: 14px;
    line-height: 1.65;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--cyan);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.read-more::after {
    content: "→";

    transition:
        transform .22s ease;
}

.article-card:hover .read-more::after {
    transform: translateX(4px);
}

/* ============================================================
   ARTICLE READING
   ============================================================ */

.article-page {
    max-width: 980px;

    margin: 45px auto 0;
}

/* lecture claire */

.article-page {
    padding: clamp(25px, 5vw, 65px);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            #faf8f3,
            #f1ede4
        );

    color: var(--text);

    box-shadow:
        var(--shadow-dark);
}

/* couverture */

.article-cover {
    overflow: hidden;

    margin:
        -10px -10px 48px;

    border-radius:
        24px;

    background:
        #e7e2d8;
}

.article-cover img {
    display: block;

    width: 100%;
    max-height: 680px;

    object-fit: cover;
}

/* accroche */

.article-lead {
    max-width: 780px;

    margin: 0 auto 42px;

    color:
        #48535c;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(21px, 2.5vw, 28px);

    line-height: 1.58;
}

/* contenu */

.article-content {
    max-width: 760px;

    margin: auto;

    color:
        #303b43;

    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-size: 18px;
    line-height: 1.9;
}

.article-content p {
    margin:
        0 0 24px;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    color:
        #16232c;

    font-weight: 400;

    line-height: 1.15;
}

.article-content h2 {
    margin:
        58px 0 20px;

    font-size: 36px;
}

.article-content h3 {
    margin:
        45px 0 17px;

    font-size: 28px;
}

.article-content h4 {
    margin:
        35px 0 14px;

    font-size: 22px;
}

.article-content a {
    color:
        #a66d31;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(166,109,49,.35);

    text-underline-offset:
        3px;
}

.article-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        35px auto;

    border-radius:
        17px;

    box-shadow:
        0 18px 45px rgba(30,40,48,.12);
}

.article-content blockquote {
    margin:
        40px 0;

    padding:
        24px 28px;

    border-left:
        3px solid var(--gold);

    background:
        rgba(197,138,73,.07);

    color:
        #39464e;

    font-size:
        21px;

    line-height:
        1.65;
}

/* ============================================================
   EMPTY / LOADING
   ============================================================ */

.empty-state,
.loading-card {
    grid-column:
        1 / -1;

    min-height:
        260px;

    display:
        grid;

    place-items:
        center;

    border:
        1px dashed rgba(255,255,255,.12);

    border-radius:
        var(--radius-lg);

    color:
        rgba(255,255,255,.45);

    font-family:
        Georgia,
        serif;

    font-size:
        17px;
}

.empty-state span {
    color:
        var(--cyan);

    font-size:
        32px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .article-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .article-card,
    .article-card:first-child {
        grid-column: span 1;
    }

    .article-card:first-child h2 {
        font-size: 30px;
    }

    .blog-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .blog-search,
    .blog-search input {
        width: 100%;
    }
}

@media (max-width: 700px) {

    .blog-header {
        width: calc(100% - 28px);
        padding: 16px 0;
    }

    .blog-main-nav {
        gap: 2px;
    }

    .blog-main-nav a {
        padding: 8px 10px;
        font-size: 9px;
    }

    #blogApp {
        width: calc(100% - 28px);
        padding-bottom: 70px;
    }

    .blog-hero {
        min-height: 410px;
        padding:
            70px 4px 55px;
    }

    .blog-hero h1 {
        font-size:
            clamp(45px, 14vw, 72px);
    }

    .blog-controls {
        position: relative;
        top: auto;

        margin-top: 18px;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    .article-card,
    .article-card:first-child {
        grid-column: 1;
    }

    .article-card:first-child h2,
    .article-card h2 {
        font-size: 27px;
    }

    .article-page {
        padding:
            20px;

        border-radius:
            23px;
    }

    .article-cover {
        margin:
            -3px -3px 35px;
    }

    .article-content {
        font-size: 17px;
        line-height: 1.82;
    }

    .article-content h2 {
        font-size: 31px;
    }
}

@media (max-width: 480px) {

    .blog-logo strong {
        font-size: 17px;
    }

    .blog-main-nav a {
        padding: 7px 8px;
    }

    .blog-hero {
        min-height: 370px;
    }

    .blog-card-body {
        padding:
            20px;
    }

    .article-page {
        padding:
            16px;
    }

    .article-cover {
        border-radius:
            17px;
    }
}

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ============================================================
   BLOG V3 — ÉDITORIAL BLANC / RETOUR / PREMIUM
   ============================================================ */

/* Grande respiration claire entre exploration et lecture */

.article-page {
    position: relative;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfaf7 45%,
            #f1ede5 100%
        ) !important;

    border:
        1px solid rgba(20,35,45,.09);

    color: #26313a;

    box-shadow:
        0 35px 100px rgba(0,0,0,.25),
        0 0 0 1px rgba(255,255,255,.35) inset;
}

/* halo clair autour de la zone de lecture */

.article-page::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(88,201,216,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(197,138,73,.08),
            transparent 30%
        );

    pointer-events: none;
}

/* contenu au-dessus du décor */

.article-page > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   RETOUR AU BLOG
   ============================================================ */

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin:
        0 0 30px;

    padding:
        9px 14px;

    border:
        1px solid rgba(20,35,45,.12);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.72);

    color:
        #52616b;

    font-family:
        Raleway,
        Inter,
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .10em;
    text-transform: uppercase;

    text-decoration: none;

    box-shadow:
        0 7px 22px rgba(30,40,48,.06);

    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s ease;
}

.article-back span:first-child {
    color:
        #a66d31;

    font-size:
        17px;

    line-height:
        1;
}

.article-back:hover {
    color:
        #16232c;

    border-color:
        rgba(197,138,73,.38);

    background:
        #fff;

    transform:
        translateX(-3px);
}

/* ============================================================
   ARTICLE COVER
   ============================================================ */

.article-cover {
    position: relative;

    background:
        #e8e4dc;

    box-shadow:
        0 25px 55px rgba(30,40,48,.12);
}

.article-cover::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.05);
}

/* ============================================================
   LECTURE — TITRES / TEXTE
   ============================================================ */

.article-content strong {
    color:
        #17262f;
}

.article-content ul,
.article-content ol {
    margin:
        0 0 28px;

    padding-left:
        28px;
}

.article-content li {
    margin-bottom:
        9px;
}

.article-content hr {
    margin:
        50px 0;

    border:
        0;

    border-top:
        1px solid rgba(20,35,45,.12);
}

.article-content table {
    width:
        100%;

    border-collapse:
        collapse;

    margin:
        35px 0;

    font-size:
        15px;
}

.article-content th,
.article-content td {
    padding:
        12px 14px;

    border:
        1px solid rgba(20,35,45,.12);

    text-align:
        left;
}

.article-content th {
    background:
        rgba(197,138,73,.08);

    color:
        #26313a;
}

/* ============================================================
   DESKTOP — LARGE WHITE READING FIELD
   ============================================================ */

@media (min-width: 1001px) {

    .article-page {
        margin-top:
            55px;

        margin-bottom:
            40px;

        padding:
            34px 75px 80px;
    }

    .article-cover {
        margin:
            0 -35px 55px;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .article-page {
        margin-top:
            25px;

        padding:
            18px 18px 45px;
    }

    .article-back {
        margin-bottom:
            22px;
    }
}

/* ============================================================
   BLOG V4 — FULL SCREEN DESKTOP
   ============================================================ */

html,
body {
    width: 100%;
    min-width: 100%;
}

body {
    overflow-x: hidden;
}

.blog-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: clamp(28px, 5.5vw, 84px) !important;
    padding-right: clamp(28px, 5.5vw, 84px) !important;
}

#blogApp {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding-left: clamp(28px, 5.5vw, 84px) !important;
    padding-right: clamp(28px, 5.5vw, 84px) !important;
}

/* vraie largeur éditoriale */
.blog-hero,
.blog-controls,
.article-grid {
    width: 100%;
}

/* Hero beaucoup plus immersif */
.blog-hero {
    max-width: none !important;
    min-height: 470px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 70px !important;
    padding-bottom: 75px !important;
}

/* grille qui exploite réellement l'écran */
.article-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(18px, 2vw, 32px);
}

/* article : grande surface de lecture */
.article-page {
    width: min(1180px, 100%);
}

/* barre de catégories pleine largeur */
.blog-controls {
    width: 100%;
}

/* très grands écrans */
@media (min-width: 1600px) {

    .article-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .blog-hero h1 {
        font-size: clamp(72px, 6vw, 108px);
    }
}

/* mobile */
@media (max-width: 700px) {

    .blog-header,
    #blogApp {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .blog-hero {
        min-height: 360px;
    }
}



/* ============================================================
   BLOG V6 — IDENTITÉ + NAVIGATION
   ============================================================ */

/* ---------- LOGO ---------- */

.blog-logo {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #fff !important;
}

.blog-logo-mark {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.16),
            rgba(255,255,255,.025) 65%
        );

    box-shadow:
        inset 0 0 18px rgba(84,199,216,.08),
        0 0 24px rgba(84,199,216,.06);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.blog-logo:hover .blog-logo-mark {
    transform: rotate(-5deg) scale(1.04);
    border-color: rgba(84,199,216,.55);
    box-shadow:
        inset 0 0 18px rgba(84,199,216,.13),
        0 0 28px rgba(84,199,216,.12);
}

.blog-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.blog-logo-text small {
    margin-bottom: 4px;

    font-family:
        Inter,
        Raleway,
        system-ui,
        sans-serif;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .28em;

    color: rgba(255,255,255,.55);
}

.blog-logo-text strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: .08em !important;
    color: #fff;
}


/* ---------- RETOUR ARTICLE ---------- */

.article-back-fixed {
    position: fixed;

    left: clamp(18px, 2vw, 32px);
    top: 50%;
    transform: translateY(-50%);

    z-index: 80;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 15px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;

    background: rgba(7,18,29,.78);
    backdrop-filter: blur(16px);

    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    box-shadow:
        0 12px 35px rgba(0,0,0,.20);

    transition:
        transform .25s ease,
        color .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.article-back-fixed span:first-child {
    font-size: 17px;
    line-height: 1;
}

.article-back-fixed:hover {
    transform: translateY(-50%) translateX(4px);
    color: #fff;
    border-color: rgba(84,199,216,.5);
    background: rgba(15,39,55,.92);
}


/* ---------- SCROLL TOP ---------- */

.blog-scroll-top {
    position: fixed;

    right: clamp(18px, 2vw, 32px);
    bottom: 24px;

    z-index: 90;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;

    background: rgba(7,18,29,.78);
    backdrop-filter: blur(16px);

    color: #fff;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.blog-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.blog-scroll-top:hover {
    border-color: rgba(84,199,216,.55);
    background: rgba(15,39,55,.95);
}


/* ---------- ARTICLE : ESPACE POUR LE BOUTON ---------- */

.article-page {
    position: relative;
}

@media (max-width: 1050px) {
    .article-back-fixed {
        left: 16px;
        top: auto;
        bottom: 82px;
        transform: none;
    }

    .article-back-fixed:hover {
        transform: translateX(3px);
    }
}

@media (max-width: 650px) {

    .blog-logo-mark {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .blog-logo-text strong {
        font-size: 16px !important;
    }

    .article-back-fixed {
        left: 14px;
        bottom: 72px;
        padding: 10px 13px;
    }

    .article-back-fixed span:last-child {
        display: none;
    }

    .blog-scroll-top {
        right: 16px;
        bottom: 18px;
    }
}


/* ============================================================
   BLOG V7 — TYPOGRAPHIE COMMUNE AUX FRONTS
   ============================================================ */

body {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        Helvetica,
        sans-serif !important;
}

/* Navigation / interface */
.blog-main-nav,
.blog-search,
.category-scroll,
.article-meta,
.read-more,
.blog-logo-copy,
.blog-controls {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        sans-serif !important;
}

/* Identité éditoriale */
.blog-hero h1,
.article-card h2,
.article-card h3,
.article-page h1,
.article-lead,
.article-content h1,
.article-content h2,
.article-content h3,
.empty-state h2 {
    font-family:
        'Playfair Display',
        Georgia,
        serif !important;
}

/* Texte courant */
.hero-subtitle,
.article-card p,
.article-content,
.empty-state p {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        sans-serif !important;
}

/* Logo */
.blog-logo-copy strong {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        sans-serif !important;
}

.blog-logo-copy small {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        sans-serif !important;
}

/* Recherche */
.blog-search input {
    font-family:
        'DM Sans',
        Manrope,
        Arial,
        sans-serif !important;
}


/* ============================================================
   BLOG V8 — IDENTITÉ TYPOGRAPHIQUE
   Alignement Boutique / Design Vital
   ============================================================ */

body {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        Helvetica,
        sans-serif !important;
}

/* Interface */
.blog-header,
.blog-main-nav,
.blog-controls,
.category-scroll,
.blog-search,
.blog-search input,
.article-meta,
.read-more,
.article-back-fixed,
.blog-scroll-top {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        Helvetica,
        sans-serif !important;
}

/* Titres éditoriaux */
.blog-hero h1,
.article-card h2,
.article-card h3,
.article-page h1,
.article-lead,
.article-content h1,
.article-content h2,
.article-content h3,
.empty-state h2 {
    font-family:
        'Playfair Display',
        Georgia,
        serif !important;
}

/* Texte éditorial */
.hero-subtitle,
.article-card p,
.article-content,
.empty-state p {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        Helvetica,
        sans-serif !important;
}


/* ============================================================
   LOGO — M À GAUCHE
   ============================================================ */

.blog-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 17px !important;

    text-decoration: none !important;
    color: #fff !important;
}

.blog-logo-m {
    display: block;

    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        sans-serif !important;

    font-size: 40px;
    font-weight: 300;
    line-height: .8;
    letter-spacing: -.08em;

    color: #fff;

    transition:
        color .25s ease,
        transform .25s ease;
}

.blog-logo-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-logo-copy strong {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .24em !important;

    line-height: 1 !important;
    color: #fff;
}

.blog-logo-copy small {
    margin-top: 7px;

    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        sans-serif !important;

    font-size: 7px !important;
    font-weight: 500 !important;
    letter-spacing: .28em !important;

    color: rgba(255,255,255,.48);
}

.blog-logo:hover .blog-logo-m {
    color: #54c7d8;
    transform: translateX(2px);
}


/* ============================================================
   RECHERCHE
   ============================================================ */

.blog-search input {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        sans-serif !important;

    font-size: 13px;
    font-weight: 400;
}

.blog-search input::placeholder {
    font-family:
        'DM Sans',
        'Manrope',
        Arial,
        sans-serif !important;

    color: rgba(255,255,255,.42);
}


@media (max-width: 650px) {

    .blog-logo {
        gap: 11px !important;
    }

    .blog-logo-m {
        font-size: 34px;
    }

    .blog-logo-copy strong {
        font-size: 10px !important;
        letter-spacing: .18em !important;
    }

    .blog-logo-copy small {
        font-size: 6px !important;
        letter-spacing: .19em !important;
    }
}

/* ============================================================
   BLOG — RESPONSIVE FINAL
   Mobile + tablette
   Priorité finale sur toutes les versions précédentes
   ============================================================ */

/* --- TABLETTE --- */

@media (min-width: 651px) and (max-width: 1100px) {

    #blogApp {
        width: 100% !important;
        max-width: none !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .blog-header {
        width: 100% !important;
        max-width: none !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .article-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    .article-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .article-card-link {
        width: 100% !important;
    }

    .article-image {
        width: 100% !important;
    }

    .article-card-body {
        width: 100% !important;
    }

    .blog-controls {
        width: 100% !important;
    }

    .blog-search {
        flex: 1 1 300px;
    }

    .blog-search input {
        width: 100% !important;
    }
}


/* --- MOBILE --- */

@media (max-width: 650px) {

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #blogApp {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: 60px !important;
    }

    .blog-header {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding:
            13px 14px !important;
    }

    .blog-main-nav {
        gap: 3px !important;
    }

    .blog-main-nav a {
        padding:
            7px 9px !important;
        font-size: 10px !important;
    }

    .blog-hero {
        width: 100% !important;
        max-width: none !important;
        padding:
            58px 8px 38px !important;
    }

    .blog-hero h1 {
        font-size:
            clamp(42px, 13vw, 58px) !important;
        line-height: .96 !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
    }

    /*
     * Barre de contrôle pleine largeur.
     */
    .blog-controls {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 28px !important;
        gap: 10px !important;
    }

    .category-scroll {
        width: 100% !important;
        max-width: 100% !important;
    }

    .category-scroll a {
        padding:
            9px 15px !important;
        font-size: 11px !important;
    }

    .blog-search {
        width: 100% !important;
        min-width: 0 !important;
    }

    .blog-search input {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /*
     * LA correction principale :
     * une seule colonne occupant toute la largeur.
     */
    .article-grid {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) !important;
        gap: 20px !important;
    }

    .article-card {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .article-card-link {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
    }

    .article-image {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    .article-card-body {
        width: 100% !important;
        padding:
            21px 20px 24px !important;
    }

    .article-card h2 {
        font-size:
            clamp(27px, 8vw, 36px) !important;
        line-height: 1.02 !important;
    }

    .article-card p {
        font-size: 14px !important;
    }

    /*
     * État vide également pleine largeur.
     */
    .empty-state,
    .loading-card {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    /*
     * Article individuel.
     */
    .article-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .article-cover {
        width: 100% !important;
        margin-bottom: 32px !important;
        border-radius: 20px !important;
    }

    .article-cover img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    .article-lead {
        font-size: 21px !important;
        line-height: 1.5 !important;
    }

    .article-content {
        width: 100% !important;
        max-width: none !important;
        font-size: 17px !important;
        line-height: 1.78 !important;
    }

}


/* --- PETITS MOBILES --- */

@media (max-width: 390px) {

    #blogApp {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .blog-header {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .blog-main-nav a {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .article-card-body {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }

}



/* ============================================================
   BLOG CONTACT — PREMIUM
   ============================================================ */

.blog-contact-section {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0,.88fr)
        minmax(420px,1.12fr);
    gap: clamp(50px,7vw,120px);
    align-items: start;

    width: 100%;
    margin-top: clamp(90px,11vw,170px);
    padding:
        clamp(70px,8vw,125px)
        clamp(28px,5.5vw,84px);

    margin-left:
        calc(-1 * clamp(28px,5.5vw,84px));
    width:
        calc(100% + 2 * clamp(28px,5.5vw,84px));

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(84,199,216,.12),
            transparent 32%
        ),
        #f5f1e9;

    color: #07121d;
    overflow: hidden;
}

.blog-contact-section::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(7,18,29,.08);
    border-radius: 50%;
    right: -180px;
    top: -220px;
    pointer-events: none;
}

.blog-contact-intro,
.blog-contact-card {
    position: relative;
    z-index: 1;
}

.blog-contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #187d98;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .22em;
}

.blog-contact-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #187d98;
}

.blog-contact-intro h2 {
    max-width: 620px;
    margin: 22px 0;

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    font-size:
        clamp(48px,6vw,88px);

    font-weight: 500;
    line-height: .94;
    letter-spacing: -.045em;
}

.blog-contact-intro p {
    max-width: 520px;
    margin: 0;

    color: #68757e;
    font-size: 16px;
    line-height: 1.75;
}

.blog-contact-email {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    margin-top: 36px;

    color: #07121d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    border-bottom:
        1px solid rgba(7,18,29,.22);

    padding-bottom: 8px;
}

.blog-contact-email span {
    color: #c58a49;
}

.blog-contact-card {
    padding:
        clamp(28px,4vw,50px);

    border:
        1px solid rgba(7,18,29,.10);

    border-radius: 28px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 35px 90px
        rgba(27,42,52,.10);

    backdrop-filter: blur(15px);
}

.blog-contact-form {
    display: grid;
    gap: 24px;
}

.blog-form-field {
    display: grid;
    gap: 9px;
}

.blog-form-field label {
    color: #44515a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-form-field input,
.blog-form-field textarea {
    width: 100%;

    border: 0;
    border-bottom:
        1px solid #cfd3d3;

    border-radius: 0;

    outline: none;

    padding:
        13px 2px 14px;

    background: transparent;

    color: #07121d;

    font: inherit;
    font-size: 16px;

    transition:
        border-color .2s,
        box-shadow .2s;
}

.blog-form-field textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.65;
}

.blog-form-field input:focus,
.blog-form-field textarea:focus {
    border-color: #187d98;
    box-shadow:
        0 1px 0 #187d98;
}

.blog-form-field input::placeholder,
.blog-form-field textarea::placeholder {
    color: #a1a8ac;
}

.blog-contact-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 8px;
    padding: 17px 20px;

    border: 0;
    border-radius: 999px;

    cursor: pointer;

    background: #07121d;
    color: #fff;

    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    transition:
        transform .2s,
        background .2s,
        opacity .2s;
}

.blog-contact-submit:hover {
    transform: translateY(-2px);
    background: #12324a;
}

.blog-contact-submit:disabled {
    cursor: wait;
    opacity: .58;
    transform: none;
}

.blog-contact-status {
    display: none;

    padding: 14px 17px;

    border-radius: 12px;

    font-size: 13px;
    line-height: 1.5;
}

.blog-contact-status.is-success,
.blog-contact-status.is-error {
    display: block;
}

.blog-contact-status.is-success {
    color: #155d4d;
    background: #e8f4ef;
    border: 1px solid #c4e3d7;
}

.blog-contact-status.is-error {
    color: #8a342d;
    background: #f9ece9;
    border: 1px solid #efcbc5;
}

.blog-contact-note {
    margin: -6px 0 0;
    color: #929a9f;
    font-size: 10px;
    line-height: 1.55;
}

.blog-honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ---------- TABLETTE ---------- */

@media (max-width: 1050px) {

    .blog-contact-section {
        grid-template-columns:
            minmax(0,.85fr)
            minmax(380px,1.15fr);

        gap: 42px;
    }

    .blog-contact-intro h2 {
        font-size:
            clamp(44px,6vw,68px);
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 760px) {

    .blog-contact-section {
        grid-template-columns: 1fr;
        gap: 44px;

        margin-top: 75px;

        padding-top: 65px;
        padding-bottom: 65px;
    }

    .blog-contact-intro h2 {
        font-size:
            clamp(46px,14vw,64px);
    }

    .blog-contact-card {
        padding: 25px 20px;
        border-radius: 22px;
    }

    .blog-contact-email {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   BLOG V1 FINAL — FILTERS + CONTACT + RESPONSIVE
   ============================================================ */

.blog-filter-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.blog-tag-filter select,
.blog-search input {
    height: 46px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #fff;
    outline: none;
    font: inherit;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.blog-tag-filter select {
    min-width: 170px;
    padding: 0 40px 0 17px;
}

.blog-search input {
    width: clamp(220px,22vw,340px);
    padding: 0 18px;
}

.blog-tag-filter select:focus,
.blog-search input:focus {
    border-color: rgba(84,199,216,.7);
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 4px rgba(84,199,216,.09);
}

.blog-tag-filter select option {
    color: #07121d;
    background: #fff;
}

/* Contact : portrait premium */

.blog-contact-portrait {
    width: 94px;
    height: 94px;
    margin: 0 0 25px;
    padding: 4px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(84,199,216,.9),
            rgba(197,138,73,.85)
        );
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.blog-contact-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    background: #07121d;
}

/* le mail reste volontairement lisible */
.blog-contact-email {
    overflow-wrap: anywhere;
}

/* Responsive tablette */

@media (max-width: 1050px) {

    .blog-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .blog-filter-tools {
        width: 100%;
    }

    .blog-tag-filter {
        flex: 0 0 210px;
    }

    .blog-tag-filter select,
    .blog-search,
    .blog-search input {
        width: 100%;
    }

    .blog-search {
        flex: 1 1 auto;
    }

    .article-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }
}

/* Responsive téléphone */

@media (max-width: 680px) {

    .blog-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #blogApp {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .blog-filter-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-tag-filter {
        flex: none;
        width: 100%;
    }

    .blog-tag-filter select,
    .blog-search input {
        width: 100%;
        min-width: 0;
    }

    .article-grid {
        display: grid !important;
        width: 100% !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 18px !important;
    }

    .article-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .article-card-body {
        padding: 21px !important;
    }

    .article-image {
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .article-page {
        width: 100%;
        max-width: 100%;
    }

    .article-content {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .article-content img,
    .article-content video,
    .article-content iframe {
        max-width: 100% !important;
        height: auto;
    }

    .blog-contact-portrait {
        width: 82px;
        height: 82px;
    }
}


/* CONTACT PORTRAIT — FINAL */
.blog-contact-portrait {
    width: 112px;
    height: 112px;
    margin: 0 0 30px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg,#55c7d8,#c58a49);
    box-shadow: 0 20px 55px rgba(7,18,29,.18);
}

.blog-contact-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

@media (max-width:680px) {
    .blog-contact-portrait {
        width: 92px;
        height: 92px;
        margin-bottom: 24px;
    }
}

/* ============================================================
   BLOG — TAG SELECT FINAL
   ============================================================ */

.blog-filter-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-tag-filter {
    position: relative;
    flex: 0 0 220px;
    min-width: 0;
}

/* Flèche personnalisée */
.blog-tag-filter::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255,255,255,.78);
    border-bottom: 1.5px solid rgba(255,255,255,.78);
    transform: translateY(-68%) rotate(45deg);
    pointer-events: none;
}

.blog-tag-filter select {
    display: block;
    width: 100%;
    height: 46px;

    margin: 0;
    padding: 0 46px 0 18px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    background: rgba(255,255,255,.075);
    color: #fff;

    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    outline: none;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.blog-tag-filter select:hover {
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.28);
}

.blog-tag-filter select:focus {
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.11);
    box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/*
 * Le menu natif est dessiné par l'OS/navigateur.
 * Fond clair + texte sombre évite les options
 * blanches sur fond blanc sous Chrome/Windows.
 */
.blog-tag-filter select option {
    background: #fff;
    color: #151515;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================
   BLOG — FOOTER
   ============================================================ */

.blog-site-footer {
    width: 100%;
    margin-top: 72px;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
}

.blog-site-footer-inner {
    width: 100%;
    padding: 28px 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    font-size: 13px;
    color: rgba(255,255,255,.58);
}

.blog-site-footer-brand {
    color: rgba(255,255,255,.82);
    font-weight: 600;
}

.blog-site-footer-signature {
    flex: 1;
    text-align: center;
    letter-spacing: .02em;
}

.blog-site-footer-home {
    color: rgba(255,255,255,.70);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-site-footer-home:hover {
    color: #fff;
}

@media (max-width: 720px) {

    .blog-filter-tools {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .blog-tag-filter {
        width: 100%;
        flex: none;
    }

    .blog-tag-filter select {
        width: 100%;
    }

    .blog-site-footer {
        margin-top: 54px;
    }

    .blog-site-footer-inner {
        padding: 26px 18px;

        flex-direction: column;
        align-items: center;
        gap: 8px;

        text-align: center;
    }

    .blog-site-footer-signature {
        order: 2;
    }

    .blog-site-footer-home {
        order: 3;
        margin-top: 8px;
    }
}

/* ============================================================
   BLOG — FILTRES / SELECT — OVERRIDE FINAL
   ============================================================ */

.blog-filter-tools {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 0 !important;
}

.blog-tag-filter {
    position: relative !important;
    display: block !important;
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
}

/* Flèche */
.blog-tag-filter::after {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    right: 18px !important;

    width: 7px !important;
    height: 7px !important;

    border: 0 !important;
    border-right: 1.5px solid rgba(255,255,255,.78) !important;
    border-bottom: 1.5px solid rgba(255,255,255,.78) !important;

    transform: translateY(-70%) rotate(45deg) !important;
    pointer-events: none !important;
}

#blogTagFilter {
    box-sizing: border-box !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 48px 0 18px !important;

    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 23px !important;

    background-color: rgba(255,255,255,.075) !important;
    background-image: none !important;

    color: rgba(255,255,255,.92) !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 44px !important;

    text-align: left !important;
    text-indent: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}

#blogTagFilter:hover {
    border-color: rgba(255,255,255,.30) !important;
    background-color: rgba(255,255,255,.11) !important;
}

#blogTagFilter:focus,
#blogTagFilter:focus-visible {
    border-color: rgba(255,255,255,.42) !important;
    background-color: rgba(255,255,255,.11) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.06) !important;
}

/* Menu natif Windows / Chrome */
#blogTagFilter option {
    background: #ffffff !important;
    color: #171717 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

#blogTagFilter option:checked {
    background: #e9e9e9 !important;
    color: #111111 !important;
}

/* Recherche alignée au select */
.blog-search {
    flex: 1 1 300px !important;
    min-width: 220px !important;
}

#blogSearch {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
}

/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 1050px) {

    .blog-filter-tools {
        width: 100% !important;
    }

    .blog-tag-filter {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    .blog-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

    .blog-filter-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .blog-tag-filter,
    .blog-search {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
    }

    #blogTagFilter,
    #blogSearch {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
    }

    #blogTagFilter {
        padding-left: 17px !important;
        padding-right: 48px !important;
        border-radius: 24px !important;
    }
}


/* ============================================================
   BLOG — CATEGORIES HIERARCHIQUES
   ============================================================ */

.category-scroll .category-link {
    position: relative;
}

.category-scroll .category-link[data-depth]:not([data-depth="0"]) {
    margin-left:
        calc(var(--category-depth, 1) * 8px);
    opacity: .86;
}

.category-scroll .category-link[data-depth="1"] {
    font-size: .94em;
}

.category-scroll .category-link[data-depth="2"],
.category-scroll .category-link[data-depth="3"] {
    font-size: .90em;
}

.category-tree-mark {
    display: inline-block;
    margin-right: 5px;
    opacity: .48;
    font-size: .9em;
}

.category-scroll .category-link.active {
    opacity: 1;
}

@media (max-width: 720px) {

    .category-scroll .category-link[data-depth]:not([data-depth="0"]) {
        margin-left:
            calc(var(--category-depth, 1) * 5px);
    }
}

/* ============================================================
   BLOG — SEARCH INPUT FIX
   Le placeholder ne doit jamais dépasser du champ.
   ============================================================ */

.blog-filter-tools {
    min-width: 0;
}

.blog-search,
.blog-search-box,
.blog-search-wrap {
    min-width: 0;
    max-width: 100%;
}

#blogSearch {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#blogSearch::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {

    .blog-filter-tools {
        width: 100%;
        min-width: 0;
    }

    #blogSearch {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }
}

/* ============================================================
   BLOG — FINITIONS FILTRES / TRANSITIONS
   ============================================================ */

/* Les deux contrôles doivent réellement pouvoir rétrécir */
.blog-filter-tools {
    display: flex;
    min-width: 0 !important;
}

.blog-tag-filter,
.blog-search {
    min-width: 0 !important;
}

.blog-search {
    flex: 1 1 0 !important;
    overflow: hidden;
}

/*
 * Recherche :
 * le placeholder reste physiquement contenu dans le champ.
 */
#blogSearch {
    display: block !important;
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/*
 * Chromium ne gère pas toujours text-overflow sur ::placeholder
 * comme sur un élément normal. On lui laisse donc suffisamment
 * d'espace et on réduit légèrement le placeholder.
 */
#blogSearch::placeholder {
    font-size: .92em;
    opacity: .62;
}

/* ------------------------------------------------------------
   TRANSITION DES ARTICLES
   ------------------------------------------------------------ */

.article-grid {
    transition:
        opacity 180ms ease,
        transform 220ms ease;
}

.article-grid.is-filtering {
    opacity: .18;
    transform: translateY(5px);
}

.article-grid.is-filtered-in {
    animation: blogGridIn 260ms ease both;
}

.article-grid .article-card {
    transform-origin: center top;
}

.article-grid.is-filtered-in .article-card {
    animation: blogCardIn 320ms ease both;
}

/* petit décalage progressif des cartes */
.article-grid.is-filtered-in .article-card:nth-child(2) {
    animation-delay: 25ms;
}

.article-grid.is-filtered-in .article-card:nth-child(3) {
    animation-delay: 50ms;
}

.article-grid.is-filtered-in .article-card:nth-child(4) {
    animation-delay: 75ms;
}

.article-grid.is-filtered-in .article-card:nth-child(n+5) {
    animation-delay: 90ms;
}

@keyframes blogGridIn {
    from {
        opacity: .20;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blogCardIn {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ------------------------------------------------------------
   TITRE DYNAMIQUE DE CATEGORIE
   JS ajoute cette classe au titre concerné.
   ------------------------------------------------------------ */

.blog-dynamic-title {
    transition:
        opacity 180ms ease,
        transform 220ms ease,
        filter 220ms ease;
}

.blog-dynamic-title.is-changing {
    opacity: 0;
    transform: translateY(-5px);
    filter: blur(2px);
}

.blog-dynamic-title.is-arriving {
    animation: blogTitleIn 380ms ease both;
}

@keyframes blogTitleIn {
    from {
        opacity: 0;
        transform: translateY(7px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* Respect préférence système */
@media (prefers-reduced-motion: reduce) {

    .article-grid,
    .article-grid .article-card,
    .blog-dynamic-title {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}


/* Mobile : filtres pleine largeur */
@media (max-width: 720px) {

    .blog-filter-tools {
        width: 100% !important;
    }

    .blog-search {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #blogSearch {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #blogSearch::placeholder {
        font-size: .88em;
    }
}

/* ============================================================
   BLOG — FINAL MOTION V2
   ============================================================ */

/* ---------- RECHERCHE ---------- */

.blog-filter-tools {
    min-width: 0 !important;
}

.blog-tag-filter {
    flex: 0 1 220px !important;
    min-width: 150px !important;
}

.blog-search {
    flex: 1 1 220px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

#blogSearch {
    box-sizing: border-box !important;
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    font-size: 15px !important;
}


/* ---------- HERO / TITRE CATEGORIE ---------- */

/*
 * La hauteur reste AUTO.
 * Donc un titre de 1, 2 ou 3 lignes pousse naturellement
 * tous les containers situés dessous.
 */
.blog-hero {
    height: auto !important;
    min-height: 0 !important;

    transition:
        opacity 220ms ease,
        transform 280ms cubic-bezier(.22,.61,.36,1),
        filter 220ms ease;
}

.blog-hero h1,
.blog-hero .hero-subtitle {
    transition:
        opacity 240ms ease,
        transform 300ms cubic-bezier(.22,.61,.36,1);
}

/* entrée lors du chargement d'une catégorie */
body.blog-category-enter .blog-hero {
    animation: blogHeroEnter 440ms
        cubic-bezier(.22,.61,.36,1) both;
}

body.blog-category-enter .blog-controls {
    animation: blogControlsEnter 500ms
        45ms cubic-bezier(.22,.61,.36,1) both;
}

body.blog-category-enter .article-grid {
    animation: blogArticlesEnter 520ms
        90ms cubic-bezier(.22,.61,.36,1) both;
}


/* sortie avant navigation */
body.blog-category-leave .blog-hero {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    filter: blur(2px);
}

body.blog-category-leave .blog-controls {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
}

body.blog-category-leave .article-grid {
    opacity: 0 !important;
    transform: translateY(7px) !important;
}


.blog-controls {
    transition:
        opacity 220ms ease,
        transform 280ms cubic-bezier(.22,.61,.36,1);
}


/* ---------- ANIMATIONS ---------- */

@keyframes blogHeroEnter {

    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes blogControlsEnter {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blogArticlesEnter {

    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 720px) {

    .blog-filter-tools {
        width: 100% !important;
    }

    .blog-tag-filter,
    .blog-search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
    }

    #blogSearch {
        width: 100% !important;
        font-size: 16px !important;
    }
}


/* accessibilité */
@media (prefers-reduced-motion: reduce) {

    .blog-hero,
    .blog-controls,
    .article-grid,
    .blog-hero h1,
    .blog-hero .hero-subtitle {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ============================================================
   BLOG — CATEGORY MOTION STABLE
   Aucun container ne disparaît / ne flotte.
   ============================================================ */

/*
 * Neutralise les anciennes animations des containers.
 */
body.blog-category-enter .blog-controls,
body.blog-category-enter .article-grid,
body.blog-category-leave .blog-controls,
body.blog-category-leave .article-grid {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/*
 * Le hero reste lui aussi dans le flux.
 * Sa hauteur réelle continue donc de positionner correctement
 * tout ce qui se trouve dessous.
 */
body.blog-category-enter .blog-hero,
body.blog-category-leave .blog-hero {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/*
 * On anime uniquement le contenu du hero.
 * Cela ne modifie jamais sa géométrie.
 */
.blog-hero h1,
.blog-hero .hero-subtitle {
    will-change: opacity, transform;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.22,.61,.36,1) !important;
}

body.blog-category-leave .blog-hero h1,
body.blog-category-leave .blog-hero .hero-subtitle {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
}

body.blog-category-enter .blog-hero h1 {
    animation: blogStableTitleIn 300ms
        cubic-bezier(.22,.61,.36,1) both !important;
}

body.blog-category-enter .blog-hero .hero-subtitle {
    animation: blogStableTitleIn 330ms
        35ms cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes blogStableTitleIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Les contrôles et la grille restent stables.
 */
.blog-controls,
.article-grid {
    filter: none !important;
}

/*
 * On conserve bien l'animation locale du filtrage tag/recherche.
 */
.article-grid.is-filtering {
    opacity: .18 !important;
    transform: translateY(5px) !important;
}

.article-grid.is-filtered-in {
    animation: blogGridIn 260ms ease both !important;
}

/* ============================================================
   BLOG — TITRE CATEGORIE SANS CLIGNOTEMENT
   ============================================================ */

/*
 * IMPORTANT :
 * l'ancien titre ne devient JAMAIS transparent avant navigation.
 */
body.blog-category-leave .blog-hero,
body.blog-category-leave .blog-hero h1,
body.blog-category-leave .blog-hero .hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/*
 * Nouvelle page :
 * animation extrêmement légère.
 * Pas de départ à opacity:0 afin d'éviter tout flash.
 */
body.blog-category-enter .blog-hero h1 {
    animation: blogTitleStableIn 240ms
        cubic-bezier(.22,.61,.36,1) both !important;
}

body.blog-category-enter .blog-hero .hero-subtitle {
    animation: blogTitleStableIn 280ms
        cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes blogTitleStableIn {
    from {
        opacity: .72;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Les blocs situés dessous ne participent jamais
 * à la transition de changement de catégorie.
 */
body.blog-category-enter .blog-controls,
body.blog-category-leave .blog-controls,
body.blog-category-enter .article-grid,
body.blog-category-leave .article-grid {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

/* ============================================================
   BLOG — DEPLACEMENT DOUX DES BLOCS SOUS LE TITRE
   ============================================================ */

.blog-controls,
.article-grid,
.blog-contact-section {
    transition:
        transform 0.4s cubic-bezier(.22,.61,.36,1),
        margin-top 0.4s cubic-bezier(.22,.61,.36,1),
        top 0.4s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BLOG — VIEW TRANSITION CATEGORIES 400ms
   ============================================================ */

/*
 * Le hero et tout ce qui se trouve dessous participent
 * au déplacement géométrique entre deux pages.
 */

.blog-hero {
    view-transition-name: blog-hero;
}

.blog-controls {
    view-transition-name: blog-controls;
}

.article-grid {
    view-transition-name: blog-articles;
}


/* transition globale entre les deux documents */

::view-transition-group(blog-hero),
::view-transition-group(blog-controls),
::view-transition-group(blog-articles) {
    animation-duration: 0.4s;
    animation-timing-function:
        cubic-bezier(.22,.61,.36,1);
}


/*
 * Le navigateur interpole les anciennes/nouvelles positions.
 * C'est ce qui permet aux containers de glisser réellement
 * quand le titre change de hauteur.
 */

::view-transition-old(blog-hero),
::view-transition-new(blog-hero),
::view-transition-old(blog-controls),
::view-transition-new(blog-controls),
::view-transition-old(blog-articles),
::view-transition-new(blog-articles) {
    animation-duration: 0.4s;
    animation-timing-function:
        cubic-bezier(.22,.61,.36,1);
}


/* Titre : crossfade très léger, sans passage brutal au vide */

::view-transition-old(blog-hero) {
    animation-name: blogOldHero;
}

::view-transition-new(blog-hero) {
    animation-name: blogNewHero;
}

@keyframes blogOldHero {
    from { opacity: 1; }
    to   { opacity: .55; }
}

@keyframes blogNewHero {
    from { opacity: .55; }
    to   { opacity: 1; }
}


/*
 * On neutralise les anciennes animations de navigation.
 * La View Transition devient l'unique animation catégorie.
 */

body.blog-category-enter .blog-hero,
body.blog-category-enter .blog-hero h1,
body.blog-category-enter .blog-hero .hero-subtitle,
body.blog-category-enter .blog-controls,
body.blog-category-enter .article-grid,

body.blog-category-leave .blog-hero,
body.blog-category-leave .blog-hero h1,
body.blog-category-leave .blog-hero .hero-subtitle,
body.blog-category-leave .blog-controls,
body.blog-category-leave .article-grid {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}


/* L'animation locale tag/recherche reste disponible */

.article-grid.is-filtering {
    opacity: .18 !important;
    transform: translateY(5px) !important;
}

.article-grid.is-filtered-in {
    animation: blogGridIn 260ms ease both !important;
}


@media (prefers-reduced-motion: reduce) {

    ::view-transition-group(blog-hero),
    ::view-transition-group(blog-controls),
    ::view-transition-group(blog-articles),
    ::view-transition-old(blog-hero),
    ::view-transition-new(blog-hero),
    ::view-transition-old(blog-controls),
    ::view-transition-new(blog-controls),
    ::view-transition-old(blog-articles),
    ::view-transition-new(blog-articles) {
        animation-duration: 0.001ms !important;
    }
}

/* ============================================================
   BLOG — TITRE CATEGORIE : FADE OUT → FADE IN
   Evite toute superposition des deux titres
   ============================================================ */

/*
 * Ancien hero :
 * visible au départ puis disparaît complètement
 * pendant la première moitié.
 */
::view-transition-old(blog-hero) {
    animation: blogHeroFadeOut 0.20s ease-in both !important;
}

/*
 * Nouveau hero :
 * reste invisible pendant les 0.20 premières secondes,
 * puis apparaît pendant les 0.20 suivantes.
 */
::view-transition-new(blog-hero) {
    animation: blogHeroFadeIn 0.20s 0.20s ease-out both !important;
}

@keyframes blogHeroFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes blogHeroFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
 * La géométrie continue à se déplacer sur 0.4 s :
 * les blocs sous le hero glissent donc pendant
 * toute la transition.
 */
::view-transition-group(blog-hero),
::view-transition-group(blog-controls),
::view-transition-group(blog-articles) {
    animation-duration: 0.4s !important;
    animation-timing-function:
        cubic-bezier(.22,.61,.36,1) !important;
}

/* ============================================================
   BLOG — HEADER FIXE TOUS ECRANS
   ============================================================ */

.blog-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;

    width: 100% !important;
    box-sizing: border-box !important;

    /* évite les artefacts pendant le scroll mobile */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}

/*
 * Sticky est volontairement utilisé plutôt que fixed :
 * le header reste dans le flux, donc aucun contenu n'est
 * masqué dessous et aucun padding artificiel n'est nécessaire.
 */
@media (max-width: 1100px) {

    .blog-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .blog-main-nav {
        position: relative;
        z-index: 1001;
    }
}

@media (max-width: 720px) {

    .blog-header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
    }
}


/* ============================================================
   BLOG — SCROLL TOP
   ============================================================ */

#blogScrollTop.blog-scroll-top {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 1200 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(10px) scale(.94) !important;

    pointer-events: none !important;

    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.22,.61,.36,1),
        visibility 0s linear .28s !important;
}

#blogScrollTop.blog-scroll-top.visible {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0) scale(1) !important;

    pointer-events: auto !important;

    transition:
        opacity .22s ease,
        transform .28s cubic-bezier(.22,.61,.36,1),
        visibility 0s !important;
}

@media (max-width: 720px) {

    #blogScrollTop.blog-scroll-top {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* ============================================================
   BLOG — TABLETTE / MOBILE
   Catégories + tags + recherche fixes sous le header
   ============================================================ */

@media (max-width: 1100px) {

    .blog-controls {
        position: sticky !important;
        top: var(--blog-header-height, 0px) !important;
        z-index: 900 !important;

        width: 100% !important;
        box-sizing: border-box !important;

        /* nécessaire pour que les articles ne passent pas dessous */
        background: var(--blog-background, #07101c) !important;

        /* stabilité Safari/iOS */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        backface-visibility: hidden;

        transition:
            box-shadow .2s ease,
            background-color .2s ease !important;
    }

    .blog-controls.is-stuck {
        box-shadow:
            0 12px 28px rgba(0,0,0,.22);
    }

    /*
     * Les catégories restent horizontalement scrollables.
     */
    .category-scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
    }

    .category-scroll::-webkit-scrollbar {
        display: none;
    }

    /*
     * Tags + recherche restent dans la zone sticky.
     */
    .blog-filter-tools {
        position: relative !important;
        z-index: 1 !important;
    }
}


/* Smartphone */
@media (max-width: 720px) {

    .blog-controls {
        top: var(--blog-header-height, 0px) !important;
        max-height: calc(
            100dvh - var(--blog-header-height, 0px)
        );

        overflow: visible !important;
    }

    .category-scroll {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   BLOG — MOBILE/TABLETTE FIXED CONTROLS V2
   ============================================================ */

.blog-controls-spacer {
    display: none;
}

@media (max-width: 1100px) {

    /*
     * JS ajoute .mobile-controls-fixed uniquement lorsque
     * les contrôles atteignent le header.
     */
    .blog-controls.mobile-controls-fixed {
        position: fixed !important;

        top: var(--blog-header-height, 0px) !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        z-index: 950 !important;

        box-sizing: border-box !important;

        background: #07101c !important;

        transform: none !important;
        -webkit-transform: none !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.24) !important;
    }

    .blog-controls-spacer.active {
        display: block;
        width: 100%;
    }

    .blog-controls.mobile-controls-fixed .category-scroll {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        max-width: 100% !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .blog-controls.mobile-controls-fixed
    .category-scroll::-webkit-scrollbar {
        display: none;
    }
}


/* smartphone */
@media (max-width: 720px) {

    .blog-controls.mobile-controls-fixed {
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    .blog-controls.mobile-controls-fixed
    .blog-filter-tools {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   BLOG — MOBILE/TABLETTE NAV V3
   Header fixed + catégories select sur smartphone
   ============================================================ */

@media (max-width: 1100px) {

    /* HEADER REELLEMENT FIXE */
    .blog-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        z-index: 1200 !important;

        margin: 0 !important;
        box-sizing: border-box !important;

        transform: none !important;
        -webkit-transform: none !important;
    }

    /*
     * Le JS mesure le header et réserve exactement
     * sa hauteur dans la page.
     */
    body {
        padding-top:
            var(--blog-header-height, 0px) !important;
    }

    /* contrôles toujours sous le header */
    .blog-controls.mobile-controls-fixed {
        top:
            var(--blog-header-height, 0px) !important;

        z-index: 1100 !important;
    }
}


/* ============================================================
   SMARTPHONE — CATEGORIES EN SELECT
   ============================================================ */

.blog-mobile-category-select {
    display: none;
}

@media (max-width: 720px) {

    /*
     * La navigation catégories desktop existe toujours
     * dans le DOM, mais devient invisible visuellement.
     */
    .blog-controls .category-scroll {
        display: none !important;
    }

    .blog-mobile-category-select {
        display: block !important;

        position: relative;

        width: 100%;
        min-width: 0;

        margin: 0 0 10px;
    }

    .blog-mobile-category-select select {
        display: block;

        width: 100% !important;
        min-width: 0 !important;
        height: 48px;

        box-sizing: border-box;

        padding:
            0 48px 0 17px;

        border-radius: 24px;

        border:
            1px solid rgba(255,255,255,.16);

        background:
            rgba(255,255,255,.055);

        color: #fff;

        font: inherit;
        font-size: 15px;

        outline: none;

        appearance: none;
        -webkit-appearance: none;

        cursor: pointer;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blog-mobile-category-select::after {
        content: "⌄";

        position: absolute;

        right: 18px;
        top: 50%;

        transform: translateY(-55%);

        color: rgba(255,255,255,.72);

        font-size: 17px;

        pointer-events: none;
    }

    .blog-mobile-category-select select:focus {
        border-color:
            rgba(255,255,255,.34);
    }

    .blog-mobile-category-select select option {
        background: #fff;
        color: #111827;
    }

    /*
     * Le bloc fixe devient beaucoup plus compact :
     * catégorie select + tag + recherche.
     */
    .blog-controls.mobile-controls-fixed {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}


/* ==========================================================
   BLOG COMMUNITY V1
   ========================================================== */

.blog-account-nav{
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:auto;
}

.blog-account-nav a{
    text-decoration:none;
    white-space:nowrap;
    font-size:12px;
    font-weight:600;
}

.blog-account-login,
.blog-account-link{
    color:inherit;
    opacity:.78;
}

.blog-account-create{
    padding:9px 15px;
    border-radius:999px;
    background:currentColor;
    color:#fff !important;
}


/* COMMENTS */

.blog-comments{
    max-width:820px;
    margin:70px auto 15px;
    padding-top:42px;
    border-top:1px solid rgba(100,120,135,.18);
}

.blog-comments-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:28px;
}

.blog-comments-eyebrow{
    margin-bottom:7px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.18em;
    opacity:.5;
}

.blog-comments-heading h2{
    margin:0;
    font-size:27px;
    font-weight:500;
}

.blog-comments-heading h2 span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:27px;
    height:27px;
    margin-left:6px;
    padding:0 7px;
    border-radius:50%;
    font-size:11px;
    background:rgba(100,120,135,.1);
}

.blog-comments-empty{
    padding:24px;
    border-radius:18px;
    background:rgba(100,120,135,.055);
    opacity:.65;
    line-height:1.6;
}

.blog-comments-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.blog-comment{
    margin-left:
        calc(
            min(var(--comment-depth), 4)
            * 25px
        );
    padding:18px 20px;
    border-left:2px solid rgba(100,120,135,.15);
    border-radius:0 15px 15px 0;
    background:rgba(100,120,135,.045);
}

.blog-comment-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.blog-comment-head strong{
    font-size:13px;
}

.blog-comment-head time{
    font-size:10px;
    opacity:.45;
}

.blog-comment-content{
    font-size:14px;
    line-height:1.65;
}

.blog-comment-reply{
    margin-top:11px;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    font-size:11px;
    font-weight:600;
    opacity:.55;
    cursor:pointer;
}

.blog-comment-reply:hover{
    opacity:1;
}


/* COMPOSER */

.blog-comment-compose{
    margin-top:30px;
    padding:25px;
    border-radius:20px;
    background:rgba(100,120,135,.055);
}

.blog-comment-compose h3{
    margin:0 0 6px;
    font-size:18px;
}

.blog-comment-identity{
    margin:0 0 18px;
    font-size:12px;
    opacity:.6;
}

.blog-comment-form textarea{
    display:block;
    width:100%;
    min-height:130px;
    resize:vertical;
    padding:16px;
    border:1px solid rgba(100,120,135,.18);
    border-radius:15px;
    background:rgba(100,120,135,.04);
    color:inherit;
    font:inherit;
    line-height:1.6;
    outline:none;
}

.blog-comment-form textarea:focus{
    border-color:rgba(100,120,135,.45);
}

.blog-comment-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:45px;
    margin-top:13px;
    padding:0 20px;
    border:0;
    border-radius:999px;
    background:#101b25;
    color:#fff;
    font:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.blog-comment-status{
    min-height:20px;
    margin-top:10px;
    font-size:12px;
}

.blog-comment-status.success{
    color:#31946a;
}

.blog-comment-status.error{
    color:#c44c4c;
}

.blog-comment-moderation{
    margin:13px 0 0;
    font-size:10px;
    opacity:.45;
}

.blog-comment-honeypot{
    position:absolute !important;
    left:-10000px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}

.blog-reply-indicator{
    margin:0 0 12px;
    padding:10px 13px;
    border-radius:11px;
    font-size:11px;
    background:rgba(100,120,135,.08);
}

.blog-reply-indicator button{
    float:right;
    border:0;
    background:none;
    color:inherit;
    font:inherit;
    cursor:pointer;
    opacity:.6;
}


/* LOGIN BOX */

.blog-comment-login-box{
    margin-top:28px;
    padding:24px;
    border-radius:19px;
    text-align:center;
    background:rgba(100,120,135,.055);
}

.blog-comment-login-box p{
    margin:0 0 17px;
}

.blog-comment-login-box div{
    display:flex;
    justify-content:center;
    gap:9px;
    flex-wrap:wrap;
}

.blog-comment-login-box a{
    padding:10px 17px;
    border:1px solid rgba(100,120,135,.18);
    border-radius:999px;
    color:inherit;
    text-decoration:none;
    font-size:12px;
}

.blog-comment-login-box a.primary{
    background:#101b25;
    color:#fff;
}


/* MOBILE */

@media(max-width:1100px){

    .blog-account-nav{
        gap:6px;
    }

    .blog-account-nav a{
        font-size:10px;
    }

    .blog-account-create{
        padding:8px 10px;
    }
}

@media(max-width:720px){

    .blog-account-nav{
        position:absolute;
        right:14px;
        top:50%;
        transform:translateY(-50%);
    }

    .blog-account-login{
        display:none;
    }

    .blog-account-create{
        padding:8px 11px;
        font-size:9px !important;
    }

    .blog-comments{
        margin-top:50px;
        padding-top:30px;
    }

    .blog-comment{
        margin-left:
            calc(
                min(var(--comment-depth), 4)
                * 10px
            );
        padding:15px;
    }

    .blog-comment-head{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .blog-comment-compose{
        padding:18px;
    }
}



/* ==========================================================
   BLOG HEADER + ACCOUNT — V2
   ========================================================== */

.blog-header{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:70px;
    padding-left:54px !important;
    padding-right:38px !important;
    gap:0 !important;
}

/* Logo */

.blog-logo{
    flex:0 0 auto !important;
    margin:0 !important;
}

/* Navigation principale :
   vraie respiration après le logo */

.blog-main-nav{
    flex:0 0 auto !important;
    margin-left:42px !important;
    margin-right:0 !important;
}

/* Compte complètement à droite */

.blog-account-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;

    margin-left:auto !important;
    padding-left:30px !important;

    flex:0 0 auto !important;
}

/* Connexion */

.blog-account-nav .blog-account-login,
.blog-account-nav .blog-account-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:38px;
    padding:0 13px !important;

    color:rgba(255,255,255,.78) !important;
    background:transparent !important;

    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.01em;

    opacity:1 !important;
    text-decoration:none !important;
}

.blog-account-nav .blog-account-login:hover,
.blog-account-nav .blog-account-link:hover{
    color:#fff !important;
}

/* Créer un compte */

.blog-account-nav .blog-account-create{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:38px;
    padding:0 18px !important;

    border:1px solid rgba(255,255,255,.17) !important;
    border-radius:999px !important;

    background:rgba(255,255,255,.96) !important;
    color:#091824 !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;

    opacity:1 !important;
    text-decoration:none !important;

    transition:
        transform .2s ease,
        background .2s ease;
}

.blog-account-nav .blog-account-create:hover{
    background:#fff !important;
    transform:translateY(-1px);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1100px){

    .blog-header{
        min-height:66px !important;
        padding-left:28px !important;
        padding-right:24px !important;
    }

    .blog-main-nav{
        margin-left:30px !important;
    }

    .blog-account-nav{
        margin-left:auto !important;
        padding-left:18px !important;
    }

    .blog-account-nav .blog-account-login,
    .blog-account-nav .blog-account-link{
        font-size:10px !important;
        padding:0 8px !important;
    }

    .blog-account-nav .blog-account-create{
        min-height:34px !important;
        padding:0 13px !important;
        font-size:10px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:720px){

    .blog-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        min-height:62px !important;

        padding:
            0 14px !important;

        display:flex !important;
        align-items:center !important;

        z-index:1200 !important;
    }

    .blog-logo{
        max-width:calc(100% - 118px) !important;
    }

    /*
     * Sur mobile, la navigation Blog/Site/Boutique
     * est déjà prise en charge par le système mobile
     * existant. On évite de compresser le header.
     */
    .blog-main-nav{
        margin-left:18px !important;
    }

    .blog-account-nav{
        position:static !important;
        transform:none !important;

        margin-left:auto !important;
        padding-left:10px !important;

        gap:5px !important;
    }

    /*
     * Si déconnecté, on garde un seul CTA compact.
     */
    .blog-account-nav .blog-account-login{
        display:none !important;
    }

    .blog-account-nav .blog-account-create{
        min-height:33px !important;
        padding:0 11px !important;

        font-size:9px !important;
        letter-spacing:0 !important;
    }

    /*
     * Connecté : Mon espace reste visible.
     */
    .blog-account-nav .blog-account-link{
        min-height:33px !important;
        padding:0 10px !important;

        border:1px solid rgba(255,255,255,.16);
        border-radius:999px;

        color:#fff !important;
        font-size:9px !important;
    }
}


/* Très petit téléphone */

@media (max-width:480px){

    .blog-header{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .blog-main-nav{
        margin-left:12px !important;
    }

    .blog-account-nav{
        padding-left:6px !important;
    }

    .blog-account-nav .blog-account-create{
        padding:0 9px !important;
    }
}



/* ==========================================================
   BLOG HEADER + ACCOUNT — V2
   ========================================================== */

.blog-header{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:70px;
    padding-left:54px !important;
    padding-right:38px !important;
    gap:0 !important;
}

/* Logo */

.blog-logo{
    flex:0 0 auto !important;
    margin:0 !important;
}

/* Navigation principale :
   vraie respiration après le logo */

.blog-main-nav{
    flex:0 0 auto !important;
    margin-left:42px !important;
    margin-right:0 !important;
}

/* Compte complètement à droite */

.blog-account-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;

    margin-left:auto !important;
    padding-left:30px !important;

    flex:0 0 auto !important;
}

/* Connexion */

.blog-account-nav .blog-account-login,
.blog-account-nav .blog-account-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:38px;
    padding:0 13px !important;

    color:rgba(255,255,255,.78) !important;
    background:transparent !important;

    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:.01em;

    opacity:1 !important;
    text-decoration:none !important;
}

.blog-account-nav .blog-account-login:hover,
.blog-account-nav .blog-account-link:hover{
    color:#fff !important;
}

/* Créer un compte */

.blog-account-nav .blog-account-create{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:38px;
    padding:0 18px !important;

    border:1px solid rgba(255,255,255,.17) !important;
    border-radius:999px !important;

    background:rgba(255,255,255,.96) !important;
    color:#091824 !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;

    opacity:1 !important;
    text-decoration:none !important;

    transition:
        transform .2s ease,
        background .2s ease;
}

.blog-account-nav .blog-account-create:hover{
    background:#fff !important;
    transform:translateY(-1px);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1100px){

    .blog-header{
        min-height:66px !important;
        padding-left:28px !important;
        padding-right:24px !important;
    }

    .blog-main-nav{
        margin-left:30px !important;
    }

    .blog-account-nav{
        margin-left:auto !important;
        padding-left:18px !important;
    }

    .blog-account-nav .blog-account-login,
    .blog-account-nav .blog-account-link{
        font-size:10px !important;
        padding:0 8px !important;
    }

    .blog-account-nav .blog-account-create{
        min-height:34px !important;
        padding:0 13px !important;
        font-size:10px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:720px){

    .blog-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        min-height:62px !important;

        padding:
            0 14px !important;

        display:flex !important;
        align-items:center !important;

        z-index:1200 !important;
    }

    .blog-logo{
        max-width:calc(100% - 118px) !important;
    }

    /*
     * Sur mobile, la navigation Blog/Site/Boutique
     * est déjà prise en charge par le système mobile
     * existant. On évite de compresser le header.
     */
    .blog-main-nav{
        margin-left:18px !important;
    }

    .blog-account-nav{
        position:static !important;
        transform:none !important;

        margin-left:auto !important;
        padding-left:10px !important;

        gap:5px !important;
    }

    /*
     * Si déconnecté, on garde un seul CTA compact.
     */
    .blog-account-nav .blog-account-login{
        display:none !important;
    }

    .blog-account-nav .blog-account-create{
        min-height:33px !important;
        padding:0 11px !important;

        font-size:9px !important;
        letter-spacing:0 !important;
    }

    /*
     * Connecté : Mon espace reste visible.
     */
    .blog-account-nav .blog-account-link{
        min-height:33px !important;
        padding:0 10px !important;

        border:1px solid rgba(255,255,255,.16);
        border-radius:999px;

        color:#fff !important;
        font-size:9px !important;
    }
}


/* Très petit téléphone */

@media (max-width:480px){

    .blog-header{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .blog-main-nav{
        margin-left:12px !important;
    }

    .blog-account-nav{
        padding-left:6px !important;
    }

    .blog-account-nav .blog-account-create{
        padding:0 9px !important;
    }
}



/* ==========================================================
   BLOG MOBILE HEADER V3 — FINAL
   ========================================================== */

.blog-account-icon,
.blog-create-icon{
    display:none;
}


@media (max-width:720px){

    /* HEADER FIXE */

    .blog-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        height:62px !important;
        min-height:62px !important;

        padding:0 14px !important;

        display:flex !important;
        align-items:center !important;

        background:#071722 !important;

        z-index:1200 !important;

        border-bottom:
            1px solid rgba(255,255,255,.08) !important;
    }


    /* LOGO */

    .blog-logo{
        flex:0 1 auto !important;

        width:auto !important;
        max-width:calc(100% - 92px) !important;

        margin:0 !important;
    }

    .blog-logo-m{
        flex:0 0 auto !important;
    }

    .blog-logo-copy{
        min-width:0 !important;
    }

    .blog-logo-copy strong{
        display:block !important;

        font-size:10px !important;
        line-height:1.15 !important;
        letter-spacing:.17em !important;

        white-space:nowrap !important;
    }

    /* baseline retirée seulement mobile */

    .blog-logo-copy small{
        display:none !important;
    }


    /* ======================================================
       NAV BLOG / SITE / BOUTIQUE
       seconde ligne sous le header
       ====================================================== */

    .blog-main-nav{
        position:absolute !important;

        top:62px !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        height:45px !important;

        margin:0 !important;
        padding:6px 12px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:4px !important;

        border:0 !important;
        border-radius:0 !important;

        background:#0a1b27 !important;

        border-bottom:
            1px solid rgba(255,255,255,.07) !important;
    }

    .blog-main-nav a{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:31px !important;

        padding:0 14px !important;

        font-size:9px !important;
        letter-spacing:.03em !important;

        border-radius:999px !important;
    }


    /* ======================================================
       COMPTE
       ====================================================== */

    .blog-account-nav{
        position:static !important;

        flex:0 0 auto !important;

        display:flex !important;
        align-items:center !important;

        margin:0 0 0 auto !important;
        padding:0 !important;

        gap:7px !important;

        transform:none !important;
    }

    .blog-account-text{
        display:none !important;
    }

    .blog-account-icon,
    .blog-create-icon{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /* Connexion / Mon espace */

    .blog-account-nav .blog-account-login,
    .blog-account-nav .blog-account-link{

        display:flex !important;

        width:35px !important;
        min-width:35px !important;

        height:35px !important;
        min-height:35px !important;

        padding:0 !important;

        border:
            1px solid rgba(255,255,255,.22) !important;

        border-radius:50% !important;

        background:
            rgba(255,255,255,.055) !important;

        color:#fff !important;

        opacity:1 !important;
    }


    /* icône utilisateur */

    .blog-account-icon{
        position:relative;

        width:11px !important;
        height:11px !important;

        border:
            1.5px solid currentColor;

        border-radius:50%;
    }

    .blog-account-icon::after{
        content:"";

        position:absolute;

        left:50%;
        top:13px;

        width:17px;
        height:9px;

        transform:translateX(-50%);

        border:
            1.5px solid currentColor;

        border-bottom:0;

        border-radius:10px 10px 0 0;
    }


    /* création compte */

    .blog-account-nav .blog-account-create{

        display:flex !important;

        width:35px !important;
        min-width:35px !important;

        height:35px !important;
        min-height:35px !important;

        padding:0 !important;

        border:0 !important;
        border-radius:50% !important;

        background:#fff !important;
        color:#071722 !important;

        opacity:1 !important;

        transform:none !important;
    }

    .blog-create-icon{
        font-size:20px !important;
        font-weight:300 !important;
        line-height:1 !important;
    }


    /*
     * 62 header
     * + 45 navigation
     */

    body{
        padding-top:107px !important;
    }

}


@media (max-width:420px){

    .blog-header{
        padding-left:11px !important;
        padding-right:11px !important;
    }

    .blog-logo{
        max-width:
            calc(100% - 86px) !important;
    }

    .blog-logo-copy strong{
        font-size:9px !important;
        letter-spacing:.13em !important;
    }

    .blog-main-nav{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .blog-main-nav a{
        padding-left:11px !important;
        padding-right:11px !important;
    }

}



/* ==========================================================
   BLOG MOBILE CLEAN V4
   Une seule barre fixe : logo + compte
   ========================================================== */

@media (max-width:720px){

    /*
     * 1. HEADER : SEUL ELEMENT FIXE
     */

    .blog-header{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        height:62px !important;
        min-height:62px !important;

        overflow:visible !important;

        z-index:1200 !important;
    }


    /*
     * 2. NAVIGATION BLOG / SITE / BOUTIQUE
     *
     * On la remet dans le flux visuel.
     * Elle est positionnée juste sous le header,
     * mais ne reste PLUS collée pendant le scroll.
     */

    .blog-main-nav{
        position:absolute !important;

        top:62px !important;
        left:0 !important;
        right:0 !important;

        height:45px !important;
        min-height:45px !important;

        z-index:1 !important;
    }


    /*
     * Le contenu commence après les deux barres
     * au chargement.
     */

    body{
        padding-top:107px !important;
    }


    /*
     * 3. CONTROLES :
     * catégories / tags / recherche
     * NE DOIVENT PLUS ETRE FIXES
     */

    .blog-controls,
    .blog-controls.mobile-controls-fixed{
        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;

        transform:none !important;

        z-index:10 !important;
    }

    .blog-controls-spacer{
        display:none !important;
        height:0 !important;
        min-height:0 !important;
    }


    /*
     * 4. ICONE UTILISATEUR
     * Nouveau dessin entièrement contenu
     * dans son bouton.
     */

    .blog-account-icon{
        position:relative !important;

        display:block !important;

        width:18px !important;
        height:18px !important;

        border:0 !important;
        border-radius:0 !important;

        overflow:visible !important;
    }

    .blog-account-icon::before{
        content:"";

        position:absolute;

        top:1px;
        left:50%;

        width:7px;
        height:7px;

        transform:translateX(-50%);

        border:
            1.4px solid currentColor;

        border-radius:50%;
    }

    .blog-account-icon::after{
        content:"";

        position:absolute;

        left:50%;
        bottom:1px;

        width:13px;
        height:7px;

        transform:translateX(-50%);

        border:
            1.4px solid currentColor;

        border-radius:
            8px 8px 4px 4px;
    }


    /*
     * 5. BOUTONS COMPTE
     */

    .blog-account-nav
    .blog-account-login,
    .blog-account-nav
    .blog-account-link,
    .blog-account-nav
    .blog-account-create{

        width:36px !important;
        min-width:36px !important;

        height:36px !important;
        min-height:36px !important;

        overflow:hidden !important;
    }


    /*
     * 6. ARTICLES
     *
     * Neutralise les éventuels états
     * d'animation/filter restés bloqués.
     */

    .article-grid{
        position:relative !important;

        visibility:visible !important;

        opacity:1 !important;

        transform:none !important;
    }

    .article-grid .article-card:not([hidden]){
        visibility:visible !important;
    }

}


/*
 * Sur très petit écran :
 * toujours une seule barre fixe.
 */

@media (max-width:420px){

    body{
        padding-top:107px !important;
    }

}


/* Ajustement optique icône compte mobile */
@media (max-width:720px){
    .blog-account-icon{
        transform:translateY(-2px) !important;
    }
}



/* ==========================================================
   ARTICLES GRID — RESPONSIVE FINAL
   ========================================================== */

.article-grid{
    width:100% !important;
    max-width:100% !important;

    display:grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap:20px !important;

    align-items:stretch !important;

    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;

    overflow:visible !important;
}


/* Toutes les cartes suivent désormais la même grille */

.article-grid > .article-card,
.article-grid > .article-card:first-child{
    grid-column:auto !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;

    display:block !important;

    overflow:hidden !important;
}


/* Le lien occupe toute la hauteur */

.article-card-link{
    width:100% !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    color:inherit !important;
    text-decoration:none !important;
}


/* Images homogènes */

.article-card .article-image,
.article-card:first-child .article-image{
    position:relative !important;

    width:100% !important;
    aspect-ratio:16 / 9 !important;

    flex:0 0 auto !important;

    overflow:hidden !important;
}


.article-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* Placeholder sans image */

.article-placeholder{
    width:100% !important;
    height:100% !important;

    display:grid !important;
    place-items:center !important;
}


/* Corps flexible pour aligner Lire l'article */

.article-card-body{
    min-width:0 !important;

    flex:1 1 auto !important;

    display:flex !important;
    flex-direction:column !important;

    padding:24px !important;
}


.article-card h2,
.article-card:first-child h2{
    margin:11px 0 9px !important;

    font-size:
        clamp(23px, 2vw, 29px) !important;

    line-height:1.12 !important;

    overflow-wrap:anywhere;
}


.article-card h3{
    margin:0 0 11px !important;

    font-size:13px !important;
    line-height:1.45 !important;

    overflow-wrap:anywhere;
}


.article-card p{
    margin:0 0 20px !important;

    font-size:14px !important;
    line-height:1.62 !important;

    overflow-wrap:anywhere;
}


.article-card .read-more{
    margin-top:auto !important;
}


/* Évite toute barre horizontale */

.blog-main,
.blog-content,
.article-grid,
.article-card,
.article-card-link,
.article-card-body{
    min-width:0 !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1000px){

    .article-grid{
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:17px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:720px){

    .article-grid{
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:16px !important;

        width:100% !important;
    }

    .article-grid > .article-card,
    .article-grid > .article-card:first-child{
        grid-column:1 !important;

        width:100% !important;
        max-width:100% !important;
    }

    .article-card .article-image,
    .article-card:first-child .article-image{
        aspect-ratio:16 / 9 !important;
    }

    .article-card-body{
        padding:20px !important;
    }

    .article-card h2,
    .article-card:first-child h2{
        font-size:
            clamp(23px, 7vw, 28px) !important;

        line-height:1.12 !important;
    }

    .article-card h3{
        font-size:13px !important;
    }

    .article-card p{
        font-size:14px !important;
        line-height:1.6 !important;
    }

}


/* ==========================================================
   PETITS MOBILES
   ========================================================== */

@media (max-width:420px){

    .article-grid{
        gap:14px !important;
    }

    .article-card-body{
        padding:18px !important;
    }

    .article-card h2,
    .article-card:first-child h2{
        font-size:23px !important;
    }

}


/* ==========================================================
   TOUCH — pas de déplacement hover parasite
   ========================================================== */

@media (hover:none){

    .article-card:hover{
        transform:none !important;
    }

    .article-card:hover .article-image img{
        transform:none !important;
    }

}


/* ==========================================================
   ARTICLE GRID — HARD RESET FINAL
   Neutralise les anciens layouts éditoriaux / nth-child
   ========================================================== */

.article-grid{
    display:grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-auto-columns:auto !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;

    gap:20px !important;

    width:100% !important;
    max-width:100% !important;

    align-items:stretch !important;
}


/*
 * IMPORTANT :
 * neutralise TOUT placement individuel ancien,
 * y compris nth-child / first-child.
 */

.article-grid > article.article-card,
.article-grid > article.article-card:first-child,
.article-grid > article.article-card:nth-child(n){
    grid-column:auto !important;
    grid-row:auto !important;

    grid-column-start:auto !important;
    grid-column-end:auto !important;
    grid-row-start:auto !important;
    grid-row-end:auto !important;

    place-self:stretch !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;

    display:block !important;

    overflow:hidden !important;
}


/* Le lien constitue réellement la carte */

.article-grid > .article-card > .article-card-link{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;

    height:100% !important;

    box-sizing:border-box !important;
}


/* IMAGE */

.article-grid .article-image,
.article-grid .article-card:first-child .article-image,
.article-grid .article-card:nth-child(n) .article-image{
    display:block !important;

    width:100% !important;
    min-width:0 !important;

    height:auto !important;

    aspect-ratio:16 / 9 !important;

    flex:none !important;

    position:relative !important;

    overflow:hidden !important;
}


.article-grid .article-image img{
    display:block !important;

    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


.article-grid .article-placeholder{
    position:absolute !important;
    inset:0 !important;

    width:auto !important;
    height:auto !important;

    display:grid !important;
    place-items:center !important;
}


/* TEXTE */

.article-grid .article-card-body{
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;

    width:auto !important;
    min-width:0 !important;

    padding:24px !important;

    box-sizing:border-box !important;
}


.article-grid .article-card h2,
.article-grid .article-card:first-child h2,
.article-grid .article-card:nth-child(n) h2{
    width:auto !important;
    max-width:100% !important;

    margin:11px 0 9px !important;

    font-size:26px !important;
    line-height:1.12 !important;

    overflow-wrap:break-word !important;
    word-break:normal !important;
}


.article-grid .article-card h3{
    width:auto !important;
    max-width:100% !important;

    margin:0 0 11px !important;

    font-size:13px !important;
    line-height:1.45 !important;

    overflow-wrap:break-word !important;
}


.article-grid .article-card p{
    width:auto !important;
    max-width:100% !important;

    margin:0 0 20px !important;

    font-size:14px !important;
    line-height:1.62 !important;

    overflow-wrap:break-word !important;
}


.article-grid .read-more{
    margin-top:auto !important;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width:1000px){

    .article-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:18px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:720px){

    .article-grid{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-auto-flow:row !important;

        gap:16px !important;

        width:100% !important;
        max-width:100% !important;
    }


    .article-grid > article.article-card,
    .article-grid > article.article-card:first-child,
    .article-grid > article.article-card:nth-child(n){
        grid-column:1 / -1 !important;
        grid-row:auto !important;

        width:100% !important;
        max-width:100% !important;

        min-width:0 !important;
    }


    .article-grid .article-card-body{
        padding:20px !important;
    }


    .article-grid .article-card h2,
    .article-grid .article-card:first-child h2,
    .article-grid .article-card:nth-child(n) h2{
        font-size:25px !important;
        line-height:1.12 !important;
    }

}


/* PETITS TELEPHONES */

@media (max-width:420px){

    .article-grid{
        gap:14px !important;
    }

    .article-grid .article-card-body{
        padding:18px !important;
    }

    .article-grid .article-card h2,
    .article-grid .article-card:first-child h2,
    .article-grid .article-card:nth-child(n) h2{
        font-size:23px !important;
    }

}


/* ==========================================================
   COMPTE — ICONE UTILISATEUR + TEXTE
   ========================================================== */

.blog-account-nav .blog-account-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;
}


/*
 * Icône utilisateur desktop.
 * Les anciennes règles la masquaient hors mobile.
 */

.blog-account-nav
.blog-account-link
.blog-account-icon{
    position:relative !important;

    display:block !important;

    width:17px !important;
    min-width:17px !important;

    height:18px !important;

    flex:0 0 17px !important;

    overflow:visible !important;

    transform:none !important;
}


.blog-account-nav
.blog-account-link
.blog-account-icon::before{
    content:"" !important;

    position:absolute !important;

    top:0 !important;
    left:50% !important;

    width:6px !important;
    height:6px !important;

    transform:
        translateX(-50%) !important;

    border:
        1.4px solid currentColor !important;

    border-radius:50% !important;

    box-sizing:border-box !important;
}


.blog-account-nav
.blog-account-link
.blog-account-icon::after{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    bottom:0 !important;

    width:13px !important;
    height:8px !important;

    transform:
        translateX(-50%) !important;

    border:
        1.4px solid currentColor !important;

    border-radius:
        8px 8px 4px 4px !important;

    box-sizing:border-box !important;
}


/* ==========================================================
   ARTICLE — RETOUR MON ESPACE
   ========================================================== */

.article-member-back{
    width:max-content;

    display:inline-flex;
    align-items:center;

    gap:8px;

    margin:
        32px 0 4px;

    padding:
        9px 14px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:999px;

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.78);

    text-decoration:none;

    font-size:10px;
    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}


.article-member-back:hover{
    color:#fff;

    border-color:
        rgba(88,201,216,.32);

    background:
        rgba(88,201,216,.07);
}


.article-member-back-icon{
    position:relative;

    width:14px;
    height:15px;

    display:block;

    flex:0 0 14px;
}


.article-member-back-icon::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:5px;
    height:5px;

    transform:
        translateX(-50%);

    border:
        1.2px solid currentColor;

    border-radius:50%;
}


.article-member-back-icon::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:11px;
    height:7px;

    transform:
        translateX(-50%);

    border:
        1.2px solid currentColor;

    border-radius:
        7px 7px 3px 3px;
}


/* MOBILE :
   on garde l'icône seule dans le header,
   comme le design mobile actuel.
 */

@media(max-width:720px){

    .blog-account-nav
    .blog-account-link
    .blog-account-icon{
        display:block !important;

        width:18px !important;
        min-width:18px !important;

        height:18px !important;

        flex-basis:18px !important;

        transform:
            translateY(-2px) !important;
    }


    .article-member-back{
        margin-top:20px;

        padding:
            8px 12px;
    }

}