:root{
      --bg0:#08130f;
      --bg1:#0f241c;
      --card:#0f2a21cc;
      --card2:#102b22;
      --stroke:rgba(255,255,255,.08);
      --text:rgba(255,255,255,.88);
      --muted:rgba(255,255,255,.68);

      --gold:#d6b46b;
      --gold2:#b8923a;
      --emerald:#1f6f54;

      --paper:#f2e7c9;
      --shadow: 0 18px 40px rgba(0,0,0,.35);
      --radius: 16px;
      --max: 1100px;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 900px at 10% -10%, rgba(214,180,107,.20), transparent 55%),
        radial-gradient(900px 700px at 110% 10%, rgba(31,111,84,.25), transparent 55%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
      min-height:100vh;
    }

    /* Motif discret */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.10;
      background:
        linear-gradient(45deg, transparent 48%, rgba(214,180,107,.18) 49%, rgba(214,180,107,.18) 51%, transparent 52%) 0 0/38px 38px,
        linear-gradient(-45deg, transparent 48%, rgba(214,180,107,.12) 49%, rgba(214,180,107,.12) 51%, transparent 52%) 0 0/38px 38px;
      mix-blend-mode: screen;
    }

    a{ color: var(--paper); text-decoration: none; }
    a:hover{ color:#fff; }

    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 22px 16px 54px;
      position:relative;
    }

    /* Topbar */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 14px;
    }

    .crumbs{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .01em;
      font-size: 13px;
    }

    .crumbs a{
      color: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      padding: 8px 12px;
      border-radius: 999px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition: background .15s ease, transform .12s ease, border-color .15s ease;
    }
    .crumbs a:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.10);
      border-color: rgba(214,180,107,.28);
      color:#fff;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(214,180,107,.25);
      background: rgba(214,180,107,.10);
      color: #f6eed9;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: .01em;
      white-space: nowrap;
    }
    .chip .mark{
      width: 9px; height: 9px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--emerald), rgba(31,111,84,.35));
      box-shadow: 0 0 0 4px rgba(31,111,84,.12);
    }

    /* Hero */
    .hero{
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(16,43,34,.90), rgba(8,19,15,.75));
      border-radius: calc(var(--radius) + 6px);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 240px at 18% 0%, rgba(214,180,107,.22), transparent 60%),
        radial-gradient(420px 240px at 86% 10%, rgba(31,111,84,.25), transparent 60%);
      pointer-events:none;
    }

    .hero-inner{
      padding: 24px 22px 18px;
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items:center;
    }

    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding: 8px 12px;
      border: 1px solid rgba(214,180,107,.28);
      background: rgba(0,0,0,.18);
      border-radius: 999px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .02em;
      width: fit-content;
    }
    .kicker .dot{
      width: 10px; height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff, var(--gold2));
      box-shadow: 0 0 0 4px rgba(214,180,107,.12);
    }

    h1{
      margin: 12px 0 8px;
      font-family: Cinzel, "Playfair Display", serif;
      letter-spacing: .02em;
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.06;
      color:#fff;
      text-shadow: 0 10px 26px rgba(0,0,0,.40);
    }

    .subtitle{
      margin: 0;
      color: var(--muted);
      font-size: clamp(14px, 2vw, 17px);
      max-width: 75ch;
    }

    .hero-actions{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: var(--text);
      font-weight: 800;
      transition: transform .12s ease, background .15s ease, border-color .15s ease;
    }
    .pill:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.10);
      border-color: rgba(214,180,107,.35);
      color:#fff;
    }
    .pill .ic{
      width: 10px; height: 10px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--gold), rgba(214,180,107,.35));
      box-shadow: 0 0 0 4px rgba(214,180,107,.14);
    }

    /* Callout image (logo coran) */
    .hero-aside{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      border-radius: 16px;
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 170px;
      position:relative;
      overflow:hidden;
    }
    .hero-aside::before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(480px 220px at 20% 20%, rgba(214,180,107,.20), transparent 60%);
      pointer-events:none;
    }
    .hero-aside img{
      width: min(220px, 85%);
      height: auto;
      filter: drop-shadow(0 16px 24px rgba(0,0,0,.35));
      position:relative;
      z-index:1;
    }

    /* Layout article */
    .layout{
      display:grid;
      grid-template-columns: 1fr 320px;
      gap: 16px;
      margin-top: 16px;
    }

    /* Card sections */
    .card{
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      box-shadow: 0 10px 30px rgba(0,0,0,.22);
      overflow:hidden;
    }

    .card-head{
      display:flex;
      align-items:baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(214,180,107,.10), transparent);
    }
    .card-head h2{
      margin:0;
      font-family: "Playfair Display", serif;
      font-size: 20px;
      color:#fff;
      letter-spacing:.01em;
    }
    .card-head .hint{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .card-body{
      padding: 14px 16px 16px;
    }

    /* Typography inside article */
    .prose p{
      margin: 10px 0;
      color: rgba(255,255,255,.84);
      line-height: 1.7;
      font-size: 16px;
    }
    .prose h3{
      margin: 16px 0 8px;
      font-family: "Playfair Display", serif;
      font-size: 18px;
      color:#fff;
    }
    .prose b{ color:#fff; }
    .prose u{ text-decoration-thickness: 2px; text-underline-offset: 3px; }
    .muted{ color: var(--muted); }

    /* Verse blocks (remplace tes <table class=cadre2>) */
    .verse{
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(16,43,34,.78), rgba(0,0,0,.10));
      border-radius: 14px;
      padding: 14px 14px 12px;
      box-shadow: 0 14px 28px rgba(0,0,0,.25);
      position:relative;
      overflow:hidden;
      margin: 12px 0;
    }
    .verse::before{
      content:"";
      position:absolute;
      inset:-1px;
      background: radial-gradient(520px 220px at 10% 10%, rgba(214,180,107,.18), transparent 62%);
      opacity:.9;
      pointer-events:none;
    }
    .verse .text{
      position:relative;
      z-index:1;
      margin:0;
      font-size: 16px;
      line-height: 1.65;
      color: rgba(255,255,255,.90);
    }
    .verse .ref{
      position:relative;
      z-index:1;
      margin: 10px 0 0;
      text-align:right;
      color: rgba(255,255,255,.78);
      font-weight: 800;
      font-size: 13px;
      letter-spacing:.01em;
    }

    /* Highlight style (remplace .ombre) */
    .hl{
      color:#fff;
      font-weight: 800;
      text-shadow: 0 10px 22px rgba(0,0,0,.35);
      position:relative;
      white-space: normal;
    }
    .hl::after{
      content:"";
      position:absolute;
      left:-2px; right:-2px;
      bottom: -2px;
      height: 8px;
      background: rgba(214,180,107,.18);
      border-radius: 8px;
      z-index:-1;
      filter: blur(.2px);
    }

    /* Question box */
    .qbox{
      border: 1px solid rgba(214,180,107,.22);
      background: linear-gradient(180deg, rgba(214,180,107,.12), rgba(0,0,0,.10));
      border-radius: 14px;
      padding: 14px 14px 12px;
      margin: 14px 0;
      box-shadow: 0 14px 28px rgba(0,0,0,.22);
    }
    .qbox h3{
      margin:0 0 8px;
      font-family: Cinzel, serif;
      letter-spacing:.02em;
      font-size: 16px;
      color:#fff;
    }
    .qbox ul{
      margin: 0;
      padding-left: 18px;
      color: rgba(255,255,255,.85);
      line-height: 1.7;
    }
    .qbox li{ margin: 6px 0; }

    /* Figures / images */
    figure{ margin: 14px 0; }
    figure img{
      width: 100%;
      height:auto;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 14px 30px rgba(0,0,0,.30);
      background: rgba(0,0,0,.15);
    }
    figure figcaption{
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-align:center;
    }

    .thumbs{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .thumbs a{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      box-shadow: 0 12px 26px rgba(0,0,0,.22);
      transition: transform .12s ease, border-color .15s ease, background .15s ease;
      display:block;
    }
    .thumbs a:hover{
      transform: translateY(-2px);
      border-color: rgba(214,180,107,.30);
      background: rgba(255,255,255,.07);
    }
    .thumbs img{
      width:100%;
      height:auto;
      display:block;
    }

    /* Sidebar */
    .side{
      position: sticky;
      top: 14px;
      align-self:start;
      display:flex;
      flex-direction: column;
      gap: 12px;
    }

    .toc{
      padding: 12px 12px 10px;
    }
    .toc h3{
      margin: 0 0 10px;
      font-family: "Playfair Display", serif;
      color:#fff;
      font-size: 16px;
      letter-spacing:.01em;
    }
    .toc a{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.82);
      font-weight: 800;
      margin: 8px 0;
      transition: transform .12s ease, border-color .15s ease, background .15s ease;
    }
    .toc a:hover{
      transform: translateY(-1px);
      border-color: rgba(214,180,107,.28);
      background: rgba(255,255,255,.10);
      color:#fff;
    }
    .toc a .b{
      width: 9px; height: 9px;
      border-radius: 3px;
      background: linear-gradient(180deg, var(--gold), rgba(214,180,107,.35));
      box-shadow: 0 0 0 4px rgba(214,180,107,.14);
      flex: 0 0 auto;
    }

    .note{
      padding: 12px 12px 10px;
      color: rgba(255,255,255,.82);
      line-height: 1.55;
      font-size: 14px;
    }
    .note b{ color:#fff; }
    .note small{ color: var(--muted); font-weight: 700; display:block; margin-top: 6px; }

    /* Footer */
    footer{
      margin-top: 16px;
      padding: 16px 12px;
      border-top: 1px solid rgba(255,255,255,.08);
      text-align:center;
      color: rgba(255,255,255,.70);
    }

    .back{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin-top: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.82);
      font-weight: 900;
    }
    .back:hover{
      border-color: rgba(214,180,107,.30);
      background: rgba(255,255,255,.10);
      color:#fff;
    }

    /* Responsive */
    @media (max-width: 900px){
      .layout{ grid-template-columns: 1fr; }
      .side{ position:relative; top:auto; }
      .hero-inner{ grid-template-columns: 1fr; }
      .hero-aside{ min-height: 150px; }
    }
    @media (max-width: 520px){
      .hero-inner{ padding: 20px 16px 14px; }
      .card-head{ padding: 12px 14px; }
      .card-body{ padding: 12px 14px 14px; }
    }
    
    /* HR plus élégant */
  .soft-hr{
    border: 0;
    height: 1px;
    margin: 18px 0 14px;
    background: linear-gradient(
      to right,
      transparent,
      rgba(214,180,107,.45),
      rgba(255,255,255,.08),
      rgba(214,180,107,.45),
      transparent
    );
    opacity: .95;
  }

  /* Titres de section : “barre dorée” à gauche + spacing propre */
  .section-body > h2{
    position: relative;
    margin: 18px 0 10px;
    padding-left: 14px;
    font-family: "Playfair Display", serif;
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 10px 26px rgba(0,0,0,.40);
  }

  .section-body > h2::before{
    content:"";
    position:absolute;
    left:0;
    top:.25em;
    bottom:.25em;
    width: 4px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--gold), rgba(214,180,107,.25));
    box-shadow: 0 0 0 4px rgba(214,180,107,.12);
  }