@charset "UTF-8";

/* ==========================================================
   IPM TOOLS-DESIGN | marque-dh.css
   Surcouche DH Les Sports+ : couleurs du site dhnet.be
   (#051F3A / #E1001A), remplace les valeurs Brandbook codées
   dans marque.css. Les valeurs Brandbook restent en note.
   ========================================================== */

.marque-shell[data-brand="dh"] { --b-primary: #051f3a; --b-accent: #e1001a; --b-accent2: #f2c93d; }
[data-theme="dark"] .marque-shell[data-brand="dh"] { --b-accent: #ff4d5e; }

[data-brand="dh"] .marque-hero__logo { width: auto; height: auto; display: flex; justify-content: flex-start; place-items: start; margin-bottom: 30px; }
[data-theme="dark"] [data-brand="dh"] .marque-hero__logo .is-dark { display: block; }
[data-brand="dh"] .dont { display: flex; flex-direction: column; align-items: center; gap: 4px; }
[data-brand="dh"] .marque-hero__logo img { height: 64px; width: auto; max-height: none; }
[data-brand="dh"] .marque-hero__logo .is-dark { display: none; }
[data-theme="dark"] [data-brand="dh"] .marque-hero__logo .is-light { display: none; }
[data-theme="dark"] [data-brand="dh"] .marque-hero__logo .is-dark { display: block; }

[data-brand="dh"] .logo-board { background: #fff; }
[data-brand="dh"] .logo-board img { max-height: none; height: 96px; width: auto; }
[data-brand="dh"] .logo-variant img { max-height: 30px; max-width: 78%; width: auto; }
[data-brand="dh"] .logo-variant--navy, [data-brand="dh"] .dl-item__prev--navy, [data-brand="dh"] .social-card__mock { background: #051f3a; }
[data-brand="dh"] .logo-variant--red, [data-brand="dh"] .dl-item__prev--red, [data-brand="dh"] .social-card__mock--red { background: #e1001a; }
[data-brand="dh"] .dl-item__prev img { max-height: 30px; width: auto; }
[data-brand="dh"] .dl-item__prev--vertical img { max-height: 64px; }
[data-brand="dh"] .social-card__mock--grad { background: linear-gradient(0deg, #f50000, #032f60); }
[data-brand="dh"] .social-card__title .box { background: #e1001a; }
[data-brand="dh"] .social-card__title .box--navy { background: #051f3a; }

/* Puces de couleur */
.dh-c-marine { background: #051f3a; } .dh-c-rouge { background: #e1001a; } .dh-c-blanc { background: #fff; border-bottom: 1px solid var(--line); }
.dh-c-pay { background: #f2c93d; } .dh-c-pay-dark { background: #f7b500; } .dh-c-pay-ink { background: #2f1e07; }
.dh-c-bb1 { background: #152239; } .dh-c-bb2 { background: #e1081b; } .dh-c-bb3 { background: #edb83f; }
.dh-c-texte { background: #262729; } .dh-c-gris { background: #686868; } .dh-c-gris-bleu { background: #d1d8dd; } .dh-c-surface { background: #f8f9fb; border-bottom: 1px solid var(--line); }

.dh-shades { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); margin: 20px 0 8px; }
.dh-shade { height: 88px; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-family: var(--f-mono); font-size: 11px; color: #fff; }
.dh-shade b { font-weight: 600; }
.dh-shade--ink { color: #051f3a; }
.dh-s1 { background: #e73347; } .dh-s2 { background: #e1001a; } .dh-s3 { background: #b40014; } .dh-s4 { background: #81000e; } .dh-s5 { background: #031222; } .dh-s6 { background: #d1d8dd; }
@media (max-width: 760px) { .dh-shades { grid-template-columns: repeat(3, 1fr); } }

.dh-note { border-left: 3px solid #e1001a; 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; }
.dh-note strong { color: var(--ink); }
.dh-note--bb { border-left-color: #edb83f; }
.dh-bb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 0; }
.dh-bb div { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }
.dh-bb i { width: 28px; height: 28px; flex: none; }
@media (max-width: 640px) { .dh-bb { grid-template-columns: 1fr; } }

[data-brand="dh"] .cta--sub { background: #f2c93d; color: #2f1e07; }
[data-brand="dh"] .cta--gen { background: #e1001a; }
.dh-cta-site { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.dh-btn { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 13px; line-height: 18px; padding: 8px 14px; border-radius: 4px; border: 0; }
.dh-btn--pay { background: #f2c93d; color: #2f1e07; }
.dh-btn--primary { background: #051f3a; color: #fff; }
.dh-btn--rouge { background: #e1001a; color: #fff; }
.dh-mt { margin-top: 44px; }
.marque-sec--last { border-bottom: 0; }
a.dl-item { display: block; color: inherit; }
[data-brand="dh"] .marque-sec__text code, [data-brand="dh"] .dh-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="dh"] .swatch__chip { display: flex; align-items: flex-end; padding: 12px 14px; }
.dh-var { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.85); }
.dh-var--ink { color: rgba(0,0,0,.6); }
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 { color: var(--b-accent); }
button.copy.is-copied { color: #2f8f4e; }

@media (max-width: 900px) { [data-brand="dh"] .marque-main { width: 100%; } }
[data-brand="dh"] .logo-board img.dh-vertical { height: 150px; }
[data-brand="dh"] .gradient-demo { background: linear-gradient(0deg, #f50000 0%, #f50000 18%, #032f60 100%); }