/* ══════════════════════════════════════════════════════════
   IMAGINE + ALICE  —  Un monde où tout est possible
   ══════════════════════════════════════════════════════════ */
:root {
  --sky-a:   #5BBCE4;
  --sky-b:   #92D9F5;
  --sky-c:   #C8EDFB;
  --horizon: #D8F3B8;
  --grass:   #7CC85A;
  --sun:     #FFD23F;
  --bloom:   #FF80AA;
  --violet:  #A87EE8;
  --leaf:    #5DBF60;
  --cloud:   #FFFFFF;
  --deep:    #1E3A5F;
  --text:    #2C4A70;
  --muted:   #7B9ABF;
  --border:  rgba(130,180,240,0.3);
  --glass:   rgba(255,255,255,0.68);
  --fancy:   'Segoe UI', 'Segoe UI Semibold', sans-serif;
  --round:   'Segoe UI', sans-serif;
  --hand:    'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* ── Monde vivant : ciel animé ── */
html, body {
  margin: 0; padding: 0; min-height: 100%;
}
body {
  background: linear-gradient(175deg,
    #4AAAD8 0%, #7ECFEF 22%, #AFDFEB 40%,
    #C8EDDF 58%, #CEEAAE 74%, #8CC870 90%, #6AB850 100%);
  background-attachment: fixed;
  animation: worldBreath 18s ease-in-out infinite alternate;
}
@keyframes worldBreath {
  0%   { background: linear-gradient(175deg, #3D9FD0 0%, #70C8E8 22%, #AADBEE 40%, #C0EAD8 58%, #C8E8AA 74%, #88C468 90%, #60B045 100%); }
  33%  { background: linear-gradient(175deg, #E8834A 0%, #F5AA60 12%, #FFD08A 28%, #FFF5CC 48%, #D4F0B8 68%, #90CC70 88%, #68B850 100%); }
  66%  { background: linear-gradient(175deg, #7060C8 0%, #9A88E0 18%, #C0B8F5 36%, #DDD8FF 52%, #D8F0CC 68%, #A0D870 88%, #70C050 100%); }
  100% { background: linear-gradient(175deg, #3D9FD0 0%, #70C8E8 22%, #AADBEE 40%, #C0EAD8 58%, #C8E8AA 74%, #88C468 90%, #60B045 100%); }
}
.gp3-wrap {
  font-family: var(--round);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding horizontal = 16 + 15 = 31 par coté → le contenu fait 30px de moins
     en largeur qu'avant, ce qui évite le clipping par la bulle ovale miroir
     (popupLogin dans controlcenter.php) sur les bords gauche/droit. */
  padding: 32px 31px;
  position: relative;
}

/* ── Nuages flottants ── */
.cloud-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.88);
  border-radius: 50px;
  filter: blur(3px);
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.88);
  border-radius: 50%;
}
.c1 { width:180px; height:52px; top:10%; left:-200px;
      animation: drift1 32s linear infinite; }
.c1::before { width:80px; height:80px; top:-36px; left:28px; }
.c1::after  { width:60px; height:60px; top:-28px; left:80px; }

.c2 { width:130px; height:40px; top:24%; right:-160px;
      animation: drift2 25s linear infinite 4s; opacity:.75; }
.c2::before { width:60px; height:60px; top:-28px; left:18px; }
.c2::after  { width:50px; height:50px; top:-22px; left:60px; }

.c3 { width:220px; height:60px; top:6%; left:-240px;
      animation: drift1 44s linear infinite 12s; opacity:.6; }
.c3::before { width:90px; height:90px; top:-42px; left:40px; }
.c3::after  { width:70px; height:70px; top:-32px; left:110px; }

@keyframes drift1 { from { transform:translateX(0); } to { transform:translateX(110vw); } }
@keyframes drift2 { from { transform:translateX(0); } to { transform:translateX(-110vw); } }

/* ── Éléments décoratifs flottants ── */
.deco-float {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  font-size: 26px;
  opacity: 0;
  animation: floatIn 1.2s ease forwards, bobble 5s ease-in-out infinite;
}
@keyframes floatIn {
  from { opacity:0; transform: translateY(20px) scale(0.7); }
  to   { opacity: 0.55; transform: translateY(0) scale(1); }
}
@keyframes bobble {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

/* ── La carte magique ── */
.gp3-card {
  width: 100%;
  max-width: 420px;
  background: var(--glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 28px;
  overflow: visible;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-shadow:
    0 16px 50px rgba(60,120,200,0.15),
    0 3px 10px rgba(255,255,255,0.7) inset,
    0 -2px 6px rgba(100,180,255,0.1) inset;
  animation: cardAppear .7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cardAppear {
  from { opacity:0; transform: translateY(40px) scale(0.88) rotate(-1deg); }
  to   { opacity:1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Arc-en-ciel de bienvenue en haut de la carte */
.gp3-card::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    #FF6B6B, #FFA640, #FFD23F, #A8D84A,
    #40BFBF, #5B8EF5, #A87EE8, #E8609A);
  background-size: 200%;
  animation: rainbowFlow 5s linear infinite;
}
@keyframes rainbowFlow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Symboles Alice discrets en bas */
.gp3-card::after {
  content: '♠  ♥  ♦  ♣';
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 10px;
  padding: 6px 0 2px;
  color: rgba(100,140,200,0.22);
}

.gp3-card-head { padding: 18px 28px 0; }

.gp3-eyebrow {
  font-family: var(--hand);
  font-size: 15px;
  color: var(--violet);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.gp3-title {
  font-family: var(--fancy);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--deep);
  margin: 8px 0 5px;
  text-shadow: 0 2px 8px rgba(100,150,220,0.15);
}
.gp3-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--bloom) 0%, var(--violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gp3-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.gp3-sub a { color: var(--violet); text-decoration: none; font-weight: 700; }
.gp3-sub a:hover { text-decoration: underline; }

.gp3-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--bloom), var(--sun), var(--leaf), transparent);
  opacity: .45;
  margin: 16px 0;
}

.gp3-body { padding: 12px 28px 24px; }
.gp3-field { margin-bottom: 18px; }

.gp3-label {
  display: block;
  font-family: var(--hand);
  font-size: 14px;
  color: var(--violet);
  font-weight: 600;
  margin-bottom: 7px;
}

.gp3-input {
  width: 100%;
  padding: 13px 18px;
  background: rgba(255,255,255,0.82);
  border: 2px solid rgba(130,180,240,0.35);
  border-radius: 16px;
  color: var(--deep);
  font-family: var(--round);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.gp3-input:focus {
  border-color: var(--bloom);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 4px rgba(255,128,170,0.18), 0 2px 12px rgba(168,126,232,0.12);
}
.gp3-input::placeholder { color: rgba(100,140,190,0.45); font-weight: 400; }
.gp3-input-code {
  text-align: center !important;
  font-family: var(--hand) !important;
  font-size: 30px !important;
  letter-spacing: 12px !important;
  padding: 16px 10px !important;
}

.gp3-btn {
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--bloom) 0%, var(--violet) 100%);
  color: white;
  font-family: var(--round);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s;
  -webkit-appearance: none;
  box-shadow: 0 5px 18px rgba(168,126,232,0.38);
  text-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.gp3-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(168,126,232,0.5);
}
.gp3-btn:active { transform: translateY(0) scale(0.98); }

.gp3-btn-ghost {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--hand);
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.gp3-btn-ghost:hover { color: var(--violet); }

.gp3-info {
  background: rgba(255,255,255,0.6);
  border: 2px solid rgba(168,126,232,0.18);
  border-radius: 16px;
  padding: 13px 18px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.6;
}
.gp3-info strong {
  color: var(--violet);
  font-family: var(--hand);
  font-size: 15px;
}

.gp3-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}
.gp3-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hand);
  font-size: 12px;
  color: var(--muted);
}
.gp3-step-n {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(130,170,220,0.35);
  background: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  font-weight: 700;
  transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp3-step.active .gp3-step-n {
  background: linear-gradient(135deg, var(--bloom), var(--violet));
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 10px rgba(168,126,232,0.45);
  transform: scale(1.15);
}
.gp3-step.done .gp3-step-n {
  background: rgba(93,191,96,0.2);
  border-color: var(--leaf);
  color: var(--leaf);
}
.gp3-step-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--bloom), var(--violet));
  opacity: .3;
  border-radius: 2px;
}

.gp3-account-header {
  background: linear-gradient(135deg, rgba(255,210,63,0.12), rgba(168,126,232,0.08));
  border-bottom: 2px solid rgba(200,220,255,0.25);
  padding: 20px 28px;
  display: flex; align-items: center; gap: 16px;
}
.gp3-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--bloom);
  background: linear-gradient(135deg, rgba(255,128,170,0.2), rgba(168,126,232,0.2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fancy);
  font-size: 18px;
  color: var(--deep);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(168,126,232,0.2);
}
.gp3-account-info { flex: 1; min-width: 0; }
.gp3-account-mail {
  font-size: 13px;
  color: var(--deep);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp3-account-pseudo {
  font-family: var(--hand);
  font-size: 14px;
  color: var(--violet);
  margin-top: 2px;
}

.gp3-menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(170,200,240,0.2);
  cursor: pointer; text-decoration: none;
  transition: background .18s, transform .15s;
  color: var(--text);
}
.gp3-menu-item:hover {
  background: rgba(255,255,255,0.45);
  transform: translateX(3px);
}
.gp3-menu-item:last-of-type { border-bottom: none; }

.gp3-menu-icon {
  width: 36px; height: 36px;
  border: 2px solid rgba(168,126,232,0.2);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--violet);
  transition: background .18s;
}
.gp3-menu-item:hover .gp3-menu-icon {
  background: linear-gradient(135deg, rgba(255,128,170,0.18), rgba(168,126,232,0.18));
}
.gp3-menu-label { font-size: 14px; flex: 1; font-weight: 700; }
.gp3-menu-status { font-size: 15px; color: var(--leaf); }
.gp3-menu-arrow {
  font-size: 20px;
  color: rgba(130,160,200,0.5);
  transition: transform .18s, color .18s;
}
.gp3-menu-item:hover .gp3-menu-arrow {
  color: var(--violet);
  transform: translateX(3px);
}

.gp3-forgot {
  text-align: right;
  font-family: var(--hand);
  font-size: 14px;
  margin-top: -2px;
  margin-bottom: 18px;
}
.gp3-forgot a { color: var(--muted); text-decoration: none; }
.gp3-forgot a:hover { color: var(--violet); }

.gp3-connected-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(200,220,255,0.25);
}
.gp3-connected-mail {
  font-size: 13px;
  color: var(--deep);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1;
}
.gp3-logout-btn {
  font-family: var(--hand);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 16px;
  border: 2px solid rgba(140,170,220,0.3);
  border-radius: 20px;
  white-space: nowrap;
  margin-left: 12px;
  transition: all .2s;
  background: rgba(255,255,255,0.5);
}
.gp3-logout-btn:hover {
  color: var(--bloom);
  border-color: var(--bloom);
  background: rgba(255,128,170,0.08);
}
.gp3-foot { padding: 4px 28px 20px; text-align: center; }



/* ── Altsheimer widget ───────────────────────────────────── */
#alts-widget{position:absolute;bottom:-10px;right:-10px;display:none;flex-direction:column;align-items:flex-end;z-index:99}
#alts-bubble{position:relative;background:#fff;color:#8B0000;border:2.5px solid #8B0000;border-radius:18px;padding:10px 15px 9px;font:700 13px/1.45 'Segoe UI',Arial,sans-serif;max-width:210px;min-width:140px;box-shadow:3px 3px 0 #8B0000;margin-bottom:10px;display:none}
#alts-bubble-title{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;color:#8B0000}
#alts-bubble::before{content:'';position:absolute;bottom:-16px;right:20px;border:11px solid transparent;border-top-color:#8B0000;border-bottom:0}
#alts-bubble::after{content:'';position:absolute;bottom:-11px;right:23px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes alts-pop{from{opacity:0;transform:scale(.78) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
#alts-img{width:88px;height:88px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));cursor:pointer;transition:transform .15s}
#alts-widget:hover #alts-img{transform:scale(1.07)}

/* ── Bouton info ─────────────────────────────────────────── */
.gp3-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  vertical-align: middle;
  line-height: 1;
}

/* ── Popup interne ───────────────────────────────────────── */
.gp3-popup {
  position: absolute;
  left: 16px; right: 16px;
  top: 50%; transform: translateY(-50%);
  background: rgba(22, 28, 45, 0.97);
  color: #e8f0ff;
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 200;
  font-size: 13px;
  line-height: 1.55;
  animation: alts-pop .2s cubic-bezier(.34,1.56,.64,1) both;
}
.gp3-popup-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: rgba(200,210,255,.6);
  font-size: 14px; cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .15s;
}
.gp3-popup-close:hover { color: #fff; }
.gp3-popup p { margin: 0; }

/* Icône info cercle */
.gp3-icon-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--violet, #a87ee8);
  color: #fff;
  font: 700 italic 12px/1 'Georgia', serif;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s;
}
.gp3-info-btn:hover .gp3-icon-i,
.gp3-info-btn:focus .gp3-icon-i {
  background: var(--bloom, #e8609a);
}