/* GCA Après Sinistre : composants de l'accueil, réutilisés sur les pages internes
   (hero, tri, onglets de services, réflexes, étapes, dossier, publics, zone et carte,
   actualités, FAQ, CTA final, repères, engagements). Chargé après app.css, n'utilise que ses jetons. */

/* ---------------------------------------------------------------------------
   HERO ACCUEIL
   --------------------------------------------------------------------------- */
.hero {
    --focus: var(--focus-on-dark);
    position: relative; isolation: isolate;
    overflow: hidden;
    background: var(--navy-deep);
    color: var(--white);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Une colonne : la photo n'habille que le haut du hero (texte et boutons), cadrée sur la cathédrale,
   puis se fond dans le bleu nuit derrière le panneau de tri. Étirée sur toute la hauteur (1 100 à
   1 700 px), elle était agrandie près de trois fois et Strasbourg n'y était plus reconnaissable. */
@media (max-width: 1023.98px) {
    .hero__bg { bottom: auto; height: min(100%, 40rem); mask-image: linear-gradient(180deg, #000 65%, transparent); }
    .hero__bg img { object-position: 46% 70%; }
}
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(6 23 41 / 0.9) 0%, rgb(6 23 41 / 0.8) 45%, rgb(6 23 41 / 0.94) 100%);
}
@media (min-width: 1024px) {
    .hero::before {
        background:
            linear-gradient(90deg, rgb(6 23 41 / 0.95) 0%, rgb(6 23 41 / 0.82) 38%, rgb(6 23 41 / 0.42) 68%, rgb(6 23 41 / 0.25) 100%),
            linear-gradient(0deg, rgb(6 23 41 / 0.92) 0%, rgb(6 23 41 / 0) 30%);
    }
}

.hero__inner {
    display: grid; gap: var(--space-8);
    padding-block: var(--space-10) var(--space-8);
    align-items: center;
}
@media (min-width: 1024px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 26.5rem);
        gap: var(--space-12);
        padding-block: var(--space-16) var(--space-12);
    }
}
@media (min-width: 1200px) { .hero__inner { gap: var(--space-20); } }

/* Le bloc de texte est un conteneur : la promesse tient toujours sur trois lignes, une par verbe. */
.hero__content { container-type: inline-size; }
.hero h1 { margin: 0 0 var(--space-6); font-size: var(--step-5); }
.hero__kw {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-family: var(--font-body); font-stretch: 100%;
    font-size: var(--step--1); font-weight: 700; line-height: 1.4;
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--blue-light);
}
.hero__kw::before { content: ""; flex: none; width: var(--space-6); height: 2px; background: currentColor; }
/* Une ligne par verbe à toutes les largeurs (à 320 / 390 px, « on trouve / la cause » coupait la promesse) */
.hero__claim { display: block; font-size: min(0.9em, 10.4cqi); }
.hero__claim > span { display: block; }
.hero__lead {
    max-width: 54ch; margin: 0 0 var(--space-8);
    font-size: var(--step-1); line-height: var(--lh-lead);
    color: rgb(255 255 255 / 0.82);
}
@media (max-width: 559.98px) {
    .hero__kw::before { display: none; }
    .hero__actions .btn { flex: 1 1 100%; }
}
/* Rangées de boutons des pages d'erreur : chaque ligne repliée occupe toute la largeur. */
@media (max-width: 559.98px) { .btn-row--fill .btn { flex: 1 1 auto; } }

/* Faits courts sous le hero : une ligne par fait sur mobile, 2 x 2 sur tablette, 4 colonnes ensuite. */
.hero__facts {
    list-style: none;
    display: grid; grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--line-dark);
}
.hero__facts li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-4);
}
.hero__facts .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--blue-light); }
.hero__facts strong {
    display: block;
    font-family: var(--font-display); font-stretch: 105%;
    font-size: var(--step-0); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.005em;
}
.hero__facts li span:not(.nowrap) { display: block; font-size: var(--step--1); line-height: 1.45; color: rgb(255 255 255 / 0.72); }
@media (max-width: 639.98px) {
    .hero__facts li { padding-block: var(--space-3); }
    .hero__facts li + li { border-top: 1px solid var(--line-dark); }
}
@media (min-width: 640px) and (max-width: 1199.98px) {
    .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__facts li:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--line-dark); }
    .hero__facts li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}
@media (min-width: 1200px) {
    .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero__facts li { padding: var(--space-6) var(--space-4) var(--space-8) 0; }
    .hero__facts li + li { padding-left: var(--space-6); border-left: 1px solid var(--line-dark); }
}

/* ---------------------------------------------------------------------------
   PANNEAU DE TRI « Que s'est-il passé ? » : vrai groupe de boutons radio,
   la mise en page des tuiles suit la largeur du panneau (requêtes de conteneur).
   --------------------------------------------------------------------------- */
.triage {
    --focus: var(--blue);
    container: triage / inline-size;
    padding: var(--space-6);
    border-radius: var(--r-l);
    background: var(--white); color: var(--text);
    box-shadow: var(--shadow-float);
}
@media (max-width: 379.98px) { .triage { padding: var(--space-4); } }
.triage__title {
    margin: 0 0 var(--space-1);
    font-family: var(--font-display); font-stretch: 108%;
    font-size: var(--step-3); font-weight: 700; line-height: 1.15; letter-spacing: var(--tracking-heading);
    color: var(--navy);
}
.triage__sub { margin: 0 0 var(--space-5); font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.triage__group { min-width: 0; margin: 0 0 var(--space-5); padding: 0; border: 0; }
.triage legend { margin: 0 0 var(--space-2); padding: 0; font-size: var(--step--1); font-weight: 700; line-height: 1.4; color: var(--navy); }
.triage__choices, .triage__urgency { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.triage__choice { position: relative; display: grid; }
.triage__choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.triage__choice label {
    position: relative;
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 48px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--white);
    font-size: var(--step--1); font-weight: 600; line-height: 1.25; color: var(--navy);
    white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.triage__choice label .icon { width: 1.25rem; height: 1.25rem; color: var(--blue); }
.triage__urgency label { justify-content: center; text-align: center; }
.triage__choice input:hover + label { border-color: var(--line-strong); }
.triage__choice input:checked + label { border-color: var(--blue); background: var(--sky); box-shadow: inset 0 0 0 1px var(--blue); }
.triage__choice--urgent input:checked + label { border-color: var(--navy); background: color-mix(in srgb, var(--signal) 22%, var(--white)); box-shadow: inset 0 0 0 1px var(--navy); }
/* Pastille cochée : l'état choisi ne repose pas que sur la couleur. */
.triage__choice input:checked + label::after {
    content: ""; position: absolute; top: -7px; right: -7px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
    box-shadow: 0 0 0 2px var(--white);
}
.triage__choice--urgent input:checked + label::after { background-color: var(--navy); }
.triage__choice input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
@container triage (min-width: 34rem) {
    .triage__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Panneau étroit : icône au-dessus du libellé pour que chaque libellé tienne sur une ligne. */
@container triage (min-width: 17rem) and (max-width: 22.49rem) {
    .triage__choices label { flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); }
}
@container triage (max-width: 16.99rem) {
    .triage__choices, .triage__urgency { grid-template-columns: minmax(0, 1fr); }
}
.triage .btn--block { margin-top: var(--space-1); }
.triage__alt {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3);
    margin: var(--space-4) 0 0; padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--step--1); color: var(--muted);
}
.triage__alt a { font-weight: 700; white-space: nowrap; }
/* Mobile : le numéro reste une cible de 44 px sans agrandir le pied du panneau */
@media (max-width: 767.98px) {
    .triage__alt { row-gap: var(--space-4); }
    .triage__alt a { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-3)); }
}

/* ---------------------------------------------------------------------------
   SERVICES : onglets à gauche et panneau à droite sur grand écran ;
   sous 1040 px, le panneau actif s'insère sous son onglet (sous-grille).
   --------------------------------------------------------------------------- */
.svc-tabs { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-tabs__list { display: grid; border-top: 1px solid var(--line); }
.svc-tab {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
    width: 100%; min-height: 76px;
    padding: var(--space-4) var(--space-1);
    border: 0; border-bottom: 1px solid var(--line);
    background: none;
    text-align: left; color: var(--navy);
    transition: color var(--dur) var(--ease);
}
.svc-tab:focus-visible { outline-offset: -2px; }
.svc-tab__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: var(--r-s);
    background: var(--sky); color: var(--blue);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-tab__icon .icon { width: 22px; height: 22px; }
.svc-tab__text { display: grid; gap: 2px; }
.svc-tab__name {
    font-family: var(--font-display); font-stretch: 106%;
    font-size: var(--step-2); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.012em;
    transition: color var(--dur) var(--ease);
}
.svc-tab__teaser { font-size: var(--step--1); line-height: 1.4; color: var(--muted); }
.svc-tab__arrow { width: 20px; height: 20px; color: var(--muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.svc-tab:hover .svc-tab__name, .svc-tab:hover .svc-tab__arrow { color: var(--blue); }
.svc-tab[aria-selected="true"] .svc-tab__name, .svc-tab[aria-selected="true"] .svc-tab__arrow { color: var(--blue); }
.svc-tab[aria-selected="true"] .svc-tab__icon { background: var(--blue); color: var(--white); }

.svc-panel {
    --focus: var(--focus-on-dark);
    position: relative; overflow: hidden;
    display: grid;
    border-radius: var(--r-l);
    background: var(--navy); color: var(--white);
}
.svc-panel[hidden] { display: none; }
.svc-panel__media { position: relative; aspect-ratio: 16 / 9; background: var(--navy-soft); }
.svc-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-panel__body { position: relative; display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-6) var(--space-5); }
.svc-panel__body > * { margin: 0; }
.svc-panel__tag {
    font-size: var(--step--2); font-weight: 700; line-height: var(--eyebrow-h);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--blue-light);
}
.svc-panel__body h3 { font-size: var(--step-3); line-height: 1.15; }
.svc-panel__text { max-width: 54ch; color: rgb(255 255 255 / 0.84); }
.svc-panel .tags { margin-top: var(--space-1); }
.svc-panel .btn { margin-top: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
    .svc-tabs.is-ready .svc-panel:not([hidden]) { animation: svc-in var(--dur-slow) var(--ease); }
}
@keyframes svc-in { from { opacity: 0; } }

@media (max-width: 1023.98px) {
    /* Grille de 12 rangées : onglets sur les rangées impaires, panneaux sur les paires. */
    .svc-tabs.is-ready { grid-template-rows: repeat(12, auto); }
    .svc-tabs.is-ready .svc-tabs__list { grid-row: 1 / -1; grid-column: 1; grid-template-rows: subgrid; }
    .svc-tabs.is-ready .svc-tab:nth-child(1) { grid-row: 1; }
    .svc-tabs.is-ready .svc-tab:nth-child(2) { grid-row: 3; }
    .svc-tabs.is-ready .svc-tab:nth-child(3) { grid-row: 5; }
    .svc-tabs.is-ready .svc-tab:nth-child(4) { grid-row: 7; }
    .svc-tabs.is-ready .svc-tab:nth-child(5) { grid-row: 9; }
    .svc-tabs.is-ready .svc-tab:nth-child(6) { grid-row: 11; }
    .svc-tabs.is-ready .svc-panel { grid-column: 1; margin-block: var(--space-2) var(--space-4); }
    .svc-tabs.is-ready .svc-panel:nth-child(2) { grid-row: 2; }
    .svc-tabs.is-ready .svc-panel:nth-child(3) { grid-row: 4; }
    .svc-tabs.is-ready .svc-panel:nth-child(4) { grid-row: 6; }
    .svc-tabs.is-ready .svc-panel:nth-child(5) { grid-row: 8; }
    .svc-tabs.is-ready .svc-panel:nth-child(6) { grid-row: 10; }
    .svc-tabs.is-ready .svc-panel:nth-child(7) { grid-row: 12; }
    /* L'onglet ouvert pointe vers son panneau ; le nom n'est pas répété dans le panneau. */
    .svc-tab[aria-selected="true"] .svc-tab__arrow { transform: rotate(90deg); }
    .svc-tabs.is-ready .svc-panel__tag,
    .svc-tabs.is-ready .svc-panel__body h3 {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .svc-tabs:not(.is-ready) { gap: var(--space-4); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    .svc-tabs.is-ready .svc-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .svc-tabs.is-ready .svc-panel__media { aspect-ratio: auto; min-height: 100%; }
    .svc-tabs.is-ready .svc-panel__media img { position: absolute; inset: 0; }
    .svc-tabs.is-ready .svc-panel__body { padding: var(--space-6); align-content: center; }
}
@media (max-width: 379.98px) { .svc-tab { gap: var(--space-3); } .svc-tab__icon { width: 40px; height: 40px; } }

@media (min-width: 1024px) {
    .svc-tabs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: stretch; }
    .svc-tabs__list { grid-column: 1; grid-row: 1; grid-auto-rows: 1fr; }
    .svc-tab { padding-inline: var(--space-2); }
    .svc-tab[aria-selected="true"] .svc-tab__arrow { transform: translateX(4px); }
    .svc-panel { grid-column: 2; grid-row: 1; min-height: 32rem; }
    .svc-panel__media { position: absolute; inset: 0; aspect-ratio: auto; }
    .svc-panel__media::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgb(6 23 41 / 0.02) 18%, rgb(6 23 41 / 0.86) 64%, rgb(6 23 41 / 0.96) 100%);
    }
    .svc-panel__body { align-self: end; padding: var(--space-10); }
    /* Sans JavaScript : les cinq panneaux les uns sous les autres. */
    .svc-tabs:not(.is-ready) { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .svc-tabs:not(.is-ready) .svc-panel { grid-column: auto; grid-row: auto; min-height: 26rem; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .svc-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .svc-tab__name { font-size: var(--step-1); }
}
@media (min-width: 1200px) { .svc-tabs { gap: var(--space-16); } }
/* Sans JavaScript : tous les panneaux visibles, la liste d'onglets est masquée. */
.svc-tabs:not(.is-ready) .svc-tabs__list { display: none; }
.svc-tabs:not(.is-ready) .svc-panel[hidden] { display: grid; }

/* ---------------------------------------------------------------------------
   RÉFLEXES (séquence réelle, fond nuit)
   --------------------------------------------------------------------------- */
.reflexes { display: grid; gap: var(--space-10); }
@media (min-width: 1024px) {
    .reflexes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}
.reflexes__intro h2 { max-width: var(--measure-title); margin-bottom: var(--space-5); }
.reflexes__intro .lead { max-width: 46ch; margin-bottom: var(--space-8); }
.reflexes__intro .btn-row { gap: var(--space-4) var(--space-6); }
.reflexes__list { list-style: none; counter-reset: rf; display: grid; }
.reflexes__list li {
    counter-increment: rf;
    display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid var(--line-dark);
}
.reflexes__list li:last-child { border-bottom: 1px solid var(--line-dark); }
.reflexes .reflexes__list li:first-child { padding-top: 0; border-top: 0; }
.reflexes .reflexes__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.reflexes__list li::before {
    content: counter(rf);
    display: grid; place-items: center;
    width: 2.5rem; height: 2.25rem;
    clip-path: var(--hex);
    background: var(--signal); color: var(--navy);
    font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.reflexes__list h3 { margin: var(--space-1) 0 var(--space-2); font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.008em; }
.reflexes__list p { margin: 0; color: rgb(255 255 255 / 0.76); }

/* ---------------------------------------------------------------------------
   ÉTAPES (accueil, méthode, pages villes) : chaque étape partage les rangées
   de la grille parente (subgrid) ; un titre sur deux lignes n'en décale aucune autre.
   --------------------------------------------------------------------------- */
.journey { list-style: none; counter-reset: jr; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-6); row-gap: 0; }
@media (min-width: 760px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.journey__step {
    counter-increment: jr;
    position: relative;
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
    align-content: start;
}
.journey--detail .journey__step { grid-row: span 6; }
/* Espace entre deux rangées d'étapes (1 colonne : toutes sauf la dernière ; 2 colonnes : les deux premières). */
.journey__step:not(:last-child) { margin-bottom: var(--space-10); }
@media (min-width: 760px) {
    .journey__step:not(:last-child) { margin-bottom: 0; }
    .journey__step:nth-child(-n+2):nth-last-child(n+3) { margin-bottom: var(--space-10); }
}
@media (min-width: 1100px) { .journey__step:nth-child(-n+2):nth-last-child(n+3) { margin-bottom: 0; } }
.journey__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--space-5); border-radius: var(--r-m); background: var(--sky); }
.journey__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.journey__num {
    position: absolute; left: var(--space-3); top: var(--space-3);
    display: grid; place-items: center;
    width: 2.5rem; height: 2.25rem; clip-path: var(--hex);
    background: var(--white); color: var(--blue);
    font-family: var(--font-display); font-weight: 800;
}
.journey__num::before { content: counter(jr); }
.journey__num--inline { position: static; width: 3rem; height: 2.65rem; margin-bottom: var(--space-5); background: var(--blue); color: var(--white); font-size: 1.125rem; }
.journey__rail { position: relative; overflow: hidden; height: 3px; margin-bottom: var(--space-5); border-radius: 3px; background: var(--line); }
.journey__rail::after { content: ""; position: absolute; inset: 0; width: 25%; border-radius: inherit; background: var(--blue); }
.journey__rail--2::after { width: 50%; }
.journey__rail--3::after { width: 75%; }
.journey__rail--4::after { width: 100%; }
.journey__title { margin: 0 0 var(--space-2); font-size: var(--step-2); }
.journey__text { margin: 0 0 var(--space-4); color: var(--muted); }
.journey__list { margin: 0 0 var(--space-5); font-size: var(--step--1); gap: var(--space-2); }
.journey__link { align-self: end; justify-self: start; }
/* Accueil : toute la carte d'étape mène au service ; la photo réagit au survol. */
.journey:not(.journey--detail) .journey__link::after { content: ""; position: absolute; inset: 0; }
.journey:not(.journey--detail) .journey__step:hover .journey__media img { transform: scale(1.03); }
.journey:not(.journey--detail) .journey__step:hover .journey__title { color: var(--blue); }
@media (max-width: 559.98px) {
    /* Mobile : vignette à gauche, texte à droite ; l'ordre est porté par le numéro. */
    .journey:not(.journey--detail) .journey__step { grid-row: auto; grid-template-rows: none; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
    .journey:not(.journey--detail) .journey__step:not(:last-child) { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
    .journey:not(.journey--detail) .journey__media { grid-row: 1 / span 3; aspect-ratio: 1; margin: 0; }
    .journey:not(.journey--detail) .journey__num { left: var(--space-2); top: var(--space-2); width: 2rem; height: 1.8rem; font-size: 0.875rem; }
    .journey:not(.journey--detail) .journey__rail { display: none; }
    .journey:not(.journey--detail) .journey__title { font-size: var(--step-1); }
    .journey:not(.journey--detail) .journey__text { margin-bottom: var(--space-3); font-size: var(--step--1); }
    /* Lien sur deux lignes : la flèche suit le texte au lieu de partir au bord droit. */
    .journey:not(.journey--detail) .journey__link { display: inline; }
    .journey:not(.journey--detail) .journey__link .icon { display: inline-block; margin-left: var(--space-1); vertical-align: -0.2em; }
}
@media (max-width: 359.98px) {
    .journey:not(.journey--detail) .journey__step { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-3); }
}
.journey--detail .journey__step { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); }
@media (min-width: 760px) { .journey--detail { row-gap: 0; } }
.journey--detail .journey__step:not(:last-child) { margin-bottom: var(--space-6); }
@media (min-width: 760px) {
    .journey--detail .journey__step:not(:last-child) { margin-bottom: 0; }
    .journey--detail .journey__step:nth-child(-n+2):nth-last-child(n+3) { margin-bottom: var(--space-6); }
}
@media (min-width: 1100px) { .journey--detail .journey__step:nth-child(-n+2):nth-last-child(n+3) { margin-bottom: 0; } }

/* Étapes génériques (méthode d'un service, fond nuit) */
.steps { list-style: none; counter-reset: st; display: grid; border-top: 1px solid var(--line); }
.steps li { counter-increment: st; padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.steps li::before {
    content: "Étape " counter(st);
    display: block; margin-bottom: var(--space-2);
    font-size: var(--step--2); font-weight: 700; line-height: var(--eyebrow-h);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--blue);
}
.steps h3 { margin: 0 0 var(--space-2); font-size: var(--step-1); line-height: 1.3; }
.steps p { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); border-top: 0; }
    .steps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding-block: var(--space-5) 0; border-top: 2px solid var(--blue); border-bottom: 0; }
}
.section--navy .steps li::before { color: var(--blue-light); }
.section--navy .steps, .section--navy .steps li { border-color: var(--line-dark); }
@media (min-width: 900px) { .section--navy .steps li { border-top-color: var(--blue-light); } }
.section--navy .steps p { color: rgb(255 255 255 / 0.76); }

/* ---------------------------------------------------------------------------
   DOSSIER ASSURANCE (illustration : exemple de rapport)
   --------------------------------------------------------------------------- */
.dossier { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) { .dossier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }
@media (min-width: 1200px) { .dossier { gap: var(--space-20); } }
.dossier__text h2 { max-width: var(--measure-title); margin-bottom: var(--space-5); }
.dossier__text .lead { max-width: var(--measure-lead); }
.dossier__points { list-style: none; display: grid; margin-top: var(--space-8); border-top: 1px solid var(--line); }
.dossier__points li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.dossier__points .icon-wrap { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-s); background: var(--sky); color: var(--blue); }
.dossier__points .icon { width: 22px; height: 22px; }
.dossier__points h3 { margin: var(--space-1) 0 var(--space-1); font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.008em; }
.dossier__points p { margin: 0; color: var(--muted); }
.section--mist .dossier__points .icon-wrap { background: var(--white); }
.dossier__more { margin: var(--space-6) 0 0; }

/* Rapport type : reproduction fidèle de la mise en page des rapports GCA (tailles propres au document) */
.report-wrap { position: relative; justify-self: center; width: 100%; max-width: 34rem; margin: 0; }
.report-wrap::before {
    content: ""; position: absolute; inset: 12px -12px 44px 12px;
    border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--white);
    transform: rotate(2deg);
}
.report {
    position: relative;
    padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) clamp(1rem, 0.7rem + 1.2vw, 1.875rem) var(--space-4);
    border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--white);
    box-shadow: var(--shadow-float);
    font-size: 0.8rem; line-height: 1.45; color: #1d2a36;
}
.report__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-bottom: 0.6rem; border-bottom: 2px solid #1f4e79; }
.report__head img { width: 86px; flex: none; }
.report__ref { margin: 0; display: grid; text-align: right; }
.report__ref strong { color: #1f4e79; font-size: 0.72rem; letter-spacing: 0.02em; }
.report__ref span { color: var(--muted); font-size: 0.68rem; }
.report__title { display: grid; gap: 0.1rem; margin: 0.9rem 0 0.8rem; text-align: center; font-weight: 800; font-size: 1.15rem; line-height: 1.25; color: #1f4e79; }
.report__title span { font-weight: 500; font-size: 0.74rem; color: var(--muted); }
.report__id { width: 100%; border-collapse: collapse; border: 1px solid #1f4e79; font-size: 0.74rem; }
.report__id th, .report__id td { padding: 0.32rem 0.55rem; border-bottom: 1px solid #d5e0ea; text-align: left; vertical-align: top; }
.report__id tr:last-child th, .report__id tr:last-child td { border-bottom: 0; }
.report__id th { width: 28%; background: #eef4fa; color: #1f4e79; font-weight: 700; border-right: 1px solid #d5e0ea; }
.report__h { margin: 0.95rem 0 0.25rem; font-weight: 800; font-size: 0.86rem; color: #1f4e79; }
.report__sub { margin: 0.5rem 0 0.3rem; font-weight: 700; font-size: 0.76rem; color: #1f4e79; }
.report__text { margin: 0; font-size: 0.76rem; }
.report__plan svg { width: 100%; height: auto; border-radius: var(--r-xs); background: #fbfcfe; }
.report__caption { margin: 0.3rem 0 0; text-align: center; font-style: italic; font-size: 0.68rem; color: var(--muted); }
.report__alert { display: grid; gap: 0.15rem; margin-top: 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid #e9c46a; border-radius: 3px; background: #fff7dc; font-size: 0.74rem; }
.report__alert strong { color: #7a5a00; }
.report__list { display: grid; gap: 0.15rem; margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.76rem; }
.report__foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: 0.9rem; padding-top: 0.45rem; border-top: 2px solid var(--signal); font-size: 0.64rem; color: var(--muted); }
.report__note { margin-top: var(--space-5); text-align: center; font-size: var(--step--1); color: var(--muted); }
/* La feuille inclinée déborderait de la page tant que le rapport occupe toute la largeur. */
@media (max-width: 639.98px) {
    .report-wrap::before { display: none; }
    /* Sur mobile, le haut du rapport suffit : la suite s'efface en fondu. */
    .report { max-height: 34rem; overflow: hidden; mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
}
@media (max-width: 520px) { .report__id th { width: 34%; } }

/* ---------------------------------------------------------------------------
   PUBLICS (pour qui) : trois cartes égales, rangées pleine largeur sur tablette
   --------------------------------------------------------------------------- */
.audiences { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 1200px) { .audiences { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.audience {
    position: relative;
    display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--white);
    transition: border-color var(--dur) var(--ease);
}
.audience:hover { border-color: var(--blue); }
.audience__icon {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; margin-bottom: var(--space-2);
    border-radius: var(--r-s);
    background: var(--sky); color: var(--blue);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.audience:hover .audience__icon { background: var(--blue); color: var(--white); }
.audience__icon .icon { width: 24px; height: 24px; }
.audience h3 { margin: 0; font-size: var(--step-2); }
.audience p { margin: 0; color: var(--muted); }
.audience__link { align-self: end; justify-self: start; margin-top: var(--space-2); }
.audience__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (min-width: 700px) and (max-width: 1199.98px) {
    .audience { grid-template-columns: 3rem minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--space-6); padding: var(--space-6) var(--space-8); }
    .audience__icon { grid-row: 1 / span 3; margin: 0; }
    .audience > :not(.audience__icon) { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   ZONE ET CARTE
   --------------------------------------------------------------------------- */
.zone { display: grid; gap: var(--space-10); }
@media (min-width: 1024px) {
    /* La carte occupe toute la hauteur de la colonne de texte : ni centrage, ni vide. */
    .zone { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: stretch; }
    .zone__map { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
    .zone__map .map { aspect-ratio: auto; height: 100%; min-height: 32rem; max-height: none; }
}
@media (min-width: 1200px) { .zone { gap: var(--space-16); } }
.zone__text h2 { max-width: 20ch; margin-bottom: var(--space-5); }
@media (max-width: 1023.98px) {
    /* Une colonne : surtitre, titre et chapô d'abord, puis la carte, puis les villes. */
    .zone:has(> .zone__text) { row-gap: 0; }
    .zone__text { display: contents; }
    .zone__text > * { order: 1; }
    .zone:has(> .zone__text) > .zone__map { order: 2; margin-top: var(--space-8); }
    .zone__text > .city-cols, .zone__text > .zone__more { order: 3; }
}
.zone__more { margin: var(--space-8) 0 0; }

.map {
    position: relative; z-index: 0; isolation: isolate;
    width: 100%; aspect-ratio: 4 / 3; min-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-l);
    background: var(--sky);
}
@media (max-width: 699.98px) { .map { aspect-ratio: 1; } }
.map.leaflet-container { font-family: var(--font-body); font-size: 12px; }
/* Les panneaux Leaflet montent jusqu'à z-index 1000 : confinés dans la carte (isolation), le header et la barre mobile restent au-dessus. */
.map .leaflet-attribution-flag { display: none !important; }
.map .leaflet-tile-pane { filter: grayscale(1) contrast(0.9) brightness(1.06); }
.map .leaflet-control-zoom { overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--r-s) !important; }
.map .leaflet-control-zoom a { color: var(--navy); font-weight: 700; }
.map .leaflet-control-attribution { background: rgb(255 255 255 / 0.9); color: var(--text-soft); font-size: 10px; }
.map .leaflet-control-attribution a { color: var(--text-soft); }

/* Marqueurs hexagonaux (tailles reprises dans map_controller.js) et étiquettes placées sans chevauchement */
.map-marker__hex { position: absolute; inset: 0; background: var(--blue); clip-path: var(--hex); }
.map-marker__hex::after { content: ""; position: absolute; inset: 28% 30%; background: var(--white); clip-path: var(--hex); }
.map-marker--base .map-marker__hex { background: var(--navy); }
.map-marker--base .map-marker__hex::after { background: var(--signal); }
.map-marker--minor .map-marker__hex::after, .map-marker--region .map-marker__hex::after { inset: 30% 32%; }
/* Petite commune collée à une ville étiquetée à cette échelle (map_controller.js) */
.map-marker.is-muted { visibility: hidden; }
.map-marker__label {
    position: absolute; visibility: hidden;
    padding: 1px 6px; border-radius: var(--r-xs);
    background: rgb(255 255 255 / 0.94);
    box-shadow: 0 0 0 1px rgb(10 36 64 / 0.12);
    font: 700 12px / 1.4 var(--font-body); color: var(--navy);
    white-space: nowrap; pointer-events: none;
}
.map-marker--base .map-marker__label { background: var(--navy); color: var(--white); box-shadow: none; }
.map-marker__label.is-right { visibility: visible; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); }
.map-marker__label.is-left { visibility: visible; right: calc(100% + 5px); top: 50%; transform: translateY(-50%); }
.map-marker__label.is-top { visibility: visible; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.map-marker__label.is-bottom { visibility: visible; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
.map-marker__label.is-tr { visibility: visible; left: calc(100% + 1px); bottom: calc(100% + 1px); }
.map-marker__label.is-tl { visibility: visible; right: calc(100% + 1px); bottom: calc(100% + 1px); }
.map-marker__label.is-br { visibility: visible; left: calc(100% + 1px); top: calc(100% + 1px); }
.map-marker__label.is-bl { visibility: visible; right: calc(100% + 1px); top: calc(100% + 1px); }

/* Légende : 4 entrées sur une ligne quand la place le permet (~ 640 px), sinon 2 x 2, puis 1 colonne. */
.map__key { container: map-key / inline-size; margin-top: var(--space-4); }
.map__legend {
    list-style: none;
    display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-6);
    font-size: var(--step--1); font-weight: 600; line-height: 1.4; color: var(--navy);
}
@container map-key (min-width: 40rem) { .map__legend { display: flex; flex-wrap: wrap; } }
@container map-key (max-width: 20.99rem) { .map__legend { grid-template-columns: minmax(0, 1fr); } }
.map__legend li { display: flex; align-items: center; gap: var(--space-2); }
.map__legend i { display: inline-block; flex: none; width: 14px; height: 12px; clip-path: var(--hex); background: var(--blue); }
.map__legend i.is-base { width: 16px; height: 14px; background: var(--signal); box-shadow: inset 0 0 0 4px var(--navy); }
.map__legend i.is-dept { width: 16px; height: 10px; clip-path: none; border: 2px solid var(--blue); border-radius: 2px; background: rgb(0 88 171 / 0.15); }
.map__legend i.is-region { width: 16px; height: 10px; clip-path: none; border: 1.5px dashed var(--navy); border-radius: 2px; background: rgb(0 88 171 / 0.04); }

/* Carte statique sans JavaScript (noscript) */
.map noscript svg { width: 100%; height: 100%; }
.map .map-shape { fill: rgb(0 88 171 / 0.12); stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.map .map-dept { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.map .map-dept-label { font: 800 40px var(--font-display); fill: rgb(0 88 171 / 0.18); }
.map .map-city { fill: var(--blue); stroke: var(--white); stroke-width: 1.5; }
.map .map-city--main { fill: var(--navy); }
.map .map-label { font: 700 11px var(--font-body); fill: var(--navy); }

/* Villes par département : Bas-Rhin à gauche, Haut-Rhin puis Grand Est à droite */
.city-cols { display: grid; gap: var(--space-6) var(--space-8); margin-top: var(--space-8); }
@media (min-width: 560px) {
    .city-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .city-cols > :first-child:nth-last-child(3) { grid-row: span 2; }
}
.city-cols h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-body); font-stretch: 100%;
    font-size: var(--step--2); font-weight: 700; line-height: var(--eyebrow-h);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--muted);
}
.city-list { list-style: none; display: grid; border-top: 1px solid var(--line); }
.city-list li { display: flex; align-items: center; min-height: calc(44px + 1px); border-bottom: 1px solid var(--line); color: var(--muted); }
/* Le lien remplit la ligne (cible tactile de 44 px, filet en plus) sans la rendre plus haute qu'une ligne sans lien. */
.city-list a {
    flex: 1; align-self: stretch;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    font-weight: 600; color: var(--navy); text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
.city-list a::after {
    content: ""; flex: none; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230058ab' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur) var(--ease);
}
.city-list a:hover { color: var(--blue); }
.city-list a:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   FAQ (accordéon <details>, ouverture animée quand le navigateur le permet)
   --------------------------------------------------------------------------- */
.faq-split { display: grid; gap: var(--space-10); }
@media (min-width: 1024px) {
    .faq-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}
.faq-split__intro h2 { max-width: 18ch; margin-bottom: var(--space-5); }
.faq-split__contact {
    display: grid; gap: var(--space-2); justify-items: start;
    margin-top: var(--space-8); padding: var(--space-6);
    border-radius: var(--r-m);
    background: var(--mist);
}
.section--mist .faq-split__contact { background: var(--white); }
.faq-split__contact strong { font-family: var(--font-display); font-stretch: 105%; font-size: var(--step-1); line-height: 1.3; color: var(--navy); }
.faq-split__contact p { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--muted); }

.faq { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 64px; padding-block: var(--space-4);
    list-style: none; cursor: pointer;
    font-family: var(--font-display); font-stretch: 104%;
    font-size: var(--step-1); font-weight: 700; line-height: 1.35; letter-spacing: -0.008em;
    color: var(--navy);
    transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__q { flex: 1; min-width: 0; text-wrap: pretty; }
.faq summary::after {
    content: ""; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2440' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform var(--dur-slow) var(--ease), background-color var(--dur) var(--ease);
}
.faq summary:hover { color: var(--blue); }
.faq summary:hover::after { background-color: var(--sky); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--sky); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq__body { padding: 0 var(--space-12) var(--space-6) 0; color: var(--text-soft); }
.faq__body p { max-width: var(--measure); }
.section--mist .faq summary::after { background-color: var(--white); }
@media (max-width: 559.98px) { .faq__body { padding-right: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .faq details::details-content {
        block-size: 0; overflow-y: clip;
        transition: block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
}

/* ---------------------------------------------------------------------------
   ACTUALITÉS : article à la une + deux vignettes (accueil), grilles (actualités)
   --------------------------------------------------------------------------- */
.news { display: grid; gap: var(--space-6); }
.news__side { display: grid; gap: var(--space-6); }
.post { position: relative; display: grid; gap: var(--space-4); align-content: start; }
.post__media { overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-m); background: var(--sky); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post:hover .post__media img { transform: scale(1.03); }
.post__body { display: grid; gap: var(--space-2); align-content: start; }
.post__body > * { margin: 0; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.post__meta .tag { color: var(--blue); }
.post h3 { margin: 0; font-size: var(--step-2); }
.post h3 a { color: var(--navy); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post:hover h3 a { color: var(--blue); }
.post__excerpt { color: var(--muted); }
.post--row h3 { font-size: var(--step-1); line-height: 1.3; }
.post--row .post__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639.98px) {
    .post--row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
    .post--row .post__media { aspect-ratio: 1; }
    .post--row .post__excerpt { display: none; }
}
@media (min-width: 640px) {
    .post--row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-5); align-items: center; }
    .post--row .post__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
    /* Les deux colonnes ont la même hauteur : la photo à la une et les vignettes s'étirent. */
    .news--home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: stretch; }
    .post--lead { grid-template-rows: minmax(20rem, 1fr) auto; }
    .post--lead .post__media, .news--home .post--row .post__media { position: relative; aspect-ratio: auto; height: 100%; }
    .post--lead .post__media img, .news--home .post--row .post__media img { position: absolute; inset: 0; }
    .post--lead h3 { font-size: var(--step-3); line-height: 1.15; }
    .news--home .news__side { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .news--home .post--row { grid-template-rows: minmax(10rem, 1fr); align-items: stretch; align-content: stretch; }
    .news--home .post--row .post__body { align-content: center; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .news--home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   CTA FINAL (bas de chaque page)
   --------------------------------------------------------------------------- */
.cta-final { padding-block: var(--sp-xl); }
/* Après une section blanche, la carte suit sans double marge. */
.section:not([class*="section--"]) + .cta-final { padding-top: 0; }
.cta-final__inner {
    --focus: var(--focus-on-dark);
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: var(--space-8);
    padding: var(--space-8) var(--space-5);
    border-radius: var(--r-l);
    background: var(--navy); color: var(--white);
}
.cta-final__inner::before {
    content: ""; position: absolute; z-index: -1; inset: 0 0 0 auto; width: 44%;
    background: linear-gradient(135deg, var(--navy-soft), var(--blue) 160%);
}
@media (max-width: 1023.98px) { .cta-final__inner::before { display: none; } }
@media (min-width: 600px) { .cta-final__inner { padding: var(--space-12) var(--space-10); } }
@media (min-width: 1024px) {
    .cta-final__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); padding: var(--space-12); }
    .cta-final__inner::before { width: 50%; }
}
/* Colonnes 7 / 5 dès que la colonne étroite loge l'adresse e-mail sur une ligne. */
@media (min-width: 1320px) {
    .cta-final__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); padding: var(--space-16); }
    .cta-final__inner::before { width: 44%; }
}
/* Titre calé sur la largeur de sa colonne (conteneur) : une question de 24 signes tient sur une ligne,
   « Un sinistre en cours ? / Parlons-en maintenant. » se coupe entre les deux phrases, jamais avant un mot seul. */
.cta-final .stack { container-type: inline-size; }
.cta-final h2 { max-width: 24ch; margin: 0; font-size: min(var(--step-4), 8.4cqi); }
.cta-final .lead { max-width: 48ch; margin: var(--space-4) 0 0; color: rgb(255 255 255 / 0.8); }
.cta-final__ways { display: grid; gap: var(--space-3); align-content: center; }
.cta-way {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); align-items: center;
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--r-m);
    background: rgb(255 255 255 / 0.06);
    color: var(--white); text-decoration: none;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cta-way:hover { border-color: rgb(255 255 255 / 0.36); background: rgb(255 255 255 / 0.1); color: var(--white); }
.cta-way__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-s); background: rgb(255 255 255 / 0.1); color: var(--blue-light); }
.cta-way--urgent .cta-way__icon { background: var(--signal); color: var(--navy); }
.cta-way__icon .icon { width: 22px; height: 22px; }
.cta-way__text > strong { display: block; font-family: var(--font-display); font-stretch: 105%; font-size: var(--step-1); line-height: 1.3; overflow-wrap: anywhere; }
.cta-way__text > span { display: block; font-size: var(--step--1); line-height: 1.45; color: rgb(255 255 255 / 0.72); }
@media (max-width: 559.98px) {
    .cta-way { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); }
    .cta-way__icon { width: 2.5rem; height: 2.5rem; }
    .cta-way__icon .icon { width: 20px; height: 20px; }
    .cta-way__text > strong { font-size: var(--step-0); }
}

/* ---------------------------------------------------------------------------
   REPÈRES (uniquement des faits vérifiables) ET ENGAGEMENTS
   --------------------------------------------------------------------------- */
.facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts li { padding: var(--space-6) var(--space-4) var(--space-6) 0; border-bottom: 1px solid var(--line); }
.facts li:nth-child(even) { padding-left: var(--space-6); border-left: 1px solid var(--line); }
@media (min-width: 900px) {
    .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .facts li { border-bottom: 0; }
    .facts li + li { padding-left: var(--space-6); border-left: 1px solid var(--line); }
}
.facts strong { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; color: var(--blue); }
.facts span { display: block; font-weight: 700; color: var(--navy); }
.facts small { display: block; margin-top: var(--space-1); font-size: var(--step--1); color: var(--muted); }
.section--navy .facts, .section--navy .facts li { border-color: var(--line-dark); }
.section--navy .facts strong { color: var(--signal); }
.section--navy .facts span { color: var(--white); }
.section--navy .facts small { color: rgb(255 255 255 / 0.72); }

.pledges { list-style: none; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--line); }
@media (min-width: 700px) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pledges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pledges li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-8) var(--space-6); background: var(--white); }
.pledges .icon-wrap { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); border-radius: var(--r-s); background: var(--sky); color: var(--blue); }
.pledges .icon { width: 24px; height: 24px; }
.pledges h3 { margin: 0; font-size: var(--step-1); line-height: 1.3; }
.pledges p { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--muted); }
/* Trois engagements : jamais de rangée 2 + 1 ; une rangée par engagement tant que trois colonnes ne tiennent pas. */
@media (min-width: 700px) and (max-width: 1023.98px) {
    .pledges:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
    .pledges:has(> li:nth-child(3):last-child) li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-6); }
    .pledges:has(> li:nth-child(3):last-child) .icon-wrap { grid-row: 1 / span 2; margin: 0; }
    .pledges:has(> li:nth-child(3):last-child) li > :not(.icon-wrap) { grid-column: 2; }
}