/* ============================================= */
/* HOME — refonte éditoriale (V2)                */
/* ============================================= */
:root {
    --cl-bg: #ffd75e;
    --cl-bg-hover: #ffc93a;
    --cl-soft: #fffaed;
    --cl-soft-2: #fffbea;
    /* Encre brune posée sur un SUPPORT Claudine (panneau crème, bulle
       blanche des chips, encart de source) : le support suit le thème,
       l'encre doit donc suivre avec lui. */
    --cl-ink: #7a5200;
    /* Encre brune posée sur le JAUNE d'identité (boutons "Demander" /
       "Interroger") : ce couple-là est figé dans les 2 thèmes, comme
       .btn-claudine-analyse. */
    --cl-ink-btn: #7a5200;
    --cl-border: #e6b800;
    --cl-focus: rgba(255, 215, 94, .25);
    --red: #d81e2c;
    --red-hover: #b3151f;
    --rule: var(--color-neutral-dcdce4);
    --rule-soft: var(--color-neutral-e5e7eb);
    --r-block: 8px;
    --r-ui: 4px;
    --r-full: 50%;
    --display: "Playfair Display", "Spectral", Georgia, serif;
    --serif: "Spectral", Georgia, serif;
    --util: "IBM Plex Sans", system-ui, sans-serif;
    --gut: clamp(16px, 2.6vw, 40px);
}

/* Mode sombre — blocs IA-Claudine de la home (encart du héro onglet
   Publications, et section principale plus bas dans la page).
   Arbitrage repris des fiches publication / emploi et du dépôt d'offre :
   le SUPPORT suit le thème, l'IDENTITÉ est préservée. Le fond crème
   devient donc la surface sombre et le brun remonte en jaune, tandis que
   le jaune --cl-bg, son liseré doré --cl-border et le halo de focus
   --cl-focus restent identiques partout.
   Sans cela, les puces de suggestion et le champ de saisie - dont le fond
   est en --surface-page, donc déjà basculé - affichaient du brun foncé
   sur fond sombre. */
[data-bs-theme="dark"] {
    --cl-soft:   var(--bs-gray-800);
    --cl-soft-2: var(--bs-gray-800);
    --cl-ink:    #ffd75e;
}

body {
    background: var(--surface-page);
    color: var(--text-strong);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
}

a {
    color: var(--text-accent);
    text-decoration: none;
}

.wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--gut);
}

.eyebrow {
    font-family: var(--util);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-mid);
}

.meta {
    font-family: var(--util);
    font-size: 12px;
    color: var(--text-accent-mid);
}

.more {
    font-family: var(--util);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.more:hover {
    color: var(--red);
}

.badge {
    display: inline-block;
    font-family: var(--util);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 7px;
    background: var(--color-services);
    color: var(--bs-white);
}

.badge--new {
    background: var(--red);
}

.badge--mid {
    background: var(--color-services-mid);
}

.badge--out {
    background: var(--surface-page);
    color: var(--text-accent);
    box-shadow: inset 0 0 0 1px var(--color-services);
}

.tagline {
    font-family: var(--util);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-accent-mid);
    display: block;
    margin-bottom: 5px;
}

/* ---- Hero ---- */
.hero {
    position: relative;
    overflow: hidden;
    color: var(--bs-white);
    background: linear-gradient(150deg, #2a2a44, var(--color-services-hover));
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(2px) saturate(1.08);
    transform: scale(1.02);
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(10, 10, 20, .88) 0%, rgba(10, 10, 20, .66) 30%, rgba(10, 10, 20, .22) 54%, rgba(10, 10, 20, .32) 68%, rgba(10, 10, 20, .1) 100%),
        linear-gradient(0deg, rgba(10, 10, 20, .55) 0%, rgba(10, 10, 20, 0) 46%);
}

.hero__in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 442px;
    gap: 44px;
    align-items: end;
    padding-top: 56px;
}

.hero__une {
    max-width: 620px;
}

.dash {
    display: block;
    width: 34px;
    height: 3px;
    background: var(--red);
    margin-bottom: 15px;
}

.hero__kicker {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}

.hero__kicker .meta {
    color: rgba(255, 255, 255, .6);
}

.chtag {
    display: inline-block;
    font-family: var(--util);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bs-white);
    background: var(--red);
    padding: 4px 10px;
}

.hero h1 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(30px, 3.8vw, 48px);
    line-height: 1.07;
    letter-spacing: -.015em;
    margin: 0 0 14px;
    color: var(--bs-white);
}

.hero h1 span {
    font-style: italic;
}

.hero__stand {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 20px;
    font-weight: 300;
}

.hero__link {
    color: inherit;
    text-decoration: none;
}

.hero__link:hover {
    color: var(--red);
}

.hero__cta {
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    white-space: nowrap;
}

.hero__cta:hover {
    color: var(--red-hover);
}

.hero__chains {
    position: relative;
    z-index: 1;
    padding-top: 26px;
    padding-bottom: 30px;
}

.hero__chains__lb {
    display: block;
    font-family: var(--util);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 10px;
}

.hchips {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.hchip {
    position: relative;
    aspect-ratio: 20/9;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
    color: var(--bs-white);
}

.hchip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hchip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .5) 100%);
}

.hchip b {
    position: relative;
    z-index: 1;
    font-family: var(--util);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
}

.hchip:hover {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.hchip--more {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hchip--more::after {
    display: none;
}

.hchip--more b {
    font-weight: 600;
    font-size: 11.5px;
}

.hchip--more:hover {
    background: rgba(255, 255, 255, .16);
}

/* ---- Hero à onglets (Publications / Emplois / Marchés / Agenda) ---- */
.hero--v2 {
    padding-bottom: 40px;
}

.hero__in.hero__in--v2 {
    grid-template-columns: 420px 1fr;
    align-items: stretch;
}

.hv2-left {
    display: flex;
    flex-direction: column;
    max-width: 420px;
}

.hv2-slogan {
    margin-bottom: 24px;
}

.hv2-slogan h1 {
    margin: 0;
    font-size: clamp(24px, 3vw, 38px);
}

.hv2-panel[data-hv2-panel="publications"] .hv2-clbox {
    margin-top: auto;
}

.hv2-panel[data-hv2-panel="emplois"] .hv2-left > .hv2-pitch:nth-child(2) {
    margin-top: auto;
    margin-bottom: 8px;
}

.hv2-chan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.hv2-chan-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    align-items: flex-end;
    padding: 0;
    color: var(--bs-white);
}

.hv2-chan-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hv2-chan-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
}

.hv2-chan-tile b {
    position: relative;
    z-index: 1;
    font-family: var(--util);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
}

/* Bandeau nom de chaîne : pleine largeur, en pied d'image.
   Voile gris moyen à demi opaque : assez dense pour détacher le texte
   blanc même sur une image claire, assez translucide pour laisser
   deviner la photo. */
.hv2-chan-tile:not(.hv2-chan-tile--more) b {
    width: 100%;
    padding: 8px 12px;
    background: rgba(58, 58, 68, .65);
    color: var(--bs-white);
}

.hv2-chan-tile:hover {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.hv2-chan-tile--more {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
}

.hv2-chan-tile--more::after {
    display: none;
}

@media (max-width: 1000px) {
    .hv2-left {
        max-width: none;
        display: contents;
    }

    .hero__in.hero__in--v2 {
        grid-template-columns: 1fr;
    }

    /* Mobile : titre → liste → boîtes d'info (ordre inverse du desktop) */
    .hv2-slogan {
        order: 1;
    }

    .hv2-right {
        order: 2;
    }

    .hv2-clbox {
        order: 3;
        margin-top: 24px;
    }

    .hv2-panel[data-hv2-panel="publications"] .hv2-clbox {
        margin-top: 24px;
    }

    .hv2-panel[data-hv2-panel="emplois"] .hv2-left > .hv2-pitch:nth-child(2) {
        margin-top: 3px;
    }
}

@media (max-width: 640px) {
    .hv2-chan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv2-right--emplois {
        grid-template-columns: 1fr;
    }
}

.hv2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 32px;
    padding-bottom: 4px;
}

.hv2-tab {
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 10px 18px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.hv2-tab:hover {
    border-color: rgba(255, 255, 255, .55);
    color: var(--bs-white);
}

.hv2-tab.is-active {
    border-color: var(--red);
    color: var(--bs-white);
}

.hv2-panel {
    padding-top: 0px;
}

.hv2-panel[hidden] {
    display: none;
}

/* ---- Panneau "Offres d'emploi" ---- */
.hv2-pitch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.clbox.hv2-pitch {
    padding: 14px 26px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--color-neutral-c9cad4);
}

.hv2-pitch + .hv2-pitch {
    margin-top: 3px;
}

.hv2-panel[data-hv2-panel="marches"] .hv2-pitch + .hv2-pitch,
.hv2-panel[data-hv2-panel="agenda"] .hv2-pitch + .hv2-pitch {
    margin-top: 8px;
}

.hv2-pitch__title {
    margin: 0 0 10px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    color: var(--bs-white);
}

.hv2-pitch__rule {
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 6px;
    background: var(--red);
}

.hv2-pitch .hv2-pitch__txt {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.hv2-pitch__ia {
    color: var(--cl-bg);
}

.hv2-pitch__ia .bi-stars {
    margin-right: 3px;
}

.hv2-pitch__link {
    display: inline-block;
    align-self: flex-end;
    margin-top: 0;
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
}

.hv2-pitch__link:hover {
    color: var(--red-hover);
}

.hv2-right--emplois {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    align-items: stretch;
    min-width: 0;
}

.hv2-emp-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 108px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--bs-white);
    min-width: 0;
}

.hv2-emp-tile__logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border-radius: 6px;
    overflow: hidden;
    font-size: 20px;
    color: rgba(255, 255, 255, .5);
}

.hv2-emp-tile__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hv2-emp-tile__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.hv2-emp-tile__title {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
}

.hv2-emp-tile__meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--util);
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.hv2-emp-tile__cta {
    flex: 0 0 auto;
    color: var(--red);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.hv2-emp-tile:hover {
    border-color: var(--red);
}

.hv2-emp-tile--more {
    height: 108px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, .08);
}

.hv2-emp-tile--more span {
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 640px) {
    /* Mobile : logo masqué, titre pleine largeur, CTA repoussé en dessous à droite */
    .hv2-emp-tile:not(.hv2-emp-tile--more) {
        flex-wrap: wrap;
        height: auto;
        align-items: flex-start;
    }

    .hv2-emp-tile__logo {
        display: none;
    }

    .hv2-emp-tile__body {
        flex: 1 1 100%;
    }

    .hv2-emp-tile__cta {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* ---- Panneaux "à venir" (Marchés / Agenda) ---- */
.hv2-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    border: 1px dashed rgba(255, 255, 255, .28);
}

/* ---- Bandeau ticker : un panneau par onglet ---- */
.hv2-tick-panel[hidden] {
    display: none;
}

/* ---- Bandeau "En ce moment" ---- */
.tick {
    background: var(--color-services);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tick__in {
    display: flex;
    align-items: stretch;
    height: 38px;
}

.tick__lb {
    background: var(--red);
    color: var(--bs-white);
    font-family: var(--util);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 14px;
    display: flex;
    align-items: center;
    flex: none;
}

.tick__items {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.tick__items::-webkit-scrollbar {
    display: none;
}

.tick__items a {
    font-family: var(--util);
    font-size: 12px;
    color: var(--color-neutral-c9cad4);
    padding: 0 18px;
    white-space: nowrap;
    line-height: 38px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.tick__items a b {
    color: var(--bs-white);
    font-weight: 600;
}

.tick__items a.tick__item--trunc {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tick__items a:hover {
    color: var(--cl-bg);
}

/* ---- Bloc IA-Claudine (question courte, hero) ---- */
.clbox {
    position: relative;
    background: var(--cl-soft);
    border: 1px solid var(--cl-border);
    padding: 18px;
    align-self: start;
}

.clbox label {
    font-family: var(--util);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cl-ink);
    display: block;
    margin-bottom: 10px;
}

.clbox__f {
    display: flex;
    background: var(--surface-page);
    border: 1px solid var(--cl-border);
}

.clbox__f input {
    flex: 1;
    border: 0;
    padding: 11px 12px;
    font-family: var(--serif);
    font-size: 15px;
    background: transparent;
}

.clbox__f input:focus {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--cl-focus);
}

.clbox__f button {
    border: 0;
    border-left: 1px solid var(--cl-border);
    background: var(--cl-bg);
    color: var(--cl-ink-btn);
    padding: 0 14px;
    font-family: var(--util);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.clbox__f button:hover {
    background: var(--cl-bg-hover);
}

.chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.chips a {
    font-family: var(--util);
    font-size: 11.5px;
    color: var(--cl-ink);
    background: var(--surface-page);
    border: 1px solid var(--cl-border);
    padding: 4px 9px;
}

.chips a:hover {
    background: var(--cl-bg);
    /* Le fond devient le jaune d'identité : l'encre repasse au brun, sinon
       en sombre --cl-ink (jaune) se poserait sur du jaune. */
    color: var(--cl-ink-btn);
}

.clbox p {
    margin: 12px 0 0;
    font-family: var(--util);
    font-size: 11.5px;
    color: var(--cl-ink);
    opacity: .8;
    line-height: 1.45;
}

/* ---- Les deux portes (Publications / Services) ---- */
.doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 30px 0 8px;
    align-items: stretch;
}

.door {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--color-services);
    padding: 22px 24px;
    background: var(--surface-page);
}

.door--pub {
    border-top-color: var(--red);
}

.door h2 {
    font-family: var(--display);
    font-size: 29px;
    font-weight: 400;
    margin: 0 0 6px;
}

.door h2 a:hover {
    color: var(--red);
}

.door>p {
    margin: 0 0 18px;
    font-size: 15.5px;
    color: var(--text-accent-mid);
    font-weight: 300;
}

.door__nums {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.door__nums b {
    font-family: var(--util);
    font-size: 17px;
    font-weight: 600;
    display: block;
    line-height: 1.2;
}

.door__nums span {
    font-family: var(--util);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-accent-mid);
}

.door__nums a {
    display: block;
    color: inherit;
}

.door__nums a:hover b {
    color: var(--red);
}

.door:hover {
    border-color: var(--color-services);
}

/* ---- Grille principale (contenu + rail latéral) ---- */
.body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.main {
    padding: 0 34px 0 0;
    min-width: 0;
}

.sec {
    padding: 40px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.sec:last-of-type {
    border-bottom: 0;
}

.sec__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    border-top: 2px solid var(--color-services);
    padding-top: 10px;
}

.sec__head h2 {
    font-family: var(--util);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.sec__head .more {
    margin-left: auto;
    color: var(--text-accent);
}

.sec__sub {
    font-family: var(--util);
    font-size: 13px;
    color: var(--text-accent-mid);
    margin: 0 0 24px;
}

.sec--revue .sec__head {
    border-color: var(--red);
}

.sec--fonds .sec__head {
    border-color: var(--color-services-mid);
}

.sec--ia .sec__head {
    border-color: var(--cl-bg);
}

.sec--svc .sec__head {
    border-color: var(--color-services);
}

.sec--channels .sec__head {
    border-color: var(--red);
}

/* ---- Carrousel "Nos chaînes thématiques" ---- */
.chan-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.chan {
    position: relative;
    flex: 0 0 172px;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    color: var(--bs-white);
    scroll-snap-align: start;
}

.chan img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chan::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, .72) 100%);
}

.chan__b {
    position: relative;
    z-index: 1;
}

.chan h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.18;
    margin: 0 0 4px;
}

.chan p {
    margin: 0;
    font-family: var(--util);
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .82);
}

.chan:hover {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

/* ---- Grille "Top de la semaine" / "Nos chaînes" ---- */
.week {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.wk__img {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
}

.wk__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wk__img .badge {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 1;
}

.w1 {
    background: linear-gradient(150deg, #cfe0c6, #7c9c6b 55%, #3d5233);
}

.w2 {
    background: linear-gradient(150deg, #f2e3b6, #cfa64d 55%, #7a5a1c);
}

.w3 {
    background: linear-gradient(150deg, #cbe3e6, #6ba3a8 55%, #2c5257);
}

.w4 {
    background: linear-gradient(150deg, #e2dbe9, #9a8bb0 55%, #4a3f5e);
}

.wk h3 {
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.28;
    margin: 9px 0 5px;
}

.wk:hover h3 {
    color: var(--red);
}

.k1 {
    background: linear-gradient(150deg, #e4a24a, #7a3d18);
}

.k2 {
    background: linear-gradient(150deg, #8fb0c4, #233a4a);
}

.k3 {
    background: linear-gradient(150deg, #7a7fe0, #221f52);
}

.k4 {
    background: linear-gradient(150deg, #c98a5c, #4a2e18);
}

.k5 {
    background: linear-gradient(150deg, var(--color-services-mid), var(--color-services));
}

.k6 {
    background: linear-gradient(150deg, #6fa876, #1e3d24);
}

/* ---- Nos dernières publications ---- */
.pubs {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 34px;
}

.feat__img {
    aspect-ratio: 16/9;
    background: linear-gradient(150deg, #e9dcc0, #c0a06a 55%, #6b5a38);
    position: relative;
    background-size: cover;
    background-position: center;
}

.feat__img .badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

.feat h3 {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.13;
    margin: 16px 0 9px;
}

.feat p {
    margin: 0;
    color: var(--text-accent-mid);
    font-weight: 300;
    font-size: 15.5px;
}

.feat:hover h3 {
    color: var(--red);
}

.mlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mlist li {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--rule-soft);
    align-items: start;
}

.mlist li:first-child {
    border-top: 0;
    padding-top: 0;
}

.mlist__img {
    aspect-ratio: 4/3;
    background: linear-gradient(150deg, #d5d8e2, #7b8199);
    background-size: cover;
    background-position: center;
}

.m1 {
    background: linear-gradient(150deg, #f0d9c0, #b8834c 60%, #5e401f);
}

.m2 {
    background: linear-gradient(150deg, #d3e0ee, #6d8fb4 60%, #2b405a);
}

.m3 {
    background: linear-gradient(150deg, #efd3e2, #c176a2 60%, #6b3251);
}

.mlist h4 {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.28;
    margin: 5px 0 4px;
}

.mlist li:hover h4 {
    color: var(--red);
}

/* ---- Notre veille documentaire ---- */
.veille {
    list-style: none;
    margin: 0;
    padding: 0;
}

.veille li {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    padding: 16px 0 16px 14px;
    border-top: 1px solid var(--rule-soft);
    border-left: 3px solid var(--color-services-mid);
    align-items: start;
}

.veille li:first-child {
    border-top: 0;
}

.veille__img {
    aspect-ratio: 3/4;
    background: linear-gradient(150deg, #dcdde4, #83879c);
    background-size: cover;
    background-position: center;
}

.veille h4 {
    font-family: var(--serif);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.28;
    margin: 5px 0 5px;
}

.veille li:hover h4 {
    color: var(--red);
}

.veille p {
    margin: 0 0 6px;
    font-size: 14.5px;
    color: var(--text-accent-mid);
    font-weight: 300;
    line-height: 1.45;
}

.biblio {
    font-family: var(--util);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--rule);
    background: var(--surface-page);
    color: var(--text-accent-mid);
    padding: 6px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.biblio:hover {
    border-color: var(--cl-border);
    background: var(--cl-soft);
    color: var(--cl-ink);
}

/* ---- IA-Claudine (section principale) ---- */
.claudine {
    background: var(--cl-soft);
    border: 1px solid var(--cl-border);
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 32px;
    align-items: center;
    margin-bottom: 26px;
}

.claudine h2 {
    font-family: var(--display);
    font-size: 29px;
    font-weight: 400;
    line-height: 1.13;
    margin: 10px 0 11px;
    color: var(--text-strong);
}

.claudine p {
    margin: 0;
    color: var(--cl-ink);
    font-size: 15.5px;
    font-weight: 300;
    max-width: 52ch;
}

.claudine .eyebrow {
    color: var(--cl-ink);
}

.cbox {
    background: var(--surface-page);
    border: 1px solid var(--cl-border);
    padding: 17px;
}

.cbox label {
    font-family: var(--util);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cl-ink);
    display: block;
    margin-bottom: 9px;
    font-weight: 600;
}

.cbox textarea {
    width: 100%;
    height: 56px;
    resize: none;
    background: var(--surface-page);
    border: 1px solid var(--rule);
    padding: 9px 10px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--text-strong);
}

.cbox textarea:focus {
    outline: none;
    border-color: var(--cl-border);
    box-shadow: 0 0 0 3px var(--cl-focus);
}

.cbox button {
    margin-top: 10px;
    width: 100%;
    background: var(--cl-bg);
    border: 1px solid var(--cl-border);
    color: var(--cl-ink-btn);
    padding: 11px;
    font-family: var(--util);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cbox button:hover {
    background: var(--cl-bg-hover);
}

.cl-src {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-src li {
    background: var(--cl-soft-2);
    border-left: 3px solid var(--cl-bg);
    padding: 12px 14px;
    margin-bottom: 9px;
}

.cl-src h4 {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.3;
}

.cl-src li:hover h4 {
    color: var(--red);
}

.cl-src p {
    margin: 0;
    font-size: 14px;
    color: var(--text-accent-mid);
    font-weight: 300;
}

.cl-src .meta {
    color: var(--cl-ink);
    display: block;
    margin-top: 5px;
}

/* ---- Vidéothèque ---- */
.video {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 30px;
    align-items: center;
    background: var(--surface-highlight);
    padding: 24px 26px;
}

.video h3 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.14;
    margin: 8px 0 10px;
}

.video p {
    margin: 0 0 14px;
    color: var(--text-accent-mid);
    font-size: 15px;
    font-weight: 300;
    max-width: 54ch;
}

.vstrip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.vstrip a {
    position: relative;
    aspect-ratio: 16/9;
    background: linear-gradient(160deg, #262640, #10101d);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.vstrip a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, .28);
}

.vstrip a::before {
    content: "";
    position: relative;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 12px solid rgba(255, 255, 255, .9);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 3px;
}

.vstrip em {
    position: absolute;
    z-index: 1;
    bottom: 5px;
    right: 6px;
    font-style: normal;
    font-family: var(--util);
    font-size: 10px;
    color: var(--bs-white);
    background: rgba(0, 0, 0, .55);
    padding: 1px 5px;
}

.video__links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.video__links a {
    font-family: var(--util);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-accent);
    border-bottom: 1px solid var(--color-services);
    padding-bottom: 2px;
}

.video__links a:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ---- Rail latéral (fil pro / agenda / newsletter / explorer) ---- */
.rail {
    border-left: 1px solid var(--rule);
    padding: 38px 0 60px 26px;
}

.rail__in {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.box {
    border: 1px solid var(--rule);
}

.box__h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--color-services);
    color: var(--bs-white);
}

.box__h h3 {
    font-family: var(--util);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.box__h .meta {
    margin-left: auto;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--rule);
}

.tabs button {
    flex: 1;
    background: var(--surface-page);
    border: 0;
    border-right: 1px solid var(--rule);
    padding: 8px 4px;
    font-family: var(--util);
    font-size: 11px;
    color: var(--text-accent-mid);
    cursor: pointer;
}

.tabs button:last-child {
    border-right: 0;
}

.tabs button[aria-selected="true"] {
    background: var(--color-services-light);
    color: var(--color-services-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--red);
}

.feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feed li {
    padding: 12px 38px 12px 12px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}

.fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--rule);
    background: var(--surface-page);
    border-radius: var(--r-full);
    font-size: 12px;
    line-height: 1;
    color: var(--text-accent-mid);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.fav:hover {
    border-color: var(--red);
    color: var(--red);
}

.fav[aria-pressed="true"] {
    background: var(--red);
    border-color: var(--red);
    color: var(--bs-white);
}

.feed li:last-child {
    border-bottom: 0;
}

.feed li:hover {
    background: var(--surface-highlight);
}

.feed h4 {
    font-family: var(--serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.28;
    margin: 5px 0 4px;
}

.feed li:hover h4 {
    color: var(--red);
}

.feed .dl {
    font-family: var(--util);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-accent);
}

.box__f {
    background: var(--surface-highlight);
    border-top: 1px solid var(--rule);
}

.box__f-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
}

.box__f > a {
    display: block;
    padding: 9px 12px;
    text-align: center;
}

.box__f a {
    font-family: var(--util);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-accent);
}

.box__f a:hover {
    color: var(--red);
}

.box__f a.box__f-cta {
    color: var(--red);
}

.agenda li,
.presta li,
.portraits li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 11px;
    align-items: start;
}

.agenda h4,
.presta h4,
.portraits h4 {
    margin-top: 0;
}

.rail-logo {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--rule);
    background: var(--color-services-light);
}

.rail-logo--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-services);
    color: var(--bs-white);
    font-family: var(--util);
    font-size: 15px;
    font-weight: 700;
}

.agenda-item__dates {
    display: block;
    color: var(--text-accent);
    font-weight: 600;
}

.news {
    border: 1px solid var(--rule);
    padding: 16px;
}

.news h3 {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 6px;
}

.news p {
    margin: 0 0 12px;
    font-family: var(--util);
    font-size: 12.5px;
    color: var(--text-accent-mid);
}

.news input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 14.5px;
    margin-bottom: 8px;
}

.news input:focus {
    outline: none;
    border-color: var(--color-services);
    box-shadow: 0 0 0 3px var(--cl-focus);
}

.news button,
.news .news-cta {
    width: 100%;
    background: var(--color-services);
    color: var(--bs-white);
    border: 0;
    padding: 10px;
    font-family: var(--util);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.news button:hover,
.news .news-cta:hover {
    background: var(--color-services-hover);
    color: var(--bs-white);
}

/* ---- Arrondis & divers ---- */
.door,
.claudine,
.cbox,
.cl-src li,
.clbox,
.video,
.box,
.news,
.wk__img,
.feat__img,
.vstrip a,
.chan,
.hchip {
    border-radius: var(--r-block);
}

.box {
    overflow: hidden;
}

.hero__cta,
.biblio,
.chips a,
.badge,
.chtag,
.cbox button,
.cbox textarea,
.news input,
.news button,
.news .news-cta,
.mlist__img,
.veille__img,
.clbox__f {
    border-radius: var(--r-ui);
}

.clbox__f {
    overflow: hidden;
}

.hero,
.tick,
.veille li,
.feed li,
.tabs button,
.rail {
    border-radius: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1240px) {
    .body {
        grid-template-columns: 1fr;
    }

    .rail {
        border-left: 0;
        border-top: 1px solid var(--rule);
        padding: 30px 0 40px;
    }

    .rail__in {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: start;
    }

    .main {
        padding-right: 0;
    }

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

    .hchips {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1000px) {
    .hero__in {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 40px;
    }

    .hero__une {
        max-width: none;
    }

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

    .pubs,
    .claudine,
    .video {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 820px) {
    .main {
        padding: 0;
    }

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

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

@media (max-width: 560px) {
    .week {
        grid-template-columns: 1fr;
    }

    .veille li {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .veille__img {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto;
    }
}