:root{
    --max:1600px;
    --pad: 4.5rem;
  
    --r: 18px;
    --r2: 28px;
  
    --border: rgba(255,255,255,.11);
    --line: rgba(255,255,255,.10);
  
    --bg0:#070A10;
    --bg1:#0E1422;
  
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.86);
  
    --brand:#F57E57;
    --brand2:#1D6677;
  
    --shadow: 0 18px 50px rgba(0,0,0,.38);
    --shadow2: 0 12px 30px rgba(0,0,0,.22);
  
    /* ✅ Header offset anchors (géré aussi en JS, mais ici ça aide les ancres natives) */
    --header-offset: 96px;
  }
  
  /* ==========================================
     HOMOLOGUÉ / BASE SAFE (page aides uniquement)
     - pas de min-width:1600 => 100% responsive
     - container fluide + max 1600
     ========================================== */
  body.page-template-page-aides{
    overflow-x: hidden;
    background: linear-gradient(180deg, var(--bg0), var(--bg1));
  }
  
  /* ✅ Si ton header est sticky/fixed, ça évite que les ancres passent dessous */
  body.page-template-page-aides [id]{
    scroll-margin-top: var(--header-offset);
  }
  
  /* Container WP (si ton thème a déjà .container, on reste compatible) */
  body.page-template-page-aides .container{
    width: min(var(--max), 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 2vw, 24px);
    padding-right: clamp(16px, 2vw, 24px);
  }
  
  /* Base */
  body.page-template-page-aides .aidesPage{
    color: var(--text);
  }
  
  body.page-template-page-aides .aidesPage .accent{
    background-clip: text;
    color: #f6825c;
  }
  
  /* Reveal (si ton app.js le fait déjà, c'est OK) */
  body.page-template-page-aides .reveal{
    opacity:0;
    transform:translateY(10px);
    transition:.6s ease;
  }
  body.page-template-page-aides .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  
  /* ------------------------------------------
     HERO FUTURISTE
  ------------------------------------------ */
  body.page-template-page-aides .aidesHeroFx{
    position:relative;
    padding: clamp(3.2rem, 5.5vw, 6rem) 0 clamp(2.2rem, 3.2vw, 3.2rem);
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(900px 500px at 10% 20%, rgba(29,102,119,.25), transparent 60%),
      radial-gradient(900px 500px at 90% 25%, rgba(245,126,87,.18), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.35));
  }
  
  body.page-template-page-aides .aidesHeroFx-bg{
    position:absolute;
    inset:0;
    background:
      radial-gradient(1200px 600px at 50% 0%, rgba(124,92,255,.18), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
    pointer-events:none;
  }
  
  body.page-template-page-aides .aidesHeroFx-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: var(--aides-hero);
    background-size:cover;
    background-position:center;
    opacity:.22;
    filter: saturate(1.2) contrast(1.05);
    transform: scale(1.06);
  }
  
  body.page-template-page-aides .aidesHeroFx-bg .motif{
    position:absolute;
    inset:-120px;
    pointer-events:none;
  }
  
  body.page-template-page-aides .aidesHeroFx-bg .grid{
    background:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity:.12;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 70%);
  }
  
  body.page-template-page-aides .aidesHeroFx-bg .grain{
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity:.06;
    mix-blend-mode: overlay;
  }
  
  body.page-template-page-aides .aidesHeroFx-bg .glow{
    background: radial-gradient(700px 280px at 15% 25%, rgba(34,225,255,.18), transparent 60%);
    opacity:.9;
  }
  
  body.page-template-page-aides .aidesHeroFx-bg .beams{
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.07), transparent);
    opacity:.35;
    transform: skewY(-5deg);
  }
  
  body.page-template-page-aides .aidesHeroFx-inner{
    position:relative;
    display:grid;
    gap: 1.2rem;
  }
  
  body.page-template-page-aides .kicker{
    display:flex;
    align-items:center;
    gap:.6rem;
    color: var(--muted);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.86rem;
    font-weight:900;
  }
  
  body.page-template-page-aides .k-icon{
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:12px;
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
  }
  
  body.page-template-page-aides .aidesHeroFx-inner h1{
    margin:0;
    font-size: clamp(2rem, 3.2vw, 3.6rem);
    line-height:1.05;
    letter-spacing:-.02em;
  }
  
  body.page-template-page-aides .lead{
    max-width: 78ch;
    color: var(--muted);
    line-height:1.7;
    font-size: clamp(1rem, 1.1vw, 1.18rem);
  }
  
  /* actions chips */
  body.page-template-page-aides .aidesHeroFx-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:.6rem;
  }
  
  body.page-template-page-aides .chipBtn{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.78rem 1rem;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    color: var(--text);
    box-shadow: var(--shadow2);
    transition: transform .2s ease, background .2s ease;
    will-change: transform;
  }
  
  body.page-template-page-aides .chipBtn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.07);
  }
  
  body.page-template-page-aides .chipBtn.is-hot{
    border-color: transparent;
    background: linear-gradient(135deg, rgba(245,126,87,.95), rgba(124,92,255,.92), rgba(34,225,255,.88));
    color:#061017;
  }
  
  body.page-template-page-aides .chipIco{
    width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
  }
  
  body.page-template-page-aides .chipIco svg{
    width:22px;
    height:22px;
  }
  
  /* metrics row */
  body.page-template-page-aides .aidesHeroFx-metrics{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 1.2rem;
  }
  
  body.page-template-page-aides .metricCard{
    display:flex;
    gap:12px;
    align-items:center;
    padding: 14px;
    border:1px solid var(--border);
    border-radius: var(--r);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow2);
  }
  
  body.page-template-page-aides .mIco{
    width:44px;
    height:44px;
    border-radius:16px;
    background: rgba(255,255,255,.06);
    border:1px solid var(--border);
    display:grid;
    place-items:center;
    flex: 0 0 auto;
  }
  
  body.page-template-page-aides .mIco svg{
    width:22px;
    height:22px;
  }
  
  /* ------------------------------------------
     ÉTAGES
  ------------------------------------------ */
  body.page-template-page-aides .aidesStage{
    position:relative;
    padding: clamp(3rem, 4.6vw, 4.8rem) 0;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.08);
  }
  
  body.page-template-page-aides .aidesStage::before{
    content:"";
    position:absolute;
    inset:-120px;
    background:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity:.08;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 70%);
    pointer-events:none;
  }
  
  body.page-template-page-aides .stage-1{
    background:
      radial-gradient(900px 500px at 15% 20%, rgba(34,225,255,.14), transparent 60%),
      radial-gradient(900px 500px at 85% 10%, rgba(124,92,255,.12), transparent 60%),
      linear-gradient(180deg, rgba(8,12,20,.92), rgba(6,10,16,.96));
  }
  
  body.page-template-page-aides .stage-2{
    background:
      radial-gradient(900px 500px at 20% 25%, rgba(245,126,87,.16), transparent 60%),
      radial-gradient(900px 500px at 85% 20%, rgba(34,225,255,.10), transparent 60%),
      linear-gradient(180deg, rgba(8,12,20,.92), rgba(6,10,16,.96));
  }
  
  body.page-template-page-aides .stage-3{
    background:
      radial-gradient(900px 500px at 18% 25%, rgba(124,92,255,.16), transparent 60%),
      radial-gradient(900px 500px at 90% 20%, rgba(29,102,119,.16), transparent 60%),
      linear-gradient(180deg, rgba(8,12,20,.92), rgba(6,10,16,.96));
  }
  
  body.page-template-page-aides .stage-4{
    background:
      radial-gradient(900px 500px at 20% 30%, rgba(245,126,87,.16), transparent 60%),
      radial-gradient(900px 500px at 80% 20%, rgba(124,92,255,.14), transparent 60%),
      linear-gradient(180deg, rgba(8,12,20,.92), rgba(6,10,16,.96));
  }
  
  /* stage header */
  body.page-template-page-aides .stageHead{
    max-width: 1100px;
    margin-bottom: 1.8rem;
    position: relative;
  }
  
  body.page-template-page-aides .stageChip{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.45rem .8rem;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing:.08em;
    font-size:.78rem;
  }
  
  body.page-template-page-aides .stageChip .dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--brand), #9D7BFF, #22E1FF);
  }
  
  body.page-template-page-aides .stageHead h2{
    margin:.85rem 0 .6rem;
    font-size: clamp(1.55rem, 2.2vw, 2.4rem);
    letter-spacing:-.02em;
  }
  
  body.page-template-page-aides .stageLead{
    color: var(--muted);
    line-height:1.8;
    max-width: 85ch;
  }
  
  /* cards grid */
  body.page-template-page-aides .stageGrid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  
  body.page-template-page-aides .glassCard{
    padding: 18px;
    border-radius: var(--r2);
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  body.page-template-page-aides .glassCard p{
    color: rgb(255, 255, 255);
    line-height: 1.75;
    margin: .6rem 0 0;
  }
  
  body.page-template-page-aides .glassTop{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  body.page-template-page-aides .glassIco{
    width:44px;
    height:44px;
    border-radius:16px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    display:grid;
    place-items:center;
    flex: 0 0 auto;
  }
  
  body.page-template-page-aides .glassIco svg{
    width:22px;
    height:22px;
  }
  
  body.page-template-page-aides .glassHot{
    border-color: rgba(34,225,255,.35);
    background:
      radial-gradient(700px 220px at 20% 20%, rgba(34,225,255,.14), transparent 60%),
      rgba(255,255,255,.05);
  }
  
  /* 2 cols */
  body.page-template-page-aides .stageCols{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  
  body.page-template-page-aides .neoPanel{
    padding: 22px;
    border-radius: var(--r2);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  body.page-template-page-aides .neoPanelAlt{
    border-color: rgba(124,92,255,.30);
  }
  
  body.page-template-page-aides .neoTitle{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom: 12px;
  }
  
  body.page-template-page-aides .neoIco{
    width:46px;
    height:46px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    display:grid;
    place-items:center;
    flex: 0 0 auto;
  }
  
  body.page-template-page-aides .neoIco svg{
    width:22px;
    height:22px;
  }
  
  body.page-template-page-aides .neoList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:10px;
  }
  
  body.page-template-page-aides .neoList li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color: var(--text);
    line-height:1.6;
  }
  
  body.page-template-page-aides .tick{
    width:22px;
    height:22px;
    border-radius:999px;
    display:inline-grid;
    place-items:center;
    background: rgba(34,225,255,.12);
    border:1px solid rgba(34,225,255,.25);
    color:#bff6ff;
    flex: 0 0 auto;
    margin-top: 1px;
  }
  
  body.page-template-page-aides .neoP{
    color: var(--muted);
    line-height:1.8;
    margin:.4rem 0 0;
  }
  
  body.page-template-page-aides .neoNote{
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(245,126,87,.25);
    background: rgba(245,126,87,.08);
    color: rgba(255,255,255,.82);
  }
  
  /* final CTA */
  body.page-template-page-aides .finalCta{
    display:flex;
    justify-content:space-between;
    gap: 18px;
    align-items:center;
    padding: 26px;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(900px 320px at 20% 20%, rgba(34,225,255,.14), transparent 60%),
      radial-gradient(900px 320px at 80% 10%, rgba(245,126,87,.12), transparent 60%),
      rgba(255,255,255,.05);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  body.page-template-page-aides .finalChip{
    display:inline-flex;
    padding:.38rem .75rem;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing:.08em;
    font-size:.78rem;
  }
  
  body.page-template-page-aides .finalLeft h2{
    margin:.85rem 0 .6rem;
    font-size: clamp(1.55rem, 2.2vw, 2.4rem);
    letter-spacing:-.02em;
  }
  
  body.page-template-page-aides .finalLeft p{
    margin:0;
    color: var(--muted);
    line-height:1.8;
  }
  
  body.page-template-page-aides .finalRight{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* ==========================================
     RESPONSIVE 100% (mobile / tablet / desktop)
     - plus de scroll horizontal forcé
     - tout passe en 1 colonne quand nécessaire
     ========================================== */
  
  /* Tablettes */
  @media (max-width: 1100px){
    :root{
      --pad: 2.2rem;
    }
  
    body.page-template-page-aides .aidesHeroFx-metrics{
      grid-template-columns: 1fr;
    }
  
    body.page-template-page-aides .stageGrid{
      grid-template-columns: 1fr;
    }
  
    body.page-template-page-aides .stageCols{
      grid-template-columns: 1fr;
    }
  
    body.page-template-page-aides .finalCta{
      flex-direction:column;
      align-items:flex-start;
    }
  }
  
  /* Mobiles */
  @media (max-width: 640px){
    :root{
      --header-offset: 88px;
    }
  
    body.page-template-page-aides .kicker{
      font-size: .78rem;
      gap: .5rem;
    }
  
    body.page-template-page-aides .k-icon{
      width:30px;
      height:30px;
      border-radius: 12px;
    }
  
    body.page-template-page-aides .chipBtn{
      width: 100%;
      justify-content: center;
    }
  
    body.page-template-page-aides .metricCard{
      padding: 12px;
    }
  
    body.page-template-page-aides .neoPanel,
    body.page-template-page-aides .glassCard{
      padding: 16px;
    }
  
    body.page-template-page-aides .finalCta{
      padding: 18px;
      border-radius: 26px;
    }
  }
  
  /* Accessibilité: réduire animations si demandé */
  @media (prefers-reduced-motion: reduce){
    body.page-template-page-aides .reveal{
      transition: none;
      transform: none;
      opacity: 1;
    }
    body.page-template-page-aides .chipBtn{
      transition: none;
    }
  }