/* ============================================================
   Design Plus / pilotage : feuille partagee (charte.css)
   Toutes les valeurs sont mesurees dans src/styles/global.css de la branche
   lot/1-cockpit-dev (tete 452bd58). Aucune couleur inventee.
   Registre : deux familles, zero ombre, zero arrondi, un accent lisible.
   ============================================================ */

/* --- 1. Polices de marque : 5 fichiers, global.css:12 et 20-23 --- */
@font-face { font-family: 'Inter Tight'; src: url('fonts/inter-tight-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/cabinet-grotesk-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* --- 2. Jetons mesures --- */
:root {
  --paper: #f3f1ed;        /* --color-paper, global.css:76 */
  --paper-2: #eae7e2;      /* --color-paper-2, global.css:77 */
  --paper-3: #dcd8d2;      /* --color-paper-3, global.css:78 */
  --ink: #12110f;          /* --color-ink, global.css:73 */
  --ink-soft: #57544e;     /* --color-ink-soft, global.css:74, 6,69:1 */
  --ink-mute: #64605a;     /* --color-ink-mute, global.css:75, 5,54:1 */
  --line: #d8d4ce;         /* --color-line, global.css:82, decoratif */
  --line-ink: #2b2a28;     /* --color-line-ink, global.css:83 */
  --accent: #2eceff;       /* --color-accent, global.css:84, jamais en texte sur papier (global.css:38) */
  --accent-deep: #0a6a8c;  /* --color-accent-deep, global.css:88, 5,39:1 */
  --rose: #ec008c;         /* --color-rose, global.css:86 */
  --rose-deep: #a80061;    /* --color-rose-deep, global.css:87, 6,56:1 */
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Cabinet Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --fs-micro: .75rem;      /* global.css:52 */
  --fs-small: .8125rem;    /* global.css:53 */
  --fs-body: 1rem;         /* global.css:54 */
  --fs-lead: 1.25rem;      /* global.css:55 */
  --fs-h3: clamp(1.25rem, 1.65vw, 1.5625rem);
  --fs-h2: clamp(1.5625rem, 2.7vw, 2.4375rem);
  --fs-h1: clamp(2.0625rem, 4.3vw, 3.8125rem);
  --fs-display: clamp(2.5rem, 6.7vw, 5.9375rem);
  --sp-xs: clamp(1.5rem, 2.5vw, 2.25rem);
  --sp-sm: clamp(2.25rem, 3.5vw, 3.25rem);
  --sp-md: clamp(3rem, 4.5vw, 4.25rem);
  --sp-lg: clamp(3.5rem, 5.5vw, 5.25rem);
  --sp-xl: clamp(4.5rem, 7vw, 6.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* global.css:90, courbe unique */
  --t-micro: 200ms;        /* global.css:91 */
  --t-surface: 400ms;      /* global.css:92 */

  /* Alias neutres : le visualiseur archify lit --bg et --text. */
  --bg: var(--paper);
  --text: var(--ink);
  --panel-border: var(--line);
}

/* --- 3. Base --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.03em; line-height: 1.06; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
a { color: var(--accent-deep); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { border-bottom-color: var(--accent-deep); }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* --- 4. Cibles de 44 px et filets de 1 px : l'espace remplace la bordure --- */
.dp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.15rem;
  border: 1px solid var(--ink); border-radius: 0; background: none;
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.dp-btn--accent { background: var(--ink); color: var(--paper); }
.dp-btn--quiet { border-color: var(--line); color: var(--ink-soft); }
.dp-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.dp-skip {
  position: absolute; left: -9999px; top: 0; min-height: 44px; padding: .75rem 1rem;
  background: var(--ink); color: var(--paper); z-index: 50;
}
.dp-skip:focus { left: 0; }

/* --- 5. Texture : calque dedie, opacite 0,06 --- */
.dp-texture {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: radial-gradient(var(--ink-mute) 1px, transparent 1px);
  background-size: 22px 22px;
}
.dp-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }

/* --- 6. Logos : noire sur papier, blanche sur encre --- */
.dp-logo { display: block; height: 24px; width: auto; }
.dp-logo-white { display: none; }
html[data-theme="dark"] .dp-logo-black { display: none; }
html[data-theme="dark"] .dp-logo-white { display: block; }

/* --- 7. Bandeau de propriete intellectuelle --- */
.dp-ip {
  position: relative; z-index: 1;
  margin-top: var(--sp-md); padding: var(--sp-sm) 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  font-size: var(--fs-small); color: var(--ink-soft);
}
.dp-ip p { margin: 0; max-width: 62ch; }
.dp-ip .dp-legal { font-size: var(--fs-micro); color: var(--ink-mute); }

/* ============================================================
   8. Remap du visualiseur archify
   Noms de variables : contrat de l'outil. Valeurs : mesurees ci-dessus.
   Aucune regle font-family sur svg, svg text ou svg tspan :
   la composition est validee avec ses metriques d'origine.
   ============================================================ */
html[data-preset][data-theme="light"] {
  --bg: #f3f1ed; --grid: #d8d4ce; --canvas-dot: #dcd8d2;
  --text: #12110f; --text-muted: #57544e; --text-dim: #64605a; --text-faint: #64605a;
  --panel: #eae7e2; --panel-border: #d8d4ce;
  --lane-fill: #eae7e2; --lane-stroke: #d8d4ce;
  --arrow: #12110f; --arrow-emphasis: #0a6a8c; --mask: rgba(18, 17, 15, .86);
  --actor-fill: #eae7e2; --actor-stroke: #12110f;
  --service-fill: #f3f1ed; --service-stroke: #0a6a8c;
  --store-fill: #eae7e2; --store-stroke: #57544e;
  --queue-fill: #f3f1ed; --queue-stroke: #64605a;
  --external-fill: #dcd8d2; --external-stroke: #64605a;
  --decision-fill: #f3f1ed; --decision-stroke: #a80061;
  --note-fill: #eae7e2; --note-stroke: #d8d4ce;
  --frontend-fill: #eae7e2; --frontend-stroke: #12110f;
  --backend-fill: #f3f1ed; --backend-stroke: #0a6a8c;
  --database-fill: #eae7e2; --database-stroke: #57544e;
  --cloud-fill: #f3f1ed; --cloud-stroke: #64605a;
  --security-fill: #f3f1ed; --security-stroke: #a80061;
  --messagebus-fill: #eae7e2; --messagebus-stroke: #64605a;
  --external-fill2: #dcd8d2;
  --toolbar-bg: #f3f1ed; --toolbar-border: #d8d4ce; --toolbar-text: #12110f;
  --toolbar-text-muted: #64605a; --toolbar-accent: #0a6a8c;
  --toolbar-radius: 0; --toolbar-shadow: none;
  --guide-accent: #0a6a8c; --conclusion-bg: #eae7e2;
}
html[data-preset][data-theme="dark"] {
  --bg: #12110f; --grid: #2b2a28; --canvas-dot: #2b2a28;
  --text: #f3f1ed; --text-muted: rgba(243, 241, 237, .74); --text-dim: rgba(255, 255, 255, .70); --text-faint: rgba(255, 255, 255, .60);
  --panel: #12110f; --panel-border: #2b2a28;
  --lane-fill: #2b2a28; --lane-stroke: #f3f1ed;
  --arrow: #f3f1ed; --arrow-emphasis: #2eceff; --mask: rgba(18, 17, 15, .86);
  --actor-fill: #12110f; --actor-stroke: #f3f1ed;
  --service-fill: #12110f; --service-stroke: #2eceff;
  --store-fill: #2b2a28; --store-stroke: #f3f1ed;
  --queue-fill: #2b2a28; --queue-stroke: #b9b7b3;
  --external-fill: #2b2a28; --external-stroke: #a0a09f;
  --decision-fill: #12110f; --decision-stroke: #ec008c;
  --note-fill: #12110f; --note-stroke: #2b2a28;
  --frontend-fill: #12110f; --frontend-stroke: #f3f1ed;
  --backend-fill: #12110f; --backend-stroke: #2eceff;
  --database-fill: #2b2a28; --database-stroke: #f3f1ed;
  --cloud-fill: #12110f; --cloud-stroke: #b9b7b3;
  --security-fill: #12110f; --security-stroke: #ec008c;
  --messagebus-fill: #2b2a28; --messagebus-stroke: #a0a09f;
  --toolbar-bg: #12110f; --toolbar-border: #2b2a28; --toolbar-text: #f3f1ed;
  --toolbar-text-muted: rgba(243, 241, 237, .74); --toolbar-accent: #2eceff;
  --toolbar-radius: 0; --toolbar-shadow: none;
  --guide-accent: #2eceff; --conclusion-bg: #12110f;
}

/* Cartes du visualiseur neutralisees : filet de 1 px, zero rayon, zero ombre. */
html[data-preset] .diagram-container,
html[data-preset] .card,
html[data-preset] .cards {
  background: none; border: 1px solid var(--panel-border);
  border-radius: 0; box-shadow: none;
}
html[data-preset] .toolbar,
html[data-preset] .diagram-toolbar,
html[data-preset] .conclusion,
html[data-preset] .legend {
  background: var(--toolbar-bg); border: 1px solid var(--toolbar-border);
  border-radius: 0; box-shadow: none;
}
html[data-preset] svg rect,
html[data-preset] svg .node rect,
html[data-preset] svg .lane rect { rx: 0; ry: 0; }

/* La coque porte la police de marque ; jamais le SVG. */
html[data-preset] body,
html[data-preset] .toolbar,
html[data-preset] .diagram-toolbar,
html[data-preset] .guide,
html[data-preset] .legend,
html[data-preset] .card,
html[data-preset] .conclusion {
  background: var(--bg); color: var(--text);
  font-family: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html[data-preset] .toolbar h1,
html[data-preset] .toolbar h2,
html[data-preset] .guide h2,
html[data-preset] .card h3,
html[data-preset] .conclusion h2 {
  font-family: 'Cabinet Grotesk', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.03em;
}
html[data-preset] .dp-texture { opacity: .05; }
/* Le point pulse du visualiseur est masque : le logo prend sa place. */
.pulse-dot { display: none !important; }