/* v2-connexion2.css — 21/10/2026 soir (PHASE3 p3-connexion, décisions d'Hassan)
   Page de connexion UNIQUE de SD ONE : fond bleu nuit + CARTE DU MONDE (Paris au centre, liaisons lumineuses),
   heure + date centrés au-dessus du cadre, logo SD ONE bleu en haut du cadre blanc, pas de « SAHN DRIVE ⇆ Changer » ni de bandeau sur cette page.
   Tout est rangé sous body.cx-ouvert : dès que la connexion est faite (classe retirée par route()), plus rien ne s'applique.
   Couleurs : bleu nuit #081830 / #0F2A4A, bleu #1E5AA8, bleu lumière #4E8EE0 / #7DB4FF, argent #AFC0D6 / #C4D3E6, blanc. Jamais de doré. */

/* ---------- la page : rien d'autre que la connexion ---------- */
body.cx-ouvert{background:#081830!important}
body.cx-ouvert .v2-haut,body.cx-ouvert .v2-menu,body.cx-ouvert .v2-pied,body.cx-ouvert .v2-filaments,
body.cx-ouvert #v2-retour,body.cx-ouvert #sdx-esp-pill,body.cx-ouvert #v2-voile,body.cx-ouvert .v2-groupe{display:none!important}
body.cx-ouvert .v2-contenu,body.cx-ouvert .v2-retour + .v2-contenu{padding:calc(env(safe-area-inset-top,0px) + 22px) 16px calc(env(safe-area-inset-bottom,0px) + 22px)!important;min-height:100vh;min-height:100dvh;box-sizing:border-box}
body:not(.cx-ouvert) #cx-fond{display:none!important}
body.cx-ouvert::before,body.cx-ouvert::after{display:none!important} /* vaguelettes du thème : masquées ici seulement */

/* ---------- le fond : carte du monde ---------- */
#cx-fond{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 28%,#16407a 0%,#0c2550 46%,#081830 78%,#061229 100%)}
#cx-fond .cxf-carte{position:absolute;left:50%;top:max(110px,13vh);width:max(112vw,130vh);aspect-ratio:1000/501;transform:translate(calc(-1 * var(--px,50%)),calc(-1 * var(--py,34%)));
  animation:cxfDerive 60s ease-in-out infinite alternate}
#cx-fond .cxf-terre{position:absolute;inset:0;opacity:.30;
  background:linear-gradient(180deg,#C4D3E6 0%,#AFC0D6 40%,#7D93B2 100%);
  -webkit-mask:url(carte-monde-vraie.svg) 0 0/100% 100% no-repeat;mask:url(carte-monde-vraie.svg) 0 0/100% 100% no-repeat}
#cx-fond .cxf-carte::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(175,192,214,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(175,192,214,.07) 1px,transparent 1px);background-size:4.1667% 8.3%}
#cx-fond svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#cx-fond .cxf-arc{fill:none;stroke:rgba(196,211,230,.30);stroke-width:.9;vector-effect:non-scaling-stroke}
#cx-fond .cxf-fil{fill:none;stroke:#9CC7FF;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:7 140;stroke-dashoffset:7;opacity:0;
  filter:drop-shadow(0 0 4px rgba(78,142,224,.9));animation:cxfFil 9s linear infinite}
#cx-fond .cxf-ville{fill:#E6EEF7;opacity:.55;animation:cxfVille 3.2s ease-in-out infinite}
#cx-fond .cxf-paris{fill:#fff}
#cx-fond .cxf-halo{transform-box:fill-box;transform-origin:center;animation:cxfHalo 3.6s ease-in-out infinite}
#cx-fond .cxf-onde{fill:none;stroke:#7DB4FF;stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:cxfOnde 3s ease-out infinite}
/* plaques de quadrillage tournées, dans les coins */
#cx-fond .cxf-plaque{position:absolute;width:300px;height:200px;opacity:.55;
  background-image:linear-gradient(rgba(175,192,214,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(175,192,214,.10) 1px,transparent 1px);background-size:14px 14px;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
#cx-fond .p1{left:-60px;top:-30px;transform:rotate(18deg)}
#cx-fond .p2{right:-70px;top:12vh;transform:rotate(-24deg)}
#cx-fond .p3{left:-80px;bottom:6vh;transform:rotate(-12deg)}
#cx-fond .p4{right:-50px;bottom:-40px;transform:rotate(30deg)}
/* grand reflet qui traverse lentement + poussière argentée */
#cx-fond .cxf-reflet{position:absolute;top:-20%;bottom:-20%;width:34vw;left:-40vw;transform:skewX(-18deg);
  background:linear-gradient(90deg,rgba(196,211,230,0),rgba(196,211,230,.07),rgba(196,211,230,0));animation:cxfReflet 14s ease-in-out 1.5s infinite}
#cx-fond .cxf-poussiere{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 22%,#C4D3E6,transparent),radial-gradient(1px 1px at 78% 14%,#C4D3E6,transparent),radial-gradient(1.4px 1.4px at 64% 72%,#E6EEF7,transparent),
  radial-gradient(1px 1px at 30% 84%,#AFC0D6,transparent),radial-gradient(1px 1px at 88% 58%,#C4D3E6,transparent),radial-gradient(1.3px 1.3px at 44% 40%,#E6EEF7,transparent),
  radial-gradient(1px 1px at 6% 62%,#AFC0D6,transparent),radial-gradient(1px 1px at 52% 8%,#C4D3E6,transparent),radial-gradient(1px 1px at 94% 90%,#AFC0D6,transparent);
  animation:cxfPoussiere 7s ease-in-out infinite alternate}
@keyframes cxfFil{0%{stroke-dashoffset:7;opacity:0}4%{opacity:1}30%{stroke-dashoffset:-100;opacity:1}33%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes cxfVille{50%{opacity:1}}
@keyframes cxfHalo{50%{transform:scale(1.25);opacity:.85}}
@keyframes cxfOnde{0%{transform:scale(1);opacity:.8}100%{transform:scale(7);opacity:0}}
@keyframes cxfReflet{0%{left:-40vw}60%,100%{left:120vw}}
@keyframes cxfPoussiere{to{opacity:.85;transform:translateY(-6px)}}
@keyframes cxfDerive{to{margin-left:-2vw}}
@media (max-width:760px){#cx-fond .cxf-carte{top:calc(env(safe-area-inset-top,0px) + 96px)}} /* téléphone : Paris derrière l'heure, pas sur la date */

/* ---------- le contenu ---------- */
body.cx-ouvert .cx.cx-u{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;padding:0;min-height:calc(100vh - 44px);min-height:calc(100dvh - 44px)}
.cx-u .cx-hero{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;gap:6px;margin-top:max(5vh,14px)}
.cx-u .cx-logo{display:block;width:min(64vw,250px);height:auto;filter:drop-shadow(0 4px 18px rgba(3,10,24,.55))}
.cx-u .cx-heure{display:flex;align-items:flex-start;justify-content:center;gap:4px;margin-top:0;font-family:Montserrat,var(--titre),system-ui,sans-serif;line-height:1;
  text-shadow:0 2px 16px rgba(3,10,24,.6),0 0 26px rgba(78,142,224,.35)}
.cx-u .cx-heure b{font-weight:600;font-size:clamp(46px,13vw,64px);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFFFFF 0%,#E6EEF7 55%,#AFC0D6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-u .cx-heure span{font-weight:600;font-size:15px;color:#AFC0D6;margin-top:6px;font-variant-numeric:tabular-nums;min-width:2ch;text-align:left}
.cx-u .cx-date{font-family:Manrope,var(--police),system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em;color:#C4D3E6;white-space:nowrap}

/* la carte de connexion : blanche, liseré lumineux en haut, halo bleu */
.cx-u .cx-carte{width:min(420px,100%);border-radius:24px;border:1px solid rgba(196,211,230,.7);background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FB 100%);
  box-shadow:0 2px 6px rgba(3,10,24,.25),0 30px 70px rgba(3,10,24,.55),0 0 0 6px rgba(196,211,230,.07),0 0 60px rgba(78,142,224,.18)}
.cx-u .cx-carte::before{content:"";position:absolute;left:10%;right:10%;top:0;height:2px;z-index:2;border-radius:2px;background:linear-gradient(90deg,rgba(78,142,224,0),#7DB4FF,rgba(78,142,224,0))}
.cx-u .cx-carte .cx-marque{display:flex;justify-content:center;margin:0 0 2px} /* retour d'Hassan : logo bleu simple DANS le cadre, en haut */
.cx-u .cx-carte .cx-marque img.sd-one-ecriture{height:58px;margin:0}
.cx-u .cx-in{padding:24px 24px 30px;gap:10px}
.cx-u h1{margin:0;font-family:Montserrat,var(--titre),sans-serif;font-size:22px;color:#0F2A4A;text-align:center}
.cx-u .cx-sous{margin:-4px 0 6px;font-size:13.5px;line-height:1.45;color:#4F6177;text-align:center}
.cx-u .cx-r{font-size:13.5px}
/* boutons brillants (jamais transparents) : liseré lumineux, reflet qui passe, halo au survol */
.cx-u .cx-go{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.35);color:#fff;font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(180deg,#2B6CC0 0%,#1E5AA8 48%,#163A63 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px rgba(15,42,74,.32)}
.cx-u .cx-go::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:9px 9px;transition:background-position .6s ease}
.cx-u .cx-go:hover::before,.cx-u .cx-go:focus-visible::before{background-position:9px 9px}
.cx-u .cx-go::after{content:"";position:absolute;top:-20%;bottom:-20%;width:28%;left:-40%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));animation:cxBtReflet 5.5s ease-in-out 1.2s infinite}
.cx-u .cx-go:hover,.cx-u .cx-go:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 3px rgba(78,142,224,.30),0 10px 26px rgba(30,90,168,.45);outline:0}
.cx-u .cx-go:disabled{filter:saturate(.6) brightness(.95)}
.cx-u .cx-bio{background:linear-gradient(180deg,#FFFFFF,#EEF3F9);border:1px solid #C4D3E6;color:#0F2A4A;box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(15,42,74,.10)}
.cx-u .cx-liens{gap:0 12px}
.cx-u .cx-lien{white-space:nowrap;min-height:44px!important;display:inline-flex;align-items:center}
@keyframes cxBtReflet{0%{left:-40%}35%,100%{left:130%}}

/* pied : « Un service de SAHN DRIVE SAS » (+ « Réactiver l'intro » si elle est coupée) */
.cx-u .cx-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 16px;margin-top:auto;padding-top:6px}
.cx-u .cx-bas a,.cx-u .cx-bas .cx-lien{display:inline-flex;align-items:center;min-height:44px;color:#AFC0D6;font:600 12.5px Manrope,system-ui,sans-serif;text-decoration:none;letter-spacing:.03em}
.cx-u .cx-bas a:hover,.cx-u .cx-bas .cx-lien:hover{color:#fff}

/* verrou Face ID / empreinte : la carte du monde reste visible derrière */
body.cx-ouvert .v2-contenu > .charge{visibility:hidden}
body.cx-ouvert .cx-verrou{background:linear-gradient(180deg,rgba(8,24,48,.30),rgba(6,18,41,.55));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ordinateur : un peu plus grand, toujours centré */
@media (min-width:761px){
  .cx-u .cx-logo{width:280px}
  .cx-u .cx-heure b{font-size:68px}
  .cx-u .cx-date{font-size:16px}
  body.cx-ouvert .cx.cx-u{gap:22px}
}
/* petits écrans en hauteur (ordinateur portable, téléphone couché) */
@media (max-height:700px) and (min-width:761px){.cx-u .cx-logo{width:220px}.cx-u .cx-heure b{font-size:52px}.cx-u .cx-hero{margin-top:0}}
@media (max-width:360px){.cx-u .cx-in{padding:20px 16px 26px}.cx-u .cx-date{font-size:14px}}

/* mouvement réduit : tout est figé */
@media (prefers-reduced-motion:reduce){
  #cx-fond *,#cx-fond .cxf-carte,.cx-u .cx-go::after{animation:none!important}
  #cx-fond .cxf-fil{opacity:0}
}

/* 22/10/2026 (Hassan : « les avions qui vont partout ») : trajets lumineux et lignes de vol masqués ; le reste de la carte est inchangé */
#cx-fond .cxf-fil,#cx-fond .cxf-arc{display:none!important}

/* 22/10/2026 (Hassan : « l horloge est trop grosse, elle fait descendre les messages du bas ») : horloge plus petite */
.cx-u .cx-heure b{font-size:clamp(34px,10vw,46px)!important}
.cx-u .cx-heure span{font-size:13px;margin-top:4px}
.cx-u .cx-hero{margin-top:max(2vh,8px)}
@media (min-width:761px){.cx-u .cx-heure b{font-size:50px!important}}
@media (max-height:700px) and (min-width:761px){.cx-u .cx-heure b{font-size:40px!important}}