@charset "UTF-8";

/* ==========================================================
   IPM TOOLS-DESIGN | marque.css
   Fiche marque : sidebar ancrée, nuancier, spécimens,
   règles d'usage, social, téléchargements.
   Utilise les tokens de style.css.
   ========================================================== */

/* Theming local de marque (surchargé par data-brand sur .marque-shell) */
.marque-shell { --b-primary: #152239; --b-accent: #e1081b; --b-accent2: #edb83f; }

.marque-shell { display: flex; align-items: flex-start; }

/* ---------- Sidebar ---------- */
.marque-side {
  position: sticky; top: 0; height: 100vh;
  flex: 0 0 250px; width: 250px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 26px 26px 22px;
  background: var(--bg);
}
.marque-side__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.marque-side__back { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); display: inline-flex; gap: 8px; align-items: center; }
.marque-side__back:hover { color: var(--ink); }
.marque-side__back .arrow { transition: transform var(--t-base); }
.marque-side__back:hover .arrow { transform: translateX(-4px); }
.marque-side__brand { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-accent); }

.marque-nav { display: flex; flex-direction: column; gap: 2px; }
.marque-nav a {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-soft); padding: 9px 0; position: relative; padding-left: 22px;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.marque-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--line-strong); transition: width var(--t-fast), background var(--t-fast); }
.marque-nav a:hover, .marque-nav a.is-active { color: var(--ink); padding-left: 26px; }
.marque-nav a:hover::before, .marque-nav a.is-active::before { width: 16px; background: var(--b-accent); }
.marque-side__foot { margin-top: auto; font-family: var(--f-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- Main ---------- */
.marque-main { flex: 1; min-width: 0; }

.marque-hero {
  padding: clamp(90px, 14vh, 150px) var(--pad-x) clamp(50px, 8vh, 90px);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.marque-hero__logo { width: 96px; height: 96px; margin-bottom: 30px; display: grid; place-items: center; }
.marque-hero__logo img { max-height: 72px; }
.marque-hero .kicker { color: var(--b-accent); }
.marque-hero h1 { font-size: clamp(40px, 6vw, 86px); line-height: 0.94; margin: 14px 0 22px; }
.marque-hero p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0; }

.marque-sec { padding: clamp(56px, 8vh, 96px) var(--pad-x); border-bottom: 1px solid var(--line); max-width: 1100px; }
.marque-sec__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-accent); margin: 0 0 14px; }
.marque-sec__title { font-size: clamp(28px, 3.6vw, 46px); margin: 0 0 14px; }
.marque-sec__text { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 64ch; margin: 0 0 22px; }
.marque-sec__text strong { color: var(--ink); font-weight: 700; }

/* ---------- Logo zone ---------- */
.logo-board {
  margin: 30px 0; padding: 60px; border: 1px solid var(--line); background: var(--bg-2);
  display: grid; place-items: center; min-height: 260px;
}
.logo-board img { max-height: 120px; }

.logo-variants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0; }
@media (max-width: 720px) { .logo-variants { grid-template-columns: repeat(2, 1fr); } }
.logo-variant { aspect-ratio: 4/3; display: grid; place-items: center; border: 1px solid var(--line); }
.logo-variant img { max-height: 44px; max-width: 70%; }
.logo-variant span { position: absolute; }
.logo-variant--light { background: #fff; }
.logo-variant--navy { background: #152239; }
.logo-variant--red { background: #e1081b; }
.logo-variant--img { background: linear-gradient(135deg, #3a3f4a, #1c2029); }

.donts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 26px 0; }
@media (max-width: 820px) { .donts { grid-template-columns: repeat(2, 1fr); } }
.dont { border: 1px solid var(--line); padding: 16px; text-align: center; }
.dont__no { color: var(--b-accent); font-family: var(--f-mono); font-weight: 700; font-size: 14px; margin-bottom: 10px; display: inline-flex; gap: 6px; align-items: center; }
.dont__txt { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--ink-soft); }

/* ---------- Couleurs ---------- */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
@media (max-width: 720px) { .swatches { grid-template-columns: 1fr; } }
.swatch { border: 1px solid var(--line); overflow: hidden; }
.swatch__chip { height: 130px; }
.swatch__body { padding: 16px 18px; }
.swatch__name { font-family: var(--f-body); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.swatch__row { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); padding: 3px 0; border-top: 1px solid var(--line); }
.swatch__row span:first-child { color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }

.accent-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
@media (max-width: 720px) { .accent-row { grid-template-columns: 1fr; } }

.gradient-demo { height: 150px; border: 1px solid var(--line); margin: 22px 0 8px; background: linear-gradient(0deg, #f50000 0%, #f50000 18%, #032f60 100%); }
.gradient-caption { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

/* ---------- Typo ---------- */
.specimen { border: 1px solid var(--line); padding: 34px 30px; margin: 24px 0; background: var(--bg-2); }
.specimen__big { font-family: "Open Sans", sans-serif; font-weight: 800; font-size: clamp(40px, 7vw, 88px); line-height: 1; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ink); }
.specimen__set { font-family: "Open Sans", sans-serif; font-size: 20px; color: var(--ink-soft); word-spacing: 2px; }
.type-roles { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.type-role { display: flex; gap: 20px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.type-role__w { font-family: "Open Sans", sans-serif; flex: 0 0 230px; color: var(--ink); }
.type-role__w--xb { font-weight: 800; } .type-role__w--b { font-weight: 700; } .type-role__w--r { font-weight: 400; }
.type-role__d { font-family: var(--f-body); font-size: 14px; color: var(--ink-soft); }
@media (max-width: 640px) { .type-role { flex-direction: column; gap: 4px; } .type-role__w { flex: none; } }

/* ---------- Composition / CTA ---------- */
.cta-demo { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.cta { border-radius: 5px; padding: 0 26px; height: 56px; display: inline-flex; align-items: center; font-family: "Open Sans", sans-serif; font-weight: 800; font-size: 15px; }
.cta--sub { background: #edb83f; color: #152239; }
.cta--gen { background: #e1081b; color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.cta-note { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.spec-list { list-style: none; padding: 0; margin: 18px 0; }
.spec-list li { font-family: var(--f-mono); font-size: 13px; color: var(--ink-soft); padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.spec-list li span:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }

/* ---------- Social ---------- */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
@media (max-width: 760px) { .social-grid { grid-template-columns: 1fr; } }
.social-card { border: 1px solid var(--line); padding: 22px; }
.social-card__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-accent); margin-bottom: 14px; }
.social-card__mock { aspect-ratio: 4/5; border-radius: 8px; background: #152239; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 16px; }
.social-card__mock--red { background: #e1081b; }
.social-card__mock--grad { background: linear-gradient(0deg, #f50000, #032f60); }
.social-card__title { font-family: "Open Sans", sans-serif; font-weight: 800; color: #fff; font-size: 18px; line-height: 1.1; }
.social-card__title .box { background: #e1081b; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.social-card__title .box--navy { background: #152239; }
.social-card__desc { font-family: var(--f-body); font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; }

/* ---------- Downloads ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
@media (max-width: 820px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
.dl-item { border: 1px solid var(--line); overflow: hidden; transition: border-color var(--t-base), transform var(--t-base); }
.dl-item:hover { border-color: var(--b-accent); transform: translateY(-4px); }
.dl-item__prev { aspect-ratio: 16/10; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.dl-item__prev img { max-height: 40px; max-width: 70%; }
.dl-item__prev--light { background: #fff; } .dl-item__prev--navy { background: #152239; } .dl-item__prev--red { background: #e1081b; }
.dl-item__body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-item__name { font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.dl-item__formats { display: flex; gap: 5px; }
.dl-item__formats span { font-family: var(--f-mono); font-size: 10px; padding: 3px 6px; border: 1px solid var(--line); color: var(--muted); }

/* ---------- Mobile sidebar ---------- */
@media (max-width: 900px) {
  .marque-shell { flex-direction: column; }
  .marque-side { position: sticky; top: 0; height: auto; width: 100%; flex: none; z-index: 50;
    border-right: 0; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 18px; padding: 14px var(--pad-x);
    background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
  .marque-side__top { margin: 0; }
  .marque-nav { flex-direction: row; gap: 14px; overflow-x: auto; flex: 1; }
  .marque-nav a { padding-left: 0; white-space: nowrap; }
  .marque-nav a::before { display: none; }
  .marque-side__foot { display: none; }
}