/* MC Studio — composants d'identité des pages (collage social, étiquettes, coupons, expo, chat, magazine) */

/* ---------- Composition « réseaux sociaux » ---------- */
.social{position:relative;width:min(560px,100%);aspect-ratio:1/1.08;margin-inline:auto}
.social img{width:100%;height:100%;object-fit:cover;display:block}
.s-card{position:absolute;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -25px rgba(0,0,0,.55)}
.s-main{right:4%;top:2%;width:56%;height:78%}
.s-main::before{content:"";position:absolute;left:8%;right:8%;top:14px;height:4px;border-radius:4px;z-index:2;background:linear-gradient(90deg,#fff var(--p),rgba(255,255,255,.4) var(--p));animation:story 6s linear infinite}
@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes story{from{--p:0%}to{--p:100%}}
.s-ctrl{position:absolute;left:8%;right:8%;bottom:16px;display:flex;gap:8px;z-index:2}
.s-ctrl i{height:30px;border-radius:999px;border:2px solid #fff}
.s-ctrl i:first-child{flex:1}
.s-ctrl i:not(:first-child){width:30px}
.s-side{left:6%;top:18%;width:38%;height:40%}
.s-post{left:12%;bottom:4%;width:40%;padding:12px 12px 16px;border-radius:18px}
.s-post .s-img{height:150px;border-radius:12px;overflow:hidden}
.s-line{height:9px;border-radius:9px;background:#e7e7ea;margin-top:10px}
.s-line + .s-line{width:62%}
.s-badge{position:absolute;top:12px;left:12px;z-index:3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#fff;font-size:18px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.s-post .s-badge{position:relative;top:auto;left:auto;margin-bottom:10px;background:var(--lime)}
.s-pill{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#6c5cff;color:#fff;font-family:var(--f-mono);font-size:13px;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);white-space:nowrap}
.s-pill--lime{background:var(--lime);color:var(--ink)}
.s-avatar{position:absolute;z-index:4;left:42%;bottom:-2%;width:27%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:5px solid #fff;outline:3px solid var(--lime);box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
.s-heart{position:absolute;z-index:4;right:-2%;top:52%;width:70px;height:70px;border-radius:50%;background:#ff3b5c;display:grid;place-items:center;font-size:30px;box-shadow:0 14px 30px -10px rgba(255,59,92,.7);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(.95)}45%{transform:scale(1.08)}}
.s-emoji{position:absolute;z-index:5;font-size:clamp(34px,4vw,56px);line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));animation:bob 4s ease-in-out infinite}
.s-emoji.e2{animation-duration:5s;animation-delay:-1.5s}
.s-emoji.e3{animation-duration:6s;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-12px) rotate(8deg)}}
.social-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
@media (max-width:900px){.social-wrap{grid-template-columns:1fr}.s-heart{width:54px;height:54px;font-size:24px}.s-post .s-img{height:100px}}

/* ---------- Étiquettes prix suspendues (Produits) ---------- */
.shelf{display:flex;justify-content:center;gap:clamp(14px,3vw,40px);margin-top:50px;flex-wrap:wrap}
.tagp{position:relative;display:block;width:200px;padding:22px 18px 18px 34px;background:var(--paper);color:var(--ink);transform-origin:0 50%;animation:swing 4s ease-in-out infinite;text-align:left;
  clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
.tagp::before{content:"";position:absolute;left:12px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:translateY(-50%)}
.tagp:nth-child(2){animation-delay:-1.3s;background:var(--lime)}
.tagp:nth-child(3){animation-delay:-2.6s}
.tagp b{display:block;font-family:var(--f-display);font-weight:800;font-size:28px;font-variation-settings:"wdth" 75;line-height:1;margin:6px 0}
.tagp .bar{height:26px;margin-top:10px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px)}
@keyframes swing{50%{transform:rotate(-3deg)}}

/* ---------- Coupons (Offres) ---------- */
.coupons{position:relative;height:min(560px,72vh);width:100%}
.coupon{position:absolute;display:grid;grid-template-columns:42% 1fr;width:min(440px,92%);height:176px;background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 26px 50px -20px rgba(0,0,0,.6)}
.coupon::before,.coupon::after{content:"";position:absolute;left:calc(42% - 12px);width:24px;height:24px;border-radius:50%;background:var(--ink);z-index:2}
.coupon::before{top:-12px}.coupon::after{bottom:-12px}
.coupon img{width:100%;height:100%;object-fit:cover}
.coupon div{padding:16px 18px;border-left:2px dashed rgba(7,8,10,.3);display:flex;flex-direction:column;justify-content:space-between}
.coupon b{font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1;text-transform:uppercase;font-variation-settings:"wdth" 80}
.coupon strong{font-family:var(--f-display);font-size:30px;font-weight:800;font-variation-settings:"wdth" 75;line-height:1}
.coupon:nth-child(1){top:0;right:0;transform:rotate(4deg)}
.coupon:nth-child(2){top:34%;left:0;transform:rotate(-5deg);background:var(--lime)}
.coupon:nth-child(3){bottom:0;right:6%;transform:rotate(2deg)}
.stamp{position:absolute;z-index:3;right:-2%;top:36%;width:116px;height:116px;border-radius:50%;border:3px dashed var(--lime);color:var(--lime);display:grid;place-items:center;text-align:center;font-family:var(--f-mono);font-size:12px;text-transform:uppercase;animation:spin 30s linear infinite;background:rgba(7,8,10,.6)}
@media (max-width:900px){.coupons{height:600px}}

/* ---------- Mur d'exposition (Projets) ---------- */
.expo{position:relative;min-height:100svh;display:grid;place-items:center;padding:140px var(--gutter) 60px;overflow:hidden;isolation:isolate}
.expo__wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:22px;padding:110px 22px 40px;z-index:-1}
.frame{background:#f4f4f2;padding:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);position:relative}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.8);transition:filter .6s}
.frame:hover img{filter:none}
.frame:nth-child(1){grid-area:1/1/3/3}.frame:nth-child(2){grid-area:1/5/2/7}.frame:nth-child(3){grid-area:3/1/4/2}
.frame:nth-child(4){grid-area:2/6/4/7}.frame:nth-child(5){grid-area:3/2/4/4}.frame:nth-child(6){grid-area:3/4/4/6}
.expo__label{position:relative;background:rgba(7,8,10,.84);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,4vw,56px);max-width:860px;text-align:center}
.expo__label .lead{margin-inline:auto}
.expo__label .btn-row{justify-content:center;margin-top:26px}
.expo__label .d-2 .line:last-child{color:var(--lime)}
@media (max-width:900px){.expo__wall{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}.frame:nth-child(n){grid-area:auto}}

/* ---------- Bulles de discussion (FAQ, Contact) ---------- */
.chat{display:flex;flex-direction:column;gap:14px;width:min(560px,100%)}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:90%}
.msg img,.msg .av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--lime);background:var(--ink-3);display:grid;place-items:center;font-size:20px}
.msg p{padding:14px 18px;border-radius:20px 20px 20px 6px;background:var(--ink-3);color:var(--paper);font-size:16px;line-height:1.45;text-align:left}
.msg--me{align-self:flex-end;flex-direction:row-reverse}
.msg--me p{background:var(--lime);color:var(--ink);border-radius:20px 20px 6px 20px}
.typing{display:inline-flex;gap:5px;padding:16px 18px;border-radius:20px;background:var(--ink-3)}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes dot{30%{transform:translateY(-5px);background:var(--lime)}}
.chat__head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat__head img{height:34px;width:auto}
.chat__head b{font-family:var(--f-display);font-size:18px}
.chat__head span{color:#3ddc84;font-family:var(--f-mono);font-size:12px}
.chat__card{background:rgba(15,17,21,.82);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px}
body[data-page="faq"] .acc__head h3::before{content:"💬 ";font-size:.8em}
.faq-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;min-height:90svh;padding:150px var(--gutter) 60px}
@media (max-width:900px){.faq-hero{grid-template-columns:1fr}}

/* ---------- Couverture magazine (Studio) ---------- */
.cover{min-height:100svh;padding:110px var(--gutter) var(--gutter);display:grid;grid-template-rows:auto 1fr auto;gap:30px;color:var(--paper)}
.cover__mast{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:2px solid var(--lime);padding-bottom:10px}
.cover__mast b{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,14vw,230px);line-height:.8;letter-spacing:-.05em;font-variation-settings:"wdth" 75}
.cover__mast .mono{text-align:right}
.cover__lines{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--gutter)}
.cover__line{max-width:320px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.cover__line .mono{color:var(--lime)}
.cover__line p{font-family:var(--f-serif);font-style:italic;font-size:clamp(24px,2.4vw,38px);line-height:1.05;margin-top:6px}
.cover__line--r{justify-self:end;text-align:right}
.cover__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.cover__foot .d-2{max-width:13ch;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.barcode{width:130px;height:70px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:4px}
.barcode i{flex:1;background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,#000 4px 5px,transparent 5px 9px,#000 9px 12px,transparent 12px 14px)}
.barcode span{font-family:var(--f-mono);font-size:9px;color:#000;text-align:center}
@media (max-width:760px){.cover__lines{grid-template-columns:1fr}.cover__line--r{justify-self:start;text-align:left}}

/* Emojis décoratifs dans les titres de services */
.svc .acc__head h3 .emo{font-size:.6em;vertical-align:middle;margin-right:.2em;text-transform:none}

.page-hero--split{grid-template-columns:1fr 1fr;align-items:center}
@media (max-width:900px){.page-hero--split{grid-template-columns:1fr}.page-hero--split .social{width:min(420px,100%)}}

/* ---------- Badge promo flottant (toutes pages) ---------- */
.promo-pill{position:fixed;left:16px;bottom:16px;z-index:57;display:flex;align-items:center;border-radius:999px;background:linear-gradient(135deg,#16050f,#3a0f28);border:1px solid #e2bd6e;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);animation:pillIn .8s cubic-bezier(.77,0,.18,1) 2.5s both}
.promo-pill a{display:flex;align-items:center;gap:12px;padding:10px 6px 10px 16px;color:#f5dfa8}
.promo-pill a > span:first-child{font-size:22px}
.promo-pill b{display:block;font-family:var(--f-display);font-size:15px;line-height:1.1}
.promo-pill small{display:block;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.promo-pill button{color:#f5dfa8;font-size:18px;padding:0 14px 0 6px;opacity:.7}
@keyframes pillIn{from{transform:translateY(140%)}}
.has-buybar .promo-pill{bottom:86px}
@media (max-width:600px){.promo-pill small{display:none}}

/* ---------- Badge promo en collage (remplace la pilule) ---------- */
.promo-pill{left:18px;bottom:18px;background:none;border:0;box-shadow:none;border-radius:0;filter:drop-shadow(4px 7px 0 rgba(0,0,0,.35));animation:pcIn .9s cubic-bezier(.77,0,.18,1) 2.5s both}
@keyframes pcIn{from{transform:translateY(160%) rotate(-20deg)}}
.pc{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 14px;padding:22px 26px 18px 20px;color:#16120a;
  background-color:#e7dfcb;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  clip-path:polygon(0 6%,4% 0,10% 4%,17% 1%,25% 5%,33% 0,41% 3%,50% 0,58% 4%,66% 1%,74% 5%,82% 0,90% 3%,97% 0,100% 7%,98% 16%,100% 27%,97% 38%,100% 50%,98% 62%,100% 73%,97% 84%,100% 94%,95% 100%,87% 96%,79% 100%,70% 97%,61% 100%,52% 96%,43% 100%,34% 97%,25% 100%,16% 96%,8% 100%,2% 95%,0 86%,3% 75%,0 63%,2% 51%,0 39%,3% 27%,0 16%);
  transform:rotate(-4deg);transition:transform .4s cubic-bezier(.34,1.56,.64,1);animation:pcBoil .45s steps(1) infinite}
.pc:hover{transform:rotate(1deg) scale(1.06);animation:none}
@keyframes pcBoil{0%{translate:0 0}33%{translate:1px -1px}66%{translate:-1px 1px}}
.pc-tape{position:absolute;top:2px;left:50%;width:76px;height:20px;transform:translateX(-50%) rotate(-6deg);background:rgba(250,246,226,.7);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 6px)}
.pc-ransom{grid-row:span 2;display:flex;gap:3px}
.pc-ransom i{display:grid;place-items:center;min-width:26px;height:34px;padding:0 4px;font-style:normal;font-size:24px;line-height:1;box-shadow:2px 3px 0 rgba(0,0,0,.25)}
.pc-ransom i:nth-child(1){background:#07080a;color:#fbf8f0;font-family:"Rubik Mono One",sans-serif;font-size:19px;transform:rotate(-7deg)}
.pc-ransom i:nth-child(2){background:#d6ff38;font-family:var(--f-serif);font-style:italic;transform:rotate(5deg)}
.pc-ransom i:nth-child(3){background:#ff4a1c;color:#fff;font-family:var(--f-display);font-weight:800;transform:rotate(-3deg)}
.pc-ransom i:nth-child(4){background:#fbf8f0;border:2px solid #07080a;font-family:var(--f-mono);transform:rotate(6deg)}
.pc-ransom i:nth-child(5){background:#2f4bff;color:#fff;font-family:"Permanent Marker",cursive;transform:rotate(-5deg)}
.pc-note{font-family:"Permanent Marker",cursive;font-size:15px;line-height:1.1;color:#16120a}
.pc-stamp{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px dashed #ff4a1c;color:#ff4a1c;font-family:"Rubik Mono One",sans-serif;font-size:9px;text-transform:uppercase;text-align:center;line-height:1.1;transform:rotate(12deg)}
.pc-close{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:#07080a;color:#fbf8f0;font-size:15px;line-height:1;display:grid;place-items:center;padding:0;opacity:1;z-index:2}
@media (max-width:600px){.pc{padding:18px 18px 14px 14px;gap:4px 10px}.pc-ransom i{min-width:20px;height:28px;font-size:18px}.pc-stamp{display:none}.pc-note{font-size:13px}}
@media (prefers-reduced-motion:reduce){.pc{animation:none}}