/**
 * Fichier : /assets/css/account.css
 * Rôle    : Styles dédiés aux pages account, auth, cart, checkout
 *           Typographie agrandie, textes blancs, flags CDN, design pro
 */

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE GLOBALE — textes plus grands, blancs sur noir
══════════════════════════════════════════════════════════ */
body { font-size: 16px; }

p  { font-size: 15px; line-height: 1.75; color: #d0d0d0; }
li { font-size: 15px; color: #d0d0d0; }

.section-head p:not(.eyebrow),
.performance-copy > p:not(.eyebrow),
.about-copy > p:not(.eyebrow),
.hero-text { color: #d8d8d8; font-size: 16px; }

/* Titres h2 plus grands */
.section-head h2,
.performance h2,
.about h2,
.banner h2 { font-size: clamp(42px, 4.5vw, 68px); }

/* Sous-titres h3 */
h3 { font-size: 20px; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGE
══════════════════════════════════════════════════════════ */
.auth-page { min-height: 100vh; background: #060809; position: relative; overflow: hidden; padding: 50px 0 80px; }

/* Particules fond */
.auth-bg-animation { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.auth-particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,11,11,.2), transparent 70%);
  animation: authFloat linear infinite;
}
.auth-particle:nth-child(1){width:280px;height:280px;left:-5%;top:10%;animation-duration:18s}
.auth-particle:nth-child(2){width:180px;height:180px;left:80%;top:5%;animation-duration:22s;animation-delay:3s}
.auth-particle:nth-child(3){width:360px;height:360px;left:40%;top:55%;animation-duration:15s;animation-delay:6s}
.auth-particle:nth-child(4){width:140px;height:140px;left:20%;top:70%;animation-duration:20s;animation-delay:1s}
.auth-particle:nth-child(5){width:220px;height:220px;left:65%;top:30%;animation-duration:25s;animation-delay:4s}
.auth-particle:nth-child(6){width:160px;height:160px;left:5%;top:50%;animation-duration:17s;animation-delay:7s}
.auth-particle:nth-child(7){width:300px;height:300px;left:70%;top:65%;animation-duration:21s;animation-delay:2s}
.auth-particle:nth-child(8){width:110px;height:110px;left:50%;top:5%;animation-duration:19s;animation-delay:5s}
@keyframes authFloat {
  0%   { transform:translate(0,0) scale(1); opacity:0 }
  20%  { opacity:.35 }
  80%  { opacity:.15 }
  100% { transform:translate(20px,-50px) scale(1.1); opacity:0 }
}

/* Hero auth */
.auth-hero {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 40px; padding: 28px 0;
}
.auth-hero-icon { font-size: 52px; flex: none; animation: bounceIn .6s ease both; }
@keyframes bounceIn { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.auth-hero h1 { font-family:Oswald; font-style:italic; font-size:clamp(28px,3.5vw,48px); margin:6px 0 4px; line-height:1 }
.auth-hero h1 span { color: var(--red) }
.auth-hero p { font-size:15px; color:#888; margin:0 }

/* Layout */
.auth-main { max-width: 600px; }

/* Card pro */
.auth-card-pro {
  background: linear-gradient(145deg,#111416 0%,#0d1014 100%);
  border: 1px solid #25282b; padding: 44px;
  position: relative; overflow: hidden;
  animation: cardFadeUp .5s ease both;
}
@keyframes cardFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.auth-card-pro::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--red) 0%,#ff6060 50%,var(--red) 100%);
  background-size:200%; animation:shimLine 3s linear infinite;
}
@keyframes shimLine { from{background-position:200%} to{background-position:-200%} }

.auth-card-badge {
  display:inline-block; background:var(--red); color:#fff;
  font-size:10px; font-weight:900; letter-spacing:1.5px;
  padding:5px 14px; margin-bottom:16px;
}
.auth-card-badge--green { background:#16a34a; }

.auth-card-pro h2 { font-family:Oswald; font-style:italic; font-size:30px; margin:0 0 4px; color:#fff; }
.auth-card-sub { color:#888; font-size:14px; margin:0 0 28px; }

/* Formulaire grille register */
.auth-form { display:grid; gap:16px; }
.auth-form--grid { grid-template-columns:1fr 1fr; }
.auth-field--full { grid-column:1/-1; }

/* Champ */
.auth-field {
  position:relative; display:flex; align-items:center;
  background:#0a0c0e; border:1.5px solid #2a2d32;
  transition:border-color .25s, box-shadow .25s;
}
.auth-field:focus-within {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(239,11,11,.1);
}
.auth-field-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:15px; z-index:2; pointer-events:none; user-select:none;
}
.auth-field input, .auth-field textarea {
  width:100%; background:transparent; border:0;
  color:#fff; padding:17px 44px 17px 44px;
  font:inherit; font-size:15px; outline:none;
}
.auth-field input::placeholder { color:#3a3d42; }
.auth-field label {
  position:absolute; right:50px; top:50%; transform:translateY(-50%);
  font-size:11px; color:#444; font-weight:700; letter-spacing:.6px;
  pointer-events:none; white-space:nowrap; transition:opacity .2s;
}
.auth-field input:focus ~ label,
.auth-field input:not(:placeholder-shown) ~ label { opacity:0; }

/* Toggle password — SVG eye */
.toggle-pass {
  position:absolute; right:12px; background:none; border:0;
  color:#444; cursor:pointer; padding:6px; z-index:3;
  display:flex; align-items:center; transition:color .2s;
}
.toggle-pass:hover { color:var(--red); }

/* Options */
.auth-options { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.auth-check { display:flex; align-items:center; gap:8px; color:#aaa; cursor:pointer; font-size:13px; }
.auth-check input[type=checkbox] { accent-color:var(--red); width:15px; height:15px; }
.auth-check a { color:var(--red); }
.auth-forgot { color:#666; font-size:12px; transition:color .2s; }
.auth-forgot:hover { color:var(--red); }

/* Submit */
.btn-auth-submit {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:54px;
  background:linear-gradient(135deg,var(--red) 0%,#c00 100%);
  color:#fff; border:0; cursor:pointer; font:inherit;
  font-size:14px; font-weight:900; letter-spacing:1.2px;
  position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s;
}
.btn-auth-submit::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.12) 50%,transparent 80%);
  transform:translateX(-100%); transition:transform .5s;
}
.btn-auth-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(239,11,11,.35); }
.btn-auth-submit:hover::after { transform:translateX(100%); }

/* Alt button (switch to register) */
.btn-auth-alt {
  width:100%; height:48px; background:transparent;
  border:1.5px solid #2a2d32; color:#aaa; cursor:pointer;
  font:inherit; font-size:13px; font-weight:800; letter-spacing:.8px;
  transition:border-color .2s,color .2s,background .2s;
}
.btn-auth-alt:hover { border-color:var(--red); color:#fff; background:rgba(239,11,11,.06); }

/* Back button */
.auth-back-btn {
  background:none; border:0; color:#666; cursor:pointer; font:inherit;
  font-size:13px; margin-bottom:20px; padding:0; transition:color .2s;
  display:flex; align-items:center; gap:6px;
}
.auth-back-btn:hover { color:var(--red); }

/* Divider */
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:#1e2124; }
.auth-divider span { font-size:10px; font-weight:800; letter-spacing:1.2px; color:#333; }

/* Alerts */
.auth-alert { padding:14px 18px; margin-bottom:18px; }
.auth-alert--error { background:#1a0505; border:1.5px solid #5a1515; }
.auth-alert--error p { color:#ff8080; font-size:14px; margin:4px 0; }
.auth-alert--success { background:#071a0a; border:1.5px solid #1a5c2a; }
.auth-alert--success p { color:#6ee787; font-size:14px; }

/* Trust strip */
.auth-trust-strip {
  display:flex; gap:16px; flex-wrap:wrap; margin-top:20px;
  padding-top:18px; border-top:1px solid #1e2124;
  justify-content:center;
}
.auth-trust-strip span { font-size:12px; color:#555; font-weight:600; }

/* Benefits register */
.register-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.benefit-item { display:flex; align-items:flex-start; gap:10px; padding:12px; background:#0a0c0e; border:1px solid #1e2124; }
.benefit-item > span { font-size:20px; flex:none; line-height:1; }
.benefit-item b { display:block; font-size:11px; font-weight:800; color:#fff; margin-bottom:3px; }
.benefit-item small { color:#666; font-size:10px; line-height:1.4; }

/* Strength */
.password-strength { display:flex; align-items:center; gap:12px; padding:2px 0; }
.strength-track { flex:1; height:5px; background:#1e2124; border-radius:3px; overflow:hidden; }
.strength-fill { height:100%; width:0; border-radius:3px; transition:width .4s,background .4s; }
.strength-label { font-size:10px; color:#555; font-weight:700; letter-spacing:.5px; min-width:80px; }

/* ══════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD
══════════════════════════════════════════════════════════ */
.account-page { background:#060809; min-height:100vh; }
.account-hero {
  background:linear-gradient(135deg,#080a0d 0%,#110707 50%,#080a0d 100%);
  padding:44px 0; border-bottom:1px solid #1a1d20; position:relative; overflow:hidden;
}
.account-hero::before {
  content:''; position:absolute; left:-100px; top:-100px; width:400px; height:400px;
  background:radial-gradient(circle,rgba(239,11,11,.07),transparent 70%); pointer-events:none;
}
.account-hero-inner { display:flex; align-items:center; gap:24px; flex-wrap:wrap; position:relative; z-index:1; }
.account-hero-avatar {
  width:66px; height:66px; border-radius:50%; background:var(--red);
  display:grid; place-items:center; font-size:20px; font-weight:900; flex:none;
  box-shadow:0 0 0 4px rgba(239,11,11,.2), 0 0 0 8px rgba(239,11,11,.05);
  animation:avatarPop .6s cubic-bezier(.34,1.56,.64,1) both .1s;
}
@keyframes avatarPop { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:none;opacity:1} }
.account-hero-info { flex:1; min-width:0; }
.account-hero-info .eyebrow { margin:0 0 4px; }
.account-hero-info h1 { font-family:Oswald; font-style:italic; font-size:clamp(26px,3vw,38px); margin:0 0 4px; color:#fff; }
.account-hero-info h1 span { color:var(--red); }
.account-hero-info > p { color:#666; font-size:14px; margin:0; }
.account-hero-stats { display:flex; gap:0; margin-left:auto; flex-wrap:wrap; }
.ahstat { text-align:center; padding:12px 22px; border-left:1px solid #1e2124; }
.ahstat b { display:block; font-family:Oswald; font-size:22px; color:var(--red); }
.ahstat span { font-size:11px; color:#555; letter-spacing:.7px; text-transform:uppercase; }

.account-body { padding:36px 0 80px; }
.account-layout { display:grid; grid-template-columns:250px 1fr; gap:28px; align-items:start; }

/* Sidebar */
.account-sidebar { position:sticky; top:88px; }
.account-nav { background:#111416; border:1px solid #1e2124; overflow:hidden; }
.anav-item {
  display:flex; align-items:center; gap:12px; padding:15px 18px;
  font-size:13px; font-weight:700; letter-spacing:.3px; color:#888;
  border-bottom:1px solid #181b1e; position:relative;
  transition:background .2s,color .2s;
}
.anav-item:last-child { border-bottom:0; }
.anav-item:hover { background:rgba(255,255,255,.04); color:#d0d0d0; }
.anav-item.is-active { color:#fff; background:rgba(239,11,11,.07); }
.anav-item.is-active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); }
.anav-icon { font-size:17px; flex:none; }
.anav-label { flex:1; }
.anav-badge { background:var(--red); color:#fff; font-size:9px; padding:2px 7px; border-radius:10px; font-weight:900; }
.anav-divider { height:1px; background:#1e2124; margin:4px 0; }
.anav-item--danger { color:#ef4444 !important; }
.anav-item--danger:hover { background:rgba(239,68,68,.06) !important; }

.sidebar-cart-hint {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:#0e1113; border:1px solid #1e2124; border-top:0; font-size:13px;
}
.sidebar-cart-hint > span { font-size:22px; }
.sidebar-cart-hint b { display:block; color:#fff; font-size:13px; margin-bottom:2px; }
.sidebar-cart-hint a { color:var(--red); font-size:12px; }

/* Cards */
.acard { background:#111416; border:1px solid #1e2124; margin-bottom:20px; overflow:hidden; }
.acard-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #1a1d20; }
.acard-head h3 { margin:0; font-family:Oswald; font-size:18px; font-style:italic; color:#fff; }
.acard-link { font-size:12px; color:var(--red); font-weight:700; }
.acard-empty { text-align:center; padding:60px 20px; }
.acard-empty > span { font-size:50px; display:block; margin-bottom:16px; }
.acard-empty p { color:#888; margin-bottom:24px; font-size:15px; }
.acard-success { background:#071a0a; border:1.5px solid #1a5c2a; color:#6ee787; padding:14px 20px; margin-bottom:18px; font-size:14px; }

/* Quick dashboard */
.dashboard-quick { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#1e2124; }
.dquick-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 12px; background:#111416; transition:background .2s; }
.dquick-item:hover { background:#161a1e; }
.dquick-item > span { font-size:28px; }
.dquick-item b { font-family:Oswald; font-size:20px; color:#fff; }
.dquick-item small { font-size:11px; color:#666; letter-spacing:.4px; text-align:center; }

/* Orders list */
.orders-list { padding:6px 0; }
.order-row {
  display:grid; grid-template-columns:1.5fr auto 140px 30px;
  align-items:center; padding:16px 22px; border-bottom:1px solid #181b1e;
  transition:background .2s; gap:16px; color:inherit;
}
.order-row:hover { background:rgba(255,255,255,.03); }
.order-row:last-child { border-bottom:0; }
.or-num b { display:block; font-size:14px; color:#fff; }
.or-num small { color:#666; font-size:12px; }
.or-method { font-size:12px; color:#888; }
.or-amount { font-weight:800; font-size:15px; color:#fff; }
.or-arrow { color:var(--red); font-size:22px; font-weight:700; text-align:right; }

/* Order detail */
.order-detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#1e2124; }
.od-info { background:#111416; padding:18px 22px; }
.od-info small { display:block; font-size:9px; letter-spacing:1.2px; color:#555; margin-bottom:8px; }
.od-info b { font-size:14px; color:#fff; }
.od-total { font-family:Oswald; font-size:24px; color:var(--red); }
.bank-reminder { padding:18px 22px; background:#1a0f00; border-top:1px solid #3a2800; }
.bank-reminder h4 { color:#f59e0b; margin:0 0 8px; font-size:14px; }
.bank-reminder p { color:#d0c0a0; font-size:14px; margin:0; line-height:1.7; }

/* Profile form */
.profile-form { padding:22px; }
.profile-section-title { font-size:10px; letter-spacing:1.5px; color:#555; font-weight:800; margin:20px 0 14px; padding-bottom:8px; border-bottom:1px solid #1e2124; }
.pform-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Order table */
.order-table { width:100%; border-collapse:collapse; font-size:14px; }
.order-table th { text-align:left; font-size:10px; letter-spacing:1.2px; color:#666; padding:12px 22px; border-bottom:1px solid #1e2124; background:#0d0f10; }
.order-table td { padding:15px 22px; border-bottom:1px solid #181b1e; color:#d0d0d0; }
.order-table tr:hover td { background:rgba(255,255,255,.02); }

/* Status badges */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; font-size:10px; font-weight:800; letter-spacing:.7px; }
.status-pending    { background:#1a1000; color:#f59e0b; border:1px solid #3d2e00; }
.status-paid       { background:#071a0a; color:#22c55e; border:1px solid #14532d; }
.status-processing { background:#071020; color:#60a5fa; border:1px solid #1e3a5f; }
.status-shipped    { background:#130a20; color:#a78bfa; border:1px solid #3b1f6e; }
.status-delivered  { background:#071a10; color:#10b981; border:1px solid #064e3b; }
.status-cancelled  { background:#1a0707; color:#f87171; border:1px solid #7f1d1d; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .account-layout { grid-template-columns:1fr; }
  .account-sidebar { position:static; }
  .order-detail-grid { grid-template-columns:1fr 1fr; }
  .dashboard-quick { grid-template-columns:1fr 1fr; }
}
@media(max-width:780px) {
  .auth-card-pro { padding:28px 20px; }
  .auth-form--grid { grid-template-columns:1fr; }
  .auth-field--full { grid-column:1; }
  .register-benefits { grid-template-columns:1fr; }
  .auth-hero { gap:12px; }
  .auth-hero-icon { font-size:36px; }
  .account-hero-stats { width:100%; }
  .ahstat { padding:10px 14px; }
  .order-row { grid-template-columns:1fr auto 30px; }
  .or-method { display:none; }
  .order-detail-grid { grid-template-columns:1fr; }
  .pform-row { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .auth-card-pro { padding:22px 16px; }
  .auth-trust-strip { gap:10px; }
  .dashboard-quick { grid-template-columns:1fr 1fr; }
}