:root{
  --bg:#f6f7fb;
  --card:#fff;
  --accent:#1f6feb;
  --muted:#666;
  --maxw:1100px;
  --radius: 2px;
  --shadow:0 8px 28px rgba(20,30,60,0.06);
  --danger: #d32f2f;
  --insert: #1f6feb;
}

/* Base typography and layout */
*{box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans",
               "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
  margin:0;
  /* background: var(--bg); */
  color:#111;
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6 {
  color: #000000;
  font-weight: 500;
  letter-spacing: 0px;
}
h1{
  font-size:2.4em;
  text-align:center;
}

/* Container & header */
.container{max-width:var(--maxw);margin:0 auto;background: var(--card);}
.header{}
.site-brand{display: block;align-items:center;gap:12px;}
.site-brand h1{margin:0;font-size:1.25rem}
.site-brand a{text-decoration:none; color:#000000;}
.tagline{margin:6px 0 0;color:var(--muted);font-size:0.95rem}
.topbar{display:flex;justify-content:space-between;align-items:center;padding: 5px 10px;}
.nav{display: block;gap:12px;align-items:center}
.nav a{color: #000000;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight: 400;}
.nav a:hover{background:#eef6ff}
.hamburger{display:none;border:0;background:transparent;font-size:1.3rem;cursor:pointer}

/* Cards, tool area */
.tool-card{background:var(--card);padding: 20px;border-radius:var(--radius);margin-top:18px;}
.grid{display:grid;grid-template-columns: 1fr auto;gap:18px;align-items:start;border: 1px solid #e8e1e1;padding: 8px;}

/* Buttons */
.btn{display:inline-block;padding: 10px 20px;border-radius: 3px;border:1px solid #d0d7e6;background: #d72619;cursor:pointer;color: #fff;}
.btn.small{padding:8px 12px;font-size:1.1rem;margin-left:8px;width: auto;}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent;font-size: 1.3em;width: 49%;}
.rbtn{display:inline-block;padding: 10px 20px;border-radius: 3px;border:1px solid #d0d7e6;background: #d72619;cursor:pointer;color: #fff;font-size: 1.3em;width: 49%;}
@media (max-width: 980px){.grid{grid-template-columns:1fr} .btn.primary {width:100%} .rbtn{width:100%;}}
@media (max-width:720px){
  .nav{display:none}
  .hamburger{display:block}
  .mobile-nav{display:none;flex-direction:column;padding:12px 18px;background:var(--card);border-radius:8px;margin-top:8px}
  .mobile-nav a{padding:8px 6px;border-radius:6px}
}
@media (max-width: 520px) {
  .btn.primary, .rbtn { width:100%; }
}

/* Dropzone */
.dropzone{
  border: 1px dashed #c9c9c9;
  border-radius: 6px;
  padding: 50px;
  text-align:center;
  position:relative;
  background: #fff6f6;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  overflow: visible;
}
.dropzone p{margin:0 0 8px;font-size: 1.12em;}

/* Dropzone active (when dragging files over) */
.dropzone.active {
  border: 2px dashed var(--danger);
  background: rgba(211, 47, 47, 0.04);
  box-shadow: 0 0 0 6px rgba(211,47,47,0.06) inset;
}

/* Centered hint overlay shown during drag */
.dropzone.active::after {
  content: "Déposez vos fichiers ici";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--danger);
  pointer-events: none;
  background: rgba(255,255,255,0.85);
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20,30,60,0.06);
}

/* File list */
.file-list{margin:12px 0;padding:0;list-style:none}
.file-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:8px;
  border: 1px solid #c9c9c9;
  background:#fff;
  margin-bottom:8px;
  cursor:grab;
  flex-wrap:wrap;
  position: relative; /* required for insertion pseudo elements */
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Picked / dragged item look */
.file-item.dragging {
  opacity: 0.6;
  transform: scale(0.995);
  box-shadow: 0 10px 30px rgba(20,30,60,0.12);
  cursor: grabbing;
  z-index: 40;
}

/* File item children */
.file-handle{width:34px;height:34px;border-radius:6px;background:#eef3ff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.file-name{flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;word-break:break-word}
.file-meta{font-size:0.85rem;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.file-actions{flex:0 0 auto}
.file-actions button{margin-left:6px}

/* Insertion indicators for reordering */
/* top insertion bar (drop-before) uses ::before; bottom insertion bar (drop-after) uses ::after */
.file-item.drop-before::before,
.file-item.drop-after::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 8px;
  background: linear-gradient(90deg, rgba(31,111,235,1), rgba(31,111,235,0.85));
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(31,111,235,0.12);
  pointer-events: none;
  transform-origin: center;
  transform: translateY(-50%) scaleX(0.98);
  transition: transform 120ms ease, opacity 120ms ease;
  opacity: 1;
  z-index: 30;
}

/* Positioning the bars */
.file-item.drop-before::before {
  top: 0px; /* sits just above the item content */
  transform: translateY(-50%) scaleX(1);
}

.file-item.drop-after::after {
  bottom: 0px; /* sits just below the item content */
  transform: translateY(50%) scaleX(1);
}

/* subtle background hint for rows that are potential targets */
.file-item.drop-before,
.file-item.drop-after {
  background: #f2f8ff;
}

/* optional */
.drag-ghost { 
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  width: auto;
  max-width: 60%;
  transform: translate3d(0,0,0);
  transition: transform 0s;
  border-radius: 6px;
}



/* Controls, status, misc */
.controls{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;justify-content: space-between;}
.status{margin-top:10px;color:var(--muted)}
.info{margin-top:12px;color:#333}
.more{margin-top:22px}
.footer{margin-top: 18px;padding:18px;text-align:center;color:var(--muted);background: #fff;}
table{width:100%;border-collapse:collapse;margin-top:12px;word-break: break-all;}
table th,table td{border: 1px solid #dedede;padding:10px;text-align:center}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;background:#eef6ff;color:#0b3ba6;font-weight:700}
.long-text{font-size:0.95rem;color:#222}
.nav-sep{height:1px;background:#f2f4f8;margin:12px 0}
.small-muted{color: #1f6feb;font-size: 1em;margin-block-start: 0px;margin-block-end: 0px;font-weight: 500;}
.ads-slot{min-height:100px;background:#fafafa;border:1px dashed #e6e9ef;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;margin:16px 0}
a{text-decoration:none; color:#0055ff;}
img{width:100%; padding:10px; border:2px solid #ddd; margin-left:0px;; text-align:left;}
figure{margin-block-start: 0px;; margin-block-end: 0px;margin-inline-start: 0px; margin-inline-end: 0px;}
/* Accessibility focus outline */
.button:focus, .btn:focus, .file-item:focus { outline: 3px solid rgba(31,111,235,0.12); outline-offset: 2px; }

/* Small screens adjustments */
@media (max-width: 520px) {
  .file-handle { width: 30px; height:30px; }
  .dropzone { padding: 30px; }
  .btn.primary, .rbtn { width:100%; }
}