/* AFDL — infographies (proposition) */
.ig-band{background:linear-gradient(180deg,#eef2f8,#f8fafc);padding:56px 0}
.ig-wrap{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;gap:32px;font-family:'Inter',sans-serif}
.ig{background:#fff;border-radius:28px;padding:40px;box-shadow:0 18px 50px rgba(18,33,58,.10);border:1px solid #e5e9f0}
.ig-head{text-align:center;margin-bottom:32px}
.ig-head span{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a8946c;margin-bottom:8px}
.ig-head h2{margin:0;font-size:clamp(24px,3vw,34px);font-weight:800;color:#12213a;line-height:1.15}
.ig svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ig-foot{text-align:center;margin:24px auto 0;max-width:720px;font-size:14px;color:#5b6b80;line-height:1.6}

/* Chiffres clés */
.ig-stats{background:linear-gradient(135deg,#0f1c33,#1e3a5f);border:0;color:#fff}
.ig-stats .ig-head h2{color:#fff}.ig-stats .ig-head span{color:#c8b99a}
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.st>b{font-size:40px;font-weight:900;line-height:1}.st b sup{font-size:22px;color:#c8b99a}.st b small{font-size:20px;color:#c8b99a}
.st>span{font-size:14px;color:#cbd5e1}
.st-ic{width:64px;height:64px;border-radius:20px;background:rgba(96,165,250,.18);color:#93c5fd;display:grid;place-items:center}
.st-ic svg{width:32px;height:32px}.st-ic.gold{background:rgba(200,185,154,.2);color:#c8b99a}
.ring{position:relative;width:124px;height:124px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .rg-bg{stroke:rgba(255,255,255,.12);stroke-width:10}
.ring .rg-fg{stroke:#c8b99a;stroke-width:10}
.ring b{font-size:21px;font-weight:900;letter-spacing:-.02em}.ring b small{font-size:13px;color:#c8b99a}
.st:nth-child(2)>b{display:none}
.stars{display:flex;gap:4px;color:#fbbf24}.stars svg{width:24px;height:24px;fill:#fbbf24;stroke:#fbbf24}

/* Échelle des niveaux */
.lv-wrap{position:relative}
.lv-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:end}
.lv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.lv-col{height:220px;width:100%;display:flex;align-items:flex-end}
.lv-bar{width:100%;border-radius:16px 16px 6px 6px;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;background:#e2e8f0;color:#64748b}
.lv-bar b{font-size:22px;font-weight:900}
.lv-A1 .lv-bar{background:linear-gradient(180deg,#93c5fd,#60a5fa);color:#fff}
.lv-A2 .lv-bar{background:linear-gradient(180deg,#60a5fa,#2563eb);color:#fff}
.lv-B1 .lv-bar{background:linear-gradient(180deg,#3b82f6,#1e40af);color:#fff}
.lv-B2 .lv-bar{background:linear-gradient(180deg,#d4c4a0,#a8946c);color:#fff}
.lv small{font-size:13px;font-weight:700;color:#12213a}
.lv em{font-style:normal;font-size:12.5px;font-weight:700;line-height:1.35;padding:8px 10px;border-radius:12px;background:#fef3c7;color:#92400e;min-height:52px;display:flex;align-items:center;justify-content:center;position:relative}
.lv em:before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#fef3c7}
.lv em.lv-none{background:none}.lv em.lv-none:before{display:none}
.lv-C1,.lv-C2{opacity:.55}
.lv-zone{margin:18px 0 0;width:calc((100% - 14px*5)/6*4 + 14px*3);border-top:4px solid #12213a;position:relative;text-align:center}
.lv-zone:before,.lv-zone:after{content:"";position:absolute;top:-12px;width:4px;height:12px;background:#12213a}
.lv-zone:before{left:0}.lv-zone:after{right:0}
.lv-zone span{display:inline-block;margin-top:10px;background:#12213a;color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px}

/* Examen civique */
.cv-grid{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center}
.donut{position:relative;width:280px;height:280px;margin:0 auto;display:grid;place-items:center;text-align:center}
.donut svg{position:absolute;inset:0;transform:rotate(-90deg)}
.dn-bg{stroke:#fee2e2;stroke-width:14}.dn-fg{stroke:#15803d;stroke-width:14}
.donut b{display:block;font-size:56px;font-weight:900;color:#12213a;line-height:1}
.donut span{font-size:14px;color:#5b6b80;font-weight:600}
.cv-facts{display:grid;gap:14px}
.cv{display:flex;gap:16px;align-items:center;background:#f5f7fb;border-radius:18px;padding:16px 18px}
.cv b{display:block;font-size:18px;color:#12213a}.cv span{font-size:14px;color:#5b6b80}
.cv-ic{width:48px;height:48px;border-radius:14px;background:#1e3a5f;color:#fff;display:grid;place-items:center;flex-shrink:0}
.cv-ic svg{width:24px;height:24px}.cv-ic.ok{background:#15803d}
.qgrid{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;margin-top:6px}
.qgrid i{aspect-ratio:1;border-radius:5px;background:#fecaca}
.qgrid i.q-ok{background:#22c55e}

/* Île-de-France */
.bars{display:grid;gap:12px;max-width:900px;margin:0 auto}
.brow{display:grid;grid-template-columns:220px 1fr 90px;align-items:center;gap:16px;text-decoration:none;color:#12213a;padding:6px 10px;border-radius:14px;transition:background .2s;position:relative}
.brow:hover{background:#f5f7fb}
.bl{font-weight:700;font-size:15px}
.bt{height:30px;background:#eef2f8;border-radius:999px;overflow:hidden}
.bf{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#2563eb);min-width:30px}
.brow.top .bf{background:linear-gradient(90deg,#d4c4a0,#a8946c)}
.brow b{font-size:15px;color:#2563eb}.brow.top b{color:#a8946c}
.brow em{grid-column:2/4;font-style:normal;font-size:12px;font-weight:700;color:#92400e;margin-top:-4px}

/* Formules */
.fm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fm{background:#f5f7fb;border-radius:22px;padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.fm b{font-size:18px;color:#12213a}.fm>span{font-size:14px;color:#5b6b80}
.ppl{height:86px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:4px;max-width:150px;color:#2563eb}
.ppl svg{width:34px;height:34px;stroke-width:2.4}
.ppl.one svg{width:72px;height:72px;color:#7c3aed}
.duo{height:86px;display:flex;gap:10px;align-items:center}
.duo span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#0f766e;background:#ccfbf1;border-radius:16px;padding:12px 14px}
.duo span:last-child{color:#be123c;background:#ffe4e6}
.duo svg{width:30px;height:30px}
.day{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:24px;border-radius:20px;overflow:hidden}
.dseg{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;color:#fff;font-size:16px}
.dseg svg{width:26px;height:26px}
.dseg.m{background:linear-gradient(90deg,#fcd34d,#f59e0b);color:#78350f}
.dseg.a{background:linear-gradient(90deg,#f59e0b,#ea580c)}
.dseg.s{background:linear-gradient(90deg,#1e3a5f,#0f1c33)}

/* Parcours */
.chev{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cs{position:relative;padding:26px 30px 26px 44px;color:#fff;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%,26px 50%);display:flex;flex-direction:column;gap:4px;min-height:130px;justify-content:center}
.cs:first-child{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%);padding-left:26px;border-radius:18px 0 0 18px}
.cs:nth-child(1){background:#1e3a5f}.cs:nth-child(2){background:#2563eb}.cs:nth-child(3){background:#a8946c}.cs:nth-child(4){background:linear-gradient(90deg,#c0392b,#e74c3c)}
.cs span{font-size:30px;font-weight:900;opacity:.45;line-height:1}
.cs b{font-size:17px}.cs small{font-size:13px;opacity:.85;line-height:1.4}

@media (max-width:900px){
 .st-grid{grid-template-columns:1fr 1fr}
 .cv-grid{grid-template-columns:1fr}
 .fm-grid{grid-template-columns:1fr}
 .chev{grid-template-columns:1fr 1fr;gap:10px}.cs,.cs:first-child{clip-path:none;border-radius:18px;padding:22px}
 .lv-scale{gap:8px}.lv-col{height:160px}.lv em{font-size:11px;padding:6px}
 .lv-zone{width:calc((100% - 8px*5)/6*4 + 8px*3)}
}
@media (max-width:600px){
 .ig{padding:26px 18px;border-radius:22px}
 .ig-wrap{padding:0 16px}
 .lv small{font-size:10px}.lv-bar b{font-size:16px}
 .brow{grid-template-columns:1fr 70px;gap:8px}.bt{grid-column:1/3;grid-row:2}.brow em{grid-column:1/3}
 .donut{width:220px;height:220px}.donut b{font-size:44px}
 .qgrid{grid-template-columns:repeat(10,1fr)}
 .chev{grid-template-columns:1fr}
}

/* Mobile : les infographies restent dans l'écran */
.ig{box-sizing:border-box;max-width:100%;min-width:0}
.ig *{min-width:0}
.st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.lv-scale{grid-template-columns:repeat(6,minmax(0,1fr))}
.fm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ig h2,.ig p,.ig em,.ig small,.st,.fm{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:900px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fm-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
 .ig h2{font-size:22px}
 .lv-scale{gap:4px}.lv em{font-size:9.5px;padding:4px 3px;line-height:1.25}.lv small{font-size:9px}
 .lv-zone{width:calc((100% - 4px*5)/6*4 + 4px*3)}.lv-zone span{font-size:11px;padding:6px 10px}
 .st{padding:18px 10px}
}/* Mobile : graphique des niveaux sur 4 colonnes, sans mots coupés */
.ig em,.ig small{overflow-wrap:normal;hyphens:manual}
@media (max-width:600px){
 .lv-C1,.lv-C2{display:none}
 .lv-scale{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .lv-zone{width:100%}
 .lv small{font-size:11px}.lv em{font-size:10.5px;padding:6px 4px}
 .st>b{font-size:30px}
 .st>b:not(:has(sup)):not(:has(small)){font-size:24px}
}