@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/*
 * Silva Numerica 2026 — front autonome PHP
 * Priorité : fidélité à la direction artistique + lisibilité + navigation clavier.
 */
:root {
    --ink: #1d1d1b;
    --ink-2: #262625;
    --paper: #ffffff;
    --paper-soft: #f5f5f3;
    --orange: #f39522;
    --orange-dark-text: #171717;
    --green: #006f3c;
    --green-dark: #00542e;
    --text: #252525;
    --muted: #666a6d;
    --line: #d8d9d7;
    --radius: 1.1rem;
    --shadow: 0 16px 42px rgba(0,0,0,.14);
    --font-main: "Bricolage Grotesque", Arial, Helvetica, sans-serif;
    --container: 1120px;
    --container-wide: 1480px;
    --focus: #ffe263;

    /* Rythme vertical commun aux grandes sections de la home. */
    --section-space: clamp(3.5rem, 5.5vw, 5.5rem);
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: 118px;
    background-color: #000;
    color-scheme: dark;
}

/* Sélection de texte — charte Silva Numerica */
::selection {
    background: var(--orange);
    color: var(--ink);
}

::-moz-selection {
    background: var(--orange);
    color: var(--ink);
}

body {
    margin: 0;
    min-width: 320px;
    font-family: var(--font-main);
    font-weight: 300;
    line-height: 1.45;
    color: var(--text);
    background: var(--paper);
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
img, svg, video { display: block; max-width: 100%; }
a {
    color:inherit;
    text-decoration:none;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
    box-shadow: none;
}

h1,h2,h3,h4,p { margin-top: 0; }
h1,h2,h3,h4,strong,b { font-weight: 700; }
h1 { font-size: clamp(2.7rem, 6.2vw, 6.1rem); line-height: .93; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.3vw, 4rem); line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.08; letter-spacing: 0; }

.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }
.container-wide { width: min(calc(100% - 2rem), var(--container-wide)); margin-inline: auto; }
.section {
    padding-block: var(--section-space);
}

/*
 * Sur la home sombre, deux sections successives ne cumulent pas
 * leur padding vertical : un seul espacement standard sépare les blocs.
 */
.home-dark > .section + .section {
    padding-top: 0;
}
.eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.skip-link {
    position: fixed;
    z-index: 9999;
    left: 1rem;
    top: .75rem;
    transform: translateY(-180%);
    padding: .8rem 1rem;
    background: var(--paper);
    color: var(--ink);
    border-radius: .5rem;
    font-weight: 700;
    box-shadow: var(--shadow);
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
    z-index: 1000;
    width: 100%;
}

/* Accueil : menu transparent au chargement, fixé au-dessus de la vidéo. */
.site-header--dark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transition:
        background-color .22s ease,
        box-shadow .22s ease,
        backdrop-filter .22s ease;
}


/* Header sombre / accueil : noir → blanc */
.site-header--dark .site-logo img {
    filter: brightness(0) invert(1);
}


/* Dès que l'utilisateur commence à défiler, on renforce le contraste du menu,
   sans filet sous le header. */
.site-header--dark.is-scrolled {
    background: rgba(0,0,0,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

/* Pages internes : header visible et collant, sans masquer le début du contenu. */
.site-header--light {
    position: sticky;
    top: 0;
    color: var(--ink);

    /* Pages intérieures : fond blanc dès l'arrivée sur la page. */
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    /* Pas de filet tant que la page n'a pas commencé à défiler. */
    box-shadow: none;

    transition:
        background-color .22s ease,
        box-shadow .22s ease,
        backdrop-filter .22s ease;
}

/* Au scroll : le fond reste blanc, sans filet sous le header. */
.site-header--light.is-scrolled {
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}
.site-header__inner { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.site-logo { display: inline-flex; flex: 0 0 auto; }
.site-logo img { width: clamp(160px, 16vw, 228px); height: auto; }
.site-header--light .site-logo img {
    filter: none;
}

body.header-light {
    background-color:#f3f3f1;
    background-image:url('../images/trame-grise.webp');

    /*
     * Une seule trame sur toute la largeur du viewport :
     * pas de répétition horizontale, donc aucun raccord visible
     * sur les bords gauche/droit. La répétition ne se fait qu'en hauteur.
     */
    background-repeat:repeat-y;
    background-position:center top;
    background-size:max(505px, 100vw) auto;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.6rem); }
.site-nav a { text-decoration: none; font-size: clamp(.9rem, 1.1vw, 1.08rem); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }

.site-nav a:focus-visible {
    outline:3px solid #111;
    outline-offset:3px;
    box-shadow:none;
}

.site-header--dark .site-nav a:focus-visible {
    outline-color:#fff;
}

.site-nav a[aria-current="page"] {
    text-decoration:none;
    background:transparent;
    color:#767676;
    box-shadow:none;
    border-radius:0;
    padding:0;
}

/* Sur le header sombre : texte gris clair, sans fond ni effet bouton. */
.site-header--dark .site-nav a[aria-current="page"] {
    background:transparent;
    color:#c7c7c7;
    box-shadow:none;
}
.nav-download { border: 1.5px solid currentColor; border-radius: 999px; padding: .72rem 1.35rem; }
.nav-download:hover, .nav-download:focus-visible { background: #fff; color: var(--ink); }

/* Le bouton Télécharger conserve sa forme lorsqu'il correspond à la page active :
   seule sa couleur change, contrairement aux autres liens du menu. */
.site-nav .nav-download[aria-current="page"] {
    padding:.72rem 1.35rem;
    border:1.5px solid currentColor;
    border-radius:999px;
    background:transparent;
    color:#767676;
    box-shadow:none;
}

.site-header--dark .site-nav .nav-download[aria-current="page"] {
    color:#c7c7c7;
    background:transparent;
    border-color:currentColor;
}

.site-header--light .nav-download:hover, .site-header--light .nav-download:focus-visible { background: var(--ink); color: #fff; }
.nav-toggle { display: none; border: 0; background: transparent; color: inherit; min-height: 44px; min-width: 44px; align-items: center; gap: .65rem; font-weight: 700; }
.nav-toggle__icon { width: 28px; display: grid; gap: 5px; }
.nav-toggle__icon span { height: 2px; background: currentColor; display: block; }

/* Buttons */

.button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: .78rem 1.25rem; border: 2px solid transparent; border-radius: 999px; text-decoration: none; font-weight: 700; line-height: 1.15; cursor: pointer; }
.button--orange { background: var(--orange-dark-text); color: var(--orange); border: none; box-shadow: none; }

.button--orange:hover { background: #ffac4b; }

/* Accueil — CTA principal sur la vidéo */
.home-hero .button--orange {
    background:var(--orange);
    color:#000;
    border:0;
    box-shadow:none;
    transition:background-color .18s ease, color .18s ease;
}

.home-hero .button--orange:hover,
.home-hero .button--orange:focus-visible {
    background:#ffac4b;
    color:#000;
    border:0;
}

.button--dark { background: var(--ink); color: #fff; }
.button--light { background: #fff; color: var(--ink); border-color: var(--ink); }
.button--green { background: var(--green); color: #fff; }
.button--green:hover { background: var(--green-dark); }
.button img { width: 1.25rem; height: 1.25rem; }


/* Focus clavier global : un seul contour noir, lisible et sobre. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
    box-shadow: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border: 2px solid #111;
    box-shadow: none;
}

/* Home hero */
.home-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #0e1510;
}
.home-hero__media { position: absolute; inset: 0; }
.home-hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.38) 36%, rgba(0,0,0,.52)); pointer-events:none; }
.home-hero video { width: 100%; height: 100%; object-fit: cover; }
.home-hero__content { position: relative; z-index: 3; width: min(calc(100% - 2rem), 980px); margin-inline: auto; padding-top: 7.5rem; text-align: center; }
.home-hero h1 {
    margin-bottom: 1.6rem;
    letter-spacing: -.01em;
    font-kerning: normal;
    font-variation-settings: "wdth" 100;
}
.home-hero__subtitle { margin: 0 auto 2rem; max-width: 760px; font-size: clamp(1.25rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.08; }
.home-hero__timeline { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(56%, 880px); pointer-events: none; }
.home-hero__timeline img { width: 100%; }
.hero-video-toggle { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; border:0; color:#fff; background: rgba(0,0,0,.72); border-radius: 999px; min-height:44px; padding:.65rem 1rem; font-weight:700; cursor:pointer; }

.home-hero a:focus-visible,
.home-hero button:focus-visible {
    outline-color: #fff;
}

/* Home dark sections */
.home-dark {
    color:#fff;
    background-color:var(--ink);

    /* Trame noire finale Umberto : fichier 2000 × 8100 px.
       Une seule image, jamais répétée.
       Elle s'affiche à sa largeur native sur grand écran et se réduit
       proportionnellement sur les écrans plus étroits. */
    background-image:url('../images/trame-noire.webp');
    background-repeat:no-repeat;
    background-position:center top;
    background-size:min(2000px, 100vw) auto;
}



/* Bloc Découvrir Silva Numerica */
.discover-card {
    display:grid;
    grid-template-columns:.96fr 1.04fr;
    align-items:center;

    /* Colonnes plus proches, avec davantage d'air autour du contenu. */
    gap:clamp(1.5rem,2.8vw,3rem);
    padding:
        clamp(3.25rem,6vw,6rem)
        clamp(2.5rem,5vw,5.25rem);

    color:var(--ink);
    background-color:#f4f4f4;
    background-image:url('../images/trame-blanc.svg');
    background-repeat:no-repeat;
    background-position:top right;
    background-size:56% auto;

    border-radius:clamp(1.5rem,2vw,2rem);
    box-shadow:0 20px 50px rgba(0,0,0,.10);
    overflow:hidden;
}

.discover-card__visual {
    position:relative;
    min-width:0;
}

.discover-card__visual > img {
    width:100%;
    height:auto;
}

/* Logo du bloc : SVG noir, avec un espace confortable dessous. */
.discover-card .newsletter__brand {
    /* Le logo appartient au bloc Découvrir : il reste dans le flux,
       aligné à gauche sur la même ligne que le texte, sans translation. */
    display:block;
    width:100%;
    margin:0 0 clamp(1.45rem,2vw,1.8rem);
    padding:0;

    grid-area:auto;
    align-self:auto;
    justify-self:auto;
    transform:none;

    text-align:left;
}

.discover-card .newsletter__brand img {
    display:block;
    width:min(315px,100%);
    height:auto;
    margin:0;
    filter:none;
}

/* Le texte hérite volontairement de l'interligne global du site (1.45). */
.discover-card__copy {
    min-width:0;
}

.discover-card__copy p {
    max-width:60ch;
    margin-bottom:1.05rem;
}

.discover-card__copy p:last-of-type {
    margin-bottom:1.45rem;
}

.play-link {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-10%);
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:rgba(255,255,255,.92);
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:999px;
    padding:.65rem 1rem;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    transition:background-color .18s ease, transform .18s ease;
}

.play-link:hover {
    background:#fff;
    transform:translate(-50%,-10%) scale(1.04);
}

.play-link::before {
    content:"";
    display:block;
    flex:0 0 auto;
    width:1rem;
    height:1rem;
    background-color:currentColor;

    -webkit-mask-image:url('../images/play.svg');
    mask-image:url('../images/play.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

.discover-card__actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.75rem;
}

.discover-card__actions .button img {
    width:1.45rem;
    height:1.45rem;
    flex:0 0 auto;
    object-fit:contain;
}

.section-title--orange { color: var(--orange); max-width: 770px; margin-bottom: 2rem; letter-spacing: 0; }
.news-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.news-card { border:2px solid var(--orange); border-radius:.8rem; overflow:hidden; display:flex; flex-direction:column; min-width:0; background:rgba(29,29,27,.84); }
.news-card img { aspect-ratio: 3/2; width:100%; object-fit:cover; }
.news-card__body { padding:1rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.news-card time { font-size:.85rem; color:#e1e1df; }
.news-card h3 { margin:0; }
.news-card a { margin-top:auto; font-weight:700; }


/* =========================================================
   Accueil — Dernières actualités
   Fidèle à la maquette : cartes texte, pictos orange, slash décoratif
   ========================================================= */
section[aria-labelledby="actualites-title"] {
    position:relative;
}

section[aria-labelledby="actualites-title"] .eyebrow {
    display:none;
}

#actualites-title {
    max-width:850px;
    margin-bottom:clamp(2rem,3.5vw,3rem);
    color:var(--orange);
    font-size:clamp(2.8rem,4.3vw,4.5rem);
    line-height:.96;
    letter-spacing:0;
    font-variation-settings:"wdth" 100;
}

/* Picto commentaire : le SVG source reste noir, le masque CSS le colore en orange. */
#actualites-title::before {
    content:"";
    display:block;
    width:46px;
    height:48px;
    margin-bottom:.65rem;
    background-color:var(--orange);

    -webkit-mask-image:url('../images/commentaire.svg');
    mask-image:url('../images/commentaire.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

/* Le slash est répété horizontalement pour retrouver la longueur de la maquette. */
#actualites-title::after {
    content:"";
    display:block;

    width:360px;
    max-width:100%;
    height:30px;
    margin-top:.75rem;

    background-color:var(--orange);

    -webkit-mask-image:url('../images/slash34.svg');
    mask-image:url('../images/slash34.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

section[aria-labelledby="actualites-title"] .news-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(1rem,1.6vw,1.4rem);
    align-items:stretch;
}

section[aria-labelledby="actualites-title"] .news-card {
    position:relative;
    min-height:355px;
    border:2px solid var(--orange);
    border-radius:1.05rem;
    overflow:hidden;
    background:rgba(24,24,23,.90);
    color:#fff;
    box-shadow:none;
}

/* Sur la home, la maquette n'affiche ni image, ni résumé, ni lien individuel. */
section[aria-labelledby="actualites-title"] .news-card > img,
section[aria-labelledby="actualites-title"] .news-card__body > p,
section[aria-labelledby="actualites-title"] .news-card__body > a {
    display:none;
}

section[aria-labelledby="actualites-title"] .news-card__body {
    height:100%;
    padding:1.35rem 1.35rem 1.2rem;
    display:flex;
    flex-direction:column;
    gap:.55rem;
}

section[aria-labelledby="actualites-title"] .news-card h3 a {
    color:inherit;
    text-decoration:none;
}

section[aria-labelledby="actualites-title"] .news-card h3 a:hover,
section[aria-labelledby="actualites-title"] .news-card h3 a:focus-visible {
    text-decoration:none;
}

section[aria-labelledby="actualites-title"] .news-card h3 {
    order:1;
    margin:0;
    color:#fff;
    font-size:clamp(1.45rem,1.85vw,2rem);
    font-weight:400;
    line-height:1.02;
    letter-spacing:0;
}

section[aria-labelledby="actualites-title"] .news-card time {
    order:2;
    margin-top:auto;
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    line-height:1.2;
}

/* Vrai lien vers toutes les actualités : le SVG + noir est coloré en orange. */
.news-more {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    margin-top:.8rem;
    background-color:var(--orange);
    border-radius:50%;
    text-decoration:none;

    -webkit-mask-image:url('../images/plus.svg');
    mask-image:url('../images/plus.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;

    transition:transform .15s ease;
}

/* L'image reste dans le HTML mais le masque dessine déjà le pictogramme. */
.news-more img {
    width:48px;
    height:48px;
    opacity:0;
    pointer-events:none;
}

.news-more:hover {
    transform:scale(1.06);
}

.news-more:focus-visible {
    outline:3px solid #fff;
    outline-offset:4px;
    box-shadow:0 0 0 6px var(--focus);
}

/* =========================================================
   Accueil — Agenda
   Calage desktop sur la maquette Umberto
   ========================================================= */
.agenda-panel {
    position:relative;
    overflow:hidden;

    /*
     * La maquette utilise un panneau nettement plus étroit que le
     * container-wide général : ~1000 px sur desktop.
     */
    width:100%;
    max-width:var(--container);
    min-height:595px;
    margin-inline:auto;

    border-radius:1.4rem;
    padding:
        clamp(3.75rem,4.5vw,4.25rem)
        clamp(2rem,2.5vw,2.25rem)
        clamp(4.5rem,6vw,6rem);

    color:#fff;
    background-color:#1a251d;
    background-image:url('../images/foret.jpg');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

/* Voile très léger : la photo doit rester présente, comme sur la maquette. */
.agenda-panel::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.03) 42%,
        rgba(0,0,0,.10) 100%
    );
    pointer-events:none;
}

.agenda-panel > * {
    position:relative;
    z-index:1;
}

/* Titre Agenda : trombone, titre, puis slash15. */
.agenda-title {
    display:block;
    width:max-content;
    max-width:100%;
    margin:0 0 2.4rem;
}

.agenda-title::before {
    content:"";
    display:block;
    width:44px;
    height:50px;
    margin-bottom:.4rem;

    background-color:#fff;

    -webkit-mask-image:url('../images/trombone.svg');
    mask-image:url('../images/trombone.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

/* L'ancien picto du HTML reste masqué visuellement. */
.agenda-title > img {
    display:none;
}

.agenda-title h2 {
    margin:0;

    color:#fff;
    font-size:clamp(3.1rem,3.55vw,3.5rem);
    line-height:.94;
    letter-spacing:-.005em;
}

.agenda-title::after {
    content:"";
    display:block;

    width:145px;
    max-width:100%;
    height:20px;
    margin-top:.7rem;

    background-color:#fff;

    -webkit-mask-image:url('../images/slash15.svg');
    mask-image:url('../images/slash15.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

/* Trois cartes compactes sur une seule rangée, comme sur la maquette. */
.agenda-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.2rem,1.7vw,1.55rem);
    align-items:stretch;
}

/*
 * Date à gauche, contenu à droite.
 * Les tailles sont volontairement contenues : les dates longues
 * (« OCT > DÉC », « JAN > SEPT ») ne doivent plus entrer en collision
 * avec les titres.
 */
.agenda-card {
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:
        "date title"
        "date text";

    column-gap:.85rem;
    row-gap:.45rem;

    align-content:start;
    align-items:start;
    min-width:0;
    min-height:198px;
    padding:1.15rem;

    color:#fff;
    border:2px solid rgba(255,255,255,.96);
    border-radius:1.25rem;

    background:rgba(0,0,0,.035);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.agenda-card > * {
    min-width:0;
}

/* La date « SEPT 2026 » est beaucoup plus courte que les deux autres.
   On réduit uniquement sa colonne sur desktop pour conserver le même
   écart visuel entre la date et le contenu. */
@media (min-width: 1051px) {
    .agenda-card:first-child {
        grid-template-columns:80px minmax(0,1fr);
    }
}

/* Date : les deux <span> restent sur deux lignes. */
.agenda-card__date {
    grid-area:date;
    display:block;
    margin:0;

    color:#fff;
    font-size:clamp(1.05rem,1.18vw,1.16rem);
    font-weight:700;
    line-height:.96;
    letter-spacing:0;
    text-transform:uppercase;
}

.agenda-card__date span {
    display:block;
    white-space:nowrap;
}

.agenda-card h3 {
    grid-area:title;
    margin:0;

    color:#fff;
    font-size:clamp(1rem,1.08vw,1.12rem);
    font-weight:700;
    line-height:1.08;
    letter-spacing:0;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:normal;
}

.agenda-card p {
    grid-area:text;
    align-self:start;

    margin:.05rem 0 0;
    max-width:none;

    color:#fff;
    font-size:clamp(.9rem,.98vw,.96rem);
    line-height:1.28;
    overflow-wrap:break-word;
}

/* =========================================================
   Accueil — Newsletter / communauté
   Calage sur la maquette Umberto
   ========================================================= */
.newsletter-wrap {
    position:relative;
    min-height:clamp(800px,68vw,1400px);

    /* Même respiration verticale que les sections sur fond à courbes. */
    padding:var(--section-space) 0;

    overflow:hidden;

    background-color:#101510;
    background-image:url('../images/foret-bas.jpg');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}

/*
 * La maquette laisse la forêt largement visible sous le pavé orange :
 * sombre en haut, puis beaucoup plus lumineuse dans la partie basse.
 */
.newsletter-wrap::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.58) 15%,
        rgba(0,0,0,.12) 43%,
        rgba(0,0,0,.03) 100%
    );
    pointer-events:none;
}

.newsletter {
    position:relative;
    z-index:1;

    /*
     * On dépasse volontairement le --container global de 1120 px :
     * le bloc de la maquette occupe environ 80 % de la largeur disponible.
     */
    width:min(calc(100% - 2rem),var(--container));
    max-width:var(--container);
    min-height:560px;
    margin-inline:auto;

    display:grid;
    /* Maquette : une vraie zone gauche large et aérée,
       avec le logo centré au-dessus d'un bouton beaucoup plus large. */
    grid-template-columns:minmax(370px,410px) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:
        "brand title"
        "brand lead"
        "button note";

    column-gap:clamp(2.5rem,3vw,2.9rem);
    row-gap:1.65rem;
    align-content:center;
    align-items:start;

    padding:
        clamp(5rem,6vw,6.25rem)
        clamp(2.5rem,3vw,3rem)
        clamp(5.5rem,7vw,7rem);

    background:var(--orange);
    color:var(--ink);
    border-radius:2rem;
    box-shadow:none;
}

/*
 * Le second <div> du HTML devient transparent pour la grille :
 * cela permet de placer le bouton sous le logo sans modifier le HTML.
 */
.newsletter > div:not(.newsletter__brand) {
    display:contents;
}

.newsletter > .newsletter__brand {
    grid-area:brand;
    align-self:center;
    justify-self:stretch;
    min-width:0;

    /* Le conteneur occupe toute la colonne, mais le logo est réellement
       centré dedans — ce qui correspond à la maquette. */
    display:flex;
    justify-content:center;
    align-items:center;
}

.newsletter > .newsletter__brand img {
    width:min(260px,100%);
    height:auto;
    filter:none;
}

.newsletter h2 {
    grid-area:title;
    align-self:end;

    max-width:none;
    margin:0;

    color:var(--ink);
    font-size:clamp(2.15rem,2.55vw,2.75rem);
    font-weight:700;
    line-height:.96;
    letter-spacing:-.015em;
    text-transform:uppercase;
    text-wrap:balance;
}

.newsletter p {
    margin:0;
    color:var(--ink);
}

.newsletter p:first-of-type {
    grid-area:lead;
    max-width:670px;

    font-size:clamp(1.12rem,1.42vw,1.45rem);
    font-weight:700;
    line-height:1.12;
}

.newsletter p:nth-of-type(2) {
    grid-area:note;
    max-width:650px;
    align-self:center;

    font-size:clamp(.9rem,1vw,1rem);
    font-weight:400;
    line-height:1.35;
}

.newsletter p:nth-of-type(2) small {
    font-size:inherit;
    line-height:inherit;
}

.newsletter .button {
    grid-area:button;
    justify-self:stretch;
    align-self:center;

    width:100%;
    min-height:64px;
    margin:0;
    padding:1rem 1.75rem;

    border:0;
    border-radius:999px;

    background:var(--ink);
    color:var(--orange);

    font-size:clamp(1.02rem,1.16vw,1.18rem);
    font-weight:700;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;
}

.newsletter .button:hover {
    background:#111;
    color:#ffad49;
}

.newsletter .button:focus-visible {
    outline:3px solid #fff;
    outline-offset:4px;
    box-shadow:0 0 0 7px #111;
}

/* Desktop : contenu centré verticalement dans le pavé orange. */
@media (min-width:1051px) {
    .newsletter > .newsletter__brand,
    .newsletter h2,
    .newsletter p,
    .newsletter .button {
        transform:none;
    }
}

/* Tablette : on conserve la hiérarchie, mais en une seule colonne. */
@media (max-width:1050px) {
    .newsletter-wrap {
        min-height:auto;
        padding:3.5rem 0 5rem;
    }

    .newsletter {
        width:min(calc(100% - 2rem),760px);
        min-height:0;

        grid-template-columns:1fr;
        grid-template-areas:
            "brand"
            "title"
            "lead"
            "note"
            "button";

        gap:1.35rem;
        padding:clamp(2.5rem,7vw,4rem);
        border-radius:1.6rem;
    }

    .newsletter > .newsletter__brand {
        align-self:start;
        justify-self:start;
        margin-bottom:.75rem;
        transform:none;
    }

    .newsletter h2,
    .newsletter p,
    .newsletter .button {
        transform:none;
    }

    .newsletter h2 {
        font-size:clamp(2rem,6vw,2.8rem);
    }

    .newsletter p:first-of-type {
        max-width:56ch;
    }

    .newsletter .button {
        margin-top:.45rem;
    }
}

@media (max-width:620px) {
    .newsletter-wrap {
        padding:2.5rem 0 3.5rem;
        background-position:center center;
    }

    .newsletter {
        width:min(calc(100% - 1.2rem),760px);
        padding:2.25rem 1.35rem 2.5rem;
        border-radius:1.25rem;
    }

    .newsletter > .newsletter__brand img {
        width:min(260px,100%);
    }

    .newsletter h2 {
        font-size:clamp(1.8rem,9vw,2.35rem);
    }

    .newsletter p:first-of-type {
        font-size:1rem;
        line-height:1.2;
    }

    .newsletter .button {
        width:100%;
        min-height:54px;
        padding:.9rem 1rem;
        white-space:normal;
        text-align:center;
    }
}

/* Internal pages */
.internal-main { min-height:60vh; }
.page-hero { padding:clamp(2rem,4vw,3.5rem) 0 clamp(4rem,6vw,6rem); }
.page-hero--light {
    background:transparent;
    color:var(--ink);
}
.page-hero--pattern {
    position:relative;
    background:transparent;
}
.page-hero__panel { border-radius:var(--radius); padding:clamp(2rem,6vw,5rem); background:rgba(255,255,255,.83); box-shadow:0 0 0 1px rgba(0,0,0,.04); }
.page-hero p { max-width:70ch; font-size:clamp(1.05rem,1.5vw,1.3rem); }

/* =========================================================
   Page Outil — histoire, évolution et crédits
   ========================================================= */
.tool-page > .container {
    max-width:1120px;
}


.tool-story-list {
    display:grid;
    gap:clamp(1.5rem,2.4vw,2.25rem);
}

.tool-story {
    position:relative;
    overflow:hidden;
    min-height:0;
    border-radius:clamp(1.15rem,1.5vw,1.5rem);
    color:#fff;
    background-color:#111;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    box-shadow:none;
    isolation:isolate;
}

.tool-story::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.76) 42%,rgba(0,0,0,.46) 100%);
}

.tool-story--01 {
    background-image:url('../images/projet-01.jpg');
    background-position:center bottom;
}

.tool-story--02 {
    background-image:url('../images/projet-02.jpg');
}

.tool-story--03 {
    background-image:url('../images/projet-03.jpg');
}

.tool-story--04 {
    background-image:url('../images/projet-04.jpg');
}

.tool-story__content,
.tool-story__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(2.5rem,4.5vw,4.75rem);
    align-items:start;
    padding:clamp(2.6rem,4vw,4rem);
}

.tool-story__content {
    max-width:960px;
    padding:clamp(2.6rem,4vw,4rem);
}

.tool-story__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(2.5rem,5vw,5rem);
    align-items:start;
    min-height:620px;
    padding:clamp(3rem,4.8vw,4.75rem);
}

.tool-story__column {
    min-width:0;
}

.tool-story__kicker {
    margin:0 0 .1rem;
    font-size:clamp(2.15rem,3.2vw,3.2rem);
    font-weight:700;
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-.02em;
}

.tool-story__subtitle {
    margin:0 0 clamp(2.25rem,3.5vw,3.5rem);
    font-size:clamp(.95rem,1.15vw,1.1rem);
    font-weight:700;
    line-height:1.15;
}

.tool-story__title {
    margin:0 0 1rem;
    color:#fff;
    font-size:clamp(1.75rem,2.4vw,2.45rem);
    font-weight:700;
    line-height:.98;
    letter-spacing:-.012em;
    text-wrap:balance;
}

.tool-story__title::after {
    content:"";
    display:block;
    width:min(240px,70%);
    height:22px;
    margin-top:.75rem;
    background-color:var(--orange);
    -webkit-mask-image:url('../images/slash34.svg');
    mask-image:url('../images/slash34.svg');
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

.tool-story p,
.tool-story li {
    color:#fff;
    font-size:clamp(.9rem,1vw,1rem);
    line-height:1.3;
}

.tool-story p {
    max-width:none;
    margin:0 0 1.2rem;
}

.tool-story p:last-child {
    margin-bottom:0;
}

.tool-story strong {
    font-weight:700;
}

.tool-story__list {
    margin:0 0 1.15rem;
    padding-left:1rem;
    list-style:none;
}

.tool-story__list li + li {
    margin-top:.28rem;
}

.tool-story__list--stats {
    padding-left:1rem;
}

.tool-story__callout {
    margin-top:1.8rem !important;
    padding:1.35rem 1.5rem;
    border-radius:1rem;
    background:var(--orange);
    color:var(--ink) !important;
}

.tool-story__callout strong {
    color:var(--ink);
}

/* Crédits : grand panneau clair + groupes repliables natifs et accessibles. */
.credits-panel {
    margin-top:clamp(3.5rem,6vw,5.5rem);
    padding:clamp(2.75rem,4.5vw,4.5rem);
    color:var(--ink);
    background:#f4f4f4;
    border-radius:clamp(1.15rem,1.5vw,1.5rem);
}

.credits-panel__intro {
    max-width:880px;
}

.credits-panel__intro .eyebrow {
    margin-bottom:.9rem;
    color:var(--orange);
}

.credits-panel__intro h2 {
    max-width:850px;
    margin-bottom:1.35rem;
    font-size:clamp(2.15rem,3.2vw,3.25rem);
    line-height:.97;
}

.credits-panel__lead {
    font-size:clamp(1.15rem,1.45vw,1.35rem) !important;
    font-weight:700;
}

.credits-panel p {
    max-width:78ch;
}

.credits-groups {
    margin-top:clamp(2.5rem,4vw,4rem);
    border-top:2px solid var(--ink);
}

.credits-group {
    border-bottom:1px solid rgba(29,29,27,.28);
}

.credits-group summary {
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:1.25rem 3.5rem 1.25rem 0;
    color:var(--ink);
    font-size:clamp(1.15rem,1.6vw,1.45rem);
    font-weight:700;
    line-height:1.15;
}

.credits-group summary::-webkit-details-marker {
    display:none;
}

.credits-group summary::after {
    content:"+";
    position:absolute;
    right:0;
    top:50%;
    display:grid;
    place-items:center;
    width:2.25rem;
    height:2.25rem;
    transform:translateY(-50%);
    border:2px solid var(--orange);
    border-radius:50%;
    color:var(--orange);
    font-size:1.65rem;
    font-weight:400;
    line-height:1;
}

.credits-group[open] summary::after {
    content:"−";
}

.credits-group__content {
    padding:0 3.5rem 1.5rem 0;
}

.credits-group__content p {
    margin-bottom:1rem;
}

.credits-names {
    font-size:.98rem;
    line-height:1.55;
}

.credits-panel__thanks {
    margin-top:clamp(3rem,5vw,5rem);
    padding:clamp(1.8rem,3vw,2.75rem);
    color:#fff;
    background:var(--ink);
    border-radius:1.25rem;
}

.credits-panel__thanks h3 {
    margin-bottom:1rem;
    color:#fff;
    font-size:clamp(1.7rem,2.7vw,2.7rem);
}

.credits-panel__thanks p {
    color:#fff;
}

.credits-panel__thanks a {
    color:var(--orange);
    font-weight:700;
}

.credits-panel__merci {
    margin-top:1.5rem !important;
    color:var(--orange) !important;
    font-size:clamp(1.25rem,1.8vw,1.5rem) !important;
}

/* =========================================================
   Page Télécharger — version resserrée / maquette Umberto
   ========================================================= */

/* Comme les autres pages intérieures : trame grise à l'extérieur,
   pavé principal blanc à l'intérieur. */
.download-page,
.download-page .page-hero,
.download-page .page-hero--pattern {
    background:transparent;
}

/* Un peu moins d'air vertical que les pages internes génériques. */
.download-page .page-hero {
    padding:clamp(2rem,3.5vw,3.25rem) 0 clamp(4rem,5vw,5rem);
}

/*
 * Panneau principal :
 * - largeur proche de la maquette (~920 px)
 * - gros arrondi
 * - trame grise uniquement DANS le panneau
 */
.download-panel {
    width:min(calc(100% - 2rem),var(--container));
    max-width:var(--container);
    margin-inline:auto;

    padding:
        clamp(3.25rem,5vw,4.75rem)
        clamp(2.25rem,6vw,6rem)
        clamp(4rem,6vw,5.75rem);

    color:var(--ink);

    background:#fff;
    background-image:none;

    border-radius:clamp(1.35rem,1.8vw,1.7rem);
    box-shadow:none;
}

/*
 * Même échelle typographique que le grand titre éditorial de la page Outil.
 */
.download-panel h1 {
    max-width:620px;
    margin:0 0 clamp(2.4rem,3.4vw,3.1rem);

    font-size:clamp(1.8rem,2.1vw,2.4rem);
    line-height:.98;
    letter-spacing:-.008em;
    text-wrap:wrap;
}

/* Intro plus compacte et limitée en largeur comme sur la maquette. */
.download-panel > p {
    max-width:650px;
}

.download-panel > p:first-of-type {
    margin-bottom:1.5rem;
    font-size:clamp(1rem,1.05vw,1.08rem);
    font-weight:700;
    line-height:1.22;
}

.download-panel > p .button {
    margin-top:.2rem;
}

/*
 * Tout le contenu secondaire reste dans une colonne étroite.
 */
.download-steps {
    display:block;
    max-width:none;
    width:100%;
    margin-top:clamp(3.4rem,4.5vw,4.4rem);
}

.download-section + .download-section {
    margin-top:clamp(4rem,5vw,5rem);
}

.download-section h2 {
    margin:0 0 1.25rem;

    font-size:clamp(1rem,1.05vw,1.08rem);
    line-height:1.15;
    letter-spacing:0;
    text-wrap:wrap;
}

.download-section ol {
    margin:0;
    padding-left:1.35rem;
}

.download-section ol li {
    padding-left:.2rem;
    font-size:.98rem;
    line-height:1.35;
}

.download-section ol li + li {
    margin-top:.45rem;
}

.download-section__important {
    margin:1.65rem 0 0;
    font-size:.98rem !important;
}

/* Configuration : volontairement étroite et compacte. */
.download-section--config {
    max-width:none;
    width:100%;
}

.download-panel .specs {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    list-style:none;
    border-top:1px solid rgba(29,29,27,.22);
}

.download-panel .specs li {
    display:grid;
    grid-template-columns:32px 132px minmax(0,1fr);
    gap:.8rem;
    align-items:center;

    min-height:56px;
    padding:.7rem 0;

    border-bottom:1px solid rgba(29,29,27,.22);
}

.download-panel .specs img {
    width:26px;
    height:26px;
    object-fit:contain;
}

.download-panel .specs strong {
    font-size:.98rem;
    font-weight:700;
    line-height:1.15;
}

.download-panel .specs span {
    min-width:0;
    font-size:.98rem;
    line-height:1.28;
}

.download-config__note {
    margin:.95rem 0 0;
}

.download-config__note small {
    font-size:.92rem;
    line-height:1.35;
}

/* Classe conservée pour les autres pages éventuelles. */
.notice {
    border-left:5px solid var(--orange);
    background:#fff5e9;
    padding:1rem 1.2rem;
}

@media (max-width:700px) {
    .download-panel {
        width:min(calc(100% - 1.2rem),920px);
        padding:2.6rem 1.35rem 3rem;
        background-size:505px auto;
        border-radius:1.25rem;
    }

    .download-panel h1,
    .download-panel > p,
    .download-steps,
    .download-section--config {
        max-width:none;
    }

    .download-panel h1 {
        font-size:clamp(1.55rem,5.4vw,2.1rem);
        line-height:1;
    }

    .download-panel .specs li {
        grid-template-columns:26px 110px minmax(0,1fr);
        grid-template-areas:none;
        gap:.55rem;
        align-items:start;
        padding:.75rem 0;
    }

    .download-panel .specs li > img,
    .download-panel .specs li > strong,
    .download-panel .specs li > span {
        grid-area:auto;
    }

    .download-panel .specs li > img {
        margin-top:.05rem;
    }

    .download-panel .specs li > strong,
    .download-panel .specs li > span {
        min-width:0;
    }
}

.content-page { padding-block:clamp(3rem,7vw,7rem); }
.content-page .prose { max-width:850px; }
.prose h2 { font-size:clamp(1.7rem,3vw,2.7rem); margin-top:2.5rem; }
.prose h3 { margin-top:2rem; }
.prose a { color:#005f36; font-weight:700; }



/* =========================================================
   Actualités — fichiers texte + chargement progressif
   ========================================================= */

.news-page,
.news-page .content-page {
    background:transparent;
}

.news-page .content-page {
    padding:clamp(2rem,3.5vw,3.25rem) 0 clamp(4.5rem,6vw,6rem);
}

.news-index,
.news-article {
    width:min(calc(100% - 2rem),1120px);
    max-width:1120px;
    margin-inline:auto;
    padding:
        clamp(3rem,4.5vw,4.5rem)
        clamp(1.5rem,4vw,4rem)
        clamp(3rem,4.5vw,4.5rem);
    background:#fff;
    border-radius:clamp(1.35rem,1.8vw,1.7rem);
}

.news-index__intro {
    max-width:820px;
    margin-bottom:clamp(2.5rem,4vw,4rem);
}

.news-index__intro h1,
.news-article__header h1,
.news-article--missing h1 {
    margin:0 0 1.2rem;
    font-size:clamp(1.8rem,2.1vw,2.4rem);
    line-height:.98;
    letter-spacing:-.008em;
    text-wrap:wrap;
}

.news-index__intro > p:last-child {
    max-width:62ch;
    margin:0;
    font-size:1.05rem;
    line-height:1.45;
}

.news-archive-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(1.2rem,2vw,1.8rem);
}

.news-archive-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    background:#f4f4f2;
    border-radius:1.25rem;
}

.news-archive-card__media {
    display:block;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#e5e5e1;
}

.news-archive-card__media img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .25s ease;
}

.news-archive-card__media:hover img {
    transform:scale(1.025);
}

.news-archive-card__body {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:clamp(1.25rem,2vw,1.75rem);
}

.news-archive-card time {
    margin-bottom:.8rem;
    color:#666a6d;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.045em;
}

.news-archive-card h2 {
    margin:0 0 .9rem;
    font-size:clamp(1.35rem,1.8vw,1.75rem);
    line-height:1.04;
    letter-spacing:-.008em;
    text-wrap:wrap;
}

.news-archive-card h2 a {
    color:inherit;
    text-decoration:none;
}

.news-archive-card h2 a:hover {
    text-decoration:none;
}

.news-archive-card p {
    margin:0 0 1.25rem;
    color:#494b47;
    font-size:.96rem;
    line-height:1.45;
}

.news-archive-card__link {
    margin-top:auto;
    color:var(--ink);
    font-weight:700;
}

.news-load-more-wrap {
    display:flex;
    justify-content:center;
    margin-top:clamp(2.5rem,4vw,4rem);
}

.news-load-more.is-loading {
    opacity:.55;
    pointer-events:none;
}

.news-empty {
    padding:2rem;
    background:#f4f4f2;
    border-radius:1rem;
}

/* Article complet */
.news-article {
    max-width:var(--container);
}

.news-article__back {
    margin:0 0 2rem;
}

.news-article__back a {
    font-weight:700;
}

.news-article__header {
    max-width:820px;
    margin-bottom:clamp(2rem,3vw,2.8rem);
}

.news-article__header time {
    display:block;
    margin-bottom:.75rem;
    color:#666a6d;
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.045em;
}

.news-article__header h1 {
    max-width:850px;
    margin-bottom:0;
}

.news-article__hero {
    display:block;
    overflow:hidden;
    margin-bottom:clamp(2rem,3vw,3rem);
    border-radius:1.35rem;
    background:#ecece8;
}

.news-article__hero img {
    width:100%;
    max-height:610px;
    object-fit:cover;
}

.news-article__summary {
    max-width:760px;
    margin-bottom:1.8rem;
}

.news-article__summary p {
    margin:0;
    font-size:clamp(1.12rem,1.35vw,1.28rem);
    font-weight:700;
    line-height:1.35;
}

.news-article__body {
    max-width:760px;
}

.news-article__body p,
.news-article__body li {
    font-size:1rem;
    line-height:1.58;
}

.news-article__body p {
    margin-bottom:1.25rem;
}

.news-article__body h2 {
    margin:2.6rem 0 1rem;
    font-size:clamp(1.45rem,2vw,1.9rem);
    line-height:1.05;
}

.news-article__body h3 {
    margin:2rem 0 .8rem;
    font-size:1.25rem;
}

.news-article__body blockquote {
    margin:2rem 0;
    padding:1.25rem 1.4rem;
    border-left:4px solid var(--orange);
    background:#f4f4f2;
    font-size:1.08rem;
    font-weight:600;
}

.news-article__body a {
    color:var(--ink);
    font-weight:700;
}



.news-video {
    width:100%;
    max-width:820px;
    margin:clamp(1.75rem,3vw,2.75rem) 0;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#000;
    border-radius:1.1rem;
}

.news-video iframe {
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.news-gallery {
    margin-top:clamp(3rem,5vw,5rem);
    padding-top:clamp(2rem,3vw,3rem);
    border-top:1px solid #d8d9d7;
}

.news-gallery h2 {
    margin:0 0 1.2rem;
    font-size:1.2rem;
    line-height:1.1;
}

.news-gallery__grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.8rem;
}

.news-gallery__item {
    display:block;
    overflow:hidden;
    aspect-ratio:4/3;
    border-radius:.8rem;
    background:#ecece8;
}

.news-gallery__item img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .2s ease;
}

.news-gallery__item:hover img {
    transform:scale(1.03);
}

.news-article__footer {
    margin-top:clamp(3rem,5vw,5rem);
}

/* Lightbox native <dialog> */
.news-lightbox {
    width:100vw;
    max-width:none;
    height:100vh;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    background:rgba(0,0,0,.92);
    color:#fff;
}

.news-lightbox::backdrop {
    background:rgba(0,0,0,.92);
}

.news-lightbox__inner {
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    padding:clamp(3rem,7vw,5rem);
}

.news-lightbox figure {
    width:min(1200px,100%);
    max-height:100%;
    margin:0;
    display:grid;
    gap:.75rem;
    place-items:center;
}

.news-lightbox figure img {
    max-width:100%;
    max-height:calc(100vh - 9rem);
    object-fit:contain;
}

.news-lightbox figcaption {
    color:#fff;
    font-size:.9rem;
    text-align:center;
}

.news-lightbox__close,
.news-lightbox__nav {
    position:absolute;
    z-index:2;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    color:#fff;
    background:rgba(0,0,0,.45);
    cursor:pointer;
    font-family:Arial,Helvetica,sans-serif;
}

.news-lightbox__close {
    top:1rem;
    right:1rem;
    font-size:2rem;
    line-height:1;
}

.news-lightbox__nav {
    top:50%;
    transform:translateY(-50%);
    font-size:2.2rem;
    line-height:1;
}

.news-lightbox__nav--prev {
    left:1rem;
}

.news-lightbox__nav--next {
    right:1rem;
}

.news-lightbox__nav[hidden] {
    display:none;
}

@media (max-width:760px) {
    .news-index,
    .news-article {
        width:min(calc(100% - 1.2rem),1120px);
        padding:2.5rem 1.35rem 3rem;
        border-radius:1.25rem;
    }

    .news-archive-grid {
        grid-template-columns:1fr;
    }

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

    .news-lightbox__inner {
        padding:4rem .8rem 4.5rem;
    }

    /* Mobile : navigation visible au milieu de l'image, pas collée en bas
       derrière les barres Safari / navigateur. */
    .news-lightbox__nav {
        top:50%;
        bottom:auto;
        transform:translateY(-50%);
    }

    .news-lightbox__nav--prev {
        left:.75rem;
    }

    .news-lightbox__nav--next {
        right:.75rem;
    }
}


/* Press */
.press-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
.press-card { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.press-card img { aspect-ratio:3/2; width:100%; object-fit:cover; }
.press-card__body { padding:1.25rem; }
.tag { display:inline-block; border-radius:999px; padding:.35rem .65rem; background:#ececea; font-size:.8rem; font-weight:700; }

/* =========================================================
   Contact — ultra simple & classe
   ========================================================= */

.contact-page,
.contact-page .content-page {
    background:transparent;
}

.contact-page .content-page {
    padding:clamp(2rem,3.5vw,3.25rem) 0 clamp(4rem,5vw,5rem);
}

.contact-shell {
    width:min(calc(100% - 2rem),1120px);
    max-width:1120px;
    margin-inline:auto;
    padding:
        clamp(3rem,4.5vw,4.5rem)
        clamp(1.5rem,4vw,4rem)
        clamp(3rem,4.5vw,4.5rem);

    color:var(--ink);
    background:#fff;
    border-radius:clamp(1.35rem,1.8vw,1.7rem);
}

.contact-intro {
    max-width:860px;
    margin-bottom:clamp(2.5rem,4vw,3.75rem);
}

.contact-intro::before {
    content:none;
    display:none;
}

.contact-intro h1 {
    max-width:850px;
    margin:0 0 1.2rem;
    font-size:clamp(1.8rem,2.1vw,2.4rem);
    line-height:.98;
    letter-spacing:-.008em;
    text-wrap:wrap;
}

.contact-intro__lead {
    max-width:62ch;
    margin:0;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.45;
}

.contact-intro__lead + p {
    margin-top:.9rem;
}


.contact-intro p:not(.contact-intro__lead) {
    max-width:850px;
    margin-bottom:0;
    font-size:1rem;
    line-height:1.45;
}

.contact-layout {
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);
    gap:clamp(1.2rem,2.5vw,2rem);
    align-items:start;
}

/* Formulaire */
.contact-form {
    padding:clamp(1.75rem,2.8vw,2.5rem);
    background:#fff;
    border:1px solid rgba(29,29,27,.10);
    border-radius:1.25rem;
}

.contact-form__header {
    margin-bottom:1.6rem;
}

.contact-form__header h2,
.contact-direct-card h2,
.contact-social h2 {
    margin:0 0 .5rem;
    color:var(--ink);
    font-size:clamp(1.25rem,1.5vw,1.5rem);
    line-height:1.08;
    letter-spacing:-.004em;
    text-wrap:wrap;
}

.contact-form__header p,
.contact-social > p:not(.contact-social__eyebrow) {
    margin:0;
    color:#5d5f5a;
    font-size:.93rem;
    line-height:1.4;
}

.contact-form__notice {
    margin-bottom:1.4rem;
    border-left-color:var(--ink);
    background:#f6f6f3;
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 1rem;
}

.form-field {
    margin-bottom:1rem;
}

.form-field--full {
    grid-column:1/-1;
}

.form-field label,
.form-field legend {
    display:block;
    margin-bottom:.38rem;
    color:var(--ink);
    font-size:.88rem;
    font-weight:700;
    line-height:1.2;
}

.required {
    color:#b10000;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width:100%;
    min-height:48px;
    padding:.76rem .88rem;
    color:#212121;

    /* Champs en gris 4 %, sans cadre visible au repos. */
    background:#f5f5f5;
    border:2px solid transparent;
    border-radius:.55rem;

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

.contact-form textarea {
    min-height:165px;
    resize:vertical;
    line-height:1.4;
}

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover {
    background:#f2f2f2;
    border-color:transparent;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    outline:none;
    background:#fff;
    border:2px solid #111;
    box-shadow:none;
}

.contact-form textarea::placeholder {
    color:#777873;
    opacity:1;
}

.checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:.7rem;
    margin:1rem 0 1.2rem;
}

.checkbox-row input {
    flex:0 0 auto;
    width:1.1rem;
    height:1.1rem;
    min-height:auto;
    margin:.17rem 0 0;
    padding:0;
    background:#fff;
    border:1.5px solid #111;
    accent-color:#111;
}

.checkbox-row label {
    color:var(--ink);
    font-size:.88rem;
    font-weight:600;
    line-height:1.32;
}

.field-error {
    margin:.35rem 0 0;
    color:#9b0000;
    font-size:.86rem;
    font-weight:700;
}

.form-status {
    padding:1rem 1.1rem;
    margin-bottom:1.2rem;
    border-radius:.65rem;
}

.form-status--error {
    color:#680000;
    background:#fff0f0;
    border:2px solid #a40000;
}

.form-status--success {
    color:var(--ink);
    background:#fff1df;
    border:2px solid var(--orange);
}

.honeypot {
    position:absolute!important;
    left:-9999px!important;
}

.contact-form__privacy {
    margin:0 0 1.2rem;
    color:#666a6d;
    line-height:1.35;
}

.contact-form__privacy small {
    font-size:.8rem;
}

.contact-submit {
    width:auto;
    min-width:190px;
    border-radius:999px;
}

.contact-submit:hover {
    background:#000;
}

/* Colonne latérale */
.contact-aside {
    display:grid;
    gap:1rem;
}

.contact-direct-card,
.contact-social {
    padding:clamp(1.5rem,2.2vw,2rem);
    background:#fff;
    border:1px solid rgba(29,29,27,.10);
    border-radius:1.25rem;
}

.contact-direct-card__mail {
    margin:.95rem 0 .8rem;
    font-size:1rem;
    font-weight:700;
}

.contact-direct-card__mail a {
    color:var(--ink);
    overflow-wrap:anywhere;
}

.contact-direct-card__address {
    margin:0;
    color:#454641;
    font-size:.92rem;
    line-height:1.45;
}

.contact-direct-card__logo {
    margin-top:1.35rem;
    padding-top:1.15rem;
    border-top:1px solid #dedfd9;
}

.contact-direct-card__logo img {
    width:min(100%,330px);
    height:auto;
}

.contact-social__eyebrow {
    margin:0 0 .45rem;
    color:#666a6d;
    font-size:.72rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.contact-social__links {
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:1.35rem;
}

.social-link {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    min-height:44px;
    padding:.68rem .88rem;
    color:#111;
    background:#fff;
    border:1.5px solid #111;
    border-radius:999px;
    text-decoration:none;
    font-size:.9rem;
    font-weight:700;
    line-height:1;
    transition:background-color .15s ease, color .15s ease;
}

.social-link svg {
    width:1rem;
    height:1rem;
    flex:0 0 auto;
    fill:currentColor;
}

a.social-link:hover,
a.social-link:focus-visible {
    color:#fff;
    background:#111;
}

.social-link--inactive {
    opacity:.45;
    cursor:default;
}

@media (max-width:900px) {
    .contact-shell {
        width:min(calc(100% - 1.2rem),1120px);
        padding:2.5rem 1.35rem 3rem;
        border-radius:1.25rem;
    }

    .contact-layout {
        grid-template-columns:1fr;
    }

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

@media (max-width:620px) {
    .contact-intro h1 {
        font-size:clamp(1.55rem,5.4vw,2.1rem);
        line-height:1;
    }

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

    .form-field--full {
        grid-column:auto;
    }

    .contact-aside {
        grid-template-columns:1fr;
    }

    .contact-submit {
        width:100%;
    }

    .social-link {
        flex:1 1 auto;
        justify-content:center;
    }
}


/* Video page */
.video-page { min-height:100svh; background:#0b0b0b; color:#fff; display:flex; flex-direction:column; }
.video-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; }
.video-topbar a { font-weight:700; }
.video-stage { width:min(1200px,calc(100% - 2rem)); margin:auto; padding:1rem 0 3rem; }
.video-stage video { width:100%; background:#000; max-height:75svh; }
.video-stage h1 { font-size:clamp(2rem,4vw,4rem); }

/* Footer */
.site-footer { background:#211f20; color:#fff; padding-top:3rem; }
.site-footer__top { display:flex; justify-content:center; }
.partner-logos { width:min(850px,100%); height:auto; }
.site-footer__funding { max-width:850px; text-align:center; color:#ddd; font-size:.9rem; padding-block:1.5rem; }

/* Bas de footer : copyright + liens centrés comme sur la maquette. */
.site-footer__bottom {
    border-top: 0;
    padding: 1.2rem 0 1.8rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: .35rem .65rem;

    font-size: .82rem;
    color: #d5d5d5;
    text-align: center;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__bottom p::after {
    content: "–";
    margin-left: .65rem;
}

.site-footer__bottom nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-footer__bottom ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: .35rem .65rem;

    margin: 0;
    padding: 0;
}

.site-footer__bottom li {
    display: flex;
    align-items: center;
}

.site-footer__bottom li:not(:first-child)::before {
    content: "–";
    margin-right: .65rem;
}

.site-footer__bottom a {
    text-decoration: none;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
    text-decoration:none;
}

/* Ajustements du bloc Découvrir */
@media (max-width: 820px) {
    .discover-card {
        gap:2.25rem;
        padding:clamp(2.5rem,8vw,4.25rem) clamp(1.5rem,6vw,3rem);
        background-size:90% auto;
    }

    .discover-card .newsletter__brand {
        display:block;
        margin:0 0 1.35rem;
        transform:none;
        text-align:left;
    }
}

@media (max-width: 620px) {
    .discover-card {
        padding:2.25rem 1.35rem 2.5rem;
        gap:1.75rem;
        background-size:125% auto;
    }

    .discover-card__actions {
        align-items:stretch;
    }

    .discover-card__actions .button {
        width:100%;
    }
}


/* Responsive Actualités accueil */
/* Responsive Agenda */
@media (max-width: 1050px) {
    .agenda-panel {
        max-width:100%;
        min-height:auto;
        padding:3.25rem 2.25rem 4rem;
    }

    .agenda-grid {
        grid-template-columns:1fr;
        gap:1rem;
    }

    .agenda-card {
        min-height:0;
        grid-template-columns:112px minmax(0,1fr);
        padding:1.35rem;
    }

    .agenda-card p {
        max-width:46ch;
    }
}

@media (max-width: 620px) {
    .agenda-panel {
        padding:2.4rem 1.2rem 3rem;
        border-radius:1.25rem;
        background-position:center center;
    }

    .agenda-title {
        margin-bottom:1.8rem;
    }

    .agenda-title::before {
        width:40px;
        height:46px;
    }

    .agenda-title h2 {
        font-size:clamp(2.8rem,13vw,3.6rem);
    }

    .agenda-title::after {
        width:140px;
        height:19px;
    }

    .agenda-card {
        grid-template-columns:1fr;
        grid-template-areas:
            "date"
            "title"
            "text";
        row-gap:.7rem;
        padding:1.3rem;
    }

    .agenda-card__date {
        font-size:1.1rem;
    }

    .agenda-card p {
        max-width:none;
    }
}

@media (max-width: 1050px) {
    section[aria-labelledby="actualites-title"] .news-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    section[aria-labelledby="actualites-title"] .news-card {
        min-height:315px;
    }

    #actualites-title {
        max-width:700px;
    }
}

@media (max-width: 620px) {
    #actualites-title {
        font-size:clamp(2.6rem,11vw,3.7rem);
    }

    #actualites-title::before {
        width:40px;
        height:42px;
    }

    #actualites-title::after {
        width:225px;
        max-width:82vw;
        height:26px;

        -webkit-mask-image:url('../images/slash15.svg');
        mask-image:url('../images/slash15.svg');
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        -webkit-mask-position:left center;
        mask-position:left center;
        -webkit-mask-size:contain;
        mask-size:contain;
    }

    section[aria-labelledby="actualites-title"] .news-grid {
        grid-template-columns:1fr;
    }

    section[aria-labelledby="actualites-title"] .news-card {
        min-height:260px;
    }

    section[aria-labelledby="actualites-title"] .news-card h3 {
        font-size:clamp(1.55rem,8vw,2rem);
    }
}

@media (max-width: 1050px) {
    .news-grid { grid-template-columns:repeat(2,1fr); }
    .press-grid { grid-template-columns:1fr 1fr; }
    .site-nav ul { gap:1rem; }
}

@media (max-width: 820px) {
    html { scroll-padding-top: 90px; }
    .site-header__inner { min-height:90px; }
    .nav-toggle { display:inline-flex; }
    .js .site-nav { display:none; position:absolute; top:100%; left:1rem; right:1rem; background:#fff; color:var(--ink); padding:1rem; border-radius:.8rem; box-shadow:var(--shadow); }
    .js .site-nav.is-open { display:block; }
    .site-nav ul { flex-direction:column; align-items:stretch; gap:0; }
    .site-nav a { display:block; padding:.9rem .65rem; }
    .nav-download { margin-top:.5rem; text-align:center; }
    .site-header--dark .site-logo img { width:180px; }
    .discover-card, .download-steps { grid-template-columns:1fr; }
    .agenda-grid { grid-template-columns:1fr; }
    .home-hero__timeline { width:78%; }
}

@media (max-width: 620px) {
    .container,
    .container-wide {
        width:min(calc(100% - 1.2rem), var(--container));
    }

    /* =====================================================
       Mobile — Header + Hero
       ===================================================== */

    /*
     * 100svh évite que la hauteur du hero saute lorsque les barres
     * de Safari apparaissent/disparaissent.
     */
    .home-hero {
        min-height:100vh;
        min-height:100svh;
        place-items:center;
    }

    /* Header plus compact, sans sacrifier la zone tactile du menu. */
    .site-header__inner {
        min-height:86px;
        gap:1rem;
    }

    .site-header--dark .site-logo img {
        width:172px;
    }

    .nav-toggle {
        min-width:48px;
        min-height:48px;
        padding:.5rem;
        justify-content:center;
    }

    .nav-toggle__icon {
        width:30px;
        gap:6px;
    }

    /*
     * Le contenu central est resserré pour libérer la zone basse :
     * frise chronologique + contrôle vidéo.
     */
    .home-hero__content {
        width:min(calc(100% - 1.5rem), 560px);
        padding-top:5.2rem;
        padding-bottom:6.6rem;
    }

    /*
     * Objectif iPhone : les deux phrases du titre restent sur deux lignes
     * (« Comprendre la forêt » / « Apprendre à la gérer »).
     */
    .home-hero h1 {
        margin-bottom:1.15rem;
        font-size:clamp(2.05rem,8.5vw,2.3rem);
        line-height:.98;
        letter-spacing:-.015em;
        text-wrap:balance;
    }

    .home-hero__subtitle {
        max-width:22rem;
        margin-bottom:1.35rem;
        font-size:clamp(1rem,4.5vw,1.16rem);
        line-height:1.12;
    }

    .home-hero__content .button {
        min-height:46px;
        padding:.72rem 1rem;
        font-size:clamp(.9rem,4vw,1rem);
    }

    /*
     * La frise est réellement ancrée au bord inférieur du hero,
     * comme sur la maquette.
     */
    .home-hero__timeline {
        left:0;
        bottom:0;
        width:100%;
    }

    .home-hero__timeline img {
        width:100%;
        height:auto;
    }

    /*
     * Le bouton pause ne remonte plus au niveau du CTA principal.
     * Il est ancré en bas à droite, au-dessus de la frise.
     */
    .hero-video-toggle {
        right:.65rem;
        bottom:3.25rem;
        min-height:44px;
        padding:.58rem .8rem;
        font-size:.75rem;
        line-height:1.1;
        background:rgba(0,0,0,.82);
    }

    /* Le SVG play reste noir et net sur Safari, sans rendu emoji. */
    .play-link {
        gap:.55rem;
    }

    .play-link::before {
        width:1.05rem;
        height:1.05rem;
    }

    .news-grid, .news-list, .press-grid { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .form-field--full { grid-column:auto; }
    .site-footer__bottom {
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }
    .site-footer__bottom p::after {
        content:"";
        margin:0;
    }
    .site-footer__bottom ul {
        justify-content:center;
    }
}


/* Responsive page Outil */
@media (max-width: 900px) {
    .tool-story {
        min-height:0;
    }

    .tool-story__grid {
        grid-template-columns:1fr;
        min-height:0;
        gap:3rem;
    }

    .tool-story__content,
    .tool-story__grid {
        padding:clamp(2.25rem,7vw,3.5rem);
    }

    .tool-story__subtitle {
        margin-bottom:2.5rem;
    }

}

@media (max-width: 620px) {
    
    .tool-story-list {
        gap:2.2rem;
    }

    .tool-story {
        border-radius:1.25rem;
    }

    .tool-story__content,
    .tool-story__grid {
        padding:2rem 1.35rem 2.3rem;
    }

    .tool-story__grid {
        gap:2.6rem;
    }

    .tool-story__kicker {
        font-size:2.3rem;
    }

    .tool-story__subtitle {
        margin-bottom:2rem;
        font-size:1rem;
    }

    .tool-story__title {
        font-size:clamp(1.55rem,7vw,2rem);
    }

    .tool-story__title::after {
        width:190px;
        max-width:72vw;
        height:23px;
    }

    .tool-story p,
    .tool-story li {
        font-size:1rem;
        line-height:1.38;
    }

    .credits-panel {
        margin-top:3rem;
        padding:2.25rem 1.35rem 2.5rem;
        border-radius:1.25rem;
    }

    .credits-panel__intro h2 {
        font-size:clamp(2rem,8.5vw,2.7rem);
    }

    .credits-group summary {
        padding-right:3rem;
        font-size:1.08rem;
    }

    .credits-group__content {
        padding-right:0;
    }

    .credits-names {
        font-size:.95rem;
    }

    .credits-panel__thanks {
        padding:1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media print {
    .site-header, .site-footer, .skip-link, .hero-video-toggle, .nav-toggle { display:none!important; }
    body { color:#000; background:#fff; }
    a { color:#000; text-decoration:underline; }
}


/* =========================================================
   Pack graphique Umberto — intégration 25/09/2026
   ========================================================= */
.internal-main--pattern {
    background:transparent;
}
.tool-page {
    background: transparent;
}
.page-hero--pattern {
    background:transparent;
}

@media (max-width: 820px) {
}
@media (max-width: 620px) {
}

/* =========================================================
   V27 — correction du 1er bloc "LE PROJET"
   pour coller à la maquette Umberto
   ========================================================= */
.tool-page > .container {
    max-width: 1380px;
}

.tool-story--single .tool-story__content {
    display: block;
    max-width: none;
    padding: clamp(3.3rem, 4.8vw, 4.75rem);
}

.tool-story--single .tool-story__kicker {
    margin: 0;
    font-size: clamp(3.8rem, 5.8vw, 5.6rem);
    line-height: .9;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.tool-story--single .tool-story__subtitle {
    margin: .15rem 0 clamp(2.8rem, 3.6vw, 3.4rem);
    font-size: clamp(1.2rem, 1.7vw, 1.7rem);
    line-height: 1.05;
    font-weight: 700;
}

.tool-story--single .tool-story__title {
    max-width: 980px;
    margin: 0 0 1.45rem;
    font-size: clamp(2.95rem, 4.35vw, 4.7rem);
    line-height: .95;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.tool-story--single .tool-story__title::after {
    width: min(420px, 52%);
    height: 28px;
    margin-top: 1rem;
}

.tool-story--single p {
    max-width: 1080px;
    margin: 0 0 1.2rem;
    font-size: clamp(1.02rem, 1.22vw, 1.28rem);
    line-height: 1.32;
}

.tool-story--single p strong {
    display: block;
    max-width: 1100px;
    font-size: clamp(1.28rem, 1.6vw, 1.75rem);
    line-height: 1.08;
}

/* Le 1er bloc de la maquette reste en lecture mono-colonne même sur desktop. */
.tool-story--single .tool-story__content > * {
    grid-column: auto !important;
}

@media (max-width: 960px) {
    .tool-page > .container {
        max-width: 1120px;
    }

    .tool-story--single .tool-story__content {
        padding: 2.35rem 2rem 2.5rem;
    }

    .tool-story--single .tool-story__kicker {
        font-size: clamp(2.7rem, 10vw, 4rem);
    }

    .tool-story--single .tool-story__subtitle {
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-bottom: 2rem;
    }

    .tool-story--single .tool-story__title {
        max-width: none;
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .tool-story--single .tool-story__title::after {
        width: min(280px, 65%);
        height: 22px;
    }

    .tool-story--single p,
    .tool-story--single p strong {
        max-width: none;
    }
}

/* =========================================================
   V28 — affinage du 1er bloc "LE PROJET" pour se rapprocher
   davantage de la maquette (plus large, titres moins massifs,
   retours à la ligne plus proches).
   ========================================================= */
.tool-page > .container {
    max-width: 1480px;
}

.tool-story-list {
    gap: clamp(1.75rem, 2.6vw, 2.5rem);
}

.tool-story--single .tool-story__content {
    display: block;
    max-width: none;
    padding: clamp(3.1rem, 4.2vw, 4rem) clamp(4rem, 6vw, 5.4rem) clamp(3.5rem, 4.6vw, 4.6rem);
}

.tool-story--single .tool-story__kicker {
    margin: 0;
    font-size: clamp(4.2rem, 5.2vw, 5.15rem);
    line-height: .9;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.tool-story--single .tool-story__subtitle {
    margin: .15rem 0 clamp(2.2rem, 3vw, 2.85rem);
    font-size: clamp(1.15rem, 1.45vw, 1.5rem);
    line-height: 1.05;
    font-weight: 700;
}

.tool-story--single .tool-story__title {
    max-width: 1280px;
    margin: 0 0 1.15rem;
    font-size: clamp(2.6rem, 4vw, 4.3rem);
    line-height: .94;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.tool-story--single .tool-story__title::after {
    width: min(420px, 42%);
    height: 24px;
    margin-top: .9rem;
}

.tool-story--single p {
    max-width: 1220px;
    margin: 0 0 1.15rem;
    font-size: clamp(1.05rem, 1.18vw, 1.34rem);
    line-height: 1.31;
}

.tool-story--single p strong {
    display: block;
    max-width: 1220px;
    font-size: clamp(1.42rem, 1.62vw, 1.78rem);
    line-height: 1.08;
}

@media (max-width: 960px) {
    .tool-page > .container {
        max-width: 1120px;
    }

    .tool-story--single .tool-story__content {
        padding: 2.2rem 1.75rem 2.4rem;
    }

    .tool-story--single .tool-story__kicker {
        font-size: clamp(2.75rem, 10vw, 4rem);
    }

    .tool-story--single .tool-story__subtitle {
        margin-bottom: 1.7rem;
        font-size: clamp(1rem, 4vw, 1.15rem);
    }

    .tool-story--single .tool-story__title {
        max-width: none;
        font-size: clamp(1.95rem, 7.7vw, 3rem);
        line-height: .96;
    }

    .tool-story--single .tool-story__title::after {
        width: min(280px, 68%);
        height: 20px;
    }

    .tool-story--single p,
    .tool-story--single p strong {
        max-width: none;
    }
}

/* =========================================================
   V29 — calage fin du 1er bloc "LE PROJET"
   basé sur la maquette Umberto
   ========================================================= */
@media (min-width: 961px) {
    .tool-page > .container {
        max-width: 1420px;
    }

    .tool-story--single {
        min-height: 760px;
        background-position: center bottom;
    }

    .tool-story--single .tool-story__content {
        padding: 3.65rem 5.1rem 4.15rem;
    }

    .tool-story--single .tool-story__kicker {
        font-size: clamp(3.9rem, 4.75vw, 4.75rem);
        line-height: .88;
        letter-spacing: -.028em;
    }

    .tool-story--single .tool-story__subtitle {
        margin: .1rem 0 2.7rem;
        font-size: clamp(1.12rem, 1.34vw, 1.38rem);
        line-height: 1.04;
    }

    .tool-story--single .tool-story__title {
        max-width: 1160px;
        margin-bottom: 1.05rem;
        font-size: clamp(2.65rem, 3.72vw, 3.95rem);
        line-height: .94;
        letter-spacing: -.018em;
    }

    .tool-story--single .tool-story__title::after {
        width: 390px;
        max-width: 48%;
        height: 22px;
        margin-top: .85rem;
    }

    .tool-story--single p {
        max-width: 1160px;
        margin-bottom: 1.05rem;
        font-size: clamp(1rem, 1.08vw, 1.16rem);
        line-height: 1.3;
    }

    .tool-story--single p strong {
        max-width: 1110px;
        font-size: clamp(1.22rem, 1.4vw, 1.5rem);
        line-height: 1.08;
    }
}


/* =========================================================
   V30 — affinage typographique du premier bloc
   ========================================================= */
.tool-story--single .tool-story__subtitle {
    margin-bottom: clamp(3rem, 4vw, 4rem);
}

.tool-story--single .tool-story__title {
    max-width: 1180px;
    font-size: clamp(2.25rem, 3.45vw, 3.75rem);
    line-height: .96;
    letter-spacing: -.018em;
}

@media (max-width: 960px) {
    .tool-story--single .tool-story__subtitle {
        margin-bottom: 2.25rem;
    }

    .tool-story--single .tool-story__title {
        font-size: clamp(1.85rem, 7vw, 2.75rem);
    }
}


/* =========================================================
   V31 — le titre du 1er bloc est encore trop massif.
   Cible : 2 lignes comme sur la maquette Umberto.
   ========================================================= */
.tool-story--single .tool-story__title {
    max-width: 1320px;
    font-size: clamp(2rem, 2.75vw, 3rem);
    line-height: .98;
    letter-spacing: -.012em;
}

.tool-story--single .tool-story__subtitle {
    margin-bottom: clamp(3.2rem, 4.3vw, 4.2rem);
}

@media (max-width: 960px) {
    .tool-story--single .tool-story__title {
        font-size: clamp(1.7rem, 6.3vw, 2.45rem);
        line-height: 1;
    }

    .tool-story--single .tool-story__subtitle {
        margin-bottom: 2.3rem;
    }
}


/* =========================================================
   V32 — calage final du titre du premier bloc
   Objectif maquette : retour après « transformer »
   ========================================================= */
.tool-story--single .tool-story__title {
    max-width: 1320px;
    font-size: clamp(1.9rem, 2.35vw, 2.65rem);
    line-height: .98;
    letter-spacing: -.01em;
}

@media (max-width: 960px) {
    .tool-story--single .tool-story__title {
        font-size: clamp(1.65rem, 5.8vw, 2.25rem);
        line-height: 1;
    }
}


/* =========================================================
   V33 — titre du premier bloc : taille + retour de ligne naturel
   ========================================================= */

/*
 * Le problème ne venait pas seulement de la taille :
 * text-wrap: balance forçait Safari/Chrome à équilibrer les deux lignes,
 * donc à couper trop tôt. On revient à un retour de ligne naturel.
 */
.tool-story--single .tool-story__title {
    max-width: 1220px;
    font-size: clamp(1.8rem, 2.1vw, 2.4rem);
    line-height: .98;
    letter-spacing: -.008em;
    text-wrap: wrap;
}

@media (max-width: 960px) {
    .tool-story--single .tool-story__title {
        max-width: none;
        font-size: clamp(1.55rem, 5.4vw, 2.1rem);
        line-height: 1;
        text-wrap: wrap;
    }
}


/* =========================================================
   V34 — crédits + hiérarchie commune des grands titres
   ========================================================= */

/*
 * Taille de référence commune pour les grands titres éditoriaux :
 * - "Un projet initié dès 2016..."
 * - "Celles et ceux qui ont fait Silva Numerica"
 * - "Et toutes celles et ceux que cette page ne nomme pas encore"
 */
.tool-story--single .tool-story__title,
.credits-panel__intro h2,
.credits-panel__thanks h3 {
    font-size: clamp(1.8rem, 2.1vw, 2.4rem);
    line-height: .98;
    letter-spacing: -.008em;
}

/* Le bloc Crédits devient un aplat blanc pur, sans trame parasite. */
.credits-panel {
    background: #fff;
}

/* On conserve le titre des crédits sur une largeur confortable. */
.credits-panel__intro h2 {
    max-width: 1220px;
    margin-bottom: 1.6rem;
    text-wrap: wrap;
}

/*
 * Le bloc final garde son contraste sombre,
 * mais son titre reprend exactement l'échelle typographique ci-dessus.
 */
.credits-panel__thanks h3 {
    max-width: 1100px;
    margin-bottom: 1.35rem;
    text-wrap: wrap;
}

/* Un peu plus d'air avant les accordéons de crédits. */
.credits-groups {
    margin-top: clamp(3rem, 4.5vw, 4.5rem);
}

@media (max-width: 960px) {
    .tool-story--single .tool-story__title,
    .credits-panel__intro h2,
    .credits-panel__thanks h3 {
        font-size: clamp(1.55rem, 5.4vw, 2.1rem);
        line-height: 1;
    }
}


/* =========================================================
   Page Télécharger — V3 : densité du bloc lancement/config
   ========================================================= */

/* Moins d'espace après "Pas besoin d'installation supplémentaire." */
.download-section__important {
    margin-bottom:0;
}

.download-section + .download-section {
    margin-top:clamp(2.5rem,3.2vw,3.2rem);
}

/* Titre "Configuration minimale" : même corps que le texte, simplement gras. */
.download-section--config h2 {
    font-size:1rem;
    line-height:1.2;
    margin-bottom:.85rem;
    font-weight:700;
}

/* Numéros de la procédure en gras sans grossir le reste du texte. */
.download-section ol {
    list-style:none;
    counter-reset:launch-step;
    padding-left:0;
}

.download-section ol li {
    counter-increment:launch-step;
    position:relative;
    padding-left:2rem;
}

.download-section ol li::before {
    content:counter(launch-step) ".";
    position:absolute;
    left:0;
    top:0;
    width:1.35rem;
    font-weight:700;
}

/* Tableau plus compact. */
.download-panel .specs {
    border-top:0;
}

.download-panel .specs li {
    grid-template-columns:28px 128px minmax(0,1fr);
    gap:.7rem;
    min-height:0;
    padding:.52rem 0;
}

/* Pas de trait au-dessus de la première ligne ni sous la dernière. */
.download-panel .specs li:first-child {
    border-top:0;
}

.download-panel .specs li:last-child {
    border-bottom:0;
}

/* Les pictos et intitulés ne sont plus en gras. */
.download-panel .specs img {
    width:24px;
    height:24px;
    font-weight:400;
}

.download-panel .specs strong {
    font-weight:400;
    font-size:.96rem;
    line-height:1.15;
}

.download-panel .specs span {
    font-size:.96rem;
    line-height:1.2;
}

.download-config__note {
    margin-top:.7rem;
}

/* Mobile : même hiérarchie, encore un peu plus compacte. */
@media (max-width:700px) {
    .download-section + .download-section {
        margin-top:2.25rem;
    }

    .download-panel .specs li {
        padding:.6rem 0;
    }

    .download-panel .specs img {
        width:22px;
        height:22px;
    }
}


/* =========================================================
   Page Documentation — Guide Silva Numerica V2
   ========================================================= */

.documentation-page,
.documentation-page .page-hero,
.documentation-page .page-hero--pattern {
    background:transparent;
}

.documentation-page .page-hero {
    padding:clamp(2rem,3.5vw,3.25rem) 0 clamp(4rem,5vw,5rem);
}

.documentation-panel {
    width:min(calc(100% - 2rem),var(--container));
    max-width:var(--container);
    margin-inline:auto;

    padding:
        clamp(3rem,4.8vw,4.25rem)
        clamp(2.1rem,5.5vw,5rem)
        clamp(3.25rem,5vw,4.5rem);

    color:var(--ink);

    /* Pavé intérieur uniforme : aucune trame dans le bloc. */
    background:#fff;
    background-image:none;

    border-radius:clamp(1.35rem,1.8vw,1.7rem);
    box-shadow:none;
}

.documentation-panel h1 {
    max-width:650px;
    margin:0 0 clamp(2.5rem,4vw,3.5rem);

    font-size:clamp(1.8rem,2.1vw,2.4rem);
    line-height:.98;
    letter-spacing:-.008em;
    text-wrap:wrap;
}

.documentation-guide {
    display:grid;
    grid-template-columns:minmax(250px,.88fr) minmax(0,1.12fr);
    gap:clamp(2rem,4vw,4rem);
    align-items:center;
}

.documentation-guide__visual {
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.documentation-guide__visual img {
    display:block;
    width:min(100%,360px);
    height:auto;
    margin-inline:auto;
}

.documentation-guide__content {
    min-width:0;
}

.documentation-guide__content h2 {
    margin:0 0 1.25rem;

    font-size:clamp(1.35rem,1.7vw,1.7rem);
    line-height:1.05;
    letter-spacing:-.005em;
    text-wrap:wrap;
}

.documentation-guide__content p {
    max-width:52ch;
    margin:0 0 1rem;
    font-size:1rem;
    line-height:1.4;
}

.documentation-guide__content p:first-of-type {
    font-weight:700;
}

.documentation-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.65rem;
}

.documentation-actions .button img {
    width:1.25rem;
    height:1.25rem;
    object-fit:contain;
    flex:0 0 auto;
}

@media (max-width:760px) {
    .documentation-panel {
        width:min(calc(100% - 1.2rem),var(--container));
        padding:2.5rem 1.35rem 3rem;
        border-radius:1.25rem;
    }

    .documentation-panel h1 {
        max-width:none;
        font-size:clamp(1.55rem,5.4vw,2.1rem);
        line-height:1;
    }

    .documentation-guide {
        grid-template-columns:1fr;
        gap:2rem;
    }

    .documentation-guide__visual img {
        width:min(78vw,330px);
    }

    .documentation-guide__content h2 {
        font-size:1.35rem;
    }

    .documentation-actions {
        align-items:stretch;
    }

    .documentation-actions .button {
        width:100%;
    }
}


/* =========================================================
   Frise chronologique — pages internes (hors accueil)
   ========================================================= */
.internal-chronology {
    background:#fff;
    overflow:hidden;
    line-height:0;
}

.internal-chronology .container-wide {
    width:100%;
    max-width:none;
    min-height:62px;
    margin:0;
    padding:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}

.internal-chronology img {
    width:min(700px,58vw);
    max-width:none;
    height:auto;
    margin:0;
    opacity:.28;
    filter:grayscale(1);
    pointer-events:none;
    user-select:none;
}

@media (max-width: 820px) {
    .internal-chronology .container-wide {
        min-height:54px;
    }

    .internal-chronology img {
        width:min(790px,92vw);
    }
}

@media (max-width: 620px) {
    .internal-chronology .container-wide {
        min-height:42px;
    }

    .internal-chronology img {
        width:92vw;
    }
}


/* =========================================================
   Harmonisation des largeurs — pages intérieures
   ========================================================= */

/* Même largeur de référence que les autres grands pavés du site. */
.press-stack {
    max-width:100% !important;
}


/* =========================================================
   Pages éditoriales — pavé blanc sur trame grise
   Actualités, articles, Presse, Contact, Mentions légales
   ========================================================= */

.news-page,
.contact-page {
    background:transparent;
}

.news-page .content-page,
.contact-page .content-page {
    background:transparent;
}

.press-stack,
.legal-stack {
    max-width:100% !important;
}


/* États de validation / confirmation — même traitement orange que la charte. */
.notice--success,
.alert--success,
.auth-status--success,
.account-status--success {
    color:var(--ink);
    background:#fff1df;
    border:2px solid var(--orange);
}


@media (max-width:430px) {
    .download-panel .specs li {
        grid-template-columns:24px 96px minmax(0,1fr);
        gap:.45rem;
    }

    .download-panel .specs strong,
    .download-panel .specs span {
        font-size:.9rem;
    }
}