:root{
  --navy:#073566; --navy-deep:#052b52;
  --accent:#25bce3; --accent-hover:#14a6cc;
  --bg-soft:#f7fafd; --line:#dceaf5; --muted:#526b84; --tint:#eef5fc;
}
/* =====================================================================
   MutuelleClair — pages légales (mêmes couleurs / typo que l'accueil)
   dépend de landing.css (variables --navy, --accent, --bg-soft, ...)
   ===================================================================== */
body.is-legal { background: var(--bg-soft); }
#site-header { display: block; min-height: 124px; }
@media (max-width: 960px) { #site-header { min-height: 118px; } }

/* -------- hero intérieur -------- */
.lhero {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  display: flex; align-items: center; min-height: 300px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.lhero.is-in { opacity: 1; transform: none; }
.lhero__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lhero__deco::before, .lhero__deco::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(37, 188, 227, .28);
}
.lhero__deco::before { width: 360px; height: 360px; right: -120px; top: -140px;
  box-shadow: 0 0 120px rgba(37, 188, 227, .18) inset; }
.lhero__deco::after { width: 220px; height: 220px; right: 120px; bottom: -150px;
  background: radial-gradient(circle at 30% 30%, rgba(37, 188, 227, .16), rgba(37, 188, 227, 0) 70%);
  border-color: transparent; }
.lhero__inner { position: relative; z-index: 2; width: min(100% - 40px, 1100px);
  margin-inline: auto; padding: clamp(36px, 6vw, 56px) 0; }
.lcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font-size: .86rem; color: rgba(255, 255, 255, .72); margin-bottom: 14px; }
.lcrumb a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 2px; }
.lcrumb a:hover { color: var(--accent); }
.lcrumb [aria-current] { color: #fff; font-weight: 800; }
.lhero h1 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.2; }
.lhero__intro { margin: 12px 0 0; max-width: 62ch; color: rgba(255, 255, 255, .85);
  font-size: 1.02rem; line-height: 1.6; }
.lhero__date { margin: 12px 0 0; font-size: .86rem; font-weight: 800; color: var(--accent); }

/* -------- carte de contenu -------- */
.lwrap { padding: clamp(26px, 5vw, 52px) 0 clamp(46px, 7vw, 78px); }
.lwrap__inner { width: min(100% - 40px, 950px); margin-inline: auto; }
.lwrap--wide .lwrap__inner { max-width: 1100px; }
.lcard {
  background: #fff; border: 1px solid #dceaf5; border-radius: 22px;
  box-shadow: 0 16px 44px -26px rgba(7, 53, 102, .22);
  padding: clamp(48px, 5vw, 64px);
}
@media (max-width: 760px) { .lcard { padding: 24px; border-radius: 18px; } }

/* -------- sommaire latéral + contenu -------- */
.lgrid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 4vw, 46px); align-items: start; }
.ltoc { position: sticky; top: 150px; align-self: start; }
.ltoc__title { margin: 0 0 12px; font-size: .78rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy); }
.ltoc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.ltoc a { display: flex; gap: 9px; align-items: baseline; padding: 8px 10px; border-radius: 9px;
  color: var(--muted); font-size: .92rem; line-height: 1.35; text-decoration: none;
  transition: background .2s ease, color .2s ease; }
.ltoc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero);
  color: var(--accent); font-weight: 900; font-size: .76rem; flex: 0 0 auto; }
.ltoc a:hover { background: var(--bg-soft); color: var(--navy); }
.ltoc a.is-active { background: rgba(37, 188, 227, .12); color: var(--navy); font-weight: 800; }

.ltoc--accordion { position: static; border: 1px solid #dceaf5; border-radius: 14px;
  padding: 4px 8px; margin-bottom: 22px; background: var(--bg-soft); }
.ltoc--accordion > summary { list-style: none; cursor: pointer; padding: 12px 8px;
  font-weight: 900; color: var(--navy); display: flex; align-items: center; justify-content: space-between; }
.ltoc--accordion > summary::-webkit-details-marker { display: none; }
.ltoc--accordion > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.ltoc--accordion[open] > summary::after { transform: rotate(225deg); }
.ltoc--accordion .ltoc { position: static; }
.ltoc--accordion ol { padding: 0 4px 8px; }

@media (min-width: 901px) { .ltoc--accordion { display: none; } }
@media (max-width: 900px) {
  .lgrid { grid-template-columns: 1fr; }
  .lgrid > .ltoc:not(.ltoc--accordion) { display: none; }
}

/* -------- corps juridique -------- */
.ldoc { color: #33475f; font-size: 1.06rem; line-height: 1.8; max-width: 72ch; }
.ldoc > section { scroll-margin-top: 150px; }
.ldoc h2 { color: var(--navy); font-size: 1.3rem; font-weight: 900; line-height: 1.3; margin: 2.2em 0 .55em; }
.ldoc > section:first-child h2 { margin-top: 0; }
.ldoc h3 { color: var(--navy); font-size: 1.08rem; font-weight: 800; line-height: 1.35;
  margin: 1.6em 0 .5em; padding-left: 14px; position: relative; }
.ldoc h3::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px; background: var(--accent); }
.ldoc p { margin: 0 0 1em; }
.ldoc strong { color: var(--navy); }
.ldoc a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.ldoc a:hover { color: var(--navy); }
.ldoc ul { list-style: none; margin: 0 0 1.2em; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.ldoc ul li { position: relative; padding-left: 28px; }
.ldoc ul li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(37, 188, 227, .16); }
.ldoc ul li::after { content: ""; position: absolute; left: 5px; top: .58em; width: 7px; height: 4px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ldoc dl { margin: 0 0 1.2em; display: grid; grid-template-columns: max-content 1fr; gap: .35em 1em; }
.ldoc dl dt { color: var(--navy); font-weight: 800; }
.ldoc dl dd { margin: 0; }
@media (max-width: 560px) { .ldoc dl { grid-template-columns: 1fr; gap: .1em 0; }
  .ldoc dl dd { margin-bottom: .6em; } }

/* -------- encadrés -------- */
.lbox { border-radius: 14px; padding: 20px 22px; margin: 1.7em 0; font-size: 1rem; line-height: 1.7; }
.lbox > :last-child { margin-bottom: 0; }
.lbox__head { display: flex; align-items: center; gap: 10px; font-weight: 900; color: var(--navy); margin-bottom: 8px; }
.lbox__head svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--accent); }
.lbox--info { background: var(--bg-soft); border-left: 4px solid var(--accent); }
.lbox--reg { background: #fff; border: 1.5px solid var(--navy); }
.lbox--contact { background: var(--navy); color: #fff; }
.lbox--contact .lbox__head { color: #fff; }
.lbox--contact a { color: #bdeffb; }
.lbox .btn { margin-top: 12px; }

/* -------- tableau cookies -> cartes en mobile -------- */
.ctable { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.ctable caption { text-align: left; color: var(--muted); font-size: .9rem; margin-bottom: .6em; }
.ctable th, .ctable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #dceaf5; vertical-align: top; }
.ctable thead th { background: var(--bg-soft); color: var(--navy); font-weight: 900;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.ctable tbody tr:hover { background: #fafdff; }
.ctable__scroll { overflow-x: auto; }
@media (max-width: 780px) {
  .ctable, .ctable thead, .ctable tbody, .ctable tr, .ctable td { display: block; width: 100%; }
  .ctable thead { position: absolute; left: -9999px; }
  .ctable tr { border: 1px solid #dceaf5; border-radius: 12px; padding: 6px; margin-bottom: 12px; }
  .ctable td { border: 0; padding: 8px 10px; display: flex; gap: 12px; }
  .ctable td::before { content: attr(data-label); flex: 0 0 40%; font-weight: 800; color: var(--navy); }
}

/* -------- bloc "autres informations utiles" -------- */
.lmore { width: min(100% - 40px, 950px); margin: clamp(28px, 4vw, 44px) auto 0; }
.lmore__title { margin: 0 0 14px; text-align: center; color: var(--navy); font-size: 1.12rem; font-weight: 900; }
.lmore__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lmore__card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff;
  border: 1px solid #dceaf5; border-radius: 14px; color: var(--navy); font-weight: 800; font-size: .95rem;
  line-height: 1.3; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lmore__card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(7, 53, 102, .3); }
.lmore__card[aria-current] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lmore__card small { font-size: .74rem; font-weight: 800; color: var(--accent-hover); letter-spacing: .02em; }
@media (max-width: 820px) { .lmore__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .lmore__grid { grid-template-columns: 1fr; } }

.ltop { display: inline-flex; align-items: center; gap: 6px; margin-top: 2.2em;
  color: var(--accent-hover); font-weight: 800; font-size: .92rem; }
.ltop:hover { color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .lhero { opacity: 1; transform: none; transition: none; }
  .lmore__card, .ltoc a, .ltoc--accordion > summary::after { transition: none; }
}