/*
 Theme Name:   Vox Populi Child
 Theme URI:    http://vox-populi.bold-themes.com
 Description:  Vox Populi child theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     100villejuif
 Version:      1.0.0
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  100villejuif-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */

   #programme-villejuif.vj-page{
      --vj-bg:#f6f8fb;
      --vj-card:#ffffff;
      --vj-card-2:#f2f6fb;
      --vj-text:#1f2937;
      --vj-muted:#5b6472;
      --vj-accent:#14b8a6;
      --vj-border:#dbe3ee;
      --vj-shadow:0 10px 28px rgba(15,23,42,.08);
      --vj-radius:16px;
      --vj-radius-sm:12px;
      background: var(--vj-bg);
      color: var(--vj-text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.6;
      padding: 18px;
      border-radius: 18px;
    }

    #programme-villejuif * { box-sizing: border-box; }

    /* HERO / BANDEAU PRINCIPAL EN DÉGRADÉ VERT */
    #programme-villejuif .vj-hero{
      background: linear-gradient(135deg, #014d10 0%, #018a1c 40%, #01BA26 100%);
      color:#fff;
      border-radius: 18px;
      padding: 26px 22px;
      margin-bottom: 18px;
      box-shadow: 0 14px 34px rgba(1, 111, 29, .22);
    }

    #programme-villejuif .vj-badge{
      display:inline-block;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.2);
      font-size:12px;
      font-weight:700;
      margin-bottom:10px;
      letter-spacing:.02em;
    }

    #programme-villejuif .vj-hero h1{
      margin:0 0 6px 0;
      color:#fff;
      font-size: clamp(22px, 3vw, 32px);
      line-height:1.15;
    }

    #programme-villejuif .vj-hero .vj-subtitle{
      margin:0 0 14px 0;
      color: rgba(255,255,255,.95);
      font-weight:700;
    }

    #programme-villejuif .vj-hero p{
      margin: 0 0 10px 0;
      color: rgba(255,255,255,.94);
    }

    #programme-villejuif .vj-layout{
      display:grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    /* SOMMAIRE STICKY (DESKTOP) */
    #programme-villejuif .vj-toc{
      position: sticky;
      top: 20px;
      align-self: start;
      max-height: calc(100vh - 40px);
      overflow: auto;
      background: var(--vj-card);
      border:1px solid var(--vj-border);
      border-radius: var(--vj-radius);
      box-shadow: var(--vj-shadow);
      padding: 14px;
    }

    #programme-villejuif .vj-toc h3{
      margin:0 0 10px 0;
      font-size: 15px;
      color: #016F1D;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    #programme-villejuif .vj-toc ul{
      list-style: none;
      margin:0;
      padding:0;
    }

    #programme-villejuif .vj-toc li{
      margin: 4px 0;
    }

    #programme-villejuif .vj-toc a{
      display:block;
      text-decoration:none;
      color: var(--vj-text);
      font-size: 13px;
      line-height: 1.35;
      padding: 8px 10px;
      border-radius: 10px;
      transition: .2s ease;
      border: 1px solid transparent;
    }

    #programme-villejuif .vj-toc a:hover{
      background: #f2fff5;
      border-color: #ccefd5;
      color: #016F1D;
    }

    #programme-villejuif .vj-content{
      display:grid;
      gap:16px;
    }

    #programme-villejuif .vj-section{
      background: var(--vj-card);
      border: 1px solid var(--vj-border);
      border-radius: var(--vj-radius);
      box-shadow: var(--vj-shadow);
      padding: 20px;
      scroll-margin-top: 24px;
    }

    #programme-villejuif .vj-section h3{
      margin:0 0 12px 0;
      font-size: clamp(15px, 1.4vw, 19px);
      line-height: 1.25;
      text-transform: uppercase;
      border-left: 4px solid #016F1D;
      padding-left: 10px;
      color: #016F1D;
    }

    #programme-villejuif .vj-section p{
      margin: 0 0 10px 0;
      color: var(--vj-text);
    }

    #programme-villejuif .vj-section ul{
      list-style: none;
      margin: 8px 0 0 0;
      padding:0;
    }

    #programme-villejuif .vj-section > ul > li{
      position: relative;
      margin: 10px 0;
      background: var(--vj-card-2);
      border: 1px solid #e7eef8;
      border-radius: var(--vj-radius-sm);
      padding: 12px 12px 12px 16px;
    }

    #programme-villejuif .vj-section > ul > li::before{
      content:"";
      position:absolute;
      left:8px;
      top:17px;
      width:7px;
      height:7px;
      border-radius:50%;
      background: var(--vj-accent);
      box-shadow:0 0 0 4px rgba(20,184,166,.12);
    }

    #programme-villejuif .vj-section > ul > li > strong{
      display:block;
      margin-left:8px;
      margin-bottom:4px;
    }

    #programme-villejuif .vj-section > ul > li > span,
    #programme-villejuif .vj-section > ul > li > div{
      margin-left:8px;
      display:block;
    }

    #programme-villejuif .vj-section ul ul{
      list-style: disc;
      margin: 8px 0 0 26px;
      padding-left: 10px;
    }

    #programme-villejuif .vj-section ul ul li{
      margin: 6px 0;
      background: transparent;
      border: none;
      padding: 0;
    }

    #programme-villejuif .vj-note{
      margin-top:8px;
      color: var(--vj-muted);
      font-size: 13px;
    }

    #programme-villejuif em{
      color: #016F1D;
      font-style: italic;
    }

    @media (max-width: 1024px){
      #programme-villejuif .vj-layout{
        grid-template-columns: 1fr;
      }
      /* Sur mobile, on enlève le sticky pour le confort de lecture */
      #programme-villejuif .vj-toc{
        position: relative;
        top: 0;
        max-height: none;
      }
    }