/* ══════════════════════════════════════════════════════════
   loader.css — Original Permis
   Écran de chargement initial (préloader)
   ──────────────────────────────────────────────────────────
   COMPOSANT INDÉPENDANT — pour supprimer le loader :
     1. retirer le <link rel="stylesheet" href="loader.css">
     2. retirer le bloc HTML #site-preloader
     3. retirer le <script src="loader.js" defer>
   Aucun autre fichier n'est modifié par ce composant.
══════════════════════════════════════════════════════════ */

#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-darkest, #080F0B);
    /* transitions douces, accélérées GPU (opacity + transform uniquement) */
    opacity: 1;
    transition: opacity .6s ease, visibility .6s ease;
    will-change: opacity;
  }
  
  /* État "prêt" : fondu puis retrait du flux */
  #site-preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  /* Conteneur central : logo + halo + anneau */
  .preloader-stage {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Halo lumineux pulsant derrière le logo */
  .preloader-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 183, 136, .35) 0%, rgba(45, 106, 79, .12) 55%, transparent 80%);
    filter: blur(6px);
    animation: preloader-pulse 2.2s ease-in-out infinite;
    will-change: transform, opacity;
  }
  
  /* Anneau circulaire tournant */
  .preloader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: var(--green-light, #52B788);
    border-right-color: rgba(82, 183, 136, .25);
    animation: preloader-spin 1.1s linear infinite;
    will-change: transform;
  }
  
  /* Logo central : flottement léger */
  .preloader-logo {
    position: relative;
    width: 64px;
    height: 64px;
    z-index: 1;
    animation: preloader-float 2.6s ease-in-out infinite;
    will-change: transform;
  }
  .preloader-logo img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* Texte sous le logo (optionnel, discret) */
  .preloader-label {
    position: absolute;
    bottom: -2.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Outfit', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
  }
  
  /* ── Keyframes (GPU : transform / opacity uniquement) ── */
  @keyframes preloader-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  
  @keyframes preloader-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%       { transform: translate3d(0, -8px, 0); }
  }
  
  @keyframes preloader-pulse {
    0%, 100% { transform: scale3d(1, 1, 1); opacity: .55; }
    50%       { transform: scale3d(1.18, 1.18, 1); opacity: .95; }
  }
  
  /* ── Respect des préférences de mouvement réduit ── */
  @media (prefers-reduced-motion: reduce) {
    .preloader-glow,
    .preloader-ring,
    .preloader-logo {
      animation: none;
    }
    #site-preloader {
      transition: opacity .3s linear;
    }
  }
  
  /* ── Mobile : légèrement plus compact ── */
  @media (max-width: 480px) {
    .preloader-stage { width: 104px; height: 104px; }
    .preloader-logo  { width: 50px; height: 50px; }
  }