/* Header / footer / logo communs à TOUTES les pages publiques (accueil, solutions, légal,
   contact…, connexion/inscription). Les pages avec sidebar (espace client, admin) n'en
   dépendent pas. Source de vérité du style : modifier ici, pas page par page.
   Toutes les règles sont préfixées .dmx- pour ne jamais entrer en conflit avec Bootstrap/Tailwind. */
.dmx-header, .dmx-footer, .dmx-brand {
  --dmx-ink: #111014; --dmx-ink-2: #2b2833; --dmx-muted: #5e5a68; --dmx-dim: #86818f;
  --dmx-line: rgba(17, 16, 20, .07); --dmx-line-2: rgba(17, 16, 20, .12); --dmx-surface: #ffffff;
  --dmx-ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--dmx-ink); -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
.dmx-header *, .dmx-header *::before, .dmx-header *::after,
.dmx-footer *, .dmx-footer *::before, .dmx-footer *::after { box-sizing: border-box; }
.dmx-header a, .dmx-footer a, .dmx-brand { color: inherit; text-decoration: none; }
.dmx-header ul, .dmx-footer ul { margin: 0; padding: 0; list-style: none; }
.dmx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .dmx-wrap { padding: 0 16px; } }

/* Logo : icône + texte (même taille et même espacement partout) */
.dmx-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.dmx-brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; display: block; max-width: none; }
.dmx-brand em { font-style: normal; background-image: linear-gradient(135deg, hsl(265, 80%, 58%) 0%, hsl(288, 92%, 76%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Header */
.dmx-header { position: sticky; top: 0; left: 0; right: 0; z-index: 50; background: rgba(246, 246, 248, .82);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 transparent; transition: box-shadow 300ms ease, background-color 300ms ease; }
.dmx-header--fixed { position: fixed; }
.dmx-header.scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 var(--dmx-line-2); }
.dmx-in { height: 72px; display: flex; align-items: center; gap: 40px; }
.dmx-links { display: flex; gap: 32px; height: 100%; }
.dmx-links a { position: relative; display: flex; align-items: center; font-size: 16px; font-weight: 500; color: var(--dmx-muted); transition: color 200ms ease; }
.dmx-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dmx-ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--dmx-ease-out); }
.dmx-links a:hover, .dmx-links a.is-current { color: var(--dmx-ink); }
.dmx-links a.is-current::after { transform: scaleX(1); }
.dmx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dmx-login { padding: 8px 14px; font-size: 16px; font-weight: 500; color: var(--dmx-ink-2); border-radius: 8px; transition: background-color 200ms ease; }
.dmx-login:hover { background: rgba(17,16,20,.05); }
.dmx-header a.dmx-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 8px; background: var(--dmx-ink); color: #fff; font-size: 16px; font-weight: 600; transition: background-color 200ms ease, transform 160ms var(--dmx-ease-out); }
.dmx-header a.dmx-cta:hover { background: #2a2731; }
.dmx-header a.dmx-cta:active { transform: scale(.97); }
.dmx-burger { display: none; position: relative; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 8px; background: transparent; cursor: pointer; padding: 0; }
.dmx-burger:hover { background: rgba(17,16,20,.05); }
.dmx-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--dmx-ink); border-radius: 2px; transition: transform 350ms var(--dmx-ease-out), opacity 200ms ease; }
.dmx-burger span:nth-child(1) { top: 14px; }
.dmx-burger span:nth-child(2) { top: 19px; }
.dmx-burger span:nth-child(3) { top: 24px; }
.dmx-header.open .dmx-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.dmx-header.open .dmx-burger span:nth-child(2) { opacity: 0; }
.dmx-header.open .dmx-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.dmx-mnav { display: none; }
@media (max-width: 900px) {
  .dmx-links, .dmx-right { display: none; }
  .dmx-burger { display: block; }
  .dmx-mnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--dmx-ease-out); }
  .dmx-mnav > div { overflow: hidden; }
  .dmx-header.open { background: #fff; box-shadow: 0 1px 0 var(--dmx-line-2), 0 24px 48px -24px rgba(24,16,48,.2); }
  .dmx-header.open .dmx-mnav { grid-template-rows: 1fr; }
  .dmx-mnav nav { display: grid; padding: 4px 24px 20px; }
  .dmx-mnav a.l { padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--dmx-ink-2); box-shadow: 0 1px 0 var(--dmx-line); }
  .dmx-mnav a.dmx-cta { margin-top: 16px; height: 48px; justify-content: center; }
}
@media (max-width: 640px) { .dmx-mnav nav { padding: 4px 16px 20px; } }

/* Footer */
.dmx-footer { padding: 80px 0 40px; font-size: 16px; }
.dmx-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.dmx-foot-grid h4 { font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 0 0 16px; color: var(--dmx-ink); }
.dmx-foot-grid ul { display: grid; gap: 12px; }
.dmx-foot-grid ul a { color: var(--dmx-muted); transition: color 200ms ease; }
.dmx-foot-grid ul a:hover { color: var(--dmx-ink); }
.dmx-foot-about p { color: var(--dmx-muted); margin: 16px 0 0; max-width: 32ch; }
.dmx-foot-social { display: flex; gap: 8px; margin-top: 24px; }
.dmx-foot-social a { width: 40px; height: 40px; border-radius: 999px; background: var(--dmx-surface); box-shadow: 0 0 0 1px var(--dmx-line-2); display: grid; place-items: center; color: var(--dmx-muted); }
.dmx-foot-social a:hover { color: var(--dmx-ink); }
.dmx-foot-bottom { margin-top: 64px; padding-top: 24px; box-shadow: 0 -1px 0 var(--dmx-line); color: var(--dmx-dim); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .dmx-foot-grid { grid-template-columns: 1fr 1fr; } .dmx-foot-about { grid-column: span 2; } }

/* Liens : pas de soulignement / changement de couleur hérité de Bootstrap au survol */
.dmx-header a:hover, .dmx-footer a:hover, a.dmx-brand:hover { text-decoration: none; }
a.dmx-brand:hover { color: var(--dmx-ink); }
.dmx-skip:focus { left: 16px !important; top: 16px; z-index: 100; padding: 8px 16px; border-radius: 999px; background: #111014; color: #fff; font-size: 14px; }