/* Page marque (/brand, /fr/marque) : logos, couleurs, typographie, règles d'usage. Chargée après v10.css. */

/* ─── Hero : le logo en grand ───────────────────── */
.mk-vitrine{margin:0;display:grid;place-items:center;aspect-ratio:4/3;border-radius:24px;border:1px solid var(--line-d);
  background:radial-gradient(120% 90% at 50% 0,rgba(71,154,243,.18),transparent 60%),rgba(255,255,255,.03)}
.mk-vitrine img{width:min(72%,420px);height:auto}

/* ─── Logos ─────────────────────────────────────── */
.mk-groupe + .mk-groupe{margin-top:clamp(40px,5vw,64px)}
.mk-groupe > h3{margin:0 0 6px}
.mk-groupe > p{margin:0 0 20px;color:var(--ink-dim);max-width:60ch}
.mk-logos{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.mk-logo{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line-l)}
.mk-scene{display:grid;place-items:center;aspect-ratio:16/9;padding:28px;background:#f5fbff}
.mk-scene--sombre{background:#0d0f20}
.mk-scene img{max-width:78%;max-height:64%;width:auto;height:auto}
.mk-scene--vertical img{max-height:72%}
.mk-scene--symbole img{max-height:50%}
.mk-scene--icone{background:#e8f0fa}
.mk-scene--icone img{max-height:66%;border-radius:18%}
.mk-logo__pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 18px;border-top:1px solid var(--line-l)}
.mk-logo__pied b{font-size:14px;color:#0a0c18}
.mk-logo__pied small{display:block;font-size:12.5px;color:var(--ink-dim)}
.mk-liens{display:flex;gap:6px}
.mk-liens a,.mk-liens button,.mk-copie{font:600 12px/1 var(--sans);letter-spacing:.02em;padding:8px 11px;border-radius:999px;border:1px solid var(--line-l);background:#fff;color:#0a0c18;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.mk-liens a:hover,.mk-liens button:hover{border-color:rgba(47,127,220,.45);color:var(--blue-d)}
.mk-copie.est-copie,.mk-liens button.est-copie{background:var(--blue-d);border-color:var(--blue-d);color:#fff}

/* ─── Couleurs ──────────────────────────────────── */
.mk-couleurs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mk-couleurs--primaires{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-bottom:16px}
.mk-coul{border-radius:20px;overflow:hidden;border:1px solid var(--line-d);background:rgba(255,255,255,.04)}
.mk-coul__nuance{height:120px;border-bottom:1px solid var(--line-d)}
.mk-couleurs--primaires .mk-coul__nuance{height:170px}
.mk-coul__corps{padding:16px 18px 18px}
.mk-coul__corps b{display:block;font-size:16px}
.mk-coul__corps p{margin:4px 0 14px;font-size:13.5px;line-height:1.45;color:var(--dim)}
.mk-valeur{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line-d);font-size:13px}
.mk-valeur span{color:var(--dim-2);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;min-width:3.5em}
.mk-valeur code{flex:1;font:500 13.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx)}
.mk-valeur .mk-copie{background:transparent;border-color:var(--line-d);color:var(--tx);padding:6px 10px}
.mk-valeur .mk-copie:hover{border-color:rgba(255,255,255,.5)}
.mk-degrade{margin-top:16px;border-radius:20px;overflow:hidden;border:1px solid var(--line-d)}
.mk-degrade__barre{height:96px;background:linear-gradient(120deg,#2F7FDC 0%,#479AF3 45%,#5AD1E6 100%)}
.mk-degrade .mk-valeur{padding:12px 18px;border-top:0}

/* ─── Typographie ───────────────────────────────── */
.mk-typo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.mk-specimen{margin:0;border-radius:24px;background:#fff;border:1px solid var(--line-l);padding:clamp(28px,4vw,48px);color:#0a0c18}
.mk-specimen__aa{display:block;font-size:clamp(96px,12vw,168px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.mk-specimen__alpha{display:block;margin-top:20px;font-size:15px;line-height:1.7;color:var(--ink-dim);word-break:break-word}
.mk-graisses{list-style:none;margin:0 0 24px;padding:0}
.mk-graisses li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-l);font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em}
.mk-graisses small{font-size:12px;letter-spacing:.04em;color:var(--ink-dim);font-weight:500}
.mk-note{margin:20px 0 0;font-size:14px;color:var(--ink-dim);max-width:58ch}

/* ─── Règles d'usage ────────────────────────────── */
.mk-regles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin-bottom:16px}
.mk-regle{border-radius:20px;border:1px solid var(--line-d);background:rgba(255,255,255,.04);padding:22px}
.mk-regle h3{font-size:18px;margin:16px 0 6px}
.mk-regle p{margin:0;font-size:14px;color:var(--dim)}
.mk-zone{display:grid;place-items:center;aspect-ratio:16/8;border-radius:14px;background:#0d0f20;border:1px solid var(--line-d)}
.mk-zone__cadre{position:relative;padding:22px;outline:1.5px dashed rgba(140,194,255,.6);outline-offset:0}
.mk-zone__cadre img{display:block;width:clamp(150px,22vw,220px);height:auto}
.mk-zone__cadre i{position:absolute;width:22px;height:22px;border:1px solid rgba(140,194,255,.6);background:rgba(71,154,243,.18);border-radius:3px}
.mk-zone__cadre i:nth-child(1){top:0;left:0}.mk-zone__cadre i:nth-child(2){top:0;right:0}
.mk-zone__cadre i:nth-child(3){bottom:0;left:0}.mk-zone__cadre i:nth-child(4){bottom:0;right:0}
.mk-tailles{display:flex;align-items:center;justify-content:center;gap:36px;aspect-ratio:16/8;border-radius:14px;background:#0d0f20;border:1px solid var(--line-d);padding:24px}
.mk-tailles figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12px;color:var(--dim)}
.mk-interdits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.mk-interdit{margin:0;border-radius:16px;border:1px solid var(--line-d);background:rgba(255,255,255,.04);overflow:hidden}
.mk-interdit > div{position:relative;display:grid;place-items:center;aspect-ratio:3/2;background:#f5fbff;overflow:hidden}
.mk-interdit > div::after{content:"";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:#d8443c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat}
.mk-interdit img{width:62%;height:auto}
.mk-interdit figcaption{padding:12px 14px;font-size:13px;line-height:1.4;color:var(--dim)}
.mk-x-deforme img{transform:scaleX(1.45) scaleY(.8)}
.mk-x-couleur img{filter:invert(37%) sepia(83%) saturate(1200%) hue-rotate(-30deg)}
.mk-x-effet img{filter:drop-shadow(4px 5px 0 #479af3) drop-shadow(0 0 10px rgba(0,0,0,.45))}
.mk-x-rotation img{transform:rotate(-14deg)}
.mk-x-contraste > div{background:#5a8fd6}
.mk-x-recompose b{font:700 24px/1 Arial,sans-serif;letter-spacing:.02em;color:#0d0f20;display:flex;align-items:center;gap:8px}
.mk-x-recompose b img{width:28px}

/* ─── Outils et adresses ────────────────────────── */
.mk-adresses{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mk-adresses li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line-l)}
.mk-adresses span{font-size:13.5px;color:var(--ink-dim);min-width:12em}
.mk-adresses code{flex:1;font:500 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#0a0c18;word-break:break-all}
.mk-code{margin:0;padding:20px 22px;border-radius:16px;background:#0d0f20;color:#dbe8ff;font:500 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
.mk-code b{color:#8cc2ff;font-weight:500}

@media (max-width:860px){
  .mk-typo{grid-template-columns:1fr}
  .mk-adresses span{min-width:0;width:100%}
}
@media (max-width:560px){
  .mk-logo__pied{flex-direction:column;align-items:flex-start}
  .mk-tailles{gap:20px}
}