:root{
  --vert:#1ca25f; --jaune:#f6d02f; --bleu:#3574bb; --or:#cfae45;
  --taille:min(78vmin,560px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{
  position:relative;display:grid;place-items:center;overflow:hidden;
  background:#fff;perspective:1400px;
}

/* Logo : entrée en 3D, puis orbite très douce */
.logo{
  position:relative;z-index:2;width:var(--taille);aspect-ratio:1;
  transform-style:preserve-3d;
  animation:entree 1.8s cubic-bezier(.2,.8,.2,1) both,
            orbite 16s ease-in-out 1.8s infinite;
}
@keyframes entree{
  from{opacity:0;transform:rotateY(-60deg) scale(.8)}
  to  {opacity:1;transform:rotateY(0) scale(1)}
}
@keyframes orbite{
  0%,100%{transform:rotateY(0) rotateX(0) translateY(0)}
  25%{transform:rotateY(8deg) rotateX(2.5deg) translateY(-1.2%)}
  75%{transform:rotateY(-8deg) rotateX(-2.5deg) translateY(-1.2%)}
}

/* Épaisseur façon médaille */
.tranche{
  position:absolute;inset:0;border-radius:50%;
  background:var(--or);transform:translateZ(var(--z));
}

/* Halo aux couleurs de la charte */
.logo::before{
  content:"";position:absolute;inset:-9%;border-radius:50%;
  background:conic-gradient(var(--vert),var(--jaune),var(--bleu),var(--vert));
  filter:blur(38px);opacity:0;
  animation:tourne 24s linear infinite,halo 6s ease-in-out 1.6s infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:.25}50%{opacity:.6}}

/* Face du logo + reflet */
.disque{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#fff url(logo-dgcbf.png) center/cover no-repeat;
  box-shadow:0 0 0 2px rgba(246,208,47,.6),0 0 40px rgba(246,208,47,.35);
  animation:eclat 6s ease-in-out 1.6s infinite;
}
.disque::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg);
  animation:reflet 9s ease-in-out 2.4s infinite;
}
@keyframes eclat{
  0%,100%{box-shadow:0 0 0 2px rgba(246,208,47,.45),0 0 28px rgba(246,208,47,.25)}
  50%{box-shadow:0 0 0 2px rgba(246,208,47,.9),0 0 70px rgba(246,208,47,.55)}
}
@keyframes reflet{0%,55%{left:-60%}100%{left:140%}}

/* Accueil : éclat de lumière qui part du centre vers la gauche et la droite */
.flash,.faisceau{position:absolute;left:50%;top:50%;z-index:1;pointer-events:none;opacity:0}
.flash{
  width:var(--taille);aspect-ratio:1;border-radius:50%;
  margin:calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2);
  background:radial-gradient(circle,rgba(246,208,47,.85),rgba(28,162,95,.25) 45%,transparent 68%);
  animation:flash 1.8s ease-out .9s both;
}
@keyframes flash{
  0%{opacity:0;transform:scale(.5)}
  25%{opacity:1}
  100%{opacity:0;transform:scale(2.2)}
}
.faisceau{
  width:100vw;height:4px;margin-left:-50vw;margin-top:-2px;
  background:linear-gradient(90deg,transparent,var(--bleu),var(--vert) 30%,var(--jaune) 50%,var(--vert) 70%,var(--bleu),transparent);
  box-shadow:0 0 18px 4px rgba(246,208,47,.55);
  transform-origin:center;
  animation:eclair 2.2s cubic-bezier(.2,.7,.3,1) 1s both;
}
@keyframes eclair{
  0%{opacity:0;transform:scaleX(0)}
  15%{opacity:1}
  70%{opacity:.8}
  100%{opacity:0;transform:scaleX(1)}
}

/* Ombre au sol */
.ombre{
  position:absolute;left:50%;top:calc(50% + var(--taille) * .54);
  width:calc(var(--taille) * .65);height:calc(var(--taille) * .06);
  margin-left:calc(var(--taille) * -.325);border-radius:50%;
  background:rgba(10,30,70,.22);filter:blur(14px);opacity:0;
  animation:ombre 16s ease-in-out 1.8s infinite,apparait 1s ease 1.2s both;
}
@keyframes ombre{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.9)}}
@keyframes apparait{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .logo::before{opacity:.45}
  .ombre{opacity:1}
}