/* ============================================================
   CRÉNO — E21 « Mon Compte » (US21.3, le 3ᵉ onglet)
   Page autonome : s'appuie uniquement sur les tokens de creno-ds.css
   (v7/E21 — surfaces, --line, radius, motion, --tabbar-clearance).
   Pas d'import d'un autre écran (mes-crenos.css reste hors territoire) :
   les quelques classes partagées par convention (RGPD, modale) sont
   reprises ICI à l'identique, volontairement, pas importées.
   ============================================================ */

.acct-main{max-width:720px;margin:0 auto;padding:30px 22px var(--tabbar-clearance)}
.acct-main section{padding:0}

/* ---- Chargement ---- */
.acct-skel{height:78px;border-radius:var(--r-lg);background:linear-gradient(90deg,var(--paper-2) 25%,rgba(20,22,14,.04) 37%,var(--paper-2) 63%);background-size:400% 100%;animation:acctSkel 1.3s ease infinite;margin-bottom:12px}
@keyframes acctSkel{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.acct-skel{animation:none}}

/* ============================================================
   Tête identitaire (connecté) — Réno accueil + salutation + email.
   ============================================================ */
.acct-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.acct-reno{width:96px;height:96px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 16px rgba(20,22,14,.14))}
.acct-id{min-width:0}
.acct-id h1{font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,28px);letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.acct-id p{font-size:14px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere}

/* ============================================================
   Cartes à plat — zéro sous-menu, zéro tableau. Stagger d'entrée
   35ms/carte façon D23 (E14 : « cards vivantes »).
   ============================================================ */
.acct-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.acct-cards.acct-cards-solo{margin-top:30px}

.acard{
  display:flex;align-items:center;gap:14px;width:100%;
  background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--elev-card,var(--elev-1));
  text-decoration:none;color:inherit;text-align:left;
  font-family:var(--body);font-size:inherit;
  animation:acardIn var(--dur-slow) var(--ease-entrance) both;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
a.acard,button.acard{cursor:pointer}
a.acard:hover,button.acard:not(:disabled):hover{transform:translateY(-2px);box-shadow:var(--elev-pop,var(--elev-3))}
a.acard:active,button.acard:not(:disabled):active{transform:scale(var(--press-scale));transition-duration:var(--dur-instant)}
.acard:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@keyframes acardIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.acard{animation:none}}

.acct-cards .acard:nth-child(1){animation-delay:0ms}
.acct-cards .acard:nth-child(2){animation-delay:35ms}
.acct-cards .acard:nth-child(3){animation-delay:70ms}
.acct-cards .acard:nth-child(4){animation-delay:105ms}
.acct-cards .acard:nth-child(5){animation-delay:140ms}

.acard-ic{width:34px;height:34px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 7px rgba(20,22,14,.12))}
.acard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acard-body b{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.acard-body small{font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.acard-chev{flex:none;width:18px;height:18px;color:var(--ink-mute);transition:transform var(--dur-fast) var(--ease)}
a.acard:hover .acard-chev{transform:translateX(3px)}

.acard-row{cursor:default}
.acard-soon{opacity:.86}
.acard-badge{flex:none;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);padding:5px 10px;border-radius:var(--r-pill)}

/* ============================================================
   Zone RGPD (US4.10) — reprise à l'identique de mes-crenos.html :
   discrète, en bas, texte souligné plutôt qu'une carte.
   ============================================================ */
.danger-zone{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.danger-link{border:none;background:none;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink-mute);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:6px 10px;border-radius:8px;transition:color .16s ease}
.danger-link:hover{color:var(--danger)}
.danger-link:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
#delErr{margin:12px 0 0;font-size:13px;color:var(--danger);line-height:1.45}

/* ============================================================
   Déconnecté — Réno accueille, avantages, CTA. La carte Apparence
   (hors de ce bloc) reste dispo : le thème ne dépend pas d'une session.
   ============================================================ */
.acct-state{text-align:center;padding:36px 20px 8px;max-width:44ch;margin:0 auto}
.acct-state-reno{width:140px;height:140px;object-fit:contain;margin:0 auto 16px;filter:drop-shadow(0 10px 20px rgba(20,22,14,.14))}
.acct-state h1{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.acct-state>p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:22px}

.acct-perks{list-style:none;display:flex;flex-direction:column;gap:14px;text-align:left;margin-bottom:26px}
.aperk{display:flex;gap:12px;align-items:flex-start}
.aperk-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.aperk-ic svg{width:19px;height:19px}
.aperk-ic-lime{background:var(--lime-soft);color:var(--ink)}
.aperk-ic-violet{background:var(--violet-soft);color:var(--violet)}
.aperk-ic-ok{background:var(--ok-soft);color:var(--ok)}
.aperk-t{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.aperk-t b{display:block;font-family:var(--body);font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:1px}

/* ============================================================
   Pied de page — ligne discrète, aucun lien légal (aucune page
   légale n'existe encore, cf. check-links).
   ============================================================ */
.acct-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;color:var(--ink-mute)}

/* ============================================================
   Modale « Supprimer mon compte » — reprise à l'identique de
   mes-crenos.css (bloc .cx-scrim/.cx partagé par convention, pas
   par import : mes-crenos.css reste hors territoire de cette passe).
   ============================================================ */
.cx-scrim{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(20,22,14,.44);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s .28s}
.cx-scrim.open{opacity:1;visibility:visible;transition:opacity .28s var(--ease)}
.cx{width:min(400px,100%);background:var(--cloud);border-radius:var(--r-xl);box-shadow:var(--elev-4);padding:26px 26px 22px;text-align:center;
  transform:translateY(14px) scale(.97);transition:transform .3s var(--ease-spring,var(--ease))}
.cx-scrim.open .cx{transform:none}
.cx-reno{width:116px;height:116px;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 8px 16px rgba(20,22,14,.16))}
.cx h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:8px}
.cx-sub{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:18px}
.cx-actions{display:flex;flex-direction:column;gap:9px}
.cx-actions .btn{width:100%;justify-content:center}
.cx-confirm{background:none;border:1.5px solid var(--danger);color:var(--danger)}
.cx-confirm:hover{background:var(--danger);color:#fff}
@media(prefers-reduced-motion:reduce){.cx{transition:none}}

/* ---- Desktop : on garde une colonne, juste plus respirée ---- */
@media(min-width:720px){
  .acct-main{padding-top:48px}
  .acct-head{margin-bottom:34px}
}

/* ============================================================
   Desktop ≥900px (US23.4) — repère visuel CONTRACTUEL : mockup-
   desktop.html section C. Conteneur resserré ~1000px (page de
   réglages, pas un dashboard large) ; héros profil en carte élargie
   (Réno 84px, titre déjà à son plafond via le clamp() existant) ;
   réglages en grille 2 colonnes ; « Se déconnecter » et la zone RGPD
   restent pleine largeur, discrets, sous la grille. --page-max n'est
   pas encore posé côté design system → fallback 1200px, borné à
   1000px pour cette page précisément (pas un dashboard).
   ============================================================ */
@media(min-width:900px){
  .acct-main{max-width:min(1000px,var(--page-max,1200px));padding-left:32px;padding-right:32px}

  /* Héros : simple ligne sur le fond en mobile → vraie carte élevée en desktop */
  .acct-head{
    margin-bottom:22px;padding:26px 30px;
    background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--elev-card,var(--elev-1));
  }
  .acct-reno{width:84px;height:84px}

  /* Réglages : grille 2 colonnes (jamais pour la variante déconnectée solo, cf. :not()) */
  .acct-cards:not(.acct-cards-solo){display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .acct-cards .acard{padding:17px 18px}
  .acct-cards .acard-ic{width:36px;height:36px}
  .acct-cards .acard-btn{grid-column:1/-1}   /* « Se déconnecter » : pleine largeur sous la grille */

  /* Déconnecté : même soin, recentré dans le conteneur élargi (pas étiré à 1000px) */
  .acct-state{padding-top:64px}
  .acct-cards-solo{max-width:44ch;margin-left:auto;margin-right:auto}
}