/* =========================================================
   CARTES (MAPS) — Desktop (inchangé esprit wow)
   + Mobile (mode différent : 1 phone + carousel)
   ========================================================= */

.maps{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  overflow-x:clip;
}
@supports not (overflow: clip){
  .maps{ overflow-x:hidden; }
}

.maps__wrap{ position:relative; z-index:2; }
.maps__text{ position:relative; }

.maps__tag{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:950;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  color:rgba(11,18,32,.78);
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  box-shadow:0 14px 34px rgba(0,0,0,.06);
}

.maps__title{ margin-top:10px; }
.maps__lead{ max-width:56ch; }

/* FX bg */
.maps__bg{ position:absolute; inset:-2px; z-index:0; pointer-events:none; }
.maps__orb{
  position:absolute; width:680px; height:680px; border-radius:999px;
  filter: blur(42px); opacity:.50; transform:translateZ(0);
}
.maps__orb--a{
  left:-280px; top:-300px;
  background: radial-gradient(circle at 30% 30%, rgba(74,152,255,.55), transparent 60%);
}
.maps__orb--b{
  right:-320px; bottom:-340px;
  background: radial-gradient(circle at 60% 60%, rgba(170,96,255,.40), transparent 62%);
}
.maps__grid{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(11,18,32,.05), transparent 30%),
    radial-gradient(circle at 60% 0%, rgba(255,255,255,.70), transparent 55%),
    linear-gradient(to right, rgba(11,18,32,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,.06) 1px, transparent 1px);
  background-size:auto, auto, 44px 44px, 44px 44px;
  opacity:.16;
  mask-image: radial-gradient(circle at 50% 40%, black 55%, transparent 78%);
}
.maps__noise{
  position:absolute; inset:0; opacity:.055;
  background-image:url("assets/noise.png");
  background-size:220px 220px;
  mix-blend-mode:multiply;
}

/* =========================================================
   TOOLS (left)
   ========================================================= */
.tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.tool{
  position:relative;
  padding:14px 14px 12px;
  border-radius:22px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  box-shadow:0 22px 58px rgba(0,0,0,.08);
  overflow:hidden;
  transform:translateZ(0);
  cursor:pointer;
  transition: transform .26s cubic-bezier(.2,.8,.2,1),
              box-shadow .26s ease,
              border-color .26s ease,
              background .26s ease;
}
.tool--wide{ grid-column:1 / -1; }

.tool__top{ display:flex; align-items:center; gap:10px; }
.tool__icon{
  width:34px; height:34px; border-radius:13px;
  display:grid; place-items:center;
  color:rgba(11,18,32,.88);
  border:1px solid rgba(11,18,32,.10);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,.60)),
    linear-gradient(135deg, rgba(74,152,255,.20), rgba(170,96,255,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92),
              0 14px 30px rgba(0,0,0,.10);
}
.tool__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tool__name{ display:block; font-weight:1050; letter-spacing:-.01em; font-size:14px; color:rgba(11,18,32,.92); }
.tool__mini{ font-weight:950; color:rgba(11,18,32,.58); font-size:11px; }
.tool__desc{ margin:9px 0 0; color:rgba(11,18,32,.70); font-weight:900; line-height:1.45; font-size:13px; }

.tool__ctaRow{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.tool__cta{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  isolation:isolate;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.10),
              inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool__ctaGlow{ z-index:0; opacity:.55; transform:translate3d(0,0,0); }

.tool__cta::before{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 44%, transparent 58%);
  transform: translateX(-120%) rotate(8deg);
  opacity:.9;
  animation: ctaSheen 3.2s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
.tool__cta::after{
  content:"";
  position:absolute;
  inset:-8px -12px;
  border-radius:18px;
  border:1px solid rgba(0,122,255,.26);
  box-shadow: 0 0 0 7px rgba(0,122,255,.08),
              0 22px 70px rgba(0,122,255,.14);
  opacity:0;
  transform:scale(.985);
  pointer-events:none;
  animation: ctaPulse 2.6s ease-in-out infinite;
  z-index:1;
}

.tool__shine{
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 34%, rgba(255,255,255,.10));
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.tool__border{
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background: linear-gradient(135deg, rgba(74,152,255,.20), rgba(170,96,255,.14), rgba(255,255,255,.20));
  opacity:0;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  transition:opacity .28s ease;
}

@media (hover:hover){
  .tool--fx:hover{
    transform: translateY(-3px) scale(1.008);
    box-shadow:0 30px 85px rgba(0,0,0,.12);
    border-color:rgba(0,122,255,.16);
    background:rgba(255,255,255,.68);
  }
  .tool--fx:hover .tool__shine{ opacity:1; }
  .tool--fx:hover .tool__border{ opacity:1; }
  .tool--fx:hover .tool__ctaGlow{ opacity:1; }
  .tool--fx:hover .tool__cta::after{ opacity:.9; transform:scale(1); animation:none; }
}

.tool.is-selected{ box-shadow:0 34px 95px rgba(0,0,0,.14); border-color:rgba(0,122,255,.18); }
.tool.is-selected .tool__border{ opacity:1; }
.tool.is-selected .tool__ctaGlow{ opacity:1; }

.tool.is-interacted .tool__cta::after{ animation:none !important; opacity:0 !important; }

@keyframes ctaSheen{
  0%{ transform: translateX(-120%) rotate(8deg); }
  45%{ transform: translateX(0%) rotate(8deg); }
  100%{ transform: translateX(120%) rotate(8deg); }
}
@keyframes ctaPulse{
  0%{ opacity:0; transform:scale(.985); }
  18%{ opacity:.85; transform:scale(1); }
  36%{ opacity:0; transform:scale(1.03); }
  100%{ opacity:0; transform:scale(.985); }
}

/* =========================================================
   RIGHT DECK (tabs + preview)
   ========================================================= */
.mapsDeck{
  border-radius:26px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.10);
  padding:12px;
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  max-width:100%;
}
.mapsDeck--fx::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 18% 10%, rgba(74,152,255,.18), transparent 55%),
    radial-gradient(circle at 82% 70%, rgba(170,96,255,.14), transparent 60%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

.mapsDeck__base{
  position:relative;
  z-index:1;
  transition: opacity .18s ease,
              transform .34s cubic-bezier(.2,.8,.2,1),
              filter .25s ease;
}
.mapsDeck.is-phone-open .mapsDeck__base{
  opacity:1;
  filter: blur(10px);
  transform: translateY(10px) scale(.985);
  pointer-events:none;
}

.mapsDeck__tabs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.mapsTab{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-align:center;
  border-radius:22px;
  user-select:none;
}
.mapsTab__thumb{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(11,18,32,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.10);
  transform: translateZ(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.mapsTab__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mapsTab__txt{
  display:block;
  margin-top:9px;
  font-weight:1050;
  letter-spacing:-.01em;
  color:rgba(11,18,32,.92);
  font-size:13px;
}
.mapsTab.is-active .mapsTab__thumb{
  outline:4px solid rgba(0,122,255,.95);
  outline-offset:2px;
  box-shadow:0 20px 55px rgba(0,0,0,.14);
}
@media (hover:hover){
  .mapsTab:hover .mapsTab__thumb{
    transform: translateY(-2px);
    box-shadow:0 24px 70px rgba(0,0,0,.14);
  }
}

.mapsDeck__preview{
  margin-top:12px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(11,18,32,.05);
}
.mapsPv{
  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .30s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.mapsPv.is-on{ opacity:1; position:relative; transform: scale(1); }

.mapsDeck__shine{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 35%, rgba(255,255,255,.08));
  pointer-events:none; mix-blend-mode:screen;
}
.mapsDeck__depth{
  position:absolute; inset:-1px;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.28), transparent 55%);
  opacity:.55; pointer-events:none;
}
.mapsDeck__badge{
  position:absolute;
  left:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  color:rgba(255,255,255,.92);
  background:rgba(11,18,32,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.mapsDeck__badge .dot{
  width:8px; height:8px;
  border-radius:99px;
  background:rgba(84,255,190,.95);
  box-shadow:0 0 0 4px rgba(84,255,190,.18);
}

/* =========================================================
   PHONE OVERLAY (Desktop) — conserve le wow
   ========================================================= */
.mapsDeck.is-phone-open{ overflow:visible; }

.mapsDeckPhone{
  position:absolute;
  inset:12px;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transform: translateY(14px) scale(.965);
  filter: blur(10px);
  clip-path: inset(16% 18% 16% 18% round 26px);
  transition:
    opacity .18s ease,
    transform .45s cubic-bezier(.2,.8,.2,1),
    filter .25s ease,
    clip-path .55s cubic-bezier(.2,.8,.2,1);
}
.mapsDeck.is-phone-open .mapsDeckPhone{
  opacity:1;
  pointer-events:auto;
  overflow:visible;
  transform: translateY(0) scale(1);
  filter: blur(0);
  clip-path:none;
}

/* close desktop */
.mapsDeckPhone__top{
  position:absolute;
  top:10px;
  right:10px;
  z-index:10;
  display:flex;
  justify-content:flex-end;
}
.mapsDeckPhone__close{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.86);
  cursor:pointer;
  font-weight:1100;
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  transition: transform .15s ease;
}
.mapsDeckPhone__close:active{ transform: scale(.98); }

/* duo desktop */
.mapsPhones{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:center;
  justify-items:center;
  padding: 54px 6px 4px;
  perspective: 1200px;
  overflow:visible;
}

.mapsPhone{
  position:relative;
  width:min(290px, 100%);
  transform-style:preserve-3d;
  filter: drop-shadow(0 44px 80px rgba(0,0,0,.22));
  overflow:visible;
  will-change: transform;
}

.mapsPhone__screen{
  position:relative;
  z-index:1;
  border-radius:36px;
  overflow:hidden;
  border:0 !important;
  background:rgb(0 0 0);
}
.mapsPhone__screen::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(74,152,255,.12), transparent 55%),
    radial-gradient(circle at 10% 70%, rgba(170,96,255,.10), transparent 60%);
  mix-blend-mode:screen;
  opacity:.9;
}
.mapsPhone__screen::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(11,18,32,.08) 100%);
  opacity:.55;
}

.mapsPhone__shots{ position:relative; padding:14px; transform: translateZ(1px); }
.mapsPhone__shot{
  width:100%;
  aspect-ratio: 9 / 19.5;
  border-radius:28px;
  overflow:hidden;
  border:0 !important;
  background: rgba(11,18,32,.06);
  box-shadow:
    0 28px 74px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.70);
  transform: translateZ(0);
}
.mapsPhone__shot img{ width:100%; height:100%; object-fit:cover; display:block; }

.mapsPhone--a{
  transform: rotateX(20deg) rotateY(-6deg) rotateZ(-11deg)
            translate3d(-18px,-36px,70px);
}
.mapsPhone--b{
  transform: rotateX(14deg) rotateY(9deg) rotateZ(10deg)
            translate3d(18px,-10px,22px);
}

/* Info */
.mapsPhoneInfo{
  margin-top:10px;
  padding: 0 10px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mapsPhone__desc{
  margin:0;
  color:rgba(11,18,32,.74);
  font-weight:900;
  line-height:1.55;
  font-size:13px;
}
.mapsPhone__pills{ display:flex; flex-wrap:wrap; gap:10px; }
.mapsPhone__pill{
  padding:9px 10px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background: rgba(255,255,255,.70);
  font-weight:950;
  color:rgba(11,18,32,.72);
  font-size:12px;
}
.mapsDeckPhone__hint{
  margin-top:8px;
  text-align:center;
  font-weight:900;
  font-size:12px;
  color:rgba(11,18,32,.48);
}

/* =========================================================
   MOBILE — MODE DIFFERENT (simple + stable)
   ========================================================= */
@media (max-width: 860px){

  .tools{ grid-template-columns:1fr; }
  .tool--wide{ grid-column:auto; }

  /* ✅ MOBILE: on cache le bouton / la zone CTA */
  .tool__ctaRow{ display:none !important; }

  /* ✅ MOBILE: bloc visible mais non ouvrable (pas de curseur "cliquable") */
  .tool{
    cursor: default;
  }

  /* optionnel : on coupe les hover/fx agressifs sur mobile */
  .tool--fx{
    transform:none !important;
  }

  /* On garde le deck normal en dessous, mais il est flouté via .is-phone-open */
  .mapsDeck.is-phone-open{ overflow:hidden; }

  /* FULLSCREEN MODAL (desktop only en pratique, car JS bloque sur mobile) */
  .mapsDeckPhone{
    position:fixed;
    inset:0;
    z-index:9999;
    width:100vw;
    max-width:100vw;

    padding: calc(64px + env(safe-area-inset-top)) 14px
             calc(18px + env(safe-area-inset-bottom)) 14px;

    background: rgba(245,248,255,.90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow:auto;
    -webkit-overflow-scrolling: touch;

    opacity:0;
    pointer-events:none;

    transform:none;
    filter:none;
    clip-path:none;
  }
  .mapsDeck.is-phone-open .mapsDeckPhone{
    opacity:1;
    pointer-events:auto;
  }

  .mapsDeckPhone__top{
    position:fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    z-index:10000;
  }
  .mapsDeckPhone__close{
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(11,18,32,.12);
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 54px rgba(0,0,0,.18);
  }

  .mapsPhones{
    grid-template-columns:1fr;
    padding: 6px 0 0;
    gap: 10px;
    justify-items:center;
    perspective:none;
  }
  .mapsPhone--b{ display:none; }

  .mapsPhone{
    width: min(260px, 78vw);
    filter: drop-shadow(0 24px 44px rgba(0,0,0,.16));
    transform: none !important;
    will-change: auto;
  }

  .mapsPhone__shots{
    padding: 10px;
  }
  .mapsPhone__carousel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .mapsPhone__carousel::-webkit-scrollbar{ display:none; }
  .mapsPhone__carousel{ scrollbar-width:none; }

  .mapsPhone__carousel .mapsPhone__shot{
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: 24px;
  }

  .mapsPhone__dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    opacity:.85;
  }
  .mapsPhone__dot{
    width:7px;
    height:7px;
    border-radius:999px;
    background: rgba(11,18,32,.18);
  }
  .mapsPhone__dot.is-on{
    background: rgba(0,122,255,.95);
    box-shadow: 0 0 0 4px rgba(0,122,255,.12);
  }

  .mapsPhoneInfo{
    width:100%;
    max-width: 560px;
    margin: 12px auto 0;
    padding: 0 2px 10px;
  }

  .mapsDeckPhone__hint{
    margin-top:10px;
    opacity:.70;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .tool,
  .mapsDeckPhone,
  .mapsDeck__base,
  .mapsPv,
  .mapsTab__thumb{
    transition:none !important;
  }
  .tool__cta::before,
  .tool__cta::after{
    animation:none !important;
  }
}