/* ============================================================
   Askaci v56 — double lecture responsive
   - iOS / PWA : rendu téléphone premium proche des références.
   - Ordinateur : vraie interface desktop, sidebar, largeur optimisée.
   Chargé après styles-v54.css et styles-v55.css.
   ============================================================ */
:root{
  --v56-bg:#01050d;
  --v56-bg2:#030914;
  --v56-panel:#07111f;
  --v56-panel2:#0b1727;
  --v56-glass:rgba(255,255,255,.064);
  --v56-line:rgba(255,255,255,.105);
  --v56-line2:rgba(255,255,255,.18);
  --v56-text:#fff;
  --v56-soft:#cbd7eb;
  --v56-muted:#8491aa;
  --v56-blue:#0a84ff;
  --v56-blue2:#006dff;
  --v56-blue3:#37a2ff;
  --v56-violet:#7a3cff;
  --v56-violet2:#5b2eea;
  --v56-good:#31d158;
  --v56-warn:#ffb020;
  --v56-danger:#ff453a;
  --v56-gold:#ffd21e;
  --v56-radius:24px;
  --v56-ease:cubic-bezier(.2,.8,.2,1);
}

html{background:var(--v56-bg);}
body{
  min-height:100dvh;
  background:
    radial-gradient(760px 430px at 80% -8%,rgba(10,132,255,.18),transparent 64%),
    radial-gradient(580px 360px at 4% 16%,rgba(122,60,255,.14),transparent 62%),
    radial-gradient(620px 360px at 48% 102%,rgba(0,109,255,.14),transparent 68%),
    linear-gradient(180deg,#01040b 0%,#020815 48%,#01050d 100%)!important;
  overflow-x:hidden!important;
}
body::before{
  background:
    linear-gradient(118deg,transparent 0%,rgba(255,255,255,.036) 42%,transparent 63%),
    radial-gradient(circle at 50% 0%,rgba(10,132,255,.065),transparent 42%),
    radial-gradient(circle at 10% 58%,rgba(122,60,255,.075),transparent 34%)!important;
  opacity:.92!important;
}
body::after{
  background:
    linear-gradient(150deg,transparent 0 44%,rgba(10,132,255,.055) 50%,transparent 60%),
    radial-gradient(420px 240px at 100% 58%,rgba(255,210,30,.045),transparent 70%)!important;
  opacity:.82!important;
}

/* Base iOS/PWA : téléphone centré, aucune fuite horizontale. */
#app{
  width:min(430px,100vw)!important;
  max-width:430px!important;
  margin-inline:auto!important;
  padding:20px max(15px,env(safe-area-inset-left)) calc(112px + env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-right))!important;
  contain:layout style;
}
body.auth-screen #app{contain:none;}
#app img,#app svg,#app canvas{max-width:100%;}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent;}

/* Micro-polish cohérent. */
.v54-page,.v54-home,.v55-progress-page{animation:v56PageIn .32s var(--v56-ease) both;}
@keyframes v56PageIn{from{opacity:0;transform:translateY(9px);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.v54-page,.v54-home,.v55-progress-page{animation:none!important}}

/* Nav iOS : bleue premium, compacte. */
.nav{z-index:999!important;}
.nav button .ic svg{width:21px;height:21px;display:block;}
.nav button.active .ic{
  background:linear-gradient(180deg,rgba(10,132,255,.23),rgba(10,132,255,.11))!important;
  box-shadow:0 0 24px rgba(10,132,255,.42), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.nav button.active span:last-child{font-weight:850!important;}

/* Accent violet luxe sur zones premium, sans reprendre le vieux jaune. */
.v54-avatar{background:radial-gradient(circle at 35% 25%,#a980ff 0 15%,#7a3cff 36%,#121a52 78%)!important;box-shadow:0 0 38px rgba(122,60,255,.28)!important;}
.v54-profile-page #v54Billing,.v54-billing-card.is-active,.v54-premium-card,.v54-code-page input:focus{
  border-color:rgba(122,60,255,.48)!important;
  box-shadow:0 0 0 1px rgba(122,60,255,.16),0 18px 40px rgba(122,60,255,.12)!important;
}
.v54-code-page .v54-purple-btn,.v54-plan-page .v54-purple-btn,.v54-billing-page .v54-purple-btn{
  background:linear-gradient(180deg,var(--v56-violet),var(--v56-violet2))!important;
  border-color:rgba(174,129,255,.36)!important;
  box-shadow:0 16px 38px rgba(122,60,255,.24), inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* Accueil : un peu plus proche de la capture inclinée : ring violet/bleu, cartes bleues, nav lisible. */
.v54-home-logo{width:132px!important;margin:8px 0 22px!important;filter:drop-shadow(0 0 18px rgba(10,132,255,.24))!important;}
.v54-hello{font-size:23px!important;line-height:1.18!important;margin:0 0 26px!important;}
.v54-section-title,.v54-reco-head{font-size:17px!important;letter-spacing:-.02em!important;color:#fff!important;}
.v54-progress-layout{grid-template-columns:122px 1fr!important;gap:20px!important;align-items:center!important;margin-bottom:31px!important;}
.v54-ring,.progress-ring{
  width:118px!important;height:118px!important;
  background:
    radial-gradient(circle at center,#050b15 0 58%,transparent 59%),
    conic-gradient(from 210deg,var(--v56-violet) 0 calc(var(--p) * .72%),var(--v56-blue3) calc(var(--p) * .72%) calc(var(--p) * 1%),rgba(255,255,255,.105) 0)!important;
  box-shadow:inset 0 0 30px rgba(122,60,255,.16),0 0 34px rgba(10,132,255,.12)!important;
}
.v54-mini-progress i,.mini-progress i{background:linear-gradient(90deg,var(--v56-blue3),var(--v56-violet))!important;}
.v54-progress-copy strong{font-size:20px!important;}
.v54-progress-copy p{color:rgba(255,255,255,.46)!important;font-weight:700!important;}
.v54-recommended{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;}
.v54-lesson-card{min-height:176px!important;border-radius:23px!important;overflow:hidden!important;}
.v54-lesson-card:hover{transform:translateY(-2px);}
.v54-lesson-visual{height:60px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;}
.v54-lesson-chip{color:rgba(6,17,31,.55)!important;font-weight:800!important;font-size:11px!important;}

/* Progression : plus vivante, moins morte. */
.v55-progress-hero{background:radial-gradient(320px 170px at 86% 8%,rgba(10,132,255,.24),transparent 62%),radial-gradient(280px 160px at 4% 100%,rgba(122,60,255,.18),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.035))!important;}
.v55-stat:nth-child(1){background:linear-gradient(180deg,rgba(10,132,255,.13),rgba(255,255,255,.035))!important;}
.v55-stat:nth-child(2){background:linear-gradient(180deg,rgba(49,209,88,.12),rgba(255,255,255,.035))!important;}
.v55-stat:nth-child(3){background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,255,255,.035))!important;}
.v55-stat:nth-child(4){background:linear-gradient(180deg,rgba(122,60,255,.13),rgba(255,255,255,.035))!important;}
.v55-chart{background:radial-gradient(260px 130px at 70% 0%,rgba(10,132,255,.10),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.064),rgba(255,255,255,.028))!important;}

/* Menus : icônes homogènes. */
.v54-menu-icon{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:900!important;}
.v54-menu-item b,.v54-setting-row b{letter-spacing:-.01em!important;}
.v54-menu-item small,.v54-setting-row small{line-height:1.25!important;}

/* ===== Lecture ordinateur : vraie app desktop, pas un téléphone agrandi. ===== */
@media(min-width:900px){
  body:not(.quiz-open){
    min-height:100vh;
    padding:24px 24px 24px 116px;
  }
  body:not(.quiz-open)::before{opacity:.95!important;}
  body:not(.quiz-open) #app{
    width:min(1180px,calc(100vw - 150px))!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:0!important;
    contain:none!important;
  }
  body:not(.quiz-open) #app>section{
    min-height:calc(100vh - 48px);
    border:1px solid rgba(255,255,255,.105);
    border-radius:34px;
    background:
      radial-gradient(720px 340px at 100% -5%,rgba(10,132,255,.10),transparent 66%),
      radial-gradient(560px 280px at 0% 80%,rgba(122,60,255,.08),transparent 70%),
      linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026));
    box-shadow:0 34px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
    padding:34px;
  }
  body:not(.quiz-open) .nav{
    left:24px!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;
    width:76px!important;height:auto!important;min-height:430px!important;padding:10px!important;
    grid-template-columns:1fr!important;grid-auto-rows:1fr!important;border-radius:31px!important;
  }
  body:not(.quiz-open) .nav button{font-size:10px!important;min-height:84px!important;}
  body:not(.quiz-open) .nav button .ic{width:38px!important;height:38px!important;border-radius:16px!important;}
  body:not(.quiz-open) .nav button .ic svg{width:23px;height:23px;}

  /* Desktop home : app iOS à gauche, panneau de pilotage à droite. */
  body:not(.quiz-open) .v54-home{
    display:grid!important;
    grid-template-columns:minmax(360px,430px) minmax(360px,1fr)!important;
    grid-template-areas:
      "logo side"
      "hello side"
      "title side"
      "progress side"
      "reco side"
      "lessons side"
      "wod side";
    gap:0 48px!important;
    align-content:start!important;
  }
  .v54-home-logo{grid-area:logo;}
  .v54-hello{grid-area:hello;}
  .v54-section-title{grid-area:title;}
  .v54-progress-layout{grid-area:progress;}
  .v54-reco-head{grid-area:reco;}
  .v54-recommended{grid-area:lessons;}
  .v54-wod-card{grid-area:wod;}
  .v56-desktop-aside{grid-area:side;display:grid;align-content:start;gap:16px;}
  .v56-desktop-hero{
    min-height:210px;border-radius:30px;padding:26px;overflow:hidden;position:relative;
    background:radial-gradient(360px 210px at 86% 0%,rgba(10,132,255,.28),transparent 68%),linear-gradient(135deg,rgba(10,132,255,.22),rgba(122,60,255,.09) 54%,rgba(255,255,255,.035));
    border:1px solid rgba(88,166,255,.24);box-shadow:0 22px 54px rgba(10,132,255,.14),inset 0 1px 0 rgba(255,255,255,.11);
  }
  .v56-desktop-hero::after{content:"";position:absolute;right:-30px;bottom:-46px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(10,132,255,.22),transparent 65%);filter:blur(6px)}
  .v56-desktop-hero h2{position:relative;font-size:34px;line-height:1.03;margin:0 0 10px;color:#fff;letter-spacing:-.045em;max-width:460px;}
  .v56-desktop-hero p{position:relative;color:var(--v56-soft);font-size:15px;line-height:1.55;max-width:520px;margin:0 0 22px;}
  .v56-desktop-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .v56-desktop-card,.v56-desktop-metric{
    padding:17px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.033));
    border:1px solid rgba(255,255,255,.10);box-shadow:0 14px 36px rgba(0,0,0,.26);
  }
  .v56-desktop-metric strong{display:block;font-size:25px;color:#fff;letter-spacing:-.04em;}.v56-desktop-metric span{display:block;margin-top:4px;color:var(--v56-soft);font-size:12px;}
  .v56-desktop-card b{display:block;color:#fff;font-size:15px;}.v56-desktop-card span{display:block;color:var(--v56-soft);font-size:12px;margin-top:4px;line-height:1.4;}

  /* Desktop courses : menu + contenu côte à côte. */
  body:not(.quiz-open) .v54-courses-page{display:grid!important;grid-template-columns:360px 1fr!important;grid-template-areas:"head head" "feature content" "menu content";gap:18px 24px!important;align-content:start!important;}
  .v54-courses-page .v54-titlebar{grid-area:head;}.v54-courses-page .v54-feature-card{grid-area:feature;}.v54-courses-page .v54-menu{grid-area:menu;}.v54-courses-page #coursesContent{grid-area:content;margin-top:0!important;min-width:0;}
  body:not(.quiz-open) .v54-courses-page .v54-menu{position:sticky;top:24px;align-self:start;}
  body:not(.quiz-open) .v54-modes{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  body:not(.quiz-open) .alphabet-grid{grid-template-columns:repeat(8,minmax(0,1fr))!important;}
  body:not(.quiz-open) .phrase-list{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* Desktop profile/progress/settings/billing. */
  body:not(.quiz-open) .v54-profile-page{display:grid;grid-template-columns:360px minmax(360px,1fr);grid-template-areas:"title title" "top menu";gap:18px 24px;align-content:start;}
  .v54-profile-page .v54-titlebar{grid-area:title}.v54-profile-page .v54-profile-top{grid-area:top}.v54-profile-page .v54-menu{grid-area:menu;margin-top:6px;}
  body:not(.quiz-open) .v55-progress-page{max-width:980px!important;margin-inline:auto;}
  body:not(.quiz-open) .v55-stat-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  body:not(.quiz-open) .v55-chart{height:220px;}
  body:not(.quiz-open) .v54-settings-page,body:not(.quiz-open) .v54-billing-page,body:not(.quiz-open) .v54-code-page,body:not(.quiz-open) .v54-plan-page{max-width:760px;margin-inline:auto;}
}

/* Très grands écrans : laisser respirer, sans perdre l'effet app. */
@media(min-width:1280px){
  body:not(.quiz-open) #app{width:min(1240px,calc(100vw - 170px))!important;max-width:1240px!important;}
  body:not(.quiz-open) #app>section{padding:38px;}
}

/* iPhone mini / SE : densité maîtrisée. */
@media(max-width:390px){
  .v54-progress-layout{grid-template-columns:108px 1fr!important;gap:15px!important;}
  .v54-ring,.progress-ring{width:104px!important;height:104px!important;}
  .v54-ring span,.progress-ring span{font-size:29px!important;}
  .v54-lesson-card{min-height:164px!important;}
  .v54-lesson-visual{height:54px!important;}
  .v54-home-logo{width:120px!important;}
}
@media(max-width:360px){
  #app{padding-left:12px!important;padding-right:12px!important;}
  .v54-progress-layout{grid-template-columns:96px 1fr!important;}
  .v54-ring,.progress-ring{width:94px!important;height:94px!important;}
  .v54-lesson-card{min-height:150px!important;padding:11px!important;}
  .v54-lesson-card b{font-size:13px!important;}
  .nav{width:calc(100vw - 12px)!important;}
}