/* ==========================================================================
   Wiinia — feuille de styles applicative
   Tailwind (CDN) gère les utilitaires ; ce fichier regroupe les styles
   personnalisés réutilisables qui étaient auparavant écrits en ligne
   (attributs style="") ou dans des blocs <style> inline.
   ========================================================================== */

/* --- Police auto-hébergée ------------------------------------------------
   Plus Jakarta Sans servie depuis NOTRE serveur depuis le 2026-08-10, au lieu
   de fonts.googleapis.com.

   Ce que ça retire : une origine externe de plus (donc un tiers qui voyait
   l'IP de chaque visiteur), et surtout 751 ms de BLOCAGE DU RENDU mesurés par
   PageSpeed — la feuille de Google est une ressource bloquante qu'il faut
   télécharger AVANT de découvrir seulement quels fichiers de police charger.
   Ici les `@font-face` sont dans une feuille qu'on servait déjà.

   ⚠️ C'est une police VARIABLE : un seul fichier couvre les graisses 400 à 800
   (d'où `font-weight: 400 800`, syntaxe des polices variables). Ne pas le
   remplacer par cinq fichiers statiques — ce serait cinq fois le poids.

   ⚠️ Seuls `latin` et `latin-ext` sont embarqués. Google servait aussi
   cyrillique et vietnamien : du poids mort pour un site francophone. La
   `unicode-range` fait le tri côté navigateur — `latin-ext` n'est même
   téléchargé que si un caractère de sa plage apparaît réellement.

   ⚠️ Les `url()` sont RELATIVES, à dessein : `ManifestStaticFilesStorage` les
   réécrit vers les noms hachés au `collectstatic`. Une URL absolue ou un
   `{% static %}` (impossible ici, ce fichier n'est pas un gabarit) casserait
   ce mécanisme — et le job `prod-check` de la CI échouerait sur un fichier
   introuvable, ce qui est le comportement voulu.
   ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-v12-latin.7660bd9909fb.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                   U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-v12-latin-ext.341687eeeb6a.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Global ------------------------------------------------------------- */
[x-cloak] { display: none !important; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Indicateur de chargement HTMX (affiché pendant une requête en cours). */
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* --- Loaders (Étape 2) -------------------------------------------------- */
/* Barre de progression globale en haut de page, pilotée par app.js pour
   TOUTE requête HTMX (filtres, pagination, recherche, favori, message…). */
#wiinia-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: #10b981;
    z-index: 9999;
    opacity: 0;
    transition: width 200ms ease, opacity 250ms ease;
    pointer-events: none;
}
#wiinia-progress.is-active { opacity: 1; }

/* Skeleton « shimmer » — placeholder animé pendant le chargement d'une image
   ou d'un bloc. Se met en place via la classe .skeleton. */
@keyframes wiinia-shimmer { 100% { transform: translateX(100%); } }
.skeleton { position: relative; overflow: hidden; background: #eef1f0; }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: wiinia-shimmer 1.4s infinite;
}

/* Fondu d'apparition des images. IMPORTANT : animation auto-suffisante qui
   FINIT toujours à opacity:1 (fill-mode both) — on ne dépend PAS de JS pour
   révéler l'image, sinon une erreur de chargement la laisserait invisible. */
@keyframes wiinia-fadein { from { opacity: 0.25; } to { opacity: 1; } }
.img-reveal { animation: wiinia-fadein 0.4s ease both; }

/* Boutons HTMX « occupés » : pendant la requête, on grise + curseur attente. */
.htmx-request.btn-busy,
.htmx-request .btn-busy { opacity: 0.55; pointer-events: none; cursor: wait; }
/* Bascule icône ↔ spinner dans un bouton pendant la requête. */
.htmx-request .busy-hide { display: none; }
.busy-spin { display: none; }
.htmx-request .busy-spin { display: inline-block; animation: wiinia-spin 0.7s linear infinite; }
@keyframes wiinia-spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   SuperAdmin — sidebar (admin/base_admin.html)
   ========================================================================== */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #94a3b8;
    transition: all 150ms;
    cursor: pointer;
    text-decoration: none;
}
.nav-item:hover { background: #1e293b; color: #f1f5f9; }
.nav-item.active {
    background: #1e293b;
    color: #f1f5f9;
    border-left: 2px solid #047857;
    padding-left: 10px;
}
.nav-item svg { flex-shrink: 0; opacity: .7; }
.nav-item.active svg { opacity: 1; color: #34d399; }

.nav-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #334155;
    padding: 4px 12px;
    margin-top: 8px;
    margin-bottom: 2px;
}
.nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: #0f2718;
    color: #34d399;
}
.nav-badge-gray {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    background: #1e293b;
    color: #64748b;
}

.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }

/* Sidebar agence — scrollbar discrète sur fond sombre */
.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* Firefox */
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* Icône de navigation (taille fixe 18px) */
.nav-icon { width: 18px; height: 18px; }

/* ==========================================================================
   Back-office agence — sidebar (manage/base_manage.html)
   ========================================================================== */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}
.sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.sidebar-link.active { color: #fff; background: #047857; }
.sidebar-link.disabled { color: rgba(255, 255, 255, 0.25); cursor: default; }
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }

.sidebar-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
    padding: 16px 12px 4px;
}

/* Menus repliables (accordéon Alpine) ----------------------------------- */
/* Le bouton parent réutilise .sidebar-link ; on neutralise les styles bouton. */
.sidebar-group-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.sidebar-group-toggle .chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    transition: transform 0.18s;
}
.sidebar-group-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* Pastille affichée sur le parent quand le groupe est replié. */
.sidebar-group-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 99px;
    background: #10b981;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
/* Quand le groupe est déplié, on masque la pastille du PARENT (le compteur
   réapparaît sur la sous-ligne Messagerie, qui est alors visible). */
.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-badge { display: none; }
.sidebar-sub {
    margin: 2px 0 2px 18px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sidebar-sublink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.15s;
}
.sidebar-sublink:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.sidebar-sublink.active { color: #fff; background: #047857; }

/* ==========================================================================
   Lien d'évitement (skip-link) — premier élément focusable des 3 layouts
   ========================================================================== */
/* Permet à un utilisateur au clavier ou au lecteur d'écran de sauter la
   navigation — jusqu'à une trentaine de liens dans la sidebar du back-office —
   pour atteindre directement le contenu.

   ⚠️ SURTOUT PAS `sr-only` ici, malgré l'idiome répandu. `sr-only` sort
   l'élément de l'écran en position absolue ; quand il reçoit le focus, le
   navigateur fait défiler le document pour l'amener dans la vue. Or le <body>
   du back-office est `overflow-hidden h-screen` : c'est <html> qui défile, et
   tout le contenu passe au-dessus du viewport — la page devient blanche. C'est
   exactement le bug déjà payé sur l'input fichier du formulaire de bien
   (cf. CLAUDE.md, « Input fichier masqué »).

   L'élément reste donc positionné, juste AU-DESSUS du viewport, et redescend
   au focus : rien à faire défiler, on est déjà en haut. */
.skip-link {
    position: absolute;
    top: -4rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: #047857;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 0.75rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ==========================================================================
   Formulaires (properties/property_form.html)
   ========================================================================== */
.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #334039;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-input,
.form-select {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s;
    outline: none;
}
.form-input:focus,
.form-select:focus {
    border-color: #047857;
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.08);
}

.card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 20px;
}
.card-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f1b16;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f5f5f5;
}

/* ── Sections de formulaire repliables (native <details>, zéro JS) ──────────
   Le formulaire de bien est long : chaque groupe est repliable pour limiter le
   scroll. `<details>` garde les champs dans le DOM même replié → ils restent
   soumis avec le formulaire. Accessible au clavier nativement. */
details.card > summary.card-title {
    cursor: pointer;
    list-style: none;                 /* retire le triangle par défaut */
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;                 /* replié : pas de gros vide sous le titre */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
details.card[open] > summary.card-title {
    margin-bottom: 16px;              /* ouvert : espace avant le contenu */
}
details.card > summary.card-title::-webkit-details-marker { display: none; }  /* Safari */
/* Chevron indicateur (pivote à l'ouverture). */
details.card > summary.card-title::after {
    content: "";
    flex: none;
    margin-left: auto;                            /* pousse le chevron à droite */
    width: 8px;
    height: 8px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(45deg) translateY(-2px);   /* chevron vers le bas */
    transition: transform 0.2s ease;
}
details.card[open] > summary.card-title::after {
    transform: rotate(-135deg) translateY(-2px); /* chevron vers le haut */
}
summary.card-title:hover { color: #047857; }
summary.card-title:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ==========================================================================
   Carte Leaflet — confinement du z-index
   --------------------------------------------------------------------------
   Leaflet pose des z-index internes ÉLEVÉS : tuiles/panes 400, contrôles
   (zoom, attribution) et popups jusqu'à 1000. Sans stacking context sur le
   conteneur, ces valeurs se comparent GLOBALEMENT → la carte passe au-dessus
   des modales de l'app (contact `z-[60]`, lightbox `z-50`). `isolation:isolate`
   crée un contexte d'empilement local : tout le sous-arbre carte reste confiné
   sous les couches applicatives. (Constaté en navigateur : modale de contact
   masquée par la carte.)
   ========================================================================== */
.leaflet-container {
    isolation: isolate;
    z-index: 0;
}

/* ==========================================================================
   Page « Qui sommes-nous » (properties/about.html) — décors statiques
   ========================================================================== */
.about-hero-bg {
    background: linear-gradient(135deg, #064e3b 0%, #047857 60%, #34d399 100%);
}
.about-hero-overlay {
    background: linear-gradient(to top, rgba(15, 27, 22, 0.85) 0%, rgba(15, 27, 22, 0.4) 60%, transparent 100%);
}
.about-radial-glow {
    background: radial-gradient(circle, #fff 0%, transparent 70%);
}
.about-cta-bg {
    background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
}
.glass-green {
    background: rgba(4, 120, 87, 0.8);
    backdrop-filter: blur(8px);
}
.glass-light {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.glass-accent {
    background: rgba(37, 211, 102, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(37, 211, 102, 0.3);
}

/* Boutons réseaux sociaux — couleurs de marque */
.brand-facebook  { background: #1877F2; color: #fff; }
.brand-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.brand-linkedin  { background: #0A66C2; color: #fff; }
.brand-tiktok    { background: #010101; color: #fff; }