/* ==========================================================================
   Maxelik, page fille Pinterest Ads (classes pn-) : s'appuie sur contenus.css
   (cn-ek, cn-top, cn-def, cn-px, cn-lx).
   Hero clair : une recherche Pinterest affichée en mosaïque, une épingle sponsorisée.
   ========================================================================== */

/* ---------- hero ---------- */
.pn-hero{position:relative;overflow:clip;isolation:isolate;padding-block:clamp(22px,3.6vh,48px) clamp(26px,4vh,60px);background:radial-gradient(55% 80% at 90% 10%,rgba(0,186,255,.16),transparent 70%),#f4f8fd}
.pn-hero-g{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.pn-k{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.pn-k .ico{width:24px;height:24px}
.pn-hero h1{margin-top:12px}
.pn-lead{margin-top:16px;font-size:1.08rem;line-height:1.65;color:var(--ink-2)}
.pn-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pn-acts .btn-line{background:#fff;box-shadow:none}
.pn-acts .btn-line:hover{box-shadow:none;background:var(--soft-b)}
.pn-proofs{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pn-proofs li{padding:8px 14px;border-radius:999px;background:#fff;font-size:.9rem;color:var(--ink-2);box-shadow:0 10px 24px -18px rgba(10,40,80,.45)}
.pn-proofs b{color:var(--slate)}

/* mosaïque */
.pn-vis{position:relative;height:clamp(380px,60vh,460px);display:grid;grid-template-rows:auto 1fr;gap:12px;padding:14px;border-radius:var(--r);background:#fff;box-shadow:0 40px 80px -44px rgba(10,40,80,.6);overflow:clip}
.pn-vis::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,#fff)}
.pn-q{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#eef3f7;font-size:.92rem;font-weight:800;color:var(--slate)}
.pn-q-i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--slate);position:relative}
.pn-q-i::after{content:"";position:absolute;right:-4px;bottom:-3px;width:7px;height:2.5px;background:var(--slate);transform:rotate(45deg)}
.pn-ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;overflow:clip}
.pn-col{display:grid;gap:10px}
.pn-col.c2{margin-top:-30px}
.pn-col.c3{margin-top:24px}
.pn-col i{display:block;border-radius:10px}
.p1{height:150px;background:linear-gradient(160deg,#f1e4d1,#d6b892)}
.p2{height:110px;background:linear-gradient(160deg,#dbe6dd,#9fb9a3)}
.p3{height:160px;background:linear-gradient(160deg,#ece7e1,#c2b6a6)}
.p4{height:48px;background:linear-gradient(160deg,#e8eef5,#b9c9dc)}
.p6{height:130px;background:linear-gradient(160deg,#f3eadf,#c9a67e)}
.p7{height:120px;background:linear-gradient(160deg,#e3ece6,#a8c0ae)}
.p8{height:170px;background:linear-gradient(160deg,#efe6dc,#cdb59a)}
.p9{height:100px;background:linear-gradient(160deg,#e6ebf0,#aebccb)}
.pn-ad{display:grid;gap:6px}
.p5{height:176px;background:radial-gradient(70% 60% at 40% 30%,#fff3df,transparent 70%),linear-gradient(160deg,#e8d2b4,#b98d5c 70%,#8a6136)}
.pn-ad p{display:grid;gap:2px;padding:0 4px}
.pn-ad b{font-size:.8rem;line-height:1.25;color:var(--slate)}
.pn-ad span{font-size:.68rem;color:#6b777d}
@media (prefers-reduced-motion:no-preference){
  .pn-col{animation:pn-rise 1s var(--ease) both}
  .pn-col.c2{animation-delay:.15s}.pn-col.c3{animation-delay:.3s}
}
@keyframes pn-rise{from{transform:translateY(24px)}to{transform:none}}

/* ---------- définition ---------- */
.pn-def{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.pn-def-t{display:grid;gap:16px}
.pn-def-t>p:not(.cn-ek){font-size:1.04rem;line-height:1.75;color:var(--ink-2)}
.pn-fit{display:grid;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--r);background:var(--soft)}
.pn-fit-h{font-size:.76rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pn-fit ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pn-fit li{padding:8px 14px;border-radius:999px;background:#fff;font-size:.9rem;font-weight:800;color:var(--slate);box-shadow:0 10px 20px -16px rgba(19,40,60,.5)}
.pn-fit-n{font-size:.95rem;line-height:1.65;color:var(--ink-2)}
.pn-fit-n a{font-weight:800}

/* ---------- saisons ---------- */
.pn-sa-s{position:relative;overflow:clip;isolation:isolate;background:radial-gradient(60% 80% at 100% 0%,rgba(0,131,255,.24),transparent 70%),#0f1a22}
.pn-sa-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)}
.pn-sa-s .cn-ek{color:#7fd8ff}
.pn-sa-top{margin-bottom:clamp(28px,3.6vw,48px)}
.pn-sa-lead{font-size:1.06rem;line-height:1.7;color:#c8d3d9}
.pn-sa{margin:0;display:grid;gap:10px;padding:clamp(22px,2.8vw,34px);border-radius:var(--r);background:rgba(255,255,255,.04)}
.pn-sa figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:8px;font-size:.8rem;font-weight:800;color:#9fb0b8}
.pn-sa figcaption span:first-child{margin-right:auto;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#7fd8ff}
.pn-sa figcaption span:nth-child(2)::before,.pn-sa figcaption span:nth-child(3)::before{content:"";display:inline-block;width:18px;height:8px;margin-right:8px;border-radius:999px;vertical-align:.05em}
.pn-sa figcaption span:nth-child(2)::before{background:rgba(127,216,255,.35)}
.pn-sa figcaption span:nth-child(3)::before{background:var(--grad)}
.pn-sa-m,.pn-sa-r{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center}
.pn-sa-m{grid-template-columns:200px repeat(12,minmax(0,1fr));gap:0 16px;font-size:.78rem;font-weight:800;text-align:center;color:#9fb0b8}
.pn-sa-m span:first-child{grid-column:2}
.pn-sa-r b{font-size:.95rem;color:#fff}
.pn-sa-t{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:12px 12px;gap:6px 0;padding:10px 0;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 calc(100%/12 - 1px),rgba(255,255,255,.1) calc(100%/12 - 1px) calc(100%/12))}
.pn-sa-t i{grid-column:var(--s)/calc(var(--e) + 1);border-radius:999px}
.pn-sa-t .up{grid-row:1;background:rgba(127,216,255,.35)}
.pn-sa-t .cp{grid-row:2;background:var(--grad)}

/* ---------- formats ---------- */
.pn-fo{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.pn-fo li{display:grid;grid-template-rows:160px auto;align-content:start;gap:10px;padding:clamp(18px,2vw,24px);border-radius:var(--r);background:var(--soft)}
.pn-fo h3{font-size:1.12rem;margin-top:6px}
.pn-fo-d{font-size:.8rem;font-weight:900;color:var(--blue)}
.pn-fo li p:not(.pn-fo-d){font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.pn-fo-v{position:relative;display:flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--r);background:#fff}
.pn-fo-v i{display:block;border-radius:8px;background:linear-gradient(160deg,#f1e4d1,#c9a67e)}
.v-std i{width:84px;height:126px}
.v-vid i{width:84px;height:126px;background:linear-gradient(160deg,#9cc7ff,#0a3f86)}
.v-vid span{position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff}
.v-car i{width:66px;height:100px}
.v-car i+i{width:40px;height:100px;opacity:.6}
.v-col{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:76px 26px;gap:5px;justify-content:center;align-content:center;place-items:stretch}
.v-col .big{grid-column:1/-1}
.v-shop{flex-direction:column}
.v-shop i{width:84px;height:100px;background:linear-gradient(160deg,#dbe6dd,#8fae96)}
.v-shop b{padding:3px 10px;border-radius:999px;background:var(--slate);font-size:.78rem;color:#fff}

/* ---------- ciblage et mesure ---------- */
.pn-ci{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.pn-ci-c{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:clamp(22px,2.4vw,28px);border-radius:var(--r);background:#fff;box-shadow:0 20px 44px -36px rgba(19,40,60,.5)}
.pn-ci-n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--soft-b);font-weight:900;color:var(--blue)}
.pn-ci-c h3{font-size:1.15rem}
.pn-ci-c>p:not(.pn-ci-n){font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.pn-ci-c ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pn-ci-c li{padding:5px 12px;border-radius:999px;background:var(--soft-b);font-size:.8rem;font-weight:800;color:var(--slate)}
.pn-ci-c.is-me{background:var(--slate)}
.pn-ci-c.is-me h3{color:#fff}
.pn-ci-c.is-me>p:not(.pn-ci-n){color:#c8d3d9}
.pn-ci-c.is-me .pn-ci-n{background:var(--grad);color:#fff}
.pn-ci-c.is-me li{background:rgba(255,255,255,.1);color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){.pn-fo{grid-template-columns:repeat(3,minmax(0,1fr))}.pn-ci{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.pn-hero-g,.pn-def{grid-template-columns:1fr}}
@media (max-width:700px){
  .pn-fo,.pn-ci{grid-template-columns:1fr}
  .pn-vis{height:380px}
  .pn-sa-m{display:none}
  .pn-sa-r{grid-template-columns:1fr;gap:6px}
}

/* 04/11/2026 : section de zone */
.pn-zn-s .cn-zn-c li:has(a){padding:0}
.pn-zn-s .cn-zn-c li a{display:block;padding:7px 14px;border-radius:999px;color:#fff;text-decoration:none}
.pn-zn-s .cn-zn-c li a:hover{background:rgba(0,131,255,.45)}
.pn-zn-s .cn-zn-t a{font-weight:700;color:#7fd8ff}