/* =========================================================
   legal — mise en page des pages legales
   ---------------------------------------------------------
   Page de texte long : lisibilite avant tout. Mesure courte,
   interlignage genereux, reperes de section bien marques.
   Le chrome (site.css) et les patrons (layout.css) fournissent
   deja .hero, .breadcrumb et .section.
   ========================================================= */

/* ============ FIL D'ARIANE ============ */
.breadcrumb{background:var(--cream-2);border-bottom:1px solid var(--line);font-size:.86rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{color:var(--navy);font-weight:600}

/* ============ HERO SOBRE (pas de colonne visuelle) ============ */
.hero-inner{padding:64px 24px 68px;position:relative;z-index:1;max-width:820px}
.hero h1{color:#fff;font-size:clamp(2rem,4.2vw,2.9rem);margin:14px 0 16px}
.hero .maj{color:rgba(255,255,255,.72);font-size:.95rem}

/* ============ SECTION ============ */
.section{padding:72px 0}

/* ============ CORPS DU TEXTE LEGAL ============ */
.legal{max-width:74ch}

/* Preambule : paragraphes hors numerotation, avant l'article 1 */
.legal-preambule{padding-bottom:40px;border-bottom:1px solid var(--line)}
.legal-preambule p{font-size:1.06rem}
.legal-preambule + .legal-art{margin-top:44px}

/* Chaque article : numero en pastille + titre */
.legal-art + .legal-art{margin-top:44px;padding-top:40px;border-top:1px solid var(--line)}
.legal-art h2{
  display:flex;align-items:baseline;gap:.7rem;
  font-size:clamp(1.3rem,2.4vw,1.6rem);margin-bottom:18px;
}
.legal-art h2 .n{
  flex:none;font-size:.86rem;font-weight:800;color:var(--accent);
  background:var(--cream-2);border-radius:8px;padding:.28rem .6rem;line-height:1;
}

.legal p{color:var(--muted);font-size:1.02rem;line-height:1.75}
.legal p + p{margin-top:14px}
.legal p b,.legal strong{color:var(--navy);font-weight:600}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent)}

/* Liste des intervenants / des lois : libelle + valeur */
.legal-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.legal-list li{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--sand);
  border-radius:var(--radius-sm);padding:14px 18px;color:var(--muted);font-size:1rem;line-height:1.6;
}
.legal-list li b{display:block;color:var(--navy);font-family:var(--font-title);font-size:.94rem;margin-bottom:2px}

/* Definitions du lexique */
.legal-def{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:18px}
.legal-def dt,.legal-def li b{color:var(--navy);font-family:var(--font-title);font-weight:700}
.legal-def li{color:var(--muted);font-size:1.02rem;line-height:1.75}

/* Encart de rappel (bas de page) */
.legal-note{
  margin-top:48px;background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;display:flex;gap:14px;align-items:flex-start;
}
.legal-note .ico{color:var(--accent);flex:none;margin-top:2px}
.legal-note p{color:var(--navy);font-size:.98rem;margin:0}
.legal-note a{color:var(--blue);text-decoration:underline}

/* ============ RESPONSIVE ============ */
@media (max-width:680px){
  .section{padding:52px 0}
  .hero-inner{padding:44px 24px 48px}
  .legal-art + .legal-art{margin-top:34px;padding-top:30px}
  .legal-art h2{flex-direction:column;gap:.5rem}
  .legal-art h2 .n{align-self:flex-start}
  .legal-note{flex-direction:column;gap:10px}
}