/* ════════════════════════════════════════════════════════════════════════════
   LEGAL.CSS — pages légales (mentions légales, confidentialité, cookies, réclamations)
   Refait le 2026-10-27 (« fais les pages en fonction de notre CSS ») : ces pages étaient sur le gabarit d'article (sommaire, titres numérotés « 01 »,
   titres soulignés, colonne de 860 px). Elles reprennent maintenant les composants de la charte, comme l'accueil et les pages univers :
     • héros commun : section.hero.hero-univers.hero-legal (css/univers.css) — seul l'aplat marine est défini ici ;
     • sections empilées .lg-sec, fond blanc puis greige un cran sur deux (le greige de l'accueil, --hm-greige), contenu dans .hm-wrap (1280 px) ;
     • titre de section = .hm-title, paragraphes = .hm-desc (home2.css) ; seules les largeurs, listes et tableaux sont propres à cette feuille.
   Pile : global.css, header.css, devis-modal.css, home2.css, univers.css, legal.css. Aucune couleur en dur : tout vient des jetons du site.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Héros : aplat marine (page sans univers) ── */
.hero-legal{background-color:var(--navy,#1c1c36)}

/* ── Sections de texte ── */
.lg-sec{background:#fff;padding:72px 2.5rem}
.lg-sec.lg-alt{background:var(--hm-greige,#efe9e5)}
.lg-sec .hm-title{margin-bottom:24px}
/* un paragraphe de texte juridique prend TOUTE la largeur du conteneur (.hm-desc le limite à 620 px sur l'accueil) */
.lg-sec .lg-p{max-width:none;margin-top:16px}
.lg-sec .hm-title+.lg-p{margin-top:0}
.lg-h3{font-size:var(--ty-h4-size);font-weight:600;line-height:1.3;color:var(--navy,#1c1c36);margin:32px 0 0}
.lg-h3+.lg-p{margin-top:12px}
.lg-sec strong{font-weight:600}

/* liens : le bleu de la charte (celui des surtitres et du bandeau d'appel), soulignés ; une URL longue passe à la ligne */
.lg-sec a{color:var(--hm-blue,#668CC2);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.lg-sec a:hover{color:var(--navy,#1c1c36)}

/* ── Listes ── */
.lg-list{margin:16px 0 0;padding-left:1.4rem;font-size:var(--ty-body);line-height:1.6;color:var(--navy,#1c1c36)}
.lg-list li{margin-top:8px}
.lg-list li::marker{color:var(--hm-blue,#668CC2)}

/* ── Tableaux (cookies) : défilent dans leur conteneur plutôt que d'écraser leurs colonnes ── */
.lg-table-wrap{margin-top:20px;overflow-x:auto;background:#fff;border:1px solid var(--border,#e2e5ea);border-radius:var(--r-lg,16px)}
.lg-table{width:100%;border-collapse:collapse;font-size:var(--ty-body);line-height:1.55;color:var(--navy,#1c1c36)}
.lg-table th{background:var(--navy,#1c1c36);color:#fff;text-align:left;font-size:var(--ty-xs);font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:14px 18px}
.lg-table td{padding:14px 18px;vertical-align:top;border-top:1px solid var(--border,#e2e5ea)}
.lg-table tbody tr:first-child td{border-top:none}
.lg-table thead+tbody tr:first-child td{border-top:none}
.lg-table th,.lg-table td{min-width:150px}
.lg-table td:first-child{font-weight:600}

/* ── Téléphone ── */
@media(max-width:768px){
  .lg-sec{padding:48px 1.25rem}
  .lg-sec .hm-title{margin-bottom:16px}
  .lg-table th,.lg-table td{padding:12px 14px}
}