/* ===========================
   Intranet — Thème CLAIR
   =========================== */
:root{
  /* Layout */
  --sidebar-w: 260px;
  --container: 1320px;
  --radius: 12px;
  --header-h: 60px; /* Hauteur identique sidebar/header */

  /* Palette claire (alignée sur le site) */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --text:#16181b;
  --muted:#6b7280;
  --line:#eaedf3;
  --line-2:#dfe5f1;

  /* Accents */
  --g1:#754092; --g2:#e83d68; --g3:#f8aa16;
  --grad:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  --grad-soft:linear-gradient(90deg,rgba(117,64,146,.08),rgba(232,61,104,.08),rgba(248,170,22,.08));

  /* States */
  --ok:#16a34a; --warn:#f59e0b; --err:#ef4444; --info:#2563eb;

  /* FX */
  --shadow: 0 18px 42px rgba(17,24,39,.10);
  --shadow-soft: 0 10px 26px rgba(17,24,39,.08);

  /* Fonts */
  --font:"Albert Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(800px 400px at -10% -10%, rgba(232,61,104,.04), transparent 40%),
    radial-gradient(800px 400px at 110% 110%, rgba(117,64,146,.04), transparent 40%),
    var(--panel-2);
  color:var(--text); font-family:var(--font); line-height:1.6;
}

/* Links & text */
a{color:inherit;text-decoration:none}
a.link{color:#0b57d0}
a.link:hover{color:#0847ab;text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem;line-height:1.2;color:#111827}
h1{font-weight:800;font-size:clamp(26px,3.2vw,32px)}
h2{font-weight:800;font-size:clamp(18px,2.3vw,22px);color:#0f172a}
h3{font-weight:700;font-size:16px;color:#0f172a}
p{margin:.25rem 0 1rem;color:var(--muted)}
.container{width:min(var(--container),96vw);margin-inline:auto}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .5rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem;background:#fff}
.badge--ok{border-color:rgba(22,163,74,.25);color:#065f46;background:#dcfce7}
.badge--warn{border-color:rgba(245,158,11,.25);color:#92400e;background:#fef3c7}
.badge--err{border-color:rgba(239,68,68,.25);color:#991b1b;background:#fee2e2}
.badge--info{border-color:rgba(37,99,235,.25);color:#1e3a8a;background:#dbeafe}
code,kbd,pre{font-family:var(--mono);background:#f3f4f6;border:1px solid var(--line);padding:.15rem .35rem;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:10px;
     border:1px solid var(--line); background:#fff; color:#111827; font-weight:700;
     transition:transform .15s, border-color .15s, box-shadow .15s, background-color .15s}
.btn:hover{transform:translateY(-1px); border-color:var(--line-2); box-shadow:var(--shadow-soft)}
.btn--primary{background:var(--grad); border-color:transparent; color:#fff}
.btn--ghost{background:#fff}
.btn--danger{background:#fee2e2; border-color:#fecaca; color:#991b1b}
.btn--success{background:#dcfce7; border-color:#bbf7d0; color:#166534}
.btn--sm{padding:.5rem .75rem;font-size:.92rem;border-radius:9px}
.btn--icon{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:10px}

/* Forms */
.form{display:grid;gap:14px}
.field{display:grid;gap:8px}
label{font-weight:700;color:#0f172a}
.input, .select, .textarea{
  width:100%; padding:.75rem .85rem; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:#111827;
  outline:0; transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.input:focus, .select:focus, .textarea:focus{border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.input::placeholder{color:#9aa3b0}
.help{font-size:.9rem;color:var(--muted)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){ .form__row{grid-template-columns:1fr} }

/* Alerts */
.alert{padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);background:#fff}
.alert--ok{border-color:rgba(22,163,74,.25);background:#dcfce7;color:#065f46}
.alert--warn{border-color:rgba(245,158,11,.25);background:#fef3c7;color:#92400e}
.alert--err{border-color:rgba(239,68,68,.25);background:#fee2e2;color:#991b1b}
.alert--info{border-color:rgba(37,99,235,.25);background:#dbeafe;color:#1e3a8a}

/* AUTH (login) */
.auth{
  min-height:100svh; display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 440px at -10% 120%, rgba(117,64,146,.10), transparent 45%),
    radial-gradient(900px 440px at 120% -10%, rgba(232,61,104,.10), transparent 45%),
    var(--panel-2);
}
.auth__card{
  width:min(560px,94vw); background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:22px;
}
.auth__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand__logo{width:auto;height:28px}
.auth__title{font-weight:800;font-size:22px}
.auth__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}

/* LAYOUT (dashboard) */
.shell{display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100svh}

/* Sidebar */
.sidebar{
  position:sticky; top:0; align-self:start; height:100svh; overflow:auto;
  background:#fff; border-right:1px solid var(--line);
}
.sidebar__head{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding:0 16px; border-bottom:1px solid var(--line);
}
.sidebar__brand{display:flex;align-items:center;gap:10px}
.sidebar__brand .logo{height:28px;width:auto}
.nav{padding:10px}
.nav__group{margin:10px 0}
.nav__title{font-size:.85rem;color:#6b7280;margin:10px 8px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:.62rem .7rem;border-radius:10px;
  color:#111827;border:1px solid transparent;
}
.nav a:hover{background:#f8fafc;border-color:var(--line)}
.nav a.is-active{background:var(--grad); color:#fff; border-color:transparent}

/* Main header (droite) */
.main{
  min-width:0; display:grid; grid-template-rows: auto 1fr; background:var(--panel-2);
}
.header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:var(--header-h); padding:0 18px;
  border-bottom:1px solid var(--line); background:#fff;
}
.header .search{display:flex;align-items:center;gap:8px;flex:1;max-width:580px}
.header .search .input{height:40px}
.header .user{display:flex;align-items:center;gap:10px}

/* Content */
.content{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .kpis{grid-template-columns:1fr} }
.card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow-soft);
}
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card__title{font-size:14px;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi__value{font-size:clamp(22px,3vw,28px);font-weight:900;color:#0f172a}
.kpi__trend{font-size:.92rem;color:var(--muted)}

.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:2fr 1fr}
@media (max-width:1080px){ .grid--2{grid-template-columns:1fr} }

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  text-align:left;font-size:.9rem;color:#475569;font-weight:800;padding:10px 12px;
  background:#f8fafc;border-bottom:1px solid var(--line)
}
.table tbody td{
  padding:12px;border-bottom:1px solid var(--line);color:#111827;background:#fff
}
.table tbody tr:hover td{background:#f9fafb}

/* Status dots */
.dot{display:inline-block;width:8px;height:8px;border-radius:999px}
.dot--ok{background:var(--ok)} .dot--warn{background:var(--warn)} .dot--err{background:var(--err)} .dot--info{background:var(--info)}

/* Footer */
.footer{padding:16px;border-top:1px solid var(--line);color:#6b7280;text-align:center;background:#fff}

/* Overlay (hors flux) */
.sidebar__overlay{
  position:fixed; inset:0; display:none; background:rgba(0,0,0,.4); backdrop-filter:saturate(140%) blur(2px);
  z-index:100;
}

.mobileMenuBtn{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;width:44px;height:44px;align-items:center;justify-content:center;color:#111827;box-shadow:0 8px 18px rgba(15,23,42,.06)}

/* Responsive sidebar */
@media (max-width:980px){
  .shell{grid-template-columns: 1fr}
  .mobileMenuBtn{display:inline-flex}
  .header{gap:10px}
  .header .search{flex:1;min-width:0}
  .sidebar{position:fixed;inset:0 30% 0 0;transform:translateX(-100%);transition:transform .2s ease;z-index:1000}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar.is-open + .sidebar__overlay{display:block}
}

/* Little helpers */
.flex{display:flex;gap:10px}
.right{margin-left:auto}
.center{display:grid;place-items:center}
.w-100{width:100%}
.hidden{display:none !important}

/* Login input icons */
.input-wrap{position:relative}
.input__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:#9aa3b0; opacity:.95; pointer-events:none;
}
.input--with-icon{padding-left:42px}
@media (max-width:420px){ .auth__card{padding:18px} }


/* ===== Dégradé articles index couleurs du site ===== */
.blog-card__image::after,
.blog-card__media::after,
.posts-card__image::after,
.posts-card__media::after,
.article-card__image::after,
.article-card__media::after,
.news-card__image::after,
.news-card__media::after,
.card-blog__image::after,
.card-blog__media::after{
  background: linear-gradient(90deg,
    rgba(117,64,146,.92) 0%,
    rgba(232,61,104,.92) 55%,
    rgba(248,170,22,.92) 100%) !important;
}

.blog-card:hover .blog-card__image::after,
.blog-card:hover .blog-card__media::after,
.posts-card:hover .posts-card__image::after,
.posts-card:hover .posts-card__media::after,
.article-card:hover .article-card__image::after,
.article-card:hover .article-card__media::after,
.news-card:hover .news-card__image::after,
.news-card:hover .news-card__media::after,
.card-blog:hover .card-blog__image::after,
.card-blog:hover .card-blog__media::after{
  background: linear-gradient(90deg,
    rgba(117,64,146,.98) 0%,
    rgba(232,61,104,.98) 55%,
    rgba(248,170,22,.98) 100%) !important;
}



/* ===== FIX FINAL dégradé blog (override total) ===== */


/* ensure parent is relative */


/* Header intranet : menu compte + ouverture site */
.intranet-top-actions{gap:10px;position:relative;}
.accountDropdown{position:relative;}
.accountDropdown__toggle{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:#111827;
  border-radius:999px;
  min-height:40px;
  padding:4px 10px 4px 4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  font-weight:750;
  box-shadow:0 8px 22px rgba(17,24,39,.06);
}
.accountDropdown__toggle:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft);}
.accountDropdown__avatar{
  width:32px;height:32px;border-radius:999px;
  display:inline-grid;place-items:center;
  color:#fff;font-size:.86rem;font-weight:900;
  background:var(--grad);
  flex:0 0 auto;
}
.accountDropdown__name{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.accountDropdown__chevron{width:16px;height:16px;color:#6b7280;transition:transform .18s ease;}
.accountDropdown.is-open .accountDropdown__chevron{transform:rotate(180deg);}
.accountDropdown__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:210px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px;
  box-shadow:0 18px 42px rgba(17,24,39,.16);
  z-index:80;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.accountDropdown.is-open .accountDropdown__menu{opacity:1;visibility:visible;transform:translateY(0);}
.accountDropdown__menu a{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  color:#111827;
  font-weight:700;
}
.accountDropdown__menu a:hover{background:#f8fafc;}
.intranet-site-btn{height:40px;white-space:nowrap;}
@media (max-width:720px){
  .header{padding-inline:12px;}
  .header .search{display:none;}
  .accountDropdown__name{max-width:120px;}
  .intranet-site-btn span{display:none;}
  .intranet-site-btn::before{content:'Site';}
}
.sidebar__brandLink{display:inline-flex;align-items:center;text-decoration:none;border-radius:10px;line-height:0}
.sidebar__brandLink:focus-visible{outline:3px solid rgba(71,110,248,.25);outline-offset:4px}

/* ===== Correctif responsive intranet : largeur mobile uniforme ===== */
html, body{max-width:100%;overflow-x:hidden;}
.shell,.main,.content,.container,.card,.grid,.form,.form__row{min-width:0;}
.content{max-width:100%;overflow-x:clip;}
.card{max-width:100%;overflow-x:auto;}
.table{max-width:100%;}
img,svg,video,canvas{max-width:100%;height:auto;}

/* Les popups SweetAlert doivent toujours passer au-dessus des modales intranet */
.swal2-container{z-index:999999!important;}
.swal2-popup{z-index:1000000!important;}

@media (max-width:980px){
  .content{width:100%;max-width:100vw;padding:14px 10px;}
  .container{width:100%;max-width:100%;}
  .header{max-width:100vw;min-width:0;}
  .card{border-radius:12px;}
  .flex{flex-wrap:wrap;}
  .btn{max-width:100%;white-space:normal;}
  .modal,.modal-dialog,.modal__box,.agenda-modal__box,.ipModal__dialog{width:min(100%,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;}
  .modal-overlay,.modal-backdrop,.agenda-modal{padding:10px!important;}
}

@media (max-width:560px){
  .content{padding:12px 8px;}
  .card{padding:12px;}
  .form__row{grid-template-columns:1fr!important;}
  .table thead th,.table tbody td{padding:9px 10px;}
  .agenda-modal__head,.agenda-modal__foot{flex-wrap:wrap;align-items:flex-start;}
  .agenda-modal__foot-actions{width:100%;margin-left:0;justify-content:flex-end;flex-wrap:wrap;}
}