/* ============================================================
   Pages légales (Cookie / Personal data / Legal notice) — V3
   Mise en page conforme à la maquette « LÉGALES » : titre centré,
   filet, sections (h2 noir), sous-titres (h3 bleu), corps, puces.
   Flux normal (pages texte, hauteur variable).
   ============================================================ */
.annex-d { background: #fff; min-height: 100vh; }

.annex-main { width: 1440px; padding: 220px 118px 110px; }
.annex-title { font-family: var(--f-unb); font-weight: 700; font-size: 48px; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; color: var(--black); }
.annex-rule { border: 0; border-top: 1px solid rgba(15, 17, 34, .25); margin: 40px 0 56px; }

.annex-body { font-family: var(--f-alb); font-size: 20px; line-height: 1.5; letter-spacing: -0.01em; color: var(--black); }
.annex-body h2 { font-family: var(--f-unb); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); margin: 48px 0 16px; }
.annex-body h2:first-child { margin-top: 0; }
.annex-body h3 { font-family: var(--f-unb); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: #72a5e3; margin: 26px 0 6px; }
.annex-body p { margin: 0 0 16px; }
.annex-body ul { margin: 0 0 16px; padding-left: 24px; list-style: disc; }
.annex-body li { margin-bottom: 6px; }
.annex-body a { color: var(--black); text-decoration: underline; }
.annex-body a:hover { text-decoration: none; }
.annex-note { font-size: 15px; color: rgba(15, 17, 34, .6); margin-top: 40px; }

/* Deux encarts côte à côte (Legal notice : hébergeur / éditeur) */
.annex-cards { display: flex; gap: 32px; margin: 24px 0; }
.annex-card { flex: 1; border: 2px solid var(--black); border-radius: 16px; padding: 33px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.annex-card .card-title { font-family: var(--f-unb); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); margin: 0; }
.annex-card p { margin: 0; }
.annex-card a { word-break: break-word; }

.annex-foot { width: 1440px; padding: 40px 118px 60px; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .annex-main { width: 390px; padding: 110px 20px 60px; }
  .annex-title { font-size: 28px; }
  .annex-rule { margin: 28px 0 36px; }
  .annex-body { font-size: 16px; }
  .annex-body h2 { font-size: 20px; margin: 36px 0 12px; }
  .annex-body h3 { font-size: 16px; }
  .annex-cards { flex-direction: column; gap: 16px; }
  /* Mobile : cartes contact ferrées à gauche (conforme au board « -mobil ») ; desktop reste centré */
  .annex-card { padding: 20px; align-items: flex-start; text-align: left; }
  .annex-card .card-title { font-size: 18px; }
  .annex-foot { width: 390px; padding: 24px 20px 40px; }
}