/* =========================================================================
   Aideadomicile-paies.fr : feuille de style de l'espace client
   -------------------------------------------------------------------------
   Reprend exactement les couleurs et les typographies de css/style.css
   (bleu encre, vert, or, fond crème, Fraunces et Public Sans) pour que le
   portail appartienne visuellement au site.
   Feuille autonome : elle ne dépend pas de css/style.css, dont les règles
   d'en-tête et de mise en page publique n'ont rien à faire ici.
   ========================================================================= */

:root{
  --navy-900:#0A3760;
  --navy-800:#0D4270;
  --navy-700:#0F5A9E;
  --navy-600:#1568B4;
  --green-700:#3D7A22;
  --green-600:#4C9A2A;
  --green-500:#5FAE42;
  --amber-500:#E7A93C;
  --amber-600:#CF8F22;
  --cream:#F6F4EF;
  --paper:#FFFFFF;
  --ink:#16232E;
  --ink-soft:#3D4C59;
  --ink-light:#7C8894;
  --line:#DFE1D9;
  --line-soft:#EAE8E0;
  --accent:#3D7A22;          /* accent lisible sur fond clair */
  --accent-clair:#E7A93C;    /* accent lisible sur fond sombre */
  --shadow:0 18px 40px -22px rgba(10,55,96,.35);
  --shadow-sm:0 8px 20px -14px rgba(10,55,96,.3);
  --radius:10px;
  --radius-sm:8px;
  --radius-lg:14px;
  --ease:cubic-bezier(.4,0,.2,1);
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy-900);line-height:1.15;margin:0 0 .5em;font-weight:600;}
p{margin:0 0 1.1em;color:var(--ink-soft);}
ul{margin:0;padding:0;list-style:none;}
strong{font-weight:700;color:var(--navy-900);}
:focus-visible{outline:3px solid var(--amber-500);outline-offset:3px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.lead{font-size:17px;line-height:1.7;}
.muted{color:var(--ink-soft);}
.small{font-size:13.5px;}
.mb-0{margin-bottom:0;}

/* ---------- Marque ---------- */
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-icon{width:46px;height:46px;flex:none;object-fit:contain;}
.brand-text{
  display:block;font-family:var(--font-display);font-size:21px;font-weight:600;
  color:var(--navy-900);line-height:1.05;letter-spacing:-.01em;
}
.brand-text strong{color:var(--amber-500);font-weight:600;}
.brand-sub{
  display:block;font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-light);margin-top:5px;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:999px;font-weight:700;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;text-align:center;
  font-family:var(--font-body);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary{background:var(--green-600);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--green-700);transform:translateY(-2px);}
.btn-navy{background:var(--navy-700);color:#fff;}
.btn-navy:hover{background:var(--navy-800);transform:translateY(-2px);}
.btn-navy-line{background:transparent;border-color:var(--navy-700);color:var(--navy-700);}
.btn-navy-line:hover{background:var(--navy-700);color:#fff;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.btn-ghost{background:var(--paper);border-color:var(--line);color:var(--navy-900);}
.btn-ghost:hover{border-color:var(--amber-500);background:#FCF7EC;}
.btn-sm{padding:9px 18px;font-size:.85rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important;}

/* ---------- Champs de formulaire ---------- */
.field{display:flex;flex-direction:column;}
.field label{font-size:12.5px;font-weight:700;color:var(--navy-900);margin-bottom:7px;}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);width:100%;
}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(76,154,42,.18);
}

/* ---------- Messages ---------- */
.alert{padding:13px 16px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:20px;}
.alert.ko{background:#FDF0EF;color:#98322A;border:1px solid #F2CFCC;}
.alert.ok{background:#EFF7EA;color:#2F6019;border:1px solid #CFE5BF;}
.alert.info{background:#EEF4FA;color:var(--navy-900);border:1px solid #CFE0EF;}

/* =========================================================================
   ÉCRANS CONNECTÉS
   ========================================================================= */
.portal-body{background:var(--cream);min-height:100vh;display:flex;flex-direction:column;}

.portal-head{background:var(--navy-900);color:#C3D5E6;}
.portal-head .container{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:78px;}
.portal-head .brand-text{color:#fff;font-size:19px;}
.portal-head .brand-text strong{color:var(--amber-500);}
.portal-head .brand-sub{color:#9FB8D0;}
.portal-head .brand-icon{background:#fff;border-radius:8px;padding:3px;}

.portal-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap;}
.portal-nav a{padding:8px 14px;font-size:14px;font-weight:600;color:#C3D5E6;border-radius:999px;transition:all .18s var(--ease);}
.portal-nav a:hover{background:rgba(255,255,255,.10);color:#fff;}
.portal-nav a.on{background:rgba(231,169,60,.20);color:var(--amber-500);}

.portal-user{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#9FB8D0;padding-left:18px;border-left:1px solid rgba(255,255,255,.16);}
.portal-user strong{display:block;color:#fff;font-weight:700;font-size:13.5px;}

.portal-main{flex:1;padding:40px 0 64px;}

.portal-foot{background:var(--navy-900);color:#C3D5E6;font-size:12.5px;padding:22px 0;}
.portal-foot .container{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.portal-foot a{color:#9FB8D0;text-decoration:underline;text-underline-offset:3px;}
.portal-foot a:hover{color:var(--amber-500);}

.portal-title{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:28px;}
.portal-title h1{font-size:29px;margin:0 0 4px;}
.portal-title p{margin:0;color:var(--ink-soft);font-size:14.5px;}

/* ---------- Panneaux ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;box-shadow:var(--shadow-sm);}
.panel h2{font-size:19px;margin-bottom:6px;}
.panel .sub{color:var(--ink-soft);font-size:14px;margin-bottom:22px;}
.panel-flush{padding:0;overflow:hidden;}
.panel-flush > h2{padding:24px 28px 0;}
.panel-flush > .sub{padding:0 28px;}

/* ---------- Zone de dépôt ---------- */
.dropzone{
  display:block;width:100%;
  border:1.6px dashed var(--amber-500);border-radius:var(--radius-lg);background:#FCF7EC;
  padding:38px 26px;text-align:center;cursor:pointer;transition:all .2s var(--ease);
}
.dropzone:hover,.dropzone.hot{background:#F9EFDA;border-color:var(--amber-600);}
.dropzone .big{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--navy-900);margin-bottom:6px;}
.dropzone .small{display:block;color:var(--amber-600);font-size:13.5px;font-weight:600;}
.dropzone input[type=file]{display:none;}

.file-list{margin-top:18px;}
.file-line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px;}
.file-line:last-child{border-bottom:0;}
.file-line .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-line .st{font-size:12.5px;color:var(--ink-light);}
.file-line .st.ok{color:var(--green-700);font-weight:700;}
.file-line .st.ko{color:#98322A;font-weight:700;}

/* ---------- Tableaux ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:14.2px;}
table.tbl th{
  text-align:left;padding:12px 28px;background:var(--cream);color:var(--ink-soft);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:14px 28px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--ink-soft);}
table.tbl tr:last-child td{border-bottom:0;}
table.tbl tbody tr:hover{background:var(--cream);}
table.tbl .doc{display:flex;align-items:center;gap:12px;}
table.tbl .ext{
  width:36px;height:36px;border-radius:var(--radius-sm);background:var(--navy-900);color:var(--amber-500);
  display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;flex:none;letter-spacing:.04em;
}
table.tbl .nom{font-weight:600;color:var(--navy-900);}
table.tbl .meta{font-size:12.4px;color:var(--ink-light);}
table.tbl a.dl{color:var(--green-700);font-weight:700;white-space:nowrap;}
table.tbl a.dl:hover{text-decoration:underline;}

/* ---------- Étiquettes ---------- */
.pill{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 10px;border-radius:999px;}
.pill.cabinet{background:#E7EFF7;color:var(--navy-700);}
.pill.client{background:#FCF2DE;color:var(--amber-600);}
.pill.neuf{background:#EAF6E2;color:var(--green-700);}
.pill.off{background:#FBEBEA;color:#98322A;}

/* ---------- Filtres ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:22px;}
.filters .field{min-width:150px;}
.filters .field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}

/* ---------- Compteurs ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-bottom:24px;}
.stat-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);}
.stat-box .v{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--navy-900);line-height:1;margin-bottom:5px;}
.stat-box .l{font-size:12.5px;color:var(--ink-soft);}

.empty{text-align:center;padding:56px 24px;color:var(--ink-soft);}
.empty .big{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--navy-900);margin-bottom:8px;}

/* =========================================================================
   CONNEXION, MOT DE PASSE OUBLIÉ, RÉINITIALISATION
   ========================================================================= */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;}
.login-side{
  background:radial-gradient(760px 420px at 80% 10%, rgba(231,169,60,.18), transparent 60%),
             linear-gradient(155deg,#0A3760,#0F5A9E);
  color:#C3D5E6;padding:60px 56px;display:flex;flex-direction:column;justify-content:center;
}
.login-side .brand-icon{width:56px;height:56px;background:#fff;border-radius:10px;padding:4px;}
.login-side h1{color:#fff;font-size:34px;line-height:1.16;}
.login-side .lead{color:#C3D5E6;}
.login-side ul{margin-top:26px;}
.login-side li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14.6px;color:#DCE7F1;}
.login-side svg{color:var(--amber-500);flex:none;margin-top:4px;}
.login-side a{text-decoration:underline;text-underline-offset:3px;}

.login-form{display:flex;align-items:center;justify-content:center;padding:60px 40px;background:var(--paper);}
.login-card{width:100%;max-width:400px;}
.login-card h2{font-size:25px;}
.login-card .field{margin-bottom:16px;}
.login-card a{color:var(--green-700);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* =========================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ========================================================================= */
@media (max-width:960px){
  .login-wrap{grid-template-columns:1fr;}
  .login-side{padding:44px 28px;}
  .login-form{padding:44px 24px;}
}
@media (max-width:820px){
  .portal-head .container{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;gap:12px;}
  .portal-nav{margin-left:0;width:100%;order:3;gap:2px;}
  .portal-nav a{padding:7px 11px;font-size:13px;}
  .portal-user{padding-left:0;border-left:0;margin-left:auto;}
  .portal-foot .container{flex-direction:column;gap:8px;}
  table.tbl th,table.tbl td{padding-left:16px;padding-right:16px;}
  .panel{padding:22px 18px;}
  .panel-flush > h2{padding:20px 18px 0;}
  .panel-flush > .sub{padding:0 18px;}
  .portal-title h1{font-size:24px;}
}
@media (max-width:560px){
  .login-side h1{font-size:27px;}
  table.tbl{font-size:13.4px;}
}