/* ============================================================
   CIVILO — main.css (V0.2, 2026-05-16)
   Design system "Brutalist Civic Electric"
     Triade : cobalt #1D3557 + vermillon #E63946 + cream #F8F4EC
     Borders 3px noir signature + offset shadows hard
     Fonts : Space Grotesk (display) + IBM Plex Sans (body)

   Voir memory/design-system.md pour les règles (tokens, anti-patterns,
   accessibilité AA-AAA, pattern Community Landing, etc.).

   Sommaire :
     - @font-face Space Grotesk + IBM Plex Sans
     - Design tokens --civ-* (rétrocompat avec inline styles existants)
     - Reset minimal
     - Base body + typo
     - Accessibility (skip link, focus, reduced motion, view transitions)
     - Layout (container, grid)
     - Boutons (.btn brutalist : border 3px + offset shadow + radius pill)
     - Cartes (.card brutalist : border 3px + offset shadow)
     - Forms (.field 3px noir + focus ring cobalt)
     - Header + Footer
     - Hero (cream + circles deco + tag pill + title mark)
     - Section band (fullbleed cobalt pour listings event)
     - Badges
     - Utilitaires
   ============================================================ */


/* ─── Polices self-hosted ─────────────────────────────────────
   Space Grotesk + IBM Plex Sans (SIL Open Font License 1.1).
   À télécharger en .woff2 dans /assets/fonts/ :
     - Space Grotesk : https://fonts.google.com/specimen/Space+Grotesk
     - IBM Plex Sans : https://fonts.google.com/specimen/IBM+Plex+Sans
   Voir /assets/fonts/README.md pour la procédure détaillée.
*/

/* Space Grotesk (display : titres, navigation, boutons, badges) */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-semibold.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-bold.woff2') format('woff2');
}

/* IBM Plex Sans (body : paragraphes, inputs, métadonnées) */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/ibm-plex-sans-semibold.woff2') format('woff2');
}


/* ─── Design tokens ─────────────────────────────────────────── */
:root {
    /* ─ Couleurs fonds (cream → cobalt → noir = progression visuelle) */
    --civ-bg-page:      #F8F4EC;     /* cream neutre, surface principale */
    --civ-bg-card:      #FFFFFF;     /* cards, modals, navbar */
    --civ-bg-raised:    #EFE9DA;     /* cream légèrement assombri (rows, sections subtiles) */
    --civ-bg-dark:      #1D3557;     /* cobalt fullbleed (section band events) */
    --civ-bg-darker:    #0A0A0A;     /* noir profondeur finale (footer) */

    /* ─ Couleurs texte (AAA sur cream, AAA sur white) */
    --civ-text-primary:   #0A0A0A;   /* noir pur — corps de texte */
    --civ-text-secondary: #2A2A2A;   /* hero lead, sous-titres */
    --civ-text-muted:     #5C5C5C;   /* captions, métadonnées (4.6:1 sur cream → AA) */
    --civ-text-on-dark:       #FFFFFF;
    --civ-text-muted-on-dark: #B8C5DB;

    /* ─ Brand DOMINANTE : cobalt deep */
    --civ-primary:        #1D3557;   /* cobalt deep — btn primary, section bg, focus, links */
    --civ-primary-hover:  #15294A;   /* cobalt assombri */
    --civ-primary-soft:   #C7D2E8;   /* cobalt pale (visuels event placeholder) */
    --civ-primary-tint:   rgba(29, 53, 87, 0.10); /* hover bg subtil */

    /* ─ Brand POP : vermillon */
    --civ-accent:         #E63946;   /* vermillon — CTA + offset shadows + accent footer */
    --civ-accent-hover:   #B91C2C;   /* vermillon assombri */
    --civ-accent-soft:    #FFD8DA;   /* vermillon pale (rare, hover ghost btns) */
    --civ-accent-tint:    rgba(230, 57, 70, 0.10);

    /* ─ Sémantiques d'état (alignées triade au max) */
    --civ-success:        #15803D;   /* vert foncé — pas trop vif pour pas concurrencer pop */
    --civ-warning:        #B45309;   /* ambre foncé */
    --civ-error:          #E63946;   /* = accent vermillon, cohérent + économise couleurs */
    --civ-info:           #1D3557;   /* = primary cobalt, cohérent */

    /* ─ Bordures (BRUTALIST = noir, jamais gris discret) */
    --civ-border-subtle:  #0A0A0A;   /* alias historique — désormais noir comme tout */
    --civ-border-strong:  #0A0A0A;
    --civ-border-focus:   #1D3557;   /* cobalt pour focus ring */
    --civ-border-width:   3px;       /* signature brutaliste */
    --civ-border-width-thin: 2px;    /* exception : nav-links, badges, hero-tag */

    /* ─ Typo */
    --civ-ff-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --civ-ff-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --civ-ff-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --civ-fw-regular: 400;
    --civ-fw-medium:  500;
    --civ-fw-semibold: 600;
    --civ-fw-bold:    700;

    /* ─ Type scale */
    --civ-fs-xs:   12px;     /* badges uppercase, footnotes */
    --civ-fs-sm:   14px;     /* labels, meta */
    --civ-fs-base: 16px;     /* body, inputs (min mobile-friendly) */
    --civ-fs-lg:   19px;     /* hero lead, h4 */
    --civ-fs-xl:   22px;     /* h3 (event-title) */
    --civ-fs-2xl:  30px;     /* h2 page interne */
    --civ-fs-3xl:  48px;     /* h1 page interne, section-title homepage */
    --civ-fs-4xl:  clamp(48px, 6.5vw, 92px); /* hero h1 homepage fluide */

    /* ─ Espacements (4/8pt grid) */
    --civ-sp-1: 4px;
    --civ-sp-2: 8px;
    --civ-sp-3: 12px;
    --civ-sp-4: 16px;
    --civ-sp-5: 24px;
    --civ-sp-6: 32px;
    --civ-sp-7: 48px;
    --civ-sp-8: 64px;
    --civ-sp-9: 96px;

    /* ─ Radius (3 niveaux brutalist soft) */
    --civ-radius-sm:    8px;       /* nav-link, badges, inputs, btn--sm */
    --civ-radius-md:    14px;      /* cards, modals, images, hero-title-mark */
    --civ-radius-lg:    16px;      /* alias compat (cards larges) — proche md */
    --civ-radius-xl:    24px;      /* alias compat — rarement utilisé */
    --civ-radius-pill:  100px;     /* btns CTA, tags, badges arrondis, section-link */

    /* ─ Shadows (BRUTALIST = offset hard, jamais soft blur) */
    --civ-offset:        5px;
    --civ-offset-small:  3px;
    --civ-shadow-sm:     var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
    --civ-shadow-md:     var(--civ-offset) var(--civ-offset) 0 var(--civ-accent);
    --civ-shadow-lg:     6px 6px 0 var(--civ-accent);  /* event cards */

    /* ─ Transitions (BRUTALIST = press feedback rapide) */
    --civ-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --civ-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --civ-transition-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─ Layout */
    --civ-container-max: 1240px;
    --civ-container-narrow: 760px;
}


/* ─── Reset minimal ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    line-height: 1.5;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}
button, input, textarea, select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--civ-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color var(--civ-transition-fast);
}
a:hover {
    color: var(--civ-accent);
    text-decoration-thickness: 3px;
}


/* ─── Base ──────────────────────────────────────────────────── */
body {
    background: var(--civ-bg-page);
    color: var(--civ-text-primary);
    font-family: var(--civ-ff-body);
    font-size: var(--civ-fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-bold);
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--civ-text-primary);
}
h1 { font-size: var(--civ-fs-3xl); letter-spacing: -0.04em; }
h2 { font-size: var(--civ-fs-2xl); }
h3 { font-size: var(--civ-fs-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--civ-fs-lg); }

p { color: var(--civ-text-secondary); }
small { font-size: var(--civ-fs-sm); color: var(--civ-text-muted); }

strong, b { font-weight: var(--civ-fw-semibold); color: var(--civ-text-primary); }


/* ─── Accessibility ─────────────────────────────────────────── */

/* Skip link (a11y obligatoire) — brutalist style */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--civ-primary);
    color: var(--civ-text-on-dark);
    padding: 12px 18px;
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-bold);
    text-decoration: none;
    z-index: 9999;
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-accent);
    transition: top var(--civ-transition-fast);
}
.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--civ-accent);
    outline-offset: 4px;
}

/* Focus visible — ring 3px cobalt haut contraste */
:focus-visible {
    outline: 3px solid var(--civ-border-focus);
    outline-offset: 2px;
    border-radius: var(--civ-radius-sm);
}

/* Selection */
::selection {
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ─── Transitions de page (View Transitions API native, MPA) ────
   Voir reference_view_transitions_mpa.md pour la convention écosystème.
   Subtle crossfade 140ms out + 220ms in. Fallback gracieux Firefox/old.
*/
@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: civ-page-fade-out 140ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
    animation: civ-page-fade-in 220ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes civ-page-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes civ-page-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}


/* ─── Layout ────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--civ-container-max);
    margin: 0 auto;
    padding: 0 var(--civ-sp-4);
}
@media (min-width: 768px) {
    .container { padding: 0 var(--civ-sp-6); }
}
.container--narrow { max-width: var(--civ-container-narrow); }


/* ─── Boutons (BRUTALIST : border 3px + offset shadow + pill) ───
   Convention v7 :
     .btn--primary : cobalt bg + white text + offset shadow vermillon
     .btn--accent  : vermillon bg + white text + offset shadow cobalt
     .btn--ghost   : transparent + border noir + offset shadow cobalt
   Hover : translate(2px, 2px) + shrink shadow (signature press feedback).
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--civ-sp-2);
    padding: 14px 26px;
    min-height: 48px;
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-base);
    font-weight: var(--civ-fw-bold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-primary);
    transition: transform var(--civ-transition-fast), box-shadow var(--civ-transition-fast), background var(--civ-transition-fast), color var(--civ-transition-fast);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
    text-decoration: none;
}
.btn:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--civ-primary);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn--primary {
    background: var(--civ-primary);
    color: var(--civ-text-on-dark);
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-accent);
}
.btn--primary:hover {
    background: var(--civ-primary-hover);
    color: var(--civ-text-on-dark);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-accent);
}
.btn--primary:active {
    box-shadow: 1px 1px 0 var(--civ-accent);
}

.btn--accent {
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-primary);
}
.btn--accent:hover {
    background: var(--civ-accent-hover);
    color: var(--civ-text-on-dark);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
}
.btn--accent:active {
    box-shadow: 1px 1px 0 var(--civ-primary);
}

.btn--ghost {
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-primary);
}
.btn--ghost:hover {
    background: var(--civ-bg-page);
    color: var(--civ-text-primary);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
}

/* Sur surface dark (section band cobalt, modals dark) : inverse les contrastes */
.btn--on-dark {
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    box-shadow: var(--civ-offset) var(--civ-offset) 0 var(--civ-accent);
}
.btn--on-dark:hover {
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-bg-darker);
}

/* Tailles */
.btn--sm  {
    padding: 8px 16px;
    min-height: 40px;
    font-size: var(--civ-fs-sm);
    border-width: 2px;
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
}
.btn--sm:hover { box-shadow: 1px 1px 0 var(--civ-primary); }
.btn--sm.btn--primary { box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-accent); }
.btn--sm.btn--primary:hover { box-shadow: 1px 1px 0 var(--civ-accent); }
.btn--sm.btn--accent { box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary); }
.btn--sm.btn--accent:hover { box-shadow: 1px 1px 0 var(--civ-primary); }

.btn--lg  {
    padding: 18px 32px;
    min-height: 56px;
    font-size: var(--civ-fs-lg);
}
.btn--block { width: 100%; }


/* ─── Spinner (loading state submit) ──────────────────────────
   Sous prefers-reduced-motion : remplace rotation par pulse opacity.
   Pas de transform, juste un indicateur "en cours". Le combo bouton
   disabled + aria-busy + texte "Envoi…" reste la source de vérité
   screen-reader — le spinner est purement décoratif.
*/
.civ-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: civ-spinner-rotate 600ms linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}
@keyframes civ-spinner-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .civ-spinner {
        animation: civ-spinner-pulse 1.4s ease-in-out infinite !important;
        border-right-color: currentColor;
    }
    @keyframes civ-spinner-pulse {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.4; }
    }
}


/* ─── Cartes (BRUTALIST : border 3px + offset shadow hard) ────── */
.card {
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    padding: var(--civ-sp-5);
    box-shadow: 6px 6px 0 var(--civ-primary);
    transition: transform var(--civ-transition-base), box-shadow var(--civ-transition-base);
}
.card--interactive {
    cursor: pointer;
}
.card--interactive:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--civ-primary);
}

/* Variante : offset shadow vermillon (utilisée pour cards events listing,
   où le rythme visuel demande de switcher la couleur de l'ombre). */
.card--pop {
    box-shadow: 6px 6px 0 var(--civ-accent);
}
.card--pop:hover {
    box-shadow: 4px 4px 0 var(--civ-accent);
}

/* Card sur section dark (cobalt) — offset reste vermillon */
.card--on-dark {
    box-shadow: 6px 6px 0 var(--civ-accent);
}
.card--on-dark:hover {
    box-shadow: 4px 4px 0 var(--civ-accent);
}


/* ─── Forms (border 3px noir + focus ring cobalt) ─────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--civ-sp-2);
    margin-bottom: var(--civ-sp-4);
}
.field-label {
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-bold);
    color: var(--civ-text-primary);
    font-size: var(--civ-fs-sm);
    letter-spacing: 0.02em;
}
.field-required::after {
    content: " *";
    color: var(--civ-error);
    font-weight: var(--civ-fw-bold);
}

.field-input,
.field-textarea,
.field-select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    min-height: 48px;
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-sm);
    font-family: var(--civ-ff-body);
    font-size: var(--civ-fs-base);
    transition: box-shadow var(--civ-transition-fast), border-color var(--civ-transition-fast);
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
    outline: none;
    border-color: var(--civ-primary);
    box-shadow: 0 0 0 3px var(--civ-primary-tint);
}
.field-input:invalid:not(:focus):not(:placeholder-shown),
.field-textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--civ-error);
}
.field-textarea { min-height: 140px; resize: vertical; }

.field-help {
    font-size: var(--civ-fs-xs);
    color: var(--civ-text-muted);
}
.field-error {
    font-size: var(--civ-fs-xs);
    color: var(--civ-error);
    font-weight: var(--civ-fw-bold);
}


/* ─── Autocomplete dropdown (BAN address API) ─────────────────
   Convention écosystème : brutalist, border 3px noir + offset shadow cobalt.
   Position absolute sous le field-input (parent doit avoir position:relative).
*/
.civ-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-sm);
    box-shadow: 5px 5px 0 var(--civ-primary);
    max-height: 280px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.civ-autocomplete-dropdown.is-visible { display: block; }
.civ-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid var(--civ-bg-raised);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--civ-ff-body);
}
.civ-autocomplete-item:last-child { border-bottom: none; }
.civ-autocomplete-item.is-active,
.civ-autocomplete-item:hover {
    background: var(--civ-bg-raised);
}
.civ-autocomplete-item__label {
    font-size: var(--civ-fs-sm);
    font-weight: var(--civ-fw-semibold);
    color: var(--civ-text-primary);
}
.civ-autocomplete-item__context {
    font-size: var(--civ-fs-xs);
    color: var(--civ-text-muted);
}
/* Parent du js-civilo-address-autocomplete doit être en position:relative.
   On le force depuis .field puisque c'est la structure standard des forms. */
.field {
    position: relative;
}


/* ─── Header / Nav (cream bg + border-bottom 3px noir) ────────── */
.site-header {
    background: var(--civ-bg-page);
    border-bottom: 3px solid var(--civ-border-strong);
    padding: var(--civ-sp-4) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--civ-sp-4);
}
.site-logo {
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xl);
    font-weight: var(--civ-fw-bold);
    letter-spacing: -0.04em;
    color: var(--civ-text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--civ-sp-3);
    text-transform: none;
}
.site-logo:hover {
    color: var(--civ-primary);
    text-decoration: none;
}
/* Logo SVG inline original (réseau citoyen multi-gradients) — pas de bg ni border
   wrapper, on laisse les gradients du SVG s'exprimer librement. */
.site-logo__mark {
    width: 36px;
    height: 36px;
    display: inline-block;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: var(--civ-sp-2);
    align-items: center;
}
/* Les liens texte de la nav : exclu .btn pour ne pas piétiner la spécificité
   du bouton signup (.site-nav a a une spécificité (0,1,1) qui battait
   .btn--primary (0,1,0) → texte du bouton illisible au repos). */
.site-nav a:not(.btn) {
    color: var(--civ-text-primary);
    text-decoration: none;
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-semibold);
    font-size: var(--civ-fs-sm);
    padding: 10px 16px;
    border: 2px solid transparent;
    border-radius: var(--civ-radius-sm);
    transition: border-color var(--civ-transition-fast), background var(--civ-transition-fast), color var(--civ-transition-fast);
}
.site-nav a:not(.btn):hover {
    border-color: var(--civ-border-strong);
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    text-decoration: none;
}
.site-nav a:not(.btn)[aria-current="page"] {
    border-color: var(--civ-border-strong);
    background: var(--civ-primary);
    color: var(--civ-text-on-dark);
}
/* Btn signup dans la nav reste pill brutalist via .btn .btn--primary .btn--sm */


/* ─── Footer (NOIR + h4 vermillon — closes progression cream→cobalt→noir) ─ */
.site-footer {
    background: var(--civ-bg-darker);
    color: var(--civ-text-on-dark);
    border-top: 3px solid var(--civ-border-strong);
    padding: var(--civ-sp-7) 0 var(--civ-sp-5);
    margin-top: var(--civ-sp-9);
    font-size: var(--civ-fs-sm);
}
.site-footer p { color: var(--civ-text-on-dark); }
.site-footer strong { color: var(--civ-accent); }
.site-footer h4 {
    color: var(--civ-accent);
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-sm);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--civ-sp-3);
}
.site-footer a {
    color: var(--civ-text-on-dark);
    text-decoration: none;
    padding: 4px 0;
    display: inline-block;
    transition: color var(--civ-transition-fast);
}
.site-footer a:hover {
    color: var(--civ-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--civ-sp-7);
    margin-bottom: var(--civ-sp-6);
}
@media (max-width: 768px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--civ-sp-5);
    }
    .site-footer__grid > :first-child {
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}
.site-footer__bottom {
    margin-top: var(--civ-sp-6);
    padding-top: var(--civ-sp-4);
    border-top: 2px solid var(--civ-accent);
    text-align: center;
    color: var(--civ-text-muted-on-dark);
}


/* ─── Hero (cream + cercles décoratifs + tag pill + title mark) ─ */
.hero {
    padding: var(--civ-sp-9) 0 var(--civ-sp-8);
    border-bottom: 3px solid var(--civ-border-strong);
    position: relative;
    overflow: hidden;
}
.hero__content {
    position: relative;
    z-index: 1;
}
.hero__title {
    font-size: var(--civ-fs-4xl);
    line-height: 1.02;
    letter-spacing: -0.04em;
    max-width: 980px;
    margin-bottom: var(--civ-sp-5);
}
.hero__lead {
    font-size: var(--civ-fs-lg);
    color: var(--civ-text-secondary);
    max-width: 640px;
    margin: 0 0 var(--civ-sp-6);
    line-height: 1.55;
    font-weight: var(--civ-fw-medium);
}
.hero__cta {
    display: inline-flex;
    gap: var(--civ-sp-4);
    flex-wrap: wrap;
}

/* Hero tag pill (au-dessus du h1) */
.hero__tag {
    display: inline-block;
    padding: 8px 18px;
    background: var(--civ-bg-card);
    border: 2px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xs);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--civ-text-primary);
    margin-bottom: var(--civ-sp-6);
    box-shadow: var(--civ-offset-small) var(--civ-offset-small) 0 var(--civ-primary);
}

/* Hero title mark — span coloré rotation -1.2deg sur 1 mot clé du h1 */
.hero__title-mark {
    display: inline-block;
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
    padding: 4px 18px;
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    transform: rotate(-1.2deg);
}
@media (prefers-reduced-motion: reduce) {
    .hero__title-mark { transform: none; }
}

/* Cercles décoratifs hero (cobalt + vermillon) */
.hero__bg-circle {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: var(--civ-primary);
    border: 3px solid var(--civ-border-strong);
    z-index: 0;
}
.hero__bg-circle--accent {
    top: auto;
    right: auto;
    bottom: -150px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: var(--civ-accent);
}
@media (max-width: 768px) {
    .hero__bg-circle {
        width: 240px;
        height: 240px;
        top: -60px;
        right: -60px;
    }
    .hero__bg-circle--accent {
        width: 180px;
        height: 180px;
        bottom: -90px;
        left: -60px;
    }
}


/* ─── Hero teaser sticker (droite du hero, above-the-fold desktop, static mobile) ───
   Affiche un mini-bloc "Aussi sur Civilo : bénévolat" comme une affiche épinglée,
   en rotation -1.5deg (écho au .hero__title-mark vermillon "bénévole").
   Z-index supérieur aux cercles déco pour rester lisible. */
.hero__teaser {
    position: absolute;
    top: 55%;
    right: 5%;
    transform: translateY(-50%) rotate(-1.5deg);
    z-index: 2;
    width: 340px;
    max-width: 32vw;
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    box-shadow: 7px 7px 0 var(--civ-accent);
    padding: var(--civ-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--civ-sp-3);
    transition: transform var(--civ-transition-base), box-shadow var(--civ-transition-base);
}
.hero__teaser:hover {
    transform: translateY(-50%) rotate(-1.5deg) scale(1.02);
    box-shadow: 5px 5px 0 var(--civ-accent);
}
.hero__teaser-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    background: var(--civ-bg-raised);
    border: 2px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xs);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--civ-text-primary);
}
.hero__teaser-text {
    margin: 0;
    font-size: var(--civ-fs-sm);
    line-height: 1.5;
    color: var(--civ-text-primary);
}
.hero__teaser-text strong {
    color: var(--civ-text-primary);
    font-weight: var(--civ-fw-semibold);
}
.hero__teaser .btn {
    align-self: flex-start;
}

/* Mobile / tablet (<= 1024px) : sticker devient un bandeau static plein largeur
   sous le hero, sans rotation (sinon ça déborde du viewport). */
@media (max-width: 1024px) {
    .hero__teaser {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        margin: var(--civ-sp-5) var(--civ-sp-4) 0;
    }
    .hero__teaser:hover {
        transform: none;
        box-shadow: 7px 7px 0 var(--civ-accent);
    }
}

/* Reduced motion : pas d'animation hover */
@media (prefers-reduced-motion: reduce) {
    .hero__teaser { transition: none; }
    .hero__teaser:hover {
        transform: translateY(-50%) rotate(-1.5deg);
        box-shadow: 7px 7px 0 var(--civ-accent);
    }
}


/* ─── Section band (fullbleed cobalt — events listing, etc.) ──── */
.section-band {
    background: var(--civ-bg-dark);
    color: var(--civ-text-on-dark);
    border-bottom: 3px solid var(--civ-border-strong);
    padding: var(--civ-sp-8) 0;
}
.section-band__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--civ-sp-5);
    flex-wrap: wrap;
    margin-bottom: var(--civ-sp-7);
}
.section-band__title {
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-3xl);
    font-weight: var(--civ-fw-bold);
    letter-spacing: -0.03em;
    color: var(--civ-text-on-dark);
    margin: 0;
}
.section-band__link {
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-sm);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--civ-text-on-dark);
    text-decoration: none;
    padding: 10px 22px;
    border: 2px solid var(--civ-text-on-dark);
    border-radius: var(--civ-radius-pill);
    background: transparent;
    transition: background var(--civ-transition-fast), color var(--civ-transition-fast);
}
.section-band__link:hover {
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
    text-decoration: none;
}

/* Grid responsive 3 colonnes pour event cards dans section-band */
.section-band__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--civ-sp-5);
}
@media (max-width: 960px) {
    .section-band__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .section-band__grid { grid-template-columns: 1fr; }
}


/* ─── Event card (utilisé dans section-band home + listing /evenements +
       /profil/mes-evenements + /profil/mes-inscriptions) ─────────────
   Pattern fixe : image (aspect 4/3) → body { badge + title + truncated
   lead + meta dashed top }.
   Le bloc utilise .card pour les visuels brutalist (border 3px + offset).
*/
.event-card {
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    box-shadow: 6px 6px 0 var(--civ-accent);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: var(--civ-text-primary);
    transition: transform var(--civ-transition-base), box-shadow var(--civ-transition-base);
}
.event-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--civ-accent);
    color: var(--civ-text-primary);
    text-decoration: none;
}
.event-card__image {
    aspect-ratio: 4 / 3;
    border-bottom: 3px solid var(--civ-border-strong);
    background: var(--civ-primary-soft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--civ-primary);
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-bold);
    text-align: center;
    padding: var(--civ-sp-3);
    position: relative;
}
.event-card__image--accent { background: var(--civ-accent); color: var(--civ-text-on-dark); }
.event-card__image--cream  { background: var(--civ-bg-raised); color: var(--civ-text-primary); }
.event-card__body {
    padding: var(--civ-sp-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--civ-sp-3);
}
.event-card__title {
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xl);
    font-weight: var(--civ-fw-bold);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--civ-text-primary);
}
.event-card__lead {
    font-size: var(--civ-fs-sm);
    color: var(--civ-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.event-card__meta {
    font-size: var(--civ-fs-sm);
    color: var(--civ-text-muted);
    font-weight: var(--civ-fw-medium);
    margin: 0;
    margin-top: auto;
    padding-top: var(--civ-sp-4);
    border-top: 2px dashed var(--civ-border-strong);
    line-height: 1.5;
}
.event-card__meta strong {
    color: var(--civ-text-primary);
    font-weight: var(--civ-fw-semibold);
}

/* ─── Offer card (utilisé dans listing /benevolat + /profil/mes-offres) ──── */
.offer-card {
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    box-shadow: 6px 6px 0 var(--civ-primary);  /* offset cobalt (vs event-card = vermillon) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: var(--civ-text-primary);
    transition: transform var(--civ-transition-base), box-shadow var(--civ-transition-base);
}
.offer-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 var(--civ-primary);
    color: var(--civ-text-primary);
    text-decoration: none;
}
.offer-card__image {
    aspect-ratio: 4 / 3;
    border-bottom: 3px solid var(--civ-border-strong);
    background: var(--civ-bg-raised);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--civ-text-primary);
    font-family: var(--civ-ff-display);
    font-weight: var(--civ-fw-bold);
    text-align: center;
    padding: var(--civ-sp-3);
    position: relative;
}
.offer-card__body {
    padding: var(--civ-sp-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--civ-sp-3);
}
.offer-card__title {
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xl);
    font-weight: var(--civ-fw-bold);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--civ-text-primary);
}
.offer-card__lead {
    font-size: var(--civ-fs-sm);
    color: var(--civ-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.offer-card__meta {
    font-size: var(--civ-fs-sm);
    color: var(--civ-text-muted);
    font-weight: var(--civ-fw-medium);
    margin: 0;
    margin-top: auto;
    padding-top: var(--civ-sp-4);
    border-top: 2px dashed var(--civ-border-strong);
    line-height: 1.5;
}
.offer-card__meta strong {
    color: var(--civ-text-primary);
    font-weight: var(--civ-fw-semibold);
}
.offer-card__remote-badge {
    position: absolute;
    top: var(--civ-sp-3);
    right: var(--civ-sp-3);
    background: var(--civ-bg-card);
    color: var(--civ-text-primary);
    border: 2px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    padding: 4px 12px;
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xs);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Application card (dashboard candidatures organizer + candidat) ──── */
.application-card {
    background: var(--civ-bg-card);
    border: 3px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-md);
    box-shadow: 4px 4px 0 var(--civ-primary);
    padding: var(--civ-sp-5);
    margin-bottom: var(--civ-sp-4);
}
.application-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--civ-sp-4);
    margin-bottom: var(--civ-sp-4);
}
.application-card__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--civ-border-strong);
    background: var(--civ-bg-raised);
    overflow: hidden;
}
.application-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.application-card__title {
    margin: 0 0 var(--civ-sp-1);
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-lg);
    font-weight: var(--civ-fw-bold);
    letter-spacing: -0.02em;
}
.application-card__meta {
    font-size: var(--civ-fs-sm);
    color: var(--civ-text-muted);
    margin: 0;
}
.application-card__message {
    background: var(--civ-bg-page);
    border: 2px solid var(--civ-border-strong);
    border-left-width: 6px;
    border-left-color: var(--civ-accent);
    border-radius: var(--civ-radius-sm);
    padding: var(--civ-sp-4);
    margin-bottom: var(--civ-sp-4);
    font-size: var(--civ-fs-sm);
    line-height: 1.6;
    white-space: pre-wrap;
}
.application-card__actions {
    display: flex;
    gap: var(--civ-sp-3);
    flex-wrap: wrap;
}

/* ─── Badges status candidature (réutilise .badge--*) ──── */
.badge--application-pending   { background: var(--civ-warning); color: var(--civ-text-on-dark); }
.badge--application-accepted  { background: var(--civ-success); color: var(--civ-text-on-dark); }
.badge--application-rejected  { background: var(--civ-error);   color: var(--civ-text-on-dark); }
.badge--application-withdrawn { background: var(--civ-bg-raised); color: var(--civ-text-muted); }

/* ─── Badges (pills uppercase + border 2px noir) ────────────── */
.badge {
    display: inline-block;
    padding: 5px 14px;
    font-family: var(--civ-ff-display);
    font-size: var(--civ-fs-xs);
    font-weight: var(--civ-fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
    border: 2px solid var(--civ-border-strong);
    border-radius: var(--civ-radius-pill);
    background: var(--civ-bg-page);
    color: var(--civ-text-primary);
}
.badge--primary {
    background: var(--civ-primary);
    color: var(--civ-text-on-dark);
}
.badge--accent {
    background: var(--civ-accent);
    color: var(--civ-text-on-dark);
}
.badge--neutral {
    background: var(--civ-bg-page);
    color: var(--civ-text-primary);
}
.badge--success {
    background: var(--civ-success);
    color: var(--civ-text-on-dark);
}
.badge--warning {
    background: var(--civ-warning);
    color: var(--civ-text-on-dark);
}


/* ─── Utilitaires ──────────────────────────────────────────── */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-muted  { color: var(--civ-text-muted); }
.text-error  { color: var(--civ-error); font-weight: var(--civ-fw-bold); }
.text-success{ color: var(--civ-success); font-weight: var(--civ-fw-bold); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--civ-sp-2); }
.mt-4 { margin-top: var(--civ-sp-4); }
.mt-5 { margin-top: var(--civ-sp-5); }
.mb-4 { margin-bottom: var(--civ-sp-4); }
.mb-5 { margin-bottom: var(--civ-sp-5); }
.mb-6 { margin-bottom: var(--civ-sp-6); }

.hidden { display: none !important; }