/* =====================================================================
	Matrice de l’entretien de l’enfant, commune aux pages française et
	anglaise : couleurs des deux parents, carte thermique de la matrice,
	grille de prise en charge, barres, cartes de résultat, infobulle
	(reprises de l’ancien outil) et sources en notes de bas de page.
	Après une modification, augmenter ?v= dans les deux pages.
	===================================================================== */
:root {
	--parent-a: #3656b5; --parent-a-doux: rgba(54, 86, 181, .13); --parent-a-sur: #ffffff;
	--parent-b: #b0382d; --parent-b-doux: rgba(176, 56, 45, .12); --parent-b-sur: #ffffff;
	--case-froide: rgba(255, 255, 255, .62); --case-chaude: #cdb57e; --case-anneau: #ffffff; --case-entete: rgba(74, 108, 202, .09); --badge-texte: #6b5300;
}
:root[data-theme="dark"] {
	--parent-a: #9fb4ff; --parent-a-doux: rgba(159, 180, 255, .16); --parent-a-sur: #0b1530;
	--parent-b: #ff9d91; --parent-b-doux: rgba(255, 157, 145, .15); --parent-b-sur: #2a0b07;
	--case-froide: rgba(255, 255, 255, .03); --case-chaude: rgba(230, 195, 92, .5); --case-anneau: #0b1530; --case-entete: rgba(255, 255, 255, .06); --badge-texte: #e6c35c;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--parent-a: #9fb4ff; --parent-a-doux: rgba(159, 180, 255, .16); --parent-a-sur: #0b1530;
		--parent-b: #ff9d91; --parent-b-doux: rgba(255, 157, 145, .15); --parent-b-sur: #2a0b07;
		--case-froide: rgba(255, 255, 255, .03); --case-chaude: rgba(230, 195, 92, .5); --case-anneau: #0b1530; --case-entete: rgba(255, 255, 255, .06); --badge-texte: #e6c35c;
	}
}
.mx-txt-a { color: var(--parent-a); }
.mx-txt-b { color: var(--parent-b); }

/* En-tête : actions */
.mx-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }
@media (max-width: 35.99em) { .mx-actions .btn { flex: 1 1 100%; } }

/* Champs (sur la base de .form) */
.mx-parents { display: grid; gap: 1rem; }
@media (min-width: 40em) { .mx-parents { grid-template-columns: 1fr 1fr; } }
.mx-champ-a { border-left: 4px solid var(--parent-a); padding-left: .8rem; }
.mx-champ-b { border-left: 4px solid var(--parent-b); padding-left: .8rem; }
.mx-aide { margin: .9rem 0 0; font-size: .92rem; color: var(--gris); }

/* Préréglages */
.mx-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 1.25rem; }
.mx-preset { min-height: 2.5rem; padding: .35rem .95rem; border-radius: 999px; border: 1.5px solid var(--champ); background: var(--verre-puce); color: var(--titre); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s, transform .15s; }
.mx-preset:hover { border-color: var(--bleu-lien); color: var(--lien); }

/* Grilles de la semaine paire et impaire (42 unités) */
.mx-semaines { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .mx-semaines { grid-template-columns: 1fr 1fr; } }
.mx-titre-petit { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.mx-defile { overflow-x: auto; }
.mx-jours { width: 100%; min-width: 17.5rem; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-size: .8rem; }
.mx-jours thead th { padding: .15rem 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); font-weight: 700; text-align: center; }
.mx-jours tbody th { width: 5.6rem; padding-right: .35rem; text-align: right; font-size: .7rem; font-weight: 400; line-height: 1.25; color: var(--gris); }
.mx-case { display: block; width: 100%; min-height: 2.3rem; border: 0; border-radius: 9px; background: var(--parent-a-doux); color: var(--parent-a); font: inherit; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, transform .15s; }
.mx-case[aria-pressed="true"] { background: var(--parent-b-doux); color: var(--parent-b); }
@media (hover: hover) { .mx-case:hover { transform: scale(1.06); } }

/* Barres de répartition */
.mx-barre { display: flex; height: 1.7rem; margin: .5rem 0; border-radius: 999px; overflow: hidden; background: var(--verre-puce); border: 1px solid var(--filet); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-barre--grande { height: 2.4rem; font-size: 1rem; }
.mx-part { display: flex; align-items: center; justify-content: center; min-width: 1px; overflow: hidden; white-space: nowrap; transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.mx-part-a { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), var(--parent-a); color: var(--parent-a-sur); }
.mx-part-b { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), var(--parent-b); color: var(--parent-b-sur); }
.mx-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: .35rem 0; font-variant-numeric: tabular-nums; }
.mx-ligne--forte { font-size: 1.1rem; font-weight: 700; }
.mx-sous { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--filet-fort); }
.mx-vacances { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 40em) { .mx-vacances { grid-template-columns: 1fr 1fr; } }
.mx-total { margin: 1rem 0 0; padding: .7rem .95rem; border-radius: 12px; border: 1px dashed var(--champ); background: var(--verre-puce); color: var(--gris); font-variant-numeric: tabular-nums; }
.mx-total b { color: var(--titre); }
.mx-pondere { margin-top: 1.5rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--info-fond); border: 1px solid var(--info-bord); }
.mx-formule { margin: .6rem 0 0; font-size: .88rem; font-style: italic; color: var(--gris); }
.mx-formule b { font-style: normal; color: var(--titre); }

/* Soldes : capacité contributive calculée */
.mx-calcule { margin-top: 1.25rem; padding: .5rem 1rem; border-radius: 14px; border: 1px dashed var(--champ); background: var(--verre-puce); }
.mx-calcule .mx-ligne-3 { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: .45rem 0; font-variant-numeric: tabular-nums; }
.mx-calcule .mx-ligne-3 + .mx-ligne-3 { border-top: 1px dotted var(--filet-fort); }
.mx-calcule .mx-libelle { font-size: .9rem; font-style: italic; color: var(--gris); text-align: center; }
.mx-calcule .mx-txt-b { text-align: right; }

/* Matrice : carte thermique */
.mx-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin: 0 0 .9rem; font-size: .9rem; color: var(--gris); }
.mx-pastille { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 4px; vertical-align: -1px; }
.mx-pastille-a { background: var(--parent-a); }
.mx-pastille-b { background: var(--parent-b); }
.mx-matrice { margin: 0 auto; border-collapse: separate; border-spacing: 2px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.mx-matrice th, .mx-matrice td { width: 2.9rem; height: 2.3rem; padding: 0; border-radius: 7px; text-align: center; }
.mx-matrice thead th, .mx-matrice tbody th { background: var(--case-entete); color: var(--titre); font-weight: 700; transition: background-color .2s, color .2s; }
.mx-matrice .mx-axe { width: auto; background: none; font-size: .8rem; font-style: italic; font-weight: 400; color: var(--gris); }
.mx-matrice td { position: relative; background: var(--case-froide); background: color-mix(in srgb, var(--case-chaude) calc(var(--v, 0) * 100%), var(--case-froide)); color: var(--titre); transition: background-color .2s, color .2s, box-shadow .2s, transform .2s; }
.mx-matrice td:hover { outline: 2px solid var(--or); outline-offset: -2px; z-index: 2; }
.mx-matrice td.actif-a { background: var(--parent-a); color: var(--parent-a-sur); font-weight: 700; box-shadow: inset 0 0 0 2px var(--case-anneau), inset 0 0 0 4px var(--parent-a); transform: scale(1.1); z-index: 1; }
.mx-matrice td.actif-b { background: var(--parent-b); color: var(--parent-b-sur); font-weight: 700; box-shadow: inset 0 0 0 2px var(--case-anneau), inset 0 0 0 4px var(--parent-b); transform: scale(1.1); z-index: 1; }
.mx-matrice th.actif-a-axe { background: var(--parent-a-doux); color: var(--parent-a); }
.mx-matrice th.actif-b-axe { background: var(--parent-b-doux); color: var(--parent-b); }

/* Infobulle de la matrice (survol à la souris) */
.mx-infobulle { position: fixed; z-index: 60; pointer-events: none; padding: .55rem .75rem; border-radius: 12px; background: rgba(15, 23, 46, .92); color: #ffffff; font-size: .82rem; line-height: 1.45; white-space: nowrap; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s; }
.mx-infobulle.est-visible { opacity: 1; transform: none; }
.mx-infobulle b { color: #ffffff; }
.mx-infobulle .mx-ib-a { color: #b9c8ff; font-weight: 700; }
.mx-infobulle .mx-ib-b { color: #ffb6ac; font-weight: 700; }

/* Résultat : deux cartes aux couleurs des parents */
.mx-resultats { display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .mx-resultats { grid-template-columns: 1fr 1fr; } }
.mx-resultat { position: relative; overflow: hidden; }
.mx-lisere { position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.mx-a .mx-lisere { background: var(--parent-a); }
.mx-b .mx-lisere { background: var(--parent-b); }
.mx-nom { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.mx-pct { margin: .35rem 0 .25rem; font-size: clamp(2.8rem, 2rem + 3vw, 3.8rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mx-a .mx-pct { color: var(--parent-a); }
.mx-b .mx-pct { color: var(--parent-b); }
.mx-sous-titre { margin: 0; font-style: italic; color: var(--gris); }
.mx-detail { margin: .9rem 0 0; padding-top: .75rem; border-top: 1px dashed var(--filet-fort); font-size: .92rem; line-height: 1.7; color: var(--gris); }
.mx-detail b { color: var(--titre); font-variant-numeric: tabular-nums; }
.mx-badge { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(230, 195, 92, .22); color: var(--badge-texte); font-size: .7rem; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: .1em; }

/* Montant en francs : part de chaque parent (résultat interpolé) et, dessous, part selon la case de la matrice
   (affichée par le script seulement si le résultat est interpolé et si les deux cases font 100) */
.mx-verses { display: grid; gap: .75rem; margin-top: 1.1rem; }
@media (min-width: 40em) { .mx-verses { grid-template-columns: 1fr 1fr; } }
.mx-verse { padding: .8rem 1rem; border-radius: 14px; background: var(--verre-puce); border: 1px solid var(--filet); }
.mx-verse-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.mx-verse .mx-nom { font-size: .76rem; }
.mx-verse b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.mx-verse-matrice { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--filet-fort); }
.mx-verse-matrice[hidden] { display: none; }
.mx-verse .mx-verse-matrice b { font-size: 1rem; color: var(--gris); }
/* Encadré « montants indicatifs » : un seul bouton (calculateur), à la largeur de son texte
   (.actions prévoit deux colonnes dès 38.5em, où un bouton seul passerait sur deux lignes) */
#montant .actions { grid-template-columns: minmax(0, 1fr); }
#montant .actions .btn { flex: 0 1 auto; }

/* Avertissement sous la matrice quand un parent a 100 % de la prise en charge (affiché par le script ;
   .note étant en flex, l’attribut hidden doit être relayé ici) */
.mx-exclusif .note { margin: 1.25rem 0 0; }
.mx-exclusif .note[hidden] { display: none; }

/* Mode d’emploi : en-tête sans sous-titre, pictogramme centré sur le titre */
#sources .sec-ico { grid-row: 1; }

/* Sources : notes de bas de page (petits caractères sous un filet court, liste à tirets), après le bouton de retour */
.mx-sources { margin-top: 2.25rem; font-size: .85rem; line-height: 1.5; color: var(--gris); }
.mx-sources::before { content: ""; display: block; width: 5rem; margin-bottom: .9rem; border-top: 1px solid var(--filet-fort); }
.mx-sources .mx-titre-petit { margin-bottom: .4rem; }
.mx-sources ul { margin: 0; padding-left: 1.1em; list-style: "\2013\2002" outside; } /* tiret demi-cadratin + espace */
.mx-sources li + li { margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
	.mx-part, .mx-case, .mx-preset, .mx-matrice td, .mx-matrice th, .mx-infobulle { transition: none; }
	.mx-matrice td.actif-a, .mx-matrice td.actif-b { transform: none; }
}

/* Impression : couleurs claires et conservées, sans les commandes */
@media print {
	:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
		--parent-a: #3656b5; --parent-a-doux: rgba(54, 86, 181, .13); --parent-a-sur: #ffffff;
		--parent-b: #b0382d; --parent-b-doux: rgba(176, 56, 45, .12); --parent-b-sur: #ffffff;
		--case-froide: #ffffff; --case-chaude: #cdb57e; --case-anneau: #ffffff; --case-entete: rgba(74, 108, 202, .09); --badge-texte: #6b5300;
	}
	.mx-actions, .mx-presets, .mx-aide, .mx-infobulle, .retour-accueil { display: none !important; }
	.mx-matrice td, .mx-matrice th, .mx-part, .mx-case, .mx-lisere, .mx-pastille { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.mx-matrice td.actif-a, .mx-matrice td.actif-b { transform: none; }
	.mx-resultats { grid-template-columns: 1fr 1fr; }
	.mx-resultat.carte { padding: 1.1rem 0 1.5rem; }
}