/* Styles dédiés à l'overlay de chargement (extraits de style.css) */

.loading-overlay {
  position: fixed;
  inset: 0;
  /* iOS Safari: éviter les "bandes" liées au viewport dynamique */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  /* Fond "marque" (non translucide) : halo léger basé sur --brand */
  background-color: var(--bg, #ffffff);
  background-image: radial-gradient(
    900px 620px at 50% 22%,
    color-mix(in srgb, var(--brand, #004777) 10%, var(--bg, #ffffff) 90%) 0%,
    var(--bg, #ffffff) 62%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647 !important;
  opacity: 1;
  visibility: visible;
  /* Fondu de sortie/entrée (piloté par overlay.js via .is-closing / .is-open) */
  transition: opacity 0.35s ease;
}
/* Important:
   On NE fade PAS l'overlay à l'entrée, sinon on voit le fond de page derrière.
   On laisse donc l'overlay (fond blanc / halo) visible immédiatement,
   et on anime uniquement le "carton" .loading-content (voir plus bas). */
.loading-overlay.te-anim { opacity: 1; }

.loading-content {
  /* Ancre de la pastille d'environnement en coin (Option A, 2026-07-21). */
  position: relative;
  background: var(--surface);
  color: var(--text);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  /* Hauteur minimale pour stabiliser le modale pendant le chargement du logo dynamique */
  min-height: 320px;
  max-width: 400px;
  width: 90%;
}

/* === Cinématique apparition/disparition (pilotée par overlay.js) ===
   - S'applique uniquement si la classe .te-anim est présente.
   - Évite de "casser" les pages qui n'utilisent pas overlay.js. */
.loading-overlay.te-anim .loading-content {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  /* Animation du "carton" (un peu plus longue que l'ancienne) */
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform, opacity;
}
.loading-overlay.te-anim.is-open .loading-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.loading-overlay.te-anim.is-closing {
  opacity: 0;
  pointer-events: none;
}
.loading-overlay.te-anim.is-closing .loading-content {
  opacity: 0;
  transform: translateY(6px) scale(0.985);
}

/* Réserve immédiatement l'espace du logo pour éviter le "saut" du texte
   avant que l'écrin ne soit injecté par loading-overlay-ecrin.js. */
#loading-overlay:not(.te-ecrin-mounted) .loading-content::before {
  content: "";
  display: block;
  width: var(--te-ecrin-size, 108px);
  height: var(--te-ecrin-size, 108px);
  margin: 6px auto;
}

/* Logo dans l'overlay de chargement */
.loading-logo {
  width: 144px;
  height: 144px;
  display: block;
  margin: 4px auto 20px auto;
  border-radius: 12px;
  image-rendering: auto;
  filter: none;
  background: none;
  -webkit-mask: none;
          mask: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Masquer l'ancien logo masqué SVG pendant le lock initial pour éviter le flash */
html.overlay-lock .loading-logo { display: none !important; }

/* Espacement du spinner dans l’overlay */
.loading-content .loading-spinner {
  margin: 24px auto;
}

/* .loading-title est stylé dans titles.css (base) ; typo sobre « Option A »
   surchargée dans la section « Carte raffinée (2026-07-21) » en fin de fichier. */
.loading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Badge d'environnement — pastille de coin (Option A, 2026-07-21).
   Petite pastille discrète en haut à droite de la carte .loading-content
   (position absolue : aucun impact sur la mise en page — en production le
   badge n'est pas injecté et la carte reste équilibrée telle quelle).
   Classe utilisée UNIQUEMENT dans l'overlay de chargement (injection par
   scripts/overlay.js) : la navbar et le footer ont leurs propres classes
   (navbar-environment-badge / footbar-environment-badge), non touchées ici. */
.loading-environment-badge {
  --te-env-badge-color: #334155;
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--te-env-badge-color);
  background: color-mix(in srgb, var(--te-env-badge-color) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--te-env-badge-color) 26%, transparent);
  opacity: 0.92;
}

.loading-environment-badge--scope-local::before {
  content: "";
  width: 0.72em;
  height: 0.52em;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-shadow: 0 0.18em 0 -0.08em currentColor;
  opacity: 0.95;
}

.loading-environment-badge--scope-online::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19'/%3E%3Cpath d='M12 2.5c2.6 2.6 4 5.8 4 9.5s-1.4 6.9-4 9.5c-2.6-2.6-4-5.8-4-9.5s1.4-6.9 4-9.5z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19'/%3E%3Cpath d='M12 2.5c2.6 2.6 4 5.8 4 9.5s-1.4 6.9-4 9.5c-2.6-2.6-4-5.8-4-9.5s1.4-6.9 4-9.5z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.95;
}

/* Teinte par environnement — le texte, le fond et le bord tintés de la
   pastille en découlent (voir la règle de base ci-dessus). */
.loading-environment-badge--development {
  --te-env-badge-color: #5b21b6;
}

.loading-environment-badge--staging {
  --te-env-badge-color: #b45309;
}

.loading-environment-badge--local {
  --te-env-badge-color: #334155;
}

.loading-environment-badge--production {
  --te-env-badge-color: #991b1b;
}

/* Thème sombre : teintes éclaircies pour rester lisibles sur la surface
   sombre (mêmes hooks .theme-dark / .theme-system que dark-theme.css). */
:root.theme-dark .loading-environment-badge--development {
  --te-env-badge-color: #c4b5fd;
}

:root.theme-dark .loading-environment-badge--staging {
  --te-env-badge-color: #fbbf24;
}

:root.theme-dark .loading-environment-badge--local {
  --te-env-badge-color: #cbd5e1;
}

:root.theme-dark .loading-environment-badge--production {
  --te-env-badge-color: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  :root.theme-system .loading-environment-badge--development {
    --te-env-badge-color: #c4b5fd;
  }

  :root.theme-system .loading-environment-badge--staging {
    --te-env-badge-color: #fbbf24;
  }

  :root.theme-system .loading-environment-badge--local {
    --te-env-badge-color: #cbd5e1;
  }

  :root.theme-system .loading-environment-badge--production {
    --te-env-badge-color: #fca5a5;
  }
}

.loading-subtitle {
  color: var(--muted);
  font-size: 1rem;
}

/* Masquer l'overlay de chargement */
.loading-overlay.hidden { display: none; }

/* Global lock to centralize overlay control: while .overlay-lock is on <html>,
   always force the overlay to remain visible regardless of other scripts */
/* Force visibility of overlay during lock even if inline styles set display:none */
html.overlay-lock #loading-overlay { display: flex !important; visibility: visible !important; }
html.overlay-lock body #loading-overlay { display: flex !important; visibility: visible !important; }
html.overlay-lock #loading-overlay.hidden { display: flex !important; visibility: visible !important; }

/* iOS Safari (barre d'état): harmoniser le fond derrière la zone "heure"
   (la status bar n'est pas recouvrable par le DOM en mode navigateur). */
html.overlay-lock,
html.overlay-lock body {
  background: var(--bg, #ffffff) !important;
}

/* After lock is removed, .hidden takes precedence normally */

/* Mobile */
@media (max-width: 768px) {
  .loading-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important; /* fallback */
    min-height: 100vh !important;
    z-index: 2147483647 !important;
    background: var(--bg) !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
  }
  @supports (height: 100dvh) {
    .loading-overlay { height: 100dvh !important; }
  }
  .loading-content {
    width: 90% !important;
    max-width: 350px !important;
    /* Conserver une taille stable aussi sur mobile */
    min-height: 280px !important;
    padding: 1.5rem !important;
  }
}


/* Verrou global d'interaction pendant le chargement initial */
.app-locked * { pointer-events: none !important; }
.app-locked #loading-overlay, .app-locked #loading-overlay * { pointer-events: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .loading-overlay,
  .loading-overlay.te-anim .loading-content {
    transition: none !important;
  }
}

/* [2026-10-10, QG] Fondu de départ vers une autre page (scripts/voile-navigation.js) : la page qu'on quitte
   s'estompe vers le fond, sans carte de chargement ; la carte n'apparaît qu'une fois, sur la page d'arrivée.
   Remplace le voile du 09/10 (carte réaffichée au départ), qui faisait voir « deux overlays » sur la prod.
   Posé dès le clic, 0,2 s, jusqu'au fond plein : la page d'arrivée s'ouvre sur ce même fond, sa carte
   apparaissant en fondu par-dessus (QG, 10/10/2026, sur un premier réglage à 60 % : « on dirait le fondu
   se fait mais qu'à moitié »). La page ne part qu'une fois le fondu fini
   (voile-navigation.js, NAVIGATION_FONDU_MS = 200, QG 11/10/2026) : garder les deux durées égales. Sur écran
   tactile (`te-depart-fondu-tactile`), le fondu commence à moitié voilé, pour que la première image peinte le
   montre (sur iPhone, la page quittée peut cesser de se repeindre tôt). Les clics sont bloqués par `app-locked`, pas par ce
   calque. Pas de fondu de sortie : le retrait (retour arrière, filet) reste sec. */
@keyframes teDepartFondu {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes teDepartFonduTactile {
  from { opacity: 0.5; }
  to { opacity: 1; }
}
html.te-depart-fondu::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: var(--bg, #ffffff);
  opacity: 1;
  pointer-events: none;
  animation: teDepartFondu 0.2s ease-out both;
}
html.te-depart-fondu.te-depart-fondu-tactile::after {
  animation-name: teDepartFonduTactile;
}
@media (prefers-reduced-motion: reduce) {
  html.te-depart-fondu::after {
    animation: none;
  }
}

/* ==========================================================================
   Écrin de chargement dans l'overlay (2026-07-21)
   Le logo Time-ECOS (sablier) est décomposé en 2 moitiés SVG (les 2 paths
   pleins de logo.svg, fill="currentColor") injectées par
   scripts/loading-overlay-ecrin.js dans .loading-content, à la place du
   spinner. Les moitiés s'écartent à l'affichage de l'overlay, accueillent le
   logo de l'organisation au centre, puis se réassemblent juste avant le fondu
   de sortie (hook dans scripts/overlay.js). La chorégraphie est pilotée en
   Web Animations API ; ici : mise en page, états de base et thèmes.
   Remplace l'ancien brand-spinner.js (désimplémenté le 2026-07-21, styles
   supprimés). Même encombrement que l'espace réservé par ::before (108px) :
   pas de saut de mise en page à l'injection.
   ========================================================================== */

/* Une fois l'écrin monté : le spinner et l'éventuel ancien logo s'effacent
   (le titre et le sous-titre du carton sont conservés). */
#loading-overlay.te-ecrin-mounted .loading-spinner,
#loading-overlay.te-ecrin-mounted .loading-logo {
  display: none !important;
}

.te-ecrin {
  position: relative;
  width: var(--te-ecrin-size, 108px);
  height: var(--te-ecrin-size, 108px);
  margin: 6px auto;
  color: #02476e; /* couleur exacte du logo (paths currentColor) */
  filter: drop-shadow(0 8px 14px rgba(0, 71, 119, 0.1));
}

.te-ecrin-half {
  position: absolute;
  inset: 0;
  will-change: transform, opacity, filter;
}

.te-ecrin-half svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Emplacement central du logo de l'organisation — cercle ≈ 68 % du logo
   (agrandi le 2026-07-22, avec l'ouverture accélérée ; historique : 48 % à
   la création, 60 % le 2026-07-21 « Option A — carte raffinée ». Ne pas
   dépasser ~70 % : au-delà, les moitiés du sablier disparaissent derrière le
   cercle). Opacité 0 au repos : révélé en fondu + scale par le JS pendant
   l'ouverture. */
.te-ecrin-org {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E3ECF2);
  box-shadow: 0 6px 18px rgba(2, 44, 78, 0.16);
  opacity: 0;
}

.te-ecrin-org-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
  box-sizing: border-box;
}

.te-ecrin-org--initials {
  background: var(--brand, #004777);
}

.te-ecrin-org-initials {
  color: #fff;
  /* Proportionné au cercle agrandi à 68 % (2026-07-22 — avant : 1.3rem à
     60 %, 1.05rem à 48 %). */
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.te-ecrin-org-img.hidden,
.te-ecrin-org-initials.hidden {
  display: none !important;
}

/* Accessibilité : les mouvements pilotés en JS sont remplacés par des fondus
   simples (matchMedia côté script) ; ici on relâche juste le will-change. */
@media (prefers-reduced-motion: reduce) {
  .te-ecrin-half {
    will-change: auto;
  }
}

/* Thème sombre : logo en blanc, cercle org sur la surface sombre du thème
   (mêmes hooks .theme-dark / .theme-system que dark-theme.css, la variante
   système étant conditionnée aux préférences du navigateur). */
:root.theme-dark .te-ecrin {
  color: #ffffff;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

:root.theme-dark .te-ecrin-org {
  background: var(--surface, #1f2937);
  border-color: var(--line, #374151);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

:root.theme-dark .te-ecrin-org--initials {
  background: color-mix(in srgb, var(--brand, #004777) 60%, #000 40%);
}

@media (prefers-color-scheme: dark) {
  :root.theme-system .te-ecrin {
    color: #ffffff;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  }

  :root.theme-system .te-ecrin-org {
    background: var(--surface, #1f2937);
    border-color: var(--line, #374151);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }

  :root.theme-system .te-ecrin-org--initials {
    background: color-mix(in srgb, var(--brand, #004777) 60%, #000 40%);
  }
}

/* ==========================================================================
   Carte raffinée — Option A (2026-07-21)
   Refonte sobre de la carte de chargement : titre « Chargement » en typo
   modérée, et fine ligne de progression indéterminée sous le sous-titre
   (élément .te-ecrin-progress injecté par scripts/loading-overlay-ecrin.js —
   le HTML des pages ne change pas). La pastille d'environnement en coin et
   le cercle org agrandi à 60 % sont traités dans leurs sections respectives
   ci-dessus (mêmes date et chantier).
   ========================================================================== */

/* Titre sobre : surcharge la base de titles.css (1.5rem bold), uniquement
   dans l'overlay de chargement. */
#loading-overlay .loading-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Fine ligne de progression indéterminée : piste neutre discrète, segment
   bleu marine de la marque qui fait la navette (~1.4 s, ease-in-out). */
.te-ecrin-progress {
  position: relative;
  width: 130px;
  height: 3px;
  margin: 18px auto 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text, #1f2937) 10%, transparent);
}

.te-ecrin-progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  border-radius: 999px;
  background: var(--brand, #004777);
  animation: teEcrinProgressShuttle 1.4s ease-in-out infinite;
}

/* Navette : translateX max = (100 − 36) / 36 ≈ 178 % de la largeur du segment
   (le segment touche l'extrémité droite de la piste à mi-boucle). */
@keyframes teEcrinProgressShuttle {
  0% { transform: translateX(0%); }
  50% { transform: translateX(178%); }
  100% { transform: translateX(0%); }
}

@keyframes teEcrinProgressPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Accessibilité : pas de navette — segment centré, simple pulsation d'opacité. */
@media (prefers-reduced-motion: reduce) {
  .te-ecrin-progress-bar {
    left: 32%;
    animation: teEcrinProgressPulse 1.8s ease-in-out infinite;
  }
}

/* Thème sombre : piste et segment lisibles sur la surface sombre. */
:root.theme-dark .te-ecrin-progress {
  background: rgba(255, 255, 255, 0.14);
}

:root.theme-dark .te-ecrin-progress-bar {
  background: color-mix(in srgb, var(--brand, #004777) 45%, #fff 55%);
}

@media (prefers-color-scheme: dark) {
  :root.theme-system .te-ecrin-progress {
    background: rgba(255, 255, 255, 0.14);
  }

  :root.theme-system .te-ecrin-progress-bar {
    background: color-mix(in srgb, var(--brand, #004777) 45%, #fff 55%);
  }
}

/* ==========================================================================
   Carte compacte (2026-07-21, validé)
   Quand l'écrin est monté, la carte s'ajuste à son contenu : plus de grand
   vide sous la ligne de progression, rythme vertical resserré, titre en
   couleur de texte neutre (le bleu attirait l'œil sur le mot le moins
   informatif). Le sous-titre (ligne de statut) est masqué : les scripts des
   pages continuent de l'alimenter sans erreur, et il réapparaît en secours
   si l'écrin ne monte pas. Anneau d'assise couleur carte autour du cercle
   org, pour l'asseoir sur le sablier.
   ========================================================================== */
#loading-overlay.te-ecrin-mounted .loading-content {
  min-height: 0;
  max-width: 340px;
  padding: 2.4rem 1.75rem 1.9rem;
}

#loading-overlay.te-ecrin-mounted .loading-subtitle {
  display: none;
}

#loading-overlay.te-ecrin-mounted .loading-title {
  color: var(--text, #1f2937);
  margin: 1.05rem 0 0;
}

#loading-overlay.te-ecrin-mounted .te-ecrin-progress {
  margin: 14px auto 2px;
}

#loading-overlay.te-ecrin-mounted .te-ecrin-org {
  box-shadow: 0 0 0 6px var(--surface, #fff), 0 6px 18px rgba(2, 44, 78, 0.16);
}

/* Le bloc mobile plus haut fige la carte avec des !important : on les
   neutralise uniquement quand l'écrin est monté. */
@media (max-width: 768px) {
  #loading-overlay.te-ecrin-mounted .loading-content {
    min-height: 0 !important;
    padding: 2rem 1.25rem 1.6rem !important;
  }
}

/* Anneau d'assise en thème sombre : même couleur que la carte sombre. */
:root.theme-dark #loading-overlay.te-ecrin-mounted .te-ecrin-org {
  box-shadow: 0 0 0 6px var(--surface, #1f2937), 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root.theme-system #loading-overlay.te-ecrin-mounted .te-ecrin-org {
    box-shadow: 0 0 0 6px var(--surface, #1f2937), 0 6px 18px rgba(0, 0, 0, 0.35);
  }
}