/* ==========================================================================
   Maxelik, page fille « Création de contenu web » (classes cw-), sur le socle contenus.css du silo
   ========================================================================== */

/* ---------- hero : photo, brouillon et brief ---------- */
.cw-hv{position:relative;height:clamp(360px,52vh,450px)}
.cw-hv img{position:absolute;top:0;right:0;width:82%;height:72%;object-fit:cover;border-radius:var(--r);box-shadow:0 40px 70px -40px rgba(10,40,80,.6)}
.cw-doc{position:absolute;left:0;bottom:0;width:min(330px,62%);padding:16px 18px 18px;border-radius:var(--r);background:#fff;box-shadow:0 30px 60px -30px rgba(10,40,80,.55)}
.cw-doc-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.72rem;font-weight:800;color:#8a9aa4}
.cw-doc-h span{display:flex;gap:4px}
.cw-doc-h i{width:8px;height:8px;border-radius:50%;background:#dfe7ef}
.cw-doc-t{font-size:1rem;font-weight:900;line-height:1.3;color:var(--slate)}
.cw-doc-p{margin-top:8px;font-size:.8rem;line-height:1.5;color:var(--ink-2)}
.cw-doc-s{margin-top:10px;font-size:.84rem;font-weight:800;color:var(--blue)}
.cw-doc-l{display:block;height:6px;margin-top:8px;border-radius:3px;background:#e8eef4}
.cw-doc-l.s{width:64%}
.cw-doc-t::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;background:var(--blue);animation:cw-cur 1s steps(1) infinite}
@keyframes cw-cur{50%{opacity:0}}
.cw-brief{position:absolute;right:3%;bottom:6%;display:grid;gap:6px;width:min(210px,40%);padding:14px 16px;border-radius:var(--r);background:#0f1a22;box-shadow:0 30px 60px -30px rgba(10,20,30,.7)}
.cw-brief p{font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#7fd8ff}
.cw-brief span{display:grid;font-size:.8rem;font-weight:700;color:#fff}
.cw-brief b{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a9aa3}

/* ---------- pour Google, pour les IA, pour vos clients ---------- */
.cw-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(40px,5vw,64px)}
.cw-3-c{display:grid;align-content:start;gap:12px;padding:clamp(24px,2.6vw,32px);border-radius:var(--r);background:var(--soft);transition:transform .4s var(--ease),background .4s}
.cw-3-c:hover{transform:translateY(-6px);background:#e8f2fd}
.cw-3-k{display:flex;align-items:center;gap:12px;font-size:1.12rem;font-weight:900;color:var(--slate)}
.cw-3-k .ico{width:38px;height:38px;padding:7px;box-sizing:content-box;border-radius:50%;background:#fff}
.cw-3-c>p:last-child{font-size:.95rem;line-height:1.65;color:var(--ink-2)}

/* ---------- les six formats ---------- */
.cw-ty-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.cw-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)}
.cw-ty-top{margin-bottom:clamp(36px,4vw,56px)}
.cw-ty-top .cn-ek{color:#7fd8ff}
.cw-ty-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.cw-ty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cw-ty li{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,32px);border-radius:var(--r);background:rgba(255,255,255,.05);overflow:clip;transition:transform .4s var(--ease),background .4s}
.cw-ty li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(150deg,rgba(0,131,255,.35),rgba(0,186,255,.08) 60%,transparent);opacity:0;transition:opacity .4s}
.cw-ty li:hover{transform:translateY(-6px)}
.cw-ty li:hover::before{opacity:1}
.cw-ty-n{font-size:2.4rem;font-weight:900;line-height:1;letter-spacing:-.04em;background:linear-gradient(90deg,#7fd8ff,#00baff);-webkit-background-clip:text;background-clip:text;color:transparent}
.cw-ty h3{font-size:1.2rem;color:#fff}
.cw-ty li>p:not(.cw-ty-r){font-size:.94rem;line-height:1.6;color:#b8c5cc}
.cw-ty-r{margin-top:auto;padding-top:12px;font-size:.86rem;font-weight:700;line-height:1.5;color:#7fd8ff;box-shadow:0 -1px 0 rgba(255,255,255,.1)}

/* ---------- anatomie d’une page ---------- */
.cw-an{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.cw-mock{position:relative;margin:0;display:grid;gap:16px}
.cw-mock .m{position:absolute;left:-14px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);font-style:normal;font-size:.76rem;font-weight:900;color:#fff;box-shadow:0 0 0 4px var(--soft)}
.cw-serp{position:relative;padding:16px 20px 16px 26px;border-radius:var(--r);background:#fff;box-shadow:0 20px 40px -32px rgba(10,40,80,.5)}
.cw-serp .m:first-of-type{top:14px}
.cw-serp .m:nth-of-type(2){top:62px}
.cw-serp-t{font-size:1rem;font-weight:700;line-height:1.35;color:#1a0dab}
.cw-serp-u{margin-top:3px;font-size:.78rem;color:#1e6b3a}
.cw-serp-d{margin-top:6px;font-size:.84rem;line-height:1.5;color:#4d5156}
.cw-page{border-radius:var(--r);background:#fff;box-shadow:0 40px 70px -46px rgba(10,40,80,.6);overflow:visible}
.cw-pg-bar{display:flex;gap:5px;padding:10px 14px;border-radius:var(--r) var(--r) 0 0;background:#e8eef4}
.cw-pg-bar i{width:8px;height:8px;border-radius:50%;background:#fff}
.cw-pg-b{display:grid;gap:12px;padding:18px 20px 22px 26px}
.cw-pg-b>*{position:relative;margin:0}
.cw-pg-b .m{top:-2px;left:-40px}
.cw-pg-h1{font-size:1.3rem;font-weight:900;color:var(--slate)}
.cw-pg-in{display:grid;gap:6px}
.cw-pg-in span,.cw-pg-fq span{display:block;height:7px;border-radius:4px;background:#e3eaf1}
.cw-pg-in span.s{width:60%}
.cw-pg-h2{font-size:.98rem;font-weight:800;color:var(--blue)}
.cw-pg-tb{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cw-pg-tb span{height:16px;border-radius:3px;background:#eef3f8}
.cw-pg-tb span:nth-child(-n+3){background:#d9e8f8}
.cw-pg-pr{display:flex;align-items:center;gap:12px}
.cw-pg-pr .ph{width:64px;height:42px;border-radius:4px;background:linear-gradient(135deg,#9fc3e6,#5d8fbf)}
.cw-pg-pr .av{font-size:.9rem;letter-spacing:2px;color:#f4b400}
.cw-pg-cta span{display:inline-block;padding:9px 16px;border-radius:var(--r);background:var(--grad);font-size:.82rem;font-weight:900;color:#fff}
.cw-pg-fq{display:grid;gap:6px}
.cw-pg-fq span{height:22px;border-radius:4px;background:#f1f5f9}
.cw-an-l{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:an}
.cw-an-l li{position:relative;display:grid;gap:2px;padding:12px 14px 12px 52px;border-radius:var(--r);font-size:.92rem;line-height:1.5;color:var(--ink-2);counter-increment:an;transition:background .3s}
.cw-an-l li:hover{background:#fff}
.cw-an-l li::before{content:counter(an);position:absolute;left:12px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;font-size:.82rem;font-weight:900;color:var(--blue);box-shadow:0 6px 14px -8px rgba(0,131,255,.6)}
.cw-an-l b{font-size:1rem;color:var(--slate)}

/* ---------- avant / après ---------- */
.cw-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.cw-ba-c{display:flex;flex-direction:column;gap:16px;padding:clamp(26px,3.2vw,40px);border-radius:var(--r)}
.cw-ba-c.is-av{background:#fbeeee}
.cw-ba-c.is-ap{background:#eaf6ef}
.cw-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 .cw-ba-k{background:#e5484d}
.is-ap .cw-ba-k{background:#1fae6a}
.cw-ba blockquote{margin:0;font-size:1.08rem;line-height:1.7;font-weight:600;color:var(--slate)}
.cw-ba ul{list-style:none;margin:auto 0 0;padding:0;display:grid}
.cw-ba ul li{position:relative;padding:9px 0 9px 28px;font-size:.92rem;font-weight:700;box-shadow:0 -1px 0 rgba(10,40,80,.08)}
.is-av ul li{color:#6b2a2a}
.is-ap ul li{color:#1d4d33}
.cw-ba ul li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border-radius:50%}
.is-av ul li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat,#e5484d}
.is-ap ul li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat,#1fae6a}
.cw-ba-n{margin-top:16px;font-size:.8rem;color:#7b8a94}

/* ---------- méthode ---------- */
.cw-me{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.cw-me li{position:relative;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);overflow:clip}
.cw-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}
.cw-me h3{font-size:1.08rem}
.cw-me p{font-size:.92rem;line-height:1.6;color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1100px){.cw-ty,.cw-me{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.cw-hv{display:none}.cw-3,.cw-an,.cw-ba{grid-template-columns:1fr}.cw-mock{padding-left:14px}}
@media (max-width:700px){.cw-ty,.cw-me{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cw-doc-t::after{animation:none}.cw-3-c,.cw-ty li{transition:none}}