:root{
  --bg:#0f172a;
  --bg2:#111827;
  --card:#172033;
  --card2:#1e293b;
  --text:#e5eefc;
  --muted:#9fb0c8;
  --line:#2d3a52;
  --accent:#38bdf8;
  --accent2:#22c55e;
  --danger:#fb7185;
  --shadow:0 18px 50px rgba(0,0,0,.25);
}

body.light{
  --bg:#f1f5f9;
  --bg2:#e2e8f0;
  --card:#ffffff;
  --card2:#f8fafc;
  --text:#0f172a;
  --muted:#475569;
  --line:#cbd5e1;
  --accent:#0284c7;
  --accent2:#16a34a;
  --shadow:0 10px 30px rgba(15,23,42,.12);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.20), transparent 32rem),
    linear-gradient(135deg,var(--bg),var(--bg2));
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  height:72px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

body.light .topbar{background:rgba(255,255,255,.82)}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
}

.logo{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
  color:white;
  display:grid;
  place-items:center;
  font-weight:900;
  box-shadow:var(--shadow);
}

.brand strong{display:block;font-size:18px}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

nav{display:flex;gap:8px}
nav a{
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  transition:.2s;
}
nav a:hover,nav a.active{
  background:rgba(56,189,248,.14);
  color:var(--text);
}

.theme-btn,.secondary-btn,.primary-btn,.download-btn{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:800;
  color:white;
}

.theme-btn,.secondary-btn{
  background:var(--card2);
  color:var(--text);
  border:1px solid var(--line);
}

.primary-btn,.download-btn{
  background:linear-gradient(135deg,var(--accent),#2563eb);
  box-shadow:var(--shadow);
}

.download-btn{width:100%;margin-top:14px}
.small{padding:8px 12px;border-radius:10px;font-size:12px}

.page{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 60px;
}

.hero{
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:24px;
  align-items:stretch;
  margin-bottom:24px;
}

.hero>div,.hero-card,.upload-card,.editor-card,.page-header,.location-card,.format-card,.toolbar{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.hero>div:first-child,.hero-card,.page-header{
  padding:34px;
}

.pill{
  display:inline-flex;
  width:max-content;
  color:var(--accent);
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  margin:0 0 14px;
}

h1{
  font-size:clamp(34px,6vw,66px);
  line-height:1;
  margin:0 0 16px;
  letter-spacing:-.05em;
}

h2{margin:0 0 8px}
h3{margin:0 0 8px}
.lead{
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  max-width:780px;
}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.editor-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:22px;
  align-items:stretch;
}

.upload-card,.editor-card{padding:20px}

.drop-zone{
  min-height:210px;
  border:2px dashed var(--accent);
  border-radius:24px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:22px;
  background:rgba(56,189,248,.08);
}

.drop-icon{
  width:64px;height:64px;border-radius:22px;
  display:grid;place-items:center;
  background:rgba(56,189,248,.18);
  color:var(--accent);
  font-size:30px;
  margin:auto;
}

.drop-zone p,.info-box p,.section-title p,.location-card p,.format-card p{
  color:var(--muted);
  line-height:1.5;
}

.info-box{
  margin-top:14px;
  padding:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:18px;
}

.section-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.big-editor{
  width:100%;
  height:70vh;
  min-height:620px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  background:#07111f;
  color:#dbeafe;
  font-family:Consolas,Monaco,monospace;
  font-size:15px;
  line-height:1.55;
  outline:none;
}

body.light .big-editor{
  background:#f8fbff;
  color:#172033;
}

.toolbar{
  padding:18px;
  display:flex;
  gap:12px;
  margin:24px 0;
}

.toolbar input{
  flex:1;
  min-width:0;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}

.location-grid,.format-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.location-card,.format-card{padding:22px}
.location-card code{
  display:block;
  margin:8px 0;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.24);
  border:1px solid var(--line);
  color:#c7e9ff;
  overflow-wrap:anywhere;
}

body.light .location-card code{
  background:#eef4ff;
  color:#0f172a;
}

.hidden{display:none!important}

@media(max-width:880px){
  .topbar{height:auto;gap:12px;flex-wrap:wrap;padding:14px}
  nav{order:3;width:100%;overflow:auto}
  .hero,.editor-grid,.location-grid,.format-grid{grid-template-columns:1fr}
  .big-editor{height:60vh;min-height:460px}
}


.find-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.find-input-wrap{
  flex:1;
  min-width:180px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.16);
}

.find-input-wrap input{
  width:100%;
  border:0;
  outline:0;
  padding:12px 0;
  background:transparent;
  color:var(--text);
}

.find-count{
  color:var(--muted);
  min-width:58px;
  text-align:right;
  font-weight:700;
}

.footer{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto 28px;
  padding:18px 4px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  font-size:14px;
}

@media(max-width:700px){
  .find-box{flex-wrap:wrap}
  .find-input-wrap{flex-basis:100%}
  .footer{flex-direction:column;text-align:center}
}


/* Light mode contrast fixes */
body.light .hero>div,
body.light .hero-card,
body.light .upload-card,
body.light .editor-card,
body.light .page-header,
body.light .location-card,
body.light .format-card,
body.light .toolbar{
  background:#ffffff;
  border:1px solid #cbd5e1;
  box-shadow:0 12px 35px rgba(15,23,42,.10);
}

body.light .hero>div:first-child{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
}

body.light .drop-zone{
  background:#e0f2fe;
  border:2px dashed #0284c7;
  color:#0f172a;
}

body.light .drop-icon{
  background:#bae6fd;
  color:#0369a1;
}

body.light .info-box,
body.light .find-box{
  background:#f1f5f9;
  border:1px solid #cbd5e1;
}

body.light .find-input-wrap,
body.light .toolbar input{
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#0f172a;
}

body.light .find-input-wrap input{
  color:#0f172a;
}

body.light .big-editor{
  background:#ffffff;
  color:#0f172a;
  border:2px solid #94a3b8;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);
}

body.light .secondary-btn,
body.light .theme-btn{
  background:#e2e8f0;
  color:#0f172a;
  border:1px solid #cbd5e1;
}

body.light nav a:hover,
body.light nav a.active{
  background:#dbeafe;
  color:#0f172a;
}

body.light .location-card code{
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  color:#0f172a;
}

body.light .footer{
  border-top:1px solid #cbd5e1;
  color:#475569;
}


.counter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.counter-card{
  padding:16px;
  border-radius:18px;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.24);
  text-align:center;
}

.counter-card span{
  display:block;
  font-size:32px;
  font-weight:900;
  color:var(--accent);
  line-height:1;
}

.counter-card small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-weight:700;
}

.reset-counter-btn{
  width:100%;
  margin-top:10px;
}

body.light .counter-card{
  background:#e0f2fe;
  border:1px solid #7dd3fc;
}


.highlight-preview{
  margin-top:14px;
  width:100%;
  max-height:360px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  background:#07111f;
  color:#dbeafe;
  font-family:Consolas,Monaco,monospace;
  font-size:15px;
  line-height:1.55;
}

.editor-with-preview{
  min-height:360px;
  height:42vh;
}

.search-hit{
  background:#fde047;
  color:#111827;
  border-radius:4px;
  padding:1px 2px;
}

.active-hit{
  background:#fb7185;
  color:white;
  outline:2px solid #ffffff;
}

body.light .highlight-preview{
  background:#ffffff;
  color:#0f172a;
  border:2px solid #94a3b8;
}

body.light .search-hit{
  background:#facc15;
  color:#0f172a;
}

body.light .active-hit{
  background:#dc2626;
  color:white;
}


.editable-editor{
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  cursor:text;
}

.editable-editor:empty::before{
  content:attr(data-placeholder);
  color:var(--muted);
  pointer-events:none;
}

.editable-editor:focus{
  outline:3px solid rgba(56,189,248,.25);
  border-color:var(--accent);
}

/* La recherche est maintenant directement dans la zone éditable */
.highlight-preview{
  display:none!important;
}

.search-hit{
  background:#fde047;
  color:#111827;
  border-radius:4px;
  padding:1px 2px;
}

.active-hit{
  background:#fb7185;
  color:white;
  outline:2px solid #ffffff;
}

body.light .search-hit{
  background:#facc15;
  color:#0f172a;
}

body.light .active-hit{
  background:#dc2626;
  color:white;
}


.editor-with-preview{
  min-height:620px;
  height:70vh;
}


/* Correction mise en page éditeur éditable */
.editor-grid{
  grid-template-columns:330px minmax(0,1fr);
}

.editor-card{
  min-width:0;
  overflow:hidden;
}

.section-title,
.find-box{
  flex-shrink:0;
}

.big-editor.editable-editor{
  display:block;
  width:100%;
  height:70vh !important;
  min-height:620px;
  max-height:70vh;
  overflow:auto !important;
  overflow-x:auto;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  box-sizing:border-box;
  contain:layout paint;
}

.editor-with-preview{
  height:70vh !important;
  min-height:620px !important;
  max-height:70vh !important;
}

.footer{
  position:relative;
  z-index:1;
  margin-top:28px;
}

.search-hit,
.active-hit{
  display:inline;
}

@media(max-width:880px){
  .editor-grid{
    grid-template-columns:1fr;
  }

  .big-editor.editable-editor,
  .editor-with-preview{
    height:60vh !important;
    min-height:460px !important;
    max-height:60vh !important;
  }
}


/* Correction definitive: le texte ne passe plus sur le footer */
html,
body{
  min-height:100%;
}

body{
  display:flex;
  flex-direction:column;
}

.page{
  flex:1 0 auto;
  padding-bottom:80px;
}

.editor-card{
  display:flex;
  flex-direction:column;
  height:auto;
  max-height:none;
}

.big-editor.editable-editor{
  flex:0 0 auto;
  height:68vh !important;
  min-height:560px !important;
  max-height:68vh !important;
  overflow:auto !important;
  overscroll-behavior:contain;
  position:relative;
  z-index:0;
}

.editor-with-preview{
  height:68vh !important;
  min-height:560px !important;
  max-height:68vh !important;
}

.footer{
  flex-shrink:0;
  position:static !important;
  z-index:5;
  background:transparent;
  margin-top:0;
  margin-bottom:28px;
  clear:both;
}

@media(max-width:880px){
  .big-editor.editable-editor,
  .editor-with-preview{
    height:58vh !important;
    min-height:420px !important;
    max-height:58vh !important;
  }

  .page{
    padding-bottom:50px;
  }
}


/* Compteurs retires */
.counter-grid,
.counter-card,
.reset-counter-btn{
  display:none!important;
}


.manual-download{
  display:block;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  text-align:center;
  color:white;
  background:#16a34a;
  text-decoration:none;
  font-weight:800;
}

.manual-download.hidden{
  display:none!important;
}


/* Formats page redesign */
.formats-page{
  max-width:1180px;
}

.formats-hero{
  max-width:none;
}

.format-search-card{
  display:flex;
  gap:12px;
  margin:24px 0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:var(--shadow);
}

.format-search-card input{
  flex:1;
  min-width:0;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  outline:none;
}

.format-category-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.format-category{
  padding:24px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:var(--shadow);
}

.format-category.wide{
  grid-column:1 / -1;
}

.format-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.26);
  font-size:24px;
  margin-bottom:14px;
}

.tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.tag-cloud span{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.24);
  color:var(--text);
  font-weight:700;
  font-size:13px;
}

.extension-table{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.extension-table div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}

.extension-table h3{
  margin:0 0 8px;
  color:var(--accent);
}

.extension-table p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.notice-card{
  margin-top:22px;
  padding:24px;
  border:1px solid rgba(251,191,36,.35);
  border-radius:28px;
  background:rgba(251,191,36,.10);
}

body.light .format-search-card,
body.light .format-category{
  background:#ffffff;
  border:1px solid #cbd5e1;
}

body.light .format-search-card input{
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#0f172a;
}

body.light .tag-cloud span{
  background:#e0f2fe;
  border:1px solid #7dd3fc;
  color:#0f172a;
}

body.light .extension-table div{
  background:#f8fafc;
  border:1px solid #cbd5e1;
}

body.light .notice-card{
  background:#fffbeb;
  border:1px solid #facc15;
  color:#0f172a;
}

@media(max-width:880px){
  .format-search-card{
    flex-direction:column;
  }

  .format-category-grid,
  .extension-table{
    grid-template-columns:1fr;
  }
}

.drop-zone.drag-active{
  background:rgba(56,189,248,.18);
  border-color:#7dd3fc;
}


/* SGE Pro download panel */
.download-panel{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(34,197,94,.45);
  background:rgba(34,197,94,.10);
}
.download-panel p{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:700;
}
.manual-download{
  display:block;
  padding:13px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:white!important;
  text-align:center;
  text-decoration:none;
  font-weight:900;
}
.hidden{display:none!important}
body.light .download-panel{
  background:#ecfdf5;
  border-color:#86efac;
}