*{box-sizing:border-box}
html,body{margin:0;background:#02050d;color:#f7f8ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,a{font:inherit}
.page{min-height:100vh;background:radial-gradient(circle at 50% 70%,rgba(65,50,190,.16),transparent 30%),#02050d}

/* Intro très courte : donne une sensation d'application sans ralentir l'accès. */
.boot-screen{position:fixed;inset:0;z-index:100;background:#02050d;display:grid;place-content:center;text-align:center;gap:12px;pointer-events:none;opacity:1;animation:bootOut .75s ease 1.05s forwards}
.boot-logo{font-size:58px;font-weight:850;letter-spacing:-5px}.boot-logo span{color:#8a5cff}.boot-line{font-size:15px;color:#9ea7ba;letter-spacing:.5px}.boot-status{font-size:12px;color:#697489}.boot-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0df3d4;box-shadow:0 0 12px #0df3d4;margin-right:5px}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

.space{width:100%;overflow:hidden;line-height:0;position:relative;isolation:isolate}
.space>img{display:block;width:100%;height:auto;max-height:72vh;object-fit:cover;object-position:top}
.space::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(to bottom,transparent,rgba(2,5,13,.88));z-index:1;pointer-events:none}
.space-effects{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.star{position:absolute;width:4px;height:4px;border-radius:50%;background:#b9eaff;box-shadow:0 0 9px #42bfff;opacity:.45;animation:twinkle 4s ease-in-out infinite}
.star-a{left:31%;top:25%;animation-delay:.4s}.star-b{left:69%;top:20%;animation-delay:1.6s}.star-c{left:47%;top:54%;animation-delay:2.5s}.star-d{left:86%;top:43%;animation-delay:1s}.star-e{left:16%;top:67%;animation-delay:3s}
.orbital{position:absolute;width:38%;height:24%;left:34%;top:27%;border:1px solid rgba(71,153,255,.11);border-radius:50%;transform:rotate(-8deg);animation:orbitDrift 18s ease-in-out infinite alternate}
.orbital-b{width:26%;height:18%;left:58%;top:41%;border-color:rgba(168,90,255,.1);transform:rotate(16deg);animation-duration:22s;animation-direction:alternate-reverse}
.energy{position:absolute;width:160px;height:160px;border-radius:50%;filter:blur(28px);opacity:.09;mix-blend-mode:screen;animation:energyFloat 9s ease-in-out infinite}
.energy-a{left:44%;top:36%;background:#00aaff}.energy-b{left:76%;top:54%;background:#6d39ff;animation-delay:-4s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.9;transform:scale(1.35)}}
@keyframes orbitDrift{from{transform:rotate(-8deg) translateX(-1%)}to{transform:rotate(-4deg) translateX(2%)}}
@keyframes energyFloat{0%,100%{transform:translate3d(0,0,0) scale(.8)}50%{transform:translate3d(18px,-12px,0) scale(1.15)}}

.portal-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.brand{position:absolute;left:3.5%;top:5%;font-size:clamp(40px,4.8vw,72px);font-weight:850;letter-spacing:-4px;line-height:1;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.08)}
.brand span{color:#8a5cff}
.portal-stage{position:absolute;left:8%;top:29%;width:29%;padding:0;pointer-events:auto;cursor:pointer;transition:transform .35s ease}
.portal-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 0 8px rgba(0,160,255,.16));animation:portalBreath 5s ease-in-out infinite}
.portal-stage::before{content:"";position:absolute;inset:4% 0 3%;border-radius:50%;background:radial-gradient(circle,rgba(0,180,255,.05),transparent 55%);filter:blur(14px);z-index:-1}
.portal-wave{position:absolute;left:12%;top:15%;width:25%;aspect-ratio:1;border:1px solid rgba(0,190,255,.5);border-radius:50%;opacity:0;pointer-events:none}
.portal-stage:hover{transform:translateY(-3px) scale(1.015)}
.portal-stage:hover .portal-logo{filter:drop-shadow(0 0 14px rgba(0,180,255,.34))}
.portal-stage:active .portal-wave{animation:portalWave .75s ease-out}
@keyframes portalBreath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(0,160,255,.14))}50%{transform:scale(1.012);filter:drop-shadow(0 0 13px rgba(0,180,255,.27))}}
@keyframes portalWave{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(3.4)}}

.status-pill{position:absolute;right:3.4%;top:5%;min-width:166px;height:52px;padding:0 17px;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid rgba(40,245,220,.34);border-radius:999px;background:rgba(5,10,19,.58);box-shadow:0 0 22px rgba(0,230,205,.06),inset 0 0 24px rgba(0,255,220,.025);backdrop-filter:blur(9px);color:#f1f4fb;font-size:18px;line-height:1;white-space:nowrap;pointer-events:auto;cursor:pointer;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.status-pill::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,rgba(0,255,220,.18) 48%,transparent 70%);transform:translateX(-110%);animation:statusSweep 4.5s ease-in-out infinite;pointer-events:none}
.status-pill:hover,.status-pill.is-open{transform:translateY(-2px) scale(1.025);border-color:rgba(40,245,220,.72);box-shadow:0 0 30px rgba(0,230,205,.15),inset 0 0 30px rgba(0,255,220,.07)}
.status-indicator{position:relative;width:15px;height:15px;flex:0 0 15px;display:block}
.status-dot{position:absolute;inset:0;border-radius:50%;background:#0df3d4;box-shadow:0 0 12px rgba(13,243,212,.9),0 0 28px rgba(13,243,212,.35);animation:dotPulse 2s ease-in-out infinite;z-index:2}
.status-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid #0df3d4;animation:ringPulse 2s ease-out infinite;z-index:1}
.status-text{position:relative;z-index:2}
.status-panel{position:absolute;right:3.4%;top:calc(5% + 63px);width:245px;padding:15px;border:1px solid rgba(40,245,220,.24);border-radius:18px;background:rgba(3,9,18,.86);box-shadow:0 20px 50px rgba(0,0,0,.42),0 0 28px rgba(0,220,200,.08);backdrop-filter:blur(16px);pointer-events:auto;line-height:1.3;animation:panelIn .22s ease-out}
.status-panel[hidden]{display:none}
.status-panel-head{display:flex;flex-direction:column;gap:4px;padding-bottom:10px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;color:#aab4c8}.status-panel-head strong{font-size:11px;letter-spacing:1.6px;color:#0df3d4}
.service-row{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;font-size:12px;color:#b7c0d0}.service-row span{display:flex;align-items:center;gap:7px}.service-row i{width:6px;height:6px;border-radius:50%;background:#0df3d4;box-shadow:0 0 8px #0df3d4}.service-row b{font-weight:600;color:#8e9bb0}
@keyframes statusSweep{0%,55%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}
@keyframes dotPulse{0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(13,243,212,.9),0 0 28px rgba(13,243,212,.35)}50%{transform:scale(1.14);box-shadow:0 0 18px rgba(13,243,212,1),0 0 38px rgba(13,243,212,.5)}}
@keyframes ringPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.1);opacity:0}}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

.content{width:min(1120px,calc(100% - 48px));margin:-12px auto 0;position:relative;z-index:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.card{position:relative;display:flex;align-items:flex-start;gap:20px;min-height:230px;padding:34px 30px;margin:0;border-radius:24px;border:1px solid rgba(150,150,255,.25);text-decoration:none;color:#fff;background:rgba(5,8,20,.88);box-shadow:0 20px 70px rgba(0,0,0,.35),inset 0 0 45px rgba(0,140,255,.05);backdrop-filter:blur(14px);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.045) 48%,transparent 68%);transform:translateX(-115%);transition:transform .7s ease;pointer-events:none}
.card:hover{transform:translateY(-7px) scale(1.008);border-color:rgba(170,150,255,.58);box-shadow:0 26px 85px rgba(0,0,0,.45),0 0 0 1px rgba(165,140,255,.16),0 0 32px rgba(110,75,255,.15),inset 0 0 45px rgba(100,70,255,.06)}
.card:hover::before{transform:translateX(115%)}
.card.pressed{transform:scale(.985)}
.card::after{content:"";position:absolute;right:-70px;bottom:-85px;width:230px;height:150px;border-radius:50%;filter:blur(18px);opacity:.7;pointer-events:none;transition:opacity .3s,transform .3s}
.card:hover::after{opacity:.95;transform:scale(1.08)}
.home{border-color:rgba(40,145,255,.28);box-shadow:0 20px 70px rgba(0,0,0,.35),inset 0 0 45px rgba(0,140,255,.06)}
.home:hover{border-color:rgba(60,175,255,.62);box-shadow:0 26px 85px rgba(0,0,0,.45),0 0 0 1px rgba(60,175,255,.16),0 0 32px rgba(0,145,255,.16),inset 0 0 45px rgba(0,140,255,.07)}
.home::after{background:rgba(0,115,255,.45)}
.password{border-color:rgba(40,190,190,.25)}
.password:hover{border-color:rgba(40,235,215,.5);box-shadow:0 26px 85px rgba(0,0,0,.45),0 0 0 1px rgba(20,230,205,.13),0 0 32px rgba(20,230,195,.12),inset 0 0 45px rgba(10,210,190,.05)}
.password::after{background:rgba(20,230,195,.35)}
.icon{flex:0 0 78px;width:78px;height:78px;border-radius:20px;display:grid;place-items:center;font-size:44px;color:#54bfff;background:rgba(0,110,210,.16);box-shadow:inset 0 0 35px rgba(0,150,255,.09);transition:transform .3s,box-shadow .3s}
.password .icon{color:#17ead0;background:rgba(10,170,160,.12)}
.card:hover .icon{transform:translateY(-2px) rotate(-2deg);box-shadow:inset 0 0 35px rgba(0,155,255,.15),0 0 20px rgba(0,145,255,.10)}
.password:hover .icon{box-shadow:inset 0 0 35px rgba(10,220,190,.12),0 0 20px rgba(10,220,190,.08)}
.home-icon,.key-icon{display:block;transition:transform .3s}.card:hover .home-icon{transform:scale(1.08)}.card:hover .key-icon{transform:scale(1.08) rotate(-8deg)}
.card-copy{padding-top:3px;position:relative;z-index:2}
.tag{display:block;font-size:12px;letter-spacing:2.5px;font-weight:800;color:#4db8ff;margin-bottom:10px}.password .tag{color:#16e4d0}
h2{margin:0 0 12px;font-size:32px;letter-spacing:-1px}p{margin:0;color:#aab2c6;font-size:16px;line-height:1.5}
.card-hint{display:block;margin-top:15px;font-size:11px;letter-spacing:.4px;color:#6f7890;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}.card:hover .card-hint{opacity:1;transform:none}
.arrow{position:absolute;right:26px;top:23px;font-size:30px;color:#49b8ff;transition:transform .3s}.password .arrow{color:#17e7d2}.card:hover .arrow{transform:translate(3px,-3px) scale(1.08)}
footer{grid-column:1/-1;text-align:center;padding:20px 10px 45px;color:#858da0;font-size:15px;line-height:2}.email{display:inline-block;margin-bottom:8px;color:#a987ff;text-decoration:none;font-size:20px}.email:hover{text-shadow:0 0 15px rgba(170,130,255,.55)}footer span{color:#9b7dff}

@media(max-width:900px){
 .space>img{width:100%;max-height:none;object-fit:cover;min-height:520px;object-position:58% top}
 .space::after{height:25%}
 .brand{left:4%;top:4%;font-size:clamp(34px,9vw,52px);letter-spacing:-3px}
 .portal-stage{left:5%;top:22%;width:48%}
 .status-pill{right:4%;top:4%;min-width:140px;height:47px;padding:0 15px;gap:9px;font-size:17px}
 .status-indicator{width:13px;height:13px;flex-basis:13px}
 .status-panel{right:4%;top:calc(4% + 57px);width:225px}
 .content{width:calc(100% - 24px);margin:-12px auto 0;display:block}
 .card{min-height:225px;padding:30px 24px;gap:18px;border-radius:24px;margin-bottom:20px}
 .icon{flex-basis:72px;width:72px;height:72px;border-radius:20px;font-size:42px}
 h2{font-size:29px;letter-spacing:-.8px;margin-bottom:12px}.tag{font-size:12px;letter-spacing:2px;margin-bottom:9px}p{font-size:15px}.arrow{right:22px;top:21px;font-size:28px}.card-hint{opacity:.8;transform:none;font-size:10px}
 footer{font-size:13px;padding-bottom:32px}.email{font-size:17px}
 .orbital{width:55%;left:26%}.orbital-b{width:38%;left:54%}
}
@media(max-width:480px){
 .space>img{min-height:430px;object-position:57% top}
 .brand{left:4%;top:4%;font-size:38px}
 .portal-stage{left:5%;top:22%;width:55%}
 .status-pill{right:3%;top:3%;min-width:126px;height:43px;font-size:15px;padding:0 13px}.status-panel{right:3%;top:calc(3% + 53px);width:210px}
 .content{width:calc(100% - 16px)}
 .card{min-height:205px;padding:27px 20px;gap:15px;border-radius:21px}
 .icon{flex-basis:62px;width:62px;height:62px;border-radius:17px;font-size:36px}h2{font-size:25px}.tag{font-size:10px;letter-spacing:1.8px}p{font-size:14px}.arrow{right:18px;top:18px;font-size:25px}.card-hint{font-size:9px;margin-top:12px}
 .desktop{display:none}
}
@media(prefers-reduced-motion:reduce){
 .boot-screen,.space-effects *,.portal-logo,.status-pill::before,.status-dot,.status-pulse,.status-panel{animation:none!important}
 .card,.status-pill,.portal-stage,.icon,.arrow,.card::before{transition:none!important}
}


/* V9 — subtle premium interactions */
.card{will-change:transform;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(110deg,transparent 25%,rgba(175,130,255,.75),transparent 55%);background-size:240% 100%;opacity:0;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .25s}
.card:hover::before,.card:focus-visible::before{opacity:1;animation:borderSweep 2.4s linear infinite}
.card:hover{transform:translateY(-6px) scale(1.008);box-shadow:0 20px 55px rgba(45,20,120,.28),0 0 28px rgba(130,90,255,.12)}
.card.cyan:hover{box-shadow:0 20px 55px rgba(0,100,100,.24),0 0 28px rgba(0,230,220,.12)}
@keyframes borderSweep{to{background-position:-240% 0}}
.portal-logo{transition:filter .35s ease,transform .35s ease}
.portal-logo:hover{filter:drop-shadow(0 0 20px rgba(0,180,255,.42));transform:scale(1.018)}
.space::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,rgba(90,150,255,.08),transparent 24%);animation:spaceBreath 7s ease-in-out infinite}
@keyframes spaceBreath{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .space::after,.card::before{animation:none!important}
 .card,.portal-logo{transition:none!important}
}
@media(max-width:800px){
 .card:hover{transform:none;box-shadow:none}
 .card:active{transform:scale(.992)}
}


/* V10 — tableau de bord vivant, sans modifier la base graphique */
.portal-stage{
  animation: portalArrival .72s cubic-bezier(.2,.8,.2,1) .18s both;
}
.status-pill{
  animation: statusArrival .65s cubic-bezier(.2,.8,.2,1) .42s both;
}
.portal-clock{
  position:absolute;
  right:3.65%;
  top:calc(5% + 62px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  color:rgba(225,235,246,.72);
  line-height:1.15;
  pointer-events:none;
  text-shadow:0 0 12px rgba(0,220,205,.12);
  animation: statusArrival .65s cubic-bezier(.2,.8,.2,1) .54s both;
}
.clock-time{font-size:20px;font-weight:600;letter-spacing:.4px;color:rgba(240,248,255,.9)}
.clock-date{text-transform:capitalize;font-size:11px;letter-spacing:.5px;color:rgba(160,175,195,.7)}
.status-panel{
  top:calc(5% + 105px);
}
.status-checked{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:10px;
  color:#7e8b9f;
}
.status-checked b{color:#9caabd;font-weight:600}
.content .card:nth-child(1){animation:cardArrival .7s cubic-bezier(.2,.8,.2,1) .62s both}
.content .card:nth-child(2){animation:cardArrival .7s cubic-bezier(.2,.8,.2,1) .76s both}
.content footer{animation:footerArrival .65s ease 1s both}
@keyframes portalArrival{
  from{opacity:0;transform:translateY(10px) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes statusArrival{
  from{opacity:0;transform:translateY(-8px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes cardArrival{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes footerArrival{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .portal-clock{
    right:4.2%;
    top:calc(4% + 57px);
  }
  .clock-time{font-size:17px}
  .clock-date{font-size:10px}
  .status-panel{top:calc(4% + 104px)}
}
@media(max-width:480px){
  .portal-clock{
    right:3.5%;
    top:calc(3% + 50px);
  }
  .clock-time{font-size:15px}
  .clock-date{font-size:9px}
  .status-panel{top:calc(3% + 96px);width:210px}
}
@media(prefers-reduced-motion:reduce){
  .portal-stage,.status-pill,.portal-clock,.content .card,.content footer{
    animation:none!important;
  }
}

/* V11 — horloge/date interactive */
.portal-clock{
  border:0;
  font-family:inherit;
  text-align:right;
  cursor:pointer;
  transition:transform .25s ease, opacity .25s ease;
}
.portal-clock:hover{transform:translateY(-2px)}
.portal-clock:focus-visible{
  outline:2px solid rgba(0,220,205,.65);
  outline-offset:5px;
  border-radius:10px;
}
.portal-clock .clock-seconds{
  display:block;
  height:0;
  overflow:hidden;
  opacity:0;
  font-size:10px;
  color:rgba(0,235,214,.82);
  transition:height .25s ease,opacity .25s ease;
}
.portal-clock.is-open .clock-seconds{
  height:15px;
  opacity:1;
}
.portal-clock .clock-zone{
  display:block;
  margin-top:1px;
  font-size:8px;
  letter-spacing:.45px;
  color:rgba(145,158,179,.62);
  opacity:.75;
  transition:opacity .25s ease;
}
.portal-clock:hover .clock-zone,
.portal-clock.is-open .clock-zone{opacity:1}

.clock-panel{
  position:absolute;
  right:3.55%;
  top:calc(5% + 105px);
  width:235px;
  padding:15px 17px 13px;
  border:1px solid rgba(40,245,220,.24);
  border-radius:16px;
  background:rgba(3,9,18,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.28), inset 0 0 25px rgba(0,220,205,.025);
  color:#edf3fb;
  line-height:1.25;
  pointer-events:auto;
  z-index:8;
  animation:clockPanelIn .22s ease both;
}
.clock-panel-title{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.7px;
  color:#59e6d5;
  margin-bottom:5px;
}
.clock-panel-time{
  display:block;
  font-size:27px;
  letter-spacing:.5px;
}
.clock-panel-date{
  margin-top:3px;
  color:#aeb8c8;
  font-size:12px;
  text-transform:capitalize;
}
.clock-panel-zone{
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8491a5;
  font-size:10px;
}
.clock-panel-hint{
  margin-top:7px;
  color:#596679;
  font-size:9px;
}
@keyframes clockPanelIn{
  from{opacity:0;transform:translateY(-6px) scale(.97)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .clock-panel{
    right:4.1%;
    top:calc(4% + 100px);
    width:215px;
  }
}
@media(max-width:480px){
  .portal-clock .clock-zone{font-size:7px}
  .clock-panel{
    right:3.2%;
    top:calc(3% + 93px);
    width:205px;
    padding:13px 14px;
  }
  .clock-panel-time{font-size:24px}
}



/* V11.1 — correction panneau date/heure */
.clock-panel[hidden]{
  display:none !important;
}
.clock-panel:not([hidden]){
  display:block !important;
  color:#edf3fb !important;
  background:rgba(3,9,18,.94) !important;
  border:1px solid rgba(40,245,220,.28) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.42), inset 0 0 25px rgba(0,220,205,.035) !important;
}
.clock-panel-time{
  color:#f3f7ff !important;
}
.clock-panel-date{
  color:#aeb8c8 !important;
}
.clock-panel-zone,
.clock-panel-hint{
  color:#728097 !important;
}

/* V10 Mobile — optimisation GSM uniquement. La version PC reste inchangée. */
@media (max-width: 700px){
  body{overflow-x:hidden}
  .space{
    height:560px;
    overflow:hidden;
  }
  .space>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    object-fit:cover;
    object-position:center 38%;
  }
  .space::after{height:32%}

  .brand{
    left:5%;
    top:4.5%;
    font-size:42px;
    letter-spacing:-3px;
  }
  .portal-stage{
    left:6%;
    top:27%;
    width:48%;
  }
  .status-pill{
    right:4%;
    top:4%;
    min-width:116px;
    height:40px;
    padding:0 12px;
    gap:8px;
    font-size:14px;
  }
  .status-indicator{width:12px;height:12px;flex-basis:12px}
  .status-panel{
    right:4%;
    top:calc(4% + 48px);
    width:min(220px,calc(100% - 24px));
  }
  .portal-clock{
    right:5%;
    top:calc(4% + 51px);
    gap:1px;
  }
  .clock-time{font-size:18px}
  .clock-date{font-size:10px}

  .content{
    width:calc(100% - 20px);
    margin:-18px auto 0;
    display:block;
  }
  .content .card:nth-child(1),
  .content .card:nth-child(2),
  .content footer{
    animation:none!important;
    opacity:1;
    transform:none;
  }
  .card{
    min-height:0;
    height:auto;
    padding:18px 18px;
    gap:14px;
    margin-bottom:14px;
    border-radius:19px;
  }
  .card::before{display:none}
  .card::after{right:-55px;bottom:-65px;width:190px;height:115px;filter:blur(16px)}
  .icon{
    flex:0 0 52px;
    width:52px;
    height:52px;
    border-radius:15px;
    font-size:30px;
  }
  .card-copy{padding-top:1px;min-width:0;padding-right:28px}
  .tag{font-size:9px;letter-spacing:1.7px;margin-bottom:5px}
  h2{font-size:22px;letter-spacing:-.5px;margin-bottom:7px;white-space:nowrap}
  p{font-size:13px;line-height:1.38}
  .card-hint{
    margin-top:8px;
    font-size:9px;
    opacity:.72;
    transform:none;
  }
  .arrow{right:16px;top:15px;font-size:22px}

  footer{
    padding:8px 8px 28px;
    font-size:11px;
    line-height:1.7;
  }
  .email{font-size:15px;margin-bottom:4px}
}

@media (max-width: 430px){
  .space{height:535px}
  .brand{font-size:38px}
  .portal-stage{top:28%;width:51%}
  .status-pill{min-width:108px;height:38px;font-size:13px;padding:0 10px}
  .status-indicator{width:11px;height:11px;flex-basis:11px}
  .portal-clock{top:calc(4% + 49px);right:5%}
  .clock-time{font-size:17px}
  .clock-date{font-size:9px}
  .content{width:calc(100% - 14px);margin:-15px auto 0}
  .card{padding:17px 16px;gap:12px;border-radius:18px;margin-bottom:12px}
  .icon{flex-basis:50px;width:50px;height:50px;border-radius:14px;font-size:29px}
  h2{font-size:21px}
  p{font-size:12.5px}
  .card-hint{font-size:8.5px}
  .arrow{right:14px;top:14px;font-size:21px}
  footer{padding-bottom:24px}
  .email{font-size:14px}
}

/* V14 — correction GSM : SK. séparé du fond + horloge réellement transparente */
.brand-logo{
  position:absolute;
  left:3.5%;
  top:4%;
  width:clamp(80px,11.8vw,225px);
  height:auto;
  display:block;
  z-index:5;
  pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.06));
}
.portal-clock{
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  padding:0 !important;
  min-width:0;
  box-shadow:none;
}
@media(max-width:700px){
  .brand-logo{
    left:5%;
    top:4.5%;
    width:84px;
  }
  .portal-clock{
    right:4.5%;
    top:calc(4% + 53px);
  }
}
@media(max-width:430px){
  .brand-logo{left:5%;top:4.5%;width:78px}
  .portal-clock{right:4%;top:calc(4% + 50px)}
}

/* V17 — responsive propre : le fond reste indépendant des cartes,
   et SK./heure gardent des dimensions stables sur PC et GSM. */

/* Base desktop : on fixe la zone héro plutôt que de laisser le ratio de l'image
   portrait décider de la hauteur de la page. */
@media (min-width: 901px){
  .space{
    height: clamp(590px, 42vw, 760px);
    overflow:hidden;
  }
  .space>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
    min-height:0;
    object-fit:cover;
    object-position:center 38%;
  }
  .brand-logo{
    left:3.5%;
    top:4.5%;
    width:clamp(115px, 10.5vw, 205px);
    height:auto;
    z-index:5;
  }
  .portal-stage{
    left:8%;
    top:16%;
    width:min(31vw, 560px);
  }
  .status-pill{
    right:3.4%;
    top:5%;
  }
  .portal-clock{
    right:3.65%;
    top:calc(5% + 62px);
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .clock-panel{
    right:3.55%;
    top:calc(5% + 105px);
  }
  .content{
    margin:-10px auto 0;
  }
}

/* Tablette + GSM : conserver le rendu mobile validé. */
@media (max-width: 900px){
  .space>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    object-fit:cover;
    object-position:center 38%;
  }
  .brand-logo{
    left:5%;
    top:4.5%;
    width:84px;
    height:auto;
    z-index:5;
  }
  .portal-clock{
    right:4.5%;
    top:calc(4% + 53px);
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

@media (max-width: 430px){
  .brand-logo{
    left:5%;
    top:4.5%;
    width:78px;
  }
  .portal-clock{
    right:4%;
    top:calc(4% + 50px);
  }
}


/* V18 — verrouillage mobile par appareil.
   Certains navigateurs GSM intégrés annoncent une largeur CSS de bureau.
   Dans ce cas les media queries classiques ne s'activent pas. Cette classe,
   ajoutée très tôt par index.html, force uniquement le rendu mobile sur
   Android/iOS sans modifier le rendu des vrais écrans PC. */
.device-mobile .space{
  height:560px;
  overflow:hidden;
}
.device-mobile .space>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  object-fit:cover;
  object-position:center 38%;
}
.device-mobile .brand-logo{
  left:5%;
  top:4.5%;
  width:84px;
  height:auto;
  z-index:5;
}
.device-mobile .portal-stage{
  left:6%;
  top:16%;
  width:48%;
}
.device-mobile .status-pill{
  right:4%;
  top:4%;
  min-width:116px;
  height:40px;
  padding:0 12px;
  gap:8px;
  font-size:14px;
}
.device-mobile .status-indicator{width:12px;height:12px;flex-basis:12px}
.device-mobile .portal-clock{
  right:4.5%;
  top:calc(4% + 53px);
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.device-mobile .clock-time{font-size:18px}
.device-mobile .clock-date{font-size:10px}
.device-mobile .content{
  width:calc(100% - 20px);
  margin:-18px auto 0;
  display:block;
}
.device-mobile .content .card:nth-child(1),
.device-mobile .content .card:nth-child(2),
.device-mobile .content footer{
  animation:none!important;
  opacity:1;
  transform:none;
}
.device-mobile .card{
  min-height:0;
  height:auto;
  padding:18px 18px;
  gap:14px;
  margin-bottom:14px;
  border-radius:19px;
}
.device-mobile .card::before{display:none}
.device-mobile .icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:15px;
  font-size:30px;
}
.device-mobile .card-copy{padding-top:1px;min-width:0;padding-right:28px}
.device-mobile .tag{font-size:9px;letter-spacing:1.7px;margin-bottom:5px}
.device-mobile h2{font-size:22px;letter-spacing:-.5px;margin-bottom:7px;white-space:nowrap}
.device-mobile p{font-size:13px;line-height:1.38}
.device-mobile .card-hint{margin-top:8px;font-size:9px;opacity:.72;transform:none}
.device-mobile .arrow{right:16px;top:15px;font-size:22px}
.device-mobile footer{padding:8px 8px 28px;font-size:11px;line-height:1.7}
.device-mobile .email{font-size:15px;margin-bottom:4px}

@media(max-width:430px){
  .device-mobile .space{height:535px}
  .device-mobile .brand-logo{left:5%;top:4.5%;width:78px}
  .device-mobile .portal-stage{top:16%;width:51%}
  .device-mobile .status-pill{min-width:108px;height:38px;font-size:13px;padding:0 10px}
  .device-mobile .portal-clock{right:4%;top:calc(4% + 50px)}
  .device-mobile .clock-time{font-size:17px}
  .device-mobile .clock-date{font-size:9px}
  .device-mobile .content{width:calc(100% - 14px);margin:-15px auto 0}
  .device-mobile .card{padding:17px 16px;gap:12px;border-radius:18px;margin-bottom:12px}
  .device-mobile .icon{flex-basis:50px;width:50px;height:50px;border-radius:14px;font-size:29px}
  .device-mobile h2{font-size:21px}
  .device-mobile p{font-size:12.5px}
  .device-mobile .card-hint{font-size:8.5px}
  .device-mobile .arrow{right:14px;top:14px;font-size:21px}
  .device-mobile footer{padding-bottom:24px}
  .device-mobile .email{font-size:14px}
}

/* V21 — O de PORTAIL séparé et réellement animé.
   Base V18 conservée : le texte reste fixe et seul le O tourne.
   Le O est un calque indépendant, calé sur les coordonnées exactes du logo V18. */
.portal-stage .portal-o{
  position:absolute;
  left:7.26%;
  top:6.67%;
  width:18.55%;
  aspect-ratio:115 / 130;
  display:block;
  z-index:4;
  pointer-events:none;
  transform-origin:50% 50%;
  animation:portalORealSpin 2.8s linear infinite;
}
.portal-stage .portal-o img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(0,170,255,.28));
}
/* Arc asymétrique : il rend la rotation visuellement évidente autour du O. */
.portal-stage .portal-o::after{
  content:"";
  position:absolute;
  left:9.5%;
  top:12%;
  width:81%;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 34deg,
    rgba(0,220,255,.98) 48deg 78deg,
    rgba(80,170,255,.18) 92deg 150deg,
    transparent 168deg 238deg,
    rgba(120,80,255,.7) 252deg 276deg,
    transparent 292deg 360deg
  );
  -webkit-mask:radial-gradient(circle,transparent 0 69%,#000 71% 78%,transparent 80%);
  mask:radial-gradient(circle,transparent 0 69%,#000 71% 78%,transparent 80%);
  filter:drop-shadow(0 0 4px rgba(0,190,255,.9))
         drop-shadow(0 0 10px rgba(0,120,255,.28));
  animation:portalOArcSpin 1.9s linear infinite reverse;
}
@keyframes portalORealSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes portalOArcSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Halo centré sur le O indépendant, sans déplacer PORTAIL. */
.portal-stage::before{
  left:7.26%;
  top:6.67%;
  width:18.55%;
  height:auto;
  aspect-ratio:115 / 130;
  inset:auto;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,185,255,.10) 0 45%,transparent 72%);
  filter:blur(8px);
  z-index:2;
  animation:portalOHalo 3.8s ease-in-out infinite;
}
@keyframes portalOHalo{
  0%,100%{opacity:.4;transform:scale(.95)}
  50%{opacity:.95;transform:scale(1.06)}
}

/* PC : la grille V18 reste impérativement en deux colonnes.
   Aucun fallback tactile ne doit transformer un vrai PC en colonne. */
@media (min-width:901px){
  .content{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Les coordonnées suivent le même logo sur toutes les tailles. */
@media (max-width:900px){
  .portal-stage .portal-o{
    left:7.26%;
    top:6.67%;
    width:18.55%;
  }
}

@media (prefers-reduced-motion:reduce){
  .portal-stage .portal-o,
  .portal-stage .portal-o::after,
  .portal-stage::before{animation:none!important}
}

/* V27 — intercepteur sci-fi à quatre panneaux, inspiré du langage visuel des chasseurs spatiaux classiques */
.spaceship{
  position:absolute; left:-18%; top:25%; width:180px; height:110px; z-index:2; pointer-events:none;
  transform:rotate(-4deg); filter:drop-shadow(0 0 10px rgba(90,190,255,.30));
  animation:shipFlight 26s cubic-bezier(.32,.05,.68,.95) infinite;
}
.ship-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ship-glow{position:absolute;left:20px;top:22px;width:135px;height:66px;border-radius:50%;background:rgba(0,170,255,.11);filter:blur(16px);animation:shipGlow 2.8s ease-in-out infinite}
.ship-trail{position:absolute;left:-110px;height:2px;border-radius:999px;transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(55,190,255,.12),rgba(190,250,255,.9));filter:blur(.5px);opacity:.7}
.ship-trail-1{top:54px;width:120px;animation:trailPulse 1.8s ease-in-out infinite}
.ship-trail-2{top:61px;width:86px;opacity:.42;animation:trailPulse 1.8s ease-in-out -.7s infinite}
@keyframes shipFlight{
  0%{left:-20%;top:33%;transform:translate3d(0,0,0) rotate(-8deg) scale(.62);opacity:0}
  6%{opacity:1}
  24%{top:30%;transform:translate3d(8vw,1.5vh,0) rotate(-3deg) scale(.76)}
  48%{top:36%;transform:translate3d(23vw,-1vh,0) rotate(4deg) scale(.9)}
  70%{top:28%;transform:translate3d(42vw,2vh,0) rotate(-1deg) scale(.84)}
  90%{opacity:1}
  100%{left:110%;top:25%;transform:translate3d(0,-2vh,0) rotate(4deg) scale(.64);opacity:0}
}
@keyframes shipGlow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}}
@keyframes trailPulse{0%,100%{opacity:.25;transform:scaleX(.78)}50%{opacity:.9;transform:scaleX(1.05)}}
@media(max-width:700px){
  .spaceship{width:118px;height:72px;top:30%;animation-duration:23s}
  .ship-glow{left:12px;top:14px;width:90px;height:44px}
  .ship-trail-1{left:-78px;top:35px;width:82px}
  .ship-trail-2{left:-58px;top:41px;width:60px}
  @keyframes shipFlight{
    0%{left:-22%;top:36%;transform:rotate(-8deg) scale(.52);opacity:0}
    7%{opacity:1}
    28%{top:33%;transform:translate3d(8vw,1vh,0) rotate(-2deg) scale(.62)}
    52%{top:39%;transform:translate3d(20vw,-1vh,0) rotate(4deg) scale(.68)}
    74%{top:32%;transform:translate3d(38vw,1vh,0) rotate(0deg) scale(.62)}
    91%{opacity:1}
    100%{left:114%;top:28%;transform:rotate(4deg) scale(.5);opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){.spaceship,.ship-glow,.ship-trail{animation:none!important} .spaceship{left:48%;top:34%;opacity:.65;transform:rotate(-5deg) scale(.9)}}


/* PORTAIL — alignement mobile des boutons */
@media (max-width:700px){
  .status-pill{
    top:5%;
    right:calc(3.4% + 144px);
    min-width:40px;
    width:40px;
    height:40px;
    padding:0;
    gap:0;
    border-radius:50%;
    box-sizing:border-box;
  }

  .status-pill .status-text{
    display:none;
  }

  .portal-clock{
    top:calc(5% + 52px);
    right:3.5%;
  }
}
/* PORTAIL — correction finale bulle En ligne GSM */
@media (max-width:700px){
  .status-pill{
    position:absolute !important;
    top:5% !important;
    right:calc(3.4% + 144px) !important;
    min-width:40px !important;
    width:40px !important;
    max-width:40px !important;
    height:40px !important;
    padding:0 !important;
    gap:0 !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .status-pill .status-text{
    display:none !important;
  }

  .status-pill .status-indicator{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
  }
}
/* PORTAIL — vaisseau légèrement plus bas sur PC uniquement */
@media (min-width:701px){
  .spaceship{
    margin-top:7vh;
  }
}