/* Guitar Icons — socle commun des campagnes saisonnières.
   Structure, mise en page, animations, accessibilité. Les palettes et ornements vivent dans <slug>.css.
   Aucune bibliothèque : CSS pur, animations limitées à transform/opacity, prefers-reduced-motion respecté. */

body.cx-campaign{
  --cx-bg:#080808;--cx-bg2:#151515;--cx-ink:#f4f1ea;--cx-muted:#b9b2a6;--cx-accent:#e32636;--cx-gold:#c5a46d;
  --cx-line:rgba(244,241,234,.2);--cx-gutter:clamp(18px,5vw,84px);
  --cx-display:"Arial Black","Helvetica Neue",Impact,Arial,sans-serif;--cx-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --cx-ease:cubic-bezier(.2,.8,.2,1);
}

/* --- Bandeau d'aperçu administrateur --- */
.cx-preview-bar{position:sticky;top:0;z-index:300;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:.55rem 1rem;background:#d97706;color:#111;font:700 13px/1.3 Arial,sans-serif}
.cx-preview-bar form{margin:0}.cx-preview-bar button{padding:.35rem .8rem;border:2px solid #111;background:#111;color:#fff;font:800 12px Arial,sans-serif;cursor:pointer}

/* --- Conteneur --- */
.cx-home{background:var(--cx-bg);color:var(--cx-ink);overflow:clip}
.cx-section{position:relative;width:min(1560px,100%);margin:0 auto;padding:clamp(4rem,9vw,8.5rem) var(--cx-gutter)}
.cx-home *{box-sizing:border-box}
.cx-eyebrow{margin:0 0 1rem;color:var(--cx-gold);font:800 11px/1.2 "Courier New",monospace;letter-spacing:.22em;text-transform:uppercase}
.cx-btn{display:inline-flex;align-items:center;gap:.7rem;min-height:52px;padding:.95rem 1.5rem;border:1.5px solid var(--cx-ink);color:var(--cx-ink);text-decoration:none;font:800 12px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s var(--cx-ease),background .25s,color .25s,border-color .25s}
.cx-btn--primary{background:var(--cx-accent);border-color:var(--cx-accent);color:#fff}
.cx-btn:hover{transform:translateY(-3px)}.cx-btn--primary:hover{background:var(--cx-ink);border-color:var(--cx-ink);color:var(--cx-bg)}.cx-btn--ghost:hover{background:var(--cx-ink);color:var(--cx-bg)}
.cx-home a:focus-visible,.cx-nav-link:focus-visible{outline:3px solid var(--cx-gold);outline-offset:3px}

/* --- Hero --- */
.cx-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(120% 90% at 70% 38%,var(--cx-bg2) 0,var(--cx-bg) 62%)}
.cx-hero__lights{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cx-hero__lights i{position:absolute;top:-30%;width:42vw;height:150%;background:conic-gradient(from 180deg at 50% 0,transparent 168deg,var(--cx-beam,rgba(227,38,54,.34)) 180deg,transparent 192deg);filter:blur(14px);transform-origin:50% 0;opacity:.85;animation:cx-sweep 16s ease-in-out infinite alternate;will-change:transform}
.cx-hero__lights i:nth-child(1){left:2%;--cx-beam:rgba(227,38,54,.36);animation-delay:-3s}
.cx-hero__lights i:nth-child(2){left:36%;--cx-beam:rgba(197,164,109,.30);animation-duration:21s;animation-direction:alternate-reverse}
.cx-hero__lights i:nth-child(3){left:62%;--cx-beam:rgba(244,241,234,.18);animation-duration:18s}
@keyframes cx-sweep{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
.cx-hero__inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1rem,4vw,4rem);align-items:center;width:min(1560px,100%);margin:0 auto;padding:clamp(5.5rem,10vw,9rem) var(--cx-gutter) clamp(2rem,5vw,4rem)}
.cx-hero__title{margin:0;font:900 clamp(2.8rem,6.4vw,7rem)/.84 var(--cx-display);letter-spacing:-.065em;text-transform:uppercase;text-wrap:balance}
.cx-hero__title span{display:block}.cx-hero__title span:nth-child(2){color:transparent;-webkit-text-stroke:2px var(--cx-ink);font-size:.62em;letter-spacing:-.04em;margin-top:.12em}
.cx-hero__tagline{max-width:34rem;margin:1.6rem 0 2rem;color:var(--cx-ink);font:italic 400 clamp(1.15rem,2vw,1.6rem)/1.35 var(--cx-serif)}
.cx-hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem}
.cx-hero__signature{margin:2rem 0 0;max-width:30rem;padding-left:1rem;border-left:2px solid var(--cx-gold);color:var(--cx-muted);font:italic 400 1rem/1.5 var(--cx-serif)}

.cx-hero__stage{position:relative;aspect-ratio:1/1.08;min-height:340px}
.cx-hero__beam{position:absolute;left:50%;bottom:6%;width:76%;height:14%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(244,241,234,.28),transparent);filter:blur(6px)}
.cx-hero__guitar{position:absolute;display:block;padding:clamp(6px,.9vw,12px);background:var(--cx-print,#f4f1ea);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.25)}
.cx-hero__guitar picture{display:block;width:100%;height:100%;background:#fff}
.cx-hero__guitar img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.cx-hero__guitar--1{left:22%;top:2%;width:56%;height:84%;z-index:3;transform:rotate(3deg)}
.cx-hero__guitar--2{left:-2%;top:30%;width:34%;height:52%;z-index:2;transform:rotate(-9deg)}
.cx-hero__guitar--3{right:-2%;top:22%;width:34%;height:52%;z-index:2;transform:rotate(8deg)}
.cx-ticket{position:absolute;z-index:4;right:2%;bottom:3%;display:grid;gap:.2rem;padding:.8rem 1.2rem .8rem 1.5rem;background:var(--cx-gold);color:#111;transform:rotate(-5deg);font-family:"Courier New",monospace;text-transform:uppercase;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.cx-ticket span{font-size:10px;letter-spacing:.16em}.cx-ticket b{font:900 clamp(1.3rem,2.4vw,2rem)/1 var(--cx-display);letter-spacing:-.03em}.cx-ticket small{font-size:10px;letter-spacing:.1em;border-top:1px dashed #111;padding-top:.3rem}

/* Entrée élégante */
.cx-hero__copy>*,.cx-hero__guitar,.cx-ticket{animation:cx-rise .9s var(--cx-ease) both}
.cx-hero__copy>:nth-child(2){animation-delay:.08s}.cx-hero__copy>:nth-child(3){animation-delay:.18s}.cx-hero__copy>:nth-child(4){animation-delay:.28s}.cx-hero__copy>:nth-child(5){animation-delay:.38s}
.cx-hero__guitar--1{animation-delay:.2s}.cx-hero__guitar--2{animation-delay:.38s}.cx-hero__guitar--3{animation-delay:.5s}.cx-ticket{animation-delay:.7s}
@keyframes cx-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}

/* Marquee */
.cx-marquee{overflow:hidden;border-block:1px solid var(--cx-line);background:rgba(0,0,0,.35);padding:.9rem 0}
.cx-marquee__track{display:flex;width:max-content;gap:1.6rem;animation:cx-marquee 38s linear infinite;color:var(--cx-ink);font:900 clamp(.95rem,1.8vw,1.35rem)/1 var(--cx-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cx-marquee__track i{color:var(--cx-gold);font-style:normal}
@keyframes cx-marquee{to{transform:translateX(-50%)}}

/* --- Sections --- */
.cx-head{display:grid;gap:.6rem;max-width:56rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.cx-head h2,.cx-build h2,.cx-intro h2{margin:0;font:900 clamp(2.4rem,6.5vw,6rem)/.9 var(--cx-display);letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}
.cx-head p:not(.cx-eyebrow){margin:.4rem 0 0;max-width:40rem;color:var(--cx-muted);font:italic 400 1.1rem/1.55 var(--cx-serif)}
.cx-section+.cx-section{border-top:1px solid var(--cx-line)}

.cx-grid{display:grid;gap:clamp(.9rem,2vw,1.6rem)}
.cx-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cx-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cx-section .sf-card{--sf-ink:var(--cx-ink);--sf-muted:var(--cx-muted);--sf-line:var(--cx-line);--sf-surface:var(--cx-bg2);--sf-bg:var(--cx-bg);color:var(--cx-ink);background:var(--cx-bg2);border:1px solid var(--cx-line);transition:transform .35s var(--cx-ease),border-color .3s}
.cx-section .sf-card:hover{transform:translateY(-6px);border-color:var(--cx-gold)}
.cx-section .sf-card a,.cx-section .sf-card h3{color:var(--cx-ink)}

/* Guitar Heroes */
.cx-heroes__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--cx-line)}
.cx-heroes__list a{display:grid;grid-template-columns:3.2rem 1fr auto 2rem;gap:1rem;align-items:baseline;padding:clamp(1rem,2.2vw,1.7rem) .2rem;border-bottom:1px solid var(--cx-line);color:var(--cx-ink);text-decoration:none;transition:padding .3s var(--cx-ease),background .3s,color .3s}
.cx-heroes__list a:hover,.cx-heroes__list a:focus-visible{padding-left:1.2rem;background:var(--cx-bg2);color:var(--cx-gold)}
.cx-heroes__n{color:var(--cx-gold);font:700 12px "Courier New",monospace}
.cx-heroes__list strong{font:900 clamp(1.6rem,4.2vw,3.6rem)/1 var(--cx-display);letter-spacing:-.04em;text-transform:uppercase}
.cx-heroes__list em{color:var(--cx-muted);font:italic 400 .95rem var(--cx-serif)}

/* Stories */
.cx-stories__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,2.4vw,2rem)}
.cx-story{display:grid;gap:1rem;color:var(--cx-ink);text-decoration:none}
.cx-story picture{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cx-bg2)}
.cx-story img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--cx-ease),filter .4s;filter:saturate(.9) contrast(1.05)}
.cx-story:hover img{transform:scale(1.045);filter:none}
.cx-story__body b{display:block;font:900 1.35rem/1.15 var(--cx-display);letter-spacing:-.03em}
.cx-story__body small{display:block;margin-top:.5rem;color:var(--cx-muted);font:italic 400 .98rem/1.5 var(--cx-serif)}

/* Build / intro / gifts / links */
.cx-build{text-align:center;background:radial-gradient(70% 120% at 50% 0,var(--cx-bg2),transparent)}
.cx-build__inner{display:grid;justify-items:center;gap:1.2rem;max-width:60rem;margin:0 auto}
.cx-build__inner>p:not(.cx-eyebrow){max-width:38rem;margin:0;color:var(--cx-muted);font:italic 400 1.15rem/1.6 var(--cx-serif)}
.cx-build .cx-hero__ctas{justify-content:center}
.cx-intro__inner{max-width:52rem}.cx-intro p{color:var(--cx-muted);font:400 1.08rem/1.75 var(--cx-serif)}
.cx-gifts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.2rem}
.cx-gift{display:grid;gap:.8rem;align-content:start;padding:1.6rem;border:1px solid var(--cx-line);background:var(--cx-bg2)}
.cx-gift h3{margin:0;font:900 1.5rem/1.05 var(--cx-display);letter-spacing:-.04em;text-transform:uppercase}.cx-gift p{margin:0;color:var(--cx-muted);font:400 1rem/1.6 var(--cx-serif)}
.cx-gift a,.cx-links__list a{color:var(--cx-gold);font:800 12px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.cx-links__list{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:0;padding:0;list-style:none}.cx-links__list a{font-size:13px}

/* --- Liens de navigation événementiels --- */
.cx-nav-link{color:var(--cx-gold,#c5a46d)!important;font-weight:900}
.rock-nav a.cx-nav-link::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.5rem;border-radius:50%!important;background:currentColor;vertical-align:middle}

/* --- Révélation au scroll (activée uniquement si le JS est chargé) --- */
.cx-js [data-cx-reveal]{opacity:0;translate:0 26px;transition:opacity .8s var(--cx-ease),translate .8s var(--cx-ease)}
.cx-js [data-cx-reveal].is-in{opacity:1;translate:0 0}

/* --- Responsive : composition mobile dédiée --- */
@media (max-width:980px){
  .cx-hero__inner{grid-template-columns:minmax(0,1fr);padding-top:clamp(4.5rem,18vw,6.5rem)}
  .cx-hero__stage{order:-1;aspect-ratio:1/.92;min-height:0;width:min(100%,520px);margin:0 auto}
  .cx-hero__title{font-size:clamp(2.8rem,14vw,6rem)}
  .cx-hero__ctas .cx-btn{flex:1 1 100%;justify-content:center}
}
@media (max-width:560px){
  .cx-heroes__list a{grid-template-columns:2.2rem 1fr 1.4rem}.cx-heroes__list em{display:none}
  .cx-ticket{right:0}
}

/* --- Mouvement réduit --- */
@media (prefers-reduced-motion:reduce){
  .cx-hero__lights i,.cx-marquee__track{animation:none!important}
  .cx-hero__copy>*,.cx-hero__guitar,.cx-ticket{animation:none!important}
  .cx-js [data-cx-reveal]{opacity:1!important;translate:none!important;transition:none!important}
  .cx-btn,.cx-section .sf-card,.cx-story img,.cx-heroes__list a{transition:none!important}
}

/* Les cartes réutilisées portent déjà .sf-motion-ready (storefront) : la révélation est gérée par le conteneur [data-cx-reveal]. */
.cx-section .sf-card.sf-motion-ready{opacity:1;transform:none}
.cx-section .sf-card.sf-motion-ready:hover{transform:translateY(-6px)}

/* --- Modes Light et N&B : les sections événementielles restent sombres et lisibles --- */
html[data-ui-mode] body.cx-campaign .cx-section .sf-card{background:var(--cx-bg2)!important;color:var(--cx-ink)!important;border-color:var(--cx-line)!important}
html[data-ui-mode] body.cx-campaign .cx-section .sf-card :is(h3,h3 a,.sf-price,p,small,.sf-card__artist){color:var(--cx-ink)!important}
html[data-ui-mode] body.cx-campaign .cx-section .sf-card :is(.sf-card__type,.sf-muted,.sf-card__stock){color:var(--cx-muted)!important}
html[data-ui-mode] body.cx-campaign .cx-section .sf-card__media{background:#1d1d1d!important}
html[data-ui-mode="light"] body.cx-campaign .cx-nav-link{color:#6e5018!important}
html[data-ui-mode="mono"] body.cx-campaign .cx-nav-link{color:#111!important}
html[data-ui-mode="mono"] body.cx-campaign .cx-home{filter:grayscale(1)}
html[data-ui-mode="mono"] body.cx-campaign::before{filter:grayscale(1)}