/* ============================================================
   mariska.fr — Design system --msk-*  (source : 04-maquettes)
   Univers coloré famille/enfance. Voir design-system.md.
   ============================================================ */
:root{
  --msk-nuit:#312A5E; --msk-encre:#4B4668;
  --msk-rouge:#D62246; --msk-rouge-fonce:#A81234;
  --msk-jaune:#FFC53F; --msk-turquoise:#0E7C7B;
  --msk-corail:#F4743B; --msk-lilas:#8B5FBF; --msk-vert:#2E8B57;
  --msk-creme:#FFF6EB; --msk-creme-fonce:#FBEBD3; --msk-blanc:#fff;
  --msk-font-titre:"Baloo 2",cursive; --msk-font-texte:"Nunito",sans-serif;
  --msk-radius:22px; --msk-radius-sm:14px; --msk-radius-pill:999px;
  --msk-ombre:0 6px 24px rgba(49,42,94,.12);
  --msk-ombre-forte:0 12px 36px rgba(49,42,94,.18);
}
body{font-family:var(--msk-font-texte);background:var(--msk-creme);color:var(--msk-encre);font-size:1.05rem;line-height:1.65;}
h1,h2,h3,h4,.msk-btn{font-family:var(--msk-font-titre);color:var(--msk-nuit);}
a{color:var(--msk-rouge);} a:hover{color:var(--msk-rouge-fonce);}
:focus-visible{outline:3px solid var(--msk-jaune);outline-offset:2px;}

/* ---------- Boutons ---------- */
.msk-btn{display:inline-block;border-radius:var(--msk-radius-pill);padding:.7rem 1.6rem;font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;}
.msk-btn:hover{transform:translateY(-2px);box-shadow:var(--msk-ombre);}
.msk-btn-primaire{background:var(--msk-rouge);color:#fff;}
.msk-btn-primaire:hover{background:var(--msk-rouge-fonce);color:#fff;}
.msk-btn-soleil{background:var(--msk-jaune);color:var(--msk-nuit);}
.msk-btn-soleil:hover{background:#f5b722;color:var(--msk-nuit);}
.msk-btn-outline{border-color:var(--msk-turquoise);color:var(--msk-turquoise);}
.msk-btn-outline:hover{background:var(--msk-turquoise);color:#fff;}
.msk-btn-outline-blanc{border-color:#fff;color:#fff;}
.msk-btn-outline-blanc:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ---------- Navigation ---------- */
.msk-nav{background:rgba(255,246,235,.92);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(49,42,94,.08);}
.msk-nav .nav-link{font-weight:700;color:var(--msk-nuit);margin:0 .15rem;padding:.5rem .7rem!important;border-radius:10px;}
.msk-nav .nav-link:hover{color:var(--msk-rouge);}
.msk-nav .nav-link.active{color:var(--msk-rouge);box-shadow:inset 0 -4px 0 var(--msk-jaune);}
.msk-nav .navbar-brand img{height:48px;}
.msk-nav .ext::after{content:" ↗";font-size:.8em;}
.msk-nav .btn-contact{border:2px solid var(--msk-rouge);color:var(--msk-rouge);border-radius:var(--msk-radius-pill);padding:.4rem 1.2rem;font-weight:800;text-decoration:none;}
.msk-nav .btn-contact:hover{background:var(--msk-rouge);color:#fff;}
.dropdown-menu{border:none;border-radius:var(--msk-radius-sm);box-shadow:var(--msk-ombre-forte);}
.dropdown-item{font-weight:600;color:var(--msk-encre);padding:.55rem 1.2rem;}
.dropdown-item:hover{background:var(--msk-creme);color:var(--msk-rouge);}

/* ---------- Surtitres, fil d'ariane, vagues ---------- */
.msk-surtitre{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;}
.msk-surtitre::before{content:"";width:.7em;height:.7em;border-radius:50%;background:currentColor;}
.msk-ariane{font-size:.9rem;font-weight:600;}
.msk-ariane a{text-decoration:none;color:var(--msk-encre);}
.msk-ariane a:hover{color:var(--msk-rouge);}
.msk-ariane .sep{margin:0 .4rem;color:var(--msk-corail);}
.msk-vague{display:block;width:100%;height:70px;margin-top:-1px;}

/* ---------- Héros (accueil, fiches, en-têtes de section) ---------- */
.msk-hero,.msk-entete,.msk-fiche-hero{background:linear-gradient(135deg,var(--msk-nuit) 0%,#473a86 60%,#5b4a9e 100%);color:#fff;position:relative;overflow:hidden;}
.msk-hero h1,.msk-entete h1,.msk-fiche-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3rem);line-height:1.15;}
.msk-hero .fil{color:var(--msk-jaune);white-space:nowrap;}
.msk-hero p.lead,.msk-entete p.lead{color:#EDE8FF;max-width:44rem;}
.msk-hero p.lead{margin-inline:auto;}
.msk-fiche-hero .soustitre{color:var(--msk-jaune);font-family:var(--msk-font-titre);font-weight:700;font-size:1.15rem;letter-spacing:.04em;}
.msk-fiche-hero .affiche{width:100%;max-width:380px;border-radius:var(--msk-radius);border:6px solid #fff;box-shadow:var(--msk-ombre-forte);transform:rotate(-2.5deg);}
.msk-confettis{position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle 6px at 8% 20%,var(--msk-jaune) 98%,transparent),
 radial-gradient(circle 5px at 22% 75%,var(--msk-corail) 98%,transparent),
 radial-gradient(circle 7px at 45% 12%,var(--msk-rouge) 98%,transparent),
 radial-gradient(circle 4px at 70% 26%,var(--msk-jaune) 98%,transparent),
 radial-gradient(circle 6px at 88% 60%,var(--msk-turquoise) 98%,transparent),
 radial-gradient(circle 5px at 60% 85%,var(--msk-lilas) 98%,transparent),
 radial-gradient(circle 4px at 93% 14%,var(--msk-corail) 98%,transparent);
 opacity:.85;}
.msk-badge-1984{display:inline-block;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);border-radius:var(--msk-radius-pill);padding:.35rem 1rem;font-weight:700;color:#fff;font-size:.95rem;margin-bottom:1rem;}
.msk-repere{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);border-radius:var(--msk-radius-pill);padding:.35rem 1rem;font-weight:700;font-size:.92rem;color:#fff;}

/* ---------- Cartes d'intention (portes d'entrée accueil) ---------- */
.msk-porte{position:relative;display:flex;flex-direction:column;background:var(--msk-blanc);border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);overflow:hidden;height:100%;transition:transform .2s,box-shadow .2s;text-decoration:none;color:var(--msk-encre);}
.msk-porte:hover{transform:translateY(-4px);box-shadow:var(--msk-ombre-forte);color:var(--msk-encre);}
.msk-porte::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:2;background:var(--u,var(--msk-rouge));}
.msk-porte .visuel{position:relative;}
.msk-porte img.cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.msk-porte.grande img.cover{aspect-ratio:16/8;}
.msk-porte .etiquette{position:absolute;left:1rem;bottom:-0.9rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;background:var(--u,var(--msk-rouge));color:#fff;font-family:var(--msk-font-titre);font-weight:700;font-size:.85rem;border-radius:var(--msk-radius-pill);padding:.25rem .9rem;box-shadow:var(--msk-ombre);}
.msk-porte .etiquette.sombre{color:var(--msk-nuit);}
.msk-porte .corps{padding:1.5rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex-grow:1;}
.msk-porte h3{font-size:1.35rem;margin-bottom:.4rem;}
.msk-porte.grande h3{font-size:1.6rem;}
.msk-porte p{font-size:.95rem;margin-bottom:1rem;}
.msk-porte .faux-btn{margin-top:auto;align-self:flex-start;border-radius:var(--msk-radius-pill);padding:.5rem 1.3rem;font-family:var(--msk-font-titre);font-weight:700;font-size:.98rem;background:var(--msk-rouge);color:#fff;transition:background .2s;}
.msk-porte:hover .faux-btn{background:var(--msk-rouge-fonce);}
.msk-porte .faux-btn.soleil{background:var(--msk-jaune);color:var(--msk-nuit);}
.msk-porte:hover .faux-btn.soleil{background:#f5b722;}

/* ---------- Grille compacte « Tout l'univers » ---------- */
.msk-univers{background:var(--msk-blanc);border-radius:var(--msk-radius-sm);box-shadow:var(--msk-ombre);padding:1.1rem 1.2rem;height:100%;display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;color:var(--msk-encre);transition:transform .2s,box-shadow .2s;}
.msk-univers:hover{transform:translateY(-4px);box-shadow:var(--msk-ombre-forte);color:var(--msk-encre);}
.msk-univers .puce{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;background:color-mix(in srgb,var(--u,var(--msk-rouge)) 14%,#fff);}
.msk-univers h3{font-size:1.02rem;margin:0 0 .15rem;}
.msk-univers h3 .ext-fleche{font-size:.75em;color:var(--u,var(--msk-rouge));}
.msk-univers p{font-size:.85rem;margin:0;line-height:1.45;}
.msk-univers.secondaire{background:var(--msk-creme-fonce);box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--msk-nuit) 18%,transparent);}
.msk-univers.secondaire:hover{box-shadow:var(--msk-ombre);}

/* ---------- Badges (âge, durée, thème, nouveauté) ---------- */
.msk-badges{display:flex;flex-wrap:wrap;gap:.6rem;}
.msk-badge{display:inline-flex;align-items:center;gap:.45rem;border-radius:var(--msk-radius-pill);font-family:var(--msk-font-titre);font-weight:700;font-size:.92rem;padding:.35rem 1rem;}
.msk-badge .pastille{width:.65em;height:.65em;border-radius:50%;background:currentColor;flex:none;}
.msk-badge-age{background:var(--msk-jaune);color:var(--msk-nuit);}
.msk-badge-duree{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.msk-badge-theme{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.msk-badge-new{background:var(--msk-rouge);color:#fff;}
.sur-clair .msk-badge-duree{background:rgba(14,124,123,.14);border:none;color:#0A5958;}
.sur-clair .msk-badge-theme{background:rgba(139,95,191,.14);border:none;color:#6B3FA0;}

/* ---------- Cartes spectacle (catalogue) ---------- */
.msk-carte-spectacle{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);overflow:hidden;height:100%;transition:transform .2s,box-shadow .2s;text-decoration:none;color:var(--msk-encre);}
.msk-carte-spectacle:hover{transform:translateY(-4px);box-shadow:var(--msk-ombre-forte);color:var(--msk-encre);}
.msk-carte-spectacle::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:2;background:var(--msk-rouge);}
.msk-carte-spectacle img.cover{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.msk-carte-spectacle .corps{padding:1.2rem 1.2rem 1.1rem;display:flex;flex-direction:column;flex-grow:1;}
.msk-carte-spectacle h3{font-size:1.2rem;margin-bottom:.35rem;}
.msk-carte-spectacle p{font-size:.9rem;margin-bottom:.8rem;}
.msk-carte-spectacle .msk-badges{margin-top:auto;}
.msk-carte-spectacle .msk-badge{font-size:.8rem;padding:.25rem .8rem;}

/* ---------- Chips de filtre ---------- */
.msk-chips{display:flex;flex-wrap:wrap;gap:.6rem;}
.msk-chip{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--msk-radius-pill);font-family:var(--msk-font-titre);font-weight:700;font-size:.95rem;padding:.45rem 1.15rem;background:#fff;border:2px solid var(--c,var(--msk-nuit));color:var(--msk-nuit);cursor:pointer;transition:transform .15s,background .15s,color .15s;text-decoration:none;}
.msk-chip .pastille{width:.7em;height:.7em;border-radius:50%;background:var(--c,var(--msk-nuit));flex:none;}
.msk-chip:hover{transform:translateY(-2px);color:var(--msk-nuit);}
.msk-chip.actif{background:var(--c,var(--msk-nuit));color:#fff;}
.msk-chip.actif .pastille{background:#fff;}
.msk-chip.actif.chip-claire{color:var(--msk-nuit);}
.msk-chip.actif.chip-claire .pastille{background:var(--msk-nuit);}

/* ---------- Agenda billetterie ---------- */
.msk-mois-titre{display:flex;align-items:center;gap:1rem;margin:2.5rem 0 1.2rem;}
.msk-mois-titre h2{font-size:1.6rem;margin:0;white-space:nowrap;}
.msk-mois-titre::after{content:"";flex:1;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--msk-jaune) 0 14px,transparent 14px 26px);}
.msk-seance{background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);padding:1rem 1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;transition:transform .2s,box-shadow .2s;border-left:8px solid var(--c,var(--msk-nuit));margin-bottom:.9rem;}
.msk-seance:hover{transform:translateY(-3px);box-shadow:var(--msk-ombre-forte);}
.msk-date{flex:none;width:74px;text-align:center;background:var(--msk-creme);border-radius:var(--msk-radius-sm);padding:.5rem .25rem;}
.msk-date .jour{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--msk-rouge);display:block;line-height:1.2;}
.msk-date .num{font-family:var(--msk-font-titre);font-weight:800;font-size:1.7rem;color:var(--msk-nuit);display:block;line-height:1.1;}
.msk-date .mois{font-weight:700;font-size:.8rem;display:block;}
.msk-seance .infos{flex:1 1 240px;min-width:0;}
.msk-seance h3{font-size:1.2rem;margin:0 0 .3rem;}
.msk-salle-tag{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.85rem;color:var(--msk-nuit);}
.msk-salle-tag .pastille{width:.7em;height:.7em;border-radius:50%;background:var(--c,var(--msk-nuit));}
.msk-horaires{font-weight:700;font-size:.92rem;color:var(--msk-encre);}
.msk-horaires .h{background:var(--msk-creme-fonce);border-radius:var(--msk-radius-pill);padding:.1rem .7rem;margin-right:.35rem;display:inline-block;}
.msk-seance .action{flex:none;text-align:right;margin-left:auto;}
.msk-prix{font-family:var(--msk-font-titre);font-weight:800;font-size:1.25rem;color:var(--msk-rouge);display:block;line-height:1.2;}
.msk-prix small{font-family:var(--msk-font-texte);font-weight:600;font-size:.75rem;color:var(--msk-encre);display:block;}
.msk-seance .msk-btn{padding:.5rem 1.3rem;font-size:.98rem;margin-top:.35rem;}
.msk-vide{display:none;background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);padding:2rem;text-align:center;font-weight:700;}

/* Couleurs par salle (classe s-<ville> ou var --c inline) */
.s-cysoing{--c:var(--msk-rouge);} .s-croix{--c:var(--msk-turquoise);}
.s-lens{--c:var(--msk-jaune);} .s-lille{--c:var(--msk-lilas);}
.s-valenciennes{--c:var(--msk-corail);} .s-arras{--c:var(--msk-vert);}

/* ---------- Blocs infos / cartes salles ---------- */
.msk-infos-pratiques{background:var(--msk-creme-fonce);border-radius:var(--msk-radius);}
.msk-infos-pratiques li{margin-bottom:.4rem;font-weight:600;}
.msk-carte-salle{background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);padding:1.2rem 1.3rem;height:100%;border-top:6px solid var(--c,var(--msk-nuit));}
.msk-carte-salle h3{font-size:1.1rem;margin-bottom:.2rem;}
.msk-carte-salle p{font-size:.92rem;margin:0;}
.msk-carte-blanche{background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);}

/* ---------- Fiche spectacle ---------- */
.msk-synopsis p:first-of-type::first-letter{font-family:var(--msk-font-titre);font-weight:800;font-size:2.6em;color:var(--msk-rouge);float:left;line-height:1;padding-right:.12em;}
.msk-galerie img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--msk-radius-sm);box-shadow:var(--msk-ombre);transition:transform .2s;}
.msk-galerie img:hover{transform:scale(1.03) rotate(-1deg);}
.msk-info-ligne{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:2px dashed var(--msk-creme-fonce);}
.msk-info-ligne:last-child{border-bottom:none;}
.msk-info-ligne .ico{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--msk-creme);}
.msk-info-ligne .lib{font-weight:800;color:var(--msk-nuit);display:block;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;}
.msk-technique{background:var(--msk-creme-fonce);border-radius:var(--msk-radius);}
.msk-mesure{background:#fff;border-radius:var(--msk-radius-sm);box-shadow:var(--msk-ombre);text-align:center;padding:1rem;}
.msk-mesure .nb{font-family:var(--msk-font-titre);font-weight:800;font-size:1.7rem;color:var(--msk-turquoise);line-height:1.1;}
.msk-mesure .lib{font-weight:700;font-size:.85rem;}

/* ---------- À propos, chiffres, bandeau CTA ---------- */
.msk-apropos{background:var(--msk-creme-fonce);}
.msk-chiffre{background:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre);padding:1.2rem 1rem;text-align:center;height:100%;}
.msk-chiffre .nb{font-family:var(--msk-font-titre);font-weight:800;font-size:2.2rem;color:var(--msk-rouge);line-height:1.1;}
.msk-chiffre .lib{font-weight:700;font-size:.9rem;color:var(--msk-encre);}
.msk-marques li{margin-bottom:.35rem;}
.msk-bandeau{background:linear-gradient(120deg,var(--msk-rouge),#e8486b);color:#fff;border-radius:var(--msk-radius);box-shadow:var(--msk-ombre-forte);}
.msk-bandeau h2{color:#fff;}

/* ---------- Formulaires ---------- */
.msk-form label{font-weight:800;color:var(--msk-nuit);font-size:.92rem;margin-bottom:.3rem;}
.msk-form .form-control,.msk-form .form-select{border-radius:var(--msk-radius-sm);border:2px solid var(--msk-creme-fonce);padding:.6rem .9rem;font-weight:600;}
.msk-form .form-control:focus,.msk-form .form-select:focus{border-color:var(--msk-turquoise);box-shadow:none;}
.msk-hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden;}

/* ---------- FAQ (accordéon) ---------- */
.msk-faq .accordion-item{border:none;border-radius:var(--msk-radius-sm)!important;box-shadow:var(--msk-ombre);margin-bottom:.9rem;overflow:hidden;}
.msk-faq .accordion-button{font-family:var(--msk-font-titre);font-weight:700;color:var(--msk-nuit);background:#fff;font-size:1.05rem;}
.msk-faq .accordion-button:not(.collapsed){background:var(--msk-creme-fonce);color:var(--msk-rouge);box-shadow:none;}
.msk-faq .accordion-button:focus{box-shadow:none;}

/* ---------- Footer ---------- */
.msk-footer{background:var(--msk-nuit);color:#D9D4F2;}
.msk-footer h4{color:#fff;font-size:1.1rem;margin-bottom:.9rem;}
.msk-footer a{color:#D9D4F2;text-decoration:none;}
.msk-footer a:hover{color:var(--msk-jaune);}
.msk-footer ul{list-style:none;padding:0;margin:0;}
.msk-footer li{margin-bottom:.45rem;font-size:.97rem;}
.msk-footer .bas{border-top:1px solid rgba(255,255,255,.15);font-size:.9rem;}
.msk-footer .ext::after{content:" ↗";font-size:.8em;}

@media (max-width:575px){
  .msk-fiche-hero .affiche{transform:rotate(0);}
  .msk-seance .action{margin-left:0;width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;}
  .msk-seance .msk-btn{margin-top:0;}
}