*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Arial,sans-serif;
  color:#07194c;
  background:
    radial-gradient(circle at 78% 18%,rgba(90,170,255,.22),transparent 32%),
    linear-gradient(120deg,#fff 0%,#fbfdff 50%,#eaf5ff 100%);
}

.nav{
  height:90px;
  padding:0 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.logo{
  color:#176cf4;
  text-decoration:none;
  font-size:30px;
  font-weight:800;
  letter-spacing:.13em;
}

.links{
  display:flex;
  gap:35px;
}

.links a{
  color:#071335;
  text-decoration:none;
  font-size:17px;
}

.coming{
  color:white;
  background:#0867ef;
  padding:14px 20px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}

.hero{
  min-height:680px;
  padding:45px 5vw 20px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:30px;
}

.hero-copy{
  max-width:600px;
}

.eyebrow{
  color:#0769f5;
  font-size:15px;
  font-weight:800;
  letter-spacing:.28em;
}

.hero h1{
  margin:28px 0;
  font-size:clamp(70px,7vw,108px);
  line-height:.94;
  letter-spacing:-.055em;
}

.hero h1 span{
  color:#3c9dfc;
}

.hero-copy p{
  max-width:510px;
  color:#53668c;
  font-size:20px;
  line-height:1.7;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:22px;
  margin-top:18px;
  padding:17px 28px;
  color:white;
  background:linear-gradient(135deg,#0b5ee9,#157cff);
  border-radius:15px;
  text-decoration:none;
  font-size:18px;
  font-weight:700;
  box-shadow:0 15px 35px rgba(10,100,240,.22);
}

.earth-zone{
  min-height:620px;
  position:relative;
  display:grid;
  place-items:center;
}

.earth{
  width:min(620px,43vw);
  aspect-ratio:1;
  background:url("earth.png") center/contain no-repeat;
  filter:drop-shadow(0 35px 35px rgba(19,91,190,.28));
  position:relative;
  z-index:2;
}

.earth-light{
  display:none;
}

.earth-shadow{
  position:absolute;
  bottom:30px;
  width:430px;
  height:45px;
  border-radius:50%;
  background:rgba(20,92,190,.25);
  filter:blur(25px);
}

.orbit{
  position:absolute;
  border:1px solid rgba(80,160,245,.13);
  border-radius:50%;
}

.orbit1{width:670px;height:670px}
.orbit2{width:760px;height:760px}
.orbit3{width:820px;height:600px}

.explore-card{
  width:calc(100% - 64px);
  margin:0 auto 60px;
  padding:35px 55px;
  border-radius:30px;
  background:rgba(255,255,255,.92);
  box-shadow:0 25px 70px rgba(30,80,150,.08);
  display:grid;
  grid-template-columns:420px 1fr;
  gap:40px;
  align-items:center;
}

.explore-text h2{
  margin:14px 0;
  font-size:36px;
  line-height:1.08;
}

.explore-text p{
  color:#53668b;
  line-height:1.6;
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.feature{
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  color:#07194c;
  border-left:1px solid #dce6f4;
}

.feature:first-child{border-left:0}

.feature-icon{
  width:66px;
  height:66px;
  margin-bottom:12px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#edf5ff;
  color:#0769f5;
  font-size:29px;
}

.feature strong{
  margin-bottom:6px;
  font-size:17px;
}

.feature span{
  color:#53668b;
  font-size:14px;
  line-height:1.5;
}

@media(max-width:1050px){
  .links{display:none}
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin:auto}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .earth{width:min(520px,80vw)}
  .explore-card{grid-template-columns:1fr}
}

@media(max-width:650px){
  .nav{padding:0 20px}
  .logo{font-size:23px}
  .hero{padding:55px 20px}
  .hero h1{font-size:58px}
  .earth-zone{min-height:390px}
  .earth{width:330px}
  .orbit{display:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .feature{border-left:0}
}

/* =========================================================
   ORYEL — FEATURE STORY SECTIONS
   ========================================================= */

.oryel-zone{
  width:min(1280px,calc(100% - 48px));
  margin:0 auto;
  padding:125px 0;
  scroll-margin-top:90px;
}

.tinted-zone{
  width:100%;
  max-width:none;
  padding-left:max(24px,calc((100% - 1280px)/2));
  padding-right:max(24px,calc((100% - 1280px)/2));
  background:
    radial-gradient(circle at 80% 20%,rgba(78,161,255,.12),transparent 30%),
    linear-gradient(180deg,rgba(239,247,255,.45),rgba(255,255,255,.2));
}

.zone-heading{
  margin-bottom:48px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.zone-heading > div:first-child{
  max-width:720px;
}

.zone-heading h2,
.new-coming h2{
  margin:12px 0 18px;
  font-size:clamp(48px,5.5vw,76px);
  line-height:1.02;
  letter-spacing:-.05em;
}

.zone-heading p{
  margin:0;
  max-width:650px;
  color:#596b8d;
  font-size:19px;
  line-height:1.65;
}

.carousel-arrows{
  display:flex;
  gap:10px;
  flex-shrink:0;
}

.carousel-arrow{
  width:52px;
  height:52px;
  border:1px solid rgba(20,70,140,.10);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:#0a61e8;
  font-size:23px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(30,80,150,.08);
  transition:transform .2s,background .2s;
}

.carousel-arrow:hover{
  transform:translateY(-2px);
  background:#edf6ff;
}

.feature-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:5px 2px 30px;
}

.feature-carousel::-webkit-scrollbar{
  display:none;
}

.story-card{
  flex:0 0 min(390px,82vw);
  min-height:500px;
  padding:26px;
  border-radius:32px;
  scroll-snap-align:start;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(31,82,150,.09);
}

.story-card h3{
  margin:9px 0 12px;
  font-size:29px;
  letter-spacing:-.03em;
}

.story-card > p{
  margin:0;
  color:#5b6d8d;
  line-height:1.65;
}

.story-number{
  margin-top:25px;
  color:#0d6cf5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
}

.story-visual{
  height:265px;
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#eef6ff;
}

.world-visual{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 40% 30%,rgba(255,255,255,.8),transparent 25%),
    linear-gradient(145deg,#dff2ff,#c9e6fb);
}

.mini-world{
  width:195px;
  height:195px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 31% 40%,#55ba77 0 11%,transparent 12%),
    radial-gradient(ellipse at 62% 35%,#55ba77 0 14%,transparent 15%),
    radial-gradient(ellipse at 57% 62%,#48aa6c 0 10%,transparent 11%),
    radial-gradient(circle at 40% 35%,#56bcff,#0d6dd9 65%,#07479b);
  box-shadow:
    inset -25px -20px 50px rgba(0,30,110,.25),
    0 20px 45px rgba(20,105,210,.22);
}

.status-visual,
.wishlist-visual,
.journey-visual{
  background:linear-gradient(145deg,#dff1ff,#edf7ff);
}

.status-country{
  width:170px;
  height:125px;
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:#40c888;
  border-radius:47% 53% 45% 55%;
}

.status-pill{
  position:absolute;
  left:20px;
  bottom:20px;
  padding:8px 13px;
  border-radius:14px;
  color:white;
  font-size:12px;
  font-weight:700;
}

.green-pill{background:#35bc7d}
.yellow-pill{background:#e1b82f}
.blue-pill{background:#1478ef}

.wishlist-dot{
  position:absolute;
  border-radius:50%;
  background:#f2c84b;
  box-shadow:0 8px 18px rgba(180,140,20,.2);
}

.wishlist-dot.one{width:70px;height:70px;left:55px;top:55px}
.wishlist-dot.two{width:95px;height:95px;right:50px;top:80px}
.wishlist-dot.three{width:48px;height:48px;left:145px;bottom:45px}

.journey-route{
  position:absolute;
  width:210px;
  height:100px;
  left:55px;
  top:70px;
  border-top:3px dashed #1877f2;
  border-radius:50%;
  transform:rotate(-10deg);
}

.journey-pin{
  width:18px;
  height:18px;
  position:absolute;
  border-radius:50%;
  background:#1877f2;
  border:4px solid white;
  box-shadow:0 5px 15px rgba(20,100,220,.25);
}

.journey-pin.start{left:55px;top:130px}
.journey-pin.end{right:57px;top:91px}

.scan-visual-small{
  background:linear-gradient(150deg,#82bce5,#e0bf85 56%,#86664b 57%);
}

.scan-corners{
  position:absolute;
  inset:32px;
  border:2px solid rgba(255,255,255,.8);
  border-left-color:transparent;
  border-right-color:transparent;
}

.mini-scan-line{
  position:absolute;
  left:12%;
  top:48%;
  width:76%;
  height:2px;
  background:white;
  box-shadow:0 0 16px white;
}

.scan-visual-small strong{
  position:absolute;
  left:20px;
  bottom:18px;
  color:white;
}

.challenge-symbol{
  width:100px;
  height:100px;
  margin:25px 0 95px;
  display:grid;
  place-items:center;
  border-radius:30px;
  color:white;
  font-size:35px;
  font-weight:800;
  background:linear-gradient(145deg,#1e76ef,#63c7ff);
  box-shadow:0 20px 45px rgba(30,110,230,.2);
}

.challenge-violet .challenge-symbol{
  background:linear-gradient(145deg,#7468f5,#a987ff);
}

.challenge-orange .challenge-symbol{
  background:linear-gradient(145deg,#ff8d3d,#ffbd55);
}

.challenge-gold .challenge-symbol{
  background:linear-gradient(145deg,#e8aa28,#ffd96a);
}

.challenge-city .challenge-symbol{
  background:linear-gradient(145deg,#e24e9d,#8056ee);
}

.feed-preview{
  height:270px;
  padding:14px;
  border-radius:23px;
  background:#f6f9fd;
}

.feed-preview-top{
  margin-bottom:12px;
  display:flex;
  gap:10px;
  align-items:center;
}

.feed-avatar{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  background:linear-gradient(145deg,#1d6ce8,#64c7ff);
  font-weight:700;
}

.feed-preview-top strong,
.feed-preview-top small{
  display:block;
}

.feed-preview-top small{
  color:#6b7994;
}

.feed-preview-photo{
  height:195px;
  padding:16px;
  border-radius:18px;
  display:flex;
  align-items:flex-end;
  color:white;
  background:linear-gradient(145deg,#67b3e8,#e9c47f 54%,#8d6848 55%);
}

.feed-preview-photo span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.discovery-visual{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#e2f3ff,#f4f9ff);
}

.discovery-card{
  position:absolute;
  min-width:120px;
  padding:15px 20px;
  border-radius:18px;
  color:#0d4b9b;
  background:white;
  text-align:center;
  font-weight:700;
  box-shadow:0 15px 35px rgba(40,90,150,.12);
}

.d1{transform:translate(-65px,-50px) rotate(-6deg)}
.d2{transform:translate(60px,15px) rotate(5deg)}
.d3{transform:translate(-40px,78px) rotate(3deg)}

.share-visual{
  padding:20px;
}

.share-photo{
  height:150px;
  border-radius:18px;
  background:linear-gradient(145deg,#7abbea,#eac889);
}

.share-line{
  width:85%;
  height:10px;
  margin-top:20px;
  border-radius:10px;
  background:#d7e5f5;
}

.share-line.short{width:55%}

.friends-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}

.friends-visual span{
  width:70px;
  height:70px;
  margin-left:-12px;
  display:grid;
  place-items:center;
  border:5px solid #eef6ff;
  border-radius:50%;
  color:white;
  background:linear-gradient(145deg,#236de4,#66c5ff);
  font-weight:800;
}

.profile-mini{
  text-align:center;
  background:#f2f7fd;
}

.profile-mini-cover{
  height:115px;
  background:linear-gradient(135deg,#55a9ff,#79d8e7,#a6e2cd);
}

.profile-mini-avatar{
  width:75px;
  height:75px;
  margin:-37px auto 8px;
  position:relative;
  display:grid;
  place-items:center;
  border:5px solid white;
  border-radius:50%;
  color:white;
  background:#1975ed;
  font-weight:800;
}

.profile-mini strong,
.profile-mini small{
  display:block;
}

.profile-mini small{
  margin-top:4px;
  color:#687896;
}

.stats-visual{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  text-align:center;
}

.stats-visual strong,
.stats-visual span{
  display:block;
}

.stats-visual strong{
  font-size:29px;
}

.stats-visual span{
  margin-top:6px;
  color:#6b7893;
  font-size:11px;
}

.badges-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.mini-badge{
  width:85px;
  height:105px;
  display:grid;
  place-items:center;
  border-radius:26px;
  color:white;
  font-size:27px;
  font-weight:800;
  box-shadow:0 15px 35px rgba(50,80,130,.13);
}

.bronze-b{background:linear-gradient(145deg,#bf8050,#70452a)}
.silver-b{background:linear-gradient(145deg,#d4dae2,#818b98)}
.gold-b{background:linear-gradient(145deg,#ffd76b,#dfa218)}

.ranking-visual{
  padding:26px 18px;
}

.ranking-visual div{
  padding:14px;
  display:grid;
  grid-template-columns:25px 1fr auto;
  align-items:center;
  border-radius:15px;
}

.ranking-visual .you{
  background:#dfedff;
}

.ranking-visual em{
  color:#657594;
  font-size:11px;
  font-style:normal;
}

.new-coming{
  min-height:650px;
  width:min(900px,calc(100% - 40px));
  margin:auto;
  padding:120px 0;
  text-align:center;
  display:grid;
  place-items:center;
  align-content:center;
  scroll-margin-top:90px;
}

.coming-logo{
  width:115px;
  height:115px;
  margin-bottom:30px;
  display:grid;
  place-items:center;
  border-radius:34px;
  color:white;
  background:linear-gradient(145deg,#0b61e6,#63caff);
  font-size:42px;
  font-weight:800;
  box-shadow:0 25px 60px rgba(20,110,240,.25);
}

.new-coming p{
  color:#61718e;
  font-size:20px;
}

@media(max-width:800px){
  .oryel-zone{
    width:calc(100% - 28px);
    padding:85px 0;
  }

  .zone-heading{
    align-items:flex-start;
  }

  .zone-heading h2{
    font-size:49px;
  }

  .zone-heading p{
    font-size:17px;
  }

  .carousel-arrow{
    width:46px;
    height:46px;
  }

  .story-card{
    flex-basis:82vw;
  }
}

/* =========================================================
   ORYEL — SCAN CORE EXPERIENCE
   ========================================================= */

.logo{
  display:flex;
  align-items:center;
  gap:11px;
}

.logo img{
  width:38px;
  height:38px;
  border-radius:11px;
  object-fit:cover;
}

.logo span{
  font-size:26px;
  font-weight:800;
  letter-spacing:.13em;
}


/* swipe natif, sans flèches */

.carousel-arrows{
  display:none !important;
}

.feature-carousel{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
}

.feature-carousel::-webkit-scrollbar{
  display:none;
}


/* Map status */

.visited-visual,
.wishlist-new{
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#e9f6ff,#f5fbff);
}

.big-status-icon{
  width:135px;
  height:135px;
  display:grid;
  place-items:center;
  border-radius:42px;
  font-size:72px;
  font-weight:800;
}

.visited-check{
  color:white;
  background:linear-gradient(145deg,#34c783,#55dca0);
  box-shadow:0 24px 50px rgba(40,190,120,.22);
}

.wishlist-heart{
  color:white;
  background:linear-gradient(145deg,#f5ca3c,#ffd965);
  box-shadow:0 24px 50px rgba(220,175,30,.20);
}


/* Scan */

.scan-zone{
  width:100%;
  padding:135px max(24px,calc((100% - 1280px)/2));
  scroll-margin-top:90px;

  background:
    radial-gradient(circle at 80% 15%,
      rgba(89,202,255,.30),
      transparent 27%),

    radial-gradient(circle at 20% 80%,
      rgba(38,108,255,.20),
      transparent 30%),

    linear-gradient(
      145deg,
      #061a4c,
      #073d91 48%,
      #0874df
    );

  color:white;
}

.scan-intro{
  max-width:900px;
  margin-bottom:55px;
}

.scan-eyebrow{
  color:#8edfff;
}

.scan-intro h2{
  margin:13px 0 22px;
  font-size:clamp(58px,7vw,96px);
  line-height:.96;
  letter-spacing:-.055em;
}

.scan-intro p{
  max-width:720px;
  color:rgba(255,255,255,.74);
  font-size:21px;
  line-height:1.7;
}


.scan-hero-card{
  margin-bottom:45px;
  padding:45px;

  border-radius:40px;

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

  border:
    1px solid
    rgba(255,255,255,.17);

  backdrop-filter:blur(28px);

  display:grid;
  grid-template-columns:420px 1fr;
  gap:70px;
  align-items:center;
}


.scan-device{
  padding:14px;
  border-radius:45px;
  background:#080a0d;

  box-shadow:
    0 35px 80px
    rgba(0,0,0,.30);
}


.scan-camera-label{
  padding:20px 0 15px;
  text-align:center;
  font-weight:700;
}


.scan-camera{
  height:510px;
  position:relative;
  overflow:hidden;

  border-radius:30px;

  background:
    linear-gradient(
      rgba(10,30,50,.10),
      rgba(10,30,50,.10)
    ),
    linear-gradient(
      150deg,
      #75b5e1,
      #dbbc82 53%,
      #806148 54%
    );
}


.scan-corners{
  position:absolute;
  inset:35px;

  border:
    2px solid
    rgba(255,255,255,.85);

  border-left-color:transparent;
  border-right-color:transparent;
}


.scan-beam{
  width:82%;
  height:2px;

  position:absolute;
  left:9%;
  top:25%;

  background:white;

  box-shadow:
    0 0 20px white,
    0 0 45px rgba(95,200,255,.9);

  animation:
    scanBeam 3s ease-in-out infinite;
}


.identified-place{
  position:absolute;

  left:20px;
  right:20px;
  bottom:20px;

  padding:18px;

  border-radius:20px;

  background:
    rgba(5,15,28,.40);

  backdrop-filter:blur(20px);
}


.identified-place small,
.identified-place strong,
.identified-place span{
  display:block;
}


.identified-place small{
  margin-bottom:6px;

  font-size:9px;
  font-weight:800;

  letter-spacing:.17em;

  color:#a9e3ff;
}


.identified-place strong{
  font-size:23px;
}


.identified-place span{
  margin-top:4px;

  color:
    rgba(255,255,255,.70);
}


.scan-main-button{
  margin-top:14px;

  padding:17px;

  border-radius:17px;

  text-align:center;

  background:
    linear-gradient(
      135deg,
      #147cff,
      #47b8ff
    );

  font-weight:700;
}


.scan-message span{
  color:#91e0ff;

  font-size:11px;
  font-weight:800;

  letter-spacing:.16em;
}


.scan-message h3{
  margin:13px 0 18px;

  max-width:560px;

  font-size:
    clamp(42px,5vw,68px);

  line-height:1.04;

  letter-spacing:-.045em;
}


.scan-message p{
  max-width:550px;

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

  font-size:19px;

  line-height:1.7;
}


.scan-carousel .story-card{
  background:
    rgba(255,255,255,.11);

  border:
    1px solid
    rgba(255,255,255,.17);

  box-shadow:none;
}


.scan-story h3{
  color:white;
}


.scan-story > p{
  color:
    rgba(255,255,255,.68);
}


.scan-story .story-number{
  color:#8addff;
}


.scan-feature-icon{
  width:95px;
  height:95px;

  margin:
    25px 0
    95px;

  display:grid;
  place-items:center;

  border-radius:30px;

  color:#0965df;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #cbefff
    );

  font-size:40px;
  font-weight:800;

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.15);
}


/* local challenge */

.challenge-local .challenge-symbol{
  background:
    linear-gradient(
      145deg,
      #18a5dd,
      #50d9d0
    );
}


.challenge-badges .challenge-symbol{
  background:
    linear-gradient(
      145deg,
      #d9499a,
      #7755ed
    );
}


/* Profile */

.profile-stat-grid{
  min-height:270px;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;
}


.profile-stat-grid div{
  padding:22px;

  border-radius:22px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  background:#f1f7ff;
}


.profile-stat-grid strong{
  font-size:31px;
}


.profile-stat-grid span{
  margin-top:5px;

  color:#61718f;

  font-size:12px;
}


.rarity-grid{
  min-height:270px;

  display:flex;

  flex-wrap:wrap;

  align-items:center;

  justify-content:center;

  gap:10px;
}


.rarity{
  min-width:100px;

  padding:22px 13px;

  border-radius:24px;

  text-align:center;

  color:white;

  font-size:12px;
  font-weight:800;

  box-shadow:
    0 15px 30px
    rgba(30,60,100,.12);
}


.bronze-r{
  background:
    linear-gradient(145deg,#ba7745,#75472a);
}

.silver-r{
  background:
    linear-gradient(145deg,#d7dce3,#818b98);
}

.gold-r{
  background:
    linear-gradient(145deg,#ffd667,#dfa216);
}

.legendary-r{
  background:
    linear-gradient(145deg,#7958ee,#db4ca5);
}

.ruby-r{
  background:
    linear-gradient(145deg,#ff4569,#a90d3c);
}


.compare-preview{
  min-height:270px;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  gap:15px;

  align-items:center;
}


.compare-preview > div:not(.compare-vs){
  padding:25px 15px;

  border-radius:23px;

  text-align:center;

  background:#f1f7ff;
}


.compare-preview span,
.compare-preview strong,
.compare-preview small{
  display:block;
}


.compare-preview span{
  color:#697995;

  font-size:12px;
}


.compare-preview strong{
  margin-top:9px;

  font-size:19px;
}


.compare-preview small{
  margin-top:5px;

  color:#1572ec;
}


.compare-vs{
  color:#1471ed;

  font-size:11px;
  font-weight:900;
}


@keyframes scanBeam{
  0%,100%{
    top:22%;
    opacity:.45;
  }

  50%{
    top:76%;
    opacity:1;
  }
}


@media(max-width:900px){

  .scan-hero-card{
    grid-template-columns:1fr;
    padding:26px;
  }

  .scan-device{
    width:min(420px,100%);
    margin:auto;
  }

  .scan-message{
    text-align:center;
  }

  .scan-message p{
    margin-left:auto;
    margin-right:auto;
  }

}

/* =========================================================
   ORYEL — INTERACTIVE LOCKED CAROUSELS
   ========================================================= */

.carousel-arrows{
  display:flex !important;
  align-items:center;
  gap:10px;
}

.carousel-arrow{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(12,80,180,.10);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#0b68ef;
  font-size:23px;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(30,80,150,.10);
  transition:
    transform .22s ease,
    opacity .22s ease,
    background .22s ease;
}

.carousel-arrow:hover{
  transform:translateY(-2px);
  background:#edf6ff;
}

.carousel-arrow:disabled{
  opacity:.28;
  cursor:default;
  transform:none;
}

.feature-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

.feature-carousel::-webkit-scrollbar{
  display:none;
}

.story-card{
  scroll-snap-align:start;
  scroll-snap-stop:always;
  transition:
    opacity .32s ease,
    transform .32s ease;
}

.feature-carousel .story-card:not(.is-current){
  opacity:.70;
  transform:scale(.975);
}

.feature-carousel .story-card.is-current{
  opacity:1;
  transform:scale(1);
}

.carousel-progress{
  min-width:54px;
  height:34px;
  padding:0 12px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#526584;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,80,160,.08);
  font-size:12px;
  font-weight:700;
}

@media(max-width:700px){
  .carousel-arrow{
    width:45px;
    height:45px;
  }

  .carousel-progress{
    min-width:48px;
  }
}

/* =========================================================
   ORYEL — STRONG SCROLL REVEAL
   ========================================================= */

/* La section elle-même reste visible */
#map,
#challenges,
#scan,
#explore,
#profile{
  opacity:1 !important;
  transform:none !important;
}

/* éléments animés */
.reveal-title,
.reveal-copy,
.reveal-carousel{
  opacity:0 !important;
  will-change:transform,opacity,filter;
}

/* titre */
.reveal-title{
  transform:translateY(65px) scale(.97);
  filter:blur(10px);

  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    filter .85s ease;
}

/* description */
.reveal-copy{
  transform:translateY(38px);
  filter:blur(6px);

  transition:
    opacity .75s ease .14s,
    transform .85s cubic-bezier(.16,1,.3,1) .14s,
    filter .75s ease .14s;
}

/* cartes */
.reveal-carousel{
  transform:translateY(70px) scale(.985);
  filter:blur(8px);

  transition:
    opacity .85s ease .28s,
    transform 1s cubic-bezier(.16,1,.3,1) .28s,
    filter .85s ease .28s;
}

/* état visible */

.scroll-revealed .reveal-title,
.scroll-revealed .reveal-copy,
.scroll-revealed .reveal-carousel{
  opacity:1 !important;
  transform:translateY(0) scale(1);
  filter:blur(0);
}


/* animation individuelle des cartes */

.reveal-carousel .story-card{
  opacity:0;
  transform:translateY(35px);
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.16,1,.3,1);
}

.scroll-revealed .reveal-carousel .story-card{
  opacity:1;
  transform:translateY(0);
}

.scroll-revealed .reveal-carousel .story-card:nth-child(1){
  transition-delay:.32s;
}

.scroll-revealed .reveal-carousel .story-card:nth-child(2){
  transition-delay:.40s;
}

.scroll-revealed .reveal-carousel .story-card:nth-child(3){
  transition-delay:.48s;
}

.scroll-revealed .reveal-carousel .story-card:nth-child(4){
  transition-delay:.56s;
}

.scroll-revealed .reveal-carousel .story-card:nth-child(5){
  transition-delay:.64s;
}

.scroll-revealed .reveal-carousel .story-card:nth-child(6){
  transition-delay:.72s;
}

/* =========================================================
   ORYEL — ACTIVE CAROUSEL CARD
   ========================================================= */

.feature-carousel{
  padding-top:18px;
  padding-bottom:35px;
}

.story-card{
  opacity:.58 !important;
  transform:scale(.955) translateY(9px) !important;

  transition:
    opacity .38s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease !important;
}

.story-card.is-current{
  opacity:1 !important;

  transform:
    scale(1)
    translateY(0) !important;

  box-shadow:
    0 32px 80px rgba(25,75,145,.16) !important;
}

.story-card.is-current:hover{
  transform:
    scale(1.01)
    translateY(-3px) !important;
}


/* flèches */

.carousel-arrows{
  display:flex !important;
  align-items:center;
  gap:10px;
}

.carousel-arrow{
  width:52px;
  height:52px;

  border:1px solid #dce8f7;
  border-radius:50%;

  background:white;

  color:#096cf0;

  font-size:23px;

  cursor:pointer;

  box-shadow:
    0 12px 28px
    rgba(28,77,145,.10);

  transition:
    transform .2s ease,
    opacity .2s ease,
    background .2s ease;
}

.carousel-arrow:hover{
  transform:translateY(-2px);
  background:#eef6ff;
}

.carousel-arrow:disabled{
  opacity:.25;
  transform:none;
  cursor:default;
}


/* vraie icône ORYEL */

.logo{
  display:flex;
  align-items:center;
  gap:11px;
}

.logo img{
  width:42px;
  height:42px;

  border-radius:12px;

  object-fit:cover;

  box-shadow:
    0 8px 22px
    rgba(20,100,225,.18);
}

.logo span{
  color:#176cf4;

  font-size:28px;
  font-weight:800;

  letter-spacing:.13em;
}


/* MAP */

.map-state-visual{
  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #edf8ff,
      #f8fcff
    );
}

.map-state-icon{
  width:138px;
  height:138px;

  display:grid;
  place-items:center;

  border-radius:42px;

  color:white;

  font-size:72px;
  font-weight:800;
}

.visited-state{
  background:
    linear-gradient(
      145deg,
      #29bd78,
      #54dda1
    );

  box-shadow:
    0 22px 50px
    rgba(34,188,116,.24);
}

.wishlist-state{
  background:
    linear-gradient(
      145deg,
      #f3c52f,
      #ffdc65
    );

  font-size:68px;

  box-shadow:
    0 22px 50px
    rgba(218,174,25,.22);
}

.map-state-label{
  position:absolute;

  left:20px;
  bottom:20px;

  padding:8px 14px;

  border-radius:14px;

  color:white;

  font-size:12px;
  font-weight:700;
}

.visited-label{
  background:#2bbe7c;
}

.wishlist-label{
  background:#e5b92d;
}


/* PROFILE STATS */

.profile-stat-grid{
  min-height:270px;

  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.profile-stat-grid > div{
  padding:22px;

  border-radius:22px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:#f1f7ff;
}

.profile-stat-grid strong{
  font-size:30px;
}

.profile-stat-grid span{
  margin-top:5px;

  color:#62728f;

  font-size:12px;
}


/* BADGE RARITIES */

.rarity-showcase{
  min-height:270px;

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

  gap:10px;
}

.rarity-badge{
  width:96px;
  height:112px;

  display:grid;
  place-items:center;
  align-content:center;

  border-radius:28px;

  color:white;

  box-shadow:
    0 18px 38px
    rgba(35,65,105,.16);
}

.rarity-badge b{
  font-size:28px;
}

.rarity-badge span{
  margin-top:5px;
  font-size:10px;
  font-weight:700;
}

.bronze-rarity{
  background:
    linear-gradient(145deg,#c28250,#714328);
}

.silver-rarity{
  background:
    linear-gradient(145deg,#dae0e7,#808a98);
}

.gold-rarity{
  background:
    linear-gradient(145deg,#ffdb70,#dfa117);
}

.legendary-rarity{
  background:
    linear-gradient(145deg,#7455ef,#df4ea5);
}

.ruby-rarity{
  background:
    linear-gradient(145deg,#ff4a70,#a80e3e);
}


/* FRIEND COMPARISON */

.progress-compare{
  min-height:270px;

  display:grid;
  grid-template-columns:1fr auto 1fr;

  gap:16px;

  align-items:center;
}

.compare-person{
  padding:24px 14px;

  text-align:center;

  border-radius:24px;

  background:#f1f7ff;
}

.compare-person span,
.compare-person strong,
.compare-person small{
  display:block;
}

.compare-person span{
  margin-bottom:15px;

  color:#596a89;

  font-size:13px;
  font-weight:700;
}

.compare-person strong{
  margin-top:10px;

  color:#07194c;

  font-size:25px;
}

.compare-person small{
  margin-top:2px;

  color:#687894;
}

.compare-middle{
  color:#1472ed;

  font-size:11px;
  font-weight:900;
}

/* =========================================================
   ORYEL — CAROUSEL FINAL POLISH
   ========================================================= */

/*
 * Important :
 * espace réel avant/après les cartes pour que
 * l'ombre de la première ne soit jamais coupée.
 */

.feature-carousel{
  box-sizing:border-box;

  padding:
    24px
    40px
    45px !important;

  margin-left:-40px !important;
  margin-right:-40px !important;

  width:calc(100% + 80px) !important;

  scroll-padding-left:40px;

  overflow-x:auto;
  overflow-y:visible;

  scrollbar-width:none;
}

.feature-carousel::-webkit-scrollbar{
  display:none;
}


/* carte interactive */

.story-card{
  position:relative;

  cursor:pointer;

  opacity:.62 !important;

  transform:
    translateY(9px)
    scale(.96) !important;

  border:
    1px solid
    rgba(218,230,245,.9) !important;

  background:#fff !important;

  box-shadow:
    0 18px 48px
    rgba(24,72,135,.07) !important;

  transition:
    opacity .38s ease,
    transform .48s cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease,
    border-color .3s ease !important;
}


/* sélection */

.story-card.is-current{
  z-index:2;

  opacity:1 !important;

  transform:
    translateY(0)
    scale(1) !important;

  border-color:
    rgba(105,160,235,.18) !important;

  box-shadow:
    0 28px 70px
    rgba(27,81,151,.14) !important;
}


/* feedback clic */

.story-card:active{
  transform:
    scale(.985) !important;
}


/* COUNTRY INFORMATION */

.country-info-visual{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:34px;

  background:
    linear-gradient(
      145deg,
      #edf7ff,
      #f8fbff
    );
}

.country-info-flag{
  width:76px;
  height:76px;

  display:grid;
  place-items:center;

  border-radius:22px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #2375eb,
      #59bfff
    );

  font-weight:800;
}

.country-info-lines{
  margin-top:27px;
}

.country-info-lines span{
  width:85%;
  height:9px;

  display:block;

  margin-top:10px;

  border-radius:10px;

  background:#d9e8f7;
}

.country-info-lines span:nth-child(2){
  width:68%;
}

.country-info-lines span:nth-child(3){
  width:47%;
}

.country-info-chip{
  width:max-content;

  margin-top:25px;

  padding:8px 13px;

  border-radius:13px;

  color:#1470ed;

  background:#dfedff;

  font-size:11px;
  font-weight:800;
}


/* SCAN ICONS */

.scan-action-visual{
  height:265px;

  display:grid;
  place-items:center;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #eff8ff,
      #f9fcff
    );
}

.scan-action-icon{
  width:125px;
  height:125px;

  display:grid;
  place-items:center;

  border-radius:38px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #1776ee,
      #5ac5ff
    );

  box-shadow:
    0 24px 50px
    rgba(24,112,225,.20);
}

.scan-action-icon svg{
  width:55px;
  height:55px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.9;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.lock-icon{
  background:
    linear-gradient(
      145deg,
      #1768db,
      #55b8fa
    );
}

.progress-icon{
  background:
    linear-gradient(
      145deg,
      #1470e8,
      #62ccff
    );
}


/* TRAVEL IDENTITY */

.identity-preview{
  height:270px;

  position:relative;

  overflow:hidden;

  border-radius:24px;

  background:#eef6ff;
}

.identity-post{
  width:190px;

  position:absolute;

  left:20px;
  top:22px;

  padding:13px;

  border-radius:20px;

  background:white;

  box-shadow:
    0 15px 35px
    rgba(30,75,135,.11);
}

.identity-post-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.identity-avatar{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:white;

  background:#1573ed;

  font-size:11px;
  font-weight:800;
}

.identity-post-top strong,
.identity-post-top small{
  display:block;
}

.identity-post-top strong{
  font-size:10px;
}

.identity-post-top small{
  color:#7887a0;
  font-size:8px;
}

.identity-post-photo{
  height:105px;

  margin-top:10px;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #6fb9eb,
      #e7c381 55%,
      #8d684b 56%
    );
}


/* Travel cards derrière le post */

.travel-card-stack{
  position:absolute;

  right:20px;
  bottom:24px;
}

.travel-mini-card{
  width:150px;
  height:92px;

  padding:17px;

  border-radius:20px;

  color:white;

  box-shadow:
    0 16px 35px
    rgba(30,70,130,.17);
}

.travel-mini-card small,
.travel-mini-card strong{
  display:block;
}

.travel-mini-card small{
  font-size:8px;
  letter-spacing:.13em;
}

.travel-mini-card strong{
  margin-top:8px;
  font-size:17px;
}

.tc-one{
  position:absolute;

  right:25px;
  bottom:35px;

  transform:rotate(-6deg);

  background:
    linear-gradient(
      145deg,
      #17a879,
      #58d2a0
    );
}

.tc-two{
  position:relative;

  transform:rotate(5deg);

  background:
    linear-gradient(
      145deg,
      #176de2,
      #59bfff
    );
}


/* BADGES :
   plusieurs cartes visibles À L'INTÉRIEUR
   de la carte principale
*/

.rarity-showcase{
  min-height:270px;

  padding:18px;

  display:grid !important;

  grid-template-columns:
    repeat(4,1fr);

  gap:9px;

  align-content:center;
}

.rarity-badge{
  width:auto !important;
  height:100px !important;

  border-radius:20px !important;
}

.rarity-badge b{
  font-size:23px;
}

.rarity-badge span{
  font-size:8px;
}


/*
 * Les 5 raretés connues sont affichées.
 * On laisse assez de place pour aller jusqu'à
 * 7 cartes sans changer le layout.
 */

.rarity-showcase::after{
  content:"";

  grid-column:auto;

  min-height:1px;
}


/* COMPARE = seulement countries + badges */

.progress-compare{
  min-height:270px;
}


/* mobile */

@media(max-width:700px){

  .feature-carousel{
    padding-left:25px !important;
    padding-right:25px !important;

    margin-left:-25px !important;
    margin-right:-25px !important;

    width:calc(100% + 50px) !important;
  }

  .rarity-showcase{
    grid-template-columns:
      repeat(3,1fr);
  }

}

/* =========================================================
   ORYEL — SCAN CONSISTENCY + 7 BADGES
   ========================================================= */

.coming-logo,
.coming-orb{
  overflow:hidden;
  padding:0 !important;
  background:none !important;
}

.coming-logo img,
.coming-orb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}


/* Tous les visuels Scan ont exactement le même langage */

#scan .scan-action-visual{
  height:265px;
  display:grid;
  place-items:center;
  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #edf7ff,
      #f8fcff
    );
}

#scan .scan-action-icon{
  width:128px;
  height:128px;

  display:grid;
  place-items:center;

  border-radius:38px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #116be8,
      #55c2ff
    );

  box-shadow:
    0 25px 55px
    rgba(20,110,230,.22);
}

#scan .scan-action-icon svg{
  width:57px;
  height:57px;

  fill:none;
  stroke:white;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* trois checks */

.triple-check{
  display:flex !important;
  align-items:center;
  justify-content:center;
}

.triple-check span{
  width:43px;
  height:43px;

  margin-left:-10px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#1472eb;

  background:white;

  border:4px solid #43a8fa;

  font-size:22px;
  font-weight:900;

  box-shadow:
    0 7px 18px
    rgba(0,50,130,.15);
}

.triple-check span:first-child{
  margin-left:0;
}


/* Statistics */

.profile-stat-grid{
  height:270px;

  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;

  gap:12px;
}

.profile-stat-grid > div{
  min-width:0;

  padding:20px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #f0f7ff,
      #f8fbff
    );
}

.profile-stat-grid strong{
  color:#07194c;
  font-size:31px;
}

.profile-stat-grid span{
  margin-top:5px;

  color:#60718e;

  font-size:11px;
  line-height:1.25;
}


/* 7 badges visibles DANS une seule carte */

.rarity-showcase{
  height:270px !important;

  padding:14px !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,1fr);

  gap:8px !important;

  align-content:stretch !important;
}

.rarity-badge{
  width:100% !important;
  height:auto !important;
  min-width:0;

  display:grid;
  place-items:center;
  align-content:center;

  border-radius:18px !important;

  color:white;

  box-shadow:
    0 10px 25px
    rgba(30,60,100,.13);
}

.rarity-badge b{
  font-size:20px !important;
}

.rarity-badge span{
  margin-top:3px;
  font-size:7px !important;
  font-weight:800;
}


/* couleurs */

.bronze-rarity{
  background:
    linear-gradient(145deg,#c38350,#714328);
}

.silver-rarity{
  background:
    linear-gradient(145deg,#e0e5eb,#7e8997);
}

.gold-rarity{
  background:
    linear-gradient(145deg,#ffdc6e,#d99b14);
}

.sapphire-rarity{
  background:
    linear-gradient(145deg,#36b8ff,#1654d5);
}

.ruby-rarity{
  background:
    linear-gradient(145deg,#ff4c70,#a90c3d);
}

.legendary-rarity{
  background:
    linear-gradient(145deg,#a05cf5,#e34ba5);
}

.mythic-rarity{
  background:
    linear-gradient(
      145deg,
      #25275f,
      #6755dc 48%,
      #dd5fc0
    );
}


/* dernière rareté centrée proprement */

.rarity-badge:nth-child(5){
  grid-column:1;
}


/* =========================================================
   ORYEL — FIX SCAN / PROFILE / MILESTONES
   ========================================================= */


/* SCAN : on évite les anciennes règles qui le rendent invisible */

#scan{
  position:relative;
  opacity:1;
}

#scan.scroll-revealed{
  opacity:1 !important;
}

#scan .feature-carousel{
  opacity:1;
}

#scan .story-card{
  color:#07194c !important;
  background:#fff !important;
}

#scan .story-card.is-current{
  opacity:1 !important;
}

#scan .scan-action-visual{
  height:265px;

  display:grid;
  place-items:center;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #f7fbff
    );
}

#scan .scan-action-icon{
  width:128px;
  height:128px;

  display:grid;
  place-items:center;

  border-radius:38px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #126be8,
      #54c1ff
    );

  box-shadow:
    0 22px 48px
    rgba(20,105,225,.20);
}

#scan .scan-action-icon svg{
  width:58px;
  height:58px;

  fill:none;
  stroke:white;

  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#scan .triple-check{
  display:flex !important;
  justify-content:center;
  align-items:center;
}

#scan .triple-check span{
  width:43px;
  height:43px;

  margin-left:-9px;

  display:grid;
  place-items:center;

  border:4px solid #51aff8;
  border-radius:50%;

  color:#1671ea;

  background:white;

  font-size:21px;
  font-weight:900;
}

#scan .triple-check span:first-child{
  margin-left:0;
}


/* MILESTONES FLAG */

.flag-symbol svg{
  width:48px;
  height:48px;

  fill:none;
  stroke:white;

  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* STATISTICS EXACTEMENT 4 */

.profile-stat-grid{
  height:270px !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,1fr) !important;

  gap:12px !important;
}

.profile-stat-grid > div{
  display:flex !important;
  flex-direction:column;
  justify-content:center;

  padding:20px;

  border-radius:21px;

  background:
    linear-gradient(
      145deg,
      #eef6ff,
      #f8fbff
    );
}

.profile-stat-grid strong{
  font-size:29px !important;
}

.profile-stat-grid span{
  margin-top:4px;

  color:#637390 !important;

  font-size:11px !important;
}


/* 7 badges dans la même carte */

.rarity-showcase{
  height:270px !important;

  padding:15px !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,minmax(0,1fr)) !important;

  gap:8px !important;

  align-items:stretch !important;
}

.rarity-badge{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:19px !important;

  color:white !important;

  box-shadow:
    0 9px 22px
    rgba(30,60,100,.13);
}

.rarity-badge b{
  font-size:19px !important;
}

.rarity-badge span{
  margin-top:4px;

  font-size:7px !important;
  font-weight:800;
}


/* raretés */

.bronze-rarity{
  background:linear-gradient(145deg,#b97848,#714227) !important;
}

.silver-rarity{
  background:linear-gradient(145deg,#dde2e9,#84909f) !important;
}

.gold-rarity{
  background:linear-gradient(145deg,#ffdc6a,#dea016) !important;
}

.sapphire-rarity{
  background:linear-gradient(145deg,#42c6ff,#1454d6) !important;
}

.ruby-rarity{
  background:linear-gradient(145deg,#ff4d70,#a90d3d) !important;
}

.legendary-rarity{
  background:linear-gradient(145deg,#9d5cf5,#e44ca8) !important;
}

.mythic-rarity{
  background:
    linear-gradient(
      145deg,
      #20235f,
      #6655d9 48%,
      #df5ec0
    ) !important;
}


/* 7e carte centrée sous les autres */

.rarity-badge:nth-child(7){
  grid-column:3;
}


/* =========================================================
   ORYEL — SCAN CAROUSEL RESTORE
   ========================================================= */

/*
   Scan reprend EXACTEMENT le comportement visuel
   des autres carrousels.
*/

#scan .feature-carousel{
  display:flex !important;

  gap:32px !important;

  width:calc(100% + 80px) !important;

  margin-left:-40px !important;
  margin-right:-40px !important;

  padding:
    25px
    40px
    55px !important;

  overflow-x:auto !important;
  overflow-y:visible !important;

  scroll-snap-type:x mandatory;

  opacity:1 !important;
  visibility:visible !important;
}


#scan .story-card{
  flex:
    0 0
    min(430px,32vw) !important;

  width:
    min(430px,32vw) !important;

  min-width:
    min(430px,32vw) !important;

  min-height:610px;

  display:flex !important;
  flex-direction:column !important;

  padding:28px !important;

  opacity:.58 !important;

  visibility:visible !important;

  transform:
    scale(.96)
    translateY(9px) !important;

  background:white !important;

  color:#07194c !important;
}


#scan .story-card.is-current{
  opacity:1 !important;

  transform:
    scale(1)
    translateY(0) !important;

  box-shadow:
    0 30px 75px
    rgba(0,30,100,.24) !important;
}


/* contenu texte de Scan */

#scan .story-number{
  display:block !important;

  margin-top:24px;

  color:#1674f1 !important;

  opacity:1 !important;
}

#scan .story-card h3{
  display:block !important;

  margin:
    14px 0
    12px;

  color:#07194c !important;

  opacity:1 !important;

  font-size:29px;
}

#scan .story-card p{
  display:block !important;

  margin:0;

  color:#60718e !important;

  opacity:1 !important;

  font-size:16px;

  line-height:1.55;
}


/* visuel bleu identique pour les 5 */

#scan .scan-action-visual{
  width:100% !important;
  height:290px !important;

  flex:none;

  display:grid !important;
  place-items:center !important;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #f5faff
    ) !important;
}


#scan .scan-action-icon{
  width:130px !important;
  height:130px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:38px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #1975ee,
      #4cbaff
    ) !important;

  box-shadow:
    0 22px 48px
    rgba(22,111,230,.20);
}


/* =========================================================
   CHALLENGE REWARDS
   ========================================================= */

.challenge-reward-visual{
  height:290px;

  display:grid;
  place-items:center;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #eef7ff,
      #f8fbff
    );
}


.xp-symbol{
  width:130px;
  height:130px;

  display:grid;
  place-items:center;

  border-radius:38px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #7060ef,
      #a56cf7
    );

  font-size:37px;
  font-weight:900;

  box-shadow:
    0 22px 48px
    rgba(100,75,220,.20);
}


.coin-stack{
  position:relative;

  width:160px;
  height:130px;
}


.coin-stack span{
  width:85px;
  height:85px;

  position:absolute;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:white;

  background:
    linear-gradient(
      145deg,
      #ffd65d,
      #eaa818
    );

  border:
    6px solid
    #ffe694;

  font-size:25px;
  font-weight:900;

  box-shadow:
    0 15px 30px
    rgba(200,145,20,.20);
}


.coin-stack span:nth-child(1){
  left:0;
  bottom:0;
}

.coin-stack span:nth-child(2){
  right:0;
  bottom:0;
}

.coin-stack span:nth-child(3){
  left:38px;
  top:0;
}


/* =========================================================
   EMERALD
   ========================================================= */

.emerald-rarity{
  background:
    linear-gradient(
      145deg,
      #3ad49b,
      #087d64
    ) !important;
}


/* 7e = Legendary */

.rarity-badge:nth-child(7){
  grid-column:auto !important;
}


@media(max-width:850px){

  #scan .story-card{
    flex-basis:82vw !important;
    width:82vw !important;
    min-width:82vw !important;
  }

}

/* =========================================================
   ORYEL — MAP / CAROUSEL EDGE POLISH
   ========================================================= */

.realistic-map-visual{
  position:relative;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      #f7fcff,
      #dcefff 70%
    );
}

.realistic-map-earth{
  width:235px;
  height:235px;

  background:
    url("earth.png")
    center / contain
    no-repeat;

  filter:
    drop-shadow(
      0 22px 28px
      rgba(10,75,160,.24)
    );
}

.map-legend{
  position:absolute;

  left:17px;
  right:17px;
  bottom:15px;

  display:flex;
  justify-content:center;
  gap:7px;
}

.map-legend span{
  padding:6px 9px;

  border-radius:11px;

  color:white;

  font-size:8px;
  font-weight:800;
}

.legend-visited{
  background:#29be7d;
}

.legend-wishlist{
  background:#e3b72b;
}

.legend-current{
  background:#1476ef;
}


/*
  Plus de coupure verticale brutale des cartes
  à gauche/droite.
*/

.feature-carousel{
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      black 38px,
      black calc(100% - 38px),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      black 38px,
      black calc(100% - 38px),
      transparent 100%
    );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}


/* On garde suffisamment d'espace pour l'ombre */

.feature-carousel{
  padding-left:55px !important;
  padding-right:55px !important;

  margin-left:-55px !important;
  margin-right:-55px !important;

  width:calc(100% + 110px) !important;
}


/* =========================================================
   VALIDATE COUNTRY
   ========================================================= */

.validate-check{
  font-size:66px !important;
  font-weight:800 !important;
}


/* =========================================================
   XP / ORYEL COINS
   ========================================================= */

.oryel-coins{
  width:170px;
  height:135px;

  position:relative;
}

.oryel-coins span{
  width:88px;
  height:88px;

  position:absolute;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:white;

  background:
    linear-gradient(
      145deg,
      #ffd762,
      #eca81b
    );

  border:6px solid #ffe797;

  font-size:25px;
  font-weight:900;

  box-shadow:
    0 15px 30px
    rgba(190,130,10,.20);
}

.oryel-coins span:nth-child(1){
  left:0;
  bottom:0;
}

.oryel-coins span:nth-child(2){
  right:0;
  bottom:0;
}

.oryel-coins span:nth-child(3){
  left:41px;
  top:0;
}


/* =========================================================
   EXPLORE SOCIAL ACTIONS
   ========================================================= */

.explore-action-visual{
  height:265px;

  display:grid;
  place-items:center;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #edf6ff,
      #f8fbff
    );
}

.explore-action-icon{
  width:126px;
  height:126px;

  position:relative;

  border-radius:38px;

  background:
    linear-gradient(
      145deg,
      #176fec,
      #55c1ff
    );

  box-shadow:
    0 22px 48px
    rgba(20,105,225,.18);
}


/* Comment */

.explore-action-icon.bubble::before{
  content:"";

  position:absolute;
  inset:34px 27px 39px;

  border:5px solid white;
  border-radius:19px;
}

.explore-action-icon.bubble::after{
  content:"";

  position:absolute;

  left:42px;
  bottom:31px;

  width:18px;
  height:18px;

  border-left:5px solid white;

  transform:
    rotate(-30deg);
}


/* Share */

.explore-action-icon.share::before{
  content:"↑";

  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  color:white;

  font-size:62px;
  font-weight:300;
}


/* Messages */

.explore-action-icon.message::before{
  content:"✉";

  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  color:white;

  font-size:54px;
}


/* Add */

.explore-action-icon.plus::before{
  content:"+";

  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  color:white;

  font-size:68px;
  font-weight:300;
}


/* Bookmark */

.explore-action-icon.bookmark::before{
  content:"";

  position:absolute;

  width:44px;
  height:60px;

  left:41px;
  top:31px;

  border:5px solid white;
  border-radius:6px 6px 2px 2px;

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 76%,
      0 100%
    );
}


/* Trip / tickets */

.explore-action-icon.plane::before{
  content:"✈";

  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  color:white;

  font-size:52px;

  transform:rotate(-8deg);
}

/* =========================================================
   ORYEL — CAROUSEL CLEAN EDGES
   ========================================================= */

/* AUCUN fade / mask gauche-droite */

.feature-carousel,
#map .feature-carousel,
#challenges .feature-carousel,
#scan .feature-carousel,
#explore .feature-carousel,
#profile .feature-carousel{
  -webkit-mask-image:none !important;
  mask-image:none !important;

  -webkit-mask:none !important;
  mask:none !important;

  overflow-x:auto !important;
  overflow-y:visible !important;

  padding:
    26px
    52px
    55px !important;

  margin-left:-52px !important;
  margin-right:-52px !important;

  width:calc(100% + 104px) !important;
}


/* =========================================================
   MAP — OLD WORLD VISUAL
   ========================================================= */

.world-visual{
  display:grid !important;
  place-items:center !important;

  background:
    linear-gradient(
      145deg,
      #dcefff,
      #c5e3fa
    ) !important;
}

.mini-world{
  width:205px;
  height:205px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at 31% 41%,
      #52bd76 0 11%,
      transparent 12%
    ),

    radial-gradient(
      ellipse at 62% 34%,
      #57bd77 0 14%,
      transparent 15%
    ),

    radial-gradient(
      ellipse at 55% 63%,
      #46aa68 0 10%,
      transparent 11%
    ),

    radial-gradient(
      circle at 38% 31%,
      #54b9ff,
      #126cd6 66%,
      #07479d
    );

  box-shadow:
    inset -25px -20px 50px rgba(0,30,105,.25),
    0 22px 45px rgba(17,91,190,.22);
}


/* =========================================================
   CHALLENGES — SAME CENTERING AS SCAN
   ========================================================= */

#challenges .story-card{
  display:flex !important;
  flex-direction:column !important;
}

#challenges .story-visual,
#challenges .challenge-reward-visual{
  width:100%;
  height:290px;

  flex:none;

  display:grid;
  place-items:center;

  border-radius:25px;
}

#challenges .challenge-symbol{
  margin:auto !important;
}

.challenge-reward-visual{
  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #f7fbff
    );
}


/* XP */

.xp-symbol{
  width:132px;
  height:132px;

  display:grid;
  place-items:center;

  border-radius:39px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #625bea,
      #9a6bf5
    );

  font-size:38px;
  font-weight:900;

  box-shadow:
    0 23px 50px
    rgba(89,72,210,.20);
}


/* ORYEL COINS */

.oryel-coins{
  width:175px;
  height:140px;

  position:relative;
}

.oryel-coins span{
  width:88px;
  height:88px;

  position:absolute;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:white;

  background:
    linear-gradient(
      145deg,
      #ffda63,
      #e9a617
    );

  border:6px solid #ffe99b;

  font-size:25px;
  font-weight:900;

  box-shadow:
    0 15px 30px
    rgba(190,130,15,.22);
}

.oryel-coins span:nth-child(1){
  left:0;
  bottom:0;
}

.oryel-coins span:nth-child(2){
  right:0;
  bottom:0;
}

.oryel-coins span:nth-child(3){
  left:43px;
  top:0;
}


/* =========================================================
   EXPLORE FUNCTIONS
   ========================================================= */

.explore-action-visual{
  height:265px;

  display:grid;
  place-items:center;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #edf7ff,
      #f8fbff
    );
}

.explore-function-icon{
  width:128px;
  height:128px;

  position:relative;

  display:grid;
  place-items:center;

  border-radius:39px;

  color:white;

  background:
    linear-gradient(
      145deg,
      #176fec,
      #55c1ff
    );

  box-shadow:
    0 22px 48px
    rgba(20,105,225,.18);
}


/* Comment */

.explore-function-icon.comment::before{
  content:"";

  width:57px;
  height:43px;

  border:5px solid white;
  border-radius:18px;
}

.explore-function-icon.comment::after{
  content:"";

  position:absolute;

  left:43px;
  bottom:35px;

  width:16px;
  height:20px;

  border-left:5px solid white;

  transform:rotate(-31deg);
}


/* Share */

.explore-function-icon.share::before{
  content:"↗";

  font-size:58px;
  font-weight:300;
}


/* Messages */

.explore-function-icon.messages::before{
  content:"✉";

  font-size:53px;
}


/* Add post */

.explore-function-icon.add-post::before{
  content:"+";

  font-size:70px;
  font-weight:300;
}


/* Bookmark */

.explore-function-icon.bookmark::before{
  content:"";

  width:43px;
  height:60px;

  border:5px solid white;

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 76%,
      0 100%
    );
}


/* Travel */

.explore-function-icon.travel::before{
  content:"✈";

  font-size:52px;

  transform:rotate(-7deg);
}


/* =========================================================
   ORYEL — RESTORE ORIGINAL WORLD MAP CARD
   ========================================================= */

#map .world-visual{
  height:265px !important;

  display:grid !important;
  place-items:center !important;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #dcefff,
      #c5e4fb
    ) !important;
}


/* ancien globe ORYEL stylisé */

#map .mini-world{
  width:205px !important;
  height:205px !important;

  position:relative;

  border-radius:50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #52b9ff,
      #177ae2 55%,
      #0752b5 100%
    ) !important;

  box-shadow:
    inset -25px -20px 45px
      rgba(0,38,115,.27),

    inset 18px 15px 30px
      rgba(255,255,255,.12),

    0 20px 42px
      rgba(16,89,188,.22) !important;

  filter:none !important;
}


/* continents */

#map .continent{
  position:absolute;
  display:block;

  background:
    linear-gradient(
      145deg,
      #58bf79,
      #40a966
    );

  box-shadow:
    inset 0 2px 7px
    rgba(255,255,255,.12);
}

#map .continent-a{
  width:51px;
  height:39px;

  left:40px;
  top:62px;

  border-radius:
    55% 45% 57% 43%;
}

#map .continent-b{
  width:55px;
  height:60px;

  right:40px;
  top:48px;

  border-radius:
    48% 52% 44% 56%;
}

#map .continent-c{
  width:38px;
  height:44px;

  right:62px;
  bottom:40px;

  border-radius:
    52% 48% 58% 42%;
}


/* neutralise définitivement l'ancienne version réaliste */

#map .realistic-map-earth,
#map .map-legend{
  display:none !important;
}


/* =========================================================
   CHALLENGES — ALL CARDS SAME VISUAL FORMAT
   ========================================================= */

#challenges .challenge-reward-visual{
  width:100% !important;
  height:290px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:25px !important;

  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #f7fbff
    ) !important;
}

.challenge-icon{
  width:132px;
  height:132px;

  position:relative;

  display:grid;
  place-items:center;

  border-radius:39px;

  color:white;

  box-shadow:
    0 22px 45px
    rgba(20,90,180,.18);
}


/* Daily calendar */

.daily-calendar{
  background:
    linear-gradient(
      145deg,
      #1472ee,
      #4ebcff
    );
}

.daily-calendar::before{
  content:"";

  position:absolute;

  width:63px;
  height:59px;

  border:5px solid white;
  border-radius:9px;
}

.daily-calendar::after{
  content:"";

  position:absolute;

  width:63px;

  top:50px;

  border-top:5px solid white;
}

.daily-calendar span{
  position:relative;
  z-index:2;

  margin-top:18px;

  font-size:25px;
  font-weight:900;
}


/* Local */

.local-pin{
  background:
    linear-gradient(
      145deg,
      #ff7258,
      #ef3d4e
    );
}

.local-pin::before{
  content:"";

  width:48px;
  height:59px;

  background:white;

  clip-path:
    path("M24 0C10.7 0 0 10.7 0 24c0 18 24 35 24 35s24-17 24-35C48 10.7 37.3 0 24 0Z");
}

.local-pin::after{
  content:"";

  position:absolute;

  width:13px;
  height:13px;

  border-radius:50%;

  background:#ef4b4e;

  top:45px;
}


/* Milestone */

.milestone-flag{
  background:
    linear-gradient(
      145deg,
      #ffd86a,
      #efb62b
    );

  font-size:57px;
}


/* XP = GREEN */

#challenges .xp-symbol{
  width:132px !important;
  height:132px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:39px !important;

  color:white !important;

  background:
    linear-gradient(
      145deg,
      #24c875,
      #0da858
    ) !important;

  font-size:38px !important;
  font-weight:900 !important;

  box-shadow:
    0 22px 45px
    rgba(20,170,95,.20) !important;
}


/* =========================================================
   SCAN VALIDATION
   ========================================================= */

.validate-one-check{
  font-size:65px !important;
  font-weight:900 !important;

  background:
    linear-gradient(
      145deg,
      #27c97a,
      #18b366
    ) !important;
}


/* =========================================================
   EXPLORE — ALL SOCIAL INTERACTIONS IN ONE CARD
   ========================================================= */

.social-preview{
  height:290px;

  padding:18px;

  display:flex;
  flex-direction:column;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #edf6ff,
      #f9fcff
    );
}

.social-post-head{
  display:flex;
  align-items:center;

  gap:10px;
}

.social-avatar{
  width:38px;
  height:38px;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #1774ef,
      #59c3ff
    );
}

.social-post-head div:last-child{
  display:flex;
  flex-direction:column;
}

.social-post-head strong{
  color:#07194c;
  font-size:12px;
}

.social-post-head span{
  color:#8492aa;
  font-size:8px;
}


.social-photo{
  flex:1;

  position:relative;

  margin:13px 0;

  border-radius:17px;

  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(255,255,255,.75),
      transparent 16%
    ),
    linear-gradient(
      145deg,
      #69c8ff,
      #1878e6
    );
}

.social-location{
  position:absolute;

  left:10px;
  bottom:10px;

  padding:5px 8px;

  border-radius:8px;

  color:white;

  background:
    rgba(4,32,88,.35);

  font-size:8px;
  font-weight:800;
}


.social-actions{
  display:flex;
  align-items:center;

  gap:13px;

  color:#176fed;

  font-size:20px;
}

.social-actions .social-bookmark{
  margin-left:auto;
}

.social-extra{
  margin-top:11px;

  display:flex;
  justify-content:space-between;

  color:#60718d;

  font-size:8px;
  font-weight:800;
}


/* =========================================================
   PROFILE — COUNTRIES VISITED
   ========================================================= */

.countries-profile-preview{
  height:290px;

  padding:15px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:10px;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #edf6ff,
      #f9fcff
    );
}


.country-travel-card{
  min-height:72px;

  padding:10px 12px;

  display:grid;

  grid-template-columns:
    48px
    1fr
    10px;

  align-items:center;

  gap:10px;

  border-radius:17px;

  background:white;

  box-shadow:
    0 8px 22px
    rgba(30,80,145,.07);
}


.country-travel-card > div:nth-child(2){
  display:flex;
  flex-direction:column;
}


.country-travel-card strong{
  color:#07194c;

  font-size:11px;
}


.country-travel-card small{
  margin-top:2px;

  color:#8491a7;

  font-size:8px;
}


.country-flag{
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border-radius:13px;

  font-weight:900;
}


.france-flag{
  grid-template-columns:
    repeat(3,1fr);
}

.france-flag span{
  width:100%;
  height:100%;
}

.france-flag span:nth-child(1){
  background:#1764d9;
}

.france-flag span:nth-child(2){
  background:white;
}

.france-flag span:nth-child(3){
  background:#ed4450;
}


.current-flag{
  color:white;

  background:
    linear-gradient(
      145deg,
      #ffd85f,
      #eeb32a
    );
}


.visited-flag{
  color:white;

  background:
    linear-gradient(
      145deg,
      #2dcc7e,
      #14aa62
    );

  font-size:24px;
}


.country-dot{
  width:9px;
  height:9px;

  border-radius:50%;
}

.blue-dot{
  background:#1875ef;
}

.yellow-dot{
  background:#efbd30;
}

.green-dot{
  background:#20bd72;
}


/* =========================================================
   ORYEL — CHALLENGES POLISH
   ========================================================= */

#challenges .challenge-reward-visual{
  width:100% !important;
  height:290px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:25px !important;

  background:
    linear-gradient(
      145deg,
      #eaf5ff,
      #f7fbff
    ) !important;
}


/* MONTHLY CALENDAR */

.monthly-calendar{
  background:
    linear-gradient(
      145deg,
      #9254f4,
      #6847e9
    ) !important;
}

.monthly-calendar::before{
  content:"";

  position:absolute;

  width:64px;
  height:58px;

  border:5px solid white;
  border-radius:9px;
}

.monthly-calendar::after{
  content:"";

  position:absolute;

  width:64px;

  top:51px;

  border-top:5px solid white;
}

.monthly-calendar span{
  position:relative;
  z-index:2;

  margin-top:18px;

  color:white;

  font-size:20px;
  font-weight:900;
}


/* LOCAL PIN — CSS ONLY */

.local-pin{
  background:
    linear-gradient(
      145deg,
      #ff7159,
      #ed3e4d
    ) !important;
}

.local-pin::before{
  content:"";

  position:absolute;

  width:55px;
  height:55px;

  left:50%;
  top:45%;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border-radius:
    50% 50% 50% 8px;

  background:white;
}

.local-pin .pin-hole{
  position:absolute;
  z-index:2;

  width:20px;
  height:20px;

  left:50%;
  top:40%;

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

  border-radius:50%;

  background:#ef4b50;
}


/* STREAK — CSS FLAME, NO EMOJI */

.streak-icon{
  background:
    linear-gradient(
      145deg,
      #10cbb5,
      #00a89e
    ) !important;
}

.flame-shape{
  position:absolute;

  width:55px;
  height:72px;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-48%)
    rotate(45deg);

  border-radius:
    70% 20% 65% 35%;

  background:white;
}

.flame-shape::before{
  content:"";

  position:absolute;

  width:36px;
  height:45px;

  left:-5px;
  bottom:-3px;

  border-radius:50%;

  background:white;
}

.flame-core{
  position:absolute;
  z-index:2;

  width:22px;
  height:34px;

  left:50%;
  top:55%;

  transform:
    translate(-50%,-50%)
    rotate(35deg);

  border-radius:
    70% 25% 65% 35%;

  background:#0bb8aa;
}


/* XP GREEN */

#challenges .xp-symbol{
  background:
    linear-gradient(
      145deg,
      #32d67d,
      #10ae5d
    ) !important;

  box-shadow:
    0 22px 45px
    rgba(15,175,95,.20) !important;
}


/* =========================================================
   TRAVEL FEED — RESTORED CARD
   ========================================================= */

.feed-preview{
  height:290px;

  padding:17px;

  display:flex;
  flex-direction:column;

  border-radius:25px;

  background:
    linear-gradient(
      145deg,
      #edf6ff,
      #f9fcff
    );
}

.feed-preview-header{
  display:flex;
  align-items:center;

  gap:10px;
}

.feed-avatar{
  width:39px;
  height:39px;

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #6a9fff,
      #176eea
    );
}

.feed-user{
  display:flex;
  flex-direction:column;
}

.feed-user strong{
  color:#07194c;

  font-size:11px;
}

.feed-user span{
  margin-top:2px;

  color:#8b99b0;

  font-size:8px;
}

.feed-photo-preview{
  position:relative;

  flex:1;

  margin:13px 0;

  border-radius:17px;

  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(255,255,255,.9),
      transparent 14%
    ),
    linear-gradient(
      160deg,
      #85d6ff 0%,
      #45a9f2 48%,
      #1872df 100%
    );
}

.feed-place-pill{
  position:absolute;

  left:10px;
  bottom:10px;

  padding:6px 9px;

  border-radius:9px;

  color:white;

  background:
    rgba(5,38,95,.32);

  font-size:8px;
  font-weight:800;
}


/* petite barre d'interaction dans la carte,
   pas de cartes individuelles */

.feed-preview-actions{
  display:flex;
  align-items:center;

  gap:13px;
}

.feed-preview-actions span{
  width:20px;
  height:20px;

  position:relative;

  display:block;
}


/* like */

.feed-heart::before{
  content:"";

  position:absolute;

  width:13px;
  height:13px;

  left:3px;
  top:5px;

  transform:rotate(45deg);

  border-radius:3px 0 3px 0;

  background:#176fed;
}

.feed-heart::after{
  content:"";

  position:absolute;

  width:8px;
  height:8px;

  left:2px;
  top:2px;

  border-radius:50%;

  background:#176fed;

  box-shadow:6px 0 0 #176fed;
}


/* comment */

.feed-comment{
  border:2px solid #176fed;
  border-radius:50%;
}

.feed-comment::after{
  content:"";

  position:absolute;

  width:6px;
  height:6px;

  right:-1px;
  bottom:-1px;

  border-right:2px solid #176fed;

  transform:rotate(35deg);
}


/* share */

.feed-share::before{
  content:"↗";

  position:absolute;

  inset:0;

  display:grid;
  place-items:center;

  color:#176fed;

  font-size:22px;
  font-weight:800;
}


/* bookmark */

.feed-bookmark{
  margin-left:auto;

  border:2px solid #176fed;

  border-radius:3px 3px 1px 1px;

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      50% 72%,
      0 100%
    );
}


/* Travel options = avion uniquement */

.explore-function-icon.travel::before{
  content:"✈" !important;

  position:absolute;

  inset:0;

  display:grid;
  place-items:center;

  color:white;

  font-size:52px;

  transform:rotate(-8deg);
}


/* =========================================================
   PROFILE COUNTRIES
   ========================================================= */

.countries-profile-preview{
  height:290px !important;
}


/* USA */

.usa-flag{
  position:relative;

  background:
    repeating-linear-gradient(
      to bottom,
      #d94852 0 4px,
      white 4px 8px
    ) !important;
}

.usa-stars{
  position:absolute;

  left:0;
  top:0;

  width:21px;
  height:23px;

  display:grid;
  place-items:center;

  color:white;

  background:#1761b8;

  font-size:8px;
}

.usa-lines{
  display:none;
}


/* Germany */

.germany-flag{
  display:grid !important;

  grid-template-rows:
    repeat(3,1fr) !important;
}

.germany-flag span{
  width:100%;
  height:100%;
}

.germany-flag span:nth-child(1){
  background:#181818;
}

.germany-flag span:nth-child(2){
  background:#e33c3d;
}

.germany-flag span:nth-child(3){
  background:#f0c43a;
}


/* France */

.france-flag{
  display:grid !important;

  grid-template-columns:
    repeat(3,1fr) !important;
}

.france-flag span:nth-child(1){
  background:#1763d4 !important;
}

.france-flag span:nth-child(2){
  background:white !important;
}

.france-flag span:nth-child(3){
  background:#ed4852 !important;
}


/* STATUS COLORS */

.residence-dot{
  background:#176fed !important;
}

/* Current journey = turquoise */

.current-dot{
  background:#18c9bd !important;

  box-shadow:
    0 0 0 5px
    rgba(24,201,189,.12);
}

/* Previously visited = green */

.visited-dot{
  background:#27bf72 !important;
}


/* =========================================================
   MAP — OLD ORYEL GLOBE
   ========================================================= */

#map .realistic-map-earth,
#map .map-legend{
  display:none !important;
}

#map .mini-world{
  display:block !important;
}


/* ============================================================
   ORYEL — RESTORE EXPLORE + PROFILE + ICON POLISH
   ============================================================ */


/* ---------- CHALLENGE VISUALS ---------- */

#challenges .challenge-reward-visual{
  width:100% !important;
  height:290px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:25px !important;
  background:linear-gradient(145deg,#eaf5ff,#f8fbff) !important;
}


/* LOCAL — ancienne localisation */

.local-challenge-icon{
  position:relative !important;
  background:linear-gradient(145deg,#ff7259,#e9424d) !important;
}

.local-pin-body{
  position:absolute;
  width:58px;
  height:58px;
  left:50%;
  top:43%;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:50% 50% 50% 9px;
  background:white;
}

.local-pin-center{
  position:absolute;
  width:21px;
  height:21px;
  left:50%;
  top:39%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#ef4c50;
}


/* STREAK — vraie flamme */

.streak-challenge-icon{
  background:linear-gradient(145deg,#16c9ba,#00a89f) !important;
}

.streak-flame-svg{
  width:67px;
  height:78px;
  overflow:visible;
}

.streak-flame-outer{
  fill:white;
  filter:drop-shadow(0 4px 7px rgba(0,90,100,.12));
}

.streak-flame-inner{
  fill:#10b8ab;
}


/* ---------- SCAN ---------- */

#scan .scan-action-visual{
  width:100%;
  height:290px;
  display:grid;
  place-items:center;
  border-radius:25px;
  background:linear-gradient(145deg,#eaf5ff,#f8fbff);
}

#scan .scan-action-icon{
  width:132px;
  height:132px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:39px;
  box-shadow:0 20px 45px rgba(30,100,210,.18);
}

.camera-icon{
  background:linear-gradient(145deg,#1474ef,#4dbaff);
}

.camera-body{
  width:62px;
  height:45px;
  border:5px solid white;
  border-radius:9px;
}

.camera-body::before{
  content:"";
  position:absolute;
  width:25px;
  height:10px;
  left:53px;
  top:39px;
  border-radius:5px 5px 0 0;
  background:white;
}

.camera-lens{
  position:absolute;
  width:23px;
  height:23px;
  border:5px solid white;
  border-radius:50%;
}

.secure-lock-icon{
  background:linear-gradient(145deg,#9256f5,#6847e9);
}

.lock-shackle{
  position:absolute;
  width:48px;
  height:45px;
  top:28px;
  border:6px solid white;
  border-bottom:0;
  border-radius:25px 25px 0 0;
}

.lock-body{
  position:absolute;
  width:62px;
  height:52px;
  bottom:26px;
  border-radius:11px;
  background:white;
}

.validate-country-icon{
  background:linear-gradient(145deg,#31d37d,#10ac5d);
}

.validate-country-icon span{
  color:white;
  font-size:66px;
  font-weight:800;
}

.progress-arrow-icon{
  background:linear-gradient(145deg,#1474ef,#4dbaff);
}

.progress-arrow-icon span{
  width:58px;
  height:6px;
  position:relative;
  border-radius:5px;
  background:white;
}

.progress-arrow-icon span::after{
  content:"";
  position:absolute;
  width:27px;
  height:27px;
  right:0;
  top:50%;
  border-top:6px solid white;
  border-right:6px solid white;
  transform:translateY(-50%) rotate(45deg);
}

.share-discovery-icon{
  background:linear-gradient(145deg,#ffca35,#eca80b);
}

.share-node{
  position:absolute;
  width:18px;
  height:18px;
  border:5px solid white;
  border-radius:50%;
}

.node-a{left:30px;top:56px}
.node-b{right:28px;top:31px}
.node-c{right:28px;bottom:27px}

.share-line{
  position:absolute;
  width:50px;
  height:5px;
  left:42px;
  border-radius:5px;
  background:white;
  transform-origin:left center;
}

.share-line-a{
  top:60px;
  transform:rotate(-27deg);
}

.share-line-b{
  top:70px;
  transform:rotate(27deg);
}


/* ---------- EXPLORE ---------- */

.explore-card-visual,
.profile-card-visual{
  width:100%;
  height:290px;
  display:grid;
  place-items:center;
  border-radius:25px;
  background:linear-gradient(145deg,#eaf5ff,#f8fbff);
}

.explore-main-icon{
  width:132px;
  height:132px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:39px;
  background:linear-gradient(145deg,#1675ef,#4dbbff);
  box-shadow:0 20px 45px rgba(30,100,210,.18);
}

.discover-icon{
  border-radius:50%;
  background:white;
  border:8px solid #f0b936;
}

.compass-needle{
  width:20px;
  height:76px;
  background:linear-gradient(to bottom,#ef4c50 0 50%,#176ee9 50%);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transform:rotate(35deg);
}

.interactions-icon{
  background:linear-gradient(145deg,#655df3,#a459f2);
}

.interaction-heart{
  position:absolute;
  left:22px;
  top:19px;
  color:white;
  font-size:28px;
}

.interaction-comment{
  position:absolute;
  width:28px;
  height:24px;
  right:22px;
  top:25px;
  border:4px solid white;
  border-radius:50%;
}

.interaction-share{
  position:absolute;
  left:25px;
  bottom:19px;
  color:white;
  font-size:31px;
}

.interaction-message{
  position:absolute;
  width:31px;
  height:22px;
  right:22px;
  bottom:26px;
  border:4px solid white;
  border-radius:5px;
}

.interaction-bookmark{
  position:absolute;
  width:17px;
  height:25px;
  left:58px;
  top:54px;
  border:4px solid white;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 73%,0 100%);
}

.post-icon{
  background:linear-gradient(145deg,#ffbb35,#f18d21);
}

.post-plus{
  color:white;
  font-size:75px;
  font-weight:300;
  line-height:1;
}

.travel-plane-icon{
  background:linear-gradient(145deg,#1474ef,#4dbaff);
}

.travel-plane-icon span{
  color:white;
  font-size:60px;
  transform:rotate(-8deg);
}


/* Travel feed */

.feed-mini-ui{
  width:85%;
  height:85%;
  padding:15px;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  background:white;
  box-shadow:0 12px 30px rgba(30,80,145,.08);
}

.feed-mini-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.feed-mini-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:linear-gradient(145deg,#176fed,#51bcff);
}

.feed-mini-lines{
  width:80px;
  height:17px;
  border-radius:8px;
  background:linear-gradient(#b6c7de 0 5px,transparent 5px 9px,#d6e1ee 9px 13px);
}

.feed-mini-photo{
  flex:1;
  margin:12px 0;
  border-radius:14px;
  background:
    radial-gradient(circle at 72% 23%,rgba(255,255,255,.85),transparent 14%),
    linear-gradient(155deg,#88d8ff,#2b8be9);
}

.feed-mini-actions{
  display:flex;
  gap:14px;
  align-items:center;
  color:#176fed;
  font-size:18px;
}

.mini-bookmark{
  margin-left:auto;
}


/* ---------- PROFILE ---------- */

.stats-preview{
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:20px;
}

.stat-cell{
  height:105px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:white;
  box-shadow:0 8px 20px rgba(30,80,145,.06);
}

.stat-cell strong{
  color:#07194c;
  font-size:25px;
}

.stat-cell span{
  margin-top:4px;
  color:#8290a7;
  font-size:9px;
  text-align:center;
}

.countries-profile-preview{
  padding:16px;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

.badges-seven-preview{
  padding:25px;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
}

.badge-gem{
  width:58px;
  height:70px;
  display:block;
  clip-path:polygon(50% 0,92% 23%,92% 76%,50% 100%,8% 76%,8% 23%);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.25);
}

.bronze-gem{background:linear-gradient(145deg,#d28a48,#88451d)}
.silver-gem{background:linear-gradient(145deg,#eef2f7,#929aa6)}
.gold-gem{background:linear-gradient(145deg,#ffe46a,#e4a900)}
.emerald-gem{background:linear-gradient(145deg,#4fe09c,#079b63)}
.sapphire-gem{background:linear-gradient(145deg,#56c8ff,#1265df)}
.ruby-gem{background:linear-gradient(145deg,#ff6471,#cf1737)}
.legendary-gem{background:linear-gradient(145deg,#b36aff,#5a35d8 55%,#f24da6)}

.identity-preview{
  position:relative;
}

.identity-profile-icon{
  width:110px;
  height:110px;
  position:relative;
  border-radius:35px;
  background:linear-gradient(145deg,#9258f4,#6847e9);
}

.identity-head{
  position:absolute;
  width:37px;
  height:37px;
  left:50%;
  top:23px;
  transform:translateX(-50%);
  border-radius:50%;
  background:white;
}

.identity-body{
  position:absolute;
  width:65px;
  height:35px;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  border-radius:40px 40px 15px 15px;
  background:white;
}

.identity-cards{
  position:absolute;
  right:35px;
  bottom:35px;
  display:flex;
  gap:5px;
}

.identity-cards span{
  width:27px;
  height:38px;
  border-radius:6px;
  background:#176fed;
  box-shadow:0 6px 12px rgba(20,80,180,.14);
}

.identity-cards span:nth-child(2){background:#20bd72}
.identity-cards span:nth-child(3){background:#efb52d}

.compare-preview-new{
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  padding:25px;
}

.compare-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.compare-avatar{
  width:75px;
  height:75px;
  margin-bottom:14px;
  border-radius:50%;
  display:block;
}

.compare-you{
  background:linear-gradient(145deg,#73a9ff,#176fed);
}

.compare-friend{
  background:linear-gradient(145deg,#b46bfa,#6c48e8);
}

.compare-side strong{
  color:#07194c;
  font-size:14px;
}

.compare-side small{
  margin-top:4px;
  color:#8290a7;
  font-size:10px;
}

.compare-vs-new{
  color:#176fed;
  font-size:16px;
  font-weight:900;
}


/* Country status */

.residence-dot{
  background:#176fed !important;
}

.current-dot{
  background:#18c9bd !important;
}

.visited-dot{
  background:#27bf72 !important;
}


.local-red-visual{
  background:linear-gradient(145deg,#ffe8ea,#fff7f8)!important;
}

.local-red-pin{
  width:82px;
  height:102px;
  position:relative;
  background:linear-gradient(145deg,#ff5c61,#e63246);
  border-radius:50% 50% 50% 12px;
  transform:rotate(-45deg);
  box-shadow:0 20px 38px rgba(220,45,65,.22);
}

.local-red-pin span{
  position:absolute;
  width:30px;
  height:30px;
  left:50%;
  top:27px;
  border-radius:50%;
  background:white;
  transform:translateX(-50%);
}


.explore-added-visual{
  width:100%;
  height:290px;
  display:grid;
  place-items:center;
  border-radius:25px;
  background:linear-gradient(145deg,#eaf5ff,#f9fcff);
}

.collections-icon{
  width:150px;
  height:150px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  border-radius:30px;
  background:white;
  box-shadow:0 20px 40px rgba(35,75,135,.13);
}

.collections-icon i{
  border-radius:14px;
}

.collections-icon i:nth-child(1){background:#3488ef}
.collections-icon i:nth-child(2){background:#ffb444}
.collections-icon i:nth-child(3){background:#38c68b}
.collections-icon i:nth-child(4){background:#9768ef}

.nearby-icon{
  width:165px;
  height:165px;
  position:relative;
  border:3px solid rgba(22,197,187,.22);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 35px rgba(22,197,187,.05),
    inset 0 0 0 70px rgba(22,197,187,.04);
}

.nearby-icon i{
  position:absolute;
  width:22px;
  height:22px;
  left:50%;
  top:50%;
  border:6px solid white;
  border-radius:50%;
  background:#16c7bb;
  transform:translate(-50%,-50%);
  box-shadow:0 5px 15px rgba(0,150,145,.25);
}

.nearby-icon b,
.nearby-icon em{
  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#1874ed;
}

.nearby-icon b{
  left:30px;
  top:39px;
}

.nearby-icon em{
  right:27px;
  bottom:43px;
}

.plane-icon{
  width:140px;
  height:140px;
  display:grid;
  place-items:center;
  border-radius:40px;
  background:linear-gradient(145deg,#1675ef,#4bbaff);
  color:white;
  font-size:67px;
  transform:none;
  box-shadow:0 20px 40px rgba(25,100,210,.20);
}


.profile-country-visual{
  width:100%;
  height:290px;
  padding:24px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:11px;
  border-radius:25px;
  background:linear-gradient(145deg,#edf7ff,#fbfdff);
}

.profile-country{
  min-height:65px;
  padding:9px 13px;
  display:grid;
  grid-template-columns:72px 1fr 12px;
  align-items:center;
  gap:12px;
  border-radius:17px;
  background:white;
  box-shadow:0 7px 20px rgba(30,75,135,.07);
}

.profile-country>div:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:3px;
}

.profile-country strong{
  color:#07194c;
  font-size:14px;
}

.profile-country small{
  color:#7f8da2;
  font-size:10px;
}

.flag-us,
.flag-de,
.flag-fr{
  width:67px;
  height:42px;
  overflow:hidden;
  position:relative;
  border-radius:6px;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
}

.flag-us{
  background:repeating-linear-gradient(
    to bottom,
    #b22234 0 3.23px,
    white 3.23px 6.46px
  );
}

.us-canton{
  position:absolute;
  left:0;
  top:0;
  width:28px;
  height:23px;
  overflow:hidden;
  padding:1px;
  box-sizing:border-box;
  background:#3c3b6e;
  color:white;
  font-size:4px;
  line-height:5px;
  letter-spacing:0;
}

.flag-de{
  display:flex;
  flex-direction:column;
}

.flag-de b{
  flex:1;
}

.flag-de b:nth-child(1){background:#111}
.flag-de b:nth-child(2){background:#dd1f2f}
.flag-de b:nth-child(3){background:#ffce00}

.flag-fr{
  display:flex;
}

.flag-fr b{
  flex:1;
}

.flag-fr b:nth-child(1){background:#0055a4}
.flag-fr b:nth-child(2){background:white}
.flag-fr b:nth-child(3){background:#ef4135}

.profile-country>i{
  width:11px;
  height:11px;
  border-radius:50%;
}

.status-residence{
  background:#176fed;
}

.status-current{
  background:#18c9bd !important;
  box-shadow:0 0 0 4px rgba(24,201,189,.13);
}

.status-visited{
  background:#28bd70;
}