/* Guide « Le coût de la vie » (cout-neuf.html, cout.js). Repris : apparitions et barres (pourcontre.css), conseil (installer.css), liste des régions (climat.css). */

/* ---------- budget ---------- */
.co-niveaux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px auto 0; max-width: 980px; }
.co-niveaux button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; cursor: pointer; background: #fff;
  box-shadow: 0 2px 4px rgb(15 42 61 / .06), 0 12px 24px -18px rgb(15 42 61 / .55); transition: transform .3s var(--courbe), box-shadow .3s, background .3s; }
.co-niveaux button:hover { transform: translateY(-2px); }
.co-niveaux button:focus-visible { outline: 2px solid var(--b2); outline-offset: 3px; }
.co-niveaux img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.co-niveaux b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.co-niveaux small { font-size: 13.5px; font-weight: 700; color: var(--b1); }
.co-niveaux button.on { background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 16px 30px -14px rgb(28 125 179 / .9); }
.co-niveaux button.on b, .co-niveaux button.on small { color: #fff; }

.co-budget { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 22px; border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 30px 50px -36px rgb(15 42 61 / .6); animation: pcEntre .45s var(--courbe); }
.co-budget[hidden] { display: none; }
.co-budget-photo { position: relative; min-height: 420px; overflow: hidden; }
.co-budget-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: inKen 18s ease-in-out infinite alternate; }
.co-budget-niv { position: absolute; left: 18px; top: 18px; padding: 7px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #fff;
  background: rgb(15 42 61 / .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .3); }
.co-budget-corps { padding: 30px 34px; }
.co-budget-texte { margin: 0; font-size: 15px; font-weight: 700; color: var(--mute); }
.co-total { display: flex; align-items: flex-end; gap: 14px; margin: 6px 0 0; }
.co-total b { font-size: clamp(46px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1; background: linear-gradient(90deg, var(--b2), var(--g)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-total span { padding-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.co-total small { display: block; font-size: 13px; font-weight: 600; color: var(--mute); }
.co-postes { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.co-postes li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
.co-postes li > i { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border-radius: 11px; color: var(--b1); background: var(--lb); }
.co-postes svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.co-poste-t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.co-postes b { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.co-poste-b { grid-column: 2 / span 2; height: 8px; border-radius: 99px; background: rgb(15 42 61 / .07); overflow: hidden; }
.co-poste-b i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--b2), var(--g)); transition: width 1s var(--courbe); transition-delay: calc(var(--i) * 90ms); }
.co-budget.vu .co-poste-b i { width: var(--v); }
.co-note { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--mute); }
.co-note.clair { margin-top: 24px; color: rgb(255 255 255 / .55); }

/* ---------- prix ---------- */
.co-prix { padding: 76px 0 64px; }
.co-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.co-cats button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 10px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); transition: background .3s, color .3s; }
.co-cats button:hover { background: rgb(255 255 255 / .14); }
.co-cats button:focus-visible { outline: 2px solid #fde68a; outline-offset: 3px; }
.co-cats i { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgb(255 255 255 / .12); }
.co-cats svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.co-cats button.on { color: #0f2a3d; background: #fff; }
.co-cats button.on i { color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); }
.co-legende { display: flex; gap: 20px; margin: 18px 0 0; font-size: 13px; color: rgb(255 255 255 / .75); }
.co-legende span { display: inline-flex; align-items: center; gap: 7px; }
.co-legende i { width: 14px; height: 8px; border-radius: 99px; }
.co-legende i.mu, .co-l-b.mu i { background: linear-gradient(90deg, #7fd0f5, #28a3e6); }
.co-legende i.fr, .co-l-b.fr i { background: rgb(255 255 255 / .35); }

.co-lignes { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.co-lignes[hidden] { display: none; }
.co-lignes li { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 110px; align-items: center; gap: 20px; padding: 14px 18px; border-radius: 18px;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); animation: pcEntre .5s var(--courbe) both; animation-delay: calc(var(--i) * 60ms); }
.co-l-t b { display: block; font-size: 15.5px; font-weight: 700; color: #fff; }
.co-l-t small { font-size: 13px; color: rgb(255 255 255 / .6); }
.co-l-barres { display: grid; gap: 7px; }
.co-l-b { display: flex; align-items: center; gap: 10px; }
.co-l-b i { display: block; height: 10px; border-radius: 99px; flex: none; animation: coPousse 1s var(--courbe) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
.co-l-b.mu i { width: calc(var(--pm) * .72); }
.co-l-b.fr i { width: calc(var(--pf) * .72); }
@keyframes coPousse { from { width: 0; } }
.co-l-b em { font-style: normal; font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; }
.co-l-b em small { font-weight: 600; color: #9fd8f7; }
.co-l-b.fr em { font-weight: 600; color: rgb(255 255 255 / .7); }
.co-ecart { justify-self: end; text-align: center; padding: 7px 10px; border-radius: 14px; font-size: 18px; font-weight: 800; line-height: 1.05; }
.co-ecart small { display: block; font-size: 11px; font-weight: 700; }
.co-ecart.moins { color: #0f2a3d; background: #7ee2a8; }
.co-ecart.plus { color: #fff; background: #e05656; }

/* ---------- salaires ---------- */
.co-sal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.co-sal li { padding: 24px 22px; border-radius: 24px; text-align: center; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 22px 40px -30px rgb(15 42 61 / .6); }
.co-sal li:first-child { color: #fff; background: radial-gradient(circle at 20% 0%, rgb(40 163 230 / .6), transparent 55%), #0f2a3d; }
.co-sal b { display: block; font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -.02em; color: var(--b1); }
.co-sal li:first-child b { color: #fde68a; }
.co-sal .co-sal-eur { display: block; font-size: 14px; font-weight: 700; color: var(--mute); }
.co-sal li:first-child .co-sal-eur { color: rgb(255 255 255 / .7); }
.co-sal span { display: block; margin-top: 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.co-sal li:first-child span { color: #fff; }
.co-sal li > small:last-child { display: block; margin-top: 4px; font-size: 13px; color: var(--mute); }
.co-sal li:first-child > small:last-child { color: rgb(255 255 255 / .6); }
.co-secteurs { margin: 22px auto 0; max-width: 860px; padding: 24px 28px; border-radius: 24px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 22px 40px -30px rgb(15 42 61 / .6); }
.co-secteurs-t { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--b1); }
.co-secteurs ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.co-secteurs li { display: grid; grid-template-columns: 240px minmax(0, 1fr) 100px; align-items: center; gap: 14px; padding: 6px 10px; border-radius: 12px; font-size: 14.5px; color: var(--ink); }
.co-secteurs li > span:first-child { font-weight: 700; }
.co-secteurs li b { text-align: right; font-weight: 800; }
.co-secteurs li.moy { color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); }
.co-secteurs li.moy .pc-classe-b { background: rgb(255 255 255 / .25); }
.co-secteurs li.moy .pc-classe-b i { background: linear-gradient(90deg, #fde68a, #fff); }
.co-centre { margin: 24px 0 0; text-align: center; }

/* ---------- loyers ---------- */
.co-loyers { padding: 80px 0; }
.co-loyers-liste li { grid-template-columns: 78px minmax(0, 1fr) 170px; }
.co-plage { position: relative; display: block; height: 8px; margin-top: 8px; border-radius: 99px; background: rgb(15 42 61 / .07); }
.co-plage i { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--z)); border-radius: inherit; background: linear-gradient(90deg, #9fd8f7, var(--b1));
  transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--courbe); transition-delay: calc(var(--i) * 110ms); }
.vu .co-plage i { transform: none; }
.co-loyers-liste .cl-reg-n b { font-size: 16px; }

@media (max-width: 960px) {
  .co-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-budget { grid-template-columns: minmax(0, 1fr); }
  .co-budget-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .co-lignes li { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px 14px; }
  .co-l-barres { grid-column: 1 / span 2; grid-row: 2; }
  .co-ecart { grid-row: 1; grid-column: 2; }
  .co-sal { grid-template-columns: minmax(0, 1fr); }
  .co-secteurs li { grid-template-columns: minmax(0, 1fr) 90px; }
  .co-secteurs li .pc-classe-b { grid-column: 1 / span 2; grid-row: 2; }
}
@media (max-width: 600px) {
  .co-niveaux { gap: 8px; }
  .co-niveaux button { padding: 6px 10px 6px 6px; gap: 8px; }
  .co-niveaux img { width: 42px; height: 42px; }
  .co-niveaux b { font-size: 14px; }
  .co-budget-corps { padding: 22px 18px; }
  .co-cats { flex-wrap: nowrap; overflow-x: auto; margin: 22px -16px 0; padding: 2px 16px 8px; scrollbar-width: none; }
  .co-cats::-webkit-scrollbar { display: none; }
  .co-cats button { flex: none; }
  .co-lignes li { padding: 12px 14px; }
  .co-l-b.mu i { width: calc(var(--pm) * .45); }
  .co-l-b.fr i { width: calc(var(--pf) * .45); }
  .co-secteurs { padding: 18px 14px; }
  .co-loyers-liste li { grid-template-columns: 56px minmax(0, 1fr); }
  .co-loyers-liste .cl-reg-n { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .co-budget-photo img { animation: none; }
  .co-poste-b i, .co-plage i { transition: none; }
  .co-lignes li, .co-l-b i { animation: none; }
}