/* ==========================================================================
   Maxelik, page fille « Réalisation d’infographies » (classes ig-), sur le socle contenus.css du silo
   ========================================================================== */

/* ---------- hero : une infographie dessinée ---------- */
.ig-hv{position:relative;margin:0;padding:0 0 30px 30px}
.ig-po{position:relative;padding:clamp(20px,2.4vw,28px);border-radius:var(--r);background:#fff;box-shadow:0 50px 90px -50px rgba(10,40,80,.6);transform:rotate(-1deg)}
.ig-po-k{font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#8a9aa4}
.ig-po-t{margin-top:4px;font-size:1.25rem;font-weight:900;line-height:1.2;color:var(--slate)}
.ig-po-st{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.ig-po-st::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:3px;background:linear-gradient(90deg,#0083ff,#00baff)}
.ig-po-st li{position:relative;display:grid;justify-items:center;gap:6px;font-size:.7rem;font-weight:800;color:var(--slate);text-align:center}
.ig-po-st i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);font-style:normal;font-size:.8rem;font-weight:900;color:#fff;box-shadow:0 0 0 4px #fff;transition:transform .3s}
.ig-po-st li:hover i{transform:scale(1.15)}
.ig-po-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:18px}
.ig-po-n{display:grid;align-content:center;gap:4px;padding:14px;border-radius:6px;background:#0f1a22;color:#c8d3d9;font-size:.7rem;font-weight:700;line-height:1.35}
.ig-po-n b{font-size:1.7rem;font-weight:900;line-height:1;background:linear-gradient(90deg,#7fd8ff,#00baff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-po-b{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;padding:12px 14px;border-radius:6px;background:var(--soft);font-size:.7rem;font-weight:800;color:var(--slate)}
.ig-po-b i{height:10px;width:var(--w);border-radius:5px;background:var(--grad)}
.ig-po-b small{grid-column:span 2;font-size:.64rem;font-weight:700;color:#8a9aa4}
.ig-po-f{margin-top:14px;font-size:.68rem;font-weight:800;color:#8a9aa4}
.ig-sh{position:absolute;right:-12px;bottom:-6px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:#0f1a22;box-shadow:0 30px 60px -30px rgba(10,20,30,.7)}
.ig-sh-a{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#0a66c2;font-size:.86rem;font-weight:900;color:#fff}
.ig-sh p{display:grid;font-size:.72rem;color:#b8c5cc}
.ig-sh b{font-size:.84rem;color:#fff}

/* ---------- usages ---------- */
.ig-us{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.ig-us li{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,30px);border-radius:var(--r);background:var(--soft);transition:transform .4s var(--ease),background .4s}
.ig-us li:hover{transform:translateY(-6px);background:#e6f1fc}
.ig-us-i{display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;border-radius:50%;background:#fff}
.ig-us-i .ico{width:30px;height:30px}
.ig-us h3{font-size:1.1rem}
.ig-us p{font-size:.93rem;line-height:1.6;color:var(--ink-2)}

/* ---------- types : chaque carte porte sa mini-visualisation ---------- */
.ig-ty-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.ig-ty-s::after{content:"";position:absolute;z-index:-1;left:-110px;bottom:-120px;width:420px;aspect-ratio:1;background:url("img/maxelik-symbole.svg") no-repeat center/contain;opacity:.05;filter:brightness(3)}
.ig-ty-top{margin-bottom:clamp(36px,4vw,56px)}
.ig-ty-top .cn-ek{color:#7fd8ff}
.ig-ty-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.ig-ty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.ig-ty li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:var(--r);background:rgba(255,255,255,.05);transition:transform .4s var(--ease),background .4s}
.ig-ty li:hover{transform:translateY(-6px);background:rgba(0,131,255,.14)}
.ig-ty h3{font-size:1.2rem;color:#fff}
.ig-ty p{font-size:.94rem;line-height:1.6;color:#b8c5cc}
.ig-v{position:relative;height:96px;margin-bottom:8px;border-radius:8px;background:rgba(255,255,255,.06);overflow:clip}
.ig-v-num{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center}
.ig-v-num b{font-size:1.5rem;font-weight:900;background:linear-gradient(90deg,#7fd8ff,#00baff);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .4s}
.ig-ty li:hover .ig-v-num b{transform:translateY(-4px)}
.ig-v-pro{display:flex;align-items:center;justify-content:space-around;padding:0 14px}
.ig-v-pro::before{content:"";position:absolute;left:14%;right:14%;top:50%;height:3px;background:linear-gradient(90deg,#0083ff,#00baff)}
.ig-v-pro i{position:relative;width:26px;height:26px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 5px #1a2630}
.ig-v-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.ig-v-cmp span{border-radius:6px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 6px,transparent 6px 14px)}
.ig-v-cmp span:first-child{background:repeating-linear-gradient(180deg,rgba(0,186,255,.55) 0 6px,transparent 6px 14px)}
.ig-v-tl{display:flex;align-items:flex-end;justify-content:space-around;padding:0 14px 22px}
.ig-v-tl::before{content:"";position:absolute;left:10px;right:10px;bottom:28px;height:2px;background:rgba(255,255,255,.3)}
.ig-v-tl i{position:relative;width:12px;height:12px;border-radius:50%;background:#7fd8ff}
.ig-v-tl i:nth-child(even){margin-bottom:28px;background:#00baff}
.ig-v-map{background:radial-gradient(60% 70% at 50% 50%,rgba(0,131,255,.25),transparent 70%),rgba(255,255,255,.06)}
.ig-v-map::before{content:"";position:absolute;inset:14px 22%;border-radius:40% 55% 45% 60%;background:rgba(255,255,255,.1)}
.ig-v-map i{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50%;background:#00baff;box-shadow:0 0 0 5px rgba(0,186,255,.25);animation:ig-ping 2.4s ease-in-out infinite}
.ig-v-map i:nth-child(2){animation-delay:.4s}.ig-v-map i:nth-child(3){animation-delay:.8s}.ig-v-map i:nth-child(4){animation-delay:1.2s}.ig-v-map i:nth-child(5){animation-delay:1.6s}
@keyframes ig-ping{50%{box-shadow:0 0 0 10px rgba(0,186,255,0)}}
.ig-v-bar{display:flex;align-items:flex-end;justify-content:space-around;padding:14px 18px 10px}
.ig-v-bar i{width:14%;height:var(--h);border-radius:4px 4px 0 0;background:var(--grad);transform-origin:bottom;transition:transform .5s var(--ease)}
.ig-ty li:hover .ig-v-bar i{transform:scaleY(1.08)}

/* ---------- référencement ---------- */
.ig-seo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ig-seo-t{display:grid;gap:16px;justify-items:start}
.ig-seo-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.7;color:var(--ink-2)}
.ig-seo-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%;counter-reset:gs}
.ig-seo-l li{position:relative;display:grid;gap:2px;padding:12px 14px 12px 52px;border-radius:var(--r);background:#fff;font-size:.92rem;line-height:1.5;color:var(--ink-2);counter-increment:gs}
.ig-seo-l li::before{content:counter(gs);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);font-size:.82rem;font-weight:900;color:#fff}
.ig-seo-l b{font-size:1rem;color:var(--slate)}
.ig-seo-a{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--blue);text-decoration:none}
.ig-seo-a svg{width:16px;height:16px}
.ig-code{margin:0;border-radius:var(--r);background:#0f1a22;box-shadow:0 50px 90px -50px rgba(10,20,30,.8);overflow:clip}
.ig-code-h{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#16232d}
.ig-code-h i{width:9px;height:9px;border-radius:50%;background:#2c3c48}
.ig-code-h span{margin-left:8px;font-size:.76rem;font-weight:800;color:#8a9aa3}
.ig-code pre{margin:0;padding:18px 20px;font:600 .8rem/1.75 ui-monospace,Consolas,monospace;color:#c8d3d9;white-space:pre-wrap;overflow-wrap:anywhere}
.ig-code .t{color:#7fd8ff}.ig-code .a{color:#b39dff}.ig-code .v{color:#8be0a4}.ig-code .c{color:#8a9aa3}
.ig-code figcaption{padding:12px 20px 16px;font-size:.76rem;color:#8a9aa3;box-shadow:0 -1px 0 rgba(255,255,255,.08)}

/* ---------- avant / après ---------- */
.ig-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.ig-ba-c{display:flex;flex-direction:column;gap:16px;padding:clamp(26px,3.2vw,40px);border-radius:var(--r)}
.ig-ba-c.is-av{background:#fbeeee}
.ig-ba-c.is-ap{background:#eaf6ef}
.ig-ba-k{align-self:flex-start;padding:5px 14px;border-radius:999px;font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.is-av .ig-ba-k{background:#e5484d}
.is-ap .ig-ba-k{background:#1fae6a}
.ig-ba-p{font-size:1.02rem;line-height:1.75;color:#6b2a2a}
.ig-ba-i{padding:20px;border-radius:var(--r);background:#fff;box-shadow:0 20px 40px -30px rgba(10,40,80,.45)}
.ig-ba-i ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;position:relative}
.ig-ba-i ol::before{content:"";position:absolute;left:10%;right:10%;top:17px;height:3px;background:linear-gradient(90deg,#0083ff,#00baff)}
.ig-ba-i li{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}
.ig-ba-i i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad);font-style:normal;font-weight:900;color:#fff;box-shadow:0 0 0 4px #fff}
.ig-ba-i b{font-size:.8rem;color:var(--slate)}
.ig-ba-i span{font-size:.7rem;font-weight:700;line-height:1.3;color:#7b8a94}
.ig-ba-d{margin-top:16px;padding:10px 14px;border-radius:6px;background:#0f1a22;font-size:.86rem;font-weight:700;text-align:center;color:#c8d3d9}
.ig-ba-d b{color:#7fd8ff}
.ig-ba-n{margin-top:16px;font-size:.8rem;color:#7b8a94}

/* ---------- méthode ---------- */
.ig-me{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.ig-me li{display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:var(--r);background:#fff;box-shadow:0 26px 54px -46px rgba(10,40,80,.5)}
.ig-me span{font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-me h3{font-size:1.08rem}
.ig-me p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ig-me em{align-self:flex-start;margin-top:auto;padding:6px 14px;border-radius:999px;background:var(--soft);font-style:normal;font-size:.78rem;font-weight:800;color:var(--blue)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.ig-us{grid-template-columns:repeat(2,minmax(0,1fr))}.ig-ty,.ig-me{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.ig-hv{display:none}.ig-seo,.ig-ba{grid-template-columns:1fr}}
@media (max-width:700px){.ig-us,.ig-ty,.ig-me{grid-template-columns:1fr}.ig-ba-i ol{grid-template-columns:1fr;gap:10px}.ig-ba-i ol::before{display:none}.ig-ba-i li{grid-template-columns:36px 1fr;justify-items:start;text-align:left;column-gap:12px}.ig-ba-i i{grid-row:span 2}}
@media (prefers-reduced-motion:reduce){.ig-v-map i{animation:none}.ig-us li,.ig-ty li{transition:none}}