/* Site v2 : socle commun aux pages migrées (body.site-v2). Source : prototype V45 de l'accueil.
   Thème sur <html data-theme="jour|nuit">, posé dans le head avant le premier rendu. */
/* Changement de page en fondu (navigateurs qui le gèrent, sinon sans effet) */
@view-transition { navigation: auto; }

/* ─── Jetons ─── */
@property --teinte { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
:root {
    color-scheme: light;
    --m800: #13284b; --m700: #193451; --m500: #3f5870; --m400: #6484a3; --m200: #dce7f2; --m100: #e8eef5; --m50: #f4f6f9;
    --or: #fc8822; --or2: #ffb533; --or3: #ffb877; --or1: #fff1e3; --sauge: #437a56; --sauge1: #e6f1eb;
    --jakarta: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --texte: "Bricolage Grotesque", var(--jakarta);
    --titre: "Bricolage Grotesque", var(--jakarta);
    --titre-poids: 700;
    --titre-ls: -.035em;
    --gout: clamp(16px, 4vw, 56px);
    /* Hero */
    --fond: #f4f6f9; --t-titre: #13284b; --t-sub: #3f5870; --t-sur: #ffb877; --t-lien: #13284b; --arche: #f6e1cb;
    --ecran-omb: 0 0 0 1px rgba(19, 40, 75, .08), 0 30px 60px -30px rgba(19, 40, 75, .35);
    /* Sections : ouvert, plâtre, cadre (hex à 6 chiffres : le fondu les mélange en JS) */
    --s-bg: #ffffff; --s-bg2: #efe9e1; --s-bg3: #f4f6f9; --s-txt: #13284b; --s-doux: #3f5870;
    --teinte: var(--s-bg);
    /* Barre */
    --nav-bg-plein: rgba(255, 255, 255, .92); --nav-trait: rgba(19, 40, 75, .08); --nav-txt: #13284b; --nav-survol: rgba(19, 40, 75, .05);
    --pastille: rgba(255, 255, 255, .85); --pastille-omb: 0 1px 2px rgba(19, 40, 75, .08), 0 4px 12px -6px rgba(19, 40, 75, .2);
}
:root[data-theme="nuit"] {
    color-scheme: dark;
    --fond: #13284b; --t-titre: #ffffff; --t-sub: #c9d6e3; --t-sur: rgba(252, 136, 34, .75); --t-lien: #ffffff; --arche: #33405f;
    --ecran-omb: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -24px rgba(0, 0, 0, .6);
    --s-bg: #193451; --s-bg2: #0e2140; --s-bg3: #13284b; --s-txt: #ffffff; --s-doux: #c9d6e3;
    --nav-bg-plein: rgba(15, 34, 64, .92); --nav-trait: rgba(255, 255, 255, .1); --nav-txt: #ffffff; --nav-survol: rgba(255, 255, 255, .08);
    --pastille: rgba(255, 255, 255, .12); --pastille-omb: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.site-v2 {
    background: var(--teinte); color: var(--s-txt);
    font: 15px/1.55 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.site-v2 :is(h1, h2, h3, p) { margin: 0; }
.site-v2 img { max-width: 100%; }
[hidden] { display: none !important; }
.nom { font-family: var(--jakarta); font-weight: 700; letter-spacing: -.01em; }
.nom i { font-style: normal; color: var(--or); }

/* Barre de défilement fine, aux couleurs de la page */
html { scrollbar-width: thin; scrollbar-color: rgba(19, 40, 75, .28) transparent; }
html[data-theme="nuit"] { scrollbar-color: rgba(214, 226, 245, .3) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(19, 40, 75, .28); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(19, 40, 75, .5); }
html[data-theme="nuit"] ::-webkit-scrollbar-thumb { background-color: rgba(214, 226, 245, .3); }

/* ─── Bouton ─── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px;
    border: 0; border-radius: 12px; font: 700 15.5px/1 var(--texte); text-decoration: none; white-space: nowrap; cursor: pointer;
    color: #13284b; background: linear-gradient(135deg, #fc8822, #ffb533); box-shadow: inset 0 -3px 0 #c9620c; transition: transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 #c9620c; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ─── Barre : épurée pleine largeur, transparente en haut, verre au défilement ─── */
.navbar {
    position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: 80px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding: 0 max(24px, calc((100% - 1240px) / 2)); color: var(--nav-txt); background: transparent;
    transition: height .35s cubic-bezier(.2, .7, .2, 1), background .35s, box-shadow .35s, transform .55s cubic-bezier(.22, 1, .36, 1), opacity .4s;
    animation: descend .6s .1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes descend { from { translate: 0 -90px; } }
.navbar.defile {
    height: 64px; background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 -1px 0 rgba(19, 40, 75, .07), 0 10px 30px -22px rgba(19, 40, 75, .35);
    backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
}
[data-theme="nuit"] .navbar.defile { background: rgba(19, 40, 75, .55); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 10px 30px -22px rgba(0, 0, 0, .6); }
/* Elle repart vite vers le haut et redescend en ressort amorti */
.navbar.cachee {
    opacity: 0; transform: translateY(calc(-100% - 24px));
    transition: height .35s, background .35s, box-shadow .35s, transform .3s cubic-bezier(.4, 0, 1, 1), opacity .25s .05s;
}
.tete-mob { display: contents; }
.nav-gauche { justify-self: start; display: flex; align-items: center; gap: 18px; align-self: stretch; min-width: max-content; }
.nav-logo { display: flex; align-items: center; gap: 10px; align-self: stretch; color: inherit; text-decoration: none; }
.nav-logo img { display: block; width: 32px; height: 32px; }
.nav-logo .nom { display: block; font-size: 1.45rem; line-height: 1; text-transform: lowercase; translate: 0 -1px; }
/* Lien vers l'autre public, à côté du logo */
.nav-public { position: relative; padding-left: 18px; font: 500 13.5px/1 var(--texte); color: inherit; opacity: .62; text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.nav-public::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; translate: 0 -50%; background: currentColor; opacity: .25; }
.nav-public:hover { opacity: 1; }

/* Liens ; une pastille glisse sous le lien survolé et revient sur la page active */
.nav-main { justify-self: center; display: flex; align-items: center; gap: 2px; padding: 4px; }
.curseur {
    position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 999px;
    background: var(--pastille); box-shadow: var(--pastille-omb); pointer-events: none;
    transition: left .3s cubic-bezier(.3, .7, .2, 1), width .3s cubic-bezier(.3, .7, .2, 1), top .3s, height .3s, opacity .2s;
}
.nav-item {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px;
    border: 0; border-radius: 999px; background: none; font: 600 14.5px/1 var(--texte); color: inherit;
    text-decoration: none; white-space: nowrap; cursor: pointer; opacity: .72; transition: opacity .2s;
}
.nav-item:hover, .nav-item.active, .nav-dropdown.ouvert > .nav-item { opacity: 1; }
.nav-item .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; }
.nav-dropdown.ouvert .chev { rotate: 180deg; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-end .nav-item { opacity: .85; padding: 0 12px; }
.nav-end .nav-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-end .btn { height: 46px; min-width: 178px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; }
@media (max-width: 1180px) { .nav-item { padding: 0 11px; } .nav-end > .nav-item span { display: none; } }
@media (min-width: 981px) { .nav-main > .nav-item--mobile { display: none; } }
.nav-theme-menu { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nav-theme-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Grand menu « Nos solutions » : trois colonnes, encart marine à droite */
.nav-dropdown { position: static; }
.mega {
    position: absolute; top: calc(100% + 10px); left: max(24px, calc((100% - 1240px) / 2)); right: max(24px, calc((100% - 1240px) / 2));
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 280px; padding: 8px; border-radius: 22px; background: #fff; color: #13284b;
    box-shadow: 0 0 0 1px rgba(19, 40, 75, .06), 0 2px 4px rgba(19, 40, 75, .03), 0 40px 80px -36px rgba(19, 40, 75, .4);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1), visibility .2s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dropdown.ouvert .mega { opacity: 1; visibility: visible; transform: none; }
.col { display: grid; align-content: start; padding: 20px 14px 14px; }
.col + .col { box-shadow: inset 1px 0 0 rgba(19, 40, 75, .06); }
.col-titre { display: flex; align-items: center; gap: 10px; margin: 0 8px 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(19, 40, 75, .07); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8b98ab; }
.entree { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border-radius: 10px; color: #13284b; text-decoration: none; transition: background .2s; }
.entree:hover, .entree:focus-visible, .entree.active { background: #f7f9fb; }
.entree .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #8b98ab; transition: color .2s; }
.entree:hover .ic, .entree.active .ic { color: var(--or); }
.entree .ic svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.entree b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.entree small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #8b98ab; }
.encart { display: grid; align-content: start; padding: 20px 14px 16px; border-radius: 16px; color: #fff; background: #13284b; }
.encart .col-titre { color: #9fb5ca; border-color: rgba(255, 255, 255, .1); }
.encart .entree { color: #fff; }
.encart .entree .ic { color: #6f8bab; }
.encart .entree:hover .ic { color: #ffb877; }
.encart .entree:hover { background: rgba(255, 255, 255, .05); }
.encart .entree small { color: #9fb5ca; }
.encart .benevole { display: grid; gap: 6px; margin: 14px 8px 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; line-height: 1.45; color: #9fb5ca; }
.encart .benevole b { color: #fff; font-size: 14px; font-weight: 600; }
.encart .benevole a { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 13px var(--texte); color: #ffb877; text-decoration: none; }
.encart .benevole svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.encart .benevole a:hover svg { transform: translateX(3px); }
@media (min-width: 981px) {
    [data-theme="nuit"] .mega { background: #132a4d; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .65); }
    [data-theme="nuit"] .col + .col { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .07); }
    [data-theme="nuit"] .col-titre { color: #8fa3c4; border-color: rgba(255, 255, 255, .08); }
    [data-theme="nuit"] .entree { color: #fff; }
    [data-theme="nuit"] .entree:is(:hover, :focus-visible, .active) { background: rgba(255, 255, 255, .05); }
    [data-theme="nuit"] .entree .ic, [data-theme="nuit"] .entree small { color: #8fa3c4; }
    [data-theme="nuit"] .entree:hover .ic { color: #ffb877; }
    [data-theme="nuit"] .encart { background: #1d3a60; }
}
@media (max-width: 1180px) and (min-width: 981px) {
    .mega { grid-template-columns: 1fr 1fr 1fr; }
    .encart { grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; gap: 4px 12px; }
    .encart .col-titre { grid-column: 1 / -1; padding: 0 6px; }
    .encart .benevole { margin: 0; }
}

.hamburger { display: none; position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; }
.hamburger i { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, top .25s, width .25s, left .25s; }
.hamburger i:nth-child(1) { top: 17px; }
.hamburger i:nth-child(2) { top: 25px; width: 14px; left: 18px; }
.navbar.ouvert .hamburger i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.navbar.ouvert .hamburger i:nth-child(2) { top: 21px; width: 20px; left: 12px; transform: rotate(-45deg); }
:is(.nav-item, .entree, .hamburger, .nav-logo, .nav-public, .encart a):focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 10px; }

/* Mobile : menu ouvert = feuille plein écran, accordéon, boutons collés en bas */
@media (max-width: 980px) {
    .navbar { display: flex; height: 64px; padding: 0 10px 0 16px; animation: none; }
    .navbar.defile { height: 60px; }
    .navbar.cachee { transform: translateY(-100%); }
    .nav-public, .curseur { display: none; }
    .hamburger { display: block; margin-left: auto; }
    .nav-main, .nav-end { display: none; }
    /* svh : la hauteur visible barre d'adresse déployée, les boutons du bas ne passent pas sous la barre de Safari */
    .navbar.ouvert { height: 100vh; height: 100svh; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: #f7f9fb; backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); }
    [data-theme="nuit"] .navbar.ouvert { background: #0f2240; }
    .navbar.ouvert .tete-mob { display: flex; flex: none; align-items: center; height: 64px; padding: 0 10px 0 16px; }
    .navbar.ouvert .nav-main { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 2px; overflow: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }
    .nav-main > * { flex: none; }
    .navbar.ouvert .nav-end { display: grid; flex: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nav-trait); }
    .nav-end .btn { min-width: 0; width: 100%; height: 50px; }
    .nav-end .nav-item { justify-content: center; height: 50px; box-shadow: inset 0 0 0 1px var(--nav-trait); opacity: 1; }
    .nav-end .nav-item span { display: inline !important; }
    .nav-item { width: 100%; height: 52px; justify-content: space-between; padding: 0 10px; border-radius: 12px; font-size: 17px; }
    .nav-item.active { background: var(--pastille); box-shadow: var(--pastille-omb); }
    .mega { position: static; display: none; grid-template-columns: 1fr; padding: 0 0 8px; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; color: inherit; }
    .nav-dropdown.ouvert .mega { display: grid; }
    .col { padding: 8px 0 4px; }
    .col + .col { box-shadow: none; }
    .col-titre { margin-inline: 0; padding: 8px 10px 6px; border-color: var(--nav-trait); }
    .entree { color: inherit; padding: 7px 10px; }
    .entree small { display: none; }
    .entree:hover { background: var(--nav-survol); }
    /* L'encart marine devient une colonne comme les autres ; « Syndic bénévole » a son lien juste dessous */
    .encart { padding: 8px 0 4px; border-radius: 0; color: inherit; background: none; }
    .encart .col-titre { color: #8b98ab; border-color: var(--nav-trait); }
    .encart .entree { color: inherit; }
    .encart .entree .ic { color: #8b98ab; }
    .encart .entree:hover { background: var(--nav-survol); }
    .encart .benevole { display: none; }
}
body.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .navbar, .navbar.cachee { transition: opacity .2s; animation: none; }
    .navbar.cachee { transform: none; }
}

/* ─── Bouton jour / nuit : rond, en verre, en bas à droite (la pastille cookies tient le bas gauche) ─── */
.theme-flottant {
    position: fixed; z-index: 45; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
    display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer;
    color: #13284b; background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 10px 28px -14px rgba(19, 40, 75, .45);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.theme-flottant:hover { transform: translateY(-2px); }
.theme-flottant:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.theme-flottant svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Icône = thème proposé : la lune en jour, le soleil en nuit (bouton flottant et entrée du menu mobile) */
:is(.theme-flottant, .nav-theme-menu) .soleil, [data-theme="nuit"] :is(.theme-flottant, .nav-theme-menu) .lune { display: none; }
[data-theme="nuit"] :is(.theme-flottant, .nav-theme-menu) .soleil { display: block; }
[data-theme="nuit"] .theme-flottant { color: #fff; background: rgba(19, 40, 75, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 28px -14px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .theme-flottant { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
body.menu-ouvert :is(.theme-flottant, .consentement-pastille) { display: none !important; }
/* Téléphone : les deux pastilles flottantes couvraient le texte ; le thème se règle dans le menu (« Thème nuit »),
   les cookies depuis le pied de page */
@media (max-width: 760px) {
    .theme-flottant, .consentement-pastille { display: none !important; }
}

/* ─── Sections : motifs ouvert, plâtre, cadre ; un seul fond qui glisse de l'une à l'autre (fondu, js/v2.js) ─── */
.suite { color: var(--s-txt); padding: clamp(88px, 9vw, 136px) var(--gout) clamp(96px, 10vw, 150px); overflow-x: clip; }
.suite[data-motif="ouvert"] { --sec: var(--s-bg); --zone: var(--s-bg); }
.suite[data-motif="platre"] { --sec: var(--s-bg2); --zone: var(--s-bg2); }
.suite[data-motif="cadre"] { --sec: var(--s-bg3); --zone: var(--s-bg); background: var(--sec); margin: clamp(16px, 2.4vw, 32px) clamp(12px, 2.4vw, 32px); border-radius: clamp(24px, 3vw, 40px); }
.suite-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 10px; }
.suite h2 { font-family: var(--titre); font-size: clamp(26px, 2.6vw, 34px); font-weight: var(--titre-poids); letter-spacing: -.025em; line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.suite h2 b { font-weight: inherit; background: linear-gradient(transparent 60%, var(--t-sur) 60% 92%, transparent 92%); }
.suite p { font-size: 16.5px; color: var(--s-doux); max-width: 56ch; }
/* En-tête commun : titre et lien sur la même ligne, le sous-titre dessous */
.suite-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 48px; }
.suite-tete h2 { grid-column: 1; grid-row: 1; }
.suite-tete p { grid-column: 1; grid-row: 2; font-size: 17px; max-width: 80ch; }
.suite-tete > :is(.lien-suite, .suite-reglage) { grid-column: 2; grid-row: 1; }
.lien-suite {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 600 15px/1.3 var(--texte); color: var(--s-txt); white-space: nowrap;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .2s;
}
button.lien-suite { border: 0; background: none; cursor: pointer; }
.lien-suite svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.lien-suite:hover { text-decoration-color: currentColor; }
.lien-suite:hover svg { transform: translateX(3px); }
.lien-suite:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 860px) {
    .suite-tete { grid-template-columns: 1fr; }
    .suite-tete > :is(.lien-suite, .suite-reglage) { grid-column: 1; grid-row: 3; justify-self: start; }
}
@media (max-width: 560px) { .lien-suite { white-space: normal; } }
/* Téléphone : sections resserrées, texte courant à 15px (le blog garde les siens) ; .rail-mobile = rangée de cartes
   qui défile à l'horizontale, la suivante dépasse au bord (tarifs, bento, étapes de migration) */
@media (max-width: 640px) {
    .suite:where(:not(.blog-suite)) { padding-top: 64px; padding-bottom: 72px; }
    .suite:where(:not(.blog-suite)) p { font-size: 15px; }
    .suite:where(:not(.blog-suite)) .suite-tete p { font-size: 15.5px; }
    .suite .rail-mobile { display: flex; align-items: flex-start; gap: 12px; margin-inline: calc(-1 * var(--gout)); padding: 4px var(--gout) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gout); scrollbar-width: none; overscroll-behavior-x: contain; }
    .suite .rail-mobile::-webkit-scrollbar { display: none; }
    .suite .rail-mobile > * { flex: 0 0 86%; scroll-snap-align: start; }
    /* Allègement (Martin) : sections masquées, titres repliables posés par js/v2.js, FAQ limitée à 4 questions */
    .masque-mobile { display: none !important; }
    .plie-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .plie-b::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 0; border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg; opacity: .6; transition: rotate .3s cubic-bezier(.2, .7, .2, 1), margin .3s; }
    .plie-b[aria-expanded="true"]::after { rotate: -135deg; margin-top: 4px; }
    .plie-b:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
    .pm-point:has(.plie-b[aria-expanded="false"]) p { display: none; }
    .tf-inclus > p:has(> .plie-b[aria-expanded="false"]) + .st-l { display: none; }
    .sq-cache { display: none !important; }
    .sq-tout { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 12px 16px 12px 22px; border: 1.5px dashed color-mix(in srgb, var(--s-txt) 26%, transparent); border-radius: 16px; background: none; font: 600 15.5px/1.4 var(--texte); color: var(--s-txt); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .sq-tout i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fc8822; }
    .sq-tout i::after { content: ""; position: absolute; left: 13px; top: 11px; width: 7px; height: 7px; border: solid #13284b; border-width: 0 2px 2px 0; rotate: 45deg; }
    .sq-tout:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
    .sq-q.sq-revele { animation: sq-revele .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 60ms); }
    /* Pied : une ligne par rubrique, la liste se déplie sous son titre */
    .pied .pied-cols { grid-template-columns: 1fr; gap: 0; }
    .pied-c--marque { margin-bottom: 28px; }
    .pied-c:not(.pied-c--marque) { gap: 0; }
    .pied-c:not(.pied-c--marque) > .pied-t, .pied-c ul + .pied-t { margin: 0; }
    .pied-t > .plie-b { padding: 16px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
    .pied-t:has(> .plie-b[aria-expanded="false"]) + ul { display: none; }
    .pied-c:not(.pied-c--marque) ul { padding: 2px 0 18px; gap: 12px; }
}

/* Apparition des titres au défilement (CSS seul, ignoré sans scroll-driven animations) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .suite h2, .suite-tete p { animation: sec-montee linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    }
}
@keyframes sec-montee { from { opacity: 0; translate: 0 26px; filter: blur(6px); } }

/* ─── Pied « Ville de nuit » : toujours de nuit, la rue est dessinée par js/v2-platre.js ─── */
.pied { position: relative; background: linear-gradient(#193451 0, #122947 55%, #0b1a33 100%); color: #fff; font-family: var(--texte); }
.rue { position: relative; padding-top: 110px; background: linear-gradient(180deg, #f2d9bf 0%, #f1cfac 8%, #eebd93 15%, #d9a28f 22%, #a98d9f 29%, #7b82a5 35%, #4f6589 42%, #2f4a6e 50%, #203b5d 62%, #193451 100%); }
.rue::before { content: ""; position: absolute; left: 0; right: 0; top: 4%; height: 70%; pointer-events: none; background: radial-gradient(60% 40% at 50% 52%, rgba(255, 181, 51, .34), rgba(252, 136, 34, .12) 45%, rgba(252, 136, 34, 0) 72%), radial-gradient(38% 40% at 18% 70%, rgba(255, 184, 119, .16), rgba(255, 184, 119, 0) 72%); }
/* De nuit, pas de couchant : seule la lune éclaire */
[data-theme="nuit"] .rue { background: linear-gradient(180deg, #2a4566 0%, #223d60 40%, #1c3657 70%, #193451 100%); }
[data-theme="nuit"] .rue::before { background: radial-gradient(22% 30% at 22% 18%, rgba(220, 231, 242, .16), rgba(220, 231, 242, 0) 70%); }
.rue svg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 296; min-height: 170px; }
.rue .va { animation: pied-traverse var(--dur, 40s) linear infinite; animation-delay: var(--del, 0s); }
.rue .va.retour { animation-direction: reverse; }
@keyframes pied-traverse { from { transform: translateX(-180px); } to { transform: translateX(1380px); } }
.rue .pas { animation: pied-balance .55s ease-in-out infinite alternate; }
@keyframes pied-balance { to { transform: translateY(-1.6px); } }
.rue :is(.ja, .jb) { transform-box: fill-box; transform-origin: 50% 0; animation: pied-jambe .55s ease-in-out infinite alternate; }
.rue .jb { animation-delay: -.55s; }
@keyframes pied-jambe { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
.etoile { animation: scint 3.4s ease-in-out infinite; animation-delay: var(--del, 0s); }
@keyframes scint { 50% { opacity: .2; } }
/* Figée (pause, hors écran) ou mouvement réduit : la rue s'arrête là où elle est */
.rue.arret :is(.va, .pas, .ja, .jb, .etoile) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rue :is(.va, .pas, .ja, .jb, .etoile) { animation-play-state: paused; } }

.pied-cols { display: grid; grid-template-columns: 1.95fr repeat(4, minmax(0, 1fr)); gap: 44px 28px; max-width: 1180px; margin: 0 auto; padding: 68px var(--gout) 44px; }
.pied-c { display: grid; gap: 11px; align-content: start; min-width: 0; }
.pied-c--marque { gap: 14px; }
.pied-t { margin: 0 0 4px; font: 800 12px/1.3 var(--texte); letter-spacing: .09em; text-transform: uppercase; color: #fff; }
.pied-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-c ul + .pied-t { margin-top: 20px; }
.pied-c li { line-height: 1.35; }
.pied-c a { color: #9fb5ca; font-size: 14px; text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .15s; }
.pied-c a:hover { color: #fff; text-decoration: underline; }
.pied :is(a, button):focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.pied-c a.pied-logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 26px; color: #fff; text-decoration: none; }
.pied-logo img { width: 40px; height: 40px; }
.pied-c .pied-acc { margin: 0 0 6px; font-size: 16.5px; line-height: 1.5; max-width: 27ch; color: #c9d6e3; }
.pied-news { display: grid; gap: 6px; }
.pied-news .pied-t { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.pied-news p { margin: 0; font-size: 14px; line-height: 1.45; color: #9fb5ca; }
.pied-btn { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pied-c a.btn { height: 42px; padding: 0 18px; font-size: 14px; color: #13284b; text-decoration: none; }
.pied-contact { height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: 600 14px/1 var(--texte); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); cursor: pointer; transition: box-shadow .2s; }
.pied-contact:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.pied-reseaux { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pied-reseaux .pied-t { margin: 0; }
.pied-soc { display: flex; gap: 8px; }
.pied-c .pied-soc a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: box-shadow .15s; }
.pied-c .pied-soc a:hover { box-shadow: inset 0 0 0 1px var(--or); }
.pied-soc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Filet du haut aligné sur les colonnes */
.pied-legal {
    display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto;
    padding: 20px var(--gout) 26px; font-size: 13px; color: #9fb5ca;
    background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) top center / calc(100% - 2 * var(--gout)) 1px no-repeat;
}
.pied-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pied-pause { padding: 0; border: 0; background: none; color: #9fb5ca; font: 500 13px/1.3 var(--texte); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(159, 181, 202, .4); }
.pied-pause:hover { color: #fff; }
.pied-haut { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; text-decoration: none; }
.pied-haut:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied-haut svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) { .pied-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pied-c--marque { grid-column: 1 / -1; } }
@media (max-width: 860px) {
    .rue { padding-top: 64px; }
    .pied-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding: 44px var(--gout) 28px; }
    .pied-legal { flex-direction: column; align-items: flex-start; }
}

@keyframes sq-revele { from { opacity: 0; translate: 0 10px; } }

/* ─── Barre d'action mobile (footer, landing.js) ─── */
.barre-mobile, .barre-lecture { display: none !important; }
@media (max-width: 870px) {
    .barre-mobile:not([hidden]) {
        display: flex !important; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 39;
        padding: 8px; border-radius: 18px; background: var(--nav-bg-plein);
        backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 12px 32px -10px rgba(19, 40, 75, .35), inset 0 0 0 1px var(--nav-trait);
        opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none;
        transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
    }
    .barre-mobile.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    .barre-mobile .barre-mobile__cta { flex: 1; min-height: 48px; height: auto; }
}
@media (max-width: 870px) and (prefers-reduced-motion: reduce) { .barre-mobile:not([hidden]) { transition: none; } }

/* ─── Modale de contact (includes/contact_modal.php) : panneau bas sur mobile ─── */
.modal { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.modal-open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11, 26, 51, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.modal-active .modal-backdrop { opacity: 1; }
.modal-content { position: relative; width: min(460px, 100%); padding: 8px 4px 4px; border-radius: 22px; background: #fff; color: #13284b; box-shadow: 0 40px 80px -30px rgba(11, 26, 51, .55); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); }
.modal-active .modal-content { opacity: 1; transform: none; }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 18px 8px 20px; }
.modal-header h4 { margin: 0; font: 700 1.15rem/1.3 var(--texte); }
.modal-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(19, 40, 75, .06); color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.modal-body { padding: 8px 20px 20px; }
.modal-buttons { display: grid; gap: 10px; }
.btn-contact { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border: 0; border-radius: 14px; font: 600 15.5px/1 var(--texte); color: #13284b; text-decoration: none; cursor: pointer; }
.btn-contact[data-contact="calendly"] { order: -1; background: linear-gradient(135deg, #fc8822, #ffb533); box-shadow: inset 0 -3px 0 #c9620c; }
.btn-contact[data-contact="email"] { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(19, 40, 75, .2); }
:is(.modal-close, .btn-contact):focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
@media (max-width: 640px) {
    .modal.modal-open { align-items: flex-end; padding: 0; }
    .modal-content { width: 100%; border-radius: 24px 24px 0 0; padding: 10px 8px calc(12px + env(safe-area-inset-bottom)); opacity: 1; transform: translateY(100%); transition: transform .38s cubic-bezier(.32, .72, 0, 1); }
    .modal-content::before { content: ""; display: block; width: 40px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: rgba(19, 40, 75, .15); }
}
@media (prefers-reduced-motion: reduce) { .modal-backdrop, .modal-content { transition: none; } }

/* Menu téléphone : la bascule de public (« Syndic bénévole ? » à côté du logo sur grand écran) ouvre le menu, en encart */
.nav-bascule { display: none; }
@media (max-width: 980px) {
    .navbar.ouvert .nav-bascule { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; padding: 14px 16px; border-radius: 14px; background: #13284b; color: #fff; text-decoration: none; }
    [data-theme="nuit"] .navbar.ouvert .nav-bascule { background: #ffffff; color: #13284b; }
    .nav-bascule b { display: block; font: 700 16px/1.25 var(--titre); }
    .nav-bascule small { display: block; margin-top: 2px; font: 500 13.5px/1.3 var(--texte); opacity: .75; }
    .nav-bascule svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #fc8822; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}