/* =========================================================
   maintenance.css — Page temporaire ARKHEIN France
   Version finale : fond flou, verre dépoli, drag, tilt, shine
========================================================= */

:root{
  --m-white:#FFFFFF;
  --m-paper:#F8F8FC;

  --m-violet:#2E2C62;
  --m-violet-deep:#171338;
  --m-violet-soft:#DCDDF4;

  --m-bordeaux:#8B1F49;
  --m-bordeaux-2:#A33A61;

  --m-ink:#111327;
  --m-ink-soft:#4C4F74;

  --m-line:rgba(46,44,98,.13);
  --m-line-strong:rgba(46,44,98,.22);

  --m-shadow:0 30px 90px rgba(23,19,56,.14);
  --m-radius:34px;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  min-height:100vh;
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--m-ink);
  overflow-x:hidden;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAFAFE 42%, #F2F3FA 100%);
}

/* =========================================================
   FOND FLOU / AMBIANCE
========================================================= */

.maintenance-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(46,44,98,.12), transparent 70%),
    radial-gradient(900px 520px at 50% 110%, rgba(46,44,98,.14), transparent 72%),
    linear-gradient(90deg, rgba(46,44,98,.035), transparent 24%, transparent 76%, rgba(46,44,98,.035));
}

.maintenance-bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    linear-gradient(rgba(46,44,98,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,44,98,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 48%, black 0%, transparent 68%);
  opacity:.35;
}

.maintenance-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 48%, rgba(255,255,255,.55) 100%);
}

.blur-orb{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(44px);
  opacity:.72;
  transform:translate3d(0,0,0);
  animation:orbFloat 12s ease-in-out infinite alternate;
}

.blur-orb--one{
  width:360px;
  height:360px;
  left:8%;
  top:16%;
  background:rgba(46,44,98,.18);
}

.blur-orb--two{
  width:420px;
  height:420px;
  right:7%;
  top:14%;
  background:rgba(139,31,73,.14);
  animation-duration:15s;
}

.blur-orb--three{
  width:480px;
  height:480px;
  left:28%;
  bottom:-180px;
  background:rgba(46,44,98,.16);
  animation-duration:18s;
}

.blur-orb--four{
  width:300px;
  height:300px;
  right:22%;
  bottom:8%;
  background:rgba(216,218,242,.55);
  animation-duration:14s;
}

/* =========================================================
   PAGE
========================================================= */

.maintenance-page{
  position:relative;
  z-index:1;
  min-height:100vh;
  padding:42px 18px;
  pointer-events:none;
}

/* Élément déplacé par JS */
.maintenance-card-stage{
  position:fixed;
  z-index:3;
  left:50%;
  top:50%;
  width:min(820px, calc(100vw - 42px));
  max-width:calc(100vw - 28px);
  transform:translate(-50%, -50%);
  cursor:grab;
  user-select:none;
  touch-action:none;
  pointer-events:auto;
  opacity:0;
  animation:cardStageReveal .72s cubic-bezier(.2,.8,.2,1) forwards;
}

.maintenance-card-stage.is-js-positioned{
  transform:none;
}

.maintenance-card-stage.is-dragging{
  cursor:grabbing;
}

.maintenance-card-stage.is-recentering{
  transition:
    left .58s cubic-bezier(.16, 1, .3, 1),
    top .58s cubic-bezier(.16, 1, .3, 1);
}

/* =========================================================
   CARTE — VERRE DÉPOLI + TILT
========================================================= */

.maintenance-card{
  --tilt-x:0deg;
  --tilt-y:0deg;
  --glow-x:50%;
  --glow-y:42%;

  width:100%;
  position:relative;
  overflow:hidden;
  border-radius:var(--m-radius);

  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style:preserve-3d;

  background:
    radial-gradient(
      520px circle at var(--glow-x) var(--glow-y),
      rgba(255,255,255,.74),
      rgba(255,255,255,.30) 34%,
      transparent 62%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.76) 0%,
      rgba(255,255,255,.48) 48%,
      rgba(242,243,255,.62) 100%
    ) padding-box,
    linear-gradient(
      135deg,
      rgba(255,255,255,.96),
      rgba(46,44,98,.22),
      rgba(139,31,73,.18)
    ) border-box;

  border:1px solid transparent;

  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 0 0 1px rgba(255,255,255,.52) inset,
    0 30px 90px rgba(23,19,56,.14),
    0 18px 45px rgba(46,44,98,.08);

  backdrop-filter:blur(30px) saturate(1.18);
  -webkit-backdrop-filter:blur(30px) saturate(1.18);

  transition:
    transform .16s ease-out,
    box-shadow .18s ease-out,
    background .18s ease-out;
}

.maintenance-card-stage.is-dragging .maintenance-card{
  transition:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 0 0 1px rgba(255,255,255,.52) inset,
    0 42px 120px rgba(23,19,56,.22),
    0 22px 60px rgba(46,44,98,.13);
}

.maintenance-card-stage.is-recentering .maintenance-card{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.maintenance-card::before{
  content:"";
  position:absolute;
  inset:22px;
  z-index:2;
  border-radius:calc(var(--m-radius) - 10px);
  border:1px solid rgba(46,44,98,.12);
  pointer-events:none;
}

.maintenance-card::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-90px;
  z-index:1;
  height:170px;
  border-radius:999px;
  background:rgba(46,44,98,.09);
  filter:blur(42px);
  pointer-events:none;
}

.maintenance-card__inner{
  position:relative;
  z-index:3;
  min-height:560px;
  padding:52px 44px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* =========================================================
   ANIMATION D’ARRIVÉE DU CONTENU
========================================================= */

.maintenance-logoWrap,
.maintenance-badge,
.maintenance-title,
.maintenance-separator,
.maintenance-text,
.maintenance-pill{
  opacity:0;
  transform:translateY(14px);
  animation:contentReveal .66s cubic-bezier(.2,.8,.2,1) forwards;
}

.maintenance-logoWrap{
  animation-delay:.10s;
}

.maintenance-badge{
  animation-delay:.18s;
}

.maintenance-title{
  animation-delay:.26s;
}

.maintenance-separator{
  animation-delay:.34s;
}

.maintenance-text{
  animation-delay:.42s;
}

.maintenance-text--strong{
  animation-delay:.50s;
}

.maintenance-pill{
  animation-delay:.58s;
}

/* =========================================================
   LOGO
========================================================= */

.maintenance-logoWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:24px;
}

.maintenance-logo{
  display:block;
  width:112px;
  max-width:112px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 16px 28px rgba(23,19,56,.12))
    drop-shadow(0 0 18px rgba(255,255,255,.92));
}

/* =========================================================
   CONTENU
========================================================= */

.maintenance-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 24px;
  margin:0 auto 26px;
  border-radius:999px;
  background:
    linear-gradient(135deg, var(--m-bordeaux), var(--m-bordeaux-2));
  color:#fff;
  font-family:Impact, "Inter", sans-serif;
  font-size:.88rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:
    0 14px 30px rgba(139,31,73,.20),
    0 0 0 1px rgba(255,255,255,.24) inset;
}

.maintenance-title{
  margin:0 auto;
  max-width:660px;
  font-family:"Bodoni Moda", Georgia, serif;
  font-size:clamp(2.25rem, 4.5vw, 3.65rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--m-violet);
  text-transform:none;
  text-wrap:balance;
}

.maintenance-separator{
  width:min(220px, 70%);
  margin:26px auto 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.maintenance-separator::before,
.maintenance-separator::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg, transparent, rgba(46,44,98,.22), transparent);
}

.maintenance-separator span{
  width:8px;
  height:8px;
  display:block;
  transform:rotate(45deg);
  border-radius:2px;
  background:var(--m-bordeaux);
  box-shadow:0 0 18px rgba(139,31,73,.22);
}

.maintenance-text{
  max-width:580px;
  margin:0 auto;
  font-size:1.04rem;
  line-height:1.72;
  color:var(--m-ink-soft);
  text-wrap:balance;
}

.maintenance-text + .maintenance-text{
  margin-top:14px;
}

.maintenance-text--strong{
  font-weight:700;
  color:var(--m-bordeaux);
}

/* =========================================================
   ARKHEIN FRANCE — REFLET LUMINEUX
========================================================= */

.maintenance-pill{
  width:min(440px, 100%);
  min-height:66px;
  margin:32px auto 0;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(130% 180% at 50% 0%, rgba(230,232,255,.18) 0%, transparent 52%),
    linear-gradient(135deg, #161739 0%, #2E2C62 100%);
  color:#F7F7FF;
  font-family:"Bodoni Moda", Georgia, serif;
  font-size:clamp(1.1rem, 2.3vw, 1.55rem);
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:
    0 18px 42px rgba(14,16,48,.22),
    0 0 0 1px rgba(230,232,255,.18) inset;
}

.maintenance-pill::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-65%;
  width:44%;
  height:160%;
  transform:skewX(-18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.44),
      transparent
    );
  animation:pillShine 5.2s ease-in-out infinite;
}

.maintenance-pill::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:21px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}

.maintenance-pill:hover{
  color:#FFFFFF;
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:
    0 24px 52px rgba(14,16,48,.28),
    0 0 0 1px rgba(230,232,255,.24) inset;
}

.maintenance-pill:focus-visible{
  outline:3px solid rgba(139,31,73,.42);
  outline-offset:5px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes orbFloat{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }

  100%{
    transform:translate3d(28px,-22px,0) scale(1.05);
  }
}

@keyframes cardStageReveal{
  0%{
    opacity:0;
    filter:blur(10px);
  }

  100%{
    opacity:1;
    filter:blur(0);
  }
}

@keyframes contentReveal{
  0%{
    opacity:0;
    transform:translateY(14px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes pillShine{
  0%{
    left:-65%;
    opacity:0;
  }

  18%{
    opacity:0;
  }

  32%{
    opacity:.9;
  }

  52%{
    left:125%;
    opacity:0;
  }

  100%{
    left:125%;
    opacity:0;
  }
}

/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media (max-width:900px){
  .maintenance-card-stage{
    width:min(760px, calc(100vw - 32px));
  }

  .maintenance-card::before{
    inset:18px;
  }

  .maintenance-card__inner{
    min-height:520px;
    padding:44px 30px 42px;
  }

  .maintenance-logo{
    width:98px;
    max-width:98px;
  }

  .maintenance-title{
    max-width:600px;
    font-size:clamp(2.15rem, 7vw, 3.3rem);
  }

  .maintenance-text{
    font-size:1rem;
    line-height:1.68;
  }

  .maintenance-pill{
    width:min(420px, 100%);
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width:640px){
  .maintenance-page{
    padding:22px 10px;
  }

  .maintenance-card-stage{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
  }

  .maintenance-card{
    border-radius:26px;
  }

  .maintenance-card::before{
    inset:12px;
    border-radius:20px;
  }

  .maintenance-card__inner{
    min-height:auto;
    padding:34px 18px 32px;
  }

  .maintenance-logoWrap{
    margin-bottom:18px;
  }

  .maintenance-logo{
    width:82px;
    max-width:82px;
  }

  .maintenance-badge{
    min-height:36px;
    padding:8px 18px;
    margin-bottom:20px;
    font-size:.78rem;
    letter-spacing:.15em;
  }

  .maintenance-title{
    max-width:340px;
    font-size:clamp(2rem, 10vw, 2.85rem);
    line-height:1.07;
  }

  .maintenance-separator{
    margin:23px auto 25px;
  }

  .maintenance-text{
    font-size:.96rem;
    line-height:1.62;
  }

  .maintenance-text--strong{
    font-size:.98rem;
  }

  .maintenance-pill{
    min-height:58px;
    margin-top:28px;
    padding:16px 18px;
    border-radius:19px;
    font-size:clamp(1rem, 4.8vw, 1.22rem);
    letter-spacing:.14em;
  }

  .blur-orb{
    filter:blur(36px);
  }

  .blur-orb--one{
    width:260px;
    height:260px;
    left:-80px;
    top:12%;
  }

  .blur-orb--two{
    width:280px;
    height:280px;
    right:-100px;
    top:18%;
  }

  .blur-orb--three{
    width:320px;
    height:320px;
    left:10%;
    bottom:-150px;
  }

  .blur-orb--four{
    width:240px;
    height:240px;
    right:-80px;
    bottom:4%;
  }
}

/* =========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

  .maintenance-card-stage{
    opacity:1;
    filter:none;
  }

  .maintenance-logoWrap,
  .maintenance-badge,
  .maintenance-title,
  .maintenance-separator,
  .maintenance-text,
  .maintenance-pill{
    opacity:1;
    transform:none;
  }
}