/* ==========================================================================
   crédIA — application (post-connexion). Habillage partagé par les 7 écrans :
   inscription, dashboard, création, aperçu, publication, devis, crédits.
   ========================================================================== */

:root{
  --ink:#0B1533;
  --ink-hover:#1B2A55;
  --text-body:#4A5470;
  --text-secondary:#5E6883;
  --text-tertiary:#7C869F;
  --text-faint:#A9B1C4;

  --bg-page:#F5F8FF;
  --bg-sidebar:#EEF3FF;
  --bg-white:#fff;
  --bg-soft:#F8FAFF;

  --accent:#0052FF;
  --accent-strong:#3B6CFF;
  --accent-soft:#EEF3FF;
  --peach:#C9D8FF;

  --success:#2F7D4F;
  --success-bg:#E9F2EC;
  --pending-bg:#EEF3FF;

  --border-06:rgba(11,21,51,.06);
  --border-07:rgba(11,21,51,.07);
  --border-08:rgba(11,21,51,.08);
  --border-09:rgba(11,21,51,.09);
  --border-10:rgba(11,21,51,.10);
  --border-12:rgba(11,21,51,.12);
  --border-14:rgba(11,21,51,.14);
  --border-16:rgba(11,21,51,.16);

  --r-sm:9px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-xxl:20px; --r-xxxl:22px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg-page);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
input,button,textarea,select{ font-family:inherit; }
button{ cursor:pointer; }
img{ max-width:100%; }

.visually-hidden{
  position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px;
  font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; transition:top .2s ease;
}
.skip-link:focus{ top:12px; color:#fff; }

a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px; border-radius:6px;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes typeUrl{0%,8%{width:0}45%,80%{width:28ch}94%,100%{width:0}}
@keyframes glow{
  0%,100%{box-shadow:0 1px 2px rgba(11,21,51,.05),0 18px 40px -28px rgba(11,21,51,.3),0 0 0 0 rgba(0,82,255,0)}
  50%{box-shadow:0 1px 2px rgba(11,21,51,.05),0 18px 40px -28px rgba(11,21,51,.3),0 0 0 7px rgba(0,82,255,.12)}
}
@keyframes aurora{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes barGrow{0%{width:4%}100%{width:100%}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes shotScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 300px))}}
@keyframes riseIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Coquille applicative : barre latérale + contenu
   ========================================================================== */
.app-shell{ display:flex; flex-wrap:wrap; align-items:stretch; min-height:100vh; }

.app-sidebar{
  flex:1 1 232px; max-width:100%;
  display:flex; flex-direction:column; gap:22px;
  padding:18px 16px; background:var(--bg-sidebar);
  border-right:1px solid var(--border-07);
}
.sidebar-brand{ display:flex; align-items:center; gap:9px; padding:6px 8px; }
.sidebar-brand .mark{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:linear-gradient(140deg,var(--ink),#2B3A66);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif;
}
.sidebar-brand img.mark{
  width:32px; height:32px; background:none; border-radius:0;
}
.sidebar-brand .name{ font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.01em; }
.sidebar-brand .credits-badge{
  margin-left:auto; padding:4px 8px; border-radius:999px;
  background:#fff; border:1px solid var(--border-10);
  font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent);
  white-space:nowrap;
}

.btn-new-site{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:11px 12px; border:0; border-radius:var(--r-md);
  background:var(--ink); color:#fff; font:600 13px 'Plus Jakarta Sans',system-ui,sans-serif;
  text-align:left; transition:background-color .15s ease;
}
.btn-new-site:hover{ background:var(--ink-hover); color:#fff; }
.btn-new-site .plus{ font-size:15px; line-height:1; }

.sidebar-nav{ display:grid; gap:3px; }
.sidebar-nav a{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  font:500 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:#2B3550;
  transition:background-color .15s ease;
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.7); color:#2B3550; }
.sidebar-nav a.is-active{ font-weight:600; color:var(--ink); }
.sidebar-nav a.is-active::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:99px; background:var(--accent-strong);
}

.sidebar-recent{ display:grid; gap:6px; }
.sidebar-recent .label{
  padding:6px 12px; font:500 10.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary);
  text-transform:uppercase; letter-spacing:.1em;
}
.sidebar-recent a{
  padding:8px 12px; border-radius:10px;
  font:400 13px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body);
  transition:background-color .15s ease;
}
.sidebar-recent a:hover{ background:rgba(255,255,255,.7); color:var(--text-body); }

.sidebar-foot{ margin-top:auto; display:grid; gap:10px; }
.credit-card{ padding:13px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--border-08); }
.credit-card .row{ display:flex; justify-content:space-between; font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif; }
.credit-card .row .total{ color:var(--text-tertiary); font-weight:400; }
.credit-card .track{ margin-top:8px; height:5px; border-radius:99px; background:var(--bg-sidebar); overflow:hidden; }
.credit-card .fill{ height:100%; background:var(--accent-strong); }
.credit-card .recharge{
  display:block; margin-top:11px; width:100%; padding:9px; border:1px solid var(--border-14);
  border-radius:999px; background:#fff; font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif; text-align:center;
  transition:background-color .15s ease;
}
.credit-card .recharge:hover{ background:var(--bg-soft); color:var(--ink); }

.account-row{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px;
  transition:background-color .15s ease;
}
.account-row:hover{ background:rgba(255,255,255,.7); }
.account-row .avatar{
  width:26px; height:26px; border-radius:999px; flex:none;
  background:repeating-linear-gradient(135deg,#E4E9F4,#E4E9F4 5px,#D3DBEC 5px,#D3DBEC 10px);
}
.account-row .name{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-row .plan{ font:400 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.logout-btn{
  margin-left:auto; flex:none; width:26px; height:26px; border:0; border-radius:9px;
  background:transparent; color:var(--text-tertiary); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
.logout-btn:hover{ background:#fff; color:var(--ink); }

/* Empêche le flash de contenu protégé pendant la vérification de session */
html.auth-pending body{ visibility:hidden; }

.form-notice{
  margin-top:10px; padding:10px 12px; border-radius:10px;
  font:500 12.5px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; display:none;
}
.form-notice.is-visible{ display:block; }
.form-notice.is-error{ background:#FCEEEC; color:#B4231F; border:1px solid rgba(180,35,31,.2); }
.form-notice.is-success{ background:var(--success-bg); color:var(--success); border:1px solid rgba(47,125,79,.25); }

.app-main{ flex:999 1 520px; min-width:0; display:flex; flex-direction:column; }

/* ==========================================================================
   En-têtes de page (fond dégradé animé, commun à plusieurs écrans)
   ========================================================================== */
.page-hero{
  padding:clamp(28px,5vw,56px) clamp(18px,4vw,44px) 0;
  background:linear-gradient(170deg,#DCE6FF,#F2F6FF 30%,#F1ECFF 62%,#E4ECFF);
  background-size:230% 230%; animation:aurora 24s ease-in-out infinite alternate;
}
.page-hero-inner{ max-width:720px; margin:0 auto; text-align:center; animation:riseIn .5s ease both; }
.page-hero .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid var(--border-08);
  font:500 12px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body);
}
.page-hero h1{ margin:18px 0 0; font:600 clamp(24px,3.4vw,34px)/1.16 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; }

.simple-header{ padding:clamp(22px,4vw,44px) clamp(22px,4vw,44px) 0; }
.simple-header h1{ margin:18px 0 6px; font:600 clamp(22px,3vw,29px)/1.15 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; }
.simple-header p{ margin:0; font:400 14px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary); }

.btn-back{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border:1px solid var(--border-12); border-radius:10px;
  background:#fff; font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif;
  transition:background-color .15s ease;
}
.btn-back:hover{ background:var(--bg-soft); color:var(--ink); }

/* ==========================================================================
   Barre URL (réutilisée : dashboard)
   ========================================================================== */
.url-bar{
  margin:20px auto 0; display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  padding:9px; padding-left:16px; border-radius:20px;
  background:#fff; border:1px solid var(--border-10);
  animation:glow 3.4s ease-in-out infinite;
  max-width:640px;
}
.url-bar:focus-within{ animation:none; border-color:var(--ink); }
.url-bar svg{ flex:none; color:var(--text-tertiary); }
.url-field{
  position:relative; flex:1 1 180px; min-width:150px; height:18px;
  display:flex; align-items:center; overflow:hidden;
}
.url-field input[type="url"]{
  all:unset; position:absolute; inset:0; width:100%; box-sizing:border-box;
  font:400 13.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink);
}
.url-field input[type="url"]::placeholder{ color:var(--text-faint); }
.url-field-fake{
  position:absolute; inset:0; display:flex; align-items:center; pointer-events:none;
  font:400 13.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink);
  transition:opacity .15s ease;
}
.url-field-fake .typed{ display:inline-block; white-space:nowrap; overflow:hidden; animation:typeUrl 7s steps(28,end) infinite; }
.url-field-fake .cursor{ display:inline-block; width:1.5px; height:15px; background:var(--accent-strong); margin-left:2px; animation:caret 1s step-end infinite; }
.url-field.is-hidden-fake .url-field-fake{ opacity:0; }
.url-field:not(.is-hidden-fake) input[type="url"]::placeholder{ color:transparent; }

.url-bar-submit{
  flex:1 1 auto; padding:12px 20px; border:0; border-radius:14px;
  background:var(--ink); color:#fff; font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .15s ease;
}
.url-bar-submit:hover{ background:var(--ink-hover); color:#fff; }
.url-bar-submit:disabled{ cursor:progress; opacity:.85; }
.url-bar-submit .spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.url-bar-submit.is-loading .spinner{ display:inline-block; }
.url-bar-submit.is-loading .label-idle{ display:none; }
.url-bar-submit .label-loading{ display:none; }
.url-bar-submit.is-loading .label-loading{ display:inline; }

.hero-hint{
  margin-top:11px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
  font:500 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary);
}
.field-error{
  margin:10px auto 0; max-width:640px; text-align:left;
  font:500 12.5px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; color:#B4231F; display:none;
}
.field-error.is-visible{ display:block; }

/* ==========================================================================
   Dashboard : grille de sites
   ========================================================================== */
.dashboard-panel-wrap{ flex:1; padding:0 clamp(18px,4vw,44px) 40px; background:var(--bg-page); }
.dashboard-panel{
  max-width:1180px; margin:0 auto; padding:22px; border-radius:22px;
  background:#fff; border:1px solid var(--border-08);
  box-shadow:0 30px 60px -50px rgba(11,21,51,.4);
  transform:translateY(-34px);
}
.panel-tabs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.panel-tabs .tab{
  padding:8px 14px; border-radius:999px; font:500 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary);
  background:transparent; border:0;
}
.panel-tabs .tab.is-active{ background:var(--bg-sidebar); font-weight:600; color:var(--ink); }
.panel-tabs .count{ margin-left:auto; font:500 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

.sites-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
.site-card{
  display:block; cursor:pointer; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid var(--border-09); transition:box-shadow .2s ease;
}
.site-card:hover{ box-shadow:0 24px 44px -34px rgba(11,21,51,.45); }
.site-card .thumb{ position:relative; height:150px; overflow:hidden; }
.site-card .thumb img{ display:block; width:100%; }
.site-card .status{
  position:absolute; left:10px; bottom:10px; padding:5px 10px; border-radius:999px;
  font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif;
}
.site-card .status.is-published{ background:var(--ink); color:#fff; }
.site-card .status.is-draft{ background:#fff; color:var(--accent); }
.site-card .body{ padding:13px 14px; }
.site-card .title{ font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); }
.site-card .meta{ margin-top:3px; font:400 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

.site-card-new{
  min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; border-radius:16px; border:1px dashed var(--border-16); background:var(--bg-soft);
  color:var(--text-secondary); width:100%; transition:background-color .15s ease;
}
.site-card-new:hover{ background:var(--bg-page); color:var(--text-secondary); }
.site-card-new .plus{ font:400 22px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent); }
.site-card-new .label{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.site-card-new .sub{ font:400 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

/* ==========================================================================
   Création (écran de génération)
   ========================================================================== */
.generating-wrap{
  flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vw,56px);
  background:linear-gradient(170deg,#DCE6FF,#F2F6FF 34%,#F1ECFF 68%,#E4ECFF);
  background-size:230% 230%; animation:aurora 20s ease-in-out infinite alternate;
}
.generating-card{
  width:100%; max-width:560px; padding:clamp(22px,3vw,30px); border-radius:24px;
  background:#fff; border:1px solid var(--border-08); box-shadow:0 40px 80px -56px rgba(11,21,51,.5);
}
.generating-head{ display:flex; align-items:center; gap:12px; }
.spinner-ring{
  width:26px; height:26px; border-radius:999px; flex:none;
  border:2.5px solid var(--bg-sidebar); border-top-color:var(--accent-strong);
  animation:spin .9s linear infinite;
}
.generating-head .name{ font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif; }
.generating-head .url{ font:400 12px ui-monospace,Menlo,monospace; color:var(--text-tertiary); }
.generating-head .eta{ margin-left:auto; font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent); white-space:nowrap; }

.generating-track{ margin-top:20px; height:6px; border-radius:99px; background:var(--bg-sidebar); overflow:hidden; }
.generating-fill{ height:100%; background:linear-gradient(90deg,var(--accent-strong),#9966FF); animation:barGrow 12s ease-out both; }

.generating-steps{ margin-top:22px; display:grid; gap:12px; }
.gen-step{ display:flex; align-items:center; gap:10px; font:500 13px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); }
.gen-step .dot{
  width:18px; height:18px; border-radius:999px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font:700 10px 'Plus Jakarta Sans',system-ui,sans-serif; color:#fff;
}
.gen-step.is-done .dot{ background:var(--success); }
.gen-step.is-active{ color:var(--accent); font-weight:600; }
.gen-step.is-active .dot{ border:2px solid var(--accent-strong); border-top-color:transparent; animation:spin .9s linear infinite; background:transparent; }
.gen-step.is-pending{ color:var(--text-faint); animation:pulse 2.4s ease-in-out infinite; }
.gen-step.is-pending .dot{ border:1.5px dashed var(--border-16); background:transparent; }

.generating-note{
  margin-top:22px; padding:14px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--border-07);
  font:400 12.5px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body);
}
.generating-note strong{ font-weight:600; color:var(--ink); }
.generating-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ==========================================================================
   Boutons génériques
   ========================================================================== */
.btn{
  padding:13px; border:0; border-radius:12px;
  font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; text-align:center;
  transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--ink-hover); color:#fff; }
.btn-outline{ background:#fff; border:1px solid var(--border-14); color:var(--ink); }
.btn-outline:hover{ background:var(--bg-soft); }
.btn-flex{ flex:1 1 auto; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* ==========================================================================
   Aperçu du site
   ========================================================================== */
.preview-wrap{ flex:1; display:flex; flex-direction:column; background:#EEF2FA; }
.preview-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px clamp(14px,3vw,24px); background:#fff; border-bottom:1px solid var(--border-08);
}
.preview-toolbar .info .title{ font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-toolbar .info .sub{ font:400 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.viewport-toggle{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--bg-sidebar); }
.viewport-toggle button{
  padding:7px 13px; border:0; border-radius:999px; background:transparent;
  font:500 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary);
}
.viewport-toggle button.is-active{ background:#fff; font-weight:600; color:var(--ink); box-shadow:0 1px 2px rgba(11,21,51,.1); }
.preview-toolbar .actions{ margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }
.btn-sm{ padding:10px 14px; border-radius:10px; font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }

.preview-stage{ flex:1; padding:clamp(14px,3vw,26px); display:flex; justify-content:center; }
.preview-frame{
  width:100%; max-width:1080px; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid var(--border-10); box-shadow:0 40px 80px -60px rgba(11,21,51,.55);
  transition:max-width .25s ease;
}
.preview-frame.is-mobile{ max-width:380px; }
.preview-frame-bar{
  display:flex; align-items:center; gap:7px; padding:10px 13px; background:var(--bg-soft);
  border-bottom:1px solid var(--border-07);
}
.preview-frame-bar .dot{ width:8px; height:8px; border-radius:99px; background:#D6DCEA; }
.preview-frame-bar .url{
  margin-left:8px; padding:4px 11px; border-radius:999px; background:#fff; border:1px solid var(--border-08);
  font:400 11px ui-monospace,Menlo,monospace; color:var(--text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.preview-viewport{ height:clamp(360px,58vh,620px); overflow:hidden; }
.preview-viewport img{ display:block; width:100%; }

.preview-stats{ padding:0 clamp(14px,3vw,26px) 20px; display:flex; justify-content:center; }
.preview-stats-inner{
  width:100%; max-width:1080px; display:flex; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--border-08);
  font:400 12.5px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body);
}
.preview-stats-inner strong{ font-weight:600; color:var(--ink); }
.preview-stats-inner .fill{ margin-left:auto; color:var(--text-tertiary); }

/* ==========================================================================
   Publication
   ========================================================================== */
.publish-card{
  margin-top:24px; padding:22px; border-radius:20px; background:#fff; border:1px solid var(--border-08);
  display:grid; gap:18px;
}
.publish-card .section-title{ font:600 13px 'Plus Jakarta Sans',system-ui,sans-serif; }
.domain-options{ margin-top:12px; display:grid; gap:10px; }
.domain-option{
  display:flex; align-items:center; gap:11px; padding:14px; border-radius:14px;
  border:1px solid var(--border-12); cursor:pointer; transition:border-color .15s ease;
}
.domain-option:hover{ border-color:var(--border-16); }
.domain-option input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.domain-option .radio-dot{
  width:16px; height:16px; border-radius:999px; flex:none; border:1.5px solid rgba(11,21,51,.25);
  position:relative;
}
.domain-option input:checked ~ .radio-dot{ border:5px solid var(--ink); }
.domain-option.is-selected{ border:1.5px solid var(--ink); background:var(--bg-soft); }
.domain-option .info{ min-width:0; }
.domain-option .info .title{ font:600 13px 'Plus Jakarta Sans',system-ui,sans-serif; }
.domain-option .info .value{ font:400 12px ui-monospace,Menlo,monospace; color:var(--text-secondary); }
.domain-option .info .hint{ font:400 12px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary); }
.domain-option .tag{
  margin-left:auto; padding:5px 10px; border-radius:999px; font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap;
}
.domain-option .tag.is-available{ background:var(--success-bg); color:var(--success); }
.domain-option .tag.is-free{ font-weight:500; color:var(--text-tertiary); background:transparent; }

.publish-divider{ height:1px; background:var(--border-08); }
.publish-included{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.included-item{ padding:14px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--border-07); }
.included-item .title{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.included-item p{ margin:6px 0 0; font:400 12px/1.55 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }

.publish-footer{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:4px; }
.publish-footer .balance{ font:400 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary); }
.publish-footer .balance strong{ font-weight:600; color:var(--ink); }
.publish-footer .btn{ margin-left:auto; padding:14px 22px; }

.publish-success{
  margin-top:24px; padding:22px; border-radius:20px; background:var(--success-bg);
  border:1px solid rgba(47,125,79,.3); display:none; gap:10px;
}
.publish-success.is-visible{ display:grid; }
.publish-success .title{ font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--success); }
.publish-success p{ margin:0; font:400 13px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }

/* ==========================================================================
   Devis & factures
   ========================================================================== */
.invoice-grid{ margin-top:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start; }
.invoice-form{ padding:20px; border-radius:20px; background:#fff; border:1px solid var(--border-08); display:grid; gap:14px; }
.invoice-form .title{ font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.invoice-brand{ display:flex; align-items:center; gap:10px; padding-bottom:4px; }
.invoice-brand img{ width:28px; height:28px; object-fit:contain; border-radius:6px; }
.invoice-brand span{ font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); }
.invoice-lines{ display:grid; gap:10px; }
.invoice-line{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--border-12); }
.invoice-line .info{ min-width:0; flex:1; }
.invoice-line .info .title{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.invoice-line .info .sub{ font:400 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.invoice-line input{
  width:88px; padding:9px 11px; border-radius:9px; border:1px solid var(--border-14);
  font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; text-align:right; outline:none;
}
.invoice-add-line{
  padding:11px; border:1px dashed var(--border-16); border-radius:12px; background:var(--bg-soft);
  font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary);
}
.invoice-add-line:hover{ background:var(--bg-sidebar); color:var(--text-secondary); }

.invoice-totals{ display:grid; gap:8px; padding-top:6px; border-top:1px solid var(--border-08); }
.invoice-totals .row{ display:flex; justify-content:space-between; font:400 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }
.invoice-totals .row.is-total{ font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); }
.invoice-form .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.invoice-form .legal{ font:400 11.5px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

.invoice-history{ display:grid; gap:16px; }
.history-card{ border-radius:20px; background:#fff; border:1px solid var(--border-08); overflow:hidden; }
.history-card .head{ padding:16px 18px; border-bottom:1px solid var(--border-07); font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.history-row{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--border-06); }
.history-row:last-child{ border-bottom:0; }
.history-row .info{ flex:1; min-width:0; }
.history-row .info .title{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.history-row .info .sub{ font:400 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.status-pill{ padding:5px 10px; border-radius:999px; font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap; }
.status-pill.is-paid{ background:var(--success-bg); color:var(--success); }
.status-pill.is-pending{ background:var(--pending-bg); color:var(--accent); }

.autopay-note{
  padding:18px; border-radius:20px; background:var(--bg-soft); border:1px solid var(--border-08);
  font:400 12.5px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body);
}
.autopay-note strong{ font-weight:600; color:var(--ink); }

/* ==========================================================================
   Crédits
   ========================================================================== */
.credits-summary{
  margin-top:22px; padding:22px; border-radius:20px; background:var(--ink); color:#fff;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
}
.credits-summary .amount{ font:600 clamp(30px,4vw,40px) 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; }
.credits-summary .sub{ margin-top:4px; font:400 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:rgba(255,255,255,.65); }
.credits-summary .track-wrap{ flex:1 1 220px; min-width:180px; }
.credits-summary .track{ height:6px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; }
.credits-summary .fill{ height:100%; background:linear-gradient(90deg,var(--accent-strong),#9966FF); }
.credits-summary .track-label{ margin-top:8px; font:400 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:rgba(255,255,255,.6); }
.credits-summary .tags{ display:flex; gap:9px; flex-wrap:wrap; }
.credits-summary .tags span{ padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.12); font:600 11.5px 'Plus Jakarta Sans',system-ui,sans-serif; }

.credit-packs{ margin-top:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.pack-card{ display:flex; flex-direction:column; padding:20px; border-radius:20px; background:#fff; border:1px solid var(--border-09); }
.pack-card.is-current{ border:1.5px solid var(--ink); box-shadow:0 30px 60px -50px rgba(11,21,51,.5); }
.pack-card .head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pack-card .head .name{ font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif; }
.pack-card .head .tag{ padding:4px 10px; border-radius:999px; background:var(--bg-sidebar); font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.pack-card .price{ margin-top:12px; display:flex; align-items:baseline; gap:6px; }
.pack-card .price .amount{ font:600 clamp(26px,3.4vw,34px) 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; }
.pack-card .price .per{ font:400 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.pack-card .credits-pill{
  margin-top:10px; align-self:flex-start; padding:6px 12px; border-radius:999px;
  background:var(--accent-soft); border:1px solid rgba(0,82,255,.22);
  font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent);
}
.pack-card.is-highlight .credits-pill{ background:var(--ink); border:0; color:var(--peach); }
.pack-card .desc{ margin-top:14px; font:400 12.5px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }
.pack-card .btn{ margin-top:18px; border-radius:999px; }

.consumption-card{ margin-top:20px; border-radius:20px; background:#fff; border:1px solid var(--border-08); overflow:hidden; }

/* ==========================================================================
   Inscription (écran plein, sans coquille app)
   ========================================================================== */
.auth-shell{ flex:1; display:flex; flex-wrap:wrap; min-height:100vh; }
.auth-panel{
  flex:1 1 420px; display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,5vw,64px); background:#fff;
}
.auth-panel-inner{ width:100%; max-width:380px; animation:riseIn .5s ease both; }
.auth-brand{ display:flex; align-items:center; gap:9px; }
.auth-brand .mark{
  width:28px; height:28px; border-radius:9px; background:linear-gradient(140deg,var(--ink),#2B3A66);
  display:flex; align-items:center; justify-content:center; color:#fff; font:600 12px 'Plus Jakarta Sans',system-ui,sans-serif;
}
.auth-brand img.mark{
  width:36px; height:36px; background:none; border-radius:0;
}
.auth-brand .name{ font:600 16px 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.01em; }
.auth-title{ margin-top:34px; font:600 clamp(24px,3vw,29px)/1.15 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; }
.auth-sub{ margin-top:8px; font:400 14px/1.55 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary); }

.auth-form{ margin-top:24px; display:grid; gap:11px; }
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:9px; padding:13px;
  border-radius:12px; background:#fff; border:1px solid var(--border-14);
  font:600 13.5px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink);
}
.btn-google:hover{ background:var(--bg-soft); color:var(--ink); }
.btn-google .swatch{
  width:16px; height:16px; border-radius:4px; display:inline-block;
  background:conic-gradient(#EA4335,#FBBC05,#34A853,#4285F4);
}
.auth-divider{ display:flex; align-items:center; gap:10px; margin:4px 0; }
.auth-divider span:not(.or){ flex:1; height:1px; background:var(--border-10); }
.auth-divider .or{ font:500 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

.field{ display:grid; gap:6px; }
.field span{ font:500 12px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }
.field input{
  padding:12px 14px; border-radius:12px; border:1px solid var(--border-14);
  background:#fff; font:400 14px 'Plus Jakarta Sans',system-ui,sans-serif; outline:none;
  transition:border-color .15s ease;
}
.field input:focus{ border-color:var(--ink); }
.field .hint-error{ font:500 12px 'Plus Jakarta Sans',system-ui,sans-serif; color:#B4231F; display:none; }
.field .hint-error.is-visible{ display:block; }

.brand-block{
  margin-top:6px; padding:16px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--border-09);
  display:grid; gap:13px;
}
.brand-block .title{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.brand-block .desc{ margin-top:4px; font:400 11.5px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.logo-drop{
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;
  border:1px dashed rgba(11,21,51,.2); background:#fff; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.logo-drop:hover{ border-color:var(--accent-strong); background:#F8FAFF; }
.logo-drop .icon{
  width:40px; height:40px; flex:none; border-radius:11px;
  background:repeating-linear-gradient(135deg,#EEF3FF,#EEF3FF 6px,#DFE5F2 6px,#DFE5F2 12px);
  display:flex; align-items:center; justify-content:center; font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent);
}
.logo-drop .title{ font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif; }
.logo-drop .sub{ margin-top:2px; font:400 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.logo-drop .browse{ margin-left:auto; padding:7px 12px; border-radius:999px; background:var(--bg-sidebar); font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; }
.brand-block .footnote{ font:400 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }

.auth-submit{ margin-top:6px; padding:14px; border:0; border-radius:12px; background:var(--ink); color:#fff; font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif; }
.auth-submit:hover{ background:var(--ink-hover); color:#fff; }
.auth-submit:disabled{ opacity:.7; cursor:progress; }
.auth-footnote{ margin-top:16px; font:400 12px/1.6 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-tertiary); }
.auth-switch{ margin-top:20px; font:400 13px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-secondary); }
.auth-switch a{ font-weight:600; color:var(--accent); }
.auth-google-note{
  margin-top:10px; font:500 12px/1.5 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(0,82,255,.2); border-radius:10px;
  padding:10px 12px; display:none;
}
.auth-google-note.is-visible{ display:block; }

.auth-showcase{
  flex:1 1 380px; display:flex; align-items:center; justify-content:center;
  padding:clamp(24px,4vw,48px);
  background:linear-gradient(160deg,#D6E2FF,#F2F6FF 26%,#F3EDFF 58%,#E2ECFF 84%,#DCE6FF);
  background-size:250% 250%; animation:aurora 22s ease-in-out infinite alternate;
}
.auth-showcase-inner{ width:100%; max-width:420px; }
.auth-showcase-title{
  font-family:'Instrument Serif',Georgia,serif; font-size:clamp(24px,3.2vw,32px);
  line-height:1.12; font-style:italic;
}
.showcase-card{ margin-top:20px; padding:16px; border-radius:18px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.6); }
.showcase-url{ font:400 12px ui-monospace,Menlo,monospace; color:var(--text-secondary); overflow:hidden; white-space:nowrap; }
.showcase-url .typed{ display:inline-block; overflow:hidden; white-space:nowrap; animation:typeUrl 7s steps(28,end) infinite; }
.showcase-url .cursor{ display:inline-block; width:1.5px; height:12px; background:var(--accent-strong); vertical-align:-2px; animation:caret 1s step-end infinite; }
.showcase-shot{ margin-top:12px; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--border-08); }
.showcase-shot .viewport{ height:150px; overflow:hidden; }
.showcase-shot img{ display:block; width:100%; animation:shotScroll 20s ease-in-out infinite alternate; }
.showcase-tags{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.showcase-tags .dark{ padding:6px 11px; border-radius:999px; background:var(--ink); color:#fff; font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; }
.showcase-tags .light{ padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.8); font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--text-body); }

/* ==========================================================================
   Barre de démonstration (navigation entre écrans, prototype uniquement)
   ========================================================================== */
.demo-switcher{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:90;
  display:flex; gap:3px; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 24px);
  padding:6px; border-radius:999px; background:rgba(11,21,51,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 40px -22px rgba(11,21,51,.7);
}
.demo-switcher a{
  padding:8px 12px; border-radius:999px; color:rgba(255,255,255,.72);
  font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.demo-switcher a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.demo-switcher a.is-active{ background:#fff; color:var(--ink); }
.demo-switcher .tag{
  align-self:center; padding:0 8px; font:600 10px 'Plus Jakarta Sans',system-ui,sans-serif; color:rgba(255,255,255,.4);
  text-transform:uppercase; letter-spacing:.08em;
}

/* ==========================================================================
   Impression / export PDF — utilisé par le bouton "Télécharger PDF" du
   devis (window.print(), voir app.js). N'affiche que le document, sans
   la sidebar, les boutons d'action ni l'historique.
   ========================================================================== */
/* ==========================================================================
   Téléphone : barre du haut et menu déroulant
   ==========================================================================
   Sur ordinateur, la navigation est une colonne fixe à gauche. Sur téléphone
   cette colonne s'empilait AU-DESSUS du contenu : logo, bouton, trois liens,
   compteur de crédits et compte occupaient tout le premier écran, et il
   fallait faire défiler pour atteindre la moindre information utile.

   En dessous de 860px, la colonne devient donc un menu déroulant ouvert
   depuis une barre compacte collée en haut. La barre et le voile sont
   fabriqués par app.js (menuMobile) ; tout le reste se règle ici.
   ========================================================================== */

.app-topbar{ display:none; }
.app-scrim{ display:none; }

@media (max-width:860px){

  .app-shell{ display:block; }

  /* --- la barre compacte --- */
  .app-topbar{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; gap:10px;
    min-height:56px; padding:8px 12px;
    background:rgba(245,248,255,.94);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-07);
  }
  .app-topbar .menu-btn{
    flex:none; width:44px; height:44px; margin-left:-6px;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:12px; background:transparent; color:var(--ink);
  }
  .app-topbar .menu-btn:active{ background:rgba(255,255,255,.85); }
  .app-topbar .menu-btn .barres{ position:relative; display:block; width:18px; height:12px; }
  .app-topbar .menu-btn .barres::before,
  .app-topbar .menu-btn .barres::after,
  .app-topbar .menu-btn .barres span{
    content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px;
    background:currentColor; transition:transform .22s ease, opacity .16s ease;
  }
  .app-topbar .menu-btn .barres::before{ top:0; }
  .app-topbar .menu-btn .barres span{ top:5px; }
  .app-topbar .menu-btn .barres::after{ bottom:0; }
  /* Ouvert, les trois barres deviennent une croix. */
  .app-shell.menu-ouvert .menu-btn .barres::before{ transform:translateY(5px) rotate(45deg); }
  .app-shell.menu-ouvert .menu-btn .barres span{ opacity:0; }
  .app-shell.menu-ouvert .menu-btn .barres::after{ transform:translateY(-5px) rotate(-45deg); }

  .app-topbar .marque{ display:flex; align-items:center; gap:8px; min-width:0; color:inherit; }
  .app-topbar .marque img{ width:26px; height:26px; flex:none; }
  .app-topbar .marque .nom{ font:600 15px 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.01em; }
  .app-topbar .credits-badge{
    margin-left:auto; padding:6px 10px; border-radius:999px;
    background:#fff; border:1px solid var(--border-10);
    font:600 11px 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--accent); white-space:nowrap;
  }
  .app-topbar .btn-nouveau{
    flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:999px; background:var(--ink); color:#fff;
    font:400 22px/1 'Plus Jakarta Sans',system-ui,sans-serif; padding-bottom:2px;
  }
  .app-topbar .btn-nouveau:hover{ color:#fff; }

  /* --- la colonne devient le panneau déroulant --- */
  .app-sidebar{
    position:fixed; top:56px; left:0; right:0; z-index:59;
    max-height:calc(100vh - 56px); overflow-y:auto;
    padding:14px 14px 20px; gap:14px;
    border-right:0; border-bottom:1px solid var(--border-07);
    box-shadow:0 26px 50px -30px rgba(11,21,51,.45);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .18s ease, transform .22s ease, visibility .22s;
  }
  .app-shell.menu-ouvert .app-sidebar{ opacity:1; visibility:visible; transform:none; }
  .app-sidebar .sidebar-brand{ display:none; }   /* déjà dans la barre du haut */
  .sidebar-foot{ margin-top:0; }
  /* Cibles tactiles : 44px minimum, sinon on rate le lien un coup sur trois. */
  .sidebar-nav a, .sidebar-recent a{ min-height:44px; padding:12px; }
  .btn-new-site{ min-height:46px; }
  .credit-card .recharge{ min-height:44px; }
  .account-row{ min-height:48px; }
  .account-row > a{ min-height:44px; }
  .app-topbar .marque{ min-height:44px; }
  .viewport-toggle button{ min-height:38px; padding:9px 15px; }
  .logout-btn{ width:40px; height:40px; }

  .app-scrim{
    display:block; position:fixed; inset:56px 0 0; z-index:58;
    background:rgba(11,21,51,.32); opacity:0; visibility:hidden;
    transition:opacity .18s ease, visibility .18s;
  }
  .app-shell.menu-ouvert .app-scrim{ opacity:1; visibility:visible; }

  /* --- respirations réduites ---
     Sur un écran de six pouces, une marge de 44px coûte un quart de la
     largeur utile. On resserre partout, sans toucher au format ordinateur. */
  .page-hero{ padding:20px 14px 0; }
  .page-hero .badge{ display:none; }        /* décoratif : il pousse le titre hors de l'écran */
  .page-hero h1{ font-size:23px; margin-top:0; }
  .simple-header{ padding:18px 14px 0; }
  .simple-header h1{ font-size:21px; }
  .simple-header p{ font-size:13.5px; }
  .btn-back{ min-height:40px; }

  .url-bar{ margin-top:16px; padding-left:12px; border-radius:18px; }
  .url-bar-submit{ flex:1 1 100%; min-height:48px; }
  .hero-hint{ gap:8px; font-size:11px; }

  .dashboard-panel-wrap{ padding:0 12px 28px; }
  .dashboard-panel{ padding:16px 14px; border-radius:18px; transform:translateY(-22px); }
  .sites-grid{ gap:14px; }

  .preview-toolbar{ padding:10px 12px; gap:9px; }
  .preview-toolbar .actions{ margin-left:0; width:100%; }
  .preview-toolbar .actions .btn{ flex:1 1 auto; justify-content:center; min-height:42px; }
  .preview-stage{ padding:12px; }
  .preview-stats{ padding:0 12px 16px; }
  .preview-stats-inner .fill{ margin-left:0; flex:1 1 100%; }
  .preview-frame.is-mobile{ max-width:100%; }

  .publish-card{ padding:16px; }
  .publish-footer{ gap:10px; }
  .publish-footer .btn{ margin-left:0; width:100%; min-height:48px; }

  /* Le bandeau de solde empilait mal ses trois blocs : le montant, la barre
     de progression et les pastilles se chevauchaient. On les met en colonne. */
  .credits-summary{ padding:18px; gap:14px; flex-direction:column; align-items:stretch; }
  .credits-summary .track-wrap{ flex:none; min-width:0; }

  /* L'état vide du tableau de bord occupait un écran entier pour dire
     qu'il n'y a rien. */
  .dashboard-empty{ padding:32px 12px !important; }
  .dashboard-empty > div:first-child{ font-size:44px !important; margin-bottom:10px !important; }
  .panel-tabs{ gap:6px; margin-bottom:14px; }
  .panel-tabs .tab{ min-height:38px; }
  .panel-tabs .count{ margin-left:auto; }
  .credit-packs{ gap:14px; }
  .pack-card{ padding:18px; }
  .invoice-grid{ gap:14px; }

  .gen-card{ padding:20px 16px; }
}

/* Très petits écrans : on récupère les derniers pixels. */
@media (max-width:380px){
  .app-topbar .marque .nom{ display:none; }   /* le logo suffit à identifier */
  .page-hero h1{ font-size:21px; }
}

@media print{
  .app-sidebar, .simple-header, .invoice-history, .invoice-form .actions,
  .demo-switcher, .skip-link, .invoice-add-line{ display:none !important; }
  body, .app-shell, .app-main{ background:#fff !important; }
  .app-main{ padding:0 !important; }
  .invoice-grid{ display:block !important; margin:0 !important; }
  .invoice-form{
    border:0 !important; padding:0 !important; box-shadow:none !important;
    max-width:680px; margin:0 auto;
  }
}

/* ==========================================================================
   Thème bleu crédIA (refonte 2026) — mêmes classes, mêmes écrans :
   seul l'habillage change, la logique JS n'est pas touchée.
   ========================================================================== */
:root{
  --brand:#0052FF; --brand-hover:#0047E0; --brand-violet:#9966FF;
  --brand-50:#EEF3FF; --brand-100:#DCE6FF;
  --shadow-soft:0 1px 2px rgba(11,21,51,.05),0 12px 32px -18px rgba(11,21,51,.22);
}
body{ font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; }
a:hover{ color:var(--brand); }
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, summary:focus-visible{ outline-color:var(--brand); }

/* Boutons principaux : bleu de marque */
.btn-primary, .btn-new-site, .url-bar-submit, .auth-submit,
.app-topbar .btn-nouveau, html .credia-upgrade-modal .btn-primary{
  background:var(--brand); color:#fff;
  box-shadow:0 10px 22px -12px rgba(0,82,255,.75);
}
.btn-primary:hover, .btn-new-site:hover, .url-bar-submit:hover, .auth-submit:hover,
html .credia-upgrade-modal .btn-primary:hover{ background:var(--brand-hover); color:#fff; }
.btn, .btn-sm, .url-bar-submit{ border-radius:999px; }
.btn-new-site{ border-radius:12px; justify-content:center; }
.btn-outline:hover, .btn-back:hover{ border-color:var(--brand); color:var(--brand); background:#fff; }

/* Barre latérale */
.app-sidebar{ background:#fff; border-right:1px solid rgba(11,21,51,.08); }
.sidebar-brand .name, .auth-brand .name, .app-topbar .marque .nom{ font-weight:800; letter-spacing:-.02em; }
.sidebar-brand .credits-badge, .app-topbar .credits-badge{ background:var(--brand-50); border-color:transparent; color:var(--brand); }
.sidebar-nav a{ color:#4A5470; }
.sidebar-nav a:hover, .sidebar-recent a:hover{ background:#F5F8FF; color:var(--brand); }
.sidebar-nav a.is-active{ background:var(--brand-50); color:var(--brand); font-weight:700; }
.sidebar-nav a.is-active::before{ display:none; }
.credit-card{ background:#F8FAFF; border-color:rgba(11,21,51,.07); }
.credit-card .track{ background:var(--brand-100); }
.credit-card .fill{ background:linear-gradient(90deg,var(--brand),var(--brand-violet)); }
.credit-card .recharge:hover{ border-color:var(--brand); color:var(--brand); background:#fff; }
.account-row:hover{ background:#F5F8FF; }
.account-row .avatar{ background:linear-gradient(135deg,var(--brand),var(--brand-violet)); }

/* En-tête de page : dégradé bleu comme la page d'accueil */
.page-hero{
  position:relative; color:#fff;
  background:radial-gradient(900px 380px at 50% -10%,#9FBCFF 0%,rgba(159,188,255,0) 60%),
             linear-gradient(180deg,#5B8BFF 0%,#2E6BFF 45%,#0052FF 100%);
  animation:none;
}
.page-hero h1{ font-weight:800; letter-spacing:-.035em; color:#fff; }
.page-hero .badge{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff; }
.page-hero .hero-hint{ color:rgba(255,255,255,.85); }
.page-hero .field-error{ color:#FFE0E5; }
.url-bar{ border-color:transparent; box-shadow:0 20px 40px -20px rgba(0,20,80,.55); animation:none; }
.url-bar:focus-within{ border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35),0 20px 40px -20px rgba(0,20,80,.55); }
.url-field-fake .cursor{ background:var(--brand); }
.simple-header h1{ font-weight:800; letter-spacing:-.035em; }

/* Cartes et panneaux */
.dashboard-panel, .publish-card, .invoice-form, .history-card, .pack-card,
.consumption-card, .generating-card, .preview-stats-inner{ box-shadow:var(--shadow-soft); border-color:rgba(11,21,51,.07); }
.panel-tabs .tab.is-active{ background:var(--brand); color:#fff; }
.site-card:hover{ box-shadow:0 24px 44px -30px rgba(0,40,140,.45); transform:translateY(-2px); }
.site-card{ transition:box-shadow .2s ease, transform .2s ease; }
.site-card .status.is-published{ background:#E6F6EC; color:#12A150; }
.site-card .status.is-draft{ background:#fff; color:var(--brand); }
.site-card-new{ border-color:rgba(0,82,255,.3); background:#F8FAFF; }
.site-card-new:hover{ background:var(--brand-50); border-color:var(--brand); }
.site-card-new .plus{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; }

/* Génération */
.generating-wrap{ background:linear-gradient(170deg,#DCE6FF,#F2F6FF 40%,#F1ECFF 75%,#E4ECFF); animation:none; }
.spinner-ring{ border-color:var(--brand-100); border-top-color:var(--brand); }
.generating-fill{ background:linear-gradient(90deg,var(--brand),var(--brand-violet)); }
.gen-step.is-done .dot{ background:#12A150; }
.gen-step.is-active{ color:var(--brand); }
.gen-step.is-active .dot{ border-color:var(--brand); border-top-color:transparent; }

/* Aperçu */
.preview-wrap{ background:#EEF2FA; }
.viewport-toggle{ background:var(--brand-50); }
.viewport-toggle button.is-active{ color:var(--brand); }

/* Publication */
.domain-option.is-selected{ border-color:var(--brand); background:var(--brand-50); }
.domain-option input:checked ~ .radio-dot{ border-color:var(--brand); }
.domain-option:hover{ border-color:rgba(0,82,255,.4); }
.publish-success{ background:#E6F6EC; }

/* Devis */
.invoice-line input:focus, .field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,82,255,.12); }
.invoice-add-line:hover{ background:var(--brand-50); color:var(--brand); border-color:var(--brand); }
.status-pill.is-pending{ background:var(--brand-50); color:var(--brand); }

/* Crédits */
.credits-summary{ background:linear-gradient(135deg,#0052FF,#3D2FD9 70%,#6A3CF0); box-shadow:0 30px 60px -34px rgba(0,82,255,.7); }
.credits-summary .fill{ background:linear-gradient(90deg,#fff,#C9D8FF); }
.pack-card.is-current, .pack-card.is-highlight{ border:2px solid var(--brand); box-shadow:0 30px 60px -36px rgba(0,82,255,.5); }
.pack-card .head .tag{ background:var(--brand); color:#fff; }
.pack-card .credits-pill{ background:var(--brand-50); border-color:transparent; color:var(--brand); }
.pack-card.is-highlight .credits-pill{ background:var(--brand); color:#fff; }
.pack-card .price .amount{ font-weight:800; }

/* Inscription */
.auth-title{ font-weight:800; letter-spacing:-.035em; }
.auth-switch a, .auth-google-note{ color:var(--brand); }
.auth-google-note{ background:var(--brand-50); border-color:rgba(0,82,255,.2); }
.logo-drop:hover{ border-color:var(--brand); background:#F8FAFF; }
.logo-drop .icon{ background:var(--brand-50); color:var(--brand); }
.logo-drop .browse{ background:var(--brand-50); color:var(--brand); }
.auth-showcase{
  color:#fff;
  background:radial-gradient(700px 360px at 30% 0%,#9FBCFF 0%,rgba(159,188,255,0) 60%),
             linear-gradient(170deg,#5B8BFF 0%,#2E6BFF 40%,#0052FF 75%,#3D2FD9 100%);
  animation:none;
}
.auth-showcase-title{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-style:normal; font-weight:800; letter-spacing:-.035em; }
.showcase-card{ background:rgba(255,255,255,.95); color:#0B1533; box-shadow:0 30px 60px -30px rgba(0,20,80,.6); }
.showcase-tags .dark{ background:var(--brand); }
.showcase-url .cursor{ background:var(--brand); }

/* Téléphone */
@media (max-width:860px){
  .app-topbar{ background:rgba(255,255,255,.94); }
  .page-hero{ padding-bottom:4px; }
}

/* ==========================================================================
   Téléphone — finitions « app native »
   ========================================================================== */
html{ -webkit-tap-highlight-color:transparent; }
button, a, .tab, .domain-option{ touch-action:manipulation; }
.app-tabbar{ display:none; }

@media (max-width:860px){
  /* iOS zoome sur tout champ < 16px au moment de la saisie : on l'évite. */
  input, select, textarea,
  .url-field input[type="url"], .field input, .invoice-line input{ font-size:16px !important; }
  .url-field{ height:22px; }
  .url-field-fake{ font-size:15px; }

  /* Encoche et barre d'accueil de l'iPhone */
  .app-topbar{ padding-top:calc(8px + env(safe-area-inset-top)); min-height:calc(56px + env(safe-area-inset-top));
    padding-left:calc(12px + env(safe-area-inset-left)); padding-right:calc(12px + env(safe-area-inset-right)); }
  .app-sidebar{ top:calc(56px + env(safe-area-inset-top)); max-height:calc(100vh - 56px - env(safe-area-inset-top)); }
  .app-scrim{ inset:calc(56px + env(safe-area-inset-top)) 0 0; }
  .app-topbar .btn-nouveau{ display:none; }          /* remplacé par l'onglet « Nouveau » en bas */
  .app-sidebar .btn-new-site, .app-sidebar .sidebar-nav{ display:none; } /* déjà dans la barre du bas */

  /* Barre d'onglets du bas */
  .app-tabbar{
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
    background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-top:1px solid rgba(11,21,51,.08); box-shadow:0 -10px 30px -22px rgba(11,21,51,.35);
  }
  .app-tabbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:50px; border-radius:12px; color:#7C869F;
    font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif; transition:color .15s ease;
  }
  .app-tabbar a .ic{ display:flex; align-items:center; justify-content:center; width:44px; height:28px; border-radius:999px; transition:background-color .15s ease; }
  .app-tabbar a.is-active{ color:var(--brand); }
  .app-tabbar a.is-active .ic{ background:var(--brand-50); }
  .app-tabbar a:active .ic{ transform:scale(.92); }
  .app-tabbar a.is-cta .ic{
    width:50px; height:50px; margin-top:-22px; border-radius:18px; color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-violet));
    box-shadow:0 12px 24px -10px rgba(0,82,255,.8), 0 0 0 4px #fff;
  }
  .app-tabbar a.is-cta{ color:var(--brand); }
  html.has-tabbar body{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  html.has-tabbar .app-sidebar{ max-height:calc(100vh - 56px - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

  /* Tableau de bord */
  .page-hero h1{ font-size:24px; line-height:1.15; }
  .hero-hint{ flex-direction:column; align-items:center; gap:2px; }
  .hero-hint span:nth-child(2){ display:none; }
  .panel-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-4px; margin-right:-4px; padding:0 4px 2px; }
  .panel-tabs::-webkit-scrollbar{ display:none; }
  .panel-tabs .tab{ flex:none; white-space:nowrap; }
  .panel-tabs .count{ flex:none; padding-left:6px; }
  .sites-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .site-card .thumb{ height:112px; }
  .site-card .body{ padding:10px 11px; }
  .site-card .title{ font-size:13px; }
  .site-card-new{ min-height:170px; grid-column:1 / -1; }

  /* Cartes : lisibilité */
  .history-row, .history-card .head{ padding-left:16px; padding-right:16px; }
  .simple-header p{ line-height:1.55; }
  .pack-card .btn, .btn-sm{ min-height:46px; }
  .invoice-line{ flex-wrap:wrap; }
  .invoice-line input{ width:104px; min-height:44px; }

  /* Aperçu : la barre d'actions reste accessible */
  .preview-viewport{ height:62vh; }

  /* Inscription : l'exemple passe en bandeau compact sous le formulaire */
  .auth-panel{ padding:calc(24px + env(safe-area-inset-top)) 18px 28px; }
  .auth-showcase{ padding:28px 18px calc(28px + env(safe-area-inset-bottom)); }
  .auth-showcase-title{ font-size:24px; }
  .auth-submit, .btn-google{ min-height:52px; font-size:15px; }
}
@media (max-width:360px){
  .sites-grid{ grid-template-columns:1fr; }
  .app-tabbar a{ font-size:10px; }
}
@media (display-mode:standalone){
  body{ overscroll-behavior-y:none; }
}

/* ==========================================================================
   DESIGN MOBILE DÉDIÉ (≤ 860px)
   Une vraie interface d'app, pas la version bureau rétrécie :
   en-tête d'app, grands titres, listes, carrousels, feuilles qui montent
   du bas, barres d'action collées au pouce. Mêmes éléments HTML, même JS.
   ========================================================================== */
@media (max-width:860px){
  :root{ --m-bg:#F2F5FC; --m-card:#fff; --m-radius:22px; --m-gap:16px;
         --m-shadow:0 1px 2px rgba(11,21,51,.04),0 8px 24px -14px rgba(11,21,51,.18);
         --tabbar-h:calc(74px + env(safe-area-inset-bottom)); }
  body, .app-main, .dashboard-panel-wrap, .preview-wrap{ background:var(--m-bg) !important; }
  .app-main > div[style*="padding"]{ padding:0 var(--m-gap) 24px !important; background:transparent !important; }
  .app-main > *{ animation:mIn .3s ease both; }
  .app-main > .preview-wrap{ animation:none; }
  @keyframes mIn{ from{ opacity:0; } to{ opacity:1; } }

  /* ---------- En-tête d'app ---------- */
  .app-topbar{ background:rgba(242,245,252,.86); border-bottom:0; gap:8px; }
  .app-topbar.is-scrolled{ border-bottom:1px solid rgba(11,21,51,.06); background:rgba(255,255,255,.9); }
  .app-topbar .marque .nom{ font-size:17px; }
  .app-topbar .credits-badge{ padding:8px 12px; font-size:12px; background:#fff; box-shadow:var(--m-shadow); }
  .app-topbar .menu-btn{
    order:9; margin:0; width:40px; height:40px; border-radius:50%;
    background:linear-gradient(135deg,var(--brand),var(--brand-violet)); color:#fff;
    box-shadow:0 8px 18px -10px rgba(0,82,255,.9);
  }
  .app-topbar .menu-btn .barres{ width:14px; height:10px; }
  .app-topbar .menu-btn .barres span{ top:4px; }

  /* ---------- Menu = feuille qui monte du bas ---------- */
  .app-sidebar{
    top:auto !important; bottom:0; left:0; right:0; z-index:90;
    max-height:80vh !important; border-radius:26px 26px 0 0; border:0;
    padding:26px 18px calc(22px + env(safe-area-inset-bottom)) !important;
    background:#fff; box-shadow:0 -20px 60px -20px rgba(11,21,51,.45);
    transform:translateY(105%); opacity:1; visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.9,.2,1), visibility .32s;
  }
  .app-sidebar::before{ content:""; position:absolute; top:9px; left:50%; width:40px; height:5px; margin-left:-20px; border-radius:9px; background:#D6DCEA; }
  .app-shell.menu-ouvert .app-sidebar{ transform:none; visibility:visible; }
  .app-scrim{ inset:0 !important; z-index:85; background:rgba(11,21,51,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  .credit-card{ padding:18px; border-radius:18px; background:linear-gradient(135deg,var(--brand),#3D2FD9); color:#fff; border:0; }
  .credit-card .row{ font-size:15px; }
  .credit-card .row .total{ color:rgba(255,255,255,.7); }
  .credit-card .track{ background:rgba(255,255,255,.22); height:6px; }
  .credit-card .fill{ background:#fff; }
  .credit-card .recharge{ background:#fff; color:var(--brand); border:0; font-size:14px; }
  .account-row{ padding:14px; border-radius:16px; background:var(--m-bg); }
  .account-row .name{ font-size:14.5px; } .account-row .plan{ font-size:12.5px; }
  .logout-btn{ background:#fff; color:#D6334A; font-size:16px; border-radius:12px; }

  /* ---------- Grands titres (style iOS) ---------- */
  .simple-header{ padding:14px var(--m-gap) 18px !important; }
  .simple-header h1{ margin:0; font-size:32px !important; letter-spacing:-.04em; }
  .simple-header p{ margin-top:6px; font-size:14px !important; color:#6B7590; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .btn-back{ border:0; background:#fff; box-shadow:var(--m-shadow); border-radius:999px; padding:10px 14px; }

  /* ---------- Cartes communes ---------- */
  .publish-card, .invoice-form, .history-card, .consumption-card, .autopay-note,
  .app-main form[style], .app-main > div[style] > div > div[style*="border-radius:20px"]{
    border:0 !important; border-radius:var(--m-radius) !important; box-shadow:var(--m-shadow) !important;
  }
  .btn{ min-height:50px; font-size:15px; }

  /* ========== TABLEAU DE BORD ========== */
  .page-hero{
    margin:6px var(--m-gap) 0; padding:22px 18px 20px !important; border-radius:26px; text-align:left;
    box-shadow:0 24px 40px -24px rgba(0,60,200,.7); overflow:hidden;
  }
  .page-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12); }
  .page-hero-inner{ text-align:left; position:relative; z-index:1; }
  .page-hero .badge{ display:inline-flex !important; padding:5px 11px; font-size:11.5px; }
  .page-hero h1{ margin-top:12px !important; font-size:26px !important; line-height:1.12; }
  .page-hero-inner + div[style*="height"]{ display:none; }
  .url-bar{ margin-top:16px; padding:6px; border-radius:18px; flex-direction:column; align-items:stretch; gap:6px; }
  .url-bar > svg{ display:none; }
  .url-field{ flex:none; height:46px; padding:0 12px; border-radius:13px; background:#F2F5FC; }
  .url-field input[type="url"], .url-field-fake{ padding:0 12px; }
  .url-bar-submit{ min-height:52px; border-radius:14px; font-size:15px; box-shadow:none; }
  .hero-hint{ margin-top:12px; align-items:flex-start; color:rgba(255,255,255,.85); font-size:12px; }
  .dashboard-panel-wrap{ padding:0 var(--m-gap) 24px !important; }
  .dashboard-panel{ transform:none !important; margin-top:26px; padding:0 !important; background:transparent; border:0; box-shadow:none !important; }
  #dashboard-content::before{ content:"Mes sites"; display:block; margin:0 2px 12px; font:800 22px 'Plus Jakarta Sans',system-ui,sans-serif; letter-spacing:-.03em; color:var(--ink); }
  /* onglets = contrôle segmenté */
  .panel-tabs{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:0 !important; padding:4px !important; margin:0 0 14px !important; border-radius:14px; background:#E4E9F4; overflow:visible; }
  .panel-tabs .tab{ min-height:36px; padding:6px 4px; border-radius:10px; font-size:12.5px; color:#4A5470; }
  .panel-tabs .tab.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(11,21,51,.12); }
  .panel-tabs .count{ display:none; }
  /* sites = liste */
  .sites-grid{ display:flex !important; flex-direction:column; gap:10px !important; }
  .site-card{ position:relative; display:grid; grid-template-columns:76px 1fr; align-items:center; gap:0; padding:10px; border:0; border-radius:20px; box-shadow:var(--m-shadow); }
  .site-card:hover{ transform:none; }
  .site-card:active{ transform:scale(.985); }
  .site-card .thumb{ position:static; width:76px; height:76px !important; border-radius:14px; overflow:hidden; }
  .site-card .thumb img{ height:100%; object-fit:cover; object-position:top; }
  .site-card .body{ padding:4px 44px 26px 14px !important; min-width:0; }
  .site-card .title{ font-size:15.5px !important; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .site-card .meta{ font-size:12.5px; }
  .site-card .status{ left:100px; bottom:14px; padding:4px 9px; font-size:11px; }
  .site-card .status.is-draft{ background:var(--brand-50); }
  .site-card::after{ content:""; position:absolute; right:18px; top:50%; width:9px; height:9px; margin-top:-5px; border-right:2.5px solid #B7C0D4; border-top:2.5px solid #B7C0D4; transform:rotate(45deg); }
  .site-card-new{ min-height:0 !important; flex-direction:row; justify-content:flex-start; gap:12px; padding:14px; border-radius:20px; text-align:left; }
  .site-card-new .plus{ flex:none; }
  .site-card-new .label{ font-size:14px; }
  .site-card-new .sub{ margin-left:auto; font-size:11.5px; }
  .dashboard-empty{ background:#fff; border-radius:var(--m-radius); box-shadow:var(--m-shadow); }

  /* ========== CRÉATION (génération) ========== */
  .generating-wrap{ align-items:flex-start; padding:12px var(--m-gap) 24px !important; background:var(--m-bg) !important; }
  .generating-card{ border:0; border-radius:26px; padding:26px 20px !important; box-shadow:var(--m-shadow); }
  .generating-head{ flex-direction:column; text-align:center; gap:14px; }
  .spinner-ring{ width:64px; height:64px; border-width:5px; }
  .generating-head .name{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
  .generating-head .eta{ margin:0; padding:6px 12px; border-radius:999px; background:var(--brand-50); }
  .generating-track{ height:8px; }
  .gen-step{ padding:12px 14px; border-radius:14px; background:var(--m-bg); font-size:14px; }
  .gen-step.is-active{ background:var(--brand-50); }
  .generating-actions{ flex-direction:column; }
  .generating-actions .btn{ width:100%; }

  /* ========== APERÇU ========== */
  .preview-toolbar{ position:sticky; top:calc(56px + env(safe-area-inset-top)); z-index:20; padding:10px var(--m-gap) !important; background:var(--m-bg); border:0; flex-wrap:nowrap; }
  .preview-toolbar .btn-back{ flex:none; }
  .preview-toolbar .info{ min-width:0; flex:1; }
  .preview-toolbar .info .title{ font-size:15px; font-weight:800; }
  .viewport-toggle{ display:none; }
  .preview-toolbar .actions{
    position:fixed; left:var(--m-gap); right:var(--m-gap); bottom:calc(var(--tabbar-h) + 10px); z-index:60;
    display:grid !important; grid-template-columns:1fr 1.4fr; gap:8px; width:auto !important; margin:0 !important;
    padding:8px; border-radius:22px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 18px 40px -18px rgba(11,21,51,.45);
  }
  .preview-toolbar .actions .btn{ display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 8px; font-size:12.5px; white-space:nowrap; letter-spacing:-.01em; }
  .preview-stage{ padding:4px var(--m-gap) 12px !important; }
  .preview-frame, .preview-frame.is-mobile{ max-width:100% !important; border:0; border-radius:24px; box-shadow:var(--m-shadow); }
  .preview-frame-bar{ display:none; }
  .preview-viewport{ height:calc(100vh - 260px) !important; min-height:360px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .preview-stats{ padding:0 var(--m-gap) calc(96px) !important; }
  .preview-stats-inner{ border:0; border-radius:var(--m-radius); gap:8px; }
  .preview-stats-inner > span:not(.fill):not(:empty){ padding:6px 10px; border-radius:999px; background:var(--m-bg); }
  .preview-stats-inner > span:nth-child(even){ display:none; }

  /* ========== PUBLICATION ========== */
  .publish-card{ padding:18px !important; margin-top:6px; }
  .included-item{ border:0; background:var(--m-bg); border-radius:16px; }
  .publish-footer{
    position:sticky; bottom:calc(var(--tabbar-h) + 8px); z-index:30; margin:4px -8px -8px;
    padding:12px; border-radius:20px; background:rgba(255,255,255,.95); box-shadow:0 18px 40px -18px rgba(11,21,51,.45);
  }
  .domain-option{ border-radius:18px; padding:16px; }

  /* ========== DEVIS ========== */
  .invoice-grid{ margin-top:0; gap:14px; }
  .invoice-form{ padding:18px !important; }
  .invoice-line{ border:0; background:var(--m-bg); border-radius:16px; padding:12px 14px; }
  .invoice-line input{ border:0; background:#fff; border-radius:12px; font-weight:700; }
  .invoice-totals .row.is-total{ font-size:20px; font-weight:800; }
  .invoice-form .actions{ position:sticky; bottom:calc(var(--tabbar-h) + 8px); z-index:30; }
  .invoice-form .actions .btn{ box-shadow:0 16px 30px -12px rgba(0,82,255,.8); }

  /* ========== CRÉDITS ========== */
  .credits-summary{ margin-top:0 !important; padding:22px !important; border-radius:26px; }
  .credits-summary .amount{ font-size:44px !important; font-weight:800; }
  .credits-summary .tags{ gap:6px; }
  .credit-packs{
    display:flex !important; gap:12px !important; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:18px calc(var(--m-gap) * -1) 0 !important; padding:4px var(--m-gap) 16px; scrollbar-width:none;
  }
  .credit-packs::-webkit-scrollbar{ display:none; }
  .pack-card{ flex:0 0 80%; scroll-snap-align:center; border:0 !important; border-radius:24px !important; box-shadow:var(--m-shadow) !important; padding:20px !important; }
  .pack-card.is-current, .pack-card.is-highlight{ box-shadow:0 0 0 2px var(--brand), 0 20px 40px -24px rgba(0,82,255,.7) !important; }
  .pack-card .price .amount{ font-size:38px !important; }
  .pack-card .desc{ flex:1; }
  .consumption-card{ margin-top:18px !important; }

  /* ========== RÉGLAGES ========== */
  .m-logout{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; border:0; border-radius:var(--m-radius);
    background:#fff; color:#D6334A; font:700 15px 'Plus Jakarta Sans',system-ui,sans-serif; box-shadow:var(--m-shadow); }

  /* ========== INSCRIPTION / CONNEXION : écran d'accueil d'app ========== */
  .auth-shell{ display:block; min-height:100vh;
    background:radial-gradient(600px 300px at 20% 0%,#9FBCFF 0%,rgba(159,188,255,0) 60%),linear-gradient(180deg,#3E75FF 0%,#0052FF 45%,#3D2FD9 100%); }
  .auth-panel{ background:transparent; padding:calc(28px + env(safe-area-inset-top)) var(--m-gap) calc(28px + env(safe-area-inset-bottom)) !important; }
  .auth-brand .name, .auth-title, .auth-sub, .auth-footnote, .auth-switch, .auth-switch span{ color:#fff !important; }
  .auth-brand img.mark{ background:#fff; border-radius:12px; padding:6px; width:42px; height:42px; }
  .auth-title{ margin-top:28px; font-size:32px !important; }
  .auth-sub{ color:rgba(255,255,255,.85) !important; }
  .auth-form{ margin-top:22px; padding:20px 18px; border-radius:26px; background:#fff; box-shadow:0 30px 60px -30px rgba(0,20,80,.7); }
  .auth-footnote{ opacity:.8; }
  .auth-switch a{ color:#fff !important; text-decoration:underline; }
  .auth-showcase{ display:none; }
  .field input{ border-radius:14px; min-height:50px; background:#F7F9FE; }
}

/* Petits téléphones (iPhone SE…) : les deux boutons de l'aperçu
   débordaient. On autorise le retour à la ligne et on resserre. */
@media (max-width:380px){
  .preview-toolbar .actions{ grid-template-columns:1fr 1fr; }
  .preview-toolbar .actions .btn{ white-space:normal; line-height:1.15; font-size:12px; text-align:center; padding:0 6px; }
}