@charset "UTF-8";
/* =====================================================================
   Smart City Mag - skin beta v2026-1
   Transcription de design/v1/ (artefact DC) en CSS externe.

   La maquette d'origine ne contenait AUCUNE classe (hors .no-scrollbar)
   et AUCUNE media query : 296 attributs style=, 58 style-hover= et un
   responsive calcule en JavaScript dans renderVals().
   Ici : nomenclature .scm-*, hovers en :hover, responsive en media
   queries aux breakpoints 720px et 1080px (ceux de la maquette).

   Aucun style ne doit etre ecrit dans les gabarits PHP.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
    /* couleurs de marque */
    --scm-blue:          #0245bf;
    --scm-blue-dark:     #023293;
    --scm-blue-hover:    #033aa4;
    --scm-blue-050:      #f1f4fb;
    --scm-blue-100:      #e6edfb;
    --scm-blue-150:      #dbe4ff;
    --scm-blue-200:      #bcd0ff;
    --scm-blue-250:      #d4e0ff;
    --scm-blue-300:      #9db7ff;
    --scm-blue-deep:     #062e7d;

    /* neutres */
    --scm-page:          #f5f6f8;
    --scm-surface:       #ffffff;
    --scm-surface-alt:   #fafbfd;
    --scm-surface-tint:  #f5f6fa;
    --scm-ink:           #17181c;
    --scm-ink-2:         #3c4350;
    --scm-ink-3:         #4b5563;
    --scm-ink-4:         #5b6472;
    --scm-ink-5:         #6b7280;
    --scm-ink-6:         #8a93a6;
    --scm-border:        #e4e6eb;
    --scm-border-soft:   #eef0f4;
    --scm-border-2:      #dfe2e8;
    --scm-border-3:      #eceef2;
    --scm-border-input:  #b9c2d4;
    --scm-placeholder:   #eef0f5;

    /* footer */
    --scm-footer-bg:     #171b26;
    --scm-footer-tile:   #242a38;
    --scm-footer-muted:  #9aa3b5;
    --scm-footer-link:   #c9d0dd;
    --scm-footer-faint:  #6d7686;

    /* encarts du bloc magazine */
    --scm-promo-bg:      #eaf1fd;
    --scm-promo-ink:     #0b2a6b;
    --scm-promo-text:    #3c4a63;
    --scm-contact-bg:    #faf5ec;

    /* newsletter */
    --scm-nl-bg:         #13275c;
    --scm-nl-btn-hover:  #0353e6;
    --scm-nl-rule:       rgba(255, 255, 255, .16);
    --scm-nl-soft:       rgba(255, 255, 255, .8);
    --scm-nl-faint:      rgba(255, 255, 255, .7);

    /* accents */
    --scm-orange:        #f7941d;
    --scm-orange-dark:   #c96e00;
    --scm-orange-darker: #a35800;
    --scm-badge:         #ff8a2a;
    --scm-badge-ink:     #1c1200;
    --scm-alert:         #b42318;

    /* rayons */
    --scm-r-sm:  6px;
    --scm-r-btn: 9px;
    --scm-r-md:  10px;
    --scm-r-lg:  12px;
    --scm-r-xl:  14px;
    --scm-r-2xl: 16px;
    --scm-r-pill: 99px;

    /* ombres */
    --scm-shadow-menu:   0 18px 50px rgba(10, 20, 60, .22);
    --scm-shadow-mobile: 0 24px 48px rgba(10, 20, 60, .25);
    --scm-shadow-search: 0 8px 24px rgba(2, 20, 60, .25);
    --scm-shadow-modal:  0 30px 80px rgba(8, 14, 32, .35);
    --scm-shadow-badge:  0 6px 16px rgba(2, 69, 191, .35);

    /* gabarit */
    --scm-maxw: 1280px;
    --scm-padx: 32px;         /* padX : 20 en mobile, 32 sinon */
    --scm-logo-h: 55px;       /* logoH */
    --scm-hero-h: 500px;      /* heroH (home_upperBlock 1b) */
    --scm-hero-title: 38px;   /* heroTitle */
    --scm-hero-pad: 120px 44px 40px;
    /* haut de page : une + veille, puis trois articles */
    --scm-une-cols: minmax(0, 1fr) 340px;
    --scm-une-cards: repeat(3, minmax(0, 1fr));
    --scm-une-card-h: 240px;
    --scm-actus-cols: repeat(3, 1fr);
    --scm-mag-cols: 290px minmax(0, 1fr) 300px;
    --scm-mag-gap: 28px;
    --scm-mag-pad: 36px;
    --scm-evt-hero-cols: 1fr 440px;
    --scm-evt-hero-pad: 38px 44px;
    --scm-evt-title: 30px;

    /* sommaire en ligne : largeur de la double page. Elle conditionne la
       hauteur du bloc magazine (ratio 649/518) et donc la hauteur que la
       couverture peut occuper a gauche. */
    --scm-som-maxw: 620px;

    /* "L'actualite des acteurs du secteur" : quatre colonnes pleine largeur */
    --scm-acteurs-cards: repeat(4, minmax(0, 1fr));

    /* newsletter : gabarit des trois colonnes */
    --scm-nl-pad: 38px 40px;
    --scm-nl-cols: 1.05fr 1.5fr 1fr;
    --scm-nl-feat-cols: repeat(4, 1fr);
    --scm-nl-mid-pad: 0 28px;
    --scm-nl-div-x: 1px solid var(--scm-nl-rule);
    --scm-nl-div-y: none;

    /* article : le texte est plus etroit que le media, qui deborde donc
       legerement de part et d'autre en desktop */
    --scm-article-text: 740px;
    --scm-article-media: 1000px;
}

/* ------------------------------------------------------------------ */
/* 2. Reset et base (bloc <style> global de la maquette)               */
/* ------------------------------------------------------------------ */
html,
body {
    margin: 0;
    padding: 0;
    background: var(--scm-page);
    font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    color: var(--scm-ink);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

a:hover { color: var(--scm-blue-dark); }

*:focus-visible {
    outline: 2px solid var(--scm-blue);
    outline-offset: 2px;
}

::selection { background: var(--scm-blue-150); }

img { max-width: 100%; }

button { font-family: inherit; }

[hidden] { display: none !important; }

/* pose par le JS pendant l'ouverture d'une modale */
.scm-noscroll { overflow: hidden; }

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* accessibilite : titre de page pour lecteurs d'ecran uniquement */
.scm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scm-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--scm-page);
}

.scm-shell {
    max-width: var(--scm-maxw);
    margin: 0 auto;
    padding-left: var(--scm-padx);
    padding-right: var(--scm-padx);
}

/* ------------------------------------------------------------------ */
/* 3. Header                                                           */
/* ------------------------------------------------------------------ */
.scm-header {
    background: var(--scm-blue);
    color: #fff;
    position: relative;
    z-index: 60;
}

.scm-header__inner {
    max-width: var(--scm-maxw);
    margin: 0 auto;
    padding: 0 var(--scm-padx);
    height: 90px;
    display: flex;
    align-items: center;
    gap: 36px;
}

.scm-header__brand {
    color: #fff;
    display: block;
    flex: none;
}

.scm-header__brand:hover { color: #fff; }

.scm-header__logo {
    height: var(--scm-logo-h);
    display: block;
    /* le logo source est sombre : on le rend blanc sur fond bleu */
    filter: brightness(0) invert(1);
}

.scm-header__baseline {
    font-size: 12px;
    opacity: .85;
    margin-top: 5px;
    font-weight: 400;
}

.scm-header__bar {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 36px;
    position: relative;
}

/* -- navigation principale ---------------------------------------- */
.scm-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15.5px;
    font-weight: 600;
}

.scm-nav__link,
.scm-nav__toggle {
    color: #fff;
    padding: 9px 16px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.scm-nav__link:hover,
.scm-nav__toggle:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.scm-nav__link.is-current {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.scm-nav__item { position: relative; }

.scm-nav__chevron { transition: transform .18s; }

.scm-nav__item.is-open .scm-nav__chevron { transform: rotate(180deg); }

/* -- mega-menu evenements ----------------------------------------- */
.scm-mega {
    position: absolute;
    top: 100%;
    left: -40px;
    padding-top: 12px;
    z-index: 70;
}

.scm-mega__panel {
    width: 470px;
    background: var(--scm-surface);
    border-radius: var(--scm-r-xl);
    box-shadow: var(--scm-shadow-menu);
    padding: 10px;
    color: var(--scm-ink);
}

.scm-mega__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border-radius: var(--scm-r-md);
    color: var(--scm-ink);
}

.scm-mega__item + .scm-mega__item { border-top: 1px solid var(--scm-border-soft); }

.scm-mega__item:hover {
    background: var(--scm-blue-050);
    color: var(--scm-ink);
}

.scm-mega__thumb {
    width: 88px;
    height: 58px;
    flex: none;
    border-radius: 8px;
    object-fit: cover;
    background: var(--scm-placeholder);
}

.scm-mega__text { flex: 1; }

.scm-mega__title {
    display: block;
    font-size: 16px;
}

.scm-mega__desc {
    font-size: 13.5px;
    color: var(--scm-ink-4);
    line-height: 1.35;
    display: block;
    margin-top: 2px;
}

.scm-mega__arrow { flex: none; }

/* -- actions droite ------------------------------------------------ */
.scm-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.scm-iconbtn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    padding: 8px;
    border-radius: 8px;
    display: flex;
}

.scm-iconbtn:hover { background: rgba(255, 255, 255, .14); }

.scm-account {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: var(--scm-r-btn);
    padding: 9px 18px;
    display: inline-block;
    white-space: nowrap;
}

.scm-account:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* -- recherche extensible ------------------------------------------ */
.scm-search {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 56px;
    width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--scm-surface);
    border-radius: var(--scm-r-md);
    box-shadow: var(--scm-shadow-search);
    transition: width .35s ease, opacity .25s ease;
    display: flex;
    align-items: center;
    z-index: 20;
}

.scm-search.is-open {
    width: 100%;
    opacity: 1;
    pointer-events: auto;
}

.scm-search__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    padding: 0 10px 0 18px;
    min-width: 260px;
}

.scm-search__icon { flex: none; }

.scm-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15.5px;
    color: var(--scm-ink);
}

.scm-search__submit {
    display: none;
    flex: none;
    background: var(--scm-blue);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 9px 18px;
    border-radius: var(--scm-r-btn);
    border: none;
    cursor: pointer;
    align-items: center;
}

/* bouton visible au-dela de 3 caracteres (searchBtnDisp de la maquette) */
.scm-search.has-query .scm-search__submit { display: flex; }

.scm-search__submit:hover { background: var(--scm-blue-dark); }

.scm-search__close {
    flex: none;
    background: var(--scm-blue-050);
    border: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: var(--scm-r-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--scm-ink);
}

.scm-search__close:hover { background: var(--scm-blue-100); }

/* -- panneau mobile ------------------------------------------------ */
.scm-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--scm-surface);
    color: var(--scm-ink);
    box-shadow: var(--scm-shadow-mobile);
    z-index: 80;
    padding: 12px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scm-mobile__link {
    color: var(--scm-ink);
    font-weight: 700;
    font-size: 16px;
    padding: 13px 10px;
    border-radius: 8px;
}

.scm-mobile__link + .scm-mobile__link,
.scm-mobile__group + .scm-mobile__link,
.scm-mobile__link + .scm-mobile__group { border-top: 1px solid var(--scm-border-soft); }

.scm-mobile__link:hover {
    background: var(--scm-blue-050);
    color: var(--scm-ink);
}

.scm-mobile__group { padding: 13px 10px 4px; }

.scm-mobile__grouptitle {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}

.scm-mobile__sublist {
    display: flex;
    flex-direction: column;
}

.scm-mobile__sublink {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--scm-ink-2);
}

.scm-mobile__sublink:hover {
    background: var(--scm-blue-050);
    color: var(--scm-ink-2);
}

.scm-mobile__account {
    margin-top: 10px;
    text-align: center;
    background: var(--scm-blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px;
    border-radius: var(--scm-r-btn);
}

.scm-mobile__account:hover {
    background: var(--scm-blue-dark);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* 4. Bandeau de rubriques                                             */
/* ------------------------------------------------------------------ */
.scm-rubriques {
    background: var(--scm-surface);
    border-bottom: 1px solid var(--scm-border);
    position: relative;
    z-index: 40;
}

.scm-rubriques__inner {
    max-width: var(--scm-maxw);
    margin: 0 auto;
    padding: 0 var(--scm-padx);
    position: relative;
}

.scm-rubriques__track {
    display: flex;
    font-size: 14.5px;
    font-weight: 500;
    overflow-x: auto;
    cursor: grab;
    touch-action: pan-x;
    user-select: none;
}

.scm-rubriques__track.is-dragging { cursor: grabbing; }

.scm-rubriques__link {
    padding: 15px 20px;
    color: var(--scm-ink-3);
    border-left: 1px solid var(--scm-border-3);
    white-space: nowrap;
}

.scm-rubriques__link:first-child { border-left: none; }

.scm-rubriques__link:hover { color: var(--scm-blue); }

.scm-rubriques__link.is-active {
    color: var(--scm-blue);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--scm-blue);
}

.scm-rubriques__arrow {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52px;
    border: none;
    cursor: pointer;
    align-items: center;
    padding: 0 4px;
    color: var(--scm-blue);
}

.scm-rubriques__arrow.is-visible { display: flex; }

.scm-rubriques__arrow--prev {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(90deg, #fff 40%, rgba(255, 255, 255, 0));
}

.scm-rubriques__arrow--next {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(270deg, #fff 40%, rgba(255, 255, 255, 0));
}

/* ------------------------------------------------------------------ */
/* 5. Publicite                                                        */
/* ------------------------------------------------------------------ */
.scm-ad-megaban {
    display: flex;
    justify-content: center;
    padding: 24px var(--scm-padx) 0;
}

.scm-ad-megaban > div { max-width: 100%; }

.scm-ad-slot {
    max-width: 100%;
    overflow: hidden;
}

.scm-ad-slot img,
.scm-ad-slot iframe { max-width: 100%; }

.scm-ad-carre {
    width: 300px;
    max-width: 100%;
    margin: auto auto 0;
    flex: none;
}

.scm-square-ads { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; width: 100%; }
.scm-square-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 300px; max-width: 100%; min-height: 280px; padding: 12px 0; border-radius: var(--scm-r-lg); background: #eef2f7; overflow: hidden; flex: none; }
.scm-square-ad__label { color: #66748a; font-size: 10px; line-height: 1.2; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.scm-square-ad .scm-ad-slot { display: flex; align-items: center; justify-content: center; width: 100%; }
.scm-square-ad .scm-ad-slot img { height: auto; }
.scm-mag__side > .scm-square-ad { align-self: center; }

/* Emplacement sans campagne.
   smread.php pose lui-meme un style="display:none" sur le conteneur
   #ad_<zone> quand l'inventaire est vide, mais le WRAPPER restait un flex
   item de .scm-main et consommait un gap de 56px - d'ou un trou entre les
   sections. On fait donc disparaitre le wrapper, pas seulement le slot.
   Doublon de selecteur : smread.php ecrit "display: none" avec espace,
   d'autres navigateurs normalisent sans. Le JS prend le relais si :has()
   n'est pas supporte, ou si la regie renvoie un contenu de hauteur nulle. */
.scm-ad-carre:has(> .scm-ad-slot[style*="display:none"]),
.scm-ad-carre:has(> .scm-ad-slot[style*="display: none"]),
.scm-ad-megaban:has(> .scm-ad-slot[style*="display:none"]),
.scm-ad-megaban:has(> .scm-ad-slot[style*="display: none"]) {
    display: none;
}

/* Emplacement factice, repris tel quel de la maquette : cadre pointille
   au format exact de la creation attendue. Sert quand aucune campagne
   n'est diffusee sur la zone. */
.scm-ad-ph {
    max-width: 100%;
    border: 1.5px dashed var(--scm-border-input);
    border-radius: 8px;
    background: var(--scm-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--scm-ink-6);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
}

.scm-ad-ph--carre {
    width: 300px;
    height: 250px;
    margin: auto auto 0;
    flex: none;
}

.scm-ad-ph--megaban {
    width: 1000px;
    height: 90px;
}

/* ------------------------------------------------------------------ */
/* 6. Zone principale                                                  */
/* ------------------------------------------------------------------ */
.scm-main {
    max-width: var(--scm-maxw);
    width: 100%;
    margin: 0 auto;
    padding: 28px var(--scm-padx) 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* en-tete de section : titre + lien "voir tout" + filet */
.scm-sectionhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--scm-border-2);
    padding-bottom: 14px;
    margin-bottom: 26px;
}

.scm-sectionhead__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.4px;
}

.scm-sectionhead__more {
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scm-eyebrow {
    color: var(--scm-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* 7. Haut de page : a la une + veille, puis trois articles            */
/* design/home_upperBlock, variante 1b. Ni surtitre ni date.           */
/* ------------------------------------------------------------------ */
.scm-une {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* La une et la veille partagent la hauteur de la rangee. */
.scm-une__top {
    display: grid;
    grid-template-columns: var(--scm-une-cols);
    gap: 24px;
}

.scm-hero__main {
    position: relative;
    display: block;
    border-radius: var(--scm-r-xl);
    overflow: hidden;
    min-height: var(--scm-hero-h);
    background: #dfe3ea;
}

.scm-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scm-hero__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--scm-hero-pad);
    background: linear-gradient(180deg, rgba(10, 15, 30, 0) 0%, rgba(10, 15, 30, .82) 78%);
    pointer-events: none;
}

.scm-hero__eyebrow {
    color: var(--scm-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: none;
}

.scm-hero__title {
    margin: 0;
    color: #fff;
    font-size: var(--scm-hero-title);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.5px;
    max-width: 640px;
    text-wrap: pretty;
        text-shadow: 1px 1px black;
}

.scm-hero__chapo {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    line-height: 1.5;
    max-width: 600px;
    display: none;
}

.scm-hero__meta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.scm-hero__cta {
    color: var(--scm-blue);
    font-weight: 700;
    font-size: 15.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
        text-shadow: 1px 1px black;
}

.scm-hero__date {
    color: rgba(255, 255, 255, .6);
    font-size: 13.5px;
    display: none;
}

/* Veille dans le haut de page : carte plus compacte que l'ancien fil de
   la partie basse, lien « Voir toute la veille » cale en bas. */
.scm-une__veille {
    display: flex;
    flex-direction: column;
    padding: 20px 22px 12px;
}

.scm-une__veille .scm-veille__title { margin-bottom: 4px; font-size: 18px; }
.scm-une__veille .scm-veille__item { gap: 12px; padding: 11px 0; }
.scm-une__veille .scm-veille__when { width: 46px; font-size: 12.5px; }
.scm-une__veille .scm-veille__item-title { font-size: 13.5px; line-height: 1.35; }
.scm-une__veille .scm-veille__cat { font-size: 10.5px; }

.scm-une__veille .scm-veille__more {
    margin-top: auto;
    padding: 10px 0 6px;
    border-top: 1px solid var(--scm-border-soft);
    font-size: 14px;
}

/* Trois articles suivants : texte sous l'image. */
.scm-une__cards {
    display: grid;
    grid-template-columns: var(--scm-une-cards);
    gap: 24px;
}

.scm-une-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--scm-ink);
}

.scm-une-card:hover { color: var(--scm-ink); }
.scm-une-card:hover .scm-une-card__title { color: var(--scm-blue); }

.scm-une-card__img {
    width: 100%;
    height: var(--scm-une-card-h);
    border-radius: var(--scm-r-lg);
    object-fit: cover;
    background: var(--scm-placeholder);
    display: block;
}

.scm-une-card__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    text-wrap: pretty;
}

.scm-card__cat {
    color: var(--scm-blue);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.scm-card__date {
    color: var(--scm-ink-5);
    font-size: 13.5px;
    display: none;
}

/* ------------------------------------------------------------------ */
/* 8. Grille de cartes article                                         */
/* ------------------------------------------------------------------ */
.scm-cards {
    display: grid;
    grid-template-columns: var(--scm-actus-cols);
    gap: 26px;
}

.scm-card {
    color: var(--scm-ink);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scm-card:hover { color: var(--scm-ink); }

.scm-card__img {
    width: 100%;
    height: 230px;
    border-radius: var(--scm-r-lg);
    object-fit: cover;
    background: var(--scm-placeholder);
}

.scm-card__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    text-wrap: pretty;
    margin: 0;
}

.scm-card__title a { color: inherit; }

/* ------------------------------------------------------------------ */
/* 8 bis. "L'actualite des acteurs du secteur"                         */
/* Grille de cartes bordees, pleine largeur : la veille est remontee   */
/* dans le haut de page. Ce bloc remplace l'ancienne section "Toutes   */
/* les actualites".                                                    */
/* ------------------------------------------------------------------ */
.scm-acteurs { display: block; }

.scm-acteurs__grid {
    display: grid;
    grid-template-columns: var(--scm-acteurs-cards);
    grid-auto-rows: 1fr;
    gap: 20px;
}

.scm-acteur {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-lg);
    overflow: hidden;
    color: var(--scm-ink);
    display: flex;
    flex-direction: column;
}

.scm-acteur:hover {
    border-color: var(--scm-blue);
    color: var(--scm-ink);
}

.scm-acteur__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--scm-placeholder);
    display: block;
}

.scm-acteur__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.scm-acteur__cat {
    color: var(--scm-blue);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Troncature a 4 lignes avec points de suspension. C'est le CSS qui coupe,
   pas le gabarit : beta_text() est appele sans limite de caracteres, sinon
   la troncature PHP tomberait toujours avant la 4e ligne. */
.scm-acteur__title {
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* fil de veille */
.scm-veille {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-xl);
    padding: 24px 24px 18px;
    min-width: 0;
}

.scm-veille__title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.scm-veille__list {
    display: flex;
    flex-direction: column;
}

.scm-veille__item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    color: var(--scm-ink);
}

.scm-veille__item + .scm-veille__item { border-top: 1px solid var(--scm-border-soft); }

.scm-veille__item:hover { color: var(--scm-blue); }

.scm-veille__item.is-important {
    margin-inline: -10px;
    padding-inline: 10px;
    border-radius: var(--scm-r-sm);
    background: var(--scm-blue-100);
}

.scm-veille__when {
    flex: none;
    width: 48px;
    color: var(--scm-blue);
    font-weight: 700;
    font-size: 13px;
}

.scm-veille__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.scm-veille__item-title {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    text-wrap: pretty;
}

.scm-veille__cat {
    color: var(--scm-ink-6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.scm-veille__labels,
.scm-veille-card__labels {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.scm-brief-label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.scm-brief-label--important {
    background: var(--scm-blue-100);
    color: var(--scm-blue-deep);
}

.scm-brief-label--sponsored {
    background: #fff1cc;
    color: #704d00;
}

.scm-veille__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 0;
    font-weight: 700;
    font-size: 14.5px;
}

/* Page complète de veille ------------------------------------------ */
.scm-veille-page { display: grid; gap: 28px; }

.scm-pagehead__eyebrow {
    margin-bottom: 7px;
    color: var(--scm-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.scm-veille-filter {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(130px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 22px;
    background: var(--scm-surface-tint);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-xl);
}

.scm-veille-filter__field {
    display: grid;
    gap: 7px;
    color: var(--scm-ink-3);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.scm-veille-filter input,
.scm-veille-filter select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--scm-border-input);
    border-radius: var(--scm-r-sm);
    background: #fff;
    color: var(--scm-ink);
    padding: 9px 11px;
    font: inherit;
    text-transform: none;
}

.scm-veille-filter__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.scm-veille-results__meta {
    color: var(--scm-ink-5);
    font-size: 14px;
    font-weight: 700;
}

.scm-veille-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.scm-veille-card {
    min-width: 0;
    overflow: hidden;
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-lg);
    color: var(--scm-ink);
    display: flex;
    flex-direction: column;
}

.scm-veille-card:hover { border-color: var(--scm-blue); color: var(--scm-ink); }
.scm-veille-card.is-important { box-shadow: inset 0 4px 0 var(--scm-blue); }

.scm-veille-card__img {
    width: 100%;
    height: 190px;
    display: block;
    object-fit: cover;
    background: var(--scm-placeholder);
}

.scm-veille-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 11px;
    padding: 20px;
}

.scm-veille-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--scm-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .65px;
    text-transform: uppercase;
}

.scm-veille-card__meta time { color: var(--scm-ink-6); white-space: nowrap; }
.scm-veille-card__title { font-size: 19px; line-height: 1.3; text-wrap: pretty; }
.scm-veille-card__summary { color: var(--scm-ink-3); font-size: 14px; line-height: 1.55; }
.scm-veille-card__labels { margin-top: auto; padding-top: 8px; }

.scm-pagination > a,
.scm-pagination > span {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-btn);
    background: var(--scm-surface);
    color: var(--scm-ink-3);
    font-size: 14px;
    font-weight: 700;
}

.scm-pagination > a:hover { border-color: var(--scm-blue); color: var(--scm-blue); }

/* ------------------------------------------------------------------ */
/* 9. Bloc magazine                                                    */
/* ------------------------------------------------------------------ */
.scm-mag {
    background: var(--scm-surface-tint);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-2xl);
    padding: var(--scm-mag-pad);
    display: grid;
    grid-template-columns: var(--scm-mag-cols);
    gap: var(--scm-mag-gap);
}

/* Colonne de gauche : la couverture prend toute la hauteur disponible et
   pousse "S'abonner" en bas de colonne. Comme .scm-mag__actions fait de
   meme dans la colonne centrale, les deux boutons sont alignes sur le
   meme bas - c'est la grille qui garantit l'alignement, pas une hauteur
   fixe. object-fit: contain garantit que la couverture n'est jamais
   deformee ni rognee ; object-position: top cale son coin superieur droit
   sur le badge, quel que soit le ratio du fichier. */
.scm-mag__cover-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.scm-mag__cover-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 380px;
}

.scm-mag__cover-cta {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    justify-content: center;
}

.scm-mag__cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    border-radius: var(--scm-r-md);
    display: block;
}

.scm-mag__badge {
    position: absolute;
    top: -12px;
    right: -12px;
    background: var(--scm-blue);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--scm-r-md);
    box-shadow: var(--scm-shadow-badge);
    pointer-events: none;
}

.scm-mag__badge-num {
    font-weight: 800;
    font-size: 17px;
    line-height: 1.1;
}

.scm-mag__badge-date {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .9;
    margin-top: 2px;
}

.scm-mag__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    justify-content: center;
}

/* repli quand le numero n'a pas de sommaire saisi */
.scm-mag__intro {
    margin: 0;
    color: var(--scm-ink-3);
    font-size: 18px;
    line-height: 1.55;
}

.scm-mag__intro p { margin: 0 0 .6em; }

.scm-mag__actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.scm-mag__side {
    grid-column: var(--scm-mag-side-col, auto);
    display: flex;
    flex-direction: var(--scm-mag-side-dir, column);
    gap: 20px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* 9 bis. Sommaire en ligne (double page ouverte)                      */
/*                                                                     */
/* La maquette pose le sommaire sur un visuel de revue ouverte et      */
/* dimensionne tout en cqw, pour que la mise en page suive la largeur  */
/* du bloc et non celle de la fenetre. .scm-som est le conteneur de    */
/* reference ; en dessous de 480px de LARGEUR DE CONTENEUR, la double  */
/* page redevient une simple liste - a cette taille le texte en cqw    */
/* tomberait sous 10px. Le repli est double (container query puis      */
/* media query) pour les navigateurs sans @container.                  */
/* ------------------------------------------------------------------ */
.scm-som {
    container-type: inline-size;
    width: 100%;
    max-width: var(--scm-som-maxw);
    margin: 0 auto;
}

.scm-som__spread {
    position: relative;
    width: 100%;
    aspect-ratio: 649 / 518;
    background: url("../img/sommaire_bg.png") center / contain no-repeat;
}

.scm-som__page {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scm-som__page--left {
    left: 10%;
    width: 36%;
    top: 8.5%;
    bottom: 13%;
    gap: 3.4cqw;
}

.scm-som__page--right {
    left: 55%;
    width: 34%;
    top: 15%;
    bottom: 13%;
    justify-content: center;
}

.scm-som__label {
    font-weight: 800;
    font-size: 4.4cqw;
    letter-spacing: -.06cqw;
    line-height: 1.1;
    color: var(--scm-ink);
}

.scm-som__ref {
    color: var(--scm-blue);
    font-size: 2cqw;
    font-weight: 700;
    letter-spacing: .18cqw;
    text-transform: uppercase;
    margin-top: 1.2cqw;
}

.scm-som__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3.4cqw;
    min-height: 0;
}

.scm-som__page--right .scm-som__items { gap: 4cqw; }

.scm-som__item {
    display: flex;
    gap: 2.4cqw;
    align-items: center;
    min-width: 0;
}

.scm-som__thumb {
    width: 12cqw;
    height: 12cqw;
    flex: none;
    object-fit: cover;
    border-radius: 3px;
    background: var(--scm-placeholder);
    display: block;
}

.scm-som__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.scm-som__cat {
    color: var(--scm-blue);
    font-size: 1.9cqw;
    font-weight: 700;
    letter-spacing: .14cqw;
    text-transform: uppercase;
}

.scm-som__desc {
    font-size: 2.2cqw;
    line-height: 1.35;
    font-weight: 600;
    margin-top: .7cqw;
    color: #2b303a;
}

@container (max-width: 460px) {
    .scm-som__spread {
        aspect-ratio: auto;
        background: none;
    }

    .scm-som__page {
        position: static;
        width: auto;
        overflow: visible;
        gap: 16px;
    }

    .scm-som__page--right {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .scm-som__items,
    .scm-som__page--right .scm-som__items { gap: 16px; }

    .scm-som__label  { font-size: 22px; letter-spacing: -.3px; }
    .scm-som__ref    { font-size: 12px; letter-spacing: 1px; margin-top: 4px; }
    .scm-som__item   { gap: 14px; }
    .scm-som__thumb  { width: 84px; height: 62px; border-radius: var(--scm-r-sm); }
    .scm-som__cat    { font-size: 11.5px; letter-spacing: 1px; }
    .scm-som__desc   { font-size: 14.5px; margin-top: 4px; }
}

/* ------------------------------------------------------------------ */
/* 9 ter. Encarts publicite et contact annonceur                       */
/* ------------------------------------------------------------------ */
.scm-promo {
    background: var(--scm-promo-bg);
    border-radius: var(--scm-r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1.2;
    min-width: 260px;
}

.scm-promo__eyebrow { color: var(--scm-ink-4); }

.scm-promo__title {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--scm-promo-ink);
    text-wrap: pretty;
}

.scm-promo__desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--scm-promo-text);
}

.scm-promo__cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    padding: 11px 22px;
}

.scm-contact {
    background: var(--scm-contact-bg);
    border-radius: var(--scm-r-xl);
    padding: 24px;
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
}

.scm-contact__eyebrow {
    font-size: 11.5px;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.scm-contact__body {
    font-size: 13.5px;
    line-height: 1.55;
}

.scm-contact__body p { margin: 0 0 .5em; }

.scm-contact__body strong { font-size: 15.5px; }

.scm-contact__more {
    margin-top: auto;
    align-self: flex-start;
    border: 1.5px solid var(--scm-blue);
    color: var(--scm-blue);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: var(--scm-r-btn);
}

.scm-contact__more:hover {
    background: var(--scm-blue-100);
    color: var(--scm-blue);
}

/* ------------------------------------------------------------------ */
/* 10. Boutons                                                         */
/* ------------------------------------------------------------------ */
.scm-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 26px;
    border-radius: var(--scm-r-btn);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
}

.scm-btn--primary {
    background: var(--scm-blue);
    color: #fff;
}

.scm-btn--primary:hover {
    background: var(--scm-blue-dark);
    color: #fff;
}

.scm-btn--ghost {
    border: 1.5px solid var(--scm-blue);
    color: var(--scm-blue);
    background: transparent;
    padding: 10.5px 24.5px;
}

.scm-btn--ghost:hover {
    background: var(--scm-blue-100);
    color: var(--scm-blue);
}

.scm-btn--light {
    background: #fff;
    color: var(--scm-blue);
}

.scm-btn--light:hover { color: var(--scm-blue-dark); }

/* ------------------------------------------------------------------ */
/* 11. Evenements                                                      */
/* ------------------------------------------------------------------ */
.scm-evt-hero {
    display: grid;
    grid-template-columns: var(--scm-evt-hero-cols);
    gap: 32px;
    background: var(--scm-blue);
    border-radius: var(--scm-r-2xl);
    padding: var(--scm-evt-hero-pad);
    color: #fff;
    margin-bottom: 26px;
    align-items: center;
}

.scm-evt-hero:hover {
    background: var(--scm-blue-hover);
    color: #fff;
}

.scm-evt-hero__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scm-evt-hero__tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.scm-evt-hero__badge {
    background: var(--scm-badge);
    color: var(--scm-badge-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--scm-r-pill);
}

.scm-evt-hero__kicker {
    color: var(--scm-blue-200);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.scm-evt-hero__title {
    font-size: var(--scm-evt-title);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.4px;
    text-wrap: pretty;
}

.scm-evt-hero__date {
    color: var(--scm-blue-250);
    font-size: 16px;
    font-weight: 600;
}

.scm-evt-hero__desc {
    color: rgba(255, 255, 255, .85);
    font-size: 15px;
    line-height: 1.5;
    max-width: 560px;
}

.scm-evt-hero__cta {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: var(--scm-blue);
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: var(--scm-r-btn);
    width: fit-content;
}

.scm-evt-hero__media {
    display: block;
    height: 250px;
}

.scm-evt-hero__img {
    width: 100%;
    height: 100%;
    border-radius: var(--scm-r-lg);
    object-fit: cover;
}

.scm-event-highlights { display: grid; gap: 24px; }
.scm-event-highlights .scm-evt-hero { margin-bottom: 0; }
.scm-evt-hero--feature { grid-template-columns: minmax(0, 1fr) minmax(220px, 36%); transition: background .18s ease; }
.scm-evt-hero--without-media { grid-template-columns: minmax(0, 1fr); }
.scm-evt-hero--feature .scm-evt-hero__body { min-width: 0; overflow-wrap: anywhere; }
.scm-evt-hero--feature .scm-evt-hero__title,
.scm-evt-hero--feature .scm-evt-hero__desc { margin: 0; }
.scm-evt-hero--feature .scm-evt-hero__date { display: flex; align-items: center; gap: 8px; color: #fff; }
.scm-evt-hero--feature .scm-evt-hero__date svg { flex-shrink: 0; }
.scm-evt-hero__badge--open { background: #15803d; color: #fff; }
.scm-evt-hero__badge--closed { background: #b91c1c; color: #fff; }
.scm-evt-hero--feature .scm-evt-hero__media { display: flex; align-items: center; justify-content: center; height: 250px; padding: 24px; border-radius: var(--scm-r-lg); background: #fff; }
.scm-evt-hero--feature .scm-evt-hero__img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }
.scm-evt-hero--feature:focus-visible { outline-width: 3px; outline-offset: 5px; }
@media (max-width: 900px) {
    .scm-evt-hero--feature { grid-template-columns: minmax(0, 1fr); }
    .scm-evt-hero--feature .scm-evt-hero__media { height: 190px; }
}
@media (max-width: 479px) {
    .scm-evt-hero--feature .scm-evt-hero__badge { font-size: 11px; letter-spacing: .4px; }
    .scm-evt-hero--feature .scm-evt-hero__cta { padding: 12px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .scm-evt-hero--feature { transition: none; } }

.scm-evt-grid {
    display: grid;
    grid-template-columns: var(--scm-actus-cols);
    gap: 20px;
}

.scm-evt-card {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-lg);
    padding: 24px;
    color: var(--scm-ink);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scm-evt-card:hover {
    border-color: var(--scm-blue);
    color: var(--scm-ink);
}

.scm-evt-card__title {
    font-size: 17px;
    font-weight: 700;
}

.scm-evt-card__desc {
    color: var(--scm-ink-4);
    font-size: 14px;
    line-height: 1.45;
}

.scm-evt-card__next {
    margin-top: auto;
    padding-top: 10px;
    color: var(--scm-blue);
    font-size: 13.5px;
    font-weight: 700;
}

.scm-evt-card__next--muted { color: var(--scm-ink-5); }

/* ------------------------------------------------------------------ */
/* 12. Bandeau agenda                                                  */
/* ------------------------------------------------------------------ */
.scm-agenda-band {
    margin-top: 26px;
    background: var(--scm-orange);
    border-radius: var(--scm-r-2xl);
    padding: 34px 36px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.scm-agenda-band__head { flex: none; }

.scm-agenda-band__title {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.scm-agenda-band__sub {
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    margin-top: 6px;
}

.scm-agenda-band__list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
}

.scm-agenda-band__item {
    flex: 1;
    min-width: 180px;
    background: rgba(255, 255, 255, .95);
    border-radius: var(--scm-r-md);
    padding: 16px 18px;
    color: var(--scm-ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scm-agenda-band__item:hover {
    background: #fff;
    color: var(--scm-ink);
}

.scm-agenda-band__item-title { font-size: 15.5px; }

.scm-agenda-band__item-date {
    color: var(--scm-ink-5);
    font-size: 13.5px;
}

.scm-agenda-band__more {
    flex: none;
    background: #fff;
    color: var(--scm-orange-dark);
    font-weight: 700;
    font-size: 14.5px;
    padding: 12px 22px;
    border-radius: var(--scm-r-btn);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.scm-agenda-band__more:hover { color: var(--scm-orange-darker); }

/* ------------------------------------------------------------------ */
/* 13. Newsletter                                                      */
/*                                                                     */
/* Bloc inserable : rendu par tpl/partials/newsletter.php, present sur */
/* toutes les pages via tpl/footer.php. Trois colonnes en desktop      */
/* (accroche / atouts / formulaire), empilees en dessous de 1080px.    */
/* ------------------------------------------------------------------ */
.scm-nl {
    background: var(--scm-nl-bg);
    border-radius: 18px;
    padding: var(--scm-nl-pad);
    color: #fff;
    display: grid;
    grid-template-columns: var(--scm-nl-cols);
    gap: 28px;
    align-items: center;
}

.scm-nl__pitch {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.scm-nl__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--scm-nl-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.scm-nl__title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.3px;
    text-wrap: pretty;
}

.scm-nl__desc {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--scm-nl-soft);
}

.scm-nl__features {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: var(--scm-nl-feat-cols);
    gap: 22px;
    padding: var(--scm-nl-mid-pad);
    border-left: var(--scm-nl-div-x);
    border-right: var(--scm-nl-div-x);
    border-top: var(--scm-nl-div-y);
    border-bottom: var(--scm-nl-div-y);
}

.scm-nl__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 9px;
}

/* le jeu d'icones sort en stroke-width 2.2 : la maquette veut un trait
   plus fin sur ces quatre pictogrammes. Attribut de presentation, donc
   surchargeable en CSS - pas besoin de le poser dans le gabarit. */
.scm-nl__feature-icon { stroke-width: 1.6; }

.scm-nl__feature-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

.scm-nl__feature-desc {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--scm-nl-faint);
}

.scm-nl__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.scm-nl__formtitle {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.2px;
}

.scm-nl__input {
    font-family: inherit;
    font-size: 15px;
    padding: 13px 16px;
    border: none;
    border-radius: var(--scm-r-btn);
    background: #fff;
    color: var(--scm-ink);
    width: 100%;
}

.scm-nl__submit {
    font-family: inherit;
    background: var(--scm-blue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 13px;
    border: none;
    border-radius: var(--scm-r-btn);
    cursor: pointer;
    width: 100%;
}

.scm-nl__submit:hover { background: var(--scm-nl-btn-hover); }

.scm-nl__legal {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--scm-nl-faint);
}

.scm-nl__feedback {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* pas de reserve d'espace tant que rien n'a ete soumis */
.scm-nl__feedback:empty { display: none; }

/* ------------------------------------------------------------------ */
/* 14. Modale                                                          */
/* ------------------------------------------------------------------ */
.scm-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 32, .55);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.scm-modal[hidden] { display: none; }

.scm-modal__dialog {
    background: var(--scm-surface);
    border-radius: var(--scm-r-xl);
    max-width: 600px;
    width: 100%;
    max-height: 82vh;
    overflow: auto;
    padding: 30px 32px;
    position: relative;
    box-shadow: var(--scm-shadow-modal);
}

.scm-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--scm-blue-050);
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: var(--scm-r-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--scm-ink);
}

.scm-modal__close:hover { background: var(--scm-blue-100); }

.scm-modal__eyebrow { margin-bottom: 6px; }

.scm-modal__title {
    margin: 0 0 20px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.4px;
}

.scm-modal__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scm-modal__row {
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.scm-modal__tag {
    flex: none;
    background: var(--scm-blue-100);
    color: var(--scm-blue);
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--scm-r-sm);
}

.scm-modal__row:first-child .scm-modal__tag {
    background: var(--scm-blue);
    color: #fff;
}

.scm-modal__label {
    font-size: 15px;
    line-height: 1.4;
}

.scm-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.scm-modal__actions .scm-btn {
    font-size: 14.5px;
    padding: 11px 24px;
}

.scm-modal__actions .scm-btn--ghost { padding: 9.5px 22.5px; }

/* ------------------------------------------------------------------ */
/* 15. Footer                                                          */
/* ------------------------------------------------------------------ */
.scm-footer {
    background: var(--scm-footer-bg);
    color: #fff;
    margin-top: 64px;
}

.scm-footer__inner {
    max-width: var(--scm-maxw);
    margin: 0 auto;
    padding: 52px var(--scm-padx);
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.scm-footer__brand {
    flex: 2;
    min-width: 240px;
}

.scm-footer__logo {
    height: 30px;
    display: block;
    filter: brightness(0) invert(1);
}

.scm-footer__baseline {
    font-size: 13.5px;
    color: var(--scm-footer-muted);
    margin-top: 12px;
    max-width: 320px;
    line-height: 1.5;
}

.scm-footer__copy {
    font-size: 13px;
    color: var(--scm-footer-faint);
    margin-top: 20px;
}

.scm-footer__nav {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14.5px;
}

.scm-footer__nav a { color: var(--scm-footer-link); }

.scm-footer__nav a:hover { color: #fff; }

.scm-footer__social { min-width: 160px; }

.scm-footer__social-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--scm-footer-muted);
    margin-bottom: 14px;
}

.scm-footer__social-list {
    display: flex;
    gap: 12px;
}

.scm-footer__social-link {
    width: 40px;
    height: 40px;
    border-radius: var(--scm-r-btn);
    background: var(--scm-footer-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.scm-footer__social-link:hover {
    background: var(--scm-blue);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* 16. Pages interieures                                               */
/* ------------------------------------------------------------------ */
.scm-pagehead {
    display: flex;
    flex-direction: column;
    gap: 10px; 
    padding-bottom: 18px;
}

.scm-pagehead__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.15;
    text-wrap: pretty;
}

.scm-pagehead__intro {
    margin: 0;
    color: var(--scm-ink-3);
    font-size: 16px;
    line-height: 1.55;
    max-width: 760px;
}

.scm-panel {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-2xl);
    padding: var(--scm-mag-pad);
}

.scm-panel + .scm-panel { margin-top: 24px; }

/* corps de texte editorial (contenu WYSIWYG venant de la base) */
.scm-prose {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--scm-ink);
    max-width: 760px;
}

.scm-prose--wide { max-width: none; }

/* Le contenu vient de TinyMCE, qui insere ses propres paragraphes vides
   pour respirer : ajouter une marge produirait un double interligne. */
.scm-prose p { margin: 0; }

.scm-prose h2 {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.3px;
    margin: .5em 0 .3em;
}

.scm-prose h3 {
    font-size: 19px;
    font-weight: 700;
    margin: .5em 0 .3em;
}

.scm-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--scm-r-lg);
}

.scm-prose ul,
.scm-prose ol { padding-left: 1.3em; }

.scm-prose li { margin-bottom: .4em; }

.scm-prose blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--scm-blue);
    color: var(--scm-ink-3);
    font-style: italic;
}

.scm-prose a { text-decoration: underline; }

.scm-prose table {
    width: 100%;
    border-collapse: collapse;
}

.scm-prose td,
.scm-prose th {
    border: 1px solid var(--scm-border);
    padding: 8px 10px;
    text-align: left;
}

/* tableaux et blocs larges : jamais de scroll horizontal sur le body */
.scm-scrollx {
    overflow-x: auto;
    max-width: 100%;
}

/* -- article -------------------------------------------------------- */
/* Deux largeurs de lecture : le texte a 740px, le media a 1000px. Les
   blocs sont centres individuellement, le media deborde donc du texte
   de 130px de chaque cote en desktop. */
.scm-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.scm-article > * {
    width: 100%;
    max-width: var(--scm-article-text);
    min-width: 0;
}

.scm-article__media {
    max-width: var(--scm-article-media);
}

.scm-article__head {
    display: flex;
    flex-direction: column;
}

.scm-article__tetiere {
    color: var(--scm-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.scm-article__title {
    margin: 10px 0 0;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.6px;
    text-wrap: pretty;
}

.scm-article__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: var(--scm-ink-5);
    font-size: 14px;
}

.scm-article__cat {
    background: var(--scm-blue-100);
    color: var(--scm-blue);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--scm-r-pill);
}

.scm-article__chapo {
    margin: 22px 0 0;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--scm-ink-3);
    /* pas de largeur propre : le bloc d'en-tete est deja borne a
       --scm-article-text par la regle .scm-article > * */
}

.scm-article__cover {
    width: 100%;
    height: auto;
    border-radius: var(--scm-r-xl);
    display: block;
}

.scm-article__figure { margin: 0; }

.scm-article__caption {
    margin: 10px 0 0;
    color: var(--scm-ink-5);
    font-size: 13.5px;
    line-height: 1.45;
}

.scm-article__video { margin: 0; }

/* -- galerie de l'article (plusieurs images) ------------------------ */
/* Defilement natif avec accrochage : la galerie reste utilisable au
   doigt et a la molette meme si le JS ne s'execute pas. */
.scm-gallery__viewport { position: relative; }

.scm-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: var(--scm-r-xl);
}

.scm-gallery__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
}

.scm-gallery__img {
    width: 100%;
    height: auto;
    display: block;
}

.scm-gallery__caption {
    margin: 10px 0 0;
    color: var(--scm-ink-5);
    font-size: 13.5px;
    line-height: 1.45;
    min-height: 1.45em;
}

.scm-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--scm-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(8, 14, 32, .18);
}

.scm-gallery__nav:hover { background: #fff; }

.scm-gallery__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

.scm-gallery__nav--prev { left: 14px; }
.scm-gallery__nav--next { right: 14px; }

.scm-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.scm-gallery__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: var(--scm-r-pill);
    background: var(--scm-border-input);
    cursor: pointer;
    transition: width .2s, background .2s;
}

.scm-gallery__dot.is-active {
    width: 24px;
    background: var(--scm-blue);
}

.scm-article__quote {
    margin: 28px 0;
    padding: 24px 28px;
    background: var(--scm-blue-100);
    border-radius: var(--scm-r-xl);
    color: var(--scm-blue-deep);
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
    text-wrap: pretty;
}

.scm-article__encadre {
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-left: 4px solid var(--scm-blue);
    border-radius: var(--scm-r-lg);
}

.scm-article__encadre-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
}

.scm-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--scm-border);
}

.scm-share__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--scm-ink-5);
    margin-right: 4px;
}

.scm-share__link {
    width: 38px;
    height: 38px;
    border-radius: var(--scm-r-btn);
    background: var(--scm-blue-050);
    color: var(--scm-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scm-share__link:hover {
    background: var(--scm-blue);
    color: #fff;
}

/* -- pagination ----------------------------------------------------- */
.scm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.scm-pagination__link {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--scm-r-btn);
    border: 1px solid var(--scm-border);
    background: var(--scm-surface);
    color: var(--scm-ink-3);
    font-size: 14.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scm-pagination__link:hover {
    border-color: var(--scm-blue);
    color: var(--scm-blue);
}

.scm-pagination__link.is-active {
    background: var(--scm-blue);
    border-color: var(--scm-blue);
    color: #fff;
}

.scm-pagination__gap {
    color: var(--scm-ink-6);
    padding: 0 4px;
}

/* -- listes generiques (magazine, agenda, podcasts, documents) ------- */
.scm-tiles {
    display: grid;
    grid-template-columns: var(--scm-actus-cols);
    gap: 26px;
}

.scm-tiles--wide { grid-template-columns: var(--scm-mag-list-cols, repeat(4, 1fr)); }

.scm-tile {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--scm-ink);
}

.scm-tile__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.scm-tile__title a { color: inherit; }

.scm-tile__meta {
    color: var(--scm-ink-5);
    font-size: 13.5px;
}

.scm-tile__desc {
    color: var(--scm-ink-4);
    font-size: 14.5px;
    line-height: 1.5;
}

.scm-tile__actions {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.scm-tile__actions .scm-btn {
    font-size: 14px;
    padding: 10px 18px;
}

.scm-tile__actions .scm-btn--ghost { padding: 8.5px 8.5px; }

.scm-tile__cover {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--scm-r-md);
    display: block;
    margin: 0 auto;
}

.scm-tile__badge {
    align-self: flex-start;
    background: var(--scm-blue-100);
    color: var(--scm-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--scm-r-pill);
}

.scm-tile__badge--muted {
    background: var(--scm-placeholder);
    color: var(--scm-ink-5);
}

/* -- agenda (liste detaillee) --------------------------------------- */
.scm-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scm-agenda-item {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-lg);
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 165px;
    gap: 24px;
    align-items: start;
}

.scm-agenda-item__date {
    color: var(--scm-orange-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.scm-agenda-item__title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.scm-agenda-item__title a { color: var(--scm-ink); }

.scm-agenda-item__title a:hover { color: var(--scm-blue); }

.scm-agenda-item__img {
    width: 165px;
    max-width: 100%;
    height: auto;
    border-radius: var(--scm-r-md);
    display: block;
}

.scm-agenda-item__details {
    margin-top: 14px;
    border-top: 1px solid var(--scm-border-soft);
    padding-top: 12px;
}

.scm-agenda-item__details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: var(--scm-blue);
}

.scm-deflist {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 18px;
    font-size: 14.5px;
}

.scm-deflist dt {
    font-weight: 700;
    color: var(--scm-ink-4);
}

.scm-deflist dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* -- filtres (ressources) ------------------------------------------- */
.scm-filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scm-filters__group-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--scm-ink-5);
    margin-bottom: 10px;
}

.scm-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.scm-chip {
    background: var(--scm-surface);
    border: 1px solid var(--scm-border);
    border-radius: var(--scm-r-pill);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--scm-ink-3);
    cursor: pointer;
}

.scm-chip:hover {
    border-color: var(--scm-blue);
    color: var(--scm-blue);
}

.scm-chip.is-active {
    background: var(--scm-blue);
    border-color: var(--scm-blue);
    color: #fff;
}

.scm-searchfield {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.scm-searchfield__input {
    flex: 1;
    min-width: 220px;
    font-family: inherit;
    font-size: 15px;
    padding: 12px 18px;
    border: 1.5px solid var(--scm-border-input);
    border-radius: var(--scm-r-btn);
    background: var(--scm-surface);
    color: var(--scm-ink);
}

/* -- formulaires ---------------------------------------------------- */
.scm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
}

.scm-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scm-form__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--scm-ink-3);
}

.scm-form__input {
    font-family: inherit;
    font-size: 15px;
    padding: 12px 16px;
    border: 1.5px solid var(--scm-border-input);
    border-radius: var(--scm-r-btn);
    background: var(--scm-surface);
    color: var(--scm-ink);
}

.scm-form__hint {
    font-size: 13.5px;
    color: var(--scm-ink-5);
    line-height: 1.5;
}

/* -- etats vides et notices ----------------------------------------- */
.scm-empty {
    background: var(--scm-surface);
    border: 1px dashed var(--scm-border-input);
    border-radius: var(--scm-r-lg);
    padding: 40px 28px;
    text-align: center;
    color: var(--scm-ink-5);
    font-size: 15.5px;
}

.scm-notice {
    background: var(--scm-blue-100);
    border-radius: var(--scm-r-lg);
    padding: 16px 20px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--scm-blue-deep);
}

.scm-notice--beta {
    background: var(--scm-surface-tint);
    border: 1px solid var(--scm-border);
    color: var(--scm-ink-4);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* -- 404 ------------------------------------------------------------ */
.scm-404 {
    text-align: center;
    padding: 60px 0 40px;
}

.scm-404__code {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--scm-blue);
    line-height: 1;
}

.scm-404__title {
    margin: 16px 0 10px;
    font-size: 26px;
    font-weight: 700;
}

.scm-404__text {
    color: var(--scm-ink-5);
    font-size: 16px;
    margin: 0 0 26px;
}

/* ------------------------------------------------------------------ */
/* 17. Responsive                                                      */
/*     Transcription des valeurs calculees en JS par renderVals() :     */
/*       mobile  vw < 720                                              */
/*       tablet  720 <= vw < 1080                                      */
/*       desktop vw >= 1080                                            */
/* ------------------------------------------------------------------ */

/* --- desktop (>= 1080px) : valeurs par defaut de :root, plus les
       elements dont l'affichage depend du palier ------------------- */
@media (min-width: 1080px) {
    .scm-mobile { display: none; }
    .scm-burger { display: none; }
}

/* --- tablette et mobile (< 1080px) ------------------------------- */
@media (max-width: 1079px) {
    :root {
        --scm-une-cols: minmax(0, 1fr);
        --scm-une-card-h: 180px;
        --scm-hero-h: 440px;
        --scm-hero-title: 31px;
        --scm-actus-cols: repeat(2, 1fr);
        --scm-evt-hero-cols: 1fr;
        --scm-mag-list-cols: repeat(3, 1fr);
        --scm-acteurs-cards: repeat(2, minmax(0, 1fr));

        /* newsletter : les trois colonnes s'empilent, les filets passent
           de vertical a horizontal */
        --scm-nl-cols: minmax(0, 1fr);
        --scm-nl-mid-pad: 22px 0;
        --scm-nl-div-x: none;
        --scm-nl-div-y: 1px solid var(--scm-nl-rule);
    }

    .scm-nav { display: none; }

    .scm-header__inner { gap: 20px; }

    .scm-article__title { font-size: 30px; }

    .scm-agenda-item { grid-template-columns: minmax(0, 1fr) 140px; }
    .scm-veille-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scm-veille-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- bloc magazine : basculement propre a ce bloc ------------------ */
/* La carte blanche du bloc mange 2 x 36px de plus que la maquette. Sous
   1240px, les trois colonnes laisseraient au sommaire moins de 460px -
   la double page passerait en mode liste des le desktop. On repasse donc
   la colonne laterale en pleine largeur des 1239px, ce qui rend au
   sommaire la place de s'afficher en revue ouverte. */
@media (max-width: 1239px) {
    :root {
        --scm-mag-cols: 290px minmax(0, 1fr);
        --scm-mag-side-col: 1 / -1;
        --scm-mag-side-dir: row;
    }
}

/* --- mobile (< 720px) -------------------------------------------- */
@media (max-width: 719px) {
    :root {
        --scm-padx: 20px;
        --scm-logo-h: 40px;
        --scm-hero-h: 360px;
        --scm-hero-title: 25px;
        --scm-hero-pad: 80px 22px 24px;
        --scm-une-cards: minmax(0, 1fr);
        --scm-une-card-h: 200px;
        --scm-actus-cols: 1fr;
        --scm-mag-cols: 1fr;
        --scm-mag-side-col: auto;
        --scm-mag-side-dir: column;
        --scm-mag-pad: 22px;
        --scm-evt-hero-pad: 26px 24px;
        --scm-evt-title: 24px;
        --scm-mag-list-cols: repeat(2, 1fr);
        --scm-acteurs-cards: minmax(0, 1fr);
        --scm-nl-feat-cols: repeat(2, minmax(0, 1fr));
        --scm-nl-pad: 26px 22px;
    }

    .scm-veille-filter,
    .scm-veille-results { grid-template-columns: minmax(0, 1fr); }
    .scm-veille-filter__actions { justify-content: stretch; flex-direction: column; }
    .scm-veille-filter__actions .scm-btn { justify-content: center; }
    .scm-veille-card__img { height: 170px; }

    /* Repli du sommaire pour les navigateurs sans @container : sous 720px
       de fenetre, la double page est de toute facon trop etroite. */
    .scm-som__spread {
        aspect-ratio: auto;
        background: none;
    }

    .scm-som__page {
        position: static;
        width: auto;
        overflow: visible;
        gap: 16px;
    }

    .scm-som__page--right {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .scm-som__items,
    .scm-som__page--right .scm-som__items { gap: 16px; }

    .scm-som__label  { font-size: 22px; letter-spacing: -.3px; }
    .scm-som__ref    { font-size: 12px; letter-spacing: 1px; margin-top: 4px; }
    .scm-som__item   { gap: 14px; }
    .scm-som__thumb  { width: 84px; height: 62px; border-radius: var(--scm-r-sm); }
    .scm-som__cat    { font-size: 11.5px; letter-spacing: 1px; }
    .scm-som__desc   { font-size: 14.5px; margin-top: 4px; }

    /* La couverture reprend son flux naturel une fois la grille empilee.
       Le cadre est borne AVEC l'image, sinon le badge - positionne sur le
       cadre - se retrouverait a droite de l'ecran. */
    .scm-mag__cover-wrap {
        min-height: 0;
        flex: none;
        width: 290px;
        max-width: 100%;
        margin: 0 auto;
    }

    .scm-mag__cover { height: auto; }

    /* accountDisplay : masque en mobile dans la maquette */
    .scm-account { display: none; }

    .scm-search.is-open { width: calc(100vw - 40px); }

    .scm-main { gap: 40px; }

    .scm-header__baseline { display: none; }

    .scm-pagehead__title { font-size: 26px; }

    .scm-article__title { font-size: 26px; }

    .scm-article__chapo { font-size: 17px; }

    /* Media de tete bord a bord : .scm-article est centre dans .scm-main,
       dont le padding vaut --scm-padx de chaque cote. Elargir le media de
       exactement deux fois cette valeur le fait affleurer les bords de
       l'ecran, sans marge negative (align-items: center s'en charge).
       Le texte, lui, conserve le padding de .scm-main. */
    .scm-article__media {
        max-width: none;
        width: calc(100% + var(--scm-padx) * 2);
    }

    .scm-gallery__track,
    .scm-article__cover { border-radius: 0; }

    /* les legendes, elles, restent alignees sur le texte */
    .scm-article__caption,
    .scm-gallery__caption { padding: 0 var(--scm-padx); }

    .scm-gallery__nav {
        width: 38px;
        height: 38px;
    }

    .scm-gallery__nav--prev { left: 10px; }
    .scm-gallery__nav--next { right: 10px; }

    .scm-agenda-band { padding: 24px 22px; }

    .scm-agenda-item {
        grid-template-columns: minmax(0, 1fr);
        padding: 20px;
    }

    .scm-agenda-item__img { width: 100%; }

    .scm-deflist { grid-template-columns: minmax(0, 1fr); }

    .scm-deflist dd { margin-bottom: 8px; }

    .scm-modal__dialog { padding: 24px 20px; }

    .scm-footer__inner { gap: 32px; }
}

/* --- tres petits ecrans ------------------------------------------ */
@media (max-width: 479px) {
    :root { --scm-mag-list-cols: 1fr; }

    .scm-mag__actions,
    .scm-modal__actions { flex-direction: column; }
}

/* ------------------------------------------------------------------ */
/* 18. Impression et preferences utilisateur                           */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .scm-search,
    .scm-nav__chevron {
        transition: none;
    }
}

@media print {
    .scm-header,
    .scm-rubriques,
    .scm-footer,
    .scm-ad-megaban,
    .scm-ad-slot,
    .scm-nl,
    .scm-share { display: none; }

    body { background: #fff; }
}

/* Dates secondaires, communes aux cartes et aux fiches. */
.scm-published,.scm-card__date{display:block;margin-top:5px;font-size:11px;line-height:1.5;font-weight:400;color:#657084;letter-spacing:0;text-transform:none;}
.scm-published--hero{color:rgba(255,255,255,.85);margin:6px 0 0;}
.scm-article__meta .scm-published{margin:0;}
.scm-acteur__body{display:flex;flex-direction:column;align-items:flex-start;}

/* Sommaire PDF, charge au clic, sans masquer la couverture au survol. */
.scm-mag-cover{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}.scm-mag-cover>a:first-child{display:block;}.scm-mag-cover img{display:block;width:200px;max-width:100%;height:285px;object-fit:contain;}.scm-mag-contents-link{font-size:13px;color:#0051dc;text-underline-offset:3px;}.scm-mag-contents-pending{font-size:11px;color:#697486;text-align:center;}
.scm-contents-dialog{width:min(1040px,calc(100vw - 40px));max-height:90vh;padding:0;border:0;border-radius:18px;background:#fff;color:#122748;box-shadow:0 24px 90px #10244860;animation:scm-contents-in .18s ease-out;}.scm-contents-dialog::backdrop{background:#12274880;backdrop-filter:blur(6px);}.scm-contents-dialog header{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid #e2e8f4;}.scm-contents-dialog h2{font-size:20px;line-height:1.4;flex:1;}.scm-contents-close{border:0;background:transparent;font-size:32px;cursor:pointer;}.scm-contents-zoom{font-size:12px;color:#0051dc;background:#eef4ff;border:0;border-radius:7px;padding:9px;cursor:pointer;}.scm-contents-pages{max-height:calc(90vh - 95px);overflow:auto;padding:22px;background:#f1f4f9;}.scm-contents-pages figure{margin:0 0 22px;}.scm-contents-pages img{display:block;width:100%;height:auto;max-width:none;background:white;box-shadow:0 3px 18px #17335b15;}.scm-contents-pages figcaption{text-align:center;font-size:11px;color:#637089;padding:8px;}.scm-contents-dialog.is-zoomed figure{min-width:1200px;}
@keyframes scm-contents-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:600px){.scm-contents-dialog{width:calc(100vw - 16px);border-radius:12px;}.scm-contents-dialog header{padding:12px;gap:8px;flex-wrap:wrap;}.scm-contents-dialog h2{font-size:16px;}.scm-contents-zoom{order:3;}.scm-contents-pages{padding:10px;}}
@media(prefers-reduced-motion:reduce){.scm-contents-dialog{animation:none;}}

@media(max-width:600px){.scm-contents-dialog h2{flex-basis:calc(100% - 50px);}.scm-contents-close{flex:none;}.scm-contents-zoom{order:3;}}