/* ImmatSIV V2.5.0 — responsive production (desktop 1440p + mobile moderne) */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{min-width:0;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
img,svg{height:auto}
button,a,input,select,textarea{touch-action:manipulation}
.table-wrap,.tab-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Accueil : exploiter correctement un écran 1440p sans étirer les lignes de texte. */
@media (min-width:1280px){
  body.page-home .wrap{width:min(1320px,calc(100% - 72px))}
  body.page-home .hero{padding-top:76px;padding-bottom:76px}
  body.page-home .hero-grid{gap:72px;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)}
  body.page-home .hero h1{font-size:clamp(54px,4.5vw,70px);max-width:12ch}
  body.page-home .lead{max-width:68ch}
  body.page-home .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.page-home .footer-grid{grid-template-columns:minmax(300px,1.4fr) repeat(3,minmax(170px,.7fr));gap:48px}
  body.page-pro-inscription .wrap,body.marketing-service .wrap,body.marketing-hub .wrap{width:min(1240px,calc(100% - 72px))}
  .dash-content{max-width:1600px;margin-inline:auto;width:100%}
}
@media (min-width:1800px){
  /* QHD / 1440p (souvent 2560×1440) : davantage de présence sans étirer les paragraphes. */
  body.page-home .wrap{width:min(1540px,calc(100% - 120px))}
  body.page-home .hero-grid{gap:104px;grid-template-columns:minmax(0,1.08fr) minmax(500px,.92fr)}
  body.page-pro-inscription .wrap,body.marketing-service .wrap,body.marketing-hub .wrap{width:min(1460px,calc(100% - 120px))}
  .dash-content{max-width:1760px}
}

/* Tablettes / petits laptops */
@media (max-width:1100px){
  body.page-home .wrap{width:min(100% - 40px,1180px)}
  body.page-home .hero-grid{gap:36px}
  body.page-pro-inscription .grille{grid-template-columns:1fr!important}
  body.page-pro-inscription .tunnel{position:static!important}
  .page-admin .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Téléphone, y compris iPhone 17 Pro Max (440 CSS px) */
@media (max-width:600px){
  :root{--mobile-gutter:16px}
  html{scroll-padding-top:72px}
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  button,.btn,.btn2,.cta,input,select,textarea{font-size:16px}
  button,.btn,.btn2,.cta{min-height:44px}
  input,select,textarea{min-height:46px}

  /* Accueil */
  body.page-home .wrap{width:calc(100% - 32px)!important;max-width:none}
  body.page-home header .wrap{height:66px!important;gap:10px}
  body.page-home .brand img{width:176px!important;max-width:56vw!important}
  body.page-home nav{gap:6px!important;min-width:0}
  body.page-home .desktop-nav>a:not(.nav-btn){display:none!important}
  body.page-home .nav-btn{padding:9px 10px!important;font-size:12px!important;white-space:nowrap}
  body.page-home .nav-pro{display:none!important}
  body.page-home .hero{padding:42px 0 36px!important}
  body.page-home .hero-grid{grid-template-columns:1fr!important;gap:28px!important}
  body.page-home .hero h1{font-size:clamp(38px,11.2vw,50px)!important;line-height:.98!important;letter-spacing:-.055em!important;max-width:none}
  body.page-home .lead{font-size:16px!important;line-height:1.58!important}
  body.page-home .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  body.page-home .actions .btn{width:100%;justify-content:center;text-align:center}
  body.page-home .hero-proof{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  body.page-home .path-card{padding:18px!important;border-radius:18px!important}
  body.page-home .path{padding:14px 10px!important}
  body.page-home .trust-grid,body.page-home .service-grid,body.page-home .steps,body.page-home .prices,body.page-home .footer-grid,body.page-home .badges,body.page-home .seo-guide{grid-template-columns:1fr!important}
  body.page-home .block{padding:48px 0!important}
  body.page-home .section-head h2,body.page-home .scan-copy h2{font-size:clamp(28px,8vw,34px)!important}
  body.page-home .footer-logo{width:min(330px,100%)!important}

  /* Pages marketing / formulaires */
  body.marketing-page .wrap,body.marketing-doc .wrap,body.marketing-service .wrap,body.marketing-hub .wrap{width:calc(100% - 32px)!important;max-width:none}
  body.marketing-page header .wrap,body.marketing-doc header .wrap,body.marketing-service header .wrap,body.marketing-hub header .wrap{min-height:66px!important}
  body.marketing-page .logo img,body.marketing-doc .logo img,body.marketing-service .logo img,body.marketing-hub .logo img{width:176px!important;max-width:56vw!important}
  body.page-pro-inscription main{padding:34px 0 56px!important}
  body.page-pro-inscription h1{font-size:clamp(36px,10vw,46px)!important;max-width:none!important}
  body.page-pro-inscription .chapo{font-size:16px!important}
  body.page-pro-inscription .grille{gap:26px!important}
  body.page-pro-inscription .tunnel{padding:18px!important;border-radius:18px!important}
  body.page-pro-inscription .prix-tete .montant{font-size:36px!important}
  body.page-pro-inscription .formule{padding:13px!important}
  body.page-pro-inscription .tarifs-pro{padding:16px!important;border-radius:18px!important}
  body.page-pro-inscription .tarifs-pro .l{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}
  body.page-pro-inscription .tarifs-pro .l i{display:none!important}
  body.marketing-doc .doc{padding:24px 18px!important;border-radius:18px!important}

  /* Dépôt / mandat / paiement */
  body.page-transaction .wrap{width:calc(100% - 28px)!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
  body.page-transaction main{padding-top:28px!important;padding-bottom:58px!important}
  body.page-transaction .fiche,body.page-transaction .mandat,body.page-transaction .final,body.page-transaction .card{padding:17px!important;border-radius:16px!important}
  body.page-transaction #pieces{grid-template-columns:1fr!important}
  body.page-transaction .duo2{grid-template-columns:1fr!important}
  body.page-transaction .scan-actions{grid-template-columns:1fr 1fr!important}
  body.page-transaction .signature-pad-wrap{margin-inline:-2px}

  /* Dashboards */
  .dash-shell:not(.hide){display:block!important;min-height:100dvh}
  .dash-side{position:sticky!important;top:0!important;z-index:50!important;height:auto!important;padding:10px 12px calc(10px + env(safe-area-inset-top))!important}
  .dash-side .brand{margin:0 4px 8px!important;min-height:44px!important}
  .dash-side .brand .dash-brand-logo{width:166px!important;max-width:54vw!important}
  .dash-nav{display:flex!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scrollbar-width:none;padding-bottom:2px}
  .dash-nav::-webkit-scrollbar{display:none}
  .dash-nav button,.dash-nav a{white-space:nowrap!important;flex:0 0 auto;padding:10px 11px!important;font-size:12.5px!important;min-height:42px}
  .dash-top{position:relative!important;top:auto!important;height:62px!important;padding:0 14px!important;z-index:35!important}
  .dash-top h1{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68vw}
  .dash-content{padding:18px 14px 54px!important;max-width:none!important}
  .hero-row{gap:12px!important}.hero-row h2{font-size:27px!important}
  .cards,.page-admin .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .metric{padding:15px!important}.metric b{font-size:27px!important}
  .panel{border-radius:17px!important;overflow:hidden}
  .panel-head{padding:15px!important}.panel-body{padding:15px!important}
  .table-wrap{overflow-x:auto!important;max-width:100vw}
  .table-wrap table{min-width:720px}
  .login-wrap{min-height:100dvh!important;padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))!important}
  .login-card{width:calc(100% - 28px)!important;max-width:460px!important;padding:24px 18px!important}
  .login-card .brand .login-brand-logo{width:210px!important;max-width:72vw!important}
}

@media (max-width:380px){
  body.page-home .brand img,body.marketing-page .logo img,body.marketing-doc .logo img,body.marketing-service .logo img,body.marketing-hub .logo img{width:158px!important}
  .cards,.page-admin .cards{grid-template-columns:1fr!important}
  body.page-transaction .scan-actions{grid-template-columns:1fr!important}
}

@media (max-height:520px) and (orientation:landscape){
  .dash-side{position:static!important}
  body.page-home .hero{padding-top:28px!important}
}

@media (hover:none) and (pointer:coarse){
  .btn:hover,.btn2:hover,.cta:hover,body.marketing-page .btn:hover,body.marketing-doc .btn:hover,body.marketing-service .btn:hover,body.marketing-hub .btn:hover{transform:none!important}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* AUTH VISIBILITY INVARIANT — ne jamais laisser une règle responsive réafficher une zone protégée. */
[hidden],.hide,.dash-shell.hide{display:none!important}

/* UI V2.6 GLOBAL — chargé par toutes les pages historiques via responsive-v25.css. */
/* ImmatSIV V2.6 — couche UI finale commune à tout le site. Chargée en dernier. */
:root{
  --font-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ui-ink:#101828;--ui-text:#46556b;--ui-muted:#6b778a;--ui-blue:#003399;--ui-blue-2:#0759e8;
  --ui-line:#dce3ed;--ui-soft:#f5f8fc;--ui-white:#fff;--ui-radius:14px;--ui-radius-lg:20px;
  --ui-shadow:0 12px 36px rgba(15,27,45,.07);--ui-focus:0 0 0 4px rgba(23,105,255,.13);
}
html,body,button,input,select,textarea,table,th,td,label,summary{font-family:var(--font-ui)!important}
body{color:var(--ui-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--font-ui)!important;font-weight:850;letter-spacing:-.035em;text-wrap:balance}
p,li,dd,dt{font-family:var(--font-ui);line-height:1.58}
code,pre,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}
button,input,select,textarea{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:12px!important;border-color:#cfd8e5!important;background:#fff!important;transition:border-color .15s,box-shadow .15s,background .15s}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:#76a6ff!important;box-shadow:var(--ui-focus)!important;outline:0!important}
button,.btn,.btn2,.cta,.tete-cta,.nav-btn{border-radius:12px!important;font-weight:800!important;letter-spacing:-.015em}
button:focus-visible,a:focus-visible,.btn:focus-visible,.btn2:focus-visible,.cta:focus-visible{outline:3px solid rgba(23,105,255,.3)!important;outline-offset:2px!important}
.carte,.card,.panel,.metric,.carte-d,.aside-card,.encadre,.fiche,.mandat,.piece,.doc,.tunnel{border-color:var(--ui-line)!important}
.table-wrap,.tab-resp{border-radius:14px}
table{font-variant-numeric:tabular-nums}
th{font-family:var(--font-ui)!important;font-weight:850!important;letter-spacing:.065em}
td{font-family:var(--font-ui)!important}
.badge{font-family:var(--font-ui)!important}

/* En-têtes secondaires : même rythme que l'accueil. */
body.marketing-page header .wrap,body.marketing-doc header .wrap,body.marketing-service header .wrap,body.marketing-hub header .wrap{min-height:72px!important}
body.marketing-page .logo img,body.marketing-doc .logo img,body.marketing-service .logo img,body.marketing-hub .logo img{width:216px!important;height:auto!important}
body.marketing-page main,body.marketing-doc main,body.marketing-service main,body.marketing-hub main{font-family:var(--font-ui)!important}
body.marketing-hub .carte-d h2,body.marketing-service h1,body.marketing-hub h1{font-weight:900!important}
body.marketing-hub .carte-d p,body.marketing-service .chapo,body.marketing-hub .chapo{color:var(--ui-text)!important}

/* Dashboards : marque lisible, textes et composants homogènes. */
.dash-side .brand .dash-brand-logo{width:196px!important;height:auto!important;max-width:100%!important;border-radius:0!important;box-shadow:none!important}
.dash-nav button,.dash-nav a{font-family:var(--font-ui)!important;font-weight:750!important}
.dash-top h1,.hero-row h2,.panel-head h3,.metric b,.metric span{font-family:var(--font-ui)!important}
.login-card h1{font-weight:900!important;letter-spacing:-.04em!important}
.login-card p{color:var(--ui-muted)!important}
.login-card .brand .login-brand-logo{width:226px!important;height:auto!important}

/* La visibilité d'une zone d'authentification prime sur TOUT responsive. */
[hidden],.hide,.dash-shell.hide{display:none!important}

@media(max-width:760px){
  body.marketing-page .logo img,body.marketing-doc .logo img,body.marketing-service .logo img,body.marketing-hub .logo img{width:176px!important;max-width:58vw!important}
  .dash-side .brand .dash-brand-logo{width:176px!important;max-width:58vw!important}
  .login-card h1{font-size:clamp(27px,7.5vw,32px)!important}
  .panel,.metric,.carte,.card,.tunnel,.doc{border-radius:17px!important}
}

/* V2.8 — grille finale commune.
   Chargée sur toutes les pages historiques : on verrouille les axes sans toucher
   aux composants métier. */
:root{--layout-final-max:1240px;--layout-final-gap:28px}

@media(min-width:761px){
  /* Pages transactionnelles : header, contenu principal et panneau latéral
     partagent exactement les mêmes gouttières. */
  body.page-transaction .top .wrap,
  body.page-transaction main.wrap{
    width:min(var(--layout-final-max),calc(100% - 48px))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  body.page-transaction main.layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(320px,360px)!important;
    gap:var(--layout-final-gap)!important;
    align-items:stretch!important;
  }
  body.page-transaction main.layout>.card{
    min-width:0!important;
    height:100%!important;
    padding:32px!important;
  }
  body.page-transaction main.layout>.aside{
    align-self:stretch!important;
  }
  body.page-transaction .head{max-width:760px}
  body.page-transaction .head h1{line-height:1.08}
  body.page-transaction .grid{column-gap:18px!important;row-gap:0!important}

  /* Hubs et fiches marketing : même largeur max et mêmes axes de colonne. */
  body.marketing-page .wrap,
  body.marketing-service .wrap,
  body.marketing-hub .wrap{
    width:min(var(--layout-final-max),calc(100% - 48px))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  body.marketing-service .colonnes,
  body.marketing-hub .colonnes{
    align-items:start!important;
  }

  /* Dashboards : contenu centré, sans dérive latérale sur écrans très larges. */
  .dash-content{
    width:100%!important;
    max-width:1480px!important;
    margin-inline:auto!important;
  }
}

@media(min-width:1600px){
  body.page-transaction .top .wrap,
  body.page-transaction main.wrap,
  body.marketing-page .wrap,
  body.marketing-service .wrap,
  body.marketing-hub .wrap{
    width:min(1320px,calc(100% - 96px))!important;
  }
}

@media(max-width:1000px) and (min-width:601px){
  body.page-transaction main.layout{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  body.page-transaction main.layout>.card{height:auto!important}
}