/* ============================================
   Nos jeunes : liste + cartes de visite digitales
   ============================================ */
.vc svg, .qr-modal svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none;}

/* ---------- Vignettes (page Nos jeunes + accueil) ---------- */
.j-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;}
.j-card{position:relative; display:block; border-radius:28px; overflow:hidden; aspect-ratio:4/5; background:var(--navy); color:#fff; isolation:isolate; transition:transform .3s ease, box-shadow .3s ease;}
.j-card:hover{transform:translateY(-4px); box-shadow:0 24px 50px rgba(20,20,43,0.18);}
.j-card:focus-visible{outline:3px solid var(--pink); outline-offset:4px;}
.j-card[hidden]{display:none;}
.j-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 15%; z-index:-2; transition:transform .6s ease;}
.j-card:hover img{transform:scale(1.04);}
.j-card::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,10,24,0.92) 0%, rgba(10,10,24,0.35) 42%, rgba(10,10,24,0) 62%);}
.j-tag{position:absolute; left:14px; top:14px; right:14px; width:max-content; max-width:calc(100% - 28px); padding:9px 15px; border-radius:var(--r-full); background:#fff; color:var(--ink); font-weight:800; font-size:0.84rem; line-height:1.2; box-shadow:0 8px 20px rgba(0,0,0,0.18);}
.j-tag::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--grad); margin-right:8px; vertical-align:1px;}
.j-info{position:absolute; left:20px; right:20px; bottom:20px;}
.j-info strong{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.55rem; font-weight:800; line-height:1.1;}
.j-info span{display:block; color:rgba(255,255,255,0.78); font-size:0.9rem; margin-top:4px;}
.j-info .j-open{display:inline-flex; width:max-content; align-items:center; gap:6px; margin-top:12px; padding:8px 14px; border-radius:var(--r-full); background:rgba(255,255,255,0.16); backdrop-filter:blur(8px); font-weight:700; font-size:0.84rem; color:#fff;}

/* Page Nos jeunes */
.nj-hero{background:var(--navy); color:#fff; padding:64px 0 120px;}
.pill-soft{display:inline-block; font-size:0.85rem; font-weight:700; padding:7px 14px; border-radius:var(--r-full); background:rgba(255,255,255,0.1); color:#C7C8FA; margin-bottom:18px;}
.nj-hero h1{font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:16px;}
.nj-hero p{color:rgba(255,255,255,0.78); max-width:60ch; font-size:1.08rem;}
.nj-list{padding:0 0 100px;}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:-70px; position:relative;}
.chip-f{padding:11px 18px; border-radius:var(--r-full); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:#fff; font-weight:700; font-size:0.92rem; transition:background .2s ease, color .2s ease;}
.chip-f:hover{background:rgba(255,255,255,0.18);}
.chip-f.active{background:#fff; color:var(--ink); border-color:#fff;}
.count{color:var(--muted); font-weight:600; font-size:0.92rem; margin:40px 0 18px;}
.emp-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:56px; padding:36px 40px; border-radius:var(--r-lg); background:var(--tint-violet);}
.emp-cta h2{font-size:1.6rem; font-weight:800; margin-bottom:6px;}
.emp-cta p{color:var(--muted);}
.consent-note{text-align:center; color:var(--muted); font-size:0.86rem; margin-top:22px;}
@media (max-width:640px){ .emp-cta{padding:28px 24px;} }

/* Section accueil */
.home-jeunes .section-head{margin-bottom:40px;}
.home-jeunes .more-link{display:inline-flex; margin-top:30px; font-weight:700; color:var(--violet);}

/* ---------- Carte de visite digitale ---------- */
body.vc-page{background:#0B0B18; color:#fff; min-height:100vh;}
.vc{max-width:480px; margin:0 auto; position:relative; background:#0B0B18; min-height:100vh; padding-bottom:calc(110px + env(safe-area-inset-bottom));}
@media (min-width:560px){
  body.vc-page{background:radial-gradient(1200px 600px at 50% -10%, #2A2A5A 0%, #0B0B18 60%); padding:32px 0;}
  .vc{border-radius:36px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.55); min-height:auto; border:1px solid rgba(255,255,255,0.08);}
}
.vc-topbar{position:absolute; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:16px 18px;}
.vc-topbar img{height:22px; filter:brightness(0) invert(1);}
.vc-topbar a.all{font-size:0.82rem; font-weight:700; color:#fff; padding:8px 13px; border-radius:var(--r-full); background:rgba(0,0,0,0.35); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.18);}

.vc-hero{position:relative; height:min(78vh,640px); min-height:520px; overflow:hidden;}
.vc-hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%;}
.vc-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, #0B0B18 2%, rgba(11,11,24,0.82) 26%, rgba(11,11,24,0.1) 58%, rgba(11,11,24,0.25) 100%);}
.vc-id{position:absolute; left:24px; right:24px; bottom:22px; z-index:2;}
.vc-tag{display:inline-block; padding:8px 14px; border-radius:var(--r-full); background:#fff; color:var(--ink); font-weight:800; font-size:0.84rem; margin-bottom:14px;}
.vc-tag::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--grad); margin-right:8px; vertical-align:1px;}
.vc-id h1{font-size:clamp(2.3rem,10vw,3rem); font-weight:800; line-height:1.02; letter-spacing:-0.02em;}
.vc-title{font-size:1.08rem; color:rgba(255,255,255,0.86); margin-top:8px;}
.vc-org{display:flex; align-items:center; gap:10px; margin-top:16px; font-weight:700; font-size:0.95rem;}
.vc-org .badge{width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center;}
.vc-org .badge img{width:24px;}
.vc-org small{display:block; font-weight:500; color:rgba(255,255,255,0.65); font-size:0.8rem;}

.vc-quick{display:flex; gap:12px; padding:6px 24px 26px;}
.round{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#23233A; color:#fff; border:1px solid rgba(255,255,255,0.08); box-shadow:0 10px 24px rgba(0,0,0,0.35); transition:transform .2s ease, background .2s ease;}
.round:hover{transform:translateY(-2px); background:#2F2F4D;}
.round:focus-visible{outline:2px solid var(--pink); outline-offset:3px;}

.vc-body{padding:0 16px; display:flex; flex-direction:column; gap:14px;}
.box{background:#fff; color:var(--ink); border-radius:24px; padding:24px 22px;}
.box h2{font-size:1.4rem; font-weight:800; letter-spacing:-0.01em; text-align:center;}
.box .sub{color:var(--muted); text-align:center; margin-top:4px; font-size:0.98rem;}
.box hr{border:none; border-top:1px dashed rgba(20,20,43,0.12); margin:18px 0;}
.pitch{color:#3B3E52; line-height:1.65; margin-top:12px;}
.skills{list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px;}
.skills li{padding:7px 13px; border-radius:var(--r-full); background:var(--tint-violet); color:var(--violet); font-weight:700; font-size:0.84rem;}
.box-head{display:flex; align-items:center; gap:14px;}
.box-head .ico{width:48px; height:48px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center;}
.box-head h2{text-align:left; font-size:1.25rem;}
.c-row{display:block; padding:10px 0;}
.c-row b{display:block; font-size:1.05rem; font-weight:700;}
.c-row span, .c-row a{color:var(--muted); font-size:0.93rem;}
.c-row a{color:var(--violet); font-weight:600; word-break:break-all;}
.c-row a.pill-btn{color:#fff;}
.pill-btn{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:10px 16px; border-radius:var(--r-full); background:var(--navy); color:#fff; font-weight:700; font-size:0.88rem;}
.pill-btn svg{width:16px; height:16px;}

.tl2{list-style:none; display:flex; flex-direction:column; gap:16px; margin-top:6px;}
.tl2 li{position:relative; padding-left:22px;}
.tl2 li::before{content:""; position:absolute; left:0; top:7px; width:10px; height:10px; border-radius:50%; background:var(--grad);}
.tl2 li + li::after{content:""; position:absolute; left:4px; top:-16px; height:18px; width:2px; background:var(--tint-violet);}
.tl2 .when{font-size:0.8rem; font-weight:700; color:var(--violet);}
.tl2 strong{display:block; font-size:1rem;}
.tl2 .org{display:block; color:var(--muted); font-size:0.88rem; font-weight:600;}
.tl2 p{color:var(--muted); font-size:0.9rem; margin-top:3px;}

.link-row{display:flex; align-items:center; gap:14px; padding:12px 0; color:var(--ink);}
.link-row + .link-row{border-top:1px dashed rgba(20,20,43,0.12);}
.link-row .ico{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink);}
.link-row > span:not(.ico):not(.chev){flex:1;}
.link-row small{display:block;}
.link-row b{display:block; font-size:1rem;}
.link-row small{color:var(--muted); font-size:0.84rem;}
.link-row .chev{color:var(--muted); font-size:1.3rem;}
.big-btn{display:flex; justify-content:center; width:100%; padding:15px; border-radius:var(--r-full); font-weight:700; margin-top:10px;}
.big-btn.grad{background:var(--grad); color:#fff;}
.big-btn.soft{background:var(--tint-gray); color:var(--ink);}
.vc-foot{text-align:center; color:rgba(255,255,255,0.55); font-size:0.8rem; padding:22px 20px 0; line-height:1.6;}
.vc-foot a{color:#fff; font-weight:700;}

/* Barre d'actions fixe */
.vc-bar{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(448px, calc(100% - 24px)); display:flex; align-items:center; gap:10px; z-index:20;}
.vc-bar .round{background:rgba(35,35,58,0.92); backdrop-filter:blur(12px);}
.add-btn{margin-left:auto; display:flex; align-items:center; gap:12px; padding:6px 6px 6px 20px; border-radius:var(--r-full); background:rgba(35,35,58,0.94); backdrop-filter:blur(12px); color:#fff; font-weight:700; font-size:0.92rem; line-height:1.15; border:1px solid rgba(255,255,255,0.1); box-shadow:0 12px 30px rgba(0,0,0,0.4);}
.add-btn .plus{width:44px; height:44px; border-radius:50%; background:var(--grad); display:grid; place-items:center; font-size:1.6rem; font-weight:400;}

/* QR plein écran */
.qr-modal{margin:auto; border:none; padding:0; border-radius:32px; max-width:360px; width:calc(100% - 32px); box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.qr-modal::backdrop{background:rgba(8,8,20,0.78); backdrop-filter:blur(6px);}
.qr-inner{padding:30px 28px 24px; text-align:center; color:var(--ink);}
.qr-face{width:76px; height:76px; border-radius:50%; object-fit:cover; object-position:center 18%; margin:0 auto 12px; border:3px solid var(--tint-violet);}
.qr-inner h2{font-size:1.35rem; font-weight:800;}
.qr-inner p{color:var(--muted); font-size:0.92rem; margin:4px 0 18px;}
.qr-img{width:100%; max-width:260px; margin:0 auto; padding:10px; border-radius:18px; border:1px solid var(--line); background:#fff;}
.qr-close{margin-top:18px; width:100%; padding:14px; border-radius:var(--r-full); background:var(--tint-gray); font-weight:700;}
.toast{position:fixed; left:50%; bottom:100px; transform:translate(-50%,16px); opacity:0; background:#fff; color:var(--ink); padding:12px 20px; border-radius:var(--r-full); font-weight:700; transition:opacity .25s ease, transform .25s ease; pointer-events:none; z-index:30;}
.toast.on{opacity:1; transform:translate(-50%,0);}
@media (prefers-reduced-motion: reduce){ .j-card, .j-card img, .round{transition:none;} }