/* ════════════════════════════════════════════════════════════════════════
   ATELIER LANXAS — Boîte à outils étudiante
   Identité visuelle LANXAS : bleus, blanc, gris très clair + fines lignes dorées.
   Préfixe .atl- partout pour ne jamais entrer en conflit avec le reste du site.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --atl-navy:#1A2A6C; --atl-navy2:#0d1a4a; --atl-blue:#1d4ed8; --atl-blue2:#1e40af;
  --atl-ink:#16213f; --atl-gray:#64748b; --atl-line:#e7ecf7;
  --atl-bg:#f4f7fd; --atl-bg2:#eef3fc; --atl-card:#ffffff; --atl-soft:#f0f5ff;
  --atl-gold1:#c9a23f; --atl-gold2:#f4e6ad; --atl-gold3:#b8862b;
  --atl-goldline:linear-gradient(90deg,transparent,var(--atl-gold1) 14%,var(--atl-gold2) 50%,var(--atl-gold1) 86%,transparent);
  --atl-shadow:0 14px 40px -16px rgba(26,42,108,.22);
  --atl-shadow-sm:0 6px 18px -10px rgba(26,42,108,.20);
  --atl-r:16px;
}

/* ─── Cadre général ─── */
.atl{
  position:relative;
  background:
    radial-gradient(1100px 420px at 82% -60px,#e9f0ff 0%,rgba(233,240,255,0) 62%),
    radial-gradient(900px 380px at 0% 120px,#eef3fe 0%,rgba(238,243,254,0) 55%),
    linear-gradient(180deg,#f8fafe 0%,var(--atl-bg) 100%);
  color:var(--atl-ink);
  padding-top:60px;            /* dégage la navbar fixe (60px) */
  min-height:100vh;
  font-family:'Inter',system-ui,sans-serif;
}
.atl *{box-sizing:border-box}

/* ─── Lignes dorées fines & élégantes ─── */
.atl-gold-rule{height:1px;width:100%;background:var(--atl-goldline);opacity:.9}
.atl-gold-rule.short{width:84px;margin:0 auto}
.atl-dot{width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--atl-gold2),var(--atl-gold3));box-shadow:0 0 0 3px rgba(201,162,63,.14)}

/* ════════════ HERO ════════════ */
.atl-hero{position:relative;text-align:center;padding:54px 20px 30px;overflow:hidden}
.atl-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(540px 200px at 50% -40px,rgba(29,78,216,.08),transparent 70%);
  pointer-events:none;
}
.atl-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--atl-gold3);margin-bottom:14px;
}
.atl-eyebrow span.l{width:34px;height:1px;background:var(--atl-goldline)}
.atl-hero h1{
  font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;color:var(--atl-navy2);margin:0 0 6px;
}
.atl-hero h1 .g{
  background:linear-gradient(90deg,var(--atl-gold3),var(--atl-gold1) 45%,var(--atl-gold2) 70%,var(--atl-gold3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.atl-hero p{max-width:640px;margin:14px auto 0;font-size:clamp(14px,1.6vw,16px);line-height:1.7;color:var(--atl-gray)}
.atl-trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:22px auto 0;max-width:720px}
.atl-trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--atl-navy)}
.atl-trust svg{width:15px;height:15px;color:var(--atl-blue);flex-shrink:0}
.atl-hero-rule{max-width:340px;margin:26px auto 0}

/* ════════════ 2ᵉ MENU (catégories + recherche) ════════════ */
.atl-subnav{
  position:sticky;top:60px;z-index:900;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-top:1px solid var(--atl-line);border-bottom:1px solid var(--atl-line);
  box-shadow:0 6px 20px -16px rgba(26,42,108,.4);
}
.atl-subnav-in{max-width:1240px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.atl-cats{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.atl-cat{
  position:relative;border:1px solid var(--atl-line);background:#fff;color:var(--atl-navy);
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:8px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  transition:all .18s ease;white-space:nowrap;
}
.atl-cat .ic{width:15px;height:15px;opacity:.85}
.atl-cat:hover{border-color:#c7d3f0;background:var(--atl-soft);color:var(--atl-blue);transform:translateY(-1px)}
.atl-cat.active{
  background:linear-gradient(135deg,var(--atl-navy) 0%,var(--atl-blue2) 100%);
  color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px rgba(29,78,216,.6);
}
.atl-cat.active::after{content:"";position:absolute;left:18%;right:18%;bottom:-5px;height:1px;background:var(--atl-goldline)}
.atl-cat .n{background:rgba(255,255,255,.22);border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 7px;margin-left:2px}
.atl-cat:not(.active) .n{background:var(--atl-bg2);color:var(--atl-gray)}
.atl-searchbox{position:relative;flex-shrink:0}
.atl-searchbox svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--atl-gray)}
.atl-search{
  width:230px;max-width:46vw;border:1px solid var(--atl-line);border-radius:999px;
  padding:9px 14px 9px 34px;font-family:inherit;font-size:13px;color:var(--atl-ink);background:#fff;
  transition:all .18s;
}
.atl-search:focus{outline:none;border-color:var(--atl-blue);box-shadow:0 0 0 3px rgba(29,78,216,.12)}

/* ════════════ GRILLE D'OUTILS ════════════ */
.atl-wrap{max-width:1240px;margin:0 auto;padding:32px 20px 70px}
.atl-secttitle{display:flex;align-items:center;gap:12px;margin:30px 0 16px}
.atl-secttitle:first-child{margin-top:6px}
.atl-secttitle h2{font-size:15px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--atl-navy);white-space:nowrap}
.atl-secttitle .line{flex:1;height:1px;background:var(--atl-goldline);opacity:.7}
.atl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.atl-card{
  position:relative;background:var(--atl-card);border:1px solid var(--atl-line);border-radius:var(--atl-r);
  padding:20px 18px 18px;cursor:pointer;text-align:left;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  display:flex;flex-direction:column;gap:10px;min-height:138px;
}
.atl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--atl-goldline);opacity:0;transition:opacity .22s}
.atl-card:hover{transform:translateY(-4px);box-shadow:var(--atl-shadow);border-color:#d6e0f5}
.atl-card:hover::before{opacity:1}
.atl-ico{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,#eef4ff 0%,#e6eeff 100%);border:1px solid #e3ebf9;
}
.atl-ico svg{width:24px;height:24px;color:var(--atl-blue)}
.atl-card h3{font-size:14.5px;font-weight:700;color:var(--atl-navy2);margin:0}
.atl-card p{font-size:12.5px;line-height:1.5;color:var(--atl-gray);margin:0}
.atl-card .tag{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--atl-gold3);border:1px solid rgba(201,162,63,.4);border-radius:999px;padding:2px 8px;background:rgba(244,230,173,.15)}
.atl-empty{text-align:center;color:var(--atl-gray);padding:60px 20px;font-size:14px}

/* ════════════ PANNEAU OUTIL (overlay) ════════════ */
.atl-panel{position:fixed;inset:0;z-index:3000;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.atl-panel.open{display:flex}
.atl-panel-bg{position:fixed;inset:0;background:rgba(13,26,74,.5);backdrop-filter:blur(4px)}
.atl-modal{
  position:relative;z-index:1;background:#fff;border-radius:20px;width:min(680px,100%);
  box-shadow:0 30px 80px -20px rgba(13,26,74,.5);overflow:hidden;margin:auto;
  animation:atl-pop .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes atl-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.atl-modal-top{height:2px;background:var(--atl-goldline)}
.atl-modal-head{display:flex;align-items:center;gap:14px;padding:20px 22px 16px;border-bottom:1px solid var(--atl-line)}
.atl-modal-head .atl-ico{width:42px;height:42px}
.atl-modal-head .t h3{font-size:17px;font-weight:800;color:var(--atl-navy2);margin:0}
.atl-modal-head .t p{font-size:12.5px;color:var(--atl-gray);margin:2px 0 0}
.atl-x{margin-left:auto;background:none;border:1px solid var(--atl-line);border-radius:10px;width:34px;height:34px;cursor:pointer;color:var(--atl-gray);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.atl-x:hover{background:var(--atl-bg);color:var(--atl-navy)}
.atl-modal-body{padding:20px 22px 24px}

/* Zone de dépôt */
.atl-drop{
  border:2px dashed #cdd9f2;border-radius:14px;background:linear-gradient(180deg,#fbfdff,#f4f8ff);
  padding:34px 20px;text-align:center;cursor:pointer;transition:all .18s;
}
.atl-drop:hover,.atl-drop.over{border-color:var(--atl-blue);background:#eef4ff}
.atl-drop svg{width:42px;height:42px;color:var(--atl-blue);opacity:.85}
.atl-drop b{display:block;margin-top:12px;font-size:15px;color:var(--atl-navy2);font-weight:700}
.atl-drop span{display:block;margin-top:5px;font-size:12.5px;color:var(--atl-gray)}
.atl-drop em{color:var(--atl-blue);font-style:normal;font-weight:600;text-decoration:underline}

/* Liste de fichiers */
.atl-files{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.atl-file{display:flex;align-items:center;gap:11px;border:1px solid var(--atl-line);border-radius:11px;padding:9px 12px;background:#fff}
.atl-file .fi{width:30px;height:30px;border-radius:8px;background:var(--atl-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.atl-file .fi svg{width:16px;height:16px;color:var(--atl-blue)}
.atl-file .fn{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--atl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-file .fs{font-size:11.5px;color:var(--atl-gray);flex-shrink:0}
.atl-file .fx{background:none;border:none;cursor:pointer;color:#b6c0d6;font-size:18px;line-height:1;padding:2px 4px}
.atl-file .fx:hover{color:#e11d48}
.atl-file[draggable] .fn{cursor:grab}
.atl-file.dragging{opacity:.4}

/* Options */
.atl-opts{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.atl-opt label{display:block;font-size:12.5px;font-weight:700;color:var(--atl-navy);margin-bottom:6px}
.atl-opt .hint{font-weight:400;color:var(--atl-gray);font-size:11.5px}
.atl-input,.atl-select{width:100%;border:1px solid var(--atl-line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--atl-ink);background:#fff;transition:all .15s}
.atl-input:focus,.atl-select:focus{outline:none;border-color:var(--atl-blue);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.atl-row{display:flex;gap:12px;flex-wrap:wrap}
.atl-row>.atl-opt{flex:1;min-width:130px}
.atl-range{display:flex;align-items:center;gap:12px}
.atl-range input[type=range]{flex:1;accent-color:var(--atl-blue)}
.atl-range .val{font-size:13px;font-weight:700;color:var(--atl-blue);min-width:46px;text-align:right}
.atl-chips{display:flex;gap:8px;flex-wrap:wrap}
.atl-chip{border:1px solid var(--atl-line);background:#fff;border-radius:10px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--atl-navy);cursor:pointer;transition:all .15s}
.atl-chip:hover{border-color:#c7d3f0;background:var(--atl-soft)}
.atl-chip.on{background:linear-gradient(135deg,var(--atl-navy),var(--atl-blue2));color:#fff;border-color:transparent}

/* Boutons */
.atl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.atl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:12px;
  padding:12px 20px;border:1px solid transparent;transition:all .18s;white-space:nowrap;
}
.atl-btn svg{width:17px;height:17px}
.atl-btn-primary{
  flex:1;min-width:170px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--atl-navy) 0%,var(--atl-blue) 100%);
  box-shadow:0 10px 24px -10px rgba(29,78,216,.7);
}
.atl-btn-primary::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--atl-goldline);opacity:.7}
.atl-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(29,78,216,.8)}
.atl-btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.atl-btn-ghost{background:#fff;border-color:var(--atl-line);color:var(--atl-navy)}
.atl-btn-ghost:hover{border-color:#c7d3f0;background:var(--atl-soft);color:var(--atl-blue)}
.atl-btn-gold{background:#fff;color:var(--atl-gold3);border:1px solid var(--atl-gold1)}
.atl-btn-gold:hover{background:linear-gradient(135deg,#fffaf0,#fdf3d8)}

/* États : chargement / erreur / résultats */
.atl-status{margin-top:18px;display:none;align-items:center;gap:12px;font-size:13.5px;font-weight:600}
.atl-status.show{display:flex}
.atl-status.err{color:#be123c}
.atl-status.work{color:var(--atl-blue)}
.atl-spin{width:18px;height:18px;border:2px solid #cdd9f2;border-top-color:var(--atl-blue);border-radius:50%;animation:atl-spin .7s linear infinite;flex-shrink:0}
@keyframes atl-spin{to{transform:rotate(360deg)}}
.atl-bar{height:6px;border-radius:999px;background:var(--atl-bg2);overflow:hidden;margin-top:14px;display:none}
.atl-bar.show{display:block}
.atl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--atl-blue),var(--atl-navy));transition:width .25s}

.atl-results{margin-top:20px;display:none}
.atl-results.show{display:block}
.atl-results h4{font-size:12.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--atl-navy);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.atl-results h4 .line{flex:1;height:1px;background:var(--atl-goldline);opacity:.7}
.atl-result{display:flex;align-items:center;gap:12px;border:1px solid var(--atl-line);border-radius:12px;padding:11px 13px;margin-bottom:9px;background:#fff}
.atl-result .ok{width:30px;height:30px;border-radius:8px;background:#e9f8ef;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.atl-result .ok svg{width:17px;height:17px;color:#16a34a}
.atl-result .rn{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--atl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atl-result .rs{font-size:11.5px;color:var(--atl-gray);flex-shrink:0;margin-right:4px}
.atl-mini{background:#fff;border:1px solid var(--atl-line);border-radius:9px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--atl-navy);transition:all .15s}
.atl-mini:hover{border-color:var(--atl-blue);color:var(--atl-blue);background:var(--atl-soft)}
.atl-mini svg{width:16px;height:16px}

/* Bandeau confidentialité dans le panneau */
.atl-priv{margin-top:16px;font-size:11.5px;color:var(--atl-gray);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.atl-priv svg{width:14px;height:14px;color:#16a34a;flex-shrink:0;margin-top:1px}

/* ─── Responsive ─── */
@media(max-width:640px){
  .atl-hero{padding:34px 16px 22px}
  .atl-subnav-in{padding:9px 14px}
  .atl-search{width:100%;max-width:none}
  .atl-searchbox{flex:1 1 100%;order:3}
  .atl-wrap{padding:24px 14px 56px}
  .atl-modal-body{padding:18px 16px 20px}
}