/* =========================================================================
   ATLANTIS STRENGTH, Espace client (compte / connexion / soumissions /
   commande rapide / mon projet). Prototype: all forms/actions are fake, EXCEPT
   /my-project/ and /quick-order/, dont la liste est reelle (localStorage,
   voir main.js et commande-rapide.js).
   Reuses tokens.css + styles.css + industries.css (.crumbs/.ihero) +
   adn.css (.apply* form fields, .jobside). No page JS, except the two
   files above.
   ========================================================================= */

/* ------------------------- Hero fin, pages-outils -----------------------
   Le hero d'industries.css est un hero de page vitrine : 62vh de photo, un
   titre de 84 px. Sur une page qui EST un outil, cette hauteur repousse la
   barre de saisie et la table sous la ligne de flottaison, et il faut
   defiler avant de pouvoir travailler. .ihero--slim retire le min-height et
   resserre l'interieur ; le decor photo, le voile et l'arrivee animee
   restent ceux d'industries.css.
   ---------------------------------------------------------------------- */
.ihero--slim{ min-height:0; }
.ihero--slim .ihero__inner{ padding-block:clamp(30px,3.4vw,48px); }
.ihero--slim .ihero__title{ font-size:clamp(30px,3.4vw,52px); margin-bottom:14px; max-width:22ch; }
.ihero--slim .ihero__lede{ font-size:clamp(15px,1.15vw,17px); max-width:62ch; margin-bottom:22px; }
.ihero--slim .ihero__actions{ align-items:center; gap:14px 22px; }
/* --_pad est le crochet prevu par .btn (styles.css) pour retailler un bouton
   sans redeclarer son padding. */
.ihero--slim .ihero__actions .btn{ --_pad:12px 20px; font-size:12px; }
.ihero__hint{ margin:0; font-size:13px; line-height:1.5; color:var(--atl-ink-200); max-width:44ch; }

/* ------------------------------ Auth card ------------------------------- */
.auth{ background:var(--atl-ink-1000); padding-block:clamp(48px,7vw,96px); border-top:1px solid var(--atl-ink-800); }
.authcard{ max-width:460px; margin:0 auto; background:var(--atl-ink-900);
  border:1px solid var(--atl-ink-700); border-top:2px solid var(--accent); padding:clamp(28px,4vw,44px); }
.authcard__head{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(22px,2.4vw,30px); line-height:1; letter-spacing:var(--track-tight); margin:0 0 8px; }
.authcard__sub{ font-size:14px; line-height:1.6; color:var(--atl-ink-300); margin:0 0 26px; }
.authcard .apply__form{ grid-template-columns:1fr; max-width:none; }
.auth__row{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.auth__check{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--atl-ink-300); }
.auth__check input{ width:16px; height:16px; accent-color:var(--accent); }
.auth__link{ font-size:13px; color:var(--atl-ink-300); transition:color var(--dur-quick) var(--ease-out); }
.auth__link:hover{ color:#fff; }
.auth__alt{ margin-top:24px; padding-top:22px; border-top:1px solid var(--atl-ink-700); text-align:center; }
.auth__alt p{ font-size:13.5px; color:var(--atl-ink-400); margin:0 0 14px; }

/* ------------------------ Account dashboard shell ----------------------- */
.acct{ background:var(--atl-ink-1000); padding-block:clamp(48px,6vw,88px); border-top:1px solid var(--atl-ink-800); }
.acct__welcome{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; }
.acct__meta{ display:flex; flex-wrap:wrap; gap:10px; }
.acct__chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); color:var(--atl-ink-200);
  font-size:12.5px; letter-spacing:.02em; }
.acct__chip svg{ color:var(--accent); flex:none; }

/* shortcut cards (reuse a features-like grid) */
/* Cinq raccourcis depuis que "Mon projet" a rejoint la rangee. A 1320 px de
   conteneur, cinq cartes de ~222 px tiennent ; en dessous on retombe a trois
   puis deux, avant les paliers deja prevus plus bas. */
.shortcuts{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.scard{ display:flex; flex-direction:column; gap:12px; padding:24px 22px; min-width:0;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.scard:hover{ border-color:var(--accent); transform:translateY(-3px); }
.scard__icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--accent); border-radius:50%; color:var(--accent); }
.scard__title{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:uppercase; color:#fff; line-height:1.15; letter-spacing:.01em; }
.scard__text{ font-size:13px; line-height:1.5; color:var(--atl-ink-300); margin:0; }
.scard__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px;
  font-family:var(--font-sans); font-weight:700; font-size:11.5px; letter-spacing:var(--track-wide); text-transform:uppercase; color:#fff; }
.scard__cta svg{ transition:transform var(--dur-base) var(--ease-out); }
.scard:hover .scard__cta svg{ transform:translateX(4px); }

/* recent activity list */
.activity{ background:#000; padding-block:clamp(48px,6vw,88px); border-top:1px solid var(--atl-ink-800); }
.activity__list{ border-top:1px solid var(--atl-ink-700); max-width:960px; }
.activity__row{ display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:center;
  padding:16px 4px; border-bottom:1px solid var(--atl-ink-700); }
.activity__date{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--atl-ink-400); }
.activity__label{ font-size:14.5px; color:var(--atl-ink-100); }

/* ------------------------------ Data table ------------------------------ */
.datatable-wrap{ overflow-x:auto; border:1px solid var(--atl-ink-700); }
.datatable{ width:100%; border-collapse:collapse; min-width:720px; }
.datatable th{ text-align:left; font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--atl-ink-400); padding:14px 16px; background:var(--atl-ink-900);
  border-bottom:1px solid var(--atl-ink-700); white-space:nowrap; }
.datatable td{ padding:15px 16px; border-bottom:1px solid var(--atl-ink-800); font-size:14px; color:var(--atl-ink-100); vertical-align:middle;
  transition:background var(--dur-quick) var(--ease-out); }
.datatable tr:last-child td{ border-bottom:0; }
.datatable tr:hover td{ background:var(--atl-ink-900); }
/* Red left indicator on the hovered row (box-shadow = paint only, no reflow). */
.datatable tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--accent); }
.datatable__num{ font-family:var(--font-mono); font-size:12.5px; color:#fff; letter-spacing:.03em; }
.datatable__amount{ font-family:var(--font-mono); font-size:13px; color:#fff; white-space:nowrap; }
.datatable__actions{ display:inline-flex; gap:14px; white-space:nowrap; }
.datatable__actions a{ font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--atl-ink-300); transition:color var(--dur-quick) var(--ease-out); }
.datatable__actions a:hover{ color:var(--accent); }
/* Le stepper de quantite de /my-project/ (.citem__qty) reutilise tel quel dans
   une cellule de tableau : son margin-top est pense pour suivre un nom de
   carte, pas pour une ligne deja centree verticalement (.datatable td). */
.datatable .citem__qty{ margin-top:0; }

/* status badges */
.badge{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent; }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; }
.badge--open{ color:#e8b23a; border-color:rgba(232,178,58,.4); } .badge--open::before{ background:#e8b23a; }
.badge--approved{ color:#57b872; border-color:rgba(87,184,114,.4); } .badge--approved::before{ background:#57b872; }
.badge--expired{ color:var(--atl-ink-400); border-color:var(--atl-ink-600); } .badge--expired::before{ background:var(--atl-ink-500); }

/* ------------------------- Quick order / Cart -------------------------- */
.qorder{ background:var(--atl-ink-1000); padding-block:clamp(48px,6vw,88px); border-top:1px solid var(--atl-ink-800); }
.qorder__bar{ display:flex; gap:12px; flex-wrap:wrap; max-width:820px; margin:0 0 28px; }
.qorder__input{ flex:1 1 260px; min-width:0; height:52px; padding:0 18px; background:var(--surface-2);
  border:1px solid var(--rule-2); color:var(--fg); font-family:var(--font-sans); font-size:14px; outline:none;
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out),
             box-shadow var(--dur-quick) var(--ease-out); }
.qorder__input:focus{ border-color:var(--accent); background:var(--atl-ink-800); box-shadow:0 0 0 3px rgba(194,32,50,.16); }
.qorder__input::placeholder{ color:var(--fg-4); }

/* Reponse de l'ajout rapide : aucune correspondance, ou plusieurs. */
.qorder__feedback{ max-width:820px; margin:-12px 0 28px; padding:16px 18px;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); border-left:2px solid var(--accent); }
.qorder__feedback p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--atl-ink-200); }
.qorder__suggest{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.qorder__suggest button{ display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
  background:var(--atl-ink-800); border:1px solid var(--atl-ink-700); padding:9px 12px; cursor:pointer;
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); }
.qorder__suggest button:hover, .qorder__suggest button:focus-visible{ border-color:var(--accent); background:var(--atl-ink-700); }
.qorder__suggest-code{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--accent); flex:none; }
.qorder__suggest-name{ font-size:13px; color:var(--atl-ink-100); }

/* cart line items */
.cart{ display:grid; grid-template-columns:1.6fr 340px; gap:clamp(28px,4vw,56px); align-items:start; }
.cart__items{ min-width:0; border-top:1px solid var(--atl-ink-700); }
.citem{ display:grid; grid-template-columns:96px 1fr auto; gap:18px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--atl-ink-700); }
/* minmax(0,1fr) rend la rangee definie, sinon « max-height:100% » vaut auto et
   un rendu portrait sort de la vignette. Explication complete sur .icard__media,
   dans styles.css. */
.citem__media{ width:96px; height:96px; background:radial-gradient(80% 90% at 50% 40%, #eceef0 0%, #cfd2d7 100%);
  display:grid; place-items:center; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  padding:10px; overflow:hidden; }
.citem__media img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.citem__name{ font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; color:#fff; line-height:1.15; }
.citem__model{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.05em; margin-top:4px; display:block; }
.citem__qty{ display:inline-flex; align-items:center; gap:0; margin-top:10px; border:1px solid var(--atl-ink-700); width:max-content; }
.citem__qty span{ width:34px; height:32px; display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; color:#fff; }
.citem__qty button{ width:32px; height:32px; background:none; border:0; color:var(--atl-ink-300); font-size:16px; line-height:1; }
.citem__qty button:hover{ color:#fff; }
.citem__right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.citem__price{ font-family:var(--font-mono); font-size:14px; color:#fff; }
.citem__remove{ font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--atl-ink-400); background:none; border:0; padding:0; cursor:pointer;
  transition:color var(--dur-quick) var(--ease-out); }
.citem__remove:hover{ color:var(--accent); }

.summary{ position:sticky; top:calc(var(--nav-h) + 74px); background:var(--atl-ink-900);
  border:1px solid var(--atl-ink-700); border-top:2px solid var(--accent); padding:28px 26px; }
.summary__head{ font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:.02em; margin:0 0 18px; }
.summary__row{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--atl-ink-700); font-size:13.5px; color:var(--atl-ink-200); }
.summary__row span:last-child{ font-family:var(--font-mono); color:#fff; }
.summary__total{ display:flex; justify-content:space-between; gap:14px; padding:16px 0 4px; font-family:var(--font-display);
  font-weight:700; font-size:18px; text-transform:uppercase; color:#fff; }
.summary__note{ font-size:12px; line-height:1.5; color:var(--atl-ink-400); margin:8px 0 20px; }
.summary .btn{ width:100%; }
.summary .btn + .btn{ margin-top:10px; }

/* ------------------------------- Motion --------------------------------- */
/* Above-the-fold client-space cards enter with a quiet fade at LOAD; the cart
   line items cascade. transform doesn't disturb .summary's position:sticky.
   Under html.motion only; no-JS / reduced-motion keep everything visible. */
@keyframes acctCardIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
html.motion .authcard{ animation:acctCardIn var(--dur-slow) var(--ease-out) 80ms both; }
html.motion .summary{ animation:acctCardIn var(--dur-slow) var(--ease-out) 120ms both; }
html.motion .citem{ animation:acctCardIn var(--dur-slow) var(--ease-out) both; }
html.motion .citem:nth-child(2){ animation-delay:70ms; }
html.motion .citem:nth-child(3){ animation-delay:140ms; }
html.motion .citem:nth-child(4){ animation-delay:210ms; }
html.motion .citem:nth-child(5){ animation-delay:280ms; }
/* La liste de /my-project/ est reconstruite a chaque +/-. Le JS pose
   .is-settled apres le premier rendu : l'arrivee joue une fois, pas a
   chaque clic. */
html.motion .cart__items.is-settled .citem{ animation:none; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:1240px){
  .shortcuts{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1080px){
  .shortcuts{ grid-template-columns:repeat(2,1fr); }
  .cart{ grid-template-columns:1fr; }
  .summary{ position:static; }
}
@media (max-width:620px){
  .shortcuts{ grid-template-columns:1fr; }
  .activity__row{ grid-template-columns:1fr; gap:4px; }
  .citem{ grid-template-columns:70px 1fr; }
  .citem__media{ width:70px; height:70px; }
  .citem__right{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
  .qorder__bar .btn{ width:100%; }
}

/* ------------------------------- Reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce){
  html.motion .authcard,
  html.motion .summary,
  html.motion .citem{ animation:none !important; }
  .scard, .scard:hover{ transition:none !important; transform:none !important; }
  .scard__cta svg, .scard:hover .scard__cta svg{ transition:none !important; transform:none !important; }
  .datatable td{ transition:none !important; }
  .qorder__input{ transition:none !important; }
}


/* =========================================================================
   MON PROJET, /my-project/
   Deux etats exclusifs, .pjempty et .cart, plus le rappel du deroulement.
   ========================================================================= */

/* ---- Etat vide. C'est aussi l'etat sans JS, donc il doit se suffire. ---- */
.pjempty{
  max-width:620px; margin:0 auto; padding:clamp(36px,6vw,72px) 0; text-align:center;
  color:var(--atl-ink-300);
}
.pjempty > svg{ color:var(--atl-ink-600); }
.pjempty__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(24px,3vw,36px); line-height:1; letter-spacing:var(--track-tight); margin:20px 0 12px;
}
.pjempty__lede{ font-size:15px; line-height:1.65; margin:0 auto 28px; max-width:46ch; }
.pjempty__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pjempty__alt{ margin:26px 0 0; font-size:13px; color:var(--atl-ink-400); }
.pjempty__alt a{ color:#fff; border-bottom:1px solid var(--accent); padding-bottom:2px; }
.pjempty__alt a:hover{ color:var(--accent); }

/* ---- Vider la liste. Une action destructrice ne se deguise pas en bouton
        principal : elle reste un lien de bas de carte, confirme par le JS. -- */
.summary__clear{
  display:block; width:100%; margin-top:16px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--atl-ink-400);
  transition:color var(--dur-quick) var(--ease-out);
}
.summary__clear:hover{ color:var(--accent); }

/* ---- Le deroulement en trois temps. ------------------------------------ */
.pjsteps{ background:var(--atl-ink-900); padding-block:clamp(48px,7vw,90px); border-top:1px solid var(--atl-ink-800); }
.pjsteps__title{ text-align:center; color:#fff; margin:0 0 clamp(28px,4vw,48px); }
.pjsteps__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);
}
.pjstep{ border-top:2px solid var(--accent); padding-top:20px; }
.pjstep__num{
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:700;
  letter-spacing:.12em; color:var(--accent); margin-bottom:12px;
}
.pjstep__title{
  font-family:var(--font-display); font-weight:700; font-size:18px; text-transform:uppercase;
  color:#fff; letter-spacing:.01em; margin:0 0 10px; line-height:1.1;
}
.pjstep__body{ font-size:14px; line-height:1.65; color:var(--atl-ink-300); margin:0; }

@media (max-width:860px){
  .pjsteps__list{ grid-template-columns:1fr; gap:24px; }
}