/* La Rochelle Travail — feuille de style unique, sans framework.
   Direction : éditorial et portuaire. Papier chaud, encre marine, rouille des tours du Vieux-Port,
   titres à empattements (Fraunces), texte net (Figtree), filets fins plutôt qu'ombres et arrondis.
   Deux thèmes : clair par défaut, sombre via [data-theme="dark"] (bouton) ou préférence système. */

@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

/* ---------- Thèmes ---------- */
:root {
    --papier: #f6f1e7;
    --papier-2: #efe7d8;
    --surface: #fffdf8;
    --encre: #0f2230;
    --texte: #2a3a45;
    --discret: #5f6d74;
    --filet: #d9cfbd;
    --filet-fort: #b9ab92;
    --marine: #12384f;
    --mer: #0d5e7c;
    --mer-pale: #dcebee;
    --rouille: #b5482b;
    --rouille-fonce: #93361d;
    --rouille-pale: #f4dfd5;
    --ocre: #d9a23a;
    --ocre-pale: #f6e8c8;
    --algue: #2f7a55;
    --algue-pale: #dcecdf;
    --alerte: #a8321e;
    --alerte-pale: #f7e1dc;
    --ombre: 0 1px 0 rgba(15, 34, 48, .06);
    --titre: "Fraunces", "Iowan Old Style", Georgia, serif;
    --corps: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --r: 4px;
    --logo-fond: #12384f;
    --logo-tour: #f6f1e7;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --papier: #0c1a23;
    --papier-2: #10222d;
    --surface: #132733;
    --encre: #f1ece2;
    --texte: #cfd6d6;
    --discret: #8fa0a6;
    --filet: #24404f;
    --filet-fort: #36586a;
    --marine: #a9d3e2;
    --mer: #6cc0dc;
    --mer-pale: #17384a;
    --rouille: #ee8a66;
    --rouille-fonce: #f6a789;
    --rouille-pale: #3a2219;
    --ocre: #e6bb5f;
    --ocre-pale: #33290f;
    --algue: #74c79b;
    --algue-pale: #15342a;
    --alerte: #ff9d88;
    --alerte-pale: #3b1c17;
    --ombre: none;
    --logo-fond: #f1ece2;
    --logo-tour: #12384f;
    color-scheme: dark;
}

/* Sans JavaScript : on suit la préférence du système. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --papier: #0c1a23; --papier-2: #10222d; --surface: #132733; --encre: #f1ece2; --texte: #cfd6d6;
        --discret: #8fa0a6; --filet: #24404f; --filet-fort: #36586a; --marine: #a9d3e2; --mer: #6cc0dc;
        --mer-pale: #17384a; --rouille: #ee8a66; --rouille-fonce: #f6a789; --rouille-pale: #3a2219;
        --ocre: #e6bb5f; --ocre-pale: #33290f; --algue: #74c79b; --algue-pale: #15342a; --alerte: #ff9d88;
        --alerte-pale: #3b1c17; --ombre: none; --logo-fond: #f1ece2; --logo-tour: #12384f; color-scheme: dark;
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
    margin: 0;
    font-family: var(--corps);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--texte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
    font-family: var(--titre);
    color: var(--encre);
    line-height: 1.12;
    margin: 0 0 .55em;
    font-weight: 600;
    font-variation-settings: "opsz" 72, "SOFT" 30;
    letter-spacing: -.012em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 650; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
h3 { font-size: 1.15rem; font-variation-settings: "opsz" 24; }
p { margin: 0 0 1em; }
a { color: var(--mer); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rouille); text-decoration-thickness: 2px; }
img { max-width: 100%; }
::selection { background: var(--ocre); color: #0f2230; }
:focus-visible { outline: 2px solid var(--rouille); outline-offset: 3px; border-radius: 2px; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 2rem 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--surface); padding: .5rem 1rem; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

.conteneur { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 560px) { .conteneur { padding: 0 16px; } }
.page { padding-top: 2.5rem; padding-bottom: 3.5rem; }
.page-etroite { max-width: 840px; }
.page-mini { max-width: 480px; }
.section { margin-top: 3rem; }

/* ---------- En-tête ---------- */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--papier) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--filet);
}
.entete-ligne { display: flex; align-items: center; gap: .75rem 1.25rem; min-height: 68px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--encre); margin-right: auto; }
.logo:hover { color: var(--encre); }
.logo svg { flex: none; }
.logo span { font-family: var(--titre); font-size: 1.28rem; font-weight: 500; letter-spacing: -.01em; font-variation-settings: "opsz" 48; }
.logo strong { font-weight: 750; font-style: italic; color: var(--rouille); }
.menu { display: flex; gap: .1rem; flex-wrap: wrap; align-items: center; }
.menu a {
    position: relative; text-decoration: none; color: var(--texte); padding: .5rem .7rem;
    font-weight: 550; font-size: .97rem; letter-spacing: .005em;
}
.menu a::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .25rem; height: 2px;
    background: var(--rouille); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.menu a:hover { color: var(--encre); }
.menu a:hover::after, .menu a.actif::after { transform: scaleX(1); }
.menu a.actif { color: var(--encre); }
.menu a.menu-benevole {
    margin-left: .4rem; border: 1.5px solid var(--encre); border-radius: 999px; padding: .38rem .95rem; color: var(--encre);
}
.menu a.menu-benevole::after { display: none; }
.menu a.menu-benevole:hover { background: var(--encre); color: var(--papier); }

.entete-actions { display: flex; align-items: center; gap: .4rem; order: 3; }
.menu { order: 2; }
.theme-bouton, .menu-bouton {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--filet-fort); border-radius: 999px; color: var(--encre); cursor: pointer;
    transition: background .15s, border-color .15s;
}
.theme-bouton:hover, .menu-bouton:hover { background: var(--papier-2); border-color: var(--encre); }
.theme-bouton .icone-lune { display: none; }
:root[data-theme="dark"] .theme-bouton .icone-soleil { display: none; }
:root[data-theme="dark"] .theme-bouton .icone-lune { display: block; }
.menu-bouton { display: none; }

@media (max-width: 960px) {
    .menu-bouton { display: inline-flex; }
    .entete-actions { order: 2; }
    .menu { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; padding: .25rem 0 1rem; border-top: 1px solid var(--filet); }
    .menu.ouvert { display: flex; }
    .menu a { padding: .8rem .2rem; border-bottom: 1px solid var(--filet); }
    .menu a::after { display: none; }
    .menu a.menu-benevole { margin: .8rem 0 0; text-align: center; border-bottom: 1.5px solid var(--encre); }
}

/* ---------- Accueil ---------- */
.hero { position: relative; padding: 4.5rem 0 3.5rem; border-bottom: 1px solid var(--filet); overflow: hidden; }
.hero .conteneur { position: relative; z-index: 1; }
@media (max-width: 960px) { .hero::before { width: 300px; height: 150px; top: 10px; opacity: .06; } }
.hero::before {
    /* La ligne d'horizon et les deux tours, en filigrane. */
    content: ""; position: absolute; right: -30px; top: 30px; width: 460px; height: 230px; opacity: .08; pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%230f2230' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M10 210c40-26 80-26 120 0s80 26 120 0 80-26 120 0 80 26 140 0'/%3E%3Cpath d='M150 190V70h70v120M300 190V100h60v90M168 70V40h34v30M318 100V78h24v22'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] .hero::before { filter: invert(1); opacity: .12; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); max-width: 14ch; line-height: 1.02; font-weight: 700; margin-bottom: .35em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--rouille); }
.hero-intro { font-size: clamp(1.1rem, 2vw, 1.28rem); max-width: 54ch; color: var(--texte); }
.recherche-hero {
    display: flex; max-width: 720px; margin: 2rem 0 2.5rem;
    background: var(--surface); border: 1.5px solid var(--encre); border-radius: 999px; padding: .35rem; box-shadow: 4px 4px 0 var(--encre);
}
.recherche-hero input { flex: 1; min-width: 0; padding: .8rem 1.1rem; font-size: 1.05rem; border: 0; background: transparent; outline: none; }
.recherche-hero input:focus { outline: none; }
.recherche-hero:focus-within { box-shadow: 4px 4px 0 var(--rouille); border-color: var(--rouille); }
.recherche-hero .bouton { border-radius: 999px; }
@media (max-width: 560px) {
    .hero { padding: 3rem 0 2.5rem; }
    .recherche-hero { flex-direction: column; border-radius: 14px; gap: .35rem; }
    .recherche-hero .bouton { border-radius: 10px; }
}

.chiffres { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--filet); }
.chiffres li { padding: 1rem 1.2rem 0 0; color: var(--discret); font-size: .93rem; line-height: 1.35; }
.chiffres li + li { padding-left: 1.2rem; border-left: 1px solid var(--filet); }
.chiffres strong { display: block; font-family: var(--titre); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: .2rem; }
.chiffres-cartes { margin: 1.5rem 0; border: 1px solid var(--filet); background: var(--surface); }
.chiffres-cartes li { padding: 1rem 1.2rem; }
@media (max-width: 560px) {
    .chiffres li + li { border-left: 0; padding-left: 0; }
    .chiffres li { border-bottom: 1px solid var(--filet); padding: .8rem 0; }
    .chiffres-cartes li { padding: .8rem 1rem; }
}

/* ---------- Grilles ---------- */
.grille-2 { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grille-3 { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--encre); }
.grille-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.liste-cartes { display: grid; gap: .75rem; }

/* Tuiles : grandes entrées numérotées, séparées par des filets. */
.tuile {
    display: block; position: relative; padding: 1.6rem 1.5rem 1.6rem 0; text-decoration: none; color: var(--texte);
    border-bottom: 1px solid var(--filet); counter-increment: tuile;
}
.grille-3 { counter-reset: tuile; }
.grille-3 .tuile + .tuile { padding-left: 1.5rem; border-left: 1px solid var(--filet); }
.tuile::before {
    content: counter(tuile, decimal-leading-zero); display: block; font-family: var(--titre); font-style: italic;
    font-size: .95rem; color: var(--rouille); margin-bottom: .6rem;
}
.tuile h2 { font-size: 1.35rem; margin-bottom: .35em; transition: color .15s; }
.tuile p { margin: 0; font-size: .98rem; color: var(--discret); }
.tuile:hover h2 { color: var(--rouille); }
.tuile h2::after { content: " →"; font-family: var(--corps); font-weight: 400; opacity: 0; transition: opacity .15s, margin .15s; }
.tuile:hover h2::after { opacity: 1; }
.tuile-icone { display: none; }
@media (max-width: 860px) { .grille-3 .tuile + .tuile { padding-left: 0; border-left: 0; } }

.section-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--encre); }
.section-entete h1, .section-entete h2 { margin: 0; }
.section-entete > a { font-weight: 600; text-decoration: none; }
.section-entete > a:hover { text-decoration: underline; }

/* ---------- Cartes (offres, entreprises) ---------- */
.carte {
    background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); padding: 1.1rem 1.25rem;
    transition: border-color .15s, transform .15s;
}
.carte:hover { border-color: var(--filet-fort); }
.carte h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.carte h3 a { text-decoration: none; color: var(--encre); background: linear-gradient(var(--rouille), var(--rouille)) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
.carte h3 a:hover { color: var(--encre); background-size: 100% 2px; }
/* Le statut se lit comme un surtitre, au-dessus du nom : il ne dispute jamais la largeur au titre. */
.carte-entete { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .45rem; }
.carte-entete .badge { white-space: normal; }
.carte-meta { color: var(--discret); font-size: .94rem; margin: 0 0 .55rem; }
.carte-meta.grand { font-size: 1.05rem; }
.carte-meta a { color: var(--discret); }
.carte-postes { margin: 0 0 .55rem; font-size: .97rem; color: var(--texte); }
.carte-pied { color: var(--discret); font-size: .84rem; margin: .6rem 0 0; padding-top: .55rem; border-top: 1px dashed var(--filet); }
.carte-lien { display: block; text-decoration: none; color: var(--texte); }
.carte-lien:hover { color: var(--texte); border-color: var(--encre); }
.carte-lien h3 { color: var(--encre); }
.carte-lien:hover h3 { color: var(--rouille); }
.carte-lien p { margin-bottom: .3rem; }
.carte-entreprise { border-left: 3px solid var(--filet); }
.carte-entreprise:has(.badge-vert) { border-left-color: var(--algue); }
.carte-entreprise:has(.badge-bleu) { border-left-color: var(--mer); }

.etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.etiquette {
    display: inline-flex; align-items: center; font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: .14rem .55rem;
    border-radius: 999px; border: 1px solid var(--filet-fort); color: var(--texte); background: transparent;
}
.etiquette-vert { border-color: var(--algue); color: var(--algue); }
.etiquette-bleu { border-color: var(--mer); color: var(--mer); }
.etiquette-ambre { border-color: var(--ocre); color: color-mix(in srgb, var(--ocre) 70%, var(--encre)); background: var(--ocre-pale); }

.badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: 2px; white-space: nowrap;
}
.badge-vert { background: var(--algue); color: #fff; }
.badge-bleu { background: var(--mer); color: #fff; }
:root[data-theme="dark"] .badge-vert, :root[data-theme="dark"] .badge-bleu { color: #0c1a23; }
.badge-gris { background: transparent; color: var(--discret); border: 1px solid var(--filet-fort); }
.badge-clair { background: var(--papier-2); color: var(--discret); }
.badge-ambre { background: var(--ocre); color: #0f2230; }
.badge-grand { font-size: .8rem; padding: .4rem .8rem; }
.pastille-nombre { display: inline-block; min-width: 1.4em; text-align: center; background: var(--rouille); color: #fff; border-radius: 999px; font-size: .75rem; font-weight: 700; padding: 0 .4em; margin-left: .25em; }

/* ---------- Encarts ---------- */
.encart { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); padding: 1.4rem 1.6rem; margin: 1.6rem 0; }
.encart > :last-child { margin-bottom: 0; }
.encart h2 { font-size: 1.3rem; }
.encart-sable { background: var(--papier-2); border-color: transparent; }
.encart-mer { background: var(--marine); color: #e9f1f3; border-color: transparent; position: relative; overflow: hidden; }
:root[data-theme="dark"] .encart-mer { background: #17384a; }
.encart-mer h2 { color: #fff; }
.encart-mer p { color: #d5e3e8; }
.encart-saison {
    position: relative; padding: 1.6rem 1.8rem 1.6rem 2.2rem; background: var(--surface); border: 1px solid var(--filet);
}
.encart-saison::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(180deg, var(--rouille) 0 14px, var(--ocre) 14px 28px); }
.encart-saison h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); max-width: 30ch; }
.encart-saison > :last-child { margin-bottom: 0; }
.encart-saison a { font-weight: 600; }
.surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--rouille); margin: 0 0 .5rem; font-family: var(--corps); }

.alerte-info, .alerte-succes, .alerte-attention, .alerte-erreur { border-radius: var(--r); padding: 1rem 1.2rem; margin: 1rem 0; border: 1px solid; }
.alerte-info { background: var(--mer-pale); color: var(--encre); border-color: color-mix(in srgb, var(--mer) 40%, transparent); }
.alerte-succes { background: var(--algue-pale); color: var(--encre); border-color: color-mix(in srgb, var(--algue) 45%, transparent); border-left: 4px solid var(--algue); }
.alerte-attention { background: var(--ocre-pale); color: var(--encre); border-color: color-mix(in srgb, var(--ocre) 50%, transparent); border-left: 4px solid var(--ocre); }
.alerte-erreur { background: var(--alerte-pale); color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); }
.alerte-erreur:empty, .alerte-erreur.validation-summary-valid { display: none; }
.alerte-erreur ul { margin: 0; padding-left: 1.2rem; }
.alerte-succes h1, .alerte-succes h2, .alerte-attention h1 { font-size: 1.4rem; }
.vide { color: var(--discret); border: 1px dashed var(--filet-fort); border-radius: var(--r); padding: 1.3rem 1.5rem; background: transparent; }
.vide > :last-child { margin-bottom: 0; }
.intro { font-size: 1.12rem; max-width: 68ch; }
.chapo { font-family: var(--titre); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.45; color: var(--encre); font-weight: 400; font-variation-settings: "opsz" 24; }
.aide { color: var(--discret); font-size: .9rem; font-weight: 400; }
.source { color: var(--discret); font-size: .84rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.fil { font-size: .9rem; margin-bottom: 1.2rem; color: var(--discret); }
.fil a { color: var(--discret); text-decoration: none; }
.fil a:hover { color: var(--rouille); }
.texte-erreur { color: var(--alerte); }

/* ---------- Boutons ---------- */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: var(--encre); color: var(--papier); border: 1.5px solid var(--encre); border-radius: var(--r);
    padding: .7rem 1.2rem; font: inherit; font-weight: 650; font-size: .98rem; letter-spacing: .01em;
    text-decoration: none; cursor: pointer; line-height: 1.25; text-align: center; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.bouton:hover { background: var(--marine); border-color: var(--marine); color: var(--papier); text-decoration: none; }
:root[data-theme="dark"] .bouton:hover { background: var(--mer); border-color: var(--mer); color: #0c1a23; }
.bouton:active { transform: translateY(1px); }
.bouton-accent { background: var(--rouille); border-color: var(--rouille); color: #fff; }
.bouton-accent:hover { background: var(--rouille-fonce); border-color: var(--rouille-fonce); color: #fff; }
:root[data-theme="dark"] .bouton-accent, :root[data-theme="dark"] .bouton-accent:hover { color: #1a0d07; }
.bouton-secondaire { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton-secondaire:hover { background: transparent; color: var(--encre); border-color: var(--encre); }
:root[data-theme="dark"] .bouton-secondaire:hover { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton-clair { background: var(--papier); color: var(--marine); border-color: var(--papier); }
.bouton-clair:hover { background: var(--ocre); border-color: var(--ocre); color: #0f2230; }
.bouton-petit { padding: .38rem .75rem; font-size: .88rem; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--mer); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-bouton:hover { color: var(--rouille); }
.lien-discret { font-size: .95rem; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.4rem 0; }
.en-ligne { display: inline; }
.cellule-actions { white-space: nowrap; }
.cellule-actions > * + * { margin-left: .6rem; }
@media (max-width: 560px) { .actions .bouton { flex: 1 1 100%; } }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: .35rem; max-width: 100%; }
.formulaire label:not(.case) { font-weight: 650; color: var(--encre); margin-top: .8rem; font-size: .95rem; }
.formulaire button[type=submit] { justify-self: start; margin-top: 1.1rem; }
input, select, textarea {
    font: inherit; font-size: 1rem; color: var(--encre); background: var(--surface);
    border: 1px solid var(--filet-fort); border-radius: var(--r); padding: .62rem .8rem; width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--discret) 80%, transparent); }
input[type=checkbox], input[type=radio] { width: 1.05em; height: 1.05em; accent-color: var(--rouille); flex: none; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--encre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mer) 22%, transparent); outline: none; }
fieldset { border: 1px solid var(--filet); border-radius: var(--r); padding: .9rem 1.1rem 1.1rem; margin: 1rem 0 0; display: grid; gap: .35rem; }
legend { font-family: var(--titre); font-weight: 600; color: var(--encre); padding: 0 .35rem; font-size: 1.05rem; }
.case { display: flex; gap: .55rem; align-items: baseline; font-weight: 450; margin: .2rem 0; cursor: pointer; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }
.erreur { color: var(--alerte); font-size: .9rem; }
.formulaire-ligne { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-items: end; gap: .7rem; }
.formulaire-ligne label:not(.case) { margin-top: 0; display: block; font-size: .88rem; }
.formulaire-ligne .large { grid-column: span 2; }
.formulaire-ligne button[type=submit] { margin-top: 0; width: 100%; }
@media (max-width: 560px) { .formulaire-ligne .large { grid-column: auto; } }

/* ---------- Filtres et recherche ---------- */
.filtres { border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet); padding: 1.1rem 0; margin: 1.6rem 0; }
.filtres-principal { display: flex; gap: .5rem; }
.filtres-principal input { flex: 1; min-width: 0; font-size: 1.05rem; }
.filtres-options { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; margin-top: .9rem; align-items: end; }
.filtres-options label:not(.case) { display: grid; gap: .25rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); flex: 1 1 190px; }
.filtres-options select { padding: .5rem .65rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.resultats-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.resultats-entete strong { font-family: var(--titre); font-size: 1.3rem; color: var(--encre); }

.pagination { display: flex; flex-wrap: wrap; gap: .3rem; margin: 2rem 0; justify-content: center; }
.pagination a, .pagination span { min-width: 2.4rem; padding: .45rem .75rem; text-align: center; border: 1px solid var(--filet); border-radius: var(--r); text-decoration: none; color: var(--texte); background: var(--surface); }
.pagination a:hover { border-color: var(--encre); color: var(--encre); }
.pagination .courante { background: var(--encre); color: var(--papier); border-color: var(--encre); font-weight: 700; }

/* ---------- Fiches ---------- */
.fiche-entete { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid var(--encre); }
.fiche-entete h1 { margin-bottom: .2rem; }
.sous-titre { color: var(--discret); margin: 0 0 .3rem; font-style: italic; }
.bloc-statut { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); padding: 1.3rem 1.5rem; margin: 1.4rem 0; }
.bloc-statut-positif { border-left: 4px solid var(--algue); }
.bloc-statut h2 { font-size: 1.1rem; margin: 1.1rem 0 .3rem; }
.bloc-statut > :last-child { margin-bottom: 0; }
.bloc-statut-date { color: var(--discret); font-size: .94rem; }
.engagement { color: var(--algue); font-weight: 650; }
.caracteristiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0; margin: 1.4rem 0; border-top: 1px solid var(--filet); }
.caracteristiques > div { padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--filet); }
.caracteristiques dt { font-size: .72rem; font-weight: 700; color: var(--discret); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.caracteristiques dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
.description { border-top: 1px solid var(--filet); padding: 1.5rem 0; margin: 1.5rem 0; overflow-wrap: anywhere; }

/* ---------- Articles ---------- */
.prose { max-width: 68ch; }
.prose > h1 { margin-bottom: .4em; }
.prose h2 { margin-top: 2em; padding-top: .8em; border-top: 1px solid var(--filet); }
.prose h3 { margin-top: 1.5em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--rouille); }
.prose blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.3em; border-left: 3px solid var(--rouille); font-family: var(--titre); font-size: 1.12em; font-style: italic; color: var(--encre); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.4em 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--filet); padding: .6em .8em; text-align: left; vertical-align: top; }
.prose th { color: var(--encre); font-weight: 700; border-bottom: 1.5px solid var(--encre); }
.prose code { background: var(--papier-2); padding: .1em .35em; border-radius: 3px; }
.prose a { font-weight: 550; }

.liste-liens { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--filet); }
.liste-liens a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.liste-liens strong { display: block; color: var(--encre); font-family: var(--titre); font-weight: 600; font-size: 1.08rem; transition: color .15s; }
.liste-liens a:hover strong { color: var(--rouille); }
.liste-liens span { color: var(--discret); font-size: .92rem; }
.liste-simple { padding-left: 1.2rem; }
.liste-simple li { margin-bottom: .35rem; }
.liste-simple li::marker { color: var(--rouille); }
.liste-classement { padding-left: 0; list-style: none; counter-reset: rang; }
.liste-classement li { counter-increment: rang; display: flex; gap: .8rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--filet); }
.liste-classement li::before { content: counter(rang); font-family: var(--titre); font-style: italic; color: var(--rouille); min-width: 1.5rem; }
.liste-classement li span { flex: 1; }
.liste-classement li strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.etapes { padding-left: 0; list-style: none; counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; padding: 0 0 1rem 3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--filet); }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: -.1rem; font-family: var(--titre); font-size: 1.8rem; line-height: 1; color: var(--rouille); font-style: italic; }

/* ---------- Tableaux ---------- */
.tableau-defilant { overflow-x: auto; border-top: 1.5px solid var(--encre); }
.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau th { font-size: .72rem; color: var(--discret); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.tableau tbody tr:hover td { background: color-mix(in srgb, var(--papier-2) 70%, transparent); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-compact td { padding: .45rem .7rem; font-size: .88rem; }
.ligne-erreur td { background: var(--alerte-pale); }
.ligne-passee td { opacity: .5; }
.sous-menu { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.sous-menu a { border: 1px solid var(--filet-fort); border-radius: 999px; padding: .4rem .95rem; text-decoration: none; color: var(--encre); font-weight: 600; font-size: .93rem; }
.sous-menu a:hover { border-color: var(--encre); }

/* ---------- Agenda ---------- */
.agenda { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--encre); }
.agenda-element { display: grid; grid-template-columns: 78px 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--filet); }
.agenda-element h2 { font-size: 1.22rem; margin-bottom: .25rem; }
.agenda-date { text-align: center; align-self: start; border: 1.5px solid var(--encre); border-radius: var(--r); padding: .35rem 0 .45rem; background: var(--surface); }
.agenda-jour { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--encre); }
.agenda-mois { text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--rouille); }

/* ---------- Bénévoles ---------- */
.grille-appel { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); align-items: start; }
.script p, .script li { font-size: .98rem; }
.script p:first-of-type { font-family: var(--titre); font-style: italic; font-size: 1.05rem; color: var(--encre); }
.historique { list-style: none; padding: 0; }
.historique li { border-left: 2px solid var(--filet-fort); padding: .15rem 0 .15rem 1rem; margin-bottom: 1rem; }
.historique p { margin: 0 0 .2rem; }

/* ---------- Carte ---------- */
.carte-geo { height: min(70vh, 640px); border: 1px solid var(--filet-fort); border-radius: var(--r); margin: 1rem 0; z-index: 1; background: var(--papier-2); }
.legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.25); flex: none; }
.pastille-vert { background: #1e7a4c; }
.pastille-bleu { background: #2563a8; }
.pastille-mer { background: #0b8fb3; }
.pastille-ambre { background: #d99a1e; }
.pastille-gris { background: #7a8a94; }
.leaflet-container { font-family: var(--corps); }
.leaflet-popup-content a { font-weight: 650; }
/* Mode sombre : les tuiles OpenStreetMap sont assombries, les marqueurs gardent leurs couleurs. */
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6); }
:root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--texte); }
:root[data-theme="dark"] .leaflet-control-zoom a, :root[data-theme="dark"] .leaflet-control-attribution { background: var(--surface); color: var(--texte); border-color: var(--filet); }
:root[data-theme="dark"] .leaflet-control-attribution a { color: var(--mer); }

.carte-outils { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet); padding: 1rem 0; margin: 1.2rem 0; }
.carte-couches { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; }
.carte-filtres { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.carte-filtres label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); }
.carte-filtres select { padding: .5rem .65rem; min-width: 200px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.compteur { color: var(--discret); font-size: .84rem; font-variant-numeric: tabular-nums; }
.carte-consentement { border-left: 4px solid var(--rouille); max-width: 700px; }
.carte-grille { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
.carte-grille .carte-geo { margin: 0; height: min(76vh, 700px); }
.carte-liste { border-top: 1.5px solid var(--encre); max-height: min(76vh, 700px); overflow-y: auto; padding-right: .3rem; }
.carte-liste h2 { font-size: 1.1rem; padding: .7rem 0 .3rem; margin: 0; }
.liste-carte { list-style: none; padding: 0; margin: 0; }
.liste-carte li { padding: .55rem 0; border-bottom: 1px solid var(--filet); }
.liste-carte li a { font-weight: 600; text-decoration: none; color: var(--encre); }
.liste-carte li a:hover { color: var(--rouille); }
.liste-carte li .aide { display: block; font-size: .82rem; }
.liste-carte .pastille { width: 10px; height: 10px; }
.groupe-carte span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: #fff; font-weight: 800; font-size: .8rem; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 1px 4px rgba(0,0,0,.3); font-family: var(--corps); }
@media (max-width: 960px) {
    .carte-grille { grid-template-columns: 1fr; }
    .carte-liste { max-height: none; }
}

/* ---------- Outils ---------- */
.grille-generateur { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.apercu { background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--r); padding: 1.4rem; position: sticky; top: 90px; box-shadow: 6px 6px 0 var(--papier-2); }
.apercu-entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--filet); padding-bottom: .7rem; margin-bottom: .8rem; }
.apercu-entete h2 { margin: 0; font-size: 1.2rem; }
.apercu-texte { white-space: pre-wrap; font-family: var(--corps); font-size: 1rem; line-height: 1.65; margin: 0; color: var(--encre); }
.suivi-resume { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.statut-select { padding: .3rem .45rem; font-size: .9rem; }
.relance-due { color: var(--rouille); font-weight: 700; }

/* ---------- Pages emploi par commune / secteur ---------- */
.grille-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--filet); }
.grille-liens a { display: block; height: 100%; padding: .9rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.grille-liens strong { display: block; color: var(--encre); font-family: var(--titre); font-weight: 600; font-size: 1.06rem; transition: color .15s; }
.grille-liens a:hover strong { color: var(--rouille); }
.grille-liens span { color: var(--discret); font-size: .88rem; }
.nuage { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.nuage a { display: inline-block; border: 1px solid var(--filet-fort); border-radius: 999px; padding: .3rem .85rem; text-decoration: none; font-size: .92rem; color: var(--encre); }
.nuage a:hover { border-color: var(--rouille); color: var(--rouille); }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine); color: #c9d7dd; padding: 3.5rem 0 1.5rem; margin-top: 4rem; font-size: .95rem; position: relative; }
:root[data-theme="dark"] .pied { background: #08131a; border-top: 1px solid var(--filet); }
.pied::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: no-repeat 0 100% / 100% 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 14V8c100-10 200-10 300 0s200 10 300 0 200-10 300 0 200 10 300 0v6z' fill='%2312384f'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .pied::before { display: none; }
.pied a { color: #fff; text-decoration-color: rgba(255,255,255,.35); }
.pied a:hover { color: var(--ocre); text-decoration-color: var(--ocre); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .4rem; }
.pied-grille { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.pied-titre { color: #fff; font-family: var(--titre); font-weight: 600; font-size: 1.12rem; margin-bottom: .6rem; }
.pied-sources { font-size: .84rem; opacity: .8; margin-top: 1rem; }
.pied-reseaux { margin: 1.1rem 0 0; }
.pied-reseaux a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .4rem .9rem .4rem .7rem; font-weight: 600; }
.pied-reseaux a:hover { border-color: var(--ocre); }
.pied-communes { font-size: .86rem; opacity: .9; padding-top: 1.3rem; }
.pied-communes p { margin-bottom: .6rem; }
.pied-communes a { color: #c9d7dd; }

/* ---------- Mouvement réduit et impression ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
    .entete, .pied, .actions, .formulaire, .filtres, .encart-sable, .theme-bouton { display: none !important; }
    body { background: #fff; color: #000; }
}