/* ═══════════════════════════════════════════════════════════════
   L'ATELIER CYCLES — Pages réglementaires
   Fichier complémentaire à main.css
   À charger après main.css dans les pages :
   <link rel="stylesheet" href="main.css">
   <link rel="stylesheet" href="legal.css">
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. Structure générale
   ─────────────────────────────────────────────────────────────── */

.legal-page {
  background: var(--bg-papier);
  color: var(--text-carbone);
}

.legal-container {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}

.legal-main {
  padding: 48px 0 80px;
}

/* ───────────────────────────────────────────────────────────────
   2. Hero spécifique pages réglementaires
   ─────────────────────────────────────────────────────────────── */

.legal-hero {
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 56px 0 44px;
  border-bottom: 4px solid var(--or);
}

.legal-breadcrumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
  color: rgba(224, 218, 198, 0.72);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-breadcrumbs a {
  color: var(--creme);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 218, 198, 0.35);
}

.legal-breadcrumbs a:hover {
  color: var(--or);
  border-bottom-color: var(--or);
}

.legal-hero__logo {
  max-width: 240px;
  height: auto;
  margin-bottom: 28px;
}

.legal-hero h1 {
  margin: 0 0 14px;
  color: var(--creme);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legal-hero p {
  max-width: 880px;
  margin: 0;
  color: rgba(224, 218, 198, 0.86);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: var(--font-weight-light);
}

/* ───────────────────────────────────────────────────────────────
   3. Cartes et contenu éditorial
   ─────────────────────────────────────────────────────────────── */

.legal-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(41, 59, 51, 0.14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 46px);
}

.legal-card h2 {
  margin: 40px 0 16px;
  color: var(--vert-fonce);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.22;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card h3 {
  margin: 28px 0 12px;
  color: var(--vert);
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: var(--font-weight-extrabold);
}

.legal-card p,
.legal-card li {
  color: var(--text-carbone);
  font-size: 1rem;
  line-height: 1.78;
  margin-bottom: 14px;
}

.legal-card ul,
.legal-card ol {
  list-style: revert;
  padding-left: 1.5rem;
  margin: 0 0 18px;
}

.legal-card a {
  color: var(--vert-fonce);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-card a:hover {
  color: var(--orange);
}

.legal-box {
  margin: 18px 0 22px;
  padding: 18px 20px;
  background: rgba(224, 218, 198, 0.45);
  border: 1px solid rgba(41, 59, 51, 0.16);
  border-left: 4px solid var(--or);
  border-radius: var(--radius-md);
}

.legal-note {
  margin: 0 0 28px;
  padding: 18px 20px;
  border-left: 4px solid var(--orange);
  background: rgba(208, 140, 9, 0.11);
  border-radius: var(--radius-md);
}

.legal-small {
  font-size: 0.92rem;
  color: rgba(29, 31, 32, 0.72);
}

.toc {
  margin: 0 0 30px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(41, 59, 51, 0.14);
  border-radius: var(--radius-md);
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

/* ───────────────────────────────────────────────────────────────
   4. Surlignage de pilotage
   Ces classes complètent celles déjà présentes dans main.css.
   Elles sont volontairement conservées dans ce fichier réglementaire.
   ─────────────────────────────────────────────────────────────── */

.legal-card .highlight-todo,
.legal-legend .highlight-todo {
  display: inline;
  background-color: #fff3cd;
  border-bottom: 2px solid #ffc107;
  color: #856404;
  padding: 0 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal-card .highlight-decision,
.legal-legend .highlight-decision {
  display: inline;
  background-color: #ffe5d0;
  border-bottom: 2px solid #fd7e14;
  color: #a04e0a;
  padding: 0 4px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal-card .highlight-t2,
.legal-legend .highlight-t2 {
  display: inline;
  background-color: #e7f1ff;
  border-bottom: 2px solid #0d6efd;
  color: #084298;
  padding: 2px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal-card .highlight-t3,
.legal-legend .highlight-t3 {
  display: inline;
  background-color: #f0f9ff;
  border-bottom: 2px solid #0dcaf0;
  color: #055160;
  padding: 2px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal-card .highlight-t4,
.legal-legend .highlight-t4 {
  display: inline;
  background-color: #eef2ff;
  border-bottom: 2px solid #6366f1;
  color: #312e81;
  padding: 2px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ───────────────────────────────────────────────────────────────
   5. Légende
   ─────────────────────────────────────────────────────────────── */

.legal-legend {
  margin-top: 48px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.74);
  border: 2px dashed rgba(41, 59, 51, 0.24);
  border-radius: var(--radius-md);
}

.legal-legend h2 {
  margin-top: 0;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.legend-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.55;
}

.legend-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex: 0 0 20px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  margin-top: 4px;
}

.legend-box.todo { background: #fff3cd; }
.legend-box.decision { background: #ffe5d0; }
.legend-box.t2 { background: #e7f1ff; }
.legend-box.t3 { background: #f0f9ff; }
.legend-box.t4 { background: #eef2ff; }

/* ───────────────────────────────────────────────────────────────
   6. Footer spécifique pages réglementaires
   ─────────────────────────────────────────────────────────────── */

.legal-footer {
  background: var(--vert-fonce);
  color: var(--creme);
  padding: 26px 0;
}

.legal-footer p {
  margin: 0;
}

.legal-footer a {
  color: var(--creme);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-footer a:hover {
  color: var(--or);
}

/* ───────────────────────────────────────────────────────────────
   7. Responsive
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .legal-container {
    width: min(100% - 28px, 1080px);
  }

  .legal-hero {
    padding: 38px 0 34px;
  }

  .legal-hero__logo {
    max-width: 200px;
  }

  .legal-main {
    padding: 28px 0 60px;
  }

  .legal-card {
    padding: 22px 18px;
  }

  .legal-card h2 {
    margin-top: 34px;
  }
}