/* =====================================================
   MAIN.CSS — VALIRO (Shell + Premium Responsive)
   Desktop propre + Mobile/Tablette premium
   ===================================================== */

/* =======================
   1) TOKENS / THEME
   ======================= */
:root{
  --brand:     #2563eb;
  --brand-2:   #60a5fa;

  --text:      #0f172a;
  --text-2:    #334155;
  --muted:     #64748b;

  --surface:   #ffffff;
  --bg-soft:   #f7f9fc;

  --border:    rgba(226,232,240,.95);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 10px rgba(16,24,40,.06);
  --shadow-md: 0 14px 32px rgba(16,24,40,.10);
  --shadow-lg: 0 18px 44px rgba(16,24,40,.14);

  --page-max:  1240px;
  --form-max:  560px;

  --logo-h:    80px;
  --icon-size: 56px;
  --icon-font: 1.25rem;

  /* Bottom nav tokens */
  --mbnav-h: 68px;
  --mbnav-radius: 18px;
  --mbnav-bg: rgba(255,255,255,.92);
  --mbnav-border: rgba(226,232,240,.9);
  --mbnav-shadow: 0 14px 36px rgba(16,24,40,.10);
}

@media (min-width:1280px){
  :root{
    --logo-h:    92px;
    --icon-size: 60px;
    --icon-font: 1.35rem;
  }
}

/* =======================
   2) RESET / BASE
   ======================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;

  color:var(--text-2);
  background:var(--surface);

  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;

  /* Stop horizontal scroll */
  max-width:100%;
  overflow-x:hidden;
}

img, svg, canvas, video, iframe{
  max-width:100%;
  height:auto;
}

/* =======================
   3) HEADER (DESKTOP BASE)
   ======================= */
header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:14px 16px 16px;
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
}

header > *{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:16px;
}

header img{
  display:block;
  height:var(--logo-h);
  width:auto;
  margin:8px auto 4px;
  max-width:100%;
}

header nav{ width:100%; }

header nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:4px 0 0;
  padding:0;
}

header nav a{
  --size:var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);

  border-radius:50%;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  border:1px solid var(--border);

  transition: box-shadow .2s, transform .06s, background-color .2s, color .2s, border-color .2s;
}

header nav a i,
header nav a .fa{
  font-size:var(--icon-font);
  line-height:1;
}

header nav a:hover{
  color:#1d4ed8;
  background:#f8fafc;
  border-color:#dbe4ef;
  box-shadow:0 6px 16px rgba(37,99,235,.18);
  transform:translateY(-1px);
}

header nav a.is-active,
header nav a[aria-current="page"]{
  color:#fff;
  background-image:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  box-shadow:0 8px 22px rgba(37,99,235,.22);
}

/* =======================
   4) MAIN LAYOUT
   ======================= */
main, #main, .main, #content, .content{
  width:100%;
  max-width:var(--page-max);
  margin-inline:auto;
  padding-inline:16px;
}

main.page{ flex:1 0 auto; width:100%; }

/* Empêche un wrapper interne trop large */
main.page > .container{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding:16px 16px;
}

/* =======================
   5) FOOTER
   ======================= */
footer{
  background:linear-gradient(180deg,#fff 0%, #fafbff 100%);
  border-top:1px solid var(--border);
  box-shadow:0 -2px 8px rgba(16,24,40,.04);
  padding:20px 18px;
  text-align:center;
  color:var(--text-2);
  margin-top:auto;
  width:100%;
}

footer .footer-title{
  display:block;
  margin:0 0 6px;
  font-weight:600;
  font-size:.98rem;
  color:var(--text);
  opacity:.9;
}

footer .footer-links a,
footer p a{
  color:var(--brand);
  text-decoration:none;
  padding:4px 8px;
  border-radius:6px;
  transition: background .2s, color .2s;
}

footer .footer-links a:hover,
footer p a:hover{
  background:#eff6ff;
  color:#1d4ed8;
}

/* =======================
   6) FORM WIDTH GLOBAL
   ======================= */
.login-wrapper,
.login-wrapper .login-form,
body.signup form,
#AnalysisForm{
  max-width:var(--form-max);
  width:100%;
  margin-inline:auto;
}


@media (min-width:720px){
  #AnalysisForm > div{ display:inline-block; margin-right:8px; }
  #AnalysisForm > div:last-child{ margin-right:0; }
  #AnalysisForm button{ width:auto; }
}

/* =====================================================
   7) AUTH PAGES — PREMIUM
   Nécessite : <body class="auth-page">
   ===================================================== */
body.auth-page{
  background: var(--bg-soft);
}

body.auth-page header{
  box-shadow:none;
  border-bottom:1px solid var(--border);
}

body.auth-page header nav{
  display:none !important;
}

body.auth-page header > *{
  max-width:none;
  padding-inline:0;
}

/* AUTH mobile portrait */
@media (max-width:768px) and (orientation:portrait){

  body.auth-page .login-wrapper{
    max-width:100% !important;
    width:100% !important;
    margin:0 !important;
    padding:10px 12px 18px !important;
  }

  body.auth-page .login-wrapper h1{
    text-align:center;
    margin:10px 0 12px !important;
    font-size:24px;
    letter-spacing:-0.02em;
    color:var(--text);
  }

  body.auth-page .form-container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:14px 14px !important;

    border-radius:var(--radius-lg) !important;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    overflow:hidden;
  }

  body.auth-page label{
    display:block;
    font-size:13px;
    margin-bottom:6px;
    color:var(--text-2);
  }

  body.auth-page input[type="email"],
  body.auth-page input[type="password"]{
    width:100% !important;
    max-width:100% !important;
    height:46px;
    font-size:16px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(203,213,225,.9);
    background:#fff;
  }

  body.auth-page input[type="email"]:focus,
  body.auth-page input[type="password"]:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
  }

  body.auth-page .login-form button[type="submit"]{
    width:100% !important;
    max-width:100% !important;
    height:48px !important;

    border:0;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
    color:#fff;

    background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 100%);
    box-shadow:0 10px 18px rgba(37,99,235,.20);
  }

  body.auth-page .login-form button[type="submit"]:active{
    transform: translateY(1px);
  }
}

/* AUTH tablette */
@media (min-width:769px) and (max-width:1024px){
  body.auth-page{
    background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 70%);
  }

  body.auth-page .login-wrapper{
    max-width:640px;
    padding:24px 18px 30px;
    margin:0 auto;
  }

  body.auth-page .form-container{
    border-radius:22px;
    padding:24px 22px;
    box-shadow:var(--shadow-lg);
    background:#fff;
    border:1px solid var(--border);
  }

  body.auth-page input[type="email"],
  body.auth-page input[type="password"]{
    height:50px;
    border-radius:14px;
  }

  body.auth-page .login-form button[type="submit"]{
    height:54px;
    border-radius:16px;
  }
}

/* Petit mobile */
@media (max-width:360px){
  body.auth-page .form-container{ padding:16px 14px; }
  body.auth-page .login-wrapper h1{ font-size:22px; }
}

/* ✅ Single scroll (propre) */
html{
  height: 100%;
  overflow-y: auto;      /* le scroll vit ici */
  overflow-x: hidden;
  scrollbar-gutter: stable;  /* PAS both-edges */
}

body{
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  /* ne force pas overflow-y/visible ici */
}


/* =====================================================
   8) MOBILE/TABLETTE — GLOBAL
   ===================================================== */
@media (max-width:768px){

  :root{
    --logo-h: 56px;
    --icon-size: 46px;
    --icon-font: 1.15rem;
  }

  header{
    gap:8px;
    padding:10px 12px 10px;
  }

  header img{
    height:var(--logo-h);
    margin:6px auto 0;
  }

  main, #main, .main, #content, .content{
    padding-inline:12px;
  }

  button, .btn, a.btn{
    min-height:46px;
    border-radius:var(--radius-sm);
  }

  input, select, textarea{
    font-size:16px;
    min-height:46px;
    border-radius:var(--radius-sm);
  }

  input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
  }

  footer{
    font-size:12px;
    padding:14px 12px;
  }
}

/* =========================================================
   9) APP PAGES MOBILE — header minimal + no nav icons
   ========================================================= */
@media (max-width:768px) and (orientation:portrait){

  body:not(.auth-page) header nav{
    display:none !important;
  }

  body:not(.auth-page) header{
    padding:8px 10px;
    gap:6px;
  }

  body:not(.auth-page) header img{
    height:40px;
    margin:6px auto;
  }
}

/* =========================================================
   10) MOBILE BOTTOM NAV — PREMIUM
   (Mobile + Tablette)
   IMPORTANT : ajoute class="has-bottom-nav" sur body
   ========================================================= */
body.has-bottom-nav{
  padding-bottom: calc(var(--mbnav-h) + env(safe-area-inset-bottom, 0px) + 14px);
}

.mobile-bottom-nav{
  display:none; /* desktop hidden by default */
}

@media (max-width:1024px){
  .mobile-bottom-nav{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: var(--mbnav-h);
    z-index: 999;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;

    background: var(--mbnav-bg);
    border: 1px solid var(--mbnav-border);
    border-radius: var(--mbnav-radius);
    box-shadow: var(--mbnav-shadow);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
  }

  .mobile-bottom-nav a{
    display:grid;
    place-items:center;
    gap:6px;
    padding:10px 6px;

    text-decoration:none;
    color:var(--muted);

    -webkit-tap-highlight-color: transparent;
    user-select:none;
    touch-action: manipulation;
  }

  .mobile-bottom-nav a i{
    font-size:20px;
    line-height:1;
  }

  .mobile-bottom-nav a span{
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
  }

  .mobile-bottom-nav a.active{
    color:var(--brand);
  }

  .mobile-bottom-nav a.active i{
    position:relative;
  }
  .mobile-bottom-nav a.active i::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:40px;
    height:40px;
    transform:translate(-50%,-50%);
    border-radius:14px;
    background: rgba(37,99,235,.10);
    z-index:-1;
  }

  .mobile-bottom-nav a:active{
    transform: translateY(1px);
  }

  .mobile-bottom-nav a:focus-visible{
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:-3px;
    border-radius:14px;
  }
}

/* Desktop : pas de bottom nav */
@media (min-width:1025px){
  .mobile-bottom-nav{ display:none !important; }
  body.has-bottom-nav{ padding-bottom:0; }
}

/* =========================================================
   11) DASHBOARD MOBILE — cartes premium + grille 1 col
   (adapte si tes classes diffèrent)
   ========================================================= */
@media (max-width:768px) and (orientation:portrait){

  .dashboard-cards, .cards-grid, .cards,
  .dashboard-grid, .summary-grid{
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px;
  }

  .card, .panel, .box, .dashboard-card{
    width:100%;
    max-width:100%;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 10px 24px rgba(16,24,40,.06);
    padding:14px 14px;
  }

  .card h3, .panel h3, .box h3,
  .dashboard-card .title{
    margin:0 0 6px;
    font-size:14px;
    font-weight:800;
    color:var(--muted);
    letter-spacing:-0.01em;
  }

  .card .value, .panel .value, .box .value,
  .dashboard-card .amount{
    font-size:22px;
    font-weight:900;
    color:var(--text);
    margin:0;
  }
}

/* =========================================================
   12) EDUCATION — FIX MOBILE (split -> 1 colonne)
   IMPORTANT : tes classes doivent matcher
   Tu peux garder ces alias, ça ne casse rien si absent.
   ========================================================= */
@media (max-width:768px){

  /* wrappers possibles */
  .education-layout,
  .education-container,
  .education-grid,
  .education-wrapper{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* sidebar modules */
  .education-sidebar,
  .modules-list,
  .modules-column{
    width:100% !important;
    max-width:100% !important;
    margin-bottom:14px !important;
  }

  /* contenu */
  .education-content,
  .module-content,
  .content-column{
    width:100% !important;
    max-width:100% !important;
  }

  /* titres trop grands */
  .education-content h1,
  .education-content h2,
  .module-content h1,
  .module-content h2{
    font-size:22px;
    line-height:1.25;
    word-break: break-word;
  }
}

/* ===========================
   SCROLL PROPRE (fiable)
   - html scrolle
   - pas de double scroll
   - scrollbar cachée mais scroll actif
   =========================== */

/* ===== FORCE SCROLL (DOIT ÊTRE TOUT EN BAS) ===== */
html, body{
  height: auto !important;
  overflow: visible !important;
}

html{
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* scrollbar cachée mais scroll actif */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge legacy */
}
html::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* aucun wrapper ne doit scroller */
main.page,
main.page > .container,
.container,
.page,
.content,
#content{
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ✅ Tooltips help : wrap, pas d'ellipsis, responsive */
.help[data-tip]{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  cursor: help;
  user-select: none;
}

/* bulle */
.help[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);

  max-width: min(420px, 88vw);
  width: max-content;

  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.96);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;

  /* ✅ le fix principal */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  -webkit-line-clamp: unset !important;

  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .12s ease, transform .12s ease;
}

/* petite flèche */
.help[data-tip]::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(15, 23, 42, 0.96);
  opacity: 0;
  z-index: 9998;
  transition: opacity .12s ease;
}

/* hover desktop + focus/tap mobile */
.help[data-tip]:hover::after,
.help[data-tip]:focus::after,
.help[data-tip]:active::after{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.help[data-tip]:hover::before,
.help[data-tip]:focus::before,
.help[data-tip]:active::before{
  opacity: 1;
}

/* évite l'outline moche sur mobile */
.help[data-tip]:focus{
  outline: none;
}
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}