/* ============================================================
   JARDIX — Variables CSS
   Couleurs, typographie, espacements
   ============================================================ */

:root {
    /* --- Couleurs Face Soleil --- */
    --soleil-bg: #F2BC6D;
    --soleil-bg-light: #faf6ee;
    --soleil-text: #1a1a1a;
    --soleil-text-secondary: #4a4a4a;
    --soleil-accent: #d4943a;
    --soleil-link: #2a6041;

    /* --- Couleurs Face Lune --- */
    --lune-bg: #0A2E1A;
    --lune-bg-light: transparent;         /* Transparent : on laisse le fond vert respirer */
    --lune-bg-card: transparent;          /* Cards transparentes avec bordure visible */
    --lune-text: #d0e8d8;                /* Texte principal clair */
    --lune-text-bright: #f0f7f2;         /* Texte fort (titres cards, inputs) */
    --lune-text-heading: #F2BC6D;
    --lune-accent: #F2BC6D;
    --lune-accent-light: #f5d78e;
    --lune-link: #F2BC6D;
    --lune-surface: #0e3a20;             /* Surface formulaires / sections (légèrement + clair que bg) */
    --lune-border: #4a8a62;              /* Bordure visible sur fond vert */
    --lune-border-light: #5da575;        /* Bordure forte (cadres sections) */

    /* --- Formulaires Lune (contraste eleve) --- */
    --lune-input-bg: rgba(0, 0, 0, 0.3);     /* Fond input : sombre semi-transparent */
    --lune-input-text: #f0f7f2;               /* Texte input : quasi blanc */
    --lune-input-border: #5da575;             /* Bordure input : bien visible */
    --lune-input-placeholder: #7ab890;        /* Placeholder */
    --lune-input-focus: #F2BC6D;
    --lune-label: #F2BC6D;                    /* Labels dores */

    /* --- Couleurs Rhizome --- */
    --rhizome-color: #5B2D6E;
    --rhizome-bg-light: #f0e6f6;

    /* --- Couleurs barre fixe --- */
    --barre-preferences: #7B5EA7;  /* violet */
    --barre-connexion: #3a8f5c;    /* vert */
    --barre-participer: #1e5631;   /* vert fonce */

    /* --- Typographie --- */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 1rem;        /* 16px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-lg: 1.25rem;       /* 20px */
    --font-size-xl: 1.5rem;        /* 24px */
    --font-size-2xl: 2rem;         /* 32px */
    --line-height: 1.6;

    /* --- Espacements --- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* --- Composants --- */
    --radius: 8px;
    --radius-lg: 12px;
    --radius-round: 50%;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
    --transition: 0.2s ease;

    /* --- WCAG --- */
    --touch-min: 44px;             /* Taille min boutons/liens */
    --focus-outline: 3px solid;
    --focus-offset: 2px;

    /* --- Layout --- */
    --content-max: 960px;
    --barre-height: 60px;
    --topbar-height: 56px;
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    min-height: 100vh;
    padding-bottom: var(--space-xl);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: color var(--transition);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: var(--focus-outline) currentColor;
    outline-offset: var(--focus-offset);
}

button, a, select, input[type="submit"] {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    cursor: pointer;
}

/* ============================================================
   Barre logo site (top)
   ============================================================ */

.site-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 90;
}

/* Groupe gauche : nav + logo */
.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Groupe droit : actions */
.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Boutons avant / arrière */
.topbar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition);
}

.face-soleil .topbar-nav-btn {
    color: var(--soleil-text);
}

.face-soleil .topbar-nav-btn:hover,
.face-soleil .topbar-nav-btn:focus {
    background: rgba(0, 0, 0, 0.08);
}

.face-lune .topbar-nav-btn {
    color: var(--lune-text);
}

.face-lune .topbar-nav-btn:hover,
.face-lune .topbar-nav-btn:focus {
    background: rgba(255, 255, 255, 0.1);
    color: var(--lune-accent);
}

.face-lune .site-topbar {
    background: rgba(10, 46, 26, 0.95);
    border-bottom-color: var(--lune-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.face-soleil .site-topbar {
    background: rgba(240, 223, 192, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.site-topbar-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    min-height: auto;
    min-width: auto;
    flex-shrink: 0;
}

.site-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    flex-shrink: 0;
    object-fit: contain;
}

.site-topbar-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.face-lune .site-topbar-title {
    color: var(--lune-accent);
}

.face-soleil .site-topbar-title {
    color: var(--soleil-text);
}

/* Navigation menu (Face Soleil) */
.site-topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-topbar-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    color: var(--soleil-text);
    text-decoration: none;
    border-radius: var(--radius);
    min-height: 40px;
    min-width: 40px;
    transition: background var(--transition);
}

.site-topbar-nav a:hover,
.site-topbar-nav a:focus {
    background: rgba(0, 0, 0, 0.08);
    color: var(--soleil-text);
}

.site-topbar-nav a.topbar-connexion,
a.topbar-connexion {
    background: var(--barre-connexion);
    color: #fff !important;
    border-radius: var(--radius);
}

.site-topbar-nav a.topbar-connexion:hover,
.site-topbar-nav a.topbar-connexion:focus,
a.topbar-connexion:hover,
a.topbar-connexion:focus {
    background: #2d7a4a;
    color: #fff !important;
}

/* Sur fond doré, le bouton Connexion garde son style vert */

/* Sous-titre Face Lune */
.site-topbar-sub {
    font-size: var(--font-size-sm);
    opacity: 0.7;
}

.face-lune .site-topbar-sub {
    color: var(--lune-text);
}

@media (max-width: 480px) {
    /* Refresh masqué sur mobile : pull-to-refresh suffit */
    #btn-refresh-page {
        display: none;
    }
    .site-topbar-nav a {
        padding: 4px;
        min-height: 36px;
        min-width: 36px;
    }
    .site-topbar-nav a svg {
        width: 20px;
        height: 20px;
    }
    .site-topbar-title {
        font-size: var(--font-size-base);
    }
    .topbar-nav-btn {
        width: 32px;
        height: 32px;
        min-height: 32px;
        min-width: 32px;
    }
    .topbar-nav-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 359px) {
    .site-topbar-nav {
        display: none;
    }
    .site-topbar-sub {
        display: none;
    }
    .site-logo {
        width: 32px;
        height: 32px;
    }
    .topbar-nav-btn {
        width: 28px;
        height: 28px;
        min-height: 28px;
        min-width: 28px;
    }
}

@media print {
    .site-topbar {
        border-bottom: 1px solid #ccc;
        background: #fff !important;
    }
    .site-topbar-title,
    .site-topbar-sub {
        color: #000 !important;
    }
    .site-topbar-nav a {
        color: #000 !important;
    }
}

/* ============================================================
   Barre fixe (commune)
   ============================================================ */

.barre-fixe {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--barre-height);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    padding: 0 var(--space-sm);
}

.barre-fixe a,
.barre-fixe button,
.barre-fixe select {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    padding: var(--space-xs) var(--space-md);
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
}

/* ============================================================
   Conteneur principal
   ============================================================ */

.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-lg);
}

/* ============================================================
   Utilitaires
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Lien d'evitement — WCAG 2.4.1 */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    z-index: 9999;
    padding: var(--space-sm) var(--space-md);
    background: #000;
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-base);
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: underline;
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
}

.skip-link:focus {
    top: 0;
    outline: var(--focus-outline) #F2BC6D;
    outline-offset: var(--focus-offset);
}

.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Affichage */
.hidden { display: none; }

/* Bouton petit */
.btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-sm);
    min-height: 36px;
}

/* Grille formulaire 2 colonnes */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 480px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Conteneur de filtres */
.filter-controls {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-sm);
}

/* Carte Leaflet */
.carte-container {
    width: 100%;
    height: 520px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-top: var(--space-md);
}

.carte-mini {
    width: 100%;
    height: 280px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Boutons filtres carte */
.carte-filtre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition);
}

.carte-filtre-intendance {
    border: 2px solid #2e7d32;
    background: #e8f5e9;
    color: #2e7d32;
}

.carte-filtre-reseau {
    border: 2px solid #559ad1;
    background: #e3f2fd;
    color: #2a6ca8; /* Contraste corrige : 5.5:1 sur #e3f2fd (WCAG AA) */
}

.carte-filtre-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.carte-filtre-intendance .carte-filtre-dot { background: #2e7d32; }
.carte-filtre-reseau .carte-filtre-dot { background: #559ad1; }

.carte-filtre:not(.active) { opacity: 0.4; }

/* Texte aide sous champ */
.form-help {
    font-size: var(--font-size-sm);
    opacity: 0.7;
    display: block;
    margin-top: 4px;
}

/* Lien externe / info small */
.text-muted {
    color: inherit;
    opacity: 0.7;
}

/* ============================================================
   Responsive — Mobile first
   ============================================================ */

/* iOS safe area (notch) — topbar */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Petit mobile (< 360px) */
@media (max-width: 359px) {
    :root {
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --font-size-2xl: 1.5rem;
    }

    .barre-fixe a,
    .barre-fixe button,
    .barre-fixe select {
        font-size: 0.7rem;
        padding: var(--space-xs) var(--space-xs);
    }

    .hub-grid {
        gap: var(--space-sm);
        padding: 0 var(--space-sm);
    }
}

/* Tablette (>= 768px) */
@media (min-width: 768px) {
    .container {
        padding: var(--space-xl) var(--space-2xl);
    }

    .barre-fixe {
        justify-content: center;
        gap: var(--space-lg);
    }

    .barre-fixe a,
    .barre-fixe button,
    .barre-fixe select {
        min-width: 120px;
    }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
    :root {
        --content-max: 1100px;
    }
}

/* Print */
@media print {
    .barre-fixe,
    #offline-banner {
        display: none !important;
    }
    body {
        padding-bottom: 0;
        background: #fff;
        color: #000;
    }
}

/* ============================================================
   Bouton TTS — dans la topbar (commun Face Soleil + Face Lune)
   ============================================================ */

#tts-fab.tts-fab--reading {
    color: #e74c3c !important;
    background: rgba(231,76,60,.12) !important;
    border-radius: var(--radius-sm, 6px);
}

#tts-fab.tts-fab--reading:hover,
#tts-fab.tts-fab--reading:focus {
    background: rgba(231,76,60,.2) !important;
}

/* Contrôles vitesse dans préférences */
.pref-tts-speeds {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}

.pref-tts-speed-btn {
    flex: 1;
    min-width: 80px;
}

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

/* ============================================================
   Hint overlay cartes Leaflet (partagé Face Soleil + Face Lune)
   Affiché par jardixMapGestures() dans app.js
   ============================================================ */
.map-gesture-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 46, 26, 0.82);   /* vert Plantain semi-transparent */
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.25s ease;
    white-space: nowrap;
    user-select: none;
}
.map-gesture-hint.visible {
    opacity: 1;
}