/* ============================================================
   HEXIS DAM — Mode charte (?mode=charte)
   ------------------------------------------------------------
   Écran PUBLIC de la charte de marque, hébergé dans index.php sur
   le modèle du mode catalogue : même front, même session, même
   audience.

   Rendu 100 % server-side, classe `is-charte` posée sur le <body>
   PAR LE SERVEUR : la page se lit sans JavaScript. Ce fichier n'est
   d'ailleurs chargé qu'en mode charte — comme les deux familles
   Google Fonts et les requêtes du bloc. Le mode se prend par un
   rechargement, jamais par une bascule côté client.

   (Cette feuille a un temps prétendu le contraire alors que la
   classe venait du JS : la page était invisible sans lui.)

   Les valeurs de marque ne sont PAS écrites ici : elles arrivent
   en variables --hx-* injectées par brand_css_vars() dans le
   <head>. Un hexadécimal recopié dans ce fichier redeviendrait la
   seconde vérité que le registre existe pour supprimer.
   ============================================================ */

#dam-charte {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px var(--space-lg, 24px) 96px;
}

/* ── En-tête ─────────────────────────────────────────────── */
.chr-lede { margin-bottom: 56px; }
.chr-stripes {
    height: 6px; width: 148px; margin-bottom: 20px;
    background: repeating-linear-gradient(115deg,
        var(--hx-red) 0 4px, transparent 4px 9px);
}
.chr-lede h1 {
    font-family: var(--hx-font-display);
    font-size: clamp(38px, 6.5vw, 60px);
    text-transform: uppercase;
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.005em;
    margin: 0;
    color: var(--text);
}
.chr-lede h1 em { font-style: normal; color: var(--hx-red); }
.chr-lede p {
    max-width: 62ch; margin: 16px 0 0;
    color: var(--text-secondary); font-size: 15px; line-height: 1.6;
}

/* ── Section ─────────────────────────────────────────────── */
.chr-sec { margin-bottom: 56px; scroll-margin-top: 84px; }
.chr-sec__head {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.chr-sec__n {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 500; letter-spacing: .04em;
    color: var(--hx-red);
}
.chr-sec__head h2 {
    font-family: var(--hx-font-display);
    font-size: 26px; text-transform: uppercase; font-weight: 600;
    letter-spacing: .005em; margin: 0; color: var(--text);
}
.chr-sec__sub { margin-left: auto; font-size: 13.5px; color: var(--text-muted); }

/* ── Bandeau du document de référence ────────────────────── */
.chr-ref {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 16px 20px;
    margin-bottom: 56px;
}
.chr-ref__doc {
    width: 42px; height: 54px; flex: none; border-radius: 3px;
    background: var(--bg-input); border: 1px solid var(--border);
    position: relative; overflow: hidden;
}
.chr-ref__doc::before {
    content: ""; position: absolute; inset: 0 0 62% 0;
    background: var(--hx-red); opacity: .85;
}
.chr-ref__body { flex: 1; min-width: 240px; font-size: 13.5px; }
.chr-ref__body strong { color: var(--text); font-weight: 600; }
.chr-ref__body p { margin: 4px 0 0; color: var(--text-secondary); line-height: 1.5; }

/* ── Logo ────────────────────────────────────────────────── */
.chr-logos {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
.chr-logo {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); overflow: hidden;
    display: flex; flex-direction: column;
}
.chr-logo__stage {
    height: 116px; display: grid; place-items: center;
    position: relative; padding: 14px;
    background: #FFFFFF;   /* fond de référence de la charte, indépendant du thème */
}
.chr-logo__stage img {
    max-width: 100%; max-height: 88px;
    width: auto; height: auto; object-fit: contain;
}
.chr-logo__meta {
    padding: 11px 13px 13px; border-top: 1px solid var(--border-light, var(--border));
    display: grid; gap: 9px;
}
.chr-logo__name {
    font-size: 13.5px; font-weight: 600; color: var(--text);
    line-height: 1.3;
}
.chr-fmts { display: flex; gap: 4px; flex-wrap: wrap; }
.chr-fmt {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px;
    background: var(--bg-input); color: var(--text-secondary);
}
/* Formats vectoriels : le seul détail qui dit si la charte peut vraiment servir */
.chr-fmt--vec {
    background: color-mix(in srgb, var(--hx-red) 10%, transparent);
    color: var(--hx-red); font-weight: 500;
}
.chr-logo__acts { display: flex; gap: 6px; }
.chr-logo__acts .btn { flex: 1; justify-content: center; }

.chr-empty {
    border: 1px dashed var(--border); border-radius: var(--radius-md, 12px);
    padding: 26px 22px; text-align: center;
    color: var(--text-muted); font-size: 13.5px; line-height: 1.55;
}

/* ── Règles du logo ──────────────────────────────────────── */
.chr-rules {
    display: grid; gap: 12px; margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.chr-rule {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px); padding: 15px 17px;
    display: grid; gap: 5px;
}
.chr-rule__k {
    font-family: var(--hx-font-display); font-size: 30px; font-weight: 700;
    line-height: 1; color: var(--hx-red);
}
.chr-rule__l { font-size: 13.5px; font-weight: 600; color: var(--text); }
.chr-rule__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

/* ── Couleurs ────────────────────────────────────────────── */
.chr-swatches {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.chr-sw {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); overflow: hidden;
}
.chr-sw__chip { height: 92px; position: relative; }
.chr-sw__role {
    position: absolute; left: 13px; bottom: 10px;
    font-family: var(--hx-font-display); text-transform: uppercase;
    letter-spacing: .1em; font-size: 11px; font-weight: 600;
}
.chr-sw__body { padding: 13px 15px 15px; }
.chr-sw__name { font-size: 14px; font-weight: 600; margin-bottom: 9px; color: var(--text); }
.chr-sw table { width: 100%; border-collapse: collapse; }
.chr-sw td { padding: 3.5px 0; vertical-align: baseline; }
.chr-sw td:first-child {
    width: 76px; font-family: var(--hx-font-display);
    text-transform: uppercase; letter-spacing: .07em;
    font-size: 11px; font-weight: 500; color: var(--text-muted);
}
.chr-copy {
    font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-variant-numeric: tabular-nums;
    background: none; border: 0; cursor: pointer;
    padding: 1px 5px; margin-left: -5px; border-radius: 4px;
    color: var(--text); text-align: left;
}
.chr-copy:hover { background: var(--bg-hover); }
.chr-copy.is-copied { background: var(--hx-red); color: #fff; }
.chr-sw__use { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }

/* ── Typographies ────────────────────────────────────────── */
.chr-types {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(298px, 1fr));
}
.chr-type {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 18px 20px 20px;
}
.chr-type__hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.chr-type__nm {
    font-family: var(--hx-font-display); font-size: 20px;
    text-transform: uppercase; letter-spacing: .02em; font-weight: 600; color: var(--text);
}
.chr-type__use {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
}
.chr-spec { line-height: 1.05; color: var(--text); }
.chr-spec--display { font-family: var(--hx-font-display); font-size: 40px; font-weight: 600; }
.chr-spec--body    { font-family: var(--hx-font-body); font-size: 26px; font-weight: 500; letter-spacing: -.015em; }
.chr-type__glyphs {
    margin-top: 12px; font-size: 13px; color: var(--text-secondary);
    line-height: 1.5; word-break: break-all;
}
.chr-type__note {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border-light, var(--border));
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.chr-type__note strong { color: var(--text); }

/* ── Interdits ───────────────────────────────────────────── */
.chr-dont {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
}
.chr-dont figure { margin: 0; }
.chr-dont__box {
    position: relative; height: 92px; overflow: hidden;
    border-radius: var(--radius-sm, 10px);
    border: 1px solid var(--border);
    background: #FFFFFF;
    display: grid; place-items: center; padding: 14px;
}
.chr-dont__box img { max-width: 78%; max-height: 54px; object-fit: contain; }
/* La barre : l'interdit doit se voir avant qu'on lise la légende */
.chr-dont__box::after {
    content: ""; position: absolute; left: -12%; right: -12%; top: 50%;
    height: 2px; background: var(--hx-red); transform: rotate(-19deg);
}
.chr-dont figcaption {
    margin-top: 8px; font-size: 12.5px; line-height: 1.35;
    color: var(--text-secondary);
}
.chr-dont .sq-x    img { transform: scaleX(1.5); }
.chr-dont .sq-y    img { transform: scaleY(1.55); }
.chr-dont .ital    img { transform: skewX(-14deg); }
.chr-dont .recolor img { filter: hue-rotate(115deg) saturate(1.5); }
.chr-dont .busy { background: linear-gradient(115deg, #C9752A 0%, #B4356B 55%, #2E5FA3 100%); }
.chr-dont .baseline { flex-direction: column; }
.chr-dont .baseline::before {
    content: "CREATING MEDIA";
    position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
    font-size: 8.5px; letter-spacing: .28em; color: var(--hx-grey);
}
.chr-dont .baseline img { max-height: 40px; margin-bottom: 12px; }

/* ── Divisions ───────────────────────────────────────────── */
.chr-divs {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
}
.chr-div {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px); padding: 15px 17px;
    display: grid; gap: 7px;
}
.chr-div__lbl {
    font-family: var(--hx-font-display); text-transform: uppercase;
    letter-spacing: .1em; font-size: 14px; font-weight: 500;
    color: var(--text-secondary);
}
.chr-div__lbl i { font-style: normal; color: var(--hx-red); }
.chr-div__hex {
    display: flex; align-items: center; gap: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; color: var(--text-muted);
}
.chr-dot {
    width: 11px; height: 11px; border-radius: 3px; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
/* Écart registre ↔ base : signalé, jamais masqué (cf. en-tête de brand.php) */
.chr-div__drift {
    font-size: 12px; line-height: 1.45;
    color: var(--hx-red);
}

/* ── Sortie ──────────────────────────────────────────────── */
.chr-exit { margin-top: 8px; }

@media (max-width: 640px) {
    #dam-charte { padding-top: 28px; }
    .chr-sec { margin-bottom: 44px; }
}

/* ── Crédit sur une carte de logo ────────────────────────── */
.chr-credit {
    display: grid; gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light, var(--border));
}
.chr-credit__val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; line-height: 1.4;
    color: var(--text-secondary);
    text-align: left; white-space: normal;
}
.chr-credit__by { font-size: 11.5px; color: var(--text-muted); }

/* ── Droits & crédits ────────────────────────────────────── */
.chr-intro,
.chr-where {
    max-width: 68ch; font-size: 14px; line-height: 1.6;
    color: var(--text-secondary);
}
.chr-intro { margin: 0 0 22px; }
.chr-where { margin: 20px 0 0; }
.chr-intro strong,
.chr-where em { color: var(--text); font-style: normal; font-weight: 600; }

.chr-credits {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.chr-creditrule {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm, 10px); padding: 15px 17px;
    display: grid; gap: 6px;
    border-left: 2px solid var(--hx-grey-50);
}
.chr-creditrule__l { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.chr-creditrule__d { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
/* Une règle qui signale un TROU du modèle, pas une consigne à appliquer :
   la distinguer évite de faire passer un manque pour une procédure. */
.chr-creditrule.is-gap { border-left-color: var(--hx-red); }
.chr-creditrule.is-gap .chr-creditrule__l { color: var(--hx-red); }

/* ── Sommaire ────────────────────────────────────────────────
   Deux formes pour un seul balisage : rangée de puces défilante
   en mobile, rail collant au-delà de 1000 px. Le <nav> reste au
   même endroit dans le flux — pas de duplication de markup, donc
   pas de risque qu'une des deux versions prenne du retard. */
.chr-nav {
    display: flex; gap: 6px; overflow-x: auto;
    margin: 0 0 28px; padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.chr-nav::-webkit-scrollbar { display: none; }
.chr-nav a {
    flex: none; text-decoration: none; white-space: nowrap;
    font-size: 13px; font-weight: 500;
    padding: 6px 13px; border-radius: 999px;
    background: var(--bg-input); color: var(--text-secondary);
    border: 1px solid transparent;
}
.chr-nav a:hover { color: var(--text); background: var(--bg-hover); }
.chr-nav a[aria-current="true"] {
    background: color-mix(in srgb, var(--hx-red) 10%, transparent);
    color: var(--hx-red); border-color: color-mix(in srgb, var(--hx-red) 26%, transparent);
}

@media (min-width: 1000px) {
    /* Le rail sort du flux : la colonne de contenu reste centrée sur
       la page, elle ne se décale pas selon la présence du sommaire. */
    #dam-charte { position: relative; padding-left: 216px; }
    .chr-nav {
        position: fixed; top: 118px; left: max(24px, calc(50% - 590px));
        width: 176px; margin: 0; padding: 0;
        flex-direction: column; gap: 1px; overflow: visible;
    }
    .chr-nav a {
        border-radius: 6px; padding: 6px 11px;
        border: 0; border-left: 2px solid transparent;
        background: none; font-size: 13.5px;
    }
    .chr-nav a[aria-current="true"] {
        border-left-color: var(--hx-red);
        background: color-mix(in srgb, var(--hx-red) 8%, transparent);
    }
}
@media (min-width: 1000px) and (max-width: 1240px) {
    #dam-charte { padding-left: 200px; }
    .chr-nav { left: 24px; }
}

/* ── Logos produits ──────────────────────────────────────── */
.chr-logos--compact { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.chr-logos--compact .chr-logo__stage { height: 92px; }
.chr-logos--compact .chr-logo__stage img { max-height: 64px; }

.chr-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 18px; text-decoration: none;
    font-size: 13.5px; font-weight: 500; color: var(--hx-red);
    padding: 8px 14px; border-radius: var(--radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--hx-red) 26%, transparent);
}
.chr-more:hover { background: color-mix(in srgb, var(--hx-red) 7%, transparent); }
.chr-more i { width: 15px; height: 15px; }

/* ── Pont vers le nuancier ───────────────────────────────── */
.chr-sw__link {
    display: flex; align-items: center; gap: 7px;
    margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--border-light, var(--border));
    text-decoration: none; font-size: 12.5px;
    color: var(--text-secondary);
}
.chr-sw__link strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--hx-red);
}
.chr-sw__link:hover { color: var(--text); }
.chr-sw__link i { width: 14px; height: 14px; flex: none; color: var(--hx-red); }

/* ── Contact ─────────────────────────────────────────────── */
.chr-contact {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px); padding: 22px 24px;
    display: grid; gap: 14px; justify-items: start; max-width: 640px;
}
.chr-contact p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.chr-contact__note { font-size: 12.5px; color: var(--text-muted); }