/* ════════════════════════════════════════════════════════════════════
   Zones MARKETING et ADMIN — mise en page (au design du design system).
   Les COMPOSANTS (tbar--mkt, tbar--admin, cbtn, lnk, bdg, ava…) viennent
   de atelier.css ; les tokens (.ds-app + sombre) de feed-ds.css. Ici,
   uniquement le LAYOUT des pages « solo » (sans coquille d'app) :
   barre en haut, contenu, pied de page légal.
   ════════════════════════════════════════════════════════════════════ */

/* Pages solo : la barre est dans le flux (pas fixée), le body scrolle. */
body.ds-solo { min-height: 100vh; display: flex; flex-direction: column; }
body.ds-solo > main { flex: 1; width: 100%; box-sizing: border-box; padding: 28px 32px 60px; }

/* ── MARKETING : contenu de LECTURE centré (légal, contact) ── */
body.ds-solo > main.mkt-page { max-width: 860px; margin: 0 auto; }
.mkt-page h1 { font: var(--md-sys-typescale-headline-large); margin: 8px 0 18px; letter-spacing: -0.01em; color: var(--ink); }
.mkt-page h2 { font: var(--md-sys-typescale-headline-small); font-weight: 700; margin: 26px 0 10px; color: var(--ink); }
.mkt-page p, .mkt-page li { font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.65; color: var(--ink-2); }
/* Liens du texte en couleur marque, SAUF les liens-boutons (composant cbtn). */
.mkt-page a:not(.cbtn) { color: var(--brand); }
.mkt-page .mkt-updated { font-size: var(--md-sys-typescale-body-small-size); color: var(--faint); margin-bottom: 22px; }
/* Bandeau des pages juridiques lues dans une autre langue (ui-lang.js, marquerJuridique) : « traduction
   approximative, la version française fait foi » + lien, posé avant <main>, à sa largeur. */
body.ds-solo > .mkt-ref-note { max-width: 860px; margin: 24px auto 0; flex-wrap: wrap; }
body.ds-solo > .mkt-ref-note a { color: var(--md-sys-color-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Note « Texte de référence en français. Une traduction sera proposée
   prochainement. » : elle ne parle qu'aux lecteurs d'une autre langue. En
   français (lang posé sur <html> par ui-lang.js), on la cache. */
html[lang="fr"] [data-i18n-note] { display: none; }

/* Tableaux des pages légales (données, prestataires, cookies) : défilement horizontal
   dans leur cadre si l'écran est étroit, jamais la page. */
.mkt-page .mkt-table-wrap { overflow-x: auto; margin: 10px 0 16px; border: 1px solid var(--line-2); border-radius: 10px; }
.mkt-page .mkt-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.5; }
.mkt-page .mkt-table th, .mkt-page .mkt-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.mkt-page .mkt-table th { font: var(--md-sys-typescale-label-medium); font-weight: 600; background: var(--raised); color: var(--ink); }
.mkt-page .mkt-table tr:last-child td { border-bottom: 0; }
.mkt-page .mkt-table code { font-family: Menlo, monospace; font-size: var(--md-sys-typescale-label-medium-size, 12px); background: var(--raised); padding: 1px 5px; border-radius: 4px; }

/* Pied de page légal (liens du DS) */
.mkt-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 32px; border-top: 1px solid var(--line); }
.mkt-foot-brand { font-size: var(--md-sys-typescale-body-small-size); color: var(--faint); }

/* ── ADMIN : outil pleine largeur ── */
body.ds-solo > main.admin-page { max-width: none; }

/* Barre du haut admin : bord à bord, SANS rayon (pas une carte flottante) —
   commune à la console et à la Feuille de route. */
.tbar--admin { border-radius: 0; border-top: 0; border-left: 0; border-right: 0;
  border-bottom: 1px solid var(--line-2); }
/* Rappel « admin en français » (shell-admin-ds.js) : message .alert--info du DS, ici le placement. */
.adm-lang-note { margin: 12px 16px 0; padding-top: 0; padding-bottom: 0; }
.adm-lang-note > span { flex: 1; }

/* ── Feuille de route : LAYOUT du rendu partagé (roadmap-ds.js) ──
   Utilisé par la page /admin/roadmap ET l'onglet de la console.
   Les badges .bdg viennent d'atelier.css ; ici, uniquement la mise en page. */
.ds-app .ra-legend { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 14px; }
.ds-app .ra-hint { font-size: var(--md-sys-typescale-body-small-size); color: var(--faint); }
.ds-app .ra-team { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.ds-app .ra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.ds-app .ra-card { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); }
.ds-app .ra-card h3 { font: var(--md-sys-typescale-title-medium); font-weight: 700; display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--ink); }
.ds-app .ra-card h3 > svg { flex: none; color: var(--muted); }
.ds-app .ra-owner { margin-left: auto; flex: none; }
.ds-app .ra-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-app .ra-card li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--md-sys-typescale-body-medium-size); color: var(--ink-2); line-height: 1.5; }
.ds-app .ra-card li .bdg { flex: none; }
@media (max-width: 640px) { .ds-app .ra-grid { grid-template-columns: 1fr; } }

/* Le badge Admin de la barre ne se compresse pas. */
.tbar--admin .bdg { flex: none; }

/* ── Responsive ── */
@media (max-width: 640px) {
  body.ds-solo > main { padding: 20px 16px 48px; }
  .mkt-foot { padding: 16px; }
}

/* Barre du haut marketing en MENU BURGER (≤ 899px) — mêmes règles que le
   composant tbar--mkt de l'atelier, qui les exprime en container query
   (@container nav) : ces requêtes ne s'appliquent QUE dans le cadre de démo
   .nav-frame du design system, jamais sur les vraies pages vitrine. On les
   redit donc ici en media query pour la zone marketing réelle.
   Les trois déclarations vont ENSEMBLE : dès que les liens et le bloc de
   droite disparaissent, le burger doit apparaître, sinon la page n'a plus
   aucune navigation. */
@media (max-width: 899px) {
  .ds-app .tbar--mkt .tbar-links,
  .ds-app .tbar--mkt .tbar-right { display: none; }
  .ds-app .tbar--mkt .tbar-burger-dd { display: inline-flex; }
}

/* Pied de page à colonnes (vitrine) : logo + 4 colonnes de liens, puis la ligne légale. */
.mkt-foot--cols { display: block; padding: 40px 32px 28px; }
.mkt-foot-grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; }
.mkt-foot-brandcol .tbar-logo { height: 24px; }
.mkt-foot-brandcol p { margin: 14px 0 0; max-width: 280px; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.55; color: var(--muted); }
.mkt-foot-col { display: flex; flex-direction: column; gap: 10px; }
.mkt-foot-col h4 { font: var(--md-sys-typescale-label-large); font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.mkt-foot-col .lnk { font-size: var(--md-sys-typescale-body-medium-size); color: var(--muted); }
.mkt-foot-col .lnk:hover { color: var(--ink); }
.mkt-foot-bottom { display: flex; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
@media (max-width: 900px) { .mkt-foot-grid { grid-template-columns: 1fr 1fr; } .mkt-foot-brandcol { grid-column: 1 / -1; } }
@media (max-width: 520px) { .mkt-foot-grid { grid-template-columns: 1fr; } .mkt-foot-bottom { flex-direction: column; } }