/* dash_app/ — styles globaux. Reprend l'animation de chargement de page déjà
   validée sur les 3 pages Mantine pilotes (frontend/shared/polish.css),
   adaptée en CSS pur (pas de composant React ici, Dash sert ce fichier tel
   quel à toutes les pages). */

/* Police WWF : leur police de titre maison ("WWF") est un asset de marque
   sous licence, distribué en téléchargement réservé sur
   wwfbrand.panda.org — pas intégrable ici sans accès autorisé à ce
   nuancier de polices. Leur propre feuille de style déclare "Open Sans"
   comme police de repli pour tout le reste du site ; c'est elle qu'on
   charge, une police ouverte authentiquement issue de la même pile WWF
   plutôt qu'un choix arbitraire (voir dash_app/theme.py). */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

body {
  /* Gainsboro (demandé explicitement) — neutre gris clair plutôt que le
     blanc cassé chaud précédent. */
  background: gainsboro;
}

/* Barre latérale — dégradé vertical subtil, retravaillé pour cohabiter avec
   le fond gainsboro (gris neutre) : un blanc -> vert sauge très désaturé
   (mélange de la rampe de marque et d'un gris proche de gainsboro), plutôt
   que le vert menthe pâle précédent qui tranchait trop fort sur un fond
   gris neutre. Reste assez clair pour ne jamais compromettre la lisibilité
   du texte de nav (sombre) ni la couleur des liens actifs (vert plein). */
.cibel-navbar {
  background: linear-gradient(180deg, #ffffff 0%, #eef1ec 55%, #d9e2d6 100%);
  transition: width 180ms ease;
}

/* Rail compact à icônes (barre repliée, demande explicite — remplace
   l'ancien comportement "repliée = masquée") : les liens n'ont plus de
   libellé (voir shell.py::_rail_link), seule leur icône reste ; ces deux
   règles évitent qu'elle ne s'étire pour occuper toute la largeur du
   NavLink comme le ferait un item normal avec libellé. */
.cibel-navbar-rail .mantine-NavLink-root {
  width: 44px;
}
.cibel-navbar-rail .mantine-NavLink-body {
  flex: none;
}

/* En-tête applicatif persistant (dash_app/layout/shell.py::build_header,
   présent sur TOUTE page authentifiée hors connexion/contexte) — verre
   dépoli collé au défilement, même esprit que `.cibel-cover-topbar` (page
   de contexte) : le lever le plus large pour un rendu "premium" sur
   l'ensemble de l'appli, puisqu'un seul composant est visible partout. */
.cibel-app-header {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(23, 20, 21, 0.05);
}

/* Ascenseur fin et discret, cohérent sur tout navigateur Chromium/Firefox —
   remplace l'ascenseur brut du système, plus large et sans rapport avec la
   palette, sur les longues listes/tableaux (très fréquents dans cette
   appli). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--mantine-color-gray-4) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--mantine-color-gray-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--mantine-color-gray-5);
}

/* Focus clavier visible et cohérent avec la couleur de marque, partout —
   remplace le contour bleu par défaut du navigateur (jurait avec le reste
   de la palette) tout en restant conforme (anneau net, jamais supprimé). */
:focus-visible {
  outline: 2px solid var(--mantine-color-cibelGreen-5);
  outline-offset: 2px;
}

/* Lignes cliquables (ex: indicateur du Cadre de résultats, ouvre le détail
   d'évolution) — affordance visuelle minimale : curseur + léger surlignage
   au survol, pour signaler l'interactivité sans dupliquer le style de
   sélection actif déjà utilisé ailleurs. */
.cibel-clickable-row {
  cursor: pointer;
  transition: background-color 120ms ease;
  border-radius: var(--mantine-radius-sm);
}
.cibel-clickable-row:hover {
  background-color: var(--mantine-color-cibelGreen-0);
}

/* Le texte BLANC par défaut de Mantine sur tout composant `variant="filled"`
   est correct avec le vert de marque actuel (#15803d, cran 700) : ≈5:1,
   au-dessus du seuil AA texte normal (4.5:1) — pas de correctif nécessaire
   ici. (Un forçage en noir existait quand la couleur de marque était
   l'orange #F15400 — voir git log — retiré : noir sur ce vert ne passe
   plus que ≈4.2:1, sous le seuil, il serait maintenant contre-productif.) */

@keyframes cibel-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cibel-fade-in {
  animation: cibel-fade-in 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cibel-fade-in {
    animation: none;
  }
}

/* Page de connexion — fond animé (dérive lente de deux halos radiaux) +
   révélation échelonnée des éléments de la carte + respiration de l'icône
   feuille, pour une entrée plus travaillée qu'un simple fondu ponctuel. */
@keyframes cibel-aurora {
  0% {
    background-position: 0% 0%, 100% 100%, 0 0;
  }
  100% {
    background-position: 25% 30%, 75% 65%, 0 0;
  }
}

.cibel-login-bg {
  background:
    radial-gradient(circle at 20% 15%, rgba(21, 128, 61, 0.12), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(22, 163, 74, 0.09), transparent 46%),
    linear-gradient(180deg, #fbfdf9 0%, #F1F6F1 100%);
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: cibel-aurora 16s ease-in-out infinite alternate;
}

.cibel-login-stagger > * {
  opacity: 0;
  animation: cibel-fade-in 480ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.cibel-login-stagger > *:nth-child(1) { animation-delay: 60ms; }
.cibel-login-stagger > *:nth-child(2) { animation-delay: 140ms; }
.cibel-login-stagger > *:nth-child(3) { animation-delay: 220ms; }
.cibel-login-stagger > *:nth-child(4) { animation-delay: 300ms; }
.cibel-login-stagger > *:nth-child(5) { animation-delay: 380ms; }
.cibel-login-stagger > *:nth-child(6) { animation-delay: 460ms; }

@keyframes cibel-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.cibel-login-icon {
  display: inline-flex;
  animation: cibel-icon-pulse 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cibel-login-bg {
    animation: none;
  }
  .cibel-login-stagger > * {
    opacity: 1;
    animation: none;
  }
  .cibel-login-icon {
    animation: none;
  }
}

/* Page de garde (choix du contexte de travail, dash_app/pages/
   scope_picker.py) — rendue hors AppShell (pas de nav/en-tête applicatif,
   demande explicite). Fond BLANC dominant (demande explicite) avec deux
   halos verts très légers, même esprit que .cibel-login-bg mais beaucoup
   plus discret pour rester un blanc net. */
.cibel-cover {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 6%, rgba(21, 128, 61, 0.05), transparent 36%),
    radial-gradient(circle at 92% 90%, rgba(34, 197, 94, 0.05), transparent 40%),
    #ffffff;
}

/* Bandeau du haut collé en survol de défilement (beaucoup de tuiles
   peuvent s'accumuler plus bas une fois plusieurs pays sélectionnés) —
   verre dépoli plutôt qu'un fond plein, pour rester cohérent avec le fond
   blanc dominant de la page tout en restant lisible par-dessus le contenu
   qui défile en dessous. */
.cibel-cover-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23, 20, 21, 0.06);
}

/* Drapeau-pays cliquable (ancre vers la section du pays, voir _flag_chip) —
   cercle blanc en relief, effet de survol "flottant" cohérent avec les
   autres élévations au survol de l'appli (.cibel-clickable-row,
   .cibel-cover-tile ci-dessous). */
.cibel-flag-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.cibel-flag-chip-circle {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid var(--mantine-color-gray-2);
  box-shadow: 0 1px 3px rgba(23, 20, 21, 0.06), 0 6px 16px rgba(23, 20, 21, 0.07);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease;
}

.cibel-flag-chip:hover .cibel-flag-chip-circle {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--mantine-shadow-lg);
  border-color: var(--mantine-color-cibelGreen-4);
}

/* Drapeau coché dans la sélection multi-pays (dash_app/pages/scope_picker.py
   — Partie F) : anneau vert plein, permanent (pas seulement au survol),
   pour rester lisible une fois la souris repartie. */
.cibel-flag-chip-selected .cibel-flag-chip-circle {
  border-color: var(--mantine-color-cibelGreen-6);
  border-width: 3px;
  box-shadow: var(--mantine-shadow-md), 0 0 0 3px var(--mantine-color-cibelGreen-1);
}

/* Pastille de confirmation (coche) sur un drapeau sélectionné — renforce
   l'anneau vert d'un signal non ambigu, positionné en superposition plutôt
   que dans le flux pour ne jamais décaler le libellé pays en dessous. */
.cibel-flag-chip-circle-wrap {
  position: relative;
}

.cibel-flag-chip-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--mantine-color-cibelGreen-6);
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mantine-shadow-sm);
  animation: cibel-badge-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cibel-badge-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* Fine séparation sous l'en-tête de chaque section pays / "Projets non
   classés" — repère visuel entre sections quand plusieurs pays sont
   sélectionnés d'un coup, sans introduire de nouveau bloc de couleur sur
   un fond volontairement blanc. */
.cibel-cover-section-header {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mantine-color-gray-2);
}

/* Cartes de projet/pays de la page de garde — élévation ambiante déjà au
   repos (pas seulement au survol), plus amples et plus "flottantes" au
   survol que .cibel-scope-tile d'origine, pour porter le ton "premium"
   demandé. Le fond blanc reste la référence (voir .cibel-cover) : la
   profondeur vient de l'ombre, pas d'un aplat de couleur. */
.cibel-cover-tile {
  border-radius: var(--mantine-radius-lg);
  border: 1px solid var(--mantine-color-gray-2);
  background: #ffffff;
  padding: var(--mantine-spacing-md);
  box-shadow: 0 1px 2px rgba(23, 20, 21, 0.04);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease, border-color 180ms ease;
}

.cibel-cover-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--mantine-shadow-md);
  border-color: var(--mantine-color-cibelGreen-4);
}

/* Dégradé de marque (pas un aplat) pour la tuile "Tous les projets" et le
   CTA "Voir tous les projets" — même paire de crans verts que le reste de
   l'identité (theme.py), jamais un gradient générique hors palette. */
.cibel-cover-tile-filled {
  border: none;
  background: linear-gradient(135deg, var(--mantine-color-cibelGreen-6) 0%, var(--mantine-color-cibelGreen-8) 100%);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.22);
}

.cibel-cover-tile-filled:hover {
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.28);
}

/* Flèche révélée au survol d'une tuile — affordance "cliquable" sans
   accent permanent (voir _project_tile). */
.cibel-tile-arrow {
  display: flex;
  align-items: center;
  color: var(--mantine-color-gray-4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cibel-cover-tile:hover .cibel-tile-arrow {
  opacity: 1;
  transform: translateX(0);
}

.cibel-cover-cta {
  display: inline-flex;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mantine-color-cibelGreen-6) 0%, var(--mantine-color-cibelGreen-8) 100%);
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.22);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease;
}

.cibel-cover-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.28);
}

/* Barre de confirmation flottante (sélection multi-pays) — pilule blanche
   en relief plutôt qu'un simple groupe de texte + bouton posé sur le fond
   de page, pour rester lisible et se démarquer une fois plusieurs tuiles
   de pays affichées juste en dessous. */
.cibel-confirm-bar {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--mantine-color-gray-2);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  box-shadow: var(--mantine-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .cibel-tile-arrow {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cibel-flag-chip-circle,
  .cibel-cover-tile,
  .cibel-cover-cta {
    transition: none;
  }
  .cibel-flag-chip-badge {
    animation: none;
  }
}