/* CCS — Charte graphique (page dédiée). S'appuie sur tokens.css + site.css. */

.charte { background: var(--sand-50); }

/* ---------- Navigation d'ancres ---------- */
.charte-nav { position: sticky; top: 0; z-index: 60; background: rgba(18,14,38,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
.charte-nav .inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 60px; }
.charte-nav .cn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.charte-nav .cn-brand img { width: 26px; height: auto; }
.charte-nav ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.charte-nav ul a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; transition: color var(--dur-fast); }
.charte-nav ul a:hover { color: var(--gold-400); }
@media (max-width: 820px) { .charte-nav ul { display: none; } }

/* ---------- Couverture ---------- */
.charte-cover { background: radial-gradient(circle at 32% 22%, var(--night-800), var(--night-950) 72%); color: var(--white); text-align: center; padding: var(--space-10) var(--space-5); position: relative; overflow: hidden; }
.charte-cover .cover-logo { width: 190px; height: auto; margin: 0 auto var(--space-6); }
.charte-cover .cover-word { font-family: var(--font-serif); font-size: clamp(28px,5vw,44px); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.charte-cover .cover-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-400); margin: 8px 0 var(--space-7); }
.charte-cover h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(20px,3vw,26px); color: rgba(255,255,255,0.85); margin: 0; }
.charte-cover .cover-meta { margin-top: var(--space-6); font-size: 12.5px; letter-spacing: 0.05em; color: rgba(255,255,255,0.5); }
.charte-cover .cover-watermark { position: absolute; right: -60px; bottom: -80px; width: 360px; color: var(--gold-400); opacity: 0.06; pointer-events: none; }

/* ---------- Sections ---------- */
.charte-section { padding: var(--space-9) 0; border-bottom: 1px solid var(--line); }
.charte-section:last-of-type { border-bottom: none; }
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: var(--space-6); }
.sec-num { font-family: var(--font-serif); font-style: italic; font-size: 40px; font-weight: 400; color: var(--gold-500); line-height: 1; flex: none; }
.sec-head h2 { font-family: var(--font-serif); font-size: clamp(26px,3.4vw,34px); font-weight: 500; margin: 0; }
.sec-head p { margin: 6px 0 0; color: var(--ink-600); font-size: 15px; max-width: 60ch; }
.sub-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); margin: var(--space-6) 0 var(--space-4); }

.callout { display: flex; gap: 14px; background: var(--gold-100); border-left: 3px solid var(--gold-500); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 16px 18px; font-size: 14px; color: var(--ink-900); margin-top: var(--space-6); }
.callout svg { width: 22px; height: 22px; color: var(--gold-600); flex: none; }

/* ---------- Logo ---------- */
.logo-versions { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
@media (max-width: 760px) { .logo-versions { grid-template-columns: 1fr; } }
.logo-tile { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.logo-tile .frame { aspect-ratio: 4/3; display: grid; place-items: center; padding: var(--space-5); }
.logo-tile .frame.dark { background: var(--night-950); }
.logo-tile .frame.deep { background: var(--night-900); }
.logo-tile .frame.photo { background: linear-gradient(135deg,#2b4a5e,#12303f); }
.logo-tile .tile-full { width: 58%; height: auto; }
.logo-tile .tile-flower { width: 88px; height: auto; }
.logo-tile figcaption { padding: 12px 16px; font-size: 13px; color: var(--ink-600); border-top: 1px solid var(--line); }
.logo-tile figcaption b { display: block; color: var(--ink-900); font-size: 13.5px; }
.lockup-v { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lockup-v svg { width: 62px; height: auto; }
.lockup-v .lw { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; }
.lockup-v .ls { font-size: 8px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; }
.lockup-h { display: inline-flex; align-items: center; gap: 12px; }
.lockup-h .lockup-h-flower { width: 46px; height: auto; }
.lockup-h .lw { font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; }
.lockup-h .ls { display: block; font-size: 8px; letter-spacing: 0.14em; margin-top: 2px; }
.medallion { width: 96px; height: 96px; border: 1px solid var(--gold-400); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, var(--night-800), var(--night-950) 78%); }
.medallion img { width: 58px; height: auto; }
.on-dark-text { color: var(--white); }
.on-gold-text { color: var(--night-900); }

/* Zone de protection */
.clearspace { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; background: var(--night-950); border-radius: var(--radius-lg); padding: var(--space-7); }
.clearspace .cs-box { position: relative; padding: 34px; border: 1px dashed rgba(210,182,126,0.5); border-radius: var(--radius-md); }
.clearspace .cs-box img { width: 74px; height: auto; display: block; }
.clearspace .cs-note { color: rgba(255,255,255,0.8); font-size: 14px; max-width: 34ch; }
.clearspace .cs-note b { color: var(--gold-400); }

/* Do / Don't */
.guide-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (max-width: 680px) { .guide-grid { grid-template-columns: 1fr; } }
.guide { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.guide .g-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.guide.ok .g-head { background: var(--ok-100); color: var(--ok-700); }
.guide.no .g-head { background: var(--err-100); color: var(--err-700); }
.guide ul { margin: 0; padding: 14px 18px 16px 32px; font-size: 13.5px; color: var(--ink-600); display: flex; flex-direction: column; gap: 7px; }

/* ---------- Couleurs ---------- */
.swatch-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
@media (max-width: 900px) { .swatch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .swatch-grid { grid-template-columns: 1fr; } }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.swatch .chip { height: 92px; display: flex; align-items: flex-end; padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; }
.swatch .meta { padding: 12px 14px; }
.swatch .meta b { font-size: 13.5px; }
.swatch .meta .hex { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-400); text-transform: uppercase; margin: 2px 0 6px; }
.swatch .meta .use { font-size: 12px; color: var(--ink-600); line-height: 1.45; }

/* ---------- Typographie ---------- */
.type-scale { display: flex; flex-direction: column; gap: var(--space-4); }
.type-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-5); align-items: baseline; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .type-row { grid-template-columns: 1fr; gap: 6px; } }
.type-row .t-meta { font-size: 12px; color: var(--ink-400); letter-spacing: 0.03em; }
.type-row .t-meta b { display: block; color: var(--ink-900); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; }
.specimen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 680px) { .specimen { grid-template-columns: 1fr; } }
.specimen .card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-5); background: var(--white); }
.specimen .glyphs { font-family: var(--font-serif); font-size: 26px; line-height: 1.4; color: var(--ink-900); }
.specimen .glyphs.sans { font-family: var(--font-sans); }
.specimen .card .fname { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); font-weight: 600; margin-bottom: 10px; }
.specimen .card .weights { font-size: 12.5px; color: var(--ink-600); margin-top: 10px; }

/* ---------- Icônes / motif ---------- */
.icon-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.icon-chip { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; place-items: center; background: var(--white); }
.icon-chip svg { width: 26px; height: 26px; color: var(--night-800); }

/* ---------- Composants ---------- */
.comp-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: var(--space-5); }
.badge-demo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.badge-demo::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.bd-ok { background: var(--ok-100); color: var(--ok-700); }
.bd-warn { background: var(--warn-100); color: var(--warn-700); }
.bd-info { background: var(--info-100); color: var(--info-700); }
.bd-progress { background: var(--progress-100); color: var(--progress-700); }
.bd-err { background: var(--err-100); color: var(--err-700); }

/* ---------- Ton éditorial ---------- */
.tone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 680px) { .tone-grid { grid-template-columns: 1fr; } }
.tone-col h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--space-3); }
.tone-col.say h3 { color: var(--ok-700); }
.tone-col.avoid h3 { color: var(--err-700); }
.tone-col ul { margin: 0; padding-left: 20px; color: var(--ink-600); font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.word-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.word-bank span { background: var(--sand-100); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; color: var(--ink-900); }

/* ---------- Applications ---------- */
.apps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
@media (max-width: 860px) { .apps-grid { grid-template-columns: 1fr; max-width: 420px; } }
.app-card figcaption { font-size: 12.5px; color: var(--ink-400); margin-top: 10px; text-align: center; }
.biz-card { aspect-ratio: 85/55; border-radius: var(--radius-md); background: radial-gradient(circle at 30% 25%, var(--night-800), var(--night-950) 75%); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.biz-card img { height: 68%; width: auto; }
.email-sig { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); padding: var(--space-4); display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-soft); }
.email-sig .es-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--night-950); display: grid; place-items: center; flex: none; }
.email-sig .es-mark img { width: 40px; height: auto; }
.email-sig .es-name { font-family: var(--font-serif); font-size: 16px; }
.email-sig .es-role { font-size: 11.5px; color: var(--gold-600); letter-spacing: 0.08em; text-transform: uppercase; margin: 2px 0 6px; }
.email-sig .es-contact { font-size: 12px; color: var(--ink-600); line-height: 1.5; }
.insta-post { aspect-ratio: 1; border-radius: var(--radius-md); background: radial-gradient(circle at 70% 20%, var(--night-800), var(--night-950) 72%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-5); box-shadow: var(--shadow-soft); }
.insta-post img { width: 86px; height: auto; margin-bottom: 14px; }
.insta-post .ip-h { font-family: var(--font-serif); font-style: italic; color: var(--white); font-size: 20px; line-height: 1.3; }
.insta-post .ip-s { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-400); margin-top: 12px; }

/* ---------- Téléchargements ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 10px; }
.dl-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; color: var(--ink-900); font-size: 13.5px; font-weight: 500; transition: border-color var(--dur-fast), background var(--dur-fast); }
.dl-item:hover { border-color: var(--gold-500); background: var(--sand-100); }
.dl-item .dl-ic { width: 18px; height: 18px; color: var(--gold-600); flex: none; }
.dl-item .fmt { margin-left: auto; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 2px 8px; }

.charte-foot { background: var(--night-950); color: rgba(255,255,255,0.6); text-align: center; padding: var(--space-7) var(--space-5); font-size: 13px; }
.charte-foot a { color: var(--gold-400); text-decoration: none; }