/* ===== Variables locales (cohérentes Wayo) ===== */
:root{
  --wayo-orange:#fc7b30;
  --wayo-orange-2:#fbb040;
  --wayo-blue:#23235b;

  --pp-ink:#1f2937;
  --pp-ink-soft:#4b5563;
  --pp-line:#e5e7eb;
  --pp-card:#fafafa;

  /* Hauteur du header sticky (ajuste si besoin) */
  --pp-sticky:84px;
}

/* ===== HERO ===== */
.pp-hero{
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(251,176,64,.22), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(35,35,91,.08), transparent 70%),
    #fff;
  border-bottom:1px solid var(--pp-line);
}
.pp-hero .pp-hero-inner{
  min-height: 220px;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding: 2.5rem 0;
}
.pp-hero .pp-hero-text h1{
  font: 800 2.2rem/1.1 'Shayan', 'Cairo', 'Tajawal', 'Arial', sans-serif;
  color: var(--wayo-blue);
  letter-spacing:.2px;
}
.pp-hero .pp-hero-text p{ margin-top:.35rem; color:var(--pp-ink-soft); }
.pp-hero .pp-meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.pp-hero .pill{
  background: linear-gradient(135deg, var(--wayo-orange-2), var(--wayo-orange));
  color:#fff; font-weight:700; font-size:.85rem; padding:.35rem .65rem; border-radius:999px;
}
.pp-hero .pp-hero-art .shield{
  width:min(200px,28vw); aspect-ratio:1/1; border-radius:22px;
  background:
    conic-gradient(from 200deg at 50% 50%, rgba(35,35,91,.18), rgba(35,35,91,.02)),
    linear-gradient(135deg, rgba(251,176,64,.35), rgba(244,122,31,.35));
  box-shadow: 0 24px 64px rgba(0,0,0,.12);
  transform: rotate(6deg);
}
@media (max-width: 768px){
  .pp-hero .pp-hero-inner{ flex-direction:column; align-items:flex-start; }
}

/* ===== Fil d’Ariane ===== */
.pp-breadcrumb{ border-bottom:1px solid var(--pp-line); background:#fff; }
.pp-breadcrumb .container{ display:flex; gap:.6rem; padding:.75rem 0; color:var(--pp-ink-soft); }
.pp-breadcrumb a{ color:var(--wayo-blue); font-weight:700; }

/* ===== Layout principal (mobile-first) ===== */
.pp-layout{
  display:grid; grid-template-columns: 1fr; gap: 1.75rem;
  padding: 1.5rem 0 3rem;
}
@media (min-width: 992px){
  .pp-layout{ grid-template-columns: 280px 1fr; gap: 2rem; }
}

/* ===== TOC sticky ===== */
.pp-toc{ position: sticky; top: var(--pp-sticky); height: fit-content; }
.pp-toc .pp-toc-card{
  background:#fff; border:1px solid var(--pp-line); border-radius:16px; padding:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.pp-toc .pp-search{ padding:4px 2px 8px; }
.pp-toc .pp-search input{
  width:100%; padding:10px 12px; border:1.5px solid var(--pp-line); border-radius:10px; font-size:.95rem;
}
.pp-toc ol{ margin:8px 2px; padding-left: 18px; }
.pp-toc li{ margin:.35rem 0; }
.pp-toc a{
  color:var(--pp-ink-soft); text-decoration:none; font-weight:600; font-size:.95rem;
}
.pp-toc a.active{ color:var(--wayo-orange); }
.pp-toc ol ol{ margin:.25rem 0 .35rem; padding-left: 14px;  }
.pp-toc .pp-download{ display:inline-block; margin:10px 4px 2px; font-weight:800; color:var(--wayo-orange); }

@media (max-width: 1000px) {
  .pp-toc {
    position: static; /* ou relative selon ton besoin */
    top: auto;
  }
}

/* ===== Article ===== */
.pp-article{ min-width:0; }
.pp-section{ padding: 16px 8px; border-bottom:1px dashed var(--pp-line); }
.pp-section:last-of-type{ border-bottom:none; }
.pp-section h2{
  font: 800 1.55rem/1.2 'Shayan', 'Cairo', 'Tajawal', 'Arial', sans-serif; color:var(--wayo-blue); margin-bottom:8px;
}
.pp-section h3{
  font: 700 1.05rem/1.35 'Shayan', 'Cairo', 'Tajawal', 'Arial', sans-serif; color:#111827; margin:10px 0 6px;
}
.pp-section p, .pp-section li{ color:var(--pp-ink); }
.pp-section ul{ padding-left: 1.1rem; list-style: none; }
.pp-section ul li{ position:relative; padding-left:.9rem; margin:.35rem 0; }
.pp-section ul li:before{ content:" - "; left:0; top:0; color:var(--wayo-orange); font-weight:900; }

/* ===== Cards ===== */
.pp-card{
  background:var(--pp-card); border:1px solid var(--pp-line); border-radius:14px;
  padding:14px 16px; margin:12px 0;
}

/* ===== CTA droits ===== */
.pp-intent{ padding-top: 6px; }
.pp-intent .pp-intent-card{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(251,176,64,.18), rgba(244,122,31,.12));
  border:1px solid #ffd9a3; border-radius:16px; padding:16px 18px;
}
.pp-intent .btn{ border-radius:10px; }

/* ===== Search highlight ===== */
mark.pp-hit{
  background: linear-gradient(90deg, #fff3e0, #ffe1bd);
  padding:0 .15em; border-radius:4px;
}

/* ===== Impression ===== */
@media print{
  /* .site-header, .pp-breadcrumb, .pp-toc, .site-footer{ display:none !important; } */
  .pp-layout{ display:block; padding:0; }
  .pp-section{ page-break-inside: avoid; }
}
/* ========== HEADER REWORK ========== */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header .header-wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; gap:16px;
}
.site-header .logo img{ height:42px; display:block; }

.main-nav{ display:flex; align-items:center; gap:24px; }
.main-nav .nav-list{ display:flex; gap:18px; align-items:center; }
.main-nav .nav-list a{
  font-weight:700; color:#111; font-size:.95rem; letter-spacing:.2px;
  padding:10px 6px; border-radius:8px; transition:.2s ease;
}
.main-nav .nav-list a:hover,
.main-nav .nav-list a:focus-visible{
  color:#F47A1F; background:#fff3e6; outline:none;
}
.nav-cta .btn-login{
  background:linear-gradient(135deg,#fbb040,#F47A1F); color:#fff; border-radius:10px;
  padding:.55rem 1rem; font-weight:800; box-shadow:0 6px 18px rgba(244,122,31,.25);
}
.nav-cta .btn-login:hover{ filter:brightness(.95); transform:translateY(-1px); }

/* Burger */
.nav-toggle{
  display:none; width:42px; height:42px; border-radius:10px; border:1px solid rgba(0,0,0,.08);
  background:#fff; align-items:center; justify-content:center; gap:4px; cursor:pointer;
}
.nav-toggle span{ width:18px; height:2px; background:#111; display:block; }
@media (max-width: 992px){
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* Drawer mobile */
.nav-drawer[hidden]{ display:none; }
.nav-drawer{
  position:fixed; inset:64px 0 0 0; background:rgba(255,255,255,.98); z-index:999;
  border-top:1px solid rgba(0,0,0,.06);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:transform .2s ease, opacity .2s ease, visibility .2s ease;
}
.nav-drawer.open{ transform:translateY(0); opacity:1; visibility:visible; }
.drawer-nav{ padding:16px; }
.drawer-nav ul{ display:flex; flex-direction:column; gap:8px; margin:6px 0 14px; }
.drawer-nav a{
  display:block; padding:12px 10px; border-radius:10px; font-weight:700; color:#111;
}
.drawer-nav a:hover{ background:#fff3e6; color:#F47A1F; }
.drawer-cta{ display:block; text-align:center; }

/* ========== FOOTER REWORK ========== */

.btn-primary{
  background:linear-gradient(135deg,#fbb040,#F47A1F); color:#fff; border:none;
  padding:.6rem 1rem; border-radius:10px; font-weight:800; cursor:pointer;
}
.btn-primary:hover{ filter:brightness(.95); }
.disclaimer{ color:rgba(255,255,255,.7); font-size:.85rem; }





/* Accessibilité focus visible (si pas déjà présent dans ton global) */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid #F47A1F; outline-offset:2px; border-radius:10px;
}


#tocList {
  list-style: none;
  padding-left: 0;
}

#tocList li a {
  text-decoration: none;
}