@charset "UTF-8";

/* ==========================================================
   IPM TOOLS-DESIGN | marque-moustique.css
   Surcouche Moustique de la fiche marque (marque.css).
   Domine et Funnel Sans self-hostées (licences libres OFL).
   ========================================================== */

@font-face { font-family: "Domine"; src: url("../fonts/Domine-VF.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fonts/FunnelSans-VF.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fonts/FunnelSans-Italic-VF.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

.marque-shell[data-brand="moustique"] {
  --b-primary: #000;
  --b-accent: #e30613;
  --b-accent2: #ffed00;
  --mq-title: "Domine", Georgia, serif;
  --mq-base: "Funnel Sans", Arial, "Trebuchet MS", sans-serif;
}
[data-theme="dark"] .marque-shell[data-brand="moustique"] { --b-accent: #ff4d57; }
[data-brand="moustique"] ::selection { background: #ffed00; color: #000; }

/* ---------- Hero ---------- */
.mq-hero__logo { margin-bottom: 34px; }
.mq-hero__logo img { height: 84px; width: auto; max-height: none; }
.mq-hero__bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #ffed00; }
.mq-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 0; list-style: none; }
.mq-meta li { font-family: var(--f-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.mq-meta b { color: var(--ink); font-weight: 600; }

.mq-note { border-left: 3px solid #e30613; padding: 14px 18px; background: var(--bg-2); font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 72ch; margin: 18px 0 26px; }
.mq-note--yellow { border-left-color: #ffed00; }
.mq-note strong { color: var(--ink); }
.mq-mt { margin-top: 48px; }
.marque-sec--last { border-bottom: 0; }
[data-brand="moustique"] .marque-sec__text code, [data-brand="moustique"] .mq-note code { font-family: var(--f-mono); font-size: 0.88em; padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--line); }
[data-brand="moustique"] .swatches + .marque-sec__title,
[data-brand="moustique"] .mq-note + .marque-sec__title { margin-top: 48px; }

/* ---------- Logo ---------- */
.mq-board { margin: 30px 0; padding: 60px; border: 1px solid var(--line); display: grid; place-items: center; min-height: 260px; background: #fff; }
.mq-board img { height: 130px; width: auto; }
.mq-board--noir { background: #000; }
.mq-board--jaune { background: #ffed00; }
.mq-duo { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin: 26px 0; }
@media (max-width: 720px) { .mq-duo { grid-template-columns: 1fr; } }
.mq-duo figure { margin: 0; }
.mq-duo .mq-board { margin: 0; min-height: 220px; padding: 40px; }
.mq-duo .mq-board img { height: 110px; }
.mq-duo figcaption { font-family: var(--f-mono); font-size: 11px; color: var(--muted); margin-top: 8px; letter-spacing: 0.04em; }
.mq-clear { position: relative; display: inline-block; padding: 28px; outline: 1px dashed #e30613; }
.mq-clear img { height: 96px; width: auto; }
.mq-clear__tag { position: absolute; top: -10px; left: 12px; background: #fff; padding: 0 6px; font-family: var(--f-mono); font-size: 11px; color: #e30613; }
.logo-variant img { max-height: 46px; max-width: 72%; width: auto; }
.logo-variant { position: relative; }
.logo-variant__cap { position: absolute; left: 10px; bottom: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(255,255,255,.8); }
.logo-variant--light .logo-variant__cap, .logo-variant--jaune .logo-variant__cap { color: #333; }
.logo-variant--noir { background: #000; }
.logo-variant--jaune { background: #ffed00; }
.logo-variant--photo { background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.5)), linear-gradient(135deg, #b6c9d6, #6f7f8a 50%, #2d3238); }
[data-brand="moustique"] .dont { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Couleurs ---------- */
.swatches--4 { grid-template-columns: repeat(4, 1fr); }
.swatches--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .swatches--4, .swatches--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swatches--4, .swatches--3 { grid-template-columns: 1fr; } }
.swatch__chip { position: relative; display: flex; align-items: flex-end; padding: 12px 14px; }
.swatch__chip--line { border-bottom: 1px solid var(--line); }
.swatch__var { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.85); }
.swatch__chip--light .swatch__var { color: rgba(0,0,0,.6); }
.swatch__aa { font-family: var(--f-mono); font-size: 10px; margin-top: 8px; color: var(--muted); }
button.copy { all: unset; cursor: pointer; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); border-bottom: 1px dotted var(--line-strong); }
button.copy:hover, button.copy:focus-visible { color: var(--b-accent); border-color: var(--b-accent); }
button.copy.is-copied { color: #2f8f4e; border-color: transparent; }

.shades { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); margin: 20px 0 8px; }
.shade { height: 92px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-family: var(--f-mono); font-size: 11px; color: #fff; }
.shade b { font-weight: 600; }
.shade--ink { color: #111; }
@media (max-width: 760px) { .shades { grid-template-columns: repeat(3, 1fr); } .shade { height: 74px; } }

.c-rouge { background: #e30613; } .c-jaune { background: #ffed00; } .c-noir { background: #000; } .c-blanc { background: #fff; }
.c-gris { background: #666; } .c-gris-clair { background: #b3b3b3; } .c-ligne { background: #e3e0e0; } .c-surface { background: #f2f2f2; }
.s-r1 { background: #ff1010; } .s-r2 { background: #fa3542; } .s-r3 { background: #e30613; } .s-r4 { background: #c40511; } .s-r5 { background: #92040d; }
.s-j1 { background: #fff02d; } .s-j2 { background: #ffed00; } .s-j3 { background: #e0d000; }
.a-dc { background: #dc3832; } .a-fy { background: #fff14b; } .a-t { background: #263238; } .a-x { background: #546e7a; } .a-l { background: #007bf8; } .a-lh { background: #0056b3; }

/* ---------- Rubriques ---------- */
.mq-rubs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 26px 0; }
@media (max-width: 980px) { .mq-rubs { grid-template-columns: repeat(2, 1fr); } }
.mq-rub { border: 1px solid var(--line); overflow: hidden; }
.mq-rub__chip { height: 92px; position: relative; }
.mq-rub__body { padding: 12px 14px; }
.mq-rub__name { font-family: var(--mq-title); font-weight: 700; font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.mq-rub__sub { font-family: var(--mq-base); font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.35; }
.r-epoque { --rub: #f50000; } .r-culture { --rub: #007fff; } .r-ecrans { --rub: #ff7f00; } .r-sortir { --rub: #46c846; } .r-dossiers { --rub: #ffed00; }
.mq-rub__chip, .mq-tag::before { background: var(--rub); }

.mq-tag { position: relative; display: inline-block; background: #000; color: #fff; font-family: var(--mq-base); font-size: 12px; line-height: 20px; padding: 0 8px 0 13px; }
.mq-tag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.mq-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.mq-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.mq-pill { font-family: var(--mq-base); font-weight: 600; font-size: 17px; line-height: 20px; padding: 4px 12px; border-radius: 9999px; color: #000; background: transparent; }
.mq-pill--dossier { background: #ffed00; }
.mq-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px; border: 1px solid var(--line); background: #fff; border-top: 4px solid #ffed00; }

/* ---------- Typographie ---------- */
.specimen--domine .specimen__big { font-family: var(--mq-title); font-weight: 700; letter-spacing: -0.01em; }
.specimen--domine .specimen__set { font-family: var(--mq-title); font-weight: 600; }
.specimen--funnel .specimen__big { font-family: var(--mq-base); font-weight: 700; letter-spacing: -0.02em; }
.specimen--funnel .specimen__set { font-family: var(--mq-base); font-weight: 400; }
.specimen__meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.type-role__w { flex: 0 0 260px; font-size: 20px; }
.tw-d7 { font-family: var(--mq-title); font-weight: 700; } .tw-d6 { font-family: var(--mq-title); font-weight: 600; }
.tw-f7 { font-family: var(--mq-base); font-weight: 700; } .tw-f6 { font-family: var(--mq-base); font-weight: 600; }
.tw-f5 { font-family: var(--mq-base); font-weight: 500; } .tw-f4 { font-family: var(--mq-base); font-weight: 400; }

.scale { margin: 26px 0; border-top: 1px solid var(--line); }
.scale__group { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-accent); padding: 22px 0 6px; }
.scale__row { display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.scale__sample { color: var(--ink); overflow-wrap: anywhere; }
.scale__spec { font-family: var(--f-mono); font-size: 11px; color: var(--muted); line-height: 1.5; }
.scale__spec b { display: block; color: var(--ink-soft); font-weight: 600; font-size: 12px; }
@media (max-width: 640px) { .scale__row { grid-template-columns: 1fr; gap: 6px; } }
.s-tag { font-family: var(--mq-base); font-size: 16px; color: #e30613; }
.s-h1 { font-family: var(--mq-title); font-weight: 700; font-size: 45px; line-height: 52px; }
.s-chapo { font-family: var(--mq-base); font-weight: 400; font-size: 25px; line-height: 30px; }
.s-date { font-family: var(--mq-base); font-size: 13px; line-height: 16px; color: var(--muted); }
.s-text { font-family: var(--mq-base); font-weight: 400; font-size: 25px; line-height: 30px; }
.s-h2 { font-family: var(--mq-title); font-weight: 700; font-size: 35px; line-height: 1.3; }
.s-quote { font-family: var(--mq-title); font-weight: 700; font-style: italic; font-size: 25px; line-height: 30px; }
.s-qsig { font-family: var(--mq-base); font-weight: 500; font-size: 18px; line-height: 22px; color: #e30613; }
.s-cap { font-family: var(--mq-base); font-style: italic; font-size: 12px; line-height: 15px; }
.s-page { font-family: var(--mq-title); font-weight: 700; font-size: 36.8px; line-height: 42px; }
.s-chain { font-family: var(--mq-title); font-weight: 700; font-size: 30px; line-height: 36px; }
.s-teaser { font-family: var(--mq-title); font-weight: 600; font-size: 20px; line-height: 24px; }
.s-desc { font-family: var(--mq-base); font-size: 14px; line-height: 19px; }
.s-box { font-family: var(--mq-base); font-weight: 700; font-size: 20px; line-height: 22px; color: #e30613; }
.s-top { font-family: var(--mq-base); font-weight: 600; font-size: 80px; line-height: 1; letter-spacing: -0.75rem; }
[data-theme="dark"] .s-tag, [data-theme="dark"] .s-qsig, [data-theme="dark"] .s-box { color: #ff4d57; }

/* ---------- Composants ---------- */
.comp-board { border: 1px solid var(--line); background: #fff; color: #000; padding: 30px; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mq-btn { font-family: var(--mq-base); font-weight: 500; font-size: 16px; line-height: 1; padding: 0.6rem 1rem; border-radius: 0.25rem; border: 1px solid #b3b3b3; background: #fff; color: #000; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1); }
.mq-btn--abo { background: #ffed00; border-color: #ffed00; font-weight: 600; font-size: 17px; border-radius: 9999px; padding: .65rem 1.3rem; }
.mq-btn--abo:hover { background: #e0d000; border-color: #e0d000; }
.mq-btn--primary { background: #000; border-color: #000; color: #fff; box-shadow: 0 1px 1px 0 rgba(0,0,0,.22), 0 3px 4px 0 hsla(0,0%,40%,.21); }
.mq-btn--primary:hover { background: #111; }
.mq-btn--rouge { background: #e30613; border-color: #e30613; color: #fff; }
.mq-btn--rouge:hover { background: #c40511; border-color: #c40511; }
.mq-btn--off { background: #e1e4e8; border-color: #e1e4e8; color: #a6aebc; cursor: not-allowed; }
.mq-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(227,6,19,.4); }
.mq-gift { font-family: var(--mq-base); font-size: 16px; line-height: 1; padding: .3rem .8rem; border-radius: 9999px; background: #e0d000; color: #000; }

.mq-sep { display: flex; align-items: center; gap: 20px; margin: 30px 0 18px; }
.mq-sep::before, .mq-sep::after { content: ""; flex: 1; height: 2px; background: rgba(0,0,0,.4); }
[data-theme="dark"] .mq-sep::before, [data-theme="dark"] .mq-sep::after { background: var(--line-strong); }
.mq-sep span { font-family: var(--mq-title); font-weight: 700; font-size: 25px; color: var(--ink); }

.mq-teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 10px 0 22px; padding: 22px; background: #fff; border: 1px solid var(--line); color: #000; }
@media (max-width: 760px) { .mq-teasers { grid-template-columns: 1fr; } }
.mq-teaser__img { aspect-ratio: 3/2; margin-bottom: 10px; }
.mq-teaser__img--1 { background: linear-gradient(140deg, #f2b8a8, #7a3b33); }
.mq-teaser__img--2 { background: linear-gradient(140deg, #9ec7ff, #12407a); }
.mq-teaser__img--3 { background: linear-gradient(140deg, #b6e8b6, #2c6b2c); }
.mq-teaser__title { font-family: var(--mq-title); font-weight: 600; font-size: 20px; line-height: 24px; margin: 8px 0 0; }
.mq-teaser__title .bzz { display: inline-block; width: 18px; height: 16px; vertical-align: -1px; margin-right: 4px; background: url("../img/moustique-insecte.svg") center/contain no-repeat; }

.mq-quote { margin: 22px 0; padding: 26px 30px; border: 1px solid var(--line); background: #fff; color: #000; display: grid; grid-template-columns: 60px 1fr; gap: 16px; }
.mq-quote__mark { font-family: var(--mq-title); font-weight: 700; font-size: 80px; line-height: .8; color: #000; }
.mq-quote p { font-family: var(--mq-title); font-weight: 700; font-size: 22px; line-height: 1.4; margin: 0 0 10px; }
.mq-quote cite { font-family: var(--mq-base); font-weight: 500; font-style: normal; font-size: 18px; color: #000; display: block; text-align: right; }
.mq-readalso { margin: 22px 0; background: #f2f2f2; padding: 12px 18px; border-left: 5px solid #e30613; color: #000; max-width: 460px; }
.mq-readalso b { font-family: var(--mq-base); font-weight: 700; font-size: 18px; display: block; }
.mq-readalso span { font-family: var(--mq-base); font-size: 18px; }

/* ---------- Dev ---------- */
.code { position: relative; border: 1px solid var(--line); background: #000; color: #f5f5f5; margin: 22px 0; }
.code pre { margin: 0; padding: 22px; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.65; }
.code .k { color: #ffed00; } .code .v { color: #ff6b73; } .code .c { color: #8a8a8a; }
.code__copy { position: absolute; top: 10px; right: 10px; font-family: var(--f-mono); font-size: 11px; color: #f5f5f5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 5px 10px; cursor: pointer; }
.code__copy:hover { background: #ffed00; color: #000; border-color: #ffed00; }
[data-brand="moustique"] .dl-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { [data-brand="moustique"] .dl-grid { grid-template-columns: repeat(2, 1fr); } }
.dl-item__prev--white { background: #fff; } .dl-item__prev--jaune { background: #ffed00; }
.dl-item__prev--code { background: #000; color: #ffed00; font-family: var(--f-mono); font-size: 22px; font-weight: 600; }
.dl-item__prev img { width: auto; max-height: 48px; }
a.dl-item { display: block; color: inherit; }

@media (max-width: 900px) {
  [data-brand="moustique"] .marque-main { width: 100%; }
  [data-brand="moustique"] .spec-list li { flex-wrap: wrap; gap: 4px 20px; }
  [data-brand="moustique"] .spec-list li span:last-child { overflow-wrap: anywhere; }
}

/* ---------- Easter egg : bzzz ---------- */
.mq-fly { border: 0; padding: 0; background-color: transparent; appearance: none; position: fixed; left: 0; top: 0; width: 64px; height: 58px; z-index: 9000; pointer-events: auto; cursor: pointer; background: url("../img/moustique-insecte.svg") center/contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); will-change: transform; }
.mq-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 9001; background: #000; color: #fff; font-family: "Funnel Sans", Arial, sans-serif; font-size: 15px; line-height: 1.45; padding: 14px 18px 14px 22px; max-width: min(460px, calc(100vw - 32px)); border-left: 5px solid #ffed00; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.mq-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.mq-toast b { font-family: "Domine", Georgia, serif; color: #ffed00; }
@media (prefers-reduced-motion: reduce) { .mq-toast { transition: none; } }