/* ==========================================================================
   NA AUTO SERVICE — assets/css/espace-client.css
   Styles partagés par connexion.php, inscription.php et mon-compte.php
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* ============================================================================
   CONNEXION.PHP / INSCRIPTION.PHP — préfixe "auth-"
   ============================================================================ */

.auth-split{
  display:grid; grid-template-columns: 1fr 1fr; min-height: 560px;
  border-radius: var(--nc-radius-lg); overflow:hidden; box-shadow: var(--nc-shadow-lg);
}
.auth-panel{
  background: linear-gradient(160deg, rgba(28,29,36,.93) 0%, rgba(28,29,36,.82) 100%), var(--auth-img, none) center/cover no-repeat, var(--nc-ink);
  color:#fff; padding: 3rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.auth-panel::before{
  content:""; position:absolute; top:-100px; right:-100px; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(247,195,49,.25), transparent 70%);
}
.auth-panel h2{ color:#fff; position:relative; z-index:2; }
.auth-panel p{ color: rgba(255,255,255,.65); position:relative; z-index:2; }
.auth-benefits{ position:relative; z-index:2; margin-top:1.6rem; }
.auth-benefits li{ display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem; }
.auth-benefits i{ width:38px; height:38px; border-radius:10px; background: rgba(247,195,49,.15); color: var(--nc-sun); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-benefits strong{ display:block; font-size: var(--nc-fs-sm); color:#fff; }
.auth-benefits span{ font-size: var(--nc-fs-xs); color: rgba(255,255,255,.55); }

.auth-form-panel{ background:#fff; padding: 3rem; display:flex; flex-direction:column; justify-content:center; }
.auth-form-panel h3{ margin-bottom:.4rem; }
.auth-form-panel .nc-lead{ margin-bottom:1.8rem; }
.auth-switch{ text-align:center; margin-top:1.6rem; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); }
.auth-switch a{ color: var(--nc-coral); font-weight:600; }
.auth-forgot{ text-align:right; margin-top:-.8rem; margin-bottom:1.4rem; }
.auth-forgot a{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }
.auth-forgot a:hover{ color: var(--nc-blue); }

.auth-remember{ display:flex; align-items:center; gap:.6rem; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); margin-bottom:1.4rem; }
.auth-remember input{ accent-color: var(--nc-blue); width:16px; height:16px; }

.auth-alert{
  padding: .9rem 1.1rem; border-radius: var(--nc-radius-sm); font-size: var(--nc-fs-sm);
  margin-bottom: 1.4rem; display:flex; align-items:center; gap:.7rem;
}
.auth-alert.is-error{ background: var(--nc-red-light); color: var(--nc-red-dark); }
.auth-alert.is-success{ background: var(--nc-green-light); color: var(--nc-green-dark); }

@media(max-width:767px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-panel{ padding: 2.4rem; }
  .auth-form-panel{ padding: 2.4rem; }
}

/* ============================================================================
   MON-COMPTE.PHP — préfixe "acc-"
   ============================================================================ */

.acc-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 2.4rem; align-items:start; }
@media(max-width:848px){ .acc-layout{ grid-template-columns:1fr; } }

.acc-sidebar{ background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius-lg); padding: 1.6rem; position:sticky; top:100px; }
.acc-profile-mini{ display:flex; align-items:center; gap:1rem; padding-bottom:1.4rem; margin-bottom:1.2rem; border-bottom:1px solid var(--nc-gray-300); }
.acc-avatar{ width:52px; height:52px; border-radius:50%; background: var(--nc-blue-light); color: var(--nc-blue); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem; flex-shrink:0; }
.acc-profile-mini h6{ margin-bottom:.1rem; font-size: var(--nc-fs-sm); }
.acc-profile-mini span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }

.acc-nav a{
  display:flex; align-items:center; gap:.8rem; padding: .85rem .9rem; border-radius: var(--nc-radius-sm);
  font-size: var(--nc-fs-sm); font-weight:700; color: var(--nc-gray-700); margin-bottom:.3rem;
  transition: all var(--nc-transition);
}
.acc-nav a i{ width:18px; color: var(--nc-gray-500); }
.acc-nav a:hover{ background: var(--nc-gray-100); }
.acc-nav a.is-active{ background: var(--nc-blue-light); color: var(--nc-blue); }
.acc-nav a.is-active i{ color: var(--nc-blue); }
.acc-nav a.is-logout{ color: var(--nc-red); margin-top:.6rem; padding-top:1rem; border-top:1px solid var(--nc-gray-300); }
.acc-nav a.is-logout i{ color: var(--nc-red); }

.acc-content{ background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius-lg); padding: 2.2rem; }
.acc-content h3{ margin-bottom:.3rem; }

.acc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
@media(max-width:575px){ .acc-stats{ grid-template-columns:1fr; } }
.acc-stat-mini{ background: var(--nc-gray-100); border-radius: var(--nc-radius); padding:1.2rem; text-align:center; }
.acc-stat-mini strong{ display:block; font-size: var(--nc-fs-xl); color: var(--nc-blue); }
.acc-stat-mini span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-transform:uppercase; letter-spacing:.4px; }

.acc-orders-table{ width:100%; border-collapse:collapse; }
.acc-orders-table th{ text-align:left; font-size: var(--nc-fs-xs); text-transform:uppercase; letter-spacing:.5px; color: var(--nc-gray-500); padding: .8rem .6rem; border-bottom: 2px solid var(--nc-gray-300); }
.acc-orders-table td{ padding: 1rem .6rem; border-bottom: 1px solid var(--nc-gray-300); font-size: var(--nc-fs-sm); }

.acc-empty{ text-align:center; padding: 3rem 1.5rem; }
.acc-empty i{ font-size:2.2rem; color: var(--nc-gray-300); margin-bottom:1rem; display:block; }.auth-panel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background: linear-gradient(90deg, var(--nc-sun) 0 55%, transparent 55% 70%, var(--nc-coral) 70%); }
@media(max-width:767px){ .auth-split{ grid-template-columns:1fr; } .auth-panel, .auth-form-panel{ padding:2rem 1.5rem; } }