/* =========================================================================
   NeptunePlage — notes et commentaires (13-np-avis.php)
   Charge sur TOUTES les fiches recettes (template v2 ET ancien template),
   par le mu-plugin 13-np-avis.php. Extrait de np-recette.css le 04/08.
   Les variables --np-* de la charte sont redeclarees ici : sur l'ancien
   template, np-recette.css n'est pas charge.
   ========================================================================= */

.np-noter, .comments-area, .np-avis-conteneur, .np-note-resume {
	--np-navy:      #1D3F53;
	--np-navy-doux: #276681;
	--np-ocre:      #DAA53F;
	--np-sable:     #b78455;
	--np-pale2:     #f7f9fc;
	--np-creme:     #fdf6ea;
	--np-bord:      #e0e8f0;
	--np-encre:     #43474C;
	--np-gris:      #6b7787;
	--np-rayon:     10px;
}

/* Sur l'ancien template, rien ne centre le contenu ajoute : le bloc etoiles
   et les commentaires portent leur propre conteneur, aligne sur les blocs
   GenerateBlocks (1200 px). Sur le template v2, .np-fiche s'en charge deja. */
.np-avis-conteneur { max-width: 1200px; margin-inline: auto; padding-inline: 30px; }
.comments-area { max-width: 1200px; margin-inline: auto; padding-inline: 30px; }
.page-template-template-recette-v2 .comments-area { max-width: none; padding-inline: 0; }

@media (max-width: 600px) {
	.np-avis-conteneur, .comments-area { padding-inline: 16px; }
	.page-template-template-recette-v2 .comments-area { padding-inline: 0; }
}

/* =========================================================================
   Notes et commentaires (13-np-avis.php) — 04/08/2026
   Le bloc « Note-la » avant l'autrice, les commentaires apres les similaires.
   ========================================================================= */

.np-visuellement-cache {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- etoiles d'affichage (moyenne, avis publies) ---------- */

.np-etoiles { display: inline-flex; gap: 2px; color: var(--np-ocre); vertical-align: -3px; }

.np-note-resume { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.np-note-resume .np-etoiles svg { width: 15px; height: 15px; }
.np-note-resume__chiffre { font-weight: 700; color: var(--np-navy); }
.np-note-resume__nb { color: var(--np-gris); }
.np-note-resume:hover .np-note-resume__chiffre { color: var(--np-ocre); }

/* ---------- le bloc « Note-la ! » ---------- */

.np-noter {
	margin: 46px 0 40px;
	padding: 34px 28px 30px;
	background: var(--np-creme);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	text-align: center;
}
.np-noter__titre {
	margin: 0 0 8px;
	color: var(--np-navy);
	font-size: clamp(21px, 2.1vw, 26px);
	font-weight: 700;
	line-height: 1.25;
}
.np-noter__intro { margin: 0 0 18px; color: var(--np-gris); font-size: 15px; }
.np-noter__etoiles { display: inline-flex; gap: 8px; }
.np-noter__etoile {
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: #cfd8e3;
	transition: transform .12s ease, color .12s ease;
}
.np-noter__etoile svg { width: 40px; height: 40px; fill: currentColor; display: block; }
.np-noter__etoile:hover { transform: scale(1.12); }
.np-noter__etoile:focus-visible { outline: 2px solid var(--np-ocre); outline-offset: 2px; border-radius: 6px; }
.np-noter__etoile.est-pleine { color: var(--np-ocre); }
.np-noter__etoile:disabled { cursor: default; }
.np-noter--vote .np-noter__etoile { transform: none; }
.np-noter__etat { margin: 14px 0 0; font-size: 16px; color: var(--np-encre); }
.np-noter__etat strong { color: var(--np-navy); }
.np-noter__plus { margin: 8px 0 0; font-size: 14px; color: var(--np-gris); }
.np-noter__plus a { color: var(--np-navy-doux); text-decoration: underline; text-underline-offset: 3px; }
.np-noter__plus a:hover { color: var(--np-ocre); }

/* ---------- la zone commentaires ---------- */

.comments-area { margin-block: 0 60px; } /* margin-block seulement : le raccourci margin ecrasait le centrage margin-inline:auto de l ancien template */
.comments-area .comments-title,
.comments-area .comment-reply-title {
	margin: 0 0 22px;
	color: var(--np-encre);
	font-size: clamp(22px, 2.3vw, 30px);
	font-weight: 700;
	line-height: 1.25;
}
.comments-area .comment-reply-title { font-size: clamp(20px, 2vw, 25px); }

.comments-area ol.comment-list,
.comments-area ol.children { list-style: none; margin: 0; padding: 0; }
.comments-area ol.children { margin: 14px 0 0 26px; }
.comments-area li.comment { margin: 0 0 16px; }

.comments-area .comment-body {
	background: var(--np-pale2);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	padding: 18px 20px 14px;
}
.comments-area .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--np-navy); }
.comments-area .comment-author .avatar { width: 40px; height: 40px; border-radius: 50%; }
.comments-area .comment-author .says { display: none; }
.comments-area .comment-metadata { font-size: 13px; margin: 2px 0 0 50px; }
.comments-area .comment-metadata a { color: var(--np-gris); text-decoration: none; }
.comments-area .comment-content { margin-top: 10px; font-size: 16px; }
.comments-area .comment-content p { margin: 0 0 10px; }
.np-avis__note { margin: 10px 0 4px; }
.np-avis__note .np-etoiles svg { width: 16px; height: 16px; }
.comments-area .reply { font-size: 14px; }
.comments-area .reply a { color: var(--np-navy-doux); text-decoration: none; }
.comments-area .reply a:hover { color: var(--np-ocre); }
.comments-area .comment-awaiting-moderation { color: var(--np-sable); font-style: italic; font-size: 14px; }

/* ---------- le formulaire ---------- */

.comment-respond { margin-top: 8px; }
.np-avis__intro { color: var(--np-gris); font-size: 15px; margin: 0 0 16px; }

.comment-respond label { display: block; font-weight: 600; margin: 0 0 6px; color: var(--np-encre); }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond textarea {
	width: 100%;
	max-width: 640px;
	border: 1px solid var(--np-bord);
	border-radius: 8px;
	background: #fff;
	padding: 11px 14px;
	font: inherit;
	color: var(--np-encre);
}
.comment-respond input:focus,
.comment-respond textarea:focus {
	outline: none;
	border-color: var(--np-ocre);
	box-shadow: 0 0 0 3px rgba(218, 165, 63, .18);
}
.comment-respond .comment-form-comment,
.comment-respond .comment-form-author,
.comment-respond .comment-form-email { margin: 0 0 14px; }
.comment-respond .comment-form-cookies-consent {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 14px;
	color: var(--np-gris);
	margin: 0 0 14px;
}
.comment-respond .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; }

.comment-respond .form-submit { margin: 6px 0 0; }
.comment-respond .form-submit .submit {
	background: var(--np-navy);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.comment-respond .form-submit .submit:hover { background: var(--np-navy-doux); }

/* la note facultative du formulaire : etoiles radio, du meme ocre */
.np-note-saisie { margin: 0 0 14px; }
.np-note-saisie__libelle { display: block; font-weight: 600; margin-bottom: 6px; }
.np-note-saisie__opt { font-weight: 400; color: var(--np-gris); font-size: 14px; }
.np-note-saisie__etoiles { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.np-note-saisie__etoiles input { position: absolute; opacity: 0; pointer-events: none; }
.np-note-saisie__etoiles label { cursor: pointer; color: #cfd8e3; padding: 2px; margin: 0; }
.np-note-saisie__etoiles label svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.np-note-saisie__etoiles input:checked ~ label,
.np-note-saisie__etoiles label:hover,
.np-note-saisie__etoiles label:hover ~ label { color: var(--np-ocre); }
.np-note-saisie__etoiles input:focus-visible + label { outline: 2px solid var(--np-ocre); outline-offset: 2px; border-radius: 6px; }

/* champ piege : hors ecran, jamais display:none (un robot verifierait) */
.np-piege { position: absolute !important; left: -9999px !important; }

/* ---------- responsive + modes ---------- */

@media (max-width: 600px) {
	.np-noter { padding: 24px 16px 22px; }
	.np-noter__etoiles { gap: 2px; }
	/* cible tactile >= 48 px : 36 px d'etoile + 6 px de marge interne */
	.np-noter__etoile { padding: 6px; }
	.np-noter__etoile svg { width: 36px; height: 36px; }
	.comments-area .comment-body { padding: 14px 14px 10px; }
	.comments-area ol.children { margin-left: 12px; }
	.comment-respond input[type="text"],
	.comment-respond input[type="email"],
	.comment-respond textarea { max-width: none; }
}

.np-mode-cuisine .np-noter,
.np-mode-cuisine .comments-area { display: none !important; }

@media print {
	.np-noter, .comments-area { display: none !important; }
}