/* Positive Theme — chrome : header (bandeau + chips + burger + marquee) et footer.
   Porté à l'identique de components/Positive Header.dc.html et Positive Footer.dc.html. */

@font-face {
  font-family: 'Shoot Vector';
  src: url('../fonts/ShootVector.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@keyframes pm-tick { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.pm-hd * { box-sizing: border-box }
.pm-hd a { text-decoration: none; color: inherit }
.pm-hd img { display: block; max-width: 100% }
.pm-hd .wm { font-family: var(--pm-font-logo); font-weight: 400; line-height: .85; display: inline-block; letter-spacing: .02em; margin: 0 }
.pm-hd .shell { max-width: var(--pm-shell); margin: 0 auto; padding: 0 40px }

.pm-hd .top {
  background: var(--pm-grad-header);
  padding: 16px 0 38px;
  position: relative;
  overflow: hidden;
  border-bottom: var(--pm-bd);
}
.pm-hd .top .shell { position: relative; z-index: 4 }
.pm-hd .hero-w { text-align: center; padding-top: 6px }
.pm-hd .hero-w .wm { font-size: 96px; color: #fff; text-shadow: 6px 6px 0 var(--pm-ink) }
.pm-hd .hero-w .tagl { font: 800 18px/1 var(--pm-font-body); color: #fff; text-shadow: 3px 3px 0 var(--pm-ink); margin-top: 10px; letter-spacing: -.01em }
.pm-hd .top .mask  { position: absolute; right: 6px; bottom: 4px; width: 216px; z-index: 3 }
.pm-hd .top .ill-l { position: absolute; left: 6px;  bottom: 4px; width: 214px; z-index: 3 }

.pm-hd .chips { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 18px auto 0; max-width: 900px; padding: 0; list-style: none }
.pm-hd .chips a:not(.sub) {
  background: #fff; color: var(--pm-ink); font: 700 13px/1 var(--pm-font-body);
  padding: 11px 16px; border-radius: 999px; border: var(--pm-bd); box-shadow: var(--pm-sh-3);
  display: inline-flex; align-items: center;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.pm-hd .chips a:not(.sub):hover { background: var(--pm-rose); color: #fff; transform: translate(-1px,-1px); box-shadow: var(--pm-sh-4) }
/* Chip de la rubrique courante */
.pm-hd .chips a.is-active { background: var(--pm-ink); color: #fff }
.pm-hd .chips a.is-active:hover { background: var(--pm-rose) }

.pm-hd .sub {
  font: 800 11px/1 var(--pm-font-body); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--pm-ink); border: var(--pm-bd); padding: 11px 17px;
  border-radius: 999px; box-shadow: 3px 3px 0 rgba(20,20,20,.45); transition: .15s;
  display: inline-flex; align-items: center;
}
.pm-hd .sub:hover { background: var(--pm-rose); color: #fff }

.pm-hd .mq { background: var(--pm-ink); border-bottom: var(--pm-bd); overflow: hidden; position: relative }
.pm-hd .mq-in { display: flex; width: max-content; animation: pm-tick 34s linear infinite }
.pm-hd .mq-in:hover { animation-play-state: paused }
.pm-hd .mq span { font: 800 14px/1 var(--pm-font-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 14px 0; display: flex; align-items: center; gap: 26px; white-space: nowrap }
.pm-hd .mq span i { font-style: normal; color: var(--pm-rose); font-size: 10px; margin: 0 26px; letter-spacing: .2em }

.pm-hd .burger {
  display: none; position: absolute; top: 14px; right: 16px; z-index: 6;
  width: 52px; height: 52px; background: var(--pm-ink); border: var(--pm-bd);
  box-shadow: 3px 3px 0 #fff; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.pm-hd .burger span { display: block; width: 22px; height: 3px; background: #fff }
.pm-hd .burger:hover { background: var(--pm-rose) }

.pm-hd .drawer { display: none; background: var(--pm-ink); border-bottom: var(--pm-bd); padding: 10px 16px 18px; margin: 0; list-style: none }
.pm-hd .drawer a { display: flex; align-items: center; min-height: 52px; font: 700 16px/1.2 var(--pm-font-body); color: #fff; border-bottom: 2px solid rgba(255,255,255,.14); padding: 0 2px }
.pm-hd .drawer a.pm-drawer-sub {
  border-bottom: 0; margin-top: 12px; justify-content: center; background: var(--pm-rose);
  border: 3px solid #fff; font: 800 13px/1 var(--pm-font-body); letter-spacing: .14em;
  text-transform: uppercase; gap: 9px;
}

/* ---------- FOOTER ---------- */
.pm-ft * { box-sizing: border-box }
.pm-ft a { text-decoration: none; color: inherit }
.pm-ft .shell { max-width: var(--pm-shell); margin: 0 auto; padding: 0 40px }
.pm-ft .zebra { height: 26px; background: var(--pm-zebra-foot) }
.pm-ft .foot { background: var(--pm-ink); padding: 52px 0 }
.pm-ft .foot .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; color: var(--pm-foot-text) }
.pm-ft .foot .wm { font-family: var(--pm-font-logo); font-weight: 400; line-height: .85; letter-spacing: .02em; display: inline-block; font-size: 60px; color: #fff }
.pm-ft .foot .tagl { font: 600 13px/1.5 var(--pm-font-body); color: var(--pm-foot-base); margin-top: 10px; max-width: 30ch }
.pm-ft .foot .col b { display: block; font: 800 11px/1 var(--pm-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pm-rose); margin-bottom: 16px }
.pm-ft .foot .col a { display: block; font: 500 14px/1 var(--pm-font-body); margin-bottom: 13px; color: var(--pm-foot-link); transition: color .15s }
.pm-ft .foot .col a:hover { color: #fff }
.pm-ft .foot .col ul { list-style: none; margin: 0; padding: 0 }

@media (max-width: 1180px) {
  .pm-hd .hero-w .wm { font-size: 74px }
  .pm-hd .top .mask  { width: 170px }
  .pm-hd .top .ill-l { width: 168px }
  .pm-ft .foot .grid { grid-template-columns: 1fr 1fr; gap: 32px }
}
@media (max-width: 1000px) {
  .pm-hd .shell, .pm-ft .shell { padding: 0 24px }
  .pm-hd .top { padding: 14px 0 26px }
  .pm-hd .hero-w .wm { font-size: 64px; text-shadow: 5px 5px 0 var(--pm-ink) }
  .pm-hd .hero-w .tagl { font-size: 15px }
  .pm-hd .top .mask, .pm-hd .top .ill-l { display: none }
  .pm-hd .chips { max-width: 600px }
  .pm-ft .foot .wm { font-size: 46px }
}
@media (max-width: 760px) {
  .pm-hd .chips { display: none }
  .pm-hd .burger { display: flex }
  .pm-hd .drawer { display: block }
  .pm-hd .top { padding: 18px 0 22px }
  .pm-hd .hero-w { padding-top: 2px }
}
@media (max-width: 620px) {
  .pm-hd .shell, .pm-ft .shell { padding: 0 16px }
  .pm-hd .hero-w .wm { font-size: 56px; text-shadow: 4px 4px 0 var(--pm-ink) }
  .pm-hd .hero-w .tagl { font-size: 14px }
  .pm-hd .chips { gap: 7px; margin-top: 14px }
  .pm-hd .chips a:not(.sub), .pm-hd .sub { font-size: 11.5px; padding: 13px 14px; border-width: 2px; min-height: 44px }
  .pm-hd .mq span { font-size: 12px; padding: 11px 0 }
  .pm-ft .zebra { height: 18px }
  .pm-ft .foot .grid { grid-template-columns: 1fr; gap: 32px }
}