/* ============================================================
   LEGAL PAGES — Le Cayenne
   Shared layout for /legal/*.html pages (LCEN, CGV, Privacy,
   Cookies, Allergens). Re-uses :root tokens from styles.css.
   ============================================================ */

.lc-legal {
  padding: clamp(36px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
  background: var(--cream);
  min-height: 60vh;
}

.lc-legal-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gray-3);
  margin-bottom: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lc-legal-breadcrumb a {
  color: var(--gray-3);
  border-bottom: 1px dotted var(--gray-2);
  padding-bottom: 1px;
}
.lc-legal-breadcrumb a:hover { color: var(--orange); border-color: var(--orange); }
.lc-legal-breadcrumb span[aria-hidden] { color: var(--gray-2); }

.lc-legal-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink);
}

.lc-legal-updated {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--gray-3);
  margin: 0 0 32px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lc-legal-intro {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--gray-4);
  max-width: 760px;
  margin: 0 0 40px;
}

.lc-legal-section {
  max-width: 800px;
  margin: 0 0 36px;
  padding: 0;
}

.lc-legal-section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: var(--ink);
}

.lc-legal-section h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--ink);
}

.lc-legal-section p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-4);
  margin: 0 0 14px;
}

.lc-legal-section p strong,
.lc-legal-section li strong {
  color: var(--ink);
  font-weight: 700;
}

.lc-legal-section a {
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lc-legal-section a:hover { color: var(--orange-deep); }

.lc-legal-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.lc-legal-list li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-4);
  padding: 8px 0 8px 0;
  border-bottom: 1px solid var(--gray-1);
}
.lc-legal-list li:last-child { border-bottom: 0; }

.lc-legal-section ul:not(.lc-legal-list) {
  margin: 0 0 16px;
  padding-left: 22px;
}
.lc-legal-section ul:not(.lc-legal-list) li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-4);
  padding: 4px 0;
}

.lc-legal-section ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
.lc-legal-section ol li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-4);
  padding: 4px 0;
}

.lc-legal-callout {
  background: var(--yellow-soft);
  border-left: 4px solid var(--yellow);
  padding: 18px 22px;
  border-radius: var(--r-md);
  margin: 20px 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
}
.lc-legal-callout strong { color: var(--ink); }

.lc-legal-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: var(--fs-body);
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.lc-legal-table thead {
  background: var(--ink);
  color: var(--paper);
}
.lc-legal-table th {
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lc-legal-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--gray-1);
  color: var(--gray-4);
  vertical-align: top;
  line-height: 1.5;
}
.lc-legal-table tbody tr:hover { background: var(--cream); }
.lc-legal-table td strong { color: var(--ink); }

.lc-legal-related {
  max-width: 800px;
  margin: 48px 0 0;
  padding: 24px 26px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.lc-legal-related h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* [VALID-P4 HEAL 2026-06-10 WCAG 1.4.3] 11px "Voir aussi" caption: --orange (#FF5A1F)
     on white = 3.11:1 FAIL for small text. --orange-text (#C2410C) = 4.86:1 PASS AA.
     Mirrors the main-site --orange→--orange-text small-text migration (waves W-2..W-4). */
  color: var(--orange-text);
  margin: 0 0 14px;
}
.lc-legal-related ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lc-legal-related li a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: all var(--dur-fast) var(--ease-spring);
}
.lc-legal-related li a::before { content: '→'; color: var(--orange); font-weight: 400; }
.lc-legal-related li a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Footer link override (legal pages use <a> not <button>) */
.lc-footer-col li a {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  padding: 0; text-align: left;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
.lc-footer-col li a:hover { color: #fff; }

/* Allergen-specific grid */
.lc-legal-allergens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}
.lc-legal-allergens-grid .item {
  background: var(--paper);
  border: 1px solid var(--gray-1);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.lc-legal-allergens-grid .item strong {
  font-size: var(--fs-body);
  color: var(--ink);
}
.lc-legal-allergens-grid .item span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--gray-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .lc-legal-title { font-size: clamp(36px, 9vw, 56px); }
  /* [VALID-P4 HEAL 2026-06-10 WCAG 2.1.1] Below 600px tables become horizontally
     scrollable (display:block; overflow-x:auto). axe scrollable-region-focusable
     requires the scroll container to be keyboard-reachable — the tables now carry
     tabindex="0" (set in HTML); give that focus a visible ring. */
  .lc-legal-table { display: block; overflow-x: auto; }
}
.lc-legal-table:focus-visible {
  outline: 2px solid var(--orange-text, #C2410C);
  outline-offset: 2px;
}