/* ============================================================
   RetailPOS — Pages légales (refonte)
   Surcouche de demo-refonte-insp3.css.
   Partagée par : mentions-legales, cgv, politique-de-confidentialite.
   Chrome (pont de variables + menu + footer) repris de metiers-insp3.
   ============================================================ */

/* Pont de variables : l'ancien système (--cta, --text, --bg…) est mappé
   sur les tokens demo-refonte. Indispensable pour que les composants
   partagés (menu, footer, contact) et les styles inline résiduels
   s'affichent dans la palette refonte. */
:root {
  --accent: var(--orange);
  --accent-mid: rgba(242, 83, 26, .20);
  --cta: var(--orange);
  --cta-hover: var(--orange-deep);
  --bg: var(--cream);
  --bg2: var(--white);
  --text: var(--ink);
  --border: var(--line);
  --radius: 999px;
  --radius-card: 20px;
  --card-shadow: none;
  --card-shadow-lg: none;
  --retailpos-layout-container: none;
  --retailpos-layout-gutter: clamp(14px, 1.8vw, 28px);
  --retailpos-layout-hero-top: 22px;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   HEADER / MENU (composant) — aligné sur la home / à-propos
   ============================================================ */
body > header {
  position: sticky;
  top: 0;
  height: auto;
  padding-top: 14px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: block;
  width: 100%;
}

body > header .container {
  width: calc(100% - (clamp(14px, 1.8vw, 28px) * 2));
  max-width: none;
  margin-inline: clamp(14px, 1.8vw, 28px);
  padding: 0 14px 0 24px;
  min-height: 74px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
}

body > header.scrolled .container {
  border-color: var(--line);
}

.logo {
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.logo-retail { color: var(--ink) !important; }
.logo-pos { color: var(--orange) !important; }

.nav-page-badge { display: none; }

.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--ink); }

.nav-links a.menu-demo-btn,
.mobile-drawer .drawer-cta {
  border-radius: 999px;
  background: var(--orange);
  font-weight: 500;
}

.nav-links a.menu-demo-btn:hover,
.mobile-drawer .drawer-cta:hover {
  background: var(--orange-deep);
  box-shadow: none;
}

.burger {
  width: 44px;
  height: 44px;
  justify-content: center;
  border-radius: 12px;
  border-color: var(--line);
  background: #fff;
}

.burger span { background: var(--ink); }

.mobile-drawer {
  top: 88px;
  height: calc(100vh - 88px);
  background: rgba(255, 255, 255, .96);
}

/* ============================================================
   FOOTER (composant) — aligné sur la home / à-propos
   ============================================================ */
.retailpos-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, .68);
  border-top: 0;
}

.retailpos-footer__inner {
  max-width: none;
  padding-inline: clamp(14px, 1.8vw, 28px);
}

.retailpos-footer__logo,
.retailpos-footer__tagline,
.retailpos-footer__contact a[href^="tel:"],
.retailpos-footer__company strong { color: #fff; }

.retailpos-footer__logo span,
.retailpos-footer__eyebrow,
.retailpos-footer__contact a[href^="mailto:"] { color: var(--orange); }

.retailpos-footer__proof,
.retailpos-footer__col a,
.retailpos-footer__contact p,
.retailpos-footer__company p,
.retailpos-footer__bottom,
.retailpos-footer__col h2,
.retailpos-footer__contact-label { color: rgba(255, 255, 255, .62); }

.retailpos-footer__top,
.retailpos-footer__nav,
.retailpos-footer__bottom,
.retailpos-footer__contact-row { border-color: rgba(255, 255, 255, .12); }

.retailpos-footer__contact {
  background: rgba(255, 255, 255, .06);
  border-left-color: var(--orange);
}


/* ============================================================
   PAGES LÉGALES — contenu (mentions, CGV, confidentialité)
   ============================================================ */

/* Le contenu légal réutilise .container ; on lui donne le même
   comportement que .wrap (pleine largeur + gouttières refonte). */
.container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(14px, 1.8vw, 28px);
}

/* ---- En-tête de page (même pattern que index : .section > .wrap > .center) ---- */
/* Le hero réutilise .tag (eyebrow), h1 global et .lead — aucun style propre,
   pour coller exactement à la home / aux pages métiers. */
.legal-updated {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 600;
}

/* ---- Corps du document ---- */
.legal-wrap { max-width: 820px; margin: 0 auto; }
/* h2/h3 héritent de la typo globale (weight 500, letter-spacing -.045em, --ink)
   comme les titres d'index : on n'ajuste que la taille et le rythme. */
.legal-wrap h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  margin: clamp(40px, 4vw, 56px) 0 14px;
}
.legal-wrap h2:first-child { margin-top: 0; }
.legal-wrap h3 { font-size: 1.05rem; line-height: 1.25; margin: 26px 0 8px; }
.legal-wrap p,
.legal-wrap li { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.legal-wrap p { margin-bottom: 14px; }
.legal-wrap ul { margin: 0 0 16px 1.1rem; display: flex; flex-direction: column; gap: 8px; }
.legal-wrap a { color: var(--orange); font-weight: 600; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-wrap strong { color: var(--ink); font-weight: 700; }

/* ---- Cartes d'information (éditeur, hébergeur…) ---- */
.legal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 28px;
  margin: 22px 0;
}
.legal-card p:last-child { margin-bottom: 0; }

/* ---- Tableaux (cookies, données…) ---- */
.legal-table-wrap {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
  vertical-align: top;
}
.legal-table th {
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.legal-table tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .legal-card { padding: 20px; }
  .legal-table th,
  .legal-table td { padding: 12px 14px; }
}