/* ═══════════════════════════════════════════════════════════════════
   Preloader moderne — Pépinière Fidèle Briant
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --pl-bg-1:          rgba(133, 191,  24, 0.20);
  --pl-bg-2:          rgba( 31, 107,  93, 0.16);
  --pl-bg-3:          rgba(243, 222, 122, 0.13);
  --pl-panel-bg:      rgba(255, 255, 255, 0.88);
  --pl-border:        rgba(  0,  69,  64, 0.10);
  --pl-title:         #143b36;
  --pl-text:          #4a615b;
  --pl-accent:        #85bf18;
  --pl-accent-dark:   #1f6b5d;
  --pl-warm:          #f3de7a;
  --pl-ring-circum:   351.86; /* 2π × 56 */
}

/* ── Fond plein écran ───────────────────────────────────────────── */
#preloader.preloader-modern {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 55% at 15% 18%, var(--pl-bg-1), transparent),
    radial-gradient(ellipse 50% 60% at 82% 82%, var(--pl-bg-2), transparent),
    radial-gradient(ellipse 38% 38% at 65%  8%, var(--pl-bg-3), transparent),
    linear-gradient(152deg, #eff6e4 0%, #e6f1db 45%, #daeee3 100%);
  backdrop-filter: blur(18px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

#preloader.preloader-modern.is-hidden {
  opacity: 0;
  visibility: hidden;
}

#preloader.preloader-modern.is-hidden .preloader-modern__panel {
  transform: scale(0.94) translateY(12px);
  opacity: 0;
}

/* ── Particules flottantes ─────────────────────────────────────── */
.preloader-modern__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.preloader-modern__particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: pl-particle-float linear infinite;
}

/* Tailles, couleurs, positions, durées — chaque particule est unique */
.preloader-modern__particle--1 {
  width: 10px; height: 10px;
  top: 14%; left: 9%;
  background: radial-gradient(circle, #85bf18, transparent 70%);
  animation-duration: 8s;
  animation-delay: 0s;
}
.preloader-modern__particle--2 {
  width:  7px; height:  7px;
  top: 68%; left: 7%;
  background: radial-gradient(circle, #1f6b5d, transparent 70%);
  animation-duration: 10s;
  animation-delay: -2.5s;
}
.preloader-modern__particle--3 {
  width: 14px; height: 14px;
  top: 22%; left: 88%;
  background: radial-gradient(circle, rgba(133, 191, 24, 0.6), transparent 70%);
  animation-duration: 11s;
  animation-delay: -1.8s;
}
.preloader-modern__particle--4 {
  width:  8px; height:  8px;
  top: 78%; left: 85%;
  background: radial-gradient(circle, rgba(243, 222, 122, 0.7), transparent 70%);
  animation-duration: 9s;
  animation-delay: -4s;
}
.preloader-modern__particle--5 {
  width:  5px; height:  5px;
  top: 42%; left: 4%;
  background: radial-gradient(circle, #85bf18, transparent 70%);
  animation-duration: 7s;
  animation-delay: -3.2s;
}
.preloader-modern__particle--6 {
  width: 11px; height: 11px;
  top: 88%; left: 42%;
  background: radial-gradient(circle, rgba(31, 107, 93, 0.5), transparent 70%);
  animation-duration: 12s;
  animation-delay: -0.6s;
}
.preloader-modern__particle--7 {
  width:  6px; height:  6px;
  top: 8%; left: 55%;
  background: radial-gradient(circle, rgba(133, 191, 24, 0.5), transparent 70%);
  animation-duration: 9.5s;
  animation-delay: -5s;
}
.preloader-modern__particle--8 {
  width: 9px; height: 9px;
  top: 55%; left: 93%;
  background: radial-gradient(circle, rgba(243, 222, 122, 0.6), transparent 70%);
  animation-duration: 13s;
  animation-delay: -7s;
}

@keyframes pl-particle-float {
  0%   { opacity: 0;    transform: translateY(0)    scale(0.6) rotate(0deg);   }
  15%  { opacity: 0.75; }
  50%  { opacity: 0.9;  transform: translateY(-28px) scale(1.1) rotate(22deg);  }
  85%  { opacity: 0.75; }
  100% { opacity: 0;    transform: translateY(-56px) scale(0.7) rotate(40deg);  }
}

/* ── Orbs d'ambiance ───────────────────────────────────────────── */
.preloader-modern__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.preloader-modern__orb--left {
  width: 380px; height: 380px;
  top: -10%; left: -12%;
  background: radial-gradient(circle, rgba(133, 191, 24, 0.28), transparent 70%);
  animation: pl-orb-drift-1 16s ease-in-out infinite;
}

.preloader-modern__orb--right {
  width: 340px; height: 340px;
  bottom: -12%; right: -10%;
  background: radial-gradient(circle, rgba(31, 107, 93, 0.24), transparent 72%);
  animation: pl-orb-drift-2 20s ease-in-out infinite;
}

.preloader-modern__orb--top {
  width: 280px; height: 280px;
  top: 5%; right: 25%;
  background: radial-gradient(circle, rgba(243, 222, 122, 0.18), transparent 70%);
  animation: pl-orb-drift-3 14s ease-in-out infinite;
}

@keyframes pl-orb-drift-1 {
  0%, 100% { transform: translate(0,    0)    scale(1);    }
  33%      { transform: translate(30px, 20px) scale(1.06); }
  66%      { transform: translate(10px, 40px) scale(0.97); }
}
@keyframes pl-orb-drift-2 {
  0%, 100% { transform: translate(0,     0)    scale(1);    }
  40%      { transform: translate(-20px, -30px) scale(1.08); }
  75%      { transform: translate(-35px, -10px) scale(0.95); }
}
@keyframes pl-orb-drift-3 {
  0%, 100% { transform: translate(0,   0)   scale(1);    }
  50%      { transform: translate(18px, 25px) scale(1.1); }
}

/* ── Panneau central ───────────────────────────────────────────── */
.preloader-modern__panel {
  position: relative;
  width: min(100%, 460px);
  padding: 32px 32px 28px;
  border-radius: 32px;
  border: 1px solid var(--pl-border);
  background:
    linear-gradient(170deg, rgba(255,255,255,0.95) 0%, rgba(246,252,240,0.90) 100%);
  box-shadow:
    0 2px  0   rgba(255, 255, 255, 0.85) inset,
    0 0   0 1px rgba(133, 191, 24, 0.08) inset,
    0 32px 96px rgba(9, 36, 32, 0.22),
    0  8px 24px rgba(9, 36, 32, 0.10);
  overflow: hidden;
  /* Entrée animée */
  animation: pl-panel-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pl-panel-enter {
  0%   { opacity: 0; transform: scale(0.90) translateY(20px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* Ligne lumineuse en haut du panneau */
.preloader-modern__panel-glow {
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(133, 191, 24, 0.7) 30%,
    rgba(243, 222, 122, 0.9) 50%,
    rgba(133, 191, 24, 0.7) 70%,
    transparent 100%
  );
  animation: pl-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes pl-glow-pulse {
  0%, 100% { opacity: 0.6; transform: scaleX(0.85); }
  50%      { opacity: 1.0; transform: scaleX(1.00); }
}

/* Halo décoratif bas-droite du panneau */
.preloader-modern__panel::before {
  content: "";
  position: absolute;
  inset: auto -18% -30% auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(133, 191, 24, 0.16), transparent 70%);
  pointer-events: none;
}

/* ── Badge / Header ─────────────────────────────────────────────── */
.preloader-modern__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preloader-modern__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pl-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(133, 191, 24, 0.4);
  animation: pl-dot-ping 1.6s ease-out infinite;
}

@keyframes pl-dot-ping {
  0%   { box-shadow: 0 0 0 0   rgba(133, 191, 24, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(133, 191, 24, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(133, 191, 24, 0);    }
}

.preloader-modern__eyebrow {
  display: inline-block;
  color: var(--pl-accent-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── SVG + animations ───────────────────────────────────────────── */
.preloader-modern__spinner {
  display: grid;
  place-items: center;
  margin: 22px 0 16px;
}

.preloader-modern__svg {
  width: 148px;
  height: 148px;
  overflow: visible;
  filter: drop-shadow(0 12px 28px rgba(9, 36, 32, 0.12));
}

/* Anneau de fond */
.preloader-modern__ring-track {
  fill: none;
  stroke: rgba(0, 69, 64, 0.10);
  stroke-width: 3;
}

/* Anneau de progression — stroke-dashoffset piloté par JS */
.preloader-modern__ring-fill {
  fill: none;
  stroke: url(#plRingGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  transform-origin: 80px 80px;
  transform: rotate(-90deg);
  stroke-dasharray:  351.86;
  stroke-dashoffset: 351.86; /* 0 % au départ */
  transition: stroke-dashoffset 0.22s ease-out;
  filter: url(#plGlow);
}

/* Trèfle */
.preloader-modern__clover {
  transform-origin: 80px 80px;
  animation: pl-clover-spin 2.6s linear infinite;
}

.preloader-modern__leaf {
  transform-origin: 80px 80px;
  filter: drop-shadow(0 6px 12px rgba(26, 102, 83, 0.22));
  animation: pl-leaf-breathe 1.9s ease-in-out infinite;
}

.preloader-modern__leaf--1,
.preloader-modern__leaf--3 { fill: #85bf18; }
.preloader-modern__leaf--2,
.preloader-modern__leaf--4 { fill: #1f6b5d; }

.preloader-modern__leaf--2 { animation-delay: 0.20s; }
.preloader-modern__leaf--3 { animation-delay: 0.40s; }
.preloader-modern__leaf--4 { animation-delay: 0.60s; }

/* Graine centrale */
.preloader-modern__seed {
  fill: var(--pl-warm);
  stroke: rgba(0, 69, 64, 0.12);
  stroke-width: 1.5;
  transform-origin: 80px 80px;
  animation: pl-seed-pulse 1.9s ease-in-out infinite;
}

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

@keyframes pl-leaf-breathe {
  0%, 100% { transform: scale(0.93); opacity: 0.87; }
  50%      { transform: scale(1.05); opacity: 1;    }
}

@keyframes pl-seed-pulse {
  0%, 100% { r: 11; opacity: 0.88; }
  50%      { r: 13; opacity: 1;    }
}

/* ── Barre de progression ──────────────────────────────────────── */
.preloader-modern__progress {
  position: relative;
  z-index: 1;
}

.preloader-modern__track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 69, 64, 0.09);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.preloader-modern__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6faa12 0%, #85bf18 50%, #1f6b5d 100%);
  box-shadow: 0 0 12px rgba(133, 191, 24, 0.45);
  transition: width 0.20s ease-out;
  position: relative;
  overflow: hidden;
}

/* Effet shimmer sur la barre */
.preloader-modern__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 45%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.55) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: pl-bar-shimmer 1.5s linear infinite;
}

@keyframes pl-bar-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Méta (label + note + pourcentage) ─────────────────────────── */
.preloader-modern__meta {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.preloader-modern__texts {
  flex: 1;
  min-width: 0;
}

.preloader-modern__label {
  display: block;
  color: var(--pl-title);
  font-family: 'Outfit', sans-serif;
  font-size: 0.975rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preloader-modern__note {
  margin: 5px 0 0;
  color: var(--pl-text);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preloader-modern__value {
  min-width: 58px;
  text-align: right;
  color: var(--pl-accent-dark);
  font-family: 'Outfit', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* ── Médias différés ───────────────────────────────────────────── */
.defer-media,
.defer-media-bg {
  transition: opacity 0.45s ease, filter 0.45s ease;
}

html.connection-slow .defer-media:not(.is-media-loaded) {
  opacity: 0.68;
  filter: saturate(0.8);
}

html.connection-slow .defer-media-bg:not(.is-media-loaded) {
  background:
    linear-gradient(135deg, rgba(31, 107, 93, 0.55), rgba(133, 191, 24, 0.40)),
    linear-gradient(180deg, #f4f7ef, #eef4ea);
  background-size: cover;
  background-position: center;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 575px) {
  .preloader-modern__panel {
    padding: 26px 22px 24px;
    border-radius: 26px;
  }

  .preloader-modern__svg {
    width: 128px;
    height: 128px;
  }

  .preloader-modern__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .preloader-modern__label {
    white-space: normal;
  }

  .preloader-modern__note {
    white-space: normal;
  }

  .preloader-modern__value {
    font-size: 1.9rem;
  }
}

/* ── Accessibilité : mouvement réduit ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .preloader-modern__clover,
  .preloader-modern__leaf,
  .preloader-modern__seed,
  .preloader-modern__particle,
  .preloader-modern__orb,
  .preloader-modern__panel-glow,
  .preloader-modern__status-dot,
  .preloader-modern__bar::after,
  .defer-media,
  .defer-media-bg,
  #preloader.preloader-modern,
  .preloader-modern__panel {
    animation: none !important;
    transition: none !important;
  }
}