:root{
  /* Base claire */
  --bg:#f5f9fb;
  --bg-soft:#eef4f7;
  --card:#ffffff;

  /* Texte */
  --white:#0b1f2a;      /* texte principal */
  --muted:#5f7b88;      /* texte secondaire */

  /* Palette ACTAGEN */
  --primary:#17546C;        /* bleu foncé logo */
  --primary-soft:#e3f0f5;   /* fond soft */
  --accent:#50BCEC;         /* bleu clair logo */
  --accent-soft:#d7effa;    /* bleu clair soft */

  --radius:18px;
  --radius-sm:12px;
  --ring: 0 0 0 3px rgba(80,188,236,.22);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(23,84,108,.10), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(80,188,236,.12), transparent 55%),
    var(--bg);
  color:var(--white);
  letter-spacing:.1px;
}

.container{width:min(1100px,94%);margin:auto;}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(245,249,251,.9);
  border-bottom:1px solid rgba(23,84,108,.10);
  backdrop-filter:blur(10px);
}
.topbar__inner{
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.4px;
}
.logo i{
  color:var(--primary);
  font-size:20px;
  filter:drop-shadow(0 6px 18px rgba(23,84,108,.20));
}
.nav{display:flex;gap:10px}
.nav a{
  color:var(--muted);
  text-decoration:none;font-weight:800;
  padding:8px 12px;border-radius:999px;
  transition:.18s ease;
}
.nav a.active,.nav a:hover{
  color:var(--primary);
  background:var(--primary-soft);
  box-shadow:inset 0 0 0 1px rgba(23,84,108,.12);
}

/* Hero */
.hero{
  padding:52px 0 30px;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(23,84,108,.18) 0, transparent 60%),
    radial-gradient(900px 520px at 92% -20%, rgba(80,188,236,.22) 0, transparent 55%);
  border-bottom:1px solid rgba(23,84,108,.08);
}
.hero h1{
  font-size:40px;margin:0 0 6px;
  line-height:1.15;
  background:linear-gradient(90deg,#0b1f2a, var(--primary) 50%, #0b1f2a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);margin-top:0}

/* Searchbar */
.searchbar{
  margin-top:18px;display:flex;gap:8px;
  background:var(--card);
  padding:8px;border-radius:14px;
  border:1px solid rgba(23,84,108,.12);
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}
.searchbar input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--white);font-size:16px;padding:8px 10px;
}
.searchbar input::placeholder{color:#89a3ae}
.searchbar:focus-within{
  border-color:rgba(80,188,236,.7);
  box-shadow:var(--ring);
}
.searchbar button{
  background:linear-gradient(180deg, var(--accent), #2aa6db);
  border:0;color:#05212b;font-weight:900;
  padding:10px 16px;border-radius:10px;cursor:pointer;
  transition:.18s ease;
}
.searchbar button:hover{
  transform:translateY(-1px);
  filter:saturate(1.1);
  box-shadow:0 8px 18px rgba(80,188,236,.35);
}

/* Tabs */
.tabs{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;
}
.tab{
  text-decoration:none;color:var(--muted);font-weight:900;
  padding:7px 12px;border-radius:999px;
  background:var(--card);
  border:1px solid rgba(23,84,108,.10);
  font-size:14px;transition:.18s ease;
}
.tab:hover{
  color:var(--primary);
  border-color:rgba(80,188,236,.7);
  box-shadow:0 0 0 3px rgba(80,188,236,.10);
}
.tab.active{
  color:var(--primary);
  background:var(--primary-soft);
  border-color:rgba(23,84,108,.25);
  box-shadow:inset 0 0 0 1px rgba(23,84,108,.08), 0 8px 18px rgba(15,23,42,.08);
}

/* Sections */
.section{padding:28px 0}
.section__head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.section__head h2{
  margin:0;font-size:20px;font-weight:900;letter-spacing:.3px;
  position:relative;color:#0b1f2a;
}
.section__head h2::after{
  content:"";
  position:absolute;left:0;bottom:-7px;height:3px;width:44px;
  background:linear-gradient(90deg,var(--accent), transparent);
  border-radius:999px;opacity:.9;
}

/* Grid */
.grid{display:grid;gap:14px}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--3{grid-template-columns:1fr}}

/* Cards */
.card{
  background:var(--card);
  border:1px solid rgba(23,84,108,.10);
  border-radius:var(--radius);
  padding:16px;text-decoration:none;color:var(--white);
  display:flex;gap:14px;transition:.18s ease;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(80,188,236,.8);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
}
.card__icon{
  width:46px;height:46px;border-radius:12px;
  background:radial-gradient(circle at 30% 20%, rgba(80,188,236,.35), transparent 55%), var(--accent-soft);
  display:grid;place-items:center;font-size:20px;
  color:var(--primary);
}
.card__body h3{
  margin:0 0 4px;font-weight:900;font-size:16px;color:#0b1f2a;
}
.card__body p{
  margin:0;color:var(--muted);font-size:14px;line-height:1.45;
}
.card__meta{margin-top:8px;color:var(--muted);font-size:13px}

/* List docs */
.list{display:flex;flex-direction:column;gap:10px}
.list__item{
  background:var(--card);
  border:1px solid rgba(23,84,108,.10);
  border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--white);
  transition:.18s ease; position:relative; overflow:hidden;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.list__item::after{
  content:""; position:absolute; inset:-40% -60% auto auto;
  width:220px;height:220px; 
  background:radial-gradient(circle, rgba(80,188,236,.18), transparent 60%);
  transform:translate(40px,-40px);
}
.list__item:hover{
  border-color:rgba(80,188,236,.9);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}
.list__title{font-weight:900;margin-bottom:4px;font-size:16px;color:#0b1f2a}
.list__excerpt{font-size:14px;color:var(--muted)}
.list__meta{
  margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center
}

/* Badges */
.badge{
  font-size:12px;font-weight:900;padding:3px 8px;border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid rgba(23,84,108,.18);
}
.badge--soft{
  background:#f3f7f9;
  color:var(--muted);
  border:1px solid rgba(23,84,108,.08);
}

.muted{color:var(--muted);font-size:13px}

/* Doc */
.doc h1{margin-top:6px;color:#0b1f2a}
.breadcrumb{color:var(--muted);font-size:14px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}

/* ✅ Titre article au-dessus du contenu */
.doc__title{
  margin:0 0 6px;
  font-size:34px;
  font-weight:900;
  color:#0b1f2a;
  line-height:1.2;
}
.doc__subtitle{
  margin:0 0 14px;
  color:var(--muted);
  font-weight:700;
}
.doc__meta{margin-top:4px}

.doc__content{
  margin-top:14px;line-height:1.75;font-size:16px;color:#0b1f2a;
}
.doc__content h2,.doc__content h3{
  margin-top:20px;font-weight:900;scroll-margin-top:90px;color:#0b1f2a;
}
.doc__content h2{
  position:relative;padding-bottom:6px;
}
.doc__content h2::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:70px;
  background:linear-gradient(90deg,var(--accent), transparent);
  border-radius:999px;
}
.doc__content h3{color:#124254}
.doc__content a{
  color:var(--primary); font-weight:800; text-decoration:none;
  border-bottom:1px dashed rgba(23,84,108,.5);
}
.doc__content a:hover{color:#0a3850}

.empty{
  background:#fff;border:1px dashed rgba(23,84,108,.35);
  padding:16px;border-radius:12px;color:var(--muted)
}

/* Layout + sidebar */
.layout{display:grid;grid-template-columns:260px 1fr;gap:16px;}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

.sidebar{
  position:sticky;top:80px;height:max-content;
  background:var(--card);
  padding:12px;border:1px solid rgba(23,84,108,.10);
  border-radius:14px;
  box-shadow:0 10px 20px rgba(15,23,42,.06);
}

/* Arbre catégories */
.side-nav{list-style:none;margin:0;padding:0;}
.side-nav li{margin:2px 0;}
.side-nav li>a{
  display:flex;align-items:center;gap:6px;
  padding:7px 8px;border-radius:10px;
  color:var(--muted);text-decoration:none;font-weight:800;font-size:14px;
  transition:.18s ease;
}
.side-nav li>a:hover{
  color:var(--primary);
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px rgba(80,188,236,.45);
}
.side-nav li.active>a{
  color:var(--primary);
  background:var(--primary-soft);
  border-left:3px solid var(--accent);
  box-shadow:inset 0 0 0 1px rgba(23,84,108,.12);
}

/* ✅ Indentation des sous-menus (car maintenant ul a class side-nav aussi) */
.children > .side-nav{
  list-style:none;
  margin:4px 0 4px 12px;
  padding-left:8px;
  border-left:1px dashed rgba(23,84,108,.25);
}

/* Doc layout + TOC (✅ 3 colonnes) */
.doc-layout{
  display:grid;
  grid-template-columns:260px 1fr 260px;
  gap:18px
}
.toc{
  position:sticky;top:80px;height:max-content;
  background:var(--card);
  border:1px solid rgba(23,84,108,.10);
  border-radius:14px;padding:12px;
  box-shadow:0 10px 20px rgba(15,23,42,.06);
}
.toc h3{margin:0 0 6px;font-size:15px;font-weight:900;color:#0b1f2a}
.toc a{
  display:block;color:var(--muted);text-decoration:none;font-size:14px;
  padding:5px 0;font-weight:700;transition:.12s ease;
}
.toc a:hover{color:var(--primary);transform:translateX(2px)}

@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  .toc{position:relative;top:auto}
}

/* Gardé pour compat (si une page utilise encore toc--inner) */
.toc--inner{margin-top:12px;background:transparent;border:0;padding:0;position:relative;top:auto}

/* Titre fixe sidebar */
.sidebar__title{
  font-weight:900;
  margin-bottom:8px;
  color:var(--primary);
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

/* caret chevrons */
.side-nav .caret{
  width:8px;height:8px;display:inline-block;margin-right:6px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);
  transition:.15s ease;
  opacity:.7;
}
.side-nav .caret.empty{
  border-color:transparent;
}

/* accordéon */
.side-nav li.has-children > .children{display:none;}
.side-nav li.open > .children{display:block;}

.side-nav li.open > a .caret{
  transform:rotate(45deg);
  border-color:var(--primary);
  opacity:1;
}
/* caret bouton style + / − */
.side-nav .caret-btn{
  width:18px;height:18px;flex:0 0 18px;
  display:inline-grid;place-items:center;
  border-radius:6px;
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:900;
  font-size:14px;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(23,84,108,.12);
  transition:.15s ease;
}

/* signe "+" par défaut */
.side-nav .caret-btn::before{
  content:"+";
  transform:translateY(-1px);
}

/* hover bleu clair */
.side-nav li.has-children > a.node:hover .caret-btn{
  background:var(--accent-soft);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px rgba(80,188,236,.55);
}

/* quand open => signe "-" */
.side-nav li.open > a.node .caret-btn::before{
  content:"–";
  transform:none;
}

/* pas de caret visible si pas d'enfants */
.side-nav .caret-btn.empty{
  background:transparent;
  box-shadow:none;
}
.side-nav .caret-btn.empty::before{
  content:"";
}

/* animation slide douce des sous-menus */
.side-nav li.has-children > .children{
  display:block;              /* on garde block */
  max-height:0;               /* fermé */
  overflow:hidden;
  opacity:0;
  transform:translateY(-2px);
  transition:
    max-height .25s ease,
    opacity .2s ease,
    transform .2s ease;
}

/* ouvert */
.side-nav li.open > .children{
  max-height:1200px;          /* assez grand pour contenir */
  opacity:1;
  transform:translateY(0);
}