import { Link } from 'react-router-dom'
import Logo from '../components/Logo'

// Charte graphique — standalone reference document for the designer & developer.
// Faithful port of the original print-friendly A4 layout (max-width 960px).

const card = { border: '1px solid rgba(10,37,64,.1)', borderRadius: 14 }
const mono = { fontFamily: "'JetBrains Mono',monospace" }

function SectionHead({ num, title }) {
  return (
    <>
      <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: '.1em', color: '#0E7CC7' }}>{num}</div>
      <h2 style={{ fontWeight: 800, fontSize: 30, letterSpacing: '-.02em', color: '#0A2540', margin: '6px 0 4px' }}>{title}</h2>
      <div style={{ width: 54, height: 3, background: '#D4A017', marginBottom: 28 }} />
    </>
  )
}

function Swatch({ h, name, hex, note, big }) {
  return (
    <div style={{ ...card, overflow: 'hidden' }}>
      <div style={{ height: big ? 96 : 60, background: h, borderBottom: h === '#F4F6FA' ? '1px solid rgba(10,37,64,.08)' : undefined }} />
      <div style={{ padding: big ? 16 : 12 }}>
        <div style={{ fontWeight: 700, fontSize: big ? 15 : 13, color: '#0A2540' }}>{name}</div>
        <div style={{ ...mono, fontSize: big ? 13 : 12, color: big ? '#0E7CC7' : '#5A6A7E', marginTop: big ? 3 : 2 }}>{hex}</div>
        {note && <div style={{ fontSize: big ? 12 : 11, color: big ? '#5A6A7E' : '#8294AA', marginTop: big ? 8 : 6, lineHeight: 1.45 }}>{note}</div>}
      </div>
    </div>
  )
}

const typeRows = [
  ['Titre hero (H1)', '60 px', '800', '1.05', '-0.025em'],
  ['Titre de page', '54 px', '800', '1.06', '-0.025em'],
  ['Titre de section (H2)', '40–46 px', '800', '1.1', '-0.02em'],
  ['Sous-titre (H3)', '20–28 px', '700', '1.2', '-0.01em'],
  ['Accroche (lead)', '19–20 px', '400', '1.6', '—'],
  ['Corps de texte', '16–18 px', '400', '1.65', '—'],
  ['Surtitre (eyebrow)', '13 px', '700', '1', '.1em · MAJ.'],
  ['Chiffres clés', '54–60 px', '800', '1', '—'],
]
const typeGrid = '1.4fr .9fr .7fr .8fr .9fr'

const TOKENS = `:root{
  /* — Couleurs de marque — */
  --mk-navy:        #0A2540;  /* texte principal, fonds sombres */
  --mk-blue:        #0E7CC7;  /* accent, boutons primaires      */
  --mk-blue-dark:   #0A5C94;  /* liens, survol bouton           */
  --mk-blue-light:  #5BB4E8;  /* accent sur fond sombre         */
  --mk-gold:        #D4A017;  /* accent secondaire              */

  /* — Surfaces — */
  --mk-bg:          #F4F6FA;  /* fond de page          */
  --mk-surface:     #FFFFFF;  /* cartes                */
  --mk-tint:        #E4EAF2;  /* emplacements d'images */
  --mk-input:       #F8FAFC;  /* champs de formulaire  */

  /* — Texte — */
  --mk-text:        #46566B;
  --mk-text-muted:  #5A6A7E;
  --mk-text-soft:   #8294AA;
  --mk-border:      rgba(10,37,64,.08);
  --mk-success:     #1F8A5B;

  /* — Typographie — */
  --mk-font: 'Manrope', system-ui, -apple-system, sans-serif;

  /* — Rayons — */
  --mk-r-sm: 8px;  --mk-r-md: 11px;  --mk-r-lg: 18px;  --mk-r-pill: 999px;

  /* — Mise en page — */
  --mk-container: 1240px;
  --mk-gutter:    40px;
  --mk-shadow-card: 0 20px 44px rgba(10,37,64,.12);
}`

export default function Charte() {
  return (
    <div style={{ fontFamily: "'Manrope',sans-serif", color: '#0A2540', background: '#eef1f6', padding: '40px 20px', minHeight: '100vh' }}>
      <style>{`@media print { body { background:#fff; } .mk-page { box-shadow:none !important; margin:0 !important; } .no-print { display:none !important; } }`}</style>

      <div className="no-print" style={{ maxWidth: 960, margin: '0 auto 16px' }}>
        <Link to="/" style={{ fontSize: 14, fontWeight: 700, color: '#0A5C94', textDecoration: 'none' }}>← Retour au site</Link>
      </div>

      <div className="mk-page" style={{ maxWidth: 960, margin: '0 auto', background: '#fff', boxShadow: '0 2px 24px rgba(10,37,64,.1)' }}>
        {/* COVER */}
        <section style={{ background: '#0A2540', padding: '64px 60px 56px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
            <Logo size={46} mono="#fff" />
            <span style={{ fontWeight: 800, fontSize: 24, letterSpacing: '.05em', color: '#fff' }}>MERKANTO</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: '#5BB4E8', marginTop: 48 }}>
            Document de référence
          </div>
          <h1 style={{ fontWeight: 800, fontSize: 52, lineHeight: 1.05, letterSpacing: '-.025em', color: '#fff', margin: '14px 0 0' }}>
            Charte graphique
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,.7)', maxWidth: 560, margin: '18px 0 0' }}>
            Spécifications visuelles et techniques pour la conception et le développement du site mercanto.biz — à
            l'attention du graphiste et du développeur.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 30 }}>
            {['#0E7CC7', '#D4A017', '#5BB4E8', '#fff'].map((c) => (
              <span key={c} style={{ width: 30, height: 30, borderRadius: 7, background: c }} />
            ))}
          </div>
        </section>

        <div style={{ padding: '56px 60px' }}>
          {/* 01 LOGO */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="01" title="Logo & symbole" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <div style={{ ...card, padding: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 170, background: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Logo size={54} mono="#0a2540" />
                  <span style={{ fontWeight: 800, fontSize: 26, letterSpacing: '.04em', color: '#0A2540' }}>MERKANTO</span>
                </div>
              </div>
              <div style={{ ...card, padding: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 170, background: '#0A2540' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Logo size={54} mono="#fff" />
                  <span style={{ fontWeight: 800, fontSize: 26, letterSpacing: '.04em', color: '#fff' }}>MERKANTO</span>
                </div>
              </div>
            </div>
            <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginTop: 18 }}>
              {[
                ['Anatomie', <>Anneau & flèches <b style={{ color: '#0A2540' }}>navy</b>, barre verticale <b style={{ color: '#0E7CC7' }}>bleue</b>, arc supérieur <b style={{ color: '#D4A017' }}>or</b>, points <b style={{ color: '#0E7CC7' }}>bleus</b>.</>],
                ['Zone de protection', 'Conserver autour du logo un espace libre ≥ à la hauteur du symbole. Ne rien y superposer.'],
                ['Taille minimale', "Symbole : 32 px de haut minimum à l'écran. Format vectoriel (SVG) à privilégier."],
              ].map(([h, body], i) => (
                <div key={i} style={{ ...card, borderRadius: 12, padding: 18 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: '#0A2540', marginBottom: 6 }}>{h}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.5, color: '#5A6A7E' }}>{body}</div>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.6, color: '#5A6A7E', marginTop: 16 }}>
              <b style={{ color: '#0A2540' }}>À éviter :</b> déformer, recolorer hors palette, ajouter une ombre, modifier
              l'espacement entre le symbole et le mot-symbole, ou poser le logo navy sur un fond sombre (utiliser la version blanche).
            </div>
          </section>

          {/* 02 COULEURS */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="02" title="Palette de couleurs" />
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#8294AA', marginBottom: 14 }}>
              Couleurs de marque
            </div>
            <div className="mk-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
              <Swatch big h="#0A2540" name="Navy" hex="#0A2540" note="Texte principal, sections sombres, pied de page." />
              <Swatch big h="#0E7CC7" name="Bleu" hex="#0E7CC7" note="Accent principal, boutons, bandeau de contact." />
              <Swatch big h="#D4A017" name="Or" hex="#D4A017" note="Accent secondaire : soulignés, puces, traits." />
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#8294AA', margin: '26px 0 14px' }}>
              Variantes & support
            </div>
            <div className="mk-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
              <Swatch h="#0A5C94" name="Bleu foncé" hex="#0A5C94" note="Liens, survol bouton." />
              <Swatch h="#5BB4E8" name="Bleu clair" hex="#5BB4E8" note="Surtitres sur fond sombre." />
              <Swatch h="#F4F6FA" name="Fond" hex="#F4F6FA" note="Fond de page général." />
              <Swatch h="#E4EAF2" name="Aplat" hex="#E4EAF2" note="Emplacements d'images." />
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: '#8294AA', margin: '26px 0 14px' }}>
              Texte
            </div>
            <div className="mk-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
              {[
                ['Titre', '#0A2540', 700, 18],
                ['Corps', '#46566B', 600, 16],
                ['Atténué', '#5A6A7E', 600, 16],
                ['Discret', '#8294AA', 600, 16],
              ].map(([name, col, w, fs], i) => (
                <div key={i} style={{ ...card, borderRadius: 12, padding: 14 }}>
                  <div style={{ fontWeight: w, fontSize: fs, color: col }}>{name}</div>
                  <div style={{ ...mono, fontSize: 12, color: '#5A6A7E', marginTop: 6 }}>{col}</div>
                </div>
              ))}
            </div>
          </section>

          {/* 03 TYPOGRAPHIE */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="03" title="Typographie" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, alignItems: 'center', ...card, padding: 30, marginBottom: 24 }}>
              <div>
                <div style={{ fontWeight: 800, fontSize: 64, lineHeight: 1, color: '#0A2540' }}>Aa</div>
                <div style={{ fontWeight: 700, fontSize: 20, color: '#0A2540', marginTop: 10 }}>Manrope</div>
                <div style={{ fontSize: 14, color: '#5A6A7E', marginTop: 4 }}>Google Fonts — une seule famille pour tout le site.</div>
              </div>
              <div style={{ fontSize: 15, color: '#46566B', lineHeight: 1.9 }}>
                <div style={{ fontWeight: 400 }}>400 — Regular · corps de texte</div>
                <div style={{ fontWeight: 500 }}>500 — Medium · petits libellés</div>
                <div style={{ fontWeight: 600 }}>600 — SemiBold · accroches</div>
                <div style={{ fontWeight: 700 }}>700 — Bold · sous-titres</div>
                <div style={{ fontWeight: 800 }}>800 — ExtraBold · titres & chiffres</div>
              </div>
            </div>
            <div style={{ ...card, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: typeGrid, background: '#0A2540', padding: '14px 20px' }}>
                {['Usage', 'Taille', 'Poids', 'Interligne', 'Lettrage'].map((h) => (
                  <div key={h} style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: '#5BB4E8' }}>{h}</div>
                ))}
              </div>
              {typeRows.map((row, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: typeGrid, padding: '13px 20px', borderBottom: i < typeRows.length - 1 ? '1px solid rgba(10,37,64,.08)' : undefined, fontSize: 14, color: '#46566B' }}>
                  <div style={{ fontWeight: 700, color: '#0A2540' }}>{row[0]}</div>
                  <div>{row[1]}</div>
                  <div>{row[2]}</div>
                  <div>{row[3]}</div>
                  <div>{row[4]}</div>
                </div>
              ))}
            </div>
          </section>

          {/* 04 BOUTONS */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="04" title="Boutons & liens" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <div style={{ ...card, padding: 28 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#0A2540', marginBottom: 16 }}>Sur fond clair</div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                  <span style={{ background: '#0E7CC7', color: '#fff', fontWeight: 700, fontSize: 15, padding: '14px 24px', borderRadius: 11 }}>Bouton primaire →</span>
                  <span style={{ background: '#fff', color: '#0A2540', border: '1px solid rgba(10,37,64,.2)', fontWeight: 600, fontSize: 15, padding: '14px 22px', borderRadius: 11 }}>Secondaire</span>
                </div>
                <div style={{ fontSize: 13, color: '#5A6A7E', marginTop: 16, lineHeight: 1.5 }}>
                  Primaire : <span style={mono}>#0E7CC7</span>, survol <span style={mono}>#0A5C94</span>. Rayon 11 px, padding 14–15 × 24–28 px.
                </div>
              </div>
              <div style={{ ...card, padding: 28, background: '#0A2540' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 16 }}>Sur fond sombre</div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
                  <span style={{ background: '#fff', color: '#0A2540', fontWeight: 700, fontSize: 15, padding: '14px 24px', borderRadius: 11 }}>Primaire inversé</span>
                  <span style={{ border: '1px solid rgba(255,255,255,.5)', color: '#fff', fontWeight: 600, fontSize: 15, padding: '14px 22px', borderRadius: 11 }}>Contour clair</span>
                </div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,.65)', marginTop: 16, lineHeight: 1.5 }}>
                  Lien texte : couleur <span style={{ ...mono, color: '#5BB4E8' }}>#5BB4E8</span> avec flèche « → ».
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', marginTop: 18, ...card, padding: '22px 28px' }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: '#0A2540' }}>Navigation :</span>
              <span style={{ fontSize: 15, fontWeight: 500, color: '#3A4A5E' }}>Lien inactif</span>
              <span style={{ position: 'relative', fontSize: 15, fontWeight: 500, color: '#3A4A5E', paddingBottom: 6 }}>
                Lien actif<span style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, background: '#D4A017' }} />
              </span>
              <span style={{ fontSize: 13, color: '#5A6A7E' }}>État actif = souligné <span style={mono}>or 2 px</span>.</span>
            </div>
          </section>

          {/* 05 COMPOSANTS */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="05" title="Composants" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <div style={{ background: '#fff', borderRadius: 18, padding: 30, border: '1px solid rgba(10,37,64,.07)', boxShadow: '0 6px 20px rgba(10,37,64,.05)' }}>
                <div style={{ width: 50, height: 50, borderRadius: 13, background: 'rgba(14,124,199,.1)', color: '#0E7CC7', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18 }}>01</div>
                <h3 style={{ fontWeight: 700, fontSize: 21, letterSpacing: '-.01em', color: '#0A2540', margin: '16px 0 8px' }}>Carte</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: '#5A6A7E', margin: 0 }}>
                  Fond blanc, rayon 18 px, bordure <span style={{ ...mono, fontSize: 12 }}>rgba(10,37,64,.07)</span>. Survol : translation -4 px + ombre.
                </p>
              </div>
              <div style={{ ...card, borderRadius: 18, padding: 30, display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#0A2540', marginBottom: 10 }}>Badge / pastille</div>
                  <span style={{ display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase', color: '#0A5C94', background: 'rgba(14,124,199,.1)', padding: '6px 12px', borderRadius: 999 }}>Domaine</span>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#0A2540', marginBottom: 10 }}>Surtitre</div>
                  <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94' }}>Notre approche</div>
                </div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: '#0A2540', marginBottom: 10 }}>Chiffre clé</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                    <span style={{ fontWeight: 800, fontSize: 46, lineHeight: 1, color: '#0A2540' }}>+100</span>
                    <span style={{ fontSize: 13, color: '#5A6A7E' }}>étiquette sous le chiffre</span>
                  </div>
                </div>
              </div>
            </div>
            <div style={{ ...card, borderRadius: 18, padding: 30, marginTop: 18 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#0A2540', marginBottom: 14 }}>Champ de formulaire</div>
              <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, color: '#2C3C50', marginBottom: 8 }}>Libellé</label>
                  <div style={{ padding: '13px 15px', border: '1px solid rgba(10,37,64,.18)', borderRadius: 10, fontSize: 14, color: '#8294AA', background: '#F8FAFC' }}>Champ au repos</div>
                </div>
                <div>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 700, color: '#2C3C50', marginBottom: 8 }}>Libellé</label>
                  <div style={{ padding: '13px 15px', border: '1px solid #0E7CC7', outline: '2px solid #0E7CC7', outlineOffset: 1, borderRadius: 10, fontSize: 14, color: '#0A2540', background: '#fff' }}>Champ actif (focus)</div>
                </div>
              </div>
              <div style={{ fontSize: 13, color: '#5A6A7E', marginTop: 14, lineHeight: 1.5 }}>
                Fond <span style={mono}>#F8FAFC</span>, bordure <span style={mono}>rgba(10,37,64,.18)</span>, rayon 10 px. Focus : contour bleu 2 px (obligatoire pour l'accessibilité).
              </div>
            </div>
          </section>

          {/* 06 MISE EN PAGE */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="06" title="Mise en page & espacements" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }}>
              {[
                ['Conteneur', <>Largeur max <span style={mono}>1240 px</span>, centré. Marges latérales <span style={mono}>40 px</span>.</>],
                ['Rythme vertical', <>Sections : <span style={mono}>72–92 px</span> haut/bas. Multiples de 4.</>],
                ['Rayons', <>Boutons/champs <span style={mono}>8–11 px</span> · cartes <span style={mono}>14–18 px</span> · pastilles <span style={mono}>999 px</span>.</>],
                ['Ombres', <>Carte au survol <span style={mono}>0 20px 44px rgba(10,37,64,.12)</span>.</>],
              ].map(([h, body], i) => (
                <div key={i} style={{ ...card, borderRadius: 12, padding: 20 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: '#0A2540' }}>{h}</div>
                  <div style={{ fontSize: 13, color: '#5A6A7E', marginTop: 6, lineHeight: 1.5 }}>{body}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginTop: 18, ...card, padding: 24, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: '#0A2540', marginRight: 8 }}>Échelle d'espacement (px) :</span>
              {[8, 14, 22, 30, 40].map((s) => (
                <span key={s} style={{ display: 'inline-flex', alignItems: 'flex-end', gap: 6 }}>
                  <span style={{ width: s, height: s, background: '#0E7CC7' }} />
                  <span style={{ ...mono, fontSize: 12, color: '#5A6A7E' }}>{s}</span>
                </span>
              ))}
            </div>
          </section>

          {/* 07 IMAGERIE */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="07" title="Iconographie & imagerie" />
            <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
              <div style={{ ...card, padding: 28 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#0A2540', marginBottom: 14 }}>Icônes & repères</div>
                <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                  <span style={{ width: 42, height: 42, borderRadius: 11, background: 'rgba(212,160,23,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ width: 12, height: 12, borderRadius: 3, background: '#D4A017' }} />
                  </span>
                  <span style={{ width: 42, height: 42, borderRadius: 11, background: 'rgba(14,124,199,.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ width: 9, height: 9, borderRadius: 2, background: '#0E7CC7' }} />
                  </span>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#D4A017' }} />
                </div>
                <div style={{ fontSize: 13, color: '#5A6A7E', marginTop: 16, lineHeight: 1.55 }}>
                  Style géométrique et sobre : formes simples (carrés arrondis, points), jamais d'illustrations chargées.
                  Privilégier un set d'icônes linéaires fines (ex. Lucide / Feather) teintées en navy ou bleu.
                </div>
              </div>
              <div style={{ ...card, padding: 28 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#0A2540', marginBottom: 14 }}>Photographie</div>
                <div className="mk-placeholder" style={{ height: 90, borderRadius: 10, backgroundImage: 'repeating-linear-gradient(135deg,rgba(10,37,64,.05) 0 14px,transparent 14px 28px)' }} />
                <div style={{ fontSize: 13, color: '#5A6A7E', marginTop: 16, lineHeight: 1.55 }}>
                  Photos professionnelles, lumineuses et sobres (équipe, bureaux, contexte client). Coins arrondis 14–18 px.
                  Les aplats rayés du site sont des <b style={{ color: '#0A2540' }}>emplacements</b> à remplacer par de vraies images.
                </div>
              </div>
            </div>
          </section>

          {/* 08 ACCESSIBILITE */}
          <section style={{ marginBottom: 64 }}>
            <SectionHead num="08" title="Accessibilité & responsive" />
            <ul style={{ margin: 0, paddingLeft: 20, fontSize: 15, lineHeight: 1.9, color: '#46566B' }}>
              <li>Contraste de texte conforme <b style={{ color: '#0A2540' }}>WCAG AA</b> (navy/slate sur fond clair, blanc sur navy/bleu).</li>
              <li>Le bleu <span style={{ ...mono, fontSize: 13 }}>#0E7CC7</span> en aplat de bouton (texte blanc) ; pour du texte de lien, préférer <span style={{ ...mono, fontSize: 13 }}>#0A5C94</span>.</li>
              <li>États de <b style={{ color: '#0A2540' }}>focus visibles</b> sur tous les éléments interactifs (contour bleu 2 px).</li>
              <li>Hauteur de cible tactile ≥ 44 px ; texte courant ≥ 16 px.</li>
              <li>Points de rupture conseillés : <span style={{ ...mono, fontSize: 13 }}>1240 / 1024 / 768 / 480</span>. Les grilles 3–4 colonnes passent à 2 puis 1 colonne.</li>
              <li>Bilingue <b style={{ color: '#0A2540' }}>FR / EN</b> : prévoir un sélecteur de langue (mémorisé) et des libellés traduits.</li>
            </ul>
          </section>

          {/* 09 TOKENS */}
          <section>
            <SectionHead num="09" title="Tokens CSS — prêts à coder" />
            <p style={{ fontSize: 14, color: '#5A6A7E', margin: '0 0 16px' }}>
              Police à charger : <span style={{ ...mono, fontSize: 13 }}>Manrope</span> (poids 400, 500, 600, 700, 800) via Google Fonts.
            </p>
            <pre style={{ margin: 0, background: '#0A2540', color: '#cfe3f2', borderRadius: 12, padding: 24, overflow: 'auto', ...mono, fontSize: 13, lineHeight: 1.7 }}>
{TOKENS}
            </pre>
            <div style={{ fontSize: 12, color: '#8294AA', marginTop: 36, paddingTop: 20, borderTop: '1px solid rgba(10,37,64,.1)' }}>
              MERKANTO — Charte graphique · Cotonou · Abidjan · Aix-en-Provence · contact@mercanto.biz
            </div>
          </section>
        </div>
      </div>
    </div>
  )
}
