/*
 * Carte de risque cardio-vasculaire OMS/ISH (sous-région AFR D)
 * Styles du moteur partagé par les pages « carte-risque » et « carte-risque-exemple ».
 * Tout est préfixé .cv pour ne jamais déborder sur le reste du thème.
 * Les couleurs de risque et des bandeaux homme / femme reproduisent la carte OMS :
 * elles ne suivent pas la charte du site, c'est voulu.
 */
.cv {
	--cv-primary: #00B955;
	--cv-secondary: #1562B1;
	--cv-dark: #132844;
	--cv-light: #DCE3EA;
	--cv-muted: #5b6b80;
	--cv-male-light: #fff3a3;
	--cv-male-dark: #b8a64f;
	--cv-female-light: #e9d3ff;
	--cv-female-dark: #6f3aa6;
	--cv-G: #4bdd70;
	--cv-Y: #fff700;
	--cv-O: #ff8b00;
	--cv-R: #f60003;
	--cv-D: #9f0306;
	--cell: 36px;
	--cell-h: 28px;
	--age-font: 28px;
	--smoke-font: 14px;
	--chol-font: 13px;
	color: var(--cv-dark);
}
.cv [hidden] { display: none !important; }

/* ---- Énoncé du cas (démo) ---- */
.cv-case { background: var(--cv-dark); color: #fff; border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.cv-case-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cv-primary); font-weight: 700; margin-bottom: .5rem; }
.cv-case ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.cv-case li { font-size: .95rem; }
.cv-case li b { color: var(--cv-light); font-weight: 600; margin-right: .25rem; }

/* ---- Étapes ---- */
.cv-steps { display: flex; flex-wrap: wrap; gap: .375rem; list-style: none; margin: 0 0 .75rem; padding: 0; counter-reset: cvstep; }
.cv-step { counter-increment: cvstep; font-size: .8rem; padding: .3rem .75rem; border-radius: .5rem; background: var(--cv-light); color: var(--cv-muted); }
.cv-step::before { content: counter(cvstep) ". "; font-weight: 700; }
.cv-step.is-current { background: var(--cv-secondary); color: #fff; font-weight: 600; }
.cv-step.is-done { background: var(--cv-primary); color: #fff; }

/* ---- Consigne : bandeau plein, l'étape en cours doit sauter aux yeux ---- */
.cv-hint { display: flex; gap: 1.25rem; align-items: center; background: var(--cv-secondary); color: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; transition: background-color .3s ease; }
.cv-hint.is-done { background: var(--cv-primary); }
.cv-hint.is-pop { animation: cvPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cvPop { 0% { transform: scale(.94); opacity: .6; } 60% { transform: scale(1.025); opacity: 1; } 100% { transform: scale(1); } }
.cv-hint-num { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: .75rem; background: #fff; color: var(--cv-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cv-hint-num b { font-size: 2.25rem; font-weight: 800; }
.cv-hint-num span { font-size: .75rem; font-weight: 600; margin-top: .2rem; }
.cv-hint-num i { font-size: 2rem; }
.cv-hint.is-done .cv-hint-num { color: var(--cv-primary); }
.cv-hint-body { flex: 1; min-width: 0; }
.cv-hint-body p { margin: 0; }
.cv-hint-feedback { display: inline-flex; gap: .5rem; align-items: baseline; font-size: .9rem; font-weight: 600; padding: .3rem .75rem; border-radius: .5rem; margin-bottom: .6rem !important; }
.cv-hint-feedback.is-ok { background: var(--cv-primary); }
.cv-hint-feedback.is-bad { background: #E3170A; }
.cv-hint-feedback.is-done { background: var(--cv-dark); }
.cv-hint-step { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.cv-hint-step::after { content: ""; display: block; width: 2.5rem; height: 3px; background: #fff; margin: .35rem 0 .5rem; }
.cv-hint.is-done .cv-hint-step::after { background: var(--cv-dark); }
.cv-hint-text { font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.cv-hint-small { font-size: .9rem; opacity: .9; margin-top: .4rem !important; }

/* ---- Choix du tableau ---- */
.cv-chooser { text-align: center; }
.cv-chooser h2 { font-size: 1.35rem; margin-bottom: .25rem; }
.cv-chooser > p { color: var(--cv-muted); margin-bottom: 1.25rem; }
.cv-choices { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.cv-choice { flex: 1 1 320px; max-width: 480px; display: flex; flex-direction: column; gap: .75rem; background: #fff; border: 1px solid var(--cv-light); border-radius: 1rem; padding: 1rem; }
.cv-choice .btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .75rem 1rem; font-weight: 600; font-size: 1.05rem; }
.cv-choice .btn small { font-weight: 400; font-size: .8rem; opacity: .9; }
.cv-mini { overflow: hidden; }
.cv-mini-sex { display: flex; margin-bottom: .4rem; }
.cv-mini-sex span { flex: 1; font-size: .75rem; font-weight: 700; letter-spacing: .05em; color: var(--cv-muted); }
.cv-mini-strips { display: flex; gap: 6px; justify-content: center; }
.cv-mini-strip { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 6px; }
.cv-mini-panel { display: grid; grid-template-columns: repeat(5, 1fr); width: 60px; aspect-ratio: 5 / 4; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.cv-mini-strip[data-key="male_no"],   .cv-strip[data-key="male_no"]    { background: var(--cv-male-light); }
.cv-mini-strip[data-key="male_yes"],  .cv-strip[data-key="male_yes"]   { background: var(--cv-male-dark); color: #fff; }
.cv-mini-strip[data-key="female_no"], .cv-strip[data-key="female_no"]  { background: var(--cv-female-light); }
.cv-mini-strip[data-key="female_yes"],.cv-strip[data-key="female_yes"] { background: var(--cv-female-dark); color: #fff; }

/* ---- Tableau choisi ---- */
.cv-table-tag { display: inline-block; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: .4rem; background: var(--cv-light); color: var(--cv-dark); margin-bottom: .5rem; }

/* ---- Carte ---- */
.cv-board-wrap { position: relative; background: #fff; border: 1px solid var(--cv-light); border-radius: 1rem; overflow: hidden; padding: 16px; display: flex; justify-content: center; align-items: flex-start; }
.cv-board { display: grid; grid-template-columns: 90px repeat(4, auto) 70px; column-gap: 14px; align-items: stretch; user-select: none; transform-origin: top center; transition: transform .45s ease; }
.cv-sex-head { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: end; margin-bottom: 6px; }
.cv-label-homme { grid-column: 2 / 4; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: .5px; padding-bottom: 6px; border-bottom: 2px dashed #f7d34a; color: #5a4a00; }
.cv-label-femme { grid-column: 4 / 6; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: .5px; padding-bottom: 6px; border-bottom: 2px dashed #b069e8; color: #3d106a; }
.cv-age-title { grid-column: 1 / 2; font-size: 18px; font-weight: 600; padding: 0 0 6px 6px; }
.cv-age-sub { font-size: 11px; font-weight: 400; color: var(--cv-muted); }
.cv-tas-title { grid-column: 6 / 7; font-size: 12px; font-weight: 700; padding-bottom: 6px; text-align: center; line-height: 1.15; }
.cv-tas-title span { font-weight: 400; }

.cv-strip { display: grid; grid-template-rows: 38px repeat(4, auto) 30px; border-radius: 18px; padding: 10px 10px 6px; position: relative; transition: opacity .35s ease, transform .45s ease; }
.cv-smoke-head { display: flex; align-items: center; justify-content: center; font-size: var(--smoke-font); font-weight: 600; letter-spacing: .5px; transition: font-size .35s ease; }
.cv-panel { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(4, var(--cell-h)); border-radius: 8px; overflow: hidden; margin: 4px 0; background: rgba(0,0,0,.05); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: opacity .35s ease, transform .45s ease; }
.cv-cell { border: 1px solid rgba(0,0,0,.45); margin: -.5px; transition: opacity .35s ease, transform .45s ease; }
.cv-cell[data-color="G"], .cv-swatch[data-color="G"] { background: var(--cv-G); }
.cv-cell[data-color="Y"], .cv-swatch[data-color="Y"] { background: var(--cv-Y); }
.cv-cell[data-color="O"], .cv-swatch[data-color="O"] { background: var(--cv-O); }
.cv-cell[data-color="R"], .cv-swatch[data-color="R"] { background: var(--cv-R); }
.cv-cell[data-color="D"], .cv-swatch[data-color="D"] { background: var(--cv-D); }
.cv-chol-row { display: grid; grid-template-columns: repeat(5, var(--cell)); text-align: center; font-size: var(--chol-font); font-weight: 600; padding-top: 4px; transition: font-size .35s ease; }

.cv-age-col { display: grid; grid-template-rows: 38px repeat(4, auto) 30px; align-items: center; justify-items: end; padding-right: 8px; }
.cv-age-cell { font-size: var(--age-font); font-weight: 600; padding: 8px 6px 8px 0; border-right: 2px dashed #ccd5df; height: 100%; display: flex; align-items: center; transition: font-size .35s ease, opacity .35s ease; }
.cv-age-cell:first-child { visibility: hidden; }
.cv-chol-label { font-size: 11px; color: var(--cv-muted); text-align: right; align-self: center; }

.cv-tas-col { display: grid; grid-template-rows: 38px repeat(4, auto) 30px; align-items: stretch; justify-items: start; padding-left: 6px; }
.cv-tas-block { display: grid; grid-template-rows: repeat(4, var(--cell-h)); align-items: center; font-size: 11px; border-left: 2px dashed #ccd5df; padding-left: 6px; margin: 4px 0; transition: opacity .35s ease; }
.cv-tas-block span { line-height: 1; transition: opacity .35s ease; }

.cv-removing { opacity: 0 !important; transform: scale(.85); pointer-events: none !important; }

/* ---- Zones cliquables : au survol on change seulement la couleur ---- */
.cv-zone { position: absolute; padding: 0; border: 2px dashed rgba(21, 98, 177, .55); border-radius: 8px; background: transparent; cursor: pointer; transition: background-color .15s, border-color .15s; }
.cv-zone:hover, .cv-zone:focus-visible { background: rgba(21, 98, 177, .14); border-color: var(--cv-secondary); border-style: solid; outline: none; }
.cv-zone.is-wrong { animation: cvShake .35s ease; border-color: #E3170A; }
@keyframes cvShake { 0%, 100% { translate: 0; } 25% { translate: -5px; } 50% { translate: 5px; } 75% { translate: -3px; } }

/* ---- Légende ---- */
.cv-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; font-size: .85rem; list-style: none; padding: 0; }
.cv-legend li.cv-legend-title { width: 100%; font-weight: 600; border: 0; background: none; padding: 0; }
.cv-legend li { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--cv-light); border-radius: .5rem; padding: .25rem .6rem; }
.cv-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }

/* ---- Résultat ---- */
.cv-result { margin-top: 1rem; border-radius: 1rem; padding: 1.25rem 1.5rem; border: 2px solid rgba(0,0,0,.2); }
.cv-result h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.cv-result p { margin: 0 0 .35rem; }
.cv-result .cv-advice { font-size: 1.05rem; font-weight: 500; line-height: 1.5; margin-bottom: .6rem; }
.cv-result .cv-recap { font-size: .9rem; opacity: .9; }
.cv-formule { background: #fff; color: var(--cv-dark); border-radius: .75rem; padding: 1rem 1.25rem; margin: .5rem 0 .9rem; }
.cv-formule-title { font-weight: 700; margin-bottom: .6rem !important; }
.cv-formule-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; list-style: none; margin: 0 0 .6rem; padding: 0; }
.cv-formule-list li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; background: var(--cv-light); border-radius: .6rem; padding: .6rem .4rem; }
.cv-formule-list b { display: flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 .4rem; border-radius: .5rem; background: var(--cv-secondary); color: #fff; font-size: 1.25rem; font-weight: 800; }
.cv-formule-list span { font-size: .82rem; line-height: 1.3; }
.cv-formule a { font-size: .85rem; font-weight: 600; color: var(--cv-secondary); }

.cv-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

@media (max-width: 767.98px) {
	.cv-formule-list { grid-template-columns: 1fr; }
	.cv-formule-list li { flex-direction: row; text-align: left; gap: .75rem; padding: .4rem .6rem; }
}
@media (max-width: 575.98px) {
	.cv-hint { gap: .9rem; padding: 1rem; align-items: flex-start; }
	.cv-hint-num { width: 3.5rem; height: 3.5rem; }
	.cv-hint-num b { font-size: 1.75rem; }
	.cv-hint-text { font-size: 1.1rem; }
	.cv-case ul { flex-direction: column; gap: .25rem; }
	.cv-mini-panel { width: 44px; }
	.cv-result { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cv *, .cv *::before { transition: none !important; animation: none !important; }
}