/* ============================================================
   SankaCloud — Design System 2026
   Aesthetic: Dark glass-morphism · Hexagonal identity · Violet/Indigo
   ============================================================ */

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  /* Palette */
  --col-bg:        #080810;
  --col-bg2:       #0d0d1a;
  --col-surface:   #12121f;
  --col-surface2:  #1a1a2e;
  --col-surface3:  #20203a;
  --col-border:    rgba(120,120,200,.1);
  --col-border2:   rgba(140,140,220,.18);

  --col-text:      #eeeeff;
  --col-text2:     #8080aa;
  --col-text3:     #44445a;

  --col-accent:    #7c6af7;
  --col-accent2:   #9d8ff9;
  --col-accent3:   #bdb0fb;
  --col-green:     #34d399;
  --col-blue:      #38bdf8;
  --col-red:       #f87171;

  /* Spacing */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10:40px;  --space-12:48px;
  --space-16:64px;  --space-20:80px;

  /* Radius */
  --r-sm:  8px;  --r-md: 12px;  --r-lg: 16px;
  --r-xl: 24px;  --r-2xl:32px;  --r-full:9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 48px rgba(0,0,0,.6);
  --shadow-glow:0 0 60px rgba(124,106,247,.12);
  --shadow-glow-strong: 0 0 40px rgba(124,106,247,.25);

  /* Typography */
  --font-body:  'Cabinet Grotesk', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
}

body {
  font-family: var(--font-body);
  background: var(--col-bg);
  color: var(--col-text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Background Layers ── */
.bg-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(124,106,247,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,106,247,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); animation: orb-float 10s ease-in-out infinite;
}
.bg-orb--1 { width:600px;height:600px;background:rgba(124,106,247,.08);top:-100px;left:-100px; }
.bg-orb--2 { width:400px;height:400px;background:rgba(56,189,248,.06);bottom:0;right:-50px;animation-delay:-4s; }
.bg-orb--3 { width:300px;height:300px;background:rgba(52,211,153,.05);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-7s; }
@keyframes orb-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
.bg-noise {
  position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); position: relative; z-index: 1; }
.container--narrow { max-width: 680px; }

/* ── Typography ── */
h1,h2,h3,h4 { font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }

/* ── Header ── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,8,16,.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--col-border);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6);
}
.header__nav { display: flex; align-items: center; gap: var(--space-4); }
.nav__link { color: var(--col-text2); text-decoration: none; font-weight: 600; font-size: .875rem; transition: color .2s; }
.nav__link:hover { color: var(--col-text); }

/* ── Logo ── */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--col-text); font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.logo__icon { width: 28px; height: 28px; color: var(--col-accent); }
.logo__accent { color: var(--col-accent2); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-md); font-family: var(--font-body);
  font-size: .9rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: all .2s cubic-bezier(.4,0,.2,1); border: 1px solid transparent;
  white-space: nowrap; line-height: 1;
}
.btn--primary { background: var(--col-accent); color: #fff; border-color: var(--col-accent); }
.btn--primary:hover { background: var(--col-accent2); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(124,106,247,.35); }
.btn--outline { background: transparent; color: var(--col-text); border-color: var(--col-border2); }
.btn--outline:hover { border-color: var(--col-accent); color: var(--col-accent2); }
.btn--ghost { background: var(--col-surface2); color: var(--col-text); border-color: var(--col-border); }
.btn--ghost:hover { background: var(--col-surface3); border-color: var(--col-border2); }
.btn--danger { background: rgba(248,113,113,.1); color: var(--col-red); border-color: rgba(248,113,113,.3); }
.btn--danger:hover { background: rgba(248,113,113,.2); }
.btn--sm { padding: 6px 14px; font-size: .8rem; border-radius: var(--r-sm); }
.btn--lg { padding: 14px 28px; font-size: 1rem; border-radius: var(--r-lg); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Pills ── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--r-full);
  background: rgba(124,106,247,.1); border: 1px solid rgba(124,106,247,.25);
  color: var(--col-accent3); font-size: .8rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.pill--glow { box-shadow: 0 0 20px rgba(124,106,247,.15); }
.pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--col-green); box-shadow: 0 0 8px var(--col-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.85)} }

/* ── Cards ── */
.card {
  background: var(--col-surface);
  border: 1px solid var(--col-border);
  border-radius: var(--r-xl);
  padding: var(--space-6);
}
.card__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-4); color: var(--col-text2); text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }

/* ── Sections ── */
.section__title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; margin-bottom: var(--space-3); }
.section__sub { color: var(--col-text2); font-size: 1rem; margin-bottom: var(--space-10); }

/* ── Hero ── */
.hero { padding: var(--space-20) 0 var(--space-16); }
.hero__inner { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: center; }
.hero__content {}
.hero__title {
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 900; line-height: 1.0; letter-spacing: -.04em;
  margin: var(--space-5) 0 var(--space-5);
}
.hero__mark {
  background: linear-gradient(135deg, var(--col-accent) 0%, var(--col-accent3) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
}
.hero__desc { color: var(--col-text2); font-size: 1.1rem; line-height: 1.7; margin-bottom: var(--space-8); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-10); }
.hero__stats { display: flex; align-items: center; gap: var(--space-6); }
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-num { font-size: 1.5rem; font-weight: 900; color: var(--col-text); font-family: var(--font-mono); }
.hero__stat-lbl { font-size: .7rem; color: var(--col-text3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero__divider { width: 1px; height: 44px; background: var(--col-border2); }

/* Hero visual */
.hero__visual { position: relative; height: 340px; }
.hero__card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: rgba(18,18,31,.85); backdrop-filter: blur(20px);
  border: 1px solid var(--col-border2); border-radius: var(--r-lg);
  padding: 12px 20px; font-size: .85rem; font-weight: 700;
  box-shadow: var(--shadow-md); animation: card-float 7s ease-in-out infinite;
}
.hero__card--1 { top: 40px; left: 0; animation-delay: 0s; }
.hero__card--2 { top: 130px; right: 20px; animation-delay: -2.5s; }
.hero__card--3 { bottom: 60px; left: 30px; animation-delay: -5s; }
.hero__card-dot { width: 9px; height: 9px; border-radius: 50%; }
.hero__card-dot--green { background: var(--col-green); box-shadow: 0 0 10px var(--col-green); }
.hero__card-dot--blue  { background: var(--col-blue);  box-shadow: 0 0 10px var(--col-blue); }
@keyframes card-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

.hero__hex-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; opacity: .15; padding: 20px; }
.hex {
  aspect-ratio: 1; background: var(--col-surface2); border: 1px solid var(--col-border2);
  border-radius: 6px; animation: hex-pulse 4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes hex-pulse { 0%,100%{opacity:.4} 50%{opacity:1;background:rgba(124,106,247,.15)} }

/* ── Upload Section ── */
.upload-section { padding: 0 0 var(--space-20); }

/* Upload Card */
.upload-card {
  background: var(--col-surface);
  border: 1px solid var(--col-border2);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.upload-tabs { display: flex; border-bottom: 1px solid var(--col-border); background: var(--col-bg2); }
.upload-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--space-4); background: none; border: none; color: var(--col-text2);
  font-family: var(--font-body); font-size: .875rem; font-weight: 700; cursor: pointer;
  transition: all .2s; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.upload-tab:hover { color: var(--col-text); }
.upload-tab--active { color: var(--col-text); border-bottom-color: var(--col-accent); background: rgba(124,106,247,.05); }
.upload-panel { display: none; padding: var(--space-8); }
.upload-panel--active { display: block; }
.upload-panel[hidden] { display: none !important; }

/* Fix: [hidden] écrasé par display flex/block */
[hidden] { display: none !important; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--col-border2); border-radius: var(--r-xl);
  padding: 56px 32px; text-align: center; cursor: pointer;
  transition: all .25s; position: relative; background: var(--col-bg2);
  outline: none;
}
.dropzone:hover, .dropzone:focus, .dropzone.is-dragging {
  border-color: var(--col-accent); background: rgba(124,106,247,.04);
  box-shadow: inset 0 0 40px rgba(124,106,247,.06), 0 0 0 4px rgba(124,106,247,.08);
}
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone__icon { color: var(--col-accent); margin-bottom: var(--space-4); opacity: .7; }
.dropzone__label { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--space-2); }
.dropzone__hint { color: var(--col-text2); font-size: .9rem; margin-bottom: var(--space-4); }
.dropzone__formats { color: var(--col-text3); font-size: .78rem; font-family: var(--font-mono); letter-spacing: .03em; }
.dropzone__preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dropzone__preview[hidden] { display: none !important; }
.dropzone__preview-img { max-height: 200px; max-width: 100%; border-radius: var(--r-md); object-fit: contain; box-shadow: var(--shadow-md); }
.dropzone__preview-info { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.dropzone__preview-name { font-weight: 700; font-size: .9rem; }
.dropzone__preview-size { color: var(--col-text2); font-size: .85rem; font-family: var(--font-mono); }

/* Form elements */
.field { margin-bottom: var(--space-4); }
.field__label { display: block; font-size: .8rem; font-weight: 700; color: var(--col-text2); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .05em; }
.field__input-wrap { display: flex; align-items: center; background: var(--col-bg2); border: 1px solid var(--col-border2); border-radius: var(--r-md); overflow: hidden; transition: border-color .2s; }
.field__input-wrap:focus-within { border-color: var(--col-accent); box-shadow: 0 0 0 3px rgba(124,106,247,.1); }
.field__icon { padding: 0 var(--space-4); color: var(--col-text3); flex-shrink: 0; }
.field__input { flex: 1; background: none; border: none; padding: 13px var(--space-4) 13px 0; color: var(--col-text); font-size: .95rem; font-family: var(--font-mono); outline: none; }
.field__input::placeholder { color: var(--col-text3); }

/* Alerts */
.alert { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-radius: var(--r-md); font-size: .875rem; font-weight: 600; margin-top: var(--space-4); }
.alert--error   { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.25); color: #fca5a5; }
.alert--success { background: rgba(52,211,153,.08);  border: 1px solid rgba(52,211,153,.25);  color: #6ee7b7; }

/* Misc */
.link { color: var(--col-accent2); cursor: pointer; background: none; border: none; font-family: inherit; font-size: inherit; font-weight: 600; text-decoration: underline; }
.link:hover { color: var(--col-accent3); }

/* ── Result ── */
.result {
  background: var(--col-surface); border: 1px solid rgba(124,106,247,.3);
  border-radius: var(--r-2xl); padding: var(--space-8);
  box-shadow: var(--shadow-lg), var(--shadow-glow-strong);
}
.result__header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.result__check {
  width: 44px; height: 44px; background: var(--col-green); color: #000;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 0 24px rgba(52,211,153,.35);
}
.result__title { font-size: 1.2rem; font-weight: 800; }
.result__meta { color: var(--col-text2); font-size: .85rem; font-family: var(--font-mono); margin-top: 2px; }
.result__view { margin-left: auto; }

.result__preview-wrap { margin-bottom: var(--space-6); border-radius: var(--r-lg); overflow: hidden; background: var(--col-bg2); display: flex; align-items: center; justify-content: center; min-height: 100px; max-height: 280px; }
.result__preview-img { max-width: 100%; max-height: 280px; object-fit: contain; display: block; }

.result__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.result__link-item {}
.result__link-lbl { display: block; font-size: .72rem; font-weight: 700; color: var(--col-text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--space-2); }
.copy-row { display: flex; gap: var(--space-2); }
.copy-row__input {
  flex: 1; min-width: 0;
  background: var(--col-bg2); border: 1px solid var(--col-border); border-radius: var(--r-sm);
  padding: 8px 12px; color: var(--col-text2); font-size: .78rem; font-family: var(--font-mono);
  outline: none; transition: border-color .2s;
}
.copy-row__input:focus { border-color: var(--col-accent); }
.copy-row__btn { flex-shrink: 0; }
.copy-row__btn.is-copied { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: var(--col-green); }

.result__notice {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4); background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.15); border-radius: var(--r-md);
  color: #fca5a5; font-size: .8rem; font-weight: 600; margin-bottom: var(--space-4);
}

/* ── How it works ── */
.how { padding: var(--space-20) 0; text-align: center; }
.how .section__title { margin-bottom: var(--space-3); }
.how__steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: var(--space-5); margin-top: var(--space-10); text-align: left; }
.how__step { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-xl); padding: var(--space-8) var(--space-6); transition: all .25s; }
.how__step:hover { border-color: var(--col-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.how__step-num { font-size: .75rem; font-family: var(--font-mono); font-weight: 700; color: var(--col-accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-3); }
.how__step-title { font-size: 1.1rem; font-weight: 800; margin-bottom: var(--space-3); }
.how__step-desc { color: var(--col-text2); font-size: .9rem; line-height: 1.65; }
.how__arrow { font-size: 1.5rem; color: var(--col-text3); flex-shrink: 0; }

/* ── Features ── */
.features { padding: 0 0 var(--space-20); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature-card { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-xl); padding: var(--space-8) var(--space-6); transition: all .25s; position: relative; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124,106,247,.04), transparent); opacity: 0; transition: opacity .25s; }
.feature-card:hover { border-color: var(--col-accent); transform: translateY(-4px); box-shadow: var(--shadow-md), 0 0 30px rgba(124,106,247,.08); }
.feature-card:hover::before { opacity: 1; }
.feature-card__icon { font-size: 2rem; margin-bottom: var(--space-4); display: block; }
.feature-card__title { font-size: 1.05rem; font-weight: 800; margin-bottom: var(--space-3); }
.feature-card__desc { color: var(--col-text2); font-size: .9rem; line-height: 1.65; }

/* ── View page ── */
.view-main { padding: var(--space-12) 0 var(--space-16); }
.view-container { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start; }
.view-image-wrap { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-2xl); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.view-image { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.view-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.view-filename { font-size: 1rem; font-weight: 700; word-break: break-all; margin-bottom: var(--space-4); }
.view-meta { display: flex; flex-direction: column; gap: var(--space-3); }
.view-meta__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--col-border); }
.view-meta__row:last-child { border-bottom: none; }
.view-meta__row dt { font-size: .78rem; color: var(--col-text2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.view-meta__row dd { font-size: .85rem; font-family: var(--font-mono); color: var(--col-text); }
.links-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Admin gallery ── */
.gallery-admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-8); padding-top: var(--space-8); }
.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.admin-card { background: var(--col-surface); border: 1px solid var(--col-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.admin-card__img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--col-bg2); display: flex; align-items: center; justify-content: center; }
.admin-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.admin-card:hover .admin-card__img { transform: scale(1.06); }
.admin-card__info { padding: var(--space-3) var(--space-3) 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.admin-card__name { font-size: .82rem; font-weight: 700; }
.admin-card__meta { font-size: .72rem; color: var(--col-text2); font-family: var(--font-mono); }
.admin-card__actions { display: flex; gap: var(--space-2); padding: var(--space-3); }
.admin-card__actions form { flex: 1; }
.admin-card__actions .btn { width: 100%; }

/* ── Pagination ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-10) 0; }
.pagination__info { color: var(--col-text2); font-size: .875rem; font-family: var(--font-mono); }

/* ── Footer ── */
.footer { border-top: 1px solid var(--col-border); padding: var(--space-10) 0; margin-top: var(--space-12); }
.footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__tagline { color: var(--col-text3); font-size: .82rem; margin-top: 4px; }
.footer__links { display: flex; gap: var(--space-5); justify-content: center; }
.footer__links a { color: var(--col-text2); text-decoration: none; font-size: .875rem; font-weight: 600; transition: color .2s; }
.footer__links a:hover { color: var(--col-text); }
.footer__copy { color: var(--col-text3); font-size: .8rem; text-align: right; line-height: 1.6; }

/* ── Scroll reveal ── */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal-up .5s cubic-bezier(.4,0,.2,1) both; }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--col-accent); outline-offset: 3px; border-radius: 4px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .how__steps { grid-template-columns: 1fr; }
  .how__arrow { display: none; }
  .features__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .view-container { grid-template-columns: 1fr; }
  .result__links { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__links { justify-content: center; }
  .footer__copy { text-align: center; }
  .hero__cta { flex-direction: column; }
  .hero__stats { gap: var(--space-4); }
}
@media (max-width: 540px) {
  .features__grid { grid-template-columns: 1fr; }
  .upload-panel { padding: var(--space-5); }
  .container { padding: 0 var(--space-4); }
}

/* ── Print ── */
@media print { .bg-layer,.header { display: none; } body { background: white; color: black; } }

/* ── Logo image ── */
.logo__img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: transform .25s, filter .25s;
  filter: drop-shadow(0 0 8px rgba(56, 130, 255, .3));
  display: block;
}
.logo__img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 14px rgba(56, 130, 255, .55));
}
.logo__img--footer {
  height: 36px;
  opacity: .8;
}
.logo__img--footer:hover {
  opacity: 1;
}

/* Header compact avec logo image */
.header .logo {
  display: flex;
  align-items: center;
  padding: 4px 0;
}