/* Charte « Ce qui a du prix » — reprise de la note de présentation (FDD, 2026)
   Titres : Chewy (OFL, auto-hébergée) · texte bleu nuit · violet · magenta · rose · pêche */
@font-face { font-family: "Chewy"; src: url("../fonts/chewy.woff2") format("woff2"); font-display: swap; }
:root {
  --cadp-violet: #5d2d6a; --cadp-violet-fonce: #64296f; --cadp-magenta: #ff30f8;
  --cadp-texte: #1c3f60; --cadp-rose: #fad9f9; --cadp-peche: #f7cfa0;
  /* variables du thème Margot */
  --primary-color: #5d2d6a; --secondary-color-1: #ff30f8; --secondary-color-2: #f7cfa0;
  --neutral-color: #1c3f60; --link-color: #8a2f9c; --link-hover-color: #5d2d6a;
}
body { color: var(--cadp-texte); }
h1, h2, h3, .cadp-titre, #yw-topnav .navbar-brand, .navbar-brand { font-family: "Chewy", system-ui, sans-serif; color: var(--cadp-violet); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: 2.6rem; } h2 { font-size: 2rem; margin-top: 2.2rem; } h3 { font-size: 1.5rem; }

.cadp { max-width: 1050px; margin: 0 auto; font-size: 1.06rem; line-height: 1.6; }
.cadp-surtitre { display: inline-block; text-transform: uppercase; letter-spacing: .08em; font-style: italic; font-size: .8rem; color: var(--cadp-violet); border-left: 40px solid var(--cadp-violet); padding-left: .8rem; margin: .5rem 0 1rem; }
.cadp-hero { padding: 1rem 0 .5rem; }
.cadp-hero h1 { font-size: clamp(2.6rem, 7vw, 4.2rem); margin: 0 0 .6rem; }
.cadp-question { font-family: "Chewy", system-ui, sans-serif; color: var(--cadp-magenta); font-size: 1.6rem; margin: 0 0 .4rem; }
.cadp-intro { font-size: 1.2rem; max-width: 50rem; }

.cadp-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.cadp-chiffre { border-radius: 28px; padding: 1.4rem 1.6rem; }
.cadp-chiffre.rose { background: var(--cadp-rose); } .cadp-chiffre.peche { background: var(--cadp-peche); }
.cadp-chiffre strong { display: block; font-family: "Chewy", system-ui, sans-serif; font-weight: 400; font-size: 3rem; line-height: 1.1; color: var(--cadp-violet); margin-bottom: .3rem; }

.cadp-usages { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1.2rem; }
.cadp-usages li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start; }
.cadp-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--cadp-magenta); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 0 5px var(--cadp-rose); }
.cadp-usages b { color: var(--cadp-magenta); text-transform: uppercase; letter-spacing: .03em; }
.cadp-boutons { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }

a.cadp-btn, .cadp-btn { display: inline-block; border-radius: 999px; padding: .45rem 1.1rem; background: var(--cadp-violet); color: #fff !important; text-decoration: none !important; font-weight: 600; border: 2px solid var(--cadp-violet); }
a.cadp-btn:hover { background: var(--cadp-magenta); border-color: var(--cadp-magenta); }
a.cadp-btn.clair { background: transparent; color: var(--cadp-violet) !important; }
a.cadp-btn.clair:hover { background: var(--cadp-rose); color: var(--cadp-violet) !important; }

.cadp-encadre { border: 3px solid var(--cadp-violet); border-radius: 22px; padding: 1.2rem 1.5rem; margin: 2rem 0; }
.cadp-encadre.rose { border: 0; background: var(--cadp-rose); }
.cadp-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.cadp-regles li { background: var(--cadp-peche); border-radius: 20px; padding: 1rem 1.2rem; }
.cadp-regles li strong { display: block; font-family: "Chewy", system-ui, sans-serif; font-weight: 400; color: var(--cadp-violet); font-size: 1.35rem; }
.cadp-portage { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.cadp-portage img { max-width: 220px; height: auto; }
.cadp-note { font-size: .9rem; opacity: .85; }
blockquote.cadp-citation { border-left: 6px solid var(--cadp-magenta); background: #fff6fe; padding: .8rem 1.2rem; margin: 1.5rem 0; font-style: italic; }
@media (max-width: 600px) { .cadp-usages li { grid-template-columns: 2.8rem 1fr; } .cadp-chiffre strong { font-size: 2.4rem; } }