/*
 
	______ _                        _____ _   _        __      
	| ___ (_)                      /  __ \ | | |      / _|
	| |_/ /_ ___  __ _ _   _  ___  | /  \/ | | |     | |_ _ __ 
	|    /| / __|/ _` | | | |/ _ \ | |   | | | |     |  _| '__|
	| |\ \| \__ \ (_| | |_| |  __/ | \__/\ \_/ /  _  | | | |
	\_| \_|_|___/\__, |\__,_|\___|  \____/\___/  (_) |_| |_|
	                | |
==================  |_|  =========================================
 	      prevention cardiovasculaire, en un clic

*/


/*  SOMMAIRE :

*  0) TEMPORAIRE
*  1) COULEURS
 * 2) POLICES
 * 3) BACKGROUND
 * 4) HEADER
 * 5) FOOTER
 * 6) EMOJI en SVG
 * 7) PAGE D'ACCUEIL
 * 8) INFOBULLES et SPOILER
 * 9) PRE-FORMULAIRE
 * 10) BOITE FORMULAIRE
 * 11) ERREUR DES INPUTS
 * 12) RESULTATS
 * 13) RECOMMANDATIONS
 * 14) CANVAS
 * 15) MOBILE
 * 16) RESPONSIVE

*/



/* ================================
              TEMPORAIRE 
   ================================ */

/* Print PDF*/

@media print {

	.is-layout-flex.casemobile,
	#boitequestionnaire,
	.caseaccueil,
	.recoswrapperfin,
	.site-footer,
	div.resultatcvresteboite>.boitespoiler,
	h1,
	#boitelifechart,
	.source,
	.bullequestion {
		display: none !important
	}

	.lignerecos {
		flex-direction: row !important;
		padding: 14px 20px !important;
		align-items: center !important;
	}

	.recostitre {
		margin: 0 15px !important
	}

	.recosdebut:has(~ .recostexte .boitespoiler) {
		align-self: center !important;
	}

	#recosici {
		max-width: 98%;
	}

}

/* message de warning : site en cours de dev*/

.warning.caseaccueil {
	width: fit-content;
	margin: auto;
	margin: 20px 0 0;
	align-self: center;
	padding: 15px 60px;
}

@media (max-width: 768px) {
	.warning.caseaccueil {
		padding: 15px 20px;
	}
}

.warning:hover {
	transform: none !important
}

.casetemporaire {
	background: #ffc3931f;
	outline: #dcd6d2 1px solid;
	color: #5d1717;
	margin-top: 30px
}

.messagejaune {
	text-align: center
}

/* ================================
 *             COULEURS
 * ================================ */



:root {
	/* Vert (faible risque) */
	--vert-texte: #305334;
	--vert-texte-titre: #f0fff1;
	--vert-texte-raison: #345b38;
	--vert-texte-pourcentage: #234827;

	--vert-bordure: #d6e8d3;
	--vert-bordure-titre: #5c8860;

	--vert-fond: #e6f4d8;
	--vert-fond-titre: #497c4e;
	--vert-fond-score: #9bc89b;
	--vert-fond-raison: #b7d8b7;
	--vert-fond-definition: #e9f0eb;

	--vert-fond-onglet: #dcebce;
	--vert-fond-onglet-hover: #b6cda024;
	--vert-fond-onglet-selected: #76a07a3b;
	--vert-fond-onglet-selected-hover: #76a07a45;
	--vert-fond-onglet-selected-active: #76a07a52;

	--vert-fond-simulation: #fefefe8c;
	--vert-fond-onglet-boite: #f4faed;

	--vert-texte-risque: #0b5209;

	/* Orange (risque moyen) */
	--orange-texte: #775127;
	--orange-texte-titre: #ab620e;
	--orange-texte-raison: #8e5c26;
	--orange-texte-pourcentage: #513d26;

	--orange-bordure: #eae1d7;
	--orange-bordure-titre: #e5d2bd;

	--orange-fond: #ffeedd;
	--orange-fond-titre: #ffd3a1;
	--orange-fond-score: #f4bf69;
	--orange-fond-raison: #fee1b2;
	--orange-fond-definition: #f8f0ea;

	--orange-fond-onglet: #ffe9d4;
	--orange-fond-onglet-hover: #ffd3a136;
	--orange-fond-onglet-selected: #ffcb923b;
	--orange-fond-onglet-selected-hover: #ffcb9247;
	--orange-fond-onglet-selected-active: #ffc78954;

	--orange-fond-simulation: #fefefe8c;
	--orange-fond-onglet-boite: #fef7ef;

	--orange-texte-risque: #a4570e;


	/* Rouge (risque haut) */
	--rouge-texte: #792222;
	--rouge-texte-titre: #721616;
	--rouge-texte-raison: #873636;
	--rouge-texte-pourcentage: #582b2b;
	--rouge-bordure: #dfc8c8;
	--rouge-bordure-titre: #c07b7b;
	--rouge-fond: #fde5e5;
	--rouge-fond-titre: #d57474;
	--rouge-fond-score: #d99191;
	--rouge-fond-raison: #ecacac;

	--rouge-fond-definition: #f0e9e9;

	--rouge-fond-onglet: #e1a5a56b;
	--rouge-fond-onglet-hover: #b966660f;
	--rouge-fond-onglet-selected: #da95953b;
	--rouge-fond-onglet-selected-hover: #da95954a;
	--rouge-fond-onglet-selected-active: #da959561;

	--rouge-fond-simulation: #fefefe8c;
	--rouge-fond-onglet-boite: #fef2f3;

	--rouge-texte-risque: #8d1312;

	/* Gris */
	--gris-texte-risque: #4e4e4e;

	/* Preform */

	/* Compteurs - Risque Niveau */
	--vert-compteur-vif: #4caf50;
	--orange-compteur-vif: #ff9800;
	--orange-fonce-compteur-vif: #f4511e;
	--rouge-compteur-vif: #d32f2f;

	--vert-compteur-texte: #0c4c11;
	--orange-compteur-texte: #422b08;
	--orange-fonce-compteur-texte: #521e0d;
	--rouge-compteur-texte: #520c0b;

	--vert-compteur-bordure: #81c784;
	--orange-compteur-bordure: #ffb74d;
	--orange-fonce-compteur-bordure: #ff8a65;
	--rouge-compteur-bordure: #e57373;

	--vert-compteur-background-titre: #a5d6a7;
	--orange-compteur-background-titre: #ffb74d;
	--orange-fonce-compteur-background-titre: #ff8a65;
	--rouge-compteur-background-titre: #e57373;

	--vert-compteur-background-info: #eff4ea;
	--orange-compteur-background-info: #fff3e2;
	--orange-fonce-compteur-background-info: #ffeae4;
	--rouge-compteur-background-info: #ffe7e7;

	/* Boutons bleus (checkbox) dans la simulation */
	--bouton-bleu-background: #ececf3;
	--bouton-bleu-background-hover: #e3e3ef;
	--bouton-bleu-background-checked: #dfdfef;
	--bouton-bleu-outline: #cac9d5;
	--bouton-bleu-outline-checked: #9290ab;
}



/* ================================
 *             POLICES 
 * ================================ */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/themes/risquecv/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/wp-content/themes/risquecv/fonts/Montserrat-VF.woff2") format("woff2");
}

body,
button,
input,
select,
textarea,
#wpadminbar * {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.titlelink,
h1,
h2 {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

span.gras {
	font-weight: 700
}

span.petitgras {
	font-weight: 600
}

span.souligne {
	text-decoration: underline;
	text-underline-offset: 2px;
}

span.light {
	font-weight: 200
}

.hidden {
	display: none !important;
}

.nope {
	display: none !important;
}

.invisible {
	opacity: 0
}


/* ================================
 *            BACKGROUND
 * ================================ */

body {
	background-size: 10px 10px;
	background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 1px, #fefbfb 0, #ffffff 50%);
}

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.separate-containers .paging-navigation,
.inside-page-header {
	background-color: unset
}

.site-info {
	/*footer*/
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255 255 255) 100%);
}

.separate-containers .inside-article {
	padding: 0px;
}

@media (max-width: 1230px) {
	.separate-containers .inside-article {
		padding: 0 10px;
	}
}


/* ================================
 *             HEADER
 * ================================ */

/* 1) Animations  */

@keyframes fadeInAndMoveLeft {
	0% {
		opacity: 0;
		left: 50px;
	}

	15% {
		opacity: 1;
	}

	83% {
		left: 50px;
	}

	100% {
		opacity: 1;
		left: 0px;
	}
}

@keyframes fadeInAndDisplay {
	to {
		opacity: 1;
		visibility: visible;
	}
}

/* 2) Logo header  */

.s-logo {
	position: relative;
	margin: 15px;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

canvas.centered-canvas {
	position: absolute;
	top: 45px;
	left: 50%;
	transform: translateX(-50%);
}

.containermoi {
	margin-top: 10px;
	font-weight: 730;
	text-align: center;
	font-size: 40px;
	font-family: "Arial Black";
	transition: all 0.1s ease-in-out;
}

a.titlelink {
	text-decoration: none;
	display: inline-block;
	transition: transform .1s cubic-bezier(0, 0, 0.5, 1);
	-webkit-user-drag: none;
}

a.titlelink:hover {
	transform-origin: center;
	-webkit-transform: scale(101.5%);
	transform: scale(101.5%);
}

a.titlelink:active {
	transform-origin: center;
	-webkit-transform: scale(112.5%);
	transform: scale(107.5%);
}

.un {
	color: #1b2b7f
}

.deux {
	color: #a41835;
}

.trois {
	color: #1b2b7f
}

.sous {
	line-height: 1.9;
	text-align: center;
	font-family: arial;
	transition: all 0.1s ease-in-out;
}

.quatre {
	font-size: 20px;
	font-weight: 500;
	color: #1b2b7f;
	opacity: 0;
	position: relative;
	left: 0;
	animation: fadeInAndMoveLeft 2.5s ease-in 5s forwards;
}

.cinq {
	font-size: 20px;
	font-weight: 500;
	color: #1b2b7f;
	opacity: 0;
	visibility: hidden;
	animation: fadeInAndDisplay 0.3s ease-in 7.8s forwards;
}

.six {
	font-size: 20px;
	color: #a41835;
	font-weight: 700;
	opacity: 0;
	visibility: hidden;
	animation: fadeInAndDisplay 0.3s ease-in 7.8s forwards;
	transition: all 0.1s ease-in-out;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* 3) Jeu de clics  */

.six:active,
.six.active {
	text-decoration: underline;
	-webkit-transform: scale(114%);
	transform: scale(114%);
}

.falling-object {
	position: absolute;
	font-size: 20px;
	color: #a41835;
	font-weight: bold;
	font-family: Arial, sans-serif;
	pointer-events: none;
}

.compteurclics {
	display: flex;
	justify-self: center;
}

funfunfunbutton {
	display: flex;
	justify-self: center;
	background: #b23952;
	color: white;
	font-weight: 500;
	border-radius: 15px;
	padding: 3px 12px;
	animation: Entree 0.2s ease-out;
	user-select: none;
}

funfunfunbutton:hover {
	background: #b93f58;
	-webkit-transform: scale(101%);
	transform: scale(101%);
	text-decoration: underline;
	cursor: pointer;
}

funfunfunbutton:active {
	background: #b9465e;
	-webkit-transform: scale(103%);
	transform: scale(103%);
}

funfunfunbutton.disabled {
	background: gray;
	color: white;
}

funfunfunbutton:hover.disabled {
	background: gray
}

funfunfunbutton:active.disabled {
	background: gray
}

#winbutton {
	margin-bottom: 20px;
	font-size: 3em;
	padding: 3px 20px;
	border-radius: 20px;
}


/* ================================
 *             FOOTER
 * ================================ */


.copyright a {
	text-decoration: none;
	cursor: text;
	color: var(--texte);
}

a.confidentialite {
	cursor: pointer;
}

a.confidentialite:hover {
	text-decoration: underline;
}


/* ================================
 *          EMOJI en SVG
 * ================================ */


.listeemoji s,
.emojiFdR,
.emojiPreform,
h2 s {
	display: none
}

.listeemojisvg {
	position: absolute;
	left: -34px;
	top: 5px;
}

.emojiFdRsvg {
	margin-right: 7px;
	vertical-align: middle;
	margin-top: -2px;
}

.emojiPreformsvg {
	margin-right: 8px;
	vertical-align: middle;
	margin-top: -4px;
}

/* ================================
 *         PAGE D'ACCUEIL
 * ================================ */

/* 1) Général et cases       */

.caseaccueil p {
	font-size: 19px
}

.caseaccueil li {
	font-size: 18px
}

.case2.caseaccueil ul {
	margin-bottom: 15px;
	font-size: 19px
}

.caseaccueil ol,
.caseaccueil ul {
	margin: 5px 0 5px 30px;
	line-height: 1.7;
}

.caseaccueil {
	padding: 20px;
	border-radius: 20px;
	transition: transform .2s cubic-bezier(0, 0, 0.5, 1);
	position: relative;
}

@media (min-width: 769px) {

	.caseaccueil:hover,
	.caseaccueil:focus-within {
		/*box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.12);*/
		-webkit-transform: scale(100.6%);
		transform: scale(100.6%);
	}
}

.separate-containers .site-main {
	margin: 0
}

/* svg des caseaccueil */
.caseaccueil h2 {
	display: flex;
	align-items: center;
}

.caseaccueil h2 svg {
	position: relative;
	left: 0;
	top: 0;
	margin: 0 0.35em 0 -3px;
	width: 1.05em !important;
	height: 1.05em !important;
}


/*Aérer le bas du calculateur */
.wp-block-columns {
	margin-top: 30px
}

.messagejaune {
	margin-top: 300px
}


/* 2) Couleurs des cases       */

.case1 {
	background: #0000AC1F;
	outline: #ced2d9 1px solid;
	color: #131357;
}

.case1 h2 {
	color: #273570;
}

.case1 .wp-block-button__link {
	background: #000c4b69 !important;
	border: 1px solid #72758a;
}

.case1 .wp-block-button__link:hover {
	background: #000c4b73 !important;
}

.case1 .wp-block-button__link:active {
	background: #000c4b8a !important;
}

.case2 {
	background: #7100001F;
	outline: #d9cece 1px solid;
	color: #6d1525;
}

.case3 {
	background: #16B4001F;
	outline: #d0d9ce 1px solid;
	color: #1b330a;
}

.case3 h2 {
	color: #2a4d12;
}

.case3 .wp-block-button__link {
	background: #083a0054 !important;
	border: 1px solid #91a38a;
}

.case3 .wp-block-button__link:hover {
	background: #083a0063 !important;
}

.case3 .wp-block-button__link:active {
	background: #11360b75 !important;
}

.case4 {
	background: #FFEE931F;
	outline: #d9d7ce 1px solid;
	color: #5d1717;
}

.case4 h2,
.case4 h3 {
	color: #653d19
}


/* 3) Boutons accueil      */

.caseaccueil .wp-block-buttons {
	margin-top: -10px;
	line-height: 1.1
}

.boutonaccueil.middle.wp-block-button a {
	margin: -15px 0 25px;
}

.boutonaccueil.wp-block-button a {
	padding: 11px 30px 11px 30px;
	border-radius: 14px !important;
	font-weight: 500;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.boutonaccueil a:hover {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}

.boutonaccueil a:active {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

/* 4) Formulaire de contact       */

/* Nouveau formulaire de contact */

.formulaireContact {
	display: flex;
	flex-direction: column
}

.formulaireContact label {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px
}

.formulaireContact div {
	font-weight: 700;
	color: #5a2730;
	margin-bottom: 10px
}

.formulaireContact div span {
	font-weight: 400;
	color: #b34459;
	margin-left: 5px
}

.formulaireContact input[type="text"],
.formulaireContact input[type="email"],
.formulaireContact textarea {
	background-color: #fff;
	border-radius: 12px;
	color: #000000b3;
	border: 1px solid #ccb7b7;
	padding: 14px;
	font-size: 16px;
	transition: border 0.15s, box-shadow 0.15s;
	height: 43px;
}

.formulaireContact ::placeholder {
	opacity: 0.7;
}

.formulaireContact input[type="text"]:focus,
.formulaireContact input[type="email"]:focus,
.formulaireContact textarea:focus {
	border-color: #b77c87;
	box-shadow: 0 0 0 1px #b77c87, 0px 1px 2px rgba(0, 0, 0, 0.15);
	outline: none;
}

.formulaireContact textarea {
	resize: none;
	min-height: 220px;
	overflow-y: hidden;
}

.formulaireContact>label>span {
	font-size: 0.7em;
	margin: 7px 0 0 4px;
	color: #83535b
}

.formulaireContact input[type="submit"] {
	color: #fff;
	border-radius: 14px;
	font-weight: 500;
	line-height: 1;
	transition: all 0.15s ease-in-out;
	background: #7900005e !important;
	border: 1px solid #b17b7b !important;
	align-self: center;
	padding: 11px 30px;
	font-size: 20px
}

.formulaireContact input[type="submit"]:hover {
	background: #79000078 !important;
}

.formulaireContact input[type="submit"]:active {
	background: #6c00008c !important;
}

#contact-message {
	border-radius: 15px;
	font-size: 0.9em;
	font-weight: 500;
	animation: Entree 0.5s ease;
	display: none;
}

#contact-message.contactRouge {
	background: #a1384b40;
	outline: #bd9ea4 1px solid;
	margin: 0 auto 20px;
	padding: 12px 10px;
	display: block;
}

#contact-message.contactVert {
	background: #24c6443d;
	outline: #8ab08e 1px solid;
	color: #155015;
	margin: 0 auto 20px;
	padding: 12px 10px;
	display: block;
}

.formulaireContact .erreurContact {
	color: #ae2f47;
	margin-top: 5px;
	display: flex;
	font-weight: 450;
	font-size: 0.7em;
	align-items: center;

}

.erreurContact svg {
	width: 1.4em;
	height: 1.4em;
	fill: #ae2f47;
	margin-right: 6px;
}

.formulaireContact input.erreur,
.formulaireContact textarea.erreur {
	border-color: #ae2f47;
}




/* 5) Bibliographie       */

.case4.caseaccueil ol,
.case4.caseaccueil ul {
	margin: 0px 0 5px 30px;
	line-height: 1.7;
}

.case4 h2 {
	margin-bottom: 10px
}

.case4 li {
	margin-bottom: 8px;
	line-height: 1.8
}

.case4 li.target {
	color: #551a00;
	background: #fff5cd;
	padding: 12px 20px;
	border-radius: 20px;
	animation: Entree 0.3s ease-out;
	margin-left: -10px;
}

.case4 li.target a mark {
	color: #453a12 !important;
	background: #ecdfad !important;
}

.case4 li:target {
	color: #551a00;
	background: #fff5cd;
	padding: 12px 20px;
	border-radius: 20px;
	animation: Entree 0.3s ease-out;
	margin-left: -10px;
}

.case4 li:target a mark {
	color: #453a12 !important;
	background: #ecdfad !important;
}

.case4 a {
	text-decoration: none
}

.case4 a mark {
	background: #8a5d4924 !important;
	color: #4a2424 !important;
	padding: 2px 5px;
	font-weight: 700;
	border-radius: 5px;
}

.case4 a:hover mark {
	text-decoration: underline;
	text-underline-offset: 2px;
	background: #8a5d4936 !important;
}

.case4 li strong {
	font-weight: 550
}

.case4 a s {
	background: #6d4838;
	color: white;
	padding: 1px 6px 1px 4px;
	font-size: 0.8em;
	border-radius: 6px;
	text-decoration: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}

.case4 a:hover s {
	background: #57372a;
}

.case4 a s::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.25em;
	vertical-align: sub;
	background-image: url(/wp-content/themes/risquecv/emoji/external%20link.svg);
}

.case4 code {
	font: unset;
	background: #e3dccb;
	color: #6d4838;
	padding: 1px 5px;
	font-size: 0.8em;
	border-radius: 6px;
	text-decoration: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.case4 .target code {
	background: #e1d39f;
	color: #442211;
}

/* ================================
 *       INFOBULLES et SPOILER
 * ================================ */

/* 1) Mot souligné      */

.motsouligne {
	text-decoration: underline dotted #9499b3;
	text-underline-offset: 4.5px;
	position: relative;
	text-align: center;
	-webkit-text-decoration: underline dotted #9499b3;
}

.motsouligne:hover {
	text-decoration-color: #26272d;
	color: #26272d;
	cursor: help;
}

.bulleinfo {
	display: none;
	position: absolute;
	bottom: 135%;
	left: 50%;
	transform: translateX(calc(-50% + var(--decale-x, 0px)));
	border-radius: 10px;
	z-index: 1000000000000000;
	min-width: fit-content;
	width: max-content;
	max-width: 300px;
	padding: 7px 12px 6px;
	line-height: 1.3;
	font-weight: 400;
	color: white;
	background: #000000b3;
	backdrop-filter: blur(5px);
	font-size: 17px !important;
	text-wrap: auto;
}

.bulleinfo::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(calc(-50% - var(--decale-x, 0px)));
	border-width: 8px;
	border-style: solid;
	border-color: #000000b3 transparent transparent transparent;
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.motsouligne:hover .bulleinfo {
	display: block;
	animation: fadeIn 0.1s ease-out forwards;
}

.bulleinfo:has(ul) {
	text-align: left
}

.bulleinfo ul {
	margin: 5px 0 8px 30px !important
}

.bulleinfo p {
	text-align: center;
	margin: 0;
}

.bulleinfo a {
	color: #fff
}

p.cadrebulle {
	border: 2px solid white;
	padding: 5px;
	margin: 10px;
	border-radius: 7px;
	background: #ffffff17;
}

/* 2) Bulle point d'interrogation      */

.bullequestion {
	text-decoration: none;
	background: #0000002b;
	border-radius: 100px;
	min-width: 1.2em;
	min-height: 1.2em;
	max-width: 1.2em;
	max-height: 1.2em;
	font-size: 0.8em;
	display: inline-block;
	line-height: 1.15;
	color: #000000b8;
	border: 1px solid #00000017;
	vertical-align: super;
	font-weight: 600;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.bullequestion:hover {
	background: #00000045;
	color: #000;
}

.preform .bullequestion .bulleinfo {
	bottom: 175%;
}

.boiteformulaire .bullequestion .bulleinfo {
	bottom: 195%;
}

.boiteresultats .bullequestion .bulleinfo {
	bottom: 180%;
}

.boiterecos .bullequestion .bulleinfo {
	bottom: 150%;
}

.preform .bullequestion {
	margin-left: 3px
}

.boiteformulaire .bullequestion {
	margin-left: 5px;
	font-size: 0.6em;
}

/* 3) Spoilers      */

.boitespoiler {
	margin: 25px 0 0px 20px
}

.toggleFdR input[type="checkbox"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	left: 0;
	cursor: pointer;
}

.toggleFdR {
	cursor: pointer;
	font-weight: 400;
	position: relative;
	padding-left: 20px;
}

.toggleFdR::before {
	content: ">";
	position: absolute;
	left: 0;
	transition: transform 0.2s ease;
	font-weight: 300;
}

.boitespoiler:has(.principaltoggle :checked)>.toggleFdR::before {
	transform: rotate(90deg);
	left: 5px;
}

.spoilerFdR {
	max-height: 0;
	opacity: 0.5;
	transform: translateY(-10px);
	transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.boitespoiler:has(.principaltoggle :checked)>.spoilerFdR {
	max-height: fit-content;
	opacity: 1;
	transform: translateY(0);
}

.boitespoiler:has(.principaltoggle :not(:checked))>.spoilerFdR {
	overflow: hidden;
}

.boitespoiler:has(.toggleFdR :not(:checked))>.spoilerFdR {
	overflow: hidden;
}

.boitespoiler:has(.principaltoggle :checked) {
	background: white;
	padding: 10px;
	margin: 15px 5px 5px 5px;
	border-radius: 15px;
}

.boiteresultats .principaltoggle {
	font-size: 1.1em;
	font-weight: 450
}

.vert .boitespoiler:has(.principaltoggle :checked) {
	outline: 1px solid var(--base-resultat-vert-outline);
}

.orange .boitespoiler:has(.principaltoggle :checked) {
	outline: 1px solid var(--base-resultat-orange-outline);
}

.rouge .boitespoiler:has(.principaltoggle :checked) {
	outline: 1px solid var(--base-resultat-rouge-outline);
}

.orange-rouge .boitespoiler:has(.principaltoggle :checked) {
	outline: 1px solid var(--base-resultat-rouge-outline);
}

.boitespoiler:has(.principaltoggle :checked)>.principaltoggle {
	padding-left: 25px;
	font-weight: 600;
	margin-bottom: 10px;
}

.facteur:has(:checked) {
	margin-bottom: 14px
}

.facteur:has(:checked)>.toggleFdR {
	font-weight: 550;
}

.facteur .spoilerFdR {
	font-size: 0.95em;
	margin-left: 20px
}

.facteur:has(> .toggleFdR :checked)>.spoilerFdR {
	max-height: fit-content;
	opacity: 1;
	transform: translateY(0);
}

.facteur:has(> .toggleFdR :checked)>.toggleFdR::before {
	transform: rotate(90deg);
}

.facteur {
	margin: 8px 0 5px 30px;
}

.facteur .toggleFdR {
	font-weight: 400;
}

div:not(.facteur)>.toggleFdR:hover {
	font-weight: 470;
}

div:not(.facteur)>.toggleFdR:hover span {
	text-decoration: underline;
	text-underline-offset: 2.5px;
}

.facteur .toggleFdR:hover {
	font-weight: 500;
}

.facteur:has(> .toggleFdR :checked)>.toggleFdR:hover {
	font-weight: 600;
}

.listeFdR {
	display: none;
	font-weight: 300;
	font-size: 0.7em;
	vertical-align: middle
}

.boitespoiler:has(.principaltoggle :checked) .listeFdR {
	display: inline
}


/* 3) Texte des facteurs de risque      */

.facteur .tableFdR {
	border: 1px solid #0000001a;
	padding: 9px 18px 12px;
	margin: 5px;
	border-radius: 12px;
	background: #00000005;
}

.vert .definition {
	background: #e9f0eb;
}

.orange .definition {
	background: #f8f0ea;
}

.rouge .definition {
	background: #f0e9e9;
}

.orange-rouge .definition {
	background: #f0e9e9;
}

.facteur p:not(:last-child) {
	margin-bottom: 0.5em;
}

.facteur p:last-child {
	margin-bottom: 0
}

.facteur .gras {
	font-weight: 600
}

.definition {
	text-align: center;
	font-style: italic;
	background: #ededed;
	padding: 10px;
	border-radius: 8px;
	margin: 0 -9px 0.5em -10px;
	display: block !important;
	font-size: 16px
}

.definition.listeFdR {
	text-align: left;
	padding: 13px 20px;
	font-style: normal;
}

.definition .bulleinfo {
	font-style: normal
}

.tableFdR .definition ul {
	margin-bottom: 0
}

.tableFdR p:has(+ ul) {
	margin-bottom: 0.2em !important
}

.tableFdR ul {
	margin-bottom: 1em
}

.tableFdR ul>li>ul {
	margin-bottom: 0.1em
}

.tableFdR>ul:last-of-type {
	margin-bottom: 0.5em;
}

.tableFdR .motsouligne {
	text-decoration-color: #00000078;
}

.tableFdR .motsouligne:hover {
	text-decoration-color: #202020;
	color: #202020;
}


/* ================================
 *          PRE-FORMULAIRE
 * ================================ */

/* 1) Mise en forme générale des questions  */

.preform {
	padding: 20px;
	border-radius: 20px;
	background: #e9ebf5;
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	outline: #ced2d9 1px solid;
	margin-bottom: 20px;
}

.preform>div {
	display: flex;
	width: 100%;
}

.pre_texte {
	display: flex;
	flex-direction: column;
	width: 64%;
	justify-content: center;
}

@keyframes Entree {
	0% {
		transform: scale(0.9) translateY(5px);
	}

	50% {
		transform: scale(1.02) translateY(-1px);
	}

	100% {
		transform: scale(1) translateY(0);
	}
}

.pre_texte:not(.preATCD .pre_texte) {
	animation: Entree 0.2s ease-out;
}

.pre_titre {
	font-size: 2.3em;
	font-weight: 700;
	text-align: center;
	color: #3b4572f5;
	line-height: 1.2;
	padding-bottom: 5px;
}

.preform> :not(.preATCD) .pre_titre {
	font-size: 2.6em;
}

.pre_soustitre {
	color: #58608b;
	font-size: 0.95em;
	text-align: center;
	min-height: 2em;
}

.pre_soustitre span.gras {
	font-weight: 650
}

/* 2) Radio et input du preform      */

.pre_radio,
.pre_input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 33%;
}

.pre_radio label {
	font-size: 1.10em;
	padding: 10px 10px 10px 33px;
	outline: 1px solid #a6a9b6;
	background: white;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	position: relative;
	transform-origin: center;
}

.preTABAC label,
.preSEXE label,
.preTYPEDIAB label {
	padding: 10px 10px 10px 23px
}

.pre_radio input {
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	left: 0;
}

.pre_radio label:hover {
	background: #f6f7fb;
	-webkit-transform: scale(101%);
	transform: scale(101%);
	font-weight: 480;
	color: #303758;
	outline: 1px solid #8a8ea2
}

.pre_radio label:active {
	background: #d7d9e7;
	color: #18235f;
	outline: 2px solid #656a87;
}

.pre_radio label:first-child {
	margin-bottom: 15px;
}

.pre_input input[type="text"],
.pre_input input[type="number"] {
	background: #ffffff;
	border-radius: 10px;
	width: 2.5em;
	height: 1.4em;
	font-size: 4.3em;
	font-weight: bolder;
	text-align: center;
	color: var(--input);
	padding: 0;
	position: relative;
	border: 1px solid #b2b8d3;
}

.pre_input input::placeholder {
	font-size: 0.5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #cbcee1;
}

_::-webkit-full-page-media,
_:future,
:root .pre_input input::placeholder {
	transform: unset !important;
}

/*debug safari*/

.pre_input input.inputprincipal {
	color: var(--input);
}

.pre_input input.inputsecondaire {
	color: var(--placeholder);
}

.pre_input input[type="text"]:focus,
.pre_input input[type="number"]:focus {
	outline: 2px solid #656a87;
	color: #3d4568 !important;
}

_::-webkit-full-page-media,
_:future,
:root .pre_input.multiple input[type="text"]:focus,
.pre_input.multiple input[type="number"]:focus {
	outline: none;
}

_::-webkit-full-page-media,
_:future,
:root .pre_input label:has(input[type="number"]:focus),
.pre_input label:has(input[type="text"]:focus) {
	outline: 2px solid #656a87;
}

/*debug safari*/

.entree {
	margin-top: 10px;
	font-size: 1.3em;
	width: 8.27em;
	background: #646a8a;
	color: white;
	font-weight: 600;
	text-align: center;
	border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
	position: relative;
}

.entree:hover {
	background: #545976;
}

.entree:active,
.entree.active {
	background: #424760;
	transform: scale(1.02)
}

.pre_input input[type="checkbox"] {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

.preAGE .pre_titre {
	font-size: 4em !important
}

.pre_input.multiple input[type="text"],
.pre_input.multiple input[type="number"] {
	font-size: 3.5em;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.multiple .entree {
	width: 10.58em
}

.pre_unit {
	display: inline-block;
	pointer-events: none;
	color: #6e7494;
	background: #cbcee1;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	height: 4.9em;
	padding: 0 10px;
	align-self: center;
	border: solid 1px #b2b8d3;
	border-left: 0;
	line-height: 5em;
	font-weight: bold;
	border-left: none !important;
	vertical-align: bottom;
	width: 5em;
	text-align: center;
	position: relative;
}

.casemultiple {
	display: flex;
	border-radius: 10px;
	width: fit-content;
}

.casemultiple:has(input:focus) span {
	outline: 2px solid #656a87
}

.multiple label:first-child {
	margin-bottom: 10px
}

.shake-animation input[type="text"],
.shake-animation input[type="number"],
.shake-animation .pre_unit,
input.shake-animation {
	animation: shake 0.3s ease-in-out 0s 2;
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {
		left: 0;
		transform: scale(1);
	}

	25% {
		left: 0.5rem;
		transform: scale(1.03);
	}

	50% {
		left: -0.5rem;
		transform: scale(1.03);
	}

	75% {
		left: 0.5rem;
		transform: scale(1.03);
	}

	100% {
		left: 0;
		transform: scale(1);
	}
}

/* 3.1) Albuminurie préform      */

.preALBU label:first-child {
	margin-bottom: 0;
}

.preALBU label:nth-child(2) {
	margin: 10px 0;
}

.preALBU .pre_input input[type="number"] {
	font-size: 3em;
	width: 3em
}

.preALBU .pre_unit {
	height: 4.2em;
	padding: 0;
	line-height: 4em;
	width: 5.6em;
}

.preALBU .entree {
	width: 11.23em;
}

.preALBU .pre_texte {
	width: 40%;
}

.cestlebazar {
	display: flex;
	width: 55%;
}

.preALBU .pre_radio {
	width: 50%;
}

.colonnemilieu {
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.2em;
	color: #434a6d;
}

/* 3.2) Type diabète      */

.preTYPEDIAB label:first-child {
	margin-bottom: 0;
}

.preTYPEDIAB label:nth-child(2) {
	margin: 10px 0;
}


/* 4) Score Dutch */

.Dutch_encours.preform {
	background: var(--message-fond);
	outline: var(--message-outline) 1px solid;
}

.preDUTCH .pre_titre {
	color: var(--message-texte);
}

.preDUTCH .pre_soustitre {
	color: var(--message-texte);
}

.preDUTCH .pre_radio label {
	color: #4e1313;
	outline: 1px solid #b6a6a6;
}

.preDUTCH .pre_radio label:hover {
	background: #fbf6f6;
}

.preDUTCH .pre_radio label:active {
	background: #fef4f4;
	color: #5f1818;
	outline: 2px solid #876565;
}


/* ================================
 *            FORMULAIRE
 * ================================ */

/* 1) Mise en forme générale      */

.formulaire,
.formulaire div {
	display: flex;
	flex-wrap: wrap;
}

.boiteformulaire {
	background: var(--non-coche);
	margin: 7px;
	padding: 10px;
	border-radius: 20px;
	height: fit-content;
	outline: 1px solid var(--non-coche-outline);
	animation: fadeIn 0.2s ease-out;
}

.boiteformulaire:focus {
	outline: 1px solid var(--non-coche-outline);
}

.titreform {
	font-weight: bold;
	color: #3d4052;
	display: block;
	text-align: center;
	font-size: 1.2em;
	margin: -5px 0 5px;
}

.pays .titreform,
.pas .titreform {
	margin-right: -10px
}

label.boiteformulaire {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.boiteformulaire input[type="text"],
.boiteformulaire input[type="number"],
.boiteformulaire select {
	background: #ffffff;
	border-radius: 10px;
}

.boiteformulaire input[type="text"]:focus,
.boiteformulaire input[type="number"]:focus,
.boiteformulaire select:focus {
	outline: solid 2px #555555;
	color: var(--texte) !important;
}

.boiteformulaire select {
	text-align-last: center;
	cursor: pointer;
}

/* 2) Les input number/text      */

.age input,
.pas input,
.dfg input,
.HbA1c input,
.agediabete input {
	width: 2em;
	font-size: 2.3em;
	padding: 0;
	font-weight: bolder;
	text-align: center;
	color: var(--input);
}

.HbA1c input {
	width: 2.3em
}

.HbA1c input::placeholder {
	color: var(--placeholder);
}

label.agediabete {
	max-width: 10em;
	font-size: 0.8em;
}

.agediabete input {
	font-size: 2.8em;
	width: 10em;
}

.agediabete .titreform {
	line-height: 1.9
}

.formulaire input,
select {
	border-color: var(--non-coche-outline)
}

/* Enlever les fleches UP/DOWN des inputs number */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

/* 3) Les input cholestérol       */

.CT input,
.HDL input,
.LDL input {
	color: var(--placeholder);
	width: 2em;
	font-size: 1.8em;
	padding: 0;
	font-weight: bolder;
	text-align: center;
	color: var(--input);
}

.CT input::placeholder,
.HDL input::placeholder,
.LDL input::placeholder {
	color: var(--placeholder);
	font-size: 0.8em;
}

.CT>div,
.HDL>div,
.LDL>div {
	min-width: max-content;
}

.unit {
	pointer-events: none;
	color: #716b6b;
	background: #efeaea;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	height: 3em;
	font-size: 0.9em;
	padding: 0 10px;
	align-self: center;
	border: solid 1px var(--non-coche-outline);
	border-left: 0;
	line-height: 2.9em;
	font-weight: bold;
	border-left: none !important;
}

input#CTg,
input#CTmol,
input#HDLg,
input#HDLmol,
input#LDLg,
input#LDLmol {
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	height: 1.5em;
	text-align: center;
}

input#CTmol,
input#HDLmol,
input#LDLmol {
	width: 4.5ch;
}

input#CTg,
input#HDLg,
input#LDLg {
	width: 6ch;
	padding: 0 0 0 0.5ch;
}

/* État "vide" des champs cholestérol (ajouté/retiré par JS) */
.cholesterol-vide input {
	width: 8ch !important;
	border-radius: 10px !important;
}

.cholesterol-vide .unit,
.cholesterol-vide .pre_unit {
	display: none !important;
}


input#CTmol,
input#CTmol~span,
input#HDLmol,
input#HDLmol~span,
input#LDLmol,
input#LDLmol~span {
	margin-bottom: 10px;
}

.CT.boiteformulaire,
.HDL.boiteformulaire,
.LDL.boiteformulaire {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.boiteformulaire.CT input:focus~span,
.boiteformulaire.HDL input:focus~span,
.boiteformulaire.LDL input:focus~span {
	outline: solid 2px #555555;
	color: var(--texte);
}

@supports not (-webkit-touch-callout: none) {

	_::-webkit-full-page-media,
	_:future,
	:root .boiteformulaire.CT input:focus~span {
		outline: none;
		border: solid 2px #555555;
	}

	_::-webkit-full-page-media,
	_:future,
	:root .boiteformulaire.HDL input:focus~span {
		outline: none;
		border: solid 2px #555555;
	}

	_::-webkit-full-page-media,
	_:future,
	:root .boiteformulaire.LDL input:focus~span {
		outline: none;
		border: solid 2px #555555;
	}
}

/* Debug Safari sauf ios */

label.CT,
label.HDL,
label.LDL {
	width: 18ch;
}

.HDL label,
.CT label,
.LDL label {
	display: flex;
}

input.inputprincipal {
	color: var(--input);
}

input.inputsecondaire {
	color: var(--placeholder);
}

/* 4) Les input checkbox       */

.coche {
	display: block;
	cursor: pointer;
	width: 26px;
	height: 26px;
	border: 3px solid rgba(255, 255, 255, 0);
	border-radius: 35%;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 0px 1.5px black;
	margin: 0 0.7em 0 0.3em;
	background: #f3f2f5;
}

.cocheform:hover .coche {
	box-shadow: 0px 0px 0px 2px black;
}

.cocheform input:checked+div .coche {
	box-shadow: 0px 0px 0px 1.5px var(--coche-texte);
}


.cocheform:hover input:checked+div .coche {
	box-shadow: 0px 0px 0px 2px var(--coche-texte);
}

.coche div {
	width: 60px;
	height: 60px;
	top: -52px;
	left: -52px;
	position: absolute;
	transform: rotateZ(45deg);
	z-index: 100;
}

.transitioncoche {
	transition: 300ms ease;
	background: var(--coche-texte);
}

label.cocheform input:checked+div .coche>.transitioncoche {
	left: -10px;
	top: -10px;
}

.boiteformulaire input[type="checkbox"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

label.cocheform:hover {
	cursor: pointer;
}

label.cocheform:active {
	outline: 2px solid var(--non-coche-outline)
}

.cocheform {
	padding: 0;
	background: 0;
	position: relative;
}

.cocheform input+div {
	padding: 7px 10px;
	border-radius: 20px;
	background: var(--non-coche);
	font-size: 1.3em;
	align-items: center;
}

.cocheform input:checked+div {
	background: var(--coche);
	text-shadow: 0.5px 0px 0px var(--coche-texte);
	color: var(--coche-texte)
}

.cocheform:has(input:checked) {
	outline: 1px solid var(--coche-outline);
}

.cocheform:has(input:checked):active {
	outline: 2px solid var(--coche-outline)
}

.cocheform input:hover+div,
.cocheform input+div:hover {
	background: var(--non-coche-hover);
}

.cocheform input:checked:hover+div,
.cocheform input:checked+div:hover {
	background: var(--coche-hover);
}

/* 5) Les input checkbox SLIDER     */

.sliderformulaire {
	flex-direction: column;
	padding: 0px;
	background: 0;
	font-size: 1.3em;
	cursor: pointer;
	position: relative;
	outline: none;
}

div.sliderun {
	background-color: var(--coche);
	padding: 10px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	align-items: center;
	opacity: 0.99999;
	flex-wrap: nowrap;
	text-shadow: 0.5px 0px 0px var(--coche-texte);
	color: var(--coche-texte);
	border: 1px solid #bab9c8;
}

div.sliderdeux {
	background: var(--non-coche);
	padding: 10px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	align-items: center;
	opacity: 0.7;
	flex-wrap: nowrap;
	border: 1px solid var(--non-coche-outline);
	border-top: none;
}

.sliderformulaire input:checked~.sliderdeux {
	background: var(--coche) !important;
	text-shadow: 0.5px 0px 0px var(--coche-texte);
	color: var(--coche-texte);
	border: 1px solid #bab9c8;
	opacity: 0.99999;
}

.sliderformulaire input:checked~.sliderun {
	background: var(--non-coche) !important;
	font-weight: normal !important;
	opacity: 0.7;
	text-shadow: unset;
	border-bottom: none
}

.sliderformulaire input[type="checkbox"]:not(:checked)~.sliderun .coche .transitioncoche {
	left: -10px;
	top: -10px;
}

.sliderformulaire input[type="checkbox"]:checked~.sliderdeux .coche .transitioncoche {
	left: -10px;
	top: -10px;
}

.sliderformulaire input:not(:checked)~.sliderdeux:hover,
.sliderformulaire input:checked~div.sliderun:hover {
	background: var(--non-coche-hover);
}


.sliderformulaire input:not(:checked)~.sliderun:hover,
.sliderformulaire input:checked~div.sliderdeux:hover {
	background: var(--coche-hover) !important
}


.sliderformulaire input:checked~.sliderun:hover .coche,
.sliderformulaire input:not(:checked)~.sliderdeux:hover .coche {
	box-shadow: 0px 0px 0px 2px black;
}

.sliderformulaire input:not(:checked)~.sliderun .coche,
.sliderformulaire input:checked~.sliderdeux .coche {
	box-shadow: 0px 0px 0px 1.5px
}

.sliderformulaire input:not(:checked)~.sliderun:hover .coche,
.sliderformulaire input:checked~.sliderdeux:hover .coche {
	box-shadow: 0px 0px 0px 2px var(--coche-texte);
}


/* 6) L'input pays       */

.pays select {
	width: 130px;
	height: 60px;
	font-weight: 500;
	font-size: 1.3em;
}

.pays select option {
	font-size: 0.8em;
}

/* 7) L'input albuminurie et son SVG      */


/*.cocheorange.cocheform:has(input:checked) {outline: 1px solid var(--coche-outline-orange)}

.cocheorange.cocheform input:checked + div {
    background: var(--coche-orange);
    text-shadow: 0.5px 0px 0px var(--coche-texte-orange);
    color: var(--coche-texte-orange);
}

.cocheorange.cocheform input:checked:hover + div, .cocheorange.cocheform input:checked + div:hover {background: var(--coche-hover-orange);}

.cocheorange.cocheform input:checked + div .coche .transitioncoche {background: var(--coche-texte-orange)}

.cocheorange.cocheform input:checked + div .coche {box-shadow: 0px 0px 0px 2px var(--coche-texte-orange)}

.cocheorange.cocheform:has(input:checked):active {
  outline:2px solid var(--coche-outline-orange)
}
*/

.albuminurie input:not(:checked)~div svg path {
	fill: #3d435d
}

.label_unit {
	font-size: 0.8em;
	font-weight: 200;
}

.albuminurie svg.clicked {
	animation: rotate180 0.3s ease-out forwards;
}

/* 8) Le SVG switch (type diabète)       */

@keyframes rotate180 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(180deg);
	}
}

.svgswitch {
	margin: 0 8px 0 4px;
}

.svgswitch path {
	fill: var(--coche-texte);
}

.typediabete svg.clicked {
	animation: rotate180 0.3s ease-out forwards;
}

/* Boite Sexe et tabac*/

.boite_sexetabac {
	flex-direction: column
}

.boite_sexetabac .homme {
	width: fit-content;
}

.boite_sexetabac>.homme>div {
	padding-right: 13px;
}

.homme svg.clicked {
	animation: rotate180 0.3s ease-out forwards;
}

@media (max-width: 1200px) {
	.boite_sexetabac {
		flex-direction: row
	}
}

.formulaire:has(label.albuminurie:not(.hidden)) .boite_sexetabac {
	flex-direction: row
}

/* ================================
 *        ERREURS DES INPUT
 * ================================ */

/* Erreur orange */

label.erreur_orange {
	background-color: var(--erreur-orange-autour);
	outline: 1px solid #cbbbaf;
}

label.erreur_orange.boiteformulaire input {
	background-color: var(--erreur-orange-fond);
	color: var(--erreur-orange-texte);
	border: 1px solid rgb(176, 140, 140);
}

/* Erreur rouge */

label.erreur_rouge {
	background-color: var(--erreur-autour);
	outline: 1px solid #cbb7af;
}

label.erreur_rouge.boiteformulaire input {
	background-color: var(--erreur-fond);
	color: var(--erreur-texte);
	border: 1px solid #bd8484;
}

/* Erreur bleue */

label.erreur_bleue {
	background-color: var(--erreur-bleue-autour);
	outline: 1px solid #afc4cb;
}

label.erreur_bleue.boiteformulaire input {
	background-color: var(--erreur-bleue-fond);
	border: 1px solid #b0c0c5;
}

/* Erreur cholestérol */

label.erreur_rouge.boiteformulaire input.inputsecondaire,
label.erreur_rouge.boiteformulaire input.inputprincipal {
	border: 1px solid #aa7171;
}


label.erreur_rouge.boiteformulaire input.inputsecondaire {
	color: #c75454;
}

label.erreur_rouge.boiteformulaire .unit {
	color: var(--erreur-texte);
	background: #d97b7b;
	border: 1px solid #aa7171;
}

/* Numérotation des erreurs */

.numerotation {
	border-radius: 50%;
	font-weight: 500;
	width: 1.1em;
	height: 1.1em;
	display: inline-block;
	text-align: center;
	line-height: 1.2;
	outline: 1px solid #b28383;
	color: #894545;
	background: #e3c0b5;
}


/* ================================
 *       BOITE DES RESULTATS
 * ================================ */

.boiteresultats {
	animation: Entree 0.2s ease-out;
}

.resultatcvresteboite {
	background: var(--base-resultat-gris);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	display: flex;
	flex-direction: column;
	border: 1px solid #e8dcd4;
	border-top: none !important;
	padding: 20px;
}

/* Boite grise */

.gris .resultatcvtitre {
	font-weight: normal
}

.gris .pourcentage {
	font-weight: normal
}

/* Boite verte */
.vert .resultatcvresteboite {
	background: var(--base-resultat-vert);
	border: 1px solid var(--base-resultat-vert-outline);
	color: var(--base-resultat-vert-texte)
}

.vert .resultatcvtitreboite {
	background: var(--titre-resultat-vert);
	border: 1px solid #5c8860;
}

.vert .resultatcvtitre {
	color: var(--titretexte-resultat-vert)
}

.vert .nomscore {
	background: var(--score-vert);
	color: var(--base-resultat-vert-texte);
}

.vert .pourcentage {
	color: var(--texte-resultat-vert)
}

.vert .raison {
	background: #b7d8b7;
	color: #345b38;
}

.vert .source,
.vert .source a {
	color: var(--base-resultat-vert-texte)
}

/* Boite orange */

.orange .resultatcvresteboite {
	background: var(--base-resultat-orange);
	border: 1px solid var(--base-resultat-orange-outline);
	color: var(--base-resultat-orange-texte);
}

.orange .resultatcvtitreboite {
	background: var(--titre-resultat-orange);
	border: 1px solid #e5d2bd;
}

.orange .resultatcvtitre {
	color: var(--titretexte-resultat-orange)
}

.orange .nomscore {
	background: var(--score-orange);
	color: var(--base-resultat-orange-texte);
}

.orange .pourcentage {
	color: var(--texte-resultat-orange)
}

.orange .raison {
	background: #fee1b2;
	color: #8e5c26;
}

.orange .source,
.orange .source a {
	color: var(--base-resultat-orange-texte)
}

/* Boite rouge */

.rouge .resultatcvresteboite {
	background: var(--base-resultat-rouge);
	border: 1px solid var(--base-resultat-rouge-outline);
	color: var(--base-resultat-rouge-texte);
}

.rouge .resultatcvtitreboite {
	background: var(--titre-resultat-rouge);
	border: 1px solid #c07b7b;
}

.rouge .resultatcvtitre {
	color: var(--titretexte-resultat-rouge)
}

.rouge .nomscore {
	background: var(--score-rouge);
	color: var(--base-resultat-rouge-texte);
}

.rouge .pourcentage {
	color: var(--texte-resultat-rouge)
}

.rouge .raison {
	background: #ecacac;
	color: #873636;
}

.rouge .source,
.rouge .source a {
	color: var(--base-resultat-rouge-texte)
}

/* Boite orange-rouge */
.orange-rouge .resultatcvresteboite {
	background: linear-gradient(90deg, var(--base-resultat-orange), var(--base-resultat-rouge));
	border: 1px solid #dfd4c8;
}

.orange-rouge .resultatcvtitreboite {
	background: linear-gradient(90deg, var(--titre-resultat-orange), var(--titre-resultat-rouge));
	border: 1px solid #ddc3a8;
}

.orange-rouge .resultatcvtitre {
	color: #732c15
}

.orange-rouge .nomscore {
	background: #ffd8bc;
	color: #8e4f26;
}

.orange-rouge .pourcentage {
	color: var(--texte-resultat-orange)
}

.orange-rouge .raison {
	background: #ffd8bc;
	color: #8e4f26;
}

.orange-rouge .car {
	color: var(--base-resultat-orange-texte)
}

.orange-rouge .source,
.orange-rouge .source a {
	color: var(--base-resultat-rouge-texte)
}

/*Résultats---Titre*/

div.resultatcvtitreboite {
	background: #cbc6bf;
	padding: 10px 20px;
	font-size: 1.8em;
	text-align: center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 1px solid #c0b5ad;
}

.resultatcvtitre {
	font-weight: 700
}

/*Résultats---SCORE 2*/

.gris {
	color: #5f5b58;
}

.ligneresultat {
	display: flex;
	align-items: center;
}

.ligneresultat:not(:first-child) {
	margin-top: 15px;
}

.boitecar {
	display: flex;
	align-items: center;
}

.car {
	font-size: 0.9em;
	width: 4.5ch;
	margin-left: -10px;
	text-align: right
}

.resultscore {
	margin: 0 20px 0 15px;
	display: flex;
}

a.nomscore {
	background: var(--score-gris);
	font-size: 1.2em;
	font-weight: 700;
	padding: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	text-decoration: none;
	transition: unset;
	text-align: center;
}

a.nomscore:hover {
	text-decoration: underline
}

span.pourcentage {
	background: #ffffff;
	font-size: 1.2em;
	padding: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	display: flex;
	align-items: center;
	font-weight: 700;
	position: relative;
}

.resultscore.motsouligne {
	text-decoration: unset;
	-webkit-text-decoration: unset;
	text-underline-offset: unset;
}

.pourcentage .bulleinfo {
	bottom: 120%;
}

/*Résulats avec recommandations/raisons */

.boite_raison {
	margin: 0 20px 0 15px;
	display: flex;
	text-align: center;
}

.raison {
	background: var(--score-gris);
	font-size: 1.2em;
	font-weight: 600;
	padding: 10px 12px;
}

.raison:first-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.raison:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.joint_raison {
	background: white;
	font-size: 1.2em;
	padding: 0 12px;
	display: flex;
	align-items: center;
}

.detailraison {
	display: inline-block;
	font-weight: 400;
}

/* Sources des résultats */

.source {
	font-size: 0.95em;
	flex-shrink: 10000000;
}

.source a {
	text-decoration: none;
	font-weight: 600;
	color: var(--texte);
}

.source a:hover {
	text-decoration: underline
}

/*Résultats---Remarque*/

.anoterscore {
	margin: 0 20px;
}

span.message_erreur {
	background-color: var(--message-fond);
	color: var(--message-texte);
	border-radius: 20px;
	margin: 7px 0 28px;
	font-weight: 500;
	text-align: center;
	display: block;
}

.message_erreur a {
	color: var(--message-texte);
	text-underline-offset: 2px;
	font-weight: 600;
	text-decoration: none;
}

.message_erreur a:hover {
	text-decoration: underline;
}

.message_non_vide {
	padding: 10px;
	outline: 1px solid var(--message-outline);
}

/* 6) Boite pathologie       */


.contenupatho {
	margin: 8px 10px 0;
}

.principaltoggle:has(+ .contenupatho):has(:checked) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contenupatho p {
	margin-bottom: 0.5em
}

.contenupatho ul {
	margin-bottom: 0.5em
}

/* ================================
 *       BOITE DES RECOS
 * ================================ */

/* 1) Boite recos en elle même       */

.boiterecos {
	margin-top: 20px;
	color: #3c0909;
}

.boiterecostitre {
	background: #bfb2b1;
	border: 1px solid #d8d1cc;
	padding: 10px 20px;
	font-size: 1.4em;
	text-align: center;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	font-weight: 700;
}

.boiterecosreste {
	background: #f7f4f4;
	border: 1px solid #d5cec9;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	display: flex;
	border-top: none !important;
}

/* 3) Ligne recommandation       */

#recosici {
	margin: 20px;
	display: flex;
	flex-direction: column;
}

.lignerecos {
	display: flex;
	align-items: center;
	background-color: white;
	background-size: 10px 10px;
	background-image:
		repeating-linear-gradient(45deg,
			rgba(255, 255, 255, 0.8) 0,
			rgba(255, 255, 255, 0.8) 1px,
			rgba(254, 251, 251, 0.8) 0,
			rgba(255, 255, 255, 0.8) 50%);
	padding: 14px 20px;
	border-radius: 10px;
	font-size: 1.1em;
	margin: 0 10px;
	border: 1px solid #e5e2df;
	position: relative;
}

.lignerecos:not(:first-child) {
	margin-top: 10px
}

.recosnumtitre {
	display: flex;
	align-items: center;
}

.recosnumero {
	background: #bfb2b1;
	border-radius: 100px;
	font-weight: 500;
	min-width: 1.2em;
	min-height: 1.2em;
	max-width: 1.2em;
	max-height: 1.2em;
	display: inline-block;
	text-align: center;
	line-height: 1.15;
	font-size: 1.3em;
	color: #ffffff;
	border: 1px solid #ada198;
	padding-right: 1px;
}

.recostitre {
	background: #e7e0e0;
	padding: 3px 15px;
	border-radius: 10px;
	font-size: 1.1em;
	margin: 0 15px;
	font-weight: 600;
	border: 1px solid #dcd5d0;
	color: #3d2222;
}

.recostitre .gras {
	font-weight: 800;
	display: inline-block
}

.recosdebut {
	display: flex;
	flex-direction: column
}

.recosdebut:has(~ .recostexte .boitespoiler) {
	align-self: flex-start;
}

.recostexte {
	margin-right: 15px;
	flex-shrink: 1000000;
	width: 100%;
	display: flex;
	position: relative;
}

.recostexte ul {
	margin-bottom: 0
}

@media (min-width: 768px) {
	.recostitre {
		flex-shrink: 0;
	}
}

.recostexte li path {
	stroke: #3c0909;
}

.recostexte li svg {
	vertical-align: top;
	margin-right: 5px
}

.recostexte li a {
	color: #3c0909;
	font-weight: 450;
	text-decoration: none
}

.recostexte li a:hover {
	text-decoration: underline;
	font-weight: 550;
	text-underline-offset: 2.5px;
}

.recoswrapperfin {
	display: flex;
	align-items: center;
}

.recossource {
	flex-shrink: 0;
}

.recossource {
	z-index: 999
}

body:has(.motsouligne:hover) .recossource {
	z-index: unset
}

.recossource a {
	background: #a955551f;
	color: #6d3838;
	padding: 2px 7px;
	font-size: 0.8em;
	border-radius: 7px;
	text-decoration: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: none;
}

.recossource a:hover {
	text-decoration: underline;
	background: #7a0a0a1f
}

.lignerecos:has(.principaltoggle :checked) .recossource {
	position: absolute;
	top: 10px;
	right: 13px;
}

.boiterecos .bullequestion {
	background: #9775732b
}

.boiterecos .bullequestion:hover {
	background: #97757382
}

.boiterecos .motsouligne {
	text-decoration-color: #cdb9b9
}

.boiterecos .motsouligne:hover {
	text-decoration-color: #472929;
	color: #3c0909
}

/* généralisation avec ligne suivante 
 .boiterecos .principaltoggle:has(:checked) ~ .spoilerFdR {overflow: visible;}*/

.boitespoiler .toggleFdR:has(:checked)~.spoilerFdR {
	overflow: visible;
}

.boiterecos .boitespoiler:has(.principaltoggle :checked)>.principaltoggle {
	text-decoration: underline;
	text-underline-offset: 2.5px;
}

.plusieursrecos {
	z-index: 333
}

/* 4) Bouton recos       */
.recosbouton {
	min-width: max-content;
	position: relative;
	width: fit-content;
}

.recosbouton label {
	color: #ffffff;
	display: flex;
	font-weight: 500;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.recosbouton input {
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	left: 0;
}

.boutontexte {
	background-color: #736765;
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	border-right: 1px solid white;
	padding: 5px 9px 5px 15px;
	display: flex;
	align-items: center;
}

.recosbouton .boutonfleche {
	background-color: #736765;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	padding: 0px 3px 0px 2px;
	display: flex;
	align-self: stretch;
	align-items: center;
}

.recosbouton input:checked~.boutonfleche svg {
	transform: rotate(180deg);
}

.recosbouton input:checked~.boutonfleche {
	border-bottom-right-radius: 0;
}

/*.recosbouton label:hover .boutonfleche{background:#5b4f4d;}*/

.recosboutonhidden {
	max-height: 0;
	will-change: max-height, transform;
	overflow: hidden;
	opacity: 0.5;
	transform: translateY(-5px);
	transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 100%;
}

.recosbouton a {
	background-color: #fdf7f7;
	padding: 5px 10px;
	border: 1px solid #736765;
	border-top: none;
	z-index: 1000;
	color: #201e1d;
	text-decoration: none;
	font-weight: 450;
	display: flex;
	align-items: center;
}

.recosbouton a:hover {
	background-color: #f8ebeb;
	font-weight: 500;
}

.recosbouton a:last-child {
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
}

.recosbouton:has(:checked) .recosboutonhidden {
	max-height: fit-content;
	opacity: 1;
	transform: translateY(0);
	overflow: visible;
}

.recosbouton:has(:checked) .boutontexte {
	border-bottom-left-radius: 0;
}

.payant {
	margin-left: auto;
	min-width: 1.2em;
	max-height: 1.2em;
	margin-right: -4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #da9c9c;
	color: #700505;
	text-decoration: none !important;
	border-radius: 6px;
	padding-top: 1px
}

.payant:hover {
	background: #d68585;
}

.recosbouton.debut {
	display: none;
	animation: Entree 0.2s ease-out;
	margin-top: 15px;
}

.lignerecos:has(.principaltoggle input:checked) .recosbouton.debut {
	display: flex
}

.lignerecos:has(.principaltoggle input:checked) .recosbouton.fin {
	display: none
}

.recosbouton.fin {
	margin-right: 30px;
}


/*changement de style*/

.recosbouton label {
	color: #3d2222;
}

.boutontexte {
	background-color: #b99b994f;
	border-right: none;
	border: 1px solid #b09a9a;
}

.recosbouton .boutonfleche {
	background-color: #a5878582;
	border: 1px solid #a58f8f;
	border-left: none;
}

.recosbouton label:hover .boutontexte {
	background: #ad8a874f;
	color: #4f1111;
}

.recosbouton label:hover svg path {
	stroke: #4f1111
}

.recosbouton label:hover .boutonfleche svg {
	fill: #4f1111
}

label:hover .boutonfleche {
	background: #9b6e6a82
}

.recosbouton input {
	pointer-events: none;
}

/*debug hover*/

.recosbouton .boutonfleche:hover {
	background: #8c595582;
}

.boutonfleche:active {
	background: #8c4d4882 !important;
}

.boutontexte:active {
	background: #a06f6b4f !important;
}

.recosbouton label:hover {
	cursor: pointer
}

.boutonfleche svg {
	fill: #3d2222;
}

.boutontexte svg path {
	stroke: #3d2222;
}

.recosbouton a {
	border: 1px solid #b09a9a;
	border-top: none;
}

.recosbouton a:hover {
	background-color: #f6ebeb;
	color: #411d1d;
}

/* 5) Mini boite recos       */
.recosminiboite {
	display: flex;
	background: #fcfbfb;
	padding: 10px 20px;
	border-radius: 10px;
	align-items: center;
	outline: 1px solid #e5e2df;
	width: fit-content;
}

.recosminiboite:has(> *:only-child) {
	background: none;
	outline: none;
	padding: 5px 0;
}

.recoschiffre {
	background: #e7e0e0;
	padding: 3px 15px;
	border-radius: 10px;
	font-size: 1.1em;
	font-weight: 800;
	outline: 1px solid #d0c0c0;
	color: #3d2222;
	width: fit-content;
	min-width: max-content;
}

.puis {
	font-weight: 600;
	margin: 0 15px
}

.puislarge {
	font-weight: 600;
	margin: 0 33px 0 42px
}

.boitereduction:has(.reduction)~.puislarge {
	margin: 0 42px 0 33px
}

.puis .bulleinfo,
.puislarge .bulleinfo {
	max-width: 550px;
}

.textefin {
	margin-left: 15px
}

.recoschiffre .motsouligne {
	text-decoration: none
}

.reduction {
	font-weight: 600;
	font-size: 0.95em
}

.boitereduction {
	justify-items: center;
}

.etrecos {
	margin: 5px
}

.tttBonneSante {
	margin-left: 20px
}

.lignerecos .boitespoiler {
	margin: 0px 0px 0px 15px;
	z-index: 100
}

.lignerecos .boitespoiler:has(.principaltoggle :checked) {
	background: none;
	padding: 10px;
	margin: -5px 0px 0px 0px;
}

.lignerecos .spoilerFdR {
	margin-left: 25px
}

.lignerecos .spoilerFdR ul {
	margin-left: 45px
}

.lignerecos .spoilerFdR ul ul {
	margin-left: 35px
}

.vert~.boiterecos .recoschiffre {
	background: var(--base-resultat-vert);
	outline-color: var(--base-resultat-vert-outline);
	color: var(--base-resultat-vert-texte);
}

.orange~.boiterecos .recoschiffre {
	background: var(--base-resultat-orange);
	outline-color: var(--base-resultat-orange-outline);
	color: var(--base-resultat-orange-texte);
}

.orange-rouge~.boiterecos .recoschiffre {
	background: var(--base-resultat-orange);
	outline-color: var(--base-resultat-orange-outline);
	color: var(--base-resultat-orange-texte);
}

.rouge~.boiterecos .recoschiffre {
	background: var(--base-resultat-rouge);
	outline-color: var(--base-resultat-rouge-outline);
	color: var(--base-resultat-rouge-texte);
}

/* ================================
 *        ONGLETS SIMULATION 
 * ================================ */

.avecBoiteSimulation .resultatcvresteboite {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

#boiteOngletsSimulation {
	border: 1px solid;
	display: flex;
	align-items: center;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#boiteSimulationContenu {
	position: relative;
	border: 1px solid;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-top: none !important;
	padding: 10px 12px 20px;
	min-height: 200px;
}

.ongletSimulation {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25%;
	font-weight: 550;
	padding: 7px 0;
	font-size: 1.05em;
}

.ongletSimulation:not(:last-child) {
	border-right: 1px solid;
}

.ongletSimulation:hover {
	cursor: pointer;
}

.ongletSimulation:active {
	font-weight: 650
}

.svgOnglet {
	height: 1.3em;
	width: 1.3em;
	margin-right: 5px
}

.ongletTexte {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Boutons Paramètres/Zoom visibles uniquement sur la courbe de survie */
.lifechart-only {
	display: none !important;
}

#boiteSimulationContenu:has(> #boitelifechart:not(.hidden)) .lifechart-only {
	display: flex !important;
}

/* MOBILE (onglets) */
@media (max-width: 768px) {
	.ongletSimulation {
		flex-direction: column;
		padding: 12px 5px;
		font-size: 0.8em;
		text-align: center;
		line-height: 1.2;
	}

	.svgOnglet {
		margin-right: 0;
		margin-bottom: 5px;
	}
}

@media (max-width: 600px) {
	.ongletTexte {
		display: none;
	}

	.ongletSimulation {
		padding: 10px 4px;
	}

	.svgOnglet {
		width: 1.7em;
		height: 1.7em;
		margin-bottom: 0;
	}
}

/* Onglet Vert */
.vert #boiteOngletsSimulation {
	background: var(--vert-fond-onglet);
	border-color: var(--vert-bordure);
	color: var(--vert-texte);
}

.vert .ongletSimulation:not(:last-child) {
	border-color: var(--vert-bordure);
}

.vert .ongletSimulation:hover {
	background: var(--vert-fond-onglet-hover);
}

.vert .ongletSimulation:active,
.vert .ongletSimulation.selected {
	background: var(--vert-fond-onglet-selected);
}

.vert .ongletSimulation.selected:hover {
	background: var(--vert-fond-onglet-selected-hover);
}

.vert .ongletSimulation.selected:active {
	background: var(--vert-fond-onglet-selected-active);
}

.vert #boiteSimulationContenu {
	background: var(--vert-fond-onglet-boite) !important;
	border-color: var(--vert-bordure);
}

.vert #ongletSimulation1 svg path {
	fill: none;
	stroke: var(--vert-texte);
}

.vert .svgOnglet path {
	fill: var(--vert-texte);
}

/* Onglet Orange */
.orange #boiteOngletsSimulation {
	background: var(--orange-fond-onglet);
	border-color: var(--orange-bordure);
	color: var(--orange-texte);
}

.orange .ongletSimulation:not(:last-child) {
	border-color: var(--orange-bordure)
}

.orange .ongletSimulation:hover {
	background: var(--orange-fond-onglet-hover);
}

.orange .ongletSimulation:active,
.orange .ongletSimulation.selected {
	background: var(--orange-fond-onglet-selected);
}

.orange .ongletSimulation.selected:hover {
	background: var(--orange-fond-onglet-selected-hover);
}

.orange .ongletSimulation.selected:active {
	background: var(--orange-fond-onglet-selected-active);
}

.orange #boiteSimulationContenu {
	background: var(--orange-fond-onglet-boite) !important;
	border-color: var(--orange-bordure)
}

.orange #ongletSimulation1 svg path {
	fill: none;
	stroke: var(--orange-texte)
}

.orange .svgOnglet path {
	fill: var(--orange-texte)
}

/* Onglet Rouge */
.rouge #boiteOngletsSimulation {
	background: var(--rouge-fond-onglet);
	border-color: var(--rouge-bordure);
	color: var(--rouge-texte);
}

.rouge .ongletSimulation:not(:last-child) {
	border-color: var(--rouge-bordure);
}

.rouge .ongletSimulation:hover {
	background: var(--rouge-fond-onglet-hover);
}

.rouge .ongletSimulation:active,
.rouge .ongletSimulation.selected {
	background: var(--rouge-fond-onglet-selected);
}

.rouge .ongletSimulation.selected:hover {
	background: var(--rouge-fond-onglet-selected-hover);
}

.rouge .ongletSimulation.selected:active {
	background: var(--rouge-fond-onglet-selected-active);
}

.rouge #boiteSimulationContenu {
	background: var(--rouge-fond-onglet-boite) !important;
	border-color: var(--rouge-bordure);
}

.rouge #ongletSimulation1 svg path {
	fill: none;
	stroke: var(--rouge-texte);
}

.rouge .svgOnglet path {
	fill: var(--rouge-texte);
}

.nomscoreOnglet {
	text-decoration: none;
	color: inherit;
}

.nomscoreOnglet:hover {
	text-decoration: underline;
}

.lienScoreOnglet {
	font-weight: 300 !important;
}


/* ================================
 *        COMPTEURS (Onglet 1) 
 * ================================ */

.compteurs-titre {
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	color: #444;
	margin-bottom: 10px;
	margin-top: 5px;
}

.compteurs-grille {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.compteur-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: white;
	border-radius: 16px;
	border: 1px solid #e8e7ed;
	min-width: 140px;
	flex: 1;
	max-width: 180px;
	overflow: hidden;
	position: relative;
}

.compteur-age {
	font-weight: 700;
	font-size: 0.9em;
	margin-bottom: 10px;
	width: 100%;
	text-align: center;
	padding: 8px 1px;
}

.compteur-jauge {
	width: 140px;
	height: 70px;
	margin-bottom: 20px;
}

.compteur-canvas {
	width: 100%;
	height: 100%;
}

.compteur-valeur {
	font-size: 1.3em;
	font-weight: 800;
	line-height: 1;
	position: absolute;
	bottom: 20px;
	margin-left: 4px;
}

.avec-ttt .compteur-valeur {
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
	margin-top: -10px;
	margin-bottom: 5px;
	position: relative;
	bottom: auto;
	margin-left: 0;
}

.compteur-info-ttt {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 3px;
	margin-top: 10px;
	width: 100%;
	line-height: 1.3;
}

.compteur-info-ttt.pas-de-changement {
	height: 100%;
}

.pourcentageReductionRisque {
	font-weight: 700;
	font-size: 1.3em;
}

.compteur-texte-ttt-premiere-ligne {
	font-size: 0.9em;
}

.compteur-texte-ttt-deuxieme-ligne {
	font-size: 0.9em;
}

.compteur-texte-ttt-troisieme-ligne {
	font-size: 0.7em;
	line-height: 1.6;
}

/* ================================
 *     COULEURS NIVEAUX RISQUE
 * ================================ */
.risque-vert {
	color: var(--vert-compteur-vif);
}

.risque-orange {
	color: var(--orange-compteur-vif);
}

.risque-orange-fonce {
	color: var(--orange-fonce-compteur-vif);
}

.risque-rouge {
	color: var(--rouge-compteur-vif);
}

.compteur-card.risque-vert {
	border-color: var(--vert-compteur-bordure);
	color: var(--vert-compteur-texte);
}

.compteur-card.risque-vert .compteur-age {
	background: var(--vert-compteur-background-titre);
}

.compteur-card.risque-vert .compteur-info-ttt {
	background: var(--vert-compteur-background-info);
}

.compteur-card.risque-orange {
	border-color: var(--orange-compteur-bordure);
	color: var(--orange-compteur-texte);
}

.compteur-card.risque-orange .compteur-age {
	background: var(--orange-compteur-background-titre);
}

.compteur-card.risque-orange .compteur-info-ttt {
	background: var(--orange-compteur-background-info);
}

.compteur-card.risque-orange-fonce {
	border-color: var(--orange-fonce-compteur-bordure);
	color: var(--orange-fonce-compteur-texte);
}

.compteur-card.risque-orange-fonce .compteur-age {
	background: var(--orange-fonce-compteur-background-titre);
}

.compteur-card.risque-orange-fonce .compteur-info-ttt {
	background: var(--orange-fonce-compteur-background-info);
}

.compteur-card.risque-rouge {
	border-color: var(--rouge-compteur-bordure);
	color: var(--rouge-compteur-texte);
}

.compteur-card.risque-rouge .compteur-age {
	background: var(--rouge-compteur-background-titre);
}

.compteur-card.risque-rouge .compteur-info-ttt {
	background: var(--rouge-compteur-background-info);
}




/* ================================
 *     NUAGE DE POINTS (Onglet 2) 
 * ================================ */

.nuage-header {
	text-align: center;
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	align-items: center;
}

.nuage-titre-principal {
	font-size: 0.85em;
	font-weight: 600;
	color: #444;
	margin-top: 5px;
}

.nuage-sous-titre {
	color: #555;
	font-size: 1.05em;
}

.nuage-age-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

input.nuage-age-input {
	outline: 1px solid #b5b5c0;
	border: none;
	width: 4.5ch;
	padding: 0;
	text-align: center;
	border-radius: 10px;
	font-weight: 550;
	line-height: 1.3;
	font-size: 1em;
}

input.nuage-age-input:focus {
	outline: 2px solid #434572;
}

.nuage-layout {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	justify-content: center;
}

.nuage-grille {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 4px;
	padding: 12px;
	max-width: 340px;
}

.nuage-point {
	width: 28px;
	height: 28px;
	animation: pointApparition 0.3s ease-out both;
}

@keyframes pointApparition {
	from {
		opacity: 0;
		transform: translateY(3px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nuage-personne {
	width: 100%;
	height: 100%;
}

.nuage-personne-gris .nuage-personne path,
.nuage-personne-gris .nuage-personne circle {
	fill: #e0e0e0;
}

.nuage-personne-rouge .nuage-personne path,
.nuage-personne-rouge .nuage-personne circle {
	fill: #e57373;
}

.nuage-personne-vert .nuage-personne path,
.nuage-personne-vert .nuage-personne circle {
	fill: #66bb6a;
}

.nuage-boutons-age {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 0;
}

.bouton-nuage-age {
	padding: 5px 14px 5px 10px;
	border-radius: 14px;
	font-size: 0.9em;
	font-weight: 550;
	border: none;
	outline: 1px solid var(--bouton-bleu-outline);
	background: var(--bouton-bleu-background);
	cursor: pointer;
	transition: 0s;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

.bouton-nuage-age .coche {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	flex-shrink: 0;
	box-shadow: 0px 0px 0px 1.5px #373465;
}

.bouton-nuage-age .transitioncoche {
	width: 36px;
	height: 36px;
	left: -31px;
	top: -31px;
	position: absolute;
	transform: rotateZ(45deg);
	transition: left 0.15s ease, top 0.15s ease;
	background: var(--coche-texte);
}

.bouton-nuage-age.selected .transitioncoche {
	left: -6px;
	top: -6px;
}

.bouton-nuage-age:hover {
	background: var(--bouton-bleu-background-hover);
}

.bouton-nuage-age.selected {
	outline: 1px solid var(--bouton-bleu-outline-checked);
	background: var(--bouton-bleu-background-checked);
	font-weight: 600;
}

.bouton-nuage-age:active {
	outline: 2px solid #bfbdd2;
}

.nuage-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: center;
	margin-top: 10px;
	font-size: 0.78em;
	color: #555;
}

.nuage-leg-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.nuage-leg-item .nuage-personne {
	width: 14px;
	height: 14px;
}

.nuage-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.nuage-dot-gris {
	background: #e0e0e0;
}

.nuage-dot-rouge {
	background: #e57373;
}

.nuage-dot-vert {
	background: #66bb6a;
}

/* ================================
 *     BARRES (Onglet 3, Chart.js) 
 * ================================ */

.barres-titre {
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	color: #444;
	margin-bottom: 10px;
}

.barres-canvas-wrap {
	position: relative;
	height: 200px;
	max-width: 600px;
	margin: 0 auto;
}

/* Responsive visualizations */
@media (max-width: 600px) {
	.compteurs-grille {
		gap: 8px;
	}

	.compteur-card {
		min-width: 110px;
	}

	.compteur-jauge {
		width: 110px;
		height: 60px;
	}

	.nuage-grille {
		gap: 3px;
		padding: 10px;
		max-width: 300px;
	}

	.nuage-point {
		width: 22px;
		height: 22px;
	}

	.nuage-layout {
		flex-direction: column;
		align-items: center;
	}

	.nuage-boutons-age {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* ================================
 *             CANVAS 
 * ================================ */

@media (max-width: 550px) {
	#boitelifechart {
		margin: 0 -10px 0 -5px
	}
}

#boitelifechart {
	position: relative;
	margin: 20px 0 25px 0;
}

#LifeChart {
	position: relative;
	top: 0;
	left: 0;
	transform: unset;
	animation: fadeIn 0.5s ease-out;
}

#LifeChartContainer {
	transition: height 0.4s cubic-bezier(0.4, 0.79, 0.01, 1.2);
	height: 370px;
}

#LifeChartContainer.pleinecran {
	height: 600px;
}


#OptionsFlottantes input[type="number"] {
	outline: 1px solid #b5b5c0;
	border: none;
	width: 4ch;
	padding: 0;
	text-align: center;
	border-radius: 10px;
	font-weight: 500;
	line-height: 1.3
}

#OptionsFlottantes input[type="number"]:focus {
	outline: 2px solid #434572;

}


#OptionsFlottantes button:not(.croix) {
	background: #dfdfef;
	font-size: 0.85em;
	margin: 7px 3px 3px 0;
	padding: 2px 10px;
	border-radius: 12px;
	outline: 1px solid #cac9d5;
	animation: fadeIn 0.2s ease-out;
	color: var(--texte);
	transition: 0s;
}

#boitecontrols button:last-child {
	margin-right: 0
}

#OptionsFlottantes button:not(.croix):hover {
	background: #d0d0e4;
}

#OptionsFlottantes button:not(.croix):active {
	outline: 2px solid #bfbdd2;
}

#traitementsHR {
	display: flex;
	flex-direction: column;
	align-items: flex-end
}

#traitementsHR input[type="checkbox"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

#traitementsHR .cocheform>div {
	padding: 4px 9px 4px 5px;
	font-size: 1em;
	border-radius: 14px;
	margin-top: 8px;
}

#traitementsHR .cocheform:has(input:checked),
#traitementsHR label.cocheform:active {
	outline: none;
}


#traitementsHR .cocheform>input:checked+div {
	outline: 1px solid var(--bouton-bleu-outline-checked);
	background: var(--bouton-bleu-background-checked);
}

#traitementsHR .coche {
	width: 20px;
	height: 20px;
	box-shadow: 0px 0px 0px 1.5px #373465;
}

#traitementsHR label:hover .coche {
	width: 20px;
	height: 20px;
	box-shadow: 0px 0px 0px 2px #373465;
}

#traitementsHR .coche div {
	width: 60px;
	height: 60px
}

#traitementsHR label.cocheform:active>div {
	outline: 2px solid #bfbdd2;
}

#traitementsHR .cocheform input+div {
	background: var(--bouton-bleu-background);
	display: flex;
	outline: 1px solid var(--bouton-bleu-outline)
}

#traitementsHR .cocheform:hover input+div {
	background: var(--bouton-bleu-background-hover)
}

#boitecontrols,
#pasHRage,
#HRldlGramme,
#HRldlMol {
	z-index: 1000000;
}

#boitetraitementsHR {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#OptionsFlottantes>div>div {
	animation: Entree 0.3s ease;
	display: none;
	background: #f4f4f8b3;
	border: 1px solid #e1e0e9;
	right: 0;
	white-space: nowrap;
	backdrop-filter: blur(4px);
	border-radius: 20px;
	padding: 5px 8px;
}

#dureeRisque {
	margin-top: 6px;
}

.agedebutHR {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: #b5b5c0;
	font-weight: 300;
}

#pasHRage {
	margin-left: 5px
}

#OptionsFlottantes {
	position: absolute;
	z-index: 200;
	top: 48px;
	right: 25px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7em;
}

#OptionsFlottantes div {
	width: fit-content;
	justify-items: center;
	text-align: center;
}

#OptionsFlottantes>div>label {
	background: #cbcde291;
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	color: var(--coche-texte);
	font-weight: 650;
	padding: 0 10px 0 3px;
	border-radius: 10px;
	outline: 1px solid #bab9c8;
}

#OptionsFlottantes>div>label:hover {
	background: #b5b8d991;
}

#OptionsFlottantes>div>label:active {
	background: #aaadd29c;
}


#OptionsFlottantes>div>label>input {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

#iconOptionChart svg {
	width: 2.5em;
	height: 2.5em;
}

#iconOptionChart .zoom {
	margin-bottom: 0.7em;
	justify-self: self-end;
}

#iconOptionChart .zoom svg {
	width: 2.3em;
	height: 2.3em;
	margin-right: 2px;
	padding: 2px
}

#iconOptionChart .parametres svg {
	animation: rotation 10s linear infinite;
	animation-play-state: paused;
}

#iconOptionChart .zoom:hover svg {
	transform: scale(1.02)
}

#iconOptionChart label:hover svg {
	animation-play-state: running;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

#icontraitementsHR svg {
	width: 2.4em;
	height: 2.4em;
	margin-right: 1px
}

#OptionsFlottantes label svg path {
	fill: var(--coche-texte)
}

#OptionsFlottantes .zoom path {
	stroke: var(--coche-texte)
}

#iconOptionChart:has(.parametres input:checked) #boitecontrols {
	display: block
}

#iconOptionChart:has(.parametres input:checked)>label {
	display: none
}

#OptionsFlottantes:has(#icontraitementsHR > label > input:checked) #boitetraitementsHR {
	display: block
}

#OptionsFlottantes:has(#icontraitementsHR > label > input:checked) #icontraitementsHR>label {
	display: none
}

#OptionsFlottantes .croix {
	color: var(--coche-texte);
	background: var(--coche);
	font-weight: 800;
	outline: 1px solid var(--coche-outline);
}

#OptionsFlottantes .croix:hover {
	background: #d7d8eb;
	transition: 0s
}

#HRpublic {
	display: flex;
	align-items: center;
	font-weight: 600;
	margin: 10px 0 5px;
	animation: fadeIn 0.3s ease;
}

#HRpublic>div>div {
	display: flex;
	align-items: center;
	margin: 5px 0;
}

#HRpublic>div {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 2px solid var(--texte)
}

#HRcvd,
#HRnoncvd {
	font-size: 1.5em;
}

.HRdescription {
	font-size: 0.7em;
	line-height: 1.2;
	font-weight: 300;
	margin-left: 10px;
}

/* LDL HR */

#questionsTraitement>div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#questionsTraitement h3 {
	font-size: 1em;
	font-weight: 550;
	margin: 5px 0;
	text-align: center;
}

#questionsTraitement h3>span {
	font-weight: 650;
	font-size: 1.15em
}

.separateurQuestion {
	font-size: 0.75em;
	font-weight: 300
}

#ldlsuite,
.ldlswitch {
	display: flex;
	align-items: center;
	animation: fadeIn 0.25s ease-out forwards;
}

label:has(#ldlHR:not(input:checked)) #ldlsuite {
	display: none
}

.ldlswitch {
	position: relative;
	margin-left: 3px
}

#icontraitementsHR .ldlswitch svg {
	height: 1em;
	width: 1em;
}

.ldlswitch svg.clicked {
	animation: rotate180 0.25s ease-out forwards;
}

#question2 label {
	display: flex;
	align-items: center;
}

#question2 label:nth-of-type(1) {
	margin-top: 10px;
}

#question2 label:nth-of-type(2) {
	margin-bottom: 10px;
}

#question2 label:nth-of-type(2) .pre_unit {
	width: 5.6ch
}

#question2 .separateurQuestion {
	margin: 5px 0
}

#OptionsFlottantes #question2 input {
	height: 2.3em;
	font-size: 1.1em;
	font-weight: 550 !important;
	width: 8ch;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}

/* État rempli : inputs compacts avec unités visibles */
#question2:not(.cholesterol-vide) input {
	width: 4.5ch !important;
	border-bottom-right-radius: 0px !important;
	border-top-right-radius: 0px !important;
}

#question2:not(.cholesterol-vide) input#cibleLDLg {
	width: 6ch !important;
}

#OptionsFlottantes #question2 input::placeholder {
	color: #cbcee1;
}

#question2 .pre_unit {
	height: 2.81em;
	line-height: 2.7em;
	font-size: 0.9em
}

#question2 label:has(input:focus) .pre_unit {
	outline: 2px solid #434572;
	color: var(--texte)
}

#question2 .pre_unit {
	border: none;
	outline: solid 1px var(--non-coche-outline);
}

#icontraitementsHR #questionLDL button svg {
	width: 1.3em;
	height: 1.3em;
	margin-right: 5px;
}

#OptionsFlottantes #questionLDL button:not(.croix) {
	font-size: 0.9em;
	font-weight: 450;
	display: flex;
	align-items: center;
}

#changementTraitement select {
	outline: 1px solid #b5b5c0;
	border: none;
	padding: 0;
	text-align: center;
	border-radius: 5px;
	font-weight: 500;
	line-height: 1.3;
	font-size: 1em;
}

#changementTraitement select:focus {
	outline: 1px solid #b5b5c0;
}

#ldlHRchild {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#ldlHRchild2 {
	display: flex;
	align-items: center;
}

#diminutionTtt {
	display: block;
	margin-left: 5px;
	font-weight: 500;
	height: fit-content;
	padding: 1px 3px;
	border-radius: 5px;
	text-align: center;
	line-height: 1.3;
	outline: 1px solid #c5c4d7;
	background: #fdfdfd;
}

#diminutionTtt span {
	font-weight: 400;
	font-size: 0.9em;
}

#changementTraitement {
	display: flex;
	margin-top: 2px;
	font-size: 0.9em;
	animation: fadeIn 0.25s ease-out forwards;
	background: #efeffb;
	border-radius: 7px;
	padding: 5px 6px;
	align-items: center;
}

.BoiteStatineEzetimibe {
	display: flex;
	flex-direction: column;
	margin-bottom: -5px;
}

.flecheTtt {
	margin: 0 6px 0 5px;
	font-size: 1.3em;
}

#changementTraitement .BoiteStatineEzetimibe:nth-of-type(2) {
	border-right: 1px solid #c4c3d2;
	padding-right: 5px;
}

.BoiteStatineEzetimibe label {
	margin-top: 4px;
	text-align: center;
}

#traitementsHR .BoiteStatineEzetimibe input {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	margin-right: 5px;
}

#ldlsuite span {
	animation: fadeIn 0.3s ease
}

#OptionsFlottantes {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



/* ================================
      BOUTON COPIER RISQUECV.FR
 * ================================ */

.boitecopier {
	display: flex;
	justify-content: center;
}

.boutoncopier {
	position: relative;
	overflow: hidden;
	background: #2aa22a2b;
	margin-top: 20px;
	color: #3c6534;
	outline: 1px solid #9db299;
	font-weight: 600;
	font-size: 1.13em;
	border: none;
	border-radius: 14px;
	padding: 10px 16px;
	cursor: pointer;
	user-select: none;
}

.boutoncopier:hover:not(:disabled) {
	background: #138b1338;
	color: #3c6534;
}

.boutoncopier:focus:not(:disabled) {
	background: #138b1338;
	color: #3c6534;
	outline: 1px solid #9db299;
}

.boutoncopier:active:not(:disabled) {
	transform: scale(0.98);
	outline: 1px solid #9db299;
}

.boutoncopier:disabled {
	cursor: not-allowed;
	background: #f0f0f0;
	color: #aaa;
}

.boutoncopier-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform 0.3s ease;
}

.icon-wrapper {
	position: relative;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.icon-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.icon-wrapper .svg-copier rect {
	stroke: #3c6534;
}

.icon-wrapper .svg-success {
	transform: scale(0.5);
	opacity: 0;
}

.boutoncopier.is-copied .icon-wrapper .svg-copier {
	transform: scale(0.5);
	opacity: 0;
}

.boutoncopier.is-copied .icon-wrapper .svg-success {
	transform: scale(1);
	opacity: 1;
}

.text-wrapper {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.text-wrapper span {
	display: block;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.copier-text-success {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(110%);
}

.boutoncopier.is-copied .copier-text-original {
	transform: translateY(-110%);
}

.boutoncopier.is-copied .copier-text-success {
	transform: translateY(0);
}

.copie-erreur {
	display: none;
	align-items: center;
	margin-left: 10px;
	font-size: 1em;
	color: #a41835;
	font-weight: bold;
	gap: 5px;
}

.copie-erreur svg {
	width: 18px;
	height: 18px;
	fill: #a41835;
}

@media (max-width: 600px) {
	.boutoncopier {
		font-size: 1em;
	}
}






/* ================================
 *          VERSION MOBILE
 * ================================ */

/* 1) Message "mise en page meilleure sur PC"  */

.casemobile {
	position: relative;
	text-align: center;
	margin: 0 10px;
	background: #84776212;
	outline: 1px solid var(--non-coche-outline);
}

.is-layout-flex.casemobile {
	display: none;
	padding: 15px 10px;
	border-radius: 20px;
	margin-bottom: 15px;
}

@media (max-width: 1200px) {
	.espacesurpc {
		height: 0px !important;
	}

	/*.espacesurpcbas {
    height: 60px !important;
  }*/
	.is-layout-flex.casemobile {
		display: block;
	}
}

.croix {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 13px;
	height: 13px;
	background-color: #c6c3c3;
	color: #423524;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid #9c9999;
	outline: none;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 10px;
	transition: background-color 0.2s, border-color 0.2s;
}

.croix:hover {
	background-color: #b8b5b5;
	color: #423524;
	border-color: #8a8888;
}

.croix:active {
	background-color: #a8a5a5;
	border: 1px solid #9c9999 !important;
	color: #423524 !important;
}

.croix:focus {
	background-color: #c6c3c3;
	color: #423524;
	border-color: #6e6e6e;
	outline: none;
	box-shadow: 0 0 0 2px rgba(66, 53, 36, 0.2);
}

/* 2) Changements CSS sur mobile  */

@media (max-width: 768px) {

	.quatre,
	.cinq,
	.six {
		font-size: 1em !important
	}

	h1.titreaccueil {
		font-size: 2.1em !important
	}

	.espacesurpcbas {
		display: none
	}

	.preform {
		flex-direction: row;
		height: unset
	}

	.preform div {
		flex-direction: column;
	}

	.pre_texte {
		width: unset;
		display: contents !important
	}

	.pre_radio,
	.pre_input {
		width: unset;
		order: 2;
		align-self: center
	}

	.pre_radio label {
		padding: 10px 25px;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
	}

	.pre_titre {
		margin-bottom: 15px;
		font-size: 2em;
		order: 1;
	}

	.preform> :not(.preATCD) .pre_titre {
		font-size: 2.1em;
	}

	.pre_soustitre {
		order: 3;
		margin-top: 20px
	}

	.pre_soustitre:not(.preATCD .pre_titre) {
		animation: Entree 0.2s ease-out;
	}

	.pre_titre:not(.preATCD .pre_soustitre) {
		animation: Entree 0.2s ease-out;
	}

	@supports (-webkit-touch-callout: none) {
		.pre_input input::placeholder {
			position: absolute;
			top: unset;
			left: unset;
			transform: unset;
		}
	}

	.cocheform.boiteformulaire {
		margin: 0 7px 10px 0
	}

	.cocheform input+div {
		font-size: 0.95em;
		padding: 7px;
		line-height: 1.1
	}

	.coche {
		width: 18px;
		height: 18px;
		margin: 0 0.5em 0 0.3em;
	}

	.sliderformulaire {
		font-size: 0.95em;
		line-height: 1.1;
		margin: 0 7px 3px 0
	}


	.age input,
	.pas input {
		width: 2em;
		font-size: 2em;
	}

	.CT input,
	.HDL input,
	.LDL input {
		font-size: 1.5em;
	}

	.boiteformulaire.CT,
	.boiteformulaire.HDL,
	.boiteformulaire.age,
	.boiteformulaire.pas,
	.boiteformulaire.pays {
		padding: 8px
	}

	.pays select {
		width: 120px;
		height: 53px;
		font-size: 1.2em;
	}

	label.CT,
	label.HDL,
	label.LDL {
		width: 15ch;
	}

	.titreform {
		font-size: 1em
	}

	.unit {
		font-size: 0.75em
	}

	input#CTmol,
	input#CTmol~span,
	input#HDLmol,
	input#HDLmol~span,
	input#LDLmol,
	input#LDLmol~span {
		margin-bottom: 8px;
	}

	.boiteformulaire.HDL {
		margin-right: 0
	}

	span.message_erreur {
		margin-bottom: 14px;
		margin-top: 7px
	}

	/* chart*/

	#OptionsFlottantes {
		flex-direction: column-reverse;
	}

	#OptionsFlottantes>div>label {
		font-size: 0.75em
	}

	#boitecontrols label {
		font-size: 0.8em
	}

	#boiteSurvie {
		flex-direction: column;
		display: flex;
	}



	/* PreAlbu*/

	.preALBU .pre_texte,
	.preALBU .pre_radio,
	.cestlebazar {
		width: unset;
	}

	.preALBU .pre_radio {
		order: 1
	}

	.colonnemilieu {
		order: 2;
		align-self: center;
		margin: 10px 0
	}

	.cestlebazar {
		width: unset;
		order: 2
	}

	/*Boite risque*/

	div.resultatcvtitreboite {
		font-size: 1.5em
	}

	.ligneresultat {
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
	}

	.source {
		margin: 15px 0 10px
	}

	.resultscore {
		margin-right: 0
	}

	.boite_raison {
		margin-right: 0;
		display: flex;
		flex-direction: column;
	}

	.joint_raison {
		display: block
	}

	.raison:first-child:not(:last-child) {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 0;
	}

	.raison:last-child:not(:first-child) {
		border-top-right-radius: 0;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.boitespoiler {
		margin: 10px 0 0px 0px;
	}

	.boitespoiler:has(.principaltoggle :checked) {
		margin: 0px -10px
	}

	.facteur .spoilerFdR {
		margin-left: 0;
	}

	.toggleFdR {
		padding-left: 25px
	}

	.toggleFdR::before {
		left: 5px;
	}

	.facteur .tableFdR {
		margin: 5px 0
	}

	#resultatsici .boitespoiler:has(.principaltoggle :checked) {
		margin-bottom: 10px
	}

	.contenupatho ul {
		margin-left: 30px;
	}

	/*Boite Recos*/

	#recosici {
		margin: 10px
	}

	.lignerecos {
		flex-direction: column;
		padding: 10px 15px;
		margin: 0;
		align-items: normal;
	}

	.recostitre {
		margin-right: 0;
	}

	.recostexte {
		margin: 15px 0
	}

	.lignerecos:has(.principaltoggle input:checked) .recosbouton.fin {
		display: flex;
	}

	.lignerecos:has(.principaltoggle input:checked) .recosbouton.debut {
		display: none
	}

	.lignerecos .boitespoiler {
		margin: 0 0 5px
	}

	.lignerecos .boitespoiler:has(.principaltoggle :checked) {
		padding: 0;
		margin: 0;
	}

	.lignerecos .spoilerFdR ul {
		margin-left: 10px;
	}

	.lignerecos .spoilerFdR ul ul {
		margin-left: 20px;
	}

	.lignerecos:has(.principaltoggle :checked) .recossource {
		position: relative;
		top: 0;
		right: 0;
	}

	.lignerecos .toggleFdR {
		padding-left: 25px;
	}

	.lignerecos .toggleFdR::before {
		left: 5px;
	}

	.boitereduction {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.recoswrapperfin {
		justify-content: right;
	}

	.recoswrapperfin:has(.recosbouton) {
		justify-content: space-between;
		margin-bottom: 5px
	}

	.recosbouton.fin {
		margin-right: 0
	}


	.caseaccueil h2 {
		margin-left: -3px;
		margin-right: -5px;
	}


	@keyframes fadeInVisibility {
		0% {
			visibility: hidden;
		}

		50% {
			visibility: hidden;
		}

		100% {
			visibility: visible;
		}
	}

	@keyframes fadeInAndBlur {

		0%,
		10% {
			background: transparent;
			backdrop-filter: none;
		}

		100% {
			background: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(10px);
		}
	}

	.mobile .bulleinfo {
		max-width: 90vw;
	}

}

/*fin mobile*/


@media (max-width: 550px) {
	.recosminiboite {
		flex-direction: column;
		align-self: center;
		padding: 25px 15px;
	}

	.puis,
	.puislarge {
		margin: 10px 0 !important
	}

	.textefin {
		margin: 10px 0 0;
	}

	#OptionsFlottantes:has(#traitementsHR input:checked) {
		top: 70px
	}

	#iconOptionChart .zoom {
		display: none
	}

	#LifeChart {
		max-height: unset
	}



}

/* fin mobile compact */


/* ================================
 *         RESPONSIVE
 * ================================ */

@media (max-width: 1099px) {
	.tttBonneSante {
		margin-left: 0px;
		margin-top: 10px
	}

	.recostexte {
		flex-direction: column
	}
}

@media (min-width: 769px) and (max-width: 950px) {
	.recosdebut {
		flex-shrink: 100000;
	}

	.recosnumtitre {
		flex-direction: column;
		margin-right: 10px
	}

	.recostitre {
		margin: 10px 0 0;
		text-align: center
	}

	.recosbouton.fin {
		margin-right: 20px;
	}

}

@media (min-width: 769px) and (max-width: 1199px) {

	:where(.wp-block-columns.is-layout-flex) {
		gap: 1em;
	}

	.recostitre {
		flex-shrink: 100;
	}

	#recosici {
		margin: 20px 10px
	}

	.lignerecos {
		padding: 14px 15px
	}

	.recossource {
		flex-shrink: 1;
		display: flex;
		align-items: center;
		text-align: center
	}

}

.sousbouton svg {
	flex-shrink: 0;
}

/* debug icone ficheconseil*/

/* Compteur (ancien, lifechart) */

canvas#compteurRisque {
	position: relative;
	transform: none;
	left: 0;
	top: 0;
}

#CompteurContainer {
	max-width: 350px;
	margin: auto;
}

/* Compteur (nouveau, résultats) */

.ligneresultat.nouvelleVersionCompteur {
	flex-direction: column;
	border: 1px solid;
	border-radius: 20px;
}

.vert .ligneresultat.nouvelleVersionCompteur {
	background: var(--vert-fond-simulation);
	border-color: var(--vert-bordure);
}

.orange .ligneresultat.nouvelleVersionCompteur {
	background: var(--orange-fond-simulation);
	border-color: var(--orange-bordure);
}

.rouge .ligneresultat.nouvelleVersionCompteur {
	background: var(--rouge-fond-simulation);
	border-color: var(--rouge-bordure);
}

.nouvelleVersionCompteur .boiteLigneResultat {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	padding: 13px 20px 8px 20px;
	gap: 30px;
}


.nouvelleVersionCompteur .boiteCompteur {
	width: 300px;
	max-width: 70%;
}

.nouvelleVersionCompteur #infoCompteur {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 5px;
	line-height: 1;
}


.nouvelleVersionCompteur .resultscore {
	margin: 0;
	font-size: 1.4em;
}


.nouvelleVersionCompteur .resultscore .nomscore {
	font-weight: 650;
}

.nouvelleVersionCompteur .resultscore .pourcentage {
	font-weight: 750;
}

.nouvelleVersionCompteur .precisionsCompteur {
	font-size: 0.70em;
	margin-top: 5px;
	text-align: center
}


.nouvelleVersionCompteur .boiteJustification {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 44%;
	margin-top: 30px
}

.nouvelleVersionCompteur .source {
	font-size: 1em
}

.nouvelleVersionCompteur .source.anoter {
	font-size: 0.9em;
	background: #c8c8c81c;
}

.nouvelleVersionCompteur>.boitespoiler {
	margin: 15px 0 15px 20px;
}

.nouvelleVersionCompteur .boitespoiler:has(.principaltoggle :checked) {
	margin: 5px;
}

@media (max-width: 768px) {
	.nouvelleVersionCompteur .boiteLigneResultat {
		flex-direction: column;
	}

	.nouvelleVersionCompteur .boiteCompteur {
		width: 85%;
		max-width: 280px;
	}

	.nouvelleVersionCompteur .boiteJustification {
		max-width: 100%;
		margin-top: 0px
	}

}






/* LDL dans les recoStatine*/
.lignerecos .LDL.boiteformulaire {
	flex-direction: row;
	gap: 10px;
	width: fit-content;
}

.lignerecos .LDL div {
	display: inline-flex
}

.recostexte:has(label.LDL) {
	flex-direction: column;
}

.lignerecos .LDL .titreform {
	color: #3c0909;
	font-size: 1.2em;
	margin: 0 3px 0 5px;
}

.lignerecos .LDL input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	height: 1.5em;
}

.lignerecos .LDL input::placeholder {
	color: #e7e1e1;
	font-size: 16px;
}

.boutonRecosLDL,
.boutonRecosLDL:focus {
	color: #3c0a09;
	background: #bfb3b2;
	border-radius: 10px;
	font-size: 0.9em;
	padding: 0 10px;
	border: solid 1px #a99c9c;
	line-height: 2.9em;
	font-weight: 600;
}

.boutonRecosLDL:hover {
	color: #260504;
	background: #b2a4a3;
	border-color: #9a8d8d;
}

.boutonRecosLDL:active {
	color: #260504;
	background: #958482;
	border-color: #9e8989;
}



/* page mise à jour */

.casetemporaire:hover {
	transform: none
}

/* bouton mise à jour*/

.case2 .wp-block-button__link:hover {
	background: #79000078 !important;
}

.case2 .wp-block-button__link:active {
	background: #6c00008c !important;
}

.case2 .wp-block-button__link {
	border: 1px solid #b17b7b !important;
}

/* disposition accueil en plusieurs blocs */

.wp-block-columns {
	margin-top: 0.75em !important
}

.wp-block-group.case1,
.wp-block-group.case2,
.wp-block-group.case3 {
	margin-top: 1.25em;
	display: block;
}

.is-layout-flex.wp-block-group.case1> :is(*, div),
.is-layout-flex.wp-block-group.case2> :is(*, div),
.is-layout-flex.wp-block-group.case3> :is(*, div) {
	margin: revert;
}

.wp-block-group.case1 h2,
.wp-block-group.case2 h2,
.wp-block-group.case3 h2 {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

/* disposition des input */


.formulaire:has(label.typediabete:not(.nope)) .autrepb {
	margin-right: 25px
}

.formulaire:has(label.albuminurie:not(.hidden)) .boite_sexetabac {
	flex-direction: column !important;
}

.albuminurie {
	width: fit-content
}

/* Coloration du texte du risque */

.source .Risquerouge {
	font-weight: 550;
	color: var(--rouge-texte-risque);
	background: #a50d0d14;
	padding: 1px 4px;
	border-radius: 5px;
}

.source .Risqueorange {
	font-weight: 550;
	color: var(--orange-texte-risque);
	background: #a5550d14;
	padding: 1px 4px;
	border-radius: 5px;
}

.source .Risquevert {
	font-weight: 550;
	color: var(--vert-texte-risque);
	background: #0da51f14;
	padding: 1px 4px;
	border-radius: 5px;
}

.source .Risquegris {
	font-weight: 550;
	color: var(--gris-texte-risque);
	background: #0000000d;
	padding: 1px 4px;
	border-radius: 5px;
}

/* Boite A noter */

.anoter {
	margin-top: 15px;
	background: #52525212;
	padding: 9px 15px;
	border-radius: 10px;
	outline: 1px solid #4f4f4f24;
	text-align: center;
}