/* ==========================================================================
   Merydar — Notifications · feuille de style du côté cliente
   --------------------------------------------------------------------------
   AUCUNE VALEUR VISUELLE N'EST ÉCRITE ICI.
   Pas une couleur, pas une taille, pas un rayon. Tout passe par les variables
   posées par l'écran « Habillage » — modifiables sans jamais rouvrir ce fichier.
   Les valeurs après la virgule ne sont que des secours, au cas où le bloc de
   variables ne serait pas encore rendu.

   Trois règles de la charte Merydar, appliquées partout :
     — toutes les tailles en clamp(), jamais de pixel figé sur du texte ;
     — le texte des blocs en !important, la mise en page souple ;
     — les cinq états d'un lien couverts : aucun lien ne peut virer au rose.

   Tout est enfermé dans .mrd-nt : rien ne peut déborder sur le reste du site.
   Aucune classe appartenant au site (.btn-braise, .mrd-conte…) n'est repeinte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */
.mrd-nt,
.mrd-nt * {
	box-sizing: border-box;
}

.mrd-nt {
	font-family: var(--mrd-nt-police, "Cormorant Garamond", Georgia, serif) !important;
	font-size: var(--mrd-nt-taille, clamp(15px, 1.05vw, 17px)) !important;
	line-height: var(--mrd-nt-interligne, 1.5) !important;
	color: var(--mrd-nt-encre, #2B2A26) !important;
	-webkit-font-smoothing: antialiased;
}

/* Les cinq états, sur les liens ET sur les boutons. La panne du 10 août
   venait précisément d'un état oublié. */
.mrd-nt a:link,
.mrd-nt a:visited,
.mrd-nt a:hover,
.mrd-nt a:focus,
.mrd-nt a:active {
	color: var(--mrd-nt-dore-fonce, #8C6F3A) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mrd-nt a:hover,
.mrd-nt a:focus {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}

.mrd-nt :focus-visible {
	outline: 2px solid var(--mrd-nt-dore, #C9AB6F);
	outline-offset: 2px;
	border-radius: var(--mrd-nt-rayon-petit, 4px);
}

/* Toute cible tactile fait au moins 44 px : règle de la charte. */
.mrd-nt button,
.mrd-nt .mrd-nt-f,
.mrd-nt .mrd-nt-btn {
	min-height: var(--mrd-nt-tactile, 44px);
	font-family: inherit;
	cursor: pointer;
}

/* ==========================================================================
   LA CLOCHE
   ========================================================================== */
/* Une pêche plus dense, pour les filets et les soulignés. Elle est
   dérivée de la palette : si la pêche change dans Habillage, celle-ci suit. */
.mrd-nt {
	--mrd-nt-peche-fonce: color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 72%, var(--mrd-nt-dore, #C9AB6F));
	--mrd-nt-vert-fonce: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 82%, #000);
}

.mrd-nt-cloche-zone {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.mrd-nt-cloche {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 8px;
	border-radius: 50%;
	color: var(--mrd-nt-cloche-couleur, currentColor);
	min-width: var(--mrd-nt-tactile, 44px);
	transition: background-color .16s ease;
}
.mrd-nt-cloche:hover,
.mrd-nt-cloche:focus {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.mrd-nt-svg {
	width: var(--mrd-nt-cloche-taille, 22px);
	height: var(--mrd-nt-cloche-taille, 22px);
	display: block;
}

.mrd-nt-cloche-mot {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	/* L'espacement s'ajoute aussi après la dernière lettre : on compense. */
	padding-left: var(--mrd-nt-lettrage, .14em);
}

/* --- La pastille du compteur --- */
.mrd-nt-pastille {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--mrd-nt-pastille, #B4432F);
	color: var(--mrd-nt-pastille-texte, #fff);
	border-radius: 11px;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: 11px !important;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--mrd-nt-fond, #FBF7EC);
	pointer-events: none;
}
.mrd-nt-pastille[hidden] {
	display: none;
}

/* Un tintement discret quand une notification arrive. */
@keyframes mrd-nt-tinter {
	0%, 100% { transform: rotate(0); }
	15%      { transform: rotate(12deg); }
	30%      { transform: rotate(-10deg); }
	45%      { transform: rotate(7deg); }
	60%      { transform: rotate(-5deg); }
	75%      { transform: rotate(3deg); }
}
.mrd-nt-cloche.mrd-nt-tinte .mrd-nt-svg {
	animation: mrd-nt-tinter .85s ease;
	transform-origin: 50% 15%;
}

/* La cloche flottante, quand l'en-tête ne s'y prête pas. */
.mrd-nt-flottante {
	position: fixed;
	z-index: 9998;
}
.mrd-nt-flottante .mrd-nt-cloche {
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA);
	width: 52px;
	height: 52px;
	justify-content: center;
	box-shadow: var(--mrd-nt-ombre-panneau, 0 18px 44px rgba(42,74,61,.28));
}
.mrd-nt-pos-bas-droite  { right: 18px; bottom: 18px; }
.mrd-nt-pos-bas-gauche  { left: 18px;  bottom: 18px; }
.mrd-nt-pos-haut-droite { right: 18px; top: 90px; }

/* ==========================================================================
   LE PANNEAU
   ========================================================================== */
.mrd-nt-panneau {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: var(--mrd-nt-panneau-l, 392px);
	max-width: calc(100vw - 24px);
	background: var(--mrd-nt-carte, #FFFDF7);
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	border-radius: var(--mrd-nt-rayon, 10px);
	box-shadow: var(--mrd-nt-ombre-panneau, 0 18px 44px rgba(42,74,61,.28));
	z-index: 9999;
	overflow: hidden;
	transform-origin: top right;
	animation: mrd-nt-apparaitre .16s ease;
}
.mrd-nt-panneau[hidden] {
	display: none;
}
@keyframes mrd-nt-apparaitre {
	from { opacity: 0; transform: scale(.97) translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* --- La tête : un vrai bandeau de la charte, pas un liseré --- */
.mrd-nt-panneau-tete {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px var(--mrd-nt-espace, 14px);
	background: var(--mrd-nt-vert, #2A4A3D);
	border-bottom: 0;
}
.mrd-nt-panneau-tete strong {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	font-weight: 400;
	padding-left: var(--mrd-nt-lettrage, .14em);
}
.mrd-nt-panneau-tete .mrd-nt-lien {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .82) !important;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mrd-nt-peche-fonce) !important;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 45%, transparent);
	padding: 3px 0;
	transition: color .25s ease, border-color .25s ease;
}
.mrd-nt-panneau-tete .mrd-nt-lien:hover,
.mrd-nt-panneau-tete .mrd-nt-lien:focus {
	color: #fff !important;
	border-bottom-color: #fff;
}

/* --- Le pied : l'étoile des pages du site --- */
.mrd-nt-panneau-pied {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px var(--mrd-nt-espace, 14px);
	background: color-mix(in srgb, var(--mrd-nt-fond, #FBF7EC) 70%, var(--mrd-nt-carte, #FFFDF7));
	border-top: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 55%, transparent);
	border-bottom: 0;
}
.mrd-nt-panneau-pied::before,
.mrd-nt-panneau-pied::after {
	content: "\2726";
	color: var(--mrd-nt-peche-fonce);
	font-size: 11px;
	line-height: 1;
}
.mrd-nt-panneau-pied .mrd-nt-lien {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .9) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--mrd-nt-peche-fonce);
	padding: 0 0 2px;
	transition: border-color .25s ease;
}
.mrd-nt-panneau-pied .mrd-nt-lien:hover,
.mrd-nt-panneau-pied .mrd-nt-lien:focus {
	border-bottom-color: var(--mrd-nt-vert, #2A4A3D);
}

.mrd-nt-panneau-corps {
	max-height: var(--mrd-nt-panneau-h, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* --- Le lien discret --- */
.mrd-nt-lien {
	background: none;
	border: 0;
	padding: 6px 2px;
	font-family: inherit;
	font-size: inherit;
	color: var(--mrd-nt-dore-fonce, #8C6F3A) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	min-height: 0;
}
.mrd-nt-lien:hover,
.mrd-nt-lien:focus {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}

/* ==========================================================================
   UNE NOTIFICATION
   ========================================================================== */
.mrd-nt-item {
	display: flex;
	gap: 11px;
	width: 100%;
	text-align: left;
	padding: var(--mrd-nt-espace, 14px);
	padding-left: calc(var(--mrd-nt-espace, 14px) + 4px);
	border: 0;
	background: var(--mrd-nt-carte, #FFFDF7);
	position: relative;
	font-family: inherit;
	color: inherit;
	transition: background-color .2s ease;
}
/* Le filet commence après l'icône : la liste se lit comme une colonne,
   pas comme un tableau. */
.mrd-nt-item + .mrd-nt-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--mrd-nt-espace, 14px) + 53px);
	right: var(--mrd-nt-espace, 14px);
	height: 1px;
	background: color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent);
}
.mrd-nt-item:hover,
.mrd-nt-item:focus {
	background: var(--mrd-nt-survol, #FBF6E9);
}

/* Une non-lue se voit sans qu'on ait à lire : fond plus chaud et un filet
   pêche sur le flanc. Le point doré d'avant passait inaperçu. */
.mrd-nt-item.mrd-nt-nonlu {
	background: var(--mrd-nt-non-lu, #FDF6E4);
}
.mrd-nt-item.mrd-nt-nonlu::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--mrd-nt-peche-fonce);
}
.mrd-nt-item.mrd-nt-nonlu .mrd-nt-item-titre {
	font-weight: 600;
}

.mrd-nt-item-ico {
	flex: 0 0 38px;
	height: 38px;
	border-radius: calc(var(--mrd-nt-rayon, 10px) * .8);
	display: grid;
	place-items: center;
	font-size: 18px;
	line-height: 1;
	background: color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 55%, var(--mrd-nt-carte, #FFFDF7));
	color: var(--mrd-nt-vert, #2A4A3D);
	overflow: hidden;
}
/* Le fonctionnel porte le vert plein, l'éditorial la pêche : la nature se
   voit d'un coup d'œil, sans avoir à lire l'étiquette. */
.mrd-nt-item.mrd-nt-fonctionnelle .mrd-nt-item-ico {
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA);
}
.mrd-nt-item-ico img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrd-nt-item-txt {
	flex: 1;
	min-width: 0;
}
.mrd-nt-item-titre {
	display: block;
	font-size: var(--mrd-nt-taille-titre, clamp(16px, 1.2vw, 18px)) !important;
	line-height: 1.3 !important;
	margin: 0 0 2px;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-item-apercu {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: calc(var(--mrd-nt-taille, 16px) * .92) !important;
	line-height: 1.35 !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin: 0;
}
.mrd-nt-item-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 5px;
	font-size: calc(var(--mrd-nt-taille, 16px) * .8) !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
}

.mrd-nt-etiq {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .85) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 7px 2px;
	padding-left: calc(7px + .1em);
	border-radius: 4px;
	white-space: nowrap;
	background: color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 45%, var(--mrd-nt-fond, #FBF7EC));
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-item.mrd-nt-fonctionnelle .mrd-nt-etiq {
	background: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 12%, var(--mrd-nt-fond, #FBF7EC));
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}

.mrd-nt-vide {
	padding: 46px 26px;
	text-align: center;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin: 0;
}
.mrd-nt-vide::before {
	content: "\2726";
	display: block;
	font-size: 20px;
	line-height: 1;
	color: var(--mrd-nt-peche-fonce);
	margin-bottom: 12px;
}

.mrd-nt-jour {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .9) !important;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	padding: 12px var(--mrd-nt-espace, 14px) 6px;
	padding-left: calc(var(--mrd-nt-espace, 14px) + .15em);
	background: color-mix(in srgb, var(--mrd-nt-fond, #FBF7EC) 70%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 50%, transparent);
}

/* ==========================================================================
   LES PAGES DU COMPTE
   ========================================================================== */
.mrd-nt-page {
	max-width: 820px;
}

.mrd-nt-page-tete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mrd-nt-espace, 14px);
	flex-wrap: wrap;
}

.mrd-nt-h1 {
	font-family: var(--mrd-nt-police-titre, "Jellyka Delicious Cake", "Cormorant Garamond", cursive, serif) !important;
	font-size: var(--mrd-nt-taille-h1, clamp(28px, 4.2vw, 42px)) !important;
	line-height: 1.1 !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	font-weight: 400 !important;
	margin: 0 0 4px !important;
}

.mrd-nt-h2 {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	font-weight: 400 !important;
	margin: var(--mrd-nt-espace-large, 22px) 0 var(--mrd-nt-espace-serre, 9px) !important;
	padding-left: var(--mrd-nt-lettrage, .14em);
}

.mrd-nt-chapo {
	font-style: italic;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin: 0 0 6px !important;
}

/* Le séparateur doré de la charte : un dégradé, jamais un bord. */
.mrd-nt-sep {
	height: 22px;
	margin: var(--mrd-nt-espace, 14px) auto;
	background-image: var(--mrd-nt-separateur, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(280px, 60%) auto;
}

.mrd-nt-carte {
	background: var(--mrd-nt-carte, #FFFDF7);
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	border-radius: var(--mrd-nt-rayon, 10px);
	padding: var(--mrd-nt-espace-large, 22px);
	margin: 0 0 var(--mrd-nt-espace, 14px);
	box-shadow: var(--mrd-nt-ombre, 0 2px 14px rgba(42,74,61,.09));
}
.mrd-nt-carte-fonct {
	border-left: 4px solid var(--mrd-nt-vert, #2A4A3D);
}
.mrd-nt-carte-edito {
	border-left: 4px solid var(--mrd-nt-dore, #C9AB6F);
}

.mrd-nt-intro {
	margin: 0 0 var(--mrd-nt-espace-serre, 9px) !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
}
.mrd-nt-note {
	margin: var(--mrd-nt-espace-serre, 9px) 0 0 !important;
	font-size: calc(var(--mrd-nt-taille, 16px) * .88) !important;
	font-style: italic;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
}

/* --------------------------------------------------------------------------
   Les cases à cocher
   --------------------------------------------------------------------------
   JAMAIS de display:flex sur un label de case : le texte nu, le lien et
   l'astérisque deviendraient chacun une colonne. La case est posée en absolu,
   le label reçoit un padding. La phrase coule alors normalement.
   Leçon du 10 août, apprise à nos dépens.
   -------------------------------------------------------------------------- */
.mrd-nt-case {
	display: block;
	position: relative;
	padding: 11px 0 11px 40px;
	min-height: var(--mrd-nt-tactile, 44px);
	border-bottom: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent);
	cursor: pointer;
	margin: 0;
}
.mrd-nt-case:last-of-type {
	border-bottom: 0;
}
.mrd-nt-case > input[type="checkbox"] {
	position: absolute;
	left: 2px;
	top: 14px;
	width: 19px;
	height: 19px;
	accent-color: var(--mrd-nt-vert, #2A4A3D);
	cursor: pointer;
	margin: 0;
}
.mrd-nt-case-nom {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}
.mrd-nt-case-desc {
	display: block;
	font-size: calc(var(--mrd-nt-taille, 16px) * .88) !important;
	line-height: 1.35 !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin-top: 1px;
}
.mrd-nt-case-verrou {
	cursor: default;
	opacity: .92;
}
.mrd-nt-verrou {
	float: right;
	margin-left: 10px;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .85) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	background: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 10%, transparent);
	padding: 3px 8px;
	padding-left: calc(8px + .1em);
	border-radius: 3px;
}

/* Confirmation visuelle : la case vient d'être enregistrée. */
.mrd-nt-case.mrd-nt-enregistre::after {
	content: "enregistré";
	position: absolute;
	right: 0;
	top: 13px;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .8) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mrd-nt-succes, #1D6B32) !important;
	animation: mrd-nt-fondu 2.2s ease forwards;
}
@keyframes mrd-nt-fondu {
	0%   { opacity: 0; }
	14%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { opacity: 0; }
}

.mrd-nt-cases-actions {
	display: flex;
	gap: var(--mrd-nt-espace, 14px);
	padding-top: var(--mrd-nt-espace-serre, 9px);
	border-top: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent);
	margin-top: var(--mrd-nt-espace-serre, 9px);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.mrd-nt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	padding: 12px 22px;
	padding-left: calc(22px + var(--mrd-nt-lettrage, .14em));
	border-radius: var(--mrd-nt-rayon-petit, 4px);
	border: 1px solid var(--mrd-nt-vert, #2A4A3D);
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	text-decoration: none !important;
	transition: background-color .15s ease;
}
.mrd-nt-btn:link,
.mrd-nt-btn:visited,
.mrd-nt-btn:hover,
.mrd-nt-btn:focus,
.mrd-nt-btn:active {
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	text-decoration: none !important;
}
.mrd-nt-btn:hover,
.mrd-nt-btn:focus {
	background: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 85%, #000);
}

.mrd-nt-btn-fantome {
	background: transparent;
	border-color: var(--mrd-nt-dore, #C9AB6F);
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-btn-fantome:link,
.mrd-nt-btn-fantome:visited,
.mrd-nt-btn-fantome:hover,
.mrd-nt-btn-fantome:focus,
.mrd-nt-btn-fantome:active {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-btn-fantome:hover,
.mrd-nt-btn-fantome:focus {
	background: color-mix(in srgb, var(--mrd-nt-dore, #C9AB6F) 16%, transparent);
}

.mrd-nt-btn-or {
	background: var(--mrd-nt-dore, #C9AB6F);
	border-color: var(--mrd-nt-dore, #C9AB6F);
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-btn-or:link,
.mrd-nt-btn-or:visited,
.mrd-nt-btn-or:hover,
.mrd-nt-btn-or:focus,
.mrd-nt-btn-or:active {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-btn-or:hover,
.mrd-nt-btn-or:focus {
	background: var(--mrd-nt-dore-fonce, #8C6F3A);
	border-color: var(--mrd-nt-dore-fonce, #8C6F3A);
	color: #fff !important;
}

.mrd-nt-btn[disabled],
.mrd-nt-btn[aria-busy="true"] {
	opacity: .55;
	cursor: not-allowed;
}

.mrd-nt-boutons {
	display: flex;
	gap: var(--mrd-nt-espace-serre, 9px);
	flex-wrap: wrap;
	margin-top: var(--mrd-nt-espace, 14px);
}

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */
.mrd-nt-filtres-front {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin: 0 0 var(--mrd-nt-espace, 14px);
}
.mrd-nt-f {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	background: var(--mrd-nt-carte, #FFFDF7);
	border-radius: 20px;
	padding: 7px 15px;
	font-family: inherit;
	font-size: calc(var(--mrd-nt-taille, 16px) * .9) !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	min-height: 38px;
	white-space: nowrap;
}
.mrd-nt-f:hover {
	border-color: var(--mrd-nt-dore, #C9AB6F);
}
.mrd-nt-f[aria-pressed="true"] {
	background: var(--mrd-nt-vert, #2A4A3D);
	border-color: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA) !important;
}

/* --------------------------------------------------------------------------
   Le centre
   -------------------------------------------------------------------------- */
.mrd-nt-centre-liste {
	background: var(--mrd-nt-carte, #FFFDF7);
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	border-radius: var(--mrd-nt-rayon, 10px);
	overflow: hidden;
	box-shadow: var(--mrd-nt-ombre, 0 2px 14px rgba(42,74,61,.09));
}
.mrd-nt-centre-liste .mrd-nt-item {
	padding: var(--mrd-nt-espace, 14px) var(--mrd-nt-espace-large, 22px);
}
.mrd-nt-centre-pied {
	display: flex;
	gap: var(--mrd-nt-espace-serre, 9px);
	flex-wrap: wrap;
	margin-top: var(--mrd-nt-espace, 14px);
}

/* --------------------------------------------------------------------------
   L'état du push
   -------------------------------------------------------------------------- */
.mrd-nt-etat {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: var(--mrd-nt-espace, 14px);
	border-radius: calc(var(--mrd-nt-rayon, 10px) * .8);
	margin: 0 0 var(--mrd-nt-espace, 14px);
	background: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 6%, transparent);
	color: var(--mrd-nt-encre, #2B2A26) !important;
}
.mrd-nt-etat strong {
	display: block;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 3px;
	padding-left: var(--mrd-nt-lettrage, .14em);
}
.mrd-nt-etat-ico {
	font-size: 20px;
	line-height: 1.2;
}
.mrd-nt-etat.mrd-nt-etat-ok {
	background: color-mix(in srgb, var(--mrd-nt-vert, #2A4A3D) 10%, transparent);
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt-etat.mrd-nt-etat-attention {
	background: color-mix(in srgb, var(--mrd-nt-dore, #C9AB6F) 20%, transparent);
	color: var(--mrd-nt-dore-fonce, #8C6F3A) !important;
}
.mrd-nt-etat.mrd-nt-etat-ko {
	background: color-mix(in srgb, var(--mrd-nt-alerte, #8E3625) 11%, transparent);
	color: var(--mrd-nt-alerte, #8E3625) !important;
}

/* --------------------------------------------------------------------------
   Appareils
   -------------------------------------------------------------------------- */
.mrd-nt-appareil {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent);
}
.mrd-nt-appareil:last-child {
	border-bottom: 0;
}
.mrd-nt-appareil-ico {
	font-size: 21px;
	width: 30px;
	text-align: center;
	flex: 0 0 30px;
}
.mrd-nt-appareil-txt {
	flex: 1;
	min-width: 0;
}
.mrd-nt-appareil-txt strong {
	display: block;
	font-weight: 600;
}
.mrd-nt-appareil-txt small {
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	font-size: calc(var(--mrd-nt-taille, 16px) * .85) !important;
	line-height: 1.35;
}
.mrd-nt-retirer {
	background: none;
	border: 1px solid color-mix(in srgb, var(--mrd-nt-alerte, #8E3625) 40%, transparent);
	color: var(--mrd-nt-alerte, #8E3625) !important;
	border-radius: var(--mrd-nt-rayon-petit, 4px);
	padding: 8px 13px;
	font-family: inherit;
	font-size: calc(var(--mrd-nt-taille, 16px) * .85) !important;
	min-height: 38px;
	white-space: nowrap;
}
.mrd-nt-retirer:hover {
	background: color-mix(in srgb, var(--mrd-nt-alerte, #8E3625) 9%, transparent);
}

/* --------------------------------------------------------------------------
   Le chemin de déblocage, les étapes iPhone
   -------------------------------------------------------------------------- */
.mrd-nt-etapes,
.mrd-nt-chemin ol {
	margin: var(--mrd-nt-espace-serre, 9px) 0 0;
	padding-left: 22px;
	line-height: 1.7;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
}
.mrd-nt-etapes strong,
.mrd-nt-chemin strong {
	color: var(--mrd-nt-encre, #2B2A26) !important;
}
.mrd-nt-touche {
	display: inline-block;
	border: 1px solid var(--mrd-nt-dore, #C9AB6F);
	border-radius: var(--mrd-nt-rayon-petit, 4px);
	padding: 0 6px;
	line-height: 1.5;
}

.mrd-nt-details {
	margin-top: var(--mrd-nt-espace, 14px);
	border-top: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent);
	padding-top: var(--mrd-nt-espace-serre, 9px);
}
.mrd-nt-details > summary {
	cursor: pointer;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	padding: 8px 0;
	padding-left: var(--mrd-nt-lettrage, .14em);
	min-height: var(--mrd-nt-tactile, 44px);
	display: flex;
	align-items: center;
}
.mrd-nt-details-corps p {
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin: 0 0 var(--mrd-nt-espace-serre, 9px);
}

/* --------------------------------------------------------------------------
   Le bloc d'inscription
   -------------------------------------------------------------------------- */
.mrd-nt-inscription {
	margin: var(--mrd-nt-espace-large, 22px) 0;
	padding: var(--mrd-nt-espace, 14px) var(--mrd-nt-espace-large, 22px);
	background: var(--mrd-nt-carte, #FFFDF7);
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	border-left: 4px solid var(--mrd-nt-dore, #C9AB6F);
	border-radius: var(--mrd-nt-rayon, 10px);
}
.mrd-nt-inscription-titre {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: var(--mrd-nt-taille-caps, clamp(10px, .75vw, 12px)) !important;
	letter-spacing: var(--mrd-nt-lettrage, .14em);
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	margin: 0 0 6px !important;
	padding-left: var(--mrd-nt-lettrage, .14em);
}
.mrd-nt-inscription-chapo,
.mrd-nt-inscription-note {
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	font-size: calc(var(--mrd-nt-taille, 16px) * .92) !important;
	margin: 0 0 var(--mrd-nt-espace-serre, 9px) !important;
}
.mrd-nt-inscription-note {
	margin: var(--mrd-nt-espace-serre, 9px) 0 0 !important;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Pastille dans le menu du compte
   Le nombre lui-même est injecté en CSS en ligne (voir MRD_NT_Account::
   css_pastille) : WooCommerce échappe le libellé du menu, aucune balise ne
   peut y survivre. La règle ci-dessous ne sert plus qu'aux thèmes qui
   laissent passer du HTML dans le menu.
   -------------------------------------------------------------------------- */
.mrd-nt-menu-pastille {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	background: var(--mrd-nt-pastille, #B4432F);
	color: var(--mrd-nt-pastille-texte, #fff);
	border-radius: 10px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	margin-left: 6px;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Le petit message de confirmation
   -------------------------------------------------------------------------- */
.mrd-nt-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 10000;
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	padding: 13px 22px;
	border-radius: calc(var(--mrd-nt-rayon, 10px) * .7);
	box-shadow: var(--mrd-nt-ombre-panneau, 0 18px 44px rgba(42,74,61,.28));
	max-width: min(560px, 92vw);
	font-size: calc(var(--mrd-nt-taille, 16px) * .95) !important;
	animation: mrd-nt-monter .2s ease;
}
.mrd-nt-toast[hidden] {
	display: none;
}
@keyframes mrd-nt-monter {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   LES DEUX PAGES DU COMPTE — 1.0.2
   --------------------------------------------------------------------------
   Deux principes tenus ici :

   1. Aucune bordure, aucun fond n'est laissé au hasard. Le thème habille
      tous les boutons et tous les champs du site ; sans !important, ses
      couleurs passaient au travers — d'où le rose sur les filtres et les
      cartes. Ce qui dessine un contour est donc forcé.
   2. Plus un seul émoji : les glyphes sont tracés (mrd_nt_glyphe en PHP,
      glyphe() en JS) et suivent currentColor.
   ========================================================================== */

.mrd-nt .mrd-nt-glyphe {
	width: 20px;
	height: 20px;
	display: block;
}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.mrd-nt .mrd-nt-invisible {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Les titres de section --- */
.mrd-nt .mrd-nt-h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--mrd-nt-trait, rgba(42,74,61,.16)), transparent);
}
.mrd-nt .mrd-nt-h3 {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .95) !important;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	font-weight: 400 !important;
	margin: 0 0 4px !important;
	padding-left: .13em;
}

/* --- Les cartes : contours forcés --- */
.mrd-nt .mrd-nt-carte,
.mrd-nt .mrd-nt-centre-liste {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	border-radius: var(--mrd-nt-rayon, 10px) !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
}
.mrd-nt .mrd-nt-carte-fonct {
	border-left: 3px solid var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-carte-edito {
	border-left: 3px solid var(--mrd-nt-peche-fonce) !important;
}

/* --- Les filtres --- */
.mrd-nt .mrd-nt-f {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
	border-radius: 20px !important;
	padding: 0 15px !important;
	min-height: 38px;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .88) !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	box-shadow: none !important;
	transition: border-color .22s ease, color .22s ease, background-color .22s ease;
}
.mrd-nt .mrd-nt-f:hover,
.mrd-nt .mrd-nt-f:focus {
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-f[aria-pressed="true"] {
	background: var(--mrd-nt-vert, #2A4A3D) !important;
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-peche, #FBD6BA) !important;
}
.mrd-nt .mrd-nt-f-nombre {
	font-family: var(--mrd-nt-police, "Cormorant Garamond", Georgia, serif) !important;
	font-style: italic;
	letter-spacing: 0;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
}
.mrd-nt .mrd-nt-f-nombre:empty {
	display: none;
}
.mrd-nt .mrd-nt-f[aria-pressed="true"] .mrd-nt-f-nombre {
	color: var(--mrd-nt-peche-fonce) !important;
}

/* --- Le jour, dans la liste --- */
.mrd-nt .mrd-nt-jour {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	background: color-mix(in srgb, var(--mrd-nt-fond, #FBF7EC) 80%, var(--mrd-nt-carte, #FFFDF7)) !important;
	border-bottom: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 45%, transparent) !important;
}

/* --- Les boutons : contours forcés --- */
.mrd-nt .mrd-nt-btn {
	box-shadow: none !important;
	text-transform: uppercase;
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .92) !important;
	letter-spacing: .11em;
}
.mrd-nt .mrd-nt-btn-fantome {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	background: transparent !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-btn-fantome:hover,
.mrd-nt .mrd-nt-btn-fantome:focus {
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	background: transparent !important;
}

/* --- L'état du push --- */
.mrd-nt .mrd-nt-etat {
	align-items: center;
	background: var(--mrd-nt-non-lu, #FDF6E4) !important;
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	border-left: 3px solid var(--mrd-nt-peche-fonce) !important;
	color: var(--mrd-nt-encre, #2B2A26) !important;
}
.mrd-nt .mrd-nt-etat-ico {
	flex: 0 0 34px;
	height: 34px;
	border-radius: calc(var(--mrd-nt-rayon, 10px) * .8);
	display: grid;
	place-items: center;
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA);
}
.mrd-nt .mrd-nt-etat strong {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-etat.mrd-nt-etat-ok {
	border-left-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-etat.mrd-nt-etat-attention .mrd-nt-etat-ico,
.mrd-nt .mrd-nt-etat.mrd-nt-etat-ko .mrd-nt-etat-ico {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

/* --- Les appareils --- */
.mrd-nt .mrd-nt-appareil-ico {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: calc(var(--mrd-nt-rayon, 10px) * .8);
	display: grid;
	place-items: center;
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA);
}
.mrd-nt .mrd-nt-appareil-txt strong {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-appareil-txt small {
	font-style: italic;
}
.mrd-nt .mrd-nt-retirer {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	background: transparent !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
}
.mrd-nt .mrd-nt-retirer:hover,
.mrd-nt .mrd-nt-retirer:focus {
	border-color: var(--mrd-nt-alerte, #8E3625) !important;
	color: var(--mrd-nt-alerte, #8E3625) !important;
	background: transparent !important;
}

/* ==========================================================================
   LE TABLEAU DES CHOIX
   --------------------------------------------------------------------------
   Deux colonnes, « Dans ma cloche » et « Sur mon écran ». L'ancienne mise en
   page listait deux fois les mêmes catégories dans deux sections éloignées :
   on ne voyait jamais d'un coup d'œil ce qu'on recevait, ni par quel chemin.
   ========================================================================== */
.mrd-nt .mrd-nt-grille {
	width: 100%;
	border-collapse: collapse;
	margin: var(--mrd-nt-espace-serre, 9px) 0 0;
	background: transparent !important;
}
.mrd-nt .mrd-nt-grille thead th {
	font-family: var(--mrd-nt-police-caps, "Cinzel Decorative", "Cinzel", serif) !important;
	font-size: calc(var(--mrd-nt-taille-caps, 11px) * .8) !important;
	font-weight: 400 !important;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	padding: 0 0 9px !important;
	text-align: center;
	border: 0 !important;
	background: transparent !important;
	width: 92px;
}
.mrd-nt .mrd-nt-grille thead th.mrd-nt-grille-vide {
	width: auto;
	text-align: left;
}
.mrd-nt .mrd-nt-grille td,
.mrd-nt .mrd-nt-grille tbody th {
	padding: 11px 0 !important;
	border: 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 40%, transparent) !important;
	background: transparent !important;
	vertical-align: middle;
}
.mrd-nt .mrd-nt-grille tbody tr:first-child td,
.mrd-nt .mrd-nt-grille tbody tr:first-child th {
	border-top: 0 !important;
}
.mrd-nt .mrd-nt-rang-nom {
	text-align: left;
	font-weight: 400 !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	line-height: 1.25;
}
.mrd-nt .mrd-nt-rang-nom small {
	display: block;
	font-size: calc(var(--mrd-nt-taille, 16px) * .85) !important;
	font-style: italic;
	line-height: 1.3;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin-top: 1px;
}
.mrd-nt .mrd-nt-rang-case {
	text-align: center;
	width: 92px;
}
.mrd-nt .mrd-nt-toujours {
	display: block;
	font-size: calc(var(--mrd-nt-taille, 16px) * .78) !important;
	font-style: italic;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	margin-top: 2px;
}
.mrd-nt .mrd-nt-tiret {
	color: color-mix(in srgb, var(--mrd-nt-encre-douce, #6C6860) 50%, transparent) !important;
}

/* --- La case de la charte : un carré vert qui se remplit --- */
.mrd-nt .mrd-nt-grille .mrd-nt-case {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	min-height: 0;
	border: 0;
	cursor: pointer;
	vertical-align: middle;
}
.mrd-nt .mrd-nt-grille .mrd-nt-case > input[type="checkbox"] {
	position: absolute;
	inset: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.mrd-nt .mrd-nt-boite {
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--mrd-nt-trait, rgba(42,74,61,.16));
	border-radius: 5px;
	background: var(--mrd-nt-carte, #FFFDF7);
	transition: background-color .2s ease, border-color .2s ease;
}
.mrd-nt .mrd-nt-case:hover .mrd-nt-boite {
	border-color: var(--mrd-nt-vert, #2A4A3D);
}
.mrd-nt .mrd-nt-case > input:focus-visible + .mrd-nt-boite {
	outline: 2px solid var(--mrd-nt-vert, #2A4A3D);
	outline-offset: 2px;
}
.mrd-nt .mrd-nt-case > input:checked + .mrd-nt-boite {
	background: var(--mrd-nt-vert, #2A4A3D);
	border-color: var(--mrd-nt-vert, #2A4A3D);
}
.mrd-nt .mrd-nt-boite::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid var(--mrd-nt-peche, #FBD6BA);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .18s ease;
}
.mrd-nt .mrd-nt-case > input:checked + .mrd-nt-boite::after {
	transform: rotate(45deg) scale(1);
}
/* Verrouillée — le fonctionnel dans la cloche — ou hors service tant que
   le push n'est pas activé sur cet appareil. */
.mrd-nt .mrd-nt-case > input:disabled {
	cursor: default;
}
.mrd-nt .mrd-nt-case > input:disabled + .mrd-nt-boite {
	background: color-mix(in srgb, var(--mrd-nt-trait, rgba(42,74,61,.16)) 40%, var(--mrd-nt-fond, #FBF7EC));
	border-color: var(--mrd-nt-trait, rgba(42,74,61,.16));
}
.mrd-nt .mrd-nt-case > input:checked:disabled + .mrd-nt-boite::after {
	border-color: var(--mrd-nt-encre-douce, #6C6860);
	transform: rotate(45deg) scale(1);
}
.mrd-nt .mrd-nt-case:has(> input:disabled) {
	cursor: default;
}
/* Confirmation d'enregistrement : dans le tableau, un halo plutôt qu'un mot. */
.mrd-nt .mrd-nt-grille .mrd-nt-case.mrd-nt-enregistre::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 8px;
	border: 1.5px solid var(--mrd-nt-succes, #1D6B32);
	animation: mrd-nt-fondu 2.2s ease forwards;
}

/* --- Le séparateur, quand aucune image n'est réglée dans Habillage :
       deux filets qui s'effacent autour d'une étoile. --- */
.mrd-nt .mrd-nt-sep-etoile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: auto;
	color: var(--mrd-nt-peche-fonce);
	font-size: 13px;
	line-height: 1;
}
.mrd-nt .mrd-nt-sep-etoile::before {
	content: "";
	height: 1px;
	width: min(150px, 22vw);
	background: linear-gradient(90deg, transparent, var(--mrd-nt-trait, rgba(42,74,61,.16)));
}
.mrd-nt .mrd-nt-sep-etoile::after {
	content: "";
	height: 1px;
	width: min(150px, 22vw);
	background: linear-gradient(90deg, var(--mrd-nt-trait, rgba(42,74,61,.16)), transparent);
}

/* --- Les réglages, en section de la page des notifications --- */
.mrd-nt .mrd-nt-reglages-integre {
	margin-top: var(--mrd-nt-espace-large, 22px);
	/* Que l'ancre ne se glisse pas sous un en-tête collant. */
	scroll-margin-top: 96px;
}
.mrd-nt .mrd-nt-h1-section {
	font-size: calc(var(--mrd-nt-taille-h1, clamp(28px, 4.2vw, 42px)) * .7) !important;
	margin-bottom: 2px !important;
}

/* --- Les liens discrets : vert, souligné de pêche --- */
.mrd-nt .mrd-nt-lien {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--mrd-nt-peche-fonce);
	padding-bottom: 1px;
	background: none !important;
	transition: border-color .25s ease;
}
.mrd-nt .mrd-nt-lien:hover,
.mrd-nt .mrd-nt-lien:focus {
	border-bottom-color: var(--mrd-nt-vert, #2A4A3D);
}
.mrd-nt .mrd-nt-note a {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	text-decoration: none;
	border-bottom: 1px solid var(--mrd-nt-peche-fonce);
}
.mrd-nt .mrd-nt-note a:hover {
	border-bottom-color: var(--mrd-nt-vert, #2A4A3D);
}

/* ==========================================================================
   TÉLÉPHONE ET TABLETTE
   --------------------------------------------------------------------------
   Sous 640 px, le panneau cesse d'être un menu déroulant et devient une
   feuille qui monte du bas : c'est le geste attendu au pouce, et cela évite
   qu'un panneau de 392 px déborde d'un écran de 360.
   ========================================================================== */
@media (max-width: 640px) {

	/* Le tableau des choix : deux colonnes plus étroites, en-têtes plus
	   courts, pour que le nom de la catégorie garde de la place. */
	.mrd-nt .mrd-nt-grille thead th,
	.mrd-nt .mrd-nt-rang-case {
		width: 62px;
	}
	.mrd-nt .mrd-nt-grille thead th {
		font-size: calc(var(--mrd-nt-taille-caps, 11px) * .7) !important;
		letter-spacing: .06em;
		line-height: 1.2;
	}
	.mrd-nt .mrd-nt-rang-nom {
		padding-right: 8px !important;
	}
	.mrd-nt .mrd-nt-appareil {
		flex-wrap: wrap;
	}
	.mrd-nt .mrd-nt-appareil .mrd-nt-retirer {
		margin-left: 49px;
	}

	.mrd-nt-panneau {
		position: fixed;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		border-radius: var(--mrd-nt-rayon, 10px) var(--mrd-nt-rayon, 10px) 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		max-height: 85vh;
		max-height: 85dvh;
		animation: mrd-nt-monter-feuille .22s ease;
		/* Laisse la place à la barre d'accueil de l'iPhone. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Une poignée : le geste se comprend sans mode d'emploi. */
	.mrd-nt-panneau .mrd-nt-panneau-tete {
		padding-top: 20px;
	}
	.mrd-nt-panneau .mrd-nt-panneau-tete::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 38px;
		height: 4px;
		border-radius: 4px;
		background: color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 55%, transparent);
	}
	@keyframes mrd-nt-monter-feuille {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	.mrd-nt-panneau-corps {
		max-height: calc(85vh - 120px);
		max-height: calc(85dvh - 120px);
	}

	/* La poignée qui dit « ça se tire vers le bas ». */
	.mrd-nt-panneau-tete::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 38px;
		height: 4px;
		border-radius: 2px;
		background: var(--mrd-nt-trait, rgba(42,74,61,.16));
	}
	.mrd-nt-panneau-tete {
		position: relative;
		padding-top: 18px;
	}

	/* Un voile derrière la feuille, pour détacher du contenu. */
	.mrd-nt-voile {
		position: fixed;
		inset: 0;
		background: rgba(30, 35, 32, .38);
		z-index: 9998;
		animation: mrd-nt-fondu-voile .2s ease;
	}
	@keyframes mrd-nt-fondu-voile {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.mrd-nt-page-tete {
		flex-direction: column;
		align-items: stretch;
	}
	.mrd-nt-page-tete .mrd-nt-btn {
		width: 100%;
	}

	.mrd-nt-carte {
		padding: var(--mrd-nt-espace, 14px);
	}

	/* Les filtres tiennent tous à l'écran.
	   Ils défilaient horizontalement, barre masquée : rien ne disait qu'il y
	   avait la suite à droite, et c'était illisible sur un téléphone. Ils
	   reviennent donc à la ligne, en plus petit. */
	.mrd-nt-filtres-front {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		gap: 6px;
		padding-bottom: 0;
	}
	.mrd-nt .mrd-nt-f {
		min-height: 34px;
		padding: 0 11px !important;
		font-size: calc(var(--mrd-nt-taille-caps, 11px) * .78) !important;
		letter-spacing: .07em;
		max-width: 100%;
		overflow-wrap: anywhere;
		white-space: normal;
	}
	.mrd-nt-filtres-front::-webkit-scrollbar {
		display: none;
	}
	.mrd-nt-f {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}

	.mrd-nt-boutons .mrd-nt-btn,
	.mrd-nt-centre-pied .mrd-nt-btn {
		width: 100%;
		justify-content: center;
	}

	.mrd-nt-appareil {
		flex-wrap: wrap;
	}
	.mrd-nt-retirer {
		width: 100%;
		margin-top: 6px;
	}

	.mrd-nt-toast {
		left: 12px;
		right: 12px;
		transform: none;
		max-width: none;
	}
	@keyframes mrd-nt-monter {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Sur téléphone, la cloche flottante remonte au-dessus des barres fixes. */
	.mrd-nt-pos-bas-droite,
	.mrd-nt-pos-bas-gauche {
		bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	}
}

/* Tablette : le panneau reste déroulant mais s'élargit un peu. */
@media (min-width: 641px) and (max-width: 1024px) {
	.mrd-nt-panneau {
		width: min(var(--mrd-nt-panneau-l, 392px), 60vw);
	}
	.mrd-nt-page {
		max-width: 100%;
	}
}

/* ==========================================================================
   PRÉFÉRENCES DU SYSTÈME
   ========================================================================== */

/* Quelqu'un qui a demandé moins d'animation ne doit pas voir la cloche tinter. */
@media (prefers-reduced-motion: reduce) {
	.mrd-nt *,
	.mrd-nt *::before,
	.mrd-nt *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Contraste renforcé : on épaissit les filets plutôt que de changer les couleurs. */
@media (prefers-contrast: more) {
	.mrd-nt-carte,
	.mrd-nt-panneau,
	.mrd-nt-centre-liste {
		border-width: 2px;
	}
	.mrd-nt-item.mrd-nt-nonlu::before {
		width: 8px;
		height: 8px;
	}
}

/* Impression : la cloche et les boutons n'ont rien à y faire. */
@media print {
	.mrd-nt-cloche-zone,
	.mrd-nt-panneau,
	.mrd-nt-boutons,
	.mrd-nt-filtres-front,
	.mrd-nt-centre-pied,
	.mrd-nt-toast {
		display: none !important;
	}
	.mrd-nt-carte,
	.mrd-nt-centre-liste {
		box-shadow: none !important;
		border: 1px solid #ccc !important;
	}
}

/* ==========================================================================
   PARE-FEU — 1.0.3
   --------------------------------------------------------------------------
   Le thème habille TOUS les liens, boutons et champs du site, y compris au
   survol et au focus, et sa couleur d'accent est le rose #CC3366. Sans une
   déclaration explicite dans CHAQUE état, elle repassait au travers :
   bordures roses sur les filtres, liens roses au survol, halo rose au focus.

   Ce bloc ferme la porte. Règle à tenir pour toute évolution : dans le
   plugin, on ne déclare jamais un état par défaut sans déclarer aussi
   :hover, :focus et :active. Un état non déclaré est un état laissé au thème.

   Il est volontairement placé en dernier, après les media queries, pour
   passer devant tout le reste à spécificité égale.
   ========================================================================== */

/* --- 1. Aucun halo, aucun soulignement hérités --- */
body .mrd-nt a,
body .mrd-nt button,
body .mrd-nt input,
body .mrd-nt select,
body .mrd-nt textarea,
body .mrd-nt summary,
body .mrd-nt a:hover,   .mrd-nt button:hover,   .mrd-nt input:hover,
body .mrd-nt a:focus,   .mrd-nt button:focus,   .mrd-nt input:focus,
body .mrd-nt a:active,  .mrd-nt button:active,  .mrd-nt input:active,
body .mrd-nt a:visited, .mrd-nt summary:hover,  .mrd-nt summary:focus {
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none !important;
	text-decoration-color: currentColor !important;
}

/* Le focus reste visible — on le redessine proprement, en vert. */
body .mrd-nt a:focus-visible,
body .mrd-nt button:focus-visible,
body .mrd-nt input:focus-visible,
body .mrd-nt select:focus-visible,
body .mrd-nt textarea:focus-visible,
body .mrd-nt summary:focus-visible {
	outline: 2px solid var(--mrd-nt-vert, #2A4A3D) !important;
	outline-offset: 2px !important;
}

/* --- 2. Les liens : jamais roses, dans aucun état --- */
body .mrd-nt a,
body .mrd-nt a:link,
body .mrd-nt a:visited,
body .mrd-nt a:hover,
body .mrd-nt a:focus,
body .mrd-nt a:active {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-panneau-tete a,
body .mrd-nt .mrd-nt-panneau-tete a:hover,
body .mrd-nt .mrd-nt-panneau-tete a:focus {
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	-webkit-text-fill-color: var(--mrd-nt-peche, #FBD6BA) !important;
}

/* --- 3. Les filtres --- */
body .mrd-nt .mrd-nt-f,
body .mrd-nt .mrd-nt-f:link,
body .mrd-nt .mrd-nt-f:visited,
body .mrd-nt .mrd-nt-f:active {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
	color: var(--mrd-nt-encre-douce, #6C6860) !important;
	-webkit-text-fill-color: var(--mrd-nt-encre-douce, #6C6860) !important;
}
body .mrd-nt .mrd-nt-f:hover,
body .mrd-nt .mrd-nt-f:focus,
body .mrd-nt .mrd-nt-f:focus-visible {
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-f[aria-pressed="true"],
body .mrd-nt .mrd-nt-f[aria-pressed="true"]:hover,
body .mrd-nt .mrd-nt-f[aria-pressed="true"]:focus,
body .mrd-nt .mrd-nt-f[aria-pressed="true"]:active {
	background: var(--mrd-nt-vert, #2A4A3D) !important;
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	-webkit-text-fill-color: var(--mrd-nt-peche, #FBD6BA) !important;
}

/* --- 4. Les boutons pleins --- */
body .mrd-nt .mrd-nt-btn,
body .mrd-nt .mrd-nt-btn:link,
body .mrd-nt .mrd-nt-btn:visited,
body .mrd-nt .mrd-nt-btn:active {
	background: var(--mrd-nt-vert, #2A4A3D) !important;
	border: 1px solid var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-peche, #FBD6BA) !important;
	-webkit-text-fill-color: var(--mrd-nt-peche, #FBD6BA) !important;
	text-decoration: none !important;
}
body .mrd-nt .mrd-nt-btn:hover,
body .mrd-nt .mrd-nt-btn:focus,
body .mrd-nt .mrd-nt-btn:focus-visible {
	background: var(--mrd-nt-vert-fonce, #1C331C) !important;
	border-color: var(--mrd-nt-vert-fonce, #1C331C) !important;
	color: var(--mrd-nt-peche-fonce) !important;
	-webkit-text-fill-color: var(--mrd-nt-peche-fonce) !important;
}

/* --- 5. Les boutons fantômes et « Retirer » --- */
body .mrd-nt .mrd-nt-btn-fantome,
body .mrd-nt .mrd-nt-btn-fantome:link,
body .mrd-nt .mrd-nt-btn-fantome:visited,
body .mrd-nt .mrd-nt-btn-fantome:active,
body .mrd-nt .mrd-nt-retirer {
	background: transparent !important;
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-btn-fantome:hover,
body .mrd-nt .mrd-nt-btn-fantome:focus,
body .mrd-nt .mrd-nt-btn-fantome:focus-visible {
	background: transparent !important;
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-retirer:hover,
body .mrd-nt .mrd-nt-retirer:focus {
	background: transparent !important;
	border-color: var(--mrd-nt-alerte, #8E3625) !important;
	color: var(--mrd-nt-alerte, #8E3625) !important;
	-webkit-text-fill-color: var(--mrd-nt-alerte, #8E3625) !important;
}

/* --- 6. Les liens discrets --- */
body .mrd-nt .mrd-nt-lien,
body .mrd-nt .mrd-nt-lien:link,
body .mrd-nt .mrd-nt-lien:visited,
body .mrd-nt .mrd-nt-lien:active {
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mrd-nt-peche-fonce) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
	text-decoration: none !important;
}
body .mrd-nt .mrd-nt-lien:hover,
body .mrd-nt .mrd-nt-lien:focus {
	background: none !important;
	border-bottom-color: var(--mrd-nt-vert, #2A4A3D) !important;
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-panneau-tete .mrd-nt-lien,
body .mrd-nt .mrd-nt-panneau-tete .mrd-nt-lien:link,
body .mrd-nt .mrd-nt-panneau-tete .mrd-nt-lien:visited {
	color: var(--mrd-nt-peche-fonce) !important;
	-webkit-text-fill-color: var(--mrd-nt-peche-fonce) !important;
	border-bottom-color: color-mix(in srgb, var(--mrd-nt-peche, #FBD6BA) 45%, transparent) !important;
}
body .mrd-nt .mrd-nt-panneau-tete .mrd-nt-lien:hover,
body .mrd-nt .mrd-nt-panneau-tete .mrd-nt-lien:focus {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	border-bottom-color: #fff !important;
}

/* --- 7. Les cadres --- */
body .mrd-nt .mrd-nt-carte,
body .mrd-nt .mrd-nt-centre-liste,
body .mrd-nt .mrd-nt-panneau {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
}
body .mrd-nt .mrd-nt-carte-fonct {
	border-left: 3px solid var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-carte-edito {
	border-left: 3px solid var(--mrd-nt-peche-fonce) !important;
}
body .mrd-nt .mrd-nt-etat {
	border: 1px solid var(--mrd-nt-trait, rgba(42,74,61,.16)) !important;
	border-left: 3px solid var(--mrd-nt-peche-fonce) !important;
}
body .mrd-nt .mrd-nt-etat.mrd-nt-etat-ok {
	border-left-color: var(--mrd-nt-vert, #2A4A3D) !important;
}

/* --- 8. Une notification de la liste --- */
body .mrd-nt .mrd-nt-item,
body .mrd-nt .mrd-nt-item:link,
body .mrd-nt .mrd-nt-item:visited {
	border: 0 !important;
	background: var(--mrd-nt-carte, #FFFDF7) !important;
	color: inherit !important;
}
body .mrd-nt .mrd-nt-item.mrd-nt-nonlu {
	background: var(--mrd-nt-non-lu, #FDF6E4) !important;
}
body .mrd-nt .mrd-nt-item:hover,
body .mrd-nt .mrd-nt-item:focus {
	border: 0 !important;
	background: var(--mrd-nt-survol, #FBF6E9) !important;
}
body .mrd-nt .mrd-nt-item .mrd-nt-item-titre,
body .mrd-nt .mrd-nt-item:hover .mrd-nt-item-titre {
	color: var(--mrd-nt-vert, #2A4A3D) !important;
	-webkit-text-fill-color: var(--mrd-nt-vert, #2A4A3D) !important;
}

/* --- 9. Les cases à cocher --- */
body .mrd-nt .mrd-nt-boite,
body .mrd-nt .mrd-nt-case:hover .mrd-nt-boite,
body .mrd-nt .mrd-nt-case > input:focus + .mrd-nt-boite {
	box-shadow: none !important;
}
body .mrd-nt .mrd-nt-case:hover .mrd-nt-boite {
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt .mrd-nt-case > input:checked + .mrd-nt-boite {
	background: var(--mrd-nt-vert, #2A4A3D) !important;
	border-color: var(--mrd-nt-vert, #2A4A3D) !important;
}
body .mrd-nt input[type="checkbox"] {
	accent-color: var(--mrd-nt-vert, #2A4A3D) !important;
}

/* --- 10. La cloche --- */
body .mrd-nt-cloche-zone .mrd-nt-cloche,
body .mrd-nt-cloche-zone .mrd-nt-cloche:hover,
body .mrd-nt-cloche-zone .mrd-nt-cloche:focus {
	box-shadow: none !important;
	outline: none !important;
}
body .mrd-nt-cloche-zone .mrd-nt-cloche:focus-visible {
	outline: 2px solid var(--mrd-nt-vert, #2A4A3D) !important;
	outline-offset: 2px !important;
}


/* ==========================================================================
   TÉLÉPHONE — RIEN NE DÉBORDE
   --------------------------------------------------------------------------
   Un titre sans espace, une adresse collée, un nom de catégorie long : il
   suffit d'un mot insécable pour qu'un bloc pousse la page et fasse
   apparaître un défilement horizontal qu'aucune barre n'annonce. On coupe
   donc les mots plutôt que de laisser déborder, partout où du texte libre
   peut arriver.

   Et le portail : le panneau, une fois sorti de l'en-tête, doit rester un
   simple conteneur sans contexte d'empilement — sinon on aurait déplacé le
   problème au lieu de le résoudre.
   ========================================================================== */

.mrd-nt-portail {
	position: static;
	z-index: auto;
	isolation: auto;
}

@media (max-width: 640px) {

	body .mrd-nt,
	body .mrd-nt-page,
	body .mrd-nt-panneau {
		max-width: 100vw;
	}

	/* Tout ce qui porte du texte écrit à la main */
	body .mrd-nt .mrd-nt-item-titre,
	body .mrd-nt .mrd-nt-item-apercu,
	body .mrd-nt .mrd-nt-etiq,
	body .mrd-nt .mrd-nt-rang-nom,
	body .mrd-nt .mrd-nt-rang-nom small,
	body .mrd-nt .mrd-nt-appareil-txt strong,
	body .mrd-nt .mrd-nt-appareil-txt small,
	body .mrd-nt .mrd-nt-h1,
	body .mrd-nt .mrd-nt-h2,
	body .mrd-nt .mrd-nt-h3,
	body .mrd-nt .mrd-nt-chapo,
	body .mrd-nt .mrd-nt-intro,
	body .mrd-nt .mrd-nt-note,
	body .mrd-nt .mrd-nt-etat p,
	body .mrd-nt .mrd-nt-etat strong,
	body .mrd-nt-panneau .mrd-nt-item-titre,
	body .mrd-nt-panneau .mrd-nt-item-apercu {
		overflow-wrap: anywhere;
		word-break: break-word;
		hyphens: auto;
		min-width: 0;
	}

	/* L'étiquette de catégorie ne doit plus refuser de se couper */
	body .mrd-nt .mrd-nt-etiq {
		white-space: normal;
	}

	/* Les colonnes de flexbox doivent pouvoir rétrécir */
	body .mrd-nt .mrd-nt-item,
	body .mrd-nt-panneau .mrd-nt-item {
		max-width: 100%;
	}
	body .mrd-nt .mrd-nt-item-txt,
	body .mrd-nt-panneau .mrd-nt-item-txt {
		min-width: 0;
		flex: 1 1 auto;
	}

	/* Le tableau des choix tient dans la largeur, quoi qu'il arrive */
	body .mrd-nt .mrd-nt-grille {
		table-layout: fixed;
		width: 100%;
	}
	body .mrd-nt .mrd-nt-rang-nom {
		padding-right: 8px !important;
	}

	/* Les boutons ne dépassent plus */
	body .mrd-nt .mrd-nt-btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	/* Dernier filet de sécurité : la page du compte ne défile pas de côté */
	body .mrd-nt-page {
		overflow-x: clip;
	}
}

/* ==========================================================================
 * LA LISTE DE SOUHAITS — 1.2.0
 *
 * Un seul bloc, posé par [merydar_souhaits_alerte] sur la page de la liste
 * de souhaits. Tout est préfixé « body » et redéclaré état par état : le
 * thème pousse du rose #CC3366 sur les boutons et les bordures, et une règle
 * qui ne couvre que l'état par défaut se fait reprendre au survol.
 * Voir le PARE-FEU plus haut, même raison, même méthode.
 * ========================================================================== */

body .mrd-nt-souhaits-accord {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 22px 0;
	padding: 16px 20px;
	background: var(--mrd-nt-creme, #FBF6F1);
	border: 1px solid var(--mrd-nt-trait, #E4DAD0);
	border-left: 3px solid var(--mrd-nt-peche-fonce, #EDCAA5);
	border-radius: 10px;
	box-shadow: 0 2px 14px rgba(42, 74, 61, .06);
}

body .mrd-nt-souhaits-accord form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body .mrd-nt-souhaits-texte {
	flex: 1 1 260px;
	margin: 0;
	color: var(--mrd-nt-brun, #826953);
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

body .mrd-nt-souhaits-fait {
	flex: 1 1 100%;
	margin: 0 0 4px;
	color: var(--mrd-nt-vert, #2A4A3D);
	font-style: italic;
}

body .mrd-nt-souhaits-accord .mrd-nt-bouton,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:link,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:visited,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:hover,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:focus,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:focus-visible,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--mrd-nt-vert, #2A4A3D);
	border-radius: 8px;
	background: var(--mrd-nt-vert, #2A4A3D);
	color: var(--mrd-nt-peche, #FBD6BA);
	font-family: inherit;
	font-size: .72rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

body .mrd-nt-souhaits-accord .mrd-nt-bouton:hover,
body .mrd-nt-souhaits-accord .mrd-nt-bouton:focus-visible {
	background: var(--mrd-nt-vert-fonce, #1C331C);
	border-color: var(--mrd-nt-vert-fonce, #1C331C);
	color: var(--mrd-nt-peche, #FBD6BA);
}

@media (max-width: 600px) {
	body .mrd-nt-souhaits-accord { padding: 14px 16px; }
	body .mrd-nt-souhaits-accord .mrd-nt-bouton { width: 100%; }
}

/* ── La messagerie ──────────────────────────────────────────────────── */

.mrd-nt-fils {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrd-nt-fil a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--mrd-nt-trait, #d8d5cd);
	border-radius: 8px;
	margin-bottom: 8px;
	text-decoration: none;
}

.mrd-nt-fil.non-lu a {
	border-color: #2a4a3d;
	background: #f3f7f4;
}

.mrd-nt-fil-date {
	margin-left: auto;
	font-size: 13px;
	opacity: .7;
}

.mrd-nt-pastille {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	background: #2a4a3d;
	color: #fbd6ba;
	border-radius: 10px;
	font-size: 12px;
	text-align: center;
}

.mrd-nt-messages {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.mrd-nt-message {
	margin-bottom: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #f4f1ea;
}

.mrd-nt-message.de-merydar {
	background: #2a4a3d;
	color: #fbead1;
}

.mrd-nt-message-qui {
	font-size: 13px;
	opacity: .85;
	padding-bottom: 4px;
}

.mrd-nt-message-quand {
	font-size: 12px;
	opacity: .8;
}

.mrd-nt-message-corps p:last-child {
	margin-bottom: 0;
}

.mrd-nt-repondre textarea,
.mrd-nt-question textarea {
	width: 100%;
	min-height: 90px;
	margin: 6px 0 8px;
	padding: 10px 12px;
	border: 1px solid var(--mrd-nt-trait, #d8d5cd);
	border-radius: 8px;
	font: inherit;
}

.mrd-nt-question {
	margin-top: 24px;
	padding: 16px;
	border: 1px solid var(--mrd-nt-trait, #d8d5cd);
	border-radius: 10px;
}

.mrd-nt-envoye {
	padding: 10px 14px;
	background: #e4ede6;
	border-radius: 8px;
}