/* ============================================================
   PBEEL-GL 2026 — RIO / Brot für die Welt
   Premium visual layer — intentionally scoped to the scholarship page
   ============================================================ */

:root{
  --bourse-navy:#062b86;
  --bourse-blue:#0759d9;
  --bourse-blue-2:#087ff5;
  --bourse-cyan:#13c6e8;
  --bourse-ice:#eef7ff;
  --bourse-text:#10254b;
  --bourse-muted:#61718d;
  --bourse-white:#fff;
  --bourse-border:rgba(16,62,130,.10);
  --bourse-shadow:0 22px 60px rgba(5,48,118,.13);
  --bourse-radius:24px;
}

/* Page background */
body.index-page{
  background:
    radial-gradient(circle at 8% 14%, rgba(19,198,232,.08), transparent 24rem),
    radial-gradient(circle at 92% 34%, rgba(7,89,217,.08), transparent 28rem),
    #fff;
}

/* Smooth anchor navigation */
html{scroll-behavior:smooth}

/* -------------------------
   Animated page progress
   ------------------------- */
.bourse-progress{
  position:fixed;
  z-index:9999;
  top:0; left:0;
  width:100%;
  height:4px;
  background:transparent;
  pointer-events:none;
}
.bourse-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--bourse-cyan),var(--bourse-blue),var(--bourse-navy));
  box-shadow:0 0 14px rgba(7,127,245,.55);
}

/* -------------------------
   Hero — poster-inspired
   ------------------------- */
.hero-bourse{
  position:relative;
  isolation:isolate;
  min-height:auto;
  padding:40px 0 50px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%, rgba(19,198,232,.13), transparent 20rem),
    linear-gradient(135deg,#fff 0%,#f6fbff 54%,#e8f4ff 100%);
}
.hero-bourse::before{
  content:"";
  position:absolute;
  z-index:-2;
  width:900px;
  height:900px;
  right:-420px;
  top:-270px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.32) 0 2px, transparent 3px) 0 0/34px 34px,
    linear-gradient(145deg,var(--bourse-blue),#07318c);
  transform:rotate(9deg);
  opacity:.96;
}
.hero-bourse::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:720px;
  height:160px;
  right:-110px;
  bottom:36px;
  border:3px solid rgba(19,198,232,.35);
  border-left:0;
  border-radius:0 100% 100% 0;
  transform:rotate(-8deg);
}

.hero-bourse .container{position:relative;z-index:2}

.hero-bourse .row{
  min-height:auto;
}

.hero-bourse .partner-badge{
  border:1px solid rgba(7,89,217,.11);
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(12px);
  padding:10px 15px;
  border-radius:999px;
  box-shadow:0 12px 35px rgba(5,48,118,.08);
  animation:bourseFadeUp .8s ease both;
}
.partner-badge img{
  width:38px!important;
  height:38px!important;
  object-fit:contain;
  vertical-align:middle;
  margin-right:6px;
}
.partner-badge span{font-size:.83rem}

.hero-title{
  margin:16px 0 12px;
  font-size:clamp(2.55rem,5.5vw,5.55rem)!important;
  line-height:.92!important;
  letter-spacing:-.055em;
  font-weight:950!important;
  color: #24983f !important;
  text-wrap:balance;
  animation:bourseFadeUp .9s .12s ease both;
}
.year-highlight{
  display:inline-block;
  font-size:clamp(3.5rem,7vw,7rem)!important;
  line-height:.85;
  background: linear-gradient(356deg, #2db8d9, #06549f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.arrows{
  display:inline-block;
  color:var(--bourse-cyan)!important;
  font-size:.45em;
  letter-spacing:.1em;
  vertical-align:middle;
  animation:arrowPulse 1.8s ease-in-out infinite;
}
.level-pill{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  padding:12px 28px!important;
  border-radius:999px!important;
  font-size:1.05rem!important;
  background:linear-gradient(90deg,#0674e9,#0cc0e8)!important;
  box-shadow:0 12px 28px rgba(7,89,217,.22);
  animation:bourseFadeUp .9s .24s ease both;
}
.level-pill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.42) 48%,transparent 75%);
  transform:translateX(-120%);
  animation:shine 3.4s 1.2s infinite;
}
.subtitle{
  max-width:760px;
  color: #8594c7;
  font-size:1.04rem;
  line-height:1.6;
  animation:bourseFadeUp .9s .36s ease both;
}
.slogan-quote{
  display:inline-block;
  position:relative;
  padding:8px 18px 12px 0;
  color:var(--bourse-blue)!important;
  font-size:clamp(1.1rem,2vw,1.55rem)!important;
  font-weight:800!important;
  font-style:italic;
  font-family:"Raleway",sans-serif;
}
.slogan-quote::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:3px;
  border-radius:50%;
  background:linear-gradient(90deg,var(--bourse-blue),transparent);
  transform:skewX(-24deg);
}

/* Hero information cards */
.info-card-blue{
  position:relative;
  min-height:86px;
  padding:14px 16px!important;
  border:1px solid rgba(7,89,217,.10)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 14px 34px rgba(8,59,130,.07);
  backdrop-filter:blur(10px);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.info-card-blue:hover{
  transform:translateY(-7px);
  border-color:rgba(7,127,245,.25)!important;
  box-shadow:0 20px 42px rgba(8,59,130,.13);
}
.icon-box{
  display:grid;
  place-items:center;
  width:50px;height:50px;
  flex:0 0 50px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,var(--bourse-blue),var(--bourse-cyan));
  box-shadow:0 10px 24px rgba(7,89,217,.22);
}
.icon-box i{color:#fff!important}
.info-card-blue strong{color:var(--bourse-blue);font-size:1.02rem}
.info-card-blue small{font-size:.76rem}

/* Hero CTA */
.btn-apply{
  position:relative;
  overflow:hidden;
  border:0!important;
  padding:14px 25px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#063b9e,#087ff5)!important;
  box-shadow:0 14px 30px rgba(7,89,217,.25);
  transition:transform .3s ease,box-shadow .3s ease!important;
}
.btn-apply::after{
  content:"";
  position:absolute;
  width:70px;height:100%;
  top:0;left:-100px;
  transform:skewX(-18deg);
  background:rgba(255,255,255,.28);
  animation:buttonShine 3.8s 2s infinite;
}
.btn-apply:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 20px 38px rgba(7,89,217,.34);
}
.btn-outline-custom{
  padding:13px 22px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(8px);
  transition:.3s ease!important;
}
.btn-outline-custom:hover{transform:translateY(-4px)}

/* -------------------------
   Hero visual / photos
   ------------------------- */
.visual-container{
  position:relative;
  width:min(470px,100%);
  height:390px;
  margin:auto;
}
.visual-container::before,
.visual-container::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(19,198,232,.42);
  animation:orbit 8s linear infinite;
}
.visual-container::before{
  width:430px;height:430px;
  top:26px;left:22px;
}
.visual-container::after{
  width:365px;height:365px;
  top:58px;left:55px;
  border-style:dashed;
  animation-duration:14s;
  animation-direction:reverse;
}
.circle-image{
  position:absolute;
  z-index:2;
  left:45px;top:55px;
  width:360px;height:360px;
  padding:9px;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#d9f4ff);
  box-shadow:0 30px 75px rgba(3,39,103,.27)!important;
  animation:floatPhoto 5s ease-in-out infinite;
}
.circle-image::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:5px solid transparent;
  border-top-color:#10bfe7;
  border-right-color:#0b62dd;
  animation:spin 5s linear infinite;
}
.circle-image img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.badge-floating{
  z-index:4;
  right:-8px!important;
  bottom:52px!important;
  min-width:190px;
  padding:13px!important;
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.9)!important;
  box-shadow:0 20px 45px rgba(4,43,103,.2)!important;
  backdrop-filter:blur(14px);
  animation:floatBadge 4s 1s ease-in-out infinite;
}
.badge-floating img{
  width:302px!important;
  height:302px!important;
  object-fit:cover!important;
}
.badge-floating h6{color:var(--bourse-blue)}
.badge-floating::before{
  content:"";
  position:absolute;
  width:12px;height:12px;
  right:18px;top:12px;
  border-radius:50%;
  background:#28d67d;
  box-shadow:0 0 0 7px rgba(40,214,125,.13);
}

/* Floating decorative dots */
.visual-container .bourse-dot{
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--bourse-cyan);
  box-shadow:0 0 0 7px rgba(19,198,232,.10);
  animation:dotFloat 3s ease-in-out infinite;
}
.visual-container .d1{left:2%;top:27%;animation-delay:.2s}
.visual-container .d2{right:4%;top:17%;animation-delay:.8s}
.visual-container .d3{left:11%;bottom:12%;animation-delay:1.4s}
.visual-container .d4{right:11%;bottom:25%;animation-delay:2s}

/* -------------------------
   General sections
   ------------------------- */
.section{position:relative}
.section.bg-light{
  background:
    linear-gradient(180deg,#f7fbff 0%,#eef7ff 100%)!important;
}
.section-title h2{
  color:var(--bourse-navy);
  font-weight:900;
  letter-spacing:-.03em;
}
.section-title p{color:var(--bourse-muted)}

/* Context cards */
#contexte .card{
  border-radius:var(--bourse-radius)!important;
  border:1px solid var(--bourse-border)!important;
  box-shadow:var(--bourse-shadow)!important;
  background:rgba(255,255,255,.84);
  transition:transform .35s ease,box-shadow .35s ease;
  overflow:hidden;
}
#contexte .card::before{
  content:"";
  display:block;
  height:5px;
  margin:-1.5rem -1.5rem 1.2rem;
  background:linear-gradient(90deg,var(--bourse-blue),var(--bourse-cyan));
}
#contexte .card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 70px rgba(5,48,118,.16)!important;
}

/* Main cards */
.card-affiche{
  border-radius:var(--bourse-radius)!important;
  border:1px solid var(--bourse-border)!important;
  box-shadow:var(--bourse-shadow)!important;
  transition:transform .35s ease,box-shadow .35s ease;
}
.card-affiche:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 70px rgba(5,48,118,.16)!important;
}
.card-header-affiche{
  position:relative;
  overflow:hidden;
  padding:17px 24px!important;
  letter-spacing:.04em;
  background:linear-gradient(90deg,#0676e9,#10bfe7)!important;
}
.card-header-affiche::after{
  content:"";
  position:absolute;
  top:0;left:-40%;
  width:30%;
  height:100%;
  transform:skewX(-18deg);
  background:rgba(255,255,255,.2);
  animation:headerShine 4.5s infinite;
}
.custom-bullet-list li,
.custom-numbered-list li{
  margin-bottom:11px!important;
  line-height:1.55;
}
.custom-bullet-list li::marker{color:var(--bourse-blue)}

/* Add visual separation to eligibility columns */
#eligibilite .card-affiche{height:100%}
#eligibilite .card-header-affiche.bg-primary{
  background:linear-gradient(90deg,#063b9e,#087ff5)!important;
}

/* -------------------------
   Timeline — animated
   ------------------------- */
.timeline-steps{
  position:relative;
  border:0!important;
  padding:30px 0 20px!important;
  margin:0!important;
}
.timeline-steps::before{
  content:"";
  position:absolute;
  left:28px;
  top:20px;
  bottom:20px;
  width:4px;
  border-radius:10px;
  background:linear-gradient(180deg,var(--bourse-cyan),var(--bourse-blue),var(--bourse-navy));
}
.timeline-step{
  position:relative;
  margin:0 0 22px 0!important;
  padding-left:76px;
}
.timeline-step::before{
  content:"";
  position:absolute;
  left:16px!important;
  top:23px!important;
  width:28px!important;
  height:28px!important;
  background:#fff!important;
  border:7px solid var(--bourse-blue);
  box-shadow:0 0 0 7px rgba(7,89,217,.10),0 8px 20px rgba(7,89,217,.18);
  z-index:2;
}
.timeline-content{
  padding:20px 22px;
  border-radius:18px;
  border:1px solid var(--bourse-border);
  background:#fff;
  box-shadow:0 13px 35px rgba(5,48,118,.08);
  transition:transform .3s ease,box-shadow .3s ease;
}
.timeline-content:hover{
  transform:translateX(8px);
  box-shadow:0 20px 45px rgba(5,48,118,.13);
}
.timeline-content .badge{
  border-radius:999px;
  padding:7px 11px;
  background:linear-gradient(90deg,var(--bourse-blue),var(--bourse-cyan))!important;
}
.timeline-content h6{
  margin-top:10px;
  color:var(--bourse-navy);
  font-weight:800;
}

/* -------------------------
   Countdown
   ------------------------- */
.bourse-countdown{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:18px 0 5px;
}
.count-unit{
  min-width:70px;
  padding:10px 9px;
  text-align:center;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,#062f8f,#087ff5);
  box-shadow:0 10px 22px rgba(7,89,217,.18);
}
.count-unit strong{
  display:block;
  font-size:1.45rem;
  line-height:1;
}
.count-unit span{
  font-size:.62rem;
  text-transform:uppercase;
  opacity:.78;
  letter-spacing:.08em;
}

/* -------------------------
   Submission banner
   ------------------------- */
.footer-banner-affiche{
  position:relative;
  overflow:hidden;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(19,198,232,.34),transparent 18rem),
    linear-gradient(135deg,#031e68,#0759d9 65%,#09aee2)!important;
  box-shadow:0 30px 80px rgba(3,38,105,.25)!important;
}
.footer-banner-affiche::before,
.footer-banner-affiche::after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  pointer-events:none;
}
.footer-banner-affiche::before{width:450px;height:450px;right:-180px;top:-270px}
.footer-banner-affiche::after{width:300px;height:300px;left:-180px;bottom:-200px}
.footer-banner-affiche > *{position:relative;z-index:2}

/* Submission email */
.footer-banner-affiche a[href^="mailto:"]{
  color:#fff!important;
  text-decoration:none!important;
  display:inline-block;
  padding:7px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  transition:.3s ease;
}
.footer-banner-affiche a[href^="mailto:"]:hover{
  background:#fff;
  color:var(--bourse-blue)!important;
  transform:translateY(-2px);
}

/* Floating apply button on mobile/desktop */
.bourse-floating-cta{
  position:fixed;
  z-index:999;
  right:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 17px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border-radius:999px;
  background:linear-gradient(90deg,#062e8e,#087ff5,#11c0e5);
  background-size:200% 100%;
  box-shadow:0 18px 40px rgba(5,48,118,.28);
  animation:ctaGradient 4s ease infinite,ctaFloat 3.2s ease-in-out infinite;
  transition:.3s ease;
}
.bourse-floating-cta:hover{
  color:#fff;
  transform:translateY(-4px) scale(1.03);
}
.bourse-floating-cta i{font-size:1.05rem}

/* -------------------------
   Reveal animations
   ------------------------- */
.bourse-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1);
}
.bourse-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* -------------------------
   Keyframes
   ------------------------- */
@keyframes bourseFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes floatPhoto{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-13px) rotate(1deg)}
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(-1deg)}
}
@keyframes dotFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-14px) scale(1.18)}
}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{0%,45%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
@keyframes buttonShine{0%,50%{left:-100px}75%,100%{left:130%}}
@keyframes headerShine{0%,60%{left:-40%}80%,100%{left:140%}}
@keyframes arrowPulse{
  0%,100%{transform:translateX(0);opacity:.7}
  50%{transform:translateX(8px);opacity:1}
}
@keyframes ctaFloat{
  0%,100%{box-shadow:0 18px 40px rgba(5,48,118,.28)}
  50%{box-shadow:0 24px 52px rgba(5,48,118,.38)}
}
@keyframes ctaGradient{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

/* Responsive */
@media (max-width:991px){
  .hero-bourse{padding:60px 0 55px;min-height:auto}
  .hero-bourse .row{min-height:auto}
  .visual-container{height:430px;margin-top:18px}
  .circle-image{width:310px;height:310px;left:50%;transform:translateX(-50%);top:45px}
  .circle-image:hover{transform:translateX(-50%) translateY(-5px)}
  .visual-container::before{width:365px;height:365px;left:50%;transform:translateX(-50%)}
  .visual-container::after{width:310px;height:310px;left:50%;transform:translateX(-50%)}
  .badge-floating{right:8%!important;bottom:25px!important}
}
@media (max-width:767px){
  .hero-bourse{padding:38px 0 48px}
  .hero-title{font-size:2.6rem!important}
  .year-highlight{font-size:4rem!important}
  .partner-badge{border-radius:18px!important;display:flex!important;align-items:center;flex-wrap:wrap}
  .visual-container{height:385px}
  .circle-image{width:265px;height:265px}
  .visual-container::before{width:315px;height:315px;top:20px}
  .visual-container::after{width:270px;height:270px;top:42px}
  .badge-floating{min-width:160px!important;right:0!important;bottom:18px!important}
  .badge-floating img{width:208px!important;height:208px!important}
  .bourse-floating-cta{right:14px;bottom:14px;padding:11px 14px;font-size:.86rem}
  .timeline-step{padding-left:58px}
  .timeline-steps::before{left:20px}
  .timeline-step::before{left:8px!important}
  .timeline-content{padding:16px}
  .bourse-countdown .count-unit{min-width:62px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}
div p{
    text-align: LEFT;
}

/* =========================================================
   ESPACE GRAPHIQUE DESKTOP — PBEEL-GL
   Visible uniquement sur ordinateur
   ========================================================= */

.desktop-hero-decoration{
  position:absolute;
  left:0;
  right:0;
  
  bottom:0;
  height:360px;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

/* Grande vague décorative */
.desktop-wave{
  position:absolute;
  width:120%;
  height:250px;
  left:-10%;
  bottom:-145px;

  background:
    linear-gradient(
      135deg,
      rgba(7,89,217,.055),
      rgba(19,198,232,.13)
    );

  border-top:2px solid rgba(19,198,232,.25);

  border-radius:50% 50% 0 0 / 35% 35% 0 0;

  transform:rotate(-2deg);
}

/* Deuxième ligne ondulée */
.desktop-wave::before{
  content:"";
  position:absolute;

  width:115%;
  height:210px;

  left:-7%;
  top:-35px;

  border-top:2px solid rgba(7,89,217,.12);

  border-radius:50% 50% 0 0 / 30% 30% 0 0;

  transform:rotate(1deg);
}

/* Texte décoratif */
.desktop-hero-content{
  position:absolute;
  left:50%;
  bottom:72px;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;

  white-space:nowrap;

  font-size:.72rem;
  font-weight:800;

  letter-spacing:.22em;

  color:rgba(7,89,217,.42);

  text-transform:uppercase;
}

.desktop-hero-content i{
  font-size:1.2rem;
  color:rgba(19,198,232,.65);
}

/* Lumières décoratives */
.desktop-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
}

.glow-one{
  width:180px;
  height:180px;

  right:18%;
  bottom:30px;

  background:radial-gradient(
    circle,
    rgba(19,198,232,.10),
    transparent 70%
  );
}

.glow-two{
  width:240px;
  height:240px;

  left:18%;
  bottom:0;

  background:radial-gradient(
    circle,
    rgba(7,89,217,.07),
    transparent 70%
  );
}


/* =========================================================
   TABLETTE + MOBILE
   La décoration disparaît complètement
   ========================================================= */

@media (max-width:991px){

  .desktop-hero-decoration{
    display:none!important;
  }

}
/* ==========================================================
   PBEEL-GL — CONSTELLATION INTERACTIVE
   Desktop uniquement
   ========================================================== */

.pbeel-constellation {

    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    width: min(1180px, calc(100% - 80px));
    height: 285px;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;

}


/* ==========================================================
   LIGNES DE CONNEXION
   ========================================================== */

.constellation-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

}


.constellation-lines path {

    fill: none;

    stroke: rgba(7,89,217,.16);

    stroke-width: 1.5;

    stroke-dasharray: 6 8;

    animation: constellationLine 5s linear infinite;

}


.constellation-lines path:nth-child(2) {
    animation-delay: 1s;
}

.constellation-lines path:nth-child(3) {
    animation-delay: 2s;
}

.constellation-lines path:nth-child(4) {
    animation-delay: 3s;
}


@keyframes constellationLine {

    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }

}


/* ==========================================================
   NOYAU CENTRAL
   ========================================================== */

.pbeel-core {

    position: absolute;

    left: 50%;
    top: 48%;

    width: 150px;
    height: 150px;

    transform: translate(-50%, -50%);

}


.core-inner {

    position: absolute;

    inset: 14px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #1598f5,
            #0759d9 55%,
            #062b86
        );

    box-shadow:
        0 18px 45px rgba(7,89,217,.30),
        0 0 50px rgba(19,198,232,.18);

    z-index: 5;

}


.core-small {

    font-size: .48rem;

    font-weight: 800;

    letter-spacing: .22em;

    color: rgba(255,255,255,.68);

}


.core-inner strong {

    margin-top: 3px;

    font-size: 1.15rem;

    font-weight: 900;

    letter-spacing: .03em;

    color: white;

}


.core-year {

    margin-top: 1px;

    font-size: 1.8rem;

    line-height: 1;

    font-weight: 900;

    color: #9cefff;

}


/* anneaux */

.core-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 1px solid rgba(19,198,232,.35);

}


.ring-one {

    animation:
        coreRotate 12s linear infinite;

}


.ring-two {

    inset: -15px;

    border-style: dashed;

    border-color: rgba(7,89,217,.22);

    animation:
        coreRotateReverse 18s linear infinite;

}


@keyframes coreRotate {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes coreRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }

}


/* ==========================================================
   CARTES FLOTTANTES
   ========================================================== */

.constellation-card {

    position: absolute;

    min-width: 175px;

    padding: 12px 17px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 16px;

    background: rgba(255,255,255,.82);

    border: 1px solid rgba(7,89,217,.10);

    box-shadow:
        0 15px 35px rgba(7,49,140,.10);

    backdrop-filter: blur(12px);

    z-index: 6;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.constellation-card:hover {

    box-shadow:
        0 20px 45px rgba(7,89,217,.17);

}


.constellation-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #0759d9;

    background:
        linear-gradient(
            145deg,
            rgba(19,198,232,.14),
            rgba(7,89,217,.08)
        );

}


.constellation-icon i {

    font-size: 1.05rem;

}


.constellation-card small {

    display: block;

    margin-bottom: 2px;

    font-size: .48rem;

    font-weight: 800;

    letter-spacing: .16em;

    color: #7b8ba5;

}


.constellation-card strong {

    display: block;

    font-size: .88rem;

    font-weight: 800;

    color: #10254b;

}


/* ==========================================================
   POSITIONS
   ========================================================== */

.card-left-top {

    left: 9%;

    top: 28px;

}


.card-right-top {

    right: 9%;

    top: 28px;

}


.card-left-bottom {

    left: 20%;

    bottom: 40px;

}


.card-right-bottom {

    right: 20%;

    bottom: 40px;

}


/* ==========================================================
   ANIMATION FLOTTANTE DES CARTES
   ========================================================== */

.card-left-top {

    animation: cardFloatOne 5s ease-in-out infinite;

}


.card-right-top {

    animation: cardFloatTwo 6s ease-in-out infinite;

}


.card-left-bottom {

    animation: cardFloatThree 5.5s ease-in-out infinite;

}


.card-right-bottom {

    animation: cardFloatFour 6.5s ease-in-out infinite;

}


@keyframes cardFloatOne {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


@keyframes cardFloatTwo {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

}


@keyframes cardFloatThree {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }

}


@keyframes cardFloatFour {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================================
   PARTICULES
   ========================================================== */

.constellation-particle {

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #13c6e8;

    box-shadow:
        0 0 0 5px rgba(19,198,232,.08),
        0 0 18px rgba(19,198,232,.55);

    animation: particlePulse 3s ease-in-out infinite;

}


.particle-1 {
    left: 29%;
    top: 25%;
}

.particle-2 {
    left: 39%;
    top: 67%;
    animation-delay: .4s;
}

.particle-3 {
    left: 61%;
    top: 28%;
    animation-delay: .8s;
}

.particle-4 {
    left: 72%;
    top: 68%;
    animation-delay: 1.2s;
}

.particle-5 {
    left: 15%;
    top: 58%;
    animation-delay: 1.6s;
}

.particle-6 {
    right: 15%;
    top: 57%;
    animation-delay: 2s;
}

.particle-7 {
    left: 45%;
    top: 18%;
    animation-delay: 2.4s;
}

.particle-8 {
    right: 45%;
    bottom: 15%;
    animation-delay: 2.8s;
}


@keyframes particlePulse {

    0%,100% {
        opacity: .35;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }

}


/* ==========================================================
   TEXTE BAS
   ========================================================== */

.constellation-footer {

    position: absolute;

    left: 50%;
    bottom: 4px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 13px;

    width: 70%;

}


.constellation-footer span {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(7,89,217,.15)
        );

}


.constellation-footer span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(7,89,217,.15),
            transparent
        );

}


.constellation-footer p {

    margin: 0;

    white-space: nowrap;

    font-size: .54rem;

    font-weight: 800;

    letter-spacing: .18em;

    color: rgba(7,89,217,.45);

}


.constellation-footer b {

    color: #13c6e8;

    margin: 0 4px;

}


/* ==========================================================
   TABLETTE / MOBILE
   ========================================================== */

@media (max-width: 991px) {

    .pbeel-constellation {

        display: none !important;

    }

}