@charset "utf-8";
/* ============================================================================
   charte.tero.be — brand book TERO GROUP
   Architecture : @layer reset, tokens, base, layout, components, utilities
   Tokens à 3 couches · clair/sombre natif · animations CSS scroll-driven
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 5rem; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
  :where(ul, ol) { padding-inline-start: 1.15em; }
}

@layer tokens {
  :root {
    /* ---- Couche 1 : primitives mesurées ---- */
    --black:#000; --white:#fff; --surface:#f6f4f4; --line:#d9d9d9; --line-soft:#e5e6e5;
    --ink-soft:#323232; --ink-deep:#212121; --muted:#b9b9b9; --fg-muted:#5f5f5f; --border-strong:#767676;
    --teal:#007864; --petrol:#004b69; --terracotta:#b93815; --sand:#fad282; --rose:#d7b4b4; --cyan:#00b7ff; --pink:#ff1d58;
    /* ---- Couche 2 : sémantique (clair) ---- */
    --bg: var(--white); --bg-alt: var(--surface); --fg: var(--black); --fg-2: var(--ink-soft); --fg-3: var(--fg-muted);
    --border: var(--line-soft); --hairline: var(--line);
    --accent: var(--teal); --accent-ink: var(--white);
    --pillar: var(--teal);
    --deep: #0d1f30;
    /* ---- Typographie ---- */
    --f-display: 'Almarose', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-script: 'WildYouth', var(--f-display);
    --t-label: .75rem; --t-meta: .875rem; --t-body: 1rem; --t-lead: 1.125rem;
    --t-h3: 1.25rem; --t-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); --t-h1: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);
    --t-mega: clamp(3.5rem, 1rem + 12vw, 11rem);
    /* ---- Rythme, rayons, divers ---- */
    --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem; --s7:9rem;
    --section: clamp(4rem, 3rem + 5vw, 8rem);
    --r-s: .5rem; --r-m: .75rem; --r-l: 1.25rem; --r-pill: 999px;
    --w-page: 1180px; --w-text: 62ch;
    --shadow: 0 1px 2px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.06);
    --ease: cubic-bezier(.23,1,.32,1);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#0b1a28; --bg-alt:#0d1f30; --fg:#fff; --fg-2:#d9d9d9; --fg-3:#b9b9b9;
      --border:rgba(255,255,255,.16); --hairline:rgba(255,255,255,.22);
      --accent: var(--sand); --accent-ink: var(--black);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg:#0b1a28; --bg-alt:#0d1f30; --fg:#fff; --fg-2:#d9d9d9; --fg-3:#b9b9b9;
    --border:rgba(255,255,255,.16); --hairline:rgba(255,255,255,.22);
    --accent: var(--sand); --accent-ink: var(--black);
    color-scheme: dark;
  }
  /* Couleur de pilier : le démonstrateur du mécanisme de déclinaison */
  [data-pillar="hospitality"] { --pillar: var(--teal); }
  [data-pillar="leisure"] { --pillar: var(--petrol); }
  [data-pillar="sport-events"] { --pillar: var(--terracotta); }
}

@layer base {
  @font-face { font-family:'Almarose'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/almarose-400.woff2') format('woff2'); }
  @font-face { font-family:'Almarose'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/almarose-500.woff2') format('woff2'); }
  @font-face { font-family:'Almarose'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/almarose-600.woff2') format('woff2'); }
  @font-face { font-family:'Almarose'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/almarose-700.woff2') format('woff2'); }
  @font-face { font-family:'Almarose'; font-weight:900; font-style:normal; font-display:swap; src:url('../fonts/almarose-900.woff2') format('woff2'); }
  @font-face { font-family:'WildYouth'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/wildyouth.woff2') format('woff2'); }
  body {
    background: var(--bg); color: var(--fg);
    font-family: var(--f-display); font-size: var(--t-body); line-height: 1.65;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  h1,h2,h3,h4 { font-weight: 700; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .22em; }
  a:hover { text-decoration-color: currentColor; }
  ::selection { background: var(--sand); color: var(--black); }
  :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
  .skip { position: absolute; left: -9999px; }
  .skip:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--fg); color: var(--bg); padding: .7rem 1rem; border-radius: var(--r-s); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }
}

@layer layout {
  .shell { display: grid; grid-template-columns: minmax(0,1fr); }
  @media (min-width: 1080px) { .shell { grid-template-columns: 260px minmax(0,1fr); } }
  .side { display: none; }
  @media (min-width: 1080px) {
    .side { display: block; position: sticky; top: 0; height: 100vh; padding: 2rem 1.5rem 2rem 2rem; border-right: 1px solid var(--border); overflow: auto; }
  }
  .page { min-width: 0; }
  .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
  section { padding-block: var(--section); border-top: 1px solid var(--border); }
  section:first-of-type { border-top: 0; }
  .bleed { background: var(--bg-alt); }
  .deep { background: var(--deep); color: #fff; }
  .grid { display: grid; gap: var(--s3); }
  .g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
  .split { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .split { grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); } }
}

@layer components {
  /* ---- En-tête de section ---- */
  .eyebrow { font-size: var(--t-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: .65rem; }
  .eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
  .sec-title { font-size: var(--t-h1); margin: .6rem 0 1rem; }
  .lead { font-size: var(--t-lead); color: var(--fg-2); max-width: var(--w-text); }
  h3 { font-size: var(--t-h3); margin-block: var(--s5) var(--s2); }
  .note { font-size: var(--t-meta); color: var(--fg-3); }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }

  /* ---- Navigation latérale + progression ---- */
  .brandmark { width: 108px; margin-bottom: 2rem; }
  .toc { list-style: none; padding: 0; display: grid; gap: .1rem; }
  .toc a { display: flex; gap: .55rem; align-items: baseline; padding: .35rem .5rem; border-radius: var(--r-s); text-decoration: none; font-size: .92rem; color: var(--fg-2); }
  .toc a:hover { background: var(--bg-alt); color: var(--fg); }
  .toc a[aria-current="true"] { color: var(--fg); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
  .toc .num { font-size: .72rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }
  .progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--accent); transform-origin: 0 50%; scale: 0 1; z-index: 50; }
  @supports (animation-timeline: scroll()) { .progress { animation: grow linear; animation-timeline: scroll(root); } @keyframes grow { to { scale: 1 1; } } }
  .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--border); display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .6rem clamp(1.25rem,4vw,3.5rem); }
  .topbar .name { font-weight: 700; letter-spacing: -.02em; }
  .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 600; font-size: .92rem; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease); }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--black); color: var(--white); }
    .btn-accent { background: var(--accent); color: var(--accent-ink); }
  .btn-ghost { border-color: currentColor; background: transparent; }
  .icon-btn { width: 44px; justify-content: center; padding: 0; border-color: var(--border); background: transparent; }

  /* ---- Couverture ---- */
  .cover { background: var(--black); color: var(--white); padding-block: clamp(4rem, 10vw, 9rem); position: relative; overflow: clip; }
  .cover .wordmark { width: min(460px, 62vw); }
  .cover h1 { font-size: var(--t-h1); margin: 1.6rem 0 .8rem; }
  .cover .sig { font-family: var(--f-script); font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); color: var(--sand); margin-top: 1.4rem; }
  .cover .meta { color: #b9b9b9; font-size: var(--t-meta); margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
  .cover .dots { position: absolute; inset: auto -4rem -6rem auto; width: 34rem; opacity: .12; }

  /* ---- Cartes et blocs ---- */
  .card { border: 1px solid var(--border); border-radius: var(--r-l); padding: var(--s3); background: var(--bg); container-type: inline-size; }
  .card > :first-child { margin-top: 0; }
  .swatch { height: 104px; border-radius: var(--r-m); display: flex; align-items: flex-end; padding: .6rem .7rem; font-weight: 600; font-size: .78rem; letter-spacing: .04em; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; padding: .28rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--border); }
  .chip.ok { background: var(--teal); color: #fff; border-color: var(--teal); }
  .chip.warn { background: var(--sand); color: #000; border-color: var(--sand); }
  .chip.bad { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
  th { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
  tbody tr:hover { background: var(--bg-alt); }
  code, .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; background: var(--bg-alt); padding: .12em .38em; border-radius: 4px; }
  pre { background: var(--deep); color: #e8f3f0; padding: 1rem 1.1rem; border-radius: var(--r-m); overflow: auto; font-size: .8rem; line-height: 1.55; }
  pre .c { color: #7fa39b; }

  /* ---- Démonstrateurs ---- */
  .demo { border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
  .demo .stage { padding: var(--s4) var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: center; }
  .demo .stage.checker { background-image: linear-gradient(45deg, var(--bg-alt) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-alt) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-alt) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-alt) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
  .demo figcaption { border-top: 1px solid var(--border); padding: .7rem 1rem; font-size: var(--t-meta); color: var(--fg-3); display: flex; justify-content: space-between; gap: 1rem; }
  .dont { position: relative; }
  .dont::after { content: "✕"; position: absolute; inset-block-start: .5rem; inset-inline-end: .6rem; color: var(--terracotta); font-weight: 700; }
  .pillar-switch { display: flex; gap: .4rem; flex-wrap: wrap; }
  .pillar-switch button { border: 1px solid var(--border); background: transparent; border-radius: var(--r-pill); padding: .4rem .85rem; font-size: .85rem; cursor: pointer; }
  .pillar-switch button[aria-pressed="true"] { background: var(--pillar); color: #fff; border-color: var(--pillar); }
  .scale-row { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--border); }
  .kpi { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
  .copy { cursor: pointer; }
  .copy:hover { background: var(--sand); }
  .band { background: var(--deep); color: #fff; border-radius: var(--r-l); padding: var(--s4); }
  .band .num { font-size: clamp(2rem,1.2rem+2.4vw,3rem); font-weight: 900; font-variant-numeric: tabular-nums; }
  .band .cell { border-left: 1px solid rgba(255,255,255,.25); padding-left: 1.1rem; }
  .imgframe { border-radius: var(--r-l); overflow: hidden; position: relative; }
  .imgframe img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
  .imgframe .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,31,48,.82), rgba(13,31,48,.15)); display: flex; align-items: flex-end; padding: var(--s3); }
  .imgframe .veil img { width: 140px; }
  .swatchgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
  .footer { background: var(--black); color: #b9b9b9; padding-block: var(--s5); font-size: var(--t-meta); }
}

@layer utilities {
  .stack > * + * { margin-top: var(--s2); }
  .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
  .center { text-align: center; }
  .fs-label { font-size: var(--t-label); } .fs-meta { font-size: var(--t-meta); }
  .reveal { opacity: 1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: rise both linear; animation-timeline: view(); animation-range: entry 8% cover 26%; }
      @keyframes rise { from { opacity: 0; translate: 0 1.4rem; } to { opacity: 1; translate: 0 0; } }
    }
  }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media print {
  :root { --bg: #fff; --fg: #000; }
  .side, .topbar, .progress, .pillar-switch { display: none !important; }
  .shell { grid-template-columns: 1fr !important; }
  section { break-inside: avoid; padding-block: 2rem; }
  .cover { background: #fff; color: #000; }
  .cover .wordmark { filter: invert(1); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}