/* ==========================================================================
   Page « Nutritionniste à Vienne » — maquette validée le 24/10/2026
   Proportions et couleurs de la maquette ; polices et intitulés du thème (Nunito, Roboto, Lato), comme les autres pages.
   Chargée uniquement sur la page Nutritionniste (et dans l’éditeur). Tout est rangé sous .arn-page.
   ========================================================================== */

:is(.ar-page, .editor-styles-wrapper) .arn-page {
	--arn-prune: #814c6a;
	--arn-prune-titre: #7b4e66;
	--arn-prune-profond: #634052;
	--arn-rose-accent: #c07c9e;
	--arn-rose-fond: #f9f5f6;
	--arn-filet: #eadde3;
	--arn-texte: #6a6567;
	--arn-texte-sur-prune: #ebd9e2;
	--arn-police-titres: Lato, Arial, sans-serif;
	--arn-police-texte: Nunito, Arial, sans-serif;
	--arn-police-intitule: Roboto, Arial, sans-serif;
	--arn-largeur: 1200px;
	--arn-marge: 40px;
	/* Respirations de chapitres, sans modifier les compositions validées. */
	--arn-espace-section: 80px;
	--arn-espace-programme: 36px;
	/* marge latérale qui aligne un demi-fond pleine largeur sur la grille de 1200px */
	--arn-bord: max(var(--arn-marge), calc((100vw - var(--arn-largeur)) / 2 + var(--arn-marge)));

	font-family: var(--arn-police-texte);
	font-size: 16px;
	line-height: 1.8;
	color: var(--arn-texte);
}

/* --- Remises à zéro ---------------------------------------------------------- */

:is(.ar-page, .editor-styles-wrapper) .arn-page > .alignfull {
	width: 100%;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page :is(p, ul, ol, li, h1, h2, figure, blockquote) { margin: 0; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .wp-block-group { box-sizing: border-box; }
/* pas d’espacement automatique de WordPress entre les blocs : chaque écart est réglé ci-dessous */
:is(.ar-page, .editor-styles-wrapper) .arn-page .wp-block-group > * { margin-block-start: 0; }
:is(.ar-page, .editor-styles-wrapper) .arn-page strong { color: var(--arn-prune-profond); }
/* mot d’accent rose dans un titre : couleur de la maquette, jamais de surlignage */
:is(.ar-page, .editor-styles-wrapper) .arn-page mark.has-inline-color { background: transparent; color: var(--arn-rose-accent) !important; }

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-conteneur {
	max-width: var(--arn-largeur);
	margin: 0 auto;
	padding-left: var(--arn-marge);
	padding-right: var(--arn-marge);
}

/* --- Titres ------------------------------------------------------------------ */

:is(.ar-page, .editor-styles-wrapper) .arn-page :is(h1, .arn-titre, .arn-sous-titre) {
	font-family: var(--arn-police-titres);
	font-weight: 300;
	font-style: normal;
	color: var(--arn-prune-titre);
	letter-spacing: normal;
	text-transform: none;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-titre { font-size: 48px; line-height: 1.1; margin-bottom: 36px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-sous-titre { font-size: 34px; line-height: 1.2; margin-bottom: 16px; }

/* --- Intitulé de section : « —— APPROCHE », même grammaire que les autres pages (editorial.css) --- */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-intitule {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	font-family: var(--arn-police-intitule);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--arn-prune);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-intitule::before {
	content: "";
	flex: 0 0 39px;
	height: 1px;
	background: var(--ar-pale, #d6b2c4);
}
/* pas de numérotation des sections (règle commune du site) */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-intitule::after { content: none; }

/* --- Bouton prune ------------------------------------------------------------ */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-boutons { margin: 0; display: flex; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-bouton .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 0;
	background: var(--arn-prune);
	color: #fff;
	font-family: var(--arn-police-texte);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: normal;
	text-transform: none;
	padding: 15px 22px;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	text-decoration: none;
	transition: background-color .2s ease;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-bouton .wp-block-button__link::after {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-bouton .wp-block-button__link:is(:hover, :focus-visible) { background: var(--arn-prune-profond); color: #fff; }

/* --- Photo qui se fond dans le blanc ----------------------------------------- */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo { position: relative; overflow: hidden; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* l'image s'arrête 2px avant le bord fondu : évite un liseré dû à l'arrondi des calques */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-droite img { right: 2px; width: calc(100% - 2px); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-gauche img { left: 2px; width: calc(100% - 2px); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-gauche::after {
	background: linear-gradient(90deg, #fff 0%, #fff 1.5%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-droite::after {
	background: linear-gradient(270deg, #fff 0%, #fff 1.5%, rgba(255,255,255,.6) 14%, rgba(255,255,255,0) 34%);
}

/* Les rangées reprennent la logique de la maquette : flex avec base et répartition identiques. */

/* --- Ouverture ------------------------------------------------------------------ */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero {
	display: flex;
	flex-wrap: wrap;
	min-height: 600px;
	background: #fff;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__texte {
	flex: 45 1 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 48px 96px var(--arn-bord);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero .arn-photo { flex: 55 1 520px; min-height: 460px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero .arn-photo img { object-position: 55% 50%; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__texte .arn-intitule { margin-bottom: 32px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__titre { font-size: 76px; line-height: 1.04; letter-spacing: -0.01em; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__citation {
	margin: 40px 0 44px;
	padding: 0 0 0 24px;
	border: 0;
	border-left: 2px solid var(--arn-rose-accent);
	max-width: 440px;
	box-sizing: content-box;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__citation p {
	font-family: var(--arn-police-titres);
	font-style: italic;
	font-weight: 300;
	font-size: 23px;
	line-height: 1.5;
	color: var(--arn-prune-profond);
}

/* --- 01 Mon approche ------------------------------------------------------------ */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--arn-filet);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau {
	flex: 42 1 420px;
	background: var(--arn-prune);
	color: #fff;
	padding: var(--arn-espace-section) 72px var(--arn-espace-section) var(--arn-bord);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau .arn-intitule { color: #fff; margin-bottom: 36px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau .arn-intitule::before { background: var(--arn-texte-sur-prune); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau .arn-titre { color: #fff; font-size: 56px; line-height: 1.08; margin-bottom: 36px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau .arn-titre::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin-top: 24px;
	background: var(--arn-texte-sur-prune);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau p:not(.arn-intitule) { color: #fff; font-size: 17px; line-height: 1.8; max-width: 400px; }

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__suite {
	flex: 58 1 520px;
	background: var(--arn-rose-fond);
	padding: var(--arn-espace-section) var(--arn-bord) var(--arn-espace-section) 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 48px;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-chapo {
	font-family: var(--arn-police-titres);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.45;
	color: var(--arn-prune-profond);
	max-width: 560px;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-carte {
	background: #fff;
	border-left: 2px solid var(--arn-prune);
	border-radius: 2px;
	padding: 32px 36px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--arn-texte);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-carte strong {
	font-family: var(--arn-police-titres);
	font-weight: 400;
	font-size: 26px;
	color: var(--arn-prune);
	white-space: nowrap;
}

/* --- 02 Pourquoi me consulter ? ---------------------------------------------------- */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs { background: #fff; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 64px;
	align-items: center;
	justify-content: center;
	padding-top: var(--arn-espace-section);
	padding-bottom: var(--arn-espace-section);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste {
	flex: 1 1 300px;
	list-style: none;
	padding: 0;
	font-family: var(--arn-police-titres);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--arn-prune-profond);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste li { padding: 24px 0; border-bottom: 1px solid var(--arn-filet); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste li:last-child { border-bottom: 0; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste--gauche { order: 0; text-align: right; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste--droite { order: 2; text-align: left; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre {
	/* Le titre précède les motifs dans le DOM ; seul l’ordre visuel reste central. */
	order: 1;
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::before,
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::after {
	content: "";
	width: 1px;
	height: 72px;
	background: var(--arn-rose-accent);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::before { margin-bottom: 32px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::after { margin-top: 32px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre .arn-intitule { margin-bottom: 20px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre .arn-titre { font-size: 50px; line-height: 1.1; margin: 0; }

/* --- 03 La première séance ------------------------------------------------------ */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance { background: var(--arn-rose-fond); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
	align-items: stretch;
	padding-top: var(--arn-espace-section);
	padding-bottom: var(--arn-espace-section);
}
/* colonne gauche : panneau prune de la hauteur des étapes, en écho à Mon approche */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro {
	flex: 4 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--arn-prune);
	border-radius: 2px;
	padding: 56px 48px;
	color: #fff;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro .arn-intitule { color: #fff; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro .arn-intitule::before { background: var(--arn-texte-sur-prune); }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro .arn-titre { color: #fff; font-size: 46px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-duree { font-size: 17px; line-height: 1.6; color: #fff; margin-bottom: 48px; }
/* « 1 h 30 » sur sa propre ligne, en grand */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-duree strong {
	display: block;
	font-family: var(--arn-police-titres);
	font-weight: 300;
	font-size: 72px;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	margin: 10px 0 12px;
}
/* paragraphe d’écoute posé en bas du panneau, sous un filet clair */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-filet-rose {
	margin-top: auto;
	padding-top: 28px;
	border-top: 1px solid rgba(235, 217, 226, 0.4);
	font-size: 15px;
	line-height: 1.8;
	color: var(--arn-texte-sur-prune);
}

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes {
	flex: 8 1 560px;
	min-width: 0;
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--arn-filet);
	counter-reset: arn-etape;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes li {
	counter-increment: arn-etape;
	position: relative;
	padding: 30px 0 30px 88px;
	border-bottom: 1px solid var(--arn-filet);
	font-size: 16px;
	line-height: 1.8;
	color: var(--arn-texte);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes li::before {
	content: counter(arn-etape);
	position: absolute;
	left: 0;
	top: 30px;
	font-family: var(--arn-police-titres);
	font-weight: 300;
	font-size: 40px;
	line-height: 1;
	color: var(--arn-prune-titre);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes li strong {
	display: block;
	font-family: var(--arn-police-titres);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.35;
	margin-bottom: 6px;
}

/* --- Conclusion : séances suivantes + programme ------------------------------- */

:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi .arn-photo { flex: 44 1 440px; min-height: 520px; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi .arn-photo img { object-position: 42% 55%; }
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi__texte {
	flex: 56 1 520px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--arn-espace-section) var(--arn-bord) var(--arn-espace-section) 56px;
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi__texte > p:not(.arn-intitule) { font-size: 17px; line-height: 1.8; color: var(--arn-texte); max-width: 600px; }
/* Le filet relie le bilan du suivi au programme, avec un intervalle plus court. */
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi__programme {
	font-size: 44px;
	line-height: 1.15;
	max-width: 600px;
	margin: var(--arn-espace-programme) 0 28px;
	padding-top: var(--arn-espace-programme);
	border-top: 1px solid var(--arn-filet);
}
:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi .arn-bouton .wp-block-button__link { padding: 16px 24px; }

/* --- Tablette et mobile -------------------------------------------------------------- */

@media (max-width: 960px) {
	:is(.ar-page, .editor-styles-wrapper) .arn-page { --arn-marge: 24px; --arn-bord: 24px; --arn-espace-section: 56px; --arn-espace-programme: 32px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page :is(.arn-hero, .arn-approche, .arn-suivi) > * { flex-basis: 100%; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__texte { padding: 64px 24px 48px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero__titre { font-size: 52px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-hero .arn-photo { min-height: 320px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-gauche::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 25%); }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-photo--fondu-droite::after { background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 25%); }
	:is(.ar-page, .editor-styles-wrapper) .arn-page :is(.arn-approche__panneau, .arn-approche__suite) { padding: var(--arn-espace-section) 24px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-approche__panneau .arn-titre { font-size: 44px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-chapo { font-size: 23px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-titre { font-size: 38px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__grille { gap: 0; padding-top: var(--arn-espace-section); padding-bottom: var(--arn-espace-section); }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste { flex-basis: 100%; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre { flex-basis: 100%; order: -1; margin-bottom: 24px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::before,
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre::after { display: none; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__centre .arn-titre { font-size: 38px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page :is(.arn-motifs__liste--gauche, .arn-motifs__liste--droite) { text-align: center; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste--gauche li:last-child { border-bottom: 1px solid var(--arn-filet); }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste li { font-size: 19px; padding: 18px 0; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__grille { gap: 48px; padding-top: var(--arn-espace-section); padding-bottom: var(--arn-espace-section); }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro { padding: 44px 28px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-duree strong { font-size: 56px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-seance__intro .arn-titre { font-size: 38px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page :is(.arn-seance__intro, .arn-etapes) { flex-basis: 100%; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes li { padding-left: 64px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-etapes li::before { font-size: 32px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi .arn-photo { min-height: 300px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi__texte { padding: var(--arn-espace-section) 24px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-suivi__programme { font-size: 34px; }
}

@media (max-width: 620px) {
	:is(.ar-page, .editor-styles-wrapper) .arn-page { --arn-espace-section: 48px; --arn-espace-programme: 28px; }
}
/* Ordinateur compact : conserver les deux groupes autour du titre central.
   L’écart réduit laisse les listes rétrécir, sans créer une seconde rangée. */
@media (min-width: 961px) and (max-width: 1200px) {
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__grille { flex-wrap: nowrap; column-gap: 32px; }
	:is(.ar-page, .editor-styles-wrapper) .arn-page .arn-motifs__liste { flex-basis: 0; min-width: 0; }
}