/* ============================================================================
   Spinner de document — petit indicateur de chargement (inchangé).
   ========================================================================== */

.doc-spinner {
    width: 64px;
    height: 64px;
    position: relative;
    animation: doc-spin 1.2s linear infinite;
}

.doc-spinner-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: doc-pulse 1.5s ease-in-out infinite;
}

@keyframes doc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes doc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.92); }
}

.doc-spinner--sm {
    width: 24px;
    height: 24px;
}

.doc-spinner--sm .doc-spinner-logo {
    animation: doc-pulse-sm 1.2s ease-in-out infinite;
}

@keyframes doc-pulse-sm {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================================
   Écran de chargement du site — armoirie du Togo figée au centre d'un rond
   parfait, entourée d'une jauge de progression et de deux anneaux qui
   tournent en sens contraires. Couleurs du site et de l'armoirie.

   Piloté par le moteur de progression de
   frontend.layouts.app :
   - .est-visible : ajouté seulement si la page tarde (> 0,35 s) ;
   - --p (0 → 1)  : progression RÉELLE, qui avive aussi halo et anneaux ;
   - .est-sortie  : « iris » qui se referme sur l'armoirie et dévoile la page.
   Tant qu'il n'est pas visible, il ne capte aucun clic (pointer-events).
   ========================================================================== */

.global-spinner-overlay {
    --p: 0;
    --cx: 50%;
    --cy: 45%;
    position: fixed;
    inset: 0;
    z-index: 2147482000;   /* au-dessus du chatbot et des bandeaux flottants */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(30, 95, 142, .09) 0%, rgba(30, 95, 142, 0) 50%),
        linear-gradient(180deg, #FFFFFF 0%, #F2F6FA 100%);
    opacity: 0;
    pointer-events: none;
    clip-path: circle(150vmax at var(--cx) var(--cy));
    transition: opacity .35s ease;
}

.global-spinner-overlay.est-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Entrée en cascade des éléments. */
.global-spinner-overlay.est-visible .global-spinner,
.global-spinner-overlay.est-visible .global-spinner-text,
.global-spinner-overlay.est-visible .global-spinner-etat,
.global-spinner-overlay.est-visible .global-spinner-progression {
    animation: global-spinner-entree .55s cubic-bezier(.2, .8, .2, 1) both;
}
.global-spinner-overlay.est-visible .global-spinner-text        { animation-delay: .06s; }
.global-spinner-overlay.est-visible .global-spinner-etat        { animation-delay: .12s; }
.global-spinner-overlay.est-visible .global-spinner-progression { animation-delay: .18s; }

@keyframes global-spinner-entree {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Sortie : l'écran se referme en cercle sur l'armoirie. */
.global-spinner-overlay.est-sortie {
    pointer-events: none;
    clip-path: circle(0 at var(--cx) var(--cy));
    opacity: 0;
    transition: clip-path .62s cubic-bezier(.7, 0, .25, 1), opacity .25s ease .4s;
}

.global-spinner-overlay.est-sortie .global-spinner-emblem {
    animation: global-spinner-pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes global-spinner-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(.9); }
}

.global-spinner {
    position: relative;
    width: 188px;
    height: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Halo lumineux derrière l'armoirie : s'intensifie avec la progression. */
.global-spinner-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--spinner-anneau-1, #1e5f8e) 30%, transparent) 0%, transparent 70%);
    opacity: calc(.5 + .5 * var(--p));
    animation: global-spinner-respiration 2.4s ease-in-out infinite;
}

@keyframes global-spinner-respiration {
    0%, 100% { transform: translate(-50%, -50%) scale(.92); }
    50%      { transform: translate(-50%, -50%) scale(1.2); }
}

/* Jauge circulaire : progression réelle (stroke-dashoffset posé en JS). */
.global-spinner-jauge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 128px;
    transform: translate(-50%, -50%) rotate(-90deg);
    overflow: visible;
}

.global-spinner-jauge circle {
    fill: none;
    stroke-width: 6;
}

.global-spinner-jauge__piste {
    stroke: color-mix(in srgb, var(--spinner-anneau-1, #1e5f8e) 12%, transparent);
}

.global-spinner-jauge__valeur {
    stroke: var(--spinner-anneau-1, #1e5f8e);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--spinner-anneau-1, #1e5f8e) 55%, transparent));
}

/* Rond parfait contenant l'armoirie — celle-ci reste fixe, sans rotation. */
.global-spinner-emblem {
    position: relative;
    z-index: 2;
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow:
        0 2px 8px rgba(16, 35, 63, 0.12),
        0 10px 24px rgba(16, 35, 63, 0.10),
        inset 0 0 0 1px rgba(16, 35, 63, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.global-spinner-logo {
    width: 68%;
    height: 68%;
    object-fit: contain;
}

/* Anneaux extérieurs : dégradé conique masqué en anneau (traînée
   lumineuse). Couleurs pilotables depuis Contenu des pages > Écran de
   chargement (variables --spinner-anneau-* de frontend.partials.head) ;
   la couleur de l'anneau 1 colore désormais la jauge de progression. */
.global-spinner-anneau {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--epaisseur)), #000 calc(100% - var(--epaisseur)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--epaisseur)), #000 calc(100% - var(--epaisseur)));
    opacity: calc(.5 + .5 * var(--p));
    animation: global-spinner-tourner var(--duree) linear infinite;
    animation-direction: var(--sens, normal);
}

.global-spinner-anneau--2 {
    width: 156px;
    height: 156px;
    --epaisseur: 6px;
    --duree: 2.6s;
    --sens: reverse;
    background: conic-gradient(from 90deg, transparent 0%, var(--spinner-anneau-2, #0F9B6E) 50%, color-mix(in srgb, var(--spinner-anneau-2, #0F9B6E) 55%, white) 78%, transparent 100%);
}

.global-spinner-anneau--3 {
    width: 188px;
    height: 188px;
    --epaisseur: 4px;
    --duree: 3.8s;
    --sens: normal;
    background: conic-gradient(from 180deg, transparent 0%, var(--spinner-anneau-3, #D21F28) 45%, color-mix(in srgb, var(--spinner-anneau-3, #D21F28) 55%, white) 70%, transparent 100%);
}

@keyframes global-spinner-tourner {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.global-spinner-text {
    margin: 6px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #14243D;
    letter-spacing: 0.02em;
}

/* Pourcentage + étape en cours. */
.global-spinner-etat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: -6px;
    font-size: .85rem;
    color: #5A6478;
}

.global-spinner-pourcent {
    min-width: 3.2em;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--spinner-anneau-1, #1e5f8e);
}

.global-spinner-phase.est-nouvelle {
    animation: global-spinner-phase .4s ease both;
}

/* Départ à .45 (et non 0) : le libellé reste lisible pendant la transition. */
@keyframes global-spinner-phase {
    from { opacity: .45; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

/* Barre de progression réelle, parcourue d'un reflet. */
.global-spinner-progression {
    position: relative;
    width: 180px;
    height: 4px;
    border-radius: 99px;
    background: rgba(30, 95, 142, .12);
    overflow: hidden;
}

.global-spinner-progression span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--spinner-anneau-2, #0F9B6E), var(--spinner-anneau-1, #1e5f8e));
    overflow: hidden;
}

.global-spinner-progression span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: translateX(-100%);
    animation: global-spinner-reflet 1.3s ease-in-out infinite;
}

@keyframes global-spinner-reflet {
    to { transform: translateX(100%); }
}

/* ── Barre fine en haut de l'écran ──
   .est-chargement : suit le chargement réel de la page (largeur posée en JS) ;
   .est-active     : changement de page au clic ;
   .est-finie      : terminé, s'efface. */
.barre-navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147482001;
    width: 0;
    height: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #0F9B6E, #1e5f8e 60%, #D21F28);
    box-shadow: 0 0 10px rgba(30, 95, 142, .5);
    opacity: 0;
    pointer-events: none;
}

/* Lueur en tête de barre. */
.barre-navigation::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 80px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(ellipse at right, rgba(30, 95, 142, .55), transparent 70%);
}

.barre-navigation.est-chargement {
    opacity: 1;
    transition: width .12s linear;
}

.barre-navigation.est-active {
    opacity: 1;
    /* Avance vite puis ralentit : la page suivante prend le relais. */
    animation: barre-navigation-avance 8s cubic-bezier(.08, .8, .2, 1) forwards;
}

.barre-navigation.est-finie {
    width: 100%;
    opacity: 0;
    transition: opacity .35s ease .1s;
}

@keyframes barre-navigation-avance {
    0%   { width: 0; }
    10%  { width: 45%; }
    40%  { width: 75%; }
    100% { width: 94%; }
}

@media (max-width: 480px) {
    .global-spinner { scale: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .global-spinner-anneau,
    .global-spinner-halo,
    .global-spinner-progression span::after,
    .global-spinner-overlay.est-visible *,
    .global-spinner-overlay.est-sortie .global-spinner-emblem {
        animation: none !important;
    }
    .global-spinner-overlay.est-sortie {
        clip-path: none;
        transition: opacity .3s ease;
    }
    .barre-navigation.est-active { animation: none; width: 70%; }
}

/* ============================================================================
   Chargement d'un document PDF (visualiseur) : le spinner des pages, intégré
   à la zone du document — voir frontend.partials.spinner-document et
   public/js/document-viewer.js, qui fait avancer --p et la jauge.
   ========================================================================== */
.doc-chargement {
    --p: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 2rem 1rem;
    animation: global-spinner-entree .55s cubic-bezier(.2, .8, .2, 1) both;
}

.doc-chargement .global-spinner-jauge__valeur,
.doc-chargement .global-spinner-progression span {
    transition: stroke-dashoffset .35s ease, width .35s ease;
}