/* BEC — pages de référence : Mentions légales et Transparence (après site.css). Même registre que
   À propos : un fond, des filets fins, du texte composé ; un intitulé à gauche, le contenu à droite.
   Préfixes ml- (commun) et tp- (Transparence). */

main { background: var(--canvas); }

.ml-intro { padding: calc(var(--header-h) + clamp(56px, 7vw, 112px)) 0 clamp(40px, 5vw, 72px); }
.ml-page-title { margin-top: 24px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.036em; font-weight: 560; }
.ml-sub { margin-top: 20px; max-width: 40em; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

.ml-content { padding-bottom: clamp(72px, 8vw, 120px); }
.ml-block { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); gap: 16px clamp(40px, 5vw, 80px); padding: 32px 0 36px; border-top: 1px solid var(--border-strong); }
.ml-label { padding-top: 4px; font-size: 12px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--ink-faint); }
.ml-body { display: grid; gap: 14px; max-width: 46em; }
.ml-title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.ml-body > p { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
.ml-list { display: grid; margin-top: 2px; border-top: 1px solid var(--border); }
.ml-list > div { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: 4px 20px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ml-list dt { font-size: 14px; color: var(--ink-faint); }
.ml-list dd { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ml-note { font-size: 13.5px !important; color: var(--ink-faint) !important; }
.ml-legal { padding-left: 16px; border-left: 2px solid var(--cobalt); font-size: 16px !important; line-height: 1.6 !important; font-weight: 500; color: var(--ink) !important; }
/* information manquante, à fournir avant la mise en ligne */
.ml-todo { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: #FFF6E5; box-shadow: inset 0 0 0 1px rgba(184, 116, 0, 0.35); font-size: 13px; font-weight: 600; color: var(--p-partial-text); }
.ml-updated { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--border-strong); font-size: 13px; color: var(--ink-faint); }

/* Transparence : les étapes de production, les engagements */
.tp-steps { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--border); }
.tp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0 18px; border-bottom: 1px solid var(--border); }
.tp-steps .mono { padding-top: 3px; font-size: 12px; font-weight: 600; color: var(--cobalt); }
.tp-steps h3 { font-size: 16.5px; line-height: 1.35; font-weight: 650; letter-spacing: -0.012em; }
.tp-steps p { margin-top: 5px; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.tp-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.tp-list li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--border); font-size: 15.5px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.tp-list li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 8px; height: 1.5px; background: var(--cobalt); }
.tp-subs { margin-top: 10px; }
.ml-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .ml-block { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0 28px; }
  .ml-list > div { grid-template-columns: minmax(0, 1fr); }
}