/* ==========================================================================
   ResizeMe — feuille de style partagée
   Application, authentification, historique, paywall.
   L'identité visuelle (polices, couleurs, coins de cadre) reprend strictement
   celle de la landing page — cf. §4.1 du cahier des charges.
   ========================================================================== */

:root{
  --ink:#14141a;
  --ink-soft:#4a4a55;
  --ink-mute:#8a8a94;
  --paper:#faf9f7;
  --paper-dim:#f0eee9;
  --line:#e4e1da;
  --violet:#6c5ce7;
  --blue:#4fa8ff;
  --grad: linear-gradient(100deg, var(--violet), var(--blue));
  --dark:#0e0e12;
  --dark-soft:#c9c8d1;
  --dark-line:#26262e;
  --danger:#c65a5a;
  --danger-bg:#fdf1f1;
  --success:#2f8f5b;
  --success-bg:#eef8f2;
  --radius:20px;
  --sidebar-w:236px;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-0.02em; line-height:1.1;}
button{font-family:inherit;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--violet); display:inline-flex; align-items:center; gap:8px;
}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

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

/* --- motif signature : coins de cadre façon viseur -------------------------- */
.frame-corners{position:relative;}
.frame-corners::before, .frame-corners::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  border-color:var(--violet); transition:all .5s cubic-bezier(.2,.8,.2,1);
}
.frame-corners::before{top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; border-top-left-radius:6px;}
.frame-corners::after{bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; border-bottom-right-radius:6px;}
.frame-corners:hover::before{top:-8px; left:-8px;}
.frame-corners:hover::after{bottom:-8px; right:-8px;}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn{
  font-family:var(--body); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid transparent; background:none; color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease, border-color .2s ease;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,20,26,0.22);}
.btn-grad{background:var(--grad); color:#fff;}
.btn-grad:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(108,92,231,0.35);}
.btn-blue{background:linear-gradient(100deg,#2f6fed,#4fa8ff); color:#fff;}
.btn-blue:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(47,111,237,0.35);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-danger{background:#fff4f3; color:#b42318; border-color:#f4c7c2;}
.btn-danger:hover{border-color:#b42318; transform:translateY(-1px);}
.btn-lg{padding:15px 28px; font-size:15.5px;}
.btn-block{width:100%;}
.btn:disabled, .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.btn.is-loading{pointer-events:none; opacity:.75;}
.btn.is-loading .btn-label{opacity:.55;}
.btn.is-loading::after{
  content:""; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; animation:rm-spin .7s linear infinite;
}
@keyframes rm-spin{to{transform:rotate(360deg);}}

.btn-google{background:#fff; border-color:var(--line); color:var(--ink); width:100%;}
.btn-google:hover{border-color:var(--ink);}
.btn-icon{width:18px; height:18px; flex:none;}

/* ==========================================================================
   BARRE DE NAVIGATION
   ========================================================================== */
.topnav{
  position:sticky; top:0; z-index:100; backdrop-filter:blur(14px);
  background:rgba(250,249,247,0.82); border-bottom:1px solid var(--line);
}
.topnav nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; max-width:1180px; margin:0 auto;
}
.logo{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px;}
.logo-mark{width:22px; height:22px; border-radius:6px; background:var(--grad); display:inline-block; position:relative; flex:none;}
.logo-mark::before{content:""; position:absolute; inset:5px; border:2px solid #fff; border-radius:2px; opacity:.9;}

.user-menu{display:flex; align-items:center; gap:14px;}
.plan-chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--line); background:#fff; font-family:var(--mono); font-size:12px;
  color:var(--ink-soft); white-space:nowrap; transition:border-color .2s ease, color .2s ease;
}
.plan-chip:hover{border-color:var(--violet); color:var(--ink);}
.plan-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none;}
.plan-chip.is-paid{border-color:var(--violet); color:var(--ink);}
/* ==========================================================================
   BARRE LATÉRALE
   ========================================================================== */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:120;
  background:var(--dark); color:var(--dark-soft); padding:22px 16px;
  display:flex; flex-direction:column; gap:26px; border-right:1px solid var(--dark-line);
}
.sidebar .sb-logo{
  font-family:var(--display); font-weight:700; font-size:18px; color:#fff;
  display:flex; align-items:center; gap:9px; padding:4px 8px 0;
}
.sidebar nav{display:flex; flex-direction:column; gap:4px;}
.sb-link{
  display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
  font-size:14.5px; font-weight:500; color:var(--dark-soft);
  transition:background .2s ease, color .2s ease;
}
.sb-link svg{width:18px; height:18px; flex:none;}
.sb-link:hover{background:rgba(255,255,255,0.06); color:#fff;}
.sb-link.active{background:var(--grad); color:#fff; box-shadow:0 10px 22px -12px rgba(108,92,231,0.8);}
.sb-foot{margin-top:auto; display:flex; flex-direction:column; gap:12px;}
.sb-quota{
  background:rgba(255,255,255,0.05); border:1px solid var(--dark-line); border-radius:13px; padding:14px;
}
.sb-quota .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#7d7c8c;}
.sb-quota .val{font-family:var(--display); font-weight:600; font-size:15px; color:#fff; margin:6px 0 10px;}
.sb-bar{height:5px; border-radius:100px; background:rgba(255,255,255,0.1); overflow:hidden;}
.sb-bar span{display:block; height:100%; border-radius:100px; background:var(--grad); transition:width .4s ease;}
.sb-upgrade{
  display:block; text-align:center; padding:10px; border-radius:11px; background:var(--grad); color:#fff;
  font-size:13.5px; font-weight:600;
}
.sb-signout{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:11px; border:none;
  background:none; color:#8a899a; font-family:var(--body); font-size:13.5px; cursor:pointer;
}
.sb-signout:hover{background:rgba(255,255,255,0.06); color:#fff;}

.sb-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:160; width:40px; height:40px;
  border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.sb-toggle span{display:block; width:17px; height:2px; background:var(--ink); border-radius:2px;}
.sb-scrim{position:fixed; inset:0; background:rgba(14,14,18,0.45); z-index:110; display:none;}
.sb-scrim.open{display:block;}

body.has-sidebar .topnav nav,
body.has-sidebar .app-shell .wrap{max-width:1000px;}
body.has-sidebar .topnav, body.has-sidebar .app-shell{margin-left:var(--sidebar-w);}

/* ==========================================================================
   COQUE APPLICATIVE
   ========================================================================== */
.app-shell{padding:44px 0 90px; min-height:calc(100vh - 64px);}

.panel{display:none;}
.panel.active{display:block; animation:rm-fade .35s ease;}
@keyframes rm-fade{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

.panel-head{text-align:center; max-width:600px; margin:0 auto 34px;}
.panel-head h2{font-size:clamp(23px,3vw,30px); margin-bottom:10px;}
.panel-head p{color:var(--ink-soft); font-size:15.5px;}

/* --- page Paramètres ------------------------------------------------------- */
.settings-wrap{max-width:700px;}
.settings-header{margin:0 0 22px; padding:0 4px;}
.settings-header h2{font-size:clamp(26px,3vw,34px); margin:8px 0 6px;}
.settings-header p{color:var(--ink-soft); font-size:14.5px;}
.settings-card{
  background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; margin-bottom:14px; box-shadow:0 12px 28px -24px rgba(20,20,26,.4);
}
.settings-card-head{
  display:flex; align-items:center; gap:12px; padding-bottom:16px;
  margin-bottom:17px; border-bottom:1px solid var(--line);
}
.settings-section-icon{
  width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; color:#fff; background:var(--grad); box-shadow:0 8px 16px -10px rgba(108,92,231,.75);
}
.settings-section-icon svg{width:19px; height:19px;}
.settings-card-head h3{font-size:17px; margin-bottom:3px;}
.settings-card-head p{color:var(--ink-soft); font-size:13px;}
.settings-card-content{display:grid; gap:16px;}
.settings-description{color:var(--ink-soft); font-size:13.5px; line-height:1.55;}
.settings-plan{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.settings-plan strong{font-family:var(--display); font-size:19px; letter-spacing:-.02em;}
.settings-plan p{margin:4px 0 0; color:var(--ink-soft); font-size:13.5px;}
.settings-plan-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.settings-cancellation{margin:15px 0 0; padding:11px 13px; border:1px solid #ead8b4; border-radius:11px; background:#fffaf0; color:#7a4b00; font-size:13.5px; line-height:1.5;}

/* --- fil des étapes -------------------------------------------------------- */
.wizard-steps{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin:0 auto 20px; max-width:640px;
}
.wizard-step{display:flex; align-items:center; gap:9px; opacity:.45; transition:opacity .3s ease;}
.wizard-step .num{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12.5px; background:#fff; border:1px solid var(--line); color:var(--ink-soft);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.wizard-step .label{font-size:13.5px; font-weight:500; white-space:nowrap;}
.wizard-step.active{opacity:1;}
.wizard-step.active .num{background:var(--grad); border-color:transparent; color:#fff;}
.wizard-step.done{opacity:1;}
.wizard-step.done .num{background:var(--ink); border-color:var(--ink); color:#fff;}
.wizard-connector{flex:1; height:1px; background:var(--line); margin:0 14px; min-width:20px;}

.quota-info{
  text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-mute);
  margin-bottom:34px; min-height:18px;
}

/* --- zone de dépôt --------------------------------------------------------- */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; padding:58px 28px; border:1.6px dashed var(--line); border-radius:var(--radius);
  background:#fff; cursor:pointer; transition:border-color .25s ease, background .25s ease, transform .25s ease;
  max-width:640px; margin:0 auto;
}
.dropzone:hover{border-color:var(--violet); background:#fefeff;}
.dropzone.dragover{border-color:var(--violet); background:rgba(108,92,231,0.05); transform:scale(1.01);}
.dropzone input[type=file]{display:none;}
.dz-icon{
  width:52px; height:52px; border-radius:16px; background:rgba(108,92,231,0.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.dropzone h3{font-size:18px;}
.dropzone p{color:var(--ink-soft); font-size:14.5px;}
.dz-formats{font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); margin-top:10px;}

.upload-preview{max-width:640px; margin:0 auto; text-align:center;}
.upload-preview img{
  max-height:340px; width:auto; margin:0 auto 16px; border-radius:16px;
  border:1px solid var(--line); box-shadow:0 20px 44px -26px rgba(20,20,26,0.4);
}
.upload-meta{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); margin-bottom:22px;}

/* --- bandeaux -------------------------------------------------------------- */
.error-banner{
  display:none; align-items:flex-start; gap:10px; max-width:640px; margin:22px auto 0;
  padding:13px 16px; border-radius:13px; background:var(--danger-bg);
  border:1px solid rgba(198,90,90,0.28); color:#8f3b3b; font-size:14px;
}
.error-banner.show{display:flex;}
.local-notice, .resume-notice{
  display:none; align-items:flex-start; gap:10px; max-width:660px; margin:0 auto 26px;
  padding:13px 16px; border-radius:13px; background:rgba(108,92,231,0.07);
  border:1px solid rgba(108,92,231,0.22); color:var(--ink-soft); font-size:13.5px;
}
.local-notice.show, .resume-notice.show{display:flex;}

/* --- grille de formats ----------------------------------------------------- */
.format-grid-app{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:820px; margin:0 auto;
}
.fmt-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 16px; text-align:center;
  cursor:pointer; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fmt-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -22px rgba(20,20,26,0.28);}
.fmt-card.selected{border-color:var(--violet); box-shadow:0 0 0 3px rgba(108,92,231,0.14);}
.fmt-shape{
  margin:0 auto 12px; background:var(--paper-dim); border:1px solid var(--line); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
}
.fmt-card.selected .fmt-shape{border-color:var(--violet); background:rgba(108,92,231,0.08);}
.fmt-card h4{font-family:var(--display); font-weight:600; font-size:14px; margin-bottom:3px;}
.fmt-card span{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);}
.fmt-card .fmt-px{font-size:10.5px; color:var(--ink-mute); margin-top:2px;}

.custom-panel{
  display:none; max-width:520px; margin:26px auto 0; background:#fff;
  border:1px solid var(--line); border-radius:16px; padding:24px;
}
.custom-panel.show{display:block;}
.custom-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.custom-ratio{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}

/* --- champs de formulaire -------------------------------------------------- */
.field{margin-bottom:16px; text-align:left;}
.field label{display:block; font-size:13.5px; font-weight:500; margin-bottom:7px; color:var(--ink);}
.field input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:#fff; font-family:var(--body); font-size:15px; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(108,92,231,0.13);}
.field input.invalid{border-color:var(--danger); box-shadow:0 0 0 3px rgba(198,90,90,0.1);}
.field-hint{font-size:12.5px; color:var(--ink-mute); margin-top:6px;}
.field-error{display:none; font-size:12.5px; color:var(--danger); margin-top:6px;}
.field-error.show{display:block;}
.field-pw-row{position:relative; display:flex; align-items:center;}
.field-pw-row input{padding-right:82px;}
.pw-toggle{
  position:absolute; right:8px; border:none; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; color:var(--violet); padding:6px 8px; border-radius:8px;
}
.pw-toggle:hover{background:var(--paper-dim);}

/* --- scène canvas ---------------------------------------------------------- */
.canvas-stage{display:flex; justify-content:center; margin:0 auto;}
.result-image-frame{
  display:flex; justify-content:center; max-width:100%; overflow:hidden;
  border:1px solid var(--line); border-radius:20px; background:var(--paper-dim);
  box-shadow:0 24px 60px -30px rgba(20,20,26,0.38);
}
.result-image{display:block; max-width:100%; max-height:min(60vh,520px); width:auto; height:auto;}
.result-metadata{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
  margin:18px auto 0; max-width:760px;
}
.result-meta-chip{
  display:inline-flex; align-items:center; min-height:30px; padding:6px 11px;
  border:1px solid var(--line); border-radius:100px; background:#fff;
  color:var(--ink-soft); font-family:var(--mono); font-size:11.5px; line-height:1;
}
.canvas-frame{
  position:relative; border-radius:18px; overflow:hidden; background:var(--paper-dim);
  border:1px solid var(--line); box-shadow:0 30px 64px -34px rgba(20,20,26,0.45);
  max-width:100%; line-height:0;
}
.canvas-frame canvas{display:block; max-width:100%; max-height:min(60vh,520px); width:auto; height:auto;}

.progress-overlay{
  position:absolute; inset:0; z-index:5; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; padding:20px;
  background:rgba(14,14,18,0.78); backdrop-filter:blur(3px); color:#fff; line-height:1.5;
}
.progress-overlay.show{display:flex;}
.progress-ring{
  width:46px; height:46px; border-radius:50%; border:3px solid rgba(255,255,255,0.2);
  border-top-color:#fff; animation:rm-spin .9s linear infinite;
}
.progress-label{font-family:var(--mono); font-size:13px; letter-spacing:.02em;}
.progress-track{width:min(280px,75%); height:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.2);}
.progress-bar{display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#fff); transition:width .45s ease;}
.progress-percent{font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.82);}
.progress-steps{display:flex; gap:8px;}
.progress-dot{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.25); transition:background .3s ease;
}
.progress-dot.active{background:#fff;}
.progress-dot.done{background:var(--blue);}

.gen-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px;}

/* --- comparateur avant / après --------------------------------------------- */
.compare-slider{
  position:relative; max-width:100%; border-radius:20px; overflow:hidden; background:var(--paper-dim);
  box-shadow:0 30px 70px -32px rgba(20,20,26,0.42); user-select:none; -webkit-user-select:none;
  cursor:grab; touch-action:pan-y; line-height:0;
}
.compare-slider.dragging{cursor:grabbing;}
.compare-base{position:relative; z-index:0; display:block; max-width:100%; max-height:min(60vh,520px); width:auto; height:auto;}
.compare-clip{position:absolute; z-index:1; inset:0; clip-path:inset(0 50% 0 0); will-change:clip-path;}
.compare-top{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--paper-dim);}
.compare-tag{
  position:absolute; top:14px; z-index:3; font-family:var(--mono); font-size:10.5px;
  background:rgba(14,14,18,0.68); color:#fff; padding:5px 11px; border-radius:100px; pointer-events:none;
}
.compare-tag-left{left:14px;}
.compare-tag-right{right:14px;}
.compare-divider{position:absolute; top:0; bottom:0; left:50%; width:0; z-index:4; will-change:left;}
.compare-divider::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:2.5px; background:rgba(255,255,255,0.9);
  transform:translateX(-50%); box-shadow:0 0 12px rgba(0,0,0,0.25);
}
.compare-handle{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:42px; height:42px;
  border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--ink); box-shadow:0 8px 22px rgba(20,20,26,0.28); pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.compare-slider:hover .compare-handle{transform:translate(-50%,-50%) scale(1.08);}
.compare-slider.dragging .compare-handle{transform:translate(-50%,-50%) scale(1.16);}

/* ==========================================================================
   MODALES (paywall, filigrane)
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(14,14,18,0.6); backdrop-filter:blur(5px); overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal-card{
  position:relative; background:var(--paper); border-radius:24px; padding:44px 36px 36px;
  width:100%; max-width:1000px; margin:auto; box-shadow:0 40px 90px -30px rgba(0,0,0,0.55);
  animation:rm-pop .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes rm-pop{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-size:14px; color:var(--ink-soft);
}
.modal-close:hover{border-color:var(--ink); color:var(--ink);}
.modal-head{text-align:center; max-width:520px; margin:0 auto 38px;}
.modal-head h2{font-size:clamp(22px,3vw,29px); margin:12px 0 10px;}
.modal-head p{color:var(--ink-soft); font-size:15px;}
.cancel-modal{max-width:560px;}
.cancel-modal .modal-head{text-align:left; margin-bottom:24px;}
.cancel-reasons{display:grid; gap:10px; margin:0 0 20px; padding:0; border:0;}
.cancel-reasons legend{font-weight:600; margin-bottom:12px;}
.cancel-reason{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.cancel-reason:has(input:checked){border-color:var(--violet); background:#f7f5ff;}
.cancel-reason input{accent-color:var(--violet);}
.cancel-comment{display:grid; gap:8px; margin-bottom:24px; font-size:14px; font-weight:600;}
.cancel-comment textarea{
  width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font:inherit; color:var(--ink); background:#fff;
}
.cancel-comment textarea:focus{outline:2px solid rgba(108,92,231,.22); border-color:var(--violet);}
.cancel-actions{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 26px 28px;
  display:flex; flex-direction:column; position:relative;
}
.price-card.featured{border:1.5px solid var(--violet);}
.price-featured-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad); color:#fff;
  font-family:var(--mono); font-size:11px; padding:5px 14px; border-radius:100px; white-space:nowrap;
}
.plan-icon{
  position:absolute; top:-20px; left:26px; width:40px; height:40px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -8px rgba(108,92,231,0.55);
}
.price-card h3{font-size:17px; margin:22px 0 6px;}
.price-amount{font-family:var(--display); font-size:32px; font-weight:700; margin:8px 0 20px;}
.price-amount span{font-size:14px; font-weight:500; color:var(--ink-soft);}
.price-card ul{list-style:none; margin-bottom:24px; flex:1;}
.price-card li{font-size:14.5px; padding:7px 0; color:var(--ink-soft); display:flex; gap:8px;}
.price-card li::before{content:"✓"; color:var(--violet); font-weight:700;}
.price-card .btn{width:100%; margin-top:auto;}

.paywall-foot{
  text-align:center; margin-top:30px; font-family:var(--mono); font-size:12px;
  color:var(--ink-mute); max-width:620px; margin-inline:auto; line-height:1.7;
}

/* --- popup filigrane ------------------------------------------------------- */
.wm-card{max-width:460px; text-align:center; padding:40px 32px 32px;}
.wm-icon{
  width:52px; height:52px; border-radius:16px; background:var(--grad); margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -10px rgba(108,92,231,0.6);
}
.wm-card h2{font-size:22px; margin-bottom:12px;}
.wm-card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:26px;}
.wm-actions{display:flex; flex-direction:column; gap:12px; align-items:center;}
.wm-actions .btn{width:100%;}
.wm-later{
  border:none; background:none; cursor:pointer; font-family:var(--body); font-size:13.5px;
  color:var(--ink-soft); text-decoration:underline; padding:4px;
}
.wm-later:hover{color:var(--ink);}

/* ==========================================================================
   AUTHENTIFICATION
   ========================================================================== */
.auth-shell{
  min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:44px 24px 70px;
}
.auth-card{
  position:relative; width:100%; max-width:452px; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:38px 34px 32px; box-shadow:0 34px 80px -40px rgba(20,20,26,0.4);
}
.auth-back{
  position:absolute; top:-30px; left:2px; font-size:13px; color:var(--ink-soft); font-family:var(--mono);
}
.auth-back:hover{color:var(--ink);}
.auth-head{text-align:center; margin-bottom:26px;}
.auth-logo{
  width:44px; height:44px; border-radius:14px; background:var(--grad); margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -10px rgba(108,92,231,0.6);
}
.auth-head h1{font-size:23px; margin-bottom:8px;}
.auth-head p{color:var(--ink-soft); font-size:14.5px;}

.tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--paper-dim); border-radius:100px; margin-bottom:24px;
}
.tab-btn{
  padding:10px; border:none; border-radius:100px; background:none; cursor:pointer;
  font-family:var(--body); font-size:14px; font-weight:600; color:var(--ink-soft); transition:all .25s ease;
}
.tab-btn.active{background:#fff; color:var(--ink); box-shadow:0 3px 10px -4px rgba(20,20,26,0.25);}

.form-alert{
  display:none; align-items:flex-start; gap:9px; padding:12px 14px; border-radius:12px;
  font-size:13.5px; margin-bottom:18px; line-height:1.45;
}
.form-alert.show{display:flex;}
.form-alert.error{background:var(--danger-bg); border:1px solid rgba(198,90,90,0.28); color:#8f3b3b;}
.form-alert.success{background:var(--success-bg); border:1px solid rgba(47,143,91,0.28); color:#1f6b42;}

.auth-panel .btn-block{margin-top:6px;}
.divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 16px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); text-transform:uppercase;
}
.divider::before, .divider::after{content:""; flex:1; height:1px; background:var(--line);}
.auth-foot{text-align:center; font-size:12.5px; color:var(--ink-mute); margin-top:20px; line-height:1.6;}
.auth-foot a{color:var(--violet); text-decoration:underline;}

/* ==========================================================================
   HISTORIQUE
   ========================================================================== */
.history-intro{margin-top:8px; color:var(--ink-soft); font-size:14px;}
.history-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px;}
.hist-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease;
}
.hist-card:hover{transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(20,20,26,0.3);}
.hist-open{
  display:flex; flex-direction:column; flex:1; width:100%; padding:0; border:0; background:#fff;
  color:inherit; text-align:left; cursor:pointer; font:inherit;
}
.hist-open:focus-visible{outline:3px solid rgba(108,92,231,0.35); outline-offset:-3px;}
.hist-thumb{
  aspect-ratio:4/3; background:var(--paper-dim); display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-bottom:1px solid var(--line);
}
.hist-thumb img{width:100%; height:100%; object-fit:contain;}
.hist-thumb-placeholder{color:var(--ink-mute); font-size:28px;}
.hist-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.hist-body h4{font-family:var(--display); font-weight:600; font-size:14.5px;}
.hist-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-mute);}
.hist-view-hint{margin-top:auto; padding-top:10px; color:var(--violet); font-family:var(--mono); font-size:11px;}
.hist-actions{display:flex; gap:8px; padding:0 14px 14px;}
.hist-actions .btn{flex:1; white-space:nowrap;}
.btn-danger{border:1px solid rgba(198,90,90,0.3); color:#9a3e3e; background:#fff;}
.btn-danger:hover{background:var(--danger-bg); border-color:rgba(198,90,90,0.5);}

.empty-state{text-align:center; padding:70px 24px; color:var(--ink-soft); max-width:420px; margin:0 auto;}
.empty-state svg{width:56px; height:56px; margin:0 auto 20px; color:var(--line);}
.empty-state h3{font-size:19px; color:var(--ink); margin-bottom:8px;}
.empty-state p{font-size:14.5px; margin-bottom:24px;}

.history-viewer-card{max-width:960px; padding:42px 30px 30px;}
.history-viewer-head{margin-bottom:22px;}
.history-viewer-head p{font-size:14px;}
.history-viewer-image{
  min-height:220px; max-height:min(62vh,640px); display:flex; align-items:center; justify-content:center;
  padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--paper-dim); overflow:hidden;
}
.history-viewer-image img{display:block; max-width:100%; max-height:min(58vh,600px); width:auto; height:auto; object-fit:contain;}
.history-viewer-metadata{margin-top:16px;}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:300;
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:100px; font-size:14px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,0.5); opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease; max-width:calc(100vw - 40px); text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .format-grid-app{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 900px){
  body.has-sidebar .topnav, body.has-sidebar .app-shell{margin-left:0;}
  .sidebar{transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);}
  .sidebar.open{transform:none;}
  .sb-toggle{display:flex;}
  .topnav nav{padding-left:62px;}
  .pricing-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}
  .modal-card{padding:40px 24px 28px;}
}
@media (max-width: 680px){
  .wrap{padding:0 20px;}
  .app-shell{padding:28px 0 70px;}
  .settings-wrap{padding:0 16px;}
  .settings-card{padding:19px 18px;}
  .settings-card-head{align-items:flex-start;}
  .settings-plan-actions{width:100%;}
  .settings-plan-actions .btn{width:100%;}
  .wizard-step .label{display:none;}
  .wizard-connector{margin:0 8px;}
  .format-grid-app{grid-template-columns:repeat(2,1fr); gap:12px;}
  .custom-row{grid-template-columns:1fr;}
  .dropzone{padding:40px 20px;}
  .gen-actions{flex-direction:column;}
  .gen-actions .btn{width:100%;}
  .auth-card{padding:30px 22px 26px;}
  .auth-back{position:static; display:inline-block; margin-bottom:16px;}
   .history-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
   .hist-actions{flex-direction:column;}
  .history-viewer-card{padding:38px 16px 20px;}
  .history-viewer-image{min-height:160px; padding:8px;}
  .history-viewer-image img{max-height:55vh;}
}
@media (max-width: 420px){
  .logo{font-size:17px;}
  .plan-chip{padding:6px 10px; font-size:11px;}
  .format-grid-app{grid-template-columns:1fr 1fr;}
  .btn{padding:10px 16px; font-size:13.5px;}
  .btn-lg{padding:13px 20px; font-size:14.5px;}
}
@media (hover: none) and (pointer: coarse){
  .frame-corners:hover::before{top:-1px; left:-1px;}
  .frame-corners:hover::after{bottom:-1px; right:-1px;}
  .fmt-card:hover, .hist-card:hover{transform:none;}
}