@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Outfit',sans-serif;background:#f0f4f8;color:#1e293b;}

/* ── LOADING ── */
#loading-screen{
  position:fixed;inset:0;z-index:9999;
  background:#0b3c5d;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s ease;
}
#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.ld-inner{display:flex;flex-direction:column;align-items:center;gap:0;}
.ld-inner img{height:56px;margin-bottom:16px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));}
.ld-brand h1{font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:.3px;text-align:center;}
.ld-brand p{font-size:.72rem;color:rgba(255,255,255,.45);text-align:center;margin-top:3px;margin-bottom:32px;}
.ld-bar-wrap{width:220px;height:3px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:14px;}
.ld-bar{height:100%;width:0;background:linear-gradient(90deg,rgb(0,176,80),#00e676);border-radius:99px;animation:ldBar 2.5s ease-out forwards;}
.ld-msg{font-size:.7rem;color:rgba(255,255,255,.38);letter-spacing:2px;text-transform:uppercase;animation:ldPulse 1.5s ease-in-out infinite;}
@keyframes ldBar{0%{width:0}60%{width:72%}100%{width:100%}}
@keyframes ldPulse{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── TOP BAR ── */
.top-bar{background:#0b3c5d;color:rgba(255,255,255,.65);padding:5px 5%;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;flex-wrap:wrap;gap:6px;}
.top-left,.top-right{display:flex;gap:14px;align-items:center;}
.top-bar i{margin-right:5px;opacity:.55;}
.top-bar a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s;}
.top-bar a:hover{color:#fff;}

/* ── HEADER ── */
.main-header{background:#fff;padding:10px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid rgb(0,176,80);position:sticky;top:0;z-index:200;box-shadow:0 2px 16px rgba(0,0,0,.07);flex-wrap:wrap;gap:8px;}
.logo{display:flex;align-items:center;gap:11px;}
.logo img{height:38px;}
.logo-text h1{color:rgb(0,176,80);font-size:.98rem;font-weight:800;line-height:1.2;}
.logo-text p{font-size:.62rem;color:#64748b;}
.navbar{display:flex;align-items:center;}
.menu{display:flex;list-style:none;gap:2px;align-items:center;}
.menu a{color:#0b3c5d;text-decoration:none;font-weight:600;font-size:.75rem;padding:6px 10px;border-radius:6px;transition:all .2s;white-space:nowrap;}
.menu a:hover{background:rgb(0,176,80);color:#fff;}
.burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:5px;margin-left:8px;}
.burger span{width:22px;height:2px;background:#0b3c5d;border-radius:2px;}

/* ── HERO — titre seul ── */
.hero{
  background:linear-gradient(120deg,#0b3c5d 0%,#0d5236 100%);
  padding:36px 5%;
  text-align:center;
}
.hero h1{
  font-size:1.8rem;font-weight:900;color:#fff;
  letter-spacing:.2px;line-height:1.25;
}

/* ── HERO SEARCH ── */
.hero-search{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:10px;
  padding:10px 16px;
  margin-top:18px;
  max-width:420px;
  margin-left:auto;margin-right:auto;
  backdrop-filter:blur(6px);
  transition:all .2s;
}
.hero-search:focus-within{background:rgba(255,255,255,.2);border-color:rgba(0,176,80,.6);}
.hero-search i{color:rgba(255,255,255,.6);font-size:.85rem;flex-shrink:0;}
.hero-search input{
  border:none;outline:none;background:transparent;
  color:#fff;font-family:'Outfit',sans-serif;
  font-size:.88rem;width:100%;
}
.hero-search input::placeholder{color:rgba(255,255,255,.45);}


/* ── SKELETON LOADER ── */
.card-skeleton{
  border-radius:12px;overflow:hidden;
  min-height:80px;display:flex;align-items:center;
  background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.07);
  animation:cardIn .4s ease both;
}
.sk-picto{width:72px;min-height:80px;flex-shrink:0;background:linear-gradient(110deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.sk-text{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:8px;}
.sk-line{height:14px;border-radius:6px;background:linear-gradient(110deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
.sk-line.short{width:55%;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── GRID WRAPPER ── */
.grid-wrapper{max-width:1400px;margin:0 auto;padding:28px 4% 56px;}

/* ── GRID 4 colonnes ── */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

/* ══ CARD : picto à GAUCHE, nom du secteur GRAND ══ */
.card{
  border-radius:12px;
  text-decoration:none;
  display:flex;align-items:center;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.1);
  transition:transform .2s ease,box-shadow .2s ease;
  animation:cardIn .4s ease both;
  cursor:pointer;
  min-height:80px;
  border:none;
}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.18);}

/* Cascade */
.card:nth-child(1){animation-delay:.03s}.card:nth-child(2){animation-delay:.07s}
.card:nth-child(3){animation-delay:.11s}.card:nth-child(4){animation-delay:.15s}
.card:nth-child(5){animation-delay:.19s}.card:nth-child(6){animation-delay:.23s}
.card:nth-child(7){animation-delay:.27s}.card:nth-child(8){animation-delay:.31s}
.card:nth-child(n+9){animation-delay:.35s}

/* Zone picto gauche */
.card-picto{
  width:72px;height:100%;min-height:80px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);
}
.card-picto svg{width:28px!important;height:28px!important;}
.card-picto svg *{stroke:#fff!important;}

/* Nom du secteur */
.card-name{
  flex:1;min-width:0;
  padding:14px 16px;
  font-size:1rem;font-weight:700;
  line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* ══ COULEUR UNIQUE PAR CARD ══ */
.card:nth-child(8n+1){background:linear-gradient(110deg,#c64e00,#e8722a);color:#fff;}
.card:nth-child(8n+2){background:linear-gradient(110deg,#006830,#00b050);color:#fff;}
.card:nth-child(8n+3){background:linear-gradient(110deg,#0b3c5d,#1a72a8);color:#fff;}
.card:nth-child(8n+4){background:linear-gradient(110deg,#5b006b,#a030c0);color:#fff;}
.card:nth-child(8n+5){background:linear-gradient(110deg,#9a5000,#d48000);color:#fff;}
.card:nth-child(8n+6){background:linear-gradient(110deg,#005858,#009898);color:#fff;}
.card:nth-child(8n+7){background:linear-gradient(110deg,#8b0000,#c43030);color:#fff;}
.card:nth-child(8n+0){background:linear-gradient(110deg,#1a3a70,#2d6abf);color:#fff;}

/* ── EMPTY ── */
.empty-state{grid-column:1/-1;text-align:center;padding:64px 20px;color:#94a3b8;}
.empty-state i{font-size:2.5rem;display:block;margin-bottom:12px;opacity:.25;}
.empty-state p{font-size:.9rem;}

/* ── FOOTER ── */
footer{background:#0b3c5d;color:rgba(255,255,255,.5);text-align:center;padding:18px;font-size:.72rem;border-top:3px solid rgb(0,176,80);}

/* ── RESPONSIVE ── */
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:780px){.grid{grid-template-columns:repeat(2,1fr);gap:12px;}}
@media(max-width:768px){
  .top-bar{display:none;}
  .menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#fff;border-bottom:3px solid rgb(0,176,80);padding:8px 0;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.1);}
  .menu.active{display:flex;}
  .menu a{border-radius:0;padding:12px 20px;}
  .burger{display:flex;}
  .hero h1{font-size:1.35rem;}
  .grid-wrapper{padding:18px 3% 36px;}
  .card-name{font-size:.92rem;}
}
@media(max-width:420px){
  .grid{grid-template-columns:1fr;}
  .card-name{font-size:.9rem;}
}