/* =========================================================================
   NeptunePlage — page autrice
   Charge apres np-recette.css (dont elle reprend les variables et les rythmes).
   Ecrite le 05/08/2026. La STRUCTURE s'inspire d'une page de presentation
   efficace ; l'HABILLAGE est 100 % NeptunePlage — un site du reseau ne
   reprend jamais le gabarit visuel d'un autre (doctrine anti-empreinte).
   ========================================================================= */

.np-autrice-page {
	padding-bottom: 10px;
}

/* ---------- l'entete ---------- */

.np-autrice__entete {
	text-align: center;
	margin: 36px 0 30px;
}

.np-autrice-page .np-titre {
	margin: 0;
	color: var(--np-navy);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.12;
	text-wrap: balance;
}

/* ---------- le recit : texte a gauche, portrait a droite ---------- */

/* Le recit occupe les deux tiers : a 1,35 contre 1, la colonne de texte tombait
   sous 400 px et se lisait mal (constate a la QA du 05/08). Le portrait est
   borne en largeur pour ne plus ecraser le recit. */
.np-autrice__recit {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 50px;
	align-items: start;
	margin: 0 0 60px;
}

.np-autrice__accroche {
	margin: 0 0 22px;
	color: var(--np-navy);
	font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1.35;
	font-weight: 700;
}

.np-autrice-page .np-autrice__texte {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
}

.np-autrice-page .np-autrice__texte p {
	margin: 0 0 16px;
}

.np-autrice-page .np-autrice__texte h2 {
	margin: 30px 0 12px;
	color: var(--np-navy);
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.25;
	font-weight: 700;
}

.np-autrice-page .np-autrice__texte h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 10px;
	background: var(--np-ocre);
	border-radius: 2px;
}

.np-autrice-page .np-autrice__texte a {
	color: var(--np-navy-doux);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.np-autrice-page .np-autrice__texte a:hover { color: var(--np-ocre); }

/* La signature : le prenom, ecrit d'un trait, en ocre. */
.np-autrice__signature {
	margin: 26px 0 0;
	text-align: right;
	padding-right: 12px;
	color: var(--np-ocre);
	font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
	font-size: 34px;
	line-height: 1;
}

/* Le portrait, colle en haut du texte, avec le filet ocre de la charte. */
.np-autrice__portrait {
	margin: 0;
	position: relative;
	max-width: 340px;
	justify-self: end;
}

.np-autrice__portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--np-rayon);
}

.np-autrice__portrait::after {
	content: "";
	position: absolute;
	left: -12px;
	bottom: -12px;
	width: 96px;
	height: 96px;
	border-left: 4px solid var(--np-ocre);
	border-bottom: 4px solid var(--np-ocre);
	border-bottom-left-radius: var(--np-rayon);
	pointer-events: none;
}

/* ---------- la galerie de plats ---------- */

.np-autrice-galerie { margin: 0 0 58px; }

.np-autrice__h2 {
	margin: 0 0 26px;
	color: var(--np-navy);
	font-size: clamp(22px, 2.4vw, 31px);
	font-weight: 700;
	line-height: 1.25;
}

.np-autrice__h2--centre { text-align: center; }

.np-autrice__h2--centre::after {
	content: "";
	display: block;
	width: 62px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--np-ocre);
	border-radius: 2px;
}

.np-autrice-galerie__grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.np-vignette a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--np-rayon);
	text-decoration: none;
}

.np-vignette__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .45s ease;
}

.np-vignette a:hover .np-vignette__img,
.np-vignette a:focus-visible .np-vignette__img { transform: scale(1.06); }

/* Le nom du plat n'apparait qu'au survol : la grille reste une planche de photos. */
.np-vignette__nom {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 14px 12px;
	background: linear-gradient(to top, rgba(29, 63, 83, .92), rgba(29, 63, 83, 0));
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}

.np-vignette a:hover .np-vignette__nom,
.np-vignette a:focus-visible .np-vignette__nom { opacity: 1; transform: none; }

.np-vignette a:focus-visible { outline: 3px solid var(--np-ocre); outline-offset: 3px; }

/* ---------- la bande d'invitation finale ---------- */

.np-autrice-cta {
	background: var(--np-creme);
	border: 1px solid var(--np-bord);
	border-radius: var(--np-rayon);
	padding: 38px 32px 40px;
	text-align: center;
	margin: 0 0 20px;
}

.np-autrice-cta__titre {
	margin: 0 0 10px;
	color: var(--np-navy);
	font-size: clamp(21px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
}

.np-autrice-cta__texte {
	margin: 0 auto 22px;
	max-width: 62ch;
	color: var(--np-gris);
	font-size: 16.5px;
}

.np-autrice-cta__bouton {
	display: inline-block;
	background: var(--np-navy);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	transition: background .16s ease;
}

.np-autrice-cta__bouton:hover { background: var(--np-navy-doux); color: #fff; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.np-autrice__entete { margin-top: 26px; }
	.np-autrice__recit {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	/* Sur une colonne, le portrait passe AVANT le recit : on voit le visage d'abord. */
	.np-autrice__portrait { order: -1; }
	.np-autrice__portrait img { aspect-ratio: 3 / 2; }
	.np-autrice__portrait::after { display: none; }
	.np-autrice-galerie__grille { gap: 12px; }
}

@media (max-width: 600px) {
	.np-autrice-page .np-autrice__texte { font-size: 16px; }
	.np-autrice-galerie__grille { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.np-autrice__signature { font-size: 30px; }
	.np-autrice-cta { padding: 28px 18px 30px; }
	/* Sans survol possible, le nom du plat reste lisible en permanence. */
	.np-vignette__nom { opacity: 1; transform: none; font-size: 13px; padding: 20px 10px 9px; }
}

@media print {
	.np-autrice-cta, .np-autrice-galerie { display: none !important; }
}