/* Recoland RDC – écran de chargement (vert sombre unique sur fond blanc) */
html.reco-is-loading, html.reco-is-loading body { overflow: hidden !important; }

#reco-loader {
  --g: #014a3f;
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--g);
  transition: opacity .6s ease, visibility .6s ease, transform .7s cubic-bezier(.6,0,.2,1);
}
#reco-loader.rl-out { opacity: 0; visibility: hidden; transform: scale(1.04); pointer-events: none; }

/* Motifs environnement en fond – 15 % d'opacité, animés */
#reco-loader .rl-bg {
  position: absolute; inset: -160px; opacity: .15; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23014a3f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 40C14 24 26 14 44 14C44 30 34 40 14 40ZM14 40L34 20'/%3E%3Cpath d='M112 20a14 14 0 1 1-12 6M96 20l4 6 6-4'/%3E%3Cpath d='M36 92c7 9 10 15 10 20a10 10 0 0 1-20 0c0-5 3-11 10-20Z'/%3E%3Cpath d='M118 146v-18M118 128c-10 0-15-7-15-13s6-12 15-12 15 5 15 12-5 13-15 13Z'/%3E%3Ccircle cx='86' cy='78' r='5'/%3E%3Cpath d='M86 66v-4M86 94v-4M74 78h-4M102 78h-4'/%3E%3Cpath d='M66 132h12v4c3 2 5 5 5 9v8c0 2-2 4-4 4H65c-2 0-4-2-4-4v-8c0-4 2-7 5-9Z'/%3E%3Cpath d='M140 60c-8 0-12 6-12 12 8 0 12-6 12-12Z'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: rl-drift 34s linear infinite;
}
#reco-loader .rl-bg2 {
  opacity: .15; background-size: 260px 260px; background-position: 80px 40px;
  transform: rotate(14deg);
  animation: rl-drift2 52s linear infinite;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 28%, #0A1428 62%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 28%, #0A1428 62%);
}
#reco-loader .rl-bg:not(.rl-bg2) {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 22%, #0A1428 55%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 22%, #0A1428 55%);
}
@keyframes rl-drift  { to { background-position: 160px -160px; } }
@keyframes rl-drift2 { to { background-position: -180px 300px; } }

/* Scène centrale */
#reco-loader .rl-stage { position: relative; width: min(62vw, 46vh, 300px); height: auto; overflow: visible; }
#reco-loader .rl-sc { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
#reco-loader .rl-sc1 { --d: 0s; }
#reco-loader .rl-sc2 { --d: 1.5s; }
#reco-loader .rl-sc3 { --d: 3s; }
#reco-loader .rl-sc4 { --d: 4.5s; }
#reco-loader .rl-sc1, #reco-loader .rl-sc2, #reco-loader .rl-sc3 { animation: rl-scene 1.5s ease both; animation-delay: var(--d); }
#reco-loader .rl-sc4 { animation: rl-scene-in .35s ease both; animation-delay: var(--d); }
@keyframes rl-scene { 0% { opacity: 0; transform: scale(.88); } 12% { opacity: 1; transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes rl-scene-in { from { opacity: 0; } to { opacity: 1; } }

#reco-loader g:not([transform]), #reco-loader path, #reco-loader ellipse, #reco-loader circle { transform-box: fill-box; }

/* 1 — bouteille */
#reco-loader .rl-bottle { transform-origin: 50% 50%; animation: rl-bottle 1.5s cubic-bezier(.5,0,.6,1) both; animation-delay: var(--d); }
@keyframes rl-bottle {
  0%   { transform: translate(34px, -78px) rotate(-75deg); opacity: 0; }
  12%  { opacity: 1; }
  48%  { transform: translate(0, -8px) rotate(4deg); }
  56%  { transform: translate(0, -10px) rotate(0); }
  84%  { transform: translate(0, 74px) rotate(0); }
  100% { transform: translate(0, 74px); opacity: 1; }
}
#reco-loader .rl-lid { transform-origin: 0% 100%; animation: rl-lid 1.5s ease both; animation-delay: var(--d); }
@keyframes rl-lid { 0%, 22% { transform: rotate(0); } 36%, 70% { transform: rotate(-42deg); } 82% { transform: rotate(4deg); } 90%, 100% { transform: rotate(0); } }
#reco-loader .rl-burst { opacity: 0; transform-origin: 50% 100%; animation: rl-burst 1.5s ease both; animation-delay: var(--d); }
@keyframes rl-burst { 0%, 84% { opacity: 0; transform: scale(.4); } 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }

/* 2 — pulvérisateur et insecte */
#reco-loader .rl-can { transform-origin: 50% 100%; animation: rl-can 1.5s ease both; animation-delay: var(--d); }
@keyframes rl-can { 0% { transform: translateX(-16px) rotate(0); } 15% { transform: translateX(0) rotate(0); } 25%, 75% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
#reco-loader .rl-nozzle { animation: rl-press .3s ease-in-out 4 both; animation-delay: calc(var(--d) + .3s); }
@keyframes rl-press { 50% { transform: translateY(2.5px); } }
#reco-loader .rl-mist circle { opacity: 0; transform-box: view-box; transform-origin: 62px 88px; animation: rl-mist .75s ease-out 2 both; }
#reco-loader .rl-mist circle:nth-child(1) { --x: 60px; --y: -6px;  animation-delay: calc(var(--d) + .30s); }
#reco-loader .rl-mist circle:nth-child(2) { --x: 72px; --y: 6px;   animation-delay: calc(var(--d) + .38s); }
#reco-loader .rl-mist circle:nth-child(3) { --x: 66px; --y: 14px;  animation-delay: calc(var(--d) + .44s); }
#reco-loader .rl-mist circle:nth-child(4) { --x: 80px; --y: -2px;  animation-delay: calc(var(--d) + .50s); }
#reco-loader .rl-mist circle:nth-child(5) { --x: 58px; --y: 2px;   animation-delay: calc(var(--d) + .56s); }
#reco-loader .rl-mist circle:nth-child(6) { --x: 76px; --y: 12px;  animation-delay: calc(var(--d) + .62s); }
#reco-loader .rl-mist circle:nth-child(7) { --x: 70px; --y: -10px; animation-delay: calc(var(--d) + .68s); }
#reco-loader .rl-mist circle:nth-child(8) { --x: 84px; --y: 6px;   animation-delay: calc(var(--d) + .74s); }
@keyframes rl-mist { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(2.4); } }
#reco-loader .rl-bug { transform-origin: 50% 50%; animation: rl-bug 1.5s ease-in both; animation-delay: var(--d); }
@keyframes rl-bug {
  0%   { transform: translate(30px, -30px); opacity: 0; }
  14%  { transform: translate(0, 0); opacity: 1; }
  30%  { transform: translate(-3px, -4px); }
  44%  { transform: translate(2px, 2px); }
  50%  { transform: translate(-3px, 0) rotate(-12deg); }
  54%  { transform: translate(3px, 0) rotate(12deg); }
  58%  { transform: translate(-2px, 0) rotate(-8deg); }
  70%  { transform: translate(0, 6px) rotate(180deg); opacity: 1; }
  100% { transform: translate(0, 66px) rotate(180deg); opacity: 0; }
}
#reco-loader .rl-wing { transform-origin: 50% 90%; animation: rl-flap .09s ease-in-out 9 alternate both; animation-delay: var(--d); }
@keyframes rl-flap { to { transform: scaleY(.45); } }
#reco-loader .rl-wl { transform-origin: 90% 90%; }
#reco-loader .rl-wr { transform-origin: 10% 90%; }

/* 3 — arbre */
#reco-loader .rl-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rl-stroke .5s ease-out forwards; }
#reco-loader .rl-trunk { animation-duration: .55s; animation-delay: calc(var(--d) + .15s); }
#reco-loader .rl-br1 { animation-delay: calc(var(--d) + .5s); }
#reco-loader .rl-br2 { animation-delay: calc(var(--d) + .6s); }
#reco-loader .rl-br3 { animation-delay: calc(var(--d) + .68s); }
@keyframes rl-stroke { to { stroke-dashoffset: 0; } }
#reco-loader .rl-mound { transform-origin: 50% 100%; animation: rl-pop .4s ease-out both; animation-delay: var(--d); }
#reco-loader .rl-crown circle { transform-origin: 50% 100%; animation: rl-pop .45s cubic-bezier(.3,1.6,.6,1) both; }
#reco-loader .rl-c2 { animation-delay: calc(var(--d) + .82s); }
#reco-loader .rl-c3 { animation-delay: calc(var(--d) + .9s); }
#reco-loader .rl-c1 { animation-delay: calc(var(--d) + .98s); }
#reco-loader .rl-leaf { transform-origin: 0% 100%; animation: rl-pop .35s cubic-bezier(.3,1.8,.6,1) both; }
#reco-loader .rl-l1 { animation-delay: calc(var(--d) + .7s); }
#reco-loader .rl-l2 { animation-delay: calc(var(--d) + .78s); }
#reco-loader .rl-l3 { animation-delay: calc(var(--d) + .84s); }
#reco-loader .rl-l4 { animation-delay: calc(var(--d) + .9s); }
@keyframes rl-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* 4 — logo */
#reco-loader .rl-lg { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rl-stroke .75s ease-in-out forwards, rl-fill .45s ease forwards; }
#reco-loader .rl-lg2, #reco-loader .rl-lg3 { --fo: .42; }
#reco-loader .rl-lg4, #reco-loader .rl-lg5 { --fo: .72; }
#reco-loader .rl-lg1 { animation-delay: calc(var(--d) + .05s), calc(var(--d) + 1.05s); }
#reco-loader .rl-lg2 { animation-delay: calc(var(--d) + .2s),  calc(var(--d) + 1.1s); }
#reco-loader .rl-lg3 { animation-delay: calc(var(--d) + .3s),  calc(var(--d) + 1.15s); }
#reco-loader .rl-lg4 { animation-delay: calc(var(--d) + .36s), calc(var(--d) + 1.2s); }
#reco-loader .rl-lg5 { animation-delay: calc(var(--d) + .42s), calc(var(--d) + 1.22s); }
#reco-loader .rl-lg6 { animation-delay: calc(var(--d) + .3s),  calc(var(--d) + 1.15s); }
#reco-loader .rl-lg7 { animation-delay: calc(var(--d) + .5s),  calc(var(--d) + 1.25s); }
#reco-loader .rl-lg8 { animation-delay: calc(var(--d) + .58s), calc(var(--d) + 1.3s); }
@keyframes rl-fill { to { fill-opacity: var(--fo, 1); } }
#reco-loader .rl-vein { stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rl-stroke .6s ease forwards, rl-vein .4s ease forwards;
  animation-delay: calc(var(--d) + .35s), calc(var(--d) + 1.05s); }
@keyframes rl-vein { to { stroke: #fff; } }
#reco-loader .rl-word { clip-path: inset(0 100% 0 0); animation: rl-wipe .6s cubic-bezier(.6,0,.2,1) forwards; animation-delay: calc(var(--d) + .95s); }
@keyframes rl-wipe { to { clip-path: inset(0 0 0 0); } }

/* Version courte (pages suivantes) */
html.reco-quick #reco-loader .rl-sc1,
html.reco-quick #reco-loader .rl-sc2,
html.reco-quick #reco-loader .rl-sc3 { display: none; }
html.reco-quick #reco-loader .rl-sc4 { --d: 0s; }

/* Pourcentage – bas centre */
#reco-loader .rl-progress {
  position: absolute; left: 50%; bottom: max(28px, 7vh); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 600 15px/1 "Poppins", "Segoe UI", Arial, sans-serif; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; color: var(--g);
}
#reco-loader .rl-pct { min-width: 4ch; text-align: center; }
#reco-loader .rl-bar { display: block; width: min(180px, 46vw); height: 3px; border-radius: 3px; background: rgba(1, 74, 63, .15); overflow: hidden; }
#reco-loader .rl-bar i { display: block; height: 100%; background: var(--g); transform-origin: 0 50%; transform: scaleX(0); border-radius: inherit; }

@media (prefers-reduced-motion: reduce) {
  #reco-loader .rl-bg { animation: none; }
}